@charset "utf-8";

/* CSS Document */
*{ margin:0; padding:0; box-sizing:border-box; word-break:break-all;}
div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, 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:0; outline:0; font-size:100%; vertical-align:baseline; background:transparent;}
ul,ol{ list-style:none;}
html,body {
margin:0 auto;
padding:0;
font-family: "ヒラギノ角ゴ Pro","Hiragino Kaku Gothic Pro","メイリオ","ＭＳ Ｐゴシック",sans-serif;
font-size:20px;
text-align:left;
color:#392D1F;
/*min-width:1120px;*/
}
@media screen and (max-width:768px){
html,body{ font-size:5.33vw; min-width:240px; max-width:768px;}
}

/*img*/
img{ border-style:none; vertical-align:bottom; padding:0; line-height:0em; max-width:100%; height:auto;}
figure{margin:0 auto; text-align:center;}


/*txt*/
p{ line-height:1.75em; margin:0 0 1em; padding:0;}
p:last-child{ margin:0;}
strong{ font-weight:bold;}
.bold { font-weight:bold;}
.normal{ font-weight:normal;}
.under_line{ text-decoration:underline;}
.line_through{ text-decoration:line-through;}

.white{ color:#fff;}

.left{ text-align:left;}
.right{ text-align:right;}
.center{ text-align:center;}

/*link*/
a{ color:inherit; text-decoration:none;}
a:hover{}
.opa{ transition: opacity 0.3s;}
.opa:hover{ opacity: 0.7;}



/*ヘッダー*/
header dl{ display: flex; align-items: center; justify-content: center; padding: 20px;}
header dl dt{ width: 210px; margin-right: 50px; line-height: 0;}
header dl dd{ width: 750px; line-height: 0;}
header dl dd img{ width: 100%;}
header h1{ display: flex; align-items: center; justify-content: center; background: #00A116; color: #fff; padding: 20px; font-size: 1.7rem;}
@media screen and (max-width:1320px){
header dl{ padding: calc((20/1320)*100vw);}
header dl dt{ width: calc((210/1320)*100vw); margin-right: calc((50/1320)*100vw);}
header dl dd{ width: calc((750/1320)*100vw);}
header h1{ padding: calc((20/1320)*100vw); font-size: calc((33/1320)*100vw);}
}
@media screen and (max-width:768px){
header dl{ flex-direction: column; padding: 4% 8%;}
header dl dt{ width: 30%; margin: 0 auto 4%;}
header dl dd{ width: 100%;}
header h1{ padding: 4% 8%; font-size: 0.8rem;}
}

/*pankuzu*/
.pankuzu{ max-width: 1320px; width: 100%; padding: 20px 20px 40px; margin: auto;}
.pankuzu ul{ display: flex; flex-wrap: wrap; font-size: 0.8rem;}
.pankuzu ul li:not(:last-child):after{ content: ">"; margin: 0 0.75em;}
.pankuzu ul li a:hover{ text-decoration: underline;}
@media screen and (max-width:1320px){
.pankuzu{ padding: calc((20/1320)*100vw) calc((20/1320)*100vw) calc((40/1320)*100vw);}
}
@media screen and (max-width:768px){
.pankuzu{ display: none;}
}

/*フッター*/
footer{ padding: 40px 20px;}
p.copyright{ text-align:center; font-size: 0.8rem;}
@media screen and (max-width:768px){
footer{ padding: 10% 8%;}
p.copyright{ text-align:center; font-size: 0.5rem;}
}

/*メイン*/
#content{ overflow:hidden;}
section{ width:100%; max-width: 1320px; margin:0 auto;}
.maincontent{ padding:0; margin:0 auto; width: 84%; max-width:1120px;}
@media screen and (max-width:768px){
.maincontent{ padding:0; margin:0 auto; width:84%;}
}

/*tit*/
h1,h2,h3,h4,h5,h6{ line-height: 1.5em; letter-spacing: 0;}



/*fv*/
#fv{ background: #00A116; padding: 100px 0;}
#fv h2{ width: 1000px; text-align: center; margin: 0 auto 60px;}
#fv .fv_img{ position: relative;}
#fv .fv_img figure.img{ width: calc(100% + 80px); margin-left: -40px;}
#fv .fv_img p.att{ width: 430px; position: absolute; left: -60px; bottom: 30px;}
#fv figure.fv_btn{ width: 520px; text-align: center;}
#fv .merit{ margin: 100px 20px 0;}
#fv .merit h3{ width: 570px; margin: 0 auto 40px;}
#fv .merit figure.arrow{ width: 66px; margin: 40px auto;}
#fv .merit ul{ display: flex; flex-wrap: wrap; justify-content: center; width: calc(100% + 80px); margin: -15px 0 -15px -40px;}
#fv .merit ul li{ width: calc(50% - 80px); margin: 15px 40px;}
#fv .merit ul li:nth-child(1){ margin: 15px 80px;}
@media screen and (max-width:1320px){
#fv{ padding: calc((100/1320)*100vw) 0;}
#fv h2{ width: calc((1000/1320)*100vw); margin: 0 auto calc((60/1320)*100vw);}
#fv .fv_img figure.img{ width: calc(100% + ((80/1320)*100vw)); margin-left: calc((-40/1320)*100vw);}
#fv .fv_img p.att{ width: calc((430/1320)*100vw); left: calc((-60/1320)*100vw); bottom: calc((30/1320)*100vw);}
#fv figure.fv_btn{ width: calc((520/1320)*100vw);}
#fv .merit{ margin: calc((100/1320)*100vw) calc((20/1320)*100vw) 0;}
#fv .merit h3{ width: calc((570/1320)*100vw); margin: 0 auto calc((40/1320)*100vw);}
#fv .merit figure.arrow{ width: calc((66/1320)*100vw); margin: calc((40/1320)*100vw) auto;}
#fv .merit ul{ width: calc(100% + ((80/1320)*100vw)); margin: calc((-15/1320)*100vw) 0 calc((-15/1320)*100vw) calc((-40/1320)*100vw);}
#fv .merit ul li{ width: calc(50% - calc((80/1320)*100vw)); margin: calc((15/1320)*100vw) calc((40/1320)*100vw);}
#fv .merit ul li:nth-child(1){ margin: calc((15/1320)*100vw) calc((80/1320)*100vw);}
}
@media screen and (max-width:768px){
#fv{ padding: 5% 0 10%;}
#fv h2{ width: 100%; margin-bottom: 3.75%;}
#fv .fv_img figure.img{ width: calc(100% + 16vw); margin-left: -8vw;}
#fv .fv_img p.att{ width: 100%; position: static; margin: 7.5% auto 3.75%; text-align: center; line-height: 0;}
#fv .fv_img p.att img{ height: 4.5vw;}
#fv figure.fv_btn{ width: 100%;}
#fv figure.fv_btn img{ width: 52.5vw;}
#fv .merit{ margin: 10% 0 0;}
#fv .merit h3{ width: 100%; text-align: center; margin: 0 auto 3.75%; line-height: 0;}
#fv .merit h3 img{ height: 5vw;}
#fv .merit figure.arrow{ width: 4.5vw; margin: 0 auto 5%; line-height: 0;}
#fv .merit ul{ display:block; width: 100%; margin: 0;}
#fv .merit ul li{ width: 100%; margin: 3.75% auto 0;}
#fv .merit ul li:nth-child(1){ margin: 3.75% auto 0;}
}



/*sec01*/
#sec01{ background: #F0F9D5; padding: 100px 0;}
#sec01 h2{ width: 1000px; text-align: center; margin: 0 auto 60px;}
#sec01 h3{ width: 300px; text-align: center; margin: 0 auto 40px;}
#sec01 figure.img{ width: 810px; text-align: center; margin: 0 auto;}
@media screen and (max-width:1320px){
#sec01{ padding: calc((100/1320)*100vw) 0;}
#sec01 h2{ width: calc((1000/1320)*100vw); margin: 0 auto calc((60/1320)*100vw);}
#sec01 h3{ width: calc((300/1320)*100vw); margin: 0 auto calc((40/1320)*100vw);}
#sec01 figure.img{ width: calc((810/1320)*100vw);}
}
@media screen and (max-width:768px){

}



/*sec02*/
#sec02{ background: #ACEFB2; padding: 100px 0;}
#sec02 ul li{ margin-top: 40px;}
#sec02 ul li:nth-child(1){ margin-top: 0;}
#sec02 ul li p{ width: 1090px;}
#sec02 ul li figure.btn{ width: 520px; text-align: center; margin: 80px auto;}
#sec02 ul li figure.img{ width: 810px; text-align: center; margin: 80px auto;}
@media screen and (max-width:1320px){
#sec02{ padding: calc((100/1320)*100vw) 0;}
#sec02 ul li{ margin-top: calc((40/1320)*100vw);}
#sec02 ul li p{ width: calc((1090/1320)*100vw);}
#sec02 ul li figure.btn{ width: calc((520/1320)*100vw); margin: calc((80/1320)*100vw) auto;}
#sec02 ul li figure.img{ width: calc((810/1320)*100vw); margin: calc((80/1320)*100vw) auto;}
}
@media screen and (max-width:768px){

}



/*sec03*/
#sec03{ background: #F0F9D5; padding: 100px 0;}
#sec03 dl{ display: flex; align-items: center; justify-content: center; margin: auto;}
#sec03 dl dt{ width: 500px; text-align: center;}
#sec03 dl dt img{ width: 360px;}
#sec03 dl dd{ text-align: center;}
#sec03 dl dd figure.logo{ width: 384px; text-align: center; margin: 0 auto 60px;}
#sec03 dl dd h3{ width: 590px; text-align: center; margin: 0 auto 60px;}
#sec03 dl dd figure.btn{ width: 520px; text-align: center; margin: 0 auto;}
@media screen and (max-width:1320px){
#sec03{ padding: calc((100/1320)*100vw) 0;}
#sec03 dl dt{ width: calc((500/1320)*100vw);}
#sec03 dl dt img{ width: calc((360/1320)*100vw);}
#sec03 dl dd figure.logo{ width: calc((384/1320)*100vw); margin: 0 auto calc((60/1320)*100vw);}
#sec03 dl dd h3{ width: calc((590/1320)*100vw); margin: 0 auto calc((60/1320)*100vw);}
#sec03 dl dd figure.btn{ width: calc((520/1320)*100vw);}
}
@media screen and (max-width:768px){

}







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