/* 東京店（belog chez vous）の美容記事。土台は軽井沢店の column.css の写し（tools/make-column.rb が書き出す） */
:root { --forest: #1d2b23; --moss: #56695a; --ivory: #f5f0e6; --ivory-2: #faf7f1; --beige: #e7dcc8; --sand: #c8b597; --ink: #1b201c; --ink-soft: #4a514b; --line: rgba(27,32,28,.14);
  --mincho: "Shippori Mincho", "Hiragino Mincho ProN", "Yu Mincho", serif; --gothic: "Zen Kaku Gothic New", "Hiragino Sans", "Yu Gothic", sans-serif; --latin: "Cormorant Garamond", "Times New Roman", serif; }
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 70px; }
body { margin: 0; background: var(--ivory); color: var(--ink); font-family: var(--gothic); font-size: 16px; line-height: 2; letter-spacing: .03em; font-feature-settings: "palt" 1; line-break: strict; overflow-wrap: anywhere; }
a { color: inherit; }
.ch { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; justify-content: space-between; height: 56px; padding: 0 20px; background: var(--forest); color: var(--ivory); }
.ch a { text-decoration: none; }
.ch__logo { font-family: var(--latin); font-size: 22px; letter-spacing: .05em; }
.ch__logo b { font-weight: 500; }
.ch__sec { font-family: var(--latin); font-size: 14px; letter-spacing: .25em; padding: 12px 0 12px 12px; color: var(--sand); }
.cm { max-width: 720px; margin: 0 auto; padding: 18px 20px 40px; }
.crumb { font-size: 12px; color: var(--ink-soft); line-height: 1.6; }
.crumb a { text-decoration: none; border-bottom: 1px solid var(--line); }
.art__date { margin: 28px 0 4px; font-size: 13px; color: var(--moss); letter-spacing: .1em; }
h1 { font-family: var(--mincho); font-weight: 600; font-size: clamp(23px, 6vw, 32px); line-height: 1.55; letter-spacing: .04em; margin: 0 0 22px; color: var(--forest); }
.art__lead p:first-child { margin-top: 0; }
.art p { margin: 0 0 1.3em; }
.art h2, .more h2 { font-family: var(--mincho); font-weight: 600; font-size: clamp(19px, 5vw, 23px); line-height: 1.6; color: var(--forest); margin: 2.4em 0 .9em; padding-top: 1.1em; border-top: 1px solid var(--line); }
.toc { background: var(--ivory-2); border: 1px solid var(--line); padding: 16px 20px 6px; margin: 26px 0 8px; }
.toc p { margin: 0 0 6px; font-family: var(--mincho); font-weight: 600; color: var(--forest); }
.toc ol { margin: 0; padding-left: 1.4em; font-size: 15px; line-height: 1.8; }
.toc li { margin-bottom: 10px; }
.toc a { text-decoration: none; border-bottom: 1px solid var(--sand); }
.faq details { border-top: 1px solid var(--line); padding: 4px 0; }
.faq details:last-child { border-bottom: 1px solid var(--line); }
.faq summary { cursor: pointer; font-weight: 500; padding: 12px 28px 12px 0; position: relative; list-style: none; line-height: 1.7; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 4px; top: 10px; font-size: 20px; color: var(--moss); }
.faq details[open] summary::after { content: "−"; }
.faq details p { margin: 0 0 14px; color: var(--ink-soft); }
.list { list-style: none; margin: 0; padding: 0; }
.list li { border-top: 1px solid var(--line); }
.list li:last-child { border-bottom: 1px solid var(--line); }
.list a { display: block; padding: 18px 2px; text-decoration: none; }
.list time { display: block; font-size: 12px; color: var(--moss); letter-spacing: .1em; }
.list b { display: block; font-family: var(--mincho); font-weight: 600; font-size: 18px; line-height: 1.6; color: var(--forest); margin: 2px 0 4px; }
.list span { display: block; font-size: 14px; line-height: 1.8; color: var(--ink-soft); }
.more__all { text-align: right; font-size: 14px; }
.idx__h { margin-top: 28px; }
.idx__p { color: var(--ink-soft); margin: -8px 0 26px; }
.store { max-width: 720px; margin: 0 auto 0; padding: 30px 22px; background: var(--forest); color: var(--ivory); }
.store__en { font-family: var(--latin); font-size: 24px; letter-spacing: .06em; margin: 0 0 6px; color: var(--sand); }
.store p { margin: 0 0 18px; font-size: 15px; }
.store__btns { display: flex; flex-wrap: wrap; gap: 10px; }
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 46px; padding: 0 18px; border: 1px solid rgba(245,240,230,.5); text-decoration: none; font-size: 14px; letter-spacing: .06em; }
.btn--line { background: #06c755; border-color: #06c755; color: #fff; }
.cf { text-align: center; padding: 26px 20px 40px; font-size: 13px; color: var(--ink-soft); line-height: 2.2; }
.cf a { text-decoration: none; }
@media (min-width: 760px) { .store { margin-bottom: 0; } .cm { padding-top: 26px; } }
h1, h2, .list b, .toc a, .faq summary { word-break: auto-phrase; } /* 見出しだけ文節で改行（本文は行末までつめる） */

/* ブログらしい見せ方（11/6 ユーザー「美容記事として新しくページを作る・ブログっぽく」）：記事ごとの写真・分類・日付・題名・ひとこと */
.idx { background: var(--forest); color: var(--ivory); text-align: center; padding: 44px 20px 40px; }
.idx__en { margin: 0; font-family: var(--latin); font-style: italic; font-size: clamp(44px, 13vw, 72px); line-height: 1; letter-spacing: .02em; color: var(--sand); }
.idx .idx__h { margin: 10px 0 10px; color: var(--ivory); font-size: clamp(22px, 6vw, 28px); letter-spacing: .2em; }
.idx .idx__p { margin: 0 auto; max-width: 30em; color: rgba(245,240,230,.78); font-size: 14px; line-height: 1.9; }
.cat { display: inline-block; padding: 1px 10px; border: 1px solid var(--moss); border-radius: 999px; font-size: 11.5px; line-height: 1.7; letter-spacing: .08em; color: var(--moss); }
.posts { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 26px; }
.post a { display: block; text-decoration: none; background: var(--ivory-2); border: 1px solid var(--line); transition: border-color .3s, transform .4s; }
.post a:hover { border-color: var(--moss); transform: translateY(-2px); }
.post__img { display: block; aspect-ratio: 3 / 2; overflow: hidden; background: var(--beige); }
.post__img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.post__txt { display: block; padding: 16px 18px 18px; }
.post__meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.post__meta time { font-size: 12px; color: var(--moss); letter-spacing: .08em; }
.post b { display: block; margin: 8px 0 6px; font-family: var(--mincho); font-weight: 600; font-size: 18px; line-height: 1.6; color: var(--forest); word-break: auto-phrase; }
.post__desc { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; font-size: 13.5px; line-height: 1.85; color: var(--ink-soft); }
.post__more { display: inline-block; margin-top: 10px; font-family: var(--mincho); font-size: 13px; letter-spacing: .1em; color: var(--forest); border-bottom: 1px solid var(--sand); }
.post__more::after { content: " →"; font-family: var(--latin); }
/* 2件目からと「ほかの美容記事」は、左に小さな写真・右に文字の横並び（スマホで一覧しやすく） */
.posts .post:not(:first-child) a, .posts--rows .post a { display: grid; grid-template-columns: 112px 1fr; }
.posts .post:not(:first-child) .post__img, .posts--rows .post__img { aspect-ratio: auto; height: 100%; min-height: 112px; }
.posts .post:not(:first-child) .post__txt, .posts--rows .post__txt { padding: 12px 14px; }
.posts .post:not(:first-child) b, .posts--rows .post b { font-size: 15.5px; margin: 6px 0 0; }
.posts .post:not(:first-child) .post__desc, .posts .post:not(:first-child) .post__more, .posts--rows .post__desc, .posts--rows .post__more { display: none; }
.posts { gap: 16px; }
.posts .post:first-child { margin-bottom: 8px; }
.more .posts--rows { margin-top: 0; }
.empty { margin: 32px 0; text-align: center; color: var(--ink-soft); }
/* 記事のページ：分類と日付、題名の下に大きな写真 */
.art__meta { display: flex; align-items: center; gap: 10px; margin: 28px 0 10px; }
.art__meta time { font-size: 13px; color: var(--moss); letter-spacing: .1em; }
.art__eye { margin: 0 0 26px; aspect-ratio: 3 / 2; overflow: hidden; background: var(--beige); }
.art__eye img { display: block; width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 760px) {
  .cm { max-width: 960px; }
  .art { max-width: 720px; margin: 0 auto; }
  .crumb { max-width: 720px; margin: 0 auto; }
  main.cm > .crumb { max-width: none; }
  .posts { grid-template-columns: 1fr 1fr; gap: 28px; }
  .posts .post:not(:first-child) a { display: block; }
  .posts .post:not(:first-child) .post__img { aspect-ratio: 3 / 2; height: auto; min-height: 0; }
  .posts .post:not(:first-child) .post__txt { padding: 16px 18px 18px; }
  .posts .post:not(:first-child) b { font-size: 17px; margin: 8px 0 6px; }
  .posts .post:not(:first-child) .post__desc, .posts .post:not(:first-child) .post__more { display: -webkit-box; }
  .posts .post:not(:first-child) .post__more { display: inline-block; }
  .posts .post:first-child { grid-column: 1 / -1; margin: 0; }
  .posts .post:first-child a { display: grid; grid-template-columns: 1.25fr 1fr; }
  .posts .post:first-child .post__img { aspect-ratio: auto; height: 100%; min-height: 300px; }
  .posts .post:first-child .post__txt { padding: 28px 30px; align-self: center; }
  .posts .post:first-child b { font-size: 22px; }
  .more { max-width: 720px; margin: 0 auto; }
  .more .posts--rows { grid-template-columns: 1fr; gap: 14px; }
  .store { max-width: 960px; }
}
.art__menu { margin: 2.2em 0 0; padding: 16px 18px; background: var(--ivory-2); border: 1px solid var(--line); border-left: 3px solid var(--moss); font-family: var(--mincho); font-size: 15px; }
.art__menu a { text-decoration: none; color: var(--forest); border-bottom: 1px solid var(--sand); }
/* 戻る：金の細い輪と ‹ だけのさりげない印（11/7・トップや物語のページと同じ・back.js） */
.page-back { position: fixed; z-index: 49; left: 14px; top: calc(56px + 12px); display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 999px; background: rgba(247, 244, 237, .45); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); border: 1px solid rgba(168, 139, 85, .6); text-decoration: none; font-size: 0; }
.page-back span { font-size: 19px; line-height: 1; margin: -2px 1px 0 0; color: #a88b55; }
.page-back::after { content: ""; position: absolute; inset: -6px; }
@media (min-width: 768px) { .page-back { left: 24px; top: calc(56px + 18px); } }

/* 戻るボタン（11/6・make-column.rb で足す） */
.ch__back { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; padding: 0 14px 0 0; margin-right: 6px; font-size: 13px; letter-spacing: .12em; color: var(--sand); border-right: 1px solid rgba(255,255,255,.18); }
.ch__back span { font-size: 22px; line-height: 1; margin-top: -2px; }
.ch__logo { margin-right: auto; }
@media (max-width: 360px) { .ch { padding: 0 14px; } .ch__logo { font-size: 19px; } .ch__sec { letter-spacing: .14em; } }
main.cm > .crumb { padding-left: 46px; min-height: 34px; display: flex; align-items: center; flex-wrap: wrap; gap: 0 .3em; }
@media (min-width: 768px) { main.cm > .crumb { padding-left: 52px; } }
.page-back { width: auto; height: 32px; padding: 0 14px 0 10px; gap: 5px; border: 0; background: rgba(247, 244, 237, .78); font-family: "Cormorant Garamond", "Times New Roman", serif; font-style: italic; font-size: 16px; letter-spacing: .08em; color: #7a6440; box-shadow: 0 1px 0 rgba(168, 139, 85, .35); }
.page-back span { font-style: normal; font-size: 18px; margin: -2px 0 0; color: #7a6440; }
main.cm > .crumb { padding-left: 84px; }
.page-back { background: none; -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none; padding: 0 6px; }
.page-back span { color: inherit; }
main.cm > .crumb { padding-left: 72px; }

/* 11/8 戻るは上だけに（読みながら文字に重ならない）・縦長の写真 */
.page-back { position: absolute; }
.art__eye--tall { aspect-ratio: 4 / 5; max-width: 480px; margin-left: auto; margin-right: auto; }
.art__fig { margin: 28px 0; } .art__fig img { display: block; width: 100%; height: auto; }

/* 11/10 写真は元の形のまま（切り取らない・ユーザー「美容記事の写真は全て元写真で」） */
.post__img, .posts .post:not(:first-child) .post__img, .posts--rows .post__img, .art__eye, .art__eye--tall { aspect-ratio: auto; height: auto; min-height: 0; max-width: none; overflow: hidden; }
.post__img { display: flex; align-items: center; justify-content: center; background: #efe9de; }
.post__img img { width: 100%; height: auto; max-height: 440px; object-fit: contain; }
.posts .post:not(:first-child) a, .posts--rows .post a { align-items: center; }
.posts .post:not(:first-child) .post__img, .posts--rows .post__img { align-self: stretch; }
.art__eye { display: flex; justify-content: center; background: none; }
.art__eye img, .art__fig img { width: 100%; height: auto; max-height: min(84vh, 760px); margin: 0 auto; object-fit: contain; }
/* 11/10 大きさのつり合い：縦長の写真が画面を占めすぎないよう、高さの上限から幅を決める（切らない） */
.art { --mh: min(380px, 50vh); }
.art__eye img, .art__fig img { width: min(100%, calc(var(--mh) * var(--r, 1.5))); max-height: none; }
.art__eye { margin-bottom: 30px; } .art__fig { margin: 30px 0; display: flex; justify-content: center; }
.posts .post:not(:first-child) .post__img, .posts--rows .post__img { width: 112px; height: 112px; align-self: center; margin: 10px 0 10px 10px; padding: 6px; background: #f3eee4; box-shadow: inset 0 0 0 1px rgba(52, 73, 92, .08); box-sizing: border-box; }
.posts .post:not(:first-child) .post__img img, .posts--rows .post__img img { width: 100%; height: 100%; max-height: none; object-fit: contain; }
.posts .post:not(:first-child) a, .posts--rows .post a { grid-template-columns: 122px 1fr; }
.posts .post:first-child .post__img { padding: 10px; background: #f3eee4; }
.posts .post:first-child .post__img img { max-height: 360px; }
@media (min-width: 760px) {
  .art { --mh: 560px; }
  .posts .post:not(:first-child) a { grid-template-columns: none; }
  .posts .post:not(:first-child) .post__img { width: auto; height: 300px; margin: 0; padding: 12px; }
  .more .posts.posts--rows .post a { display: grid; grid-template-columns: 122px 1fr; }
  .more .posts.posts--rows .post .post__img { width: 112px; height: 112px; min-height: 0; margin: 10px 0 10px 10px; padding: 6px; }
  .more .posts.posts--rows .post .post__img img { max-height: none; }
  .more .posts.posts--rows .post .post__txt { padding: 12px 16px; align-self: center; }
  .more .posts.posts--rows .post .post__desc, .more .posts.posts--rows .post .post__more { display: none; }
  .more .posts.posts--rows .post b { font-size: 16px; margin: 6px 0 0; }
  .posts .post:not(:first-child) .post__img img { max-height: 276px; }
  .posts .post:first-child .post__img { height: 100%; min-height: 360px; }
  .posts .post:first-child .post__img img { max-height: 460px; }
}

/* 11/10 ユーザー「トップを大きくせず全てカードで」：一覧の1件目も、ほかと同じカード（スマホは横並びの小さなカード・PC は2列のカード） */
.posts .post:nth-child(n) { grid-column: auto; margin: 0; }
.posts .post:nth-child(n) a { display: grid; grid-template-columns: 122px 1fr; align-items: center; }
.posts .post:nth-child(n) .post__img { width: 112px; height: 112px; min-height: 0; aspect-ratio: auto; align-self: center; margin: 10px 0 10px 10px; padding: 6px; background: #f3eee4; box-shadow: inset 0 0 0 1px rgba(52, 73, 92, .08); box-sizing: border-box; }
.posts .post:nth-child(n) .post__img img { width: 100%; height: 100%; max-height: none; object-fit: contain; }
.posts .post:nth-child(n) .post__txt { padding: 12px 14px; align-self: center; }
.posts .post:nth-child(n) b { font-size: 15.5px; margin: 6px 0 0; }
.posts .post:nth-child(n) .post__desc, .posts .post:nth-child(n) .post__more { display: none; }
@media (min-width: 760px) {
  .posts .post:nth-child(n) a { display: block; grid-template-columns: none; }
  .posts .post:nth-child(n) .post__img { width: auto; height: 300px; margin: 0; padding: 12px; }
  .posts .post:nth-child(n) .post__img img { max-height: 276px; }
  .posts .post:nth-child(n) .post__txt { padding: 16px 18px 18px; }
  .posts .post:nth-child(n) b { font-size: 17px; margin: 8px 0 6px; }
  .posts .post:nth-child(n) .post__desc { display: -webkit-box; }
  .posts .post:nth-child(n) .post__more { display: inline-block; }
}