/**
Theme Name: Tauta-astra-child
Author: Brainstorm Force
Author URI: http://wpastra.com/about/
Description: Astra is the fastest, fully customizable & beautiful theme suitable for blogs, personal portfolios and business websites. It is very lightweight (less than 50KB on frontend) and offers unparalleled speed. Built with SEO in mind, Astra comes with schema.org code integrated so search engines will love your site. Astra offers plenty of sidebar options and widget areas giving you a full control for customizations. Furthermore, we have included special features and templates so feel free to choose any of your favorite page builder plugin to create pages flexibly. Some of the other features: # WooCommerce Ready # Responsive # Compatible with major plugins # Translation Ready # Extendible with premium addons # Regularly updated # Designed, Developed, Maintained & Supported by Brainstorm Force. Looking for a perfect base theme? Look no further. Astra is fast, fully customizable and beautiful theme!
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: tauta-astra-child
Template: astra
*/

/*===== mvキャッチ縦書き =====*/
.vertical-heading {
  writing-mode: vertical-rl;   /* 縦書き（右から左へ流れる） */
  text-orientation: upright;   /* 文字を正立表示 */
  position: absolute;          /* 背景上に配置 */
  top: 30%;                    /* 縦位置の調整 */
  right: 60px;                 /* 右側に寄せる */
  transform: translateY(-50%); /* 中央寄せ */
  font-size: 40px;             /* 好きな大きさに調整 */
  color: #FFFCF8;                 /* 背景に映える色に */
}

/*===== スマホだけ改行 =====*/
/* デフォルトでは非表示（PC・タブレット） */
.sp-only {
  display: none;
}

/* スマホだけ表示 */
@media (max-width: 768px) {
  .sp-only {
    display: inline;
  }
}

/*===== ボタンv1 =====*/

/* 並び&中央寄せ */
.btn1-wrap{
  display:flex;
  justify-content:center;
  align-items:center;
  gap: 20px;                /* ボタン間の余白 */
}

/* ボタン本体（通常：半透明の白/枠、白文字） */
.btn1{
  display:inline-flex;
  align-items:center;
  gap: 10px;                /* ← アイコンと文字の間 */
  padding: 14px 26px;
  border-radius: 999px;
  border: none;
  color: #FFFCF8;
  background: #6CBF47;
  text-decoration: none;
  font-weight: 700;
  font-size:20px;
  transition: background .25s, color .25s, border-color .25s, box-shadow .25s, transform .15s;
}

/* ホバー */
.btn1:hover{
  background: #58963E;
  color: #FFFCF8;   
  border-color: none;
  box-shadow: 0 6px 16px rgba(0,0,0,.12);
  transform: translateY(-1px);
}

/* アイコンは文字色に追従 */
.btn1 i{ font-size: 1.1em; line-height: 1; }

/* レスポンシブ（狭い幅では縦積み＆幅を少しワイドに） */
@media (max-width: 600px){
  .btn1-wrap{ flex-wrap: wrap; gap: 12px; }
  .btn1{ width: min(88vw, 360px); justify-content: center; }
}

/*===== ボタンv2 =====*/

/* 並び&中央寄せ */
.btn2-wrap{
  display:flex;
  justify-content:center;
  align-items:center;
  gap: 20px;                /* ボタン間の余白 */
}

/* ボタン本体（通常：半透明の白/枠、白文字） */
.btn2{
  display:inline-flex;
  align-items:center;
  gap: 10px;                /* ← アイコンと文字の間 */
  padding: 14px 26px;
  border-radius: 999px;
  border: 2px solid rgba(255,255,255,.9);
  color: #fff;
  background: rgba(255,255,255,.16);   /* 半透明の白 */
  backdrop-filter: blur(6px);          /* ガラス感（対応ブラウザ） */
  text-decoration: none;
  font-weight: 700;
  font-size:20px;
  transition: background .25s, color .25s, border-color .25s, box-shadow .25s, transform .15s;
}

/* ホバー：白背景＋緑文字 */
.btn2:hover{
  background: #fff;
  color: #6CBF47;                       /* ブランド緑 */
  border-color: #fff;
  box-shadow: 0 6px 16px rgba(0,0,0,.12);
  transform: translateY(-1px);
}

/* アイコンは文字色に追従 */
.btn2 i{ font-size: 1.1em; line-height: 1; }

/* レスポンシブ（狭い幅では縦積み＆幅を少しワイドに） */
@media (max-width: 600px){
  .btn2-wrap{ flex-wrap: wrap; gap: 12px; }
  .btn2{ width: min(88vw, 360px); justify-content: center; }
}


/*===== もっと詳しくボタンのあしらい =====*/
/* ボタン本体 */
.more-btn{
  display:inline-block; /* ← inline-flexやめて幅をテキストだけに */
  align-items:center;
  gap:0.8em; /* テキストと線の間隔 */
  color:#6F6A64;
  font-size:18px;
  text-decoration:none;
  position:relative;
}

/* 下線打ち消し */
.entry-content a.more-btn,
.entry-content a.more-btn:hover{ 
	text-decoration:none !important; 
	background-image:none !important; 
	border-bottom:0 !important; 
}
.more-btn:visited,
.more-btn:hover,
.more-btn:focus{
  text-decoration:none !important;
  background-image:none !important;
  border-bottom:0 !important;
}

/* 横線（絶対配置でテキストの右からスタート） */
.more-btn .line{
  --line-gap: 0.8em;             /* テキストと線の間隔 */
  --line-w-start: 40px;          /* 初期の長さ */
  --line-w-end:  80px;           /* 伸びた時の長さ */

  position: absolute;
  left: 100%;                    /* テキストの右端から */
  top: 50%;
  margin-left: var(--line-gap);  /* テキストとの間隔 */
  width: var(--line-w-start);
  height: 1px;
  background: currentColor;
  transform: translateY(-50%);
  transition: width .4s ease;    /* 右方向にだけ伸びる */
  pointer-events: none;          /* クリックはaに任せる */
}

/* 斜め線：1pxバーを回転させて継ぎ目ゼロに */
.more-btn .line::after{
  content:"";
  position:absolute;
  right: 0;                      /* 横線の右端にピッタリ結合 */
  top: 0;                        /* 継ぎ目が出たら top: -0.5px 等で微調整 */
  width: 12px;
  height: 1px;
  background: currentColor;
  transform-origin: right center;
  transform: rotate(45deg);      /* 右上に向かって伸びる斜め線（上だけ） */
}

/* hoverで横線だけ右へ長くなる（テキスト位置は不動） */
.more-btn:hover .line{ width: var(--line-w-end); }

/* == アクセシビリティ強化 == */

/* ヒットエリアを広げる */
.more-btn::before{
  content:"";
  position:absolute;
  inset:-8px;  /* 四方に+8px拡大 */
}

/* フォーカス時に枠を出す */
.more-btn:focus-visible{
  outline:2px solid currentColor;
  outline-offset:4px;
}

/* == 配置調整（必要なら） == */
.menu-section .more-btn{
  margin:24px auto 0;
  display:inline-block;
}

/* == モーション配慮（任意） == */
@media (prefers-reduced-motion: reduce){
  .more-btn .line{ transition:none; }
}

/*=====  information店舗概要のあしらい =====*/
/* Astra等の既定をまとめて打ち消し */
.entry-content .info-table{
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
  border: 0 !important;
  box-shadow: none !important;
  table-layout: fixed;          /* 列幅を安定させる */
  background: transparent;
}

.info-table th,
.info-table td {
  border: none;          /* 枠線は完全に消す */
  background: transparent;
  padding: 12px 16px;    /* 基本の余白 */
}

.info-table th {
  width: 25%;            /* 左列の幅 */
  text-align: left;
  vertical-align: top;
  white-space: nowrap;   /* 折り返しさせない */
}

.info-table td {
  width: 75%;
  word-break: break-word; /* 長文は折り返し */
  color: #6F6A64;
  line-height: 1.6;
}

/* 📱 スマホ用（幅が狭いときは余白を広めに＆縦積みっぽく） */
@media (max-width: 600px) {
  .info-table th,
  .info-table td {
    display: block;       /* ブロック化して縦に積む */
    width: 100%;          /* 横幅いっぱい */
    padding: 8px 4px 4px; /* 上下に余裕をつける */
  }

  .info-table th {
    font-weight: 700;
    margin-top: 12px;     /* 各項目の上に余白 */
  }

  .info-table tr:first-child th {
    margin-top: 0;        /* 最初の行だけ余白なし */
  }
}

/*=====  ナビゲーション =====*/

/* === ナビ土台 === */
/* 本体は透明のまま */
.custom-nav{
  position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
  display:flex; align-items:center; justify-content:space-between;
  padding: 12px clamp(32px, 6vw, 96px);
  background: transparent;
}

/* 背景は nav の高さにぴったり＆横は画面端まで */
/* 画面端から端まで背景を敷きつつ、左右の余白は中身だけに付ける */
.custom-nav{
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%); /* ← 親の制約を無視して中央に100vwで配置 */
  width: 100vw;                 /* ← これで“必ず”全幅になる */
  box-sizing: border-box;       /* paddingぶんも含めて計算 */
  z-index: 1000;

  display: flex;
  align-items: center;
  justify-content: space-between;

  padding: 12px clamp(32px, 6vw, 96px); /* 上下12px＋左右は可変 */
  background: transparent;            /* 背景は疑似要素に任せる */
}

/* 背景は nav の内側いっぱいに（= 画面幅いっぱい） */
.custom-nav::before{
  content: "";
  position: absolute;
  inset: 0;                   /* 上下左右ぴったり */
  background: #F5F1EC;
  z-index: -1;
}

/* 念のため、横スクロールが出ないよう抑止 */
html, body { overflow-x: hidden; }


.nav-logo{
  font-size:clamp(20px,2.2vw,28px);
  font-weight:600; 
  color:#6CBF47;
  text-decoration:none !important; 
}
.nav-actions{ display:flex; align-items:center; gap:12px; }

/* === ボタン === */
.nav-btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:10px 24px; border-radius:999px; font-weight:600;
  text-decoration:none ; transition:.2s ease; border:none;
}
.nav-btn:hover{ transform:translateY(-1px); }
.nav-btn.line{ background:#6CBF47; color:#FFFCF8; }     /* LINEで予約 */
.nav-btn.form{ background:#6CBF47; color:#FFFCF8; } /* フォームで予約 */

.nav-icon.insta {
  font-size: 32px;       /* アイコンの大きさ */
  color: #6CBF47;        /* Instagramカラー */
  margin-left: 16px;     /* 他のボタンとの間隔 */
  text-decoration: none; /* 下線なし */
  transition: 0.3s;
}

.nav-icon.insta:hover {
  color: #58963E; /* ホバー時にちょっと暗め */
}

.nav-actions {
  display: flex;
  align-items: center; /* 縦位置を揃える */
  gap: 16px;           /* アイコンとボタンの間隔 */
}

/* === ハンバーガー === */
.nav-burger{
  width:40px; height:40px;
  display:inline-grid; place-items:center;
  position:relative;
  background: transparent;
  border: none;
  border-radius: 8px;
  box-shadow: none !important;          /* ← 影を完全オフ */
  filter: none;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
  -webkit-tap-highlight-color: transparent;
  cursor: pointer;
}

/* 3本線の基本形 */
.nav-burger .bar{
  position:absolute;
  left:50%;
  width:24px; height:2px;
  background:#6CBF47;
  border-radius: 1px;
  transform: translateX(-50%);
  transition: transform .25s ease, top .25s ease, opacity .2s ease;
}

/* 上中下の位置 */
.nav-burger .bar:nth-child(1){ top: 11px; }
.nav-burger .bar:nth-child(2){ top: 19px; }
.nav-burger .bar:nth-child(3){ top: 27px; }

.nav-burger:hover,
.nav-burger:focus{
  background: transparent !important;  /* 背景透明 */
  box-shadow: none !important;         /* 影も念のため消す */
}

/* スマホでは .nav-btn を非表示 */
@media (max-width: 767px){   /* 767px以下をスマホ扱い */
  .nav-btn { display: none; }
}

/* PC・タブレットでは表示（念のため明示） */
@media (min-width: 768px){
  .nav-btn { display: inline-flex; }
}

/* === 右スライドメニュー === */

/* 全画面オーバーレイにする */
html, body{ overflow-x: hidden; }

.slide-menu{
  position: fixed;
  inset: 0;                 /* 画面全面 */
  width: 100vw;
  height: 100dvh;
  background:#6CBF47;
  z-index:1100;
  transform: translateX(calc(100% + 2px));  /* ← 2px余分に逃がしてチラ見え防止 */
  transition: transform .35s ease;
  will-change: transform;
  display:flex;
  flex-direction:column;
  padding: 24px clamp(16px,3vw,32px);
  justify-content:center;
}
.slide-menu.open{ transform: translateX(0); }

/* 中央寄せ */
.slide-menu .menu-list{
  list-style:none; margin:24px 0 0; padding:0;
  display:grid; gap:12px;
  justify-items:center;
  text-align:center;
}
.slide-menu .menu-list a{
  display:block; padding:12px 6px;
  text-decoration:none; color:#F5F1EC; font-size:40px; font-weight:400; border-radius:8px;
  width:max-content;
}

.slide-menu .menu-list a:hover{
  background: none;          /* ← 今はグレー背景になってるので消す */
  font-weight: 700;          /* ← 太字 */
  text-decoration: underline; /* ← 下線 */
  text-underline-offset: 12px; /* ← 下線を文字から少し離すと綺麗 */
}


/* 背景マスク＆スクロールロック */
.menu-backdrop{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.28);
  z-index: 1050;
  opacity: 0;
  transition: opacity .25s ease;
}
.menu-backdrop.show{ opacity: 1; }
body.menu-open{ overflow:hidden; }

/* 閉じるボタン：右上に固定 */
.menu-close{
  position: absolute;
  top: max(16px, env(safe-area-inset-top));   /* iPhoneノッチ配慮 */
  right: max(16px, env(safe-area-inset-right));
  width: 40px; height: 40px;
  display: grid; place-items: center;
  background: transparent;
  border: none;
  font-size: 40px; line-height: 1;
  color: #F5F1EC;
  cursor: pointer;
}

/* 念のためのリセット（テーマによる装飾を無効化） */
.menu-close:focus,
.menu-close:hover{
  background: transparent !important;
  box-shadow: none !important;
  outline: none;
}

/*===== Menuページのメニューリスト =====*/
.menu-section{
  margin: 40px auto;
  width: 60%;          /* ← 画面の60%に固定 */
  max-width: 1000px;   /* ← 広すぎ防止。必要なら設定 */
  min-width: 320px;    /* ← 狭すぎ防止。必要なら設定 */
  padding: 0 16px;
}

.menu-heading{
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 20px;
  /*border-bottom: 2px solid #ddd;*/
  padding-bottom: 8px;
}

.menu-section .menu-list{
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 20px;
}

.menu-section .menu-item{
  border-bottom: 1px solid #D6CFC4;
  padding-bottom: 16px;
}

.menu-row{
  display: flex;
  justify-content: space-between; /* ← 両端に配置 */
  align-items: center;            /* 縦位置そろえる */
}

.menu-title{
  font-weight: 600;
  font-size: 16px;
}

.menu-price{
  font-weight: 600;
  font-size: 15px;
  white-space: nowrap;   /* ← 改行させない */
}

.menu-desc{
  margin-top: 6px;
  font-size: 14px;
  color: #6F6A64;
}

/* スマホ画面（例: 600px以下）では縦並び */
@media (max-width: 600px){
  .menu-row{
    flex-direction: column;   /* ← 横並び → 縦並び */
    align-items: flex-start;  /* ← 左寄せ */
  }

  .menu-price{
    margin-top: 4px;          /* タイトルとの間に少し余白 */
  }
}

/* ========== TOPページ メニューカード 共通 ========== */
.menu-section .menu-card{
  margin: 0px auto;
  padding: 0px 0;            /* 背景色を付けない想定。付けるなら左右にもpadding */
}

/* 1) 共通：まずは表示を確実に（競合対策） */
.menu-section .menu-card .menu-badge{
  display: inline-flex; align-items: center;
  padding: 4px 10px;
  margin-bottom: 12px;
  line-height: 1;
  color: #6CBF47 !important;
  background: transparent !important;
  border: 2px solid #6CBF47 !important;
  border-radius: 6px;
  box-shadow: none !important;
  text-decoration: none !important;
}

/* 2) a / button になっている場合（ボタンブロック対策） */
.menu-section .menu-card a.menu-badge,
.menu-section .menu-card button.menu-badge{
  border: 2px solid #6CBF47 !important;
  background: transparent !important;
  box-shadow: none !important;
  -webkit-appearance: none;
  appearance: none;
  cursor: default;               /* バッジとして使うなら */
  pointer-events: none;          /* クリック不可にしたいなら */
}

/* 3) 見出し内に入れている場合（hタグの影響を切る） */
.menu-section .menu-card h1 .menu-badge,
.menu-section .menu-card h2 .menu-badge,
.menu-section .menu-card h3 .menu-badge{
  font: inherit;                 /* hの太さやサイズに引っ張られないように */
}

.menu-section .menu-card .menu-title{
  margin: 0;
  font-size: clamp(18px, 2.2vw, 22px);
  font-weight: 700;
  color: #6F6A64;
  letter-spacing: .02em;
}
.menu-section .menu-title .menu-note{
  margin-left: .4em;
  font-size: .8em;
  font-weight: 400;
  color: #6F6A64;
}

.menu-section .menu-card .menu-price{
  margin: 16px 0 8px;
  font-size: clamp(18px, 2vw, 20px);
  font-weight: 700;
  color: #6F6A64;
  display: inline-block;           /* 下線を文字幅だけに */
  padding-bottom: 4px;
  border-bottom: 3px double #6F6A64; /* 二重線 */
  text-underline-offset: 4px;      /* 将来単線に変えたい時の余白 */
}

.menu-section .menu-card .menu-desc{
  margin: 16px 0 0;
  font-size: clamp(14px, 1.6vw, 16px);
  line-height: 2;
  color: #6F6A64;
}

/* ========== 配列（一覧）用のラッパー任意 ========== */
/* 2列グリッドにしたい時は親に .menu-grid を付ける */
.menu-section .menu-card .menu-grid{
  width: 60%;                 /* ここで一覧全体の幅を調整（60%指定の要望に合わせた） */
  max-width: 1000px;          /* 伸びすぎ防止 */
  min-width: 320px;
  margin: 0px auto;
  display: grid;
  grid-template-columns: 1fr; /* SP:1列 */
  gap: 28px;
}
@media (min-width: 960px){
  .menu-section .menu-card .menu-grid{ grid-template-columns: 1fr 1fr; } /* PC:2列に */
}

/* バッジが無いカードの余白を微調整（任意） */
.menu-section .menu-card:not(:has(.menu-badge)) .menu-title{ margin-top: 4px; }

/* PC/タブレットでは非表示 */
@media (min-width: 768px){
  .mobile-cta{ display: none; }
}

/*===== スマホだけ下固定バーを表示 =====*/
@media (max-width: 767px){
  .mobile-cta{
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 1030; /* コンテンツより上、スライドメニュー(1100)より下 */
    display: flex; gap: 12px;
    padding: 10px 16px;
    padding-bottom: calc(10px + env(safe-area-inset-bottom)); /* iPhone安全域 */
    background: rgba(245,241,236,.96); /* #F5F1EC系の半透明 */
    backdrop-filter: blur(6px);
    border-top: 1px solid rgba(0,0,0,.08);
    transform: translateY(0);
    transition: transform .25s ease;
  }

  .mobile-cta .cta-btn{
    flex: 1;
    height: 44px;
    border-radius: 999px;
    display: inline-flex; align-items: center; justify-content: center;
    font-weight: 700; text-decoration: none;
  }
  .mobile-cta .cta-btn.line{ background:#6CBF47; color:#F5F1EC; }
  .mobile-cta .cta-btn.form{ background:#6CBF47; color:#F5F1EC; }

  /* バーに隠れないよう本文を押し上げる */
  body{ padding-bottom: calc(64px + env(safe-area-inset-bottom)); }
  /* スライドメニューを開いたらバーは引っ込める（重なり防止） */
  body.menu-open .mobile-cta{ transform: translateY(100%); }
}

/*========== 送信ボタン ==========*/
/* 汎用：Contact Form 7 送信ボタンのベース */
.wpcf7 input[type="submit"] {
  display: block;
  margin: 30px auto;
  padding: 20px 0;
  width: 90% !important;          /* スマホ基準：ほぼ全幅 */
  max-width: 500px;               /* 大きすぎないように制限 */
  font-size: 20px;
  border: none;
  border-radius: 30px;
  cursor: pointer;
  transition: background-color 0.3s ease;
  text-align: center;
  box-sizing: border-box;
}

/* タブレット以上（768px〜）では幅を狭める */
@media (min-width: 768px) {
  .wpcf7 input[type="submit"] {
    width: 40% !important;
    max-width: none;
  }
}

/* メールアドレス注意事項メモ */
.email-note {
  font-size: 12px;
  color: #6F6A64;
  margin-bottom: 10px;
}

.form-message {
 font-size: 12px;
 font-weight: 400;
 margin-top: 40px;
 color: #6F6A64;
}

/* 仕切り線 */
.form-separator {
  border: none;
  border-top: 1px solid #D6CFC4; /* 線の色と太さ */
  margin: 40px 0; /* 上下の余白 */
}

/* 予約日時間横並び */
.date-row {
 display: flex;
 gap: 16px;
}
.reservation-date {
 width:160px;
}
.time-range {
  display: flex;
  align-items: center;
  gap: 8px; /* セレクトボックスと〜の間隔 */
}
.time-select {
  width: 100px; /* お好みで調整可能 */
}
@media (max-width: 1024px) {
  .date-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }
}