@charset "utf-8";

/* ==========================================================================
   言語表示切り替え（基本）
========================================================================== */
body:not(.is-en) .lang-en {
    display: none !important;
}

body.is-en .lang-ja {
    display: none !important;
}

/* ==========================================================================
   英語モード時のレイアウト調整 (共通)
========================================================================== */
/* 縦書き見出しの解除 */
body.is-en .section-title-vertical {
    writing-mode: horizontal-tb !important;
    flex-direction: column !important;
    align-items: center !important;
    margin-right: 0 !important;
    height: auto !important;
    text-align: center;
}

body.is-en .section-title-vertical h2 {
    margin: 0 0 5px 0 !important;
}

body.is-en .section-title-vertical .en-text {
    margin-top: 0 !important;
}

/* ==========================================================================
   ヘッダー (英語モード時の最適化)
========================================================================== */
@media (min-width: 992px) {
    body.is-en .navbar-nav .nav-link {
        writing-mode: horizontal-tb !important;
        font-size: 0.75rem !important; /* 文字を少し小さく */
        letter-spacing: 0.02em !important; /* 文字間隔を詰める */
        padding: 1.5rem 0 !important; 
    }
    body.is-en .navbar-nav .nav-item {
        margin-left: 1rem !important; /* メニュー同士の隙間を縮小 */
        align-self: center !important; 
    }
}

/* 左側のテキストロゴのサイズ調整（英語時の文字数による圧迫を防ぐ） */
body.is-en .navbar-brand-text .lang-en span:first-child { 
    font-size: 0.75rem !important; 
}
body.is-en .navbar-brand-text .lang-en .fs-4 { 
    font-size: 1.05rem !important; 
}


/* ==========================================================================
   トップページ
========================================================================== */
/* ヒーローエリアのリード文 */
body.is-en .hero-lead {
    writing-mode: horizontal-tb !important;
    height: auto !important;
    text-align: center;
    max-width: 800px;
    margin: 0 auto;
    text-align: left !important;
    line-height: 1.8 !important;
    letter-spacing: 0.03em !important;
}

/* HTML内の強制改行(<br>)を無効化して自然に折り返させる */
body.is-en .hero-lead br {
    display: none;
}
/* 段落の区切りとして、元の改行の位置に少しだけ余白をつける */
body.is-en .hero-lead {
    padding-bottom: 1rem;
}

/* ヒーローエリア（キャッチコピー） */
body.is-en .hero-catch.lang-en {
    writing-mode: horizontal-tb !important;
    width: 100%;
    margin-top: 2rem;
    margin-bottom: 2rem;
}

/* ==========================================================================
   コンセプトページ：Valuesエリア
========================================================================== */
/* 1. 親コンテナ（見出しと本文を囲む箱）を横並びから「縦並び」に強制変更 */
body.is-en #conceptValues .col-md-6.d-flex {
    flex-direction: column !important;
}

/* 2. 見出しの箱の「縦書き」を解除し、幅を100%に広げる */
body.is-en .concept-value-heading {
    writing-mode: horizontal-tb !important;
    width: 100% !important;
    margin-right: 0 !important;
    margin-left: 0 !important;
    margin-bottom: 1.5rem !important;
    border-bottom: none !important;
}

/* 英語見出しのフォントサイズと行間調整 */
body.is-en .concept-value-heading h3 {
    font-size: 1.5rem !important;
    line-height: 1.4 !important;
    letter-spacing: 0.05em !important;
}

/* 3. 本文の箱を幅100%にする */
body.is-en .concept-value-text {
    width: 100% !important;
}

/* 4. 【重要】2つ目のブロックの順番を入れ替える
   （日本語は右が見出しですが、英語は上を見出しにするため順番を強制リセット） */
body.is-en #conceptValues .concept-value-heading.order-md-2 {
    order: 1 !important;
}
body.is-en #conceptValues .concept-value-text.order-md-1 {
    order: 2 !important;
}