/*
Theme Name: Twenty Twenty-Four Child
Template: twentytwentyfour
Version: 1.0
*/
html {
  scroll-behavior: smooth;
}

/* サイト全体を明朝系に */
body {
  font-family: "Noto Serif JP", "游明朝", YuMincho, "Hiragino Mincho ProN", "MS PMincho", serif !important;
  font-weight: 400;
  line-height: 1.7;  /* 行間を少し広めにして読みやすく */
  color: #222;       /* 落ち着いた濃いめの文字色 */
}



/* 見出し */
h1, h2, h3, h4, h5, h6 {
  font-family: 'Noto Serif JP', serif;
  font-weight: normal;
}
a:focus,
a:active {
  outline: none !important;
  box-shadow: none !important;
  color: #a67c52 !important;   /* サイトに合う落ち着いた色に変更 */
}
a:hover {
  color: #a67c52 !important;   /* サイトに合う落ち着いた色に変更 */
text-decoration: none; }


/* ヘッダー帯 */
.salon-header{
  height:3.5em;
  display:flex;
  align-items:center;
  justify-content:space-between;
  overflow:visible;
}
.salon-header-navi{
}
.salon-header-box{
	width:100%!important;
}
/* ナビを右端へ */
.salon-header .wp-block-navigation{
  margin-left:auto;       /* これだけで右端へ */
  margin-right:0.2em;      /* 右の余白が欲しければ */
}

/* ナビ内の項目も右寄せ */
.salon-header .wp-block-navigation__container{
  justify-content:flex-end;
}

/* ロゴのはみ出し（必要なら数値調整） */
.salon-header-logo{ position:relative; top:0px; z-index:10; }

/* ヘッダー帯の背景など */
header.wp-block-template-part{ padding-bottom:0; background:#faf7ed; }

/* 例：ナビの外側グループに .salon-header-navi を付けた場合 */
.salon-header-navi{ margin-left:auto; margin-right:0; }



/* ====== レスポンシブ調整 ====== */

@media (max-width: 1000px){
	.salon-header{height:2.8em;}
	.wp-block-navigation-item__label{font-size:80%!important;}
	.salon-header-logo{top:-1px;width:6em;}
.salon-header .wp-block-navigation{
  margin-right:0;      /* 右の余白が欲しければ */
}
}

/*テスト*/
/* --- タブレット幅でもハンバーガーを出す --- */
/* 1024px以下はボタンを表示、横並びメニューは隠す */
@media (max-width:700px){

  /* ボタンを必ず出す（右端へ） */
  .salon-header-navi .wp-block-navigation__responsive-container-open{
    display:block !important;
    margin-left:auto;
  }

  /* 通常の横並びULは隠す（=ヘッダー帯の中のUL） */
  .salon-header-navi > .wp-block-navigation .wp-block-navigation__container{
    display:none !important;
  }

  /* でも、オーバーレイが開いたら UL を表示に戻す */
  .salon-header-navi .wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation__container{
    display:flex !important;
    flex-direction:column;
    gap:1rem;
  }

  /* 見切れ・重なり対策（念のため） */
  .salon-header-box{ overflow:visible !important; }
  .salon-header, .salon-header-box, .salon-header-navi, .wp-block-navigation{
    position:relative; z-index:1000;
  }

  /* 好みで：オーバーレイの背景＆リンク色 */
  .wp-block-navigation__responsive-container.is-menu-open{
    background:#faf7ed;

  }
  .wp-block-navigation__responsive-container.is-menu-open a{
    color:#222;
	  font-size:120%!important;  }
}


/*-テストここまで-*/
.wp-block-navigation__responsive-container-open:focus,
.wp-block-navigation__responsive-container-open:focus-visible,
.wp-block-navigation__responsive-container-open:active,
.wp-block-navigation__responsive-container-close:focus,
.wp-block-navigation__responsive-container-close:focus-visible,
.wp-block-navigation__responsive-container-close:active{
  outline:none !important;
  box-shadow:none !important;
}


/* ◆で始まる上位リスト */
.salon-list,
.salon-list ul{ list-style:none; margin:0; padding:0; }

.salon-list > li{
  position:relative;
  padding-left:1.8em;          /* ← 文字全体を右にずらす（間隔調整） */
  margin:0.8em 0;
}
.salon-list > li::before{
  content:"◆";
  position:absolute;
  left:0;
  top:0.45em;
  color:#000;               /* アクセントカラー */
  font-size:1em;
  line-height:1;
  font-weight:700;
  margin-right:0.4em;          /* ← 記号と文字の間をさらに開ける */
  width:1.2em;                 /* ← 固定幅を持たせて揃える */
  display:inline-block;        /* 幅を効かせる */
}

/* 下位リスト */
.salon-list > li > .salon-sub{ padding-left:1.4em; margin-top:0.35em; }
.salon-list > li > .salon-sub > li{ margin:0.25em 0; }



/* === MetaSlider を比率固定＋中央トリミングにする（Carousel/普通どちらでもOK） === */

/* デフォルト：PC用を表示、スマホ用を隠す */
.slider-desktop{ display:block; }
.slider-mobile{ display:none; }

/* 700px以下でスマホ用に切り替え */
@media (max-width:700px){
  .slider-desktop{ display:none !important; }
  .slider-mobile{ display:block !important; }
}

/* レイアウト安定：スライダーの比率（任意） */
.slider-desktop .metaslider .flexslider .flex-viewport{ aspect-ratio: 4 / 1; }
.slider-mobile  .metaslider .flexslider .flex-viewport{ aspect-ratio: 3 / 2; }

/* 画像は中央トリミングで統一 */
.slider-desktop .metaslider .slides img,
.slider-mobile  .metaslider .slides img{
  width:100%;
  height:100% !important;
  object-fit:cover;
  object-position:center;
  display:block;
}

/* スライダーの表示枠（ビューポート）に比率を持たせる */
.metaslider .flexslider .flex-viewport{
  aspect-ratio: 4 / 1;      /* ← 16/9 や 1/1 に変更可 */
  overflow: hidden;         /* はみ出しをカット */
}

/* スライドと画像を“枠いっぱい”にフィットさせる */
.metaslider .flexslider .slides,
.metaslider .flexslider .slides li{
  height:100% !important;   /* li の高さを枠に合わせる */
}
.metaslider .flexslider .slides img{
  width:100%;
  height:100% !important;   /* 高さを枠に合わせる */
  object-fit: cover;         /* 余白なし／中央トリミング */
  object-position: center;
  display:block;
}

/* ドットの位置がズレるとき（任意） */
.metaslider .flexslider .flex-control-nav{ bottom:-14px; }

/* レスポンシブで比率だけ微調整したい場合（例） */
@media (max-width: 782px){
  .metaslider .flexslider { aspect-ratio: 3 / 1; } /* スマホは少し縦長に */
}


/* ==== MetaSlider ドット（ページネーション）最優先で小さく・影なし ==== */

/* 位置（必要なら調整） */
.metaslider .flexslider .flex-control-nav{
  bottom: -34px !important;
}

/* ドットの間隔 */
.metaslider .flex-control-nav.flex-control-paging li{
  margin: 0 4px !important;
}

/* 非アクティブのドット */
.metaslider .flex-control-nav.flex-control-paging li a,
.metaslider .flexslider .flex-control-nav.flex-control-paging li a{
  width: 8px !important;
  height: 8px !important;
  border-radius: 50% !important;
  background: #bbb !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: none !important;
  opacity: .6 !important;
  text-indent: -9999px;       /* テキストが入っていても見えなくする */
  overflow: hidden;
  display: inline-block;
}

/* アクティブのドット */
.metaslider .flex-control-nav.flex-control-paging li a.flex-active,
.metaslider .flexslider .flex-control-nav.flex-control-paging li a.flex-active{
  background: #666 !important;
  opacity: 1 !important;
  box-shadow: none !important;
  background-image: none !important;
}

/* 1) ロゴは“見た目だけ”下げる（余白を増やさない） */
.wp-block-site-logo {
  margin: 0 !important;            /* 余白で下げない */
  transform: translateY(6px);       /* ←下げ量はお好みで */
}

/* 2) メニュー（ナビ）の上側余白を消す */
.wp-block-navigation {
  margin-top: 0 !important;
}

/* 3) ヘッダー（テンプレートパート）直下の余白をゼロに */
.wp-block-template-part {
  margin-block-end: 0 !important;
}

/* 4) ヘッダーの次のブロック（多くはCover/Image）の上余白もゼロに */
.wp-site-blocks > .wp-block-template-part + * {
  margin-block-start: 0 !important;
}

/* 念のため：ページ先頭の最初のブロックも上余白ゼロ */
.wp-site-blocks > *:first-child {
  margin-block-start: 0 !important;
}

/* --- ヘッダー直下のスキマを確実に 0 にする（TT4対策版） --- */

/* TT4の :where() に勝つ */
.wp-site-blocks > :where(.wp-block-template-part) {
  margin-block-end: 0 !important;
}

/* ヘッダー直後の最初のブロックの上マージンも 0 に */
.wp-site-blocks > :where(.wp-block-template-part) + :where(*) {
  margin-block-start: 0 !important;
}

/* 代表的な先頭ブロック（Group/Cover/Shortcode 等）を個別に潰す保険 */
header.wp-block-template-part + .wp-block-group,
header.wp-block-template-part + .wp-block-cover,
header.wp-block-template-part + .wp-block-shortcode,
header.wp-block-template-part + .wp-block-columns,
header.wp-block-template-part + .wp-block-column {
  margin-top: 0 !important;
}

/* MetaSlider 側で余白が乗っている場合の保険 */
.metaslider,
.ml-slider,
.flexslider {
  margin-top: 0 !important;
}

/* すでに入れているヘッダー帯調整は維持（padding ではなく margin を 0 に） */
header.wp-block-template-part{
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
  background:#faf7ed;
}

/* ロゴは transform で下げる（余白は増やさない） */
.wp-block-site-logo,
.salon-header-logo {
  margin: 0 !important;
  transform: translateY(6px); /* 下げ量はお好みで */
}
/* ロゴを前に出す */
.salon-header-logo,
.wp-block-site-logo {
  position: relative;
  z-index: 100;   /* 数字大きめにして最前面 */
}

/* ヘッダー直下の画像ブロックや MetaSlider を上に引き上げる */
header.wp-block-template-part + .wp-block-cover,
header.wp-block-template-part + .wp-block-group,
header.wp-block-template-part + .metaslider {
  margin-top: -40px; /* ←ロゴの高さに合わせて調整 */
  position: relative;
  z-index: 1;        /* ロゴより後ろにする */
}
/* —— タイムライン（TT4ブロック対応／年月日なし） —— */
.tl{
  --line:#000;            /* ライン＆丸の色：サイトの差し色に合わせて */
  --x:26px;                  /* 縦ラインのX位置（左からの距離） */
  --dot:18px!important;                /* 丸の直径 */
  position: relative;
  padding-left: calc(var(--x) + 14px); /* 左余白（ライン＋テキスト間） */
}

/* 縦ライン本体（親グループの中の全体に通す） */
.tl::before{
  content:"";
  position: absolute;
  left: var(--x);
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--line);
}

/* ブロック間の余白を整える（TT4のblock-gapより強く） */
.tl > :where(*){
  margin-block: 0.9rem !important;
}

/* リストのデフォルトの点を消す */
.tl :where(ul,ol){
  list-style: none;
  margin: 0.2rem 0 0.9rem !important;
  padding-left: 0 !important;
}

/* —— 丸（ノード）を付ける対象 —— */
/* 1) 直下の段落・見出し */
.tl > :where(p,h2,h3,h4){
  position: relative;
  padding-left: 0; /* 左はライン基準で揃える */
}
.tl > :where(p,h2,h3,h4):not(.tl-head)::before{
  content:"";
  position:absolute;
  left: calc(var(--x) - var(--dot)/2);
  top: .45em; /* 行の中段に合わせる。必要なら微調整 */
  width: var(--dot);
  height: var(--dot);
  background: #fff;
  border: 3px solid var(--line);
  border-radius: 50%;
}

/* 2) リスト内の各 li */
.tl :where(ul,ol) > li{
  position: relative;
  padding-left: 0;
  margin: 0.6rem 0;
}
.tl :where(ul,ol) > li::before{
  content:"";
  position:absolute;
  left: calc(var(--x) - (var(--dot) - 2px)/2);
  top: .55em;
  width: calc(var(--dot) - 2px);
  height: calc(var(--dot) - 2px);
  background:#fff;
  border: 3px solid var(--line);
  border-radius: 50%;
}

/* 見出しを“丸なし”にしたい時は tl-head を付ける */
.tl .tl-head::before{ display:none !important; }

/* モバイル微調整 */
@media (max-width:700px){
  .tl{ --x:22px; }
}
.tl{
  --x: -20px !important;     /* 丸の横位置（必要なら調整） */
  --dot: 11px !important;   /* ★ 丸の直径を強制的に20pxに */
}

/* —— タイムライン（黒ライン＋黒ドット） —— */
.wp-block-list.tl{
  --line: #000;      /* ライン＆ドットの色を黒に */
  --x: 20px;         /* 縦ラインのX位置（左寄せなら小さめ数値に） */
  --dot: 10px;       /* ドット直径（ここを大きく/小さくして調整） */

  position: relative;
  list-style: none !important;
  margin: 0 !important;
  padding-left: calc(var(--x) + 20px) !important; /* テキストの左余白 */
}

/* 縦ライン（UL全体） */
.wp-block-list.tl::before{
  content: "";
  position: absolute;
  left: var(--x);
  top: 0;
  bottom: 0;
  width: 1px;                 /* ★ 1px の黒ライン */
  background: var(--line);
}

/* 各 LI */
.wp-block-list.tl > li{
  position: relative;
  margin: .7rem 0 !important;
  padding-left: 0 !important;
  list-style: none !important;
  line-height: 1.7;
}

/* ドット（塗りつぶし） */
.wp-block-list.tl > li::before{
  content: "";
  position: absolute;
  left: calc(var(--x) - var(--dot)/2);
  top: .55em;                 /* 文字の高さに応じて微調整 */
  width: var(--dot);
  height: var(--dot);
  background: var(--line);    /* ★ 黒で塗りつぶし */
  border-radius: 50%;
}


.reserve-btn {
  display: block;
  width: fit-content; /* ボタンの中身に合わせる */
  margin: 2em auto;     /* 左右オートで中央寄せ */
  background: #66635e;
  color: #fff;
  padding: 12px 24px;
  border-radius: 6px;
  text-decoration: none;
  font-weight: bold;
}
.reserve-btn:hover {
  background: #7a7772;   /* 少し明るく */
}

.reserve-btn:active {
  background: #4d4a46;   /* 少し暗く */
  transform: scale(0.97); /* 押した感 */
}

.reserve-btn:focus {
  outline: 2px solid #99958f;  /* 薄い枠でフォーカス見やすく */
  outline-offset: 2px;
}

.btn {
  display:inline-block;
  background:#66635e;
  color:#fff;
  padding:12px 20px;
  border-radius:6px;
  text-decoration:none;
  font-weight:700;
  margin:4px;
  transition: background .3s ease, transform .2s ease;
}

.btn:hover {
  background:#7a7772;
  transform: translateY(-2px);
}

.btn:active {
  background:#4d4a46;
  transform: scale(.97);
}

@keyframes fadeInUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }