@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Zen+Maru+Gothic:wght@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: "Zen Maru Gothic", sans-serif;
font-size:20px;
font-size-adjust: 100%;
text-size-adjust: 100%;
text-align:left;
color:#665E56;
background:#efefef;
min-width:1000px;
}
@media screen and (max-width:767px){
html,body{ font-size:4vw; min-width:240px; max-width:767px;}
}

/*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;}

/*youtube*/
.youtube{ position:relative; width:100%; padding-top:56.25% !important;}
.youtube iframe{ position: absolute; top:0; right:0; width:100% !important; height:100% !important;}

/*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;}

.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{ padding: 15px 0 50px; background: url("../images/fv_bg.jpg") center top no-repeat; background-size: cover;}
header .fv_top{ position: relative; z-index: 3;}
header .fv_top h1{ width: 100%; max-width: 1000px; margin: 0 auto;}
header figure.logo{ width: 320px; margin: 0 auto 15px;}

header .fv_limited{ margin-top: -30px; width: 100%; height: 50px; display: flex; align-items: center; justify-content: center; background: linear-gradient(to right,  rgba(234,186,212,1) 0%,rgba(235,127,185,1) 100%); position: relative; z-index: 3;}
header .fv_limited img{ height: 34px;}

header .fv_camp{ width: 390px; margin: 40px auto 15px; text-align: center; position: relative;}
header .fv_camp .ico01{ width: 140px; position: absolute; left: -60px; top: -70px;}
header .fv_camp .ico02{ width: 100px; position: absolute; right: -30px; top: 20px;}

header .fv_camp_list{ width: 800px; margin: 0 auto;}
header .fv_camp_list figure.ill{ width: 166px; margin: -100px auto 0;}

header .fv_camp_btn{ margin-top: 25px;}
header .fv_camp_btn img{ width: 600px;}
@media screen and (max-width:767px){
header{ padding: 7.5% 0 7.5%; background: url("../images/fv_bg_smp.jpg") center top no-repeat; background-size: cover;}
header figure.logo{ width: 84%; margin: 0 auto 5%;}

header .fv_limited{ margin-top: -12.5vw; height: 13.33vw;}
header .fv_limited img{ height: 8.25vw;}

header .fv_camp{ width: 100%; margin: 0 auto; padding: 10% 12.5% 5%;}
header .fv_camp .ico01{ width: 30vw; position: absolute; left: -2.5vw; top: 0;}
header .fv_camp .ico02{ width: 15vw; position: absolute; right: 0; top: 25vw;}

header .fv_camp_list{ width: 100%; margin: 0 auto;}
header .fv_camp_list figure.ill{ width: 33.33vw; margin: -36vw 0 0 auto; padding-right: 5%;}

header .fv_camp_btn{ margin-top: 15%;}
header .fv_camp_btn img{ width: 92.5%;}
}

/*フッター*/
footer{ background: #fff;}
footer p{ text-align: center; font-size: 0.8rem; font-weight: 500; line-height: 1em; padding: 1em;}
@media screen and (max-width:767px){
footer p{ font-size: 1rem;}
}

/*fixed_btn*/
#fixed_btn{ opacity: 0; pointer-events: none; transition: 0.3s;}
#fixed_btn.active{ opacity: 1.0; pointer-events: all;}
#fixed_btn{ position: fixed; right: 10px; bottom: 10px; width: 70px; z-index: 99;}
#fixed_btn a{ display: flex; align-items: center; justify-content: center; width: 70px; border-radius: 50%; box-shadow:rgba(255, 255, 255, 0.53) 0 3px 20px;}
@media print, screen and (min-width:768px){
#fixed_btn{ opacity: 1.0; pointer-events: all;}
#fixed_btn.negative{ opacity: 0; pointer-events: none;}
}
@media screen and (max-width:767px){
#fixed_btn{ right: 1.25vw; bottom: 1.25vw; width: 18.75vw;}
#fixed_btn a{ width: 18.75vw;}
}

/*メイン*/
#wrap{ width: 100%; margin: auto; background: #fff; box-shadow:rgba(0, 0, 0, 0.2) 0 0 5px 2px;}
#content{ overflow:hidden;}
section{ width:100%; margin:0 auto;}
.maincontent{ padding:0; margin:0 auto; width:800px;}
@media screen and (max-width:767px){
.maincontent{ padding:0; margin:0 auto; width:84%;}
}

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



/*gift*/
#gift{ padding: 60px 0; background: url("../images/gift_bg.png") center top no-repeat #E7EDF0; background-size: 1000px auto;}
#gift h2{ text-align: center; margin-bottom: 30px;}
#gift h2 img{ height: 50px;}
#gift h3{ text-align: center; margin-bottom: 20px;}
#gift h3 img{ width: 316px;}
#gift p.txt{ text-align: center; font-size: 0.9rem; font-weight: bold; margin-bottom: 40px;}

#gift ul{ display: flex; flex-wrap: wrap; width: calc(100% + 30px); margin: -15px 0 -15px -15px;}
#gift ul li{ width: calc(50% - 30px); margin: 15px; position: relative;}

#gift ul li.gift03 p{ font-size: 0.75rem; letter-spacing: -0.05em; line-height: 1.2em; position: absolute; left: 15px; bottom: 15px;}
#gift ul li.gift03 p a{ color: #0478C6; text-decoration: underline;}
#gift ul li.gift03 p a:hover{ text-decoration: none;}
#gift ul li.gift04 p{ font-size: 0.85rem; line-height: 1em; text-align: right; position: absolute; right: 30px; bottom: 30px;}
@media screen and (max-width:767px){
#gift{ padding: 10% 0 7.5%; background: url("../images/gift_bg_smp.png") center top no-repeat; background-size: cover;}
#gift h2{ margin-bottom: 7.5%;}
#gift h2 img{ height: 13.33vw;}
#gift h3{ margin-bottom: 5%;}
#gift h3 img{ width: 100%;}
#gift p.txt{ font-size: 1.1rem; margin-bottom: 7.5%;}

#gift ul{ display: block; width: calc(100% + 8vw); margin: 0 0 0 -4vw;}
#gift ul li{ width: 100%; margin: 5% auto 0;}

#gift ul li.gift03 p{ font-size: 1rem; letter-spacing: 0; line-height: 1.2em; width: 88%; left: 0; right: 0; bottom: 5vw; margin: auto;}
#gift ul li.gift04 p{ font-size: 1rem; right: 10vw; bottom: 5vw;}
}



/*quiz*/
#quiz{ padding: 50px 0 30px; background: url("../images/quiz_bg.jpg") center center no-repeat; background-size: cover;}
#quiz h2{ text-align: center; margin-bottom: 50px;}
#quiz h2 img{ height: 50px;}
#quiz .quiz_img{ width: 640px; margin: 0 auto; position: relative;}
#quiz .quiz_img .ico01{ width: 94px; position: absolute; left: -10px; top: 120px;}
#quiz .quiz_img .ico02{ width: 90px; position: absolute; right: -20px; bottom: 10px;}
#quiz .quiz_limited{ width: 100%; height: 50px; display: flex; align-items: center; justify-content: center; background: linear-gradient(to right,  rgba(234,186,212,1) 0%,rgba(235,127,185,1) 100%);}
#quiz .quiz_limited img{ height: 34px;}
#quiz .quiz_btn{ margin: 30px auto 0;}
#quiz .quiz_btn img{ width: 315px; border-radius: 80px; box-shadow:rgba(0, 0, 0, 0.16) 0 3px 20px;}
@media screen and (max-width:767px){
#quiz{ padding: 10% 0 10%; background: url("../images/quiz_bg_smp.png") center center no-repeat; background-size: cover;}
#quiz h2{ margin-bottom: 15%;}
#quiz h2 img{ height: 13.33vw;}
#quiz .quiz_img{ width: calc(100% + 16vw); margin: 0 0 0 -8vw;}
#quiz .quiz_img .ico01{ width: 15vw; left: 0; top: 36vw;}
#quiz .quiz_img .ico02{ width: 15vw; right: 0; bottom: 0;}
#quiz .quiz_limited{ height: 13.33vw;}
#quiz .quiz_limited img{ height: 8.25vw;}
#quiz .quiz_btn{ margin: 5% auto 0;}
#quiz .quiz_btn img{ width: 88%; border-radius: 15vw; box-shadow:rgba(0, 0, 0, 0.16) 0 3px 20px;}
}



/*date*/
#date{ padding: 20px 0 30px; background: url("../images/date_bg.jpg") center center no-repeat; background-size: cover;}
#date h2{ text-align: center; margin-bottom: 30px;}
#date h2 img{ height: 75px;}
#date h3{ text-align: center; margin-bottom: 40px;}
#date h3 img{ width: 300px;}
#date figure.date_zu{ width: 600px; margin: 0 auto 20px;}
#date p.txt{ width: 555px; margin: 0 auto 30px;}
#date h4{ text-align: center; margin-bottom: 10px;}
#date h4 img{ width: 250px;}
@media screen and (max-width:767px){
#date{ padding: 7.5% 0 7.5%; background: url("../images/date_bg_smp.png") center center no-repeat; background-size: cover;}
#date h2{ margin-bottom: 10%;}
#date h2 img{ height: 21.5vw;}
#date h3{ margin-bottom: 10%;}
#date h3 img{ width: 100%;}
#date figure.date_zu{ width: calc(100% + 7.5vw); margin: 0 0 10% -3.75vw;}
#date p.txt{ width: 100%; margin: 0 auto 10%;}
#date h4{ margin-bottom: 5%;}
#date h4 img{ width: 80%;}
}



/*requirement*/
#requirement{ padding: 60px 0;}
#requirement h2{ text-align: center; margin-bottom: 30px;}
#requirement h2 img{ height: 50px;}

#requirement .requirement_list dl dt{ display: flex; margin-bottom: 10px;}
#requirement .requirement_list dl dt strong{ display: flex; align-items: center; justify-content: center; background: #78AFC7; color: #fff; padding: 8px; border-radius: 4px; font-size: 0.8rem; font-weight: 500; line-height: 1em;}
#requirement .requirement_list dl dd{ margin-bottom: 20px;}
#requirement .requirement_list dl dd p{ font-size: 0.8rem; line-height: 1.5em;}
#requirement .requirement_list dl dd ul li{ font-size: 0.8rem; line-height: 1.5em; padding-left: 16px; margin-bottom: 0.5em; position: relative;}
#requirement .requirement_list dl dd ul li:before{ content: ""; width: 6px; height: 6px; background: #78AFC7; position: absolute; left: 0; top: 0.66em; border-radius: 50%;}
#requirement .requirement_list .att{ margin-top: 20px;}
#requirement .requirement_list .att p{ font-size: 0.8rem; line-height: 1.5em;}
#requirement .requirement_list .att p a{ color: #78AFC7; text-decoration: underline;}
#requirement .requirement_list .att p a:hover{ text-decoration: none;}

#requirement .cv_tel{ margin-top: 40px; text-align: center; background: #F8EDF3; padding: 20px; border-radius: 20px;}
#requirement .cv_tel h4{ font-size: 0.8rem; font-weight: bold; margin-bottom: 15px;}
#requirement .cv_tel .tel_info{ display: flex; flex-direction: column; align-items: center; justify-content: center; font-weight: 900; margin: 15px auto;}
#requirement .cv_tel .tel_info span{ font-size: 0.8rem; line-height: 1em; margin-bottom: 0.25em;}
#requirement .cv_tel .tel_info a{ display: inline-block; font-size: 1.5rem; line-height: 1em; pointer-events: none;}
#requirement .cv_tel p{ font-size: 0.8rem; line-height: 1.25em; margin-bottom: 10px;}
#requirement .cv_tel .att{ display: inline-block; text-align: left;}
#requirement .cv_tel .att p{ font-size: 0.65rem; line-height: 1.33em; padding-left: 1.25em; position: relative;}
#requirement .cv_tel .att p:before{ content: "※"; position: absolute; left: 0; top: 0;}
@media screen and (max-width:767px){
#requirement{ padding: 10% 0;}
#requirement h2{ margin-bottom: 10%;}
#requirement h2 img{ height: 13.33vw;}

#requirement .requirement_list dl dt{ margin-bottom: 1.25%;}
#requirement .requirement_list dl dt strong{ padding: 1.25vw; border-radius: 0.625vw; font-size: 1rem;}
#requirement .requirement_list dl dd{ margin-bottom: 5%;}
#requirement .requirement_list dl dd p{ font-size: 1rem;}
#requirement .requirement_list dl dd ul li{ font-size: 1rem; padding-left: 3.75vw;}
#requirement .requirement_list dl dd ul li:before{ width: 1.875vw; height: 1.875vw; top: 0.6em;}
#requirement .requirement_list .att{ margin-top: 5%;}
#requirement .requirement_list .att p{ font-size: 0.8rem;}

#requirement .cv_tel{ margin-top: 5%; padding: 5%; border-radius: 2.5vw;}
#requirement .cv_tel h4{ font-size: 1rem; margin-bottom: 3.75%;}
#requirement .cv_tel .tel_info{ margin: 3.75% auto;}
#requirement .cv_tel .tel_info span{ font-size: 1rem;}
#requirement .cv_tel .tel_info a{ font-size: 1.8rem;}

#requirement .cv_tel p{ font-size: 1rem; margin-bottom: 2.5%;}
#requirement .cv_tel .att p{ font-size: 0.84rem;}
}

#requirement .requirement_btn{ margin: 30px auto 0;}
#requirement .requirement_btn img{ width: 315px; border-radius: 80px; box-shadow:rgba(0, 0, 0, 0.16) 0 3px 20px;}
@media screen and (max-width:767px){
#requirement .requirement_btn{ margin: 5% auto 0;}
#requirement .requirement_btn img{ width: 88%; border-radius: 15vw; box-shadow:rgba(0, 0, 0, 0.16) 0 3px 20px;}
}





/*form*/
#form{ padding: 60px 0; background: #E7EDF0;}
#form .maincontent{ width: 810px;}
#form h2{ text-align: center; margin-bottom: 30px;}
#form h2 img{ height: 50px;}
@media screen and (max-width:767px){
#form{ padding: 15% 0;}
#form .maincontent{ width: 84%;}
#form h2{ margin-bottom: 10%;}
#form h2 img{ height: 13.33vw;}
}

/*form-parts*/
::placeholder{ color: #AFAFAF; line-height: 1.25em;}
::-ms-input-placeholder{ color: #AFAFAF; line-height: 1.25em;}
input[type=submit], button{ -webkit-appearance: none;}
input, textarea, select, button{ width:100%; padding: 0.75em 1em; font-size: 0.8rem; line-height: 1.25em; box-sizing: border-box; outline: none; border: none; color:#000; font-family:'Noto Sans JP',"ヒラギノ角ゴ Pro","Hiragino Kaku Gothic Pro","メイリオ","ＭＳ Ｐゴシック",sans-serif; vertical-align: bottom; background: #fff; border-radius: 6px;}
textarea{ text-align: left; height: 26.5em; font-weight: normal;}
label{ cursor: pointer;}
input[type="checkbox"],
input[type="radio"]{ padding: 0; margin: 0 0.5em 0 0; width: auto; line-height: 0;}
@media screen and (max-width:767px){
input, textarea, select, button{ padding: 0.75em 1em; font-size: 1rem;}
textarea{ height: 14em;}
}

.select_wrap{ background: #fff; border-radius: 6px; font-size: 0.8rem; display: flex; align-items: center; justify-content: center; height: 2.75em;}
@media screen and (max-width:767px){
.select_wrap{ font-size: 1rem;}
}

#form table{ width: 100%;}
#form table th{ display: block; width: 100%; font-size: 1rem; font-weight: 500; line-height: 1.5em; margin-bottom: 8px;}
#form table th span{ display: inline-block; background: #E0647C; color: #fff; font-size: 0.7rem; line-height: 1em; padding: 0.25em; border-radius: 4px; margin-left: 0.5em;}
#form table td{ display: block; width: 100%; margin-bottom: 30px; font-size: 1rem;}
#form table td p.txt{ font-size: 0.9rem; line-height: 1em; margin: 0 0 0.5em;}
#form table td dl dt{ font-size: 0.9rem; font-weight: 500; margin-bottom: 4px;}
#form table td dl dd:not(:last-child){ margin-bottom: 10px;}

#form table td ul li{ display: flex; align-items: center; font-size: 1rem; line-height: 2em; font-weight: 500; margin: 0.5em auto; padding-left: 50px; position: relative;}
#form table td ul li input{ display: none;}
#form table td ul li label:before{ content: ""; width: 40px; height: 40px; background: #fff; position: absolute; left: 0; top: 50%; transform: translateY(-50%); border-radius: 50%;}
#form table td ul li input:checked + label:after{ content: ""; width: 20px; height: 20px; background: #E0647C; position: absolute; left: 10px; top: 50%; transform: translateY(-50%); border-radius: 50%;}

#form .check_box{ background: #D8E1E5; border-radius: 12px; padding: 20px 40px;}
#form .check_box ul li{ font-size: 1rem; line-height: 2em; margin: 0.5em auto; font-weight: 500; padding-left: 50px; position: relative;}
#form .check_box ul li span.req{ display: inline-block; background: #E0647C; color: #fff; font-size: 0.7rem; line-height: 1em; padding: 0.25em; border-radius: 4px; margin-left: 0.5em;}
#form .check_box ul li input{ display: none;}
#form .check_box ul li label:before{ content: ""; width: 40px; height: 40px; background: #fff; position: absolute; left: 0; top: 50%; transform: translateY(-50%); border-radius: 8px;}
#form .check_box ul li input:checked + label:after{ display: inline-block; content: ''; width: 20px; height: 10px; border-left: 4px solid #E0647C; border-bottom: 4px solid #E0647C; position: absolute; left: calc(10px + 2px); top: calc(50% - 4px); transform: rotate(-45deg) translateY(-50%); transform-origin: center center;}

#form .submit_btn button{ display: flex; align-items: center; justify-content: center; margin: 50px auto 0; background: #000; color: #fff; font-size: 1.25rem; font-weight: bold; width: 315px; height: 80px; border-radius: 80px; text-shadow: 0px 3px 6px rgba(193,90,145,1.0); box-shadow:rgba(0, 0, 0, 0.16) 0 3px 20px; cursor: pointer; transition: 0.3s;}
#form .submit_btn button:hover{ opacity: 0.7;}
#form .submit_btn button{ background: linear-gradient(to right,  rgba(235,127,185,1) 0%,rgba(216,5,112,1) 100%);}
#form .submit_btn button.reset{ background: #D3CCC7; color: #665E56; text-shadow: none; margin-top: 20px;}
@media screen and (max-width:767px){
#form table th{ font-size: 1.2rem; margin-bottom: 1.25%;}
#form table th span{ font-size: 1rem; border-radius: 0.625vw;}
#form table td{ margin-bottom: 7.5%;}
#form table td p.txt{ font-size: 1rem;}
#form table td dl dt{ font-size: 1rem; margin-bottom: 1.25%;}
#form table td dl dd:not(:last-child){ margin-bottom: 2.5%;}

#form table td ul li{ font-size: 1.2rem; line-height: 2em; font-weight: 500; margin: 0.5em auto; padding-left: 10vw;}
#form table td ul li label:before{ width: 7.5vw; height: 7.5vw;}
#form table td ul li input:checked + label:after{ width: 3.75vw; height: 3.75vw; left: 1.875vw;}

#form .check_box{ border-radius: 2.5vw; padding: 2.5% 10%;}
#form .check_box ul li{ font-size: 1.2rem; line-height: 1.5em; margin: 0.75em auto; padding-left: 10vw;}
#form .check_box ul li span.req{ font-size: 1rem; border-radius: 0.625vw;}
#form .check_box ul li label:before{ width: 7.5vw; height: 7.5vw; border-radius: 1.25vw;}
#form .check_box ul li input:checked + label:after{ width: 3.75vw; height: 1.875vw; border-width: 1vw; left: calc(10px + 0.5vw); top: calc(50% - 1vw);}

#form .submit_btn button{ margin: 10% auto 0; font-size: 1.5rem; width: 100%; height: 20vw; border-radius: 15vw;}
}

input.error, textarea.error, select.error{ border: 2px solid #E0657C;}
#form p.error_txt{ color: #E0657C; font-size: 0.8rem; font-weight: 500;}
#form table td ul li input.error + label:before{ border: 2px solid #E0657C;}
#form .check_box ul li input.error + label:before{ border: 2px solid #E0657C;}
#form .check_box p.error_txt{ margin: -10px 0 0 50px;}
@media screen and (max-width:767px){
#form .check_box p.error_txt{ margin: -2.5vw 0 0 10vw;}
}

#form.confirm p.txt{ font-size: 1rem; margin-bottom: 50px;}
#form.confirm td{ border-bottom: 1px dotted #665E56; padding-bottom: 20px;}
#form.confirm td p{ font-size: 1rem;}
#form.confirm dl dt{ font-size: 1rem;}
#form.confirm dl dt span{ margin-left: 2em;}
@media screen and (max-width:767px){
#form.confirm p.txt{ font-size: 1.2rem; margin-bottom: 10%;}
#form.confirm td{ padding-bottom: 3.75%;}
#form.confirm td p{ font-size: 1.2rem;}
#form.confirm dl dt{ font-size: 1.2rem; font-weight: 400;}
#form.confirm dl dt span{ margin-left: 2em;}
}



/*thanks*/
#thanks{ background: url("../images/thanks_bg.jpg") center center no-repeat; background-size: cover; position: relative; overflow: hidden;}
#thanks span.ico01{ width: 220px; position: absolute; left: -45px; top: -40px;}
#thanks span.ico02{ width: 170px; position: absolute; right: -45px; bottom: 90px;}
#thanks .maincontent{ display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 160px 0; min-height: calc(100vh - 48px);}
#thanks h2{ font-size: 1.33rem; margin-bottom: 40px;}
#thanks p{ font-size: 1rem; text-align: center;}
@media screen and (max-width:767px){
#thanks span.ico01{ width: 50vw; left: -10vw; top: -10vw;}
#thanks span.ico02{ width: 33.33vw; right: -10vw; bottom: 10vw;}
#thanks .maincontent{ padding: 30% 0; min-height: calc(100vh - 12vw);}
#thanks h2{ font-size: 1.6rem; margin-bottom: 10%;}
#thanks p{ font-size: 1.2rem;}
}





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