@charset "UTF-8";
html{ font-size:62.5%;}
html, body{width: 100%; height: 100%; margin: 0; padding: 0;}
*{ -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box;}
@media screen and (min-width:768px), print {
	html, body{min-width:1280px; margin: 0; padding: 0; width: 100%; height: 100%;}
}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, author, time {display:block;}
i {font-style: italic !important;}
figure{margin:0;}
/*reset*/
html,body,dl,dt,dd,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td { padding: 0; margin: 0; line-height: 1;}
ul,ol{ margin: 0; padding: 0; list-style:none; }
small{ font-size:100%; }
body{ background: #fff6b5; font-family: 'Noto Sans CJK JP','NotoSansCJKjp','Noto Sans Japanese', 'Noto Sans JP', sans-serif; color:#333; font-size:1.6rem; font-size:16px; -webkit-text-size-adjust: 100%; /*スマホで文字を拡大縮小させない*/ }
a{ color:#333; text-decoration:none; }
a:hover{ color:#878787; text-decoration:underline; }
a:visited{ color:#878787; text-decoration:none; }
img{ vertical-align:bottom; border:none; }


.content{ background: #fff;}

@media screen and (min-width:768px), print {
	a img:hover{opacity: 0.6; filter: alpha(opacity=60); -moz-opacity: 0.6;}
	.content{ width: 1000px; margin: 0 auto; z-index: -1;}
}

.invisible { transition: opacity 0.5s ease; opacity: 0.0;}
.visible { transition: opacity 0.5s ease; opacity: 1.0;}

.pc{display: none !important;}
.sp{display: block;}
@media screen and (min-width:768px), print {
	.pc{display: block !important;}
	.sp{display: none !important;}
}

.clear:after { content: ""; clear: both; display: block;}


#wrapper{width: 100%;padding: 17% 0 0; overflow: hidden;}
#wrapper:after { content: ""; clear: both; display: block;}
@media screen and (min-width:768px), print {
	#wrapper{width: 100%;padding: 80px 0 0;}
}


header{width: 100%; padding: 3% 5% 2%; background: #fff; z-index: 5000; position: fixed !important; top: 0; left: 0;}
header:after { content: ""; clear: both; display: block;}
header > div{float: left;}
header > div h1 img{width: 100%; height: auto;}
@media screen and (min-width:768px), print {
	header{width: 100%; height: 80px; padding: 0; }
	header > div{width: 1000px !important; height: 80px; margin: 0 auto !important; padding: 14px 0 0; float: none;}
	header > div h1{width: 259px; float: left;}
	header > div h1 img{width: 100%; height: auto;}
}


#top > div { margin: 0 0 12%;}
#top > div img{width: 100%; height: auto;}
section{ width: 100%; padding: 0 5%;}
@media screen and (min-width:768px), print {
	#top > div { margin: 0 0 80px;}
	section{ padding: 0;}
}

.btn { margin: 0 0 12%; text-align: center;}
.btn a{ padding: 1.5em 3em; margin: 0 auto; font-size: 4.5vw; border-radius: 90px; display: inline-block; text-decoration: none; color: #EB7C00; font-weight: 700; background: #FFF; border: 3px solid #EB7C00;}
.btn a:hover{ background:#EB7C00; color: #fff; -webkit-transition: 0.1s ease-in-out; -moz-transition: 0.1s ease-in-out; -o-transition: 0.1s ease-in-out; transition: 0.1s ease-in-out;}
@media screen and (min-width:768px), print {
	.btn { margin: 0 0 80px; }
	.btn a{ font-size: 3rem;}
}

.btn02 li { width: 100%; margin: 0 0 3%; text-align: center;}
.btn02 li a{ width: 70%; padding: 1em; margin: 0 auto; font-size: 3.5vw; border-radius: 10px; display: block; text-decoration: none; color: #47ad52; font-weight: 700; background: #FFF; border: 3px solid #47ad52; }
.btn02 a:hover{ background:#47ad52; color: #fff; -webkit-transition: 0.1s ease-in-out; -moz-transition: 0.1s ease-in-out; -o-transition: 0.1s ease-in-out; transition: 0.1s ease-in-out;}
@media screen and (min-width:768px), print {
	.btn02{ width: 640px; margin: 0 auto; }
	.btn02:after { content: ""; clear: both; display: block;}
	.btn02 li { width: 300px; float: left; }
	.btn02 li a{ width: 100% !important; font-size: 2rem;}
	.btn02 li:first-of-type{ margin: 0 40px 0 0; }
}



.campaign{margin: 0 0 15%;}
.campaign h2 { padding: .6em 0 .5em; font-size: 4vw; border-radius: 15px 15px 0 0; background: #f19ec2; color: #fff; text-align: center; line-height: 1; }
.campaign dl{ width: 100%; margin: 0; padding: 5% 5% 2%; border-radius: 0 0  15px 15px ; background: #fdece0; border: 2px solid #f19ec2; }
.campaign dl:after { content: ""; clear: both; display: block;}
.campaign dl dt{ width: 5.5em; padding: 0 0 1em; font-weight: 800; float: left;}
.campaign dl dd{ margin: 0 0 0 5.5em; padding: 0 0 1em;}
@media screen and (min-width:768px), print {
	.campaign {width: 800px; margin: 0 auto 80px;}
	.campaign h2 { font-size: 2.6rem; }
	.campaign dl{ padding: 2em 2em 1em;}
	.campaign dl dt, .campaign dl dd{ font-size: 1.8rem; line-height: 1.6;}
	.campaign dl dt{ width: 5.6em;}
	.campaign dl dd{ margin: 0 0 0 5.6em; padding: 0 0 1em;}
}


#merit{ margin: 0 0 15%; padding: 0 0 15%; }
#merit:after { content: ""; clear: both; display: block;}
#merit_title{ margin: 0 0 2em; padding: 0 10%; text-align: center;}
#merit_title img { width: 100%; height: auto;}
#merit_point{width: 100%; padding: 32% 0 ; overflow: hidden; background: url("merit_bk.png") no-repeat; background-size: cover; position: relative;}
#merit_point > div { position: absolute;}
#merit_point > div img {width: 90%; height: auto;}
#merit_point .merit01 { top: 17%; left: 10%;}
#merit_point .merit02 { top: 44%; left:  10%}
#merit_point .merit03 { top: 61%; left:  10%;}
@media screen and (min-width:768px), print {
	#merit { margin: 0 0 90px; padding:0 30px 60px;}
	#merit_title{ width: 429px; margin: 0; padding: 80px 0 0; float: left;}
	#merit_point{ width: 484px; height: 308px; padding: 0; float: right; background-size: contain;}
	#merit_point > div img {width: 100%; height: auto;}
	#merit_point .merit01 { top: 58px; left: 55px;}
	#merit_point .merit02 { top: 135px; left: 55px}
	#merit_point .merit03 { top: 190px; left: 55px;}
}


#fsc{ width: 100%; margin: 0 ; padding: 10% 0 ; background: url("bk.jpg")}
#fsc:after { content: ""; clear: both; display: block;}
#fsc section{ width: 90%; margin: 0 auto 12%; padding: 10% 5% ; background: #fff;}
#fsc h2{margin: 0 0 20px;}
#fsc h2 img {width: 100%; height: auto;}
.fsc_txt {margin: 0 0 2em;}
.fsc_txt p{line-height: 1.6;}
.fsc_img {text-align: center;}
.fsc_img02 {margin: 0 0 10%; }
.fsc_img01 img{width: 100%; height: auto; max-width: 266px; }
.fsc_img02 img{width: 100%; height: auto; max-width: 436px; }
@media screen and (min-width:768px), print {
	#fsc{ margin: 0 ; padding: 100px 0 120px;}
	#fsc section{width: 1000px; margin: 0 auto 50px; padding: 50px }
	#fsc section:after { content: ""; clear: both; display: block;}
	#fsc h2 img {width: 330px; height: auto;}
	.fsc_txt{width: 900px; margin: 0; float: left;}
	.fsc_img { width: 775px; margin: 0 auto; text-align: right;}
	.fsc_img01 {float: left;}
	.fsc_img02 {float: left; margin: 0 60px 0 0; padding: 60px 0 0;}
}


footer{width: 100%; padding: 10% 5% 7%; background: #47ad52;}
footer:after{ content: ""; clear: both; display: block;}
footer > div:after { content: ""; clear: both; display: block;}
address{ margin: 40px 0 0; font-style: normal; color: #fff; font-size: 1.3rem; line-height: 1.5;}
address:after{ content: ""; clear: both; display: block;}



@media screen and (min-width:768px), print {
	footer{width: 100%; padding: 60px 0 30px;}
	footer > div{width: 1000px; margin: 0 auto;}
	address{width: 1000px; margin: 0 auto; padding: 20px 0 0; text-align: right;}
}


.t_txt01, .t_txt02{font-weight: 700;}
.t_txt01{ margin: 0 0 20px; color: #fff100; font-size: 7vw;}
.t_txt02{ margin: 0 0 5px; color: #fff; font-size: 4vw;}
@media screen and (min-width:768px), print {
	.t_txt01{ margin: 0 0 20px; font-size: 4rem;}
	.t_txt02{ margin: 0 0 8px; font-size: 1.8rem;}
}

@media screen and (min-width:768px), print {
	.tanaka{width: 400px; float: left;}
}


#pagetop{ display: none}
@media screen and (min-width:768px), print {
	#pagetop{display: block;}	
	#pagetop a { width: 60px; height: 60px; position: fixed; bottom: 30px; right: 30px; z-index: 5000 !important; display: block;}	
}