/* ======================================================
	Reset
====================================================== */
html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address,cite,code,del,dfn,em,a,img,ins,kbd,q,samp,small,strong,sub,sup,var,b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary,time,mark,audio,video{margin:0;padding:0;border:none;outline:none;background:transparent;font-size:100%}body{line-height:1}img{line-height: 0; vertical-align: top;}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}nav ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}del{text-decoration: line-through}abbr[title],dfn[title]{border-bottom:1px dotted;cursor:help}li{list-style-type: none}table{border-collapse:collapse;border-spacing:0}input, select{vertical-align:middle}hr{display:block;height:1px;margin:1em 0;padding:0;border:none;border-top:1px solid #ccc}a{outline:none;}.cf:before,.cf:after{content:"";display:table}.cf:after{clear:both}.cf{zoom:1}
[type="search"]::-webkit-search-cancel-button,[type="search"]::-webkit-search-decoration {-webkit-appearance: none;}

/* ======================================================
	COMMON
====================================================== */
body{
	background: #ffffff;
	color: #2A2F33;
	font-family: 'ヒラギノ角ゴ Pro W3',Hiragino Kaku Gothic Pro,"メイリオ",Meiryo,Osaka,'ＭＳ Ｐゴシック',MS PGothic,sans-serif;
	}
	*{ box-sizing: border-box;}
/* ======================================================
	PC
====================================================== */
@media screen and (min-width: 769px){
html{font-size: 16px; min-width: 1200px;}
.inner{width: 1100px; margin: 0 auto;}
.sp{display: none!important;}
a:hover{opacity: 0.8;}

#header{text-align: center; padding-bottom: 10px;}
#header .header_logo img{width: 100px;}

#mv{position: relative; 
	height: 841px; 
	background: url(../img/mv_hayashi.png),#18B3DF;
	background-size: 700px;
	background-repeat: no-repeat,no-repeat;
	background-position: top 60px center,center;
	overflow: hidden;
}
#mv .town_area{background: #fff; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); z-index: 10; text-align: center;}
#mv .town_area .mv_img{text-align: center; margin-top: -171px;}
#mv .town_area .mv_img img{width: 100%; width: 2000px;}
#mv .mv_text{position: absolute; top: 60px; left: 50%; transform: translateX(-50%);}
#mv .mv_text img{width: 955px;}

#sec01{text-align: center; margin-top: -160px; margin-bottom: 120px; position: relative; z-index: 10;}
#sec01 .sec01_title{margin-bottom: 30px;}
#sec01 .sec01_title img{width: 847px;}
#sec01 .sec01_text{margin-bottom: 80px;}
#sec01 .sec01_text img{width: 1001px;}
#sec01 .mhp_btn{margin-bottom: 80px;}
#sec01 .mhp_btn img{width: 640px;}
#sec01 .sec01_img img{width: 1000px;}

#sec02{text-align: center; margin-bottom: 100px;}
#sec02 .sec02_title{margin-bottom: 20px;}
#sec02 .sec02_title img{width: 920px;}
#sec02 .sec02_img{margin-bottom: 40px;}
#sec02 .sec02_img_02{display: none;}
#sec02 .sec02_img img{width: 1028px;}
#sec02 .sec02_btn img{width: 612px;}

#sec03{text-align: center; margin-bottom: 20px;}
#sec03 .sec03_text{margin-bottom: 20px;}
#sec03 .sec03_text img{width: 812px;}
#sec03 .btn_area{display: inline-flex; justify-content: space-between; align-items: flex-start; width: 812px;}
#sec03 .btn_area .sec03_btn img{width: 392px;}

#sec04{text-align: center; margin-bottom: 100px;}
#sec04 .title_bg{background: #FFFEE5; padding: 40px 0; margin-bottom: 80px;}
#sec04 .title_bg .sec04_title img{width: 793px;}
#sec04 .sec04_img img{width: 1028px;}
#sec04 .sec04_img_02{display: none;}

footer{text-align: center;padding-bottom: 200px;}
footer .end_box{margin-bottom: 80px;}
footer .end_box img{width: 644px;}
footer .footer_btn{margin-bottom: 40px;}
footer .footer_btn img{ width: 361px;}
footer .copy{font-size: 12px; line-height: 1.3;}

#float_btn{position: fixed; bottom: 0px; left: 0px; width: 100%; padding: 10px 0; background: rgba(255, 255, 255, 0.8); box-shadow: 0 -5px 5px rgb(0 0 0 / 13%);z-index: 1000000;}
#float_btn .float_btn_img{text-align: center}
#float_btn .float_btn_img img{width: 612px;}


/* close */
#close .close_bg{margin-bottom: 20px; text-align: center; position: relative;}
#close .close_bg .box{background: #fff; border: solid 2px #ccc; display: inline-block; padding: 60px 140px; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);}
#close .close_bg .text{font-size: 20px; line-height: 2; margin-bottom: 30px; white-space: nowrap}
#close .close_bg .btn a{text-decoration: none; width: 360px; height: 50px; background: #1b8d53; color: #fff; display: inline-flex; align-items: center; justify-content: center;}
#close .close_bg .btn a span{font-size: 20px; font-weight: bold; position: relative; padding-left: 30px;}
#close .close_bg .btn a span::before{content: ""; width: 20px; height: 30px; background: url(../close_arrow.svg) center no-repeat; position: absolute; top: 50%; transform: translateY(-50%); left: 0px;}
#close .copy{text-align: center; line-height: 1.3; font-size: 12px;}
}

/* ======================================================
	SP
====================================================== */
@media screen and (max-width: 768px){
html{font-size: 3.6vw;}
.inner{width: 100vw; margin: 0 auto;}
.pc{display: none!important;}
img{width: 100%;} 

#header{text-align: center; padding-bottom: 5vw;}
#header img{width: 30vw; display: inline-block;}


#mv{position: relative; 
	height: 141vw; 
	background: url(../img/mv_hayashi.png),#18B3DF;
	background-size: 115vw;
	background-repeat: no-repeat,no-repeat;
	background-position: top 52vw center,center;
	overflow: hidden;
}
#mv .town_area{background: #fff; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); z-index: 10; text-align: center;}
#mv .town_area .mv_img{text-align: center; margin-top: -12vw;}
#mv .town_area .mv_img img{width: 143vw;}
#mv .mv_text{position: absolute; top: 5vw; left: 55%; transform: translateX(-50%);}
#mv .mv_text img{width: 87vw;}

#sec01{text-align: center; margin-top: -3vw; margin-bottom: 15vw; position: relative; z-index: 10;}
#sec01 .sec01_title{margin-bottom: 5vw;}
#sec01 .sec01_title img{width: 70vw;}
#sec01 .sec01_text{margin-bottom: 10vw;}
#sec01 .sec01_text img{width: 90vw;}
#sec01 .mhp_btn{margin-bottom: 10vw;}
#sec01 .mhp_btn img{width: 90vw;}
#sec01 .sec01_img img{width: 100vw;}

#sec02{text-align: center; margin-bottom: 15vw;}
#sec02 .sec02_title{margin-bottom: 3vw;}
#sec02 .sec02_title img{width: 90vw;}
#sec02 .sec02_img{margin-bottom: 5vw;}
#sec02 .sec02_img img{width: 90vw;}
#sec02 .sec02_img_02{margin-bottom: 5vw;}
#sec02 .sec02_img_02 img{width: 90vw;}
#sec02 .sec02_btn img{width: 90vw;}

#sec03{text-align: center; margin-bottom: 3vw;}
#sec03 .sec03_text{margin-bottom: 5vw;}
#sec03 .sec03_text img{width: 90vw;}
#sec03 .btn_area{display: inline-flex; justify-content: space-between; align-items: flex-start; width: 90vw;}
#sec03 .btn_area .sec03_btn img{width: 44vw;}

#sec04{text-align: center; margin-bottom: 15vw;}
#sec04 .title_bg{background: #FFFEE5; padding: 5vw 0; margin-bottom: 10vw;}
#sec04 .title_bg .sec04_title img{width: 90vw;}
#sec04 .sec04_img{margin-bottom: 5vw;}
#sec04 .sec04_img img{width: 90vw;}
#sec04 .sec04_img_02 img{width: 90vw;}

footer{text-align: center;padding-bottom: 30vw;}
footer .end_box{margin-bottom: 15vw;}
footer .end_box img{width: 90vw;}
footer .footer_btn{margin-bottom: 5vw;}
footer .footer_btn img{ width: 70vw;}
footer .copy{font-size: 12px; line-height: 1.3;}


#float_btn{position: fixed; bottom: 0px; left: 0px; width: 100%; padding: 10px 0; background: rgba(255, 255, 255, 0.8); box-shadow: 0 -5px 5px rgb(0 0 0 / 13%); z-index: 1000000;}
#float_btn .float_btn_img{text-align: center}
#float_btn .float_btn_img img{width: 90vw;}


/* close */
#close .close_bg{margin-bottom: 5vw; text-align: center; position: relative;}
#close .close_bg .box{background: #fff; border: solid 2px #ccc; display: inline-block; padding: 15vw 5vw; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);}
#close .close_bg .text{font-size: 16px; line-height: 1.8; margin-bottom: 30px; white-space: nowrap}
#close .close_bg .btn a{text-decoration: none; width: 80vw; height: 15vw; background: #1b8d53; color: #fff; display: inline-flex; align-items: center; justify-content: center;}
#close .close_bg .btn a span{font-size: 18px; font-weight: bold; position: relative; padding-left: 30px;}
#close .close_bg .btn a span::before{content: ""; width: 20px; height: 30px; background: url(../close_arrow.svg) center no-repeat; position: absolute; top: 50%; transform: translateY(-50%); left: 0px;}
#close .copy{text-align: center; line-height: 1.3; font-size: 12px; padding-bottom: 10vw;}
}

/* ======================================================
	action
====================================================== */

.sec_01_text img,.sec_02_title img,.sec_03_title img,.sec_03_text img,.sec_04_img_01 img,.sec_04_text_04 img{transition: 500ms ease; opacity: 0; margin-top:40px;}
.sec_01_text.is-show img,.sec_02_title.is-show img,.sec_03_title.is-show img,.sec_03_text.is-show img,.sec_04_img_01.is-show img,.sec_04_text_04.is-show img{margin-top:0px; opacity: 1;}

/* box系アニメーションPC用 */
@media screen and (min-width: 769px){
.is-show img{transition: 500ms ease;}

#mv{background-color: #fff;}
#mv.start{background-color: #18B3DF; transition: 1000ms 200ms ease;}
#mv .mv_text img{position: relative; top: 30px; opacity: 0;}
#mv.start .mv_text img{position: relative; top: 0px; opacity: 1; transition: 500ms 700ms ease;}

.sec01_title img{position: relative; top: 30px; opacity: 0;}
.sec01_text img{position: relative; top: 30px; opacity: 0;}
.sec01_img img{position: relative; top: 30px; opacity: 0;}
.sec02_title img{position: relative; top: 30px; opacity: 0;}
.sec02_img img{position: relative; top: 30px; opacity: 0;}
.sec02_img_02 img{position: relative; top: 30px; opacity: 0;}
.sec03_text img{position: relative; top: 30px; opacity: 0;}
.sec04_title img{position: relative; top: 30px; opacity: 0;}
.sec04_img img{position: relative; top: 30px; opacity: 0;}
.sec04_img_02 img{position: relative; top: 30px; opacity: 0;}

.sec01_title.is-show img{position: relative; top: 0px; opacity: 1;}
.sec01_text.is-show img{position: relative; top: 0px; opacity: 1;}
.sec01_img.is-show img{position: relative; top: 0px; opacity: 1;}
.sec02_title.is-show img{position: relative; top: 0px; opacity: 1;}
.sec02_img.is-show img{position: relative; top: 0px; opacity: 1;}
.sec02_img_02.is-show img{position: relative; top: 0px; opacity: 1;}
.sec03_text.is-show img{position: relative; top: 0px; opacity: 1;}
.sec04_title.is-show img{position: relative; top: 0px; opacity: 1;}
.sec04_img.is-show img{position: relative; top: 0px; opacity: 1;}
.sec04_img_02.is-show img{position: relative; top: 0px; opacity: 1;}
}

/* box系アニメーションSP用 */

@media screen and (max-width: 768px){
.is-show img{transition: 500ms ease;}

#mv{background-color: #fff;}
#mv.start{background-color: #18B3DF; transition: 1000ms 200ms ease;}
#mv .mv_text img{position: relative; top: 10vw; opacity: 0;}
#mv.start .mv_text img{position: relative; top: 0vw; opacity: 1; transition: 500ms 700ms ease;}

.sec01_title img{position: relative; top: 10vw; opacity: 0;}
.sec01_text img{position: relative; top: 10vw; opacity: 0;}
.sec01_img img{position: relative; top: 10vw; opacity: 0;}
.sec02_title img{position: relative; top: 10vw; opacity: 0;}
.sec02_img img{position: relative; top: 10vw; opacity: 0;}
.sec02_img_02 img{position: relative; top: 10vw; opacity: 0;}
.sec03_text img{position: relative; top: 10vw; opacity: 0;}
.sec04_title img{position: relative; top: 10vw; opacity: 0;}
.sec04_img img{position: relative; top: 10vw; opacity: 0;}
.sec04_img_02 img{position: relative; top: 10vw; opacity: 0;}

.sec01_title.is-show img{position: relative; top: 0vw; opacity: 1;}
.sec01_text.is-show img{position: relative; top: 0vw; opacity: 1;}
.sec01_img.is-show img{position: relative; top: 0vw; opacity: 1;}
.sec02_title.is-show img{position: relative; top: 0vw; opacity: 1;}
.sec02_img.is-show img{position: relative; top: 0vw; opacity: 1;}
.sec02_img_02.is-show img{position: relative; top: 0vw; opacity: 1;}
.sec03_text.is-show img{position: relative; top: 0vw; opacity: 1;}
.sec04_title.is-show img{position: relative; top: 0vw; opacity: 1;}
.sec04_img.is-show img{position: relative; top: 0vw; opacity: 1;}
.sec04_img_02.is-show img{position: relative; top: 0vw; opacity: 1;}

}