@charset "UTF-8";

/************************************
** kv
************************************/
.page-id-6 .kv {
  height: 80vh;
  margin-bottom: 0;
}

.kv .item {
  width: 600px;
  .iw {
    margin-bottom: 30px;
    img {
      width: 100%;
    }
  }
  p {
    color: #fff;
    font-size: 24px;
    margin-bottom: 30px;
    &.p1 {
      margin-bottom: 1em;
    }
    &.p2 {
      font-size: 16px;
    }
  }
  .w-btn {
    display: flex;
    gap: 20px;
    .btn-01 {
      display: block;
      width: 100%;
      margin: 0 auto;
    }
  }
}
@media screen and (max-width: 480px) {
  .page-id-6 .kv {
    height: 100vh;
  }

  .kv .item {
    width: auto;
    p {
      font-size: 20px;
      margin-bottom: 30px;
      &.p1 {
        margin-bottom: 1em;
      }
      &.p2 {
        font-size: 16px;
      }
    }
    .w-btn {
      justify-content: space-between;
      gap: 10px;
      .btn-01 a {
        width: 100%;
        font-size: 12px;
      }
    }
  }
}

/************************************
** about
************************************/
.about {
  .items {
    display: grid;
    grid-template-columns: 5fr 4fr 1fr;
    align-items: center;
    background: #15372c;
    color: #fff;
  }
  .items .item-01 {
    height: 100%;
    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }
  .items .item-02 {
    padding: 60px;
    .sttl {
      color: #fe6530;
    }
    .ttl {
      font-size: 32px;
      margin-bottom: 20px;
    }
    .msg {
      font-size: clamp(14px, 20vw, 20px);
    }
  }
  .items .item-03 {
    display: block;
  }
}
@media screen and (max-width: 480px) {
  .about {
    .items {
      display: block;
    }
    .items .item-02 {
      padding: 30px;
      .ttl {
        font-size: 24px;
      }
      .msg {
        font-size: 14px;
      }
    }
    .items .item-03 {
      display: flex;
      justify-content: center;
      align-items: center;
      padding-bottom: 30px;
    }
  }
}

/************************************
** approach
************************************/
.approach {
  .items {
    display: flex;
    gap: 30px;
  }
  .item {
    margin-bottom: 30px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
    padding: 15px;

    .rw-01 {
      display: flex;
      align-items: center;
      padding: 10px 0px;
      i {
        font-size: 42px;
        margin-right: 20px;
      }
      .t2 span {
        display: block;
        font-weight: bold;
      }
    }
    .rw-02 {
      overflow: hidden;

      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }
    .rw-03 {
      font-size: 16px;
      font-weight: bold;
    }
  }
}
@media screen and (max-width: 480px) {
  .approach {
    .items {
      display: block;
    }
    .item {
      .rw-03 {
        font-size: 16px;
      }
    }
  }
}

/* =================================
   1日の流れ (ONE DAY AT MOVE)
================================= */
.one-day-at-move {
  background-color: #f9f9f9;

  /* --- PC版：横並びレイアウト --- */
  .items {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 10px;
    margin-top: 40px;
  }

  .items .item {
    position: relative;
    flex: 1;
    text-align: center;

    /* 最後の要素以外に、右側（横方向）へ矢印を表示 */
    &:not(:last-child)::after {
      content: "→";
      position: absolute;
      top: 50px;
      right: -5px;
      transform: translateX(50%);
      color: #2b5d4f;
      font-weight: bold;
      font-size: 16px;
      line-height: 1;
    }
  }

  /* 画像まわり（丸型） */
  .item .iw {
    width: 120px;
    height: 120px;
    margin: 0 auto 12px;
    border-radius: 50%;
    overflow: hidden;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
        img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }

  /* テキスト・番号部分 */
  .item .box {
    .num {
      font-size: 14px;
      font-weight: bold;
      color: #2b5d4f;
      margin-bottom: 2px;
    }
    .txt {
      font-size: 13px;
      font-weight: bold;
      color: #333;
      line-height: 1.4;
    }
  }

  /* =================================
     スマホ用レイアウト（SP）
  ================================= */
  @media screen and (max-width: 768px) {
    padding: 50px 0;

    .items {
      display: block;
      margin-top: 25px;
    }

    .items .item {
      display: flex;
      align-items: center;
      background: #fff;
      padding: 14px 18px;
      margin-bottom: 14px; /* カード同士の間隔をすっきり調整 */
      border-radius: 10px;
      box-shadow: 0 3px 10px rgba(0, 0, 0, 0.04);
      text-align: left;

      /* 矢印（↓）の記述は完全に削除しました */
      &::after {
        display: none;
      }
    }

    /* SP時の画像サイズと配置（少し見栄えよく調整） */
    .item .iw {
      width: 60px;
      height: 60px;
      margin: 0 16px 0 0;
      flex-shrink: 0;
      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
    }

    /* SP時のテキスト・番号コンテナ */
    .item .box {
      display: flex;
      align-items: baseline;
      gap: 12px;

      .num {
        font-size: 14px;
        color: #2b5d4f;
        margin-bottom: 0;
        letter-spacing: 0.05em;
      }

      .txt {
        font-size: 15px;
        color: #333;
      }
    }
  }
}
/* =================================
   施設・設備 (FACILITY)
================================= */
.facility {
  padding: 80px 0;

  .wrap {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 40px;
  }
}

.facility .w-left {
  flex: 0 0 38%;
  .p1 {
    margin: 20px 0;
    font-size: 20px;
    line-height: 1.8;
    color: #333;
  }
  .btn-01 {
    margin: 20px auto;
    a {
      background: #fff;
      border: 2px solid #222;
      color: #222;

      &:hover {
        background: #222;
        color: #fff;
      }
    }
  }
}

.facility .w-right {
  flex: 0 0 60%;
}

/* ギャラリー部分のグリッドレイアウト（PC版：4列構成） */
.facility .facility-gallery-items {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(2, 140px);
  gap: 8px;
  width: 100%;
}

.facility .gallery-item {
  overflow: hidden;
  border-radius: 4px;
}

.facility .gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* PC版の各アイテムのグリッドエリア指定 */
.facility .facility-gallery-items .gallery-item:nth-child(1) {
  grid-area: 1 / 1 / 3 / 3;
}
.facility .facility-gallery-items .gallery-item:nth-child(2) {
  grid-area: 1 / 3 / 2 / 4;
}
.facility .facility-gallery-items .gallery-item:nth-child(3) {
  grid-area: 1 / 4 / 2 / 5;
}
.facility .facility-gallery-items .gallery-item:nth-child(4) {
  grid-area: 2 / 3 / 3 / 4;
}
.facility .facility-gallery-items .gallery-item:nth-child(5) {
  grid-area: 2 / 4 / 3 / 5;
}

/* =================================
   スマホ用レイアウト（SP）
================================= */
@media screen and (max-width: 768px) {
  .facility {
    padding: 50px 0;

    .wrap {
      flex-direction: column;
      gap: 30px;
    }
  }

  .facility .w-left,
  .facility .w-right {
    width: 100%;
    flex: none;
  }

  /* SP時は2列構成のグリッドに変更 */
  .facility .facility-gallery-items {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 2列に設定 */
    grid-template-rows: auto;
    gap: 8px;
    width: 100%;
    height: auto;
  }

  /* 各アイテムの配置：1枚目を上部に大きく、下段に2〜5枚目を2列で配置 */
  .facility .facility-gallery-items {
    & .gallery-item:nth-child(1) {
      grid-column: 1 / 3; /* 1列目から2列目（横幅いっぱい）を使用 */
      grid-row: 1; /* 1行目 */
      height: 220px; /* 1枚目の高さ */
    }
    & .gallery-item:nth-child(2) {
      grid-column: 1;
      grid-row: 2; /* 2枚目：左側 */
      height: 130px;
    }
    & .gallery-item:nth-child(3) {
      grid-column: 2;
      grid-row: 2; /* 3枚目：右側 */
      height: 130px;
    }
    & .gallery-item:nth-child(4) {
      grid-column: 1;
      grid-row: 3; /* 4枚目：左側 */
      height: 130px;
    }
    & .gallery-item:nth-child(5) {
      grid-column: 2;
      grid-row: 3; /* 5枚目：右側 */
      height: 130px;
    }
  }
}

/* =================================
   recruit
================================= */
.recruit {
    background:url(https://irohanext.com/wp-content/uploads/2026/10/20161021_002.jpeg);
    background-repeat:no-repeat;
    background-size:cover;
    background-position:center;
    height:500px;
    position:relative;
    color:#fff;
    &::before{
      content:"";
      position:absolute;
      top:0;
      left:0;
      width:100%;
      height:100%;
      background: linear-gradient(rgba(0, 0, 0, .2),  rgba(0, 0, 0, .2));
      z-index:0;
    }
    .wrap{
      position:relative;
    }
    .p1{
        width:400px;
    }
    .btn-01{
        a{
            margin:0;
        }
    }
    .iw{
        position:absolute;
        top: 10%;
        right: -15%;
        width: 200px;
        z-index:3;
    }
}
@media screen and (max-width: 768px) {
  .recruit {
      height:auto;
      .p1{
          width:auto;
      }
      .btn-01{
        a {
          margin:0 auto;
        }
      }
      .iw{
          top:0%;
          right:5%;
          width:100px;
      }
  }
  
}

/* =================================
   contact
================================= */
.contact {
    .items{
        display:flex;
        justify-content:center;
        align-items:center;
        .item{
            flex:1;
            padding:30px 60px;
            .heading-02{
                margin-bottom:10px;
            }
            .p1{
                position:relative;
            }
            .btn-01{
                margin-bottom:20px;
             a{
                 margin:0;
              }
            }
        }
    }
    .items .item-01{
        background:url(https://irohanext.com/wp-content/uploads/2026/10/20261022_001.jpeg);
        background-repeat:no-repeat;
        background-size:cover;
        background-position:center;
        height:300px;
        position:relative;
        color:#fff;
        &::before{
          content:"";
          position:absolute;
          top:0;
          left:0;
          width:100%;
          height:100%;
          background: linear-gradient(rgba(0, 0, 0, .3),  rgba(0, 0, 0, .3));
          z-index:0;
        }
    }
    .items .item-02{
        background:url(https://irohanext.com/wp-content/uploads/2026/10/20261022_002.jpeg);
        background-repeat:no-repeat;
        background-size:cover;
        background-position:center;
        height:300px;
        position:relative;
        color:#fff;
        &::before{
          content:"";
          position:absolute;
          top:0;
          left:0;
          width:100%;
          height:100%;
          background: linear-gradient(rgba(0, 0, 0, .3),  rgba(0, 0, 0, .3));
          z-index:0;
        }
    }
    
}
@media screen and (max-width: 768px) {
  .contact {
      .items{
          display:block;
          .item{
              padding:20px 15px;
              .btn-01{
                a{
                  margin:0 auto;
                }
              }
          }
      }
      .items .item-01{
          height:auto;
      }
      .items .item-02{
          height:auto;
      }      
  }
}