/* RESET */
:root{--gutter:clamp(16px,5.8vw,48px)}
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:'Noto Sans JP',sans-serif;color:#fff;background:#000c2a;line-height:1.8;overflow-x:hidden;letter-spacing:.15em}
a{text-decoration:none;color:inherit}
img{max-width:100%;height:auto;display:block}

/* Italic helper */
.italic{display:inline-block;font-style:italic;transform:skewX(-6deg)}
.strength .italic{transform:skewX(-6deg) rotate(-6deg)}

/* HEADER */
.header{position:absolute;top:0;left:0;width:100%;z-index:100}
.header-inner{max-width:1366px;margin:0 auto;padding:11px 36px 0 40px;display:flex;justify-content:space-between;align-items:flex-start}
.header-logo{height:45px;width:auto;margin-top:4px}
.header-right{display:flex;gap:19px}
.header-tel{border:2px solid #fff;width:188px;height:49px;display:flex;align-items:center;justify-content:center;font-size:15px;font-weight:700;letter-spacing:.08em}
.header-tel:hover{background:rgba(255,255,255,.1)}
.header-cta{background:#aa8532;width:188px;height:49px;display:flex;align-items:center;justify-content:center;font-size:15px;font-weight:700}
.header-cta:hover{opacity:.85}

/* HERO */
.hero{position:relative;background:#000c2a;height:550px}
.hero-bg{position:absolute;right:0;top:76px;bottom:0;width:50%;z-index:1;background:#000e29;
  --hero-h:474px;
  --slant:calc(var(--hero-h) * 0.133);
  --gap:10px;
  --inset-l:max(4%,calc(var(--slant) / 2 + 4px));
  --inset-r:max(4%,calc(var(--slant) / 2 + 4px));
  --col:calc((100% - var(--inset-l) - var(--inset-r)) / 3);
  --b0:var(--inset-l);
  --b1:calc(var(--inset-l) + var(--col));
  --b2:calc(var(--inset-l) + var(--col) * 2);
  --b3:calc(100% - var(--inset-r));
}
.panel{position:absolute;inset:0}
.panel img{position:absolute;top:0;height:100%;object-fit:cover}
.panel:nth-child(2) img{object-position:40% center}
.panel:nth-child(1){clip-path:polygon(calc(var(--b0) + var(--slant)/2) 0,calc(var(--b1) + var(--slant)/2) 0,calc(var(--b1) - var(--slant)/2) 100%,calc(var(--b0) - var(--slant)/2) 100%)}
.panel:nth-child(1) img{left:calc(var(--b0) - var(--slant)/2);width:calc(var(--col) + var(--slant))}
.panel:nth-child(2){clip-path:polygon(calc(var(--b1) + var(--slant)/2 + var(--gap)) 0,calc(var(--b2) + var(--slant)/2) 0,calc(var(--b2) - var(--slant)/2) 100%,calc(var(--b1) - var(--slant)/2 + var(--gap)) 100%)}
.panel:nth-child(2) img{left:calc(var(--b1) - var(--slant)/2);width:calc(var(--col) + var(--slant))}
.panel:nth-child(3){clip-path:polygon(calc(var(--b2) + var(--slant)/2 + var(--gap)) 0,calc(var(--b3) + var(--slant)/2) 0,calc(var(--b3) - var(--slant)/2) 100%,calc(var(--b2) - var(--slant)/2 + var(--gap)) 100%)}
.panel:nth-child(3) img{left:calc(var(--b2) - var(--slant)/2);width:calc(var(--col) + var(--slant))}
.hero-body{position:relative;z-index:2;max-width:1366px;margin:0 auto;padding:102px 40px 0;width:100%}
.hero-sub{font-family:'Noto Sans JP',sans-serif;font-size:15px;font-weight:700;color:#ffffff;margin-bottom:clamp(14px,2.1vw,29px)}
.hero-title{font-family:'Noto Sans JP',sans-serif;font-size:clamp(32px,4.6vw,115px);font-weight:900;line-height:1.25;margin-bottom:clamp(20px,3.1vw,42px);letter-spacing:.03em;font-style:italic;position:relative}
.hero-title::after{content:'';position:absolute;bottom:8px;left:100px;width:200px;height:38px;background:url('images/brush_stroke.png') no-repeat center/100% 100%;z-index:-1}
.hero-desc{font-family:'Noto Sans JP',sans-serif;font-size:14px;color:#ffffff;margin-bottom:0;line-height:1.8}
.hero-cta{background:#ffffff;border:1px solid rgba(255,255,255,.1);padding:18px 32px;display:inline-block;margin-top:clamp(20px,3.1vw,42px);width:502px;box-sizing:border-box}
.hero-cta-sub{font-family:'Noto Sans JP',sans-serif;font-size:12px;color:#181c21;margin-bottom:10px;font-weight:700;text-align:center}
.btn-gold{display:block;background:#aa8532;color:#fff;padding:14px 0;font-size:20px;font-weight:700;font-family:'Noto Sans JP',sans-serif;transition:opacity .3s;width:100%;text-align:center;box-sizing:border-box}
.btn-gold:hover{opacity:.85}

/* STATS */
.stats{max-width:1366px;margin:max(40px,4.9vw) auto 0;position:relative;z-index:3;display:flex;gap:clamp(8px,2vw,73px);justify-content:center;padding:25px clamp(16px,4vw,101px) 0}
.stat{background:#0c1e4a;border:2px solid #fff;border-radius:14px;padding:32px 20px 10px;flex:1 1 0;max-width:340px;min-width:0;container-type:inline-size;position:relative}
.stat-label{position:absolute;top:8px;left:50%;transform:translateX(-50%);font-family:'Noto Sans JP',sans-serif;font-size:max(10px,7cqw);color:#fff;padding:4px 20px;font-weight:700;letter-spacing:.05em;white-space:nowrap;background:url('images/brush_label1.png') no-repeat center/contain}
.stat:nth-child(2) .stat-label{background-image:url('images/brush_label2.png')}
.stat:nth-child(3) .stat-label{background-image:url('images/brush_label3.png')}
.stat-inner{display:flex;align-items:center;gap:14px}
.stat-icon{width:max(28px,16cqw);height:auto;object-fit:contain;flex-shrink:0}
.stat-num{font-family:'Barlow Condensed',sans-serif;font-size:max(32px,30cqw);font-weight:700;letter-spacing:.05em;line-height:1;font-style:italic}
.stat-num small{font-family:'Barlow Condensed',sans-serif;font-size:.5em;font-weight:700;font-style:italic}

/* Divider */
.divider{width:100%;height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.25),transparent);margin:10px 0}

/* SHARED TITLES */
.title-serif-gold{text-align:center;font-family:'Noto Sans JP',sans-serif;font-size:clamp(28px,5vw,44px);font-weight:900;color:#fff;padding:0;margin:30px 0 20px;background:rgba(255,255,255,.08);line-height:1.4}
.title-serif-white{text-align:center;font-family:'Noto Sans JP',sans-serif;font-size:clamp(28px,5vw,44px);font-weight:900;color:#fff;margin-bottom:28px}
.title-serif-gold-italic{text-align:center;font-family:'Noto Sans JP',sans-serif;font-size:clamp(28px,5vw,44px);font-weight:900;font-style:italic;color:#aa8532;padding:35px 0 12px}
.hl{color:#fff;display:inline-block;padding:2px 6px;position:relative;z-index:1}
.hl::before{content:'';position:absolute;top:50%;left:0;width:130%;height:45%;transform:translateY(-50%) rotate(-3deg);background:url('images/brush_hl.png') no-repeat center/100% 100%;z-index:-1}
.sec-intro{max-width:1000px;margin:0 auto 20px;text-align:center;font-family:'Noto Sans JP',sans-serif;font-size:14px;color:#ccc;line-height:2.2;padding:0 var(--gutter)}

/* お悩み */
.worry{padding:0 0 16px;margin-top:clamp(48px,6vw,110px)}
.worry-cards{max-width:1100px;margin:0 auto;display:flex;justify-content:center;gap:50px;padding:0 40px}
.worry-card{flex:1;max-width:340px;position:relative}
.worry-img{position:relative;overflow:hidden;line-height:0;border:2px solid #fff;aspect-ratio:290/188;container-type:inline-size}
.worry-img img{width:100%;height:100%;object-fit:cover;display:block}
.worry-card:first-child .worry-img img{object-position:center 30%}
.worry-img::after{content:'';position:absolute;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.35)}
.worry-text{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) rotate(-14deg);width:90%;text-align:center;font-family:'Noto Sans JP',sans-serif;font-size:max(15px,7.6cqw);font-weight:900;color:#fff;line-height:1.35;text-shadow:0 2px 6px rgba(0,0,0,.5);margin:0;z-index:1;letter-spacing:.1em}
.chk{position:absolute;top:-18px;left:50%;transform:translateX(-50%);width:50px;height:auto;z-index:2}
.worry-card{margin-top:10px}
.worry-quote{max-width:900px;margin:50px auto 0;text-align:center;font-family:'Noto Sans JP',sans-serif;font-size:15px;color:#ffffff;font-weight:700;line-height:2.2}

/* 強み */
.strength{padding:40px 0 20px}
.strength h2{font-size:clamp(28px,5vw,44px)}
.str-item:first-of-type{margin-top:max(70px,9vw)}
.strength-pre{text-align:center;font-family:'Noto Sans JP',sans-serif;font-size:16px;font-weight:900;color:#fff;margin-bottom:4px;letter-spacing:.15em}
.str-item{max-width:1060px;margin:0 auto -20px;padding:0 clamp(16px,5.8vw,48px);display:flex;align-items:center;gap:36px}
.str-item.reverse{flex-direction:row-reverse}
.str-item:nth-child(even) .str-text{text-align:right;margin-left:auto;margin-right:0}
.str-photo{flex-shrink:0;position:relative;margin:20px 0;margin-right:4%;display:block;width:12.88vw;max-width:176px;min-width:104px;transform:rotate(10.5deg)}
.str-photo::before{content:"";position:absolute;top:-5.4%;right:-13.6%;bottom:auto;left:auto;width:100%;height:100%;background:#B0823B;z-index:0}
.str-photo img{position:relative;z-index:1;display:block;width:100%;aspect-ratio:176/205;object-fit:cover}
.str-photo::after{content:attr(data-num);position:absolute;z-index:2;left:50%;top:38%;transform:translate(-50%,-50%);color:#fff;font-size:clamp(36px,5.2vw,65px);font-style:italic;font-weight:700;line-height:1}
.str-item+.str-item{margin-top:clamp(40px,6vw,96px)}
.str-text{flex:1}
.str-text h3,.str-item h3,.str-item h2{font-family:'Noto Sans JP',sans-serif;font-size:clamp(17px,2.2vw,31px);font-weight:900;font-style:italic;margin-bottom:14px;line-height:1.4}
.str-text p{font-family:'Noto Sans JP',sans-serif;font-size:15px;color:#ddd;line-height:2}

/* 導入事例 */
.cases{padding:0 0 10px}
.case{max-width:1100px;margin:0 auto 24px;padding:0 var(--gutter);display:flex;align-items:center;gap:20px}
.case-img{width:220px;height:180px;object-fit:cover;border:2px solid rgba(255,255,255,.12);flex-shrink:0}
.case-info{flex:1}
.case-info h3{font-family:'Noto Sans JP',sans-serif;font-size:26px;font-weight:900;font-style:italic;color:#fff;margin-bottom:6px}
.case-info p{font-family:'Noto Sans JP',sans-serif;font-size:14px;color:#ccc;line-height:1.8}
.case-info p br{display:none}
.case-nums{display:flex;flex-shrink:0}
.cn{border:none;padding:14px 16px;text-align:center;min-width:145px;background:rgba(255,255,255,.09);position:relative}
.cn+.cn::before{content:'';position:absolute;left:0;top:10%;height:80%;width:1px;background:rgba(255,255,255,.3)}
.cn-label{display:block;font-family:'Noto Sans JP',sans-serif;font-size:12px;color:#fff;padding:4px 8px;margin-bottom:6px;font-weight:700;background:url('images/brush_stroke.png') no-repeat center/contain;white-space:nowrap}
.cn-val{font-family:'Barlow Condensed',sans-serif;font-size:68px;font-weight:700;font-style:italic;line-height:1.1;letter-spacing:.05em;white-space:nowrap}
.cn-val small{font-family:'Noto Sans JP',sans-serif;font-size:17px;font-weight:500;font-style:normal;margin-left:6px;white-space:nowrap}
.sec-intro+.case,.cases>.case:first-of-type{margin-top:clamp(48px,6vw,110px)}
.case+.case{margin-top:clamp(48px,6vw,110px)}

/* CTA BOX */
.cta-box{max-width:700px;margin:clamp(64px,8vw,140px) auto 30px;text-align:center;background:#fff;border:1px solid rgba(255,255,255,.15);padding:30px 40px}
.cta-box p{font-family:'Noto Sans JP',sans-serif;font-size:16px;color:#181c21;margin-bottom:14px;font-weight:700}
.cta-box .btn-gold{padding:18px 80px;font-size:24px;display:block;margin:0 auto}

/* 選ばれる理由 */
.reasons{padding:0 0 16px}
.reason-cards{max-width:1100px;margin:0 auto;padding:0 40px;display:flex;gap:28px}
.reason-card{flex:1;text-align:center;border:2px solid rgba(255,255,255,.25);padding:20px 0;background:rgba(12,30,74,.5)}
.reason-card img{width:calc(100% - 28px);height:auto;margin:0 14px 16px;display:block}
.reason-card h3{font-family:'Noto Sans JP',sans-serif;font-size:24px;font-weight:900;margin-bottom:10px;line-height:1.5;padding:0 14px}
.reason-card p{font-family:'Noto Sans JP',sans-serif;font-size:14px;color:#ccc;line-height:1.9;text-align:left;padding:0 14px}

/* サービス内容 */
.service{padding:0 0 16px}
.svc-flow{max-width:1100px;margin:24px auto 0;padding:0 20px;display:flex;align-items:flex-start;justify-content:center;gap:6px}
.svc{text-align:center;flex:1;max-width:155px}
.svc-icon{height:100px;display:flex;align-items:center;justify-content:center;margin-bottom:8px}
.svc-icon svg{width:80px;height:80px}
.svc h4{font-family:'Noto Sans JP',sans-serif;font-size:16px;font-weight:900;color:#fff;display:inline-block;line-height:1;margin-bottom:8px;padding:6px 8px;white-space:nowrap;background:url('images/brush_stroke.png') no-repeat center center/100% 100%}
.svc p{font-size:12px;color:#bbb;line-height:1.7}
.arr{color:#aa8532;font-size:24px;margin-top:34px;font-weight:700}

/* 導入の流れ */
.flow{padding:0 0 10px}
.flow-items{max-width:1100px;margin:24px auto 0;padding:0 40px;display:flex;align-items:flex-start;justify-content:center;gap:12px}
.flow-item{text-align:left;flex:1;max-width:230px}
.flow-img-wrap{position:relative;overflow:hidden;margin-bottom:12px}
.flow-img-wrap img{width:100%;height:auto;border-radius:0;display:block}
.flow-label{position:absolute;bottom:0;left:0;background:rgba(0,0,0,.5);color:#fff;font-family:'Noto Sans JP',sans-serif;font-size:16px;font-weight:900;padding:6px 14px}
.flow-item p{font-family:'Noto Sans JP',sans-serif;font-size:13px;color:#bbb;line-height:1.7}

/* FAQ */
.faq{padding:0 0 16px}
.faq-list{max-width:1060px;margin:24px auto 0;padding:0 40px}
.faq-item{margin-bottom:30px}
.faq-item h3{font-family:'Noto Sans JP',sans-serif;font-size:22px;font-weight:700;color:#aa8532;margin-bottom:8px}
.q{font-family:'Shippori Mincho B1',serif;font-size:28px;font-weight:800;margin-right:8px;color:#aa8532}
.a{font-family:'Shippori Mincho B1',serif;font-size:28px;font-weight:800;margin-right:8px;color:#aa8532}
.faq-item p{font-size:16px;color:#eee;line-height:2;padding-left:40px}

/* FOOTER */
.footer{background:#aa8532;color:#000c2a;text-align:center;padding:16px;font-size:13px;font-weight:700}

/* RESPONSIVE 1024 */
@media(max-width:1024px){
  .str-item{flex-direction:column;align-items:center;margin-bottom:0;padding-left:clamp(16px,5.8vw,48px);padding-right:clamp(16px,5.8vw,48px)}
  .str-item:nth-child(even) .str-photo{order:-1}
  .str-item:nth-child(even) .str-text{text-align:left;margin-left:0;margin-right:0}
  .str-text{max-width:640px}
  .str-photo{width:40vw;max-width:280px;margin-right:0;margin-bottom:24px}
}

/* RESPONSIVE 1101+: 導入事例 横3カラム */
@media(min-width:1101px){
  .case-img{flex:0 0 192px}
  .case-info{flex:1 1 320px;min-width:0}
  .case-nums{flex:0 0 auto}
}

/* RESPONSIVE 961-1100: 導入事例 2段構成 */
@media(min-width:961px) and (max-width:1100px){
  .case{flex-direction:row;flex-wrap:wrap;align-items:flex-start}
  .case-img{order:1;flex:0 0 260px;width:auto;max-width:260px;aspect-ratio:1/1;margin:0}
  .case-info{order:2;flex:1 1 300px;min-width:0;width:auto;max-width:none}
  .case-nums{order:3;flex:1 1 100%;width:100%;max-width:none;margin-top:24px}
}

/* RESPONSIVE 960: 導入事例の縦積み */
@media(max-width:960px){
  .case{flex-direction:column;align-items:center;margin-top:64px}
  .case-info{order:1;text-align:left;width:100%;max-width:640px}
  .case-nums{order:2;width:100%;max-width:640px;flex-wrap:wrap;justify-content:center}
  .case-img{order:3;flex:0 0 auto;width:100%;max-width:640px;margin:24px auto 0;aspect-ratio:16/9;height:auto;object-fit:cover}
}

/* RESPONSIVE 768 */
@media(max-width:768px){
  /* 全体 letter-spacing 調整 */
  body{letter-spacing:.03em}

  /* ヘッダー */
  .header-tel{display:none}
  .header-cta{width:auto;padding:0 12px;font-size:13px;height:40px}
  .header-logo{height:35px}
  .header-inner{padding:10px 16px 0}

  /* ヒーロー: panelのclip-pathを解除しgrid3列 */
  .hero{height:auto}
  .hero-bg{position:static;width:100%;height:auto;display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding:60px 16px 0;background:transparent}
  .hero-bg .panel{position:static;clip-path:none!important;aspect-ratio:3/5;overflow:hidden;border-radius:4px}
  .hero-bg .panel img{position:static;width:100%;height:100%;object-fit:cover;left:auto!important}
  .hero-body{padding:20px 16px 20px}
  .hero-title::after{display:none}
  .hero-sub{font-size:13px}
  .hero-desc{font-size:13px}
  .hero-cta{width:100%;max-width:100%;padding:14px 16px}
  .hero-cta-sub{font-size:11px}
  .btn-gold{font-size:15px;letter-spacing:0}

  /* STATS */
  .stats{flex-direction:column;align-items:center;gap:16px}
  .stats .stat{flex:0 0 auto;width:100%;max-width:380px;padding:36px 16px 16px}
  .stat-inner{justify-content:center}
  .stats .stat .stat-num{font-size:max(36px,13cqw)}
  .stats .stat .stat-icon{width:max(32px,11cqw)}
  .stats .stat .stat-label{font-size:max(12px,3.6cqw)}

  /* 見出し共通 */
  .title-serif-gold,.title-serif-white,.title-serif-gold-italic{padding-left:16px;padding-right:16px}
  .sec-intro{font-size:13px;padding:0 16px;line-height:2}
  .sec-intro br,.hero-desc br,.worry-quote br{display:none}

  /* お悩み */
  .worry-cards{flex-direction:column;align-items:center;gap:24px;padding:0 16px}
  .worry-card{flex:0 0 auto;width:100%;max-width:420px}
  .worry-img{width:100%;aspect-ratio:290/188}
  .worry-text{letter-spacing:.05em;font-size:max(15px,6.5cqw)}
  .worry-quote{padding:0 16px;font-size:13px}

  /* 強み */
  .str-item,.str-item.reverse{flex-direction:column!important;padding:0 16px;margin-bottom:10px}
  .str-photo{order:-1;margin:0 auto!important;width:50%;max-width:186px}
  .str-photo img{width:100%!important;max-width:none}
  .str-text p{font-size:13px}

  /* 導入事例: cqw連動フォントサイズ */
  .case-nums{container-type:inline-size}
  .case-info{container-type:inline-size}
  .case-info h3,.case-info h2{font-size:max(20px,5.5cqw)}
  .case-info p{font-size:13px}
  .cn{min-width:0;flex:1 1 30%;padding:10px 8px}
  .cn-val{font-size:max(24px,9cqw)}
  .cn-val small{font-size:.45em}
  .cn-label{font-size:max(11px,3.2cqw)}

  /* CTA BOX */
  .cta-box{padding:20px 16px;margin:20px 16px}
  .cta-box .btn-gold{padding:16px 20px;font-size:18px}

  /* 選ばれる理由 */
  .reason-cards{flex-direction:column;align-items:center;padding:0 16px}
  .reason-card{max-width:100%}
  .reason-card h3{font-size:20px}
  .reason-card p{font-size:13px}

  /* サービス内容: white-space解除、2列表示 */
  .svc-flow{flex-wrap:wrap;gap:14px;padding:0 16px}
  .arr{display:none}
  .svc{max-width:none;flex:0 0 calc(50% - 14px)}
  .svc h4{white-space:normal;font-size:14px;line-height:1.4;padding:4px 6px}
  .svc-icon{height:70px}
  .svc-icon svg{width:56px;height:56px}
  .svc p{font-size:11px}

  /* 導入の流れ: 2列折り返し */
  .flow-items{flex-wrap:wrap;gap:16px;padding:0 16px}
  .flow-item{max-width:none;flex:0 0 calc(50% - 10px)}
  .flow-img-wrap{margin-bottom:8px}
  .flow-label{font-size:13px;padding:4px 10px}
  .flow-item p{font-size:12px}

  /* FAQ */
  .faq-list{padding:0 16px}
  .faq-item h3{font-size:16px}
  .faq-item p{font-size:14px;padding-left:28px}
  .q,.a{font-size:22px}

  /* btn-gold 全体 */
  .btn-gold{font-size:16px;padding:12px 0}
}