/* ===================================================================== 株式会社フードメディシン研究所 — Design System Concept: 温故知新 / Science meets Japanese food culture Palette: warm washi paper + deep evergreen sumi + refined gold + sage ===================================================================== */ /* ---- Fonts (Google Fonts) are linked in of each page ---- */ :root{ /* Color */ --paper: #faf8f2; /* warm washi base */ --paper-2: #f2efe6; /* slightly deeper panel */ --paper-3: #ece7da; /* card / divider fill */ --ink: #1e3d34; /* evergreen (text / UI) */ --ink-2: #2a5044; --forest: #285046; /* large dark section background (brighter pine) */ --forest-2: #34614f; /* forest highlight for gradients */ --text: #33352f; /* body text */ --text-soft: #5f6157; /* secondary text */ --line: #d9d3c4; /* hairlines */ --gold: #a97e35; /* refined warm accent (温故知新) */ --gold-soft: #c8a35f; --gold-deep: #7e5c1e; /* darker gold for small label text (AA on light) */ /* Ingredient spectrum — 食材の色＝機能の色 (vibrant accents) */ --umeboshi: #d94f3d; /* 梅・トマト・赤 — リコピン/抗酸化 */ --umeboshi-d: #b23a2a; /* darker for text on light */ --carrot: #e07a2d; /* 人参・柿 — βカロテン */ --carrot-d: #b85e18; --turmeric: #edb018; /* 南瓜・卵・ウコン — 黄 */ --turmeric-d: #856205; --matcha: #7fa63f; /* 青菜・枝豆 — 葉緑/クロロフィル */ --matcha-d: #5a7b26; --eggplant: #7a4e93; /* 茄子・紫キャベツ — アントシアニン */ --eggplant-d: #5e3a74; --indigo: #2f7d9a; /* 藍・サイエンス */ --indigo-d: #1f5e77; --sage: #6f8a68; /* immune / vegetal accent */ --sage-soft: #90a889; --white: #ffffff; /* Type */ --serif: "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", serif; --sans: "Noto Sans JP", "Hiragino Sans", "Yu Gothic", system-ui, sans-serif; /* Metrics */ --wrap: 1180px; --gut: clamp(20px, 5vw, 64px); --r: 3px; --ease: cubic-bezier(.22,.61,.36,1); } /* ---- Reset ---- */ *,*::before,*::after{box-sizing:border-box;margin:0;padding:0} html{-webkit-text-size-adjust:100%;scroll-behavior:smooth} @media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important} } body{ font-family:var(--sans); color:var(--text); background:var(--paper); line-height:1.85; font-size:16px; letter-spacing:.02em; font-feature-settings:"palt" 1; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; overflow-x:hidden; } img{max-width:100%;height:auto;display:block} a{color:inherit;text-decoration:none} button{font-family:inherit;cursor:pointer} ul{list-style:none} :focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:2px} ::selection{background:var(--gold-soft);color:var(--ink)} /* ---- Layout helpers ---- */ .wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut)} .wrap-full{width:100%} .wrap-narrow{max-width:840px;margin-inline:auto;padding-inline:var(--gut)} .section{padding-block:clamp(64px,10vw,132px)} .section--tight{padding-block:clamp(48px,7vw,88px)} .bg-paper2{background:var(--paper-2)} .bg-sage{background:linear-gradient(180deg,#eef2ea 0%,#e8eee1 100%)} .bg-ink{background:var(--forest);color:#eef2ec} .bg-ink .text-soft{color:#c2ccc2} /* ---- Type scale ---- */ .jp-serif{font-family:var(--serif)} h1,h2,h3,h4{font-family:var(--serif);font-weight:600;line-height:1.42;letter-spacing:.03em;color:var(--ink)} .bg-ink h1,.bg-ink h2,.bg-ink h3,.bg-ink h4{color:#f4f1e8} .display{font-size:clamp(2rem,5.2vw,3.5rem);line-height:1.34;font-weight:600} .h2{font-size:clamp(1.55rem,3.4vw,2.35rem)} .h3{font-size:clamp(1.2rem,2.2vw,1.5rem)} .lead{font-size:clamp(1.02rem,1.5vw,1.18rem);line-height:2.05;color:var(--text-soft)} .text-soft{color:var(--text-soft)} .measure{max-width:42em} /* Section eyebrow label */ .eyebrow{ display:inline-flex;align-items:center;gap:.7em; font-family:var(--sans);font-size:.72rem;font-weight:700; letter-spacing:.28em;text-transform:uppercase;color:var(--gold-deep); margin-bottom:1.4em; } .eyebrow::before{content:"";width:26px;height:1px;background:var(--gold);display:inline-block} .bg-ink .eyebrow{color:var(--gold-soft)} .eyebrow-jp{font-family:var(--serif);letter-spacing:.24em;font-size:.8rem;text-transform:none;font-weight:600} .section-head{margin-bottom:clamp(36px,5vw,60px)} .section-head .h2{margin-bottom:.6em} /* ---- Buttons ---- */ .btn{ display:inline-flex;align-items:center;gap:.7em; font-family:var(--sans);font-weight:600;font-size:.95rem;letter-spacing:.06em; padding:.95em 1.8em;border-radius:var(--r);border:1px solid transparent; transition:all .35s var(--ease); } .btn .arw{transition:transform .35s var(--ease)} .btn:hover .arw{transform:translateX(4px)} .btn--primary{background:var(--ink);color:#f6f3ea} .btn--primary:hover{background:var(--gold);color:#fff} .btn--gold{background:var(--gold);color:#fff} .btn--gold:hover{background:var(--ink);color:#f6f3ea} .btn--ghost{border-color:var(--line);color:var(--ink);background:transparent} .btn--ghost:hover{border-color:var(--ink);background:var(--ink);color:#f6f3ea} .bg-ink .btn--ghost{border-color:rgba(255,255,255,.28);color:#f4f1e8} .bg-ink .btn--ghost:hover{background:#f4f1e8;color:var(--ink)} .link-arw{display:inline-flex;align-items:center;gap:.5em;font-weight:600;color:var(--ink); border-bottom:1px solid var(--line);padding-bottom:.15em;transition:.3s var(--ease)} .link-arw .arw{transition:transform .3s var(--ease)} .link-arw:hover{color:var(--gold);border-color:var(--gold)} .link-arw:hover .arw{transform:translateX(4px)} .bg-ink .link-arw{color:#f4f1e8;border-color:rgba(255,255,255,.25)} .bg-ink .link-arw:hover{color:var(--gold-soft);border-color:var(--gold-soft)} /* ===================================================================== Header / Nav ===================================================================== */ .site-header{ position:sticky;top:0;z-index:100; background:rgba(250,248,242,.82); backdrop-filter:saturate(140%) blur(12px); -webkit-backdrop-filter:saturate(140%) blur(12px); border-bottom:1px solid transparent; transition:border-color .4s,background .4s; } .site-header::before{content:"";position:absolute;top:0;left:0;right:0;height:4px; background:linear-gradient(90deg,var(--umeboshi) 0%,var(--carrot) 22%,var(--turmeric) 40%,var(--matcha) 60%,var(--indigo) 80%,var(--eggplant) 100%)} .site-header.scrolled{border-bottom-color:var(--line)} .nav{display:flex;align-items:center;justify-content:space-between;height:74px;gap:2rem} .brand{display:flex;flex-direction:column;line-height:1.1;letter-spacing:.02em} .brand b{font-family:var(--serif);font-weight:600;font-size:1.18rem;color:var(--ink);letter-spacing:.06em} .brand span{font-family:var(--sans);font-size:.6rem;letter-spacing:.32em;text-transform:uppercase;color:var(--gold);margin-top:.35em} .nav-links{display:flex;align-items:center;gap:clamp(1rem,2.2vw,2.1rem)} .nav-links a{font-size:.9rem;font-weight:600;color:var(--ink);position:relative;padding-block:.4em;letter-spacing:.04em} .nav-links a::after{content:"";position:absolute;left:0;bottom:0;width:0;height:1.5px;background:var(--gold);transition:width .35s var(--ease)} .nav-links a:hover::after,.nav-links a[aria-current="page"]::after{width:100%} .nav-links a[aria-current="page"]{color:var(--gold)} .nav-cta{margin-left:.4rem} .nav-toggle{display:none;flex-direction:column;gap:5px;width:30px;height:30px;justify-content:center;background:none;border:none} .nav-toggle span{display:block;height:2px;background:var(--ink);border-radius:2px;transition:.3s var(--ease)} @media (max-width:900px){ .nav-toggle{display:flex} .nav-links{ position:fixed;inset:74px 0 auto 0;flex-direction:column;align-items:stretch;gap:0; background:var(--paper);border-bottom:1px solid var(--line); padding:1rem var(--gut) 2rem; transform:translateY(-8px);opacity:0;pointer-events:none;transition:.35s var(--ease); max-height:calc(100vh - 74px);overflow:auto; } .nav-links.open{transform:none;opacity:1;pointer-events:auto} .nav-links a{padding:1em 0;border-bottom:1px solid var(--line)} .nav-links a::after{display:none} .nav-cta{margin:1.2rem 0 0} .nav-cta .btn{width:100%;justify-content:center} .nav-toggle.open span:nth-child(1){transform:translateY(7px) rotate(45deg)} .nav-toggle.open span:nth-child(2){opacity:0} .nav-toggle.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)} } /* ===================================================================== Hero ===================================================================== */ .hero{position:relative;overflow:hidden;background:linear-gradient(180deg,#fdfcf8 0%,#f6f3ea 100%)} /* 彩り背景（実写ボケ写真に差し替え可能なプレースホルダー） */ .hero-bokeh{position:absolute;inset:0;z-index:0;pointer-events:none} .hero-bokeh img{width:100%;height:100%;object-fit:cover;object-position:center;filter:saturate(1.05)} .hero-bokeh::after{content:"";position:absolute;inset:0; background:linear-gradient(90deg,rgba(252,250,244,.9) 0%,rgba(252,250,244,.82) 28%,rgba(252,250,244,.55) 46%,rgba(252,250,244,.15) 60%,rgba(252,250,244,.05) 100%)} @media (max-width:860px){ .hero-bokeh::after{background:linear-gradient(to top,rgba(252,250,244,.92) 0%,rgba(252,250,244,.7) 42%,rgba(252,250,244,.35) 72%)} } .hero-grid{display:grid;grid-template-columns:1.05fr .95fr;min-height:min(86vh,740px)} .hero-copy{display:flex;flex-direction:column;justify-content:center; padding:clamp(48px,7vw,96px) clamp(28px,5vw,80px);color:var(--text);position:relative;z-index:2} .hero-copy .eyebrow{color:var(--gold-deep)} .hero-title{font-family:var(--serif);font-weight:600; font-size:clamp(2.1rem,4.6vw,3.55rem);line-height:1.4;letter-spacing:.04em;color:var(--ink)} .hero-title .accent{color:var(--gold)} .hero-sub{margin-top:1.6em;max-width:30em;color:var(--text-soft);font-size:clamp(1rem,1.4vw,1.12rem);line-height:2} .hero-actions{display:flex;flex-wrap:wrap;gap:1rem;margin-top:2.4em} .hero-media{position:relative;overflow:hidden;background:var(--paper-3)} .hero-media img{width:100%;height:100%;object-fit:cover;object-position:center 22%; filter:saturate(1.02) contrast(1.02)} .hero-media::after{content:"";position:absolute;inset:auto 0 0 0;height:40%; background:linear-gradient(to top,rgba(18,42,35,.62),rgba(18,42,35,0))} .hero-name{position:absolute;left:clamp(20px,4vw,44px);bottom:clamp(20px,4vw,40px);z-index:3;color:#fff} .hero-name b{font-family:var(--serif);font-size:1.15rem;letter-spacing:.08em;display:block} .hero-name span{font-size:.72rem;letter-spacing:.16em;color:#ece5d4;opacity:.95} /* particle motif */ .hero-particles{position:absolute;inset:0;z-index:1;opacity:.5;pointer-events:none} @media (max-width:860px){ .hero-grid{grid-template-columns:1fr;min-height:0} .hero-media{order:-1;height:min(56vh,440px)} .hero-media::after{height:50%;background:linear-gradient(to top,rgba(18,42,35,.6),rgba(18,42,35,0))} .hero-copy{padding:clamp(40px,8vw,64px) var(--gut) clamp(52px,9vw,72px)} } /* ===================================================================== Marquee concept strip ===================================================================== */ .concepts{border-block:1px solid var(--line);background:var(--paper);overflow:hidden} .concepts-track{display:flex;gap:0;white-space:nowrap;will-change:transform; animation:marquee 38s linear infinite} .concepts:hover .concepts-track{animation-play-state:paused} @keyframes marquee{to{transform:translateX(-50%)}} .concepts-track span{display:inline-flex;align-items:center;gap:1.4rem;padding:1.15em 1.4rem; font-family:var(--serif);font-size:clamp(1rem,1.7vw,1.3rem);color:var(--ink);letter-spacing:.08em} .concepts-track span::after{content:"●";font-size:.5em;vertical-align:middle;color:var(--gold)} .concepts-track span:nth-of-type(6n+1)::after{color:var(--umeboshi)} .concepts-track span:nth-of-type(6n+2)::after{color:var(--carrot)} .concepts-track span:nth-of-type(6n+3)::after{color:var(--turmeric)} .concepts-track span:nth-of-type(6n+4)::after{color:var(--matcha)} .concepts-track span:nth-of-type(6n+5)::after{color:var(--eggplant)} .concepts-track span:nth-of-type(6n)::after{color:var(--indigo)} @media (prefers-reduced-motion: reduce){.concepts-track{animation:none;white-space:normal;flex-wrap:wrap;justify-content:center}} /* ===================================================================== Generic content blocks ===================================================================== */ .grid-2{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,72px);align-items:center} .grid-2.reverse .col-media{order:2} @media (max-width:820px){.grid-2{grid-template-columns:1fr}.grid-2.reverse .col-media{order:0}} .figure{position:relative} .figure img{width:100%;border-radius:var(--r);box-shadow:0 24px 60px -30px rgba(22,48,42,.5)} .figure--framed{padding:14px;background:var(--white);border:1px solid var(--line);box-shadow:0 30px 70px -40px rgba(22,48,42,.4)} .figure--framed img{border-radius:0} .figure-tag{position:absolute;background:var(--ink);color:#f2efe4;font-size:.72rem;letter-spacing:.14em; padding:.6em 1.1em;border-radius:2px;font-weight:600} .figure-tag.br{right:-10px;bottom:22px} .figure-tag.bl{left:-10px;bottom:22px} .prose p{margin-bottom:1.35em;max-width:40em} .prose p:last-child{margin-bottom:0} .pullquote{font-family:var(--serif);font-size:clamp(1.3rem,2.6vw,1.85rem);line-height:1.9; color:var(--ink);letter-spacing:.04em;position:relative;padding-left:1.1em} .pullquote::before{content:"";position:absolute;left:0;top:.2em;bottom:.2em;width:3px; background:linear-gradient(var(--gold),var(--sage))} .pullquote[style*="center"]::before{display:none} .pullquote cite{display:block;font-family:var(--sans);font-style:normal;font-size:.85rem; color:var(--text-soft);letter-spacing:.1em;margin-top:1.4em;font-weight:600} /* ===================================================================== Cards ===================================================================== */ .cards{display:grid;gap:clamp(16px,2vw,24px)} .cards.c3{grid-template-columns:repeat(3,1fr)} .cards.c2{grid-template-columns:repeat(2,1fr)} .cards.c4{grid-template-columns:repeat(4,1fr)} @media (max-width:900px){.cards.c3,.cards.c4{grid-template-columns:repeat(2,1fr)}} @media (max-width:600px){.cards.c2,.cards.c3,.cards.c4{grid-template-columns:1fr}} .card{--accent:var(--gold);--accent-d:var(--gold-deep); background:var(--white);border:1px solid var(--line);border-radius:var(--r); padding:clamp(24px,3vw,34px);transition:.4s var(--ease);position:relative;overflow:hidden;height:100%} .card::before{content:"";position:absolute;left:0;top:0;height:3px;width:0;background:var(--accent);transition:width .45s var(--ease)} .card:hover{transform:translateY(-4px);box-shadow:0 26px 50px -30px rgba(22,48,42,.45);border-color:var(--paper-3)} .card:hover::before{width:100%} .card .num{font-family:var(--serif);font-size:1.05rem;color:var(--accent-d);letter-spacing:.2em;font-weight:700} .card h3{margin:.7em 0 .55em;font-size:1.18rem} .card p{font-size:.94rem;color:var(--text-soft);line-height:1.9} .card .ic{width:46px;height:46px;margin-bottom:1rem;color:var(--accent)} /* ingredient color-coding (usable on any component via --accent) */ .c-ume{--accent:var(--umeboshi);--accent-d:var(--umeboshi-d)} .c-carrot{--accent:var(--carrot);--accent-d:var(--carrot-d)} .c-turmeric{--accent:var(--turmeric);--accent-d:var(--turmeric-d)} .c-matcha{--accent:var(--matcha);--accent-d:var(--matcha-d)} .c-eggplant{--accent:var(--eggplant);--accent-d:var(--eggplant-d)} .c-indigo{--accent:var(--indigo);--accent-d:var(--indigo-d)} .card ul.tags{display:flex;flex-wrap:wrap;gap:.4em;margin-top:1.2em} .card ul.tags li{font-size:.74rem;letter-spacing:.06em;color:var(--ink);background:var(--paper-2); border:1px solid var(--line);padding:.35em .8em;border-radius:20px} /* Service list (metagen-style concrete menu) */ .svc{border-top:1px solid var(--line)} .svc-item{display:grid;grid-template-columns:auto 1fr auto;gap:clamp(20px,4vw,54px);align-items:start; padding:clamp(28px,4vw,44px) 0;border-bottom:1px solid var(--line);transition:.4s var(--ease)} .svc-item:hover{background:var(--paper-2)} .svc-item .no{font-family:var(--serif);font-size:1.05rem;color:var(--gold);letter-spacing:.1em;padding-top:.15em} .svc-item h3{font-size:clamp(1.2rem,2vw,1.5rem);margin-bottom:.6em} .svc-item p{color:var(--text-soft);font-size:.98rem;max-width:46em} .svc-item .for{margin-top:1em;font-size:.82rem;color:var(--ink);font-weight:600;letter-spacing:.05em} .svc-item .for b{color:var(--sage);font-weight:700} .svc-item .go{align-self:center;color:var(--gold);font-size:1.4rem} @media (max-width:720px){.svc-item{grid-template-columns:auto 1fr}.svc-item .go{display:none}} /* ===================================================================== Immunity visualization feature ===================================================================== */ .viz{position:relative;border-radius:var(--r);overflow:hidden;background: radial-gradient(120% 120% at 15% 10%,#34614f 0%,#285046 60%);min-height:340px; display:flex;align-items:center;justify-content:center; box-shadow:0 24px 60px -30px rgba(22,48,42,.5)} .viz svg{width:100%;height:auto;max-width:520px} .viz img{width:100%;height:100%;object-fit:cover} /* Stats */ .stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line); border:1px solid var(--line);border-radius:var(--r);overflow:hidden} .stats .stat{background:var(--paper);padding:clamp(24px,3vw,38px) clamp(18px,2vw,28px);text-align:center} .bg-ink .stats{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.14)} .bg-ink .stats .stat{background:var(--ink)} .stat .big{font-family:var(--serif);font-size:clamp(2rem,4vw,2.9rem);color:var(--gold);line-height:1;letter-spacing:.02em} .bg-ink .stat .big{color:var(--gold-soft)} .stat .lbl{font-size:.82rem;color:var(--text-soft);margin-top:.9em;letter-spacing:.06em} .bg-ink .stat .lbl{color:#c2ccc2} .stats .stat:nth-child(1) .big{color:var(--umeboshi-d)} .stats .stat:nth-child(2) .big{color:var(--carrot-d)} .stats .stat:nth-child(3) .big{color:var(--matcha-d)} .stats .stat:nth-child(4) .big{color:var(--indigo-d)} @media (max-width:720px){.stats{grid-template-columns:repeat(2,1fr)}} /* ===================================================================== FAQ / AIO Q&A (accordion) ===================================================================== */ .faq{border-top:1px solid var(--line)} .faq details{border-bottom:1px solid var(--line)} .faq summary{display:flex;align-items:flex-start;gap:1rem;padding:1.5em 0;cursor:pointer; font-family:var(--serif);font-size:clamp(1.05rem,1.7vw,1.25rem);color:var(--ink); list-style:none;font-weight:600;letter-spacing:.03em;transition:color .3s} .faq summary::-webkit-details-marker{display:none} .faq summary .q{color:var(--gold);font-family:var(--serif);flex:none} .faq summary .plus{margin-left:auto;flex:none;width:20px;height:20px;position:relative;margin-top:.35em} .faq summary .plus::before,.faq summary .plus::after{content:"";position:absolute;background:var(--gold); left:50%;top:50%;transition:.35s var(--ease)} .faq summary .plus::before{width:2px;height:16px;transform:translate(-50%,-50%)} .faq summary .plus::after{width:16px;height:2px;transform:translate(-50%,-50%)} .faq details[open] summary .plus::before{transform:translate(-50%,-50%) rotate(90deg);opacity:0} .faq summary:hover{color:var(--gold)} .faq .a{padding:0 0 1.7em 2.4em;color:var(--text-soft);line-height:2;max-width:52em} .faq .a p{margin-bottom:1em} .faq .a p:last-child{margin-bottom:0} /* ===================================================================== News ===================================================================== */ .news-list{border-top:1px solid var(--line)} .news-item{display:grid;grid-template-columns:auto auto 1fr auto;gap:clamp(14px,2.5vw,32px);align-items:center; padding:1.4em 0;border-bottom:1px solid var(--line);transition:.35s var(--ease)} .news-item:hover{background:var(--paper-2);padding-inline:1rem} .news-item time{font-family:var(--serif);color:var(--text-soft);font-size:.9rem;letter-spacing:.08em;white-space:nowrap} .news-item .cat{font-size:.72rem;font-weight:700;letter-spacing:.1em;color:var(--sage); border:1px solid var(--sage-soft);border-radius:20px;padding:.3em .9em;white-space:nowrap} .news-item .ttl{font-size:.98rem;color:var(--ink);font-weight:500} .news-item .go{color:var(--gold)} @media (max-width:640px){ .news-item{grid-template-columns:auto 1fr;row-gap:.4em} .news-item .go{display:none} .news-item .ttl{grid-column:1/-1} } /* ===================================================================== Profile / credentials ===================================================================== */ .cred{display:grid;gap:0} .cred-row{display:grid;grid-template-columns:200px 1fr;gap:1.5rem;padding:1.15em 0;border-bottom:1px solid var(--line)} .cred-row dt{font-weight:700;color:var(--ink);font-size:.9rem;letter-spacing:.06em} .cred-row dd{color:var(--text-soft);font-size:.95rem} .cred-row dd b{color:var(--ink);font-weight:600} @media (max-width:640px){.cred-row{grid-template-columns:1fr;gap:.3rem;padding:1em 0}} .timeline{position:relative;padding-left:1.6rem} .timeline::before{content:"";position:absolute;left:5px;top:.4em;bottom:.4em;width:1px;background:var(--line)} .timeline li{position:relative;padding:0 0 1.7em 1.4rem} .timeline li::before{content:"";position:absolute;left:-1.6rem;top:.55em;width:11px;height:11px; border-radius:50%;background:var(--paper);border:2px solid var(--gold)} .timeline li:last-child{padding-bottom:0} .timeline .yr{font-family:var(--serif);color:var(--gold-deep);font-weight:700;letter-spacing:.06em;font-size:.92rem} .timeline .ev{color:var(--text);margin-top:.15em} /* ===================================================================== Contact / form ===================================================================== */ .form{display:grid;gap:1.5rem} .field{display:grid;gap:.55rem} .field label{font-weight:700;font-size:.9rem;color:var(--ink);letter-spacing:.04em} .field label .req{color:var(--gold);font-size:.78rem;margin-left:.5em;font-weight:600} .field input,.field textarea,.field select{ font-family:inherit;font-size:1rem;color:var(--text);background:var(--white); border:1px solid var(--line);border-radius:var(--r);padding:.9em 1em;transition:.3s;width:100%} .field input:focus,.field textarea:focus,.field select:focus{outline:none;border-color:var(--gold); box-shadow:0 0 0 3px rgba(169,126,53,.14)} .field textarea{resize:vertical;min-height:150px} .field.row2{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem} @media (max-width:600px){.field.row2{grid-template-columns:1fr}} .form-note{font-size:.85rem;color:var(--text-soft);line-height:1.8} .check{display:flex;gap:.7em;align-items:flex-start;font-size:.9rem;color:var(--text-soft)} .check input{width:auto;margin-top:.3em} .form-status{padding:1em 1.2em;border-radius:var(--r);font-size:.9rem;display:none} .form-status.ok{display:block;background:#e8f0e6;color:#2f5a2c;border:1px solid var(--sage-soft)} .form-status.err{display:block;background:#f6e8e8;color:#8a3232;border:1px solid #d9a5a5} .contact-aside{background:var(--paper-2);border:1px solid var(--line);border-radius:var(--r);padding:clamp(28px,3vw,40px)} .contact-aside h3{margin-bottom:1rem} .contact-aside dl{display:grid;gap:1.1rem;margin-top:1.2rem} .contact-aside dt{font-size:.76rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-deep);font-weight:700} .contact-aside dd{color:var(--text);font-size:.98rem;margin-top:.2em} /* ===================================================================== CTA band ===================================================================== */ .cta-band{position:relative;overflow:hidden;background: radial-gradient(130% 130% at 85% 0%,#34614f 0%,#264a40 55%);color:#f2efe4;text-align:center} .cta-band .wrap{position:relative;z-index:2;padding-block:clamp(64px,9vw,110px)} .cta-band h2{color:#f7f4ea;margin-bottom:.7em} .cta-band p{color:#c3cabf;max-width:40em;margin:0 auto 2.2em} .cta-band .particles{position:absolute;inset:0;z-index:1;opacity:.35} /* ===================================================================== Footer ===================================================================== */ .site-footer{background:var(--paper-3);color:var(--text-soft);padding-block:clamp(56px,7vw,84px) 2.4rem; border-top:3px solid transparent; border-image:linear-gradient(90deg,var(--umeboshi),var(--carrot),var(--turmeric),var(--matcha),var(--indigo),var(--eggplant)) 1} .footer-top{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:clamp(28px,4vw,56px)} .footer-brand b{font-family:var(--serif);font-size:1.3rem;color:var(--ink);letter-spacing:.06em;display:block} .footer-brand span{font-size:.62rem;letter-spacing:.3em;text-transform:uppercase;color:var(--gold-deep);display:block;margin-top:.6em} .footer-brand p{margin-top:1.4rem;font-size:.88rem;color:var(--text-soft);max-width:26em;line-height:1.95} .footer-col h4{font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-deep);margin-bottom:1.3rem;font-family:var(--sans);font-weight:700} .footer-col ul li{margin-bottom:.85em} .footer-col a{font-size:.9rem;color:var(--text);transition:.3s} .footer-col a:hover{color:var(--ink);padding-left:.3em} .footer-bottom{display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between;align-items:center; margin-top:clamp(40px,5vw,64px);padding-top:2rem;border-top:1px solid var(--line); font-size:.8rem;color:var(--text-soft);letter-spacing:.04em} .footer-bottom a:hover{color:var(--ink)} @media (max-width:760px){.footer-top{grid-template-columns:1fr 1fr}.footer-brand{grid-column:1/-1}} @media (max-width:480px){.footer-top{grid-template-columns:1fr}} /* ===================================================================== Reveal on scroll ===================================================================== */ .reveal{opacity:0;transform:translateY(22px);transition:opacity .8s var(--ease),transform .8s var(--ease)} .reveal.in{opacity:1;transform:none} .reveal.d1{transition-delay:.08s}.reveal.d2{transition-delay:.16s}.reveal.d3{transition-delay:.24s} @media (prefers-reduced-motion: reduce){.reveal{opacity:1;transform:none;transition:none}} /* Breadcrumb / page hero */ .page-hero{background: radial-gradient(80% 90% at 88% 0%,#e9efe2 0%,rgba(233,239,226,0) 60%), linear-gradient(180deg,#fbfaf6 0%,#f3f0e7 100%); color:var(--text);padding-block:clamp(80px,11vw,140px) clamp(40px,6vw,64px);position:relative;overflow:hidden;border-bottom:1px solid var(--line)} .page-hero .particles{position:absolute;inset:0;opacity:.6} .page-hero .wrap{position:relative;z-index:2} .page-hero .eyebrow{color:var(--gold-deep)} .page-hero h1{color:var(--ink);font-size:clamp(2rem,4.4vw,3rem);letter-spacing:.05em} .page-hero p{color:var(--text-soft);margin-top:1.2em;max-width:40em;line-height:2} .crumb{display:flex;gap:.6em;font-size:.78rem;color:var(--text-soft);margin-bottom:1.6em;letter-spacing:.06em} .crumb a:hover{color:var(--gold)} .crumb span{color:var(--line)} .note-box{background:var(--paper-2);border:1px solid var(--line);border-left:3px solid var(--gold); border-radius:var(--r);padding:1.3em 1.5em;font-size:.9rem;color:var(--text-soft);line-height:1.9} .note-box b{color:var(--ink)} /* Utility */ .mt-s{margin-top:1rem}.mt-m{margin-top:2rem}.mt-l{margin-top:3rem} .center{text-align:center} .divider{height:1px;background:var(--line);border:0;margin-block:clamp(48px,6vw,80px)} .tag-row{display:flex;flex-wrap:wrap;gap:.6em;margin-top:1.5em} .tag{font-size:.78rem;letter-spacing:.06em;color:var(--ink);background:var(--paper-2); border:1px solid var(--line);padding:.4em .95em;border-radius:20px} .skip-link{position:absolute;left:-9999px;top:0;background:var(--ink);color:#fff;padding:.8em 1.2em;z-index:200} .skip-link:focus{left:0} /* ===================================================================== Ingredient spectrum — 食材の色は、免疫の色。 ===================================================================== */ .spectrum-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:clamp(14px,1.8vw,26px)} @media (max-width:900px){.spectrum-grid{grid-template-columns:repeat(3,1fr)}} @media (max-width:460px){.spectrum-grid{grid-template-columns:repeat(2,1fr)}} .ingredient{text-align:center} .ingredient .swatch{aspect-ratio:1;border-radius:50%;display:grid;place-items:center;width:100%; margin-bottom:1em;transition:transform .4s var(--ease),box-shadow .4s var(--ease); box-shadow:0 16px 30px -16px rgba(30,61,52,.5)} .ingredient .swatch svg{width:50%;height:50%} .ingredient:hover .swatch{transform:translateY(-7px) scale(1.04);box-shadow:0 22px 38px -16px rgba(30,61,52,.55)} .ingredient b{display:block;font-family:var(--serif);font-size:1.02rem;color:var(--ink);letter-spacing:.03em} .ingredient .fn{display:block;font-size:.76rem;color:var(--text-soft);margin-top:.35em;letter-spacing:.02em} .sw-ume{background:radial-gradient(circle at 32% 28%,#e8705f,#c9402f)} .sw-carrot{background:radial-gradient(circle at 32% 28%,#ef8f4a,#cf6415)} .sw-turmeric{background:radial-gradient(circle at 32% 28%,#f4c23f,#e0980a)} .sw-matcha{background:radial-gradient(circle at 32% 28%,#9cbf5c,#6f9330)} .sw-eggplant{background:radial-gradient(circle at 32% 28%,#946bad,#6a4183)} .sw-indigo{background:radial-gradient(circle at 32% 28%,#4d97b2,#256a86)} /* colorful floating dots for hero / bands */ .dot-field{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden} .dot-field span{position:absolute;border-radius:50%;opacity:.85} @media (prefers-reduced-motion: no-preference){ .dot-field span{animation:floaty 9s ease-in-out infinite} } @keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}} /* ===================================================================== AIO page components ===================================================================== */ /* Fact stats with source */ .facts{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,24px)} @media (max-width:820px){.facts{grid-template-columns:1fr}} .fact{--accent:var(--gold);--accent-d:var(--gold-deep); background:var(--white);border:1px solid var(--line);border-radius:var(--r); padding:clamp(24px,3vw,36px);position:relative;overflow:hidden;transition:.4s var(--ease)} .fact::before{content:"";position:absolute;left:0;top:0;width:100%;height:4px;background:var(--accent)} .fact:hover{transform:translateY(-4px);box-shadow:0 26px 50px -30px rgba(22,48,42,.4)} .fact .big{font-family:var(--serif);font-size:clamp(2.6rem,6vw,3.6rem);line-height:1;color:var(--accent-d);letter-spacing:.02em} .fact h3{font-size:1.06rem;margin:.7em 0 .5em} .fact p{font-size:.9rem;color:var(--text-soft);line-height:1.85} .fact .src{display:block;margin-top:1.1em;padding-top:.9em;border-top:1px solid var(--line); font-size:.7rem;color:var(--text-soft);opacity:.85;line-height:1.6} /* Lead / person cards */ .leads{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,3vw,32px)} @media (max-width:760px){.leads{grid-template-columns:1fr}} .person{--accent:var(--gold);--accent-d:var(--gold-deep); background:var(--white);border:1px solid var(--line);border-radius:var(--r);overflow:hidden} .person-top{display:flex;gap:1.2rem;align-items:center;padding:clamp(22px,2.6vw,30px); border-bottom:1px solid var(--line)} .person-photo{width:100px;height:100px;border-radius:50%;object-fit:cover;flex:none; border:3px solid var(--paper-2);box-shadow:0 8px 20px -10px rgba(22,48,42,.5)} .person .role{font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-d);font-weight:700} .person .nm{font-family:var(--serif);font-size:1.32rem;color:var(--ink);margin-top:.25em;letter-spacing:.03em} .person .sub{font-size:.84rem;color:var(--text-soft);margin-top:.35em;line-height:1.6} .person ul{padding:clamp(20px,2.4vw,26px);display:grid;gap:.7em} .person li{position:relative;padding-left:1.4em;font-size:.9rem;color:var(--text-soft);line-height:1.75} .person li::before{content:"";position:absolute;left:0;top:.55em;width:7px;height:7px;border-radius:50%;background:var(--accent)} /* Pricing plans */ .plans{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,24px)} @media (max-width:820px){.plans{grid-template-columns:1fr}} .plan{background:var(--white);border:1px solid var(--line);border-radius:var(--r); padding:clamp(28px,3vw,38px);text-align:center;transition:.4s var(--ease);position:relative;overflow:hidden} .plan::before{content:"";position:absolute;left:0;top:0;width:0;height:4px;background:var(--gold);transition:width .45s var(--ease)} .plan:hover{transform:translateY(-5px);box-shadow:0 28px 54px -30px rgba(22,48,42,.42)} .plan:hover::before{width:100%} .plan .tag{font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-deep);font-weight:700} .plan .nm{font-family:var(--serif);font-size:1.18rem;color:var(--ink);margin:.9em 0 .8em;min-height:2.8em;display:flex;align-items:center;justify-content:center} .plan .price{font-family:var(--serif);font-size:clamp(1.9rem,4vw,2.5rem);color:var(--ink);line-height:1} .plan .price small{font-size:.42em;color:var(--text-soft);font-family:var(--sans);letter-spacing:.04em} .plan .unit{font-size:.82rem;color:var(--text-soft);margin-top:.9em;letter-spacing:.04em} /* horizontal numbered flow */ .flow{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,1.6vw,20px)} @media (max-width:820px){.flow{grid-template-columns:repeat(2,1fr)}} @media (max-width:460px){.flow{grid-template-columns:1fr}} .flow-step{position:relative;background:var(--paper);border:1px solid var(--line);border-radius:var(--r); padding:clamp(20px,2.4vw,28px)} .flow-step .st{font-family:var(--serif);font-size:.85rem;color:var(--gold-deep);letter-spacing:.14em;font-weight:700} .flow-step h3{font-size:1.05rem;margin:.5em 0 .45em} .flow-step p{font-size:.86rem;color:var(--text-soft);line-height:1.75}