/* ========================================================= I'M INTERIOR — Natural / Warm Editorial palettes are swapped via [data-palette] on ========================================================= */ :root, :root[data-palette="oak"]{ --bg: #f5efe4; /* cream */ --bg-2: #ede4d3; /* deeper cream */ --paper: #faf6ee; --ink: #1c1a17; --ink-2: #3a342c; --muted: #7a6f60; --line: #d8cdb8; --accent: #8a6a3b; /* oak */ --accent-2: #b08a55; /* light oak */ --leaf: #6e7860; /* sage */ --hot: #b8472f; /* terracotta for NEW badge */ --dark: #1c1a17; --on-dark: #f5efe4; } :root[data-palette="walnut"]{ --bg: #efe7d8; --bg-2: #e2d6bf; --paper: #f6efe1; --ink: #221710; --ink-2: #3e2a1d; --muted: #7a6450; --line: #d2c1a4; --accent: #6f3f1f; /* walnut */ --accent-2: #a06d3f; --leaf: #5e5536; --hot: #a3411c; --dark: #2a1a10; --on-dark: #efe7d8; } :root[data-palette="sumi"]{ --bg: #f3f1ec; /* cool paper */ --bg-2: #e7e3da; --paper: #fbfaf6; --ink: #15161a; --ink-2: #2a2c33; --muted: #6b6d75; --line: #cfcdc4; --accent: #232428; /* sumi black */ --accent-2: #525559; --leaf: #4f5851; --hot: #8a3a26; --dark: #15161a; --on-dark: #f3f1ec; } /* ---------- Base ---------- */ *{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth} body{ background:var(--bg); color:var(--ink); font-family:'Zen Kaku Gothic New','Hiragino Sans','Helvetica Neue',sans-serif; font-weight:400; font-feature-settings:"palt" 1; line-height:1.75; text-rendering:optimizeLegibility; -webkit-font-smoothing:antialiased; overflow-x:hidden; } img{max-width:100%;display:block} a{color:inherit;text-decoration:none} button{font:inherit;color:inherit;cursor:pointer;background:none;border:0} em{font-style:normal} ::selection{background:var(--ink);color:var(--bg)} /* ---------- NAV ---------- */ .nav{ position:fixed;top:0;left:0;right:0;z-index:50; display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:48px; padding:18px 40px; background:color-mix(in oklab, var(--bg) 88%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom:1px solid color-mix(in oklab, var(--line) 60%, transparent); } .nav__logo{display:flex;align-items:center;gap:12px} .nav__logo-mark{ display:grid;place-items:center; width:44px;height:44px; background:var(--ink);color:var(--bg); font-family:'Cormorant Garamond',serif;font-size:18px;font-weight:600;letter-spacing:.04em; } .nav__logo-text{display:flex;flex-direction:column;line-height:1.15} .nav__logo-jp{font-family:'Shippori Mincho',serif;font-weight:600;font-size:17px;letter-spacing:.05em} .nav__logo-sub{font-family:'Cormorant Garamond',serif;font-size:11px;letter-spacing:.18em;color:var(--muted)} .nav__links{display:flex;gap:32px;justify-content:center} .nav__links a{ font-size:14px;letter-spacing:.04em;font-weight:500; padding:6px 0;position:relative; } .nav__links a::after{ content:"";position:absolute;left:0;right:0;bottom:-2px;height:1px; background:var(--ink);transform:scaleX(0);transform-origin:left; transition:transform .35s ease; } .nav__links a:hover::after{transform:scaleX(1)} .nav__cta{ display:inline-flex;align-items:center;gap:8px; padding:11px 20px;background:var(--ink);color:var(--bg); font-size:13px;letter-spacing:.06em; transition:transform .25s ease, background .25s ease; } .nav__cta:hover{background:var(--accent);transform:translateY(-1px)} .nav__menu{display:none;width:36px;height:36px;flex-direction:column;justify-content:center;gap:5px;padding:0 6px} .nav__menu span{display:block;height:1.5px;background:var(--ink)} /* ---------- HERO ---------- */ .hero{ position:relative;min-height:100vh; padding:160px 40px 64px; display:grid;grid-template-rows:auto 1fr auto auto auto;gap:28px; overflow:hidden; } .hero__media{ position:absolute;inset:0;z-index:0; } .hero__media img{ width:100%;height:100%;object-fit:cover; filter:saturate(.85) brightness(.95); } .hero__tint{ position:absolute;inset:0; background: linear-gradient(120deg, var(--bg) 0%, color-mix(in oklab, var(--bg) 85%, transparent) 45%, transparent 75%), linear-gradient(0deg, var(--bg) 0%, transparent 30%); } .hero > :not(.hero__media){position:relative;z-index:1} .hero__overline{ display:flex;align-items:center;gap:20px; font-size:12px;letter-spacing:.22em;color:var(--ink-2); } .hero__overline-num{font-family:'Cormorant Garamond',serif;font-style:italic;font-size:15px;letter-spacing:.1em} .hero__overline-line{flex:1;max-width:140px;height:1px;background:var(--ink-2)} .hero__title{ font-family:'Shippori Mincho',serif; font-weight:500; font-size:clamp(48px, 8vw, 116px); line-height:1.08;letter-spacing:-.01em; color:var(--ink); max-width:1100px; } .hero__title-line{display:block} .hero__title em{ font-style:italic; font-family:'Cormorant Garamond','Shippori Mincho',serif; font-weight:500; color:var(--accent); } .hero__lead{ max-width:520px;font-size:16px;line-height:2;color:var(--ink-2); } .hero__actions{display:flex;gap:16px;flex-wrap:wrap} .btn{ display:inline-flex;align-items:center;gap:10px; padding:16px 32px;font-size:14px;letter-spacing:.08em; transition:all .25s ease;cursor:pointer; } .btn--primary{background:var(--ink);color:var(--bg)} .btn--primary:hover{background:var(--accent);transform:translateY(-2px)} .btn--ghost{border:1px solid var(--ink);color:var(--ink)} .btn--ghost:hover{background:var(--ink);color:var(--bg)} .btn--light{border-color:var(--on-dark);color:var(--on-dark)} .btn--light:hover{background:var(--on-dark);color:var(--dark)} .hero__meta{ display:grid;grid-template-columns:repeat(4,1fr);gap:0; border-top:1px solid var(--line); margin-top:24px;padding-top:24px; max-width:780px; } .hero__meta > div{ padding:0 24px; border-left:1px solid var(--line); } .hero__meta > div:first-child{border-left:0;padding-left:0} .hero__meta dt{font-size:11px;letter-spacing:.18em;color:var(--muted);margin-bottom:6px} .hero__meta dd{font-family:'Cormorant Garamond',serif;font-size:42px;font-weight:500;color:var(--ink);line-height:1} .hero__meta dd span{font-family:'Shippori Mincho',serif;font-size:14px;margin-left:4px;color:var(--ink-2)} .hero__scroll{ position:absolute;right:40px;bottom:40px;z-index:2; font-family:'Cormorant Garamond',serif;font-style:italic;font-size:13px;letter-spacing:.3em; color:var(--muted);writing-mode:vertical-rl; animation:scrolldown 2.4s ease-in-out infinite; } @keyframes scrolldown{ 0%,100%{transform:translateY(0);opacity:.6} 50%{transform:translateY(8px);opacity:1} } /* ---------- Section shared ---------- */ section{padding:120px 40px;position:relative} .section__head{max-width:1280px;margin:0 auto 64px;} .section__eyebrow{ display:inline-block; font-family:'Cormorant Garamond',serif;font-style:italic; font-size:14px;letter-spacing:.2em;color:var(--accent); margin-bottom:20px; } .section__eyebrow--light{color:color-mix(in oklab, var(--on-dark) 80%, var(--accent-2))} .section__title{ font-family:'Shippori Mincho',serif;font-weight:500; font-size:clamp(34px, 4.6vw, 64px);line-height:1.18;letter-spacing:-.005em; color:var(--ink); } .section__title--lg{font-size:clamp(38px,5.5vw,80px)} .section__title--light{color:var(--on-dark)} .section__title em{font-style:italic;font-family:'Cormorant Garamond','Shippori Mincho',serif;color:var(--accent)} .section__lead{margin-top:18px;max-width:640px;color:var(--ink-2);font-size:15px;line-height:1.9} .more-link{ display:inline-flex;align-items:center;gap:14px; margin:0 auto;font-size:14px;letter-spacing:.08em; border-bottom:1px solid var(--ink);padding-bottom:6px; } .more-link span{transition:transform .3s ease} .more-link:hover span{transform:translateX(8px)} /* ---------- STRENGTHS ---------- */ .strengths{background:var(--paper)} .strengths__grid{ max-width:1280px;margin:0 auto; display:grid;grid-template-columns:repeat(3,1fr);gap:0; border-top:1px solid var(--line); } .strength{ padding:48px 40px 56px; border-left:1px solid var(--line); border-bottom:1px solid var(--line); position:relative; transition:background .3s ease; } .strength:first-child{border-left:0} .strength:hover{background:color-mix(in oklab, var(--bg-2) 60%, var(--paper))} .strength__num{ font-family:'Cormorant Garamond',serif;font-style:italic; font-size:14px;letter-spacing:.15em;color:var(--accent);margin-bottom:24px; } .strength__title{ font-family:'Shippori Mincho',serif;font-weight:500; font-size:26px;line-height:1.4;margin-bottom:18px;color:var(--ink); } .strength__body{color:var(--ink-2);font-size:14.5px;line-height:1.95;margin-bottom:32px} .strength__tag{ font-family:'Cormorant Garamond',serif;font-style:italic;font-size:13px; color:var(--muted);padding-top:16px;border-top:1px solid var(--line); } /* ---------- NEWS ---------- */ .news__filters{ display:flex;gap:8px;justify-content:center;flex-wrap:wrap; max-width:1280px;margin:0 auto 40px; } .chip{ padding:9px 22px;border:1px solid var(--line); font-size:13px;letter-spacing:.06em;color:var(--ink-2); transition:all .2s ease; } .chip:hover{border-color:var(--ink)} .chip.is-on{background:var(--ink);color:var(--bg);border-color:var(--ink)} .news__list{list-style:none;max-width:1280px;margin:0 auto;border-top:1px solid var(--line)} .news__item{ display:grid; grid-template-columns:160px 80px 140px 1fr 32px; align-items:center;gap:24px; padding:24px 16px; border-bottom:1px solid var(--line); transition:background .25s ease; cursor:pointer; } .news__item:hover{background:var(--paper)} .news__item time{ font-family:'Cormorant Garamond',serif;font-style:italic; font-size:18px;color:var(--muted);letter-spacing:.04em; } .news__badge{ display:inline-grid;place-items:center; width:62px;height:24px;font-size:11px;letter-spacing:.12em; } .news__badge--new{background:var(--hot);color:#fff} .news__badge--in{background:var(--leaf);color:#fff} .news__badge--ex{background:var(--ink);color:var(--bg)} .news__badge--out{background:transparent;color:var(--muted);border:1px solid var(--muted)} .news__maker{ font-family:'Shippori Mincho',serif;font-size:13px;color:var(--accent); letter-spacing:.06em; } .news__item h3{font-size:15.5px;font-weight:500;color:var(--ink);line-height:1.55} .news__arrow{color:var(--muted);font-size:18px;transition:transform .25s ease} .news__item:hover .news__arrow{transform:translateX(6px);color:var(--ink)} .news + .more-link{display:flex;width:fit-content;margin:48px auto 0} /* ---------- PICKUP ---------- */ .pickup{background:var(--paper)} .pickup__featured{ max-width:1280px;margin:0 auto 24px; display:grid;grid-template-columns:1.5fr 1fr;gap:24px; } .pickup__col{display:grid;grid-template-rows:1fr 1fr;gap:24px} .pickup__grid{ max-width:1280px;margin:0 auto; display:grid;grid-template-columns:repeat(4,1fr);gap:24px; } .pickup-card{ display:flex;flex-direction:column; background:var(--bg); transition:transform .35s ease; overflow:hidden; } .pickup-card:hover{transform:translateY(-4px)} .pickup-card__img{aspect-ratio:4/3;overflow:hidden;background:var(--bg-2)} .pickup-card__img img{width:100%;height:100%;object-fit:cover;transition:transform .8s ease} .pickup-card:hover .pickup-card__img img{transform:scale(1.04)} .pickup-card__body{padding:20px 24px 28px;flex:1;display:flex;flex-direction:column;gap:8px} .pickup-card__row{display:flex;align-items:center;justify-content:space-between;margin-bottom:4px} .pickup-card__maker{font-family:'Shippori Mincho',serif;font-size:12px;color:var(--accent);letter-spacing:.08em} .pickup-card__tag{font-size:10px;letter-spacing:.14em;padding:3px 10px;background:var(--hot);color:#fff} .pickup-card__tag--in{background:var(--leaf)} .pickup-card h3{ font-family:'Shippori Mincho',serif;font-weight:500; font-size:17px;line-height:1.5;color:var(--ink); } .pickup-card p{font-size:13.5px;color:var(--ink-2);line-height:1.8;margin-top:4px} .pickup-card__more{margin-top:auto;font-size:12px;letter-spacing:.1em;color:var(--accent);padding-top:12px} .pickup-card--lg{grid-row:span 2} .pickup-card--lg .pickup-card__img{aspect-ratio:5/4} .pickup-card--lg h3{font-size:24px} .pickup-card--lg .pickup-card__body{padding:28px 32px 36px;gap:12px} /* ---------- STORY ---------- */ .story{background:var(--bg-2);padding:140px 40px} .story__inner{ max-width:1280px;margin:0 auto; display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center; } .story__media{position:relative} .story__media img{aspect-ratio:4/5;object-fit:cover;width:100%} .story__badge{ position:absolute;right:-20px;bottom:-20px; width:160px;height:160px;border-radius:50%; background:var(--ink);color:var(--bg); display:grid;place-items:center;text-align:center;line-height:1; font-family:'Cormorant Garamond',serif;letter-spacing:.18em; } .story__badge span{font-size:11px;color:color-mix(in oklab, var(--bg) 70%, transparent);margin:4px 0} .story__badge strong{font-size:38px;font-weight:500;font-style:italic;margin:8px 0} .story__copy p{font-size:15.5px;line-height:2.1;color:var(--ink-2);margin-top:24px} .story__sig{ margin-top:40px;padding-top:24px;border-top:1px solid var(--line); display:flex;align-items:baseline;gap:16px; } .story__sig span{font-size:12px;letter-spacing:.16em;color:var(--muted)} .story__sig strong{font-family:'Shippori Mincho',serif;font-size:22px;font-weight:500} /* ---------- CATEGORY ---------- */ .category__grid{ max-width:1280px;margin:0 auto; display:grid;grid-template-columns:repeat(4,1fr);gap:16px; } .cat{ position:relative;aspect-ratio:3/4;overflow:hidden; background:var(--bg-2); } .cat__img{position:absolute;inset:0} .cat__img img{width:100%;height:100%;object-fit:cover;transition:transform 1s ease} .cat:hover .cat__img img{transform:scale(1.05)} .cat__overlay{ position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end; padding:24px;color:#fff; background:linear-gradient(0deg, rgba(20,18,15,.78) 0%, rgba(20,18,15,.1) 55%, transparent 100%); } .cat__count{font-family:'Cormorant Garamond',serif;font-style:italic;font-size:13px;letter-spacing:.14em;opacity:.85;margin-bottom:8px} .cat__overlay h3{font-family:'Shippori Mincho',serif;font-weight:500;font-size:22px;line-height:1.3} .cat__overlay em{ display:block;font-family:'Cormorant Garamond',serif;font-style:italic; font-size:13px;letter-spacing:.2em;opacity:.7;margin-top:2px; } /* ---------- MAKERS ---------- */ .makers{background:var(--paper)} .makers__wall{ max-width:1280px;margin:0 auto; display:flex;flex-wrap:wrap;gap:0; border-top:1px solid var(--line);border-left:1px solid var(--line); } .makers__wall span{ flex:1 1 220px; padding:28px 24px; font-family:'Shippori Mincho',serif;font-size:17px;font-weight:500; color:var(--ink);letter-spacing:.04em; border-right:1px solid var(--line);border-bottom:1px solid var(--line); text-align:center; background:var(--paper); transition:background .25s ease, color .25s ease; } .makers__wall span:last-child{color:var(--muted);font-style:italic;font-family:'Cormorant Garamond',serif;letter-spacing:.12em} .makers__wall span:hover{background:var(--bg-2);color:var(--accent)} /* ---------- ABOUT ---------- */ .about__list{ max-width:980px;margin:0 auto; border-top:1px solid var(--line); } .about__list > div{ display:grid;grid-template-columns:200px 1fr;gap:32px; padding:22px 16px; border-bottom:1px solid var(--line); } .about__list dt{ font-family:'Shippori Mincho',serif;font-size:14px;font-weight:500;color:var(--accent);letter-spacing:.06em; } .about__list dd{font-size:15px;color:var(--ink);line-height:1.9} /* ---------- RECRUIT ---------- */ .recruit{ background:var(--dark);color:var(--on-dark); padding:140px 40px; } .recruit__inner{ max-width:1280px;margin:0 auto; display:grid;grid-template-columns:1.1fr 1fr;gap:80px;align-items:center; } .recruit__copy .section__title{color:var(--on-dark)} .recruit__copy p{margin-top:24px;color:color-mix(in oklab,var(--on-dark) 75%, var(--muted));line-height:2;font-size:15px} .recruit__jobs{list-style:none;margin:32px 0 40px;border-top:1px solid color-mix(in oklab,var(--on-dark) 25%, transparent)} .recruit__jobs li{ display:flex;justify-content:space-between;align-items:baseline; padding:16px 0;border-bottom:1px solid color-mix(in oklab,var(--on-dark) 25%, transparent); } .recruit__jobs span{font-family:'Shippori Mincho',serif;font-size:19px;font-weight:500} .recruit__jobs em{font-family:'Cormorant Garamond',serif;font-style:italic;font-size:14px;color:color-mix(in oklab,var(--on-dark) 70%, transparent);letter-spacing:.1em} .recruit__media img{aspect-ratio:4/5;object-fit:cover;width:100%} /* ---------- CONTACT ---------- */ .contact__inner{ max-width:1280px;margin:0 auto; display:grid;grid-template-columns:1fr 1.2fr;gap:80px; } .contact__left p{margin-top:18px;color:var(--ink-2);line-height:2;font-size:15px} .contact__direct{margin-top:48px;display:flex;flex-direction:column;gap:32px} .contact__direct > div{padding-left:20px;border-left:2px solid var(--accent)} .contact__direct span{display:block;font-size:12px;color:var(--muted);letter-spacing:.14em;margin-bottom:6px} .contact__direct a{ display:block;font-family:'Cormorant Garamond',serif;font-size:32px;font-weight:500;color:var(--ink); letter-spacing:.04em;line-height:1.2; } .contact__direct em{font-style:normal;font-size:12px;color:var(--muted);letter-spacing:.06em} .contact__form{ background:var(--paper);padding:48px; display:flex;flex-direction:column;gap:20px; } .field label{display:block;font-size:13px;color:var(--ink-2);margin-bottom:8px;letter-spacing:.04em;font-weight:500} .field label span{color:var(--hot);margin-left:4px} .field input, .field textarea{ width:100%;padding:14px 16px; background:var(--bg);border:1px solid var(--line); font:inherit;font-size:14px;color:var(--ink); transition:border-color .2s ease; border-radius:0; } .field input:focus, .field textarea:focus{outline:none;border-color:var(--ink)} .field-row{display:grid;grid-template-columns:1fr 1fr;gap:16px} .seg{display:flex;flex-wrap:wrap;gap:8px} .seg label{ display:inline-flex;align-items:center;cursor:pointer; padding:10px 18px;border:1px solid var(--line);background:var(--bg); font-size:13px;transition:all .2s ease; margin-bottom:0; } .seg input{display:none} .seg input:checked + span{font-weight:600} .seg label:has(input:checked){border-color:var(--ink);background:var(--ink);color:var(--bg)} .check{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--ink-2)} .check input{accent-color:var(--ink)} .contact__done{ margin-top:12px;padding:14px 18px;background:var(--leaf);color:#fff;font-size:13.5px; } /* ---------- FOOTER ---------- */ .footer{background:var(--ink);color:var(--on-dark);padding:80px 40px 28px} .footer__top{ max-width:1280px;margin:0 auto 60px; display:grid;grid-template-columns:1fr 2fr;gap:80px; } .footer__brand{display:flex;gap:18px;align-items:flex-start} .footer__brand .nav__logo-mark{background:var(--on-dark);color:var(--ink)} .footer__brand strong{display:block;font-family:'Shippori Mincho',serif;font-size:20px;font-weight:500;letter-spacing:.04em} .footer__brand em{display:block;font-family:'Cormorant Garamond',serif;font-style:italic;font-size:12px;letter-spacing:.14em;color:color-mix(in oklab,var(--on-dark) 65%, transparent);margin-top:4px} .footer__cols{display:grid;grid-template-columns:repeat(3,1fr);gap:40px} .footer__cols h4{font-family:'Cormorant Garamond',serif;font-style:italic;font-size:14px;letter-spacing:.16em;color:color-mix(in oklab,var(--on-dark) 60%, transparent);margin-bottom:18px;font-weight:500} .footer__cols a{display:block;font-size:14px;padding:5px 0;color:var(--on-dark);transition:color .2s ease} .footer__cols a:hover{color:var(--accent-2)} .footer__bottom{ max-width:1280px;margin:0 auto;padding-top:24px; border-top:1px solid color-mix(in oklab,var(--on-dark) 18%, transparent); display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px; } .footer__bottom small{font-size:12px;color:color-mix(in oklab,var(--on-dark) 60%, transparent);letter-spacing:.06em} /* ========================================================= RESPONSIVE ========================================================= */ @media (max-width: 1100px){ .nav__links{display:none} .nav__menu{display:flex} .nav{grid-template-columns:auto 1fr auto;gap:16px;padding:14px 24px} body.menu-open .nav__links{ display:flex;position:fixed;inset:72px 0 0 0; flex-direction:column;justify-content:flex-start;align-items:flex-start; background:var(--bg);padding:40px 32px;gap:18px;z-index:60; } body.menu-open .nav__links a{font-size:18px;font-family:'Shippori Mincho',serif} section{padding:80px 24px} .hero{padding:120px 24px 48px} .hero__meta{grid-template-columns:repeat(2,1fr);max-width:100%} .hero__meta > div{padding:18px;border-left:0;border-top:1px solid var(--line)} .hero__meta > div:nth-child(odd){border-right:1px solid var(--line)} .hero__meta > div:nth-child(-n+2){border-top:0} .hero__scroll{display:none} .strengths__grid{grid-template-columns:1fr} .strength{border-left:0;border-top:1px solid var(--line)} .strength:first-child{border-top:0} .news__item{ grid-template-columns:auto auto 1fr; grid-template-areas:"date badge maker" "title title title"; gap:12px 16px;padding:20px 8px; } .news__item time{grid-area:date} .news__badge{grid-area:badge} .news__maker{grid-area:maker;text-align:right} .news__item h3{grid-area:title;font-size:15px} .news__arrow{display:none} .pickup__featured{grid-template-columns:1fr} .pickup__col{grid-template-rows:auto;grid-template-columns:1fr 1fr} .pickup__grid{grid-template-columns:repeat(2,1fr)} .pickup-card--lg{grid-row:auto} .story__inner, .recruit__inner, .contact__inner{grid-template-columns:1fr;gap:48px} .story__media img, .recruit__media img{aspect-ratio:4/3} .story__badge{width:120px;height:120px;right:auto;left:20px;bottom:-30px} .category__grid{grid-template-columns:repeat(2,1fr)} .makers__wall span{flex:1 1 50%;font-size:15px;padding:22px 16px} .about__list > div{grid-template-columns:1fr;gap:6px;padding:18px 8px} .contact__form{padding:32px 24px} .field-row{grid-template-columns:1fr} .footer__top{grid-template-columns:1fr;gap:48px} .footer__cols{grid-template-columns:repeat(3,1fr);gap:24px} } @media (max-width:640px){ .pickup__col{grid-template-columns:1fr} .pickup__grid{grid-template-columns:1fr} .category__grid{grid-template-columns:1fr 1fr;gap:8px} .footer__cols{grid-template-columns:1fr 1fr} }