@charset "utf-8";

/* =========================================================
   AnyApps LP  -  style.css
   Figma: lp_anyapps_MM (node 1-5) を忠実にHTML化
   ========================================================= */

:root{
  --white:#ffffff;
  --yellow:#fdd250;
  --navy:#0e1536;
  --line-green:#06c755;
  --btn-blue:#0065cb;
  --btn-blue2:#0866cb;
  --sub-text:#dcebff;
  --pill-text:#333333;
  --maxw:1200px;
  --radius-btn:70px;
}

*,*::before,*::after{box-sizing:border-box;}

html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;}

body{
  margin:0;
  font-family:"Noto Sans JP","Inter",-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;
  color:var(--white);
  line-height:1.7;
  letter-spacing:.02em;
  font-feature-settings:"palt" 1;
  overflow-x:hidden;
  background-color:#0054d1;
}
/* ページ全体の背景画像を固定表示（background-attachment:fixed はモバイルで描画不具合を
   起こすため、固定した疑似要素で実装。iOS等でも安定して表示される） */
body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-1;
  background:url("../assets/backimage.png") no-repeat center top;
  background-size:cover;
  pointer-events:none;
}

img{display:block;max-width:100%;height:auto;}
a{color:inherit;text-decoration:none;}
.br-sp{display:none;} /* スマホ時のみ改行 */

/* ===== 共通 ===== */
.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:24px;}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:18px;
  min-height:60px;padding:0 30px;border-radius:var(--radius-btn);
  font-weight:600;font-size:16px;letter-spacing:.05em;line-height:1.3;
  white-space:nowrap;cursor:pointer;transition:transform .15s ease,box-shadow .15s ease,opacity .15s ease;
}
.btn:hover{transform:translateY(-2px);}
.btn--yellow{background:var(--yellow);color:var(--navy);}
.btn--yellow:hover{box-shadow:0 8px 22px rgba(253,210,80,.35);}
.btn--outline{background:var(--btn-blue);color:#fff;border:1px solid rgba(255,255,255,.6);}
.btn--outline:hover{box-shadow:0 8px 22px rgba(0,0,0,.25);}
.btn__arrow{width:6px;height:10px;flex:none;}
.btn__arrow svg{width:100%;height:100%;display:block;}

/* チェック行 */
.checks{display:flex;flex-wrap:wrap;gap:4px 23px;margin:0;padding:0;list-style:none;}
.checks li{display:flex;align-items:center;gap:7px;font-weight:600;font-size:15px;letter-spacing:.02em;}
.checks .ic{width:16px;height:16px;flex:none;}

.sec-head{display:flex;flex-direction:column;gap:16px;align-items:center;text-align:center;}
.sec-head h2{margin:0;font-weight:600;font-size:clamp(28px,4vw,48px);line-height:1.35;letter-spacing:.02em;}
.sec-head p{margin:0;font-size:14px;line-height:1.7;color:#fff;}

/* =========================================================
   ヘッダー
   ========================================================= */
.site-header{
  position:fixed;top:0;left:0;width:100%;z-index:30;
  padding:19px 32px;
  transition:background-color .25s ease;
}
/* Heroを過ぎたら背景を出現 */
.site-header.is-solid{background-color:rgba(2,87,209,.95);}
.site-header__inner{
  max-width:1355px;margin-inline:auto;
  display:flex;align-items:center;justify-content:space-between;gap:24px;
}
.brand{display:flex;align-items:center;gap:24px;}
.brand__logo{width:100px;height:auto;flex:none;}
.brand__txt{font-size:12px;font-weight:500;line-height:1.5;letter-spacing:.02em;color:#fff;}
.header-cta{
  background:var(--yellow);color:var(--navy);font-weight:600;font-size:13px;letter-spacing:.05em;
  padding:11px 24px;border-radius:var(--radius-btn);white-space:nowrap;line-height:1.3;
  transition:transform .15s ease;
}
.header-cta:hover{transform:translateY(-2px);}

/* =========================================================
   ヒーロー
   ========================================================= */
.hero{position:relative;padding-top:150px;padding-bottom:40px;overflow:hidden;}
.hero__inner{
  position:relative;
  max-width:1300px;margin-inline:auto;padding-inline:24px;
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.02fr);
  align-items:center;gap:20px;
}
.hero__copy{position:relative;z-index:2;max-width:640px;}
.hero__deco{
  position:absolute;top:-70px;left:0;width:100%;opacity:1;
  pointer-events:none;user-select:none;z-index:-1;
}
.hero__eyebrow{margin:0 0 12px;font-weight:600;font-size:21px;letter-spacing:.05em;}
.hero__title{
  margin:0;font-weight:600;
  font-size:clamp(34px,5.4vw,52px);line-height:1.22;letter-spacing:.05em;
}
.hero__title .ln{display:inline-block;position:relative;z-index:0;}
.hero__title .ln::after{
  content:"";position:absolute;left:-.02em;right:-.02em;bottom:.04em;height:1.1em;
  background:var(--line-green);z-index:-1;border-radius:4px;
}
.hero__lead{margin:15px 0 0;font-size:12px;line-height:1.7;font-weight:400;}
.hero__checks{margin:24px 0 0;}
.hero__buttons{margin:28px 0 0;display:flex;flex-wrap:wrap;gap:14px;}
.hero__buttons .btn{width:250px;max-width:100%;}

.hero__art{position:relative;z-index:2;}
.hero__art img{width:100%;}

/* =========================================================
   悩みセクション
   ========================================================= */
.problem{padding:0 20px 90px;}
.problem__card{
  max-width:1200px;margin-inline:auto;
  background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.3);
  border-radius:30px;padding:66px 52px 58px;
  display:flex;align-items:center;justify-content:center;gap:46px;
}
.problem__people{width:132px;flex:none;}
.problem__people--r{width:112px;}
.problem__body{display:flex;flex-direction:column;align-items:center;gap:40px;flex:1;min-width:0;max-width:760px;}
.problem__title{margin:0;text-align:center;font-weight:600;font-size:clamp(24px,3vw,38px);line-height:1.4;}
.problem__list{
  list-style:none;margin:0;padding:0;width:100%;
  display:grid;grid-template-columns:repeat(2,minmax(0,360px));justify-content:center;gap:15px 36px;
}
.problem__list li{
  position:relative;
  background:rgba(255,255,255,.7);color:var(--pill-text);
  border-radius:60px;min-height:36px;display:flex;align-items:center;justify-content:center;
  padding:6px 24px;font-weight:600;font-size:14px;line-height:1.6;text-align:center;
}

/* =========================================================
   3ステップ + 管理画面
   ========================================================= */
.build{padding:70px 24px 40px;position:relative;}
.build__inner{max-width:1212px;margin-inline:auto;display:flex;flex-direction:column;gap:70px;align-items:center;}
.build__top{display:flex;gap:52px;align-items:flex-start;justify-content:center;width:100%;flex-wrap:wrap;}
.build__lead{flex:0 1 640px;min-width:0;}
.build__lead h2{margin:0 0 16px;font-weight:600;font-size:clamp(30px,3.8vw,48px);line-height:1.3;letter-spacing:.05em;}
.build__lead p{margin:0;font-size:14px;line-height:1.7;font-weight:400;white-space:nowrap;}
.steps{flex:0 1 440px;min-width:0;display:flex;flex-direction:column;gap:32px;}
.step{display:flex;align-items:center;gap:18px;}
.step__ic{
  width:50px;height:50px;flex:none;border-radius:60px;background:var(--btn-blue2);
  display:flex;align-items:center;justify-content:center;
}
.step__ic svg,.step__ic img{width:26px;height:26px;display:block;}
.step__txt h3{margin:0 0 3px;font-weight:600;font-size:clamp(19px,2.2vw,23px);line-height:1.4;letter-spacing:.05em;}
.step__txt p{margin:0;font-weight:400;font-size:15px;line-height:1.4;letter-spacing:.05em;}

.build__shot{position:relative;width:100%;max-width:1058px;display:flex;justify-content:center;}
.build__shot .main{
  width:938px;max-width:100%;
  box-shadow:none;
}
.build__shot .float{
  position:absolute;right:0;bottom:-28px;width:17%;min-width:120px;
  border-radius:22px;box-shadow:10px 10px 20px rgba(0,0,0,.25);
}

/* =========================================================
   テンプレート / つくれる顧客体験
   ========================================================= */
.tpl{padding:100px 0 160px;position:relative;}
.tpl__head{max-width:964px;margin-inline:auto;padding-inline:24px;}
.tags{
  margin:44px auto 0;max-width:1000px;
  display:flex;flex-wrap:wrap;gap:14px;justify-content:center;
}
.tags span{
  background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.3);
  border-radius:80px;padding:9px 20px;font-weight:600;font-size:14px;letter-spacing:.05em;line-height:1.4;
}
.tags-more{margin:22px 0 0;text-align:center;font-weight:600;font-size:18px;letter-spacing:.02em;}

.marquee{--tpl-gap:40px;margin-top:65px;display:flex;flex-direction:column;gap:var(--tpl-gap);overflow:hidden;}
.marquee__row{display:flex;width:max-content;gap:var(--tpl-gap);}
.marquee__row img{height:340px;width:auto;flex:none;}
.marquee__row--1{animation:scroll-left 80s linear infinite;}
.marquee__row--2{animation:scroll-right 88s linear infinite;}
@keyframes scroll-left{from{transform:translateX(0);}to{transform:translateX(calc(-50% - var(--tpl-gap) / 2));}}
@keyframes scroll-right{from{transform:translateX(calc(-50% - var(--tpl-gap) / 2));}to{transform:translateX(0);}}
@media(prefers-reduced-motion:reduce){
  .marquee{overflow-x:auto;}
  .marquee__row{animation:none!important;}
}

/* =========================================================
   フロー / 動画
   ========================================================= */
.flow{padding:0 24px 120px;}
.flow__inner{max-width:1052px;margin-inline:auto;display:flex;flex-direction:column;gap:65px;align-items:center;}
.flow__top{display:flex;flex-direction:column;gap:50px;align-items:center;width:100%;}
.flow__steps{display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:nowrap;width:100%;}
.flow__step{
  flex:1 1 0;max-width:273px;
  border:1px solid rgba(255,255,255,.3);border-radius:80px;
  min-height:108px;padding:0 26px;display:flex;align-items:center;justify-content:center;text-align:center;
  font-weight:600;font-size:clamp(15px,1.9vw,21px);line-height:1.4;letter-spacing:.05em;white-space:nowrap;
}
.flow__arrow{width:30px;flex:none;line-height:0;margin:0;}
.flow__arrow svg{width:100%;height:auto;display:block;}
.flow__video{
  position:relative;width:100%;aspect-ratio:16/9;
  border-radius:10px;overflow:hidden;box-shadow:0 20px 40px rgba(0,0,0,.28);
}
.flow__video iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block;}
.flow__cta{position:relative;display:inline-flex;flex-direction:column;align-items:flex-start;}
.flow__cta .btn{min-height:86px;font-size:22px;letter-spacing:.05em;}
.flow__cta .badge{
  position:absolute;top:-14px;left:50%;transform:translateX(-50%);z-index:2;
  background:var(--yellow);color:var(--navy);font-weight:600;font-size:14px;letter-spacing:.05em;
  padding:5px 22px;border-radius:50px;white-space:nowrap;
}

/* =========================================================
   最下部CTA
   ========================================================= */
.final-cta{
  position:relative;overflow:hidden;padding:90px 40px;
  display:flex;flex-direction:column;align-items:center;gap:30px;text-align:center;
  background-color:#003a91;
  /* Figma CTA 背景（黒30%オーバーレイで暗めの青グラデ）を再現 */
  background-image:radial-gradient(125% 115% at 1% -2%,
      #14599e 0%,#0a4c98 42%,#023e8f 72%,#003a91 100%);
}
.final-cta__head{display:flex;flex-direction:column;align-items:center;gap:13px;}
.final-cta__title{margin:0;font-weight:600;font-size:clamp(30px,4.4vw,46px);line-height:1.25;letter-spacing:.05em;}
.final-cta__title .green{color:var(--line-green);}
.final-cta__lead{margin:0;font-size:14px;line-height:1.5;color:var(--sub-text);max-width:680px;}
.final-cta__checks{justify-content:center;}
.final-cta__action{display:flex;flex-direction:column;align-items:center;gap:14px;padding-top:20px;}
.final-cta__free{margin:0;font-weight:600;font-size:20px;color:#fff;}
.final-cta__btn{width:446px;max-width:100%;}

/* =========================================================
   フッター
   ========================================================= */
.site-footer{background:var(--navy);padding:35px 24px 33px;}
.site-footer__inner{max-width:479px;margin-inline:auto;display:flex;flex-direction:column;align-items:center;gap:32px;text-align:center;}
.footer-back{color:var(--sub-text);font-size:13px;line-height:1.5;}
.footer-back:hover{text-decoration:underline;}
.site-footer__logo{width:170px;height:auto;}
.site-footer__addr p{margin:0;color:var(--sub-text);line-height:1.5;}
.site-footer__addr .a1{font-size:13px;}
.site-footer__addr .a2{font-size:11px;margin-top:3px;}

/* =========================================================
   レスポンシブ
   ========================================================= */
@media(max-width:1300px){
  .hero__title{font-size:clamp(34px,3.9vw,46px);}
}

/* build（アイデアを…）: 列が狭くなる前に縦積みへ切替え、本文は折り返し許可 */
@media(max-width:1160px){
  .build__inner{gap:40px;}
  .build__top{flex-direction:column;gap:24px;}
  .build__lead,.steps{flex:none;width:100%;}
  .build__lead,.build__lead h2{text-align:left;}
  .build__lead p{white-space:normal;}
}

@media(max-width:1000px){
  .hero__inner{grid-template-columns:1fr;gap:8px;}
  .hero__copy{max-width:none;margin-inline:auto;text-align:center;}
  .hero__checks{justify-content:center;}
  .hero__buttons{justify-content:center;}
  .hero__deco{display:block;top:-24px;left:50%;transform:translateX(-50%);width:118%;}
  .hero__art{max-width:640px;margin:8px auto 0;}
  .hero__art img{-webkit-mask-image:none;mask-image:none;}

  .problem__card{flex-direction:column;padding:48px 20px;gap:28px;}
  .problem__people{width:96px;}
  .problem__people--r{order:3;width:88px;}
  .problem__list{grid-template-columns:minmax(0,360px);}

  .build{padding-top:20px;}
  .build__top{flex-direction:column;gap:36px;}
  .build__lead,.build__lead h2{text-align:left;}
  .build__shot .main{width:100%;}
  .build__shot .float{position:static;width:40%;margin:16px auto 0;}

}

/* フロー: スマホは縦積み＋下向き矢印・テキストは改行なし1行 */
@media(max-width:767px){
  .flow__steps{flex-direction:column;gap:14px;flex-wrap:wrap;}
  .flow__step{flex:none;width:auto;max-width:100%;min-height:0;padding:16px 30px;font-size:17px;}
  .flow__arrow{transform:rotate(90deg);}
  .br-flow{display:none;}
}

@media(max-width:640px){
  .br-sp{display:inline;}
  .site-header{padding:12px 16px;}
  .brand__logo{width:64px;}
  .brand__txt{display:none;}
  .marquee{--tpl-gap:24px;}
  .header-cta{font-size:11px;padding:9px 14px;}
  .hero{padding-top:110px;}
  .hero__title{font-size:clamp(27px,8vw,40px);}
  .hero__eyebrow{font-size:16px;}
  .hero__buttons .btn{width:100%;}
  .wrap{padding-inline:16px;}
  .problem__title{font-size:22px;}
  .tags{gap:10px 6px;padding:0 16px;}
  .tags span{font-size:11px;padding:8px 16px;}
  .marquee__row img{height:220px;}
  .flow__cta .btn{font-size:18px;padding:0 22px;}
  .flow__cta .badge{left:auto;right:12px;}
  .final-cta{padding:64px 20px;}
  .final-cta__btn{width:100%;}
}