/*
 * ======================================
 * 新垣薬局（沖縄県糸満市）サイト固有CSS
 * 追加クラス一覧（共通SCSS取り込み検討用）
 * ======================================
 *
 * ■ 共通パーツ
 * .ary-container           - .container に左右24pxのpaddingを足した内側幅（デザイン実測1152px）
 * .ary-reveal              - スクロールイン演出（js/common.js が .is-visible を付与）
 * .ary-lead                - セクションのリード文（18px / lh1.9 / #4A5344）
 * .ary-shead               - セクション見出し（日本語1段・中央／アイコン無し）
 * .ary-shead--sub          - 下層ページ用の一段小さい見出し（上限38px）
 * .ary-btn                 - 白地・緑枠pill＋右に緑丸矢印のボタン
 * .ary-btn--solid          - 緑ベタ塗り版 / .ary-btn--sm 小サイズ版
 * .ary-btn__circle         - ボタン右端の丸アイコン / .ary-btn__icon 前置アイコン
 * .ary-badge-check         - 「要確認」の黄色pillバッジ
 * .ary-photo-note          - 写真差し替え待ちの点線プレースホルダ（--sm は高さ200px版）
 * .ary-divider             - セクション間の仕切り（両端フェードのヘアライン＋中央に緑の角丸バー）
 *
 * ■ ヘッダー / フッター
 * .ary-header              - position:sticky 型ヘッダー（共通 header-bar は fixed のため未使用）
 * .ary-header__inner       - 高さ可変・折り返し可の内側（18px 24px）
 * .ary-logo(__icon/__name) - プラスマーク＋店名のロゴ（--footer はフッター用の色）
 * .ary-nav(__item/__ja)    - 日本語1段のPCナビ（ホバーは色変化のみ）
 * .ary-header__tels/__tel  - 2店舗の電話番号を縦積みするヘッダー右エリア
 * .ary-sp-nav__*           - SPナビ下部の電話ボタン
 * .ary-footer__*           - 白に近い淡緑(#F7FBF3)地のフッター（ロゴ行＋3カラム＋コピーライト行）
 *                            3カラム目は .ary-footer__navcol（見出し「メニュー」＋ナビ）
 * .ary-spbar__*            - SP固定バーの2行ラベル
 *
 * ■ TOP
 * .ary-mv__*               - 右58%に写真＋左へマスクフェードするMV（波SVG・海・葉の装飾込み）
 * .ary-topnews__*          - 緑ラベル横並びのお知らせカード（埋め込みCMS）
 * .ary-mission__*          - 左右に写真がはみ出す角丸ボックスの理念セクション
 * .ary-service-nav__*      - 丸アイコン＋名称のサービス一覧（__grid/__item/__icon/__label）
 * .ary-shops/.ary-shopcard__* - 店舗カード（写真＋左下ラベル＋情報行）
 * .ary-guide__*            - 緑ベタのFAQ/お問い合わせ導線（背景画像なし）
 *
 * ■ 下層ページ
 * .ary-hero__*             - 中央揃え・白抜き見出しのページ見出し帯（濃緑グラデ＋円の装飾）
 * .ary-page-lead           - ページ冒頭のリード段落
 * .ary-shopinfo__*         - about：店舗紹介（写真＋情報の2カラム）
 * .ary-mapbadge(__icon)    - 写真右下に重ねるGoogleマップリンクのpillバッジ（丸背景アイコン付き）
 * .ary-deflist__*          - ラベルチップ付きの定義リスト
 * .ary-company__*          - about：会社概要（テーブル→沿革の1カラム縦積み）
 * .ary-table(-wrap/__num/__note) - 角丸＋横罫線のみの会社概要テーブル
 * .ary-history*            - 年号＋ドット＋縦つなぎ線の沿革
 * .ary-services__*         - service：写真＋説明の横並び行
 * .ary-cta-bar__*          - service下部のお問い合わせ導線バー
 * .ary-faq__*              - 角丸10pxのQ&Aカード（Q/A表記・回答は常時表示）
 * .ary-form__* / .ary-contact__* - contact：フォームと電話ボックス
 *
 * ======================================
 * 共通SCSSに不足していたもの（5分類）
 * ======================================
 *
 * ・構造不足
 *   - position:sticky のヘッダー型（header-bar は fixed、header-sticky は JS 前提の透過型のみ）
 *   - 丸アイコンが「右」に付くボタン（btn-circle-arrow は丸が左・影付き・hoverで全面反転）
 *   - 見出し「アイコン＋日本語1段」（heading / heading-icon-bar はEN前提。--no-bar で近似できるが
 *     EN無し前提のサイズ・字間の指定が無い）
 *   - 沿革の「年号＋ドット＋縦つなぎ線」3カラム（dl-timeline は年号＋テキストの2カラムのみ、
 *     timeline--vertical は左罫線のみでドットが出ない）
 *   - 左右に画像がコンテナ外へはみ出す角丸ボックス（bg-photo-box は写真＋白箱の重なりのみ）
 *   - お知らせの「見出しラベル横並び＋一覧」カード（news-list / blog-list は縦積み前提）
 *
 * ・値の粒度不足
 *   - body font-size の tablet/SP 自動縮小（1.4rem/1.2rem）が18px基調のデザインに対して小さい
 *   - .container に左右paddingが無く、デザインの「max-width1200＋padding24」を再現できない
 *   - h-{n} に 240 / 270 が無い（店舗カード画像・はみ出し写真の高さ）
 *   - gap-{n} に 26 / 36 が無い
 *
 * ・装飾パターン不足
 *   - 写真差し替え待ちの「点線プレースホルダ」パーツ
 *   - 「要確認」のような注記用pillバッジ
 *   - MV下端の非対称な波形（wave-divider は左右対称の波・clipは楕円のみ）
 *
 * ・状態不足
 *   - ナビのホバーを「下線アニメ無し・色変化のみ」にするmodifier
 *
 * ・指定方向不足
 *   - 特になし
 *
 */

/* ==========================================================================
   base（共通CSSの土台に対するサイト固有の調整）
   ========================================================================== */

/* デザインの本文は18px固定。共通_base.scssのtablet1.4rem/sp1.2remは小さすぎるため
   デザインに寄せて引き上げる（値の粒度不足） */
@media (max-width: 896px) {
  body { font-size: 1.6rem; }
}
@media (max-width: 639px) {
  body { font-size: 1.5rem; }
}

/* SPナビ展開中の背面スクロールを止める */
body.is-nav-open { overflow: hidden; }

/* 汎用：スクロールイン演出 */
.ary-reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.ary-reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* ==========================================================================
   header
   ========================================================================== */

/* デザインは position:sticky（コンテンツを押し下げる）。共通の header-bar は
   fixed のため使わず、sticky 型のヘッダーをサイト固有で定義（構造不足） */
.ary-header {
  position: sticky;
  top: 0;
  background: #FEFEFE;
  border-bottom: 1px solid #E7EBE2;
}

.ary-header__inner {
  max-width: 1200px;
  height: auto;
  padding: 18px 24px;
  flex-wrap: wrap;
  gap: 18px 28px;
}

/* -- ロゴ（アイコン＋店名） */
.ary-logo { gap: 8px; }
.ary-logo__icon {
  width: 44px;
  height: 44px;
  background: transparent;
  border-radius: 0;
  color: #6FB92C;
  font-size: 3.6rem;
}
.ary-logo__name {
  display: flex;
  align-items: end;
  height: 44px;
  font-size: 3rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1;
  color: #2C3327;
}
.ary-logo:hover { opacity: 1; }
.ary-logo:hover .ary-logo__name { color: #376A10; }

/* -- PCナビ（デザインは日本語1段・ホバーは色変化のみ） */
.ary-nav {
  margin-left: auto;
  margin-right: 0;
  gap: 6px;
  flex-wrap: wrap;
}
.ary-nav__item > a { padding: 10px 14px; }
/* 共通のホバー下線アニメは使わない（デザインは色変化のみ） */
.ary-nav__item > a::after { display: none; }
.ary-nav__ja {
  margin-top: 0;
  font-size: 1.7rem;
  font-weight: 700;
  line-height: 1.5;
  color: #2C3327;
  transition: color 0.3s ease;
}
.ary-nav__item > a:hover .ary-nav__ja { color: #376A10; }
.ary-nav__item.header__nav-item--current .ary-nav__ja { color: #376A10; }

/* -- ヘッダー右：2店舗の電話番号（縦積み） */
/* 電話番号（縦積み）とLINEの丸アイコンを横に並べる外枠 */
.ary-header__right {
  gap: 18px;
  height: auto;
  padding-left: 22px;
  border-left: 1px solid #E7EBE2;
}
.ary-header__tels {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  height: auto;
}
.ary-header__tel {
  display: inline-flex;
  align-items: center;
  font-family: "Josefin Sans", "Zen Kaku Gothic New", sans-serif;
  font-size: 1.8rem;
  font-weight: 700;
  /* 電話番号はブランドの濃緑で色付け（店名ラベルはグレーに落として番号を目立たせる） */
  color: #376A10;
  white-space: nowrap;
  transition: color 0.3s ease;
}
.ary-header__tel:hover { color: #6FB92C; opacity: 1; }
.ary-header__tel-label {
  margin-right: 8px;
  color: #6F7A67;
  font-size: 1.5rem;
  font-weight: 400;
}

/* -- LINEの丸アイコン（ヘッダー右・フッターのロゴ行で共用） */
.ary-line-circle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  background: #4C8F1C;
  color: #FFFFFF;
  font-size: 2.2rem;
  transition: background 0.3s ease;
}
.ary-line-circle:hover { background: #6FB92C; color: #FFFFFF; opacity: 1; }
/* フッターの店舗情報内など、電話番号と並べる小さめサイズ */
.ary-line-circle--sm {
  width: 34px;
  height: 34px;
  font-size: 1.8rem;
}

/* ヘッダー：電話番号と同じ行に並べる小さい丸（本店の行だけに出る） */
.ary-line-circle--xs {
  width: 28px;
  height: 28px;
  font-size: 1.6rem;
}
.ary-header__telrow {
  display: flex;
  align-items: center;
  gap: 12px;
}
.ary-header__line { display: inline-flex; }
.ary-header__line:hover { opacity: 1; }
.ary-header__line:hover .ary-line-circle { background: #6FB92C; }

/* フッターの店舗情報内：緑ベタのボタン体裁（中の丸は白抜きにして沈ませない） */
.ary-footer__line {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 10px;
  margin-top: 6px;
  padding: 8px 20px 8px 8px;
  border-radius: 999px;
  background: #4C8F1C;
  transition: background 0.3s ease;
}
.ary-footer__line .ary-line-circle {
  width: 28px;
  height: 28px;
  font-size: 1.6rem;
  background: #FFFFFF;
  color: #4C8F1C;
}
.ary-footer__line-label {
  font-size: 1.5rem;
  font-weight: 700;
  color: #FFFFFF;
}
.ary-footer__line:hover { background: #3F7A14; opacity: 1; }
.ary-footer__line:hover .ary-line-circle { background: #FFFFFF; color: #3F7A14; }

/* 900px以下（ハンバーガー表示時）はヘッダー右エリアごと非表示＝電話番号もLINEも出さない
   （共通CSSの .header__right { display: none } のまま。ここで復活させない） */

/* 1100px以下：ナビを1行に収める */
@media (max-width: 1100px) {
  .ary-nav__item > a { padding: 10px 9px; }
  .ary-nav__ja { font-size: 1.6rem; }
  .ary-header__right { gap: 14px; padding-left: 16px; }
  .ary-header__tel { font-size: 1.7rem; }
}
/* 900px以下：ハンバーガーへ切替（PCナビ・電話は共通CSS側で非表示） */
@media (max-width: 900px) {
  .ary-header__inner { padding: 14px 16px; gap: 0; }
  .ary-logo__icon { width: 38px; height: 38px; }
  .ary-logo__icon::before { width: 30px; height: 9px; }
  .ary-logo__icon::after  { width: 9px;  height: 30px; }
  .ary-logo__name { height: 38px; font-size: 2.4rem; }
}

/* -- SPナビ（英語表記・電話番号は出さず、日本語＋矢印のみ） */
.ary-sp-nav { background: linear-gradient(135deg, #3F6E1B, #24470C); }
.ary-sp-nav .sp-nav__link {
  justify-content: center;
  /* 日本語と矢印の間に余白を取る */
  gap: 16px;
  font-size: 1.8rem;
  font-weight: 700;
}

/* ==========================================================================
   footer
   ========================================================================== */
.ary-footer {
  /* 白に近い淡いグリーン（サイト共通の $base_color_pale と同値） */
  background: #F7FBF3;
  color: #2C3327;
  border-top: 1px solid #E1EAD6;
}
.ary-footer__body {
  padding: 72px 0 0;
  background: transparent;
}
.ary-footer__logo {
  display: flex;
  align-items: center;
  gap: 6px;
  max-width: 1200px;
  margin: 0 auto 48px;
  padding: 0 24px;
}
.ary-logo__icon--footer { color: #6FB92C; }
.ary-logo__name--footer { color: #2C3327; }

.ary-footer__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 36px 48px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}
.ary-footer__shop {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ary-footer__shop-name {
  font-size: 1.9rem;
  font-weight: 700;
  color: #376A10;
}
.ary-footer__shop-address {
  font-size: 1.7rem;
  line-height: 1.5;
  color: #6F7A67;
}
.ary-footer__shop-tel {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: "Josefin Sans", "Zen Kaku Gothic New", sans-serif;
  font-size: 1.7rem;
  font-weight: 400;
  color: #376A10;
}
.ary-footer__shop-tel i {
  flex: none;
  font-size: 1.6rem;
  color: #6FB92C;
}
.ary-footer__shop-tel:hover { color: #6FB92C; opacity: 1; }
/* 営業時間・定休日：ラベル／「：」／値の3列グリッドで、行をまたいで縦に揃える。
   ラベルは両端揃えで幅いっぱいに広げ、文字数が違っても「：」の位置を合わせる。 */
.ary-footer__shop-hours {
  display: grid;
  grid-template-columns: auto auto 1fr;
  row-gap: 2px;
  font-size: 1.6rem;
  line-height: 1.5;
  color: #6F7A67;
}
.ary-footer__hours-label {
  text-align: justify;
  text-align-last: justify;
}

/* ナビ列：見出しは店舗名と同じサイズ感、各リンクは店舗名下の情報行と同じサイズ感に揃える */
.ary-footer__navcol {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}
.ary-footer__nav-title {
  font-size: 1.9rem;
  font-weight: 700;
  color: #376A10;
}
.ary-footer__nav {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, max-content));
  gap: 8px 28px;
  align-content: start;
  min-width: 0;
}
.ary-footer__nav-link {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: 1.7rem;
  font-weight: 400;
  color: #376A10;
}
.ary-footer__nav-link:hover { color: #6FB92C; opacity: 1; }
.ary-footer__nav-mark { color: #6FB92C; }

.ary-footer__bottom {
  max-width: 1200px;
  margin: 48px auto 0;
  padding: 26px 24px 40px;
  border-top: 1px solid rgba(55, 106, 16, 0.20);
}
.ary-footer__copyright {
  /* 通常のゴシック体で表示（Josefin Sans を先に置く本文スタックを使わない） */
  font-family: "Zen Kaku Gothic New", -apple-system, sans-serif;
  font-size: 1.4rem;
  color: #6F7A67;
}
@media (max-width: 639px) {
  .ary-footer__body { padding-top: 48px; }
  .ary-footer__bottom { padding-bottom: 80px; }
  /* SPはハンバーガー／固定バーで導線が足りるため、フッターのナビ列は出さない */
  .ary-footer__navcol { display: none; }
}

/* ==========================================================================
   page-top / SP固定バー
   ========================================================================== */
/* SP固定バー：緑ベタ地・白抜き。3ボタンの間に縦の仕切りを入れる */
.ary-spbar {
  background: #3F6E1B;
  border-top: 0;
}
.ary-spbar .sp-fixed-bar__item + .sp-fixed-bar__item {
  border-left: 1px solid rgba(255, 255, 255, 0.28);
}
.ary-spbar__link {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  font-size: 1.8rem;
  color: #FFFFFF;
}
.ary-spbar__label {
  font-size: 1.3rem;
  font-weight: 700;
  color: #FFFFFF;
}
/* 電話アイコン（受話器）は2店舗とも白で統一。お問い合わせだけ淡い緑で差をつける */
.ary-spbar__link i { color: #FFFFFF; }
.ary-spbar__link--contact i { color: #C9E3AE; }

/* ==========================================================================
   共通パーツ（ボタン / セクション見出し / リード文）
   ========================================================================== */

/* -- 白地・緑枠のpillボタン＋右に緑の丸矢印
      共通の btn-circle-arrow は丸が左・影付き・hoverで全面反転のため、
      デザイン（丸が右・枠線・hover変化なし）に合わせてサイト固有で定義（構造不足） */
.ary-btn {
  display: inline-flex;
  align-items: center;
  gap: 18px;
  padding: 20px 26px 20px 30px;
  border: 2px solid #4C8F1C;
  border-radius: 999px;
  background: #FEFEFE;
  color: #2C3327;
  font-size: 1.8rem;
  font-weight: 700;
  white-space: nowrap;
  transition: all 0.3s ease;
}
.ary-btn:hover {
  background: #FEFEFE;
  color: #2C3327;
  opacity: 1;
  box-shadow: 0 6px 18px rgba(44, 51, 39, 0.10);
}
.ary-btn__circle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  background: #6FB92C;
  color: #FFFFFF;
  font-size: 1.4rem;
  flex: none;
}
/* -- 緑ベタのpillボタン（下層ページのCTA） */
.ary-btn--solid {
  padding: 20px 28px;
  border: 0;
  background: #4C8F1C;
  color: #FFFFFF;
}
.ary-btn--solid:hover {
  background: #3F7A14;
  color: #FFFFFF;
  box-shadow: none;
}
.ary-btn--solid .ary-btn__circle {
  background: #FFFFFF;
  color: #376A10;
}

/* -- セクション見出し（アイコン＋日本語1段・中央揃え） */
.ary-shead {
  letter-spacing: normal;
  /* セクション見出し下の余白は60pxで統一（共通の mb-* ユーティリティは使わない） */
  margin-bottom: 60px;
}
/* 見出しの直後にリード文が続く場合は、60pxはリード文の下に持たせる */
.ary-shead--with-lead { margin-bottom: 14px; }
.ary-shead--with-lead + .ary-lead { margin-bottom: 60px; }
.ary-shead .heading__ja {
  font-size: clamp(3.4rem, 3.6vw, 4.6rem);
  font-weight: 700;
  letter-spacing: normal;
  line-height: 1.4;
  color: #376A10;
}

/* -- セクションのリード文 */
.ary-lead {
  font-size: 1.8rem;
  line-height: 1.9;
  color: #4A5344;
  text-wrap: pretty;
}

/* SP：見出し下の余白を詰め、リード文は読みやすい左揃えにする */
@media (max-width: 639px) {
  .ary-shead { margin-bottom: 30px; }
  .ary-shead--with-lead { margin-bottom: 10px; }
  .ary-shead--with-lead + .ary-lead { margin-bottom: 30px; }
  .ary-lead {
    font-size: 1.6rem;
    text-align: left;
  }
}

/* ==========================================================================
   TOP：メインビュー
   ========================================================================== */
.ary-mv {
  position: relative;
  background: #F0F8F3;
  overflow: hidden;
}
.ary-mv__inner {
  position: relative;
  min-height: 92vh;
}
/* 右側58%に写真＋左へフェードするマスク */
.ary-mv__media {
  position: absolute;
  top: 0;
  right: 0;
  /* bottom は 0。写真の下端を波SVGの白で隠し、切れ目が出ないようにする */
  bottom: 0;
  width: 58%;
  overflow: hidden;
  /* 左へのフェード幅を狭め、写真をよりはっきり見せる（58% → 72%） */
  -webkit-mask-image: linear-gradient(to left, #000 72%, transparent 100%);
  mask-image: linear-gradient(to left, #000 72%, transparent 100%);
}
/* CMSスライダー差し替え用の外枠。高さは外枠に追従させる */
.ary-mv__slider,
.ary-mv__slider .swiper-slide,
.ary-mv__slider .main_slider__inner {
  width: 100%;
  height: 100%;
}
.ary-mv__slider img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.ary-mv__veil {
  position: absolute;
  inset: 0;
  /* 写真にかかる白ヴェールも手前で抜けるように（72% → 62%） */
  background: linear-gradient(100deg, #EDF7F0 0%, #F0F8F3 24%, rgba(240, 248, 243, 0.94) 38%, rgba(240, 248, 243, 0.40) 50%, rgba(240, 248, 243, 0) 62%);
}
.ary-mv__sea {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 50%;
  height: auto;
  display: block;
  pointer-events: none;
}
.ary-mv__wave {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  line-height: 0;
  pointer-events: none;
}
.ary-mv__wave svg {
  display: block;
  width: 100%;
  height: 190px;
}
.ary-mv__leaf {
  position: absolute;
  top: -14px;
  left: -16px;
  width: clamp(160px, 17vw, 260px);
  height: auto;
  display: block;
  pointer-events: none;
}
.ary-mv__body {
  position: relative;
  max-width: 1200px;
  margin: 0 auto;
  padding: 112px 32px 190px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 26px;
}
.ary-mv__badge {
  padding: 10px 22px;
  border-radius: 999px;
  background: #6FB92C;
  color: #FFFFFF;
  font-size: 1.8rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}
.ary-mv__catch {
  font-size: clamp(3rem, 4.2vw, 5rem);
  font-weight: 700;
  line-height: 1.55;
  letter-spacing: 0.06em;
  color: #376A10;
}
.ary-mv__lead {
  font-size: 2rem;
  line-height: 2;
  color: #4A5344;
  font-weight: 500;
}
@media (max-width: 896px) {
  .ary-mv__inner { min-height: 0; }
  .ary-mv__media {
    position: relative;
    width: 100%;
    bottom: auto;
    height: 46vw;
    -webkit-mask-image: none;
    mask-image: none;
  }
  .ary-mv__veil { display: none; }
  .ary-mv__body { padding: 48px 24px 150px; }
  .ary-mv__wave svg { height: 120px; }
  .ary-mv__sea { width: 100%; }
}
@media (max-width: 639px) {
  .ary-mv__body { padding: 36px 20px 110px; gap: 18px; }
  .ary-mv__badge { font-size: 1.5rem; padding: 8px 18px; }
  .ary-mv__lead { font-size: 1.6rem; }
  .ary-mv__wave svg { height: 80px; }
  /* SPは写真が最上部に来るため、大きくすると人物の顔に重なる。従来サイズを維持 */
  .ary-mv__leaf { width: 90px; top: -8px; left: -10px; }
}

/* ==========================================================================
   TOP：お知らせ（横並びカード / 埋め込みCMS）
   ========================================================================== */
.ary-topnews {
  position: relative;
  z-index: 2;
  max-width: 1200px;
  margin: 64px auto 0;
  padding: 0 24px;
}
.ary-topnews__card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  border: 1px solid #E1EAD6;
  border-radius: 20px;
  background: #FEFEFE;
  box-shadow: 0 6px 22px rgba(44, 51, 39, 0.07);
  overflow: hidden;
}
.ary-topnews__head {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 30px 48px;
  background: #6FB92C;
  color: #FFFFFF;
}
.ary-topnews__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border: 2px solid #FFFFFF;
  border-radius: 999px;
  font-size: 1.6rem;
  flex: none;
}
.ary-topnews__title {
  font-size: 2.6rem;
  font-weight: 700;
  line-height: 1.2;
}
/* 共通 blog-list の外枠罫線を消し、項目間だけ罫線にする（デザイン準拠） */
.ary-topnews__list {
  border-top: 0;
  margin: 0;
  padding: 8px 28px;
  display: flex;
  flex-direction: column;
}
/* 4件以上のときだけ JS が max-height を付ける（is-scrollable） */
.ary-topnews__list.is-scrollable {
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: #C7D8B3 transparent;
}
.ary-topnews__list.is-scrollable::-webkit-scrollbar { width: 6px; }
.ary-topnews__list.is-scrollable::-webkit-scrollbar-track { background: transparent; }
.ary-topnews__list.is-scrollable::-webkit-scrollbar-thumb {
  background: #C7D8B3;
  border-radius: 999px;
}
.ary-topnews__item {
  display: flex;
  gap: 26px;
  align-items: center;
  padding: 18px 0;
  border-bottom: 0;
  border-top: 1px solid #EFF2EA;
}
.ary-topnews__item:first-child { border-top: 0; }
.ary-topnews__date {
  flex: none;
  width: 118px;
  font-family: "Josefin Sans", "Zen Kaku Gothic New", sans-serif;
  font-size: 1.8rem;
  font-weight: 700;
  color: #8B9484;
}
.ary-topnews__text {
  flex: 1;
  font-size: 1.8rem;
  font-weight: 500;
  line-height: 1.6;
  color: #2C3327;
}
@media (max-width: 896px) {
  .ary-topnews__card { grid-template-columns: 1fr; }
  .ary-topnews__head { padding: 20px 24px; }
  .ary-topnews__title { font-size: 2.2rem; }
  .ary-topnews__list { padding: 4px 20px; }
}
@media (max-width: 639px) {
  .ary-topnews { margin-top: 40px; }
  .ary-topnews__item { flex-direction: column; align-items: flex-start; gap: 4px; padding: 14px 0; }
  .ary-topnews__date { width: auto; font-size: 1.6rem; }
  .ary-topnews__text { font-size: 1.5rem; }
}

/* ==========================================================================
   TOP：理念（左右に写真がはみ出す角丸ボックス）
   ========================================================================== */
.ary-mission {
  position: relative;
  /* 枠の左右の余白を縮める（1200 → 1320px。左右のはみ出し画像の計算式も同値に揃える） */
  max-width: 1320px;
  margin: 80px auto;
  padding: 72px 40px;
  background: #F7F5ED;
  border-radius: 40px;
}
.ary-mission__row {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 24px;
}
/* 余白に置く葉の装飾（本文・写真より背面） */
.ary-mission__deco {
  position: absolute;
  z-index: 0;
  height: auto;
  display: block;
  pointer-events: none;
}
.ary-mission__deco--1 {
  top: -30px;
  left: 26px;
  width: clamp(120px, 13vw, 120px);
}
.ary-mission__deco--2 {
  right: -67px;
  bottom: 10px;
  width: clamp(110px, 12vw, 168px);
  transform: rotate(16deg);
}
.ary-mission__side {
  flex: none;
  width: clamp(0px, calc(100vw - 940px), 360px);
  display: block;
  object-fit: cover;
  box-shadow: 0 0.8rem 3rem rgba(0, 0, 0, 0.14);
}
.ary-mission__side--left {
  height: 340px;
  border-radius: 0 32px 32px 0;
  align-self: flex-end;
  margin-bottom: -40px;
  margin-left: calc(-1 * max(0px, (100vw - 1320px) / 2 + 40px));
}
.ary-mission__side--right {
  height: 320px;
  border-radius: 32px 0 0 32px;
  align-self: flex-start;
  margin-top: -32px;
  margin-right: calc(-1 * max(0px, (100vw - 1320px) / 2 + 40px));
}
.ary-mission__body {
  flex: 1 1 520px;
  min-width: 280px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 26px;
  padding: 0 12px;
  text-align: center;
}
.ary-mission__catch {
  font-size: clamp(2.2rem, 3vw, 3.3rem);
  font-weight: 700;
  line-height: 1.7;
  letter-spacing: 0.02em;
  color: #376A10;
  text-wrap: pretty;
}
.ary-mission__illust {
  display: block;
  width: 100%;
  max-width: 220px;
  height: auto;
}
.ary-mission__text {
  font-size: 1.8rem;
  line-height: 2.2;
  color: #3B4437;
  text-wrap: pretty;
}
@media (max-width: 896px) {
  .ary-mission { margin: 48px 16px; padding: 48px 20px; border-radius: 28px; }
  .ary-mission__deco--1 { top: -18px; left: 6px; width: 100px; }
  .ary-mission__deco--2 { right: 8px; bottom: 6px; width: 90px; }
  .ary-mission__side { display: none; }
  .ary-mission__body { flex: 1 1 auto; padding: 0; }
}
@media (max-width: 639px) {
  .ary-mission__text { font-size: 1.5rem; line-height: 2; text-align: left; }
  .ary-mission__text br { display: none; }
  /* SPは改行位置をブラウザに任せて、文節単位でバランスよく折る */
  .ary-mission__catch {
    text-align: center;
    text-wrap: balance;
    word-break: auto-phrase;
  }
  .ary-mission__illust { width: 79%; max-width: 160px; }
}

/* ==========================================================================
   TOP：ご提供サービス（淡緑の塗りカード／丸アイコン左＋名称＋右に矢印の2列×3行）
   カード自体に背景があるため面が埋まり、中央揃え時のような余白が出ない
   ========================================================================== */
.ary-service-nav { padding: 80px 0; }
.ary-service-nav__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}
.ary-service-nav__item {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 22px 26px;
  border-radius: 16px;
  background: #F2F7EC;
  color: #2C3327;
  text-align: left;
  transition: background 0.3s ease, color 0.3s ease;
}
.ary-service-nav__item:hover {
  background: #376A10;
  color: #FFFFFF;
  opacity: 1;
}
.ary-service-nav__icon {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 62px;
  height: 62px;
  border-radius: 50%;
  background: #FEFEFE;
  color: #6FB92C;
  font-size: 2.6rem;
  transition: background 0.3s ease, color 0.3s ease;
}
.ary-service-nav__item:hover .ary-service-nav__icon {
  background: #FFFFFF;
  color: #376A10;
}
.ary-service-nav__label {
  flex: 1;
  min-width: 0;
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.5;
}
.ary-service-nav__arrow {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  background: #FEFEFE;
  color: #6FB92C;
  font-size: 1.3rem;
  transition: background 0.3s ease, color 0.3s ease;
}
.ary-service-nav__item:hover .ary-service-nav__arrow {
  background: #6FB92C;
  color: #FFFFFF;
}
@media (max-width: 639px) {
  .ary-service-nav { padding: 48px 0; }
  .ary-service-nav__grid { grid-template-columns: 1fr; gap: 14px; }
  .ary-service-nav__item { gap: 16px; padding: 18px 20px; border-radius: 14px; }
  .ary-service-nav__icon { width: 52px; height: 52px; font-size: 2.2rem; }
  .ary-service-nav__label { font-size: 1.7rem; }
  .ary-service-nav__arrow { width: 28px; height: 28px; font-size: 1.2rem; }
}

/* ==========================================================================
   TOP：店舗のご案内
   ========================================================================== */
.ary-shops { background: #FEFEFE; }
.ary-shops__inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 80px 24px;
}
.ary-shops__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 32px;
}
.ary-shopcard {
  display: flex;
  flex-direction: column;
  background: #FEFEFE;
  border: 1px solid #E1EAD6;
  border-radius: 24px;
  overflow: hidden;
  color: #2C3327;
  transition: all 0.3s ease;
}
.ary-shopcard:hover {
  border-color: #6FB92C;
  color: #2C3327;
  opacity: 1;
}
.ary-shopcard__img {
  position: relative;
  height: 320px;
  overflow: hidden;
}
.ary-shopcard__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* 看板が切れないよう中央より上寄りで切り抜く（PC幅で約30px上側）。
     px指定だと枠と画像の比率次第で上に隙間が出るため%で指定 */
  object-position: center 20%;
  display: block;
  transition: transform 0.6s ease;
}
.ary-shopcard:hover .ary-shopcard__img img { transform: scale(1.05); }
.ary-shopcard__name {
  position: absolute;
  left: 0;
  bottom: 0;
  padding: 14px 24px;
  border-radius: 0 20px 0 0;
  background: #3F6E1B;
  color: #FFFFFF;
  font-size: 2rem;
  font-weight: 700;
}
.ary-shopcard__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 26px 26px 22px;
}
.ary-shopcard__row {
  display: flex;
  gap: 14px;
  font-size: 1.7rem;
  line-height: 1.6;
}
.ary-shopcard__label {
  flex: none;
  width: 72px;
  font-weight: 700;
  color: #376A10;
}
.ary-shopcard__tel {
  font-family: "Josefin Sans", "Zen Kaku Gothic New", sans-serif;
  font-size: 1.9rem;
  font-weight: 400;
}
@media (max-width: 639px) {
  .ary-shops__inner { padding: 48px 16px; }
  .ary-shops__grid { grid-template-columns: 1fr; gap: 20px; }
  .ary-shopcard__img { height: 260px; }
  .ary-shopcard__name { font-size: 1.7rem; padding: 10px 18px; }
  .ary-shopcard__row { font-size: 1.5rem; }
}

/* ==========================================================================
   TOP：FAQ / お問い合わせ 導線（写真透かし＋緑ベタ）
   ========================================================================== */
.ary-guide {
  position: relative;
  background: #3F6E1B;
  overflow: hidden;
}
.ary-guide__inner {
  position: relative;
  max-width: 1200px;
  margin: 0 auto;
  padding: 80px 24px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 26px;
}
.ary-guide__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 44px 32px;
  border: 1px solid rgba(254, 254, 254, 0.7);
  border-radius: 8px;
  color: #FFFFFF;
  transition: all 0.3s ease;
}
.ary-guide__item:hover {
  background: rgba(254, 254, 254, 0.12);
  color: #FFFFFF;
  opacity: 1;
}
.ary-guide__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid #FFFFFF;
  border-radius: 999px;
  font-size: 1.9rem;
}
.ary-guide__sub {
  font-size: 1.7rem;
  letter-spacing: 0.04em;
}
.ary-guide__label {
  font-size: 2.7rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-align: center;
  line-height: 1.3;
}
@media (max-width: 639px) {
  .ary-guide__inner { padding: 48px 16px; gap: 16px; }
  .ary-guide__item { padding: 28px 20px; }
  .ary-guide__sub { font-size: 1.4rem; }
  .ary-guide__label { font-size: 2.1rem; }
}

/* ==========================================================================
   計測差分の反映（claude-design-output と computed style を突き合わせた調整）
   ========================================================================== */

/* デザインのセクション内側は max-width:1200px + padding:0 24px。
   共通 .container は左右paddingを持たないため、サイト側で付与（値の粒度不足） */
.ary-container {
  padding-left: 24px;
  padding-right: 24px;
}
@media (max-width: 639px) {
  .ary-container { padding-left: 16px; padding-right: 16px; }
}

/* デザインは見出し・お知らせタイトルに line-height 指定なし（= normal） */
.ary-shead .heading__ja { line-height: normal; }
.ary-topnews__title { line-height: normal; }

/* デザインは導線カードのラベルに line-height / text-align 指定なし */
.ary-guide__label {
  line-height: normal;
  text-align: inherit;
}

/* ヘッダー電話：デザインは inline 流し（ラベルと番号がベースライン揃え・太字継承） */
.ary-header__tel { display: block; }
.ary-header__tel-label { font-weight: inherit; }

/* ロゴのプラスマーク：Font Awesome の fa-plus は先端が丸いため、
   角丸なしの十字をCSSの矩形2本で描画する（グリフ自体は非表示） */
.ary-logo__icon {
  position: relative;
}
.ary-logo__icon i {
  visibility: hidden;
}
.ary-logo__icon::before,
.ary-logo__icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  background: currentColor;
  border-radius: 0;
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.ary-logo__icon::before { width: 34px; height: 10px; }
.ary-logo__icon::after  { width: 10px; height: 34px; }

/* コピーライト行の区切り線はデザインでは内側1152px幅 */
.ary-footer__bottom {
  width: calc(100% - 48px);
  max-width: 1152px;
  padding: 26px 0 40px;
}

/* ==========================================================================
   下層ページ共通：ページ見出し帯 / リード文
   ========================================================================== */

/* 共通 page-hero--solid の padding 70px 5% を、幅 max-width1200・padding 56px 32px に寄せる
   （タイトルは中央揃え。デザイン元の左揃えからご指示により変更） */
.ary-hero {
  padding: 56px 32px;
  text-align: center;
  /* 見出しを白抜きにするため、濃緑のグラデーション地に変更
     （中央のタイトル位置で白文字とのコントラスト比 約6.5:1 ／ 明るい右上でも 約4.6:1） */
  background:
    radial-gradient(120% 150% at 88% -20%, rgba(111, 185, 44, 0.28) 0%, rgba(111, 185, 44, 0) 58%),
    linear-gradient(112deg, #2E5A0D 0%, #376A10 46%, #3F6E1B 100%);
}
/* 背景の装飾：右下から抜ける大きな円（濃緑地に白のヴェールを薄く重ねる） */
.ary-hero::after {
  content: "";
  position: absolute;
  right: -80px;
  bottom: -140px;
  z-index: 0;
  width: 320px;
  height: 320px;
  border-radius: 50%;
  background: linear-gradient(140deg, rgba(255, 255, 255, 0.13), rgba(111, 185, 44, 0.20));
  pointer-events: none;
}
.ary-hero__inner {
  position: relative;
  z-index: 1;
  max-width: 1200px;
  margin: 0 auto;
}
.ary-hero .ary-hero__title {
  font-size: clamp(2.8rem, 3.6vw, 4.4rem);
  font-weight: 700;
  letter-spacing: normal;
  line-height: normal;
  color: #FFFFFF;
}
@media (max-width: 639px) {
  .ary-hero { padding: 36px 16px; }
  .ary-hero::after { right: -70px; bottom: -150px; width: 210px; height: 210px; }
}

.ary-page-lead {
  max-width: 1200px;
  margin: 0 auto;
  padding: 64px 24px 0;
}

/* ==========================================================================
   about：店舗紹介
   ========================================================================== */
.ary-shopinfo {
  max-width: 1200px;
  margin: 0 auto;
  padding: 80px 24px 0;
}
.ary-shopinfo__list {
  display: flex;
  flex-direction: column;
  gap: 72px;
}
.ary-shopinfo__row {
  display: grid;
  grid-template-columns: minmax(260px, 0.75fr) minmax(340px, 1fr);
  gap: 48px;
  align-items: stretch;
}
.ary-shopinfo__left,
.ary-shopinfo__right {
  display: flex;
  flex-direction: column;
}
.ary-shopinfo__left { gap: 20px; }
.ary-shopinfo__right { gap: 22px; }

/* 写真待ちのプレースホルダ（点線枠） */
.ary-photo-note {
  min-height: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 16px;
  border: 2px dashed #A9BE94;
  border-radius: 8px;
  background: #F7FBF3;
  font-size: 1.7rem;
  font-weight: 700;
  line-height: 1.6;
  color: #6F7A67;
}

/* ary-btn の小サイズ版（前置アイコン付き） */
.ary-btn--sm {
  gap: 12px;
  align-self: flex-start;
  padding: 14px 24px;
  font-size: 1.7rem;
}
.ary-btn__icon {
  color: #4C8F1C;
  font-size: 1.8rem;
}

/* 店舗写真＋Googleマップバッジ（写真の右下に重ねる） */
.ary-shopinfo__photo {
  position: relative;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
}
.ary-shopinfo__photo > .ary-photo-note,
.ary-shopinfo__photo > img { flex: 1 1 auto; }
.ary-shopinfo__photo > img {
  width: 100%;
  min-height: 0;
  border-radius: 8px;
  object-fit: cover;
}
.ary-mapbadge {
  position: absolute;
  right: 16px;
  bottom: 16px;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 20px 10px 12px;
  border-radius: 999px;
  background: #FEFEFE;
  box-shadow: 0 6px 22px rgba(44, 51, 39, 0.18);
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1;
  color: #376A10;
}
.ary-mapbadge__icon {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #6FB92C;
  font-size: 1.5rem;
  color: #FFFFFF;
}
.ary-mapbadge:hover {
  opacity: 1;
  /* ホバーしても背景は白のまま（変化は丸アイコンの色のみ） */
  background: #FEFEFE;
}
.ary-mapbadge:hover .ary-mapbadge__icon { background: #376A10; }

.ary-shopinfo__name {
  padding-bottom: 14px;
  border-bottom: 1px solid #C6CFBB;
  font-size: 2.6rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: normal;
}

/* ラベル付き情報リスト */
.ary-deflist {
  display: flex;
  flex-direction: column;
  font-size: 1.8rem;
  line-height: 1.8;
}
.ary-deflist__row {
  display: flex;
  gap: 16px;
  align-items: baseline;
  padding: 14px 0;
  border-bottom: 1px solid #E4EADA;
}
.ary-deflist__label {
  flex: none;
  width: 104px;
  padding: 4px 0;
  border-radius: 6px;
  background: #F2F7EC;
  text-align: center;
  font-size: 1.5rem;
  font-weight: 700;
  color: #376A10;
}
/* 郵便番号と住所の間は全角スペース相当のアキ（PC・タブレットは1行） */
.ary-deflist__zip { margin-right: 1em; }
.ary-deflist__value--tel,
.ary-deflist__value--tel a {
  font-family: "Josefin Sans", "Zen Kaku Gothic New", sans-serif;
  font-size: 1.9rem;
  color: #2C3327;
}
.ary-deflist__value--tel a:hover { color: #376A10; opacity: 1; }

/* 未確定項目のバッジ */
.ary-badge-check {
  display: inline;
  margin-left: 10px;
  padding: 2px 10px;
  border-radius: 999px;
  background: #FFF8A7;
  font-size: 1.4rem;
  font-weight: 700;
  color: #2C3327;
}

@media (max-width: 896px) {
  .ary-shopinfo { padding: 48px 16px 0; }
  .ary-shopinfo__row { grid-template-columns: 1fr; gap: 24px; }
  .ary-shopinfo__list { gap: 48px; }
}
@media (max-width: 639px) {
  .ary-photo-note { min-height: 200px; font-size: 1.5rem; }
  .ary-mapbadge {
    right: 10px;
    bottom: 10px;
    gap: 8px;
    padding: 8px 16px 8px 10px;
    font-size: 1.4rem;
  }
  .ary-mapbadge__icon { width: 28px; height: 28px; font-size: 1.3rem; }
  .ary-deflist { font-size: 1.5rem; }
  /* SPでも横並びを維持する */
  .ary-deflist__row { flex-direction: row; gap: 10px; }
  .ary-deflist__label { width: 78px; font-size: 1.3rem; }
  /* 住所はSPだけ郵便番号の後で改行する */
  .ary-deflist__zip { display: block; margin-right: 0; }
  .ary-shopinfo__name { font-size: 2rem; }
}

/* ==========================================================================
   about：会社概要 / 歴史
   ========================================================================== */
/* セクション間の仕切り：両端がフェードするヘアライン＋中央に緑の角丸バー */
.ary-divider {
  position: relative;
  max-width: 1152px;
  margin: 80px auto 0;
  height: 1px;
  background: linear-gradient(90deg,
    rgba(207, 224, 184, 0) 0%,
    #CFE0B8 18%,
    #CFE0B8 82%,
    rgba(207, 224, 184, 0) 100%);
}
.ary-divider::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 56px;
  height: 4px;
  border-radius: 999px;
  background: #6FB92C;
}
@media (max-width: 896px) {
  .ary-divider { margin: 48px 16px 0; }
  .ary-divider::before { width: 44px; height: 3px; }
}

.ary-company {
  position: relative;
}
.ary-company__inner {
  position: relative;
  z-index: 1;
  max-width: 1200px;
  margin: 0 auto;
  padding: 80px 24px 88px;
}
/* 2カラムだとテーブル幅が552pxまで縮んで住所などが3行に折り返し、
   右の沿革ボックスとの高さ差（671 vs 430）で余白も歪むため1カラム縦積みに */
.ary-company__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 56px;
  align-items: start;
}

/* 会社概要テーブル：共通 table-basic をベースに、外枠角丸＋横罫線のみに */
.ary-table-wrap {
  border: 1px solid #CFE0B8;
  border-radius: 28px;
  overflow: hidden;
}
.ary-table th,
.ary-table td {
  padding: 24px 28px;
  border: 0;
  border-bottom: 1px solid #E1EAD6;
  font-size: 1.8rem;
  line-height: 1.9;
  vertical-align: top;
}
.ary-table th {
  width: 220px;
  min-width: 120px;
  /* 見出し列を一段濃い淡緑＋ブランド緑の文字に */
  background: #F2F7EC;
  color: #376A10;
  font-weight: 700;
}
.ary-table tr:last-child th,
.ary-table tr:last-child td { border-bottom: 0; }
/* 会社概要 住所：店舗名を緑地・白文字・角丸のチップにする */
.ary-addr {
  display: flex;
  align-items: baseline;
  gap: 12px;
}
.ary-addr + .ary-addr { margin-top: 10px; }
.ary-shopchip {
  flex: none;
  /* 2店舗で幅を揃え、住所・番号の開始位置を合わせる */
  min-width: 112px;
  text-align: center;
  font-family: "Zen Kaku Gothic New", sans-serif;
  padding: 2px 14px;
  border-radius: 999px;
  background: #6FB92C;
  color: #FFFFFF;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.7;
  white-space: nowrap;
}
.ary-table__num {
  font-family: "Josefin Sans", "Zen Kaku Gothic New", sans-serif;
  font-weight: 400;
}
.ary-table__note {
  margin-left: 10px;
  font-size: 1.6rem;
  font-weight: 400;
  color: #6F7A67;
}
/* 値の下段に置く注記（※電話・FAX共用） */
.ary-table__note--block {
  display: block;
  margin: 10px 0 0;
}

/* 歴史ボックス（クリーム地） */
/* 沿革：枠内を「左に写真＋右に見出し＋沿革」の2カラムに */
.ary-history-photo {
  width: 100%;
  height: 100%;
  min-height: 300px;
  display: block;
  object-fit: cover;
  border-radius: 20px;
  /* 少しセピア寄りに */
  filter: sepia(0.45) saturate(0.8) contrast(0.95);
}
.ary-history-box__body { min-width: 0; }
.ary-history-box {
  display: grid;
  grid-template-columns: minmax(240px, 0.7fr) 1fr;
  gap: 32px;
  align-items: stretch;
  padding: 36px;
  /* 淡黄 → ほぼ白のグレー */
  background: #F8F8F7;
  border: 1px solid #EBEBE8;
  border-radius: 28px;
}
/* 見出しは黒系。左に角丸の縦棒をあしらう */
.ary-history-box__title {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 18px;
  font-size: 2.8rem;
  font-weight: 700;
  line-height: normal;
  color: #2C3327;
}
.ary-history-box__title::before {
  content: "";
  flex: none;
  width: 6px;
  height: 1.1em;
  border-radius: 999px;
  background: #6FB92C;
}

/* 年号＋ドット＋内容の3カラム。共通 dl-timeline に縦つなぎ線を追加（構造不足） */
.ary-history { display: flex; flex-direction: column; }
.ary-history__row {
  display: grid;
  /* 年号カラムは固定幅。auto だと行ごとに文字幅が変わり（0000年 と 2026年）、
     ドットと縦線のカラムが行ごとに横ズレする */
  grid-template-columns: 88px 20px 1fr;
  gap: 0 18px;
  align-items: start;
  padding: 0;
  border: 0;
}
.ary-history__row:first-child { border-top: 0; }
.ary-history__year {
  padding-top: 2px;
  min-width: 0;
  text-align: right;
  font-size: 2.4rem;
  font-weight: 700;
  color: #376A10;
  white-space: nowrap;
}
.ary-history__mark {
  position: relative;
  align-self: stretch;
}
/* 縦つなぎ線：自分のドット中心から次の行のドット中心まで。
   線・ドットともに left:50% 基準にして行ごとのズレを出さない。
   box-sizing:border-box なのでドットは枠込み12px＝中心はドット上端+6px */
.ary-history__mark::before {
  content: "";
  position: absolute;
  top: 16px;
  bottom: -16px;
  left: 50%;
  margin-left: -1px;
  width: 2px;
  background: #D8E3C6;
}
/* 最終行はドットで終わり（線は前の行から届いている） */
.ary-history__row--last .ary-history__mark::before { display: none; }
.ary-history__mark::after {
  content: "";
  position: absolute;
  top: 10px;
  left: 50%;
  margin-left: -6px;
  width: 12px;
  height: 12px;
  border-radius: 999px;
  background: #FEFEFE;
  border: 3px solid #6FB92C;
}
.ary-history__text {
  padding: 6px 0 22px;
  font-size: 1.8rem;
  line-height: 1.9;
}
.ary-history__text--strong { font-weight: 700; }

@media (max-width: 896px) {
  .ary-company__inner { padding: 48px 16px 56px; }
  .ary-company__grid { grid-template-columns: 1fr; gap: 32px; }
  .ary-table-wrap { border-radius: 20px; }
  /* SPは th / td を横並びではなく縦並びに（狭い幅で値が折り返すのを防ぐ） */
  .ary-table th,
  .ary-table td {
    display: block;
    width: auto;
    padding: 14px 18px;
    font-size: 1.6rem;
  }
  .ary-table th { border-bottom: 0; }
  .ary-table td { padding-top: 14px; }
  .ary-table tr:last-child th { border-bottom: 0; }
  /* 店舗チップと値も縦並びにして、値の折り返しを防ぐ */
  .ary-addr { flex-direction: column; align-items: flex-start; gap: 4px; }
  .ary-addr + .ary-addr { margin-top: 14px; }
  .ary-shopchip { min-width: 0; padding: 2px 12px; }
  .ary-history-box__title { font-size: 2.3rem; gap: 12px; }
  .ary-history-box { grid-template-columns: 1fr; gap: 20px; padding: 24px 20px; }
  .ary-history-photo { min-height: 0; height: 200px; border-radius: 16px; }
}
@media (max-width: 639px) {
  .ary-history__row { grid-template-columns: 74px 20px 1fr; }
  .ary-history__year { font-size: 2rem; }
  .ary-history__text { font-size: 1.5rem; }
}

/* ==========================================================================
   service：事業内容（写真＋説明の横並び）
   ========================================================================== */
.ary-services {
  max-width: 1040px;
  margin: 0 auto;
  padding: 80px 24px 88px;
  display: flex;
  flex-direction: column;
  gap: 64px;
}
.ary-services__row {
  display: grid;
  grid-template-columns: minmax(200px, 300px) minmax(280px, 1fr);
  gap: 36px;
  align-items: center;
  scroll-margin-top: 120px;
}
.ary-services__img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  border-radius: 20px;
  display: block;
}
/* 写真待ちのプレースホルダ（事業内容は小サイズ） */
.ary-photo-note--sm {
  min-height: 0;
  height: 200px;
  border-color: #C7D3B4;
  border-radius: 20px;
  font-size: 1.6rem;
}
/* TOPの店舗カード内（高さ240px固定・角丸はカード側で処理） */
.ary-photo-note--card {
  min-height: 0;
  height: 100%;
  border-radius: 0;
  font-size: 1.6rem;
}
.ary-services__body {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.ary-services__title {
  padding-bottom: 16px;
  border-bottom: 2px dotted #C9CFC2;
  font-size: clamp(2.3rem, 2.3vw, 2.9rem);
  font-weight: 700;
  line-height: normal;
  color: #376A10;
}
.ary-services__text {
  font-size: 1.8rem;
  line-height: 2;
  color: #3B4437;
  text-wrap: pretty;
}

/* 下部のお問い合わせ導線バー */
.ary-cta-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 34px 30px;
  border-radius: 28px;
  /* 色反転：淡緑地→濃緑ベタ、文字は白抜き */
  background: #376A10;
  border: 1px solid #376A10;
}
.ary-cta-bar__text {
  font-size: 1.9rem;
  font-weight: 700;
  line-height: 1.8;
  color: #FFFFFF;
}
.ary-cta-bar .ary-btn { flex: none; gap: 20px; }
/* バー内のボタンも反転（緑ベタ → 白地・緑文字） */
.ary-cta-bar .ary-btn--solid {
  background: #FEFEFE;
  color: #376A10;
}
.ary-cta-bar .ary-btn--solid:hover {
  background: #FFFFFF;
  color: #376A10;
  box-shadow: 0 6px 18px rgba(20, 40, 8, 0.28);
}
.ary-cta-bar .ary-btn--solid .ary-btn__circle {
  background: #6FB92C;
  color: #FFFFFF;
}

@media (max-width: 896px) {
  .ary-services { padding: 48px 16px 56px; gap: 48px; }
  .ary-services__row { grid-template-columns: 1fr; gap: 20px; }
}
@media (max-width: 639px) {
  .ary-services__text { font-size: 1.5rem; line-height: 1.9; }
  .ary-cta-bar { padding: 24px 20px; border-radius: 20px; }
  .ary-cta-bar__text { font-size: 1.6rem; }
  .ary-cta-bar .ary-btn { width: 100%; justify-content: space-between; }
}

/* ==========================================================================
   faq：よくある質問（角丸10pxのQ&Aカード）
   クリック不要で回答を常時表示。アコーディオン（開閉・＋/−）は使用しない
   ========================================================================== */
.ary-faq {
  max-width: 960px;
  margin: 0 auto;
  padding: 80px 24px 88px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.ary-faq__item {
  border: 1px solid #E1EAD6;
  border-radius: 10px;
  background: #FEFEFE;
  overflow: hidden;
}
.ary-faq__q {
  display: flex;
  gap: 20px;
  align-items: center;
  width: 100%;
  padding: 22px 34px;
  /* 質問行は淡緑の帯にして、回答（白地）と視覚的に分ける */
  background: #F2F7EC;
  border-bottom: 1px solid #E1EAD6;
}
.ary-faq__mark {
  flex: none;
  font-family: "Josefin Sans", "Zen Kaku Gothic New", sans-serif;
  font-size: 2.2rem;
  font-weight: 700;
  color: #6FB92C;
  line-height: 1;
}
.ary-faq__mark--a { color: #B9C7A8; }
.ary-faq__text {
  font-size: clamp(1.7rem, 1.8vw, 2.2rem);
  font-weight: 700;
  line-height: 1.7;
  color: #2C3327;
}
.ary-faq__a {
  display: flex;
  gap: 20px;
  padding: 22px 34px 26px;
  border-top: 0;
  background: #FEFEFE;
}
.ary-faq__answer {
  font-size: 1.8rem;
  line-height: 2;
  color: #3B4437;
}

@media (max-width: 896px) {
  .ary-faq { padding: 48px 16px 56px; gap: 16px; }
  .ary-faq__item { border-radius: 10px; }
  .ary-faq__q { padding: 16px 22px; gap: 14px; }
  .ary-faq__a { padding: 16px 22px 20px; gap: 14px; }
}
@media (max-width: 639px) {
  .ary-faq__mark { font-size: 1.8rem; }
  .ary-faq__answer { font-size: 1.5rem; line-height: 1.9; }
}

/* ==========================================================================
   contact：フォーム＋電話
   ========================================================================== */
.ary-contact {
  /* 2カラムをやめ、フォーム→電話ボックスの1カラム縦積みに変更 */
  max-width: 880px;
  margin: 0 auto;
  padding: 80px 24px 88px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  align-items: start;
}
.ary-form {
  border-radius: 28px;
  background: #FEFEFE;
  padding: 38px 40px;
}

/* --------------------------------------------------------------------------
 * CMSフォーム（cdn.rs-sys.jp の mail-form.css）の色をサイトカラーに合わせる。
 * CMSのCSSは実行時にbody内へ挿入され後勝ちになるため、.ary-form を足して
 * 詳細度で上回らせている（!important は使わない）。
 * -------------------------------------------------------------------------- */
.ary-form .form-contents {
  padding: 0;
  margin: auto;
}
/* 「必須」バッジ：オレンジ #f07240 → ブランドの明緑 */
.ary-form .form-pattern-2 dl dt:not(.pattern-exclusion) span.required::before {
  background: #6FB92C;
  color: #FFFFFF;
}
/* 送信ボタン：オレンジ → 緑ベタ（hoverは白地・緑文字に反転） */
.ary-form .form-pattern-2 .submit-btn {
  background: #4C8F1C;
  border-color: #4C8F1C;
  color: #FFFFFF;
}
.ary-form .form-pattern-2 :not(.pattern-exclusion) button:hover {
  background: #FFFFFF;
  color: #376A10;
}
/* メールアイコン（maskの塗り色）。CMS標準はhoverでオレンジ #f07240 になるため文字色と同じ緑に */
.ary-form .form-pattern-2 :not(.pattern-exclusion) button:hover::before { background-color: #376A10; }
/* フォーム見出し（沿革「新垣薬局の歴史」と同じデザイン：黒系＋左に角丸の縦棒） */
.ary-form__title {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 24px;
  font-size: 2.8rem;
  font-weight: 700;
  line-height: normal;
  color: #2C3327;
}
.ary-form__title::before {
  content: "";
  flex: none;
  width: 6px;
  height: 1.1em;
  border-radius: 999px;
  background: #6FB92C;
}
.ary-form form {
  display: flex;
  flex-direction: column;
  gap: 26px;
}
.ary-form__row {
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 1.8rem;
  font-weight: 700;
}
.ary-form__require {
  font-size: 1.5rem;
  font-weight: 700;
  color: #C8622C;
}
/* 共通 form-input をデザインの余白・角丸・白地に合わせて上書き */
.ary-form__input {
  padding: 18px 20px;
  font-size: 1.8rem;
  font-weight: 400;
  border: 1px solid #D6DECC;
  border-radius: 16px;
  background: #FEFEFE;
  color: #2C3327;
}
.ary-form__input::placeholder { color: #9BA595; }
.ary-form__input:focus { border-color: #6FB92C; outline: none; }
.ary-form__input--area {
  line-height: 1.8;
  resize: vertical;
}
.ary-form__submit {
  align-self: flex-start;
  padding: 20px 46px;
  border: 0;
  border-radius: 999px;
  background: #6FB92C;
  color: #FFFFFF;
  font-family: inherit;
  font-size: 1.9rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.3s ease;
}
.ary-form__submit:hover { background: #5FA522; }

/* 電話ブロックとフォームの間に仕切り線 */
.ary-contact__side {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding-bottom: 40px;
  border-bottom: 1px solid #E1EAD6;
}
/* 外枠は付けず、店舗ごとのカードに枠を持たせる。
   左右paddingはフォームボックス（38px 40px）と揃えて見出し位置を一致させる */
.ary-contact__tel-box {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 0 40px;
}
/* 見出しはフォーム・沿革と同じデザイン（黒系＋左に角丸の縦棒） */
.ary-contact__tel-title {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 2.8rem;
  font-weight: 700;
  line-height: normal;
  color: #2C3327;
}
.ary-contact__tel-title::before {
  content: "";
  flex: none;
  width: 6px;
  height: 1.1em;
  border-radius: 999px;
  background: #6FB92C;
}
.ary-contact__tel-text {
  font-size: 1.8rem;
  line-height: 1.9;
  color: #4A5344;
}
/* 2店舗を横並びに（左右のバランスを取る） */
.ary-contact__tel-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}
/* 本店・かねひで店それぞれを枠付きカードに */
.ary-contact__tel-item {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 26px 28px;
  border-radius: 28px;
  background: #FFFDEB;
  border: 1px solid #F2EDC4;
}
.ary-contact__tel-label {
  font-size: 1.7rem;
  font-weight: 700;
  color: #2C3327;
}
.ary-contact__tel-num {
  font-family: "Josefin Sans", "Zen Kaku Gothic New", sans-serif;
  font-size: 3rem;
  font-weight: 700;
  color: #376A10;
}
.ary-contact__tel-num:hover { opacity: 0.75; }
.ary-contact__tel-note {
  font-size: 1.6rem;
  color: #6F7A67;
}

/* -- LINE公式アカウント（見出し・カードは電話ブロックと同じ体裁で揃える） */
.ary-contact__line-box {
  display: flex;
  flex-direction: column;
  gap: 18px;
  /* 電話ブロックと続けて読ませず、別の問い合わせ手段として間を空ける */
  margin-top: 26px;
  padding: 0 40px;
}
.ary-contact__line-title {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 2.8rem;
  font-weight: 700;
  line-height: normal;
  color: #2C3327;
}
.ary-contact__line-title::before {
  content: "";
  flex: none;
  width: 6px;
  height: 1.1em;
  border-radius: 999px;
  background: #6FB92C;
}
.ary-contact__line-text {
  font-size: 1.8rem;
  line-height: 1.9;
  color: #4A5344;
}
/* 電話ブロックと同じく2店舗を横並びに */
.ary-contact__line-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}
.ary-contact__line-item {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 26px 28px;
  border-radius: 28px;
  background: #FFFDEB;
  border: 1px solid #F2EDC4;
}
.ary-contact__line-label {
  font-size: 1.7rem;
  font-weight: 700;
  color: #2C3327;
}
/* 友だち追加ボタン（contact・about の店舗紹介で共用）。
   緑ベタのボタン内なのでアイコンも白にする（既定の緑のままだと沈む） */
.ary-line-btn {
  margin-top: 10px;
}
.ary-line-btn .ary-btn__icon { color: #FFFFFF; }
/* 店舗紹介の定義リスト内では、他の行と高さを揃えるため
   上マージンを付けず、上下paddingも詰める */
.ary-line-btn--row,
.ary-line-prep--row { margin-top: 0; }
.ary-line-btn--row { padding-top: 8px; padding-bottom: 8px; }
.ary-line-prep--row { padding-top: 6px; padding-bottom: 6px; }
/* アカウント未開設の店舗：ボタンと同じ高さの枠で「準備中」を出す */
.ary-line-prep {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  margin-top: 10px;
  padding: 12px 22px;
  border: 2px dashed #D8E2CE;
  border-radius: 999px;
  background: #FFFFFF;
  font-size: 1.7rem;
  font-weight: 700;
  color: #6F7A67;
}

.ary-contact__hours {
  border-radius: 28px;
  border: 1px solid #E1EAD6;
  padding: 30px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.ary-contact__hours-title {
  font-size: 1.8rem;
  font-weight: 700;
}
.ary-contact__hours-body {
  font-size: 1.8rem;
  line-height: 1.9;
}
.ary-contact__hours-note {
  font-size: 1.6rem;
  color: #6F7A67;
}

@media (max-width: 896px) {
  .ary-contact { padding: 48px 16px 56px; grid-template-columns: 1fr; gap: 24px; }
  .ary-form { padding: 24px 20px; border-radius: 20px; }
  .ary-contact__tel-box { padding: 0 20px; }
  .ary-contact__line-box { margin-top: 16px; padding: 0 20px; }
  .ary-contact__side { padding-bottom: 24px; }
  .ary-form__title { font-size: 2.3rem; gap: 12px; margin-bottom: 18px; }
  .ary-contact__hours { border-radius: 20px; padding: 24px 20px; }
  .ary-contact__tel-item { border-radius: 20px; padding: 20px 20px; }
  .ary-contact__line-item { border-radius: 20px; padding: 20px 20px; }
}
@media (max-width: 639px) {
  .ary-form__row { font-size: 1.6rem; }
  .ary-form__input { font-size: 1.6rem; padding: 14px 16px; }
  .ary-contact__tel-title,
  .ary-contact__line-title { font-size: 2.1rem; }
  /* SPは2カラムだと番号が折り返すため1カラムに */
  .ary-contact__tel-list { grid-template-columns: 1fr; gap: 14px; }
  .ary-contact__line-list { grid-template-columns: 1fr; gap: 14px; }
  .ary-contact__tel-text,
  .ary-contact__line-text,
  .ary-contact__hours-body { font-size: 1.5rem; }
  .ary-contact__tel-num { font-size: 2.6rem; }
  .ary-form__submit { width: 100%; }
}

/* 必須ラベルはデザインでは label 名の下段に落ちる（column flex の別アイテム） */
.ary-form__require { font-weight: 700; }

/* SP：見出しの意図しない改行を防ぐ（デザインはPC想定の改行位置） */
@media (max-width: 639px) {
  .ary-mission__catch br,
  .ary-mv__lead br { display: none; }
}

/* ==========================================================================
   計測差分の反映（第2回：about / service）
   ========================================================================== */

/* 下層ページのセクション見出しはTOPより一段小さい（デザイン実測 38px上限） */
.ary-shead--sub .heading__ja { font-size: clamp(3.2rem, 3.3vw, 4.2rem); }

/* 写真プレースホルダの行送りはデザインでは指定なし（= normal） */
.ary-photo-note { line-height: normal; }
.ary-photo-note--sm { padding: 0; }

/* ボタン内アイコンはデザインのSVG幅（20px）に合わせる */
.ary-btn__icon {
  width: 20px;
  text-align: center;
}

/* 要確認バッジ：デザインでは会社概要テーブル内だけ左マージンを持つ */
.ary-badge-check { margin-left: 0; }
.ary-table .ary-badge-check { margin-left: 10px; }