/*
Theme Name: RinSan
Theme URI: https://rinsan.net/
Author: RinSan
Description: RinSanの広告・ディスプレイ・デザインサイト。問い合わせ保存とメール通知、スマホ対応。
Version: 5.0.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: rinsan
*/
:root{color-scheme:dark}
html{scroll-behavior:smooth;scroll-padding-top:100px;background:#0a0a0a}
body{margin:0;background:#0a0a0a;color:#f3f3eb;font-family:Arial,"Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,sans-serif}
.rinsan-site{--bg:#0a0a0a;--text:#f3f3eb;--muted:#aaa9a3;--line:#30312c;--accent:#d8ff3e;--max:1240px;line-height:1.75}
.rinsan-site *, .rinsan-site *::before,.rinsan-site *::after{box-sizing:border-box}
.rinsan-site h1,.rinsan-site h2,.rinsan-site h3,.rinsan-site p,.rinsan-site figure{margin:0}
.rinsan-site a{color:inherit;text-decoration:none}
.rinsan-site button,.rinsan-site input,.rinsan-site select,.rinsan-site textarea{font:inherit}
.rinsan-site button,.rinsan-site a{-webkit-tap-highlight-color:transparent}
.rinsan-site [hidden]{display:none!important}
.rinsan-site a:focus-visible,.rinsan-site button:focus-visible,.rinsan-site input:focus-visible,.rinsan-site textarea:focus-visible,.rinsan-site select:focus-visible,.rinsan-site summary:focus-visible{outline:3px solid var(--accent);outline-offset:5px}
.container{width:min(calc(100% - 96px),1240px);margin-inline:auto}
.skip-link{position:fixed;top:-100px;left:20px;padding:12px;background:#d8ff3e;color:#000!important;z-index:100}
.skip-link:focus{top:12px}
.site-header{position:sticky;top:0;z-index:30;background:rgba(10,10,10,.95);border-bottom:1px solid var(--line);backdrop-filter:blur(12px)}
.nav{display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:86px}
.logo{font-weight:800;font-size:25px;letter-spacing:.03em;white-space:nowrap;color:var(--accent)!important}
.logo small{font-size:12px;letter-spacing:.14em;color:var(--text)}
.site-nav{display:flex;gap:30px;font-size:13px;align-items:center}
.site-nav a{padding:10px 0}
.site-nav a:hover,.text-link:hover{color:var(--accent)}
.nav-contact,.menu-toggle{display:none}
.btn{display:inline-flex;gap:12px;align-items:center;justify-content:center;min-height:50px;padding:13px 23px;border:1px solid #73746a;background:transparent;color:var(--text);font-size:13px;font-weight:700;cursor:pointer;transition:background .2s,color .2s}
.btn.primary{background:var(--accent);border-color:var(--accent);color:#0a0a0a}
.btn:hover{background:#f3f3eb;border-color:#f3f3eb;color:#0a0a0a}
.btn.primary:hover{background:#ecff99;border-color:#ecff99}
.btn:disabled{opacity:.6;cursor:wait}
.buttons{display:flex;flex-wrap:wrap;gap:20px;align-items:center}
.text-link{display:inline-block;font-size:13px;font-weight:700;text-underline-offset:7px}
.text-link:hover{text-decoration:underline}
.hero{padding:68px 0 25px;position:relative}
.hero-grid{display:grid;grid-template-columns:1fr 1.03fr;gap:52px;align-items:center}
.kicker,.eyebrow{font-size:11px;font-weight:700;letter-spacing:.18em;color:var(--accent);margin-bottom:24px!important}
.hero h1{font-size:clamp(56px,6.6vw,99px);line-height:1.02;letter-spacing:-.055em;font-weight:800}
.hero h1 em{font-style:normal;color:var(--accent)}
.hero-jp{font-size:clamp(23px,2.6vw,36px);font-weight:700;line-height:1.55;letter-spacing:.04em;margin:28px 0 16px!important}
.lead{font-size:14px;color:var(--muted);line-height:1.9;margin-bottom:32px!important}
.hero-image{position:relative;min-width:0}
.hero-image img{display:block;width:100%;height:560px;object-fit:cover;object-position:55% center}
.hero-image figcaption{font-size:9px;letter-spacing:.12em;display:flex;justify-content:space-between;gap:15px;padding:12px 0;color:var(--muted)}
.hero-bottom{margin-top:52px;display:flex;align-items:center;justify-content:space-between;font-size:10px;letter-spacing:.15em;color:var(--muted)}
.hero-bottom a{min-height:44px;display:flex;align-items:center}
.rinsan-site section:not(.hero){padding:100px 0;border-top:1px solid var(--line)}
.rinsan-site section[id]{scroll-margin-top:94px}
.section-head{display:grid;grid-template-columns:1.2fr 1fr;gap:100px;align-items:end;margin-bottom:48px}
.rinsan-site h2{font-size:clamp(30px,3.4vw,46px);line-height:1.5;letter-spacing:.02em;font-weight:700}
.section-head>p{max-width:450px;font-size:14px;color:var(--muted)}
.eyebrow{margin-bottom:18px!important}
.services{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.service{padding:32px 30px 34px 0;display:flex;flex-direction:column;gap:20px}
.service+.service{border-left:1px solid var(--line);padding-left:30px}
.num{font-size:10px;letter-spacing:.1em;color:var(--muted)}
.service h3{font-size:21px;line-height:1.5}
.service p{font-size:13px;color:var(--muted);margin-bottom:12px}
.service .text-link{margin-top:auto;color:var(--accent)}
.works-section{background:#111210}
.image-note{display:block;margin-top:16px;font-size:11px;color:#b0b1a6;border-left:2px solid #687337;padding-left:12px}
.portfolio-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:44px 24px}
.portfolio-item figure{position:relative;aspect-ratio:4/5;overflow:hidden;background:#20211d}
.portfolio-item img{display:block;width:100%;height:100%;object-fit:cover;object-position:center;transition:transform .35s}
.portfolio-item:hover img{transform:scale(1.025)}
.work-1 img{object-position:58% center}
.image-badge{position:absolute;bottom:12px;right:12px;background:rgba(0,0,0,.72);padding:3px 7px;font-size:8px;color:#d7d8cd;letter-spacing:.1em}
.portfolio-copy{padding:18px 0 0}
.work-type{font-size:9px;letter-spacing:.13em;color:var(--accent)}
.portfolio-copy h3{font-size:19px;line-height:1.55;margin-top:6px}
.portfolio-copy p{font-size:12px;color:var(--muted);margin:9px 0 16px}
.portfolio-copy .text-link{font-size:11px;min-height:34px}
.works-cta{margin-top:55px;padding-top:30px;border-top:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;gap:20px}
.works-cta p{font-size:15px}
.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:100px}
.about-lead{font-size:18px;line-height:1.9;margin:25px 0 12px!important}
.muted{font-size:13px;color:var(--muted);max-width:390px;margin-bottom:26px!important}
.process{list-style:none;padding:0;margin:0}
.process li{display:flex;gap:28px;padding:24px 0;border-top:1px solid var(--line)}
.process li:last-child{border-bottom:1px solid var(--line)}
.process li>span{font-size:12px;color:var(--accent)}
.process h3{font-size:17px}
.process p{font-size:12px;color:var(--muted);margin-top:5px}
.contact{background:var(--accent);color:#12140c}
.contact-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:72px;align-items:start}
.contact .eyebrow{color:#364013}
.contact-intro>p:not(.eyebrow){font-size:14px;margin-top:20px}
.contact-address{display:inline-block;font-size:16px;font-weight:700;margin-top:38px;border-bottom:1px solid #7c8b3d}
.small{font-size:11px!important}
.contact-intro .small{margin-top:10px!important;color:#384016}
.form{padding:30px;background:#0d0e0b;color:var(--text)}
.form-fieldset{border:0;margin:0;padding:0;min-width:0}
.form-caption{font-size:11px;color:var(--muted);margin-bottom:20px!important}
.form-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:18px}
.form label:not(.consent){display:block;font-size:12px;font-weight:700;margin-bottom:20px}
.required{font-size:9px;display:inline-block;background:#d8ff3e;color:#14170b;padding:1px 5px;line-height:1.6;margin-left:5px;vertical-align:middle}
.optional{font-size:9px;color:#b7b7a7;font-weight:400;margin-left:5px}
.form input:not([type=checkbox]),.form select,.form textarea{display:block;width:100%;margin-top:9px;padding:13px 12px;border:1px solid #4c4e43;background:#191b16;color:var(--text);border-radius:0;font-size:16px;line-height:1.5}
.form input::placeholder,.form textarea::placeholder{color:#a4a598;font-size:12px;opacity:1}
.form textarea{resize:vertical;min-height:170px}
.form input:focus,.form textarea:focus,.form select:focus{border-color:var(--accent)}
.consent{display:flex;gap:10px;align-items:flex-start;font-size:11px;color:#c7c8ba;margin-bottom:22px}
.consent input{appearance:auto;accent-color:var(--accent);width:18px;height:18px;flex-shrink:0;margin-top:2px}
.consent a{text-decoration:underline}
.submit-button{width:100%}
.form-footnote{text-align:center;color:#b0b1a4;margin-top:14px!important}
.trap{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.form-status{padding:18px 22px;margin-bottom:20px;background:#172000;color:#e4fbb9;border:1px solid #415119;font-size:14px;white-space:pre-wrap}
.form-status.is-error{background:#321416;border-color:#a75f63;color:#ffe1e3}
.form-status:focus{outline:2px solid #162200;outline-offset:4px}
.form-review h3{font-size:19px;margin-bottom:24px}
.form-review dl{margin:0 0 26px}
.form-review dt{font-size:11px;color:var(--muted);margin-top:16px}
.form-review dd{margin:5px 0 0;font-size:14px;white-space:pre-wrap;overflow-wrap:anywhere;padding-bottom:14px;border-bottom:1px solid var(--line)}
.form-review .buttons{justify-content:space-between;gap:12px}
.form-review .buttons .btn{flex:1}
.privacy{margin:45px 0 0;border-top:1px solid #94ad22;border-bottom:1px solid #94ad22}
.privacy summary{cursor:pointer;font-size:12px;font-weight:700;padding:18px 0;min-height:48px}
.privacy>div{padding:5px 0 22px;max-width:820px;font-size:12px}
.privacy p+p{margin-top:12px}
.privacy a{text-decoration:underline}
.site-footer{padding:40px 0;color:var(--muted);border-top:1px solid var(--line)}
.footer-grid{display:grid;grid-template-columns:1fr auto;gap:22px;align-items:center}
.site-footer nav{display:flex;gap:22px;flex-wrap:wrap;font-size:11px}
.site-footer p{grid-column:1/-1;font-size:10px}
.mobile-contact{display:none}
.preview-note{background:#333925;color:#f5f5e9;padding:10px 25px;text-align:center;font-size:11px;line-height:1.6}
.preview-note span{margin-left:15px;color:#d6ddc2}
.document-page{padding-top:80px;padding-bottom:80px}
.document-page h1{font-size:36px;line-height:1.5}
.document-content{font-size:16px;max-width:820px}
.document-content p{margin:20px 0}
.document-content img{max-width:100%;height:auto}
body.admin-bar .site-header{top:32px}
@media(min-width:900px) and (max-width:1100px){.site-nav{gap:16px}.logo small{display:none}.hero-grid{gap:32px}.container{width:calc(100% - 64px)}.contact-grid{gap:40px}.section-head{gap:50px}}
@media(max-width:899px){
 .container{width:calc(100% - 40px)}
 .nav{min-height:72px;gap:12px}.logo{font-size:23px}.logo small{font-size:9px}.header-contact{display:none}
 .menu-toggle{display:flex;align-items:center;gap:8px;min-height:44px;padding:8px 2px;background:transparent;color:var(--text);border:0;font-size:11px;cursor:pointer}
 .menu-icon{width:17px;height:10px;border-top:1px solid currentColor;border-bottom:1px solid currentColor}
 .menu-toggle[aria-expanded=true] .menu-icon{border-color:var(--accent)}
 .site-nav{position:absolute;top:100%;left:0;right:0;display:none;padding:20px;background:#10110e;border-bottom:1px solid var(--line)}
 .site-nav.is-open{display:flex;flex-direction:column;align-items:stretch;gap:0}.site-nav a{padding:14px 10px;min-height:48px}
 .site-nav .nav-contact{display:block;color:var(--accent)}
 .hero{padding:38px 0 15px}.hero-grid{gap:28px;grid-template-columns:1fr}.hero h1{font-size:clamp(55px,10vw,92px)}.hero-jp{font-size:27px;margin:24px 0 14px!important}
 .lead{font-size:13px;margin-bottom:24px!important}.hero-image img{height:auto;aspect-ratio:16/10;object-position:center}
 .hero-bottom{margin-top:18px}.kicker{font-size:9px;margin-bottom:18px!important}.desktop-break{display:none}
 .rinsan-site section:not(.hero){padding:65px 0}.rinsan-site section[id]{scroll-margin-top:78px}
 .section-head{grid-template-columns:1fr;gap:22px;margin-bottom:32px}.section-head>p{max-width:650px}
 .services{grid-template-columns:1fr}.service,.service+.service{border-left:0;padding:26px 0}.service+.service{border-top:1px solid var(--line)}.service{gap:12px}.service p{margin-bottom:4px}
 .portfolio-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:32px 18px}
 .portfolio-copy h3{font-size:17px}.portfolio-copy p{font-size:11px}
 .works-cta{align-items:flex-start;flex-direction:column;margin-top:35px}
 .about-grid{grid-template-columns:1fr;gap:35px}
 .contact-grid{grid-template-columns:1fr;gap:32px}.contact-intro>p:not(.eyebrow){margin-top:15px}.contact-address{margin-top:22px}
 .contact-intro h2 br{display:none}.privacy{margin-top:28px}
 .footer-grid{grid-template-columns:1fr}.site-footer nav{gap:16px}.site-footer{padding-bottom:95px}
 .mobile-contact{display:flex;position:fixed;bottom:0;left:0;right:0;align-items:center;justify-content:center;min-height:56px;padding:14px 18px calc(14px + env(safe-area-inset-bottom));background:#d8ff3e;border-top:1px solid #b2d329;z-index:25;color:#10120a!important;font-size:13px;font-weight:700}
 .preview-note span{display:block;margin-left:0}
}
@media(max-width:520px){
 .logo small{font-size:8px;letter-spacing:.07em}.container{width:calc(100% - 36px)}
 .hero h1{font-size:clamp(41px,10.5vw,58px)}.hero-jp{font-size:25px}.hero-image img{aspect-ratio:4/3}
 .buttons{gap:16px}.hero .buttons .btn{font-size:12px;padding:12px 18px}
 .rinsan-site h2{font-size:29px}.portfolio-grid{grid-template-columns:1fr;gap:35px}
 .portfolio-item figure{aspect-ratio:4/3}.portfolio-item:not(.work-1) img{object-position:center 42%}
 .portfolio-copy h3{font-size:19px}.portfolio-copy p{font-size:12px}.portfolio-copy .text-link{font-size:12px;min-height:40px}
 .form{padding:22px 18px}.form-grid{grid-template-columns:1fr;gap:0}.form input:not([type=checkbox]),.form select,.form textarea{font-size:16px}
 .form-review .buttons{flex-direction:column}.form-review .btn{width:100%}
 .contact-address{font-size:15px}.contact-intro h2 br{display:block}
 .site-footer .logo small{font-size:9px}.site-footer nav{gap:10px 20px}
}
@media(max-width:782px){body.admin-bar .site-header{top:46px}}
@media(max-width:600px){body.admin-bar .site-header{top:0}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.rinsan-site *{transition:none!important}.portfolio-item:hover img{transform:none}}