/*
Theme Name: OUTLET DAIKO
Description: OUTLET DAIKO 公式サイト（ブロック・タイル・石材アウトレット）用カスタムテーマ
Author: OUTLET DAIKO
Version: 1.0
Text Domain: outlet-daiko
Requires PHP: 7.4
*/

/* ===== Reset ===== */
*, *::before, *::after { box-sizing: border-box; }
html, body, h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd { margin: 0; }
ul, ol { list-style: none; margin: 0; padding: 0; }
img, svg, video, canvas, audio, iframe, embed, object { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; letter-spacing: inherit; }
button { cursor: pointer; background: none; border: 0; }
small { font-size: 80%; }
:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }

/* ===== Design tokens ===== */
:root { --ink: #26302a; --paper: #f4f0e7; --cream: #ebe4d5; --orange: #d95e2e; --green: #2f4a39; }

html { scroll-behavior: smooth; }

body { background: var(--paper); color: var(--ink); margin: 0px; font-family: "Yu Gothic", "Hiragino Kaku Gothic ProN", system-ui, sans-serif; }

/* Utility: fills the positioned parent, used by every photo in the layout */
.fill-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* ===== Header ===== */
.site-header { z-index: 10; color: rgb(255, 255, 255); border-bottom: 1px solid rgba(255, 255, 255, 0.32); align-items: center; height: 92px; padding: 0px 4.5vw; display: flex; position: absolute; inset: 0px 0px auto; }

.brand { align-items: center; gap: 13px; margin-right: auto; display: flex; }

.brand-logo { height: 40px; width: auto; display: block; }

.brand-tagline { letter-spacing: 0.24em; font: 700 9px / 1 Arial, sans-serif; white-space: nowrap; }

.desktop-nav { align-items: center; gap: 2.4vw; font-size: 13px; font-weight: 700; display: flex; }

.desktop-nav a { padding: 36px 0px; position: relative; }

.desktop-nav a::after { content: ""; background: var(--orange); height: 2px; transition: 0.25s; position: absolute; bottom: 27px; left: 0px; right: 100%; }

.desktop-nav a:hover::after { right: 0px; }

.header-tel { align-items: center; gap: 7px; margin-left: 2vw; font: 700 12px / 1 Arial, sans-serif; letter-spacing: 0.02em; display: flex; }

.header-tel .tel-icon { font-size: 15px; }

.header-contact { background: var(--orange); justify-content: space-between; align-self: stretch; align-items: center; width: 180px; margin-left: 3vw; padding: 0px 24px; font-size: 13px; font-weight: 800; display: flex; }

.header-contact b { font-size: 20px; }

.menu-toggle { z-index: 11; flex-direction: column; justify-content: center; align-items: center; gap: 5px; width: 40px; height: 40px; display: none; }

.menu-toggle span { background: rgb(255, 255, 255); width: 22px; height: 2px; transition: transform 0.25s, opacity 0.25s; display: block; }

.menu-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }

.menu-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }

.menu-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.mobile-nav { z-index: 9; background: var(--green); flex-direction: column; gap: 2px; padding: 108px 24px 28px; display: flex; position: fixed; inset: 0px; overflow-y: auto; transform: translateY(-8px); opacity: 0; pointer-events: none; transition: opacity 0.25s, transform 0.25s; }

.mobile-nav.is-open { opacity: 1; transform: none; pointer-events: auto; }

.mobile-nav a { color: rgb(255, 255, 255); border-bottom: 1px solid rgba(255, 255, 255, 0.14); padding: 18px 4px; font-size: 16px; font-weight: 700; display: block; }

.mobile-nav .mobile-nav-tel { color: rgb(246, 208, 130); margin-top: 18px; font-size: 15px; font-weight: 800; }

/* ===== Hero ===== */
.hero { color: rgb(255, 255, 255); height: min(900px, 92vh); min-height: 680px; position: relative; overflow: hidden; }

.hero > img { object-fit: cover; object-position: center 45%; transform: scale(1.01); }

.hero-shade { background: linear-gradient(90deg, rgba(18, 28, 23, 0.76) 0%, rgba(18, 28, 23, 0.42) 44%, rgba(18, 28, 23, 0.06) 74%), linear-gradient(rgba(0, 0, 0, 0) 65%, rgba(0, 0, 0, 0.2)); position: absolute; inset: 0px; }

.hero-copy { z-index: 2; position: absolute; top: 50%; left: 8.4vw; transform: translateY(-42%); }

.eyebrow, .section-kicker { letter-spacing: 0.22em; margin: 0px 0px 24px; font: 800 11px / 1 Arial, sans-serif; }

.eyebrow { align-items: center; gap: 12px; display: flex; }

.eyebrow span { background: var(--orange); width: 32px; height: 1px; }

.hero h1 { letter-spacing: -0.055em; text-shadow: rgba(0, 0, 0, 0.14) 0px 3px 20px; margin: 0px; font-size: clamp(52px, 6.6vw, 102px); font-weight: 800; line-height: 1.08; }

.hero h1 em { color: rgb(242, 207, 100); font-style: normal; }

.hero h1.hero-slogan { font-size: clamp(46px, 4.8vw, 70px); line-height: 1.12; }

.hero-slogan em { white-space: nowrap; }

.hero-lead { letter-spacing: 0.06em; margin: 28px 0px 34px; font-size: clamp(15px, 1.4vw, 19px); font-weight: 700; line-height: 1.9; }

.hero-actions { gap: 12px; display: flex; }

.button { border: 1px solid rgba(255, 255, 255, 0.55); justify-content: center; align-items: center; gap: 28px; min-height: 58px; padding: 0px 24px; font-size: 13px; font-weight: 800; transition: 0.2s; display: inline-flex; }

.button-primary { background: var(--orange); border-color: var(--orange); }

.button:hover { filter: brightness(1.05); transform: translateY(-2px); }

.hero-badge { z-index: 5; width: 138px; height: 138px; color: var(--ink); background: rgb(241, 198, 76); border-radius: 0px; clip-path: polygon(24% 0px, 74% 3%, 100% 25%, 96% 77%, 76% 100%, 21% 95%, 0px 72%, 4% 23%); flex-direction: column; justify-content: center; align-items: center; display: flex; position: absolute; bottom: 9vh; right: 6.5vw; transform: rotate(7deg); box-shadow: rgba(0, 0, 0, 0.17) 0px 10px 28px; animation: 4.6s step-end 0s infinite normal none running badgeJolt; }

.hero-badge::before, .hero-badge::after { content: ""; border: 1px dashed rgba(38, 48, 42, 0.45); clip-path: inherit; border-radius: 0px; position: absolute; inset: 7px; }

.hero-badge strong { letter-spacing: 0.08em; font: 900 16px / 1 Arial, sans-serif; }

.hero-badge span { text-align: center; margin-top: 7px; font-size: 12px; font-weight: 800; line-height: 1.45; }

.scroll-cue { z-index: 2; letter-spacing: 0.2em; writing-mode: vertical-rl; align-items: center; gap: 12px; font: 700 9px / 1 Arial, sans-serif; display: flex; position: absolute; bottom: 0px; left: 4.5vw; }

.scroll-cue i { background: rgba(255, 255, 255, 0.6); width: 1px; height: 55px; }

.hero::after { content: ""; z-index: 3; background: var(--paper); clip-path: polygon(0px 58%, 7% 42%, 15% 53%, 24% 34%, 33% 49%, 43% 30%, 52% 46%, 62% 28%, 71% 50%, 81% 36%, 90% 54%, 100% 39%, 100% 100%, 0px 100%); border-radius: 0px; height: 74px; position: absolute; bottom: -1px; left: -2%; right: -2%; }

.hero-materials { z-index: 3; pointer-events: none; width: min(43vw, 590px); height: 69%; position: absolute; top: 14%; right: 4vw; }

.hero-material { border: 7px solid rgba(244, 240, 231, 0.96); border-radius: 0px; margin: 0px; position: absolute; overflow: hidden; box-shadow: rgba(8, 18, 11, 0.32) 12px 14px; }

.hero-material-a { aspect-ratio: 1 / 1; clip-path: polygon(9% 3%, 88% 0px, 100% 17%, 94% 88%, 78% 100%, 8% 92%, 0px 67%, 4% 18%); width: 46%; animation: 4.3s step-end 0s infinite normal none running materialJoltA; top: 4%; right: 1%; transform: rotate(4deg); }

.hero-material-b { aspect-ratio: 0.92 / 1; clip-path: polygon(3% 14%, 19% 0px, 90% 6%, 100% 29%, 94% 96%, 63% 100%, 4% 88%, 0px 42%); width: 39%; animation: 5.1s step-end 0s infinite normal none running materialJoltB; bottom: 5%; left: 7%; transform: rotate(-7deg); }

.hero-material-c { aspect-ratio: 1 / 1; clip-path: polygon(13% 0px, 86% 5%, 100% 24%, 90% 92%, 61% 100%, 4% 79%, 0px 19%); border-width: 6px; width: 27%; animation: 3.7s step-end 0s infinite normal none running materialJoltC; bottom: 4%; right: 16%; transform: rotate(11deg); }

.orbit-label { text-align: center; clip-path: polygon(24% 0px, 76% 0px, 100% 24%, 100% 76%, 76% 100%, 24% 100%, 0px 76%, 0px 24%); color: rgb(255, 255, 255); letter-spacing: 0.13em; border: 1px solid rgba(255, 255, 255, 0.65); border-radius: 0px; place-content: center; width: 132px; height: 132px; font: 700 9px / 1.7 Arial, sans-serif; display: grid; position: absolute; top: 13%; left: 1%; }

.orbit-label::after { content: ""; clip-path: inherit; border: 1px dashed rgba(255, 255, 255, 0.34); border-radius: 0px; animation: 4s step-end 0s infinite normal none running labelTick; position: absolute; inset: 9px; }

.orbit-label b { font-size: 11px; }

.hero-copy { z-index: 4; }

.hero-copy .eyebrow { animation: 0.42s steps(3) 80ms 1 normal both running heroEnter; }

.hero-copy h1 { animation: 0.55s steps(4) 0.16s 1 normal both running heroEnter; }

.hero-copy .hero-lead { animation: 0.48s steps(3) 0.27s 1 normal both running heroEnter; }

.hero-copy .hero-actions { animation: 0.48s steps(3) 0.36s 1 normal both running heroEnter; }

/* ===== Concept ===== */
.concept { background: var(--paper); grid-template-columns: 31% 24% 1fr; gap: 3.5vw; padding: 146px 8.4vw 132px; display: grid; position: relative; overflow: hidden; }

.concept::after { content: "OUTLET YARD"; color: rgba(47, 74, 57, 0.043); letter-spacing: -0.06em; pointer-events: none; font: 900 clamp(64px, 11vw, 170px) / 0.75 Arial, sans-serif; position: absolute; bottom: 0px; right: 1vw; }

.section-kicker { color: var(--orange); margin-bottom: 22px; }

.concept h2, .section-title-row h2 { letter-spacing: -0.05em; margin: 0px; font-size: clamp(38px, 4.8vw, 70px); font-weight: 800; line-height: 1.25; }

.concept h2 { font-size: clamp(40px, 3.25vw, 46px); }

.concept-collage { align-self: center; min-height: 430px; position: relative; }

.concept-collage figure { border: 7px solid rgb(255, 250, 240); border-radius: 0px; margin: 0px; position: absolute; overflow: hidden; box-shadow: rgba(74, 61, 40, 0.16) 10px 12px; }

.collage-main { aspect-ratio: 0.9 / 1; clip-path: polygon(7% 2%, 88% 0px, 100% 16%, 92% 94%, 70% 100%, 4% 88%, 0px 38%); border-radius: 0px; width: 88%; top: 3%; left: 0px; transform: rotate(-3deg); }

.collage-sub { aspect-ratio: 1 / 1; clip-path: polygon(15% 0px, 89% 7%, 100% 31%, 91% 91%, 62% 100%, 0px 76%, 5% 18%); border-radius: 0px; width: 47%; bottom: 0px; right: -4%; transform: rotate(8deg); }

.collage-tag { z-index: 3; clip-path: polygon(12% 0px, 90% 8%, 100% 74%, 76% 100%, 0px 88%, 5% 17%); text-align: center; background: rgb(241, 198, 76); border-radius: 0px; padding: 17px 20px; font-size: 10px; line-height: 1.55; position: absolute; top: 8%; right: -12%; transform: rotate(5deg); box-shadow: rgba(70, 52, 20, 0.13) 7px 8px; }

.collage-tag b { font-size: 13px; }

.concept-body { z-index: 1; padding-top: 14px; position: relative; }

.concept-body > p { margin: 0px 0px 18px; font-size: 15px; font-weight: 600; line-height: 2.1; }

.benefits { border-top: 1px solid rgb(201, 193, 178); border-bottom: 1px solid rgb(201, 193, 178); grid-template-columns: repeat(3, 1fr); margin-top: 54px; display: grid; }

.benefits div { border-right: 1px solid rgb(201, 193, 178); align-items: center; gap: 15px; min-height: 112px; padding: 16px; display: flex; }

.benefits div:last-child { border: 0px; }

.benefits b { color: var(--orange); font: 800 12px / 1 Arial, sans-serif; }

.benefits span { font-size: 12px; line-height: 1.65; }

.benefits strong { font-size: 14px; }

/* ===== Material marquee ===== */
.material-marquee { background: var(--orange); border-top: 1px solid rgba(255, 255, 255, 0.25); border-bottom: 1px solid rgba(255, 255, 255, 0.25); align-items: center; height: 128px; display: flex; overflow: hidden; }

.material-belt { will-change: transform; align-items: center; gap: 23px; width: max-content; padding: 9px 0px; animation: 25s steps(44) 0s infinite normal none running materialBeltMove; display: flex; transform: translate(-50%); }

.belt-material { clip-path: polygon(5% 0px, 91% 3%, 100% 18%, 94% 94%, 72% 100%, 0px 88%, 3% 19%); border: 4px solid rgb(255, 243, 221); flex: 0 0 158px; height: 96px; margin: 0px; position: relative; overflow: hidden; transform: rotate(-2deg); box-shadow: rgba(83, 32, 13, 0.24) 6px 7px; }

.belt-material-1 { clip-path: polygon(10% 2%, 100% 0px, 94% 82%, 79% 100%, 2% 93%, 0px 16%); height: 102px; transform: translateY(5px) rotate(2deg); }

.belt-material-2 { clip-path: polygon(0px 8%, 87% 0px, 100% 17%, 93% 100%, 11% 94%, 3% 69%); flex-basis: 148px; transform: translateY(-5px) rotate(-1deg); }

.belt-material-3 { clip-path: polygon(7% 0px, 94% 7%, 100% 77%, 83% 100%, 0px 91%, 3% 14%); height: 88px; transform: translateY(4px) rotate(1deg); }

.belt-material-4 { clip-path: polygon(4% 4%, 87% 0px, 100% 23%, 96% 93%, 67% 100%, 0px 84%); flex-basis: 168px; transform: translateY(-3px) rotate(-2deg); }

.belt-material-5 { clip-path: polygon(11% 0px, 92% 3%, 100% 31%, 91% 96%, 58% 100%, 0px 77%, 4% 13%); height: 104px; transform: rotate(2deg); }

/* ===== News ===== */
.news-section { background: rgb(251, 249, 243); grid-template-columns: 32% 1fr; gap: 8vw; padding: 112px 8.4vw 124px; display: grid; position: relative; overflow: hidden; }

.news-head h2, .calendar-copy h2, .blog-heading h2, .access-card h2, .contact-section h2 { letter-spacing: -0.055em; margin: 0px; font-size: clamp(38px, 4.8vw, 68px); line-height: 1.2; }

.news-head > a { align-items: center; gap: 24px; margin-top: 42px; font-size: 12px; font-weight: 800; display: inline-flex; }

.news-head > a span { color: rgb(255, 255, 255); background: var(--orange); border-radius: 50%; place-items: center; width: 35px; height: 35px; display: grid; }

.news-list { border-top: 1px solid rgb(189, 185, 175); }

.news-list article { border-bottom: 1px solid rgb(212, 208, 200); grid-template-columns: 105px 84px 1fr 34px; align-items: center; gap: 18px; min-height: 102px; display: grid; transition: padding 0.24s steps(2), background 0.24s steps(2); position: relative; }

.news-list article::before { content: ""; z-index: -1; background: rgb(242, 234, 219); transition: inset 0.3s steps(4); position: absolute; inset: 0px 100% 0px 0px; }

.news-list article:hover { padding-left: 16px; }

.news-list article:hover::before { inset: 0px; }

.news-list time { letter-spacing: 0.08em; font: 700 11px / 1 Arial, sans-serif; }

.news-list article > span { text-align: center; border: 1px solid rgb(157, 154, 146); padding: 7px 4px; font-size: 10px; font-weight: 700; }

.news-list h3 { margin: 0px; font-size: 14px; line-height: 1.7; }

.news-list article > b { font-size: 18px; }

.mock-note { color: rgb(138, 135, 127); margin: 22px 0px 0px; font-size: 10px; }

.news-head, .news-list, .news-section > .mock-note { z-index: 2; position: relative; }

.news-deco { aspect-ratio: 1 / 1; clip-path: polygon(8% 0px, 89% 6%, 100% 31%, 92% 92%, 63% 100%, 0px 81%, 4% 19%); border: 8px solid var(--paper); opacity: 0.88; border-radius: 0px; width: 190px; margin: 0px; position: absolute; bottom: -54px; left: -60px; overflow: hidden; transform: rotate(9deg); box-shadow: rgba(50, 42, 29, 0.14) 9px 10px; }

/* ===== Calendar ===== */
.calendar-section { background: var(--cream); grid-template-columns: 31% 1fr; gap: 8vw; padding: 120px 8.4vw; display: grid; position: relative; overflow: hidden; }

.calendar-section::before { content: "OPEN"; color: rgba(38, 48, 42, 0.04); font: 900 15vw / 1 Arial, sans-serif; position: absolute; bottom: -2vw; left: -1vw; }

.calendar-deco { z-index: 3; aspect-ratio: 1 / 1; clip-path: polygon(12% 0px, 83% 4%, 100% 24%, 93% 86%, 76% 100%, 5% 91%, 0px 58%, 7% 13%); border: 9px solid rgb(255, 247, 231); border-radius: 0px; width: 210px; margin: 0px; position: absolute; top: 38px; left: -68px; overflow: hidden; transform: rotate(-9deg); box-shadow: rgba(65, 53, 33, 0.15) 10px 11px; }

.calendar-copy { z-index: 1; padding-top: 36px; position: relative; }

.calendar-copy > p:not(.section-kicker) { margin-top: 26px; font-size: 13px; line-height: 1.9; }

.hours { border-top: 1px solid rgb(190, 182, 168); border-bottom: 1px solid rgb(190, 182, 168); margin-top: 48px; padding: 24px 0px; }

.hours small, .hours span { display: block; }

.hours small { color: var(--orange); letter-spacing: 0.16em; font: 800 9px / 1 Arial, sans-serif; }

.hours strong { letter-spacing: 0.02em; margin: 10px 0px; font: 800 25px / 1 Arial, sans-serif; display: block; }

.hours span { color: rgb(123, 119, 111); font-size: 10px; }

.calendar-card { z-index: 1; background: rgb(255, 253, 248); clip-path: polygon(0px 0px, 95% 0px, 100% 7%, 100% 93%, 96% 100%, 4% 100%, 0px 95%); border-radius: 0px; padding: 36px 38px 28px; transition: transform 0.3s steps(3), box-shadow 0.3s steps(3); position: relative; box-shadow: rgba(53, 47, 34, 0.08) 0px 15px 45px; }

.calendar-card:hover { transform: translate(7px, -7px) rotate(0.2deg); box-shadow: rgba(53, 47, 34, 0.16) 3px 5px; }

.calendar-month { border-bottom: 1px solid rgb(222, 217, 206); justify-content: space-between; align-items: center; padding-bottom: 24px; display: flex; }

.calendar-month button, .calendar-month a { cursor: pointer; background: 0px 0px; border: 1px solid rgb(203, 197, 185); border-radius: 50%; width: 38px; height: 38px; display: flex; align-items: center; justify-content: center; text-decoration: none; color: inherit; }

.calendar-month button:disabled { cursor: not-allowed; opacity: 0.35; }

.calendar-month h3 { letter-spacing: 0.12em; align-items: baseline; gap: 10px; margin: 0px; font: 700 16px / 1 Arial, sans-serif; display: flex; }

.calendar-month h3 b { color: rgb(139, 135, 126); font-size: 10px; }

.calendar-month h3 strong { color: var(--orange); font-size: 30px; }

.weekdays, .calendar-grid { grid-template-columns: repeat(7, 1fr); display: grid; }

.weekdays span { text-align: center; color: rgb(142, 138, 130); padding: 18px 0px 12px; font: 700 9px / 1 Arial, sans-serif; }

.calendar-grid { border-top: 1px solid rgb(227, 223, 214); border-left: 1px solid rgb(227, 223, 214); }

.calendar-grid > span, .calendar-grid > i { border-bottom: 1px solid rgb(227, 223, 214); border-right: 1px solid rgb(227, 223, 214); min-height: 65px; padding: 10px; font-style: normal; }

.calendar-grid span { flex-direction: column; gap: 8px; display: flex; }

.calendar-grid b { font: 700 12px / 1 Arial, sans-serif; }

.calendar-grid small { letter-spacing: 0.06em; font: 700 7px / 1 Arial, sans-serif; }

.calendar-grid span.open { background: var(--orange); color: rgb(255, 255, 255); }

.calendar-legend { justify-content: space-between; align-items: center; padding-top: 22px; display: flex; }

.calendar-legend span { align-items: center; gap: 8px; font-size: 10px; display: flex; }

.calendar-legend span i { background: var(--orange); width: 12px; height: 12px; }

.calendar-legend > small { color: rgb(136, 131, 122); font-size: 9px; }

/* ===== Blog ===== */
.blog-section { background: rgb(251, 249, 243); padding: 116px 8.4vw 130px; }

.blog-heading { justify-content: space-between; align-items: flex-end; margin-bottom: 48px; display: flex; }

.blog-heading .section-kicker { align-self: flex-start; min-width: 28%; }

.blog-heading h2 { width: 64%; }

.blog-grid { grid-template-columns: repeat(3, 1fr); gap: 25px; display: grid; }

.blog-grid article { flex-direction: column; display: flex; }

.blog-image { aspect-ratio: 1.3 / 1; clip-path: polygon(4% 0px, 92% 3%, 100% 19%, 95% 91%, 75% 100%, 0px 88%, 3% 25%); border-radius: 0px; margin-bottom: 20px; position: relative; overflow: hidden; transform: translateZ(0px); }

.blog-image img { transition: transform 0.45s; }

.blog-grid article:hover .blog-image { box-shadow: rgba(60, 49, 32, 0.16) 9px 10px; }

.blog-grid article:hover img { transform: scale(1.04); }

.blog-grid article:nth-child(2) .blog-image { clip-path: polygon(9% 2%, 100% 0px, 96% 78%, 81% 100%, 2% 92%, 0px 16%); border-radius: 0px; transform: rotate(1deg); }

.blog-grid article:nth-child(3) .blog-image { clip-path: polygon(0px 7%, 86% 0px, 100% 13%, 94% 100%, 13% 94%, 4% 72%); border-radius: 0px; transform: rotate(-1deg); }

.blog-grid time { color: rgb(136, 131, 123); font: 700 10px / 1 Arial, sans-serif; }

.blog-grid h3 { min-height: 52px; margin: 12px 0px 20px; font-size: 15px; line-height: 1.7; }

.blog-grid a { border-bottom: 1px solid var(--orange); width: max-content; color: var(--orange); letter-spacing: 0.1em; margin-top: auto; padding-bottom: 5px; font: 800 9px / 1 Arial, sans-serif; }

/* ===== Products ===== */
.products-preview { background: var(--green); color: rgb(255, 255, 255); padding: 108px 6vw 120px; position: relative; overflow: hidden; }

.products-preview::before { content: "PICK IT!"; color: rgba(255, 255, 255, 0.04); font: 900 12vw / 1 Arial, sans-serif; position: absolute; top: 20px; right: -1vw; transform: rotate(-4deg); }

.section-title-row { justify-content: space-between; align-items: flex-end; max-width: 1240px; margin: 0px auto 48px; display: flex; }

.section-kicker.light { color: rgb(224, 162, 62); }

.section-title-row > p { color: rgb(211, 219, 213); margin: 0px 0px 6px; font-size: 13px; line-height: 1.8; }

.product-grid { grid-template-columns: repeat(3, 1fr); gap: 30px 22px; max-width: 1240px; margin: auto; display: grid; }

.product-card { background: 0px 0px; border: 0px; position: relative; }

.product-card:nth-child(3n+2) { transform: translateY(24px); }

.product-image { aspect-ratio: 1.14 / 1; clip-path: polygon(3% 0px, 93% 2%, 100% 12%, 96% 96%, 77% 100%, 0px 94%, 2% 24%); border-radius: 0px; position: relative; overflow: hidden; box-shadow: rgba(7, 20, 12, 0.25) 10px 12px; }

.product-card:nth-child(3n+2) .product-image { clip-path: polygon(8% 2%, 100% 0px, 96% 82%, 86% 100%, 1% 94%, 0px 13%); }

.product-card:nth-child(3n) .product-image { clip-path: polygon(0px 5%, 88% 0px, 100% 15%, 94% 100%, 12% 96%, 3% 73%); }

.product-image img { transition: transform 0.5s; }

.product-card:hover .product-image { transition: transform 0.3s steps(3); transform: translate(7px, -7px) rotate(0.4deg); }

.product-card:hover img { transition-timing-function: steps(4); transform: scale(1.08) rotate(-0.5deg); }

.product-info { clip-path: polygon(0px 0px, 100% 3%, 97% 100%, 3% 96%); background: rgb(35, 59, 45); border-width: 0px 1px 1px; border-style: none solid solid; border-color: currentcolor rgba(255, 255, 255, 0.18) rgba(255, 255, 255, 0.18); margin: -1px 10px 0px; grid-template-columns: 28px 1fr 28px; align-items: start; gap: 10px; min-height: 108px; padding: 20px 20px 18px; display: grid; }

.product-info small { color: rgb(221, 154, 59); margin-top: 4px; font: 700 10px / 1 Arial, sans-serif; }

.product-info h3 { margin: 0px 0px 8px; font-size: 18px; }

.product-info p { color: rgb(191, 202, 194); margin: 0px; font-size: 11px; line-height: 1.6; }

.product-info > span { border: 1px solid rgba(255, 255, 255, 0.35); border-radius: 50%; place-items: center; width: 28px; height: 28px; display: grid; }

/* ===== Access ===== */
.access-section { background: rgb(222, 213, 194); grid-template-columns: 55% 45%; min-height: 700px; display: grid; }

.map-mock { background: rgb(220, 211, 192); position: relative; overflow: hidden; }

.map-mock iframe { border: 0; position: absolute; inset: 0; width: 100%; height: 100%; }

.access-card { background: var(--paper); padding: 110px 8vw 90px 6vw; }

.access-card dl { border-top: 1px solid rgb(200, 192, 178); margin: 44px 0px 0px; }

.access-card dl > div { border-bottom: 1px solid rgb(210, 202, 189); grid-template-columns: 95px 1fr; padding: 21px 0px; display: grid; }

.access-card dt { color: rgb(131, 126, 115); font-size: 11px; font-weight: 800; }

.access-card dd { margin: 0px; font-size: 14px; font-weight: 700; line-height: 1.8; }

.access-card dd small { color: rgb(138, 133, 124); font-size: 10px; font-weight: 500; }

.access-card dd a { text-decoration: underline; text-underline-offset: 3px; }

.map-button { background: var(--ink); color: rgb(255, 255, 255); letter-spacing: 0.06em; justify-content: space-between; align-items: center; min-height: 58px; margin-top: 32px; padding: 0px 22px; font: 800 11px / 1 Arial, sans-serif; display: flex; }

.map-button b { font-size: 18px; }

/* ===== Contact ===== */
.contact-section { text-align: center; color: rgb(255, 255, 255); background: var(--orange); padding: 110px 8vw 120px; position: relative; overflow: hidden; }

.contact-section::before { content: "CONTACT"; color: rgba(255, 255, 255, 0.055); font: 900 15vw / 1 Arial, sans-serif; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }

.contact-section > * { z-index: 1; position: relative; }

.contact-section .section-kicker { color: rgb(246, 208, 130); }

.contact-section > p:not(.section-kicker) { margin: 24px 0px 34px; font-size: 14px; }

.contact-deco { border: 8px solid rgba(255, 255, 255, 0.9); border-radius: 0px; margin: 0px; overflow: hidden; box-shadow: rgba(111, 48, 20, 0.24) 10px 12px; z-index: 1 !important; position: absolute !important; }

.contact-deco-left { aspect-ratio: 1 / 1; clip-path: polygon(8% 0px, 91% 6%, 100% 38%, 92% 100%, 12% 93%, 0px 66%, 4% 17%); width: 235px; bottom: 18px; left: -72px; transform: rotate(-10deg); }

.contact-deco-right { aspect-ratio: 1 / 1; clip-path: polygon(0px 11%, 77% 0px, 100% 18%, 91% 94%, 69% 100%, 3% 81%); width: 200px; top: 20px; right: -45px; transform: rotate(9deg); }

.contact-section > .section-kicker, .contact-section > h2, .contact-section > p, .contact-section > .contact-buttons, .contact-section > .contact-tel, .contact-section > .contact-note, .contact-section > .contact-form { z-index: 3; }

.contact-buttons { grid-template-columns: 1fr 1fr; gap: 14px; max-width: 820px; margin: auto; display: grid; }

.contact-buttons > a { text-align: left; grid-template-columns: 55px 1fr 25px; align-items: center; gap: 15px; min-height: 94px; padding: 18px 24px; transition: transform 0.25s steps(3), box-shadow 0.25s steps(3); display: grid; }

.contact-buttons > a:hover { transform: translate(7px, -7px) rotate(-0.4deg); box-shadow: rgba(80, 31, 14, 0.2) -7px 8px; }

.line-button { background: rgb(6, 189, 85); }

.form-button { color: var(--ink); background: rgb(255, 255, 255); }

.line-icon, .mail-icon { color: rgb(6, 169, 76); background: rgb(255, 255, 255); border-radius: 50%; place-items: center; width: 50px; height: 50px; font: 900 9px / 1 Arial, sans-serif; display: grid; }

.mail-icon { color: var(--orange); font-size: 20px; }

.contact-buttons small, .contact-buttons strong { display: block; }

.contact-buttons small { margin-bottom: 7px; font-size: 9px; }

.contact-buttons strong { font-size: 15px; }

.contact-buttons > a > b { text-align: right; font-size: 20px; }

.contact-tel { margin-top: 24px; font-size: 13px; font-weight: 700; }

.contact-tel a { border-bottom: 1px solid rgba(255, 255, 255, 0.6); padding-bottom: 2px; }

.contact-note { color: rgb(248, 214, 200); margin-top: 20px; font-size: 9px; display: block; }

.contact-form { text-align: left; background: rgba(255, 255, 255, 0.96); color: var(--ink); max-width: 560px; margin: 36px auto 0px; padding: 28px 26px; }

.contact-form p.form-lead { margin: 0px 0px 16px; font-size: 12px; font-weight: 700; color: rgb(90, 60, 20); }

.form-row { margin-bottom: 16px; }

.form-row label { display: block; font-size: 12px; font-weight: 800; margin-bottom: 6px; }

.form-row span { color: var(--orange); margin-left: 2px; }

.form-row input, .form-row textarea { width: 100%; border: 1px solid rgb(201, 193, 178); padding: 11px 12px; font-size: 14px; background: rgb(255, 255, 255); }

.form-row textarea { resize: vertical; }

.form-submit { width: 100%; background: var(--ink); color: rgb(255, 255, 255); min-height: 52px; font: 800 13px / 1 Arial, sans-serif; letter-spacing: 0.06em; }

.form-submit:hover { filter: brightness(1.1); }

/* ===== Footer ===== */
footer { color: rgb(255, 255, 255); background: rgb(31, 46, 37); grid-template-columns: 1fr 1fr; gap: 55px 40px; padding: 72px 6vw 26px; display: grid; }

.footer-brand { width: max-content; }

.footer-address { text-align: right; align-self: center; }

.footer-address b, .footer-address span { display: block; }

.footer-address b { margin-bottom: 10px; font-size: 13px; }

.footer-address span { color: rgb(170, 183, 174); font-size: 11px; }

.footer-address .footer-tel { color: rgb(246, 208, 130); font-weight: 700; margin-top: 8px; }

footer nav { gap: 25px; font-size: 11px; font-weight: 700; display: flex; }

footer > p { color: rgb(131, 144, 135); text-align: right; letter-spacing: 0.08em; margin: 0px; font: 700 8px / 1 Arial, sans-serif; }

.mobile-actions { display: none; }

/* ===== Reveal-on-scroll & floating decorations ===== */
.reveal { opacity: 0; transition: opacity 0.42s steps(3), transform 0.55s steps(4); transform: translate(-18px, 30px) rotate(-1deg); }

.reveal.is-visible { opacity: 1; transform: none; }

.blog-grid article:nth-child(2), .product-grid article:nth-child(2), .product-grid article:nth-child(5) { transition-delay: 0.1s; }

.blog-grid article:nth-child(3), .product-grid article:nth-child(3), .product-grid article:nth-child(6) { transition-delay: 0.2s; }

[data-float] { --float-y: 0px; translate: 0 var(--float-y); transition: none; }

@keyframes heroEnter {
  0% { opacity: 0; transform: translate(-24px, 28px) rotate(-1deg); }
  35% { opacity: 0.3; transform: translate(9px, 18px) rotate(0.6deg); }
  68% { opacity: 0.72; transform: translate(-5px, 6px); }
  100% { opacity: 1; transform: none; }
}

@keyframes materialJoltA {
  0%, 100% { margin: 0px; rotate: none; }
  24% { margin: -11px 0px 0px 7px; rotate: 1.5deg; }
  51% { margin: 4px 8px 0px 0px; rotate: -1deg; }
  77% { margin: -5px 0px 0px -6px; rotate: 0.5deg; }
}

@keyframes materialJoltB {
  0%, 100% { margin: 0px; rotate: none; }
  19% { margin: 0px 0px 13px -8px; rotate: -1deg; }
  46% { margin: 0px -4px 5px 0px; rotate: 1.5deg; }
  71% { margin: 0px 0px -4px 9px; rotate: -0.5deg; }
}

@keyframes materialJoltC {
  0%, 100% { margin: 0px; rotate: none; }
  31% { margin: -8px 10px 0px 0px; rotate: 2deg; }
  58% { margin: 5px -4px 0px 0px; rotate: -1deg; }
  83% { margin: -3px 5px 0px 0px; rotate: 0.5deg; }
}

@keyframes labelTick {
  0%, 100% { rotate: none; }
  26% { rotate: 4deg; }
  49% { rotate: -3deg; }
  72% { rotate: 2deg; }
}

@keyframes badgeJolt {
  0%, 100% { transform: rotate(5deg); }
  23% { transform: rotate(2deg) translate(3px, -7px); }
  48% { transform: rotate(7deg) translate(-4px, 2px); }
  74% { transform: rotate(3deg) translate(5px, -3px); }
}

@keyframes materialBeltMove {
  0% { transform: translate(-50%); }
  100% { transform: translate(0px); }
}

/* ===== Responsive ===== */
@media (width <= 1100px) {
  .hero-materials { opacity: 0.92; width: 40vw; right: 1vw; }
  .concept { grid-template-columns: 34% 1fr; }
  .concept-collage { display: none; }
  .calendar-deco { opacity: 0.42; }
}

@media (width <= 900px) {
  .desktop-nav { display: none; }
  .header-tel .tel-number { display: none; }
  .header-tel { margin-left: 1vw; }
  .header-contact { justify-content: center; width: 62px; padding: 0px; }
  .header-contact span { display: none; }
  .menu-toggle { display: flex; }
  .concept { grid-template-columns: 1fr; gap: 30px; }
  .concept-body { padding-top: 0px; }
  .section-title-row { align-items: flex-start; gap: 25px; }
  .news-section, .calendar-section { grid-template-columns: 1fr; gap: 50px; }
  .blog-heading { display: block; }
  .blog-heading h2 { width: 100%; }
  .access-section { grid-template-columns: 48% 52%; }
  .access-card { padding: 80px 5vw; }
}

@media (width <= 680px) {
  .site-header { height: 72px; padding: 0px 20px; }
  .brand-logo { height: 32px; }
  .mobile-nav { padding-top: 92px; }
  .hero { height: 820px; min-height: 0px; }
  .hero > img { object-position: 56% center; }
  .hero-shade { background: linear-gradient(90deg, rgba(16, 27, 20, 0.78), rgba(16, 27, 20, 0.18)), linear-gradient(rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.35)); }
  .hero-copy { top: 47%; left: 24px; right: 24px; }
  .hero h1 { font-size: 55px; }
  .hero-lead { font-size: 14px; }
  .hero-actions { flex-direction: column; align-items: flex-start; }
  .button { min-width: 210px; }
  .hero-badge { width: 112px; height: 112px; bottom: 30px; right: 22px; }
  .scroll-cue { display: none; }
  .hero::after { height: 58px; bottom: -1px; }
  .hero-materials { opacity: 0.85; width: 100%; height: 45%; inset: auto 0px 0px; }
  .hero-material-a { width: 42%; top: 5%; right: -6%; }
  .hero-material-b { width: 34%; bottom: -1%; left: auto; right: 30%; }
  .hero-material-c, .orbit-label { display: none; }
  .hero-copy { top: 39%; }
  .hero h1 { font-size: 52px; }
  .hero-badge { width: 98px; height: 98px; bottom: 20px; left: 23px; right: auto; }
  .concept { grid-template-columns: 1fr; padding: 100px 24px 95px; }
  .concept h2 { font-size: 36px; }
  .desktop-only { display: none; }
  .concept-body > p { font-size: 14px; }
  .concept-collage { min-height: 330px; margin: 2px 9vw 18px; display: block; }
  .collage-main { width: 78%; }
  .collage-sub { width: 40%; right: 0px; }
  .collage-tag { right: -4%; }
  .benefits { grid-template-columns: 1fr; }
  .benefits div { border-bottom: 1px solid rgb(201, 193, 178); border-right: 0px; min-height: 88px; }
  .benefits div:last-child { border-bottom: 0px; }
  .material-marquee { height: 94px; }
  .material-belt { gap: 16px; padding: 7px 0px; }
  .belt-material { border-width: 3px; flex-basis: 112px; height: 72px; box-shadow: rgba(83, 32, 13, 0.24) 4px 5px; }
  .belt-material-1, .belt-material-5 { height: 76px; }
  .belt-material-2 { flex-basis: 106px; }
  .belt-material-3 { height: 66px; }
  .belt-material-4 { flex-basis: 118px; }
  .products-preview { padding: 78px 20px 88px; }
  .section-title-row { display: block; }
  .section-title-row h2 { font-size: 36px; }
  .section-title-row > p { margin-top: 22px; }
  .product-grid { grid-template-columns: 1fr; }
  .product-card:nth-child(3n+2) { transform: none; }
  .product-image { border-radius: 0px; }
  .news-section { padding: 82px 24px 92px; }
  .news-head { justify-content: space-between; align-items: flex-end; display: flex; }
  .news-head h2, .calendar-copy h2, .blog-heading h2, .access-card h2, .contact-section h2 { font-size: 36px; }
  .news-head > a { margin: 0px 0px 4px; }
  .news-list { margin-top: 18px; }
  .news-list article { grid-template-columns: 82px 72px 1fr; gap: 10px; min-height: 118px; }
  .news-list h3 { grid-area: 2 / 1 / auto / 4; padding-bottom: 16px; }
  .news-list article > b { grid-area: 1 / 4 / 3; }
  .news-deco { opacity: 0.36; width: 130px; left: -48px; }
  .calendar-section { padding: 82px 20px 92px; }
  .calendar-copy h2 br { display: none; }
  .calendar-copy { padding-top: 0px; }
  .calendar-deco { opacity: 0.72; width: 130px; top: 18px; left: auto; right: -55px; }
  .calendar-card { padding: 22px 14px 20px; border-radius: 0px; }
  .calendar-grid > span, .calendar-grid > i { min-height: 48px; padding: 7px; }
  .calendar-legend > small { text-align: right; max-width: 55%; }
  .blog-section { padding: 82px 20px 92px; }
  .blog-grid { grid-template-columns: 1fr; gap: 46px; }
  .blog-grid h3 { min-height: 0px; }
  .blog-image { aspect-ratio: 1.08 / 1; }
  .access-section { grid-template-columns: 1fr; min-height: 0px; }
  .map-mock { min-height: 390px; }
  .access-card { padding: 78px 24px 88px; }
  .contact-section { padding: 82px 20px 96px; }
  .contact-buttons { grid-template-columns: 1fr; }
  .contact-buttons > a { min-height: 86px; padding: 15px 18px; }
  .contact-deco-left { opacity: 0.45; width: 135px; left: -58px; }
  .contact-deco-right { opacity: 0.45; width: 120px; top: 25px; right: -48px; }
  footer { grid-template-columns: 1fr; gap: 32px; padding: 62px 24px 92px; }
  .footer-address { text-align: left; }
  footer nav { flex-wrap: wrap; }
  footer > p { text-align: left; }
  .mobile-actions { z-index: 20; color: rgb(255, 255, 255); grid-template-columns: 1fr 1fr; height: 58px; display: grid; position: fixed; bottom: 0px; left: 0px; right: 0px; box-shadow: rgba(0, 0, 0, 0.14) 0px -5px 18px; }
  .mobile-actions a { background: var(--ink); letter-spacing: 0.1em; place-items: center; font: 800 10px / 1 Arial, sans-serif; display: grid; }
  .mobile-actions a:last-child { background: var(--orange); }
  .hero h1.hero-slogan { font-size: 46px; line-height: 1.12; }
  .hero-slogan em { white-space: normal; }
  .hero-slogan em span { display: block; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transition: none; transform: none; }
  [data-float] { transition: none; translate: none !important; }
  .hero-copy .eyebrow, .hero-copy h1, .hero-copy .hero-lead, .hero-copy .hero-actions, .hero-material-a, .hero-material-b, .hero-material-c, .hero-badge, .orbit-label, .orbit-label::after, .material-belt { animation: none !important; }
  .mobile-nav { transition: none; }
}

/* ===== WordPress: screen-reader-text (core) ===== */
.screen-reader-text { border: 0; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; word-wrap: normal !important; }

/* ===== WordPress: single / archive post content ===== */
.entry-header { background: var(--cream); padding: 150px 8.4vw 60px; }
.entry-header .section-kicker { display: inline-block; }
.entry-header h1 { letter-spacing: -0.05em; margin: 0 0 16px; font-size: clamp(30px, 4vw, 46px); font-weight: 800; line-height: 1.3; }
.entry-meta { color: rgb(123, 119, 111); font: 700 11px / 1 Arial, sans-serif; letter-spacing: 0.06em; display: flex; align-items: center; gap: 14px; }
.entry-meta .entry-category { border: 1px solid rgb(157, 154, 146); padding: 6px 10px; font-size: 10px; }
.entry-thumbnail { max-width: 900px; margin: 0 auto; padding: 0 8.4vw; }
.entry-thumbnail img { width: 100%; height: auto; aspect-ratio: 1.6 / 1; object-fit: cover; }
.entry-content-wrap { max-width: 780px; margin: 0 auto; padding: 60px 8.4vw 140px; }
.entry-content { font-size: 15px; line-height: 2.05; }
.entry-content p { margin: 0 0 1.6em; }
.entry-content h2 { font-size: 24px; font-weight: 800; margin: 2em 0 0.8em; letter-spacing: -0.03em; }
.entry-content h3 { font-size: 18px; font-weight: 800; margin: 1.8em 0 0.7em; }
.entry-content img { width: 100%; height: auto; margin: 1.6em 0; }
.entry-content a { color: var(--orange); text-decoration: underline; text-underline-offset: 3px; }
.entry-content ul, .entry-content ol { margin: 0 0 1.6em; padding-left: 1.4em; list-style: revert; }
.entry-back { display: inline-flex; align-items: center; gap: 10px; margin-top: 40px; font: 800 12px / 1 Arial, sans-serif; }

.archive-header { background: var(--cream); padding: 150px 8.4vw 50px; text-align: left; }
.archive-header h1 { letter-spacing: -0.05em; margin: 0; font-size: clamp(32px, 4.5vw, 54px); font-weight: 800; }
.archive-list { max-width: 900px; margin: 0 auto; padding: 60px 8.4vw 60px; border-top: 1px solid rgb(189, 185, 175); }
.archive-list article { border-bottom: 1px solid rgb(212, 208, 200); grid-template-columns: 105px 84px 1fr 34px; align-items: center; gap: 18px; min-height: 102px; display: grid; }
.archive-list time { letter-spacing: 0.08em; font: 700 11px / 1 Arial, sans-serif; }
.archive-list article > span { text-align: center; border: 1px solid rgb(157, 154, 146); padding: 7px 4px; font-size: 10px; font-weight: 700; }
.archive-list h3 { margin: 0; font-size: 14px; line-height: 1.7; }
.archive-list article > b { font-size: 18px; }
.archive-empty { max-width: 900px; margin: 0 auto; padding: 40px 8.4vw 120px; font-size: 14px; }
.archive-pagination { max-width: 900px; margin: 0 auto; padding: 0 8.4vw 120px; display: flex; gap: 16px; font: 700 12px / 1 Arial, sans-serif; }
.archive-pagination a, .archive-pagination span { border: 1px solid rgb(201, 193, 178); padding: 10px 18px; }

@media (width <= 680px) {
  .entry-header, .archive-header { padding-top: 110px; }
  .entry-content-wrap, .entry-thumbnail, .archive-list, .archive-pagination { padding-left: 24px; padding-right: 24px; }
  .archive-list article, .news-list article { grid-template-columns: 82px 72px 1fr; gap: 10px; min-height: 118px; }
  .archive-list h3 { grid-area: 2 / 1 / auto / 4; padding-bottom: 16px; }
  .archive-list article > b { grid-area: 1 / 4 / 3; }
}

/* ===== WordPress: 営業カレンダー プラグイン枠 ===== */
.calendar-card .biz-calendar-wrap,
.calendar-card [class*="calendar"] { font-family: inherit; }
.calendar-plugin-fallback { padding: 24px 0; font-size: 12px; color: rgb(138, 135, 127); line-height: 1.8; }

/* ===== WordPress: Contact Form 7 をデザインに合わせる ===== */
.contact-form .wpcf7-form p { margin: 0; }
.contact-form .wpcf7-form-control-wrap { display: block; }
.contact-form .wpcf7-not-valid-tip { color: rgb(255, 235, 200); font-size: 11px; margin-top: 6px; }
.contact-form .wpcf7-response-output { margin: 16px 0 0; border-radius: 0; font-size: 12px; padding: 10px 12px; }
.contact-form input[type="submit"] { width: 100%; background: var(--ink); color: rgb(255, 255, 255); min-height: 52px; border: 0; font: 800 13px / 1 Arial, sans-serif; letter-spacing: 0.06em; cursor: pointer; }
.contact-form input[type="submit"]:hover { filter: brightness(1.1); }
.contact-form .wpcf7-spinner { display: none; }