/* Newday Commerce — additions on top of style.css.
   style.css is a copy of the Newday site's design system (newday-service-site, public/assets/css/style.css @ 63d7c80).
   Keep that file as it is and put everything specific to this site here, so the two can be compared later. */

/* Header: the logo carries the service name. */
.hd__logo { max-width: none; gap: 8px; }
.hd__sub { font-weight: 300; letter-spacing: -.02em; }
.hd { top: env(safe-area-inset-top, 0px); }
/* The header button is in Japanese ("お問い合わせ", 2026-11-03 中島: with the menu all in English, one Japanese word
   reassures a client's staff). The design system sets it in Geist for English; set Japanese in the Japanese face. */
.hd__cta { font-family: var(--ja); font-size: 14px; font-weight: 700; letter-spacing: .04em; }

/* Hero: the Newday site's intro ("Spark a new day." and the Mission, hero.js), with the video in a box of its own
   instead of behind the words: words left, video right on PC; video under the words on phones (2026-10-31 中島, "EC-4-2").
   The box is 6:5 with a soft drop shadow (an exception to the design system's flat surfaces, 中島),
   5% wider than its column, up to 588px. The video is fully opaque here (data-video-opacity="1"). */
.cm-split .hero__bg {
  position: relative; inset: auto; z-index: auto;
  margin-top: 40px; aspect-ratio: 6 / 5; border-radius: 18px; overflow: hidden;
  -webkit-mask-image: none; mask-image: none; background: #fcfcfe;
  box-shadow: 0 4px 16px rgba(19, 19, 25, .11), 0 24px 72px rgba(19, 19, 25, .20);
}
.cm-split .hero__in { min-height: 0; padding-bottom: 72px; }
/* The intro zooms "Spark" in at 2.6×; keep it from widening the page on phones (npm run check, 390px, 2026-11-03) */
.cm-split { overflow-x: clip; }
@media (min-width: 960px) {
  .cm-split .hero__in {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto auto;
    align-content: center; align-items: center; column-gap: 56px;
    min-height: max(600px, calc(100svh - var(--hd))); padding: 40px var(--gx) 80px;
  }
  .cm-split .hero__h1 { grid-area: 1 / 1 / 2 / 2; margin-left: -6px; font-size: min(150px, 8.6vw); align-self: end; }
  .cm-split .hero__br { display: block; height: 0; overflow: hidden; }
  .cm-split .hero__jp { grid-area: 2 / 1 / 3 / 2; justify-self: start; align-self: start; width: auto; padding-top: 40px; text-align: left; }
  .cm-split .hero__bg { grid-area: 1 / 2 / 3 / 3; margin-top: 0; width: 105%; max-width: 588px; justify-self: end; border-radius: 24px; }
}

/* Process: three steps, each with 中島's illustration (2026-10-29) under the step label */
/* The step label as a small pill, the same rounded shape as the header's "Email us", on light grey (2026-11-03 中島) */
.proc__list--3 .proc__step {
  display: flex; align-items: center; width: fit-content; min-height: 30px; margin-top: 0; padding: 0 14px;
  border-radius: 999px; background: var(--sf); color: var(--ink); font-size: 13px; line-height: 1;
}
/* The cost note under each step (費用はかかりません・買い切り・月額): the same pill, but white with a thin grey line,
   so it reads apart from the filled step label (2026-11-03 中島) */
.proc__list--3 .proc__item p .mut {
  display: flex; align-items: center; width: fit-content; min-height: 30px; margin-top: 14px; padding: 0 14px;
  border: 1px solid var(--ln-pc); border-radius: 999px; background: #fff; font-size: 13px; line-height: 1;
}
.proc__img { display: block; width: 100%; max-width: 280px; height: auto; aspect-ratio: 1 / 1; margin: 8px auto 0; }
@media (min-width: 960px) {
  .proc__list--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .proc__list--3 .proc__item { min-height: 260px; }
  .proc__img { max-width: none; margin-top: 12px; }
  .proc__list--3 .proc__item h3 { margin-top: 16px; }
}

/* What we look at: two columns (online shops / inns and hotels) */
.look { display: grid; gap: 40px; margin-top: 48px; }
.look__h { font-size: 19px; font-weight: 700; line-height: 1.55; letter-spacing: .03em; }
.look__list { margin-top: 14px; }
.look__list li { padding: 14px 0 16px; font-size: 16px; line-height: 1.8; }
@media (min-width: 960px) {
  .look { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px; margin-top: 0; }
  .look__h { font-size: 22px; }
  .look__list li { font-size: 17px; }
}

/* Promise (the three Values) */
.vals { margin-top: 48px; }
.vals li { padding: 26px 0 30px; }
.vals h3 { font-size: 20px; font-weight: 700; line-height: 1.55; letter-spacing: .03em; }
.vals p { margin-top: 10px; font-size: 16px; line-height: 1.9; }
@media (min-width: 960px) {
  .vals { margin-top: 0; }
  .vals li { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 32px; padding: 32px 0 36px; }
  .vals h3 { font-size: 22px; }
  .vals p { margin-top: 0; font-size: 17px; line-height: 2; }
}

/* Space between blocks: one rule for every block on this site, the design system's .sec (104px / PC 176px)
   made 10% tighter: 94px / PC 158px above and below (2026-10-31 中島). The price heading and cards follow it too. */
.sec { padding: 94px var(--gx); }
.ct { padding-bottom: 101px; }
@media (min-width: 960px) {
  .sec { padding: 158px var(--gx); }
  .ct { padding-bottom: 166px; }
}

/* About: who runs it and who does the work (the one line of experience, 2026-10-28) */
.org { margin-top: 40px; border-top: 1px solid var(--ln); }
.org > div { display: grid; grid-template-columns: 4.5em minmax(0, 1fr); gap: 12px; padding: 14px 0 15px; border-bottom: 1px solid var(--ln); font-size: 15px; line-height: 1.7; }
.org dt { color: var(--mut); }
.org dd.en { letter-spacing: -.01em; word-break: break-all; }
@media (min-width: 960px) {
  .org { margin-top: 48px; border-top-color: var(--ln-pc); }
  .org > div { grid-template-columns: 6em minmax(0, 1fr); padding: 16px 0 17px; border-bottom-color: var(--ln-pc); font-size: 16px; }
}

/* FAQ: question and answer on ruled rows */
.faq__list { margin-top: 48px; }
.faq__list > div { padding: 26px 0 30px; }
.faq__list dt { font-size: 18px; font-weight: 700; line-height: 1.6; letter-spacing: .03em; }
.faq__list dd { margin-top: 10px; font-size: 16px; line-height: 1.9; }
@media (min-width: 960px) {
  .faq__list { margin-top: 0; }
  .faq__list > div { padding: 30px 0 34px; }
  .faq__list dt { font-size: 20px; }
  .faq__list dd { margin-top: 12px; font-size: 17px; line-height: 2; }
}

/* Price heading: closer to the cards below (2026-10-31 中島. pg-intro leaves 104px / PC 176px) */
#price.pg-intro { padding: 94px var(--gx) 40px; }
@media (min-width: 960px) {
  #price.pg-intro { padding: 158px var(--gx) 64px; }
}

/* Price: one card per kind of business, each saying who it is for */
.cp { padding: 0 var(--gx) 94px; display: grid; gap: 16px; }
.cp__card { border: 1px solid var(--ln-pc); border-radius: 20px; overflow: hidden; }
.cp__head { padding: 20px 22px; background: var(--sf); }
.cp__head h3 { font-size: 17px; font-weight: 700; letter-spacing: .04em; }
.cp__for { margin-top: 4px; font-size: 14px; line-height: 1.7; color: var(--mut); }
.cp__rows > div { padding: 20px 22px 22px; }
.cp__rows > div + div { border-top: 1px solid var(--ln); }
.cp__rows dd.note { margin-top: 6px; font-size: 14px; line-height: 1.7; color: var(--mut); }
.cp__rows .num { font-size: 52px; }
.cp__rows .per { font-size: 15px; font-weight: 700; margin-left: 2px; }
/* What the monthly fee includes: a ruled list, no bullets (design system: RuledList) */
.cp__inc { margin-top: 14px; border-top: 1px solid var(--ln); }
.cp__inc li { padding: 11px 0 12px; border-bottom: 1px solid var(--ln); font-size: 15px; line-height: 1.7; }
.cp__inc li:last-child { border-bottom: 0; padding-bottom: 0; }
/* A purple check at the head of each item, the purple of the header button and the headings' dot (2026-11-03 中島) */
.cp .cp__inc li { position: relative; padding-left: 28px; }
.cp__inc li::before {
  content: ""; position: absolute; left: 0; top: calc(11px + .85em - 8px); width: 16px; height: 16px; background: var(--pu);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2.5 8.5l3.5 3.5 7.5-8' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2.5 8.5l3.5 3.5 7.5-8' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
@media (min-width: 960px) {
  .cp__inc li::before { top: calc(12px + .85em - 8px); }
}
.cp__inc .mut { font-size: 14px; }
.cp__notes { margin-top: 8px; display: grid; gap: 6px; font-size: 15px; line-height: 1.8; color: var(--mut); }
@media (min-width: 960px) {
  .cp { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; padding: 0 var(--gx) 158px; }
  .cp__card { border-radius: 24px; }
  .cp__head { padding: 24px 32px; }
  .cp__head h3 { font-size: 18px; }
  .cp__for { font-size: 15px; }
  .cp__rows > div { padding: 26px 32px 28px; }
  .cp__rows .num { font-size: 60px; }
  .cp__inc { margin-top: 18px; }
  .cp__inc li { padding: 12px 0 13px; font-size: 16px; }
  .cp__notes { grid-column: 1 / -1; margin-top: 12px; }
}

/* Contact: the form (/contact/, Jicoo) comes first; the address stays as small text for those who prefer mail
   (2026-11-03 中島: an address on the page invites spam, so the form leads). Shown as text, not a mail link. */
.ct__alt { margin-top: 20px; font-size: 15px; line-height: 1.8; color: var(--mut); }
.ct__mail { font-family: var(--en); font-weight: 500; letter-spacing: -.01em; color: var(--ink); word-break: break-all; }
.after__block .ct__mail { display: block; margin-top: 10px; font-size: 18px; }
@media (min-width: 960px) {
  .ct__alt { font-size: 16px; }
  .after__block .ct__mail { font-size: 20px; }
}

/* Phones: "How it works" is longer than the Newday site's headings.
   At the design system's size it ran past a 390px screen in Safari (npm run check, 2026-10-28). */
@media (max-width: 959px) {
  #how-h .sh__en { font-size: min(72px, 17vw); }
}