/*
Theme Name: Kinugawa Urethane
Theme URI: https://kinugawa-u.jp
Author: Kinugawa Urethane
Description: 衣川ウレタン公式サイト用オリジナルテーマ。Works（制作実績）はカスタム投稿タイプ、Recruit・Contactは固定ページで編集できます。
Version: 1.0.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
Text Domain: kinugawa
*/

*{margin:0;padding:0;box-sizing:border-box}
:root{
  --bg:#0e0e0e;
  --nav-h:6.5rem;
  --pad-x:3rem;
  --serif:'EB Garamond',serif;
  --sans:'Noto Sans JP',sans-serif;
  --tx-hi:rgba(255,255,255,0.92);
  --tx-mid:rgba(255,255,255,0.65);
  --tx-low:rgba(255,255,255,0.3);
  --line:rgba(255,255,255,0.1);
}
html{scroll-behavior:smooth}
body{
  background:var(--bg);
  font-family:var(--sans);font-weight:300;
  color:rgba(255,255,255,0.82);
  min-height:100vh;overflow-x:hidden;
  opacity:0;transition:opacity 0.45s ease;
}
body.loaded{opacity:1}
body.leaving{opacity:0}
img{max-width:100%;height:auto}
a{color:inherit}

/* ═══ NAV ═══ */
.site-nav{
  position:fixed;top:0;left:0;right:0;z-index:200;
  display:flex;justify-content:space-between;align-items:flex-start;
  padding:2rem var(--pad-x);
  pointer-events:none;
}
.site-nav.with-bg{background:linear-gradient(to bottom, rgba(14,14,14,0.85) 0%, transparent 100%)}
.nav-logo{display:block;width:180px;cursor:pointer;pointer-events:auto}
.nav-logo img{width:100%;height:auto;display:block}
.nav-links{display:flex;flex-direction:column;align-items:flex-end;gap:0.65rem;list-style:none;pointer-events:auto}
.nav-links a{
  font-family:var(--serif);font-size:0.88rem;letter-spacing:0.18em;
  color:var(--tx-mid);text-decoration:none;transition:color 0.3s;cursor:pointer;
}
.nav-links a:hover,.nav-links a.active{color:#fff}

/* ═══ PROJECT LIST (bottom-left) ═══ */
.project-list-fixed{
  position:fixed;bottom:0;left:0;z-index:200;
  padding:2.5rem var(--pad-x);list-style:none;
}
.project-item{padding:0.5rem 0;border-bottom:0.5px solid var(--line);cursor:pointer}
.project-item:first-child{border-top:0.5px solid var(--line)}
.project-item a{text-decoration:none;display:block}
.pt{
  font-family:var(--serif);font-size:0.9rem;letter-spacing:0.12em;
  color:var(--tx-low);display:block;transition:color 0.35s;line-height:1.5;
}
.py{
  font-family:var(--serif);font-style:italic;font-size:0.75rem;
  letter-spacing:0.08em;color:var(--tx-low);transition:color 0.35s;margin-left:0.6em;
}
.project-item:hover .pt,.project-item.active .pt,.project-item.current .pt{color:var(--tx-hi)}
.project-item:hover .py,.project-item.active .py,.project-item.current .py{color:rgba(255,255,255,0.5)}

/* ═══ TOP slideshow ═══ */
.top-stage{position:fixed;inset:0;overflow:hidden}
.slide{
  position:absolute;inset:0;opacity:0;transition:opacity 1.2s ease-in-out;
  background-size:cover;background-position:center;
}
.slide.active{opacity:1}
.vignette{
  position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse at center, transparent 35%, rgba(0,0,0,0.45) 100%),
    linear-gradient(to bottom, rgba(0,0,0,0.28) 0%, transparent 22%, transparent 60%, rgba(0,0,0,0.6) 100%);
}
/* ═══ INFO layout (About/Recruit/Contact) ═══ */
.info-page{
  min-height:100vh;
  display:flex;align-items:center;justify-content:center;
  padding:calc(var(--nav-h) + 1.5rem) var(--pad-x) 4rem;
}
.info-grid{
  display:grid;grid-template-columns:5fr 6fr;gap:5rem;
  max-width:1060px;width:100%;
}
.info-label{
  font-family:var(--serif);font-style:italic;
  font-size:0.75rem;letter-spacing:0.22em;
  color:var(--tx-low);display:block;margin-bottom:1.8rem;
}
.info-title{
  font-family:var(--serif);
  font-size:clamp(1.5rem,2.6vw,2.4rem);
  font-weight:400;letter-spacing:0.04em;
  color:#fff;line-height:1.55;margin-bottom:1.8rem;
}
.info-desc{font-size:0.88rem;line-height:2.2;letter-spacing:0.06em;color:rgba(255,255,255,0.5)}
.info-table{display:flex;flex-direction:column}
.info-row{
  display:grid;grid-template-columns:7.5rem 1fr;
  padding:1rem 0;border-bottom:0.5px solid rgba(255,255,255,0.08);
}
.info-row:first-child{border-top:0.5px solid rgba(255,255,255,0.08)}
.info-row dt{
  font-family:var(--serif);font-style:italic;font-size:0.75rem;
  letter-spacing:0.14em;color:var(--tx-low);padding-top:0.15rem;
}
.info-row dd{
  font-family:var(--serif);font-size:0.92rem;
  letter-spacing:0.06em;color:rgba(255,255,255,0.75);line-height:1.9;
}
.info-row dd a{color:rgba(255,255,255,0.45);text-decoration:none;transition:color 0.3s}
.info-row dd a:hover{color:#fff}
.small-note{font-size:0.82em;color:rgba(255,255,255,0.4)}

/* エディタで書かれた本文のスタイル（Recruit等） */
.entry-body h2{
  font-family:var(--serif);font-size:1.3rem;font-weight:400;
  letter-spacing:0.06em;color:#fff;margin:2.5rem 0 1rem;
}
.entry-body h3{
  font-family:var(--serif);font-size:1.05rem;font-weight:400;
  letter-spacing:0.06em;color:rgba(255,255,255,0.85);margin:2rem 0 0.8rem;
}
.entry-body p{
  font-size:0.9rem;line-height:2.1;letter-spacing:0.05em;
  color:rgba(255,255,255,0.6);margin-bottom:1.2rem;
}
.entry-body ul,.entry-body ol{margin:0 0 1.5rem 1.2rem}
.entry-body li{
  font-family:var(--serif);font-size:0.92rem;letter-spacing:0.08em;
  color:rgba(255,255,255,0.55);padding:0.35rem 0;line-height:1.8;
}
.entry-body table{width:100%;border-collapse:collapse;margin:1.5rem 0}
.entry-body th,.entry-body td{
  text-align:left;padding:0.9rem 0.5rem;
  border-bottom:0.5px solid rgba(255,255,255,0.08);
  font-size:0.9rem;line-height:1.8;vertical-align:top;
}
.entry-body th{
  font-family:var(--serif);font-style:italic;font-weight:400;
  font-size:0.75rem;letter-spacing:0.14em;color:var(--tx-low);
  width:8rem;
}
.entry-body td{font-family:var(--serif);color:rgba(255,255,255,0.75)}
.entry-body img{display:block;margin:1.5rem 0}
.entry-body a{color:rgba(255,255,255,0.55)}
.entry-body a:hover{color:#fff}

.btn-line{
  display:inline-block;font-family:var(--serif);
  font-size:0.82rem;letter-spacing:0.22em;color:rgba(255,255,255,0.5);
  border:0.5px solid rgba(255,255,255,0.18);padding:0.85rem 2.2rem;
  cursor:pointer;transition:all 0.35s;text-decoration:none;background:transparent;
}
.btn-line:hover{color:var(--tx-hi);border-color:rgba(255,255,255,0.45)}

/* ═══ CONTACT — Contact Form 7 対応 ═══ */
.contact-form label{
  font-family:var(--serif);font-style:italic;font-size:0.75rem;
  letter-spacing:0.2em;color:rgba(255,255,255,0.35);display:block;margin-bottom:0.55rem;
}
.contact-form p{margin-bottom:2.2rem}
.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form input[type="tel"],
.contact-form textarea,
.contact-form select{
  width:100%;background:transparent;border:none;
  border-bottom:0.5px solid rgba(255,255,255,0.18);
  color:rgba(255,255,255,0.85);font-family:var(--serif);
  font-size:1rem;letter-spacing:0.06em;padding:0.55rem 0 0.75rem;
  outline:none;transition:border-color 0.3s;
  appearance:none;-webkit-appearance:none;border-radius:0;
}
.contact-form select{cursor:pointer}
.contact-form select option{background:#1a1a1a;color:rgba(255,255,255,0.85)}
.contact-form input:focus,.contact-form textarea:focus,.contact-form select:focus{border-bottom-color:rgba(255,255,255,0.6)}
.contact-form input::placeholder,.contact-form textarea::placeholder{color:rgba(255,255,255,0.15);font-style:italic}
.contact-form textarea{resize:none;height:110px;line-height:1.9}
.contact-form input[type="submit"]{
  width:auto;font-family:var(--serif);
  font-size:0.82rem;letter-spacing:0.22em;color:rgba(255,255,255,0.5);
  border:0.5px solid rgba(255,255,255,0.18);padding:0.85rem 2.2rem;
  cursor:pointer;transition:all 0.35s;background:transparent;
}
.contact-form input[type="submit"]:hover{color:var(--tx-hi);border-color:rgba(255,255,255,0.45)}
.contact-form .wpcf7-response-output{
  border:0.5px solid rgba(255,255,255,0.18) !important;
  font-family:var(--serif);font-style:italic;
  font-size:0.85rem;color:rgba(255,255,255,0.6);
  padding:1rem 1.2rem;margin:1.5rem 0 0;
}
.contact-form .wpcf7-not-valid-tip{
  font-size:0.72rem;color:rgba(255,150,150,0.7);
  font-family:var(--sans);padding-top:0.4rem;display:block;
}

/* ═══ WORKS 一覧 ═══ */
.works-wrap{
  max-width:1240px;margin:0 auto;
  padding:calc(var(--nav-h) + 2rem) var(--pad-x) 8rem;
}
.works-head{margin-bottom:3.5rem}
.works-list{display:flex;flex-direction:column;gap:2.2rem}
.work-card{
  position:relative;cursor:pointer;display:block;text-decoration:none;
  opacity:0;transform:translateY(40px);
  transition:opacity 1s cubic-bezier(0.16,1,0.3,1), transform 1s cubic-bezier(0.16,1,0.3,1);
}
.work-card.revealed{opacity:1;transform:none}
.work-thumb{overflow:hidden;position:relative;aspect-ratio:21/9}
.work-thumb img{
  width:100%;height:100%;object-fit:cover;display:block;
  transform:scale(1.06);
  transition:transform 1.4s cubic-bezier(0.16,1,0.3,1), filter 0.8s ease;
  filter:brightness(0.72);
}
.work-card.revealed .work-thumb img{transform:scale(1)}
.work-card:hover .work-thumb img{transform:scale(1.03);filter:brightness(0.9)}
.work-label{
  position:absolute;top:50%;left:3.5rem;transform:translateY(-50%);
  z-index:2;pointer-events:none;
}
.work-num{
  font-family:var(--serif);font-style:italic;
  font-size:0.78rem;letter-spacing:0.24em;
  color:rgba(255,255,255,0.55);display:block;margin-bottom:0.9rem;
}
.work-title{
  font-family:var(--serif);
  font-size:clamp(1.5rem,2.8vw,2.4rem);
  font-weight:400;letter-spacing:0.06em;
  color:#fff;line-height:1.3;display:block;
}
.work-year{
  font-family:var(--serif);font-style:italic;
  font-size:0.85rem;letter-spacing:0.16em;
  color:rgba(255,255,255,0.6);display:block;margin-top:0.8rem;
}
.work-client{
  font-family:var(--sans);font-weight:300;
  font-size:0.72rem;letter-spacing:0.1em;
  color:rgba(255,255,255,0.45);display:block;margin-top:0.4rem;
}

/* ═══ WORKS 詳細 ═══ */
.detail{max-width:860px;margin:0 auto;padding-bottom:10rem}
.hero{width:100vw;margin-left:calc(-50vw + 50%);height:100vh;overflow:hidden;position:relative}
.hero img{width:100%;height:100%;object-fit:cover}
.hero-overlay{
  position:absolute;inset:0;
  background:linear-gradient(to bottom, rgba(14,14,14,0.2) 0%, rgba(14,14,14,0.3) 50%, rgba(14,14,14,0.75) 100%);
}
.hero-label{position:absolute;top:50%;left:var(--pad-x);transform:translateY(-50%);max-width:85%}
.hero-label .category{
  font-family:var(--serif);font-style:italic;font-size:0.8rem;
  letter-spacing:0.2em;color:rgba(255,255,255,0.5);margin-bottom:0.6rem;display:block;
}
.hero-label h1{
  font-family:var(--serif);font-size:clamp(2rem,4vw,3.2rem);
  font-weight:400;letter-spacing:0.04em;color:#fff;line-height:1.25;
}
.hero-label .client{
  font-family:var(--serif);font-style:italic;font-size:0.85rem;
  letter-spacing:0.14em;color:rgba(255,255,255,0.45);margin-top:0.7rem;display:block;
}
.text-block{padding:5rem var(--pad-x) 4rem;max-width:720px}
.text-block .entry-body p{font-size:0.95rem;line-height:2;color:rgba(255,255,255,0.7);letter-spacing:0.04em}
.meta{display:flex;gap:3rem;flex-wrap:wrap;margin-bottom:2.5rem}
.meta-item .label{
  font-family:var(--serif);font-style:italic;font-size:0.72rem;
  letter-spacing:0.18em;color:var(--tx-low);display:block;margin-bottom:0.3rem;
}
.meta-item .value{font-family:var(--serif);font-size:1rem;letter-spacing:0.08em;color:rgba(255,255,255,0.8)}
.work-gallery{display:flex;flex-direction:column;gap:0.5rem;padding:0}
.work-gallery img{width:100%;display:block}
.back-to-works{
  display:inline-block;margin:4rem var(--pad-x) 0;
  font-family:var(--serif);font-style:italic;
  font-size:0.82rem;letter-spacing:0.15em;
  color:rgba(255,255,255,0.4);text-decoration:none;transition:color 0.3s;
}
.back-to-works:hover{color:#fff}

/* ═══ MOBILE ═══ */
@media (max-width: 768px){
  :root{--pad-x:1.4rem;--nav-h:5.5rem}
  .site-nav{padding:1.3rem var(--pad-x)}
  .nav-logo{width:130px}
  .nav-links{gap:0.5rem}
  .nav-links a{font-size:0.8rem}
  .project-list-fixed{padding:1.6rem var(--pad-x);max-width:78%}
  .pt{font-size:0.8rem}
  .py{font-size:0.68rem}
  .project-item{padding:0.4rem 0}
  .info-page{align-items:flex-start;padding:calc(var(--nav-h) + 2rem) var(--pad-x) 5rem}
  .info-grid{grid-template-columns:1fr;gap:3rem}
  .info-title{font-size:1.4rem}
  .info-row{grid-template-columns:6rem 1fr;padding:0.85rem 0}
  .info-row dd{font-size:0.86rem}
  .works-list{gap:1.5rem}
  .work-thumb{aspect-ratio:16/9}
  .work-label{left:1.4rem}
  .work-title{font-size:1.3rem}
  .works-head{margin-bottom:2rem}
  .text-block{padding:3.5rem var(--pad-x) 3rem}
  .meta{gap:1.6rem}
}