@charset "UTF-8";
/* ============================================================
   RENEWAL.CSS  — Renewal Design 2026
   Load order: import.css(style.css) → top.css → renewal.css
   ============================================================ */

/* ---- Variables ------------------------------------------- */
:root {
    --blue:      #1a90d0;
    --blue-dark: #0d6fa8;
    --blue-pale: #e8f4fb;
    --shadow:    0 3px 14px rgba(0, 100, 180, 0.10);
    --radius:    12px;
}

/* ============================================================
   1. Global
   ============================================================ */
/*body {*/
/*    background-color: var(--blue-pale);*/
/*}*/
body {
    /* ① 背景画像のパスを指定してください */
    background-image:
        /* 中央 1000px に薄い白フィルタ（視認性向上） */
        linear-gradient(
            to right,
            rgba(255, 255, 255, 0)          calc(50% - 750px),
            rgba(255, 255, 255, 0.38)        calc(50% - 750px),
            rgba(255, 255, 255, 0.38)        calc(50% + 750px),
            rgba(255, 255, 255, 0)          calc(50% + 750px)
        ),
        /* 全体の薄い水色オーバーレイ */
        linear-gradient(rgba(173, 216, 230, 0.6), rgba(173, 216, 230, 0.6)),
        url("/img/common/background.jpg");
    /* ② 画面全体を覆うように配置 (object-fit: cover と同じ役割) */
    background-size: cover;

    /* ③ 画像の中央を基準にして表示 */
    background-position: center;

    /* ④ 画像の繰り返しを防ぐ */
    background-repeat: no-repeat;

    /* ⑤ スクロールしても背景画像を固定する（お好みで削除してもOKです） */
    background-attachment: fixed;

    /* ⑥ ブラウザのデフォルトの余白を消し、高さを画面いっぱいに広げる */
    margin: 0;
    min-height: 100vh;
}

a       { color: var(--blue); }
a:hover { color: var(--blue-dark); }

/* ============================================================
   2. Header  (body > .base)
   ============================================================ */
body > .base {
    background: transparent;
    box-shadow: none;
    overflow: visible;
}
img.logo { width: 130px; vertical-align: middle; }
img.tel  { width: 360px; vertical-align: middle; margin-left: 12px; }

#header_l {
    display: flex;
    align-items: center;
    padding: 10px 0;
    width: auto;
    float: left;
}

/* スマホの時 */
@media only screen and (max-width: 768px) {
    #header_l {
        margin: 0 !important;
    }
    #header_l > a > img {
        padding: 10px !important;
        margin: 0 !important;
    }
}
@media only screen and (max-width: 768px) {
    img.tel {
        width: 180px !important;
        max-width: calc(100vw - 120px);
    }
}

@media only screen and (max-width: 600px) {
    .base {
        /*TODO*/
        width: 90% !important;
        margin: 0 auto;
    }
}



#header_r {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 10px 0;
    width: auto;
    float: right;
    font-size: 12px;
    color: #555;
}
#header_r a       { color: #555; }
#header_r a:hover { color: var(--blue); }
#header_r img     { vertical-align: middle; margin: 0 2px; }

/* スマホのときはheader_r非表示 */
@media only screen and (max-width: 768px) {
    #header_r {
        display: none !important;
    }
}

/* ============================================================
   3. Desktop Navigation (.title > #navi > ul.ddmenu)
   ─ style.css の #navi { width:1000px; margin:0 auto } を活かす
   ─ renewal.css では見た目 (白カード) のみ上書き
   ============================================================ */

/* .title: style.css の clear:both を継承。余白のみ追加 */
.title {
    background: transparent;
    position: relative;
    z-index: 20;
    padding: 10px 0 20px;   /* 下余白 = ナビとヒーローの間隔 */
}

/* 白い浮かびカード */
#navi {
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 6px 24px rgba(0, 60, 140, 0.16);
    position: relative;
    z-index: 20;
}

ul.ddmenu { padding: 0; margin: 0; }

ul.ddmenu a {
    color: #444;
    line-height: 50px;
    font-size: 14px;
    transition: color 0.2s, background 0.2s;
}
ul.ddmenu a:hover {
    color: var(--blue);
    background: rgba(26, 144, 208, 0.05);
}

/* 仕切り線の色を薄く */
ul.ddmenu li { border-color: #e0e0e0; }

/* 最左・最右のボーダーを除去 + 角丸 */
ul.ddmenu li:first-child {
    border-left: none;
    border-radius: 16px 0 0 16px;
}
ul.ddmenu li:last-child {
    border-right: none;
    border-radius: 0 16px 16px 0;
}

/* アクティブ項目 */
ul.ddmenu li.active > a {
    color: var(--blue);
    font-weight: bold;
    border-bottom: 3px solid var(--blue);
    line-height: 47px;
}
ul.ddmenu li.active > a:hover {
    background: rgba(26, 144, 208, 0.05);
}

/* サブメニューを持つ項目の ▾ */
ul.ddmenu li.has-children > a::after {
    content: ' ▾';
    font-size: 10px;
    opacity: 0.55;
}

/* デスクトップ ドロップダウン — モダン浮遊カード */
ul.ddmenu ul {
    top: 50px;
    min-width: 200px;
    /* display:none を上書きして CSS トランジション対応に */
    display: block !important;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    transform: translateY(-10px);
    transition: opacity 0.22s ease, transform 0.22s ease, visibility 0s 0.22s;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0, 60, 140, 0.16), 0 2px 8px rgba(0,0,0,0.06);
    border: 1px solid rgba(26, 144, 208, 0.12);
    overflow: hidden;
    padding: 6px 0;
}
ul.ddmenu li:hover > ul {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
    transition: opacity 0.22s ease, transform 0.22s ease, visibility 0s 0s;
}
ul.ddmenu ul li {
    width: auto;
    border-top: none;
}
ul.ddmenu ul li a {
    display: block;
    background: transparent;
    color: #1a3a5c;
    line-height: 1;
    padding: 11px 20px;
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
    transition: background 0.15s ease, color 0.15s ease;
    border-top: none;
}
ul.ddmenu ul li a:hover {
    background: rgba(26, 144, 208, 0.09);
    color: var(--blue);
}
ul.ddmenu ul li:first-child { border-top: none; }

/* ============================================================
   4. ハンバーガーボタン (.nav-toggle) — デスクトップでは非表示
   style.css の .side-menu-btn とは別クラスのため干渉なし
   ============================================================ */
.nav-toggle {
    display: none;  /* デスクトップ: 非表示 */
}

/* ============================================================
   5. オーバーレイ / モバイルナビ — デスクトップでは非表示
   ============================================================ */
.overlay       { display: none; }
.sp-nav-overlay { display: none; }   /* モバイルのみ表示 */

/* ============================================================
   6. Hero wrap (.hero-wrap) — ナビなし、カルーセルのみ
   ============================================================ */
.hero-wrap {
    clear: both;      /* .title の float 解除（万全策） */
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(ellipse at 72% 28%, rgba(255,255,255,0.55) 0%, transparent 52%),
        radial-gradient(ellipse at 18% 72%, rgba(255,255,255,0.28) 0%, transparent 42%),
        linear-gradient(140deg, #68a8c8 0%, #92c4dc 25%, #b4d8ee 55%, #cee9f6 78%, #e2f4fc 100%);
}

/* 装飾オーブ (カルーセル画像の後ろ z-index:-1) */
.hero-wrap::before {
    content: '';
    position: absolute;
    top: -80px; right: -80px;
    width: 360px; height: 360px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255,255,255,0.35) 0%, transparent 65%);
    z-index: -1;
    pointer-events: none;
}

/* カルーセル: style.css の overflow:hidden でクリップ済み */
.main {
    position: relative;
    overflow: hidden;
    background: none;
}
.main .rslides img { opacity: 1; }

/* ============================================================
   7. スライダーページャー
   ============================================================ */

/* ── ボタン＋ドット横並びラッパー ── */
.slider-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    padding: 12px 0 16px;
    max-width: 1000px;
    margin: 0 auto;
    position: relative;
    z-index: 2;
    box-sizing: border-box;
}

/* ── 停止／再生ボタン（背景なし） ── */
.slider-pause-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 4px;
    transition: opacity 0.2s;
}
.slider-pause-btn svg {
    fill: #999;
    display: block;
    transition: fill 0.2s;
}
.slider-pause-btn:hover svg {
    fill: #555;
}
/* 再生アイコンは通常非表示、一時停止中に表示 */
.slider-pause-btn .icon-play  { display: none; }
.slider-pause-btn .icon-pause { display: block; }
.slider-pause-btn.is-paused .icon-play  { display: block; }
.slider-pause-btn.is-paused .icon-pause { display: none; }

/* ── ドットコンテナ ── */
.slider-pager {
    flex: 1;
    background: transparent;
    padding: 0;
    text-align: center;
    line-height: 0;
}
.rslides_tabs {
    display: inline-block;
    list-style: none;
    margin: 0; padding: 0;
    position: relative;
    vertical-align: middle;
}
/* 進捗バー（ライン）：--fill でアクティブ部分を着色 */
.rslides_tabs::before {
    content: '';
    position: absolute;
    top: 50%; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(
        to right,
        var(--blue) var(--fill, 0%),
        #b8d8e8 var(--fill, 0%)
    );
    border-radius: 2px;
    transform: translateY(-50%);
    z-index: 0;
    transition: background 0.4s;
}
.rslides_tabs li {
    display: inline-block;
    margin: 0 18px;
    position: relative;
    z-index: 1;
}
.rslides_tabs li a {
    display: block;
    width: 16px; height: 16px;
    border-radius: 50%;
    background: #c4dce8;
    border: 2px solid #aacad8;
    text-indent: -9999px;
    transition: all 0.3s;
    box-sizing: border-box;
}
.rslides_tabs li.rslides_here a {
    background: var(--blue);
    border-color: var(--blue);
    transform: scale(1.3);
    box-shadow: 0 0 0 3px rgba(26, 144, 208, 0.28);
}

/* ============================================================
   8. ステンレス容器の専門メーカー セクション
   ============================================================ */
.content1--stainless {
    display: flex;
    align-items: center;
    gap: 36px;
    padding: 32px 36px;
}

/* 左カラム（テキスト） */
.stainless-col--text {
    flex: 1 1 0;
    min-width: 0;
}
.content1--stainless .content1-title {
    font-size: 22px;
    font-weight: bold;
    color: #1a2a3c;
    border-left: none;
    padding-left: 0;
    line-height: 1.4;
    display: block;
    margin-bottom: 14px;
}
.content1--stainless h1 {
    margin: 0 0 12px;
    color: #1a2a3c;
}
.content1--stainless .jpp {
    font-size: 14px;
    line-height: 1.85;
    color: #444;
    margin: 0 0 28px;
    padding: 0;
}
.stainless-cta {
    text-align: center;
    margin: 0;
    padding: 0;
}

/* 右カラム（画像） */
.stainless-col--img {
    flex: 0 0 33%;
    max-width: 33%;
}
.stainless-col--img img {
    width: 100%;
    height: auto;
    display: block;
}

/* モバイル：縦積み */
@media only screen and (max-width: 768px) {
    .content1--stainless {
        flex-direction: column;
        gap: 20px;
        padding: 24px 20px;
    }
    .stainless-col--img {
        flex: none;
        max-width: 80%;
        width: 80%;
    }
    .content1--stainless .content1-title {
        font-size: 18px;
    }
}

/* ============================================================
   9. 見出し
   ============================================================ */
h1 { color: var(--blue); }
h2 {
    background: none;
    color: var(--blue);
    font-size: 18px;
    font-weight: bold;
    padding: 5px 0 8px 12px;
    /*border-left: 4px solid var(--blue);*/
    margin-bottom: 12px;
}
h3, h4, h5, h6 { border-bottom-color: var(--blue); }
h3::after, h4::after, h5::after, h6::after { background-color: #5bc0e8; }

/* TOPページ: セクション章タイトル（両サイドライン付き中央揃え）
   対象: おすすめ以降の .content2 h3/h5/h6 と .access-section h2
   除外: .info h2（最新情報）は元スタイルを維持 */
body.top-page .content2 h3,
body.top-page .content2 h5,
body.top-page .content2 h6,
body.top-page .access-section h2 {
    display: flex;
    align-items: center;
    gap: 16px;
    font-size: 20px;
    font-weight: bold;
    color: var(--blue);
    background: none;
    border-bottom: none;
    padding: 0;
    margin: 0 0 16px;
}
@media (min-width: 769px) {
    body.top-page .content2 h3,
    body.top-page .content2 h5,
    body.top-page .content2 h6,
    body.top-page .access-section h2 {
        font-size: 24px;
    }
}
body.top-page .content2 h3::before,
body.top-page .content2 h5::before,
body.top-page .content2 h6::before,
body.top-page .access-section h2::before {
    content: '';
    flex: 1;
    height: 1px;
    background: rgba(26, 144, 208, 0.3);
    position: static;
}
body.top-page .content2 h3::after,
body.top-page .content2 h5::after,
body.top-page .content2 h6::after,
body.top-page .access-section h2::after {
    content: '';
    flex: 1;
    height: 1px;
    background: rgba(26, 144, 208, 0.3);
    /* top.css の absolute 配置をリセット */
    position: static;
    bottom: auto;
    left: auto;
    z-index: auto;
    width: auto;
}

/* ============================================================
   9. ボタン
   ============================================================ */

/* p02 を含む content1 はパディングを除去して画像を全幅に */
.content1:has(img.p02) {
    padding: 0;
}
.content1 img.p02 {
    display: block;
    width: 100%;
    height: auto;
    overflow: hidden;
}
.product {
    border-color: var(--blue); color: var(--blue);
    border-radius: 20px; padding: 6px 16px;
}
.product:hover { background: var(--blue); border-color: var(--blue); color: #fff; }

.btm_navy {
    border-color: var(--blue); color: var(--blue);
    border-radius: 20px; padding: 8px 28px;
    width: auto; min-width: 140px;
}
.btm_navy:hover { background: var(--blue); border-color: var(--blue); color: #fff; }

/* ============================================================
   10. コンテンツカード群
   ============================================================ */
.content3 {
    background: #fff; border-radius: var(--radius);
    box-shadow: var(--shadow); padding: 16px 20px;
    margin: 24px 0; text-align: center;
    box-sizing: border-box; width: 100%;
}
img.misu { width: 100%; max-width: 550px; }

.content1 {
    border: none; border-radius: var(--radius);
    box-shadow: var(--shadow); padding: 20px 24px;
    background: #fff; overflow: hidden;
    box-sizing: border-box; width: 100%; margin: 16px 0;
}
.content1-title {
    position: static; background: none; display: block;
    padding: 0 0 6px 12px; font-size: 17px; font-weight: bold;
    color: var(--blue); border-left: 4px solid var(--blue);
    margin-bottom: 10px; line-height: 1.4;
}
.content1 h1 { margin: 0 0 10px; color: inherit; font-size: inherit; font-weight: inherit; }
.content1 strong { color: var(--blue); }
.content1 p.cen2 { float: right; margin: 0 0 10px 20px; }
img.towa { width: 280px; border-radius: 8px; }

.info {
    background: #fff; border-radius: var(--radius);
    box-shadow: var(--shadow); padding: 20px 24px;
    overflow: visible; margin: 20px 0;
    box-sizing: border-box; width: 100%;
}
.info h2 {
    background: none; color: #333; font-size: 16px; font-weight: bold;
    border-left: none; padding: 0 0 10px; border-bottom: 2px solid var(--blue);
    margin-bottom: 4px;
}
.info dl.new { border: none; background: none; height: 280px; overflow-y: auto; width: 100%; margin: 0; }
.info dl.new dt {
    display: block; font-size: 12px; color: var(--blue); font-weight: bold;
    padding: 12px 0 2px; line-height: 1.4; border: none; margin: 0;
}
.info dl.new dt:first-child { padding-top: 8px; }
.info dl.new dd {
    display: block; font-size: 13px; line-height: 1.7; color: #333;
    margin-left: 0; padding-bottom: 10px; border-bottom: 1px solid #e6f0f8;
}
.info dl.new dd:last-child { border-bottom: none; padding-bottom: 0; }
.info a       { color: var(--blue); }
.info a:hover { color: var(--blue-dark); }

.content2 { padding: 16px 0 0; margin: 10px 0; clear: both; }

body:not(.exclude-page)  {
    .content2 {
        background: white; border-radius: var(--radius);
        padding: 20px 0  !important;

    }
}
.content2--cta {
    background: linear-gradient(135deg, #0d6fa8, #1a90d0);
    border-radius: var(--radius); padding: 28px 32px;
    margin: 24px 0; text-align: center;
    box-sizing: border-box; width: 100%;
}
.content2--cta h4        { color: #fff; border-bottom-color: rgba(255,255,255,0.4); font-size: 22px; }
.content2--cta h4::after { background: rgba(255,255,255,0.6); }
.content2--cta p.std     { color: rgba(255,255,255,0.9); margin: 12px 0; }
.content2--cta .btm_navy { border-color: #fff; color: #fff; margin-bottom: 0; }
.content2--cta .btm_navy:hover { background: #fff; color: var(--blue); }

.block2 {
    background: white; border-radius: var(--radius); padding: 20px 0;
}

.block4 {
    width: 22%; margin: 0 1.5% 20px; padding: 16px 8px 12px;
    float: left; background: #fff; border-radius: var(--radius);
    box-shadow: var(--shadow); box-sizing: border-box;
}
.block4 strong { display: block; margin-bottom: 6px; font-size: 15px; border-bottom-color: var(--blue); }
.block4 img.lineup { width: 85%; max-width: 210px; }

.block5 {
    width: 17%; margin: 0 1.5% 16px; padding: 12px 6px 8px;
    float: left; background: #fff; border-radius: 10px;
    box-shadow: var(--shadow); box-sizing: border-box;
}
.block5 strong { display: block; margin-bottom: 4px; border-bottom-color: var(--blue); }
.block5 img.op { width: 85%; max-width: 130px; }

/* ============================================================
   11. フッター
   ============================================================ */
#footer { background: linear-gradient(to right, #4ab4d8, #74c8e8); color: #fff; }
#footer p { color: #fff; }
#footer_ad { background: #c8e6f5; color: #444; }

/* ============================================================
   12. 固定装飾 (バブル等)
   ============================================================ */
/*body::before {*/
/*    content: ''; position: fixed; left: 2.5%; top: 38%;*/
/*    width: 130px; height: 130px; border-radius: 50%;*/
/*    background: rgba(70,160,220,0.13); pointer-events: none; z-index: 0;*/
/*}*/
/*body::after {*/
/*    content: ''; position: fixed; left: 5%; top: 56%;*/
/*    width: 76px; height: 76px; border-radius: 50%;*/
/*    background: rgba(70,160,220,0.08); pointer-events: none; z-index: 0;*/
/*}*/
/*html::before {*/
/*    content: ''; position: fixed; right: -55px; top: 6%;*/
/*    width: 180px; height: 380px;*/
/*    border-radius: 60% 40% 55% 45% / 35% 65% 35% 65%;*/
/*    background: rgba(70,170,225,0.11); pointer-events: none; z-index: 0;*/
/*    transform: rotate(-18deg);*/
/*}*/
/*html::after {*/
/*    content: ''; position: fixed; right: 0; top: 50%;*/
/*    width: 110px; height: 200px;*/
/*    border-radius: 50% 50% 60% 40% / 30% 70% 30% 70%;*/
/*    background: rgba(70,170,225,0.07); pointer-events: none; z-index: 0;*/
/*}*/

/* ============================================================
   13. Responsive — タブレット・スマートフォン共通
   ============================================================ */

/* --- ≤1000px: タブレット ---------------------------------- */
@media only screen and (max-width: 1000px) {
    body::before, body::after, html::before, html::after { display: none; }
    img.tel { width: 300px; }
    .title  { padding: 10px 0 16px; }
    .block4 { width: 22%; margin: 0 1.5% 16px; }
    .block5 { width: 19%; margin: 0 0.5% 14px; }
}

/* --- ≤880px ----------------------------------------------- */
@media only screen and (max-width: 880px) {
    .block5 { width: 30%; margin: 0 1.5% 14px; }
}

/* --- ≤750px ----------------------------------------------- */
@media only screen and (max-width: 750px) {
    .block4 { width: 47%; margin: 0 1.5% 16px; }
    .block5 { width: 47%; margin: 0 1.5% 14px; }
}

/* ============================================================
   14. モバイルナビゲーション (≤768px)
   ─ 完全新規実装。.sp-nav-* クラスは style.css に一切存在しない
   ─ 既存 #navi / ul.ddmenu はモバイルで非表示 → CSS 競合ゼロ
   ─ !important 不要（新クラス名のため style.css ルールが当たらない）
   ============================================================ */
@media only screen and (max-width: 768px) {

    /* ── 既存ナビを丸ごと非表示（style.css 600px ブロックを無効化） ── */
    #navi   { display: none !important; }
    .title  { padding: 0; }
    .overlay { display: none !important; }

    /* ── スクロール固定（ナビ開時） ─────────────────── */
    body.nav-open { overflow: hidden; }

    /* ── ハンバーガーボタン (.nav-toggle) ──────────────
       style.css の .side-menu-btn と別クラスのため干渉なし  */
    .nav-toggle {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 6px;
        position: fixed;
        top: 12px;
        right: 14px;
        width: 46px;
        height: 46px;
        background: #fff;
        border-radius: 50%;
        box-shadow: 0 2px 14px rgba(0, 0, 0, 0.20);
        cursor: pointer;
        z-index: 1100;
        -webkit-tap-highlight-color: transparent;
        transition: background 0.3s ease;
    }
    .nav-toggle span {
        display: block;
        width: 20px;
        height: 2px;
        background: #1a4a8a;
        border-radius: 2px;
        transition: transform 0.32s ease, opacity 0.24s ease, background 0.3s ease;
    }
    .nav-open .nav-toggle { background: rgba(26, 144, 208, 0.12); }
    .nav-open .nav-toggle span { background: #1a4a8a; }
    .nav-toggle--active span:first-child  { transform: translateY(8px)  rotate(45deg); }
    .nav-toggle--active span:nth-child(2) { opacity: 0; }
    .nav-toggle--active span:last-child   { transform: translateY(-8px) rotate(-45deg); }

    /* ── フルスクリーン オーバーレイ (.sp-nav-overlay) ──
       新規クラス名のため style.css の影響を一切受けない     */
    .sp-nav-overlay {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        position: fixed;
        inset: 0;
        background: linear-gradient(150deg, #cce8f6 0%, #dff1fb 55%, #c4e2f4 100%);
        z-index: 1000;
        visibility: hidden;
        opacity: 0;
        transition: opacity 0.32s ease, visibility 0.32s ease;
        overflow-y: auto;
        padding: 72px 24px 48px;
        box-sizing: border-box;
    }
    .sp-nav-overlay.is-open {
        visibility: visible;
        opacity: 1;
    }

    /* ── ナビ本体 ─────────────────────────────────── */
    .sp-nav {
        width: 100%;
        max-width: 320px;
    }
    .sp-nav__list {
        list-style: none;
        margin: 0;
        padding: 0;
        border-top: 1px solid rgba(26, 144, 208, 0.22);
    }

    /* ── メインメニュー項目（スタガー アニメーション） ── */
    .sp-nav__item {
        border-bottom: 1px solid rgba(26, 144, 208, 0.22);
        opacity: 0;
        transform: translateY(14px);
        transition: opacity 0.42s ease, transform 0.42s ease;
    }
    .sp-nav-overlay.is-open .sp-nav__item              { opacity: 1; transform: translateY(0); }
    .sp-nav-overlay.is-open .sp-nav__item:nth-child(1) { transition-delay: 0.10s; }
    .sp-nav-overlay.is-open .sp-nav__item:nth-child(2) { transition-delay: 0.16s; }
    .sp-nav-overlay.is-open .sp-nav__item:nth-child(3) { transition-delay: 0.22s; }
    .sp-nav-overlay.is-open .sp-nav__item:nth-child(4) { transition-delay: 0.28s; }
    .sp-nav-overlay.is-open .sp-nav__item:nth-child(5) { transition-delay: 0.34s; }
    .sp-nav-overlay.is-open .sp-nav__item:nth-child(6) { transition-delay: 0.40s; }
    .sp-nav-overlay.is-open .sp-nav__item:nth-child(7) { transition-delay: 0.46s; }
    .sp-nav-overlay.is-open .sp-nav__item:nth-child(8) { transition-delay: 0.52s; }

    /* ── リンク ───────────────────────────────────── */
    .sp-nav__link {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 18px 44px 18px 20px;
        font-size: 16px;
        font-weight: 400;
        letter-spacing: 0.08em;
        color: #1a3a5c;
        text-decoration: none;
        background: transparent;
        position: relative;
        box-sizing: border-box;
        width: 100%;
        transition: color 0.2s ease, background 0.2s ease;
    }
    .sp-nav__link:hover {
        color: var(--blue);
        background: rgba(26, 144, 208, 0.10);
        text-decoration: none;
    }
    .sp-nav__item.is-active > .sp-nav__link {
        color: var(--blue);
        font-weight: 600;
        background: rgba(26, 144, 208, 0.10);
    }

    /* ── サブメニュー展開矢印 ─────────────────────── */
    .sp-nav__chevron {
        display: block;
        position: absolute;
        right: 18px;
        top: 50%;
        width: 8px;
        height: 8px;
        border-right: 2px solid rgba(26, 144, 208, 0.55);
        border-bottom: 2px solid rgba(26, 144, 208, 0.55);
        transform: translateY(-65%) rotate(45deg);
        transition: transform 0.26s ease;
        pointer-events: none;
    }
    .sp-nav__item--has-sub.is-sub-open > .sp-nav__link .sp-nav__chevron {
        transform: translateY(-35%) rotate(-135deg);
    }

    /* ── サブメニュー（JS slideToggle で開閉） ─────── */
    .sp-nav__sub {
        display: none;
        list-style: none;
        margin: 0;
        padding: 0;
        background: rgba(26, 144, 208, 0.07);
    }
    .sp-nav__sub-item { border-top: 1px solid rgba(26, 144, 208, 0.15); }
    .sp-nav__sub-link {
        display: flex;
        align-items: center;
        padding: 13px 20px 13px 32px;
        font-size: 14px;
        font-weight: 400;
        color: #4a7a9a;
        text-decoration: none;
        letter-spacing: 0.04em;
        transition: color 0.2s ease, background 0.2s ease;
    }
    .sp-nav__sub-link:hover {
        color: var(--blue);
        background: rgba(26, 144, 208, 0.10);
        text-decoration: none;
    }

    /* ── その他モバイル調整 ──────────────────────── */
    .hero-wrap { overflow: visible; background: none; }
    .hero-wrap::before { display: none; }
    .slider-controls {
        padding: 10px 16px 14px;
        gap: 14px;
    }
    img.logo { width: 80px; }
    img.tel  { width: 150px; max-width: calc(100vw - 120px); }
    .content1 p.cen2 { float: none; margin: 12px auto 0; text-align: center; }
    .block4 { width: 46%; margin: 0 2% 14px; }
    .block5 { width: 46%; margin: 0 2% 12px; }
    .content2--cta { padding: 20px 16px; }
}

/* --- ≤600px: style.css のカルーセル切替に合わせた調整 ------ */
@media only screen and (max-width: 600px) {
    .slider-controls { padding: 8px 12px 12px; }
}

@media only screen and (max-width: 600px) {
    .hyo3 {
        max-width: 100%;
        padding: 0 12px;
    }
}

/* ============================================================
   Access Section — 会社概要・TOPページ共通
   ============================================================ */
.access-section {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 2px 16px rgba(0, 60, 120, 0.08);
    padding: 24px 28px 28px;
    margin: 0 0 24px;
    overflow: hidden;
}

.access-section h2 {
    color: #1a3a5c;
    font-size: 18px;
    font-weight: bold;
    background: none;
    border-left: none;
    border-bottom: 2px solid #1a90d0;
    padding: 0 0 8px 0;
    margin: 0 0 20px 0;
    text-align: left;
}

.access-section__body {
    display: flex;
    gap: 28px;
    align-items: stretch;
}

/* 左カラム：写真 ＋ アクセス情報 */
.access-section__info {
    flex: 0 0 36%;
    max-width: 36%;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.access-section__photo {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 8px;
    border: 3px solid #7ecae8;
}

/* 各拠点ブロック */
.access-section__office {
    background: #f0f7fc;
    border-radius: 8px;
    padding: 12px 14px;
}

.access-section__office-label {
    font-size: 13px;
    font-weight: bold;
    color: #1a90d0;
    margin-bottom: 7px;
    display: flex;
    align-items: center;
    gap: 7px;
}

.access-section__office-label::before {
    content: '';
    display: inline-block;
    width: 8px;
    height: 8px;
    background: #1a90d0;
    border-radius: 50%;
    flex-shrink: 0;
}

.access-section__office p {
    font-size: 12.5px;
    color: #444;
    line-height: 1.75;
    margin: 0 0 3px;
    padding: 0;
}

.access-section__office p:last-child { margin-bottom: 0; }

/* 右カラム：地図 */
.access-section__map {
    flex: 1;
    border-radius: 8px;
    overflow: hidden;
    border: 3px solid #7ecae8;
    min-height: 340px;
}

.access-section__map iframe {
    width: 100%;
    height: 100%;
    min-height: 340px;
    display: block;
    border: none;
}

/* モバイル */
@media only screen and (max-width: 768px) {
    .access-section__body { flex-direction: column; gap: 20px; }
    .access-section__info { flex: none; max-width: 100%; width: 100%; }
    .access-section__map { min-height: 260px; }
    .access-section__map iframe { min-height: 260px; }
}

@media only screen and (max-width: 600px) {
    .access-section { padding: 18px 16px 22px; border-radius: 8px; margin-bottom: 16px; }
}

.misumi {
    width: 100% !important;
}
.misumi>a {
    width: 100% !important;
}
.misumi>a>img {
    width: 100% !important;
    max-width: 100% !important;
    margin-top: 16px;
    filter: brightness(1.06) !important;
}

/* misumi 画像は hover 時も薄くしない */
.misumi>a:hover>img {
    opacity: 1 !important;
    filter: brightness(1.06) !important;
}