@charset "utf-8";

/* common */
:root {
  --main-color: #485bb3;
  --sub-color: #c69e04;

  --gry: #dedede;
  --blu: #cad8f9;
  --blu2: #8394e1;
  --l-blu: #f4f8ff;
  --l-blu2: #edf3ff;/* 少し濃い */

  --en: "Lora",serif;
}

#wrapper { overflow: hidden;}
body { font-family: 'Noto Sans JP', sans-serif; line-height: 1.87; color: #333;}
article { font-weight: 400;}
article>section { padding: unset;}
.btn_mail a::before { border-top: 10px solid #fff100 !important; border-right: 10px solid #fff100 !important;}

.bg-wht { background: #fff;}
.bg-blu { background: var(--l-blu);}
.bg-blu2 { background: var(--l-blu2);}/* 少し濃い */

.sec-box { padding-top: clamp(3em,7vw,110px);}
.txt { margin-block: 0;}
.mt40 { margin-top: min(5vw,40px);}

.marker-skew { position: relative; z-index: 1;}
.marker-skew::after { position: absolute; z-index: -1; content: ""; left: 0; bottom: 0; height: .8em; width: 100%; background: #fbec94; transform: skewX(28deg);}
.arrow-u { position: relative;}
.arrow-u::before,.arrow-u::after { position: absolute; content: ""; top: 50%; transform: translateY(-50%); }
.arrow-u::before { z-index: 2; right: calc(1em + .5em); width: .5em; height: .5em; border: 1px solid var(--main-color); border-left: 0; border-bottom: 0; transform: translateY(-60%) rotate(135deg);}
.arrow-u::after { right: 1em; width: 1.56em; height: 1.56em; border-radius: 50%; background: #fff;}
.btn-def { position: relative; display: inline-block; min-width: 255px; padding: 0.4em 2em 0.4em 2em; border-radius: 0; font-size: .9375em; color: var(--main-color); font-weight: 500; text-align: center; border: solid 2px var(--main-color); transition: all .5s; cursor: pointer;}
.btn-def::before { content: ""; position: absolute; top: 0; right: 0; border: 10px solid transparent; border-top: 10px solid var(--main-color); border-right: 10px solid var(--main-color); transition: all .5s;}
.btn-def:hover { color: #fff; background: var(--main-color);}
.btn-def:hover::before { border-top: 10px solid #fff; border-right: 10px solid #fff;}

em { color: var(--main-color);}
.mt25 { margin-top: 2.5em;}
.marker { padding-inline: .2em;}

/* ttl */
[class*="ttl-"] { font-weight: 700; line-height: 1.5;}
.ttl-def {
  font-size: min(7vw,38px); text-align: center;
  .sub { margin-block: unset;}
  .small { font-size: .58em;}
}
hgroup {
  &:has(.ttl-en) { display: flex; flex-direction: column-reverse; row-gap: 1.25em;}
  .ttl-en {
    width: fit-content; margin-block: unset; margin-inline: auto; padding: .2em 1.5em .3em; font-size: min(4vw,18px); color: var(--sub-color); font-family: var(--en); font-weight: 400; position: relative;
    &::before,&::after {
      content: ''; position: absolute; width: .83em; aspect-ratio: 1; background-color: var(--blu); clip-path: polygon(100% 0, 0 0, 0 100%);
    }
    &::before {
      top: 0; left: 0;
    }
    &::after {
      right: 0; bottom: 0; rotate: 180deg;
    }
  }
}
.ttl-list {
  padding-bottom: min(3vw,26px); font-size: min(4.8vw,26px); border-bottom: 1px solid var(--gry);
  em { font-size: 1.15em;}
}

/* list */
.list-dot { font-size: .93em; line-height: 1.5; text-align:left; }
.list-dot li { padding-left: 1em; position: relative; }
.list-dot li:not(:last-child) { margin-bottom:0.3em; }
.list-dot li::before { content:""; position:absolute; top:.7em; left:0; width:5px; height:5px; 
  background:var(--main-color); border-radius:50%; }


/* mv */
#mv {
  position: relative; height: 600px; background: url(../img/rakusei/mv.jpg) no-repeat center / cover; overflow: hidden; z-index: 1;
  hgroup {
    position: absolute; top: 50%; left: 50%; translate: -50% -50%; display: flex; flex-direction: column-reverse;
    .txt-intro { width: fit-content; margin-inline: auto; padding: .5em 1.5em; font-size: min(3.2vw,18px); color: #fff; font-weight: 700; background-color: var(--main-color);}
  }
}
#pan { position: relative; z-index: 1;}

/* message */
#message { 
  padding-top: clamp(2em,5vw,50px); padding-bottom: 0; position: relative; z-index: 0;
  &::before,&::after { content: ''; position: absolute; width: clamp(237px,31vw,475px); height: clamp(207px,27vw,415px); background: url(../img/rakusei/bg-deco.svg) no-repeat center / contain; z-index: -1;}
  &::before { top: -7em; left: -1em;}
  &::after { top: 6em; right: -3em;}
  
  .message-box {
    padding: min(8%,60px) min(4.6%,70px); background-color: #fff; box-shadow: 0px 0px 21px 0px rgba(227, 232, 241, 0.52);
    .ttl-message {
      padding-bottom: 1em; font-size: min(5vw,26px);font-feature-settings: "palt"; text-align: center;
      .big { font-size: 1.36em;}
    }
  }
}

/* note */
.note {
  position: relative; z-index: 1;
  .ttl-note {
    padding: .2em 1em clamp(3px,.6vw,6px); font-size: clamp(16px,4.2vw,18px); font-weight: 700; color: #fff; background-color: var(--main-color);
    >span {
      padding-left: 1em;  position: relative;
      &::before {
        content: ''; position: absolute; top: 50%; left: 0; transform: translateY(-50%); width: 8px; height: 10px; background-color: #fff; clip-path: polygon(100% 50%, 0 0, 0 100%);
      }
    }
  }
  .txt {
    padding: 1em 1em 1.2em; font-weight: 500; background-color: var(--l-blu);
    em { font-size: 1.33em; line-height: 1;}
  }
}


/* support */
.support-list {
  counter-reset: support-num; margin-top: min(10%,50px);
  >li {
    display: grid; grid-template-columns: minmax(auto,460px) auto; gap: clamp(16px,4vw,35px); padding: min(6%,50px) min(5%,50px); border: 1px solid var(--blu2); position: relative;
    &:not(:first-child) { margin-top: min(10%,45px);}
    .label {
      position: absolute; top: -1em; left: 1.5em; padding-inline: 1em; font-size: 1.12em; color: var(--sub-color); font-family: var(--en); line-height: 1; background-color: #fff;
      counter-increment: support-num;
      &::after {
        content: counter(support-num); padding-left: .2em; font-size: 1.72em;
      }
    }
    .txt-area {
      display: flex; flex-direction: column; row-gap: 1em; margin-top: -.6em;
      .other {
        margin-top: auto;
        .ttl { width: fit-content; padding: 0 1em .1em; color: #fff; background-color: var(--blu2);}
        .con-wrap {
          padding: 1em 1.5em; background-color: var(--l-blu); position: relative; overflow: hidden; z-index: 0;
          &::before {
            content: ''; position: absolute; top: 0; right: -4em; width: min(30%,150px); aspect-ratio: 1;  background: url(../img/rakusei/bg-deco-mini.svg) no-repeat center / contain; z-index: -1;
          }
          .txt { margin-block: unset; font-size: .87em;}
        }
      }
    }
    .images-area {
      display: grid; grid-template-columns: repeat(2,auto); grid-template-rows: repeat(3,auto); gap: .93em;
      grid-template-areas:
      'main main'
      'main main'
      'sub1 sub2';
      >li {
        &:first-child { grid-area: main;}
      }
      figure {
        position: relative;
        figcaption { position: absolute; top: 0; left: 0; padding-inline: .7em; font-size: .81em; color: #fff; background-color: var(--sub-color);}
      }
    }
  }
}


/* map */
#map {
  &.sec-box { padding-bottom: clamp(3em,7vw,110px);}
  .lead {
    margin-bottom: 1em;
    em { font-size: 1.12em;}
  }
  .pic { padding: 1.5em; background: var(--l-blu2);}
  .con-wrap {
    display: grid; grid-template-columns: repeat(2,auto); gap: 1.5em; align-items: center; width: fit-content; margin-inline: auto;
    .way {
      gap: .7em;
      >li { max-width: 100px;}
    }
    .txt { font-size: min(4vw,20px); font-weight:700;}
  }
}

.bnr_topics_member { padding-bottom: clamp(3em,7vw,110px); }

/* Bukken */
#bukken { padding-bottom: clamp(3em,9vw,90px);}
#bukken > .ttl-def { margin-bottom: clamp(2em,6vw,60px);}
.bukken-list { position: relative; padding: clamp(3em,6vw,60px) clamp(1em,9vw,90px) clamp(3em,6vw,60px); background: #fff; box-shadow: 0 0 16px rgba(0,0,0,0.09);}
.ttl-bukken {
  font-size: min(5vw,30px);
  span {
    position: relative;
    &::before,&::after {
      content: ''; position: absolute; top: 50%; transform: translateY(-50%); width: .5em; height: .56em; background-color: var(--blu2); clip-path: polygon(100% 50%, 0 0, 0 100%);
    }
    &::before { left: -.75em;}
    &::after { right: -.75em; clip-path: polygon(0 50%, 100% 0, 100% 100%);}
  }
}

#bukken .note { max-width: 700px; margin-inline: auto;}

#bukken .slide{ margin:2em auto; }
#bukken .slider, #bukken .thumbnail_slider{ width:95%; max-width:700px; margin:0 auto; }
#bukken .slick-slide img { margin:0 auto; }
#bukken .slick-arrow{ position:absolute; content:""; z-index:1; top:50%; transform:translateY(-50%); text-indent: -9999px; background: none; }
#bukken .slick-prev{ left:-5.7em; }
#bukken .slick-next{ right:-5.7em; }
#bukken .slick-prev::before, #bukken .slick-next::before{ position: absolute; content: ""; top:0; right:0; width:4em; height:4em;
  background: url(/special/img/rakusei/ico-arrow.svg) no-repeat center / 100%; }
#bukken .slick-prev::before{ left:0; right:auto; transform: rotate(180deg); }
.col-ttl { text-align: center; letter-spacing: 0.08em; color: #fff;}
.col-ttl.in-ttl .type { display: inline-block; padding: .1em 1.5em;}
.col-ttl.in-ttl .type.mens { background: #41a1be;}
.col-ttl.in-ttl .type.ml { background: #ffa749;}
.bukken-lead { line-height: 1.7;}
.movie + .bukken-box { margin-top: clamp(4em,10vw,100px);}
#bukken .ra.sec-box{ padding-bottom:0; }

.point-box { position: relative; max-width: 450px; margin: clamp(2em,4.5vw,45px) auto; background:  var(--blu); font-family: 'Zen Kaku Gothic New', sans-serif;}
.point-box .txt { position: absolute; transform: rotate(-9deg); left: -0.9em; top: 0.3em; line-height: 1.3; font-size: clamp(18px,2.3vw,23px); color: var(--main-color); text-shadow: 2px 2px 1px #fff, -2px 2px 1px #fff, 2px -2px 1px #fff, -2px -2px 1px #fff, 2px 0px 1px #fff, 0px 2px 1px #fff, -2px 0px 1px #fff, 0px -2px 1px #fff;}
.point-box .txt::before { position: absolute; content: ""; left: -0.2em; top: -1.7em; transform: translateX(-50%); width: 4.5em; height: 2.8em; background: url(../img/rakusei/deco-gritter-yel.svg) no-repeat center / contain;}
.point-list { display: flex; position: relative; top: -.8em; padding-bottom: .5em; justify-content: center; flex-wrap: wrap;}
.point-list li { position: relative; z-index: 1; width: 40%; text-align: center;}
.point-list li::before { position: absolute; z-index: -1; content: ""; width: 4em; height: 4em; left: 50%; top: 60%; transform: translateX(-50%) translateY(-50%); border-radius: 50%; background: #fff;}
.point-list li:nth-child(n + 2) { margin-top: 1em;}
.point-list li:first-child { width: 100%;}
.point-list li figure { margin-inline: auto; width: 3.43em;}
.point-list li:first-child figure { width: 2.18em;}
.point-list li p { margin: 0; font-size: 1.125em;}
.point-list li:first-child p { font-size: clamp(18px,2.5vw,25px);}
.point-list li:first-child p .marker-skew { font-size: 1.12em; color: #ef4d2d;}

.detail-ttl { padding-block: .3em; text-align: center; letter-spacing: 0.08em; color: #fff; background: var(--main-color);}
.d-list{ display:-webkit-box; display:flex; flex-wrap:wrap; font-size:clamp(14px,1.55vw,15.5px); }
.d-list dt, .d-list dd{ padding:1.8em 1em 1.8em 1.8em; border-bottom:1px solid #cfcfcf; color: #333;}
.d-list dt{ display: grid; width:18%; background: var(--blu); }
.d-list dt span { display: grid; align-items: center;}
.d-list dd{ width:82%; }

.g-map { height: clamp(300px,33vw,330px); width: 100%; padding-top: 41%; position: relative;}
.g-map iframe { position: absolute; top: 0; right: 0; width: 100% !important; height: 100% !important;}

.fee-box{ padding:1.8em 2em .5em; background: var(--blu); }
.fee-box .txt-notice { font-size: .875em;}
.col-ttl-price { margin-bottom: 1em; text-align: center; font-size: clamp(1.125rem, 0.825rem + 1.28vw, 1.625rem);}
#bukken .d-down{ margin-bottom:1em; text-align:center; background:#FFF; box-shadow: 0px 0px 15px -5px rgba(0, 0, 0, 0.1); }
#bukken .d-down dt{ position:relative; padding:.7em 0; font-size: 1.125em; font-weight: 500; color:var(--main-color); cursor:pointer; }
#bukken .d-down dt:before, #bukken .d-down dt:after { content: ""; position: absolute; z-index:1; top: 0; right:1.35em; bottom: 0; width:0.8em; height:1px; margin: auto; background: #fff;}
#bukken .d-down dt:after { transform:rotate(90deg); transition:all .5s; }
#bukken .d-down dt span { display: block; position: relative;}
#bukken .d-down dt > span::before { position: absolute; content: ""; width:2em; height:2em; transform: translateY(-50%); top: 50%; right:0.75em; 
  border-radius: 50%; background: var(--main-color); }
#bukken .d-down dt.active:after { -webkit-transform:rotate(-180deg); transform:rotate(-180deg); }
#bukken .d-down dd{ padding:1em; }
.route-access { margin: 2.5em auto; text-align: center; width: 85%;}

.t-data{ width:100%; background:#FFF; border:1px solid #989898; }
.t-data td, .t-data th{ padding:.7em 0.3em; line-height: 1.5; border:1px solid #989898; }
.t-data th{ background:#717171; color: #fff; }


.btn-area { margin: 3.125em auto 0; display: flex; flex-wrap: wrap; justify-content: space-between; max-width: 630px; }
.btn-area li:nth-child(1) { width: 40%;}
.btn-area li:nth-child(2) {width: 55%;}
.btn-area li:nth-child(2) a { background: #f9f6ca;}
.btn-area li:nth-child(2) a:hover { background: var(--main-color);}
.btn_con a { display: block; width: 100%; padding: 0.5em 1em 0.5em 1em; border-radius: 0; font-size: .9375em; color: var(--main-color); font-weight: 500; text-align: center; border: solid 1px var(--main-color); transition: all .5s;}
.btn_con a:hover { color: #fff; background: var(--main-color);}
[class^="btn_"] a::before { border-top: 10px solid var(--main-color); border-right: 10px solid var(--main-color); transition: all .5s;}
.btn_con a:hover::before { border-top: 10px solid #fff; border-right: 10px solid #fff;}
a.calc span::before { content: ""; position: absolute; top: 13px;left: 0; width: 20px; height: 20px; background: url(../img/rakusei/icon_calculator.svg) center / contain no-repeat;}

.btn-wrap {
  .btn-pdf {
    display: inline-block; padding: 1.5em 5em 1.5em 2em; font-size: 1.12em; color: #fff; font-weight: 500; background-color: var(--main-color); position: relative;
    &::before {
      content: ''; position: absolute; top: 50%; right: 2em; transform: translateY(-50%); width: 1.38em; height: 1.5em; background: url(../img/rakusei/ico-pdf.svg) no-repeat center / contain;
    }
  }
}


.movie .ttl-def { margin-bottom: 1.875em;}
.youtube-wrap { padding-block: min(2.6vw,30px);}
.youtube { position: relative; max-width: 760px;  margin-inline: auto; padding-top: 45.25%;}
.youtube iframe { position: absolute; top: 0; right: 0; width: 100% !important; height: 100% !important;}

/* 入寮の流れ */
.flow {
  .flow-list {
    counter-reset: step-num; overflow: visible;
    >li {
      display: grid; grid-template-columns: auto 1fr; padding: min(3vw,20px) 1em min(3.5vw,23px) 0; counter-increment: step-num; position: relative; background-color: #fff;
      &:not(:last-child)::before {
        content: ''; display: block; position: absolute; bottom: -1em; left: 4%; width: 1.87em; height: 1em; background-color: inherit; clip-path: polygon(100% 0, 0 0, 50% 100%); z-index: 1;
      }
      &:last-child { padding-bottom: 1.2em;}
      &:nth-child(even) {
        background-color: #f3f6ff;
        .txt {
          &::before { opacity: .8;}
        }
      }
      .step {
        align-self: baseline; width: clamp(50px,7.5vw,100px); color: var(--sub-color); font-family: var(--en); text-align: center; position: relative;
        &::before {
          content: counter(step-num); position: absolute; bottom: -.9em; left: 50%; transform: translateX(-50%); font-size: clamp(18px,3vw,30px); line-height: 1;
        }
      }
      .txt {
        padding-block: .7em; padding-left: min(4.5vw,45px); line-height: 1.5; position: relative;
        &::before {
          content: ''; position: absolute; top: 50%; left: 0; transform: translateY(-50%); width: 2px; height: 100%; background-color: var(--blu);
        }
      }
    }
  }
}

/* ================================================================
  レスポンシブ
=================================================================== */

/* 600以上(PC・タブレット) */
@media screen and (min-width: 600px) {

  .btn-area li:nth-child(3) { margin-top: 1em; width: 100%;}
  
  /* 入寮の流れ */
  .flow {
    .flow-list {
      >li {
        .step { margin-top: -.4em;}
      }
    }
  }
}

/* 960px以上(PC) */
@media screen and (min-width: 960px) {

}

@media screen and (min-width: 600px) and (max-width: 960px){
  
}


/* ================================================================
  タブレット
=================================================================== */
@media screen and (max-width: 1300px) {
  #message { 
    &::after { top: unset; bottom: -8em;}
  }

}

/* 1024以下 (タブレット横以下) */
@media screen and (max-width: 1024px) {
  
}

/* 959以下 (タブレット以下) */
@media screen and (max-width: 959px) {
  .message-box .ttl-en { left: -0.5em;}
  .link-list { padding: 1.3em;}
  .button { min-width: auto;}

  /* support */
  .support-list {
    >li {
      grid-template-columns: 1fr;
      .images-area {
        width: fit-content; margin-inline: auto;
        grid-template-areas: 
        'main main sub1'
        'main main sub2';
      }
    }
  }
}

/* ================================================================
  スマホ
=================================================================== */
@media screen and (max-width: 599px){

/* mv */
#mv {
  margin-top: 1em; height: 350px;
  hgroup {
    width: 90%; margin-inline: auto;
  }
}

/* message */
.message-box { padding: 6em 0 1.5em 1.3em;}
.message-box::before { width: calc(100vw - 92%/ 2);}
.message-box .ttl-en { top: 1em; left: 0em;}
#message { 
  &::before { top: -4em;}
}

.note {
  .txt { font-size: 14px;}
}
.bukken-list {
  .note .txt { padding-inline: .7em;}
}

/* news */
.news-box p { text-align: left;}
#news .news-bg { background: url(../img/rakusei/news-bg-sp.jpg) no-repeat center / cover;}

/* link */
.link-list { gap: 1em; padding: 1.4em;}
.link-list li { width: 100%;}

#map .pic { padding:0.5em; }

/* point */
.strong-list { grid-template-columns: repeat(1,1fr); gap: 4em; margin-top: 3.3em;}
.strong-list .txt { padding-top: 1.6em;}

/* support */
.support-list {
  >li {
    .label {
      left: 1em; padding-inline: .7em; font-size: .9em;
    }
    .txt-area { 
      margin-top: unset; row-gap: .7em;
      .other {
        .con-wrap::before { top: unset; bottom: 0; width: 40%;}
      }
    }
    .images-area {
      grid-template-columns: repeat(2,1fr);
      grid-template-areas: 
    'main main'
    'main main'
    'sub1 sub2';
    }
  }
}

/* mpa */
#map {
  .con-wrap {
    grid-template-columns: 1fr; gap: 1em;
    .way { justify-content: center;}
    .txt { text-align: center;}
  }
}

/* bukken */
.bukken-list { padding-inline: 1em;}
.bukken-list .type { font-size: .9em;}
.bukken-lead { text-align: left;}
.d-list dt,.d-list dd { width: 100%;}
#bukken .slick-prev::before, #bukken .slick-next::before { width: 2em; height: 2em;}
#bukken .slick-next { right: -2.2em;}
#bukken .slick-prev { left: -2.2em;}
.d-list dt, .d-list dd { padding: 1em; border: none;}
.fee-box { padding-inline: 1em;}
.btn-area li { width: 100% !important;}
.btn-area li + li { margin-top: 1.2em;}
#bukken .btn_con a { padding: 0.7em 2em 0.6em 2em;}
.btn-area { margin-top: 2em;}
.youtube { padding-top: 55.25%;}
.route-access { margin-block: 2em; width: 100%;}

.point-list li:first-child figure { width: 1.98em;}
.point-list li { width: 50%;}
.point-list li figure { width: 3em;}
.point-box .txt { left: 0.4em; top: -0.1em;}

.btn-wrap {
  .btn-pdf {
    width: 100%; padding: .5em 2.5em .5em .7em; font-size: 1em; 
    &::before { right: .7em; width: 1.28em; height: 1.3em;}
  }
}

/* 入寮の流れ */
.flow {
  .flow-list {
    >li {
      &::before { left: 5%;}
      &:not(:last-child)::before {
        bottom: -.7em; width: 1.3em; height: .7em;
      }
    }
  }
}

}