/* ========== Base ========== */
:root{
  --text:#111;
  --muted:#666;
  --line:#cfcfcf;
  --band:#efefef;
  --pill:#0b0b0b;
  --blue:#1f6fff;
  --container: 1040px;
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Noto Sans JP", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color:var(--text);
  background:#fff;
  line-height:1.5;
}

img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
.container{
  width:min(var(--container), calc(100% - 40px));
  margin:0 auto;
}

/* ========== First View ========== */
.firstview{
  position:relative;
  width:100vw;
  height:90vh;
  display:flex;
  justify-content:center;
  align-items:flex-end;
  overflow:hidden;
  background-color:#fff;
}
.firstview::before{
  content:"";
  position:absolute;
  top:0;
  left:0;
  width:50%;
  height:100%;
  background:url("./img/FV_bg.png") center center / cover no-repeat;
}
.firstview::after{
  content:"";
  position:absolute;
  top:0;
  left:0;
  width:50%;
  height:100%;
  background:linear-gradient(to right, rgba(255,255,255,0.5) 0%, rgba(255,255,255,1) 100%);
}
.firstview > *{
  position:relative;
  z-index:1;
}
.first_contents{
  width:100%;
  display:flex;
  flex-direction:row;
  justify-content:center;
  column-gap:40px;
}
.first_content{
  max-width:none;
  width:auto;
  flex:0 0 auto;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  row-gap:30px;
}
.logo_big{
  display:flex;
  flex-direction:row;
  align-items:center;
  gap:20px;
}
.logo_big img{
  max-width:128px;
  width:40%;
  height:auto;
  border-radius:15px;
}
.logo_title{
  display:flex;
  flex-direction:column;
}
.logo_title p{
  margin:0;
  font-size:20px;
  font-weight:600;
  line-height:1.2;
}
.logo_title h1{
  margin:0;
  font-size:72px;
  font-weight:600;
  line-height:1.2;
  font-family:"Poppins","Hiragino Sans","Noto Sans JP",sans-serif;
}
.first_phone{
  max-width:453px;
  width:45%;
  filter:drop-shadow(0 8px 18px rgba(0,0,0,.18));
}
.first_cta{
  width:100%;
  height:60px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0;
  border-radius:16px;
  background:#000;
}
.first_cta img{
  width:auto;
  height:48px;
  max-width:100%;
}

/* AppStore button */
.appstore-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  height:36px;
  padding:0 18px;
  border-radius:10px;
  background:#0b0b0b;
  color:#fff;
  font-weight:700;
  font-size:12px;
}
.appstore-btn__apple{ font-size:18px; line-height:1; }
.appstore-btn--small{ height:34px; padding:0 16px; border-radius:10px; }

/* ========== Problem ========== */
.problem{
  padding:80px 0;
}
.problem__title{
  text-align:center;
  margin:0;
  font-size:40px;
  font-weight:700;
  letter-spacing:.02em;
}
.problem__sub{
  font-size: 32px;
  font-weight:700;
}
.pill-row{
  margin-top:60px;
  display:flex;
  gap:16px;
  justify-content:center;
  flex-wrap:wrap;
}
.pill{
  flex:1 1 calc((100% - 32px) / 3);
  min-width:200px;
  background:var(--pill);
  color:#fff;
  border-radius:999px;
  padding:14px 18px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:10px;
  box-shadow: 0 6px 16px rgba(0,0,0,.12);
}
.pill__text{
  font-size:20px;
  font-weight:700;
  line-height:1.5;
  text-align: center;
  min-height:calc(1.5em * 2);
  display:flex;
  align-items:center;
}
.pill__chev{
  width:18px;
  height:18px;
  opacity:.85;
}

/* ========== Section helpers ========== */
.section{
  padding:80px 0;
}
.section--loose{
  padding:80px 0;
}
.section--calendar-link{
  padding-bottom:0;
}
.band{
  padding:80px 0;
  background:#f0f0f0;
}

/* Tag + heading */
.feature-head{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  gap:20px;
  margin-bottom:30px;
}
.tag{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:8px 16px;
  border-radius:999px;
  background:#0b0b0b;
  color:#fff;
  font-size:28px;
  font-weight:600;
}
.feature-title{
  margin:0;
  font-size:32px;
  font-weight:600;
}
.feature-sub{
  margin:0;
  font-size:28px;
  color:#666666;
  font-weight:600;
}
.small-chev{
  margin-top:-2px;
  width:32px;
  height:32px;
  display:block;
  background-color:#C7C7CC;
  -webkit-mask:url("img/chevron.down.2.svg") center / contain no-repeat;
  mask:url("img/chevron.down.2.svg") center / contain no-repeat;
}

/* ========== Feature layouts ========== */
.feature{
  display:grid;
  gap:18px;
  align-items:center;
}
.feature--two{
  grid-template-columns: 1fr 40px 1fr;
}
.feature__right{
  display:flex;
  flex-direction:column;
  align-items:center;
}
.feature__mid, .phones-3__mid, .timeline-3__mid{
  display:flex;
  align-items:center;
  justify-content:center;
  align-self:center;
}
.arrow{
  width:24px;
  height:24px;
  display:block;
  background-color:#C7C7CC;
  -webkit-mask:url("img/chevron.right.2.svg") center / contain no-repeat;
  mask:url("img/chevron.right.2.svg") center / contain no-repeat;
}
.caption{
  margin:24px 0 0;
  font-size:16px;
  color:#000000;
  font-weight:600;
}
.caption--before{
  color:#666666;
}
.caption--center{ text-align:center; }

.poster{
  width:auto;
  height:528px;
  margin:0 auto;
  opacity:.95;
}

/* Callouts (線 + ラベル) */
.callouts{
  list-style:none;
  padding:0;
  margin:12px 0 0;
  display:grid;
  gap:10px;
  max-width:340px;
}
.callouts li{
  display:flex;
  align-items:center;
  gap:10px;
}
.callouts__line{
  width:120px;
  height:2px;
  background:#111;
  opacity:.9;
}
.callouts__label{
  font-size:10px;
  font-weight:800;
  color:#111;
}

/* Phone look */
.phone{
  width:260px;
  margin:0 auto;
  filter: drop-shadow(0 10px 18px rgba(0,0,0,.18));
}
.phone--no-shadow{
  filter:none;
}

/* ========== 3 phones row ========== */
.phones-3{
  display:grid;
  grid-template-columns: 1fr 34px 2fr;
  gap:10px;
  align-items:start;
  margin-top:6px;
  --phones-3-mid-offset: 28px;
}
.phones-3__item{
  display:flex;
  flex-direction:column;
  align-items:center;
}
.phones-3__item--after{
  width:100%;
}
.phones-3__mid{
  transform:translateY(calc(-1 * var(--phones-3-mid-offset)));
}
.phones-3__after-images{
  width:100%;
  display:flex;
  justify-content:center;
  align-items:flex-start;
  gap:10px;
}
.phones-3__after-images .phone{
  width:min(260px, calc((100% - 10px) / 2));
}

/* Divider row with + */
.divider-plus{
  width:75px;
  height:75px;
  margin:24px auto 10px;
  border-radius:50%;
  background:#0b0b0b;
  display:grid;
  place-items:center;
}
.divider-plus__icon{
  width:32px;
  height:32px;
  display:block;
}
.divider-row{
  margin:0 0 40px;
  display:grid;
  grid-template-columns: 1fr auto 1fr;
  gap:14px;
  align-items:center;
}
.divider-row__line{
  height:2px;
  background:#bdbdbd;
}
.divider-row__center{
  display:flex;
  align-items:center;
  gap:10px;
}
.divider-row__icon{
  width:100px;
  height:100px;
  object-fit:contain;
}
.divider-row__title{
  font-weight:600;
  font-size:32px;
}

/* Timeline 3 */
.timeline-3{
  display:flex;
  flex-direction:column;
  gap:24px;
}
.timeline-3__captions{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:80px;
  align-items:end;
  max-width:760px;
  margin:0 auto;
}
.timeline-3__caption{
  margin:0;
  min-width:0;
  display:flex;
  align-items:flex-end;
}
.timeline-3__screens{
  display:grid;
  grid-template-columns: 1fr 34px 1fr 34px 1fr;
  gap:10px;
  align-items:start;
}
.timeline-3__mid{
  align-self:center;
}
.timeline-3__mid-text-mobile{
  display:none;
}
.section--calendar-link .timeline-3 .phone{
  filter:none;
}

/* ========== Two cols ========== */
.two-cols{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:26px;
  align-items:start;
  margin-top:10px;
}
.two-cols__col{
  display:flex;
  flex-direction:column;
  align-items:center;
}
.two-cols__title{
  font-size:28px;
  font-weight:600;
  margin-bottom:10px;
}

/* ========== New share ========== */
.share-section{
  position:relative;
  overflow:hidden;
  min-height:620px;
}
.share-section .container{
  position:relative;
  z-index:2;
}
.new-row{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:10px;
}
.new-row__badge{
  background:var(--blue);
  color:#fff;
  font-weight:600;
  font-size:28px;
  padding:8px 16px;
  border-radius:999px;
  line-height:1;
  margin-top:4px;
}
.new-row__title{
  margin:0 0 6px;
  font-size:32px;
  font-weight:600;
}
.new-row__desc{
  margin:0;
  font-size:24px;
  color:#333;
  font-weight:600;
}

.share-visual{
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
}
.share-visual .phone{
  position:absolute;
  z-index:1;
  filter:none;
  background-position:center;
  background-repeat:no-repeat;
  background-size:contain;
}
.phone--tilt{
  width:clamp(220px, 50vw, 420px);
  aspect-ratio:2348 / 1976;
  background-image:url("img/new_1.png");
  transform:none;
  left:20px;
  bottom:0;
}
.phone--tilt2{
  width:clamp(220px, 50vw, 420px);
  aspect-ratio:2116 / 1364;
  background-image:url("img/new_2.png");
  transform:none;
  right:20px;
  top:0;
  opacity:1;
}
.waves{
  position:absolute;
  z-index:0;
  left:50%;
  top:50%;
  transform:translate(-50%, -50%);
  width:300px;
  height:300px;
  background:url("img/communication.png") center / contain no-repeat;
  opacity:.32;
}

/* ========== CTA ========== */
.cta{
  position:relative;
  margin-top:-1px;
  min-height:80vh;
  padding:80px 0;
  overflow:hidden;
}
.cta::before{
  content:"";
  position:absolute;
  top:0;
  right:0;
  width:50%;
  height:100%;
  background:url("img/cta_bg.jpg") right center / cover no-repeat;
  z-index:0;
  pointer-events:none;
}
.cta::after{
  content:"";
  position:absolute;
  top:0;
  right:0;
  width:55%;
  height:100%;
  background:linear-gradient(to right, rgba(255,255,255,1) 0%, rgba(255,255,255,.5) 100%);
  z-index:1;
  pointer-events:none;
}
.cta__inner{
  position:relative;
  z-index:2;
  display:flex;
  justify-content:center;
  align-items:center;
  gap:20px;
  min-height:calc(80vh - 160px);
}
.cta .logo_big{
  justify-content:center;
}
/* ========== Footer ========== */
.footer{
  background:#0b0b0b;
  color:#fff;
  padding:14px 0;
}
.footer__inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  font-size:11px;
}
.footer__links{
  display:flex;
  align-items:center;
  gap:8px;
  opacity:.9;
}
.footer__links a{ text-decoration:none; }
.sep{ opacity:.5; }
.footer__copy{ opacity:.85; }

/* ========== Responsive ========== */
@media (max-width: 1024px){
  .container{
    width:min(var(--container), calc(100% - 32px));
  }
  .first_contents{
    column-gap:24px;
  }
  .logo_title p{
    font-size:18px;
  }
  .logo_title h1{
    font-size:60px;
  }
  .problem__title{
    font-size:34px;
  }
  .problem__sub{
    font-size:28px;
  }
  .tag{
    font-size:24px;
  }
  .feature-title{
    font-size:30px;
  }
  .feature-sub{
    font-size:24px;
  }
  .divider-row__title{
    font-size:28px;
  }
  .new-row__title{
    font-size:30px;
  }
  .new-row__desc{
    font-size:20px;
  }
}

@media (max-width: 768px){
  .firstview{
    width:100%;
    height:90vh;
    min-height:0;
    padding:0;
    align-items:flex-end;
  }
  .firstview .container{
    height:100%;
  }
  .firstview::before{
    width:100%;
    opacity:.26;
  }
  .firstview::after{
    width:100%;
    background:rgba(255,255,255,.5);
  }
  .first_contents{
    display:grid;
    grid-template-rows:1fr auto;
    justify-items:center;
    align-items:stretch;
    row-gap:12px;
    height:100%;
    padding-top:48px;
  }
  .first_content{
    width:100%;
    align-self:center;
    row-gap:20px;
  }
  .logo_big{
    gap:12px;
    max-width:100%;
    align-items:center;
  }
  .logo_big img{
    width:min(104px, 26vw);
    flex:0 0 auto;
  }
  .logo_title{
    align-items:flex-start;
    text-align:left;
    min-width:0;
    max-width:calc(100% - 116px);
  }
  .logo_title p{
    font-size:15px;
    line-height:1.5;
  }
  .logo_title h1{
    font-size:clamp(32px, 9vw, 46px);
    line-height:1.1;
  }
  .first_cta{
    max-width:360px;
    height:56px;
  }
  .first_phone{
    width:min(72vw, 340px);
    margin-bottom:0;
  }

  .problem,
  .section,
  .section--loose,
  .band{
    padding:56px 0;
  }
  .problem__title{
    font-size:32px;
  }
  .problem__sub{
    font-size:24px;
  }
  .pill-row{
    margin-top:32px;
    gap:10px;
  }
  .pill{
    flex:1 1 100%;
    min-width:0;
    padding:12px 16px;
  }
  .pill__text{
    font-size:18px;
    min-height:auto;
  }

  .feature-head{
    gap:12px;
    margin-bottom:20px;
  }
  .tag{
    font-size:22px;
    padding:6px 14px;
  }
  .feature-title{
    font-size:26px;
  }
  .feature-sub{
    font-size:20px;
  }
  .small-chev{
    width:24px;
    height:24px;
  }

  .feature--two{
    grid-template-columns:1fr;
  }
  .feature__mid{
    display:none;
  }
  #problem-1 .feature__mid{
    display:flex;
  }
  #problem-1 .feature__mid .arrow{
    -webkit-mask:url("img/chevron.down.2.svg") center / contain no-repeat;
    mask:url("img/chevron.down.2.svg") center / contain no-repeat;
  }
  .caption{
    margin-top:14px;
    font-size:14px;
    line-height:1.7;
  }
  .poster{
    height:auto;
    max-width:min(300px, 100%);
  }

  .phones-3{
    grid-template-columns:1fr;
    gap:20px;
    --phones-3-mid-offset: 0px;
  }
  .phones-3__mid{
    display:none;
  }
  #problem-2 .phones-3__mid{
    display:flex;
    transform:none;
  }
  #problem-2 .phones-3__mid .arrow{
    -webkit-mask:url("img/chevron.down.2.svg") center / contain no-repeat;
    mask:url("img/chevron.down.2.svg") center / contain no-repeat;
  }
  .phones-3__after-images{
    flex-direction:column;
    align-items:center;
    gap:16px;
  }
  #problem-2 .phones-3__after-images{
    flex-direction:row;
    justify-content:center;
    align-items:flex-start;
    gap:10px;
  }
  .phones-3__after-images .phone{
    width:min(260px, 100%);
  }
  #problem-2 .phones-3__after-images .phone{
    width:min(220px, calc((100% - 10px) / 2));
  }

  .divider-plus{
    width:56px;
    height:56px;
    margin:20px auto 8px;
  }
  .divider-plus__icon{
    width:24px;
    height:24px;
  }
  .divider-row{
    margin:0 0 28px;
    grid-template-columns:1fr auto 1fr;
    gap:8px;
  }
  .divider-row__center{
    flex-direction:row;
    justify-content:center;
    gap:6px;
  }
  .divider-row__icon{
    width:56px;
    height:56px;
  }
  .divider-row__title{
    font-size:20px;
    text-align:center;
  }

  .timeline-3{
    gap:16px;
  }
  .timeline-3__screens{
    grid-template-columns:1fr;
    gap:16px;
  }
  .timeline-3__mid,
  .timeline-3__mid .arrow{
    display:none;
  }
  .timeline-3--calendar .timeline-3__captions{
    display:none;
  }
  .timeline-3--calendar .timeline-3__mid,
  .timeline-3--calendar .timeline-3__mid .arrow{
    display:flex;
  }
  .timeline-3--calendar .timeline-3__mid{
    justify-content:center;
    align-items:center;
    gap:8px;
  }
  .timeline-3--calendar .timeline-3__mid .arrow{
    -webkit-mask:url("img/chevron.down.2.svg") center / contain no-repeat;
    mask:url("img/chevron.down.2.svg") center / contain no-repeat;
  }
  .timeline-3--calendar .timeline-3__mid-text-mobile{
    display:block;
    margin:0;
    font-size:13px;
    line-height:1.5;
    font-weight:600;
    text-align:left;
  }

  .two-cols{
    grid-template-columns:1fr;
    gap:30px;
  }
  .two-cols__title{
    font-size:24px;
  }

  .share-section{
    min-height:420px;
    padding:56px 0;
  }
  .new-row{
    align-items:flex-start;
    text-align:left;
  }
  .new-row__badge{
    font-size:22px;
  }
  .new-row__title{
    font-size:28px;
  }
  .new-row__desc{
    font-size:18px;
  }
  .phone--tilt{
    width:clamp(170px, 42vw, 260px);
    left:-12px;
    bottom:16px;
  }
  .phone--tilt2{
    width:clamp(170px, 42vw, 260px);
    right:-12px;
    top:0;
  }
  .waves{
    width:200px;
    height:200px;
    opacity:.25;
  }

  .cta{
    min-height:auto;
    padding:56px 0;
  }
  .cta::before{
    width:100%;
    opacity:.28;
    background-position:center;
  }
  .cta::after{
    width:100%;
    background:rgba(255,255,255,.5);
  }
  .cta__inner{
    min-height:0;
  }

  .footer__inner{
    flex-direction:column;
    gap:8px;
    font-size:10px;
  }
  .footer__links{
    flex-wrap:wrap;
    justify-content:center;
  }
}

@media (max-width: 480px){
  .container{
    width:calc(100% - 24px);
  }
  .firstview{
    height:90vh;
    padding:0;
  }
  .first_contents{
    padding-top:32px;
  }
  .first_phone{
    width:min(82vw, 280px);
  }
  .logo_title p{
    font-size:14px;
  }
  .logo_title h1{
    font-size:clamp(30px, 9vw, 40px);
  }
  .problem__title{
    font-size:26px;
  }
  .problem__sub{
    font-size:20px;
  }
  .feature-title{
    font-size:22px;
  }
  .feature-sub{
    font-size:18px;
  }
  .tag{
    font-size:18px;
  }
  .caption{
    font-size:13px;
  }
  .phone{
    width:min(240px, 100%);
  }
  .divider-row__title{
    font-size:20px;
  }
  .new-row__title{
    font-size:24px;
  }
  .new-row__desc{
    font-size:16px;
  }
  .phone--tilt{
    width:clamp(150px, 48vw, 220px);
    left:-24px;
  }
  .phone--tilt2{
    width:clamp(150px, 48vw, 220px);
    right:-24px;
  }
}