@charset "UTF-8";

@import "../../../n_common/css/_variable.css";
/* =========================================================
  今が買い時かも!? 特設パーツ
  掲載先: /special/kaidoki/css/local.css
  スコープ: .area_kaidoki 配下のみに適用(既存スタイルと衝突しないよう
  すべて .area_kaidoki を起点に記述)
========================================================== */

.area_kaidoki {
  /* ---- design tokens (元AIデータより抽出) ---- */
  --kdk-red:        #D53036; /* メイン赤(タイトル・吹き出し) */
  --kdk-pink:       #DB7683; /* 表ヘッダ濃ピンク */
  --kdk-pink-lt:    #E7A3A8; /* 表ヘッダ淡ピンク */
  --kdk-yellow:     #FFF101; /* 蛍光イエロー(マーカー・強調) */
  --kdk-green:      #347841; /* 深緑(帯・ZEH文字) */
  --kdk-teal:       #62C297; /* 明るい緑(POINT旗・見出し) */
  --kdk-mint:       #DCEDE7; /* ミント背景 */
  --kdk-mint-row:   #CFE9DB; /* 表ZEH行背景 */
  --kdk-gray-band:  #DFDFDF; /* グレー帯 */
  --kdk-gray:       #9D9FA2; /* 表グレーヘッダ */
  --kdk-text:       #333333;
  --kdk-font-num:   "din-2014", "DIN 2014", "Helvetica Neue", Arial, sans-serif;
  --kdk-content-w:  1160px;

  color: var(--kdk-text);
  line-height: 1.8;
  font-feature-settings: "palt";

  /* ---------------------------------------------------------
    ボディ
  --------------------------------------------------------- */
  .kdk-body {
    max-width: var(--kdk-content-w);
    margin-inline: auto;
    padding-inline: 20px;
    text-align: left;
  }

  /* ---------------------------------------------------------
    ヒーロー
  --------------------------------------------------------- */
  .kdk-hero {
    position: relative;
    background: url("../images/main.jpg") center / cover no-repeat;
    min-height: clamp(320px, 37vw, 715px);
    display: grid;
    place-items: center;

    &::before {
      /* 写真の上に薄い白を敷いて文字を立たせる(元デザイン再現) */
      content: "";
      position: absolute;
      inset: 0;
      background: rgba(255, 255, 255, .80);
    }
  }

  .kdk-hero__inner {
    position: relative;
    text-align: center;
    padding: 40px 20px;
  }

  .kdk-hero__balloon {
    display: inline-block;
    position: relative;
    background: #fff;
    border-radius: 999px;
    padding: .5em 2em;
    font-weight: 700;
    font-size: clamp(14px, 1.5vw, 22px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, .06);
    word-break: keep-all;
    line-height: 1.4em;

    &::after {
      content: "";
      position: absolute;
      left: 50%;
      bottom: -10px;
      translate: -50% 0;
      border: 8px solid transparent;
      border-top: 12px solid #fff;
      border-bottom: 0;
    }
  }

  .kdk-hero__title {
    margin-top: .8em;
    color: var(--kdk-red);
    font-weight: 900;
    font-size: clamp(30px, 3.8vw, 64px);
    letter-spacing: .04em;
    line-height: 1.3;

    em {
      font-style: normal;
      background: linear-gradient(transparent 78%, var(--kdk-yellow) 78%);
      padding-bottom: .06em;
    }

    span { margin-left: .2em; }
  }

  /* ---------------------------------------------------------
    POINT 共通(旗見出し・リード・強調・区切り)
  --------------------------------------------------------- */
  .kdk-point {
    padding-block: clamp(40px, 5vw, 70px) 0;
  }

  .kdk-point__head {
    display: grid;
    grid-template-columns: 15cqw 1fr;
    gap: clamp(16px, 2vw, 28px);
    align-items: center;
    @media (width < 480px) {
      grid-template-columns: 100px 1fr;
    }
  }

  .newline {
    display: inline-block;
  }

  /* 旗(ポール+緑グラデ旗+黄色ナンバー) */
  .kdk-flag {
    position: relative;
    padding-left: 10px;

    img { 
      width: 100%;
      height: auto;
    }
  }

  .kdk-point__title {
    font-weight: 700;
    font-size: clamp(18px, 2vw, 32px);
    line-height: 1.7;
    text-align: left;
  }

  .kdk-point__sub {
    font-size: .78em;
    margin-left: .5em;
  }

  /* 強調(色文字+黄下線/マーカー) */
  .kdk-em {
    font-style: normal;
    background: linear-gradient(transparent 82%, var(--kdk-yellow) 82%);
  }

  .kdk-em--green   { color: var(--kdk-green); }
  .kdk-em--red     { color: var(--kdk-red); }
  .kdk-em--teal    { color: var(--kdk-teal); }
  .kdk-em--teal-mk {
    color: var(--kdk-teal);
    background: linear-gradient(transparent 15%, var(--kdk-yellow) 15%); /* 全面マーカー */
  }

  .kdk-lead {
    margin-top: 1.5em;
    font-size: clamp(14px, 1.05vw, 16px);
  }

  .kdk-note {
    margin-top: 1.5em;
    font-size: clamp(14px, .8vw, 14px);
    color: var(--kdk-text);
    line-height: 1.7;
    text-indent: -1em;
    padding-inline: 1em 0;
  }

  .kdk-divider {
    border: 0;
    border-top: 2px dotted #B5B5B5;
    margin-top: clamp(40px, 5vw, 70px);
  }

  /* ---------------------------------------------------------
    POINT 1(表+赤吹き出し+緑帯)
  --------------------------------------------------------- */
  .kdk-p1 {
    display: flex;
    align-items: center;
    gap: clamp(20px, 2.5vw, 40px);
    margin-top: 2em;

    .kdk-p1__table { flex: 1 1 auto; min-width: 0; overflow-x: auto; }
    .kdk-p1__bubble { flex: 0 0 auto; }
  }

  .kdk-table {
    width: 100%;
    min-width: 640px;
    border-collapse: collapse;
    text-align: center;
    font-size: clamp(14px, 1vw, 16px);

    th,
    td {
      border: 1px solid #fff;
      padding: .6em .8em;
      white-space: nowrap;
    }

    .kdk-table__plain { background: #F2F2F2; font-weight: 500; }

    .kdk-table__pink {
      background: var(--kdk-pink);
      color: #fff;

      span { font-size: .85em; }
    }

    .kdk-table__pink-lt { background: var(--kdk-pink-lt); color: #fff; }
    .kdk-table__gray    { background: var(--kdk-gray); color: #fff; font-weight: 500; }

    tbody {
      th {
        background: #fff;
        border: 1px solid #ddd;
        font-size: 1.1em;
      }

      td {
        background: #fff;
        border: 1px solid #ddd;
        font-weight: 700;
      }

      .kdk-table__num {
        font-size: 1.6em;
        font-family: var(--kdk-font-num);
        line-height: 1.2;

        span {
          font-size: .55em;
          font-family: inherit;
        }
      }

      tr.is-zeh {
        th,
        td {
          background: var(--kdk-mint-row);
          color: var(--kdk-green);
          border-color: #fff;
        }
      }
    }
  }
  /* 赤吹き出し */
  .kdk-bubble-red {
    position: relative;
    display: grid;
    place-content: center;
    text-align: center;
    width: clamp(200px, 17vw, 260px);
    aspect-ratio: 1.15;
    border-radius: 50%;
    background: var(--kdk-red);
    color: #fff;

    &::before {
      content: "";
      position: absolute;
      left: -16px;
      top: 42%;
      border: 14px solid transparent;
      border-right: 22px solid var(--kdk-red);
      border-left: 0;
      rotate: 8deg;
    }

    .sonosa {
      position: absolute;
      top: -24px;
      right: -22px;
      transform: rotate(12deg);
      display: block;
      width: 50%;
      img {
        width: 100%;
        height: auto;
      }
    }

    .kdk-bubble-red__catch {
      display: block;
      font-weight: 700;
      font-size: clamp(14px, 1.2vw, 19px);
    }

    .kdk-bubble-red__label {
      display: inline-block;
      margin: .4em auto 0;
      border: 1px solid var(--kdk-yellow);
      border-radius: 999px;
      color: var(--kdk-yellow);
      font-weight: 700;
      font-size: clamp(14px, 1vw, 15px);
      padding: .1em 1.2em;
    }

    .kdk-bubble-red__num {
      display: block;
      margin-top: .1em;
      color: var(--kdk-yellow);
      font-family: var(--kdk-font-num);
      font-weight: 700;
      font-size: clamp(40px, 3.6vw, 60px);
      line-height: 1.2;

      small { font-size: .42em; }
    }
  }

  /* 緑帯 */
  .kdk-band-green {
    margin-top: 2em;
    background: var(--kdk-green);
    color: #fff;
    border-radius: 999px;
    text-align: center;
    font-weight: 700;
    font-size: clamp(15px, 1.5vw, 24px);
    padding: .55em 1em;

    em {
      font-style: normal;
      color: var(--kdk-yellow);
    }
  }

  /* ---------------------------------------------------------
    POINT 2(比較2カラム+健康ボックス)
  --------------------------------------------------------- */
  .kdk-band-gray {
    margin-top: 2em;
    background: var(--kdk-gray-band);
    border-radius: 999px;
    text-align: center;
    font-weight: 700;
    font-size: clamp(15px, 1.4vw, 22px);
    padding: .4em 1em;
  }

  .kdk-compare {
    display: grid;
    grid-template-columns: 1fr 4cqw 1fr;
    gap: clamp(16px, 2vw, 32px);
    margin-top: 2.5em;
    align-items: center;
    @media (width < 896px) {
      grid-template-columns: 1fr;
    }
    .kdk-compare__col {
      flex: 1;
      min-width: 0;
      display: grid;
      grid-template-columns: 45% 1fr;
      gap: 5px;
      align-items: end;
      &:last-child .kdk-balloon-mint {
        left: auto;
        right: 0;
      }
      @media (width < 480px) {
        grid-template-columns: 1fr;
        gap: 0px;
      }
    }

    .kdk-compare__demo {
      text-align: center;
      img {
        max-width: 52px;
      }
    }

    .kdk-compare__title {
      color: var(--kdk-teal);
      font-weight: 700;
      font-size: clamp(15px, 1.3vw, 20px);
      line-height: 1.6;
    }

    .kdk-compare__figure {
      position: relative;
      margin-top: 1em;
      text-align: center;

      img {
        max-width: min(100%, 300px);
        height: auto;
      }
    }
    .kdk-compare__txt {
      align-content: start;
      height: 100%;
    }
    .kdk-compare__text {
      margin-top: 1em;
      font-size: clamp(14px, 1vw, 15px);
      height: 100%;
    }
  }

  .kdk-balloon-mint {
    position: absolute;
    left: 0;
    top: 10%;
    background: var(--kdk-mint);
    border-radius: 50%;
    display: grid;
    place-content: center;
    width: clamp(110px, 10vw, 150px);
    aspect-ratio: 1;
    color: var(--kdk-teal);
    font-weight: 700;
    font-size: clamp(14px, .9vw, 14px);
    line-height: 1.5;
    text-align: center;
  }

  /* 不健康だと…ボックス */
  .kdk-health {
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap: clamp(20px, 2.5vw, 48px);
    background: var(--kdk-mint);
    border-radius: 16px;
    padding: clamp(24px, 2.5vw, 40px);
    margin-top: 2.5em;
    @media (width < 896px) {
      grid-template-columns: 1fr;
    }
    .kdk-health__text {
      p {
        margin-top: .8em;
        font-size: clamp(14px, 1vw, 15px);
      }
    }

    .kdk-health__title {
      color: var(--kdk-teal);
      font-weight: 700;
      font-size: clamp(17px, 1.6vw, 26px);
    }

    .kdk-health__figure {
      img {
        width: 100%;
        height: auto;
      }
    }
  }

  .kdk-balloon-white {
    position: relative;
    background: #fff;
    border-radius: 24px;
    padding: 1em 1.4em;
    color: var(--kdk-teal);
    font-weight: 700;
    font-size: clamp(14px, 1.05vw, 16px);
    text-align: center;
    line-height: 1.7;

    &::after {
      content: "";
      position: absolute;
      right: -12px;
      top: 50%;
      border: 10px solid transparent;
      border-left: 16px solid #fff;
      border-right: 0;
      translate: 0 -50%;
    }
  }

  /* ---------------------------------------------------------
    POINT 3(テキスト+グラフ2点)
  --------------------------------------------------------- */
  .kdk-p3 {
    display: flex;
    align-items: flex-start;
    gap: clamp(20px, 2.5vw, 44px);
    margin-top: 2em;
    padding-bottom: clamp(40px, 5vw, 80px);

    .kdk-p3__text {
      flex: 0 0 26%;
      min-width: 0;

      p {
        margin-top: .9em;
        font-size: clamp(14px, 1vw, 15px);
      }
    }

    .kdk-p3__title {
      color: var(--kdk-green);
      font-weight: 700;
      font-size: clamp(16px, 1.45vw, 23px);
      line-height: 1.6;
    }

    .kdk-p3__graph,
    .kdk-p3__diagram {
      flex: 1;
      min-width: 0;
      margin: 0;

      img {
        width: 100%;
        height: auto;
      }
    }

    .kdk-p3__graph .kdk-note {
      margin-top: .5em;
      text-align: right;
    }
  }

  /* ---------------------------------------------------------
    レスポンシブ(768px以下でスタック)
  --------------------------------------------------------- */
  @media (max-width: 768px) {
    .kdk-point__head {
      flex-direction: column;
      align-items: flex-start;
    }

    .kdk-p1 {
      flex-direction: column;

      .kdk-p1__table {
        width: 100%;
        -webkit-overflow-scrolling: touch;
      }

      .kdk-p1__bubble {
        margin-inline: auto;
      }
    }

    .kdk-bubble-red {
      &::before {
        left: 50%;
        top: -14px;
        translate: -50% 0;
        rotate: 0deg;
        border: 12px solid transparent;
        border-bottom: 18px solid var(--kdk-red);
        border-top: 0;
      }
    }

    .kdk-compare {
      flex-direction: column;

      .kdk-compare__demo {
        writing-mode: horizontal-tb;
        align-self: center;
      }
    }

    .kdk-health {
      flex-direction: column;

      .kdk-health__figure {
        flex-direction: column-reverse;
      }
    }

    .kdk-balloon-white {
      &::after {
        right: auto;
        left: 50%;
        top: -10px;
        translate: -50% 0;
        border: 10px solid transparent;
        border-bottom: 14px solid #fff;
        border-top: 0;
      }
    }

    .kdk-p3 {
      flex-direction: column;

      .kdk-p3__text {
        flex-basis: auto;
      }
    }
  }
}

.area_cv {
  margin: 0 calc(50% - 50vw);
  width: 100vw;
  background-color: var(--kdk-mint);
  text-align: center;
  padding-block: 40px;
}

.hd_cv {
  color: var(--kdk-text);
  font-size: clamp(1rem, 0.26vw + 0.939rem, 1.25rem);
  font-weight: 900;
  line-height: 1.6em;
}

.btn_madoripage {
  font-size: clamp(1rem, 0.26vw + 0.939rem, 1.25rem);
  font-weight: 900;
  line-height: 1.1em;
  padding-block: 20px 0;
  a {
    display: inline-block;
    background-color: var(--kdk-pink);
    color: #FFF;
    padding: 1em 2em;
    position: relative;
    &::after {
      content: "";
      display: block;
      width: calc(100% - 10px);
      height: calc(100% - 10px);
      border: #FFF solid 1px;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%,-50%);
    }
    &:hover {
      background-color: var(--kdk-red);
      text-decoration: none;
    }
  }
}