:root{
  --encre:#0E1422;        /* 深い藍墨 */
  --bleu:#1F3C88;         /* bleu de France */
  --bleu-pale:#8FA3D1;
  --craie:#F5F6F8;        /* 冷たい白 */
  --gris:#5B6270;
  --vermillon:#C8401F;    /* 朱 — fil rouge */
  --ligne:rgba(14,20,34,.12);
  --font-display:"Cormorant Garamond",serif;
  --font-mincho:"Shippori Mincho",serif;
  --font-body:"Zen Kaku Gothic New",sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:var(--font-body);color:var(--encre);background:var(--craie);line-height:1.9;font-size:15px;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
::selection{background:var(--bleu);color:#fff}

/* ---------- header ---------- */
header{position:fixed;top:0;left:0;right:0;z-index:100;display:flex;align-items:center;justify-content:space-between;padding:18px 40px;background:rgba(245,246,248,.85);backdrop-filter:blur(12px);border-bottom:1px solid var(--ligne);transition:padding .3s}
.logo{display:flex;align-items:baseline;gap:10px}
.logo .mark{font-family:var(--font-display);font-size:30px;line-height:1;letter-spacing:.04em;font-weight:600;color:var(--bleu)}
.logo .name{font-family:var(--font-mincho);font-size:16px;letter-spacing:.18em;font-weight:600}
.logo .name small{display:block;font-family:var(--font-body);font-size:8.5px;letter-spacing:.3em;color:var(--gris);font-weight:500;margin-top:1px}
nav.gnav{display:flex;gap:30px;align-items:center}
nav.gnav a{font-size:11px;letter-spacing:.22em;font-weight:500;position:relative;padding:4px 0;color:var(--encre)}
nav.gnav a::after{content:"";position:absolute;left:0;bottom:0;width:0;height:1px;background:var(--vermillon);transition:width .3s}
nav.gnav a:hover::after,nav.gnav a.current::after{width:100%}
nav.gnav a.current{color:var(--bleu)}
.menu-btn{display:none;background:none;border:none;font-size:11px;letter-spacing:.25em;cursor:pointer;font-family:var(--font-body)}

/* ---------- placeholder (画像差し替え用) ---------- */
.ph{position:relative;overflow:hidden;background:
  repeating-linear-gradient(135deg, rgba(14,20,34,.045) 0 11px, rgba(14,20,34,.085) 11px 22px);
  display:flex;align-items:center;justify-content:center}
.ph.dark{background:
  repeating-linear-gradient(135deg, rgba(255,255,255,.05) 0 11px, rgba(255,255,255,.10) 11px 22px)}
.ph-label{font-family:"Courier New",monospace;font-size:11px;letter-spacing:.06em;color:var(--gris);background:rgba(245,246,248,.9);padding:6px 13px;border:1px solid var(--ligne);max-width:80%;text-align:center}
.ph.dark .ph-label{color:rgba(245,246,248,.85);background:rgba(14,20,34,.55);border-color:rgba(255,255,255,.2)}

/* ---------- hero ---------- */
.hero{min-height:100vh;display:flex;flex-direction:column;justify-content:center;padding:140px 40px 80px;position:relative;overflow:hidden;background:
  linear-gradient(100deg, rgba(245,246,248,.98) 0%, rgba(245,246,248,.94) 44%, rgba(245,246,248,.72) 74%, rgba(245,246,248,.6) 100%),
  repeating-linear-gradient(135deg, rgba(14,20,34,.045) 0 11px, rgba(14,20,34,.085) 11px 22px),
  var(--craie)}
.hero-ph-label{position:absolute;right:26px;bottom:24px;font-family:"Courier New",monospace;font-size:11px;letter-spacing:.06em;color:var(--gris);background:rgba(245,246,248,.9);padding:6px 13px;border:1px solid var(--ligne)}
.hero-inner{max-width:1180px;margin:0 auto;width:100%;position:relative}
.hero-eyebrow{font-size:11px;letter-spacing:.4em;color:var(--bleu);font-weight:700;margin-bottom:28px}
.hero h1{font-family:var(--font-mincho);font-size:clamp(30px,4.6vw,58px);font-weight:600;line-height:1.55;letter-spacing:.06em}
.hero h1 .accent{color:var(--bleu)}
.hero-sub{margin-top:30px;max-width:580px;color:var(--gris);font-size:14px}
.hero-cta{margin-top:46px;display:flex;gap:18px;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;gap:12px;padding:15px 34px;font-size:12px;letter-spacing:.25em;font-weight:700;border:1px solid var(--encre);transition:all .3s;cursor:pointer}
.btn .arr{transition:transform .3s}
.btn:hover .arr{transform:translateX(5px)}
.btn-fill{background:var(--encre);color:#fff}
.btn-fill:hover{background:var(--bleu);border-color:var(--bleu)}
.btn-line:hover{background:var(--encre);color:#fff}

/* route line — signature */
.route{margin-top:90px;border-top:1px solid var(--ligne);padding-top:34px;display:grid;grid-template-columns:1fr auto 1fr;gap:24px;align-items:center}
.city{display:flex;flex-direction:column;gap:2px}
.city.right{text-align:right;align-items:flex-end}
.city .name{font-family:var(--font-display);font-size:24px;letter-spacing:.18em;font-weight:600}
.city .clock{font-size:12px;color:var(--gris);letter-spacing:.12em;font-variant-numeric:tabular-nums}
.route-mid{display:flex;flex-direction:column;align-items:center;gap:6px;min-width:200px}
.route-line{width:100%;height:1px;background:linear-gradient(90deg,var(--encre),var(--vermillon),var(--encre));position:relative}
.route-line::before,.route-line::after{content:"";position:absolute;top:-3px;width:7px;height:7px;border-radius:50%;background:var(--encre)}
.route-line::before{left:0}
.route-line::after{right:0;background:var(--vermillon)}
.plane{position:absolute;top:-7px;left:0;font-size:13px;animation:fly 9s ease-in-out infinite alternate}
@keyframes fly{from{left:2%}to{left:92%}}
.route-mid .km{font-size:10px;letter-spacing:.3em;color:var(--gris)}

/* ---------- page header (下層ページ) ---------- */
.page-head{padding:150px 40px 60px;background:#fff;border-bottom:1px solid var(--ligne)}
.page-head .wrap{display:flex;align-items:baseline;gap:24px;flex-wrap:wrap}
.page-head .en{font-family:var(--font-display);font-size:clamp(40px,5vw,68px);letter-spacing:.06em;font-weight:500;line-height:1}
.page-head .ja{font-size:13px;letter-spacing:.3em;color:var(--gris);font-weight:500;padding-bottom:10px;border-bottom:1px solid var(--vermillon)}
.crumb{max-width:1180px;margin:0 auto 22px;font-size:11px;letter-spacing:.14em;color:var(--gris)}
.crumb a:hover{color:var(--bleu)}
.crumb span{margin:0 8px;color:var(--ligne)}

/* ---------- common section ---------- */
section{padding:110px 40px}
.wrap{max-width:1180px;margin:0 auto}
.sec-head{display:flex;align-items:baseline;gap:22px;margin-bottom:58px;flex-wrap:wrap}
.sec-head .en{font-family:var(--font-display);font-size:clamp(34px,3.6vw,50px);letter-spacing:.1em;font-weight:500}
.sec-head .ja{font-size:12px;letter-spacing:.3em;color:var(--gris);font-weight:500;padding-bottom:8px;border-bottom:1px solid var(--vermillon)}
.lead-jp{font-family:var(--font-mincho);font-size:clamp(20px,2.4vw,30px);font-weight:600;line-height:1.9;letter-spacing:.05em}

/* reveal */
.rv{opacity:0;transform:translateY(26px);transition:opacity .8s ease,transform .8s ease}
.rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .rv{opacity:1;transform:none;transition:none}
  .plane{animation:none}
  html{scroll-behavior:auto}
}

/* ---------- about ---------- */
.bg-white{background:#fff}
.about-photo{position:relative;margin-bottom:34px;overflow:hidden}
.about-photo .ph{height:340px}
.about-photo::after{content:"";position:absolute;inset:10px;border:1px solid rgba(255,255,255,.55);pointer-events:none}
.about-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:70px;align-items:start}
.about-grid p{color:var(--gris);margin-top:26px;font-size:14.5px}

/* mission / message blocks */
.duo{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--ligne);border:1px solid var(--ligne);margin-top:10px}
.duo .cell{background:#fff;padding:48px 44px}
.duo .cell .tag{font-family:var(--font-display);font-style:italic;font-size:16px;color:var(--bleu);letter-spacing:.06em}
.duo .cell h3{font-family:var(--font-mincho);font-size:20px;font-weight:600;letter-spacing:.08em;margin:12px 0 16px}
.duo .cell p{font-size:14px;color:var(--gris)}

.message{display:grid;grid-template-columns:.8fr 1.2fr;gap:60px;align-items:center}
.message .ph{height:380px}
.message .lead-jp{margin-bottom:24px}
.message p{color:var(--gris);font-size:14.5px;margin-top:18px}
.message .sign{margin-top:34px;font-family:var(--font-mincho);font-size:15px;letter-spacing:.1em}
.message .sign small{display:block;font-family:var(--font-body);font-size:11px;letter-spacing:.2em;color:var(--gris);margin-bottom:6px}

/* ---------- service ---------- */
.svc-section{background:var(--encre);color:var(--craie)}
.svc-section .sec-head .en{color:#fff}
.svc-section .sec-head .ja{color:var(--bleu-pale)}
.svc-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.12)}
.svc{background:var(--encre);padding:48px 42px;position:relative;transition:background .35s}
.svc:hover{background:#16203a}
.svc-photo{margin:-48px -42px 28px;height:200px;overflow:hidden;position:relative}
.svc-photo .ph{height:100%}
.svc-photo::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(14,20,34,.85) 100%);pointer-events:none}
.svc .tag{font-family:var(--font-display);font-style:italic;font-size:15px;color:var(--bleu-pale);letter-spacing:.08em}
.svc h3{font-family:var(--font-mincho);font-size:21px;font-weight:600;letter-spacing:.08em;margin:14px 0 16px}
.svc p{font-size:13.5px;color:rgba(245,246,248,.66);line-height:2}
.svc ul{margin-top:18px;list-style:none;display:flex;flex-wrap:wrap;gap:8px}
.svc li{font-size:10.5px;letter-spacing:.12em;border:1px solid rgba(255,255,255,.22);padding:5px 12px;border-radius:99px;color:rgba(245,246,248,.75)}
.svc .corner{position:absolute;top:0;right:0;width:34px;height:34px;border-left:1px solid var(--vermillon);border-bottom:1px solid var(--vermillon);opacity:0;transition:opacity .35s}
.svc:hover .corner{opacity:1}

/* service preview (home) */
.svc-prev{display:grid;grid-template-columns:repeat(5,1fr);gap:22px}
.svc-prev .card{border-top:2px solid var(--encre);padding-top:22px}
.svc-prev .card.lead-card{border-top-color:var(--vermillon)}
.svc-prev .card .tag{font-family:var(--font-display);font-style:italic;font-size:14px;color:var(--bleu)}
.svc-prev .card h3{font-family:var(--font-mincho);font-size:16px;font-weight:600;letter-spacing:.06em;margin:10px 0 12px}
.svc-prev .card p{font-size:13px;color:var(--gris)}

/* featured service (注目サービス) */
.svc-feature{display:grid;grid-template-columns:1fr 1.05fr;gap:0;border:1px solid rgba(255,255,255,.14);margin-bottom:52px;background:#16203a;position:relative}
.svc-feature .svc-feature-photo{position:relative;overflow:hidden;min-height:320px}
.svc-feature .svc-feature-photo .ph{height:100%}
.svc-feature-body{padding:52px 50px}
.svc-feature .badge{display:inline-block;font-size:10px;letter-spacing:.24em;color:var(--vermillon);border:1px solid var(--vermillon);padding:5px 13px;margin-bottom:20px}
.svc-feature .tag{font-family:var(--font-display);font-style:italic;font-size:16px;color:var(--bleu-pale);letter-spacing:.08em}
.svc-feature h3{font-family:var(--font-mincho);font-size:clamp(22px,2.4vw,28px);font-weight:600;letter-spacing:.05em;margin:12px 0 18px;color:#fff;line-height:1.5}
.svc-feature p{font-size:14px;color:rgba(245,246,248,.72);line-height:2}
.svc-feature ul{margin-top:22px;list-style:none;display:flex;flex-wrap:wrap;gap:8px}
.svc-feature li{font-size:10.5px;letter-spacing:.12em;border:1px solid rgba(255,255,255,.22);padding:5px 12px;border-radius:99px;color:rgba(245,246,248,.78)}

/* ---------- strength ---------- */
.str-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:50px;margin-top:14px}
.str{border-top:2px solid var(--encre);padding-top:26px}
.str .no{font-family:var(--font-display);font-size:15px;letter-spacing:.2em;color:var(--vermillon)}
.str h3{font-family:var(--font-mincho);font-size:18px;font-weight:600;letter-spacing:.08em;margin:12px 0 14px}
.str p{font-size:13.5px;color:var(--gris)}

/* ---------- flow ---------- */
.flow-list{display:grid;gap:0;border-top:1px solid var(--ligne)}
.step{display:grid;grid-template-columns:120px 280px 1fr;gap:30px;align-items:baseline;padding:34px 6px;border-bottom:1px solid var(--ligne);transition:background .3s}
.step:hover{background:var(--craie)}
.step .num{font-family:var(--font-display);font-size:30px;color:var(--bleu);letter-spacing:.08em}
.step h4{font-family:var(--font-mincho);font-size:17px;font-weight:600;letter-spacing:.1em}
.step p{font-size:13.5px;color:var(--gris)}

/* ---------- company ---------- */
.cmp-table{width:100%;border-collapse:collapse}
.cmp-table th,.cmp-table td{text-align:left;padding:22px 8px;border-bottom:1px solid var(--ligne);vertical-align:top;font-weight:400}
.cmp-table th{width:220px;font-size:11px;letter-spacing:.25em;color:var(--gris)}
.cmp-table td{font-size:14px}
.map .ph{height:360px;margin-top:14px}

/* ---------- contact ---------- */
.contact-hero{background:
  linear-gradient(135deg, rgba(31,60,136,.93) 0%, rgba(22,40,79,.95) 100%),
  repeating-linear-gradient(135deg, rgba(255,255,255,.05) 0 11px, rgba(255,255,255,.10) 11px 22px),
  var(--bleu);
  color:#fff;text-align:center}
.contact-hero .fr-line{font-family:var(--font-mincho);font-size:clamp(24px,3.2vw,40px);letter-spacing:.08em;font-weight:600}
.contact-hero .jp-line{font-size:15px;letter-spacing:.14em;margin-top:18px;color:rgba(255,255,255,.85)}
.contact-hero .btn{margin-top:44px;border-color:#fff;color:#fff}
.contact-hero .btn:hover{background:#fff;color:var(--bleu)}
.contact-hero .mail{margin-top:26px;font-size:12px;letter-spacing:.12em;color:rgba(255,255,255,.7)}

/* contact detail cards */
.contact-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--ligne);border:1px solid var(--ligne)}
.contact-grid .cell{background:#fff;padding:42px 34px}
.contact-grid .cell .tag{font-family:var(--font-display);font-style:italic;font-size:15px;color:var(--bleu)}
.contact-grid .cell h3{font-family:var(--font-mincho);font-size:17px;font-weight:600;letter-spacing:.08em;margin:10px 0 14px}
.contact-grid .cell p{font-size:13.5px;color:var(--gris)}
.contact-grid .cell .big{font-family:var(--font-display);font-size:24px;color:var(--encre);letter-spacing:.04em;margin-top:4px}

/* simple form */
.cform{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:10px}
.cform .field{display:flex;flex-direction:column;gap:8px}
.cform .field.full{grid-column:1/-1}
.cform label{font-size:11px;letter-spacing:.2em;color:var(--gris);font-weight:500}
.cform label .req{color:var(--vermillon);margin-left:6px}
.cform input,.cform textarea,.cform select{font-family:var(--font-body);font-size:14px;padding:13px 14px;border:1px solid var(--ligne);background:#fff;color:var(--encre);width:100%}
.cform textarea{resize:vertical;min-height:140px}
.cform input:focus,.cform textarea:focus,.cform select:focus{outline:none;border-color:var(--bleu)}
.cform .submit-row{grid-column:1/-1;display:flex;justify-content:flex-end;align-items:center;gap:20px}
.cform .note{font-size:11px;color:var(--gris);letter-spacing:.08em}

/* ---------- cta band ---------- */
.cta-band{background:var(--encre);color:#fff;text-align:center}
.cta-band .fr-line{font-family:var(--font-mincho);font-size:clamp(22px,3vw,36px);letter-spacing:.08em;font-weight:600}
.cta-band p{color:rgba(245,246,248,.7);margin-top:16px;font-size:14px}
.cta-band .btn{margin-top:36px;border-color:#fff;color:#fff}
.cta-band .btn:hover{background:#fff;color:var(--encre)}

/* ---------- footer ---------- */
footer{padding:60px 40px 36px;background:var(--encre);color:rgba(245,246,248,.7)}
.foot-top{max-width:1180px;margin:0 auto;display:flex;justify-content:space-between;gap:40px;flex-wrap:wrap;padding-bottom:40px;border-bottom:1px solid rgba(255,255,255,.12)}
.foot-logo{display:flex;align-items:baseline;gap:10px}
.foot-logo .mark{font-family:var(--font-display);font-size:26px;line-height:1;color:var(--bleu-pale);font-weight:600}
.foot-logo .name{font-family:var(--font-mincho);font-size:15px;letter-spacing:.16em;color:#fff}
.foot-logo .name small{display:block;font-family:var(--font-body);font-size:8.5px;letter-spacing:.3em;margin-top:2px;color:rgba(245,246,248,.5)}
.foot-nav{display:flex;gap:26px;flex-wrap:wrap;font-size:11px;letter-spacing:.2em}
.foot-nav a:hover{color:#fff}
.foot-btm{max-width:1180px;margin:24px auto 0;display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;font-size:10.5px;letter-spacing:.1em;color:rgba(245,246,248,.45)}

/* ---------- responsive ---------- */
@media(max-width:920px){
  nav.gnav{display:none}
  .menu-btn{display:block}
  header.open nav.gnav{display:flex;position:absolute;top:100%;left:0;right:0;flex-direction:column;background:var(--craie);padding:26px 40px;gap:20px;border-bottom:1px solid var(--ligne);align-items:flex-start}
  .about-grid,.svc-grid,.str-grid,.duo,.message,.cform,.svc-prev,.contact-grid,.svc-feature{grid-template-columns:1fr}
  .svc-feature .svc-feature-photo{min-height:220px}
  .message .ph{height:280px}
  .svc-prev{gap:34px}
  .step{grid-template-columns:70px 1fr;grid-template-rows:auto auto}
  .step p{grid-column:2}
  section{padding:80px 24px}
  header{padding:16px 24px}
  .hero{padding:120px 24px 60px}
  .page-head{padding:130px 24px 50px}
  .route{grid-template-columns:1fr;gap:14px}
  .city.right{text-align:left;align-items:flex-start}
  .route-mid{order:3;align-items:flex-start;width:100%}
  .cmp-table th{width:130px;letter-spacing:.15em}
}
