/*
Theme Name: G.R.A AUTO WORKS Child
Theme URI: https://gra-autoworks.jp/
Description: G.R.A AUTO WORKS（大阪府守口市）専用 Astra子テーマ。ブランドトークンと gra- プレフィックスの共通部品を提供。
Author: and CLEA 統括秘書室
Author URI: https://and-clea.co.jp/
Template: astra
Version: 1.1.4
License: GNU General Public License v2 or later
Text Domain: gra-autoworks-child
*/

/* ===== G.R.A ブランドトークン ===== */
:root {
  --gra-primary: #1B365D;   /* 紺: 信頼・整備工場の堅実さ */
  --gra-accent:  #0AC2D6;   /* オレンジ: CTA・強調 */
  --gra-accent-hover: #089AAB;
  --gra-text:    #333333;
  --gra-bg-light:#F2F5F9;
  --gra-link:    #1B365D;
  --gra-ok:      #008000;
}

/* ===== 共通部品（gra- プレフィックス厳守） ===== */
.gra-section-title {
  border-left: 6px solid var(--gra-accent);
  padding: .4em .6em;
  background: var(--gra-bg-light);
  color: var(--gra-primary);
  font-weight: 700;
}
.gra-cta-btn,
.gra-cta-btn:visited {
  display: inline-block;
  background: var(--gra-accent);
  color: #fff !important;
  font-weight: 700;
  padding: .9em 2em;
  border-radius: 6px;
  text-decoration: none;
  box-shadow: 0 3px 8px rgba(0,0,0,.18);
}
.gra-cta-btn:hover { background: var(--gra-accent-hover); }
.gra-tel {
  font-size: 1.5em;
  font-weight: 800;
  color: var(--gra-primary);
  white-space: nowrap;
}
.gra-note { font-size: .85em; color: #666; }
.gra-price-tax { font-size: .8em; color: #666; } /* 税込総額表示の補助表記 */
.gra-card {
  border: 1px solid #d9dee5;
  border-radius: 8px;
  padding: 1.2em;
  background: #fff;
}
.gra-badge-starex {
  display: inline-block;
  background: var(--gra-primary);
  color: #fff;
  font-size: .8em;
  padding: .25em .8em;
  border-radius: 999px;
}
@media (max-width: 480px) {
  .gra-cta-btn { display: block; text-align: center; }
}


/* ===== TOP(v2) 移設 CSS START (.gra-lp スコープ) 2026-07-14 ===== */
.gra-lp{--navy: #1B365D; --navy-2: #14284A; --navy-3: #0D1B33; --ink: #212B38; --orange: #0AC2D6; --orange-2: #3DD9EC; --orange-d: #089AAB; --line-green: #06C755; --bg: #F4F6F9; --paper: #FFFFFF; --border: #E3E8EF; --muted: #657182; --en: 'Barlow Condensed',sans-serif; --jp: 'Noto Sans JP','Hiragino Kaku Gothic ProN',Meiryo,sans-serif;}
.gra-lp *{box-sizing: border-box; margin: 0px; padding: 0px;}
.gra-lp{scroll-behavior: smooth;}
.gra-lp{font-family: var(--jp); color: var(--ink); line-height: 1.9; background: var(--paper); -webkit-font-smoothing: antialiased; font-size: 15.5px;}
.gra-lp a{text-decoration: none; color: inherit;}
.gra-lp ul{list-style: none;}
.gra-lp .wrap{max-width: 1120px; margin: 0px auto; padding: 0px 24px;}
.gra-lp svg{display: block;}
.gra-lp .kicker{font-family: var(--en); font-size: 15px; font-weight: 700; letter-spacing: 0.28em; color: var(--orange); text-transform: uppercase;}
.gra-lp .h2{font-size: clamp(26px, 3.4vw, 38px); font-weight: 900; line-height: 1.4; letter-spacing: 0.02em; color: var(--navy);}
.gra-lp .h2 .bar{display: block; width: 44px; height: 4px; background: var(--orange); border-radius: 2px; margin-top: 14px;}
.gra-lp .center .h2 .bar{margin-left: auto; margin-right: auto;}
.gra-lp .center{text-align: center;}
.gra-lp .sechead{margin-bottom: 48px;}
.gra-lp .lead{color: var(--muted); margin-top: 14px; font-size: 15px;}
.gra-lp .todo{display: inline-flex; align-items: center; gap: 5px; background: rgb(255, 244, 214); border: 1px solid rgb(234, 198, 90); color: rgb(122, 98, 16); padding: 1px 9px; border-radius: 99px; font-size: 11.5px; font-weight: 700; letter-spacing: 0.02em; vertical-align: 2px; line-height: 1.7;}
.gra-lp .todo::before{content: ""; width: 6px; height: 6px; border-radius: 50%; background: rgb(224, 168, 0);}
.gra-lp .btn{display: inline-flex; align-items: center; justify-content: center; gap: 9px; font-weight: 700; border-radius: 6px; padding: 16px 30px; font-size: 15px; letter-spacing: 0.04em; transition: 0.2s; line-height: 1.3;}
.gra-lp .btn svg{width: 19px; height: 19px; flex: 0 0 auto;}
.gra-lp .btn-line{background: var(--line-green); color: rgb(255, 255, 255); box-shadow: rgba(6, 199, 85, 0.3) 0px 10px 24px;}
.gra-lp .btn-line:hover{transform: translateY(-2px); box-shadow: rgba(6, 199, 85, 0.38) 0px 14px 30px;}
.gra-lp .btn-orange{background: linear-gradient(135deg,var(--orange-2),var(--orange)); color: rgb(255, 255, 255); box-shadow: rgba(230, 92, 0, 0.3) 0px 10px 24px;}
.gra-lp .btn-orange:hover{transform: translateY(-2px);}
.gra-lp .btn-outline{border: 1.5px solid rgba(255, 255, 255, 0.55); color: rgb(255, 255, 255);}
.gra-lp .btn-outline:hover{background: rgba(255, 255, 255, 0.1);}
.gra-lp .topinfo{background: var(--navy-3); color: rgb(169, 184, 208); font-size: 12.5px;}
.gra-lp .topinfo .wrap{display: flex; justify-content: space-between; align-items: center; height: 36px;}
.gra-lp .topinfo .r{display: flex; gap: 18px;}
@media (max-width: 760px){.gra-lp .topinfo .l{display: none;}
.gra-lp .topinfo .wrap{justify-content: center;}
}
.gra-lp header.site{position: sticky; top: 0px; z-index: 90; background: rgba(255, 255, 255, 0.97); backdrop-filter: blur(10px); box-shadow: 0 1px 0 var(--border);}
.gra-lp .navrow{display: flex; align-items: center; justify-content: space-between; height: 76px;}
.gra-lp .brand{display: flex; align-items: center; gap: 12px;}
.gra-lp .brand .mark{width: 44px; height: 44px; border-radius: 9px; background: linear-gradient(150deg,var(--navy),var(--navy-3)); display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden;}
.gra-lp .brand .mark::after{content: ""; position: absolute; inset: auto -8px -10px auto; width: 26px; height: 26px; background: var(--orange); transform: rotate(45deg);}
.gra-lp .brand .mark span{font-family: var(--en); font-weight: 700; color: rgb(255, 255, 255); font-size: 19px; letter-spacing: 0.02em; position: relative; z-index: 1;}
.gra-lp .brand .t1{font-family: var(--en); font-weight: 700; font-size: 21px; letter-spacing: 0.06em; color: var(--navy); line-height: 1.1;}
.gra-lp .brand .t2{font-size: 10.5px; color: var(--muted); letter-spacing: 0.06em;}
.gra-lp nav.g a{margin-left: 26px; font-size: 14px; font-weight: 700; color: var(--navy); position: relative; padding: 6px 0px;}
.gra-lp nav.g a::after{content: ""; position: absolute; left: 0px; bottom: 0px; width: 0px; height: 2px; background: var(--orange); transition: 0.2s;}
.gra-lp nav.g a:hover::after{width: 100%;}
.gra-lp .hd-cta{display: flex; align-items: center; gap: 16px;}
.gra-lp .hd-tel{text-align: right; line-height: 1.25;}
.gra-lp .hd-tel .s{font-size: 10.5px; color: var(--muted); letter-spacing: 0.04em;}
.gra-lp .hd-tel .n{font-family: var(--en); font-weight: 700; font-size: 24px; color: var(--navy); letter-spacing: 0.04em;}
.gra-lp .hd-cta .btn{padding: 12px 22px; font-size: 13.5px; border-radius: 6px;}
@media (max-width: 1000px){.gra-lp nav.g{display: none;}
}
@media (max-width: 640px){.gra-lp .hd-tel{display: none;}
}
.gra-lp .hero{position: relative; background: var(--navy-3); color: rgb(255, 255, 255); overflow: hidden; clip-path: polygon(0px 0px, 100% 0px, 100% calc(100% - 4.5vw), 0px 100%);}
.gra-lp .hero .bgA{position: absolute; inset: 0px; background: radial-gradient(760px 420px at 86% 18%, rgba(230, 92, 0, 0.28), transparent 62%), radial-gradient(560px 380px at 8% 88%, rgba(27, 54, 93, 0.85), transparent 70%), linear-gradient(118deg, rgb(13, 27, 51) 30%, rgb(22, 41, 75) 62%, rgb(13, 27, 51) 100%);}
.gra-lp .hero .bgB{position: absolute; inset: 0px; background: repeating-linear-gradient(115deg, rgba(255, 255, 255, 0.027) 0px, rgba(255, 255, 255, 0.027) 2px, transparent 2px, transparent 96px);}
.gra-lp .hero .watermark{position: absolute; right: -8px; bottom: 2.5vw; font-family: var(--en); font-weight: 700; font-size: clamp(72px, 11vw, 150px); letter-spacing: 0.04em; color: transparent; -webkit-text-stroke: 1px rgba(255, 255, 255, 0.09); line-height: 1; user-select: none; pointer-events: none;}
.gra-lp .hero .wrap{position: relative; z-index: 2; padding-top: 84px; padding-bottom: calc(96px + 6vw);}
.gra-lp .hero .area{display: inline-flex; align-items: center; gap: 9px; border: 1px solid rgba(255, 255, 255, 0.28); background: rgba(255, 255, 255, 0.07); border-radius: 99px; padding: 7px 18px; font-size: 12.5px; font-weight: 700; letter-spacing: 0.08em; color: rgb(217, 226, 240); margin-bottom: 26px;}
.gra-lp .hero .area i{width: 7px; height: 7px; border-radius: 50%; background: var(--orange-2); box-shadow: 0 0 10px var(--orange-2);}
.gra-lp .hero h1{font-size: clamp(30px, 4.6vw, 52px); font-weight: 900; line-height: 1.42; letter-spacing: 0.02em; margin-bottom: 22px; color: rgb(255, 255, 255);}
.gra-lp .hero h1 em{font-style: normal; color: var(--orange-2); position: relative;}
.gra-lp .hero h1 .u{background: linear-gradient(transparent 68%, rgba(230, 92, 0, 0.45) 68%);}
.gra-lp .hero .sub{max-width: 600px; color: rgb(196, 208, 226); font-size: 15.5px; margin-bottom: 36px;}
.gra-lp .hero .sub b{color: rgb(255, 255, 255);}
.gra-lp .hero .ctas{display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 20px;}
.gra-lp .hero .ctas .btn{padding: 18px 34px; font-size: 16px; border-radius: 8px;}
.gra-lp .hero .micro{font-size: 12px; color: rgb(143, 163, 194); letter-spacing: 0.02em;}
.gra-lp .scrolldown{position: absolute; left: 50%; bottom: calc(18px + 4.5vw); transform: translateX(-50%); z-index: 2; font-family: var(--en); font-size: 11px; letter-spacing: 0.34em; color: rgb(143, 163, 194); writing-mode: vertical-rl; display: flex; align-items: center; gap: 8px;}
.gra-lp .scrolldown::after{content: ""; width: 1px; height: 42px; background: linear-gradient(var(--orange-2),transparent); animation: 1.8s ease 0s infinite normal none running sd;}
@keyframes sd { 
  0% { transform: scaleY(0); transform-origin: center top; }
  55% { transform: scaleY(1); transform-origin: center top; }
  56% { transform-origin: center bottom; }
  100% { transform: scaleY(0); transform-origin: center bottom; }
}
@media (max-width: 760px){.gra-lp .scrolldown{display: none;}
.gra-lp .hero .wrap{padding-top: 56px;}
}
.gra-lp .trust{position: relative; z-index: 5; margin-top: calc(-40px - 3.2vw);}
.gra-lp .trust .card{background: rgb(255, 255, 255); border-radius: 14px; box-shadow: rgba(13, 27, 51, 0.14) 0px 24px 60px; display: grid; grid-template-columns: repeat(4, 1fr); overflow: hidden;}
.gra-lp .trust .cell{padding: 28px 22px; display: flex; gap: 14px; align-items: center; border-right: 1px solid var(--border);}
.gra-lp .trust .cell:last-child{border-right: 0px;}
.gra-lp .trust .ic{width: 46px; height: 46px; border-radius: 10px; background: linear-gradient(150deg, rgb(255, 240, 227), rgb(255, 227, 204)); display: flex; align-items: center; justify-content: center; flex: 0 0 auto;}
.gra-lp .trust .ic svg{width: 23px; height: 23px; stroke: var(--orange); fill: none; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round;}
.gra-lp .trust b{display: block; font-size: 14.5px; color: var(--navy); line-height: 1.5;}
.gra-lp .trust span{font-size: 11.5px; color: var(--muted); letter-spacing: 0.02em;}
@media (max-width: 900px){.gra-lp .trust .card{grid-template-columns: 1fr 1fr;}
.gra-lp .trust .cell:nth-child(2){border-right: 0px;}
.gra-lp .trust .cell:nth-child(1),.gra-lp .trust .cell:nth-child(2){border-bottom: 1px solid var(--border);}
}
@media (max-width: 520px){.gra-lp .trust .card{grid-template-columns: 1fr;}
.gra-lp .trust .cell{border-bottom: 1px solid var(--border); border-right: 0px !important;}
.gra-lp .trust .cell:last-child{border-bottom: 0px;}
}
.gra-lp .sec{padding: 96px 0px;}
.gra-lp .sec.tight{padding-top: 80px;}
.gra-lp .reasons{display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px;}
.gra-lp .reason{position: relative; background: rgb(255, 255, 255); border: 1px solid var(--border); border-radius: 14px; padding: 70px 28px 32px; transition: 0.25s; overflow: hidden;}
.gra-lp .reason:hover{transform: translateY(-6px); box-shadow: rgba(13, 27, 51, 0.1) 0px 22px 44px; border-color: transparent;}
.gra-lp .reason .num{position: absolute; top: 10px; left: 20px; font-family: var(--en); font-weight: 700; font-size: 74px; line-height: 1; color: transparent; -webkit-text-stroke: 1.4px rgb(220, 227, 238);}
.gra-lp .reason:hover .num{-webkit-text-stroke-color: rgb(245, 201, 166);}
.gra-lp .reason .ric{position: absolute; top: 26px; right: 24px; width: 52px; height: 52px; border-radius: 12px; background: linear-gradient(150deg,var(--navy),var(--navy-3)); display: flex; align-items: center; justify-content: center;}
.gra-lp .reason .ric svg{width: 25px; height: 25px; stroke: rgb(255, 255, 255); fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;}
.gra-lp .reason h3{font-size: 18.5px; font-weight: 900; color: var(--navy); margin-bottom: 12px; line-height: 1.55;}
.gra-lp .reason p{font-size: 14px; color: var(--muted);}
@media (max-width: 860px){.gra-lp .reasons{grid-template-columns: 1fr;}
}
.gra-lp .trouble{background: var(--navy-3); color: rgb(255, 255, 255); position: relative; overflow: hidden; clip-path: polygon(0px 4.5vw, 100% 0px, 100% 100%, 0px 100%); padding: calc(96px + 4.5vw) 0px 96px;}
.gra-lp .trouble .glow{position: absolute; inset: 0px; background: radial-gradient(720px 400px at 12% 8%, rgba(230, 92, 0, 0.16), transparent 60%);}
.gra-lp .trouble .h2{color: rgb(255, 255, 255);}
.gra-lp .trouble .lead{color: rgb(157, 176, 204);}
.gra-lp .tgrid{display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; position: relative; z-index: 2;}
.gra-lp .tcard{background: rgba(255, 255, 255, 0.043); border: 1px solid rgba(255, 255, 255, 0.13); border-radius: 12px; padding: 26px 22px; display: flex; gap: 16px; align-items: flex-start; transition: 0.22s;}
.gra-lp .tcard:hover{background: rgba(230, 92, 0, 0.14); border-color: rgba(255, 143, 64, 0.55); transform: translateY(-4px);}
.gra-lp .tcard .tic{width: 44px; height: 44px; border-radius: 10px; background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.14); display: flex; align-items: center; justify-content: center; flex: 0 0 auto;}
.gra-lp .tcard .tic svg{width: 22px; height: 22px; stroke: var(--orange-2); fill: none; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round;}
.gra-lp .tcard b{display: block; font-size: 16px; font-weight: 900; letter-spacing: 0.02em;}
.gra-lp .tcard span{font-size: 12.5px; color: rgb(157, 176, 204); line-height: 1.7; display: block; margin-top: 3px;}
.gra-lp .tcard .arw{margin-left: auto; align-self: center; font-family: var(--en); color: var(--orange-2); font-size: 18px; opacity: 0; transform: translateX(-6px); transition: 0.22s;}
.gra-lp .tcard:hover .arw{opacity: 1; transform: none;}
.gra-lp .trouble .foot{position: relative; z-index: 2; text-align: center; margin-top: 34px; font-size: 13px; color: rgb(157, 176, 204);}
@media (max-width: 860px){.gra-lp .tgrid{grid-template-columns: 1fr 1fr;}
}
@media (max-width: 560px){.gra-lp .tgrid{grid-template-columns: 1fr;}
}
.gra-lp .svcband{background: var(--bg);}
.gra-lp .svclist{display: flex; flex-direction: column; gap: 22px;}
.gra-lp .svc{background: rgb(255, 255, 255); border: 1px solid var(--border); border-radius: 14px; padding: 34px 36px; display: flex; gap: 30px; align-items: flex-start; position: relative; transition: 0.22s;}
.gra-lp .svc:hover{box-shadow: rgba(13, 27, 51, 0.08) 0px 18px 40px;}
.gra-lp .svc .rank{font-family: var(--en); font-weight: 700; font-size: 56px; line-height: 1; color: transparent; -webkit-text-stroke: 1.4px rgb(199, 208, 222); flex: 0 0 74px; padding-top: 4px;}
.gra-lp .svc.main{border-width: medium; border-style: none; border-color: currentcolor; border-image: none; background: linear-gradient(135deg,var(--navy) 0%,var(--navy-3) 100%); color: rgb(255, 255, 255); box-shadow: rgba(13, 27, 51, 0.22) 0px 22px 48px;}
.gra-lp .svc.main .rank{-webkit-text-stroke-color: rgba(255, 143, 64, 0.8);}
.gra-lp .svc h3{font-size: 20px; font-weight: 900; color: var(--navy); line-height: 1.5; margin-bottom: 8px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap;}
.gra-lp .svc.main h3{color: rgb(255, 255, 255);}
.gra-lp .svc .badge{font-size: 11px; font-weight: 700; letter-spacing: 0.1em; background: linear-gradient(135deg,var(--orange-2),var(--orange)); color: rgb(255, 255, 255); border-radius: 4px; padding: 4px 10px;}
.gra-lp .svc p{font-size: 14px; color: var(--muted);}
.gra-lp .svc.main p{color: rgb(196, 208, 226);}
.gra-lp .svc .body{flex: 1 1 0%;}
.gra-lp .svc .go{align-self: center; flex: 0 0 auto; width: 44px; height: 44px; border-radius: 50%; border: 1.5px solid var(--border); display: flex; align-items: center; justify-content: center; transition: 0.2s;}
.gra-lp .svc .go svg{width: 17px; height: 17px; stroke: var(--navy); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;}
.gra-lp .svc:hover .go{background: var(--orange); border-color: var(--orange);}
.gra-lp .svc:hover .go svg{stroke: rgb(255, 255, 255);}
.gra-lp .svc.main .go{border-color: rgba(255, 255, 255, 0.4);}
.gra-lp .svc.main .go svg{stroke: rgb(255, 255, 255);}
@media (max-width: 700px){.gra-lp .svc{flex-direction: column; gap: 14px; padding: 28px 24px;}
.gra-lp .svc .rank{flex: 0 0 auto;}
.gra-lp .svc .go{display: none;}
}
.gra-lp .works{display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;}
.gra-lp .wk{background: rgb(255, 255, 255); border: 1px solid var(--border); border-radius: 14px; overflow: hidden; transition: 0.22s;}
.gra-lp .wk:hover{transform: translateY(-5px); box-shadow: rgba(13, 27, 51, 0.1) 0px 20px 44px;}
.gra-lp .wk .ph{position: relative; height: 190px; background: linear-gradient(135deg, rgb(30, 51, 87) 0%, rgb(13, 27, 51) 100%); display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 10px;}
.gra-lp .wk .ph::before{content: ""; position: absolute; inset: 0px; background: repeating-linear-gradient(115deg, rgba(255, 255, 255, 0.03) 0px, rgba(255, 255, 255, 0.03) 2px, transparent 2px, transparent 60px);}
.gra-lp .wk .ph svg{width: 34px; height: 34px; stroke: rgba(255, 255, 255, 0.5); fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;}
.gra-lp .wk .ph .cap{font-family: var(--en); font-size: 11px; letter-spacing: 0.3em; color: rgba(255, 255, 255, 0.55);}
.gra-lp .wk .ph .split{position: absolute; inset: 0px; display: flex;}
.gra-lp .wk .ph .split i{flex: 1 1 0%; position: relative;}
.gra-lp .wk .ph .split i:first-child{border-right: 1px solid rgba(255, 255, 255, 0.2);}
.gra-lp .wk .ph .split b{position: absolute; top: 12px; left: 14px; font-family: var(--en); font-size: 11px; letter-spacing: 0.22em; color: rgb(255, 255, 255); background: rgba(0, 0, 0, 0.35); padding: 3px 10px; border-radius: 3px; font-weight: 600;}
.gra-lp .wk .ph .split i:last-child b{background: var(--orange);}
.gra-lp .wk .tx{padding: 22px 24px;}
.gra-lp .wk .tx b{font-size: 16px; font-weight: 900; color: var(--navy);}
.gra-lp .wk .tx p{font-size: 13px; color: var(--muted); margin-top: 6px;}
@media (max-width: 860px){.gra-lp .works{grid-template-columns: 1fr;}
}
.gra-lp .starex{background: var(--bg);}
.gra-lp .stx{background: rgb(255, 255, 255); border-radius: 16px; box-shadow: rgba(13, 27, 51, 0.08) 0px 20px 50px; overflow: hidden; display: grid; grid-template-columns: 340px 1fr;}
.gra-lp .stx .seal{background: linear-gradient(155deg,var(--navy) 0%,var(--navy-3) 100%); color: rgb(255, 255, 255); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 44px 30px; position: relative; overflow: hidden;}
.gra-lp .stx .seal::before{content: ""; position: absolute; inset: 0px; background: radial-gradient(280px 200px at 70% 20%, rgba(230, 92, 0, 0.25), transparent 65%);}
.gra-lp .stx .ring{position: relative; width: 120px; height: 120px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, 0.35); display: flex; flex-direction: column; align-items: center; justify-content: center; margin-bottom: 18px;}
.gra-lp .stx .ring::before{content: ""; position: absolute; inset: 7px; border-radius: 50%; border: 1px dashed rgba(255, 255, 255, 0.3);}
.gra-lp .stx .ring .s1{font-family: var(--en); font-weight: 700; font-size: 22px; letter-spacing: 0.04em;}
.gra-lp .stx .ring .s2{font-family: var(--en); font-size: 9.5px; letter-spacing: 0.26em; color: rgb(245, 178, 126);}
.gra-lp .stx .seal b{position: relative; font-size: 15px; font-weight: 900; letter-spacing: 0.06em;}
.gra-lp .stx .seal span{position: relative; font-size: 11.5px; color: rgb(169, 184, 208); margin-top: 4px;}
.gra-lp .stx .txt{padding: 44px 46px;}
.gra-lp .stx .txt h3{font-size: 22px; font-weight: 900; color: var(--navy); margin: 10px 0px 12px; line-height: 1.5;}
.gra-lp .stx .txt p{font-size: 14px; color: var(--muted); margin-bottom: 20px;}
.gra-lp .stx .links a{display: flex; align-items: center; gap: 10px; padding: 13px 4px; border-top: 1px solid var(--border); font-size: 13.5px; font-weight: 700; color: var(--navy); transition: 0.15s;}
.gra-lp .stx .links a:hover{color: var(--orange); padding-left: 10px;}
.gra-lp .stx .links a svg{width: 15px; height: 15px; stroke: var(--orange); fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; flex: 0 0 auto;}
@media (max-width: 820px){.gra-lp .stx{grid-template-columns: 1fr;}
.gra-lp .stx .txt{padding: 34px 28px;}
}
.gra-lp .flow{display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; counter-reset: st 0;}
.gra-lp .fstep{position: relative; background: rgb(255, 255, 255); border: 1px solid var(--border); border-radius: 14px; padding: 34px 24px 28px; text-align: center;}
.gra-lp .fstep:not(:last-child)::after{content: ""; position: absolute; top: 50%; right: -14px; width: 10px; height: 10px; border-top: 2px solid var(--orange); border-right: 2px solid var(--orange); transform: translateY(-50%) rotate(45deg); z-index: 2;}
.gra-lp .fstep .fn{counter-increment: st 1; font-family: var(--en); font-weight: 700; color: var(--orange); font-size: 13px; letter-spacing: 0.24em;}
.gra-lp .fstep .fn::after{content: " 0" counter(st);}
.gra-lp .fstep .fic{width: 58px; height: 58px; margin: 16px auto 14px; border-radius: 50%; background: linear-gradient(150deg, rgb(255, 240, 227), rgb(255, 227, 204)); display: flex; align-items: center; justify-content: center;}
.gra-lp .fstep .fic svg{width: 26px; height: 26px; stroke: var(--orange); fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;}
.gra-lp .fstep h4{font-size: 15.5px; font-weight: 900; color: var(--navy); margin-bottom: 8px;}
.gra-lp .fstep p{font-size: 12.5px; color: var(--muted); line-height: 1.8;}
@media (max-width: 860px){.gra-lp .flow{grid-template-columns: 1fr 1fr;}
.gra-lp .fstep:nth-child(2)::after{display: none;}
}
@media (max-width: 520px){.gra-lp .flow{grid-template-columns: 1fr;}
.gra-lp .fstep::after{display: none !important;}
}
.gra-lp .cmp{display: grid; grid-template-columns: 1.15fr 1fr; gap: 34px; align-items: start;}
.gra-lp .cmp table{width: 100%; border-collapse: collapse; background: rgb(255, 255, 255); border: 1px solid var(--border); border-radius: 14px; overflow: hidden; box-shadow: rgba(13, 27, 51, 0.06) 0px 12px 34px;}
.gra-lp .cmp th,.gra-lp .cmp td{text-align: left; padding: 17px 22px; border-bottom: 1px solid var(--border); font-size: 14px; vertical-align: top;}
.gra-lp .cmp th{background: rgb(248, 250, 252); color: var(--navy); width: 31%; white-space: nowrap; font-weight: 700;}
.gra-lp .cmp tr:last-child th,.gra-lp .cmp tr:last-child td{border-bottom: 0px;}
.gra-lp .map{border-radius: 14px; background: linear-gradient(135deg, rgb(232, 237, 244), rgb(221, 229, 239)); height: 100%; min-height: 320px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; color: rgb(124, 138, 160); font-size: 13px; border: 1px solid var(--border);}
.gra-lp .map svg{width: 38px; height: 38px; stroke: rgb(124, 138, 160); fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;}
@media (max-width: 820px){.gra-lp .cmp{grid-template-columns: 1fr;}
.gra-lp .map{min-height: 220px;}
}
.gra-lp .final{position: relative; background: var(--navy-3); color: rgb(255, 255, 255); overflow: hidden; clip-path: polygon(0px 4.5vw, 100% 0px, 100% 100%, 0px 100%); padding: calc(96px + 4.5vw) 0px 100px; text-align: center;}
.gra-lp .final .glow{position: absolute; inset: 0px; background: radial-gradient(640px 360px at 50% 0%, rgba(230, 92, 0, 0.3), transparent 62%), repeating-linear-gradient(115deg, rgba(255, 255, 255, 0.024) 0px, rgba(255, 255, 255, 0.024) 2px, transparent 2px, transparent 90px);}
.gra-lp .final .wrap{position: relative; z-index: 2;}
.gra-lp .final .en{font-family: var(--en); letter-spacing: 0.3em; color: var(--orange-2); font-size: 14px; font-weight: 700;}
.gra-lp .final h2{font-size: clamp(26px, 3.6vw, 40px); font-weight: 900; line-height: 1.5; margin: 14px 0px 16px; color: rgb(255, 255, 255);}
.gra-lp .final p{color: rgb(196, 208, 226); max-width: 620px; margin: 0px auto 38px; font-size: 15px;}
.gra-lp .final .ctas{display: flex; gap: 18px; justify-content: center; flex-wrap: wrap;}
.gra-lp .final .ctas .btn{padding: 19px 40px; font-size: 16px; border-radius: 8px;}
.gra-lp .final .micro{margin-top: 22px; font-size: 12px; color: rgb(143, 163, 194);}
.gra-lp footer{background: rgb(11, 20, 36); color: rgb(143, 163, 194); font-size: 13px; padding: 44px 0px 30px;}
.gra-lp footer .frow{display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap; align-items: flex-start;}
.gra-lp footer .fb .t1{font-family: var(--en); font-weight: 700; font-size: 20px; color: rgb(255, 255, 255); letter-spacing: 0.06em;}
.gra-lp footer .fb p{margin-top: 8px; line-height: 1.9;}
.gra-lp footer .fnav{display: flex; gap: 22px; flex-wrap: wrap;}
.gra-lp footer .fnav a:hover{color: rgb(255, 255, 255);}
.gra-lp footer .cr{margin-top: 30px; padding-top: 18px; border-top: 1px solid rgba(255, 255, 255, 0.08); font-size: 11.5px; color: rgb(93, 110, 136); text-align: center; letter-spacing: 0.06em;}
.gra-lp .mcta{display: none;}
@media (max-width: 760px){.gra-lp .mcta{display: flex; position: fixed; bottom: 0px; left: 0px; right: 0px; z-index: 99; background: rgba(255, 255, 255, 0.97); backdrop-filter: blur(8px); border-top: 1px solid var(--border); padding: 10px 12px; gap: 10px;}
.gra-lp .mcta .btn{flex: 1 1 0%; padding: 14px 0px; font-size: 14px;}
.gra-lp .mcta .btn.tel{background: var(--navy); color: rgb(255, 255, 255);}
.gra-lp{padding-bottom: 74px;}
}

/* --- footer v2 (autostyle風) --- */
.gra-lp footer{background:#297584;color:#8FA3C2;font-size:13px;padding:56px 0 30px}
.gra-lp footer .frow{display:flex;justify-content:space-between;gap:40px;flex-wrap:wrap;align-items:flex-start}
.gra-lp footer .fcol{flex:1 1 200px;min-width:180px}
.gra-lp footer .fk{font-family:var(--en);font-size:12px;font-weight:700;letter-spacing:.22em;color:var(--orange);display:block;margin-bottom:10px}
.gra-lp footer .fk-sns{margin-top:22px}
.gra-lp footer .t1{font-family:var(--en);font-weight:700;font-size:20px;color:#fff;letter-spacing:.06em;display:block}
.gra-lp footer .t1.sm{font-size:15px;font-family:var(--jp);letter-spacing:.02em;margin-bottom:12px}
.gra-lp footer .fadr{margin:8px 0 16px;line-height:1.9}
.gra-lp footer .fbtns{display:flex;flex-direction:column;gap:9px}
.gra-lp footer .fbtn{display:flex;align-items:center;gap:8px;padding:10px 14px;border-radius:8px;font-size:13px;font-weight:700;color:#fff;transition:.2s}
.gra-lp footer .fbtn svg{width:16px;height:16px;flex:none;display:block}
.gra-lp footer .fbtn-tel{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16)}
.gra-lp footer .fbtn-tel:hover{background:rgba(255,255,255,.14)}
.gra-lp footer .fbtn-line{background:var(--line-green);color:#fff}
.gra-lp footer .fbtn-line:hover{filter:brightness(1.08)}
.gra-lp footer .fsvc li{margin-bottom:9px;line-height:1.5}
.gra-lp footer .fsvc a{display:block;transition:.2s}
.gra-lp footer .fsvc a:hover{color:#fff}
.gra-lp footer .fsvc b{display:block;font-family:var(--en);font-size:11px;letter-spacing:.12em;color:var(--orange);font-weight:700}
.gra-lp footer .fnav{display:flex;flex-direction:column;gap:10px}
.gra-lp footer .fnav a{transition:.2s}
.gra-lp footer .fnav a:hover{color:#fff}
.gra-lp footer .fsns{display:flex;gap:10px}
.gra-lp footer .fsns a{display:inline-flex;align-items:center;justify-content:center;padding:7px 16px;border:1px solid rgba(255,255,255,.2);border-radius:999px;font-family:var(--en);font-weight:700;font-size:12px;letter-spacing:.08em;transition:.2s}
.gra-lp footer .fsns-line:hover{background:var(--line-green);border-color:var(--line-green);color:#fff}
.gra-lp footer .cr{margin-top:34px;padding-top:18px;border-top:1px solid rgba(255,255,255,.08);font-size:11.5px;color:#5D6E88;text-align:center;letter-spacing:.06em}
@media(max-width:760px){.gra-lp footer .frow{gap:28px}.gra-lp footer .fcol{flex:1 1 100%}}
/* ===== TOP(v2) 移設 CSS END ===== */


/* ===== 下層ページ 共通コンポーネント (.gra-lp) 2026-07-14 ===== */
.gra-lp .lp-hero{background:var(--navy);color:#fff;padding:60px 0 52px}
.gra-lp .lp-hero .kicker{color:var(--orange-2)}
.gra-lp .lp-hero h1{font-size:clamp(25px,4vw,38px);font-weight:800;line-height:1.4;margin:10px 0 14px;color:#fff}
.gra-lp .lp-hero .lead{color:#C7D2E2;max-width:720px;margin:0}
.gra-lp .lp-sec{padding:46px 0}
.gra-lp .lp-sec h2{font-size:21px;font-weight:800;color:var(--navy);margin:0 0 14px;padding-left:12px;border-left:4px solid var(--orange)}
.gra-lp .lp-sec h2:not(:first-child){margin-top:34px}
.gra-lp .lp-sec p{margin:0 0 14px}
.gra-lp .lp-card{border:1px solid var(--border);border-radius:12px;padding:20px 22px;background:var(--paper);margin:0 0 16px}
.gra-lp .lp-card h3{font-size:17px;font-weight:700;color:var(--navy);margin:0 0 8px}
.gra-lp .lp-cta{background:var(--bg);padding:44px 0;text-align:center}
.gra-lp .lp-cta h2{color:var(--navy);font-size:23px;font-weight:800;margin:0 0 8px}
.gra-lp .lp-cta .ctas{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:18px}
/* ===== 下層ページ 共通コンポーネント END ===== */


/* ===== サイト共通ヘッダー ブランド化 (G.R.A) 2026-07-14 ===== */
.ast-primary-header-bar,.main-header-bar{background-color:#297584 !important}
.ast-primary-header-bar .menu-link,.main-header-menu .menu-link,.ast-builder-menu-1 .menu-link{color:#ffffff !important}
.ast-primary-header-bar .menu-item:hover>.menu-link,.ast-primary-header-bar .menu-link:hover,.main-header-menu .menu-item:hover>.menu-link{color:#0AC2D6 !important}
.ast-primary-header-bar .ast-custom-button-link{display:none !important}
.ast-primary-header-bar .ast-mobile-menu-trigger-minimal,.ast-primary-header-bar .menu-toggle,.ast-primary-header-bar .mobile-menu-toggle-icon{color:#ffffff !important}
.ast-primary-header-bar .custom-logo{max-height:34px;width:auto}
/* ===== サイト共通ヘッダー END ===== */


/* ===== サイト共通フッター ブランド化 (G.R.A) 2026-07-14 ===== */
.site-footer{background-color:#297584 !important}
.site-footer .widget-title,.site-footer .ast-widget-title{color:#ffffff !important;font-size:16px}
.site-footer .menu-link,.site-footer a{color:#C7D2E2 !important}
.site-footer .menu-link:hover,.site-footer a:hover{color:#0AC2D6 !important}
.site-below-footer-wrap,.ast-below-footer-wrap,.site-primary-footer-wrap{background-color:transparent !important}
.site-below-footer-wrap *{color:#8FA3C2 !important}
/* ===== サイト共通フッター END ===== */


/* ===== セカンダリアクセント 旧サイトpalette 黄#ffbb04/スカイ#51bcda 2026-07-14 ===== */
.gra-lp .badge{background:#ffbb04 !important;color:#12233d !important}
.site-footer,.gra-lp footer{border-top:5px solid #ffbb04}
.gra-lp .lp-hero .kicker{color:#51bcda}
.gra-lp .lp-card{border-top:3px solid #51bcda}
/* ===== セカンダリアクセント END ===== */

/* ===== GRA TOP v3 (#gra-top scope) START ===== */
#gra-top{
  --navy:#0a1a2f; --navy2:#0e2440; --ink:#16283d; --muted:#5b6b7c;
  --cyan:#12c2d6; --cyanD:#0a9fb1; --gold:#e5b33d; --line:#06c755;
  --bg:#ffffff; --bg2:#f4f8fb; --hair:#e6edf3;
  --shadow:0 18px 50px rgba(10,26,47,.14);
}
#gra-top *{box-sizing:border-box;margin:0;padding:0}
#gra-top{font-family:"Noto Sans JP",sans-serif;color:var(--ink);background:var(--bg);line-height:1.8;-webkit-font-smoothing:antialiased}
#gra-top img{max-width:100%;display:block}
#gra-top a{color:inherit;text-decoration:none}
#gra-top .wrap{width:min(1160px,92%);margin-inline:auto}
#gra-top .kick{font-family:"Barlow Condensed",sans-serif;letter-spacing:.14em;text-transform:uppercase;font-weight:600;font-size:.86rem;color:var(--cyanD)}
#gra-top .kick.on-dark{color:var(--gold)}
#gra-top h2.sec{font-size:clamp(1.7rem,3.6vw,2.5rem);font-weight:900;line-height:1.35;letter-spacing:.01em;margin:.5rem 0 .3rem}
#gra-top .lead{color:var(--muted);font-size:1.02rem;max-width:640px}
#gra-top .center{text-align:center}
#gra-top .center .lead{margin-inline:auto}
#gra-top .btn{display:inline-flex;align-items:center;gap:.5em;font-weight:700;border-radius:999px;padding:.95em 1.7em;transition:.25s;white-space:nowrap;font-size:1rem;cursor:pointer}
#gra-top .btn-line{background:var(--line);color:#fff;box-shadow:0 10px 24px rgba(6,199,85,.32)}
#gra-top .btn-line:hover{transform:translateY(-2px);box-shadow:0 16px 30px rgba(6,199,85,.42)}
#gra-top .btn-tel{background:rgba(255,255,255,.1);color:#fff;border:1.5px solid rgba(255,255,255,.55);backdrop-filter:blur(6px)}
#gra-top .btn-tel:hover{background:rgba(255,255,255,.2)}
#gra-top .btn-gold{background:var(--gold);color:#3a2c06;box-shadow:0 10px 24px rgba(229,179,61,.35)}
#gra-top .btn-gold:hover{transform:translateY(-2px)}
#gra-top .hero header,#gra-top header{position:sticky;top:0;z-index:50;background:rgba(10,26,47,.82);backdrop-filter:blur(12px);border-bottom:1px solid rgba(255,255,255,.08)}
#gra-top .nav{display:flex;align-items:center;justify-content:space-between;height:70px}
#gra-top .brand{display:flex;align-items:baseline;gap:.5em;color:#fff}
#gra-top .brand b{font-family:"Barlow Condensed",sans-serif;font-weight:700;font-size:1.5rem;letter-spacing:.06em}
#gra-top .brand span{font-size:.7rem;letter-spacing:.28em;color:var(--cyan);font-weight:700}
#gra-top .menu{display:flex;gap:1.6rem;align-items:center}
#gra-top .menu a{color:#dfe8f1;font-size:.92rem;font-weight:500}
#gra-top .menu a:hover{color:var(--cyan)}
#gra-top .nav-cta{display:flex;gap:.6rem;align-items:center}
#gra-top .nav-tel{color:#fff;font-family:"Barlow Condensed",sans-serif;font-weight:700;font-size:1.15rem;letter-spacing:.03em;display:flex;flex-direction:column;line-height:1;align-items:flex-end}
#gra-top .nav-tel small{font-size:.6rem;letter-spacing:.2em;color:var(--cyan);font-family:"Noto Sans JP"}
#gra-top .nav .btn{padding:.6em 1.2em;font-size:.9rem}
#gra-top .hero{position:relative;min-height:92vh;display:flex;align-items:center;color:#fff;overflow:hidden}
#gra-top .hero-bg{position:absolute;inset:0;background:#0a1a2f url('https://gra-810.com/img/cover01_bg_20250912.jpg') center/cover no-repeat;transform:scale(1.04)}
#gra-top .hero-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,rgba(6,15,28,.92) 0%,rgba(8,22,42,.78) 42%,rgba(8,22,42,.35) 100%)}
#gra-top .hero-inner{position:relative;z-index:2;padding:5rem 0}
#gra-top .hero .kick{margin-bottom:1.1rem;display:inline-flex;align-items:center;gap:.7em}
#gra-top .hero .kick::before{content:"";width:34px;height:2px;background:var(--gold)}
#gra-top .hero h1{font-size:clamp(2.2rem,5.4vw,4rem);font-weight:900;line-height:1.28;letter-spacing:.005em;text-shadow:0 4px 30px rgba(0,0,0,.35);color:#fff}
#gra-top .hero h1 .hl{color:var(--gold)}
#gra-top .hero h1 .cy{color:var(--cyan)}
#gra-top .hero p.sub{margin:1.5rem 0 2rem;font-size:1.08rem;max-width:560px;color:#dbe6f1;line-height:1.9}
#gra-top .hero-cta{display:flex;gap:.9rem;flex-wrap:wrap;align-items:center}
#gra-top .trust{margin-top:2.3rem;display:inline-flex;flex-wrap:wrap;gap:0;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);border-radius:14px;padding:.2rem .3rem;backdrop-filter:blur(6px)}
#gra-top .trust div{padding:.6rem 1.2rem;font-size:.86rem;color:#eaf2f9;display:flex;align-items:center;gap:.5em;border-right:1px solid rgba(255,255,255,.14)}
#gra-top .trust div:last-child{border-right:0}
#gra-top .trust b{color:var(--gold);font-family:"Barlow Condensed";font-size:1.05rem}
#gra-top .scrollhint{position:absolute;bottom:1.4rem;left:50%;transform:translateX(-50%);z-index:2;font-family:"Barlow Condensed";letter-spacing:.3em;font-size:.7rem;color:rgba(255,255,255,.6);text-transform:uppercase}
#gra-top .section{padding:5.5rem 0}
#gra-top .problems{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;margin-top:2.6rem}
#gra-top .pcard{position:relative;border:1px solid var(--hair);border-radius:16px;padding:1.8rem 1.4rem;background:#fff;transition:.25s;overflow:hidden}
#gra-top .pcard::before{content:"";position:absolute;left:0;top:0;height:100%;width:4px;background:var(--cyan);transform:scaleY(0);transform-origin:bottom;transition:.3s}
#gra-top .pcard:hover{transform:translateY(-6px);box-shadow:var(--shadow);border-color:transparent}
#gra-top .pcard:hover::before{transform:scaleY(1)}
#gra-top .pcard .no{font-family:"Barlow Condensed";color:var(--hair);font-size:2.4rem;font-weight:700;line-height:1;position:absolute;right:1rem;top:.8rem;transition:.25s}
#gra-top .pcard:hover .no{color:#eaf3f6}
#gra-top .pcard .ic{font-size:2rem}
#gra-top .pcard h3{font-size:1.16rem;font-weight:900;margin:.9rem 0 .3rem}
#gra-top .pcard.lead-card{background:linear-gradient(160deg,#0e2440,#0a1a2f);color:#fff;border:none}
#gra-top .pcard.lead-card .no{color:rgba(255,255,255,.12)}
#gra-top .pcard.lead-card p{color:#b9c9d8}
#gra-top .pcard p{font-size:.9rem;color:var(--muted)}
#gra-top .pcard .go{margin-top:.9rem;font-family:"Barlow Condensed";letter-spacing:.1em;font-weight:600;color:var(--cyanD);font-size:.9rem}
#gra-top .pcard.lead-card .go{color:var(--gold)}
#gra-top .badge-main{position:absolute;top:0;right:0;background:var(--gold);color:#3a2c06;font-size:.66rem;font-weight:700;padding:.25em 1em;border-bottom-left-radius:10px;letter-spacing:.05em}
#gra-top .reasons{background:var(--navy);color:#fff}
#gra-top .reasons .grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2.4rem;margin-top:3rem}
#gra-top .reason .rn{font-family:"Barlow Condensed";font-size:1rem;letter-spacing:.15em;color:var(--gold);font-weight:600}
#gra-top .reason h3{font-size:1.3rem;font-weight:900;margin:.5rem 0 .7rem;line-height:1.5}
#gra-top .reason p{color:#a9bccd;font-size:.95rem}
#gra-top .reason .divider{width:46px;height:3px;background:var(--cyan);margin-bottom:1.3rem;border-radius:2px}
#gra-top .svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem;margin-top:3rem}
#gra-top .svc{border-radius:16px;overflow:hidden;background:#fff;border:1px solid var(--hair);box-shadow:0 6px 20px rgba(10,26,47,.05);transition:.25s;display:flex;flex-direction:column}
#gra-top .svc:hover{transform:translateY(-6px);box-shadow:var(--shadow)}
#gra-top .svc .ph{aspect-ratio:16/10;background:#0e2440 center/cover no-repeat;position:relative}
#gra-top .svc .tag{position:absolute;top:.8rem;left:.8rem;background:rgba(10,26,47,.82);color:#fff;font-size:.72rem;font-weight:700;padding:.3em .9em;border-radius:999px;backdrop-filter:blur(4px)}
#gra-top .svc .tag.gold{background:var(--gold);color:#3a2c06}
#gra-top .svc .bd{padding:1.3rem 1.3rem 1.5rem;display:flex;flex-direction:column;flex:1}
#gra-top .svc .no{font-family:"Barlow Condensed";color:var(--cyanD);font-weight:700;letter-spacing:.1em;font-size:.9rem}
#gra-top .svc h3{font-size:1.22rem;font-weight:900;margin:.15rem 0 .6rem}
#gra-top .svc .spec{background:var(--bg2);border-radius:9px;padding:.7em .9em;font-size:.86rem;color:var(--ink);font-weight:500;margin-bottom:.9rem}
#gra-top .svc .price{margin-top:auto;display:flex;align-items:baseline;justify-content:space-between;border-top:1px dashed var(--hair);padding-top:.8rem}
#gra-top .svc .price .p{font-family:"Barlow Condensed";font-weight:700;font-size:1.35rem;color:var(--ink)}
#gra-top .svc .price .p small{font-family:"Noto Sans JP";font-size:.72rem;color:var(--muted);font-weight:500}
#gra-top .svc .price a{font-size:.85rem;font-weight:700;color:var(--line)}
#gra-top .starex{background:linear-gradient(120deg,#eef6fb,#f7fbfe);border-block:1px solid var(--hair)}
#gra-top .starex .in{display:grid;grid-template-columns:1.1fr .9fr;gap:2.5rem;align-items:center}
#gra-top .starex img{border-radius:14px;box-shadow:var(--shadow)}
#gra-top .starex .pill{display:inline-block;background:#fff;border:1px solid var(--hair);color:var(--cyanD);font-weight:700;font-size:.8rem;padding:.4em 1em;border-radius:999px;margin-bottom:1rem}
#gra-top .cta{background:var(--navy2) url('https://gra-810.com/img/top_service01_250910.jpg') center/cover;position:relative;color:#fff;text-align:center}
#gra-top .cta::before{content:"";position:absolute;inset:0;background:linear-gradient(rgba(8,20,38,.9),rgba(8,20,38,.82))}
#gra-top .cta .in{position:relative;z-index:2;padding:5rem 0}
#gra-top .cta h2{font-size:clamp(1.7rem,4vw,2.6rem);font-weight:900;line-height:1.4;color:#fff}
#gra-top .cta p{color:#cddbe9;margin:1rem auto 2rem;max-width:560px}
#gra-top .cta-btns{display:flex;gap:.9rem;justify-content:center;flex-wrap:wrap}
#gra-top .access .in{display:grid;grid-template-columns:1fr 1fr;gap:2.5rem;align-items:stretch}
#gra-top .info-row{display:flex;gap:1rem;padding:1.1rem 0;border-bottom:1px solid var(--hair)}
#gra-top .info-row .l{font-family:"Barlow Condensed";letter-spacing:.12em;color:var(--cyanD);font-weight:600;min-width:110px;font-size:.95rem}
#gra-top .mapph{background:#dfe8f1 url('https://gra-810.com/img/bg8.jpg') center/cover;border-radius:16px;min-height:320px;position:relative;overflow:hidden}
#gra-top .mapph span{position:absolute;left:1rem;bottom:1rem;background:#fff;padding:.5em 1em;border-radius:8px;font-size:.85rem;font-weight:700;box-shadow:var(--shadow)}
#gra-top footer{background:var(--navy);color:#c3d2e0;padding:3.5rem 0 6.5rem}
#gra-top .fcols{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:2rem;padding-bottom:2rem;border-bottom:1px solid rgba(255,255,255,.1)}
#gra-top footer h4{color:#fff;font-size:.85rem;letter-spacing:.1em;margin-bottom:1rem;font-family:"Barlow Condensed";font-weight:600}
#gra-top footer ul{list-style:none;font-size:.9rem;line-height:2.1}
#gra-top footer a:hover{color:var(--cyan)}
#gra-top .fbrand b{font-family:"Barlow Condensed";font-size:1.5rem;color:#fff;letter-spacing:.06em}
#gra-top .copy{padding-top:1.4rem;font-size:.8rem;color:#7d90a3}
#gra-top .sticky{position:fixed;bottom:0;left:0;right:0;z-index:60;display:none;grid-template-columns:1fr 1fr 1fr;background:#fff;box-shadow:0 -6px 20px rgba(0,0,0,.12)}
#gra-top .sticky a{padding:.9rem;text-align:center;font-size:.78rem;font-weight:700;display:flex;flex-direction:column;gap:.2em;align-items:center}
#gra-top .sticky a.l{background:var(--line);color:#fff}
#gra-top .sticky a.t{background:var(--navy);color:#fff}
@media(max-width:860px){
#gra-top .menu,#gra-top .nav-tel{display:none}
#gra-top .problems{grid-template-columns:1fr 1fr}
#gra-top .reasons .grid,#gra-top .svc-grid,#gra-top .starex .in,#gra-top .access .in{grid-template-columns:1fr}
#gra-top .fcols{grid-template-columns:1fr 1fr}
#gra-top .hero{min-height:auto}
#gra-top .sticky{display:grid}
#gra-top{padding-bottom:64px}
}
#gra-top .reveal{opacity:0;transform:translateY(24px);transition:.7s cubic-bezier(.2,.7,.2,1)}
#gra-top .reveal.in{opacity:1;transform:none}

/* --- full-bleed override: Astraのcontent-width(1200px)上書き --- */
#gra-top{max-width:none;width:100%}
#gra-top > header,#gra-top > section,#gra-top > footer,#gra-top > .sticky{max-width:none !important;width:100% !important;margin-left:0 !important;margin-right:0 !important}
/* ===== GRA TOP v3 END ===== */

/* --- seat-coating page components v1 --- */
#gra-top .sc-video{position:relative;max-width:880px;margin:2.6rem auto 0;aspect-ratio:16/9;border-radius:16px;overflow:hidden;box-shadow:var(--shadow);background:#0a1a2f}
#gra-top .sc-video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
#gra-top .sc-feat{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem;margin-top:3rem}
#gra-top .sc-feat .f{background:#fff;border:1px solid var(--hair);border-radius:14px;padding:1.6rem;transition:.25s}
#gra-top .sc-feat .f:hover{transform:translateY(-5px);box-shadow:var(--shadow);border-color:transparent}
#gra-top .sc-feat .fn{font-family:"Barlow Condensed";font-size:1.7rem;font-weight:700;color:var(--cyanD);line-height:1}
#gra-top .sc-feat .f h3{font-size:1.12rem;font-weight:900;margin:.4rem 0 .35rem}
#gra-top .sc-feat .f p{font-size:.9rem;color:var(--muted)}
#gra-top .sc-split{display:grid;grid-template-columns:1.05fr .95fr;gap:2.5rem;align-items:center}
#gra-top .sc-steps{margin-top:3rem;display:grid;gap:1rem;max-width:900px;margin-inline:auto}
#gra-top .sc-step{display:grid;grid-template-columns:auto 1fr;gap:1.3rem;align-items:center;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);border-radius:14px;padding:1.2rem 1.5rem}
#gra-top .sc-step .sn{font-family:"Barlow Condensed";font-weight:700;color:#fff;background:linear-gradient(160deg,var(--cyan),var(--cyanD));width:56px;height:56px;border-radius:12px;display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:1.3rem;line-height:.85}
#gra-top .sc-step .sn small{font-size:.5rem;letter-spacing:.12em;font-family:"Noto Sans JP"}
#gra-top .sc-step h3{font-size:1.1rem;font-weight:900;margin-bottom:.15rem}
#gra-top .sc-faq{max-width:840px;margin:2.6rem auto 0}
#gra-top .sc-faq details{background:#fff;border:1px solid var(--hair);border-radius:12px;margin-bottom:.8rem;overflow:hidden}
#gra-top .sc-faq summary{cursor:pointer;padding:1.1rem 1.3rem;font-weight:700;list-style:none;display:flex;gap:.8rem;align-items:flex-start}
#gra-top .sc-faq summary::-webkit-details-marker{display:none}
#gra-top .sc-faq summary::before{content:"Q";font-family:"Barlow Condensed";color:var(--cyanD);font-weight:700;font-size:1.25rem;line-height:1.3}
#gra-top .sc-faq details[open] summary{border-bottom:1px solid var(--hair)}
#gra-top .sc-faq .a{padding:1rem 1.3rem 1.2rem;color:var(--muted);font-size:.94rem}
#gra-top .sc-media{border-radius:16px;overflow:hidden;box-shadow:var(--shadow)}
#gra-top .sc-media img{width:100%;display:block}
@media(max-width:860px){#gra-top .sc-feat{grid-template-columns:1fr}#gra-top .sc-split{grid-template-columns:1fr}}
/* --- end seat-coating --- */

/* --- dark-section heading fix v1.1.3 --- */
#gra-top .reasons h3,#gra-top .reasons h2,#gra-top .cta h2,#gra-top .cta h3{color:#fff}
#gra-top .reasons .reason h3{color:#fff}


/* ===== GRA seat-coating v2 components (1.1.4) ===== */
#gra-top .sc-cmp{max-width:820px;margin:0 auto;overflow-x:auto}
#gra-top .sc-cmp table{width:100%;border-collapse:collapse;background:#fff;border-radius:14px;overflow:hidden;box-shadow:0 10px 30px rgba(10,26,47,.08);font-size:.98rem}
#gra-top .sc-cmp th,#gra-top .sc-cmp td{padding:.9em 1em;text-align:center;border-bottom:1px solid var(--hair)}
#gra-top .sc-cmp thead th{background:#0a1a2f;color:#fff;font-weight:700}
#gra-top .sc-cmp thead th.hi{background:linear-gradient(160deg,#12c2d6,#0a8fa0)}
#gra-top .sc-cmp tbody td:first-child{text-align:left;font-weight:600;background:#f6f9fc}
#gra-top .sc-cmp td.hi{color:var(--cyanD);font-weight:800;background:rgba(18,194,214,.06)}
#gra-top .sc-cmp tbody tr:last-child td{border-bottom:none}
#gra-top .sc-price{max-width:880px;margin:0 auto;overflow-x:auto}
#gra-top .sc-price table{width:100%;border-collapse:collapse;background:#fff;border-radius:14px;overflow:hidden;box-shadow:0 10px 30px rgba(10,26,47,.08);font-size:.95rem}
#gra-top .sc-price th,#gra-top .sc-price td{padding:.85em 1em;text-align:center;border-bottom:1px solid var(--hair);vertical-align:middle}
#gra-top .sc-price thead th{background:#0a1a2f;color:#fff;font-weight:700;font-size:.88rem}
#gra-top .sc-price tbody td:first-child{text-align:left;font-weight:700;background:#f6f9fc}
#gra-top .sc-price td small{color:var(--muted);font-weight:400;font-size:.82em}
#gra-top .sc-price tbody tr:last-child td{border-bottom:none}
#gra-top .price-h{font-size:1.15rem;font-weight:800;color:#0a1a2f;max-width:880px;margin:0 auto .8rem;padding-left:.6em;border-left:4px solid var(--gold)}
#gra-top .sc-guard{display:grid;grid-template-columns:repeat(2,1fr);gap:1.4rem;max-width:820px;margin:0 auto}
#gra-top .sc-guard figure{margin:0;border-radius:16px;overflow:hidden;box-shadow:0 12px 30px rgba(10,26,47,.12);background:#fff}
#gra-top .sc-guard img{width:100%;display:block;aspect-ratio:3/4;object-fit:cover}
#gra-top .sc-guard figcaption{padding:.8em;text-align:center;font-weight:700;color:#0a1a2f;font-size:.95rem}
#gra-top .sc-int{display:grid;grid-template-columns:repeat(4,1fr);gap:1.2rem}
#gra-top .sc-int figure{margin:0;border-radius:14px;overflow:hidden;box-shadow:0 10px 24px rgba(10,26,47,.1);background:#fff}
#gra-top .sc-int img{width:100%;display:block;aspect-ratio:3/2;object-fit:cover}
#gra-top .sc-int figcaption{padding:.7em;text-align:center;font-weight:700;color:#0a1a2f;font-size:.92rem}
#gra-top .sc-gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
#gra-top .sc-gallery figure{margin:0;border-radius:14px;overflow:hidden;box-shadow:0 10px 24px rgba(10,26,47,.1)}
#gra-top .sc-gallery img{width:100%;display:block;aspect-ratio:3/2;object-fit:cover;transition:transform .5s}
#gra-top .sc-gallery figure:hover img{transform:scale(1.06)}
@media(max-width:760px){
  #gra-top .sc-int{grid-template-columns:repeat(2,1fr)}
  #gra-top .sc-gallery{grid-template-columns:repeat(2,1fr)}
  #gra-top .sc-cmp table,#gra-top .sc-price table{font-size:.84rem}
  #gra-top .sc-cmp th,#gra-top .sc-cmp td,#gra-top .sc-price th,#gra-top .sc-price td{padding:.6em .5em}
}
/* ===== end seat-coating v2 ===== */