@charset "UTF-8";
/* CSS Document */

/* --------------------------------------------------
       Base & Reset Styles
    -------------------------------------------------- */
    html {
      scroll-behavior: smooth;
    }
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }
    body {
      font-family: "Noto Sans JP", sans-serif;
      font-optical-sizing: auto;
      font-style: normal;
      font-weight: 400;
      color: #333333;
      line-height: 1.6;
      overflow-x: hidden;
    }
    a {
      color: #1e7e34;
      text-decoration: none;
    }
    a:hover {
      text-decoration: underline;
    }
    img {
      max-width: 100%;
      height: auto;
      vertical-align: middle;
    }
	  
/* PC表示時は改行タグを非表示 */
.sp-only {
  display: none;
}

/* SP（768px以下）の時だけ改行を表示 */
@media (max-width: 768px) {
  .sp-only {
    display: block; /* または inline */
  }
}
/* SP表示時は改行タグを非表示 */
.pc-only {
  display: inline; /* <br> タグなので inline が自然です */
}

/* SP（768px以下）の時だけ非表示にする */
@media (max-width: 768px) {
  .pc-only {
    display: none;
  }
}
    
    /* Container */
    .container {
      max-width: 800px;
      margin: 0 auto;
    }

    /* --------------------------------------------------
       Hero / Main Visual
    -------------------------------------------------- */
    .hero {
      background-color: #ffffff;
      text-align: center;
      padding: 0 0 30px 0;
      max-width: 800px;
      margin: 0 auto;
    }
    .hero-img {
      width: 100%;
      height: auto;
      display: block;
    }
    .hero-pc {
      display: block;
    }
    .hero-sp {
      display: none;
    }
    @media (max-width: 768px) {
      .hero-pc {
        display: none;
      }
      .hero-sp {
        display: block;
      }
    }

    /* --------------------------------------------------
       販売開始日デザインセクション
    -------------------------------------------------- */
    .sale_start {
      width: 630px;
      margin: 30px auto;
    }

    .sale_title {
      background: #049d39;
      color: #fff;
      text-align: center;
      font-size: 28px;
      font-weight: 700;
      border-radius: 30px;
      padding: 6px 0;
      letter-spacing: 2px;
      box-shadow: 0 4px 10px rgba(4, 157, 57, 0.15);
    }

    .date_wrap {
      position: relative;
      padding: 0 30px;
    }

    .year {
      position: absolute;
      top: 27px;
      right: 35px;
      font-size: 27px;
      font-weight: 700;
      letter-spacing: 2px;
    }

    .date {
      display: flex;
      justify-content: center;
      align-items: flex-end;
      line-height: 1;
    }

    .month_num,
    .day_num {
      font-size: 160px;
      font-weight: 900;
      letter-spacing: 5px;
    }

    .month,
    .day{
      font-size: 80px;
      font-weight: 900;
      margin-right: 10px;
      margin-bottom: 10px;
    }

    .week {
      width: 70px;
      height: 70px;
      background: #049d39;
      color: #fff;
      border-radius: 50%;
      display: inline-block;
      text-align:center;
      line-height: 68px;
      font-size: 45px;
      font-weight: 700;
      margin-bottom: 8px;
    }

    .bottom {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-top: -6px;
      padding-left: 8px;
      padding-right: 2px;
    }

    .time {
      font-size: 62px;
      font-weight: 900;
      letter-spacing: 1px;
    }

    .notice {
      border: 2px solid #049d39;
      border-radius: 30px;
      padding: 6px 22px;
      font-size: 14px;
      font-weight: 500;
      margin-bottom: -5px;
      white-space: nowrap;
      background-color: #f2f8ea;
    }

    @media (max-width: 630px) {
      .sale_start {
        position: relative;
        width: 91vw;
        max-width: 580px;
        height: calc(300px * ((89vw) / 580px));
        margin: 16px auto 13px auto;
        overflow: hidden;
      }
      .sale_start-inner {
        width: 580px;
        position: absolute;
        top: 0;
        left: 50%;
        transform: translateX(-50%) scale(calc((89vw) / 580px));
        transform-origin: top center;
      }
      .year {
        top: 27px;
        right: 8px;
      }
      .week {
        flex-shrink: 0;
      }
      .bottom {
        padding-left: 0;
        padding-right: 0;
        gap: 12px;
      }
    }


    /* --------------------------------------------------
       利用可能期間 セクション
    -------------------------------------------------- */
    .hero-period-section {
      background-color: #ffd700;
      padding: 28px 16px 43px 16px;
      text-align: center;
      margin-top: 40px;
      box-shadow: inset 0 2px 4px rgba(0,0,0,0.05);
    }

    .hero-period-section h2 {
      position: relative;
      display: inline-block;
      padding: 0 10px 5px 10px;
      margin-bottom: 12px;
      border-bottom: 2px solid #333333;
      color: #333333;
      font-weight: 600;
      font-size: 26px;
      letter-spacing: 2px;
      text-align: center;
    }

    .hero-period-section h2:before,
    .hero-period-section h2:after {
      position: absolute;
      top: 100%;
      left: 50%;
      content: "";
      height: 0;
      width: 0;
      pointer-events: none;
    }

    .hero-period-section h2:before {
      border: 10px solid transparent;
      border-top-color: #333333;
      margin-left: -10px;
      z-index: 1;
    }

    .hero-period-section h2:after {
      border: 7px solid transparent;
      border-top-color: #ffd700;
      margin-left: -7px;
      margin-top: 0px;
      z-index: 2;
    }

    .hero-period-dates {
      font-size: 70px;
      font-weight: 800;
      color: #111111;
      letter-spacing: 1px;
      line-height: 1.2;
      white-space: nowrap;
    }

    .hero-period-dates .small-text {
      font-size: 37px;
      margin: 0 1px;
    }

    @media (max-width: 768px) {
    .hero-period-section {
        margin-top: 24px;
        padding-top: 17px;
        padding-bottom: 23px;
    }
      .hero-period-section h2 {
        font-size: 23px;
      }
      .hero-period-dates {
        font-size: 9vw;
      }
      .hero-period-dates .small-text {
        font-size: 5vw;
      }
    }

    /* --------------------------------------------------
       商品概要リスト（PC基準660px）
    -------------------------------------------------- */
    .summary-list-wrapper {
      width: 100%;
      max-width: 660px;
      margin: 40px auto 0 auto;
      position: relative;
    }

    .summary-list-inner {
      width: 660px;
      margin: 0 auto;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 16px;
      background: #ffffff;
      padding: 20px 0;
      border-radius: 12px;
    }

    .summary-row {
      display: inline-flex;
      align-items: center;
      gap: 30px;
    }

    .summary-label {
      position: relative;
      background-color: #008f3d;
      color: #ffffff;
      font-size: 21px;
      font-weight: 700;
      padding: 11px 17px 11px 44px;
      border-top-left-radius: 40px;
      border-bottom-left-radius: 40px;
      border-top-right-radius: 6px;
      border-bottom-right-radius: 6px;
      letter-spacing: 1px;
      white-space: nowrap;
      width: 160px;
      box-sizing: border-box;
      display: flex;
      align-items: center;
      flex-shrink: 0;
      box-shadow: 2px 2px 6px rgba(0,0,0,0.08);
    }

    .summary-label::before {
      content: "";
      position: absolute;
      left: 19px;
      top: 50%;
      transform: translateY(-50%);
      width: 13px;
      height: 13px;
      background-color: #ffffff;
      border-radius: 50%;
    }

    .summary-content {
      min-width: 315px;
      text-align: left;
      color: #111111;
      font-weight: 800;
      line-height: 1.25;
      white-space: nowrap;
    }

    .text-large {
      font-size: 34px;
      font-weight: 800;
      letter-spacing: -0.5px;
    }

    .text-medium {
      font-size: 21px;
      font-weight: 700;
    }

    .text-sub {
      font-size: 17px;
      font-weight: 600;
      color: #555555;
      display: block;
      margin-top: 2px;
    }

    .text-multiline {
      font-size: 24px;
      font-weight: 800;
      line-height: 1.35;
      white-space: normal;
    }

    .summary-divider {
      width: 570px;
      max-width: 90%;
      height: 1px;
      border: none;
      margin: 4px auto;
      background-image: linear-gradient(to right, #008f3d 50%, rgba(255, 255, 255, 0) 0%);
      background-position: top;
      background-size: 10px 2px; 
      background-repeat: repeat-x;
    }

    @media (max-width: 660px) {
      .summary-list-wrapper {
        width: 92vw;
        max-width: 660px;
        height: calc(450px * ((108vw) / 660px));
        margin: 20px auto 10px auto;
        overflow: hidden;
      }
      .summary-list-inner {
        position: absolute;
        left: 51%;
        transform: translateX(-50%) scale(calc((108vw) / 660px));
        transform-origin: top center;
      }
      .summary-divider {
        width: 520px;
        transform: translateX(-12px);
      }
    }	

    /* --------------------------------------------------
       決済方法 セクション（PC基準560px）
    -------------------------------------------------- */
    .payment-section-wrapper {
      width: 100%;
      max-width: 560px;
      margin: 15px auto 0 auto;
      position: relative;
    }

    .payment-section-inner {
      width: 560px;
      margin: 0 auto;
      background: #ffffff;
      padding: 26px 20px 20px 20px;
      box-sizing: border-box;
      text-align: center;
      border-radius: 12px;
    }

    .payment-section-inner h2 {
      position: relative;
      display: block;
      width: 100%;
      max-width: 580px;
      margin: 0 auto 45px auto;
      padding: 3px 10px;
      border-top: 2px solid #008f3d; 
      border-bottom: 2px solid #008f3d; 
      color: #008f3d;
      font-weight: 700;
      font-size: 25px;
      letter-spacing: 2px;
      text-align: center;
    }

    .payment-section-inner h2:before,
    .payment-section-inner h2:after {
      position: absolute;
      top: 100%;
      left: 50%;
      content: "";
      height: 0;
      width: 0;
      pointer-events: none;
    }

    .payment-section-inner h2:before {
      border: 10px solid transparent;
      border-top-color: #008f3d;
      margin-left: -10px;
      z-index: 1;
    }

    .payment-section-inner h2:after {
      border: 7px solid transparent;
      border-top-color: #ffffff;
      margin-left: -7px;
      margin-top: 0px;
      z-index: 2;
    }

    .payment-sub-title {
      background-color: #f2f8ea;
      color: #008f3d;
      font-size: 20px;
      font-weight: 800;
      padding: 5px 16px;
      border-radius: 30px;
      margin: 15px auto 18px auto;
      width: 100%;
      max-width: 580px;
    }

    .payment-sub-title .sub-note {
      font-size: 16px;
      font-weight: 700;
      margin-left: 4px;
    }

    .logo-list {
      display: flex;
      justify-content: center;
      align-items: center;
      flex-wrap: wrap;
      gap: 18px 24px;
      margin-bottom: 35px;
      padding: 0 10px;
    }

    .logo-item {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 62px;
    }

    .logo-item img {
      height: 100%;
      width: auto;
      object-fit: contain;
    }

    .logo-item-lawson img {
      max-height: 55%;
    }

    @media (max-width: 660px) {
      .payment-section-wrapper {
        width: 88vw;
        max-width: 560px;
        height: auto;
        margin: -25px auto 0 auto;
        overflow: visible;
      }
      .payment-section-inner {
        position: static;
        width: 100%;
        transform: none;
        padding: 20px 15px 3px 15px;
      }
      .payment-section-inner h2 {
        font-size: 22px;
        margin-bottom: 30px;
        padding: 3px 10px;
      }
		
      .payment-sub-title {
       font-size: 18px; 
        padding: 4px 16px;
        margin: 15px auto 12px auto;
      }
      .payment-sub-title .sub-note {
        font-size: 15px;
      }
      .logo-list {
        display: grid;
        grid-template-columns: repeat(2, 1fr); /* 2列に均等配置 *//*これでエラーが出ているが問題ない*/
        gap: 12px 1px;                        /* 縦横の隙間 */
        justify-items: center;
        margin-bottom: 24px;
      }
      .logo-item {
        height: 55px; /* スマホでちょうど見やすい高さに調整 */
      }
    }

    /* --------------------------------------------------
       ご購入・ご利用上の注意
    -------------------------------------------------- */
    .notice-card {
      background-color: #eeeeee;
      border-radius: 10px;
      padding: 35px 60px;
      margin: 0 auto 50px auto;
      max-width: 500px;
      color: #333333;
      text-align: center;
      box-sizing: border-box;
    }

    .notice-card-title {
      font-size: 22px;
      font-weight: 800;
      letter-spacing: 1px;
      margin-bottom: 12px;
      color: #111111;
    }

    .notice-card-body {
      text-align: justify;
      text-justify: inter-ideograph;
      font-size: 14px;
      line-height: 1.75;
      font-weight: 400;
      color: #444444;
    }

    @media (max-width: 660px) {
      .notice-card {
        width: 85vw;
        max-width: 500px;
        padding: 30px 33px;
        margin: 10px auto 20px auto;
      }
      .notice-card-title {
        font-size: 18px;
        margin-bottom: 7px;
      }
      .notice-card-body {
        font-size: 13px;
        line-height: 1.6;
        word-break: break-word;
      }
    }

    /* --------------------------------------------------
       App Download Section (PC基準 680px)
    -------------------------------------------------- */
    .app-download-section {
      background-color: #f4f8ea;
      padding: 60px 30px;
    }

    .app-download-wrapper {
      width: 100%;
      max-width: 680px;
      margin: 0 auto;
      position: relative;
    }

    .app-download-card {
      width: 680px;
      margin: 0 auto;
    }

    .app-download-header {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 45px;
      margin-bottom: 28px;
    }

    .app-download-text {
      color: #008f3d;
      font-size: 32px;
      font-weight: 700;
      line-height: 1.5;
      white-space: nowrap;
    }
	  
    .app-download-text-large {
      font-size: 45px;
      font-weight: 900;
      display: inline-block;
      line-height: 1.1;
      vertical-align: -2px;
    }

    .app-download-text .highlight {
      background: linear-gradient(transparent 60%, #ffff00 60%);
      background-repeat: no-repeat;
      background-position: center bottom;
      background-size: 95% 100%;
      color: #008f3d;
      padding: 0;
    }

    .app-download-icon {
      flex-shrink: 0;
      width: 170px;
    }

    .app-download-icon img {
      display: block;
      width: 100%;
      height: auto;
      border-radius: 18px;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
      border: 1px solid #7D7D7D;
    }

    .app-download-tag {
      position: relative;
      background-color: #008f3d;
      color: #ffff00;
      font-size: 20px;
      font-weight: 700;
      text-align: center;
      padding: 4px 50px;
      border-radius: 30px;
      width: fit-content;
      margin: 10px auto 26px auto;
      letter-spacing: 1px;
    }

    .app-download-tag::after {
      content: "";
      position: absolute;
      top: 100%;
      left: 50%;
      transform: translateX(-50%);
      border-width: 9px 9px 0 9px;
      border-style: solid;
      border-color: #008f3d transparent transparent transparent;
    }

    .store-btns-wrap {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 45px;
      margin-bottom: 28px;
      flex-wrap: nowrap;
    }
      
    /* マウスを乗せる前の状態 */
    .app-download-btn {
      transition: opacity 0.3s ease;
      opacity: 1.0;
    }

    /* マウスを乗せた時の状態 */
    .app-download-btn:hover {
      opacity: 0.9;
    }

    .store-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      width: 220px;
    }
    
    .store-item:nth-child(2) .device-note {
      margin-top: 21px; 
    }

    .store-item img {
      width: 100%;
      height: auto;
      transition: opacity 0.2s;
    }

    .store-item img:hover {
      opacity: 0.6;
    }

    .device-note {
      font-size: 14px;
      font-weight: 700;
      color: #333333;
      margin: 6px auto 0 auto;
      white-space: nowrap;
    }

    .app-download-notes {
      font-size: 12px;
      color: #333333;
      text-align: left;
      display: table;   
      margin: 0 auto;
      white-space: nowrap;
    }

    @media (max-width: 680px) {
      .app-download-section {
        padding: 35px 30px;
      }
      .app-download-wrapper {
        width: 88vw;
        max-width: 680px;
        height: calc(480px * ((89vw) / 680px));
        margin: 0 auto;
        overflow: hidden;
        position: relative;
      }
      .app-download-card {
        width: 680px;
        position: absolute;
        top: 0;
        left: 50%;
        transform: translateX(-50%) scale(calc((88vw) / 680px));
        transform-origin: top center;
      }
      .app-download-header {
        margin-bottom: 35px;
      }
      .app-download-notes {
        width: fit-content;      
        max-width: 100%;
        margin: 20px auto 0 auto; 
        font-size: 9.5px;          
        line-height: 1.4;
      }
      .device-note {
        font-size: 24px;
      }
      .store-item {
        width: 300px;
      }
      .app-download-tag {
        font-size: 32px;
        margin: 10px auto 40px auto;
        border-radius: 50px;
        padding: 6px 70px;
      }
      .app-download-tag::after {
        content: "";
        position: absolute;
        top: 100%;
        left: 50%;
        transform: translateX(-50%);
        border-width: 9px 9px 0 9px;
        border-style: solid;
        border-color: #008f3d transparent transparent transparent;
      }
    .store-btns-wrap {
      justify-content: normal;
      }
    }

    /* --------------------------------------------------
       チケット詳細テーブル
    -------------------------------------------------- */
    .table_design02 {
      border-collapse: collapse;
      width: 100%;
      max-width: 600px;
      margin: 0 auto;
      font-size: 16.5px;  
    }
    .table_design02 tr {
      background-color: #dedede;
    }
    .table_design02 tr:nth-child(odd) {
      background-color: #f4f4f4;
    }
    .table_design02 th, .table_design02 td {
      padding: 20px;
    }
    .table_design02 th {
      text-align: center;
      width: 35%;
      min-width: 4em;
    }
      
/* スマホ用（左右の隙間を増やしてゆとりを持たせる） */
@media screen and (max-width: 767px) {
  .table_design02 {
    /* 左右の隙間を合計60px（片側30px）にする */
    width: calc(100% - 60px); 
    margin: 0 auto;
    font-size: 13.5px;  /* さらに文字を少しだけ小さくするとより余裕が生まれます */
      line-height: 1.6;
      letter-spacing: 0.038em;
  }

  .table_design02 th, 
  .table_design02 td {
    padding: 13px;   
  }

  .table_design02 th {
    /* 必要であれば左側を少し広げて文字の折り返しを防ぐ */
    width: 35%;               
  }
}

    /* --------------------------------------------------
       Navigation Anchor Links
       Section Common
       Steps / How to Use
    -------------------------------------------------- */
    .usage-section {
      width: 100%;
      background-color: #f4f8ea; /* 全体背景（黄緑色） */
      padding: 60px 15px;
      box-sizing: border-box;
      color: #111111;
    }

    .usage-container {
      max-width: 800px;
      margin: 0 auto;
    }

    .usage-title {
      text-align: center;
      font-size: 40px;
      font-weight: 800;
      color: #008f3d;
      margin-bottom: 10px;
    }

    .usage-note {
      font-size: 12.5px;
      color: #666666;
      text-align: center;
      margin-bottom: 20px;
      line-height: 1.5;
    }

    .banner-red {
      color: #d80000;
      font-size: 16px;
      font-weight: 700;
      text-align: center;
      border-top: 1.5px solid #d80000;
      border-bottom: 1.5px solid #d80000;
      padding: 11px 10px;
      letter-spacing: 0.4px;
      max-width: 480px;
      margin: 0 auto 35px auto;
    }
@media (max-width: 600px) {
	    .usage-section {
      padding: 23px 15px;
    }
    .usage-title {
      font-size: 37px;
    }
   .usage-note {
      font-size: 11px;
    }
	    }
      
    /* -----------------------------------
       目次ナビゲーション
       ----------------------------------- */
    .usage-nav {
      background-color: #ffffff;
      border-radius: 12px;
      padding: 30px 20px 18px 20px;
      text-align: center;
      max-width: 500px;
      margin: 0 auto 40px auto;
      /* x軸 y軸 ぼかし 拡大/縮小 カラー(黒の透明度10%) */
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    }

    .nav-lead {
      font-size: 28px;
      font-weight: 800;
      color: #008f3d;
      margin-bottom: 15px;
      letter-spacing: 0.02em;
    }

    .nav-list {
      list-style: none;
      padding: 0;
      margin: 0 auto;
      max-width: 360px;
      display: flex;
      flex-direction: column;
      align-items: center;
    }

    .nav-list li {
      width: 100%;
    }

    /* ボタン共通 */
    .flow-item {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      box-sizing: border-box;
      padding: 9px 15px;
      border-radius: 50px;
      font-size: 20px;
      font-weight: 600;
      text-decoration: none;
      transition: all 0.2s ease;
    }

    .flow-item .num {
      font-size: 20px;
      font-weight: 600;
      margin-right: 12px;
    }
      
    /* 【1・3番目】白背景 × 緑枠 */
    .nav-list li:nth-child(4n+1) .flow-item {
      background-color: #ffffff;
      border: 1.5px solid #008f3d;
      color: #222222;
    }

    .nav-list li:nth-child(4n+1) .flow-item .num {
      color: #008f3d;
    }
      
    /* 【2・4番目】緑背景 */
    .nav-list li:nth-child(4n+3) .flow-item {
      background-color: #008f3d;
      border: 1.5px solid #008f3d;
      color: #ffffff;
    }

    .nav-list li:nth-child(4n+3) .flow-item .num {
      color: #ffee00;
    }
      
    /* ホバー設定 */
    .flow-item:hover {
      box-shadow: 6px 6px 0px #c8e6c9;
      text-decoration: none;
    }

    /* 項目間の矢印 */
    .nav-arrow {
      color: #008f3d;
      font-size: 20px;
      font-weight: 500;
      line-height: 1;
      padding: 7.5px 0;
      user-select: none;
    }

    .nav-sub {
      font-size: 15px;
      color: #555555;
      font-weight: 400;
      margin-bottom: 18px;
      margin-top: 13px;
    }

@media (max-width: 600px) {
    .nav-lead {
      font-size: 20.5px;
      margin-bottom: 15px;
    }
	/* リスト全体の横幅を縮めて左右に余白を作る */
  .nav-list {
    width: 90%; /* 画面幅に対して85%に抑え、左右に15%分の白余白を確保 */
  }

  /* ボタン全体のサイズ感をひとまわり小さく調整 */
  .flow-item {
    font-size: 18px;   /* 20px → 16px に落としてスッキリ化 */
    padding: 8px 10px; /* 内側のパディングを調整 */
  }

  /* 数字（1. 2. ...）のサイズと間隔も調整 */
  .flow-item .num {
    font-size: 16px;   /* 文字サイズを揃える */
    margin-right: 8px; /* 右側の空きを少し詰める */
  }
	    .nav-sub {
      font-size: 13px;
      margin-bottom: 13px;
      margin-top: 20px;
    }
	    }

    /* -----------------------------------
       ステップコンテンツエリア
       ----------------------------------- */
    .step-block {
      width: 100%;
      max-width: 630px;
      margin: 0 auto 50px auto;
      scroll-margin-top: 20px;
    }

    .step-header-img {
      margin: 0 0 15px 0;
    }

    .step-header-img img {
      width: 100%;
      max-width: 700px;
      height: auto;
      display: block;
      margin: 0 auto;
    }

    /* スクロール注意文言 */
    .scroll-notice {
      font-size: 15px;
      color: #008f3d;
      font-weight: 700;
      margin-top: 7px;
      margin-bottom: 8px;
      text-align: right;
    }

    /* 外側の白いカード */
    .step-scroll-outer {
      background-color: #ffffff;
      border-radius: 20px;
      padding: 48px 35px 40px 35px;
    }

    /* 内側のスクロール領域 */
    .scroll-inner-box {
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
      padding-bottom: 10px;
    }
	  
    /* スクロールバー設定（デフォルト） */
    .scroll-inner-box::-webkit-scrollbar {
      height: 8px;
    }
	  
    .scroll-inner-box::-webkit-scrollbar-track {
      background: #eef0f2;
      border-radius: 10px;
      margin: 0 5px;
    }
	  
    .scroll-inner-box::-webkit-scrollbar-thumb {
      background: #a0a0a0;
      border-radius: 10px;
    }
	  
    .scroll-inner-box::-webkit-scrollbar-thumb:hover {
      background: #888888;
    }

    /* 【STEP3専用】スクロールバーを非表示にする設定 */
    #step3 .scroll-inner-box {
      scrollbar-width: none; /* Firefox用 */
      -ms-overflow-style: none; /* IE, Edge用 */
    }
    #step3 .scroll-inner-box::-webkit-scrollbar {
      display: none; /* Chrome, Safari, Opera用 */
    }

    .step-flow-list {
      display: flex;
      align-items: flex-start;
      min-width: max-content;
      margin: 0 auto;
      padding: 0;
      list-style: none;
    }
      

    /* -----------------------------------
       カード共通 & 個別調整
       ----------------------------------- */
    .step-flow-item {
      flex-shrink: 0;
      width: 100%;
      max-width: 290px; 
      padding: 0 55px;  /* 左右の余白 */
      box-sizing: border-box;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      position: relative;
    }

    /* STEP 1の最初のカード（①）だけ例外的に幅を広くする設定 */
    #step1 .step-flow-list .step-flow-item:first-child {
      width: 100%;
      max-width: 460px; 
      padding: 0 35px 0 25px;
      align-items: flex-start;
    }

    .step-flow-item:not(:last-child)::after {
      content: "";
      position: absolute;
      right: 0;
      top: 0;
      height: 400px;
      border-right: 1.5px dashed #cccccc;
    }

    .item-badge {
      width: 32px;
      height: 32px;
      background-color: #008f3d;
      color: #ffffff;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 16px;
      font-weight: 800;
      margin-bottom: 35px;
      margin-left: 0;
    }

    .item-img-box {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 15px;
      margin-top: -16px; 
      color: #888888;
      font-weight: 700;
    }

    .item-img-box img {
      width: 175px;
      max-width: 100%;
      height: auto;
      display: block;
    }
      
/* -----------------------------------
       STEP 1 専用レイアウト
       ----------------------------------- */
    .step1-card {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 2px;
      width: 100%;
      height: 220px;
      margin-bottom: 33px;
    }

    .card-left {
      flex: 0 0 135px;
    }

    .phone-mockup {
      border: 4px solid #8e8e93;
      border-radius: 16px;
      padding: 2px;
      background-color: #8e8e93;
      overflow: hidden;
      box-sizing: border-box;
    }
	  
    .img-phone {
      width: 100% !important;
      height: auto !important;
      display: block;
      border-radius: 12px;
    }

    .card-right {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 6px;
    }

    .app-info {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      width: 100%;
      margin-bottom: 6px;
    }

    .img-logo {
      width: 60px;
      height: 60px;
      object-fit: cover;
      border-radius: 10px;
      border: 1px solid #d0d0d0;
      flex-shrink: 0;
      margin-right: 8px;
    }

    .app-text {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
    }

    .app-tag {
      display: block;
      width: 100%;
      max-width: 130px;
      text-align: center;
      background-color: #666666;
      color: #ffffff;
      font-size: 10px;
      font-weight: 700;
      padding: 2px 0;
      border-radius: 10px;
      line-height: 1.3;
      box-sizing: border-box;
    }

    .app-name {
      font-size: 17px;
      font-weight: 800;
      color: #000000;
      margin-top: 2px;
      white-space: nowrap;
    }

    .dl-speech-bubble {
      position: relative;
      background-color: #008f3d;
      color: #ffeb3b;
      font-size: 12.5px;
      font-weight: 700;
      padding: 3px 6px;
      margin: 0 auto 6px auto;
      border-radius: 12px;
      text-align: center;
      width: 205px;
      box-sizing: border-box;
      white-space: nowrap;
    }

    .dl-speech-bubble::after {
      content: "";
      position: absolute;
      bottom: -4px;
      left: 50%;
      transform: translateX(-50%);
      border-width: 4px 4px 0;
      border-style: solid;
      border-color: #008f3d transparent transparent;
      display: block;
      width: 0;
    }

    .store-link {
      display: block;
      width: 73%;
    }
    .store-link:hover {
      opacity: 0.6;
      transition: opacity 0.2s ease;
    }

    .img-store {
      width: 100%;
      height: auto;
      display: block;
    }

    .item-desc {
      font-size: 13px;
      line-height: 1.5;
      color: #333333;
      margin-bottom: 40px;
      width: 100%;
      text-align: left;
    }
      
    /* STEP 1の5番目の画像だけ個別にサイズや位置を調整するCSS */
    .img-step1-5 {
      width: 213px !important; 
      max-width: none !important; 
      margin-top: -34px;
      margin-right: -34px;  
    }
      
 /* -----------------------------------
       STEP 4 ④ 専用レイアウト
       ----------------------------------- */
    #step4 .step-flow-list .step-flow-item:nth-child(4) {
      width: 100%;
      max-width: 505px;
      padding: 0 35px 0 25px;
    }
      
    #step4 .step-flow-item:not(:last-child)::after {
      height: 450px !important;
    }

    .step4-card {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 15px;
      width: 100%;
      margin-bottom: 15px;
      background-color: #8e8e93;
      border-radius: 16px;
      padding: 20px 20px;
      box-sizing: border-box;
    }

    .step4-card-left {
      flex: 0 0 190px;
    }

    .step4-card-right {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
    }

    .step4-panel-title {
      color: #ffffff;
      font-size: 23px;
      font-weight: 700;
      text-align: center;
      line-height: 1.3;
      margin-bottom: 12px;
    }

    .step4-text-box {
      background-color: #ffffff;
      border-radius: 16px;
      padding: 16px 20px;
      width: 100%;
      box-sizing: border-box;
      text-align: left;
    }

    .step4-main-desc {
      font-size: 13px;
      font-weight: 700;
      color: #111111;
      line-height: 1.5;
      margin-bottom: 12px;
      font-feature-settings: "palt";
    }

    .step4-main-desc strong {
      font-weight: 800;
    }

    .step4-sub-desc {
      font-size: 11px;
      color: #e60012;
      font-weight: 700;
      line-height: 1.4;
      margin-top: 8px;
    }
      
/* -----------------------------------
       警告ボックス
       ----------------------------------- */
    .alert-box {
      background-color: #e60012;
      color: #ffffff;                  
      padding: 28px 15px;              
      border-radius: 12px;             
      font-size: 28px;                 
      font-weight: 700;
      margin: 0 auto 25px auto;        
      text-align: center;              
      line-height: 1.3;
      box-sizing: border-box;
      max-width: 500px;                
    }

    .alert-content-inner {
      display: inline-block;
      text-align: left;                
    }

    .alert-main-text {
      color: #ffee00;
      font-weight: 700;
    }

    .alert-main-text strong {
      color: #ffee00;
      font-weight: 800;
      font-size: 1.3em;                
      text-decoration: none;           
      border-bottom: 1.5px solid #ffee00; 
      padding-bottom: 0.5px;
      font-feature-settings: "palt";
    }

    .alert-sub {
      font-size: 13px;               
      color: #ffffff;
      margin-top: 23px;                 
      font-weight: 400;                
      line-height: 1.5;
      text-align: center;
    }
@media (max-width: 600px) {
    .alert-box {               
      padding: 28px 30px; 
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0 auto 25px auto;
      max-width: 400px; 
    }
    .alert-main-text {
      font-size: 15pt;  
      font-weight: 700;
    }
    .alert-main-text strong {
      font-size: 20pt;                
      text-decoration: none;           
    }
	    .alert-sub {
      font-size: 13.5px;               
      text-align: left;
      display: flex;
      align-items: center;
      justify-content: center;
      line-height: 1.5;
    }
    .item-desc {
      font-size: 14px;
    }
	    }

/* -----------------------------------
       コンビニ案内エリア
       ----------------------------------- */
    .convenience-box {
      background-color: #ffffff;
      padding: 25px 20px;
      border-radius: 16px;
      text-align: center;
      max-width: 500px;
      margin-top: 15px;
      margin-left: auto;
      margin-right: auto;
      box-sizing: border-box;
    }

    .cvs-title-badge {
      display: inline-block;
      border: 1.5px solid #008f3d;
      border-radius: 50px;
      color: #008f3d;
      font-size: 16px;
      font-weight: 700;
      padding: 6px 60px;
      margin-bottom: 23px;
      background-color: #ffffff;
    }

    .cvs-logos-grid {
      display: flex;
      flex-direction: column;
      gap: 15px;
      align-items: center;
      width: 100%;
      max-width: 380px;
      margin: 0 auto;
    }

    .cvs-row {
      display: flex;
      justify-content: space-around;
      align-items: center;
      width: 100%;
    }

    .cvs-row img {
      display: block;
      object-fit: contain;
    }
      
    .cvs-famima   { width: 195px; height: auto; }
    .cvs-daily    { width: 95px;  height: auto; margin-left: -30px;}  
    .cvs-lawson   { width: 185px; height: auto; }
    .cvs-ministop { width: 115px;  height: auto; margin-left: -30px;}  

/* クレジットカード用のクラス調整 */
    .cc-visa   { width: 110px; height: auto; }
    .cc-master { width: 65px;  height: auto; }  
    .cc-jcb    { width: 100px; height: auto; }
    .cc-amex   { width: 95px;  height: auto; }

    /* ※スマホ等でのはみ出しやレイアウト崩れを防ぐ共通設定 */
    .cvs-row img {
      display: block;
      object-fit: contain;
      max-width: 100%;
      height: auto;
    }

 /* STEP 2 の左寄せ＆移動設定 */
    #step2 .step-flow-list {
      justify-content: flex-start;
      transform: translateX(-32px); 
      margin-right: -500px;
    }
      
    #step2 .step-scroll-outer {
      padding: 48px 35px 40px 35px;
    }

    #step2 .step-flow-list .step-flow-item:last-child {
      padding-right: 55px;
    }
      
    /* STEP 3 のレイアウト調整 */
    #step3 .step-scroll-outer {
      padding: 48px 35px 35px 35px; 
    }
    #step3 .scroll-inner-box {
      overflow-x: visible;
      padding-bottom: 0px;
				gap:5px;
    }
    #step3 .step-flow-list {
      justify-content: center;
      min-width: auto;
      flex-wrap: nowrap;
      margin-bottom: 10px;
    }
    #step3 .step-flow-item {
      max-width: none;
      flex: 1;
      padding: 0 50px;
    }
    #step3 .step-flow-item .item-badge {
      margin-bottom: 35px; 
    }
    #step3 .step-flow-item .item-desc {
      margin-bottom: 0px; 
    }
    #step3 .step-flow-item:not(:last-child)::after {
      height: 430px;
    }

    /* STEP 4 の左寄せ＆移動設定 */
    #step4 .step-flow-list {
      justify-content: flex-start;
      transform: translateX(-32px); 
      margin-right: -40px;
    }
    #step4 .step-scroll-outer {
      padding: 48px 35px 40px 36.5px;
    }
    #step4 .step-flow-list .step-flow-item:last-child {
      padding-right: 40px; 
    }
      
    #step4 .step-flow-list .step-flow-item:nth-child(5) .item-img-box {
      border: none !important;
      background: none !important;
      padding: 0 !important;
    }

    #step4 .step-flow-list .step-flow-item:nth-child(5) .item-img-box img,
    #step4 .step-flow-list .step-flow-item:nth-child(5) .phone-mockup img {
      width: 185px !important;
      max-width: none !important;
      border: none !important;
      border-radius: 0 !important;
      background: none !important;
      padding: 0 !important;
      box-shadow: none !important;
    }
      
    /* ==========================================================
       ▼ SP（スマートフォン）向け全体縮小対応（形を崩さずスケール）
       ================================================---------- */
    @media screen and (max-width: 768px) {
      .usage-container {
        zoom: 0.85;
        padding: 20px;
      }
      .banner-red {
        font-size: 19px; /* ← ここでお好みの大きさに調整できます */
        padding: 19px 10px; /* 文字が大きくなった分、上下の余白も微調整 */
        line-height: 1.35;
        font-feature-settings: "palt" 1;/* 全角約物（カッコや句読点）の詰めを有効化 */
        letter-spacing: 1.1pt;
        max-width: 310px;
      }
      .usage-nav {
        max-width: 450px;
        padding: 35px 25px 20px 25px;
        border-radius: 15px;
    }
      #step3 .step-flow-item {
        max-width: 100%; /* カードの最大幅をいっぱいに広げる */
        padding: 0 15px;    /* 左右の余白を狭めて大きく見せる */
      }
      
      #step3 .item-img-box img {
        width: 100%;       /* 中の画像を大きくする（必要に応じて px で固定も可能です） */
        max-width: 320px;  /* 画像の最大サイズ */
      }
      #step3 .step-flow-item:not(:last-child)::after {
        height: 330px ; /* ← お好みの高さ（px）に調整してください */
      }
      .cvs-title-badge {
        font-size: 12.5px; /* ← 文字サイズを小さく調整（例: 12px〜14px） */
        padding: 4px 7px; /* 左右の余白を狭めて1行に収まるようにする */
        width: 100%;           
        box-sizing: border-box;
      }
.convenience-box {
        padding: 10px 0px; /* スマホではボックスの余白を少しスリムにする */
      }

      .cvs-row img {
        max-width: 45%;        /* 1行に並ぶ2つの画像がそれぞれ枠内に収まるように調整 */
      }
    .step-scroll-outer {
      padding: 35px 25px 40px 25px;
    }
    #step3 .step-scroll-outer {
      padding: 38px 25px 35px 25px; 
    }
            #step2 .step-scroll-outer {
      padding: 38px 35px 40px 35px;
    }
    #step4 .step-scroll-outer {
      padding: 38px 35px 40px 36.5px;
    }
    }
      
    /* --------------------------------------------------
       Stores Accordion & Grid (アコーディオン修正版)
    -------------------------------------------------- */
    .store-section-header {
      text-align: center;
      margin: 50px 0 65px 0;
    }
    .store-section-subtitle {
      font-size: 20px;
      font-weight: 500;
      color: #008f3d;
      margin-bottom: -10px;
    }
    .store-section-main-title {
      font-size: 45px;
      font-weight: 800;
      color: #008f3d;
      margin-bottom: 12px;
      letter-spacing: 1px;
    }
      
    /* リボンデザイン */
    .store-section-ribbon {
      display: inline-block;
      position: relative;
      height: 36px;
      line-height: 36px;
      text-align: center;
      padding: 0 50px;
      font-size: 18px;
      background: #008f3d;
      color: #FFF;
      box-sizing: border-box;
      letter-spacing: 0.1em;
      margin-bottom: 20px; /* 余白を調整 */
    }

    .store-section-ribbon:before, .store-section-ribbon:after {
      position: absolute;
      content: '';
      width: 0;
      height: 0;
      top: 0;
      z-index: 1;
      border-style: solid;
    }

    .store-section-ribbon:before {
      left: 0;
      border-width: 18px 0px 18px 12px;
      border-color: transparent transparent transparent #fff;
    }

    .store-section-ribbon:after {
      right: 0;
      border-width: 18px 12px 18px 0px;
      border-color: transparent #fff transparent transparent;
    }
      
    /* 矢印アイコン共通設定 */
    .ribbon-line-left,
    .ribbon-line-right {
      position: absolute;
      top: 50%;
      width: 15px;
      height: 15px;
      font-size: 0;
      color: transparent;
      z-index: 2;
      box-sizing: border-box;
    }

    .ribbon-line-left {
      left: 9px;
      border-top: 2px solid #fff;
      border-right: 2px solid #fff;
      transform: translateY(-50%) rotate(45deg);
    }

    .ribbon-line-right {
      right: 9px;
      border-top: 2px solid #fff;
      border-left: 2px solid #fff;
      transform: translateY(-50%) rotate(-45deg);
    }
      
    .accordion-toggle {
      width: 200px;
      max-width: 100%;
      margin: 25px auto 40px auto; /* ボタン上部に余白を確保 */
      background: #ffffff;
      color: #008f3d;
      border: 2px solid #008f3d;
      padding: 10px 15px;
      font-size: 20px;
      font-weight: 700;
      border-radius: 40px;
      cursor: pointer;
      display: flex;
      justify-content: space-between;
      align-items: center;
      overflow: hidden;
      position: relative;
      z-index: 2;
      transition-duration: .4s;
    }

    .accordion-toggle::after {
      background: #008f3d;
      border-radius: 50%;
      content: "";
      display: block;
      margin: auto;
      opacity: 0;
      pointer-events: none;
      position: absolute;
      top: 50%;
      left: 0;
      right: 0;
      width: 100%;
      padding-top: 100%;
      height: 0;
      z-index: -1;
      transform: translateY(-50%) scale(0.1);
      transition: opacity .5s, transform 0s;
      transition-delay: 0s, .4s;
    }

    .accordion-toggle:hover {
      background: #ffffff;
      border-color: #008f3d;
      color: #ffffff;
    }

    .accordion-toggle:hover::after {
      opacity: 1;
      transform: translateY(-50%) scale(1.1);
      transition-delay: 0s;
      transition: opacity .8s, transform .6s ease-in-out;
    }
      
    .accordion-toggle span:first-child {
      flex: 1;
      text-align: center;
      padding-left: 20px;
    }

    /* ▼▼▼ アコーディオンの滑らかな開閉アニメーション用CSS ▼▼▼ */
    .accordion-content {
      max-height: 0;        /* 最初は高さを0にする */
      overflow: hidden;     /* はみ出た中見を隠す */
      opacity: 0;           /* 最初は透明にする */
      transition: max-height 1.5s ease, opacity 0.5s ease; /* ヌルッと動かすアニメーション設定 */
      margin-top: 20px;
    }
    .accordion-content.is-open {
      max-height: 10000px;   /* 中身の高さが収まる十分な大きさを指定 */
      opacity: 1;           /* 表示させる */
    }
    /* ▲▲▲ここまで▲▲▲ */
    
   /* --------------------------------------------------
       店舗
    -------------------------------------------------- */
    .store-grid {
      display: flex;
      flex-wrap: wrap;
      gap: 25px;
      justify-content: center;
    }

    .store-card {
      width: 220px;
      flex-shrink: 0;
      border-radius: 8px;
      padding: 12px;
      background: #ffffff;
      box-sizing: border-box;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
    }

    @media (max-width: 768px) {
      .store-card {
        width: 45%; /* SP時は2列 */
      }
      .store-section-header {
        margin: 40px 0 50px 0;
      }
    }
	  
    .store-img-wrap {
      width: 100%;
      aspect-ratio: 1 / 1;
      overflow: hidden;
      border-radius: 6px;
      background-color: #f0f0f0;
    }
    .store-img-wrap img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    
/* カテゴリー共通ベース設定 */
    .store-category {
      display: inline-block;
      font-size: 12px;
      padding: 2px 10px;
      border-radius: 12px;
      margin-top: 18px;
      margin-bottom: 6px;
      font-weight: 600;
      text-align: left;
      margin-right: auto;
    }

    /* 各カテゴリー別のカラー定義（画像に基づく配色） */
    /* スーパー・コンビニ（青系） */
    .store-category.cat-super {
      background-color: #dbe4f0;
      color: #1a56bc;
    }
    /* 飲食店（オレンジ系） */
    .store-category.cat-food {
      background-color: #faebd7;
      color: #e08214;
    }
    /* 美容・理容（ピンク系） */
    .store-category.cat-beauty {
      background-color: #fce4ec;
      color: #d84a7d;
    }
    /* 食品・菓子・生花（グリーン系） */
    .store-category.cat-grocery {
      background-color: #d8e6dc;
      color: #1b6b3b;
    }
    /* 教室（ライトブルー系） */
    .store-category.cat-school {
      background-color: #e1f3fc;
      color: #0b93e3;
    }
    /* 洋服・雑貨・宝石（パープル系） */
    .store-category.cat-goods {
      background-color: #ece4f0;
      color: #7a4171;
    }
    /* 自動車・自転車（ミントグリーン系） */
    .store-category.cat-car {
      background-color: #d6ede4;
      color: #0d9488;
    }
    
    /* 店舗名（高さの強制固定なし） */
    .store-name {
      font-size: 17px;
      font-weight: bold;
      color: #222222;
      text-align: left;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      overflow: hidden;
      text-overflow: ellipsis;
      line-height: 1.35;
    }

    .store-tel {
      font-size: 22.5px;
      color: #008836;
      font-weight: bold;
      display: block;
      text-decoration: none;
      margin-bottom: 4px;
      margin-top: 4px;
    }
      
      .store-tel:hover {
      text-decoration: none; /* 下線を消す */
    }

    /* 詳細ボタン（通常のインライン配置） */
    .store-link-btn {
      display: block;
      text-align: center;
      font-size: 11px;
      color: #555;
      border: 1.5px solid #606060;
      border-radius: 20px;
      padding: 3px 8px;
      width: 100%;
      box-sizing: border-box;
      transition: background 0.2s, color 0.2s;
    }
    .store-link-btn:hover {
  color: #fff;
  border:1.5px solid #606060;
  background-color: #606060;
      text-decoration: none;
    }
	  
/* 店舗エリア内のhrの上下に余白を設ける */
.accordion-content hr {
  margin: 50px 0; /* 上下に40px、左右に0の余白 */
  border: none;
  border-top: 1px solid #cccccc; /* 線が見えにくい場合の装飾 */
}

.call-note {
  font-size: 16px;
  text-align: center;
  line-height: 1.5;
font-weight: 500;
}
      
    .poster-container {
width: 100%;          /* 幅を100%にして可変に */
    max-width: 600px;     /* PC時の最大幅を指定 */
        background: #fff;
        border-radius: 4px;
        overflow: hidden;
        padding-bottom: 40px;
		margin: 0 auto;    /* 左右マージンをautoにして中央配置 */
    }

    /* 上部の案内文言 */
.sticker-notice-banner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin: 20px auto 5px auto;
  text-align: center;
}

.sticker-notice-text {
  font-size: 26px;
  font-weight: 800;
  color: #ea5404;
  line-height: 1.35;
  letter-spacing: 0.5px;
  padding: 0 20px;
}

/* 左右のアクセントライン（「＼」「／」の飾り） */
.decor-accent {
  display: inline-block;
  width: 3px;
  height: 75px;
  background-color: #ea5404;
  flex-shrink: 0;
}

.decor-accent.left {
transform: rotate(-20deg);
}

.decor-accent.right {
transform: rotate(20deg);
}

/* スマホ対応（レスポンシブ） */
@media (max-width: 600px) {
.accordion-content {
      margin-top: 0;
}
.accordion-content hr {
  margin: 30px 0; /* 上下に30px、左右に0の余白 */
}
  .sticker-notice-banner {
    gap: 0px;
  margin: 12px auto 5px auto;
  }
  .sticker-notice-text {
    font-size: 17.5px;
	  padding: 0 9px;
  }
  .decor-accent {
    width: 2px;
    height: 48px;
    border-width: 1px;
  }
  .decor-accent.left {
    transform: rotate(-15deg);
  }

  .decor-accent.right {
    transform: rotate(15deg);
  }
	
  /* OPENボタンの大きさ調整 */
.accordion-toggle {
    width: 140px;             /* 横幅を 200px → 150px に縮める */
    padding: 6.5px 18px;        /* 上下の高さをキュッと補く */
    font-size: 20px;          /* 文字サイズを 20px → 15px に縮める */
    margin: 0 auto 30px auto; /* 下余白も少しスリムに */
  }

  /* OPEN文字を中央寄りに保つための左余白調整 */
  .accordion-toggle span:first-child {
    padding-left: 14px;       /* 矢印とのバランスを見て縮める */
  }

  /* ▼アイコンのサイズ調整 */
  #accordionIcon {
    font-size: 15px;          /* 矢印も合わせて少し小さく */
  }
.call-note {
    font-size: 13.5px; /* スマホ時の文字サイズを小さく */
    padding: 0 10px; /* 左右に少し余白をとって枠ギリギリになるのを防止 */
  line-height: 1.45;
  }
.store-link-btn {
    white-space: nowrap; /* 自動折り返しを禁止 */
    font-size: 9px;     /* 11px → 10px にほんの少し小さく */
    padding: 2px;    /* 左右のパディングを極力小さくして文字幅を確保 */
  }
    .store-grid {
      gap: 4px;
    }
  .store-name {
    display: block;
    -webkit-line-clamp: unset;  /* 行数制限を解除 */
    overflow: visible;          /* はみ出しの隠蔽を解除 */
    font-size: 16px;            /* 文字数を考慮してフォントを少しキュッと調整 */
  }
  .accordion-content hr {
    margin: 30px 30px 25px 30px;
  }
}
	  
/* POP画像のサイズ調整 */
.poster-image-box {
  text-align: center; /* 中央寄せ */
  padding: 10px 20px;
}
.poster-image-box img {
  max-width: 700px; /* 希望のサイズに変更（例: 250px, 300pxなど） */
  width: 100%;
  height: auto;
}

.top-notice {
  position: relative;
  background-color: #fbd900; /* 画像に合わせた明るい黄色 */
  color: #111111;
  font-size: 21px;
  font-weight: 600;
  line-height: 1.35;
  text-align: center;
  padding: 28px 20px;
  border-radius: 28px;
  margin: 60px auto 25px auto;
  max-width: 410px;
  box-sizing: border-box;
}

/* 吹き出し下部の三角形（しっぽ） */
.top-notice::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border-style: solid;
  border-width: 18px 16px 0 16px;
  border-color: #fbd900 transparent transparent transparent;
}

/* スマホ表示用のサイズ調整 */
@media (max-width: 600px) {
  .top-notice {
    font-size: 16px;
    padding: 23px 10px;
    border-radius: 20px;
    margin: 30px auto 18px auto;
    width: 80%;
    line-height: 1.4;
  }
  .top-notice::after {
    border-width: 14px 12px 0 12px;
  }
.poster-image-box {
    padding: 10px 30px; /* 左右の余白を 20px → 40px に拡大 */
  }
}	  
	  
    /* MAP画像表示エリア */
    .map-image-box {
	width: 100%;
	max-width: 600px; /* MAP画像が大きすぎないちょうどいいサイズ */
	margin: 0 auto;    /* 中央寄せ */
	padding: 10px 20px;
	box-sizing: border-box;
    }

    .map-image-box img {
        width: 100%;
        height: auto;
        display: block;
        border: 1px solid #ddd;
    }	  
	  
    /* 「周辺マップを見る(PDF)」ボタンエリア */
    .button-container {
        text-align: center;
        margin: 15px 0 30px 0;
    }

.pdf-button {
    display: inline-block;
    background-color: #00893b;
    color: #fff;
    font-size: 18px;
    font-weight: bold;
    text-decoration: none;
    padding: 8px 30px;
    border-radius: 50px;
    border: 1px solid #00893b; /* あらかじめ枠線を付けておく */
    transition: all 0.2s ease;  /* 全体のアニメーションを滑らかに */
	font-feature-settings: "palt" 1;/* 全角約物（カッコや句読点）の詰め */
}

.pdf-button:hover {
    background-color: #fff;
    color: #00893b;
    border-color: #00893b;
    text-decoration: none;
}

    /* 最下部の注意書き */
    .footer-note {
        font-size: 13px;
        color: #333;
        text-align: center;
        line-height: 1.6;
    }
	  
/* SP（画面幅768px以下）時の店舗タイトルの縮小設定 */
@media (max-width: 600px) {
  .store-section-subtitle {
    font-size: 20px;
  }
  .store-section-main-title {
    font-size: 30px; 
    margin-bottom: 8px;
  }
  .store-section-ribbon {
    font-size: 19px; /* リボン内の英語表記もに合わせて微調整 */
    height: 34px;
    line-height: 34px;
    margin-bottom: 2px;
            
    /* ▼ここから追加：スマホのときだけ左右に外側余白を設けて内側に収める */
    margin-left: 25px;
    margin-right: 25px;
  }

    /* 「周辺マップを見る(PDF)」ボタンエリア */
    .button-container {
        margin: 15px 0 18px 0;
    }
    /* 最下部の注意書き */
    .footer-note {
        font-size: 14px;
        line-height: 1.4;
    }
    .store-tel {
      font-size: clamp(14px, 4.5vw, 17px);/* 普段は17px、幅が狭いスマホの時だけ自動で少し小さくなる */
      white-space: nowrap;/*改行しない*/
    }
.map-image-box {
    padding: 10px 30px;
  }
.pdf-button {
    font-size: 16px;      /* 18px → 14px に落としてスッキリ化 */
    padding: 6.5px 28px;     /* 上下左右のパディングを小さく調整 */
    max-width: 80%;        /* 画面幅に対して大きくなりすぎないよう制限 */
    box-sizing: border-box;
	letter-spacing: 0.6pt;
  }
    .footer-note {
        font-size: 12.5px;
        line-height: 1.55;
	letter-spacing: 0.1pt;
    }
}
      
    /* --------------------------------------------------
       人形 コメント
    -------------------------------------------------- */ 
    .banner-container {
      width: 100%;
      max-width: 600px;
      margin: 20px auto;
      background-color: #ffffff;
      text-align: center;
      padding: 30px 20px;
      box-sizing: border-box;
    }

    .banner-header {
      position: relative;
      display: inline-block;
      margin-bottom: 20px;
    }

    .banner-header::before,
    .banner-header::after {
      content: "";
      position: absolute;
      top: 10px;
      width: 4px;
      height: 60px;
      background-color: #e86815;
    }

    .banner-header::before {
      left: -25px;
      transform: rotate(-15deg);
    }

    .banner-header::after {
      right: -25px;
      transform: rotate(15deg);
    }

    .banner-title {
      font-size: 32px;
      font-weight: 800;
      color: #e86815;
      line-height: 1.4;
      letter-spacing: 1px;
    }

    .banner-character {
      width: 100%;
      max-width: 420px;
      height: auto;
      display: block;
      margin: 0 auto;
    }

    @media (max-width: 480px) {
      .banner-title {
        font-size: 24px;
      }
      .banner-header::before {
        left: -15px;
      }
      .banner-header::after {
        right: -15px;
      }
    .banner-container {
      padding: 10px 20px 18px 20px;
    }
    }
      
    /* --登録サポート・お問い合わせ-- */
    .support-card {
      width: 100%;
      margin: 0 auto;
      background-color: #ffffff;
      overflow: hidden;
      box-sizing: border-box;
      text-align: center;
      padding-bottom: 30px;
    }

    .support-header {
      background-color: #008f3d;
      color: #ffffff;
      padding: 40px 20px;
      position: relative;
    }

    .support-header::after {
      content: "";
      position: absolute;
      bottom: -15px;
      left: 50%;
      transform: translateX(-50%);
      border-width: 15px 15px 0 15px;
      border-style: solid;
      border-color: #008f3d transparent transparent transparent;
      display: block;
      width: 0;
      z-index: 2;
    }

    .support-header h1 {
      font-size: 45px;
      font-weight: 700;
      line-height: 1.35;
      letter-spacing: 0.5px;
    }

    .ribbon-badge {
      position: absolute;
      top: 45px;
      right: 140px;
      background-color: #e50012;
      color: #ffffff;
      font-size: 25px;
      font-weight: 800;
      padding: 4px 12px;
      transform: rotate(8deg);
      box-shadow: 0 2px 4px rgba(0,0,0,0.2);
      letter-spacing: 1px;
    }

    .main-title {
      font-size: 50px;
      font-weight: 800;
      color: #111111;
      margin: 40px 15px 38px 15px;
      line-height: 1.45;
      letter-spacing: 1.5px;
    }

    .marker-yellow {
      background: linear-gradient(transparent 60%, #ffffb3 60%);
        
      /* 左右の広がり（padding） */
      padding-left: 20px;
      padding-right: 20px;
  
      /* インライン要素として扱い、中央揃えを維持 */
      display: inline;
  
      /* 改行した際も左右の余白を維持 */
      box-decoration-break: clone;
      -webkit-box-decoration-break: clone;
    }

    .text-red {
      color: #e50012;
    }

    .badge-datetime {
      display: inline-block;
      background-color: #e50012;
      color: #ffffff;
      font-size: 22px;
      font-weight: 700;
      padding: 2px 30px;
      border-radius: 30px;
      letter-spacing: 5px;
      margin-bottom: 12px;
    }

    .datetime-content {
      color: #e50012;
      font-size: 42px;
      font-weight: 800;
      line-height: 1.3;
      letter-spacing: 2px;
      margin-bottom: 30px;
		
      font-feature-settings: "palt"; /* 和文の文字詰める指定 */
    }

    .location-box {
      margin-bottom: 40px;
    }

    .location-title {
      display: inline-block;
      font-size: 22px;
      font-weight: 700;
      color: #111111;
      border-top: 1px solid #111;
      border-bottom: 1px solid #111;
      padding: 1px 24px;
      margin-bottom: 12px;
      letter-spacing: 3px;
    }

    .location-name {
      font-size: 29px;
      font-weight: 800;
      color: #111111;
      margin-bottom: 3px;
    }

    .location-note {
      font-size: 12px;
      color: #333;
    }

    .requirements-box {
      background-color: #f2f4ec;
      border-radius: 12px;
      width: 100%;
      max-width: 480px;
      margin: 0 auto;
      padding: 30px 45px;
      box-sizing: border-box;
      text-align: center;
    }

    .req-badge {
      display: table;
      background-color: #008f3d;
      color: #ffffff;
      font-size: 18px;
      font-weight: 700;
      text-align: center;
      padding: 3px 85px;
      border-radius: 20px;
      margin: 0 auto 15px auto;
      letter-spacing: 1px;
    }

    .req-list {
      display: inline-block;
      list-style: none;
      padding: 0;
      font-size: 20px;
      font-weight: 700;
      color: #111;
      text-align: left;
      margin-bottom: 1px;
    }

    .req-list li {
      margin-bottom: -2px;
    }

    .req-subnote {
display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  font-weight: 400;
  color: #111;
  text-align: center;
  margin-top: 7px;
    }
	  
@media screen and (max-width: 768px) {
  /* 全体の余白調整 */
  .support-card {
    padding-bottom: 20px;
  }

  /* ヘッダー周り */
  .support-header {
    padding: 24px 15px;
  }

  .support-header h1 {
    font-size: 29px;
  }

  /* リボンバッジの位置とサイズ */
  .ribbon-badge {
    top: 28px;
    right: 20px;
    font-size: 14px;
    padding: 2px 8px;
  }

  /* メインタイトル */
  .main-title {
    line-height: 1.3;
    font-size: 35.5px;
    margin: 37px 10px 33px 10px;
  }

  .marker-yellow {
    font-size: 30px;
    padding-left: 10px;
    padding-right: 10px;
  }

  /* 日時エリア */
  .badge-datetime {
    font-size: 16px;
    padding: 2px 20px;
    letter-spacing: 2px;
  }

  .datetime-content {
    font-size: 25px;
    letter-spacing: 1px;
    margin-bottom: 32px;
  }

  /* 開催場所エリア */
  .location-box {
    margin-bottom: 32px;
  }

  .location-title {
    font-size: 20px;
    padding: 1px 16px;
    letter-spacing: 1.5px;
  }

  .location-name {
    font-size: 24.5px;
  }

  .location-note {
    font-size: 11px;
  }

  /* 応募要件ボックス（横幅が溢れないよう調整） */
  .requirements-box {
    width: 82%; /* 画面端にくっつかないよう少し余裕を持たせる */
    padding: 25px 0;
  }

  .req-badge {
    font-size: 17px;
    padding: 3px 0;
    width: 80%; /* 固定paddingからパーセント指定にして崩れを防止 */
    margin: 0 auto 12px auto;
  }

  .req-list {
    font-size: 16px;
    line-height: 1.5;
  }

  .req-subnote {
    font-size: 13px;
    line-height: 1.3;
  }
}

    /* --------------------------------------------------
       Call Center
    -------------------------------------------------- */
.callcenter-box {
  width: 100%;
  max-width: 600px;
  margin: 20px auto 60px auto;
  background-color: #ffffff;
  border: 3px solid #e86815;
  border-radius: 16px;
  box-sizing: border-box;
  text-align: center;
  overflow: hidden;
}

.callcenter-title {
  font-size: 38px;
  font-weight: 800;
  color: #e86815;
  padding: 8px 0;
  letter-spacing: 1px;
}

.callcenter-banner {
  background-color: #ffd700;
  padding: 19px;
}

.callcenter-desc {
  font-size: 17px;
  font-weight: 700;
  color: #111111;
  margin-bottom: 4px;
}

.callcenter-content {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
}

/* ロゴ画像を入れる枠 */
.callcenter-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* フリーダイヤルロゴ画像のサイズ調整 */
.freedial-img {
  height: 48px; /* 電話番号のフォントサイズ(42px)に合わせて調整 */
  width: auto;
  display: block;
  transform: translateY(5px); /* 数値を増やすと下に下がります */
}

.callcenter-tel {
  font-size: 58px;
  font-weight: 900;
  color: #111111;
  letter-spacing: 1px;
  line-height: 1;
}
	  
.callcenter-link {
  display: flex;
  align-items: center;       /* 上下中央揃え */
  justify-content: center;   /* 左右中央揃え */
  text-decoration: none;     /* 下線を消す */
}
	  
.callcenter-link:hover {
  text-decoration: none;
}

.callcenter-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 30px;
  text-align: left;
  gap: 10px;
}

.callcenter-info {
  font-size: 18.5px;
  font-weight: 600;
  color: #222222;
  line-height: 1.35;
}

.toll-free-badge {
  border: 2px solid #e86815;
  color: #e86815;
  font-size: 18.5px;
  font-weight: 700;
  padding: 6px 16px;
  border-radius: 8px;
  background-color: #ffffff;
  white-space: nowrap;
}

@media screen and (max-width: 768px) {
  /* ボックス全体の余白と外枠 */
  .callcenter-box {
    width: 88%;
    margin: 0 auto 50px auto;
    border-width: 2px;
  }

  /* タイトル（電話でのお問い合わせ等） */
  .callcenter-title {
    font-size: 23px;
    padding: 8px 0;
  }

  /* 黄色いバナーエリア */
  .callcenter-banner {
    padding: 13px 8px;
  }

  .callcenter-desc {
    font-size: 15px;
    line-height: 1.3;
  }

  /* アイコンと電話番号の並び */
  .callcenter-content {
    gap: 6px; /* アイコンとのすき間を少し詰める */
  }

  .freedial-img {
    height: 35px;
    transform: translateY(3px); /* 小さくした分、位置調整も軽く */
  }

  .callcenter-tel {
    font-size: 42px;
  }

  /* フッター（受付時間・通話料無料バッジ） */
  .callcenter-footer {
    padding: 10px 13px;
    gap: 6px;
  }

  .callcenter-info {
    font-size: 11px;
  text-align: left;
  }

  .toll-free-badge {
    font-size: 12px;
    padding: 3px 8px;
  }
}

/* 画面幅がかなり狭いスマホ（400px以下）向けの微調整 */
@media screen and (max-width: 400px) {
  .freedial-img {
    height: 22px;
  }
  .callcenter-tel {
    font-size: 31px;
  }
  .callcenter-footer {;
    align-items: center;
    text-align: center;
  }
}

    /* --------------------------------------------------
       Back To Top Button
    -------------------------------------------------- */
    .back-to-top {
      position: fixed;
      bottom: 20px;
      right: 20px;
      width: 48px;
      height: 48px;
      background-color: #28a745;
      color: #ffffff;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 20px;
      box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
      opacity: 0;
      visibility: hidden;
      transition: all 0.3s ease;
      z-index: 1000;
      cursor: pointer;
    }
    .back-to-top.is-visible {
      opacity: 1;
      visibility: visible;
    }
    .back-to-top:hover {
      background-color: #208336;
      color: #ffffff;
      text-decoration: none;
      transform: translateY(-3px);
    }

@media screen and (max-width: 767px) {
  .back-to-top {
    bottom: 16px;   /* スマホでは少し下を詰める */
    right: 16px;   /* スマホでは少し右を詰める */
    width: 40px;   /* ボタンサイズを少し小さく */
    height: 40px;  /* ボタンサイズを少し小さく */
    font-size: 16px; /* 中の矢印アイコンも少し小さく */
  }
}


    /* --------------------------------------------------
       Footer
    -------------------------------------------------- */
    footer {
      text-align: center;
      padding: 32px 16px;
      font-size: 12px;
      color: #777777;
    }