/* nail salon ricca (demo 03) : phone-width column on every screen */
:root {
  --c: #d8477a;
  --c2: #e77aa0;
  --cream: #fbeff1;
  --cream2: #f5dbe1;
  --brown: #2a2224;
  --ink: #2a2224;
  --sub: #8d7b73;
  --line: #eedde1;
  --red: #d6283f;
  --marker: #ffe37a;
  --en: "Josefin Sans", sans-serif;
  --disp: "Archivo", "Josefin Sans", sans-serif;
  --grad: #2a2224;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 20px; background: var(--cream); }
body { margin: 0; color: var(--ink); font-family: "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif; font-size: 14.5px; line-height: 1.95; -webkit-text-size-adjust: 100%; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, p, dl, dd, figure { margin: 0; }
p + p { margin-top: .9em; }
table { border-collapse: collapse; width: 100%; }
.marker { background: linear-gradient(transparent 58%, var(--marker) 58%); font-weight: 700; }
.red { color: var(--red); font-weight: 700; }
.note { font-size: 12px; color: var(--sub); line-height: 1.7; margin-top: 12px; }
.note--center { text-align: center; margin-top: 22px; }
.dot { font-family: var(--en); font-size: 13px; color: var(--c); letter-spacing: .04em; line-height: 1.4; }
.dot::before { content: "・"; }

/* wide screens: fixed brand panel left, nav right, the site itself stays 440px */
.bg, .pcnav { display: none; }
.col { position: relative; z-index: 1; max-width: 440px; margin: 0 auto; background: #fff; padding-bottom: 58px; overflow: clip; }
.demo-bar { margin: 0; padding: 7px 14px; background: var(--ink); color: #fff; font-size: 11px; line-height: 1.6; text-align: center; }
.demo-bar a { margin-left: 6px; }

/* header: logo block pinned to the corner */
.head { position: sticky; top: 0; z-index: 30; height: 0; }
.head__logo { position: absolute; left: 0; top: 0; display: block; padding: 20px 26px 16px; background: var(--c); color: #fff; font-family: "Comfortaa", sans-serif; font-size: 30px; line-height: 1; letter-spacing: .04em; text-decoration: none; }
.menu { position: absolute; right: 12px; top: 12px; }
.menu summary { list-style: none; width: 48px; height: 48px; border-radius: 50%; background: #fff; box-shadow: 0 2px 10px rgba(180, 90, 60, .18); display: grid; place-content: center; gap: 6px; cursor: pointer; }
.menu summary::-webkit-details-marker { display: none; }
.menu summary i { display: block; width: 22px; height: 2px; background: var(--c); }
.menu ul { position: absolute; right: -12px; top: 60px; width: min(100vw, 440px); background: #fff; padding: 8px 28px 22px; box-shadow: 0 14px 24px rgba(120, 60, 40, .12); }
.menu li a { display: flex; justify-content: space-between; align-items: baseline; padding: 14px 2px; border-bottom: 1px solid var(--line); text-decoration: none; font-weight: 500; }
.menu li small { font-family: var(--en); color: var(--c); font-size: 13px; letter-spacing: .08em; }

/* section title: half white, half cream, huge condensed word */
.st { display: block; margin: 0; padding: 62px 24px 40px; text-align: center; background: linear-gradient(90deg, #fff 50%, var(--cream) 50%); font-weight: 400; line-height: 1; }
.st--re { background: linear-gradient(90deg, var(--cream) 50%, #fff 50%); }
.sec--tint .st { background: linear-gradient(90deg, #fff 50%, var(--cream2) 50%); }
.sec--tint .st--re { background: linear-gradient(90deg, var(--cream2) 50%, #fff 50%); }
.st small { display: block; font-size: 13px; color: var(--c); letter-spacing: .2em; margin-bottom: 12px; }
.st span { display: block; font-family: var(--disp); font-size: 76px; color: var(--c); letter-spacing: .01em; text-transform: uppercase; }
.in .st { margin: 0 -24px 30px; }
.st--page { padding-top: 104px; }
.st--page span { font-size: 84px; }
.crumb { padding: 10px 24px; font-size: 11px; color: var(--sub); background: var(--cream); }

.in { padding: 0 24px; }
.sec { padding: 0 0 60px; }
.sec--tint { background: var(--cream); }
.sec--top { padding-top: 30px; padding-bottom: 60px; }
.lead { margin-bottom: 26px; }
.more { text-align: center; margin-top: 30px; }
.more--left { text-align: left; }
.link { display: inline-block; padding: 12px 54px 12px 26px; border: 1px solid var(--c); border-radius: 99px; color: var(--c); text-decoration: none; font-weight: 700; font-size: 13.5px; position: relative; background: #fff; }
.link::after { content: ""; position: absolute; right: 22px; top: 50%; width: 16px; height: 5px; margin-top: -4px; border-bottom: 1px solid var(--c); border-right: 1px solid var(--c); transform: skewX(45deg); }
.btn { display: block; padding: 16px 18px; background: var(--ink); color: #fff; text-align: center; text-decoration: none; font-weight: 700; }
.btn--main { background: var(--grad); }
.btn--line { background: #06c755; }
.h2 { font-size: 21px; font-weight: 500; margin: 52px 0 18px; padding-bottom: 14px; position: relative; line-height: 1.5; }
.h2::after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; background: linear-gradient(90deg, var(--c) 34px, var(--line) 34px); }
.h3 { font-size: 15.5px; margin: 26px 0 10px; }

/* hero */
.mv { position: relative; padding: 0 30px 0 0; margin-bottom: 78px; background: linear-gradient(90deg, #fff 50%, var(--cream) 50%); }
.mv__photo { position: relative; }
.mv__photo img { width: 100%; aspect-ratio: 3 / 4.25; object-fit: cover; object-position: 60% 50%; }
.mv__photo::after { content: ""; position: absolute; inset: 40% 0 0; background: linear-gradient(transparent, rgba(226, 84, 66, .82)); }
.mv__copy { position: absolute; left: 22px; right: 40px; bottom: 76px; color: #fff; font-weight: 400; line-height: 1; }
.mv__copy span { display: block; font-family: var(--disp); font-size: 34px; letter-spacing: .04em; }
.mv__copy b { display: block; font-family: var(--disp); font-size: 132px; font-weight: 400; letter-spacing: .01em; line-height: .86; margin-left: -4px; }
.mv__copy small { display: block; margin-top: 12px; font-size: 13px; font-weight: 500; letter-spacing: .06em; line-height: 1.6; }
.mv__btn, .foot__btn, .pcnav__btn { display: block; position: relative; padding: 18px 60px 16px 26px; background: var(--grad); color: #fff; text-decoration: none; line-height: 1.3; }
.mv__btn { position: absolute; left: 30px; right: 0; bottom: -40px; box-shadow: 0 10px 24px rgba(230, 90, 70, .28); }
.mv__btn small, .foot__btn small, .pcnav__btn small { display: block; font-size: 12px; font-weight: 700; }
.mv__btn b, .foot__btn b, .pcnav__btn b { font-family: var(--en); font-size: 22px; font-weight: 400; letter-spacing: .22em; }
.mv__btn::after, .foot__btn::after, .pcnav__btn::after { content: "+"; position: absolute; right: 24px; top: 50%; margin-top: -17px; font-family: var(--en); font-weight: 300; font-size: 30px; line-height: 34px; }

/* design cards */
.dzs { display: grid; grid-template-columns: 1fr 1fr; gap: 30px 14px; }
.dzs--scroll { display: flex; gap: 14px; overflow-x: auto; margin: 0 -24px; padding: 0 24px 12px; scroll-snap-type: x mandatory; }
.dzs--scroll .dz { flex: 0 0 64%; scroll-snap-align: start; }
.dz { position: relative; }
.dz__photo img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.dz__no { position: absolute; left: 0; top: 0; padding: 5px 10px 3px; background: var(--c); color: #fff; font-family: var(--en); font-size: 12px; letter-spacing: .08em; line-height: 1.3; }
.dz__name { font-weight: 700; line-height: 1.5; margin-top: 10px; font-size: 14px; }
.dz__price { font-size: 12px; color: var(--c); font-weight: 700; margin-top: 2px; }
.dz__price b { font-family: var(--en); font-size: 22px; font-weight: 400; margin: 0 2px; }
.dz__note { font-size: 12px; color: var(--sub); line-height: 1.65; margin-top: 4px; }
.dz__btn { display: block; margin-top: 10px; padding: 9px 4px; background: var(--ink); color: #fff; text-align: center; text-decoration: none; font-size: 12px; font-weight: 700; }
.dtabs { display: flex; gap: 6px; overflow-x: auto; margin: 0 -24px 4px; padding: 0 24px 6px; }
.dtabs a { display: block; white-space: nowrap; padding: 6px 16px; background: var(--cream); border-radius: 99px; text-decoration: none; font-size: 13px; font-weight: 700; color: var(--c); }
.dgroup { padding-top: 34px; }
.dgroup__ttl { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 14px; margin: 0 -24px 20px; padding: 14px 24px; background: var(--brown); color: #fff; font-size: 12.5px; font-weight: 400; }
.dgroup__ttl b { font-size: 19px; font-weight: 500; }

/* concept blocks: photo to one edge, text card overlapping */
.concept { background: var(--cream); padding-bottom: 64px; }
.concept .st { margin-bottom: 0; background: linear-gradient(90deg, #fff 50%, var(--cream) 50%); }
.cb + .cb { margin-top: 44px; }
.cb__img { position: relative; margin-right: 34px; }
.cb__img img { width: 100%; aspect-ratio: 1 / .9; object-fit: cover; }
.cb__v { position: absolute; right: -30px; top: 18px; writing-mode: vertical-rl; font-family: var(--disp); font-size: 34px; line-height: 1; color: var(--cream2); letter-spacing: .02em; white-space: nowrap; }
.cb__text { position: relative; margin: -34px 0 0 30px; padding: 30px 26px 34px 28px; background: #fff; }
.cb__text h3 { font-size: 25px; font-weight: 400; line-height: 1.5; margin: 12px 0 14px; }
.cb--re .cb__img { margin: 0 0 0 34px; }
.cb--re .cb__v { right: auto; left: -30px; }
.cb--re .cb__text { margin: -34px 30px 0 0; }

/* price */
.courses { display: grid; gap: 12px; }
.course { display: flex; gap: 16px; padding: 18px; background: var(--cream); }
.course__photo { flex: 0 0 38%; }
.course__photo img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.course__label { font-family: var(--en); font-size: 13px; color: var(--c); line-height: 1.2; }
.course__price { font-family: var(--en); font-weight: 300; font-size: 30px; line-height: 1.25; margin: 2px 0 6px; }
.course__price small { font-size: 15px; margin-right: 2px; }
.course__price small:last-child { font-family: "Zen Kaku Gothic New", sans-serif; font-size: 10.5px; font-weight: 400; margin-left: 4px; }
.course__body h3 { font-size: 14px; line-height: 1.5; margin-bottom: 4px; }
.course__body p { font-size: 12.5px; line-height: 1.7; margin: 0; }
.course__time { color: var(--sub); margin-top: 4px !important; }
.course__body .course__label { font-size: 13px; line-height: 1.2; }
.course__body .course__price { font-size: 32px; line-height: 1.25; margin: 2px 0 6px; }
.opt-head { margin: 34px 0 0; padding: 20px 22px 18px; background: var(--brown); color: #fff; font-size: 21px; line-height: 1.5; }
.opt-head .dot { display: block; color: #fff; }
.price th, .price td { padding: 15px 0 15px 18px; text-align: left; font-weight: 500; font-size: 13.5px; vertical-align: middle; background: var(--cream); }
.price tr:nth-child(even) th, .price tr:nth-child(even) td { background: #f8e4e9; }
.price td { text-align: right; white-space: nowrap; padding: 15px 18px 15px 10px; font-family: var(--en); font-size: 17px; font-weight: 400; }
.price th small { display: block; font-weight: 400; font-size: 11.5px; color: var(--sub); line-height: 1.5; }
.h2 + .price tr:first-child th, .h2 + .price tr:first-child td { border-top: 3px solid var(--brown); }
.first { margin-top: 22px; padding: 18px 20px; border: 2px solid var(--c); font-size: 13.5px; }
.first b { color: var(--red); }
.box { margin-top: 30px; padding: 22px 22px 24px; background: var(--cream); border-left: 4px solid var(--c); }
.box__ttl { font-size: 16px; margin-bottom: 6px; }

/* voices */
.voices { display: grid; gap: 14px; }
.voice { padding: 24px 22px 26px; background: #fff; }
.voice__icon { float: left; width: 56px; height: 56px; margin: 0 14px 4px 0; }
.voice__who { font-weight: 700; line-height: 1.5; padding-top: 4px; }
.voice__menu { display: inline-block; margin: 4px 0 12px; padding: 1px 10px; background: var(--c); color: #fff; font-size: 11.5px; }
.voice__text { clear: both; margin: 0; font-size: 14px; }

/* flow */
.flow { counter-reset: flow; }
.flow li { counter-increment: flow; position: relative; padding: 0 0 30px 66px; }
.flow li::before { content: "0" counter(flow); position: absolute; left: 0; top: -4px; font-family: var(--disp); font-size: 46px; line-height: 1; color: var(--c); }
.flow li::after { content: ""; position: absolute; left: 19px; top: 46px; bottom: 6px; width: 2px; background: var(--cream2); }
.flow li:last-child { padding-bottom: 0; }
.flow li:last-child::after { display: none; }
.flow h3 { font-size: 17px; font-weight: 500; margin-bottom: 4px; }
.flow p { font-size: 14px; }
.flow b { background: linear-gradient(transparent 58%, var(--marker) 58%); }

/* salon */
.salon__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.salon__a { grid-column: 1 / -1; margin: 0 -24px; }
.salon__a img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.salon__b img, .salon__c img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.salon__text { grid-column: 1 / -1; margin-top: 8px; padding: 26px 24px 30px; background: #fff; }
.salon__grid--page .salon__b { grid-column: 1 / -1; }
.salon__grid--page .salon__b img { aspect-ratio: 4 / 3; }
.salon__role { font-size: 12px; color: var(--c); font-weight: 700; letter-spacing: .08em; }
.salon__name { font-size: 24px; font-weight: 400; margin: 0 0 10px; line-height: 1.5; }
.salon__name small { font-size: 11.5px; color: var(--sub); margin-left: 12px; letter-spacing: .1em; }
.rules li { position: relative; padding: 11px 0 11px 20px; border-bottom: 1px solid var(--line); }
.rules li::before { content: ""; position: absolute; left: 2px; top: 1.45em; width: 6px; height: 6px; border-radius: 50%; background: var(--c); }
.staffs { display: grid; gap: 36px; }
.staff__photo { margin-right: 34px; }
.staff__photo img { width: 100%; aspect-ratio: 1 / .95; object-fit: cover; object-position: 50% 20%; }
.staff > div:last-child { position: relative; margin: -30px 0 0 30px; padding: 24px 0 0 24px; background: #fff; }
.staff__data { display: grid; grid-template-columns: auto 1fr; gap: 2px 12px; margin: 0 0 12px; padding: 10px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); font-size: 12.5px; line-height: 1.7; }
.staff__data dt { color: var(--c); font-weight: 700; }
.staff p { font-size: 14px; }

/* calendar and reserve */
.cals { display: grid; gap: 26px; }
.cal { table-layout: fixed; background: #fff; }
.cal caption { font-family: var(--en); font-size: 22px; font-weight: 300; text-align: left; padding-bottom: 6px; }
.cal th { padding: 6px 0; background: var(--c); color: #fff; font-size: 12px; font-weight: 500; }
.cal td { height: 48px; border: 1px solid var(--line); text-align: center; line-height: 1.2; vertical-align: middle; }
.cal td span { display: block; font-family: var(--en); font-size: 11.5px; color: var(--sub); }
.cal td b { font-size: 15px; }
.cal .open b { color: var(--c); }
.cal .few b { color: #d39a12; }
.cal .full b, .cal .past b { color: #c5b8b1; font-weight: 400; }
.cal .off { background: var(--cream); }
.cal .off b { font-size: 11.5px; color: var(--sub); }
.cal-legend { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 12px; font-size: 12px; }
.rsv { margin: 48px -24px 0; padding: 40px 30px 36px; background: var(--grad); color: #fff; text-align: center; }
.rsv__lead { font-weight: 700; letter-spacing: .14em; font-size: 13px; }
.rsv__tel { display: block; font-family: var(--disp); font-size: 60px; line-height: 1.1; text-decoration: none; letter-spacing: .02em; margin-top: 6px; }
.rsv__tel small { display: block; font-family: "Zen Kaku Gothic New", sans-serif; font-size: 12px; letter-spacing: .1em; }
.rsv__hours { font-size: 12px; margin: 2px 0 20px; }
.rsv__btns { display: grid; gap: 10px; }
.rsv .btn { background: #fff; color: var(--c); }
.rsv .btn--line { background: #06c755; color: #fff; }
.rsv .note { color: #fff; opacity: .9; }
.in > .rsv:last-child { margin-bottom: -60px; }
.ways { display: grid; gap: 12px; }
.way { padding: 22px; background: var(--cream); }
.way h3 { font-size: 17px; font-weight: 500; margin-bottom: 8px; }
.way h3::before { content: "・"; color: var(--c); }
.way p { font-size: 13.5px; }
.way .btn { margin-top: 12px; }
.way .rsv__tel { font-size: 48px; color: var(--c); }

/* news, instagram, access */
.news li { padding: 14px 0; border-bottom: 1px solid var(--line); line-height: 1.7; }
.news time { display: block; font-family: var(--en); color: var(--c); font-size: 13px; }
.split > div + div { margin-top: 20px; }
.insta { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; margin: 0 -24px; }
.insta img { aspect-ratio: 1; object-fit: cover; width: 100%; }
.access__photo { margin: 0 -24px 24px 0; }
.access__photo img { width: 100%; aspect-ratio: 4 / 3.4; object-fit: cover; }
.info th, .info td { padding: 12px 0; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; font-size: 13.5px; }
.info th { width: 6.2em; font-weight: 700; color: var(--c); }
.route { counter-reset: route; }
.route li { counter-increment: route; position: relative; padding: 7px 0 7px 34px; font-size: 14px; }
.route li::before { content: counter(route); position: absolute; left: 0; top: 9px; width: 22px; height: 22px; border-radius: 50%; background: var(--c); color: #fff; font-family: var(--en); font-size: 13px; line-height: 24px; text-align: center; }

/* faq */
.faq > div { border-bottom: 1px solid var(--line); padding: 18px 0; }
.faq dt, .faq dd { position: relative; padding-left: 38px; }
.faq dt { font-weight: 700; }
.faq dd { margin-top: 8px; font-size: 14px; }
.faq dt::before, .faq dd::before { position: absolute; left: 0; top: -6px; font-family: var(--disp); font-size: 30px; line-height: 1.3; }
.faq dt::before { content: "Q"; color: var(--c); }
.faq dd::before { content: "A"; color: var(--brown); }

/* column: cards and article pages */
.posts { display: grid; gap: 14px; }
.post { display: flex; gap: 14px; align-items: stretch; background: var(--cream); text-decoration: none; }
.post__photo { flex: 0 0 34%; }
.post__photo img { width: 100%; height: 100%; aspect-ratio: 1; object-fit: cover; }
.post__body { padding: 14px 16px 14px 0; }
.post__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font-size: 11px; line-height: 1.5; }
.post__meta time { font-family: var(--en); font-size: 13px; color: var(--c); }
.post__meta span { padding: 1px 8px; background: var(--c); color: #fff; }
.post h3 { margin-top: 6px; font-size: 14px; font-weight: 700; line-height: 1.6; }
.article__head { padding: 96px 24px 22px; background: linear-gradient(90deg, #fff 50%, var(--cream) 50%); }
.article__head .crumb { padding: 0 0 14px; background: none; }
.article__title { margin-top: 10px; font-size: 23px; font-weight: 700; line-height: 1.6; }
.article__photo { margin-right: 30px; }
.article__photo img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.prose { padding: 26px 24px 0; font-size: 15px; line-height: 2.05; }
.prose p { margin-top: 1.15em; }
.prose h2 { margin: 56px -24px 0; padding: 18px 24px 16px; background: var(--c); color: #fff; font-size: 19px; font-weight: 700; line-height: 1.6; }
.prose h3 { margin-top: 38px; padding: 0 0 10px 16px; font-size: 17px; font-weight: 700; line-height: 1.6; border-bottom: 1px solid var(--line); position: relative; }
.prose h3::before { content: ""; position: absolute; left: 0; top: .55em; width: 8px; height: 8px; border-radius: 50%; background: var(--c); }
.prose > ul, .prose > ol { margin-top: 1.2em; padding: 18px 20px; background: var(--cream); display: grid; gap: 8px; }
.prose > ul li { position: relative; padding-left: 18px; line-height: 1.8; }
.prose > ul li::before { content: ""; position: absolute; left: 2px; top: .75em; width: 6px; height: 6px; border-radius: 50%; background: var(--c); }
.prose > ol { counter-reset: step; }
.prose > ol li { counter-increment: step; position: relative; padding-left: 34px; line-height: 1.8; font-weight: 700; }
.prose > ol li::before { content: counter(step); position: absolute; left: 0; top: 2px; width: 22px; height: 22px; border-radius: 50%; background: var(--c); color: #fff; font-family: var(--en); font-size: 13px; line-height: 24px; text-align: center; }
.table-wrap { margin-top: 1.2em; overflow-x: auto; }
.prose table { min-width: 380px; font-size: 13px; line-height: 1.7; }
.prose th, .prose td { padding: 11px 10px; border: 1px solid var(--line); text-align: left; vertical-align: top; }
.prose th { background: var(--brown); color: #fff; font-weight: 500; white-space: nowrap; }
.prose td:first-child { background: var(--cream); font-weight: 700; white-space: nowrap; }
.toc { margin-top: 30px; padding: 22px 22px 20px; border: 2px solid var(--c); }
.prose .toc p { margin: 0; font-family: var(--disp); font-size: 30px; line-height: 1; color: var(--c); }
.toc p small { margin-left: 10px; font-family: "Zen Kaku Gothic New", sans-serif; font-size: 12px; color: var(--ink); }
.toc ol { margin-top: 12px; padding-left: 1.4em; list-style: decimal; font-size: 13.5px; line-height: 1.7; display: grid; gap: 7px; }
.toc a { text-decoration: none; }
.acta { margin: 46px -24px 0; padding: 36px 28px 34px; background: var(--grad); color: #fff; text-align: center; }
.prose .acta p { margin: 0; }
.prose .acta__ttl { font-size: 19px; font-weight: 700; line-height: 1.6; }
.prose .acta__text { margin-top: 8px; font-size: 13px; line-height: 1.9; }
.acta__tel { display: block; margin-top: 14px; font-family: var(--disp); font-size: 54px; line-height: 1.1; text-decoration: none; }
.acta__tel small { display: block; font-family: "Zen Kaku Gothic New", sans-serif; font-size: 12px; letter-spacing: .1em; }
.prose .acta__hours { font-size: 12px; }
.acta__btns { display: grid; gap: 10px; margin-top: 18px; }
.acta .btn { background: #fff; color: var(--c); }
.acta .btn--ghost { background: none; color: #fff; border: 1px solid #fff; }
.refs { margin-top: 44px; padding-top: 16px; border-top: 1px solid var(--line); font-size: 12px; line-height: 1.8; }
.prose .refs p { margin: 0; font-weight: 700; }
.refs ul { margin-top: 6px; display: grid; gap: 4px; }
.refs a { color: var(--sub); word-break: break-all; }
.author { display: flex; gap: 16px; margin: 40px 24px 0; padding: 20px; background: var(--cream); }
.author__photo { flex: 0 0 84px; }
.author__photo img { width: 84px; height: 84px; border-radius: 50%; object-fit: cover; object-position: 50% 15%; }
.author__name { font-size: 18px; line-height: 1.5; }
.author__name small { margin-left: 10px; font-size: 11.5px; color: var(--sub); }
.author p:last-child { margin-top: 6px; font-size: 12.5px; line-height: 1.8; }
.article__more { margin-top: 20px; padding-bottom: 56px; }
.article__more .opt-head { margin-bottom: 14px; }

/* footer and tab bar */
.foot { background: var(--cream); padding: 0 0 26px; font-size: 12.5px; }
.foot__in { display: grid; }
.foot__logo { padding: 44px 24px 26px; background: var(--c); color: #fff; }
.foot__logo b { display: block; font-family: "Comfortaa", sans-serif; font-size: 48px; font-weight: 500; line-height: 1; }
.foot__logo small { display: block; font-size: 11px; letter-spacing: .3em; margin-top: 10px; }
.foot__btn { background: var(--ink); }
.foot__addr { padding: 24px 24px 0; }
.foot__nav { display: flex; flex-wrap: wrap; gap: 4px 18px; padding: 16px 24px 0; }
.foot__nav a { text-decoration: none; font-weight: 700; }
.foot__nav a::before { content: "・"; color: var(--c); }
.foot__copy { padding: 22px 24px 0; font-size: 10.5px; color: var(--sub); }
.tabbar { position: fixed; left: 50%; bottom: 0; z-index: 40; width: 100%; max-width: 440px; transform: translateX(-50%); display: grid; grid-template-columns: 1fr 1fr 1fr 1.4fr; background: #fff; box-shadow: 0 -2px 12px rgba(120, 60, 40, .1); }
.tabbar a { padding: 15px 0 16px; text-align: center; text-decoration: none; font-size: 12.5px; border-right: 1px solid var(--line); line-height: 1.5; }
.tabbar__main { background: var(--grad); color: #fff; border-right: 0 !important; }

@media (min-width: 1000px) {
  .menu { display: none; }
  .col { box-shadow: 0 0 60px rgba(200, 110, 80, .16); }
  .bg { display: block; position: fixed; inset: 0; background: var(--cream) linear-gradient(115deg, #fff 0 34%, transparent 34%); }
  .bg__l { position: absolute; left: 0; top: 0; bottom: 0; width: calc(50% - 220px); }
  .bg__logo { position: absolute; left: 12%; top: 13%; margin: 0; font-family: "Comfortaa", sans-serif; font-size: clamp(60px, 7vw, 108px); line-height: 1; color: var(--c); }
  .bg__copy { position: absolute; left: 12.5%; top: calc(13% + clamp(76px, 8.6vw, 132px)); margin: 0; font-size: 14px; font-weight: 700; letter-spacing: .14em; line-height: 2; }
  .bg__p1, .bg__p2, .bg__p3 { position: absolute; overflow: hidden; }
  .bg__p1 { left: 14%; bottom: 12%; width: 38%; max-width: 230px; }
  .bg__p2 { left: 46%; bottom: 27%; width: 26%; max-width: 150px; border-radius: 50%; }
  .bg__p1 img, .bg__p2 img { aspect-ratio: 1; object-fit: cover; width: 100%; }
  .bg__r { position: absolute; right: 0; top: 0; bottom: 0; width: calc(50% - 220px); }
  .bg__p3 { right: 0; bottom: 0; width: 46%; max-width: 260px; }
  .bg__p3 img { aspect-ratio: 4 / 5; object-fit: cover; width: 100%; }
  .pcnav { display: block; position: fixed; z-index: 2; left: calc(50% + 220px + 5.5vw); top: 15%; width: 230px; }
  .pcnav li a { display: flex; align-items: baseline; gap: 12px; padding: 9px 0; text-decoration: none; font-weight: 700; font-size: 14px; }
  .pcnav li a::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--c); transform: translateY(-2px); }
  .pcnav li small { order: -1; min-width: 78px; font-family: var(--en); font-size: 17px; font-weight: 400; letter-spacing: .1em; }
  .pcnav li a:hover, .pcnav li a[aria-current] { color: var(--c); }
  .pcnav__btn { margin-top: 26px; }
  .pcnav__tel { display: block; margin-top: 16px; font-family: var(--disp); font-size: 34px; line-height: 1; text-decoration: none; color: var(--c); }
}

/* ===== v3 skin: own look (ink + rose, wide display type, nail-tip arches) ===== */
[lang="en"] { font-stretch: 125%; }
.head { position: sticky; top: 0; height: auto; display: flex; align-items: center; justify-content: space-between; padding: 8px 14px 8px 22px; background: rgba(255, 255, 255, .96); border-bottom: 1px solid var(--line); }
.head__logo { position: static; padding: 0; background: none; color: var(--ink); font-family: "Playfair Display", serif; font-style: italic; font-size: 34px; letter-spacing: 0; line-height: 1.1; }
.menu { position: relative; right: auto; top: auto; }
.menu summary { box-shadow: none; background: var(--ink); width: 44px; height: 44px; }
.menu summary i { background: #fff; width: 18px; }
.menu ul { right: -14px; top: 53px; }

/* titles: left aligned, wide heavy word */
.st, .st--re, .sec--tint .st, .sec--tint .st--re, .concept .st { background: none; text-align: left; padding: 64px 24px 26px; display: flex; flex-direction: column-reverse; }
.st span { font-family: var(--disp); font-weight: 800; font-stretch: 125%; font-size: 40px; letter-spacing: -.01em; color: var(--ink); line-height: 1.05; }
.st small { margin: 14px 0 0; padding-left: 44px; position: relative; font-size: 13px; font-weight: 700; letter-spacing: .12em; color: var(--c); }
.st small::before { content: ""; position: absolute; left: 0; top: 50%; width: 32px; height: 3px; margin-top: -1px; background: var(--c); }
.in .st { margin: 0 -24px 6px; }
.st--page { padding-top: 44px; background: var(--cream) !important; padding-bottom: 34px; }
.st--page span { font-size: 44px; }
.crumb { background: #fff; }

/* hero: nail-tip arch */
.mv { padding: 26px 0 0; margin: 0 0 20px; background: var(--cream); }
.mv__photo { margin: 0 0 0 86px; border-radius: 999px 0 0 0; overflow: hidden; }
.mv__photo img { aspect-ratio: 3 / 4.1; object-position: 62% 50%; }
.mv__photo::after { display: none; }
.mv__copy { left: 22px; right: auto; bottom: 118px; color: var(--ink); }
.mv__copy span { font-family: var(--en); font-size: 13px; letter-spacing: .34em; }
.mv__copy b { font-family: "Playfair Display", serif; font-style: italic; font-weight: 500; font-size: 104px; line-height: 1; margin: 2px 0 0 -6px; letter-spacing: -.02em; font-stretch: normal; }
.mv__copy small { display: inline-block; margin-top: 10px; padding: 10px 16px 9px; background: #fff; font-size: 13px; font-weight: 700; line-height: 1.7; }
.mv__btn, .foot__btn, .pcnav__btn { padding: 17px 56px 17px 28px; border-radius: 99px; background: var(--ink); text-align: left; }
.mv__btn b, .foot__btn b, .pcnav__btn b { font-family: inherit; font-size: 14.5px; font-weight: 700; letter-spacing: .08em; }
.mv__btn::after, .foot__btn::after, .pcnav__btn::after { content: ""; right: 26px; top: 50%; width: 18px; height: 6px; margin-top: -6px; border-bottom: 1px solid #fff; border-right: 1px solid #fff; transform: skewX(45deg); }
.mv__btn { left: 22px; right: auto; bottom: 30px; width: 240px; box-shadow: none; background: var(--c); }
.mv__round { position: absolute; left: 22px; top: 24px; width: 80px; margin: 0; border-radius: 50%; overflow: hidden; border: 5px solid var(--cream); }
.mv__round img { aspect-ratio: 1; object-fit: cover; }

/* design cards */
.dz__photo img { border-radius: 90px 90px 0 0; }
.dz__no { position: static; display: inline-block; margin-top: 12px; padding: 0; background: none; color: var(--c); font-size: 13px; font-weight: 600; }
.dz__name { margin-top: 0; }
.dz__price { color: var(--ink); }
.dz__btn { border-radius: 99px; }
.dtabs a { background: #fff; border: 1px solid var(--ink); color: var(--ink); }
.dgroup__ttl { margin: 0 0 20px; padding: 0 0 10px; background: none; color: var(--ink); border-bottom: 2px solid var(--ink); }
.dgroup__ttl b { font-size: 21px; font-weight: 700; }

/* concept: numbered photos, no overlap card */
.concept { background: #fff; padding: 0 24px 64px; }
.concept .st { margin: 0 -24px 6px; }
.cb + .cb { margin-top: 48px; }
.cb__img, .cb--re .cb__img { margin: 0; }
.cb__img img { aspect-ratio: 4 / 3; border-radius: 0 120px 0 0; }
.cb--re .cb__img img { border-radius: 120px 0 0 0; }
.cb__v, .cb--re .cb__v { writing-mode: horizontal-tb; left: -10px; right: auto; top: auto; bottom: -22px; width: 64px; height: 64px; border-radius: 50%; background: var(--ink); color: #fff; font-family: var(--disp); font-weight: 800; font-size: 20px; line-height: 64px; text-align: center; }
.cb--re .cb__v { left: auto; right: -10px; }
.cb__text, .cb--re .cb__text { margin: 0; padding: 36px 0 0; background: none; }
.cb__text .dot { font-family: inherit; font-weight: 700; letter-spacing: .12em; }
.cb__text .dot::before { content: ""; }
.cb__text h3 { font-size: 23px; font-weight: 700; margin: 6px 0 12px; }

/* price: rows with round thumbnails */
.courses { gap: 0; border-top: 2px solid var(--ink); }
.course { align-items: center; padding: 18px 0; background: none; border-bottom: 1px solid var(--line); }
.course:last-child { border-bottom: 2px solid var(--ink); }
.course__photo { flex: 0 0 84px; }
.course__photo img { border-radius: 50%; }
.course__body { flex: 1; display: grid; grid-template-columns: 1fr auto; column-gap: 10px; align-items: baseline; }
.course__body .course__price { grid-column: 2; grid-row: 1; margin: 0; font-family: var(--disp); font-stretch: 125%; font-weight: 800; font-size: 23px; }
.course__body .course__price small { font-size: 13px; font-weight: 700; }
.course__body .course__price small:last-child { display: none; }
.course__body h3 { grid-column: 1; grid-row: 1; font-size: 14.5px; margin: 0; }
.course__body p { grid-column: 1 / -1; }
.opt-head { background: none; color: var(--ink); padding: 0 0 12px; font-size: 18px; font-weight: 700; border-bottom: 2px solid var(--ink); }
.opt-head .dot { display: none; }
.price th, .price td, .price tr:nth-child(even) th, .price tr:nth-child(even) td { background: none; border-bottom: 1px solid var(--line); padding-left: 0; padding-right: 0; }
.price td { font-family: var(--en); font-weight: 600; }
.h2 + .price tr:first-child th, .h2 + .price tr:first-child td { border-top: 0; }
.first { border: 0; background: var(--cream); border-radius: 0 40px 0 0; }
.box { border-left: 0; border-radius: 0 40px 0 0; }

/* misc blocks */
.link { border-color: var(--ink); color: var(--ink); }
.link::after { border-color: var(--ink); }
.voice { border-radius: 0 40px 0 0; }
.voice__menu { background: none; color: var(--c); border: 1px solid var(--c); border-radius: 99px; }
.flow li::before { font-weight: 800; font-size: 24px; top: 2px; color: var(--ink); }
.flow li { padding-left: 58px; }
.flow li::after { left: 16px; top: 38px; }
.salon__a img { border-radius: 0; }
.salon__c img { border-radius: 200px 200px 0 0; }
.staff__photo { margin-right: 0; }
.staff__photo img { border-radius: 0 120px 0 0; }
.staff > div:last-child { margin: 0; padding: 22px 0 0; background: none; }
.cal th { background: var(--ink); }
.cal caption { font-family: var(--disp); font-stretch: 125%; font-weight: 800; font-size: 17px; }
.rsv { border-radius: 0 80px 0 0; }
.rsv__tel { font-weight: 800; font-size: 31px; margin-top: 10px; }
.rsv .btn { border-radius: 99px; color: var(--ink); }
.rsv .btn--line { color: #fff; }
.btn { border-radius: 99px; }
.way .rsv__tel { font-size: 28px; color: var(--ink); }
.info th { color: var(--ink); }
.faq dt::before, .faq dd::before { font-weight: 800; font-size: 19px; top: 0; line-height: 1.5; }
.faq dd::before { color: var(--c2); }
.access__photo { margin-right: 0; }
.access__photo img { border-radius: 200px 200px 0 0; aspect-ratio: 4 / 4.4; }
.post { background: none; border-bottom: 1px solid var(--line); padding-bottom: 14px; }
.post__photo { flex-basis: 30%; }
.post__photo img { border-radius: 60px 60px 0 0; }
.post__body { padding: 4px 0 0; }
.post__meta span { background: none; color: var(--c); border: 1px solid var(--c); border-radius: 99px; }
.article__head { padding: 26px 24px 22px; background: var(--cream); }
.article__photo { margin: 0; }
.prose h2 { margin: 56px 0 0; padding: 0 0 14px; background: none; color: var(--ink); font-size: 20px; border-bottom: 2px solid var(--ink); position: relative; }
.prose h2::before { content: ""; display: block; width: 32px; height: 3px; margin-bottom: 14px; background: var(--c); }
.prose th { background: var(--ink); }
.toc { border: 0; background: var(--cream); border-radius: 0 40px 0 0; }
.prose .toc p { font-weight: 800; font-size: 17px; color: var(--ink); }
.acta { border-radius: 0 80px 0 0; }
.acta__tel { font-weight: 800; font-size: 30px; margin-top: 16px; }
.acta .btn { color: var(--ink); }
.acta .btn--ghost { color: #fff; }
.foot__logo { background: var(--cream); color: var(--ink); padding-bottom: 20px; }
.foot__logo b { font-family: "Playfair Display", serif; font-style: italic; font-size: 60px; font-stretch: normal; }
.foot__btn { margin: 0 24px; background: var(--ink); }
.tabbar__main { background: var(--c); }

@media (min-width: 1000px) {
  .bg { background: var(--cream); }
  .bg__logo { font-family: "Playfair Display", serif; font-style: italic; font-stretch: normal; color: var(--ink); font-size: clamp(70px, 8vw, 128px); }
  .bg__copy { top: calc(13% + clamp(92px, 10vw, 160px)); }
  .bg__p1 { border-radius: 200px 200px 0 0; }
  .bg__p1 img { aspect-ratio: 4 / 5; }
  .bg__p3 { right: 6%; bottom: 8%; border-radius: 200px 200px 0 0; max-width: 200px; }
  .pcnav li a { border-bottom: 1px solid var(--cream2); padding: 12px 0; }
  .pcnav li a::before { display: none; }
  .pcnav li small { font-family: var(--disp); font-weight: 700; font-size: 12px; letter-spacing: .04em; min-width: 92px; }
  .pcnav__btn { background: var(--c); }
  .pcnav__tel { font-weight: 800; font-size: 21px; color: var(--ink); }
}