@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100;300;400;500;700;900&display=swap');

/* 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: 'Noto Sans JP',"ヒラギノ角ゴ Pro","Hiragino Kaku Gothic Pro","メイリオ","ＭＳ Ｐゴシック",sans-serif;
font-size:20px;
font-weight: 500;
text-align:left;
background: #efefef;
background-size: cover;
min-width:750px;
}
@media screen and (max-width:750px){
html,body{ font-size:2.66vw; min-width:240px; max-width:750px;}
}

/*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{ text-align: justify; 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;}
.black{ color:#333;}
.gy{ color:#aaa;}
.red{ color:#ff5858;}
.blue{ color:#326496;}
.yellow{ color:#f0d278;}

.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;}

/*フッター*/
footer{ background: #3f7197; color: #fff;}
footer p{ text-align: center; font-size: 0.8rem; padding: 0.5em;}
@media screen and (max-width:750px){
}

/*メイン*/
#content{ margin: auto; max-width: 750px; background: #fff; overflow:hidden; box-shadow:rgba(0, 0, 0, 0.1) 0 0 10px 5px;}
section{ width:100%; margin:0 auto;}
.maincontent{ padding:0; margin:0 auto; width:690px;}
@media screen and (max-width:750px){
#content{ max-width: 100%;}
section{ margin:0 auto;}
.maincontent{ padding:0; margin:0 auto; width:92.5%;}
}

/*fv*/
#fv{ padding: 30px; background: url("https://www.transparenttextures.com/patterns/batthern.png") #66b6f4; position: relative;}
#fv h1{ text-align: center; color: #fff; font-size: 2.4rem; font-weight: 900; letter-spacing: 0.05em; text-shadow: 2px 2px 5px rgba(0,0,0,0.25);}
#fv h1 strong{ font-size: 4.8rem; font-weight: 900; letter-spacing: 0.05em; color: #ffff00;}
#fv figure.img{ margin: 30px 0 -60px -30px;}
#fv figure.img img{ width: 100%;}
#fv h2{ background: #fff; color: #66b6f4; text-align: center; font-size: 2.4rem; font-weight: 700; letter-spacing: 0.1em; padding: 0.25em; position: relative; z-index: 3; box-shadow:rgba(0, 0, 0, 0.25) 0 0 5px 2px;}
#fv h2 strong{ font-weight: 900;}
@media screen and (max-width:750px){
#fv{ padding: 5% 0;}
#fv h1{ font-size: 2.4rem;}
#fv h1 strong{ font-size: 4.8rem;}
#fv figure.img{ margin: 5% 0 -10% -3.75vw;}
#fv h2{ font-size: 2.4rem;}
}



/*about*/
#about{ padding: 60px 0;}
#about h2{ background: #3f7197; color: #fff; font-size: 2rem; padding: 0.5em 0; text-align: center; border-top: 8px double #fff; border-bottom: 8px double #fff; margin-bottom: 30px;}
#about .about dl{ display: flex; align-items: center; justify-content: space-between;}
#about .about dl dt{ width: 70%;}
#about .about dl dd{ width: 25%;}
#about .about dl dt p{ text-align: justify; font-size: 1.2rem;}
#about .about dl dt p strong{ color: #3f7197; font-weight: 700;}

#about figure.arrow{ font-size: 3rem; line-height: 1em; color: #3f7197; margin: 30px auto;}

#about .style h3{ text-align: center; font-size: 1.6rem; color: #3f7197; border-top: 8px double #3f7197; border-bottom: 8px double #3f7197; margin-bottom: 30px; padding: 0.5em 0;}
#about .style ul{ display: flex; text-align: center;}
#about .style ul li{ width: 33.33%;}
#about .style ul li p{ margin-top: 10px; text-align: center; font-size: 1rem; line-height: 1.5em;}
#about .style ul li p strong{ color: #3f7197;}
@media screen and (max-width:750px){
#about{ padding: 10% 0;}
#about h2{ font-size: 2rem; border-width: 1.25vw; margin-bottom: 5%;}
#about .about dl dt{ width: 70%;}
#about .about dl dd{ width: 25%;}
#about .about dl dt p{ font-size: 1.2rem;}

#about figure.arrow{ font-size: 3rem; margin: 5% auto;}

#about .style h3{ font-size: 1.5rem; border-width: 1.25vw; margin-bottom: 5%;}
#about .style ul li p{ margin-top: 2.5%; font-size: 1rem;}
}



/*trouble*/
#trouble{ background: #3f7197; padding: 60px 0; position: relative; z-index: 3;}
#trouble:after{ content: ""; width: 0; height: 0; border-style: solid; border-color: #3f7197 transparent transparent transparent; border-width: 30px 30px 0px 30px; position: absolute; left: 0; right: 0; bottom: -29px; margin: auto;}

#trouble h2{ background: #fff; color: #3f7197; font-size: 2.4rem; padding: 0.25em 0; text-align: center; border-top: 8px double #3f7197; border-bottom: 8px double #3f7197; margin-bottom: 30px;}
#trouble dl{ display: flex; align-items: center; justify-content: space-between; flex-direction: row-reverse;}
#trouble dl dt{ width: 63%;}
#trouble dl dd{ width: 33%;}
#trouble dl dt ul li{ padding: 0.5em 0.25em 0.5em 2em; font-size: 1.2rem; line-height: 1.25em; color: #fff; font-weight: bold; border-bottom: 2px dotted #fff; position: relative;}
#trouble dl dt ul li:first-child{ border-top: 2px dotted #fff;}
#trouble dl dt ul li i{ position: absolute; left: 0.5em; top: 0.5em; line-height: 1.25em;}
#trouble dl dt ul li strong{ color: #ffff00;}
@media screen and (max-width:750px){
#trouble{ padding: 10% 0;}
#trouble:after{ border-width: 5vw 5vw 0 5vw; bottom: -4.75vw;}

#trouble h2{ font-size: 2rem; border-width: 1.25vw; margin-bottom: 5%;}
#trouble dl dt{ width: 70%;}
#trouble dl dd{ width: 27.5%;}
#trouble dl dt ul li{ font-size: 1.33rem;}
}



/*merit*/
#merit{ background: #66b6f4; padding: 60px 0;}
#merit h2{ background: #fff; color: #66b6f4; font-size: 2.4rem; padding: 0.25em 0; text-align: center; border-top: 8px double #66b6f4; border-bottom: 8px double #66b6f4; margin-bottom: 30px;}
#merit dl{ display: flex; align-items: center; justify-content: space-between;}
#merit dl dt{ width: 63%;}
#merit dl dd{ width: 33%;}
#merit dl dt ul li{ padding: 0.5em 0.25em 0.5em 2em; font-size: 1.2rem; line-height: 1.25em; color: #fff; font-weight: bold; border-bottom: 2px dotted #fff; position: relative;}
#merit dl dt ul li:first-child{ border-top: 2px dotted #fff;}
#merit dl dt ul li i{ position: absolute; left: 0.5em; top: 0.5em; line-height: 1.25em;}
#merit dl dt ul li strong{ color: #ffff00;}
@media screen and (max-width:750px){
#merit{ padding: 10% 0;}
#merit h2{ font-size: 2rem; border-width: 1.25vw; margin-bottom: 5%;}
#merit dl dt{ width: 70%;}
#merit dl dd{ width: 27.5%;}
#merit dl dt ul li{ font-size: 1.33rem;}
}



/*earn*/
#earn{ padding: 60px 0; position: relative; z-index: 3;}
#earn h2{ background: #3f7197; color: #fff; font-size: 2rem; padding: 0.5em 0; text-align: center; border-top: 8px double #fff; border-bottom: 8px double #fff; margin-bottom: 30px;}
#earn figure img{ width: 75%;}
#earn p.txt{ margin-top: 30px; background: #efefef; padding: 20px; text-align: center; font-size: 1.2rem; position: relative;}
#earn p.txt strong{ color: #3f7197;}
#earn p.txt:after{ content: ""; width: 0; height: 0; border-style: solid; border-color: #efefef transparent transparent transparent; border-width: 30px 30px 0px 30px; position: absolute; left: 0; right: 0; bottom: -29px; margin: auto;}
@media screen and (max-width:750px){
#earn{ padding: 10% 0;}
#earn h2{ font-size: 2rem; border-width: 1.25vw; margin-bottom: 5%;}
#earn figure img{ width: 75%;}
#earn p.txt{ margin-top: 5%; padding: 3.75%; font-size: 1.33rem;}
#earn p.txt:after{ border-width: 5vw 5vw 0 5vw; bottom: -4.75vw;}
}



/*join*/
#join{ padding: 0 0 60px;}
#join h2{ text-align: center; font-size: 1.6rem; color: #3f7197; border-top: 8px double #3f7197; border-bottom: 8px double #3f7197; margin-bottom: 30px; padding: 0.5em 0;}
#join dl{ display: flex; align-items: center; justify-content: space-between; flex-direction: row-reverse;}
#join dl dt{ width: 57.5%;}
#join dl dd{ width: 40%; margin-left: -30px;}
#join dl dt p{ font-size: 1.2rem;}
@media screen and (max-width:750px){
#join{ padding: 0 0 10%;}
#join h2{ font-size: 1.8rem; border-width: 1.25vw; margin-bottom: 5%;}
#join dl{ display: block;}
#join dl dt{ width: 92.5%; margin: 0 auto 5%;}
#join dl dd{ width: 75%; margin-left: -3.75vw;}
#join dl dt p{ font-size: 1.33rem; text-align: right;}
}



/*flow*/
#flow{ padding: 0 0 60px;}
#flow h2{ text-align: center; font-size: 1.6rem; color: #3f7197; border-top: 8px double #3f7197; border-bottom: 8px double #3f7197; margin-bottom: 30px; padding: 0.5em 0;}
#flow ul{ display: flex;}
#flow ul li{ width: calc(33.33% - 30px); margin: 0 15px; background: #74c9d0; padding: 15px; border-radius: 20px;}
#flow ul li figure img{ width: 80%;}
#flow ul li p{ text-align: center; color: #fff; font-size: 1rem; line-height: 1.5em;}
@media screen and (max-width:750px){
#flow{ padding: 0 0 10%;}
#flow h2{ font-size: 1.8rem; border-width: 1.25vw; margin-bottom: 5%;}
#flow ul{ width: calc(100% + 3.75vw); margin-left: -1.875vw;}
#flow ul li{ width: calc(33.33% - 3.75vw); margin: 0 1.875vw; padding: 2.5% 0; border-radius: 1.875vw;}
#flow ul li figure img{ width: 66.66%;}
#flow ul li p{ font-size: 1.2rem; line-height: 1.5em;}
}



/*cv*/
.cv{ padding: 60px 30px; color: #fff; background: url("https://www.transparenttextures.com/patterns/batthern.png") #66b6f4; position: relative;}
.cv h2{ text-align: center; color: #fff; font-size: 2.4rem; font-weight: 900; letter-spacing: 0.05em; text-shadow: 2px 2px 5px rgba(0,0,0,0.25);}
.cv h2 strong{ font-size: 2.4rem; font-weight: 900; letter-spacing: 0.05em; color: #ffff00;}
@media screen and (max-width:750px){
.cv{ padding: 10% 0;}
.cv h2{ font-size: 2.4rem;}
.cv h2 strong{ font-size: 2.4rem;}
}



/*btn*/
figure.btn{ display: flex; align-items: center; justify-content: center; margin-top: 30px;}
figure.btn a{ display: flex; align-items: center; justify-content: center; width: 100%; padding: 0.75em 0.5em; background: #00a316; color: #fff; font-size: 1.6rem; font-weight: bold; transition: 0.3s; border-radius: 80px; position: relative; z-index: 1; box-shadow:rgba(0, 0, 0, 0.25) 0 0 5px 2px;}
figure.btn a:after{ content: ""; width: 100%; height: 50%; background: rgba(255,255,255,0.2); position: absolute; left: 0; top: 0; border-radius: 80px 80px 0 0;}
figure.btn a:hover{ opacity: 0.7;}
figure.btn a i{ margin-right: 0.5em;}
figure.btn a strong{ color: #ffff00; font-size: 110%;}
@media screen and (max-width:750px){
figure.btn{ margin-top: 5%;}
figure.btn a{ padding: 0.75em 0; font-size: 1.6rem; border-radius: 15vw;}
figure.btn a:after{ border-radius: 15vw 15vw 0 0;}
figure.btn a strong{ color: #ffff00; font-size: 110%;}

}

figure.btn a{ animation: btn linear 1.0s alternate infinite;}
@keyframes btn{
0%{ transform: scale(0.96);}
100%{ transform: scale(1.02)}
}





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