:root {
  --paper:#f8f7f2; --white:#fff; --ink:#20292b; --muted:#697478;
  --blue:#314c59; --blue-dark:#343230; --sage:#79908a; --mist:#d9ebe7; --line:#d3d9d8; --warm: #d98252;
  --serif:"Yu Mincho","YuMincho","Hiragino Mincho ProN","Noto Serif JP",serif;
  --sans:"Hiragino Kaku Gothic ProN","Yu Gothic","YuGothic","Noto Sans JP",sans-serif;
}
*{box-sizing:border-box} html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:16px;line-height:1.8}
a{color:inherit;text-decoration:none} ::selection{background:var(--mist)}
a:focus-visible,summary:focus-visible{outline:2px solid var(--sage);outline-offset:5px}

.lp2026-header {
  position: absolute;
  z-index: 20;
  top: 0;
  left: 0;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 28px clamp(24px,4.5vw,76px);
}

.lp2026-logo {
  display: inline-flex;
  flex-direction: column;
  line-height: 1.15;
  letter-spacing: .08em;
}

.lp2026-logo span {
  font-size: 13px;
  font-weight: 700;
}

.lp2026-logo small {
  margin-top: 6px;
  color: var(--muted);
  font-size: 8px;
  letter-spacing: .22em;
}

.lp2026-nav {
  display: flex;
  align-items: center;
  gap: clamp(20px,2.7vw,44px);
  font-size: 12px;
  letter-spacing: .08em;
}

.lp2026-nav a {
  position: relative;
  color: inherit;
  text-decoration: none;
}

.lp2026-nav a:not(.lp2026-contact)::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -5px;
  width: 0;
  height: 1px;
  background: var(--ink);
  transition: width .3s;
}

.lp2026-nav a:hover::after,
.lp2026-nav a:focus-visible::after {
  width: 100%;
}

.lp2026-contact {
  padding: 11px 18px;
  border: 1px solid var(--blue);
  border-radius: 999px;
  transition: .3s;
}

.lp2026-contact:hover {
  background: var(--blue);
  color: #fff;
}

.hero{
  position:relative;
  min-height:100svh;
  padding:120px clamp(24px,7.5vw,128px) 80px;
  display:grid;
  grid-template-columns:minmax(340px,.88fr) minmax(390px,1.12fr);
  grid-template-rows:auto minmax(0,1fr);
  align-items:start;
  column-gap:clamp(42px,7vw,130px);
  row-gap:0;
  overflow:hidden;
}

.hero::before{content:"";position:absolute;width:38vw;height:38vw;right:-18vw;top:-18vw;border:1px solid var(--line);border-radius:50%;opacity:.65}
.eyebrow{margin:0 0 24px;color:var(--sage);font-size:10px;font-weight:700;letter-spacing:.22em;text-transform:uppercase}
.hero-copy{position:relative;z-index:3;grid-column:1;grid-row:1;padding-top:0;animation:reveal-up .9s .12s both}
.hero-heading{position:relative;z-index:3}
.hero h1{margin:0;font-family:var(--serif);font-size:clamp(42px,4.5vw,76px);font-weight:500;line-height:1.42;letter-spacing:.035em}
.hero-title-line{display:block;position:relative;width:max-content;white-space:nowrap;opacity:0;transform:translateY(18px);animation:title-line-in .72s cubic-bezier(.22,.72,.2,1) forwards}
.hero-title-line:nth-child(1){animation-delay:.22s}.hero-title-line:nth-child(2){animation-delay:.5s}.hero-title-line:nth-child(3){animation-delay:.78s}
.hero-title-highlight::after{content:"";position:absolute;left:0;bottom:.08em;width:100%;height:.32em;background:var(--mist);z-index:-1;transform:scaleX(0);transform-origin:left;animation:underline-in .8s 1.2s forwards}
.hero-lead{margin:38px 0 30px;color:#4f5c61;font-size:14px;line-height:2.1}
.text-link{display:inline-flex;gap:18px;align-items:center;padding-bottom:5px;border-bottom:1px solid var(--ink);font-size:12px;letter-spacing:.08em}.text-link span{transition:transform .3s}.text-link:hover span{transform:translate(4px,4px)}

.hero-concept {
  margin: -8px 0 28px;
  color: var(--muted);
  font: italic 11px/1.55 Georgia, serif;
  letter-spacing: .05em;
}

.focus-visual {
  position: relative;
  grid-column: 2;
  grid-row: 1 / 3;
  align-self: stretch;
  width: 100%;
  height: auto;
  min-height: min(74vh, 760px);
  animation: reveal-up .9s .35s both;
  isolation: isolate;
}

/* 背景と鮮明な画像を、同じ位置・同じ大きさに重ねる */
.focus-background,
.focus-panel {
  position: absolute;
  inset: 0 0 0 5%;
}

/* 下層のぼかした写真 */
.focus-background {
  overflow: hidden;
}

.focus-background::before {
  content: "";
  position: absolute;
  inset: -15px;
  background-image: url("https://mouse-webdesign.com/wp2025/wp-content/uploads/lp2026/images/hero-work.jpg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  filter: blur(10px);
}

.focus-background::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(20, 24, 26, .06);
}

/* 上層の鮮明な写真 */
.focus-panel {
  z-index: 2;
  background-image: url("https://mouse-webdesign.com/wp2025/wp-content/uploads/lp2026/images/hero-work.jpg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  opacity: 0;
  filter: saturate(.96) contrast(1.02);
  will-change: clip-path, opacity;
}

.focus-panel-main {
  animation: focus-circle-in 8.2s 1s
    cubic-bezier(.4, 0, .2, 1) both;
}

.hero-proof{
  position:relative;
  grid-column:1;
  grid-row:2;
  align-self:end;
  left:auto;
  right:auto;
  bottom:auto;
  width:100%;
  margin:40px 0 0;
  padding:14px 0;
  display:flex;
  align-items:center;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  color:#59666a;
  font-size:10px;
  letter-spacing:.06em;
}
.hero-proof span{padding-right:20px;margin-right:20px;border-right:1px solid var(--line);white-space:nowrap}
.hero-proof span:last-child{padding-right:0;margin-right:0;border-right:0}
.scroll-mark{position:absolute;right:-24px;bottom:0;writing-mode:vertical-rl;color:var(--muted);font-size:8px;letter-spacing:.22em}.scroll-mark::after{content:"";display:inline-block;width:1px;height:45px;margin-top:12px;background:var(--line);animation:scroll-pulse 1.7s infinite}


.fragments-section{min-height:150vh;position:relative;padding:16vh clamp(24px,8vw,135px);background:var(--blue-dark);color:#f7f7f3;overflow:hidden}
.fragments-section::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px);background-size:80px 80px}
.fragments-copy{position:relative;z-index:4;max-width:560px}.fragments-copy h2,.our-turn h2,.section-heading h2,.about h2,.contact h2{margin:0;font-family:var(--serif);font-weight:500;letter-spacing:.045em}
.fragments-copy h2{font-size:clamp(36px,4vw,62px);line-height:1.55}.fragments-copy>p:last-child{margin-top:36px;color:#c8d1d0;font-size:14px;line-height:2.15}
.fragment-stage{position:sticky;top:12vh;width:min(54vw,760px);aspect-ratio:1.34;margin:8vh 0 12vh auto}
.fragment{position:absolute;width:50%;height:50%;overflow:hidden;box-shadow:0 18px 45px rgba(0,0,0,.24);transition:1.25s cubic-bezier(.22,.72,.2,1)}
.fragment-photo{position:absolute;inset:0;background-color:#7a7f7e;background-image:url("https://mouse-webdesign.com/wp2025/wp-content/uploads/lp2026/images/hero-work2.jpg");background-repeat:no-repeat;background-size:200% 200%}

.fragment-a .fragment-photo {
  background-position: 0 0;
}

.fragment-b .fragment-photo {
  background-position: 100% 0;
}

.fragment-c .fragment-photo {
  background-position: 0 100%;
}

.fragment-d .fragment-photo {
  background-position: 100% 100%;
}

.fragment-a {
  left: 0;
  top: 0;
  --scatter: translate(-55px,-35px) rotate(-4deg);
  transform: var(--scatter);
}

.fragment-b {
  right: 0;
  top: 0;
  --scatter: translate(60px,-20px) rotate(3deg);
  transform: var(--scatter);
}

.fragment-c {
  left: 0;
  bottom: 0;
  --scatter: translate(-50px,50px) rotate(2deg);
  transform: var(--scatter);
}

.fragment-d {
  right: 0;
  bottom: 0;
  --scatter: translate(60px,45px) rotate(-3deg);
  transform: var(--scatter);
}

.fragment-label{position:absolute;z-index:5;color:rgba(255,255,255,.56);font-size:8px;letter-spacing:.22em;transition:.8s}.label-a{left:-7%;top:-14%}.label-b{right:-4%;top:-3%}.label-c{left:0;bottom:-13%}.label-d{right:1%;bottom:-8%}

.fragment-stage[data-visible="true"] .fragment {
  animation: fragment-gather 10s
    cubic-bezier(.22,.72,.2,1)
    infinite;
}

@keyframes fragment-gather {
  0%,
  100% {
    transform: var(--scatter);
  }

  35% {
    transform: translate(0,0) rotate(0deg);
  }

  65% {
    transform: translate(0,0) rotate(0deg);
  }
}

[data-visible=true] .fragment-label{opacity:.08}

.fragments-close{position:relative;z-index:4;max-width:760px;margin:0 0 0 auto;padding-top:28px;border-top:1px solid rgba(255,255,255,.2);font-family:var(--serif);font-size:clamp(18px,2vw,26px);letter-spacing:.07em}

.our-turn{padding:clamp(110px,15vw,220px) clamp(24px,9vw,150px);display:grid;grid-template-columns:minmax(160px,.42fr) 1fr;gap:7vw;background:var(--white)}
.section-index{margin:14px 0 0;color:var(--sage);font-size:10px;letter-spacing:.22em}.our-turn h2{font-size:clamp(42px,6vw,82px);line-height:1.4}
.our-turn div>p{max-width:620px;color:#566267;font-size:15px;line-height:2.2}.our-turn div>p:first-of-type{margin-top:55px}

.content-section{padding:clamp(95px,12vw,180px) clamp(24px,8vw,135px)}.section-heading{display:grid;grid-template-columns:.45fr 1fr;column-gap:6vw;align-items:start;margin-bottom:78px}
.section-heading .eyebrow{grid-row:1/3;margin-top:12px}.section-heading h2{font-size:clamp(34px,4vw,58px);line-height:1.5}.section-heading>p:last-child{max-width:570px;margin:26px 0 0;color:var(--muted);font-size:13px}
.concerns{background:var(--paper)}.concern-list{list-style:none;padding:0;margin:0 0 0 31%;border-top:1px solid var(--line)}
.concern-list li{display:grid;grid-template-columns:65px 1fr;align-items:center;min-height:90px;border-bottom:1px solid var(--line)}.concern-list li span{color:var(--sage);font:12px Georgia,serif}.concern-list li p{margin:0;font-family:var(--serif);font-size:clamp(16px,1.55vw,22px);letter-spacing:.05em}

.services{background:var(--blue);color:#fff}.section-heading.light>p{color:#c7d2d0}.service-grid{display:grid;grid-template-columns:repeat(2,1fr);margin-left:20%;border-top:1px solid rgba(255,255,255,.23);border-left:1px solid rgba(255,255,255,.23)}
.service-card{min-height:410px;padding:clamp(28px,4vw,58px);border-right:1px solid rgba(255,255,255,.23);border-bottom:1px solid rgba(255,255,255,.23)}.service-number{color:#b9c9c6;font:11px Georgia,serif}
.service-card h3{margin:80px 0 25px;font-family:var(--serif);font-size:clamp(21px,2vw,29px);font-weight:500;letter-spacing:.05em}.service-card>p{color:#d8dfde;font-size:13px;line-height:2}.service-tags{margin-top:30px!important;color:#b9c9c6!important;font-size:9px!important;letter-spacing:.06em}

.process{background:var(--white)}.process-list{list-style:none;padding:0;margin:0 0 0 20%;display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line)}
.process-list li{min-height:310px;padding:30px 26px;border-bottom:1px solid var(--line)}.process-list li:not(:last-child){border-right:1px solid var(--line)}.process-list span{color:var(--sage);font:11px Georgia,serif}
.process-list h3{margin:80px 0 22px;font-family:var(--serif);font-size:20px;font-weight:500}.process-list p{color:var(--muted);font-size:12px;line-height:1.9}

.cases{background:#e8ece9}.case-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;margin-left:20%;background:#bec8c5}.case-grid article{padding:clamp(35px,5vw,70px);background:#f7f7f3}
.case-type{color:var(--sage);font-size:11px;letter-spacing:.14em}.case-grid h3{margin:40px 0 55px;font-family:var(--serif);font-size:clamp(20px,2.2vw,30px);font-weight:500;line-height:1.7}
.case-grid dl{margin:0}.case-grid dl div{display:grid;grid-template-columns:70px 1fr;padding:18px 0;border-top:1px solid var(--line)}.case-grid dt{color:var(--sage);font-size:13px}.case-grid dd{margin:0;color:var(--muted);font-size:13px;line-height:1.9}

.about{padding:clamp(110px,15vw,220px) clamp(24px,10vw,170px);background:var(--paper);display:grid;grid-template-columns:.8fr 1.2fr;gap:10vw;align-items:center}

.about-mark {
  width: min(31vw, 420px);
  aspect-ratio: 1;
  border: 1px solid #f6723b;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: var(--blue);
}

.about-mark span {
  color: #f6723b;
  font: italic 120px/1 Georgia, serif;
}

.about-mark small {
  color: #f6723b;
  margin-top: 15px;
  font-size: 9px;
  letter-spacing: .2em;
  text-align: center;
}

.about h2{font-size:clamp(34px,4vw,56px);line-height:1.55}.about-copy>p:not(.eyebrow){max-width:660px;color:#566267;font-size:16px;line-height:1.8}.about-copy h2+p{margin-top:45px}
.office-info{display:flex;flex-wrap:wrap;gap:8px;margin-top:38px}.office-info span{padding:7px 12px;border:1px solid var(--line);border-radius:999px;color:var(--muted);font-size:12px}

.faq{background:var(--white)}.faq-list{margin-left:31%;border-top:1px solid var(--line)}.faq-list details{border-bottom:1px solid var(--line)}
.faq-list summary{position:relative;padding:28px 55px 28px 0;cursor:pointer;list-style:none;font-family:var(--serif);font-size:17px}.faq-list summary::-webkit-details-marker{display:none}.faq-list summary::after{content:"+";position:absolute;right:10px;top:24px;color:var(--sage);font:22px Georgia,serif}.faq-list details[open] summary::after{content:"−"}
.faq-list details p{max-width:700px;margin:-4px 0 28px;color:var(--muted);font-size:13px}

.contact{padding:clamp(110px,15vw,210px) 24px;text-align:center;background:var(--blue-dark);color:#fff}.contact h2{font-size:clamp(40px,6vw,74px);line-height:1.45}.contact>p:not(.eyebrow){margin:40px auto;color:#c7d1cf;font-size:13px;line-height:2}
.contact>a{display:inline-flex;align-items:center;justify-content:space-between;width:min(480px,90vw);padding:22px 25px;border:1px solid rgba(255,255,255,.45);font-family:var(--serif);font-size:15px;transition:.3s}.contact>a:hover{background:#fff;color:var(--blue-dark)}
footer {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: start;
  gap: 60px;
  padding: 55px clamp(24px,5vw,82px);
  background: var(--blue-dark);
  color: #d5dddb;
  border-top: 1px solid rgba(255,255,255,.15);
}
footer .site-logo small,footer p,footer>small{color:#96aaa6}footer p,footer>small{margin:0;font-size:11px;letter-spacing:.08em}

.js-ready [data-reveal]{opacity:0;transform:translateY(24px);transition:opacity .85s ease,transform .85s cubic-bezier(.22,.7,.2,1)}.js-ready [data-reveal][data-visible=true]{opacity:1;transform:translateY(0)}

@keyframes focus-circle-in {
  0% {
    opacity: 1;
    clip-path: circle(0% at 52% 42%);
  }

  15% {
    clip-path: circle(5% at 52% 42%);
  }

  35% {
    clip-path: circle(10% at 52% 42%);
  }

  55% {
    clip-path: circle(22% at 52% 42%);
  }

  75% {
    clip-path: circle(45% at 52% 42%);
  }

  100% {
    opacity: 1;
    clip-path: circle(85% at 52% 42%);
  }
}

@keyframes title-line-in{to{opacity:1;transform:translateY(0)}}@keyframes eyebrow-char-in{to{opacity:1;transform:translateY(0)}}@keyframes underline-in{to{transform:scaleX(1)}}@keyframes underline-vertical-in{to{transform:scaleY(1)}}@keyframes reveal-up{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}@keyframes scroll-pulse{0%,100%{transform:scaleY(.25);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}}

@media(max-width:900px){
  .lp2026-header nav a:not(.nav-contact){display:none}.hero{grid-template-columns:1fr;grid-template-rows:auto;padding-top:130px;padding-bottom:120px;row-gap:55px}.hero-copy,.focus-visual,.hero-proof{grid-column:1;grid-row:auto}.hero-copy{max-width:650px;padding-top:0}.focus-visual{align-self:auto;width:min(100%,620px);height:62vw;min-height:430px;margin-left:auto}.hero-proof{margin-top:0;flex-wrap:wrap;row-gap:8px}.scroll-mark{display:none}
  .fragments-section{min-height:auto;padding-top:120px;padding-bottom:120px}.fragment-stage{position:relative;top:auto;width:min(80vw,650px);margin-top:110px}
  .section-heading{grid-template-columns:.3fr 1fr}.concern-list,.faq-list{margin-left:20%}.service-grid,.case-grid,.process-list{margin-left:0}.about{grid-template-columns:.65fr 1.35fr;gap:6vw}.about-mark span{font-size:80px}
}
@media(max-width:640px){
  body{font-size:15px}.lp2026-header{padding:22px 20px}.lp2026-header nav{gap:0}.nav-contact{padding:8px 13px;font-size:10px}.site-logo span{font-size:11px}
  .hero{display:flex;flex-direction:column;min-height:auto;padding:112px 20px 100px}.hero-copy{display:contents}.hero-heading{order:1;display:flex;flex-direction:row-reverse;justify-content:flex-start;align-items:flex-start;gap:14px;width:100%;z-index:4}.hero-eyebrow{flex:none;margin:3px 0 0;writing-mode:vertical-rl;text-orientation:mixed;font-size:9px;line-height:1.55;letter-spacing:.16em}.js-ready .hero-eyebrow-char{display:inline-block;opacity:0;transform:translateY(-.45em);animation:eyebrow-char-in .38s var(--char-delay) cubic-bezier(.22,.72,.2,1) forwards}.hero h1{display:flex;flex:0 1 auto;flex-direction:row-reverse;justify-content:flex-start;align-items:flex-start;gap:.28em;width:auto;font-size:clamp(36px,10.5vw,47px);line-height:1}.hero-title-line{width:auto;writing-mode:vertical-rl;text-orientation:mixed}.hero-title-highlight::after{top:0;right:.08em;bottom:auto;left:auto;width:.32em;height:100%;transform:scaleY(0);transform-origin:top;animation-name:underline-vertical-in}.focus-visual{order:2;z-index:1;width:100%;height:116vw;min-height:410px;margin-top:-226px}.hero-lead{order:3;margin:30px 0}.hero-concept{order:4}.hero-copy .text-link{order:5;align-self:flex-start}.hero-proof{order:6}.pc-only{display:none}.focus-background,.focus-panel{inset:0}.focus-background::before{inset:0;filter:none}.focus-background::after,.focus-panel{display:none}
  .hero-proof{display:grid;gap:4px;margin-top:45px}.hero-proof span{padding:0;margin:0;border:0}
  .fragments-section{padding:100px 20px}.fragments-copy h2{font-size:34px}.fragments-copy>p:last-child br{display:none}.fragment-stage{width:88vw;margin:90px auto 100px}.fragment-a{transform:translate(-18px,-28px) rotate(-3deg)}.fragment-b{transform:translate(18px,-18px) rotate(3deg)}.fragment-c{transform:translate(-18px,27px) rotate(2deg)}.fragment-d{transform:translate(18px,25px) rotate(-2deg)}
  .our-turn{padding:100px 20px;grid-template-columns:1fr;gap:35px}.our-turn h2{font-size:43px}.our-turn div>p:first-of-type{margin-top:38px}
  .content-section{padding:95px 20px}.section-heading{display:block;margin-bottom:50px}.section-heading h2{font-size:34px}.concern-list,.faq-list{margin-left:0}.concern-list li{grid-template-columns:42px 1fr;min-height:82px}.concern-list li p{font-size:16px}
  .service-grid,.case-grid{grid-template-columns:1fr}.service-card{min-height:auto;padding:35px 24px 40px}.service-card h3{margin-top:48px}.process-list{grid-template-columns:1fr}.process-list li{min-height:auto;padding:28px 0;border-right:0!important}.process-list h3{margin:30px 0 14px}
  .about{padding:100px 20px;grid-template-columns:1fr}.about-mark{width:220px;margin:0 auto 45px}.about-mark span{font-size:74px}.about h2{font-size:34px}
  .contact{padding-left:20px;padding-right:20px}.contact h2{font-size:39px}.contact>p:not(.eyebrow) br{display:none}footer{grid-template-columns:1fr;align-items:start;gap:20px;padding:45px 20px}
}

/* スマートフォンでも円形の焦点アニメーションを表示 */
@media (max-width: 640px) {
  .focus-background::before {
    inset: -12px;
    filter: blur(8px);
  }

  .focus-background::after,
  .focus-panel {
    display: block;
  }
}

/* スマホの縦書き：先頭の括弧を上へ出す */
@media (max-width: 640px) {
  .hero-title-highlight {
    margin-block-start: 0;
    margin-inline-start: -0.5em;
  }
}
/* PC・タブレットの横書き：括弧を左へ出す */
@media (min-width: 641px) {
  .hero-title-highlight {
    margin-inline-start: -0.5em;
  }
}



.fragment-stage .fragment-label {
  transition-delay: .4s;
}

/* このセクションに入ると、背景に光が一度走る */
.our-turn {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.our-turn > * {
  position: relative;
  z-index: 1;
}

/* 左寄りの中心から伸びる針 */
.our-turn::before {
  content: "";
  position: absolute;
  z-index: 0;

  /* 回転の中心位置 */
  left: 23%;
  top: 50%;

  width: 110%;
  height: 2px;
  pointer-events: none;
  opacity: 0;

  background: linear-gradient(
    90deg,
    rgba(121, 144, 138, .65),
    rgba(121, 144, 138, .35) 35%,
    rgba(121, 144, 138, .12) 70%,
    transparent
  );

  box-shadow: 0 0 12px rgba(121, 144, 138, .15);

  /* 線の左端を軸に回す */
  transform-origin: 0 50%;
  transform: rotate(-90deg);
}

/* 画面に入ったら、ゆっくり一周 */
.our-turn[data-visible="true"]::before {
  animation: our-turn-radar 9s .5s linear infinite both;
}

@keyframes our-turn-radar {
  0% {
    transform: rotate(-90deg);
    opacity: 0;
  }

  8% {
    opacity: 1;
  }

  90% {
    opacity: 1;
  }

  100% {
    transform: rotate(270deg);
    opacity: 0;
  }
}

/* このセクションに入ると、背景の針がゆっくり一周する */
.our-turn-emphasis {
  position: relative;
  display: inline-block;
  isolation: isolate;
}

.our-turn-emphasis::after {
  content: "";
  position: absolute;
  z-index: -1;
  left: 0;
  bottom: .08em;
  width: 100%;
  height: .2em;
  background: var(--mist);
  transform: scaleX(0);
  transform-origin: left;
}

.our-turn[data-visible="true"] .our-turn-emphasis::after {
  animation: our-turn-mark 1.4s 1.5s
    cubic-bezier(.22, .72, .2, 1) both;
}

@keyframes our-turn-radar {
  from {
    transform: rotate(-90deg);
    opacity: 1;
  }

  to {
    transform: rotate(270deg);
    opacity: 1;
  }
}
/* 針と残光で、回転時間と開始時刻を統一 */
.our-turn {
  --radar-duration: 15s;
  --radar-delay: .5s;
}

.our-turn[data-visible="true"]::before {
  animation: our-turn-radar
    var(--radar-duration)
    var(--radar-delay)
    linear infinite both;
}

/* 針の後ろに続く、扇形の残光 */
.our-turn::after {
  content: "";
  position: absolute;
  z-index: 0;
  pointer-events: none;

  /* 針の回転中心に合わせる */
  left: 23%;
  top: calc(50% + 1px);

  width: 240vmax;
  height: 240vmax;
  border-radius: 50%;
  opacity: 0;

  background: conic-gradient(
    from 0deg,
    transparent 0deg,
    transparent 20deg,
    rgba(121, 144, 138, .02) 35deg,
    rgba(121, 144, 138, .07) 55deg,
    rgba(121, 144, 138, .16) 78deg,
    rgba(121, 144, 138, .23) 90deg,
    transparent 90deg,
    transparent 360deg
  );

  transform: translate(-50%, -50%) rotate(-90deg);
  transform-origin: center;
}

.our-turn[data-visible="true"]::after {
  animation: our-turn-radar-trail
    var(--radar-duration)
    var(--radar-delay)
    linear infinite both;
}

@keyframes our-turn-radar-trail {
  from {
    transform: translate(-50%, -50%) rotate(-90deg);
    opacity: 1;
  }

  to {
    transform: translate(-50%, -50%) rotate(270deg);
    opacity: 1;
  }
}

/* 30 YEARS：上から落ちて、少し弾んで着地 */
.about-mark-bounce {
  opacity: 0;
  transform: translateY(-100px) scaleX(.94) scaleY(1.06);
  transform-origin: center bottom;
  will-change: transform, opacity;
}

.about-mark-bounce.is-visible {
  animation:
    about-mark-drop 1.8s cubic-bezier(.22, .75, .25, 1) forwards,
    about-mark-idle 4.8s 1.8s ease-in-out infinite;
}

@keyframes about-mark-drop {
  0% {
    opacity: 0;
    transform: translateY(-100px) scaleX(.94) scaleY(1.06);
  }

  38% {
    opacity: 1;
    transform: translateY(8px) scaleX(1.06) scaleY(.94);
  }

  55% {
    transform: translateY(-18px) scaleX(.98) scaleY(1.02);
  }

  70% {
    transform: translateY(3px) scaleX(1.025) scaleY(.975);
  }

  83% {
    transform: translateY(-6px) scaleX(.995) scaleY(1.005);
  }

  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes about-mark-idle {
  0%, 100% {
    transform: translateY(0) scaleX(1) scaleY(1);
  }

  25% {
    transform: translateY(-5px) scaleX(.99) scaleY(1.01);
  }

  50% {
    transform: translateY(2px) scaleX(1.015) scaleY(.985);
  }

  75% {
    transform: translateY(-3px) scaleX(.995) scaleY(1.005);
  }
}

@media (max-width: 767px) {
  .about-mark-bounce {
    transform: translateY(-65px) scaleX(.94) scaleY(1.06);
  }

  @keyframes about-mark-drop {
    0% {
      opacity: 0;
      transform: translateY(-65px) scaleX(.94) scaleY(1.06);
    }

    38% {
      opacity: 1;
      transform: translateY(7px) scaleX(1.06) scaleY(.94);
    }

    55% {
      transform: translateY(-14px) scaleX(.98) scaleY(1.02);
    }

    70% {
      transform: translateY(3px) scaleX(1.025) scaleY(.975);
    }

    83% {
      transform: translateY(-5px) scaleX(.995) scaleY(1.005);
    }

    100% {
      opacity: 1;
      transform: translateY(0) scale(1);
    }
  }
}

.about-mark-trigger {
  position: relative;
}

.contact-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 100vh;
  padding: 0;
  background: var(--paper);
  color: var(--ink);
  text-align: left;
}

.contact-photo {
  min-height: 100%;
  overflow: hidden;
}

.contact-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.contact-content {
  padding: clamp(70px, 8vw, 140px);
}

.contact-content h2 {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(36px, 4vw, 58px);
  font-weight: 500;
}

.contact-lead {
  margin: 30px 0 50px;
  color: var(--muted);
  line-height: 2;
}

@media (max-width: 640px) {

  .contact-split {
    display: block;
    width: 100%;
    min-width: 0;
  }

  .contact-photo {
    width: 100%;
    min-width: 0;
    aspect-ratio: 16 / 10;
    overflow: hidden;
  }

  .contact-photo img {
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    object-position: center;
  }

  .contact-content {
    width: 100%;
    min-width: 0;
    padding: 64px 20px 80px;
  }

  .contact-form,
  .contact-form form {
    width: 100%;
    min-width: 0;
  }

  .contact-form input,
  .contact-form textarea,
  .contact-form select {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

}

.contact-form input,
.contact-form textarea,
.contact-form select,
.contact-form option,
.wpcf7 input,
.wpcf7 textarea,
.wpcf7 select,
.wpcf7 option {
  font-family: var(--sans) !important;
}