@charset "UTF-8"; @import url("../css/custom.css");
/*****contents*****/
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
汎用
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.no_link{
     pointer-events: none;
    cursor: inherit;
}

li:hover:has(.no_link){
    opacity: 1 !important;
}

body {
    max-width: 1920px;
    margin: 0 auto;
}

main {
    overflow: hidden;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
汎用
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.montserrat {
    font-family: "Montserrat", sans-serif;
}

.parallax {
    position: relative;
    width: 100%;
    height: 500px;
    overflow: hidden;
}

.parallax .bg {
    background: url("../images/home/para01.jpg") no-repeat 50% / cover;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 900px;
    /* 余裕を持たせる */
    z-index: -1;
    transition: transform 0.5s ease-out;
    /* スムーズな動き */
    transform: translateY(0);
    /* 初期値を-30%に設定 */
}

h2.cmn_ttl .slug {
    font-size: 96px;
    letter-spacing: .06em;
    line-height: 1.3;
    font-weight: 600;
}

h2.cmn_ttl .ttl {
    font-size: 22px;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
新Topページ　2026.07
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
/* ARAIBA トップ D2 用スタイル（WordPress 追加CSS に貼り付け） */
:root{--ink:#22231f;--ink2:#86867e;--line:#ececea;--soft:#f7f6f2;--accent:#46613f;--accent-d:#374e2e;
    --en:"Jost",sans-serif;--mincho:"Shippori Mincho",serif;--go:"Zen Kaku Gothic New",sans-serif;}
  *{box-sizing:border-box}
  html{scroll-behavior:smooth}
  body{margin:0;font-family:var(--go);font-weight:400;color:var(--ink);background:#fff;font-size:15px;line-height:2;-webkit-font-smoothing:antialiased;letter-spacing:.02em}
  img{max-width:100%;display:block}a{color:inherit;text-decoration:none;cursor:pointer}
  a:focus-visible,[role=button]:focus-visible,button:focus-visible{outline:2px solid var(--accent-d);outline-offset:3px}
  .wrap{max-width:1200px;margin:0 auto;padding:0 32px}
  .demo{background:var(--ink);color:#fff;font-size:12px;text-align:center;padding:7px;letter-spacing:.04em}
  /* subtle grain overlay */
  .grain{position:fixed;inset:0;z-index:9000;pointer-events:none;opacity:.035;mix-blend-mode:multiply;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
  /* reveal */
  .reveal{opacity:0;transform:translateY(26px);transition:opacity .9s ease,transform .9s ease}
  .reveal.in{opacity:1;transform:none}
  /* header */
  header{position:sticky;top:0;z-index:40;background:rgba(255,255,255,.86);backdrop-filter:blur(10px);border-bottom:1px solid var(--line);transition:.3s}
  .bar{display:flex;align-items:center;justify-content:space-between;height:80px;transition:.3s}
  header.small .bar{height:60px}
  .logo{font-family:var(--en);font-weight:500;font-size:23px;letter-spacing:.4em;color:var(--ink);transition:.3s}
  header.small .logo{font-size:20px}
  nav{display:flex;align-items:center;gap:34px;font-size:13px;font-weight:500;letter-spacing:.04em}
  nav a{position:relative;padding:4px 0}
  nav a::after{content:"";position:absolute;left:0;bottom:0;width:0;height:1px;background:var(--accent-d);transition:.25s}
  nav a:hover{color:var(--accent-d)}nav a:hover::after{width:100%}
  .hcta{font-family:var(--en);font-weight:500;font-size:12px;letter-spacing:.14em;border:1px solid var(--ink);padding:11px 20px}
  .hcta::after{display:none}.hcta:hover{background:var(--ink);color:#fff}
  .ham{display:none;flex-direction:column;gap:6px;background:none;border:none;cursor:pointer;padding:8px}.ham span{width:26px;height:1.5px;background:var(--ink);display:block}
  .drawer{position:fixed;inset:0 0 0 auto;width:84%;max-width:340px;background:#fff;transform:translateX(100%);transition:.3s;z-index:60;padding:30px;overflow:auto}.drawer.open{transform:translateX(0)}
  .drawer .x{float:right;font-size:24px;border:none;background:none;cursor:pointer;color:var(--ink2)}.drawer a{display:block;padding:16px 0;border-bottom:1px solid var(--line);letter-spacing:.04em}
  .scrim{position:fixed;inset:0;background:rgba(20,22,18,.34);z-index:55;display:none}.scrim.open{display:block}
  /* hero with video */
  .hero{position:relative;height:92vh;min-height:580px;display:flex;align-items:flex-end;overflow:hidden;background:#22231f}
  .hero video,.hero .poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
  .hero .poster{background:#eef2ea url('araiba-hero-pc.png') center/cover;animation:kb 22s ease-in-out infinite alternate}
  @keyframes kb{from{transform:scale(1)}to{transform:scale(1.08)}}
  .hero::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(28,30,24,.6),rgba(28,30,24,.05) 48%,transparent)}
  .hero .wrap{position:relative;z-index:2;padding-bottom:66px;color:#fff}
  .hero .en{font-family:var(--en);font-weight:300;letter-spacing:.34em;font-size:13px;margin-bottom:22px;opacity:.92}
  .hero h1{font-weight:500;font-size:clamp(28px,4vw,46px);line-height:1.7;margin:0 0 30px;text-shadow:0 2px 26px rgba(0,0,0,.3)}
  .btns{display:flex;gap:0;flex-wrap:wrap}
  .lk{font-family:var(--en);font-weight:400;font-size:13px;letter-spacing:.12em;color:#fff;padding:16px 32px;border:1px solid rgba(255,255,255,.7)}
  .lk.fill{background:#fff;color:var(--ink);border-color:#fff}.lk:hover{background:rgba(255,255,255,.16)}.lk.fill:hover{background:#f0efe9}
  .scrollcue{position:absolute;left:50%;bottom:22px;z-index:3;color:#fff;font-family:var(--en);font-size:10px;letter-spacing:.3em;opacity:.8;animation:bob 2s ease-in-out infinite}
  @keyframes bob{0%,100%{transform:translate(-50%,0)}50%{transform:translate(-50%,7px)}}
  /* sections */
  section{padding:120px 0}
  .soft{background:var(--soft)}
  .head{text-align:center;margin-bottom:60px}
  .head .big{font-family:var(--en);font-weight:400;font-size:13px;letter-spacing:.28em;line-height:1;text-transform:uppercase;color:var(--accent-d)}
  .head .jp{font-size:clamp(24px,3.4vw,34px);color:var(--ink);letter-spacing:.08em;margin-top:12px;font-weight:500}
  .head .lead{font-size:14px;color:var(--ink2);margin-top:16px}
  /* worry */
  .worry{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line)}
  .w{border-bottom:1px solid var(--line);padding:36px 30px;cursor:pointer;transition:.25s;display:flex;gap:20px;align-items:flex-start}
  .w:hover{background:var(--soft);padding-left:38px}
  .w img{width:38px;height:38px;flex:none;opacity:.92;filter:saturate(.9)}
  .w b{font-weight:500;font-size:16px;display:block}.w small{color:var(--ink2);font-size:12.5px;display:block;margin-top:4px;line-height:1.7}
  .w .go{font-family:var(--en);font-size:11px;letter-spacing:.1em;color:var(--accent-d);margin-top:8px;display:inline-block}
  /* products full-bleed with zoom */
  .pbig{display:grid;grid-template-columns:1fr 1fr;gap:2px}
  .pcard{position:relative;aspect-ratio:16/10;overflow:hidden;cursor:pointer}
  .pcard .bg{position:absolute;inset:0;background:#e9ece2 center/cover;transition:transform 1.1s ease;filter:saturate(.96) brightness(1.02)}
  .pcard:hover .bg{transform:scale(1.06)}
  .pcard::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(20,22,18,.4),transparent 60%)}
  .pcard .cap{position:absolute;left:0;bottom:0;z-index:2;color:#fff;padding:26px 28px}
  .pcard .cap b{font-size:18px;font-weight:500;display:block;letter-spacing:.04em}.pcard .cap small{font-size:12px;opacity:.92}
  .pcard.light::after{background:linear-gradient(to top,rgba(255,255,255,.5),transparent 60%)}.pcard.light .cap{color:var(--ink)}
  .teasers{display:grid;grid-template-columns:1fr 1fr;gap:2px;margin-top:2px}
  .tz{background:var(--ink);color:#fff;padding:34px 28px;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:16px}
  .tz b{font-weight:500;font-size:16px}.tz small{opacity:.8;font-size:12px;display:block;margin-top:4px}
  .tz .pill{font-family:var(--en);font-size:11px;letter-spacing:.1em;border:1px solid rgba(255,255,255,.6);padding:9px 16px;white-space:nowrap}
  /* full-bleed photo band (parallax) */
  .band{position:relative;height:62vh;min-height:420px;display:flex;align-items:center;justify-content:center;text-align:center;color:#fff;
    background:#3a443a url('araiba-timeline.png') center/cover fixed}
  .band::after{content:"";position:absolute;inset:0;background:rgba(28,30,24,.42)}
  .band .q{position:relative;z-index:2;font-family:var(--mincho);font-weight:600;font-size:clamp(22px,3.4vw,40px);line-height:1.9;letter-spacing:.06em;text-shadow:0 2px 20px rgba(0,0,0,.3)}
  /* stages */
  .stages{display:grid;grid-template-columns:repeat(5,1fr);border-top:1px solid var(--line)}
  .st{border-bottom:1px solid var(--line);border-right:1px solid var(--line);padding:30px 22px;cursor:pointer;transition:.25s}.st:last-child{border-right:none}.st:hover{background:var(--soft)}
  .st .n{font-family:var(--en);font-size:13px;color:var(--accent-d);letter-spacing:.1em}.st b{display:block;margin-top:8px;font-weight:500;font-size:16px}.st small{display:block;color:var(--ink2);font-size:12px;margin-top:6px;line-height:1.7}
  /* story */
  .story{display:grid;grid-template-columns:1.1fr 1fr;gap:64px;align-items:center}
  .story .ph{aspect-ratio:4/5;background:#e9ece2 center/cover;filter:saturate(.96)}
  .story .en{font-family:var(--en);font-weight:400;font-size:13px;letter-spacing:.28em;text-transform:uppercase;color:var(--accent-d)}
  .story h2{font-family:var(--mincho);font-weight:600;font-size:27px;line-height:1.9;margin:14px 0 20px}.story p{color:#555;font-size:14.5px}
  /* trust */
  .trust{display:flex;gap:48px;flex-wrap:wrap;justify-content:center;font-size:14px;color:var(--ink2)}
  .trust span::before{content:"—";color:var(--accent);margin-right:12px}
  /* columns horizontal scroll */
  .chz{display:flex;gap:24px;overflow-x:auto;padding:6px 4px 24px;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch}
  .chz::-webkit-scrollbar{height:3px}.chz::-webkit-scrollbar-thumb{background:var(--line)}
  .cc{flex:0 0 340px;scroll-snap-align:start;cursor:pointer}
  .cc .ph{aspect-ratio:3/2;background:#e9ece2 center/cover;margin-bottom:16px;overflow:hidden}
  .cc .date{font-family:var(--en);font-size:12px;color:var(--ink2);letter-spacing:.06em}
  .cc b{display:block;font-weight:500;font-size:15px;margin-top:6px;line-height:1.7}.cc:hover b{color:var(--accent-d)}
  .center{text-align:center;margin-top:48px}
  .more{font-family:var(--en);font-size:12px;letter-spacing:.14em;border:1px solid var(--ink);padding:14px 30px;text-transform:uppercase}.more:hover{background:var(--ink);color:#fff}
  /* connect */
  .connect{display:flex;border:1px solid var(--line);max-width:860px;margin:0 auto}
  .connect a{flex:1;text-align:center;padding:28px 10px;font-size:13.5px;font-weight:500;border-right:1px solid var(--line);transition:.25s}.connect a:last-child{border-right:none}.connect a:hover{background:var(--soft);color:var(--accent-d)}
  /* footer */
  footer{background:var(--ink);color:#bdbdb4;padding:66px 0 34px}
  .backlink{border:1px solid #41423b;padding:18px 22px;font-size:13px;margin-bottom:40px;line-height:1.9}
  .fcol{display:flex;justify-content:space-between;flex-wrap:wrap;gap:30px}.fcol .logo{color:#fff;font-size:21px}
  footer a{color:#bdbdb4;font-size:13px;line-height:2.2}footer a:hover{color:#fff}
  .fine{font-family:var(--en);text-align:center;margin-top:32px;color:#7d7e76;font-size:11px;letter-spacing:.16em}
  @media(max-width:880px){nav{display:none}.ham{display:flex}.worry{grid-template-columns:1fr}.pbig,.teasers{grid-template-columns:1fr}.stages{grid-template-columns:1fr 1fr}.story{grid-template-columns:1fr;gap:30px}.hero{height:80vh}.trust{gap:18px}.band{background-attachment:scroll}.connect{flex-direction:column}.connect a{border-right:none;border-bottom:1px solid var(--line)}}
  @media(max-width:520px){section{padding:72px 0}.hero{height:74vh;min-height:480px}.hero h1{font-size:23px;line-height:1.75}.hero .wrap{padding-bottom:50px}.head{margin-bottom:44px}.head .jp{font-size:23px}.stages{grid-template-columns:1fr}.w{padding:28px 22px}.cc{flex:0 0 80%}.btns{flex-direction:column}.lk{text-align:center}.story{gap:24px}.band{height:52vh;min-height:340px}.demo{font-size:11px;letter-spacing:0}}
  @media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none}.hero .poster{animation:none}.hero video{display:none}.scrollcue{display:none}*{scroll-behavior:auto!important}}