:root {
          --color-text: #000848;
          --color-accent: #EB5221;
          --color-highlight: #FFD300;
          --color-bg-body: #F2F3FF;
          --color-bg-card: #ffffff;
          --color-bg-soft: #E3E6FF;
          --radius-base: 6px;
          --width-container: 960px;
      }

      /* =========================================
           基本設定
           ========================================= */
      * {
          box-sizing: border-box;
          margin: 0;
          padding: 0;
      }

      .campaign {
          color: var(--color-text);
          background-color: var(--color-bg-body);
      }

      .campaign img {
          max-width: 100%;
          height: auto;
          vertical-align: bottom;
          border-radius: var(--radius-base);
      }

      .campaign a {
          color: var(--color-text);
          text-decoration: none;
          font-size: 14px;
      }

      .campaign a:visited {
          color: var(--color-text);
      }

      .campaign p {
          font-size: 14px;
      }

      @media (min-width: 768px) {
          .campaign p {
              font-size: 16px;
          }
      }


      /* =========================================
           レイアウト共通
           ========================================= */
      .container {
          width: 100%;
          padding: 0 16px;
          margin: 0 auto;
      }

      /* カードスタイル */
      .campaign-card {
          background: var(--color-bg-card);
          border-radius: var(--radius-base);
          padding: 32px 16px;
          margin-bottom: 24px;
      }

      /* 見出し共通 */
      h2 {
          color: var(--color-text);
          margin: 48px 0 20px;
      }

      h3 {
          color: var(--color-text);
      }

      /* ホバー */
      :is(.top-cta-area, .cta-area,.follow_banner) a:hover {
          opacity: 0.7;
      }

      .campaign-details summary:hover {
          opacity: 0.7;
      }   


      /* =========================================
           コンポーネント
           ========================================= */

      .cta-button {
          display: inline-flex;
          align-items: center;
          justify-content: center;
          width: 100%;
          max-width: 400px;
          font-weight: bold;
          padding: 12px;
          color: var(--color-text);
          border-radius: var(--radius-base);
      }

      /* 黄色ボタン */
      .btn-primary {
          background: var(--color-highlight);
      }

      .top-cta-area {
          padding: 20px 0;
          text-align: center;
      }

      .top-cta-area a {
          font-size: 20px;
      }

      /* 薄紫ボタン*/
      .btn-secondary {
          border-radius: 0;
          background: var(--color-bg-soft);
          max-width: 320px;
          padding: 7px;
          position: relative;
      }

      .btn-secondary::after {
          content: "";
          position: absolute;
          right: 15px;
          top: 50%;
          width: 10px;
          height: 10px;
          border-right: 2px solid var(--color-text);
          border-bottom: 2px solid var(--color-text);
          transform: translateY(-50%) rotate(-45deg);
          margin-top: -1px;
      }

      /* 下向き矢印 */
      .arrow-down {
          text-align: center;
          margin-bottom: 20px;
          color: var(--color-text);
          font-size: 2rem;
          line-height: 1;
      }

      /* =========================================
           各セクションスタイル
           ========================================= */

      /*メインビジュアル */
      .hero-section {
          width: 100%;
          line-height: 0;
          text-align: center;
          background: url(/camp/monthly-free/images/monthly-free_ti001_pc_bg.png);
          background-repeat: no-repeat;
          background-size: cover;
          background-position: center
      }

      .hero-section img {
          width: 100%;
          border-radius: 0;
          max-width: 960px;
      }

      /* キャンペーン概要 */
      .campaign-summary .subtitle {
          margin-bottom: 10px;
      }

      .campaign-summary .main-image img {
          border-radius: 0;
          width: -webkit-fill-available;
      }

      .intro-text-title {
          font-weight: bold;
          margin-bottom: 5px;
          display: block;
          font-size: 14px;
      }

      .highlight-text-area {
          text-align: center;
          margin-bottom: 20px;
      }

      .offer-box {
          display: flex;
          align-items: center;
          justify-content: center;
          gap: 30px;
          margin: 0 auto 20px;
      }

      .offer-img {
          width: 123px;
          flex-shrink: 0;
      }

      .offer-img img {
          border-radius: 0;
          border: 2px solid #fff;
      }

      .offer-text {
          font-weight: bold;
          margin-bottom: 10px;
          text-align: left;
          width: 100%;
      }

      .price {
          font-weight: bold;
          color: var(--color-accent);
          display: flex;
          justify-content: flex-start;
          gap: 15px;
          width: 100%;
      }

      .price-prefix {
          color: var(--color-text);
          text-align: left;
          line-height: 1.4;
      }

      .price span.amount {
          font-size: 64px;
          margin-right: 5px;
          line-height: 1;
      }

      /* アコーディオン */
      details.campaign-details {
          margin-top: 20px;
      }

      summary {
          cursor: pointer;
          list-style: none;
          outline: none;
          color: var(--color-text);
          background-color: var(--color-bg-soft);
          padding: 7px 12px 7px 7px;
          display: flex;
          justify-content: space-between;
          align-items: center;
      }

      summary::-webkit-details-marker {
          display: none;
      }

      summary h3 {
          display: inline-block;
          margin-bottom: 0;
          font-size: 14px;
          flex-grow: 1;
          text-align: center;
      }

      /* 決済一覧 */
      .rate.allinone .attention_s {

          background-color: #F4F4F4;

          padding: 0 20px;
      }


      .rate.allinone .important_red {
          color: #e20000;
      }

      .attention_s a {
          color: #0066ff;
          text-decoration: underline;
          font-size: 12px;
      }

      .attention_s a:visited {
          color: #0066ff;
      }


      .rate.allinone .attention_s {
          position: relative;
          margin-top: 0;
          font-size: 12px;
          text-align: left;
      }


      /* 矢印アイコン */
      summary::after {
          content: "";
          display: inline-block;
          width: 10px;
          height: 10px;
          border-right: 2px solid var(--color-text);
          border-bottom: 2px solid var(--color-text);
          transform: rotate(45deg);
          margin-bottom: 4px;
          transition: transform 0.2s;
      }

      details[open] summary {
          border-bottom: none;
      }

      details[open] summary::after {
          transform: rotate(-135deg);
          margin-bottom: -4px;
      }

      .accordion-content {
          background-color: var(--color-bg-body);
          padding-bottom: 32px;
      }

      .accordion-content figure {
          text-align: center;
          margin-bottom: 20px;
      }

      .accordion-title {
          text-align: center;
          font-weight: bold;
          padding: 32px 0 10px;
      }

      .detail-flex {
          padding: 0 16px;
      }

      .detail-list {
          font-size: 14px;
      }


      /*インパクトエリア */
      .impact-section {
          text-align: center;
      }

      .impact-text {
          font-size: 20px;
          color: var(--color-accent);
          font-weight: bold;
          display: inline-block;
          background: linear-gradient(transparent 70%, #F5E071 70%);
          margin-bottom: 20px;
          height: 26px;
      }

      /* TimesPAYが選ばれる理由 */
      .features-wrapper {
          background-color: #fff;
          width: 100%;
          padding: 50px 0;
          margin-top: 50px;
      }

      .features-section .campaign-card {
          background-color: var(--color-bg-body);
          margin-bottom: 20px;
          box-shadow: none;
      }

      .features-section h2 {
          margin-bottom: 40px;
      }

      .step-header {
          display: flex;
          flex-direction: column;
          align-items: center;
          gap: 10px;
          padding-bottom: 10px;
      }

      .step-num {
          display: flex;
          align-items: center;
          justify-content: center;
          width: 50px;
          height: 50px;
          background: var(--color-text);
          color: #fff;
          border-radius: 50%;
          font-weight: bold;
          flex-shrink: 0;
      }

      .step-header h3 {
          margin: 0;
      }

      .step-main-img {
          margin-bottom: 15px;
      }

      .step01-list {
          margin: 24px 0 0;
      }

      .step01-item img {
          object-fit: cover;
          border-radius: 50%;
      }

      .step01-item {
          display: flex;
          align-items: stretch;
          justify-content: center;
          margin-bottom: 10px;
          background: #fff;
          border-radius: var(--radius-base);
          overflow: hidden;
      }

      .step01-item p {
          font-size: 12px;
          margin-top: 5px;
      }

      .step01-item-left {
          padding: 10px;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          flex: 1;
      }

      .step01-item-left p {
          text-align: center;
          font-size: 10px;
      }

      .step01-item-right {
          padding: 16px 10px;
          flex: 2;
          margin: auto;
      }

      .text-underline {
          text-decoration: underline;
      }


      .dotted-line {
          width: 1px;
          border-left: 2px dotted var(--color-text);
          background-color: transparent;
      }


      .step-footer-link {
          text-align: right;
      }

      .step-footer-link a {
          text-decoration: underline;
          color: #0066ff;
      }

      .step02-list {
          margin-top: 24px;
      }

      .step02-item {
          margin-bottom: 10px;
          background: #fff;
          padding: 16px;
          border-radius: var(--radius-base);

      }

      .step02-top {
          display: flex;
          align-items: center;
          gap: 10px;
          margin-bottom: 10px;
      }

      .step02-top img {
          width: 100px;
      }

      .step02-top p {
          font-weight: bold;
      }

      .step02-caption {
          font-size: 10px !important;
      }

      .step02-buttton {
          font-weight: normal;
          text-align: center;
      }

      /* =========================================
           PCレイアウト
           ========================================= */
      @media (min-width: 768px) {
          .container {
              width: 100%;
              max-width: var(--width-container);
          }

          .campaign-card {
              padding: 32px;
          }

          .campaign-summary h2 {
              margin-bottom: 10px;
          }

          summary h3 {
              font-size: 16px;
          }

          .top-cta-area a {
              font-size: 24px;
          }

          .highlight-text-area {
              margin-bottom: 30px;
          }

          .inline-text {
              font-size: 1.5rem;
          }

          .offer-box {
              max-width: 700px;
              margin-bottom: 30px;
          }

          .offer-img {
              width: 200px;
          }

          .offer-text {
              font-size: 1.2rem;
          }

          .price span.amount {
              font-size: 4rem;
          }

          .detail-flex {
              display: flex;
              gap: 20px;
              align-items: center;
              padding: 0 32px;
          }

          .detail-flex figure,
          .detail-flex .detail-list {
              width: 50%;
              margin: 0;
          }

          .accordion-title {
              padding: 48px 0 16px;
          }

          .steps-container {
              display: flex;
              justify-content: space-between;
              gap: 30px;
          }

          .features-section .campaign-card {
              width: 48%;
              display: flex;
              flex-direction: column;
          }

          .step02-list {
              margin-top: 55px;
          }

          .step02-caption {
              font-size: 12px !important;
              margin-top: 5px;
          }

      }


      /* =========================================
          追従ボタン
           ========================================= */

      .follow_banner {
          background: #fff;
          height: 130px;
          z-index: 999;
          position: fixed;
          width: 170px;
          overflow: hidden;
          right: 0;
          top: 400px;
          display: none;
          border-radius: 10px 0 0 10px;
          box-sizing: border-box;
      }

      .follow_banner a {
          background: var(--color-text);
          padding: 10px 7px 10px 10px;
          width: 100%;
          height: 100%;
          text-decoration: none;
          color: #fff;
          font-size: 13px;
          font-weight: bold;
          text-align: center;
          display: inline-block;
          box-sizing: border-box;
      }

      .follow_banner a p {
          margin-top: 14px;
          margin-bottom: 13px;
      }

      .follow_banner a span {
          color: var(--color-text);
          background: #fff;
          border-radius: 20px;
          padding: 5px 28px 5px 13px;
          width: 126px;
          display: inline-block;
          margin-left: 6px;
          font-size: 12px;
          position: relative;
      }

      .follow_banner a span::after {
          border-top: 2px solid var(--color-text);
          border-right: 2px solid var(--color-text);
          content: "";
          position: absolute;
          top: 44%;
          right: 12px;
          width: 6px;
          height: 6px;
          transform: rotate(45deg);
          margin-top: -3px;
      }

      @media screen and (max-width: 768px) {
          .fix_bottom {
              background-color: color-mix(in srgb, var(--color-text), transparent 20%);
              align-items: center;
              padding: 10px 15px;
              font-size: 3.8vw;
              box-sizing: border-box;
              justify-content: space-around;
          }

          .fix_bottom .txtAre {
              color: #fff;
              font-size: 3.8vw;
          }

          .fix_bottom a:nth-child(2) p,
          .fix_bottom a:visited {
              color: var(--color-text);
          }

          .fix_bottom .contact_dm>div:after {
              border-top: 2px solid var(--color-text);
              border-right: 2px solid var(--color-text);
          }

          .fix_bottom .contact_dm {
              box-shadow: none;
              background-color: #fff;

              border-radius: 100px;
              padding: 10px 30px 10px 15px;
              position: relative;
              margin: 10px 0 10px 10px;
              text-decoration: none;
              display: block;
              width: auto !important;
              float: none;
              text-align: left;
          }

          .fix_bottom a {
              display: flex;
              flex-direction: row;
              justify-content: space-between;
              align-items: center;
              width: 50%;
              box-sizing: border-box;
              text-decoration: none;
              color: #fff;
              float: left;
              margin: 4% 3% 4% 4.5%;
              text-align: center;
          }

          .fix_bottom .contact_dm>div:after {
              content: "";
              position: absolute;
              top: 44%;
              right: 12px;
              width: 7px;
              height: 7px;
              transform: rotate(45deg);
              margin-top: -3px;
          }

          .fix_bottom .contact_dm>div:after {
              position: absolute;
              top: 44%;
              right: 12px;
              width: 7px;
              height: 7px;
              transform: rotate(45deg);
              margin-top: -3px;
          }

          .fix_bottom a:nth-child(2) p {
              width: auto;
              font-size: 3.8vw;
          }

          div.fix_bottom a::before {
              display: none;
          }

          div.fix_bottom a::after {
              display: none;
          }

      }