@charset "UTF-8";
/*//////////PCサイズ///////////*/
/*//////////PCサイズ///////////*/
@media screen and (min-width: 768px) {
  /** ==============================
 * ファーストビュー start
 * ============================== **/
  .MainVisualSection {
    position: relative;
    width: 100vw;
    height: 100vh;
    /*height: min(100vh, 75vw);  75vw = 100vw * (12/16) */
    max-height: 100vh;
    overflow: hidden;
    background-color: #333;

  }
  /* ===== 動画背景 ===== */
  .MainVisualSection__video-bg {
    position: absolute;
    inset: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    overflow: hidden;
  }
  .MainVisualSection__video-bg video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  /* ★ 黒オーバーレイ */
  .MainVisualSection__overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.4); /* 黒＋透明30% */
    z-index: 2;
    pointer-events: none; /* 下の動画ボタンなどの操作を邪魔しない */
  }
  /* ===== ブランドMOVIEリンク・コピー配置 ===== */
  .MainVisualSection__content {
    position: absolute;
    inset: 0;
    z-index: 3;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    pointer-events: none;
  }
  .MainVisualSection__brand-movie {
    align-self: flex-start;
    margin: 0 0 40px 40px;
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: 2;
    pointer-events: auto;
  }
  /* ブランドムービーボタン */
  .MainVisualSection__brand-link img {
    width: 10vw;
    height: auto;
  }
  /* ライトボックスのスタイル */
  .VideoLightbox {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.8);
    z-index: 10000; /* 必ずヘッダーより前に */
    align-items: center;
    justify-content: center;
  }
  .VideoLightbox.is-active {
    display: flex;
  }
  .VideoLightbox__inner {
    position: relative;
    max-width: 90%;
    max-height: 80%;
  }
  .VideoLightbox__inner video {
    width: 100%;
    max-width: 1280px;
    height: auto;
    display: block;
  }
  .VideoLightbox__close {
    position: absolute;
    top: -2.5rem;
    right: -2.5rem;
    font-size: 2rem;
    color: #fff;
    background: none;
    border: none;
    cursor: pointer;
    z-index: 10002; /* 念のためボタンも強く */
  }
  .MainVisualSection__brand-link:hover {
    opacity: 0.8;
  }
  .MainVisualSection__copy {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    position: absolute;
    right: 1vw;
    bottom: 10%;
    margin: 0 0 0 0;
    z-index: 2;
    pointer-events: auto;
  }
  .MainVisualSection__en.serif {
    font-family: 'Noto Serif JP', serif;
    font-size: 2.5rem;
    font-weight: 100;
    width: 40vw;
    color: #fff;
    letter-spacing: 0.2rem;
    text-shadow: 0 2px 18px rgba(0, 0, 0, 0.18);
    line-height: 190%;
  }
  /* 受け文（タイトル下の本文） */
  .MainVisualSection__lead {
    margin: 2rem 0 0 0; /* タイトルとの間隔 */
    width: 40vw; /* 右寄せのまま読み幅を制御 */
    color: #fff;
    font-family: 'Noto Serif JP', serif;
    font-size: 1.3rem;
    line-height: 2.2;
    letter-spacing: .08rem;
    text-shadow: 0 2px 18px rgba(0, 0, 0, 0.18);
    /* 行は左揃え、ブロック自体は右に寄る（親がflex-end） */
    /* 読みにくい場合は薄くプレートを敷く（任意）
  background: rgba(0,0,0,.05);
  padding: .6rem .8rem;
  border-radius: .4rem;
  */
  }
  /** ==============================
 * ファーストビュー end
 * ============================== **/
 /* ==============================
   think start
============================== */
  .think {
    position: relative;
    background-color: #F9F5F2;
    padding: 8rem 0 8rem;
    text-align: center;
    overflow: hidden; /* 下のアール装飾のはみ出しを隠す＆横スクロール防止 */
  }
  /* 下端アール（次セクション色を想定） */
  .think::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -1.5vw; /* 高さの半分ほど下へ */
    transform: translateX(-50%);
    width: 120%;
    height: 3vw; /* ご指定どおり */
    background: #93815f; /* 次セクションの背景色に合わせて調整可 */
    border-radius: 50% 50% 0 0 / 100% 100% 0 0;
    z-index: 0;
    pointer-events: none;
  }
  /* このセクション固有の余白・サイズ（色は共通クラスで制御） */
  .think .tag {
    margin-bottom: 2rem;
  }
  .think .ttl {
    margin-bottom: 1rem;
  }
  .think .sub {
    font-family: 'Jost', sans-serif;
    font-size: 1.6rem;
    letter-spacing: .06em;
    color: #7b6a58;
    margin-bottom: 3rem;
  }
  .think .btn-wrap {
    margin-bottom: 4rem;
  }
  /* 画像3枚 */
  .think .imgs {
    width: 80vw;
    margin: auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2.5rem;
    align-items: end;
  }
  .think .img img {
    display: block;
    width: 100%;
    height: auto;
  }
/* ==============================
   think end
============================== */
/* ==============================
   reason start
============================== */
  .reason {
    background-color: #93815f;
    padding: 5rem 0; /* ここはデザインに合わせてrem継続でOK */
    color: #f2ece2;
  }
  .reason__in {
    width: 85vw;
    margin: auto;
    display: grid;
    grid-template-columns: 1fr 45%; /* 比率はfrで可変 */
    gap: 0vw; /* 余白はvwで */
    align-items: center;
  }
  .reason__txt {
    width: 70%;
    margin: auto;
  }
  .reason .tag {
    margin: 0 0 1rem 0
  }
  .reason .ttl {
    /* 共通のfont-size/line-heightは変更しない */
    margin: 1.6rem 0 2rem 0;
  }
  .reason .lead {
    /* 共通のline-heightは変更しない */
    width: 100%;
    margin-bottom: 2.5rem;
  }
  .reason .btn-wrap {
    margin-top: 2.2rem;
  }
  /* 右側の画像 */
  .reason__img {
    position: relative;
    overflow: hidden;
  }
  .reason__img img {
    width: 108%;
    height: 100%;
    object-fit: cover;
    object-position: center 40%;
    display: block;
  }
  /* ==============================
   reason end
============================== */
  /* ==============================
   frame start
============================== */
  .frame {
    position: relative;
    background: #93815f;
    overflow: hidden; /* 装飾のはみ出しで横スクロールが出ないように */
  }
  /* 背景：セクション全体をカバー（高さはコンテンツに追従） */
  .frame-bg {
    position: absolute;
    inset: 0; /* top:0 right:0 bottom:0 left:0 */
    background: url("../images/img5.webp") center / cover no-repeat; /* ← パス修正 */
    clip-path: polygon(0 16vw, 100% 0%, 100% 100%, 0% 100%);
    z-index: 1;
  }
  /* 背景の読みやすさ向上（不要なら削除OK） 
.frame-bg::before{
  content:"";
  position:absolute;
  inset:0;
  background: rgba(0,0,0,.35);
}*/
  /* 左右の三角は背景より前・本文より後ろに重ねる */
  .frame-triL, .frame-triR {
    position: absolute;
    top: 0;
    width: 50vw;
    height: 16vw;
    z-index: 2;
    pointer-events: none;
  }
  .frame-triL {
    left: 0;
    background: #f9f6f2;
    clip-path: polygon(0 0, 0% 100%, 100% 50%);
  }
  .frame-triR {
    right: 0;
    background: rgba(249, 246, 242, .10);
    clip-path: polygon(100% 0, 100% 100%, 0 50%);
  }
  /* 前面コンテンツ：この余白でセクション高さが決まる */
  .frame-in {
    position: relative;
    z-index: 3; /* 背景＆三角より前 */
    width: 100vw;
    margin: 0 auto;
    padding: 20vw 0 6vw; /* 上は斜めエリアを避ける、下はカード分の余白 */
    text-align: center;
  }
  .frame-in .tag {
    margin-bottom: 2rem;
  }
  .frame-in .ttl {
    margin-bottom: 1.2rem;
  }
  .frame-in .lead {
    width: 65vw; /* ご指定反映 */
    margin: 0 auto 2.2rem;
  }
  /* 9つのポイント（上5 / 下4 を中央揃え） */
  .points {
    width: 100vw;
    margin: 5vw auto 0;
    display: flex;
    flex-direction: column;
    gap: 2rem; /* 上下の段の間隔 */
  }
  .points-row {
    display: flex;
    justify-content: center; /* 各段を中央揃え */
    gap: 1.2vw;
    flex-wrap: wrap; /* SPで折り返し可能に */
  }
  .pt {
    width: 14vw;
    padding: 2.0rem 1.2rem;
    border: 1px solid rgba(255, 255, 255, .6);
    border-radius: 1rem;
    color: #fff;
    background: rgba(255, 255, 255, .06);
    backdrop-filter: blur(2px);
    text-align: center;
  }
  .pt .num {
    display: block;
    font-family: 'Noto Serif JP', serif;
    font-weight: 100;
    font-size: 3rem;
    line-height: 1;
    margin-bottom: 1.8rem;
    opacity: .9;
  }
  .pt .cap {
    display: block;
    line-height: 1.9;
    font-size: 1.05rem;
    font-weight: 300;
  }
  /* ==============================
   frame end
============================== */
  /* ==============================
   arch start
============================== */
  .arch {
    position: relative;
    background: #5d5b64; /* セクション地（ダークグレー） */
    color: #f2ece2;
    padding: 8vw 0 6vw;
    overflow: hidden;
  }
  /* 左上の斜めパーツ（ご指定） */
  .arch-deco {
    position: absolute;
    top: 0;
    left: 0;
    width: 50vw;
    height: 20vw;
    background: rgba(140, 163, 184, 0.4); /* 8ca3b8 を透明度40%に */
    clip-path: polygon(0 0, 100% 0, 0 100%);
    z-index: 1;
  }
  /* ARCHITECTURE 見出し（上部に固定） */
  .arch-title {
    width: 100%;
    text-align: center;
    font-family: 'Jost', sans-serif;
    font-weight: 400; /* すっきり細め */
    font-size: 7.5rem;
    letter-spacing: 0.25rem;
    line-height: 1;
    color: #d7cfb4; /* 既存のベージュ系 */
    pointer-events: none; /* 装飾なのでクリックを透過 */
    padding-bottom: 5vw;
  }
  .arch__in {
    position: relative;
    z-index: 2;
  }
  /* 上段：左右2分割 */
  .arch-top {
    display: grid;
    grid-template-columns: 1fr 1fr; /* 1:1（添付比率に近い） */
    gap: 3vw;
    align-items: start;
    width: 85vw;
    margin: 0 auto 4vw;
  }
  /* 左肩の“矢印＋テキスト”（共通ではなく専用） */
  .arch-label {
    display: flex;
    align-items: center;
    gap: 1.8rem;
    margin: 0 0 1.2rem;
  }
  .arch-label__ico {
    width: 1.3rem;
    height: 2rem;
    background: #eadfbd; /* ベージュ系 */
    /* 六角矢印っぽい形（▶に近い） */
    clip-path: polygon(100% 0, 70% 50%, 100% 100%, 0 100%, 0 0);
  }
  .arch-label__txt {
    font-family: 'Noto Serif JP', serif;
    font-weight: 600;
    font-size: 1.8rem;
    color: #fff;
    letter-spacing: .1em;
  }
  /* 画像汎用 */
  .arch-img {}
  .arch-img img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  /* 上段：左メイン画像 */
  .arch-img--main {
    width: 100%;
    aspect-ratio: 16 / 10; /* アスペクト比を固定 */
    height: auto; /* 高さは自動算出 */
    object-fit: cover; /* 画像が枠にフィットするよう調整 */
  }
  .arch-topR {
    width: 35vw;
    margin: auto;
    text-align: center;
  }
  /* 右カラム（ロゴ＋本文） */
  .arch-topR .ttl {
    margin: 1.4rem 0 1.2rem;
  }
  .arch-topR .lead {
    margin-bottom: 2rem;
  }
  .arch-logo {
    margin-bottom: 1rem;
  }
  .arch-logo img {
    display: block;
    width: 20vw;
    height: auto;
    margin: auto;
  }
  /* 下段：1/3 と 2/3 */
  .arch-bottom {
    width: 85vw;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 2fr; /* 左1/3：右2/3 */
    gap: 1vw;
    align-items: stretch;
  }
  .arch-btmL {
    display: grid;
    gap: 1vw;
  }
  .arch-btmL .arch-img {
    height: 19vw;
  }
  .arch-btmR {
    height: 39vw;
  }
  /* ==============================
   arch end
============================== */
  /* ==============================
   arch-sec start
============================== */
  .arch-sec {
    background: #5d5b64; /* セクション地 */
    color: #f2ece2;
    padding: 5vw 0 5vw 10vw;
  }
  .arch-sec .arch-inner {
    width: 90vw; /* 帯と画像の左右マージン感を再現 */
    margin: 0 auto;
  }
  /* 帯パネル */
  .arch-panel {
    background: #6f6660; /* 見本の少し明るい帯色 */
    padding: 3vw 4vw;
    position: relative;
  }
  /* ラベル＋moreを同一行で */
  .arch-panel__head {
    display: flex;
    align-items: center;
    justify-content: space-between; /* ラベルは左／moreは右 */
    gap: 5vw;
    margin-bottom: 1.4vw;
  }
  /* 説明文（共通leadのまま、余白だけ） */
  .arch-sec .arch-lead {
    margin-top: .6vw;
    margin-bottom: .6vw;
    opacity: .96;
  }
  /* 画像ラッパ。帯→画像の“斜め段差”を ::before で作る */
  .arch-imgwrap {
    width: 100%;
    margin-top: 0; /* 帯直下に密着 */
    position: relative;
  }
  .arch-credit {
    position: absolute;
    right: 1.2vw;
    bottom: 1.2vw;
    height: 2rem; /* 見え方に合わせて 2.6〜3.6rem で調整 */
    width: auto;
    display: block;
    z-index: 5;
    pointer-events: none; /* 画像クリックを邪魔しない（必要なければ削除） */
    /* 背景が明るくて埋もれる時だけ */
    /* filter: drop-shadow(0 .1rem .6rem rgba(0,0,0,.25)); */
  }
  .arch-imgwrap::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: -2.8vw; /* 帯の上端と噛み合わせ */
    height: 2.8vw;
    background: #6f6660; /* 帯と同色 */
    /* 左高→右低の斜め */
    clip-path: polygon(0 75%, 100% 0, 100% 100%, 0% 100%);
  }
  /* 画像は16:10固定（vwベースで伸縮） */
  .arch-img--main {
    width: 100%;
    aspect-ratio: 16 / 10;
    height: auto;
    object-fit: cover;
    display: block;
  }
  /* ==============================
   arch-sec end
============================== */
  /* ==============================
   arch-duo start
============================== */
  .arch-duo {
    position: relative;
    background: #5d5b64; /* セクションの地色（共通） */
    overflow: hidden; /* 三角形がはみ出さないように */
    padding: 6vw 10vw 8vw 0;
  }
  .arch-duo-triangle {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 50vw;
    height: 20vw;
    background: rgba(140, 163, 184, 0.4); /* #8ca3b8 を透明度40% */
    clip-path: polygon(100% 0, 0% 100%, 100% 100%);
    z-index: 1;
  }
  .arch-duo__in {
    width: 90vw;
    background: #8ca3b8;
    margin: 0 auto;
    padding-left: 5vw;
    display: grid;
    grid-template-columns: 1fr 1px 1fr; /* 左カード | 仕切り | 右カード */
    align-items: start;
    gap: 0vw;
  }
  /* 仕切り線（スクショの中央の縦線） */
  .arch-duo__divider {
    width: 1px;
    height: 100%;
    background: rgba(255, 255, 255, .35);
    opacity: .7;
  }
  /* カード本体 */
  .arch-card {
    /* 面のブルー（添付に寄せた色） */
    padding: 3vw 4vw;
  }
  /* ラベルは共通 arch-label を流用。余白だけ調整 */
  .arch-card .arch-label {
    margin-bottom: 1.6vw;
  }
  /* 写真：16:10で統一（vwベースで伸縮） */
  .arch-card__ph {
    margin-bottom: 1.8vw;
    background: rgba(255, 255, 255, .1);
  }
  .arch-card__ph img {
    width: 100%;
    aspect-ratio: 16 / 10;
    height: auto;
    object-fit: cover;
    display: block;
  }
  /* リードは共通 .lead を使い、余白だけ */
  .arch-card__lead {
    margin-bottom: 2.0vw;
  }
  /* ==============================
   arch-duo end
============================== */
  /* ==============================
   gallery-sec start
   ============================== */
  .gallery-sec {
    position: relative;
    background: #f4efe9;
    padding: 6vw 0 10vw;
    overflow: hidden;
  }
  .gal-in {
    width: 85vw;
    margin: 0 auto 5vw auto;
  }
  .gal-head {
    position: relative;
  }
  .gal-head .lead {
    width: 55vw;
  }
  /* ▼ タグ＋見出し：中央ライン（cross-axis center）で揃える */
  .gal-hrow {
    display: flex;
    align-items: center; /* ← baseline から center に変更 */
    column-gap: 2vw;
    row-gap: 0;
    flex-wrap: nowrap;
  }
  /* 背景「GALLERY」 */
  .gal-mark {
    position: absolute;
    top: -3vw;
    right: 0;
    font-weight: 500;
    font-size: 7.5rem;
    line-height: 1;
    letter-spacing: 0.25rem;
    color: rgba(174, 159, 135, .35);
    pointer-events: none;
    user-select: none;
    white-space: nowrap;
    font-family: 'Jost', sans-serif;
  }
  /* 共通ボタンの位置だけ制御 */
  .gal-more-pos {
    position: absolute;
    bottom: 0;
    right: 0;
  }
  /* カード */
  .gal-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 3vw;
    margin-top: 3.6vw;
  }
  .card .card-lk {
    display: block;
    text-decoration: none;
    color: inherit;
  }
  .ph {
    position: relative;
    aspect-ratio: 16/11;
    overflow: hidden;
    background: #ddd;
  }
  .ph img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  /* 角飾り（要素方式） */
  .ph_tryangle {
    width: 3vw;
    height: 3vw;
    position: absolute;
    top: 0%;
    left: 0%;
    clip-path: polygon(0 0, 0% 100%, 100% 0);
    background: #947847;
  }
  /* テキスト塊 */
  .card .txt {
    padding: 1.2vw 0 .6vw;
  }
  /* カード見出し（共通 .ttl は使わない） */
  .gal-card__ttl {
    font-weight: 700;
    color: #947847;
    line-height: 1.6;
    letter-spacing: .02em;
    font-size: 1.3rem;
    margin: 0 0 .4vw 0;
    font-family: 'Noto Sans JP', sans-serif;
  }
  /* 補助テキスト */
  .gal-card__meta {
    color: #6f6556;
    font-size: .95rem;
    line-height: 1.9;
  }
  /* 下端の斜め帯 */
  .gal-slope {
    position: absolute;
    left: 0;
    bottom: -1%;
    width: 100%;
    height: 8vw;
    background: #7b6a4f;
    clip-path: polygon(100% 56%, 100% 100%, 0 100%, 0 50%, 50% 0);
    z-index: 0;
  }
  /* レイヤー順 */
  .gal-head, .gal-cards {
    position: relative;
    z-index: 2;
  }
  /* ==============================
   gallery-sec end
   ============================== */
  /* ==============================
   support-sec start
   ============================== */
  .support-sec {
    position: relative;
    background: #7b6a4f; /* セクション最背面色 */
    overflow: hidden;
    padding: 2vw 0 6vw 0;
  }
  .sup-in {
    width: 100vw;
    margin: 0 auto 0vw auto;
    position: relative;
  }
  /* 2カラム構成：左テキスト / 右ビジュアル */
  .sup-grid {
    display: grid;
    grid-template-columns: 1fr 50vw; /* 右写真を大きめに */
    gap: 3vw;
    align-items: center;
  }
  /* 左テキストのリードは読みやすい幅に */
  .sup-words {
    padding-left: 11vw;
  }
  /* 共通ボタンは位置だけ調整（装飾は共通に委譲） */
  .sup-more-pos {
    display: inline-flex;
    margin-top: 2.8vw;
  }
  /* 右の写真 */
  .sup-photo {
    position: relative;
    /*aspect-ratio: 16/10;      見本比率に近づける */
    background: #ccc;
    overflow: hidden;
  }
  .sup-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  /* 背景の縦大文字 SUPPORT（装飾） */
  .sup-mark {
    position: absolute;
    left: 1.6vw;
    top: 50%;
    transform: translateY(-50%);
    writing-mode: vertical-rl;
    text-orientation: mixed;
    font-weight: 500;
    font-size: 7.5rem;
    letter-spacing: 0.05em; /* ← .0.2em から修正 */
    line-height: 1;
    color: rgba(255, 255, 255, .25);
    z-index: 0;
    pointer-events: none;
    user-select: none;
  }
  /* レイヤー順：本文と写真を最前面に */
  .sup-grid {
    position: relative;
    z-index: 2;
  }
  /* ==support-sec spacing (tag/ttl/lead) start== */
  /* 左カラム内の余白調整：見本の間隔に合わせる */
  .sup-words .tag {
    margin: 0 0 1vw; /* タグ → 見出しの間 */
  }
  .sup-words .ttl {
    margin: 0 0 1.5vw; /* 見出し → 本文の間 */
  }
  .sup-words .lead {
    margin: 0; /* 下はボタンの .sup-more-pos で確保 */
  }
  /* ==============================
   support-sec end
   ============================== */
  /* ==============================
   company-sec start
   ============================== */
  .company-sec {
    position: relative;
    background: transparent;
    padding: 6vw 0;
    overflow-x: hidden; /* 50vw+50vw+gapのオーバー分ケア */
  }
  .cmp-in {
    width: 100vw;
    margin: 0 auto 5vw auto;
  }
  /* 2カラム：指定どおり 50vw / 50vw ・ gap 8vw */
  .cmp-grid {
    display: grid;
    grid-template-columns: 50vw 50vw;
    gap: 8vw;
    align-items: center;
  }
  /* Map */
  .cmp-map__frame {
    position: relative;
    aspect-ratio: 1.2/1; /* 指定どおり */
    background: #ddd;
    overflow: hidden;
  }
  .cmp-map__frame iframe {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
  }
  /* Words */
  .cmp-words .tag {
    margin: 0 0 1.6vw;
  }
  .cmp-name {
    margin: 0 0 2.4vw;
  }
  .cmp-logo {
    width: 25vw; /* 指定どおり */
    height: auto;
    display: block;
  }
  /* 住所・リンク・電話 */
  .cmp-addr {
    font-style: normal;
  }
  .cmp-addr__line {
    margin: 0 0 1.4vw;
    color: #221a19;
    line-height: 1.9;
  }
  /* アイコンと文字の中央揃え（見本指示） */
  .cmp-addr__map, .cmp-addr__tel {
    display: flex;
    align-items: center; /* 垂直中央 */
    column-gap: .8rem;
    margin: 0 0 1.6vw;
    color: #221a19;
    line-height: 1.8;
  }
  .ico-img {
    width: 1.2rem;
    height: auto;
    display: block; /* baseline影響を排除して中心に */
  }
  .cmp-addr__map a {
    color: inherit;
    text-decoration: underline;
  }
  /* 電話・営業時間の間隔 */
  .cmp-tel {
    margin-right: 1rem;
    font-size: 1.3rem;
  }
  /* moreボタン位置（装飾は共通に委譲） */
  .cmp-more-pos {
    display: inline-flex;
    margin-top: 2.8vw;
  }
  /* ==============================
   company-sec end
   ============================== */
  /* ==============================
   recruit-sec start
   ============================== */
  .recruit-sec {
    position: relative;
    background: #eaddcd; /* 必要なら調整可 */
    padding: 12vw 0 5vw 0; /* 指定どおり */
    overflow: hidden;
  }
  .rec-in {
    width: 100vw;
    margin: 0 auto;
    position: relative;
  }
  /* 背面画像 */
  .rec-hero {
    width: 75vw; /* 指定どおり */
    height: 38vw; /* 指定どおり */
    margin-left: 25vw;
    overflow: hidden;
    background: #cfcfcf;
  }
  .rec-hero img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  /* 大見出し RECRUIT（.gal-markを参考に） */
  .rec-mark {
    position: absolute;
    left: 6vw;
    top: -5vw;
    font-weight: 500;
    font-size: 7.5rem;
    line-height: 1;
    letter-spacing: 0.25rem;
    color: #6dbcc7; /* 見本の青緑系 */
    pointer-events: none;
    user-select: none;
    white-space: nowrap;
    font-family: 'Jost', sans-serif;
  }
  /* キャッチ行のラッパ */
  .rec-lines {
    position: absolute;
    left: 6vw;
    top: 13vw;
    display: grid;
    row-gap: 2vw;
  }
  /* 吹き出し（白帯） */
  .rec-bubble {
    display: inline-block;
    margin: 0;
    padding: 0.5rem 1rem; /* 指定どおり */
    background: #fff;
    color: #2b2b2b;
    line-height: 1.9;
    letter-spacing: .02em;
    width: max-content;
    font-size: 1.8rem; /* 指定どおり */
    font-family: 'Noto Serif JP', serif; /* 指定どおり */
  }
  /* 2つ目のみ左から15vwの位置へ（相対配置でオフセット） */
  .rec-lines .rec-bubble:nth-of-type(2) {
    margin-left: 11.5vw;
  }
  /* ボタン */
  .rec-btn {
    display: inline-flex;
    align-items: center;
    gap: 1rem;
    margin-top: 2.6vw;
    padding: 1rem 1.4rem 1rem 1.6rem;
    background: #fff;
    border: .15rem solid #99d3de;
    border-radius: 10rem;
    color: #1a1a1a;
    font-size: 1.25rem; /* 指定どおり */
    text-decoration: none;
    width: max-content; /* 指定どおり */
  }
  .rec-btn__txt {
    padding: 0 2rem 0 1rem;
  }
  .rec-btn__ico {
    width: 2.2rem;
    height: 2.2rem;
    border-radius: 50%;
    background: #5fb6c6;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .rec-btn__ico img {
    width: 1.2rem;
    height: auto;
    display: block;
  }
  /* ==============================
   recruit-sec end
   ============================== */
  /* ==============================
   concept-sec start
   ============================== */
  .concept-sec {
    position: relative;
    padding: 8vw 0 6vw;
    background-color: #F9F5F2;
  }
  .concept-in {
    width: 70vw;
    margin: 5vw auto;
  }
  /* タイトルは共通ttlに色だけ付与（サイズは共通のまま） */
  .concept-in .ttl {
    margin: 0 0 5rem 0;
    font-size: 2.8rem;
  }
  /* 2カラム：左テキスト／右写真（PC想定） */
  .concept-grid {}
  /* 本文：共通 .lead のタイポを流用。幅と段落間だけ制御 */
  .concept-words {
    max-width: 52vw;
  }
  .concept-words .lead {
    margin: 0 0 1.2rem 0.5rem;
    letter-spacing: 0.15rem;
    color: #3b3735;
  }
  /* 写真：右下寄せの印象を出す */
  .concept-photo {
    position: absolute;
    right: 10vw; /* 画像の左外側に回り込む配置 */
    bottom: 0;
    justify-self: end;
    align-self: end;
    width: 32vw;
    overflow: hidden;
  }
  .concept-photo img {
    width: 100%;
    height: auto;
    display: block;
  }
  /* ==============================
   concept-sec end
   ============================== */

}
/*//////////SPサイズ///////////*/
/*//////////SPサイズ///////////*/
@media screen and (max-width:767px) {
  /* ==============================
 * ファーストビュー (SP) start
 * ============================== */
  .MainVisualSection {
    position: relative;
    width: 100vw;
    height: 100vh; /* 全画面の迫力は維持 */
    max-height: 100vh;
    overflow: hidden;
    background-color: #333;
  }
  /* ===== 動画背景 ===== */
  .MainVisualSection__video-bg {
    position: absolute;
    inset: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    overflow: hidden;
  }
  .MainVisualSection__video-bg video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  /* ★ 黒オーバーレイ */
  .MainVisualSection__overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: 2;
    pointer-events: none;
  }
  /* ===== ブランドMOVIEリンク・コピー配置 ===== */
  .MainVisualSection__content {
    position: absolute;
    inset: 0;
    z-index: 3;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    pointer-events: none;
  }
  .MainVisualSection__brand-movie {
    align-self: flex-start;
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: 2;
    pointer-events: auto;
    /* PCの40px相当はSPでは安全域優先でvwに置換 */
    margin: 0;
    left: 4vw;
    bottom: 4vw;
  }
  /* ブランドムービーボタン */
  .MainVisualSection__brand-link img {
    width: 22vw; /* タップしやすいサイズへ */
    height: auto;
  }
  /* ライトボックスのスタイル */
  .VideoLightbox {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.8);
    z-index: 9999;
    align-items: center;
    justify-content: center;
  }
  .VideoLightbox.is-active {
    display: flex;
  }
  .VideoLightbox__inner {
    position: relative;
    max-width: 90vw;
    max-height: 80vh;
  }
  .VideoLightbox__inner video {
    width: 100%;
    max-width: 90vw; /* 1280px → 90vw に置換 */
    height: auto;
    display: block;
  }
  .VideoLightbox__close {
    position: absolute;
    top: .8rem; /* -2.5remはSPで押しづらいので内側固定 */
    right: .8rem;
    font-size: 1.6rem;
    color: #fff;
    background: none;
    border: none;
    cursor: pointer;
    z-index: 10000;
  }
  .MainVisualSection__brand-link:hover {
    opacity: 0.8;
  }
  .MainVisualSection__copy {
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* 可読性優先で左揃え */
    position: absolute;
    right: 4vw; /* 余白を左右均等に */
    left: 4vw;
    bottom: 12vh; /* 指の届きやすさ＋安全域 */
    margin: 0;
    z-index: 2;
    pointer-events: auto;
  }
  .MainVisualSection__en.serif {
    font-family: 'Noto Serif JP', serif;
    font-size: calc(92vw / 14);
    font-weight: 100;
    width: 92vw; /* 40vw → 端末幅にフィット */
    color: #fff;
    letter-spacing: .12rem; /* 0.2remはやや詰める */
    text-shadow: 0 .125rem 1.125rem rgba(0, 0, 0, 0.18); /* 0 2px 18px → rem換算 */
    line-height: 1.8; /* 190% → 実数で整える */
  }
  /* 受け文（タイトル下の本文） */
  .MainVisualSection__lead {
    margin: 1rem 0 0 0; /* 2rem → 1rem */
    width: 92vw; /* 40vw → 92vw */
    color: #fff;
    font-family: 'Noto Serif JP', serif;
    font-size: calc((92vw - (.06rem * 24)) / 25); /* = (W - letter-spacing*(n-1)) / n */
    line-height: 1.9;
    letter-spacing: .06rem;
    text-shadow: 0 .125rem 1.125rem rgba(0, 0, 0, 0.18);
  }
  /* ==============================
 * ファーストビュー (SP) end
 * ============================== */
 /* ==============================
   think (SP) start
============================== */
.think {
  position: relative;
  background-color: #F9F5F2;
  padding: 4rem 0 4rem;            /* 8rem → 4rem に圧縮 */
  text-align: center;
  overflow: hidden;                 /* アール装飾のはみ出し防止 */
}

/* 下端アール（次セクション色を想定） */
.think::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -1.5vw;                  /* 形状はPC踏襲 */
  transform: translateX(-50%);
  width: 120%;
  height: 3vw;
  background: #93815f;             /* 次セクション背景に合わせて調整可 */
  border-radius: 50% 50% 0 0 / 100% 100% 0 0;
  z-index: 0;
  pointer-events: none;
}

/* このセクション固有の余白・サイズ（色は共通クラスで制御） */
.think .tag {
  width: auto;                     /* 既定：87vw / 両端6.5vw */
  margin: 0 auto 1.2rem auto;      /* 2rem → 1.2rem */
}
.think .ttl {
  width: 87vw;
  margin: 0 auto 1rem auto;
  font-size: 1.5rem;               /* ビルドSP：見出し固定 */
  line-height: 1.4;                /* 見出しは1.4目安（本文は1.8） */
}
.think .sub {
  width: 87vw;
  font-family: 'Jost', sans-serif;
  font-size: 1.0rem;               /* ビルドSP：本文扱い */
  line-height: 1.8;
  letter-spacing: .06em;
  color: #7b6a58;
  margin: 0 auto 2.4rem auto;      /* 3rem → 2.4rem */
}
.think .btn-wrap {
  width: 87vw;
  margin: 0 auto 3.2rem auto;      /* 4rem → 3.2rem */
}

/* 画像3枚 → SPも横3カラム */
.think .imgs {
  width: 87vw;                     /* 80vw → 87vw（規定幅） */
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 3カラム指定 */
  gap: 1rem;                       /* モバイルでの余白を最適化 */
  align-items: end;                /* PCの下端揃えを踏襲 */
}
.think .img img {
  display: block;
  width: 100%;
  height: auto;
}
/* ==============================
   think (SP) end
============================== */
/* ==============================
   reason (SP) start
============================== */
.reason {
  background-color: #93815f;
  padding: 4rem 0;            /* PC:5rem → SP基準4rem */
  color: #f2ece2;
}

.reason__in {
  width: 87vw;                /* 既定：左右6.5vw */
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr; /* 2カラム → 1カラム */
  gap: 1.6rem;                /* 縦積みの行間 */
  align-items: start;
}

.reason__txt {
  width: 100%;                /* 70% → 全幅で可読性優先 */
  margin: 0 auto;
}

.reason .tag {
  margin: 0 0 1rem 0;
}

.reason .ttl {
  /* ビルドSP：見出しは 1.6rem 固定（役割がある特大見出しは別途指示で調整） */
  font-size: 1.5rem;
  line-height: 1.4;
  margin: 1.2rem 0 1.6rem 0;  /* 余白やや圧縮 */
}

.reason .lead {
  /* ビルドSP：本文1.0rem／行間1.8 */
  width: 100%;
  margin-bottom: 2rem;        /* 2.5rem → 2rem */
  font-size: 1.0rem;
  line-height: 1.8;
}

.reason .btn-wrap {
  margin-top: 2rem;           /* 2.2rem → 2rem */
}

/* 右側の画像（SPでは縦並びの下段想定） */
.reason__img {
  position: relative;
  overflow: hidden;
}

.reason__img img {
  width: 100%;                /* 108% → 100%（はみ出し防止） */
  height: auto;               /* 100% → 自然比率 */
  object-fit: cover;
  object-position: center 40%;
  display: block;
}
/* ==============================
   reason (SP) end
============================== */
/* ==============================
   frame (SP) start
============================== */
.frame {
  position: relative;
  background: #93815f;
  overflow: hidden; /* 装飾のはみ出しで横スクロール防止 */
}

/* 背景：セクション全体をカバー（高さはコンテンツに追従） */
.frame-bg {
  position: absolute;
  inset: 0; /* top:0 right:0 bottom:0 left:0 */
  background: url("../images/img5.webp") center / cover no-repeat; /* ← パス修正 */
  clip-path: polygon(0 16vw, 100% 0%, 100% 100%, 0% 100%);
  z-index: 1;
}

/* 背景の読みやすさ向上（不要なら削除OK） 
.frame-bg::before{
  content:"";
  position:absolute;
  inset:0;
  background: rgba(0,0,0,.35);
}*/

/* 左右の三角は背景より前・本文より後ろに重ねる */
.frame-triL,
.frame-triR {
  position: absolute;
  top: 0;
  width: 50vw;
  height: 16vw;
  z-index: 2;
  pointer-events: none;
}
.frame-triL {
  left: 0;
  background: #f9f6f2;
  clip-path: polygon(0 0, 0% 100%, 100% 50%);
}
.frame-triR {
  right: 0;
  background: rgba(249, 246, 242, .10);
  clip-path: polygon(100% 0, 100% 100%, 0 50%);
}

/* 前面コンテンツ：この余白でセクション高さが決まる */
.frame-in {
  position: relative;
  z-index: 3; /* 背景＆三角より前 */
  width: 87vw;                 /* ビルドSP既定：左右6.5vw */
  margin: 0 auto;
  padding: 20vw 0 6vw;         /* 斜めエリア回避（上）／カード分の余白（下） */
  text-align: center;
}
.frame-in .tag {
  margin-bottom: 1rem;         /* 2rem → 1rem */
}
.frame-in .ttl {
  margin-bottom: 1.2rem;
  font-size: 1.6rem;           /* 見出し 1.6rem 固定 */
  line-height: 1.4;
}
.frame-in .lead {
  width: 87vw;                 /* 65vw → 読幅を端末基準に */
  margin: 0 auto 2.2rem;
  font-size: 1.0rem;           /* 本文 1.0rem 固定 */
  line-height: 1.8;            /* 行間 1.8 固定 */
}

/* 9つのポイント（上5 / 下4 を中央揃え） */
.points {
  width: 87vw;                 /* 100vw → 87vw（安全域確保） */
  margin: 10vw auto;
  display: flex;
  flex-direction: column;
  gap: calc(1.5rem/3);                 /* 上下段の間隔 */
}

/* 段のグリッド：SPは1列 */
.points-row {
  display: grid;
  grid-template-columns: 1fr; /* 2列 → 1列 */
  gap: 0.5rem;
  justify-items: stretch;
  align-items: stretch;
}

.pt {
  width: 100%;                 /* 固定幅解除（グリッドに委ねる） */
  padding: 1.5rem 1.2rem;
  border: .06rem solid rgba(255, 255, 255, .6); /* 1px相当 → rem化 */
  border-radius: 1rem;
  color: #fff;
  background: rgba(255, 255, 255, .06);
  backdrop-filter: blur(.125rem); /* 2px → rem化（約0.125rem） */
  text-align: left;           /* 中央寄せは維持 */
}

.pt .num {
  display: inline-block;
  padding-right: 1rem;
  font-family: 'Noto Serif JP', serif;
  font-weight: 100;
  font-size: 2.4rem;           /* 強調は維持しつつSP最適化 */
  line-height: 1;
  margin-bottom: 0;            /* 下マージンは不要（横並び） */
  opacity: .9;
  vertical-align: middle;      /* ← 上下中央揃え */
}

.pt .cap {
  display: inline-block;
  line-height: 1.8;            /* ビルドSP：本文同等 */
  font-size: 1.0rem;           /* 0.95rem → 1.0rem に揃える */
  font-weight: 200;
  vertical-align: middle;      /* ← 上下中央揃え */
}
/* ==============================
   frame (SP) end
============================== */
/* ==============================
   arch (SP) start
============================== */
.arch {
  position: relative;
  background: #5d5b64; /* セクション地（ダークグレー） */
  color: #f2ece2;
  padding: 4rem 0;            /* 8vw 0 6vw → SP基準へ圧縮 */
  overflow: hidden;
}

/* 左上の斜めパーツ（ご指定） */
.arch-deco {
  position: absolute;
  top: 0;
  left: 0;
  width: 50vw;
  height: 20vw;
  background: rgba(140, 163, 184, 0.4); /* 8ca3b8 を透明度40%に */
  clip-path: polygon(0 0, 100% 0, 0 100%);
  z-index: 1;
}

/* ARCHITECTURE 見出し（装飾扱い：モバイルではvwでスケール） */
.arch-title {
  width: 100%;
  text-align: center;
  font-family: 'Jost', sans-serif;
  font-weight: 400;                 /* すっきり細め */
  font-size: 7vw;                  /* 7.5rem → 装飾として大きさ維持（可変） */
  letter-spacing: 0.25rem;
  line-height: 1;
  color: #d7cfb4;                   /* 既存のベージュ系 */
  pointer-events: none;             /* 装飾なのでクリックを透過 */
  padding-bottom: 6vw;              /* 5vw → わずかに調整 */
}

.arch__in {
  position: relative;
  z-index: 2;
}

/* 上段：左右2分割 → SPでは縦積み */
.arch-top {
  display: grid;
  grid-template-columns: 1fr;       /* 1fr 1fr → 1カラム */
  gap: 1.6rem;                      /* 3vw → 可読性基準 */
  align-items: start;
  width: 100vw;                      /* 85vw → 既定幅 */
  margin: 0 auto 2.4rem;            /* 4vw → 2.4rem */
}

/* 左肩の“矢印＋テキスト”（専用） */
.arch-label {
  display: flex;
  align-items: center;
  gap: 1.2rem;                      /* 1.8rem → 圧縮 */
  margin: 0 0 1rem;
}
.arch-label__ico {
  width: 1.3rem;
  height: 2rem;
  background: #eadfbd;              /* ベージュ系 */
  /* 六角矢印っぽい形（▶に近い） */
  clip-path: polygon(100% 0, 70% 50%, 100% 100%, 0 100%, 0 0);
}
.arch-label__txt {
  font-family: 'Noto Serif JP', serif;
  font-weight: 600;
  font-size: 1.5rem;                /* ビルドSP基準（PC1.8rem→調整） */
  color: #fff;
  letter-spacing: .1em;
}

/* 画像汎用 */
.arch-img {}
.arch-img img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 上段：左メイン画像 */
.arch-img--main {
  width: 100%;
  aspect-ratio: 16 / 10;            /* アスペクト比固定 */
  height: auto;                      /* 高さは自動算出 */
  object-fit: cover;                 /* 画像が枠にフィットするよう調整 */
}

.arch-topR {
  width: 87vw;                       /* 35vw → セクション幅に合わせる */
  margin: 0 auto;
  text-align: center;
}

/* 右カラム（ロゴ＋本文） */
.arch-topR .ttl {
  margin: 1.2rem 0 1rem;
  font-size: 1.6rem;                 /* 見出し 1.6rem 固定 */
  line-height: 1.4;                  /* 見出しはやや詰め */
}
.arch-topR .lead {
  margin-bottom: 1.6rem;             /* 2rem → 圧縮 */
  font-size: 1.0rem;                  /* 本文 1.0rem 固定 */
  line-height: 1.8;                   /* 行間 1.8 固定 */
}
.arch-logo {
  margin-bottom: 1rem;
}
.arch-logo img {
  display: block;
  width: 40vw;                        /* 20vw → タップ/視認性向上 */
  height: auto;
  margin: 0 auto;
}

/* 下段：1/3 と 2/3 → SPでは縦積み */
.arch-bottom {
  width: 87vw;                        /* 85vw → 既定幅 */
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;         /* 1fr 2fr → 1カラム */
  gap: 1.2rem;                        /* 1vw → 可読性基準 */
  align-items: stretch;
}
.arch-btmL {
  display: grid;
  gap: 1.2rem;                        /* 1vw → 可読性基準 */
}
/* SPでは高さ固定をやめ、比率で統一 */
.arch-btmL .arch-img {
  width: 100%;
  aspect-ratio: 16 / 10;              /* 19vw → 比率管理へ */
}
.arch-btmR {
  width: 100%;
  aspect-ratio: 16 / 10;              /* 39vw → 比率管理へ */
}
/* ==============================
   arch (SP) end
============================== */
/* ==============================
   arch-sec (SP) start
============================== */
.arch-sec {
  background: #5d5b64;            /* セクション地 */
  color: #f2ece2;
  padding: 0 0;                /* 5vw 0 5vw 10vw → 中央配置の標準余白へ */
}

.arch-sec .arch-inner {
  width: 87vw;                    /* 90vw → 既定（左右6.5vw） */
  margin: 0 auto ;
}

/* 帯パネル */
.arch-panel {
  background: #6f6660;            /* 見本の少し明るい帯色 */
  padding: 1.5rem 0 1.5rem 0;                /* 3vw 4vw → 読みやすいrem基準 */
  position: relative;
}

/* ラベル＋moreを同一行（折り返し許容） */
.arch-panel__head {
  display: flex;
  align-items: center;
  justify-content: space-between; /* ラベルは左／moreは右 */
  gap: 1rem;                      /* 5vw → モバイル最適化 */
  flex-wrap: wrap;                /* 幅が足りない場合は改行 */
  margin : 0 1rem 0;            /* 1.4vw → 1rem */
}

/* 見出し・タグ（セクション内の共通文字サイズ適用） */
.arch-sec .ttl{
  font-size: 1.6rem;              /* ビルドSP：見出し */
  line-height: 1.4;
  margin: 1.2rem 0 1rem 0;
}
.arch-sec .tag{
  margin: 0 0 .8rem 0;
}

/* 説明文（lead） */
.arch-sec .arch-lead {
  margin-top: 0rem;              /* .6vw → .6rem */
  margin-bottom: .6rem;
  opacity: .96;
  font-size: 1.0rem;              /* ビルドSP：本文 */
  line-height: 1.8;               /* ビルドSP：行間 */
}

/* 画像ラッパ。帯→画像の“斜め段差” */
.arch-imgwrap {
  width: 100%;
  margin-top: 0;                  /* 帯直下に密着 */
  position: relative;
}

/* クレジット（画像右下） */
.arch-credit {
  position: absolute;
  right: 1.2vw;
  bottom: 1.2vw;
  height: 1.2rem;                   /* 視認性を維持 */
  width: auto;
  display: block;
  z-index: 5;
  pointer-events: none;           /* 画像クリックを邪魔しない */
  /* 必要に応じて影：
     filter: drop-shadow(0 .1rem .6rem rgba(0,0,0,.25)); */
}

/* 帯と同色の斜め段差（高さは形状維持） */
.arch-imgwrap::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -2.8vw;                    /* 帯の上端と噛み合わせ */
  height: 2.8vw;
  background: #6f6660;            /* 帯と同色 */
  clip-path: polygon(0 75%, 100% 0, 100% 100%, 0% 100%);
}

/* 画像は16:10固定（vwベースで伸縮） */
.arch-img--main {
  width: 100%;
  aspect-ratio: 16 / 10;
  height: auto;
  object-fit: cover;
  display: block;
}

/* パネル右端に配置する場合のボタン最適化（任意） */
.arch-panel__head .btn-more{
  font-size: 1.0rem;              /* タップ時の視認性 */
  padding: .9rem 1.4rem;
  border-width: .12rem;
}
/* ==============================
   arch-sec (SP) end
============================== */
/* ==============================
   arch-duo (SP) start
============================== */
.arch-duo {
  position: relative;
  background: #5d5b64;              /* セクションの地色（共通） */
  overflow: hidden;                  /* 三角形がはみ出さないように */
  padding: 4rem 0;                   /* 6vw 10vw 8vw 0 → 標準余白へ */
}

.arch-duo-triangle {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 50vw;
  height: 20vw;
  background: rgba(140, 163, 184, 0.4);  /* #8ca3b8 を透明度40% */
  clip-path: polygon(100% 0, 0% 100%, 100% 100%);
  z-index: 1;
}

.arch-duo__in {
  width: 87vw;                       /* 90vw → 既定（左右6.5vw） */
  background: #8ca3b8;
  margin: 0 auto;
  padding: 0;                   /* 5vw → rem基準に */
  display: grid;
  grid-template-columns: 1fr;        /* 1fr 1px 1fr → 1カラム */
  align-items: start;
  row-gap: 1.6rem;                   /* 段間 */
  column-gap: 0;
  z-index: 2;
}

/* 仕切り線：横罫線へ */
.arch-duo__divider {
  width: 90%;
  margin: auto;
  height: .1rem;                    /* 1px相当をrem化 */
  background: rgba(255, 255, 255, .35);
  opacity: .7;
}

/* カード本体（左右同仕様） */
.arch-card {
  padding: 1.5rem 0;                   /* 3vw 4vw → rem基準 */
}

/* ラベルは共通 arch-label を流用。余白だけ調整（ビルドSP：見出し=1.6rem） */
.arch-card .arch-label {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  margin-bottom: 1rem;               /* 1.6vw → 1rem */
}
.arch-card .arch-label__txt {
  font-family: 'Noto Serif JP', serif;
  font-weight: 600;
  font-size: 1.5rem;                 /* 見出し規定 */
  letter-spacing: .1em;
}

/* 写真：16:10で統一（vwベース→比率で可変） */
.arch-card__ph {
  margin-top: 1.2rem;             /* 1.8vw → 1.2rem */
  margin-bottom: 1.2rem;             /* 1.8vw → 1.2rem */
  background: rgba(255, 255, 255, .1);
}
.arch-card__ph img {
  width: 100%;
  aspect-ratio: 16 / 10;
  height: auto;
  object-fit: cover;
  display: block;
}

/* リードは共通 .lead を踏襲（サイズ・行間）＋余白調整 */
.arch-card__lead {
  margin: 1.6rem;             /* 2.0vw → 1.6rem */
  font-size: 1.0rem;                 /* 本文規定 */
  line-height: 1.8;                   /* 行間規定 */
}
.btn-wrap{
  margin: 0 1.6rem; 
}
/* ==============================
   arch-duo (SP) end
============================== */
/* ==============================
   gallery-sec (SP) start
   ============================== */
.gallery-sec {
  position: relative;
  background: #f4efe9;
  padding: 4rem 0;                    /* 6vw 0 10vw → SP基準 */
  overflow: hidden;
}

.gal-in {
  width: 87vw;                        /* 85vw → 既定：87vw */
  margin: 0 auto 2.4rem auto;         /* 5vw → 2.4rem */
}

.gal-head {
  position: relative;
}

.gal-head .lead {
  width: 87vw;                        /* 55vw → 87vw */
  font-size: 1.0rem;                  /* ビルドSP：本文 */
  line-height: 1.8;                   /* ビルドSP：行間 */
}

/* ▼ タグ＋見出し：中央ラインで揃える（狭幅は折り返し許容） */
.gal-hrow {
  display: flex;
  align-items: center;
  column-gap: 1rem;                   /* 2vw → 1rem */
  row-gap: .6rem;
  flex-wrap: wrap;                    /* nowrap → wrap */
}
.gal-hrow .ttl {
  font-size: 1.5rem;  
  margin: 1rem 0;
}
/* 背景「GALLERY」：装飾扱いでvwスケール */
.gal-mark {

  top: -16vw;                          /* -3vw → 微調整 */
  right: -5%;
  font-weight: 500;
  font-size: 16vw;                    /* 7.5rem → 16vw */
  line-height: 1;
  letter-spacing: 0.25rem;
  color: rgba(174, 159, 135, .35);
  pointer-events: none;
  user-select: none;
  white-space: nowrap;
  font-family: 'Jost', sans-serif;
}

/* 共通ボタンの位置だけ制御（必要に応じてwrapで下へ回る） */
.gal-more-pos {

margin: 2rem 0;
}

/* カード一覧：SPは2カラム */
.gal-cards {
  display: grid;
  grid-template-columns: repeat(1, 1fr); /* 3 → 2 */
  gap: 3rem;                              /* 3vw → 1rem */
  margin-top: 1.8rem;                     /* 3.6vw → 1.8rem */
}

.card .card-lk {
  display: block;
  text-decoration: none;
  color: inherit;
}

.ph {
  position: relative;
  aspect-ratio: 16/9;
  overflow: hidden;
  background: #ddd;
}
.ph img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* 角飾り（要素方式） */
.ph_tryangle {
  width: 8vw;
  height: 8vw;
  position: absolute;
  top: 0%;
  left: 0%;
  clip-path: polygon(0 0, 0% 100%, 100% 0);
  background: #947847;
}

/* テキスト塊 */
.card .txt {
  padding: 1rem 0 .6rem;               /* 1.2vw → 1rem */
}

/* カード見出し（.ttlは使わないデザイン想定） */
.gal-card__ttl {
  font-weight: 700;
  color: #947847;
  line-height: 1.6;
  letter-spacing: .02em;
  font-size: 1.2rem;                   /* カード見出しは役割上やや大きめ維持 */
  margin: 0 0 .4rem 0;                 /* .4vw → .4rem */
  font-family: 'Noto Sans JP', sans-serif;
}

/* 補助テキスト */
.gal-card__meta {
  color: #6f6556;
  font-size: 1.0rem;                   /* .95rem → 1.0rem（本文規定に揃え） */
  line-height: 1.8;                    /* 1.9 → 1.8（規定） */
}

/* 下端の斜め帯（形状はvwで維持） */
.gal-slope {
  position: absolute;
  left: 0;
  bottom: -0.5%;
  width: 100%;
  height: 10vw;
  background: #7b6a4f;
  clip-path: polygon(100% 50%, 100% 100%, 0 100%, 0 50%, 50% 0);
  z-index: 0;
}

/* レイヤー順 */
.gal-head,
.gal-cards {
  position: relative;
  z-index: 2;
}
/* ==============================
   gallery-sec (SP) end
   ============================== */
/* ==============================
   support-sec (SP) start
   ============================== */
.support-sec {
  position: relative;
  background: #7b6a4f; /* セクション最背面色 */
  overflow: hidden;
  padding: 28vw 0 15vw 0 ;            /* 2vw 0 6vw → SP基準の上下余白 */
}

.sup-in {
  width: 87vw;                /* 100vw → 既定：87vw（左右6.5vw） */
  margin: 0 auto;
  position: relative;
}

/* 2カラム → SPは縦積み */
.sup-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.6rem;                /* 3vw → 可読性優先 */
  align-items: start;
  position: relative;         /* レイヤー順：本文と写真を最前面に */
  z-index: 2;
}

/* 左テキスト：インデント解除 */
.sup-words {
  padding-left: 0;            /* 11vw → 0 */
}
.sup-words .ttl {
margin: 1rem 0;
}
/* 共通ボタンは位置だけ調整（装飾は共通に委譲） */
.sup-more-pos {
  display: inline-flex;
  margin: 2.5rem 0 1rem 0;         /* 2.8vw → 1.6rem */
}

/* 右の写真：比率固定で安定 */
.sup-photo {
  position: relative;
  aspect-ratio: 16 / 10;
  background: #ccc;
  overflow: hidden;
}
.sup-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* 背景の縦大文字 SUPPORT（装飾） */
.sup-mark {
  position: absolute;
  right: 0;                    /* 1.6vw → 0（内部に寄せる） */
  top: -3rem;
  transform: translateY(-50%);
  font-weight: 500;
  font-size: 14vw;            /* 7.5rem → 装飾はvwでスケール */
  letter-spacing: 0.05em;
  line-height: 1;
  color: rgba(255, 255, 255, .25);
  z-index: 0;
  pointer-events: none;
  user-select: none;
}

/* ==support-sec spacing (tag/ttl/lead) start== */
.sup-words .tag {
  margin: 0 0 1rem;           /* 1vw → 1rem */
}
.sup-words .ttl {
  margin: 0 0 1.2rem;         /* 1.5vw → 1.2rem */
  font-size: 1.5rem;          /* ビルドSP：見出し */
  line-height: 1.4;
}
.sup-words .lead {
  margin: 0;                  /* 下は .sup-more-pos で確保 */
  font-size: 1.0rem;          /* ビルドSP：本文 */
  line-height: 1.8;           /* ビルドSP：行間 */
}
/* ==support-sec spacing (tag/ttl/lead) end== */
/* ==============================
   support-sec (SP) end
   ============================== */
/* ==============================
   company-sec (SP) start
   ============================== */
.company-sec {
  position: relative;
  background: transparent;
  padding: 4rem 0 1rem 0;                 /* 6vw → SP基準 */
  overflow-x: hidden;              /* 横スクロール防止は維持 */
}

.cmp-in {
  width: 87vw;                     /* 100vw → 既定：87vw（左右6.5vw） */
  margin: 0 auto 2.4rem auto;      /* 5vw → 2.4rem */
}

/* 2カラム → SPは縦積み */
.cmp-grid {
  display: grid;
  grid-template-columns: 1fr;      /* 50vw 50vw → 1カラム */
  gap: 1.6rem;                     /* 8vw → 1.6rem */
  align-items: start;
}

/* Map */
.cmp-map__frame {
  position: relative;
  aspect-ratio: 1.2 / 1;           /* 指定どおり */
  background: #ddd;
  overflow: hidden;
}
.cmp-map__frame iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* Words */
.cmp-words .tag {
  margin: 0 0 1rem;
}
.cmp-words .ttl {
  font-size: 1.6rem;               /* ビルドSP：見出し */
  line-height: 1.4;
  margin: 0 0 1.2rem;
}
.cmp-name {
  margin: 0 0 1.2rem;              /* 2.4vw → 1.2rem */
}

/* ロゴは視認性確保のため拡大（役割優先） */
.cmp-logo {
  width: 65vw;                     /* 25vw → SP最適化 */
  height: auto;
  display: block;
}

/* 住所・リンク・電話 */
.cmp-addr {
  font-style: normal;
  font-size: 1.0rem;               /* ビルドSP：本文 */
  line-height: 1.8;                /* ビルドSP：行間 */
}
.cmp-addr__line {
  margin: 0 0 1rem;
  color: #221a19;
}
.cmp-addr__map,
.cmp-addr__tel {
  display: flex;
  align-items: center;             /* 垂直中央 */
  column-gap: .8rem;
  margin: 0 0 1rem;
  color: #221a19;
  line-height: 1.8;
  font-size: 1.0rem;
}
.ico-img {
  width: 1.2rem;
  height: auto;
  display: block;                  /* baseline影響を排除して中心に */
}
.cmp-addr__map a {
  color: inherit;
  text-decoration: underline;
}

/* 電話・営業時間の間隔 */
.cmp-tel {
  margin-right: 1rem;
  font-size: 1.3rem;               /* 役割上の視認性を維持 */
}

/* moreボタン位置（装飾は共通に委譲） */
.cmp-more-pos {
  display: inline-flex;
  margin-top: 1.6rem;              /* 2.8vw → 1.6rem */
}
/* 電話行：1行目＝アイコン＋電話番号／2行目＝受付時間 */
.cmp-addr__tel{
  display: grid;                          /* flex → grid */
  grid-template-columns: auto 1fr;        /* col1: アイコン / col2: テキスト */
  grid-template-rows: auto auto;          /* row1: 電話 / row2: 受付時間 */
  column-gap: .8rem;
  row-gap: .2rem;
  align-items: center;
  margin: 0 0 1rem;                       /* 既存値を維持 */
  color: #221a19;
  line-height: 1.8;
  font-size: 1.0rem;
}

.cmp-addr__tel .ico-img{
  grid-column: 1;
  grid-row: 1;                             /* 1行目（電話の行）に配置 */
  width: 1.2rem;
  height: auto;
  display: block;                          /* baseline影響を排除 */
}

.cmp-addr__tel .cmp-tel{
  grid-column: 2;
  grid-row: 1;                             /* 1行目：電話番号 */
  margin-right: 1rem;                      /* 既存の強調余白は維持（不要なら0に） */
  font-size: 1.3rem;                       /* 視認性優先（役割あり） */
}

.cmp-addr__tel .cmp-hours{
  grid-column: 2;
  grid-row: 2;                             /* 2行目：受付時間のみ（アイコンはなし） */
}
/* ==============================
   company-sec (SP) end
   ============================== */
/* ==============================
   recruit-sec (SP) start
   ============================== */
.recruit-sec {
  position: relative;
  background: #eaddcd;           /* 必要なら調整可 */
  padding: 8rem 0;               /* 12vw 0 5vw → SP基準へ */
  overflow: hidden;
}

.rec-in {
  width: 100vw;                   /* 100vw → 既定：87vw（左右6.5vw） */
  margin: 0 auto;
  position: relative;
}

/* 背面画像 → SPは中央・比率固定で扱いやすく */
.rec-hero {
  width: 100%;                   /* 75vw → 全幅 */
  aspect-ratio: 10/ 12;         /* 38vw固定 → 比率管理へ */
  height: auto;
  margin-left: 0;                /* 25vw → 0（中央寄せ） */
  overflow: hidden;
  background: #cfcfcf;
}
.rec-hero img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* 大見出し RECRUIT（装飾） */
.rec-mark {
  position: absolute;
  left: 0rem;                       /* 6vw → 0（安全域内に） */
  top: -6rem;                        /* -5vw → 0（はみ出し回避） */
  font-weight: 500;
  font-size: 17vw;               /* 7.5rem → vwでスケール */
  line-height: 1;
  letter-spacing: 0.25rem;
  color: #6dbcc7;                /* 見本の青緑系 */
  pointer-events: none;
  user-select: none;
  white-space: nowrap;
  font-family: 'Jost', sans-serif;
  opacity: .40;                  /* 画面占有を抑える（任意） */
}

/* キャッチ行：SPは通常フローに配置（重なりを避ける） */
.rec-lines {
  position: absolute;      /* static → absolute に変更 */
  left: 0;                 /* .rec-in の左端から配置（87vw 内側） */
  top:90vw;               /* 重ね位置。必要に応じて 6–14vw で微調整 */
  width: 100vw;             /* 安全域に合わせる */
  display: grid;
  row-gap: 1rem;           /* 2vw → 1rem */
  margin-top: 0;           /* 画像下の余白は不要 */
  z-index: 3;              /* .rec-hero より前面へ */     /* 画像下に余白 */
}

/* 吹き出し（白帯） */
.rec-bubble {
  display: inline-block;
  margin: 0 auto;
  padding: 0.5rem 0.5rem;          /* 指定どおり */
  background: #fff;
  color: #2b2b2b;
  font-family: 'Noto Serif JP', serif;  /* 指定どおり */
  font-size: 1rem;             /* PC指定1.8rem → SP最適化（役割維持でやや大きめ） */
  line-height: 1.6;
  letter-spacing: .02em;
  width: max-content;
}
/* 2つ目のインデントはSPでは解除（行頭揃え） */
.rec-lines .rec-bubble:nth-of-type(2) {
  margin: 0 auto;
}

/* ボタン（CTA） */
.rec-btn {
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  margin: 1.6rem auto;            /* 2.6vw → 1.6rem */
  padding: 0.5rem 1.4rem 0.5rem 1rem;
  background: #fff;
  border: .15rem solid #99d3de;
  border-radius: 10rem;
  color: #1a1a1a;
  font-size: 1rem;            /* 指定どおり（CTAは役割上大きめ維持） */
  text-decoration: none;
  width: max-content;            /* 指定どおり */
}
.rec-btn__txt {
  padding: 0 2rem 0 1rem;
}
.rec-btn__ico {
  width: 2.2rem;
  height: 2.2rem;
  border-radius: 50%;
  background: #5fb6c6;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.rec-btn__ico img {
  width: 1.2rem;
  height: auto;
  display: block;
}
/* ==============================
   recruit-sec (SP) end
   ============================== */
/* ==============================
   concept-sec (SP) start
   ============================== */
.concept-sec {
  position: relative;
  padding: 12vh 0 0 0;      /* 8vw 0 6vw → SP基準 */
  background-color: #F9F5F2;
}

.concept-in {
  width: 87vw;               /* 70vw → 既定：87vw（左右6.5vw） */
  margin: 0 auto;            /* 5vw auto → 中央寄せのみ */
}

/* タイトルは共通ttlに色だけ付与（サイズはSP基準） */
.concept-in .ttl {
  margin: 0 0 2.5rem 0;      /* 5rem → 1.6rem */
  font-size: 1.6rem;         /* ビルドSP：見出し */
  line-height: 1.4;
  text-align: center;
}

/* 2カラム → SPは縦積み */
.concept-grid {}

/* 本文：共通 .lead のタイポを流用。幅と段落間だけ制御 */
.concept-words {
  max-width: 100%;           /* 52vw → 100% */
}
.concept-words .lead {
  margin: 0 0 0 0;    /* 1.2rem 0.5rem → 1rem .5rem */
  letter-spacing: .15rem;
  color: #3b3735;
  font-size: 1.0rem;         /* ビルドSP：本文 */
  line-height: 1.8;          /* ビルドSP：行間 */
  text-align: justify;
}

/* 写真：絶対配置 → 通常フローでテキスト下に配置 */
.concept-photo {
  position: static;          /* absolute → static */
  width: 100%;               /* 32vw → 100% */
  margin: 1.6rem 0 0;        /* テキストとの間隔を確保 */
  overflow: hidden;
  aspect-ratio: 1 / 1;     /* 比率固定で安定（必要に応じて変更可） */
}
.concept-photo img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}
/* ==============================
   concept-sec (SP) end
   ============================== */

}