@charset "UTF-8";
/*
 * ======================================
 * テクニカル・アート サイト固有CSS
 * ======================================
 *
 * ■ 前提
 *   ./css/main.css は ./scss/site-main.scss をコンパイルしたもの。
 *   main.css を作り直すときは必ず下記コマンドを使うこと。
 *     npx sass scss/site-main.scss css/main.css --style=compressed --no-source-map
 *   （scss/main.scss を直接コンパイルすると検証用のデフォルト配色に戻る）
 *
 * ■ このファイルの役割
 *   claude-design-output の実数値のうち、共通CSSのクラス・utilityの
 *   刻みでは再現できないものだけをサイト固有クラスとして定義する。
 *
 * ======================================
 * 元データ（claude-design-output）から解決した実数値
 * ======================================
 *   コンテナ最大幅  : 1400px（FAQ／狭幅ブロックのみ 1060px、Message本文 62em）
 *   左右padding     : clamp(20px,5vw,40px)  … 20〜40px（ヘッダーのみ clamp(16px,4vw,32px)）
 *   セクション上下  : clamp(60px,9vw,120px) / clamp(60px,9vw,110px)
 *                     clamp(56px,8vw,96px) / clamp(48px,7vw,80px) / clamp(40px,6vw,64px)
 *                     ページヒーロー clamp(140px,14vw,180px) 上 ／ clamp(48px,7vw,84px) 下
 *                     パンくず 18px 上下
 *   基準gap         : clamp(28px,4vw,56px) / clamp(24px,4vw,48px) / clamp(32px,5vw,64px)
 *                     clamp(20px,3vw,32px) / clamp(16px,2.4vw,24px) / clamp(12px,1.6vw,22px)
 *                     ヘアライン区切り 1px
 *   カラム比率      : TOP About = minmax(260px,38%) / 1fr
 *                     その他は repeat(auto-fit, minmax(240〜340px, 1fr))
 *                     ショップ概要dl = minmax(140px,220px) / 1fr
 *                     作業風景 = repeat(3,1fr) ／ サムネ列 repeat(6,1fr)
 *   配色            : #1c4614 #009735 #990000 #e1e6cf #ebeee4 #243024 #111a11 #101510
 *                     #f4f6ee #e8ede2 #33402f #3b4a36 #5b6b52 #1f2419 #8fd6a2
 *
 * ======================================
 * 追加クラス一覧（共通SCSS取り込み検討用）
 * ======================================
 *
 *  [レイアウト]
 *  .ta-container / --narrow   - 最大幅1400px(1060px) + 左右 clamp padding
 *  .ta-pt-* / .ta-pb-*        - 元データの clamp() セクション余白
 *  .ta-py-18                  - パンくず用 18px 上下
 *
 *  [見出し・テキスト]
 *  .ta-label / --light --white - 13px/400/.22em の小ラベル見出し
 *  .ta-en / --md --pale --white - Cormorant の大英字見出し（clamp）
 *  .ta-text / --light          - 本文 16px/2.3/.05em
 *  .ta-note / --light          - 注記 13px/2
 *  .ta-lead                    - リード文 clamp(16px,2vw,20px)/2.2
 *
 *  [パーツ]
 *  .ta-arrow-link / __circle   - 下線＋丸矢印のテキストリンク
 *  .ta-photo                   - 淡緑地の写真枠（obj-cover + hoverズーム）
 *  .ta-hairline-grid           - 1px罫線グリッド（ダーク／ライト）
 *  .ta-figure-*                - 比率指定の画像ブロック
 *
 *  [共通パーツ差分]
 *  .ta-header 系 / .ta-sp-nav 系 / .ta-cta 系 / .ta-footer 系
 *
 *  [ページ固有]
 *  .ta-mv 系 / .ta-about 系 / .ta-collage 系 / .ta-menu 系 / .ta-message 系
 *  .ta-hero 系 / .ta-crumb / .ta-dl 系 / .ta-faq 系 / .ta-stock 系
 *  .ta-form-cms      - CMSお問い合わせフォーム出力を元データの見た目に合わせる上書き層
 *
 * ======================================
 * 共通SCSSに不足していたもの（5分類）
 * ======================================
 *
 *  1. 値の粒度不足
 *     - コンテナ1400px＋流体左右padding（container=1200px固定／wide=1500px）
 *     - clamp() ベースの流体セクション余白（section は 120px/60px の2段階のみ）
 *     - font-size 11/15/17/19/21/26/30/34/38/46/50/104px、および clamp() 指定
 *     - line-height 1.9 / 2.1 / 2.2 / 2.3（lh-* は 1〜2 の7段階のみ）
 *     - letter-spacing .01/.04/.06/.08/.12/.14/.22/.24/.28/.34em
 *     - gap の clamp() 指定と 1px ヘアラインgap
 *  2. 指定方向不足
 *     - grid-template-columns: repeat(auto-fit, minmax(Npx,1fr)) 系（grid-N は固定列のみ）
 *     - 12カラムgrid上での span 指定（TOP About のコラージュ）
 *  3. 状態不足
 *     - 透過ヘッダー → スクロールで「深緑背景」に変わる状態（is-fixed は白背景固定）
 *  4. 構造不足
 *     - 小ラベル(JA) → 大英字(EN) の順で積む見出し（heading は EN → JA 前提）
 *     - details/summary ベースのFAQ（accordion は JS + is-open 前提）
 *     - セクション枠外にはみ出す装飾写真（Message セクション）
 *  5. 装飾パターン不足
 *     - 1px 罫線で区切るグリッド（gap:1px + 背景色）
 *     - 下線＋丸矢印のテキストリンク（btn-circle-arrow は枠付きボタン前提）
 */

/* ==========================================================================
   0. ベース差分
   ========================================================================== */
/* 共通CSSは tablet/SP で body を 1.4rem/1.2rem に縮小するが、
   元データは本文16px固定のため打ち消す */
body {
  font-size: 1.6rem;
}

.ta-icon-svg {
  display: block;
  width: 16px;
  height: 16px;
}

/* ==========================================================================
   1. レイアウト（元データの実数値）
   ========================================================================== */
.ta-container {
  max-width: 1400px;
  margin: 0 auto;
  padding-left: clamp(20px, 5vw, 40px);
  padding-right: clamp(20px, 5vw, 40px);
}
.ta-container--narrow {
  max-width: 1060px;
}
.ta-container--62em {
  max-width: 62em;
}

.ta-pt-120 { padding-top: clamp(60px, 9vw, 120px); }
.ta-pb-120 { padding-bottom: clamp(60px, 9vw, 120px); }
.ta-pt-110 { padding-top: clamp(60px, 9vw, 110px); }
.ta-pb-110 { padding-bottom: clamp(60px, 9vw, 110px); }
.ta-pt-96  { padding-top: clamp(56px, 8vw, 96px); }
.ta-pb-96  { padding-bottom: clamp(56px, 8vw, 96px); }
.ta-pt-80  { padding-top: clamp(48px, 7vw, 80px); }
.ta-pb-80  { padding-bottom: clamp(48px, 7vw, 80px); }
.ta-pt-64  { padding-top: clamp(40px, 6vw, 64px); }
.ta-pb-64  { padding-bottom: clamp(40px, 6vw, 64px); }
.ta-pt-32  { padding-top: clamp(20px, 3vw, 32px); }
.ta-py-18  { padding-top: 18px; padding-bottom: 18px; }

/* ==========================================================================
   2. 見出し・テキスト
   ========================================================================== */
/* 小ラベル見出し（13px / 400 / .22em）
   ※ 共通CSSの :where(.heading) .heading__ja より後に読み込まれるため
     詳細度は 0-1-0 のままでよい（--modifier が確実に効くようにする） */
.ta-label {
  margin: 0 0 10px;
  font-family: "Zen Old Mincho", "游明朝", "Yu Mincho", YuMincho, "Hiragino Mincho ProN", serif;
  font-size: 1.3rem;
  font-weight: 400;
  line-height: normal;
  letter-spacing: 0.22em;
  color: #3b4a36;
}
.ta-label--light { color: #e1e6cf; }
.ta-label--white { color: #ffffff; }
/* TOP ABOUT のラベルのみ元データが line-height:2 を持つ */
.ta-label--lh2 { line-height: 2; }

/* 大英字見出し（Cormorant Garamond / 400） */
.ta-en {
  margin: 0;
  font-family: "Cormorant Garamond", "Times New Roman", serif;
  font-size: clamp(46px, 6.4vw, 104px);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: 0.01em;
  color: #009735;
}
.ta-en--md { font-size: clamp(30px, 3.4vw, 50px); }
.ta-en--pale { color: #e1e6cf; }
.ta-en--white { color: #f4f6ee; }
.ta-en--mb16 { margin-bottom: 16px; }
.ta-en--mb20 { margin-bottom: 20px; }
.ta-en--mb28 { margin-bottom: 28px; }
.ta-en--mb30 { margin-bottom: 30px; }
.ta-en--mb32 { margin-bottom: 32px; }
.ta-en--mb44 { margin-bottom: clamp(28px, 4vw, 44px); }
.ta-en--mb48 { margin-bottom: clamp(28px, 4vw, 48px); }
.ta-en--mb56 { margin-bottom: clamp(32px, 5vw, 56px); }

/* 本文 */
.ta-text {
  margin: 0;
  font-size: 1.6rem;
  line-height: 2.3;
  letter-spacing: 0.05em;
  color: #33402f;
}
.ta-text--light { color: rgba(232, 237, 226, 0.78); }
.ta-text--dark  { color: #1f2419; }
.ta-text--muted { color: #5b6b52; }
.ta-text--mb12 { margin-bottom: 12px; }
.ta-text--mb14 { margin-bottom: 14px; }
.ta-text--mb18 { margin-bottom: 18px; }
.ta-text--mb24 { margin-bottom: 24px; }
.ta-text--mb32 { margin-bottom: 32px; }

/* リード文 */
.ta-lead {
  margin: 0;
  font-size: clamp(16px, 2vw, 20px);
  line-height: 2.2;
  letter-spacing: 0.05em;
  color: #33402f;
  max-width: 40em;
  text-wrap: pretty;
}

/* 注記 */
.ta-note {
  margin: 0;
  font-size: 1.3rem;
  line-height: 2;
  color: #5b6b52;
}
.ta-note--light { color: rgba(232, 237, 226, 0.6); }
.ta-note--mt20 { margin-top: 20px; }
.ta-note--mt24 { margin-top: 24px; }
.ta-note--mt40 { margin-top: clamp(28px, 4vw, 40px); }

/* ==========================================================================
   3. 下線＋丸矢印のテキストリンク
   ========================================================================== */
.ta-arrow-link {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  padding: 0 40px 12px 0;
  border-bottom: 1px solid rgba(28, 70, 20, 0.3);
  font-size: 1.3rem;
  letter-spacing: 0.14em;
  color: #1c4614;
  transition: border-color 0.3s ease, color 0.3s ease;
}
.ta-arrow-link__circle {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #1c4614;
  color: #ffffff;
  font-family: "Cormorant Garamond", "Times New Roman", serif;
  font-size: 1.2rem;
  transition: transform 0.3s ease, background-color 0.3s ease;
}
.ta-arrow-link:hover {
  opacity: 1;
  color: #009735;
  border-bottom-color: #009735;
}
.ta-arrow-link:hover .ta-arrow-link__circle {
  background: #009735;
  transform: translateX(5px);
}
.ta-arrow-link--light {
  color: #f4f6ee;
  border-bottom-color: rgba(232, 237, 226, 0.4);
}
.ta-arrow-link--light .ta-arrow-link__circle {
  background: #f4f6ee;
  color: #1c4614;
}
.ta-arrow-link--light:hover {
  color: #8fd6a2;
  border-bottom-color: #8fd6a2;
}
.ta-arrow-link--light:hover .ta-arrow-link__circle {
  background: #8fd6a2;
}

/* ==========================================================================
   4. 写真枠 / 罫線グリッド
   ========================================================================== */
.ta-photo {
  display: grid;
  place-items: center;
  overflow: hidden;
  background: #e1e6cf;
}
.ta-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease, filter 0.6s ease;
}
.ta-photo--bordered { border: 1px solid rgba(28, 70, 20, 0.18); }
.ta-photo--bordered-light { border: 1px solid rgba(255, 255, 255, 0.22); }
.ta-photo--thin { border: 1px solid rgba(28, 70, 20, 0.16); }
.ta-photo--circle { border-radius: 50%; }
.ta-photo--4-3  { aspect-ratio: 4 / 3; }
.ta-photo--3-4  { aspect-ratio: 3 / 4; }
.ta-photo--16-10 { aspect-ratio: 16 / 10; }
.ta-photo--1-1  { aspect-ratio: 1 / 1; }

a:hover .ta-photo img {
  transform: scale(1.06);
  filter: brightness(1.06);
}

/* 1px 罫線で区切るグリッド */
.ta-hairline-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1px;
  background: rgba(255, 255, 255, 0.18);
}
.ta-hairline-grid__cell {
  background: #243024;
  padding: clamp(24px, 3vw, 36px);
}
.ta-hairline-grid--light {
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  background: rgba(28, 70, 20, 0.18);
  border: 1px solid rgba(28, 70, 20, 0.18);
}
.ta-hairline-grid--light .ta-hairline-grid__cell {
  background: #ffffff;
  padding: clamp(24px, 3vw, 34px);
}
.ta-hairline-grid__title {
  margin: 0 0 14px;
  font-size: 2.4rem;
  font-weight: 400;
  line-height: normal;
  letter-spacing: 0.06em;
}
.ta-hairline-grid--light .ta-hairline-grid__title {
  font-size: 1.6rem;
  letter-spacing: 0.04em;
  color: #1c4614;
}

/* ==========================================================================
   5. ヘッダー（透過 → スクロールで深緑）
   ========================================================================== */
.ta-header {
  position: fixed;
  background: transparent;
}
.ta-header.is-fixed {
  position: fixed;
  background: rgba(28, 70, 20, 0.94);
  box-shadow: none;
}
.ta-header__inner {
  max-width: 1400px;
  width: 100%;
  height: auto;
  padding: 14px clamp(16px, 4vw, 32px);
  gap: clamp(12px, 3vw, 40px);
  flex-wrap: wrap;
}
.ta-header.is-fixed .ta-header__inner {
  padding: 14px clamp(16px, 4vw, 32px);
}
.ta-header__logo {
  display: flex;
  flex-direction: column;
  gap: 7px;
  flex: 0 0 auto;
  line-height: 1;
}
.ta-header__logo img,
.ta-header.is-fixed .ta-header__logo img {
  display: block;
  width: clamp(150px, 20vw, 196px);
  height: auto;
  filter: brightness(0) invert(1);
}
.ta-header__logo-sub {
  font-size: 1rem;
  letter-spacing: 0.34em;
  color: rgba(244, 246, 238, 0.72);
}
.ta-header__nav {
  margin-left: auto;
  margin-right: clamp(10px, 2vw, 26px);
  gap: clamp(10px, 2vw, 26px);
  font-size: clamp(12px, 1.4vw, 14px);
}
.ta-header .header__nav-item a {
  padding: 8px 0;
}
.ta-header .header__nav-item a::after {
  background: #f4f6ee;
}
.ta-header .header__nav-ja {
  margin-top: 0;
  font-size: inherit;
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: 0.08em;
  color: #f4f6ee;
}
.ta-header .header__nav-item--current a::after {
  width: 100%;
  left: 0;
  transform: none;
}
.ta-header__right {
  gap: 8px;
  height: auto;
}
.ta-header__icon {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid rgba(244, 246, 238, 0.55);
  color: #f4f6ee;
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}
.ta-header__icon--fill {
  background: #f4f6ee;
  border-color: #f4f6ee;
  color: #1c4614;
}
.ta-header__icon:hover {
  opacity: 1;
  background: #009735;
  border-color: #009735;
  color: #f4f6ee;
}

/* ==========================================================================
   6. SPナビ / ハンバーガー
   ========================================================================== */
.ta-nav-toggle {
  top: 14px;
  right: clamp(16px, 4vw, 32px);
  background: rgba(28, 70, 20, 0.92);
}
.ta-nav-toggle .nav-toggle__line {
  background: #f4f6ee;
}
.ta-sp-nav {
  background: rgba(28, 70, 20, 0.98);
}
.ta-sp-nav .sp-nav__link {
  font-size: 1.6rem;
  font-weight: 400;
  letter-spacing: 0.08em;
  color: #f4f6ee;
}
.ta-sp-nav .sp-nav__en {
  font-family: "Cormorant Garamond", "Times New Roman", serif;
  font-size: 1.1rem;
  letter-spacing: 0.28em;
  opacity: 0.7;
}
.ta-sp-nav__tel {
  display: block;
  font-family: "Cormorant Garamond", "Times New Roman", serif;
  font-size: 2.8rem;
  letter-spacing: 0.04em;
  color: #f4f6ee;
}
.ta-sp-nav__hours {
  margin: 8px 0 0;
  font-size: 1.2rem;
  line-height: 2;
  color: rgba(232, 237, 226, 0.7);
}
body.is-nav-open {
  overflow: hidden;
}

/* ==========================================================================
   7. お問い合わせCTA
   ========================================================================== */
.ta-cta {
  padding: clamp(48px, 7vw, 80px) 0;
  color: #e8ede2;
}
.ta-cta::before {
  background: #243024;
}
.ta-cta__inner {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: clamp(24px, 4vw, 48px);
  align-items: center;
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 clamp(20px, 5vw, 40px);
}
.ta-cta__right {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}
.ta-cta__tel {
  font-family: "Cormorant Garamond", "Times New Roman", serif;
  font-size: clamp(26px, 3.6vw, 36px);
  font-weight: 400;
  letter-spacing: 0.04em;
  color: #f4f6ee;
}
.ta-cta__tel::before {
  content: none;
}
.ta-cta__tel:hover {
  opacity: 1;
  color: #8fd6a2;
}

/* ==========================================================================
   8. フッター
   ========================================================================== */
.ta-footer {
  background: #1c4614;
  color: rgba(232, 237, 226, 0.85);
}
.ta-footer-body {
  max-width: 1400px;
  margin: 0 auto;
  padding: clamp(40px, 6vw, 64px) clamp(20px, 5vw, 40px);
}
.ta-footer-body__inner {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: clamp(24px, 4vw, 48px);
  max-width: none;
  padding: 0;
}
.ta-footer .footer-body__info {
  margin-bottom: 0;
  font-size: inherit;
  line-height: inherit;
  color: inherit;
}
.ta-footer__logo {
  display: block;
  width: 186px;
  height: auto;
  margin: 0 0 22px;
  filter: brightness(0) invert(1);
  opacity: 0.92;
}
.ta-footer__text {
  margin: 0;
  font-size: 1.3rem;
  line-height: 2.1;
}
.ta-footer__text--mb8 { margin-bottom: 8px; }
.ta-footer__note { color: rgba(232, 237, 226, 0.6); }
.ta-footer__label {
  margin: 0 0 14px;
  font-size: 1.2rem;
  letter-spacing: 0.2em;
  color: #e1e6cf;
}
.ta-footer__nav {
  display: flex;
  flex-direction: column;
  gap: 12px;
  font-size: 1.3rem;
}
.ta-footer__nav-item {
  color: rgba(232, 237, 226, 0.85);
}
.ta-footer__nav-item:hover {
  opacity: 1;
  color: #ffffff;
}
.ta-footer__map {
  width: 100%;
  height: auto;
  margin-top: 0;
  overflow: visible;
}
.ta-footer__map iframe {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  border: 1px solid rgba(255, 255, 255, 0.2);
  filter: grayscale(0.2);
}
.ta-footer-bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 12px 32px;
  margin-top: clamp(32px, 4vw, 48px);
  padding: 24px 0 0;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  text-align: left;
}
.ta-footer-bottom__text {
  margin: 0;
  font-size: 1.2rem;
  color: rgba(232, 237, 226, 0.6);
}
.ta-footer-bottom__copy {
  margin: 0;
  font-family: "Cormorant Garamond", "Times New Roman", serif;
  font-weight: 400;
  font-size: 1.1rem;
  letter-spacing: 0.12em;
  color: rgba(232, 237, 226, 0.6);
}

/* ==========================================================================
   9. TOP：メインビュー
   元データ: height:100vh / bg#101510 / overlay linear-gradient(rgba(10,14,10,.55→.32@45%→.6))
   ========================================================================== */
.ta-mv {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  background: #101510;
}
/* CMSスライダー差し替え時に高さが外枠へ追従するよう明示指定（§10.1） */
#slideshow {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100vh;
}
@media (max-width: 896px) {
  #slideshow { height: 100vh; }
}
@media (max-width: 639px) {
  #slideshow { height: 100vh; }
}
.ta-mv__slide {
  position: absolute;
  inset: 0;
  background: #1c4614;
}
.ta-mv__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ta-mv__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(10, 14, 10, 0.55) 0%, rgba(10, 14, 10, 0.32) 45%, rgba(10, 14, 10, 0.6) 100%);
}
.ta-mv__body {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
}
.ta-mv__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 clamp(20px, 5vw, 40px);
  text-align: center;
}
.ta-mv__en {
  margin: 0;
  font-family: "Cormorant Garamond", "Times New Roman", serif;
  font-weight: 400;
  font-size: clamp(44px, 9vw, 132px);
  line-height: 1;
  letter-spacing: 0.02em;
  color: #f4f6ee;
  white-space: nowrap;
}
.ta-mv__ja {
  margin: clamp(20px, 3vw, 34px) 0 0;
  font-size: clamp(14px, 1.9vw, 22px);
  line-height: 1.9;
  letter-spacing: 0.14em;
  color: rgba(244, 246, 238, 0.9);
  white-space: nowrap;
}
.ta-mv__bars {
  position: absolute;
  right: clamp(20px, 5vw, 40px);
  bottom: 26px;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 10px;
}
.ta-mv__bar {
  width: 28px;
  height: 2px;
  background: rgba(255, 255, 255, 0.3);
}
.ta-mv__bar.is-active {
  background: #8fd6a2;
}

/* ==========================================================================
   10. TOP：ABOUT（テキスト38% + 12カラムコラージュ）
   ========================================================================== */
.ta-about {
  display: grid;
  grid-template-columns: minmax(260px, 38%) 1fr;
  gap: clamp(28px, 4vw, 56px);
  align-items: center;
}
.ta-collage {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(12px, 1.6vw, 22px);
  align-items: start;
}
.ta-collage__item--1 { grid-column: 2 / 7;  aspect-ratio: 3 / 4;   }
.ta-collage__item--2 { grid-column: 7 / -1; aspect-ratio: 4 / 3;   margin-top: 18%; }
.ta-collage__item--3 { grid-column: 1 / 9;  aspect-ratio: 16 / 10; margin-top: 4%;  }
.ta-collage__item--4 { grid-column: 9 / -1; aspect-ratio: 3 / 4;   margin-top: 22%; }

/* 元データは常時2カラムのため狭幅で破綻する。SPのみ縦積みに切り替える */
@media (max-width: 639px) {
  .ta-about { grid-template-columns: 1fr; }
}

/* ==========================================================================
   11. TOP：SERVICE（ダークセクション）
   ========================================================================== */
.ta-bg-dark {
  background: #243024;
  color: #e8ede2;
}
.ta-btn-row {
  display: flex;
  justify-content: center;
  margin-top: clamp(28px, 4vw, 44px);
}

/* ==========================================================================
   12. TOP：コンテンツ導線バナー
   ========================================================================== */
.ta-menu {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  border-top: 1px solid rgba(28, 70, 20, 0.16);
  border-bottom: 1px solid rgba(28, 70, 20, 0.16);
}
.ta-menu__item {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: clamp(20px, 3vw, 40px);
  align-items: center;
  padding: clamp(40px, 6vw, 80px) clamp(20px, 3vw, 48px);
}
.ta-menu__item--divider {
  border-right: 1px solid rgba(28, 70, 20, 0.16);
}
.ta-menu__item:hover {
  opacity: 1;
  background: rgba(225, 230, 207, 0.35);
}
.ta-menu__en {
  margin: 0 0 clamp(18px, 2.4vw, 30px);
  font-family: "Cormorant Garamond", "Times New Roman", serif;
  font-weight: 400;
  font-size: clamp(24px, 2.6vw, 32px);
  line-height: 1.2;
  letter-spacing: 0.01em;
  color: #1c4614;
}
.ta-menu__title {
  margin: 0 0 8px;
  font-size: clamp(17px, 1.9vw, 21px);
  letter-spacing: 0.1em;
  color: #1f2419;
}
.ta-menu__desc {
  margin: 0 0 clamp(24px, 3.4vw, 44px);
  font-size: 1.3rem;
  letter-spacing: 0.06em;
  color: #5b6b52;
}
.ta-menu__thumb {
  width: clamp(120px, 15vw, 190px);
  aspect-ratio: 1 / 1;
}
/* 1カラムに折り返す幅では区切りを下線に切り替える */
@media (max-width: 767px) {
  .ta-menu__item--divider {
    border-right: none;
    border-bottom: 1px solid rgba(28, 70, 20, 0.16);
  }
}

/* ==========================================================================
   13. TOP：MESSAGE（枠外にはみ出す装飾写真あり／clipしない）
   ========================================================================== */
.ta-message {
  position: relative;
  padding-left: clamp(20px, 5vw, 40px);
  padding-right: clamp(20px, 5vw, 40px);
  background: #111a11;
}
.ta-message__bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
}
.ta-message__bg img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ta-message__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10, 16, 10, 0.86), rgba(10, 16, 10, 0.72) 45%, rgba(10, 16, 10, 0.9));
}
.ta-message__deco {
  position: absolute;
  z-index: 1;
}
.ta-message__deco--left {
  left: 0;
  top: -8%;
  width: clamp(150px, 17vw, 300px);
  aspect-ratio: 3 / 4;
}
.ta-message__deco--right {
  right: 0;
  bottom: -10%;
  width: clamp(150px, 19vw, 340px);
  aspect-ratio: 4 / 3;
}
.ta-message__content {
  position: relative;
  z-index: 2;
  max-width: 62em;
  margin: 0 auto;
  text-align: center;
  color: #f4f6ee;
}
.ta-message__quote {
  margin: 0 0 28px;
  font-size: clamp(17px, 2.2vw, 26px);
  line-height: 2.1;
  letter-spacing: 0.06em;
  text-wrap: pretty;
}
.ta-message__text {
  margin: 0 0 26px;
  font-size: 1.6rem;
  line-height: 2.3;
  letter-spacing: 0.05em;
  color: rgba(244, 246, 238, 0.82);
}
.ta-message__sign {
  margin: 0;
  font-family: "Cormorant Garamond", "Times New Roman", serif;
  font-weight: 400;
  font-size: 1.2rem;
  letter-spacing: 0.24em;
  color: #e1e6cf;
}

/* ==========================================================================
   14. 下層ページ：ページヒーロー / パンくず
   元データ: bg#1c4614 / 写真 mix-blend-mode:multiply + opacity:.85
   ========================================================================== */
.ta-hero {
  position: relative;
  overflow: hidden;
  background: #1c4614;
  color: #f4f6ee;
}
.ta-hero__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  mix-blend-mode: multiply;
  opacity: 0.85;
}
.ta-hero__inner {
  position: relative;
  padding-top: clamp(140px, 14vw, 180px);
  padding-bottom: clamp(48px, 7vw, 84px);
}

.ta-crumb {
  padding: 18px 0;
  font-size: 1.2rem;
  letter-spacing: 0.06em;
  color: #5b6b52;
}
.ta-crumb .breadcrumb__item:not(:last-child)::after {
  content: "／";
  margin: 0 0.2em;
  color: #5b6b52;
}
.ta-crumb .breadcrumb__link { color: #5b6b52; }
.ta-crumb .breadcrumb__link:hover { color: #009735; opacity: 1; }
.ta-crumb .breadcrumb__current { color: #5b6b52; }

/* ==========================================================================
   15. 下層ページ共通：auto-fit グリッド
   ========================================================================== */
.ta-grid-340 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: clamp(32px, 5vw, 64px);
  align-items: start;
}
.ta-grid-300 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: clamp(24px, 4vw, 44px);
}
.ta-grid-280 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: clamp(32px, 5vw, 64px);
  align-items: start;
}
.ta-grid-260 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: clamp(20px, 3vw, 32px);
}
.ta-grid-240 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: clamp(16px, 2.4vw, 24px);
}
@media (max-width: 419px) {
  .ta-grid-340, .ta-grid-300, .ta-grid-280, .ta-grid-260, .ta-grid-240 {
    grid-template-columns: 1fr;
  }
}

.ta-stack-28 {
  display: flex;
  flex-direction: column;
  gap: clamp(20px, 3vw, 28px);
}

/* ==========================================================================
   16. 定義テーブル（ショップ概要）
   ========================================================================== */
.ta-dl {
  display: grid;
  grid-template-columns: minmax(140px, 220px) 1fr;
  margin: 0;
  border-top: 1px solid rgba(28, 70, 20, 0.18);
  font-size: 1.4rem;
  line-height: 2;
}
.ta-dl dt {
  padding: 16px 4px;
  border-bottom: 1px solid rgba(28, 70, 20, 0.12);
  letter-spacing: 0.08em;
  color: #1c4614;
}
.ta-dl dd {
  margin: 0;
  padding: 16px 4px;
  border-bottom: 1px solid rgba(28, 70, 20, 0.12);
}
.ta-dl__note {
  font-size: 1.3rem;
  color: #5b6b52;
}

/* ==========================================================================
   17. 地図
   ========================================================================== */
.ta-map {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  border: 1px solid rgba(28, 70, 20, 0.2);
}

/* ==========================================================================
   18. FAQ（details / summary）
   ========================================================================== */
.ta-faq {
  display: flex;
  flex-direction: column;
  gap: 1px;
  background: rgba(28, 70, 20, 0.18);
  border-top: 1px solid rgba(28, 70, 20, 0.18);
  border-bottom: 1px solid rgba(28, 70, 20, 0.18);
}
.ta-faq__item {
  background: #ffffff;
}
.ta-faq__q {
  display: flex;
  align-items: baseline;
  gap: 16px;
  padding: 22px 4px;
  font-size: clamp(15px, 1.8vw, 17px);
  letter-spacing: 0.04em;
  cursor: pointer;
  list-style: none;
  transition: color 0.3s ease;
}
.ta-faq__q::-webkit-details-marker { display: none; }
.ta-faq__q:hover { color: #009735; }
.ta-faq__mark {
  font-family: "Cormorant Garamond", "Times New Roman", serif;
  font-size: 2.2rem;
  color: #009735;
}
.ta-faq__a {
  padding: 0 4px 26px 40px;
  font-size: 1.6rem;
  line-height: 2.3;
  letter-spacing: 0.05em;
  color: #33402f;
}
.ta-faq__a p { margin: 0 0 14px; }
.ta-faq__a p:last-child { margin: 0; }

/* ==========================================================================
   19. 事業内容ページ
   ========================================================================== */
.ta-bg-base {
  background: #1c4614;
  color: #e8ede2;
}
.ta-service-list {
  display: flex;
  flex-direction: column;
  gap: clamp(32px, 5vw, 64px);
}
.ta-service-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: clamp(24px, 4vw, 48px);
  align-items: center;
}
@media (max-width: 419px) {
  .ta-service-row { grid-template-columns: 1fr; }
}
/* 元データ: border-left 2px #990000 のワンポイント注記 */
.ta-callout {
  margin: 0;
  padding-left: 14px;
  border-left: 2px solid #990000;
  font-size: 1.3rem;
  line-height: 2;
  color: #5b6b52;
}
.ta-photo--tint { background: rgba(37, 66, 32, 0.125); }
.ta-photo--mb20 { margin-bottom: 20px; }
.ta-parts-title {
  margin: 0 0 14px;
  font-size: 1.8rem;
  font-weight: 400;
  line-height: normal;
  letter-spacing: 0.05em;
}
.ta-text--mb16 { margin-bottom: 16px; }

/* ==========================================================================
   20. 実績ページ
   ========================================================================== */
.ta-bg-section { background: #e1e6cf; }

/* 準備中プレースホルダ */
.ta-prep {
  display: grid;
  place-items: center;
  aspect-ratio: 4 / 3;
  background: #e1e6cf;
  border: 1px dashed rgba(28, 70, 20, 0.35);
  text-align: center;
}
.ta-prep__text {
  font-size: 1.4rem;
  letter-spacing: 0.12em;
  color: #1c4614;
}

/* 販売実績カード */
.ta-stock {
  background: #ffffff;
  border: 1px solid rgba(28, 70, 20, 0.18);
}
.ta-stock__img { border-bottom: 1px solid rgba(28, 70, 20, 0.14); }
.ta-stock__body { padding: 22px; }
.ta-stock__title {
  margin: 0 0 14px;
  font-size: 1.7rem;
  font-weight: 400;
  line-height: normal;
  letter-spacing: 0.04em;
}
.ta-stock__sub {
  font-size: 1.3rem;
  color: #5b6b52;
}
.ta-stock__text {
  margin: 0 0 14px;
  font-size: 1.3rem;
  line-height: 2;
  color: #33402f;
}
.ta-stock__price {
  margin: 0;
  font-size: 1.5rem;
  letter-spacing: 0.06em;
  color: #1c4614;
}
.ta-stock__status {
  margin: 0;
  font-size: 1.3rem;
  letter-spacing: 0.1em;
  color: #990000;
}

/* ==========================================================================
   21. 作業風景ページ
   ========================================================================== */
.ta-landscape-lead {
  margin: 0 0 clamp(24px, 3.5vw, 40px);
  max-width: 62em;
  font-size: 1.6rem;
  line-height: 2.1;
  letter-spacing: 0.05em;
  color: #33402f;
}
.ta-landscape {
  display: flex;
  flex-direction: column;
  gap: clamp(40px, 5vw, 64px);
}
.ta-landscape__row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(20px, 2.4vw, 32px);
}
.ta-entry {
  border-top: 1px solid rgba(28, 70, 20, 0.18);
  padding-top: 20px;
}
.ta-entry__img { margin-bottom: 16px; }
.ta-entry__cat {
  margin: 0 0 8px;
  font-family: "Cormorant Garamond", "Times New Roman", serif;
  font-weight: 400;
  font-size: 1.1rem;
  letter-spacing: 0.28em;
  color: #009735;
}
.ta-entry__title {
  margin: 0 0 10px;
  font-size: 1.9rem;
  font-weight: 400;
  line-height: normal;
  letter-spacing: 0.05em;
}
.ta-entry__title--wide { margin-bottom: 12px; }
.ta-entry__text {
  margin: 0;
  font-size: 1.5rem;
  line-height: 1.9;
  letter-spacing: 0.04em;
  color: #33402f;
}
.ta-entry__body {
  margin: 0 0 20px;
  font-size: 1.6rem;
  line-height: 2.1;
  letter-spacing: 0.05em;
  color: #33402f;
}
.ta-thumbs {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 12px;
}
@media (max-width: 639px) {
  .ta-landscape__row { grid-template-columns: 1fr; }
  .ta-thumbs { grid-template-columns: repeat(3, 1fr); }
}

/* ==========================================================================
   22. お問い合わせページ
   ========================================================================== */
.ta-tel-box {
  padding: clamp(22px, 3vw, 30px);
  border: 1px solid rgba(28, 70, 20, 0.2);
  background: #e1e6cf;
}
.ta-tel-box__label {
  margin: 0 0 6px;
  font-family: "Cormorant Garamond", "Times New Roman", serif;
  font-weight: 400;
  font-size: 1.1rem;
  letter-spacing: 0.3em;
  color: #009735;
}
.ta-tel-box__tel {
  display: inline-block;
  margin-bottom: 18px;
  font-family: "Cormorant Garamond", "Times New Roman", serif;
  font-size: clamp(26px, 4vw, 38px);
  letter-spacing: 0.04em;
  color: #1c4614;
}
.ta-tel-box__tel:hover { opacity: 1; color: #009735; }
.ta-tel-box__text {
  margin: 0 0 4px;
  font-size: 1.4rem;
  line-height: 2;
}
.ta-tel-box__note {
  margin: 0;
  font-size: 1.3rem;
  color: #5b6b52;
}
.ta-map-block { margin-top: clamp(24px, 3vw, 32px); }
.ta-map-block__note {
  margin: 12px 0 0;
  font-size: 1.3rem;
  line-height: 2;
  color: #5b6b52;
}

/* --------------------------------------------------------------------------
   CMSお問い合わせフォーム（cms_ajax 1.0.0 / view_cms_contact / design_pattern=1）
   CMS が body 内に後から挿入する mail-form.css より後勝ちにする必要があるため、
   .ta-form-cms でスコープして CMS 側より詳細度を1つ上げている。
   （CMS側 .form-contents form dl dt:not(...) = 0-2-3 → こちらは 0-3-3）
   -------------------------------------------------------------------------- */
.ta-form-cms .form-contents {
  padding: 0;
  margin: 0;
  background: transparent;
}
.ta-form-cms .form-contents form dl {
  margin: 0 0 22px;
}

/* dt / dd を float 2カラムから「ラベル上・入力下」の縦積みへ */
.ta-form-cms .form-contents form dl dt:not(.pattern-exclusion) {
  float: none;
  width: auto;
  margin: 0 0 8px;
  padding: 0;
  text-align: left;
}
.ta-form-cms .form-contents form dl dd:not(.pattern-exclusion) {
  margin: 0;
  padding: 0 0 22px;
  border-bottom: none;
  line-height: normal;
}
.ta-form-cms .form-contents form dl dd:not(.pattern-exclusion):last-of-type {
  padding-bottom: 0;
}

/* 見出しラベル（13px / .1em / #1c4614） */
.ta-form-cms .form-contents form dl dt:not(.pattern-exclusion) span {
  font-size: 1.3rem;
  letter-spacing: 0.1em;
  color: #1c4614;
}
/* 必須／任意バッジ：CMS既定は「赤い箱を前置」なので、元データどおり
   「ラベルの後ろに小さな赤文字」へ置き換える */
.ta-form-cms .form-pattern-1 dl dt:not(.pattern-exclusion) span.required::before,
.ta-form-cms .form-pattern-1 dl dt:not(.pattern-exclusion) span.optional::before {
  content: none;
}
.ta-form-cms .form-pattern-1 dl dt:not(.pattern-exclusion) span.required::after {
  content: "必須";
  margin-left: 8px;
  font-size: 1.1rem;
  letter-spacing: 0.1em;
  color: #990000;
}
.ta-form-cms .form-pattern-1 dl dt:not(.pattern-exclusion) span.optional::after {
  content: "任意";
  margin-left: 8px;
  font-size: 1.1rem;
  letter-spacing: 0.1em;
  color: #5b6b52;
}

/* 入力欄 */
.ta-form-cms .form-contents dd:not(.pattern-exclusion) input.textarea,
.ta-form-cms .form-contents dd:not(.pattern-exclusion) .textarea,
.ta-form-cms .form-pattern-1 dd:not(.pattern-exclusion) .textarea {
  width: 100%;
  height: auto;
  min-height: 48px;
  padding: 14px;
  border: 1px solid rgba(28, 70, 20, 0.3);
  border-radius: 0;
  background: #f4f6ee;
  font-family: inherit;
  font-size: 1.5rem;
  color: #33402f;
  transition: border-color 0.3s ease;
}
.ta-form-cms .form-contents dd:not(.pattern-exclusion) .textarea:focus {
  outline: none;
  border-color: #009735;
}
.ta-form-cms .form-contents dd:not(.pattern-exclusion) textarea.textarea {
  min-height: 0;
  line-height: 1.9;
  resize: vertical;
}
.ta-form-cms .form-contents dd:not(.pattern-exclusion) .textarea::placeholder {
  color: #98a693;
}

/* チェックボックス／ラジオ */
.ta-form-cms .form-contents form dl dd:not(.pattern-exclusion) label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 24px 10px 0;
  font-size: 1.5rem;
  color: #33402f;
  cursor: pointer;
}
/* :has() が使える環境では gap で組み、最終行の余分な下マージンを消す */
.ta-form-cms .form-contents form dl dd:not(.pattern-exclusion):has(> label) {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 24px;
}
.ta-form-cms .form-contents form dl dd:not(.pattern-exclusion):has(> label) label {
  margin: 0;
}
.ta-form-cms .form-contents form dl dd:not(.pattern-exclusion) input.checkbox,
.ta-form-cms .form-contents form dl dd:not(.pattern-exclusion) input.radio {
  width: auto;
  min-height: 0;
  margin: 0;
  accent-color: #1c4614;
}

/* 補足テキスト（CMS側で前後テキストを設定した場合） */
.ta-form-cms .form-contents form dl dd:not(.pattern-exclusion) .before-text-area,
.ta-form-cms .form-contents form dl dd:not(.pattern-exclusion) .after-text-area {
  font-size: 1.2rem;
  line-height: 1.9;
  color: #5b6b52;
}

/* スパム対策のダミー入力欄。インラインのままだと空の行ボックス分だけ
   送信ボタンの手前に隙間ができるため、高さを持たないブロックにする */
.ta-form-cms .form-contents form > input[name="winnie_the_pooh"] {
  display: block;
}

/* 送信ボタン */
.ta-form-cms .form-contents .submit-btn,
.ta-form-cms .form-pattern-1 .submit-btn,
.ta-form-cms .form-contents :not(.pattern-exclusion) button.submit-btn {
  width: 100%;
  min-height: 56px;
  margin: 0;
  padding: 18px 32px;
  border: none;
  border-radius: 0;
  background: #1c4614;
  color: #f4f6ee;
  font-family: inherit;
  font-size: 1.5rem;
  font-weight: 400;
  letter-spacing: 0.2em;
  transition: background-color 0.3s ease;
}
.ta-form-cms .form-contents .submit-btn::before {
  content: none;
}
.ta-form-cms .form-pattern-1 :not(.pattern-exclusion) button.submit-btn:hover {
  background: #009735;
}

/* エラー表示 */
.ta-form-cms .form-contents .form-err-msg {
  margin: 0 0 22px;
  padding: 16px;
  border: 1px solid #990000;
  background: #f5eaea;
  color: #990000;
  font-size: 1.4rem;
  line-height: 2;
}

/* 送信完了メッセージ */
.ta-form-cms .form-pattern-1 .form-thanks-msg {
  padding: clamp(22px, 3vw, 30px);
  border: 1px solid rgba(28, 70, 20, 0.2);
  background: #e1e6cf;
}
.ta-form-cms .form-contents .form-thanks-msg p {
  font-size: 1.6rem;
  line-height: 2.3;
  letter-spacing: 0.05em;
  color: #33402f;
}
.ta-form-cms .form-contents .form-thanks-msg .back-home-btn {
  width: 100%;
  margin: 24px 0 0;
}
.ta-form-cms .form-pattern-1 .form-thanks-msg .back-home-btn a {
  padding: 18px 0;
  border: none;
  border-radius: 0;
  background: #1c4614;
  color: #f4f6ee;
  font-size: 1.5rem;
  font-weight: 400;
  letter-spacing: 0.2em;
}
.ta-form-cms .form-pattern-1 .form-thanks-msg .back-home-btn a:hover {
  background: #009735;
  opacity: 1;
}


/* ==========================================================================
   23. 狭幅フォールバック
   元データは auto-fit の最小値のみで狭幅の指定がないため、
   最小カラム幅を下回る画面で破綻しないよう1カラムへ落とす
   ========================================================================== */
@media (max-width: 419px) {
  .ta-menu { grid-template-columns: 1fr; }
}

/* バナー全体ホバー時、内側の矢印リンクも連動させる */
.ta-menu__item:hover .ta-arrow-link {
  color: #009735;
  border-bottom-color: #009735;
}
.ta-menu__item:hover .ta-arrow-link__circle {
  background: #009735;
  transform: translateX(5px);
}