@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: url("../images/bg.jpg") center center fixed;
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:#ff3366;}

.bg_y{ background: linear-gradient(to bottom, rgba(250,240,120,0) 0%, rgba(250,240,120,0) 50%, rgba(250,240,120,0.5) 51%, rgba(250,240,120,0.5) 100%);}

.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: #191919; 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.5) 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%;}
}

/*header*/
header{ padding: 60px 30px 0; text-align: center;}
header h1{ font-size: 2.4em; letter-spacing: 0.05em; line-height: 1.25em; font-weight: 900;}
header h1 span{ color: #ff3366;}
header h1 strong{ display: flex; align-items: center; justify-content: center; background: #ff3366; color: #fff; font-size: 1.8rem; font-weight: 900; letter-spacing: 0.2em; line-height: 1em; padding: 0.5em; border: 10px double #fff; margin-bottom: 15px;}
header h2{ font-size: 1.8rem; line-height: 1.25em; letter-spacing: 0.1em; color: #ff3366; border-top: 8px double #ff3366; border-bottom: 8px double #ff3366; padding: 0.25em 0 0.33em; margin: 60px auto 30px;}
header h2 strong{ color: #ff3366; font-weight: 900;}
header h3{ font-size: 1.2rem; line-height: 1.5em; margin-bottom: 30px;}
header figure img{ width: calc(100% + 60px); max-width: calc(100% + 60px); margin-left: -30px;}
@media screen and (max-width:750px){
header{ padding: 7.5% 3.75% 0;}
header h1{ font-size: 2.5em;}
header h1 strong{font-size: 2.25rem; border-width: 1.25vw; margin-bottom: 2.5%;}
header h2{ font-size: 2rem; border-width: 1.25vw; margin: 7.5% auto 3.75%;}
header h3{ font-size: 1.5rem; margin-bottom: 5%;}
header figure img{ width: calc(100% + 7.5vw); max-width: calc(100% + 7.5vw); margin-left: -3.75vw;}
}



/*lead*/
#lead{ margin: 60px auto;}
#lead p{ font-size: 1.2rem;}
#lead .dream{ border: 10px double #ff3366; padding: 10px 30px 20px; margin: 30px;}
#lead .dream p{ text-align: center; font-size: 2rem; line-height: 1.75em; margin: 0;}
#lead .dream p strong{ font-weight: 900;}
@media screen and (max-width:750px){
#lead{ margin: 10% auto;}
#lead p{ font-size: 1.25rem;}
#lead .dream{ border-width: 1.25vw; padding: 2.5% 3.75% 3.75%; margin: 5% 3.75%;}
#lead .dream p{ font-size: 2rem;}
}



/*result*/
#result{ margin: 60px auto;}
#result h3{ margin: 60px 0 30px -30px; width: calc(100% + 60px); display: flex; align-items: center; justify-content: center; text-align: center; background: #346e1f; color: #fff; font-size: 2rem; line-height: 1.25em; letter-spacing: 0.1em; padding: 0.5em 0.25em 0.66em; position: relative; border-top: 10px double #fff; border-bottom: 10px double #fff;}
#result .result_box{ margin: 30px auto; border: 8px solid #346e1f; padding: 20px;}
#result .result_box ul li{ font-size: 0.8rem; position: relative; padding-left: 1.25em; line-height: 1.25em; color: #999;}
#result .result_box ul li:before{ content: "※"; position: absolute; left: 0; top: 0; line-height: 1.25em;}
#result h3.more{ margin: 60px 0 30px -30px; background: #a25621;}
#result .result_box.more{ border-color: #a25621;}
#result h4{ text-align: center; font-size: 1.6rem;}
#result h4 strong{ font-weight: 900;}
@media screen and (max-width:750px){
#result{ margin: 10% auto;}
#result h3{ margin: 10% 0 5% -3.75vw; width: calc(100% + 7.5vw); font-size: 2rem; border-width: 1.25vw;}
#result .result_box{ margin: 5% auto; border-width: 1.25vw; padding: 2.5%;}
#result .result_box ul li{ font-size: 0.8rem;}
#result h3.more{ margin: 10% 0 5% -3.75vw;}
#result h4{ font-size: 1.75rem;}
}



/*last*/
#last{ margin: 60px auto;}
#last figure{ margin-bottom: 30px;}
#last p{ font-size: 1.2rem;}
#last p strong{ font-size: 125%; font-weight: 900;}
@media screen and (max-width:750px){
#last{ margin: 10% auto;}
#last figure{ margin-bottom: 5%;}
#last p{ font-size: 1.25rem;}
#last p strong{ font-size: 125%;}
}



/*btn*/
figure.btn{ display: flex; align-items: center; justify-content: center; margin-top: 60px;}
figure.btn a{ display: flex; align-items: center; justify-content: center; padding: 0.75em 1.5em; background: #00a316; color: #fff; font-size: 2rem; font-weight: 900; letter-spacing: 0.1em; transition: 0.3s; border-radius: 20px; 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: 20px 20px 0 0;}
figure.btn a:hover{ opacity: 0.7;}
figure.btn a i{ font-size: 125%; margin-right: 0.5em;}
@media screen and (max-width:750px){
figure.btn{ margin-top: 10%;}
figure.btn a{ padding: 1em 2em; font-size: 2.25rem; border-radius: 2.5vw;}
figure.btn a:after{ border-radius: 2.5vw 2.5vw 0 0;}
}

figure.btn a{ animation: btn linear 0.2s infinite;}
@keyframes btn{
0%{ transform: scale(1, 1);}
50%{ transform: scale(0.95, 0.95);}
}





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