/*
Theme Name: new-theme
Description: テーマの説明文です。
Author:	制作者名
Author URI: 制作者URL
Version: 1.0
*/

@charset "UTF-8";
/*==========================================================================
　共通設定
============================================================================ */
/* *{ outline: 3px solid red !important;} */
html {
    font-size: 100%;
    scroll-behavior: smooth;
}
body{
    position: relative;
    z-index: 1;
    margin-top: -32px;
    background-color: #DEDEDA;
    color: #333333;
    font-size: 0.9375rem;
    font-family:"Yu Gothic", "YuGothic", "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
}
body::after {
    position: absolute;
    inset: 0;
    z-index: -1;
    background: url("images/texture.webp") repeat;
    background-color: #DEDEDA;
    background-blend-mode: multiply;
    content: "";
}
img {
    max-width: 100%;
}
p{
    line-height: 1.6;
    letter-spacing: .05em;
}
.lato{
    font-style: normal;
    font-weight: 300;
    letter-spacing: .04em;
    font-family: "Lato", sans-serif;
}
.inner{
    width: 100%;
    max-width: 1250px;
    margin: 0 auto;
    padding: 100px 0;
}

/* セクションタイトル */
.sec-title{
    margin-bottom: 70px;
    color: #545450;
    font-weight: 300;
    font-size: 4.5rem;
    letter-spacing: .05em;
    font-family: "Lato", sans-serif;
}
.sec-title span{
    display: block;
    position: relative;
    color: #6b6764;
    font-size: 1.25rem;
    font-family:"Yu Gothic", "YuGothic", "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
    letter-spacing: .2em;
    padding-left: 25px;
}
.sec-title span::before{
    position: absolute;
    top: 7px;
    left: 5px;
    width: 8px;
    height: 8px;
    background-color: #B22222;
    content: "";
}
/* セクションタイトルアニメーション */
.sec-title.t-fadeup {
    opacity: 0;
    transition: all .6s ease;
    transform: translateY(30px);
}
.fadeUp.active .sec-title.t-fadeup {
    opacity: 1;
    transform: translateY(0);
}
/* ボタン */
.btn-next {
    display: inline-block;
    position: relative;
}
.btn-next a {
    display: inline-block;
    position: relative;
    padding: 20px 30px 20px 20px;
    color: #333;
    font-size: 1.1rem;
    letter-spacing: .17em;
}
/* 下線（常時＋アニメーション） */
.btn-next a::before {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 1px;
    background-color: currentColor;
    opacity: 0.3;
}
.btn-next a::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 1.07px;
    background-color: #B22222;
    transform: scaleX(0);
    transform-origin: right;
    transition: transform 0.3s ease;
}
.btn-next a:hover::after {
    transform: scaleX(1);
    transform-origin: left;
}
/* 矢印 */
.btn-next a span {
    position: relative;
    padding-right: 50px;
}
/* 横棒 */
.btn-next a span::before {
    content: "";
    position: absolute;
    right: 0px;
    top: 50%;
    width: 30px;
    height: 1px;
    background-color: #333;
    transition: right .3s ease, width .3s ease, background-color .3s ease;
    transform: translateY(-50%);
}
/* 斜め棒 */
.btn-next a span::after {
    content: "";
    position: absolute;
    right: 2px;
    top: 50%;
    width: 8px;
    height: 8px;
    border-top: 1.2px solid #333;
    transition: right .3s ease, border-top-color .3s ease;
    transform: translateY(-50%) rotate(35deg);
}
/* ホバー */
.btn-next a:hover span::before {
    width: 36px;
    right: -10px;
}
.btn-next a:hover span::after {
    right: -8px;
}
span.marker {
    /* background: linear-gradient(transparent 10%, #b97f7838 50%); */
    font-weight: bold;
    font-size: 1.1em;
    border-bottom: 1px solid #6b67649a;
}
.only-sp{
    display: none;
}
.only-pc{
    display: block;
}
/* ===== レスポンシブ（768px以下） ===== */
@media (max-width: 768px){
body{
    font-size: 0.75rem;
}
p{
    line-height: 1.4;
    font-size: 0.75rem;
}
.inner{
    max-width: 100%;
    padding: 90px 0!important;
}
/* セクションタイトル */
.sec-title{
    margin-bottom: 40px;
    margin-left: 30px;
    font-size: 2.4rem;
}
.sec-title span{
    font-size: 1rem;
}
.sec-title span::before{
    top: 7px;
    left: -10px;
    width: 5px;
    height: 5px;
}
/* ボタン */
.btn-next a {
    padding: 20px 30px 20px 20px;
    font-size: 0.75rem;
}
body{
    margin-top: -45px;
}
.only-pc{
    display: none;
}
.only-sp{
    display: block;
}
}

/*==========================================================================
　固定ヘッダー
============================================================================ */
header{
    position: fixed;
    top: 0;
    z-index: 1000;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 60px;
    height: 80px;
    width: 100%;
}
.logo a{
    display: grid;
    align-items: center;
    justify-items: start;
}
.logo a > img{
    grid-area: 1 / 1;
    width: 140px;
    height: auto;
    transition: opacity .5s ease;
}

/* 初期：白ロゴのみ表示 */
.logo-white{ opacity: 1; }
.logo-gray { opacity: 0; }
/* スクロール後：グレー表示 */
header.scrolled .logo-white{ opacity: 0; }
header.scrolled .logo-gray { opacity: 1; }

/* =========================
   グローバルナビ
   ========================= */
.global-nav-pc { display: flex; gap: 0; }
.global-nav-pc li{ position: relative; }

.global-nav-pc li a{
    color: #fff;
    font-size: 0.9rem;
    font-weight: bold;
    margin: 0 11px;
    padding: 10px 4px 0;
    position: relative;
    letter-spacing: .1em;
}
/* 下線アニメーション */
.global-nav-pc li a::after{
    position: absolute;
    left: 0;
    bottom: -10px;
    content: "";
    width: 100%;
    height: 1px;
    background: #fff;
    transform: scale(0, 1);
    transform-origin: right top;
    transition: transform .5s;
}
.global-nav-pc li a:hover::after{
    transform: scale(1, 1);
    transform-origin: left top;
}

/* 矢印マーク */
.dropdown-arrow{
    display: inline-block;
    vertical-align: middle;
    color: #fff;
    line-height: 1;
    width: 7.5px;
    height: 7.5px;
    margin-left: .65rem;
    border: 1.8px solid currentColor;
    border-left: 0;
    border-bottom: 0;
    box-sizing: border-box;
    transform: translateY(-25%) rotate(135deg);
    transition: transform .2s ease;
}

/* =========================
   ドロップダウン
   ========================= */
/* 初期は非表示（フェードでふわっと） */
.global-nav-pc .dropdown{
    position: absolute;
    left: 0;
    top: 100%;
    padding-top: 14px;
    opacity: 0;
    visibility: hidden;
    transform: none;
    pointer-events: none;
    min-width: 220px;
    transition: opacity .4s ease, visibility 0s linear .4s;
}

/* 中身の箱とリンク */
.global-nav-pc .dropdown ul{
    margin: 0;
    padding: 10px;
    background: #fff;
    border: 1px solid rgba(255,255,255,.15);
    box-shadow: 0 12px 30px rgba(0,0,0,.18);
    display: block;
}
.global-nav-pc .dropdown li a{
  display: block;
  font-weight: 600;
  padding: 10px 12px;
  margin: 0;
  color: #333;
  text-decoration: none;
}
/* サブメニューのリンクは下線アニメーションなし */
.global-nav-pc .dropdown li a::after{ content: none !important; }

.global-nav-pc .dropdown li a:hover{
    background: #f3f5f8;
    color: #111;
}

/* 表示トリガー（hover / キーボード） */
.has-sub:hover > .dropdown,
.has-sub:focus-within > .dropdown{
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition-delay: 0s;
}

/* =========================
    スクロール後（配色切替）
   ========================= */
header.scrolled .global-nav-pc li a{
    color: #494946;
}
header.scrolled .global-nav-pc li a::after{
    background: #494946;
}
header.scrolled .dropdown-arrow{
    color: #494946;
}


/* =========================
    ハンバーガーメニュー
   ========================= */
.burger-menu{
    display:none;
}

/* オープンボタン */
.menu-btn {
    position: fixed;
    top: 0;
    right: 0;
    display: flex;
    height: 70px;
    width: 70px;
    justify-content: center;
    align-items: center;
    z-index: 2100;
    border-radius: 0 0 0 10px;
    background-color: #ffffff8d;
}
/* クローズボタン */
.menu-btn span,
.menu-btn span:before,
.menu-btn span:after {
    content: '';
    display: block;
    height: 2px;
    width: 25px;
    border-radius: 3px;
    background-color: #545450;
    position: absolute;
}
.menu-btn span:before {
    bottom: 8px;
}
.menu-btn span:after {
    top: 8px;
}
.burger-menu{
    margin-left: 80px;
}

#menu-btn-check:checked ~ .menu-btn span {
    background-color: rgba(255, 255, 255, 0);/*メニューオープン時は真ん中の線を透明にする*/
}
#menu-btn-check:checked ~ .menu-btn span::before {
    bottom: 0;
    transform: rotate(45deg);
}
#menu-btn-check:checked ~ .menu-btn span::after {
    top: 0;
    transform: rotate(-45deg);
}
#menu-btn-check {
    display: none;
}



/* メインメニュー */
.menu-content-main{
    padding: 150px 15px 10px;
}
.menu-content-main li a {
    display: block;
    width: 100%;
    font-size: 0.85rem;
    box-sizing: border-box;
    color:#fff;
    background-color: rgb(138, 131, 121);
    padding: 15px;
    margin-bottom: 15px;
    border-radius: 5px;
    text-align: center;
}

/* アイコン */
.menu-content-main li a::before{
    content: "";
    display: inline-block;
    inline-size: 18px;
    block-size: 18px;
    margin-inline-end: 8px;
}
.menu-content-main li:nth-child(1) a::before {
    background: url("images/icon-book.svg") no-repeat center / contain;
}
.menu-content-main li:nth-child(2) a::before {
    background: url("images/icon-meet.svg") no-repeat center / contain;
}
.menu-content-main li:nth-child(3) a::before {
    background: url("images/icon-contact.svg") no-repeat center / contain;
}
/* サブメニュー */
.menu-content-sub {
    padding: 50px 15px;
}
.menu-content-sub > li > a{
    display: block;
    width: 100%;
    box-sizing: border-box;
    font-size: 0.85rem;
    color:#333;
    padding: 15px;
    font-family: "Lato", sans-serif;
    border-bottom: 1px solid rgb(183, 174, 160);
    margin-bottom: 30px;
}

.menu-content-sub li a span{
    font-size: 0.625rem;
    margin: 15px 0 15px 20px;
    font-size: 0.8125rem;
    letter-spacing:.1em;
}
/* サブサブメニュー */
.menu-content-sub-sub-menu{
    margin-bottom: 35px;
}
.menu-content-sub-sub-menu li{
    position: relative;
    margin-left: 20px;
    margin-bottom: 20px;
}
.menu-content-sub-sub-menu li::before{
    content: "-";
    width: 10px;
    height: 10px;
    position: absolute;
    top: 0;
    left: -10px;
}



/* オンオフ */
.menu-content {
    overflow-y: auto;
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 100%;/*leftの値を変更してメニューを画面外へ*/
 z-index: 2000;
    background-color: #DEDEDA;
    transition: all 0.5s;/*アニメーション設定*/
}
#menu-btn-check:checked ~ .menu-content {
    left: 0;
}
/* 会社情報 */
.hamburger-company .logo img{
    width: 120px;
    margin: 50px 0 20px;
}
.hamburger-company .company-name{
    font-size: 1rem;
    margin-bottom: 20px;
}
.hamburger-company .company-info{
    margin-bottom: 8px;
    line-height: 1.4;
}
.hamburger-company .icon-insta{
    margin: 40px 0;
}
.hamburger-company .hamburger-bottom{
    display: flex;
    gap: 30px;
    margin-bottom: 50px;
}
.hamburger-company .hamburger-bottom li a{
    display: block;
    padding:20px 0;
}



/* ===== レスポンシブ（768px以下） ===== */
@media (max-width: 768px){
    /* ハンバーガーメニュー */
    .burger-menu{
        display:flex;
    }
    .global-nav-pc {
        display: none;
    }
    header{
        padding: 0 15px 0 20px;
    }
    .logo a > img{
        width: 80px!important;
    }
    .global-nav-pc li a{
        margin: 0 0 15px;
    }
    
}

/*==========================================================================
固定サイドバー 縦
============================================================================ */
.follow-btn{
    position: fixed;
    bottom: 190px;
    right: 0;
    font-size: 0.87rem;
    z-index: 999;
}
.follow-btn ul li{
    color: #fff;
    background-color: rgb(138, 131, 121);
    transition: background-color 0.6s ease, opacity 0.3s ease;
    margin-bottom: 8px;
    border-radius: 4px 0 0 4px;
}
.follow-btn ul li a{
    display: inline-flex;
    align-items: center;
    writing-mode: vertical-rl;
    padding: 20px 15px;
    font-size: 0.87rem;
    letter-spacing: 0.08em;
}
.follow-btn ul li:hover{
    background-color: rgb(112, 106, 97);
}

/* アイコン */
.follow-btn ul li a::before{
    content: "";
    display: inline-block;
    inline-size: 18px;
    block-size: 18px;
    margin-inline-end: 8px;
}
.follow-btn ul li:nth-child(1) a::before {
    background: url("images/icon-book.svg") no-repeat center / contain;
}
.follow-btn ul li:nth-child(2) a::before {
    background: url("images/icon-meet.svg") no-repeat center / contain;
}
.follow-btn ul li:nth-child(3) a::before {
    background: url("images/icon-contact.svg") no-repeat center / contain;
}

/* ===== レスポンシブ（768px以下） ===== */
@media (max-width: 768px){
    .follow-btn{
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1000;
    }
    .follow-btn ul{
        display: flex;
        gap: 0px;
        justify-content: space-between;
    }
    .follow-btn ul li{
        flex: 1 1 0;
        margin: 0;
        background-color: rgb(138,131,121);
        border-left: 1px solid;
    }
    .follow-btn ul li a{
        /* 縦書きを解除して横並びに */
        writing-mode: horizontal-tb;
        display: flex;
        flex-direction: column;            /* アイコンの下にテキスト */
        align-items: center;
        justify-content: center;
        min-height: 56px;                  /* タップしやすい高さ */
        padding: 10px 6px;
        font-size: 0.75rem;
        line-height: 1.1;
    }
    .follow-btn ul li{
        border-radius: 0;
    }
  /* アイコン：上、テキスト：下 */
    .follow-btn ul li a::before{
        inline-size: 18px;
        block-size: 18px;
        margin-inline-end: 0;              /* 横方向の余白をリセット */
        margin-bottom: 6px;                /* テキストとの間隔 */
        background-size: contain;
    }
    /* 本文が下のバーに隠れないように余白を足す */
    body{
        padding-bottom: calc(64px + env(safe-area-inset-bottom));
    }
}

@media (max-width: 768px){
  /* MV内では隠す（下にスライド）／MVを抜けたら表示 */
  .follow-btn{
    transform: translateY(0);
    transition: transform .35s ease, opacity .35s ease;
  }
  .follow-btn.on-mv{
    transform: translateY(110%);
    opacity: 0;
    pointer-events: none;
  }

  /* バーが出ている時だけ、本文が隠れないように下余白を付けたい場合は body にクラス付けして使う */
  body.has-bottom-bar{
    padding-bottom: calc(64px + env(safe-area-inset-bottom));
  }
}

/*==========================================================================
　メインビジュアル
============================================================================ */
.main-visual{
    /* position: relative; */
    display: flex;
    justify-content: center;
    align-items: center;
    /* background: url("images/main.Zp") center / cover no-repeat rgba(0,0,0,0.30); */
    /* background-blend-mode: multiply; */
    position: fixed;
    overflow: hidden;
    top: 0;
    z-index: -1000;
    width: 100%;
    height: 100vh;
    background-color: #DEDEDA;
}
/* スペック画像 */
.main-visual::after{
    content: "";
    width: 360px;
    height: 360px;
    background-image: url("images/top-spec.webp");
    background-size: contain;
    background-repeat: no-repeat;
    position: absolute;
    bottom: -160px;
    right: 60px;
}
.main-visual .main-subtitle{
    display: block;
    font-size: 1.25rem;
    margin-top: 30px;
    font-weight: 600;
    letter-spacing: .2em;
    margin-right: 20px;
}
.main-visual .main-title{
    font-size: 4.25rem;
    font-weight: bold;
    letter-spacing: 0.05em;
    color: #fff;
    z-index: 10;
    text-align: center;
}
.main-visual .main-title{
    font-size: 4.5rem;
    font-weight: bold;
    letter-spacing: 0.05em;
    color: #fff;
    z-index: 10;
    text-align: center;
    line-height: 1.2;
}

/* 日本語タイトルの塊はインライン要素のままでOK */
.main-visual .main-title-text{
    display: inline-block;
}

/* br を普通に改行として使う（※どこかで nowrap にしていたら解除） */
.main-visual .main-title br{
  display: block;   /* 保険。基本は不要だが指定しておくと安心 */
}

/* 英語のサブタイトル */
.main-visual .main-subtitle{
  display: block;
  font-size: 1.25rem;            /* ← ここが効くようになる */
  margin-top: 30px;
  font-weight: 600;
  letter-spacing: .2em;
  margin-right: 20px;
  color: #fff;
  white-space: normal;         /* ← どこかで nowrap を指定していたら打ち消す */
}

/* 1文字ずつ登場アニメーション（共通） */
.main-visual .main-title-text span,
.main-visual .main-subtitle span{
  opacity: 0;
  display: inline-block;
  transform: translateY(14px);
  animation: fadeUp 0.42s ease forwards;
  will-change: transform, opacity;
}

@keyframes fadeUp{
  to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce){
  .main-visual .main-title-text span,
  .main-visual .main-subtitle span{
    animation: none;
    opacity: 1;
    transform: none;
  }
}

/* 背景コンテナ（奥） */
.mv-bg{
    position: absolute;
    inset: 0;
    overflow: hidden;
    z-index: 0;
    pointer-events: none;
}
/* 暗くするオーバーレイ */
.mv-bg::after{
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(18, 11, 11, 0.4);
    pointer-events: none;
}

/* 1枚ずつの背景スライド */
.mv-slide{
    position: absolute;
    inset: 0;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    opacity: 0;
    transform: scale(1.04);
    animation: mvFade 30s linear infinite;
}

/* 枚数に応じてディレイ（例：5枚） */
.mv-slide:nth-child(1){ animation-delay: 0s;  }
.mv-slide:nth-child(2){ animation-delay: 6s;  }
.mv-slide:nth-child(3){ animation-delay: 12s; }
.mv-slide:nth-child(4){ animation-delay: 18s; }
.mv-slide:nth-child(5){ animation-delay: 24s; }

/* フェード＋ゆるズーム */
@keyframes mvFade{
    0%   { opacity: 0; transform: scale(1.04); }
    3%   { opacity: 1; transform: scale(1.05); }
    20%  { opacity: 1; transform: scale(1.10); }
    23%  { opacity: 0; transform: scale(1.10); }
    100% { opacity: 0; transform: scale(1.10); }
}
/* ===== レスポンシブ ===== */
@media (max-width: 768px){
    .main-visual{
        position: relative !important;
        height: 95vh;
        z-index: 1 !important; /* ← 背面に潜らないようにする */
        overflow: hidden;
    }
    .mv-bg{
        position: absolute;
        inset: 0;
    }
    .mv-slide{
        background-size: cover !important; /* とりあえず cover に戻す */
    }

  /* タイトル全体 */
    .main-visual .main-title{
        font-size: 2.2rem;       /* ← 今より少し小さく */
        line-height: 1.3;        /* 行間ゆるめ */
        letter-spacing: .08em;   /* 文字間ゆるめ */
        padding: 0;         /* 左右に余白 */
        /* margin-top: -20px; */
        /* 位置をやや上へ調整 */
    }
  /* 日本語タイトル（トコトン家ノコト。） */
    .main-visual .main-title-text{
        display: inline-block;
        white-space: normal;     /* 折り返しOK */
    }
  /* サブタイトル（英語） */
    .main-visual .main-subtitle{
        font-size: 0.8rem;       /* 少し大きくして視認性UP */
        line-height: 1.6;
        margin: 20px 0;
        letter-spacing: .12em;
        padding: 0;
        white-space: normal;
    }
    /* スペック画像 */
    .main-visual::after{
        width: 60vw;             /* スマホでは小さめに */
        height: 60vw;            /* 正方形 */
        max-width: 200px;        /* 大きくなりすぎ防止 */
        max-height: 100px;
        bottom: 45px;            /* NEWS の少し上に来るように調整 */
        left: auto;              /* 左端に配置 */
        right: 15px;             /* 右寄せを解除 */
        transform: none;         /* 中央寄せの変形を解除 */

        background-size: contain;
        background-repeat: no-repeat;
    }
}


/*==========================================================================
　ニュース
============================================================================ */

/* 左下固定 */
.news{
    position: absolute;
    left: 0;
    bottom: 20px;
    z-index: 2;
    max-width: 900px;
    color: #fff;
    margin-bottom: 13px;
}
.news .news-inner  {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: opacity .4s ease;
    font-size: 1rem;
    padding: 20px 30px;
    letter-spacing: .18em;
    color: #fff;
    font-weight: 600;
}
.news-date{
    margin: 0 10px 0 40px;
    letter-spacing: .05em;
    font-size: 0.8125rem;
}
.news-title{
    font-size: 0.9375rem;
    padding-left: 15px;
    border: 1.5px solid #fff;
    color: #fff;
    padding: 5px 15px;
}

/* 常に見える薄い下線 */
.news .news-inner::before {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 1px;
    background-color: currentColor;
    opacity: 0.4;
}

/* ホバー時 */
/* .news .news-inner::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 1.2px;
    background-color: currentColor;
    transform: scaleX(0);
    transform-origin: right;
    transition: transform 0.3s ease;
}
.news .news-inner:hover::after,
.news .news-inner:focus-visible::after {
    transform: scaleX(1);
    transform-origin: left;
} */
/* ===== レスポンシブ ===== */

/* ===== レスポンシブ ===== */
@media (max-width: 768px){

  .news{
      position: absolute;
      left: 0;
      bottom: 10px;       /* ちょっとだけ上に */
      z-index: 2;
      max-width: 100%;
      width: 100%;
      margin: 0;
      padding: 0 10px;    /* 画面端にくっつかないように */
  }

  .news .news-inner{
      display: block;
      font-size: 0.8rem;
      padding: 10px 12px;
      letter-spacing: .08em;
  }

  /* 「News」の枠はスマホでは非表示（今まで通り） */
  .news-title{
      display: none;
  }

  .news-date{
      display: block;
      margin: 0 0 6px;
      font-size: 0.6rem;
      letter-spacing: .07em;
      font-weight: 600;
  }

  /* 本文（タイトル部分） */
  .news .news-inner p{
      margin: 0;
      font-size: 0.75rem;
      line-height: 1.4;
      letter-spacing: .05em;
  }

  /* 下線もそのまま生かすが、左右に余白を合わせる */
  .news .news-inner::before {
      left: 10px;
      width: calc(100% - 20px);
  }
}

/*==========================================================================
　ピックアップ
============================================================================ */
#pickup{
  /* これは消さない */
    margin-top: 100vh;
    padding: 100px 0 0px;
    background-color: rgba(255, 255, 255, 0.15);
    position: relative;
}
#pickup::after{
    /* content: "";
    position: absolute;
    height: 100%;
    width: 100%;
    bottom: -511px;
    left: 0;
    right: 0;
    background: url(images/wave.svg) no-repeat center/cover; */
  content: "";
  position: absolute;
  width: 100%;
  height: 90%; /* はみ出す量を割合で調整 */
  bottom: 0;
  left: 0;
  transform: translateY(100%); /* ← 下方向へ適度に移動（比率） */
  background: url(images/wave.svg) no-repeat center/cover;
}
#pickup::before{
    content: "";
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    right: 0;
    background: url(images/wave1.svg) no-repeat center/cover;
}
/* コンテナを中央寄せ、左右に余白、2カラム、均等高さ */
#pickup .pickup-list{
    max-width:1250px;
    display:grid;
    grid-template-columns:repeat(2, minmax(0,1fr));
    gap: 30px;
    margin:0 auto;
}

#pickup .pickup-list > li > a{
    display:block;
    border-radius:3px;
    overflow:hidden;
    box-shadow: 3px 3px 8px rgba(0, 0, 0, 0.025);
    transition:transform .3s ease, box-shadow .3s ease;
}
/* ホバー */
#pickup .pickup-list > li > a:hover{
    transform:translateY(-2px);
    box-shadow:0 10px 24px rgba(0,0,0,.12);
    opacity: 0.8;
}

/* 画像は横長バナー。比率は 16:7（参考画像に近い） */
#pickup .pickup-img{
    width:100%;
    aspect-ratio: 16 / 5;
}
#pickup .pickup-img img{
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}



/* ===== レスポンシブ ===== */
@media (max-width: 768px){
    #pickup {
    margin-top: 0;
    }
    #pickup .pickup-list{
        grid-template-columns:1fr;
        padding:0 16px;
        gap: 5px;
    }
    #pickup .pickup-img{
        width:100%;
        aspect-ratio: 3 / 1;
    }
    #pickup .pickup-img img{
        width:100%;
        height:100%;
        object-fit: contain;
    }
    #pickup::after {
        height: 100%;
        transform: translateY(100%);
    }
}
/*==========================================================================
　イベント
============================================================================ */
#event .inner{
    padding: 150px 0 150px;
}
#event .sec-title{
    margin-bottom: 40px;
}
#event .event-list{
    display: flex;
    justify-content: space-between;
    margin-bottom: 70px;
}
#event .event-list li{
    width: 370px;
    background-color: #ffffff4d;
    box-shadow: 3px 3px 8px rgba(0, 0, 0, 0.025);
    border-radius: 3px;
}
#event .event-list li a{
    padding: 10px 10px 15px 10px;
    display: block;
}
#event .event-img{
    position: relative;
    margin-bottom: 20px;
    overflow: hidden;
}
#event .event-img img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}
#event .btn-next{
    display: flex;
    justify-content: center;
    z-index: 10000;
}
#event .lift-anime{
    position: relative;
}
#event .event-type{
    position: absolute;
    right: 5px;
    top: 10px;
    display: inline-block;
    background-color: #B22222;
    color: #fff;
    font-size: 0.7rem;
    line-height: 1.6;
    padding: 3px 10px;
    border-radius: 5px;
    letter-spacing: .06em;
}
#event .event-title{
    margin-bottom: 5px;
}
#event .event-day{
    font-size: 0.75rem;
    letter-spacing: 0.2em;
}

/* ベース */
#event .event-img{
  position: relative; /* これ必須 */
  margin-bottom: 20px;
  overflow: hidden;
}

/* 画像は最背面へ */
#event .event-img img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  position: relative;
  z-index: 0;            /* ← 画像を背面に固定 */
}

/* 終了オーバーレイ（最前面） */
#event .event-img::before{
    content: "終了しました";
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,.55);
    color: #fff;
    font-size: 1.2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity .3s ease;
    z-index: 2;            /* ← オーバーレイを前面に */
}

    /* ACFのONで発火 */
    #event .event-img.finished::before{
    opacity: 1;
    }
    .lift-anime a.finished{
    pointer-events: none;
    cursor: default;
    }

/* ===== レスポンシブ ===== */
@media (max-width: 768px) {
    #event {
        margin-bottom: 50px;
    }
    #event .event-list{
        flex-direction: column;
        gap: 16px;
        margin: 10px;
    }
    #event .event-list li{
        width: 100%;
        box-shadow: none;
    }
    /* 一覧ボタン */
    #event .btn-next{
        margin: 30px 0 0;
    }
    

}
/*==========================================================================
　コンセプト
============================================================================ */
#concept{
    height: 220vh;
    position: relative;
}

/* 木漏れ日 */
#concept::before{
    content: "";
    width:100%;
    height: 100%;
    background-image: url("images/leaf05.webp");
    background-size: contain;
    background-repeat: no-repeat;
    position: absolute;
    top: 0px;
    right: 0;
    z-index:0;
    background-blend-mode: multiply;
    opacity: 0.7;
}

.concept-text {
    max-width: 500px;
    width: auto;
    position: absolute;
    top: 700px;
    left: 50%;
    transform: translateX(-50%)!important;
    z-index: 2;
    color: #545450;
}
.concept-text p:nth-of-type(1){
    font-size: 1.5rem;
    margin-bottom: 32px;
}
.concept-lead{
    line-height: 2.2;
    font-size: 1.0625rem;
    letter-spacing: .04em;
    margin-bottom: 30px;
}
/* 縦の文字 */
.concept-vertical{
    writing-mode: vertical-rl;
    font-size: 1.75rem;
    letter-spacing: 0.3em;
    position: absolute;
    top: 330px;
    right: 450px;
    color: #545450;
    line-height: 1.8;
}
/* 画像 */
.concept_img02 img,
.concept_img03 img,
.concept_img04 img,
.concept_img05 img,
.concept_img06 img,
.concept_img07 img{
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
/* 画像：メインサイズは変えない */
#concept .concept_img01 img{
    width: 550px;
    height: 670px;
    object-fit: cover;
}

/* 02画像（top 330px → 約35vh） */
#concept .concept_img02 {
    position: absolute;
    top: 35vh;
    right: 0;
    width: 350px;
    height: 500px;
    z-index: 1;
}

/* 03画像（top 1000px → 約107vh） */
#concept .concept_img03{
    position: absolute;
    top: 107vh;
    left: 300px;
    width: 370px;
    height: 480px;
    z-index: 0;
}
#concept .concept_img03 img{
    opacity: 0.45;
}

/* 04画像（top 1250px → 約134vh） */
#concept .concept_img04{
    position: absolute;
    top: 134vh;
    left: 110px;
    width: 290px;
    height: 360px;
    z-index: 1;
}

/* 05画像（top 1390px → 約149vh） */
#concept .concept_img05{
    position: absolute;
    top: 149vh;
    right: 120px;
    width: 300px;
    height: 400px;
    z-index: 1;
}

/* 一覧ボタン */
#concept .btn-next{
    margin-top: 60px;
    display: flex;
    justify-content: flex-end;
}





/* ===== レスポンシブ ===== */
@media (max-width: 768px) {
    #concept {
    height: 190vh;
    }
    /* 木漏れ日 */
    #concept::before{
        width: 180%;
        top: 290px;
    }
    .concept-text {
        max-width: 100%;
        width:100%;
        top: 430px;
        left: 50%;
    }
    .concept-text p:nth-of-type(1){
        font-size: 1.25rem;
        padding: 20px;
        margin-bottom: 20px;
    }
    .concept-lead{
        line-height: 2.2;
        font-size: 0.75rem;
        margin-bottom: 20px;
        padding: 0 20px;
    }
    /* 縦の文字 */
    .concept-vertical{
        font-size: .95rem;
        top: -30px;
        right: 20px;
        line-height: 1.8;
    }
    /* 01（サイズは元のまま） */
    #concept .concept_img01 img{
        width: 250px;
        height: 330px;
    }

    /* 02画像（210px → 約28vh） */
    #concept .concept_img02 {
        top: 28vh;
        right: 0;
        width: 180px;
        height: 210px;
    }

    /* 03画像（680px → 約90vh） */
    #concept .concept_img03{
        top: 90vh;
        left: 0;
        width: 220px;
        height: 310px;
    }

    /* 04画像（1050px → 約140vh） */
    #concept .concept_img04{
        top: 140vh;
        left: 150px;
        width: 130px;
        height: 160px;
    }

    /* 05画像（1150px → 約154vh） */
    #concept .concept_img05{
        top: 154vh;
        right: 10px;
        width: 110px;
        height: 150px;
    }
    /* 一覧ボタン */
    #concept .btn-next{
        margin: 0 10px 0 0;
    }

}
/*==========================================================================
　施工事例
============================================================================ */
#works {
    background-color: rgb(164, 158, 144);
    padding: 100px 0;
    position: relative;
}
#works::after {
    content: "";
    position: absolute;
    inset: 0;
    background: url("images/texture2.webp") repeat;
    opacity: .035;
    pointer-events: none;
    background-blend-mode: multiply;
    z-index: -1;
}
/* セクションタイトル */
#works .sec-title {
    color: #fff;
    margin-left: 150px;
}
#works .sec-title span{
    color: #fff;
}
.gallery-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin-bottom: 80px;
    padding: 0 100px;
}
.gallery-item {
    position: relative;
    width: 100%;
    overflow: hidden;
    border: none;
    padding: 50px;
}
.gallery-item:not(:nth-child(4n+1)) {
    border-left: 1px solid #ffffff4f;
}
.gallery-item:nth-child(n+5) {
    border-top: 1px solid #ffffff4f;
}
.gallery-item a {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
}
/* ラッパー（または a）を重ね合わせの基準に */
.gallery-item a{
  position: relative;   /* ★重要：::before の基準 */
  display: block;       /* 画像サイズにフィット */
  line-height: 0;       /* 余白の原因を消す */
  overflow: hidden;     /* 拡大時のはみ出しを隠す（任意） */
}

/* 画像 */
.gallery-item img{
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover;
    transition: transform .35s ease;
      aspect-ratio: 4 / 3; /* ←ここで縦横比を統一（例: 4:3） */
  object-fit: cover;   /* はみ出し部分をトリミングして均一に */
}

/* 黒幕（オーバーレイ） */
.gallery-item a::before{
    content:"";
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,.5);
    opacity: 0;
    transition: opacity .25s ease;
    z-index: 1;
}

/* キャプション（黒幕の上） */
.gallery-item .gallery-item-caption{
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    color:#fff;
    letter-spacing:.04em;
    font-size:18px;
    line-height:1.8;
    text-align:center;
    padding:0 12px;
    opacity:0;
    transition:opacity .25s ease;
    z-index:2;
    pointer-events: none;
}

/* ホバー時 */
.gallery-item a:hover::before{ opacity:1; }
.gallery-item a:hover img{ transform: scale(1.05); }
.gallery-item a:hover + .gallery-item-caption,
.gallery-item a:hover .gallery-item-caption{ opacity:1; }

/* 黒幕の上に白字 */
.gallery-item .gallery-item-caption {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    color: #fff;
    letter-spacing: .04em;
    font-size: 1.125rem;
    line-height: 1.8;
    text-align: center;
    padding: 0 12px;
    opacity: 0;
    transition: opacity 0.25s ease;
    z-index: 2;
}


/* 一覧ボタン */
#works .btn-next {
    display: flex;
    justify-content: center;
}
#works .btn-next a{
    color: #fff;
}
#works .btn-next a span::before {
    background-color: #fff;
}
#works .btn-next a span::after {
    border-top: 1.2px solid #fff;
}
/* 自動スライドする横スクロールギャラリー */
.hero-reel {
    position: relative;
    overflow: hidden;
    height: 40vh;
    background: #000;
}
.reel-track {
    display: flex;
    width: max-content;
    animation: scroll 50s linear infinite;
}
.reel-slide {
    flex: 0 0 auto;
}
.reel-slide img {
    height: 40vh;
    width: auto;
    object-fit: cover;
    display: block;
    filter: brightness(.92);
}
/* ダミー画像クリックできなくする */
#works .is-dummy img {
    opacity: 0.3;
    filter: grayscale(100%);
}

/* 横に流れるアニメーション */
@keyframes scroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}


/* ===== レスポンシブ ===== */
@media (max-width: 768px) {
    /* セクションタイトル */
    #works .sec-title {
        margin: 0 0 40px 30px;
    }

    .gallery-grid {
        grid-template-columns: repeat(2, 1fr);
        margin-bottom: 40px;
        padding: 0 20px;
        gap: 20px;
    }

    .gallery-item {
        padding: 0;
        border: none;
    }
    .gallery-item:not(:nth-child(4n+1)) {
        border: none;
    }
    .gallery-item:nth-child(n+5) {
        border: none;
    }

    /* ▼▼ ここから SP ではホバー演出を無効化 ▼▼ */

    /* 黒幕を常に非表示（hoverしても出さない） */
    .gallery-item a::before {
        opacity: 0 !important;
        transition: none;
    }
    .gallery-item a:hover::before {
        opacity: 0 !important;
    }

    /* 画像拡大もナシ */
    .gallery-item img {
        transform: none!important;
        transition: none;
    }
    .gallery-item a:hover img {
        transform: none!important;
    }

    /* キャプションも hover では出さない */
    .gallery-item .gallery-item-caption {
        display: none;
        opacity: 0 !important;
        transition: none;
    }
    .gallery-item a:hover .gallery-item-caption,
    .gallery-item a:focus-visible .gallery-item-caption {
        display: none;
        opacity: 0 !important;
    }

    /* 自動スライドする横スクロールギャラリー */
    /* .hero-reel{
        height: 20vh;
    }
    .hero-reel img{
        height: 20vh;
    } */
       .hero-reel{
        height: 20vh;              /* vhだと端末によってブレやすいので固定pxにしてみる */
    }

  .hero-reel .reel-track{
    /* 念のためSP側でもアニメーションをかけ直す */
    animation: scroll 25s linear infinite;
    -webkit-animation: scroll 25s linear infinite;
  }

  .hero-reel .reel-slide img{
    height: 20vh;              /* セクション高と合わせる */
    width: auto;
    object-fit: cover;
  }
}

/*==========================================================================
　お客様の声
============================================================================ */

#voice{
    border-bottom: 1px solid rgba(0,0,0,.15);
    padding-bottom: 60px;
    position: relative;

}
/* 木漏れ日 */
#voice::before{
    content: "";
    width:100%;
    height: 100%;
    background-image: url("images/leaf05.webp");
    background-size: cover;
    background-repeat: no-repeat;
    position: absolute;
    bottom: 0;
    right: 0;
    z-index:0;
    background-blend-mode: multiply;
    opacity: 0.8;
}

#voice .sec-title{
    margin: 120px 0 50px 150px;
}
#voice .btn-next{
    display: flex;
    justify-content: center;
    padding-bottom: 100px;
}
#voice .inner{
    padding: 150px 0 0;
}

#voice .swiper{
    position: relative;
}
#voice .swiper-wrapper{
    margin-bottom: 100px;

}
/* コントロールを“通常フロー”で右上に並べる */
#voice .swiper-controls{
    position: static;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 16px;
    padding: 0 150px 50px 0;
}

/* ドット*/
#voice .swiper-controls .swiper-pagination{
    position: static !important;
    display: flex;
    gap: 6px;
    width: auto;
    margin: 0;
}

/* 矢印も通常フローに変更（重ねない） */
#voice .swiper-controls .swiper-arrows{
    display: flex;
    align-items: center;
    gap: 12px;
}
#voice .swiper-controls .swiper-button-prev,
#voice .swiper-controls .swiper-button-next{
    position: static !important;
    transform: none !important;
    margin: 0;
    width: 28px;
    height: 28px;
}
#voice .swiper-controls .swiper-button-prev::after,
#voice .swiper-controls .swiper-button-next::after{
    font-size: 0.87rem;
}
/* 左右の矢印 */
#voice .swiper-controls .swiper-button-prev::after,
#voice .swiper-controls .swiper-button-next::after {
  color: #B22222;
  font-size: 1.125rem;
}
/* アクティブなドット */
#voice .swiper-controls .swiper-pagination .swiper-pagination-bullet-active {
  background: #B22222; /* アクティブの色 */
}


/* 画像 */
.voice-img {
    width: 320px;           /* 固定でもOK、%でもOK */
    height: 400px;          /* 比率に応じて設定 */
    overflow: hidden;       /* 枠をはみ出した部分を隠す */
    position: relative;
    margin-bottom: 40px;
}
.voice-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}
/* テキスト */
.voice-info{
    margin-bottom: 5px;
    font-size: 0.87rem;
    color: #8a8379;
}

.voice-title {
    position: relative;
    color: #333;
    display: inline-block; /* 必須：テキスト幅だけ線をつける */
}
/* 擬似要素で下線を作る */
.voice-title::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;   /* 文字との距離 */
  width: 100%;
  height: 1px;
  background-color: currentColor;
  transform: scaleX(0);             /* 初期は非表示 */
  transform-origin: right;          /* 右から左へ */
  transition: transform 0.3s ease;  /* アニメーション */
}

/* デフォルト矢印を消す */
#voice .swiper-controls .swiper-button-prev::after,
#voice .swiper-controls .swiper-button-next::after {
    content: none!important;
}
/* ボタン本体を基準にする */
#voice .swiper-controls .swiper-button-prev,
#voice .swiper-controls .swiper-button-next {
    position: relative;
    width: 50px;   /* ボタンサイズ */
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 左矢印 */
#voice .swiper-controls .swiper-button-prev::before {
    content: "";
    width: 30px;
    height: 1.5px;
    background: #333;
}
#voice .swiper-controls .swiper-button-prev::after {
    content: ""!important;
    position: absolute;
    right: 244px;          /* ← 横線の左端に合わせる */
    width: 8px;
    height: 8px;
    border-top: 1.5px solid #333;
    transform: rotate(-45deg);
}

/* 右矢印 */
#voice .swiper-controls .swiper-button-next::before {
    content: "";
    width: 30px;
    height: 1.5px;
    background: #333;
}
#voice .swiper-controls .swiper-button-next::after {
    content: ""!important;
    position: absolute;
    right: 160px;         /* ← 横線の右端に合わせる */
    width: 8px;
    height: 8px;
    border-top: 1.5px solid #333;
    transform: rotate(45deg);
    }

/* アニメーション */
#voice .swiper-slide a:hover .voice-img img,
#voice .swiper-slide a:focus-visible .voice-img img {
    transform: scale(1.1);
}
/* 常に表示されるベースの下線 */
.voice-title::before {
    content: "";
    position: absolute;
    left: 0;
    bottom: -2px;
    width: 100%;
    height: 1px;
    background-color: currentColor;
    opacity: 0.3;
}

/* アニメーション用の線 */
.voice-title::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -2px;
    width: 100%;
    height: 1px;
    background-color: currentColor;
    transform: scaleX(0);
    transform-origin: right;
    transition: transform 0.3s ease;
}

/* ← ここを親 <a> に変更！ */
#voice .swiper-slide a:hover .voice-title::after,
#voice .swiper-slide a:focus-visible .voice-title::after {
    transform: scaleX(1);
    transform-origin: left;
}

/* ===== レスポンシブ ===== */
@media (max-width: 768px){
    #voice{
        overflow: hidden;
    }
    /* 木漏れ日 */
    #voice::before{
        top: -60px;
        width: 190%;
        }
    /* セクションタイトル */
    #voice .sec-title {
        margin: 90px 0 40px 30px;
    }

    /* スライダー */
    #voice .swiper-controls{
        justify-content: right;
        align-items: center;
        gap: 10px;
        padding: 0 0 20px 0;
    }
    #voice .swiper-controls .swiper-button-prev,
    #voice .swiper-controls .swiper-button-next{
        display: none;
    }
    #voice .swiper-wrapper{
        margin: 40px 0;
    }
    #voice .swiper{
        width: 100vw;
        margin: 0 auto;
        transform: none;
        padding: 0 5vw;
    }
    #voice .swiper-slide{
        padding: 0 10px;
        box-sizing: border-box;
    }
    .voice-img{
        width: 100%;
        height: auto;
        aspect-ratio: 1/1;       /* 好みで 4/3 や 1/1 に変更可 */
        margin-bottom: 20px;
    }
    .voice-img img{
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    /* テキスト */
    .voice-info{
        font-size: 0.75rem;
        margin-bottom: 4px;
        margin-left: 5px;
    }
    .voice-title{
        font-size: 0.87rem;
        line-height: 1.6;
        margin-left: 5px;
    }
    #voice .btn-next{
        padding-bottom: 30px;
    }


}


/*==========================================================================
　ラインナップ
============================================================================ */
#lineup{
    position: relative;
    color: #fff;
    overflow: clip; /* 背景のはみ出し対策 */
}
.lineup-inner{
    isolation: isolate;
    position: relative;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 50px;
    align-items: stretch;
    padding: 100px;
    overflow: hidden;
    height: 100vh;
}


/* 前景は上に重ねる */
#lineup .lineup-photo,
#lineup .lineup-copy { position: relative; z-index: 1; }

/* ぼかし背景 */
.lineup-backdrop{
    position: absolute;
    inset: -40px;
    filter: blur(10px);
    transform: scale(1.06);
    z-index: 0;
    opacity: .85;
    transition: transform .6s ease, filter .6s ease, opacity .6s ease;
    will-change: transform, filter, opacity;
}

#lineup .lineup-inner:nth-of-type(1) .lineup-backdrop{
    background:linear-gradient(rgba(0,0,0,.24), rgba(0,0,0,.3)),
    url("images/lineup01-2.webp") center/cover no-repeat;
}
/* #lineup .lineup-inner:nth-of-type(2) .lineup-backdrop{
    background:linear-gradient(rgba(0,0,0,.24), rgba(0,0,0,.3)),
    url("images/lineup02.webp") center/cover no-repeat;
} */
#lineup .lineup-inner:nth-of-type(2) .lineup-backdrop{
    background:linear-gradient(rgba(0,0,0,.24), rgba(0,0,0,.3)),
    url("images/reform-img01.webp") center/cover no-repeat;
}
/* #lineup .lineup-inner:nth-of-type(3) .lineup-backdrop{
    background:linear-gradient(rgba(0,0,0,.24), rgba(0,0,0,.3)),
    url("images/lineup03.webp") center/cover no-repeat;
} */
 #lineup .lineup-inner:nth-of-type(3) .lineup-backdrop{
    background:linear-gradient(rgba(0,0,0,.24), rgba(0,0,0,.3)),
    url("images/store-img01.webp") center/cover no-repeat;
}
/* 左のテキスト */
.lineup-copy{
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-left: 100px;
}
.lineup-number{
    margin: 0 0 30px;
    font-size: 1.375rem;
    opacity: .8;
    font-weight: 600;
}
.lineup-name{
    margin-bottom: 10px;
    font-size: 3rem;
    line-height: 1.1;
    letter-spacing: .06em;
}
.lineup-type{
    margin: 10px 0 50px;
    padding: 2px 10px;
    opacity: .8;
    font-size: 0.85rem;
    letter-spacing: .3em;
    color: #fff;
    border: 1px solid #fff;
    display: inline-block;
    align-self: flex-start;
}
.lineup-catch{
    font-size: 1.5rem;
    line-height: 2;
    margin: 0 0 50px;
}
/* 右の写真カード */
.lineup-photo{
    margin: 0;
    width: 100%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    isolation: isolate;
    display: flex;
    align-items: stretch;
}

/* 画像を正方形枠にフィット */
.lineup-photo img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* 一覧ボタン */
#lineup .lineup-btn-next a{
    background-color: #ffffff86;
    color: #333;
    text-align: center;
    padding: 20px;
    width: 500px;
    display: inline-block;
    font-size: 1rem;
    letter-spacing: .1em;
    border-radius: 5px;
    transition: color 0.4s ease, background-color 0.4s ease; /* ← ここを追加 */
}


/* ボタンホバー */
#lineup .lineup-inner:has(.lineup-btn-next a:is(:hover, :focus-visible, :active))
.lineup-backdrop{
    transform: scale(1.1);
    filter: blur(16px);
    opacity: .98;
}
#lineup .lineup-btn-next a:hover{
    color: #fff;
}
/* PCではサムネ非表示 */
#strengths .strengths-list .str-thumb{
  display: none;
}

/* ===== レスポンシブ（768px以下） ===== */
@media (max-width: 768px) {
    .lineup-inner{
        grid-template-columns: 1fr;   /* 1カラム */
        gap: 20px;
        padding: 48px 20px;
        height: auto;                 /* 100vh解除 */
    }
    .lineup-photo{
        grid-column: 1 / -1;
        grid-row: 1;                  /* 画像を上 */
        order: 1;
        aspect-ratio: 3 / 2;          /* 見せ方はお好みで 16/9 でもOK */
    }
    .lineup-copy{
        grid-column: 1 / -1;
        grid-row: 2;                  /* テキストを下 */
        order: 2;
        margin-left: 0px;
    }
    /* ラインナップ１枚目 */
    #lineup .lineup-inner:nth-of-type(1) .lineup-photo img{
            object-position: center 5%;
    }
    /* 文字サイズ微調整（任意） */
    .lineup-number{
        font-size: 0.75rem;
        margin-bottom: 12px;
    }
    .lineup-name{
        font-size: 1.2rem;
        margin-bottom: 0;
    }
    .lineup-type{
        margin: 10px 0 20px;
        font-size: 0.5rem;
    }
    .lineup-catch{
        font-size: 0.8rem;
        line-height: 1.6;
        margin-bottom: 12px;
    }
    .lineup-lead p{
        font-size: 0.8rem;
        line-height: 1.8;
    }
  /* ぼかし背景も縮小 */
    .lineup-backdrop{
        inset: -20px;
        filter: blur(10px);
        transform: scale(1.04);
    }
    /* 一覧ボタン */
    #lineup .lineup-btn-next a{
    padding: 15px;
    display: block;
    font-size: 0.9rem;
    margin-top: 10px;
    width: 100%;
}

}

/*==========================================================================
　強み
============================================================================ */
#strengths {
    background-color: rgb(164, 158, 144);
    position: relative;
}
/* #strengths .inner{
    max-width: 1300px;
    margin: 0 auto;
    padding: 130px 0;
} */
#strengths::before {
    content: "";
    position: absolute;
    inset: 0;
    background: url("images/texture2.webp") repeat;
    opacity: .035;
    pointer-events: none;
    background-blend-mode: multiply;
    z-index: -1;
}
#strengths .sec-title {
    color:#fff;
}
#strengths .sec-title span {
    color: #fff;
}
/* 2カラムレイアウト */
.strengths-wrapper{
    display:flex;
    gap:100px;
    align-items:stretch;
}

/* ---- 左：テキストリスト ---- */
.strengths-list{
    flex:1;
}
.strengths-list a{
    position:relative;
    display:block;
    color:#fff;
    padding:40px 0 40px 40px;
    border-bottom:1px solid #ffffff4f;
    font-size: 1.35rem;
    letter-spacing: .15em;
    transition: opacity .2s ease;
}
.strengths-list a:hover,
.strengths-list a:focus-visible{ opacity:.6; }
.strengths-list {
    font-size: 1.25rem;
    margin:0 20px 0 30px;
}
.strengths-list li span{
    display: block;
    font-size: 0.87rem;
    padding-top: 8px;
    color: #fff;
}

/* 矢印 */
.strengths-list a .arrow-box {
    position: absolute;
    right: 40px;
    top: 50%;
    width: 65px;
    height: 35px;
    transform: translateY(-50%);
    pointer-events: none;
    border-radius: 50px;
    background-color: rgba(255, 255, 255, 0.12); /* ← 薄い白 */
    transition: background-color .5s ease, box-shadow .5s ease;
}
/* 横棒 */
.strengths-list a::before {
    content: "";
    position: absolute;
    right: 60px;
    top: 50%;
    width: 25px;
    height: 1.5px;
    background: #fff;
    z-index: 2;
    transform: translateY(-50%);
    transition: right .3s ease, width .3s ease;
}

/* 斜め棒 */
.strengths-list a::after {
    content: "";
    position: absolute;
    right: 62px;
    top: 50%;
    width: 8px;
    height: 8px;
    border-top: 1.8px solid #fff;
    transform: translateY(-50%) rotate(35deg);
    transition: right .3s ease;
}
/* ホバー時 */
.strengths-list a:hover .arrow-box,
.strengths-list a:focus-visible .arrow-box {
    background-color: rgba(255, 255, 255, 0.8);
    box-shadow: 0 0 10px rgba(133, 128, 118, 0.5);
}
/* ホバー時の動き */
.strengths-list a:hover::before {
    right: 55px;
    background-color: rgb(133, 128, 118);
}
.strengths-list a:hover::after {
    right: 57px;
    border-top: 1.8px solid rgb(133, 128, 118);

}
/* ---- 右：プレビュー ---- */
.strengths-img{
    flex:0 0 600px;
    position:relative;
    overflow:hidden;
    background:#d8d5d0;
    border-radius: 3px;
}

/* プレビュー画像（重ねてフェード切替） */
.strengths-img .ph{
    inset:0;
    position:absolute;
    width:100%;
    height:100%;
    object-fit:cover;
    opacity:0;
    transition: opacity .3s ease;
}

/* 何もホバーしていない時の初期表示（p1） */
.strengths-wrapper:not(:has(.strengths-list a:hover, .strengths-list a:focus-visible))
.strengths-img .p1{ opacity:1; }

/* テキストごとに対応する画像だけ表示 */
.strengths-wrapper:has(.t1:hover, .t1:focus-visible) .strengths-img .p1{ opacity:1; }
.strengths-wrapper:has(.t2:hover, .t2:focus-visible) .strengths-img .p2{ opacity:1; }
.strengths-wrapper:has(.t3:hover, .t3:focus-visible) .strengths-img .p3{ opacity:1; }
.strengths-wrapper:has(.t4:hover, .t4:focus-visible) .strengths-img .p4{ opacity:1; }
.strengths-wrapper:has(.t5:hover, .t5:focus-visible) .strengths-img .p5{ opacity:1; }
/* PCではサムネは非表示にしておく */
#strengths .strengths-list .str-thumb{
  display: none;
}

/* ===== Strengths：SPレイアウト（768px以下） ===== */
@media (max-width: 768px){

  /* 全体レイアウトを縦並びに */
  .strengths-wrapper{
    display: block;
  }

  /* 右側の大きいプレビュー画像は非表示 */
  .strengths-img{
    display: none;
  }

  /* リストまわり */
  #strengths .strengths-list{
    margin: 0;
  }

  #strengths .strengths-list li{
    margin: 0;
  }

  /* 各行：サムネ + テキスト + 矢印を横並び */
  #strengths .strengths-list a{
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 56px 16px 14px; /* 右は矢印分を空ける */
    font-size: 0.95rem;
    letter-spacing: .08em;
    border-bottom: 1px solid #ffffff4f;
    opacity: 1;
    transition: none; /* SPではアニメーション不要 */
  }

  /* サムネ枠 */
  #strengths .strengths-list .str-thumb{
    display: block;        /* PCの display:none を上書き */
    flex: 0 0 auto;
    width: 60px;
    height: 60px;
    padding: 0;            /* 共通 span の padding-top を消す */
    overflow: hidden;
    background: #eee;
    border-radius: 3px;
  }

  #strengths .strengths-list .str-thumb img{
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  /* 矢印ボタンの位置・サイズ（常に同じ見た目） */
  #strengths .strengths-list a .arrow-box{
    position: absolute;
    right: 14px;
    top: 50%;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    transform: translateY(-50%);
    background-color: rgba(255, 255, 255, 0.12);
    box-shadow: none;
    pointer-events: none;
    transition: none;
  }

  /* 矢印の横棒・先っぽ（ホバーしても変化しない前提の値） */
  #strengths .strengths-list a::before {
      content: "";
      position: absolute;
      right: 28px;
      top: 50%;
      width: 20px;
      height: 1.5px;
      background: #fff;
      transform: translateY(-50%);
      transition: none;
  }
  #strengths .strengths-list a::after {
      content: "";
      position: absolute;
      right: 30px;
      top: 50%;
      width: 7px;
      height: 8px;
      border-top: 1.8px solid #fff;
      transform: translateY(-50%) rotate(35deg);
      transition: none;
  }

  /* 英字ラベルの <span> は非表示（str-thumb と arrow-box はそのまま） */
  #strengths .strengths-list a > span:not(.arrow-box):not(.str-thumb){
    display: none !important;
  }

  /* ===== SPではホバーしても見た目が変わらないようにリセット ===== */

  #strengths .strengths-list a:hover,
  #strengths .strengths-list a:focus-visible{
    opacity: 1;
  }

  #strengths .strengths-list a:hover .arrow-box,
  #strengths .strengths-list a:focus-visible .arrow-box{
    background-color: rgba(255, 255, 255, 0.12);
    box-shadow: none;
  }

  #strengths .strengths-list a:hover::before{
    right: 28px;
    background: #fff;
  }

  #strengths .strengths-list a:hover::after{
    right: 30px;
    border-top: 1.8px solid #fff;
  }
}
/*==========================================================================
　コラム
============================================================================ */
/* セクションタイトル */
#column .sec-title {
    margin-bottom: 50px;
}
/* 横2カラム */
.post-wrapper {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 40px;
    align-items: stretch;
    margin-bottom: 80px;
}
.post-list .layout{
    justify-content: space-between;
}
/* 左：固定記事 */
.post-left {
    display: grid;
    grid-template-rows: repeat(2, 1fr);
    gap: 20px;
}

/* 右：最新記事 */
.posts_right {
    display: grid;
    grid-template-rows: repeat(3, 1fr);
    gap: 20px;
}
.posts_right .post-list a{
    padding: 16px 40px 16px 16px;
}
/* カード全体 */
.post-list {
    background: rgba(255, 255, 255, 0.3);
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    border-radius: 3px;
}

.post-list a {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 16px;
    transition: opacity 0.3s ease;
}

.posts_right .post-list a {
    flex-direction: row;
    align-items: center;
    gap: 30px;
}
.post-list a:hover {
    opacity: 0.8;
}

/* 画像 */
.post-list figure {
    position: relative;
    margin: 0 0 12px;
    width: 100%;
    padding-top: 56.25%; /* 横長比率（16:9） */
    overflow: hidden;
    border-radius: 3px;
}

.post-list figure img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 右カラム（横レイアウト） */
.posts_right .post-list figure {
    margin: 0 30px 0 0;
    width: 250px;
    aspect-ratio: 6/4;
    padding-top: 0; /* 上の比率指定を無効化 */
    flex-shrink: 0;
}

.posts_right .post-list figure img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
/* メタ情報 */
.post-list-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    font-size: 0.87rem;
    color: #666;
}

/* タグ */
.post-list-tag {
    display: flex;
    gap: 8px;
    margin: 0;
    padding: 0;
}
.post-list-tag li {
    line-height: 1.6;
    padding: 3px 8px;
    font-size: 0.75rem;
    background-color: #aba69e;
    color: #fff;
    border-radius: 3px;
}

/* 日付 */
.post-list-date {
    font-size: 0.75rem;
    color: #aba69eff;
}
/* タイトル */
.post-list h3 {
    font-size: 0.9375rem;
    line-height: 1.6;
    margin: 0;
}

/* ボタン */
#column .btn-next {
    display: flex;
    justify-content: center;
}
/* 右カラム：テキスト部分の横幅を固定 */
.posts_right .post-list a > div {
  width: 500px;   /* ← 好みの固定幅に調整（例：380px〜420px） */
  flex-shrink: 0; /* 画像の比率によって潰れないように固定 */
}

/* ===== レスポンシブ（768px以下） ===== */
/* ============================================================
   Column（コラム） レスポンシブ
============================================================ */
@media (max-width: 768px){
  /* セクションの余白 */
    #column .inner{
        padding: 80px 16px!important;
    }

  /* タイトル下のマージン縮小 */
  #column .sec-title{
      margin-bottom: 30px;
  }

  /* ▼ 2カラム → 1カラムに変更 */
  .post-wrapper{
      grid-template-columns: 1fr;
      gap: 20px;
      margin-bottom: 20px;
  }

  /* 左・右どちらも「縦並びカード」に統一 */
  .post-left,
  .posts_right{
      display: grid;
      grid-template-columns: 1fr;
      grid-template-rows: auto;
      gap: 20px;
  }

  /* 各カードの a のレイアウト */
  .post-list a{
      display: flex;
      flex-direction: column !important;
      padding: 16px;
      gap: 5px;
  }

  /* 右カラム（最新記事）の横レイアウト → 縦レイアウトへ */
  .posts_right .post-list a{
      flex-direction: column !important;
      align-items: flex-start;
      padding:  16px 16px;
      gap: 5px;
  }

  /* 画像 */
  .post-list figure{
      width: 100%;
      padding-top: 56%;  /* 16:9比率 */
      margin-bottom: 10px;
  }
  .posts_right .post-list figure{
      width: 100%;
      aspect-ratio: auto;
      padding-top: 56%;
      margin: 0 0 10px;
  }

  /* タグ＋日付 */
  .post-list-meta{
      flex-direction: column;
      align-items: flex-start;
      gap: 6px;
      margin-bottom: 0px;
      font-size: 0.65rem;
  }
  .post-list-tag{
      gap: 6px;
  }
  .post-list-tag li{
      font-size: 0.6rem;
      padding: 3px 6px;
  }
  .post-list-date{
      font-size: 0.65rem;
      margin-bottom: 5px;
  }

  /* タイトル */
  .post-list h3{
      font-size: 0.8rem;
      line-height: 1.5;
  }

  /* 右カラムカードのテキストの “幅固定” を解除 */
  .posts_right .post-list a > div{
      width: 100%;
      flex-shrink: 1;
  }

  /* 「コラムを読む」ボタン */
  #column .btn-next{
      margin: 20px 0 50px;
  }
}

/*==========================================================================
　コンタクト
============================================================================ */
#contact{
    display: grid;
    grid-template-columns: 1fr 1fr; /* 2列 */
    gap: 0;
}

/* タイル本体 */
.contact-list-tile{
    position: relative;
    height: 300px;
    display: grid;
    place-items: center;
    z-index: 2;
    padding: 36px 24px;
    color: #fff;
}

/* 背景画像 */
.contact-list:first-child{
    background: url("images/company.webp") center / cover no-repeat;
}
.contact-list:nth-child(2) {
    background: url("images/event.webp") center 55%/ cover no-repeat;
}
.contact-list:nth-child(3) {
    background: url("images/consultation.webp") center 70%/ cover no-repeat;
}
.contact-list:last-child{
    background: url("images/catalog.webp") center 70%/ cover no-repeat;
}

/* オーバーレイ（黒→白へ） */
.contact-list-tile::after{
    content:"";
    position:absolute; inset:0;
    background: rgba(255, 255, 255, 0.01);
    z-index:-1;
    transition: background .3s ease;
}
/* 中央コンテンツ */
.contact-inner{
    text-align: center;
}
.contact-sub{
    font-size: 0.9rem;
    letter-spacing: 0.15em;
}
.contact-title{
    margin: 0 0 22px;
    font-size: 2.2rem;
    font-weight: 300;
    letter-spacing: .06em;
}

/* 矢印 */
.contact-arrow{
    display:inline-grid;
    place-items:center;
    width: 70px;
    height: 32px;
    position: relative;
}
.contact-arrow::before{
    content: "";
    width: 40px;
    height: 1.5px;
    background: #fff;
    transform: translateY(2px);
    display: block;
    transition: transform 0.6s ease-in-out;
    transform: translateY(-50%);
}
.contact-arrow::after{
    content: "";
    position: absolute;
    top: 14px;
    right: 16px;
    width: 10px;
    height: 8px;
    border-top: 1.5px solid #fff;
    transform: rotate(35deg);
    transition: transform 0.6s ease-in-out;
    transform: translateY(-50%) rotate(45deg);
}

/* ホバー*/
.contact-list{
    position: relative;
    overflow: hidden;
    min-height: 220px;
    isolation: isolate;
}

/* 背景（ズーム用） */
.contact-list::before{
    content:"";
    position:absolute; inset:0;
    background: inherit;
    transform: scale(1);
    transform-origin: center center;
    transition: transform .6s ease;
    z-index: 0;
    will-change: transform;
}

/* オーバーレイ（暗幕） */
.contact-list::after{
    content:"";
    position:absolute; inset:0;
    background: rgba(0, 0, 0, 0.328);
    opacity: 1;
    transition: opacity .35s ease;
    z-index: 1;
    pointer-events: none;
}

/* ホバー時：背景ズーム */
.contact-list:hover::before,
.contact-list:focus-within::before{
    transform: scale(1.06);
}

/* ホバー時：矢印動かす*/
.contact-list:hover .contact-arrow::before,
.contact-list:focus-within .contact-arrow::before {
    transform: translate(10px, -50%);
}

.contact-list:hover .contact-arrow::after,
.contact-list:focus-within .contact-arrow::after {
    transform: translate(10px, -50%) rotate(45deg);
}

/* ホバー時：暗くする */
.contact-list:hover .contact-list-tile::after,
.contact-list:focus-within .contact-list-tile::after{
    background: rgba(0, 0, 0, 0.375); /* ←黒で少し暗く */
}

/* ===== レスポンシブ（768px以下） ===== */
@media (max-width: 768px) {
    #contact {
        grid-template-columns: 1fr;
    }
    .contact-list {
        min-height: auto;
    }
    .contact-list-tile {
        height: 180px;
        padding: 24px 16px;
        aspect-ratio: auto;
    }
    .contact-sub {
        font-size: 0.8125rem;
        margin-bottom: 0;
    }
    .contact-title {
        font-size: 1.375rem;
        margin: 0 0 14px;
    }
    /* 矢印少し小さめ */
    .contact-arrow {
        width: 56px;
        height: 24px;
    }
    .contact-arrow::before {
        width: 32px;
    }
    .contact-arrow::after  {
        top: 11px;
        right: 12px;
    }
    #contact .event-form-notice{
        padding: 20px 30px;
        margin: 0px auto 0px;
        font-size: .8rem;
    }
}


/*==========================================================================
　フッター
============================================================================ */
footer .inner{
    display: flex;
    justify-content: space-between;
    padding: 130px 0;
}
/* 左会社概要 */
footer .logo{
    margin-bottom: 20px;
}
.company-name,
.company-license{
    margin-bottom: 10px;
}
.company-address,
.company-tel{
    margin-bottom: 20px;
}
.company-day{
    margin-bottom: 50px;
}

/* 電話番号下線アニメーション */
.company-tel a {
    position: relative;
    display: inline-block;
    font-size: 1.25rem;
    color: #333;
    padding-bottom: 2px;   /* 下線の余白 */
}
/* 常に見える薄い下線 */
.company-tel a::before {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 1px;
    background-color: currentColor;
    opacity: 0.3;
}
/* hover時に走る濃い下線 */
.company-tel a::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 1px;
    background-color: currentColor;
    transform: scaleX(0);
    transform-origin: right;
    transition: transform 0.3s ease;
}

.company-tel a:hover::after,
.company-tel a:focus-visible::after {
    transform: scaleX(1);
    transform-origin: left;
}

.company-license{
    font-size: 0.87rem;
}

/* 右リンク */
.footer-nav span{
    font-size: 0.625rem;
    margin-left: 20px;
}
.footer-nav > ul > li {
    margin-bottom: 30px;
    font-size: 1rem;
}

.sub-menu li{
    position: relative;
    margin: 15px 0 15px 20px;
    font-size: 0.8125rem;
}
.sub-menu li::before{
    content: "-";
    width: 10px;
    height: 10px;
    position: absolute;
    top: 0;
    left: -10px;
}



/* フッター下部 */
.footer-bottom {
    width: 100%;
    padding: 50px 0px 80px!important;
    position: relative;
}
.footer-bottom-wrapper{
    display: flex;
    justify-content: space-between;
    width: 100%;
    max-width: 1200px;
}
.footer-bottom ul{
    display: flex;
}
.footer-bottom ul li{
    margin: 0 15px;
}
/* リストホバー */
.footer-nav li a:hover{
    text-decoration: underline solid 1px #333;
}

/* インスタアイコン */
.icon-insta img{
    width: 25px;
    opacity: 0.6;
    transition: opacity 0.4s ease, transform 0.4s ease;
}
/* ホバー時 */
.icon-insta img:hover {
    opacity: 1;
}


/* 下線 */
.footer-bottom::before{
    content:"";
    position:absolute;
    top:0;
    left:50%;
    transform:translateX(-50%);
    width: calc(100% + 80px);
    height:1px;
    background: rgba(0,0,0,.15);
}


/* ページトップボタン */
.page-top-btn {
    position: absolute;
    bottom: 160px;
    right: 0;
    padding: 0.7em;
    text-align: center;
    transition: 0.3s;
    font-size: 0.87rem;
    opacity: 0.6;
    transition: opacity 0.4s ease, transform 0.4s ease;
}
/* ホバー時 */
.page-top-btn:hover {
    opacity: 1;
}



/* ===== レスポンシブ（768px以下） ===== */
@media (max-width: 768px) {

  /* 上段：会社情報＋ナビを縦積み */
    footer .inner{
        flex-direction: column;
        align-items: flex-start;       /* 左寄せ（中央にしたければ center） */
        gap: 28px;
        padding: 56px 26px!important;           /* 横16pxの安全マージン */
        box-sizing: border-box;
    }

  /* 会社情報：文字サイズ微調整 */
    .company-tel a{
        font-size: 1.125rem;
    }
    .company-license{
        font-size: 0.625rem;
    }
    .company-day{
        margin-bottom: 30px;
    }
    /* ナビ列：各ブロックを全幅に */
    .footer-nav{
        width: 100%;
    }
    .footer-nav > ul > li{
        margin-bottom: 20px;
        font-size: 0.9375rem;
    }
    .footer-nav span{
        font-size: 0.625rem;
        margin-left: 12px;
    }
    .sub-menu li{
        margin: 14px 0 18px 16px;     /* 行間とインデントを浅めに */
        font-size: 0.75rem;
    }
    /* 下段（コピーライト等）：中央寄せ＆折返し */
    .footer-bottom{
        padding: 28px 16px 56px !important;
    }
    .footer-bottom::before{
        left: 0;
        transform: none;
        width: 100%;
    }
    .footer-bottom-wrapper{
        flex-direction: column;
        align-items: center;
        gap: 12px;
        margin: 0 auto;
        width: 100%;
    }
    .footer-bottom ul{
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px 16px;
    }
    .footer-bottom ul li{
        margin: 0;
    }

    /* ページトップ：モバイルはブロック配置に */
    .page-top-btn{
        position: static;
        display: inline-block;
        align-self: center;
        padding: .8em 1.2em;
        border-radius: 50px;
        background: rgba(0,0,0,.05);
        opacity: .8;
    }

    .icon-insta img{
        width: 22px;
    }
}




/*==========================================================================
　アニメーション
============================================================================ */


/* フェードインアップ用アニメーション */
@keyframes fadeInUp {
  0% {
    opacity: 0;
    transform: translateY(30px); /* 下から上へ */
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
.fadeUp {
  opacity: 0;
  transform: translateY(30px);
}

/* 表示されたときに発火 */
.fadeUp.active {
  animation: fadeInUp 0.8s ease-out forwards;
}


/* コンセプト画像アニメーション */
.wrap {
    overflow: hidden;
    position: relative;
}
.wrap::before {
    background: #d8d5d0;
    content: '';
    pointer-events: none;
    position: absolute;
    inset: 0;
    z-index: 1;
    transform: translateX(0); /* 初期は覆った状態 */
}

/* 表示時にアニメ開始 */
.wrap.active::before {
    animation: displayImg 0.6s ease-out forwards;
}

@keyframes displayImg {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(100%);
    }
}
/* フェードインアップ用アニメーション */
@keyframes fadeInUpSwiper {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Swiper の active スライド内の画像だけ発火 */
#pickup .pickup-swiper .swiper-slide-active img {
  animation: fadeInUpSwiper 0.8s ease forwards;
}

/* イベント・コラム　ふわっと持ち上げる */
.lift-anime {
    transition: transform .28s ease, box-shadow .28s ease, background .28s ease;
}
.lift-anime:hover,
.lift-anime:focus-visible {
    transform: translateY(-8px);
    box-shadow: 0 10px 24px rgba(0,0,0,.12);
    background-color: rgba(255,255,255,.6); /* 既存と同じ色 */
}


/* 初期状態 */
#lineup .lineupReveal .lineup-photo {
  /* 右カードを右側から“開く” */
  clip-path: inset(0 100% 0 0);
  transform: translateY(14px);
  transition: clip-path .9s cubic-bezier(.2,.7,0,.98), transform .9s ease;
  will-change: clip-path, transform;
}

#lineup .lineupReveal .lineup-backdrop {
  /* 最初は強めのぼかし＆少し拡大 */
  filter: blur(16px);
  transform: scale(1.12);
  opacity: .72;
  transition: transform .9s ease, filter .9s ease, opacity .9s ease;
  will-change: transform, filter, opacity;
}

/* テキストは段階遅延でふわっと */
#lineup .lineupReveal .lineup-copy > * {
  opacity: 0;
  transform: translateY(16px);
  transition: transform .6s ease, opacity .6s ease;
}

/* アクティブ時（IOで .active が付く） */
#lineup .lineupReveal.active .lineup-photo {
  clip-path: inset(0 0 0 0);
  transform: none;
}
#lineup .lineupReveal.active .lineup-backdrop {
  filter: blur(6px);
  transform: scale(1.06);
  opacity: .92;
}
#lineup .lineupReveal.active .lineup-copy > * {
  opacity: 1;
  transform: none;
}

/* テキスト出現のステップ（子要素ごとにディレイ） */
#lineup .lineupReveal .lineup-number   { transition-delay: .10s; }
#lineup .lineupReveal .lineup-name     { transition-delay: .18s; }
#lineup .lineupReveal .lineup-type     { transition-delay: .26s; }
#lineup .lineupReveal .lineup-catch    { transition-delay: .34s; }
#lineup .lineupReveal .lineup-lead     { transition-delay: .42s; }
#lineup .lineupReveal .btn-next        { transition-delay: .58s; }





/*==========================================================================
　下層ページ共通
============================================================================ */
.subpage-top{
    background: no-repeat center/cover #7d7a7a;
    height: 55vh;
    background-blend-mode: multiply;
    position: relative;
}
.page-title span{
    display: block;
    font-size: 1.25rem;
    font-family:"Yu Gothic", "YuGothic", "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
    letter-spacing: .3em;
}
.page-title{
    font-size: 4rem;
    color: #fff;
    position: absolute;
    bottom: 60px;
    left: 7%;
}

/* パンクズりすと */
.bread ol{
    display: flex;
    align-items: center;
    margin: 60px 100px 80px;
}
.bread ol li{
    margin: 0 30px 0 0;
}
.bread ol li span{
    display: block;
}
.bread ol li a{
    text-decoration: 1px solid underline rgb(138, 131, 121);
    position: relative;
    color: rgb(138, 131, 121);
    letter-spacing: .1em;
}
.bread ol li a:before{
    position: absolute;
    top: 0;
    right: -18px;
    content: "＞";
    color: rgb(138, 131, 121);
}
.bread ol li a{
    transition: 0.3s;
    font-size: 0.87rem;
    opacity: 0.7;
    transition: opacity 0.4s ease, transform 0.4s ease;
}
/* ホバー時 */
.bread ol li a:hover {
    opacity: 1;
}
/* ===== レスポンシブ（768px以下） ===== */
@media (max-width: 768px) {
    .subpage-top{
        height: 40vh!important;
    }
    .page-title span {
        font-size: 0.8rem;
    }
    .page-title{
        font-size: 2.2rem;
    }
    /* パンクズ */
    .bread ol{
        margin: 20px 10px 50px;
        flex-wrap: wrap;
        line-height: 1.7;
    }
    .bread li,
    .bread li span{
        font-size: 0.6rem;
    }
    .bread ol li {
        margin: 0 20px 0 0;
    }
    .bread ol li:last-child{
        margin: 0;
    }
    .bread ol li a:before{
    position: absolute;
    top: 1px;
    right: -17px;
    content: "＞";
    color: rgb(138, 131, 121);
    font-size: 9px;
}

}
/*==========================================================================
　プライバシーポリシー
============================================================================ */
#policy .subpage-top{
    background-image: url(images/policy.webp);
}
.policy-list > p{
    margin-bottom: 70px;
    font-size: 1rem;
}
.policy-list h3{
    margin-bottom: 30px;
    padding-bottom: 15px;
    border-bottom: 1.5px solid rgb(184, 177, 166);
    font-size: 1.4rem;
    font-weight: 600;
    letter-spacing: .05em;
}
.policy-list li{
    margin-bottom: 80px;
}
.policy-list li p{
    margin-bottom: 30px;
    font-size: 1rem;
    line-height: 1.8;
}
/* ===== レスポンシブ（768px以下） ===== */
@media (max-width: 768px) {
#policy .inner{
    padding: 20px!important;
}
.policy-list > p{
    margin-bottom: 40px;
    font-size: 0.8rem;
    line-height: 1.6;
}
.policy-list h3{
    margin-bottom: 15px;
    padding-bottom: 15px;
    font-size: 1rem;
}
.policy-list li{
    margin-bottom: 50px;
}
.policy-list li p{
    margin-bottom: 20px;
    font-size: 0.8rem;
    line-height: 2;
}
}

/*==========================================================================
　ZEHビルダー
============================================================================ */
#zeh .subpage-top{
    background-image: url(images/zeh.webp);
}
#zeh .zeh-list > p{
    margin-bottom: 70px;
    font-size: 1rem;
}
#zeh .zeh-list h3{
    margin-bottom: 30px;
    padding-bottom: 15px;
    border-bottom: 1.5px solid rgb(184, 177, 166);
    font-size: 1.4rem;
    font-weight: 600;
    letter-spacing: .05em;
}
#zeh .zeh-list li{
    margin-bottom: 80px;
}
#zeh .zeh-list li p{
    margin-bottom: 30px;
    font-size: 1rem;
    line-height: 1.8;
}
/* ===== レスポンシブ（768px以下） ===== */
@media (max-width: 768px) {
#zeh .inner{
    padding: 20px!important;
}
#zeh .zeh-list > p{
    margin-bottom: 40px;
    font-size: 0.8rem;
    line-height: 1.6;
}
#zeh .zeh-list h3{
    margin-bottom: 15px;
    padding-bottom: 15px;
    font-size: 1rem;
}
#zeh .zeh-list li{
    margin-bottom: 50px;
}
#zeh .zeh-list li p{
    margin-bottom: 20px;
    font-size: 0.8rem;
    line-height: 2;
}
}

/*==========================================================================
　サイトマップ
============================================================================ */
#site-map .subpage-top{
    background-image: url(images/site-map.webp);
}
#site-map .site-map-list li{
    margin-bottom: 50px;
    padding-bottom: 50px;
    padding-left: 20px;
    border-bottom: 1.5px solid rgb(184, 177, 166);
    font-size: 1.15rem;
    letter-spacing: .06em;
}
#site-map .site-map-sublist li a{

}
#site-map .site-map-sublist{
    display: flex;
    height: 30px;
    margin-left: 10px;
}
#site-map .site-map-sublist li{
    position: relative;
    margin-right: 50px;
    border-bottom: none;
}
#site-map .site-map-sublist li::after{
    position: absolute;
    right: -45px;
    content: "／";
    color:  rgb(184, 177, 166);
}
#site-map .site-map-sublist li:last-child::after{
    display: none;
}
#site-map .site-map-list p{
    margin-bottom: 20px;
}
#site-map ul li a{
    transition: color 0.3s ease;
    padding: 50px 0;
}
#site-map ul li a:hover{
    color: #B22222;
}
/* ===== レスポンシブ（768px以下） ===== */
@media (max-width: 768px) {
    #site-map .site-map-list li{
        margin-bottom: 20px;
        padding-bottom: 20px;
        padding-left: 40px;
        font-size: 0.9rem;
        letter-spacing: .06em;
    }
    #site-map .site-map-sublist{
        display: flex;
        flex-direction: column;
        height: auto;
        margin-left: 10px;
    }
    #site-map .site-map-sublist li{
        position: relative;
        margin-right: 50px;
        margin: 0 50px 0 0;
        font-size: 0.8rem;
        position: relative;
    }
    #site-map .site-map-sublist li::after{
        display: none;
    }
    #site-map .site-map-sublist li::before{
        content: "◼︎";
        top: 0;
        left: 10px;
        position: absolute;
        color: rgb(184, 177, 166);
        font-size: 10px;
    }
    #site-map .site-map-list p{
        font-size: 0.9rem;
        margin-bottom: 20px;
    }
}
/*==========================================================================
　会社概要
============================================================================ */
#company .subpage-top{
    background-image: url(images/company.webp);
}
#company .inner{
    padding: 100px 0 0;
}
/* 会社概要 */
#company .company-info{
    display: flex;
    justify-content: space-between;
    gap: 50px;
    margin-bottom: 100px;
}
#company .company-info>div{
    flex: 1;
}
#company .company-info dt{
    margin-bottom: 10px;
    font-size: 1.2rem;
    letter-spacing: .1em;
    color: #545450;
}
#company .company-info dd{
    margin-bottom: 30px;
    padding-left: 10px;
    font-size: 1.1rem;
    line-height: 1.8;
}
#company .company-img img{
    width: 100%;
    height: 320px;
    object-fit: cover;
}
#company .inner> div{
    margin-bottom: 150px;
}

/* アクセス */
#company iframe{
    margin-bottom: 50px;
}
#company .access p{
    margin-bottom: 20px;
    font-size: 1.1rem;
}
/* スタッフ */
#company .staff-list{
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 30px;
}

/* 各カード内で縦並び＆中央寄せ */
#company .staff-list li{
    display: flex;
    flex-direction: column;
    align-items: center;   /* ← これで画像＆テキストが中央に */
    text-align: center;    /* テキストの中央寄せ */
}

/* 画像の枠を真円＆中央配置 */
#company .staff-img{
    width: 300px;
    aspect-ratio: 1 / 1;   /* 正方形を担保（height固定でもOK） */
    border-radius: 50%;
    overflow: hidden;       /* はみ出しを切る */
}

/* 画像は枠いっぱいにカバー */
#company .staff-img img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;         /* 余計な隙間防止 */
}

/* テキスト */
#company .staff-list li p{
  padding: 15px;
  font-size: 1.1rem;
  letter-spacing: .05em;
}

#company .staff-list li p span{
  display: block;
  margin-bottom: 3px;
  font-size: 0.85rem;
}

/* 沿革　タイムライン */
.timeline{
    position: relative;
    display: grid;
    grid-template-columns: 230px 100px 1fr;
    row-gap: 60px;
    margin-left: 20px;
}
/* 縦の線を擬似要素で */
.timeline::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 120px;
    width: 2px;
    background: #666;
}

.timeline li {
    display: contents; /* 子要素だけをグリッドに流し込む */
}

.timeline .year {
    grid-column: 1;
    font-size: 1.6rem;
    font-weight: bold;
    color: #555;
    position: relative;
}
.timeline .year::after{
    position: absolute;
    top: 9px;
    right: 103px;
    content: "●";
    font-size: 10px;
    color: #666;
}
.timeline .month {
    grid-column: 2;
    align-self: center;
    color: #333;
    font-size: 1.2rem;
}

.timeline .text {
    grid-column: 3;
    align-self: center;
    font-size: 1.2rem;
}

/* メディア */
/* メディア */
#company .media-list{
    /* gridやflexはやめて、カラムレイアウトにする */
    column-count: 2;           /* 2列に分割 */
    column-gap: 150px;         /* 列の間隔（今のgapの横方向に近い値） */
    padding: 0;
    margin: 0;
    list-style: none;
}

#company .media-list li{
    /* カラム内で要素が途中で折れないようにする */
    break-inside: avoid;
    -webkit-column-break-inside: avoid;
    page-break-inside: avoid;

    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 50px;       /* 縦方向の間隔（今のgapの縦方向代わり） */
}

#company .media-list li p:first-of-type{
    margin-bottom: 10px;
    font-size: 0.9rem;
}

#company .media-img{
    flex: 0 0 150px;
    width: 100px;
    height: 190px;
    overflow: hidden;
}
#company .media-img img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}
#company .media-list li a{
    text-decoration: underline 1px #333;
    transition: opacity 0.5s ease;
}
#company .media-list li a:hover{
    opacity: 0.6;
}
/* ===== レスポンシブ（768px以下） ===== */
@media (max-width: 768px){
  /* 余白の基準 */
    #company .inner{
        padding: 0 20px!important;
    }
    #company .inner> div{ margin-bottom: 60px; }
    /* セクション */
    #company .sec-title{
        margin-left: 10px;
        margin-bottom: 30px;
    }
    /* 会社情報：2カラム→縦並び */
    #company .company-info{
        flex-direction: column;
        gap: 24px;
        margin-bottom: 30px;
    }
    #company .company-info dt{
        margin-bottom: 5px;
        font-size: 1rem;
        letter-spacing: .06em;
    }
    #company .company-info dd{
        margin-bottom: 18px;
        padding-left: 10px;
        font-size: .9rem;
        line-height: 1.8;
    }
    #company .company-img img{
        width: 100%;
        height: 170px;       /* 固定高を解除 */
        max-height: 260px;  /* 画像が大きすぎるのを抑制（任意） */
        object-fit: cover;
    }
    /* スタッフ集合写真 */
    #company .company-staff img{
        height: 150px;
        object-fit: cover;
        margin-bottom: 60px;
    }
     
    /* アクセス（地図・文章） */
    #company iframe{
        height: 200px;
        margin-bottom: 24px;
    }
    #company .access p{
        margin-bottom: 18px;
        font-size: .9rem;
        line-height: 1.9;
    }
    /* スタッフ：3列→2列 */
  #company .staff-list{
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
  }
  #company .staff-img{
    width: 150px;
    height: 150px;
    margin: 0 auto;
  }
  #company .staff-list li p{
    font-size: 1rem;
  }
  #company .staff-list li p span{
    font-size: 0.8rem;
  }  /* 沿革：3カラム→2カラム（年 + 内容） */
    .timeline{
        grid-template-columns: 84px 1fr;
        row-gap: 22px;
        margin-left: 20px;
    }
    .timeline::before{
        left: 60px;         /* 縦線位置を中央寄りに */
        width: 2px;
    }
    .timeline .year{
        grid-column: 1;
        font-size: 1rem;
    }
    .timeline .year::after{
        right: auto;
        left: 57px;         /* 縦線上にドット */
        top: 6px;
        font-size: 8px;
    }
        .timeline .month{
            display: none;
        }
    .timeline .text{
        grid-column: 2;
        font-size: 0.9rem;
        line-height: 1.7;
    }

    /* 受賞・掲載歴：2列→1列 / 行間詰め */
  /* 列レイアウト → 1カラムに */
  #company .media-list{
    column-count: 1;      /* 1列にする */
    column-gap: 0;
  }

  #company .media-list li{
    margin-bottom: 30px;  /* 縦の余白少し詰める */
    gap: 16px;
    align-items: center;
  }

  /* 画像サイズを少し小さめに */
  #company .media-img{
    flex: 0 0 110px;
    width: 110px;
    height: 140px;
  }

  /* 日付・本文の文字サイズも少しだけ小さく */
  #company .media-list li p:first-of-type{
    font-size: 0.7rem;
    margin-bottom: 6px;
  }

  #company .media-list li p:last-of-type{
    font-size: 0.85rem;
    line-height: 1.7;
  }
}

/*==========================================================================
　コンセプト
============================================================================ */

#concept-page .subpage-top{
    background-image: url(images/concept.webp);
}
#concept-page  .inner{
    padding: 20px 0!important;
}
#concept-page .concept-list{
    margin-top: 200px;
}
#concept-page .concept-list li{
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 0px;
    margin-bottom: 200px;
}
#concept-page .concept-lead{
    width: 800px;
    padding: 0 80px;
}
#concept-page .concept-list h3{
    margin-bottom: 50px;
    font-size: 2rem;
    letter-spacing: .06em;
    line-height: 1.5;
}
#concept-page .concept-list p{
    margin-bottom: 25px;
    font-size: 1.15rem;
    line-height: 2;
    letter-spacing: .04em;
}
#concept-page .concept-list .concept-img img{
    width: 750px;
    height: 550px;
    object-fit: cover;
}
/* 奇数行（画像が左）の画像に余白ができる問題を解消 */
#concept-page .concept-list li:nth-child(odd) .concept-img {
  margin-right: 0;
  padding-right: 0;
  justify-self: start;
}

/* 念のため、画像が右側のとき（偶数）は左側の余白を統一 */
#concept-page .concept-list li:nth-child(even) .concept-img {
  margin-left: 0;
  padding-left: 0;
  justify-self: end;
}

/* グリッド内の画像を中央に寄せたい場合（整列を安定させる） */
#concept-page .concept-list li {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
}

#concept-page .concept-list .concept-img {
  display: flex;
  justify-content: center;
}

/* 画像ペラっとアニメーショん */
.reveal {
    position: relative;
    overflow: hidden; /* ←はみ出しを隠す */
    display: inline-block;
}

/* 初期状態（画像を左に隠す） */
.reveal img {
    display: block;
    width: 100%;
    transform: scale(1.1); /* 少し拡大しておくと自然 */
    opacity: 0;
    transition: transform 1.2s ease, opacity 1.2s ease;
}
/* 擬似要素で「めくれるマスク」を作る */
.reveal::before {
    content: "";
    position: absolute;
    inset: 0;
    background: #DEDEDA;
    transform: translateX(0);
    transition: transform 1s ease;
    z-index: 2;
}
/* アニメーション開始後の状態 */
.reveal.show::before {
  transform: translateX(100%); /* ←マスクが右へスライドして消える */
}
.reveal.show img {
    opacity: 1;
    transform: scale(1); /* 拡大から自然に戻す */
}

/* 共通 */
#concept-page::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -10vh;
  height: 20vh;
  background: url(images/xxx.svg) no-repeat center/cover;
}



/* ===== レスポンシブ（768px以下） ===== */
@media (max-width: 768px) {
#concept-page  .inner{
    padding:0!important;
}
  /* 全体の余白を少し詰める */
  #concept-page .concept-list {
    margin-top: 80px;
  }

  #concept-page .concept-list li {
    grid-template-columns: 1fr; /* 2カラム → 1カラム */
    gap: 24px;
    margin-bottom: 40px;
  }

  /* テキストブロックの幅・余白をスマホ用に */
  #concept-page .concept-lead {
    width: auto;
    padding: 16px;
  }

  #concept-page .concept-list h3 {
    margin-bottom: 24px;
    font-size: 1.1rem;
    line-height: 1.6;
  }

  #concept-page .concept-list p {
    margin-bottom: 14px;
    font-size: .8rem;
    line-height: 1.9;
  }

  /* 画像サイズを画面幅に合わせる */
  #concept-page .concept-list .concept-img {
    justify-content: center;
    padding: 0;
        width: 100%;
  }

  #concept-page .concept-list .concept-img img {
    width: 100%;
    max-width: 100%;
    height: 280px;       /* 固定高さ解除 */
    object-fit: cover;
  }

  /* 偶数行（もともと右画像）もスマホでは画像を先頭に */
  #concept-page .concept-list li:nth-child(even) .concept-img {
    order: -1;
  }
  /* SP 用にちょっとだけ位置を調整 */
  #concept-page::before {
    bottom: -6vh;     /* 少し控えめに */
    height: 18vh;     /* 画像が大き過ぎるなら縮める */
  }
}

/*======================================================================
　強みバナー
============================================================================ */
.strength-banner .inner{
    background: url(images/strength-banner.webp) no-repeat center/cover;
    margin-bottom: 100px;
    display: grid;
    grid-template-columns: 1.3fr 2fr;
    align-items: stretch;
    padding: 0!important;
}
/* 左のタイトルは個別に中央寄せ（親が stretch でもOK） */
.strength-banner .inner > div:first-child{
  display: flex;
  align-items: center;
  justify-content: center;
}

.strength-banner .strength-banner-title{
  font-size: 1.6rem;
  text-align: center;
  letter-spacing: .15em;
  font-weight: 700;
  color: #fff;
}
.strength-banner .strength-banner-title span{
    display: block;
    font-size: 0.95rem;
    margin-bottom: 8px;
}
/* 右側パネル */
.strength-banner .strength-banner-info {
  background-color: rgba(255,255,255,0.3);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  width: 100%;
  padding: 30px 40px;
  display: flex;
  align-items: stretch;
  justify-content: center;
}

/* グリッド */
.strength-banner .strength-banner-info ul{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  width: 100%;
}

/* カード */
.strength-banner .strength-banner-info ul li a{
      /* border: 1px solid #ffffff76; */
  position: relative;           /* ← アイコン基準 */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: #fff;
  font-size: 1rem;
  letter-spacing: .15em;
  border-radius: 10px;
  width: 100%;
  height: 90px;
  padding: 20px;
  background: rgba(255,255,255,0.08);
  transition: transform .3s ease, box-shadow .3s ease, background-color .3s ease;
}

.strength-banner .strength-banner-info ul li a:hover{
  transform: translateY(-5px);
  background: rgba(255,255,255,0.15);
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}

/* 右下アイコン（a::after に集約） */
.strength-banner .strength-banner-info ul li a::after{
  content: "";
  position: absolute;
  right: 14px;
  bottom: 12px;
  width: 26px;
  height: 26px;
  background: no-repeat center/contain;
  filter: brightness(0) invert(1);
  transition: transform .25s ease, opacity .25s ease;
  opacity: .9;
}
.strength-banner .strength-banner-info ul li a:hover::after{
  transform: translateY(-3px);
  opacity: 1;
}


/* アイコン割り当て */
.strength-banner .strength-banner-info ul li:nth-of-type(1) a::after { background-image: url(images/pen.svg); }
.strength-banner .strength-banner-info ul li:nth-of-type(2) a::after { background-image: url(images/analyze.svg); }
.strength-banner .strength-banner-info ul li:nth-of-type(3) a::after { background-image: url(images/scana.svg); }
.strength-banner .strength-banner-info ul li:nth-of-type(4) a::after { background-image: url(images/flow.svg); }
.strength-banner .strength-banner-info ul li:nth-of-type(5) a::after { background-image: url(images/support.svg); }
/* ===== レスポンシブ（768px以下） ===== */
@media (max-width: 768px){
  /* 全体：高さ固定を解除して1カラムに */
  .strength-banner{
    margin: 20px;
  }
    .strength-banner .inner{
        height: auto;
        gap: 0!important;
        display: grid;
        grid-template-columns: 1fr;
        align-items: stretch;
        background: url(images/strength-banner.webp) no-repeat 80% 90% /cover;
        border-radius: 3px;
    }
    /* タイトル */
    .strength-banner .strength-banner-title span{
        font-size: 0.8rem;
    }
    .strength-banner .strength-banner-title{
        min-height: 130px;          /* 目安の高さを確保 */
        font-size: 1.1rem!important;      /* 1.5rem → 1.2rem */
        padding: 24px 16px!important;
    }

  /* 情報側：パディング縮小、背景ブラーは負荷軽減でオフ */
  .strength-banner .strength-banner-info{
    padding: 24px 20px;         /* 100px 50px → 24px 16px */
    height: auto;
    backdrop-filter: none;
    /* background-color: rgba(255,255,255,0.65); */
  }

  /* リスト：2→1列、ギャップ/行高調整 */
  .strength-banner .strength-banner-info ul{
    grid-template-columns: 1fr; /* 2列 → 1列 */
    gap: 0;
    height: auto;
  }

  /* 各リンク：タップしやすい余白に、文字少し縮小 */
  .strength-banner .strength-banner-info ul li a{
    font-size: .9rem;            /* 1.1rem → 1rem */
    margin: 0;             /* 30px → 12px */
    padding: 0px!important;        /* 左の余白はアイコン用 */
    height: 60px;
  }
  .strength-banner .strength-banner-info ul li a::before{
    content: "";
    position: absolute;
    top: 50%;
    left: 8px;
    transform: translateY(-50%);
    width: 22px;
    height: 22px;
    background-repeat: no-repeat;
    background-size: contain;
    filter: brightness(0) invert(1); /* 白っぽく見せるなら */
  }
  .strength-banner .strength-banner-info ul li a::after {
    right: 25px;
    bottom: 21px;
    width: 20px;
    height: 20px;
}
}


/*==========================================================================
　イベント情報(アーカイブ)
============================================================================ */
#archive-event-page .subpage-top{
    background-image: url(images/event-page.webp);
}

.event-page-kind{
    display: flex;
    justify-content: center;
    padding-bottom: 20px;
    border-bottom: 1.8px solid #B22222;
    letter-spacing: .1em;
    font-size: 1.6rem;
}
.event-page-kind li{
    margin: 0 20px;
}

/* 下線アニメーション */
.event-page-kind li a{
    color:#333;
    font-size:1rem;
    font-weight:bold;
    margin:0 11px;
    padding:10px 4px 6px;
    position:relative;
    display:inline-block;
}

.event-page-kind li a::after{
    content:"";
    position:absolute;
    left:0;
    bottom:0;
    width:100%;
    height:1px;
    background: #B22222;
    transform:scaleX(0);
    transform-origin:right;
    transition:transform .3s ease;
}

.event-page-kind li a:hover::after{
    transform:scaleX(1);
    transform-origin:left;
}
.event-page-kind .category__tab-b{
    color:#B22222;
    font-size:1rem;
    font-weight:bold;
    margin:0 11px;
    padding:10px 4px 6px;
    position:relative;
    display:inline-block;
}
.event-page-list{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 30px;
    margin: 100px 0;
}
.event-page-list li{
    background-color: #ffffff4d;
    box-shadow: 3px 3px 8px rgba(0, 0, 0, 0.025);
    border-radius: 3px;
    padding: 10px 10px 0px;
}
.event-page-list-txt{
    padding: 15px;
}
.event-page-list h3{
    padding-bottom:5px;
    margin: 6px 0 15px;
    font-size: 1.2rem;
    letter-spacing: .05em;
    line-height: 1.5;
    border-bottom: 1.5px dashed #aba69eff;
}
.event-page-list dl div{
    display: flex;
    align-items: flex-start;
}
.event-page-list dt img{
    width: 18px;
    margin-right: 15px;
    padding-top: 3px;
}
.event-page-list dd{
    line-height: 1.8;
    font-size: 0.85rem;
    letter-spacing: .1em;
    margin-bottom: 5px;
}
/* 画像タグ */
.event-thumb {
    aspect-ratio: 4 / 5;
    overflow: hidden;
    position: relative;
}
.event-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
/* タグ　*/
.event-page-list .lift-anime .event-page-list-txt{
    position: relative;
}
.event-page-list .lift-anime .event-page-list-tag{
    position: absolute;
    right: 10px;
    top: 10px;
    background: #B22222;
    color: #fff;
    padding: 3px 10px;
    font-size: 0.7rem;
    line-height: 1.5;
    border-radius: 5px;
    letter-spacing: .08em;
    box-shadow: 0 2px 6px rgba(0,0,0,.15);
    z-index:1;
}
/* ご紹介キャンペーンバナー */
.intro-banner{
    text-align: center;
}
.intro-banner a{
    display:block;
    overflow:hidden;
}
.intro-banner img{
    display:block;
    width:100%;
    height:auto;
    transition: transform .35s ease;
    transform-origin: center;
}
.intro-banner a:hover img,
.intro-banner a:focus-visible img{
    transform: scale(1.03);
}

/* ページネーション */
.page-nation{
    text-align: center;
}
.page-nation li {
    display: inline-block;
    width: 40px;
    height: 40px;
    margin: 50px 15px;
    text-align: center;
    font-size: 0.9rem;
}

.page-nation li a {
    display: block;
    width: 100%;
    height: 100%;
    line-height: 40px;
    transition: background-color .3s ease;
    border-radius: 50%;
}
.page-nation li a:hover{
    background-color: rgba(107,103,100,.18);
    box-shadow: 0 6px 14px rgba(0,0,0,.12);
    border-radius: 50%;
    line-height: 40px;
}
/* .page-nation li.active {
    border-radius: 50%;
    background-color: #6b6764;
    color: #fff;
    line-height: 40px;
} */
.page-nation .current {
    background-color: #6b6764;
    color: #fff;
    border-radius: 50%;
    line-height: 40px;
    display: block;
}
/* サムネ基礎 */
.event-page-list .event-thumb{
  position: relative;
  overflow: hidden;
}

/* サムネ画像は背面に固定 */
.event-page-list .event-thumb img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  position: relative;
  z-index: 0;
}

/* 終了オーバーレイ */
/* 終了オーバーレイ */
.event-page-list .event-thumb{ position:relative; overflow:hidden; }
.event-page-list .event-thumb img{
  width:100%; height:100%; object-fit:cover; display:block; position:relative; z-index:0;
}
.event-page-list .event-thumb::before{
  content:"終了しました";
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  background:rgba(0,0,0,.55); color:#fff; font-size:1.2rem; letter-spacing:.1em;
  opacity:0; transition:opacity .3s ease; z-index:2;
}
.event-page-list .event-thumb.finished::before{ opacity:1; }

/* クリック無効（a 自体に付与） */
.event-page-list a.finished{
  pointer-events:none;
  cursor:default;
}

/* 見た目の無効化（任意） */
.event-page-list li.finished{ opacity:.9; filter:grayscale(10%); }


/* ===== レスポンシブ（768px以下） ===== */
@media (max-width: 768px) {
    .inner {
        padding: 90px 0!important;
    }
    #archive-event-page .subpage-top{
        background-position: 75% center;
    }
    .event-page-list{
        display: grid;
        grid-template-columns: 1fr;
        gap: 50px;
        margin: 50px 10px 10px;
    }
    .event-page-kind{
        display: flex;
        justify-content: center;
        padding-bottom: 10px;
        letter-spacing: .04em;
    }
    .event-page-kind li{
        margin: 0;
    }
    .event-page-kind li a{
        font-size: 0.8rem;
        margin: 0;
        padding: 15px;
    }
    .event-page-list-txt h3{
        font-size: 1.1rem;
    }

}
/*==========================================================================
　イベント情報(シングル)
============================================================================ */
#single-event-page .subpage-top{
    background-image: url(images/event-page.webp);
}
#single-event-page article{
    display: flex;
    margin-top: 200px;
}
/* 左！！！！！ */
#single-event-page .title-wrap{
    position: sticky;
    top: 80px;
    width: 30%;
    max-height: calc(100vh - 80px - 20px);
    border: 1.5px solid #333;
    border-radius: 3px;
    padding: 50px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-left: 50px;
    box-sizing: border-box;

}
#single-event-page .title-wrap .tag{
    position: relative;
}
#single-event-page  h3{
    font-size: 1.3rem;
    letter-spacing: .08em;
    line-height: 1.4;
    margin-bottom: 20px;
    font-weight: bold;
}
#single-event-page .event-page-list-tag{
    position: absolute;
    left: 0px;
    top: -40px;
    background: #B22222;
    color: #fff;
    padding: 3px 15px;
    font-size: .85rem;
    line-height: 1.5;
    border-radius: 6px;
    letter-spacing: .08em;
    box-shadow: 0 2px 6px rgba(0,0,0,.15);
    z-index:1;
}
/* イベント情報 */
.single-event-info{
    margin-bottom: 100px;
    display: flex;
    align-items: center;
    gap: 50px;
}
#single-event-page .event-info-list {
    width: 100%;
    max-width: 650px;
    margin: 20px auto 0;
    padding: 20px;
    border: 1px solid #333;
    border-radius: 3px;
}
#single-event-page .event-info-list div{
    display: flex;
    align-items: flex-start;
}
#single-event-page .event-info-list dt img{
    width: 20px;
    height: 20px;
    margin-right: 10px;
    padding-top: 5px;
}
#single-event-page .event-info-list dd{
    line-height: 1.8;
    font-size: .95rem;
    letter-spacing: .1em;
    margin-bottom: 5px;
}
/* 物件情報 */
#single-event-page .event-info-list2 {
    width: 100%;
    max-width: 650px;
    margin: 20px auto 0;
    padding: 20px 25px;
    border: 1px solid #333;
    border-radius: 3px;
}
#single-event-page .event-info-list2 div{
    display: flex;
    gap: 10px;
    align-items: center;
    margin-bottom: 5px;
}
#single-event-page .event-info-list2 dt{
    width: 90px;
}
#single-event-page .event-info-list2 dd{
    line-height: 1.8;
    font-size: .9rem;
    letter-spacing: .1em;
}
/* #single-event-page .promise{
    font-size: 0.8rem;
    margin-top: 20px;
    padding: 5px;
} */


/* ボタン */
#single-event-page .title-wrap .btn-layout{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 5px;
    margin-top: 80px;
}
#single-event-page .title-wrap .btn-layout .btn-next {
  width: 100%; /* liなどの親にも幅を指定しておくと安定 */
}
#single-event-page .title-wrap .btn-layout .btn-next a {
    display: block;
    width: 100%;
    text-align: center;
    font-size: .9rem;
    letter-spacing: .08em;
    padding: 20px 0;
    background-color: #545450;
    color: #fff;
    border-radius: 3px;
    transition: opacity .3s;
}
#single-event-page .title-wrap .btn-layout .btn-next a::before {
    display: none;
}
#single-event-page .title-wrap .btn-layout .btn-next a::after {
    display: none;
}
/* 横棒 */
#single-event-page .title-wrap .btn-layout .btn-next a span::before {
    background-color: #fff;
}
/* 斜め棒 */
#single-event-page .title-wrap .btn-layout .btn-next a span::after {
    border-top: 1.2px solid #fff;
}
#single-event-page .title-wrap .btn-layout .btn-next a:hover{
    opacity: 0.9;
}



/* 右！！！！！ */
#single-event-page .right{
    width: 70%;
    /* background-color: orange; */
    padding: 60px;
    border-radius: 3px;
}
/* サムネイル */
#single-event-page .event-img {
    width: 100%;
    max-width: 550px;
    margin: 0 auto;
}
#single-event-page .event-img img {
    width: 100%;
    max-width: 550px;
    height: auto;
    object-fit: cover;
}

/* ご来場特典バナー */
#single-event-page .present{

}

/* ハイライト */
#single-event-page .highlight h3{
    font-size: 1.5rem;
    letter-spacing: .08em;
    margin-bottom: 50px;
    margin-top: 20px;
    line-height: 1.6;
    padding-bottom: 5px;
    border-bottom: 1.5px solid #B22222;
}
#single-event-page .highlight  p {
    line-height: 2;
    letter-spacing: .04em;
    font-size: 1.15rem;
    margin-top: 10px;
    margin-bottom: 15px;
}
/* イベントポイント */
#single-event-page .single-event-point{
    background-color:#ffffff4d;
    border-radius: 3px;
    padding: 50px;
    margin-bottom: 80px;
}
#single-event-page .single-event-point h4{
    font-size: 1.6rem;
    font-family: "Lato", sans-serif;
    margin: 20px 0;
    color: #6b6764;

}
#single-event-page .single-event-point .point-txt{
    font-size: 1.1rem;
    line-height: 1.8;
    margin-bottom: 30px;
}

/* イベントアクセス */
#single-event-page .event-access{
    margin: 150px 0;
}
#single-event-page .event-access-list{
    width: 100%;
    max-width: 1000px;
    margin: 30px auto;
}
#single-event-page .event-access-list div{
    border-bottom: 1px solid rgba(0, 0, 0, .15);
    display: grid;
    align-items: center;
    grid-template-columns: 0.5fr 1.5fr;
    gap: 50px;
    padding: 20px;
}
#single-event-page .event-access-list div dt{
    font-size: 1rem;
    letter-spacing: .1em;
}

/* イベント予約 */
#single-event-page .event-reserve-notice{
    background-color: #ffffff9d;
    border-radius: 3px;
    padding: 50px 80px;
    margin: 60px auto 130px;
}
#single-event-page .event-reserve-notice li{
    margin-bottom: 20px;
    font-size: 1.1rem;
    line-height: 1.7;
    position:relative;
}
#single-event-page .event-reserve-notice li::before{
    position: absolute;
    top: 0;
    left: -30px;
    content: "◼︎";
    color: rgba(0, 0, 0, .15);
}
#single-event-page .event-form,
#consultation-page .event-form,
#catalog-page .event-form{
    font-size: 1.7rem;
    letter-spacing: .1em;
    color: #fff;
    background-color: #545450;
    padding: 40px 40px 40px 100px;
    position: relative;
}
#single-event-page .event-form::before,
#consultation-page .event-form::before,
#catalog-page .event-form::before{
    content: "";
    width: 31px;
    height: 31px;
    position: absolute;
    top: 46px;
    left: 50px;
    background: url(images/icon-mail.svg) no-repeat,center/contain;
}
#single-event-page .event-form-notice,
#consultation-page .event-form-notice,
#catalog-page .event-form-notice,
#contact-page .event-form-notice{
    padding: 20px 80px;
    margin: 60px auto 0px;
}
#single-event-page .event-form-notice li,
#consultation-page .event-form-notice li,
#catalog-page .event-form-notice li,
#contact-page .event-form-notice li{
    margin-bottom: 20px;
    font-size: 1rem;
    line-height: 1.7;
    position:relative;
}
#single-event-page .event-form-notice li::before,
#consultation-page .event-form-notice li::before,
#catalog-page .event-form-notice li::before,
#contact-page .event-form-notice li::before{
    position: absolute;
    top: 0;
    left: -30px;
    content: "◼︎";
    color: rgba(0, 0, 0, .15);
}

/* =========================================================
    768px以下（スマホ用）
========================================================= */
@media (max-width: 768px){
  /* ---- 全体レイアウト ---- */
#single-event-page article{
    flex-direction: column;
    margin-top: 80px;
    padding: 0 10px;
}
#single-event-page .single-event-point {
    padding: 16px;
    margin-bottom: 40px;
}
  /* ---- 左サイド（タイトル枠） ---- */
  #single-event-page .title-wrap{
      position: relative;
      top: 0;
      width: 100%;
      max-height: none;
      margin: 0 0 40px;
      padding: 50px 20px 30px;
  }

  #single-event-page .event-page-list-tag{
      top: -30px;
      left: 0;
      font-size: 0.7rem;
      padding: 2px 10px;
  }

  /* ボタンを横並び → 縦 */
  #single-event-page .title-wrap .btn-layout{
      flex-direction: column;
      gap: 10px;
      margin-top: 40px;
  }

  #single-event-page .title-wrap .btn-layout .btn-next a{
      font-size: .85rem;
      padding: 16px 0;
  }

  /* ---- 右（本文） ---- */
  #single-event-page .right{
      width: 100%;
      padding: 0;
  }

  /* サムネイル */
  #single-event-page .event-img{
    max-width: 100%;
    margin-bottom: 40px;
  }

  #single-event-page .event-img img{
      width: 100%;
      height: auto;
  }

  /* ---- イベント情報ブロック ---- */
  #single-event-page h3 {
    font-size: 1.1rem;
    margin-bottom: 16px;
}
  #single-event-page .event-info-list,
  #single-event-page .event-info-list2 {
      max-width: 100%;
      margin:0 0 20px;
      padding: 20px;
  }
    #single-event-page .title-wrap .btn-layout {
        margin-top: 0px;
    }
  #single-event-page .event-info-list div,
  #single-event-page .event-info-list2 div{
      flex-direction: row;
      gap: 15px;
  }

  #single-event-page .event-info-list2 dt{
      width: auto;
      font-size: .9rem;
  }
/* イベント情報 */
#single-event-page .event-info-list div{
    display: flex;
    align-items: flex-start;
    column-gap: 18px;          /* ★ dtとddの間の余白をここで統一 */
}

/* アイコン側 */
#single-event-page .event-info-list dt{
    flex: 0 0 28px;            /* ★ アイコン用の幅を固定 */
    display: flex;
    justify-content: center;
}

/* アイコン画像 */
#single-event-page .event-info-list dt img{
    width: 20px;
    height: 20px;
    margin-right: 0;           /* ★ ここは消す */
    padding-top: 5px;
}

/* テキスト側 */
#single-event-page .event-info-list dd{
    line-height: 1.8;
    font-size: .95rem;
    letter-spacing: .1em;
    margin-bottom: 5px;
}
  /* テキスト */
  #single-event-page .highlight h3 {
    font-size: 1.1rem;
    margin-bottom: 30px;
    margin-top: 20px;
    }
    .wp-block-image img {
        margin-bottom: 0px;
    }
    #single-event-page .single-event-point h4 {
        font-size: 1.3rem;
        margin: 0;
    }
    #single-event-page .highlight p {
        line-height: 1.8;
        font-size: .8rem;
        margin-bottom: 15px;
        margin-top: 5px;
    }


      /* 2列 → 1列に見えるけど dt の幅をそろえて揃える */
  #single-event-page .event-info-list2 div{
      display: grid;
      grid-template-columns: 90px 1fr;   /* ← dt と dd の位置を統一 */
      align-items: start;
      column-gap: 0px;
      margin-bottom: 10px;
  }

  /* dt：スマホ用に小さく */
  #single-event-page .event-info-list2 dt{
      width: auto;
      font-size: .85rem;
  }

  /* dd：余白調整 */
  #single-event-page .event-info-list2 dd{
      font-size: .85rem;
      margin: 0;
      line-height: 1.7;
  }
  /* ---- アクセス ---- */
  #single-event-page .event-access{
      margin: 80px 0;
      padding: 0 10px;
  }

  #single-event-page .event-access-list{
      max-width: 100%;
  }
    #single-event-page .event-access  iframe{
        height: 260px;
    }
  #single-event-page .event-access-list div{
      grid-template-columns: 1fr;
      gap: 10px;
      padding: 15px 10px;
  }

  #single-event-page .event-access-list dt{
      font-size: .9rem;
  }
#single-event-page .event-info-list dd {
    line-height: 1.8;
    font-size: .85rem;
    margin-bottom: 5px;
}
  /* ---- 予約案内 ---- */
  #single-event-page .event-reserve-notice{
        padding:30px;
        margin: 30px 16px ;
  }
    #single-event-page .event-reserve-notice li::before {
        left: -20px;
    }
  #single-event-page .event-reserve-notice li{
        font-size: .8rem;
        margin-bottom: 15px;
  }

  #single-event-page .event-form{
        font-size: 1.2rem;
        padding: 30px 20px 30px 60px;
  }
    #single-event-page .event-form::before{
        top: 31px;
        left: 27px;
        width: 24px;
        height: 24px;
    }
    #single-event-page .event-form-notice{
        padding: 10px 30px;
        margin: 0px 0 0;
    }
    #single-event-page .event-form-notice li{
        font-size: .8rem;
        margin-bottom: 15px;
    }
    #single-event-page .event-form-notice li::before,
    #consultation-page .event-form-notice li::before,
    #catalog-page .event-form-notice li::before,
    #contact-page .event-form-notice li::before{
        left: -20px;
    }
}
/*==========================================================================
　施工事例(シングル)
============================================================================ */
#single-works-page .subpage-top{
    background-image: url(images/works-page.webp);
}
#single-works-page .inner{
    padding-bottom: 0;
}
/* タイトル */
#single-works-page .title-wrap h3 {
    font-size: 2.2rem;
    letter-spacing: .08em;
    margin-bottom: 50px;
    margin-top: 20px;
    line-height: 1.6;
}
#single-works-page  h3 {
    font-size: 1.5rem;
    letter-spacing: .08em;
    margin-bottom: 50px;
    margin-top: 20px;
    line-height: 1.6;
}
#single-works-page .wp-block-heading{
    margin-bottom: 20px;
}
/* タグ（リボン） */
#single-works-page .title-wrap {
    position: relative;
}
#single-works-page .single-works-tag{
    position: absolute;
    left: 0;
    top: -50px;
    background: #B22222;
    color: #fff;
    padding: 5px 15px;
    font-size: .85rem;
    line-height: 1.5;
    border-radius: 6px;
    letter-spacing: .1em;
    box-shadow: 0 2px 6px rgba(0,0,0,.15);
    z-index: 1;
}

/* レイアウト（2カラム） */
#single-works-page .single-works-layout{
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 100px;
    margin-bottom: 100px;
}

/* メイン画像：親幅にフィット */
#single-works-page .single-works-img img{
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
}

/* セクション見出し（共通） */
#single-works-page .works-data h4,
#single-works-page .works-point h4{
    font-size: 1.7rem;
    font-family: "Lato", sans-serif;
    position: relative;
    margin-bottom: 20px;
    padding-bottom: 10px;
    letter-spacing: .04em;
}
#single-works-page .works-data h4::after,
#single-works-page .works-point h4::after{
    position: absolute;
    bottom: 0;
    left: 0;
    content: "";
    border-bottom: 3px solid #B22222;
    width: 30px;
}

/* データテーブル */
#single-works-page .works-data dl{
    margin-bottom: 50px;
}
#single-works-page .works-data dl dt{
    font-size: 1rem;
    letter-spacing: .1em;
    font-weight: normal;
}
#single-works-page .works-data dl > div{
    display: grid;
    grid-template-columns: 0.5fr 1.5fr;
    align-items: center;
    gap: 100px;
    padding: 20px;
    border-bottom: 1px solid rgba(0,0,0,.15);
}

/* タグ群（折り返し＆gap管理） */
#single-works-page .works-point ul{
    display: flex;
    flex-wrap: wrap;
    gap: 8px 10px;
    margin-top: 20px;
}
#single-works-page .works-point ul li{
    border: 1px solid #333;
    padding: 8px 10px;
    font-size: .8rem;
    letter-spacing: .1em;
}

/* ポイントブロック */
#single-works-page .single-works-point{
    background: #ffffff9d;
    border-radius: 3px;
    padding: 50px;
    margin-bottom: 40px;
}
#single-works-page .single-works-point p{
    line-height: 2;
    letter-spacing: .04em;
    font-size: 1.15rem;
    margin-top: 10px;
}
/* テキスト */
#single-works-page .point-title {
    font-size: 1.8rem;
    letter-spacing: .1em;
    margin: 30px 0 30px;
}
#single-works-page .point-text{
    line-height: 1.6;
    letter-spacing: .04em;
    font-size: 1.15rem;
    margin-top: 30px;
}
/* 画像2枚並び */
/* #single-works-page .single-works-point .point-images{
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    margin-bottom: 20px;
}

#single-works-page .single-works-point .point-images img{
    width: calc(50% - 10px);
    height: auto;
    object-fit: cover;
    display: block;
    border-radius: 6px;
} */
.point-images {
  display: flex;
  flex-wrap: wrap;      /* 2枚以上のとき自動で改行 */
  gap: 20px;            /* 画像の間隔 */
  justify-content: center;
}

.point-images img {
  width: calc(50% - 10px); /* 2枚なら半分ずつ */
  height: 800px;           /* 高さを固定して揃える */
  object-fit: cover;       /* はみ出さずトリミング */
  border-radius: 6px;
  display: block;
}

.wp-block-image img{
    border-radius: 3px;
    width: 100%;
    margin-bottom: 10px;
    object-fit: cover;
}
/* 親カードを基準化 */
.works-layout [class^="works-layout-item"] { position: relative; overflow: hidden; }
.works-layout [class^="works-layout-item"] a { position: relative; display: block; }

/* 画像ズーム */
.works-layout [class^="works-layout-item"] a img {
  display:block; width:100%; height:auto; transition: transform .35s ease;
}

/* 黒幕 */
.works-layout [class^="works-layout-item"] a::before {
  content:""; position:absolute; inset:0;
  background:rgba(0,0,0,.35); opacity:0; transition:opacity .25s ease; z-index:1;
}

/* タイトル（JSで data-title を入れる） */
.works-layout [class^="works-layout-item"] a::after {
  content: attr(data-title);
  position:absolute; inset:0; display:grid; place-items:center;
  color:#fff; font-size:1.1rem; letter-spacing:.05em; text-align:center;
  padding: 0 12px; opacity:0; transition:opacity .25s ease; z-index:2;
}

/* ホバー */
.works-layout [class^="works-layout-item"] a:hover::before { opacity:1; }
.works-layout [class^="works-layout-item"] a:hover img { transform: scale(1.05); }
.works-layout [class^="works-layout-item"] a:hover::after { opacity:1; }





/* ===== レスポンシブ（768px以下） ===== */
@media (max-width: 768px) {
    #single-works-page .inner{
        padding: 0px!important;
    }
    #single-works-page h3 {
        font-size: 1.2rem;
        letter-spacing: .08em;
        margin-bottom: 15px;
        line-height: 1.4;
    }
    /* タイトル */
    #single-works-page .title-wrap{
        padding: 0 20px!important;
    }
    #single-works-page .title-wrap h3 {
        font-size: 1.2rem;
        margin-bottom: 50px;
        padding-top: 35px;
    }

    #single-works-page .single-works-tag {
        position: absolute;
        top: 0;
        left: 20px;
        font-size: .7rem;
        padding: 4px 10px;
        border-radius: 4px;
    }

    /* 2カラム → 1カラム */
    #single-works-page .single-works-layout {
        grid-template-columns: 1fr;
        gap: 30px;
        margin-bottom: 60px;
    }

    /* 画像サイズ調整 */
    #single-works-page .single-works-img img {
        width: 100%;
        height: auto;
        aspect-ratio: 4 / 3;
        object-fit: cover;
    }
    #single-works-page .wp-block-image img{
        margin: 0;
    }
    /* データの行：2列→縦積み */
    #single-works-page .works-data{
        padding: 0 20px;
    }
    #single-works-page .works-data dl{
        padding: 10px;
    }
    #single-works-page .works-data dl > div {
        grid-template-columns: 1fr 2fr;
        gap: 6px;
        padding: 10px 0;
    }

    #single-works-page .works-data dl dt {
        font-size: .9rem;
        opacity: .9;
    }

    /* ポイントタグ（features）を折り返し */
    #single-works-page .works-point ul {
        flex-wrap: wrap;
        gap: 8px;
        margin-top: 14px;
    }

    #single-works-page .works-point ul li {
        margin-right: 0;
        padding: 8px 10px;
        font-size: .78rem;
    }

    /* 見出し */
    #single-works-page .wp-block-heading {
        margin: 0px 0 10px;
        font-size: 1.1rem;
        }
    #single-works-page .works-data h4,
    #single-works-page .works-point h4 {
        font-size: 1.2rem;
        margin-bottom: 14px;
        padding-bottom: 8px;
    }

    #single-works-page .works-data h4::after,
    #single-works-page .works-point h4::after {
        border-bottom-width: 2px;
        width: 26px;
    }

    /* ポイントセクション */
    #single-works-page .single-works-point {
        padding: 16px 10px 16px;
        margin: 10px 10px 30px;
    }

    #single-works-page .single-works-point p {
        font-size: 0.8rem;
        margin-top: 10px;
        line-height: 1.6;
    }
}
/*==========================================================================
　資料請求(カタログ)
============================================================================ */
#catalog-page .subpage-top{
    background-image: url(images/catalog.webp);
}

/* カタログ最初の文章 */
.catalog-lead{
    text-align: center;
}
.catalog-lead h3{
    font-size: 2.5rem;
    line-height: 1.5;
    letter-spacing: .1em;
    margin-bottom: 50px;
}
.catalog-lead h3 span{
    display: block;
    font-size: 1.4rem;
    margin-bottom: 12px;
}
.catalog-lead .present{
    font-size: 1.5rem;
    color: #B22222;
    text-decoration: 1px underline #B22222;
    display: inline-block;
    margin: 0 5px;
}
.catalog-lead p{
    margin-bottom: 30px;
    line-height: 2;
    font-size: 1.1rem;
}
.catalog-lead .btn-next{
    margin: 30px 0 100px;
}
.catalog-lead span {
    display: block;
    font-size: 1.1rem;
    margin-bottom: 10px;

}
/* カタログ内容 */
.catalog-content{
    padding: 80px 50px;
    border: 4px #8a8379 dotted;
    margin-bottom: 60px;
}
.catalog-content h3{
    font-size: 1.8rem;
    text-align: center;
    margin-bottom: 80px;
    letter-spacing: .08em;
}
.catalog-list{
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 30px;
}
.catalog-list-img img{
    width: 100%;
    height: 260px;
    object-fit: cover;
}
.catalog-list li p:first-of-type{
    font-size: 1.2rem;
    line-height: 2;
    letter-spacing: .05em;
    margin-top: 5px;
}
/* ここがよかった */
.catalog-good{
    padding: 150px 0;
}
.catalog-good h3{
    font-size: 2.5rem;
    text-align: center;
    margin-bottom: 100px;
    letter-spacing: .08em;
}

.catalog-point {
    display: grid;
    grid-template-columns: 700px 1fr;
    gap: 200px;
    align-items: center;
    margin-bottom: 150px;
}
.catalog-point img {
    width: 750px;
    height: 550px;
    object-fit: cover;
}

.catalog-point-txt{
    margin-left: 150px;
}
.catalog-point-txt p:last-child{
    margin-bottom: 25px;
    font-size: 1.15rem;
    line-height: 2;
    letter-spacing: .04em;
}

.catalog-point h4{
    margin-bottom: 50px;
    font-size: 2rem;
    letter-spacing: .06em;
    line-height: 1.5;
}
.catalog-point div p:nth-of-type(2){
    line-height: 2;
}

/* ---------- 左右入れ替え ---------- */
.catalog-point.reverse{
    grid-template-columns: 1fr 700px;
}
.catalog-point.reverse .catalog-point-txt{
    margin-left: 0px;
    margin-right: 150px;
}


/* パララックス(GSAP) */
.parallax-container {
    position: relative;
    overflow: hidden;
    height: 60vh;
    width: 100%;
}
.parallax-item {
    min-height: 100vh;
    width: 100%;
    will-change: transform;
    object-fit: cover;
    object-position: center 80%;
}



/* よくある質問 */
.catalog-qa h3{
    font-size: 2.5rem;
    text-align: center;
    margin-bottom: 80px;
    letter-spacing: .08em;
}
.catalog-qa dl{
    max-width: 850px;
    margin: 0 auto;
}
.catalog-qa dl dt{
    font-size: 1.2rem;
    font-weight: normal;
    margin-bottom: 30px;
    letter-spacing: .05em;
    position: relative;
    padding-left: 60px;
    padding-bottom: 30px;
    border-bottom: 1px solid rgba(0,0,0,.15);
}
.catalog-qa dl dt:hover{
    opacity: 0.6;
    cursor: pointer;
}
.catalog-qa dl dt::before{
    position: absolute;
    top: -7px;
    left: 0;
    content: "Q";
    background-color: #6b6764;
    color: #fff;
    width: 40px;
    height: 40px;
    text-align: center;
    padding-top: 7px;
    font-family: "Lato", sans-serif;
}
.catalog-qa dl dt::after{
    position: absolute;
    top: 0;
    right: 15px;
    content: "";
    background: url(images/arrow.svg) no-repeat center/contain;
    width: 25px;
    height: 25px;
}
.catalog-qa dl dt.open::after{
    transform: rotate(180deg);
}
.catalog-qa dl dd{
    display: none;
    font-size: 1.1rem;
    margin-bottom: 50px;
    letter-spacing: .05em;
    position: relative;
    padding-left: 60px;
    padding-bottom: 30px;
    line-height: 1.8;
}
.catalog-qa dl dd::before{
    position: absolute;
    top: -7px;
    left: 0;
    content: "A";
    color: #B22222;
    width: 40px;
    height: 40px;
    text-align: center;
    padding-top: 7px;
    font-family: "Lato", sans-serif;
}
/* カタログフォーム */
.catalog-form{
    padding: 100px;
}
.catalog-form h3{
    font-size: 2.5rem;
    text-align: center;
    margin-bottom: 80px;
    letter-spacing: .08em;
}
/* ===== レスポンシブ（768px以下） ===== */
@media (max-width: 768px){
  /* 余白の基準 */
    #catalog-page .inner{
        padding: 30px 10px!important;
    }

    /* ---------- リード ---------- */
    .catalog-lead h3{
        font-size: 1.4rem;
        line-height: 1.5;
        letter-spacing: .06em;
        margin-bottom: 24px;
    }
    .catalog-lead h3 span{
        font-size: .9rem;
    }
    .catalog-lead .present {
        font-size: 1.3rem;
    }
    .catalog-lead p{
        margin-bottom: 14px;
        line-height: 1.9;
        font-size: 0.8rem;
    }
    .catalog-lead .btn-next span{
        font-size: .9rem;
    }

  /* ---------- 資料の内容 ---------- */
    .catalog-content{
        padding: 24px 30px;
        margin: 10px 10px 40px;
    }
    .catalog-content h3{
        font-size: 1.2rem;
        margin-bottom: 20px;
        letter-spacing: .06em;
    }
    .catalog-list{
        display: grid;
        grid-template-columns: 1fr;
        gap: 30px;
    }
    .catalog-list li{
        display: grid;
        gap: 0;
    }
    .catalog-list-img img{ width: 100%; height: auto; }
    .catalog-list li p:first-of-type{
        font-size: 1rem;
    }

  /* ---------- ここがよかった ---------- */
    .catalog-good{
        padding: 60px 10px;
    }
    .catalog-good h3{
        font-size: 1.2rem;
        margin-bottom: 32px;
        letter-spacing: .06em;
    }

    /* ポイント：2カラム→1カラム（画像→テキストの順に統一） */
    .catalog-point{
        grid-template-columns: 1fr;
        gap: 16px;
        align-items: start;
        margin-bottom: 48px;
    }
  .catalog-point img{ width: 100%; height: auto; display: block; }
  .catalog-point-txt{ margin: 0; }
    .catalog-point h4{
        font-size: .9rem;
        margin-bottom: 16px;
        line-height: 1.45;
        letter-spacing: .04em;
        font-weight: bold;
    }
  .catalog-point div p:nth-of-type(1){ /* Point.xx */
    font-size: .8rem;
    margin-bottom: 6px;
    line-height: 1.8;
    }
    .catalog-point div p:nth-of-type(2){
        line-height: 1.9;
        font-size: 0.9rem;
    }

  /* reverseも同様に1カラム化 */
  .catalog-point.reverse{
    grid-template-columns: 1fr;
  }
  .catalog-point.reverse .catalog-point-txt{
    margin-right: 0;
  }

  /* ---------- パララックス ---------- */
  .parallax-container{
    height: 200px;
    margin-bottom: 60px;
}
  .parallax-item{
    min-height: 420px;
    height: 340px;
    object-position: center 10%;
  }

  /* ---------- FAQ ---------- */
  .catalog-qa h3{
    font-size: 1rem;
    margin-bottom: 28px;
  }
  .catalog-qa dl{
    max-width: none;
    padding: 0 2px;
}
  .catalog-qa dl dt{
    margin-bottom: 18px;
    font-size: .9rem;
    padding: 16px 44px;
  }
  .catalog-qa dl dt::before{
    top: -4px;
    width: 28px; height: 28px;
    padding-top: 3px;
    font-size: 0.95rem;
  }
  .catalog-qa dl dt::after{
    right: 10px;
    width: 18px; height: 18px;
  }
  .catalog-qa dl dd{
    margin-bottom: 22px;
    padding-left: 44px;
    padding-bottom: 16px;
    font-size: .8rem;
    line-height: 1.8;
  }

  /* ---------- フォーム見出し ---------- */
  .catalog-form{ padding: 32px 14px; }
  .catalog-form h3{
    font-size: 1.6rem;
    margin-bottom: 24px;
  }

  #single-event-page .event-form-notice, #consultation-page .event-form-notice, #catalog-page .event-form-notice, #contact-page .event-form-notice {
    padding: 20px 40px;
    margin-top: 0;
}
#single-event-page .event-form-notice li, #consultation-page .event-form-notice li, #catalog-page .event-form-notice li, #contact-page .event-form-notice li {
    margin-bottom: 10px;
    font-size: .8rem;
    margin-top: 0px;
}

    #catalog-page .event-form {
        font-size: 1.2rem;
        padding: 30px 20px 30px 60px;
    }
    #catalog-page .event-form::before {
        top: 31px;
        left: 27px;
        width: 24px;
        height: 24px;
    }
}
/*==========================================================================
　個別相談
============================================================================ */
#consultation-page .subpage-top{
    background-image: url(images/consultation.webp);
}
.consul-lead{
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 100px;
}
.consul-lead-txt{
    flex-basis: 800px;
}
.consul-lead-txt h3{
    font-size: 2.3rem;
    margin-bottom: 50px;
    letter-spacing: .08em;
}
.consul-lead-txt p{
    font-size: 1.1rem;
    margin-bottom: 10px;
    letter-spacing: .07em;
    line-height: 1.8;
}
.consul-lead-img{
    flex-basis: 800px;
}
.consul-lead-txt ul{
    display: flex;
    justify-content: center;
}
.consul-lead-txt ul li{
    display: grid;
    place-items: center;
    background-color: #545450;
    color: #fff;
    width: 130px;
    height: 130px;
    border-radius: 50%;
    margin: 50px 10px;
    text-align: center;
    font-size: 1.3rem;
    letter-spacing: .2em;
    line-height: 1.5;
    opacity: .7;
}
#consultation-page .hero-reel{
    margin-bottom: 50px;
}
.consul-lead-txt .btn-next{
    /* display: flex;
    justify-content: flex-end; */
    margin: 40px 0 50px;
}
#consultation-page .consul-btn{
    display: flex;
    justify-content: center;
}
/* 悩み */
.consul-worry{
    position: relative;
}
.consul-worry::after{
    position: absolute;
    bottom: 380px;
    left: 50%;
    transform: translateX(-50%);
    content: "";
    background: url(images/consul-worry.webp) no-repeat center/contain;
    width: 400px;
    height: 400px;
    mix-blend-mode: multiply;
}
.consul-worry h3{
    font-size: 2.2rem;
    margin-bottom: 80px;
    letter-spacing: .08em;
    text-align: center;
}
.consul-worry ul{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px 50px;
    margin-bottom: 300px;
}
.consul-worry ul li{
    background-color: #ffffff4d;
    padding: 30px 30px 30px 70px;
    font-size: 1rem;
    letter-spacing: .08em;
    position: relative;
    border-radius: 3px;
}
.consul-worry ul li::before{
    position: absolute;
    top: 23px;
    left: 25px;
    content: "";
    background: url(images/check.svg) no-repeat center/contain;
    width: 30px;
    height: 30px;
}
/* コンタクト */
.consul-contact h3{
    font-size: 2.2rem;
    margin-bottom: 50px;
    letter-spacing: .05em;
    text-align: center;
}
.consul-contact{
    width: 1000px;
    border: 4px #8a8379 double;
    padding: 60px 20px;
    margin: 0 auto;
}
.consul-tel-layout{
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 30px;
}
.consul-tel-layout .tel{
    font-size: 2rem;
    font-family: "Lato", sans-serif;
    letter-spacing: .06em;
    padding: 0 20px;
}
/* .consul-btn-layout{
    display: flex;
    justify-content: center;
} */
.consul-btn-layout .btn-next{
    margin: 0 50px;
}
/* ご参加ください */
.consul-join{
    position: relative;
    background: url(images/consul-join.webp) no-repeat center 75%/cover;
    height: 600px;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
}
/* 明るいフィルター */
.consul-join::before{
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.55);
    }
/* 中身をオーバーレイより前面に */
.consul-join > *{
position: relative;
z-index: 1;
}

.consul-join h3{
    font-weight: bold;
    font-size: 2rem;
    margin-bottom: 50px;
    letter-spacing: .25em;
    line-height: 2;
}
.consul-join h3 .big{
    font-size: 3rem;
    display: block;
}
.consul-join .btn-next{
    background-color: #333;
    border-radius: 50px;
}
.consul-join .btn-next a::before{
    display: none;
}
.consul-join .btn-next a::after{
    display:none;
}
.consul-join .btn-next a {
    padding: 20px 50px 20px 40px;
    font-size: .95rem;
    color: #fff;
}
/* 横棒 */
.consul-join .btn-next a span::before {
    background-color: #fff;
}
/* 斜め棒 */
.consul-join .btn-next a span::after {
    border-top: 1.2px solid #fff;
}




/* ポイント */
.consul-point{
    background-color: rgba(255, 255, 255, 0.15);
}
.consul-point h3{
    font-size: 2.2rem;
    margin-top: 40px;
    margin-bottom: 80px;
    letter-spacing: .08em;
    text-align: center;
}
.consul-point .num{
    background-color: #B22222;
    color: #fff;
    width: 70px;
    height: 70px;
    display: inline-grid;
    place-items: center;
    text-align: center;
    font-size: 3rem;
}
.consul-point-list li{
    display:grid;
    grid-template-columns: 350px 1fr;
    gap: 100px;
    align-items: center;
    border-bottom: 1px solid rgba(0,0,0,.15);
    padding: 60px 0;
}
.consul-point-list li:last-child{
    border-bottom: none;
}
.consul-point-list li .point{
    color: #B22222;
    border-radius: 50px;
    font-family: "Lato", sans-serif;
    letter-spacing: 0.08em;
    display: inline-block;
    margin-bottom: 10px;
    font-size: 1rem;
    font-weight: 700;
}
.consul-point-list li h4{
    font-size: 1.3rem;
    font-weight: bold;
    letter-spacing: .08em;
    margin-bottom: 20px;
}
.consul-point-list li p:last-child{
    font-size: 1rem;
    letter-spacing: .08em;
}
.consul-point-list li img{
    mix-blend-mode: multiply;
}
/* お客様の声 */
.consul-voice{
    padding: 100px 0 40px;
}
.consul-voice h3{
    font-size: 2.2rem;
    margin-bottom: 80px;
    letter-spacing: .08em;
    text-align: center;
}
.consul-voice-layout{
    display: grid;
    grid-template-columns: 350px 1fr;
    gap: 150px;
    align-items: stretch;
}
.consul-voice-layout-txt{
    background-color: #ffffff4d;
    border-radius: 3px;
    padding: 80px 100px 40px;
    position: relative;
}
.consul-voice-layout-txt::after{
    content: "";
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: -80px;
    border: 30px solid transparent;
    border-right: 50px solid #ffffff4d;
}
.consul-voice-layout-txt h4{
    font-size: 1.3rem;
    letter-spacing: .08em;
    margin-bottom: 10px;
    font-weight: bold;
}
.consul-voice-layout-txt span{
    font-size: 0.9rem;
    font-weight: normal;
    color: #00000070;
}
.consul-voice-layout-txt p{
    margin-bottom: 40px;
    letter-spacing: .08em;
}
/* 左カラムの画像を“ボックスの高さ”にフィットさせる */
.consul-voice-layout > :first-child{
  overflow: hidden;         /* はみ出しカット（トリミング） */
  height: 100%;             /* グリッドの行高いっぱい */
}
.consul-voice-layout > :first-child img{
  width: 100%;
  height: 100%;             /* ここがポイント：縦も100%に */
  object-fit: cover;        /* 余白なくトリミングして埋める */
  display: block;           /* 画像の下の隙間対策 */
}

/* 相談会の流れ */
.consul-flow{
    padding: 150px 0 80px;
    max-width: 1000px;
    margin: 0 auto;
}
.consul-flow h3{
    font-size: 2.2rem;
    margin-bottom: 80px;
    letter-spacing: .08em;
    text-align: center;
}
.consul-flow-list li{
    background-color: #ffffffb5;
    border-radius: 3px;
    margin-bottom: 100px;
    padding: 80px 100px 40px;
    position: relative;
}
.consul-flow-list li::after{
    content: "";
    position: absolute;
    bottom: -49px;
    left: 50%;
    transform: translateX(-50%);
    border: 30px solid transparent;
    border-top: 20px solid #ffffffb5;
}
.consul-flow-list li:last-child::after{
    display: none;
}
.consul-flow-list .num{
    background-color: #333;
    color: #fff;
    font-family: "Lato", sans-serif;
    border-radius: 50%;
    padding: 15px;
    display: inline-block;
    font-size: 1rem;
    position: absolute;
    top: 30px;
    left: 30px;
}
.consul-flow-list h4{
    font-size: 1.5rem;
    margin-bottom: 30px;
    letter-spacing: .08em;
}
.consul-flow-list p{
    font-size: 1rem;
    margin-bottom: 30px;
    letter-spacing: .08em;
}

/* 相談会アクセス */
.consul-access h3{
    font-size: 2.2rem;
    margin-top: 200px;
    margin-bottom: 70px;
    letter-spacing: .08em;
    text-align: center;
    line-height: 1.6;
}
.consul-access h3 + p{
    text-align: center;
    font-size: 1.1rem;
    line-height: 2;
    margin-bottom: 60px;
}
.consul-access iframe{
    margin-bottom: 50px;
}
.consul-access dl{
    width: 900px;
    margin: 0 auto 150px;
    display: grid;
    grid-template-columns: 200px 1fr;
    font-size: 1.1rem;
}

.consul-access dl dt,
.consul-access dl dd{
    padding: 30px 0;
    border-bottom: 1px solid #8a83795d;
}

/* ===== レスポンシブ（768px以下） ===== */
@media (max-width: 768px){
  /* 共通余白 */
    #consultation-page .inner{
        padding: 0!important
    }
    /* ===== リード ===== */
    .consul-lead{
        flex-direction: column;
        align-items: stretch;
        gap: 20px;
        padding: 10px 20px;
    }
    .consul-lead-img{
        flex-basis: auto;
    }
    .consul-lead-img img{ width: 100%; height: auto; display:block; }
    .consul-lead-txt{ flex-basis: auto; }
    .consul-lead-txt h3{
        font-size: 1.1rem;
        margin-bottom: 8px;
        letter-spacing: .06em;
    }
    .consul-lead-txt p{
        font-size: 0.9rem;
        margin-bottom: 16px;
        letter-spacing: .04em;
        line-height: 1.8;
    }
    .consul-lead-txt ul{
        display: grid;
        grid-template-columns: repeat(3, minmax(0,1fr));
        gap:0px;
        justify-content: initial;
        margin: 0px auto 30px;
        width: 270px;
    }
    .consul-lead-txt ul li{
        width: 80px;
        height: 80px;
        aspect-ratio: 1/1;
        margin: 14px 0 0;
        font-size: .8rem;
    }
  .consul-lead-txt .btn-next{
      display: flex;
      justify-content: center; /* 中央寄せ */
      margin: 0 0 10px;
  }
  /* ヒーロー下ボタン */
  .btn-next.consul-btn{ margin-bottom: 48px; }

    /* ===== 悩み ===== */
    .consul-worry h3{
        font-size: 1rem;
        margin-bottom: 20px;
    }
    .consul-worry::after{
        width: 220px;
        height: 220px;
        bottom: 330px;
        opacity: .7;
    }
    .consul-worry ul{
        grid-template-columns: 1fr;   /* 2→1列 */
        gap: 12px;
        margin: 10px 10px 150px;
    }
    .consul-worry ul li{
        padding: 18px 16px 18px 52px;
        font-size: .85rem;
    }
    .consul-worry ul li::before{
        top: 16px; left: 16px;
        width: 24px; height: 24px;
    }
    .consul-worry::after {
        width: 220px;
        height: 220px;
        bottom: 33vh;
    }

  /* ===== Contact ブロック ===== */

  /* 枠のサイズ調整 */
  .consul-contact{
  width: auto;              /* 100%固定をやめる */
    max-width: 100%;  
    padding: 20px 10px;
    box-sizing: border-box;
    margin-bottom: 40px;
    margin: 10px 20px 40px;
  }

  .consul-contact h3{
    font-size: 1.3rem;
    margin-bottom: 20px;
  }

  /* 電話エリア：縦並び */
  .consul-tel-layout{
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 8px;
    margin-bottom: 20px;
  }

  .consul-tel-layout .tel{
    font-size: 1.3rem;
    padding: 0 10px;
  }

  /* ボタンエリア：縦並び＆幅100%寄り */
  .consul-btn-layout{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
  }

  .consul-btn-layout .btn-next{
    margin: 0;                 /* PCの左右マージンは消す */
    width: 100%;
    max-width: 300px;          /* 好きな幅に調整OK */
  }
  .consul-btn-layout .btn-next a{
    display: block;
    width: 80%;
    padding: 10px 0;
    text-align: center;
    margin: 0 auto;
  }
  /* ===== ご参加ください（ビジュアル） ===== */
    .consul-join{
        height: 240px;
        padding: 0 14px;
        text-align: center;
    }
    .consul-join h3{
        font-size: .9rem;
        margin-bottom: 16px;
        letter-spacing: .12em;
        line-height: 1.8;
    }
    .consul-join h3 .big{
        font-size: 1.2rem;
    }
    .consul-join .btn-next a {
        padding: 14px 40px;

    }
    .consul-join .btn-next a span{
    font-size: .8rem!important
    }
  /* ===== ポイント ===== */
    .consul-point{
        padding-bottom: 50px;
    }
    .consul-point h3{
        font-size: 1rem;
        margin: 0px 0 22px;
        padding: 40px 0 20px;
    }

    .consul-point .num {
        width: 35px!important;
        height: 35px!important;
        font-size: 1.3rem!important
    }
    .consul-point-list li {
        margin: 0 auto;
        text-align: center;
    }
    .consul-point-list li img{
        width: 160px;
        margin-bottom: 5px;
    }
    .consul-point .num{
        width: 50px; height: 50px; font-size: 1.8rem;
    }
    .consul-point-list li{
        grid-template-columns: 1fr;   /* 2→1列 */
        gap: 12px;
        padding: 24px 20px;
    }
    .consul-point-list li h4{
        font-size: 1rem;
        margin-bottom: 12px;
    }
    .consul-point-list li p:last-child{
        font-size: .8rem;
        letter-spacing: .1em;
        line-height: 1.6;
    }
    .consul-point-list li .point{
        border: 1.5px solid #B22222;
        padding: 2px 8px;
        letter-spacing: .08em;
        display: inline-block;
        margin-bottom: 15px;
        font-size: 0.6rem;
    }
  /* ===== お客様の声 ===== */
  .consul-voice{
    padding: 48px 0 24px;
    margin: 20px;
  }
  .consul-voice h3{
    font-size: 1rem;
    margin-bottom: 20px;
  }
  .consul-voice-layout{
    grid-template-columns: 1fr;   /* 2→1列 */
    gap: 12px;
  }
  .consul-voice-layout > :first-child{ height: 280px; }
  .consul-voice-layout-txt{
    padding: 24px 16px 0;
    margin-top: 20px;
  }
  /* .consul-voice-layout-txt::after{ display: none; } */
  .consul-voice-layout-txt::after{
    top: -40px;
    transform: translateX(-50%);
    left: 50%;
    border: 20px solid transparent;
    border-bottom: 20px solid #ffffff4d;
}
  .consul-voice-layout-txt h4{
    font-size: 0.9rem;
    margin-bottom: 6px;
  }
    .consul-voice-layout-txt h4 span{
        font-size: 0.6rem;
    }
  .consul-voice-layout-txt p{ margin-bottom: 18px; }
      


  /* ===== 流れ ===== */

  .consul-flow{
    padding: 60px 0 40px;
    max-width: none;
  }
  .consul-flow h3{
    font-size: 1rem;
    margin-bottom: 22px;
  }
  .consul-flow-list li{
    margin-bottom: 38px;
    padding: 22px 14px 16px;
    margin: 10px 20px 30px;
  }
  .consul-flow-list li::after{
    bottom: -48px;
    border-width: 28px;
    border-top-width: 20px;
  }
  .consul-flow-list .num{
    padding: 4px 6px;
    font-size: 0.8rem;
    top: 10px;
    left: 10px;
  }
  .consul-flow-list h4{
    font-size: .8rem;
    font-weight: bold;
    line-height: 1.4;
    margin: 24px 0 10px 0;
  }
  .consul-flow-list p{
    font-size: .8rem;
    margin-bottom: 12px;
    line-height: 1.6;
  }

  /* ===== アクセス ===== */
  .consul-access h3{
    font-size: 1rem;
    margin: 54px 0 18px;
    letter-spacing: .06em;
    line-height: 1.5;
  }
  .consul-access h3 + p{
    font-size: 0.8rem;
    line-height: 1.9;
    margin-bottom: 20px;
    padding: 0 14px;
  }
  .consul-access iframe{
    height: 240px;   /* 500→縮小 */
    margin-bottom: 24px;
  }
  .consul-access dl{
    width: auto;
    margin: 0 14px 60px;
    grid-template-columns: 1fr;  /* 2→1列 */
  }
    .consul-access dl dt{
        border-bottom: none;
        padding-bottom: 0;
        padding: 14px 0 0;
        font-size: 1rem;
    }
  .consul-access dl dd{
    font-size: 0.9rem;
    padding: 8px 0 14px;
  }
  #single-event-page .event-form, #consultation-page .event-form, #catalog-page .event-form {
    font-size: 1.2rem;
        padding: 30px 20px 30px 60px;
  }
    #consultation-page .event-form::before {
        top: 31px;
        left: 27px;
        width: 24px;
        height: 24px;
    }
}


/*==========================================================================
　強み　デザイン
============================================================================ */
#design-page .subpage-top{
    background-image: url(images/strengths.webp);
}
/* 縦文字 */
.design-lead{
    position: relative;
}
.design-lead .design-concept-vertical{
    writing-mode: vertical-rl;
    font-size: 1.5rem;
    letter-spacing: 0.3em;
    position: absolute;
    top: 250px;
    right: 50px;
    color: #545450;
    line-height: 1.8;
}

.design-lead >p{
    font-size: 1.1rem;
    line-height: 2;
    margin-bottom: 50px;
    letter-spacing: .02em;
}
/* リスト */
.design-list{
    position: relative;
}

.design-list::after{
    position: absolute;
    bottom: -100px;
    right: -40px;
    content: "";
    background: url(images/consul-point01.webp) no-repeat center/contain;
    width: 400px;
    height: 400px;
}
.design-list li {
    position: relative;
    width: 750px; /* 行全体の幅を固定 */
    isolation: isolate;
}
.design-list li a{
    display: flex;
    align-items: center;
    padding-left: 10px;
    padding: 35px 0 35px 40px;
    font-size: 1.2rem;
    letter-spacing: .04em;
    border-bottom: 1px solid #8a83795d;
    gap: 24px;
    transition: color .25s ease, transform .25s ease;
    position: relative;
    z-index: 1;
    width: 100%;
}


.design-list li a h3{
    font-size: 1.3rem;
    margin-right: 40px;
}
.design-list li a p{
    font-size: 1.1rem;
}
/* hover動作 */
.design-list li:hover::before {
    transform: scaleX(1);
}
.design-list li:hover a::after {
    transform: translateX(6px);
    opacity: 1;
}
.design-list li:hover a h3 {
    transform: translateX(4px);
    /* color: #B22222; */
    font-weight: bold;
}
.design-list li:hover a p {
    transform: translateX(2px);
    opacity: .9;
}
/* 動作をスムーズに */
.design-list li a h3,
.design-list li a p {
    transition: transform .25s ease, color .25s ease, opacity .25s ease;
}


/* 土地 */
#design-land{
    background: url(images/design-land.webp) no-repeat center/cover;
    display: grid;
    align-items: center;
    grid-template-columns: 1fr 1fr;
    height: 100vh;
}
/* 暮らし */
#design-living{
    background: url(images/design-living.webp) no-repeat center/cover;
    display: grid;
    align-items: center;
    grid-template-columns: 1fr 1fr;
    height: 100vh;
}
/* 機能性 */
#design-feature{
    background: url(images/design-feature.webp) no-repeat center/cover;
    display: grid;
    align-items: center;
    grid-template-columns: 1fr 1fr;
    height: 100vh;
}
/* 設計 */
#design-plan{
    background: url(images/design-plan.webp) no-repeat center/cover;
    display: grid;
    align-items: center;
    grid-template-columns: 1fr 1fr;
    height: 100vh;
}
/* 予算 */
#design-ideal{
    background: url(images/design-ideal.webp) no-repeat center/cover;
    display: grid;
    align-items: center;
    grid-template-columns: 1fr 1fr;
    height: 100vh;
}


#design-land div:last-of-type,
#design-feature div:last-of-type,
#design-ideal div:last-of-type{
    background-color: #ffffffaa;
    backdrop-filter: blur(10px); /* 背景だけをぼかす */
    -webkit-backdrop-filter: blur(10px); /* Safari対応 */
    height: 100%;
    padding: 0 130px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start; /* ← これで子要素が横幅いっぱいに伸びない */
}
#design-living div:first-of-type,
#design-plan div:first-of-type{
    background-color: #ffffffaa;
    backdrop-filter: blur(10px); /* 背景だけをぼかす */
    -webkit-backdrop-filter: blur(10px); /* Safari対応 */
    height: 100%;
    padding:0 130px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start; /* ← これで子要素が横幅いっぱいに伸びない */
}



#design-land div h3,
#design-living div h3,
#design-feature div h3,
#design-plan div h3,
#design-ideal div h3{
    font-size: 2.3rem;
    letter-spacing: .1em;
    margin-bottom: 45px;
    position: relative;
    padding-bottom: 10px;
}
#design-land div p,
#design-living div p,
#design-feature div p,
#design-plan div p,
#design-ideal div p{
    font-size: 1.1rem;
    line-height: 2.4;
    margin-bottom: 10px;
}
#design-ideal{
    margin-bottom: 200px;
}


/* リスト背景アニメーション */
.design-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 750px;               /* 固定幅で背景を一致 */
    height: 100%;
    /* background: #ffffff1f; */
    background-color: #3333330b;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .35s ease;
    z-index: 0;
}
#design-land div p:first-of-type,
#design-living div p:first-of-type,
#design-feature div p:first-of-type,
#design-plan div p:first-of-type,
#design-ideal  p:first-of-type{
    font-size: 0.9rem;
    letter-spacing: .1em;
    margin-bottom: 20px;
    padding: 0 20px;
    background-color: #545450;
    color: #fff;
    display: inline-block;
    border-radius: 50px;
}


/* ===== レスポンシブ（768px以下） ===== */
@media (max-width: 768px){
    #design-page .inner{
        padding: 20px 15px 150px;
    }
  /* 縦書きを横書きに変更 */
    #design-page .sec-title{
        margin: 0 0 20px 10px;
    }
    .design-lead{
        padding: 10px 20px;
    }
    .design-lead p{
        font-size: 0.9rem;
    }
    .design-lead >p {
        margin-bottom: 20px;
    }
    .design-lead .design-concept-vertical{
        position: static;
        writing-mode: horizontal-tb;
        letter-spacing: .08em;
        margin: 24px 0;
        line-height: 1.6;
        color: #545450;
        font-size: 1rem;
    }
  /* 飾り画像のサイズ調整 */
    .design-list::after{
        width: 180px;
        height: 45vh;
        right: 0;
        bottom: -280px;
    }
    /* リストの幅調整 */
    .design-list li{
        width: 100%;
        max-width: 100%;
    }
    .design-list li a{
        padding: 20px 0px;
        gap: 10px;
        font-size: 1rem;
    }
    .design-list li a h3{
        font-size: 0.8rem;
        margin-right:0px;
    }
    .design-list li a p{
        font-size: 0.8rem;
    }

  /* 背景セクションを1カラムに */
  #design-land,
  #design-living,
  #design-feature,
  #design-plan,
  #design-ideal{
    grid-template-columns: 1fr;
    height: auto;
    min-height: auto;
    padding: 60px 20px;
  }

  /* テキストボックスの背景と余白 */
  #design-land div:last-of-type,
  #design-feature div:last-of-type,
  #design-ideal div:last-of-type,
  #design-living div:first-of-type,
  #design-plan div:first-of-type{
    height: auto;
    padding: 24px;
    border-radius: 5px;
  }

  /* 見出し・本文のサイズ調整 */
  #design-land div p:first-of-type,
  #design-living div p:first-of-type,
  #design-feature div p:first-of-type,
  #design-plan div p:first-of-type,
  #design-ideal p:first-of-type{
    font-size: 0.8rem;
    margin-bottom: 15px;
  }
  #design-land div h3,
  #design-living div h3,
  #design-feature div h3,
  #design-plan div h3,
  #design-ideal div h3{
    font-size: 1.1rem;
    margin-bottom: 16px;
    padding-bottom: 6px;
  }
  #design-land div p,
  #design-living div p,
  #design-feature div p,
  #design-plan div p,
  #design-ideal div p{
    font-size: 0.8rem;
    line-height: 1.8;
  }

  /* 最下部の余白を調整 */
  #design-ideal{ margin-bottom: 100px; }


}

/*==========================================================================
　強み　スペック
============================================================================ */
#spec-page .subpage-top{
    background-image: url(images/strengths.webp);
}
/* 導入部分 */
#spec-page .spec-lead >div{
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 100px;
    margin-bottom: 150px;
}
#spec-page .spec-lead div p{
    font-size: 1.1rem;
    line-height: 2;
    margin-bottom: 30px;
    letter-spacing: .02em;
}
#spec-page .spec-lead .sec-title{
    margin-bottom: 40px;
}
/* リスト */
.spec-menu{
    margin-top: 10px;
}
.spec-menu{
    padding: 0;
}
.spec-menu li {
    position: relative;
    isolation: isolate;
    border-bottom: 1px solid #8a83795d;
}
.spec-menu li a{
    display: flex;
    align-items: center;
    padding-left: 10px;
    padding: 30px;
    font-size: 1.2rem;
    letter-spacing: .04em;
    gap: 24px;
    transition: color .25s ease, transform .25s ease;
    position: relative;
    z-index: 1;
    width: 100%;
}

/* hover動作 */
.spec-menu li:hover::before {
    transform: scaleX(1);
}
.spec-menu li:hover a::after {
    transform: translateX(6px);
    opacity: 1;
}
.spec-menu li:hover a{
    transform: translateX(4px);
    /* color: #B22222; */
    font-weight: bold;
    opacity: .9;
}
/* 動作をスムーズに */
.spec-menu li a {
    transition: transform .25s ease, color .25s ease, opacity .25s ease;
}
/* リスト背景アニメーション */
.spec-menu li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: #3333330b;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .35s ease;
    z-index: 0;
}


/* セクション */
/* タイトル */
/*     display: flex;
    align-items: center;
    gap: 0 25px;
    font-size: 1.8rem;
    letter-spacing: .15em;
    padding-bottom: 15px;
    margin-top: 80px;
    margin-bottom: 50px;
    border-bottom: 2px solid #8a83795d; */
/* 数字 */
/* #spec-page .spec-list-sec h3 span{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    background-color: #333;
    border-radius: 50%;
    color: #fff;
    font-family: "Lato", sans-serif;
    font-size: 1rem;
} */
#spec-page .spec-list-sec  .layout{
    display: flex;
    align-items: center;
    gap: 20px;
    margin-top: 150px;
    margin-bottom: 30px;
    padding-bottom: 10px;
    border-bottom: 2px solid #8a83795d;
}
#spec-page .spec-list-sec  h3 {
  display: flex;
  align-items: center;
  gap: 15px;
  font-size: 1.8rem;
  letter-spacing: .15em;
}
#spec-page .spec-list-sec  .point{
    width: 60px;
    height: 60px;
    background-color: #545450;
    border-radius: 50%;
    color: #fff;
    font-family: "Lato", sans-serif;
    font-size: 1.1rem;
    text-align: center;
    line-height: 1.2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-bottom: 0;
}
#spec-page .spec-list-sec .point span{
    display: block;
    font-size: 0.8rem;
    margin-bottom: 2px;
}
#spec-page .spec-list-sec div p{
    font-size: 1.1rem;
    line-height: 2;
    margin-bottom: 100px;
    letter-spacing: .04em;
}
/* 行レイアウト */
#spec-page .spec-list-sec .spec-list{
    margin-top: 100px;
}
#spec-page .spec-list-sec .spec-list li{
    display: flex;
    align-items: center;
    gap: 50px;
    border-bottom: 1px solid #3333335b;
    margin-bottom: 80px;
    padding-bottom: 80px;
    /* background-color: #ffffff2f; */
}
/* テキスト側：残りを取る */
#spec-page .spec-list-sec .spec-list li > div:not(.img){
    flex: 1;
}
#spec-page .spec-list-sec .spec-list li h4{
    font-size: 1.5rem;
    letter-spacing: .07em;
    margin-bottom: 25px;
    font-weight: bold;
}
#spec-page .spec-list-sec .spec-list li p{
    font-size: 1rem;
    line-height: 2;
    margin-bottom: 15px;
}
/* 画像 */
#spec-page .spec-list-sec .spec-list li .img{
    width: 450px;
}
#spec-page .spec-list-sec .spec-list li .img img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
/* セクション内の大きな画像を横幅いっぱいに */
#spec-page .spec-list-sec .spec-list-img {
  width: 100%;
  margin: 50px 0;
}

#spec-page .spec-list-sec .spec-list-img img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}
/* UA値C値とは */
#spec-page .spec-list-sec .about-ua,
#spec-page .spec-list-sec .about-earth,
#spec-page .spec-list-sec .about-venti{
    background-color: #fff;
    border-radius: 3px;
    padding: 50px;
}
#spec-page .spec-list-sec .about-ua .spec,
#spec-page .spec-list-sec .about-earth .spec,
#spec-page .spec-list-sec .about-venti .spec{
    background-color: #333;
    color: #fff;
    padding: 5px 10px;
    border-radius: 5px;
}
#spec-page .spec-list-sec .about-ua h4,
#spec-page .spec-list-sec .about-earth h4,
#spec-page .spec-list-sec .about-venti h4{
    text-align: center;
    font-size: 1.5rem;
    letter-spacing: .07em;
    margin-bottom: 40px;
    font-weight: bold;
}
#spec-page .spec-list-sec .about-ua p,
#spec-page .spec-list-sec .about-earth p,
#spec-page .spec-list-sec .about-venti p{
    font-size: 1.1rem;
    line-height: 2;
    margin-bottom: 25px;
}
/* UA値C値画像 */
#spec-page .spec-list-sec .about-ua .img{
    display:flex;
    gap: 50px;
}
#spec-page .spec-list-sec .about-ua .img img{
    width: 100%;
    height: 100%;
}
/* 澄家画像 */
#spec-page .spec-list-sec .about-venti .img{
    text-align: center;
}
#spec-page .spec-list-sec .about-venti img{
    width: 100%;
}
/* 耐震画像 */
#spec-page .spec-list-sec .about-earth .img{
    text-align: center;
}
#spec-page .spec-list-sec .about-earth .img img{
    width: 650px;
}




/* クリック誘導 */
#spec-page .about-ua .img a { display:block; }
#spec-page .about-ua .img img { cursor: zoom-in; }

/* ライトボックス */
#spec-page .lightbox-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.75);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  padding: 24px;
}
#spec-page .lightbox-overlay.is-visible { display: flex; }

/* 画像 */
#spec-page .lightbox-content img {
  max-width: 90vw;
  max-height: 90vh;
  height: auto;
  width: auto;
  box-shadow: 0 10px 30px rgba(0,0,0,.4);
  border-radius: 8px;
}

/* 閉じるボタン */
#spec-page .lightbox-close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  background: rgba(255,255,255,.9);
  border: none;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
}
#spec-page .lightbox-close:focus-visible { outline: 2px solid #333; }

/* 背景スクロール固定 */
body.lb-no-scroll { overflow: hidden; }

/* ===== レスポンシブ（768px以下） ===== */
@media (max-width: 768px){
    /* 余白 */
    #spec-page .inner{
        padding: 20px 15px!important;
    }
    #spec-page .sec-title{
        margin: 0 0 20px 10px;
    }
    #spec-page .spec-lead .sec-title{
        margin-bottom: 20px;
    }
  /* 導入エリア：2→1カラム */
    #spec-page .spec-lead > div{
        grid-template-columns: 1fr;
        gap: 34px;
        margin-bottom: 48px;
    }
    #spec-page .spec-lead div p{
        font-size: 0.9rem;
        line-height: 1.9;
        margin-bottom: 20px;
    }

  /* 目次リスト */
    #spec-page .spec-menu{
        padding: 0;
    }
    .spec-menu li a{
        padding: 16px 12px;
        gap: 12px;
        font-size: .9rem;
    }
    .spec-menu .num{
        font-size: 0.9rem;
        margin-right: 8px;
    }

    /* セクション見出し・本文 */
    #spec-page .spec-list-sec h3 span{
        font-size: 1rem;
        padding-right: 5px;
    }
    #spec-page .spec-list-sec h3{
        font-size: 1.15rem;
        letter-spacing: .08em;
    }
    #spec-page .spec-list-sec > p{
        font-size: 0.9rem;
        line-height: 1.9;
        margin-bottom: 10px;
    }

  /* ---------- 各セクション共通 ---------- */
    #spec-page .spec-list-sec .layout{
        margin-top: 80px;
        margin-bottom: 20px;
        gap: 10px;
    }

  #spec-page .spec-list-sec .point{
      width: 56px;           /* ちょい大きめに */
      aspect-ratio: 1 / 1;   /* 必ず正円にする */
      height: auto;          /* height固定はやめる */
      font-size: 0.9rem;
      padding: 0;            /* 念のため余計な内側余白なし */
  }
  #spec-page .spec-list-sec .point span{
      font-size: 0.7rem;     /* 「spec」側も少し小さめに */
  }

  #spec-page .spec-list-sec h3{
    font-size: 1rem;
    letter-spacing: .12em;
  }

  #spec-page .spec-list-sec > div p{
    font-size: 0.8rem;
    line-height: 1.8;
    margin-bottom: 20px;
  }

  /* ---------- 行レイアウト（画像＋テキスト） ---------- */
  #spec-page .spec-list-sec .spec-list{
    margin-top: 40px;
  }

  #spec-page .spec-list-sec .spec-list li{
    flex-direction: column;   /* 横並び → 縦並び */
    align-items: flex-start;
    gap: 20px;
    margin-bottom: 40px;
    padding-bottom: 40px;
  }

  #spec-page .spec-list-sec .spec-list li h4{
    font-size: 1rem;
    margin-bottom: 16px;
  }

  #spec-page .spec-list-sec .spec-list li p{
    font-size: 0.8rem;
    line-height: 1.8;
    margin-bottom: 10px;
  }

  #spec-page .spec-list-sec .spec-list li .img{
    width: 100%;
  }

  #spec-page .spec-list-sec .spec-list li .img img{
    width: 100%;
    height: auto;
  }

  /* 大きい画像（グリッドポストなど） */
  #spec-page .spec-list-sec .spec-list-img{
    margin: 30px auto;
    width: 100%;
    overflow: hidden;
  }

  /* ---------- UA値/C値・換気・耐震ボックス ---------- */
  #spec-page .spec-list-sec .about-ua,
  #spec-page .spec-list-sec .about-earth,
  #spec-page .spec-list-sec .about-venti{
    padding: 24px 18px;
    margin-top: 10px;
  }

  #spec-page .spec-list-sec .about-ua h4,
  #spec-page .spec-list-sec .about-earth h4,
  #spec-page .spec-list-sec .about-venti h4{
    font-size: 1rem;
    margin-bottom: 20px;
  }

  #spec-page .spec-list-sec .about-ua p,
  #spec-page .spec-list-sec .about-earth p,
  #spec-page .spec-list-sec .about-venti p{
    font-size: 0.8rem;
    line-height: 1.8;
    margin-bottom: 16px;
  }

  /* UA値C値の2枚画像 → 縦並び */
  #spec-page .spec-list-sec .about-ua .img{
    flex-direction: column;
    gap: 16px;
  }

  #spec-page .spec-list-sec .about-ua .img img{
    width: 180%;
    height: auto;
  }

  /* 澄家・耐震の図も幅100%に */
  #spec-page .spec-list-sec .about-venti .img img,
  #spec-page .spec-list-sec .about-earth .img img{
    width: 100%;
    height: auto;
  }

  /* ---------- ライトボックス（スマホ調整） ---------- */
  #spec-page .lightbox-overlay{
    padding: 12px;
  }
  #spec-page .lightbox-content img{
    max-width: 100vw;
    max-height: 80vh;
  }
  #spec-page .lightbox-close{
    width: 36px;
    height: 36px;
    font-size: 20px;
  }

  /* 強みバナーもついでに少しタイトに */
  .strength-banner .inner{
    grid-template-columns: 1fr;
    padding: 40px 16px;
    row-gap: 24px;
  }
  .strength-banner .strength-banner-title{
    font-size: 1.4rem;
    padding: 0 10px;
  }
  .strength-banner .strength-banner-info ul{
    gap: 8px 0;
  }

}

/*==========================================================================
　強み　床下収納
============================================================================ */
#storage-page .subpage-top{
    background-image: url(images/strengths.webp);
}
/* 導入部分 */
/* 画像 */
.storage-img1 img{
    position: relative;
    width: 800px;
    height: auto;
    margin-bottom: 300px;
}
.storage-img2 img{
    position: absolute;
    top: 1200px;
    right: 150px;
    width: 550px;
    height: auto;
}
/* 縦文字 */
#storage-page .storage-vertical{
    writing-mode: vertical-rl;
    font-size: 1.6rem;
    letter-spacing: 0.3em;
    position: absolute;
    top: 1000px;
    right: 300px;
    color: #333;
    line-height: 1.8;
}

/* イントロ */
.storage-intro{
    margin-bottom: 100px;
}
.storage-intro h3 span{
    font-size: 1.1rem;
    display: inline-block;
    letter-spacing: .05em;
    margin-bottom: 30px;
    background-color: #fff;
    border-radius: 50px;
    padding: 10px 20px;
    position: relative;
}
.storage-intro h3 span::before{
    position: absolute;
    bottom: -15px;
    right: 0;
    left: 0;
    content: "▼";
    color: #fff;
}
#storage-page .storage-intro h3{
    font-size: 2rem;
    letter-spacing: .15em;
    line-height: 1.5;
    margin-bottom: 40px;
    position:relative;
    padding-bottom: 10px;
    text-align: center;
}
.storage-intro  p{
    line-height: 2.3;
    letter-spacing: .04em;
    font-size: 1.1rem;
    margin-bottom: 30px;
    text-align: center;
}





/* 季節の収納 */
.storage-season{
    /* border: 3px dotted #333; */
    padding: 50px 100px;
    border: 4px #8a8379 dotted;
}
.storage-season h3 span{
    font-size: 1rem;
    display: inline-block;
    letter-spacing: .05em;
    margin-bottom: 20px;
    background-color: #fff;
    border-radius: 50px;
    padding: 10px 20px;
    position: relative;
}
.storage-season h3 span::before{
    position: absolute;
    bottom: -15px;
    right: 0;
    left: 0;
    content: "▼";
    color: #fff;
}
.storage-season h3{
    text-align: center;
    font-size: 1.8rem;
    letter-spacing: .07em;
    margin-bottom: 60px;
}
.storage-season .storage-season-item{
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: 1fr 1fr;
    gap: 50px 0;
}
.storage-season .storage-season-item li{
    text-align: center;
}
.storage-season .storage-season-item li p{
    padding-top:10px;
    font-size: 0.9rem;
}
.storage-season .storage-season-item img{
    border-radius: 50%;
    width: 150px;
    height: 150px;
    box-shadow: 5px 5px 3px #7a7a7a5c;
}
/* 月バッジ */
.storage-season .storage-season-item li {
    position: relative;
}
.storage-season .storage-season-item li::before {
    content: attr(data-month);
    position: absolute;
    top: 0px;
    left: 0px;
    background-color: #333;
    color: #fff;
    font-size: 0.8rem;
    font-weight: bold;
    width: 47px;
    height: 47px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* .storage-season .storage-season-item li .mon{
    font-size: 1.5rem;
    margin-bottom: 10px;
    font-family: "Lato", sans-serif;
}
 */



/* 床下収納　理由 */
.storage-reason {
    margin-bottom: 150px;
}
.storage-reason .storage-list{
    display: flex;
    align-items: center;
    gap: 100px;
    border-bottom: 1px solid #3333335b;
}
.storage-reason .storage-list h3{
    position: relative;
    font-size: 1.6rem;
    letter-spacing: .07em;
    margin-bottom: 25px;
    line-height: 1.6;
    padding-bottom: 10px;
}
.storage-reason .storage-list .point{
    width: 60px;
    height: 60px;
    background-color: #333;
    border-radius: 50%;
    color: #fff;
    font-family: "Lato", sans-serif;
    font-size: 1.3rem;
    text-align: center;
    line-height: 1.2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.storage-reason .storage-list .point span{
    display: block;
    font-size: 0.8rem;
}
.storage-reason .storage-list p{
    font-size: 1rem;
    line-height: 2;
    margin-bottom: 10px;
}
/* 画像枠：幅を統一（今まで通り600px） */
#storage-page .storage-list .img{
  flex: 0 0 500px;   /* 幅固定（flex-basis） */
}

/* 画像本体：比率固定でトリミング統一 */
#storage-page .storage-list .img img{
  width: 100%;
  aspect-ratio: 4 / 3;   /* 16/9にしたければここを変更 */
  object-fit: cover;
  display: block;
  height: 350px;          /* 明示しておくと安全 */
}

/* ===== レスポンシブ（768px以下） ===== */
@media (max-width: 768px){

  /* ------- 余白まわり ------- */
  #storage-page .inner{
    padding: 40px 10px!important;
  }

  /* ------- 導入画像 ＋ 縦書きテキスト ------- */

  /* メイン画像 */
  .storage-img1 img{
    position: static;
    width: 100%;
    height: auto;
    margin-bottom: 24px;
    display: block;
  }

  /* サブ画像も絶対配置を解除して通常フローへ */
  .storage-img2 img{
    position: static;
    top: auto;
    right: auto;
    width: 100%;
    height: auto;
    margin: 0 0 24px;
    display: block;
  }

  /* 縦書き → 横書き・中央寄せ */
  #storage-page .storage-vertical{
    writing-mode: horizontal-tb;
    position: static;
    top: auto;
    right: auto;
    font-size: 1.1rem;
    letter-spacing: .15em;
    line-height: 1.7;
    text-align: center;
    margin: 0 0 32px;
  }

  /* イントロ */
  .storage-intro{
    margin: 0 20px 60px;
  }
  #storage-page .storage-intro h3{
    font-size: 1.1rem;
    letter-spacing: .12em;
    margin-bottom: 24px;
  }
  .storage-intro h3 span{
    font-size: 0.85rem;
    margin-bottom: 18px;
    padding: 8px 16px;
  }
  .storage-intro p{
    font-size: 0.8rem;
    line-height: 1.6;
    text-align: left;        /* 読みやすいよう左寄せ */
  }

  /* ------- 季節の収納グリッド ------- */
  .storage-season{
    padding: 30px 16px;
    border-width: 3px;
    margin: 0 10px;
  }
  .storage-season h3{
    font-size: 1rem;
    margin-bottom: 30px;
    line-height: 1.6;
  }
  .storage-season h3 span{
    font-size: 0.85rem;
    margin-bottom: 12px;
    padding: 6px 14px;
  }

  .storage-season .storage-season-item{
    grid-template-columns: repeat(3, 1fr);  /* 6列 → 2列 */
    grid-template-rows: auto;
    gap: 15px 10px
  }
    /* 丸画像ラッパーのサイズをvwで可変に */
  .storage-season .storage-season-item li > div{
    width: min(22vw, 110px);
    height: min(22vw, 110px);
    margin: 0 auto 8px;
  }

  /* 画像はラッパーにフィット＆正円のまま */
  .storage-season .storage-season-item img{
    width: 100%;
    height: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    object-fit: cover;
    box-shadow: 4px 6px 4px #d0d0d0;
  }

  .storage-season .storage-season-item li p{
    font-size: 0.7rem;
    padding-top: 6px;
  }

  .storage-season .storage-season-item li::before{
    top: -4px;
    left: -4px;
    width: 40px;
    height: 40px;
    font-size: 0.7rem;
  }

  
  /* 月バッジも少し小さく */
  .storage-season .storage-season-item li::before{
    top: -4px;
    left: -4px;
    width: 40px;
    height: 40px;
    font-size: 0.7rem;
  }

  /* ------- 床下収納の理由（point01〜05） ------- */
  .storage-reason{
    margin-bottom: 80px;
  }

  .storage-reason .storage-list{
    flex-direction: column;    /* 横並び → 縦並び */
    gap: 20px;
    padding: 30px 0;
  }

  .storage-reason .storage-list .point{
    width: 52px;
    height: 52px;
    font-size: 1rem;
  }
  .storage-reason .storage-list .point span{
    font-size: 0.75rem;
  }

  .storage-reason .storage-list h3{
    font-size: 1.1rem;
    line-height: 1.6;
    margin-bottom: 16px;
  }

  .storage-reason .storage-list p{
    font-size: 0.8rem;
    line-height: 1.8;
  }

  /* 画像は全幅で表示 */
  #storage-page .storage-list .img{
    flex: 0 0 auto;
    width: 100%;
  }
  #storage-page .storage-list .img img{
    width: 100%;
    height: 240px;      /* 高さ固定を解除 */
    aspect-ratio: auto;
  }

  /* 下のstrength-bannerとの余白を少し詰める場合 */
  .strength-banner{
    margin-top: 40px;
  }
}
/*==========================================================================
　強み　家づくりの流れ
============================================================================ */
#flow-page .subpage-top{
    background-image: url(images/strengths.webp);
}
#flow-page .flow-list li{
    display: grid;
    grid-template-columns:  2fr 1fr;
    align-items: center;
    gap: 100px;
    border-bottom: 1px solid #8a83795d;
    padding: 50px;
    margin-left: 200px;
}
#flow-page .flow-list li .layout{
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 20px;
}
#flow-page .flow-list li h3 {
  font-size: 1.4rem;
  letter-spacing: .04em;
  font-weight: bold;
  color: #545450;
}
#flow-page .flow-list .flow{
    width: 55px;
    height: 55px;
    background-color: #545450;
    border-radius: 50%;
    color: #fff;
    font-family: "Lato", sans-serif;
    font-size: 1.1rem;
    text-align: center;
    line-height: 1.2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
#flow-page .flow-list .flow span{
    display: block;
    font-size: 0.7rem;
}
#flow-page .flow-list li p{
    font-size: 1rem;
    line-height: 2.2;
    letter-spacing: .06em;
}
#flow-page .flow-list li img{
    width: 100%;
    max-width: 300px;
    height: 180px;
    object-fit: cover;
    border-radius: 3px;
}
#flow-page .flow-list li:nth-of-type(3) img{
    object-position: center 0%;
}

/* ===== レスポンシブ（768px以下） ===== */
@media (max-width: 768px){
  /* ページ内側の余白を確保 */
    #flow-page .inner {
        padding: 20px 15px 30px;
    }
    #flow-page  .sec-title{
        margin: 0 0 10px 20px;
    }
  /* フローリスト：2カラム→1カラム、左右マージン解除 */
    #flow-page .flow-list li{
        grid-template-columns: 1fr; /* 2fr 1fr → 1列 */
        gap: 16px;                  /* 100px → 16px */
        padding: 25px 20px;         /* 50px → 24/16px */
        margin-left: 0;             /* 200px をリセット */
    }
    /* 見出し・本文のサイズを小さめに */
    #flow-page .flow-list li h3{
        font-size: 1.1rem;          /* 1.5rem → 1.2rem */
        letter-spacing: .03em;

    }
    #flow-page .flow-list li p{
        font-size: 0.8rem;         /* 1rem → 0.95rem */
        line-height: 1.8;           /* 2.2 → 1.9 */
        letter-spacing: .04em;
    }
    /* 画像は横幅フィット＆高さ自動 */
    #flow-page .flow-list li img{
        max-width: 100%;
        width: 100%;
        height: 200px;
        object-fit: cover;
    }
}

/*==========================================================================
　強み　アフターサポート
============================================================================ */
#afterSupport-page .subpage-top{
    background-image: url(images/strengths.webp);
}
/* 導入部分 */
#afterSupport-page .afterSupport-lead >div{
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 100px;
    margin-bottom: 40px;
}
#afterSupport-page .afterSupport-lead div p{
    font-size: 1.1rem;
    line-height: 2;
    margin-bottom: 10px;
    letter-spacing: .02em;
}
#afterSupport-page .afterSupport-lead .sec-title{
    margin-bottom: 40px;
}
#afterSupport-page .afterSupport-lead .inner{
    padding: 0;
}
/* リスト */
.after-menu{
    margin-top: 40px;
}
.after-menu li {
    position: relative;
    isolation: isolate;
    border-bottom: 1px solid #8a83795d;
}
.after-menu li a{
    display: flex;
    align-items: center;
    padding-left: 10px;
    padding: 30px;
    font-size: 1.2rem;
    letter-spacing: .04em;
    gap: 24px;
    transition: color .25s ease, transform .25s ease;
    position: relative;
    z-index: 1;
    width: 100%;
}

/* hover動作 */
.after-menu li:hover::before {
    transform: scaleX(1);
}
.after-menu li:hover a::after {
    transform: translateX(6px);
    opacity: 1;
}
.after-menu li:hover a{
    transform: translateX(4px);
    /* color: #B22222; */
    font-weight: bold;
    opacity: .9;
}

/* 動作をスムーズに */
.after-menu li a {
    transition: transform .25s ease, color .25s ease, opacity .25s ease;
}
/* リスト背景アニメーション */
.after-menu li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: #3333330b;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .35s ease;
    z-index: 0;
}

/* 01 完成保証サービス　*/
#afterSupport-page .after-service{
    background-color: #ffffff2f;
}
#afterSupport-page .after-service .service{
    background-color: #fff;
    border-radius: 3px;
    padding: 30px 50px;
    margin-top: 50px;
    text-align: center;
}
#afterSupport-page .after-service .service h4{
    margin: 10px auto 20px;
    text-align: center;
    display: inline-block;
    background-color: #333;
    color: #fff;
    font-size: 1rem;
    padding: 10px 40px;
}
#afterSupport-page .after-service .service p{
    text-align-last: left;
}

#afterSupport-page .after-service .layout{
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 30px;
    padding-bottom: 10px;
    border-bottom: 2px solid #8a83795d;
}
#afterSupport-page .after-service h3 {
  display: flex;
  align-items: center;
  gap: 15px;
  font-size: 1.8rem;
  letter-spacing: .15em;
}
#afterSupport-page .after-service .point{
    width: 60px;
    height: 60px;
    background-color: #545450;
    border-radius: 50%;
    color: #fff;
    font-family: "Lato", sans-serif;
    font-size: 1.1rem;
    text-align: center;
    line-height: 1.2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-bottom: 0;
}
#afterSupport-page .after-service .point span{
    display: block;
    font-size: 0.7rem;
    margin-bottom: 2px;
}
#afterSupport-page .after-service h4{
    font-size: 1.5rem;
    letter-spacing: .15em;
    margin: 100px auto 50px;
    text-align: center;
    line-height: 1.5;
    display: inline-block;
    padding: 20px 40px;
    background-color: #ffffff9f;
    border-radius: 50px;
    position: relative;
}
#afterSupport-page .after-service h4::after{
    content: "";
    position: absolute;
    left: 50%;
    bottom: -20px;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 30px solid transparent;
    border-right: 30px solid transparent;
    border-top: 20px solid #ffffff9f;
}

#afterSupport-page .after-service p{
    font-size: 1.2rem;
    line-height: 2;
    margin-bottom: 10px;
    letter-spacing: .02em;
    margin-bottom: 20px;
}
#afterSupport-page .after-service .plant{
    text-align: center;
}
#afterSupport-page .strength-banner{
    background-color: #ffffff2f;
    margin-bottom: 0;
    padding-bottom: 40px;
}
.after-service a{
    color: #B22222;
    font-weight: bold;
}
#afterSupport-page .support,
#afterSupport-page .other{
    text-align: center;
}
#afterSupport-page .other p{
    text-align-last: left;
}
#contact-page .subpage-top{
    background-image: url(images/thankyou.webp);
}
#contact-page  .contact-page-list{
    list-style-type:disc;
    list-style-position: inside;
    margin-bottom: 60px;
}
#contact-page  .contact-page-list li{
    margin-bottom: 10px;
    line-height: 1.6;
    font-size: 1.1rem;
}
#afterSupport-page .after-service .inner{
    padding: 130px 0 20px;
}
.support-img{
    margin: 0 auto 100px;
    background-color: #fff;
    border-radius: 3px;
    padding: 20px 50px;
}
.support-img img{
    opacity: .8;
}
/* サポート画像 */
#afterSupport-page .support-list{
    display: flex;
    justify-content: center;
    gap: 50px;
    margin-top: 50px;
}
#afterSupport-page .support-list div{
    margin-bottom: 30px;
    text-align: center;
}
#afterSupport-page .support-list h5{
    text-align: center;
    font-size: 1.2rem;
    letter-spacing: .08em;
    line-height: 1.6;
    margin-bottom: 10px;
}
#afterSupport-page .support-list p{
    font-size: 1rem;
    text-align: center;
}
#afterSupport-page  .follow-img{
    width: 100px;
    text-align: center;
    margin: 0 auto;
    opacity: .8;
}

.after-reform{
    display: grid;
    grid-template-columns: repeat( 6,1fr);
    gap: 40px 0;
    margin: 100px 50px;
}
.after-reform li{
    line-height: 1.5;
    font-size: 1rem;
    text-align: center;
}
.after-reform li div{
    width: 170px;
    margin: 0 auto 20px;
    opacity: .7;
}
/* フォーム */
/* form{
    padding: 80px;
    margin: 0 auto;
    background-color: #ffffff9d;
    border-radius: 3px;
} */


/* クリック誘導 */
#afterSupport-page div.img a { display:block; }
#afterSupport-page div .img img { cursor: zoom-in; }

/* ライトボックス */
#afterSupport-page .lightbox-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.75);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  padding: 24px;
}
#afterSupport-page .lightbox-overlay.is-visible { display: flex; }

/* 画像 */
#afterSupport-page .lightbox-content img {
  max-width: 90vw;
  max-height: 90vh;
  height: auto;
  width: auto;
  box-shadow: 0 10px 30px rgba(0,0,0,.4);
  border-radius: 8px;
}

/* 閉じるボタン */
#afterSupport-page .lightbox-close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  background: rgba(255,255,255,.9);
  border: none;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
}
#afterSupport-page .lightbox-close:focus-visible { outline: 2px solid #333; }

/* 背景スクロール固定 */
body.lb-no-scroll { overflow: hidden; }


/* ===== レスポンシブ（768px以下） ===== */
@media (max-width: 768px){
    #contact-page .sec-title{
        margin: 0 30px 20px;
    }
    #contact-page .contact-page-list{
        padding: 10px 20px;
    }
  /* 内側余白（lead内はPCでpadding:0だったのでSPで戻す） */
    #afterSupport-page .inner {
        padding: 20px 15px 30px;
    }
    #afterSupport-page .after-service .inner {
        padding: 20px 15px 20px;
    }
    #afterSupport-page .afterSupport-lead .sec-title{
        margin:0 0 20px 10px;
    }
    /* リード：2カラム→1カラム */
    #afterSupport-page .afterSupport-lead > div{
        grid-template-columns: 1fr;   /* 1fr 1fr → 1列 */
        gap: 24px;                    /* 100px → 24px */
        margin-bottom: 24px;          /* 40px → 24px */
    }
    #afterSupport-page .afterSupport-lead div div{
        padding: 0 10px;
    }
    #afterSupport-page .afterSupport-lead .inner {
    padding: 0!important;
}
    #afterSupport-page .afterSupport-lead div p{
        font-size: .9rem;
        line-height: 1.8;
        margin-bottom: 10px;
    }
    #afterSupport-page .afterSupport-lead img{
        width: 100%;
        height: auto;
        display: block;
    }
    /* 目次リスト（after-menu） */
    .after-menu{
        margin-top: 20px;
    }
    .after-menu li a{
        padding: 16px 12px;           /* 30px → 16/12px */
        gap: 12px;                    /* 24px → 12px */
        font-size: .9rem;              /* 1.2rem → 1rem */
    }
    /* 各サービスセクションのタイポ＆余白 */
    #afterSupport-page .after-service .inner{
        /* padding-block: 24px; */
        padding: 30px 20px!important;
    }
    #afterSupport-page .after-service h3 .num{
        font-size: 1.3rem;            /* 2rem → 1.4rem */
        padding-right: 12px;
    }
    #afterSupport-page .after-service h3{
        font-size: 1.1rem;            /* 1.8rem → 1.3rem */
        letter-spacing: .08em;
        padding-bottom: 0;         /* 25px → 10px */
        margin-bottom: 0;          /* 50px → 24px */
    }
    #afterSupport-page .after-service p{
        font-size: .8rem;              /* 1.1rem → 1rem */
        line-height: 1.8;             /* 2 → 1.9 */
        margin-bottom: 20px;          /* 20px → 14px */
    }
    #afterSupport-page .after-service img{
        width: 100%;
        height: auto;
        display: block;
    }  
    .after-reform {
        display: grid;
        grid-template-columns: repeat(3, 1fr); /* 2列に */
        gap: 10px 0px; /* 余白を少し広げる */
        justify-items: center;
        text-align: center;
        margin: 30px 0px;
    }

    .after-reform li {
        font-size: 0.7rem;
        line-height: 1.6;
    }

    .after-reform li div {
        max-width: 90px;
        margin: 0 auto 10px;
    }

    .after-reform li img {
        width: 100%;
        height: auto;
    }
    #afterSupport-page .after-service h3 .num {
        width: 40px;
        height: 40px;
        font-size: 1rem;
        padding: 0;
    }
    .support-img {
        margin: 0 auto 20px;
        padding: 10px;
    }
    #afterSupport-page .after-service .service {
        padding: 20px;
    }
    #afterSupport-page .after-service .service h4 {
        font-size: .8rem;
        padding: 10px 20px;
        width: 100%;
    }
    #afterSupport-page .after-service h4 {
    font-size: .9rem;
    padding: 10px 40px;
    margin: 40px 0 20px;
}
#afterSupport-page .after-service h4::after {
    left: 50%;
    bottom: -10px;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 10px solid #ffffff9f;
}
      /* support-list を縦並び・中央寄せ */
  #afterSupport-page .support-list {
    flex-direction: column;
    align-items: center;
    gap: 40px;
    margin-top: 0;
  }

  #afterSupport-page .support-list li {
    width: 100%;
    max-width: 350px; /* 各項目を中央寄せ＋幅制限 */
    text-align: center;
  }

  #afterSupport-page .support-list h5 {
    font-size: 1rem;
    line-height: 1.5;
  }

  #afterSupport-page .support-list p {
    font-size: 0.8rem;
    line-height: 1.8;
  }

  #afterSupport-page .follow-img {
    width: 80px; /* 画像を少し小さく */
    margin: 0 auto 15px;
  }

  #afterSupport-page .follow-img img {
    width: 100%;
    height: auto;
  }


}
@media (max-width: 768px) {
  /* 横スクロールさせるラッパー */
  #afterSupport-page .after-service .inner > .main-img {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    /* 見た目を整えるなら */
    /* border-radius: 8px; */
  }

  /* スクロールバー非表示（必要なら） */
  #afterSupport-page .after-service .inner > .main-img::-webkit-scrollbar {
    display: none;
  }
  #afterSupport-page .after-service .inner > .main-img {
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE/Edge */
  }

  /* 中の画像を拡大（はみ出し→横スクロール） */
  #afterSupport-page .after-service .inner > .main-img img {
    display: block;
    width: 200%;       /* ここで拡大率を指定 */
    max-width: none;   /* 画像のグローバル max-width:100% を無効化 */
    height: auto;
  }
}
/*==========================================================================
    施工事例ページ（アーカイブ）
============================================================================ */
#archive-works-page .subpage-top{
    background-image: url(images/works-page.webp);
}
#archive-works-page .inner{
    padding: 60px 0 ;
}
#archive-works-page .works-layout{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: 200px;
    margin-bottom: 50px;
    gap: 50px;
}
#archive-works-page .works-layout .works-layout-item01{
    grid-column: 1/3;
    grid-row: 1/3;
    object-fit: cover;
    width: 100%;
    height: 100%;
}
#archive-works-page .works-layout .works-layout-item12{
    grid-column: 3/5;
    grid-row: 4/6;
    object-fit: cover;
    width: 100%;
    height: 100%;
}
/* すべての画像共通設定 */
#archive-works-page .works-layout a {
    display: block;
    width: 100%;
    height: 100%;
}
#archive-works-page .works-layout img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    vertical-align: bottom;
}
/* ダミー画像クリックできなくする */
#archive-works-page .works-layout .is-dummy a {
    pointer-events: none;
}
#archive-works-page .works-layout .is-dummy img {
    opacity: 0.3;
    filter: grayscale(100%);
}

/* ===== レスポンシブ（768px以下） ===== */
@media (max-width: 768px) {
    #archive-works-page .works-layout{
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-auto-rows: auto;
        gap: 20px;
        margin: 10px;
    }
    #archive-works-page .works-layout a,
    #archive-works-page .works-layout img {
        height: auto;
    }
    /* 特大タイル指定をリセット */
    #archive-works-page .works-layout .works-layout-item01,
    #archive-works-page .works-layout .works-layout-item12{
        grid-column: auto;
        grid-row: auto;
    }
    #archive-works-page .works-layout img{
        aspect-ratio: 4 / 3;
        object-fit: cover;
    }


  /* 黒幕を常に非表示にする */
  .works-layout [class^="works-layout-item"] a::before {
    opacity: 0 !important;
    transition: none;
  }
  .works-layout [class^="works-layout-item"] a:hover::before {
    opacity: 0 !important;
  }

  /* タイトルテキストも出さない */
  .works-layout [class^="works-layout-item"] a::after {
    opacity: 0 !important;
    transition: none;
  }
  .works-layout [class^="works-layout-item"] a:hover::after {
    opacity: 0 !important;
  }

  /* ズーム解除（常に等倍のまま） */
  .works-layout [class^="works-layout-item"] a img {
    transform: none !important;
    transition: none;
  }
  .works-layout [class^="works-layout-item"] a:hover img {
    transform: none !important;
  }
}
/*==========================================================================
    お客様の声ページ（アーカイブ）
============================================================================ */
#archive-voice-page .subpage-top{
    background-image: url(images/voice-page.webp);
    background-position: 90% center;
}
#archive-voice-page .inner{
    padding: 60px 0;
}
#archive-voice-page .voice-page-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px 80px;
}

#archive-voice-page .voice-page-list > div {
    text-align: left;
}

#archive-voice-page .voice-page-list a {
    display: block;
    margin-bottom: 100px;
}

/* 画像をカード幅いっぱい・トリミング維持 */
#archive-voice-page .voice-img {
  width: 100%;        /* divいっぱい */
  height: 400px;      /* 高さを固定したい値に調整 */
  overflow: hidden;   /* はみ出しを隠す */
  margin-bottom: 30px;
}

#archive-voice-page .voice-img img {
  width: 100%;        /* 親幅にフィット */
  height: 100%;       /* 親高にフィット */
  object-fit: cover;  /* 枠いっぱいにトリミング */
  display: block;
}

/* タイトルと補足テキスト */
#archive-voice-page .voice-info {
    font-size: 0.9rem;
    margin-bottom: 5px;
}
#archive-voice-page .voice-title {
    line-height: 1.8;
    font-size: 1rem;
}

/* 画像ホバーでズーム */
#archive-voice-page .voice-page-list a:hover .voice-img img,
#archive-voice-page .voice-page-list a:focus-visible .voice-img img {
    transform: scale(1.1);
}

/* タイトル下線（常に薄く見えるベース線） */
.voice-title {
    position: relative; /* 疑似要素のために必要 */
    display: inline-block;
}
.voice-title::before {
    content: "";
    position: absolute;
    left: 0;
    bottom: -2px;
    width: 100%;
    height: 1px;
    background-color: currentColor;
    opacity: 0.3;
}
/* ホバーで伸びるアニメーション線 */
.voice-title::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -2px;
    width: 100%;
    height: 1px;
    background-color: currentColor;
    transform: scaleX(0);
    transform-origin: right;
    transition: transform 0.3s ease;
}

/* ← ここをこのページ用に変更 */
#archive-voice-page .voice-page-list a:hover .voice-title::after,
#archive-voice-page .voice-page-list a:focus-visible .voice-title::after {
    transform: scaleX(1);
    transform-origin: left;
}
/* ボイスページネーション */
/* このページのページネーションだけ整える */
#archive-voice-page .page-nation {
text-align: center;
}

#archive-voice-page .page-nation li {
display: inline-block;
margin: 50px 15px;
list-style: none;
}

/* a と span の両方に同じ箱サイズを与える */
#archive-voice-page .page-nation .page-numbers {
display: inline-flex;
justify-content: center;
align-items: center;
width: 40px;
height: 40px;
line-height: 40px;
border-radius: 50%;
text-decoration: none;
transition: background-color .3s ease, box-shadow .3s ease;
}

#archive-voice-page .page-nation .page-numbers:hover {
background-color: rgba(107,103,100,.18);
box-shadow: 0 6px 14px rgba(0,0,0,.12);
}

#archive-voice-page .page-nation .page-numbers.current {
background-color: #6b6764;
color: #fff;
}

/* ===== レスポンシブ（768px以下） ===== */
@media (max-width: 768px){

  /* ▼ ページ内余白 */
  #archive-voice-page .inner{
    padding: 30px 0 50px;
  }

  /* ▼ 2カラム → 1カラムへ */
  #archive-voice-page .voice-page-list {
    grid-template-columns: 1fr; /* 1カラム */
    gap: 20px;
  }

  /* ▼ カード */
  #archive-voice-page .voice-page-list > div {
    text-align: left;
  }

  #archive-voice-page .voice-page-list a {
    margin-bottom: 0px;
    padding: 16px;
  }

  /* ▼ 画像（高さ小さめ） */
  #archive-voice-page .voice-img {
    width: 100%;
    height: 240px;        /* スマホ用に高さ縮小 */
    margin-bottom: 16px;  
  }

  #archive-voice-page .voice-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  /* ▼ テキスト */
  #archive-voice-page .voice-info {
    font-size: 0.8rem;
  }

  #archive-voice-page .voice-title {
    font-size: .8rem;
    line-height: 1.6;
  }

  /* ▼ アンダーラインアニメの位置微調整 */
  .voice-title::before,
  .voice-title::after {
    bottom: -1px;
  }

  /* ▼ ページネーション */
  #archive-voice-page .page-nation li {
    margin: 20px 8px;
  }

  #archive-voice-page .page-nation .page-numbers {
    width: 34px;
    height: 34px;
    font-size: 0.85rem;
  }
  /* 画像ズーム無効化 */
  #archive-voice-page .voice-img img {
    transform: none !important;
    transition: none !important;
  }
  #archive-voice-page .voice-page-list a:hover .voice-img img,
  #archive-voice-page .voice-page-list a:focus-visible .voice-img img {
    transform: none !important;
  }

  /* タイトル下線アニメーション無効化 */
  #archive-voice-page .voice-title::after {
    transform: scaleX(0) !important;
    transition: none !important;
  }
  #archive-voice-page .voice-page-list a:hover .voice-title::after,
  #archive-voice-page .voice-page-list a:focus-visible .voice-title::after {
    transform: scaleX(0) !important;
  }

}

/*==========================================================================
    お客様の声ページ（シングル）
============================================================================ */
#single-voice-page .subpage-top{
    background-image: url(images/voice-page.webp);
}
#single-voice-page .title-wrap{
    position: relative;
}
#single-voice-page .inner {
    padding: 130px 0 10px;
}
#single-voice-page .voice-page-list-tag{
    position: absolute;
    left: 0px;
    top: -50px;
    background: #B22222;
    color: #fff;
    padding: 5px 15px;
    font-size: .85rem;
    line-height: 1.5;
    border-radius: 6px;
    letter-spacing: .1em;
    box-shadow: 0 2px 6px rgba(0,0,0,.15);
    z-index:1;
}
/* サムネ */
#single-voice-page .voice-thumb{
    margin: 0 auto 30px;
}
.voice-thumb img{
    object-fit: cover;
    width: 100%;
    height: 750px;
    object-position:  center 40%;
}
/* テキスト */
#single-voice-page .voice-content h2{
    font-size: 1.8rem;
    letter-spacing: .1em;
    margin: 30px 0 10px;
}
#single-voice-page .voice-content p{
    line-height: 2;
    letter-spacing: .04em;
    font-size: 1.15rem;
    margin-bottom: 20px;
    text-align: center;
}
#single-voice-page .voice-content img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}
/* Q */
#single-voice-page  h3{
    font-size: 2rem;
    letter-spacing: .08em;
    margin-bottom: 60px;
}
#single-voice-page .point-item{
    background-color: #ffffff9d;
    border-radius: 3px;
    padding: 50px;
    margin-bottom: 40px;
}
#single-voice-page .point-item:first-of-type {
    margin-top: 50px;
}
#single-voice-page .point-item h4{
    font-size: 1.5rem;
    letter-spacing: .1em;
    margin: 30px 0 30px;
}
#single-voice-page .point-text{
    line-height: 2  ;
    letter-spacing: .04em;
    font-size: 1.15rem;
}
/* 2枚横並びレイアウト */
#single-voice-page .point-images {
    display: flex;
    gap: 20px;
    justify-content: center;   /* 左寄せなら flex-start に */
    align-items: stretch;       /* 高さ揃えたい場合は cover と合わせて */
    flex-wrap: wrap;            /* SPで折り返し */
    margin-bottom: 20px;
}
#single-voice-page .point-images img {
    width: calc(50% - 10px);
    height: auto;              /* トリミングして揃えたい場合。自由に変更OK */
    object-fit: cover;          /* 画角を揃えて見栄えUP */
    display: block;
    }


/* ボタン */
.voice-cta {
    margin: 20px 0 ;
    text-align: center;
}
.voice-cta-btn {
    display: inline-block;
    padding: 20px 150px;
    border-radius: 50px;
    font-weight: 600;
    border: 1px solid #333;
    letter-spacing: .08em;
    transition: opacity 0.7s ease;
    font-size: 1.1rem;
}
.voice-cta-btn:hover {
    opacity: .7;
}




/* ===== レスポンシブ（768px以下） ===== */
@media (max-width: 768px) {
    #single-voice-page .inner {
        padding:20px 0 0!important;
    }
    #single-voice-page .title-wrap h3{
        padding: 0 20px;
    }
    #single-voice-page .voice-page-list-tag {
        position: absolute;
        top: -40px;
        left: 15px;
        font-size: .78rem;
        padding: 4px 10px;
        border-radius: 4px;
    }
    #single-voice-page .voice-thumb {
        margin: 0 auto 20px;
    }
    .voice-thumb img{
        object-fit: cover;
        width: 100%;
        height: 100%;
        object-position:  center 40%;
    }
    /* テキスト */
    #single-voice-page .voice-content{
        margin: 0 20px;
    }
    #single-voice-page .voice-content h2{
        font-size: 1.2rem;
    }
    #single-voice-page .voice-content p{
        font-size: 0.8rem;
        margin-bottom: 0px;
        line-height: 1.6;
    text-align: left;
    }
    #single-voice-page h3{
        font-size: 1rem;
        margin-bottom: 20px;
        line-height: 1.7;
    }
    #single-voice-page .inner{
        padding: 0 10px;
    }
    #single-voice-page .point-item {
        padding: 10px;
        margin: 10px 10px 30px;
    }
    #single-voice-page .point-item h4 {
        font-size: 1rem;
        margin: 10px 0;
        line-height: 1.5;
        letter-spacing: .04em;
    }
    #single-voice-page .point-item p{
        line-height: 1.4;
        font-size: 0.75rem;
    }
    #single-voice-page .point-text{
        font-size:  .8rem;
    }
    /* 2枚横並びレイアウト */
    #single-voice-page .point-images {
        gap: 5px;
    }
    /* ボタン */
    .voice-cta-btn {
    padding: 20px 80px;
    font-size: .9rem;
}
}
/*==========================================================================
    コラムページ（アーカイブ）
============================================================================ */
#archive-column-page .subpage-top{
    background-image: url(images/column-page.webp);
}
#archive-column-page  .inner{
    padding: 60px 0;
}
/* レイアウト */
#archive-column-page .column-layout{
    display: flex;
    justify-content: space-between;
}
/* バッジタグ */
#archive-column-page .title-wrap{
    position: relative;
}
#archive-column-page .column-page-list-tag{
    position: absolute;
    right: 10px;
    bottom: 10px;
    background: #B22222;
    color: #fff;
    padding: 5px 15px;
    font-size: .85rem;
    line-height: 1.5;
    border-radius: 3px;
    letter-spacing: .1em;
    box-shadow: 0 2px 6px rgba(0,0,0,.15);
    z-index:1;
}
/* メイン */
#archive-column-page main{
    flex-basis: 900px;
}

/* ピックアップ */
#archive-column-page .column-pickup{
    /* background-color: #ffffff5d; */
    border: 1px solid #333;
    border-radius: 3px;
    padding: 60px;
    margin-bottom: 80px;
}
#archive-column-page .column-pickup .sec-title{
    margin-bottom: 40px;
}
#archive-column-page .column-pickup .column-pickup-list{
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: stretch; /* セルを同じ行で同じ高さに */
    gap: 50px;
}
#archive-column-page .column-pickup .column-pickup-list li img{
    width: 100%;
    height: 230px;
    aspect-ratio: 16 / 9; /* ← 横長比率で統一 */
    object-fit: cover;
    display: block;
    margin-bottom: 10px;
    border-radius: 3px;
}
#archive-column-page .column-pickup .column-pickup-list li h3{
    font-size: 1.1rem;
    letter-spacing: .1em;
    margin: 5px 0;
    line-height: 1.5;
}
#archive-column-page .column-pickup .column-pickup-list li .day{
    font-size: 0.9rem;
    color: #666;
}
#archive-column-page .column-pickup .column-pickup-list li .tag{
    font-size: 0.9rem;
    color: #666;
}

/* 記事 */
#archive-column-page .column-article-list li a{
    display: flex;
    align-items:center;
    gap: 50px;
    border-bottom: 1px solid rgba(0,0,0,.15);
    padding: 50px 20px;
}
#archive-column-page  .column-article-list li img{
    width: 300px;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    height: auto;
    border-radius: 3px;
}
#archive-column-page  .column-article-list li h3{
    font-size: 1.2rem;
    letter-spacing: .1em;
    margin: 10px 0;
    line-height: 1.5;
}
#archive-column-page  .column-article-list li .day{
    font-size: 0.9rem;
    color: #666;
}
#archive-column-page  .column-article-list li .tag{
    font-size: 0.9rem;
    color: #666;
}
/* 画像 */
/* 記事リスト画像サイズ統一 */
#archive-column-page .column-article-list li .title-wrap {
  width: 300px;           /* 横幅を固定 */
  aspect-ratio: 16 / 9;   /* 比率を固定 */
  overflow: hidden;
  border-radius: 3px;
  flex-shrink: 0;          /* 小さくならないように固定 */
}

#archive-column-page .column-article-list li .title-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;       /* 中央トリミングで統一感 */
  display: block;
  transition: transform .4s ease;
}

/* サイド */
/* #archive-column-page aside{
    flex-basis: calc(100% - 900px - 50px);
} */
#archive-column-page aside h4{
    position: relative;
}
#archive-column-page aside h4::after{
    position: absolute;
    top: 7px;
    left: 5px;
    width: 6px;
    height: 6px;
    background-color: #B22222;
    content: "";
}
/* 人気の記事 */
#archive-column-page .article-popular{
  /* background-color: #ffffff5d; */
    border: 1px solid #333;
    border-radius: 3px;
    margin-bottom: 30px;
    padding: 20px;
}
#archive-column-page .article-popular ul li{
    margin-bottom: 25px;
    font-size: 0.85rem;
    letter-spacing: .1em;
}
#archive-column-page .article-popular .tag-layout{
    display: flex;
    margin-bottom: 5px;
}
#archive-column-page .article-popular .tag-layout p:first-child{
    background-color: #B22222;
    border-radius: 3px;
    color: #fff;
    font-size: 0.6rem;
    letter-spacing: .1em;
    padding: 0px 8px;
    line-height: 2.2;
    margin-right: 10px;
}
#archive-column-page .article-popular .tag-layout p:last-child{
    font-size: 0.75rem;
}
/* 記事カテゴリー */
#archive-column-page .article-cat{
  /* background-color: #ffffff5d; */
    border: 1px solid #333;
  border-radius: 3px;
    padding: 20px;
}
#archive-event-page .article-cat .category__tab-b {
    list-style-type: disc;
    list-style-position: outside;
    margin-bottom: 20px;
    font-size: 0.85rem;
    letter-spacing: .1em;
    position: relative;
    margin-left: 20px;
    font-weight: bold;
    color: #B22222!important
}
#archive-column-page .article-cat h4,
#archive-column-page .article-popular h4
{
    font-size: 1.05rem;
    letter-spacing: .08em;
    padding-left: 20px;
    padding-bottom: 10px;
    margin-bottom: 30px;
    border-bottom: 1px solid rgba(0,0,0,.15);
    font-weight: bold;
}
#archive-column-page .article-cat ul li{
    list-style-type: disc;
    list-style-position: outside;
    margin-bottom: 20px;
    font-size: 0.85rem;
    letter-spacing: .1em;
    position: relative;
    margin-left: 20px;
}

#archive-column-page .article-cat ul li a{
  display: block;                 /* ← 行全体クリック可能に */
  padding: 6px 8px;               /* ← わずかな余白（見た目ほぼ変わらず） */
  text-decoration: none;
  color: inherit;
  border-radius: 4px;             /* hover背景を自然に */
  transition: background-color .25s ease;
}

/* レイアウト：右にサイド、左にメイン */
#archive-column-page .column-layout{
  display: flex;
  gap: 50px;              /* メインとの間隔 */
  align-items: flex-start;/* サイドの高さに引っ張られないように */
  
}

/* メインは固定幅（例：900px） */
#archive-column-page main{
  flex: 0 0 900px;
  min-width: 0;           /* はみ出し防止 */
}

/* サイドは右カラム：stickyで“セクション内”固定 */
#archive-column-page aside{
  flex: 0 0 320px;
  position: sticky;
  top: 80px;           /* ← 画面上から80px空けて固定（お好みで調整） */
  align-self: flex-start;
  margin-top: 0px;    /* ← コンテンツ全体の中での上余白 */
  margin-bottom: 80px; /* ← コンテンツ全体の中での下余白 */
}

/* ホバー*/
/* 画像ズーム用にはみ出し隠す */
#archive-column-page .column-article-list .title-wrap{
  overflow: hidden;
  border-radius: 4px;
}
/* なめらかな変化の下準備 */
#archive-column-page .column-article-list li a{
  position: relative;
  transition: background-color .25s ease;
}
#archive-column-page .column-article-list li .title-wrap img{
  transition: transform .4s ease;
}
#archive-column-page .column-article-list li h3{
  background-image: linear-gradient(currentColor,currentColor);
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0% 1px;     /* 下線 初期値 */
  transition: background-size .3s ease;
}

/* ホバー時のアニメーション */
#archive-column-page .column-article-list li a:hover .title-wrap img,
#archive-column-page .column-article-list li a:focus-visible .title-wrap img{
  transform: scale(1.06);
}
#archive-column-page .column-article-list li a:hover h3,
#archive-column-page .column-article-list li a:focus-visible h3{
  background-size: 100% 1px;   /* 下線がスッと伸びる */
}
#archive-column-page .column-article-list li a:hover::after,
#archive-column-page .column-article-list li a:focus-visible::after{
  transform: translateY(-50%) translateX(0);
  opacity: .6;
}
/* ===== ピックアップ記事：ホバーアニメ ===== */

/* 画像ズーム用にはみ出し隠す */
#archive-column-page .column-pickup .title-wrap{
  overflow: hidden;
  border-radius: 3px;
}

/* アニメーションの下準備 */
#archive-column-page .column-pickup li a{
  position: relative;
  display: block;
  transition: background-color .25s ease;
}
#archive-column-page .column-pickup li .title-wrap img{
  transition: transform .4s ease;
}
#archive-column-page .column-pickup li h3{
  background-image: linear-gradient(currentColor,currentColor);
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0% 1px;
  transition: background-size .3s ease;
}

/* 投稿ホバー時 */
#archive-column-page .column-pickup li a:hover .title-wrap img,
#archive-column-page .column-pickup li a:focus-visible .title-wrap img{
  transform: scale(1.06);
}
#archive-column-page .column-pickup li a:hover h3,
#archive-column-page .column-pickup li a:focus-visible h3{
  background-size: 100% 1px;
}

#archive-column-page .column-pickup li a:hover::after,
#archive-column-page .column-pickup li a:focus-visible::after{
  transform: translateY(-50%) translateX(0);
  opacity: .6;
}
/* よく読まれている記事 */
#archive-column-page .article-popular ul li a{
  display: block;
  position: relative;
  padding: 10px 8px;
  border-radius: 3px;
  transition: background-color .25s ease, transform .25s ease;
}

#archive-column-page .article-popular ul li a:hover,
#archive-column-page .article-popular ul li a:focus-visible{
  background-color: rgba(0,0,0,.04);
  transform: translateX(4px); /* 少し右にスライド */
}

/* 記事カテゴリー */
/* hover時 */
#archive-column-page .article-cat ul li a:hover,
#archive-column-page .article-cat ul li a:focus-visible{
  background-color: rgba(0,0,0,.04); /* 見た目は軽く */
}

/* hover時に色や下線などを変えたくない場合 */
#archive-column-page .article-cat ul li a:hover::before{
  content: none;
}

/* =========================================
   archive-column コラム一覧 レスポンシブ
   768px以下
========================================= */
@media (max-width: 768px){

  /* 全体の余白を少しコンパクトに */
  #archive-column-page .inner{
    padding: 40px 10px 60px;
  }

  /* レイアウト：メインとサイドを縦並びに */
  #archive-column-page .column-layout{
    flex-direction: column;
    gap: 32px;
  }

  #archive-column-page main{
    flex: 1 1 auto;
    width: 100%;
  }

  #archive-column-page aside{
    position: static;   /* sticky解除 */
    flex: none;
    width: 100%;
    margin: 0;
  }

  /* ピックアップ部分 */
  #archive-column-page .column-pickup{
    padding: 24px 16px;
    margin: 0 10px 32px;
  }
  #archive-column-page .column-pickup .sec-title{
    margin-bottom: 14px;
    margin-left: 20px;
    font-size: 2rem;
  }
  #archive-column-page .column-pickup span{
    font-size: .9rem;
  }
  #archive-column-page .column-pickup .column-pickup-list{
    grid-template-columns: 1fr;   /* 1カラム */
    gap: 24px;
  }
  #archive-column-page .column-pickup .column-pickup-list li h3{
    font-size: .9rem;
  }
#archive-column-page .column-pickup .column-pickup-list li .day,
#archive-column-page .column-pickup .column-pickup-list li .tag{
    font-size: .7rem;
}
  /* 記事リスト：横並び→縦並び */
  #archive-column-page .column-article-list li a{
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    padding: 24px 0;
    margin: 0 20px;
  }

  /* サムネイルを横幅いっぱいに */
  #archive-column-page .column-article-list li .title-wrap{
    width: 100%;
    max-width: none;
    aspect-ratio: 16 / 9;
  }
  #archive-column-page .column-article-list li .title-wrap img{
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  #archive-column-page .column-page-list-tag{
    right: 8px;
    bottom: 8px;
    padding: 4px 10px;
    font-size: 0.7rem;
  }

  /* タイトル・テキストのサイズ調整 */
  #archive-column-page .column-article-list li h3{
    font-size: .9rem;
    letter-spacing: .05em;
    margin: 4px 0 6px;
  }
  #archive-column-page .column-article-list li .day,
  #archive-column-page .column-article-list li .tag{
    font-size: 0.7rem;
  }

  /* 「よく読まれている記事」「コラムカテゴリー」ボックス */
  #archive-column-page .article-popular,
  #archive-column-page .article-cat{
    margin: 0 20px 24px;
    padding: 16px;
  }
  #archive-column-page .article-popular h4,
  #archive-column-page .article-cat h4{
    font-size: 1rem;
    margin-bottom: 20px;
  }
  #archive-column-page .article-popular ul li,
  #archive-column-page .article-cat ul li{
    font-size: 0.85rem;
    margin-bottom: 14px;
  }

  /* ピックアップ・記事のホバー効果はそのままでOK */

  /* ページネーション（もしあれば軽く調整） */
  #archive-column-page .page-nation{
    display: flex;
    justify-content: center;
    gap: 4px;
    margin-top: 32px;
    font-size: 0.9rem;
  }
  #archive-column-page .page-nation li{
    margin: 0;
  }

  /* ▼ 画像ズームを無効化 */
  #archive-column-page .column-article-list li .title-wrap img,
  #archive-column-page .column-pickup li .title-wrap img {
    transform: none !important;
    transition: none !important;
  }

  #archive-column-page .column-article-list li a:hover .title-wrap img,
  #archive-column-page .column-article-list li a:focus-visible .title-wrap img,
  #archive-column-page .column-pickup li a:hover .title-wrap img,
  #archive-column-page .column-pickup li a:focus-visible .title-wrap img {
    transform: none !important;
  }

  /* ▼ 記事タイトルの下線アニメーションを無効化 */
  #archive-column-page .column-article-list li h3,
  #archive-column-page .column-pickup li h3 {
    background-size: 0% 1px !important;
    transition: none !important;
  }

  #archive-column-page .column-article-list li a:hover h3,
  #archive-column-page .column-article-list li a:focus-visible h3,
  #archive-column-page .column-pickup li a:hover h3,
  #archive-column-page .column-pickup li a:focus-visible h3 {
    background-size: 0% 1px !important;
  }

  /* ▼ サイドバーのリンク hover スライドも無効化 */
  #archive-column-page .article-popular ul li a,
  #archive-column-page .article-cat ul li a {
    transform: none !important;
    transition: none !important;
  }

  #archive-column-page .article-popular ul li a:hover,
  #archive-column-page .article-popular ul li a:focus-visible,
  #archive-column-page .article-cat ul li a:hover,
  #archive-column-page .article-cat ul li a:focus-visible {
    background-color: transparent !important;
    transform: none !important;
  }
}


/*==========================================================================
    コラムページ（シングル）
============================================================================ */
#single-column-page .subpage-top{
    background-image: url(images/column-page.webp);
}
#single-column-page .inner{
    padding: 60px 0;
}
/* レイアウト */
#single-column-page  .column-layout{
    display: flex;
    justify-content: space-between;
}
#single-column-page   main{
    flex-basis: 900px;
}
/* リンク */
#single-column-page  .column-layout article p a{
    color: #B22222;
    transition: opacity 0.3s ease;
    font-size: 1rem;
}
#single-column-page  .column-layout article p a:hover{
    opacity: 0.7;
}
/* 記事 */
#single-column-page .title-wrap{
    position: relative;
    display: flex;
}
#single-column-page .column-page-list-tag{
    position: absolute;
    left: 0px;
    top: -40px;
    background: #B22222;
    color: #fff;
    padding: 5px 15px;
    font-size: .85rem;
    line-height: 1.5;
    border-radius: 6px;
    letter-spacing: .1em;
    box-shadow: 0 2px 6px rgba(0,0,0,.15);
    z-index:1;
}
/* サムネ */
#single-column-page .column-img img{
    width: 100%;
    height: auto;
    margin-bottom: 20px;
}
#single-column-page .column-img + p{
    font-size: 1.1rem;
    line-height: 2;
    padding: 10px;
    margin-bottom: 30px;
}

/* 見出し */
/* タイトル */
#single-column-page .column-title{
    font-size: 1.8rem;
    letter-spacing: .08em;
    margin-bottom: 60px;
    padding: 10px;
    border-bottom: 2px dashed #B22222;
}

#single-column-page .column-date{
    font-size: 0.9rem;
    padding: 0!important;
}
#single-column-page h3{
    letter-spacing: .1em;
    font-size: 1.7rem;
    font-weight: normal;
    border-left:  5px solid #B22222;
    border-bottom: 1.5px solid #B22222;
    padding-left: 20px;
    padding-bottom: 10px;
    margin: 45px 0 25px;
}
#single-column-page h4{
    letter-spacing: .1em;
    font-size: 1.28rem;
    font-weight: bold;
    padding-bottom: 8px;
    border-bottom: 1.5px solid #B22222;
    margin: 20px 0 10px;
    padding: 10px;
    display: inline-block;
}
#single-column-page ul{
    margin: 0 0 20px;
}
#single-column-page main ul li{
    font-size: 1.1rem;
    list-style-type: disc;
    margin-bottom: 10px;
    list-style-position: inside;
    line-height: 1.5;
}
#single-column-page article p{
    font-size: 1.15rem;
    line-height: 2;
    padding: 0px 10px 10px;
    margin-bottom: 20px;
}
#single-column-page article{
    background-color: #ffffff9d;
    border-radius: 3px;
    padding: 40px;
}
/* サイド */
#single-column-page  aside h4{
    position: relative;
}
#single-column-page  aside h4::after{
    position: absolute;
    top: 7px;
    left: 5px;
    width: 6px;
    height: 6px;
    background-color: #B22222;
    content: "";
}
/* 人気の記事 */
#single-column-page  .article-popular{
    margin-bottom: 30px;
    padding: 20px;
}
#single-column-page  .article-popular ul li{
    margin-bottom: 25px;
    font-size: 0.85rem;
    letter-spacing: .1em;
}
#single-column-page  .article-popular .tag-layout{
    display: flex;
    margin-bottom: 5px;
}
#single-column-page .article-popular .tag-layout p:first-child{
    background-color: #B22222;
    border-radius: 3px;
    color: #fff;
    font-size: 0.6rem;
    letter-spacing: .1em;
    padding: 0px 8px;
    line-height: 2.2;
    margin-right: 10px;
}
#single-column-page  .article-popular .tag-layout p:last-child{
    font-size: 0.75rem;
}
/* ====== 記事サイド（single を archive と同じ見た目に） ====== */
#single-column-page .article-cat{
  /* background-color: #ffffff5d; */
  border: 1px solid #333;
  border-radius: 3px;
  padding: 20px;
}
#single-column-page .article-cat h4,
#single-column-page .article-popular h4{
  font-size: 1.05rem;
  letter-spacing: .08em;
  padding: 0 0 10px 20px;
  margin: 0 0 30px;
  border-bottom: 1px solid rgba(0,0,0,.15);
  font-weight: bold;
}
#single-column-page .article-cat ul li{
  list-style-type: disc;
  list-style-position: outside;
  margin-left: 20px;
  margin-bottom: 20px;
  font-size: 0.85rem;
  letter-spacing: .1em;
  position: relative;
}
#single-column-page .article-cat ul li a{
  display: block;
  padding: 6px 8px;
  color: inherit;
  border-radius: 3px;
  transition: background-color .25s ease;
}
#single-column-page .article-cat ul li a:hover,
#single-column-page .article-cat ul li a:focus-visible{
  background-color: rgba(0,0,0,.04);
}

/* よく読まれている記事（行全体hover） */
#single-column-page .article-popular{
  /* background-color: #ffffff5d; */
    border: 1px solid #333;
  border-radius: 3px;
  margin-bottom: 30px;
  padding: 20px;
}
#single-column-page .article-popular ul li{
  margin-bottom: 25px;
  font-size: 0.85rem;
  letter-spacing: .1em;
}
#single-column-page .article-popular .tag-layout{
  display: flex;
  margin-bottom: 5px;
}
#single-column-page .article-popular .tag-layout p:first-child{
  background-color: #B22222;
  color: #fff;
  font-size: 0.6rem;
  letter-spacing: .1em;
  padding: 0 8px;
  line-height: 2.2;
  margin-right: 10px;
}
#single-column-page .article-popular .tag-layout p:last-child{
  font-size: 0.75rem;
}
#single-column-page .article-popular ul li a{
  display: block;
  position: relative;
  padding: 10px 8px;
  border-radius: 4px;
  transition: background-color .25s ease, transform .25s ease;
  color: inherit;
}
#single-column-page .article-popular ul li a:hover,
#single-column-page .article-popular ul li a:focus-visible{
  background-color: rgba(0,0,0,.04);
  transform: translateX(4px);
}

/* サイド見出しのドット装飾（archiveと同じ） */
#single-column-page aside h4{
  position: relative;
}
#single-column-page aside h4::after{
  position: absolute;
  top: 6px;
  left: 5px;
  width: 6px;
  height: 6px;
  background-color: #B22222;
  content: "";
}

/* ====== レイアウト：左メイン / 右サイド（sticky） ====== */
#single-column-page .column-layout{
  display: flex;
  gap: 50px;
  align-items: flex-start;
}
#single-column-page main{
  flex: 0 0 900px;
  min-width: 0;
}
#single-column-page aside{
  flex: 0 0 320px;
  position: sticky;
  top: 80px;           /* ← 画面上から80px空けて固定（お好みで調整） */
  align-self: flex-start;
  margin-top: 0px;    /* ← コンテンツ全体の中での上余白 */
  margin-bottom: 80px; /* ← コンテンツ全体の中での下余白 */
}

/* ====== ホバー演出（アーカイブと同じトーン） ====== */
/* 記事内で使うカード/関連一覧などがある場合に効かせる想定 */
#single-column-page .title-wrap{
  overflow: hidden;
  border-radius: 3px;
}
#single-column-page a.card,
#single-column-page .related-list li a{
  position: relative;
  transition: background-color .25s ease;
  text-decoration: none;
  color: inherit;
}
#single-column-page .title-wrap img{
  transition: transform .4s ease;
  display: block;
}
#single-column-page .hover-underline{
  background-image: linear-gradient(currentColor,currentColor);
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0% 1px;
  transition: background-size .3s ease;
}
#single-column-page a:hover .title-wrap img,
#single-column-page a:focus-visible .title-wrap img{
  transform: scale(1.06);
}
#single-column-page a:hover .hover-underline,
#single-column-page a:focus-visible .hover-underline{
  background-size: 100% 1px;
}

/* ====== 画像サイズ統一（関連記事など一覧を作る場合に） ====== */
#single-column-page .thumb-16x9{
  width: 300px;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 3px;
  flex-shrink: 0;
}
#single-column-page .thumb-16x9 img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}


/* 前後リンクページネーション */
.post-page-nation {
    margin-top: 100px;
    display: flex;
    align-items: center;
    border-top: 1px solid rgba(0, 0, 0, .15);
}

.post-page-nation > div {
  flex: 1;
  text-align: center;
}

.post-page-nation div a {
    display: block;
    padding: 40px 20px;
    transition: background 0.3s ease;
    font-size: 1rem;
    letter-spacing: .05em;
    line-height: 1.5;
}

/* 一覧へ戻る */
.post-page-nation .post-page-center {
    flex: 0 0 200px;
    border-right: 1px solid rgba(0, 0, 0, .15);
    border-left: 1px solid rgba(0, 0, 0, .15);
}
/* ホバー時（全ボタン共通でさりげなく） */
.post-page-nation div a:hover {
    background-color: rgba(0, 0, 0, 0.03);
    transition: background-color 0.2s ease;
}

/* 一覧へ戻るのボーダーはそのまま */
.post-page-nation .post-page-center a:hover {
    background-color: rgba(0, 0, 0, 0.08);
}

/* ─────────────
   前後リンクページネーション（レスポンシブ）
────────────── */
@media (max-width: 768px) {
  .post-page-nation {
    flex-direction: column;        /* ← 横並び → 縦並び */
    margin-top: 50px;
    border-top: none;              /* スマホでは線を消す */
  }

  .post-page-nation > div {
    flex: unset;
    width: 100%;
    text-align: center;
    border: none;                  /* 仕切り線を消す */
  }

  .post-page-nation div a {
    padding: 20px 10px;            /* パディング縮小 */
    font-size: 0.85rem;
    border-top: 1px solid rgba(0,0,0,.1); /* 順番がわかる程度の薄線 */
  }

  /* 「一覧へ戻る」だけ強調 */
  .post-page-nation .post-page-center {
    flex: unset;
    width: 100%;
    border: none;
  }

  .post-page-nation .post-page-center a {
    background-color: rgba(0,0,0,0.03);
    font-weight: 600;
  }
}

@media (max-width: 768px){

  /* 余白調整 */
  #single-column-page .inner{
    padding: 10px 0!important;
  }

  /* レイアウト：縦積みに */
  #single-column-page .column-layout{
    flex-direction: column;
    gap: 32px;
  }
  #single-column-page main{
    flex: 1 1 auto;
    width: 100%;
  }
  #single-column-page aside{
    position: static;
    flex: none;
    width: 100%;
    margin: 0;
  }

  /* 記事カード */
  #single-column-page article{
    padding: 24px 16px;
    margin: 0 10px;
  }
  #single-column-page .column-title{
    font-size: 1rem;
    margin-bottom: 30px;
    padding: 6px 4px;
    border-bottom: 1.8px dashed #B22222;
  }
  #single-column-page .column-page-list-tag{
    top: -32px;
    padding: 4px 10px;
    font-size: 0.7rem;
  }
  #single-column-page .column-date{
    font-size: 0.8rem;
  }

  #single-column-page h3{
    font-size: 1rem;
    margin: 30px 0 18px;
    padding-left: 14px;
    padding-bottom: 5px;
  }
  #single-column-page h4{
    font-size: .9rem;
    margin: 16px 0 8px;
    padding: 0px 0 5px;
  }

  #single-column-page article p{
    font-size: 0.8rem;
    padding: 0;
    margin-bottom: 14px;
    line-height: 1.8;
  }
  #single-column-page main ul li{
    font-size: 0.95rem;
  }

  #single-column-page .column-img img{
    margin-bottom: 14px;
  }
  #single-column-page .column-img + p{
    font-size: 0.95rem;
    padding: 6px 4px;
    margin-bottom: 20px;
  }

  /* サイドボックス */
  #single-column-page .article-popular,
  #single-column-page .article-cat{
    margin: 0 20px 24px;
    padding: 16px;
  }
  #single-column-page .article-popular h4,
  #single-column-page .article-cat h4{
    font-size: 0.95rem;
    margin-bottom: 18px;
  }
  #single-column-page .article-popular ul li,
  #single-column-page .article-cat ul li{
    font-size: 0.85rem;
    margin-bottom: 14px;
  }

  /* ページネーション：縦積み */
  .post-page-nation {
    flex-direction: column;
    margin-top: 50px;
    border-top: none;
  }
  .post-page-nation > div {
    flex: unset;
    width: 100%;
    text-align: center;
    border: none;
  }
  .post-page-nation div a {
    padding: 20px 10px;
    font-size: 0.85rem;
    border-top: 1px solid rgba(0,0,0,.1);
  }
  .post-page-nation .post-page-center{
    flex: unset;
    width: 100%;
    border: none;
  }
  .post-page-nation .post-page-center a{
    background-color: rgba(0,0,0,0.03);
    font-weight: 600;
  }

  /* ===== SPではホバー演出をオフに ===== */

  /* 本文内リンク */
  #single-column-page .column-layout article p a{
    transition: none !important;
  }
  #single-column-page .column-layout article p a:hover,
  #single-column-page .column-layout article p a:focus-visible{
    opacity: 1 !important;
  }

  /* サイド「よく読まれている記事」 */
  #single-column-page .article-popular ul li a{
    transition: none !important;
    transform: none !important;
  }
  #single-column-page .article-popular ul li a:hover,
  #single-column-page .article-popular ul li a:focus-visible{
    background-color: transparent !important;
    transform: none !important;
  }

  /* サイド「コラムカテゴリー」 */
  #single-column-page .article-cat ul li a{
    transition: none !important;
  }
  #single-column-page .article-cat ul li a:hover,
  #single-column-page .article-cat ul li a:focus-visible{
    background-color: transparent !important;
  }
}

/*==========================================================================
    ラインナップ　注文住宅
============================================================================ */
#lineup-customhome .subpage-top{
    background-image: url(images/customhome.webp);
}
/* タイトル */
#lineup-customhome .customhome-lead{
    text-align: center;
    margin-bottom: 150px;
}
/* スペック */
#lineup-customhome .lineup-spec{
    display: grid;
    grid-template-columns: repeat(4, auto);
    justify-content: center;
    gap: 30px;
    margin-bottom: 150px;
}
#lineup-customhome .lineup-spec li{
    background-color: #6b6764;
    width: 180px;
    height: 180px;
    border-radius: 50%;
    text-align: center;
    display: flex;
    flex-direction: column;
    place-content: center;
    place-items: center;
    font-size: 1.3rem;
    line-height: 1.6;
    font-weight: bold;
    letter-spacing: .08em;
    color: #fff;
    opacity: .8;
}
#lineup-customhome .lineup-spec li span{
    display: block;
    font-size: 0.9rem;
}
/* セクション */
#lineup-customhome .concept,
#lineup-customhome .spec,
#lineup-customhome .design{
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 100px;
    margin-bottom: 150px;
}
#lineup-customhome section p{
    font-size: 1.1rem;
    line-height: 1.8;
}

/* ギャラリー */
#lineup-customhome .gallery{
    margin-bottom: 150px;
}

/* 家づくりの流れ */
#lineup-customhome .flow{
    margin-bottom: 150px;
}
/* 家づくりの流れ */
#lineup-customhome .flow {
  text-align: center;               /* 中身を中央寄せ */
}



/* ジャストフィットハウス */
#lineup-customhome .lineup-just{
    border-top: 1px solid #8a83795d;
    border-bottom: 1px solid #8a83795d;
}
/* 平家 */
#lineup-customhome .lineup-hiraya{
    border-bottom: 1px solid #8a83795d;
}



/* 初期状態 */
#lineup-customhome .custom-lineup-sec a {
  display: grid;
  grid-template-columns: 1fr 1fr 600px;
  gap: 50px;
  padding: 50px 100px 80px; /* 下に余白を追加（画像の下padding） */
  overflow: hidden;
  max-height: 320px;
  transition: max-height 0.8s ease, background-color 0.6s ease;
}

/* ホバーで全体を表示 */
#lineup-customhome .custom-lineup-sec a.hover-active {
    max-height: 1000px; /* コンテンツがすべて収まる高さに（必要に応じて調整） */
    background-color: #8a83797d;
}

/* 文字 */
#lineup-customhome .custom-lineup-sec h3{
    font-size: 1.8rem;
}
#lineup-customhome .custom-lineup-sec h3 span{
    font-size: 0.9rem;
    display: block;
    margin-bottom: 10px;
}
#lineup-customhome .custom-lineup-sec p {
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.6s ease, transform 0.6s ease;
    font-size: 1.1rem;
    line-height: 2.2;
}

/* ホバー時に表示 */
#lineup-customhome .custom-lineup-sec a.hover-active p {
    opacity: 1;
    transform: translateY(0);
}





/*==========================================================================
    ラインナップ　リフォーム＆リノベ
============================================================================ */
#lineup-reform .subpage-top{
    background-image: url(images/reform.webp);
}
/* タイトル */
#lineup-reform .reform-lead{
    text-align: center;
    margin-bottom: 150px;
}
/* セクション */
#lineup-reform  section{
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 50px;
    margin-bottom: 150px;
}

/* 家づくりの流れ */
#lineup-reform  .flow{
    display: block;
}
/* Q & A */
#lineup-reform  .catalog-qa{
    display: block;
}
/*==========================================================================
    ラインナップ　店舗改装
============================================================================ */
#lineup-store .subpage-top{
    background-image: url(images/store.webp);
}
/* タイトル */
#lineup-store .store-lead{
    text-align: center;
    margin-bottom: 150px;
}
#lineup-customhome h3,
#lineup-reform h3,
#lineup-store h3{
    font-size: 2rem;
    letter-spacing: .15em;
    margin-bottom: 50px;
}
#lineup-customhome h4,
#lineup-reform h4,
#lineup-store h4{
    font-size: 1.7rem;
    margin-bottom:  30px;
    letter-spacing: .1em;
    padding-bottom: 10px;
}
#lineup-customhome .concept p,
#lineup-customhome .spec p,
#lineup-customhome .design p,
#lineup-reform .concept p,
#lineup-reform .spec p,
#lineup-store .concept p,
#lineup-store .spec p{
    font-size: 1.2rem;
    letter-spacing: .1em;
    line-height: 2;
}
#lineup-customhome .customhome-lead p,
#lineup-store .store-lead p,
#lineup-reform  .reform-lead p{
    font-size: 1.2rem;
    letter-spacing: .1em;
    line-height: 2;
    margin-bottom: 20px;
}
/* セクション */
#lineup-store  section{
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 50px;
    margin-bottom: 150px;
}
#lineup-customhome .text,
#lineup-reform .text,
#lineup-store .text{
    padding: 0 80px;
}
#lineup-customhome section .sec-title,
#lineup-store section .sec-title,
#lineup-reform section .sec-title{
    font-size: 3rem;
    text-align: center;
}
#lineup-customhome .sec-title span::before,
#lineup-store  .sec-title span::before,
#lineup-reform   .sec-title span::before{
    position: absolute;
    top: 7px;
    left: 530px;
}

/* ギャラリーセクション */
#lineup-customhome  .gallery,
#lineup-store .gallery,
#lineup-reform .gallery{
    display: block;
    background-color: #ffffff9b;
    border-radius: 3px;
    padding:80px 20px;
    text-align:center;
}
#lineup-customhome  .gallery .sec-title,
#lineup-store .gallery .sec-title,
#lineup-reform  .gallery .sec-title{
    text-align: center;
    margin-bottom: 100px;
}
/* メイン */
#lineup-customhome .main-slider,
#store-gallery .main-slider,
#lineup-reform  .main-slider{
  width:min(90%, 960px);
  aspect-ratio:16/9;
  margin:0 auto 12px;
  border-radius:6px;
  overflow:hidden;
}
#lineup-customhome .main-slider .swiper-slide img,
#store-gallery .main-slider .swiper-slide img,
#lineup-reform .main-slider .swiper-slide img{
  width:100%; height:100%; object-fit:cover; display:block;
}

/* キャプション */
#lineup-customhome .gallery-caption,
#store-gallery .gallery-caption,
#lineup-reform  .gallery-caption{
  width:min(90%, 960px);
  margin:8px auto 20px;
  font-size:1rem; line-height:1.8; letter-spacing:.03em; color:#333;
}

/* サムネイル */
#lineup-customhome .thumb-slider,
#store-gallery .thumb-slider,
#lineup-reform .thumb-slider
{
  width:min(90%, 960px);
  margin:0 auto;
    display: flex;               /* ← Swiper本体を中央に */
  justify-content: center;     /* ← 左右中央寄せ */
}
#lineup-customhome .thumb-slider .swiper-wrapper ,
#store-gallery .thumb-slider .swiper-wrapper ,
#lineup-reform  .thumb-slider .swiper-wrapper 
{
  justify-content: center;     /* ← サムネイル群を中央に */
}
#lineup-customhome .thumb-slider .swiper-slide,
#store-gallery .thumb-slider .swiper-slide,
#lineup-reform .thumb-slider .swiper-slide
{
  height:90px; cursor:pointer; opacity:.5;
}
#lineup-customhome .thumb-slider .swiper-slide-thumb-active,
#store-gallery .thumb-slider .swiper-slide-thumb-active,
#lineup-reform .thumb-slider .swiper-slide-thumb-active{ opacity:1; }

#lineup-customhome .thumb-slider img,
#store-gallery .thumb-slider img,
#lineup-reform .thumb-slider img 
{
  width:100%; height:100%; object-fit:cover; border-radius:4px; display:block;
}

/* 矢印 */
#lineup-customhome  .swiper-button-prev,
#lineup-customhome .swiper-button-next,
#store-gallery .swiper-button-prev,
#store-gallery .swiper-button-next,
#lineup-reform .swiper-button-prev,
#lineup-reform .swiper-button-next
{
  color:#fff; background:rgba(0,0,0,.4); width:40px; height:40px; border-radius:50%;
}
#lineup-customhome .swiper-button-prev::after,
#lineup-customhome  .swiper-button-next::after,
#store-gallery .swiper-button-prev::after,
#store-gallery .swiper-button-next::after,
#lineup-reform .swiper-button-prev::after,
#lineup-reform .swiper-button-next::after
{ font-size:18px; }



/* Q & A */
#lineup-store .catalog-qa{
    display: block;
}


/* 家づくりの流れ */
#lineup-store .flow,
#lineup-customhome .flow,
#lineup-reform .flow
{
    display: block;
}
#lineup-store .flow .flow-list,
#lineup-customhome .flow .flow-list,
#lineup-reform .flow .flow-list
{
    display: flex;
    justify-content: center;
    gap: 50px;
    position: relative;
}
#lineup-store .flow .flow-list li,
#lineup-customhome .flow .flow-list li,
#lineup-reform .flow .flow-list li
{
    padding: 50px 20px 100px;
    background-color: #ffffff9d;
    border-radius: 50px;
    writing-mode: vertical-rl;
    text-orientation: mixed;
    display: flex;
    align-items: center;
    font-size: 1.1rem;
    letter-spacing: .1em;
    gap: 20px;
     position: relative; /* 疑似要素の基準にする */
}
/* liの後ろに「＞」を追加 */
#lineup-store .flow .flow-list li::after,
#lineup-customhome .flow .flow-list li::after,
#lineup-reform .flow .flow-list li::after
{
    content: "▲";
    color: #333;
    font-weight: bold;
    font-size: 1rem;
    position: absolute;
    right: -35px; /* 縦書きだから、右側に配置 */
    top: 50%;
    transform: translateY(-50%) rotate(90deg);
    opacity: .4;
}

/* 最後のliだけは矢印を非表示にする */
#lineup-store .flow .flow-list li:last-child::after,
#lineup-customhome .flow .flow-list li:last-child::after,
#lineup-reform .flow .flow-list li:last-child::after
 {
  content: none;
}
#lineup-store .flow .flow-list li p:first-child,
#lineup-customhome .flow .flow-list li p:first-child,
#lineup-reform .flow .flow-list li p:first-child
{
    text-combine-upright: all;       /* 数字を横に並べる */
    letter-spacing: .1rem;
    text-align: center;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: #6b6764;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 全体を中央に配置 */
.flow-period {
    position: relative;
    width: 80%; /* 調整可 */
    margin: 50px auto 0;
    text-align: center;
}
#lineup-store .flow-period {
    width: 100%;
}
/* 横線 */
.flow-period::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 1px;
    background-color: #6b6764;
    transform: translateY(-50%);
    z-index: 0;
    opacity: .7;
}
/* 中央のラベル */
.flow-period span {
    position: relative;
    display: inline-block;
    background-color: #6b6764;
    padding: 6px 20px;
    border: 1px solid #6b6764;
    border-radius: 9999px; /* pill型 */
    font-size: 0.9rem;
    z-index: 1;
    color: #fff;
}

/* →矢印 */
.flow-period::after {
    content: "";
    position: absolute;
    top: 50%;
    right: -10px;
    width: 30px;
    height: 1px;
    background-color: #6b6764;
    transform: translateY(-50%);
    opacity: .7;
}
.flow-period::after {
    background-color: transparent;
    border-top: 1px solid #6b6764;
    border-right: 1px solid #6b6764;
    width: 10px;
    height: 10px;
    transform: translateY(-50%) rotate(45deg); /* →矢印 */
    right: -5px;
    opacity: .7;
}
/* ボタン*/
#lineup-customhome .flow .btn-next,
#lineup-store .flow .btn-next,
#lineup-reform  .flow .btn-next
{
  display: block;                   /* ブロックにして */
  width: fit-content;               /* 中身の幅に合わせて */
  margin: 40px auto 0;              /* 左右 auto で中央 */
}

@media (max-width: 768px) {

  /* 全体の余白 */
  #lineup-customhome .inner,
  #lineup-reform .inner,
  #lineup-store .inner {
    padding: 0px 10px!important;
  }

  /* 見出しサイズ（SP） */
  #lineup-customhome h3,
  #lineup-reform h3,
  #lineup-store h3 {
    font-size: 1rem;
    margin-bottom: 24px;
    letter-spacing: .12em;
  }

  #lineup-customhome h4,
  #lineup-reform h4,
  #lineup-store h4 {
    font-size: 1rem;
    margin-bottom: 16px;
    letter-spacing: .08em;
    padding-bottom: 6px;
  }
/* セクションタイトル */
#lineup-customhome .gallery .sec-title, #lineup-store .gallery .sec-title, #lineup-reform .gallery .sec-title {
    text-align: center;
    margin: 0 0 40px!important;
}
#lineup-customhome .sec-title span::before, #lineup-store .sec-title span::before, #lineup-reform .sec-title span::before {
    top: 5px!important;
    left: 80px!important;
}
#lineup-customhome  .gallery .sec-title span::before,
#lineup-reform .gallery .sec-title span::before,
#lineup-store .gallery .sec-title span::before{
    left: 100px!important;
}
.sec-title span {
    padding: 0;
}
  /* 本文のサイズ（SP） */
  #lineup-customhome section p,
  #lineup-reform section p,
  #lineup-store section p {
    font-size: .8rem;
    line-height: 1.8;
    letter-spacing: .05em;
  }

  /* リードぶん */
  #lineup-customhome .customhome-lead,
  #lineup-reform .reform-lead,
  #lineup-store .store-lead {
    margin-bottom: 40px!important;
    padding: 0 10px;
    text-align: left;
  }
    #lineup-customhome .customhome-lead h3,
  #lineup-store .store-lead h3,
  #lineup-reform .reform-lead h3{
    font-size: 1.1rem!important;
    line-height: 1.8;
    letter-spacing: .05em;
    margin-bottom: 12px;
  }
  #lineup-customhome .customhome-lead p,
  #lineup-store .store-lead p,
  #lineup-reform .reform-lead p {
    font-size: .9rem!important;
    line-height: 1.8;
    letter-spacing: .05em;
    margin-bottom: 12px;
  }


  /* 3つのセクションを共通デザイン化 */
  #lineup-customhome .concept,
  #lineup-customhome .design,
  #lineup-customhome .spec,
  #lineup-reform .concept,
  #lineup-reform .spec,
  #lineup-store  .concept,
  #lineup-store  .spec{
    display: flex !important;        /* grid → flex に変更 */
    flex-direction: column;          /* 1アイテム内部は縦並び */
    align-items: center;
    text-align: left;
    padding: 20px 10px;
    border-radius: 3px;
    background: #ffffffb0;
    box-shadow: 0 2px 6px rgba(0,0,0,0.15);
    margin: 10px 10px 30px!important;
    gap: 20px!important;
  }
#lineup-customhome .text, #lineup-reform .text, #lineup-store .text {
    padding: 0 10px!important;
}
#lineup-customhome .text h4, #lineup-reform .text h4, #lineup-store .text h4{
    font-size: 1rem!important;
    padding-bottom: 0!important;
    margin-bottom: 10px!important;
}
#lineup-customhome .text p, #lineup-reform .text p, #lineup-store .text p{
    font-size: .8rem!important;
}

  /* ブロックを包むラッパー（横並び用） */
  #lineup-customhome .cds-wrapper {
    display: flex;
    flex-direction: row;
    gap: 12px;
    overflow-x: auto;
    padding: 5px 0 20px;
    -webkit-overflow-scrolling: touch;
  }

  /* 1ブロックごとの幅 */
  #lineup-customhome .cds-wrapper section {
    min-width: 260px;   /* 横スクロールで3つ並ぶ幅 */
    flex-shrink: 0;
  }

  /* 内部の画像も調整 */
  #lineup-customhome .cds-wrapper section img {
    width: 100%;
    height: auto;
    margin-bottom: 10px;
    border-radius: 8px;
  }

  /* 文字サイズはSP設定のまま */
  #lineup-customhome .cds-wrapper section h4 {
    font-size: 1rem;
    margin-bottom: 10px;
  }

  #lineup-customhome .cds-wrapper section p {
    font-size: .9rem;
    line-height: 1.7;
  }

  /* ギャラリーセクション */
  #lineup-customhome .gallery,
  #lineup-store .gallery,
  #lineup-reform .gallery {
    padding: 40px 5px!important;
    margin-bottom: 60px;
  }

  #lineup-customhome .gallery .sec-title,
  #lineup-store .gallery .sec-title,
  #lineup-reform .gallery .sec-title {
    margin-bottom: 20px!important;
    font-size: 2rem ;
  }

  #lineup-customhome .main-slider,
  #store-gallery .main-slider,
  #lineup-reform .main-slider,
  #lineup-customhome .thumb-slider,
  #store-gallery .thumb-slider,
  #lineup-reform .thumb-slider {
    width: 100%;
  }

  #lineup-customhome .gallery-caption,
  #store-gallery .gallery-caption,
  #lineup-reform .gallery-caption {
    width: 100%;
    padding: 0 10px;
    font-size: .8rem!important;
  }

  /* ジャストフィット / 平家 カード */
  #lineup-customhome .custom-lineup-sec{
    margin-bottom: 30px;
  }
  #lineup-customhome .custom-lineup-sec a {
    display: block!important;
    grid-template-columns: none!important;
    padding: 24px 15px 32px!important;
    max-height: none!important;
    background-color: transparent!important;
  }

  #lineup-customhome .custom-lineup-sec h3 {
    font-size: 1.1rem!important;
    margin-bottom: 10px!important;
  }

  #lineup-customhome .custom-lineup-sec h3 span {
    font-size: .8rem!important;
    margin-bottom: 6px!important;
  }

  #lineup-customhome .custom-lineup-sec p {
    opacity: 1!important;
    transform: none!important;
    font-size: .8rem!important;
    line-height: 1.8!important;
    margin-top: 6px!important;
  }

  #lineup-customhome .custom-lineup-sec .custom-lineup-sec-img {
    margin-top: 16px!important;
  }

  #lineup-customhome .custom-lineup-sec .custom-lineup-sec-img img {
    width: 100%!important;
    height: auto!important;
    display: block!important;
  }

  /* ============================
     Flow（家づくりの流れ） 横並び（SP）
     ============================ */
     #lineup-customhome section .sec-title, #lineup-store section .sec-title, #lineup-reform section .sec-title {
    font-size: 2rem;
    text-align: center;
}
  #lineup-store .flow,
  #lineup-customhome .flow,
  #lineup-reform .flow {
    margin-bottom: 60px;
    text-align: center;
  }

  #lineup-store .flow .flow-list,
  #lineup-customhome .flow .flow-list,
  #lineup-reform .flow .flow-list {
    display: flex;
    justify-content: flex-start;   /* 左から順に並べる */
    gap: 20px;
    padding: 0 10px 20px;
    overflow-x: auto;              /* 横スクロール */
    -webkit-overflow-scrolling: touch;
    /* ← ここで scroll-snap を無効にする */
    scroll-snap-type: none;
  }

  #lineup-store .flow .flow-list li,
  #lineup-customhome .flow .flow-list li,
  #lineup-reform .flow .flow-list li {
    min-width: 70px;              /* 1カードの横幅 */
    flex-shrink: 0;                /* つぶれ防止 */
    padding: 24px 10px 40px !important;
  }
#lineup-store .flow .flow-list li::after, #lineup-customhome .flow .flow-list li::after, #lineup-reform .flow .flow-list li::after {
    font-size: .7rem;
    right: -16px;
}
  /* （flow-period, ボタン、Q&A の部分は今のままでOK） */
  /* Q&A */
  #lineup-customhome .catalog-qa,
  #lineup-store .catalog-qa,
  #lineup-reform .catalog-qa {
    padding: 0 10px 32px;
    margin-bottom: 40px;
  }
.catalog-qa dl dt::before {
    top: 15px;
}
  #lineup-customhome .catalog-qa dt,
  #lineup-store .catalog-qa dt,
  #lineup-reform .catalog-qa dt {
    font-size: .9rem;
    padding: 16px 44px;
  }
.catalog-qa dl dt::after {
        top: 16px;
    }
  #lineup-customhome .catalog-qa dd,
  #lineup-store .catalog-qa dd,
  #lineup-reform .catalog-qa dd {
    font-size: .8rem;
    line-height: 1.8;
  }
  .flow-period span {
    font-size: 0.7rem;
}
}

/*==========================================================================
　ジャストフィットハウス
============================================================================ */
#page-justfit-house .subpage-top{
    background-image: url(images/page-justfit-house.webp);
}
/* 導入文章 */
#page-justfit-house .just-lead{
    margin-bottom: 150px;
    text-align: center;
}
#page-justfit-house .just-lead h3{
    line-height: 1.8;
    font-size: 2rem;
    letter-spacing: .15em;
    margin-bottom: 50px;
}
#page-justfit-house .just-lead p{
    font-size: 1.2rem;
    letter-spacing: .1em;
    line-height: 2;
    margin-bottom: 20px;
}
/* ジャストフィットハウスとは？ */
#page-justfit-house .about-just{
    background-color: #fff;
    border-radius: 10px;
    padding: 50px 80px;
}
#page-justfit-house .about-just h3{
    text-align: center;
    font-size: 1.5rem;
    letter-spacing: .07em;
    margin-bottom: 70px;
    font-weight: bold;
}
#page-justfit-house .about-just p{
    font-size: 1rem;
    line-height: 2;
    margin-bottom: 20px;
}
#page-justfit-house .about-just .layout{
    display: flex;
    gap: 50px;
    align-items: center;
    justify-content: space-between;
}
#page-justfit-house .about-just .layout .img{
    flex-shrink: 0;
    width: 550px;
    height: 100%;
    max-width: 100%;
}
#page-justfit-house .about-just .layout .img img {
  width: 100%;
    height: 100%;
  object-fit: cover;
}
/* スペック */
#page-justfit-house .sec-title{
    text-align: center;
}
#page-justfit-house .sec-title span::before {
    left: 555px;
}
#page-justfit-house .sub-title{
    text-align: center;
    font-size:1.7rem;
    margin-bottom: 80px;
    letter-spacing: .08em;
}
#page-justfit-house .lineup-spec{
    display: grid;
    grid-template-columns: repeat(4, auto);
    justify-content: center;
    gap: 30px;
    margin-bottom: 150px;
}
#page-justfit-house .lineup-spec li{
    background-color: #6b6764;
    width: 180px;
    height: 180px;
    border-radius: 50%;
    text-align: center;
    display: flex;
    flex-direction: column;
    place-content: center;
    place-items: center;
    font-size: 1.3rem;
    line-height: 1.6;
    font-weight: bold;
    letter-spacing: .08em;
    color: #fff;
    opacity: .8;
}
#page-justfit-house .lineup-spec li span{
    display: block;
    font-size: 0.9rem;
}
#page-justfit-house .normal-spec{
    display: grid;
    grid-template-columns: repeat(4, auto);
    justify-content: center;
    gap: 50px 30px;
    margin-bottom: 150px;
    text-align: center;
}
#page-justfit-house .normal-spec li div{
    width: 250px;
    margin-bottom: 10px;
}
#page-justfit-house .normal-spec li div img{
    border-radius: 3px;
    width: 100%;
    height: 300px;
    object-fit: cover;
}

/* プラン */
/* タイトル */
#page-justfit-house .just-plan h3 span{
    font-family: "Lato", sans-serif;
    font-size: 2rem;
    margin-right: 20px;
}
#page-justfit-house .just-plan h3{
    font-size: 1.6rem;
    letter-spacing: .08em;
    margin-bottom: 50px;
}
#page-justfit-house .just-plan{
    background-color: #fff;
    border-radius: 10px;
    padding: 50px;
}
/* 画像 */
#page-justfit-house .just-plan .grid{
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto;
    gap: 0 50px;
}
#page-justfit-house .just-plan .grid .text{
    grid-column: 1/1;
    grid-row: 1/3;
}
#page-justfit-house .just-plan .grid .main-img{
    grid-column: 2/3;
    grid-row: 1/2;
}
#page-justfit-house .just-plan .grid .main-img img{
    
    border-radius: 10px;
}
#page-justfit-house .just-plan .grid .sub-img{
    grid-column: 2/3;
    grid-row: 2/3;


}
/* テキスト */
#page-justfit-house .just-plan .grid .text{
    border: 1px solid #333;
    border-radius: 10px;
}
#page-justfit-house .just-plan .grid .text .top-text{
    background-color: #545450;
    color: #fff;
    border-radius: 10px 10px 0 0;
    padding: 30px;
}
#page-justfit-house .just-plan .grid .text .top-text p:first-child{
    text-align: center;
    font-size: 1.1rem;
    letter-spacing: .08em;
}
#page-justfit-house .just-plan .grid .text .top-text p:last-child{
    text-align: center;
    font-size: 2.6rem;
    letter-spacing: .08em;
    font-weight: bold;
}
#page-justfit-house .just-plan .grid .text .top-text p:last-child span{
    font-size: 1.1rem;
    margin: 0 6px;
    font-weight: normal;
}
/* 価格表 */
#page-justfit-house .just-plan .grid .text .bottom-text{
    padding: 40px 60px;
}

#page-justfit-house .just-plan .grid .text .bottom-text .place div div{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 64px;
    margin-bottom: 15px;
    font-size: 1.1rem;
}
/* ボーダー */
#page-justfit-house .just-plan .grid .text .bottom-text .place > div{
    border-bottom: 1.5px solid #333;
    margin-bottom: 15px;
}
#page-justfit-house .just-plan .grid .text .bottom-text .place > div:last-child{
    border: none;
}
/* オプション */
#page-justfit-house .just-plan .grid .text .bottom-text .option p{
    border: 1px solid #333;
    padding: 5px;
    letter-spacing: .08em;
    margin-top: 40px;
    margin-bottom: 20px;
    text-align: center;
    /* border-radius: 10px; */
}
#page-justfit-house .just-plan .grid .text .bottom-text .option li{
    margin-bottom: 5px;
    font-size: 0.9rem;
}


.justfit-swiper .swiper-pagination-bullet-active { opacity: 1; }

/* 既存の .grid をフル幅で使いたい場合の保険 */
.justfit-swiper .just-plan .grid { width: 100%; }
/* ラッパ（ボタンを外に出す前提） */
.justfit-slider-wrap {
  position: relative;
  margin-bottom: 80px;
}

/* 右上に固定 */
.justfit-slider-wrap .swiper-controls{
  position: absolute;
  top: -30px;   /* 見出しの下などに合わせて調整 */
  right: 60px;
  display: flex;
  align-items: center;
  gap: 40px;    /* 矢印↔ドットの間隔 */
  z-index: 20;
}

/* ====== 矢印（デフォルトを完全リセット） ====== */
.justfit-slider-wrap .swiper-button-prev,
.justfit-slider-wrap .swiper-button-next{
  position: relative !important; /* Swiperのabsoluteを打ち消す */
  width: 70px;
  height: 24px;
  margin: 0;         /* Swiperが入れる余白を消す */
  inset: auto;       /* top/right/left/bottom の残りを無効化 */
  cursor: pointer;
}

/* デフォルトのフォントアイコンを消す */
.justfit-slider-wrap .swiper-button-prev::after,
.justfit-slider-wrap .swiper-button-next::after{
  content: "" !important;
  font-size: 0 !important;
  position: absolute;
}

/* 左矢印 */
.justfit-slider-wrap .swiper-button-prev::before{
  content: "";
  position: absolute;
  left: 6px;
  top: 50%;
  transform: translateY(-50%);
  width: 35px;
  height: 1px;
  background: #333;
}
.justfit-slider-wrap .swiper-button-prev::after{
  /* くの字（←） */
  left: 6px;
  top: 50%;
  transform: translateY(-50%) rotate(45deg);
  width: 8px;
  height: 8px;
  border-left: 1.5px solid #333;
}

/* 右矢印 */
.justfit-slider-wrap .swiper-button-next::before{
  content: "";
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  width: 35px;
  height: 1px;
  background: #333;
}
.justfit-slider-wrap .swiper-button-next::after{
  /* くの字（→） */
  right: 6px;
  top: 50%;
  transform: translateY(-50%) rotate(45deg);
  width: 8px;
  height: 8px;
  border-top: 1.5px solid #333;
}

/* ====== ドット ====== */
.justfit-slider-wrap .swiper-pagination{
  position: static;
  justify-content: flex-end;
  display: flex;
  gap: 6px;
}
.justfit-slider-wrap .swiper-pagination-bullet{
  width: 8px; height: 8px; border-radius: 50%;
  background: #000; opacity: .3; transition: opacity .3s;
}
.justfit-slider-wrap .swiper-pagination-bullet-active{
  background: #B22222; opacity: 1;
}

/* ラインナップ */
.users-voice {
  background: #f2f1ee09;
  padding: 48px 20px 60px;
}
.uv-inner {
  max-width: 900px;
  margin: 0 auto;
}
.uv-heading {
    font-size: 1.5rem;
    letter-spacing: .06em;
    color: #545450;
    margin-bottom: 22px;
    text-align: center;
}
.uv-heading span{
    font-family: "Lato", sans-serif;
    display:block;
    margin-bottom: 10px;
    font-size: 1.3rem;
}
/* grid */
.uv-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}
/* card */
.uv-item a {
    display: block;
    color: inherit;
    border-radius: 5px;
    overflow: hidden;
    transition: transform .3s ease, box-shadow .3s ease;
}
/* image */
.uv-thumb {
    height: clamp(120px, 18vw, 280px); /* 画面に応じて可変。数値はお好みで */
    overflow: hidden;
    border-radius: 5px;
    background: #ddd;
}
.uv-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: transform .4s ease;
}
.uv-item a:hover .uv-thumb img {
    transform: scale(1.05);
}

/* title + arrow */
.uv-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: 10px;
  padding: 0 4px;
}
.uv-title {
    font-size: 1.1rem;
    letter-spacing: .07em;
}
.uv-go {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border-radius: 50px;
  display: grid;
  place-items: center;
  background: #fff;
  transition: all .25s ease;
}
.uv-item a:hover .uv-go {
    border-color: #555;
    background: #f8f8f8;
    transform: translateX(2px);
}
/* 家型マスク */
.uv-thumb.is-house{
  position: relative;
  /* 高さ指定はそのまま活かせます */
  clip-path: polygon(
    50% 0%,     /* 屋根の頂点 */
    100% 35%,   /* 右屋根の端 */
    100% 100%,  /* 右下 */
    0% 100%,    /* 左下 */
    0% 35%      /* 左屋根の端 */
  );
}

/* 画像はこれまで通り全体にフィット */
.uv-thumb.is-house img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform .4s ease;
}

/* ホバー拡大もそのまま効きます */
.uv-item a:hover .uv-thumb.is-house img{
  transform: scale(1.05);
}

/* responsive */
@media (max-width: 1024px) {
  .uv-list { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .uv-list { grid-template-columns: 1fr; }
  .uv-heading { font-size: 22px; }
}
/* =========================================
   Just fit house レスポンシブ（768px以下）
========================================= */
@media (max-width: 768px) {

  /* 全体余白 */
  #page-justfit-house .inner{
    padding: 30px 16px!important;
  }

  /* リード */
  #page-justfit-house .just-lead{
    margin-bottom: 30px;
    text-align: left;
  }
  #page-justfit-house .just-lead h3{
    font-size: 1.1rem;
    letter-spacing: .12em;
    margin-bottom: 20px;
    line-height: 1.7;
  }
  #page-justfit-house .just-lead p{
    font-size: 0.9rem;
    line-height: 1.8;
    margin-bottom: 10px;
  }

  /* 見出しの飾り位置を中央に */
  #page-justfit-house .sec-title span::before {
    left: 50%;
    transform: translateX(-50%);
  }

  /* ── ジャストフィットハウスとは？ ── */
  #page-justfit-house .about-just{
    padding: 24px 16px 32px;
    margin: 0 -4px 60px;
  }
  #page-justfit-house .about-just h3{
    font-size: 1.1rem;
    margin-bottom: 20px;
  }
  #page-justfit-house .about-just p{
    font-size: 0.8rem;
    line-height: 1.8;
    margin-bottom: 10px;
  }
  #page-justfit-house .about-just .layout{
    flex-direction: column;
    gap: 20px;
    align-items: flex-start;
  }
  #page-justfit-house .about-just .layout .img{
    width: 100%;
  }
  #page-justfit-house .about-just .layout .img img{
    width: 100%;
    height: auto;
    object-fit: cover;
  }

  /* ── スペック丸アイコン ── */
  #page-justfit-house .lineup-spec{
    grid-template-columns: repeat(3,1fr);
    gap: 10px 5px;
    margin-bottom: 80px;
  }
  #page-justfit-house .lineup-spec li{
    width: 30vw;
    max-width: 150px;
    aspect-ratio: 1 / 1;
    height: auto;
    font-size: 0.8rem;
    letter-spacing: .04em;
  }
  #page-justfit-house .lineup-spec li span{
    font-size: 0.75rem;
  }

  /* ── 標準仕様グリッド ── */
  #page-justfit-house .sub-title{
    font-size: 1.3rem;
    margin-bottom: 40px;
  }
  #page-justfit-house .normal-spec{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px 12px;
    margin-bottom: 80px;
  }
  #page-justfit-house .normal-spec li{
    font-size: 0.8rem;
  }
  #page-justfit-house .normal-spec li div{
    width: 100%;
  }
  #page-justfit-house .normal-spec li div img{
    height: 150px;
  }

  /* ── プラン（Swiper内） ── */
      #page-justfit-house .sec-title span::before {
        left: 28%;
    }
  #page-justfit-house .just-plan{
    padding: 24px 16px;
    margin: 0 10px;
  }
  #page-justfit-house .just-plan h3{
    font-size: 1.1rem;
    margin-bottom: 24px;
  }
  #page-justfit-house .just-plan h3 span{
    font-size: 1.1rem;
    margin-right: 10px;
  }

  /* 2カラム → 1カラム */
  #page-justfit-house .just-plan .grid{
    grid-template-columns: 1fr;
    gap: 15px;
  }
  #page-justfit-house .just-plan .grid .text,
  #page-justfit-house .just-plan .grid .main-img,
  #page-justfit-house .just-plan .grid .sub-img{
    grid-column: auto;
    grid-row: auto;
  }
  #page-justfit-house .just-plan .grid .main-img img,
  #page-justfit-house .just-plan .grid .sub-img img{
    width: 100%;
    height: auto;
    border-radius: 10px;
  }
  #page-justfit-house .just-plan .grid .sub-img{
    margin-top: 8px;
  }

  /* 価格テキスト内の余白＆文字 */
  #page-justfit-house .just-plan .grid .text .top-text{
    padding: 20px 12px;
  }
  #page-justfit-house .just-plan .grid .text .top-text p:first-child{
    font-size: 0.8rem;
  }
  #page-justfit-house .just-plan .grid .text .top-text p:last-child{
    font-size: 1.7rem;
  }
  #page-justfit-house .just-plan .grid .text .top-text p:last-child span{
    font-size: 0.8rem;
  }

  #page-justfit-house .just-plan .grid .text .bottom-text{
    padding: 20px 16px;
  }
  #page-justfit-house .just-plan .grid .text .bottom-text .place div div{
    grid-template-columns: 1.1fr 0.9fr;
    gap: 12px;
    font-size: 0.85rem;
  }

  #page-justfit-house .just-plan .grid .text .bottom-text .option p{
    margin-top: 24px;
    font-size: 0.8rem;
  }
  #page-justfit-house .just-plan .grid .text .bottom-text .option li{
    font-size: 0.7rem;
  }

  /* Swiperコントロールの位置調整 */
  .justfit-slider-wrap{
    margin-top: 24px;
    margin-bottom: 56px;
  }
  .justfit-slider-wrap .swiper-controls{
    position: static;
    justify-content: center;
    right: auto;
    top: auto;
    margin-bottom: 12px;
    gap: 24px;
  }
  .justfit-slider-wrap .swiper-button-prev,
  .justfit-slider-wrap .swiper-button-next{
    width: 48px;
  }

  /* ラインナップ（下のカード） */
  .users-voice{
    padding: 40px 16px 48px;
  }
  .uv-inner{
    max-width: 100%;
  }
  .uv-heading{
    font-size: 1.1rem;
  }
  .uv-heading span{
    font-size: .9rem;
  }
  .uv-list{
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .uv-thumb{
    height: 180px;
  }
  .uv-title{
    font-size: 1rem;
  }
}

/*==========================================================================
　GATEで建てる平家
============================================================================ */
#page-one-story-house .subpage-top{
    background-image: url(images/page-one-story-house.webp);
}
/* 導入文章 */
#page-one-story-house  .just-lead{
    margin-bottom: 150px;
    text-align: center;
}
#page-one-story-house  .just-lead h3{
    line-height: 1.8;
    font-size: 2rem;
    letter-spacing: .15em;
    margin-bottom: 50px;
}
#page-one-story-house  .just-lead p{
    font-size: 1.2rem;
    letter-spacing: .1em;
    line-height: 2;
    margin-bottom: 20px;
}
/* ジャストフィットハウスとは？ */
#page-one-story-house  .about-just{
    background-color: #fff;
    border-radius: 10px;
    padding: 50px 80px;
}
#page-one-story-house  .about-just h3{
    text-align: center;
    font-size: 1.5rem;
    letter-spacing: .07em;
    margin-bottom: 70px;
    font-weight: bold;
}
#page-one-story-house  .about-just p{
    font-size: 1rem;
    line-height: 2;
    margin-bottom: 20px;
}
#page-one-story-house .about-just .layout{
    display: flex;
    gap: 50px;
    align-items: center;
    justify-content: space-between;
}
#page-one-story-house .about-just .layout .img{
    flex-shrink: 0;
    width: 550px;
    height: 100%;
    max-width: 100%;
}
#page-one-story-house .about-just .layout .img img {
  width: 100%;
    height: 100%;
  object-fit: cover;
}
/* スペック */
#page-one-story-house  .sec-title{
    text-align: center;
}
#page-one-story-house  .sec-title span::before {
    left: 555px;
}
#page-one-story-house  .sub-title{
    text-align: center;
    font-size:1.7rem;
    margin-bottom: 80px;
    letter-spacing: .08em;
}
#page-one-story-house .lineup-spec{
    display: grid;
    grid-template-columns: repeat(4, auto);
    justify-content: center;
    gap: 30px;
    margin-bottom: 150px;
}
#page-one-story-house .lineup-spec li{
    background-color: #6b6764;
    width: 180px;
    height: 180px;
    border-radius: 50%;
    text-align: center;
    display: flex;
    flex-direction: column;
    place-content: center;
    place-items: center;
    font-size: 1.3rem;
    line-height: 1.6;
    font-weight: bold;
    letter-spacing: .08em;
    color: #fff;
    opacity: .8;
}
#page-one-story-house  .lineup-spec li span{
    display: block;
    font-size: 0.9rem;
}
#page-one-story-house .normal-spec{
    display: grid;
    grid-template-columns: repeat(4, auto);
    justify-content: center;
    gap: 50px 30px;
    margin-bottom: 150px;
    text-align: center;
}
#page-one-story-house .normal-spec li div{
    width: 250px;
    margin-bottom: 10px;
}
#page-one-story-house .normal-spec li div img{
    border-radius: 10px;
}


#page-one-story-house .concept p,
#page-one-story-house .spec p,
#page-one-story-house .design p{
    font-size: 1.2rem;
    letter-spacing: .1em;
    line-height: 2;
    margin-bottom: 10px;
}
#page-one-story-house  .text{
    padding: 0 80px;
}
#page-one-story-house .concept h4,
#page-one-story-house .spec h4,
#page-one-story-house .design h4{
    font-size: 1.7rem;
    margin-bottom:  30px;
    letter-spacing: .1em;
    padding-bottom: 10px;
}
#page-one-story-house .layout section{

    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 50px;
    margin-bottom: 150px;
}

/* =========================================
   One story house レスポンシブ（768px以下）
========================================= */
@media (max-width: 768px){

  /* 全体余白 */
  #page-one-story-house .inner{
    padding: 30px 16px!important;
  }

  /* リード文 */
  #page-one-story-house .just-lead{
    margin-bottom: 30px;
    text-align: left;
  }
  #page-one-story-house .just-lead h3{
    font-size: 1.1rem;
    letter-spacing: .12em;
    margin-bottom: 20px;
    line-height: 1.7;
  }
  #page-one-story-house .just-lead p{
    font-size: 0.9rem;
    line-height: 1.8;
    margin-bottom: 10px;
  }

  /* 見出しの飾り位置を中央に */
  #page-one-story-house .sec-title span::before{
    left: 33%;
    transform: translateX(-50%);
  }

  /* ── 「GATEで建てる平屋とは？」 ── */
  #page-one-story-house .about-just{
    padding: 24px 16px 32px;
    margin: 0 -4px 40px;
  }
  #page-one-story-house .about-just h3{
    font-size: 1.1rem;
    margin-bottom: 20px;
  }
  #page-one-story-house .about-just p{
    font-size: 0.8rem;
    line-height: 1.8;
    margin-bottom: 10px;
  }
  #page-one-story-house .about-just .layout{
    flex-direction: column;
    gap: 20px;
    align-items: flex-start;
  }
  #page-one-story-house .about-just .layout .img{
    width: 100%;
  }
  #page-one-story-house .about-just .layout .img img{
    width: 100%;
    height: auto;
    object-fit: cover;
  }

  /* ── スペック丸アイコン ── */
  #page-one-story-house .lineup-spec{
    grid-template-columns: repeat(3, 1fr);
    gap: 10px 5px;
    margin-bottom: 40px;
  }
  #page-one-story-house .lineup-spec li{
    width: 30vw;
    max-width: 150px;
    aspect-ratio: 1 / 1;
    height: auto;
    font-size: 0.8rem;
    letter-spacing: .04em;
  }
  #page-one-story-house .lineup-spec li span{
    font-size: 0.75rem;
  }

  /* ── コンセプト／性能／デザイン セクション ── */

  /* 2カラム → 1カラム */
  #page-one-story-house .layout section{
    grid-template-columns: 1fr;
    gap: 24px;
    margin-bottom: 80px;
  }

  /* テキストまわり */
  #page-one-story-house .text{
    padding: 0 10px;
  }
  #page-one-story-house .concept h4,
  #page-one-story-house .spec h4,
  #page-one-story-house .design h4{
    font-size: 1.1rem;
    margin-bottom: 16px;
    letter-spacing: .08em;
    padding-bottom: 6px;
  }
  #page-one-story-house .concept p,
  #page-one-story-house .spec p,
  #page-one-story-house .design p{
    font-size: 0.9rem;
    letter-spacing: .04em;
    line-height: 1.8;
    margin-bottom: 8px;
  }

  /* 画像を全幅に */
  #page-one-story-house .layout section .reveal img{
    width: 100%;
    height: auto;
    object-fit: cover;
  }

  /* セクションごとの余白微調整 */
  #page-one-story-house .layout{
    margin: 0 16px 40px;
  }
}


/* =========================================
   Contact Form 7 用 お問い合わせフォーム
   （.contact-area 以下だけにスタイルを適用）
========================================= */

/* ラッパー */
.contact-area {
  max-width: 960px;
  margin: 60px auto;
  padding: 60px 0;
  background: #f3f2ed7d;
  border-radius: 3px;
}

.contact-inner {
  padding: 0 60px 40px;
  box-sizing: border-box;
}

/* CF7 のデフォルトをできるだけ打ち消す */
.contact-area .wpcf7 {
  margin: 0;
}

.contact-area .wpcf7-form {
  margin: 0;
  padding: 0;
  width: 100%;
  max-width: 100%;
  text-align: left;
}

/* ---- 共通文字サイズ ---- */
.contact-area .contact-form {
  font-size: 14px;
  line-height: 1.8;
}

/* =========================================
   行・見出しまわり
========================================= */
.contact-area h3{
    font-size: 1.3rem;
    font-weight: bold;
    letter-spacing: .04em;
    border-bottom: 1px solid #b22222;
    margin-bottom: 40px;
    padding-bottom: 10px;
    text-align: left;
}
.contact-area .form-row {
  margin-bottom: 26px;
}

.contact-area .form-head p{
      display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}
.contact-area .form-head label {
  display: inline-block;
  margin: 0;
  padding: 0;
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: .07em;

}

.contact-area .required {
  display: inline-block;
  padding: 2px 8px;
  font-size: 11px;
  color: #fff;
  background: #b22222;
  border-radius: 2px;
}


/* 日付＋時間（横並び維持） */
.reserve-time-group {
  display: flex;
  align-items: center;
  gap: 10px;
}

.reserve-time-group .field.small-field select {
    width: 260px;
}

.colon {
  font-size: 18px;
  margin-top: 22px;
}

/* 大人・こども横並び */
.visitor-flex {
  display: flex;
  gap: 40px;
  flex-wrap: wrap;
}

.visitor-field {
  min-width: 180px;
}


/* =========================================
   インプットエリア（本文部分）
========================================= */

/* CF7 が付ける wrap を 100% に */
.contact-area .form-body .wpcf7-form-control-wrap {
  display: block;
  width: 100%;
}

/* テキスト・日付・セレクト共通 */
.contact-area .form-body input[type="text"],
.contact-area .form-body input[type="tel"],
.contact-area .form-body input[type="email"],
.contact-area .form-body input[type="date"],
.contact-area .form-body input[name="age"],
.contact-area .form-body textarea,
.contact-area .form-body select {
  width: 100%;
  max-width: 100%;
  border-radius: 3px;
  padding: 16px;
  font-size: 1rem;
  background: #fff;
  box-sizing: border-box;
  margin: 0 0 16px;
  text-align: left;
}
/* 年齢 */
.contact-area .form-body input[name="age"]{
    width: 100px;
}
/* CF7 デフォルトの max-width を打ち消す */
.contact-area .wpcf7-form input,
.contact-area .wpcf7-form textarea,
.contact-area .wpcf7-form select {
  max-width: 100%;
}

/* テキストエリア */
.contact-area .form-body textarea {
  resize: vertical;
}
.wpcf7-list-item{
    margin: 0 16px 0 0;
}
/* 2カラム（氏名・フリガナ） */
.contact-area .form-two-cols {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.contact-area .field-label {
  display: block;
  font-size: .85rem;
  margin-bottom: 0px;
    text-align: left;
    line-height: 1;
}
.contact-area .form-body .wpcf7-form-control-wrap {
    display: block;
    width: 100%;
    text-align: left;
}
/* =========================================
   郵便番号・住所
========================================= */

.contact-area .field-zip p{
  display: flex !important;
  align-items: center;
  gap: 8px;
  margin-bottom: 0px;
}

.contact-area .field-zip .field-label {
  margin: 0;
}

.contact-area .field-zip input[type="text"] {
  max-width: 260px;
}

.contact-area .note {
  font-size: 11px;
  line-height: 1.6;
  margin: 0 0 30px;
  color: #777;
  text-align: left;
}
/* 郵便番号 → 注意書き の余白ゼロ */
.contact-area .field-zip input[type="text"] {
  margin-bottom: 0 !important;
}

/* =========================================
   チェックボックス（きっかけ）
========================================= */

/* きっかけチェックボックスをきれいに並べる */
.contact-area .checkbox-list {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 16px;        /* 行間 / 横の間隔 */
  justify-content: flex-start;
}

/* 各ラベル（カード）のスタイル */
.contact-area .checkbox-list label {
  display: inline-flex;
  align-items: center;
    justify-content: flex-start;
  flex-wrap: wrap;
  gap: 6px;
  padding: 10px 18px;
  background: #fff;
  border-radius: 3px;
  font-size: 0.95rem;
  cursor: pointer;
  box-sizing: border-box;
  margin-bottom: 10px;
  min-width: 190px;      /* 好きな幅に調整してOK */
}

/* チェックボックス */
.contact-area .checkbox-list input[type="checkbox"] {
  width: 16px;
  height: 16px;
  margin: 0;
}

/* =========================================
   プライバシーポリシー
========================================= */

/* プライバシー（同意チェック） */
.contact-area .form-privacy {
  text-align: center;
  margin-top: 10px;
}

/* acceptance 全体 */
.contact-area .privacy-label {
  display: inline-block;
  font-size: 12px;
  cursor: pointer;
}

/* チェックボックスとテキストの位置調整 */
.contact-area .privacy-label .wpcf7-list-item {
  margin: 0;
}

.contact-area .privacy-label input[type="checkbox"] {
  margin: 0 6px 0 0;
}
/* プライバシーポリシー セクションを中央揃え */
.contact-area .form-privacy {
  text-align: center;
  margin: 20px 0 30px;
}

/* acceptance 全体を中央へ */
.contact-area .privacy-label .wpcf7-list-item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 14px;
}
.wpcf7-spinner{
    display: none;
}


/* =========================================
   送信ボタン
========================================= */

.contact-area .form-submit {
  text-align: center;
  margin-top: 26px;
}

/* CF7 [submit class:btn-submit "…"] 用 */
.contact-area .btn-submit,
.contact-area input[type="submit"].btn-submit {
  display: inline-block;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  letter-spacing: .2em;
  padding: 20px 100px;
  cursor: pointer;
  color: #fff;
  background-color: #333;
  border-radius: 3px;
  border: none;
  transition: opacity .5s ease;
}

.contact-area .btn-submit:hover,
.contact-area input[type="submit"].btn-submit:hover {
  opacity: .8;
}
.consult-type p{
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 1.1rem;
    letter-spacing: .05em;
}


/* 日付フィールドを左揃えにする */
.form-body .field input[type="date"] {
  margin-left: 0;
}

/* form-body が横並びになっている場合は縦並びに強制 */
.form-body .field {
  display: block;
}

/* もし form-body に flex が効いて押されている場合に中央→左へ */
.form-row .form-body {
  justify-content: flex-start !important;
}

/* ▼ セレクトボックスに矢印を付ける */
/* ▼ セレクトボックスの矢印を薄いグレーに変更 */
.contact-area .form-body select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-color: #fff;
  background-image: url('data:image/svg+xml;utf8,<svg fill="%23999" height="14" width="14" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><polygon points="0,0 20,0 10,12"/></svg>');
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 12px;
  padding-right: 40px;
}




/* =========================================
   レスポンシブ
========================================= */
@media (max-width: 768px) {

  .contact-area {
    margin: 30px 10px;
    padding: 40px 20px;
  }
  .contact-inner {
    padding: 0;
  }

  /* セクションタイトル */
  .contact-area h3{
    font-size: 1.1rem;
    margin-bottom: 24px;
    padding-bottom: 8px;
  }

  .contact-area .form-row {
    margin-bottom: 20px;
  }

  .contact-area .form-head label {
    font-size: 0.95rem;
  }

  /* 2カラム → 1カラム（氏名・フリガナ） */
  .contact-area .form-two-cols {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  /* インプット系 少しコンパクトに */
  .contact-area .form-body input[type="text"],
  .contact-area .form-body input[type="tel"],
  .contact-area .form-body input[type="email"],
  .contact-area .form-body input[type="date"],
  .contact-area .form-body input[name="age"],
  .contact-area .form-body textarea,
  .contact-area .form-body select {
    padding: 12px;
    font-size: 0.95rem;
  }

  /* 年齢は横幅とりすぎないように */
  .contact-area .form-body input[name="age"]{
    width: 120px;
  }

  /* 日付＋時間：縦に崩して読みやすく */
  .reserve-time-group {
    flex-wrap: wrap;
    gap: 6px;
  }

  .reserve-time-group .field.small-field select {
    width: 140px;
  }

  .colon {
    font-size: 16px;
    margin-top: 0;
    align-self: flex-end;
  }

  /* ご来場人数：縦並び */
  .visitor-flex {
    flex-direction: column;
    gap: 12px;
  }
  .visitor-field {
    min-width: auto;
  }

  /* 郵便番号まわり */
  .contact-area .field-zip p{
    flex-wrap: wrap;
    gap: 4px;
  }
  .contact-area .field-zip input[type="text"] {
    max-width: 180px;
  }

  .contact-area .note {
    margin-bottom: 20px;
  }

  /* きっかけチェックボックス：1列～2列で可変 */
  .contact-area .checkbox-list {
    gap: 8px;
  }
  .contact-area .checkbox-list label {
    min-width: auto;
    width: 100%;             /* カードを横幅いっぱいに */
    font-size: 0.9rem;
    padding: 8px 12px;
  }

  /* プライバシー・送信ボタン周り */
  .contact-area .form-privacy {
    margin: 16px 0 24px;
  }

  .contact-area .privacy-label .wpcf7-list-item {
    font-size: 12px;
  }

  .contact-area .btn-submit,
  .contact-area input[type="submit"].btn-submit {
    width: 100%;
    padding: 16px 0;
    font-size: 0.95rem;
    letter-spacing: 0.15em;
  }
}


/* =========================================
   サンクスページ
========================================= */
#thankyou .subpage-top{
    background-image: url(images/thankyou.webp);
}
#thankyou .inner h3{
    font-size: 2rem;
    letter-spacing: .04em;
    text-align: center;
    margin-bottom: 50px;
}
#thankyou .inner p{
    font-size: 1.25rem;
    letter-spacing: .07em;
    text-align: center;
    margin-bottom: 30px;
    line-height: 2;
}
#thankyou .inner p a{
    text-decoration: underline;
    transition: color 0.5s ease;
}
#thankyou .inner p a:hover{
    color: #b22222;
}