/* 雅 miyabi 1.1.0 B案「アルバム」— 明るく親しみやすいフォトブランド Loaded after finish.css. Body, header, footer and navigation only. The HERO (#miyabi-flower-transition) keeps its 1.0.6 look: inherited values are pinned below. Signature: every photo and photo slot sits on a cream album mount with its four corners tucked into slits. b4: tape (b2) and flower pin (b3) replaced by slit corners; no extra objects on the photos, no tilt, headings without decoration. b5: contact buttons open the message helper first; iOS date field width; the page can never pan sideways. b7: photos ⑦⑧⑨ placed in the age cards. b8: 季節の撮影会 tile; rental kimono list swipes sideways on phones and tablets. b2: 12px minimum text, roomier purpose rows on phones, age badge off the photo, send buttons after copying. */ #miyabi-site-v12 { --paper:#ffffff; --ink:#3b2621; /* ロゴの文字の焦げ茶 */ --muted:#6a5852; --shu:#b8392a; /* ロゴの花の朱：操作の色 */ --shu-deep:#962c20; --sakura:#fce9eb; --wakaba:#eef5e4; --nanohana:#fff6da; --fuji-pale:#f3eef8; --line:#eadfd9; --mount:#fffaf2; /* アルバムの台紙 */ --mount-line:#e9dcc8; --slit:#cbb699; /* 差し込みの切れ込み線 */ --flap:30px; /* slits run a few px past the photo edge onto the mount */ --flaps:linear-gradient(135deg,var(--mount) 0 calc(50% - .8px),var(--slit) calc(50% - .8px) 50%,#3b262124 50%,transparent calc(50% + 3px)) top left/var(--flap) var(--flap) no-repeat,linear-gradient(225deg,var(--mount) 0 calc(50% - .8px),var(--slit) calc(50% - .8px) 50%,#3b262124 50%,transparent calc(50% + 3px)) top right/var(--flap) var(--flap) no-repeat,linear-gradient(45deg,var(--mount) 0 calc(50% - .8px),var(--slit) calc(50% - .8px) 50%,#3b262124 50%,transparent calc(50% + 3px)) bottom left/var(--flap) var(--flap) no-repeat,linear-gradient(315deg,var(--mount) 0 calc(50% - .8px),var(--slit) calc(50% - .8px) 50%,#3b262124 50%,transparent calc(50% + 3px)) bottom right/var(--flap) var(--flap) no-repeat; --wine:var(--shu); --white:#ffffff; --maru:"Zen Maru Gothic","Hiragino Maru Gothic ProN","Hiragino Sans","Noto Sans CJK JP","Noto Sans JP",sans-serif; --sans:-apple-system,BlinkMacSystemFont,"Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,"Noto Sans CJK JP","Noto Sans JP",sans-serif; background:var(--paper); color:var(--ink); } /* HERO: keep the adopted CTA colour and the values it inherited in 1.0.6. */ #miyabi-site-v12 #miyabi-flower-transition { --wine:#713d50; font-size:16px; letter-spacing:.025em; text-align:center; } /* ---------- Shared type ---------- */ #miyabi-site-v12 .m-section { padding:84px 0; text-align:left; font-family:var(--maru); font-weight:500; font-size:15px; line-height:1.95; letter-spacing:.03em; } #miyabi-site-v12 .m-section :is(h1,h2,h3) { font-family:var(--maru); font-weight:700; color:var(--ink); letter-spacing:.04em; } #miyabi-site-v12 .m-section h3 { font-size:20px; line-height:1.6; } #miyabi-site-v12 .m-section :is(button,input,select,textarea) { font-family:var(--maru); } #miyabi-site-v12 .m-shell { width:calc(100% - 64px); max-width:1100px; } #miyabi-site-v12 .m-narrow { max-width:880px; } #miyabi-site-v12 .m-note { color:var(--muted); font-size:12px; line-height:1.85; font-weight:500; } #miyabi-site-v12 [data-review] { color:#8a3b4a; } #miyabi-site-v12 .m-proposal { font:700 12px/1.5 var(--maru); color:var(--shu-deep); background:#fde7e2; border-radius:999px; padding:2px 9px; letter-spacing:.04em; } #miyabi-site-v12 :focus-visible { outline:3px solid #e48a7c; outline-offset:3px; } /* Buttons (the HERO CTA keeps its own rules) */ #miyabi-site-v12 .m-button:not(.m-hero-cta) { min-height:52px; padding:12px 24px; border:2px solid var(--shu); border-radius:999px; background:#fff; color:var(--shu); font:700 15px/1.5 var(--maru); letter-spacing:.04em; text-decoration:none; } #miyabi-site-v12 .m-button--filled:not(.m-hero-cta) { background:var(--shu); color:#fff; } #miyabi-site-v12 .m-actions { justify-content:flex-start; } /* ---------- Review bar & header (system fonts only: no height change above the HERO) ---------- */ #miyabi-site-v12 .m-review-bar { background:var(--nanohana); color:#5c4a3f; border-bottom:1px solid #f1e3b8; padding-top:max(7px,env(safe-area-inset-top,0px)); } #miyabi-site-v12 .m-review-toggle { color:var(--shu-deep); border-bottom-color:var(--shu); } #miyabi-site-v12 .m-header { min-height:92px; } #miyabi-site-v12 .m-brand-copy { border-left-color:var(--line); } #miyabi-site-v12 .m-brand-copy strong { font-family:var(--sans); font-weight:700; letter-spacing:.08em; } #miyabi-site-v12 .m-brand-copy small { font-size:12px; } #miyabi-site-v12 .m-nav a { font-weight:600; } #miyabi-site-v12 .m-nav a:last-child { border:0; border-radius:999px; background:var(--shu); color:#fff; padding-inline:22px; } #miyabi-site-v12 .m-mobile-nav > summary { min-width:76px; padding:8px 16px; border:2px solid var(--line); border-radius:999px; font-weight:600; } #miyabi-site-v12 .m-mobile-nav nav { border-radius:18px; border:0; box-shadow:0 14px 34px #3b262126; } #miyabi-site-v12 .m-hero-skip { background:#fff; color:var(--ink); border-bottom:0; font-weight:600; } /* ---------- Section heading ---------- */ #miyabi-site-v12 .m-opener { position:relative; margin:0 0 36px; } #miyabi-site-v12 .m-opener h2 { margin:0; font-size:28px; line-height:1.5; letter-spacing:.06em; text-wrap:balance; } #miyabi-site-v12 .m-opener-text { max-width:34em; } #miyabi-site-v12 .m-opener .m-lead { margin:12px 0 0; max-width:none; color:var(--muted); font-size:15px; line-height:1.9; } #miyabi-site-v12 .m-opener .m-note { margin-top:10px; } /* ---------- Intro: big friendly title, the six room photos, three tiles ---------- */ #miyabi-site-v12 .m-intro { padding-top:56px; } #miyabi-site-v12 .m-intro::before { display:none; } #miyabi-site-v12 .m-intro-grid { display:block; margin-bottom:84px; } #miyabi-site-v12 .m-intro-title { margin:0; font-size:34px; line-height:1.5; letter-spacing:.06em; } #miyabi-site-v12 .m-room-photos { margin:28px -32px 0; padding:0; } #miyabi-site-v12 .m-room-photos figcaption { padding:0 32px; color:var(--muted); font-size:13px; font-weight:700; } #miyabi-site-v12 .m-room-strip { display:flex; gap:18px; list-style:none; margin:0; padding:22px 32px 26px; overflow-x:auto; scroll-snap-type:x mandatory; scroll-padding-inline:32px; overscroll-behavior-x:contain; scrollbar-width:none; } #miyabi-site-v12 .m-room-strip::-webkit-scrollbar { display:none; } #miyabi-site-v12 .m-room-strip li { --flap:24px; position:relative; flex:0 0 46%; max-width:220px; scroll-snap-align:start; padding:9px 9px 30px; background:var(--mount); border:1px solid var(--mount-line); border-radius:2px; box-shadow:0 6px 16px #3b262112; } #miyabi-site-v12 .m-room-strip li:nth-child(even) { margin-top:10px; } #miyabi-site-v12 .m-room-strip li::before { content:""; position:absolute; z-index:1; inset:5px 5px 26px; background:var(--flaps); pointer-events:none; } #miyabi-site-v12 .m-room-strip img { display:block; width:100%; height:auto; aspect-ratio:1; object-fit:cover; border-radius:1px; } #miyabi-site-v12 .m-room-label { position:absolute; left:10px; bottom:4px; font-size:12px; line-height:1.6; color:var(--muted); } #miyabi-site-v12 .m-room-photos > .m-note { padding:0 32px; margin-top:0; } #miyabi-site-v12 .m-purpose-nav { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; max-width:none; margin:34px 0 0; } #miyabi-site-v12 .m-purpose-nav a { position:relative; display:flex; flex-direction:column; align-items:flex-start; justify-content:flex-start; gap:4px; min-height:0; padding:16px 12px 34px; border:0; border-radius:22px; background:var(--sakura); text-decoration:none; } #miyabi-site-v12 .m-purpose-nav a:nth-child(n) { border:0; } #miyabi-site-v12 .m-purpose-nav a:nth-child(2) { background:var(--wakaba); } #miyabi-site-v12 .m-purpose-nav a:nth-child(3) { background:var(--nanohana); } #miyabi-site-v12 .m-purpose-nav a:nth-child(4) { background:var(--fuji-pale); } #miyabi-site-v12 .m-pict { width:34px; height:34px; color:var(--ink); } #miyabi-site-v12 .m-purpose-nav a strong { font:700 16px/1.5 var(--maru); margin-top:4px; } #miyabi-site-v12 .m-purpose-nav a span { color:var(--muted); font-size:12.5px; line-height:1.7; } #miyabi-site-v12 .m-purpose-nav a i { position:absolute; right:12px; bottom:8px; font-style:normal; font-weight:700; color:var(--shu); } #miyabi-site-v12 .m-purpose-nav a:hover { background:var(--sakura); } #miyabi-site-v12 .m-purpose-nav a:nth-child(2):hover { background:var(--wakaba); } #miyabi-site-v12 .m-purpose-nav a:nth-child(3):hover { background:var(--nanohana); } #miyabi-site-v12 .m-purpose-nav a:nth-child(4):hover { background:var(--fuji-pale); } #miyabi-site-v12 .m-purpose-nav a:active { filter:brightness(.96); } /* ---------- Age switcher and cards ---------- */ #miyabi-site-v12 .m-age-tools { justify-content:flex-start; gap:8px; margin-top:0; } #miyabi-site-v12 .m-age-tools button { min-width:60px; min-height:44px; padding:6px 16px; border:2px solid var(--line); border-radius:999px; background:#fff; color:var(--ink); font:700 15px/1.4 var(--maru); } #miyabi-site-v12 .m-age-tools button[aria-pressed="true"] { background:var(--shu); border-color:var(--shu); color:#fff; } #miyabi-site-v12 .m-age-tools [data-age-prev], #miyabi-site-v12 .m-age-tools [data-age-next] { width:44px; min-width:44px; padding:0; font-family:var(--sans); } #miyabi-site-v12 .m-age-tools [data-age-status] { text-align:left; color:var(--muted); font-size:12px; } #miyabi-site-v12 .m-age-track { gap:22px; margin:22px -32px 0; padding:18px 32px 30px; scroll-padding-inline:32px; scrollbar-color:var(--line) transparent; } #miyabi-site-v12 .m-age-card { flex:0 0 calc((100% - 44px) / 3); padding:14px 16px 6px; background:#fff; border-radius:26px; box-shadow:0 2px 4px #3b26210d,0 14px 30px #3b26211a; } #miyabi-site-v12 .m-age-card h3 { margin-top:26px; padding-right:72px; font-size:21px; } #miyabi-site-v12 .m-age-copy { margin-top:4px; color:var(--muted); font-size:15px; line-height:1.85; } #miyabi-site-v12 .m-age-price { margin-top:16px; padding-top:0; border:0; color:var(--muted); font-size:12px; font-weight:700; } #miyabi-site-v12 .m-age-price strong { font:700 34px/1.4 var(--maru); color:var(--ink); letter-spacing:.02em; } #miyabi-site-v12 .m-age-price strong small { font:700 14px var(--maru); color:var(--ink); margin-left:2px; } #miyabi-site-v12 .m-age-card .m-actions { margin-top:16px; } #miyabi-site-v12 .m-age-card .m-actions .m-button { background:var(--shu); color:#fff; } #miyabi-site-v12 .m-age-card .m-disclosure { margin-top:8px; border-bottom:0; } #miyabi-site-v12 .m-age-footnote { margin-top:4px; } /* ---------- Photo slots: corners tucked into an album mount ---------- */ #miyabi-site-v12 .m-photo-slot { aspect-ratio:4/5; display:block; overflow:visible; background:var(--mount); border:1px solid var(--mount-line); border-radius:2px; padding:10px; box-shadow:0 6px 16px #3b262112; transform:none; } #miyabi-site-v12 .m-photo-slot::before { inset:10px; opacity:.5; filter:saturate(1.05); border-radius:0; } #miyabi-site-v12 .m-photo-slot::after { inset:4px; border:0; border-radius:0; background:var(--flaps); transform:none; z-index:2; } #miyabi-site-v12 .m-photo-number { top:36px; left:16px; padding:3px 10px; border-radius:999px; background:#fff; color:var(--ink); font:700 12px/1.6 var(--maru); } #miyabi-site-v12 .m-photo-text { position:absolute; z-index:1; left:16px; bottom:36px; padding:3px 10px; border-radius:999px; background:#ffffffe6; color:var(--muted); font:700 12px/1.6 var(--maru); letter-spacing:.04em; } #miyabi-site-v12 .m-age-numeral { position:absolute; z-index:3; right:14px; bottom:-26px; display:grid; place-items:center; width:62px; height:62px; border:4px solid #fff; border-radius:50%; background:#e98896; color:#fff; font:700 36px/1 var(--maru); text-align:center; box-shadow:0 4px 10px #3b262124; } #miyabi-site-v12 .m-age--5 .m-age-numeral { background:#86ad57; color:#fff; } #miyabi-site-v12 .m-age--7 .m-age-numeral { background:#9a82c0; color:#fff; } /* ---------- b7: received photos ⑦⑧⑨ in the age cards, tucked into the same mount ---------- */ #miyabi-site-v12 .m-photo-slot--filled::before { content:none; } #miyabi-site-v12 .m-photo-slot--filled > img { position:absolute; z-index:0; top:10px; left:10px; display:block; width:calc(100% - 20px); height:calc(100% - 20px); object-fit:cover; object-position:50% 30%; } /* ---------- Disclosures ---------- */ #miyabi-site-v12 .m-disclosure { border-color:var(--line); } #miyabi-site-v12 .m-disclosure > summary { font-weight:700; font-size:15px; } #miyabi-site-v12 .m-disclosure > summary::after { display:grid; place-items:center; width:28px; height:28px; border-radius:50%; background:var(--sakura); color:var(--shu); font-size:17px; line-height:1; } #miyabi-site-v12 .m-disclosure[open] > summary { color:var(--shu-deep); } #miyabi-site-v12 .m-disclosure-body p { font-size:15px; } #miyabi-site-v12 .m-price-list > div { border-color:var(--line); border-bottom-style:dashed; } #miyabi-site-v12 .m-price-list dd { font-weight:700; } #miyabi-site-v12 .m-steps li::before { content:counter(step); display:grid; place-items:center; flex:none; width:26px; height:26px; border-radius:50%; background:var(--shu); color:#fff; font:700 13px/1 var(--maru); margin-top:2px; } /* ---------- Services: colour panels with pictograms ---------- */ #miyabi-site-v12 .m-services { background:var(--wakaba); } #miyabi-site-v12 .m-service-grid { grid-template-columns:1fr 1fr; gap:20px; margin-top:0; } #miyabi-site-v12 .m-service { position:relative; padding:24px 22px 8px; border:0; border-radius:26px; background:#fff; } #miyabi-site-v12 .m-service .m-pict { display:block; width:52px; height:52px; padding:9px; border-radius:50%; background:var(--sakura); color:var(--ink); } #miyabi-site-v12 #service-rental .m-pict { background:var(--wakaba); } #miyabi-site-v12 .m-service h3 { margin-top:12px; font-size:22px; } #miyabi-site-v12 .m-service > p { color:var(--muted); font-size:15px; line-height:1.9; } #miyabi-site-v12 .m-photo-package { margin-top:20px; padding:26px 22px 8px; background:var(--nanohana); border:2px dashed #ecd28a; border-radius:26px; } #miyabi-site-v12 .m-photo-package .m-pict { background:#fff; } #miyabi-site-v12 .m-photo-package h3 { font-size:22px; } /* ---------- Collection ---------- */ #miyabi-site-v12 .m-collection { background:#fff; } #miyabi-site-v12 .m-collection > .m-shell > .m-disclosure { margin-top:0; } #miyabi-site-v12 .m-collection-toggle { border:0; } #miyabi-site-v12 .m-collection-toggle > summary { min-height:76px; padding:16px 22px; border-radius:22px; background:var(--nanohana); font-size:17px; } #miyabi-site-v12 .m-collection-toggle > summary::after { background:#fff; } #miyabi-site-v12 .m-collection-toggle > .m-disclosure-body { padding-top:24px; } #miyabi-site-v12 .m-filter { justify-content:flex-start; gap:8px; } #miyabi-site-v12 .m-filter button { min-height:44px; padding:6px 18px; border:2px solid var(--line); border-radius:999px; background:#fff; color:var(--ink); font:700 14px/1.4 var(--maru); } #miyabi-site-v12 .m-filter button[aria-pressed="true"] { background:var(--ink); border-color:var(--ink); color:#fff; } #miyabi-site-v12 .m-catalog { text-align:left; gap:36px; margin-top:28px; } #miyabi-site-v12 .m-catalog h3 { font-size:19px; margin-top:20px; } /* ---------- Gallery: scrapbook ---------- */ #miyabi-site-v12 .m-gallery { background:var(--nanohana); border-top:0; } #miyabi-site-v12 .m-gallery-grid { gap:22px 18px; margin-top:8px; } #miyabi-site-v12 .m-gallery-preview { margin-top:0; } #miyabi-site-v12 .m-gallery-grid .m-photo-slot { aspect-ratio:4/5; border:1px solid var(--mount-line); box-shadow:0 6px 16px #3b262112; background:var(--mount); } #miyabi-site-v12 .m-gallery-grid .m-photo-slot::before { opacity:.32; } #miyabi-site-v12 .m-gallery-grid .m-photo-slot:nth-child(even) { transform:translateY(18px); } #miyabi-site-v12 .m-gallery-grid .m-photo-slot::after { inset:4px; border:0; } #miyabi-site-v12 .m-gallery-grid .m-photo-number { position:absolute; top:auto; bottom:36px; left:16px; font-size:12px; color:var(--ink); background:#fff; } #miyabi-site-v12 .m-gallery .m-gallery-preview + .m-note { margin-top:36px; } /* ---------- Events ---------- */ #miyabi-site-v12 .m-event { background:var(--fuji-pale); } #miyabi-site-v12 .m-event-grid { margin-top:0; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:44px; align-items:start; } #miyabi-site-v12 .m-event-grid .m-photo-slot { aspect-ratio:4/3; --slot-pattern:var(--flower-fuji); transform:none; } #miyabi-site-v12 .m-event-copy { text-align:left; } #miyabi-site-v12 .m-event-copy h3 { font-size:24px; line-height:1.6; } #miyabi-site-v12 .m-event-copy > p { color:var(--muted); } /* ---------- FAQ ---------- */ #miyabi-site-v12 .m-faq { background:#fff; } #miyabi-site-v12 .m-faq-list { display:grid; gap:10px; margin-top:0; } #miyabi-site-v12 .m-faq .m-disclosure, #miyabi-site-v12 .m-faq .m-disclosure:last-of-type { margin:0; padding:0 16px; border:2px solid var(--line); border-radius:20px; } #miyabi-site-v12 .m-faq summary { min-height:64px; padding:14px 0; font-size:15px; } #miyabi-site-v12 .m-faq summary::before { content:"Q"; display:grid; place-items:center; flex:none; width:28px; height:28px; border-radius:50%; background:var(--shu); color:#fff; font:700 14px/1 var(--maru); } #miyabi-site-v12 .m-faq .m-disclosure-body { padding:0 0 18px 44px; } /* ---------- Contact ---------- */ #miyabi-site-v12 .m-contact { background:var(--sakura); color:var(--ink); --line:#efd2d6; --muted:#6a5852; } #miyabi-site-v12 .m-contact .m-lead { color:var(--muted); } #miyabi-site-v12 .m-contact [data-review] { color:#8a3b4a; } #miyabi-site-v12 .m-contact .m-proposal { background:#fff; } #miyabi-site-v12 .m-contact .m-button:not(.m-hero-cta) { color:var(--shu); border-color:var(--shu); background:#fff; } #miyabi-site-v12 .m-contact .m-button--filled:not(.m-hero-cta) { background:var(--shu); color:#fff; border-color:var(--shu); } #miyabi-site-v12 .m-contact-actions { flex-direction:column; align-items:stretch; max-width:440px; margin-top:0; } #miyabi-site-v12 .m-contact-actions .m-button:not(.m-hero-cta) { width:100%; min-height:58px; font-size:16px; } #miyabi-site-v12 .m-consult-steps { list-style:none; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin:36px 0 0; padding:0; counter-reset:consult; } #miyabi-site-v12 .m-consult-steps li { counter-increment:consult; position:relative; padding:44px 14px 16px; border-radius:20px; background:#fff; } #miyabi-site-v12 .m-consult-steps li::before { content:counter(consult); position:absolute; top:12px; left:14px; display:grid; place-items:center; width:26px; height:26px; border-radius:50%; background:var(--shu); color:#fff; font:700 13px/1 var(--maru); } #miyabi-site-v12 .m-consult-steps strong { display:block; font:700 15px/1.55 var(--maru); } #miyabi-site-v12 .m-consult-steps span { display:block; margin-top:4px; font-size:12.5px; line-height:1.7; color:var(--muted); } #miyabi-site-v12 .m-contact .m-inquiry { margin-top:16px; padding:0 18px; border:0; border-radius:22px; background:#fff; } #miyabi-site-v12 .m-contact .m-disclosure > summary { color:var(--ink); font-size:15px; } #miyabi-site-v12 .m-contact .m-disclosure > summary::after { color:var(--shu); } #miyabi-site-v12 .m-form :is(input,select,textarea) { background:#fff; border:2px solid var(--line); border-radius:14px; color:var(--ink); } #miyabi-site-v12 .m-contact .m-form :is(input,select,textarea) { border-color:#ecdcd8; background:#fffdfc; } #miyabi-site-v12 .m-form label { font-weight:700; } #miyabi-site-v12 .m-contact .m-actions { justify-content:flex-start; } /* b2: send buttons right after copying the message */ #miyabi-site-v12 .m-send-actions { margin-top:4px; } #miyabi-site-v12 .m-contact .m-send-actions .m-button:not(.m-hero-cta) { min-height:48px; font-size:14px; } /* ---------- b5: page never pans sideways (iPhone: b3's rotated pins stuck out 3px) ---------- */ /* overflow-x:clip does not create a scroll container, so the sticky HERO keeps working. */ @supports (overflow:clip) { #miyabi-site-v12 { overflow-x:clip; } } html:has(#miyabi-site-v12) { overscroll-behavior-x:none; } /* ---------- b5: form fields stay inside the form on iPhone ---------- */ #miyabi-site-v12 .m-form :is(input,select,textarea) { min-width:0; max-width:100%; } #miyabi-site-v12 .m-form input[type="date"] { -webkit-appearance:none; appearance:none; width:100%; text-align:left; } #miyabi-site-v12 .m-form input[type="date"]::-webkit-date-and-time-value { text-align:left; } /* ---------- b5: contact flow (LINE / Instagram -> message helper -> copy -> open) ---------- */ #miyabi-site-v12 [data-inquiry-details] { scroll-margin-top:16px; } #miyabi-site-v12 .m-send-actions .m-button.is-chosen { order:-1; } #miyabi-site-v12 .m-contact .m-send-actions.is-ready .m-button.is-chosen { background:var(--shu); border-color:var(--shu); color:#fff; } /* after copying, the copy button steps back so only the next action is filled */ #miyabi-site-v12 .m-contact .m-inquiry-output:has(.m-send-actions.is-ready .is-chosen) [data-copy-inquiry] { background:#fff; color:var(--shu); } /* ---------- b8: 季節の撮影会 lands on the bamboo-forest session ---------- */ #miyabi-site-v12 .m-event-bamboo { scroll-margin-top:16px; } #miyabi-site-v12 .m-purpose-nav a span { text-wrap:balance; } /* ---------- b8: rental kimono list swipes sideways (phones and tablets) ---------- */ @media (max-width:850px) { #miyabi-site-v12 .m-catalog { display:flex; gap:16px; overflow-x:auto; overscroll-behavior-x:contain; scroll-snap-type:x mandatory; scroll-padding-inline:32px; margin:24px -32px 0; padding:8px 32px 26px; scrollbar-width:none; } #miyabi-site-v12 .m-catalog::-webkit-scrollbar { display:none; } #miyabi-site-v12 .m-catalog > li { flex:0 0 78%; max-width:300px; margin:0; scroll-snap-align:start; } #miyabi-site-v12 .m-catalog > li[hidden] { display:none; } } @media (max-width:600px) { #miyabi-site-v12 .m-catalog { margin-inline:-20px; padding-inline:20px; scroll-padding-inline:20px; } #miyabi-site-v12 .m-catalog > li { flex-basis:80%; } } /* ---------- b10: required city ---------- */ #miyabi-site-v12 .m-required { color:var(--shu-deep); font-weight:700; } #miyabi-site-v12 .m-form input[aria-invalid="true"] { border-color:var(--shu); box-shadow:0 0 0 3px #f6c2b9; } /* ---------- b13: LINE opens with the message typed in; copy is the helper (Instagram) ---------- */ #miyabi-site-v12 .m-contact .m-send-actions .m-button[data-line-oa] { background:var(--shu); border-color:var(--shu); color:#fff; } #miyabi-site-v12 .m-contact .m-inquiry-output:has([data-line-oa]) [data-copy-inquiry] { background:#fff; color:var(--shu); } /* ---------- b16: HERO end cue — small, on the wooden floor, never over the kimono ---------- */ #miyabi-site-v12 #miyabi-flower-transition .m-hero-cta { top:auto; bottom:max(14px,4.5%); transform:translateX(-50%); flex-direction:column; gap:0; min-width:0; min-height:48px; padding:7px 18px 3px; border:0; border-radius:999px; background:#fffaf2d9; color:#3b2621; font:500 13px/1.5 "Zen Maru Gothic","Hiragino Maru Gothic ProN","Hiragino Sans",sans-serif; letter-spacing:.08em; box-shadow:0 2px 10px #3b26211a; } #miyabi-site-v12 #miyabi-flower-transition .m-hero-cta::before { display:none; } #miyabi-site-v12 #miyabi-flower-transition .m-hero-cta .m-hero-cta-arrow { width:14px; height:16px; color:#b8392a; } #miyabi-site-v12 #miyabi-flower-transition .m-hero-cta.is-cta-visible .m-hero-cta-arrow { animation:miyabi-cue 1.8s ease-in-out infinite; } @keyframes miyabi-cue { 0%,100% { transform:translateY(-2px); } 50% { transform:translateY(3px); } } @media (min-width:850px) { #miyabi-site-v12 #miyabi-flower-transition .m-hero-cta { top:auto; bottom:max(14px,3%); } } @media (hover:hover) { #miyabi-site-v12 #miyabi-flower-transition .m-hero-cta:hover { background:#fffaf2; border-color:transparent; color:#962c20; } } @media (prefers-reduced-motion:reduce) { #miyabi-site-v12 #miyabi-flower-transition .m-hero-cta .m-hero-cta-arrow { animation:none; } } /* ---------- b16: お気に入りの一着を — the registered kimonos, age shortcuts, link to the list ---------- */ #miyabi-site-v12 .m-collection .m-opener { margin-bottom:8px; } #miyabi-site-v12 .m-collection-strip { margin-top:14px; } #miyabi-site-v12 .m-collection-ages { display:flex; flex-wrap:wrap; gap:8px; margin-top:4px; } #miyabi-site-v12 .m-collection-ages a { display:inline-flex; align-items:center; gap:6px; min-height:44px; padding:0 16px; border:2px solid var(--line); border-radius:999px; background:#fff; color:var(--ink); font-weight:700; font-size:14px; text-decoration:none; } #miyabi-site-v12 .m-collection-ages a span { font-weight:500; font-size:12px; color:var(--muted); } #miyabi-site-v12 .m-collection-ages a:active { background:var(--sakura); } #miyabi-site-v12 .m-collection-all { margin-top:18px; } #miyabi-site-v12 .m-collection-empty { margin:18px 0 0; padding:18px 20px; border-radius:20px; background:var(--nanohana); color:var(--muted); font-size:14px; } @media (hover:hover) { #miyabi-site-v12 .m-collection-ages a:hover { border-color:var(--shu); color:var(--shu-deep); } } @media (max-width:600px) { #miyabi-site-v12 .m-collection-all .m-button { width:100%; } } /* ---------- b18: the skip link under the HERO is for keyboard / screen-reader users only (the HERO's own cue already says 七五三のお支度を見る); it appears when focused ---------- */ #miyabi-site-v12 .m-hero-skip { position:absolute; left:50%; width:1px; height:1px; min-height:0; margin:0; padding:0; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0; } #miyabi-site-v12 .m-hero-skip:focus-visible { z-index:20; width:auto; height:auto; min-height:44px; padding:10px 20px; clip-path:none; transform:translateX(-50%); border-radius:999px; background:#fff; box-shadow:0 4px 16px #3b262126; } /* ---------- b19: gallery ①〜⑥ = the six received photos (square, shown whole, all visible) ---------- */ #miyabi-site-v12 .m-gallery-photos { margin-top:0; } #miyabi-site-v12 .m-gallery-photos .m-photo-slot--filled { aspect-ratio:1; } #miyabi-site-v12 .m-gallery .m-gallery-photos + .m-note { margin-top:40px; } @media (min-width:1000px) { #miyabi-site-v12 .m-gallery-grid.m-gallery-photos { grid-template-columns:repeat(3,minmax(0,1fr)); gap:36px 30px; } } /* ---------- b21: タブ付き横スライド（tab-slider.js）— tabs on top, arrows + 1／3 below. Display comes from .m-js-only (shown only with JavaScript); hidden="" when every card fits. ---------- */ #miyabi-site-v12 .m-tabslider-tabs { flex-wrap:wrap; gap:8px; margin-top:20px; } #miyabi-site-v12 .m-tabslider-tabs button { min-width:60px; min-height:44px; padding:6px 16px; border:2px solid var(--line); border-radius:999px; background:#fff; color:var(--ink); font:700 14px/1.3 var(--maru); } #miyabi-site-v12 .m-tabslider-tabs button[aria-pressed="true"] { background:var(--shu); border-color:var(--shu); color:#fff; } #miyabi-site-v12 .m-tabslider-nav { align-items:center; justify-content:center; gap:16px; margin-top:2px; } #miyabi-site-v12 .m-tabslider-nav button { width:44px; height:44px; padding:0; border:2px solid var(--line); border-radius:50%; background:#fff; color:var(--ink); font-size:18px; line-height:1; } #miyabi-site-v12 .m-tabslider-nav button:disabled { opacity:.35; cursor:default; } #miyabi-site-v12 .m-tabslider-count { min-width:4.2em; text-align:center; font-weight:700; font-size:14px; color:var(--muted); font-variant-numeric:tabular-nums; letter-spacing:.06em; } @media (hover:hover) { #miyabi-site-v12 .m-tabslider-tabs button:hover:not([aria-pressed="true"]), #miyabi-site-v12 .m-tabslider-nav button:hover:not(:disabled) { border-color:var(--shu); color:var(--shu-deep); } } #miyabi-site-v12 .m-age-slider .m-age-track { margin-top:16px; } /* お支度のかたち: the three service cards in one sideways track (PC: all three fit, so no tabs/arrows) */ #miyabi-site-v12 .m-service-slider { scroll-margin-top:16px; } #miyabi-site-v12 .m-service-track { list-style:none; display:flex; align-items:flex-start; gap:16px; margin:16px -32px 0; padding:6px 32px 20px; overflow-x:auto; overscroll-behavior-x:contain; scroll-snap-type:x mandatory; scroll-padding-inline:32px; scrollbar-width:none; } #miyabi-site-v12 .m-service-track::-webkit-scrollbar { display:none; } #miyabi-site-v12 .m-service-slide { flex:0 0 calc((100% - 16px) / 2); min-width:0; scroll-snap-align:start; } #miyabi-site-v12 .m-service-slide > .m-service { margin:0; } @media (max-width:600px) { #miyabi-site-v12 .m-service-track { margin-inline:-20px; padding-inline:20px; scroll-padding-inline:20px; } #miyabi-site-v12 .m-service-slide { flex-basis:86%; } } @media (min-width:1000px) { #miyabi-site-v12 .m-service-track { margin-inline:0; padding-inline:0; scroll-padding-inline:0; gap:20px; } #miyabi-site-v12 .m-service-slide { flex:1 1 0; } } /* ---------- b22: 中央寄せで統一（見出し・短い説明・カード・ボタン・タグ）。 長い説明（開閉の中・質問の答え）、箇条書き、料金表、入力欄、手順の一覧は読みやすさのため左寄せのまま ---------- */ #miyabi-site-v12 .m-intro-title, #miyabi-site-v12 .m-opener, #miyabi-site-v12 .m-section > .m-shell > .m-note, #miyabi-site-v12 .m-age-footnote, #miyabi-site-v12 .m-age-card, #miyabi-site-v12 .m-service, #miyabi-site-v12 .m-kimono-card-body, #miyabi-site-v12 .m-collection-empty, #miyabi-site-v12 .m-gallery .m-note, #miyabi-site-v12 .m-event-copy, #miyabi-site-v12 .m-contact > .m-shell > .m-note { text-align:center; } #miyabi-site-v12 .m-opener-text { margin-inline:auto; } #miyabi-site-v12 .m-intro-title, #miyabi-site-v12 .m-opener h2, #miyabi-site-v12 .m-opener .m-lead, #miyabi-site-v12 .m-age-card h3, #miyabi-site-v12 .m-age-copy, #miyabi-site-v12 .m-service h3, #miyabi-site-v12 .m-service > p, #miyabi-site-v12 .m-event-copy h3, #miyabi-site-v12 .m-event-copy > p, #miyabi-site-v12 .m-note { text-wrap:balance; } /* Japanese lines break only at the phrase marks (and 、。) — never inside a word like 七五三 */ #miyabi-site-v12 .m-intro-title, #miyabi-site-v12 .m-opener h2, #miyabi-site-v12 .m-opener .m-lead, #miyabi-site-v12 .m-age-card h3, #miyabi-site-v12 .m-age-copy, #miyabi-site-v12 .m-service h3, #miyabi-site-v12 .m-service > p, #miyabi-site-v12 .m-event-copy h3, #miyabi-site-v12 .m-event-copy > p, #miyabi-site-v12 .m-section .m-note:not(.m-disclosure-body .m-note) { word-break:keep-all; overflow-wrap:anywhere; } #miyabi-site-v12 .m-actions, #miyabi-site-v12 .m-contact .m-actions, #miyabi-site-v12 .m-event-copy .m-actions { justify-content:center; } #miyabi-site-v12 .m-service .m-pict { display:block; margin-inline:auto; } #miyabi-site-v12 .m-age-card h3 { padding-right:0; } #miyabi-site-v12 .m-faq-list summary { word-break:keep-all; overflow-wrap:anywhere; text-wrap:balance; } #miyabi-site-v12 .m-tabslider-tabs, #miyabi-site-v12 .m-collection-ages { justify-content:center; } /* reading text stays left */ #miyabi-site-v12 .m-disclosure-body, #miyabi-site-v12 .m-faq-list, #miyabi-site-v12 .m-consult-steps, #miyabi-site-v12 .m-form, #miyabi-site-v12 .m-price-list, #miyabi-site-v12 details > summary { text-align:left; } /* ---------- b22: お気に入りの一着を — age tags above the strip show where you are ---------- */ #miyabi-site-v12 .m-collection-slider .m-collection-ages { margin:18px 0 0; } #miyabi-site-v12 .m-collection-slider .m-collection-strip { margin-top:10px; } #miyabi-site-v12 .m-collection-ages a { flex:none; white-space:nowrap; } #miyabi-site-v12 .m-collection-ages a[aria-current="true"] { background:var(--shu); border-color:var(--shu); color:#fff; } #miyabi-site-v12 .m-collection-ages a[aria-current="true"] span { color:#fff; opacity:.9; } #miyabi-site-v12 .m-collection-slider .m-tabslider-nav { margin-top:0; } /* ---------- b24: 七五三のお支度 — compact cards (landscape photo, price on one line, smaller badge) ---------- */ #miyabi-site-v12 .m-age-card .m-photo-slot { aspect-ratio:4/3; } #miyabi-site-v12 .m-age--3 .m-photo-slot--filled > img { object-position:50% 30%; } #miyabi-site-v12 .m-age--5 .m-photo-slot--filled > img { object-position:50% 0%; } #miyabi-site-v12 .m-age--7 .m-photo-slot--filled > img { object-position:50% 5%; } #miyabi-site-v12 .m-age-numeral { right:12px; bottom:-20px; width:50px; height:50px; border-width:3px; font-size:28px; } #miyabi-site-v12 .m-age-card h3 { margin-top:14px; font-size:20px; } #miyabi-site-v12 .m-age-copy { margin-top:2px; font-size:14px; line-height:1.75; } #miyabi-site-v12 .m-age-price { display:flex; flex-wrap:wrap; align-items:baseline; justify-content:center; gap:2px 8px; margin-top:8px; } #miyabi-site-v12 .m-age-price strong { display:inline; font-size:30px; line-height:1.3; } #miyabi-site-v12 .m-age-card .m-actions { margin-top:10px; } #miyabi-site-v12 .m-age-card .m-disclosure { margin-top:4px; } #miyabi-site-v12 .m-age-card .m-disclosure > summary { padding-block:12px; } /* ---------- b25: お支度のかたち — the three cards look the same and share one height; 「〜の内容」 rows line up at the bottom (at least the original 24px gap above them) ---------- */ #miyabi-site-v12 .m-service-track { align-items:stretch; } #miyabi-site-v12 .m-service-slide { display:flex; } #miyabi-site-v12 .m-service-slide > .m-service { flex:1 1 auto; display:flex; flex-direction:column; } #miyabi-site-v12 .m-service-slide > .m-service::after { content:""; order:1; flex:1 0 24px; } #miyabi-site-v12 .m-service-slide > .m-service > .m-disclosure { order:2; margin-top:0; } #miyabi-site-v12 .m-photo-package { padding:24px 22px 8px; background:#fff; border:0; border-radius:26px; } #miyabi-site-v12 .m-photo-package .m-pict { background:var(--nanohana); } /* while a 「〜の内容」 is open, only that card grows (the others keep their own height) */ #miyabi-site-v12 .m-service-track:has(details[open]) { align-items:flex-start; } /* the three 「〜の内容」 rows stay on one line on a 375px phone, so their dividers line up */ @media (max-width:380px) { #miyabi-site-v12 .m-service-slide .m-disclosure > summary { font-size:14px; } } /* ---------- Footer ---------- */ #miyabi-site-v12 .m-footer { background:#fff; color:var(--ink); } #miyabi-site-v12 .m-footer p { color:var(--muted); font-size:12px; } /* ---------- Fixed bottom navigation ---------- */ #miyabi-site-v12 .m-bottom-bar { background:#fff; border-top:0; border-radius:20px 20px 0 0; box-shadow:0 -6px 24px #3b262117; } #miyabi-site-v12 .m-bottom-index { background:#fff; border:2px solid var(--line); border-radius:999px; color:var(--ink); font-weight:700; font-size:13px; } #miyabi-site-v12 .m-bottom-track { gap:2px; } #miyabi-site-v12 .m-bottom-track a { font-size:13px; font-weight:600; color:var(--ink); border:0; border-radius:999px; padding-inline:14px; } #miyabi-site-v12 .m-bottom-track a[aria-current="location"] { background:var(--sakura); color:var(--shu-deep); } #miyabi-site-v12 .m-bottom-consult { gap:5px; background:var(--shu); border-color:var(--shu); color:#fff; border-radius:999px; font-weight:700; font-size:14px; padding-inline:14px; } #miyabi-site-v12 .m-bottom-consult:active { background:var(--shu-deep); } #miyabi-site-v12 .m-bottom-consult[aria-current="location"] { box-shadow:0 0 0 3px #f6c2b9; } #miyabi-site-v12 .m-bottom-track a:active, #miyabi-site-v12 .m-bottom-index:active, #miyabi-site-v12 .m-toc-links a:active, #miyabi-site-v12 .m-toc-close:active { background:#fbdcdf; } #miyabi-site-v12 .m-toc-dialog { background:#fff; border:0; border-radius:24px; } #miyabi-site-v12 .m-toc-header h2 { font-family:var(--sans); font-weight:700; } #miyabi-site-v12 .m-toc-close { border-radius:999px; } #miyabi-site-v12 .m-toc-links a { font-weight:600; } #miyabi-site-v12 .m-toc-links a[aria-current="location"] { background:var(--sakura); color:var(--shu-deep); border-radius:12px; } @media (hover:hover) { #miyabi-site-v12 .m-button:not(.m-hero-cta):hover { background:var(--sakura); border-color:var(--shu); color:var(--shu-deep); } #miyabi-site-v12 .m-button--filled:not(.m-hero-cta):hover, #miyabi-site-v12 .m-age-card .m-actions .m-button:hover { background:var(--shu-deep); border-color:var(--shu-deep); color:#fff; } #miyabi-site-v12 .m-disclosure summary:hover { color:var(--shu-deep); } } @media (min-width:1000px) { #miyabi-site-v12 .m-section { padding:112px 0; } #miyabi-site-v12 .m-opener h2 { font-size:34px; } #miyabi-site-v12 .m-intro-title { font-size:48px; } #miyabi-site-v12 .m-room-photos { margin-inline:0; } #miyabi-site-v12 .m-room-photos figcaption, #miyabi-site-v12 .m-room-photos > .m-note { padding-inline:0; } #miyabi-site-v12 .m-room-strip { padding-inline:6px; overflow:visible; } #miyabi-site-v12 .m-room-strip li { flex:1 1 0; max-width:none; } #miyabi-site-v12 .m-purpose-nav { gap:18px; } #miyabi-site-v12 .m-purpose-nav a { padding:24px 24px 40px; } #miyabi-site-v12 .m-purpose-nav a strong { font-size:20px; } #miyabi-site-v12 .m-purpose-nav a span { font-size:13px; } #miyabi-site-v12 .m-gallery-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:36px 44px; } } @media (max-width:850px) { #miyabi-site-v12 .m-age-card { flex-basis:80%; max-width:340px; } #miyabi-site-v12 .m-service-grid { grid-template-columns:1fr; gap:16px; } #miyabi-site-v12 .m-event-grid { grid-template-columns:1fr; gap:34px; } } @media (max-width:600px) { #miyabi-site-v12 .m-shell { width:calc(100% - 40px); } #miyabi-site-v12 .m-section { padding:72px 0; } #miyabi-site-v12 .m-intro { padding-top:48px; } #miyabi-site-v12 .m-intro-title { font-size:30px; } #miyabi-site-v12 .m-intro-grid { margin-bottom:72px; } #miyabi-site-v12 .m-room-photos { margin-inline:-20px; } #miyabi-site-v12 .m-room-photos figcaption, #miyabi-site-v12 .m-room-photos > .m-note { padding-inline:20px; } #miyabi-site-v12 .m-room-strip { padding-inline:20px; scroll-padding-inline:20px; gap:16px; } #miyabi-site-v12 .m-purpose-nav { grid-template-columns:1fr; gap:8px; } #miyabi-site-v12 .m-purpose-nav a { display:grid; grid-template-columns:44px minmax(0,1fr) 20px; grid-template-rows:auto auto; column-gap:12px; align-items:center; padding:14px 16px; border-radius:20px; } #miyabi-site-v12 .m-purpose-nav .m-pict { grid-row:1 / span 2; width:38px; height:38px; } #miyabi-site-v12 .m-purpose-nav a strong { grid-column:2; margin:0; font-size:17px; } #miyabi-site-v12 .m-purpose-nav a span { grid-column:2; font-size:13px; line-height:1.6; } #miyabi-site-v12 .m-purpose-nav a i { position:static; grid-column:3; grid-row:1 / span 2; justify-self:end; } #miyabi-site-v12 .m-contact .m-send-actions > .m-button { width:100%; } #miyabi-site-v12 .m-opener h2 { font-size:25px; } #miyabi-site-v12 .m-opener .m-lead { font-size:14.5px; } #miyabi-site-v12 .m-age-track { margin-inline:-20px; padding-inline:20px; scroll-padding-inline:20px; gap:16px; } #miyabi-site-v12 .m-age-card { flex-basis:84%; max-width:330px; } #miyabi-site-v12 .m-gallery-grid { gap:18px 14px; } #miyabi-site-v12 .m-consult-steps { grid-template-columns:1fr; gap:8px; } #miyabi-site-v12 .m-consult-steps li { display:grid; grid-template-columns:34px minmax(0,1fr); column-gap:6px; padding:14px 16px; } #miyabi-site-v12 .m-consult-steps li::before { position:static; grid-row:1 / span 2; } #miyabi-site-v12 .m-consult-steps span { margin-top:0; } } @media (max-width:350px) { #miyabi-site-v12 .m-shell { width:calc(100% - 32px); } #miyabi-site-v12 .m-intro-title { font-size:27px; } #miyabi-site-v12 .m-age-track { margin-inline:-16px; padding-inline:16px; scroll-padding-inline:16px; } } /* b26：撮影会・撮影付きプランの条件の箇条書き、雅について */ #miyabi-site-v12 .m-terms { margin:14px auto 0; padding:0 0 0 1.25em; max-width:34em; text-align:left; font-size:14px; line-height:1.75; } #miyabi-site-v12 .m-terms li + li { margin-top:6px; } #miyabi-site-v12 .m-terms-title { margin:20px 0 0; font-weight:700; } #miyabi-site-v12 .m-profile { max-width:30em; margin:22px auto 0; padding:14px 6px; border-top:1px solid var(--line); border-bottom:1px solid var(--line); text-align:center; } #miyabi-site-v12 .m-profile-title { margin:0 0 6px; font:700 15px/1.6 var(--maru); color:var(--shu-deep); letter-spacing:.08em; } #miyabi-site-v12 .m-profile p:last-child { margin:0; font-size:14px; line-height:1.85; word-break:keep-all; overflow-wrap:anywhere; line-break:strict; } #miyabi-site-v12 .m-event-copy .m-event-bamboo + .m-event-bamboo { margin-top:0; } /* b29: received photo, not a depiction of the announced venue. */ #miyabi-site-v12 .m-event-photo{margin:0;min-width:0} #miyabi-site-v12 .m-event-photo img{object-position:50% 38%} #miyabi-site-v12 .m-event-photo figcaption{margin-top:9px;font-size:11px;line-height:1.7;color:#6e5b55;text-align:center}