@charset "utf-8";
/*
 * ======================================
 * 追加クラス一覧（共通SCSS取り込み検討用）
 * ======================================
 *
 * ---- レイアウト（値の粒度不足）----
 * .chura-sec            - セクション上下padding clamp(48px,7vw,96px)（下層標準）
 * .chura-sec--lg        - clamp(64px,8vw,110px)（TOP ABOUT / NEWS）
 * .chura-sec--band      - clamp(56px,7vw,96px)（TOP 帯セクション）
 * .chura-sec--sm        - clamp(28px,4vw,52px)（下層の連結セクション）
 * .chura-sec--pt0/--pb0 - 上下padding打ち消し
 * .chura-stack          - セクション内の縦積み gap clamp(24px,3vw,40px)
 * .chura-2col           - 2カラム grid auto-fit minmax(300px,1fr) gap clamp(28px,4vw,64px)
 * .chura-2col--280      - minmax(280px,1fr) 版（下層）
 * .chura-media          - 2カラム内テキスト側の縦積み（gap 22px / --24 で24px）
 *
 * ---- 見出し・リンク（構造不足）----
 * .chura-hd             - EN(Ysabeau SC clamp26-42) + JA(clamp15-18) の縦積み見出し
 * .chura-hd--gap16 / --center / --white
 * .chura-catch          - TOP ABOUT の大キャッチ clamp(24px,3.4vw,44px)
 * .chura-txt            - 本文 clamp(15px,1.3vw,17px)（--lh26 / --lh18 で行高切替）
 * .chura-more           - read more リンク（下線2px + hoverでteal）
 *
 * ---- ヘッダー / フッター（構造不足）----
 * .chura-header(--overlay) / .chura-header__inner / .chura-logo / .chura-nav
 * .chura-tel / __label / __num  - ラベル付き電話番号（カフェ／事務所の取り違え防止）
 * .chura-cta(--pill/--footer/--sp) - teal CTAボタン
 * .chura-footer 系 / .chura-badge
 *
 * ---- メインビュー（構造不足）----
 * .chura-mv / __stage / __grad / __top / __bottom / __bg-en / __body / __ttl / __lead
 *
 * ---- カード・装飾（装飾パターン不足）----
 * .chura-cards / .chura-card 系 - 正方形写真＋hairline＋番号のカード
 * .chura-leaf                    - 葉背景（fixed）帯セクション
 * .chura-estate 系               - 写真に白ボックスが食い込む重なりレイアウト
 * .chura-thumbs                  - 3枚並びの正方形サムネイル
 * .chura-roast-1〜8              - 焙煎度8段階スウォッチ
 *
 * ---- リスト・テーブル（値の粒度不足）----
 * .chura-dl(--company) / .chura-list / .chura-menu / .chura-row 系
 * .chura-news-list / .chura-tabs / .chura-entries / .chura-entry 系
 * .chura-side 系 / .chura-pager / .chura-article 系 / .chura-back
 *
 * ---- フォーム（値の粒度不足）----
 * .chura-cms-form  - CMSお問い合わせフォーム(.form-contents.form-pattern-1)の上書きレイヤー
 *                    ※CMSが実行時に注入する mail-form.css より高い詳細度で記述
 * .chura-privacy 系 - 個人情報の取り扱い（details/summary）
 * .page-top 上書き   - <button> 既定の背景・枠線を除去（丸のみ表示）
 *
 * ---- 後から追加した差分クラス ----
 * .chura-stack--lg      - BUSINESS帯の内側 gap clamp(28px,4vw,48px)
 * .chura-hd--lh160/--lh165 - 元データが明示している見出し行高
 * .chura-subttl         - EN見出しの下に続く小見出し（clamp15-18 / 700 / lh1.6）
 * .chura-card--bare     - 枠なしカード（取扱物件）
 * .chura-2col--top      - 2カラムの上端揃え
 * .chura-shopinfo       - 店舗情報帯 width:96%
 * .chura-sec--pb-sm     - 下パディングのみ clamp(28px,4vw,52px)
 * .chura-contact-sec(__lead) - 会社概要ページのCONTACT区画
 * .chura-estate__tel(-num)   - 不動産ページのCTA横 電話番号
 * .chura-map-block / .embed の高さ指定
 *
 * ---- object-position（指定方向不足）----
 * .chura-objy-40/50/55/58/60/62/74/80/86 / .chura-objx-60
 * .chura-aspect-5-4 / .chura-aspect-16-10
 *
 * ======================================
 * 共通SCSSに不足していたもの
 * ======================================
 *
 * ■ 値の粒度不足
 *   - セクション上下padding が 120px/60px 固定で、clamp() による流体余白を持たない
 *     （元データは clamp(48px,7vw,96px) 等の4段階）
 *   - .container の左右padding が固定10px。clamp(16px,3vw,32px) が出せない
 *   - font-size utility が rem固定値のみ。clamp() ベースの流体タイポが出せない
 *   - dt/ラベルの固定幅（110px / 150px）を指定する utility がない
 *   - gap utility が 5,10,15,20,30,40,60 のみ。12px / 14px / 18px / 22px / 26px が無い
 *
 * ■ 指定方向不足
 *   - object-position が top/bottom/center のみ。center 58% 等の縦位置微調整ができない
 *   - aspect-ratio が 1:1/4:3/3:2/16:9/21:9 のみ。5/4・16/10 が無い
 *
 * ■ 状態不足
 *   - hover で「文字色＋ボーダー色」を同時に変える utility が無い（read more で必要）
 *
 * ■ 構造不足
 *   - EN見出しの上に日本語小見出しを重ねない「EN大＋JA小の縦積み」型見出しが無い
 *     （heading は en 5rem / ja 2.2rem 固定で、元データの比率と逆）
 *   - 電話番号に「用途ラベル（バッジ）」を並置する構造が無い
 *   - 写真の外にテキストボックスが食い込む重なり（column2--overlap は -80px 固定）
 *     元データは clamp(-96px,-5vw,-24px) の流体はみ出し
 *   - grid の auto-fit minmax() レイアウトが無い（grid-N は固定列数のみ）
 *
 * ■ 装飾パターン不足
 *   - dot-leader の点が border-dotted のみ。radial-gradient 製の丸ドット（6px間隔）が無い
 *   - 背景固定（background-attachment:fixed）の帯セクションが無い
 *
 */

/* ==========================================================================
   1. ベース上書き
   元データ: body{font-weight:500;color:#3f3025;background:#fff}
   ========================================================================== */
body {
  font-weight: 500;
}

a:hover {
  color: #1f8f89;
  opacity: 1;
}

/* 元データ: 全ページで box-shadow 未使用 */
.embed,
.img-frame {
  box-shadow: none;
}

/* ==========================================================================
   2. コンテナ / セクション
   元データ: max-width:1400px / padding:0 clamp(16px,3vw,32px)
   ========================================================================== */
.container {
  max-width: 1400px;
  padding-left: clamp(16px, 3vw, 32px);
  padding-right: clamp(16px, 3vw, 32px);
}

.chura-sec       { padding: clamp(48px, 7vw, 96px) 0; }
.chura-sec--lg   { padding: clamp(64px, 8vw, 110px) 0; }
.chura-sec--band { padding: clamp(56px, 7vw, 96px) 0; }
.chura-sec--sm   { padding: clamp(28px, 4vw, 52px) 0; }
.chura-sec--pt0  { padding-top: 0; }
.chura-sec--pb0  { padding-bottom: 0; }

.chura-stack {
  display: flex;
  flex-direction: column;
  gap: clamp(24px, 3vw, 40px);
}

.chura-2col {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: clamp(28px, 4vw, 64px);
  align-items: center;
}
.chura-2col--280 {
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.chura-media {
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.chura-media--24 { gap: 24px; }

/* 画像 */
.chura-photo {
  width: 100%;
  object-fit: cover;
  display: block;
  border-radius: 10px;
}
.chura-photo--sq { border-radius: 3px; }
.chura-photo--flat { border-radius: 0; }

.chura-aspect-5-4   { aspect-ratio: 5 / 4; }
.chura-aspect-16-10 { aspect-ratio: 16 / 10; }

.chura-objy-40 { object-position: center 40%; }
.chura-objy-50 { object-position: center 50%; }
.chura-objy-55 { object-position: center 55%; }
.chura-objy-58 { object-position: center 58%; }
.chura-objy-60 { object-position: center 60%; }
.chura-objy-62 { object-position: center 62%; }
.chura-objy-74 { object-position: center 74%; }
.chura-objy-80 { object-position: center 80%; }
.chura-objy-86 { object-position: center 86%; }
.chura-objx-60 { object-position: 60% center; }

/* ==========================================================================
   3. 見出し / read more
   元データ: EN clamp(26px,3.2vw,42px) 700 ls.005em lh1.15 #2bb7af
             JA clamp(15px,1.5vw,18px) 700 lh1.65
   ========================================================================== */
.chura-hd {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.chura-hd .heading__en {
  font-family: "Ysabeau SC", serif;
  font-size: clamp(26px, 3.2vw, 42px);
  font-weight: 700;
  letter-spacing: 0.005em;
  line-height: 1.15;
  color: #2bb7af;
}
.chura-hd .heading__ja {
  margin: 0;
  font-size: clamp(15px, 1.5vw, 18px);
  font-weight: 700;
  line-height: 1.65;
  color: #3f3025;
}
.chura-hd--gap16 { gap: 16px; }
.chura-hd--center {
  align-items: center;
  text-align: center;
}
.chura-hd--white .heading__en { color: #e6fffd; }
.chura-hd--white .heading__ja { color: #fff; line-height: 1.6; }

.chura-catch {
  margin: 0;
  font-size: clamp(24px, 3.4vw, 44px);
  line-height: 1.45;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.chura-txt {
  margin: 0;
  font-size: clamp(15px, 1.3vw, 17px);
  line-height: 1.8;
}
.chura-txt--lh26 { line-height: 2.6; }
.chura-txt--lh225 { line-height: 2.25; }
.chura-txt--brown { color: #6d553f; }

.chura-more {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  align-self: flex-start;
  border-bottom: 2px solid #3f3025;
  padding: 0 6px 10px;
  font-family: "Ysabeau SC", serif;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: #3f3025;
  text-decoration: none;
  transition: color 0.3s ease, border-color 0.3s ease;
}
.chura-more:hover {
  color: #2bb7af;
  border-color: #2bb7af;
  opacity: 1;
}
.chura-more__arrow {
  font-size: 14px;
  font-weight: 700;
}
.chura-more--center { align-self: center; }

.chura-links {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  align-items: center;
}

/* ==========================================================================
   4. ヘッダー
   元データ: 透過ヘッダー / inner width:96% padding:14px 0 gap:clamp(16px,3vw,40px)
   ========================================================================== */
.chura-header {
  background: transparent;
  box-shadow: none;
}
.chura-header--overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
}

.chura-header__inner {
  max-width: none;
  width: 96%;
  height: auto;
  padding: 14px 0;
  gap: clamp(16px, 3vw, 40px);
  flex-wrap: wrap;
}

/* ロゴ（画像のみ。サイズは .chura-logo__mark で指定） */
.chura-logo {
  gap: 0;
  flex: 0 0 auto;
}

/* ナビ（EN 13px 700 teal / JA 15px 700） */
.chura-nav {
  gap: clamp(14px, 2vw, 30px);
  flex-wrap: wrap;
  margin-left: auto;
  margin-right: 0;
}
.chura-nav .header__nav-item a {
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  padding: 0;
}
/* 元データはホバー下線・現在ページ下線ともに無し */
.chura-nav .header__nav-item a::after { display: none; }
.chura-nav .header__nav-en {
  font-family: "Ysabeau SC", serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #2bb7af;
  line-height: 1;
}
.chura-nav .header__nav-ja {
  margin-top: 0;
  font-size: 15px;
  font-weight: 700;
  color: #3f3025;
  line-height: 1.3;
}
.chura-nav .chura-nav__ja--en {
  font-family: "Ysabeau SC", serif;
  font-size: 16px;
  letter-spacing: 0.02em;
}

/* 右側：ラベル付き電話 + CTA */
.chura-header__right {
  gap: 16px;
  flex-wrap: wrap;
  height: auto;
}
.chura-tel-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.chura-tel {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: inherit;
  color: #3f3025;
  white-space: nowrap;
}
.chura-tel::before { content: none; }
.chura-tel:hover { opacity: 0.7; color: #3f3025; }
.chura-tel__label {
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.1em;
  color: #fff;
  padding: 2px 7px;
  border-radius: 2px;
}
.chura-tel__label--office { background: #6d553f; }
.chura-tel__label--cafe   { background: #2bb7af; }
.chura-tel__num {
  font-family: "Roboto", sans-serif;
  font-size: 18px;
  font-weight: 700;
  color: #3f3025;
}

.chura-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-direction: row;
  height: auto;
  background: #2bb7af;
  color: #fff;
  padding: 15px 24px;
  border-radius: 3px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-decoration: none;
  transition: background 0.3s ease;
}
.chura-cta:hover {
  background: #1f8f89;
  color: #fff;
  opacity: 1;
}
.chura-cta--pill {
  padding: 13px 20px;
  border-radius: 999px;
  font-size: 13px;
  letter-spacing: 0.02em;
  text-align: center;
  max-width: 100%;
}
.chura-cta--footer {
  padding: 15px 22px;
  font-size: 13px;
  margin-top: 6px;
}
.chura-cta--sp {
  width: 100%;
  margin-top: 8px;
}

/* SPナビ下部 */
.chura-sp-nav__bottom {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.chura-tel--sp .chura-tel__num { color: #fff; }
.chura-tel--sp:hover .chura-tel__num { color: #fff; }
.chura-tel--sp .chura-tel__label--office { background: rgba(255, 255, 255, 0.25); }
.chura-tel--sp .chura-tel__label--cafe { background: rgba(255, 255, 255, 0.25); }

/* ==========================================================================
   5. メインビュー
   元データ: height:100vh / min-height:560px、透過値は厳密一致
   ========================================================================== */
.chura-mv {
  position: relative;
  background: #f8f5f4;
  overflow: hidden;
  width: 100%;
}
.chura-mv__stage {
  position: relative;
  height: 100vh;
  min-height: 560px;
}
#slideshow {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100vh;
  min-height: 560px;
  overflow: hidden;
}
#slideshow .swiper-slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
#slideshow .swiper-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.chura-mv__grad {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.54) 0%, rgba(255, 255, 255, 0.34) 42%, rgba(255, 255, 255, 0) 100%);
}
.chura-mv__top {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 190px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.92) 0%, rgba(255, 255, 255, 0.6) 55%, rgba(255, 255, 255, 0) 100%);
  z-index: 40;
  pointer-events: none;
}
.chura-mv__bottom {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 38%;
  background: linear-gradient(180deg, rgba(63, 48, 37, 0) 0%, rgba(63, 48, 37, 0.42) 100%);
}
.chura-mv__bg-en {
  position: absolute;
  right: 2%;
  bottom: 0;
  z-index: 10;
  font-family: "Ysabeau SC", serif;
  font-size: clamp(40px, 9.6vw, 168px);
  font-weight: 700;
  letter-spacing: 0.01em;
  line-height: 0.74;
  white-space: nowrap;
  color: rgba(255, 255, 255, 0.3);
}
.chura-mv__body {
  position: absolute;
  inset: 0;
  z-index: 20;
  pointer-events: none;
  display: flex;
  align-items: flex-end;
  padding-bottom: clamp(56px, 9vh, 120px);
}
.chura-mv__inner {
  width: 96%;
  margin: 0 auto;
}
.chura-mv__text {
  max-width: 720px;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.chura-mv__ttl {
  margin: 0;
  font-size: clamp(34px, 5.4vw, 72px);
  line-height: 1.3;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: #fff;
  text-shadow: 0 2px 16px rgba(63, 48, 37, 0.5);
}
.chura-mv__lead {
  margin: clamp(16px, 2vw, 26px) 0 0;
  font-size: clamp(14px, 1.5vw, 19px);
  line-height: 2;
  color: #fff;
  letter-spacing: 0.04em;
  text-shadow: 0 1px 12px rgba(63, 48, 37, 0.45);
}

/* ==========================================================================
   6. TOP：ABOUT / BUSINESS / 帯 / ESTATE
   ========================================================================== */
.chura-about {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(24px, 3.5vw, 56px);
  align-items: flex-start;
  justify-content: center;
}
.chura-about__head {
  display: flex;
  flex-direction: column;
  gap: clamp(20px, 2.6vw, 34px);
  flex: 0 1 auto;
}
.chura-about__body {
  display: flex;
  flex-direction: column;
  gap: clamp(24px, 3vw, 40px);
  flex: 0 1 640px;
  min-width: 0;
}
.chura-about__body .chura-more { margin-top: clamp(8px, 1.5vw, 20px); }

.chura-band {
  position: relative;
  background: #faf6ef;
}
.chura-band--gray { background: #f8f5f4; }

/* 葉背景の帯（background-attachment:fixed） */
.chura-leaf {
  position: relative;
  background: #f5efe6 url("https://ros-cdn.s3.ap-northeast-1.amazonaws.com/hp/img/ros_keiyaku/28686/bg-leaf.jpg") center center / cover no-repeat fixed;
}
.chura-leaf--top    { padding: clamp(56px, 7vw, 96px) 0 clamp(28px, 3.5vw, 48px); }
.chura-leaf--bottom { padding: clamp(28px, 3.5vw, 48px) 0 clamp(56px, 7vw, 96px); }

/* 事業カード */
.chura-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: clamp(16px, 2.2vw, 32px);
  max-width: 1040px;
  margin: 0 auto;
  width: 100%;
}
.chura-cards--wide {
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: clamp(18px, 2.4vw, 32px);
  max-width: none;
}
.chura-cards--props {
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: clamp(18px, 2.4vw, 36px);
  max-width: none;
}

.chura-card {
  display: flex;
  flex-direction: column;
  gap: 18px;
  background: #fff;
  padding: clamp(12px, 1.2vw, 16px);
  border-radius: 4px;
  box-shadow: none;
  overflow: visible;
  text-decoration: none;
  transition: opacity 0.3s ease;
}
.chura-card:hover {
  opacity: 0.82;
  transform: none;
}
.chura-card--plain {
  background: transparent;
  padding: 0;
  border-radius: 0;
}
.chura-card__img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 4px;
  display: block;
}
.chura-card__img--43 {
  aspect-ratio: 4 / 3;
  border-radius: 10px;
}
.chura-card__body {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 0 6px 10px;
}
.chura-card__body--flush { padding: 0 2px; }
.chura-card__catch {
  margin: 0;
  font-size: clamp(15px, 1.3vw, 17px);
  font-weight: 700;
  color: #3f3025;
  text-align: center;
  letter-spacing: 0.02em;
  line-height: 1.6;
}
.chura-card__line {
  display: block;
  height: 1px;
  background: #ece5df;
}
.chura-card__name {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 10px;
}
.chura-card__no {
  font-family: "Roboto", sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: #2bb7af;
}
.chura-card__label {
  font-size: 15px;
  font-weight: 700;
  color: #3f3025;
}
.chura-card__text {
  margin: 0;
  font-size: 14px;
  line-height: 1.8;
  color: #6d553f;
}
.chura-card__ttl {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.6;
}

/* 3枚サムネイル */
.chura-thumbs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.chura-thumbs img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 3px;
  display: block;
}

/* 不動産：写真に白ボックスが食い込む（意図的なはみ出し。clip しない） */
.chura-estate__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
}
.chura-estate__img {
  flex: 0 1 660px;
  min-width: 0;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: center 60%;
  display: block;
}
.chura-estate__box {
  flex: 0 1 720px;
  min-width: 0;
  background: #fff;
  padding: clamp(24px, 2.6vw, 40px);
  margin-left: clamp(-96px, -5vw, -24px);
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.chura-estate__box .chura-more { margin-top: 8px; }
.chura-nowrap { white-space: nowrap; }

/* ==========================================================================
   7. TOP：NEWS
   ========================================================================== */
.chura-news {
  position: relative;
  max-width: 1400px;
  margin: 0 auto;
  padding: clamp(64px, 8vw, 110px) clamp(16px, 3vw, 32px) 0;
}
.chura-news__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: 26px;
}

.chura-tabs {
  display: flex;
  align-items: flex-end;
  gap: clamp(4px, 1.4vw, 20px);
  flex-wrap: wrap;
  border-bottom: 1px solid #ece5df;
  margin-bottom: 4px;
}
.chura-tabs .tab-nav__item {
  flex: 0 0 auto;
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-align: center;
  padding: 16px 22px;
  border-radius: 8px 8px 0 0;
  border-bottom: none;
  background: transparent;
  color: #6d553f;
  text-decoration: none;
}
.chura-tabs .tab-nav__item:hover { color: #2bb7af; }
.chura-tabs .tab-nav__item.is-active {
  background: #2bb7af;
  color: #fff;
  padding: 16px 30px;
}

.chura-news-list {
  border-top: 1px solid #ece5df;
}
.chura-news-list .news-list__item { border-bottom: 1px solid #ece5df; }
.chura-news-list .news-list__link {
  gap: clamp(12px, 2vw, 28px);
  padding: 20px clamp(12px, 1.6vw, 24px);
  align-items: center;
}
.chura-news-list .news-list__link:hover { background: #fdfcfb; }
.chura-news-list .news-list__date {
  font-family: "Roboto", sans-serif;
  font-size: 12px;
  font-weight: 500;
  color: #99825c;
  letter-spacing: 0.08em;
  min-width: 88px;
}
.chura-news-list .news-list__cat {
  min-width: 0;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: #6d553f;
  background: #faf6ef;
  padding: 6px 16px;
  border-radius: 999px;
  text-align: center;
  line-height: 1.4;
}
.chura-news-list .news-list__title {
  flex: 1 1 240px;
  min-width: 0;
  font-size: 15px;
  font-weight: 500;
  color: #3f3025;
}
.chura-news-list__arrow { flex: 0 0 auto; }

/* ==========================================================================
   8. お問い合わせCTA帯
   ========================================================================== */
.chura-contact {
  position: relative;
  width: 100%;
  margin: clamp(64px, 8vw, 120px) 0 0;
  background: #2bb7af;
}
.chura-contact__inner {
  padding-top: clamp(48px, 6vw, 80px);
  padding-bottom: clamp(48px, 6vw, 80px);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(28px, 4vw, 48px);
}
.chura-contact__head {
  flex: 0 1 240px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.chura-contact__lead {
  margin: 0;
  font-size: 14px;
  line-height: 2;
  color: #effffe;
}
.chura-contact__panel {
  flex: 1 1 520px;
  min-width: 0;
  background: #fff;
  border-radius: 20px;
  padding: clamp(22px, 2.6vw, 32px) clamp(18px, 2.2vw, 28px);
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  justify-content: center;
  gap: clamp(16px, 2vw, 24px);
}
.chura-contact__tel {
  flex: 1 1 140px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}
.chura-contact__tel:hover { opacity: 0.82; }
.chura-contact__tel-head {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
.chura-icon { color: #2bb7af; flex: 0 0 auto; }
.chura-contact__tel-label {
  font-size: clamp(15px, 1.5vw, 18px);
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1.3;
  color: #3f3025;
}
.chura-contact__tel-num {
  font-family: "Roboto", sans-serif;
  font-size: clamp(20px, 1.9vw, 25px);
  font-weight: 700;
  color: #2bb7af;
  letter-spacing: 0.01em;
  line-height: 1.1;
  white-space: nowrap;
}
.chura-contact__tel-note {
  margin-top: -4px;
  font-size: 15px;
  line-height: 1.6;
  color: #6d553f;
  text-align: center;
}
.chura-contact__divider {
  width: 1px;
  align-self: stretch;
  background: #ece5df;
}
.chura-contact__form {
  flex: 1 1 210px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 14px;
}
.chura-contact__form-label {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.chura-contact__form-en {
  font-family: "Ysabeau SC", serif;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1;
  color: #3f3025;
}
.chura-contact__form-ja {
  font-size: 11px;
  letter-spacing: 0.06em;
  color: #99825c;
}

/* ==========================================================================
   9. フッター
   ========================================================================== */
.chura-footer { margin-top: clamp(64px, 9vw, 120px); }
.chura-footer__body {
  background: #f8f5f4;
  border-top: 1px solid #ece5df;
  padding: 0;
}
.chura-footer__inner {
  max-width: 1400px;
  margin: 0 auto;
  padding: clamp(48px, 7vw, 84px) clamp(16px, 3vw, 32px) 32px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: clamp(32px, 4vw, 56px);
}
.chura-footer__col {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.chura-footer__col--info { gap: 22px; }
.chura-footer__logo {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.chura-footer__logo-en {
  font-family: "Ysabeau SC", serif;
  font-size: 12px;
  letter-spacing: 0.22em;
  color: #2bb7af;
}
.chura-footer__logo-ja {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #3f3025;
}
.chura-footer__lead {
  margin: 0;
  font-size: 13px;
  line-height: 2;
  color: #6d553f;
}
.chura-footer__sns {
  font-size: 13px;
  letter-spacing: 0.04em;
  border: 1px solid #d8cec5;
  color: #3f3025;
  padding: 10px 16px;
  border-radius: 3px;
  align-self: flex-start;
  text-decoration: none;
  transition: color 0.3s ease, border-color 0.3s ease;
}
.chura-footer__sns:hover {
  border-color: #2bb7af;
  color: #2bb7af;
  opacity: 1;
}
.chura-badge {
  display: inline-block;
  font-size: 11px;
  letter-spacing: 0.14em;
  color: #fff;
  padding: 3px 9px;
  border-radius: 2px;
  margin-bottom: 10px;
}
.chura-badge--office { background: #6d553f; }
.chura-badge--cafe   { background: #2bb7af; }
.chura-footer__addr {
  margin: 0;
  font-size: 13px;
  line-height: 2;
  color: #3f3025;
}
.chura-footer__tel {
  font-family: "Roboto", sans-serif;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.25;
  display: inline-block;
  color: #3f3025;
}
.chura-footer__tel:hover { color: #2bb7af; }
.chura-footer__label {
  font-family: "Ysabeau SC", serif;
  font-size: 12px;
  letter-spacing: 0.2em;
  color: #2bb7af;
}
.chura-footer__sitemap {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 20px;
}
.chura-footer__sitemap a {
  font-size: 13px;
  color: #3f3025;
  text-decoration: none;
  transition: color 0.3s ease;
}
.chura-footer__sitemap a:hover { color: #2bb7af; opacity: 1; }
.chura-footer__bottom {
  border-top: 1px solid #e7ded7;
  padding: 0;
  text-align: left;
}
.chura-footer__copyright {
  max-width: 1400px;
  margin: 0 auto;
  padding: 18px clamp(16px, 3vw, 32px);
  font-family: "Roboto", sans-serif;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: #99825c;
}

/* ==========================================================================
   10. 下層ページヒーロー
   ========================================================================== */
.chura-hero {
  background: #f8f5f4;
  color: #3f3025;
  text-align: left;
  padding: clamp(28px, 4vw, 44px) 0;
}
.chura-hero .page-hero__content { display: block; }
.chura-hero .chura-hero__inner {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.chura-hero .heading__en {
  display: block;
  font-family: "Ysabeau SC", serif;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #2bb7af;
  line-height: 1.4;
  margin-bottom: 0;
}
.chura-hero .heading__ja {
  margin: 0;
  font-size: clamp(26px, 3.4vw, 40px);
  font-weight: 700;
  letter-spacing: 0.03em;
  color: #3f3025;
  line-height: 1.3;
}
.chura-hero .heading__ja--en {
  font-family: "Ysabeau SC", serif;
  font-size: clamp(28px, 3.8vw, 46px);
  letter-spacing: 0.02em;
  line-height: 1.15;
}

/* ==========================================================================
   11. 定義リスト / 箇条書き / メニュー・STEP行
   ========================================================================== */
.chura-dl {
  margin: 0;
  display: flex;
  flex-direction: column;
  border-top: 1px solid #ddd4cc;
}
.chura-dl__row {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 20px;
  padding: 16px 4px;
  border-bottom: 1px solid #ddd4cc;
}
.chura-dl__row dt {
  flex: 0 0 110px;
  font-size: 14px;
  font-weight: 700;
  color: #99825c;
}
.chura-dl__row dd {
  margin: 0;
  flex: 1 1 200px;
  min-width: 0;
  font-size: 15px;
  line-height: 1.9;
  color: #3f3025;
}
.chura-dl--company {
  margin: 0 auto;
  width: 80%;
  max-width: 900px;
}
.chura-dl--company .chura-dl__row { gap: 4px 28px; padding: 18px 4px; }
.chura-dl--company .chura-dl__row dt { flex: 0 0 150px; }
.chura-dl--company .chura-dl__row dd { flex: 1 1 320px; line-height: 1.8; }

.chura-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  border-top: 1px solid #ddd4cc;
}
.chura-list li {
  border-bottom: 1px solid #ddd4cc;
  padding: 15px 4px;
  font-size: 15px;
  line-height: 1.8;
}

.chura-narrow {
  width: 80%;
  max-width: 900px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: clamp(20px, 2.4vw, 32px);
}
.chura-menu__head {
  display: flex;
  align-items: baseline;
  gap: 14px;
  flex-wrap: wrap;
}
.chura-menu__head-en {
  font-family: "Ysabeau SC", serif;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #3f3025;
}
.chura-menu__note {
  font-size: 13px;
  color: #99825c;
}

.chura-row {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(14px, 2vw, 28px);
  align-items: flex-start;
  border-top: 1px solid #ddd4cc;
  padding-top: 18px;
}
.chura-row__label {
  flex: 0 0 150px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.chura-row__label-en {
  font-family: "Ysabeau SC", serif;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1.2;
  color: #2bb7af;
}
.chura-row__label-en .chura-num {
  font-family: "Roboto", sans-serif;
  font-weight: 700;
}
.chura-row__label-ja {
  font-size: 13px;
  color: #99825c;
}
.chura-row__body {
  flex: 1 1 320px;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.chura-row__body--gap { gap: 14px; }
.chura-row__text {
  margin: 0;
  font-size: 15px;
  line-height: 1.8;
  color: #3f3025;
}
/* 横並び(row)の直下にある場合のみ幅を持たせる。縦積み(column)内では flex-basis が高さになるため付けない */
.chura-row > .chura-row__text {
  flex: 1 1 320px;
  min-width: 0;
}
.chura-note {
  font-size: 13px;
  color: #99825c;
}

/* ドットリーダー：元データは radial-gradient の丸ドット（6px間隔・#b9aca0） */
.chura-row .dot-leader {
  align-items: center;
  gap: 10px;
  padding: 11px 0;
}
.chura-row .dot-leader__start {
  flex: 0 1 auto;
  overflow: visible;
  font-size: 15px;
  color: #3f3025;
}
.chura-row .dot-leader__start::after { content: none; }
.chura-row .dot-leader__fill {
  flex: 1 1 auto;
  min-width: 24px;
  height: 2px;
  background-image: radial-gradient(circle, #b9aca0 1px, transparent 1px);
  background-size: 6px 2px;
  background-repeat: repeat-x;
  background-position: 0 center;
}
.chura-row .dot-leader__end {
  flex: 0 0 auto;
  margin-left: 0;
  font-family: "Roboto", sans-serif;
  font-size: 15px;
  font-weight: 500;
  color: #3f3025;
}

/* 焙煎度8段階スウォッチ */
.chura-roast {
  display: flex;
  gap: 4px;
}
.chura-roast span {
  flex: 1;
  height: 8px;
  border-radius: 1px;
}
.chura-roast-1 { background: #e8d9c3; }
.chura-roast-2 { background: #dcc4a5; }
.chura-roast-3 { background: #cbab84; }
.chura-roast-4 { background: #b79b6c; }
.chura-roast-5 { background: #9c7d52; }
.chura-roast-6 { background: #7f6240; }
.chura-roast-7 { background: #63492e; }
.chura-roast-8 { background: #43301e; }

/* 地図 */
.embed .chura-map {
  width: 100%;
  height: clamp(280px, 34vw, 400px);
  border-radius: 10px;
}
.chura-map-block {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* ==========================================================================
   12. ブログ（一覧 / 詳細）
   ========================================================================== */
.chura-blog {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 3fr);
  gap: clamp(32px, 4vw, 64px);
  align-items: start;
  max-width: 1400px;
  margin: 0 auto;
  padding: clamp(40px, 6vw, 80px) clamp(16px, 3vw, 32px);
}
.chura-blog .main-side__main {
  width: auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: clamp(20px, 3vw, 32px);
}
.chura-blog .main-side__side {
  width: auto;
  min-width: 0;
  position: static;
  margin-top: 0;
  display: flex;
  flex-direction: column;
  gap: clamp(24px, 3vw, 40px);
}

.chura-filter {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.chura-filter a {
  font-size: 13px;
  border: 1px solid #ddd4cc;
  color: #3f3025;
  padding: 9px 20px;
  border-radius: 2px;
  text-decoration: none;
  transition: color 0.3s ease, border-color 0.3s ease;
}
.chura-filter a:hover {
  border-color: #2bb7af;
  color: #2bb7af;
  opacity: 1;
}
.chura-filter a.is-current {
  border-color: #2bb7af;
  background: #2bb7af;
  color: #fff;
}
.chura-filter a.is-current:hover { color: #fff; }

.chura-entries {
  display: flex;
  flex-direction: column;
  border-top: 1px solid #ece5df;
}
.chura-entry {
  display: flex;
  gap: clamp(14px, 2vw, 26px);
  padding: 22px 4px;
  border-bottom: 1px solid #ece5df;
  text-decoration: none;
  align-items: center;
  flex-wrap: wrap;
  transition: background 0.3s ease;
}
.chura-entry:hover { background: #faf8f7; opacity: 1; }
.chura-entry__thumb {
  width: 110px;
  height: 80px;
  flex: 0 0 auto;
  display: flex;
  border-radius: 2px;
  object-fit: cover;
}
.chura-entry__body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1 1 240px;
  min-width: 0;
}
.chura-entry__meta {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
}
.chura-entry__date {
  font-family: "Roboto", sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: #99825c;
  letter-spacing: 0.08em;
}
.chura-entry__cat {
  font-size: 11px;
  letter-spacing: 0.08em;
  color: #2bb7af;
  border: 1px solid #b3e2de;
  padding: 4px 12px;
  border-radius: 2px;
}
.chura-entry__title {
  font-size: 16px;
  font-weight: 500;
  color: #3f3025;
  line-height: 1.7;
}

/* ページャ
   中身はブログCMSの <%page_link%> 出力。仕様上「数字ページャは出力されず、
   .pages > .page_prev / .page_next の前後ボタン2つ」になる（他案件2件で確認済み）。
   そのためデザイン案の連番（1 2 3 次へ→）ではなく、同じ見た目のボタンを前後2つで組む。 */
.chura-pager {
  margin: 8px 0 0;
}
.chura-pager .pages {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
}
.chura-pager .page_prev a,
.chura-pager .page_next a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  padding: 0 24px;
  border: 1px solid #ddd4cc;
  border-radius: 2px;
  color: #3f3025;
  font-size: 13px;
  text-decoration: none;
  transition: color 0.3s ease, border-color 0.3s ease;
}
.chura-pager .page_prev a:hover,
.chura-pager .page_next a:hover {
  border-color: #2bb7af;
  color: #2bb7af;
  opacity: 1;
}
/* 1ページに収まると <div class="pages"></div> だけが返る。nav の margin ごと消す */
.chura-pager .pages:empty { display: none; }
.chura-pager:has(.pages:empty) { display: none; }

/* サイドバー */
.chura-side__block {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.chura-side__title {
  font-family: "Ysabeau SC", serif;
  font-size: 12px;
  letter-spacing: 0.2em;
  color: #2bb7af;
  border-bottom: 1px solid #ece5df;
  padding-bottom: 10px;
}
.chura-side__list {
  display: flex;
  flex-direction: column;
}
.chura-side__list a {
  font-size: 14px;
  color: #3f3025;
  padding: 12px 0;
  border-bottom: 1px dotted #e3dad2;
  text-decoration: none;
  transition: color 0.3s ease;
}
.chura-side__list a:hover { color: #2bb7af; opacity: 1; }
.chura-side__list--archive a { padding: 11px 0; }

/* 記事詳細 */
.chura-article {
  display: flex;
  flex-direction: column;
  gap: clamp(20px, 3vw, 32px);
  min-width: 0;
}
.chura-article__meta {
  display: flex;
  gap: 14px;
  align-items: center;
  flex-wrap: wrap;
}
.chura-article__title {
  margin: 0;
  font-size: clamp(23px, 2.8vw, 34px);
  line-height: 1.65;
  font-weight: 700;
}
/* 記事本文（ブログCMS 詳細 c=entry_body の出力）
   出力は <div style="overflow:hidden">テキスト<br><img>…</div> の1ブロック。
   段落は <p> ではなく <br> で区切られるため、行送りはラッパー側に効かせる。
   ※デザイン案にあったアイキャッチ（.chura-article__hero）は削除した。
     記事画像は本文HTMLに含まれるので、image_url で別途出すと同じ写真が2回並ぶため。 */
.chura-article__body {
  font-size: 16px;
  line-height: 2.35;
}
.chura-article__body p {
  margin: 0;
  font-size: 16px;
  line-height: 2.35;
}
.chura-article__body p + p {
  margin-top: 24px;
}
.chura-article__body h2 {
  margin: 0;
  font-size: 19px;
  font-weight: 700;
  line-height: 1.7;
  padding-bottom: 10px;
  border-bottom: 1px solid #ece5df;
}
.chura-article__body img {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: 3px;
  transition: opacity 0.3s ease;
}
.chura-article__body a:hover img {
  opacity: 0.82;
}
.chura-article__notfound {
  margin: 0;
  padding: clamp(32px, 5vw, 64px) 0;
  text-align: center;
  font-size: 15px;
  line-height: 2;
  color: #6d553f;
}
.chura-article__foot {
  display: flex;
  justify-content: center;
  margin-top: 8px;
}
.chura-back {
  display: inline-block;
  border: 1px solid #3f3025;
  color: #3f3025;
  padding: 15px 40px;
  border-radius: 3px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-decoration: none;
  transition: color 0.3s ease, border-color 0.3s ease;
}
.chura-back:hover {
  border-color: #2bb7af;
  color: #2bb7af;
  opacity: 1;
}

/* ==========================================================================
   13. フォーム / プライバシーポリシー
   ========================================================================== */
.chura-contact-box {
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
  background: #fff;
  border: 1px solid #ece5df;
  border-radius: 20px;
  padding: clamp(22px, 2.6vw, 32px) clamp(18px, 2.2vw, 28px);
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  justify-content: center;
  gap: clamp(16px, 2vw, 24px);
}
.chura-contact-box .chura-contact__tel { flex: 1 1 200px; }

/* --------------------------------------------------------------------------
   CMSお問い合わせフォーム（cms_id=7 / design_pattern=1）
   出力構造： .form-contents.form-pattern-1 > form > dl > dt/dd × 7組
             1.お問い合わせ種別(select) 2.お名前 3.フリガナ 4.会社名
             5.メールアドレス 6.電話番号 7.お問い合わせ内容(textarea)

   ■ 詳細度についての注意
   CMSは実行時に <link href=".../css/cms/mail-form.css"> を body 内へ注入するため、
   同じ詳細度では mail-form.css が後勝ちになる。
   そのため全セレクタを .chura-cms-form で包み、CMS側より必ず高い詳細度にしている。
   （例：CMS側 .form-pattern-1 dl dt:not(.pattern-exclusion) span.required::before = (0,3,4)
     　　当方 .chura-cms-form .form-contents.form-pattern-1 form dl dt:not(...) span.required::before = (0,5,4)）
   -------------------------------------------------------------------------- */
.chura-cms-form {
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
}

/* 外枠：CMS既定の padding:35px 30px / 背景を解除 */
.chura-cms-form .form-contents.form-pattern-1 {
  padding: 0;
  margin: 0;
  background: transparent;
}

/* dt/dd：CMS既定の 280px 左寄せ2カラム（float）を解除して縦積みに戻す */
.chura-cms-form .form-contents.form-pattern-1 form dl {
  margin: 0 0 22px;
}
.chura-cms-form .form-contents.form-pattern-1 form dl dt:not(.pattern-exclusion) {
  float: none;
  width: auto;
  padding-top: 0;
  margin: 0 0 9px;
  text-align: left;
  font-size: 14px;
  font-weight: 700;
  color: #3f3025;
  line-height: normal;
}
.chura-cms-form .form-contents.form-pattern-1 form dl dd:not(.pattern-exclusion) {
  padding: 0;
  margin: 0 0 13px;
  border-bottom: none;
  line-height: normal;
}
.chura-cms-form .form-contents.form-pattern-1 form dl dd:not(.pattern-exclusion):last-of-type {
  margin-bottom: 0;
}

/* 必須／任意バッジ：CMSは ::before（ラベル前）。デザインはラベル後ろなので ::after に付け替える */
.chura-cms-form .form-contents.form-pattern-1 form dl dt:not(.pattern-exclusion) span.required::before,
.chura-cms-form .form-contents.form-pattern-1 form dl dt:not(.pattern-exclusion) span.optional::before {
  content: none;
}
.chura-cms-form .form-contents.form-pattern-1 form dl dt:not(.pattern-exclusion) span.required::after,
.chura-cms-form .form-contents.form-pattern-1 form dl dt:not(.pattern-exclusion) span.optional::after {
  display: inline-block;
  margin-left: 8px;
  padding: 3px 8px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.06em;
  line-height: normal;
  border-radius: 999px;
  position: static;
  top: auto;
  vertical-align: middle;
}
.chura-cms-form .form-contents.form-pattern-1 form dl dt:not(.pattern-exclusion) span.required::after {
  content: "必須";
  color: #fff;
  background: #c05a4a;
}
.chura-cms-form .form-contents.form-pattern-1 form dl dt:not(.pattern-exclusion) span.optional::after {
  content: "任意";
  color: #6d553f;
  background: #faf6ef;
}

/* 入力欄：元データ padding14 / border 1px #ddd4cc / radius3 / 15px / lh1.8 */
.chura-cms-form .form-contents.form-pattern-1 dd:not(.pattern-exclusion) .textarea,
.chura-cms-form .form-contents.form-pattern-1 dd:not(.pattern-exclusion) .textarea-serect {
  width: 100%;
  height: auto;
  padding: 14px;
  border: 1px solid #ddd4cc;
  border-radius: 3px;
  font-family: inherit;
  font-size: 15px;
  line-height: 1.8;
  color: #3f3025;
  background: #fff;
  transition: border-color 0.3s ease;
}
.chura-cms-form .form-contents.form-pattern-1 dd:not(.pattern-exclusion) input.textarea {
  height: auto;
}
.chura-cms-form .form-contents.form-pattern-1 dd:not(.pattern-exclusion) textarea.textarea {
  /* 元データは rows=7（14px×2 + 15px×1.8×7行 + border2px = 219px）。CMSは rows=10 のため実数で合わせる */
  height: 219px;
  resize: vertical;
}
.chura-cms-form .form-contents.form-pattern-1 dd:not(.pattern-exclusion) .textarea:focus,
.chura-cms-form .form-contents.form-pattern-1 dd:not(.pattern-exclusion) .textarea-serect:focus {
  border-color: #2bb7af;
  outline: none;
}
.chura-cms-form .form-contents.form-pattern-1 dd:not(.pattern-exclusion) .textarea::placeholder {
  color: #b9aca0;
}

/* 送信ボタン：元データのピル（bg #2bb7af / radius999 / padding 18px 56px / 15px 700 ls.04em） */
.chura-cms-form .form-contents.form-pattern-1 .submit-btn,
.chura-cms-form .form-contents.form-pattern-1 :not(.pattern-exclusion) button.submit-btn {
  display: block;
  width: -moz-fit-content;
  width: fit-content;
  max-width: 100%;
  margin: 0 auto;
  padding: 18px 56px;
  background: #2bb7af;
  color: #fff;
  border: 0;
  border-radius: 999px;
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: background 0.3s ease;
}
.chura-cms-form .form-contents.form-pattern-1 .submit-btn:hover,
.chura-cms-form .form-contents.form-pattern-1 :not(.pattern-exclusion) button.submit-btn:hover {
  background: #1f8f89;
  color: #fff;
  opacity: 1;
}
/* 元データにアイコンは無いのでCMSの封筒マスクを消す */
.chura-cms-form .form-contents.form-pattern-1 .submit-btn::before {
  content: none;
}

/* エラーメッセージ */
.chura-cms-form .form-contents.form-pattern-1 .form-err-msg {
  margin: 0 0 22px;
  padding: 16px 20px;
  background: #fdf2f0;
  border: 1px solid #c05a4a;
  border-radius: 3px;
  color: #c05a4a;
  font-size: 14px;
  line-height: 1.8;
}
.chura-cms-form .form-contents.form-pattern-1 .form-err-msg ul {
  list-style: disc inside;
  margin: 0;
  padding: 0;
}

/* 送信完了メッセージ */
.chura-cms-form .form-contents.form-pattern-1 .form-thanks-msg {
  padding: clamp(24px, 3vw, 40px);
  background: #faf6ef;
  border: 1px solid #ece5df;
  border-radius: 4px;
}
.chura-cms-form .form-contents.form-pattern-1 .form-thanks-msg p.thanks-msg-area {
  margin: 0;
  text-align: center;
  font-size: 15px;
  line-height: 2;
  color: #3f3025;
}
.chura-cms-form .form-contents.form-pattern-1 .form-thanks-msg .back-home-btn {
  width: auto;
  margin: 24px auto 0;
  display: flex;
  justify-content: center;
}
.chura-cms-form .form-contents.form-pattern-1 .form-thanks-msg .back-home-btn a {
  display: inline-block;
  width: auto;
  padding: 15px 40px;
  background: #2bb7af;
  border: 0;
  border-radius: 999px;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-align: center;
}
.chura-cms-form .form-contents.form-pattern-1 .form-thanks-msg .back-home-btn a:hover {
  background: #1f8f89;
  color: #fff;
  opacity: 1;
}

/* 768px以上：元データの「種別=全幅 / 名前・フリガナ・会社名=3列 / メール・電話=2列 / 内容=全幅」を再現。
   CMSは dt/dd がフラットに並ぶため、項目順（7組）を前提に grid で明示配置する。
   ※CMS側で項目を増減した場合はこの配置指定の見直しが必要（8組目以降は全幅にフォールバック） */
@media (min-width: 768px) {
  .chura-cms-form .form-contents.form-pattern-1 form dl {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: 22px;
    row-gap: 9px;
  }
  /* 1. お問い合わせ種別（全幅） */
  .chura-cms-form .form-contents.form-pattern-1 form dl dt:nth-of-type(1) { grid-area: 1 / 1 / 2 / 4; }
  .chura-cms-form .form-contents.form-pattern-1 form dl dd:nth-of-type(1) { grid-area: 2 / 1 / 3 / 4; }
  /* 2-4. お名前 / フリガナ / 会社名（3列） */
  .chura-cms-form .form-contents.form-pattern-1 form dl dt:nth-of-type(2) { grid-area: 3 / 1 / 4 / 2; }
  .chura-cms-form .form-contents.form-pattern-1 form dl dd:nth-of-type(2) { grid-area: 4 / 1 / 5 / 2; }
  .chura-cms-form .form-contents.form-pattern-1 form dl dt:nth-of-type(3) { grid-area: 3 / 2 / 4 / 3; }
  .chura-cms-form .form-contents.form-pattern-1 form dl dd:nth-of-type(3) { grid-area: 4 / 2 / 5 / 3; }
  .chura-cms-form .form-contents.form-pattern-1 form dl dt:nth-of-type(4) { grid-area: 3 / 3 / 4 / 4; }
  .chura-cms-form .form-contents.form-pattern-1 form dl dd:nth-of-type(4) { grid-area: 4 / 3 / 5 / 4; }
  /* 5-6. メールアドレス / 電話番号（2列） */
  .chura-cms-form .form-contents.form-pattern-1 form dl dt:nth-of-type(5) { grid-area: 5 / 1 / 6 / 2; }
  .chura-cms-form .form-contents.form-pattern-1 form dl dd:nth-of-type(5) { grid-area: 6 / 1 / 7 / 2; }
  .chura-cms-form .form-contents.form-pattern-1 form dl dt:nth-of-type(6) { grid-area: 5 / 2 / 6 / 3; }
  .chura-cms-form .form-contents.form-pattern-1 form dl dd:nth-of-type(6) { grid-area: 6 / 2 / 7 / 3; }
  /* 7. お問い合わせ内容（全幅） */
  .chura-cms-form .form-contents.form-pattern-1 form dl dt:nth-of-type(7) { grid-area: 7 / 1 / 8 / 4; }
  .chura-cms-form .form-contents.form-pattern-1 form dl dd:nth-of-type(7) { grid-area: 8 / 1 / 9 / 4; }
  /* 8組目以降が追加された場合のフォールバック */
  .chura-cms-form .form-contents.form-pattern-1 form dl dt:nth-of-type(n+8),
  .chura-cms-form .form-contents.form-pattern-1 form dl dd:nth-of-type(n+8) { grid-column: 1 / -1; }
}

.chura-privacy {
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
  background: #faf6ef;
  border-radius: 4px;
  padding: 18px 22px;
}
.chura-privacy__summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}
.chura-privacy__summary::-webkit-details-marker { display: none; }
.chura-privacy__summary-body {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.chura-privacy__en {
  font-family: "Ysabeau SC", serif;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #2bb7af;
}
.chura-privacy__ja {
  font-size: 14px;
  font-weight: 700;
  color: #3f3025;
}
.chura-privacy__toggle {
  flex: 0 0 auto;
  font-family: "Roboto", sans-serif;
  font-size: 13px;
  font-weight: 500;
  color: #99825c;
}
.chura-privacy[open] .chura-privacy__toggle::after { content: "閉じる －"; }
.chura-privacy__toggle::after { content: "開く ＋"; }
.chura-privacy__body {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding-top: 18px;
  margin-top: 16px;
  border-top: 1px solid #ddd4cc;
}
.chura-privacy__item {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.chura-privacy__item-ttl {
  font-size: 14px;
  font-weight: 700;
  color: #3f3025;
  line-height: 1.7;
}
.chura-privacy__txt {
  margin: 0;
  font-size: 14px;
  line-height: 1.8;
  color: #6d553f;
}

/* ==========================================================================
   14. AOS（初期状態のちらつき防止）
   ========================================================================== */
[data-aos] { pointer-events: auto; }

/* ==========================================================================
   15. レスポンシブ
   ========================================================================== */

/* PC以下（1100px）：PCナビ・右側エリアはmain.cssで非表示。ヘッダー高さを詰める */
@media (max-width: 1100px) {
  .chura-header__inner {
    padding: 12px 0;
    justify-content: flex-start;
  }
}

/* タブレット以下（896px） */
@media (max-width: 896px) {
  .chura-blog {
    grid-template-columns: 1fr;
  }
  .chura-estate__box {
    margin-left: 0;
    margin-top: -24px;
  }
  .chura-nowrap {
    white-space: normal;
  }
  .chura-narrow,
  .chura-dl--company {
    width: 100%;
  }
  /* 背景固定はモバイルSafariで破綻するためスクロール追従に戻す */
  .chura-leaf {
    background-attachment: scroll;
  }
}

/* スマホ（639px） */
@media (max-width: 639px) {
  .chura-mv__stage,
  #slideshow {
    height: 78vh;
    min-height: 460px;
  }
  .chura-thumbs {
    gap: 8px;
  }
  .chura-contact__divider {
    display: none;
  }
  .chura-contact__panel,
  .chura-contact-box {
    border-radius: 12px;
  }
  .chura-dl__row dt,
  .chura-dl--company .chura-dl__row dt {
    flex: 0 0 100%;
  }
  .chura-row__label {
    flex: 0 0 100%;
    flex-direction: row;
    align-items: baseline;
    gap: 10px;
  }
  .chura-entry__thumb {
    width: 88px;
    height: 64px;
  }
  .chura-footer__sitemap {
    grid-template-columns: 1fr;
  }
  .chura-privacy {
    padding: 16px;
  }
  .chura-cms-form .form-contents.form-pattern-1 .submit-btn {
    width: 100%;
    padding: 16px 36px;
  }
}

/* ==========================================================================
   16. 追補
   ========================================================================== */
#slideshow .main_slider__inner {
  width: 100%;
  height: 100%;
}

/* EN見出しの下に続く小見出し（元データ: clamp(15px,1.5vw,18px)/700/lh1.6） */
.chura-subttl {
  margin: 0;
  font-size: clamp(15px, 1.5vw, 18px);
  font-weight: 700;
  line-height: 1.6;
  color: #3f3025;
}

/* ==========================================================================
   17. line-height 厳密一致
   元データ: body に line-height 指定なし（= normal）。
   main.css の既定 line-height を、元データが指定していない箇所で打ち消す。
   ========================================================================== */
.chura-nav .header__nav-en,
.chura-nav .header__nav-ja,
.chura-hd .heading__ja,
.chura-card__catch,
.chura-card__ttl,
.chura-news-list .news-list__cat,
.chura-hero .heading__en,
.chura-hero .heading__ja {
  line-height: normal;
}

/* 元データが明示している行高 */
.chura-hd--lh160 .heading__ja { line-height: 1.6; }
.chura-hd--lh165 .heading__ja { line-height: 1.65; }
.chura-card__catch--lh16 { line-height: 1.6; }

/* 元データ: BUSINESS 帯の内側 gap は clamp(28px,4vw,48px) */
.chura-stack--lg { gap: clamp(28px, 4vw, 48px); }

/* ==========================================================================
   18. カード派生 / セクション幅の追補
   ========================================================================== */
/* 元データ: RECOMMEND カード = 枠なし・gap16・img/h3/p のフラット構成 */
.chura-card--plain {
  gap: 16px;
}
/* 元データ: 取扱物件カード = 枠なし・gap18・body(gap14 / padding:0 2px) 構成 */
.chura-card--bare {
  background: transparent;
  padding: 0;
  border-radius: 0;
}
.chura-card--bare:hover,
.chura-card--plain:hover { opacity: 1; }

.chura-2col--top { align-items: start; }

/* 元データ: cafe の店舗情報帯のみ width:96%（左右2%インセット） */
.chura-shopinfo {
  width: 96%;
  margin: 0 auto;
}

/* 不動産ページ：contact リンク横の電話（元データ: Roboto 22px 700 #2bb7af / lh1.1） */
.chura-estate__tel {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}
.chura-estate__tel-num {
  font-family: "Roboto", sans-serif;
  font-size: 22px;
  font-weight: 700;
  color: #2bb7af;
  line-height: 1.1;
}

/* 会社概要ページ CONTACT（元データ: padding-bottom clamp(28px,4vw,52px) / scroll-margin-top 20px） */
.chura-sec--pb-sm { padding-bottom: clamp(28px, 4vw, 52px); }
.chura-contact-sec { scroll-margin-top: 20px; }
.chura-contact-sec__lead {
  margin: 6px 0 0;
  font-size: 15px;
  line-height: 1.8;
  color: #6d553f;
}

/* 地図：ラッパー側にも高さを持たせ、main.css の .embed iframe{height:100%} と噛み合わせる */
.chura-map-block .embed { height: clamp(280px, 34vw, 400px); }
.chura-map-block .embed .chura-map { height: 100%; }

/* 見出しEN→JA の gap（元データが親flexのgapで決めている箇所を実数で合わせる）
   TOP カフェ/コーヒー帯 = 22px ／ TOP CONTACT帯 = 12px */
.chura-hd--gap22 { gap: 22px; }
.chura-hd--gap12 { gap: 12px; }

/* --------------------------------------------------------------------------
   ページトップボタン
   <button> のブラウザ既定スタイル（グレー背景・枠線・padding）を打ち消し、
   丸ボタンだけが見えるようにする。影も黒ではなくメインカラーベースにする。
   -------------------------------------------------------------------------- */
.page-top {
  padding: 0;
  border: 0;
  background: transparent;
  -webkit-appearance: none;
  appearance: none;
  line-height: 0;
  cursor: pointer;
}
.page-top:focus-visible {
  outline: 2px solid #2bb7af;
  outline-offset: 4px;
}
.page-top__link {
  box-shadow: 0 4px 12px rgba(43, 183, 175, 0.28);
}

/* 新着情報タブ：<button> 化に伴う既定スタイルの打ち消しと、該当記事なし時の表示 */
.chura-tabs .tab-nav__item {
  border: 0;
  -webkit-appearance: none;
  appearance: none;
}

/* --------------------------------------------------------------------------
   ブログCMS 出力対応
   CMSは <span id="...-area"> の innerHTML を差し替える仕様のため、
   その span がレイアウト（flex/gap・ボーダー）に割り込まないよう display:contents にする。
   -------------------------------------------------------------------------- */
.chura-cms-area {
  display: contents;
}

/* カテゴリ未設定の記事でバッジが空のまま出るのを防ぐ */
.news-list__cat:empty,
.chura-entry__cat:empty {
  display: none;
}

/* <%page_link%> が空（1ページに収まる）のとき nav ごと消す
   ※テンプレート側の <nav ...><%page_link%></nav> は改行・スペースを入れないこと */
.chura-pager:empty {
  display: none;
}

/* 記事一覧サムネイル：<if_image> は img、<if_no_image> はプレースホルダー */
.chura-entry__thumb--none {
  background: #e6ded2;
  color: #a4907a;
  font-family: "Ysabeau SC", serif;
  font-size: 11px;
  letter-spacing: 0.12em;
  align-items: center;
  justify-content: center;
}

/* 記事0件のカテゴリ用フォールバック。
   CMSが記事を差し込んだら消える（:has() 未対応ブラウザでは常に非表示＝害なし） */
.chura-news-empty {
  display: none;
  margin: 0;
  padding: 20px clamp(12px, 1.6vw, 24px);
  font-size: 15px;
  color: #99825c;
}

/* 月別アーカイブ（CMS出力）
   CMSは <ul><li><a> をクラス無しで返すため、要素セレクタで
   .chura-side__list a と同じ見た目に揃える */
.chura-side__list--cms ul {
  display: flex;
  flex-direction: column;
  list-style: none;
  margin: 0;
  padding: 0;
}
.chura-side__list--cms a {
  display: block;
  font-size: 14px;
  color: #3f3025;
  padding: 11px 0;
  border-bottom: 1px dotted #e3dad2;
  text-decoration: none;
  transition: color 0.3s ease;
}
.chura-side__list--cms a:hover {
  color: #2bb7af;
  opacity: 1;
}

/* 記事0件のときだけメッセージを出す（判定は js/common.js の CMS描画後フック） */
.is-cms-empty > .chura-news-empty,
.is-cms-empty .chura-news-empty {
  display: block;
}
.is-cms-empty .chura-entries,
.is-cms-empty .chura-pager {
  display: none;
}

/* --------------------------------------------------------------------------
   SPナビ：日本語を左・英語を右に入れ替え、右端の矢印アイコンとの間を空ける
   （main.css は 英語(margin-right:auto)→日本語 の順で、矢印が文字に密着する）
   -------------------------------------------------------------------------- */
.chura-sp-nav .sp-nav__link {
  justify-content: flex-start;
  gap: 14px;
}
.chura-sp-nav__ja {
  margin-right: auto;
}
.chura-sp-nav .sp-nav__en {
  margin-right: 0;
  padding-left: 0;
}

/* ==========================================================================
   19. ロゴ画像 / メニュー写真 / 公式LINE 導線
   ========================================================================== */

/* -- ヘッダーのちゅら島ロゴ（画像のみ）
   main.css の .header__logo img（40px / SP 30px）より詳細度を上げて高さを指定する */
.chura-logo .chura-logo__mark {
  height: 52px;
  width: auto;
  display: block;
  flex: 0 0 auto;
}
@media (max-width: 639px) {
  .chura-logo .chura-logo__mark { height: 38px; }
}

/* -- GREEN&CAFE のシンボルマーク（カフェ文脈の見出し上に置く） */
.chura-mark {
  width: 64px;
  height: auto;
  display: block;
  align-self: flex-start;
}
/* 葉の背景帯の上ではマークが沈むため、白い台座を敷く */
.chura-mark--plate {
  width: 68px;
  background: #fff;
  padding: 8px;
  border-radius: 6px;
  box-sizing: content-box;
}

/* -- メニューの時間帯写真（MORNING / LUNCH / CAFE TIME） */
.chura-menu-thumbs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(10px, 1.6vw, 16px);
}
.chura-menu-thumb {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.chura-menu-thumb img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 6px;
  display: block;
}
.chura-menu-thumb figcaption {
  font-size: 12px;
  line-height: 1.6;
  letter-spacing: 0.02em;
  color: #99825c;
}

/* -- メニュー行の注記（※上記すべてドリンク付き） */
.chura-row__note {
  margin: 10px 0 0;
}

/* -- 公式LINEボタン */
.chura-line {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: #06c755;
  color: #fff;
  padding: 13px 22px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1.2;
  text-decoration: none;
  align-self: flex-start;
  transition: background 0.3s ease;
}
.chura-line:hover {
  background: #05a948;
  color: #fff;
  opacity: 1;
}
.chura-line__icon { flex: 0 0 auto; }
.chura-line--sm {
  padding: 10px 16px;
  font-size: 13px;
  letter-spacing: 0.02em;
}
.chura-line--block {
  width: 100%;
  align-self: stretch;
}

/* カフェページ 店舗情報：dl の下にLINE導線 */
.chura-shopinfo__line {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}

/* お問い合わせパネル：カフェの電話とLINEを1カラムにまとめる
   （.chura-contact__tel が <a> のため、LINEボタンは入れ子にできず兄弟で並べる） */
.chura-contact__cafe {
  flex: 1 1 140px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}
.chura-contact__cafe .chura-contact__tel {
  flex: 0 0 auto;
  width: 100%;
}
.chura-contact__cafe .chura-line { align-self: center; }

/* フッター1カラム目：InstagramとLINEを並べる */
.chura-footer__sns-group {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}

@media (max-width: 639px) {
  .chura-menu-thumbs {
    grid-template-columns: 1fr 1fr;
  }
  .chura-menu-thumb:last-child {
    grid-column: span 2;
  }
  .chura-menu-thumb:last-child img {
    aspect-ratio: 16 / 9;
  }
}

/* 下層ページヒーロー内のマークは見出しとの間を少し空ける */
.chura-hero .chura-mark { margin-bottom: 6px; }

/* マークを見出しの左に並べる（下に続く本文・サムネの位置は変えない） */
.chura-hd-row {
  display: flex;
  align-items: center;
  gap: clamp(14px, 1.6vw, 20px);
}
.chura-hd-row .chura-mark {
  align-self: center;
  flex: 0 0 auto;
}