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

  --color-base:#205da8; /*ベースカラー*/
  --color-sub1:#c92e7b; /*アクセント*/
  --color-sub2:#5eabcc; /*アクセント2*/
  --color-sub3:#dd6630; /**/
  --color-sub4:#026e9d; /**/
  --color-sub5:#00825f; /**/

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

  --color-gry0:#f9f9f9;
  --color-gry1:#f1f1f1;
  --color-gry2:#b6b5b4;
  --color-gry3:#848484;

  /* 親からはみ出す */
  --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-dots { background: url(../img/fukui_university/dots.png) left top / auto repeat, var(--color-bg1); z-index: 0; }
.bg-wht { background: #fff; }

/* deco ---------------------- */
.marker { background: linear-gradient(transparent 50%, var(--color-marker) 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:'Noto Sans JP', sans-serif; line-height:1.625; color:var(--color-text); }
.inner { position:relative; max-width: 1000px; width: 100%; margin: 0 auto; }
#contents > section:not(:first-child) { padding-top: 0; }
.sec-box { padding-top: clamp(4rem, 6vw, 6.25rem) !important; padding-bottom: clamp(4.5rem, 7vw, 7rem); }

.en { font-family: "Jost", sans-serif; }
.txt { margin-block:0; }

.c-base { color: var(--color-base); }

.note { font-size: .8em; }

/* ttl ---------------------- */
.ttl-def {
  margin-bottom: clamp(1.5rem, 2vw, 2rem); text-align: center;
  .en {
    margin-block: 0 .2em; color: var(--color-base); font-size: clamp(1.125rem, 1.5vw, 1.4375rem);
    span { position: relative; padding-left: 1.3em; }
    span::before { position: absolute; content: ""; width: 1em; height: .8em; left: 0; top: 50%; transform: translateY(-50%); background: url(../img/fukui_university/icon-dot.png) center / contain no-repeat; }
  }
  .ttl { font-family: "IBM Plex Sans JP", sans-serif; font-weight: 500; font-size: clamp(1.7rem, 2.5vw, 2.375rem); letter-spacing: .04em; }
}

/* mv ---------------------- */
#mv { position: relative; margin-top: clamp(5.3125rem, 8vw, 7.9375rem); }
#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; }
}

/* bnr ----------------------- */
.side-bnr {
  position: fixed; right: 15px; bottom: 20px; text-align: end; z-index: 100;
  img { width: 80%; }
}

/* message ---------------------- */
  #message {
    padding-bottom: 0; background: #fff;
    .bg-img {padding-bottom:clamp(45px,6.7vw,100px); background:url(../img/fukui_university/bg-message.jpg) no-repeat right bottom / cover;}
    .ttl-def {
      margin-top:unset;
      .ttl, .en { text-align:left;}
    }
    .txt-box p:not([class]) { line-height:1.8; }
    .img-wrap { align-self:center;}
  }


/* campus ---------------------- */
#campus {
  background: url(../img/fukui_university/bg-access.jpg) center / cover no-repeat;
  .name { color: #fff; font-size: clamp(1.5rem, 2vw, 2rem); text-align: center; }
  .icon-box {
    margin-bottom: 4em;
    figure { text-align: center; }
    figure:first-of-type { padding-right: 6em; border-right: 1px solid #fff; }
    figure:last-of-type { padding-left: 6em; }
  }
}

/* feature ---------------------- */
#feature {
  position: relative;
  .feature-list {
    display: grid; grid-template-columns: repeat(2, 1fr); gap: 6rem 5rem;
    li {
      position: relative; background: #fff; border: 1px solid var(--color-line);
      figure img { width: 100%; aspect-ratio: 44 / 29; object-fit: cover; }
      .txt-box {
        padding: 0 3rem 3rem;
        .ttl { position: relative; z-index: 1; margin-bottom: 1rem; padding-top: 3.2rem; font-size: clamp(1.25rem, 1.5vw, 1.45rem); font-weight: 600; text-align: center; color: var(--color); }
        .ttl::before { position: absolute; content: ""; width: 9rem; height: 9rem; top: -4rem; left: 50%; transform: translateX(-50%); border-radius: 50%; background: #fff url(../img/fukui_university/icon.png) center / 3rem no-repeat; z-index: -1; }
      }
    }
    li::before { position: absolute; content: ""; width: 100%; height: 100%; z-index: -1; top: 1rem; left: 1rem; }
    li::after { position: absolute; content: ""; width: 0; height: 0; right: 1rem; bottom: 1rem; border-style: solid; border-width: 0 0 1.8rem 1.8rem; border-color: transparent transparent var(--color) transparent; }

    /* 色・アイコン指定 */
    li:nth-child(1) { --color: var(--color-sub3); }
    li:nth-child(1)::before { background: #e58a61; }
    li:nth-child(1) .ttl::before { background-image: url(../img/fukui_university/icon-cutlery.png); }

    li:nth-child(2) { --color: var(--color-sub4); }
    li:nth-child(2)::before { background: #4d94b8; }
    li:nth-child(2) .ttl::before { background-image: url(../img/fukui_university/icon-safe.png); }

    li:nth-child(3) { --color: var(--color-sub5); }
    li:nth-child(3)::before { background: #4da18c; }
    li:nth-child(3) .ttl::before { background-image: url(../img/fukui_university/icon-bed.png); }

    li:nth-child(4) { --color: var(--color-sub1); }
    li:nth-child(4)::before { background: #d86b9f; }
    li:nth-child(4) .ttl::before { background-image: url(../img/fukui_university/icon-facility.png); }

    p { line-height: 2; }
  }
}

/* access ---------------------- */
#access {
  .bg-card { position: relative; }
  .bg-card::before { position: absolute; content: ""; width: 100%; height: 100%; z-index: 0; top: 1rem; left: 1rem; background: #638EC2;}
  .access-box {
    position: relative; border: 1px solid var(--color-line); z-index: 1;
    > figure { width: 30%; }
    .info {
      width: 70%; padding: 2em;
      .ttl { font-size: clamp(1.45rem, 1.8vw, 1.7rem); font-weight: 500; }
      .gender { display: inline-block; padding: 0 1em; font-size: .9rem; line-height: 2.1; color: #ffff; font-weight: bold; background: var(--color-sub1); border-radius: 5px;}
      .txt-box {
        .campus { margin-bottom: 0; padding: .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%;
            figure { width: 30%; text-align: center; }
            em { font-size: 1.3rem; }
            &.walk {
              position: relative; padding-right: 3.1em;
              &::after { position: absolute; content: "または"; right: 0; font-size: 1em; }
              figure {width: 15%;}
            }
            &.bic figure {width: 19.95%;}
          }
        }
        &:not(:last-child) { margin-bottom: 2em; }
        &.matsuoka .root-list { justify-content: center; }
      }
    }
  }
  .note { margin-top: 1.3em; margin-bottom: clamp(4rem, 6vw, 6rem); }
}

/* info ---------------------- */
#info {
  /* 物件情報 */
  /* 見学開催などのバナー */
  .bnr-kengaku { margin-bottom: min(3vw,30px); }
  .bnr-chokuzen,.bnr-mv-under { margin-block: min(20vw,50px) min(5vw,50px); }
  .bnr-mv-under { width: min(92%,500px);}

  /* 物件スライド(共通) */
  .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_university/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);
    .bukken-ttl { position: relative; width: fit-content; margin-inline: auto; padding: 0 .5em .3em; font-size: clamp(24px,3.4vw,38px); font-weight: 500; }
    .con-ttl { margin-top: clamp(30px,6.7vw,60px); padding-block: .5em .4em; 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-base); font-weight: 700; background-color: #fff; }
      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; background: var(--color-sub2);
        .deco {
          padding-left: 1.2em; position: relative; color: #fff;
        }
        .deco::before { content: ""; display: block; position: absolute; width: .5em; aspect-ratio: 1; top: 50%; left: .2em; transform: translateY(-50%); background: var(--color-base); border-radius: 50%; }

      }
      > 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-base); 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-sub1); }
        .dtl {
          font-weight: 700;
          .monthly { padding: .3em 1em .2em}
          .price { font-size: clamp(18px,2.7vw,34px); font-weight: 600;}
        }
      }

      .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-sub4); }
        tr:first-child th:first-child { width: 13%; }
        th { width: 20%; color: var(--color-text); font-weight: 700; background: var(--color-bg1); }
        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 1em; color: #fff; background: var(--color-base); }
        }
        li.simu {
          a { padding-left: 2.8em; }
          a::after { content: ""; position: absolute; top: 0; bottom: 0; left: 1.5em; 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; }
    }
    .note { margin-left: 3.2em; margin-top: .1em; }
  }
  .bukken-box:not(:first-of-type) { margin-top: clamp(30px,7.7vw,120px); }

}

/* faq ---------------------- */
#faq {
  background: var(--color-bg2);
  .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-bg3); }
  }
}
.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: .5em; font-weight: 700; border-bottom: 1px solid var(--color-base); position: relative;
        .ttl {
          font-size: clamp(16px,2.4vw,20px);
        }
        .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.95rem, 1.2vw, 1.1rem); color: var(--color-base); }
        .monthly { margin-bottom: .2em; padding: .15em .5em .07em; font-size: .93em; 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: -39px; text-align:right; }
  #flow .flow-list .flow-dl dt .monthly { margin-left: 1em; }
}

/* 960px以上 */
@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) {
  #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 (max-width:1200px){
  .inner {width: 90%;}
}
@media screen and (min-width:600px) and (max-width:960px){
  #info .bukken-box .info-btn {
    .btn-list {
      li {
        width: 48%;
        a { padding: .8em 1em; }
      }
      li.simu {
        a { padding-left: 3em; }
        a::after { left: 1.8em; }
      }
    }
    .apply-btn { width: 48%; }
  }
}
/* 959以下 (タブレット以下) */
@media screen and (max-width:959px) {
  #contents > section:not(:first-child) { padding-top: 45px; }
  #message {
    .bg-img { background:linear-gradient(rgba(255,255,255,0.5), rgba(255,255,255,0.5)), url(../img/fukui_university/bg-message.jpg) no-repeat right bottom / 145%; } }

  #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-list {
      > li { column-gap: 1.5em; }
    }
  }

}

/* ================================================================
  スマホ
=================================================================== */
@media screen and (max-width:599px){
  /* common------------------------*/
 #pan {display: none; }

  /* bnr ----------------------- */
  .side-bnr {
    right: 5px; bottom: 5px;
    img { width: 55%; }
  }

  /* message ------------------------*/
  #message {
    .bg-img { padding-bottom: 130px; }
    .inner { grid-template-columns:1fr;}
    .img-wrap { justify-self:right; width:50%;}
  }

  /* campus ---------------------- */
  #campus {
    .icon-box {
      margin-bottom: 4em;
      figure { width: 40%; }
      figure:first-of-type { padding-right: 1em; border-right: 1px solid #fff; }
      figure:last-of-type {
        padding-left: 1em;
        img { width: 78%; }
      }
    }
    figure.icon-matsuoka img { width: 40%; }
  }

  /* feature ---------------------- */
  #feature {
    .feature-list {
      grid-template-columns: repeat(1, 1fr); gap: 3rem 5rem;
      li {
        .txt-box {
          padding: 0 1.5rem 1.5rem;
          .ttl { margin-bottom: 0; padding-top: 2.7rem; }
          .ttl::before { width: 6rem; height: 6rem; top: -2rem; background-size: 2.5rem; }
        }
      }
      li::before { top: .5rem; left: .5rem; }
      li::after { right: .5rem; bottom: .5rem; border-width: 0 0 1.2rem 1.2rem; }
    }
  }

  /* access ---------------------- */
  #access {
    .bg-card::before { top: .5rem; left: .5rem; }
    .access-box {
      > figure { width: 100%; margin-top: 1em; 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%;
              &.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 {
      .dl-tbl.sp-1 {
        grid-template-columns:1fr;
        dt { padding-block: 1.1em 0; border-bottom: unset;}
        dd { padding-top: 1em;}
        .icon-list {
          gap: 2.5%; row-gap: .8em;
          > li { width: 18%; }
        }
      }
      .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%; }
      }
      .note { margin-left: 0; }
    }
  }

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

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

}