:root { --paper:#ffffff; --paper2:#f8f3ee; --ink:#513b24; --muted:#8a7862; --line:#e9e3de; --accent:#d2a347; --accent-tint:#e3c077; --blush:#f6e9e7; --deep:#513b24; --serif:"Noto Serif JP", serif; --sans:"Noto Sans JP", sans-serif; --display:"Cormorant Garamond", serif; } * { box-sizing:border-box; } html { scroll-behavior:smooth; } body { margin:0; background:var(--paper); color:var(--ink); font-family:var(--sans); font-size:16px; line-height:2; } a { color:inherit; text-decoration:none; } img { display:block; width:100%; } .site-header { height:82px; padding:0 clamp(24px,5vw,76px); display:flex; align-items:center; justify-content:space-between; position:sticky; top:0; z-index:20; background:#ffffff; border-bottom:1px solid rgba(232,222,212,.55); } section[id], main[id] { scroll-margin-top:82px; } .brand { font-family:var(--display); font-size:40px; font-weight:600; line-height:1; letter-spacing:-.06em; } .brand span { color:var(--accent); } /* ブランドロゴ画像（ヘッダー／フッター）。フッターは背景がブラウンなので白抜きにする */ .brand img { display:block; height:30px; width:auto; } .site-footer .brand img { height:26px; filter:brightness(0) invert(1); opacity:.92; } .site-nav { display:flex; align-items:center; gap:28px; font-size:12px; letter-spacing:.06em; } .site-nav > a:not(.nav-shop) { transition:opacity .2s; } .site-nav > a:not(.nav-shop):hover { opacity:.56; } /* ヘッダーのメニューは英字（日本語だと5項目が入らない）。日本語はスマホの開閉メニューでだけ出す */ .nav-en { font-family:var(--display); font-size:14px; letter-spacing:.12em; line-height:1; } .nav-jp { display:none; } /* VOICE は横幅に余裕のある 1025px 以上でだけ出す。801〜1024px では5項目のまま */ .nav-voice { display:none; } @media (min-width:1025px) { .nav-voice { display:inline; } } /* いま見ているページを示す下線 */ .site-nav > a[aria-current="page"] { color:var(--accent); } .site-nav > a[aria-current="page"] .nav-en { border-bottom:1px solid var(--accent); padding-bottom:4px; } /* ヘッダーのInstagramアイコン。801pxでは横幅の余裕が64pxしかないので、 左のすき間を詰めて（gap28px - 8px）収める */ .nav-ig { display:inline-flex; align-items:center; margin-left:-8px; } .nav-ig-label { display:none; } .icon-ig { display:block; width:21px; height:21px; fill:none; stroke:currentColor; stroke-width:1.5; } .icon-ig .ig-dot { fill:currentColor; stroke:none; } /* Instagramアイコンが増えたぶん、横幅が厳しい801〜1024pxだけ項目の間隔を詰める */ @media (min-width:801px) and (max-width:1024px) { .site-nav { gap:24px; } } .nav-shop { background:var(--accent); color:white; padding:10px 19px; border-radius:999px; transition:background .2s, transform .2s; } .nav-shop:hover { background:#bd9038; transform:translateY(-1px); } .menu-button { display:none; } .hero { min-height:650px; display:grid; grid-template-columns:46% 54%; position:relative; overflow:hidden; background:#fbf4f3; } .hero-copy { padding:clamp(78px,13vw,185px) 0 80px clamp(24px,10vw,158px); position:relative; z-index:2; } .eyebrow { margin:0 0 16px; color:var(--accent); font-family:var(--display); font-size:15px; font-weight:600; letter-spacing:.14em; line-height:1.2; } .hero-copy h1 { font-size:clamp(34px,3.8vw,52px); letter-spacing:.03em; } .hero-sub { margin:28px 0 22px; font-family:var(--serif); font-size:20px; letter-spacing:.06em; line-height:1.85; } .hero-tagline { margin:0 0 36px; color:var(--muted); font-family:var(--serif); font-size:16px; letter-spacing:.1em; } .section-label { margin-bottom:16px; } .section-label-marks { display:block; margin-bottom:10px; color:var(--accent-tint); font-size:13px; letter-spacing:8px; } .section-label-en { margin:0; color:var(--accent); font-family:var(--display); font-style:italic; font-weight:500; font-size:clamp(30px,3.6vw,46px); letter-spacing:.1em; line-height:1; } .growth .section-label-en, .reasons-icons .section-label-en { font-size:clamp(44px,13vw,64px); } #growth-title { margin-top:64px; } #growth-title span { display:inline; position:relative; color:var(--ink); z-index:1; background-image:linear-gradient(var(--accent), var(--accent)); background-repeat:no-repeat; background-position:0 88%; background-size:100% 3px; } .section-label-ja { margin:8px 0 0; color:var(--muted); font-size:13px; letter-spacing:.2em; } h1,h2,h3,p { margin-top:0; } h1,h2,h3 { font-weight:500; } h1 { margin-bottom:24px; font-family:var(--serif); font-size:clamp(35px,4vw,59px); line-height:1.52; letter-spacing:.08em; } h2 { margin-bottom:24px; font-family:var(--serif); font-size:clamp(27px,3vw,42px); line-height:1.55; letter-spacing:.06em; } h3 { font-family:var(--serif); font-size:22px; letter-spacing:.06em; line-height:1.6; } .hero-lead { margin-bottom:36px; color:var(--muted); } .hero-actions { display:flex; gap:14px; align-items:center; flex-wrap:wrap; } .button { display:inline-flex; align-items:center; justify-content:center; gap:24px; padding:14px 30px; min-height:52px; border-radius:999px; font-size:14px; letter-spacing:.08em; transition:transform .2s, background .2s; } .button:hover { transform:translateY(-2px); }.button span { font-size:18px; font-weight:400; } .button-primary { background:var(--accent); color:#fff; }.button-outline { background:transparent; color:var(--accent); border:1px solid var(--accent); }.text-link { display:inline-flex; align-items:center; gap:10px; border-bottom:1px solid var(--ink); padding-bottom:3px; font-size:12px; line-height:1.4; letter-spacing:.06em; } .hero-image-wrap { min-height:650px; overflow:hidden; position:relative; }.hero-image { height:100%; object-fit:cover; object-position:center; } @media (min-width:801px) { .hero-image-wrap::before { content:""; position:absolute; inset:0; z-index:1; background:linear-gradient(to right, #fbf4f3 0%, rgba(251,244,243,.55) 8%, rgba(251,244,243,0) 22%); pointer-events:none; } }.hero-scroll { position:absolute; bottom:28px; left:clamp(24px,10vw,158px); font:11px/1 var(--display); letter-spacing:.14em; color:var(--muted); writing-mode:vertical-rl; } .section-pad { padding:clamp(80px,12vw,170px) clamp(24px,10vw,158px); }.intro { display:grid; grid-template-columns:minmax(0,720px); gap:70px; align-items:start; justify-content:center; justify-items:center; text-align:center; background:var(--paper2); }.intro p:not(.eyebrow):not(.section-label-en):not(.section-label-ja) { max-width:670px; margin:0 auto 21px; color:var(--muted); line-height:2.4; } .intro-label-en { font-size:clamp(44px,13vw,64px); } /* コンセプトセクションの装飾イラスト。 広い画面では左の余白に、余白がなくなる幅からは本文の背面に薄く重ねる。 幅は「本文720pxを除いた片側の余白ぶん」から算出している。 */ .intro { position:relative; } .intro > div { position:relative; z-index:1; } .intro-deco { position:absolute; z-index:0; left:clamp(8px,2vw,48px); top:50%; width:380px; height:auto; transform:translateY(-50%) rotate(-15deg); opacity:.85; pointer-events:none; } @media (max-width:1199px) { .intro-deco { left:50%; width:min(92%,560px); transform:translate(-50%,-50%) rotate(-15deg); opacity:.14; } } .intro p.intro-label-en { color:var(--accent); } .intro h2 { margin-top:64px; } .section-heading { max-width:650px; }.section-heading.centered { margin:0 auto; text-align:center; }.section-heading.centered > p:last-child { color:var(--muted); }.product { background:var(--paper); }.product-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:26px; max-width:1000px; margin:58px auto 90px; }.product-card { background:var(--paper2); padding:20px 30px 34px; }.product-visual { height:300px; display:flex; align-items:flex-end; padding:25px; color:rgba(255,255,255,.8); font:28px/1 var(--display); letter-spacing:.14em; position:relative; overflow:hidden; }.product-visual::after { content:""; position:absolute; inset:20px; border:1px solid rgba(255,255,255,.55); border-radius:50% 50% 44% 44%; }.product-visual span { position:relative; z-index:1; }.hand-visual { background:linear-gradient(135deg,var(--wood,#d9c5ae),var(--ink)); }.foot-visual { background:linear-gradient(135deg,var(--blush),var(--accent)); }.product-label { margin:25px 0 6px; color:var(--accent); font:12px/1 var(--display); letter-spacing:.13em; }.product-card h3 { margin-bottom:8px; }.product-card > p:not(.product-label) { min-height:60px; margin-bottom:20px; color:var(--muted); font-size:13px; }.card-link { border-bottom:1px solid var(--ink); font-size:12px; letter-spacing:.05em; }.card-link span { margin-left:10px; } .kit-details { display:grid; grid-template-columns:1fr 1.2fr; gap:70px; max-width:1000px; margin:0 auto; padding:54px; background:var(--paper2); }.kit-copy p:last-child { color:var(--muted); font-size:16px; }.spec-list { margin:0; }.spec-list div { display:grid; grid-template-columns:150px 1fr; padding:14px 0; border-bottom:1px solid rgba(81,59,36,.18); font-size:13px; }.spec-list dt { color:var(--muted); }.spec-list dd { margin:0; }.spec-list small,.reason-list small,.site-footer small { color:var(--muted); font-size:10px; }.note { margin:20px 0 0; color:var(--muted); font-size:11px; line-height:1.8; } .reasons { display:grid; grid-template-columns:1fr 1.45fr; gap:90px; background:var(--deep); color:white; }.reasons .eyebrow { color:var(--accent-tint); }.reason-list { border-top:1px solid rgba(255,255,255,.3); }.reason-list article { display:grid; grid-template-columns:70px 1fr 1fr; gap:15px; align-items:center; padding:23px 0; border-bottom:1px solid rgba(255,255,255,.3); }.reason-list span { color:var(--accent-tint); font:18px var(--display); }.reason-list h3 { margin:0; font-size:17px; }.reason-list p { margin:0; color:rgba(255,255,255,.75); font-size:12px; line-height:1.9; }.reason-list small { color:var(--accent-tint); } .howto { background:var(--paper2); }/* 見出しを1行に保てるよう、左カラムを少し広くとる */ .howto-top { display:grid; grid-template-columns:1.2fr .8fr; gap:80px; align-items:start; }.howto-top > p { max-width:430px; margin:clamp(70px,14vw,210px) 0 30px; color:var(--muted); font-size:16px; }.steps { margin:50px 0 0; padding:0; counter-reset:steps; display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid var(--line); list-style:none; }.steps li { position:relative; padding:25px 18px 0 0; border-right:1px solid var(--line); min-height:170px; }.steps li:not(:first-child) { padding-left:20px; }.steps li:last-child { border-right:0; }.steps span { display:block; margin-bottom:20px; color:var(--accent); font:14px var(--display); letter-spacing:.1em; }.steps strong { display:block; margin-bottom:8px; font:500 18px var(--serif); }.steps p { color:var(--muted); font-size:14px; line-height:1.85; } .gallery { background:var(--paper); text-align:center; }.gallery-grid { margin:55px auto 38px; max-width:1000px; display:grid; grid-template-columns:1.25fr .75fr; grid-template-rows:220px 220px; gap:14px; text-align:left; }.gallery-grid figure { margin:0; overflow:hidden; }.gallery-grid img { height:100%; object-fit:cover; }.gallery-large { grid-row:span 2; position:relative; }.gallery-large img { object-position:62% center; }.gallery-large figcaption { position:absolute; bottom:0; left:0; right:0; padding:26px; background:linear-gradient(transparent,rgba(81,59,36,.72)); color:white; font:17px var(--serif); }.gallery-detail img { object-position:70% 50%; transform:scale(1.5); }.gallery-foot img { object-position:91% 60%; transform:scale(1.55); }.button-outline { border:1px solid var(--accent); color:var(--accent); } .instagram { padding-top:75px; padding-bottom:75px; background:linear-gradient(110deg,var(--paper2) 0%,var(--blush) 100%); }.instagram-head { display:flex; justify-content:space-between; align-items:end; gap:32px; }.instagram h2 { margin-bottom:10px; font-family:var(--display); letter-spacing:0; }.instagram-head p:last-child { margin-bottom:0; color:var(--muted); font-size:13px; }.instagram-posts { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:36px; }.instagram-post { display:block; position:relative; overflow:hidden; background:var(--blush); color:white; aspect-ratio:1 / 1.18; }.instagram-post img { height:100%; object-fit:cover; transition:transform .35s ease; }.instagram-post:hover img { transform:scale(1.04); }.instagram-post::after { content:""; position:absolute; inset:0; background:linear-gradient(transparent 42%,rgba(81,59,36,.62)); pointer-events:none; }.instagram-post span,.instagram-post p { position:absolute; z-index:1; left:16px; margin:0; }.instagram-post span { top:14px; padding:3px 8px; border:1px solid rgba(255,255,255,.8); font:11px/1.3 var(--display); letter-spacing:.12em; }.instagram-post p { bottom:14px; right:12px; font:15px/1.6 var(--serif); }.faq { background:var(--paper2); }.faq-list { max-width:800px; margin:52px auto 0; border-top:1px solid var(--line); }.faq-list details { border-bottom:1px solid var(--line); }.faq-list summary { cursor:pointer; padding:22px 42px 22px 0; list-style:none; position:relative; font-size:16px; }.faq-list summary::-webkit-details-marker { display:none; }.faq-list summary::after { content:"+"; position:absolute; right:8px; top:19px; color:var(--accent); font:27px/1 var(--display); }.faq-list details[open] summary::after { content:"−"; }.faq-list p { max-width:690px; padding:0 20px 24px 0; margin:0; color:var(--muted); font-size:16px; }.safety { display:grid; grid-template-columns:1fr 1fr; gap:90px; background:var(--paper); }.safety > div:last-child { max-width:520px; color:var(--muted); font-size:13px; }.safety .text-link { margin-top:14px; color:var(--ink); }.final-cta { padding:120px 24px; text-align:center; color:white; background:linear-gradient(rgba(81,59,36,.84),rgba(81,59,36,.92)), url("assets/cta-bg.webp?v=5") center/cover; }.final-cta .eyebrow { color:var(--accent-tint); }.final-cta h2 { font-size:clamp(25px,3vw,40px); }.final-cta > p:not(.eyebrow) { margin-bottom:35px; color:rgba(255,255,255,.82); font-size:13px; }.button-light { background:white; color:var(--accent); border:1px solid var(--accent); }.site-footer { padding:50px clamp(24px,10vw,158px) 30px; background:var(--ink); color:#f5eee5; }.site-footer .brand { display:inline-block; margin-bottom:34px; }.site-footer > p { margin:0; color:#c5b3a4; font-size:10px; } .sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; } @media (max-width:800px) { .site-header { height:67px; padding:0 22px; } section[id], main[id] { scroll-margin-top:67px; }.brand { font-size:34px; }.brand img { height:25px; }.menu-button { display:flex; flex-direction:column; justify-content:center; gap:5px; width:40px; height:40px; padding:7px; border:0; background:transparent; }.menu-button span:not(.sr-only) { display:block; width:25px; height:1px; background:var(--ink); transition:.2s; }.menu-button.is-open span:first-child { transform:translateY(6px) rotate(45deg); }.menu-button.is-open span:nth-child(2) { opacity:0; }.menu-button.is-open span:nth-child(3) { transform:translateY(-6px) rotate(-45deg); }.site-nav { display:none; position:absolute; top:67px; left:0; right:0; padding:24px; flex-direction:column; align-items:stretch; gap:0; background:#ffffff; border-top:1px solid var(--line); box-shadow:0 12px 18px rgba(67,50,38,.08); }.site-nav.is-open { display:flex; }.site-nav a { padding:13px 0; }.nav-shop { text-align:center; margin-top:10px; }.hero { min-height:auto; display:flex; flex-direction:column; }.hero-copy { order:2; padding:56px 24px 72px; }.hero-image-wrap { order:1; min-height:350px; height:58vh; }.hero-image { object-position:63% center; } h1 { font-size:35px; }.hero-scroll { display:none; }.section-pad { padding:80px 24px; }.intro { grid-template-columns:1fr; gap:20px; }.product-grid { grid-template-columns:1fr; margin:38px 0 50px; }.product-visual { height:230px; }.kit-details { grid-template-columns:1fr; gap:25px; padding:32px 24px; }.spec-list div { grid-template-columns:100px 1fr; }.reasons { grid-template-columns:1fr; gap:34px; }.reason-list article { grid-template-columns:48px 1fr; gap:4px 12px; }.reason-list article p { grid-column:2; }.howto-top,.safety { grid-template-columns:1fr; gap:25px; }.steps { grid-template-columns:1fr 1fr; }.steps li:nth-child(2) { border-right:0; }.steps li:nth-child(n+3) { border-top:1px solid var(--line); }.steps li:nth-child(3) { padding-left:0; }.gallery-grid { grid-template-columns:1fr 1fr; grid-template-rows:210px 160px; margin-top:35px; }.gallery-large { grid-column:span 2; grid-row:auto; }.gallery-large figcaption { padding:16px; font-size:14px; }.instagram { padding-top:60px; padding-bottom:60px; }.instagram-head { display:block; }.instagram-head .text-link { margin-top:25px; }.instagram-posts { gap:9px; margin-top:28px; }.instagram-post span { top:8px; left:8px; padding:2px 5px; font-size:9px; }.instagram-post p { bottom:8px; left:8px; right:6px; font-size:11px; line-height:1.45; }.final-cta { padding:85px 24px; }} /* --- 2026-08-18 11セクション構成へ再編（追加分） --- */ .hero-pre { margin-bottom:18px; color:var(--muted); font:14px/1.9 var(--serif); letter-spacing:.08em; } .hero-meta { margin:32px 0 0; color:var(--muted); font-size:11px; letter-spacing:.06em; } .growth { background:var(--paper); text-align:center; overflow-x:clip; overflow-y:visible; } .growth-collage { position:relative; max-width:640px; margin:130px auto 40px; z-index:1; } .growth-side { position:absolute; top:62%; transform:translateY(-50%); display:flex; flex-direction:column; gap:32px; z-index:0; } .growth-side-left { left:-430px; align-items:flex-end; } .growth-side-right { right:-644px; align-items:flex-start; } /* 右上の写真を大きくした分（+320px）だけ右へ。左端の位置は従来どおり */ .growth-blob { position:relative; margin:0; } .growth-blob::before { content:""; display:none; position:absolute; inset:-18px; z-index:0; background:var(--accent-tint); opacity:.5; } .growth-blob img { position:relative; z-index:1; display:block; object-fit:cover; /* 奥行きが出るように、写真の輪郭に沿ってやわらかい影を落とす */ box-shadow:0 clamp(8px,1.2vw,18px) clamp(20px,3vw,42px) rgba(81,59,36,.16); } /* 登場演出を使うときだけ、最初は見えない状態から始める （JSが動かない環境・動きを減らす設定では、このクラスが付かないので常に表示） */ .growth.is-reveal .growth-blob img { opacity:0; } .growth-blob-1 { width:380px; height:380px; transform:translateY(-80px); } .growth-blob-1::before { border-radius:58% 42% 63% 37% / 41% 55% 45% 59%; } .growth-blob-1 img { width:100%; height:100%; border-radius:62% 38% 55% 45% / 45% 60% 40% 55%; } .growth-blob-2 { width:220px; height:220px; margin-right:44px; } .growth-blob-2::before { border-radius:46% 54% 38% 62% / 60% 42% 58% 40%; } .growth-blob-2 img { width:100%; height:100%; border-radius:48% 52% 40% 60% / 58% 44% 56% 42%; } .growth-blob-3 { width:720px; height:720px; margin-left:0; transform:translate(80px,-160px); } .growth-blob-3::before { border-radius:40% 60% 55% 45% / 50% 46% 54% 50%; } .growth-blob-3 img { width:100%; height:100%; border-radius:42% 58% 57% 43% / 52% 48% 52% 48%; } .growth-blob-4 { width:320px; height:320px; transform:translateY(12px); } .growth-blob-4::before { border-radius:63% 37% 42% 58% / 45% 63% 37% 55%; } .growth-blob-4 img { width:100%; height:100%; border-radius:60% 40% 45% 55% / 48% 58% 42% 52%; } .growth-note { margin:0 0 46px; color:var(--muted); font-size:13px; } .growth-copy { max-width:640px; margin:0 auto; position:relative; z-index:3; } .growth-copy p { margin-bottom:20px; color:var(--muted); line-height:2.4; } .growth-copy strong { color:var(--ink); font-weight:600; } /* メッセージ本文のなかで、特に伝えたい2箇所だけ大きく・太くする。 サイズは見出し（h2 = clamp(27px,3vw,42px)）に合わせて画面幅で縮める。 本文と同じ16px固定にすると、画面が狭いとき見出しだけが小さくなり、 強調が相対的に大きく見えてしまうため。上限21.5pxは元の1.34emと同じ大きさ。 色は --accent(#d2a347) を少しだけ濃くしたゴールド。白地でのコントラストが 2.3→3.0 になり、 大きい太字の基準(3.0)にちょうど届く。これ以上明るくすると基準を割る */ .growth-copy .growth-em { color:#c08c34; font-size:clamp(18px,1.6vw,21.5px); font-weight:700; letter-spacing:.02em; } .steps-3 { grid-template-columns:repeat(3,1fr); } .kit-price { margin:6px 0 24px; font:clamp(26px,3vw,34px)/1.3 var(--serif); letter-spacing:.04em; } .kit-price small { color:var(--muted); font-size:12px; } .assurance { background:var(--paper); } .assurance-list { max-width:800px; margin:52px auto 0; } /* 「はじめてでも、安心して。」の項目名は長いものがあるので、左の列を少し広げて折り返しも許す */ .assurance-list > div { grid-template-columns:170px 1fr; } .assurance .faq-list { max-width:800px; margin:44px auto 0; border-top:1px solid var(--line); } .assurance-more { max-width:800px; margin:26px auto 0; text-align:right; } .story { display:grid; grid-template-columns:1fr 1.2fr; gap:clamp(32px,7vw,90px); background:var(--paper2); } .story-body p { margin-bottom:18px; color:var(--muted); font-size:16px; } .story-alert { padding:14px 18px; background:var(--blush); color:#63492f; font-size:12px; line-height:1.8; } .voice { background:var(--paper); text-align:center; } .instagram h2 { font-family:var(--serif); font-size:clamp(24px,2.4vw,34px); letter-spacing:.06em; } .site-footer .brand { margin-bottom:10px; } .footer-tag { margin:0 0 34px; color:#c5b3a4; font-size:12px; } /* フッターのSNS導線。ロゴ・タグラインの下に「Follow us —」とアイコンを並べる */ .footer-follow { display:flex; align-items:center; gap:12px; margin:0; color:#c5b3a4; } .footer-follow-label { font-family:var(--display); font-size:14px; letter-spacing:.26em; line-height:1; } .footer-follow-rule { width:26px; height:1px; background:currentColor; opacity:.55; } .footer-follow a { display:block; color:#f5eee5; transition:opacity .2s, color .2s; } .footer-follow a:hover { color:var(--accent-tint); opacity:.85; } @media (max-width:800px) { .growth-collage { margin:30px auto 0; display:flex; flex-direction:column; } .growth-copy { order:-1; margin-bottom:26px; } .growth-side { position:static; transform:none; flex-direction:row; flex-wrap:wrap; justify-content:center; align-items:flex-start; gap:16px; margin:0 auto 20px; } .growth-side-left, .growth-side-right { align-items:flex-start; } /* 横並びに切り替わるので、PC用のずらしは打ち消す */ .growth-blob-1, .growth-blob-2, .growth-blob-3, .growth-blob-4 { transform:none; } .growth-blob-1 { width:140px; height:140px; } .growth-blob-2 { width:105px; height:105px; margin-right:0; } .growth-blob-3 { width:220px; height:220px; margin-left:0; } .growth-blob-4 { width:150px; height:150px; } .steps-3 { grid-template-columns:1fr 1fr; } .story { grid-template-columns:1fr; gap:26px; } .kit-copy .button { width:100%; } .assurance-more { text-align:left; } } .howto { background:var(--paper); } .assurance-list div:last-child { border-bottom:0; } /* --- 下層ページ --- */ .page-head { padding:clamp(60px,9vw,110px) clamp(24px,10vw,158px) clamp(50px,7vw,80px); background:var(--paper2); } .page-head h1 { margin-bottom:14px; font-size:clamp(30px,3.4vw,48px); } .page-lead { margin:0; color:var(--muted); font-size:16px; } .page-body { padding-top:clamp(56px,7vw,90px); padding-bottom:clamp(56px,7vw,90px); } .page-body.alt { background:var(--paper2); } .prose { max-width:760px; margin:0 auto; } .prose h2 { margin-bottom:22px; font-size:clamp(24px,2.6vw,34px); } .prose p { margin-bottom:18px; color:var(--muted); font-size:16px; } /* 規約類の箇条書き。本文と同じ色・行間にそろえる */ .prose ul { margin:0 0 18px; padding-left:1.4em; color:var(--muted); font-size:16px; } .prose ul li { margin-bottom:6px; line-height:1.95; } .prose ul li::marker { color:var(--accent-tint); } .prose .spec-list { margin-top:26px; } .prose .faq-list { margin:0 0 44px; border-top:1px solid var(--line); } .faq-cat { margin-bottom:18px; font-size:20px; letter-spacing:.08em; } .small-note { color:var(--muted); font-size:11px; line-height:1.9; } .policy-h { margin-bottom:12px; font-size:17px; letter-spacing:.06em; } /* ご購入前にご確認くださいページ：大きな見出し（カテゴリ）と、その中の項目 */ .policy-group { margin-bottom:clamp(40px,5vw,56px); } .policy-group:last-child { margin-bottom:0; } /* 文字サイズは .prose h2（24px）のまま。FAQページのカテゴリ見出しと同じ大きさにそろえている */ .policy-cat { padding-bottom:12px; border-bottom:1px solid var(--line); letter-spacing:.08em; } .policy-group .policy-h { margin-top:28px; } .policy-group .policy-h + p { margin-bottom:14px; } .inline-link { border-bottom:1px solid var(--accent); color:var(--accent); } .gift-list { max-width:760px; margin:44px auto 0; padding:0; list-style:none; border-top:1px solid var(--line); } .gift-list li { display:grid; grid-template-columns:230px 1fr; gap:16px; align-items:baseline; padding:20px 0; border-bottom:1px solid var(--line); } .gift-list strong { font:500 17px var(--serif); letter-spacing:.06em; } .gift-list span { color:var(--muted); font-size:13px; } .page-cta { padding:clamp(70px,9vw,110px) 24px; text-align:center; background:var(--paper); border-top:1px solid var(--line); } .page-cta h2 { margin-bottom:30px; } .page-back { margin:30px 0 0; } @media (max-width:800px) { .gift-list li { grid-template-columns:1fr; gap:5px; } } .prose .eyebrow { color:var(--accent); font-family:var(--display); font-size:15px; } .prose .small-note { margin-top:20px; } /* --- 日本語の折り返し制御（2026-08-18） --- */ /* auto-phrase = 文節の切れ目で折り返す。strict = 「、」「。」「ー」などの禁則を厳しく扱う */ h1, h2, h3, p, li, dt, dd, summary, figcaption, strong, span { word-break: auto-phrase; line-break: strict; overflow-wrap: normal; } /* 見出しは行の長さを揃える。本文は最終行が1文字だけ残るのを防ぐ */ h1, h2, h3 { text-wrap: balance; } p, li, dd, summary { text-wrap: pretty; } /* ラベル列（セット内容・のし等）は語の途中で折り返さない */ .spec-list dt { word-break: keep-all; } @media (max-width:800px) { .spec-list div { grid-template-columns:140px 1fr; } } @media (max-width:560px) { .spec-list div { grid-template-columns:1fr; gap:2px; } .spec-list dt { color:var(--ink); } } /* Instagram画像上のキャプションは2行になると窮屈なので行間を広げる */ .instagram-post p { line-height:1.65; } /* --- 写真の組み込み（2026-08-19） --- */ .fixed-photo { height:clamp(480px,100vh,1100px); background-image:url("assets/family.webp?v=3"); background-position:center center; background-size:cover; background-repeat:no-repeat; background-attachment:fixed; } .step-photo { margin-bottom:22px; aspect-ratio:4/3; object-fit:cover; border-radius:14px; } .steps li { padding-top:0; } /* 商品写真スライダー（ECのギャラリー形式） */ .kit-slider { position:relative; max-width:800px; margin:52px auto 34px; } .kit-track { display:flex; overflow-x:auto; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; scrollbar-width:none; } .kit-track::-webkit-scrollbar { display:none; } .kit-track figure { flex:0 0 100%; margin:0; scroll-snap-align:start; } .kit-track img { aspect-ratio:4 / 3; object-fit:cover; } .kit-arrow { position:absolute; top:50%; transform:translateY(-50%); width:44px; height:44px; display:flex; align-items:center; justify-content:center; border:0; border-radius:999px; background:rgba(255,255,255,.86); color:var(--ink); font-size:26px; line-height:1; cursor:pointer; transition:background .2s, opacity .2s; } .kit-arrow:hover { background:#fff; } .kit-arrow[disabled] { opacity:.28; cursor:default; } .kit-prev { left:14px; } .kit-next { right:14px; } .kit-thumbs { display:grid; grid-template-columns:repeat(8,1fr); gap:10px; margin-top:10px; } /* 写真が8枚に増えたので、スマホは1列に並べると小さくなりすぎる。4枚×2段にする */ @media (max-width:560px) { .kit-thumbs { grid-template-columns:repeat(4,1fr); gap:8px; } } .kit-thumbs button { padding:0; border:0; background:none; cursor:pointer; opacity:.5; transition:opacity .2s; } .kit-thumbs button.is-current { opacity:1; } .kit-thumbs button:hover { opacity:.85; } .kit-thumbs img { aspect-ratio:4 / 3; object-fit:cover; } .living-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; max-width:1000px; margin:34px auto 0; } .living-grid img { aspect-ratio:4/3; object-fit:cover; } .story { align-items:start; } .story-photo { margin-bottom:28px; max-width:320px; } @media (max-width:800px) { .step-photo { margin-bottom:14px; } .living-grid { gap:9px; } .story-photo { max-width:230px; } } .gift-photo { margin-bottom:34px; } /* 贈りものページ：のしシールの実物写真。本文幅いっぱいだと大きすぎるので幅を抑える */ .noshi-figure { max-width:330px; margin:32px auto 0; } .noshi-figure img { height:auto; border-radius:14px; } .noshi-figure figcaption { margin-top:12px; color:var(--muted); font-size:13px; text-align:center; line-height:1.8; } .hero-image { object-position:62% center; } /* --- 2026-08-19 打ち合わせ資料を反映した追加セクション --- */ /* 直前の写真からゆるやかなカーブでつながるセクション（両端が水平に寝るベジェをマスクで抜く） */ .curve-top { --curve:clamp(70px,12vw,200px); position:relative; z-index:1; padding-top:clamp(20px,3.5vw,56px); } .curve-top::before { content:""; position:absolute; left:0; right:0; bottom:calc(100% - 1px); height:calc(var(--curve) + 1px); background:inherit; -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 20' preserveAspectRatio='none'%3E%3Cpath d='M0,20 C16,20 32,0 50,0 C68,0 84,20 100,20 Z' fill='%23000'/%3E%3C/svg%3E") no-repeat center/100% 100%; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 20' preserveAspectRatio='none'%3E%3Cpath d='M0,20 C16,20 32,0 50,0 C68,0 84,20 100,20 Z' fill='%23000'/%3E%3C/svg%3E") no-repeat center/100% 100%; } .reasons-icons { background:linear-gradient(rgba(255,255,255,.72),rgba(255,255,255,.72)), url("assets/reasons-bg-marble.webp") center/cover no-repeat; text-align:center; } .athome { padding-top:clamp(20px,3.5vw,56px); background:#fbf4f3; display:grid; grid-template-columns:minmax(0,1fr); gap:clamp(28px,3vw,42px); text-align:center; } .athome .section-heading { margin:0 auto; } .athome-body p { max-width:720px; margin-left:auto; margin-right:auto; color:var(--muted); font-size:16px; } .check-list { margin:26px 0 0; padding:0; list-style:none; border-top:1px solid var(--line); } .check-list li { padding:18px 0; border-bottom:1px solid var(--line); } .check-list strong { display:block; margin-bottom:5px; font:500 16px var(--serif); letter-spacing:.05em; } .check-list span { color:var(--muted); font-size:14px; } .athome .check-list { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px; margin:38px 0 0; border-top:0; } .athome .check-list li { padding:34px 26px; border-bottom:0; background:var(--paper); border-radius:14px; } .athome .check-list strong { margin-bottom:10px; } /* お客様の声カード（写真の前） */ .voice-cards { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; max-width:1000px; margin:40px auto 0; padding:0; list-style:none; text-align:left; } .voice-card { position:relative; display:flex; flex-direction:column; padding:34px 26px 24px; background:var(--paper2); } .voice-card::before { content:"\201C"; position:absolute; top:12px; left:22px; color:var(--accent-tint); font:46px/1 var(--display); } .voice-quote { position:relative; margin:0 0 20px; font-size:16px; line-height:2.05; word-break:normal; text-wrap:wrap; } /* お客様の声は「。」「！」で区切った文ごとに改行し、文中は行末まで使う */ .voice-sentence { display:block; word-break:normal; text-wrap:wrap; } /* お客様の声のなかで、いちばん響く一節を強調する。 文字は本文と同じ濃茶のまま、うしろに金のマーカーを敷く。 文字色を変えるだけでは、まわりの茶色と近すぎて目立たなかったため。 box-decoration-break:clone がないと、2行にまたがったとき1行目にしか帯が付かない。 斜体は日本語だと字形が崩れるので font-style:normal で打ち消している */ .voice-em { font-style:normal; font-weight:700; color:var(--ink); -webkit-box-decoration-break:clone; box-decoration-break:clone; background-image:linear-gradient(transparent 58%, rgba(226,192,119,.62) 58%); } .voice-who { margin:auto 0 0; padding-top:14px; border-top:1px solid var(--line); } .voice-who strong { display:block; margin-bottom:3px; font:500 14px var(--serif); letter-spacing:.04em; } .voice-who span { display:block; color:var(--muted); font-size:11px; line-height:1.75; } /* 製作風景（VOICE内）: PCは4列グリッド、モバイルは横スクロール */ /* ギフトページへの導線（VOICEとINSTAGRAMの間） */ .gift-cta { display:grid; grid-template-columns:1fr 1fr; gap:clamp(36px,6vw,84px); align-items:center; background:#fbf4f3; } .gift-cta-photo { width:100%; } .gift-cta-body h2 { margin-bottom:20px; } .gift-cta-body > p { max-width:520px; margin-bottom:26px; color:var(--muted); font-size:16px; word-break:normal; text-wrap:wrap; } .gift-cta-scenes { display:flex; flex-wrap:wrap; gap:8px; margin:0 0 32px; padding:0; list-style:none; } .gift-cta-scenes li { padding:7px 16px; border:1px solid var(--accent-tint); border-radius:999px; color:var(--accent); font-size:12px; line-height:1.6; letter-spacing:.04em; } .making-lead { margin:34px 0 0; text-align:center; color:var(--muted); font-size:16px; } .making-strip { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:14px; margin:22px 0 0; } .making-strip figure { margin:0; } .making-strip img { aspect-ratio:4 / 5; object-fit:cover; } .making-strip figcaption { margin-top:10px; text-align:center; color:var(--muted); font-size:12px; line-height:1.7; } .athome-note { max-width:720px; margin:34px auto 0; padding:14px 18px; background:var(--blush); color:#63492f; font-size:12px; line-height:1.8; } /* つくりかた：3ステップの下の横長バー。押すとポップアップで動画が開く */ .howto-movie-bar { display:flex; align-items:center; gap:28px; width:100%; margin:52px 0 0; padding:26px clamp(20px,3vw,36px); border:1px solid var(--line); background:var(--paper2); color:var(--ink); text-align:left; cursor:pointer; transition:background .2s; } .howto-movie-bar:hover { background:#f4ece2; } .howto-movie-icon { flex:none; width:46px; height:auto; fill:none; stroke:var(--accent); stroke-width:1.3; stroke-linecap:round; stroke-linejoin:round; } .howto-movie-label { flex:1; font-family:var(--serif); font-size:clamp(16px,1.6vw,20px); letter-spacing:.06em; } .howto-movie-arrow { flex:none; color:var(--accent); font-size:20px; line-height:1; transition:transform .2s ease; } .howto-movie-bar:hover .howto-movie-arrow { transform:translateX(4px); } /* 動画ポップアップ。縦動画なので、画面の高さから逆算して幅を決める */ .movie-modal { width:min(90vw, 380px, calc(78vh * 0.5625)); max-width:none; max-height:none; padding:0; border:0; background:transparent; overflow:visible; } .movie-modal::backdrop { background:rgba(81,59,36,.7); } .movie-modal-inner { position:relative; } .howto-video { display:block; width:100%; height:auto; aspect-ratio:9 / 16; background:#000000; } .movie-modal-close { position:absolute; top:-44px; right:-4px; width:36px; height:36px; padding:0; border:0; background:transparent; color:#ffffff; font:26px/1 var(--sans); cursor:pointer; } .howto-movie-cap { margin:12px 0 0; text-align:center; color:rgba(255,255,255,.82); font-size:12px; letter-spacing:.04em; } /* スマホでは見出しが2行に折り返さないよう、アイコンと余白を詰める */ @media (max-width:560px) { .howto-movie-bar { gap:14px; padding:22px 18px; } .howto-movie-icon { width:36px; } } .reason-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:26px; max-width:1000px; margin:44px auto 0; padding:0; list-style:none; } .reason-3 li { padding-top:18px; border-top:1px solid var(--accent); } .reason-3 strong { display:block; margin-bottom:8px; font:500 16px var(--serif); letter-spacing:.05em; } .reason-3 span { color:var(--muted); font-size:13px; } .lineup { background:var(--paper2); } .lineup-list { max-width:820px; margin:46px auto 0; padding:0; list-style:none; border-top:1px solid var(--line); } .lineup-list li { display:grid; grid-template-columns:210px 1fr 120px; gap:16px; align-items:baseline; padding:20px 0; border-bottom:1px solid var(--line); } .lineup-list strong { font:500 16px var(--serif); letter-spacing:.05em; } .lineup-list span { color:var(--muted); font-size:13px; } .lineup-list em { color:var(--accent); font:11px/1.4 var(--display); letter-spacing:.1em; font-style:normal; text-align:right; } .lineup-cta { margin:38px 0 0; text-align:center; color:var(--muted); font-size:13px; } .lineup .note { text-align:center; } .together { padding-top:52px; padding-bottom:52px; text-align:center; background:var(--paper); } .together p { max-width:640px; margin:0 auto 14px; color:var(--muted); font-size:13px; } @media (max-width:800px) { .athome { grid-template-columns:1fr; gap:26px; } .reason-3 { grid-template-columns:1fr; gap:20px; } .lineup-list li { grid-template-columns:1fr; gap:4px; } .lineup-list em { text-align:left; } } /* --- 2026-08-19 8セクション構成 --- */ .kit-note { margin:0; color:var(--muted); font-size:12px; line-height:1.9; } .safety-block { margin:134px 0 0; padding-top:44px; } .safety-title { margin-bottom:8px; font-size:28px; } .safety-block .assurance-list { margin:30px 0 0; } .safety-block .faq-list { max-width:800px; margin:38px 0 0; border-top:1px solid var(--line); } .reasons-title { margin:64px 0 0; text-align:center; letter-spacing:.06em; } .reason-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:44px 26px; max-width:1100px; margin:60px auto 0; padding:0; list-style:none; } .reason-grid li { text-align:center; } /* ホバー：カードごと動かすのではなく、アイコンと文字だけが浮き上がる。色も影も変えない。 時間は入りと戻りで変えている（入り .55s / 戻り .95s）。同じ速さだとパッと切り替わって見えるため。 戻りの時間は下の基本指定、入りの時間は :hover 側の transition-duration で上書きしている */ .reason-grid li > * { transition:transform .95s cubic-bezier(.22,1,.36,1); } /* マウスのある環境だけ。スマホだとタップ後にホバーが残り、押しっぱなしのように見えるため */ @media (hover:hover) { .reason-grid li:hover > * { transition-duration:.55s; transform:translateY(-5px); } /* アイコンだけ少し多めに上げて、奥行きを出す（影はつけない） */ .reason-grid li:hover .reason-icon { transform:translateY(-8px); } } /* 動きを減らす設定の人には、浮き上がりをやめる */ @media (prefers-reduced-motion:reduce) { .reason-grid li > * { transition:none; } .reason-grid li:hover > *, .reason-grid li:hover .reason-icon { transform:none; } } .reason-icon { display:block; width:52px; height:52px; margin:0 auto 16px; fill:none; stroke:var(--ink); stroke-width:1.4; stroke-linecap:round; stroke-linejoin:round; } /* カードタイトルは太字＋下線。下線の色は currentColor なので、文字色を変えれば線も追従する。 ここは display:block のままにしたいので （2行タイトルの高さそろえに min-height を使っている）、下線は背景ではなく text-decoration で引く。こちらは文字の幅にだけ線がつく */ /* ゴールド以外（濃茶）の部分は少し小さくして、ゴールドの語を主役にする。 ゴールド側は 1.11em＝約20px で、これまでの大きさのまま */ .reason-grid strong { display:block; margin-bottom:9px; font:700 18px/1.6 var(--serif); letter-spacing:.04em; } /* いちばん伝えたい語（.u）だけゴールドにする。 色はメッセージセクションの強調と同じ #c08c34（--accent より少し濃く、 明るい背景でも読める明度に調整したもの） */ /* inline-block にすると、この語のなかでは改行されなくなる。 「赤ちゃんにやさしい/素材」のように語の途中で折り返すのを防ぎ、 収まらないときは語ごと次の行に送られる */ .reason-grid strong .u { color:#c08c34; font-size:1.11em; display:inline-block; } /* タイトルが2行になり得る幅（〜1279px）だけ、行の始まりを揃えるために2行ぶんの高さを確保する */ @media (max-width:1199px) { .reason-grid strong { min-height:calc(1.5em * 2); } } /* li の直下の span＝説明文だけを対象にする。 これを「.reason-grid span」にすると、タイトル内の下線用 span まで 小さいグレーの別行になってしまう */ .reason-grid li > span { display:block; color:var(--muted); font-size:12px; line-height:1.85; } .howto-buy { margin:56px 0 0; text-align:center; } .howto-buy-note { margin:16px 0 0; color:var(--muted); font-size:11px; } .nextline { padding-top:56px; padding-bottom:56px; text-align:center; background:var(--paper2); } .nextline-lead { max-width:700px; margin:0 auto 14px; font:15px/2 var(--serif); letter-spacing:.04em; } .nextline-sub { max-width:700px; margin:0 auto; color:var(--muted); font-size:13px; } .nextline .note { text-align:center; margin-top:18px; } @media (max-width:1023px) { .reason-grid { grid-template-columns:repeat(4,1fr); gap:30px 14px; } } @media (max-width:560px) { .reason-grid { grid-template-columns:repeat(2,1fr); } .reason-icon { width:44px; height:44px; } .safety-block { margin-top:48px; } } .kit-copy .button { margin-bottom:14px; } .kit-note .mark { color:#A87C2A; } /* 成長記録としての残し方のご提案（商品説明のうしろ） */ .record { margin:96px 0 0; } .record-title { margin-bottom:26px; font-size:28px; letter-spacing:.06em; } .record-lead { max-width:660px; margin:0 0 22px; color:var(--muted); font-size:16px; } .record-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; } .record-grid figure { margin:0; } .record-grid img { aspect-ratio:4 / 3; object-fit:cover; border-radius:14px; } .record-grid figcaption { margin-top:10px; color:var(--muted); font-size:12px; line-height:1.7; } .also { margin:120px 0 0; padding-top:56px; } .also-title { margin-bottom:10px; font-size:28px; letter-spacing:.08em; } .also-list { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:22px; margin:42px 0 0; padding:0; list-style:none; } .also-list li { display:block; } .also-list img { aspect-ratio:1 / 1; object-fit:cover; margin-bottom:12px; } .also-list strong { display:block; margin-bottom:6px; font:500 20px/1.5 var(--serif); letter-spacing:.04em; } /* 1行/2行が混ざるため、2行ぶんの高さを確保して説明文の頭を揃える */ @media (min-width:801px) { .also-list strong { min-height:calc(1.5em * 2); } } .also-list li > span { display:block; margin-bottom:8px; color:var(--muted); font-size:14px; line-height:1.85; } .also-list em { display:inline-block; margin:0 0 10px; padding:5px 13px; border-radius:999px; background:var(--blush); color:#63492f; font:12px/1.5 var(--display); letter-spacing:.1em; font-style:normal; } .also-note { margin:22px 0 0; text-align:center; color:var(--muted); font-size:14px; } @media (max-width:800px) { .also-list { grid-template-columns:1fr 1fr; gap:16px; } .voice-cards { grid-template-columns:1fr; gap:14px; margin-top:28px; } .voice-card { padding:28px 22px 20px; } .record { margin-top:44px; } .record-grid { gap:9px; } .kit-slider { margin:34px auto 26px; } .kit-arrow { width:36px; height:36px; font-size:22px; } .kit-prev { left:8px; } .kit-next { right:8px; } .kit-thumbs { gap:6px; margin-top:6px; } } .nextline-list { max-width:760px; margin:26px auto 30px; padding:0; list-style:none; border-top:1px solid var(--line); text-align:left; } .nextline-list li { display:grid; grid-template-columns:200px 1fr 92px; gap:14px; align-items:baseline; padding:16px 0; border-bottom:1px solid var(--line); } .nextline-list strong { font:500 15px var(--serif); letter-spacing:.04em; } .nextline-list span { color:var(--muted); font-size:12px; } .nextline-list em { color:var(--accent); font:10px/1.4 var(--display); letter-spacing:.1em; font-style:normal; text-align:right; } @media (max-width:800px) { .nextline-list li { grid-template-columns:1fr; gap:3px; } .nextline-list em { text-align:left; } } .also-lead { margin:2px 0 0; color:var(--muted); font:16px var(--serif); letter-spacing:.05em; } .also-note .text-link { margin-left:4px; font-size:14px; } /* iOS Safari は background-attachment:fixed 非対応のためフォールバック */ @media (max-width:800px) { .fixed-photo { height:360px; background-attachment:scroll; } .curve-top { --curve:clamp(38px,11vw,64px); } .athome .check-list { grid-template-columns:1fr; gap:14px; margin-top:26px; } .athome .check-list li { padding:24px 22px; } .making-strip { display:flex; overflow-x:auto; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; gap:12px; margin:20px -24px 0; padding:0 24px 12px; } .making-strip figure { flex:0 0 62%; scroll-snap-align:start; } } /* トップページのセクション見出しは MESSAGE と同じ40pxで統一（下層ページの .prose h2 等には影響させない） */ .growth h2, .intro h2, .reasons-icons h2, .athome h2, .product h2, .howto h2, .voice h2, .gift-cta h2, .story h2, .final-cta h2 { font-size:clamp(28px,4vw,40px); } /* --- セクション見出しの大きさ・余白を MESSAGE セクションに統一 --- */ /* 英字ラベル：MESSAGE と同じ大きさへ */ .athome .section-label-en, .product .section-label-en, .howto .section-label-en, .voice .section-label-en, .gift-cta .section-label-en, .instagram .section-label-en, .story .section-label-en { font-size:clamp(44px,13vw,64px); } /* 見出しサイズ：INSTAGRAM だけ小さかったので他と揃える */ .instagram h2 { font-size:clamp(28px,4vw,40px); } /* ラベル〜見出しの余白：MESSAGE（#growth-title の 64px）に揃える */ .athome h2, .product h2, .howto h2, .voice h2, .gift-cta h2, .instagram h2, .story h2 { margin-top:64px; } /* 見出し〜本文の余白：MESSAGE と同じ 24px に */ .gift-cta h2, .instagram h2 { margin-bottom:24px; } /* セクション上部の余白：OUR CHOICE も MESSAGE / Concept と同じ section-pad の値に戻す */ .athome { padding-top:clamp(80px,12vw,170px); } /* --- Concept：縦書き見出し＋写真を横並び、本文はその下に中央配置 --- */ .intro-photo { margin:0; } .intro-columns h2 { writing-mode:vertical-rl; margin:0; text-align:start; line-height:1.9; letter-spacing:.12em; } .intro-photo img { display:block; width:100%; height:100%; object-fit:cover; } .intro-body { position:relative; margin-top:96px; } /* コンセプト本文のなかで、いちばん伝えたい一節だけ大きくして下線を引く。 下線は #growth-title と同じ手法（背景のグラデーションを3pxの帯として敷く）。 文字のすぐ下ではなく少し離れた位置に引けるので、日本語でも詰まって見えない */ .intro-body .intro-em { display:inline; font-size:clamp(18px,1.6vw,21.5px); font-weight:700; letter-spacing:.02em; background-image:linear-gradient(var(--accent), var(--accent)); background-repeat:no-repeat; background-position:0 88%; background-size:100% 3px; } .intro-body p:last-child { margin-bottom:0; } @media (min-width:801px) { .intro { grid-template-columns:minmax(0,1040px); } .intro-columns { display:grid; grid-template-columns:auto auto; justify-content:center; gap:clamp(96px,15vw,224px); align-items:stretch; margin-top:79px; } /* MESSAGE の見出し文字の視覚上の開始位置(64px+ハーフレディング15px)に合わせる */ .intro-photo { width:clamp(240px,26vw,340px); } } /* モバイルだけで効かせる改行 */ .br-sp { display:none; } @media (max-width:800px) { .br-sp { display:inline; } /* モバイルでも見出しは縦書き。縦積みのまま中央に置く */ .intro-columns { display:flex; flex-direction:column; align-items:center; margin-top:48px; } .intro-photo { width:min(78%,320px); margin:32px auto 0; aspect-ratio:2 / 3; } } /* 1280px以上：コウノトリは本文テキストの左側に置く（それ未満は従来どおり本文の背面に薄く敷く） */ @media (min-width:1200px) { .intro-deco { left:auto; right:100%; margin-right:clamp(8px,1.4vw,28px); top:50%; transform:translateY(-50%) rotate(-15deg); width:clamp(250px,20vw,300px); } } /* --- OUR CHOICE：Point 1〜3 のカード構成 --- */ .point-list li { display:flex; flex-direction:column; align-items:center; } /* .check-list span より詳細度を上げる（そちらで font-size:13px が当たるため） */ .point-list .point-icon { display:flex; align-items:center; justify-content:center; width:76px; height:76px; margin:0 auto 14px; border:0; border-radius:50%; background:var(--accent-tint); } .point-list .point-icon svg { width:32px; height:32px; fill:none; stroke:#ffffff; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; } .point-list .point-label { display:flex; align-items:baseline; justify-content:center; gap:6px; margin:0 0 14px; color:var(--accent); font-family:var(--display); font-style:italic; line-height:1; } .point-list .point-label-en { font-size:17px; letter-spacing:.06em; } .point-list .point-label-num { font-size:34px; font-variant-numeric:lining-nums; } .athome .point-list strong { margin-bottom:10px; font-size:20px; line-height:1.5; } /* タイトルが1行/2行で混ざるため、FEATURES と同じく2行ぶんの高さを確保して説明文の頭を揃える */ @media (min-width:801px) { .athome .point-list strong { min-height:calc(1.5em * 2); } } /* --- OUR CHOICE：見出し＋リード文を左、写真を右に重ねる構図 --- */ .athome-lead { max-width:720px; margin:0 auto; color:var(--muted); font-size:16px; } .athome-photo { display:block; width:100%; height:auto; } /* AT HOME は 1024px から写真を右に抜くレイアウトに切り替える。 1200px まで縦積みにすると、横幅が余っているのに縦に間延びするため */ @media (max-width:1023px) { /* 見出し→写真→カード の順に積む（DOM上は写真が先） */ .athome-intro { order:1; } .athome-photo { order:2; width:min(92%,560px); margin:0 auto; } .athome-body { order:3; } } @media (min-width:1024px) { .athome { position:relative; z-index:2; text-align:left; padding-top:clamp(48px,4.5vw,64px); } .athome .section-heading { margin:0; max-width:none; } .athome-intro { position:relative; z-index:1; max-width:min(56%,640px); } .athome-lead { margin:0; } /* 画面右端まで抜いて、上のセクションへ少しだけはみ出す。左端はぼかして本文と重ねる */ .athome-photo { position:absolute; z-index:0; right:0; top:clamp(-90px,-5vw,-48px); width:min(74%,1000px); aspect-ratio:16 / 10; height:auto; object-fit:cover; -webkit-mask-image:linear-gradient(to right, transparent 0 20%, #000 54%); mask-image:linear-gradient(to right, transparent 0 20%, #000 54%); } /* カードは写真の上に重なる */ .athome .point-list { position:relative; z-index:1; text-align:center; } .athome-note { text-align:center; } } /* FEATURES の下余白を広げる（OUR CHOICE の写真がはみ出してくるぶんの余裕） */ .reasons-icons { padding-bottom:clamp(216px,calc(16vw + 96px),336px); } /* --- 本文テキストの色をセクションタイトルと同じ #513B24（--ink）に --- */ .intro p:not(.eyebrow):not(.section-label-en):not(.section-label-ja), .growth-copy p, .story-body p, .athome-body p, .athome-lead, .gift-cta-body > p, .howto-top > p, .section-heading.centered > p:last-child, .kit-copy p:last-child, .making-lead, .record-lead, .also-lead, .page-lead, .prose p { color:var(--ink); } /* --- LINEUP：写真を左、商品名・価格・CTAを右に並べる --- */ .kit-hero { margin:52px 0 0; } .kit-hero .kit-slider { max-width:none; margin:0; } /* LINEUP は 801px から 2 カラム。1 カラムだと横幅が余るのに縦へ伸びるため */ @media (min-width:801px) { /* 中央揃えだと写真とテキストの高さの差がそのまま上端のズレになるので、上を揃える */ .kit-hero { display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,1fr); gap:clamp(40px,4.5vw,68px); align-items:start; } .kit-hero .kit-copy { text-align:left; } } @media (max-width:800px) { .kit-hero .kit-copy { margin-top:32px; } } /* 文節で折り返す全体設定（word-break:auto-phrase）だと、「はじめての方でも」で 行が変わるなど短い行ができてしまう。ここは句点の改行を自前で入れているので、 折り返しは素直に行いっぱいまで詰める */ .kit-lead { margin:0 0 24px; color:var(--ink); font-size:15px; line-height:2; word-break:normal; text-wrap:wrap; } /* LINEUP：商品詳細（スペック）をトグルに。初期状態は閉じる */ .kit-spec { margin:40px 0 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); } .kit-spec > summary { position:relative; padding:22px 44px 22px 0; list-style:none; cursor:pointer; font-size:16px; letter-spacing:.04em; } .kit-spec > summary::-webkit-details-marker { display:none; } .kit-spec > summary::after { content:"+"; position:absolute; right:8px; top:17px; color:var(--accent); font:27px/1 var(--display); } .kit-spec[open] > summary::after { content:"−"; } .kit-spec-body { padding:2px 0 30px; } .kit-spec .spec-list div:last-child { border-bottom:0; } /* --- はじめてでも、安心して。：左に不規則な丸型の写真、右に縦書き見出し --- */ .safety-head { margin-bottom:8px; } .safety-photo { margin:0; } .safety-photo img { display:block; width:100%; aspect-ratio:1 / 1; object-fit:cover; border-radius:58% 42% 63% 37% / 41% 55% 45% 59%; } @media (min-width:801px) { .safety-head { display:grid; grid-template-columns:clamp(288px,33.6vw,456px) minmax(0,1fr); align-items:start; gap:clamp(36px,5vw,80px); margin-bottom:22px; } /* 縦書き見出しはスペック（テキスト）の中央に置く */ .safety-head .safety-title { writing-mode:vertical-rl; margin:0 auto 30px; text-align:start; line-height:1.9; letter-spacing:.1em; } .safety-head .assurance-list { margin:0; max-width:none; } } @media (max-width:800px) { .safety-photo { width:min(70%,280px); margin:0 auto 24px; } } /* 安心セクション内のFAQ小見出し */ .faq-sub-title { margin:0 0 18px; text-align:center; font:500 28px/1.6 var(--serif); letter-spacing:.06em; } /* よくある質問：ベージュ地のパネル */ /* セクション左右パディングを変数化（全幅パネルの逆マージン用） */ .section-pad { --section-x:clamp(24px,10vw,158px); } @media (max-width:800px) { .section-pad { --section-x:24px; } } /* よくある質問：画面端まで届くベージュの帯 */ .faq-panel { max-width:none; margin:80px calc(-1 * var(--section-x)) 0; padding:clamp(64px,6vw,96px) var(--section-x); background:var(--paper2); color:var(--ink); } .faq-panel .faq-sub-title { max-width:800px; margin:0 auto 66px; } .faq-panel .faq-list { max-width:800px; margin:0 auto; display:grid; gap:12px; border-top:0; } /* 質問ごとに白いカードにする */ .faq-panel .faq-list details { border-bottom:0; background:var(--paper); padding:0 clamp(20px,2.6vw,36px); } .faq-panel .faq-list summary { padding:24px 36px 24px 0; } .faq-panel .faq-list summary::after { right:2px; top:22px; } .faq-panel .faq-list p { max-width:none; padding:0 36px 26px 0; color:var(--muted); } /* トップページのQ&Aは、スマホ時だけ回答右側の追加余白をなくし、カード内幅を使い切る */ @media (max-width:560px) { .faq-panel .faq-list p { padding-right:0; } } /* 下部リンクを楕円ボタンにして中央に並べる */ .faq-panel .assurance-more { display:flex; flex-wrap:wrap; justify-content:center; gap:16px; max-width:800px; margin:82px auto 0; text-align:center; } .faq-panel .assurance-more .text-link { gap:14px; min-height:48px; padding:12px 30px; border:1px solid var(--accent); border-radius:999px; background:var(--accent); color:#ffffff; font-size:13px; transition:background .2s, color .2s; } .faq-panel .assurance-more .text-link:hover { background:transparent; color:var(--accent); } /* 質問の開閉のアニメーションは script.js（高さ補間）で行う。 ブラウザ差が大きい ::details-content / interpolate-size には頼らない */ .faq-panel details { overflow:hidden; } /* モバイルは縦積みなので、見出しと本文の間の大きな余白は不要 */ @media (max-width:800px) { .howto-top > p { margin-top:0; } } /* HOW TO MAKE：セクションタイトルは2カラムから外して全幅に（英字が折り返さないように） */ .howto .section-heading { max-width:none; } /* 文字は左揃えのまま、ブロックの右端をセクションの右端に合わせる */ .howto-lead { width:fit-content; max-width:430px; margin:clamp(26px,3vw,44px) 0 30px auto; color:var(--ink); font-size:16px; } @media (max-width:800px) { .howto-lead { margin-left:0; } } /* 発売記念価格 */ .kit-price-was { margin-right:10px; color:var(--muted); font-size:.55em; text-decoration-thickness:1px; } .kit-price-note { margin:-14px 0 22px; color:var(--accent); font-size:14px; letter-spacing:.06em; } /* 動画の中央に大きな再生ボタン。再生中は消える（キャプションを含まない枠を基準にする） */ .movie-video-wrap { position:relative; } /* 動画の上に重ねた透明のボタン。タップで再生/一時停止を切り替える。 下端はコントロールバーぶん空けて、シークバーを操作できるようにしている */ /* padding-top はコントロールバーぶんの打ち消し（アイコンを動画全体の中央に置くため） */ .movie-play { position:absolute; left:0; right:0; top:0; bottom:clamp(44px,11%,56px); display:flex; align-items:center; justify-content:center; padding:clamp(44px,11%,56px) 0 0; border:0; background:transparent; cursor:pointer; } .movie-play svg { display:block; width:clamp(76px,22%,120px); height:auto; transition:opacity .25s ease, transform .25s ease; } .movie-play circle { fill:rgba(255,255,255,.92); } .movie-play path { fill:var(--accent); } .movie-play:hover svg { transform:scale(1.06); } .movie-modal.is-playing .movie-play svg { opacity:0; } /* つくりかたの3ステップ */ /* 写真の上の罫線は消す（PCの上端、スマホの2段目の上） */ .steps-3 { border-top:0; } .steps-3 li:nth-child(n+3) { border-top:0; } /* カードごとに左右の余白が違うと写真の幅がずれるので、全部同じ余白にして はみ出したぶんを ol の負マージンで戻す（外側はセクション幅どおりのまま） */ @media (min-width:801px) { .steps-3 { margin-left:-20px; margin-right:-20px; } .steps-3 li, .steps-3 li:not(:first-child) { padding:0 20px; } } /* 最後のカードは区切り線を消してあるぶん 1px 広くなるので、透明の線で幅を揃える */ .steps-3 li:last-child { border-right:1px solid transparent; } /* カードタイトルは「えらんだこと」のカードタイトルと同じ 20px */ .steps-3 strong { font-size:20px; line-height:1.5; } /* STEP 01 などのラベルは「えらんだこと」の Point 1 と同じ大きさに揃える */ .steps-3 .step-label { display:flex; align-items:baseline; gap:6px; margin-bottom:14px; font-style:italic; line-height:1; } /* .steps span の font ショートハンドが内側の span も normal に戻すので、ここで打ち消す */ .steps-3 .step-label-en, .steps-3 .step-label-num { display:inline; margin:0; font-style:italic; } .steps-3 .step-label-en { font-size:17px; letter-spacing:.06em; } .steps-3 .step-label-num { font-size:34px; letter-spacing:.02em; font-variant-numeric:lining-nums; } /* 末尾の注釈は本文と同じ見た目にする（サイズ・色・行間） */ .howto .note { margin-top:52px; color:var(--ink); font-size:16px; line-height:2; } /* Instagram の投稿は4枚並べる（スマホは2列） */ .instagram-posts { grid-template-columns:repeat(4,1fr); } @media (max-width:800px) { .instagram-posts { grid-template-columns:repeat(2,1fr); } } /* キャプションとバッジを外したので、下部を暗くしていたグラデーションも消す */ .instagram-post::after { display:none; } /* お客様の声の上にも、特徴セクションと同じ固定写真＋せりあがる曲線を置く */ .fixed-photo-voice { background-image:url("assets/voice-bg.webp?v=10"); background-position:center 42%; } /* スマホは大きく切り取られるので、親子が真ん中にくるよう寄せる */ @media (max-width:800px) { .fixed-photo-voice { background-position:42% 46%; } } /* お客様の声：コメントを不定形な円にして、PCではセクションタイトルを囲むように配置する */ /* 角が丸く削れるぶん、左右に大きめの余白をとって文字がかからないようにする */ .voice-card { padding:clamp(38px,4vw,58px) clamp(40px,4.4vw,64px) clamp(34px,3.4vw,50px); border-radius:62% 38% 54% 46% / 48% 42% 58% 52%; } .voice-card:nth-child(2) { border-radius:40% 60% 47% 53% / 55% 48% 52% 45%; } .voice-card:nth-child(3) { border-radius:56% 44% 38% 62% / 44% 58% 42% 56%; } .voice-card::before { top:clamp(16px,2vw,30px); left:clamp(40px,4.4vw,64px); } .voice-who { padding-top:14px; } /* 囲むレイアウトにしない幅では、高さを揃えず中身なりの大きさにする （引き伸ばすと丸の中に大きな空白ができてしまうため） */ @media (max-width:1023px) { .voice-cards { align-items:start; } } /* 3列のままの帯（801〜1023px）は、カード幅200px前後に対して左右40pxの余白が 広すぎて本文が9文字ほどしか入らない。余白を22pxまで詰めて行数を抑える */ @media (min-width:801px) and (max-width:1023px) { .voice-card { padding-left:clamp(22px, 6.6vw - 31px, 40px); padding-right:clamp(22px, 6.6vw - 31px, 40px); } } /* VOICE を囲むブロブ配置は 1024px から。中央の見出し列は 300px が下限なので、 これより狭い画面では横並びに落とす */ @media (min-width:1024px) { /* 中央の列は見出し用に空けておき、その左右にコメントを置く。 ul は全列にまたがり、列だけ親から受け継ぐ（subgrid）ので、 見出しは空いた中央列にそのまま重なる */ .voice-stage { display:grid; grid-template-columns:minmax(0,1fr) clamp(300px,26vw,400px) minmax(0,1fr); align-items:center; column-gap:clamp(16px,1.8vw,32px); max-width:1180px; margin:0 auto; } /* 上の写真を持ち上げるぶん、セクション上部に余白を足しておく */ .voice { padding-top:clamp(56px,6vw,96px); } .voice-stage { grid-template-rows:auto auto; row-gap:clamp(28px,3.2vw,56px); } /* VOICE が円の中心になるよう、上下2段の中央に置く */ .voice-stage .section-heading { grid-column:2; grid-row:1 / -1; align-self:center; margin:0; } /* コメントと写真を同じグリッドに並べたいので、ul の枠は外す （display:contents で一覧の意味が消える環境があるため role="list" を付けている） */ .voice-cards { display:contents; } /* 左上は少し左へ。セクションの余白のぶんだけなので画面からははみ出さない */ .voice-card:nth-child(1) { grid-column:1; grid-row:1; transform:translate(calc(-1 * clamp(24px,3.5vw,56px)), 48px); } .voice-card:nth-child(2) { grid-column:3; grid-row:1; align-self:end; transform:translateY(48px); } .voice-card:nth-child(3) { align-self:start; } /* 左下だけ少し右へずらして、単調な縦並びに見えないようにする */ .voice-card:nth-child(3) { grid-column:1; grid-row:2; transform:translate(clamp(28px,4vw,64px), 48px); } } /* 見出しの「つくった方から。」と引用符マークをなくす */ .voice-card::before { content:none; } .voice-card { padding-top:clamp(32px,3.2vw,46px); } .voice .section-label { margin-bottom:0; } /* 罫線から下のお名前は中央に置く */ .voice-who { text-align:center; } /* 空いた上と右下に写真を置く。囲むレイアウトのときだけ表示する */ .voice-photo { display:none; } @media (min-width:1024px) { .voice-photo { display:block; margin:0; } .voice-photo img { aspect-ratio:1 / 1; object-fit:cover; } /* VOICE を中心にざっくり円を描く配置。上は高く、右下は内側へ寄せる */ .voice-photo-top { grid-column:2; grid-row:1; align-self:start; width:88%; margin:0 auto; transform:translateY(calc(-1 * clamp(24px,3.6vw,64px))); } .voice-photo-top img { border-radius:58% 42% 47% 53% / 45% 52% 48% 55%; } .voice-photo-bottom { grid-column:3; grid-row:2; align-self:start; width:100%; margin-left:auto; transform:translate(calc(-1 * clamp(28px,4vw,72px)), 48px); } .voice-photo-bottom img { border-radius:45% 55% 60% 40% / 52% 44% 56% 48%; } } /* 声の配置と、下に横並びする5枚の写真との間をしっかり空ける */ .making-lead { margin-top:calc(clamp(60px,9vw,140px) + 64px); font:500 28px/1.7 var(--serif); letter-spacing:.06em; } /* つくっている様子：写真は右へ、totteのロゴは左へ、それぞれループで流す */ .making-marquee { --logo-h:clamp(64px,7vw,104px); position:relative; margin:80px calc(-1 * var(--section-x)) calc(var(--logo-h) / 2 + 24px); padding:0; } .making-strip { display:block; overflow:hidden; margin:0; padding:0; } .making-track { --making-gap:clamp(14px,1.8vw,26px); display:flex; align-items:center; width:max-content; gap:var(--making-gap); /* 写真7枚のときが130秒。9枚では進む距離が9/7倍になるため、 同じ見た目の速さを保つには秒数も9/7倍にする（130 × 9/7 ≒ 167秒）。 写真を増減したときは、ここも枚数に比例させること */ animation:making-scroll-left-half 56s linear infinite; } .making-track figure { flex:0 0 auto; width:clamp(230px,20vw,320px); min-width:0; margin:0; } .making-track figure:nth-child(3n) { width:clamp(300px,26vw,420px); } .making-track img { display:block; width:100%; height:auto; aspect-ratio:5 / 4; object-fit:cover; border-radius:clamp(16px,2vw,26px); } /* ロゴの帯。写真の下端をまたいで半分ほど重ねる */ .making-logos { position:absolute; left:0; right:0; bottom:calc(-1 * var(--logo-h) / 2); overflow:hidden; pointer-events:none; } .making-logos-track { display:flex; width:max-content; align-items:center; gap:clamp(40px,5vw,88px); animation:making-scroll-right 55s linear infinite; } .making-logos-track img { display:block; width:auto; height:var(--logo-h); opacity:.9; } /* ひとつおきに隠す。場所は残るので、抜いたぶんの間隔がそのまま空く */ .making-logos-track img:nth-child(even) { visibility:hidden; } /* 3組ぶん並べてあるので、1組ぶん(-33.3333%)動かすと切れ目なくつながる */ @keyframes making-scroll-right { from { transform:translateX(-33.3333%); } to { transform:translateX(0); } } /* 2組の間にも隙間があるため、帯の半分＋隙間の半分が1組ぶんの距離。 */ @keyframes making-scroll-left-half { from { transform:translateX(0); } to { transform:translateX(calc(-50% - var(--making-gap) / 2)); } } @keyframes making-scroll-left { from { transform:translateX(0); } to { transform:translateX(-33.3333%); } } /* スマホは画面が狭いぶん、同じ速さでも「速く流れて見える」。 PCは1秒あたり画面幅の約3.8%進むのに対し、スマホ(390px)では約11%進んでいた。 PCと同じくらいの体感になるよう、スマホだけ約2.6倍ゆっくりにする */ @media (max-width:800px) { .making-track { animation-duration:96s; } .making-logos-track { animation-duration:142s; } } @media (prefers-reduced-motion:reduce) { .making-track, .making-logos-track { animation:none; } } /* お客様の声の背景をピンクに。上のカーブも background:inherit で一緒に変わる */ .voice { background:#fbf4f3; } /* 背景がピンクになるぶん、コメントの円は白にして浮かせる */ .voice-card { background:var(--paper); } /* ギフト導線はブラウン背景。文字と装飾を反転させる */ .gift-cta { background:#75593e; color:#f5eee5; } .gift-cta .section-label-ja { color:#ffffff; } .gift-cta-body h2 { color:#ffffff; } .gift-cta-body > p { color:rgba(255,255,255,.82); } .gift-cta-scenes li { border-color:rgba(227,192,119,.65); color:var(--accent-tint); } /* ブラウン背景の上なので、セクションタイトルとボタンも反転させる */ .gift-cta .section-label-en { color:#ffffff; } .gift-cta .section-label-marks { color:rgba(255,255,255,.7); } .gift-cta .button-primary { background:#ffffff; color:var(--ink); } /* ギフトの写真：大きい縦位置の写真に、小さい横位置の写真を右下へずらして重ねる */ /* 小写真の位置は大写真の枠を基準にしたいので、枠自体を大写真の大きさにする */ .gift-cta-photos { position:relative; margin:0; width:74%; } .gift-cta-photo { display:block; width:100%; aspect-ratio:4 / 5; object-fit:cover; object-position:38% center; border-radius:14px; } .gift-cta-photos { --sub-drop:calc(clamp(20px,3.4vw,52px) + 64px); } .gift-cta-photo-sub { position:absolute; z-index:1; right:-31%; bottom:calc(-1 * var(--sub-drop)); width:max(150px, 58%); aspect-ratio:1 / 1; object-fit:cover; border-radius:14px; } /* 贈りものページ：場面ごとのセクション */ .gift-scene { padding-top:clamp(44px,5vw,68px); padding-bottom:clamp(44px,5vw,68px); } .gift-scene-num { display:flex; align-items:baseline; gap:6px; margin:0 0 10px; color:var(--accent); font-family:var(--display); font-style:italic; line-height:1; } .gift-scene-en { font-size:15px; letter-spacing:.06em; } .gift-scene-no { font-size:30px; font-variant-numeric:lining-nums; } .gift-scene h2 { margin-bottom:8px; } .gift-scene-sub { margin-bottom:22px; color:var(--muted); font-size:13px; letter-spacing:.04em; } .gift-scene p:last-child { margin-bottom:0; } .gift-scene-h3 { margin:38px 0 16px; font-size:28px; letter-spacing:.06em; } /* ギフト導線の場面リンク。楕円ボタンをやめて、下線つきのリンクを縦に並べる */ .gift-cta-scenes { display:flex; flex-direction:column; align-items:flex-start; gap:0; margin:0; } .gift-cta-scenes li { padding:0; border:0; border-radius:0; } .gift-cta-scenes a { position:relative; display:inline-block; padding:13px 0 5px; color:#ffffff; font-size:15px; letter-spacing:.06em; } /* 下の細い線は常に表示。その上を白い線がホバーで左から伸びる。 伸びきったときに文字幅の約2倍になるよう、線自体を200%の長さにしてある */ .gift-cta-scenes a::before, .gift-cta-scenes a::after { content:""; position:absolute; left:0; bottom:0; height:1px; } .gift-cta-scenes a::before { right:0; background:rgba(255,255,255,.28); } .gift-cta-scenes a::after { width:200%; background:#ffffff; transform:scaleX(0); transform-origin:left center; transition:transform 1.1s cubic-bezier(.16,1,.3,1); } .gift-cta-scenes a:hover::after, .gift-cta-scenes a:focus-visible::after { transform:scaleX(1); } @media (prefers-reduced-motion:reduce) { .gift-cta-scenes a::after { transition:none; } } /* Instagram セクションの背景を白に */ .instagram { background:var(--paper); } /* Instagram セクションは全体を中央揃えに */ .instagram { text-align:center; } .instagram-head { flex-direction:column; align-items:center; gap:26px; } .instagram-head > div { max-width:760px; } .instagram-head > div > p:last-child { margin-left:auto; margin-right:auto; } @media (max-width:800px) { .instagram-head .text-link { margin-top:0; } } /* 上下の余白を、ほかのセクションと同じ量にする */ .instagram { padding-top:clamp(80px,12vw,170px); padding-bottom:clamp(80px,12vw,170px); } /* p:last-child は「インスタグラム」のラベルにも当たってしまうので、本文だけに絞る */ .instagram-head > div > p:last-child { font-size:16px; } .instagram .section-label-ja { font-size:13px; } /* 小写真が下にはみ出すぶん、下の余白を足して見た目の空きを上下で揃える。 1カラムになる幅では写真が最下部に来ないので、この足し込みは不要 */ @media (min-width:801px) { /* 高さの差がそのまま縦のズレにならないよう、写真とテキストの上端を揃える */ .gift-cta { align-items:start; } /* サブ写真のはみ出しぶんは枠自身の下マージンで押し出す。 はみ出し量と吸収する余白が同じ値なので、画面幅が変わってもずれない */ .gift-cta-photos { margin-bottom:var(--sub-drop); } } /* Instagram の見出しはサブタイトルの大きさに */ .instagram h2 { font-family:var(--serif); font-size:28px; letter-spacing:.06em; margin-bottom:22px; } /* Instagram とストーリーの境目をまたいで、totteのロゴを大きく薄く左へ流す */ .brand-marquee { --brand-h:clamp(80px,10vw,150px); position:relative; z-index:1; height:var(--brand-h); margin:calc(var(--brand-h) / -2) 0; overflow:hidden; pointer-events:none; } .brand-marquee-track { display:flex; align-items:center; width:max-content; height:100%; gap:clamp(110px,14vw,240px); animation:making-scroll-left 90s linear infinite; } .brand-marquee-track img { display:block; width:auto; height:100%; opacity:.1; } @media (prefers-reduced-motion:reduce) { .brand-marquee-track { animation:none; } } /* ストーリー：見出しの下に本文、右に細い縦長写真を2枚（高さをずらす） */ .story { grid-template-columns:minmax(0,1fr) auto; align-items:start; } .story h2 { margin-top:0; margin-bottom:30px; } .story-body { margin:0; } .story-photos { display:flex; gap:clamp(12px,1.4vw,22px); } .story-photos figure { margin:0; width:clamp(144px,15.6vw,235px); } .story-photos img { display:block; width:100%; aspect-ratio:2 / 5; object-fit:cover; } .story-photos .story-photo-a { margin-top:calc(clamp(40px,6vw,96px) + 48px); } @media (max-width:800px) { .story { grid-template-columns:1fr; } .story-photos { justify-content:flex-end; gap:12px; margin-top:8px; } .story-photos figure { width:min(45%,180px); } } /* ロゴの帯が上から重なってくるぶん、想いセクションの上の余白を足す */ .story { padding-top:calc(clamp(80px,12vw,170px) + clamp(80px,10vw,150px) / 2 + 48px); } /* ロゴの帯が下に重なってくるぶん、Instagram の下の余白も同じだけ足す */ .instagram { padding-bottom:calc(clamp(80px,12vw,170px) + clamp(80px,10vw,150px) / 2 + 48px); } /* 最後のCTAは写真をそのまま見せる。明るい写真なので文字色は濃いブラウンに */ .final-cta { color:var(--ink); background: linear-gradient(to right, #ffffff 0%, rgba(255,255,255,0) 24%), linear-gradient(to left, #ffffff 0%, rgba(255,255,255,0) 24%), url("assets/cta-hands.webp") center/cover; } .final-cta .eyebrow { color:var(--accent); } .final-cta > p:not(.eyebrow) { color:var(--muted); } /* 最後のCTA：見出しを縦書きの白い下地にして、上のセクションにまたがるよう左上に置く */ @media (min-width:801px) { /* 白い下地が上のセクションに食い込むので、想いセクションの下の余白を足す */ .story { padding-bottom:calc(clamp(80px,12vw,170px) + 90px + 130px); } /* 上の余白を48px増やすと、中央に寄っているロゴとボタンが24px下がる */ .final-cta { position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; min-height:clamp(380px,38vw,540px); padding-top:168px; } .final-cta h2 { position:absolute; z-index:2; top:0; left:calc(clamp(24px,6vw,110px) + 80px); transform:translateY(-38%); margin:0; padding:0; height:max-content; writing-mode:vertical-rl; text-align:start; line-height:2.2; letter-spacing:.12em; } /* 白い下地は行ごとに、文字の背後だけに敷く */ .final-cta h2 > span { background:#ffffff; padding:.3em .14em; -webkit-box-decoration-break:clone; box-decoration-break:clone; } } /* CTAボタンの上に、白く透かしたtotteロゴ */ .final-logo { display:block; width:auto; height:clamp(38px,4vw,58px); margin:0 auto 74px; opacity:.7; filter:brightness(0) invert(1); } /* 句点では必ず改行。読点で区切ったまとまりを inline-block にしてあるので、 幅が足りなくなったときだけ読点の位置で折り返す */ .story-body p { word-break:auto-phrase; } .story-body .nb, .athome-lead .nb, .note .nb, h2 .nb { display:inline-block; } /* フッター：ロゴ＋2列リンクの上段と、規約・コピーライトの帯を分ける構成 */ .site-footer { --footer-x:clamp(24px,10vw,158px); padding:0; } .footer-main { display:grid; grid-template-columns:1fr auto; gap:clamp(32px,6vw,80px); align-items:start; padding:clamp(56px,7vw,88px) var(--footer-x); } .site-footer .brand { display:inline-block; margin-bottom:14px; } .footer-tag { margin:0; } .footer-follow { margin-top:22px; } .footer-nav { display:grid; grid-template-columns:repeat(2,max-content); gap:18px clamp(40px,7vw,110px); } .footer-nav ul { display:grid; align-content:start; gap:20px; margin:0; padding:0; list-style:none; } .footer-nav a { font-size:14px; letter-spacing:.04em; transition:opacity .2s; } .footer-nav a:hover { opacity:.56; } /* 下段は背景をわずかに起こして帯として分ける */ .footer-bottom { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:10px 24px; padding:22px var(--footer-x); background:rgba(255,255,255,.07); } .footer-legal { display:flex; flex-wrap:wrap; gap:6px 24px; } .footer-legal a { font-size:11px; letter-spacing:.04em; transition:opacity .2s; } .footer-legal a:hover { opacity:.56; } .footer-copy { margin:0; color:#c5b3a4; font-size:11px; letter-spacing:.04em; } @media (max-width:800px) { .footer-main { grid-template-columns:1fr; gap:38px; } } @media (max-width:560px) { /* 1列に落ちると縦に伸びるので、行間を詰める */ .footer-nav { grid-template-columns:1fr; gap:14px; } .footer-nav ul { gap:14px; } /* 横に並べる余裕がないので、規約とコピーライトを縦に積む */ .footer-bottom { flex-direction:column; align-items:flex-start; } } /* 矢印は線で描いたシェブロンで統一する */ .btn-arrow { flex:none; width:16px; height:16px; } .text-link .btn-arrow { width:13px; height:13px; } .howto-movie-arrow.btn-arrow { width:20px; height:20px; } /* FEATURES：中間幅では4列だと列が min-content に押し広げられて潰れるので、3列（3・3・2）を挟む */ @media (min-width:561px) and (max-width:800px) { .reason-grid { grid-template-columns:repeat(3,1fr); } /* 8項目だと最終行が2つになるので、半列＋余白の半分だけずらして中央に置く */ .reason-grid li:nth-child(7), .reason-grid li:nth-child(8) { transform:translateX(calc(50% + 7px)); } } /* 見出しの読点のあとのアキを詰める。 Google Fonts 版の Noto Serif JP は palt / vpal を持たないため、 読点を span で包んで論理方向のマージンで詰めている （横書きなら右、縦書きなら下に効く）。 */ .kt { margin-inline-end:-.3em; } /* MESSAGE：1200px 未満は左右の写真が画面の外へ押し出されて被写体が見えなくなる。 写真を縮めて画面の端を基準に置き直す（1200px 以上は従来の大きな配置のまま）。 本文は中央寄せで実際の文字幅が狭いので、801px でも写真と重ならない */ @media (min-width:801px) and (max-width:1199px) { .growth-side { gap:20px; } /* 位置は 1440px のときと同じ「画面端からのはみ出し量」を 60% に縮めて再現する */ .growth-side-left { left:calc(-1 * (50vw - 320px) - 18px); } .growth-side-right { right:calc(-1 * (50vw - 320px) - 194px); } /* 元の 60% を基準に、写真ごとに大きさと高さを微調整する */ .growth-blob-1 { width:274px; height:274px; transform:translateY(-168px); } .growth-blob-2 { width:198px; height:198px; margin-right:26px; } .growth-blob-3 { width:432px; height:432px; transform:translate(48px,-336px); } .growth-blob-4 { width:250px; height:250px; transform:translateY(12px); } } /* LINEUP：1200px 以上は写真とテキストの高さが近いので、従来どおり中央揃えに戻す */ @media (min-width:1200px) { .kit-hero { align-items:center; } } /* ギフト導線：1200px 未満は写真とテキストを横に並べる余裕がないので縦積みにする。 セクションラベルだけは写真より上に出したいので、本文ブロックを畳んで 格子へ直接並べ、ラベルを先頭に送る */ @media (max-width:1199px) { .gift-cta { grid-template-columns:1fr; gap:0; text-align:center; justify-items:center; } .gift-cta-body { display:contents; } .gift-cta .section-label { order:-1; margin-bottom:34px; } /* サブ写真が右下にはみ出すぶん、2枚合わせた見た目が中央に来るよう左へずらす （はみ出し量は枠の 31% なので、その半分の 15.5% だけ戻す） */ .gift-cta-photos { order:0; margin-bottom:var(--sub-drop); transform:translateX(-15.5%); } /* 縦積みでは横長より正方形のほうが収まりがよい */ .gift-cta-photo { aspect-ratio:1 / 1; } /* 中に入れ子になっている要素も中央に寄せる */ .gift-cta-scenes { align-items:center; } } /* タブレット幅では列いっぱいだと写真が大きくなりすぎるので 80% に縮める（74% × 0.8）。 モバイルは元の 74% のままにする */ @media (min-width:801px) and (max-width:1199px) { .gift-cta-photos { width:59.2%; } } /* 想いセクション：801〜1023px は見出しと写真だけを左右に並べ、本文は下に全幅で独立させる （左右2列のままだと本文が288px＝1行18文字までしか入らず、縦に伸びてしまうため） */ @media (min-width:801px) and (max-width:1023px) { .story { grid-template-columns:minmax(0,1fr) auto; row-gap:36px; } .story-main { display:contents; } .story h2 { grid-column:1; grid-row:1; align-self:center; margin:0; } .story-photos { grid-column:2; grid-row:1; } .story-body { grid-column:1 / -1; grid-row:2; } } /* 想いセクション：1024〜1199px は左の写真をもう 48px 下げる */ @media (min-width:1024px) and (max-width:1199px) { .story-photos .story-photo-a { margin-top:calc(clamp(40px,6vw,96px) + 96px); } } /* スマホの開閉メニューは縦に余裕があるので、英字の下に日本語を添える */ @media (max-width:800px) { /* 開閉メニューは淡いピンクの面。下の角だけ丸めて、垂れ下がったカードに見せる */ .site-nav { left:0; padding:26px 24px 30px 38px; background:#fbf4f3; border-top:0; border-radius:0 0 26px 26px; box-shadow:0 16px 24px rgba(67,50,38,.10); } /* 開閉は max-height と透明度で、ゆっくり垂れ下がるように動かす */ .site-nav { display:flex; overflow:hidden; max-height:0; opacity:0; visibility:hidden; transform:translateY(-8px); transition:max-height .58s cubic-bezier(.22,1,.36,1), opacity .38s ease, transform .58s cubic-bezier(.22,1,.36,1), visibility 0s linear .58s; } .site-nav.is-open { max-height:720px; opacity:1; visibility:visible; transform:none; transition:max-height .62s cubic-bezier(.22,1,.36,1), opacity .42s ease .06s, transform .62s cubic-bezier(.22,1,.36,1), visibility 0s; } /* 動きを減らす設定の端末では、ゆっくり開く動きはやめて即座に切り替える */ @media (prefers-reduced-motion:reduce) { .site-nav, .site-nav.is-open { transition:none; } } /* 右側にコウノトリ（ロゴの右端部分だけを見せる） */ .site-nav::after { content:""; position:absolute; z-index:0; right:20px; top:50%; width:clamp(96px,26vw,124px); aspect-ratio:1 / 1; transform:translateY(-50%); background:url("assets/deco-totte-stork.webp") right center / auto 100% no-repeat; opacity:.5; pointer-events:none; } .site-nav > a { position:relative; z-index:1; } .site-nav > a:not(.nav-shop) { display:flex; flex-direction:column; gap:3px; } /* 行間（項目どうしの間隔）を少し詰める。指で押す高さは46px前後を確保 */ .site-nav > a { padding:12px 0; } /* 開閉メニューの中では、アイコンだけだと何のリンクか分からないので文字を添える */ .site-nav > a.nav-ig { margin-left:0; flex-direction:row; align-items:center; justify-content:flex-start; gap:12px; color:var(--accent); } .nav-ig-label { display:inline; font-family:var(--display); font-size:17px; letter-spacing:.16em; line-height:1.2; } .icon-ig { width:23px; height:23px; } /* 購入ボタンは幅いっぱいではなく、文字の左端にそろえて半分ほどの幅に */ /* 左右の内側余白が違う（左38px・右24px）ので、その差14pxを打ち消して メニュー全体の中央にそろえる */ .nav-shop { align-self:center; margin-top:58px; margin-right:14px; width:max(150px, 52%); } .nav-voice { display:flex; } .nav-en { font-size:17px; color:var(--accent); letter-spacing:.16em; line-height:1.2; } .nav-jp { display:block; font-size:11px; color:#6b573f; letter-spacing:.04em; line-height:1.5; } .site-nav > a[aria-current="page"] .nav-en { border-bottom:0; padding-bottom:0; } .site-nav > a[aria-current="page"] .nav-jp { border-bottom:1px solid var(--accent); padding-bottom:3px; align-self:flex-start; } } /* MESSAGE：560px 以下も本文の左右に写真を置く。ただし本文の外側に残る余白が 320px で片側40pxしかないため、写真は 561〜800px の 70% にして、 画面からのはみ出し量を幅に応じて増やし、本文と重ならないようにする */ @media (max-width:560px) { .growth-collage { display:block; margin:96px auto 32px; } .growth-copy { order:0; margin-bottom:0; } /* 上2枚はセクションタイトル（MESSAGE / メッセージ）の左右、下2枚はセクションの下に置く。 4枚をそれぞれ独立に配置したいので、左右のまとまりは display:contents で外す */ .growth-side { display:contents; /* 見出し「MESSAGE」の幅は フォントサイズ × 約5.04。タイトルの左右に残る余白から 必要なはみ出し量を逆算して、どの幅でも文字との間隔を一定に保つ */ --title-half:calc(2.52 * clamp(44px,13vw,64px)); } .growth-blob { position:absolute; margin:0; transform:none; } .growth-blob-1 { top:-458px; width:106px; height:106px; left:calc(-1 * (50vw - 50%) - max(0px, 118px - 50vw + var(--title-half)) + 24px); } .growth-blob-3 { top:-502px; width:150px; height:150px; right:calc(-1 * (50vw - 50%) - max(0px, 162px - 50vw + var(--title-half)) + 20px); } /* 下2枚は本文の下。左右にはみ出させて、上2枚と同じ見え方にそろえる */ .growth-blob-2 { top:calc(100% + 18px); width:91px; height:91px; left:calc(-1 * (50vw - 50%) - 24px); } /* 右下だけは大きくして、次のセクションにかかるところまで下げる */ .growth-blob-4 { top:calc(100% + 56px); width:127px; height:127px; z-index:2; right:calc(-1 * (50vw - 50%) - 24px); } } /* そのほかの商品：商品名が2行になると、隣の列と説明文の開始位置がずれる。 li を subgrid にして、写真・ラベル・商品名・説明文の行を左右で揃える （subgrid が使えない環境では、商品名に2行分の高さを確保して近い見え方にする） */ @media (max-width:800px) { .also-list strong { min-height:calc(1.5em * 2); } @supports (grid-template-rows:subgrid) { .also-list li { display:grid; grid-template-rows:subgrid; grid-row:span 4; row-gap:0; } .also-list strong { min-height:0; } /* グリッドの子になるとラベルが列幅いっぱいに伸びるので、文字幅のまま左に置く */ .also-list em { justify-self:start; } } } /* 安心セクション：560px 以下は見出しを縦書きにして、写真の上（重ねずに）中央へ置く */ @media (max-width:560px) { .safety-head { display:grid; grid-template-columns:1fr; justify-items:center; row-gap:28px; } .safety-head-body { display:contents; } .safety-head .safety-title { grid-row:1; margin:0; writing-mode:vertical-rl; text-align:start; line-height:1.9; letter-spacing:.1em; } .safety-photo { grid-row:2; width:min(78%,300px); margin:0; } .safety-head .assurance-list { grid-row:3; width:100%; margin:2px 0 0; max-width:none; } } /* 最終CTA：800px 以下も左右の白いぼかしをやめて写真をそのまま見せる。 見出しは PC と同じ縦書き＋白い下地にして、上のセクションにまたがるよう中央に置く */ @media (max-width:800px) { /* 3枚重ねから 1枚に減らすと、position / size のリストも先頭だけが残って 左上・原寸になってしまうので、ここで指定し直す */ .final-cta { position:relative; background-image:url("assets/cta-hands.webp"); background-position:center; background-size:cover; background-repeat:no-repeat; padding-top:clamp(190px,27vw,220px); } /* 見出しがせり上がるぶん、上の想いセクションの下の余白を足す */ .story { padding-bottom:clamp(200px,29vw,236px); } .final-cta h2 { position:absolute; z-index:2; top:0; left:24px; transform:translateY(-38%); margin:0; padding:0; height:max-content; writing-mode:vertical-rl; text-align:start; line-height:2.2; letter-spacing:.12em; color:var(--ink); } /* 白い下地は行ごとに、文字の背後だけに敷く */ .final-cta h2 > span { background:#ffffff; padding:.3em .14em; -webkit-box-decoration-break:clone; box-decoration-break:clone; } } /* 想いセクション：800px 以下は左の写真をもう 48px 下げる */ @media (max-width:800px) { .story-photos .story-photo-a { margin-top:calc(clamp(40px,6vw,96px) + 96px); } } /* つくりかた：800px 以下は 2列だと 3つ目だけが余って中途半端になるので、1列に積む */ @media (max-width:800px) { .steps-3 { grid-template-columns:1fr; row-gap:38px; } .steps-3 li, .steps-3 li:not(:first-child), .steps-3 li:last-child { padding-left:0; padding-right:0; border-right:0; min-height:0; } } /* 561〜800px は写真を左・文字を右の横並びにする。写真を全幅で積むと 1枚が画面の 2/3 を占めてしまい、3ステップの流れが一度に見渡せなくなるため。 560px 以下は文字側が狭くなりすぎるので、1列・全幅のままにしておく */ @media (min-width:561px) and (max-width:800px) { .steps-3 li { display:grid; grid-template-columns:clamp(140px,34%,260px) 1fr; column-gap:20px; align-items:start; } .steps-3 .step-photo { grid-row:1 / span 3; margin-bottom:0; } } /* 安心セクション：561〜800px も 801〜1023px と同じく、写真と縦書き見出しを横に並べる （スペックだけは下に全幅で置く） */ @media (min-width:561px) and (max-width:800px) { /* 写真＋見出しは中央に、スペック表は全幅に置きたいので、左右に 1fr の余白列を足す。 全列にまたがるスペック表は、可変列があるぶん写真・見出しの列幅に影響しない */ .safety-head { display:grid; grid-template-columns:minmax(0,1fr) clamp(200px,36vw,280px) max-content minmax(0,1fr); align-items:center; column-gap:clamp(28px,6vw,64px); row-gap:34px; margin-bottom:22px; } .safety-head-body { display:contents; } .safety-photo { grid-column:2; grid-row:1; width:100%; margin:0; } .safety-head .safety-title { grid-column:3; grid-row:1; margin:0; justify-self:start; writing-mode:vertical-rl; text-align:start; line-height:1.9; letter-spacing:.1em; } .safety-head .assurance-list { grid-column:1 / -1; grid-row:2; max-width:none; } } /* 固定写真：800px 以下でも PC と同じ「写真が止まり、次のセクションがせり上がる」動きにする。 background-attachment:fixed はモバイル系ブラウザで効かないため、 親を clip-path で切り抜き、その中に position:fixed の写真レイヤーを敷いて同じ見え方を作る */ @media (max-width:800px) and (prefers-reduced-motion:no-preference) { .fixed-photo { position:relative; clip-path:inset(0); } /* 高さを画面に追従させると、スクロールでアドレスバーが出入りするたびに 画面の高さが変わり、cover の写真が約1割も伸び縮みして「カクッ」と見える。 アドレスバーが隠れたときの高さ（100lvh）で固定して、伸び縮みを止める。 lvh に未対応の古い端末は 100vh のまま＝これまでと同じ動きになる */ .fixed-photo::after { content:""; position:fixed; top:0; left:0; right:0; height:100vh; height:100lvh; background-image:inherit; background-position:inherit; background-size:cover; background-repeat:no-repeat; } } /* MESSAGE：561〜800px は 801px 以上と同じ「本文の左右に写真を置く」配置にする。 写真は 801〜1199px 帯のちょうど 50% の大きさで、画面端からのはみ出し量で位置を決める （560px 以下は本文幅が広くなり写真と重なるので、横一列のままにしておく） */ @media (min-width:561px) and (max-width:800px) { .growth-collage { display:block; margin:130px auto 40px; } .growth-copy { order:0; margin-bottom:0; } .growth-side { position:absolute; top:62%; transform:translateY(-50%); flex-direction:column; flex-wrap:nowrap; gap:14px; margin:0; } .growth-side-left { left:calc(-1 * (50vw - 50%) - 20px); align-items:flex-end; } .growth-side-right { right:calc(-1 * (50vw - 50%) - 94px); align-items:flex-start; } .growth-blob-1 { width:151px; height:151px; transform:translateY(-84px); } .growth-blob-2 { width:109px; height:109px; margin-right:13px; } .growth-blob-3 { width:238px; height:238px; transform:translate(24px,-168px); } .growth-blob-4 { width:138px; height:138px; transform:translateY(6px); } } /* 縦組みになる幅では、ヒーロー写真の下端を背景色へ溶かして本文へつなげる （.hero の背景 #fbf4f3 が透けるので、下のコピー面と地続きに見える） */ @media (max-width:800px) { .hero-image-wrap { -webkit-mask-image:linear-gradient(to bottom, #000 0 80%, rgba(0,0,0,.55) 92%, transparent 100%); mask-image:linear-gradient(to bottom, #000 0 80%, rgba(0,0,0,.55) 92%, transparent 100%); } } /* 締めのセクション：801〜1023px は縦書き見出しが透かしロゴに重なるので、さらに左へ寄せる */ @media (min-width:801px) and (max-width:1023px) { .final-cta h2 { left:calc(clamp(24px,6vw,110px) + 24px); } } /* 締めのセクション：1024〜1199px は縦書き見出しを 48px 左へ寄せる */ @media (min-width:1024px) and (max-width:1199px) { .final-cta h2 { left:calc(clamp(24px,6vw,110px) + 32px); } } /* ヒーローの2つのCTAは幅と高さを揃える。 grid の 1fr で両方を広いほうの幅に合わせ、枠線ぶんの高さの差は透明な枠で埋める */ .hero-actions .button-primary { border:1px solid transparent; } .hero-actions { display:grid; width:max-content; } /* 1023px 以下は横に並べると写真の上まで届いてしまうので縦積みのままにする */ @media (min-width:1024px) { .hero-actions { grid-auto-flow:column; grid-auto-columns:1fr; } } /* AT HOME：801〜1023px は写真をカードと同じ幅に揃える */ @media (min-width:801px) and (max-width:1023px) { .athome-photo { width:100%; } } /* 安心セクション：801〜1023px は写真と縦書き見出しを横に並べ、 スペックだけ下に全幅で置く。右カラムが狭いと値が細かく折り返すため */ @media (min-width:801px) and (max-width:1023px) { .safety-head { display:grid; grid-template-columns:clamp(240px,42vw,360px) max-content; justify-content:center; align-items:center; column-gap:clamp(48px,8vw,110px); row-gap:40px; } /* 見出しとスペックを格子へ直接並べる */ .safety-head-body { display:contents; } .safety-photo { width:100%; margin:0; } .safety-head .safety-title { grid-column:2; grid-row:1; margin:0; justify-self:start; } .safety-head .assurance-list { grid-column:1 / -1; grid-row:2; } } /* そのほかの商品：商品名は語の切れ目でだけ折り返す */ .also-list strong .nb { display:inline-block; overflow-wrap:anywhere; } /* 登場アニメーション（JSがセクションにだけ .reveal を付ける）。 transform ではなく translate を使うことで、既存のずらし指定を打ち消さない。 1.4秒かけて、ゆっくり始まりゆっくり止まる曲線にして「ふわっと」感を出している */ .reveal { opacity:0; translate:0 28px; } /* インライン要素（縦書きコピーの各行など）は translate が効かないので、透明度だけで出す */ .reveal-fade { opacity:0; } .reveal-fade.is-in { opacity:1; transition:opacity 1.4s cubic-bezier(.33,0,.2,1); } /* 1文字ずつ出すぶんは、1文字あたりは短めにしてもたつかせない */ .final-cta h2 .char.reveal-fade.is-in { transition:opacity .7s ease; } /* 透かして置いているロゴは 0 →（元の透過度）.7 で出す。 1.0 まで上げると、白く出たあとに透過へ戻って見えてしまうため。 .final-logo と同じ強さだと打ち消し合うので、クラスを重ねて明示的に指定する */ .final-logo.reveal { opacity:0; } .final-logo.reveal.is-in { opacity:.7; } .reveal.is-in { opacity:1; translate:0 0; transition:opacity 1.4s cubic-bezier(.33,0,.2,1), translate 1.4s cubic-bezier(.33,0,.2,1); } /* aboutページは、下から浮かぶ動きに薄いぼかしを重ねる。 文字の輪郭がゆっくり結ばれることで「滲みながら現れる」印象にする */ .is-about .reveal { filter:blur(8px); } .is-about .reveal.is-in { filter:blur(0); transition:opacity 1.25s cubic-bezier(.33,0,.2,1), translate 1.25s cubic-bezier(.33,0,.2,1), filter 1.45s cubic-bezier(.33,0,.2,1); } @media (prefers-reduced-motion:reduce) { .reveal, .reveal-fade { opacity:1; translate:0 0; filter:none; } } /* ===== ギフトセクション：採用案（写真を全面に敷き、白い透かしを重ねる） 2026-09-07 ===== ここより上にある .gift-cta の濃いブラウン用の指定（白ぬき文字など）は、 この一式ですべて上書きしている。色を戻したいときはこのブロックごと外す。 */ .gift-cta { position:relative; display:block; overflow:hidden; text-align:center; padding-top:clamp(120px,16vw,200px); padding-bottom:clamp(120px,16vw,200px); /* 写真が読み込まれるまでのあいだ、濃いブラウンが一瞬見えないように下地も明るくしておく */ background-color:#f4efe9; } /* 大きい写真をセクションいっぱいの背景にする */ .gift-cta-photos { position:absolute; inset:0; z-index:0; width:100%; margin:0; transform:none; } .gift-cta-photo { display:block; width:100%; height:100%; aspect-ratio:auto; object-fit:cover; object-position:center 42%; border-radius:0; } /* 小さい写真は背景に重ねると邪魔になるので出さない */ .gift-cta-photo-sub { display:none; } /* 写真の上に重ねる白い透かし */ .gift-cta::after { content:""; position:absolute; inset:0; z-index:1; background:rgba(255,255,255,.55); pointer-events:none; } .gift-cta-body { position:relative; z-index:2; display:block; max-width:620px; margin:0 auto; } .gift-cta-body > p { max-width:none; margin-left:auto; margin-right:auto; } .gift-cta-scenes { align-items:center; } /* 背景になった写真は、登場演出で消えないよう最初から表示しておく */ .gift-cta .gift-cta-photos.reveal, .gift-cta .gift-cta-photos.reveal-fade { opacity:1; translate:none; } /* 明るい面になるので、文字と線をブラウン側へ */ .gift-cta { color:var(--ink); } .gift-cta .section-label-en { color:var(--accent); } .gift-cta .section-label-marks { color:var(--accent-tint); } .gift-cta .section-label-ja { color:#5b492f; } .gift-cta-body h2 { color:var(--ink); } .gift-cta-body > p { color:#5b492f; } .gift-cta-scenes a { color:#5b492f; } .gift-cta-scenes a::before { background:rgba(81,59,36,.28); } .gift-cta-scenes a::after { background:var(--ink); } /* 縦積みになる幅でも、背景写真は全面のまま保つ */ @media (max-width:1199px) { .gift-cta-photos { width:100%; margin:0; transform:none; } } @media (max-width:800px) { .gift-cta-photos { width:100%; } } /* ===== ファーストビュー＆ヘッダーの新デザイン（2026-09-09 採用） ===== 検討用の hero-full.html から本番へ移したもの。 .np … 新ヘッダー／右スライドメニューを使うページ（本体6ページ） .is-top … トップページだけ。ヘッダーを透明にして写真の上に重ねる （もともとは pattern-b/c/d という旧案ページも同じ style.css を読んでいたため この2つのクラスで囲ってある。旧案は2026-09-12に削除済み）*/ /* ---- ファーストビュー：写真を枠の中に置き、コピーを左に重ねる ---- */ .is-top .hero { display:block; position:relative; overflow:hidden; /* iPhone Safariでは読み込み直後の window.innerHeight が、アドレスバーを 含まない小さい値になる。JavaScriptでその値を固定すると、コピーが必要以上に 上へ寄ってしまうため、ブラウザUIの開閉で変化しない lvh を使う。 lvh 非対応の古い端末では、従来どおりの 100vh にフォールバックする。 */ min-height:100vh; min-height:100lvh; background:#ffffff; /* 枠の外は白。影も線も付けない */ /* 上下左右おなじ幅の細い余白。写真・膜・コピーの位置をこの変数にそろえる */ --frame-top:clamp(10px,1.1vw,18px); --frame-x:clamp(10px,1.1vw,18px); --frame-bottom:clamp(10px,1.1vw,18px); --frame-radius:clamp(18px,2vw,30px); } .is-top .hero-image-wrap { position:absolute; z-index:0; inset:var(--frame-top) var(--frame-x) var(--frame-bottom); min-height:0; height:auto; border-radius:var(--frame-radius); overflow:hidden; -webkit-mask-image:none; mask-image:none; } .is-top .hero-image { width:100%; height:100%; object-fit:cover; object-position:center; } /* 左のコピーが読めるよう、左からうすいピンクをかける。枠の内側だけ */ .is-top .hero::after { content:""; position:absolute; z-index:1; pointer-events:none; inset:var(--frame-top) var(--frame-x) var(--frame-bottom); border-radius:var(--frame-radius); background:linear-gradient(to right, rgba(254,244,248,.88) 0%, rgba(254,244,248,.72) 26%, rgba(254,244,248,.30) 48%, rgba(254,244,248,0) 66%); } .is-top .hero-copy { position:relative; z-index:2; display:flex; flex-direction:column; justify-content:center; min-height:100vh; min-height:100lvh; max-width:640px; padding:calc(var(--frame-top) + clamp(24px,4vw,64px)) 0 calc(var(--frame-bottom) + clamp(24px,4vw,64px)) calc(var(--frame-x) + clamp(24px,6vw,96px)); } /* 801px 以上で写真の左端にかけていた元のぼかしは、上の膜と二重になるので止める */ @media (min-width:801px) { .is-top .hero-image-wrap::before { display:none; } } @media (max-width:800px) { .is-top .hero { min-height:100vh; min-height:100lvh; --frame-top:10px; --frame-x:10px; --frame-bottom:10px; --frame-radius:clamp(16px,4vw,22px); } /* 縦画面はコピーを下に寄せて、上半分は写真をそのまま見せる */ .is-top .hero-copy { order:0; justify-content:flex-end; min-height:100vh; min-height:100lvh; padding:calc(var(--frame-top) + 67px + clamp(16px,5vw,32px)) calc(var(--frame-x) + 20px) calc(var(--frame-bottom) + clamp(20px,6vw,40px)); } .is-top .hero-image-wrap { order:0; } .is-top .hero-image { object-position:64% center; } /* 商品の上に膜がかかると白っぽくぼやけて見えるので、 木のトレイの下端（枠の高さの約72%）を過ぎてから一気に濃くする */ .is-top .hero::after { background:linear-gradient(to bottom, rgba(254,244,248,0) 0%, rgba(254,244,248,0) 52%, rgba(254,244,248,.16) 64%, rgba(254,244,248,.62) 72%, rgba(254,244,248,.94) 79%, rgba(254,244,248,1) 84%, rgba(254,244,248,1) 100%); } } /* ---- トップだけ、ヘッダーを透明にして写真の上に重ねる ---- */ .is-top .site-header { position:fixed; top:0; left:0; right:0; background:transparent; border-bottom:0; box-shadow:none; height:auto; /* iPhone版Chromeは上部ツールバーをページに重ねることがある。 背景写真は画面端まで見せたまま、ロゴとMENUだけ安全領域の内側へ置く。 */ padding-top:max(clamp(24px,2.8vw,42px), calc(env(safe-area-inset-top, 0px) + 12px)); padding-bottom:clamp(14px,1.8vw,24px); } /* スマホのトップも、ヘッダーがついてくるようにする。 全画面の見え方を優先して、スクロール後も背景は透明のまま （白い帯を出さない）。PCのトップと同じ扱い */ @media (max-width:800px) { .is-top .site-header { position:fixed; } } /* ---- ヘッダーは三本線＋MENU に統一（本体6ページ共通） ---- */ .np .menu-button { display:flex; flex-direction:column; justify-content:center; align-items:center; gap:4px; width:auto; height:auto; padding:7px; border:0; background:transparent; position:relative; z-index:2; } .np .menu-button span:not(.sr-only) { display:block; width:25px; height:1px; background:var(--ink); transition:.2s; } .np .menu-button.is-open span:first-child { transform:translateY(6px) rotate(45deg); } .np .menu-button.is-open span:nth-child(2) { opacity:0; } .np .menu-button.is-open span:nth-child(3) { transform:translateY(-6px) rotate(-45deg); } /* 三本線の下に添える MENU の文字。上の指定は span をすべて「線」として扱うので打ち消す */ .np .menu-button span.menu-label { display:block; width:auto; height:auto; margin-top:5px; background:none; font-family:var(--display); font-size:10px; letter-spacing:.18em; line-height:1; color:var(--ink); } /* 開いているあいだは MENU を CLOSE に差し替える */ .np .menu-button.is-open span.menu-label { font-size:0; } .np .menu-button.is-open span.menu-label::after { content:"CLOSE"; font-size:10px; letter-spacing:.18em; } /* パソコンでは購入ボタンをヘッダーに出す（メニューの中のものと役割が重なるが、 パネルは閉じているのが既定なので重複して見えることはない） */ .np .header-shop { display:none; } @media (min-width:801px) { .np .header-shop { display:inline-flex; align-items:center; margin-left:auto; margin-right:26px; background:var(--accent); color:#ffffff; padding:10px 19px; border-radius:999px; font-size:12px; letter-spacing:.06em; transition:background .2s, transform .2s; } .np .header-shop:hover { background:#bd9038; transform:translateY(-1px); } } /* ---- メニューは右から出てくる、画面の高さいっぱいのパネル ---- */ .np .site-nav { position:fixed; top:0; right:0; bottom:0; left:auto; width:min(86vw, 380px); height:100svh; max-height:none; /* 元の指定が align-items:center なので、打ち消さないと項目が中央に寄る */ display:flex; flex-direction:column; justify-content:center; align-items:stretch; gap:0; padding:clamp(72px,11vh,110px) 30px clamp(36px,6vh,56px) 38px; background:#fbf4f3; border-top:0; border-radius:26px 0 0 26px; box-shadow:-18px 0 40px rgba(67,50,38,.10); overflow-y:auto; overscroll-behavior:contain; /* 閉じているときは画面の右外に逃がしておく */ opacity:1; visibility:hidden; transform:translateX(100%); transition:transform .55s cubic-bezier(.22,1,.36,1), visibility 0s linear .55s; } .np .site-nav.is-open { visibility:visible; transform:none; transition:transform .6s cubic-bezier(.22,1,.36,1), visibility 0s; } @media (prefers-reduced-motion:reduce) { .np .site-nav, .np .site-nav.is-open { transition:none; } } /* コウノトリはパネルの右下に置く */ .np .site-nav::after { content:""; position:absolute; z-index:0; right:14px; bottom:14px; width:clamp(76px,20vw,104px); aspect-ratio:1 / 1; transform:none; background:url("assets/deco-totte-stork.webp") right bottom / auto 100% no-repeat; opacity:.34; pointer-events:none; } .np .site-nav > a { position:relative; z-index:1; padding:clamp(16px,2vh,24px) 0; } .np .site-nav > a:not(.nav-shop) { display:flex; flex-direction:column; gap:3px; } .np .site-nav > a.nav-ig { margin-left:0; flex-direction:row; align-items:center; justify-content:flex-start; gap:12px; color:var(--accent); } .np .nav-ig-label { display:inline; font-family:var(--display); font-size:17px; letter-spacing:.16em; line-height:1.2; } .np .icon-ig { width:23px; height:23px; } /* 購入ボタンは幅を持たせているので、中の文字は中央にそろえる */ .np .nav-shop { align-self:flex-start; margin-top:clamp(34px,4.5vh,52px); width:max(160px, 62%); display:inline-flex; align-items:center; justify-content:center; text-align:center; } .np .nav-voice { display:flex; } .np .nav-en { font-size:17px; color:var(--accent); letter-spacing:.16em; line-height:1.2; } .np .nav-jp { display:block; font-size:11px; color:#6b573f; letter-spacing:.04em; line-height:1.5; } .np .site-nav > a[aria-current="page"] .nav-en { border-bottom:0; padding-bottom:0; } .np .site-nav > a[aria-current="page"] .nav-jp { border-bottom:1px solid var(--accent); padding-bottom:3px; align-self:flex-start; } @media (max-width:800px) { .np .site-nav { width:min(88vw, 330px); padding:clamp(64px,10vh,92px) 24px 32px 32px; } } /* トップはヘッダーが fixed（浮いている）ため、ページ内リンクで飛んだときに 見出しがヘッダーの下に隠れる。その分だけ手前で止める */ .is-top section[id], .is-top main[id] { scroll-margin-top:84px; } @media (min-width:801px) { .is-top section[id], .is-top main[id] { scroll-margin-top:112px; } } /* そのほかの商品：価格と購入リンク。 価格は li の直下に置いて独立した行にしている（800px以下の subgrid で1行ぶん数える）。 スマホで価格が2行に折り返すと、価格のない「ファミリー版」と説明文の開始位置が ずれるため。ファミリー版には中身が空の価格行を置いて、行の高さを隣に合わせている */ .also-list .also-price { display:block; margin-bottom:6px; color:var(--ink); font:500 16px/1.6 var(--serif); letter-spacing:.03em; } .also-list .also-buy { display:block; width:fit-content; margin-top:9px; color:var(--ink); border-bottom:1px solid currentColor; padding-bottom:2px; font-size:14px; letter-spacing:.04em; } .also-list .also-buy:hover { color:var(--accent); } /* 「はじめてでも、安心して。」の項目名の折り返し。 以前は overflow-wrap:anywhere で、どこででも切れるため 「赤ちゃんに配慮した素／材」のように不自然に割れていた。 auto-phrase = 文節の切れ目で折り返す、に変更。 なお .spec-list dt の keep-all と同じ強さなので、必ずそれより後ろに置くこと。 列幅も 800px 以下で 140→152px に広げ、いちばん長い 「赤ちゃんに配慮した素材」（約143px）は1行に収まるようにしている */ .assurance-list dt { word-break:auto-phrase; overflow-wrap:normal; } /* 560px以下は項目名を独立した行にする設計（.spec-list の指定）なので、 ここで上書きしないよう 561px 以上に限定する */ @media (min-width:561px) and (max-width:800px) { .assurance-list > div { grid-template-columns:152px 1fr; } } /* 560px以下は項目名と説明文が縦に積まれる。この状態だと色も大きさも同じで どこまでが項目名か分からないため、項目名だけ少し大きく・太くして差をつける。 （.spec-list dt の指定と同じ強さなので、必ずそれより後ろに置くこと） */ @media (max-width:560px) { .spec-list dt { font-size:15px; font-weight:600; letter-spacing:.03em; line-height:1.75; } .spec-list div { gap:5px; } } /* そのほかの商品：800px以下の2列が「1fr 1fr」だと、中身が縮められる限界 （最長の文節など）に押されて片方の列だけ広がり、写真の大きさがそろわない。 minmax(0,1fr) にすると、中身の限界を無視して必ず半分ずつに割り付けられる。 PC側（4列）はもともと minmax(0,1fr) で組んである */ @media (max-width:800px) { .also-list { grid-template-columns:repeat(2,minmax(0,1fr)); } /* 上下のカードの区切り。カード内部の行間は li 側で 0 にしてあるので、 ここで行間を広げてもカードの中は詰まったまま、カードとカードのあいだだけ空く。 「ご購入はこちら」のすぐ下に次のカードの写真が来て、どちらのボタンか 分かりにくくなっていたため */ .also-list { row-gap:38px; } /* li 自身もグリッド（行そろえの subgrid）なので、同じ理由で列が広がる。 「totteファミリー版」のように途中で切れない商品名があると、 その幅までカードが膨らんで写真だけはみ出す。ここも minmax(0,1fr) で止める */ .also-list li { grid-template-columns:minmax(0,1fr); } } /* そのほかの商品：「ご購入はこちら」の高さをカード間でそろえる。 説明文の長さが違うと、リンクの位置がばらばらに見えるため。 カードを縦のフレックスにして、リンクだけ下端に寄せている（margin-top:auto）。 カード自体はグリッドの行内で同じ高さに伸びるので、これで4枚とも同じ高さに並ぶ。 800px以下は subgrid で行をそろえているので、リンクぶん1行増やして span 5 にする。 購入リンクのない「準備中」の商品は、その行が空くだけで位置はずれない */ @media (min-width:801px) { .also-list li { display:flex; flex-direction:column; } .also-list .also-buy { margin-top:auto; } /* 縦並びの箱にすると中の要素が幅いっぱいに伸びる。 ラベル（先行発売中など）は文字幅のまま左に置きたいので、伸びないようにする （800px以下の subgrid 側でも同じ理由で justify-self:start を入れてある） */ .also-list em { align-self:flex-start; } } @media (max-width:800px) { @supports (grid-template-rows:subgrid) { .also-list li { grid-row:span 6; } } } /* PCも同じ subgrid で行をそろえる（価格のないファミリー版の説明文を、他の商品と同じ高さから始めるため）。 subgrid が使えない環境は、上のフレックス（リンクを下端に寄せる）のまま */ @media (min-width:801px) { @supports (grid-template-rows:subgrid) { .also-list li { display:grid; grid-template-rows:subgrid; grid-row:span 6; row-gap:0; grid-template-columns:minmax(0,1fr); } .also-list strong { min-height:0; } .also-list em { justify-self:start; } .also-list .also-buy { margin-top:9px; align-self:start; } } @supports not (grid-template-rows:subgrid) { .also-list .also-price:empty { display:none; } } } /* 説明文がヘアクリップの注釈だけになったので、先頭の余白を消す */ .also-list li > span > .also-caution:first-child { margin-top:0; } /* お客様の声：見出し（お客様の声）から本文までの余白が40pxしかなく、 他セクション（MESSAGE・HOW TO など）の64pxより詰まって見えていたのでそろえる。 1200px以上はカードを見出しの左右に散らす配置（display:contents）になり この余白は使われないため、影響はない */ .voice-cards { margin-top:64px; } @media (max-width:800px) { .voice-cards { margin-top:64px; } } /* スマホも他セクションと同じ64px */ /* インスタグラム：本文が「どう／ぞお楽しみに」のように語の途中で折り返していた。 読点・句点で区切ったまとまりを inline-block にすると、 折り返しはそのまとまりの境目（＝句読点のうしろ）でしか起きなくなる。 万一まとまりが画面幅より長くなった場合だけ、その中で折り返す */ .instagram-lead .nb { display:inline-block; } /* インスタグラムの見出し。1行目の「＼…／」は、2行目「Instagramで発信中」の 幅に収まるサイズにする。em 指定なので、見出しが画面幅で伸縮しても比率は保たれる */ .instagram-head h2 .ig-tags { display:block; font-size:.58em; letter-spacing:.04em; line-height:1.5; margin-bottom:.35em; } /* インスタグラムの見出しだけ 28px 固定のままで、他のセクション見出し（40px）より 小さかったのでそろえる。上の「＼…／」は em 指定なので比率のまま一緒に大きくなる */ .instagram h2 { font-size:clamp(28px,4vw,40px); } /* インスタグラム：見出しから下の間隔だけが他セクションの半分ほど（22px/26px）で 詰まって見えていた。HOW TO などと同じ 40px 前後にそろえる。 画面幅で縮むよう clamp にしてあるので、スマホでは自動的に詰まる */ .instagram h2 { margin-bottom:clamp(24px,3vw,42px); } /* 本文とフォローリンクのあいだ。.instagram-head が縦のフレックスで、 その gap（26px）が効いているので、本文側の margin ではなくここを広げる */ .instagram-head { gap:clamp(24px,2.8vw,40px); } .instagram-posts { margin-top:clamp(30px,4vw,56px); } /* スマホのファーストビュー：写真の上に重ねたコピーを中央ぞろえにする。 .hero-copy は縦のフレックスなので、text-align だけでなく align-items も 中央にしないと、ボタン（width:max-content のグリッド）が左に寄ったままになる */ @media (max-width:800px) { .is-top .hero-copy { text-align:center; align-items:center; max-width:none; } /* ボタンは grid の幅（＝広いほうの幅）いっぱいに伸ばして大きさをそろえる。 justify-items:center にすると、それぞれが中身の幅に縮んで不ぞろいになる。 .hero-copy 側の align-items:center で、2つまとめて中央に置かれる */ .is-top .hero-actions { justify-items:stretch; } } /* スマホは縦位置の写真（hero-mobile.jpg）に差し替えているので、横長のときの 横方向のずらし（64%）とは別に指定する */ @media (max-width:800px) { /* 写真は枠より横に大きくはみ出す（画面幅390pxで約210px）。ガラスドームは 写真の中で少し右寄りにあるので、60%にすると画面のほぼ中央、 わずかに右へ寄った位置に収まる。left にするとドームが右へ振り切れて切れる */ .is-top .hero-image { object-position:60% center; } } /* スマホのファーストビュー：要素どうしの間隔だけを詰めて、コピーの塊を短くする。 文字の大きさは変えていない。塊が短くなったぶん、写真にかかる範囲が減る。 下端は写真の枠に沿わせたままなので、縮んだぶんは上が空く */ @media (max-width:800px) { .is-top #hero-title { margin-bottom:8px; } .is-top .hero-sub { margin-top:10px; margin-bottom:8px; } .is-top .hero-tagline { margin-bottom:14px; } .is-top .hero-actions { gap:14px; } /* コピーの塊は「画面の下端」ではなく「写真の中の商品の下」を基準に置く。 写真は枠の高さいっぱいに表示され、木のトレイの下端が枠の高さの 62.5%の位置にくるので、その少し下から見出しを始める。 */ .is-top .hero-copy { justify-content:flex-start; min-height:0; height:auto; padding-top:calc(var(--frame-top) + (100vh - var(--frame-top) - var(--frame-bottom)) * .735); padding-top:calc(var(--frame-top) + (100lvh - var(--frame-top) - var(--frame-bottom)) * .735); padding-bottom:clamp(20px,6vw,40px); } /* 上の指定でコピーが画面の高さを超えるため、ファーストビュー全体も縦に伸びる。 枠じたいは下まで伸ばしてボタンを枠の中に収めるが、写真と膜だけは 画面1つぶんの高さに固定する（一緒に伸びると商品が大きくなって位置がずれる）。 写真より下は、膜の終わりと同じ色で塗りつぶすので継ぎ目は見えない。 最初の画面では2つめのボタンは見えず、少しスクロールすると出てくる */ .is-top .hero-image-wrap { background:#fef4f8; } .is-top .hero-image, .is-top .hero::after { height:calc(100vh - var(--frame-top) - var(--frame-bottom)); height:calc(100lvh - var(--frame-top) - var(--frame-bottom)); } /* 膜の下端は写真の下端とぴったり合わせる。角を丸めたままだと、 その丸みのぶんだけ写真が素のまま見えて継ぎ目になる */ .is-top .hero::after { bottom:auto; border-bottom-left-radius:0; border-bottom-right-radius:0; } } /* ファーストビューの「助産師が開発」バッジ（支給画像をそのまま使用） */ .is-top .hero-badge { position:relative; display:block; align-self:flex-start; width:clamp(150px,14vw,208px); margin:0 0 clamp(14px,1.8vw,26px); } .is-top .hero-badge img { display:block; width:100%; height:auto; } /* を挟んだので、その箱にも幅を通す */ .is-top .hero-badge picture { display:block; } @media (max-width:800px) { /* スマホは縦にコピーが積まれるため、見出しの上に置くと商品に重なってしまう。 文章の流れから外して、写真の左上（布だけの余白）に小さく重ねる */ .is-top .hero-badge { position:absolute; z-index:3; margin:0; align-self:auto; left:calc(var(--frame-x) + 16px); top:max(calc(var(--frame-top) + 152px), calc(env(safe-area-inset-top, 0px) + 152px)); width:clamp(96px,27vw,122px); } } /* ファーストビューの「ご購入はこちら」。背景が透明で写真が透けていたので白地にする。 （.button-outline はこのボタン1箇所だけで使っている） */ .is-top .hero-actions .button-outline { background:#ffffff; } .is-top .hero-actions .button-outline:hover { background:#fffaf2; } /* ファーストビューの見出し：ひらがなだけ少し小さくして、漢字との強弱をつける。 日本語の組版でよく使う手法で、漢字が引き締まって見える。 em 指定なので、見出しが画面幅で伸縮しても比率は保たれる */ .is-top #hero-title .kana { font-size:.88em; } /* スマホ（2列）はカードの幅に余裕があるのに、アイコンだけ44pxと小さかった。 タイトルとのバランスを取って大きくする */ @media (max-width:560px) { .reason-icon { width:60px; height:60px; margin-bottom:8px; } /* 2列のとき、タイトルが1行のカードと2行のカードで説明文の開始位置がずれる。 li を subgrid にして、アイコン・タイトル・説明文の行を左右で共有させる。 カードの中の行間は margin で作っているので、行間そのものは 0 にする （そうしないと下の row-gap がカードの中にも入ってしまう）。 subgrid が使えない環境では、これまでどおり多少ずれるだけで崩れはしない */ @supports (grid-template-rows:subgrid) { .reason-grid li { display:grid; grid-template-rows:subgrid; grid-row:span 3; row-gap:0; } } .reason-grid { row-gap:46px; } } /* 想いセクション：ブランドの原点にあたる一節を強調する。 太字＋少し大きく＋ゴールドの下線。下線は文字から離して引きたいので text-underline-offset を広めにとっている */ .story-body .story-em { font-weight:700; font-size:1.1em; letter-spacing:.02em; text-decoration:underline; text-decoration-color:var(--accent); text-decoration-thickness:2px; text-underline-offset:1px; /* 通常は文字の線をよけて下線が途切れるので、重ねたいときは skip-ink を切る */ text-decoration-skip-ink:none; } /* 締めの一文。上の強調（.story-em）と同じ大きさにそろえる。下線はなし */ .story-body .story-lead { font-size:1.1em; letter-spacing:.02em; } /* そのほかの商品カードと、Instagramの一文のあいだ。 22pxではカードの一部のように見えてしまうので、独立した案内として離す */ .also-note { margin-top:clamp(38px,5vw,68px); } /* 価格表示（2026-09-10 変更）。 もとは「通常 ¥16,800」に取り消し線を引いて記念価格と並べていたが、 通常価格での販売実績がないため、景品表示法の二重価格表示にあたるおそれがある。 取り消し線をやめ、16,800円は「これからの価格」として書く形にした。 ※この表示は「12月1日から16,800円で販売する」ことが前提。 予定が変わった場合は、この行を消すか日付を直すこと */ .kit-price-note { margin-bottom:5px; } .kit-price-after { margin:0 0 22px; color:var(--muted); font-size:14px; letter-spacing:.04em; } /* ============================================================ aboutページ：タイトルを中央に置き、その下に横いっぱいの写真を敷く。 ピンクの帯と白い本文が、写真の上下をなだらかな波でくわえる形。 .page-head 自体は他の下層ページ（FAQ・贈りもの等）でも使っているので、 ここでの変更は .page-head-center が付いたときだけ効かせる ============================================================ */ .page-head-center { text-align:center; background:#fbf4f3; } .page-head-center .page-lead { max-width:640px; margin:0 auto; } /* タイトルと写真を合わせて画面1つぶんの高さにし、写真を下端まで届かせる。 高さの残りを写真に配るので、タイトルの行数が増えても写真がはみ出さない。 引く値はヘッダーの高さ（PC 82px / スマホ 67px） */ /* --extra は、写真を画面の下端よりさらに下まで伸ばすぶん。 本文の白い背景は、そのぶん下から始まる */ .page-cover { --hdr:82px; --extra:96px; display:flex; flex-direction:column; min-height:calc(100vh - var(--hdr) + var(--extra)); min-height:calc(100lvh - var(--hdr) + var(--extra)); } .page-cover .page-head { flex:0 0 auto; } /* 残りの高さを写真に配る。ここで大きな min-height を持たせると、 タイトルとの合計が画面の高さを超えてしまうので、最低限だけにする */ .page-cover .page-hero-photo { flex:1 1 auto; height:auto; min-height:200px; } .page-hero-photo { position:relative; margin:0; overflow:hidden; height:clamp(220px,34vw,430px); background:#fbf4f3; } /* 写真は枠を絶対位置で埋める。ふつうの img のままだと、img じたいの 縦横比が枠の高さを決めてしまい、画面1つぶんに収まらなくなる */ .page-hero-photo img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 44%; } /* 上端：ピンクの帯が写真の中央へ垂れ込む */ .page-hero-photo::before { content:""; position:absolute; z-index:1; left:0; right:0; top:0; height:var(--page-curve, clamp(26px,4.5vw,64px)); background:#fbf4f3; -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 20' preserveAspectRatio='none'%3E%3Cpath d='M0,0 L100,0 C84,0 68,20 50,20 C32,20 16,0 0,0 Z' fill='%23000'/%3E%3C/svg%3E") no-repeat center/100% 100%; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 20' preserveAspectRatio='none'%3E%3Cpath d='M0,0 L100,0 C84,0 68,20 50,20 C32,20 16,0 0,0 Z' fill='%23000'/%3E%3C/svg%3E") no-repeat center/100% 100%; } /* 下端：白い本文が写真の左右から立ち上がる（上の波と同じ向きにそろえる） */ .page-hero-photo::after { content:""; position:absolute; z-index:1; left:0; right:0; bottom:0; height:var(--page-curve, clamp(26px,4.5vw,64px)); background:var(--paper); -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 20' preserveAspectRatio='none'%3E%3Cpath d='M0,0 C16,0 32,20 50,20 C68,20 84,0 100,0 L100,20 L0,20 Z' fill='%23000'/%3E%3C/svg%3E") no-repeat center/100% 100%; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 20' preserveAspectRatio='none'%3E%3Cpath d='M0,0 C16,0 32,20 50,20 C68,20 84,0 100,0 L100,20 L0,20 Z' fill='%23000'/%3E%3C/svg%3E") no-repeat center/100% 100%; } /* 写真の直後の本文は、波と文字がぶつからないよう上の余白を少し詰める */ /* 写真の波と本文が近すぎないよう、上の余白を大きくとる */ .page-body-first { background:var(--paper); padding-top:clamp(96px,13vw,190px); } @media (max-width:800px) { .page-hero-photo { --page-curve:clamp(18px,5vw,34px); } .page-cover { --hdr:67px; } /* 縦長の枠になると横が大きく切れる。手はもとの写真の右寄りにあるので、 右端に寄せて赤ちゃんの手まで入るようにする */ .page-hero-photo img { object-position:right 46%; } } /* ============================================================ 下層ページのヘッダーも透明にして、ページタイトルの色を画面の上まで 届かせる。透明にするには流れから外す（fixed）必要があるので、 そのぶんの高さは最初のセクションの上余白で埋め合わせる ============================================================ */ body.np:not(.is-top) .site-header { position:fixed; top:0; left:0; right:0; background:transparent; border-bottom:0; box-shadow:none; } body.np:not(.is-top) .page-head { padding-top:calc(82px + clamp(60px,9vw,110px)); } /* ヘッダーが浮いたぶん、画面1つぶんの高さから引く必要がなくなる */ body.np:not(.is-top) .page-cover { --hdr:0px; } @media (max-width:800px) { body.np:not(.is-top) .page-head { padding-top:calc(67px + clamp(60px,9vw,110px)); } } /* ============================================================ 安心リストの説明文だけ、スマホで文節（単語のかたまり）折り返しをやめて 行の端まで詰める。全体設定の word-break:auto-phrase は、幅が狭いと 文節ごとに改行するため、ここは右端が大きくガタついて読みにくかった。 項目名（dt）のほうは、これまでどおり文節で折り返す ＝「日本語的に自然な位置で改行してほしい」という指定を残す ============================================================ */ @media (max-width:800px) { .assurance-list dd { word-break:normal; } } /* そのほかの商品の説明文：句点で区切ったかたまり（.nb）どうしで改行する。 かたまりの中は文節で折り返さず行の端まで詰める（スマホは2列で幅が 狭いため、文節で折り返すと右端のガタつきが大きくなる）。 価格の行はこれまでどおり（「（税込・／送料込み）」で折り返す） */ .also-list li > span .nb { display:inline; word-break:normal; overflow-wrap:normal; text-wrap:wrap; } /* 贈りものセクションの本文：句点で区切ったかたまりどうしで改行する */ .gift-cta-body p .nb { display:inline-block; } /* こだわりアイコンのうち6個は画像（PNG）。SVGと同じ大きさ・同じ余白で並べる。 img には stroke/fill が効かないので、線の色は画像そのものに焼き込んである */ img.reason-icon { object-fit:contain; } /* totteについてページの「Thoughts」だけ中央揃え。 ページ内の他のセクション（Our promise 以降）は左揃えのまま */ .page-body-first .prose { text-align:center; } /* totteについてページの本文は、句点で区切ったかたまり（.nb）どうしで改行する。 文の切れ目が行の途中に埋もれないようにするため */ .is-about .prose p .nb { display:inline-block; } /* totteについてページの下部セクション（Our promise 以降）は、見出しだけ中央揃え。 本文は左揃えのまま残して、長めの文章の読みやすさを落とさないようにしている */ .is-about .page-body:not(.page-body-first) .prose > .eyebrow, .is-about .page-body:not(.page-body-first) .prose > h2 { text-align:center; } /* WHAT'S NEXT：成長していく手の大きさが一目で伝わる写真 */ /* --- about：「赤ちゃんの手から、家族の手へ。」の4枚 赤ちゃんの手→きょうだいの手→親子の手→夫婦の手を、不定形な丸（ブロブ）で横並びに。 ゴールドの線でつなぎ、スクロールで1枚ずつふわっと現れる。 ブロブの形は .growth-blob（トップページ）と同じ考え方（border-radiusで作る不定形の丸）*/ .hand-journey { position:relative; max-width:1100px; margin:clamp(72px,8vw,130px) auto clamp(72px,8vw,130px); } .hand-journey-line { position:absolute; inset:0; width:100%; height:100%; overflow:visible; pointer-events:none; z-index:0; } .hand-journey-line path { fill:none; stroke:var(--accent); stroke-width:1; stroke-linecap:round; stroke-dasharray:var(--hj-len,1500); stroke-dashoffset:var(--hj-len,1500); transition:stroke-dashoffset 1.8s cubic-bezier(.22,1,.36,1); } .hand-journey.is-in .hand-journey-line path { stroke-dashoffset:0; } .hand-journey-line-v { display:none; } .hand-journey-list { position:relative; z-index:1; display:flex; justify-content:space-between; align-items:center; list-style:none; margin:0; padding:0; } /* --hj-x / --hj-y は、写真ごとの「ずらし量」。登場アニメーションの transform と 混ざらないよう、ずらし量を変数に持たせて両方の状態で足している */ .hand-journey-item { --hj-x:0px; --hj-y:0px; flex:0 0 auto; text-align:center; opacity:0; filter:blur(6px); transform:translate(var(--hj-x), calc(var(--hj-y) + 22px)); transition:opacity 1s ease, filter 1s ease, transform 1s ease; } .hand-journey.is-in .hj-1 { transition-delay:.05s; } .hand-journey.is-in .hj-2 { transition-delay:.5s; } .hand-journey.is-in .hj-3 { transition-delay:.95s; } .hand-journey.is-in .hj-4 { transition-delay:1.4s; } .hand-journey.is-in .hand-journey-item { opacity:1; filter:blur(0); transform:translate(var(--hj-x), var(--hj-y)); } .hand-journey-item figure { position:relative; margin:0 auto; } .hand-journey-item img { position:relative; display:block; width:100%; height:100%; object-fit:cover; } /* サイズと不定形の丸みを1枚ずつ変える */ .hj-1 { width:clamp(150px,17vw,230px); --hj-y:30px; } .hj-1 figure { width:100%; aspect-ratio:1 / 1; } .hj-1 img { border-radius:62% 38% 55% 45% / 45% 60% 40% 55%; } .hj-2 { width:clamp(180px,20.5vw,278px); --hj-y:-26px; } .hj-2 figure { width:100%; aspect-ratio:1 / 1; } .hj-2 img { border-radius:48% 52% 40% 60% / 58% 44% 56% 42%; } .hj-3 { width:clamp(180px,20.5vw,278px); --hj-y:34px; } .hj-3 figure { width:100%; aspect-ratio:1 / 1; } .hj-3 img { border-radius:42% 58% 57% 43% / 52% 48% 52% 48%; } .hj-4 { width:clamp(150px,17vw,230px); --hj-y:-20px; } .hj-4 figure { width:100%; aspect-ratio:1 / 1; } .hj-4 img { border-radius:60% 40% 45% 55% / 48% 58% 42% 52%; } @media (max-width:700px) { .hand-journey { margin-top:clamp(56px,10vw,80px); margin-bottom:clamp(56px,10vw,80px); } .hand-journey-line-h { display:none; } .hand-journey-line-v { display:block; } .hand-journey-list { flex-direction:column; gap:36px; } /* スマホは写真を少し小さめに（もとの約80%）*/ .hj-1, .hj-4 { width:min(46vw,168px); } .hj-2, .hj-3 { width:min(54vw,200px); } /* 縦並びのときは、上下ではなく左右に少しずらす */ .hj-1 { --hj-y:0px; --hj-x:-22px; } .hj-2 { --hj-y:0px; --hj-x:20px; } .hj-3 { --hj-y:0px; --hj-x:-20px; } .hj-4 { --hj-y:0px; --hj-x:22px; } } /* 動きを減らす設定の人には、線の描画と登場アニメーションをやめて最初から表示する */ @media (prefers-reduced-motion:reduce) { .hand-journey-line path { transition:none; stroke-dashoffset:0; } .hand-journey-item { transition:none; opacity:1; filter:blur(0); transform:none; } } /* ── totteについてページ Thoughts：文章を固定して写真を出し、次の文章がカードで重なる ── .tstage が「長い坂道」。その中の .tstage-pin が画面に貼りつき、 坂道を下るあいだに「写真4枚 → 次の文章カード3枚」が順に進む。 進み具合の計算と、カードの位置は script.js が行う。 JSが動かない／動きを減らす設定のときは .is-stage-on が付かず、 ふつうの縦並び（文章→写真→文章…）になる */ .tintro { margin-bottom:clamp(96px,10vw,160px); } .tcard + .tcard { margin-top:96px; } .tphoto { margin:56px auto; max-width:min(420px,78%); border-radius:18px; overflow:hidden; } .tphoto img { display:block; width:100%; height:auto; border-radius:inherit; } /* ここから下が演出ありのときだけ効く */ /* 写真を画面の端まで使えるように、ステージだけセクションの左右余白の外へ出す。 文章カード側で同じ余白を取り直すので、文章の幅は今までどおり。 余白の値（--tpad）は画面幅で変わるため、script.js が実測して入れている （決め打ちにすると値がズレて横スクロールが出る）*/ .is-stage-on .tstage { position:relative; margin-inline:calc(-1 * var(--tpad, 0px)); } .is-stage-on .tstage-pin { position:sticky; top:0; height:100lvh; overflow:hidden; } /* カードは画面いっぱい。同じ位置で前後を重ね、スクロール量に応じて ぼかしながらクロスフェードする */ .is-stage-on .tcard { position:absolute; inset:0; margin:0; padding:0 var(--tpad, 0px); display:flex; align-items:center; justify-content:center; opacity:0; filter:blur(7px); transform:none; will-change:opacity, filter; pointer-events:none; } .is-stage-on .tcard .prose { padding:26px 22px; background:var(--paper); } /* 1枚目のカードだけは背景の写真が透けて見える場面なので、白い四角で 写真がスパッと切られないよう、まわりに白いぼかしを広げて溶け込ませる */ .is-stage-on .tcard-0 .prose { box-shadow:0 0 64px 56px var(--paper); } .is-stage-on .tcard-1, .is-stage-on .tcard-2, .is-stage-on .tcard-3, .is-stage-on .tcard-4 { background:var(--paper); } .is-stage-on .tcard-0 { z-index:3; opacity:1; filter:blur(0); } .is-stage-on .tcard-1 { z-index:4; } .is-stage-on .tcard-2 { z-index:5; } .is-stage-on .tcard-3 { z-index:6; } .is-stage-on .tcard-4 { z-index:7; } /* Thoughtsの固定カード内テキストも、カードが画面へ入ったところで 下から浮かび、ぼかしがほどけながら順番に現れる */ .is-stage-on .tcard .prose > h2, .is-stage-on .tcard .prose > p { opacity:0; translate:0 28px; filter:blur(9px); will-change:opacity, translate, filter; } .is-stage-on .tcard.is-text-in .prose > h2, .is-stage-on .tcard.is-text-in .prose > p { opacity:1; translate:0 0; filter:blur(0); transition: opacity 1.05s cubic-bezier(.33,0,.2,1) var(--about-text-delay, 0ms), translate 1.15s cubic-bezier(.33,0,.2,1) var(--about-text-delay, 0ms), filter 1.3s cubic-bezier(.33,0,.2,1) var(--about-text-delay, 0ms); } /* 最初のカードは、サブタイトルと本文をゆったり読ませる */ .thoughts-section.is-stage-on .tcard-0 .about-opening-title { margin:0 0 38px; color:var(--ink); font:500 clamp(24px,2.4vw,34px)/1.6 var(--serif); letter-spacing:.1em; } .thoughts-section.is-stage-on .tcard-0 .prose p { margin-bottom:32px; font-size:clamp(17px,1.35vw,21px); line-height:2.55; letter-spacing:.035em; opacity:1; translate:0 0; filter:none; transition:none; } .thoughts-section.is-stage-on .tcard-0 .prose p:last-child { margin-bottom:0; } /* 2枚目の見出し・本文は、1枚目と同じ文字サイズ・行間にそろえる */ .thoughts-section.is-stage-on .tcard-1 .policy-h { margin:0 0 38px; color:var(--ink); font:500 clamp(24px,2.4vw,34px)/1.6 var(--serif); letter-spacing:.1em; } .thoughts-section.is-stage-on .tcard-1 .prose p { margin-bottom:32px; font-size:clamp(17px,1.35vw,21px); line-height:2.55; letter-spacing:.035em; } .thoughts-section.is-stage-on .tcard-1 .prose p:last-child { margin-bottom:0; } .thoughts-section.is-stage-on .tcard-1 .about-title-line { white-space:nowrap; } /* 最初の文章カード：指定写真を画面の左端・上下いっぱいに敷く */ .thoughts-section.is-stage-on .tcard-0 .about-opening-photo { position:absolute; z-index:0; inset:0 auto 0 0; width:52vw; height:100%; margin:0; overflow:hidden; opacity:.62; pointer-events:none; } .thoughts-section.is-stage-on .tcard-0 .about-opening-photo img { width:100%; height:100%; object-fit:cover; object-position:center; } /* 写真の右側だけ輪郭をぼかしてから白へ溶かし、左側は鮮明に残す */ .thoughts-section.is-stage-on .tcard-0 .about-opening-photo::before { content:""; position:absolute; inset:0 0 0 auto; width:48%; -webkit-backdrop-filter:blur(18px); backdrop-filter:blur(18px); -webkit-mask-image:linear-gradient(to right, transparent, #000 68%); mask-image:linear-gradient(to right, transparent, #000 68%); } .thoughts-section.is-stage-on .tcard-0 .about-opening-photo::after { content:""; position:absolute; inset:0; background:linear-gradient(to right, transparent 42%, rgba(255,255,255,.22) 58%, rgba(255,255,255,.78) 82%, #fff 100%); } .thoughts-section.is-stage-on .tcard-0 .prose { position:relative; z-index:1; background:transparent; box-shadow:none; } @media (max-width:700px) { .thoughts-section.is-stage-on .tcard-0 .about-opening-photo { width:72vw; opacity:.48; } .thoughts-section.is-stage-on .tcard-0 .about-opening-photo::after { background:linear-gradient(to right, rgba(255,255,255,.06), rgba(255,255,255,.28) 46%, rgba(255,255,255,.82) 76%, #fff 100%); } } /* 2枚目：写真を右端へ置き、1枚目と左右対称に左側をぼかして白へ溶かす */ .thoughts-section.is-stage-on .tcard-1 .about-slide-photo-right { position:absolute; z-index:0; inset:0 0 0 auto; width:48vw; height:100%; margin:0; overflow:hidden; opacity:.62; pointer-events:none; transform:translateX(80px); } .thoughts-section.is-stage-on .tcard-1 .about-slide-photo-right img { width:100%; height:100%; object-fit:cover; object-position:30% center; } .thoughts-section.is-stage-on .tcard-1 .about-slide-photo-right::before { content:""; position:absolute; inset:0 auto 0 0; width:48%; -webkit-backdrop-filter:blur(18px); backdrop-filter:blur(18px); -webkit-mask-image:linear-gradient(to left, transparent, #000 68%); mask-image:linear-gradient(to left, transparent, #000 68%); } .thoughts-section.is-stage-on .tcard-1 .about-slide-photo-right::after { content:""; position:absolute; inset:0; background:linear-gradient(to left, transparent 42%, rgba(255,255,255,.22) 58%, rgba(255,255,255,.78) 82%, #fff 100%); } .thoughts-section.is-stage-on .tcard-1 .prose { position:relative; z-index:1; background:transparent; box-shadow:none; } @media (max-width:700px) { .thoughts-section.is-stage-on .tcard-1 .about-slide-photo-right { width:66vw; opacity:.48; } .thoughts-section.is-stage-on .tcard-1 .policy-h { margin-bottom:28px; font-size:clamp(22px,6.4vw,27px); } .thoughts-section.is-stage-on .tcard-1 .about-slide-photo-right::after { background:linear-gradient(to left, rgba(255,255,255,.06), rgba(255,255,255,.28) 46%, rgba(255,255,255,.82) 76%, #fff 100%); } } /* 最初のカードは、各フレーズの見え方をscript.jsからスクロール量で直接制御する */ .thoughts-section.is-stage-on .tcard-0 .about-scroll-segment { display:inline-block; opacity:0; translate:0 26px; filter:blur(9px); will-change:opacity, translate, filter; } .thoughts-section.is-stage-on .tcard-0.is-opening-text-in .about-scroll-segment { opacity:1; translate:0 0; filter:blur(0); transition: opacity 1.65s cubic-bezier(.33,0,.2,1) var(--about-segment-delay, 0ms), translate 1.85s cubic-bezier(.33,0,.2,1) var(--about-segment-delay, 0ms), filter 2.1s cubic-bezier(.33,0,.2,1) var(--about-segment-delay, 0ms); } /* 2〜4枚目も最初の画面と同じく、見出しから各文へ順番に 下からにじみながら現れる。カード自体のクロスフェードは維持する */ .thoughts-section.is-stage-on .tcard:not(.tcard-0) .prose > h2, .thoughts-section.is-stage-on .tcard:not(.tcard-0) .prose > p { opacity:1; translate:0 0; filter:none; transition:none; } .thoughts-section.is-stage-on .tcard:not(.tcard-0) .about-card-segment { display:inline-block; opacity:0; translate:0 26px; filter:blur(9px); will-change:opacity, translate, filter; } .thoughts-section.is-stage-on .tcard:not(.tcard-0).is-text-in .about-card-segment { opacity:1; translate:0 0; filter:blur(0); transition: opacity 1.65s cubic-bezier(.33,0,.2,1) var(--about-segment-delay, 0ms), translate 1.85s cubic-bezier(.33,0,.2,1) var(--about-segment-delay, 0ms), filter 2.1s cubic-bezier(.33,0,.2,1) var(--about-segment-delay, 0ms); } @media (prefers-reduced-motion:reduce) { .is-stage-on .tcard .prose > h2, .is-stage-on .tcard .prose > p { opacity:1; translate:0 0; filter:none; } } /* 写真は固定された文章の周りに散らす。位置も大きさも狙ってばらしてある */ /* 出るときは0.42秒、引っ込むときは0.5秒（消えぎわはゆっくり余韻を残す）。 引っ込みきる前に次が出るので、前後の写真がゆるくすれ違って見える。 次の写真が出るまでに前の写真が消えきるようにするため、 引っ込む側の指定を素の .tphoto に書いている */ .is-stage-on .tphoto { position:absolute; z-index:2; margin:0; max-width:none; opacity:0; translate:0 22px; transition:opacity .5s ease-out, translate .5s ease-out; } .is-stage-on .tphoto.is-in { opacity:1; translate:0 0; transition:opacity .42s cubic-bezier(.33,0,.2,1), translate .42s cubic-bezier(.33,0,.2,1); } /* 写真のまわりを白くぼかして、背景に溶け込ませる。 四辺それぞれに「外側が白 → 内側にいくほど透明」のグラデーションを重ねている。 背景が白（--paper）である前提の作り。角丸は輪郭がぼけるのでほぼ見えなくなる */ .is-stage-on .tphoto::after { content:""; position:absolute; inset:0; pointer-events:none; background: linear-gradient(to right, var(--paper), rgba(255,255,255,0) 9%), linear-gradient(to left, var(--paper), rgba(255,255,255,0) 9%), linear-gradient(to bottom, var(--paper), rgba(255,255,255,0) 8%), linear-gradient(to top, var(--paper), rgba(255,255,255,0) 8%); } /* 出る順番＝①赤ちゃんの手（左上・大）→②手を重ねる（右下・大）→③手型を持つ（左下）→④完成した手型（左上）。 1枚ずつ出て引っ込むので、位置が重なっても問題ない。 文章パネルにかかった分は、パネルのうしろに回り込む */ .is-stage-on .tphoto-1 { width:min(34vw,430px); left:2%; top:10%; } .is-stage-on .tphoto-2 { width:min(28vw,360px); right:2%; bottom:4%; } .is-stage-on .tphoto-3 { width:min(24vw,310px); left:3%; bottom:5%; } /* 上に置く2枚（1枚目・4枚目）は、固定ヘッダー（PC約82px / スマホ約67px）より 下から始める。上に寄せすぎるとロゴやボタンの下をくぐって見た目が散らかる */ .is-stage-on .tphoto-4 { width:min(22vw,285px); right:4%; top:11%; } /* スマホは文章が画面いっぱいに広がるので、写真は上下の空きに小さく置く */ @media (max-width:700px) { .is-stage-on .tcard .prose { padding:18px 2px; } /* 画面が縦に短い機種でもカードが切れないよう、カードの中だけ少し詰める */ .is-stage-on .tcard .prose p { font-size:15px; line-height:1.9; } .thoughts-section.is-stage-on .tcard-0 .about-opening-title { margin-bottom:28px; font-size:clamp(22px,6.4vw,27px); } .is-stage-on .tcard .policy-h { margin-bottom:10px; font-size:clamp(20px,5.6vw,27px); } .is-stage-on .tphoto-1 { width:62%; left:3%; top:9%; } .is-stage-on .tphoto-2 { width:54%; right:3%; bottom:1.5%; } .is-stage-on .tphoto-3 { width:46%; left:4%; bottom:2%; } .is-stage-on .tphoto-4 { width:38%; right:4%; top:9%; } } /* ── 実機（Safari）でも文節で折り返すための指定（2026-09-12） ── 200行目付近の `word-break:auto-phrase` はChromeにしか無い機能で、 Safari＝iPhone実機では効かず、単語の途中で改行されてしまっていた。 そこで index.html の本文には文節の切れ目に （改行してよい印）を入れてある。 を含む要素は keep-all にして、「 の位置以外では改行しない」に切り替える。 これでChromeでもSafariでも同じ位置で折り返る。 overflow-wrap:anywhere は保険。塊ひとつが幅に収まらないときだけ、はみ出さずに折る */ p:has(> wbr), li:has(> wbr), h1:has(> wbr), h2:has(> wbr), h3:has(> wbr), dt:has(> wbr), dd:has(> wbr), figcaption:has(> wbr), summary:has(> wbr), strong:has(> wbr), span:has(> wbr), em:has(> wbr), a:has(> wbr) { /* .kit-lead など「auto-phrase が不自然に割れるから normal に戻す」個別指定が ファイルの手前にあり、そちらの方が優先度が高い。 方式ならその問題は 起きないので、!important でこちらを通す */ word-break: keep-all !important; overflow-wrap: anywhere !important; } /* よくあるご質問の回答（トップページ・FAQページの両方）： 句点（。）のところで改行し、文の中は行の端まで詰める。 全体設定の word-break:auto-phrase のままだと文節ごとに折り返して行が短くなりすぎるため、 回答だけ normal に戻したうえで、文のかたまり（.nb）を inline-block にしている。 .nb はスクリプトが自動で入れる（_work/apply2.js の SENT 指定）*/ .faq-list p { word-break:normal; text-wrap:wrap; } /* 句点ごとの文を回答欄いっぱいのブロックにし、右側へ不要な空きを残さない。 文どうしはブロック境界で改行になり、文中は通常の折り返しにする */ .faq-list p .nb { display:block; width:100%; word-break:normal; text-wrap:wrap; } /* FAQページのスマホ表示は、回答だけ右余白を小さくして本文幅を広げる */ @media (max-width:560px) { .prose .faq-list p { padding-right:8px; } } /* つくりかたのリード文：読点（、）と句点（。）のところでだけ改行し、 かたまりの中は行の端まで詰める。スクリプトが .nb で包む（_work/apply2.js の SENT 指定）*/ .howto-lead .nb { display:inline-block; word-break:normal; } /* つくりかたの注記：元から句点ごとに .nb で区切ってある。 iPhoneで「必要な粉／と水の量も」のように早めに分断されないよう、 そのかたまりの中は通常の折り返しで行の端まで詰める */ .howto .note { text-wrap:wrap; } .howto .note .nb { word-break:normal; text-wrap:wrap; } /* ファーストビューの小見出し：幅375px以上では読点で改行する （「赤ちゃんの360°立体手型キット」を1つのかたまりにして、丸ごと次の行へ送る）。 この文字列は301px必要で、360px以下の機種では入りきらず単語の途中で切れてしまうため、 狭い機種では指定を外して今までどおりの折り返しに任せる */ @media (min-width:375px) { .hero-sub-b { display:inline-block; } } /* こだわりのPoint 1〜3の説明文：文の切れ目は
で決まっているので、 その中は文節で折り返さず行の端まで詰める（早い位置で折り返して 1行目がすかすかになるのを防ぐ） */ .point-list li > span { word-break:normal; } /* Point 1 の1文目だけ、折り返しが必要になったときの位置を決めておく。 1行に収まるうちは1行、入らなくなったら「赤ちゃんとの毎日は／予定どおりに…」で折る */ .point-list .pb { display:inline-block; } /* 説明文の .pb は途中で割らず、幅が足りないときだけ読点後の .pb 境界で折り返す */ .point-list li > span .pb { white-space:nowrap; } /* かたまりの中では折り返さない（読点や文節の位置でだけ折れるようにする）*/ .point-list strong .pb { white-space:nowrap; } /* 折り返し用に入れた span に .check-list span（13px・グレー）が当たって カードタイトルが小さくなるのを防ぐ。タイトルは strong の 20px のまま */ .point-list strong .pb { font-size:inherit; color:inherit; font-weight:inherit; letter-spacing:inherit; } .point-list strong .kt { font-size:inherit; color:inherit; font-weight:inherit; letter-spacing:inherit; } /* えらんだことの見出し「おうちでつくる、にこだわりました」： 読点のところで2つに分けてあり（h2 .nb が inline-block）、 1行に収まるうちは1行、入らなくなったら読点で折り返す。 かたまりの中は文節で折り返さず端まで詰める */ /* 見出し全体に text-wrap:balance（行の長さを揃える）がかかっているため、 何もしないと「おうちでつく／る、」のようにかたまりの中まで割られてしまう。 かたまりの中では折り返さないようにして、読点のところでだけ折れるようにする */ #athome-title .nb { white-space:nowrap; } /* Thoughts 3枚目：2枚目と本文の文字サイズ・行間をそろえ、 文中のキーフレーズだけサブタイトルと同じ明朝体・大きさにする */ .thoughts-section.is-stage-on .tcard-2 .prose p { margin-bottom:0; font-size:clamp(17px,1.35vw,21px); line-height:2.55; letter-spacing:.035em; } .thoughts-section.is-stage-on .tcard-2 .about-inline-subtitle { display:inline-block; padding-block:clamp(12px,1.4vw,20px); color:var(--ink); font:500 clamp(24px,2.4vw,34px)/1.6 var(--serif); letter-spacing:.1em; } .thoughts-section.is-stage-on .tcard-2 .about-name-em { font-weight:700; } .about-slide-corner { max-width:min(360px,78%); margin:40px auto; overflow:hidden; } .about-slide-corner img { display:block; width:100%; height:auto; } .thoughts-section.is-stage-on .tcard-2 .about-slide-corner { position:absolute; z-index:0; margin:0; max-width:none; opacity:.48; pointer-events:none; } .thoughts-section.is-stage-on .tcard-2 .about-slide-corner img { width:100%; height:100%; object-fit:cover; } .thoughts-section.is-stage-on .tcard-2 .about-slide-corner::after { content:""; position:absolute; inset:0; pointer-events:none; } .thoughts-section.is-stage-on .tcard-2 .about-slide-corner-top-left { left:0; top:8%; width:min(28.8vw,360px); aspect-ratio:3 / 4; } .thoughts-section.is-stage-on .tcard-2 .about-slide-corner-top-left::after { background: linear-gradient(to left, var(--paper), transparent 48%), linear-gradient(to top, var(--paper), transparent 40%); } .thoughts-section.is-stage-on .tcard-2 .about-slide-corner-bottom-right { right:0; bottom:3%; width:min(36vw,456px); aspect-ratio:4 / 3; } .thoughts-section.is-stage-on .tcard-2 .about-slide-corner-bottom-right::after { background: linear-gradient(to right, var(--paper), transparent 48%), linear-gradient(to bottom, var(--paper), transparent 40%); } .thoughts-section.is-stage-on .tcard-2 .prose { position:relative; z-index:1; background:transparent; } @media (max-width:700px) { .thoughts-section.is-stage-on .tcard-2 .about-inline-subtitle { font-size:clamp(22px,6.4vw,27px); } .thoughts-section.is-stage-on .tcard-2 .about-slide-corner { opacity:.34; } .thoughts-section.is-stage-on .tcard-2 .about-slide-corner-top-left { left:-8vw; top:8%; width:56.4vw; } .thoughts-section.is-stage-on .tcard-2 .about-slide-corner-bottom-right { right:-8vw; bottom:1.5%; width:64.8vw; } } /* 「商品詳細を見る」の説明文：句点（。）のところでだけ改行し、文の中は行の端まで詰める。 text-wrap:pretty はiPhoneで行末に余白を残して早めに折り返すため、この欄だけ通常の折り返しに戻す。 文のかたまり（.nb）はスクリプトが自動で入れる（_work/apply2.js の SENT 指定） */ .kit-spec dd { word-break:normal; text-wrap:wrap; } .kit-spec dd .nb { display:inline-block; word-break:normal; text-wrap:wrap; } /* 「はじめてでも、安心して。」の説明文だけ text-wrap:pretty を解除する。 pretty は「最後の行が短く残るのを避けるため前の行から文字を引き戻す」機能で、 Safari（iPhone）は引き戻しが強く、余裕があるのに改行されて見えるため。 ※同じ指定は 207行目でサイト全体の p/li/dd/summary に効いている */ .assurance-list dd { text-wrap:wrap; } /* --- about：Story の最後の画面を止めたまま、 それ以降のページ全体が下からせり上がって重なる --- */ /* Story の坂道（.tstage）の末尾に1画面ぶんの余白を script.js で足してあり、 以降のページ全体をまとめて1画面ぶん引き上げて、その余白の上に重ねている。 セクションごとに区切らず1枚の続きものとして重ねるので、境目に線は出ない。 JSが動かない／動きを減らす設定のときは .is-stage-on が付かないので通常表示のまま */ .thoughts-section.is-stage-on { padding-bottom:0; } .is-stage-on + .about-after { position:relative; z-index:3; margin-top:-100lvh; background:var(--paper); /* せり上がってくる紙の上の角を少しだけ丸める */ border-radius:clamp(28px,4.5vw,56px) clamp(28px,4.5vw,56px) 0 0; /* 背景はページ上部の見出し帯と同じ淡いピンク */ background:#fbf4f3; } /* ピンクにするのは、せり上がって最初に見える2セクション （「totte」という名前のこと／何年経っても）だけ。 3つめ以降の通常セクションは従来どおり白に戻す */ .is-stage-on + .about-after > .page-body:not(.alt):not(.brand-section):nth-child(n+3) { background:var(--paper); } /* ブランド概要だけは淡いピンクの背景にする（バルさん指示）*/ .brand-section { background:#fbf4f3; } /* 「totte」という名前のこと の上に余白を240px足す */ .about-after > .page-body:first-child { padding-top:calc(clamp(80px,12vw,170px) + 240px); } /* --- about：「「totte」という名前の由来」セクション。 左に文章、右に正方形の写真を2枚（左上・右下）、角が重なるように配置 --- */ .name-origin h2 { margin-bottom:clamp(40px,5.5vw,72px); text-indent:-.28em; } .is-about .name-origin .prose > h2, .is-about .name-origin .prose > .eyebrow { text-align:left !important; } .name-origin-grid { display:grid; grid-template-columns:minmax(0,1fr) minmax(420px,1fr); gap:clamp(36px,4vw,60px); align-items:center; max-width:1100px; margin:0 auto; } .name-origin .prose { max-width:none; margin:0; } /* 正方形の見えない箱を1つ用意し、その四隅を基準に2枚を配置する。 箱そのものは正方形（aspect-ratio:1/1）にして、左上・右下の重なり方が 画面幅が変わっても常に同じ比率になるようにしている */ .name-photos { position:relative; width:100%; aspect-ratio:1 / 1; } .name-photo { position:absolute; margin:0; width:60%; aspect-ratio:1 / 1; border-radius:4px; overflow:hidden; } .name-photo img { display:block; width:100%; height:100%; object-fit:cover; } .name-photo-a { left:0; top:0; z-index:1; } .name-photo-b { right:0; bottom:0; z-index:2; } @media (max-width:1200px) { .name-origin-grid { grid-template-columns:1fr; gap:40px; } .name-origin .prose { width:100%; max-width:760px; margin:0 auto; } .name-photos { width:min(100%,520px); margin:0 auto; } } @media (min-width:701px) and (max-width:1200px) { .name-origin .prose { text-align:center; } .is-about .name-origin .prose > h2, .is-about .name-origin .prose > .eyebrow { text-align:center !important; } .name-origin h2 { text-indent:0; } } /* --- about：「手型だけではなく、その日の記憶まで。」セクション。 左に写真、右に見出し＋本文の2カラム --- */ /* 上下の余白はトップページの MESSAGE セクションと同じ大きさに（.page-body の56-90pxではなく、.section-padの80-170pxを使う）*/ .name-origin, .promise-section, .next-section, .together-section, .brand-section { padding-top:clamp(80px,12vw,170px); padding-bottom:clamp(80px,12vw,170px); } /* 「赤ちゃんの手から、家族の手へ。」だけは写真を大きく見せたいので、幅を広げて中央揃えにする */ .next-section .prose { max-width:1100px; text-align:center; } /* 見出しは、幅に余裕があれば1行。入らなくなったら読点のところで2行に折り返す */ #next-title .nb { white-space:nowrap; } /* 本文は1文ずつ改行する（句点のところで折り返す）*/ .next-section .prose p .nb { display:block; width:100%; word-break:normal; text-wrap:wrap; } .promise-grid { display:grid; grid-template-columns:minmax(420px,1fr) minmax(0,1fr); gap:clamp(36px,4vw,60px); align-items:center; max-width:1100px; margin:0 auto; } .promise-photo { margin:0; } .promise-photo img { display:block; width:100%; height:100%; aspect-ratio:4 / 5; object-fit:cover; border-radius:14px; } .promise-section .prose { max-width:none; margin:0; } .promise-tablet-break { display:none; } .is-about .promise-section .prose > h2, .is-about .promise-section .prose > .eyebrow { text-align:left !important; } @media (max-width:1000px) { .promise-grid { grid-template-columns:1fr; gap:32px; } .promise-photo { width:min(100%,520px); margin:0 auto; } /* 縦積みのときは、先に見出しと本文を読んでから写真を見せる */ .promise-photo { order:1; } } @media (min-width:701px) and (max-width:1000px) { .promise-section .prose { width:100%; max-width:760px; margin:0 auto; text-align:center; } .is-about .promise-section .prose > h2, .is-about .promise-section .prose > .eyebrow { text-align:center !important; } .promise-tablet-break { display:block; } } /* --- about：「ひとつひとつ、地域の手とともに。」左に文章、右に写真の2カラム --- */ .together-grid { display:grid; grid-template-columns:1.05fr 1fr; gap:clamp(36px,6vw,84px); align-items:center; max-width:1100px; margin:0 auto; } .together-section .prose { max-width:none; margin:0; } .is-about .together-section .prose > h2, .is-about .together-section .prose > .eyebrow { text-align:left !important; } .together-photo { margin:0; overflow:hidden; border-radius:4px; } .together-photo img { display:block; width:100%; height:auto; } @media (max-width:900px) { .together-grid { grid-template-columns:1fr; gap:36px; } } /* --- about：ブランド概要。罫線が文字よりずっと右まで伸びて左寄りに見えるため、 リストの幅を中身に合わせて狭め、ブロックごと中央に置く（文字は左揃えのまま）--- */ .brand-section .spec-list { max-width:440px; margin-inline:auto; } /* --- 締めのCTAを写真背景にする仕組みは、贈りものページと共通の .page-cta-photo / .page-cta-bg / .page-cta-body を使う（下のギフト用ブロックに定義）--- */ .is-about .page-cta h2 { margin-bottom:34px; font-size:clamp(28px,4vw,40px); } /* ============================================================ 贈りものページ（2026-09 改訂） ・タイトル下の写真は about と同じ .page-cover を使う。写真は正方形で 家族の顔が上半分にあるので、スマホでも中央寄せのまま少し上を見せる （about 用の「右寄せ」指定より後ろに書いて上書きする） ・場面（SCENE）ごとに写真＋本文の2列。奇数・偶数で写真の左右を入れ替える ============================================================ */ /* 写真は正方形で、上に両親の頭、下に箱を開ける手がある。about と同じ 「画面1つぶんに収める」高さだとPCで上下が大きく切れて頭も手も見えなく なるので、このページだけ画面の高さに縛らず、写真の枠を 3:2 まで縦に広げる */ .is-gift .page-cover { min-height:0; } .is-gift .page-cover .page-hero-photo { flex:0 0 auto; height:auto; aspect-ratio:3 / 2; } .is-gift .page-hero-photo img { object-position:center 39%; } @media (max-width:800px) { /* スマホは縦長の枠になり、正方形の写真は左右が切れる。家族3人と箱が 中央に集まるよう、枠の縦横比を写真に近づけて中央を見せる */ .is-gift .page-cover .page-hero-photo { aspect-ratio:4 / 5; } .is-gift .page-hero-photo img { object-position:center 45%; } } /* 導入文（Gift scenes）だけ中央揃え。about の Thoughts と同じ見せ方 */ .gift-intro .prose { text-align:center; } .gift-intro .prose p .nb { display:inline-block; } /* 場面：写真と本文を横に並べる。本文側は下層ページの本文幅に合わせて広げすぎない */ .gift-scene { padding-left:clamp(24px,10vw,158px); padding-right:clamp(24px,10vw,158px); padding-top:clamp(56px,7vw,96px); padding-bottom:clamp(56px,7vw,96px); } .gift-scene-inner { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(32px,6vw,80px); align-items:center; max-width:1040px; margin:0 auto; } .gift-scene-photo { margin:0; } .gift-scene-photo img { display:block; width:100%; height:auto; aspect-ratio:4 / 3; object-fit:cover; border-radius:14px; } /* 写真の左右を交互にする（01左・02右・03左・ボックス右）。並び順を変えるだけで、HTMLは同じ順序のまま */ #scene-02 .gift-scene-photo, .gift-box-photo { order:2; } .gift-scene-body h2 { margin-bottom:10px; font-size:clamp(24px,2.6vw,34px); } .gift-scene-body .gift-scene-sub { margin-bottom:22px; color:var(--ink); font-size:16px; letter-spacing:.04em; line-height:1.9; } .gift-scene-body p { margin-bottom:16px; color:var(--ink); font-size:16px; } .gift-scene-body p:last-child { margin-bottom:0; } /* 本文は句点で区切ったかたまり（.nb）どうしで改行する。文の切れ目が行の途中に埋もれないため */ .gift-scene-body p .nb { display:inline-block; } /* 写真の中の見せたい位置。祖母と赤ちゃんが写真の右寄りにあるので、切れないよう右に寄せる */ #scene-02 .gift-scene-photo img { object-position:62% center; } #scene-03 .gift-scene-photo img { object-position:center center; } /* メモリアルボックス：写真＋本文の2列（場面と同じ組み方） */ .gift-box-inner { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(32px,6vw,80px); align-items:center; max-width:1040px; margin:0 auto; } .gift-box-photo { margin:0; } .gift-box-photo img { display:block; width:100%; height:auto; aspect-ratio:4 / 3; object-fit:cover; border-radius:14px; } .gift-box-body h2 { margin-bottom:22px; font-size:clamp(24px,2.6vw,34px); } .gift-box-body h2 .nb { display:inline-block; } .gift-box-body p { margin-bottom:16px; color:var(--ink); font-size:16px; } .gift-box-body p:last-child { margin-bottom:0; } .gift-box-body p .nb { display:inline-block; } /* 贈る前に：本文は句点区切りで改行 */ .gift-before .prose p .nb { display:inline-block; } @media (max-width:800px) { /* スマホは写真を上、本文を下に縦積み。左右入れ替えも解除する */ .gift-scene-inner, .gift-box-inner { grid-template-columns:1fr; gap:26px; } #scene-02 .gift-scene-photo, .gift-box-photo { order:0; } .gift-scene-photo img, .gift-box-photo img { aspect-ratio:3 / 2; } } @media (max-width:560px) { /* 幅が狭いと句点区切りのかたまり（.nb）が1行に収まらず、かえって行数が 増えるので、スマホでは解除してふつうの文節折り返しにもどす */ .gift-scene-body p .nb, .gift-box-body p .nb { display:inline; } /* 導入文（こんな場面で〜の下）だけは、スマホでも文（句点）ごとに行を変える。 3文が続けて折り返されると読みにくかったため */ .gift-intro .prose p .nb { display:block; } /* 文と文のあいだを少しあけて、場面の本文（段落の間隔）に近い読みやすさにする */ .gift-intro .prose p .nb + .nb { margin-top:10px; } /* ギフト対応の冒頭文と、表の下の補足文も、スマホでは文（句点）ごとに行を変える */ .gift-before .prose p .nb { display:block; } } /* 贈りものページの締めのCTA：真っ白だとさみしいので、トップのギフト欄と 同じく写真を全面に敷き、白い透かしを重ねる。.page-cta-photo が付いたときだけ */ .page-cta-photo { position:relative; overflow:hidden; border-top:0; padding-top:clamp(110px,15vw,180px); padding-bottom:clamp(110px,15vw,180px); /* 写真が読み込まれるまでのあいだの下地 */ background-color:#f4efe9; } .page-cta-bg { position:absolute; inset:0; z-index:0; width:100%; height:100%; /* 画面が横に広いほど上下が切れる。下ぞろえだとガラスドームの頭が切れるので、 切り取りを上寄りにして、どの画面幅でもドームが丸ごと入るようにする */ object-fit:cover; object-position:center 40%; } /* 写真の上に重ねる白い透かし。文字が読める明るさまで落とす */ .page-cta-photo::after { content:""; position:absolute; inset:0; z-index:1; background:rgba(255,255,255,.45); pointer-events:none; } .page-cta-body { position:relative; z-index:2; } /* メモリアルボックスの区切り：他のセクションがすべて四角い帯なので、ここだけ 白い帯の上下の縁を半円にふくらませて変化をつける。白は横いっぱいに広げ、 上と下に横長の楕円を半分だけはみ出させる（はみ出したぶんの高さが --bulge）。 前後のセクションと同じベージュを下地にしているので、ふくらみがベージュに食い込んで見える */ .gift-box { --bulge:clamp(60px,9vw,140px); padding:var(--bulge) 0; background:var(--paper2); } .gift-box-panel { position:relative; padding:clamp(40px,6vw,90px) clamp(24px,10vw,158px); background:var(--paper); } .gift-box-panel::before, .gift-box-panel::after { content:""; position:absolute; left:0; right:0; z-index:0; height:calc(var(--bulge) * 2); background:var(--paper); border-radius:50%; } .gift-box-panel::before { top:calc(var(--bulge) * -1); } .gift-box-panel::after { bottom:calc(var(--bulge) * -1); } /* 本文と写真はふくらみの上に載せる */ .gift-box-inner { position:relative; z-index:1; } @media (max-width:800px) { /* スマホは幅が狭いぶん、ふくらみも控えめに */ .gift-box { --bulge:clamp(36px,10vw,56px); } .gift-box-panel { padding:40px 24px; } } /* SCENE の写真：ユーザー加工のギフトボックス型の透過PNG（assets/gift-scene-0x.png）に差し替え。 PNG側で形ができているので、こちらの角丸・トリミングは外して元の縦横比のまま置く */ .gift-scene-photo img { aspect-ratio:auto; object-fit:contain; border-radius:0; } #scene-01 .gift-scene-photo img, #scene-02 .gift-scene-photo img, #scene-03 .gift-scene-photo img { object-position:center; } @media (max-width:800px) { .gift-scene-photo img { aspect-ratio:auto; } .gift-scene-photo { max-width:440px; margin:0 auto; } } /* ギフト対応の表のあとの補足文。注意書きなので本文より小さく、表との間を少しあける */ .gift-before .gift-before-note { margin:22px 0 0; color:var(--muted); font-size:13px; line-height:1.9; } /* ギフト対応の表：項目名の左に線画アイコン。線の色は文字色、太さは細め */ .gift-before .spec-list dt { display:flex; align-items:center; gap:10px; } .gift-ico { flex:0 0 auto; width:22px; height:22px; fill:none; stroke:var(--ink); stroke-width:1.4; stroke-linecap:round; stroke-linejoin:round; opacity:.8; } /* 贈りものページ導入文のマーカー。お客様の声（.voice-em）と同じ金色の帯 */ .gift-em { font-style:normal; font-weight:700; color:var(--ink); -webkit-box-decoration-break:clone; box-decoration-break:clone; background-image:linear-gradient(transparent 58%, rgba(226,192,119,.62) 58%); } /* 締めのCTAの背景写真：スマホでは横が大きく切れるので、右端（手型のドーム）を 基準に見せて、ドームが常に画面内に入るようにする */ @media (max-width:800px) { /* 写真の横 88% の地点（ガラスドームのすぐ右）を基準に見せる。 割合で指定しているので、画面の幅が変わってもドームの位置は変わらない */ .page-cta-bg { object-position:88% bottom; } } /* --- よくある質問／ご購入前にご確認ください： about・贈りものと同じ「タイトル＋写真」のトップにそろえる。 ただし資料的なページなので、写真は画面いっぱいではなく帯の高さにする --- */ .is-faq .page-cover, .is-before .page-cover { min-height:0; } .is-faq .page-cover .page-hero-photo, .is-before .page-cover .page-hero-photo { flex:0 0 auto; height:auto; aspect-ratio:5 / 2; } /* よくある質問の写真は縦横比 3:2。5:2 の枠では上下が切れるので、 切り取りを下げて、手型の指先が上の波にかからないようにする */ .is-faq .page-hero-photo img { object-position:center 40%; } /* ご購入前にの写真も縦横比 3:2。箱の中身が画面の縦いっぱいに写っているので、上下の切れ方が均等になる位置に */ .is-before .page-hero-photo img { object-position:center 40%; } @media (max-width:800px) { /* スマホは横に細長くなりすぎるので、少し縦に伸ばす */ .is-faq .page-cover .page-hero-photo, .is-before .page-cover .page-hero-photo { aspect-ratio:3 / 2; } /* 枠が写真と同じ 3:2 になるので、切り取りは起きない。中央のままでよい */ .is-faq .page-hero-photo img, .is-before .page-hero-photo img { object-position:center center; } } /* about のStory導入：トップページの見出しと本文と同じ、ゆとりのある間隔にする */ .thoughts-section > .tintro > h2 { margin-bottom:clamp(32px,3.6vw,48px); } /* Together本文は文節単位で早めに送らず、行の右端まで使って自然に折り返す */ .together-section .prose > p:not(.eyebrow) { word-break:normal; text-wrap:wrap; } /* Our promise：十分に広い画面だけ引用から続く一文を1行に保ち、中間幅以下は写真とのバランスに合わせて折り返す */ .promise-quote-line { display:inline; } @media (min-width:1400px) { .promise-quote-line { display:inline-block; white-space:nowrap; } } .next-tablet-break { display:none; } /* 幅が狭くなると文の途中で折り返して読みにくいので、1000px以下では 読点のところで行を変える（スマホもふくむ）*/ @media (max-width:1000px) { .next-tablet-break { display:block; } } /* 狭い画面だけの改行（.sp-br）。数字は「この幅以下になったら改行する」という意味で、 その文がちょうど1行に収まらなくなる幅を実測して決めている。文の長さがちがうので、 文ごとに切り替わる幅も変えている（広い画面ではよけいな改行をしない）*/ .sp-br { display:none; } @media (max-width:400px) { .sp-br-400 { display:block; } } @media (max-width:418px) { .sp-br-418 { display:block; } } @media (max-width:700px) { .sp-br-700 { display:block; } } @media (max-width:454px) { .sp-br-454 { display:block; } } @media (max-width:459px) { .sp-br-459 { display:block; } } @media (max-width:493px) { .sp-br-493 { display:block; } } @media (max-width:495px) { .sp-br-495 { display:block; } } @media (max-width:524px) { .sp-br-524 { display:block; } } @media (max-width:526px) { .sp-br-526 { display:block; } } @media (max-width:542px) { .sp-br-542 { display:block; } } @media (max-width:560px) { .sp-br-560 { display:block; } } /* 贈りものページ（スマホ・タブレット幅）：言葉のまとまり（.ph）を途中で切れない1つの単位にする。 単位ごとに行を埋めていき、入らない単位はまるごと次の行へ送られるので、文字の途中で切れない。 Safari（iPhone）は word-break:auto-phrase（Chromeの自動の文節折り返し）に対応していないため、 ブラウザに任せずHTML側で言葉の切れ目を持たせている。PC幅ではこれまでどおり */ @media (max-width:800px) { .is-gift .ph { display:inline-block; } /* サイト全体の text-wrap:pretty は右側に空きがあっても改行するため、 贈りものページの本文だけ、入るだけ詰める通常の折り返しにする */ .is-gift .gift-intro .prose p, .is-gift .gift-scene-body p, .is-gift .gift-box-body p, .is-gift .gift-before .prose p, .is-gift .gift-before .spec-list dd { text-wrap:wrap; } } /* Memorial box の小見出し（.eyebrow）が本文用の色指定に負けて茶色になっていた。 他の小見出し（Gift scenes / Gift service）と同じ金色にそろえる */ .gift-box-body p.eyebrow { color:var(--accent); } /* ============================================================ トップページ・商品の価格まわり（2026-09-18 バルさん指示で刷新） 「販売開始記念価格」を淡いピンクの帯にして、金額を大きなローズ色で見せる。 ローズ（--rose）はブランドの淡いピンク #f6e9e7 と同系の濃い色で、 ここだけに使う。強すぎる赤にすると、サイト全体の柔らかさから浮くため。 ※「12月1日以降は…」の行に打ち消し線は付けない。これは過去の価格ではなく これから上がる価格なので、線を引くと表示が実態と食い違う（景表法の懸念） ============================================================ */ .kit-copy { --rose:#d9607e; } /* 2026-09-18: もう少し明るいピンクに */ /* 帯は金額の行と同じ幅に広げる。.kit-price-block を width:max-content にすると 中で一番広い行（＝金額の行）の幅になり、帯を width:100% で「（税込）」の 右端までぴったり伸ばせる。文字サイズを変えても自動で揃う */ .kit-price-block { width:max-content; max-width:100%; } .kit-price-badge { display:flex; align-items:center; justify-content:center; gap:.6em; width:100%; box-sizing:border-box; /* 文字を大きくするぶん、余白を詰めて帯の高さは変えない */ margin:14px 0 12px; padding:5px 14px; background:var(--rose); border-radius:4px; color:#fff; font-family:var(--serif); font-size:clamp(17px,1.85vw,24px); font-weight:600; letter-spacing:.1em; line-height:1.6; text-wrap:wrap; } .kit-price-badge::before { content:"＼"; } .kit-price-badge::after { content:"／"; } .kit-price-badge::before, .kit-price-badge::after { flex:0 0 auto; font-weight:400; opacity:.9; } /* .kit-copy p:last-child { font-size:16px } が、囲みを付けたことで金額の行にも 当たるようになったため、クラスを3つ重ねて確実に上書きする */ .kit-copy .kit-price-block .kit-price { margin:0 0 4px; color:var(--rose); font-size:clamp(42px,5.6vw,64px); letter-spacing:.02em; } /* 円マークは金額より控えめに。数字を主役にする */ .kit-price .yen { font-size:.58em; margin-right:.04em; vertical-align:.06em; } .kit-price small { color:var(--muted); font-size:clamp(11px,.9vw,13px); letter-spacing:.04em; } @media (max-width:560px) { /* 帯が2行になっても左右の斜線が中央に寄らないよう、上下中央ではなく上寄せにする */ .kit-price-badge { align-items:flex-start; padding:5px 10px; } } /* 「11月30日まで」は帯の中ではなく、金額の下の元の位置に戻す（バルさん指示）*/ .kit-copy .kit-price-note { margin:0 0 6px; } /* ============================================================ ご購入前にご確認ください：テキストだけで読みにくかったため、 「カテゴリの帯」＋「通し番号つきの項目」に整理した（2026-09-18 バルさん指示） 番号はCSSのカウンタで自動採番。項目を増減しても振り直し不要 ============================================================ */ .is-before .prose { counter-reset:policy; } /* カテゴリ見出しを、左に金色の柱を立てたベージュの帯にする */ .is-before .policy-cat { margin:0 0 6px; padding:14px 22px; border-bottom:0; border-left:5px solid var(--accent); background:#fbf4f3; /* ページ上部と同じ淡いピンク */ font-size:clamp(21px,2.1vw,24px); letter-spacing:.08em; line-height:1.6; } .is-before .policy-group { margin-bottom:clamp(48px,6vw,72px); } /* 項目：左に番号、右に見出しと本文。項目どうしは細い線で区切る */ .is-before .policy-item { display:grid; grid-template-columns:72px 1fr; align-items:start; padding:22px 0 20px; border-bottom:1px solid var(--line); counter-increment:policy; } .is-before .policy-item:last-child { border-bottom:0; padding-bottom:0; } .is-before .policy-item::before { content:counter(policy,decimal-leading-zero); padding-left:22px; color:var(--accent); font-family:var(--serif); font-size:clamp(17px,1.7vw,20px); letter-spacing:.08em; line-height:1.9; } /* スマホで表題と説明文（16px）の差が1pxしかなく、メリハリが足りなかったので下限を上げた */ .is-before .policy-item .policy-h { margin:0 0 6px; font-size:clamp(18.5px,1.8vw,20px); line-height:1.8; } .is-before .policy-item p { margin:0 0 6px; } .is-before .policy-item p:last-child { margin-bottom:0; } @media (max-width:560px) { /* スマホは番号の列を細くして、本文の幅をできるだけ確保する */ .is-before .policy-item { grid-template-columns:44px 1fr; padding:18px 0 16px; } .is-before .policy-item::before { padding-left:0; } .is-before .policy-cat { padding:12px 16px; } } /* ご購入前にご確認ください：文節での折り返し（word-break:auto-phrase）をやめ、 句点「。」のところだけで改行する。auto-phrase はChromeにしか無く、iPhoneでは 効かないため、ページ内で見え方が変わってしまうのを避ける狙いもある。 1文＝1つの .nb（block）にしてあるので、文の途中は行の端まで詰める */ .is-before h1, .is-before h2, .is-before h3, .is-before p, .is-before li, .is-before dt, .is-before dd, .is-before strong, .is-before span { word-break:normal; overflow-wrap:normal; text-wrap:wrap; } .is-before .policy-item p .nb, .is-before .page-lead .nb { display:block; } /* ご購入前に：スマホは番号を左に置くと本文の幅が足りず窮屈になるため、 「番号＋見出し」を1行にして、説明文はその下に全幅で流す（バルさん指示）*/ @media (max-width:700px) { .is-before .policy-item { display:block; padding:20px 0 18px; } .is-before .policy-item::before { content:none; } .is-before .policy-item .policy-h::before { content:counter(policy,decimal-leading-zero); margin-right:.7em; color:var(--accent); font-size:.95em; letter-spacing:.08em; } .is-before .policy-item .policy-h { margin-bottom:10px; } } /* ============================================================ よくあるご質問：カテゴリを帯にして、質問は丸い＋/−のボタンで開閉する形に整理 （2026-09-18 バルさん指示・添付イメージ準拠。開いたときの背景色は付けない） ============================================================ */ /* 上部のカテゴリ送り。押すとそのカテゴリまでスクロールする */ .is-faq .faq-nav { display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:10px 0; max-width:800px; margin:0 auto clamp(40px,5vw,60px); } .is-faq .faq-nav a { padding:0 20px; border-left:1px solid var(--accent-tint); color:var(--ink); font-size:15px; letter-spacing:.06em; text-decoration:none; } .is-faq .faq-nav a:first-child { border-left:0; } .is-faq .faq-nav a:hover { color:var(--accent); } .is-faq .faq-group { margin-bottom:clamp(44px,5vw,64px); scroll-margin-top:100px; } .is-faq .faq-group:last-child { margin-bottom:0; } /* カテゴリの帯。ご購入前ページと同じ作りにそろえる */ .is-faq .faq-cat { margin:0 0 6px; padding:16px 24px 18px; border-left:5px solid var(--accent); background:#fbf4f3; font-size:clamp(23px,2.4vw,30px); letter-spacing:.08em; line-height:1.4; } .is-faq .faq-cat-en { display:block; margin-bottom:2px; color:var(--accent); font-family:var(--display); font-size:13px; letter-spacing:.18em; } /* 質問の行。右端に丸い＋ボタンを置く */ .is-faq .prose .faq-list { margin:0; border-top:0; } .is-faq .faq-list details { border-bottom:1px solid var(--line); } .is-faq .faq-list summary { padding:22px 58px 22px 4px; font-size:16px; letter-spacing:.04em; } .is-faq .faq-list summary::after { content:"+"; right:8px; top:50%; transform:translateY(-50%); font:27px/1 var(--display); } .is-faq .faq-list details[open] summary::after { content:"−"; } /* 回答。頭に金色の「A.」を置き、続く行も同じ位置でそろえる（背景色は付けない）*/ .is-faq .faq-list p { position:relative; max-width:none; margin:0; padding:0 58px 26px 2.4em; } .is-faq .faq-list p::before { content:"A."; position:absolute; left:0; top:0; color:var(--accent); font-family:var(--serif); font-size:16px; letter-spacing:.06em; } @media (max-width:700px) { .is-faq .faq-nav { gap:8px 0; } .is-faq .faq-nav a { padding:0 12px; font-size:14px; } .is-faq .faq-cat { padding:13px 16px 15px; } .is-faq .faq-list summary { padding:18px 48px 18px 2px; } .is-faq .faq-list summary::after { right:4px; font-size:24px; } .is-faq .faq-list p { padding:0 0 22px 2.2em; } } /* 開閉のなめらかさをトップページのFAQと同じにする（script.js が高さを補間する）*/ .is-faq .faq-list details { overflow:hidden; } /* 404ページ（お探しのページが見つかりません）。写真は使わず、文章と行き先だけを置く */ .is-404 .page-cover { min-height:0; } .is-404 .notfound { max-width:640px; margin:0 auto; text-align:center; } .is-404 .notfound-lead .nb { display:block; } .is-404 .notfound-links { display:flex; flex-wrap:wrap; justify-content:center; gap:10px 0; margin:clamp(32px,4vw,44px) 0 0; padding:0; list-style:none; } .is-404 .notfound-links li { border-left:1px solid var(--accent-tint); } .is-404 .notfound-links li:first-child { border-left:0; } .is-404 .notfound-links a { display:block; padding:0 18px; color:var(--ink); font-size:15px; letter-spacing:.04em; text-decoration:none; } .is-404 .notfound-links a:hover { color:var(--accent); } @media (max-width:700px) { /* スマホは横並びだと窮屈なので、1行に2つずつ入る幅にして中央にそろえる */ .is-404 .notfound-links { flex-direction:column; gap:14px; } .is-404 .notfound-links li { border-left:0; } .is-404 .notfound-links a { padding:0; } } /* ============================================================ プライバシーポリシー：他の下層ページとデザインをそろえる。 ・タイトル＋写真の表紙（.page-cover）と写真つきの締め（.page-cta-photo）は 他ページと同じ部品をHTML側で使っている。ここでは中身の見出しだけ、 「ご購入前にご確認ください」と同じ淡いピンクの帯にそろえる。 ・法務ページなので表紙の写真は浅めにし、本文までの距離を短くする ============================================================ */ .is-privacy .page-cover { min-height:0; } .is-privacy .page-cover .page-hero-photo { flex:0 0 auto; height:auto; aspect-ratio:16 / 5; } .is-privacy .page-hero-photo img { object-position:center 52%; } @media (max-width:800px) { .is-privacy .page-cover .page-hero-photo { aspect-ratio:3 / 2; } .is-privacy .page-hero-photo img { object-position:center 50%; } } /* 見出しは「ご購入前」のカテゴリ帯と同じ形（淡いピンク＋左の金色の線） */ .is-privacy .prose .policy-h { margin:44px 0 20px; padding:14px 22px; border-left:5px solid var(--accent); background:#fbf4f3; font-size:clamp(21px,2.1vw,24px); letter-spacing:.08em; line-height:1.6; } .is-privacy .prose .policy-h:first-of-type { margin-top:34px; } /* スマホは帯の中の幅がせまく、短い見出しまで2行に折れてしまうため、 左右の余白と文字を少しだけ詰める（「9. 本ポリシーの変更について」が1行に収まる） */ @media (max-width:430px) { .is-privacy .prose .policy-h { padding:13px 17px; font-size:20px; } } /* フッターの事業用住所（2026-09-20 クライアント依頼で追加）。 ブランド名の下に、控えめな大きさで置く */ .footer-address { margin:10px 0 0; color:#c5b3a4; font-size:11.5px; line-height:1.9; letter-spacing:.02em; } /* ============================================================ 「はじめてでも、安心して。」の項目名を、カードの見出しと同じ20pxにそろえる。 説明文も14px（こだわり・Pointのカード本文と同じ）に上げる。 ・項目名が20pxになると、PCの左列（170px）に収まらず2行に折れるため、 左列の幅も広げている ・560px以下では .spec-list dt の15px指定が効くので、それより後ろに置いて上書きする ・ここは .assurance-list に限定する（商品詳細・贈りものページの spec-list は変えない） ・項目名の書体も、他のカード見出しと同じ明朝（--serif）・太さ500にそろえる。 560px以下では .spec-list dt が font-weight:600 / letter-spacing:.03em を指定しているが、 同じ強さなので、この行が後ろにある限りこちらが効く ============================================================ */ .assurance-list dt { font:500 20px/1.65 var(--serif); letter-spacing:.04em; } .assurance-list dd { color:var(--muted); font-size:14px; line-height:1.95; } /* 左右2列になるのは561px以上だけ。560px以下は「項目名の下に説明文」の縦並びなので、 ここで列指定をすると縦並びが壊れる（実際に壊した） */ @media (min-width:801px) { .assurance-list > div { grid-template-columns:270px 1fr; } } @media (min-width:561px) and (max-width:800px) { .assurance-list > div { grid-template-columns:250px 1fr; } } /* ============================================================ トップページ「商品詳細を見る」の中だけ、文字を1段階大きくする。 ・PC…項目名・説明文とも 13px → 14px（.spec-list div の指定を上書き） ・スマホ（560px以下）…項目名 15px → 16px ・見出し「商品詳細を見る」は 15px → 16px（上の .kit-spec > summary で変更済み） ・.kit-spec に限定しているので、贈りもの・ご購入前ページの仕様表は変わらない ============================================================ */ .kit-spec .spec-list div { font-size:14px; } @media (max-width:560px) { .kit-spec .spec-list dt { font-size:16px; } } /* ============================================================ Instagramセクションの「@totte_memorial をフォロー」。 ・文字を 12px → 14px ・上の余白….instagram-head の gap（本文とリンクのあいだ）を広げる ・下の余白…投稿3枚（.instagram-posts）の上マージンを広げる （max-width:800px の margin-top:28px より後ろなので、こちらが効く） ============================================================ */ .instagram-head .text-link { font-size:14px; } .instagram-head { gap:clamp(34px,3.6vw,52px); } .instagram-posts { margin-top:clamp(40px,4vw,52px); } /* 800px以下は .instagram-head が display:block に戻るため gap が効かない。 そちらでは（line800の margin-top:0 を上書きして）上の余白を足す */ @media (max-width:800px) { .instagram-head .text-link { margin-top:28px; } } /* ============================================================ そのほかの商品の説明文を、右端まで文字を詰めて折り返す。 ・原因…207行目の text-wrap:pretty が li から説明文の箱に継承されていた。 pretty は「最後の行が短く残らないよう前の行から文字を引き戻す」機能で、 Safari（iPhone）は引き戻しが強く、右側が空いているのに改行されて見える。 ・text-wrap は「行を折る箱」に効く指定なので、文（.nb）側ではなく、 説明文全体を囲む .also-list li > span に指定しないと効かない。 ・word-break も、全体設定の auto-phrase（文節で折る・Chromeのみ）をやめて 通常の折り返しに戻す。 ・商品名（strong）はこれまでどおり意味の切れ目で折り返す。 ============================================================ */ .also-list li > span { word-break:normal; overflow-wrap:normal; text-wrap:wrap; } /* そのほかの商品：単体で買えない商品の注意書き。説明文の下に1行あけて置く */ .also-list .also-caution { display:block; margin-top:6px; word-break:normal; overflow-wrap:normal; text-wrap:wrap; } /* KIT DETAILS の説明文（スマホ）：句点（。）のところだけで改行し、文の中は行の端まで詰める。 文節ごとの折り返し（ + keep-all）のままだと「はじめての方でも」のように 行が途中で短く切れてしまうため。句点の改行は HTML の
で入れてある。 上の「p:has(> wbr) { keep-all !important }」より強くするため、こちらも !important */ @media (max-width:800px) { .kit-lead { word-break:normal !important; overflow-wrap:normal !important; line-break:strict; } } /* 作り方 STEP 01・03 の説明文（スマホ）：文節ごとの折り返しをやめ、行の右端まで詰める。 「赤ちゃんの／手を入れます」「手型を／取り出します」のように、行の途中で 早めに改行されて右側が空いて見えていたため。 text-wrap:wrap は、サイト全体の text-wrap:pretty の解除。pretty のままだと Safari（iPhone）では右側に空きを残して早めに折り返してしまう（Chromeでは起きない）。 STEP 02 は文節の折り返しのままで句点のところで改行されるので、対象外にしている */ @media (max-width:800px) { .steps li:nth-child(1) > p, .steps li:nth-child(3) > p { word-break:normal !important; overflow-wrap:normal !important; line-break:strict; text-wrap:wrap; } }