@charset "UTF-8";

/* ===================================================
   新星電機 ＋ Oltanaトップページ統一 固定ページ用共通CSS
   ※ブロックを配置するだけで自動的にデザインが適用されます
   =================================================== */

/* --- カラー定義 --- */
:root {
    --shinsei-blue: #004b93; /* メインカラーの濃いブルー */
    --shinsei-light-blue: #f2f7fc; /* 薄いブルー（背景やテーブル用） */
    --shinsei-border: #e0e0e0; /* 境界線グレー */
}

/* ===================================================
   0. 不要なタイトルの非表示
   =================================================== */

/* デフォルトの固定ページタイトルを非表示（カバーブロックで代用するため） */
body.page .ol-article__title,
body.page .ol-article__meta,
body.page h1.wp-block-post-title {
    display: none !important;
}

/* ===================================================
   1. 見出し (Headings) - クラス入力不要で自動適用
   =================================================== */

/* ページ全体のカウンター（H2の番号用）をリセット */
body.page, .editor-styles-wrapper {
    counter-reset: custom-h2-counter;
}

/* --- H2の基本デザイン (Oltanaトップページ風・装飾なし・細字) --- */
body.page h2.wp-block-heading:not(.c-heading-number):not(.u-style-reset),
.editor-styles-wrapper h2.wp-block-heading:not(.c-heading-number):not(.u-style-reset) {
    font-size: clamp(1.3125rem, 1.2138878744rem + 0.438276114vw, 1.6875rem) !important;
    font-weight: 300 !important; /* Oltana特有のスタイリッシュな細字 */
    line-height: 1.5 !important;
    letter-spacing: 0.18rem !important; /* Oltana特有の広い文字間隔 */
    color: #333 !important; 
    padding: 0 !important; 
    border: none !important; 
    margin-top: clamp(40px, 4vw, 50px) !important; /* 余白縮小 */
    margin-bottom: clamp(20px, 2vw, 30px) !important; /* 余白縮小 */
    background-color: transparent !important;
}
@media (min-width: 1729px) {
    body.page h2.wp-block-heading:not(.c-heading-number):not(.u-style-reset),
    .editor-styles-wrapper h2.wp-block-heading:not(.c-heading-number):not(.u-style-reset) {
        font-size: clamp(1.6875rem, -0.9834577755rem + 2.4716786818vw, 3.1875rem) !important;
    }
}

/* --- Oltanaトップページ完全再現 (左:大きな英語、右:小さな日本語) --- */
/* クラス名: c-heading-oltana */
/* グループブロックの内部構造の違いを吸収して強制的に横並びにする */
.c-heading-oltana,
.c-heading-oltana > .wp-block-group__inner-container {
    display: flex !important;
    flex-direction: row !important; /* 横並びにする */
    align-items: baseline !important; /* 英語と日本語の「文字の下のライン」を綺麗に揃える */
    flex-wrap: wrap !important; /* はみ出した場合の保険 */
    gap: 20px !important; /* 英語と日本語の隙間 */
    margin-top: 1.5rem !important; /* 余白を大幅に縮小 */
    margin-bottom: 1rem !important; /* 余白を大幅に縮小 */
    border: none !important;
    padding: 0 !important;
    background: transparent !important;
}

/* スマホ閲覧時（画面が狭い場合）は縦並びにする */
@media (max-width: 640px) {
    .c-heading-oltana,
    .c-heading-oltana > .wp-block-group__inner-container {
        flex-direction: column !important; /* 縦並び */
        align-items: flex-start !important; /* 左寄せ */
        gap: 8px !important; /* 隙間を狭く */
    }
}

/* グループ内の英語 (段落ブロック / 左側の大きな文字) */
.c-heading-oltana p {
    font-size: clamp(2rem, 4vw, 3.5rem) !important; /* ★英語のサイズ設定（H2用） */
    font-family: 'Jost', sans-serif !important;
    font-weight: 400 !important;
    line-height: 1 !important;
    letter-spacing: 0.05em !important;
    color: #333 !important;
    margin: 0 !important;
    text-transform: uppercase !important; /* 自動で大文字に */
}

/* グループ内の日本語 (H2ブロック / 右側の小さな文字) */
.c-heading-oltana h2.wp-block-heading,
.c-heading-oltana h2 {
    font-size: clamp(0.9rem, 1.2vw, 1rem) !important; /* 小さく控えめに */
    font-weight: 500 !important;
    line-height: 1.5 !important;
    letter-spacing: 0.1em !important;
    color: #555 !important; /* 英語より少しだけ色を落としてメリハリをつける */
    margin: 0 !important;
    border: none !important;
    padding: 0 !important;
}

/* --- H2の特殊デザイン (追加CSSクラス: c-heading-number) --- */
/* 背景に大きな連番 + 黒い下線 */
.c-heading-number {
    position: relative !important;
    padding: 1.5rem 1rem 1.5rem 80px !important; /* スマホ向け余白 */
    border-bottom: 3px solid #000 !important;
    border-left: none !important;
    border-top: none !important;
    background-color: transparent !important;
    margin-top: 4rem !important;
    margin-bottom: 2rem !important;
    font-size: 1.5rem !important;
    font-weight: 700 !important;
    color: #333 !important;
    counter-increment: custom-h2-counter !important; /* 番号を+1する */
}
.c-heading-number::before {
    content: counter(custom-h2-counter, decimal-leading-zero) !important;
    font-family: 'Roboto', sans-serif !important;
    font-size: 6rem !important; /* スマホ向けサイズ */
    line-height: 1 !important;
    position: absolute !important;
    bottom: -0.8rem !important;
    left: 0 !important;
    color: #000 !important;
    z-index: -1 !important;
    display: block !important;
}
@media (min-width: 841px) {
    .c-heading-number {
        padding: 1.5rem 2rem 1.5rem 160px !important;
    }
    .c-heading-number::before {
        font-size: 10rem !important;
        bottom: -1.6rem !important;
    }
}

/* --- H3の基本デザイン (黒太枠＋下に斜めの切り込み) --- */
body.page h3.wp-block-heading:not(.u-style-reset),
.editor-styles-wrapper h3.wp-block-heading:not(.u-style-reset) {
    position: relative !important;
    padding: 15px !important;
    border: 3px solid #333 !important;
    background-color: #fff !important;
    color: #333 !important;
    font-weight: bold !important;
    font-size: 26px !important;
    text-align: center !important;
    margin-top: 3rem !important;
    margin-bottom: 2.5rem !important; /* しっぽの装飾分、下余白を少し確保 */
}
body.page h3.wp-block-heading:not(.u-style-reset)::before,
.editor-styles-wrapper h3.wp-block-heading:not(.u-style-reset)::before {
    position: absolute !important;
    top: 100% !important;
    left: 50% !important;
    transform: translateX(-50%) skew(-25deg) !important;
    height: 25px !important;
    width: 15px !important;
    border-right: 3px solid #333 !important;
    background-color: #fff !important;
    content: "" !important;
    display: block !important;
}

/* --- H3の特殊デザイン (追加CSSクラス: c-heading-bg-en ) --- */
/* 背面に薄い手書き風英語を敷く見出し（グループブロック用） */
.c-heading-bg-en {
    position: relative !important;
    padding-top: 30px !important;
    padding-left: 15px !important;
    margin-top: 4rem !important;
    margin-bottom: 2rem !important;
    z-index: 1 !important;
    background: transparent !important;
    border: none !important;
}
/* グループ内の英語 (背面の薄い文字) */
.c-heading-bg-en p {
    position: absolute !important;
    top: -5px !important;
    left: 0 !important;
    font-family: 'Jost', sans-serif !important;
    font-size: clamp(2rem, 4vw, 3.5rem) !important;
    font-weight: 400 !important;
    font-style: italic !important;
    color: #e6ebf0 !important;
    margin: 0 !important;
    line-height: 1 !important;
    z-index: -1 !important;
    transform: rotate(-3deg) !important;
    white-space: nowrap !important;
    letter-spacing: 0.05em !important;
}
/* グループ内の日本語 (手前の見出し) */
body.page .c-heading-bg-en h3.wp-block-heading,
.editor-styles-wrapper .c-heading-bg-en h3.wp-block-heading,
body.page .c-heading-bg-en h3,
.editor-styles-wrapper .c-heading-bg-en h3 {
    position: relative !important;
    z-index: 2 !important;
    font-size: 1.75rem !important;
    font-weight: 700 !important;
    color: #333 !important;
    border: none !important; /* 黒枠線を完全に消す */
    background: transparent !important; /* 白背景を透明にする */
    padding: 0 !important;
    margin: 0 !important;
    text-align: left !important; /* 中央揃えを解除して左揃えに戻す */
}
/* 基本デザインのしっぽ(::before)装飾を打ち消す */
body.page .c-heading-bg-en h3.wp-block-heading::before,
.editor-styles-wrapper .c-heading-bg-en h3.wp-block-heading::before,
body.page .c-heading-bg-en h3::before,
.editor-styles-wrapper .c-heading-bg-en h3::before {
    display: none !important;
}

/* --- H4 (小見出し: 下線のみのシンプルな見出し) --- */
body.page h4.wp-block-heading,
.editor-styles-wrapper h4.wp-block-heading {
    font-size: 1.1rem !important;
    font-weight: 700 !important;
    color: #333 !important;
    padding-bottom: 0.5rem !important;
    border-bottom: 2px solid var(--shinsei-blue) !important;
    margin-top: 2rem !important;
    margin-bottom: 1rem !important;
    display: inline-block !important; /* 文字の長さだけの下線にする */
}


/* ===================================================
   2. ボタン (Buttons) - クラス入力不要で自動適用
   =================================================== */

/* コーポレート風ボタン: 紺色背景、右端に矢印アイコン */
body.page .wp-block-button__link,
.editor-styles-wrapper .wp-block-button__link {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    background-color: var(--shinsei-blue) !important;
    color: #fff !important;
    font-size: 1rem !important;
    font-weight: bold !important;
    border-radius: 3px !important;
    text-decoration: none !important;
    transition: background-color 0.3s ease !important;
    position: relative !important;
    width: 100% !important;
    max-width: 320px !important;
    margin: 0 auto !important;
    padding: 18px 40px 18px 20px !important;
    box-sizing: border-box !important;
}
body.page .wp-block-button__link::after,
.editor-styles-wrapper .wp-block-button__link::after {
    content: "" !important;
    position: absolute !important;
    right: 20px !important;
    top: 50% !important;
    transform: translateY(-50%) rotate(45deg) !important;
    width: 8px !important;
    height: 8px !important;
    border-top: 2px solid #fff !important;
    border-right: 2px solid #fff !important;
    transition: right 0.3s ease !important;
}
body.page .wp-block-button__link:hover,
.editor-styles-wrapper .wp-block-button__link:hover {
    background-color: #003366 !important;
}
body.page .wp-block-button__link:hover::after,
.editor-styles-wrapper .wp-block-button__link:hover::after {
    right: 15px !important;
}


/* ===================================================
   3. テーブル (Tables) - クラス入力不要で自動適用
   =================================================== */

/* カッチリした表デザイン */
body.page .wp-block-table:not(.c-table-history),
.editor-styles-wrapper .wp-block-table:not(.c-table-history) {
    margin-bottom: 2rem !important;
}
body.page .wp-block-table:not(.c-table-history) table,
.editor-styles-wrapper .wp-block-table:not(.c-table-history) table {
    width: 100% !important;
    border-collapse: collapse !important;
    font-size: 0.95rem !important;
}
body.page .wp-block-table:not(.c-table-history) th,
body.page .wp-block-table:not(.c-table-history) td,
.editor-styles-wrapper .wp-block-table:not(.c-table-history) th,
.editor-styles-wrapper .wp-block-table:not(.c-table-history) td {
    padding: 1.2rem !important;
    border: 1px solid var(--shinsei-border) !important;
    line-height: 1.6 !important;
}
body.page .wp-block-table:not(.c-table-history) th,
.editor-styles-wrapper .wp-block-table:not(.c-table-history) th {
    background-color: var(--shinsei-light-blue) !important;
    color: #333 !important;
    font-weight: bold !important;
    width: 25% !important;
    text-align: left !important;
    vertical-align: middle !important;
}
body.page .wp-block-table:not(.c-table-history) td,
.editor-styles-wrapper .wp-block-table:not(.c-table-history) td {
    background-color: #fff !important;
}
@media (max-width: 640px) {
    body.page .wp-block-table:not(.c-table-history) th,
    body.page .wp-block-table:not(.c-table-history) td,
    .editor-styles-wrapper .wp-block-table:not(.c-table-history) th,
    .editor-styles-wrapper .wp-block-table:not(.c-table-history) td {
        display: block !important;
        width: 100% !important;
    }
    body.page .wp-block-table:not(.c-table-history) th,
    .editor-styles-wrapper .wp-block-table:not(.c-table-history) th {
        border-bottom: none !important;
    }
}


/* ===================================================
   4. 【例外用】デザインを無効化したい場合の追加クラス
   =================================================== */

/* もし「この見出しだけは普通のデザインにしたい」という場合は、
   右側の追加CSSクラスに u-style-reset と入力してください */
body.page h2.wp-block-heading.u-style-reset,
.editor-styles-wrapper h2.wp-block-heading.u-style-reset,
body.page h3.wp-block-heading.u-style-reset,
.editor-styles-wrapper h3.wp-block-heading.u-style-reset,
body.page h4.wp-block-heading.u-style-reset,
.editor-styles-wrapper h4.wp-block-heading.u-style-reset {
    padding: 0 !important;
    border: none !important;
    background-color: transparent !important;
    margin-top: 2rem !important;
    margin-bottom: 1rem !important;
    font-size: 1.25rem !important;
}
body.page h2.wp-block-heading.u-style-reset::before,
.editor-styles-wrapper h2.wp-block-heading.u-style-reset::before {
    display: none !important;
}

body.page .wp-block-button__link.u-style-reset,
.editor-styles-wrapper .wp-block-button__link.u-style-reset {
    background-color: #333 !important;
    border-radius: 100px !important;
    width: auto !important;
    padding: 10px 24px !important;
}
body.page .wp-block-button__link.u-style-reset::after,
.editor-styles-wrapper .wp-block-button__link.u-style-reset::after {
    display: none !important;
}


/* ===================================================
   5. スクロールアニメーション (Animation)
   =================================================== */

/* 下からフワッと浮き上がる (追加CSSクラス: c-anim-fadeup ) */
.c-anim-fadeup {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94), transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* 左からフワッとスライド (追加CSSクラス: c-anim-fadeleft ) */
.c-anim-fadeleft {
    opacity: 0;
    transform: translateX(-30px);
    transition: opacity 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94), transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.c-anim-fadeup.is-visible,
.c-anim-fadeleft.is-visible {
    opacity: 1;
    transform: translate(0, 0);
}

/* エディター上ではアニメーションを無効化（透明にならず常に表示させる） */
body.block-editor-page .c-anim-fadeup,
body.block-editor-page .c-anim-fadeleft,
.editor-styles-wrapper .c-anim-fadeup,
.editor-styles-wrapper .c-anim-fadeleft {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
}


/* ===================================================
   6. 画像装飾・ボックス (Images & Boxes)
   =================================================== */

/* 右下が丸く欠けた画像スタイル (追加CSSクラス: c-img-radius-br ) */
.c-img-radius-br,
.c-img-radius-br img {
    border-bottom-right-radius: clamp(45px, 3vw, 90px) !important;
}

/* 画像全体を正方形にして右下だけ丸くする (追加CSSクラス: c-img-square-radius-br ) */
.c-img-square-radius-br,
.c-img-square-radius-br img {
    border-bottom-right-radius: clamp(45px, 3vw, 90px) !important;
    aspect-ratio: 1 / 1 !important;
    object-fit: cover !important;
}

/* 薄いグレー背景のシンプルな情報ボックス (追加CSSクラス: c-box-shinsei ) */
.c-box-shinsei {
    background-color: #f9f9f9 !important;
    padding: 2rem !important;
    border: 1px solid var(--shinsei-border) !important;
    border-radius: 4px !important;
    margin-top: 2rem !important;
    margin-bottom: 2rem !important;
}


/* ===================================================
   7. ヒーローヘッダー (カバーブロック用)
   =================================================== */

/* カバーブロックに追加CSSクラス「 c-hero-header 」を設定 */
.c-hero-header {
    width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    max-width: 100vw !important;
    min-height: 45vh !important; /* 高さを少し高めに調整 */
    border-radius: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 5rem !important; /* 下の余白を少し広めに */
    /* ★左上と右下を斜めにカット（虫食い風） */
    clip-path: polygon(8vw 0, 100% 0, 100% calc(100% - 8vw), calc(100% - 8vw) 100%, 0 100%, 0 8vw) !important;
}

/* スマホ閲覧時の斜めカットの角度・高さ調整 */
@media (max-width: 640px) {
    .c-hero-header {
        clip-path: polygon(40px 0, 100% 0, 100% calc(100% - 40px), calc(100% - 40px) 100%, 0 100%, 0 40px) !important;
        min-height: 35vh !important;
    }
}

.c-hero-header .wp-block-cover__inner-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
}
.c-hero-header h1 {
    color: #fff !important;
    font-size: clamp(2rem, 3.5vw, 3rem) !important;
    font-weight: 700 !important;
    margin-bottom: 0.5rem !important;
    letter-spacing: 0.15rem !important;
    text-shadow: 0 2px 6px rgba(0,0,0,0.6) !important;
    border: none !important;
    background: transparent !important;
    padding: 0 !important;
}
.c-hero-header p.c-hero-sub {
    color: #fff !important;
    font-size: clamp(0.9rem, 1vw, 1.1rem) !important;
    letter-spacing: 0.2rem !important;
    text-transform: uppercase !important;
    text-shadow: 0 2px 6px rgba(0,0,0,0.6) !important;
    margin: 0 !important;
}


/* ===================================================
   8. 沿革・タイムライン (History / Timeline)
   =================================================== */

/* --- パターンA: 沿革テーブル (シンプルな罫線レイアウト) --- */
/* テーブルブロックに追加CSSクラス「 c-table-history 」を設定 */
body.page .wp-block-table.c-table-history,
.editor-styles-wrapper .wp-block-table.c-table-history {
    margin-bottom: 3rem !important;
}
body.page .wp-block-table.c-table-history table,
.editor-styles-wrapper .wp-block-table.c-table-history table {
    width: 100% !important;
    border-collapse: collapse !important;
    border-top: 2px solid var(--shinsei-blue) !important; /* 上部に太い青線 */
    border-bottom: 2px solid var(--shinsei-blue) !important; /* 下部に太い青線 */
}
body.page .wp-block-table.c-table-history td,
.editor-styles-wrapper .wp-block-table.c-table-history td {
    padding: 1.5rem 1rem !important;
    border-top: 1px solid var(--shinsei-border) !important;
    border-bottom: 1px solid var(--shinsei-border) !important;
    border-left: none !important;
    border-right: none !important;
    background-color: transparent !important;
    line-height: 1.8 !important;
}
/* 左側の列（年号）の装飾 */
body.page .wp-block-table.c-table-history td:first-child,
.editor-styles-wrapper .wp-block-table.c-table-history td:first-child {
    font-weight: 700 !important;
    width: 25% !important;
    color: #333 !important;
    vertical-align: top !important; /* 上揃え */
}
/* スマホ閲覧時は縦積みにする */
@media (max-width: 640px) {
    body.page .wp-block-table.c-table-history td,
    .editor-styles-wrapper .wp-block-table.c-table-history td {
        display: block !important;
        width: 100% !important;
    }
    body.page .wp-block-table.c-table-history td:first-child,
    .editor-styles-wrapper .wp-block-table.c-table-history td:first-child {
        border-bottom: none !important;
        padding-bottom: 0.2rem !important;
        color: var(--shinsei-blue) !important; /* スマホでは色をつけて分かりやすく */
    }
    body.page .wp-block-table.c-table-history td:last-child,
    .editor-styles-wrapper .wp-block-table.c-table-history td:last-child {
        padding-top: 0 !important;
    }
}

/* --- パターンB: 縦線タイムライン (リストブロックを使用) --- */
/* リストブロックに追加CSSクラス「 c-timeline 」を設定 */
body.page ul.c-timeline,
.editor-styles-wrapper ul.c-timeline {
    list-style: none !important;
    padding-left: 0 !important;
    position: relative !important;
    margin-top: 2rem !important;
    margin-bottom: 3rem !important;
}
/* 縦線の描画 */
body.page ul.c-timeline::before,
.editor-styles-wrapper ul.c-timeline::before {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    bottom: 0 !important;
    left: 7px !important; /* 丸の中央に合わせる */
    width: 2px !important;
    background-color: var(--shinsei-light-blue) !important; /* 薄い青の線 */
}
body.page ul.c-timeline li,
.editor-styles-wrapper ul.c-timeline li {
    position: relative !important;
    padding-left: 2.5rem !important;
    margin-bottom: 2.5rem !important;
    line-height: 1.8 !important;
}
/* 丸ポチの描画 */
body.page ul.c-timeline li::before,
.editor-styles-wrapper ul.c-timeline li::before {
    content: "" !important;
    position: absolute !important;
    left: 0 !important;
    top: 0.3rem !important;
    width: 16px !important;
    height: 16px !important;
    border-radius: 50% !important;
    background-color: var(--shinsei-blue) !important;
    box-shadow: 0 0 0 4px #fff !important; /* 縦線を白でくり抜く */
}
/* タイムライン内の太字を年号っぽく装飾 */
body.page ul.c-timeline li strong,
.editor-styles-wrapper ul.c-timeline li strong {
    display: inline-block !important;
    font-size: 1.1rem !important;
    color: var(--shinsei-blue) !important;
    margin-right: 1.5rem !important;
    min-width: 80px !important;
}
@media (max-width: 640px) {
    body.page ul.c-timeline li strong,
    .editor-styles-wrapper ul.c-timeline li strong {
        display: block !important;
        margin-bottom: 0.2rem !important;
    }
}

/* --- パターンC: 横スクロール型タイムライン --- */
/* ※エディターでの編集を妨げないよう、表側(body.page)のみに適用します */
body.page ul.c-timeline-horizontal {
    display: flex !important;
    flex-wrap: nowrap !important; /* 折り返しを禁止して横に並べる */
    overflow-x: auto !important; /* はみ出した部分はスクロール可能にする */
    padding-bottom: 1.5rem !important; /* スクロールバー用の下部余白 */
    padding-left: 0 !important;
    margin-top: 3rem !important;
    margin-bottom: 3rem !important;
    list-style: none !important;
    -webkit-overflow-scrolling: touch !important; /* スマホで滑らかにスクロールさせる */
    gap: 0 !important;
}

/* デフォルトのリストマーカーやテーマの装飾を確実に消す */
body.page ul.c-timeline-horizontal li::marker {
    display: none !important;
    content: "" !important;
}
body.page ul.c-timeline-horizontal::before {
    display: none !important;
}

body.page ul.c-timeline-horizontal li {
    flex: 0 0 280px !important; /* 各ブロックの横幅を固定する（お好みで変更可能） */
    position: relative !important;
    padding-top: 2.5rem !important; /* 丸とテキストの間の余白を少し広げる */
    padding-right: 2.5rem !important;
    padding-left: 0 !important;
    margin-bottom: 0 !important;
    margin-top: 0 !important; /* ★最初の要素だけズレる原因(テーマの干渉)をリセット */
    font-size: 0.95rem !important;
    list-style-type: none !important;
}

/* 横線の描画（各要素から右に向かって線を引く） */
body.page ul.c-timeline-horizontal li::after {
    content: "" !important;
    position: absolute !important;
    top: 8px !important; /* 丸の中心（18pxの半分=9px）から線の高さの半分（1px）を引いた位置 */
    left: 9px !important; /* 丸の中心から右に線を伸ばす */
    width: 100% !important;
    height: 2px !important;
    background-color: var(--shinsei-light-blue) !important;
    z-index: 1 !important;
}

/* 最後の要素は右に伸ばす線を消す */
body.page ul.c-timeline-horizontal li:last-child::after {
    display: none !important;
}

/* 丸ポチの描画 */
body.page ul.c-timeline-horizontal li::before {
    content: "" !important;
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    width: 18px !important;
    height: 18px !important;
    border-radius: 50% !important;
    background-color: var(--shinsei-blue) !important;
    border: 4px solid #fff !important; /* 確実にフチを描画 */
    box-sizing: border-box !important; /* borderをサイズ内に含める */
    z-index: 2 !important; /* 横線より上に配置 */
    display: block !important;
}

/* 年号の装飾（リスト内の太字部分） */
body.page ul.c-timeline-horizontal li strong {
    display: block !important;
    font-size: 1.25rem !important;
    color: var(--shinsei-blue) !important;
    margin-bottom: 0.5rem !important;
}

/* （おまけ）スクロールバーのデザインを細くスッキリさせる */
body.page ul.c-timeline-horizontal::-webkit-scrollbar {
    height: 6px;
}
body.page ul.c-timeline-horizontal::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 4px;
}
body.page ul.c-timeline-horizontal::-webkit-scrollbar-thumb {
    background: var(--shinsei-border);
    border-radius: 4px;
}

/* ===================================================
   9. ギャラリー (自動スライダー化)
   =================================================== */

/*
 【作り方】
 1. 「グループ」ブロックを追加し、追加CSSクラスに c-gallery-slider-wrap を設定する。
 2. そのグループブロックの中に「ギャラリー」ブロックを追加する。（無限ループさせるため同じ画像を2セット並べる）
*/

/* 1. 外枠（グループブロック）ではみ出しを隠し、画面いっぱいに広げる */
body.page .c-gallery-slider-wrap {
    width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    max-width: 100vw !important;
    overflow: hidden !important; /* ここがマーキーアニメーションのキモです */
    padding: 3rem 0 !important;
}

/* 2. 内側のギャラリーブロックを横並びにして動かす */
body.page .c-gallery-slider-wrap .wp-block-gallery {
    display: flex !important;
    flex-wrap: nowrap !important;
    width: max-content !important; /* 画像の総幅に合わせる */
    animation: marquee-gallery 40s linear infinite !important; /* 画像が大きくなったので、30秒から40秒に変更して少しゆっくり流す */
    gap: 30px !important; /* ★トップページに合わせて画像同士の隙間を広げる */
    margin: 0 !important;
}

/* マウスホバーで一時停止 */
body.page .c-gallery-slider-wrap .wp-block-gallery:hover {
    animation-play-state: paused !important;
}

/* 各画像の設定 */
body.page .c-gallery-slider-wrap figure.wp-block-image {
    width: clamp(280px, 25vw, 400px) !important; /* ★トップページに合わせて1枚の画像を大きくする */
    flex: 0 0 auto !important;
    margin: 0 !important;
}
body.page .c-gallery-slider-wrap figure.wp-block-image img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    border-radius: 0 !important; /* 全体の角丸を一度リセット */
    border-bottom-right-radius: clamp(45px, 3vw, 90px) !important; /* ★トップページと同じ、右下だけの大きな角丸 */
    aspect-ratio: 1 / 1 !important; /* ★トップページと同じ正方形の比率にする */
}

/* 横に流れるアニメーション定義 */
@keyframes marquee-gallery {
    0% { transform: translateX(0); }
    100% { transform: translateX(calc(-50% - 15px)); } /* 隙間(gapの半分)を考慮してループ位置を微調整 */
}

/* ===================================================
   10. ヘッダー＆ナビゲーション関連の調整
   =================================================== */

/* PC版のヘッダーメニューの文字サイズとフォントを新星電機風に調整する */
@media (min-width: 841px) {
  /* ul要素ではなく、リンクのaタグに直接CSSを当てるのがポイントです */
  .ol-header__nav-anchor {
    font-family: 'Jost', sans-serif !important; /* フォントをJostに */
    font-size: 16px !important; /* Oltanaデフォルトの極小サイズから大きく変更 */
    font-weight: 500 !important; /* 少しだけ太くして視認性を上げる */
    letter-spacing: 0.1em !important; /* 字間を広げてスタイリッシュに見せる */
  }
}

/* スマホ版（ハンバーガーメニュー展開時）の縦並びとデザイン調整 */
@media (max-width: 840px) {
  /* メニューのリスト全体を強制的に縦並びにする */
  .ol-header__nav-list {
    display: flex !important;
    flex-direction: column !important; /* ここで縦並びに指定 */
    align-items: center !important; /* 画面の中央に揃える */
    gap: 25px !important; /* メニュー同士の上下の隙間（お好みで調整してください） */
    width: 100% !important;
    padding-top: 2rem !important; /* 上部の余白 */
    margin: 0 !important;
  }
  
  /* 各リストの項目を横幅いっぱいにする */
  .ol-header__nav-list li {
    width: 100% !important;
    text-align: center !important;
  }
  
  /* リンクの文字サイズとフォント調整 */
  .ol-hamburger__menu-icon.is-open ~ .ol-header__nav .ol-header__nav-anchor,
  .ol-header__nav-anchor {
    font-family: 'Jost', sans-serif !important;
    font-size: 18px !important;
    letter-spacing: 0.1em !important;
    display: block !important; /* タップしやすいようにブロック化 */
    padding: 10px 0 !important;
  }
}

/* ===================================================
   11. トップページ特有の調整 (Aboutセクション)
   =================================================== */

/* メインビジュアルの文字装飾（一行ごとの背景色でハイライト） */
.ol-banner__title,
.ol-banner__desc {
    display: inline !important;
    background-color: rgba(0, 40, 80, 0.7) !important;
    color: #ffffff !important;
    padding: 0.4rem 0.8rem !important;
    line-height: 1.9 !important;
    box-decoration-break: clone !important;
    -webkit-box-decoration-break: clone !important;
}

/* ★「信和電機工業はこんなところ」(#olConcept) エリアのレイアウト調整 */
body.page #olConcept {
    position: relative !important;
    overflow: hidden !important; /* 背景SVGのはみ出しを隠す */
    z-index: 1 !important;
}

/* 1. コンテンツエリア全体を全幅（100%）に広げる */
body.page #olConcept .ol-concept__content,
body.page #olConcept .ol-concept__content-inner {
    width: 100% !important;
    max-width: 100% !important;
    position: relative !important;
}

/* 2. 回転するSVG（.ol-concept__deco-wrapper）を完全に背景に落とす */
body.page #olConcept .ol-concept__deco-wrapper {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 0 !important; /* 背景へ */
    opacity: 0.1 !important; /* 薄く透かす */
    pointer-events: none !important;
}
body.page #olConcept .ol-concept__deco-wrapper svg {
    width: 1000px !important;
    height: 1000px !important;
    max-width: 150vw !important;
    max-height: 150vw !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
}

/* 3. 見出しと本文の箱を手前（z-index: 2）に出す */
body.page #olConcept .ol-concept__heading-wrapper,
body.page #olConcept .ol-concept__content-copy {
    position: relative !important;
    z-index: 2 !important;
    width: 100% !important;
}
body.page #olConcept .ol-concept__heading-wrapper {
    margin-bottom: 2rem !important;
}

/* ===================================================
   ★ここが重要：同じ箱（pタグ）の中にある写真と文字を分ける
   =================================================== */

/* --- PC版 (841px以上): 写真を左に、文字を右に回り込ませる --- */
@media (min-width: 841px) {
    /* 同じ <p> タグの中にある画像を左に寄せて、文字を右に流す */
    body.page #olConcept .ol-concept__description img {
        float: left !important; /* ← これが同じ箱の中で左に寄せる魔法です */
        width: 48% !important; /* 左半分の幅 */
        margin-right: 4% !important; /* 写真と文字の隙間 */
        margin-bottom: 2rem !important;
        border-radius: 8px !important;
        box-shadow: 0 4px 20px rgba(0,0,0,0.15) !important;
    }
    /* 写真の回り込みが次のエリアに影響しないようにする処理 */
    body.page #olConcept .ol-concept__description::after {
        content: "";
        display: block;
        clear: both;
    }
}

/* --- スマホ表示 (840px以下): 上が写真、下がテキスト --- */
@media (max-width: 840px) {
    body.page #olConcept .ol-concept__description img {
        float: none !important; /* スマホでは左寄せを解除 */
        display: block !important;
        width: 100% !important;
        margin: 0 0 1.5rem 0 !important;
        border-radius: 4px !important;
    }
}


/* ===================================================
   12. サイト全体の余白（マージン・パディング）の縮小調整
   =================================================== */

/* トップページを含む、全ページのセクション余白を縮小（画面幅に合わせて可変） */
.ol-section,
.editor-styles-wrapper .ol-section {
    /* 最小60px 〜 最大100px の間で滑らかに可変 */
    margin-top: clamp(60px, 10vw, 100px) !important; 
    margin-bottom: clamp(60px, 10vw, 100px) !important;
    /* パディングも可変にまとめてスッキリさせます */
    padding-top: clamp(2.5rem, 5vw, 4rem) !important; 
    padding-bottom: clamp(2.5rem, 5vw, 4rem) !important;
}

/* 超ワイド画面（1729px以上）の場合の余白も大幅に縮小 */
@media (min-width: 1729px) {
    .ol-section,
    .editor-styles-wrapper .ol-section {
        margin-top: clamp(100px, 8vw, 150px) !important;
        margin-bottom: clamp(100px, 8vw, 150px) !important;
    }
}


/* ===================================================
   13. 採用情報エリア（Productセクション）の背景色調整
   =================================================== */

/* 1. セクション全体を100%の濃い青（--shinsei-blue）で直接塗りつぶす */
body.page #ol-section-product {
    background-color: var(--shinsei-blue) !important;
    opacity: 1 !important;
}

/* 薄い色を塗っていた原因である裏側のフィルムを完全に消滅させる */
body.page #ol-section-product::before,
body.page #ol-section-product::after {
    display: none !important;
}

/* 2. 文字が乗っている箱が白っぽくなるのを防ぐため、後ろの背景色と同じ色で塗りつぶす */
body.page #ol-section-product .ol-product__content {
    background-color: var(--shinsei-blue) !important; /* 後ろの背景色と同じ色で塗る */
    opacity: 1 !important; /* 透過を無くす */
}

/* 箱の裏にある見えないフィルター（もしあれば）も消しておく */
body.page #ol-section-product .ol-product__content::before,
body.page #ol-section-product .ol-product__content::after {
    display: none !important;
}

/* 3. 背景が濃い青になるため、見出しや本文の文字色をすべて「白」にして読みやすくする */
body.page #ol-section-product .ol-product__content,
body.page #ol-section-product .ol-product__content h3,
body.page #ol-section-product .ol-product__content p {
    color: #ffffff !important;
}

/* 「採用情報」という薄い背景英語（deco-text）は濃い青に合うように少し透けた白に調整 */
body.page #ol-section-product .ol-product__deco-text {
    color: rgba(255, 255, 255, 0.15) !important;
}


/* ===================================================
   14. 固定ページで呼び出したセクションの全幅化
   =================================================== */

/* ショートコードで呼び出した採用情報エリアを、固定ページの枠を無視して画面いっぱいに広げる */
body.page #ol-section-product {
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
}


/* ===================================================
   15. メインビジュアルのドロップシャドウ（完全特定版）
   =================================================== */

/* デベロッパーツールで特定していただいた「ol-firstview」系のクラスに直接影をかけます！ */
body .ol-firstview__title-subcopy,
body .ol-firstview__title-maincopy,
body .ol-firstview__title-maincopy1,
body .ol-firstview__title-maincopy2,
body .ol-firstview__title-maincopy3,
body .ol-firstview__title {
    /* 白い文字が背景に埋もれないように、黒くて濃い自然な影を設定 */
    text-shadow: 2px 2px 5px rgba(0, 0, 0, 1) !important;
}


/* ===================================================
   16. 電話番号のスタイル調整
   =================================================== */

/* 企業概要などの電話番号リンクを太く、色を濃く目立たせる */
body .ol-contact-phone-number,
body a.ol-contact-phone-number {
    font-weight: bold !important; /* 太字に */
    color: var(--shinsei-blue) !important; /* メインカラーの濃い青に変更 */
    font-size: 1.15em !important; /* 少しだけ大きくして押しやすくする */
}