@charset "UTF-8";

*,
::before,
::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
  --color-main: #3388FF;
  --color-black: #48494C;
  --color-white: #fff;
  --color-light-blue: #C9DEF8;
  --color-light-gray: #f0f5f7;
  --color-dark-gray: #8E8E8E;
}

html {
  font-size: 62.5%; /* 1rem = 10px */
  color: var(--color-black);
  background-color: var(--color-light-blue);
  /* macOSでフォントをなめらかに表示するための設定 */
  -webkit-font-smoothing: antialiased; /* Safari・Chrome向け */
  -moz-osx-font-smoothing: grayscale; /* Firefox(macOS)向け */
  scroll-behavior: smooth;
}

body {
  font-family:
    "IBM Plex Sans",
    "Noto Sans JP",
    -apple-system,
    BlinkMacSystemFont,
    SF Pro,
    "Hiragino Sans",
    "ヒラギノ角ゴ ProN",
    "Helvetica Neue",
    Helvetica,
    Arial,
    sans-serif;
  font-size: 1.4rem;
  font-weight: 400;
  line-height: 1.7;
}

/* =========================
   header
   ========================= */
  .subs-only-sp { 
    display: none; 
  }

  .subs-header {
    position: fixed;
    z-index: 1000;
    top: 16px;
    left: 16px;
    right: 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: auto;
    height: 64px;
    margin: 0;
    padding-right: 32px;
    background: transparent;
    transition: transform 0.3s ease;
  }
  
  /* スクロール制御 */
  .subs-header-hidden {
    transform: translateY(-125%);
    transition: transform 0.3s;
  }
  
  .subs-header-logo {
    display: flex;
    align-items: center;
    width: 172px;
    height: 64px;
    background: var(--color-white);
    border-top-left-radius: 16px;
    border-bottom-left-radius: 16px;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    padding: 16px 24px;
    box-sizing: border-box;
  }
  
  .subs-header-logo img {
    display: block;
    width: auto;
    height: 32px;
  }
  
  .subs-header-logo-link {
    display: block;
    text-decoration: none; /* リンクの下線を削除 */
    color: inherit; /* 親要素の色を継承 */
  }
  
  .subs-header-logo-link:hover {
    opacity: 0.8;
  }
  
  .subs-header-nav {
    display: flex;
    gap: 32px;
    align-items: center;
    height: 64px;
  }
  
  .subs-header-nav-link {
    color: var(--color-white);
    font-size: 1.6rem;
    font-weight: 700;
    font-family: "Noto Sans JP", sans-serif;
    text-decoration: none;
    white-space: nowrap; /* 改行せずに表示 */
    line-height: 1;
    transition: color 0.3s ease;
  }
  
  .subs-header-nav-link:hover,
  .subs-header-nav-link:focus {
    color: #ffe066;
    text-decoration: none;
  }

  /* FVエリア外での nav色変更 */
  .subs-header.scrolled .subs-header-nav-link {
    color: var(--color-main);
  }
  
  .subs-header.scrolled .subs-header-nav-link:hover,
  .subs-header.scrolled .subs-header-nav-link:focus {
    color: #ffe066;
  }

  /* =====responsive header===== */
  @media (max-width: 1439px) {
    .subs-header {
      transform: scale(calc(100vw / 1440));
      transform-origin: top left;
    }

    .subs-header-logo {
      width: auto;
      height: auto;
    }

    .subs-header-logo img {
      height: clamp(24px, 3vw, 32px);
    }
  } /* =====max-width: 1439px===== */

  @media (max-width: 799px) {
    .subs-only-pc { 
      display: none; 
    }

    .subs-only-sp {
      display: block; 
    }

    .subs-header {
      top: 0;
      left: 0;
      right: 0;
      width: 100%;
      height: 56px;
      padding: 0;
      background: var(--color-main);
      box-shadow: none;
    }
  
    .subs-header-logo {
      width: 134px;
      height: 56px;
      padding: 12px 16px;
      border-radius: 0;
      background: transparent;
    }
    
    .subs-header-logo img {
      width: auto;
      height: 24px;
    }
    
    /* =====hamburger　menu===== */
    .subs-header-menu-btn {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 62px;
      height: 56px;
      padding: 16px 20px;
      border: none;
      background: var(--color-main);
    }

    .subs-header-menu-btn:active {
      opacity: 0.8;
      transition: opacity 0.2s;
    }
  } /* =====max-width: 799px===== */

/* =========================
   drawer menu
   ========================= */
  .subs-drawer {
    position: fixed;
    z-index: 2000;
    top: 0;
    right: 0;
    transform: translateX(100%);
    transition: transform 0.4s cubic-bezier(.4,0,.2,1);
    display: flex;
    flex-direction: column;
    width: 90vw;
    height: 100vh;
    background: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(255,255,255,0) 100%), rgba(0,85,218,0.2);
    box-shadow: 0 0 40px 0 rgba(24,25,47,0.12);
    backdrop-filter: blur(30px);
  }

  .subs-drawer.is-open {
    transform: translateX(0);
  }

  .subs-drawer-inner {
    display: flex;
    flex-direction: column;
    padding: 120px 0 0 64px;
  }

  /* =====drawer close===== */
  .subs-drawer-close {
    position: absolute;
    top: 0;
    right: 0;
    width: 60px;
    height: 56px;
    background: none;
    border: none;
    outline: none;
    cursor: pointer;
  }

  .subs-drawer-logo img {
    width: 156px;
    height: 40px;
  }

  /* =====drawer nav===== */
  .subs-drawer-nav {
    display: flex;
    flex-direction: column;
    margin: 0;
    margin-top: 56px;
    padding: 0;
    gap: 24px;
    list-style: none;
  }

  .subs-drawer-nav a {
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0;
    text-decoration: none;
    color: var(--color-white);
    transition: opacity 0.2s;
  }

  .subs-drawer-nav a:hover,
  .subs-drawer-nav a:active {
      opacity: 0.7;
  }

  /* =====drawer overlay===== */
  .subs-drawer-overlay {
    position: fixed;
    z-index: 1500;
    top: 0; left: 0; right: 0; bottom: 0;
    display: none; 
    background: rgba(0,0,0,0.5);
  }

  /* =====responsive drawer===== */
  @media (max-width: 393px) {
    .subs-drawer-inner {
      padding: 120px 0 0 clamp(40px, 16vw, 64px);
    }
  } /* =====max-width: 393px===== */

/* =========================
   firstview
   ========================= */
  .subs-firstview {
    position: relative;
    width: 100vw;
    overflow: hidden;
  }

  .subs-firstview,
  .subs-firstview-bg,
  .subs-firstview-canvas {
    height: 696px;
  }

  /* =====firstview bg===== */
  .subs-firstview-bg {
    position: absolute;
    inset: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    background: url('../images/subs-fv-pattern-bg.png') repeat;
    background-size: 70rem auto;
    background-position: 50% 50%;
    pointer-events: none;
  }

  /* キャンバス全体を相対配置 */
  .subs-firstview-canvas {
    position: absolute;
    z-index: 2;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    transform-origin: top left;
    width: 100vw;
    max-width: 1440px;
    transition: transform 0.2s;
  }

  /* =====firstview title===== */
  .subs-firstview-title {
    position: absolute;
    z-index: 3;
    top: 196px;
    left: 120px;
    margin: 0;
    font-size: clamp(3.2rem, 5vw, 6.4rem);
    text-align: left;
    font-weight: 900;
    color: var(--color-white);
  }

  .subs-firstview-title-line1 {
    display: block;
    font-size: clamp(2.8rem, 4.5vw, 6.4rem);
    line-height: 1.4;
  }
  
  .subs-firstview-title-line2 {
    display: block;
    font-size: clamp(3.6rem, 5.5vw, 8rem);
    line-height: 1.4;
  }

  /* =====firstview CTA button===== */
  .subs-firstview-cta-btn {
    position: absolute;
    z-index: 3;
    left: 120px;
    bottom: 145px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: clamp(280px, 34vw, 495px);
    height: clamp(64px, 7.2vw, 104px);
    padding: 0;
    border-radius: 70px;
    background: linear-gradient(90deg, #ff66b4 0%, #f966d9 52%, #f366fa 100%);
    text-decoration: none;
    overflow: hidden;
    transition: transform 0.3s cubic-bezier(0.19, 1, 0.22, 1);
  }

  .subs-firstview-cta-btn::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: url('../images/subs-noiz.png') repeat;
    background-size: 32%;
    mix-blend-mode: screen;
    pointer-events: none;
  }

  .subs-firstview-cta-btn-text {
    position: absolute;
    z-index: 4;
    display: inline;
    width: 100%;
    height: auto;
    font-size: clamp(2rem, 2.8vw, 4rem);
    font-weight: 700;
    line-height: 1.4;
    text-align: center;
    color: var(--color-white);
  }
  
  .subs-cta-num {
    font-family: 'Roboto', sans-serif;
  }

  /* =====firstview CTA button hover===== */
  .subs-firstview-cta-btn:hover {
    transform: scale(1.05);
    background: linear-gradient(90deg, #ff7de4 0%, #fca45c 100%);
    box-shadow: 0 4px 16px rgba(255, 144, 232, 0.2);
    opacity: 0.95;
  }

  .subs-firstview-cta-btn:active {
    background: linear-gradient(90deg, #ff7de4 0%, #fca45c 100%);
    box-shadow: 0 4px 16px rgba(255, 144, 232, 0.2);
    opacity: 0.95;
    transform: scale(1.02);
  }   

  /* =====firstview illust===== */
  .subs-firstview-illust {
    position: absolute;
    z-index: 2;
    top: clamp(64px, 9.2vw, 133px);
    right: clamp(32px, 4.4vw, 64px);
    width: clamp(280px, 47.6vw, 686px);
    height: auto;
    object-fit: contain;
  }

  /* =====responsive firstview===== */
  @media (max-width: 1439px) {
    .subs-firstview,
    .subs-firstview-canvas {
      height: 48vw; 
    }

    .subs-firstview-title {
      top: 13.6vw;
      left: 8.33vw;
    }

    .subs-firstview-cta-btn {
      left: 8.33vw;
      bottom: 10vw;
    }

    .subs-firstview-illust {
      width: 47.6vw;
      top: 9.2vw;
      right: 4.4vw;
    }
  } /* =====max-width: 1439px===== */

  @media (max-width: 799px) {
    .subs-firstview,
    .subs-firstview-bg,
    .subs-firstview-canvas {
      height: clamp(568px, calc(568px + (82 * ((100vw - 320px) / 73))), 650px);
    }

    .subs-firstview {
      min-height: clamp(568px, calc(568px + (82 * ((100vw - 320px) / 73))), 650px);
    }

    /* =====firstview bg===== */
    .subs-firstview-bg {
      background-size: 700px auto;
      background-position: center top;
    }
    
    .subs-firstview-canvas {
      position: static;
      transform: none;
      transition: none;
      width: 100%;
      max-width: none;
      height: auto;
      min-height: clamp(568px, calc(568px + (82 * ((100vw - 320px) / 73))), 650px);
    }

    .subs-firstview-content {
      position: relative;
      display: flex;
      flex-direction: column;
      align-items: center;
      width: 100%;
      max-width: 393px;
      min-height: clamp(568px, calc(568px + (82 * ((100vw - 320px) / 73))), 650px);
      margin: 0 auto;
      padding: 0 0 0 0;
    }
    
    /* =====firstview title===== */
    .subs-firstview-title {
      position: static;
      margin: 174px 0 0 0;
      width: 319px;
      text-align: center;
    }

    .subs-firstview-title-line1 {
      font-size: clamp(2.0rem, 8vw, 3.2rem);
    }

    .subs-firstview-title-line2 {
      font-size: clamp(2.4rem, 10vw, 4.0rem);
    }

    /* =====firstview CTA button===== */
    .subs-firstview-cta-btn {
      position: absolute;
      left: 50%;
      bottom: 48px;
      transform: translateX(-50%);
      width: clamp(180px, 80vw, 313px);
      height: clamp(40px, 14vw, 56px);
    }

    .subs-firstview-cta-btn-text {
      font-size: clamp(1.2rem, 6vw, 2.4rem);
      font-weight: 700;
    }

    /* =====firstview banner===== */
    .subs-firstview-banner.subs-only-sp {
      position: absolute;
      z-index: 2;
      top: 80px;
      left: 50%;
      transform: translateX(-50%);
      display: block;
      width: clamp(100px, 80vw, 300px);
      height: auto;
      pointer-events: none;
    }

    /* =====firstview illust===== */
    .subs-firstview-illust.subs-only-sp {
      position: absolute;
      top: 250px;
      left: 50%;
      transform: translateX(-50%) translateX(-10px);
      width: clamp(180px, 104vw, 409px);
      max-width: none;
      height: auto;
      pointer-events: none;
    }
  } /* =====max-width: 799px===== */

  @media (min-width: 394px) and (max-width: 799px) {
    /* =====firstview height===== */
    .subs-firstview,
    .subs-firstview-bg,
    .subs-firstview-canvas {
      height: 680px;
    }

    .subs-firstview-canvas {
      min-height: 680px;
    }

    .subs-firstview-content {
      min-height: 680px;
    }

    /* =====firstview title===== */
    .subs-firstview-title-line1 {
      font-size: clamp(3.2rem, 5vw, 6.4rem);
    }

    .subs-firstview-title-line2 {
      font-size: clamp(4.0rem, 6vw, 8rem);
      white-space: nowrap;
    }
  } /* =====min-width: 394px and max-width: 799px===== */

  @media (min-width: 430px) and (max-width: 799px) {
    /* =====firstview height for larger screens===== */
    .subs-firstview,
    .subs-firstview-bg,
    .subs-firstview-canvas {
      height: clamp(680px, calc(680px + (200 * ((100vw - 430px) / 369))), 880px);
    }

    .subs-firstview-canvas {
      min-height: clamp(680px, calc(680px + (200 * ((100vw - 430px) / 369))), 880px);
    }

    .subs-firstview-content {
      min-height: clamp(680px, calc(680px + (200 * ((100vw - 430px) / 369))), 880px);
    }

    /* =====firstview title for larger screens===== */
    .subs-firstview-title {
      margin: clamp(174px, calc(174px + (30 * ((100vw - 430px) / 369))), 204px) 0 0 0;
    }

    /* =====firstview illust for larger screens===== */
    .subs-firstview-illust.subs-only-sp {
      position: absolute;
      top: clamp(250px, calc(250px + (200 * ((100vw - 430px) / 369))), 450px);
      left: 50%;
      transform: translateX(-50%) translateX(-10px);
      width: clamp(409px, calc(409px + (191 * ((100vw - 430px) / 369))), 600px);
      height: auto;
      pointer-events: none;
    }

    /* =====firstview CTA button for larger screens===== */
    .subs-firstview-cta-btn {
      position: absolute;
      top: clamp(588px, calc(588px + (120 * ((100vw - 430px) / 369))), 708px);
      left: 50%;
      transform: translateX(-50%);
      width: clamp(313px, calc(313px + (182 * ((100vw - 430px) / 369))), 495px);
      height: clamp(56px, calc(56px + (48 * ((100vw - 430px) / 369))), 104px);
      border-radius: clamp(64px, calc(64px + (36 * ((100vw - 430px) / 369))), 100px);
    }

    .subs-firstview-cta-btn-text {
      font-size: clamp(2.4rem, calc(2.4rem + (2.0 * ((100vw - 430px) / 369))), 4.4rem);
      line-height: 1.2;
    }
  } /* =====min-width: 430px and max-width: 799px===== */

  @media (min-width: 428px) and (max-width: 429px) {
    /* =====firstview height for Plus/Pro Max (428px only)===== */
    .subs-firstview,
    .subs-firstview-bg,
    .subs-firstview-canvas {
      height: 680px; /* 750px → 680px に短縮 */
    }

    .subs-firstview-canvas {
      min-height: 680px;
    }

    .subs-firstview-content {
      min-height: 680px;
    }

    .subs-firstview-cta-btn {
      bottom: 60px; /* 80px → 60px に調整 */
    }
  } /* =====min-width: 428px and max-width: 429px===== */

  /* =====firstview banner===== */
  .subs-firstview-banner.subs-only-sp {
    width: clamp(367px, 92vw, 400px);
  }
  
  /* =====firstview illust===== */
  .subs-firstview-illust.subs-only-sp {
    position: absolute;
    top: 250px;
    left: 50%;
    transform: translateX(-50%) translateX(-10px);
    width: clamp(409px, 100vw, 560px);
    height: auto;
    pointer-events: none;
  }

  @media (max-width: 393px) {
    .subs-firstview-illust.subs-only-sp {
      width: clamp(300px, calc(300px + (109 * ((100vw - 320px) / 73))), 409px);
    }
    
    .subs-firstview-banner.subs-only-sp {
      width: clamp(280px, calc(280px + (20 * ((100vw - 320px) / 73))), 300px);
    }
  } /* =====max-width: 393px===== */

/* =========================
   trouble:お悩み
   ========================= */
  .subs-trouble {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

  /* =====section title===== */
  .subs-section-title {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: clamp(64px, 8.33vw, 80px);
    margin-bottom: clamp(32px, 4.17vw, 48px);
    gap: clamp(16px, 1.67vw, 24px);
    text-align: center;
  }
  
  .subs-section-eyebrow {
    position: relative;
    display: inline-flex;
    align-items: center;
    font-size: clamp(2.0rem, 1.67vw, 2.4rem);
    font-weight: 700;
    line-height: 1;
    color: var(--color-black);
  }
  
  .subs-section-eyebrow::before {
    content: "";
    display: inline-block;
    width: 22px;
    height: 22px;
    margin-right: 10px;
    border-radius: 50%;
    background: var(--color-main);
  }
  
  .subs-section-eyebrow::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 3px;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--color-white);
    pointer-events: none;
  }
  
  .subs-section-title-main {
    margin: 0;
    font-size: clamp(3.6rem, 3vw, 4.0rem);
    font-weight: 700;
    line-height: 1.0;
    color: var(--color-black);
  }
  
  /* =====trouble comment list===== */
  .subs-trouble-comment-list {
    display: flex;
    padding-top: 16px;
    gap: clamp(16px, 2.22vw, 32px);
  }
  
  /* =====trouble comment wrapper===== */
  .subs-trouble-comment-wrapper {
    max-width: 308px;
  }

  .subs-comment-center {
    margin-top: 64px;
  }

  .subs-comment-end {
    margin-left: -40px;
  }

  /* =====trouble comment inner===== */
  .subs-trouble-comment-inner {
    position: relative;
    display: flex;
    align-items: flex-end;
    justify-content: space-around;
    width: clamp(200px, 21.4vw, 308px);
  }
  
  /* =====trouble comment figure===== */
  .subs-trouble-comment-figure {
    position: absolute;
    z-index: 2;
    width: clamp(64px, 7.22vw, 104px);
    height: auto;
  }

  .subs-trouble-comment-figure-img {
    display: block;
    width: 100%;
    height: auto;
  }
  
  .subs-comment-figure-ad,
  .subs-comment-figure-caf {
    left: -24px;
  }
  
  .subs-comment-figure-media {
    right: -24px;
  }
  
  /* =====trouble comment bubble===== */
  .subs-trouble-comment-bubble {
    position: relative;
    z-index: 1;
    width: clamp(160px, 18.6vw, 268px);
    height: clamp(64px, 7.5vw, 108px);
  }
  
  .subs-trouble-comment-bubble-bg.subs-only-sp {
    display: none;
  }
  
  /* =====trouble comment text===== */
  .subs-trouble-comment-text {
    position: relative;
    z-index: 1;
    top: 50%;
    transform: translatey(-70%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: clamp(1.2rem, 1.11vw, 1.6rem);
  }

  /* =====trouble comment bubble bg===== */
  .subs-trouble-comment-bubble-bg {
    position: absolute;
    z-index: 0;
    top: 0;
    left: 0;
    width: 100%;
    object-fit: contain;
  }

  /* =====responsive trouble:お悩み===== */
  @media (max-width: 799px) {
    .subs-trouble {
      overflow: hidden;
    }

    /* =====section title===== */
    .subs-section-title {
      margin-top: 64px;
      margin-bottom: 32px;
    }
    
    .subs-section-eyebrow {
      font-size: clamp(1.6rem, 3vw, 2.0rem)
    }

    .subs-section-title-main {
      font-size: 3.2rem;
      font-size: 4.0rem;
      font-size: clamp(3.2rem, 5vw, 3.6rem)
    }

    /* =====trouble comment list===== */
    .subs-trouble-comment-list {
      flex-direction: column;
      padding-top: 0;
      gap: 24px;
    }

    /* =====trouble comment wrapper===== */
    .subs-trouble-comment-wrapper {
      width: 100%;
      margin-left: 0;
      margin-top: 0;
    }

    /* =====trouble comment inner===== */
    .subs-trouble-comment-inner {
      width: clamp(180px, 66vw, 261px);
      height: clamp(64px, 24vw, 94px);
    }

    /* =====trouble comment figure===== */
    .subs-trouble-comment-figure {
      min-width: clamp(48px, 19vw, 76px);
      height: clamp(58px, 23vw, 91px);
    }

    .subs-comment-figure-ad {
      left: unset;
      transform: scaleX(-1);
    }
    
    .subs-comment-figure-ad,
    .subs-comment-figure-media {
      right: -16px;
    }

    .subs-comment-figure-caf {
      left: -16px;
    }

    /* =====trouble comment bubble===== */
    .subs-trouble-comment-bubble {
      width: clamp(160px, 58vw, 228px);
      height: clamp(56px, 20vw, 80px);
    }

    .subs-trouble-comment-bubble-bg.subs-only-pc {
      display: none;
    }

    .subs-trouble-comment-bubble-bg.subs-only-sp {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: contain;
    }

    /* =====trouble comment text===== */
    .subs-trouble-comment-text {
      top: 50%;
      left: 50%;
      transform: translate(-49%, -66%);
      font-size: clamp(1.0rem, 3.5vw, 1.4rem);
    }
  } /* =====max-width: 799px===== */

  @media screen and (max-width: 393px) {
    .subs-section-eyebrow::before {
      width: 16px;
      height: 16px;
      margin-right: 8px;
    }

    .subs-section-eyebrow::after {
      width: 12px;
      height: 12px;
      left: 2px;
    }

    .subs-section-title-main {
      font-size: clamp(2.4rem, 9vw, 3.2rem);
    }
  } /* =====max-width: 393px===== */

  @media screen and (max-width: 320px) {
    .subs-section-eyebrow::before {
      width: 14px;
      height: 14px;
      margin-right: 6px;
    }

    .subs-section-eyebrow::after {
      width: 10px;
      height: 10px;
      left: 2px;
    }

    .subs-section-title-main {
      font-size: clamp(2.0rem, 8vw, 2.4rem);
    }
  } /* =====max-width: 320px===== */



/* =========================
   plan:プラン内容
   ========================= */
  .subs-plan {
    display: flex;
    flex-direction: column;
    margin-bottom: clamp(64px, 8.33vw, 80px);
    padding-bottom: clamp(0px, calc((1440px - 100vw) * 0.073), 44px);
    overflow: hidden;
  }

  .subs-plan-point-list {
    display: flex;
    align-items: center;
    flex-direction: column;
  }

  .subs-plan-point-item {
    position: relative;
    display: flex;
    justify-content: center;
    padding-top: min(56px, calc((1440px - 100vw) * 0.1));
  }

  .subs-point-item-center,
  .subs-point-item-end {
    margin-top: clamp(64px, calc(64px + 56 * ((1440px - 100vw) / 672)), 120px);
  }

  .subs-plan-point-body {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    max-width: 1080px;
    height: 486px;
    margin: 0 auto;
    gap: 80px;
  }
  
  .subs-point-item-center .subs-plan-point-body {
    gap: 64px;
  }

  .subs-plan-point-card-wrapper {
    position: relative;
    width: 576px;
  }

  /* =====plan point card bg===== */
  .subs-plan-point-card-bg {
    position: absolute;
    z-index: 2;
    top: 32px;
    left: 32px;
    width: 100%;
    height: 100%;
    border-radius: 16px;
    background: url('../images/subs-point-pattern-dot.svg') center center repeat;
    background-size: 22px 22px;
  }

  /* =====plan point card===== */
  .subs-plan-point-card {
    position: relative;
    z-index: 3;
    border-radius: 16px;
    box-sizing: border-box; /* padding等含めてwidth/heightを計算し、レイアウト崩れを防ぐ */
    background: var(--color-white);
    overflow: visible;
  }

  /* =====plan point card inner===== */
  .subs-plan-point-card-inner {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    width: 100%;
    height: 100%;
    padding: 72px 56px 70px 40px;
    box-sizing: border-box;
    background: var(--color-white);
    border-radius: 16px;
  }

  /* =====plan point card label===== */
  .subs-plan-point-label {
    position: absolute;
    top: -16px;
    left: -16px;
    display: inline-flex;
    align-items: center;
    width: 172px;
    padding: 12px 24px;
    font-weight: 700;
    font-size: 2.4rem;
    line-height: 1.0;
    color: var(--color-main);
    background: #FFDCFA;
    border-radius: 12px;
  }

  .subs-point-item-center .subs-plan-point-label {
    background: #92F2E2;
  }

  .subs-point-item-end .subs-plan-point-label {
    background: #FFDF80;
  }

  .subs-plan-point-icon {
    width: 24px;
    height: 24px;
    margin-right: 8px;
  }

  /* =====plan point card title===== */
  .subs-plan-point-title {
    z-index: 5;
    margin-bottom: 24px;
    font-size: 3.2rem;
    font-weight: 700;
    line-height: 1.4;
    color: var(--color-main);
  }

  .subs-plan-point-desc {
    width: 100%;
    max-width: 464px;
    font-size: 1.6rem;
  }

  .subs-plan-point-note {
    display: block;
    margin-top: 12px;
    font-size: 1.4rem;
    padding-left: 1em; /* 全体を右にずらす */
    text-indent: -1em; /* 1行目を左に出す */
    word-break: break-all; /* 長い単語の折り返し対策 */
  }

  /* =====plan point card figure===== */
  .subs-plan-point-figure {
    position: absolute;
    z-index: 4;
  }

  .subs-plan-point-figure-ad {
    top: -37px;
    right: 39px;
    width: 222px;
  }

  .subs-plan-point-figure-caf {
    top: -47px;
    right: -22px;
    width: 256px;
  }

  .subs-plan-point-figure-media {
    top: -58px;
    right: 5px;
    width: 238px;
  }

  /* =====plan point card deco===== */
  .subs-plan-point-object {
    position: absolute;
    z-index: 4;
  }

  .subs-object-yellow {
    right: -30%; /* right: -170px */
    transform: translateY(0%); /* bottom: -112px */
    width: clamp(140px, 16vw, 220px);
  }

  .subs-object-purple {
    transform: translateY(-263%); /* top: -42px */
    left: -4%; /* left: -17px */
    width: clamp(50px, 6vw, 82px);
  }

  .subs-object-pink {
    left: -9%; /* left: -53px */
    transform: translateY(-34%); /* bottom: -74px */
    width: clamp(70px, 8vw, 117px);
  }

  .subs-object-green {
    right: -13%; /* right: -75px */
    transform: translateY(-37%); /* bottom: -78px */
    width: clamp(100px, 13vw, 188px);
  }

  /* =====plan mock===== */
  .subs-plan-mock {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 424px;
  }

  .subs-plan-image-bg {
    position: absolute;
    z-index: 1;
  }

  .subs-plan-image-bg-green {
    top: -230px;
    right: -130px;
    width: 650px;
  }

  .subs-plan-image-bg-blue {
    top: -140px;
    left: -160px;
    width: 740px;
  }

  .subs-plan-image-bg-pink {
    top: -270px;
    right: -130px;
    width: 700px;
  }

  /* =====plan mock list===== */
  .subs-plan-mock-list {
    position: absolute;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 32px;
  }

  .subs-plan-mock-item {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .subs-plan-mock-label {
    font-size: 2.4rem;
    font-weight: 500;
    line-height: 1.0;
  }

  .subs-plan-mock-label-free {
    color: var(--color-black);
  }

  .subs-plan-mock-label-ad-premium {
    color: var(--color-main);
  }

  .subs-plan-mock-label-media-premium {
    color: var(--color-white);
  }

  .subs-plan-mock-img {
    width: 196px;
    margin-top: 24px;
  }

  /* =====plan point infographic===== */
  .subs-plan-infographic {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .subs-plan-infographic-inner {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(16px, 4vw, 33px);
    border-radius: 16px;
    background: var(--color-white);
  }

  .subs-plan-infographic-img {
    width: 100%;
    max-width: 329px;
  }

  /* =====responsive plan:プラン内容===== */
  @media (min-width: 800px) and (max-width: 1439px) {
    .subs-plan-point-card-wrapper {
      width: 40vw;
      max-width: 576px;
    }
    
    /* =====plan point card title===== */
    .subs-plan-point-title {
      font-size: clamp(2.8rem, 3vw, 3.2rem);
    }

    /* =====plan point card figure===== */
    .subs-plan-point-figure-ad {
      right: clamp(-12px, calc(-12px + (51 * ((100vw - 768px) / 672))), 39px);
      width: clamp(160px, 17vw, 222px);
    }

    .subs-plan-point-figure-caf {
      top: clamp(-58px, calc(-58px + 8 * ((100vw - 800px) / 640)), -50px);
      right: clamp(-22px, calc(-22px + 2 * ((100vw - 800px) / 640)), -20px);
      width: clamp(180px, 18vw, 256px);
    }

    .subs-plan-point-figure-media {
      top: -58px;
      right: clamp(-15px, calc(-15px + (20 * ((100vw - 800px) / 640))), 5px);
      width: clamp(170px, 17vw, 238px);
    }

    /* =====plan mock list===== */
    .subs-plan-mock-label {
      font-size: clamp(2.0rem, 2vw, 2.4rem);
    }

    .subs-plan-mock {
      width: 34vw;
      max-width: 424px;
    }
    
    .subs-plan-mock-img {
      width: 100%;
    }

    /* =====plan point infographic===== */
    .subs-plan-infographic-inner {
      width: 36vw;
      max-width: 440px;
    }

    .subs-plan-infographic-img {
      width: 100%;
    }
  } /* =====min-width: 800px and max-width: 1439px===== */

  @media screen and (max-width: 799px) {
    .subs-plan {
      padding-bottom: 48px;
    }

    /* =====section title===== */
    .subs-section-title {
      margin-bottom: 32px;
    }

    .subs-plan .subs-section-title-main {
      line-height: 1.4;
    }

    /* =====plan point list===== */
    .subs-plan-point-list {
      gap: 0;
    }

    .subs-plan-point-item {
      padding-top: 0;
    }
  
    .subs-point-item-center,
    .subs-point-item-end {
      margin-top: 96px;
    }

    .subs-plan-point-body {
      flex-direction: column;
      justify-content: unset;
      height: auto;
      gap: 0;
    }

    .subs-point-item-center .subs-plan-point-body {
      gap: 0;
    }

    .subs-plan-point-card-wrapper {
      width: 329px;
      margin: 8px 40px 16px 24px;
    }
    
    .subs-point-item-center .subs-plan-point-card-wrapper {
      order: 1;
    }

    /* =====plan point card bg===== */
    .subs-plan-point-card-bg {
      top: 16px;
      left: 16px;
      border-radius: 8px;
      background-size: 13px 13px;
    }

    /* =====plan point card===== */
    .subs-plan-point-card {
      border-radius: 8px;
    }

    /* =====plan point card inner===== */
    .subs-plan-point-card-inner {
      padding: 48px 32px 32px;
      border-radius: 8px;
    }

    /* =====plan point card label===== */
    .subs-plan-point-label {
      top: -8px;
      left: -8px;
      width: auto;
      padding: 8px 12px;
      font-size: clamp(1.6rem, 3vw, 2.0rem);
      border-radius: 4px;
    }

    .subs-plan-point-icon {
      width: 14px;
      height: 14px;
      margin-right: 4px;
    }

    /* =====plan point card title===== */
    .subs-plan-point-title {
      font-size: clamp(2.4rem, 5vw, 2.8rem);
    }

    .subs-plan-point-desc {
      font-size: clamp(1.4rem, 2vw, 1.6rem);
    }

    .subs-plan-point-note {
      margin-top: 16px;
      font-size: 1.2rem;
    }

    /* =====plan point card deco===== */
    .subs-object-yellow {
      left: -7%; /* left: -22px; */
      transform: translateY(316%); /* bottom: -30px; */
      width: 106px;
    }

    .subs-object-purple {
      transform: translateY(323%); /* bottom: -130px; */
      left: -9%; /* left: -27px; */
      width: 47px;
    }

    .subs-object-pink {
      right: -9%; /* right: -29px; */
      transform: translateY(-23%); /* bottom: -58px; */
      left: unset;
      width: 54px;
    }

    .subs-object-green {
      transform: translateY(284%); /* bottom: -32px; */
      right: -1%; /* right: -28px; */
      width: 85px;
    }

    /* =====plan mock===== */
    .subs-plan-mock {
      max-width: 313px;
      margin-top: 24px;
    }

    .subs-plan-image-bg {
      top: auto;
      left: auto;
      right: auto;
      width: 500px;
    }
    
    /* =====plan mock list===== */
    .subs-plan-mock-list {
      position: static;
      gap: 25px;
    }

    .subs-plan-mock-label {
      font-size: clamp(1.8rem, 3vw, 2.0rem);
    }

    .subs-plan-mock-img {
      width: 100%;
      max-width: 313px;
      height: auto;
      margin-top: 16px;
    }

    /* =====plan point infographic===== */
    .subs-plan-infographic {
      margin-top: 24px;
      order: 2;
    }

    .subs-plan-infographic-inner {
      padding: 25px 40px;
      border-radius: 8px;
    }

    .subs-plan-infographic-img {
      width: 100%;
      max-width: 313px;
      height: auto;
    }
  } /* =====max-width: 799px===== */

  @media (min-width: 394px) and (max-width: 799px) {
    .subs-plan-point-card-wrapper {
      width: clamp(329px, 55vw, 576px);
    }

    /* =====plan point card===== */
    .subs-plan-point-card {
      border-radius: clamp(8px, 1.5vw, 16px);
    }
    
    /* =====plan point card inner===== */
    .subs-plan-point-card-inner {
      padding: clamp(48px, 5vw, 72px) clamp(32px, 4vw, 56px) clamp(32px, 5vw, 70px);
      border-radius: clamp(8px, 1.5vw, 16px);
    }

    /* =====plan point card figure===== */
    .subs-plan-point-figure-ad {
      top: clamp(-26px, calc(-26px + (1 * ((100vw - 393px) / 406))), -25px);
      right: clamp(20px, calc(20px + (12 * ((100vw - 393px) / 406))), 32px);
      width: clamp(108px, 24vw, 160px);
    }

    .subs-plan-point-figure-caf {
      width: clamp(125px, 32vw, 180px);
    }

    .subs-plan-point-figure-media {
      top: clamp(-44px, calc(-44px + (6 * ((100vw - 799px) / -405))), -38px);
      right: clamp(-12px, calc(-12px + (17 * ((100vw - 393px) / 405))), 5px);
      width: clamp(135px, 35vw, 170px);
    }
  } /* =====min-width: 394px and max-width: 799px===== */

  /* =====responsive plan point figure===== */
  @media (min-width: 450px) and (max-width: 699px) {
    .subs-plan-point-figure-media {
      right: -30px;
    }
  } /* =====min-width: 394px and max-width: 799px===== */

  @media (min-width: 500px) {
    .subs-plan-point-figure-caf {
      top: -74px;
      right: 5px;
    }
  } /* =====min-width: 500px===== */

  @media (min-width: 394px) and (max-width: 499px) {
    .subs-plan-point-figure-caf {
      top: clamp(-70px, calc(-70px + 30 * ((500px - 100vw) / 106)), -40px);
      right: clamp(5px, calc(15px - 10 * ((100vw - 393px) / 106)), 15px);
    }
  
    .subs-plan-point-figure-media {
      right: clamp(-12px, calc(-12px + (2 * ((100vw - 394px) / 55))), -10px);
    }
  } /* =====min-width: 394px and max-width: 449px===== */

  @media screen and (max-width: 393px) {
    .subs-plan-point-card-wrapper {
      max-width: clamp(260px, 84vw, 329px);
    }

    /* =====plan point card figure===== */
    .subs-plan-point-figure-ad {
      top: -25px;
      right: clamp(6px, calc(6px + (14 * ((100vw - 320px) / 73))), 20px);
      width: clamp(105px, 28vw, 108px);
    }

    .subs-plan-point-figure-caf {
      top: -40px;
      right: 15px;
      width: clamp(120px, 32vw, 125px);
    }

    .subs-plan-point-figure-media {
      top: -38px;
      right: -12px;
      width: clamp(127px, 35vw, 135px);
    }

    /* =====plan mock list===== */
    .subs-plan-mock-label {
      font-size: clamp(1.6rem, 5vw, 1.8rem);
    }

    .subs-plan-mock-img {
      max-width: clamp(120px, 40vw, 313px);
    }

    /* =====plan point infographic===== */
    .subs-plan-infographic-img {
      max-width: clamp(160px, 60vw, 313px);
    }
  } /* =====max-width: 393px===== */

  /* =====responsive plan point title br===== */
  @media (min-width: 800px) and (max-width: 1117px) {
    .subs-only-br-caf-title {
      display: none;
    }
  } /* =====min-width: 800px and max-width: 1117px===== */

  @media (min-width: 531px) and (max-width: 959px) {
    .subs-only-br-media-title {
      display: none;
    }
  } /* =====min-width: 531px and max-width: 959px===== */

  @media (min-width: 675px) and (max-width: 799px) {
    .subs-only-br-caf-title,
    .subs-only-br-media-title {
      display: block;
    }
  } /* =====min-width: 675px and max-width: 799px===== */

  @media (min-width: 362px) and (max-width: 530px) {
    .subs-only-br-media-title {
      display: block;
    }
  } /* =====min-width: 362px and max-width: 530px===== */

  @media (max-width: 361px) {
    .subs-only-br-media-title {
      display: none;
    }
  } /* =====max-width: 361px===== */

  /* =====responsive plan point desc===== */
  @media (max-width: 1395px) {
    .subs-only-br-ad-desc {
      display: none;
    }
  } /* =====max-width: 1395px===== */

  @media (max-width: 1175px) {
    .subs-only-br-caf-desc {
      display: none;
    }
  } /* =====max-width: 1175px===== */

  @media (max-width: 1078px) {
    .subs-only-br-media-desc {
      display: none;
    }
  } /* =====max-width: 1078px===== */

/* =========================
   compare:無料会員との比較
   ========================= */
  .subs-compare {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-bottom: 80px;
    border-top-left-radius: 120px;
    border-top-right-radius: 120px;
    background: var(--color-white);
  }
  
  .subs-compare .subs-section-eyebrow::after {
    background: var(--color-light-blue);
  }

  /* =====compare wrapper===== */
  .subs-compare-wrapper {
    display: flex;
  }

  /* =====compare table wrapper===== */
  .subs-compare-table-wrapper {
    position: relative;
    z-index: 3;
    margin-top: 20px;
    border-radius: 24px;
    outline: 1px solid var(--color-dark-gray);
    overflow: visible;
  }
  
  /* =====compare table===== */
  .subs-compare-table {
    font-size: 1.6rem;
    border-radius: 24px;
    border-collapse: separate;
    border-spacing: 0;
  }

  .subs-compare-table th,
  .subs-compare-th-label,
  .subs-compare-th-free,
  .subs-compare-th-premium {
    width: 256px;
  }

  /* =====compare table border radius===== */
  .subs-compare-table th:first-child {
    border-top-left-radius: 24px;
  }

  .subs-compare-table th:last-child {
    border-top-right-radius: 24px;
  }

  .subs-compare-table tr:last-child td:first-child {
    border-bottom-left-radius: 24px;
  }
  
  .subs-compare-table tr:last-child td:last-child {
    border-bottom-right-radius: 24px;
  }

  /* =====compare table border===== */
  .subs-compare-th-label,
  .subs-compare-th-free,
  .subs-compare-td-label,
  .subs-compare-td-free {
    border: 1px solid var(--color-dark-gray);
  }

  .subs-compare-td-premium {
    position: relative;
    z-index: 4;
    border: 1px solid var(--color-main);
    border-left: 4px solid var(--color-main);
    border-right: 4px solid var(--color-main);
    box-shadow: 0 0 0 2px var(--color-main);
  }

  .subs-compare-td-premium-last {
    border-bottom: 4px solid var(--color-main);
    box-shadow: 0 0 0 2px var(--color-main);
  }

  /* =====compare table head===== */
  .subs-compare-table th {
    padding: 32px 0;
    line-height: 1.0;
    background: var(--color-light-gray);
  }
  
  .subs-compare-head-premium {
    position: absolute;
    z-index: 4;
    top: -20px;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 74px;
    padding: 48px 0;
    font-size: 2.4rem;
    font-weight: 700;
    text-align: center;
    color: var(--color-white);
    background: var(--color-main);
    border-top-right-radius: 24px;
    border-top-left-radius: 24px;
    border: 2px solid var(--color-main);
    box-shadow: 0 0 0 2px var(--color-main);
  }

  .subs-only-br-compare-head {
    display: none;
  }

  /* =====compare table body===== */
  .subs-compare-td-label {
    padding: 28px 24px;
    background: var(--color-light-gray);
  }

  .subs-compare-td-free,
  .subs-compare-td-premium {
    padding: 28px 0;
    text-align: center;
    background: var(--color-white);
  }

  .subs-compare-mark-x,
  .subs-compare-mark-circle {
    width: 18px;
    height: 18px;
    vertical-align: middle;
  }

  .subs-compare-mark-circle-premium {
    width: 28px;
    height: 28px;
    vertical-align: middle;
  }

  /* =====compare table feature detail===== */
  .subs-compare-feature-detail {
    display: flex;
    flex-direction: column;
    margin-top: 8px;
    font-size: 1.4rem;
    align-items: flex-start;
    gap: 4px;
  }

  .subs-compare-feature-detail li {
    list-style: none;
    position: relative;
    padding-left: 1.8rem;
  }

  .subs-compare-feature-detail li::before {
    content: "\2022";
    position: absolute;
    left: 5px;
  }

  .subs-compare-note {
    margin-top: 8px;
    font-size: 1.4rem;
    line-height: 1.0;
  }

  /* =====compare deco===== */
  .subs-compare-deco {
    display: flex;
    flex-direction: column;
  }

  .subs-compare-deco-img {
    position: absolute;
    width: clamp(56px, 3.9vw, 64px);
    object-fit: contain; /* 画像のアスペクト比を維持しながら、コンテナに収まるように表示 */
  }

  .subs-compare-deco-music,
  .subs-compare-deco-doc,
  .subs-compare-deco-pages,
  .subs-compare-deco-keynote{
    width: clamp(48px, 3.3vw, 56px);
  }

  .subs-compare-deco-left,
  .subs-compare-deco-right {
    position: absolute;
    z-index: 2;
  }

  /* =====compare deco left===== */
  .subs-compare-deco-left {
    left: 0;
  }
  
  .subs-compare-deco-html {
    top: 65px;
    left: 12.5vw; /* 180px ÷ 1440px ≈ 12.5% */
    transform: rotate(-22deg);
  }

  .subs-compare-deco-zip {
    top: 321px;
    left: 4.7vw; /* 68px ÷ 1440px ≈ 4.7% */
    transform: rotate(22deg);
  }
  
  .subs-compare-deco-music {
    top: 660px;
    left: 13.75vw; /* 198px ÷ 1440px ≈ 13.75% */
    transform: rotate(-14deg);
  }

  .subs-compare-deco-doc {
    top: 970px;
    left: 8.8vw; /* 127px ÷ 1440px ≈ 8.8% */
    transform: rotate(32deg);
  }

  /* =====compare deco right===== */
  .subs-compare-deco-right {
    right: 0;
  }

  .subs-compare-deco-numbers {
    top: -78px;
    right: 14.2vw; /* 205px ÷ 1440px ≈ 14.2% */
    transform: rotate(22deg);
  }

  .subs-compare-deco-pdf {
    top: 280px;
    right: 6.8vw; /* 98px ÷ 1440px ≈ 6.8% */
    transform: rotate(-18deg);
  }

  .subs-compare-deco-pages {
    top: 581px;
    right: 13.6vw; /* 196px ÷ 1440px ≈ 13.6% */
    transform: rotate(19deg);
  }

  .subs-compare-deco-keynote {
    top: 919px;
    right: 6.0vw; /* 86px ÷ 1440px ≈ 6.0% */
    transform: rotate(-22deg);
  }

  /* =====responsive compare===== */
  @media (min-width: 800px) and (max-width: 1439px) {
    .subs-compare {
      padding-bottom: clamp(64px, 7vw, 80px);
      border-top-left-radius: clamp(40px, 8vw, 120px);
      border-top-right-radius: clamp(40px, 8vw, 120px);
    }

    /* =====compare table wrapper===== */
    .subs-compare-table-wrapper {
      margin: clamp(13px, 3vw, 20px) 24px 0;
      border-radius: clamp(14px, 1.7vw, 24px);
    }

    /* =====compare table===== */
    .subs-compare-table {
      font-size: clamp(1.4rem, 2.5vw, 1.6rem);
      border-radius: clamp(14px, 1.7vw, 24px);
    }
  
    .subs-compare-table th,
    .subs-compare-th-label,
    .subs-compare-th-free,
    .subs-compare-th-premium {
      min-width: 250px;
      width: clamp(250px, 40vw, 256px);
    }

    /* =====compare table border radius===== */
    .subs-compare-table th:first-child {
      border-top-left-radius: clamp(14px, 1.7vw, 24px);
    }

    .subs-compare-table th:last-child {
      border-top-right-radius: clamp(14px, 1.7vw, 24px);
    }

    .subs-compare-table tr:last-child td:first-child {
      border-bottom-left-radius: clamp(14px, 1.7vw, 24px);
    }
    
    .subs-compare-table tr:last-child td:last-child {
      border-bottom-right-radius: clamp(14px, 1.7vw, 24px);
    }

    /* =====compare table head===== */
    .subs-compare-table th {
      padding: clamp(28px, 3.0vw, 32px) 0;
    }
    
    .subs-compare-head-premium {
      height: 100px;
      padding: clamp(28px, 3.4vw, 48px) 0;
      font-size: clamp(1.6rem, 1.8vw, 2.4rem);
      border-top-right-radius: clamp(14px, 1.7vw, 24px);
      border-top-left-radius: clamp(14px, 1.7vw, 24px);
    }
      
    /* =====compare table head premium===== */
    .subs-compare-td-premium {
      border-left: clamp(2px, 0.25vw, 4px) solid var(--color-main);
      border-right: clamp(2px, 0.25vw, 4px) solid var(--color-main);
    }

    .subs-compare-td-premium-last {
      border-bottom: clamp(2px, 0.25vw, 4px) solid var(--color-main);
    }

    /* =====compare table body===== */
    .subs-compare-td-label {
      padding: clamp(16px, 2.0vw, 28px) clamp(12px, 1.4vw, 24px);
    }

    .subs-compare-td-free,
    .subs-compare-td-premium {
      padding: clamp(16px, 2.0vw, 28px) 0;
    }

    .subs-compare-mark-x,
    .subs-compare-mark-circle {
      width: clamp(12px, 1.4vw, 18px);
      height: clamp(12px, 1.4vw, 18px);
    }

    .subs-compare-mark-circle-premium {
      width: clamp(16px, 2.0vw, 28px);
      height: clamp(16px, 2.0vw, 28px);
    }

    /* =====compare table feature detail===== */
    .subs-compare-feature-detail {
      margin-top: clamp(6px, 0.7vw, 8px);
      font-size: clamp(1.2rem, 1.5vw, 1.4rem);
      gap: clamp(2px, 0.25vw, 4px);
    }

    .subs-compare-feature-detail li {
      padding-left: clamp(1.4rem, 1.5vw, 1.8rem);
    }

    .subs-compare-feature-detail li::before {
      left: clamp(3px, 0.35vw, 5px);
      font-size: clamp(1.2rem, 1.5vw, 1.4rem);
    }

    .subs-compare-note {
      font-size: clamp(1.2rem, 1.5vw, 1.4rem);
    }
  } /* =====min-width: 800px and max-width: 1439px===== */

  @media (min-width: 960px) and (max-width: 1439px) {
    /* =====compare deco===== */
    .subs-compare-deco-img {
      width: clamp(40px, 3.9vw, 56px);
    }

    .subs-compare-deco-music,
    .subs-compare-deco-doc,
    .subs-compare-deco-pages,
    .subs-compare-deco-keynote{
      width: clamp(32px, 3.3vw, 48px);
    }

    /* =====compare deco left===== */
    .subs-compare-deco-html {
      left: calc(180px + (-120 * ((1439px - 100vw) / 479)));
    }

    .subs-compare-deco-zip {
      top: calc(321px + (18 * ((1439px - 100vw) / 479)));
      left: calc(68px + (-36 * ((1439px - 100vw) / 479)));
    }
    
    .subs-compare-deco-music {
      top: calc(660px + (-30 * ((1439px - 100vw) / 479)));
      left: calc(198px + (-158 * ((1439px - 100vw) / 479)));
    }

    .subs-compare-deco-doc {
      top: calc(970px + (-90 * ((1439px - 100vw) / 479)));
      left: calc(127px + (-110 * ((1439px - 100vw) / 479)));
    }

    /* =====compare deco right===== */
    .subs-compare-deco-numbers {
      right: calc(205px + (-163 * ((1440px - 100vw) / 480)));
    }

    .subs-compare-deco-pdf {
      top: calc(280px + (-32 * ((1440px - 100vw) / 480)));
      right: calc(98px + (-94 * ((1440px - 100vw) / 480)));
    }

    .subs-compare-deco-pages {
      top: calc(581px + (-75 * ((1440px - 100vw) / 480)));
      right: calc(196px + (-160 * ((1440px - 100vw) / 480)));
    }

    .subs-compare-deco-keynote {
      top: calc(919px + (-119 * ((1440px - 100vw) / 480)));
      right: calc(86px + (-68 * ((1440px - 100vw) / 480)));
    }
  } /* =====min-width: 960px and max-width: 1439px===== */



  @media (min-width: 800px) and (max-width: 959px) {
    /* =====compare deco===== */
    .subs-compare-deco-img {
      width: 40px;
    }

    .subs-compare-deco-music,
    .subs-compare-deco-doc,
    .subs-compare-deco-pages,
    .subs-compare-deco-keynote{
      width: 32px;
    }

    /* =====compare deco left===== */
    .subs-compare-deco-html {
      left: 60px;
    }

    .subs-compare-deco-zip {
      top: 339px;
      left: 32px;
    }
    
    .subs-compare-deco-music {
      top: 630px;
      left: 40px;
    }

    .subs-compare-deco-doc {
      top: 880px;
      left: 17px;
    }

    /* =====compare deco right===== */
    .subs-compare-deco-numbers {
      right: 42px;
    }

    .subs-compare-deco-pdf {
      top: 248px;
      right: 4px;
    }

    .subs-compare-deco-pages {
      top: 506px;
      right: 36px;
    }

    .subs-compare-deco-keynote {
      top: 800px;
      right: 18px;
    }
  } /* =====min-width: 960px and max-width: 1439px===== */

  @media (max-width: 1049px) {
    .subs-compare-head-premium {
      height: 90px;
      padding: clamp(44px, 4.6vw, 48px) 0;
    }
  } /* =====max-width: 1049px===== */

  @media (max-width: 799px) {
    /* =====compare section===== */
    .subs-compare {
      padding-bottom: 64px;
    }

    /* =====compare table border===== */
    .subs-compare-th-label,
    .subs-compare-th-free,
    .subs-compare-td-label,
    .subs-compare-td-free {
      border: 0.5px solid var(--color-dark-gray);
    }
    
    /* =====compare table head premium===== */
    .subs-compare-td-premium {
      border-left: 2px solid var(--color-main);
      border-right: 2px solid var(--color-main);
    }

    .subs-compare-td-premium-last {
      border-bottom: 2px solid var(--color-main);
    }

    .subs-compare-head-premium {
      top: -18px;
    }

    .subs-only-br-compare-head {
      display: none;
    }

    /* =====compare table body===== */
    .subs-compare-td-label {
      padding: 16px 12px;
    }
  
    .subs-compare-td-free,
    .subs-compare-td-premium {
      padding: 16px 0;
    }
  
    .subs-compare-mark-x,
    .subs-compare-mark-circle {
      width: 12px;
      height: 12px;
    }
  
    .subs-compare-mark-circle-premium {
      width: 16px;
      height: 16px;
    }

    /* =====compare table feature detail===== */
    .subs-compare-feature-detail {
      margin-top: 6px;
      font-size: 1.2rem;
      gap: 2px;
    }

    .subs-compare-feature-detail li::before {
      left: 3px;
      font-size: 1.2rem;
    }
  } /* =====max-width: 799px===== */

  @media (min-width: 394px) and (max-width: 799px) {
    /* =====compare section===== */
    .subs-compare {
      border-top-left-radius: clamp(32px, 8vw, 40px);
      border-top-right-radius: clamp(32px, 8vw, 40px);
      overflow: hidden;
    }
  
    /* =====compare table wrapper===== */
    .subs-compare-table-wrapper {
      margin: 13px clamp(22px, 5.6vw, 24px) 0;
      border-radius: clamp(12px, 3vw, 14px);
    }

    /* =====compare table===== */
    .subs-compare-table {
      font-size: clamp(1.2rem, 3vw, 1.4rem);
      border-radius: clamp(12px, 3vw, 14px);
    }

    .subs-compare-th-label,
    .subs-compare-td-label {
      min-width: 155px;
      width: clamp(155px, 40vw, 272px);
    }

    .subs-compare-th-free,
    .subs-compare-th-premium
    {
      min-width: 98px;
    }

    /* =====compare table border radius===== */
    .subs-compare-table th:first-child {
      border-top-left-radius: clamp(12px, 3vw, 14px);
    }
  
    .subs-compare-table th:last-child {
      border-top-right-radius: clamp(12px, 3vw, 14px);
    }
  
    .subs-compare-table tr:last-child td:first-child {
      border-bottom-left-radius: clamp(12px, 3vw, 14px);
    }
    
    .subs-compare-table tr:last-child td:last-child {
      border-bottom-right-radius: clamp(12px, 3vw, 14px);
    }

    /* =====compare table head===== */
    .subs-compare-table th {
      padding: clamp(24px, 6.1vw, 28px) 0;
    }

    .subs-compare-head-premium {
      height: clamp(70px, 15vw, 88px);
      padding: 24px 0;
      font-size: clamp(1.4rem, 3.5vw, 1.6rem);
      line-height: 1.4;
      border-top-right-radius: clamp(12px, 3vw, 14px);
      border-top-left-radius: clamp(12px, 3vw, 14px);
    }

    /* =====compare table feature detail===== */
    .subs-compare-feature-detail li {
      padding-left: clamp(1.2rem, 3vw, 1.4rem);
    }
  
    .subs-compare-note {
      font-size: clamp(1.0rem, 2.5vw, 1.2rem);
    }

    /* =====compare deco===== */
    .subs-compare-deco-img {
      width: 32px;
      width: clamp(32px, 8.14vw, 40px);
    }

    .subs-compare-deco-zip,
    .subs-compare-deco-music,
    .subs-compare-deco-pdf,
    .subs-compare-deco-pages{
      width: 24px;
      width: clamp(24px, 6.10vw, 32px);
    }

    /* =====compare deco left===== */
    .subs-compare-deco-html {
      top: calc(-16px + (-8 * ((100vw - 394px) / 405)));
      left: calc(45px + (25 * ((100vw - 394px) / 405)));
    }

    .subs-compare-deco-zip {
      top: calc(263px + (-6 * ((100vw - 394px) / 405)));
      left: calc(-8px + (-5 * ((100vw - 394px) / 405)));
    }
    
    .subs-compare-deco-music {
      top: calc(642px + (-19 * ((100vw - 394px) / 405)));
      left: calc(3px + (-5 * ((100vw - 394px) / 405)));
    }

    .subs-compare-deco-doc {
      top: calc(859px + (-36 * ((100vw - 394px) / 405)));
      left: calc(44px + (-2 * ((100vw - 394px) / 405)));
    }

    /* =====compare deco right===== */
    .subs-compare-deco-numbers {
      top: calc(-48px + (-50 * ((100vw - 394px) / 405)));
      right: calc(35px + (50 * ((100vw - 394px) / 405)));
    }

    .subs-compare-deco-pdf {
      top: calc(186px + (-9 * ((100vw - 394px) / 405)));
      right: calc(-7px + (-7 * ((100vw - 394px) / 405)));
    }

    .subs-compare-deco-pages {
      top: calc(537px + (-10 * ((100vw - 394px) / 405)));
      right: calc(1px + (-6 * ((100vw - 394px) / 405)));
    }

    .subs-compare-deco-keynote {
      top: calc(824px + (-34 * ((100vw - 394px) / 405)));
      right: calc(42px + (16 * ((100vw - 394px) / 405)));
    }
  } /* =====min-width: 394px and max-width: 799px===== */

  @media (max-width: 569px) {
    .subs-compare-head-premium {
      top: clamp(-17px, calc(-9px + (-8 * ((100vw - 394px) / 176))), -9px);
      height: 85px;
    } 
    
    .subs-only-br-compare-head {
      display: block;
    }
  } /* max-width: 570px */
  
  @media (max-width: 519px) {
    .subs-compare-head-premium {
      top: -11px;
      height: 80px;
    }
  } /* max-width: 519px */

  @media (max-width: 449px) {
    .subs-compare-head-premium {
      top: -9px;
      height: 75px;
    }
  } /* max-width: 449px */

  @media (max-width: 429px) {
    .subs-compare-head-premium {
      top: -12px;
      height: 75px;
    }
  } /* max-width: 449px */

  
  @media (max-width: 409px) {
    .subs-compare-head-premium {
      top: -11px;
      height: 70px;
    }
  } /* max-width: 409px */

  @media (max-width: 393px) {
    /* =====compare section===== */
    .subs-compare {
      border-top-left-radius: 32px;
      border-top-right-radius: 32px;
      overflow: hidden;
    }
  
    /* =====compare table wrapper===== */
    .subs-compare-table-wrapper {
      margin: 13px clamp(16px, 5.6vw, 22px) 0;
      border-radius: 12px;
    }
  
    /* =====compare table===== */
    .subs-compare-table {
      font-size: 1.2rem;
      border-radius: 12px;
    }

    .subs-compare-th-label, 
    .subs-compare-td-label {
      max-width: 155px;
    }

    .subs-compare-th-free,
    .subs-compare-th-premium {
      max-width: 98px; 
    }

    /* =====compare table border radius===== */
    .subs-compare-table th:first-child {
      border-top-left-radius: 12px;
    }
  
    .subs-compare-table th:last-child {
      border-top-right-radius: 12px;
    }
  
    .subs-compare-table tr:last-child td:first-child {
      border-bottom-left-radius: 12px;
    }
    
    .subs-compare-table tr:last-child td:last-child {
      border-bottom-right-radius: 12px;
    }

    /* =====compare table head===== */
    .subs-compare-table th {
      padding: 24px 0;
    }
  
    .subs-compare-head-premium {
      top: -9px;
      height: 70px;
      padding: 24px 0;
      font-size: 1.4rem;
      line-height: 1.4;
      border-top-right-radius: 12px;
      border-top-left-radius: 12px;
    }
  
    /* =====compare table feature detail===== */
    .subs-compare-feature-detail li {
      padding-left: 1.2rem;
    }
  
    .subs-compare-note {
      font-size: 1.0rem;
    }
  
    /* =====compare deco===== */
    .subs-compare-deco-img {
      width: 32px;
    }

    .subs-compare-deco-zip,
    .subs-compare-deco-music,
    .subs-compare-deco-pdf,
    .subs-compare-deco-pages{
      width: 24px;
    }

    /* =====compare deco left===== */
    .subs-compare-deco-html {
      top: -16px;
      left: 45px;
    }

    .subs-compare-deco-zip {
      top: 269px;
      left: -8px;
    }
    
    .subs-compare-deco-music {
      top: 642px;
      left: 3px;
    }

    .subs-compare-deco-doc {
      top: 859px;
      left: 44px;
    }

    /* =====compare deco right===== */
    .subs-compare-deco-numbers {
      top: -48;
      right: 35px;
    }

    .subs-compare-deco-pdf {
      top: 186px;
      right: -7px;
    }

    .subs-compare-deco-pages {
      top: 537px;
      right: 1px
    }

    .subs-compare-deco-keynote {
      top: 824px;
      right: 42px
    }
  } /* =====max-width: 393px===== */
    
  /* =========================
     trial:無料体験
     ========================= */
  .subs-trial {
    position: relative;
    display: flex;
    justify-content: center;
    padding-bottom: 80px;
    background: var(--color-white);
    scroll-margin-top: 120px; /* PCナビゲーション用のスクロール位置調整 */
  }

  /* =====trial wrapper===== */
  .subs-trial-wrapper {
    position: relative;
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 1080px;
    padding: 48px 58px;
    border-radius: 48px;
    background: linear-gradient(120deg, #7a8df9 16.5%, #54a5ff 74.5%, #50c1ea 100%);
  }

  .subs-trial-wrapper::before {
    content: "";
    position: absolute;
    z-index: 4;
    inset: 0;
    border-radius: 48px;
    background: url('../images/subs-noiz.png') repeat;
    background-size: 32%;
    mix-blend-mode: color-dodge;
    opacity: 0.8;
  }

  /* =====trial title===== */
  .subs-trial-title {
    position: relative;
    z-index: 5;
    font-size: 4rem;
    font-weight: 700;
    line-height: 1;
    color: var(--color-white);
  }

  .subs-only-br-trial-title {
    display: none;
  }

  /* =====trial plan wrapper===== */
  .subs-trial-plan-wrapper {
    position: relative;
    z-index: 5;
    display: flex;
    margin-top: 32px;
    gap: 32px;
  }

  /* =====trial card===== */
  .subs-trial-card {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 300px;
    min-height: 262px;
    border-radius: 24px;
    background: var(--color-white);
  }
  
  .subs-trial-card-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 40px 32px 0;
  }

  /* =====trial card head===== */
  .subs-trial-card-head {
    text-align: center;
    font-weight: 700;
    line-height: 1;
  }

  .subs-trial-card-title {
    font-size: 2.8rem;
  }
  
  .subs-trial-card-price {
    margin-top: 12px;
    font-size: 4rem;
  }

  /* =====trial card label===== */
  .subs-trial-card-label {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 220px;
    height: 96px;
    margin-top: 24px;
    padding: 24px 0;
    line-height: 1;
    color: var(--color-white);
    border-radius: 12px;
  }

  .subs-trial-card-label-1month {
    background: #62C5DD;
  }

  .subs-trial-card-label-3month {
    background: #5DB0EC;
  }

  .subs-trial-card-label-12month {
    background: var(--color-main);
  }

  .subs-trial-card-label-lead {
    font-size: 1.6rem;
    font-weight: 500;
  }

  .subs-trial-card-label-main {
    margin-top: 8px;
    font-size: 2.4rem;
    font-weight: 700;
  }

  /* =====trial card figure===== */
  .subs-trial-card-figure,
  .subs-trial-badge-img {
    position: absolute;
    z-index: 6;
  }

  .subs-trial-card-figure-yellow {
    left: -21px;
    bottom: -74px;
    height: 90px;
  }

  .subs-trial-card-figure-navy {
    left: 8px;
    bottom: -74px;
    height: 88px;
  }

  .subs-trial-card-figure-green {
    right: -40px;
    bottom: -72px;
    height: 90px;
  }

  /* =====trial badge===== */
  .subs-trial-badge-img {
    top: -26px;
    right: -26px;
    width: 68px;
  }

  /* =====trial note===== */
  .subs-trial-note {
    position: relative;
    z-index: 5;
    margin-top: 64px;
    font-size: 1.6rem;
    color: var(--color-white);
  }

  .subs-trial-deco {
    position: absolute;
    z-index: 2;
  }

  .subs-trial-deco-left {
    left: 0;
  }

  .subs-trial-deco-right {
    right: 0;
  }

  .subs-trial-deco-img {
    position: absolute;
    width: 40px;
  }
  
  .subs-trial-deco-image {
    /* top: 14.1vw; */
    top: 204px;
    left: 5.6vw;
    /* left: 84px; */
    transform: rotate(-20deg);
  }

  .subs-trial-deco-xls {
    /* top: 35.6vw; */
    top: 512px;
    left: 3.9vw;
    /* left: 56px; */
    transform: rotate(22deg);
  }

  .subs-trial-deco-video {
    /* top: 7.1vw; */
    top: 102px;
    right: 6.1vw;
    /* right: 88px; */
    transform: rotate(20deg);
  }

  .subs-trial-deco-doc {
    /* top: 27.5vw; */
    top: 395px;
    right: 2.5vw;
    /* right: 35px; */
    transform: rotate(-22deg);
  }

  /* =====responsive trial===== */
  @media (min-width: 800px) and (max-width: 1439px) {
    .subs-trial {
      padding-bottom: clamp(64px, 7vw, 80px);
    }

    .subs-trial-wrapper {
      max-width: clamp(670px, 75vw, 1080px);
      padding: clamp(32px, 3vw, 48px) 0;
      border-radius: clamp(24px, 3vw, 48px);
    }

    .subs-trial-wrapper::before {
      border-radius: clamp(24px, 3vw, 48px);
    }

    /* =====trial title===== */
    .subs-trial-title {
      font-size: clamp(3.6rem, 2.8vw, 4.0rem);
    }

    /* =====trial plan wrapper===== */
    .subs-trial-plan-wrapper {
      margin-top: clamp(24px, 2.2vw, 32px);
      gap: clamp(16px, 2.2vw, 32px);
    }

    /* =====trial card===== */
    .subs-trial-card {
      width: clamp(180px, 20vw, 300px);
      min-height: clamp(180px, 19vw, 262px);
      border-radius: clamp(12px, 1.7vw, 24px);
    }

    .subs-trial-card-inner {
      padding: clamp(20px, 2.8vw, 40px) clamp(12px, 2.2vw, 32px) 0;
    }

      /* =====trial card head===== */
    .subs-trial-card-title {
      font-size: clamp(1.8vw, 1.9vw, 2.8rem);
    }

    .subs-trial-card-price {
      font-size: clamp(2.2rem, 2.8vw, 4rem);
      margin-top: clamp(8px, 1.1vw, 12px);
    }

      /* =====trial card label===== */
    .subs-trial-card-label {
      justify-content: center;
      width: clamp(130px, 15vw, 220px);
      height: clamp(64px, 7vw, 96px);
      margin-top: clamp(12px, 2vw, 24px);
      padding: clamp(12px, 2vw, 24px) 0;
      border-radius: clamp(6px, 1.2vw, 12px);
    }

    .subs-trial-card-label-lead {
      font-size: clamp(1.1rem, 1.3vw, 1.6rem);
    }

    .subs-trial-card-label-main {
      font-size: clamp(1.2rem, 2vw, 2.4rem);
    }

    /* =====trial card figure===== */
    .subs-trial-card-figure-yellow {
      left: clamp(-20px, -1.5vw, -1px);
      bottom: clamp(-70px, -5vw, -38px);
      height: clamp(40px, 6vw, 90px);
    }

    .subs-trial-card-figure-navy {
      left: clamp(12px, 0.7vw, 8px);
      bottom: clamp(-72px, -5vw, -34px);
      height: clamp(38px, 6vw, 88px);
    }

    .subs-trial-card-figure-green {
      right: clamp(-39px, -2.8vw, -19px);
      bottom: clamp(-70px, -5vw, -40px);
      height: clamp(40px, 6vw, 90px);
    }

    .subs-trial-badge-img {
      width: clamp(24px, 4.7vw, 68px);
    }

    /* =====trial note===== */
    .subs-trial-note {
      margin-top: clamp(32px, 4vw, 64px);
      font-size: clamp(1.1rem, 1.3vw, 1.6rem);
    }

    .subs-trial-deco-img {
      width: clamp(24px, 2.8vw, 40px);
    }

    .subs-trial-deco-image {
      top: clamp(60px, 14vw, 204px);
      left: clamp(12px, 5vw, 84px);
    }

    .subs-trial-deco-xls {
      top: clamp(150px, 35vw, 512px);
      left: clamp(8px, 3.9vw, 56px);
    }

    .subs-trial-deco-video {
      top: clamp(30px, 7vw, 102px);
      right: clamp(16px, 6.1vw, 88px);
    }

    .subs-trial-deco-doc {
      top: clamp(100px, 27vw, 395px);
      right: clamp(8px, 2.5vw, 35px);
    }
  } /* =====min-width: 800px and max-width: 1439px===== */

  /* =====trial card===== */
  @media (max-width: 929px) {
    .subs-trial-card {
      min-height: clamp(170px, 19.6vw, 262px);
    }
  } /* =====max-width: 929px===== */

  @media (max-width: 849px) {
    .subs-trial-card {
      min-height: clamp(160px, 19.6vw, 262px);
      /* min-height: clamp(160px, 20.6vw, 262px); */
    }
  } /* =====max-width: 849px===== */    

  /* =====trial card badge===== */
  @media (max-width: 1399px) {
    .subs-trial-badge-img {
      top: clamp(-70px, -1.8vw, -26px);
      right: clamp(-35px, -1.8vw, -26px);
    }
  } /* =====max-width: 1399px===== */

  @media (max-width: 969px) {
    .subs-trial-badge-img {
      top: clamp(-25px, -2.8vw, -15px);
      /* top: -26px; */
      right: clamp(-22px, -1.8vw, -20px);
      /* right: -26px; */
    }
  } /* =====max-width: 969px===== */

  @media (min-width: 394px) and (max-width: 799px) {
    .subs-trial {
      padding-bottom: 0;
    }
  
    /* =====trial wrapper===== */
    .subs-trial-wrapper {
      padding: clamp(58px, 14.7vw, 80px) 0 clamp(64px, 16.2vw, 96px);
      border-radius: 0;
      border-top-right-radius: clamp(32px, 8vw, 40px);
      border-top-left-radius: clamp(32px, 8vw, 40px);
    }
  
    .subs-trial-wrapper::before {
      border-radius: 0;
      border-top-right-radius: clamp(32px, 8vw, 40px);
      border-top-left-radius: clamp(32px, 8vw, 40px);
    }
  
    /* =====trial title===== */
    .subs-trial-title {
      font-size: clamp(3.2rem, 8vw, 4rem);
      line-height: 1.4;
      text-align: center;
    }
  
    .subs-only-br-trial-title {
      display: block;
    }
  
    /* =====trial plan wrapper===== */
    .subs-trial-plan-wrapper {
      flex-direction: column;
      gap: clamp(48px, 12.21vw, 64px);
      margin-top: clamp(32px, 8.14vw, 48px);
    }
  
    /* =====trial card===== */
    .subs-trial-card {
      width: clamp(281px,71.5vw, 400px);
      height: clamp(180px, 45.8vw, 280px);
      border-radius: calc(12px + (12 * ((100vw - 394px) / 405)));
    }
    
    .subs-trial-card-inner {
      padding: clamp(24px, 6.1vw, 32px) clamp(28px, 7.12vw, 36px) 0;
    }
    
    /* =====trial card head===== */
    .subs-trial-card-head {
      display: flex;
      align-items: baseline;
    }
  
    .subs-trial-card-title {
      font-size: clamp(2.2rem, 5.59vw, 3.0rem);
    }
    
    .subs-trial-card-price {
      font-size: clamp(2.4rem, 6.1vw, 3.4rem);
      margin-left: clamp(4px, 1.02vw, 8px);
    }
    
    /* =====trial card label===== */
    .subs-trial-card-label {
      justify-content: center;
      width: clamp(208px, 52.96vw, 280px);
      height: clamp(80px, 20.35vw, 120px);
      margin-top: clamp(16px, 4.07vw, 28px);
      padding: clamp(16px, 4.07rem, 24px) 0;
      border-radius: clamp(8px, 2.03vw, 12px);
    }
    
    .subs-trial-card-label-lead {
      font-size: clamp(1.6rem, 4.07vw, 2.4rem);
    }
    .subs-trial-card-label-main {
      margin-top: clamp(8px, 2.03vw, 16px);
      font-size: clamp(2.4rem, 6.1vw, 3.2rem);
    }
  
    .subs-trial-card-3month {
      z-index: 7;
    }
  
    .subs-trial-card-12month {
      z-index: 8;
    }
    
    .subs-trial-card-figure-yellow {
      right: calc(-22px + (-9 * ((100vw - 394px) / 405)));
      bottom: calc(-74px + (-33 * ((100vw - 394px) / 405)));
      left: unset;
      transform: scaleX(-1);
      height: clamp(90px, 22.9vw, 130px);
    }
  
    .subs-trial-card-figure-navy {
      z-index: 7;
      left: calc(-8px + (-2 * ((100vw - 394px) / 405)));
      bottom: calc(-74px + (-33 * ((100vw - 394px) / 405)));
      height: clamp(88px, 22.39vw, 128px);
    }
  
    .subs-trial-card-figure-green {
      right: calc(-40px + (-18 * ((100vw - 394px) / 405)));
      bottom: calc(-72px + (-32 * ((100vw - 394px) / 405)));
      height: clamp(90px, 22.9vw, 130px);
    }
  
    /* =====trial badge===== */
    .subs-trial-badge-img {
      top: clamp(-20px, -2vw, -26px);
      right: clamp(-20px, -2vw, -26px);
      width: clamp(60px, 15.26vw, 72px);
    }
  
      /* =====trial note===== */
    .subs-trial-note {
      margin: clamp(56px, 14.24vw, 64px) clamp(56px, 14.24vw, 64px) 0;
      font-size: clamp(1.4rem, 3.25vw, 1.6rem);
      text-align: center;
    }
  
    .subs-only-br-trial-note {
      display: none;
    }

    .subs-trial-deco-img {
      display: none;
    }
  } /* =====min-width: 394px and max-width: 799px===== */

  /* =====trial card figure===== */
  @media (min-width: 420px) and (max-width: 749px) {
    .subs-trial-card-figure-yellow {
      right: calc(-23px + (-8 * ((100vw - 394px) / 405)));
      bottom: calc(-79px + (-29 * ((100vw - 394px) / 405)));
    }
  } /* =====min-width: 420px and max-width: 749px===== */

  @media (min-width: 450px) and (max-width: 729px) {
    .subs-trial-card-figure-yellow {
      right: calc(-24px + (-5 * ((100vw - 394px) / 405)));
      bottom: calc(-87px + (-22 * ((100vw - 394px) / 405)));
    }

    .subs-trial-card-figure-navy {
      bottom: calc(-80px + (-27 * ((100vw - 394px) / 405)));
    }

    .subs-trial-card-figure-green {
      right: calc(-46px + (-11 * ((100vw - 394px) / 405)));
      bottom: calc(-82px + (-23 * ((100vw - 394px) / 405)));
    }
  } /* =====min-width: 450px and max-width: 729px===== */

  @media (min-width: 520px) and (max-width: 679px) {
    .subs-trial-card-figure-yellow {
      right: calc(-27px + (-3 * ((100vw - 394px) / 405)));
      bottom: calc(-100px + (-10 * ((100vw - 394px) / 405)));
    }

    .subs-trial-card-figure-navy {
      bottom: calc(-97px + (-13 * ((100vw - 394px) / 405)));
    }

    .subs-trial-card-figure-green {
      right: calc(-54px + (-3 * ((100vw - 394px) / 405)));
      bottom: calc(-98px + (-7 * ((100vw - 394px) / 405)));
    }
  } /* =====min-width: 520px and max-width: 679px===== */

  @media (max-width: 799px) {
    .subs-trial {
      scroll-margin-top: 0; /* SPでは位置調整なし */
    }
  }

  @media (max-width: 393px) {
    .subs-trial {
      padding-bottom: 0;
      overflow: hidden;
    }

    /* =====trial wrapper===== */
    .subs-trial-wrapper {
      padding: clamp(50px, 14.8vw, 58px) 0 clamp(56px, 16.3vw, 64px);
      border-radius: 0;
      border-top-right-radius: 32px;
      border-top-left-radius: 32px;
    }

    .subs-trial-wrapper::before {
      border-radius: 0;
      border-top-right-radius: 32px;
      border-top-left-radius: 32px;
    }

    /* =====trial title===== */
    .subs-trial-title {
      font-size: clamp(2.4rem, 9vw, 3.2rem);
      line-height: 1.4;
      text-align: center;
    }

    .subs-only-br-trial-title {
      display: block;
    }

    /* =====trial plan wrapper===== */
    .subs-trial-plan-wrapper {
      flex-direction: column;
      gap: clamp(32px, 12.2vw, 48px);
      margin-top: clamp(24px, 8.1vw, 32px);
    }

    /* =====trial card===== */
    .subs-trial-card {
      max-width: 281px;
      max-height: 168px;
      min-height: clamp(180px, 45vw, 262px);
      border-radius: 12px;
    }
    
    .subs-trial-card-inner {
      padding: 24px 28px 0;
    }
    
    /* =====trial card head===== */
    .subs-trial-card-head {
      display: flex;
      align-items: baseline;
    }

    .subs-trial-card-title {
      font-size: clamp(2.0rem, 5.59vw, 2.2rem);
    }
    
    .subs-trial-card-price {
      font-size: clamp(2.0rem, 6.1vw, 2.4rem);
      margin-left: 4px;
    }
    
    /* =====trial card label===== */
    .subs-trial-card-label {
      justify-content: center;
      max-width: 208px;
      max-height: 80px;
      margin-top: 16px;
      padding: 16px 0;
      border-radius: 8px;
    }
    
    .subs-trial-card-label-lead {
      font-size: clamp(1.4rem, 4vw, 1.6rem);
    }
    .subs-trial-card-label-main {
      font-size: clamp(2.2rem, 6vw, 2.4rem);
    }

    .subs-trial-card-3month {
      z-index: 7;
    }

    .subs-trial-card-12month {
      z-index: 8;
    }
    
    .subs-trial-card-figure-yellow {
      right: -22px;
      left: unset;
      transform: scaleX(-1);
    }

    .subs-trial-card-figure-navy {
      z-index: 7;
      left: -8px;
    }

    .subs-trial-card-figure-green {
      right: -40px;
    }

    /* =====trial badge===== */
    .subs-trial-badge-img {
      top: -20px;
      right: clamp(-20px, -5.0vw, -8px);
      width: clamp(48px, 15.2vw, 60px);
    }

      /* =====trial note===== */
    .subs-trial-note {
      margin: clamp(48px, 14.2vw, 56px) clamp(32px, 12.2vw, 48px) 0;
      font-size: clamp(1.2rem, 3.56vw, 1.4rem);
      text-align: center;
    }

    .subs-trial-deco-img {
      display: none;
    }
  } /* =====max-width: 393px===== */

/* =========================
   faq：よくあるご質問
   ========================= */
  .subs-faq {
    background: var(--color-white);
  }
  
  .subs-faq-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 80px 0;
    background: var(--color-light-gray);
    border-top-left-radius: 120px;
    border-top-right-radius: 120px;
  }

  .subs-faq-wrapper .subs-section-title {
    margin-top: 0;
  }

  .subs-faq-list {
    display: flex;
    flex-direction: column;
    gap: 32px;
    list-style: none;
  }

  .subs-faq-item {
    padding: 40px 48px;
    background: var(--color-white);
    border-radius: 32px;
  }

  .subs-faq-question {
    display: flex;
    align-items: flex-start;
  }

  .subs-faq-question-icon {
    width: 25px;
    margin-top: 5px;
    margin-right: 10px;
  }
  
  .subs-faq-question-text {
    font-size: 2.4rem;
    font-weight: 700;
    line-height: 1.4;
    color: var(--color-main);
  }

  .subs-faq-answer {
    margin-top: 24px;
    font-size: 1.6rem;
    color: var(--color-black);
  }

  /* =====responsive faq===== */
  @media (min-width: 800px) and (max-width: 1439px) {
    .subs-faq-wrapper {
      padding: clamp(64px, 7vw, 80px) 0;
      border-top-left-radius: clamp(40px, 8vw, 120px);
      border-top-right-radius: clamp(40px, 8vw, 120px);
    }

    .subs-faq-list {
      margin: 0 clamp(64px, 8vw, 80px);
    }
    
    .subs-faq-item {
      border-radius: clamp(16px, 3vw, 32px);
    }

    .subs-faq-question-icon {
      width: clamp(20px, 3.4vw, 25px);
    }

    .subs-faq-question-text {
      font-size: clamp(2.0rem, 3.33vw, 2.4rem);
    }

    .subs-faq-answer {
      margin-top: clamp(16px, 2vw, 24px);
    }
  } /* =====min-width: 800px and max-width: 1439px===== */


  @media (max-width: 799px) {
    .subs-faq-wrapper {
      padding: 64px 0;
      border-top-left-radius: 0;
      border-top-right-radius: 0;
    }

    .subs-faq-list {
      margin: 12px calc(20px + (36 * ((100vw - 394px) / 405))) 0;
      gap: clamp(24px, 5vw, 32px);
    }

    .subs-faq-item {
      padding: clamp(32px, 8.14vw, 40px) clamp(24px, 6.1vw, 48px);
      border-radius: clamp(12px, 3vw, 24px);
    }

    .subs-faq-question-text {
      font-size: clamp(2.0rem, 3.33vw, 2.4rem);
    }
    .subs-faq-answer {
      margin-top: 16px;
      padding-left: clamp(32px, 8.14vw, 36px);
      padding-left: 36px;
      font-size: clamp(1.4rem, 3vw, 1.6rem);
    }
  } /* =====max-width: 799px===== */

  @media (max-width: 393px) {
    .subs-faq-list {
      margin: 12px 20px 0;
      gap: 24px;
    }
  
    .subs-faq-item {
      padding: 32px 24px;
      border-radius: 12px;
    }

    .subs-faq-question-icon {
      width: 22px;
      margin-top: 4px;
      margin-right: 8px;
    }
    
    .subs-faq-question-text {
      font-size: 2rem;
    }

    .subs-faq-answer {
      padding-left: 32px;
      font-size: 1.4rem;
    }
  } /* =====max-width: 393px===== */

/* =========================
   footer
   ========================= */
  .subs-footer {
    display: flex;
    justify-content: space-between;
    padding: 80px;
    background: var(--color-white);
  }

  .subs-footer-logo-img {
    width: 250px;
  }

  .subs-footer-wrapper {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 24px;
  }

  .subs-footer-nav {
    display: flex;
    gap: 24px;
  }

  .subs-footer-nav-link {
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1.0;
    color: var(--color-main);
    text-decoration: none;
    transition: opacity 0.2s;
  }

  .subs-footer-nav-link:hover,
  .subs-footer-nav-link:focus {
    opacity: 0.7;
  }
  
  .subs-footer-copyright {
    font-size: 1.2rem;
    color: var(--color-dark-gray);
  }

  /* =====responsive footer===== */
  @media (max-width: 1439px) {
    .subs-footer {
      padding: clamp(64px, 5.5vw, 80px) clamp(48px, 5.5vw, 80px);
    }
  
    .subs-footer-logo-img {
      width: clamp(180px, 17.3vw, 250px);
    }
  } /* =====max-width: 1439px===== */

  @media (max-width: 799px) {
    .subs-footer {
      flex-direction: column;
      gap: 40px;
    }

    .subs-footer-logo-img {
      width: 180px;
    }

    .subs-footer-wrapper {
      align-items: unset;
      gap: 32px;
    }

    .subs-footer-nav {
      display: flex;
      flex-direction: column;
      gap: 24px;
    }

    .subs-footer-copyright {
      text-align: end;
    }
  } /* =====max-width: 799px===== */

  @media (min-width: 394px) and (max-width: 799px) {
    .subs-footer-nav-link {
      font-size: clamp(1.4rem, 2.5vw, 1.6rem);
    }
  } /* =====min-width: 394px and max-width: 799px===== */

    @media (min-width: 670px) and (max-width: 799px) {
    .subs-footer {
      /* padding: 64px 48px clamp(140px, 28.05vw, 160px) 48px; */
      padding: 64px 48px 64px 48px;
    }
  } /* =====min-width: 670px and max-width: 799px===== */

  @media (min-width: 500px) and (max-width: 669px) {
    .subs-footer {
      padding: 64px 48px clamp(140px, 28.05vw, 160px) 48px;
    }
  } /* =====min-width: 500px and max-width: 669px===== */


  @media (min-width: 394px) and (max-width: 499px) {
    .subs-footer {
      padding: 64px 48px clamp(112px, 28.05vw, 140px) 48px;
    }
  } /* =====min-width: 394px and max-width: 669px===== */

  @media (max-width: 393px) {
    .subs-footer {
      padding: clamp(48px, 16.28vw, 64px) clamp(32px, 12.21vw, 48px) clamp(80px, 27.49vw, 112px);
      overflow: hidden;
    }

    .subs-footer-logo-img {
      width: clamp(160px, 46vw, 180px);
    }

    .subs-footer-nav-link {
      font-size: 1.4rem;
    }
  } /* =====max-width: 393px===== */
  
/* =========================
   floating banner
   ========================= */
  .subs-floating-banner {
    position: fixed;
    z-index: 20;
    right: 40px;
    bottom: 32px;
    
    /* 初期状態: 非表示（下に隠す） */
    transform: translateY(100px);
    opacity: 0;
    visibility: hidden;
    
    /* アニメーション設定 */
    transition: transform 1.0s cubic-bezier(0.19, 1, 0.22, 1), 
                opacity 1.0s cubic-bezier(0.19, 1, 0.22, 1),
                visibility 1.0s cubic-bezier(0.19, 1, 0.22, 1),
                bottom 1.0s cubic-bezier(0.19, 1, 0.22, 1);
  }
  
  /* 表示状態のクラス */
  .subs-floating-banner.is-visible {
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
  }
  
  /* Footer表示時の位置調整 */
  .subs-floating-banner.is-footer-visible {
    bottom: 200px; /* PC時: Footer高さ + 余裕を持った距離 */
  }

  .subs-floating-banner-link {
    display: block;
    text-decoration: none;
     transition: transform 0.3s;
  }

  .subs-floating-banner-link:hover {
    transform: scale(1.05);
  }

  .subs-floating-banner-content {     
    position: relative;
    display: flex;
    width: 444px;
    border-radius: 24px;
    background: linear-gradient(90deg, #ff66b4 0%, #f966d9 52%, #f366fa 100%);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
    transition: background 0.3s;
  }

  .subs-floating-banner-content::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    border-radius: 24px;
    background: url('../images/subs-noiz.png') repeat;
    background-size: 32%;
    mix-blend-mode: screen;
    pointer-events: none;
  }

  .subs-floating-banner-text {
    position: relative;
    z-index: 3;
    padding: 20px 0 20px 24px;
    color: var(--color-white);
  }

  .subs-floating-banner-sub {
    font-size: 1.8rem;
    font-weight: 500;
    line-height: 1;
  }

  .subs-floating-banner-main {
    margin-top: 8px;
    font-size: 2.8rem;
    font-weight: 700;
    line-height: 1;
  }

  .subs-floating-figure-img {
    position: absolute;
    z-index: 2;
    right: 20px;
    bottom: 0; 
    width: 106px;
  }

  /* =====floating banner hover color change===== */
  .subs-floating-banner-link:hover .subs-floating-banner-content {
    background: linear-gradient(90deg, #ff7de4 0%, #fca45c 100%);
  }

  /* PC版向け: ホバー・クリック時の効果を明示的に設定 */
  @media (min-width: 800px) {
    .subs-floating-banner-link:hover .subs-floating-banner-content {
      background: linear-gradient(90deg, #ff7de4 0%, #fca45c 100%) !important;
    }
    
    .subs-floating-banner-link:active .subs-floating-banner-content {
      background: linear-gradient(90deg, #ff7de4 0%, #fca45c 100%) !important;
    }
  }

  /* =====responsive floating banner===== */
  @media (max-width: 1439px) {
    .subs-floating-banner.is-footer-visible {
      bottom: clamp(160px, 13.8vw, 200px);
    }

    .subs-floating-banner-content {
      width: clamp(364px, 30.83vw, 444px);
      border-radius: clamp(16px, 1.6vw, 24px);
    }
    
    .subs-floating-banner-content::before {
      border-radius: clamp(16px, 1.6vw, 24px);
    }
    
    .subs-floating-banner-text {
      padding: clamp(12px, 3.05vw, 16px) 0 clamp(12px, 3.05vw, 16px) clamp(16px, 4.07vw, 20px);

      padding: clamp(16px, 1.38vw, 20px) 0 clamp(16px, 1.38vw, 20px) clamp(20px, 1.66vw, 24px);
    }

    .subs-floating-banner-sub {
      font-size: clamp(1.5rem,  1.25vw, 1.8rem);
    }

    .subs-floating-banner-main {
      margin-top: clamp(6px, 1.1vw, 8px);
      font-size: clamp(2.3rem, 1.94vw, 2.8rem);
    }

    .subs-floating-figure-img {
      right: 20px;
      width: clamp(67px, 7.36vw, 106px);

      right: clamp(16px, 4.07vw, 20px);
      width: clamp(85px, 7.36vw, 106px); 
    }
  } /* =====max-width: 1439px===== */

  @media (max-width: 799px) {
    /* SPのフッター回避設定を一時的に無効化 */
    /*
    .subs-floating-banner.is-footer-visible {
      bottom: clamp(376px, 95.6vw, 380px);
    }
    */

    .subs-floating-banner {
      right: clamp(20px, 5.1vw, 40px);
      bottom: clamp(18px, 4.58vw, 32px);
    }
    
    /* SP向け: ホバー時はピンク維持、クリック時のみオレンジ */
    .subs-floating-banner-link:hover .subs-floating-banner-content {
      background: linear-gradient(90deg, #ff66b4 0%, #f966d9 52%, #f366fa 100%);
    }
    
    .subs-floating-banner-link:active .subs-floating-banner-content {
      background: linear-gradient(90deg, #ff7de4 0%, #fca45c 100%);
    }

    .subs-floating-banner-content {
      width: clamp(286px, 61vw, 364px);
      border-radius: clamp(8px, 3vw, 16px);
      box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
    }
    
    .subs-floating-banner-content::before {
      border-radius: clamp(8px, 3vw, 16px);
    }
    
    .subs-floating-banner-text {
      padding: clamp(12px, 3.05vw, 16px) 0 clamp(12px, 3.05vw, 16px) clamp(16px, 4.07vw, 20px);
    }

    .subs-floating-banner-sub {
      font-size: clamp(1.2rem, 3.05vw, 1.5rem);
    }

    .subs-floating-banner-main {
      margin-top: clamp(4px, 1.1vw, 6px);
      font-size: clamp(1.8rem, 4.6vw, 2.3rem);
    }

    .subs-floating-figure-img {
      right: clamp(16px, 4.07vw, 20px);
      width: clamp(67px, 17.04vw, 85px); 
    }
  } /* =====max-width: 799px===== */

  @media (min-width: 670px) and (max-width: 799px) {
    .subs-floating-banner.is-footer-visible {
      bottom: 112px;
    }
  } /* =====min-width: 670px and max-width: 799px===== */

  @media (max-width: 393px) {
    .subs-floating-banner {
      right: clamp(16px, 5.09vw, 20px);
      bottom: clamp(14px, 4.6vw, 18px);
    }
    
    /* SP向け: ホバー時はピンク維持、クリック時のみオレンジ */
    .subs-floating-banner-link:hover .subs-floating-banner-content {
      background: linear-gradient(90deg, #ff66b4 0%, #f966d9 52%, #f366fa 100%);
    }
    
    .subs-floating-banner-link:active .subs-floating-banner-content {
      background: linear-gradient(90deg, #ff7de4 0%, #fca45c 100%);
    }

    .subs-floating-banner-content {
      width: clamp(230px, 72.7vw, 286px);
      border-radius: clamp(6px, 2.06vw, 8px);
      box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
    }

    .subs-floating-banner-content::before {
      border-radius: clamp(6px, 2.0vw, 8px);
    }

    .subs-floating-banner-text {
      padding: 12px 0 12px 16px;
    }

    .subs-floating-banner-sub {
      font-size: clamp(1.0rem, 3.05vw, 1.2rem);
    }

    .subs-floating-banner-main {
      margin-top: clamp(3px, 1.1vw, 4px);
      font-size: clamp(1.4rem, 4.6vw, 1.8rem);
    }

    .subs-floating-figure-img {
      right: 16px;
      width: clamp(54px, 17vw, 67px);
    }
  } /* =====max-width: 393px===== */

  /* =====SP向けホバー効果調整===== */
  @media (max-width: 799px) {
    .subs-firstview-cta-btn:hover {
      transform: translateX(-50%) scale(1.03); /* 中央配置 + 小さめの拡大 */
      background: linear-gradient(90deg, #ff66b4 0%, #f966d9 52%, #f366fa 100%); /* 元のピンクグラデーションを維持 */
      box-shadow: 0 4px 16px rgba(255, 144, 232, 0.2);
      opacity: 0.95;
    }

    .subs-firstview-cta-btn:active {
      transform: translateX(-50%) scale(1.01); /* 中央配置 + さらに小さい拡大 */
      background: linear-gradient(90deg, #ff7de4 0%, #fca45c 100%); /* クリック時はオレンジグラデーション */
      box-shadow: 0 4px 16px rgba(255, 144, 232, 0.2);
      opacity: 0.95;
    }
  } /* =====max-width: 799px===== */

  @media (min-width: 394px) and (max-width: 799px) {
    .subs-firstview-cta-btn:hover {
      transform: translateX(-50%) scale(1.03);
      background: linear-gradient(90deg, #ff66b4 0%, #f966d9 52%, #f366fa 100%); /* 元のピンクグラデーションを維持 */
      box-shadow: 0 4px 16px rgba(255, 144, 232, 0.2);
      opacity: 0.95;
    }

    .subs-firstview-cta-btn:active {
      transform: translateX(-50%) scale(1.01);
      background: linear-gradient(90deg, #ff7de4 0%, #fca45c 100%); /* クリック時はオレンジグラデーション */
      box-shadow: 0 4px 16px rgba(255, 144, 232, 0.2);
      opacity: 0.95;
    }
  } /* =====min-width: 394px and max-width: 799px===== */

  /* SP向け: ホバー時はピンク維持、クリック時のみオレンジ + 拡大効果 */
  .subs-floating-banner-link:hover {
    transform: scale(1.05);
  }
  
  .subs-floating-banner-link:hover .subs-floating-banner-content {
    background: linear-gradient(90deg, #ff66b4 0%, #f966d9 52%, #f366fa 100%);
  }
  
  /* クリック時のオレンジ色効果を長く見せるためのクラス */
  .subs-floating-banner-content.clicked {
    background: linear-gradient(90deg, #ff7de4 0%, #fca45c 100%) !important;
    transition: background 0.3s cubic-bezier(0.19, 1, 0.22, 1);
  }
  
  /* SP向け: クリック後に強制的に元のサイズに戻すクラス */
  .subs-floating-banner-link.reset-scale {
    transform: scale(1) !important;
    transition: transform 0.3s cubic-bezier(0.19, 1, 0.22, 1);
  }

  /* SP向け: Firstviewボタンのクリック時オレンジ色効果 */
  .subs-firstview-cta-btn.clicked {
    background: linear-gradient(90deg, #ff7de4 0%, #fca45c 100%) !important;
    transition: background 0.3s cubic-bezier(0.19, 1, 0.22, 1);
  }