@charset "UTF-8";
/* =========================================================
   CORDER 積算AIプラットフォーム LP
   PC First / Responsive (tablet 768px, sp 375px)
   ========================================================= */

:root{
  --blue:#00518e;
  --blue-deep:#20508a;
  --blue-navy:#1b3a6b;
  --blue-2:#ebf4ff;
  --blue-after:#eef3fb;
  --blue-text2:#6b7a99;
  --gray-100:#252525;
  --gray-80:#666666;
  --gray-40:#b5b5b5;
  --gray-10:#f5f5f5;
  --orange-dark:#ff6b00;
  --orange-light:#ffcf70;
  --white:#ffffff;
  --line:#d4dae6;
}


/* ---------- base ---------- */
html{ font-size:16px; }
body{
  font-family:"Noto Sans JP", sans-serif;
  color:var(--gray-100);
  background:var(--white);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  font-feature-settings:"palt";
}
img{ max-width:100%; height:auto; vertical-align:bottom; }
a{ color:inherit; text-decoration:none; }

/* ---------- helpers ---------- */
.c-dark{ color:var(--gray-100); }
.c-blue{ color:var(--blue); }
.c-orange{ color:var(--orange-dark); }
.c-white{ color:var(--white); }
.c-light{ color:var(--orange-light); }

.bar{ display:block; border-radius:2px; }
.bar--blue{ background:var(--blue); }
.bar--orange{ background:var(--orange-dark); }
.bar--5{ width:80px; height:5px; }
.bar--8{ width:80px; height:8px; }

.br-sp{ display:none; }

/* common section label (en + ja + bar) */
.sec-label{ display:flex; flex-direction:column; }
.sec-label--center{ align-items:center; text-align:center; gap:16px; }
.sec-label__en{
  font-weight:700; font-size:10.4px; line-height:1.5;
  letter-spacing:2.08px; text-transform:uppercase; color:var(--gray-40);
}
.sec-label__ja{
  font-weight:900; font-size:32px; line-height:1.4; color:var(--blue);
}

/* arrow icon (inline svg via mask not needed; use pseudo) */
.ico-arrow{
  display:inline-block; width:14px; height:14px; flex-shrink:0;
  background-repeat:no-repeat; background-position:center; background-size:contain;
}
.ico-arrow--white{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14' fill='none'%3E%3Cpath d='M2.917 7h8.166' stroke='%23fff' stroke-width='1.167' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M7 2.917 11.083 7 7 11.083' stroke='%23fff' stroke-width='1.167' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.ico-arrow--box{
  background-color:var(--blue);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14' fill='none'%3E%3Cpath d='M2.917 7h8.166' stroke='%23fff' stroke-width='1.167' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M7 2.917 11.083 7 7 11.083' stroke='%23fff' stroke-width='1.167' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* buttons */
.btn{
  display:inline-flex; align-items:center; gap:8px; white-space:nowrap;
  padding:16px 24px; font-size:16px; font-weight:900; line-height:1;
  transition:opacity .2s, background-color .2s, color .2s;
}
.btn--primary{ background:var(--orange-dark); color:#fff !important; }
.btn--outline{ border:1px solid var(--blue); color:var(--blue); }
.btn:hover{ opacity:.85; }

/* =========================================================
   Hero / FV
   ========================================================= */
.hero{ position:relative; overflow:hidden; background:var(--gray-10); }
.hero__bg{
  position:absolute; inset:0;
  background:url("../images/hero_bg.png") no-repeat center top;
  background-size:100% auto;
  background-position:center -20px;
}
.hero__overlay{ position:absolute; inset:0; background:rgba(245,245,245,.8); }
.hero__inner{
  position:relative; z-index:2;
  width:1280px; max-width:100%; margin:0 auto; height:750px;
}
.hero__content{
  position:absolute; left:155px; top:215px; width:678px;
  display:flex; flex-direction:column; align-items:flex-start;
}
.hero__badge{
  display:inline-block; border:1px solid var(--blue-navy);
  padding:6.6px 15.4px; font-size:11.2px; font-weight:700; line-height:1.5;
  letter-spacing:1.68px; color:var(--blue-navy);
  margin-bottom:23px;
}
.hero__title{ font-weight:900; font-size:48px; line-height:1.3; letter-spacing:-1.56px; }
.hero__title span{ display:block; }
.hero__sub{ margin-top:23px; }
.hero__sub .marker{
  font-weight:900; font-size:32px; line-height:1.4; color:var(--blue);
  letter-spacing:.7px;
  background:linear-gradient(transparent 62%, var(--white) 62%);
  padding:0 2px;
}
.hero__btns{ display:flex; flex-wrap:wrap; gap:16px; margin-top:40px; }
.hero__visual_pc{
  display: block; position:absolute; left:640px; top:235px; width:600px; height:auto;
}
.hero__visual_sp{
  display: none; position:absolute; left:640px; top:235px; width:600px; height:auto;
}

/* =========================================================
   Problem / ご注意ください
   ========================================================= */
.problem{ background:var(--gray-10); padding:48px 20px; }
.problem__head{ display:flex; flex-direction:column; align-items:center; gap:32px; margin-bottom:56px; }
.problem__icon{ width:48px; height:48px; }
.problem__title{ font-weight:900; font-size:24px; line-height:1; color:var(--blue); }
.problem__lead{
  font-weight:900; font-size:32px; line-height:1.6; color:var(--gray-100);
  text-align:center; max-width:768px;
}
.problem__lead .num{ font-size:48px; }
.problem__cards{ display:flex; justify-content:center; gap:16px; max-width:932px; margin:0 auto; }
.pcard{
  width:300px; background:var(--white); border-radius:12px;
  padding:24px 20px; display:flex; flex-direction:column; align-items:center; gap:12px;
}
.pcard__title{ font-weight:900; font-size:24px; line-height:1.4; color:var(--blue); text-align:center; }
.pcard__img{ height:100px; display:flex; align-items:center; justify-content:center; }
.pcard__img img{ width:96px; height:auto; }
.pcard__body{ font-weight:500; font-size:14px; line-height:1.6; color:var(--gray-80); }
.pcard__body strong{ font-weight:900; }

/* =========================================================
   Advantage / 強み
   ========================================================= */
.advantage{ background:var(--gray-10); padding:100px 20px; }
.advantage__list{
  width:768px; max-width:100%; margin:56px auto 0;
  display:flex; flex-direction:column; gap:42px;
}
.adv-item{ display:flex; align-items:center; gap:16px; }
.adv-item__num{
  font-family:"Roboto Condensed", sans-serif; font-weight:500;
  font-size:160px; line-height:1; color:var(--blue); flex-shrink:0; min-width:0;
}
.adv-item__body{ flex:1; display:flex; flex-direction:column; gap:16px; align-items:flex-start; }
.adv-item__title{ font-weight:900; font-size:28px; line-height:1.4; color:var(--gray-100); }
.adv-item__line{ width:100%; height:1px; background:var(--line); }
.adv-item__desc{ font-weight:700; font-size:16px; line-height:1.4; letter-spacing:.64px; color:var(--gray-80); }

/* =========================================================
   Stats / 実績
   ========================================================= */
.stats{ background:var(--blue); padding:100px 20px; }
.stats__head{ display:flex; flex-direction:column; align-items:center; gap:16px; margin-bottom:56px; }
.stats__logo{ width:auto; height:68px; }
.stats__title{
  font-weight:900; font-size:32px; line-height:1.6; text-align:center; color:var(--white);
}
.stats__card{
  width:768px; max-width:100%; margin:0 auto; background:var(--white);
  border-radius:12px; padding:48px; display:flex; flex-direction:column; align-items:center; gap:32px;
}
.stats__numwrap{ display:flex; flex-direction:column; align-items:flex-end; gap:4px; }
.stats__nums{ display:flex; }
.stat{
  width:300px; height:160px; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:16px;
}
.stat--border{ border-right:2px solid var(--blue); }
.stat__label{ font-weight:700; font-size:16px; line-height:1; color:var(--orange-dark); }
.stat__value{ display:flex; align-items:flex-end; gap:4px; color:var(--blue); }
.stat__big{ font-weight:900; font-size:72px; line-height:1; }
.stat__unit{ font-weight:700; font-size:24px; line-height:1; padding-bottom:4px; }
.stats__note{ font-weight:400; font-size:12px; line-height:1; color:var(--gray-40); text-align:right; }
.stats__logos{ width:666.5px; max-width:100%; }
.stats__logos img{ width:100%; }

/* =========================================================
   Process / 実装までの流れ
   ========================================================= */
.process{ background:var(--gray-10); padding:100px 20px; text-align:center; }
.process__flow{ width:785px; max-width:100%; margin:56px auto 0; }
.process__note{ font-weight:500; font-size:18px; line-height:1; color:var(--gray-80); margin-top:56px; }

/* =========================================================
   Functions / 実装例
   ========================================================= */
.functions{ background:var(--white); padding:80px 20px; }
.functions__intro{
  width:874px; max-width:100%; margin:56px auto 0;
  display:flex; flex-direction:column; align-items:center; gap:40px;
}
.functions__catch{
  font-weight:700; font-size:20px; line-height:1.4; text-align:center; color:var(--gray-100);
  border-bottom:8px solid var(--orange-light); padding-bottom:2px;
}
.functions__flowimg{ width:874px; max-width:100%; }
.functions__note{ font-weight:900; font-size:16px; line-height:1; color:var(--blue); text-align:center; }

.functions__list{
  width:1024px; max-width:100%; margin:56px auto 0;
  display:flex; flex-direction:column; gap:97px;
}
.feature{ display:flex; flex-direction:column; gap:24px; }
.feature__head{ display:flex; align-items:center; gap:12px; }
.feature__icon{ width:72px; height:72px; flex-shrink:0; }
.feature__caption{
  flex:1; min-width:0; padding-left:24px; border-left:10px solid var(--blue-deep);
  display:flex; flex-direction:column; gap:8px;
}
.feature__name{ font-weight:900; font-size:32px; line-height:1; color:var(--blue); }
.feature__desc{ font-weight:500; font-size:15.2px; line-height:1.8; color:var(--gray-80); }
.feature__cases{ display:flex; gap:12px; padding-left:84px; }

.fcase{ flex:1; min-width:0; display:flex; flex-direction:column; gap:8px; }
.fcase__head{ display:flex; align-items:flex-start; gap:8px; padding-bottom:9px; border-bottom:1px solid var(--line); }
.fcase__dot{ position:relative; width:13px; height:13px; flex-shrink:0; }
.fcase__dot::before{ content:""; position:absolute; left:1px; top:1px; width:6px; height:6px; background:#ba3196; }
.fcase__dot::after{ content:""; position:absolute; left:8px; top:8px; width:4px; height:4px; background:#2b58bf; }
.fcase__subtitle{ font-weight:700; font-size:14px; line-height:1; color:var(--blue); }
.fcase__box{ display:flex; flex-direction:column; gap:6.39px; }
.fcase__box--before{ background:var(--gray-10); padding:16px 24px 20px; height: 100px; }
.fcase__box--after{ background:var(--blue-after); border:1px solid var(--blue-2); padding:21px 25px;height: 100px; }
.fcase__tag{ font-weight:700; font-size:10.4px; line-height:1.5; letter-spacing:2.08px; text-transform:uppercase; }
.fcase__box--before .fcase__tag{ color:var(--blue-text2); }
.fcase__box--after .fcase__tag{ color:var(--orange-dark); }
.fcase__txt{ font-size:12px; line-height:1.2; }
.fcase__box--before .fcase__txt{ font-weight:400; color:var(--blue-text2); }
.fcase__box--after .fcase__txt{ font-weight:500; color:var(--blue); }

/* =========================================================
   Q&A / よくあるご質問
   ========================================================= */
.faq{ background:var(--gray-10); padding:100px 20px; }
.faq__list{
  width:768px; max-width:100%; margin:56px auto 0;
  border-top:1px solid var(--gray-40); border-bottom:1px solid var(--gray-40);
}
.faq__item{ border-top:1px solid var(--gray-40); }
.faq__item:first-child{ border-top:none; }
.faq__q{
  width:100%; display:flex; align-items:center; gap:12px; padding:16px;
  background:none; border:none; cursor:pointer; text-align:left;
}
.faq__qmark{
  font-family:"Outfit", sans-serif; font-weight:700; font-size:24px; line-height:1;
  letter-spacing:2.08px; color:var(--orange-dark); flex-shrink:0;
}
.faq__qtext{ flex:1; font-weight:500; font-size:14px; line-height:1.6; color:var(--gray-100); }
.faq__toggle{
  position:relative; width:24px; height:24px; flex-shrink:0;
  border:1.5px solid var(--blue); border-radius:3px;
}
.faq__toggle::before,
.faq__toggle::after{
  content:""; position:absolute; background:var(--blue); border-radius:1px;
  top:50%; left:50%; transform:translate(-50%,-50%);
}
.faq__toggle::before{ width:10px; height:2px; }
.faq__toggle::after{ width:2px; height:10px; transition:transform .25s; }
.faq__q[aria-expanded="true"] .faq__toggle::after{ transform:translate(-50%,-50%) scaleY(0); }
.faq__a{ overflow:hidden; max-height:0; transition:max-height .3s ease; }
.faq__a-inner{ padding:0 40px 16px; font-weight:500; font-size:14px; line-height:1.6; color:var(--gray-100); }

/* =========================================================
   Responsive : Tablet (<=768px)
   ========================================================= */
@media screen and (max-width:768px){
  body{ font-feature-settings:"palt"; }
  .br-pc{ display:none; }
  .br-sp{ display:inline; }

  /* Hero */
  .hero__inner{ width:100%; height:auto; padding:40px 20px 40px; }
  .hero__bg{ background-size:cover; background-position:center top; }
  .hero__content{ position:static; left:auto; top:auto; width:100%; }
  .hero__badge{ font-size:11.2px; margin-bottom:16px; }
  .hero__title{ font-size:25px; line-height:1.34; letter-spacing:-.5px; }
  .hero__sub{ margin-top:14px; }
  .hero__sub .marker{ font-size:18px; padding:0; }
  .hero__visual_pc{
    display: none;
  }
  .hero__visual_sp{
    display: block;
    position:static; display:block; width:72%; max-width:300px;
    margin:0px -2px 0 auto; left:auto; top:auto;
  }
  .hero__btns{ width:100%; flex-direction:column; align-items:center; gap:16px; margin-top:28px; }
  .btn{ width:auto; justify-content:center; padding:14px 36px; }

  /* Problem */
  .problem{ padding:40px 20px; }
  .problem__head{ gap:16px; margin-bottom:0; }
  .problem__icon{ width:32px; height:32px; }
  .problem__title{ font-size:16px; }
  .problem__lead{ font-size:20px; margin-bottom:32px; }
  .problem__lead .num{ font-size:28px; }
  .problem__cards{ flex-direction:column; align-items:center; gap:16px; max-width:100%; }
  .pcard{ width:100%; max-width:500px; }
  .pcard__title{ font-size:20px; }

  /* Advantage */
  .advantage{ padding:48px 20px; }
  .sec-label__ja{ font-size:24px; }
  .advantage__list{ width:100%; max-width:520px; gap:32px; margin-top:40px; }
  .adv-item{
    flex-direction:column; align-items:center; gap:4px; text-align:center;
    background:none; border-radius:0; padding:0;
  }
  .adv-item__num{ font-size:64px; line-height:1.1; }
  .adv-item__body{ align-items:center; gap:8px; }
  .adv-item__title{ font-size:18px; text-align:center; }
  .adv-item__line{ display:none; }
  .adv-item__desc{ font-size:13px; text-align:center; letter-spacing:0; }

  /* Stats */
  .stats{ padding:48px 20px; }
  .stats__logo{ height:48px; }
  .stats__title{ font-size:18px; }
  .stats__card{ width:100%; padding:32px 20px; gap:24px; }
  .stat{ width:150px; height:auto; gap:12px; }
  .stat__label{ font-size:14px; }
  .stat__big{ font-size:44px; }
  .stat__unit{ font-size:18px; }
  .stats__logos{ width:100%; }

  /* Process */
  .process{ padding:48px 20px; }
  .process__flow{ width:100%; margin-top:40px; }
  .process__note{ font-size:14px; margin-top:32px; }

  /* Functions */
  .functions{ padding:48px 20px; }
  .functions__intro{ width:100%; margin-top:40px; gap:24px; }
  .functions__catch{ font-size:16px; }
  .functions__flowimg{ width:100%; }
  .functions__note{ font-size:13px; line-height:1.6; }
  .functions__list{ width:100%; gap:48px; margin-top:40px; }
  .feature{ gap:16px; }
  .feature__head{ gap:12px; }
  .feature__icon{ width:48px; height:48px; }
  .feature__caption{ padding-left:12px; border-left-width:6px; gap:4px; }
  .feature__name{ font-size:22px; }
  .feature__desc{ font-size:13px; line-height:1.6; }
  .feature__cases{ flex-direction:column; gap:16px; padding-left:0; }

  /* Q&A */
  .faq{ padding:48px 20px; }
  .faq__list{ width:100%; margin-top:40px; }
  .faq__q{ padding:16px 4px; gap:8px; align-items:flex-start; }
  .faq__qmark{ font-size:20px; }
  .faq__a-inner{ padding:0 28px 16px; }
}

/* ---------- fine tune for small phones (<=375px) ---------- */
@media screen and (max-width:375px){
  .hero__title{ font-size:26px; }
  .problem__lead{ font-size:18px; }
  .stat__big{ font-size:38px; }
  .feature__name{ font-size:20px; }
}