@charset "utf-8"; /* ========================================================================== 案B「文具」フルページ — 紙の手帳・伝票・値札の世界観（整列版） 色は _shared/ds/colors.css の変数のみ（実HEXは書かない。半透明重ねのみrgba） 傾け・テープ等の演出は使わない。揃えは左揃え基調（クロージングのみ中央） ========================================================================== */ :root{ --gothic:"Zen Kaku Gothic New","Hiragino Sans","BIZ UDPGothic","Yu Gothic UI",Meiryo,sans-serif; --hand:"Zen Kurenaido","Hiragino Sans","Yu Gothic UI",Meiryo,sans-serif; /* ページ共通の骨格 */ --wrap:1120px; --pad-x:clamp(20px,4vw,40px); --sec-y:clamp(72px,8.5vw,112px); /* 縦リズム（spacingトークンに揃える） */ --gap-xs:var(--space-2); /* 8 */ --gap-sm:var(--space-4); /* 16 */ --gap-md:var(--space-6); /* 24 */ --gap-lg:var(--space-8); /* 32 */ --gap-xl:var(--space-12); /* 48 */ --rule:rgba(35,33,27,.045); } *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%} html,body{margin:0;max-width:100%;overflow-x:hidden} body{ background:var(--paper-200); color:var(--ink-800); font-family:var(--gothic); font-size:18px; line-height:1.85; font-weight:400; } img{max-width:100%;height:auto;display:block} ul,ol,dl,dd{margin:0;padding:0} li{list-style:none} p{margin:0} h1,h2{margin:0;font-family:var(--gothic);line-height:1.3;color:var(--clover-900)} .wrap{ width:100%; max-width:var(--wrap); margin:0 auto; padding:0 var(--pad-x); } .hand{font-family:var(--hand);color:var(--clover-800)} /* 出現演出（控えめなフェード） */ .js [data-rise]{ opacity:0; transform:translateY(10px); transition:opacity 500ms var(--ease-standard), transform 500ms var(--ease-standard); } .js [data-rise].is-in{opacity:1;transform:none} @media (prefers-reduced-motion:reduce){ .js [data-rise]{opacity:1;transform:none;transition:none} } .topbar{ height:6px; border-radius:2px; background:var(--clover-600); } /* -------------------------------------------------------------------------- 2状態切替（予告モード / 配布モード） モードは 。JSがhead内で確定させる。 -------------------------------------------------------------------------- */ .ship, .community, .mode-preview, .mode-release{display:none} [data-mode="preview"] .ship{display:block} [data-mode="preview"] .mode-preview{display:inline} [data-mode="release"] .community{display:block} [data-mode="release"] .mode-release{display:inline} /* -------------------------------------------------------------------------- 共通パーツ -------------------------------------------------------------------------- */ /* 節見出し（全節で同一） */ .shead{margin-bottom:clamp(30px,3.6vw,44px)} .shead__eyebrow{ display:flex; align-items:center; gap:10px; font-size:14px; font-weight:700; letter-spacing:.2em; line-height:1.4; color:var(--clover-700); } .shead__eyebrow::before{ content:""; width:26px; height:3px; border-radius:2px; background:var(--clover-500); } .shead__title{ margin-top:var(--gap-sm); font-size:clamp(27px,3.4vw,37px); font-weight:700; letter-spacing:-.01em; } .shead__note{ margin-top:var(--gap-xs); font-size:17px; color:var(--ink-600); } /* CTAボタン */ .btn{ display:inline-flex; align-items:center; justify-content:center; min-height:64px; padding:0 clamp(28px,4vw,44px); border-radius:12px; background:var(--clover-700); color:var(--paper-0); font-size:21px; font-weight:700; letter-spacing:.04em; text-decoration:none; box-shadow:0 3px 0 var(--clover-900); transition:background-color var(--duration-fast) var(--ease-standard), transform var(--duration-fast) var(--ease-standard); } .btn:hover{background:var(--clover-800);color:var(--paper-0);text-decoration:none} .btn:active{transform:translateY(2px)} .btn:focus-visible{outline:3px solid var(--clover-900);outline-offset:3px} .btn--light{ background:var(--paper-0); color:var(--clover-900); box-shadow:0 3px 0 var(--clover-600); } .btn--light:hover{background:var(--clover-50);color:var(--clover-900)} .btn--light:focus-visible{outline:3px solid var(--paper-0);outline-offset:3px} /* 副導線（暗地の上の線だけのボタン） */ .btn--ghost{ min-height:56px; padding:0 clamp(24px,3.4vw,36px); border:2px solid var(--clover-400); background:transparent; color:var(--clover-100); font-size:18px; box-shadow:none; } .btn--ghost:hover{background:var(--clover-800);color:var(--paper-0)} .btn--ghost:focus-visible{outline:3px solid var(--paper-0);outline-offset:3px} /* メール登録フォーム（主CTA。POST先は CLOVER_CFG.SIGNUP_ACTION の1箇所） */ .signup{width:100%;max-width:560px} .signup__row{display:flex;flex-wrap:wrap;gap:12px} /* honeypot（bot対策の罠欄。人間には見せない・レイアウトに影響させない） */ .signup__hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0} .signup__input{ flex:1 1 220px; min-width:0; min-height:64px; padding:0 18px; border:2px solid var(--clover-700); border-radius:12px; background:var(--paper-0); color:var(--ink-800); font-family:var(--gothic); font-size:18px; } .signup__input::placeholder{color:var(--ink-600)} .signup__input:focus-visible{outline:3px solid var(--clover-900);outline-offset:2px} .signup__stat{ margin-top:var(--gap-xs); font-size:15px; color:var(--ink-600); } /* 受付準備中（寄付の「準備中」と同じ紙地＋墨の型） */ .signup--wait .signup__input, .signup--wait .signup__btn{ border:2px solid var(--color-border); background:var(--paper-300); color:var(--ink-600); box-shadow:none; cursor:not-allowed; } /* 暗地（クロージング）の上の型 */ .signup--light .signup__input{border-color:var(--clover-400)} .signup--light .signup__stat{color:var(--clover-100)} .closing .signup{margin:var(--gap-lg) auto 0} .closing .signup .btn{margin-top:0} /* 打消し表示 */ .fine{ font-size:15px; line-height:1.85; color:var(--ink-600); } .fine li{position:relative;padding-left:15px} .fine li::before{ content:""; position:absolute; left:0; top:.78em; width:6px; height:6px; border-radius:2px; background:var(--clover-300); } .fine--dark{color:var(--clover-100)} .fine--dark li::before{background:var(--clover-400)} /* 伝票の欄名 */ .slip__label, .ship__label, .crew__label{ font-size:14.5px; font-weight:700; letter-spacing:.22em; line-height:1.5; color:var(--ink-600); } /* ========================================================================== 1. ファーストビュー ========================================================================== */ .hero{ padding:clamp(64px,7.5vw,104px) 0 clamp(72px,8.5vw,116px); border-radius:2px; background-color:var(--paper-100); background-image:repeating-linear-gradient(to bottom,transparent 0 31px,var(--rule) 31px 32px); } .brand{ display:flex; align-items:center; flex-wrap:wrap; gap:var(--gap-sm); margin-bottom:clamp(40px,5vw,56px); } .brand__mark{width:56px;height:56px} .brand__name{ font-size:27px; font-weight:700; letter-spacing:.06em; color:var(--clover-800); } .brand__note{ font-family:var(--hand); font-size:17px; color:var(--ink-600); } .hero__grid{ display:grid; grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr); gap:clamp(36px,4.4vw,64px); align-items:start; } .hero__title{ font-size:clamp(32px,4.4vw,50px); font-weight:700; letter-spacing:-.01em; line-height:1.34; } .hero__lead{ margin-top:var(--gap-md); max-width:35em; font-size:clamp(18px,1.6vw,20px); line-height:1.9; } .cta{margin-top:var(--gap-lg)} .cta .fine{margin-top:var(--gap-sm)} .target{ display:block; margin-top:var(--gap-lg); padding:var(--gap-sm) var(--gap-md); max-width:35em; border-left:6px solid var(--leaf-400); border-radius:2px 10px 10px 2px; background:var(--leaf-100); } .target__label{ display:block; font-size:14px; font-weight:700; letter-spacing:.16em; color:var(--leaf-700); } .target__body{ display:block; margin-top:8px; font-size:16.5px; line-height:1.85; } /* 値札（深緑プレート型・2026-08-22 案B採用。傾け・紐・穴なし） */ .pt--b{ padding:clamp(26px,3.2vw,34px) clamp(24px,3vw,32px) clamp(28px,3.4vw,36px); border-radius:14px; background:var(--clover-800); box-shadow:0 12px 32px rgba(35,33,27,.16); } .pt__label{ font-size:14px; font-weight:700; letter-spacing:.26em; line-height:1.5; color:var(--clover-200); } .pt__price{ margin-top:6px; font-size:clamp(70px,8.4vw,100px); font-weight:700; line-height:1.06; letter-spacing:-.01em; color:var(--paper-0); } .pt__rule{ display:block; height:1px; margin:clamp(18px,2.2vw,26px) 0 var(--gap-sm); border-radius:2px; background:rgba(255,255,255,.24); } .pt__when{ font-size:16px; font-weight:500; line-height:1.8; color:var(--clover-100); text-wrap:balance; } /* 配布開始までの残り（予告モードのみ） */ .ship{ margin-top:var(--gap-md); padding:var(--gap-sm) var(--gap-md) calc(var(--gap-sm) + 2px); border-radius:10px; border:2px solid var(--clover-200); background:var(--paper-0); } .ship__units{ display:flex; flex-wrap:wrap; align-items:baseline; gap:var(--gap-xs) var(--gap-md); margin-top:6px; } .ship__unit{display:flex;align-items:baseline;gap:5px} .ship__num{ font-size:34px; font-weight:700; line-height:1.2; letter-spacing:.02em; color:var(--clover-800); font-variant-numeric:tabular-nums; } .ship__cap{font-size:15px;font-weight:500;color:var(--ink-600)} .ship__note{ margin-top:6px; font-size:15px; line-height:1.7; color:var(--ink-600); } .hero__why{ margin-top:var(--gap-md); font-size:19px; line-height:1.8; } /* ========================================================================== 2. なぜ無料か（手帳の余白の書き込み） ========================================================================== */ .why{ padding:var(--sec-y) 0; border-radius:2px; background:var(--paper-0); } .memo{ max-width:40em; padding:clamp(22px,3vw,34px) clamp(20px,3vw,36px); border-left:6px solid var(--clover-300); border-radius:2px 10px 10px 2px; background:var(--paper-100); } .memo__lead{ font-size:clamp(21px,2.6vw,27px); line-height:1.75; } .memo__body{margin-top:var(--gap-md)} .memo__body p{font-size:18px;line-height:1.95} .memo__body p + p{margin-top:var(--gap-sm)} .memo__sign{ margin-top:var(--gap-md); font-size:17px; line-height:1.6; color:var(--ink-600); } /* ========================================================================== 3. 中身を見てください ========================================================================== */ .album{ padding:var(--sec-y) 0; border-radius:2px; background:var(--paper-200); } .shots{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(20px,2.6vw,32px); } .shot{display:flex} .shot figure{ display:flex; flex-direction:column; width:100%; margin:0; padding:12px 12px 4px; border-radius:10px; background:var(--paper-0); box-shadow:0 2px 10px rgba(35,33,27,.09); } .shot__frame{ display:block; width:100%; aspect-ratio:16 / 10; border-radius:6px; overflow:hidden; background:var(--paper-200); } .shot__frame img{ width:100%; height:100%; object-fit:cover; object-position:left center; } .shot__cap{ display:flex; align-items:center; min-height:3.4em; padding:var(--gap-xs) 4px; font-family:var(--hand); font-size:16px; line-height:1.65; color:var(--ink-800); } /* 名刺 */ .crew{margin-top:clamp(40px,5vw,64px)} .crew__label{margin-bottom:var(--gap-sm)} .crew__list{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(14px,1.8vw,20px); } .card{ display:flex; flex-direction:column; padding:var(--gap-md) var(--gap-sm); border-top:5px solid var(--color-border); border-radius:2px 2px 10px 10px; background:var(--paper-0); } .card__face{ width:64px; height:64px; margin-bottom:var(--gap-sm); border-radius:50%; border:2px solid var(--color-border); background:var(--paper-100); object-fit:cover; } .card__role{ align-self:flex-start; padding-bottom:7px; border-bottom:2px solid currentColor; font-size:20px; font-weight:700; letter-spacing:.05em; line-height:1.4; } .card__name{ margin-top:8px; font-size:14px; color:var(--ink-600); line-height:1.5; } .card__job{ margin-top:var(--gap-xs); font-size:16px; line-height:1.75; } .card--sec{border-top-color:var(--clover-600)} .card--sec .card__role{color:var(--clover-700)} .card--sec .card__face{border-color:var(--clover-600)} .card--lib{border-top-color:var(--leaf-500)} .card--lib .card__role{color:var(--leaf-600)} .card--lib .card__face{border-color:var(--leaf-500)} .card--mail{border-top-color:var(--amber-500)} .card--mail .card__role{color:var(--amber-600)} .card--mail .card__face{border-color:var(--amber-500)} .card--fix{border-top-color:var(--slate-500)} .card--fix .card__role{color:var(--slate-600)} .card--fix .card__face{border-color:var(--slate-500)} /* ========================================================================== 4. 受け取りかた ========================================================================== */ .parcel{ padding:var(--sec-y) 0; border-radius:2px; background:var(--amber-100); } .slip{ padding:clamp(24px,3.4vw,40px); border:2px solid var(--ink-300); border-radius:6px; background:var(--paper-50); } .slip__top{ display:flex; align-items:center; justify-content:space-between; gap:var(--gap-md); } .slip__lead{ margin-top:var(--gap-xs); font-size:20px; font-weight:700; line-height:1.6; color:var(--clover-900); } .stamp{ flex:0 0 auto; display:flex; flex-direction:column; align-items:center; justify-content:center; width:118px; height:118px; border-radius:50%; border:3px double var(--clover-700); color:var(--clover-800); font-weight:700; line-height:1.35; } .stamp__l1{font-size:16px;letter-spacing:.02em} .stamp__l2{font-size:20px;letter-spacing:.04em} .stamp__l3{font-size:14px;letter-spacing:.18em} .perf{ height:3px; margin:clamp(22px,3vw,30px) 0; border-radius:2px; background-image:repeating-linear-gradient(90deg,var(--ink-300) 0 4px,transparent 4px 12px); } .steps{display:grid;gap:var(--gap-sm)} .step{ display:flex; align-items:flex-start; gap:var(--gap-sm); padding:var(--gap-sm); border-radius:10px; background:var(--paper-0); } .step__no{ flex:0 0 auto; display:flex; align-items:center; justify-content:center; width:40px; height:40px; border-radius:50%; background:var(--clover-700); color:var(--paper-0); font-size:18px; font-weight:700; } .step__text{ padding-top:4px; font-size:17.5px; line-height:1.8; } .meisai__list{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--gap-xs) clamp(20px,2.6vw,32px); margin-top:var(--gap-sm); } .meisai__row{ display:flex; align-items:baseline; justify-content:space-between; gap:var(--gap-sm); padding:10px 2px 11px; border-bottom:1px solid var(--color-border); } .meisai__row--wide{grid-column:1 / -1} .meisai__row dt{ font-size:16px; font-weight:500; letter-spacing:.06em; color:var(--ink-600); } .meisai__row dd{ font-size:17.5px; font-weight:500; text-align:right; } .num{ font-size:30px; font-weight:700; color:var(--clover-800); } .meisai__note{ margin-top:var(--gap-sm); font-size:15px; line-height:1.8; color:var(--ink-600); } /* ========================================================================== 5. よくある質問（問い合わせ票） ========================================================================== */ .faq{ padding:var(--sec-y) 0; border-radius:2px; background:var(--paper-100); } .qa{display:grid;gap:clamp(14px,1.8vw,20px)} .qa__item{ padding:clamp(18px,2.4vw,26px); border-radius:10px; background:var(--paper-0); } .qa__q, .qa__a{ display:flex; align-items:flex-start; gap:var(--gap-sm); } .qa__a{ margin-top:var(--gap-sm); padding-top:var(--gap-sm); border-top:1px solid var(--color-border); } .qa__mark{ flex:0 0 auto; display:flex; align-items:center; justify-content:center; width:34px; height:34px; border-radius:8px; font-size:16px; font-weight:700; line-height:1; } .qa__mark--q{background:var(--clover-700);color:var(--paper-0)} .qa__mark--a{background:var(--paper-300);color:var(--clover-800)} .qa__q .qa__text{ padding-top:3px; font-size:19px; font-weight:700; line-height:1.65; color:var(--clover-900); } .qa__a .qa__text{ padding-top:3px; font-size:17.5px; line-height:1.85; } /* ========================================================================== 6. コミュニティ案内（配布モードのみ・切り取り線つきの別紙） ========================================================================== */ .community{ padding:var(--sec-y) 0; border-radius:2px; background:var(--leaf-100); } .club{ padding:clamp(24px,3.4vw,40px); border:2px dashed var(--leaf-400); border-radius:6px; background:var(--paper-50); } .club__name{ font-size:clamp(24px,3vw,30px); font-weight:700; line-height:1.4; letter-spacing:.02em; color:var(--leaf-700); } .club__body{ margin-top:var(--gap-sm); max-width:42em; font-size:17.5px; line-height:1.9; } .club__note{ margin-top:var(--gap-md); max-width:42em; font-size:16px; line-height:1.8; color:var(--ink-600); } /* ========================================================================== 7. 寄付の入り口（任意の欄） ========================================================================== */ .donate{ padding:var(--sec-y) 0; border-radius:2px; background:var(--paper-200); } .envelope{ padding:clamp(24px,3.4vw,40px); border:2px solid var(--ink-300); border-radius:6px; background:var(--paper-50); } .donate__lead{ max-width:42em; font-size:18px; line-height:1.9; } .tiers{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(14px,1.8vw,20px); margin-top:var(--gap-md); max-width:600px; } .tier{ display:flex; flex-direction:column; align-items:flex-start; justify-content:center; gap:2px; width:100%; min-height:66px; padding:12px 18px; border:2px solid var(--color-border); border-radius:10px; background:var(--paper-300); color:var(--ink-600); font-family:var(--gothic); text-align:left; opacity:1; cursor:not-allowed; } .tier__amount{ font-size:22px; font-weight:700; line-height:1.3; letter-spacing:.02em; color:var(--ink-600); } .tier__state{ font-size:14px; font-weight:700; letter-spacing:.16em; line-height:1.4; color:var(--ink-600); } .donate__note{ margin-top:var(--gap-md); max-width:42em; font-size:15px; line-height:1.8; color:var(--ink-600); } /* ========================================================================== クロージングバンド ＋ フッター ========================================================================== */ .closing{ padding:clamp(72px,9vw,96px) 0; border-radius:2px; background:var(--clover-900); } .closing__inner{text-align:center} .closing__lead{ font-size:clamp(20px,2.4vw,24px); line-height:1.7; color:var(--clover-100); } .closing .btn{margin-top:var(--gap-lg)} .closing .fine{ display:block; width:fit-content; max-width:100%; margin:var(--gap-md) auto 0; text-align:left; } .side{ margin-top:clamp(36px,4.4vw,52px); padding-top:clamp(28px,3.4vw,36px); border-top:1px solid rgba(255,255,255,.16); } .side__note{ font-size:16px; line-height:1.8; color:var(--clover-100); } .side .btn--ghost{margin-top:var(--gap-sm)} .foot{ border-radius:2px; background:var(--paper-100); border-top:1px solid var(--color-border); } .foot__inner{ display:flex; align-items:center; gap:var(--gap-sm); padding-top:var(--gap-md); padding-bottom:var(--gap-md); } .foot__mark{width:28px;height:28px} .foot__text{ font-size:15px; line-height:1.6; color:var(--ink-600); } /* ========================================================================== レスポンシブ ========================================================================== */ @media (max-width:900px){ .hero__grid{grid-template-columns:minmax(0,1fr);gap:clamp(40px,6vw,56px)} .pt{max-width:460px} .ship{max-width:460px} .hero__why{max-width:460px} .shots{grid-template-columns:minmax(0,1fr)} .shot__cap{min-height:0} .crew__list{grid-template-columns:repeat(2,minmax(0,1fr))} } @media (max-width:560px){ body{font-size:17px} .brand{gap:12px} .brand__mark{width:48px;height:48px} .brand__name{font-size:24px} .brand__note{width:100%} .hero__lead{font-size:18px} .btn{display:flex;width:100%;padding:0 18px} .ship{padding-left:var(--gap-sm);padding-right:var(--gap-sm)} .ship__units{gap:var(--gap-xs) var(--gap-sm)} .ship__num{font-size:30px} .memo{padding-left:var(--gap-sm);padding-right:var(--gap-sm)} .crew__list{grid-template-columns:minmax(0,1fr)} .slip__top{flex-direction:column;align-items:flex-start;gap:var(--gap-md)} .stamp{align-self:flex-start} .meisai__list{grid-template-columns:minmax(0,1fr)} .qa__q .qa__text{font-size:18px} .tiers{grid-template-columns:minmax(0,1fr);max-width:none} .foot__inner{align-items:flex-start} .br-pc{display:none} }