/* 仮ブランドカラー。正式なブランドガイド承認後にトークンのみ差し替える。 */
:root {
  --blue:#3154e8;
  --blue-light:#3d91f5;
  --ink:#1f2937;
  --body:#475569;
  --soft:#f5f8ff;
  --header-height:92px;
  --photo-position:50% 50%
}
* {
  box-sizing:border-box
}
html {
  scroll-behavior:smooth
}
body {
  margin:0;
  background:#fff;
  color:var(--ink);
  font-family:"Noto Sans JP","Yu Gothic","Hiragino Kaku Gothic ProN",Meiryo,sans-serif;
  -webkit-font-smoothing:antialiased
}
a {
  color:inherit;
  text-decoration:none
}
button {
  font:inherit
}
a:focus-visible,button:focus-visible {
  outline:3px solid var(--blue-light);
  outline-offset:5px
}
.container {
  width:min(1200px,calc(100% - clamp(48px,10vw,160px)));
  margin-inline:auto
}
.site-header {
  height:var(--header-height);
  background:#fff
}
.header-inner {
  height:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-bottom:1px solid #e9edf5
}
.wordmark {
  font-family:Arial,sans-serif;
  font-size:29px;
  letter-spacing:-1.2px;
  font-weight:750;
  color:var(--blue);
  display:flex;
  align-items:center;
  gap:20px
}
.wordmark span {
  font-size:10px;
  letter-spacing:.06em;
  font-weight:500;
  color:var(--body)
}
.preview-label {
  font:10px Arial,sans-serif;
  letter-spacing:.16em;
  color:#64748b
}
.hero {
  position:relative;
  padding-top:48px;
  overflow:clip
}
.hero-grid {
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.02fr);
  gap:clamp(36px,5vw,88px);
  align-items:center;
  min-height:min(760px,calc(100svh - var(--header-height) - 112px));
  padding-block:28px 62px
}
.eyebrow {
  font:600 12px/1.5 Arial,sans-serif;
  letter-spacing:.2em;
  color:var(--blue);
  margin:0 0 24px
}
h1 {
  font-size:clamp(40px,3.9vw,56px);
  line-height:1.3;
  letter-spacing:-.02em;
  font-weight:700;
  margin:0 0 24px
}
h1 span {
  display:block;
  white-space:nowrap
}
.lead {
  font-size:16px;
  line-height:1.9;
  max-width:470px;
  margin:0 0 32px;
  letter-spacing:.015em
}
.hero-actions {
  display:flex;
  gap:14px
}
.button {
  height:56px;
  display:inline-flex;
  justify-content:space-between;
  align-items:center;
  gap:24px;
  padding:0 23px;
  font-size:14px;
  font-weight:600;
  border-radius:5px;
  border:1px solid var(--blue);
  cursor:pointer;
  transition:background-color .2s,color .2s,box-shadow .2s;
  min-width:190px
}
.button-primary {
  background:var(--blue);
  color:#fff
}
.button-primary:hover {
  background:#2542c8;
  box-shadow:0 6px 20px #3154e81c
}
.button-secondary {
  background:#fff;
  color:var(--blue)
}
.button-secondary:hover {
  background:var(--soft)
}
.button span {
  display:inline-block;
  transition:transform .2s;
  font-size:19px;
  font-weight:400
}
.button:hover span {
  transform:translate(2px,-2px)
}
.hero-visual {
  position:relative;
  margin:0;
  isolation:isolate
}
.hero-visual img {
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:5/5.05;
  object-fit:cover;
  object-position:var(--photo-position);
  border-radius:24px
}
.image-backdrop {
  position:absolute;
  z-index:-1;
  inset:12% -5% -5% 10%;
  background:linear-gradient(135deg,#f5f8ff,#e4eeff);
  border-radius:45% 35% 28% 44%;
  transform:rotate(-7deg)
}
figcaption {
  position:absolute;
  bottom:15px;
  right:15px;
  background:#fffffff0;
  border-radius:3px;
  padding:6px 9px;
  color:#475569;
  font-size:10px
}
.hero-bottom {
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding-bottom:25px;
  gap:25px
}
.scroll-cue {
  display:flex;
  align-items:center;
  gap:17px;
  font:10px Arial,sans-serif;
  letter-spacing:.2em;
  color:var(--blue)
}
.scroll-cue i {
  width:72px;
  height:1px;
  background:#c9d5f8
}
#preview-note {
  font-size:10px;
  line-height:1.8;
  color:#64748b;
  margin:0
}
.preview-dialog {
  border:1px solid #e1e8f5;
  border-radius:18px;
  padding:36px;
  width:min(480px,calc(100% - 40px));
  color:var(--ink);
  box-shadow:0 20px 100px #1f293733
}
.preview-dialog::backdrop {
  background:#14213f55
}
.preview-dialog h2 {
  font-size:24px
}
.preview-dialog p:not(.eyebrow) {
  line-height:1.9;
  color:var(--body);
  font-size:15px
}
.preview-dialog .button {
  margin-top:15px;
  width:100%
}
/* JSが利用不可でも内容を隠さない。アニメーションは完了後に通常表示へ戻す。 */
@keyframes fade-up {
  from {
    opacity:0;
    transform:translateY(16px)
  }
  to {
    opacity:1;
    transform:translateY(0)
  }
}
@keyframes photo-in {
  from {
    opacity:0;
    transform:translateY(16px) scale(1.025)
  }
  to {
    opacity:1;
    transform:translateY(0) scale(1)
  }
}
@media(prefers-reduced-motion:no-preference) {
  .eyebrow.entrance {
    animation:fade-up .6s .15s both
  }
  h1.entrance {
    animation:fade-up .7s .25s both
  }
  .lead.entrance {
    animation:fade-up .65s .4s both
  }
  .hero-actions.entrance {
    animation:fade-up .65s .55s both
  }
  .hero-visual.entrance {
    animation:photo-in .9s .2s both
  }
}
@media(min-width:1024px) and (max-width:1250px) {
  h1 {
    font-size:clamp(36px,3.5vw,44px)
  }
  .button {
    min-width:0;
    flex:1;
    padding-inline:16px;
    gap:12px
  }
  .lead {
    font-size:15px
  }
}
@media(max-width:1023px) {
  :root {
    --header-height:80px
  }
  .container {
    width:calc(100% - 64px)
  }
  .hero {
    padding-top:36px
  }
  .hero-grid {
    grid-template-columns:1fr;
    gap:36px;
    min-height:0;
    padding-block:20px 40px
  }
  .hero-copy {
    max-width:650px
  }
  h1 {
    font-size:clamp(36px,5vw,52px)
  }
  .lead {
    max-width:570px
  }
  .hero-visual img {
    aspect-ratio:16/10
  }
  .image-backdrop {
    right:-2%
  }
  .hero-bottom {
    padding-bottom:24px
  }
}
@media(max-width:767px) {
  :root {
    --header-height:74px
  }
  .container {
    width:calc(100% - 40px)
  }
  .wordmark {
    font-size:25px;
    gap:12px
  }
  .wordmark span {
    font-size:9px
  }
  .preview-label {
    display:none
  }
  .hero {
    padding-top:0
  }
  .hero-grid {
    gap:28px;
    padding-block:46px 38px
  }
  .eyebrow {
    font-size:12px;
    margin-bottom:24px
  }
  h1 {
    font-size:clamp(29px,8vw,40px);
    line-height:1.4;
    margin-bottom:24px
  }
  h1 span {
    white-space:normal
  }
  .lead {
    font-size:14px;
    line-height:1.85;
    margin-bottom:32px
  }
  .hero-actions {
    flex-direction:column;
    gap:12px
  }
  .button {
    width:100%;
    height:50px;
    min-width:0;
    padding-inline:23px
  }
  .hero-visual img {
    aspect-ratio:4/3;
    border-radius:18px
  }
  .image-backdrop {
    inset:15% -2% -5% 12%
  }
  figcaption {
    font-size:9px;
    bottom:10px;
    right:10px
  }
  .scroll-cue {
    display:none
  }
  .hero-bottom {
    padding-bottom:20px
  }
  #preview-note {
    font-size:10px
  }
}
@media(max-width:359px) {
  .container {
    width:calc(100% - 32px)
  }
}
@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto
  }
  *,*::before,*::after {
    animation:none!important;
    transition:none!important
  }
}

/* PC改訂版：2026-11-01承認。大きな左写真＋左下に重なるコピー。
   モバイルの既存の縦積みは維持する。 */
@media (min-width:1024px) {
  .header-inner {
    width:calc(100% - 80px);
    max-width:none;
    border-bottom:0;
  }
  .hero {
    padding-top:0;
    background:linear-gradient(to bottom,#fff 0 64%,#f5f5f5 64% 100%);
  }
  .hero-grid {
    position:relative;
    isolation:isolate;
    width:100%;
    max-width:1920px;
    margin-inline:auto;
    grid-template-columns:minmax(0,1fr) minmax(260px,23%);
    grid-template-rows:minmax(600px,min(720px,calc(100svh - 160px)));
    gap:0;
    padding:0 0 80px;
    min-height:0;
    align-items:start;
  }
  .hero-copy {
    display:contents;
  }
  .hero-visual {
    grid-column:1;
    grid-row:1;
    height:100%;
    z-index:-1;
    overflow:hidden;
    border-radius:0 18px 18px 0;
  }
  .hero-visual img {
    height:100%;
    aspect-ratio:auto;
    border-radius:0;
    object-position:50% 47%;
  }
  .hero-visual::after {
    content:"";
    position:absolute;
    inset:0;
    pointer-events:none;
    background:linear-gradient(180deg,transparent 30%,#0b152bd9 100%);
  }
  .image-backdrop {
    display:none;
  }
  .hero-copy > .eyebrow {
    grid-column:2;
    grid-row:1;
    margin:65px 32px 0;
  }
  .hero-copy h1 {
    grid-column:1;
    grid-row:1;
    align-self:end;
    margin:0 32px 42px;
    font-size:clamp(48px,4.8vw,82px);
    line-height:1.32;
    letter-spacing:-.035em;
    color:#fff;
    text-shadow:0 2px 24px #0003;
  }
  .hero-copy .lead {
    grid-column:2;
    grid-row:1;
    margin:111px 32px 0;
    font-size:15px;
    line-height:2;
    max-width:none;
  }
  .hero-actions {
    grid-column:2;
    grid-row:1;
    align-self:end;
    flex-direction:column;
    margin:0 32px 48px;
    gap:12px;
  }
  .hero-actions .button {
    width:100%;
    min-width:0;
    flex:none;
    padding-inline:18px;
  }
  .hero-visual figcaption {
    z-index:1;
    top:18px;
    bottom:auto;
    right:18px;
  }
  .hero-bottom {
    padding-bottom:28px;
  }
  .hero-grid::after {
    content:"";
    position:absolute;
    bottom:0;
    left:0;
    width:17%;
    height:80px;
    background:#fff;
    border-radius:0 0 15px 0;
    z-index:-2;
  }
}

/* スマートフォン改訂：添付のモバイル参考に合わせた写真先行FV。
   PCの承認済み構成には影響しない。 */
@media (max-width:767px) {
  :root {
    --header-height:68px;
  }
  .header-inner {
    border-bottom:0;
  }
  .hero {
    background:#f5f5f5;
    padding-top:0;
  }
  .hero-grid {
    position:relative;
    isolation:isolate;
    width:100%;
    display:grid;
    grid-template-columns:minmax(0,1fr);
    grid-template-rows:clamp(220px,64vw,430px) auto auto;
    gap:0;
    padding:0 0 40px;
    align-items:start;
  }
  .hero-copy {
    display:contents;
  }
  .hero-visual {
    grid-column:1;
    grid-row:1;
    width:85%;
    height:100%;
    overflow:hidden;
    border-radius:0 12px 12px 0;
    z-index:-1;
  }
  .hero-visual img {
    width:100%;
    height:100%;
    aspect-ratio:auto;
    border-radius:0;
    object-position:50% 48%;
  }
  .hero-visual::after {
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(180deg,transparent 20%,#0b152be6 100%);
    pointer-events:none;
  }
  .image-backdrop {
    display:none;
  }
  .hero-copy > .eyebrow {
    grid-column:1;
    grid-row:1;
    justify-self:end;
    width:15%;
    padding:0 4px;
    margin:36px 0 0;
    font-size:8px;
    letter-spacing:.05em;
    color:var(--ink);
    text-align:center;
  }
  .hero-copy h1 {
    grid-column:1;
    grid-row:1;
    align-self:end;
    width:85%;
    padding:0 10px;
    margin:0 0 15px;
    font-size:clamp(24px,6.9vw,40px);
    line-height:1.4;
    letter-spacing:-.04em;
    color:#fff;
    text-shadow:0 2px 14px #0004;
  }
  .hero-copy h1 span {
    white-space:nowrap;
  }
  .hero-copy .lead {
    grid-column:1;
    grid-row:2;
    padding:0;
    margin:48px 20px 28px;
    max-width:none;
    font-size:14px;
    line-height:1.95;
  }
  .hero-actions {
    grid-column:1;
    grid-row:3;
    margin:0 20px;
  }
  .hero-visual figcaption {
    z-index:1;
    top:10px;
    bottom:auto;
    right:10px;
    font-size:8px;
    padding:4px 6px;
  }
  .hero-bottom {
    padding-bottom:24px;
  }
  .hero-grid::before {
    content:"";
    position:absolute;
    top:0;
    right:0;
    width:15%;
    height:clamp(220px,64vw,430px);
    background:#fff;
    z-index:-2;
  }
}
@media (max-width:359px) {
  .hero-copy .lead {
    margin-inline:16px;
  }
  .hero-actions {
    margin-inline:16px;
  }
}

/* 差し替え用動画レイヤー。写真の寸法・確定レイアウトを変えずに重ねる。 */
.hero-video {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:var(--photo-position);
  border-radius:24px;
  opacity:0;
  pointer-events:none;
}
.hero-visual.is-video-playing .hero-video {
  opacity:1;
}
@media (min-width:1024px) {
  .hero-video { object-position:50% 47%; border-radius:inherit; }
}
@media (max-width:767px) {
  .hero-video { object-position:50% 48%; border-radius:inherit; }
}