@media screen and (min-width: 769px) {
    .pc {
        display: block;
    }
    .sp {
        display: none;
    }
}
@media screen and (max-width: 768px) {
    .pc {
        display: none;
    }
    .sp {
        display: block;
    }
}

.text-center {
    text-align: center;
}
.text-left {
    text-align: left;
}
.text-right {
    text-align: right;
}


:root{
    /* 基準 */
    --hero-base-w: 1386px;
    --hero-h: 685px;      /* PC時は固定 620px */
  
    /* 調整値 */
    --notch-depth: 140px; /* PC時のV字の食い込み量（px） */
    --overlay-top: 100px;
    --overlay-bottom: 0px;
  }
  
  /* ===== ヒーロー土台（PC時：高さ固定） ===== */
  .hero-mask{
    position: relative;
    height: var(--hero-h);
    overflow: hidden;

  }
  
  /* 背景画像（PC時：高さ固定＋V字マスク） */
  .hero-mask__img{
    position: absolute;
    top: 50%;
    left: 50%;
    height: 100%;
    width: 100vw;
    min-width: var(--hero-base-w);
    object-fit: cover;
    object-position: center;
    transform: translate(-50%, -50%);
    clip-path: polygon(
      0 0,
      100% 0,
      100% calc(100% - var(--notch-depth)),
      50% 100%,
      0 calc(100% - var(--notch-depth))
    );
  }
  
  /* オーバーレイ（テキストSVGのレイヤ） */
  .hero-overlay{
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 2;
  }
  
  /* テキストSVG：最大1320px、以下は縮小。中央揃え */
  .hero-overlay__img{
    position: absolute;
    bottom: var(--overlay-bottom);
    left: 50%;
    transform: translateX(-50%);
  
    width: min(100vw, 1320px); /* ご指定の上限を尊重（必要なら1460pxへ） */
    height: auto;
  
    display: block;
    pointer-events: none;
    image-rendering: -webkit-optimize-contrast;
    -webkit-font-smoothing: antialiased;
  }
  
  /* ===== 1200px以下：V字を保持したまま“比率で縮む” ===== */
  /* 1386:620 の比率 → 高さ = 100vw * 0.4476 */
  @media (max-width: 1310px){
    .hero-mask{
      height: calc(100vw * 0.4476); /* 縦幅を比率で縮小 */
    }
    .hero-mask__img{
      /* 絶対配置のまま、V字も維持 */
      position: absolute;
      bottom: var(--overlay-bottom);
      left: 50%;
      transform: translate(-50%, -50%);
  
      width: 100vw;
      height: 100%;
      min-width: 0;
  
      /* モバイルは高さが可変になるため、V字の食い込みを“割合”で指定
         （PCの 140px/620px ≒ 22.6% に相当） */
      clip-path: polygon(
        0 0,
        100% 0,
        100% 77.4%,
        50% 100%,
        0 77.4%
      );
    }
  }
  
  @media (max-width: 1310px){

    /* テキストSVG（main_visual_TXT.svg）もヒーロー画像と同じ比率で縮小 */
    .hero-overlay__img{
      width: calc(100vw * 0.860); 
      /* 1320px ÷ 1386px = 約0.952
         → PC基準1320pxをヒーロー画像の幅比率と同じ縮小で連動させる */
      max-width: none;
    }
  }

  

  @media (max-width: 1200px){

    /* テキストSVG（main_visual_TXT.svg）もヒーロー画像と同じ比率で縮小 */
    .hero-overlay__img{
      width: calc(100vw * 0.800); 
      /* 1320px ÷ 1386px = 約0.952
         → PC基準1320pxをヒーロー画像の幅比率と同じ縮小で連動させる */
      max-width: none;
    }
  }
/*今が買い時の画像*/
  @media (min-width: 1201px){
  .catch_main_visual_catch {
    max-width: 550px; width: 80%; margin-top: 2%;
}
  }

@media (max-width: 1200px){

    .catch_main_visual_catch {
        max-width: 380px;  width: 50%; margin-top: 2%;
    }
  }

  .main_visual_bl_BG {
    background-image: url(../images/journal/main_visual_bl_BG.png);
    background-repeat: no-repeat;
    background-size: revert-layer;
    background-position: center bottom;
  }

  .main_visual_bl_BG_sp {
    background-image: url(../images/journal/main_visual_bl_BG_sp.png);
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: center bottom;
  }




  /* ===== tableWrap ===== */
  .tableWrap_outer{
    position: relative;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: left bottom;
  }
  .tableWrap_outer:before{
    content: '';
    aspect-ratio: 1920/100;
    width: 100%;
    height: auto;
    position: absolute;
    top: 0;
    left: 0;
  }
  .tableWrap{
    max-width:1386px;
    width: 100%;
    margin: 0 auto;
  }
  

  :root{
    /* セクション幅と斜めの深さ（上辺左が高く、右が低い＝左→右に下がる） */
    --page-max: 1200px;
    /* 斜めの食い込み量（画面に応じて自動）：最小40px〜最大120px */
    --skew-depth: clamp(40px, 6vw, 120px);
  
    /* セクション上下余白（中身） */
    --sec-pad-y: 72px;
    --sec-pad-x: 24px;
  
    /* イラストのはみ出し量（下へ） */
    --illust-overlap: 64px;
  
    /* カラー */
    --col-a: #ffffff;  /* 淡いブルー */
    --col-b: #f5fbf6;  /* 淡いグリーン */
    --ink:   #222;
  }
  
  /* 共通タイポ */
  .sec-ttl{ font: 700 22px/1.2 "Hiragino Kaku Gothic ProN", "Noto Sans JP", sans-serif; letter-spacing:.06em; color:var(--ink); margin-bottom: 8px;}
  .sec-lead{ font: 700 20px/1.6 "Noto Sans JP", sans-serif; letter-spacing:.12em; margin-bottom: 14px;}
  .sec-text{ font: 400 14px/2 "Noto Sans JP", sans-serif; color:#444; margin-bottom: 24px;}
  .sec-graph{ background:#fff; border-radius: 12px; box-shadow: 0 8px 20px rgba(0,0,0,.06); min-height: 160px;}
  
  /* ===============================
     斜め（菱形）セクション本体
     上辺: 左が深く・右が浅い
     下辺: 上辺と平行（左→右に下がる）
  ================================ */
/* 左上 → 右下へ下がる平行四辺形 */
/* 色の切り替え（背景色はCSS変数へ） */
.theme-a{ --sec-bg: #ffffff; }
.theme-b{ --sec-bg: #FFFBF7; }
.theme-c{ --sec-bg: #FFFEED; }

/* 左上→右下へ下がる平行四辺形（背景だけをクリップ） */
.diag-section{
  position: relative;
  overflow: visible;            /* ← はみ出しOK */
  isolation: isolate;           /* 子の z-index 管理を安定させる */

  /* 上にイラストが半分出るので上パディングを増やす。下は通常 */
  padding: calc(var(--sec-pad-y) + var(--illust-overlap)) var(--sec-pad-x)
           var(--sec-pad-y) var(--sec-pad-x);

  margin: 0;                    /* 余白リセット */
}

/* 斜めの背景は ::before で作成（子要素はクリップされない） */
.diag-section::before{
  content:"";
  position:absolute;
  inset:0;
  background: var(--sec-bg, #fff);
  z-index:-1;                   /* 背景を奥へ */
  clip-path: polygon(
    0 0,                                  /* 左上：一番上 */
    100% var(--skew-depth),               /* 右上：少し下げる */
    100% 100%,                            /* 右下：一番下 */
    0 calc(100% - var(--skew-depth))      /* 左下：右下より上に */
  );
}

/* セクション同士を密着させる（斜め分だけ重ねる） */
.diag-section + .diag-section{
  margin-top: calc(-1 * var(--skew-depth));
}

/* 左上→右下へ下がる平行四辺形（背景だけをクリップ） */
.diag-section_{
  position: relative;
  overflow: visible;            /* ← はみ出しOK */
  isolation: isolate;           /* 子の z-index 管理を安定させる */

  /* 上にイラストが半分出るので上パディングを増やす。下は通常 */
  padding: calc(var(--sec-pad-y) + var(--illust-overlap)) var(--sec-pad-x)
           var(--sec-pad-y) var(--sec-pad-x);

  margin: 0;                    /* 余白リセット */
}

/* 斜めの背景は ::before で作成（子要素はクリップされない） */
.diag-section_::before{
  content:"";
  position:absolute;
  inset:0;
  background: var(--sec-bg, #fff);
  z-index:-1;                   /* 背景を奥へ */
  clip-path: polygon(
    0 0,                                  /* 左上：一番上 */
    100% var(--skew-depth),               /* 右上：少し下げる */
    100% 100%,                            /* 右下：一番下 */
    0 calc(100% - var(--skew-depth))      /* 左下：右下より上に */
  );
}

/* ── 最後の diag-section だけ底辺を水平（直線）にする ───────── */
.diag-section:last-of-type::before{
  /* 上辺はこれまで通り「左→右に下がる」まま */
  clip-path: polygon(
    0 0,                          /* 左上：一番上 */
    100% var(--skew-depth),       /* 右上：少し下げる */
    100% 100%,                    /* 右下：底辺 = 100%（水平） */
    0 100%                        /* 左下：底辺 = 100%（水平） */
  );
}

/* セクション同士を密着させる（斜め分だけ重ねる） */
.diag-section_ + .diag-section{
  margin-top: calc(-1 * var(--skew-depth));
}
  /* 内側コンテナ */
  .container{
    width: min(100%, var(--page-max));
    margin-inline: auto;
  }
  
  /* ===============================
     セクション間中央の“はみ出し”イラスト
  ================================ */
 /* セクション上へ半分はみ出す。必ず背景より手前に来る */
 .section-illust{
    position: absolute;
    left: 50%;
    top: calc(-1 * var(--illust-overlap));  /* ← 上へはみ出す */
    transform: translateX(-50%);
    width: clamp(640px, 40vw, 640px);
    z-index: 2;                 /* 背景(::before)より手前、本文より前面に */
    pointer-events: none;
  }
  .section-illust img{
    width: 100%;
    height: auto;
    display: block;
    filter: drop-shadow(0 12px 18px rgba(0,0,0,.12));
  }

  .section-illust_sp{
    position: absolute;
    left: 50%;
    top: calc(-1 * var(--illust-overlap));  /* ← 上へはみ出す */
    transform: translateX(-50%);
    width: clamp(300px, 40vw, 370px);
    z-index: 2;                 /* 背景(::before)より手前、本文より前面に */
    pointer-events: none;
  }
  .section-illust_sp img{
    width: 100%;
    height: auto;
    display: block;
    filter: drop-shadow(0 12px 18px rgba(0,0,0,.12));
  }
  
  
  /* ===============================
     レスポンシブ
  ================================ */
  @media (max-width: 960px){
    :root{
      --sec-pad-y: 56px;
      --illust-overlap: 48px;
    }
    .sec-ttl{ font-size: 18px; }
    .sec-lead{ font-size: 18px; letter-spacing:.08em; }
    .sec-text{ font-size: 13px; }
  }
  
  @media (max-width: 560px){
    :root{
      --sec-pad-y: 44px;
      --illust-overlap: 40px;
    }
    .section-illust{ width: clamp(160px, 36vw, 240px); }
  }

  
 .font-gothic {
    font-family:
  "Noto Sans JP",        /* Googleフォント・細字が綺麗 */
  "Hiragino Sans",       /* Mac */
  "Hiragino Kaku Gothic ProN",
  "Yu Gothic",           /* Windows細字 */
  "Meiryo",
  sans-serif;
font-weight: 300; /* ← 細字にする重要ポイント */
    line-height: 180%;
 }  

 @media (min-width: 769px){
    /* ゴシック太字＋後ろに90pxライン */
   .h3-lined{
       font-family:"Noto Sans JP","Hiragino Sans","Yu Gothic","Meiryo",sans-serif;
       font-weight:500;
       font-size: clamp(16px, 2vw, 18px);
       color:#2b1a18;              /* 見本の濃いブラウンに近い色。任意で変更 */
       letter-spacing:.06em;
       display:inline-flex;         /* テキストとラインを横並びにして中央揃え */
       align-items:center;          /* ← 文字の縦中央にラインを合わせる要 */
       line-height:1.2;
     }
     
     /* テキストの右側の水平線（90px） */
     .h3-lined::after{
       content:"";
       width:90px;                  /* ご指定の長さ */
       height:2px;                  /* 太さ（お好みで 1–3px に） */
       background:#9aa0a6;          /* 線色（グレー。任意で変更） */
       margin-left:16px;            /* 文字との空き */
       flex:0 0 auto;
     }
   }

 @media (max-width: 768px){
 /* ゴシック太字＋後ろに90pxライン */
.h3-lined{
    font-family:"Noto Sans JP","Hiragino Sans","Yu Gothic","Meiryo",sans-serif;
    font-weight:500;
    font-size: clamp(16px, 2vw, 18px);
    color:#2b1a18;              /* 見本の濃いブラウンに近い色。任意で変更 */
    letter-spacing:.06em;
    display:inline-flex;         /* テキストとラインを横並びにして中央揃え */
    align-items:center;          /* ← 文字の縦中央にラインを合わせる要 */
    line-height:1.2;
  }
  
  /* テキストの右側の水平線（90px） */
  .h3-lined::after{
    content:"";
    width:40px;                  /* ご指定の長さ */
    height:2px;                  /* 太さ（お好みで 1–3px に） */
    background:#9aa0a6;          /* 線色（グレー。任意で変更） */
    margin-left:16px;            /* 文字との空き */
    flex:0 0 auto;
  }
}

  .img_subtit {
    max-width: 600px; width: 100%;
  }

  .img_banner {
    max-width: 600px; width: 100%;
  }

  .section3_bl_BG {
    background-image: url(../images/journal/section3_bl_BG.png);
    background-repeat: no-repeat;
    background-size: revert-layer;
    background-position: center bottom;
  }