@charset "UTF-8";
html {
  font-size: 62.5%;
}

body,
input,
textarea {
  margin: 0;
  font-size: 1.4rem;
  font-family: "Helvetica Neue", "Helvetica", "Noto Sans", "Hiragino Kaku Gothic ProN", "Arial", "Yu Gothic", "Meiryo", sans-serif;
  position: relative;
  color: #fff;
  background-color: #fff;
}

h1,
h2,
h3,
h4 {
  font-size: 2.8rem;
  color: #333;
  line-height: 1.6;
}

p {
  font-size: 1.4rem;
  color: #333;
  line-height: 1.6;
}

em {
  font-style: normal;
}

a {
  font-size: 1.4rem;
  text-decoration: none;
  color: #333;
  display: inline-block;
}

a:hover {
  text-decoration: underline;
}

p a {
  text-decoration: underline;
}
p a:hover {
  color: red;
}

hr {
  height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  border-top: dotted 1px #ccc;
}

li {
  font-size: 1.6rem;
  list-style: none;
  line-height: 1.6;
}

dl {
  font-size: 1.6rem;
}

dd,
dt,
dl {
  display: block;
}

table {
  border-collapse: collapse;
  font-size: 1.6rem;
}
table caption {
  text-align: left;
}
table th {
  padding: 15px 0;
}
table td {
  padding: 15px 30px;
}

img {
  vertical-align: middle;
}

.fv-blurIn {
  opacity: 0;
  filter: blur(8px);
  transform: scale(1.03);
  animation: blurIn 1.2s ease-out forwards;
}

@keyframes blurIn {
  to {
    opacity: 1;
    filter: blur(0);
    transform: scale(1);
  }
}
/* 動きが苦手な人への配慮 */
@media (prefers-reduced-motion: reduce) {
  .fv-blurIn {
    animation: none;
    opacity: 1;
    filter: none;
    transform: none;
  }
}
/* =========================
   pcspの表示・非表示切替
========================= */
@media (min-width: 1025px) {
  .sp {
    display: none !important;
  }
}
@media (max-width: 768px) {
  .pc {
    display: none !important;
  }
}
/* =========================
   スマホだけ改行
========================= */
.sp-br {
  display: none;
}

@media screen and (max-width: 768px) {
  .sp-br {
    display: block;
  }
}
/* =========================
   PCだけ改行
========================= */
.pc-br {
  display: none;
}

@media screen and (min-width: 769px) {
  .pc-br {
    display: block;
  }
}
.hr-800 {
  display: block;
  max-width: 800px;
  padding: 0 20px;
  margin: 0 auto;
}

.hr-1000 {
  display: block;
  max-width: 1000px;
  padding: 0 20px;
  margin: 0 auto;
}

.wrap-800 {
  display: block;
  max-width: 800px;
  margin: 0 auto;
}

/* =========================
   bg
========================= */
.bg-w {
  background-color: #fff !important;
}

.bg-lg {
  background-color: #f8f8f8 !important;
}

/* =========================
   util
========================= */
.u-marker {
  background: linear-gradient(transparent 0%, transparent 60%, #ffed83 61%, #ffed83 100%);
}

.ta-c {
  text-align: center !important;
}

.fw-b {
  font-weight: bold !important;
}

.fw-n {
  font-weight: normal !important;
}

.ofh {
  overflow: hidden;
}

.mt-10 {
  margin-top: 10px !important;
}

.mt-20 {
  margin-top: 20px !important;
}

.mt-30 {
  margin-top: 30px !important;
}

.mt-40 {
  margin-top: 40px !important;
}

.mt-50 {
  margin-top: 50px !important;
}

.mt-60 {
  margin-top: 60px !important;
}

.mb-10 {
  margin-bottom: 10px !important;
}

.mb-20 {
  margin-bottom: 20px !important;
}

.mb-30 {
  margin-bottom: 30px !important;
}

.mb-40 {
  margin-bottom: 40px !important;
}

.mb-50 {
  margin-bottom: 50px !important;
}

.mb-60 {
  margin-bottom: 60px !important;
}

.container-l {
  display: block;
  width: 1040px;
  margin: 0 auto;
}
@media (min-width: 769px) and (max-width: 1024px) {
  .container-l {
    width: 100%;
    padding-left: 20px;
    padding-right: 20px;
  }
}
@media (max-width: 768px) {
  .container-l {
    width: 100%;
    padding-left: 20px;
    padding-right: 20px;
  }
}

.container-m {
  display: block;
  width: 980px;
  margin: 0 auto;
}
@media (min-width: 769px) and (max-width: 1024px) {
  .container-m {
    width: 100%;
    padding-left: 20px;
    padding-right: 20px;
  }
}
@media (max-width: 768px) {
  .container-m {
    width: 100%;
    padding-left: 20px;
    padding-right: 20px;
  }
}

/* 初期状態（見えない＋少し下へ） */
.js-reveal {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 900ms ease, transform 900ms ease;
  will-change: opacity, transform;
}

/* 表示状態 */
.js-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* 連続表示用の遅延（JSで --delay を入れる） */
.js-reveal {
  transition-delay: var(--delay, 0ms);
}

/* 動きが苦手な人への配慮 */
@media (prefers-reduced-motion: reduce) {
  .js-reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}
/* ================================
   Anchor Navigation
   ================================ */
@media (max-width: 768px) {
  .pageHero + .anchor {
    margin-top: 70px;
  }
}
.anchorNav {
  max-width: 800px;
  width: 90%;
  margin: 20px auto;
}

.anchorNav-list {
  display: flex;
  flex-direction: row;
  margin: 0;
  padding: 0;
  list-style: none;
  gap: 10px;
}

.anchorNav-item {
  position: relative;
  flex: 1;
}

.anchorNav-item + .anchorNav-item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 20%;
  bottom: 20%;
  width: 1px;
  opacity: 0.4;
}

/* link */
.anchorNav-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 12px 12px;
  text-decoration: none;
  color: #f25d8c;
  font-weight: bold;
  border-radius: 10px;
  transition: opacity 0.2s ease;
  border: solid 1px #f25d8c;
}

/* text */
.anchorNav-text {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.08em;
}

/* arrow */
.anchorNav-arrow {
  width: 8px;
  height: 8px;
  border-right: 2px solid #f25d8c;
  border-bottom: 2px solid #f25d8c;
  transform: rotate(45deg);
}

/* hover */
.anchorNav-link:hover {
  opacity: 0.75;
  background-color: #f25d8c;
  color: #fff;
  text-decoration: none;
}

.anchorNav-link:hover .anchorNav-arrow {
  border-right: 2px solid #fff;
  border-bottom: 2px solid #fff;
}

/* SP微調整 */
@media (max-width: 768px) {
  .anchorNav-list {
    flex-direction: column;
  }
  .anchorNav-text {
    font-size: 14px;
  }
}
/* =========================
   section
========================= */
section.footer {
  padding: 100px 30px;
}
@media screen and (max-width: 768px) {
  section.footer {
    padding: 60px 30px 40px;
  }
}
section.footer {
  text-align: center;
  background-color: #fbf9f7;
}

/* =========================
   FooterNav
========================= */
.footer {
  background-color: #fff; /* 白背景 */
  color: #333;
  font-size: 14px;
}

.footer-inner {
  max-width: 1000px;
  margin: 0 auto;
  padding: 60px 20px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 40px;
}

/* 左：ブランド */
.footer-brand {
  width: 300px;
  text-align: left;
}

.footer-logo {
  width: 180px;
  margin-bottom: 30px;
  margin-left: -20px;
}

.footer-contact-label {
  color: #d50e4c;
  font-weight: bold;
  margin-bottom: 8px;
}

.footer-tel {
  font-size: 24px;
  color: #d50e4c;
  text-decoration: none;
  display: inline-flex; /* ★ここ */
  align-items: center; /* ★縦中央揃え */
  gap: 5px; /* アイコンと文字の間隔 */
  margin-bottom: 12px;
  font-family: "Krona One", sans-serif;
  font-weight: 400;
  line-height: 1;
}

.footer-tel-icon {
  width: 24px;
  height: 24px;
  display: block; /* inline-blockより安定 */
}

.footer-time,
.footer-address {
  font-size: 1.3rem;
  color: #333333; /* 変更なし */
  line-height: 1.6;
  letter-spacing: 0.1em;
  text-align: left;
  margin-top: 20px;
}

/* =========================
   Footer Nav
========================= */
.footer-nav {
  display: flex;
  gap: 40px;
  text-align: left;
  letter-spacing: 0.05em;
}

/* ul 共通 */
.footer-nav-col ul {
  list-style: none;
}

/* li 共通 */
.footer-nav-col li {
  margin-bottom: 8px;
}

/* 親 li（ul > li > a + ul 構造） */
.footer-nav-col > ul > li {
  margin-bottom: 16px;
}

/* 1階層目（親リンク）を太字に */
.footer-nav-col > ul > li > a {
  font-weight: bold;
}

/* 子階層（2階層目）は細字に */
.footer-nav-sub a {
  font-weight: normal;
}

/* 親リンク（料金プラン / フォトギャラリー） */
.footer-nav-parent {
  display: inline-block;
  margin-bottom: 8px;
  font-weight: bold;
  font-size: 1.5rem;
  color: #333;
  text-decoration: none;
}

/* 子メニュー（2階層目） */
.footer-nav-sub {
  padding-left: 5px; /* 階層インデント */
}

.footer-nav-sub li {
  margin-bottom: 4px;
}

/* リンク共通 */
.footer-nav-col a {
  color: #333;
  text-decoration: none;
  transition: color 0.2s;
  font-size: 1.3rem;
}

.footer-nav-col a:hover {
  color: #d50e4c;
}

/* =========================
   Footer bottom
========================= */
.footer-bottom {
  text-align: center;
  padding: 20px 0 40px;
  font-size: 1.2rem;
  color: #999;
}

/* =========================
   Responsive
========================= */
@media screen and (max-width: 768px) {
  /* =========================
     全体レイアウト
  ========================= */
  .footer-inner {
    flex-direction: column;
    gap: 40px;
    padding: 30px 25px;
  }
  /* =========================
     footer-brand：ロゴ（左）＋店舗情報（右）を2カラム
  ========================= */
  .footer-logo {
    grid-column: 1;
    grid-row: 1;
    width: 100%;
    max-width: 160px;
    margin-left: 0; /* PC用のズラしを解除 */
    margin-bottom: 0;
    display: block;
    margin: 0 auto 20px;
  }
  .footer-contact-label,
  .footer-tel,
  .footer-time,
  .footer-address {
    grid-column: 2;
    margin-top: 10px;
  }
  /* =========================
     footer-nav 全体：2カラム構成
     上段：基本メニュー（横流し）
     下段：料金プラン｜フォトギャラリー
  ========================= */
  .footer-nav {
    display: grid;
    grid-template-columns: 1fr 1fr;
    -moz-column-gap: 16px;
         column-gap: 16px;
    row-gap: 24px;
  }
  /* 基本メニュー（1つ目）は全幅 */
  .footer-nav-col:first-child {
    grid-column: 1/-1;
  }
  /* 基本メニュー：横流し1カラム */
  .footer-nav-col:first-child .footer-nav-sub {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 16px;
    padding-left: 0;
  }
  .footer-nav-col:first-child .footer-nav-sub li {
    margin-bottom: 0;
  }
  /* 料金プラン（左） */
  .footer-nav-col:nth-child(2) {
    grid-column: 1;
  }
  /* フォトギャラリー（右） */
  .footer-nav-col:nth-child(3) {
    grid-column: 2;
  }
  /* 子階層インデントを少し浅く */
  .footer-nav-sub {
    padding-left: 14px;
  }
  .footer-nav-col ul ul a {
    font-size: 1.2rem;
  }
  /* footer-brand を縦並びに */
  .footer-brand {
    width: 100%;
    display: block; /* ← gridをやめる */
    padding: 20px 20px 30px;
    border-bottom: solid 1px #eee;
  }
  /* 電話番号は折り返さない（念のため） */
  .footer-tel {
    white-space: nowrap;
  }
}
.fv {
  position: relative;
}

.fv-top {
  display: block;
  width: 100%;
  margin: 0 auto;
}

/* =========================
   FV Banner
========================= */
.fvBanner {
  position: fixed;
  z-index: 50;
  bottom: calc(40px + env(safe-area-inset-bottom));
  right: 0px;
  width: 25%;
  height: auto;
  display: block;
  padding: 0;
  box-shadow: 0 0 0 rgba(0, 0, 0, 0.3);
  transition: transform 0.16s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.16s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.12s linear;
}
@media (max-width: 768px) {
  .fvBanner {
    width: 50%;
  }
}

.fvBanner img {
  width: 100%;
}

.fvBanner:hover {
  transform: translateY(-5px);
  box-shadow: 0 0 0 rgba(0, 0, 0, 0.5);
  opacity: 0.95;
}

.fvBanner {
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.fvBanner.is-hide {
  opacity: 0;
  transform: translateY(-20px);
  pointer-events: none;
}

/* label */
.fvBanner-label {
  font-size: 1.2rem;
  opacity: 0.9;
}

/* text */
.fvBanner-text {
  font-size: 1.4rem;
  white-space: nowrap;
}

/* =========================
   section
========================= */
section.gallery-menu {
  padding: 100px 20px;
}
@media screen and (max-width: 768px) {
  section.gallery-menu {
    padding: 60px 25px 50px;
  }
}
section.gallery-menu {
  background-color: #f5e3e6;
  text-align: center;
  position: relative;
}

/* 背景の英字 */
section.gallery-menu::before {
  content: "photo gallery";
}
@media screen and (max-width: 768px) {
  section.gallery-menu::before {
    content: "gallery";
  }
}
section.gallery-menu::before {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: first baseline;
  margin-top: -10px;
  justify-content: center;
  font-size: 100px;
  letter-spacing: 0;
  line-height: 0.8;
  color: rgb(255, 255, 255); /* 白・薄め */
  pointer-events: none;
  font-family: "Bodoni Moda", serif;
  font-optical-sizing: auto;
  font-weight: 800;
  font-style: normal;
}

section.gallery-menu.outfit::before {
  content: "outfit";
}

/* =========================
   ギャラリー
========================= */
.galleryCard-M {
  width: 90%;
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 50px;
  text-align: center;
}

.galleryCard-M-item {
  list-style: none;
}

/* link */
.galleryCard-M-link {
  display: block;
  text-decoration: none;
  color: inherit;
}

/* image */
.galleryCard-M-link img {
  width: 100%;
  display: block;
  -o-object-fit: cover;
     object-fit: cover;
  transition: opacity 0.3s ease;
}

/* title */
.galleryCard-M-tit {
  margin: 0;
  margin-top: -40px;
  padding: 10px 10px;
  background: rgba(213, 14, 76, 0.8);
  color: #fff;
  font-size: 1.3rem;
  font-weight: bold;
  letter-spacing: 0.1em;
  display: inline-block;
  align-items: center;
  gap: 8px;
  position: relative;
  transition: background 0.3s ease;
  width: 80%;
  text-align: center;
}

/* arrow */
.galleryCard-M-tit img {
  width: 12px;
  height: auto;
}

/* hover */
.galleryCard-M-link:hover img {
  transition: 0.18s cubic-bezier(0.4, 0, 0.2, 1);
  transform: translateY(-6px);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.1);
}

.galleryCard-M-link:hover .galleryCard-M-tit {
  background: #c03c6b;
}

/* =========================
   Responsive
========================= */
/* tablet */
@media screen and (max-width: 1024px) {
  .galleryCard-M {
    grid-template-columns: repeat(3, 1fr);
  }
}
/* sp */
@media screen and (max-width: 768px) {
  .galleryCard-M {
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
  }
  .galleryCard-M-tit {
    font-size: 1.2rem;
    padding: 8px 12px;
  }
}
/* =========================
   section
========================= */
section.galleryWrap {
  max-width: 1000px;
  margin: 0 auto;
  padding: 60px 20px 100px;
}
@media screen and (max-width: 768px) {
  section.galleryWrap {
    padding: 30px 10px 50px;
  }
}

/* ================================
   Google Map (wrap)
   ================================ */
.gmap-wrap {
  position: relative;
  width: 100%;
  max-width: 1000px;
  min-height: 280px;
  padding-top: 38%; /* PC：横長で表示 */
  overflow: hidden;
  background: #eee; /* 読み込み前の保険 */
  margin: 30px auto 0;
}

.gmap-wrap iframe {
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  border: 0;
}

/* SP：できるだけ大きく（ほぼ正方形） */
@media (max-width: 768px) {
  .gmap-wrap {
    padding-top: 95%;
  }
}
/* SP：画面端まで広げたい場合（必要なら .is-full を付ける） */
@media (max-width: 768px) {
  .gmap-wrap.is-full {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    padding-top: 100%;
  }
}
/* 任意：SPの誤操作防止（タップしたら操作可にするならJSで .is-active 付与） */
@media (max-width: 768px) {
  .gmap-wrap.is-lock iframe {
    pointer-events: none;
  }
  .gmap-wrap.is-lock.is-active iframe {
    pointer-events: auto;
  }
}
.pc {
  display: block;
}

.sp {
  display: none;
}

@media (max-width: 768px) {
  .pc {
    display: none;
  }
  .sp {
    display: block;
  }
}
/* =========================
   ハンバーガー
========================= */
.hamburger {
  position: fixed;
  top: 0;
  right: 0;
  width: 60px;
  height: 60px;
  z-index: 1001;
  background: none;
  border: none;
  background: #d50e4c;
  padding: 10px;
  border-radius: 0 0 0 5px;
}

.hamburger span {
  display: block;
  width: 100%;
  height: 2px;
  background: #fff;
  margin: 6px 0px;
}

.hamburger.active span:nth-child(1) {
  transform: translateY(8px) rotate(45deg);
}

.hamburger.active span:nth-child(2) {
  opacity: 0;
}

.hamburger.active span:nth-child(3) {
  transform: translateY(-8px) rotate(-45deg);
}

.hamburger span {
  transition: 0.3s;
}

/* =========================
   SPナビ
========================= */
.sp-nav {
  position: fixed;
  inset: 0;
  background: #fff;
  text-align: center;
  transform: translateX(100%);
  transition: 0.3s;
  z-index: 1000;
  overflow-y: auto;
}

.sp-nav.active {
  transform: translateX(0);
}

.sp-navList {
  padding: 80px 20px;
}

.sp-navList li {
  margin: 10px;
}

.sp-navList a,
.sp-parent {
  font-size: 1.5rem;
  display: block;
  padding: 10px;
  color: #333;
  font-weight: bold;
  letter-spacing: 0.02em;
  border-bottom: solid 1px #eee;
}

/* サブメニュー */
.sp-subMenu {
  display: none;
  padding-left: 16px;
}

.has-sub.active .sp-subMenu {
  display: block;
}

.sp-navList a:hover {
  text-decoration: none;
}

/* =========================
   section（ヘッダー）
========================= */
#header {
  display: block;
  height: 160px;
  border-top: solid 4px #d50e4c;
  padding: 30px 60px;
  position: relative;
}
@media screen and (max-width: 768px) {
  #header {
    height: 80px;
  }
}

/* =========================
   ロゴ
========================= */
.header-logo img {
  display: block;
  width: 180px;
  position: absolute;
  top: 30px;
  left: 60px;
}
@media screen and (max-width: 768px) {
  .header-logo img {
    top: 10px;
    left: 10px;
    height: 55px;
    width: auto;
  }
}

.header-logo:hover img {
  opacity: 0.85;
  cursor: pointer;
}

/* =========================
   CTA
========================= */
.header-cta img {
  display: block;
  width: 400px;
  position: absolute;
  top: 20px;
  right: 60px;
}

.header-cta:hover img {
  opacity: 0.85;
  cursor: pointer;
  transform: scale(1.02);
}

/* 押したとき */
.header-cta:active {
  transform: scale(0.96);
}

.header-cta:hover::after {
  transform: translateX(120%);
}

@media (hover: none) {
  .header-cta:hover img {
    transform: none;
    box-shadow: none;
    filter: none;
  }
}
/* =========================
   ナビ
========================= */
.nav {
  position: absolute;
  bottom: 10px;
  right: 60px;
}

.navList {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
  align-items: center;
  gap: 0.5rem;
}

.navList-item {
  position: relative;
}

.navList-item a {
  display: block;
  padding: 1rem 6px;
  text-decoration: none;
  color: #333;
  font-weight: bold;
  font-size: 1.4rem;
  letter-spacing: 0.05em;
  white-space: nowrap;
  transition: color 0.3s ease, background-color 0.3s ease;
}

.navList-item a:hover {
  background-color: #f8f9fa;
  color: #d50e4c;
}

/* サブメニュー */
.subMenu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background: #fff;
  min-width: 220px;
  padding: 8px 0;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
  z-index: 1000;
}

/* サブメニュー内 */
.subMenu li a {
  padding: 10px 18px;
  font-size: 1.2rem;
  font-weight: normal;
  color: #333;
}

/* ホバーで表示 */
.has-sub:hover > .subMenu {
  display: block;
}

@media (max-width: 768px) {
  .nav {
    position: static;
  }
  .navList {
    flex-direction: column;
    align-items: stretch;
  }
  .navList-item {
    width: 100%;
    border-bottom: 1px solid #eee;
  }
  .navList-item a {
    padding: 1.2rem 2rem;
    font-size: 1rem;
  }
  /* SPではサブメニューを中に表示 */
  .subMenu {
    position: static;
    display: block;
    box-shadow: none;
    background: #fafafa;
  }
  .subMenu li a {
    padding-left: 3rem;
    font-size: 0.95rem;
  }
}
@media (max-width: 1024px) and (min-width: 769px) {
  .navList-item a {
    padding: 0.8rem 1rem;
    font-size: 1.2rem;
  }
}
/* =========================
   imageBox
   ========================= */
.imageBox {
  display: flex;
  width: 100%;
  max-width: 840px;
  margin: 60px auto;
  gap: 40px; /* 真ん中の隙間 */
}

.imageBox-item {
  flex: 1;
}

.imageBox-item img {
  width: 100%;
  height: auto;
  display: block;
  -o-object-fit: cover;
     object-fit: cover;
}

@media screen and (max-width: 768px) {
  .imageBox {
    flex-direction: column; /* 縦並び */
    gap: 20px; /* SPは隙間を狭く */
    margin: 30px auto;
  }
}
/* =========================
   section（イントロ）
========================= */
section.intro {
  text-align: center;
  padding: 60px 20px 0px;
}
@media screen and (max-width: 768px) {
  section.intro {
    padding: 50px 20px 0px;
    text-align: left;
  }
}
section.intro .tit-L {
  margin-bottom: 25px;
}
@media screen and (max-width: 768px) {
  section.intro .tit-L {
    padding: 0 0 20px;
    text-align: left;
  }
}
section.intro .txt-M {
  margin-bottom: 60px;
}
@media screen and (max-width: 768px) {
  section.intro .txt-M {
    margin-bottom: 40px;
  }
}

/* =========================
   Page Hero（共通）
========================= */
.pageHero {
  background: linear-gradient(135deg, #f7f1ea 0%, #f3eef6 35%, #eaf4fb 70%, #f7f1ea 100%);
}

.pageHero-inner {
  max-width: 1000px;
  margin: 0 auto;
  padding: 60px 24px 60px;
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 50px;
}

/* ===== 左：テキスト ===== */
.pageHero-content {
  flex: 1;
  min-width: 320px;
}

.pageHero-title {
  margin: 20px 0 40px;
  font-size: clamp(44px, 4.2vw, 72px);
  line-height: 1.15;
  color: #3a2a2a;
  font-weight: normal;
  font-size: 3.8rem;
  font-family: "Shippori Mincho", serif;
}

.pageHero-titleAccent {
  color: #d50e4c;
  font-size: 5rem;
}

.pageHero-subTitle {
  display: inline-block;
  background: rgba(199, 39, 72, 0.8392156863);
  font-size: 1.5rem;
  padding: 8px 20px;
  font-family: Noto sans-serif;
  font-weight: bold;
  color: #fff;
  border-radius: 5px;
  margin-top: 20px;
}

.pageHero-lead {
  font-size: 1.3rem;
  margin-top: 20px;
  color: #876d75;
  letter-spacing: 0.05em;
}

/* ===== 右：画像 ===== */
.pageHero-media {
  flex: 1;
  display: flex;
  justify-content: flex-end;
}

.pageHero-imgWrap {
  height: auto;
  width: 300px;
  -o-object-fit: cover;
     object-fit: cover;
  aspect-ratio: 3/2; /* 300x200 */
  overflow: hidden;
  border-radius: 6px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.08);
}

.pageHero-img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
}

/* =========================
   Responsive
========================= */
@media (max-width: 900px) {
  .pageHero {
    margin-bottom: 0;
  }
  .pageHero-inner {
    flex-direction: column;
    padding: 30px 20px 0px;
    gap: 30px;
  }
  .pageHero-media {
    width: 60%;
    justify-content: flex-start;
    margin-bottom: -30px;
  }
  .pageHero-imgWrap {
    height: auto;
    width: 100%;
  }
  .pageHero-title {
    font-size: 3rem;
    margin: 0 0 10px;
  }
  .pageHero-titleAccent {
    font-size: 4rem;
  }
}
/* =========================
   section（バナー）
========================= */
section.banner {
  text-align: center;
  margin: 60px 0;
}

section.intro + section.banner {
  margin: 0 0 60px;
}

/* =========================
   Banner
   ========================= */
.bannerBox {
  display: flex;
  width: 100%;
  max-width: 840px;
  margin: 0 auto;
  gap: 40px; /* 真ん中の隙間 */
}

.bannerBox-item {
  border: solid 3px #d50e4c;
  margin: 0 auto;
}

.bannerBox-item img {
  width: 100%;
  height: auto;
  display: inline-block;
  -o-object-fit: cover;
     object-fit: cover;
}

@media screen and (max-width: 768px) {
  .bannerBox {
    width: 90%;
    flex-direction: column; /* 縦並び */
    gap: 20px; /* SPは隙間を狭く */
  }
}
/* =========================
   CTA
========================= */
section.cta {
  padding: 80px 20px 60px;
  background-color: #d50e4c;
  color: #fff;
  text-align: center;
  background: url("../img/common/cta-bg.png") center/cover no-repeat;
}

.tit-M.cta-tit {
  color: #fff;
  margin-bottom: 40px;
}

.tit-M.cta-tit::before {
  background-color: #fff;
}

.txt-M.cta-txt {
  color: #fff;
  margin-bottom: 40px;
}

/* =========================
   ボタン（CTA）
========================= */
.cta-btn {
  display: inline-block;
  position: relative;
  width: 100%;
  max-width: 500px;
  overflow: hidden;
}

.cta-btn img {
  display: block;
  width: 100%;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

@media (hover: none) {
  .cta-btn:active img {
    transform: scale(0.96);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3);
  }
}
.cta-btn {
  display: inline-block;
  border-radius: 9999px; /* 角丸を親で保持 */
  overflow: hidden; /* 拡大時にはみ出さない */
  transition: transform 0.25s ease;
}

.cta-btn img {
  display: block;
  width: 100%;
  height: auto;
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), filter 0.25s ease, box-shadow 0.25s ease;
}

/* hover：派手だけど綺麗 */
.cta-btn:hover img {
  transform: scale(1.08);
  box-shadow: 0 12px 30px rgba(213, 14, 76, 0.35), 0 0 0 4px rgba(213, 14, 76, 0.15);
}

/* 押したとき */
.cta-btn:active {
  transform: scale(0.96);
}

.cta-btn::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent 30%, rgba(255, 255, 255, 0.6), transparent 70%);
  transform: translateX(-120%);
  transition: transform 0.6s ease;
}

.cta-btn:hover::after {
  transform: translateX(120%);
}

/* =========================
   ボタン（もっと見る）
========================= */
.btn-more {
  max-width: 390px;
  width: 80%;
  height: 56px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  border: 2px solid #d50e4c;
  border-radius: 9999px;
  color: #d50e4c;
  font-size: 1.8rem;
  font-weight: bold;
  letter-spacing: 0.1em;
  text-decoration: none;
  background: #fff;
  transition: background 0.3s ease, color 0.3s ease;
  margin-top: 60px;
}
@media screen and (max-width: 768px) {
  .btn-more {
    margin-top: 30px;
    font-size: 1.5rem;
    height: 48px;
    width: 70%;
  }
}

.btn-more01 {
  margin-top: 10px;
}
@media screen and (max-width: 768px) {
  .btn-more01 {
    margin-top: 0px;
  }
}

/* 矢印 */
.btn-more-arrow {
  width: 8px;
  height: 8px;
  border-top: 2px solid #d50e4c;
  border-right: 2px solid #d50e4c;
  transform: rotate(45deg);
  transition: border-color 0.3s ease, transform 0.3s ease;
}

/* hover */
.btn-more:hover {
  background: #d50e4c;
  color: #fff;
  text-decoration: none;
}

.btn-more:hover .btn-more-arrow {
  border-color: #fff;
  transform: rotate(45deg);
}

.btnWrap {
  margin: 0px auto;
  text-align: center;
}

/* =========================
   section（流れ）
========================= */
section.flow {
  padding: 100px 30px;
}
@media screen and (max-width: 768px) {
  section.flow {
    padding: 60px 30px 20px;
  }
}
section.flow {
  text-align: left;
  background-color: #f8f8f8;
}

.flowBox {
  display: block;
  max-width: 920px;
  margin: 60px auto;
}
@media screen and (max-width: 768px) {
  .flowBox {
    margin: 40px auto;
  }
}
.flowBox:last-child {
  margin-bottom: 0;
}
.flowBox .flowList {
  margin-top: 40px;
}
.flowBox .tit-S {
  letter-spacing: 0.1rem;
  font-size: 2.2rem;
}

/* =========================
   flowList
========================= */
.flowList {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px 40px;
}

.flow-access .flowBox .flowList {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px;
}

.flowList-item {
  color: #fff;
}

.flowList-img {
  width: 100%;
  height: auto;
  display: block;
  margin-bottom: 20px;
}

/* 数字＋タイトル */
.flowList-head {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 15px;
}

.flowList-num {
  color: #e60033;
  font-size: 20px;
  font-weight: 700;
  line-height: 1;
  font-family: "Krona One", sans-serif;
  font-weight: 400;
}

.flowList-tit {
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 0.1em;
}

.flowList-txt {
  font-size: 14px;
  line-height: 1.8;
  color: #333;
  letter-spacing: 0.1em;
}

/* =========================
   SP：横並び（横スクロール）
========================= */
@media screen and (max-width: 768px) {
  .flowList {
    display: flex;
    gap: 16px;
    overflow-x: auto;
    padding-bottom: 12px;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
  }
  .flow-access .flowBox .flowList {
    display: flex;
    gap: 16px;
    overflow-x: auto;
    padding-bottom: 12px;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
  }
  .flow-gallery .flowBox .flowList {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }
  .flowList-item {
    flex: 0 0 80%;
    scroll-snap-align: start;
  }
  .flow-access .flowBox .tit-S {
    font-size: 1rem;
    line-height: 1.6;
  }
  .flow-access .flowBox .flowList .flowList-item {
    flex: 0 0 60%;
  }
  .flowList-img {
    margin-bottom: 12px;
  }
  .flowList-head {
    gap: 8px;
  }
  .flowList-tit {
    font-size: 16px;
  }
  .flowList-txt {
    font-size: 13px;
    line-height: 1.7;
  }
  /* スクロールバー非表示（任意） */
  .flowList::-webkit-scrollbar {
    display: none;
  }
}
/* =========================
   スタジオギャラリー
========================= */
.flow-gallery .flowList-head {
  justify-content: center;
}

@media screen and (max-width: 768px) {
  .flow-gallery .flow-List {
    flex-direction: column;
  }
}

.flow-gallery .flowList-tit {
  font-size: 16px;
  display: inline-block;
  text-align: center;
  font-weight: 600;
  letter-spacing: 0.1em;
}

/* =========================
   section
========================= */
section.plan_main {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 80px 20px;
  text-align: center;
}
@media screen and (max-width: 768px) {
  section.plan_main {
    padding: 60px 30px;
  }
}

section.plan_others {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px 20px 100px;
  text-align: center;
}
@media screen and (max-width: 768px) {
  section.plan_others {
    padding: 20px 20px 50px;
  }
}

/* =========================
   料金プランカード（大）
========================= */
.planCard-L {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px 60px;
  margin-top: 60px;
}

/* item */
.planCard-L-item {
  list-style: none;
  color: #fff;
}

/* 偶数だけ下にずらす（画像みたいなリズム） */
.planCard-L-item:nth-child(even) {
  margin-top: 80px;
}

/* link */
.planCard-L-link {
  display: block;
  position: relative;
  text-decoration: none;
  color: inherit;
  border-radius: 0 0 60px 0;
}

/* image */
.planCard-L-link img {
  width: 100%;
  display: block;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 0 0 60px 0;
}

.planCard-L-tit {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 70%;
  background: #fff;
  color: #333;
  padding: 14px 48px 14px 24px; /* 右に余白 */
  font-size: 1.6rem;
  font-weight: bold;
  letter-spacing: 0.1em;
  display: inline-flex;
  align-items: center;
}

/* 矢印 */
.planCard-L-tit::after {
  content: "";
  position: absolute;
  right: 20px;
  width: 8px;
  height: 8px;
  border-top: 2px solid #e6004c;
  border-right: 2px solid #e6004c;
  transform: rotate(45deg);
}

/* text */
.planCard-L-txt {
  margin-top: 24px;
  font-size: 1.4rem;
  letter-spacing: 0.1em;
  line-height: 2;
  text-align: left;
  color: #333;
}

/* =========================
   Hover
========================= */
.planCard-L-link:hover img {
  opacity: 0.9;
}

.planCard-L-link:hover {
  transition: 0.18s cubic-bezier(0.4, 0, 0.2, 1);
  transform: translateY(-8px);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.05);
}

/* =========================
   Responsive
========================= */
@media screen and (max-width: 1024px) {
  .planCard-L {
    gap: 40px 40px;
  }
  .planCard-L-item:nth-child(even) {
    margin-top: 100px;
  }
}
@media screen and (max-width: 768px) {
  .planCard-L {
    grid-template-columns: 1fr;
    gap: 30px;
    margin-top: 40px;
  }
  .planCard-L-item:nth-child(even) {
    margin-top: 0;
  }
  .planCard-L-tit {
    font-size: 1.4rem;
    padding: 12px 20px;
    width: 80%;
  }
  .planCard-L-txt {
    font-size: 1.4rem;
    margin-top: 10px;
  }
}
/* =========================
   料金プランカード（小）
========================= */
/* =========================
   その他のプラン（元デザイン寄せ）
========================= */
/* GRID */
.planCard-M {
  list-style: none;
  padding: 0;
  margin: 40px 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 44px 44px; /* 元デザイン寄せで広め */
}

/* SP：2カラム固定 */
@media (max-width: 768px) {
  .planCard-M {
    margin: 20px 0;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 26px 18px;
  }
}
/* LINK（カードの基準） */
.planCard-M-link {
  position: relative;
  display: block;
  text-decoration: none;
  color: inherit;
  /* ラベルが“下にはみ出す”分を確保（ここが崩れの主因） */
  padding-bottom: 0px;
}

@media (max-width: 768px) {
  .planCard-M-link {
    padding-bottom: 0px;
  }
}
/* 画像 */
.planCard-M-link {
  border-radius: 0 0 30px 0;
}

.planCard-M-link > img {
  width: 100%;
  aspect-ratio: 4/3;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
  border-radius: 0 0 30px 0;
  position: relative;
  z-index: 2;
}

/* ラベル（タイトル）— 画像に少し被せて下へ出す */
.planCard-M-tit,
.planCard-m-tit {
  position: absolute;
  left: 0;
  bottom: 12px; /* linkの下端に置く */
  transform: translateY(12px); /* “少し下に出す” */
  z-index: 3;
  letter-spacing: 0.1em;
  margin: 0;
  background: #fff;
  /* 幅が細すぎて崩れるのを防ぐ（SPで特に重要） */
  width: clamp(150px, 78%, 280px);
  padding: 16px 44px 16px 18px;
  font-size: 16px;
  height: 56px;
  font-weight: 600;
  line-height: 1.25;
  /* “ラベルの高さがブレても矢印が中央に来る” */
  display: flex;
  align-items: center;
  /* 単語途中で割れない（日本語で見栄えが悪くなるのを防止） */
  word-break: keep-all;
  overflow-wrap: anywhere; /* 長い場合だけ折る */
}

/* 矢印 */
.planCard-M-tit::after,
.planCard-m-tit::after {
  content: "";
  position: absolute;
  right: 16px;
  top: 50%;
  width: 8px;
  height: 8px;
  border-right: 2px solid #e6004d;
  border-bottom: 2px solid #e6004d;
  transform: translateY(-50%) rotate(-45deg);
}

/* SP最適化：ラベルが“細すぎる/大きすぎる”問題を潰す */
@media (max-width: 768px) {
  .planCard-M-tit,
  .planCard-m-tit {
    width: clamp(140px, 90%, 260px); /* 2カラムでも読める幅に */
    padding: 14px 0 14px 5px;
    font-size: 12px;
    transform: translateY(10px);
    height: 40px;
    bottom: 10px;
    letter-spacing: 0;
  }
  .planCard-L-link > img {
    aspect-ratio: 5/3;
  }
  .planCard-M-link > img {
    aspect-ratio: 4/4;
  }
}
/* hover（軽め） */
@media (hover: hover) {
  .planCard-M-link > img {
    transition: transform 0.25s ease;
  }
}
/* =========================
   Hover
========================= */
.planCard-M-link:hover img {
  opacity: 0.9;
}

.planCard-M-link:hover {
  transition: 0.18s cubic-bezier(0.4, 0, 0.2, 1);
  transform: translateY(-8px);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.05);
}

/* =========================
   secrtion（よくある質問）
========================= */
section.qa {
  padding: 100px 30px;
}
@media screen and (max-width: 768px) {
  section.qa {
    padding: 60px 30px 60px;
  }
}
section.qa {
  text-align: center;
  background-color: #fcfcfc;
}

/* =========================
   qaList
========================= */
.qa-tit {
  color: #d50e4c;
  font-size: 24px;
  font-weight: 600;
  letter-spacing: 0.05em;
  line-height: 1.4;
  text-align: left;
  margin: 60px auto 0;
  display: block;
  max-width: 800px;
  font-size: 2.4rem;
  text-align: center;
}
@media screen and (max-width: 768px) {
  .qa-tit {
    font-size: 1.8rem;
  }
}

.qaList {
  max-width: 800px;
  margin: 40px auto 0;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

@media screen and (max-width: 768px) {
  .qa-tit + .qaBox .qaList {
    margin-top: 20px;
  }
}
.qaList-item {
  background-color: #f8f8f8;
  border-radius: 0 20px 20px 20px;
  overflow: hidden;
}

/* ---------- Q ---------- */
.qaList-q {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px 24px;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  background-color: #ffe5e8;
}

.qaList-qIcon {
  color: #d50e4c;
  font-size: 20px;
  font-weight: 700;
  flex-shrink: 0;
  font-family: "Krona One", sans-serif;
  font-weight: 400;
}

.qaList-qTxt {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: #d50e4c;
  flex: 1;
}

/* 開閉アイコン（−） */
.qaList-toggle {
  position: relative;
  width: 16px;
  height: 2px;
  background-color: #d50e4c;
  flex-shrink: 0;
}

/* ---------- A ---------- */
.qaList-a {
  display: flex;
  gap: 16px;
  padding: 20px;
  text-align: left;
  background-color: #fff;
}

.qaList-aIcon {
  color: #ccc;
  font-size: 20px;
  font-weight: 700;
  flex-shrink: 0;
  font-family: "Krona One", sans-serif;
  font-weight: 400;
}

.qaList-aTxt {
  font-size: 14px;
  line-height: 1.8;
  color: #333;
  letter-spacing: 0.1em;
}

/* =========================
   SP
========================= */
@media screen and (max-width: 768px) {
  .qaList-q {
    padding: 16px;
    gap: 12px;
  }
  .qaList-qTxt {
    font-size: 14px;
  }
  .qaList-a {
    padding: 15px;
  }
  .qaList-aTxt {
    font-size: 13px;
    line-height: 1.7;
  }
}
/* =========================
   section（選ばれる理由）
========================= */
section.reasons {
  padding: 100px 30px;
}
@media screen and (max-width: 768px) {
  section.reasons {
    padding: 60px 30px 40px;
  }
}
section.reasons {
  text-align: center;
  background-color: #fbf9f7;
}

/* =========================
   reasonList
========================= */
.reasonList {
  max-width: 920px;
  margin: 40px auto 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 80px 60px;
  list-style: none;
}
@media screen and (max-width: 768px) {
  .reasonList {
    grid-template-columns: 1fr;
    gap: 60px;
    padding: 20px 0;
    margin: 0;
  }
}

.reasonList-item {
  color: #fff;
}

/* 画像まわり　*/
.reasonList-item img {
  width: 100%;
  height: auto;
  display: block;
  position: relative;
}

/* 像ラッパーを擬似的に作る */
.reasonList-item {
  position: relative;
  overflow: hidden;
}

/* 連番の初期化 */
.reasonList {
  counter-reset: reason;
}

/* 画像ラッパー */
.reasonList-imgWrap {
  position: relative;
  overflow: hidden;
}

/* 画像 */
.reasonList-imgWrap img {
  width: 100%;
  height: auto;
  display: block;
}

/* 番号（画像起点・::after） */
.reasonList-imgWrap::after {
  counter-increment: reason;
  content: counter(reason, decimal-leading-zero);
  position: absolute;
  bottom: -12px;
  left: 10px;
  font-size: 80px;
  line-height: 1;
  color: #fff;
  z-index: 2;
  font-family: "Bodoni Moda", serif;
  font-weight: 800;
}

.reasonList {
  counter-reset: reason;
}

/* タイトル　*/
.reasonList-tit {
  margin: 30px 0 20px;
  font-size: 20px;
  font-weight: bold;
  color: #d50e4c;
  letter-spacing: 0.1em;
}

/* テキスト　*/
.reasonList-txt {
  font-size: 14px;
  line-height: 2;
  letter-spacing: 0.1em;
  color: #333;
  text-align: justify;
}

/* =========================
   Responsive
========================= */
@media screen and (max-width: 768px) {
  .reasonList-item::before {
    font-size: 64px;
  }
}
/* =========================
   section（スライダーギャラリー）
========================= */
section.slider {
  padding: 100px 0px;
}
@media screen and (max-width: 768px) {
  section.slider {
    padding: 60px 0px 40px;
  }
}
section.slider {
  text-align: center;
  background-color: #fbf9f7;
}

/* =========================
   imageSlider
========================= */
.imageSlider {
  margin: 10px auto;
  max-width: 1000px;
  overflow: visible; /* はみ出しを見せる */
}

.swiper {
  overflow: visible;
}

.swiper-slide {
  display: flex;
  justify-content: center;
}

.swiper-slide img {
  width: 100%;
  max-width: 200px;
  height: auto;
  -o-object-fit: cover;
     object-fit: cover;
}

/* =========================
   スタッフ
========================= */
section.staff {
  max-width: 1000px;
  margin: 0 auto;
  padding: 0px 30px 120px;
}
@media screen and (max-width: 768px) {
  section.staff {
    padding: 0 30px 60px;
  }
}
section.staff {
  text-align: center;
  background-color: #fff;
}

/* ===== li.staffList-item ===== */
.staffList p {
  text-align: left;
}

.staffList-item {
  list-style: none;
  padding-bottom: 80px;
  margin-bottom: 100px;
  border-bottom: solid 1px #eee;
}

.staffList-item:last-child {
  margin-bottom: 0;
  border-bottom: none;
}

/* 上段（黒背景） */
.staffList-hero {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: clamp(18px, 3vw, 36px);
  align-items: start;
}

.staffList-media {
  width: 100%;
  max-width: 350px;
  aspect-ratio: 4/3; /* 写真の比率。必要なら調整 */
  overflow: hidden;
}

.staffList-media img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
  border-radius: 10px;
}

.staffList-intro {
  padding-top: clamp(6px, 1.2vw, 14px);
}

.staffList-name {
  margin: 0 0 14px;
  font-size: clamp(22px, 3vw, 34px);
  font-weight: 700;
  letter-spacing: 0.1em;
  font-size: 2.4rem;
  color: #d50e4c; /* ピンク見出し */
  text-align: left;
}

.staffList-lead {
  margin: 0;
  color: #333;
  font-size: 14px;
  line-height: 2.2;
  letter-spacing: 0.02em;
}

/* 下段（白カード） */
.staffList-card {
  margin: 50px 0 0;
  background: #f8f8f8;
  padding: clamp(22px, 3vw, 34px) clamp(22px, 4vw, 44px);
}

.staffList-item + .staffList-item {
  margin-top: clamp(18px, 2.6vw, 30px);
}

.highlight-diamond {
  position: relative;
  padding-left: 30px;
  font-size: 18px;
  line-height: 1.7;
  font-weight: 700;
  color: #ff6f9e;
  margin-bottom: 20px;
  text-align: left;
}

.highlight-diamond::before {
  content: "◆";
  position: absolute;
  left: 0;
  top: 1px;
  color: #ff6f9e;
  font-size: 16px;
  line-height: 1.7;
}

.staffList-text {
  margin: 0;
  color: #222;
  font-size: 14px;
  line-height: 2;
  letter-spacing: 0.02em;
}

.staffList-text + .staffList-text {
  margin-top: 10px;
}

.staffList-card-item {
  margin: 20px 0;
}

/* レスポンシブ */
@media (max-width: 900px) {
  .staffList-hero {
    grid-template-columns: 1fr;
  }
  .staffList-card {
    margin-left: 0;
    margin-right: 0;
    margin-top: 20px;
  }
  .staffList-item {
    list-style: none;
    padding-bottom: 40px;
    margin-bottom: 40px;
  }
  .staffList-text {
    line-height: 1.8;
  }
}
/* ===== PCのみ：サムネ左右交互 ===== */
@media (min-width: 901px) {
  .staffList-item:nth-child(even) .staffList-hero {
    grid-template-columns: 1fr 300px;
  }
  .staffList-item:nth-child(even) .staffList-media {
    order: 2;
  }
  .staffList-item:nth-child(even) .staffList-intro {
    order: 1;
  }
}
/* =========================
   section（ステップ）
========================= */
section.step {
  max-width: 1000px;
  margin: 0 auto;
  padding: 0px 30px 120px;
}
@media screen and (max-width: 768px) {
  section.step {
    padding: 40px 30px 60px;
  }
}
section.step {
  text-align: center;
  background-color: #fff;
}

/* =========================
   stepList
========================= */
.stepList {
  list-style: none;
  margin: 0;
  padding: 0;
}

.stepList-item {
  padding: 80px 0;
  border-bottom: 1px solid #eee;
}

/* 偶数番目だけ左右反転 */
.stepList-item:nth-child(even) .stepList-inner {
  flex-direction: row-reverse;
}

/* 余白の見え方を整えたい場合（任意） */
.stepList-item:nth-child(even) .stepList-imgWrap {
  right: 20px;
}

.stepList-inner {
  display: flex;
  gap: 60px;
  align-items: flex-start;
}

/* ----- Image ----- */
.stepList-imgWrap {
  position: relative;
  width: min(300px, 40vw);
  aspect-ratio: 4/3;
  flex: 0 0 auto;
}

.stepList-imgBg {
  position: absolute;
  left: 20px;
  bottom: -20px;
  width: 100%;
  height: 100%;
  background: #f6ebeb; /* 薄ピンク */
  z-index: 0;
}

.stepList-img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
}

/* ----- Text block ----- */
.stepList-body {
  flex: 1 1 auto;
  min-width: 0;
}

.stepList-head {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 18px;
}

.stepList-no {
  width: 34px;
  height: 34px;
  border-radius: 999px;
  background: #d94a6a; /* 濃いピンク */
  color: #fff;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  line-height: 1;
}

.stepList-tit {
  margin: 0;
  font-size: 22px;
  font-weight: bold;
  color: #d94a6a;
  letter-spacing: 0.1em;
}

.stepList-txt {
  margin: 0;
  font-size: 15px;
  line-height: 2;
  color: #333;
  text-align: left;
  letter-spacing: 0.1em;
}

.stepList-note {
  margin: 18px 0 0;
  font-size: 14px;
  color: #333;
  letter-spacing: 0.1em;
}

/* ===== Responsive ===== */
@media (max-width: 768px) {
  .stepList-inner {
    flex-direction: column;
    gap: 60px;
  }
  .stepList-imgWrap {
    width: 100%;
    aspect-ratio: 16/9;
  }
  .stepList-tit {
    font-size: 20px;
  }
}
@media (max-width: 768px) {
  .stepList-item {
    padding: 60px 0;
  }
  .stepList-item:first-child {
    padding-top: 30px;
  }
  .stepList-item:nth-child(even) .stepList-inner {
    flex-direction: column;
  }
  .stepList-item .stepList-imgWrap {
    left: -10px;
    right: auto;
  }
  .stepList-tit {
    font-size: 20px;
  }
  .stepList-txt {
    font-size: 14px;
  }
}
/* =========================
   表
========================= */
section.info {
  padding: 60px 30px 80px;
}
@media screen and (max-width: 768px) {
  section.info {
    padding: 60px 30px 60px;
  }
}
section.info {
  text-align: center;
}

/* =========================
   Table
========================= */
/* テーブル風定義リスト */
.table {
  margin: 60px auto;
  padding: 0;
  margin-left: auto;
  margin-right: auto;
}

.table-term {
  background: #fff0f5;
  color: #e91e63;
  font-weight: bold;
  font-size: 14px;
  padding: 16px 20px;
  margin: 0;
  letter-spacing: 0.1em;
  border-bottom: 1px solid #e0e0e0;
}
@media screen and (max-width: 768px) {
  .table-term {
    border-bottom: none;
  }
}
.table-term {
  display: flex;
  align-items: center;
  width: 100%;
}

.table-desc {
  width: 100%;
  background: #fff;
  padding: 16px 24px;
  margin: 0;
  border-bottom: 1px solid #e0e0e0;
  line-height: 1.8;
  letter-spacing: 0.1em;
  color: #333;
  font-size: 14px;
  display: flex;
  align-items: flex-start;
  text-align: left;
}

/* 2カラムレイアウト（PC） */
@media (min-width: 769px) {
  .table {
    display: grid;
    grid-template-columns: 3fr 7fr;
    max-width: 800px;
    width: 100%;
  }
  .table-term {
    border-bottom: 1px solid #f3dfe2;
  }
  .table-desc {
    border-bottom: 1px solid #eee;
  }
  .table-term:nth-last-of-type(1) {
    border-bottom: none;
  }
  .table-desc:nth-last-of-type(1) {
    border-bottom: none;
  }
}
/* タブレット・スマートフォン */
@media (max-width: 768px) {
  .table-term {
    font-size: 14px;
    padding: 10px 20px;
  }
  .table-desc {
    font-size: 14px;
    padding: 16px 20px;
    min-height: 50px;
    border-bottom: 1px solid #f3dfe2;
  }
  .table-desc:last-of-type {
    border-bottom: none;
  }
}
/* =========================
  　タイトル
========================= */
.tit-L {
  font-size: 2.8rem;
  font-weight: bold;
  letter-spacing: 0.2em;
  line-height: 1.5;
  color: #d50e4c;
  text-align: center;
}
@media screen and (max-width: 768px) {
  .tit-L {
    font-size: 2rem;
    letter-spacing: 0.1em;
  }
}

.tit-M {
  font-size: 2.8rem;
  font-weight: bold;
  letter-spacing: 0.1em;
  line-height: 1.5;
  color: #333;
  display: inline-block;
  position: relative;
  margin-bottom: 50px;
}
@media screen and (max-width: 768px) {
  .tit-M {
    font-size: 2rem;
    margin-bottom: 40px;
  }
}

.tit-M::before {
  content: "";
  display: inline-block;
  height: 3px;
  width: 36px;
  background-color: #e91e63;
  position: absolute;
  bottom: -15px;
  left: 50%;
  transform: translateX(-50%);
}
@media screen and (max-width: 768px) {
  .tit-M::before {
    bottom: -20px;
  }
}

.tit-S {
  position: relative;
  color: #333;
  font-size: 24px;
  font-weight: 600;
  letter-spacing: 0.18em;
  padding-left: 60px;
  line-height: 1.4;
  text-align: left;
}
@media screen and (max-width: 768px) {
  .tit-S {
    font-size: 1.8rem;
    padding-left: 30px;
  }
}

.tit-S::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 30px;
  height: 3px;
  background-color: #e91e63;
}
@media screen and (max-width: 768px) {
  .tit-S::before {
    width: 20px;
  }
}

/* =========================
   テキスト
========================= */
.txt-M {
  font-size: 1.5rem;
  font-weight: normal;
  letter-spacing: 0.1em;
  line-height: 2;
  color: #333;
  margin: 30px auto;
}
@media screen and (max-width: 768px) {
  .txt-M {
    letter-spacing: 0.05em;
    line-height: 1.8;
    font-size: 1.4rem;
    margin: 20px auto;
  }
}

.txt-M em {
  font-weight: bold;
  color: #d50e4c;
}

p mark {
  font-weight: bold;
  color: #333;
  background: #fffbcc;
  padding: 2px;
}

/* =========================
   お客様の声
========================= */
section.voice {
  padding: 80px 30px 120px;
}
@media screen and (max-width: 768px) {
  section.voice {
    padding: 60px 30px 60px;
  }
}
section.voice {
  text-align: center;
  background-color: #fff;
}

/* =========================
   voiceList
========================= */
/* お客様の声リスト */
.voiceList {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 32px;
  list-style: none;
  padding: 0;
  margin: 0;
  max-width: 1000px;
  width: 100%;
  margin: 0 auto;
  margin-left: auto;
  margin-right: auto;
}

.voiceList-item {
  position: relative;
  background: #f8f8f8;
  border-radius: 16px;
  padding: 32px 24px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin-top: 50px;
}

.voiceList-head {
  position: absolute;
  top: -50px; /* カードの上に飛び出す */
  left: 50%;
  transform: translateX(-50%);
  margin-bottom: 24px;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
}

.voiceList-img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
  margin-bottom: 20px;
}

.voiceList-tit {
  font-size: 1.5rem;
  font-weight: bold;
  line-height: 1.6;
  color: #333;
  margin: 20px 0;
  letter-spacing: 0.1rem;
}

.voiceList-txt {
  font-size: 1.2rem;
  line-height: 1.8;
  color: #666;
  margin: 0;
  text-align: left;
  letter-spacing: 0.1rem;
  text-align: justify;
}

/* タブレット */
@media (max-width: 768px) {
  .voiceList {
    grid-template-columns: 1fr;
    gap: 24px;
    padding: 0 16px;
  }
  .voiceList-item {
    padding: 24px 20px;
  }
  .voiceList-tit {
    font-size: 16px;
    min-height: auto;
  }
  .voiceList-txt {
    font-size: 13px;
  }
}
/* スマートフォン */
@media (max-width: 480px) {
  .voiceList {
    gap: 20px;
  }
  .voiceList-txt {
    line-height: 1.5;
  }
  .voiceList-item {
    padding: 10px 16px 20px;
  }
  .voiceList-head {
    width: 80px;
    height: 80px;
    margin-bottom: 20px;
  }
  .voiceList-tit {
    font-size: 15px;
  }
}
/* =========================
   youtube
========================= */
section.youtube {
  padding: 100px 30px;
}
@media screen and (max-width: 768px) {
  section.youtube {
    padding: 60px 30px 40px;
  }
}
section.youtube {
  text-align: center;
  background-color: #fff;
}
section.youtube iframe {
  display: block;
  margin: 0 auto;
  max-width: 800px;
  width: 100%;
}

.youtube-wrap {
  width: 800px;
  max-width: 100%;
  margin: 0 auto; /* 中央寄せ */
}

.youtube-wrap iframe {
  width: 100%;
  aspect-ratio: 16/9; /* 高さ自動 */
  border: none;
}

/* =========================
   section（店舗紹介）
========================= */
section.shopCards {
  padding: 100px 30px;
}
@media screen and (max-width: 768px) {
  section.shopCards {
    padding: 60px 30px 60px;
  }
}
section.shopCards {
  text-align: center;
  background-color: #f8f8f8;
}

/* =========================
   Shop cards (2-up)
========================= */
.shopCards {
  padding: 40px 0;
}

.shopCards-inner {
  max-width: 450px;
  margin: 0 auto;
  padding: 0 30px;
  text-align: left;
  display: flex;
  flex-direction: row;
  gap: 48px;
}

.shopCard {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.shopCard-media {
  border-radius: 18px;
  overflow: hidden;
  background: #f3f3f3;
  aspect-ratio: 16/9;
}

.shopCard-img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
}

.shopCard-title {
  margin: 18px 0 16px;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 0.02em;
  letter-spacing: 0.1em;
}

.shopCard-dl {
  margin: 0 0 18px;
}

.shopCard-row {
  display: grid;
  grid-template-columns: 92px 1fr;
  align-items: center;
  -moz-column-gap: 14px;
       column-gap: 14px;
  padding: 10px 0;
}

.shopCard-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 30px;
  border: 1px solid #9a9a9a;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: #111;
}

.shopCard-value {
  margin: 0;
  font-size: 14px;
  line-height: 1.7;
  color: #111;
  letter-spacing: 0.1em;
}

.shopCard-map {
  border-radius: 0;
  overflow: hidden;
  text-align: center;
}

.shopCard-mapImg {
  width: 100%;
  height: auto;
  display: block;
}

.shopCard-btn {
  margin-top: 26px;
  height: 64px;
  border-radius: 999px;
  border: 2px solid #e50012;
  color: #e50012;
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  position: relative;
  transition: transform 0.15s ease, background 0.15s ease, color 0.15s ease;
}

.shopCard-btn:hover {
  background: #e50012;
  color: #fff;
  transform: translateY(-1px);
}

.shopCard-btnTxt {
  font-size: 18px;
  font-weight: 800;
  letter-spacing: 0.04em;
}

.shopCard-btnArrow {
  width: 10px;
  height: 10px;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  transform: rotate(45deg);
  margin-left: 8px;
}

/* =========================
   Responsive
========================= */
@media (max-width: 900px) {
  .shopCards-inner {
    flex-direction: column;
  }
  .shopCards-inner {
    grid-template-columns: 1fr;
    gap: 60px;
    padding: 10px;
  }
}
@media (max-width: 480px) {
  .shopCard-title {
    font-size: 20px;
  }
  .shopCard-row {
    grid-template-columns: 86px 1fr;
    -moz-column-gap: 10px;
         column-gap: 10px;
  }
  .shopCard-btn {
    height: 58px;
  }
  .shopCard-btnTxt {
    font-size: 16px;
  }
}
/* =========================
   secrtion（よくある質問）
========================= */
section.pr {
  padding: 100px 30px;
}
@media screen and (max-width: 768px) {
  section.pr {
    padding: 60px 10px 40px;
  }
}
section.pr {
  text-align: left;
  background-color: #fbf9f7;
}

/* =========================
   prList
========================= */
/* ===== wrapper ===== */
.pr .postCards {
  max-width: 1200px;
  margin: 0 auto;
}

.pr .postCards-inner {
  padding: 0 24px;
}

/* ===== grid ===== */
.pr .postCards-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}

/* ===== card ===== */
.pr .postCards-item {
  background-color: #fff;
  padding: 30px 20px;
}

.pr .postCard {
  display: flex;
  flex-direction: column;
  height: 100%;
  text-decoration: none;
  color: inherit;
}

/* サムネ（常に高さを確保） */
.pr .postCard-thumb {
  position: relative;
  overflow: hidden;
  background: #e2e2e2; /* 画像なしのグレー */
}

/* スクショに近い比率（必要ならここだけ調整） */
.pr .postCard-thumb::before {
  content: "";
  display: block;
  padding-top: 56.25%; /* 16:9 */
}

.pr .postCard-thumb img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

/* 画像なし（divだけ置く運用） */
.pr .postCard-thumb.is-empty {
  background: #dcdcdc;
}

/* タイトル */
.pr .postCard-title {
  margin: 16px 0 14px;
  font-size: 15px;
  line-height: 1.75;
  font-weight: 700;
  letter-spacing: 0.05em;
  display: -webkit-box;
  -webkit-line-clamp: 3; /* スクショは3行 */
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 5.25em; /* 3行分の高さ確保で下段揃える */
}

/* メタ */
.pr .postCard-meta {
  margin-top: auto; /* 下に張り付けて高さ揃える */
  display: flex;
  align-items: center;
  gap: 18px;
}

.pr .postCard-tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 24px;
  padding: 0 10px;
  border: 1.5px solid #e6006e;
  border-radius: 5px;
  color: #e6006e;
  background: #fff;
  text-decoration: none;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

.pr .postCard-tag.is-campaign {
  --accent: #e6006e;
}

.pr .postCard-tag.is-news {
  --accent: #e6006e;
}

.pr .postCard-tag.is-column {
  --accent: #e6006e;
}

.pr .postCard-date {
  font-size: 12px;
  color: #333;
  letter-spacing: 0.02em;
}

/* hover */
@media (hover: hover) {
  .pr .postCard:hover .postCard-thumb img {
    transform: scale(1.03);
    transition: transform 0.35s ease;
  }
}
/* ===== responsive ===== */
@media (max-width: 900px) {
  .pr .postCards-list {
    grid-template-columns: repeat(2, 1fr);
    gap: 32px;
  }
}
@media (max-width: 560px) {
  .pr .postCards-inner {
    padding: 0 16px;
  }
  .pr .postCards-list {
    grid-template-columns: 1fr;
    gap: 24px;
  }
}
.pr .pagination {
  margin-top: 60px;
  display: flex;
  justify-content: center;
}

.pr .pagination .nav-links {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.pr .pagination a,
.pr .pagination span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 14px;
  border-color: #e6006e;
  border: 1px solid #e6006e;
  border-radius: 999px;
  text-decoration: none;
  color: #e6006e;
  font-size: 14px;
}

.pr .pagination .current {
  color: #e8aac8;
  border-color: #e8aac8;
}

/* =========================
   section（PR）
========================= */
section.pr {
  padding: 100px 30px;
  text-align: center;
  background-color: #fbf9f7;
}

@media screen and (max-width: 768px) {
  section.pr {
    padding: 60px 30px;
  }
}
.prlist {
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
}

.prlist a {
  text-decoration: none;
  color: inherit;
}

.prlist a:hover {
  color: #d50e4c;
}

.prlist__list {
  list-style: none;
  padding: 0;
  margin: 0;
  border-top: 1px solid #eee;
}

/* 行全体：PCは横並び */
.prlist__item {
  display: flex;
  align-items: center;
  gap: 32px;
  padding: 22px 12px;
  border-bottom: 1px solid #eee;
  text-align: left;
}

/* メタ（PCでは左カラム） */
.prlist__meta {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 0 0 180px; /* ← PCでのメタ幅 */
}

.prlist__date {
  font-size: 12px;
  color: #111;
  letter-spacing: 0.02em;
}

.prlist__tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 21px;
  padding: 0 10px;
  border: 1.5px solid #e6006e;
  border-radius: 5px;
  color: #e6006e;
  background: #fff;
  text-decoration: none;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

/* テキスト（PCでは右カラム） */
.prlist__text {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.6;
  flex: 1;
}

.prlist__link {
  color: inherit;
  text-decoration: none;
}

.prlist__link:hover {
  color: #d50e4c;
  text-decoration: underline;
}

/* =================
   SP：2列 → 2行
================= */
@media (max-width: 768px) {
  .prlist__item {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    padding: 16px;
  }
  .prlist__meta {
    flex: none;
  }
  .prlist__date {
    font-size: 13px;
  }
  .prlist__tag {
    font-size: 11px;
  }
  .prlist__text {
    font-size: 13px;
    font-weight: 600;
  }
}
/* ===== single PR ===== */
/* 背景を切らさない：背景専用レイヤー化 */
.singlePrWrap {
  position: relative;
  padding: 54px 0 70px;
  background: none; /* ← ここ重要（既存のbackgroundを無効化） */
}

.singlePrWrap::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  height: 500px;
  background: linear-gradient(135deg, #f7f1ea 0%, #f3eef6 35%, #eaf4fb 70%, #f7f1ea 100%);
}

/* 中身を背景より上に */
.singlePr {
  position: relative;
  z-index: 1;
  max-width: 980px;
  margin: 0 auto;
  padding: 24px 0 80px;
}

.singlePrHead {
  text-align: center;
  margin-bottom: 22px;
}
@media (max-width: 560px) {
  .singlePrHead {
    margin-bottom: 0;
  }
}

.singlePrTitle {
  margin: 0;
  font-size: 28px;
  width: 80%;
  margin: 20px auto 0;
  line-height: 1.6;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #e6006e;
}
@media (max-width: 560px) {
  .singlePrTitle {
    margin-top: 0;
  }
}

.singlePrMeta {
  margin-top: 14px;
  display: inline-flex;
  align-items: center;
  gap: 18px;
  margin-bottom: 20px;
}

.singlePrTag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 24px;
  padding: 0 10px;
  border: 1.5px solid #e6006e;
  border-radius: 5px;
  color: #e6006e;
  background: #fff;
  text-decoration: none;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

.singlePrDate {
  font-size: 12px;
  color: #111;
  letter-spacing: 0.02em;
}

/* image */
.singlePrThumb {
  margin: 26px auto 0;
  max-width: 760px;
  margin-bottom: 80px;
}
@media (max-width: 560px) {
  .singlePrThumb {
    margin-top: 10px;
    margin-bottom: 40px;
  }
}

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

/* content */
.singlePrContent {
  max-width: 760px;
  margin: 34px auto 0;
  font-size: 14px;
  line-height: 1.6;
  letter-spacing: 0.05em;
  color: #222;
}

.singlePrContent p {
  margin: 0 0 20px;
  line-height: 2;
}

/* 見出し（スクショの「ピンク文字＋線」寄せ） */
.singlePrContent h1 {
  font-size: 24px;
  letter-spacing: 0.01em;
  font-weight: bold;
  color: #e6006e;
  border-bottom: 1px solid #e50012;
  padding-bottom: 10px;
  margin-bottom: 30px;
  margin-top: 40px;
}

.singlePrContent h2 {
  position: relative;
  padding-left: 30px;
  font-size: 18px;
  line-height: 1.7;
  font-weight: 700;
  color: #ff6f9e;
  margin-bottom: 20px;
  margin-top: 40px;
}

.singlePrContent h2::before {
  content: "◆";
  position: absolute;
  left: 0;
  top: 1px;
  color: #ff6f9e;
  font-size: 16px;
  line-height: 1.7;
}

/* 画像が本文内にある場合の整形 */
.singlePrContent img {
  max-width: 100%;
  height: auto;
  width: 80%;
  margin: 40px auto;
  display: block;
}

.singlePrContent figure {
  margin: 28px 0;
}

.singlePrContent hr {
  border: none;
  border-top: 1px solid #eee;
  margin: 40px 0;
}

.singlePrContent a:hover {
  color: #e6006e;
}

/* pager */
.singlePrPager {
  max-width: 760px;
  margin: 60px auto 0;
  padding-top: 60px;
  border-top: 1px solid #eee;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}

.singlePrPagerCol {
  display: flex;
}

.singlePrPagerPrev {
  justify-content: flex-start;
}

.singlePrPagerNext {
  justify-content: flex-end;
}

.singlePrPagerBtn {
  min-width: 240px;
  height: 54px;
  padding: 0 18px;
  border: 1.5px solid #e6006e;
  border-radius: 999px;
  background: #fff;
  color: #e6006e;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-weight: 700;
}

.singlePrPagerIcon {
  font-size: 20px;
  line-height: 1;
}

.singlePrPagerText {
  font-size: 14px;
  letter-spacing: 0.02em;
}

.singlePrPagerBtn:hover {
  text-decoration: none;
}

.postCards .tit-L {
  margin-bottom: 30px;
}

section.pr-related {
  padding-top: 60px;
  padding-bottom: 60px;
}

@media (max-width: 560px) {
  .singlePrWrap::before {
    height: 300px;
  }
  .singlePrWrap {
    padding: 36px 0 56px;
  }
  .singlePr {
    padding: 16px 30px 60px;
  }
  .singlePrContent img {
    width: 100%;
    margin: 0;
  }
  .singlePrTitle {
    font-size: 18px;
  }
  .singlePrPager {
    grid-template-columns: 1fr;
  }
  .singlePrPagerBtn {
    width: 80%;
    min-width: 0;
    margin: 0 auto;
  }
  .singlePrPagerPrev,
  .singlePrPagerNext {
    justify-content: stretch;
  }
}
/* =========================
   Plan Summary
========================= */
.PlanSum {
  border-radius: 28px;
  padding: 18px;
}

.PlanSum__inner {
  max-width: 1000px;
  margin: 0 auto;
  background: #f6f6f6;
  border-radius: 24px;
  padding: 36px 44px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* ===== Left ===== */
.PlanSum__left {
  min-width: 260px;
  margin: 0 auto;
  text-align: center;
}

.PlanSum__title {
  margin: 0 0 18px;
  font-size: 20px;
  text-align: center;
  letter-spacing: 0.01em;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: #333;
}

.PlanSum__price {
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-size: 20px;
  color: #d50e4c;
  text-decoration: none;
  display: inline-flex; /* ★ここ */
  align-items: center; /* ★縦中央揃え */
  gap: 5px; /* アイコンと文字の間隔 */
  margin-bottom: 12px;
  font-family: "Krona One", sans-serif;
  font-weight: 200;
  line-height: 1;
}

.PlanSum__yen {
  font-size: 26px;
  font-weight: 800;
}

.PlanSum__amount {
  font-size: 34px;
  font-weight: 900;
  letter-spacing: 0.02em;
}

.PlanSum__tax {
  margin-left: 6px;
  font-size: 10px;
  font-weight: 700;
}

/* ===== Right (image list) ===== */
.PlanSum__right {
  display: flex;
  align-items: flex-start;
  gap: 5px;
  padding: 0;
  margin: 0;
  list-style: none;
}

/* each item */
.PlanPoint {
  width: auto;
}

/* image only */
.PlanPoint__image {
  width: 100%;
  max-width: 120px;
  height: auto;
  display: block;
}

/* =========================
   Responsive
   SP: 2 columns
========================= */
@media (max-width: 960px) {
  .PlanSum__price {
    margin-bottom: 20px;
  }
  .PlanSum__inner {
    flex-direction: column;
    align-items: flex-start;
  }
  .PlanSum__right {
    width: 100%;
    flex-wrap: wrap;
    gap: 24px;
    justify-content: center;
  }
  /* 2 columns */
  .PlanPoint {
    width: auto;
  }
}
@media (max-width: 520px) {
  .PlanSum__inner {
    padding: 24px 18px;
  }
  .PlanSum__amount {
    font-size: 24px;
  }
  /* keep 2 columns even on small screens */
  .PlanPoint {
    width: auto;
  }
}
.planSample {
  max-width: 1200px;
  margin: 0 auto;
  margin-top: 60px;
  margin-bottom: 40px;
}
.planSample__scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.planSample__list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  padding: 0;
  margin: 0;
  list-style: none;
}
.planSample__item {
  min-width: 0;
}
.planSample__img {
  display: block;
  width: 100%;
  aspect-ratio: 1/1;
  -o-object-fit: cover;
     object-fit: cover;
}

@media (max-width: 767px) {
  .planSample {
    max-width: 1200px;
    margin: 0 auto;
    margin-top: 20px;
    margin-bottom: 10px;
    padding: 20px;
  }
  .planSample__scroll {
    overflow-x: visible;
  }
  .planSample__list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    width: 100%;
  }
  .planSample__item {
    flex: unset;
  }
  .planSample__img {
    width: 100%;
    height: auto;
    aspect-ratio: 1/1;
  }
}
.planFeature {
  padding-top: 40px;
}

/* =========================
   Point Contents
========================= */
.planPointItem {
  padding: 18px 0 0;
  width: 90%;
  max-width: 1000px;
  margin: 30px auto;
}

.planPointItem__title {
  margin: 10px 0 20px;
  text-align: center;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: #333;
}

/* grid */
.planPointItem__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px 22px;
}

/* each cell */
.planPointItem__item {
  display: flex;
  justify-content: center;
}

/* pill */
.planPointItem__pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 40px;
  padding: 14px 10px;
  background: #fdecef; /* pale pink */
  color: #d60e4c; /* accent pink */
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-align: center;
}

/* =========================
   Responsive
========================= */
@media (max-width: 960px) {
  .planPointItem__list {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width: 640px) {
  .planPointItem__list {
    grid-template-columns: repeat(1, 1fr);
    gap: 14px 14px;
  }
  .planPointItem__pill {
    min-height: 44px;
    font-size: 15px;
  }
}
/* =========================
   Product Contents
========================= */
.planItem {
  padding: 18px 0 0;
  width: 90%;
  max-width: 1000px;
  margin: 30px auto;
}

.planItem__title {
  margin: 10px 0 20px;
  text-align: center;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: #333;
}

/* grid */
.planItem__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px 22px;
}

/* each cell */
.planItem__item {
  display: flex;
  justify-content: center;
}

/* pill */
.planItem__pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 40px;
  padding: 10px 10px;
  border: solid 1px #ffe2e7;
  color: #d60e4c; /* accent pink */
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-align: center;
}

/* =========================
   Responsive
========================= */
@media (max-width: 960px) {
  .planItem__list {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width: 640px) {
  .planItem__list {
    grid-template-columns: repeat(2, 1fr);
    gap: 14px 14px;
  }
  .planItem__pill {
    min-height: 44px;
    font-size: 13px;
  }
}
/* =========================
   section（プラン料金）
========================= */
section.planPrice {
  padding: 80px 30px 40px;
  margin-top: 80px;
}
@media screen and (max-width: 768px) {
  section.planPrice {
    padding: 40px 10px 0px;
    margin-top: 40px;
  }
}
section.planPrice {
  text-align: center;
  background-color: #f8f8f8;
}

/* =========================
   section（オプション）
========================= */
section.planOption {
  padding: 40px 30px 100px;
  text-align: center;
}
@media screen and (max-width: 768px) {
  section.planOption {
    padding: 0px 10px 20px;
  }
}
section.planOption {
  text-align: center;
  background-color: #fff;
}

.option {
  color: #222;
  text-align: left;
  margin-bottom: 40px;
}
.option__inner {
  max-width: 800px;
  margin: 0 auto;
}
.option__title {
  margin: 0;
  padding: 28px 0 24px;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.04em;
  text-align: center;
  color: #dd3e70;
}
.option__lead {
  margin: 0;
  padding: 0 0 30px;
  font-size: 14px;
  line-height: 1.9;
  letter-spacing: 0.04em;
  text-align: center;
}
.option__lead__note {
  display: inline-block;
  font-size: 11px;
  line-height: 1.6;
  margin-top: 10px;
  color: #999;
}

.optionTable {
  border-top: 1px solid #eee;
}
.optionTable__row {
  display: grid;
  grid-template-columns: 3fr 3fr 2fr;
  align-items: center;
  min-height: 92px;
  border-bottom: 1px solid #eee;
}
.optionTable__col {
  padding: 22px 0;
  font-size: 15px;
  line-height: 1.6;
  letter-spacing: 0.03em;
}
.optionTable__col--target {
  padding-right: 28px;
  font-weight: bold;
  text-align: center;
}
.optionTable__col--detail {
  padding-right: 28px;
  font-size: 14px;
}
.optionTable__col--price {
  display: flex;
  justify-content: flex-end;
  align-items: baseline;
  text-align: right;
  white-space: nowrap;
}
.optionTable__yen {
  font-size: 18px;
  margin-right: 2px;
  font-weight: 400;
}
.optionTable__price {
  font-size: 20px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.02em;
}
.optionTable__tax {
  font-size: 10px;
  line-height: 1;
}

.optionTable__col--price {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
}

.optionPrice {
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  text-align: center;
  align-items: center;
}
.optionPrice__label {
  font-size: 14px;
  color: #444;
  margin-right: 20px;
}
.optionPrice__line {
  display: flex;
  align-items: baseline;
  gap: 4px;
}
.optionPrice--campaign {
  color: #dd3e70 !important;
}
.optionPrice--campaign .optionPrice__label {
  font-weight: 600;
  color: #dd3e70 !important;
}

@media (max-width: 767px) {
  .option {
    padding: 0 16px;
  }
  .option__title {
    padding: 20px 0 16px;
    font-size: 22px;
  }
  .option__lead {
    padding: 0 0 24px;
    font-size: 13px;
    line-height: 1.8;
  }
  .optionTable__row {
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 16px 0;
  }
  .optionTable__col {
    padding: 0;
    font-size: 16px;
  }
  .optionTable__col--target {
    font-size: 16px;
  }
  .optionTable__col--detail {
    padding-right: 0;
    font-size: 14px;
  }
  .optionTable__col--price {
    justify-content: flex-start;
    text-align: left;
    margin-top: 4px;
  }
  .optionTable__price {
    font-size: 20px;
  }
  .optionTable__tax {
    font-size: 11px;
  }
}
/* =========================
   CourseWrap (theme vars)
========================= */
.CourseWrap {
  --accent: #e43a76;
  --accent-deep: #b81f53;
  --shadow: 0 10px 24px rgba(0, 0, 0, 0.06);
  padding: 32px 0 54px;
}

/* =========================
   プランカラー
========================= */
.CourseWrap.is-plan1 {
  --accent: #dd3e70;
  --accent-deep: #b32854;
}
.CourseWrap.is-plan2 {
  --accent: #5b92ca;
  --accent-deep: #316191;
}
.CourseWrap.is-plan3 {
  --accent: #af78c9;
  --accent-deep: #844d9e;
}
.CourseWrap .pCard.pCard--course1 .pCard__name {
  color: #666;
}
.CourseWrap .pCard.pCard--course1 .pCard__pill {
  background: #666;
  color: #fff;
}
.CourseWrap .pCard.pCard--course2 .pCard__name {
  color: var(--accent);
}
.CourseWrap .pCard.pCard--course2 .pCard__pill {
  background: var(--accent);
  color: #fff;
}
.CourseWrap .pCard.pCard--course3 .pCard__name {
  color: var(--accent-deep);
}
.CourseWrap .pCard.pCard--course3 .pCard__pill {
  background: var(--accent-deep);
  color: #fff;
}

/* =========================
   Head
========================= */
.CourseWrap__head {
  text-align: center;
  margin-bottom: 28px;
}

.CourseWrap__title {
  margin: 0 0 10px;
  font-size: 30px;
  font-weight: 900;
  letter-spacing: 0.06em;
  color: var(--accent);
}

.CourseWrap__sub {
  margin: 0;
  font-size: 15px;
  padding: 5px 20px;
  font-weight: 700;
  color: #333;
  letter-spacing: 0.06em;
}

/* =========================
   Grid (PC only)
========================= */
.CourseGrid {
  max-width: 1120px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}

/* =========================
   Card
========================= */
.pCard {
  background: #fff;
  border-radius: 18px;
  padding: 26px 26px 22px;
  box-shadow: var(--shadow);
  border: 1px solid rgba(0, 0, 0, 0.03);
  display: flex;
  flex-direction: column;
}

/* コース名 */
.pCard__name {
  margin: 0 0 18px;
  min-height: 56px;
  text-align: center;
  font-size: 22px;
  font-weight: 900;
  letter-spacing: 0.04em;
  color: var(--accent);
  line-height: 1.4;
}

/* 「プラン費用」「コース内容」ピル */
.pCard__pill {
  margin-bottom: 5px;
  height: 34px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0.12em;
  color: #fff;
  background: var(--accent);
}

/* =========================
   Prices
========================= */
.pCard__prices {
  margin-bottom: 16px;
}

.pCard__priceRow {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 10px 0;
  border-bottom: 1px dashed rgba(0, 0, 0, 0.12);
}

.pCard__priceRow:last-child {
  border-bottom: none;
}

.pCard__label {
  font-size: 16px;
  font-weight: 800;
  color: #9a9a9a;
  letter-spacing: 0.06em;
  text-align: left;
}

.pCard__price {
  font-size: 30px;
  font-weight: 500;
  color: #999;
  letter-spacing: 0.02em;
}

.pCard__priceRow.is-strong .pCard__label,
.pCard__priceRow.is-strong .pCard__price {
  color: #222;
}

.pCard__yen {
  font-size: 24px;
  margin-right: 2px;
  font-weight: 400;
}

.pCard__tax {
  font-size: 10px;
  font-weight: 800;
  margin-left: 2px;
}

/* =========================
   Body
========================= */
.pCard__body {
  font-size: 15px;
  line-height: 1.7;
  color: #333;
  letter-spacing: 0.04em;
  margin-top: 10px;
  margin-bottom: 20px;
}

/* =========================
   Notes
========================= */
.pCard__notes {
  margin: auto 0 0;
  padding: 0;
}

.pCard__notes li {
  list-style: none;
  font-size: 12px;
  line-height: 1.5;
  color: #999;
  text-align: left;
}

.pCard__notes li + li {
  margin-top: 3px;
}

.pCard--course1 .pCard__name {
  color: #666;
}

.pCard--course1 .pCard__pill {
  background: #666;
  color: #fff;
}

.pCard--course2 .pCard__name {
  color: var(--accent);
}

.pCard--course2 .pCard__pill {
  background: var(--accent);
  color: #fff;
}

.pCard--course3 .pCard__name {
  color: var(--accent-deep);
}

.pCard--course3 .pCard__pill {
  background: var(--accent-deep);
  color: #fff;
}

/* =========================
   SP
========================= */
@media (max-width: 768px) {
  .CourseWrap {
    padding-bottom: 30px;
  }
  /* grid → 1カラム */
  .CourseGrid {
    grid-template-columns: 1fr;
    gap: 20px;
    padding: 0 16px;
  }
  /* font-size 調整 */
  .CourseWrap__title {
    font-size: 26px;
  }
  .pCard__name {
    font-size: 20px;
    min-height: auto;
  }
  .pCard__pill {
    font-size: 13px;
    height: 28px;
  }
  .pCard__label {
    font-size: 14px;
  }
  .pCard__yen {
    font-size: 16px;
  }
  .pCard__price {
    font-size: 24px;
  }
}/*# sourceMappingURL=style.css.map */