@charset "UTF-8";


/*全体の設定
---------------------------------------------------------------------------*/
* {
    margin: 0;
    padding: 0;
}

body {
	font-family: "Helvetica Neue",Arial,"Hiragino Kaku Gothic ProN","Hiragino Sans",Meiryo,sans-serif;
	-webkit-text-size-adjust: none;
	background: #fff;	/*背景色*/
	color: #666;		/*全体の文字色*/
	font-size: 16px;	/*基準となるフォントサイズの上書き*/
	line-height: 2;		/*行間*/
	overflow-x: hidden;
}

main {
	max-width: 1200px;
	text-align: center;
	margin: 0 auto;
}

/*table全般の設定*/
table {border-collapse:collapse;}

/*画像全般の設定*/
img {border: none;max-width: 100%;height: auto;vertical-align: middle;}

/*youtube　レスポンス*/
.youtube_res{
  position:relative;
  width:100%;
  padding-top:56.25%;
}
.youtube_res iframe{
  position:absolute;
  top:0;
  right:0;
  width:100%;
  height:100%;
  margin: 30px 0;
}

/*リンクテキスト全般の設定
---------------------------------------------------------------------------*/
a {
	color: #666;	/*文字色*/
	transition: 0.3s;
}

a:hover {
	opacity: 0.7;	/*マウスオン時に70%の透明度にする*/
}

/*header（ロゴが入った最上段のブロック）
---------------------------------------------------------------------------*/
/*ヘッダーブロック*/
header {
	background: #30dd8d;	/*背景色*/
	position: relative;
}

/*ロゴ画像*/
header #logo {margin: 0;}

/*ロゴ画像（※トップページ以外）*/
.page header #logo img {
	display: block;
	height: 75px;	/*画像の高さ。*/
	margin: 0 auto;	/*左右中央に配置*/
}




/*sectionタグ*/
section,
main > article,
.c2,
#footermenu {
	padding: 3% 80px;		/*上下、左右へのボックス内の余白*/
}

/*mainブロック設定
---------------------------------------------------------------------------*/
/*mainブロックの設定*/
main {	
	padding: 60px 0px;	/*上下、左右へのブロック内の余白*/
}

/*mainブロック内のh2タグ*/
main h2 {
	position: relative;
	margin: 0;
	margin: 0 0 30px;		/*上、左右、下に空けるスペース*/
	letter-spacing: 0.1em;	/*文字間隔を少しだけ広くとる設定*/
	text-align: center;		/*中身をセンタリング*/
	font-size: 2.2em;		/*文字サイズ。親要素の220%に。*/
}

/*h2タグ内のspanタグ。飾り文字用。*/
main h2 span {
	display: block;
	font-size: 0.5em;	/*文字サイズ。親要素の50%に。*/
	color: #4D9C08;		/*文字色*/
}

/*mainブロック内のh3タグ*/
main h3 {
	padding: 5px 20px;		/*上下、左右への余白*/
	margin: 0 0 20px;		/*上、左右、下に空けるスペース*/
	background: #f7f7f7;	/*背景色*/
	border-radius: 5px;		/*角を丸くする指定*/
	border: 1px solid #ddd;	/*枠線の幅、線種、色*/
}

/*mainブロックのpタグ*/
main p {
	margin: 0 20px 30px;	/*上、左右、下へ空けるスペース*/
}

main p + p {margin-top: -10px;}


/*テーブル
---------------------------------------------------------------------------*/
/*テーブル１行目に入った見出し部分（※caption）*/
.area1 caption {
	font-weight: bold;		/*太字*/
	padding: 10px 5px;		/*上下、左右へのボックス内の余白。*/
	border: 3px solid #4d9c08;	/*枠線の幅、線種、色*/
	color: #4d9c08;			/*文字色*/
	background: #fff8d5;	/*背景色*/
	font-size: 1.2em;		/*文字サイズ。親要素の1.2倍。*/
	margin-bottom: 15px;	/*下に空けるスペース*/
	border-radius: 5px;		/*角を丸くする指定*/
}

/*area1テーブルブロック設定*/
.area1 {
	border-top: 1px solid #ccc;	/*テーブルの一番上の線。幅、線種、色*/
	width: 100%;
	margin: 0 auto 30px;		/*最後の「30px」がテーブルの下に空けるスペースです*/
}

/*tr（１行分）タグ設定*/
.area1 tr {
	border-bottom: 1px solid #ccc;	/*テーブルの下線。幅、線種、色*/
}

/*th（左側）、td（右側）の共通設定*/
.area1 th, .area1 td {
	padding: 20px 15px;		/*上下、左右へのボックス内の余白*。基本的に数行上の「.area1 caption」のpaddingと揃えておけばOKです。*/
	word-break: break-all;	/*英語などのテキストを改行で自動的に折り返す設定。これがないと、テーブルを突き抜けて表示される場合があります。*/
}

/*th（左側）のみの設定*/
.area1 th {
	width: 20%;			/*幅*/
	text-align: left;	/*左よせにする*/
}



/*WEBサイトへのボタン設定
---------------------------------------------------------------------------*/
.contact-btn {
	margin: 0 auto;
	width: 450px;
	text-align: center;
}

.contact-btn a,
.contact-btn input {
	text-decoration: none;border: none;
	display: block;
	border-radius: 50px;
	font-size: 20px;
	font-weight: 700;
	box-shadow: 2px 2px 5px rgba(0,0,0,0.2);	/*ボックスの影。右へ、下へ、ぼかし幅の順。0,0,0は黒の事で0.2は色が20%出た状態。*/
	background: #d7083b;	/*背景色*/
	letter-spacing: 1px;	/*文字間隔を少し広くする指定*/
	color: #fff;			/*文字色*/
	transition: 0.3s;		/*hoverまでにかける時間。0.3秒。*/
	padding: 0.7em 1em;		/*上下、左右へのボタン内の余白*/
	margin-top: 2em;		/*ボタンの上に１文字分のスペースを空ける*/
}

/*ボタンのマウスオン時*/
.contact-btn a:hover,
.contact-btn input:hover {
	cursor: pointer;
	opacity: 1;
	filter: brightness(1.2);	/*少しだけ明るく。*/
	transform: scale(1.02);		/*実寸の102%に拡大*/
}

/*ボタン内にiタグを使った場合*/
.contact-btn i {
	margin-left: 15px;		/*テキストとの間に空ける余白*/
	opacity: 0.5;
	transform: scale(1.4);	/*サイズを1.4倍にする*/
}


/*PAGE TOP（↑）設定
---------------------------------------------------------------------------*/
.pagetop-show {display: block;}

/*ボタンの設定*/
.pagetop a {
	display: block;text-decoration: none;text-align: center;z-index: 99;
	background: rgba(230,86,70,0.6);	/*背景色。*/
	position: fixed;		/*スクロールに追従しない(固定で表示)為の設定*/
	right: 20px;			/*右からの配置場所指定*/
	bottom: 20px;			/*下からの配置場所指定*/
	color: #fff;			/*文字色*/
	font-size: 1.5em;		/*文字サイズ*/
	width: 60px;			/*幅*/
	line-height: 60px;		/*高さ*/
	border-radius: 50%;		/*円形にする*/
}





/*フッター設定
---------------------------------------------------------------------------*/
footer small {font-size: 100%;}

footer {
	margin-top: 60px;
	font-size: 0.6em;		/*文字サイズ*/
	background: #333;		/*背景色*/
	color: #fff;			/*文字色*/
	text-align: center;		/*内容をセンタリング*/
	padding: 20px;			/*ボックス内の余白*/
}

/*リンクテキスト*/
footer a {color: #fff;text-decoration: none;}












/*media Queries PCサイズ（960px）以上で適応したいCSS - PCのみ
---------------------------------------------------------------------------------------------------*/
@media print, screen and (min-width: 960px) {


	/*-- ここまで --*/
}


/*media Queries タブレットサイズ（600px～959px）のみで適応したいCSS -タブレットのみ
---------------------------------------------------------------------------------------------------*/
@media only screen and (min-width: 600px) and (max-width: 959px) {

	
/*全体の設定
---------------------------------------------------------------------------*/
html, body {
	font-size: 13px;	/*基準となるフォントサイズの上書き*/
}
	
/*mainブロック設定
---------------------------------------------------------------------------*/
/*mainブロックの設定*/
main {	
	padding: 80px 0px;	/*上下、左右へのブロック内の余白*/
}

	
/*WEBサイトへのボタン設定
---------------------------------------------------------------------------*/
.contact-btn {
	margin: 0 auto;
	width: 400px;
	text-align: center;
}

.contact-btn a,
.contact-btn input {
	text-decoration: none;border: none;
	display: block;
	border-radius: 50px;
	font-size: 18px;
	font-weight: 700;
	box-shadow: 2px 2px 5px rgba(0,0,0,0.2);	/*ボックスの影。右へ、下へ、ぼかし幅の順。0,0,0は黒の事で0.2は色が20%出た状態。*/
	background: #d7083b;	/*背景色*/
	letter-spacing: 1px;	/*文字間隔を少し広くする指定*/
	color: #fff;			/*文字色*/
	transition: 0.3s;		/*hoverまでにかける時間。0.3秒。*/
	padding: 0.7em 1em;		/*上下、左右へのボタン内の余白*/
	margin-top: 2em;		/*ボタンの上に１文字分のスペースを空ける*/
}

/*ボタンのマウスオン時*/
.contact-btn a:hover,
.contact-btn input:hover {
	cursor: pointer;
	opacity: 1;
	filter: brightness(1.2);	/*少しだけ明るく。*/
	transform: scale(1.02);		/*実寸の102%に拡大*/
}

/*ボタン内にiタグを使った場合*/
.contact-btn i {
	margin-left: 15px;		/*テキストとの間に空ける余白*/
	opacity: 0.5;
	transform: scale(1.4);	/*サイズを1.4倍にする*/
}

	
	
	
	
/*テーブル
---------------------------------------------------------------------------*/
/*テーブル１行目に入った見出し部分（※caption）*/
.area1 caption {
	font-weight: bold;		/*太字*/
	padding: 10px 5px;		/*上下、左右へのボックス内の余白。*/
	border: 3px solid #4d9c08;	/*枠線の幅、線種、色*/
	color: #4d9c08;			/*文字色*/
	background: #fff8d5;	/*背景色*/
	font-size: 1.2em;		/*文字サイズ。親要素の1.2倍。*/
	margin-bottom: 15px;	/*下に空けるスペース*/
	border-radius: 5px;		/*角を丸くする指定*/
}

/*area1テーブルブロック設定*/
.area1 {
	border-top: 1px solid #ccc;	/*テーブルの一番上の線。幅、線種、色*/
	width: 100%;
	margin: 0 auto 30px;		/*最後の「30px」がテーブルの下に空けるスペースです*/
}

/*tr（１行分）タグ設定*/
.area1 tr {
	border-bottom: 1px solid #ccc;	/*テーブルの下線。幅、線種、色*/
}

/*th（左側）、td（右側）の共通設定*/
.area1 th, .area1 td {
	padding: 10px 5px;		/*上下、左右へのボックス内の余白*。基本的に数行上の「.area1 caption」のpaddingと揃えておけばOKです。*/
	word-break: break-all;	/*英語などのテキストを改行で自動的に折り返す設定。これがないと、テーブルを突き抜けて表示される場合があります。*/
}

/*th（左側）のみの設定*/
.area1 th {
	width: 30%;			/*幅*/
	text-align: left;	/*左よせにする*/
}	
	
	
	
	
	
	
	
	

	/*-- ここまで --*/
	/*　※注意！　下の閉じカッコ　}　はこのブロックに必要なので、削除しないで！*/
}	
	


/*media Queries スマホサイズ（599px）以下で適応したいCSS - スマホのみ
---------------------------------------------------------------------------------------------------*/
@media print, screen and (max-width: 599px) {

/*全体の設定
---------------------------------------------------------------------------*/
html, body {
	font-size: 13px;	/*基準となるフォントサイズの上書き*/
}

	
	
/*sectionタグ*/
section,
main > article,
.c2,
#footermenu {
	padding: 3% 50px;		/*上下、左右へのボックス内の余白*/
}	
	
/*header（ロゴが入った最上段のブロック）
---------------------------------------------------------------------------*/
/*ヘッダーブロック*/


/*ロゴ画像*/
header #logo {margin: 0;}

/*ロゴ画像（※トップページ以外）*/
body:not(.home) header #logo img {
	display: block;
	height: 45px;	/*画像の高さ。*/
	margin: 0 auto;	/*左右中央に配置*/
}

/*トップページのロゴ*/
	
	
	
	
	
	
/*テーブル
---------------------------------------------------------------------------*/
/*テーブル１行目に入った見出し部分（※caption）*/
.area1 caption {
	font-weight: bold;		/*太字*/
	padding: 10px 5px;		/*上下、左右へのボックス内の余白。*/
	border: 3px solid #4d9c08;	/*枠線の幅、線種、色*/
	color: #4d9c08;			/*文字色*/
	background: #fff8d5;	/*背景色*/
	font-size: 1.2em;		/*文字サイズ。親要素の1.2倍。*/
	margin-bottom: 15px;	/*下に空けるスペース*/
	border-radius: 5px;		/*角を丸くする指定*/
}

/*area1テーブルブロック設定*/
.area1 {
	border-top: 1px solid #ccc;	/*テーブルの一番上の線。幅、線種、色*/
	width: 100%;
	margin: 0 auto 30px;		/*最後の「30px」がテーブルの下に空けるスペースです*/
}

/*tr（１行分）タグ設定*/
.area1 tr {
	border-bottom: 1px solid #ccc;	/*テーブルの下線。幅、線種、色*/
}

/*th（左側）、td（右側）の共通設定*/
.area1 th, .area1 td {
	padding: 10px 5px;		/*上下、左右へのボックス内の余白*。基本的に数行上の「.area1 caption」のpaddingと揃えておけばOKです。*/
	word-break: break-all;	/*英語などのテキストを改行で自動的に折り返す設定。これがないと、テーブルを突き抜けて表示される場合があります。*/
}

/*th（左側）のみの設定*/
.area1 th {
	width: 30%;			/*幅*/
	text-align: left;	/*左よせにする*/
}		
	
/*WEBサイトへのボタン設定
---------------------------------------------------------------------------*/
.contact-btn {
	margin: 0 auto;
	width: 300px;
	text-align: center;
}

.contact-btn a,
.contact-btn input {
	text-decoration: none;border: none;
	display: block;
	border-radius: 50px;
	font-size: 15px;
	font-weight: 700;
	box-shadow: 2px 2px 5px rgba(0,0,0,0.2);	/*ボックスの影。右へ、下へ、ぼかし幅の順。0,0,0は黒の事で0.2は色が20%出た状態。*/
	background: #d7083b;	/*背景色*/
	letter-spacing: 1px;	/*文字間隔を少し広くする指定*/
	color: #fff;			/*文字色*/
	transition: 0.3s;		/*hoverまでにかける時間。0.3秒。*/
	padding: 0.8em 1em;		/*上下、左右へのボタン内の余白*/
	margin-top: 2em;		/*ボタンの上に１文字分のスペースを空ける*/
}

/*ボタンのマウスオン時*/
.contact-btn a:hover,
.contact-btn input:hover {
	cursor: pointer;
	opacity: 1;
	filter: brightness(1.2);	/*少しだけ明るく。*/
	transform: scale(1.02);		/*実寸の102%に拡大*/
}

/*ボタン内にiタグを使った場合*/
.contact-btn i {
	margin-left: 15px;		/*テキストとの間に空ける余白*/
	opacity: 0.5;
	transform: scale(1.4);	/*サイズを1.4倍にする*/
}

	
	
	
	
	/*-- ここまで --*/
	/*　※注意！　下の閉じカッコ　}　はこのブロックに必要なので、削除しないで！*/
}