/* ==========================================================================
   OPACRAFT Base Style System
   Concept: Intellectual Integrity & Modern Safety
   20260224 K.Uono
   ========================================================================== */

:root {
    /* Color & Layout */
    --opa-blue: #011976;
    --text-main: #2c313d;
    --content-width: 800px;

    /* --- 修正ポイント：サイズと行間の再定義 --- */
    --font-size-body: 1.2rem;       /* 19px〜20px相当にアップ */
    --font-size-h2: 1.85rem;        /* 本文との対比を維持 */
    --font-size-h3: 1.45rem;
    --line-height-body: 1.9;        /* 行間をさらに広げて「白」を活かす */
    --letter-spacing: 0.03em;       /* わずかに文字間を広げ、読み飛ばしを防ぐ */
}

/* --- 1. Global Reset & Base --- */
body {
    font-family: var(--font-sans); /* 基本はゴシック */
    color: var(--text-main);
    line-height: var(--line-height-body);
    -webkit-font-smoothing: antialiased;
}
/* トップページ専用：bodyレベルでの強制マージン */
body.page-template-home {
    display: flex;
    flex-direction: column;
    align-items: center; /* 子要素を中央に寄せる */
    background-color: #ffffff; /* 背景色 */
}

/* bodyの直下にある主要な要素をすべて幅制限する */
body.page-template-home > header,
body.page-template-home > main,
body.page-template-home > div,
body.page-template-home > footer,
body.page-template-home > section {
    width: 100%;
    max-width: 1200px; /* 自動車メーカーサイトに近い、ゆとりある幅 */
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box;
    padding-left: 5vw;  /* スマホや中画面で端にくっつくのを防ぐ */
    padding-right: 5vw;
}
/* 本文記事エリア（新聞のような読み心地） */
.entry-content, .postPage, .singleHonbun {
    max-width: var(--content-width);
    margin: 0 auto;
    padding: 2.5rem 1.25rem;
    
    font-family: var(--font-serif);
    font-size: var(--font-size-body);
    line-height: var(--line-height-body);
    letter-spacing: var(--letter-spacing);
    color: var(--text-main);
    
    /* 明朝体を少しだけ「くっきり」させるためのヒント */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* --- 2. Typography & Semantics --- */
h2, h3, h4 { 
    font-family: var(--font-sans); 
    color: var(--opa-blue);
    line-height: 1.4;
    margin-top: 2.5em;
    margin-bottom: 1.2em;
}

h2 {
    font-size: var(--font-size-h2);
    border-left: 8px solid var(--opa-blue);
    background: var(--bg-light);
    padding: 0.75rem 1.5rem;
}

h3 {
    font-size: var(--font-size-h3);
    border-bottom: 2px solid var(--opa-blue);
    padding-bottom: 0.5rem;
}

/* 新聞スタイルの字下げ */
.entry-content p {
    text-indent: 1em;
    margin-bottom: 1.5em;
}

/* --- 3. Lists (Logic & Visual) --- */
.entry-content ul, .entry-content ol {
    margin: 1.5em 0 1.5em 1.5em;
    text-indent: 0; /* リスト内は字下げしない */
}

.entry-content li { margin-bottom: 0.5rem; }

/* --- 4. Components --- */
.marker-yellow { background: linear-gradient(transparent 60%, #ffffbc 0%); }
.marker-pink   { background: linear-gradient(transparent 60%, #ffdfef 0%); }
.marker-blue   { background: linear-gradient(transparent 60%, #99ccff 0%); }

/* --- 5. Mobile Optimization --- */
@media screen and (max-width: 768px) {
    :root {
        /* スマホでも「小さすぎない」ことを優先。17px〜18px相当 */
        --font-size-body: 1.1rem; 
        --line-height-body: 1.8;
    }
    .entry-content, .postPage, .singleHonbun {
        padding: 1.5rem 1.1rem;
    }
    
    h2 { font-size: 1.5rem; }
}

/* --- レイアウトの根幹 --- */

/* 1. ページ全体のラッパー（背景などを敷く場合） */
.site-main, .type-page, .type-post {
    width: 100%;
    overflow-x: hidden;
}

/* 2. コンテンツ・コンテナ */
.entry-content, 
.postPage, 
.singleHonbun,
.fixedPage-container,
p.topPage { /* 固定ページ用のクラスがあれば追加 */
    max-width: 900px;      /* 読みやすさの限界値（スバル safetyページ等もこの程度） */
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 5vw;     /* 画面端に文字がくっつくのを防ぐ */
    padding-right: 5vw;
    box-sizing: border-box;
}

/* 3. 画像の扱い（スバル流：画像だけは広く見せるテクニック） */
/* 本文幅を飛び出して「画面いっぱい」にしたい画像がある場合に使用 */
.alignfull {
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    max-width: 100vw;
    width: 100vw;
}
/* セクションごとの区切り（固定ページ用） */
.section-wrapper {
    padding: 100px 0; /* 上下のゆとり */
    border-bottom: 1px solid var(--border-gray);
}

.section-wrapper:nth-child(even) {
    background-color: #f9f9f9; /* 交互に薄いグレーを敷いてリズムを作る */
}

.section-inner {
    max-width: 900px;
    margin: 0 auto;
}

/* スマホ用の設定 */
@media screen and (max-width: 768px) {
    .entry-content, .postPage, .singleHonbun {
        padding-left: 20px;
        padding-right: 20px;
        max-width: 100%; /* スマホでは全幅 */
    }
    
    .section-wrapper {
        padding: 50px 0; /* スマホでは上下余白を少し詰める */
    }
}
/* 
 * 以下は、ホームページのハードコーディング対策 
 */

/* 1. indexPage自体を中央に固定し、はみ出しをカット /
#indexPage {
max-width: 1080px !important;
margin-left: auto !important;
margin-right: auto !important;
background: #fff !important;
overflow: hidden !important; / これが 100vw ハックを物理的に遮断します */
}

/* 2. セクション内の「全幅ハック」を論理的に解除 /
/ style.css の margin: 0 calc(50% - 50vw) を 0 に上書き */
#indexPage section,
#indexPage .bc-colorr,
#indexPage .waves,
#indexPage .column2Wrap-outside {
width: 100% !important;
max-width: 100% !important;
margin-left: 0 !important;
margin-right: 0 !important;
left: 0 !important;
}

/* 3. 内部コンテナの固定幅（1170px等）を親の1080pxに強制追従 */
#indexPage .container {
width: 100% !important;
max-width: 100% !important;
padding-left: 20px !important;
padding-right: 20px !important;
}

/* 4. 本文テキストのタイポグラフィ（日経・スバル流） */
#indexPage p,
#indexPage .topPage {
max-width: 750px !important;
margin-left: auto !important;
margin-right: auto !important;
line-height: 2.1 !important;
text-align: justify !important;
font-family: "Yu Mincho", "YuMincho", serif !important;
}
/* 価格見積・パンフレットタブの右端固定リセット */

.top-banner {
position: fixed !important;
right: 0 !important;   /* 画面の右端に固定 */
left: auto !important;  /* 左寄りを強制解除 */
top: 270px !important;  /* style.cssの指定位置を維持 */
z-index: 9999 !important; /* 最前面に表示 */
display: block !important;
width: 50px !important; /* style.cssの幅を明示的に維持 */
}

/* セクション間の余白調整（「ゆとり」の演出） */
#indexPage section {
padding-top: 70px !important;
padding-bottom: 70px !important;
margin: 0 !important;
}

/* appealエリア：タイトルの下線・装飾を完全にリセット */
#appealArea .top-titleh2,
#appealArea .top-titleh3,
#appealArea .titleWrap,
#appealArea .top-titleh2::before,
#appealArea .top-titleh2::after,
#appealArea .top-titleh3::before,
#appealArea .top-titleh3::after {
border: none !important;
background: none !important; /* 背景による線を消去 /
box-shadow: none !important;
content: none !important;   / 擬似要素による線を物理的に消去 */
padding-bottom: 0 !important;
margin-bottom: 10px !important;
}

/* 念押し：すべての中央揃えタイトルの下線を消す */
.top-titleh2.center,
.top-titleh3.center {
border: none !important;
}
h2.center::after,
h3.center::after {
display: none !important;
}