@charset "UTF-8";
/* ==========================================================================
   和凛 商品一覧ページ共通ツール
   ・気になる（お気に入り）
   ・着用日での空き検索
   ・下見予約への動線バナー
   留袖／訪問着／色無地／単衣の各一覧ページで読み込む。
   1ファイルに集約しているので、直すときはここだけを直せばよい。
   ページ側は #main と .item_box（中に <h3> と /syoukai/ へのリンク）
   という旧来の作りをそのまま使う。
   ========================================================================== */

/* === 空き検索 ============================================================
   availability.json（予約更新くんが更新）を読み、着用日で絞り込む。
   データは同一ドメインの /kimono-catalog/availability.json をそのまま使う。 */
.av-box{
  max-width:1120px; margin:clamp(24px,3vw,40px) auto clamp(18px,2.4vw,28px);
  padding:clamp(18px,2.2vw,26px) clamp(16px,2vw,28px);
  background:#faf8f4; border-top:2px solid #a8894e;
  border-bottom:1px solid rgba(36,31,27,.14);
  font-family:"Zen Old Mincho","Hiragino Mincho ProN",serif;
}
.av-box__en{display:block; font-size:12px; letter-spacing:.24em; color:#a08243}
.av-box__ttl{
  font-family:"Shippori Mincho B1","Hiragino Mincho ProN",serif;
  font-size:clamp(18px,2vw,22px); color:#241f1b; margin:8px 0 0; letter-spacing:.03em;
}
.av-box__sub{font-size:13.5px; color:#6f6864; margin:8px 0 0; line-height:1.8}
.av-row{display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin-top:16px}
.av-row label{font-size:14px; color:#4a4441}
.av-input{
  font:inherit; font-size:15px; padding:9px 12px; min-height:44px;
  border:1px solid rgba(36,31,27,.28); border-radius:3px; background:#fff; color:#241f1b;
}
.av-btn{
  font-family:"Shippori Mincho B1","Hiragino Mincho ProN",serif; font-size:14.5px;
  padding:10px 22px; min-height:44px; cursor:pointer; border-radius:3px;
  border:1px solid #a8894e; background:#a8894e; color:#fff;
}
.av-btn:hover{background:#8a6f3c; border-color:#8a6f3c}
.av-clear{
  font-family:inherit; font-size:14px; padding:10px 16px; min-height:44px; cursor:pointer;
  border:1px solid rgba(36,31,27,.28); background:#fff; color:#4a4441; border-radius:3px;
}
.av-result{margin-top:12px; font-size:14px; color:#4a4441; min-height:1.2em}
/* 商品カードにつける空き表示 */
.item_box{position:relative}
.av-tag{
  display:inline-block; margin:0 0 6px; padding:3px 10px; border-radius:2px;
  font-family:"Zen Old Mincho","Hiragino Mincho ProN",serif; font-size:12.5px; letter-spacing:.04em;
}
.av-tag--ok{background:rgba(70,110,70,.10); color:#2f6b3a; border:1px solid rgba(70,110,70,.30)}
.av-tag--ng{background:rgba(150,60,50,.08); color:#9a3d33; border:1px solid rgba(150,60,50,.28)}
/* 予約済みの商品は消さずに薄く残す。別の日なら空いていることが多いので、
   「こういうお着物もある」ことがお客様に伝わる状態を保つ。タグは薄くしない。 */
.av-dim > img, .f-dim > img{opacity:.32; filter:grayscale(.62)}
.av-dim .detail > *:not(.av-tag):not(.fl-tag), .f-dim .detail > *:not(.av-tag):not(.fl-tag){opacity:.40}
.av-dim > img, .av-dim .detail > *, .f-dim > img, .f-dim .detail > *{transition:opacity .25s ease, filter .25s ease}
.av-dim:hover > img, .f-dim:hover > img{opacity:.6; filter:grayscale(.28)}
.av-dim:hover .detail > *:not(.av-tag):not(.fl-tag), .f-dim:hover .detail > *:not(.av-tag):not(.fl-tag){opacity:.72}
/* 追従ボタン。ページに来た時点で「着用日で探せる」と分かるようにし、
   検索したあとは「絞り込み中」であることと解除方法を常に見せる。
   左下の宅配レンタルバナー（#calloutElm）と重ならないよう右下に置く。 */
.av-fab{
  display:flex; align-items:stretch; background:#fff;
  border:1px solid #a8894e; border-radius:999px; overflow:hidden;
  box-shadow:0 3px 14px rgba(36,31,27,.22);
  font-family:"Shippori Mincho B1","Hiragino Mincho ProN",serif;
}
.av-fab__go{
  appearance:none; -webkit-appearance:none; border:0; cursor:pointer;
  background:#a8894e; color:#fff; font:inherit; font-size:14px; letter-spacing:.05em;
  padding:0 20px; min-height:46px; display:flex; align-items:center; white-space:nowrap;
}
.av-fab__go:hover{background:#8a6f3c}
.av-fab__clear{
  appearance:none; -webkit-appearance:none; cursor:pointer;
  border:0; border-left:1px solid rgba(36,31,27,.2); background:#fff;
  color:#9a3d33; font:inherit; font-size:13.5px; letter-spacing:.04em;
  padding:0 16px; min-height:46px; display:none; align-items:center; white-space:nowrap;
}
.av-fab__clear:hover{background:#fbf4f3}
.av-fab.is-on .av-fab__clear{display:flex}
.av-fab.is-on .av-fab__go{background:#6f5a30}
/* 追従ボタンから飛んできた時、検索欄を一度光らせて位置を知らせる */
@keyframes avFlash{
  0%,100%{box-shadow:0 0 0 0 rgba(168,137,78,0)}
  25%{box-shadow:0 0 0 5px rgba(168,137,78,.34)}
}
.av-box--flash{animation:avFlash 1.5s ease}
@media (max-width:767px){
  /* 左下の宅配バナー（最大50vw）と横に並ぶため、文字も余白も詰める。
     文言自体もJS側で短くしている（「12/28 絞込中」） */
  .av-fab{max-width:calc(50vw - 16px)}
  .av-fab__go{font-size:12px; padding:0 11px; min-height:44px}
  .av-fab__clear{font-size:12px; padding:0 10px; min-height:44px}
}
@media (prefers-reduced-motion:reduce){
  .av-box--flash{animation:none}
}

/* === 下見バナー ==========================================================
   旧「宅配レンタル」「事前下見も受付中」の2カラムを置き換えたもの。 */
.sm-bnr{
  max-width:1120px; margin:clamp(28px,3.4vw,44px) auto clamp(16px,2vw,22px);
  padding:clamp(22px,2.8vw,32px) clamp(20px,2.6vw,34px);
  background:linear-gradient(180deg,#fdf9f2 0%,#faf6ee 100%);
  border:1px solid rgba(168,137,78,.28); border-radius:6px;
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:18px 26px; font-family:"Zen Old Mincho","Hiragino Mincho ProN",serif;
}
.sm-bnr__text{flex:1 1 380px; min-width:0}
.sm-bnr__en{
  display:block; font-family:"Shippori Mincho B1",serif; font-size:11.5px;
  letter-spacing:.24em; color:#a08243; margin-bottom:9px;
}
.sm-bnr__ja{
  display:block; font-family:"Shippori Mincho B1","Hiragino Mincho ProN",serif;
  font-size:clamp(18px,2.1vw,23px); color:#241f1b; letter-spacing:.04em; line-height:1.5;
}
.sm-bnr__sub{
  display:block; font-size:13.5px; color:#6f6864; line-height:1.9; margin-top:8px;
}
/* 旧CSSの basic_setting.css に a:link{color:#333} があり、
   クラスだけの指定（詳細度0,1,0）では負けて文字が黒くなる。
   a.クラス:link（0,2,1）で受け止める。以下のリンクすべて同じ理由。 */
.sm-bnr__guide,
a.sm-bnr__guide:link, a.sm-bnr__guide:visited{
  display:inline-block; margin-top:12px; font-size:13.5px;
  color:#7a5c26; text-decoration:underline; text-underline-offset:3px;
}
a.sm-bnr__guide:hover{color:#a8894e}
.sm-bnr__btn,
a.sm-bnr__btn:link, a.sm-bnr__btn:visited{
  flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center;
  font-family:"Shippori Mincho B1",serif; font-size:15px; letter-spacing:.14em;
  color:#fff; background:#8a6f3c; border:1px solid #8a6f3c; border-radius:3px;
  padding:16px 30px; min-height:54px; text-decoration:none; white-space:nowrap;
  transition:background .18s ease, color .18s ease;
}
/* ホバーで白地に黒へ反転させる */
a.sm-bnr__btn:hover{background:#fff; border-color:#8a6f3c; color:#241f1b}
.sm-links{
  max-width:1120px; margin:0 auto clamp(24px,3vw,40px);
  display:flex; flex-wrap:wrap; gap:14px; justify-content:center;
}
.sm-links a{flex:0 1 340px; line-height:0}
.sm-links img{width:100%; height:auto}
@media (max-width:600px){
  .sm-bnr{flex-direction:column; align-items:stretch; text-align:left}
  /* 縦並びでは flex-basis が高さになる。380px のままだと文章の下に
     大きな空白ができるため auto に戻す */
  .sm-bnr__text{flex:0 1 auto}
  .sm-bnr__btn{width:100%}
}

/* === 気になる（お気に入り） ==============================================
   選んだお着物は localStorage に貯め、/plan/soudan/ でまとめて相談できる。
   キー名 walin_favorites はカタログ側と共通。 */
.fav-guide{
  max-width:1120px; margin:0 auto clamp(20px,2.6vw,30px);
  padding:clamp(18px,2.2vw,26px) clamp(16px,2vw,24px);
  background:#faf8f4; border-top:2px solid #a8894e;
  border-bottom:1px solid rgba(36,31,27,.14);
  font-family:"Zen Old Mincho","Hiragino Mincho ProN",serif; text-align:center;
}
.fav-guide__title{
  font-family:"Shippori Mincho B1","Hiragino Mincho ProN",serif;
  font-size:clamp(16px,1.9vw,19px); color:#241f1b; margin:0 0 16px; letter-spacing:.04em;
  /* 「…いただけま／す」と最後の1文字だけ落ちるのを防ぐ */
  word-break:auto-phrase; text-wrap:pretty;
}
.fav-guide__steps{
  display:flex; flex-wrap:wrap; align-items:flex-start; justify-content:center; gap:6px 10px;
}
.fav-guide__step{
  display:flex; flex-direction:column; align-items:center; gap:7px;
  flex:0 1 150px; font-size:12.5px; color:#6f6864; line-height:1.7;
}
.fav-guide__num{
  font-family:"Shippori Mincho B1",serif; font-size:12px;
  letter-spacing:.16em; color:#a08243;
}
.fav-guide__icon{
  width:46px; height:46px; border-radius:50%; background:#fff;
  border:1px solid rgba(168,137,78,.4); color:#a8894e; font-size:19px;
  display:flex; align-items:center; justify-content:center;
}
.fav-guide__demo{
  display:inline-flex; align-items:center; gap:7px; min-height:46px;
  background:#8a6f3c; color:#fff; border-radius:999px; padding:0 16px;
  font-family:"Shippori Mincho B1",serif; font-size:13px; letter-spacing:.06em;
  white-space:nowrap;
}
.fav-guide__demo b{
  background:#fff; color:#8a6f3c; border-radius:50%;
  width:20px; height:20px; font-size:12px; font-weight:400;
  display:inline-flex; align-items:center; justify-content:center;
}
.fav-guide__arrow{color:rgba(168,137,78,.6); font-size:17px; align-self:center}
.fav-guide__note{font-size:12.5px; color:#6f6864; margin:14px 0 0; line-height:1.8}
@media (max-width:600px){
  .fav-guide__arrow{display:none}
  .fav-guide__steps{gap:16px 10px}
  .fav-guide__step{flex:1 1 90px}
}

/* 商品カードの ♡ */
.fav-btn{
  position:absolute; top:8px; right:8px; z-index:3;
  width:42px; height:42px; border-radius:50%; cursor:pointer;
  border:1px solid rgba(36,31,27,.14); background:rgba(255,255,255,.92);
  color:#a8894e; font-size:19px; line-height:1; padding:0;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 1px 5px rgba(36,31,27,.14);
  transition:background .18s ease, color .18s ease, transform .18s ease;
}
.fav-btn:hover{background:#fff; transform:scale(1.06)}
.fav-btn.is-on{background:#8a6f3c; border-color:#8a6f3c; color:#fff}
/* 予約済みでグレーにした商品でも ♡ は薄くしない */
.av-dim > .fav-btn, .f-dim > .fav-btn{opacity:1}

/* === 画面右下の追従ボタン（気になる＋着用日を縦に積む） ================== */
.wa-fabs{
  position:fixed; right:14px; bottom:14px; z-index:21;
  display:flex; flex-direction:column; align-items:flex-end; gap:10px;
}
.fav-fab,
a.fav-fab:link, a.fav-fab:visited{
  display:none; align-items:center; gap:9px; text-decoration:none;
  font-family:"Shippori Mincho B1","Hiragino Mincho ProN",serif;
  font-size:14px; letter-spacing:.05em; white-space:nowrap;
  background:#8a6f3c; color:#fff; border:1px solid #8a6f3c; border-radius:999px;
  padding:0 20px; min-height:46px; box-shadow:0 3px 14px rgba(36,31,27,.22);
  transition:background .18s ease, color .18s ease;
}
.fav-fab.is-on,
a.fav-fab.is-on:link, a.fav-fab.is-on:visited{display:inline-flex}
/* ホバーで白地に黒へ反転させる。数字の丸も一緒に反転させる */
a.fav-fab:hover{background:#fff; border-color:#8a6f3c; color:#241f1b}
.fav-fab__count{
  background:#fff; color:#8a6f3c; border-radius:50%;
  width:22px; height:22px; font-size:12.5px;
  display:inline-flex; align-items:center; justify-content:center;
  transition:background .18s ease, color .18s ease;
}
a.fav-fab:hover .fav-fab__count{background:#8a6f3c; color:#fff}
@media (max-width:767px){
  .wa-fabs{right:8px; bottom:75px; gap:8px}
  .fav-fab{font-size:12.5px; padding:0 13px; min-height:44px; max-width:calc(50vw - 16px)}
}
@media (max-width:600px){
  .av-row{gap:8px}
  .av-input,.av-btn,.av-clear{width:100%}
}

/* === ご利用方法・ご予算の絞り込み ========================================
   訪問着ページなど、来店価格と宅配価格が併記されている一覧で使う。
   宅配レンタルのバナーで別ページへ飛ばしていた動線の置き換え。 */
.fl-box{
  max-width:1120px; margin:clamp(20px,2.6vw,30px) auto clamp(18px,2.4vw,28px);
  padding:clamp(18px,2.2vw,26px) clamp(16px,2vw,28px);
  background:#fff; border-top:2px solid var(--wa-gold, #a8894e);
  border-bottom:1px solid rgba(36,31,27,.14);
  font-family:"Zen Old Mincho","Hiragino Mincho ProN",serif;
}
.fl-box__en{display:block; font-size:12px; letter-spacing:.24em; color:#a08243}
.fl-box__ttl{
  font-family:"Shippori Mincho B1","Hiragino Mincho ProN",serif;
  font-size:clamp(18px,2vw,22px); color:#241f1b; margin:8px 0 0; letter-spacing:.03em;
}
.fl-box__sub{font-size:13.5px; color:#6f6864; margin:8px 0 0; line-height:1.8}
.fl-row{display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin-top:16px}
.fl-row__label{
  flex:0 0 auto; font-size:14px; color:#4a4441; min-width:6.5em;
}
.fl-btn{
  font-family:"Zen Old Mincho","Hiragino Mincho ProN",serif; font-size:14.5px;
  padding:11px 18px; min-height:46px; cursor:pointer; border-radius:3px;
  border:1px solid rgba(36,31,27,.22); background:#fff; color:#4a4441;
  transition:background .18s ease, color .18s ease, border-color .18s ease;
}
.fl-btn:hover{border-color:#a8894e; color:#241f1b}
.fl-btn.is-on{
  background:#a8894e; border-color:#a8894e; color:#fff;
}
.fl-result{margin-top:14px; font-size:14px; color:#4a4441; min-height:1.2em}
/* 条件に合わない商品は、空き状況と同じく薄く残す。
   薄いだけでは理由が伝わらないので、宅配できない商品には札を出す。 */
.fl-tag{
  display:inline-block; margin:0 0 6px; padding:3px 10px; border-radius:2px;
  font-family:"Zen Old Mincho","Hiragino Mincho ProN",serif; font-size:12.5px; letter-spacing:.04em;
  background:rgba(36,31,27,.06); color:#6f6864; border:1px solid rgba(36,31,27,.18);
}
@media (max-width:600px){
  .fl-row{gap:8px}
  .fl-row__label{flex:0 0 100%; min-width:0; margin-bottom:-2px}
  .fl-btn{flex:1 1 auto}
}