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

/* ============================================================
   CSS Variables
============================================================ */
:root {
 --navy: #2d3a4a;
 --navy-dark: #1a2533;
 --navy-deeper: #111c27;
 --gold: #b8942a;
 --gold-light: #d4a843;
 --gold-pale: #f0e4c0;
 --cream: #faf8f3;
 --cream-dark: #f2ede3;
 --white: #ffffff;
 --text: #2a2a2a;
 --text-mid: #555555;
 --text-light: #888888;
 --border: #ddd5c5;
 --section-alt: #f5f2eb;

 --serif: "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", Georgia, serif;
 --sans: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;

 --ease: cubic-bezier(0.16, 1, 0.3, 1);
 --dur: 0.65s;
}

/* ============================================================
   Global resets for .home scope
============================================================ */
.home * {
 box-sizing: border-box;
}
.home em {
 font-style: normal;
}
.home img {
 max-width: 100%;
 height: auto;
 display: block;
}
.home ul {
 list-style: none;
 padding: 0;
 margin: 0;
}
.home a {
 text-decoration: none;
}

/* ============================================================
   Buttons
============================================================ */
.btn-line {
 display: inline-flex;
 align-items: center;
 gap: 9px;
 background: #06c755;
 color: #fff;
 font-family: var(--sans);
 font-size: 0.9rem;
 font-weight: 700;
 letter-spacing: 0.05em;
 padding: 14px 30px;
 border-radius: 50px;
 transition:
  background var(--dur) var(--ease),
  transform var(--dur) var(--ease);
}
.btn-line:hover {
 background: #059c43;
 transform: translateY(-2px);
 color: #fff;
}
.btn-line--lg {
 padding: 18px 44px;
 font-size: 1rem;
}

.btn-outline {
 display: inline-flex;
 align-items: center;
 gap: 8px;
 border: 1.5px solid rgba(255, 255, 255, 0.6);
 color: #fff;
 font-family: var(--sans);
 font-size: 0.88rem;
 font-weight: 700;
 letter-spacing: 0.06em;
 padding: 13px 28px;
 border-radius: 50px;
 transition: all 0.3s;
}
.btn-outline::after {
 content: "↓";
 font-size: 0.8em;
}
.btn-outline:hover {
 background: rgba(255, 255, 255, 0.15);
 color: #fff;
}

.btn-plan {
 display: block;
 text-align: center;
 border: 1.5px solid var(--navy);
 color: var(--navy);
 font-family: var(--sans);
 font-size: 0.84rem;
 font-weight: 700;
 letter-spacing: 0.03em;
 padding: 12px 16px;
 border-radius: 6px;
 transition: all 0.3s;
}
.btn-plan:hover {
 background: var(--navy);
 color: #fff;
}
.btn-plan--gold {
 border-color: var(--gold);
 color: var(--gold);
}
.btn-plan--gold:hover {
 background: var(--gold);
 color: #fff;
 border-color: var(--gold);
}

/* ============================================================
   Section Commons
============================================================ */
.section {
 padding: 80px 0;
}
@media (min-width: 768px) {
 .section {
  padding: 120px 0;
 }
}

.section__label {
 display: block;
 font-size: 10px;
 font-weight: 700;
 letter-spacing: 5px;
 color: var(--gold);
 margin-bottom: 10px;
 font-family: var(--sans);
}

.section__title {
 font-family: var(--serif);
 font-size: clamp(1.55rem, 3.5vw, 2.3rem);
 font-weight: 700;
 color: var(--navy);
 line-height: 1.55;
 margin-bottom: 14px;
}
.section__title span {
 color: var(--gold);
}

.section__desc {
 font-size: 0.9rem;
 color: var(--text-mid);
 line-height: 2;
 margin-bottom: 52px;
}

.section__head {
 margin-bottom: 52px;
}
.section__head--center {
 text-align: center;
}

.sp-only {
 display: block;
}
@media (min-width: 768px) {
 .sp-only {
  display: none;
 }
}

/* ============================================================
   Scroll fade-in
============================================================ */
.js-fade {
 opacity: 0;
 transform: translateY(28px);
 transition:
  opacity var(--dur) var(--ease),
  transform var(--dur) var(--ease);
}
.js-fade.is-visible {
 opacity: 1;
 transform: translateY(0);
}

/* ============================================================
   HERO
============================================================ */
.hero {
 position: relative;
 min-height: 100svh;
 min-height: 100vh;
 display: flex;
 align-items: center;
 overflow: hidden;
 background: var(--navy-deeper);
}

.hero__video-wrap {
 position: absolute;
 inset: 0;
 z-index: 0;
}
.hero__video {
 width: 100%;
 height: 100%;
 object-fit: cover;
 display: block;
}
.hero__overlay {
 position: absolute;
 inset: 0;
 background: linear-gradient(
  135deg,
  rgba(17, 28, 39, 0.82) 0%,
  rgba(26, 37, 51, 0.65) 50%,
  rgba(17, 28, 39, 0.78) 100%
 );
}

/* 和柄装飾ライン */
.hero__overlay::after {
 content: "";
 position: absolute;
 inset: 0;
 background-image: repeating-linear-gradient(
  -45deg,
  transparent,
  transparent 48px,
  rgba(184, 148, 42, 0.04) 48px,
  rgba(184, 148, 42, 0.04) 49px
 );
}

.hero__inner {
 position: relative;
 z-index: 1;
 padding-top: 130px;
 padding-bottom: 100px;
}

.hero__en {
 font-size: 10px;
 letter-spacing: 6px;
 color: var(--gold-light);
 font-weight: 700;
 margin-bottom: 28px;
 font-family: var(--sans);
}

.hero__title {
 font-family: var(--serif);
 font-size: clamp(2rem, 6vw, 4rem);
 font-weight: 700;
 color: #fff;
 line-height: 1.45;
 margin-bottom: 24px;
 animation: fadeUp 0.9s var(--ease) both;
}
.hero__title em {
 color: var(--gold-light);
}

.hero__copy {
 color: rgba(255, 255, 255, 0.65);
 font-size: 0.9rem;
 letter-spacing: 1.5px;
 margin-bottom: 48px;
 animation: fadeUp 0.9s var(--ease) 0.15s both;
}

.hero__btns {
 display: flex;
 flex-wrap: wrap;
 gap: 14px;
 animation: fadeUp 0.9s var(--ease) 0.3s both;
}

.hero__scroll {
 position: absolute;
 bottom: 36px;
 left: 50%;
 transform: translateX(-50%);
 z-index: 1;
}
.hero__scroll span {
 display: block;
 width: 1px;
 height: 56px;
 background: linear-gradient(to bottom, transparent, var(--gold));
 margin: auto;
 animation: scrollLine 2.2s ease-in-out infinite;
}
@keyframes scrollLine {
 0% {
  transform: scaleY(0);
  transform-origin: top;
 }
 49% {
  transform: scaleY(1);
  transform-origin: top;
 }
 50% {
  transform: scaleY(1);
  transform-origin: bottom;
 }
 100% {
  transform: scaleY(0);
  transform-origin: bottom;
 }
}
@keyframes fadeUp {
 from {
  opacity: 0;
  transform: translateY(24px);
 }
 to {
  opacity: 1;
  transform: translateY(0);
 }
}

/* ============================================================
   CONCEPT
============================================================ */
.concept {
 background: var(--cream);
}

.concept__grid {
 display: grid;
 grid-template-columns: 1fr;
 gap: 20px;
 margin-bottom: 52px;
}
@media (min-width: 768px) {
 .concept__grid {
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
 }
}

.concept__card {
 background: var(--white);
 border: 1px solid var(--border);
 border-radius: 12px;
 padding: 32px 26px;
 position: relative;
 overflow: hidden;
 transition:
  box-shadow 0.4s,
  transform 0.4s;
}
.concept__card::before {
 content: "";
 position: absolute;
 top: 0;
 left: 0;
 right: 0;
 height: 3px;
 background: linear-gradient(90deg, var(--gold), var(--gold-light));
}
.concept__card:hover {
 box-shadow: 0 14px 44px rgba(45, 58, 74, 0.1);
 transform: translateY(-5px);
}

.concept__badge {
 display: inline-block;
 background: var(--gold-pale);
 color: #7a5c10;
 font-size: 10px;
 font-weight: 700;
 letter-spacing: 1px;
 padding: 4px 12px;
 border-radius: 20px;
 margin-bottom: 14px;
}

.concept__card h3 {
 font-family: var(--serif);
 font-size: 1.15rem;
 font-weight: 700;
 color: var(--navy);
 margin-bottom: 10px;
}
.concept__card p {
 font-size: 0.87rem;
 color: var(--text-mid);
 line-height: 2.1;
}

.concept__quote {
 font-family: var(--serif);
 font-size: clamp(0.95rem, 2vw, 1.15rem);
 color: var(--navy);
 line-height: 2.1;
 border-left: 3px solid var(--gold);
 background: var(--white);
 padding: 22px 30px;
 border-radius: 0 10px 10px 0;
 margin: 0;
}
.concept__quote strong {
 color: var(--gold);
}

/* ============================================================
   PROFILE
============================================================ */
.profile {
 background: var(--white);
}

.profile__inner {
 display: grid;
 grid-template-columns: 1fr;
 gap: 52px;
 align-items: center;
}
@media (min-width: 768px) {
 .profile__inner {
  grid-template-columns: 380px 1fr;
  gap: 80px;
 }
}

.profile__img-wrap {
 position: relative;
 max-width: 380px;
 margin: 0 auto;
}
.profile__img {
 width: 100%;
 aspect-ratio: 4/5;
 object-fit: cover;
 object-position: top;
 border-radius: 6px;
}
.profile__img-deco {
 position: absolute;
 bottom: -18px;
 right: -18px;
 width: 100%;
 height: 100%;
 border: 2px solid var(--gold);
 border-radius: 6px;
 z-index: -1;
}
@media (max-width: 767px) {
 .profile__img-deco {
  display: none;
 }
}

.profile__catch {
 font-family: var(--serif);
 font-size: 1.1rem;
 color: var(--gold);
 margin: 16px 0 20px;
}

.profile__list {
 margin-bottom: 24px;
}
.profile__list li {
 position: relative;
 padding: 9px 0 9px 22px;
 font-size: 0.89rem;
 line-height: 1.85;
 border-bottom: 1px solid var(--border);
 color: var(--text);
}
.profile__list li::before {
 content: "✦";
 position: absolute;
 left: 0;
 top: 11px;
 color: var(--gold);
 font-size: 9px;
}

.profile__message {
 font-size: 0.87rem;
 color: var(--text-mid);
 line-height: 2.3;
 padding-left: 16px;
 border-left: 3px solid var(--border);
}

/* ============================================================
   PLANS
============================================================ */
.plans {
 background: var(--section-alt, #f5f2eb);
}

.plans__grid {
 display: grid;
 grid-template-columns: 1fr;
 gap: 28px;
 margin-bottom: 64px;
}
@media (min-width: 768px) {
 .plans__grid {
  grid-template-columns: repeat(3, 1fr);
  align-items: start;
 }
}

.plan-card {
 background: var(--white);
 border: 1px solid var(--border);
 border-radius: 14px;
 overflow: hidden;
 display: flex;
 flex-direction: column;
 transition:
  box-shadow 0.4s,
  transform 0.4s;
 position: relative;
}
.plan-card:hover {
 box-shadow: 0 18px 52px rgba(45, 58, 74, 0.13);
 transform: translateY(-7px);
}
.plan-card--featured {
 border-color: var(--gold);
 box-shadow: 0 8px 36px rgba(184, 148, 42, 0.18);
}

.plan-card__badge {
 position: absolute;
 top: -1px;
 right: 22px;
 background: var(--gold);
 color: #fff;
 font-size: 10px;
 font-weight: 700;
 letter-spacing: 2px;
 padding: 4px 14px;
 border-radius: 0 0 8px 8px;
 z-index: 1;
}

.plan-card__head {
 background: var(--navy);
 padding: 32px 24px 26px;
 text-align: center;
}
.plan-card--featured .plan-card__head {
 background: var(--navy-dark);
}

.plan-card__future {
 display: block;
 font-family: var(--serif);
 font-size: 10px;
 letter-spacing: 2px;
 color: rgba(255, 255, 255, 0.45);
 margin-bottom: 8px;
}
.plan-card__name {
 font-family: var(--serif);
 font-size: 1.4rem;
 font-weight: 700;
 color: #fff;
 margin-bottom: 8px;
}
.plan-card--featured .plan-card__name {
 color: var(--gold-light);
}

.plan-card__period {
 font-size: 0.78rem;
 color: rgba(255, 255, 255, 0.5);
 letter-spacing: 1px;
}

.plan-card__body {
 padding: 26px 24px;
 flex: 1;
}

.plan-card__desc {
 font-size: 0.87rem;
 color: var(--text);
 line-height: 2;
 margin-bottom: 20px;
}

.plan-card__items li {
 position: relative;
 padding: 7px 0 7px 18px;
 font-size: 0.84rem;
 color: var(--text-mid);
 border-bottom: 1px dashed var(--border);
}
.plan-card__items li:last-child {
 border-bottom: none;
}
.plan-card__items li::before {
 content: "✦";
 position: absolute;
 left: 0;
 top: 9px;
 color: var(--gold);
 font-size: 9px;
}

.plan-card__foot {
 padding: 0 24px 26px;
}

.plans__cta {
 text-align: center;
}
.plans__cta-note {
 margin-top: 16px;
 font-size: 0.8rem;
 text-align: center;
 color: var(--text-light);
}

/* ============================================================
   VOICE
============================================================ */
.voice {
 background: var(--cream);
}

.voice__grid {
 display: grid;
 grid-template-columns: 1fr;
 gap: 20px;
}
@media (min-width: 768px) {
 .voice__grid {
  grid-template-columns: repeat(3, 1fr);
 }
}

.voice__card {
 background: var(--white);
 border: 1px solid var(--border);
 border-radius: 12px;
 padding: 28px 24px;
 display: flex;
 flex-direction: column;
 gap: 14px;
 transition: box-shadow 0.3s;
}
.voice__card:hover {
 box-shadow: 0 10px 32px rgba(45, 58, 74, 0.09);
}

.voice__stars {
 color: var(--gold);
 font-size: 1rem;
 letter-spacing: 2px;
}

.voice__text {
 font-family: var(--serif);
 font-size: 0.92rem;
 color: var(--text);
 line-height: 2;
 flex: 1;
 position: relative;
 padding-left: 18px;
}
.voice__text::before {
 content: "❝";
 position: absolute;
 left: 0;
 top: -2px;
 color: var(--gold-pale);
 font-size: 1.4rem;
 font-family: serif;
}

.voice__author {
 font-size: 0.78rem;
 color: var(--text-light);
 letter-spacing: 1px;
 border-top: 1px solid var(--border);
 padding-top: 12px;
}

/* ============================================================
   COMMUNITY
============================================================ */
.community {
 background: var(--white);
}

.community__inner {
 display: grid;
 grid-template-columns: 1fr;
 gap: 52px;
 align-items: center;
}
@media (min-width: 768px) {
 .community__inner {
  grid-template-columns: 1fr 1fr;
  gap: 72px;
 }
}

.community__catch {
 font-family: var(--serif);
 font-size: 1.25rem;
 color: var(--gold);
 margin: 14px 0 18px;
}

.community__desc {
 font-size: 0.88rem;
 color: var(--text-mid);
 line-height: 2.2;
 margin-bottom: 12px;
}

.community__price {
 font-family: var(--serif);
 font-size: 1rem;
 font-weight: 700;
 color: var(--navy);
 letter-spacing: 1px;
 padding-left: 14px;
 border-left: 3px solid var(--gold);
 margin-top: 20px;
}

.community__imgs {
 display: grid;
 grid-template-columns: 1fr;
 gap: 14px;
}
.community__imgs img {
 width: 100%;
 aspect-ratio: 4/3;
 object-fit: cover;
 border-radius: 8px;
}

/* ============================================================
   INSTAGRAM
============================================================ */
.instagram {
 background: var(--section-alt, #f5f2eb);
 text-align: center;
}

.instagram__feed {
 margin-bottom: 32px;
}

.instagram__placeholder {
 background: var(--white);
 border: 1.5px dashed var(--border);
 border-radius: 10px;
 padding: 44px 24px;
 color: var(--text-mid);
 font-size: 0.87rem;
 line-height: 2;
}
.instagram__placeholder code {
 display: inline-block;
 margin-top: 14px;
 background: var(--cream-dark);
 color: var(--navy);
 padding: 8px 20px;
 border-radius: 6px;
 font-size: 0.88rem;
 letter-spacing: 0.5px;
}

.instagram__link-wrap {
 display: flex;
 justify-content: center;
}

.instagram__link {
 display: inline-flex;
 align-items: center;
 gap: 8px;
 border: 1.5px solid var(--navy);
 color: var(--navy);
 font-family: var(--sans);
 font-size: 0.87rem;
 font-weight: 700;
 padding: 12px 28px;
 border-radius: 50px;
 transition: all 0.3s;
}
.instagram__link:hover {
 background: var(--navy);
 color: #fff;
}

/* ============================================================
   CTA FINAL
============================================================ */
.cta-final {
 position: relative;
 padding: 120px 0;
 overflow: hidden;
}
.cta-final__bg {
 position: absolute;
 inset: 0;
 background: var(--navy-deeper);
 z-index: 0;
}
.cta-final__bg::before {
 content: "";
 position: absolute;
 inset: 0;
 background: radial-gradient(
  ellipse 70% 80% at 50% 50%,
  rgba(184, 148, 42, 0.1) 0%,
  transparent 70%
 );
}
.cta-final__bg::after {
 content: "";
 position: absolute;
 inset: 0;
 background-image: repeating-linear-gradient(
  -45deg,
  transparent,
  transparent 48px,
  rgba(184, 148, 42, 0.03) 48px,
  rgba(184, 148, 42, 0.03) 49px
 );
}

.cta-final__inner {
 position: relative;
 z-index: 1;
 max-width: 720px;
 text-align: center;
}

.cta-final__quote {
 font-family: var(--serif);
 font-size: clamp(1.05rem, 2.8vw, 1.45rem);
 color: #fff;
 line-height: 2;
 margin-bottom: 16px;
 text-align: center;
}

.cta-final__sub {
 font-size: 0.85rem;
 color: rgba(255, 255, 255, 0.45);
 letter-spacing: 4px;
 margin-bottom: 44px;
 text-align: center;
 font-family: var(--serif);
}

.cta-final__note {
 margin-top: 16px;
 font-size: 0.8rem;
 color: rgba(255, 255, 255, 0.4);
 text-align: center;
}

/* ============================================================
   Footer (embedded in footer.php)
============================================================ */
.footer {
 background: #0e151b;
 color: rgba(255, 255, 255, 0.65);
 padding: 64px 0 32px;
 font-family: var(--sans);
}
.footer__inner {
 display: grid;
 grid-template-columns: 1fr;
 gap: 36px;
 text-align: center;
}
@media (min-width: 768px) {
 .footer__inner {
  grid-template-columns: 200px 1fr auto;
  align-items: start;
  text-align: left;
  gap: 48px;
 }
}

.footer__logo img {
 height: 34px;
 filter: brightness(0) invert(1) opacity(0.8);
 margin: 0 auto;
}
@media (min-width: 768px) {
 .footer__logo img {
  margin: 0;
 }
}

.footer__tagline {
 font-size: 0.75rem;
 color: rgba(255, 255, 255, 0.35);
 margin-top: 10px;
 letter-spacing: 1px;
}

.footer__nav ul {
 display: flex;
 flex-wrap: wrap;
 gap: 8px 24px;
 justify-content: center;
}
@media (min-width: 768px) {
 .footer__nav ul {
  flex-direction: column;
  gap: 12px;
  justify-content: flex-start;
 }
}
.footer__nav a {
 color: rgba(255, 255, 255, 0.55);
 font-size: 0.84rem;
 transition: color 0.25s;
}
.footer__nav a:hover {
 color: var(--gold-light);
}

.footer__sns {
 display: flex;
 justify-content: center;
}
@media (min-width: 768px) {
 .footer__sns {
  justify-content: flex-end;
 }
}

.footer__sns-link {
 display: inline-flex;
 align-items: center;
 gap: 8px;
 color: rgba(255, 255, 255, 0.55);
 font-size: 0.84rem;
 border: 1px solid rgba(255, 255, 255, 0.2);
 padding: 10px 20px;
 border-radius: 50px;
 transition: all 0.3s;
}
.footer__sns-link:hover {
 border-color: #e1306c;
 color: #e1306c;
}

.footer__copy {
 font-size: 0.72rem;
 color: rgba(255, 255, 255, 0.25);
 text-align: center;
 grid-column: 1 / -1;
 border-top: 1px solid rgba(255, 255, 255, 0.07);
 padding-top: 24px;
 margin-top: 8px;
}

/* ============================================================
   Responsive
============================================================ */
@media (max-width: 767px) {
 .hero__title {
  font-size: 2rem;
 }
 .hero__inner {
  padding-top: 110px;
  padding-bottom: 80px;
 }
 .hero__btns {
  flex-direction: column;
 }
 .btn-line,
 .btn-outline {
  justify-content: center;
  width: 100%;
  max-width: 320px;
 }
}
/* ============================================================
   HEADER
============================================================ */
.l-header {
 position: fixed;
 top: 0;
 left: 0;
 width: 100%;
 z-index: 200;
 transition:
  background 0.4s ease,
  box-shadow 0.4s ease,
  padding 0.4s ease;
 padding: 0;
}

/* 透明状態（ヒーロー上） */
.l-header__inner {
 display: flex;
 align-items: center;
 gap: 32px;
 height: 72px;
 transition: height 0.4s ease;
}

/* スクロール後: 背景が入る */
.l-header.is-scrolled {
 background: rgba(17, 28, 39, 0.96);
 backdrop-filter: blur(12px);
 -webkit-backdrop-filter: blur(12px);
 box-shadow: 0 2px 20px rgba(0, 0, 0, 0.3);
}
.l-header.is-scrolled .l-header__inner {
 height: 62px;
}

/* ロゴ */
.l-header__logo {
 display: flex;
 align-items: center;
 flex-shrink: 0;
 text-decoration: none;
}
.l-header__logo-img {
 height: 34px;
 width: auto;
 display: block;
 filter: brightness(0) invert(1) opacity(0.9);
 transition: opacity 0.3s;
}
.l-header__logo-img:hover {
 opacity: 0.75;
}

/* ロゴ画像がない場合のテキストフォールバック */
.l-header__logo-text {
 font-family: "Noto Serif JP", serif;
 font-size: 1.3rem;
 font-weight: 700;
 color: #fff;
 letter-spacing: 4px;
 display: none; /* ロゴ画像がある場合は非表示 */
}
/* ロゴ画像読み込み失敗時はテキストを表示 */
.l-header__logo-img.is-error {
 display: none;
}
.l-header__logo-img.is-error ~ .l-header__logo-text {
 display: block;
}

/* PC ナビ */
.l-header__nav {
 flex: 1;
 display: none;
}
@media (min-width: 1024px) {
 .l-header__nav {
  display: block;
 }
}

.l-header__nav-list {
 display: flex;
 align-items: center;
 gap: 28px;
 list-style: none;
 padding: 0;
 margin: 0;
}
.l-header__nav-list a {
 color: rgba(255, 255, 255, 0.8);
 font-size: 0.84rem;
 font-weight: 500;
 letter-spacing: 0.5px;
 text-decoration: none;
 transition: color 0.25s;
 position: relative;
 padding-bottom: 3px;
}
.l-header__nav-list a::after {
 content: "";
 position: absolute;
 bottom: 0;
 left: 0;
 width: 0;
 height: 1px;
 background: #b8942a;
 transition: width 0.3s ease;
}
.l-header__nav-list a:hover {
 color: #fff;
}
.l-header__nav-list a:hover::after {
 width: 100%;
}

/* LINE ボタン（PC） */
.l-header__line-btn {
 display: none;
 align-items: center;
 gap: 7px;
 background: #06c755;
 color: #fff;
 font-size: 0.8rem;
 font-weight: 700;
 letter-spacing: 0.03em;
 padding: 9px 18px;
 border-radius: 50px;
 text-decoration: none;
 white-space: nowrap;
 flex-shrink: 0;
 transition:
  background 0.3s,
  transform 0.3s;
}
@media (min-width: 1024px) {
 .l-header__line-btn {
  display: inline-flex;
 }
}
.l-header__line-btn:hover {
 background: #059c43;
 transform: translateY(-1px);
 color: #fff;
}

/* ハンバーガー */
.l-header__hamburger {
 display: flex;
 flex-direction: column;
 justify-content: center;
 gap: 5px;
 width: 36px;
 height: 36px;
 padding: 0;
 background: transparent;
 border: none;
 cursor: pointer;
 margin-left: auto;
 flex-shrink: 0;
}
@media (min-width: 1024px) {
 .l-header__hamburger {
  display: none;
 }
}
.l-header__hamburger span {
 display: block;
 width: 24px;
 height: 2px;
 background: #fff;
 border-radius: 2px;
 transition:
  transform 0.35s ease,
  opacity 0.25s ease;
 transform-origin: center;
}

/* ハンバーガー → × */
.l-header__hamburger.is-active span:nth-child(1) {
 transform: translateY(7px) rotate(45deg);
}
.l-header__hamburger.is-active span:nth-child(2) {
 opacity: 0;
 transform: scaleX(0);
}
.l-header__hamburger.is-active span:nth-child(3) {
 transform: translateY(-7px) rotate(-45deg);
}

/* ============================================================
   DRAWER
============================================================ */
.l-drawer {
 position: fixed;
 top: 0;
 right: 0;
 width: min(320px, 85vw);
 height: 100dvh;
 height: 100vh;
 background: #111c27;
 z-index: 190;
 padding: 96px 32px 48px;
 transform: translateX(100%);
 transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
 overflow-y: auto;
}
.l-drawer.is-open {
 transform: translateX(0);
}

.l-drawer__list {
 list-style: none;
 padding: 0;
 margin: 0 0 40px;
}
.l-drawer__list li {
 border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.l-drawer__list a {
 display: block;
 padding: 18px 0;
 color: rgba(255, 255, 255, 0.8);
 font-size: 1rem;
 font-weight: 500;
 text-decoration: none;
 letter-spacing: 1px;
 transition:
  color 0.25s,
  padding-left 0.25s;
}
.l-drawer__list a:hover {
 color: #b8942a;
 padding-left: 6px;
}

.l-drawer__cta {
 text-align: center;
}
.l-drawer__line-btn {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 gap: 9px;
 background: #06c755;
 color: #fff;
 font-size: 0.9rem;
 font-weight: 700;
 padding: 15px 28px;
 border-radius: 50px;
 text-decoration: none;
 width: 100%;
 transition: background 0.3s;
}
.l-drawer__line-btn:hover {
 background: #059c43;
 color: #fff;
}

/* オーバーレイ */
.l-drawer__overlay {
 position: fixed;
 inset: 0;
 background: rgba(0, 0, 0, 0.55);
 z-index: 180;
 opacity: 0;
 pointer-events: none;
 transition: opacity 0.4s ease;
}
.l-drawer__overlay.is-open {
 opacity: 1;
 pointer-events: auto;
}