/* =========================================================
   Kakehashi Corporate Site - 横断レイアウト
   要件: 画面左を赤帯(PC10vw/モバイル7px)、残りを白。
   本文テキストは赤帯の右1文字ぶん空けた位置から左寄せで始まる。
   コンテンツの左右オフセットは theme.json のグローバルパディング
   (--wp--style--root--padding-left = calc(10vw + 1em)) で管理する。
   このCSSではテーマ機構を壊す打ち消しは行わない。
   ブランドカラー: ロゴ抽出色 #D81727
   ========================================================= */

:root {
    --kkh-red: #D81727;
    --kkh-red-dark: #B01220;
    --kkh-ink: #1E2129;
    --kkh-band-width: 10vw;
    --kkh-band-width-mobile: 7px;
    --kkh-gap: 1em; /* 赤帯の右にあける1文字ぶん */
}

html {
    overflow-x: hidden;
}

body {
    background-color: #FFFFFF;
    overflow-x: hidden;
}

/* 左の赤帯（画面全体を縦断・スクロールしても固定） */
body::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: var(--kkh-band-width);
    height: 100%;
    background-color: var(--kkh-red);
    z-index: 0;
    pointer-events: none;
}

.wp-site-blocks {
    position: relative;
    z-index: 1;
}

/* =========================================================
   動画メインビジュアル（ヒーロー）
   白地（赤帯の右）領域のセンター合わせ。赤帯は覆わない。
   グローバルパディング内の通常ブロックとして中央に置く。
   ========================================================= */
.kkh-hero {
    position: relative;
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
    overflow: hidden;
    background-color: #000;
    aspect-ratio: 16 / 9;
    max-height: 78vh;
}

.kkh-hero__video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.kkh-hero__copy {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 0.5em 1em;
    z-index: 2;
}

/* 3言語とも1行に収まるサイズ（改行させない） */
.kkh-hero__copy-text {
    color: #FFFFFF;
    font-weight: 700;
    letter-spacing: 0.04em;
    line-height: 1.4;
    font-size: clamp(1.1rem, 2.6vw, 2.4rem);
    text-shadow: 0 2px 18px rgba(0, 0, 0, 0.55);
    margin: 0;
    white-space: nowrap;
}

.kkh-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0.10) 0%, rgba(0,0,0,0.35) 100%);
    z-index: 1;
    pointer-events: none;
}

/* =========================================================
   セクション見出し（Concept / Our Business など）
   見出しは本文と同じ左端（赤帯右1文字）から始まる。
   赤い下線を左の赤帯まで伸ばして帯とひと続きに見せる。
   ========================================================= */
.kkh-section {
    padding-block: clamp(2.5rem, 6vw, 5rem);
}

.kkh-section__title {
    position: relative;
    color: var(--kkh-ink);
    line-height: 1.3;
    padding-bottom: 0.35em;
    margin-bottom: 0.8em;
}

/* 見出し左端(=赤帯右1em)から赤帯左端まで下線を伸ばす。
   左へ「赤帯幅 + 1em」ぶん伸ばし、赤帯に少し重ねる(+2px)。 */
.kkh-section__title::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: calc(-1 * (var(--kkh-band-width) + var(--kkh-gap)) - 2px);
    width: calc(100% + var(--kkh-band-width) + var(--kkh-gap) + 2px);
    height: 4px;
    background-color: var(--kkh-red);
}

/* =========================================================
   Access: Google Map 埋め込み
   ========================================================= */
.kkh-map {
    margin-top: 2rem;
}

.kkh-map iframe {
    width: 100%;
    height: 380px;
    border: 0;
    display: block;
}

/* =========================================================
   フロントページのタイトル「ホーム」は非表示（動画ヒーローが主役）
   ========================================================= */
.home .wp-block-post-title {
    display: none;
}

/* =========================================================
   ヘッダー: ロゴ + サイトタイトル
   ヘッダーグループは has-global-padding を持たないため、
   本文と同じ左オフセット(赤帯右1文字)を自前で与える。
   これでロゴ・タイトルが赤帯に突っ込まず、赤帯の右に並ぶ。
   ========================================================= */
.kkh-header.wp-block-group {
    box-sizing: border-box;
    padding-left: calc(var(--kkh-band-width) + var(--kkh-gap));
    padding-right: 5vw;
}

.wp-block-site-logo {
    margin-right: 0.4em;
}

.wp-block-site-logo img {
    max-height: 44px;
    width: auto;
}

/* ロゴ+タイトルの左グループ内の隙間を詰める */
.wp-block-site-title {
    margin: 0;
}

/* =========================================================
   Bogo 言語スイッチャー（ヘッダー内）
   並び順は functions.php のフィルタで 日本語→英語→中国語 に確定済み。
   ========================================================= */
.bogo-language-switcher {
    margin: 0;
    padding: 0;
}

.bogo-language-switcher ul {
    display: flex;
    flex-wrap: nowrap;
    gap: 0.15em;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0;
}

.bogo-language-switcher li {
    margin: 0;
}

.bogo-language-switcher a {
    display: inline-block;
    padding: 0.1em 0.4em;
    font-size: 0.8rem;
    line-height: 1.5;
    white-space: nowrap;
    text-decoration: none;
    color: var(--kkh-ink);
    border-radius: 4px;
}

.bogo-language-switcher a:hover {
    color: var(--kkh-red);
}

.bogo-language-switcher a.current {
    background-color: var(--kkh-red);
    color: #FFFFFF;
    font-weight: 700;
}

/* =========================================================
   フッター: 赤帯は覆わず右側を黒背景・白文字。
   黒背景の左端 = 赤帯の右端(10vw)、右端 = 画面右端。
   テーマのグローバルパディングを打ち消し、赤帯右端から画面右端まで自前で配置する。
   文字は黒背景左端からさらに1文字ぶん内側。
   ========================================================= */
.kkh-footer.wp-block-group {
    box-sizing: border-box;
    background-color: #000000;
    color: #FFFFFF;
    padding: 2.5rem var(--kkh-gap) 1.5rem var(--kkh-gap);
    /* 黒背景の左端を赤帯の右端(10vw)に合わせる。右は画面端まで自然に伸びる。
       footer には has-global-padding が付かないため単純に赤帯幅ぶん左マージン。 */
    margin-left: var(--kkh-band-width);
    width: auto;
}

.kkh-footer a {
    color: #FFFFFF;
    text-decoration: none;
}

.kkh-footer a:hover {
    text-decoration: underline;
}

.kkh-footer__nav ul {
    display: flex;
    flex-wrap: wrap;
    gap: 1.2em;
    list-style: none;
    margin: 0 0 1.2rem;
    padding: 0;
}

.kkh-footer__copyright {
    font-size: 0.8rem;
    color: #CCCCCC;
    margin: 0;
}

/* 方針リンク(Privacy Policy / Compliance Policy)は日本語ページのみ表示 */
.kkh-footer__policy {
    display: none;
}

html[lang="ja"] .kkh-footer__policy {
    display: inline-block;
}

/* =========================================================
   モバイル対応: 赤帯を細いアクセントラインに縮小
   theme.json のグローバル左パディングは calc(10vw + 1em) のままだが、
   モバイルでは赤帯を 7px にし、本文パディングも詰める。
   ========================================================= */
@media (max-width: 782px) {
    body::before {
        width: var(--kkh-band-width-mobile);
    }
    /* グローバル左パディングをモバイル用に上書き（赤帯7px + 1em相当） */
    .wp-site-blocks .has-global-padding,
    .wp-site-blocks > .wp-block-template-part > .has-global-padding {
        --wp--style--root--padding-left: calc(var(--kkh-band-width-mobile) + var(--kkh-gap));
    }
    .kkh-section__title::after {
        left: calc(-1 * (var(--kkh-band-width-mobile) + var(--kkh-gap)) - 2px);
        width: calc(100% + var(--kkh-band-width-mobile) + var(--kkh-gap) + 2px);
    }
    .kkh-hero__copy-text {
        white-space: normal;
        font-size: clamp(1rem, 5.2vw, 1.6rem);
    }
    .kkh-map iframe {
        height: 280px;
    }
    .kkh-footer.wp-block-group {
        margin-left: var(--kkh-band-width-mobile);
    }
    .kkh-header.wp-block-group {
        padding-left: calc(var(--kkh-band-width-mobile) + var(--kkh-gap));
        padding-right: 0.8em;
        /* モバイルでも1行に収める（折り返し禁止） */
        flex-wrap: nowrap !important;
        gap: 0.4em;
        column-gap: 0.4em;
    }
    /* ヘッダー内の左右グループが縮んで1行に収まるように */
    .kkh-header.wp-block-group > .wp-block-group {
        flex-wrap: nowrap !important;
        min-width: 0;
        gap: 0.3em;
    }
    /* ロゴをモバイル用に小さく */
    .kkh-header .wp-block-site-logo img {
        max-height: 32px;
    }
    .kkh-header .wp-block-site-logo {
        margin-right: 0.25em;
        flex: 0 0 auto;
    }
    /* サイトタイトルは縮小し、はみ出す場合は省略表示 */
    .kkh-header .wp-block-site-title {
        font-size: 0.9rem;
        line-height: 1.2;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .kkh-header .wp-block-site-title a {
        white-space: nowrap;
    }
    /* ナビ(ハンバーガー)と言語選択は縮まないように */
    .kkh-header .wp-block-navigation,
    .kkh-header .bogo-language-switcher {
        flex: 0 0 auto;
    }
    /* 言語スイッチャーをモバイルでさらにコンパクトに */
    .kkh-header .bogo-language-switcher a {
        padding: 0.05em 0.25em;
        font-size: 0.7rem;
    }
}