/* ================================================
   Design System Variables
   ================================================ */

   :root {
    /* ================================================
       Color Variables
       ================================================ */
    /* Primary Colors */
    --color-red: #e50022;
    --color-blue: #096bc2;
    --color-aqua: #6cc2dc;
    --color-yellow: #fedd36;
    --color-white: #ffffff;
    --color-pink: #d74162;
    --color-light-blue: #b9efef;
    --color-orange: #f08c00;
    --color-cream: #fff0a6;
    --color-teal: #248EAD;
    
    /* Gray Scale */
    --color-black: #000000;
    --color-gray-4d: #4d4d4d;
    --color-gray-d9: #d9d9d9;
    
    /* ================================================
       Gradient Variables
       ===============================================/* 業者情報行 */
    --gradient-bt: linear-gradient(360deg, #ffb099 0%, #ff0845 21%, #ff5d6f 80%, #ffb099 100%);
    --gradient-bt-red: linear-gradient(360deg, #ff0845 0%, #ffb099 100%);
    --gradient-bt-orange: linear-gradient(30deg, #ff8c21 51%, #ffb099 100%);
    
    /* ================================================
       Typography Variables
       ================================================ */
    --font-family-base: "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
    
    /* Font Sizes */
    --font-size-8: 8px;
    --font-size-10: 10px;
    --font-size-11: 11px;
    --font-size-12: 12px;
    --font-size-14: 14px;
    --font-size-16: 16px;
    --font-size-20: 20px;
    --font-size-24: 24px;
    --font-size-32: 32px;
    --font-size-48: 48px;
    
    /* Line Heights */
    --line-height-120: 120%;
    --line-height-150: 150%;
    --line-height-160: 160%;
    --line-height-200: 200%;
    
    /* ================================================
       Spacing Variables (from Figma Auto Layout)
       ================================================ */
    /* Gap Sizes */
    --gap-1: 4px;
    --gap-2: 8px;
    --gap-3: 12px;
    --gap-4: 16px;
    --gap-6: 24px;
    --gap-8: 32px;
    
    /* Padding Sizes */
    --padding-1: 4px;
    --padding-2: 8px;
    --padding-3: 12px;
    --padding-4: 16px;
    --padding-6: 24px;
    --padding-8: 32px;
    --padding-10: 40px;
    --padding-12: 48px;
    --padding-16: 64px;
    
    /* Margin Sizes */
    --margin-1: 4px;
    --margin-2: 8px;
    --margin-3: 12px;
    --margin-4: 16px;
    --margin-6: 24px;
    --margin-8: 32px;
    --margin-10: 40px;
    --margin-12: 48px;
    --margin-16: 64px;
    
    /* Specific Auto Layout Values (from Figma) */
    --al-gap-small: 4px;        /* gap-1 from テーブル */
    --al-gap-medium: 8px;       /* gap-2 from Frame 132 */
    --al-gap-large: 16px;       /* larger gaps */
    
    --al-padding-cell: 8px;     /* p-[8px] from テーブル */
    --al-padding-button-x: 8px; /* px-2 from buttons */
    --al-padding-button-y: 4px; /* py-1 from buttons */
    --al-padding-header-x: 8.5px; /* px-[7.961px] from ヘッダー */
    --al-padding-header-y: 4.5px; /* py-[15.922px] from ヘッダー */
    
    /* Border Radius (from Auto Layout elements) */
    --radius-small: 8px;        /* rounded-[8px] from buttons */
    --radius-medium: 16px;  /* rounded-tl-[15.042px] from ヘッダー */
    --radius-large: 24px;
    
    /* Border Widths */
    --border-width-thin: 1px;
    --border-width-medium: 2px;
    --border-width-thick: 3px;
    
    /* Transform Values */
    --transform-offset-small: -2px;
    --transform-offset-tiny: 2px;
    
    /* Responsive Font Sizes */
    --font-size-responsive-tiny: clamp(8px, 2.5vw, 10px);
    --font-size-responsive-small: clamp(10px, 3.5vw, 14px);
    --font-size-responsive-medium: clamp(12px, 3.5vw, 14px);
    --font-size-responsive-large: clamp(12px, 4vw, 16px);
    
    /* Responsive Padding */
    --padding-responsive: min(14px, 3vw) min(8px, 2vw);
    --padding-small-fixed: 12px 4px;
    --padding-medium-y: 14px 0;
  }
  
  /* ================================================
     Utility Classes
     ================================================ */
  
  /* Border Utilities */
  .__border-standard {
      border: var(--border-width-thin) solid var(--color-gray-d9);
  }
  
  .__border-blue {
      border: var(--border-width-medium) solid var(--color-blue);
  }
  
  .__border-aqua {
      border: var(--border-width-medium) solid var(--color-aqua);
  }
  
  /* Background Gradient Utilities */
  .__bg-gradient-bt {
    background: var(--gradient-bt);
  }
  
  .__bg-gradient-bt-red {
    background: var(--gradient-bt-red);
  }
  
  .__bg-gradient-bt-orange {
    background: var(--gradient-bt-orange);
  }
  
  /* Color Utilities */
  .__color-red { color: var(--color-red); }
  .__color-blue { color: var(--color-blue); }
  .__color-aqua { color: var(--color-aqua); }
  .__color-yellow { color: var(--color-yellow); }
  .__color-white { color: var(--color-white); }
  .__color-pink { color: var(--color-pink); }
  .__color-light-blue { color: var(--color-light-blue); }
  .__color-orange { color: var(--color-orange); }
  .__color-cream { color: var(--color-cream); }
  .__color-gray-4d { color: var(--color-gray-4d); }
  .__color-gray-d9 { color: var(--color-gray-d9); }
  
  /* Background Color Utilities */
  .__bg-red { background-color: var(--color-red); }
  .__bg-blue { background-color: var(--color-blue); }
  .__bg-aqua { background-color: var(--color-aqua); }
  .__bg-yellow { background-color: var(--color-yellow); }
  .__bg-white { background-color: var(--color-white); }
  .__bg-pink { background-color: var(--color-pink); }
  .__bg-light-blue { background-color: var(--color-light-blue); }
  .__bg-orange { background-color: var(--color-orange); }
  .__bg-cream { background-color: var(--color-cream); }
  .__bg-gray-4d { background-color: var(--color-gray-4d); }
  .__bg-gray-d9 { background-color: var(--color-gray-d9); }
  
  body{
      background-color: #FFEFC9;
      color: var(--color-gray-4d);
      font-family: var(--font-family-base);
  }
  
  .aw{
      display: inline-block;
  }
  
  .__wrapper{
      max-width: 390px;
      margin-inline:auto;
      background-color: var(--color-white);
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1), 0 1px 4px rgba(0, 0, 0, 0.06);
  }
  
  /* PC版対応 */
  @media (min-width: 860px) {
      .__wrapper {
          max-width: 860px;
          width: 860px;
      }
  }
  /* ================================================
     Header Styles
     ================================================ */
  .__header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: var(--al-gap-medium);
      padding: var(--al-padding-header-y) var(--al-padding-header-x);
      line-height: 1;
      @media (min-width: 860px) {
          padding: 13px 19px;
      }
  }
  
  .__header_logo img {
      max-width: 127px;
      height: auto;
      @media (min-width: 860px) {
          max-width: 302px;
      }
  }
  
  .__header_pr img {
      max-width: 35px;
      height: auto;
      @media (min-width: 860px) {
          max-width: 72px;
      }
  }
  
  /* ================================================
     Recommendation Section
     ================================================ */
  .__recommendation_title {
      text-align: center;
  }
  
  /* Text utilities */
  .__text-center {
      text-align: center;
  }
  
  /* ================================================
     Recommendation Table Styles
     ================================================ */
  .__recommendation_ranking3 {
      width: calc(100% - (var(--padding-4)*2));
      border-collapse: collapse;
      border: none !important;
      margin-inline: auto;
      margin-bottom: var(--margin-8);
      @media (min-width: 860px) {
          width: calc(100% - (var(--padding-8)*2));
          margin-bottom: 60px;
      }
  }
  
  .__rec-th {
      text-align: center;
      padding: var(--al-padding-header-y) var(--al-padding-header-x);
      vertical-align: bottom;
      background-color: var(--color-cream);
      border-top-left-radius: var(--radius-medium);
      border-top-right-radius: var(--radius-medium);
      border: none !important;
      border-top: none !important;
      border-bottom: none !important;
      border-left: none !important;
      border-right: none !important;
      
      @media (min-width: 860px) {
          padding: 20px 0;
          border-radius: var(--padding-8) var(--padding-8) 0 0;
  
      }
  }
  
  .__rec-th:first-child {
      background-color: #c09618;
  }
  
  .__rec-th:nth-child(2) {
      background-color: #acabab;
  }
  
  .__rec-th:nth-child(3) {
      background-color: #c98557;
  }
  
  .__crown-icon {
      display: block;
      margin-inline: auto;
      max-width: 42px;
      height: auto;
      
      @media (min-width: 860px) {
          max-width: 90px;
      }
  }
  
  .__rec-td {
      vertical-align: middle;
      text-align: center;
      padding: var(--al-padding-cell);
      background-color: var(--color-white);
      border: 1px solid var(--color-gray-d9);
      border-width: 1px 1px 0px 1px;
      
      @media (min-width: 860px) {
          padding: var(--padding-8) 0;
          width: 263px;
      }
  }
  
  .__rec-td.__rec-first {
      background-color: #fffbe6;
  }
  
  .__rec-content {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: var(--al-gap-medium);
      
      @media (min-width: 860px) {
          gap: var(--gap-4);
          justify-content: center;
      }
  }
  
  .__rec-td-cta {
      vertical-align: middle;
      text-align: center;
      padding: var(--al-padding-cell);
      background-color: var(--color-white);
      border: 1px solid var(--color-gray-d9);
      border-width: 0 1px 1px 1px;
      @media (min-width: 860px) {
          padding: 0 0 var(--margin-8);
      }
  }
  
  .__rec-td-cta.__rec-first-cta {
      background-color: #fffbe6;
  }
  
  .__rec-logo {
      display: block;
      max-width: 100px;
      height: auto;
      @media (min-width: 860px) {
          max-width: 220px;
      }
  }
  
  .__rec-link {
      display: block;
      text-decoration: underline;
      line-height: var(--line-height-150);
      font-size: var(--font-size-14);
      
      @media (min-width: 860px) {
          font-size: var(--font-size-32);
          font-weight: 600;
          width: 263px;
          text-align: center;
      }
  }
  
  .__rec-cta {
      text-align: center;
      display: inline-block;
      @media (min-width: 860px) {
          
      }
  }
  
  .__rec-cta img {
      display: block;
      max-width: 160px;
      width: 100%;
      height: auto;
      
      @media (min-width: 860px) {
          max-width: 230px;
      }
  }
  
  /* Focus styles for accessibility */
  a:focus, button:focus {
      outline: 3px solid var(--color-blue);
      outline-offset: 2px;
  }
  
  .__rec-cta:focus {
      outline: 3px dashed var(--color-orange);
      outline-offset: 2px;
  }
  
  .__rec-cta:focus img {
      transform: translateY(-2px);
      transition: transform 160ms ease-in-out;
  }
  
  /* ================================================
     Link Styles
     ================================================ */
  a {
      color: var(--color-teal);
      text-decoration: none;
      font-weight: bold;
  }
  
  a:hover {
      text-decoration: underline;
  }
  
  /* ================================================
     Prefectures Table Styles
     ================================================ */
  .__prefectures {
      display: flex;
      flex-direction: column;
      width: 100%;
      margin: 0 auto;
  }
  
  .__prefectures_title {
      width: 100%;
      text-align: center;
  }
  .__prefectures_title_date {
      font-size: var(--font-size-24);
      font-weight: bold;
      line-height: var(--line-height-120);
      color: #D74162;
      margin: 0;
      @media (min-width: 860px) {
          font-size: var(--font-size-48);
      }
  }
  
  .__prefectures_title img {
      width: 100%;
      height: auto;
  }
  
  .__prefectures_table {
      background-color: var(--color-white);
      padding: 0 var(--padding-4) var(--padding-6);
      border-radius: 0;
      
      @media (min-width: 860px) {
          padding: 0 var(--padding-8) var(--padding-12);
      }
  }
  
  .__table-header {
      background-color: var(--color-blue);
      padding: var(--padding-2);
      color: var(--color-white);
      text-align: center;
      margin-bottom: var(--margin-1);
      
      @media (min-width: 860px) {
          padding: var(--padding-4);
          display: flex;
          flex-direction: column;
          gap: var(--gap-2);
          min-height: 172px;
          justify-content: center;
          align-items: center;
      }
  }
  
  .__table-title {
      font-size: var(--font-size-24);
      font-weight: bold;
      line-height: var(--line-height-120);
      margin: 0 0 var(--margin-1) 0;
      
      @media (min-width: 860px) {
          font-size: var(--font-size-48);
      }
  }
  
  .__table-description {
      font-size: var(--font-size-12);
      font-weight: normal;
      line-height: var(--line-height-120);
      margin: 0;
      
      @media (min-width: 860px) {
          font-size: var(--font-size-24);
      }
  }
  
  .__table-content {
      width: 100%;
      border-collapse: collapse;
      border: none !important;
      background-color: var(--color-white);
  }
  
  .__table-content tbody {
      border: none !important;
  }
  
  .__table-row {
      border: none !important;
      border-bottom: 1px solid var(--color-gray-d9) !important;
  }
  
  .__table-row:last-child {
      border-bottom: none !important;
  }
  
  .__region-header {
      background-color: var(--color-blue);
      min-width: 40px;
      width: 40px;
      vertical-align: middle;
      text-align: center;
      padding: var(--padding-2) 0;
      border: 1px solid var(--color-gray-d9) !important;
      border-right: none !important;
      @media (min-width: 860px) {
          width: 88px;
      }
  }
  
  .__region-name {
      font-weight: bold;
      color: var(--color-white);
      text-align: center;
      font-size: var(--font-size-10);
      line-height: var(--line-height-150);
      @media (min-width: 860px) {
          font-size: var(--font-size-20);
      }
  }
  
  .__prefecture-buttons {
      background-color: var(--color-white);
      padding: var(--padding-2);
      vertical-align: middle;
      border: 1px solid var(--color-gray-d9) !important;
      border-left: none !important;
      @media (min-width: 860px) {
          padding: 18px;
      }
  }
  
  .__prefecture-list {
      list-style: none;
      margin: 0;
      padding: 0;
      display: flex;
      flex-wrap: wrap;
      gap: var(--gap-2);
      align-items: center;
      
      @media (min-width: 860px) {
          gap: var(--padding-4);
          align-items: center;
          justify-content: flex-start;
      }
  }
  
  .__prefecture-list li {
      margin: 0;
      padding: 0;
  }
  
  .__prefecture-btn {
      background-color: var(--color-white);
      border: 1px solid var(--color-gray-d9);
      border-radius: var(--radius-small);
      padding: var(--padding-1) var(--padding-2);
      font-weight: normal;
      color: var(--color-blue) !important;
      text-decoration: none !important;
      display: inline-block;
      transition: all 0.2s ease;
      font-size: var(--font-size-12);
      line-height: var(--line-height-120);
      
      @media (min-width: 860px) {
          font-size: 24px;
          font-weight: 300;
          padding: var(--gap-2) var(--padding-4);
          min-height: 47px;
          display: flex;
          align-items: center;
          justify-content: center;
          line-height: var(--line-height-120);
      }
  }
  
  .__prefecture-btn:hover {
      background-color: #f0f8ff;
      border-color: var(--color-blue);
      text-decoration: none !important;
  }
  
  .__table-footer {
      text-align: right;
      margin-top: var(--margin-2);
      
      @media (min-width: 860px) {
          margin-top: 0;
          width: 100%;
      }
  }
  
  .__date-info {
      color: var(--color-blue);
      font-size: var(--font-size-10);
      margin: 0;
      
      @media (min-width: 860px) {
          font-size: var(--font-size-20);
          font-weight: 400;
          line-height: var(--line-height-150);
      }
  }
  
  
  /* ================================================
     NoFailures Section Styles
     ================================================ */
  .__noFailures {
      display: flex;
      flex-direction: column;
      margin: 0 auto;
  }
  
  .__noFailures01 {
      display: flex;
      flex-direction: column;
  }
  
  .__noFailures-point_title {
      margin-bottom: var(--margin-8);
  }
  
  .__noFailures-point_content {
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 0 var(--padding-4);
      margin-bottom: var(--margin-6);
      background-color: var(--color-white);
      @media (min-width: 860px) {
          padding: 0 var(--padding-8);
      }
  }
  
  .__noFailures-point_pic {
      margin-bottom: 10px;
  }
  
  .__noFailures-point_text {
      line-height: var(--line-height-200);
      font-weight: bold;
      @media (min-width: 860px) {
          font-size: var(--font-size-32);
      }
  }
  
  /* ================================================
     Ranking Table Section
     ================================================ */
  
  .__ranking_table {
      background-color: #FFCC5F;
      padding: var(--padding-4);
      border-radius: 0;
      overflow-x: auto;
      box-sizing: border-box;
      margin-bottom: var(--margin-3);
      @media (min-width: 860px) {
          padding: var(--padding-8);
      }
  }
  
  .__ranking_table table {
      width: 100%;
      border-collapse: collapse;
      table-layout: auto;
      border: none !important;
      min-width: 100%;
      margin-bottom: 4px;
  }
  
  /* ヘッダー行 */
  .__ranking-th {
      background-color: var(--color-gray-d9);
      padding: 10px var(--padding-responsive);
      text-align: center;
      border-top-left-radius: 15px;
      border-top-right-radius: 15px;
      width: 33.333%;
      box-sizing: border-box;
      @media (min-width: 860px) {
          border-top-left-radius: 32px;
          border-top-right-radius: 32px;
          padding: 22px 0;
      }
  }
  
  .__ranking-th-1 {
      background-color: #c09618;
  }
  
  .__ranking-th-2 {
      background-color: #acabab;
  }
  
  .__ranking-th-3 {
      background-color: #c98557;
  }
  
  .__ranking-icon {
      width: auto;
      max-width: 42px;
      @media (min-width: 860px) {
          max-width: 88px;
      }
  }
  .__ranking-td{
      background-color: var(--color-white);
      position: relative;
  }
  /* 業者情報行 */
  .__ranking-company-row  {
      padding: var(--padding-small-fixed);
      text-align: center;
      border: 1px solid var(--color-gray-d9);
      height: 80px;
      box-sizing: border-box;
  }
  .__ranking-company-row .__ranking-td {
      padding: var(--padding-responsive);
      text-align: center;
      border: 1px solid var(--color-gray-d9);
      box-sizing: border-box;
      vertical-align: middle;
  }
  .__ranking-company-content {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: var(--al-gap-medium);
  }
  
  .__ranking-company-logo {
      width: 80px;
      @media (min-width: 860px) {
          width: 220px;
      }
  }
  
  .__ranking-company-link {
      font-size: clamp(12px, 3.5vw, 14px);
      line-height: var(--line-height-150);
      color: var(--color-blue);
      text-decoration: underline;
      text-align: center;
      @media (min-width: 860px) {
          font-size: var(--font-size-32);
      }
  }
  
  /* カテゴリ行 */
  .__ranking-category-row .__ranking-category {
      background-color: var(--color-blue);
      color: var(--color-white);
      font-size: var(--font-size-responsive-large);
      font-weight: bold;
      line-height: var(--line-height-120);
      text-align: center;
      padding: var(--padding-responsive);
      border: none;
      box-sizing: border-box;
      @media (min-width: 860px) {
          font-size: var(--font-size-32);
      }
  }
  
  /* データ行 */
  .__ranking-data-row .__ranking-td {
      padding: var(--padding-responsive);
      text-align: center;
      border: 1px solid var(--color-gray-d9);
      vertical-align: middle;
      box-sizing: border-box;
      @media (min-width: 860px) {
          padding: 26px;
      }
  }
  
  .__ranking-data-content {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: var(--gap-2);
      justify-content: center;
  }
  
  .__ranking-icon-circle {
      width: 32px;
      height: 32px;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      @media (min-width: 860px) {
          width: 70px;
          height: 70px;
      }
  }
  
  .__ranking-icon-circle img {
      width: 32px;
      height: 32px;
      @media (min-width: 860px) {
          width: 70px;
          height: 70px;
      }
  }
  
  .__ranking-data-text {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 2px;
      text-align: center;
      @media (min-width: 860px) {
          gap: 8px;
      }
  }
  
  .__ranking-text-main {
      color: var(--color-pink);
      font-size: var(--font-size-responsive-tiny);
      line-height: var(--line-height-120);
      font-weight: bold;
      word-break: break-all;
      @media (min-width: 860px) {
          font-size: var(--font-size-20);
          line-height: var(--line-height-160);
      }
  }
  
  .__ranking-text-main span {
      font-size: var(--font-size-responsive-small);
      font-weight: bold;
      @media (min-width: 860px) {
          font-size: var(--font-size-32);
      }
  }
  
  .__ranking-text-black {
      color: var(--color-black);
      font-weight: normal;
  }
  
  .__ranking-text-sub {
      color: var(--color-pink);
      font-size: var(--font-size-12);
      line-height: var(--line-height-120);
      font-weight: bold;
      @media (min-width: 860px) {
          font-size: var(--font-size-24);
      }
  }
  
  .__ranking-text-note {
      font-size: var(--font-size-8);
      line-height: var(--line-height-120);
      position: absolute;
      bottom: 1px;
      right: 2px;
      @media (min-width: 860px) {
          font-size: var(--font-size-16);
          bottom: 2px;
          right: 3px;
      }
  }
  /* CTA行 */
  .__ranking-cta-row .__ranking-td {
      padding: var(--padding-medium-y);
      text-align: center;
      border: 1px solid var(--color-gray-d9);
      border-bottom: 1px solid var(--color-gray-d9);
      box-sizing: border-box;
  }
  .__ranking-td.__ranking-cta{
      @media (min-width: 860px) {
          padding: 33px 0;
      }
  }
  
  .__ranking-cta-link {
      display: inline-block;
      text-decoration: none;
  }
  
  .__ranking-cta-link img {
      width: 90px;
      @media (min-width: 860px) {
          width: 210px;
      }
  }
  
  /* 注記 */
  .__ranking-notes {
      padding: 0 4px;
  }
  
  .__ranking-notes p {
      color: var(--color-gray-4d);
      font-size: var(--font-size-10);
      line-height: var(--line-height-120);
      margin-bottom: 4px;
      font-weight: normal;
      @media (min-width: 860px) {
          font-size: var(--font-size-20);
      }
  }
  
  /* 共通：タイトルセクション */
  .__title-section {
      background-color: var(--color-blue);
      width: 100%;
      padding: var(--padding-4) 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: flex-start;
      @media (min-width: 860px) {
          padding: var(--padding-8) 0;
      }
  }
  
  .__title-content {
      display: flex;
      flex-direction: column;
      gap: var(--gap-1);
      align-items: flex-start;
      justify-content: flex-start;
      padding: 0 44px;
      width: 100%;
      box-sizing: border-box;
      @media (min-width: 860px) {
          padding: 0 97px;
      }
  }
  
  .__title-row {
      display: flex;
      gap: var(--gap-3);
      align-items: center;
      justify-content: flex-start;
      width: 100%;
  }
  
  .__title-icon {
      display: inline-block;
      width: 50px;
      height: 50px;
      flex-shrink: 0;
      @media (min-width: 860px) {
          width: 110px;
          height: 110px;
      }
  }
  
  .__title-text-wrapper {
      display: flex;
      gap: var(--gap-3);
      align-items: center;
      justify-content: center;
      padding: var(--padding-3);
      flex-shrink: 0;
      @media (min-width: 860px) {
          padding: 32px 42px;
      }
  }
  
  .__title-text {
      display: inline-block;
      font-size: var(--font-size-24);
      color: var(--color-yellow);
      text-align: center;
      white-space: nowrap;
      line-height: var(--line-height-150);
      font-weight: bold;
      text-decoration: underline;
      text-decoration-skip-ink: none;
      text-underline-position: from-font;
      @media (min-width: 860px) {
          font-size: var(--font-size-48);
          line-height: var(--line-height-120);
          text-decoration: none;
      }
  }
  
  /* ================================================
     Detail01 Specific Styles
     ================================================ */
  
  /* Detail01 Title 固有スタイル */
  .__detail01_title {
      margin: 0;
      padding: 0;
  }
  
  /* Detail01 Contents スタイル */
  .__detail01_contents {
      padding: var(--padding-6) var(--padding-4) 0;
      @media (min-width: 860px) {
          padding: var(--padding-12) var(--padding-8) 0;
      }
  }
  
  /* ================================================
     Detail02 Specific Styles (街角給湯相談所)
     ================================================ */
  
  /* Detail02 Title 固有スタイル */
  .__detail02_title {
      margin: 0;
      padding: 0;
  }
  
  .__detail02_title .__title-section {
      background-color: var(--color-blue);
      color: var(--color-yellow);
  }
  
  /* Detail02 Contents スタイル */
  .__detail02_contents {
      padding: var(--padding-6) var(--padding-4) 0;
      @media (min-width: 860px) {
          padding: var(--padding-12) var(--padding-8) 0;
      }
  }
  
  /* Detail02 PR Box - ピンクハイライト用 */
  .__detail02_pr .__pr-highlight-pink {
      color: var(--color-pink);
      position: relative;
      z-index: 2;
  }
  
  .__detail02_pr .__pr-highlight-pink::before {
      content: '';
      position: absolute;
      bottom: 2px;
      left: 0;
      right: 0;
      height: 10px;
      background-color: var(--color-cream);
      z-index: -1;
  }
  
  /* Detail02 固有のスタイル調整 */
  .__detail02 .__detail-table-data .__detail-text-note {
      font-size: var(--font-size-10);
      display: block;
      margin-top: 2px;
  }
  
  /* ================================================
     Detail03 Specific Styles (東京ガス)
     ================================================ */
  
  /* Detail03 Title 固有スタイル */
  .__detail03_title {
      margin: 0;
      padding: 0;
  }
  
  .__detail03_title .__title-section {
      background-color: var(--color-blue);
      color: var(--color-yellow);
  }
  
  /* Detail03 Contents スタイル */
  .__detail03_contents {
      padding: var(--padding-6) var(--padding-4) 0;
      @media (min-width: 860px) {
          padding: var(--padding-12) var(--padding-8) 0;
      }
  }
  
  /* ================================================
     共通：PR Box Component
     ================================================ */
  
  /* PR Box Component - 共通スタイル */
  .__detail01_pr,
  .__detail02_pr,
  .__detail03_pr {
      position: relative;
      display: flex;
      flex-direction: column;
      align-items: center;
      margin-bottom: var(--margin-6);
  }
  
  .__pr-box {
      border: var(--border-width-medium) solid var(--color-blue);
      border-radius: var(--radius-small);
      padding: var(--padding-4);
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      box-sizing: border-box;
      @media (min-width: 860px) {
          border: 4px solid var(--color-blue);
          padding: var(--padding-8);
      }
  }
  
  .__pr-triangle {
      margin-bottom: var(--margin-4);
      display: flex;
      justify-content: center;
      z-index: 1;
      max-width: 20px;
      margin-top: -2px;
      @media (min-width: 860px) {
          max-width: 44px;
          margin-top: -4px;
      }
  }
  .__detail-bunner{
      margin-bottom: var(--margin-6);
      @media (min-width: 860px) {
          margin-bottom: var(--margin-12);
      }
  }
  .__pr-content {
      position: relative;
      text-align: center;
  }
  
  .__pr-text {
      font-size: var(--font-size-16);
      line-height: var(--line-height-150);
      margin: 0;
      font-weight: bold;
      @media (min-width: 860px) {
          font-size: var(--font-size-32);
      }
  }
  
  
  .__pr-normal {
      color: var(--color-gray-4d);
  }
  
  .__pr-note {
      color: var(--color-pink);
      font-size: var(--font-size-10);
      @media (min-width: 860px) {
          font-size: var(--font-size-16);
      }
  }
  
  /* Check Box Component */
  .__detail-point{
      width: 100%;
  }
  .__check-box {
      border: var(--border-width-medium) solid var(--color-aqua);
      border-radius: var(--radius-small);
      padding: var(--padding-4);
      margin-bottom: var(--margin-4);
      @media (min-width: 860px) {
          border: 4px solid var(--color-aqua);
          width: 100%;
          margin-bottom: var(--margin-12);
      }
  }
  
  .__check-list {
      display: flex;
      flex-direction: column;
      gap: var(--gap-4);
  }
  
  .__check-item {
      display: flex;
      align-items: flex-start;
      gap: var(--gap-2);
      @media (min-width: 860px) {
          gap: 22px;
      }
  }
  
  .__check-icon {
      flex-shrink: 0;
      width: 28px;
      height: 28px;
      display: flex;
      align-items: center;
      justify-content: center;
      @media (min-width: 860px) {
          width: 40px;
          height: 40px;
          margin: 10px;
      }
  }
  
  .__check-text {
      flex: 1;
      margin-top: var(--transform-offset-tiny);
  }
  
  .__check-text p {
      font-size: var(--font-size-14);
      line-height: 1.8;
      color: var(--color-gray-4d);
      margin: 0;
      font-weight: bold;
      @media (min-width: 860px) {
          font-size: var(--font-size-32);
      }
  }
  
  /* ================================================
     Highlight Component (共通ハイライト)
     ================================================ */
  .__highlight {
      color: var(--color-gray-4d);
      font-weight: bold;
      box-shadow: inset 0 -0.5em 0 var(--color-cream);
      display: inline;
      line-height: 1.2;
  }
  
  /* PR テキスト内のハイライトはピンク色 */
  .__pr-text .__highlight {
      color: var(--color-pink);
  }
  
  /* Check テキスト内のハイライトもピンク色 */
  .__check-text .__highlight {
      color: var(--color-pink);
  }
  
  .__pink-text {
      color: var(--color-pink);
      font-weight: bold;
  }
  
  .__check-note {
      font-size: var(--font-size-8);
      @media (min-width: 860px) {
          font-size: var(--font-size-16);
      }
  }
  
  /* Detail Table Component */
  .__detail-table {
      width: 100%;
      margin-bottom: var(--margin-4);
      overflow-x: auto;
      box-sizing: border-box;
      @media (min-width: 860px) {
          margin-bottom: 48px;
      }
  }
  
  .__detail-table-content {
      width: 100%;
      border-collapse: collapse;
      margin-bottom: var(--margin-1);
      table-layout: auto;
      min-width: 100%;
      border: none !important;
  }
  
  .__detail-table-header-row {
      height: auto;
      min-height: 30px;
  }
  
  .__detail-table-header-row-secondary {
      height: auto;
      min-height: 30px;
  }
  
  .__detail-table-header {
      background-color: var(--color-blue);
      color: var(--color-white);
      font-size: clamp(12px, 3.5vw, 14px);
      font-weight: bold;
      text-align: center;
      padding: min(8px, 2vw) min(4px, 1vw);
      border-right: 1px solid var(--color-gray-d9);
      width: 33.33%;
      word-break: break-word;
      box-sizing: border-box;
      @media (min-width: 860px) {
          font-size: var(--font-size-32);
      }
  }
  
  .__detail-table-header:last-child {
      border-right: none;
  }
  .__detail-table-data.__detail-table-data-multi{
      font-weight: bold;
      @media (min-width: 860px) {
          line-height: var(--line-height-120);
          font-size: var(--font-size-24);
      }
  }
  .__detail-table-data-row {
      min-height: auto;
  }
  
  .__detail-table-data {
      background-color: var(--color-white);
      color: var(--color-gray-4d);
      text-align: center;
      padding: 13px 0;
      border: 1px solid var(--color-gray-d9);
      border-top: none;
      position: relative;
      vertical-align: middle;
      word-break: break-word;
      box-sizing: border-box;
      line-height: var(--line-height-120);
      @media (min-width: 860px) {
          padding: 32px 0;
          line-height: var(--line-height-200);
      }
  }
  
  .__detail-table-data-multi {
      line-height: var(--line-height-120);
      @media (min-width: 860px) {
          line-height: var(--line-height-160);
      }
  }
  
  .__detail-table-data-multi div {
      margin-bottom: 2px;
  }
  
  .__detail-table-data-multi div:last-child {
      margin-bottom: 0;
  }
  
  .__detail-text-small {
      font-size: clamp(10px, 3vw, 12px);
      font-weight: bold;
      @media (min-width: 860px) {
          font-size: var(--font-size-24);
      }
  }
  
  .__detail-text-large {
      font-size: clamp(14px, 4vw, 16px);
      font-weight: bold;
      @media (min-width: 860px) {
          font-size: var(--font-size-32);
      }
  }
  
  .__detail-note {
      font-size: clamp(6px, 2vw, 8px);
      color: var(--color-gray-4d);
      position: absolute;
      bottom: 1px;
      right: 2px;
      @media (min-width: 860px) {
          font-size: var(--font-size-16);
      }
  }
  
  .__detail-table-notes {
      padding: 0 var(--padding-1);
  }
  
  .__detail-table-notes p {
      font-size: clamp(8px, 2.5vw, 10px);
      line-height: var(--line-height-160);
      color: var(--color-gray-4d);
      margin: 0;
      font-weight: normal;
      @media (min-width: 860px) {
          font-size: var(--font-size-20);
      }
  }
  
  /* CTA Button Component */
  .__detail-cta {
      margin-bottom: var(--margin-12);
      width: 100%;
      text-align: center;
  }
  
  .__cta-container {
      display: inline-block;
  }
  
  .__cta-button {
      display: inline-block;
      text-decoration: none;
      margin-left: var(--margin-4);
      margin-right: var(--margin-4);
      margin-bottom: var(--margin-2);
      @media (min-width: 860px) {
          margin-bottom: var(--margin-8);
      }
  }
  
  /* Sub CTA Button */
  .__cta-sub {
      display: flex;
      justify-content: center;
      @media (min-width: 860px) {
          margin-bottom: var(--margin-12);
      }
  }
  
  .__cta-sub-button {
      display: inline-block;
      text-decoration: none;
      margin-left: 26px;
      margin-right: 26px;
  }
  
  
  /* Review Section */
  .__detail-review {
      margin-top: 0;
  }
  
  .__review-contents {
      display: flex;
      flex-direction: column;
      gap: 0;
  }
  
  .__review-item {
      padding: var(--padding-8) var(--padding-4);
      border-bottom: 1px dashed #cbcbcb;
      position: relative;
      @media (min-width: 860px) {
          padding: var(--padding-12) var(--padding-8);
      }
  }
  
  .__review-item:last-child {
      border-bottom: none;
  }
  
  .__review-text {
      font-size: var(--font-size-14);
      line-height: 1.8;
      color: var(--color-gray-4d);
      overflow: hidden;
      @media (min-width: 860px) {
          font-size: var(--font-size-32);
      }
  }
  
  .__review-text::after {
      content: "";
      display: table;
      clear: both;
  }
  
  .__review-text .__review-profile {
      float: left;
      margin-right: var(--margin-4);
      margin-bottom: var(--margin-4);
      @media (min-width: 860px) {
          margin-right: 52px;
      margin-bottom: 52px;
      }
  }
  
  .__review-text-reverse .__review-profile {
      float: right;
      margin-left: var(--margin-4);
      margin-right: 0;
      margin-bottom: var(--margin-4);
  }
  
  .__review-profile {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: var(--gap-3);
      flex-shrink: 0;
  }
  
  .__review-avatar {
      width: 80px;
      height: 80px;
      border-radius: 50%;
      overflow: hidden;
      background-color: var(--color-gray-d9);
      @media (min-width: 860px) {
          width: 176px;
          height: 176px;
      }
  }
  
  .__review-avatar img {
      width: 100%;
      height: 100%;
      object-fit: cover;
  }
  
  .__review-name {
      font-size: var(--font-size-14);
      font-weight: bold;
      color: var(--color-black);
      text-align: center;
      white-space: nowrap;
      @media (min-width: 860px) {
          font-size: 30px;
      }
  }
  
  .__review-text p {
      margin: 0;
  }
  
  .__review-highlight {
      color: var(--color-gray-4d);
      font-weight: bold;
      box-shadow: inset 0 -0.5em 0 var(--color-cream);
      display: inline;
      line-height: 1.2;
  }
  
  .__review-highlight-red {
      color: var(--color-pink);
      font-weight: bold;
      box-shadow: inset 0 -0.5em 0 var(--color-cream);
      display: inline;
      line-height: 1.2;
  }
  
  /* レビューもっと見るボタン */
  .__detail-moreReview {
      padding: var(--padding-6) 0;
      text-align: center;
  }
  
  .__more-review-button {
      transition: opacity 0.3s ease;
  }
  
  .__more-review-button:hover {
      opacity: 0.8;
  }
  
  /* ================================================
     Pickup Section Styles
     ================================================ */
  
  .__pickup {
      padding: var(--padding-4);
      background-color: #fdfdd5;
      display: flex;
      flex-direction: column;
      gap: var(--gap-3);
      @media (min-width: 860px) {
          padding: var(--padding-12) var(--padding-8);
      }
  }
  
  /* 第1パート（上部）*/
  .__pickup_title01 {
      text-align: center;
  }
  
  /* 第2パート（中央）*/
  .__pickup_title02 {
      text-align: center;
  }
  
  /* 第3パート（メインコンテンツ）*/
  .__pickup_contents {
      background-color: var(--color-white);
      border: var(--border-width-thin) solid var(--color-pink);
      border-radius: var(--radius-small);
      padding: var(--padding-4);
      display: flex;
      flex-direction: column;
      gap: var(--gap-2);
      align-items: center;
  }
  
  .__pickup_contents_header {
      text-align: center;
  }
  
  .__pickup_contents_body {
      display: flex;
      flex-direction: column;
      gap: var(--gap-4);
      align-items: center;
      width: 100%;
      @media (min-width: 860px) {
          gap: 32px;
      }
  }
  
  .__pickup_contents_info {
      text-align: center;
  }
  
  
  /* CTAボタン */
  .__pickup_contents_cta {
      display: flex;
      flex-direction: column;
      gap: var(--gap-3);
      align-items: center;
      width: 100%;
      @media (min-width: 860px) {
          gap: 32px;
      }
  }
  
  .__pickup_cta_main {
      width: 100%;
      text-align: center;
  }
  
  .__pickup_cta_button {
      display: inline-block;
      transition: opacity 0.3s ease;
  }
  
  .__pickup_cta_button:hover {
      opacity: 0.8;
  }
  
  .__pickup_cta_button img {
      width: 100%;
      max-width: 320px;
      height: auto;
      @media (min-width: 860px) {
          max-width: 720px;
      }
  }
  
  .__pickup_cta_sub {
      width: 100%;
      text-align: center;
  }
  
  .__pickup_cta_sub_button {
      display: inline-block;
      transition: opacity 0.3s ease;
  }
  
  .__pickup_cta_sub_button:hover {
      opacity: 0.8;
  }
  
  .__pickup_cta_sub_button img {
      width: 100%;
      max-width: 260px;
      height: auto;
      @media (min-width: 860px) {
          max-width: 604px;
      }
  }
  
  /* 注意書き */
  .__pickup_contents_note {
      text-align: center;
      font-size: var(--font-size-10);
      line-height: var(--line-height-160);
      color: var(--color-gray-4d);
      @media (min-width: 860px) {
          font-size: var(--font-size-12);
          margin-bottom: var(--margin-4);
      }
  }