/*
Theme Name: ComesNext
Theme URI: https://comes-next.com/
Author: ComesNext
Description: ComesNext corporate website theme. Small ideas, next possibilities.
Version: 0.1.10
Requires at least: 6.6
Requires PHP: 8.1
Text Domain: comesnext
*/

:root {
  --bg: #f4f4f0;
  --text: #181818;
  --muted: #77776f;
  --line: #d7d7cf;
  --panel: #e8e8e1;
  --accent: #a33f0c;
  --brand-orange: #f26a21;
  --dark: #191a18;
  --max: 1180px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--text);
  background: var(--bg);
  font-family: Inter, "Noto Sans JP", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.8;
  letter-spacing: .02em;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; height: auto; display: block; }
.site-header {
  position: sticky; top: 0; z-index: 50; height: 78px;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 5vw; background: rgba(244,244,240,.90);
  backdrop-filter: blur(12px); border-bottom: 1px solid rgba(24,24,24,.08);
}
.brand { font-size: 1.2rem; font-weight: 600; letter-spacing: -.02em; }
.site-nav { display: flex; gap: 2rem; font-size: .86rem; align-items:center; }
.site-nav a { position: relative; color: #4e4e48; }
.site-nav a::after {
  content:""; position:absolute; left:0; right:100%; bottom:-.25rem;
  height:1px; background:var(--text); transition:right .25s ease;
}
.site-nav a:hover::after, .site-nav .current-menu-item > a::after { right:0; }
.site-nav .menu-item:last-child > a {
  padding:.62rem 1rem; border:1px solid var(--brand-orange); color:var(--accent);
  transition:background .2s ease,color .2s ease;
}
.site-nav .menu-item:last-child > a::after { display:none; }
.site-nav .menu-item:last-child > a:hover,
.site-nav .menu-item:last-child > a:focus-visible {
  background:var(--brand-orange); color:#171717;
}
.menu-toggle { display:none; }
.hero {
  min-height: calc(92svh - 78px);
  display:grid; grid-template-columns:minmax(0,1fr) minmax(220px,.55fr);
  align-items:end; padding:120px 5vw 7vw; overflow:hidden;
}
.hero-inner { max-width:820px; }
.eyebrow,.section-label {
  margin:0 0 1.4rem; color:var(--accent); font-size:.76rem;
  font-weight:600; letter-spacing:.14em; text-transform:uppercase;
}
.hero h1,.page-hero h1 {
  margin:0; font-size:clamp(3.6rem,7.4vw,6.75rem); line-height:1.04;
  letter-spacing:-.065em; font-weight:500;
}
.hero-copy {
  margin:3rem 0 2rem; max-width:650px;
  font-size:clamp(1rem,1.35vw,1.2rem); color:#4f4f49;
}
.text-link {
  display:inline-flex; gap:.8rem; align-items:center; font-size:.9rem;
  font-weight:500; border-bottom:1px solid var(--text); padding-bottom:.3rem;
}
.text-link span { transition:transform .2s ease; }
.text-link:hover span { transform:translateX(5px); }
.hero-visual { position:relative; justify-self:end; align-self:center; width:min(34vw,470px); height:min(52vw,560px); }
.hero-mark {
  position:absolute; right:-2.5vw; bottom:0; z-index:0;
  font-size:clamp(5rem,16vw,14rem); line-height:.72; letter-spacing:-.1em;
  font-weight:600; color:rgba(242,106,33,.08); writing-mode:vertical-rl;
  transform:rotate(180deg); user-select:none;
}
.workspace-window {
  position:absolute; border:1px solid rgba(24,24,24,.12);
  background:rgba(255,255,255,.30); backdrop-filter:blur(6px);
  box-shadow:0 16px 50px rgba(24,24,24,.04);
}
.window-main { width:82%; height:42%; top:17%; left:1%; transform:rotate(-2deg); }
.window-mini { width:52%; height:29%; right:0; bottom:17%; transform:rotate(3deg); }
.window-bar {
  height:30px; display:flex; align-items:center; gap:6px; padding:0 10px;
  border-bottom:1px solid rgba(24,24,24,.08);
}
.window-bar span { width:6px; height:6px; border-radius:50%; background:rgba(242,106,33,.30); }
.window-body { padding:22px 20px; }
.code-line { height:7px; margin:0 0 12px; border-radius:999px; background:rgba(242,106,33,.13); }
.code-line:nth-child(even) { background:rgba(24,24,24,.08); }
.w48{width:48%}.w58{width:58%}.w66{width:66%}.w72{width:72%}.w84{width:84%}
.mini-grid { height:calc(100% - 30px); padding:15px; display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.mini-grid div { border:1px solid rgba(24,24,24,.06); background:rgba(242,106,33,.055); }
.cursor-shape {
  position:absolute; width:18px; height:26px; right:18%; top:46%; z-index:4;
  clip-path:polygon(0 0,0 100%,30% 70%,50% 100%,64% 92%,45% 63%,86% 62%);
  background:rgba(24,24,24,.38); transform:rotate(-10deg);
}
.section {
  width:min(var(--max),90vw); margin:0 auto; padding:clamp(6rem,9vw,8.5rem) 0;
  border-top:1px solid var(--line); display:grid; grid-template-columns:120px 1fr; gap:4vw;
}
.section-number { color:var(--muted); font-size:.8rem; }
.section-content { max-width:900px; }
.section h2,.contact-band h2,.page-section h2 {
  margin:0 0 3rem; font-size:clamp(2.2rem,5vw,5.2rem);
  line-height:1.12; letter-spacing:-.055em; font-weight:500;
}
.body-copy { max-width:700px; font-size:1.02rem; color:#505049; }
.body-copy p { margin:0 0 1.2rem; }
.section-link { margin-top:1.25rem; }
.thought {
  background:var(--panel); width:100%; max-width:none;
  padding-left:max(5vw,calc((100vw - var(--max))/2));
  padding-right:max(5vw,calc((100vw - var(--max))/2));
}
.quote-block { margin:3rem 0; display:flex; align-items:center; flex-wrap:wrap; gap:1rem; }
.quote-block p {
  margin:0; padding:.65rem 1rem; border:1px solid #c5c4bb;
  font-size:clamp(1.15rem,2vw,1.55rem); line-height:1.35; letter-spacing:-.03em;
}
.quote-block p:not(:last-child)::after { content:"→"; margin-left:2rem; color:var(--brand-orange); }
.working-scene {
  width:min(var(--max),90vw); margin:0 auto; padding:9rem 0 10rem;
  border-top:1px solid var(--line); display:grid;
  grid-template-columns:.85fr 1.15fr; gap:7vw; align-items:center;
}
.working-copy { max-width:500px; }
.working-lead {
  margin:0 0 1.3rem; font-size:clamp(1.8rem,4vw,3.6rem);
  line-height:1.18; letter-spacing:-.045em;
}
.working-copy>p:last-child { color:#55554f; }
.desktop-sketch { position:relative; min-height:390px; display:grid; place-items:center; }
.sketch-screen {
  position:relative; width:min(100%,590px); aspect-ratio:16/10;
  border:1px solid rgba(24,24,24,.13); background:rgba(255,255,255,.24);
  box-shadow:0 25px 70px rgba(24,24,24,.045); overflow:hidden;
}
.sketch-top { position:absolute; left:0; right:0; top:0; height:34px; border-bottom:1px solid rgba(24,24,24,.08); }
.sketch-side {
  position:absolute; top:34px; bottom:0; left:0; width:72px;
  border-right:1px solid rgba(24,24,24,.08); background:rgba(39,93,82,.03);
}
.sketch-content { position:absolute; top:62px; left:102px; right:30px; bottom:30px; }
.sketch-card { min-height:72px; border:1px solid rgba(24,24,24,.07); background:rgba(39,93,82,.045); }
.sketch-card.wide { min-height:85px; margin-bottom:15px; }
.sketch-row { display:grid; grid-template-columns:1fr 1fr; gap:15px; }
.sketch-lines { margin-top:20px; }
.sketch-lines i { display:block; height:6px; margin-bottom:9px; background:rgba(24,24,24,.07); }
.sketch-lines i:nth-child(1){width:86%}.sketch-lines i:nth-child(2){width:64%}.sketch-lines i:nth-child(3){width:78%}.sketch-lines i:nth-child(4){width:42%}
.sketch-stand { width:74px; height:52px; border-left:1px solid rgba(24,24,24,.12); border-right:1px solid rgba(24,24,24,.12); }
.sketch-base { width:190px; height:1px; background:rgba(24,24,24,.18); }
.section-heading-row { display:flex; justify-content:space-between; gap:2rem; align-items:end; }
.news-list { border-top:1px solid var(--line); }
.news-item {
  display:grid; grid-template-columns:150px 1fr; gap:2rem; padding:1.5rem 0;
  border-bottom:1px solid var(--line); transition:opacity .2s ease;
}
.news-item:hover { opacity:.55; }
.news-item time { color:var(--muted); font-size:.8rem; }
.contact-band { padding:10rem 5vw 9rem; background:var(--dark); color:#f6f6f1; }
.contact-band .section-label { color:#f59a63; }
.contact-band p { color:#bdbdb5; }
.contact-button {
  display:inline-flex; justify-content:space-between; align-items:center; min-width:280px;
  margin-top:2rem; padding:1.2rem 1.4rem; border:1px solid var(--brand-orange);
  background:var(--brand-orange); color:#171717; font-weight:600;
  transition:background .2s ease,color .2s ease;
}
.contact-button:hover,.contact-button:focus-visible { background:#f3f3ee; border-color:#f3f3ee; color:#181818; }
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible {
  outline:3px solid rgba(242,106,33,.55); outline-offset:3px;
}
.site-footer {
  padding:3rem 5vw; display:flex; justify-content:space-between;
  align-items:end; gap:2rem; border-top:1px solid var(--line);
}
.footer-brand { font-size:1.2rem; font-weight:600; }
.footer-meta { display:flex; gap:2rem; color:var(--muted); font-size:.75rem; }

.page-hero { width:min(var(--max),90vw); margin:0 auto; padding:9rem 0 7rem; }
.page-hero p { max-width:700px; margin-top:2.5rem; color:#55554f; font-size:1.05rem; }
.page-section { width:min(var(--max),90vw); margin:0 auto; padding:7rem 0; border-top:1px solid var(--line); }
.split { display:grid; grid-template-columns:.8fr 1.2fr; gap:8vw; }
.small-heading { margin:0; font-size:1rem; color:var(--muted); font-weight:500; }
.facts { display:grid; border-top:1px solid var(--line); }
.fact-row { display:grid; grid-template-columns:180px 1fr; gap:2rem; padding:1.3rem 0; border-bottom:1px solid var(--line); }
.fact-row dt { color:var(--muted); }.fact-row dd { margin:0; }
.info-list { border-top:1px solid var(--line); }
.info-entry { padding:2rem 0; border-bottom:1px solid var(--line); }
.info-entry time { display:block; color:var(--muted); font-size:.8rem; margin-bottom:.5rem; }
.info-entry h2,.info-entry h3 { margin:0 0 .8rem; font-size:1.25rem; font-weight:500; }
.info-entry p { margin:0; color:#55554f; max-width:760px; }
.contact-grid { display:grid; grid-template-columns:.8fr 1.2fr; gap:7vw; }
.contact-panel { padding:2rem 0; border-top:1px solid var(--line); }
.contact-panel p { color:#55554f; }
.entry-content { width:min(var(--max),90vw); margin:0 auto; }
.entry-content > * { max-width:850px; }
.entry-content .wp-block-group { max-width:none; }
.cn-form { display:grid; gap:1.4rem; }
.cn-form label { display:block; font-size:.85rem; margin-bottom:.4rem; }
.cn-form input,.cn-form textarea {
  width:100%; border:1px solid var(--line); background:rgba(255,255,255,.35);
  padding:1rem; font:inherit;
}
.cn-form textarea { min-height:180px; resize:vertical; }
.cn-note { color:var(--muted); font-size:.78rem; }
.cn-button {
  display:inline-block; background:var(--dark); color:#fff; padding:1rem 1.4rem;
  border:0; font:inherit;
}
.policy { max-width:850px; }
.policy h2 { font-size:1.3rem; margin:3rem 0 1rem; letter-spacing:-.02em; }
.policy p,.policy li { color:#55554f; }
.reveal { opacity:0; transform:translateY(24px); transition:opacity .75s ease,transform .75s ease; }
.reveal.visible { opacity:1; transform:translateY(0); }

@media (max-width:760px) {
  .site-header{height:66px}
  .menu-toggle{
    display:grid;width:38px;height:38px;place-content:center;gap:4px;
    border:0;background:transparent;cursor:pointer
  }
  .menu-toggle>span:not(.screen-reader-text){width:20px;height:1px;background:var(--text)}
  .site-nav{
    position:fixed;top:66px;left:0;right:0;display:grid;gap:0;padding:1rem 5vw 1.5rem;
    background:var(--bg);border-bottom:1px solid var(--line);
    transform:translateY(calc(-100% - 66px));
    visibility:hidden;
    opacity:0;
    pointer-events:none;
    transition:transform .25s ease, opacity .2s ease, visibility 0s linear .25s
  }
  .site-nav.open{
    transform:translateY(0);
    visibility:visible;
    opacity:1;
    pointer-events:auto;
    transition:transform .25s ease, opacity .2s ease
  }
  .site-nav a{padding:.8rem 0;border-bottom:1px solid var(--line)}
  .hero{min-height:auto;grid-template-columns:1fr;padding:7.5rem 5vw 5.5rem}
  .hero-visual{display:none}
  .hero h1,.page-hero h1{font-size:clamp(3rem,14vw,4rem)}
  .hero-copy{margin-top:2.2rem}
  .section{width:90vw;padding:5.5rem 0;grid-template-columns:1fr;gap:1.5rem}
  .thought{width:100%;padding-left:5vw;padding-right:5vw}
  .working-scene{grid-template-columns:1fr;padding:6.5rem 0 7rem;gap:3rem}
  .desktop-sketch{min-height:250px}
  .sketch-side{width:48px}
  .sketch-content{left:70px;right:20px;top:52px;bottom:20px}
  .section-heading-row,.split,.contact-grid{grid-template-columns:1fr;display:grid}
  .news-item,.fact-row{grid-template-columns:1fr;gap:.4rem}
  .contact-band{padding:5.5rem 5vw}
  .site-footer{flex-direction:column;align-items:start}
  .footer-meta{flex-direction:column;gap:.5rem}
  .page-hero{padding:5rem 0 4rem}
  .page-section{padding:4rem 0}
  .quote-block{gap:.65rem}
  .quote-block p{padding:.55rem .7rem;font-size:1rem}
  .quote-block p:not(:last-child)::after{margin-left:1rem}
}
@media (prefers-reduced-motion:reduce) {
  *{scroll-behavior:auto!important;animation:none!important;transition:none!important}
  .reveal{opacity:1;transform:none}
}


/* Contact Form 7 - ComesNext styling */
.wpcf7 { width: 100%; }
.wpcf7 form { display: grid; gap: 1.6rem; }
.wpcf7 form > p { margin: 0; }
.wpcf7 label { display:block; font-size:.88rem; font-weight:500; color:var(--text); letter-spacing:.02em; }
.field-note { margin-left:.45em; color:var(--muted); font-size:.78rem; font-weight:400; }
.form-privacy { width:min(100%,760px); color:var(--muted); font-size:.84rem; }
.form-privacy a { border-bottom:1px solid currentColor; }
.wpcf7-form-control-wrap { display:block; margin-top:.55rem; }
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 input[type="url"],
.wpcf7 textarea {
  width:min(100%,760px); border:1px solid var(--line); border-radius:0;
  background:rgba(255,255,255,.38); color:var(--text); padding:1rem 1.05rem;
  font:inherit; line-height:1.6; outline:none;
  transition:border-color .2s ease,background .2s ease,box-shadow .2s ease;
}
.wpcf7 textarea { min-height:210px; resize:vertical; }
.wpcf7 input:focus,.wpcf7 textarea:focus {
  border-color:var(--accent); background:rgba(255,255,255,.62);
  box-shadow:0 0 0 3px rgba(242,106,33,.09);
}
.wpcf7 input[type="submit"] {
  appearance:none; min-width:170px; border:1px solid var(--brand-orange); border-radius:0;
  background:var(--brand-orange); color:#171717; padding:1rem 1.4rem; font:inherit;
  font-weight:500; cursor:pointer; transition:background .2s ease,color .2s ease;
}
.wpcf7 input[type="submit"]:hover { background:transparent; color:var(--dark); }
.wpcf7-spinner { margin:0 0 0 .8rem; }
.wpcf7-not-valid-tip { margin-top:.45rem; color:#9a3939; font-size:.78rem; }
.wpcf7 form .wpcf7-response-output {
  width:min(100%,760px); margin:.8rem 0 0; padding:1rem 1.1rem;
  border:1px solid var(--line); background:rgba(255,255,255,.3);
  color:var(--text); font-size:.9rem;
}
.wpcf7 form.sent .wpcf7-response-output {
  border-color:rgba(242,106,33,.45); background:rgba(242,106,33,.06);
}
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output,
.wpcf7 form.payment-required .wpcf7-response-output {
  border-color:rgba(154,57,57,.42); background:rgba(154,57,57,.05);
}
@media (max-width:760px) {
  .wpcf7 input[type="text"],.wpcf7 input[type="email"],.wpcf7 input[type="tel"],
  .wpcf7 input[type="url"],.wpcf7 textarea,.wpcf7 form .wpcf7-response-output { width:100%; }
  .wpcf7 input[type="text"],.wpcf7 input[type="email"],.wpcf7 input[type="tel"],
  .wpcf7 input[type="url"],.wpcf7 textarea { font-size:16px; }
  .wpcf7 input[type="submit"] { width:100%; }
}


/* 404 */
.error404-wrap{width:min(var(--max),90vw);margin:0 auto;min-height:calc(100svh - 218px);padding:10rem 0 8rem;display:grid;grid-template-columns:120px 1fr;gap:4vw}.error404-code{color:var(--muted);font-size:.8rem;padding-top:.7rem}.error404-content{max-width:820px}.error404-content h1{margin:0 0 2.5rem;font-size:clamp(3.2rem,8vw,7.5rem);line-height:1.04;letter-spacing:-.065em;font-weight:500}.error404-content p{max-width:620px;color:#55554f;margin:0 0 2rem}@media(max-width:760px){.error404-wrap{min-height:calc(100svh - 206px);padding:7rem 0 6rem;grid-template-columns:1fr;gap:1.5rem}.error404-content h1{font-size:clamp(3rem,15vw,5.6rem)}}


/* v0.1.4 - mobile navigation readability */
.site-nav .menu-item {
  list-style: none;
  margin: 0;
  padding: 0;
}

@media (max-width:760px) {
  .site-nav .menu-item {
    list-style: none;
  }

  .site-nav a {
    display: block;
    position: relative;
    padding: .85rem .8rem .85rem 1rem;
    border-bottom: 1px solid var(--line);
    text-decoration: none;
  }

  .site-nav .menu-item:last-child > a {
    padding:.85rem .8rem .85rem 1rem;
    border:0;
    border-bottom:1px solid var(--line);
    color:#4e4e48;
  }

  /* PC用の下線アニメーションはスマホでは使わない */
  .site-nav a::after {
    display: none !important;
  }

  .site-nav .current-menu-item > a,
  .site-nav a:hover,
  .site-nav a:focus-visible {
    background: rgba(242,106,33,.045);
  }

  .site-nav .current-menu-item > a {
    font-weight: 600;
    color: var(--text);
  }

  .site-nav .current-menu-item > a::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: 3px;
    height: 1.4em;
    background: var(--accent);
    transform: translateY(-50%);
  }
}


/* v0.1.8 — approved B logo, exact traced source */
.brand {
  display: inline-flex;
  align-items: center;
  padding: 0;
}
.brand-approved-logo {
  display: block;
  width: auto;
  height: 46px;
  max-width: 260px;
  object-fit: contain;
}
@media (max-width:760px) {
  .brand-approved-logo {
    height: 38px;
    max-width: 215px;
  }
}


/* v0.1.9 — WordPress管理画面からロゴ差し替え対応 */
.brand-wrap {
  display: flex;
  align-items: center;
}

.custom-brand-logo .custom-logo-link {
  display: inline-flex;
  align-items: center;
  line-height: 0;
}

.custom-brand-logo .custom-logo {
  display: block;
  width: auto;
  height: 46px;
  max-width: 300px;
  object-fit: contain;
}

@media (max-width:760px) {
  .custom-brand-logo .custom-logo {
    height: 38px;
    max-width: 230px;
  }
}