@charset "UTF-8";

/**
 * Main CSS Entry Point - Lenet Business LP
 *
 * 1. Design Tokens (CSS Variables)
 * 2. Component Imports
 * 3. Tailwind Base/Components/Utilities
 * 4. Layout & Utility Styles
 */

/* ========================================
   1. Design Tokens & Component Imports
   All @import must be at the top
   ======================================== */

/**
 * Design Tokens - Lenet Business LP
 *
 * PDF抽出デザインに基づくCSS変数定義
 * ページテーマで --color-primary 等を上書きすることで
 * 業界別にカラースキームを変更可能
 */

:root {
  /* ========================================
     Colors - Base
     ======================================== */
  --color-white: #FFFFFF;
  --color-black: #000000;

  /* Text Colors */
  --color-text-primary: #303235;
  --color-text-secondary: #6D7785;
  --color-text-muted: #4B5563;
  --color-text-on-accent: #FFFFFF;

  /* ========================================
     Colors - Brand
     ======================================== */
  --color-primary: #169EDD;
  --color-primary-deep: #202935;
  --color-primary-tint-1: #E7F0F7;
  --color-primary-tint-2: #E0F3F6;

  /* Lenet本体カラー（コーポレート寄り） */
  --color-primary-corp: #01478F;
  --color-secondary-corp: #006DC9;

  /* ========================================
     Colors - Neutral (Background & Surface)
     ======================================== */
  --color-neutral-bg: #FFFFFF;
  --color-neutral-bg-subtle: #F3F3F6;
  --color-neutral-bg-subtle-2: #ECEDF0;
  --color-neutral-surface: #F4F8FA;
  --color-neutral-border: #D9E1E7;
  --color-neutral-border-2: #BCCFDC;
  --color-neutral-line-muted: #D5D7DA;

  /* Neutral Scale (Tailwind互換) */
  --color-neutral-50: #FAFAFA;
  --color-neutral-100: #F4F4F5;
  --color-neutral-200: #E4E4E7;
  --color-neutral-300: #D4D4D8;
  --color-neutral-400: #A1A1AA;
  --color-neutral-500: #71717A;
  --color-neutral-600: #52525B;
  --color-neutral-700: #3F3F46;
  --color-neutral-800: #27272A;
  --color-neutral-900: #18181B;

  /* ========================================
     Colors - Accent
     ======================================== */
  --color-accent-pink: #F04E79;
  --color-accent-red: #DC2626;
  --color-accent-orange: #E54623;

  /* ========================================
     Colors - Functional
     ======================================== */
  --color-separator: #B8B8B8;
  --color-separator-alt: #C9C9C9;
  --color-link: #0044CC;
  --color-scrollbar-thumb: #D9D9D9;
  --color-pagetop-bg: #e20001;
  --color-nav-toggle: #28325A;
  --color-form-border-alt: #5e5e5e;
  --color-highlight-gray: #C0C0C0;

  /* Tailwind gray互換（既存コードで使用） */
  --color-neutral-gray-200: #E5E7EB;
  --color-neutral-gray-100: #F3F4F6;
  --color-neutral-gray-bg: #ECEEF1;

  /* ========================================
     Typography - Font Family
     ======================================== */
  --font-family-ja: "Noto Sans JP", "Hiragino Sans", "HiraKakuProN", "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", sans-serif;
  --font-family-latin: "Plus Jakarta Sans", "Helvetica Neue", system-ui, sans-serif;
  --font-family-sans: var(--font-family-ja);

  /* ========================================
     Typography - Font Weight
     ======================================== */
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;

  /* ========================================
     Typography - Font Size (px→rem)
     PDF pt基準を等倍でpx→rem変換
     ======================================== */
  --font-size-xs: 0.65rem;      /* 10.4px */
  --font-size-sm: 0.6938rem;    /* 11.1px */
  --font-size-base: 0.7563rem;  /* 12.1px → 実装では 0.9375rem (15px) を使用 */
  --font-size-md: 0.8813rem;    /* 14.1px */
  --font-size-lg: 0.9438rem;    /* 15.1px */
  --font-size-xl: 1.0375rem;    /* 16.6px */
  --font-size-2xl: 1.1375rem;   /* 18.2px */
  --font-size-3xl: 1.2625rem;   /* 20.2px */
  --font-size-4xl: 1.3875rem;   /* 22.2px */
  --font-size-5xl: 1.6375rem;   /* 26.2px */
  --font-size-6xl: 1.7625rem;   /* 28.2px */
  --font-size-display: 2.0188rem;  /* 32.3px */
  --font-size-display-2: 2.2688rem; /* 36.3px */
  --font-size-jumbo: 5.0375rem; /* 80.6px */

  /* 実用サイズ（既存サイトに合わせた調整版） */
  --text-xs: 0.8125rem;    /* 13px */
  --text-sm: 0.875rem;     /* 14px */
  --text-base: 0.9375rem;  /* 15px - body */
  --text-md: 1rem;         /* 16px */
  --text-lg: 1.125rem;     /* 18px */
  --text-xl: 1.25rem;      /* 20px */
  --text-2xl: 1.4375rem;   /* 23px */
  --text-3xl: 1.5rem;      /* 24px */
  --text-4xl: 2.25rem;     /* 36px - section title */
  --text-5xl: 3rem;        /* 48px */

  /* ========================================
     Typography - Responsive Font Size (Lenet本体準拠)
     clamp(min, preferred, max) でビューポートに応じて変化
     ======================================== */
  --font-size-responsive-sm: 14px;
  --font-size-responsive-md: clamp(14px, 0.875rem + ((1vw - 3.75px) * 0.231), 16px);
  --font-size-responsive-lg: clamp(22px, 1.375rem + ((1vw - 3.75px) * 1.156), 32px);
  --font-size-responsive-xl: clamp(36px, 2.25rem + ((1vw - 3.75px) * 3.237), 64px);
  --font-size-responsive-2xl: clamp(60px, 3.75rem + ((1vw - 3.75px) * 6.936), 120px);

  /* ========================================
     Spacing
     ======================================== */
  --space-1: 0.25rem;   /* 4px */
  --space-2: 0.5rem;    /* 8px */
  --space-3: 0.75rem;   /* 12px */
  --space-4: 1rem;      /* 16px */
  --space-5: 1.25rem;   /* 20px */
  --space-6: 1.5rem;    /* 24px */
  --space-8: 2rem;      /* 32px */
  --space-10: 2.5rem;   /* 40px */
  --space-12: 3rem;     /* 48px */
  --space-16: 4rem;     /* 64px */
  --space-20: 5rem;     /* 80px */
  --space-24: 6rem;     /* 96px */

  /* Section Spacing */
  --section-padding-y: 4.375rem;  /* 70px - 既存サイトに合わせる */
  --section-padding-y-mobile: 12.82vw;

  /* ========================================
     Spacing - Responsive (Lenet本体準拠)
     clamp(min, preferred, max) でビューポートに応じて変化
     ======================================== */
  --spacing-responsive-sm: clamp(8px, calc(0.5rem + ((1vw - 3.75px) * 0.4624)), 12px);
  --spacing-responsive-md: clamp(20px, calc(1.25rem + ((1vw - 3.75px) * 2.3121)), 40px);
  --spacing-responsive-lg: clamp(40px, calc(2.5rem + ((1vw - 3.75px) * 2.3121)), 60px);
  --spacing-responsive-xl: clamp(48px, calc(3rem + ((1vw - 3.75px) * 3.6994)), 80px);
  --spacing-responsive-2xl: clamp(60px, calc(3.75rem + ((1vw - 3.75px) * 2.3121)), 80px);
  --spacing-responsive-3xl: clamp(80px, calc(5rem + ((1vw - 3.75px) * 2.3121)), 100px);

  /* ========================================
     Border Radius
     ======================================== */
  --radius-sm: 0.5rem;     /* 8px */
  --radius-md: 0.75rem;    /* 12px */
  --radius-lg: 1rem;       /* 16px */
  --radius-xl: 1.25rem;    /* 20px */
  --radius-full: 9999px;   /* pill */

  /* ========================================
     Shadow
     ======================================== */
  --shadow-card: 0 8px 24px rgba(32, 41, 53, 0.08);
  --shadow-floating: 0 12px 36px rgba(32, 41, 53, 0.12);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);

  /* ========================================
     Layout
     ======================================== */
  --container-max-width: 80rem;  /* 1280px */
  --container-padding-x: 1rem;   /* 16px */
  --container-padding-x-mobile: 5.13vw;

  /* Lenet本体準拠のコンテンツ幅 */
  --content-width: 920px;
  --content-width-wide: 1240px;

  /* ========================================
     Transition
     ======================================== */
  --transition-fast: 0.15s ease;
  --transition-base: 0.3s ease;
  --transition-slow: 0.5s ease;

  /* ========================================
     Z-index
     ======================================== */
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-fixed: 300;
  --z-modal-backdrop: 400;
  --z-modal: 500;
  --z-tooltip: 600;
}

/* ========================================
   Page Themes - ページ別カラー上書き
   ======================================== */

/*
 * テーマカラーは業界ごとに変更しない。
 * 全業界LPで共通の --color-primary (#169EDD) を使用する。
 * 業界別の --color-primary 上書きを追加しないこと。
 */

/* Page-specific */

/**
 * Biz Page Styles
 * 法人向け宅配クリーニングLP固有のスタイル
 */

/* ========================================
   Base HTML/Body Styles
   ======================================== */

html {
  overflow-y: scroll;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  font-size: 16px
}

@media (max-width:375px) {
  html {
    font-size: 4.2666666667vw
  }
}

@media screen and (max-width:768px) {
  html {
    font-size: 1.6vw
  }
}

@media (max-width:1000px) {
  html {
    font-size: 16px
  }
}

@media (min-width:768px) and (max-width:1280px) {

  html,
  :root {
    font-size: 100px;
    font-size: 1.07vw
  }

  body {
    font-size: 1rem
  }
}

@media screen and (min-width:769px),
print {
  a[href^="tel:"] {
    pointer-events: none;
    cursor: text
  }
}

@media screen and (max-width:768px) {
  a[href^="tel:"] {
    -webkit-text-decoration-skip-ink: inherit;
    text-decoration-skip-ink: inherit
  }
}

a {
  text-decoration: none;
  color: inherit;
  transition: opacity 0.3s
}

@media screen and (min-width:769px),
print {
  a:hover {
    opacity: .8
  }
}

h2,
h3,
h4,
h5 {
  line-height: 1.2;
  font-weight: 700;
}

body.biz {
  overflow-x: hidden;
  font-family: "Noto Sans JP", "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "Helvetica Neue", "Hiragino Kaku Gothic ProN", sans-serif;
  font-weight: 400;
  font-style: normal;
  line-height: 1.4;
  color: var(--color-text-primary);
  letter-spacing: .1em;
  font-feature-settings: "palt";
  font-size: 0.9375rem;
}

@media screen and (max-width:768px) {
  body.biz {
    overflow-wrap: break-word
  }
}

@media screen and (max-width:1280px) {
  body.biz {
    word-wrap: break-word;
    word-break: break-all;
    animation: fadeIn 2s ease 0 1 normal;
    -webkit-animation: fadeIn 2s ease 0 1 normal
  }
}

/* ========================================
   Layout
   ======================================== */

.l-contents {
  overflow: hidden
}

.l-container {
  width: 80rem;
  margin: 0 auto;
  overflow: initial;
  padding: 0
}

@media screen and (max-width:768px) {
  .l-container {
    width: calc(100% - 10.26vw)
  }
}

/* ========================================
   Utility Classes
   ======================================== */

@media screen and (max-width:768px) {
  .u-hidden-sp {
    display: none !important
  }
}

@media screen and (min-width:769px),
print {
  .u-hidden-pc {
    display: none !important
  }
}

/* ========================================
   Common Components
   ======================================== */

/* Caption */

.c-cap {
  color: var(--color-text-secondary);
  font-size: .8125rem;
  letter-spacing: .04em;
  line-height: 1.4;
}

@media screen and (max-width:768px) {
  .c-cap {
    font-size: 2.82vw;
    line-height: 1.5
  }
}

/* Font Family */

.ff-en {
  font-family: "Plus Jakarta Sans", sans-serif;
  font-weight: 400
}

.ff-en-bld {
  font-family: "Plus Jakarta Sans", sans-serif;
  font-weight: 800
}

/* List Dot */

.c-listDot li {
  padding-left: 1.1em;
  position: relative
}

.c-listDot li:before {
  width: 3px;
  aspect-ratio: 1;
  display: block;
  position: absolute;
  top: .7em;
  left: .4em;
  border-radius: 50%;
  background: var(--color-text-primary);
  content: ""
}

/* List Number */

.c-listNum li {
  padding-left: 1.1em;
  position: relative;
}

.c-listNum li::before {
  display: block;
  position: absolute;
  content: counter(list-item) ". ";
  left: -0.1em;
}

/* External Link */

.c-link--external {
  background: repeating-linear-gradient(to right, var(--color-text-primary), var(--color-text-primary) 2px, transparent 2px, transparent 4px) 0 100%/auto 2px repeat-x;
  padding-bottom: 0.1875rem;
}

.c-link--external:after {
  width: 1em;
  aspect-ratio: 1;
  display: inline-block;
  margin: 0 0 -0.15em 0.3em;
  background: url(../img/common/ico_link02.svg) center/contain no-repeat;
  content: "";
}

/* ========================================
   Modal
   ======================================== */

.c-modal {
  position: fixed;
  top: 0;
  height: 100vh;
  width: 100%;
  z-index: 50000;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transition: opacity 400ms ease, visibility 400ms ease
}

.c-modal.is-active {
  visibility: visible;
  opacity: 1;
  pointer-events: auto
}

.c-modal-bg {
  position: absolute;
  height: 100vh;
  width: 100%;
  background: rgba(0, 0, 0, .8);
}

.c-modal-close-icon {
  background: var(--color-white);
  border-radius: 50%;
  box-shadow: 0 .625rem .9375rem rgba(48, 50, 53, .1);
  width: 4rem;
  aspect-ratio: 1;
  position: absolute;
  top: -1.25rem;
  right: -1.25rem;
  font-size: 1.75rem;
  color: var(--color-text-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1
}

@media screen and (max-width:768px) {
  .c-modal-close-icon {
    font-size: 5.64vw;
    box-shadow: 0 2.56vw 3.85vw rgba(48, 50, 53, .1);
    z-index: 1;
    width: 12.82vw;
  }
}

.c-modal-listNum--01,
.c-modal-listNum--02,
.c-modal-listNum--03 {
  margin-top: 1.25rem
}

@media screen and (max-width:768px) {

  .c-modal-listNum--01,
  .c-modal-listNum--02,
  .c-modal-listNum--03 {
    margin-top: 5.13vw
  }
}

.c-modal-listNum--01>li,
.c-modal-listNum--02>li,
.c-modal-listNum--03>li {
  position: relative;
  font-size: 1.125rem;
  letter-spacing: .04em;
  color: var(--color-text-secondary);
  line-height: 1.5
}

@media screen and (max-width:768px) {

  .c-modal-listNum--01>li,
  .c-modal-listNum--02>li,
  .c-modal-listNum--03>li {
    font-size: 3.59vw
  }
}

.c-modal-listNum--01>li>span,
.c-modal-listNum--02>li>span,
.c-modal-listNum--03>li>span {
  position: absolute;
  left: 0
}

.c-modal-listNum--01>li {
  padding-left: 2em
}

.c-modal-listNum--01>li+li {
  margin-top: 1.25rem
}

@media screen and (max-width:768px) {
  .c-modal-listNum--01>li+li {
    margin-top: 5.13vw
  }
}

.c-modal-listNum--02>li {
  padding-left: 2.5em
}

.c-modal-listNum--02>li+li {
  margin-top: 1.25rem
}

@media screen and (max-width:768px) {
  .c-modal-listNum--02>li+li {
    margin-top: 5.13vw
  }
}

.c-modal-listNum--03>li {
  padding-left: 1.1em
}

.c-modal-cont {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: var(--color-white);
  border-radius: .625rem;
  scrollbar-width: none;
  padding: .3125rem
}

@media screen and (max-width:768px) {
  .c-modal-cont {
    width: calc(100% - 10.26vw);
    border-radius: 2.56vw
  }
}

.c-modal-cont-inner {
  padding: 1.875rem;
  max-height: 85vh;
}

@media screen and (max-width:768px) {
  .c-modal-cont-inner {
    padding: 6.41vw 3.85vw;
  }
}

.c-modal-ttl {
  color: var(--color-primary);
  font-weight: 700;
  margin: 3.125rem 0 1.875rem;
  font-size: 1.75rem
}

@media screen and (max-width:768px) {
  .c-modal-ttl {
    margin: 5.13vw 0 2.56vw;
    font-size: 4.62vw
  }
}

.c-modal-ttl:first-child {
  margin-top: 0
}

.c-modal-step-ttl {
  background: var(--color-neutral-gray-100);
  font-weight: 700;
  padding: .3125rem .625rem;
  margin: 1.875rem 0 .625rem
}

@media screen and (max-width:768px) {
  .c-modal-step-ttl {
    padding: 1.28vw 2.56vw;
    margin: 5.13vw 0 2.56vw
  }
}

.c-modal-step-txt {
  color: var(--color-text-secondary);
  font-size: 1.125rem;
  line-height: 1.5
}

@media screen and (max-width:768px) {
  .c-modal-step-txt {
    font-size: 3.59vw
  }
}

.c-modal-step .c-cap {
  margin-top: .625rem
}

@media screen and (max-width:768px) {
  .c-modal-step .c-cap {
    margin-top: 2.56vw
  }
}

.c-modal-step .c-listDot {
  margin-top: .625rem
}

@media screen and (max-width:768px) {
  .c-modal-step .c-listDot {
    margin-top: 2.56vw
  }
}

.c-modal-step .c-listDot li {
  color: var(--color-text-secondary);
  font-size: .8125rem;
  line-height: 1.5
}

@media screen and (max-width:768px) {
  .c-modal-step .c-listDot li {
    font-size: 2.82vw
  }
}

.c-modal-step .c-listDot li:before {
  top: .7em
}

/* ========================================
   Caution Section
   ======================================== */

.p-caution {
  padding: 4.375rem 0
}

@media screen and (max-width:768px) {
  .p-caution {
    padding: 12.82vw 0
  }
}

.p-caution__ttl {
  font-weight: 700;
  color: var(--color-black);
  text-align: center;
  font-size: 2.5625rem
}

@media screen and (max-width:768px) {
  .p-caution__ttl {
    font-size: 8.21vw
  }
}

.p-caution__box {
  border: 1px solid var(--color-neutral-line-muted);
  border-radius: .625rem;
  color: var(--color-text-secondary);
  letter-spacing: 0;
  width: 100%;
  margin: 1.875rem auto 1.25rem;
  box-sizing: border-box;
  padding: .3125rem
}

@media screen and (max-width:768px) {
  .p-caution__box {
    border-radius: 2.56vw;
    width: auto;
    margin: 7.69vw 0 5.13vw;
    padding: 1.28vw;
    font-size: 3.59vw
  }
}

.p-caution__box-items {
  overflow-y: scroll;
  padding: 1.25rem;
  height: 11.25rem;
  box-sizing: border-box
}

@media screen and (max-width:768px) {
  .p-caution__box-items {
    height: 28.21vw;
    padding: 3.85vw
  }
}

.p-caution__box-items::-webkit-scrollbar {
  width: .625rem
}

@media screen and (max-width:768px) {
  .p-caution__box-items::-webkit-scrollbar {
    width: 2.56vw
  }
}

.p-caution__box-items::-webkit-scrollbar-thumb {
  background: var(--color-scrollbar-thumb);
  border-radius: .625rem
}

@media screen and (max-width:768px) {
  .p-caution__box-items::-webkit-scrollbar-thumb {
    border-radius: 2.56vw
  }
}

.p-caution__box-item+.p-caution__box-item {
  margin-top: 1.875rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--color-neutral-line-muted)
}

@media screen and (max-width:768px) {
  .p-caution__box-item+.p-caution__box-item {
    margin-top: 5.13vw;
    padding-top: 5.13vw
  }
}

.p-caution__box-item p+p {
  margin-top: 1.25rem;
}

@media screen and (max-width: 768px) {
  .p-caution__box-item p+p {
    margin-top: 3.85vw;
  }
}

.p-caution__box-lead {
  color: var(--color-accent-red);
  font-size: 1.4375rem;
  font-weight: 700;
  margin: 0 0 1.25rem;
  line-height: 1.5
}

@media screen and (max-width:768px) {
  .p-caution__box-lead {
    font-size: 4.62vw;
    margin: 0 0 5.13vw
  }
}

.p-caution__box .c-listDot {
  margin-top: 1.25rem
}

@media screen and (max-width:768px) {
  .p-caution__box .c-listDot {
    margin-top: 5.13vw
  }
}

.p-caution__box .c-listDot+* {
  margin-top: 1.25rem
}

@media screen and (max-width:768px) {
  .p-caution__box .c-listDot+* {
    margin-top: 5.13vw
  }
}

.p-caution__box-ttl {
  font-weight: 700;
  margin: 1.25rem 0 .3125rem
}

@media screen and (max-width:768px) {
  .p-caution__box-ttl {
    margin: 5.13vw 0 1.28vw
  }
}

.p-caution__box-item:first-child .p-caution__box-ttl {
  margin-bottom: 0.9375rem;
}

@media screen and (max-width: 768px) {
  .p-caution__box-item:first-child .p-caution__box-ttl {
    margin-bottom: 3.85vw;
  }
}

.p-caution__box a {
  color: var(--color-link);
  text-decoration: underline
}

.p-caution__box a[target=_blank]:after {
  width: .9em;
  aspect-ratio: 1;
  margin: 0 .1875rem -.1em;
  display: inline-block;
  background: url(../img/common/ico_link01.svg) center/contain no-repeat;
  content: ""
}

.p-caution__box-catch {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--color-text-primary);
  margin-bottom: 0.3125rem;
}

@media screen and (max-width: 768px) {
  .p-caution__box-catch {
    font-size: 3.59vw;
    margin-bottom: 3.85vw;
  }
}

/* ========================================
   Page-specific Variables
   ======================================== */

.page-biz {
  --biz-primary: var(--color-primary);
  --biz-accent: var(--color-accent-pink);
  --biz-text: var(--color-text-primary);
  --biz-text-muted: var(--color-text-secondary);
}

/* ========================================
   Header Override (Original Biz Style)
   ======================================== */

.page-biz .l-header {
  position: absolute;
  background-color: transparent;
  box-shadow: none;
  width: 80rem;
  max-width: 100%;
  top: 1.5625rem;
  left: 50%;
  transform: translateX(-50%);
  height: auto;
  padding: 0;
}

@media (max-width: 768px) {
  .page-biz .l-header {
    width: 100%;
    top: 0;
    padding-top: 6.41vw;
    transform: none;
    left: 0;
  }
}

/* Navigation Typography Override */

.page-biz .p-nav__items {
  display: flex;
  gap: 0;
}

.page-biz .p-nav__item {
  margin-left: 1.5625rem;
}

@media (min-width: 769px) {
  .page-biz .p-nav__item a {
    font-size: 1rem;
    font-weight: 400;
    padding: 0;
  }
}

@media (max-width: 768px) {
  .page-biz .p-nav__item {
    margin-left: 0;
  }

  .page-biz .p-nav__item a {
    font-size: 3.59vw;
  }
}

/* Layout Components */

/**
 * Header & Navigation Component
 */

.l-header {
  width: 80rem;
  margin: 0 auto;
  position: absolute;
  top: 1.5625rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 99999;
  display: flex;
  justify-content: space-between;
  align-items: center
}

.l-header__logo {
  width: 10rem
}

.l-header__login {
  display: none
}

.p-nav__item {
  margin-left: 1.5625rem
}

.p-nav__items {
  display: flex
}

#p-nav-toggle {
  background-color: var(--color-white)
}

#p-nav-toggle.-js-opened::before {
  width: 22px;
  top: 0;
  transform: rotate(45deg)
}

@media screen and (min-width:769px),
print {
  .p-nav__item {
    font-size: 1rem
  }
}

@media screen and (max-width:768px) {
  .l-header {
    width: 100%;
    top: 0;
    padding-top: 6.41vw
  }

  .l-header__inner {
    z-index: 99999;
    margin: 0 0 0 5.13vw
  }

  .l-header__logo {
    width: 24.36vw
  }

  .l-header__login {
    display: block;
    margin-right: 20vw;
    z-index: 99999
  }

  .l-header__login a {
    font-size: 3.59vw
  }

  .p-nav {
    width: 100%;
    height: 110vh;
    position: fixed;
    top: 0;
    left: 0;
    background-color: var(--color-white);
    padding-top: 18vw;
    display: none;
    margin-right: 0
  }

  .page-biz .p-nav__items,
  .p-nav__items {
    display: block;
    margin: 0 5.13vw
  }

  .p-nav__item {
    margin-left: 0
  }

  .p-nav__item:last-child {
    display: none
  }

  .p-nav__item+.p-nav__item {
    border-top: 1px solid var(--color-neutral-line-muted)
  }

  .p-nav__item>a {
    font-size: 3.59vw;
  }

  .p-nav__item>a:not(.c-link--external) {
    display: block;
    padding: 5.13vw 0;
  }

  .p-nav__item .c-link--external {
    background: none;
    display: block;
    padding: 5.13vw 0;
  }

  #p-nav-toggle {
    position: absolute;
    right: 3.85vw;
    top: 3.85vw;
    width: 12.82vw;
    height: 12.82vw;
    border-radius: 11vw;
    box-shadow: 0 4px 10px rgba(0, 0, 0, .1);
    z-index: 99999;
    cursor: pointer
  }

  #p-nav-toggle span {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 16px;
    left: 0;
    width: 4.84vw;
    height: .44vw;
    margin: auto;
    border-radius: 1px;
    background: var(--color-nav-toggle);
    transition: all 0.25s ease-in-out
  }

  #p-nav-toggle span:nth-child(1) {
    top: 7vw
  }

  #p-nav-toggle span:nth-child(2) {
    bottom: 0
  }

  #p-nav-toggle span:nth-child(3) {
    bottom: 3vw
  }

  #p-nav-toggle.-js-opened span:nth-child(1) {
    top: 0;
    bottom: 0;
    transform: rotate(45deg)
  }

  #p-nav-toggle.-js-opened span:nth-child(2) {
    display: none
  }

  #p-nav-toggle.-js-opened span:nth-child(3) {
    top: 0;
    bottom: 0;
    transform: rotate(-45deg)
  }
}

/* Base Components */

/**
 * Section Header Component
 * タイトル + リード文の共通コンポーネント
 */

.c-section-header {
  text-align: center;
}

.c-section-header--left {
  text-align: left;
}

/* Inline layout: タイトルとリードを横並び */

.c-section-header--inline {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
}

.c-section-header--inline .c-section-header__lead {
  margin-top: 0;
}

@media screen and (max-width: 768px) {
  .c-section-header--inline {
    flex-direction: column;
    gap: 0.5rem;
  }
}

/* ===========================================
   Title Styles
   =========================================== */

.c-section-header__ttl {
  font-weight: var(--font-weight-semibold);
  font-size: 2.5rem;
  line-height: 1.3;
  letter-spacing: 0.02em;
}

@media screen and (max-width: 768px) {
  .c-section-header__ttl {
    font-size: 5.13vw;
    line-height: 1.4;
  }
}

/* Size: Medium */

.c-section-header__ttl--md {
  font-size: 2rem;
}

@media screen and (max-width: 768px) {
  .c-section-header__ttl--md {
    font-size: 4.62vw;
  }
}

/* Size: Small */

.c-section-header__ttl--sm {
  font-size: 1.5rem;
}

@media screen and (max-width: 768px) {
  .c-section-header__ttl--sm {
    font-size: 4.1vw;
  }
}

/* Title span: Primary color highlight */

.c-section-header__ttl span {
  color: var(--color-primary);
}

/* Nested span inside span: Large number emphasis */

.c-section-header__ttl span span {
  font-size: 180%;
  position: relative;
  bottom: -0.1875rem;
  line-height: 1;
}

@media screen and (max-width: 768px) {
  .c-section-header__ttl span span {
    bottom: 0;
  }
}

/* ===========================================
   Lead Styles
   =========================================== */

.c-section-header__lead {
  font-size: var(--text-xl);
  color: var(--color-text-primary);
  margin-top: 1.25rem;
  line-height: 1.6;
}

@media screen and (max-width: 768px) {
  .c-section-header__lead {
    font-size: 4.1vw;
    margin-top: 5.13vw;
  }
}

/* Left aligned lead */

.c-section-header--left .c-section-header__lead {
  text-align: left;
}

/* Components */

/**
 * CTA Component
 */

.c-cta {
  background: var(--color-white) url(../img/common/bg_cta01.webp) center top/auto 100% no-repeat;
  padding: 4.375rem 0;
  position: relative;
}

@media screen and (max-width:768px) {
  .c-cta {
    padding: 12.82vw 0;
    background: var(--color-white) url(../img/common/bg_cta01_sp.webp) left top/cover no-repeat
  }
}

@media screen and (max-width: 768px) {
  .c-cta:before {
    width: 39.23vw;
    aspect-ratio: 306/358;
    display: block;
    position: absolute;
    top: 7.69vw;
    right: 0;
    background: url(../img/common/img_cta01.png) center right/contain no-repeat;
    content: "";
  }
}

.c-cta__catch {
  text-align: center;
  font-size: 2.25rem;
  line-height: 1.4;
  font-weight: 700;
  letter-spacing: 0;
}

@media screen and (max-width: 768px) {
  .c-cta__catch {
    font-size: 5.9vw;
    text-align: left;
  }
}

.c-cta__catch span {
  color: var(--color-primary);
}

.c-cta__item {
  padding: 0.625rem 0 0;
}

.c-cta__items {
  margin-top: 1.875rem;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}

@media screen and (max-width: 768px) {
  .c-cta__items {
    margin-top: 7.69vw;
    grid-template-columns: 1fr;
    gap: 7.69vw;
  }
}

@media screen and (min-width: 769px),
print {
  .c-cta__item:nth-child(odd) {
    padding-right: 1.5625rem;
  }

  .c-cta__item:nth-child(even) {
    padding-left: 1.5625rem;
    border-left: 1px solid var(--color-separator);
  }
}

.c-cta__item-ttl {
  text-align: center;
  background: var(--color-white);
  color: var(--color-text-primary);
  border: 1px solid var(--color-text-primary);
  position: relative;
  border-radius: 0.5rem;
  font-weight: 700;
  font-size: 1.4375rem;
  padding: 0.625rem;
  letter-spacing: 0;
}

@media screen and (max-width: 768px) {
  .c-cta__item-ttl {
    border-radius: 1.54vw;
    font-size: 3.85vw;
    padding: 2.56vw;
  }
}

.c-cta__item-ttl:before {
  display: block;
  width: 0.9375rem;
  aspect-ratio: 1;
  background: var(--color-white);
  transform: rotate(45deg) skew(10deg, 10deg) translate(-50%, 0%);
  border-right: 1px solid var(--color-text-primary);
  border-bottom: 1px solid var(--color-text-primary);
  position: absolute;
  left: 50%;
  top: 100%;
  content: "";
}

@media screen and (min-width: 769px),
print {
  .c-cta__item-inner {
    display: grid;
    grid-template-columns: 17.5rem auto 17.5rem;
    justify-content: space-between;
    margin: 1.875rem 0 0;
  }
}

@media screen and (max-width: 768px) {
  .c-cta__item-inner {
    margin: 3.85vw 0 0;
  }
}

.c-cta__item-txt {
  writing-mode: vertical-rl;
  text-align: center;
  font-weight: 500;
  letter-spacing: 0.03em;
  font-size: 1.125rem;
}

@media screen and (max-width: 768px) {
  .c-cta__item-txt {
    writing-mode: horizontal-tb;
    display: flex;
    align-items: center;
    gap: 5.13vw;
    font-size: 4.62vw;
    margin: 3.85vw 5.13vw;
  }

  .c-cta__item-txt:before,
  .c-cta__item-txt:after {
    width: auto;
    height: 1px;
    flex-grow: 1;
    background: var(--color-separator);
    content: "";
  }
}

.c-cta__item-btn {
  position: relative;
}

.c-cta__item-btn a {
  color: var(--color-accent-pink);
  border: 1px solid var(--color-accent-pink);
  background: var(--color-white);
  height: 5rem;
  border-radius: 5rem;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  flex-direction: column;
  position: relative;
  font-size: 1.125rem;
  line-height: 1.4;
  font-weight: 700;
}

@media screen and (max-width: 768px) {
  .c-cta__item-btn a {
    font-size: 5.13vw;
    height: 19.23vw;
    border-radius: 19.23vw;
    letter-spacing: 0;
  }
}

.c-cta__item-btn a:after {
  width: 0.625rem;
  aspect-ratio: 1;
  border-top: 2px solid var(--color-accent-pink);
  border-right: 2px solid var(--color-accent-pink);
  position: absolute;
  top: 50%;
  right: 0.9375rem;
  transform: rotate(45deg) translate(0%, -50%);
  content: "";
}

@media screen and (max-width: 768px) {
  .c-cta__item-btn a:after {
    width: 2.56vw;
    right: 6.41vw;
  }
}

.c-cta__item-btn a[href*="#"]:after {
  right: 1.25rem;
  transform: rotate(135deg) translate(calc(-50% - 0.3125rem), 0%);
}

@media screen and (max-width: 768px) {
  .c-cta__item-btn a[href*="#"]:after {
    right: 6.41vw;
    transform: rotate(135deg) translate(calc(-50% - 1.28vw), 0%);
  }
}

.c-cta__item-btn a span {
  font-size: 0.8125rem;
  font-weight: 400;
  letter-spacing: -0.02em;
  margin-top: 0.1875rem;
}

@media screen and (max-width: 768px) {
  .c-cta__item-btn a span {
    font-size: 3.59vw;
    margin-top: 0.77vw;
  }
}

.c-cta__item-btn-label {
  background: var(--color-accent-pink);
  color: var(--color-white);
  border-radius: 0.5rem;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -55%);
  font-size: 0.9375rem;
  font-weight: 700;
  letter-spacing: 0;
  text-align: center;
  padding: 0 0.3125rem 0.125rem;
  display: block;
  z-index: 1;
  width: 100%;
}

@media screen and (max-width: 768px) {
  .c-cta__item-btn-label {
    border-radius: 1.28vw;
    font-size: 3.59vw;
    padding: 0.51vw 1.28vw 0;
    width: 80%;
  }
}

.c-cta__item-tel {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

@media screen and (max-width: 768px) {
  .c-cta__item-tel {
    text-align: center;
  }
}

.c-cta__item-tel a {
  color: var(--color-accent-pink);
  font-size: 2.0625rem;
  letter-spacing: -0.015em;
}

@media screen and (max-width: 768px) {
  .c-cta__item-tel a {
    font-size: 9.23vw;
    letter-spacing: 0;
  }
}

.c-cta__item-tel a:before {
  background: url(../img/common/ico_phone03.svg) center/contain no-repeat;
  width: 1.6875rem;
  aspect-ratio: 1;
  margin-bottom: -0.125rem;
  display: inline-block;
  margin-right: 0.3125rem;
  content: "";
}

@media screen and (max-width: 768px) {
  .c-cta__item-tel a:before {
    width: 7.69vw;
  }
}

.c-cta__item-tel-time {
  color: var(--color-text-secondary);
  font-size: 0.8125rem;
  letter-spacing: 0.06em;
  margin-top: 0.3125rem;
}

@media screen and (max-width: 768px) {
  .c-cta__item-tel-time {
    font-size: 3.08vw;
  }
  .c-cta__item--02 .c-cta__item-inner {
    margin: 8.97vw 0 0;
  }
}

/**
 * Hero V2 Component - 汎用ヒーローセクション
 * Figma node-id: 5239:8096
 *
 * 構成:
 * - 左カラム: パンくず + メインキャッチ + サービスライン + リード文
 * - 右カラム: メイン画像 + サブ画像（重なりレイアウト）
 * - 背景: 全幅グラデーション/画像
 *
 * デザイントークン:
 * - --color-primary: アクセント色（青 #169EDD）
 * - --color-text-primary: 本文色（#303235）
 * - --color-text-secondary: パンくず色（#6D7785）
 */

/* ========================================
   メインキャッチ（旧 main-catch コンポーネントから移植）
   ======================================== */

.c-main-catch {
  display: flex;
  flex-direction: column;
  gap: clamp(2px, calc(0.125rem + ((1vw - 3.75px) * 0.46)), 5px);
  font-family: "Noto Sans JP", sans-serif;
}

.c-main-catch__line1 {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: flex-start;
  gap: 0.02em;
  font-weight: 900;
  color: var(--color-text-primary);
  margin: 0;
  line-height: 1.15;
}

.c-main-catch__break {
  flex-basis: 100%;
  height: 0;
}

.c-main-catch__lg {
  font-size: clamp(27px, calc(1.6875rem + ((1vw - 3.75px) * 3.85)), 58px);
  letter-spacing: 0.08em;
}

.c-main-catch__sm {
  font-size: clamp(19px, calc(1.1875rem + ((1vw - 3.75px) * 2.62)), 36px);
  letter-spacing: 0.04em;
}

.c-main-catch__md {
  font-size: clamp(21px, calc(1.3125rem + ((1vw - 3.75px) * 3.24)), 42px);
  letter-spacing: 0.06em;
}

.c-main-catch__line2 {
  display: flex;
  align-items: baseline;
  justify-content: flex-start;
  font-weight: 900;
  margin: 0;
  margin-top: -0.05em;
  line-height: 1.15;
  white-space: nowrap;
}

.c-main-catch__blue-lg {
  font-size: clamp(31px, calc(1.9375rem + ((1vw - 3.75px) * 4.47)), 60px);
  color: var(--color-primary);
  letter-spacing: 0.03em;
}

.c-main-catch__black-sm {
  font-size: clamp(21px, calc(1.3125rem + ((1vw - 3.75px) * 3.24)), 42px);
  color: var(--color-text-primary);
  letter-spacing: 0;
}

.c-main-catch__zero {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  font-size: clamp(31px, calc(1.9375rem + ((1vw - 3.75px) * 4.47)), 60px);
  color: var(--color-primary);
  letter-spacing: 0;
}

.c-main-catch__zero-dots {
  position: absolute;
  top: -0.02em;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  width: 100%;
  justify-content: space-around;
}

.c-main-catch__dot {
  display: block;
  width: 0.15em;
  height: 0.15em;
  background-color: var(--color-primary);
  border-radius: 50%;
}

/* ========================================
   セクション全体
   ======================================== */

.c-hero-v2{
  position: relative;
  overflow: hidden;
  background: url(../img/school/bg_hero_v2.jpg) center top / cover no-repeat;
}

@media (max-width: 768px) {
  .c-hero-v2 {
    min-height: auto;
    background-position: center;
  }
}

/* ========================================
   内部コンテナ
   ======================================== */

.c-hero-v2__inner{
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 2rem;
  padding: 8rem 0 2rem;
}

@media (max-width: 768px) {
  .c-hero-v2__inner{
    flex-direction: column;
    gap: var(--space-8);
    padding: 23.08vw 0 2vw;
  }
}

/* ========================================
   左カラム: テキストコンテンツ
   ======================================== */

.c-hero-v2__content{
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  max-width: 45rem;
  padding-top: 1.5rem;
  padding-bottom: 0;
  z-index: 1;
}

@media (max-width: 768px) {
  .c-hero-v2__content{
    width: 100%;
    padding-top: 0;
    padding-bottom: 0;
    gap: 1rem;
  }
}

/* ========================================
   パンくずリスト
   ======================================== */

.c-hero-v2__breadcrumb{
  display: flex;
  align-items: center;
  gap: 0;
}

.c-hero-v2__breadcrumb-list{
  display: flex;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: 0;
}

.c-hero-v2__breadcrumb-item{
  display: flex;
  align-items: center;
}

.c-hero-v2__breadcrumb-item:not(:first-child)::before {
  content: "";
  display: inline-block;
  width: 0.75rem;
  height: 0.75rem;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%236D7785' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 18 15 12 9 6'%3E%3C/polyline%3E%3C/svg%3E") center / contain no-repeat;
  flex-shrink: 0;
}

.c-hero-v2__breadcrumb-link,
.c-hero-v2__breadcrumb-text {
  font-family: var(--font-family-ja);
  font-size: 0.75rem;
  font-weight: var(--font-weight-regular);
  line-height: 1rem;
  color: var(--color-text-secondary);
  text-decoration: none;
}

.c-hero-v2__breadcrumb-link:hover {
  text-decoration: underline;
}

/* ========================================
   サービスライン
   ======================================== */

.c-hero-v2__service-line{
  display: inline-flex;
  align-items: center;
  gap: 0.875rem;
  padding: 0.25rem 0;
  width: -moz-fit-content;
  width: fit-content;
}

.c-hero-v2__service-prefix {
  font-family: "Noto Sans", "Noto Sans JP", sans-serif;
  font-size: 1.8rem;
  font-weight: 800;
  letter-spacing: 0.03em;
  color: var(--color-primary);
  line-height: 1;
  white-space: nowrap;
}

.c-hero-v2__service-brand{
  display: inline-flex;
  align-items: center;
  font-family: "Noto Sans", "Noto Sans JP", sans-serif;
  font-size: 1.8rem;
  font-weight: 800;
  letter-spacing: 0.03em;
  color: var(--color-text-primary);
  line-height: 1;
  white-space: nowrap;
}

/* 括弧装飾 */

.c-hero-v2__service-bracket{
  position: relative;
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  width: 0.72rem;
  height: 1.25rem;
}

.c-hero-v2__service-bracket--left {
  margin-right: 0.15em;
  margin-top: -0.3rem;
}

.c-hero-v2__service-bracket--left::before {
  content: "";
  position: absolute;
  inset: 0px;
  border-top: 2px solid var(--color-text-primary);
  border-left: 2px solid var(--color-text-primary);
}

.c-hero-v2__service-bracket--right {
  margin-left: 0.1em;
  margin-bottom: -0.6rem;
}

.c-hero-v2__service-bracket--right::before {
  content: "";
  position: absolute;
  inset: 0px;
  border-bottom: 2px solid var(--color-text-primary);
  border-right: 2px solid var(--color-text-primary);
}

@media (max-width: 768px) {
  .c-hero-v2__service-line {
    gap: 0.5rem;
  }

  .c-hero-v2__service-prefix {
    font-size: 1rem;
  }

  .c-hero-v2__service-brand {
    font-size: 1rem;
  }

  .c-hero-v2__service-bracket {
    width: 0.3rem;
    height: 0.6rem;
  }
}

/* ========================================
   リードブロック（hero直下の独立セクション）
   ======================================== */

.c-hero-v2-lead{
  position: relative;
  background-color: transparent;
  padding: 0 0 3rem;
}

.c-hero-v2-lead__inner{
  display: flex;
  flex-direction: column;
  align-items: start;
  text-align: left;
  gap: 0.5rem;
  max-width: 42rem;
  margin: 0;
}

.c-hero-v2-lead__title {
  font-family: "Noto Sans", "Noto Sans JP", sans-serif;
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.4;
  color: var(--color-primary);
  margin: 0;
}

.c-hero-v2-lead__text {
  font-family: "Noto Sans", "Noto Sans JP", sans-serif;
  font-size: 1rem;
  font-weight: var(--font-weight-medium);
  line-height: 1.8;
  letter-spacing: 0.03em;
  color: var(--color-text-primary);
  margin: 0;
}

@media (max-width: 768px) {
  .c-hero-v2-lead {
    padding: 2rem 0;
  }

  .c-hero-v2-lead__inner {
    gap: 0.5rem;
  }

  .c-hero-v2-lead__title {
    font-size: 1.125rem;
  }

  .c-hero-v2-lead__text {
    font-size: 0.875rem;
    line-height: 1.7;
  }
}

/* ========================================
   右カラム: 画像エリア
   高さ基準でスケール: hero左カラムの高さに追従し、
   画像サイズ自体が拡縮する（隙間は一定比率を維持）

   Figma基準（総高さ465px中）:
   - メイン画像: h=252px → 54.2%
   - 隙間: 16px → 3.4%
   - サブ画像: h=197px → 42.4%
   - サブ画像左オフセット: 123/475 → 25.9%
   ======================================== */

.c-hero-v2__images{
  position: relative;
  flex: 0 1 50%;
  align-self: stretch;
}

@media (max-width: 768px) {
  .c-hero-v2__images{
    width: 100%;
    flex: none;
    aspect-ratio: 16 / 11;
    margin-left: 0;
  }
}

/* メイン画像: 高さ54.2%基準、幅はアスペクト比で自動決定 */

.c-hero-v2__img-main{
  position: absolute;
  overflow: hidden;
  top: 0;
  left: -3rem;
  /* 左に48pxずらす */
  height: 90%;
  aspect-ratio: 403 / 252;
  width: auto;
  border-radius: var(--radius-xl);
}

@media (max-width: 768px) {
  .c-hero-v2__img-main{
    position: relative;
    height: auto;
    width: 75%;
  }
}

.c-hero-v2__img-main picture{
  display: block;
  height: 100%;
  width: 100%;
}

.c-hero-v2__img-main img{
  height: 100%;
  width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

/* サブ画像: 高さ42.4%基準、右下配置、メイン画像と20px重なり */

.c-hero-v2__img-sub{
  position: absolute;
  overflow: hidden;
  right: 0;
  bottom: -110px;
  height: 70%;
  aspect-ratio: 350 / 197;
  width: auto;
  border-radius: var(--radius-xl);
  z-index: 1;
}

@media (max-width: 768px) {
  .c-hero-v2__img-sub{
    position: absolute;
    height: auto;
    width: 65%;
    bottom: -20px;
  }
}

.c-hero-v2__img-sub picture{
  display: block;
  height: 100%;
  width: 100%;
}

/* mainOnTop variant: メイン画像をサブ画像の上に表示 */

.c-hero-v2__images--main-on-top .c-hero-v2__img-main {
  z-index: 2;
}

.c-hero-v2__images--main-on-top .c-hero-v2__img-sub {
  z-index: 0;
}

/* Compact variant: main画像を80%サイズに縮小 + サブ画像の縦横比をmainに揃える */

.c-hero-v2__images--compact .c-hero-v2__img-main {
  height: 72%;
}

.c-hero-v2__images--compact .c-hero-v2__img-sub {
  aspect-ratio: 403 / 252;
}

@media (max-width: 768px) {
  .c-hero-v2__images--compact .c-hero-v2__img-main {
    width: 60%;
  }
}

.c-hero-v2__img-sub img{
  height: 100%;
  width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

/**
 * Worry Section
 */

.p-worry {
  position: relative;
  padding: 3.125rem 0 6.875rem;
  background: rgba(48, 50, 53, .5)
}

@media screen and (max-width:768px) {
  .p-worry {
    padding: 12.82vw 0 53.85vw
  }
}

.p-worry:before {
  width: 100%;
  height: 100%;
  display: block;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  background: url(../img/common/bg_worry01.webp) center top /auto 100% no-repeat;
  content: "";
  z-index: -1
}

@media screen and (max-width:768px) {
  .p-worry:before {
    background: url(../img/common/bg_worry01_sp.webp) center bottom /100% auto no-repeat;
  }
}

.p-worry__catch {
  color: var(--color-white);
  text-align: center;
  font-size: 2.375rem;
  font-weight: 700;
  position: relative
}

@media screen and (max-width:768px) {
  .p-worry__catch {
    font-size: 5.64vw
  }
}

.p-worry__catch:after {
  width: 3.75rem;
  aspect-ratio: 60/66;
  display: block;
  position: absolute;
  top: 0.25rem;
  right: 17.5rem;
  background: url(../img/common/ico_worry01.webp) center/contain no-repeat;
  content: ""
}

@media screen and (max-width:768px) {
  .p-worry__catch:after {
    width: 11.79vw;
    top: -5.13vw;
    right: 5.13vw;
  }
}

.p-worry__catch span {
  background: var(--color-text-primary);
  display: inline-block;
  padding: 0rem .625rem
}

@media screen and (max-width:768px) {
  .p-worry__catch span {
    padding: 1.28vw 1.79vw
  }
}

.p-worry__catch span:nth-child(n+2) {
  margin-top: .625rem
}

@media screen and (max-width:768px) {
  .p-worry__catch span:nth-child(n+2) {
    margin-top: 2.56vw
  }
}

.p-worry__checklist {
  background: var(--color-neutral-gray-200);
  border-radius: .625rem;
  padding: 1.875rem;
  margin: 3.125rem 50% 0 0;
  position: relative;
  z-index: 1;
}

@media screen and (max-width:768px) {
  .p-worry__checklist {
    border-radius: 2.56vw;
    padding: 5.13vw;
    margin: 7.69vw 0 0
  }
}

.p-worry__checklist li {
  position: relative;
  padding-left: 2.5rem;
  font-size: 1.4375rem;
  letter-spacing: 0;
  line-height: 1.3;
  font-feature-settings: "plat"
}

@media screen and (max-width:768px) {
  .p-worry__checklist li {
    padding-left: 7.69vw;
    font-size: 3.59vw
  }
}

.p-worry__checklist li:before {
  width: 1.75rem;
  aspect-ratio: 1;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  background: var(--color-white) url(../img/common/ico_check01.svg) center/75% auto no-repeat;
  content: ""
}

@media screen and (max-width:768px) {
  .p-worry__checklist li:before {
    width: 5.13vw
  }
}

.p-worry__checklist li+li {
  margin-top: 1.5625rem
}

@media screen and (max-width:768px) {
  .p-worry__checklist li+li {
    margin-top: 5.13vw
  }
}

.p-worry__checklist li span {
  font-weight: 700;
  background: linear-gradient(transparent 70%, var(--color-highlight-gray) 70%)
}

.p-worry__bubble {
  width: 6.5625rem;
  aspect-ratio: 105/72;
  display: block;
  position: absolute;
  left: calc(50% - 1.875rem);
  bottom: 15rem;
  background: radial-gradient(circle, var(--color-neutral-gray-200) 0 52%, transparent 52%) left top/52% auto no-repeat;
}

@media screen and (max-width: 768px) {
  .p-worry__bubble {
    width: 15.38vw;
    bottom: auto;
    top: 102.56vw;
    left: 25.64vw;
    transform: rotate(45deg);
  }
}

.p-worry__bubble:before,
.p-worry__bubble:after {
  background: var(--color-neutral-gray-200);
  aspect-ratio: 1;
  border-radius: 50%;
  display: block;
  position: absolute;
  content: "";
}

.p-worry__bubble:before {
  width: 22%;
  left: 55%;
  bottom: 0;
}

.p-worry__bubble:after {
  width: 11.5%;
  right: 0;
  bottom: 0;
}

/**
 * Solution Section
 */

.p-solution {
  background: var(--color-white) url(../img/common/bg_solution01.webp) center top/auto 100% no-repeat;
  padding: 6.25rem 0 8.75rem;
  margin: -3.75rem 0 0;
  clip-path: polygon(0 0, calc(50vw - 6.25rem) 0, 50% 3.75rem, calc(50vw + 6.25rem) 0, 100% 0, 100% 100%, 0 100%)
}

@media screen and (max-width:768px) {
  .p-solution {
    background: var(--color-white) url(../img/common/bg_solution01_sp.webp) center 25.64vw/100% auto no-repeat;
    padding: 23.08vw 0 20.51vw;
    margin: -17.95vw 0 0;
    clip-path: polygon(50% 17.95vw, 100% 0, 100% 100%, 0 100%, 0 0)
  }
}

.p-solution__catch {
  text-align: center
}

.p-solution__catch-label {
  background: var(--color-text-primary);
  color: var(--color-white);
  display: inline-block;
  font-size: 2rem;
  padding: 0 1.25rem;
  border-radius: 3.125rem;
  margin: 0 0 .625rem;
  line-height: 1.6
}

@media screen and (max-width:768px) {
  .p-solution__catch-label {
    font-size: 4.62vw;
    padding: 1.28vw 5.13vw;
    margin: 0 0 1.28vw
  }
}

.p-solution__catch-ttl {
  font-size: 1.9375rem
}

@media screen and (max-width:768px) {
  .p-solution__catch-ttl {
    font-size: 5.13vw;
    line-height: 1.6
  }
}

.p-solution__catch-ttl span {
  font-weight: 800;
  color: var(--color-primary)
}

.p-solution__catch-ttl .is-dot {
  font-size: 158%;
  background: top right/1em .3em repeat-x;
  background-image: url(../img/common/ico_dot01.svg);
  padding-top: 1.4125rem
}

@media screen and (max-width:768px) {
  .p-solution__catch-ttl .is-dot {
    background-size: 1em 1.61vw;
    padding-top: 1.79vw;
  }
}

.p-solution__box {
  background: var(--color-primary-tint-1);
  border-radius: .625rem;
  padding: 2.8125rem;
  margin: 3.125rem 50% 0 0
}

@media screen and (max-width:768px) {
  .p-solution__box {
    border-radius: 2.56vw;
    padding: 7.69vw 5.13vw;
    margin: 51.28vw 0 0
  }
}

.p-solution__box-txt {
  font-size: 1.25rem;
}

@media screen and (max-width: 768px) {
  .p-solution__box-txt {
    font-size: 3.59vw;
  }
}

.p-solution__box-img {
  margin: 1.875rem 0 0;
  aspect-ratio: 872 / 618;
}

@media screen and (max-width: 768px) {
  .p-solution__box-img {
    margin: 5.13vw 0 0;
    aspect-ratio: 652 / 600;
  }
}

/* ========================================
   Simple Type - リード文と画像のみ
   ======================================== */

.p-solution__catch-lead {
  font-size: 1.25rem;
  margin: 1.25rem 0 0;
  color: var(--color-text-muted);
  line-height: 1.8;
}

@media screen and (max-width: 768px) {
  .p-solution__catch-lead {
    font-size: 3.59vw;
    margin: 3.85vw 0 0;
  }
}

/* Simple タイプ: 画像ボックスのマージン調整 */

.p-solution--simple .p-solution__box {
  margin: 2.5rem auto 0;
  max-width: 46.875rem;
}

@media screen and (max-width: 768px) {
  .p-solution--simple .p-solution__box {
    margin: 5.13vw 0 0;
  }
}

/* Simple タイプ: 画像のみ表示時はマージン不要 */

.p-solution--simple .p-solution__box-img {
  margin: 0;
}

/* Simple タイプ: リード文を左寄せ */

.p-solution--simple .p-solution__catch-lead {
  text-align: left;
}

/**
 * Reason Section
 */

.p-reason {
  background: var(--color-white) url(../img/common/bg_reason01.webp) center top/ cover no-repeat;
  padding: 4.375rem 0 6.875rem;
  margin: -3.75rem 0 0;
  clip-path: polygon(0 0, calc(50vw - 6.25rem) 0, 50% 3.75rem, calc(50vw + 6.25rem) 0, 100% 0, 100% 100%, 0 100%)
}

@media screen and (max-width:768px) {
  .p-reason {
    background-image: url(../img/common/bg_reason01_sp.webp);
    background-size: cover;
    padding: 12.82vw 0;
    margin: -7.69vw 0 0;
    clip-path: polygon(0 0, 41.03vw 0, 50% 7.69vw, 58.97vw 0, 100% 0, 100% 100%, 0 100%)
  }
}

.p-reason__ttl {
  font-size: 2.375rem;
  font-weight: 800;
  text-align: center
}

@media screen and (max-width:768px) {
  .p-reason__ttl {
    font-size: 5.13vw;
    line-height: 1.1
  }
}

.p-reason__ttl span {
  color: var(--color-primary)
}

.p-reason__lead {
  font-size: 1.25rem;
  margin: 1.25rem 0 0;
  text-align: center;
}

@media screen and (max-width: 768px) {
  .p-reason__lead {
    font-size: 4.1vw;
    margin: 5.13vw 0 0;
  }
}

.p-reason__ttl span span {
  font-size: 180%;
  position: relative;
  bottom: -.1875rem;
  line-height: 1;
}

.p-reason__items {
  counter-reset: listnum;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 3.75rem;
  margin: 3.75rem 0 0;
}

@media screen and (max-width: 768px) {
  .p-reason__items {
    margin: 5.13vw 0 0;
    grid-template-columns: 1fr;
    gap: 7.69vw;
  }
}

@media screen and (min-width: 769px),
print {
  .p-reason__item {
    background: var(--color-white);
    padding: 0 2.5rem 2.5rem;
    box-shadow: 0 0.625rem 0.9375rem rgba(48, 50, 53, 0.1);
    border-radius: 0 0 0.625rem 0.625rem;
  }
}

.p-reason__item-img {
  grid-area: img;
  margin: 0 -2.5rem;
  aspect-ratio: 940 / 642;
}

@media screen and (max-width: 768px) {
  .p-reason__item-img {
    width: 100vw;
    margin: 0 -5.13vw;
  }
}

.p-reason__item-ttlbox {
  position: relative;
  z-index: 0;
  margin: 1.875rem 0 0;
  grid-area: txt;
}

@media screen and (max-width: 768px) {
  .p-reason__item-ttlbox {
    margin: 0;
    padding: 12.82vw 0 0;
  }
}

.p-reason__item-ttlbox:before {
  counter-increment: listnum;
  content: counter(listnum, decimal-leading-zero);
  color: var(--color-primary);
  letter-spacing: 0;
  font-size: 5rem;
  line-height: 1;
  position: absolute;
  bottom: 100%;
  left: 0;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-weight: 500;
  text-shadow: 0 0 2px var(--color-white), 0 0 2px var(--color-white), 0 0 2px var(--color-white), 0 0 2px var(--color-white), 0 0 2px var(--color-white), 0 0 2px var(--color-white), 0 0 2px var(--color-white), 0 0 2px var(--color-white), 0 0 2px var(--color-white), 0 0 2px var(--color-white), 0 0 2px var(--color-white);
  display: block;
  padding: 0 0 0.625rem;
}

@media screen and (max-width: 768px) {
  .p-reason__item-ttlbox:before {
    font-size: 20.51vw;
    bottom: auto;
    top: 0;
    transform: translate(0%, -50%);
    padding: 0;
  }
}

.p-reason__item-catch {
  font-size: 2.5rem;
  font-weight: 700;
  line-height: 1.4;
}

@media screen and (max-width: 768px) {
  .p-reason__item-catch {
    font-size: 6.67vw;
  }
}

.p-reason__item-catch span {
  color: var(--color-primary);
}

.p-reason__item-txt {
  color: var(--color-text-muted);
  margin: 1.25rem 0 0;
}

@media screen and (min-width: 769px),
print {
  .p-reason__item-txt {
    font-size: 1.25rem;
  }
  .p-reason__item:first-child,
  .p-reason__item--04 {
    grid-column: 1/3;
    display: grid;
    grid-template-columns: 37.5rem auto;
    grid-template-areas: "txt img";
    gap: 3.75rem;
  }

  .p-reason__item:first-child .p-reason__item-ttlbox:before,
  .p-reason__item--04 .p-reason__item-ttlbox:before {
    position: static;
    transform: none;
  }

  .p-reason__item--01 .p-reason__item-img,
  .p-reason__item--04 .p-reason__item-img {
    margin: -1.625rem -2.5rem 0 0;
  }

  .p-reason__item--02 .p-reason__item-img,
  .p-reason__item--03 .p-reason__item-img {
    margin-top: -1.5625rem;
  }
}

.p-reason__terms {
  background: var(--color-primary-tint-1);
  border-radius: 0.625rem;
  padding: 2.5rem 0;
  grid-column: 1/3;
}

@media screen and (max-width: 768px) {
  .p-reason__terms {
    background: var(--color-white);
    border-radius: 2.56vw;
    padding: 5.13vw 5.13vw 7.69vw;
    margin: 5.13vw 0 0;
  }
}

.p-reason__terms-ttl {
  font-weight: 700;
  font-size: 2.25rem;
  letter-spacing: 0.04em;
}

@media screen and (max-width: 768px) {
  .p-reason__terms-ttl {
    font-size: 5.64vw;
  }
}

.p-reason__terms-ttl span {
  color: var(--color-primary);
}

.p-reason__terms-subttl {
  background: var(--color-white);
  font-weight: 700;
  padding: 0.3125rem 0.9375rem;
}

@media screen and (min-width: 769px),
print {
  .p-reason__terms-subttl {
    font-size: 1.25rem;
  }
}

@media screen and (max-width: 768px) {
  .p-reason__terms-subttl {
    background: var(--color-neutral-gray-100);
    padding: 1.79vw 3.85vw;
  }
  .p-reason__terms-txt {
    margin: 2.56vw 0 0;
  }
}

.p-reason__terms-txt--01 {
  grid-column: 1/3;
}

@media screen and (min-width: 769px),
print {
  .p-reason__terms-txt--01 {
    font-size: 1.25rem;
    margin: 1.25rem 0 0;
  }
  .p-reason__terms-txt--02 {
    font-size: 1.125rem;
    margin: 0.625rem 0 0;
  }
}

.p-reason__terms-items {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}

@media screen and (max-width: 768px) {
  .p-reason__terms-items {
    grid-template-columns: 1fr;
    gap: 7.69vw;
  }
}

@media screen and (min-width: 769px),
print {
  .p-reason__terms-item {
    padding: 0 2.5rem;
  }
  .p-reason__terms-item:nth-child(even) {
    border-left: 1px solid var(--color-separator-alt);
  }
}

.p-reason__terms-item--01 {
  display: grid;
  grid-template-columns: auto 11.25rem;
  align-items: center;
}

@media screen and (max-width: 768px) {
  .p-reason__terms-item--01 {
    grid-template-columns: auto 28.21vw;
  }
}

.p-reason__terms-example {
  margin: 1.25rem 0 0;
}

@media screen and (max-width: 768px) {
  .p-reason__terms-example {
    margin: 5.13vw 0 0;
  }
}

.p-reason__terms-example-ttl {
  display: grid;
  grid-template-columns: 4.0625rem auto;
  gap: 0.625rem;
}

@media screen and (max-width: 768px) {
  .p-reason__terms-example-ttl {
    grid-template-columns: 13.33vw auto;
    gap: 2.56vw;
  }
}

.p-reason__terms-example-ttl dt {
  background: var(--color-primary);
  color: var(--color-white);
  border-radius: 0.25rem;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  letter-spacing: 0;
}

@media screen and (max-width: 768px) {
  .p-reason__terms-example-ttl dt {
    font-size: 3.08vw;
  }
}

.p-reason__terms-example-ttl dd {
  font-weight: 700;
}

@media screen and (min-width: 769px),
print {
  .p-reason__terms-example-ttl dd {
    font-size: 1.25rem;
  }
}

.p-reason__terms-example-ttl dd span {
  color: var(--color-primary);
}

.p-reason__terms-example-item {
  background: var(--color-white);
  border-radius: 0.3125rem;
  position: relative;
}

.p-reason__terms-example-items {
  margin: 0.9375rem 0 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.875rem;
}

@media screen and (max-width: 768px) {
  .p-reason__terms-example-items {
    margin: 3.85vw 0 0;
    gap: 5.13vw;
  }
  .p-reason__terms-example-item {
    background: var(--color-primary-tint-1);
    border-radius: 1.03vw;
  }
}

.p-reason__terms-example-item+.p-reason__terms-example-item:after {
  aspect-ratio: 1;
  position: absolute;
  box-sizing: border-box;
  border: 0.625rem solid transparent;
  width: 0.625rem;
  top: 50%;
  left: -1.125rem;
  transform: translateY(-50%);
  border-left: 0.625rem solid var(--color-primary);
  border-right: none;
  content: "";
}

@media screen and (max-width: 768px) {
  .p-reason__terms-example-item+.p-reason__terms-example-item:after {
    border-width: 2.05vw;
    width: 2.05vw;
    left: -3.33vw;
  }
}

.p-reason__terms-example-img {
  width: 100%;
  height: 6.25rem;
}

@media screen and (max-width: 768px) {
  .p-reason__terms-example-img {
    height: 16.67vw;
  }
}

.p-reason__terms-example-img img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
  -o-object-position: center;
  object-position: center;
  border-radius: 0.3125rem 0.3125rem 0 0;
}

@media screen and (max-width: 768px) {
  .p-reason__terms-example-img img {
    border-radius: 1.03vw 1.03vw 0 0;
  }
}

.p-reason__terms-example-txt {
  padding: 0.3125rem;
  font-size: 1.125rem;
  height: calc(100% - 6.25rem);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  letter-spacing: 0.06em;
  line-height: 1.3;
}

@media screen and (max-width: 768px) {
  .p-reason__terms-example-txt {
    padding: 1.28vw;
    font-size: 3.08vw;
    height: calc(100% - 16.67vw);
  }
}

.p-reason__compar {
  background: var(--color-primary-tint-1);
  border-radius: 0.625rem;
  padding: 1.5625rem 1.5625rem 0;
  margin: 1.875rem 0 0;
}

@media screen and (max-width: 768px) {
  .p-reason__compar {
    background: var(--color-white);
    border-radius: 2.56vw;
    padding: 5.13vw 5.13vw 0;
    margin: 5.13vw 0 0;
  }
}

.p-reason__worry {
  background: var(--color-primary-tint-1);
  border-radius: 0.625rem;
  padding: 1.5625rem 2.5rem;
  margin: 3.125rem 0 0;
  position: relative;
}

@media screen and (max-width: 768px) {
  .p-reason__worry {
    background: var(--color-white);
    border-radius: 2.56vw;
    padding: 5.13vw;
    margin: 5.13vw 0 0;
  }
}

.p-reason__worry:before {
  width: 11.875rem;
  aspect-ratio: 1/1.3;
  display: block;
  position: absolute;
  bottom: 0;
  right: 0;
  background: url(../img/common/img_reason09.webp) right bottom/contain no-repeat;
  content: "";
}

@media screen and (max-width: 768px) {
  .p-reason__worry:before {
    width: 33.33vw;
  }
}

.p-reason__worry-ttl {
  font-weight: 700;
  font-size: 1.75rem;
  display: flex;
}

@media screen and (max-width: 768px) {
  .p-reason__worry-ttl {
    font-size: 5.64vw;
  }
}

.p-reason__worry-ttl:before,
.p-reason__worry-ttl:after {
  width: 1px;
  height: 1.875rem;
  display: inline-block;
  background: var(--color-text-primary);
  position: relative;
  bottom: -0.3125rem;
  content: "";
}

@media screen and (max-width: 768px) {
  .p-reason__worry-ttl:before,
  .p-reason__worry-ttl:after {
    height: 6.41vw;
  }
}

.p-reason__worry-ttl:before {
  transform: rotate(-25deg);
  margin-right: 0.625rem;
}

@media screen and (max-width: 768px) {
  .p-reason__worry-ttl:before {
    margin-right: 2.56vw;
  }
}

.p-reason__worry-ttl:after {
  transform: rotate(25deg);
  margin-left: 0.625rem;
}

@media screen and (max-width: 768px) {
  .p-reason__worry-ttl:after {
    margin-left: 2.56vw;
  }
}

.p-reason__worry-ttl span {
  color: var(--color-primary);
}

.p-reason__worry-list {
  margin: 1.25rem 0 0;
}

@media screen and (max-width: 768px) {
  .p-reason__worry-list {
    margin: 5.13vw 0 0;
  }
}

.p-reason__worry-list li {
  position: relative;
  padding-left: 1.875rem;
  font-size: 1.125rem;
}

@media screen and (max-width: 768px) {
  .p-reason__worry-list li {
    padding-left: 6.41vw;
    font-size: 3.59vw;
  }
}

.p-reason__worry-list li:before {
  width: 1.4375rem;
  aspect-ratio: 18/14;
  display: block;
  position: absolute;
  top: 0.1875rem;
  left: 0;
  background: url(../img/common/ico_check02.svg) center/contain no-repeat;
  content: "";
}

@media screen and (max-width: 768px) {
  .p-reason__worry-list li:before {
    width: 4.62vw;
    top: 0.77vw;
  }
}

.p-reason__worry-list li+li {
  margin-top: 0.625rem;
}

@media screen and (max-width: 768px) {
  .p-reason__worry-list li+li {
    margin-top: 2.56vw;
  }
}

/**
 * Payment Section
 */

.p-payment {
  background: var(--color-primary-tint-1);
  padding: 4.375rem 0;
}

@media screen and (max-width: 768px) {
  .p-payment {
    padding: 12.82vw 0;
  }
}

.p-payment__inner {
  display: grid;
  grid-template-columns: auto 37.5rem;
  gap: 0 2.5rem;
  align-items: center;
}

@media screen and (max-width: 768px) {
  .p-payment__inner {
    display: block;
  }
}

.p-payment__catch {
  font-weight: 700;
}

@media screen and (min-width: 769px),
print {
  .p-payment__catch {
    font-size: 1.75rem;
    grid-column: 1/2;
    grid-row: 1/2;
    margin-top: auto;
  }
}

@media screen and (max-width: 768px) {
  .p-payment__catch {
    font-size: 5.64vw;
  }
}

.p-payment__catch span {
  color: var(--color-primary);
}

@media screen and (min-width: 769px),
print {
  .p-payment__txt {
    grid-column: 1/2;
    grid-row: 2/3;
    margin: 0.9375rem 0 auto;
  }
}

@media screen and (max-width: 768px) {
  .p-payment__txt {
    margin: 5.13vw 0 0;
  }
}

.p-payment__img {
  background: var(--color-white);
}

@media screen and (min-width: 769px),
print {
  .p-payment__img {
    border-radius: 0.625rem;
    padding: 1.25rem 0;
    grid-column: 2/3;
    grid-row: 1/3;
  }
}

@media screen and (max-width: 768px) {
  .p-payment__img {
    border-radius: 2.56vw;
    padding: 2.56vw 0 5.13vw;
    margin: 5.13vw 0 0;
  }
}

.p-payment__img img {
  width: 23.75rem;
  display: block;
  margin: 0 auto;
}

@media screen and (max-width: 768px) {
  .p-payment__img img {
    width: 76.92vw;
  }
}

/**
 * Voice Anonymous Section
 * 匿名お客様の声セクション（イラストアバター版）
 */

.c-voice-anonymous{
  padding-top: var(--space-16);
  padding-bottom: var(--space-16);
  background-color: var(--color-neutral-50, #f9fafb);
}

@media screen and (max-width: 768px) {
  .c-voice-anonymous {
    padding: 10.26vw 0;
  }
}

.c-voice-anonymous__items{
  margin-top: var(--space-10);
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
}

@media screen and (max-width: 768px) {
  .c-voice-anonymous__items {
    margin-top: 7.69vw;
    grid-template-columns: 1fr;
    gap: 5.13vw;
  }
}

.c-voice-anonymous__item {
  background-color: var(--color-white);
  border: 1px solid var(--color-primary, #169EDD);
  border-radius: 0.625rem;
}

@media screen and (max-width: 768px) {
  .c-voice-anonymous__item {
    border-radius: 2.56vw;
  }
}

.c-voice-anonymous__item-inner{
  padding: var(--space-6);
}

@media screen and (max-width: 768px) {
  .c-voice-anonymous__item-inner {
    padding: 5.13vw;
  }
}

.c-voice-anonymous__item-header {
  display: flex;
  align-items: center;
  gap: 1rem;
}

@media screen and (max-width: 768px) {
  .c-voice-anonymous__item-header {
    gap: 3.85vw;
  }
}

.c-voice-anonymous__item-avatar {
  flex-shrink: 0;
  width: 7.5rem;
  height: 5.625rem;
}

@media screen and (max-width: 768px) {
  .c-voice-anonymous__item-avatar {
    width: 25.64vw;
    height: 19.23vw;
  }
}

.c-voice-anonymous__item-avatar img {
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
  -o-object-position: center;
     object-position: center;
}

.c-voice-anonymous__item-meta {
  flex: 1;
}

.c-voice-anonymous__item-company {
  font-size: 0.875rem;
  color: var(--color-neutral-600, #6D7785);
}

@media screen and (max-width: 768px) {
  .c-voice-anonymous__item-company {
    font-size: 3.08vw;
  }
}

.c-voice-anonymous__item-role {
  font-size: 0.875rem;
  color: var(--color-neutral-600, #6D7785);
  margin-top: 0.125rem;
}

@media screen and (max-width: 768px) {
  .c-voice-anonymous__item-role {
    font-size: 3.08vw;
    margin-top: 0;
  }
}

.c-voice-anonymous__item-name {
  font-size: 1.125rem;
  font-weight: 700;
  margin-top: 0.25rem;
  color: var(--color-neutral-900, #1f2937);
}

@media screen and (max-width: 768px) {
  .c-voice-anonymous__item-name {
    font-size: 3.85vw;
    margin-top: 0.5vw;
  }
}

.c-voice-anonymous__item-ttl {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--color-primary, #169EDD);
  margin-top: 1rem;
  line-height: 1.5;
}

@media screen and (max-width: 768px) {
  .c-voice-anonymous__item-ttl {
    font-size: 4.36vw;
    margin-top: 3.85vw;
  }
}

.c-voice-anonymous__item-txt {
  font-size: 0.9375rem;
  color: var(--color-neutral-600, #6D7785);
  margin-top: 0.75rem;
  line-height: 1.8;
  letter-spacing: 0.04em;
}

@media screen and (max-width: 768px) {
  .c-voice-anonymous__item-txt {
    font-size: 3.33vw;
    margin-top: 2.56vw;
  }
}

/**
 * Alliance Section
 * paymentセクションと同じレイアウト（左テキスト + 右SVG図解）
 */

.c-alliance {
  background: var(--color-primary-tint-1);
  padding: 4.375rem 0;
}

@media screen and (max-width: 768px) {
  .c-alliance {
    padding: 12.82vw 0;
  }
}

.c-alliance__inner {
  display: grid;
  grid-template-columns: auto 37.5rem;
  gap: 0 2.5rem;
  align-items: center;
}

@media screen and (max-width: 768px) {
  .c-alliance__inner {
    display: block;
  }
}

/* ---- Left column ---- */

.c-alliance__catch {
  font-weight: 700;
}

@media screen and (min-width: 769px), print {
  .c-alliance__catch {
    font-size: 1.75rem;
    grid-column: 1/2;
    grid-row: 1/2;
    margin-top: auto;
  }
}

@media screen and (max-width: 768px) {
  .c-alliance__catch {
    font-size: 5.64vw;
  }
}

.c-alliance__catch span {
  color: var(--color-primary);
}

@media screen and (min-width: 769px), print {
  .c-alliance__txt {
    grid-column: 1/2;
    grid-row: 2/3;
    margin: 0.9375rem 0 auto;
  }
}

@media screen and (max-width: 768px) {
  .c-alliance__txt {
    margin: 5.13vw 0 0;
  }
}

/* ---- Right column ---- */

@media screen and (min-width: 769px), print {
  .c-alliance__diagram {
    grid-column: 2/3;
    grid-row: 1/3;
  }
}

@media screen and (max-width: 768px) {
  .c-alliance__diagram {
    margin-top: 5.13vw;
  }
}

.c-alliance__diagram-inner {
  background: var(--color-white);
  border-radius: 0.625rem;
  padding: 1.25rem;
}

@media screen and (max-width: 768px) {
  .c-alliance__diagram-inner {
    padding: 3.85vw 2.56vw;
    border-radius: 2.56vw;
    overflow-x: auto;
  }
}

.c-alliance__svg {
  display: block;
  width: 100%;
  height: auto;
}

@media screen and (max-width: 768px) {
  .c-alliance__svg {
    min-width: 500px;
  }
}

/**
 * FAQ Section
 */

.p-faq {
  background: var(--color-neutral-gray-100);
  padding: 4.375rem 0
}

@media screen and (max-width:768px) {
  .p-faq {
    padding: 12.82vw 0
  }
}

.p-faq__ttl {
  color: var(--color-black);
  font-size: 2.5625rem;
  text-align: center
}

@media screen and (max-width:768px) {
  .p-faq__ttl {
    font-size: 5.13vw
  }
}

.p-faq__ttl span {
  color: var(--color-primary)
}

@media screen and (max-width:768px) {
  .p-faq__ttl span {
    font-size: 160%
  }
}

.p-faq__item {
  background: var(--color-white);
  border-radius: .625rem;
  margin: 0 auto;
  width: 60.75rem;
  position: relative
}

.p-faq__items {
  margin: 3.125rem 0 0;
  padding: 0;
}

@media screen and (max-width:768px) {
  .p-faq__items {
    margin: 7.69vw 0 0
  }
  .p-faq__item {
    border-radius: 2.56vw;
    width: auto
  }
}

.p-faq__item:before,
.p-faq__item:after {
  position: absolute;
  content: "";
  top: 1.875rem;
  right: 1.875rem;
  width: 1rem;
  height: .125rem;
  background-color: var(--color-text-primary);
  transition: all 0.3s ease-in-out
}

@media screen and (max-width:768px) {

  .p-faq__item:before,
  .p-faq__item:after {
    top: 6.2vw;
    right: 3.85vw;
    width: 3.08vw
  }
}

.p-faq__item:after {
  transform: rotate(90deg)
}

.p-faq__item+.p-faq__item {
  margin-top: .625rem
}

@media screen and (max-width:768px) {
  .p-faq__item+.p-faq__item {
    margin-top: 2.56vw
  }
}

.p-faq__item-btn:before,
.p-faq__item-cont:before {
  position: absolute;
  left: 1.625rem;
  top: 1.3125rem;
  width: 1.625rem;
  aspect-ratio: 1/0.9;
  display: block;
  content: ""
}

@media screen and (max-width:768px) {

  .p-faq__item-btn:before,
  .p-faq__item-cont:before {
    top: 4.3vw;
    left: 3.85vw;
    width: 4.62vw
  }
}

.p-faq__item-btn {
  cursor: pointer;
  display: flex;
  align-items: center;
  position: relative;
  padding: 1.25rem 3.125rem 1.25rem 4rem;
  font-size: 1.125rem;
  line-height: 1.5
}

@media screen and (max-width:768px) {
  .p-faq__item-btn {
    padding: 3.85vw 10.26vw;
    font-size: 3.59vw
  }
}

.p-faq__item-btn:before {
  background: url(../img/common/ico_faq01.svg) center/contain no-repeat
}

.p-faq__item-cont {
  display: none;
  padding: 1.25rem 1.875rem 1.875rem 4rem;
  margin: 0;
  position: relative;
  color: var(--color-text-secondary);
  font-size: 1.125rem
}

.p-faq__item.open .p-faq__item-cont,
.p-faq__item.stay .p-faq__item-cont {
  display: block
}

@media screen and (max-width:768px) {
  .p-faq__item-cont {
    padding: 3.85vw 3.85vw 3.85vw 10.26vw;
    font-size: 3.59vw
  }
}

.p-faq__item-cont:before {
  background: url(../img/common/ico_faq02.svg) center/contain no-repeat
}

.p-faq__item-cont:after {
  width: calc(100% - 2.5rem);
  height: 1px;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  margin: 0 auto;
  background: var(--color-neutral-line-muted);
  content: ""
}

@media screen and (max-width:768px) {
  .p-faq__item-cont:after {
    width: calc(100% - 7.69vw)
  }
}

.p-faq__item-cont a {
  color: var(--color-link);
  text-decoration: underline
}

.p-faq__item.open:before,
.p-faq__item.stay:before {
  transform: rotate(180deg)
}

.p-faq__item.open:after,
.p-faq__item.stay:after {
  opacity: 0
}

.p-faq__item.stay.open:after {
  transform: rotate(-90deg);
  opacity: 1
}

.p-faq__item.stay .p-faq__item-cont {
  display: block
}

.p-faq__item-catch {
  font-weight: 700;
}

.p-faq__item-txt:nth-child(n+2) {
  margin-top: .625rem
}

@media screen and (max-width:768px) {
  .p-faq__item-txt:nth-child(n+2) {
    margin-top: 2.56vw
  }
}

.p-faq__item-txt p+p {
  margin-top: .625rem
}

@media screen and (max-width:768px) {
  .p-faq__item-txt p+p {
    margin-top: 2.56vw
  }
}

.p-faq__item .c-cap {
  margin: .625rem 0 0
}

@media screen and (max-width:768px) {
  .p-faq__item .c-cap {
    margin: 2.56vw 0 0
  }
}

/* ========================================
   c-acd (アコーディオン) ベーススタイル
   lenet本体から移植 - FAQ注意事項で使用
   ======================================== */

.c-acd__item {
  position: relative;
  background: var(--color-white);
  border: 1px solid var(--color-neutral-line-muted);
  border-radius: .625rem;
}

.c-acd__item::before,
.c-acd__item::after {
  position: absolute;
  content: "";
  top: 1.875rem;
  right: 1.875rem;
  width: 1rem;
  height: .125rem;
  background-color: var(--color-text-primary);
  transition: all 0.3s ease-in-out;
}

@media screen and (max-width: 768px) {
  .c-acd__item::before,
  .c-acd__item::after {
    top: 6.2vw;
    right: 3.85vw;
    width: 3.08vw;
  }
}

.c-acd__item::after {
  transform: rotate(90deg);
}

.c-acd__item.open::before {
  transform: rotate(180deg);
}

.c-acd__item.open::after {
  opacity: 0;
}

.c-acd__item-btn {
  cursor: pointer;
  display: flex;
  align-items: center;
  padding: 1.25rem 3.125rem 1.25rem 1.875rem;
}

.c-acd__item-btn-txt {
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.5;
  color: var(--color-text-primary);
}

.c-acd__item-cont {
  display: none;
  padding: 0 1.875rem 1.875rem;
}

.c-acd__item.open .c-acd__item-cont {
  display: block;
}

/* ========================================
   FAQ内のc-acdオーバーライド
   ======================================== */

.p-faq .c-acd__item {
  margin-top: 3.125rem;
  width: 60.75rem;
  margin-left: auto;
  margin-right: auto;
}

@media screen and (max-width: 768px) {
  .p-faq .c-acd__item {
    margin-top: 7.69vw;
    width: auto;
  }
}

.p-faq .c-acd__item::before,
.p-faq .c-acd__item::after {
  top: 2.5rem;
}

@media screen and (max-width: 768px) {

  .p-faq .c-acd__item::before,
  .p-faq .c-acd__item::after {
    top: 9vw;
  }
}

.p-faq .c-acd__item-btn {
  padding: 1.5625rem 1.875rem;
}

@media screen and (max-width: 768px) {
  .p-faq .c-acd__item-btn {
    padding: 6.41vw 10.26vw 6.41vw 3.85vw;
  }
  .p-faq .c-acd__item-btn-txt {
    font-size: 4.1vw;
  }
}

.p-faq .c-acd__item-btn-txt {
  color: var(--color-primary);
}

/* ========================================
   p-caution (注意事項コンテンツ)
   ======================================== */

.p-faq .p-caution__box {
  margin: 0;
  padding: 0;
  border: none;
}

.p-faq .p-caution__box-items {
  height: auto;
  padding: 0;
}

.p-caution__box-lead {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--color-accent-red, #e63946);
  line-height: 1.6;
  margin-bottom: 1rem;
}

@media screen and (max-width: 768px) {
  .p-caution__box-lead {
    font-size: 1rem;
  }
}

.p-caution__box-item {
  font-size: 0.9375rem;
  line-height: 1.8;
  color: var(--color-text-primary);
}

.p-caution__box-item + .p-caution__box-item {
  margin-top: 1rem;
}

.p-caution__box-ttl {
  font-weight: 700;
  margin-top: 1.25rem;
  margin-bottom: 0.5rem;
}

.p-caution__box-item a {
  color: var(--color-link);
  text-decoration: underline;
}

.p-caution__box-item .c-listDot {
  list-style: none;
  padding-left: 0;
  margin: 0.5rem 0;
}

.p-caution__box-item .c-listDot li {
  margin-top: 0.125rem;
}

/**
 * Scene Component - 利用シーン
 */

/* ========================================
   Section
   ======================================== */

.c-scene {
  padding: var(--section-padding-y) 0;
}

@media screen and (max-width: 768px) {
  .c-scene {
    padding: var(--section-padding-y-mobile) 0;
  }
}

/* ========================================
   Section Title
   ======================================== */

.c-scene__section-title {
  text-align: center;
  font-weight: var(--font-weight-bold);
  font-size: 2.5rem;
  margin-bottom: 3.75rem;
}

@media screen and (max-width: 768px) {
  .c-scene__section-title {
    font-size: 5.13vw;
    margin-bottom: 7.69vw;
  }
}

.c-scene__section-title span {
  color: var(--color-primary);
}

@media screen and (max-width: 768px) {
  .c-scene__section-title span {
    font-size: 160%;
  }
}

/* ========================================
   Items Container
   ======================================== */

.c-scene__items {
  display: flex;
  flex-direction: column;
  gap: 4rem;
  margin-top: 3.125rem;
}

@media screen and (max-width: 768px) {
  .c-scene__items {
    margin-top: 7.69vw;
    gap: 10.26vw;
  }
}

/* ========================================
   Single Item
   ======================================== */

.c-scene__item {
  display: grid;
  grid-template-columns: 24rem 1fr;
  gap: 2rem;
  align-items: flex-start;
}

.c-scene__item--reverse {
  grid-template-columns: 1fr 24rem;
}

.c-scene__item--reverse .c-scene__image {
  order: 2;
}

.c-scene__item--reverse .c-scene__content {
  order: 1;
}

@media screen and (max-width: 768px) {

  .c-scene__item,
  .c-scene__item--reverse {
    grid-template-columns: 1fr;
    gap: 5.13vw;
  }

  .c-scene__item--reverse .c-scene__image,
  .c-scene__item--reverse .c-scene__content {
    order: unset;
  }
}

/* ========================================
   Image
   ======================================== */

.c-scene__image {
  border-radius: 0.625rem;
  overflow: hidden;
  aspect-ratio: 320 / 285;
}

.c-scene__image picture {
  display: block;
  width: 100%;
  height: 100%;
}

.c-scene__image img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  background-color: var(--color-neutral-200);
}

.c-scene__image-placeholder {
  width: 100%;
  height: 100%;
  background-color: var(--color-neutral-200);
}

@media screen and (max-width: 768px) {
  .c-scene__image {
    border-radius: 2.56vw;
    aspect-ratio: 16 / 9;
  }
}

/* ========================================
   Content
   ======================================== */

.c-scene__content {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

@media screen and (max-width: 768px) {
  .c-scene__content {
    gap: 3.85vw;
  }
}

/* ========================================
   Tag Badge
   ======================================== */

.c-scene__tag {
  display: inline-flex;
  align-items: center;
  gap: 0.5625rem;
  padding: 0.25rem 0.75rem;
  background-color: var(--color-primary);
  border-radius: 0.375rem;
  width: -moz-fit-content;
  width: fit-content;
}

.c-scene__tag-label {
  font-family: 'Avenir Next', var(--font-family-latin);
  font-weight: 600;
  font-size: 1.125rem;
  line-height: 1;
  color: var(--color-white);
  letter-spacing: 0;
  margin-top: 0.2em;
}

.c-scene__tag-divider {
  width: 1px;
  height: 1.4rem;
  background-color: var(--color-white);
  opacity: 0.7;
}

.c-scene__tag-name {
  font-weight: var(--font-weight-bold);
  font-size: 1.25rem;
  line-height: 1.5;
  color: var(--color-white);
  letter-spacing: 0.05em;
}

@media screen and (max-width: 768px) {
  .c-scene__tag {
    gap: 2.31vw;
    padding: 2.05vw 3.08vw;
    border-radius: 1.54vw;
  }

  .c-scene__tag-label {
    font-size: 3.59vw;
  }

  .c-scene__tag-divider {
    height: 3.85vw;
  }

  .c-scene__tag-name {
    font-size: 4.1vw;
  }
}

/* ========================================
   Title
   ======================================== */

.c-scene__title {
  font-weight: var(--font-weight-bold);
  font-size: 1.75rem;
  line-height: 1.42;
  color: var(--color-text-primary);
  letter-spacing: 0.05em;
}

@media screen and (max-width: 768px) {
  .c-scene__title {
    font-size: 4.62vw;
    line-height: 1.5;
  }
}

/* ========================================
   Description
   ======================================== */

.c-scene__desc {
  font-size: 1.125rem;
  line-height: 1.375;
  color: var(--color-text-muted);
  letter-spacing: 0.05em;
}

@media screen and (max-width: 768px) {
  .c-scene__desc {
    font-size: 3.59vw;
    line-height: 1.6;
  }
}

/* ========================================
   Note (annotation)
   ======================================== */

.c-scene__note {
  margin-top: -0.5rem;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--color-text-muted);
  letter-spacing: 0.03em;
}

@media screen and (max-width: 768px) {
  .c-scene__note {
    font-size: 3.08vw;
  }
}

/* ========================================
   Footer
   ======================================== */

.c-scene__footer {
  margin-top: 0.5rem;
}

@media screen and (max-width: 768px) {
  .c-scene__footer {
    margin-top: 2.56vw;
  }
}

/* ========================================
   Steps Flow
   ======================================== */

.c-scene__steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

@media screen and (max-width: 768px) {
  .c-scene__steps {
    grid-template-columns: 1fr;
    gap: 5.13vw;
  }
}

/* Single Step */

.c-scene__step {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

@media screen and (max-width: 768px) {
  .c-scene__step {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 3.08vw;
  }
}

/* Step Header (Icon + Connector) */

.c-scene__step-header {
  display: flex;
  align-items: center;
}

@media screen and (max-width: 768px) {
  .c-scene__step-header {
    flex-direction: column;
    align-items: center;
  }
}

/* Step Icon */

.c-scene__step-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  background-color: var(--color-primary-tint-1);
  border-radius: 50%;
  flex-shrink: 0;
  color: var(--color-primary);
}

.c-scene__step-icon svg {
  width: 1.5rem;
  height: 1.5rem;
  stroke-width: 2.5;
}

@media screen and (max-width: 768px) {
  .c-scene__step-icon {
    width: 10.26vw;
    height: 10.26vw;
  }

  .c-scene__step-icon svg {
    width: 5.13vw;
    height: 5.13vw;
  }
}

/* Step Connector Line */

.c-scene__step-connector {
  flex: 1;
  height: 2px;
  background-color: var(--color-primary-tint-1);
  min-width: 0.5rem;
}

.c-scene__step--last .c-scene__step-connector {
  display: none;
}

@media screen and (max-width: 768px) {
  .c-scene__step-connector {
    display: none;
  }
}

/* Step Body */

.c-scene__step-body {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding-top: 0.625rem;
  padding-right: 1.5rem;
}

@media screen and (max-width: 768px) {
  .c-scene__step-body {
    padding: 0;
    gap: 2.05vw;
  }
}

/* Step Title */

.c-scene__step-title {
  font-weight: var(--font-weight-bold);
  font-size: 0.875rem;
  line-height: 1.43;
  color: var(--color-text-primary);
}

@media screen and (max-width: 768px) {
  .c-scene__step-title {
    font-size: 3.59vw;
  }
}

/* Step Description */

.c-scene__step-desc {
  font-size: 0.75rem;
  line-height: 1.33;
  color: var(--color-text-secondary);
  letter-spacing: 0;
}

@media screen and (max-width: 768px) {
  .c-scene__step-desc {
    font-size: 3.08vw;
    line-height: 1.5;
  }
}

/* ========================================
   Products Grid
   ======================================== */

.c-scene__products {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.5rem;
}

@media screen and (max-width: 768px) {
  .c-scene__products {
    grid-template-columns: 1fr;
    gap: 3.08vw;
  }
}

/* Single Product */

.c-scene__product {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

@media screen and (max-width: 768px) {
  .c-scene__product {
    gap: 3.08vw;
  }
}

/* Product Image */

.c-scene__product-image {
  width: 5rem;
  height: 5rem;
  border-radius: 0.25rem;
  overflow: hidden;
  flex-shrink: 0;
  background-color: var(--color-neutral-200);
}

.c-scene__product-image picture {
  display: block;
  width: 100%;
  height: 100%;
}

.c-scene__product-image img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.c-scene__product-placeholder {
  width: 100%;
  height: 100%;
  background-color: var(--color-neutral-200);
}

@media screen and (max-width: 768px) {
  .c-scene__product-image {
    width: 17.95vw;
    height: 17.95vw;
    border-radius: 1.03vw;
  }
}

/* Product Info */

.c-scene__product-info {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}

@media screen and (max-width: 768px) {
  .c-scene__product-info {
    gap: 1.54vw;
  }
}

/* Product Name */

.c-scene__product-name {
  font-weight: var(--font-weight-bold);
  font-size: 0.875rem;
  line-height: 1.43;
  color: var(--color-text-primary);
}

@media screen and (max-width: 768px) {
  .c-scene__product-name {
    font-size: 3.59vw;
  }
}

/* Product Price */

.c-scene__product-price {
  font-size: 0.875rem;
  line-height: 1.43;
  color: var(--color-text-muted);
}

@media screen and (max-width: 768px) {
  .c-scene__product-price {
    font-size: 3.59vw;
  }
}

/* ========================================
   Options (OR選択肢) - 左右レイアウト
   ======================================== */

.c-scene__options {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: 1rem;
}

/* Single Option */

.c-scene__option {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  padding: 1rem;
  background-color: var(--color-primary-tint-1);
  border-radius: 0.5rem;
  text-align: center;
}

/* Option Icon */

.c-scene__option-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  background-color: var(--color-white);
  border-radius: 50%;
  flex-shrink: 0;
  color: var(--color-primary);
}

.c-scene__option-icon svg {
  width: 1.25rem;
  height: 1.25rem;
  stroke-width: 2.5;
}

/* Option Body */

.c-scene__option-body {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

/* Option Title */

.c-scene__option-title {
  font-weight: var(--font-weight-bold);
  font-size: 0.875rem;
  line-height: 1.43;
  color: var(--color-text-primary);
}

/* Option Description */

.c-scene__option-desc {
  font-size: 0.75rem;
  line-height: 1.5;
  color: var(--color-text-secondary);
}

/* OR Divider */

.c-scene__option-or {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Avenir Next', var(--font-family-latin);
  font-weight: 600;
  font-size: 0.875rem;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  flex-shrink: 0;
}

@media screen and (max-width: 768px) {
  .c-scene__options {
    flex-direction: column;
    gap: 2.56vw;
  }

  .c-scene__option {
    flex-direction: row;
    align-items: flex-start;
    text-align: left;
    gap: 3.08vw;
    padding: 3.85vw;
    border-radius: 2.05vw;
  }

  .c-scene__option-icon {
    width: 10.26vw;
    height: 10.26vw;
  }

  .c-scene__option-icon svg {
    width: 5.13vw;
    height: 5.13vw;
  }

  .c-scene__option-title {
    font-size: 3.59vw;
  }

  .c-scene__option-desc {
    font-size: 3.08vw;
  }

  .c-scene__option-or {
    font-size: 3.08vw;
  }
}

/**
 * Manga Component - 漫画セクション（病院LP専用）
 */

.c-manga {
  padding: var(--section-padding-y) 0;
  background-color: var(--color-white);
}

@media screen and (max-width: 768px) {
  .c-manga {
    padding: var(--section-padding-y-mobile) 0;
  }
}

/* パネルコンテナ */

.c-manga__panels {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-top: 2.5rem;
}

@media screen and (max-width: 768px) {
  .c-manga__panels {
    margin-top: 5.13vw;
  }
}

/* 各パネル — CLS防止: lazy load画像のaspect-ratioを事前確保 */

.c-manga__panel:nth-child(1) { aspect-ratio: 2560 / 714; }

.c-manga__panel:nth-child(2) { aspect-ratio: 2560 / 622; }

.c-manga__panel:nth-child(3) { aspect-ratio: 2560 / 926; }

.c-manga__panel:nth-child(4) { aspect-ratio: 2560 / 774; }

.c-manga__panel:nth-child(5) { aspect-ratio: 2560 / 572; }

.c-manga__panel:nth-child(6) { aspect-ratio: 2560 / 938; }

@media screen and (max-width: 768px) {
  .c-manga__panel:nth-child(1) { aspect-ratio: 750 / 2216; }
  .c-manga__panel:nth-child(2) { aspect-ratio: 750 / 2024; }
  .c-manga__panel:nth-child(3) { aspect-ratio: 641 / 2560; }
  .c-manga__panel:nth-child(4) { aspect-ratio: 598 / 2560; }
  .c-manga__panel:nth-child(5) { aspect-ratio: 694 / 2560; }
  .c-manga__panel:nth-child(6) { aspect-ratio: 667 / 2560; }
}

.c-manga__panel picture {
  display: block;
}

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

/**
 * Form Section
 */

.p-form {
  padding: 5rem 0;
}

@media screen and (max-width: 768px) {
  .p-form {
    padding: 12.82vw 0;
  }
}

.p-form.confirm,
.p-form.complete {
  padding-top: 7.5rem;
}

@media screen and (max-width: 768px) {

  .p-form.confirm,
  .p-form.complete {
    padding-top: 20.51vw;
  }
}

.p-form .l-container {
  width: 46.375rem;
}

@media screen and (max-width: 768px) {
  .p-form .l-container {
    width: calc(100% - 10.26vw);
    margin: 0 auto;
  }
}

.p-form__ttl {
  text-align: center;
  font-size: 2.5625rem;
  margin-bottom: 1.875rem;
}

@media screen and (max-width: 768px) {
  .p-form__ttl {
    font-size: 8.21vw;
    margin-bottom: 7.69vw;
  }
}

.p-form__lead {
  text-align: center;
  margin-bottom: 1.875rem;
}

@media screen and (min-width: 769px),
print {
  .p-form__lead {
    font-size: 1.125rem;
  }
}

@media screen and (max-width: 768px) {
  .p-form__lead {
    margin-bottom: 7.69vw;
  }
}

.p-form__box {
  margin: 0 auto 1.875rem;
  width: 27rem;
}

@media screen and (max-width: 768px) {
  .p-form__box {
    width: 100%;
    margin: 0;
  }
}

.p-form__box-ttl {
  border: 2px solid var(--color-text-muted);
  border-radius: 0.5rem;
  text-align: center;
  padding: 0.3125rem 0;
  font-size: 1.5625rem;
  font-weight: 700;
  position: relative;
  margin-bottom: 0.9375rem;
}

@media screen and (max-width: 768px) {
  .p-form__box-ttl {
    margin-bottom: 3.85vw;
    font-size: 5.13vw;
    padding: 1.28vw 0;
  }
}

.p-form__box-ttl::after {
  content: "";
  display: block;
  position: absolute;
  border-style: solid;
  border-width: 0;
  border-bottom-width: 2px;
  border-left-width: 2px;
  border-color: var(--color-form-border-alt);
  width: 0.625rem;
  height: 0.625rem;
  bottom: -0.75rem;
  left: 50%;
  transform: translate(-70%, -50%) rotate(-45deg);
  background-color: var(--color-white);
}

@media screen and (max-width: 768px) {
  .p-form__box-ttl::after {
    width: 3.85vw;
    height: 3.85vw;
    bottom: -4.1vw;
  }
}

.p-form__box-tel {
  display: flex;
  align-items: center;
  justify-content: center;
}

.p-form__box-tel::before {
  background: url(../img/common/ico_phone03.svg) center/contain no-repeat;
  width: 2.25rem;
  aspect-ratio: 1;
  display: inline-block;
  margin-right: 0.625rem;
  margin-bottom: -0.3125rem;
  content: "";
}

@media screen and (max-width: 768px) {
  .p-form__box-tel::before {
    width: 7.69vw;
  }
}

.p-form__box-tel>a {
  font-size: 3.1875rem;
  color: var(--color-accent-pink);
  letter-spacing: -0.02em;
}

@media screen and (max-width: 768px) {
  .p-form__box-tel>a {
    font-size: 9.23vw;
  }
}

.p-form__box-time {
  color: var(--color-text-secondary);
  letter-spacing: 0.02em;
  text-align: center;
  font-size: 0.9375rem;
}

@media screen and (max-width: 768px) {
  .p-form__box-time {
    font-size: 3.08vw;
    margin-bottom: 5.13vw;
  }
}

.p-form__box-text {
  text-align: center;
  font-weight: 700;
}

.p-form__bar-item {
  flex-basis: 28.6%;
  background-color: var(--color-neutral-gray-100);
  font-weight: 700;
  padding: 0.9375rem 0;
  position: relative;
  margin-bottom: 2.5rem;
  border-radius: 0.3125rem 0 0 0.3125rem;
}

@media screen and (max-width: 768px) {
  .p-form__bar-item {
    flex-basis: 26.9%;
    padding: 2.56vw 0;
    margin-bottom: 7.69vw;
  }
}

.p-form__bar-items {
  display: flex;
  justify-content: space-between;
}

.p-form__bar-item span {
  display: block;
  width: 100%;
  text-align: center;
}

.p-form__bar-item::after {
  content: "";
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: -1.375rem;
  width: 1.4375rem;
  height: 100%;
  background: var(--color-neutral-gray-100);
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}

@media screen and (max-width: 768px) {
  .p-form__bar-item::after {
    width: 5.9vw;
    right: -5.6vw;
  }
}

.p-form__bar-item:last-child {
  flex-basis: 32.5%;
  border-radius: 0.3125rem;
}

@media screen and (max-width: 768px) {
  .p-form__bar-item:last-child {
    flex-basis: 29.2%;
  }
}

.p-form__bar-item:last-child::after {
  display: none;
}

.p-form__bar-item.active {
  background-color: var(--color-primary);
  color: var(--color-white);
}

.p-form__bar-item.active::after {
  background-color: var(--color-primary);
}

.p-form__table {
  width: 100%;
}

.p-form__table-icon {
  font-size: 0.875rem;
  color: var(--color-white);
  background-color: var(--color-accent-orange);
  border-radius: 0.3125rem;
  padding: 0.125rem 0.3125rem 0.25rem;
  margin-left: 0.625rem;
}

@media screen and (max-width: 768px) {
  .p-form__table-icon {
    font-size: 3.59vw;
    padding: 0 1.28vw 0.26vw;
    margin-left: 2.56vw;
  }
}

.p-form__table-th,
.p-form__table-td {
  border-top: 1px solid var(--color-neutral-line-muted);
}

@media screen and (max-width: 768px) {

  .p-form__table-th,
  .p-form__table-td {
    display: block;
  }
}

.p-form__table-th {
  width: 36.2%;
  font-weight: 700;
  text-align: left;
  vertical-align: top;
  padding: 1.5625rem 0;
}

@media screen and (max-width: 768px) {
  .p-form__table-th {
    width: 100%;
    padding: 5.13vw 0 2.56vw 0;
    vertical-align: auto;
    font-size: 4.1vw;
  }
}

.p-form__table-td {
  width: 63.8%;
  padding: 1.25rem 0;
}

@media screen and (max-width: 768px) {
  .p-form__table-td {
    width: 100%;
    border-top: none;
    padding: 0 0 5.13vw 0;
    font-size: 3.59vw;
  }
}

.p-form__table-td input,
.p-form__table-td textarea {
  width: 100%;
  border: 1px solid var(--color-neutral-line-muted);
  border-radius: 0.3125rem;
  padding: 0 1.25rem;
  color: var(--color-text-primary);
}

@media screen and (max-width: 768px) {

  .p-form__table-td input,
  .p-form__table-td textarea {
    padding: 0 5.13vw;
  }
}

.p-form__table-td input::-moz-placeholder,
.p-form__table-td textarea::-moz-placeholder {
  color: var(--color-neutral-line-muted);
}

.p-form__table-td input::-moz-placeholder, .p-form__table-td textarea::-moz-placeholder {
  color: var(--color-neutral-line-muted);
}

.p-form__table-td input::placeholder,
.p-form__table-td textarea::placeholder {
  color: var(--color-neutral-line-muted);
}

.p-form__table-td input {
  height: 3.125rem;
}

@media screen and (max-width: 768px) {
  .p-form__table-td input {
    height: 12.82vw;
    font-size: 16px;
  }
}

.p-form__table-td textarea {
  height: 10rem;
  padding: 0.9375rem;
}

@media screen and (max-width: 768px) {
  .p-form__table-td textarea {
    height: 41.03vw;
    padding: 2.56vw 5.13vw;
    font-size: 16px;
  }
  .p-form__table tr:last-child .p-form__table-td {
    padding-bottom: 0;
  }
}

.p-form_radio-item label {
  position: relative;
  padding-left: 1.875rem;
}

@media screen and (max-width: 768px) {
  .p-form_radio-item label {
    padding-left: 6.41vw;
  }
}

.p-form_radio-item label::before,
.p-form_radio-item label::after {
  content: "";
  position: absolute;
  top: 55%;
  transform: translateY(-50%);
}

.p-form_radio-item label::before {
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 1.5rem;
  border: 1px solid var(--color-neutral-line-muted);
  left: 0;
}

@media screen and (max-width: 768px) {
  .p-form_radio-item label::before {
    width: 5.13vw;
    height: 5.13vw;
    border-radius: 5.13vw;
  }
}

.p-form_radio-item input:checked~label::after {
  width: 0.75rem;
  height: 0.75rem;
  border-radius: 0.75rem;
  background-color: var(--color-primary);
  left: 0.34375rem;
}

@media screen and (max-width: 768px) {
  .p-form_radio-item input:checked~label::after {
    width: 3.08vw;
    height: 3.08vw;
    border-radius: 3.08vw;
    left: 1vw;
  }
}

.p-form_radio-item+.p-form_radio-item {
  margin-top: 0.9375rem;
}

@media screen and (max-width: 768px) {
  .p-form_radio-item+.p-form_radio-item {
    margin-top: 3.85vw;
  }
}

.p-form__agree {
  width: 25rem;
  margin: 0 auto;
}

@media screen and (max-width: 768px) {
  .p-form__agree {
    width: 100%;
  }
}

.p-form__agree label {
  font-size: 1rem;
  position: relative;
  padding: 0.875rem 1rem 1rem 3.125rem;
  background-color: var(--color-neutral-gray-100);
  display: block;
  font-weight: 700;
}

@media screen and (max-width: 768px) {
  .p-form__agree label {
    font-size: 3.59vw;
    padding: 3.59vw;
    padding-left: 10.26vw;
  }
}

.p-form__agree label::before,
.p-form__agree label::after {
  content: "";
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

.p-form__agree label::before {
  width: 1.25rem;
  height: 1.25rem;
  border: 1px solid var(--color-neutral-line-muted);
  border-radius: 0.3125rem;
  background-color: var(--color-white);
  left: 1.25rem;
}

@media screen and (max-width: 768px) {
  .p-form__agree label::before {
    width: 4.62vw;
    height: 4.62vw;
    left: 2.56vw;
  }
}

.p-form__agree input:checked~label::after {
  width: 0.75rem;
  height: 0.375rem;
  border-left: 2px solid var(--color-primary);
  border-bottom: 2px solid var(--color-primary);
  transform: rotate(-45deg);
  left: 1.5625rem;
  top: 42%;
}

@media screen and (max-width: 768px) {
  .p-form__agree input:checked~label::after {
    width: 3.08vw;
    height: 1.54vw;
    left: 3.85vw;
  }
}

.p-form__button {
  width: 25rem;
  margin: 3.125rem auto 0;
  position: relative;
}

@media screen and (max-width: 768px) {
  .p-form__button {
    width: 100%;
    margin: 7.69vw auto 0;
  }
}

.p-form__button::after {
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  position: absolute;
  top: 50%;
  right: 1.5625rem;
  border-top: 2px solid var(--color-white);
  border-right: 2px solid var(--color-white);
  transform: rotate(45deg) translateY(-50%);
}

@media screen and (max-width: 768px) {
  .p-form__button::after {
    width: 1.9vw;
    height: 1.9vw;
    right: 6.41vw;
  }
}

.p-form__button-submit {
  font-weight: 700;
  width: 100%;
  color: var(--color-white);
  background-color: var(--color-accent-pink);
  height: 3.75rem;
  border-radius: 3.75rem;
  letter-spacing: 0.1em;
  position: relative;
}

@media screen and (min-width: 769px),
print {
  .p-form__button-submit {
    font-size: 1.125rem;
  }
}

@media screen and (max-width: 768px) {
  .p-form__button-submit {
    font-size: 4.62vw;
    height: 15.38vw;
    border-radius: 15.38vw;
  }
}

.p-form__button-download {
  position: relative;
}

.p-form__button-download>a {
  width: 100%;
  display: block;
  text-align: center;
  color: var(--color-accent-pink);
  border: 1px solid var(--color-accent-pink);
  height: 3.75rem;
  border-radius: 3.75rem;
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: 700;
}

@media screen and (min-width: 769px),
print {
  .p-form__button-download>a {
    font-size: 1.125rem;
  }
}

@media screen and (max-width: 768px) {
  .p-form__button-download>a {
    font-size: 5.13vw;
    height: 16.15vw;
    border-radius: 16.15vw;
  }
}

.p-form__button.no_active .p-form__button-submit {
  background-color: var(--color-neutral-line-muted);
  pointer-events: none;
}

.p-form.complete .p-form__button {
  margin-bottom: 3.125rem;
}

.p-form.complete .p-form__button::after {
  content: "";
  width: 1rem;
  height: 1rem;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 1.5625rem;
  background: url(../img/common/ico_download01.png) center/contain no-repeat;
}

@media screen and (max-width: 768px) {
  .p-form.complete .p-form__button::after {
    width: 4.1vw;
    height: 4.1vw;
    right: 6.41vw;
  }
}

.p-form__subttl {
  text-align: center;
  font-size: 1.75rem;
  margin-bottom: 3.125rem;
}

@media screen and (max-width: 768px) {
  .p-form__subttl {
    font-size: 6.15vw;
    margin-bottom: 7.69vw;
  }
}

.p-form__thank-ttl {
  margin-top: 3.125rem;
  margin-bottom: 0.3125rem;
  font-size: 1rem;
  font-weight: 700;
}

@media screen and (max-width: 768px) {
  .p-form__thank-ttl {
    margin-top: 7.69vw;
    margin-bottom: 1vw;
    font-size: 4.1vw;
  }
}

/*------------------------------------------------------------
 * Fixed CTA Banner Styles
------------------------------------------------------------*/

@keyframes shine {
  80% {
    transform: translateX(-100%);
    opacity: 0;
  }
  90% {
    opacity: 0.5;
  }
  100% {
    transform: translateX(100%);
    opacity: 0;
  }
}

/* Container Styles */

.u-fixedCtaBanner {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100vw;
  padding: 0.5rem 0 1.25rem;
  background: #fff;
  box-shadow: 0 -0.625rem 0.9375rem rgba(48, 50, 53, 0.1);
  transition: opacity 0.6s ease, transform 0.6s ease;
  opacity: 1;
  transform: translateY(0);
  z-index: 1000;
}

.u-fixedCtaBanner.is-show {
  opacity: 0;
  transform: translateY(100%);
}

.u-fixedCtaBanner__inner {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  gap: 0.9375rem;
  width: 80rem;
  margin: 2.5rem auto 0;
  overflow: initial;
  padding: 0;
}

@media screen and (max-width: 768px) {
  .u-fixedCtaBanner {
    padding: 0 0 5.13vw;
  }

  .u-fixedCtaBanner__inner {
    flex-direction: column;
    gap: 0;
    margin-top: 0;
    width: calc(100% - 8.21vw);
  }
}

/* Content Styles */

.u-fixedCtaBanner__content {
  width: 34%;
  position: relative;
  padding-top: 1rem;
}

.u-fixedCtaBanner__content-caption {
  font-size: 0.75rem;
  line-height: 1.3;
  text-align: left;
  color: #6d7785;
  margin-top: 0.75rem;
  letter-spacing: -0.0004rem;
}

.u-fixedCtaBanner__content-due-date {
  position: absolute;
  top: -2.625rem;
  left: 0;
  z-index: 1;
  width: 100%;
}

.u-fixedCtaBanner__content-due-date::before {
  content: "";
  position: absolute;
  bottom: -0.625rem;
  background: #169edd;
  height: 0.9742785793rem;
  width: 1.25rem;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  left: 50%;
  transform: translateX(-50%);
}

.u-fixedCtaBanner__content-due-date-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  width: 100%;
  background: #169edd;
  height: 2.8rem;
  border-radius: 1.4rem;
  font-size: 1.28rem;
}

.u-fixedCtaBanner__content-due-date-txt {
  font-weight: 700;
  font-size: 1.85rem;
  letter-spacing: 0.02rem;
}

.u-fixedCtaBanner__content-due-date-by {
  font-size: 1.25rem;
  margin-left: 0.2rem;
  margin-bottom: -0.2rem;
}

@media screen and (max-width: 768px) {
  .u-fixedCtaBanner__content {
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
    gap: 2.05vw;
    padding-top: 2.56vw;
  }

  .u-fixedCtaBanner__content-img {
    width: auto;
  }

  .u-fixedCtaBanner__content-caption {
    width: 100vw;
    margin-top: 0;
  }

  .u-fixedCtaBanner__content-caption-item {
    font-size: 2.05vw;
    line-height: 1.5;
    display: block;
  }

  .u-fixedCtaBanner__content-due-date {
    top: -7.69vw;
    left: -4.105vw;
    width: calc(100% + 8.21vw);
  }

  .u-fixedCtaBanner__content-due-date::before {
    display: none;
  }

  .u-fixedCtaBanner__content-due-date-inner {
    border-radius: 0;
    height: 7.69vw;
  }

  .u-fixedCtaBanner__content-due-date-txt {
    font-size: 4.61vw;
  }

  .u-fixedCtaBanner__content-due-date-by {
    font-size: 3.59vw;
    margin-left: 0.51vw;
    margin-bottom: -0.51vw;
  }
}

@media screen and (min-width: 1280px) {
  .u-fixedCtaBanner__content-caption {
    font-size: 0.8rem;
  }

  .u-fixedCtaBanner__content-due-date-inner {
    font-size: 1rem;
  }

  .u-fixedCtaBanner__content-due-date-txt {
    font-size: 1.65rem;
    letter-spacing: 0.02rem;
  }

  .u-fixedCtaBanner__content-due-date-by {
    font-size: 1.25rem;
    margin-left: 0.2rem;
    margin-bottom: -0.2rem;
  }
}

/* Button Styles */

.u-fixedCtaBanner__btn-wrapper {
  width: 66%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  gap: 0.9375rem;
}

.u-fixedCtaBanner__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  border-radius: 6.25rem;
  font-size: 1.75rem;
  font-weight: 700;
  padding: 0.9375rem;
  position: relative;
  cursor: pointer;
  transition: opacity 0.3s;
  line-height: 1.3;
  text-align: center;
  height: 70px;
  width: 50%;
}

.u-fixedCtaBanner__btn.is-primary {
  background: #f04e79;
  border: 1px solid #fff;
  color: #fff;
}

.u-fixedCtaBanner__btn.is-secondary {
  background: #fff;
  border: 1px solid #f04e79;
  color: #f04e79;
}

.u-fixedCtaBanner__btn-caption {
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1.3;
  text-align: center;
}

.u-fixedCtaBanner__btn *:hover {
  opacity: 0.8;
}

.u-fixedCtaBanner__btn *:before,
.u-fixedCtaBanner__btn *:after {
  pointer-events: none;
}

.u-fixedCtaBanner__btn *:before {
  content: "";
  width: 100%;
  height: 100%;
  background: linear-gradient(
    to right,
    rgba(255, 255, 255, 0),
    rgba(255, 255, 255, 0.5),
    rgba(255, 255, 255, 0)
  );
  animation: shine 5s ease-in-out infinite;
  position: absolute;
  top: 0;
  left: 0;
  transform: translateX(-100%);
  opacity: 0;
}

@media screen and (max-width: 768px) {
  .u-fixedCtaBanner__btn-wrapper {
    width: 100%;
    gap: 2.05vw;
    margin-top: 2.05vw;
  }

  .u-fixedCtaBanner__btn {
    height: 11.28vw;
    font-size: 3.59vw;
    padding: 0;
  }

  .u-fixedCtaBanner__btn-caption {
    font-size: 2.56vw;
  }
}

/*------------------------------------------------------------
 * Modal CTA Styles
------------------------------------------------------------*/

@media screen and (min-width: 769px),
print {
  .p-mdlcta {
    width: 33.4375rem;
  }
}

.p-mdlcta--usage .p-mdlcta__ttl {
  margin-bottom: 1.25rem;
}

.p-mdlcta--inquiry .p-mdlcta__ttl {
  margin-bottom: 1.25rem;
}

.p-mdlcta--apply .p-mdlcta__ttl {
  margin-bottom: 2.5rem;
}

.p-mdlcta__ttl {
  text-align: center;
  background: var(--color-white);
  color: var(--color-text-primary);
  border: 1px solid var(--color-text-primary);
  position: relative;
  border-radius: 0.5rem;
  font-weight: 700;
  font-size: 1.25rem;
  padding: 0.3125rem 0.625rem;
  letter-spacing: 0;
}

@media screen and (max-width: 768px) {
  .p-mdlcta__ttl {
    border-radius: 1.54vw;
    font-size: 3.59vw;
    padding: 1.28vw;
  }
}

.p-mdlcta__ttl:before {
  display: block;
  width: 0.9375rem;
  aspect-ratio: 1;
  background: var(--color-white);
  transform: rotate(45deg) skew(10deg, 10deg) translate(-50%, 0%);
  border-right: 1px solid var(--color-text-primary);
  border-bottom: 1px solid var(--color-text-primary);
  position: absolute;
  left: 50%;
  top: 100%;
  content: "";
}

.p-mdlcta__tel {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

@media screen and (max-width: 768px) {
  .p-mdlcta__tel {
    text-align: center;
  }
}

.p-mdlcta__tel a {
  color: var(--color-accent-pink);
  font-size: 2.875rem;
  letter-spacing: -0.015em;
  line-height: 1;
}

@media screen and (max-width: 768px) {
  .p-mdlcta__tel a {
    font-size: 8.97vw;
    letter-spacing: 0;
  }
}

.p-mdlcta__tel a:before {
  background: url(../img/common/ico_phone03.svg) center/contain no-repeat;
  width: 2.5rem;
  aspect-ratio: 1;
  margin-bottom: -0.125rem;
  display: inline-block;
  margin-right: 0.3125rem;
  content: "";
}

@media screen and (max-width: 768px) {
  .p-mdlcta__tel a:before {
    width: 7.69vw;
  }
}

.p-mdlcta__tel-time {
  color: var(--color-text-secondary);
  font-size: 0.9375rem;
  letter-spacing: 0.06em;
  margin-top: 0.3125rem;
}

@media screen and (max-width: 768px) {
  .p-mdlcta__tel-time {
    font-size: 3.08vw;
    margin-top: 1.28vw;
  }
}

.p-mdlcta__txt {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  margin: 0.625rem 1.875rem;
  text-align: center;
  font-weight: 500;
  letter-spacing: 0.03em;
  font-size: 1.4375rem;
}

@media screen and (max-width: 768px) {
  .p-mdlcta__txt {
    gap: 5.13vw;
    font-size: 4.62vw;
    margin: 3.85vw 5.13vw;
  }
}

.p-mdlcta__txt:before,
.p-mdlcta__txt:after {
  width: auto;
  height: 1px;
  flex-grow: 1;
  background: var(--color-separator);
  content: "";
}

.p-mdlcta__btn {
  position: relative;
}

.p-mdlcta__btn a {
  color: var(--color-accent-pink);
  border: 1px solid var(--color-accent-pink);
  background: var(--color-white);
  height: 5.9375rem;
  border-radius: 5.9375rem;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  flex-direction: column;
  position: relative;
  font-size: 1.5625rem;
  line-height: 1.4;
  font-weight: 700;
}

@media screen and (max-width: 768px) {
  .p-mdlcta__btn a {
    font-size: 4.62vw;
    height: 19.23vw;
    border-radius: 19.23vw;
    letter-spacing: 0;
  }
}

.p-mdlcta__btn a:after {
  width: 0.625rem;
  aspect-ratio: 1;
  border-top: 2px solid var(--color-accent-pink);
  border-right: 2px solid var(--color-accent-pink);
  position: absolute;
  top: 50%;
  right: 2.1875rem;
  transform: rotate(45deg) translate(0%, -50%);
  content: "";
}

@media screen and (max-width: 768px) {
  .p-mdlcta__btn a:after {
    width: 2.56vw;
    right: 6.41vw;
  }
}

.p-mdlcta__btn a[href*="#"]:after {
  right: 2.5rem;
  transform: rotate(135deg) translate(calc(-50% - 0.3125rem), 0%);
}

@media screen and (max-width: 768px) {
  .p-mdlcta__btn a[href*="#"]:after {
    right: 6.41vw;
    transform: rotate(135deg) translate(calc(-50% - 1.28vw), 0%);
  }
}

.p-mdlcta__btn a span {
  font-size: 1.125rem;
  font-weight: 400;
  letter-spacing: -0.02em;
  margin-top: 0.1875rem;
}

@media screen and (max-width: 768px) {
  .p-mdlcta__btn a span {
    font-size: 3.59vw;
    margin-top: 0.77vw;
  }
}

.p-mdlcta__btn-label {
  background: var(--color-accent-pink);
  color: var(--color-white);
  border-radius: 0.5rem;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -55%);
  font-size: 1.125rem;
  font-weight: 700;
  letter-spacing: 0;
  text-align: center;
  padding: 0 0.3125rem 0.125rem;
  display: block;
  z-index: 1;
  width: 20rem;
}

@media screen and (max-width: 768px) {
  .p-mdlcta__btn-label {
    border-radius: 1.28vw;
    font-size: 3.59vw;
    padding: 0.51vw 1.28vw 0;
    width: 85%;
  }
}

/**
 * Footer
 */

.c-footer {
  padding: 60px 20px 80px;
  background: var(--color-neutral-gray-bg);
  line-height: 1.3;
  letter-spacing: 0.06em;
}

.c-footer.is-layout-constrained > .alignwide {
  max-width: 1240px;
  margin-left: auto !important;
  margin-right: auto !important;
}

.c-footer .footer-container {
  display: flex;
  justify-content: space-between;
}

.c-footer .footer-main .footer-logo {
  max-width: 160px;
}

.c-footer .footer-main .footer-sub-menu {
  margin-top: 28px;
}

.c-footer .footer-main .footer-sub-menu ul {
  padding: 0;
  list-style: none;
}

.c-footer .footer-main .footer-sub-menu ul li {
  margin-bottom: 8px;
}

.c-footer .footer-main .footer-sub-menu ul li a {
  display: inline-block;
  color: var(--wp--preset--color--contrast);
  font-size: 12px;
  font-weight: 400;
}

.c-footer .footer-main .footer-sub-menu ul li:last-child {
  margin-bottom: 0;
}

.c-footer .footer-main .sns {
  margin-top: 48px;
}

.c-footer .footer-main .sns a {
  display: inline-block;
  max-width: 29px;
  margin-right: 24px;
}

.c-footer .footer-main .sns a:last-child {
  margin-right: 0;
}

.c-footer .footer-main.-mobile {
  display: none;
}

.c-footer .footer-sitemap.-sp {
  display: none;
}

.c-footer .footer-sitemap ul {
  padding: 0;
  list-style: none;
  margin: 0;
}

.c-footer .footer-sitemap ul li a {
  color: var(--wp--preset--color--contrast);
}

.c-footer .footer-sitemap ul li a:hover {
  text-decoration: none;
}

.c-footer .footer-sitemap > ul > li > a {
  font-size: 16px;
  font-weight: 700;
}

.c-footer .footer-sitemap > ul > li ul li a {
  font-size: 14px;
  font-weight: 400;
}

.c-footer .copyright {
  margin-top: 44px;
  font-size: 11px;
}

.c-footer.-magazine {
  padding-top: 24px;
  padding-bottom: 20px;
}

.c-footer.-magazine .footer-container {
  display: block;
  max-width: 960px;
  margin: 0 auto;
}

.c-footer.-magazine .footer-container .footer-menu ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 20px;
  padding: 0;
  list-style: none;
}

.c-footer.-magazine .footer-container .footer-menu ul li a {
  color: var(--wp--preset--color--contrast);
  font-size: 12px;
  font-weight: 400;
}

.c-footer.-magazine .footer-container .footer-logo {
  display: none;
}

.c-footer.-magazine .footer-container .copyright {
  margin-top: 40px;
  font-weight: 400;
  text-align: center;
}

@media screen and (min-width: 1024px) {
  .c-footer .footer-main.-pc {
    width: 30%;
    border-right: 1px solid var(--wp--preset--color--base);
    padding-right: clamp(40px, calc(2.5rem + ((1vw - 10.25px) * 9.3023)), 60px);
  }

  .c-footer .footer-sitemap {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    width: 70%;
    padding-left: clamp(46px, calc(2.875rem + ((1vw - 10.25px) * 5.7831)), 70px);
  }

  .c-footer .footer-sitemap > ul {
    width: 30%;
    margin-bottom: 64px;
  }

  .c-footer .footer-sitemap > ul.home-link {
    width: 100%;
    margin-bottom: 26px;
  }

  .c-footer .footer-sitemap > ul > li {
    margin-top: 24px;
  }

  .c-footer .footer-sitemap > ul > li:first-child {
    margin-top: 0;
  }

  .c-footer .footer-sitemap > ul > li ul {
    margin-top: 20px;
  }

  .c-footer .footer-sitemap > ul > li ul li {
    margin-top: 10px;
  }
}

@media screen and (max-width: 1023px) {
  .c-footer {
    padding: 0 20px 35px;
  }

  .c-footer .footer-container {
    display: block;
  }

  .c-footer .footer-main .footer-logo {
    max-width: 130px;
    margin: 40px auto 0;
  }

  .c-footer .footer-main .footer-sub-menu {
    margin-top: 26px;
  }

  .c-footer .footer-main .footer-sub-menu ul li {
    margin-bottom: 15px;
  }

  .c-footer .footer-main .sns {
    margin-top: 28px;
    text-align: center;
  }

  .c-footer .footer-main .sns a {
    max-width: 40px;
  }

  .c-footer .footer-main.-pc {
    display: none;
  }

  .c-footer .footer-main.-mobile {
    display: block;
  }

  .c-footer .footer-sitemap {
    display: none;
  }

  .c-footer .footer-sitemap.-sp {
    display: block;
  }

  .c-footer .footer-sitemap ul li a {
    position: relative;
    display: flex;
    align-items: center;
  }

  .c-footer .footer-sitemap > ul > li {
    border-bottom: 1px solid #fff;
  }

  .c-footer .footer-sitemap > ul > li > a {
    justify-content: space-between;
    padding: 16px 0;
  }

  .c-footer .footer-sitemap > ul > li > a i {
    position: relative;
    display: inline-block;
    width: 16px;
    height: 16px;
  }

  .c-footer .footer-sitemap > ul > li > a i::before {
    content: "";
    display: inline-block;
    position: absolute;
    top: calc(50% - 5px);
    right: 2px;
    width: 8px;
    height: 8px;
    border-top: 2px solid var(--wp--preset--color--contrast, #333);
    border-right: 2px solid var(--wp--preset--color--contrast, #333);
    transform: rotate(45deg);
  }

  .c-footer .footer-sitemap > ul > li ul {
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    height: 0;
    padding: 0 20px;
    background-color: var(--wp--preset--color--base);
    transition: all 0.2s ease;
  }

  .c-footer .footer-sitemap > ul > li ul li {
    position: relative;
    margin-bottom: 17px;
    padding-left: 16px;
  }

  .c-footer .footer-sitemap > ul > li ul li:before {
    content: "";
    display: inline-block;
    position: absolute;
    top: calc(50% - 3px);
    left: 0;
    clip-path: polygon(0 0, 100% 50%, 0 100%);
    width: 6px;
    height: 7px;
    background-color: var(--wp--preset--color--contrast, #333);
  }

  .c-footer .footer-sitemap > ul > li ul li:last-child {
    margin-bottom: 0;
  }

  .c-footer .footer-sitemap > ul.js-has-child > li > a i::before,
  .c-footer .footer-sitemap > ul.js-has-child > li > a i::after {
    content: "";
    position: absolute;
    top: 8px;
    right: -1px;
    left: auto;
    z-index: 1;
    width: 16px;
    height: 2px;
    border: none;
    border-radius: 1px;
    background: var(--wp--preset--color--contrast, #333);
    transform: none;
    transition: transform 0.3s linear;
  }

  .c-footer .footer-sitemap > ul.js-has-child > li > a i::after {
    transform: rotate(90deg);
  }

  .c-footer .footer-sitemap > ul.js-has-child.-js-opened > li > a i::after {
    transform: rotate(0deg);
  }

  .c-footer .footer-sitemap > ul.js-has-child.-js-opened > li ul {
    opacity: 1;
    visibility: visible;
    height: auto;
    padding: 20px;
    background-color: #fff;
  }

  .c-footer .copyright {
    margin-top: 40px;
    text-align: center;
  }

  .c-footer.-magazine .footer-container .footer-menu ul {
    justify-content: flex-start;
    flex-direction: column;
    gap: 15px;
  }

  .c-footer.-magazine .footer-container .footer-logo {
    display: block;
    max-width: 200px;
    margin: 50px auto 0;
  }

  .c-footer.-magazine .footer-container .copyright {
    margin-top: 30px;
  }
}

/**
 * Pagetop
 */

.pagetop {
  position: fixed;
  bottom: 0;
  right: 0;
  z-index: 90;
  margin: 0;
  padding: 18px 20px;
  width: 60px;
  height: 60px;
  background: var(--color-pagetop-bg);
  cursor: pointer;
}

.pagetop:before {
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 16px;
  height: 16px;
  border-top: 2px solid var(--color-white);
  border-right: 2px solid var(--color-white);
  transform: rotate(-45deg);
  margin: -4px 0 0 -8px;
}

/**
 * Bento Links Component
 * Figmaデザインに基づくBento UIスタイルのリンク集
 */

/* ========================================
   Section Container
   ======================================== */

.c-bento-links {
  padding: var(--section-padding-y) 0;
}

@media screen and (max-width: 768px) {
  .c-bento-links {
    padding: var(--section-padding-y-mobile) 0;
  }
}

/* ========================================
   Section Header
   ======================================== */

.c-bento-links__header {
  margin-bottom: 2rem;
}

@media screen and (max-width: 768px) {
  .c-bento-links__header {
    margin-bottom: 5.13vw;
  }
}

/* ========================================
   Bento Grid
   ======================================== */

.c-bento-links__grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: repeat(3, 1fr);
  gap: 0.75rem;
  aspect-ratio: 1000 / 506;
}

@media screen and (max-width: 768px) {
  .c-bento-links__grid {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    gap: 3.85vw;
    aspect-ratio: auto;
  }
}

/* ========================================
   Card Base
   ======================================== */

.c-bento-links__card {
  position: relative;
  overflow: hidden;
  border-radius: 0.625rem;
  border: 1px solid var(--color-text-secondary);
  background-color: var(--color-white);
  box-shadow: 0 1px 0 1px rgba(109, 119, 133, 0.1);
  text-decoration: none;
  display: flex;
  flex-direction: column;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast);
}

.c-bento-links__card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(109, 119, 133, 0.15);
  border-color: var(--color-primary);
}

/* Active State */

.c-bento-links__card.is-active {
  border-color: var(--color-primary);
}

/* ========================================
   Card Sizes
   ======================================== */

/* Large Card (2x2) - 上段の大きいカード */

.c-bento-links__card--large {
  grid-column: span 2;
  grid-row: span 2;
}

/* Wide Card (3x1) - 下段の横長カード */

.c-bento-links__card--wide {
  grid-column: span 3;
  grid-row: span 1;
}

/* ========================================
   Card Image
   ======================================== */

.c-bento-links__card-image {
  position: relative;
  flex: 1;
  min-height: 0;
  background-color: var(--color-primary-tint-1);
  overflow: hidden;
}

.c-bento-links__card-image > picture {
  display: block;
  width: 100%;
  height: 100%;
}

.c-bento-links__card-image > picture > img,
.c-bento-links__card-image > img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center center;
     object-position: center center;
}

/* Wide card layout - horizontal */

.c-bento-links__card--wide {
  flex-direction: row;
}

.c-bento-links__card--wide .c-bento-links__card-image {
  flex: 0 0 60%;
}

.c-bento-links__card--wide .c-bento-links__card-image > picture > img,
.c-bento-links__card--wide .c-bento-links__card-image > img {
  -o-object-position: center center;
     object-position: center center;
}

@media screen and (max-width: 768px) {
  .c-bento-links__card--large,
  .c-bento-links__card--wide {
    grid-column: 1;
    grid-row: auto;
  }

  .c-bento-links__card--wide .c-bento-links__card-image {
    flex: 0 0 35%;
    min-height: 30vw;
  }

  .c-bento-links__card--wide .c-bento-links__card-content {
    flex: 1;
    flex-direction: row;
    align-items: flex-end;
  }
}

/* ========================================
   Media Images (for magazine cards)
   ======================================== */

.c-bento-links__media-images {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: -1rem;
  height: 100%;
  padding: 0.75rem;
}

.c-bento-links__media-img {
  height: 85%;
  width: auto;
  -o-object-fit: contain;
     object-fit: contain;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  border-radius: 2px;
}

.c-bento-links__media-img--rotate-left {
  transform: rotate(-12deg);
  margin-right: -1.5rem;
  z-index: 1;
}

.c-bento-links__media-img--rotate-right {
  transform: rotate(12deg);
  margin-left: -1.5rem;
  z-index: 1;
}

/* ========================================
   Card Content
   ======================================== */

.c-bento-links__card-content {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  background-color: var(--color-white);
  padding: 1.25rem 1rem 1rem;
  flex-shrink: 0;
}

.c-bento-links__card--wide .c-bento-links__card-content {
  flex: 1;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  padding: 1.5rem 1rem 1rem;
}

@media screen and (max-width: 768px) {
  .c-bento-links__card-content {
    padding: 3.85vw;
  }

  .c-bento-links__card--wide .c-bento-links__card-content {
    flex: 1;
    padding: 3.85vw;
  }
}

/* ========================================
   Card Text
   ======================================== */

.c-bento-links__card-text {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  flex: 1;
  padding-bottom: 0.5rem;
}

.c-bento-links__card--wide .c-bento-links__card-text {
  align-items: flex-start;
  padding-bottom: 0;
}

.c-bento-links__card--wide .c-bento-links__card-arrow {
  align-self: flex-end;
}

.c-bento-links__card-title {
  font-size: var(--text-xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
  line-height: 1.5;
  letter-spacing: 0.05em;
  margin: 0;
}

.c-bento-links__card-link {
  font-size: var(--text-sm);
  color: var(--color-primary);
  line-height: 1.4;
}

@media screen and (max-width: 768px) {
  .c-bento-links__card-title {
    font-size: 4.62vw;
  }

  .c-bento-links__card-link {
    font-size: 3.33vw;
  }
}

/* ========================================
   Card Arrow Button
   ======================================== */

.c-bento-links__card-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  background-color: var(--color-neutral-bg-subtle);
  color: var(--color-text-secondary);
  flex-shrink: 0;
  transition: background-color var(--transition-fast), color var(--transition-fast);
}

.c-bento-links__card-arrow svg {
  width: 1.5rem;
  height: 1.5rem;
}

/* Active card arrow */

.c-bento-links__card.is-active .c-bento-links__card-arrow {
  background-color: var(--color-primary);
  color: var(--color-white);
}

/* Hover state */

.c-bento-links__card:hover .c-bento-links__card-arrow {
  background-color: var(--color-primary);
  color: var(--color-white);
}

@media screen and (max-width: 768px) {
  .c-bento-links__card-arrow {
    width: 8vw;
    height: 8vw;
  }

  .c-bento-links__card--wide .c-bento-links__card-arrow {
    align-self: center;
  }

  .c-bento-links__card-arrow svg {
    width: 5.13vw;
    height: 5.13vw;
  }

  .c-bento-links__card-text {
    gap: 0.6rem;
  }

  .c-bento-links__card--wide .c-bento-links__card-text {
    align-self: center;
  }

  .c-bento-links__card-content {
    padding-bottom: 3vw;
  }

  .c-bento-links__card--wide .c-bento-links__card-content {
    flex-direction: row;
  }
}

/* ========================================
   Card Caption
   ======================================== */

.c-bento-links__card-caption {
  position: absolute;
  bottom: 0.5rem;
  left: 1rem;
  z-index: 3;
  font-size: 0.5rem;
  color: var(--color-white);
  letter-spacing: 0.05em;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

@media screen and (max-width: 768px) {
  .c-bento-links__card-caption {
    font-size: 2.56vw;
    bottom: 2.56vw;
    left: 3.85vw;
  }
}

/* ========================================
   2. Tailwind Directives
   ======================================== */

*, ::before, ::after{
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
  --tw-contain-size:  ;
  --tw-contain-layout:  ;
  --tw-contain-paint:  ;
  --tw-contain-style:  ;
}

::backdrop{
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
  --tw-contain-size:  ;
  --tw-contain-layout:  ;
  --tw-contain-paint:  ;
  --tw-contain-style:  ;
}

/*! tailwindcss v3.4.19 | MIT License | https://tailwindcss.com
 */

/*
1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
*/

*,
::before,
::after {
  box-sizing: border-box; /* 1 */
  border-width: 0; /* 2 */
  border-style: solid; /* 2 */
  border-color: #e5e7eb; /* 2 */
}

::before,
::after {
  --tw-content: '';
}

/*
1. Use a consistent sensible line-height in all browsers.
2. Prevent adjustments of font size after orientation changes in iOS.
3. Use a more readable tab size.
4. Use the user's configured `sans` font-family by default.
5. Use the user's configured `sans` font-feature-settings by default.
6. Use the user's configured `sans` font-variation-settings by default.
7. Disable tap highlights on iOS
*/

html,
:host {
  line-height: 1.5; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
  -moz-tab-size: 4; /* 3 */
  -o-tab-size: 4;
     tab-size: 4; /* 3 */
  font-family: var(--font-family-sans); /* 4 */
  font-feature-settings: normal; /* 5 */
  font-variation-settings: normal; /* 6 */
  -webkit-tap-highlight-color: transparent; /* 7 */
}

/*
1. Remove the margin in all browsers.
2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.
*/

body {
  margin: 0; /* 1 */
  line-height: inherit; /* 2 */
}

/*
1. Add the correct height in Firefox.
2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
3. Ensure horizontal rules are visible by default.
*/

hr {
  height: 0; /* 1 */
  color: inherit; /* 2 */
  border-top-width: 1px; /* 3 */
}

/*
Add the correct text decoration in Chrome, Edge, and Safari.
*/

abbr:where([title]) {
  -webkit-text-decoration: underline dotted;
          text-decoration: underline dotted;
}

/*
Remove the default font size and weight for headings.
*/

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-weight: inherit;
}

/*
Reset links to optimize for opt-in styling instead of opt-out.
*/

a {
  color: inherit;
  text-decoration: inherit;
}

/*
Add the correct font weight in Edge and Safari.
*/

b,
strong {
  font-weight: bolder;
}

/*
1. Use the user's configured `mono` font-family by default.
2. Use the user's configured `mono` font-feature-settings by default.
3. Use the user's configured `mono` font-variation-settings by default.
4. Correct the odd `em` font sizing in all browsers.
*/

code,
kbd,
samp,
pre {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; /* 1 */
  font-feature-settings: normal; /* 2 */
  font-variation-settings: normal; /* 3 */
  font-size: 1em; /* 4 */
}

/*
Add the correct font size in all browsers.
*/

small {
  font-size: 80%;
}

/*
Prevent `sub` and `sup` elements from affecting the line height in all browsers.
*/

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/*
1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
3. Remove gaps between table borders by default.
*/

table {
  text-indent: 0; /* 1 */
  border-color: inherit; /* 2 */
  border-collapse: collapse; /* 3 */
}

/*
1. Change the font styles in all browsers.
2. Remove the margin in Firefox and Safari.
3. Remove default padding in all browsers.
*/

button,
input,
optgroup,
select,
textarea {
  font-family: inherit; /* 1 */
  font-feature-settings: inherit; /* 1 */
  font-variation-settings: inherit; /* 1 */
  font-size: 100%; /* 1 */
  font-weight: inherit; /* 1 */
  line-height: inherit; /* 1 */
  letter-spacing: inherit; /* 1 */
  color: inherit; /* 1 */
  margin: 0; /* 2 */
  padding: 0; /* 3 */
}

/*
Remove the inheritance of text transform in Edge and Firefox.
*/

button,
select {
  text-transform: none;
}

/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Remove default button styles.
*/

button,
input:where([type='button']),
input:where([type='reset']),
input:where([type='submit']) {
  -webkit-appearance: button; /* 1 */
  background-color: transparent; /* 2 */
  background-image: none; /* 2 */
}

/*
Use the modern Firefox focus style for all focusable elements.
*/

:-moz-focusring {
  outline: auto;
}

/*
Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
*/

:-moz-ui-invalid {
  box-shadow: none;
}

/*
Add the correct vertical alignment in Chrome and Firefox.
*/

progress {
  vertical-align: baseline;
}

/*
Correct the cursor style of increment and decrement buttons in Safari.
*/

::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
  height: auto;
}

/*
1. Correct the odd appearance in Chrome and Safari.
2. Correct the outline style in Safari.
*/

[type='search'] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}

/*
Remove the inner padding in Chrome and Safari on macOS.
*/

::-webkit-search-decoration {
  -webkit-appearance: none;
}

/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Change font properties to `inherit` in Safari.
*/

::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}

/*
Add the correct display in Chrome and Safari.
*/

summary {
  display: list-item;
}

/*
Removes the default spacing and border for appropriate elements.
*/

blockquote,
dl,
dd,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
figure,
p,
pre {
  margin: 0;
}

fieldset {
  margin: 0;
  padding: 0;
}

legend {
  padding: 0;
}

ol,
ul,
menu {
  list-style: none;
  margin: 0;
  padding: 0;
}

/*
Reset default styling for dialogs.
*/

dialog {
  padding: 0;
}

/*
Prevent resizing textareas horizontally by default.
*/

textarea {
  resize: vertical;
}

/*
1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
2. Set the default placeholder color to the user's configured gray 400 color.
*/

input::-moz-placeholder, textarea::-moz-placeholder {
  opacity: 1; /* 1 */
  color: #9ca3af; /* 2 */
}

input::placeholder,
textarea::placeholder {
  opacity: 1; /* 1 */
  color: #9ca3af; /* 2 */
}

/*
Set the default cursor for buttons.
*/

button,
[role="button"] {
  cursor: pointer;
}

/*
Make sure disabled buttons don't get the pointer cursor.
*/

:disabled {
  cursor: default;
}

/*
1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
   This can trigger a poorly considered lint error in some tools but is included by design.
*/

img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
  display: block; /* 1 */
  vertical-align: middle; /* 2 */
}

/*
Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
*/

img,
video {
  max-width: 100%;
  height: auto;
}

/* Make elements with the HTML hidden attribute stay hidden by default */

[hidden]:where(:not([hidden="until-found"])) {
  display: none;
}

html {
    -webkit-text-size-adjust: 100%;
    font-size: 16px;
  }

@media (min-width: 768px) and (max-width: 1280px) {
    html {
      font-size: 1.07vw;
    }
  }

body{
  font-family: var(--font-family-sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
    font-weight: var(--font-weight-regular);
    font-size: var(--text-base);
    line-height: 1.4;
    color: var(--color-text-primary);
    letter-spacing: 0.1em;
    font-feature-settings: "palt";
}

a{
  text-decoration-line: none;
  transition-property: opacity;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 300ms;
    color: inherit;
}

@media (min-width: 769px) {
    a:hover {
      opacity: 0.8;
    }
  }

h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    line-height: 1.2;
  }

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

/* Container */

.l-container{
  margin-left: auto;
  margin-right: auto;
    max-width: var(--container-max-width);
}

@media (max-width: 768px) {
    .l-container {
      width: calc(100% - 10.26vw);
      padding: 0;
    }
  }

/* Wrapper */

.l-wrapper{
  overflow: hidden;
}

/* Main */

.l-main{
  display: block;
}

/* Contents */

.l-contents{
  overflow: hidden;
}

.block{
  display: block;
}

.inline{
  display: inline;
}

.table{
  display: table;
}

.hidden{
  display: none;
}

/* Hidden utilities */

@media (max-width: 768px) {
    .u-hidden-sp {
      display: none !important;
    }
  }

@media (min-width: 769px) {
    .u-hidden-pc {
      display: none !important;
    }
  }

/* Font utilities */

.ff-en {
    font-family: var(--font-family-latin);
    font-weight: var(--font-weight-regular);
  }

.ff-en-bld {
    font-family: var(--font-family-latin);
    font-weight: var(--font-weight-extrabold);
  }

/* Caption text */

.c-cap {
    color: var(--color-text-secondary);
    font-size: var(--text-xs);
    letter-spacing: 0.04em;
    line-height: 1.4;
  }

@media (max-width: 768px) {
    .c-cap {
      font-size: 2.82vw;
      line-height: 1.5;
    }
  }

/* ========================================
   3. Base Styles
   ======================================== */

/* ========================================
   4. Layout Classes
   ======================================== */

/* ========================================
   5. Utility Classes
   ======================================== */