@charset "utf-8";
/* base ------------------------*/
:root {
  /* 使用色 */
  --color-text:#1a1a1a;
  --color-text2:#003975;

  --color-base:#399bf0; /*ベースカラー*/
  --color-sub1:#e7380d; /*アクセント*/
  --color-sub2:#f99900; /*アクセント2*/
  --color-sub3:#df5695; /**/
  --color-sub4:#00a0ae; /**/
  --color-sub5:#796baf; /**/
  --color-sub6:#4087be; /**/

  --color-bg1:#f0f7fc; /*青背景色*/
  --color-bg2:#f5faff; /*料金表背景色*/
  --color-bg3:#c6e4fe; /*A背景色*/
  --color-marker:#cdeaf6; /*マーカー青*/
  --color-line:#313131; /*黒枠線*/

  --color-gry0:#f5f5f5;
  --color-gry1:#f1f1f1;
  --color-gry2:#b6b5b4;
  --color-gry3:#848484;
  --color-gry4:#6b6b6b;

  --color-wht:#ffffff;

  /* 親からはみ出す */
  --fw :calc(50% - 50vw);

  /* シャドウ */
  --shadow1:0px 2px 6px rgba(0, 0, 0, 0.1); /*狭い*/
  --shadow2:0px 2px 10px rgba(0, 0, 0, 0.08);  /*広め*/
  --shadow3:0px 2px 5px rgba(0, 0, 0, 0.06); /*ボーダー有り用*/
}

/* bg ---------------------- */
.bg-base { background: var(--color-bg1); }
.bg-sub { background: var(--color-bg2); }
.bg-tile { background:url(../img/fukui_ut/bg-tile.jpg) repeat; }
.bg-access { background:url(../img/fukui_ut/bg-access.jpg) no-repeat center / cover; }
.bg-gry { background: var(--color-gry0); }

.bg-deco { position:relative;  z-index: 1; }
.bg-deco::before, .bg-deco::after{ position:absolute; content:"";  z-index:-1; width:20em; aspect-ratio: 1; 
  background:url(../img/fukui_ut/bg-line.svg) no-repeat center / 100%; }
.bg-deco::before{ top:0; right:0; transform: rotate(180deg); }
.bg-deco::after{ bottom:0; left:0; }

/* common------------------------*/
a { color:var(--color-text); text-decoration:none; transition:all .3s; }
a:active, a:hover { color:var(--color-sub2); }
a:focus { outline:none; }

#wrapper { position:relative; overflow:hidden; }
body { font-family: "Zen Kaku Gothic New", sans-serif; font-weight:500; line-height:1.7; color:var(--color-text); }
#header { background-color: var(--color-wht); }
.inner, .inner-narrow { position:relative; }
.sec-box { padding-block:clamp(3em,11vw,100px); }
.sec-btm { padding-bottom:min(9%,65px); }
.shadow { box-shadow:var(--shadow2); }
.en {  }
.txt { margin-block:0; }

.mt1 { margin-top: 1em; }
.mt2 { margin-top: 2em; }
.mt3 { margin-top: 3em; }
.mt4 { margin-top: 4em; }
.mb1 { margin-bottom: 1em; }
.mb2 { margin-bottom: 2em; }
.mb3 { margin-bottom: 3em; }
.mb4 { margin-bottom: 4em; }

/* ttl ---------------------- */
.ttl-def{ position:relative; z-index: 1; margin-bottom:.8em; padding-top:1.2em; text-align: center; font-size:clamp(1.8em,4.4vw,40px); font-weight:800; line-height: 1.4; }
.ttl-def::before{ position:absolute; z-index: -1; content: attr(data-en); top:0; left:0; width: 100%;
  font-family: "Roboto", sans-serif; font-size:clamp(2em,7.8vw,70px); line-height: 1; color:#e0eef9; letter-spacing: .05em; opacity: .75; }
.ttl-def em{ color:var(--color-base); font-weight:800; }
.ttl-def em .big { font-size: 1.4em; }

/* mv ---------------------- */
#mv { position: relative; margin-top:clamp(6em,13.8vw,125px); z-index: 2; }
#mv .pc { width:100%; max-width:inherit; }
#mv .sp { display:none; }
@media (orientation: portrait) and (max-width: 810px){
  #mv .pc { display:none; }
  #mv .sp { display:block; }
}

/* message ---------------------- */
#message .txt{ width:fit-content; margin-inline:auto; }

.bg-access .ttl{ margin-bottom:.5em; text-align: center; font-size:clamp(1.5em,4.2vw,38px); font-weight:700; color:var(--color-wht); }
#contents>section.bg-access{ padding-block:clamp(2em,4.4vw,40px); }
.traffic-list{ display:grid; grid-template-columns: 1fr 1fr; width:fit-content; margin-inline:auto; }
.traffic-list > li{ padding:1em 3em 0 3em; }
.traffic-list > li:first-of-type{ border-right:1px solid #FFF; }

/* bnr ---------------------- */

/* bnr ---------------------- */

/* points ---------------------- */


/* map ---------------------- */

/* feature ---------------------- */
#feature {
  position: relative; z-index: 0;
  .feature-list {
    max-width: 1000px; margin-inline: auto; display: grid; grid-template-columns: repeat(2, 1fr); gap: 6rem 5rem;
    li { position: relative; border: 2px solid var(--color-sub2); background: var(--color-wht);
      figure img { width: 100%; aspect-ratio: 4 / 2.6; object-fit: cover; }
    }
    li::before { position: absolute; content: ""; width: 100%; height: 100%; z-index: -1; top: 1rem; left: 1rem; background: var(--color-sub2); }
    .txt-box { 
      position: relative; padding: 2em 3em 2em; background-color: var(--color-wht); 
      h3 { 
        position: absolute; top: -1.5em; left: 0;
        span { 
          position: relative; display: inline-block; min-width: 9em; padding: .2em 1em .2em 2.5em; font-size: clamp(1.3em, 4.4vw, 23px); font-weight: bold; color: var(--color-wht); border-radius: 0 10em 10em 0; background-color: var(--color-sub2);
          &::before { 
            content: ""; position: absolute; top: .3em; left: .7em; width: 1.5em; height: 1.5em; background: url(../img/fukui_ut/ico-meal.svg)center / 100% no-repeat; 
          }
        }
      }
      p { line-height: 2; }
    }
    
    li:nth-child(2) { border-color: var(--color-sub3); }
    li:nth-child(2)::before { background: var(--color-sub3); }
    li:nth-child(2) h3 span { background-color: var(--color-sub3); }
    li:nth-child(2) h3 span::before { background-image: url(../img/fukui_ut/ico-safe.svg); }

    li:nth-child(3) { border-color: var(--color-sub4); }
    li:nth-child(3)::before { background: var(--color-sub4); }
    li:nth-child(3) h3 span { background-color: var(--color-sub4); }
    li:nth-child(3) h3 span::before { background-image: url(../img/fukui_ut/ico-room.svg); }

    li:nth-child(4) { border-color: var(--color-sub5); }
    li:nth-child(4)::before { background: var(--color-sub5); }
    li:nth-child(4) h3 span { background-color: var(--color-sub5); }
    li:nth-child(4) h3 span::before { background-image: url(../img/fukui_ut/ico-facility.svg); }
  }
}

/* access ---------------------- */
#access {
  .bg-card { position: relative; }
  .bg-card::before { position: absolute; content: ""; width: 100%; height: 100%; z-index: 0; top: 1rem; left: 1rem; background: var(--color-base);}
  .access-box {
    position: relative; margin-bottom: clamp(4rem, 6vw, 6rem); border: 2px solid var(--color-base); background-color: var(--color-wht); z-index: 1;
    > figure { width: 30%; }
    .info {
      width: 70%; padding: 2em;
      .ttl { font-size: clamp(1.45rem, 1.8vw, 1.7rem); font-weight: bold; }
      .gender { display: inline-block; padding: 0 1em; font-size: .9rem; line-height: 2.1; color: #ffff; font-weight: bold; background: var(--color-sub2); border-radius: 5px;}
      .txt-box { padding-bottom: 2em; background: var(--color-bg2);
        .campus { margin-bottom: 0; padding: .4em .2em; font-size: 1.1rem; color: #fff; text-align: center; background: var(--color-base); }
        .root-list {
          justify-content: center; padding: 1em 2em;
          li {
            display: flex; align-items: center; justify-content: center; gap: 10%; width: 45%;
            &:nth-child(1) { width: 55%; }
            &:nth-child(2) { width: 35%; }
            figure.sm { height: 3em; text-align: center;
              img { max-height: 100%; }
            }
            .marker { background: linear-gradient(transparent 50%, var(--color-bg3) 0%); }
            em { font-size: 1.3rem; }
            &.walk {
              position: relative; padding-right: 3.1em;
              &::after { position: absolute; content: "または"; right: 0; font-size: 1em; }
            }
          }
        }
      }
      .txt-box:not(:last-child) { margin-bottom: 2em; }
      .txt-box.matsuoka .root-list { justify-content: center; }
    }
  }
  .map-box { text-align: center; }
}
.point-list { margin-left: 2em;
  li { 
    position: relative; padding-left: 1.4em; 
    &::before { 
      content: ""; position: absolute; top: .3em; left: 0; width: 1em; height: 1em; border-radius: 50%; background: var(--color-base);
    }
  }
}


/* info ---------------------- */
#info {

  /* 物件スライド(共通) */
  .bukken-slider-wrap{ margin-inline:auto; position:relative;
    .bukken-slider, .bukken-thumb { width:100%; }
    .bukken-slider {
      margin-bottom: 1.18em;
      .slick-slide {
        img { margin:0 auto; max-height:min(50vw,480px); }
      }
      .slick-arrow { content: ""; display: block; position: absolute; z-index:1; top:50%; transform:translateY(-50%); text-indent:-9999px; background:none;}
      .slick-prev { left:-14%;}
      .slick-next { right:-14%;}
      .slick-prev::before,
      .slick-next::before{
        content: ""; display: block; position: absolute; top:0; right:1.5em; width:3em; aspect-ratio: 1;
        background:no-repeat center / 100%; background-image: url(../img/fukui_ut/slide-arrow.png);
      }
      .slick-prev::before{ left:1.5em; right:auto; transform:rotate(180deg); }
    }
    .bukken-thumb {
      li { aspect-ratio:3/2; overflow: hidden; position:relative; }
      .slick-list { margin-inline:-10px;}
      .slick-slide { margin-inline: 10px;}
    }
  }

  .bukken-box {
    padding: clamp(35px,3.8vw,60px) clamp(20px,5vw,120px); background-color: var(--color-wht);
    .bukken-ttl { 
      position: relative; width: fit-content; margin-inline: auto; padding: 0 .5em .3em; font-size: clamp(24px,3.4vw,38px); font-weight: bold; 
    }
    .con-ttl { 
      margin-top: clamp(30px,6.7vw,60px); padding-block: .3em; color: #fff; font-size: clamp(18px,2.4vw,24px); font-weight: 500; text-align: center; background: var(--color-base);
    }
    .mark-cat { padding: .3em .7em .2em; font-size: 1.12em; background-color: #f2ed6a; }
    .comment { margin-bottom: clamp(20px,3.8vw,40px); margin-top: clamp(10px,3.5vw,15px); }

    .bukken-slider-wrap { max-width:750px; }
    .bukken-map { margin-top: clamp(20px,4.7vw,44px); }

    .dl-tbl {
      display:grid; grid-template-columns:15% 1fr; padding:0 0 1em;
      > * { padding: 1.5em 1em 1.35em; border-bottom:1px solid #d2d2d2; }
      dt.row2 { grid-row: auto / span 2; display: grid; align-items: center; }
      dt.row3 { grid-row: auto / span 3; display: grid; align-items: center; }
      dt.row4 { grid-row: auto / span 4; display: grid; align-items: center; }
      dt.row5 { grid-row: auto / span 5; display: grid; align-items: center; }
      dt { color: var(--color-text2); font-weight: 700; background-color: var(--color-bg2); }
      dd { line-height:1.6; }
      .icon-list {
        gap: 2%; row-gap: 1em;
        > li { width: 9%; }
      }
    }

    .price {
      > dt {
        display: block grid; grid-template: '. icon' / 1fr 1em; column-gap: 1em; align-items: center; margin-top: 1.25em; padding: .5em .7em .4em; padding-right: 1.3em; font-size: clamp(16px,2.4vw,20px); font-weight: 500; cursor: pointer; color: var(--color-text2); background: var(--color-bg3);
      }
      > dt::before, > dt::after { content: ''; grid-area: icon; border-bottom: 2px solid #fff; }
      > dt::before { border: unset; width: 1.4em; aspect-ratio: 1; background: url() no-repeat center / contain; transition: all .3s; }
      > dt::after { rotate: 90deg; transition: all .3s; display: none; }
      > dt.active::after { rotate: 180deg; background: url(); }
      > dd { padding: clamp(20px,2.5vw,30px); background: var(--color-bg2); }
      .room-type { margin-block: 0 .5em; padding-left: .75em; line-height: 1.2; border-left: 5px solid var(--color-sub2); font-size: 1.12em; font-weight: 700;}
      .dormitory-fee-list {
        display: grid; grid-template-columns: repeat(2, 1fr); gap: 1em 2.5em; margin-bottom: 1.25em;
        .item { text-align: center; background-color: #fff;}
        > li {overflow: hidden;}
        .meal { margin-block: unset; padding-block: .25em .1em; font-weight: 500; color: #fff; background: var(--color-sub2); }
        .dtl {
          font-weight: 700;
          .monthly { padding: .3em 1em .2em}
          .price { font-family:'Noto Sans', sans-serif; font-size: clamp(18px,2.7vw,34px); font-weight: 600; color: var(--color-sub1); }
        }
      }

      .other-fee {
        display: grid; grid-template-columns: max-content 1fr; column-gap: 5em; text-align: start;
        > *:not(:last-of-type) { margin-bottom: .5em; }
        dd {
          position: relative; font-feature-settings:"palt";
        }
        dd::before { content: ""; display: block; position: absolute; top: .7em; left: -4em; width: 3em; height: 2px; border-bottom: 2px dotted #979797;}
      }

      .fee-tbl {
        width: 100%; border-collapse: collapse; table-layout: fixed; font-size: .87em; line-height: 1.5; background: #fff;
        th,td { padding: 7px 8px; border: 1px solid var(--color-gry1); text-align: center; vertical-align: middle; }
        thead th { color: #fff; font-weight: 700; background: var(--color-sub6); }
        tr:first-child th:first-child { width: 13%; }
        th { width: 20%; color: var(--color-text); font-weight: 700; background: var(--color-gry0); }
        td { color: var(--color-text); font-weight: 500;}
      }

    }
    .info-btn {
      margin-top: clamp(30px,3.8vw,50px);
      .btn-list {
        gap: 2%;
        li {
          position: relative; width: 39%; text-align: center;
          a { position: relative; display: block; margin-top: 1em; padding: .8em 2em; color: #fff; background: var(--color-sub2); }
        }
        li.simu {
          a { padding-left: 4em; }
          a::after { content: ""; position: absolute; top: 0; bottom: 0; left: 2em; margin: auto; width: 1.4em; height: 1.4em; background: url(../../img/icon_calculator.svg) center / contain no-repeat; }
        }
        li.strip_shadow::before { width: 98.5%; height: 70%; top: 25px; z-index: 0; }
      }
      .apply-btn {
        position: relative; width: 39%; margin-inline: auto; z-index: 1;
        a { display: block; margin-top: 1em; padding: .8em 2em; color: #fff; background: var(--color-sub1); }
      }
      .apply-btn.strip_shadow::before { width: 100%; height: 90%; top: 11px; left: 52%; transform: translateX(-50%); z-index: -1; }
    }
  }
  .bukken-box:not(:first-of-type) { margin-top: clamp(30px,7.7vw,120px); }

}


/* faq ---------------------- */
#faq {
  .faqList {
    .row { border-left: unset; box-shadow: 0 4px 12px rgba(32, 93, 168, 0.06); }
    .row:last-child { margin-bottom: 0; }
    dt::before { font-weight: 500; font-family: "Jost", sans-serif; background: var(--color-base); }
    dt::after { border-right: 3px solid var(--color-base); border-bottom: 3px solid var(--color-base); }
    dd {
      em { color: var(--color-text); }
      .telBox a[href^="tel:"] { color: var(--color-sub1); }
    }
    dd::before { font-weight: 500; font-family: "Jost", sans-serif; background: var(--color-gry4); }
    
  }
}
.btn_kengaku {
  width: 100%; max-width: 300px; margin-inline: auto; text-align: center;
  a { position: relative; display: block; margin-top: 2em; padding: .5em 2em; color: #fff; background: var(--color-sub1); border-radius: revert; z-index: 1; }
}
.btn_kengaku::before { left: 6px; top: 6px; z-index: 0; }

/* flow ---------------------- */
#flow {
  .flow-list {
    display: grid; row-gap: 1.25em; counter-reset: num;
    > li {
      display: grid; grid-template: 'icon txt' / minmax(0,100px) 1fr; gap: 1em 2.6em; padding: clamp(15px,2.2vw,30px); counter-increment: num; background: var(--color-bg1); border: 1px solid var(--color-base);
    }
    .img-wrap { align-self: center; grid-area: icon; img { max-width: 100px;}}
    .flow-dl {
      dt {
        display: flex; align-items: end; padding-bottom: .8em; font-weight: 700; border-bottom: 1px solid var(--color-base); position: relative; line-height: 1.2;
        .ttl {
          font-size: clamp(16px,2.4vw,20px); font-weight: bold;
        }
        .ttl::before { 
          content: 'Step.'counter(num, decimal-leading-zero); display: block; margin-bottom: .5em; font-family: "Jost", sans-serif; font-weight: 500; font-size: clamp(0.88rem, 1.2vw, 1rem); color: var(--color-base); 
        }
        .monthly { 
          margin-left: .8em; padding: .3em .5em; font-size: .88em; color: #fff; white-space: nowrap; background-color: var(--color-sub1);
        }
      }
      dd { .txt { margin-bottom: unset; margin-top: 1em;}}
      .ttl-downlord {
        margin-block: .7em; padding-left: .7em; position: relative;
      }
      .ttl-downlord::before { position: absolute; content: ""; display: block; top: .2em; left: 0;width: .75em; aspect-ratio: 1; background-color: var(--color-base); border-radius: 50%;}
      .app-list { gap: .75em;}
    }
  }
}





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

/* 600以上(PC・タブレット) */
@media screen and (min-width:600px) {
  #pan { bottom: -40px; text-align:right; }
}

/* 960以上 */
@media screen and (min-width:960px) {
  #info {
    .bukken-box {
      .price-box { display: grid; grid-template-columns: repeat(2, 1fr); column-gap: 1.25em; margin-bottom: clamp(1.5rem, 2vw, 2rem); }
    }
  }
}

/* 1024px以上(PC) */
@media screen and (min-width:1024px) {
  #message .txt{ text-align: center; }
  #info {
    .bukken-box {
      .price {
        .price-box {
          display: grid; grid-template-columns: repeat(2,1fr); column-gap: 1.25em;
          .price { display: grid; grid-template-rows: subgrid; grid-row: span 2;}
        }
      }
    }
  }
}


/* ================================================================
  タブレット
=================================================================== */
@media screen and (min-width:600px) and (max-width:960px){
}
/* 959以下 (タブレット以下) */
@media screen and (max-width:959px) {
  .bg-deco::before, .bg-deco::after{ width:10em; }

  /* access ---------------------- */
  #access .marker { line-height: 1.2; text-align: center; }

  /* info ---------------------- */
  #info {
    .bukken-slider-wrap {
      .bukken-slider {
        .slick-prev{ left:-4%;}
        .slick-next{ right:-4%;}
        .slick-next::before,
        .slick-prev::before{ width: 2.5em;}
      }
    }
    .bukken-box {
      .price {
        .dormitory-fee-list { column-gap: 1.5em; }
      }
    }
  }

  /* flow ---------------------- */
  #flow {
    .flow-list {
      > li { column-gap: 1.5em; }
    }
  }
}

/* ================================================================
  スマホ
=================================================================== */
@media screen and (max-width:599px){
  /* common------------------------*/
   #pan {display: none; }
   
  .bg-deco::before, .bg-deco::after{ width:12em; opacity: .2; }

  /* ttl ---------------------- */

  /* message ---------------------- */
  

  /* feature ---------------------- */
  #feature {
    .feature-list { grid-template-columns: repeat(1, 1fr); gap: 3rem 5rem; 
      .txt-box { padding: 1em; }
      li::before { top: .5rem; left: .5rem; }
    }
  }

  /* access ---------------------- */
  #access {
    .bg-card::before { top: .5rem; left: .5rem; }
    .access-box {
      > figure { width: 100%; text-align: center; }
      .info {
        width: 100%; padding: 1em;
        .ttl { margin-bottom: .2em; }
        .gender { line-height: 1.8; font-size: .85em; }
        .txt-box {
          .root-list {
            row-gap: 2em;
            li { width: 100%;
              &:nth-child(1) { width: 100%; }
              &:nth-child(2) { width: 100%; }
              &.walk {
                padding-right: 0;
                &::after { right: 50%; transform: translateX(50%); bottom: -2em; }
              }
            }
          }
        }
      }
    }
  }

  /* info ------------------------*/
  #info {
    .bukken-slider-wrap {
      .bukken-slider {
        margin-bottom: .5em;
        .slick-prev{ left:-9%;}
        .slick-next{ right:-9%;}
        .slick-next::before,
        .slick-prev::before{ width: 2em;}
      }
      .bukken-thumb {
        li {
          .slick-list { margin-inline:-5px;}
          .slick-slide { margin-inline: 5px;}
        }
      }
    }
    .bukken-box {
      .comment { text-align: left; }
      .dl-tbl.sp-1 {
        grid-template-columns:1fr;
        dt { padding-block: .8em; border-bottom: unset;}
        dd { padding-top: 1em;}
        .icon-list {
          > li { width: 15%; }
        }
      }
      .price {
        .dormitory-fee-list { grid-template-columns: 1fr; }
        .other-fee {
          column-gap: 2.3em;
          dd::before { top: .6em; left: -1.8em; width: 1em;}
        }
      }
      .info-btn {
        .btn-list {
          li { width: 85%; }
          li.simu {
            a { padding-inline: 2.5em 1em; }
            a::after { left: 1em; }
          }
          li.strip_shadow::before { width: 100%; top: 22px; }
        }
        .apply-btn { width: 85%; }
        .apply-btn.strip_shadow::before { width: 100%; top: 10px; left: 52%; }
      }
    }
  }

  /* faq ------------------------*/
  #faq {
    .faqList {
      .btn_kengaku { width: 80%; }
    }
  }

  /* flow ------------------------*/
  #flow {
    .flow-list {
      > li { grid-template: 'icon' 'txt' / 1fr; }
      .img-wrap { text-align: center;
        img { max-width: 80px; }
      }
      .flow-dl {
        dt {
          .monthly { position: absolute; top: 1.5em; right: 0;}
        }
      }
    }
  }

}