@charset "UTF-8";

@import "../../../n_common/css/_variable.css";
/* =========================================================
  選べる見学コース　特設ページ
  掲載先: /special/tour_course/css/local.css
  スコープ: .area_course 配下のみに適用(既存スタイルと衝突しないよう
  すべて .area_course を起点に記述)

  画像パーツ(文字アウトライン化済み)は images/ 配下に書き出し済みのものを使用。

  元データ: Asm久米_選べる見学コース_edit.ai (2026-09-24解析)
  デザイン幅1920px基準で採寸
========================================================== */

.area_course {
  --course_bg: #f9f8f2; /* ページ地色 */
  --course_btn_from: #2056b4; /* 来場予約ボタン(共通 .btn-visit と同配色) */
  --course_btn_to: #0c295e;

  font-family: var(--font_gothic);
  font-feature-settings: "palt";
  color: var(--font_c);
  text-align: left;
  overflow-wrap: break-word;
  background: var(--course_bg);

  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }

  img {
    max-width: 100%;
    height: auto;
    vertical-align: bottom;
  }

  h2,
  p,
  ul,
  li {
    margin: 0;
    padding: 0;
  }

  ul {
    list-style: none;
  }

  /* ---------------------------------------------------------
    来場予約ボタン(導入・CTAで共通)
  --------------------------------------------------------- */
  .course-btn {
    width: min(100%, 422px);
    margin-inline: auto;

    a {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 0.4em;
      height: 102px;
      font-size: 26px;
      font-weight: 500;
      letter-spacing: 0.1em;
      color: #fff;
      text-decoration: none;
      background: linear-gradient(to right, var(--course_btn_from), var(--course_btn_to));
      transition: filter 0.5s;

      /* カレンダーアイコン(共通アイコンを白抜き) */
      &::before {
        content: "";
        width: 1.3em;
        aspect-ratio: 1;
        background: url(../../../n_common/images/icon_visit.svg) no-repeat center / contain;
        filter: brightness(0) invert(1);
      }

      /* 内側の細線 */
      &::after {
        content: "";
        position: absolute;
        inset: 6px;
        border: 1px solid rgb(255 255 255 / 0.35);
        pointer-events: none;
      }

      &:hover {
        filter: brightness(120%) saturate(160%);
      }
    }

    @media (width < 896px) {
      a {
        height: 72px;
        font-size: 20px;

        &::after {
          inset: 4px;
        }
      }
    }
  }

  /* ---------------------------------------------------------
    メインビジュアル
  --------------------------------------------------------- */
  .course-hero {
    position: relative;

    .course-hero__bg {
      display: block;
      width: 100%;
    }

    /* ttl_kengaku.jpg は外周に白地＋影を含むため、
       青い枠(1037×714/1076×752)だけを切り出して表示する */
    .course-hero__ttl {
      position: absolute;
      top: 50%;
      left: 50%;
      width: 27%; /* 518px / 1920px */
      aspect-ratio: 1037 / 714;
      overflow: hidden;
      translate: -50% -50%;

      img {
        display: block;
        width: 103.76%; /* 1076 / 1037 */
        max-width: none;
        margin: -0.868% 0 0 -0.868%; /* 9 / 1037 */
      }
    }

    @media (width < 896px) {
      .course-hero__ttl {
        /* position: relative;
        top: auto;
        left: auto;
        width: calc(100% - 40px);
        max-width: 518px;
        margin: -12% auto 0;
        translate: none; */
        width: auto;
        height: calc(100% - 60px);
        max-height: 240px;
      }
    }
  }

  /* ---------------------------------------------------------
    導入
  --------------------------------------------------------- */
  .course-intro {
    padding: 53px 0 58px;

    .course-intro__inner {
      display: grid;
      grid-template-columns: minmax(0, 209px) minmax(0, 710px) minmax(0, 216px);
      grid-template-rows: auto auto;
      justify-content: center;
      column-gap: 38px;
      width: calc(100% - 40px);
      margin-inline: auto;
    }

    .course-intro__ill {
      grid-row: 1 / span 2;
      align-self: start;
    }

    .course-intro__ill--l {
      grid-column: 1;
    }

    .course-intro__ill--r {
      grid-column: 3;
    }

    .course-intro__txt {
      position: relative;
      grid-column: 2;
      grid-row: 1;
      padding-inline: 60px;
      font-size: clamp(16px, 1.15vw, 22px);
      font-weight: 500;
      line-height: 2.2;
      letter-spacing: 0.1em;
      text-align: center;

      strong {
        font-size: 1.45em;
        font-weight: 700;
        line-height: 1.5;
        color: var(--main_c);
      }

      /* 左右の斜めの点線 */
      &::before,
      &::after {
        content: "";
        position: absolute;
        top: 0;
        width: 1px;
        height: 100%;
        background: repeating-linear-gradient(to bottom, var(--font_c) 0 4px, transparent 4px 8px);
      }

      &::before {
        left: 26px;
        rotate: -18deg;
      }

      &::after {
        right: 26px;
        rotate: 18deg;
      }
    }

    .course-btn {
      grid-column: 2;
      grid-row: 2;
      margin-top: 62px;
    }

    @media (width < 896px) {
      padding: 28px 0 32px;

      .course-intro__inner {
        grid-template-columns: repeat(2, minmax(0, 120px));
        grid-template-rows: auto;
        column-gap: 16px;
        row-gap: 14px;
      }

      .course-intro__ill {
        grid-row: 1;
        align-self: end;
      }

      .course-intro__ill--r {
        grid-column: 2;
      }

      .course-intro__txt,
      .course-btn {
        grid-column: 1 / -1;
        grid-row: auto;
      }

      .course-intro__txt {
        padding-inline: 0;
        font-size: 15px;
        line-height: 1.75;
        letter-spacing: 0.05em;

        &::before,
        &::after {
          content: none;
        }
      }

      .course-btn {
        width: min(100%, 340px);
        margin-top: 4px;
      }
    }
  }

  /* ---------------------------------------------------------
    6つの見学コース
  --------------------------------------------------------- */
  .course-list {
    padding-bottom: 70px;

    .course-list__hdg {
      position: absolute;
      width: 1px;
      height: 1px;
      overflow: hidden;
      clip-path: inset(50%);
      white-space: nowrap;
    }

    .course-list__items {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      align-items: start;
      gap: 18px 53px;
      width: calc(100% - 40px);
      max-width: 1222px; /* 584px × 2 + 53px */
      margin-inline: auto;
    }

    @media (width < 896px) {
      padding-bottom: 48px;

      .course-list__items {
        grid-template-columns: minmax(0, 1fr);
        gap: 12px;
        max-width: 584px;
      }
    }
  }

  /* コース03と04の間の予約導線(SPのみ)
     元データ: Asm久米_えら別見学コースspパーツ375x717.pdf */
  .item_curse_btn {
    display: none;
    padding: 4px 12px 12px;
    text-align: center;

    @media (width < 896px) {
      display: block;
    }

    .item_curse_btn__lead {
      margin-bottom: 9px;
      font-size: 12px;
      font-weight: 700;
      line-height: 1.5;
      letter-spacing: 0.05em;
    }

    .item_curse_btn__btn a {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 14px;
      height: 28px;
      font-size: 14px;
      font-weight: 700;
      letter-spacing: 0.1em;
      color: #fff;
      text-decoration: none;
      background: #86c0af;
      border-radius: 100vmax;
      transition: filter 0.5s;

      /* 右向き矢印 */
      &::after {
        content: "";
        width: 6px;
        aspect-ratio: 1;
        border-top: 2px solid currentColor;
        border-right: 2px solid currentColor;
        rotate: 45deg;
        translate: -2px 0;
      }

      &:hover {
        filter: brightness(110%);
      }
    }
  }

  /* ---------------------------------------------------------
    来場予約への誘導
  --------------------------------------------------------- */
  .course-cta {
    padding: 74px 20px 80px;
    color: #fff;
    text-align: center;
    background: url(../images/img02.jpg) no-repeat center / cover;

    .course-cta__ttl {
      width: min(100%, 624px);
      margin: 0 auto 33px;
      padding: 0.25em 1em;
      font-size: clamp(20px, 1.65vw, 32px);
      font-weight: 700;
      line-height: 1.4;
      letter-spacing: 0.15em;
      background: var(--main_c);
      border-radius: 100vmax;
      position: relative;

      /* 上の集中線 */
      &::before {
        content: "";
        position: absolute;
        bottom: calc(100% + 14px);
        left: 50%;
        width: 89px;
        aspect-ratio: 88.92 / 26.55;
        background: url(../images/elem01.svg) no-repeat center / contain;
        translate: -50% 0;
      }
    }

    .course-cta__txt {
      margin-bottom: 38px;
      font-size: clamp(15px, 1.15vw, 22px);
      font-weight: 500;
      line-height: 2.2;
      letter-spacing: 0.1em;
    }

    @media (width < 896px) {
      padding: 64px 20px 48px;

      .course-cta__ttl {
        margin-bottom: 24px;
        letter-spacing: 0.1em;

        &::before {
          bottom: calc(100% + 10px);
          width: 64px;
        }
      }

      .course-cta__txt {
        margin-bottom: 28px;
        line-height: 2;
        letter-spacing: 0.05em;
      }

      .course-btn {
        width: min(100%, 340px);
      }
    }
  }
}

.newline {
  display: inline-block;
}

.txt_number {
  font-size: 1.5em;
  color: var(--point02);
  color: var(--main_c);
}

.txt_small {
  display: inline-block;
  font-size: 0.7em;
}

.pconly {
  @media (width <= 896px) {
    display: none;
  }
}

.sponly {
  @media (width > 896px) {
    display: none;
  }
}