:root{color-scheme:light;--green:#285246;--paper:#f6f2e8;--ink:#25483d;--sage:#bac5b1;--mincho:"Yu Mincho","游明朝","Hiragino Mincho ProN",serif;--sans:"Yu Gothic","游ゴシック","Hiragino Kaku Gothic ProN",sans-serif}
*{box-sizing:border-box}body{margin:0;background:var(--green);color:var(--paper);font-family:var(--sans);font-size:16px;line-height:1.5}p,figure,h1{margin:0}button{font:inherit}button:disabled{opacity:1;cursor:default}::selection{background:#dfd6b4;color:var(--ink)}
.first-view{min-height:100svh;max-width:1600px;margin:auto;display:flex;flex-direction:column}.header{padding:20px 6.5% 18px;display:flex;justify-content:space-between;align-items:center}.wordmark{display:flex;align-items:center;gap:20px}.brand-name{font:34px/1 Georgia,serif;letter-spacing:-.035em}.brand-jp{font-family:var(--mincho);font-size:14px;letter-spacing:.03em}.header-place{font-size:14px;line-height:1.7;text-align:right}.header-place span{display:block;font-size:12px;color:#d5dbc9}.hero{display:flex;flex-direction:column;flex:1}.photo-stage{position:relative;width:87%;max-width:1320px;margin:0 auto;height:clamp(285px,44vh,380px);flex:none}.photo{position:absolute;display:flex;align-items:center;justify-content:center;text-align:center;border-radius:3px}.photo:after{content:"";position:absolute;inset:13px;border:1px solid #34514645;border-radius:2px 5px 2px 4px;pointer-events:none}.photo-main{right:0;top:0;width:67%;height:87%;background:var(--sage);color:var(--ink)}.photo-shop{left:3%;bottom:5%;width:21%;height:56%;background:#d7cebb;color:#414739}.photo-label{padding:18px;display:flex;flex-direction:column;gap:13px}.photo-number{font:12px Georgia,serif;letter-spacing:.1em}.photo-label strong{font-family:var(--mincho);font-size:20px;font-weight:500;letter-spacing:.03em}.photo-caption{font-size:14px}.photo-shop strong{font-size:17px}.arc-copy{position:absolute;left:0;top:0;width:27%;max-width:300px;transform:rotate(-5deg)}.arc-copy svg{width:100%;display:block}.arc-copy text{font-family:var(--mincho);font-size:18px;fill:var(--paper);letter-spacing:.035em}.arc-mobile{display:none!important}.hand-line{position:absolute;width:110px;right:5%;bottom:-1px;transform:rotate(-7deg)}.hand-line svg{width:100%;display:block}.hand-line path{fill:none;stroke:#c9d3bb;stroke-width:1.2;stroke-linecap:round;stroke-linejoin:round}.photo-foot{position:absolute;right:23%;bottom:7px;font-size:13px;letter-spacing:.06em;color:#e1e6d9}
.hero-message{background:var(--paper);color:var(--ink);clip-path:polygon(0 38px,20% 0,38% 30px,66% 0,100% 38px,100% 100%,0 100%);padding:56px 6.5% 22px;margin-top:6px;flex:1;display:flex;align-items:center}.message-inner{width:100%;max-width:1320px;margin:auto;display:grid;grid-template-columns:125px 1fr 355px;gap:38px;align-items:center}h1{display:flex;flex-direction:column;writing-mode:vertical-rl;font-family:var(--mincho);font-size:27px;font-weight:500;line-height:1.8;letter-spacing:.08em;height:210px;justify-self:center}h1 span{white-space:nowrap}.eyebrow{font-family:var(--mincho);font-size:17px;letter-spacing:.04em;margin-bottom:12px}.description{font-size:16px;line-height:1.9}.occasions{font-size:14px;margin-top:15px;letter-spacing:.035em}.occasions span{padding:0 5px;color:#78907d}.action-kicker{font-size:13px;margin-bottom:11px}.cta{display:flex;align-items:center;justify-content:space-between;width:100%;min-height:64px;padding:15px 22px;border:0;border-radius:2px 5px 3px 2px;background:var(--green);color:var(--paper);font-size:17px;font-weight:600;gap:14px;letter-spacing:.01em}.arrow{font:26px/1 Arial,sans-serif}.shop-link{background:none;border:0;border-bottom:1px solid #8b9b8e;padding:13px 1px 11px;width:100%;display:flex;justify-content:space-between;align-items:center;color:var(--ink);font-size:14px;gap:12px}.shop-link span{font-size:20px}.address{font-size:12px;letter-spacing:.015em;margin-top:12px}.sample-note{text-align:center;background:var(--paper);color:#546c5d;font-size:12px;padding:9px 14px;border-top:1px solid #d8ded1}
@media(max-width:1100px) and (min-width:701px){.message-inner{grid-template-columns:95px 1fr 315px;gap:24px}.brand-jp{font-size:13px}.eyebrow{font-size:15px}.description{font-size:15px}.cta{font-size:16px;padding:15px 18px}.photo-label strong{font-size:18px}.photo-shop strong{font-size:15px}h1{font-size:25px;height:198px}.photo-foot{right:20%;font-size:12px}}
@media(max-width:700px){.header{padding:19px 21px 21px;align-items:flex-start}.wordmark{display:block}.brand-name{display:block;font-size:34px}.brand-jp{display:block;font-family:var(--sans);font-size:11px;margin-top:7px;letter-spacing:0}.header-place{font-size:12px;line-height:1.7;padding-top:2px}.header-place span{font-size:11px}.photo-stage{width:90%;height:250px;max-width:470px}.photo-main{width:66%;height:79%;top:4px}.photo-shop{width:28%;height:48%;left:0;bottom:2px}.photo:after{inset:9px}.photo-label{gap:10px;padding:14px}.photo-number{font-size:10px;letter-spacing:.02em}.photo-main strong{font-size:16px;line-height:1.7;max-width:180px}.photo-caption{font-size:12px}.photo-shop .photo-label{padding:11px;gap:8px}.photo-shop .photo-number{font-size:9px}.photo-shop strong{font-family:var(--sans);font-size:14px;letter-spacing:0;line-height:1.6}.photo-shop .photo-caption{font-size:11px}.arc-copy{left:0;top:3px;width:32%;max-width:140px;transform:rotate(-7deg)}.arc-pc{display:none!important}.arc-mobile{display:block!important}.arc-mobile text{font-size:19px;letter-spacing:0}.hand-line{width:67px;right:4%;bottom:5px}.photo-foot{font-size:11px;letter-spacing:0;right:1%;bottom:39px}.hero-message{clip-path:polygon(0 23px,19% 0,38% 21px,67% 0,100% 23px,100% 100%,0 100%);padding:40px 24px 16px;margin-top:13px;align-items:flex-start}.message-inner{display:grid;grid-template-columns:1fr;gap:0;max-width:420px}h1{writing-mode:horizontal-tb;height:auto;display:block;justify-self:start;font-size:29px;line-height:1.55;letter-spacing:.055em;margin-bottom:12px}h1 span{display:block}.eyebrow{display:none}.description{font-size:15px;line-height:1.8}.occasions{display:none}.actions{margin-top:17px}.action-kicker{font-size:12px;margin-bottom:9px}.cta{min-height:58px;font-size:16px;padding:13px 18px}.shop-link{font-size:13px;padding:10px 1px 8px}.shop-link span{font-size:18px}.address{font-size:11px;margin-top:9px}.sample-note{font-size:12px;padding:9px 12px}.sample-note span{display:block}}
@media(max-width:360px){.header{padding-left:18px;padding-right:18px}.brand-name{font-size:31px}.brand-jp{font-size:10px}.header-place{font-size:11px}.photo-stage{height:230px}.photo-main strong{font-size:14px}.photo-number{font-size:9px}.photo-shop strong{font-size:13px}.hero-message{padding-left:20px;padding-right:20px}h1{font-size:27px}.description{font-size:14px}.cta{font-size:15px}}
@media(min-width:701px){.photo-stage{height:clamp(270px,42vh,360px)}.hero-message{padding-top:52px;padding-bottom:20px}h1{font-size:25px;height:198px}}
@media(max-width:700px){.photo-main strong span{display:block;white-space:nowrap}.photo-foot{display:none}.photo-shop strong{white-space:nowrap}}
/* Pinterest ⑤の柔らかい弧の文字、③の静かな縦書きに合わせた文字組み。元参考の正確な書体名を示すものではない。 */
:root{--sans:"Meiryo","メイリオ","Hiragino Kaku Gothic ProN",sans-serif;--hand:"UD Digi Kyokasho N-R","UD デジタル 教科書体 N-R","Meiryo",sans-serif}
body{font-weight:400}.arc-copy text{font-family:var(--hand);font-weight:400;letter-spacing:.02em}h1{font-weight:500;letter-spacing:.045em}.description{letter-spacing:.015em}.cta{font-weight:700;letter-spacing:0}.brand-jp{font-weight:500}
@media(max-width:700px){h1{letter-spacing:.04em}.arc-mobile text{letter-spacing:0}.description{font-size:16px;line-height:1.75}.brand-jp{font-weight:400}}
/* 許諾済み素材写真。レイアウト・文字組みは維持し、枠内のトリミングのみ調整。 */
.photo{overflow:hidden}.photo img{display:block;width:100%;height:100%;object-fit:cover}.photo-main img{object-position:50% 58%}.photo-shop img{object-position:48% 48%}.photo:after{border-color:#ffffff40}.stock-label{position:absolute;right:8px;bottom:7px;background:#f6f2e8e8;color:#25483d;font-size:12px;line-height:1.5;padding:2px 7px;z-index:1}
@media(max-width:700px){.photo-main img{object-position:50% 57%}.photo-shop img{object-position:48% 48%}.stock-label{right:5px;bottom:5px;font-size:10px;padding:2px 4px}.sample-note{font-size:11px}}
@media(max-width:700px){.stock-label{font-size:12px}.sample-note{font-size:12px}}