/*! Writen  by SCSS */
.link_pro {
  display: block; }

.inner_main {
  margin-top: 80px;
  display: flex; }
  @media screen and (max-width: 480px) {
    .inner_main {
      margin-top: 40px; } }
  .inner_main .main_img {
    width: calc(1280% /16);
    height: 520px;
    background: url("../images/dormitory/main.jpg") right center/cover no-repeat; }
    @media screen and (max-width: 480px) {
      .inner_main .main_img {
        width: 80%;
        height: 100%;
        aspect-ratio: 300 / 445;
        background: url("../images/dormitory/main_sp.jpg") center center/cover no-repeat; } }
  .inner_main .main_ttl {
    width: calc(128% /16);
    position: relative; }
    .inner_main .main_ttl h2 {
      font-size: clamp(18px, 2.05vw, 25px);
      writing-mode: vertical-rl;
      font-weight: 500;
      color: #666;
      line-height: 1;
      position: absolute;
      left: 60%;
      bottom: 50px; }
      @media screen and (max-width: 480px) {
        .inner_main .main_ttl h2 {
          left: 40%;
          bottom: 20px; } }

.read {
  font-size: clamp(12px, 1.312vw, 16px); }

.sec01 {
  padding: 80px 0 0; }
  @media screen and (max-width: 480px) {
    .sec01 {
      padding: 40px 0 40px; } }
  .sec01 .sec_ttl {
    font-size: clamp(17px, 2.132vw, 26px);
    color: #555555;
    margin-bottom: 1.4em;
    letter-spacing: 0.1em; }
  .sec01 .read {
    color: #111111;
    line-height: 2.4;
    letter-spacing: 0.08em; }
    @media screen and (max-width: 480px) {
      .sec01 .read {
        line-height: 1.8; } }

.sec02 .sc {
  overflow-x: scroll; }
  .sec02 .sc ul {
    display: flex;
    width: 300%; }
    .sec02 .sc ul li {
      width: calc(100% / 3);
      height: 100vh; }
      .sec02 .sc ul li:nth-child(1) {
        background: url("../images/dormitory/sec1_bg1.jpg") center center/cover; }
      .sec02 .sc ul li:nth-child(2) {
        background: url("../images/dormitory/sec1_bg2.jpg") center center/cover; }
      .sec02 .sc ul li:nth-child(3) {
        background: url("../images/dormitory/sec1_bg3.jpg") center center/cover; }

.c-business-flow {
  position: relative;
  overflow: hidden; }
  .c-business-flow .pin-spacer {
    width: 300vw; }
  .c-business-flow .c-business-flow__content--wrapper {
    gap: 0;
    display: flex;
    flex-wrap: nowrap;
    width: 300vw;
    height: 100vh;
    will-change: auto;
    padding-top: 100px; }
    @media screen and (max-width: 768px) {
      .c-business-flow .c-business-flow__content--wrapper {
        padding-top: 60px; } }
    @media screen and (max-width: 480px) {
      .c-business-flow .c-business-flow__content--wrapper {
        padding-top: 0;
        display: block;
        height: auto; } }
    .c-business-flow .c-business-flow__content--wrapper .c-business-flow__content {
      position: relative;
      width: 100vw;
      height: 100%; }
      @media screen and (max-width: 480px) {
        .c-business-flow .c-business-flow__content--wrapper .c-business-flow__content {
          display: flex;
          flex-direction: column;
          justify-content: flex-end;
          height: 80vh; } }
      .c-business-flow .c-business-flow__content--wrapper .c-business-flow__content:nth-child(1) {
        background: url("../images/dormitory/sec1_bg1.jpg") center center/cover; }
        .c-business-flow .c-business-flow__content--wrapper .c-business-flow__content:nth-child(1) .inner {
          max-width: 1400px; }
      .c-business-flow .c-business-flow__content--wrapper .c-business-flow__content:nth-child(2) {
        background: url("../images/dormitory/sec1_bg2.jpg") center center/cover; }
      .c-business-flow .c-business-flow__content--wrapper .c-business-flow__content:nth-child(3) {
        background: url("../images/dormitory/sec1_bg3.jpg") center center/cover; }
      .c-business-flow .c-business-flow__content--wrapper .c-business-flow__content .inner {
        display: flex;
        align-items: center;
        height: calc(100% - 120px); }
        @media screen and (max-height: 600px) {
          .c-business-flow .c-business-flow__content--wrapper .c-business-flow__content .inner {
            height: calc(100% - 70px); } }
        @media screen and (max-width: 480px) {
          .c-business-flow .c-business-flow__content--wrapper .c-business-flow__content .inner {
            height: 90%; } }
        .c-business-flow .c-business-flow__content--wrapper .c-business-flow__content .inner h3 {
          font-size: clamp(16px, 2.05vw, 25px);
          color: #fff;
          margin-bottom: 1.4em;
          letter-spacing: 0.1em; }
        .c-business-flow .c-business-flow__content--wrapper .c-business-flow__content .inner .read {
          color: #fff;
          line-height: 2.4;
          letter-spacing: 0.05em; }

.c-business-flow__progress {
  z-index: -1;
  position: fixed;
  bottom: 100px;
  left: 20%;
  width: 60%;
  height: 2px;
  background-color: #7e8690;
  opacity: 0;
  transition: all 0.2s cubic-bezier(0.165, 0.84, 0.44, 1);
  transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1); }
  .c-business-flow__progress.is-inview {
    z-index: 10;
    opacity: 1; }
  .c-business-flow__progress.is-outview {
    z-index: -1;
    opacity: 0; }
  @media screen and (max-height: 600px) {
    .c-business-flow__progress {
      bottom: 50px; } }
  @media screen and (max-width: 480px) {
    .c-business-flow__progress {
      left: auto;
      width: 2px;
      right: 40px;
      bottom: 25%;
      height: 50%; } }
  .c-business-flow__progress .progress__indicator {
    width: 100%;
    height: 2px;
    background-color: #f6f6f6;
    transition: all 0.8s cubic-bezier(0.165, 0.84, 0.44, 1);
    transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1); }
    @media screen and (max-width: 480px) {
      .c-business-flow__progress .progress__indicator {
        width: 2px;
        height: 0; } }
    .c-business-flow__progress .progress__indicator[data-current="0"] .item01 {
      color: #fff; }
      .c-business-flow__progress .progress__indicator[data-current="0"] .item01::before {
        background: #fff; }
    .c-business-flow__progress .progress__indicator[data-current="1"] .item01 {
      color: #fff; }
      .c-business-flow__progress .progress__indicator[data-current="1"] .item01::before {
        background: #fff; }
    .c-business-flow__progress .progress__indicator[data-current="2"] .item01 {
      color: #fff; }
      .c-business-flow__progress .progress__indicator[data-current="2"] .item01::before {
        background: #fff; }
    .c-business-flow__progress .progress__indicator[data-current="2"] .item02 {
      color: #fff; }
      .c-business-flow__progress .progress__indicator[data-current="2"] .item02::before {
        background: #fff; }
    .c-business-flow__progress .progress__indicator[data-current="3"] .item01 {
      color: #fff; }
      .c-business-flow__progress .progress__indicator[data-current="3"] .item01::before {
        background: #fff; }
    .c-business-flow__progress .progress__indicator[data-current="3"] .item02 {
      color: #fff; }
      .c-business-flow__progress .progress__indicator[data-current="3"] .item02::before {
        background: #fff; }
    .c-business-flow__progress .progress__indicator[data-current="3"] .item03 {
      color: #fff; }
      .c-business-flow__progress .progress__indicator[data-current="3"] .item03::before {
        background: #fff; }
    .c-business-flow__progress .progress__indicator .progress__item {
      position: absolute;
      top: 0;
      left: 0;
      color: #7e8690;
      font-size: .9375rem;
      transition: all 0.2s cubic-bezier(0.165, 0.84, 0.44, 1);
      transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1); }
      @media screen and (max-width: 480px) {
        .c-business-flow__progress .progress__indicator .progress__item {
          top: 0;
          left: auto; } }
      .c-business-flow__progress .progress__indicator .progress__item.item02 {
        left: 50%; }
        @media screen and (max-width: 480px) {
          .c-business-flow__progress .progress__indicator .progress__item.item02 {
            top: 50%;
            left: auto; } }
      .c-business-flow__progress .progress__indicator .progress__item.item03 {
        left: 100%; }
        @media screen and (max-width: 480px) {
          .c-business-flow__progress .progress__indicator .progress__item.item03 {
            top: 100%;
            left: auto; } }
      .c-business-flow__progress .progress__indicator .progress__item:before {
        position: absolute;
        top: -4px;
        width: 10px;
        height: 10px;
        border-radius: 100%;
        background-color: #7e8690;
        content: "";
        transition: all 0.2s cubic-bezier(0.165, 0.84, 0.44, 1);
        transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1); }
        @media screen and (max-width: 480px) {
          .c-business-flow__progress .progress__indicator .progress__item:before {
            top: 0;
            left: -4px; } }
      .c-business-flow__progress .progress__indicator .progress__item span {
        position: relative;
        top: 10px;
        left: -50%;
        white-space: nowrap; }
        @media screen and (max-width: 480px) {
          .c-business-flow__progress .progress__indicator .progress__item span {
            top: -50%;
            right: -5px;
            left: auto;
            writing-mode: vertical-rl; } }

.sec03 {
  background: url("../images/dormitory/sec03_bg.jpg") center center/cover;
  height: calc(450vw / 16);
  padding: calc(50% / 16) 0; }
  @media screen and (max-width: 480px) {
    .sec03 {
      background: url("../images/dormitory/sec03_bg_sp.jpg") top center/100% auto no-repeat;
      height: auto;
      padding: 60vw 0 30px;
      padding: 50vw 0 30px;
      background-position: center top 40%; } }
  .sec03 .inn {
    padding: 0 40px;
    text-align: right;
    height: 100%; }
    @media screen and (max-width: 480px) {
      .sec03 .inn {
        padding: 0 20px;
        text-align: left; } }
    .sec03 .inn > div {
      text-align: left;
      height: 100%;
      display: flex;
      flex-direction: column;
      align-items: flex-end;
      justify-content: center; }
      @media screen and (max-width: 480px) {
        .sec03 .inn > div {
          display: block; } }
      .sec03 .inn > div .sec_ttl_wrap {
        width: 36em; }
        @media screen and (max-width: 768px) {
          .sec03 .inn > div .sec_ttl_wrap {
            width: auto; } }
      .sec03 .inn > div .sec_ttl {
        font-size: clamp(12.5px, 1.476vw, 18px);
        color: #555;
        letter-spacing: 0;
        font-weight: 600;
        line-height: 1.4;
        margin-bottom: 1.4em; }
        @media screen and (max-width: 480px) {
          .sec03 .inn > div .sec_ttl {
            margin-right: -20px; } }
      .sec03 .inn > div .d_btn {
        display: flex;
        align-items: center;
        color: #111;
        cursor: pointer;
        font-size: clamp(12px, 1.23vw, 15px); }
        .sec03 .inn > div .d_btn .icon {
          display: block;
          width: 2em;
          height: 2em;
          margin-left: 0.8em;
          border: solid 1px #555555;
          border-radius: 50%;
          display: flex;
          justify-content: center;
          align-items: center;
          transition: all 0.3s ease-in-out 0s; }
          .sec03 .inn > div .d_btn .icon > span {
            display: inline-block;
            line-height: 0;
            font-size: 0;
            margin: 0;
            padding: 0;
            position: relative; }
            .sec03 .inn > div .d_btn .icon > span .off {
              position: relative;
              opacity: 1;
              transition: all 0.3s ease-in-out 0s; }
            .sec03 .inn > div .d_btn .icon > span .on {
              position: absolute;
              inset: 0;
              opacity: 0;
              transition: all 0.3s ease-in-out 0s; }
        .sec03 .inn > div .d_btn:hover .icon {
          background: #555555; }
          .sec03 .inn > div .d_btn:hover .icon > span .off {
            opacity: 0; }
          .sec03 .inn > div .d_btn:hover .icon > span .on {
            opacity: 1; }

.mdl {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  z-index: 99999999;
  background: rgba(0, 0, 0, 0.6); }
  .mdl > div {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100vh; }
  .mdl .inn {
    position: relative;
    background: #fff;
    width: 90%;
    max-height: 90vh;
    max-width: 840px;
    overflow-y: auto;
    padding: 40px 30px; }
    @media screen and (max-width: 480px) {
      .mdl .inn {
        padding: 20px 15px; } }
    .mdl .inn .inner {
      width: 100%;
      margin: 0 auto;
      padding: 20px 60px 0; }
      @media screen and (max-width: 480px) {
        .mdl .inn .inner {
          padding: 20px 20px 0; } }
    .mdl .inn .mdl_ttl {
      font-size: clamp(15px, 1.476vw, 18px);
      color: #555;
      letter-spacing: 0;
      font-weight: 600;
      line-height: 1.4;
      margin-bottom: 1.2em; }
    .mdl .inn .mdl_read {
      color: #111;
      font-size: clamp(11px, 1.148vw, 14px);
      letter-spacing: 0.05em; }
    .mdl .inn .img_list {
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      row-gap: 35px;
      margin-bottom: 30px; }
      @media screen and (max-width: 480px) {
        .mdl .inn .img_list {
          row-gap: 25px;
          margin-bottom: 20px; } }
      .mdl .inn .img_list li {
        width: calc(240% / 7.7); }
        @media screen and (max-width: 480px) {
          .mdl .inn .img_list li {
            width: 48%; } }
        .mdl .inn .img_list li P {
          font-size: clamp(12px, 1.905vw, 16px);
          color: #111;
          text-align: center;
          margin-top: 0.5em; }
    .mdl .inn .list_ttl {
      font-size: clamp(12px, 1.786vw, 15px);
      color: #666666;
      font-weight: 600;
      margin-bottom: 0.5em; }
    .mdl .inn .list {
      border-top: solid 1px #d0d0d0; }
      .mdl .inn .list dl {
        border-bottom: solid 1px #d0d0d0;
        display: flex;
        justify-content: space-between;
        font-size: clamp(10px, 1.429vw, 12px);
        padding: 1.8em 0;
        color: #333333; }
        @media screen and (max-width: 480px) {
          .mdl .inn .list dl {
            display: block; } }
        .mdl .inn .list dl dt {
          width: calc(160% / 6.4); }
          @media screen and (max-width: 480px) {
            .mdl .inn .list dl dt {
              width: 100%;
              margin-bottom: 0.6em; } }
        .mdl .inn .list dl dd {
          flex: 1; }
          @media screen and (max-width: 480px) {
            .mdl .inn .list dl dd {
              width: 100%; } }
    .mdl .inn .mdl_close1 {
      position: absolute;
      top: 30px;
      right: 30px;
      cursor: pointer;
      transition: all 0.3s ease-in-out 0s; }
      @media screen and (max-width: 480px) {
        .mdl .inn .mdl_close1 {
          top: 10px;
          right: 10px;
          width: 20px; } }
      .mdl .inn .mdl_close1:hover {
        opacity: 0.6; }
  .mdl .mdl_close2 {
    max-width: 260px;
    width: 100%;
    margin-top: 70px;
    margin-left: auto;
    margin-right: auto;
    text-align: center; }
    @media screen and (max-width: 480px) {
      .mdl .mdl_close2 {
        max-width: 140px;
        margin-top: 40px; } }
    .mdl .mdl_close2 span {
      margin: 0 auto;
      width: 100%;
      height: 4em;
      border-radius: 2em;
      font-size: clamp(12px, 1.786vw, 15px);
      line-height: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      background: #777777;
      color: #fff;
      border: solid 1px #777777;
      cursor: pointer;
      transition: all 0.3s ease-in-out 0s; }
      .mdl .mdl_close2 span:hover {
        opacity: 0.6; }

/*# sourceMappingURL=dormitory.css.map */