/* ===========================================================
   ALLUS LLC  LP  ―  参照画像 reference_lp_v01.png の再現
   コンテンツ幅 977px / 明朝(Noto Serif JP)＋セリフ(Cormorant)
   =========================================================== */

:root{
  --navy:        #0b2545;
  --navy-deep:   #07203c;
  --navy-box:    #112c4e;
  --ink:         #16283e;   /* 本文の濃紺文字 */
  --gold:        #c0974a;
  --gold-light:  #ddbd6e;
  --gold-deep:   #a17a2c;
  --paper:       #eef4f8;
  --line:        #d7e0e8;
}

*{ margin:0; padding:0; box-sizing:border-box; }

html{ -webkit-text-size-adjust:100%; }
body{
  font-family:"Noto Serif JP", serif;
  color:var(--ink);
  background:#dfeaf1;
  line-height:1.6;
}

.gold-text{
  background:linear-gradient(180deg,#e3c87e 0%,#c79a4c 48%,#9c7327 100%);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
}

.lp{
  width:977px;
  margin:0 auto;
  background:#fff;
  overflow:hidden;
}

/* ====================== HERO ====================== */
.hero{
  position:relative;
  height:400px;
  background:linear-gradient(118deg,#f6f9fb 0%,#eef5fa 46%,#e6f0f8 100%);
  overflow:hidden;
}
.hero__visual{
  position:absolute; top:0; right:0;
  height:400px; width:auto; display:block;
}
.hero__inner{
  position:relative; z-index:2;
  padding:26px 0 0 42px;
}
.hero__brand{
  font-family:"Cormorant Garamond",serif;
  font-size:19px; font-weight:600; letter-spacing:.18em;
  color:#2b3f57;
}
.hero__title{
  font-family:"Cormorant Garamond",serif;
  font-weight:600; font-size:64px; line-height:1.05;
  color:#16283e; margin:18px 0 13px -2px; letter-spacing:.01em;
}
.hero__title .gold-text{ font-weight:700; }
.hero__lead1,.hero__lead2{
  font-weight:600; font-size:33px; letter-spacing:.02em; color:#1d3149;
}
.hero__lead1{ margin-top:6px; }
.hero__lead2{ margin-top:4px; }
.hero__rule{
  display:block; width:70px; height:2px; margin:18px 0 14px;
  background:linear-gradient(90deg,var(--gold),var(--gold-light));
}
.hero__sub{
  font-size:15px; font-weight:500; letter-spacing:.04em; color:#3a4d63;
}

/* ====================== QUOTES ====================== */
.quotes{
  display:flex;
  background:#f3f4f6;
  padding:16px 0 16px 42px;
}
.quotes__left{
  display:flex; gap:26px;
  width:566px; flex:0 0 566px;
  padding-top:4px;
}
.quotes__col{ width:270px; }
.quotes__head{
  font-size:14px; font-weight:600; color:#2c3d54; letter-spacing:.02em;
  margin-bottom:10px;
}
.qcard{
  position:relative;
  background:#fff;
  border-radius:3px;
  box-shadow:0 5px 14px rgba(20,40,70,.10);
  height:54px;
  margin-bottom:13px;
  display:flex; align-items:center; justify-content:center;
  padding:0 26px;
}
.qcard p{
  font-size:14px; font-weight:600; color:#22364d; letter-spacing:0; white-space:nowrap;
}
.qmark{
  position:absolute;
  font-family:"Cormorant Garamond",serif;
  font-size:30px; line-height:1; color:var(--gold);
}
.qmark--o{ top:6px; left:9px; }
.qmark--c{ bottom:-4px; right:10px; }

.navybox{
  position:relative;
  flex:1 1 auto;
  margin-left:34px;
  background:var(--navy-box);
  background:linear-gradient(160deg,#123052 0%,#0c2444 60%,#091f3d 100%);
  color:#eaf0f6;
  padding:28px 30px;
  display:flex; flex-direction:column; justify-content:center;
}
.navybox__lead{ font-size:21px; font-weight:600; margin-bottom:12px; }
.navybox__body{ font-size:17px; font-weight:500; line-height:1.85; color:#e7eef5; }
.navybox__accent{ font-size:21px; font-weight:600; margin-top:8px; }
.navybox__tick{
  position:absolute; left:50%; bottom:14px; transform:translateX(-50%);
  width:18px; height:2px; background:var(--gold);
}
.navybox__tick::after{
  content:""; position:absolute; left:50%; top:-5px; transform:translateX(-50%);
  border-left:5px solid transparent; border-right:5px solid transparent;
  border-bottom:6px solid var(--gold);
}

/* ====================== APPROACH HEADING ====================== */
.approach-hd{
  text-align:center;
  background:linear-gradient(180deg,#eef4f9,#e8f1f8);
  padding:22px 0 16px;
}
.centerrule{
  display:inline-block; width:42px; height:2px;
  background:linear-gradient(90deg,var(--gold-light),var(--gold-deep));
  margin-bottom:9px;
}
.approach-hd__title{
  font-size:32px; font-weight:600; letter-spacing:.06em; color:#16283e; line-height:1.15;
}
.approach-hd__sub{
  font-size:16px; font-weight:600; letter-spacing:.04em; margin-top:6px; line-height:1.2;
}
.approach-hd__sub{ color:transparent; }
.approach-hd__sub{
  background:linear-gradient(180deg,#cBA059,#a87c30);
  -webkit-background-clip:text; background-clip:text;
}

/* ====================== ICON CARDS ====================== */
.iconcards{
  display:flex; gap:20px;
  background:linear-gradient(180deg,#e8f1f8,#e1ecf5);
  padding:6px 40px 22px;
}
.iconcard{
  flex:1;
  display:flex; align-items:center; justify-content:center; gap:20px;
  height:92px;
  background:linear-gradient(135deg,#ffffff 0%,#f3f8fc 60%,#e8f1f9 100%);
  border:1px solid #eef3f7;
  border-radius:3px;
  box-shadow:0 9px 22px rgba(20,45,80,.16);
}
.iconcard__ic{ display:flex; align-items:center; }
.iconcard__ic img{ display:block; height:55px; width:auto; }
.iconcard__div{ width:1px; height:44px; background:linear-gradient(180deg,transparent,var(--gold),transparent); }
.iconcard__label{ font-size:27px; font-weight:600; letter-spacing:.28em; color:#1b2f47; padding-left:.1em; }
.iconcard__label--en{ letter-spacing:.04em; padding-left:0; }

/* ====================== NUMBERED CARDS ====================== */
.numcards{
  display:flex; gap:20px;
  background:linear-gradient(180deg,#e1ecf5,#dbe8f3);
  padding:6px 40px 16px;
}
.numcard{
  flex:1;
  background:linear-gradient(165deg,#1b3a5e 0%,#102c4e 55%,#0c2645 100%);
  border-radius:4px;
  box-shadow:0 8px 20px rgba(12,30,60,.22);
  padding:15px 16px 16px;
  color:#dce6f1;
}
.numcard__head{ display:flex; align-items:baseline; gap:12px; }
.numcard__no{
  font-family:"Cormorant Garamond",serif; font-weight:700; font-size:40px; line-height:1;
  background:linear-gradient(180deg,#e6cd85,#bd9444);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}
.numcard__label{ font-size:23px; font-weight:600; color:#f1f5f9; letter-spacing:.04em; }
.numcard__sub{
  font-size:13px; font-weight:500; margin-top:4px; letter-spacing:.02em;
  color:transparent;
  background:linear-gradient(180deg,#d7b566,#b08a3e);
  -webkit-background-clip:text; background-clip:text;
}
.numcard__div{ display:block; height:1px; margin:9px 0 9px;
  background:linear-gradient(90deg,rgba(192,151,74,.7),rgba(192,151,74,.12)); }
.checklist{ list-style:none; }
.checklist li{
  position:relative; padding-left:24px; margin-bottom:7px;
  font-size:13px; font-weight:400; line-height:1.4; color:#d2dde9; letter-spacing:.01em;
}
.checklist li::before{
  content:""; position:absolute; left:0; top:3px;
  width:15px; height:15px; border-radius:50%;
  background:linear-gradient(180deg,#d2ab5d,#b1873b);
  box-shadow:inset 0 0 0 .5px rgba(255,255,255,.25);
}
.checklist li::after{
  content:""; position:absolute; left:5px; top:5.5px;
  width:3.6px; height:7px;
  border:solid #fbf4e2; border-width:0 1.6px 1.6px 0;
  transform:rotate(42deg);
}
/* 悩み3つのブロックは固定高さ(最も項目が長い2 DXに揃える)→これらの〜の開始位置を3カードで統一 */
.checklist{ min-height:128px; }
/* 4項目目以降(これらの〜)=チェックなし・1つの連続文章(改行で区切らない)・チェック文字と同じインデント */
.msg{
  padding-left:24px; margin-top:9px;
  font-size:13px; font-weight:400; line-height:1.62; color:#d2dde9; letter-spacing:.01em;
}

/* ====================== NAVY BAND ====================== */
.band{
  position:relative;
  background:url("band-clean.jpg") no-repeat center center;
  background-size:cover;
  overflow:hidden;
  padding:13px 0 15px;
}
.band::before{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:radial-gradient(62% 86% at 50% 56%, rgba(7,24,48,.58) 0%, rgba(7,24,48,.30) 42%, rgba(7,24,48,0) 74%);
}
.band__inner{ position:relative; z-index:2; text-align:center; }
.band__hd{
  font-size:15px; font-weight:600; letter-spacing:.14em; margin-bottom:9px;
  color:transparent; background:linear-gradient(180deg,#e3c87e,#bd9344);
  -webkit-background-clip:text; background-clip:text;
  display:flex; align-items:center; justify-content:center; gap:14px;
}
.band__hd-rule{ width:46px; height:1px; background:linear-gradient(90deg,transparent,var(--gold)); }
.band__hd-rule:last-child{ background:linear-gradient(90deg,var(--gold),transparent); }
.band__tags{ display:flex; align-items:center; justify-content:center; gap:14px; margin-bottom:10px; }
.band__tag{
  display:inline-block; min-width:74px; padding:5px 14px;
  border:1px solid rgba(206,168,92,.7);
  font-size:17px; font-weight:600; letter-spacing:.06em;
  color:transparent; background:linear-gradient(180deg,#ecd58f,#c89a4e);
  -webkit-background-clip:text; background-clip:text;
}
.band__x{ font-size:16px; color:#c9a24a; }
.band__msg{
  font-size:30px; font-weight:600; line-height:1.42; letter-spacing:.03em;
  color:transparent; background:linear-gradient(180deg,#f0dba0 0%,#d8b86c 50%,#c39a4c 100%);
  -webkit-background-clip:text; background-clip:text;
}
.band__on{ font-size:33px; }

/* ====================== COMPANY ====================== */
.company{
  background:linear-gradient(180deg,#e9f1f8,#e3edf6);
  padding:16px 40px 18px;
}
.company__card{
  display:flex;
  border-radius:5px; overflow:hidden;
  box-shadow:0 8px 20px rgba(20,40,70,.12);
}
.company__brand{
  flex:0 0 305px;
  background:linear-gradient(160deg,#123052 0%,#0c2444 60%,#091f3d 100%);
  color:#eef3f8;
  padding:16px 28px;
  display:flex; flex-direction:column; justify-content:center;
}
.company__eq{
  font-family:"Cormorant Garamond",serif; font-weight:600; font-size:28px; letter-spacing:.04em;
  color:transparent; background:linear-gradient(180deg,#e6cd85,#c39a4c);
  -webkit-background-clip:text; background-clip:text;
}
.company__sub{ font-size:14.5px; font-weight:500; margin-top:10px; color:#dde6f0; letter-spacing:.02em; }
.company__rule{ display:block; width:38px; height:2px; margin-top:16px; background:var(--gold); }
.company__table{
  flex:1; border-collapse:collapse;
  background:#fff;
  font-size:14px;
}
.company__table tr{ border-bottom:1px solid #e6ebf0; }
.company__table tr:last-child{ border-bottom:none; }
.company__table th{
  width:118px; text-align:left; font-weight:600; color:#1d3149; letter-spacing:.02em;
  padding:0 0 0 26px; vertical-align:middle; white-space:nowrap;
}
.company__table td{ color:#2a3d54; font-weight:500; padding:8px 20px 8px 8px; letter-spacing:.01em; }

/* ====================== FOOTER ====================== */
.foot{
  background:#0c294a;
  text-align:center;
  padding:13px 0;
}
.foot p{
  font-family:"Cormorant Garamond",serif;
  font-size:12px; letter-spacing:.14em; color:#c2ccd8;
}

/* ====================== RESPONSIVE (SP) ====================== */
@media (max-width:768px){
  .lp{ width:100%; }
  /* ヒーロー: 画像を背景coverにし、左に淡いオーバーレイで文字可読性を確保(左の文字ゴースト解消) */
  .hero{
    height:auto; padding-bottom:30px;
    background:
      linear-gradient(100deg, rgba(246,249,251,.94) 0%, rgba(246,249,251,.62) 48%, rgba(246,249,251,.30) 100%),
      url("hero-visual.png") right center / cover no-repeat,
      #eef5fa;
  }
  .hero__visual{ display:none; }
  .hero__title{ font-size:42px; }
  .hero__lead1,.hero__lead2{ font-size:23px; }
  .hero__sub{ font-size:14px; }
  /* 引用: 2列を縦積みにして横はみ出しを解消 */
  .quotes{ flex-direction:column; padding:28px 20px; }
  .quotes__left{ width:auto; flex:none; flex-direction:column; gap:0; }
  .quotes__col{ width:auto; }
  .navybox{ margin-left:0; margin-top:24px; padding:28px 24px; }
  /* カード類: 縦積み */
  .iconcards,.numcards{ flex-direction:column; }
  .iconcard{ height:80px; }
  /* 番号カード: 縦積み時は固定高さ不要(中央の大余白を解消) */
  .checklist{ min-height:0; }
  .band__msg{ font-size:22px; }
  .band__on{ font-size:25px; }
  .company__card{ flex-direction:column; }
  .company__brand{ flex:none; }
  .company__table th{ padding-left:18px; width:110px; }
}