@charset "UTF-8";

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@500;600&display=swap');

/*variable --------------------------------------*/

:root {
--fs10: 62.5%;
--fs12: 75%;
--fs14: 87.5%;
--fs16: 100%;
--fs18: 112.5%;
--fs20: 125%;
--fs22: 137.5%;
--fs24: 150%;
--fs26: 162.5%;
--fs27: 168.8%;
--fs28: 175%;
--fs30: 187.5%;
--fs32: 200%;
}

:root {
--num4: 4px;
--num5: 5px;
--num10: 10px;
--num15: 15px;
--num18: 18px;
--num20: 20px;
--num25: 25px;
--num30: 30px;
--num34: 34px;
--num40: 40px;
--num50: 50px;
--num60: 60px;
--num100: 100px;
--num120: 120px;
--num145: 145px;
--num155: 155px;
--num200: 200px;
--num220: 220px;
    
--numM20: -20px;
--numM30: -30px;
--numM55: -55px;
}

@media screen and (max-width: 767px) {
    
    :root {
    --num4: 0.525vw;
    --num5: 0.656vw;
    --num10: 1.313vw;
    --num15: 1.969vw;
    --num18: 2.365vw;
    --num20: 2.625vw;
    --num25: 3.281vw;
    --num30: 3.9375vw;
    --num34: 4.463vw;
    --num40: 5.25vw;
    --num50: 6.562vw;  
    --num60: 7.875vw;
    --num100: 13.125vw;
    --num120: 15.75vw;
    --num145: 19.0313vw;
    --num155: 20.344vw;
    --num200: 26.25vw;
    --num220: 28.875vw;
        
    --numM20: -2.625vw;
    --numM30: -3.9375vw;
    --numM55: -7.219vw;
    }
    
}


/* general --------------------------------------*/

* { -webkit-box-sizing: border-box; box-sizing: border-box; }
body { line-height: 1.5; min-width: 100%; font-size: 16px; font-weight: 600; font-family: 'Noto Sans JP', sans-serif; }
img { max-width: 100%; }

@media screen and (max-width: 767px) {
    body { font-size: 2.1vw; }
}


/*share --------------------------------------*/

.textCenter { text-align: center !important; }
.txtSuper { font-size: .7em; }
.atComment { font-size: var(--fs24); margin-top: var(--num25); font-weight: 500; line-height: 1.4; }

.innerContent { width: 100%; max-width: 767px; margin: 0 auto; }


/* header --------------------------------------*/

.headerWrap { height: 109px; padding: 22px 0; border-bottom: 4px solid #0c3bbc; -webkit-box-sizing: border-box; box-sizing: border-box; align-items: center; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; -webkit-box-pack: justify; -ms-flex-pack: justify; }
.logoWrap a{ display: block; width: 249px; }
.logoMinato{ margin-left: 40px; }

@media screen and (max-width: 767px) {
    .headerWrap { height: 14.21vw; padding: 2.87vw 0; border-bottom: 0.52vw solid #0c3bbc; }
    .logoWrap a{ width: 32.46vw; }
    .logoMinato{ margin-left: 5.22vw; }
}


/* footer --------------------------------------*/

.footerArea p { padding: 22px 0; font-size: var(--fs20); font-weight: bold; color: #fff; }

@media screen and (max-width: 767px) {
  .footerArea p { padding: 2.87vw 0; font-size: 2.61vw; }
}


/*mv --------------------------------------*/

#mvSec { background: url("/kojin/hiraku/cam/spring_campaign2026/images/title_bg.png") no-repeat #a1cee7 center top; }

@media screen and (max-width: 767px) {
    #mvSec { background: #a1cee7; }
}


/*entry --------------------------------------*/

.btnSec { background: #a1cee7; text-align: center; font-size: var(--fs28); }
.btnSec a { display: block; margin: var(--num15) auto 0; }

@media screen and (max-width: 767px) {
    .btnSec a { width: 88vw; }
}


/*course --------------------------------------*/

#courseSec { background: url("/kojin/hiraku/cam/spring_campaign2026/images/bg7_w.png") #a1cee7 no-repeat center bottom; padding-bottom: var(--num220); }
#courseSec .courseArea .innerContent { background: #fff; border-radius:  var(--num34); max-width: 667px; position: relative; padding: var(--num145) var(--num50) var(--num60); }
#courseSec .courseArea .innerContent h2 { position: absolute; left: var(--numM30); top: var(--numM55); width: 720px; }
#courseSec .courseArea .innerContent .conditionsBox dt { background: #e9528e; text-align: center; color: #fff; letter-spacing: 0.4em; font-size: var(--fs28); padding: var(--num5); }
#courseSec .courseArea .innerContent .conditionsBox dd { border: 2px solid #e9528e; padding: var(--num18); color: #e9528e; font-size: var(--fs28); }
#courseSec .courseArea .innerContent .conditionsBox + p { margin-top: var(--num30); }

@media screen and (max-width: 767px) {
    #courseSec { background-size: 393.75vw; }
    #courseSec .courseArea .innerContent { max-width: 84vw; }
    #courseSec .courseArea .innerContent h2 { width: 94vw; }
}

/*course1*/
#courseSec #course1 { background: url("/kojin/hiraku/cam/spring_campaign2026/images/bg1.png") no-repeat center top; padding-top: var(--num155); }
#courseSec #course1 ul li { margin-top: var(--num30); }

/*course2*/
#courseSec #course2 { background: url("/kojin/hiraku/cam/spring_campaign2026/images/bg2.png") no-repeat center top; padding-top: var(--num100); }
#courseSec #course2 #merit { margin-top: var(--num40); display: flex; flex-wrap: wrap; justify-content: space-between; }
#courseSec #course2 #merit p { width: 62%; font-size: var(--fs24); }
#courseSec #course2 #merit p + div { width: 35%; margin-top: var(--num25); }

/*course3*/
#courseSec #course3 { background: url("/kojin/hiraku/cam/spring_campaign2026/images/bg3.png") no-repeat center top; padding: var(--num100) 0 var(--num60); }
#courseSec #course3 .imgBox { margin-top: var(--num30); }

/*course4*/
#courseSec #course4 { background: url("/kojin/hiraku/cam/spring_campaign2026/images/bg4.png") no-repeat center top; padding: var(--num50) 0 var(--num60); }

/*course5*/
#courseSec #course5 { background: url("/kojin/hiraku/cam/spring_campaign2026/images/bg5.png") no-repeat center top; padding: var(--num50) 0 var(--num120); }

/*course6*/
#courseSec #course6 { background: url("/kojin/hiraku/cam/spring_campaign2026/images/bg6.png") no-repeat center top; padding-bottom: var(--num60); }
#courseSec #course6 .tableBox { margin-top: var(--num30); }
#courseSec #course6 h3 { font-size: var(--fs32); color: #a18c74; font-weight: bold; text-align: center; margin-top: var(--num40); }
#courseSec #course6 .appBox { position: relative; }
#courseSec #course6 .appBox dt { position: absolute; left: var(--num60); top: var(--numM20); background: #a18c74; width: var(--num200); padding: 2px 0; text-align: center; color: #fff; font-weight: bold; font-size: var(--fs28); }
#courseSec #course6 .appBox dd { border: 2px solid #a18c74; box-shadow: var(--num4) var(--num4) 0 0 rgba(161, 140, 116, 1); border-radius: var(--num20); display: flex; justify-content: space-between; align-items: center; padding: var(--num40) var(--num25) var(--num30); margin-top: var(--num50); }
#courseSec #course6 .appBox dd figure { width: 45%; }
#courseSec #course6 .appBox dd p { width: 50%; font-size: var(--fs26); }

@media screen and (max-width: 767px) {
    /*bg*/
    #courseSec #course1,
    #courseSec #course2,
    #courseSec #course3,
    #courseSec #course4,
    #courseSec #course5,
    #courseSec #course6 { background-size: 115vw; }
}


/*attentionSec --------------------------------------*/

#attentionSec { width: 100%; margin: 0 auto; font-weight: 500; }
#attentionSec .innerContent { max-width: 677px; }
#attentionSec .atAreaInner { background: #f0f9ff; padding: var(--num40); }

@media screen and (max-width: 767px) {
    #attentionSec .innerContent { max-width: 90vw; }
}

#attentionSec h2 { font-size: var(--fs32); background: #41b2fe; color: #fff; font-weight: bold; padding: var(--num20) var(--num40); margin: var(--num60) 0 0; }
#attentionSec h3 { font-size: var(--fs24); background: #d6efff; font-weight: bold; padding: var(--num20) var(--num60) var(--num20) var(--num20); margin: var(--num10) 0 0; }
#attentionSec h4 { font-size: var(--fs30); color: #0068ae; font-weight: bold; padding: var(--num20) 0; margin: var(--num10) 0 0; border-bottom: 1px solid #0068ae;}
#attentionSec h5 { font-size: var(--fs28); color: #0068ae; font-weight: bold; padding: 0; margin: var(--num30) 0 0; }

#attentionSec .atAreaInner .accordionBody > ul  { font-size: var(--fs24); line-height: 1.3; }
#attentionSec .atAreaInner ul { margin-left: 0; padding: 0; }
#attentionSec .atAreaInner .accordionBody + h3 { margin-top: var(--num40); }
#attentionSec .atAreaInner .accordionBody + h4 { margin-top: var(--num40); }
#attentionSec .atAreaInner h5 + ul { margin-left: 0; }
#attentionSec .atAreaInner .accordionBody > ul > li { margin-top: var(--num20); list-style: disc; margin-left: var(--num40); }

#attentionSec .atAreaInner ul.atList li { list-style: none; padding-left: 1em; text-indent: -1em; margin-top: var(--num20); } 
#attentionSec .innerContent > p { margin: var(--num60) 0; font-size: var(--fs24); }

/*accordionHead*/
#attentionSec .accordionHead { position: relative; cursor: pointer; }
#attentionSec .accordionHead::before { content: ''; position: absolute; right: var(--num15); top: 50%; transform: translateY(-50%); width: var(--num34); height: var(--num4); z-index: 1; }
#attentionSec .accordionHead::after { content: ''; position: absolute; right: var(--num30); top: 50%; transform: translateY(-50%); width: var(--num4); height: var(--num34); z-index: 1; }

#attentionSec h2.accordionHead::before,
#attentionSec h2.accordionHead::after { background-color: #fff; }

#attentionSec h3.accordionHead::before,
#attentionSec h3.accordionHead::after { background-color: #41b2fe; }

#attentionSec h4.accordionHead::before,
#attentionSec h4.accordionHead::after { background-color: #0069ae; }

#attentionSec .accordionHead.minus::after { display: none; transition: all 0.2s ease; }

#attentionSec .accordionBody { display: none; }