@charset "UTF-8";
/**
* スタイルシート統合
*/
/**
* 変数指定用フォルダ 随時追加予定
*6110656339010435
* ver.20240703
*/
/*--------------------------
文字に対して、一括でfont-size、line-height、letter-spacing、font-weightを指定する
---------------------------*/
/*--------------------------------
    remの換算
--------------------------------*/
/*--------------------------------
    vwにする    
--------------------------------*/
/*--------------------------------
    親要素に対する割合
--------------------------------*/
/*--------------------------------
三角形
--------------------------------*/
/*--------------------------------
一次関数
画面幅 1440pxの時は、120pxで、そこからどんどん小さくなり、1000pxの時に20pxになるという実装の際に使える関数。
--------------------------------*/
@media screen and (max-width: 768px) {
  .sp {
    display: none;
  }
}

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

/*--------------------------------
擬似要素の背景
--------------------------------*/
/**
* スタイルシート統合
*/
body {
  font-family: "Zen Kaku Gothic Antique", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.sub-lead {
  color: #2469A5;
  text-align: center;
  margin-top: 2.5rem;
}

.sub-lead--orange {
  color: #F28D36;
}

.flex-center, .gNav-btn-wrap .gNav-btn {
  display: flex;
  align-items: center;
  justify-content: center;
}

.sub-inner {
  max-width: 1410px;
  width: 100%;
  padding: 0 25px;
  margin-inline: auto;
}
@media screen and (max-width: 768px) {
  .sub-inner {
    padding: 0 20px;
  }
}

.maw-1360 {
  max-width: 88.125rem;
  width: calc(100% - 3.75rem);
  padding-left: 25px;
  padding-right: 25px;
}
@media screen and (max-width: 768px) {
  .maw-1360 {
    width: 100%;
    padding-left: 20px;
    padding-right: 20px;
  }
}

/*--------------------------------
パンクズ
--------------------------------*/
.breadcrumb {
  text-align: center;
  margin-bottom: 2.5rem;
}

.breadcrumb > span {
  display: inline-block;
  margin: 0 0.625rem;
}

.breadcrumb > span {
  font-size: 1.3rem;
  line-height: 1.4615384615;
  letter-spacing: 0em;
  font-weight: 400;
}

.breadcrumb > span:not(:last-of-type) a {
  color: #2469A5;
}

/*--------------------------------
ページ下段の子ページへのリンク
--------------------------------*/
.school-intro {
  padding-top: 9.0625rem;
}
@media screen and (max-width: 768px) {
  .school-intro {
    padding-top: 5.625rem;
  }
}

.school-intro__header {
  display: flex;
  align-items: baseline;
  color: #2469A5;
}
@media screen and (max-width: 768px) {
  .school-intro__header {
    display: block;
    position: relative;
  }
}

.school-intro__title-en {
  font-family: "Jost", serif;
  font-size: 4rem;
  line-height: 1.3;
  letter-spacing: 0em;
  font-weight: 700;
  text-transform: uppercase;
}
@media screen and (max-width: 768px) {
  .school-intro__title-en {
    font-size: 3rem;
    line-height: 1.3;
  }
}

.school-intro__title-ja {
  font-size: 1.6rem;
  line-height: 1.5;
  letter-spacing: 0em;
  font-weight: 700;
  display: inline-block;
  margin-left: 0.625rem;
  margin-right: 0.9375rem;
}
@media screen and (max-width: 768px) {
  .school-intro__title-ja {
    margin-left: initial;
  }
}

.school-intro__header::after {
  content: "";
  display: block;
  width: 4rem;
  height: 0.625rem;
  background-image: url(../img/school-link-title-arrow.svg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  flex-shrink: 0;
}
@media screen and (max-width: 768px) {
  .school-intro__header::after {
    position: absolute;
    right: 0;
    top: 50%;
  }
}

.school-intro__list {
  margin-top: 1.875rem;
}

.school-intro__items {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 1.25rem 1.875rem;
}
@media screen and (max-width: 768px) {
  .school-intro__items {
    gap: 0.625rem 1.875rem;
  }
}

.school-intro__link {
  padding: 0.625rem 0rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 2px solid #9BA7AF;
  font-size: 1.5rem;
  line-height: 1.4;
  letter-spacing: 0em;
  font-weight: 700;
}

.school-intro__link::after {
  content: "";
  display: block;
  width: 1.1875rem;
  height: 0.625rem;
  background-image: url(../img/school-link-arrow.svg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  flex-shrink: 0;
  position: relative;
  transition: 0.3s;
}

.school-intro__link:hover::after {
  transform: translateX(10px);
  transition: 0.3s;
}

/*--------------------------------
common-list
--------------------------------*/
.common-list__item {
  display: flex;
  gap: 3.75rem;
}
@media screen and (max-width: 768px) {
  .common-list__item {
    display: block;
  }
}

.common-list__item + .common-list__item {
  margin-top: 10.25rem;
}
@media screen and (max-width: 768px) {
  .common-list__item + .common-list__item {
    margin-top: 4.5rem;
  }
}

.common-list__item:nth-of-type(even) {
  flex-direction: row-reverse;
}
.common-list__item:nth-of-type(even) .common-list__image::before {
  content: "";
  background-image: url(../img/eisei-icon.png);
  width: 4.375rem;
  height: 5.53125rem;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  display: block;
  position: absolute;
  top: -2.7rem;
  right: clamp(-15px, 15 * (100vw - 1600px) / -240 - 15px, 0px);
  transform: translateX(100%);
  z-index: 3;
}
@media screen and (max-width: 768px) {
  .common-list__item:nth-of-type(even) .common-list__image::before {
    width: 3.15rem;
    height: 3.981875rem;
    top: -1.93125rem;
    right: 0;
    transform: none;
  }
}
.common-list__item:nth-of-type(even) .common-list__image::after {
  content: "";
  display: block;
  width: 74%;
  height: calc(100% + 3.75rem);
  position: absolute;
  top: 0;
  right: clamp(-120px, 120 * (100vw - 1600px) / -240 - 120px, -3.4375rem);
}
@media screen and (max-width: 768px) {
  .common-list__item:nth-of-type(even) .common-list__image::after {
    width: 56.1194029851%;
    height: calc(100% + 2.5rem);
    right: -20px;
  }
}

.common-list__item:nth-of-type(odd) .common-list__image::before {
  content: "";
  background-image: url(../img/eisei-icon.png);
  width: 4.375rem;
  height: 5.53125rem;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  display: block;
  position: absolute;
  top: -2.7rem;
  left: clamp(-15px, 15 * (100vw - 1600px) / -240 - 15px, 0px);
  transform: translateX(-100%) scaleX(-1);
  z-index: 3;
}
@media screen and (max-width: 768px) {
  .common-list__item:nth-of-type(odd) .common-list__image::before {
    width: 3.15rem;
    height: 3.981875rem;
    top: -1.93125rem;
    left: 0;
    transform: scaleX(-1);
  }
}
.common-list__item:nth-of-type(odd) .common-list__image::after {
  content: "";
  display: block;
  width: 74%;
  height: calc(100% + 3.75rem);
  position: absolute;
  top: 0;
  left: clamp(-120px, 120 * (100vw - 1600px) / -240 - 120px, -3.4375rem);
  z-index: 1;
}
@media screen and (max-width: 768px) {
  .common-list__item:nth-of-type(odd) .common-list__image::after {
    width: 56.1194029851%;
    height: calc(100% + 2.5rem);
    left: -20px;
  }
}

.common-list__image {
  width: 36.7647058824%;
  position: relative;
  height: -moz-fit-content;
  height: fit-content;
}
@media screen and (max-width: 768px) {
  .common-list__image {
    width: 100%;
  }
}

.common-list__image img {
  position: relative;
  z-index: 2;
  border-radius: 0.625rem;
}

.common-list__item:nth-of-type(even) {
  flex-direction: row-reverse;
}
.common-list__item:nth-of-type(even) .common-list__image::before {
  content: "";
  background-image: url(../img/gikou-icon.png);
  width: 4.375rem;
  height: 5.53125rem;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  display: block;
  position: absolute;
  top: -2.7rem;
  right: clamp(-15px, 15 * (100vw - 1600px) / -240 - 15px, 0px);
  transform: translateX(100%);
  z-index: 3;
}
@media screen and (max-width: 768px) {
  .common-list__item:nth-of-type(even) .common-list__image::before {
    width: 3.15rem;
    height: 3.981875rem;
    top: -1.93125rem;
    right: 0;
    transform: none;
  }
}
.common-list__item:nth-of-type(even) .common-list__image::after {
  content: "";
  display: block;
  width: 74%;
  height: calc(100% + 3.75rem);
  position: absolute;
  top: 0;
  right: clamp(-120px, 120 * (100vw - 1600px) / -240 - 120px, -3.4375rem);
}
@media screen and (max-width: 768px) {
  .common-list__item:nth-of-type(even) .common-list__image::after {
    width: 56.1194029851%;
    height: calc(100% + 2.5rem);
    right: -20px;
  }
}

.common-list__item:nth-of-type(odd) .common-list__image--blue::before {
  content: "";
  background-image: url(../img/gikou-icon.png);
  width: 4.375rem;
  height: 5.53125rem;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  display: block;
  position: absolute;
  top: -2.7rem;
  left: clamp(-15px, 15 * (100vw - 1600px) / -240 - 15px, 0px);
  transform: translateX(-100%) scaleX(-1);
  z-index: 3;
}
@media screen and (max-width: 768px) {
  .common-list__item:nth-of-type(odd) .common-list__image--blue::before {
    width: 3.15rem;
    height: 3.981875rem;
    top: -1.93125rem;
    left: 0;
    transform: scaleX(-1);
  }
}
.common-list__item:nth-of-type(odd) .common-list__image::after {
  content: "";
  display: block;
  width: 74%;
  height: calc(100% + 3.75rem);
  position: absolute;
  top: 0;
  left: clamp(-120px, 120 * (100vw - 1600px) / -240 - 120px, -3.4375rem);
  z-index: 1;
}
@media screen and (max-width: 768px) {
  .common-list__item:nth-of-type(odd) .common-list__image::after {
    width: 56.1194029851%;
    height: calc(100% + 2.5rem);
    left: -20px;
  }
}

.common-list__image {
  width: 36.7647058824%;
  position: relative;
  height: -moz-fit-content;
  height: fit-content;
}
@media screen and (max-width: 768px) {
  .common-list__image {
    width: 100%;
  }
}

.common-list__image img {
  position: relative;
  z-index: 2;
  border-radius: 0.625rem;
}

.common-list__image--orange::after {
  background-color: #F28D36;
}

.common-list__image--blue::after {
  background-color: #18A2CE;
}

.common-list__content {
  flex: 1;
  margin-top: -0.4375rem;
}
@media screen and (max-width: 768px) {
  .common-list__content {
    margin-top: 5rem;
  }
}

@media screen and (max-width: 768px) {
  .common-list__title {
    text-align: center;
    font-size: 2.2rem;
    line-height: 1.6363636364;
    letter-spacing: 0em;
    font-weight: 700;
  }
}
.common-list__title span {
  background: linear-gradient(90deg, rgba(242, 208, 54, 0.5019607843), rgba(242, 141, 54, 0.5019607843) 50%, rgba(244, 120, 75, 0.5019607843));
  background-repeat: no-repeat;
  background-position: bottom;
  background-size: 100% 40%;
  font-size: 2.8rem;
  line-height: 1.4285714286;
  letter-spacing: 0em;
  font-weight: 700;
  color: #032E53;
}
@media screen and (max-width: 768px) {
  .common-list__title span {
    font-size: 2.2rem;
    line-height: 1.6363636364;
    letter-spacing: 0em;
    font-weight: 700;
  }
}

@media screen and (max-width: 768px) {
  .common-list__title-blue {
    text-align: center;
    font-size: 2.2rem;
    line-height: 1.6363636364;
    letter-spacing: 0em;
    font-weight: 700;
  }
}
.common-list__title-blue span {
  background: linear-gradient(90deg, #91b5d2, #8bcee5 50%, #a5efe6);
  background-repeat: no-repeat;
  background-position: bottom;
  background-size: 100% 40%;
  font-size: 2.8rem;
  line-height: 1.4285714286;
  letter-spacing: 0em;
  font-weight: 700;
  color: #032E53;
}
@media screen and (max-width: 768px) {
  .common-list__title-blue span {
    font-size: 2.2rem;
    line-height: 1.6363636364;
    letter-spacing: 0em;
    font-weight: 700;
  }
}

.common-list__sub-title {
  color: #2469A5;
  font-size: 1.25rem;
  font-weight: bold;
}
@media screen and (max-width: 768px) {
  .common-list__sub-title {
    font-size: 1.125rem;
    text-align: center;
  }
}

.common-list__sub-title--orange {
  color: #F28D36;
  font-size: 1.25rem;
  font-weight: bold;
}
@media screen and (max-width: 768px) {
  .common-list__sub-title--orange {
    font-size: 1.125rem;
    text-align: center;
  }
}

.common-list__text {
  margin-top: 1.5rem;
}
@media screen and (max-width: 768px) {
  .common-list__text {
    margin-top: 1.25rem;
  }
}

.ban-area {
  max-width: 1360px;
  margin: 9.375rem auto 7.5rem auto;
}
@media screen and (max-width: 768px) {
  .ban-area {
    max-width: 335px;
    margin: 5.625rem auto 5.625rem auto;
  }
}

.ban-area-list {
  display: flex;
  gap: 1.875rem;
}
@media (max-width: 1024px) and (min-width: 768px) {
  .ban-area-list {
    padding: 0 1.875rem;
  }
}
@media screen and (max-width: 768px) {
  .ban-area-list {
    gap: 1.25rem;
    flex-wrap: wrap;
  }
}

.ban-area-list li {
  max-width: 433px;
  width: 32%;
}
@media screen and (max-width: 768px) {
  .ban-area-list li {
    width: 100%;
  }
}

.swiper {
  /*スライダーの幅と高さを調整*/
  width: min(100%, 600px);
  height: 300px;
}

.swiper-slide {
  /*スライド要素の幅と高さを調整*/
  width: 100%;
  height: 100%;
  /*テキストの位置調整*/
  display: flex;
  justify-content: center;
  align-items: center;
  /*テキストの色と太さを指定*/
  color: #fff;
  font-weight: bold;
}

/*①各スライドに以下クラスを追加で付与*/
/*②スライド背景色を設定*/
.slide1 {
  background-color: #88acbd;
}

.slide2 {
  background-color: #99cb1f;
}

.slide3 {
  background-color: #e43a47;
}

.side-nav {
  position: fixed;
  top: 50%; /* 画面の縦中央に配置 */
  right: min(18px, 2vw); /* 右端から少し内側に */
  transform: translateY(-50%);
  z-index: 9999; /* 常に最前面に */
}

.side-nav ul {
  display: flex;
  flex-direction: column;
  gap: 0px; /* ボタン間の余白 */
  margin: 0;
  padding: 0;
  list-style: none;
}

.side-nav .sn-item {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  background: #fff;
  border-radius: 0px;
  text-decoration: none;
  transition: transform 0.18s ease, box-shadow 0.18s ease, opacity 0.18s ease;
  overflow: hidden; /* キャプションのはみ出し対策 */
}

.side-nav .sn-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.16);
}

.side-nav img {
  width: 45%;
  height: auto;
  display: block;
}

/* 任意：小さなテキストキャプション（ホバーでフェード） */
.side-nav .sn-caption {
  position: absolute;
  right: 64px; /* ボタンの左に出す */
  white-space: nowrap;
  background: rgba(0, 0, 0, 0.72);
  color: #fff;
  font-size: 12px;
  line-height: 1;
  padding: 8px 10px;
  border-radius: 8px;
  opacity: 0;
  transform: translateX(4px);
  pointer-events: none;
  transition: opacity 0.18s ease, transform 0.18s ease;
}

.side-nav .sn-item:hover .sn-caption {
  opacity: 1;
  transform: translateX(0);
}

/* スクロールバーと被る場合の微調整 */
@media (min-width: 1280px) {
  .side-nav {
    right: 0px;
  }
}
/* SPでは非表示（必要に応じて閾値を変更） */
@media (max-width: 1024px) {
  .side-nav {
    display: none;
  }
}
/* アイコンの下にラベルを表示（上書き用） */
.side-nav .sn-item {
  position: relative;
  display: flex;
  flex-direction: column; /* 縦並び：アイコン→ラベル */
  align-items: center;
  justify-content: center;
  gap: 6px; /* アイコンとラベルの間隔 */
  width: 72px; /* ラベルが収まる幅。Instagramが長ければ広げる */
  height: auto;
  padding: 10px 8px;
  overflow: visible; /* ラベルが切れないように */
  background: #fff;
  border-radius: 0px;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
  text-decoration: none;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.side-nav .sn-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.16);
}

/* アイコンサイズ（必要に応じて調整） */
.side-nav img {
  width: 28px;
  height: auto;
  display: block;
}

/* ラベルは下に常時表示 */
.side-nav .sn-caption {
  position: static; /* 絶対配置をやめる */
  opacity: 1;
  transform: none;
  background: transparent; /* 吹き出し無しの素の文字 */
  color: #222;
  font-size: 11px;
  line-height: 1.2;
  padding: 0;
  border-radius: 0;
  text-align: center;
  pointer-events: none; /* 文字上でもリンクは反応 */
  white-space: nowrap; /* 改行させない（必要なら外す） */
}

/* Instagramが長くて切れる場合は幅を少し広げる */
@media (min-width: 1280px) {
  .side-nav .sn-item {
    width: 80px;
    height: 80px;
  }
}
.hero {
  background: url("../img/common/common-bg.jpg") no-repeat center center;
  background-size: cover;
  height: 658px; /* 画面いっぱいに表示する場合 */
  display: flex;
  align-items: center; /* 縦方向中央 */
  justify-content: center; /* 横方向中央 */
  text-align: center;
  padding-top: 110px;
}

@media (max-width: 1024px) {
  .hero {
    background: url("../img/common/common-sp-bg.jpg") no-repeat center center;
    width: 100%;
    height: 560px; /* 画面いっぱいに表示する場合 */
    padding-top: 0px;
  }
}
.hero-inner h1 {
  font-family: "Hina Mincho", serif;
  font-size: 24px; /* 調整可 */
  color: #000;
}

.common__title {
  color: #123a5a; /* 画像の濃紺寄り */
  font-weight: 700;
  text-align: center;
  font-size: 4.4rem;
  font-family: "Hina Mincho", serif;
  letter-spacing: 0.04em;
  line-height: 1.25;
  margin: 0 0 clamp(28px, 4vw, 48px);
}

@media (max-width: 1024px) {
  .common__title {
    font-size: 2.8rem;
  }
}
.si-embed .si-video {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
  border: 0;
}

/**
* スタイルシート統合
*/
/** テンプレファイル
* 一括指定、すべてのページに適用するスタイルなどはここに記述
* containerの指定などは全サイト共通にするのでこのファイルを使いまわす。
*
* ver.20240703
*/
html {
  font-size: 10px;
  color-scheme: transparent;
  scrollbar-gutter: stable;
}

body {
  position: relative;
  font-size: 1.5rem;
  line-height: 2em;
  font-family: "Noto Sans JP", "游ゴシック Medium", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", "ヒラギノ角ゴ ProN", "メイリオ", "MS UI Gothic", sans-serif;
  color: #000000;
  font-weight: normal;
}

.content-wrapper {
  width: 100%;
  overflow-x: hidden !important;
  background-color: #ffffff;
}

.scrollLock {
  position: fixed;
  left: 0;
  right: 0;
  overflow: hidden;
  scrollbar-gutter: stable;
}

a:hover {
  opacity: 0.9;
}

a {
  text-decoration: none;
}

img {
  max-width: 100%;
}

.container-wrap {
  position: relative;
  width: 100%;
}

.container {
  position: relative;
  margin: auto;
  /* 最大幅 */
  max-width: 160rem;
  width: calc(100% - 6rem - 6rem);
}
@media screen and (max-width: 1024px) {
  .container {
    width: calc(100% - 4rem - 4rem);
  }
}
@media screen and (max-width: 767px) {
  .container {
    width: calc(100% - 2rem - 2rem);
  }
}
.container .container-inner {
  margin: auto;
  width: calc(100% - 6rem - 6rem);
}
@media screen and (max-width: 1599px) {
  .container .container-inner {
    width: 100%;
  }
}

.section-separator {
  height: 12rem;
}
@media screen and (max-width: 1024px) {
  .section-separator {
    height: 9rem;
  }
}
.section-separator.next-page-kv {
  height: 6rem;
}
@media screen and (max-width: 1024px) {
  .section-separator.next-page-kv {
    height: 2rem;
  }
}

h1,
h2,
h3,
h4,
h5,
strong,
b {
  font-weight: bold;
  line-height: 2em;
}

:where(h1, h2, h3) {
  text-wrap: wrap;
}

span.sml,
p.sml {
  font-size: 1.3rem;
}

/* =========================================================
   HERO CLEAN v2
   - 左右：静止画 / 中央：縦動画
   - ヘッダー高さぶんだけ下げる
   - すべてのブラウザで白帯が出ないよう 3px オーバースキャン
========================================================= */
/* 1) ヘッダー高さ（必要に応じて微調整） */
:root {
  --header-h: clamp(64px, 7.2vh, 92px);
}

/* 2) ヒーローをヘッダーの下に出す（“重なり/切れ”防止） */
.content-wrapper > #hero-img,
.content-wrapper > .hero-img {
  margin-top: var(--header-h);
}

/* 3) 3カラムのヒーロー（中央の幅は明示して端数を避ける） */
#hero-img,
.hero-img {
  --hero-gap: 24px; /* 小数を避けてヘアライン抑制 */
  --hero-h: clamp(560px, 110vh, 920px);
  display: grid;
  grid-template-columns: 1fr minmax(320px, clamp(28vw, 34vw, 560px)) 1fr;
  gap: var(--hero-gap);
  align-items: stretch;
  height: var(--hero-h);
  overflow: hidden;
  background-image: url(../img/mv-center.jpg);
}

/* 4) 各カラムは必ず“トリミング枠”＋黒下地（白い地色を見せない） */
#hero-img > div,
.hero-img > div {
  position: relative;
  overflow: hidden;
  min-height: 100%;
  background: #000 !important;
  padding: 0 !important;
}

/* 5) 画像と動画は枠いっぱいに貼り付け（基本形） */
#hero-img img, #hero-img video,
.hero-img img, .hero-img video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
  max-width: none;
  transform: translateZ(0);
  backface-visibility: hidden;
  border: 0 !important;
  outline: none !important;
  box-shadow: none !important;
}

/* 6) 白帯を物理的に消す：中央 video を 3px オーバースキャン */
#hero-img > div:nth-child(2) video,
.hero-img > div:nth-child(2) video {
  inset: -3px; /* 上下左右 3px はみ出させる */
  width: calc(100% + 6px);
  height: calc(100% + 6px);
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
}

/* 7) もし左右の静止画にも極細線が見える環境なら下を有効化 */
/*
#hero-img > div:nth-child(1) img,
#hero-img > div:nth-child(3) img,
.hero-img  > div:nth-child(1) img,
.hero-img  > div:nth-child(3) img{
  inset: -2px;
  width:  calc(100% + 4px);
  height: calc(100% + 4px);
}
*/
/* 8) SPで縦動画のみのヒーローを使う場合（.sp-hero を使っている時だけ） */
.sp-hero {
  display: none;
}

@media (max-width: 767.98px) {
  #hero-img, .hero-img {
    display: none;
  }
  .sp-hero {
    display: block;
  }
  .sp-hero .video-wrap {
    position: relative;
    width: 100%;
    aspect-ratio: 9/16;
    overflow: hidden;
    background: #000;
  }
  .sp-hero .video-wrap video {
    position: absolute;
    inset: -3px; /* SPでも白帯ゼロ */
    width: calc(100% + 6px);
    height: calc(100% + 6px);
    -o-object-fit: cover;
       object-fit: cover;
    -o-object-position: center;
       object-position: center;
    display: block;
  }
}
/* 9) 予期せぬ縦書き/floatの影響を遮断（最小限の保険） */
#hero-img, .hero-img,
#hero-img *, .hero-img * {
  writing-mode: horizontal-tb !important;
  white-space: normal !important;
  float: none !important;
  clear: none !important;
}

/**
* スタイルシート統合
*/
/**
* Header用スタイルシート
*/
.header {
  display: flex;
  align-items: center;
  justify-content: center;
}

#header {
  position: fixed;
  width: 100%;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: start;
  height: 9.3rem;
  background-color: #FFF;
}

.header-logo img {
  margin: 2rem;
  width: 18rem;
  transition: inherit;
}
@media only screen and (max-width: 1399px) {
  .header-logo img {
    margin-left: 4rem;
  }
}
@media only screen and (max-width: 1399px) and (max-width: 1279px) {
  .header-logo img {
    margin-left: 2rem;
  }
}
@media only screen and (max-width: 1399px) and (max-width: 1279px) and (max-width: 1024px) {
  .header-logo img {
    width: 18.7rem;
  }
}

.main-nav ul {
  display: flex;
  align-items: start;
  height: 100%;
  gap: 1.6rem;
}

.language-menu ul {
  position: absolute;
  top: 3.2rem;
  right: 15%;
  display: flex;
  align-items: start;
  gap: 2rem;
}
.language-menu ul li {
  border: 1px solid #C7E3DC;
  padding: 0.8rem 2.3rem;
  border-radius: 2rem;
  font-weight: bold;
  font-size: 1.4rem;
}

@media (max-width: 768px) {
  .language-menu ul {
    top: 0.8rem;
    right: 18%;
  }
  .language-menu ul li {
    padding: 0.4rem 2.8rem;
    border-radius: 2rem;
    font-weight: bold;
    font-size: 1.4rem;
  }
}
.reserve-btn-wrap {
  position: absolute;
  top: 3rem;
  right: 0;
}

.reserve-btn {
  color: #FFF;
  background-color: #E49CBE;
  padding: 3.5rem 3rem;
  font-size: 1.8rem;
  height: 11rem;
}

/* ===== ハンバーガー＆ドロワー（スマホ） ===== */
:root {
  --mint:#C7E3DC; /* ミント（枠・区切り） */
  --mint-line:#8BBEB4; /* ライン色（やや濃いミント） */
  --ink:#314455; /* 文字色 */
  --shadow:0 8px 24px rgba(0,0,0,.14);
}

/* PCでは非表示 */
@media (min-width: 769px) {
  .sp-header, .sp-drawer, .sp-drawer-backdrop {
    display: none !important;
  }
}
/* ヘッダー帯 */
@media (max-width: 768px) {
  #header {
    display: none;
  }
  .sp-header {
    position: sticky;
    top: 0;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 56px;
    padding: 0 12px;
    z-index: 10010;
    background-color: #FFF;
  }
  .sp-logo {
    width: 40%;
  }
  .sp-drawer {
    position: fixed; /* 既存定義のままでOK。念のため明示 */
  }
  .sp-drawer__close {
    position: absolute;
    top: max(12px, env(safe-area-inset-top) + 8px); /* ノッチ考慮 */
    right: 12px;
    width: 44px;
    height: 44px;
    border: 1px solid var(--mint, #C7E3DC);
    background: #fff;
    border-radius: 4px;
    z-index: 2; /* メニュー項目より前面 */
    cursor: pointer;
  }
  .sp-drawer__close::before,
  .sp-drawer__close::after {
    content: "";
    position: absolute;
    inset: 0;
    margin: auto;
    width: 22px;
    height: 2px;
    background: var(--mint-line, #8BBEB4);
    transform-origin: 50% 50%;
  }
  .sp-drawer__close::before {
    transform: rotate(45deg);
  }
  .sp-drawer__close::after {
    transform: rotate(-45deg);
  }
  /* キーボード操作の視認性 */
  .sp-drawer__close:focus-visible {
    outline: 2px solid #8BBEB4;
    outline-offset: 2px;
  }
  /* ハンバーガーボタン（添付画像の見た目） */
  .sp-hamburger {
    width: 44px;
    height: 44px;
    border-radius: 4px;
    background: #fff;
    border: 1px solid var(--mint);
    box-shadow: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    -webkit-tap-highlight-color: transparent;
    cursor: pointer;
  }
  .sp-hamburger .bars,
  .sp-hamburger .bars::before,
  .sp-hamburger .bars::after {
    content: "";
    display: block;
    width: 22px;
    height: 2px;
    background: var(--mint-line);
    transition: transform 0.25s ease, opacity 0.2s ease;
  }
  .sp-hamburger .bars {
    position: relative;
  }
  .sp-hamburger .bars::before {
    position: absolute;
    top: -7px;
    left: 0;
  }
  .sp-hamburger .bars::after {
    position: absolute;
    top: 7px;
    left: 0;
  }
  /* 開いている時は × 表示 */
  .sp-hamburger[aria-expanded=true] .bars {
    background: transparent;
  }
  .sp-hamburger[aria-expanded=true] .bars::before {
    transform: translateY(7px) rotate(45deg);
  }
  .sp-hamburger[aria-expanded=true] .bars::after {
    transform: translateY(-7px) rotate(-45deg);
  }
  /* ドロワー＆背景 */
  .sp-drawer-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.35);
    z-index: 10005;
  }
  .sp-drawer {
    position: fixed;
    top: 0;
    right: 0;
    height: 100dvh;
    width: min(82vw, 320px);
    background: #fff;
    z-index: 10020;
    box-shadow: var(--shadow);
    display: flex;
    flex-direction: column;
    padding-top: 72px;
    /* 初期は右に隠す */
    transform: translateX(100%);
    transition: transform 0.28s ease;
  }
  .sp-drawer[open] {
    transform: translateX(0);
  } /* JSで付与 */
  .sp-drawer[hidden] {
    display: block;
  } /* hiddenでもアニメ維持のため */
  .sp-menu {
    list-style: none;
    margin: 0;
    padding: 0 20px 24px;
  }
  .sp-menu li {
    border-bottom: 1px solid var(--mint);
  }
  .sp-menu a {
    display: block;
    padding: 16px 4px;
    text-decoration: none;
    color: var(--ink);
    font-size: 16px;
  }
  .sp-menu a:active {
    background: #f6fbfa;
  }
  /* 本文スクロール固定用 */
  html.menu-open, body.menu-open {
    overflow: hidden;
  }
}
.gNav-btn-wrap {
  display: flex;
  height: 100%;
}
.gNav-btn-wrap .siryo {
  background: linear-gradient(0deg, #F2D036, #F28D36 60%, #F4784B);
  color: #fff;
  height: 100%;
  aspect-ratio: 1/1;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  text-align: center;
  font-weight: bold;
}
@media only screen and (max-width: 1024px) {
  .gNav-btn-wrap .siryo {
    font-size: 1.3rem;
    line-height: 1.3em;
  }
  .gNav-btn-wrap .siryo img {
    width: 1.8rem;
  }
}
.gNav-btn-wrap .gNav-btn {
  cursor: pointer;
  width: auto;
  height: 100%;
  aspect-ratio: 1/1;
  background: linear-gradient(0deg, #6CE6E6, #18A2CE 60%, #18A2CE);
}
.gNav-btn-wrap .gNav-btn .btn {
  width: 4rem;
  height: 4rem;
  background-image: url(../img/gNav-btn.svg);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  transition: 0.5s cubic-bezier(0.81, 1.35, 0.45, 1.02);
}
.gNav-btn-wrap .gNav-btn.is-open .btn {
  background-image: url(../img/gNav-btn_close.svg);
  transform: rotateY(360deg);
}

.bg-gray {
  display: none;
  position: fixed;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background-color: #032E53;
  opacity: 0.4;
  z-index: -1;
  cursor: pointer;
}

.gNav-wrap_sp {
  position: fixed;
  top: 8.8rem;
  right: 0;
  translate: 100% 0;
  width: 100%;
  max-width: 51rem;
  height: auto;
  max-height: calc(100svh - 8.8rem);
  overflow: scroll;
  overflow-x: hidden;
  background-color: #ffffff;
  padding: 2rem;
  font-weight: bold;
  transition: 0.5s;
  z-index: 1;
  background-color: #EDF2F5;
}
@media only screen and (max-width: 1024px) {
  .gNav-wrap_sp {
    max-height: calc(100svh - 6.6rem);
    top: 6.6rem;
  }
}
.gNav-wrap_sp.is-open {
  translate: 0 0;
}
.gNav-wrap_sp .gNav-inner nav {
  margin-bottom: 3rem;
  display: flex;
  gap: 0.3rem;
  flex-wrap: wrap;
}
.gNav-wrap_sp .gNav-inner nav .list {
  width: calc((100% - 0.3rem - 0.1rem) / 2);
  background-color: #ffffff;
}
.gNav-wrap_sp .gNav-inner nav .list .list-inner {
  position: relative;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 2.5rem;
  font-size: 1.5rem;
  font-weight: bold;
  line-height: 1.4em;
  filter: brightness(0) saturate(100%) invert(34%) sepia(8%) saturate(3688%) hue-rotate(167deg) brightness(108%) contrast(103%);
}
.gNav-wrap_sp .gNav-inner nav [id^=has-child] .list-inner,
.gNav-wrap_sp .gNav-inner nav .inner-has-child .list-inner {
  position: relative;
  cursor: pointer;
}
.gNav-wrap_sp .gNav-inner nav [id^=has-child] .list-inner::before,
.gNav-wrap_sp .gNav-inner nav .inner-has-child .list-inner::before {
  rotate: 90deg;
  transition-delay: 0.1s;
}
.gNav-wrap_sp .gNav-inner nav [id^=has-child] .list-inner.is-open::after,
.gNav-wrap_sp .gNav-inner nav .inner-has-child .list-inner.is-open::after {
  rotate: -180deg;
}
.gNav-wrap_sp .gNav-inner nav [id^=has-child] .list-inner.is-open::before,
.gNav-wrap_sp .gNav-inner nav .inner-has-child .list-inner.is-open::before {
  rotate: 0deg;
}
.gNav-wrap_sp .gNav-inner nav [class^=child] {
  font-size: 1.5rem;
  font-weight: bold;
  line-height: 1.4em;
  display: flex;
  flex-direction: column;
  width: 100%;
  gap: 0.3rem;
}
.gNav-wrap_sp .gNav-inner nav [class^=child] .child-list-inner {
  padding: 1.5rem;
  color: #2469A5;
  background-color: #ffffff;
}
.gNav-wrap_sp .gNav-inner nav [class^=child] .inner-has-child {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
.gNav-wrap_sp .gNav-inner nav [class^=child] .inner-has-child .list-inner::before, .gNav-wrap_sp .gNav-inner nav [class^=child] .inner-has-child .list-inner::after {
  top: 50%;
  translate: 0 -50%;
}
.gNav-wrap_sp .gNav-inner nav [class^=child] .inner-has-child .child a {
  padding-left: 2.5rem;
}
.gNav-wrap_sp .gNav-inner nav .slide-wrap {
  width: 100%;
  display: none;
}
.gNav-wrap_sp .gNav-inner .request-wrap,
.gNav-wrap_sp .gNav-inner .oc-wrap {
  width: 100%;
}
.gNav-wrap_sp .gNav-inner .request-wrap *,
.gNav-wrap_sp .gNav-inner .oc-wrap * {
  width: inherit;
}
.gNav-wrap_sp .gNav-inner .tel-wrap {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  color: #2469A5;
}
.gNav-wrap_sp .gNav-inner .tel-wrap .text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding-block: 1.5rem;
  margin-top: -0.5rem;
  width: 100%;
  font-weight: normal;
  background-image: url(../img/header-tel-dec.svg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
.gNav-wrap_sp .gNav-inner .other-links {
  font-weight: normal;
  width: -moz-fit-content;
  width: fit-content;
  margin-inline: auto;
}

@media only screen and (max-width: 1279px) {
  .gNav-wrap_pc {
    display: none;
  }
}
@media only screen and (min-width: 1280px) {
  .gNav-btn-wrap {
    position: fixed;
    transition: 0.3s;
    /* 画面外に隠す */
    top: -100%;
    right: 0;
    height: 8.8rem;
    display: flex !important;
  }
  .gNav-wrap_sp {
    position: fixed;
  }
}
@keyframes bounce {
  0% {
    transform: translateY(0) scale(1);
  }
  30% {
    transform: translateY(-0.6rem) scale(1.05);
  }
  50% {
    transform: translateY(0) scale(0.9);
  }
  70% {
    transform: translateY(-0.4rem) scale(1.03);
  }
  100% {
    transform: translateY(0) scale(1);
  }
}
/* ===== メガドロップダウン（PCのみ表示） ===== */
#header {
  position: fixed;
  z-index: 50;
  font-size: 1.3rem;
}

/* 既存に合わせた軽いベース */
.main-nav .main-nav__list,
.main-nav > ul {
  display: flex;
  gap: 24px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.main-nav__link,
.main-nav > ul > li > a {
  display: block;
  padding: 12px 8px;
  text-decoration: none;
  color: inherit;
}

/* 親 <li> */
.has-mega {
  position: static;
} /* 祖先 (#header) を基準に絶対配置したいので static のまま */
.has-mega > .main-nav__link {
  position: relative;
}

/* メガ本体 */
.mega {
  display: none; /* 初期は非表示 */
  position: absolute;
  left: 0;
  right: 0; /* ← ヘッダー全幅に展開 */
  top: calc(100% + 8px); /* メニューの少し下に */
  background: #fff;
  border-top: 1px solid #e5e5e5;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.08);
  padding: 0; /* 内側余白は .mega__inner で */
  z-index: 1000;
}

/* ホバーで表示（PC） */
.has-mega:hover > .mega {
  display: block;
}

/* 中身の横幅をサイト幅に合わせたい場合は max-width を調整 */
.mega__inner {
  max-width: 1200px; /* ← テーマのコンテンツ幅に合わせて変更可 */
  margin: 0 auto;
  padding: 20px 16px 24px;
}

/* 画像＋テキストのグリッド */
.mega__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr)); /* 4列。5列にしたい場合は repeat(5,1fr) に */
  gap: 16px;
}

/* 各アイテム */
.mega__item a {
  display: block;
  text-decoration: none;
  color: inherit;
  border-radius: 10px;
  padding: 8px;
  transition: background-color 0.2s ease, transform 0.2s ease;
}

.mega__item a:hover {
  background: #f6f7f8;
  transform: translateY(-1px);
}

/* サムネイル枠（アスペクト一定で整列） */
.mega__thumb {
  aspect-ratio: 4/3; /* 画像が未作成でも高さが揃う */
  border-radius: 10px;
  overflow: hidden;
  background: #f2f2f2; /* プレースホルダー背景 */
  box-shadow: inset 0 0 0 1px #eee;
}

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

/* タイトル */
.mega__title {
  display: block;
  margin-top: 8px;
  font-size: 14px;
  line-height: 1.4;
  text-align: center;
  letter-spacing: 0.02em;
}

/* PCのみ（スマホ/タブレットではメガを無効化） */
@media (max-width: 1024px) {
  .mega {
    display: none !important;
  }
  .has-mega:hover > .mega {
    display: none !important;
  }
}
/* ▼ メガメニューを“中央寄せのボックス型”に（幅を狭く・角丸） */
.has-mega {
  position: relative;
}

.mega {
  /* もともとの full width（left:0; right:0;）を上書きして中央寄せ */
  left: 50% !important;
  right: auto !important;
  transform: translateX(-50%);
  /* 画面に収まるスマートな幅に */
  width: min(980px, 100vw - 48px);
  top: calc(100% + 12px);
  /* 角丸＆影 */
  border-radius: 16px;
  overflow: hidden; /* 角丸を効かせるため */
  border: 1px solid #e8e8e8;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.12);
  background: #fff;
  padding: 0; /* 内側余白は .mega__inner で管理 */
  z-index: 1000;
}

/* 中身はボックス幅いっぱいでOK（max-widthを外す） */
.mega__inner {
  max-width: none !important;
  margin: 0;
  padding: 20px 16px 22px;
}

/* ▼ “縦3列” = 3カラムのグリッドに変更（横一列にならない） */
.mega__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)); /* ← 3列 */
  gap: 16px;
}

/* サムネとテキストの見た目はそのまま流用、少しだけ整え */
.mega__item a {
  display: block;
  text-decoration: none;
  color: inherit;
  padding: 10px 8px;
  border-radius: 12px;
  transition: background-color 0.2s ease, transform 0.2s ease;
}

.mega__item a:hover {
  background: #f7f8f9;
  transform: translateY(-1px);
}

.mega__thumb {
  aspect-ratio: 4/3;
  border-radius: 10px;
  overflow: hidden;
  background: #f2f2f2;
  box-shadow: inset 0 0 0 1px #eee;
}

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

.mega__title {
  display: block;
  margin-top: 8px;
  font-size: 14px;
  line-height: 1.4;
  text-align: center;
}

/* PCのみ有効（タブレット以下は非表示のまま） */
@media (max-width: 1024px) {
  .mega {
    display: none !important;
  }
  .has-mega:hover > .mega {
    display: none !important;
  }
}
/* ▼ 左端を「着物プラン一覧」と揃える（中央寄せを解除） */
.has-mega {
  position: relative;
} /* 親<li>基準 */
.mega {
  left: 0 !important; /* 左端を親<li>の左端に */
  right: auto !important;
  transform: none !important; /* 中央寄せ解除 */
  width: min(980px, 100vw - 48px); /* 幅は少し狭め＆画面端の余白確保 */
  top: calc(100% + 12px);
  border-radius: 16px;
  border: 1px solid #e8e8e8;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.12);
  background: #fff;
  overflow: hidden;
  z-index: 1000;
}

/* 中身：そのまま（必要なら再掲） */
.mega__inner {
  max-width: none !important;
  margin: 0;
  padding: 20px 16px 22px;
}

/* 3カラム指定（そのまま） */
.mega__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

/* ▼ 「着物プラン一覧」メガメニューを 3 カラム＆角丸ボックスに（PCのみ） */
#header .has-mega {
  position: relative;
} /* 親<li>を基準に配置 */
#header .has-mega > .mega {
  /* 位置：親メニュー（着物プラン一覧）の左端に揃える */
  position: absolute;
  left: 0 !important;
  right: auto !important;
  top: calc(100% + 12px);
  transform: none !important;
  z-index: 1000;
  /* ボックス：幅を狭く、角丸＆影 */
  width: min(980px, 100vw - 48px);
  background: #fff;
  border: 1px solid #e8e8e8;
  border-radius: 16px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.12);
  overflow: hidden;
  /* 初期は非表示（ホバーで表示） */
  display: none;
}

/* 親メニューにホバーしたら表示 */
#header .has-mega:hover > .mega {
  display: block;
}

#header .mega__inner {
  max-width: none !important; /* フルで使う */
  margin: 0;
  padding: 20px 16px 22px;
}

/* ★ ここが肝：3カラムのグリッドに強制（既存のflex指定を無効化） */
#header .mega__grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important; /* 3列 */
  gap: 16px !important;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* 各カード */
#header .mega__item a {
  display: block;
  text-decoration: none;
  color: inherit;
  padding: 10px 8px;
  border-radius: 12px;
  transition: background-color 0.2s ease, transform 0.2s ease;
}

#header .mega__item a:hover {
  background: #f7f8f9;
  transform: translateY(-1px);
}

/* サムネは比率を統一（画像未準備でも高さが出る） */
#header .mega__thumb {
  aspect-ratio: 4/3;
  border-radius: 10px;
  overflow: hidden;
  background: #f2f2f2;
  box-shadow: inset 0 0 0 1px #eee;
}

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

#header .mega__title {
  display: block;
  margin-top: 8px;
  font-size: 14px;
  line-height: 1.4;
  text-align: center;
}

/* たくさん並ぶ場合にスクロールさせたい場合は解除コメントを外す */
/* PCのみ（タブレット以下は非表示のまま） */
@media (max-width: 1024px) {
  #header .has-mega > .mega {
    display: none !important;
  }
  #header .has-mega:hover > .mega {
    display: none !important;
  }
}
/* ====== 着物プラン一覧：メガドロップダウン（最終版・整理済み） ====== */
#header .has-mega {
  position: relative;
} /* 親<li>基準 */
#header .has-mega > .mega {
  position: absolute;
  left: 0; /* 親の左端に合わせる */
  top: calc(100% + 10px);
  width: min(980px, 100vw - 48px); /* 狭めのボックス幅 */
  background: #fff;
  border: 1px solid #e8e8e8;
  border-radius: 14px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.12);
  overflow: hidden;
  display: none; /* 初期は非表示（ホバーで表示） */
  z-index: 1000;
}

/* PCホバーで表示 */
#header .has-mega:hover > .mega {
  display: block;
}

/* 内側余白を控えめに→全体の縦を詰める */
#header .mega__inner {
  margin: 0;
  padding: 12px 12px 14px; /* 以前より小さめ */
}

/* 横5列のグリッド（gapも控えめに） */
#header .mega__grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr)); /* 5列 */
  gap: 12px;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* カードの余白も控えめに */
#header .mega__item a {
  display: block;
  padding: 6px 6px 8px; /* 以前より小さめ */
  border-radius: 10px;
  text-decoration: none;
  color: inherit;
  transition: background-color 0.2s ease, transform 0.2s ease;
}

#header .mega__item a:hover {
  background: #f7f8f9;
  transform: translateY(-1px);
}

/* 画像を約30%小さく：親幅の70%に縮小して中央寄せ */
#header .mega__thumb {
  width: 70%; /* ★ ここで縮小（=画像を約30%小さく） */
  margin: 0 auto; /* 中央寄せ */
  aspect-ratio: 4/3;
  border-radius: 10px;
  overflow: hidden;
  background: #f2f2f2;
  box-shadow: inset 0 0 0 1px #eee;
}

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

/* タイトルも少しだけ小さく＆詰める → 全体の縦を抑える */
#header .mega__title {
  display: block;
  margin-top: 6px; /* 以前より小さめ */
  font-size: 13px; /* 以前より小さめ */
  line-height: 1.3;
  text-align: center;
}

/* ドロップダウンの最大高さ（必要ならスクロール）→縦を抑える */
#header .has-mega > .mega {
  max-height: 70vh; /* 調整可：65〜75vh など */
  overflow: auto;
}

/* タブレット以下では非表示（PCのみ有効） */
@media (max-width: 1024px) {
  #header .has-mega > .mega {
    display: none !important;
  }
}
/* ===== 着物プラン一覧：メガドロップダウン（5列・スクロール無し・左端揃え） ===== */
#header .has-mega {
  position: relative;
} /* 親<li>基準 */
#header .has-mega > .mega {
  position: absolute;
  left: 0; /* 親の左端に揃える */
  top: 100%;
  width: min(980px, 100vw - 48px); /* ボックス幅（必要なら数値調整） */
  background: #fff;
  border: 1px solid #e8e8e8;
  border-radius: 14px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.12);
  display: none; /* 初期は非表示（ホバーで表示） */
  z-index: 1000;
  /* ▼ ドロップダウン内にスクロールバーを出さない */
  max-height: none !important;
  overflow: visible !important;
}

/* PCホバーで表示 */
#header .has-mega:hover > .mega {
  display: block;
}

/* 内側余白は控えめ＝縦寸を詰める */
#header .mega__inner {
  margin: 0;
  padding: 12px 12px 14px;
}

/* ★ 5カラム固定（横5列） */
#header .mega__grid {
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important; /* 5列 */
  gap: 12px;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* カード：余白も控えめ */
#header .mega__item a {
  display: block;
  padding: 6px 6px 8px;
  border-radius: 10px;
  text-decoration: none;
  color: inherit;
  transition: background-color 0.2s ease, transform 0.2s ease;
}

#header .mega__item a:hover {
  background: #f7f8f9;
  transform: translateY(-1px);
}

/* サムネ：親幅の70%でやや小さめ（縦を抑える） */
#header .mega__thumb {
  width: 70%;
  margin: 0 auto;
  aspect-ratio: 4/3;
  border-radius: 10px;
  overflow: hidden;
  background: #f2f2f2;
  box-shadow: inset 0 0 0 1px #eee;
}

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

/* タイトルも少し小さめ＆詰める */
#header .mega__title {
  display: block;
  margin-top: 6px;
  font-size: 13px;
  line-height: 1.3;
  text-align: center;
}

/* PCのみ（タブレット以下は非表示のまま） */
@media (max-width: 1024px) {
  #header .has-mega > .mega {
    display: none !important;
  }
}
/* スマホ：着物プラン一覧アコーディオン */
@media (max-width: 768px) {
  .sp-menu .sp-has-sub {
    border-bottom: 1px solid var(--mint, #C7E3DC);
  }
  .sp-menu .sp-accordion {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between; /* 右側にアイコン用の余白 */
    padding: 16px 4px;
    background: transparent;
    border: 0;
    font: inherit;
    color: var(--ink, #314455);
    text-align: left;
    cursor: pointer;
  }
  /* 右側の▼アイコン（CSSだけで三角） */
  .sp-menu .sp-accordion::after {
    content: "";
    display: inline-block;
    width: 8px;
    height: 8px;
    border-right: 2px solid var(--mint-line, #8BBEB4);
    border-bottom: 2px solid var(--mint-line, #8BBEB4);
    transform: rotate(45deg); /* ▼風 */
    transition: transform 0.2s ease;
    margin-left: 8px;
  }
  .sp-menu .sp-accordion[aria-expanded=true]::after {
    transform: rotate(-135deg); /* ▲風（展開時） */
  }
  /* サブメニュー（初期は hidden） */
  .sp-menu .sp-submenu {
    list-style: none;
    margin: 0 0 8px;
    padding: 0 0 8px 10px; /* ひと段下げて見やすく */
    border-left: 2px solid var(--mint, #C7E3DC);
  }
  .sp-menu .sp-submenu > li > a {
    display: block;
    padding: 8px 6px;
    color: var(--ink, #314455);
    text-decoration: none;
    font-size: 15px;
    line-height: 1.4;
  }
  .sp-menu .sp-submenu > li + li > a {
    border-top: 1px dashed var(--mint, #C7E3DC);
  }
  .sp-menu .sp-submenu a:active {
    background: #f6fbfa;
  }
}
/**
* スタイルシート統合
*/
/**
* Footer用スタイルシート
*/
#banners {
  padding-block: 6rem;
  background-color: #EDF2F5;
}
@media only screen and (max-width: 1024px) {
  #banners {
    padding-block: 4rem;
  }
}
#banners .container-inner .banner-wrap1 {
  display: flex;
  align-items: flex-start;
  gap: 4rem;
}
@media only screen and (max-width: 1399px) {
  #banners .container-inner .banner-wrap1 {
    gap: 2rem;
  }
}
@media only screen and (max-width: 1024px) {
  #banners .container-inner .banner-wrap1 {
    flex-direction: column;
  }
}
#banners .container-inner .banner-wrap1 .oc-wrap,
#banners .container-inner .banner-wrap1 .interview {
  position: relative;
  width: calc((100% - 4rem - 1px) / 2);
}
@media only screen and (max-width: 1399px) {
  #banners .container-inner .banner-wrap1 .oc-wrap,
  #banners .container-inner .banner-wrap1 .interview {
    width: calc((100% - 2rem - 1px) / 2);
  }
}
@media only screen and (max-width: 1024px) {
  #banners .container-inner .banner-wrap1 .oc-wrap,
  #banners .container-inner .banner-wrap1 .interview {
    width: 100%;
    aspect-ratio: 660/440;
  }
  #banners .container-inner .banner-wrap1 .oc-wrap .more-btn .arrow,
  #banners .container-inner .banner-wrap1 .interview .more-btn .arrow {
    width: 3rem;
    margin-left: 2rem;
  }
}
#banners .container-inner .banner-wrap1 .oc-wrap {
  position: relative;
  display: flex;
}
#banners .container-inner .banner-wrap1 .oc-wrap svg {
  width: 100%;
  height: 103.4%;
}
#banners .container-inner .banner-wrap2 {
  display: flex;
  margin-top: 6rem;
}
@media only screen and (max-width: 1024px) {
  #banners .container-inner .banner-wrap2 {
    margin-top: 4rem;
  }
}
@media only screen and (max-width: 767px) {
  #banners .container-inner .banner-wrap2 {
    margin-top: 2rem;
  }
}
#banners .container-inner .banner-wrap2 .slide-inner {
  margin-right: 1rem;
}
@media only screen and (max-width: 767px) {
  #banners .container-inner .banner-wrap2 .slide-inner {
    margin-inline: 0.2rem;
  }
}

/* ===== Footer ===== */
/* ── スマホでヘッダーの予約ボタンを非表示 ───────────────── */
@media (max-width: 768px) {
  .reserve-btn-wrap {
    display: none !important;
  }
}
.site-footer {
  --ink:#273247;
  --muted:#6f7b86;
  --paper:#faf5ea;
  margin-top: 120px;
  position: relative;
  background: var(--paper) url("../img/footer-bg.jpg") center/cover no-repeat; /* 紙風の質感（任意） */
  padding: 36px 16px 20px;
  overflow: hidden;
}

.site-footer .footer-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.1fr 1.2fr auto;
  align-items: start;
  gap: 36px;
  position: relative;
  z-index: 1; /* 背景装飾より前面に */
}

/* 左：ロゴ＋住所 */
.site-footer .footer-brand {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.site-footer .footer-logo img {
  width: 185px;
  height: auto;
  display: block;
}

.site-footer .footer-address {
  font-style: normal;
  color: #3c4a5a;
  line-height: 1.8;
  font-size: 14px;
}

@media (max-width: 960px) {
  .site-footer .footer-logo img {
    width: 200px;
  }
}
/* 中央：リンク2列 */
.site-footer .footer-links {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 32px;
}

.site-footer .footer-links .links-col {
  list-style: none;
  margin: 0;
  padding: 0;
}

.site-footer .footer-links a {
  display: inline-block;
  padding: 4px 0;
  color: #2f3e55;
  text-decoration: none;
  font-size: 14px;
}

.site-footer .footer-links a:hover {
  text-decoration: underline;
}

/* 右：SNS */
.site-footer .footer-social {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
  align-items: flex-start;
}

.site-footer .sns {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.8);
  border: 1px solid #e6e6e6;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}

.site-footer .sns img {
  width: 20px;
  height: 20px;
  display: block;
}

.site-footer .sns-ig {
  background: #fff;
}

.site-footer .sns-line {
  background: #e7f8ec;
}

/* コピーライト（中央） */
.site-footer .footer-copy {
  text-align: center;
  margin: 18px 0 0;
  color: #6b7680;
  font-size: 12px;
  position: relative;
  z-index: 1;
}

/* レスポンシブ */
@media (max-width: 960px) {
  .site-footer .footer-inner {
    grid-template-columns: 1fr 1fr;
    grid-template-areas: "brand social" "links links";
  }
  .site-footer .footer-brand {
    grid-area: brand;
  }
  .site-footer .footer-links {
    grid-area: links;
  }
  .site-footer .footer-social {
    grid-area: social;
    justify-content: flex-end;
  }
}
@media (max-width: 640px) {
  .site-footer {
    padding: 28px 14px 18px;
  }
  .site-footer .footer-inner {
    grid-template-columns: 1fr;
    gap: 18px;
  }
  .site-footer .footer-links {
    grid-template-columns: 1fr 1fr;
    gap: 8px 20px;
  }
  .site-footer .footer-social {
    justify-content: center;
  }
  .site-footer .footer-copy {
    margin-top: 14px;
  }
  .site-footer::after {
    width: 240px;
    height: 120px;
    top: auto;
    bottom: 14px;
    opacity: 0.8;
  }
  .site-footer::before {
    width: 300px;
    height: 120px;
  }
}
/* ── 浮遊「予約する」ボタン ─────────────────────────── */
.sp-reserve-fab {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: calc(56px + env(safe-area-inset-bottom) + 24px); /* フッターの少し上 */
  z-index: 10000;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 72%;
  height: 44px;
  padding: 0 18px;
  background: #e6a4b9; /* 画像のピンク系 */
  color: #fff;
  font-weight: 700;
  font-size: 16px;
  text-decoration: none;
  border-radius: 999px;
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.12);
  -webkit-tap-highlight-color: transparent;
}

.sp-reserve-fab:active {
  transform: translateX(-50%) scale(0.98);
}

/* 本文が隠れないよう、下余白をフッター＋ボタン分確保 */
body.has-sp-fixed-nav {
  padding-bottom: calc(124px + env(safe-area-inset-bottom));
  padding-bottom: calc(124px + constant(safe-area-inset-bottom));
}

/* ── SP固定フッター ───────────────────────────── */
@media (max-width: 768px) {
  .sp-fixed-nav {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9999;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    height: 70px; /* タップしやすい高さ */
    background: #cfe6e3;
    border-top: 1px solid #eee;
    box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.06);
    padding-bottom: env(safe-area-inset-bottom); /* iPhone安全域 */
    padding-bottom: constant(safe-area-inset-bottom); /* 古いiOS用 */
  }
  .sp-fixed-nav .item {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    font-size: 13px;
    color: #5b6b82; /* スクショの青グレー感 */
    text-decoration: none;
    line-height: 1;
    border-right: 1px solid #eee; /* 5分割の区切り線 */
  }
  .sp-fixed-nav .item img {
    width: 50%;
    margin: 0 auto;
  }
  .sp-fixed-nav .item:last-child {
    border-right: none;
  }
  .sp-fixed-nav .item:active {
    background: #f5f7f9;
  }
  /* 本文が隠れないようフッター分の下余白を確保 */
  body.has-sp-fixed-nav {
    padding-bottom: calc(56px + env(safe-area-inset-bottom));
    padding-bottom: calc(56px + constant(safe-area-inset-bottom));
  }
}
/* PC・タブレットでは非表示 */
@media (min-width: 769px) {
  .sp-fixed-nav, .sp-reserve-fab {
    display: none;
  }
}
/* ===== PageTop Button ===== */
.pagetop {
  position: fixed;
  right: 16px; /* 右端の余白。他の固定ボタンと被る場合は調整 */
  bottom: 24px; /* 下端の余白 */
  z-index: 10000;
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.pagetop.is-show {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.pagetop__btn {
  --brand: #4FB190; /* ブランド色に変更OK */
  width: 48px;
  height: 48px;
  border-radius: 999px;
  border: 0;
  background: var(--brand);
  color: #fff;
  display: grid;
  place-items: center;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12), 0 2px 6px rgba(0, 0, 0, 0.08);
  cursor: pointer;
}

.pagetop__btn:hover {
  filter: brightness(0.95);
}

.pagetop__btn:active {
  transform: translateY(1px);
}

.pagetop__btn:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
  box-shadow: 0 0 0 3px rgba(79, 177, 144, 0.45), 0 8px 20px rgba(0, 0, 0, 0.12);
}

.pagetop__icon {
  display: block;
}

@media (max-width: 767.98px) {
  .pagetop {
    right: 12px;
    bottom: 160px;
  }
  .pagetop__btn {
    width: 44px;
    height: 44px;
  }
}
/* 動きを控えたいユーザー設定に配慮 */
@media (prefers-reduced-motion: reduce) {
  .pagetop {
    transition: none;
  }
  .pagetop__btn {
    transition: none;
  }
}
/**
* スタイルシート統合
*/
/**
* Header用スタイルシート
*/
.hero-img {
  display: flex;
}

:root {
  --sp-header-h:56px;
} /* 既存SPヘッダーの高さに合わせる */
@media (max-width: 768px) {
  /* 既存のPC用ヒーローを隠したい場合（任意） */
  .hero-img {
    display: none !important;
  }
  .sp-hero {
    position: relative;
    width: 100%;
    /* 画面全高 − SPヘッダー分（ヘッダーが固定の場合） */
    min-height: calc(100dvh - var(--sp-header-h));
    /* ヘッダーが非固定なら 100dvh でもOK */
    overflow: hidden;
    margin-top: 0;
  }
  /* notch 対応で上の余白が必要なら（ヘッダーが無い場合のみ）:
     padding-top: env(safe-area-inset-top); */
  .sp-hero__video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover; /* 縦動画を全面フィット */
    -o-object-position: center center;
       object-position: center center; /* 構図の中心 */
    /* iOSで黒帯が出にくいようヒント */
  }
}
@media (min-width: 769px) {
  .sp-hero {
    display: none !important;
  }
}
.carousel {
  position: relative;
  width: 100%;
  max-width: 1200px;
  margin: 4rem auto;
}

.carousel__viewport {
  overflow: hidden;
}

.carousel__track {
  display: flex;
  gap: 16px;
  padding: 0 16px;
  margin: 0;
  list-style: none;
  will-change: transform;
  transition: transform 400ms ease;
}

.carousel__slide {
  flex: 0 0 auto;
  width: calc((100% - 48px) / 4);
} /* PC: 4枚 */
.carousel__slide img {
  display: block;
  width: 100%;
  height: auto;
  background: #e5e5e5;
}

@media (max-width: 1024px) {
  .carousel__slide {
    width: calc((100% - 16px) / 2);
  } /* タブレット: 2枚 */
}
@media (max-width: 640px) {
  .carousel__track {
    gap: 12px;
    padding: 0 12px;
  }
  .carousel__slide {
    width: 100%;
  } /* スマホ: 1枚 */
}
.carousel__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
  border: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  cursor: pointer;
  z-index: 2;
}

.carousel__nav:hover {
  background: rgba(0, 0, 0, 0.65);
}

.carousel__nav.prev {
  left: 6px;
}

.carousel__nav.next {
  right: 6px;
}

.carousel__dots {
  display: flex;
  gap: 8px;
  justify-content: center;
  padding: 12px 0;
}

.carousel__dots button {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 0;
  background: #cfcfcf;
  cursor: pointer;
}

.carousel__dots button[aria-current=true] {
  background: #6ad6ca;
}

:root {
  --gap-pc:16px;
  --gap-sp:12px;
  --ink:#24324b;
  --muted:#7b8798;
  --accent:#6ad6ca;
  --button:#e4a0b5;
  --card-bg:#fff;
  --ring:#e9eef4;
}

.plan-carousel {
  position: relative;
  max-width: 1200px;
  margin: 0 auto;
  padding: 32px 0;
}

.plan-carousel__header h2 {
  font-weight: 600;
  font-size: 28px;
  text-align: center;
  color: var(--ink);
  letter-spacing: 0.08em;
  margin: 0 0 20px;
}

.plan-carousel__viewport {
  overflow: hidden;
}

.plan-carousel__track {
  display: flex;
  gap: var(--gap-pc);
  margin: 0;
  padding: 0 var(--gap-pc);
  list-style: none;
  will-change: transform;
  transition: transform 0.45s ease;
}

.plan-carousel__nav {
  position: absolute;
  top: 44%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--ring);
  background: #fff;
  color: #0c2a4a;
  display: grid;
  place-items: center;
  cursor: pointer;
  z-index: 2;
}

.plan-carousel__nav.is-prev {
  left: 0;
}

.plan-carousel__nav.is-next {
  right: 0;
}

.plan-carousel__dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  padding: 16px 0;
}

.plan-carousel__dots button {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 0;
  background: #d6dbe2;
  cursor: pointer;
}

.plan-carousel__dots button[aria-current=true] {
  background: var(--accent);
}

.plan-carousel__cta {
  display: flex;
  justify-content: center;
  margin-top: 8px;
}

.plan-carousel__cta .cta {
  display: inline-block;
  padding: 12px 24px;
  background: var(--button);
  color: #fff;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 600;
}

/* カード */
.plan-card {
  flex: 0 0 auto;
  width: calc((100% - var(--gap-pc) * 3) / 4);
  background: var(--card-bg);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.04);
  border: 1px solid var(--ring);
}

.plan-card a {
  display: flex;
  flex-direction: column;
  color: inherit;
  text-decoration: none;
  height: 100%;
}

.plan-card__image {
  aspect-ratio: 4/5;
  background: #eef2f6;
  overflow: hidden;
}

.plan-card__image img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
  transition: transform 0.5s ease;
}

.plan-card:hover .plan-card__image img {
  transform: scale(1.03);
}

.plan-card__body {
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.plan-card__title {
  font-size: 16px;
  line-height: 1.5;
  color: var(--ink);
  margin: 0;
}

.plan-card__price {
  font-weight: 700;
  color: #1a2a44;
  margin: 2px 0 0;
}

.plan-card__price small {
  font-weight: 400;
  color: var(--muted);
}

.plan-card__desc {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.6;
  margin: 0;
}

.plan-card__button {
  margin-top: auto;
  display: inline-block;
  text-align: center;
  border: 1px solid var(--ring);
  padding: 8px 12px;
  border-radius: 999px;
  color: #1a2a44;
  background: #fff;
}

/* レスポンシブ */
@media (max-width: 1024px) {
  .plan-card {
    width: calc((100% - var(--gap-pc)) / 2);
  }
}
@media (max-width: 640px) {
  .plan-carousel {
    padding: 16px 0 24px;
  }
  .plan-carousel__track {
    gap: var(--gap-sp);
    padding: 0 var(--gap-sp);
  }
  .plan-card {
    width: 100%;
  }
}
/* ===== 店舗情報（セクション全体にスコープ） ===== */
#store-info {
  --ink:#223a64;
  --muted:#6b7b8c;
  --mint:#cfe6e3;
  --mint-deep:#b7d6d1;
  --card-bg:#fff;
  --ring:#e9eef4;
  position: relative;
  padding: 48px 0 56px;
  /* 背景：任意の和柄を置けます。無ければ薄いベージュとして表示 */
  background: url("../img/store-info-bg.jpg") center/cover no-repeat, #faf7f3;
}

#store-info .store-info__title {
  text-align: center;
  font-size: 28px;
  color: var(--ink);
  letter-spacing: 0.12em;
  margin: 0 0 20px;
}

#store-info .store-info__inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: flex-start;
  gap: 32px;
  padding: 0 16px;
}

/* 左カラム */
#store-info .store-info__left {
  flex: 0 0 320px; /* 左は細め（画像の雰囲気に合わせる） */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  position: relative;
}

.store-info-imgtxt {
  position: absolute;
  top: 20px;
  left: 10px;
  color: #FFF;
}

#store-info .store-info__left img {
  border-radius: 12px;
}

#store-info .store-info__logo {
  width: 180px;
  height: auto;
  display: block;
}

#store-info .store-info__addr {
  color: #2e2e2e;
  line-height: 1.9;
  margin: 6px 0 4px;
}

#store-info .store-info__btn {
  display: inline-block;
  margin-top: 6px;
  padding: 10px 22px;
  background: var(--mint);
  border: 1px solid var(--mint-deep);
  border-radius: 999px;
  color: #1b3c46;
  text-decoration: none;
  font-weight: 600;
  transition: filter 0.2s ease, transform 0.05s ease;
}

#store-info .store-info__btn:hover {
  filter: brightness(0.97);
}

#store-info .store-info__btn:active {
  transform: translateY(1px);
}

/* 右カラム（マップカード） */
#store-info .store-info__right {
  flex: 1 1 auto;
}

#store-info .store-info__map-card {
  background: var(--card-bg);
  border: 1px solid var(--ring);
  border-radius: 16px;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.05);
  padding: 12px; /* 白い余白が縁に出る感じを再現 */
}

#store-info .store-info__map-frame {
  position: relative;
  aspect-ratio: 16/10; /* 画像に近い横長比率 */
  width: 100%;
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
}

#store-info .store-info__map-frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* レスポンシブ */
@media (max-width: 1024px) {
  #store-info .store-info__inner {
    gap: 24px;
  }
  #store-info .store-info__left {
    flex-basis: 280px;
  }
}
@media (max-width: 768px) {
  #store-info {
    padding: 36px 0 44px;
  }
  #store-info .store-info__inner {
    flex-direction: column;
    align-items: stretch;
  }
  #store-info .store-info__left {
    flex-basis: auto;
    align-items: center;
    text-align: center;
  }
  #store-info .store-info__addr {
    text-align: center;
  }
}
/* ===== 着物ギャラリー（セクションにスコープ） ===== */
#kimono-gallery {
  --gap:16px;
  --height:140px; /* 画像帯の高さ（PC） */
  --radius:8px;
  --duration:45s; /* 1巡の速度（短くすると速くなります） */
  max-width: 1200px;
  margin: 0 auto;
  padding: 24px 16px 32px;
}

#kimono-gallery .kg__title {
  text-align: center;
  font-size: 28px;
  color: #223a64;
  letter-spacing: 0.1em;
  margin: 0 0 16px;
}

/* 右左の端をフワッと消す */
#kimono-gallery .kg__viewport {
  overflow: hidden;
  position: relative;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
}

/* 横一列を2周ぶん並べ、列ごと左へ流す */
#kimono-gallery .kg__row {
  display: flex;
  gap: var(--gap);
  align-items: center;
  will-change: transform;
  animation: kg-scroll var(--duration) linear infinite;
  margin: 0;
  padding: 0;
  list-style: none;
}

#kimono-gallery .kg__viewport:hover .kg__row {
  animation-play-state: paused; /* ホバーで一時停止 */
}

/* タイル：幅は可変、縦は揃える → 見た目が整う */
#kimono-gallery .kg__item {
  flex: 0 0 auto;
}

#kimono-gallery .kg__item img {
  display: block;
  height: var(--height);
  width: auto;
  aspect-ratio: 3/2;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: var(--radius);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.05);
}

/* CTA */
#kimono-gallery .kg__cta {
  display: flex;
  justify-content: center;
  margin-top: 18px;
}

#kimono-gallery .kg__btn {
  display: inline-block;
  padding: 10px 22px;
  border-radius: 999px;
  background: #e4a0b5;
  color: #fff;
  text-decoration: none;
  font-weight: 600;
}

/* アニメーション：同じ並びを2回続けて置いているので -50% 移動で継ぎ目なし */
@keyframes kg-scroll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}
/* レスポンシブ */
@media (max-width: 768px) {
  #kimono-gallery {
    --gap:12px;
    --height:110px;
    padding: 16px 12px 28px;
  }
  #kimono-gallery .kg__title {
    font-size: 22px;
  }
}
@media (prefers-reduced-motion: reduce) {
  #kimono-gallery .kg__row {
    animation: none;
  }
}
/* ===== “Rolaが選ばれる6つの理由”（スコープ：#why-choose-us） ===== */
#why-choose-us {
  --ink:#2b3b55;
  --muted:#789;
  --base:#e6f2ee; /* セクション全体の淡いグリーン */
  --card-bg:#fff;
  --ring:#e9eef4;
  position: relative;
  background: var(--base);
  padding: 48px 0 60px;
  overflow: hidden;
}

/* 左奥に背景画像（reason-bg.jpg）をうっすら配置 */
#why-choose-us::before {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  top: 0;
  height: 100%;
  background: url("../img/reason-bg.jpg") left center/cover no-repeat;
  opacity: 0.5;
  pointer-events: none;
}

/* 必要なら右上にも薄い模様を足したい場合は::afterで追加可能（今は未使用） */
/* #why-choose-us::after{ ... } */
#why-choose-us .reasons__inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 16px;
  position: relative;
  z-index: 1;
}

#why-choose-us .reasons__title {
  text-align: center;
  font-size: 30px;
  color: var(--ink);
  letter-spacing: 0.08em;
  margin: 0 0 10px;
}

#why-choose-us .reasons__lead {
  max-width: 820px;
  margin: 0 auto 26px;
  text-align: center;
  color: var(--muted);
  line-height: 1.9;
  font-size: 14px;
}

/* グリッド 3×2（タブで2列、SPで1列） */
#why-choose-us .reasons__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  margin: 0 auto;
  padding: 0;
  list-style: none;
  max-width: 900px;
}

/* カード */
#why-choose-us .reasons__card {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

#why-choose-us .reasons__figure {
  position: relative;
  margin: 0;
  background: #eef2f6;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.05);
  border: 1px solid var(--ring);
  aspect-ratio: 4/3; /* 画像比率をそろえる */
}

#why-choose-us .reasons__photo {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
  transition: transform 0.5s ease;
}

#why-choose-us .reasons__card:hover .reasons__photo {
  transform: scale(1.03);
}

/* バッジ：PNG画像を左上に重ねる */
#why-choose-us .reasons__badge-img {
  position: absolute;
  left: 14px;
  top: 14px;
  width: 64px;
  height: auto;
  display: block;
  pointer-events: none;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

/* 見出しテキスト */
#why-choose-us .reasons__text {
  text-align: center;
  color: #2b3b55;
  line-height: 1.6;
  font-weight: 600;
  margin: 0;
  background: var(--card-bg);
  border-radius: 12px;
  padding: 10px 8px;
}

/* レスポンシブ */
@media (max-width: 1024px) {
  #why-choose-us .reasons__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: 720px;
  }
}
@media (max-width: 640px) {
  #why-choose-us {
    padding: 36px 0 44px;
  }
  #why-choose-us .reasons__title {
    font-size: 24px;
  }
  #why-choose-us .reasons__grid {
    grid-template-columns: 1fr;
    gap: 18px;
    max-width: 480px;
  }
  #why-choose-us .reasons__badge-img {
    width: 56px;
  }
}
/* ===== ヘアセット：背景つき＋無限スクロール ===== */
#hair-set {
  --height:360px; /* 画像帯の高さ（PC） */
  --gap:16px;
  --radius:10px;
  --duration:90s; /* 1巡の速度（小さいほど速い） */
  --title:#223a64;
  --btn:#e4a0b5;
  position: relative;
  padding: 28px 16px 36px;
  background: #fbf8f2; /* ベース色 */
  overflow: hidden;
}

/* 背景画像（添付画像に差し替え） */
#hair-set::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("img/hairset-bg.jpg") center/cover no-repeat; /* ←添付背景に変更 */
  opacity: 0.45;
  pointer-events: none;
}

/* タイトル */
#hair-set .hs__title {
  position: relative;
  z-index: 1;
  text-align: center;
  font-size: 28px;
  color: var(--title);
  letter-spacing: 0.08em;
  margin: 0 0 14px;
}

/* ビューポート（端フェード） */
#hair-set .hs__viewport {
  position: relative;
  z-index: 1;
  max-width: 1200px;
  margin: 0 auto;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
}

/* 横一列を左へ流す（同じ並びを2回置いているので -50% で無限） */
#hair-set .hs__row {
  display: flex;
  gap: var(--gap);
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
  will-change: transform;
  animation: hs-scroll var(--duration) linear infinite;
}

#hair-set .hs__viewport:hover .hs__row {
  animation-play-state: paused;
}

#hair-set .hs__item {
  flex: 0 0 auto;
}

#hair-set .hs__item img {
  height: var(--height);
  width: auto;
  display: block;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: var(--radius);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.06);
}

/* CTA */
#hair-set .hs__cta {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: center;
  margin-top: 18px;
}

#hair-set .hs__btn {
  display: inline-block;
  padding: 10px 22px;
  border-radius: 999px;
  background: var(--btn);
  color: #fff;
  text-decoration: none;
  font-weight: 600;
}

/* アニメーション本体 */
@keyframes hs-scroll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}
/* レスポンシブ */
@media (max-width: 768px) {
  #hair-set {
    --height:260px;
    --gap:12px;
    padding: 20px 12px 28px;
  }
  #hair-set .hs__title {
    font-size: 22px;
  }
}
@media (prefers-reduced-motion: reduce) {
  #hair-set .hs__row {
    animation: none;
  }
}
/* ===== FAQ（#faq にスコープ） ===== */
#faq {
  --ink:#1f3558;
  --muted:#6f7c8a;
  --ring:#e6edf3;
  --q-dot:#b7cad9;
  --accent:#e4a0b5; /* 使わない場合は削除OK */
  padding: 48px 0 56px;
  background: #fff;
}

#faq .faq__inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 16px;
}

#faq .faq__title {
  text-align: center;
  font-size: 30px;
  color: var(--ink);
  letter-spacing: 0.08em;
  margin: 0 0 22px;
}

/* 2カラム（SPで1カラム） */
#faq .faq__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px 36px;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Q（ボタン） */
#faq .faq__q {
  all: unset;
  cursor: pointer;
  display: block;
  width: 80%;
  color: var(--ink);
  font-weight: 600;
  line-height: 1.7;
  padding: 10px 36px 10px 36px;
  position: relative;
  border-radius: 8px;
  transition: background 0.15s ease;
}

#faq .faq__q:hover {
  background: #f6f9fc;
}

/* 左のQ丸アイコン */
#faq .faq__q::before {
  content: "Q";
  position: absolute;
  left: 8px;
  top: 10px;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: #edf3f8;
  color: #86a0b6;
  display: grid;
  place-items: center;
  font-size: 12px;
  font-weight: 700;
}

/* 右の＋/−アイコン */
#faq .faq__q::after {
  content: "+";
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  color: #88a1b5;
  font-size: 22px;
  line-height: 1;
}

#faq .faq__item.is-open .faq__q::after {
  content: "—";
  font-size: 24px;
}

/* A（パネル） */
#faq .faq__a {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.28s ease;
  border-left: 2px solid var(--ring);
  margin-left: 16px;
  border-radius: 0 8px 8px 0;
}

#faq .faq__a-inner {
  position: relative;
  margin: 10px 0 0;
  padding: 12px 16px 12px 56px;
  background: #f4f7fb;
  color: #324b6b;
  line-height: 1.9;
  border: 1px solid var(--ring);
  border-left: none;
  border-radius: 8px;
}

/* Aの左アイコン（濃いめの四角にA） */
#faq .faq__a-inner::before {
  content: "A";
  position: absolute;
  left: 12px;
  top: 12px;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  background: #304e7a;
  color: #fff;
  display: grid;
  place-items: center;
  font-weight: 700;
}

/* SP */
@media (max-width: 768px) {
  #faq {
    padding: 36px 0 44px;
  }
  #faq .faq__title {
    font-size: 24px;
  }
  #faq .faq__grid {
    grid-template-columns: 1fr;
    gap: 18px;
  }
}
/* ---- FAQ：Qを大きくC7E3DC、囲みなし ---- */
#faq .faq__q {
  padding-left: 44px; /* 左に少し余白（Qの分） */
}

#faq .faq__q::before {
  content: "Q";
  position: absolute;
  left: 8px;
  top: 50%;
  transform: translateY(-50%);
  /* 見た目 */
  font-size: 32px; /* ←大きさ。好みで 36px などに */
  font-weight: 800;
  color: #C7E3DC;
  /* バッジの囲みを消す */
  width: auto;
  height: auto;
  background: transparent;
  border: none;
  border-radius: 0;
  display: block; /* 以前の grid/丸背景を打ち消し */
}

.instagram-section {
  padding: 40px 20px;
  background-color: #fff;
  text-align: center;
  position: relative;
  background: url("../img/instagram-bg.jpg") left center/contain no-repeat;
}

.instagram-title {
  font-size: 18px;
  font-weight: bold;
  color: #002147;
  margin-bottom: 20px;
}

.instagram-wrapper {
  max-width: 1200px;
  margin: 0 auto;
}

.instagram-iframe {
  width: 100%;
  height: 600px; /* 高さは適宜調整 */
  border: none;
}

/**
* スタイルシート統合
*/
/* 親コンテナを横並びレイアウトに */
.gallery {
  display: flex;
  align-items: flex-start; /* 上揃えで配置 */
}

/* サムネイル一覧のスタイル */
.thumbnails {
  width: 110px; /* サムネイル欄の横幅（サムネイル画像の幅に合わせる） */
  margin-right: 20px; /* メイン画像エリアとの間隔 */
}

.thumbnails img {
  display: block;
  width: 100%;
  margin-bottom: 10px; /* サムネイル間の下余白 */
  box-sizing: border-box; /* 枠線を含めてサイズ計算 */
  border: 2px solid transparent; /* 枠線（通常は透明） */
  cursor: pointer;
}

.thumbnails img.active {
  border-color: #333; /* 選択中サムネイルは枠線を表示 */
}

/* メイン画像エリアのスタイル */
.main-image {
  flex: 1; /* 残りの幅いっぱいに表示 */
  text-align: center; /* メイン画像を中央寄せ */
}

.main-image img {
  max-width: 100%; /* メイン画像はコンテナ幅以内で縮小表示 */
  height: auto; /* 縦横比を維持 */
}

/* --- プラン概要（MV直下） --- */
.plan-intro {
  background: #fff;
  padding: clamp(40px, 6vw, 72px) 0;
}

.plan-intro__inner {
  width: min(1120px, 92%);
  margin: 0 auto;
  padding-top: 140px;
}

@media (max-width: 640px) {
  .plan-intro__inner {
    padding-top: 20px !important;
  }
}
.plan-intro__title {
  color: #123a5a; /* 画像の濃紺寄り */
  font-weight: 700;
  text-align: center;
  font-size: 4.4rem;
  font-family: "Hina Mincho", serif;
  letter-spacing: 0.04em;
  line-height: 1.25;
  margin: 0 0 clamp(28px, 4vw, 48px);
}

@media (max-width: 1024px) {
  .plan-intro__title {
    font-size: 2.8rem;
  }
}
.plan-intro__lead {
  width: min(880px, 100%); /* 段落は左寄せで読みやすく */
  text-align: left;
  color: #2b2b2b;
  line-height: 1.9;
  font-size: clamp(14px, 1.4vw, 16px);
}

.plan-intro__lead p {
  margin: 0 0 0.7em;
}

.plan-intro__price {
  width: min(880px, 100%);
  text-align: left;
  font-weight: 800;
  color: #111;
  font-size: clamp(22px, 2.6vw, 34px);
  letter-spacing: 0.02em;
}

.plan-intro__price .yen {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
}

.plan-intro__price .tax {
  font-size: 0.62em;
  font-weight: 500;
  color: #444;
  margin-left: 0.4em;
}

/* CTAボタン（中央） */
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: clamp(240px, 28vw, 420px);
  height: clamp(48px, 6.5vw, 64px);
  margin: 40px auto;
  color: #fff;
  background: #e7a1b9; /* ピンク */
  border-radius: 9999px;
  box-shadow: 0 6px 16px rgba(231, 161, 185, 0.35);
  text-decoration: none;
  font-weight: 700;
  font-size: clamp(14px, 1.6vw, 18px);
  letter-spacing: 0.08em;
  transition: transform 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease;
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(231, 161, 185, 0.45);
}

.plan-intro .btn-reserve {
  display: flex; /* ブロック化 + 中身を中央に */
  justify-content: center;
  margin: 24px auto 0; /* 左右 auto で中央寄せ */
  width: clamp(240px, 28vw, 420px); /* 幅があると確実にセンタリングされる */
  float: none; /* 念のための上書き */
  position: static; /* 念のための上書き */
}

/* ===== 着物ギャラリー ===== */
.kimono-gallery {
  background: #fff;
  padding: clamp(28px, 5vw, 56px) 0;
}

.kg-inner {
  width: min(1120px, 92%);
  margin: 0 auto;
}

.kg-title {
  text-align: center;
  color: #123a5a;
  font-weight: 700;
  font-size: clamp(24px, 3.2vw, 44px);
  letter-spacing: 0.06em;
  line-height: 1.3;
  margin: 0 0 clamp(20px, 3vw, 36px);
}

/* 配置：左に大画像、右にサムネ */
.kg-wrap {
  display: grid;
  grid-template-columns: 1fr minmax(220px, 300px); /* 左=可変、右=サムネ列 */
  gap: clamp(20px, 3vw, 40px);
  align-items: start;
}

/* 左：大画像（縦長の長方形を強制） */
.kg-main {
  margin: 0;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.12);
  aspect-ratio: 3/4; /* ← アップは縦長長方形に固定 */
  background: #f4f4f4;
}

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

/* 右：サムネ（常に正方形） */
.kg-thumbs {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* 2列 x N行 */
  gap: clamp(10px, 1.6vw, 18px);
}

.kg-thumb {
  margin: 0;
  padding: 0;
}

.kg-thumb-btn {
  position: relative;
  width: 100%;
  aspect-ratio: 1/1; /* ← 正方形固定 */
  border: 2px solid transparent;
  border-radius: 8px;
  padding: 0;
  background: #fff;
  overflow: hidden;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

.kg-thumb-btn:hover,
.kg-thumb-btn:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.14);
  outline: none;
}

.kg-thumb-btn.is-active {
  border-color: #e7a1b9; /* 選択中の縁色 */
  box-shadow: 0 8px 22px rgba(231, 161, 185, 0.25);
}

.kg-thumb-btn img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover; /* 画像を正方形にトリミング */
  display: block;
}

/* スマホでは縦積み（必要なら） */
@media (max-width: 1024px) {
  .kg-wrap {
    grid-template-columns: 1fr;
  }
  .kg-thumbs {
    grid-template-columns: repeat(4, 1fr);
  }
}
/**
* スタイルシート統合
*/
/* ========== ヘアセット（画像左＋テキスト右） ========== */
.hairset-section {
  background: #fff;
}

.hairset__inner {
  width: min(1120px, 92%);
  margin: 0 auto;
  padding-top: 140px;
}

@media (max-width: 640px) {
  .hairset__inner {
    padding-top: 20px !important;
  }
}
.hairset__title {
  text-align: center;
  color: #123a5a; /* サイトの濃紺 */
  font-weight: 700;
  font-size: clamp(22px, 3vw, 32px);
  letter-spacing: 0.06em;
  line-height: 1.35;
  margin: 0 0 clamp(18px, 3vw, 28px);
}

/* 本文レイアウト：左に画像、右にテキスト */
.hairset__content {
  display: grid;
  grid-template-columns: minmax(280px, 520px) 1fr; /* 左固定気味・右可変 */
  gap: clamp(20px, 4vw, 56px);
  align-items: start;
}

/* 左画像（角丸＋影、縦横比は自然トリミング） */
.hairset__media {
  margin: 0;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.12);
  background: #f3f3f3;
}

.hairset__media img {
  width: 100%;
  height: 100%;
  display: block;
  -o-object-fit: cover;
     object-fit: cover; /* 元画像の比率に依存せず見切れをきれいに */
}

/* 右テキスト */
.hairset__text {
  color: #333;
  font-size: clamp(14px, 1.4vw, 16px);
  line-height: 1.9;
}

.hairset__text p {
  margin: 0 0 0.9em;
}

/* スマホ：縦積み */
@media (max-width: 1024px) {
  .hairset__content {
    grid-template-columns: 1fr;
  }
}
/* ========= ヘアスタイル グリッド ========= */
.hair-grid {
  padding: clamp(24px, 5vw, 56px) 0;
  background: #fff;
}

.hair-grid__inner {
  width: min(1120px, 92%);
  margin: 0 auto;
}

/* 白いパネルに丸角＆内側余白（デザインに合わせて） */
.hair-grid__list {
  list-style: none;
  margin: 0;
  padding: clamp(12px, 2.4vw, 24px);
  display: grid;
  grid-template-columns: repeat(4, 1fr); /* PCは4列 */
  gap: clamp(12px, 2.2vw, 28px);
  background: #fff;
  border: 1px solid #eee;
  border-radius: 16px;
}

/* 各カード（角丸＋影） */
.hair-grid__item {
  position: relative;
  aspect-ratio: 3/4; /* 縦長カードに揃える */
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
  background: #f3f3f3;
}

/* 画像はトリミングしてフィット */
.hair-grid__item > img {
  width: 100%;
  height: 100%;
  display: block;
  -o-object-fit: cover;
     object-fit: cover;
  transition: transform 0.25s ease, filter 0.25s ease;
}

/* ほんのりホバー */
@media (hover: hover) {
  .hair-grid__item:hover > img {
    transform: scale(1.02);
    filter: saturate(1.03);
  }
}
/* タブレット：3列 */
@media (max-width: 1024px) {
  .hair-grid__list {
    grid-template-columns: repeat(3, 1fr);
  }
}
/* スマホ：2列 */
@media (max-width: 640px) {
  .hair-grid__list {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    border-radius: 12px;
  }
  .hair-grid__item {
    border-radius: 10px;
  }
}
/* ===== メイク（テキスト左・画像右） ===== */
.makeup-section {
  background: #fff;
  padding: clamp(36px, 6vw, 72px) 0;
}

.makeup__inner {
  width: min(1120px, 92%);
  margin: 0 auto;
}

.makeup__title {
  text-align: center;
  color: #123a5a;
  font-weight: 700;
  font-size: clamp(22px, 3vw, 32px);
  letter-spacing: 0.06em;
  line-height: 1.35;
  margin: 0 0 clamp(18px, 3vw, 28px);
}

/* 本文：左=テキスト 右=画像 */
.makeup__content {
  display: grid;
  grid-template-columns: 1fr minmax(280px, 520px); /* 左可変／右は固定気味 */
  gap: clamp(20px, 4vw, 56px);
  align-items: start;
}

/* 左テキスト */
.makeup__text {
  max-width: 520px; /* 行幅を整える */
  color: #333;
  font-size: clamp(14px, 1.4vw, 16px);
  line-height: 1.9;
}

.makeup__text p {
  margin: 0 0 0.9em;
}

/* 右画像（正方形・角丸） */
.makeup__media {
  margin: 0;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.12);
  background: #f3f3f3;
  aspect-ratio: 1/1; /* 正方形に固定 */
}

.makeup__media img {
  width: 100%;
  height: 100%;
  display: block;
  -o-object-fit: cover;
     object-fit: cover; /* はみ出しを自然にトリミング */
}

/* スマホ：縦積み */
@media (max-width: 1024px) {
  .makeup__content {
    grid-template-columns: 1fr;
  }
  .makeup__text {
    max-width: none;
  }
}
/**
* スタイルシート統合
*/
.faq__page {
  padding-top: 140px !important;
}

@media (max-width: 640px) {
  .faq__page {
    padding-top: 20px !important;
  }
}
/**
* スタイルシート統合
*/
/* ===== 店舗情報 ===== */
.store-info-page {
  background: #fff;
  padding: clamp(36px, 6vw, 72px) 0;
}

.si-inner {
  width: min(1120px, 92%);
  margin: 0 auto;
  padding-top: 140px;
}

@media (max-width: 640px) {
  .si-inner {
    padding-top: 20px !important;
  }
}
.si-title {
  text-align: center;
  color: #123a5a;
  font-weight: 700;
  font-size: clamp(24px, 3.2vw, 44px);
  letter-spacing: 0.06em;
  line-height: 1.3;
  margin: 0 0 clamp(22px, 3vw, 36px);
}

.si-table {
  margin: 0;
  padding: 0;
}

.si-row {
  display: grid;
  grid-template-columns: 140px 1fr; /* 左ラベル / 右内容 */
  gap: clamp(12px, 2vw, 20px);
  padding: clamp(14px, 2vw, 18px) 0;
  border-top: 1px solid #eef0f2;
}

.si-row:first-child {
  border-top: none;
}

.si-row dt {
  margin: 0;
  color: #123a5a;
  font-weight: 700;
  font-size: 14px;
  line-height: 1.6;
}

.si-row dd {
  margin: 0;
  color: #333;
  font-size: 15px;
  line-height: 1.9;
}

.si-tel {
  color: #123a5a;
  font-weight: 700;
  text-decoration: none;
}

/* 写真スリット（3枚） */
.si-photos {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(10px, 1.8vw, 14px);
}

.si-photos li {
  aspect-ratio: 16/9;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.1);
  background: #f3f5f7;
}

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

/* 箇条書き */
.si-list {
  margin: 0;
  padding-left: 1.2em;
}

.si-list li {
  margin: 0.2em 0;
}

/* map / movie の差し込み枠（16:9・角丸・グレー） */
.si-embed {
  position: relative;
  width: 100%;
  aspect-ratio: 16/9;
  border-radius: 12px;
  background: #e9edf2;
  overflow: hidden;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.1);
  margin-top: 12px;
}

.si-embed > span {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #76829a;
  font-size: 13px;
  letter-spacing: 0.04em;
}

.si-embed iframe, .si-embed video {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* レスポンシブ（スマホ：縦並び） */
@media (max-width: 768px) {
  .si-row {
    grid-template-columns: 1fr;
  }
  .si-row dt {
    font-size: 13px;
  }
  .si-photos {
    grid-template-columns: repeat(2, 1fr);
  }
}
/**
* スタイルシート統合
*/
/* ===== 予約について ===== */
.reserve-info {
  background: #fff;
  padding: clamp(36px, 6vw, 72px) 0;
}

.reserve__inner {
  width: min(1120px, 92%);
  margin: 0 auto;
  padding-top: 140px;
}

@media (max-width: 640px) {
  .reserve__inner {
    padding-top: 20px !important;
  }
}
.reserve__title {
  text-align: center;
  color: #123a5a;
  font-weight: 700;
  font-size: clamp(22px, 3.2vw, 36px);
  letter-spacing: 0.06em;
  line-height: 1.35;
  margin: 0 0 clamp(20px, 3.5vw, 32px);
}

.reserve__content {
  display: grid;
  grid-template-columns: minmax(300px, 560px) 1fr; /* 左画像/右本文 */
  gap: clamp(20px, 4vw, 56px);
  align-items: start;
}

/* 画像：角丸＋影、比率は4:3程度 */
.reserve__media {
  margin: 0;
  border-radius: 16px;
  overflow: hidden;
  background: #f3f3f3;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.12);
  aspect-ratio: 4/4;
}

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

/* 右カラム */
.reserve__body {
  color: #333;
}

.reserve__note {
  margin: 0 0 10px;
  font-size: clamp(13px, 1.25vw, 14px);
  color: #6b7c8f;
  line-height: 1.8;
}

/* 注意枠（薄いグリーン枠） */
.reserve__box {
  border: 1.5px solid #C7E3DC; /* ご指定系の色味 */
  background: #fbfefd; /* ほんのり白緑 */
  border-radius: 10px;
  padding: 12px 14px;
  font-size: clamp(13px, 1.35vw, 15px);
  line-height: 1.9;
}

/* CTAボタン：右カラム内で中央配置 */
.reserve__btn {
  display: block;
  width: clamp(180px, 20vw, 220px);
  height: 44px;
  margin: 16px auto 0; /* ← 中央寄せ */
  border-radius: 9999px;
  background: #e7a1b9;
  color: #fff;
  text-decoration: none;
  font-weight: 700;
  letter-spacing: 0.06em;
  font-size: clamp(14px, 1.6vw, 16px);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 16px rgba(231, 161, 185, 0.35);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.reserve__btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(231, 161, 185, 0.45);
}

/* スマホ：縦積み */
@media (max-width: 1024px) {
  .reserve__content {
    grid-template-columns: 1fr;
  }
}
/**
* スタイルシート統合
*/
/* ===== Flow 基本 ===== */
.flow {
  background: #fff;
  padding: clamp(36px, 6vw, 72px) 0;
}

.flow__inner {
  width: min(1800px, 92%);
  margin: 0 auto;
  padding-top: 140px;
}

@media (max-width: 640px) {
  .flow__inner {
    padding-top: 20px !important;
  }
}
.flow__title {
  text-align: center;
  color: #123a5a;
  font-weight: 700;
  font-size: clamp(22px, 3.2vw, 36px);
  letter-spacing: 0.06em;
  line-height: 1.35;
  margin: 0 0 clamp(18px, 3.2vw, 28px);
}

.flow__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.flow__item {
  padding: clamp(18px, 3vw, 28px) 0;
}

/* 見出し：番号テキスト＋右に細いライン */
.flow__label {
  display: flex;
  align-items: center;
  gap: 12px;
  color: #1a1a1a;
  font-size: 2.4rem;
  letter-spacing: 0.03em;
  margin: 0 0 12px;
}

.flow__label::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: #dfe5e9;
}

/* 2カラム：左サムネ群 / 右本文 */
.flow__grid {
  display: grid;
  grid-template-columns: minmax(140px, 300px) 1fr;
  gap: clamp(14px, 2.6vw, 28px);
  align-items: start;
}

/* サムネ群（デフォは縦積み） */
.flow__thumbs {
  display: grid;
  gap: 12px;
}

.flow__thumb {
  margin: 0;
  border-radius: 12px;
  overflow: hidden;
  background: #f3f3f3;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.1);
  aspect-ratio: 4/4;
}

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

/* 2列（サムネ2枚を横並びにしたい項目に付与） */
.flow__thumbs--cols2 {
  grid-template-columns: repeat(2, 1fr);
}

/* 本文 */
.flow__body {
  color: #333;
  font-size: 14.5px;
  line-height: 1.9;
}

.flow__body p {
  margin: 0 0 0.8em;
}

/* ミントの細い下線（STEP1で使用） */
.flow__hr-mint {
  height: 1px;
  background: #CFE7E2;
  margin: 8px 0 10px;
}

/* ピル風ラベル（リンクではない） */
.pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 34px;
  padding: 0 16px;
  margin: 2px 0 10px;
  border-radius: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  font-size: 13px;
  text-decoration: none;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  background: #C7E3DC;
  color: #244b43;
  box-shadow: 0 4px 12px rgba(43, 83, 67, 0.12);
}

.pill--outline {
  background: #fff;
  color: #2a4e46;
  border: 1.5px solid #C7E3DC;
  box-shadow: none;
}

/* 注意ボックス（薄ミント枠） */
.flow__note {
  border: 1.5px solid #C7E3DC;
  border-radius: 8px;
  background: #fff;
  padding: 12px 16px;
  font-size: 13.5px;
  line-height: 1.85;
  color: #2b2b2b;
  width: min(520px, 100%);
}

.flow__note ol {
  margin: 0;
  padding-left: 1.2em;
}

.flow__note li {
  margin: 0.2em 0;
}

/* 箇条書き */
.flow__bullets {
  margin: 0.4em 0 0;
  padding-left: 1.2em;
}

.flow__bullets li {
  margin: 0.2em 0;
}

/* STEP1 専用の微調整（画像300px/本文の中央寄せパーツ） */
.flow__item.is-step1 .flow__grid {
  grid-template-columns: 300px 1fr;
}

/* レスポンシブ */
@media (max-width: 1024px) {
  .flow__grid {
    grid-template-columns: 1fr;
  }
  .flow__thumbs--cols2 {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 640px) {
  .flow__thumbs--cols2 {
    grid-template-columns: 1fr;
  } /* スマホは縦積み */
}
/* --- Tablet（～1024px）で縦積みに --- */
@media (max-width: 1024px) {
  .flow__inner {
    width: min(960px, 94%);
  }
  /* 2カラム → 1カラム */
  .flow__grid {
    grid-template-columns: 1fr;
    gap: 16px;
    align-items: start;
  }
  /* サムネは1列に（横2枚指定があっても縦積みに） */
  .flow__thumbs.is-two-col {
    grid-template-columns: 1fr !important;
  }
  .flow__thumbs {
    gap: 12px;
  }
  /* 画像は画面幅いっぱい＆角丸を保持 */
  .flow__thumb {
    aspect-ratio: 4/4; /* スマホ見えの比率 */
    border-radius: 12px;
    overflow: hidden;
    margin: 20px;
  }
  .flow__thumb img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
    display: block;
  }
  /* 飾りラベルと注意枠は幅いっぱいに */
  .pill {
    margin-left: auto;
    margin-right: auto; /* 中央寄せ（添付の見え方）*/
  }
  .info-box {
    width: 100%;
    margin: 0; /* 左寄せにしたい場合は margin:0 auto; を外す */
  }
}
/* --- Phone（～600px）で余白・文字サイズを整える --- */
@media (max-width: 600px) {
  .flow {
    padding: 20px 0 28px;
  }
  .flow__title {
    font-size: 2.8rem;
    margin-bottom: 14px;
  }
  .flow__item {
    padding: 14px 0 22px;
  }
  /* 見出し（番号 + 細い線） */
  .flow__label {
    font-size: 2.5rem;
    gap: 8px;
    margin-bottom: 10px;
  }
  .flow__label::after {
    height: 1px;
    background: #e5ecea;
  }
  /* 本文と区切り線 */
  .flow__body {
    font-size: 13.5px;
    line-height: 1.85;
  }
  .flow__desc {
    padding-bottom: 6px;
    margin-bottom: 10px;
    border-bottom: 1px solid #CFE7E2;
  }
  /* 箇条書きのインデント微調整 */
  .flow__bullets {
    padding-left: 1.1em;
  }
  /* ラベルのサイズ微調整（任意） */
  .pill {
    height: 34px;
    font-size: 13px;
    padding: 0 14px;
  }
}
/* --- Very small（～360px）--- */
@media (max-width: 360px) {
  .pill {
    height: 32px;
    font-size: 12px;
    padding: 0 12px;
  }
}
/**
* スタイルシート統合
*/
/* ===== 特定商取引に基づく表記 ===== */
.tokusho {
  background: #fff;
  padding: clamp(36px, 6vw, 72px) 0;
}

.tokusho__inner {
  width: min(960px, 92%); /* 画像の雰囲気に合わせて少し細め */
  margin: 0 auto;
  padding-top: 140px;
}

@media (max-width: 640px) {
  .tokusho__inner {
    padding-top: 20px !important;
  }
}
.tokusho__title {
  text-align: center;
  color: #123a5a; /* 紺 */
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1.3;
  font-size: clamp(24px, 3.2vw, 40px);
  margin: 0 0 clamp(18px, 3vw, 28px);
}

/* 表本体（各行の上に1px線） */
.tokusho__table {
  margin: 0;
  padding: 0;
}

.tokusho__row {
  display: grid;
  grid-template-columns: 180px 1fr; /* 左ラベル／右テキスト */
  gap: 18px;
  align-items: start;
  padding: 14px 0;
  border-top: 1px solid #e3e7eb; /* 細い横線 */
}

.tokusho__row:last-child {
  /* 末行の下線は必要なら付けてもOK
  border-bottom: 1px solid #e3e7eb;
  */
}

.tokusho__row dt {
  margin: 0;
  color: #123a5a;
  font-weight: 700;
  font-size: 14px;
  line-height: 1.8;
}

.tokusho__row dd {
  margin: 0;
  color: #2b2b2b;
  font-size: 15px;
  line-height: 1.9;
  word-break: break-word;
}

/* スマホ：縦並びにして読みやすく */
@media (max-width: 640px) {
  .tokusho__inner {
    width: min(560px, 92%);
  }
  .tokusho__row {
    grid-template-columns: 1fr;
    gap: 6px;
    padding: 12px 0;
  }
  .tokusho__row dt {
    font-size: 13px;
  }
  .tokusho__row dd {
    font-size: 14px;
  }
}
/**
* スタイルシート統合
*/
/* ===== 撮影プラン レイアウト ===== */
.photo-plan {
  background: #fff;
  padding: clamp(36px, 6vw, 72px) 0;
}

.pp-inner {
  width: min(1120px, 92%);
  margin: 0 auto;
  padding-top: 140px;
}

@media (max-width: 640px) {
  .pp-inner {
    padding-top: 20px !important;
  }
}
/* 見出し */
.pp-title {
  text-align: center;
  color: #123a5a;
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1.3;
  font-size: clamp(22px, 3.2vw, 36px);
  margin: 0 0 clamp(18px, 3vw, 24px);
}

/* 表 */
.pp-table {
  width: min(820px, 100%);
  margin: 0 auto clamp(24px, 4vw, 40px);
}

.pp-table table {
  width: 100%;
  border-collapse: collapse;
  background: #fff;
}

.pp-table thead th {
  background: #dcefe7; /* 淡いグリーン */
  color: #1f2e2b;
  font-weight: 700;
  text-align: center;
  padding: 12px 10px;
  font-size: 14px;
  border: 1px solid #d7dfdc;
}

.pp-table tbody td {
  padding: 12px 10px;
  font-size: 14px;
  color: #333;
  text-align: center;
  border: 1px solid #e4e8ea;
}

.pp-table tbody td:first-child {
  text-align: left;
}

/* 2カラム：写真＋説明 */
.pp-grid {
  display: grid;
  grid-template-columns: minmax(280px, 520px) 1fr;
  gap: clamp(18px, 4vw, 40px);
  align-items: start;
  margin-top: clamp(20px, 4vw, 36px);
}

.pp-media {
  margin: 0;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.12);
  background: #f3f3f3;
  aspect-ratio: 4/3;
}

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

.pp-text {
  color: #333;
  font-size: 14.5px;
  line-height: 1.9;
}

.pp-points {
  margin: 0.6em 0 0;
  padding-left: 1.2em;
}

.pp-points li {
  margin: 0.25em 0;
}

/* サブ見出し + 注意事項ブロック */
.pp-subtitle {
  text-align: center;
  color: #123a5a;
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1.3;
  font-size: clamp(18px, 2.6vw, 28px);
  margin: clamp(24px, 5vw, 40px) 0 clamp(12px, 2.4vw, 18px);
}

.pp-notes {
  width: min(880px, 100%);
  margin: 0 auto;
  color: #2b2b2b;
  font-size: 14px;
  line-height: 1.9;
}

@media (max-width: 1024px) {
  .pp-notes {
    padding: 20px;
  }
}
.pp-notes ul {
  margin: 0;
  padding-left: 1.2em;
}

.pp-notes li {
  margin: 0.25em 0;
}

/* レスポンシブ（スマホ：縦積み） */
@media (max-width: 1024px) {
  .pp-grid {
    grid-template-columns: 1fr;
  }
}
/**
* スタイルシート統合
*/
/* 並び方だけ制御（plan-section内限定） */
.plan-section .plan__inner {
  width: min(1200px, 92vw);
  margin-inline: auto;
  padding-top: 140px !important;
}

@media (max-width: 640px) {
  .plan-section .plan__inner {
    padding-top: 20px !important;
  }
}
/* ULをグリッド化 */
.plan-section ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr)); /* PC：4列 */
  gap: 24px; /* カード間の余白はお好みで */
}

/* タブレットは3列（不要ならこのブロック削除可） */
@media (max-width: 1023.98px) {
  .plan-section ul {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
  }
}
/* スマホ：2列（仕様） */
@media (max-width: 767.98px) {
  .plan-section ul {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
  }
}
/* グリッド内の各カード（<li>）が正しく伸びるように */
.plan-section ul > .plan-card {
  height: 100%;
  min-width: 0; /* タイトル等のはみ出し防止 */
  float: none; /* 既存テーマがfloat指定している場合のリセット */
  clear: none;
}

/* aで全体クリックにしている場合、高さを綺麗に合わせる */
.plan-section ul > .plan-card > a {
  display: block;
  height: 100%;
}

/* ========== plan-section 専用・強制リセット ========== */
/* 横書きに固定（縦書き系が当たっていても上書き） */
.plan-section,
.plan-section * {
  writing-mode: horizontal-tb !important;
  text-orientation: mixed !important;
}

/* ULをグリッド化（PC=4列 / TB=3列 / SP=2列） */
.plan-section .plan__inner {
  width: min(1200px, 92vw);
  margin-inline: auto;
}

.plan-section ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 24px;
}

/* タブレット（任意） */
@media (max-width: 1023.98px) {
  .plan-section ul {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 20px;
  }
}
/* スマホ */
@media (max-width: 767.98px) {
  .plan-section ul {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 14px;
  }
}
/* ====== カード要素の幅/floatなどをリセット ====== */
.plan-section ul > .plan-card {
  float: none !important;
  clear: none !important;
  width: 100% !important; /* テーマ側の固定幅を無効化 */
  min-width: 0;
  height: 100%;
}

/* aで全体クリックにしているのでブロック化＋幅100% */
.plan-section ul > .plan-card > a {
  display: block !important;
  width: 100% !important;
  height: 100%;
  text-decoration: none;
  color: inherit;
  position: static !important; /* 位置指定系の影響を回避 */
}

/* 画像まわりの安全策（棒状崩れの防止） */
.plan-section .plan-card__image {
  aspect-ratio: 3/4;
  overflow: hidden;
}

.plan-section .plan-card__image img {
  display: block;
  width: 100% !important;
  height: 100% !important;
  -o-object-fit: cover;
     object-fit: cover;
}

/* 本文エリアが細くならないように */
.plan-section .plan-card__body,
.plan-section .plan-card__title,
.plan-section .plan-card__desc,
.plan-section .plan-card__price,
.plan-section .plan-card__button {
  min-width: 0;
  max-width: 100% !important;
  white-space: normal !important;
  letter-spacing: normal !important;
  word-break: normal !important;
}

/* 余計なtransformや回転があれば無効化（縦書きUIの派生対策） */
.plan-section .plan-card *,
.plan-section .plan-card {
  transform: none !important;
}

/* SPで影響出やすいので影・角丸の調整は任意 *//*# sourceMappingURL=style.css.map */