:root {
  --cream:#f7f5eb;
  --navy:#344676;
  --ink:#16385a;
  --red:#ed0012;
  --teal:#008da3
}
* {
  box-sizing:border-box
}
html {
  scroll-behavior:smooth;
  scroll-padding-top:24px
}
body {
  margin:0;
  background:var(--cream);
  color:#43433d;
  font-family:'Noto Sans JP','Hiragino Kaku Gothic ProN','Yu Gothic',Meiryo,sans-serif;
  font-weight:600;
  line-height:1.7
}
img {
  display:block;
  max-width:100%;
  height:auto
}
a {
  color:inherit
}
button,select {
  font:inherit
}
button,a,select {
  -webkit-tap-highlight-color:transparent
}
button,a {
  touch-action:manipulation
}
a:focus-visible,button:focus-visible,select:focus-visible {
  outline:3px solid #00acdb;
  outline-offset:5px
}
.container {
  width:calc(100% - 48px);
  max-width:1200px;
  margin-inline:auto
}
.skip {
  position:absolute;
  left:10px;
  top:-100px;
  z-index:10;
  background:white;
  padding:10px
}
.skip:focus {
  top:10px
}
.hero {
  height:64.55vw;
  max-height:1291px;
  position:relative;
  background:url('../img/ow_top_fv_pc.png') center center/cover no-repeat;
  color:var(--ink)
}
.hero-inner {
  width:62.5%;
  height:100%;
  position:relative;
  margin:auto
}
.brand {
  position:absolute;
  top:2.1%;
  left:2.5%;
  width:32%
}
.hero h1 {
  margin:0
}
.hero-title {
  position:absolute;
  top:12.5%;
  left:5.5%;
  width:50.5%
}
.hero-date {
  position:absolute;
  top:15%;
  right:3.8%;
  width:36%
}
.hero-photo {
  position:absolute;
  top:30%;
  right:0;
  width:39%
}
.hero-price {
  position:absolute;
  bottom:3.8%;
  left:10%;
  width:75%
}
.hero-nav {
  position:absolute;
  top:2%;
  right:19.6%;
  display:flex;
  gap:20px;
  width:32%
}
.pill {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  border:4px solid white;
  border-radius:100px;
  text-decoration:none;
  text-align:center;
  line-height:1.45;
  color:white;
  box-shadow:0 2px 5px #7779;
  padding:14px 22px;
  font-weight:900;
  font-size:clamp(12px,1.05vw,20px);
  transition:transform .25s,box-shadow .25s
}
.pill:hover {
  transform:translateY(-4px);
  box-shadow:0 6px 12px #0003
}
.pill em {
  font-style:normal;
  color:#fff600
}
.orange {
  background:#f49b00;
  flex:1
}
.red {
  background:var(--red);
  flex:1.3
}
.intro {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:32px;
  align-items:center;
  padding-block:125px
}
.intro video {
  width:100%;
  border-radius:45px
}
.intro p {
  font-size:clamp(16px,1.65vw,30px);
  font-weight:900;
  color:#181a51;
  line-height:1.9
}

@media(min-width:2000px) {
  .hero-nav {
  right:calc(50% - 608px);
  width:640px
}

}
@media(max-width:767px) {
  .container {
  width:calc(100% - 40px)
}
.hero {
  height:auto;
  max-height:none;
  background:none
}
.hero-inner {
  width:100%;
  height:144vw;
  background:url('../img/ow_top_fv_sp.png') center center/cover no-repeat
}
.brand {
  display:none
}
.hero-title {
  top:9.5%;
  left:2%;
  width:60%
}
.hero-date {
  top:4.6%;
  right:3.7%;
  width:40%
}
.hero-photo {
  top:20%;
  right:2%;
  width:40%
}
.hero-price {
  bottom:3%;
  left:5%;
  width:88%
}
.hero-nav {
  position:relative;
  top:auto;
  right:auto;
  width:100%;
  padding:20px 7%;
  gap:14px;
  background:var(--navy)
}
.pill {
  font-size:clamp(10px,2.3vw,17px);
  padding:10px 8px;
  border-width:3px
}
.intro {
  width:100%;
  display:flex;
  flex-direction:column;
  padding:0 0 45px;
  gap:16px
}
.intro video {
  border-radius:0
}
.intro p {
  text-align:center;
  font-size:clamp(15px,3.8vw,26px);
  padding:0 10px;
  line-height:1.8
}

}

.section-title {
  font-size:clamp(22px,2.4vw,44px);
  color:#165075;
  text-align:center;
  font-weight:900;
  line-height:1.45;
  margin:0 auto 64px;
  max-width:920px
}
.section-title>span {
  display:inline-block;
  padding:24px 20px;
  position:relative
}
.section-title>span:before,.section-title>span:after {
  content:'';
  position:absolute;
  left:0;
  right:0;
  height:14px;
  background:repeating-linear-gradient(112deg,transparent 0 6px,#006688 6px 10px,transparent 10px 15px,#354776 15px 19px,transparent 19px 25px)
}
.section-title>span:before {
  top:0
}
.section-title>span:after {
  bottom:0
}
.flow {
  padding-bottom:64px
}
.steps {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:20px
}
.step-number {
  margin:0;
  color:#171c61;
  font-size:26px;
  font-weight:900;
  line-height:1.2
}
.step-card {
  background:#fff;
  height:calc(100% - 32px)
}
.step-card>img {
  width:100%
}
.step h3 {
  background:var(--teal);
  color:white;
  font-size:19px;
  font-weight:500;
  position:relative;
  margin:0;
  line-height:1.5;
  padding:7px 52px 7px 10px;
  text-align:center;
  white-space:nowrap
}
.step .time {
  position:absolute;
  right:0;
  top:50%;
  transform:translateY(-50%);
  width:64px
}
.step-card>p {
  padding:18px 20px;
  margin:0;
  font-size:17px;
  color:#222;
  font-weight:500;
  line-height:1.65
}
.flow-note {
  text-align:center;
  color:#19194a;
  font-size:24px;
  margin:40px 0 0
}
.campaign {
  background:var(--navy);
  color:white;
  padding:115px 0 64px
}
.campaign .section-title {
  color:white;
  max-width:1100px
}
.campaign .section-title>span:before,.campaign .section-title>span:after {
  background:repeating-linear-gradient(112deg,transparent 0 12px,#aee7ff 12px 18px,transparent 18px 26px,#168eac 26px 31px,transparent 31px 40px)
}
.offer {
  display:grid;
  grid-template-columns:42% 56%;
  gap:2%;
  width:92%;
  margin:auto;
  align-items:start
}
.campaign-visual {
  position:relative;
  border-radius:30px;
  overflow:hidden
}
.campaign-visual>img {
  width:100%;
  height:580px;
  object-fit:cover
}
.campaign-visual p {
  position:absolute;
  top:12%;
  width:100%;
  text-align:center;
  color:#131648;
  font-size:20px;
  line-height:1.7;
  transform:rotate(-5deg)
}
.offer-price>img {
  width:100%
}
.offer-price p {
  font-size:18px;
  font-weight:400;
  text-align:center;
  margin:15px -20px 0
}
.terms {
  width:91%;
  margin:65px auto 85px;
  border-block:2px solid #fff;
  padding:24px 0;
  font-size:18px;
  font-weight:400;
  line-height:1.8
}
.terms p {
  margin:0
}
.booking {
  background:white;
  color:#111;
  scroll-margin-top:30px
}
.booking h3 {
  background:#da4939;
  color:white;
  text-align:center;
  font-size:28px;
  line-height:1.5;
  margin:0;
  padding:19px 16px
}
.booking h3 strong {
  color:#ffff00
}
.booking-body {
  display:grid;
  grid-template-columns:36% 54%;
  gap:7%;
  align-items:center;
  padding:42px 6%
}
.booking-body>img {
  width:100%
}
.booking-form {
  text-align:center;
  font-size:18px;
  font-weight:500
}
.booking-form p {
  margin:0 0 10px
}
.booking-form select {
  width:100%;
  text-align:center;
  background:#fff;
  border:1px solid #666;
  border-radius:14px;
  min-height:70px;
  padding:10px 30px 10px 12px;
  color:#111;
  cursor:pointer
}
.booking-form .pill {
  margin:30px auto 0;
  min-height:76px;
  padding-inline:30px;
  font-size:17px;
  cursor:pointer
}
.skillup {
  text-align:center;
  font-size:28px;
  font-weight:500;
  line-height:1.8;
  margin:105px 0 0
}
.skillup a {
  text-underline-offset:5px
}
.course {
  padding-top:145px
}
.course .section-title {
  margin-bottom:40px
}
.course-video {
  display:block;
  padding:0;
  border:0;
  width:100%;
  background:none;
  cursor:pointer
}
.course-video img {
  width:100%
}
.course-video:hover {
  filter:brightness(1.04)
}
.video-frame {
  border:0;
  aspect-ratio:16/9;
  width:100%;
  display:block
}
.about {
  padding-top:155px
}
.about .section-title {
  max-width:1050px
}
.large-copy {
  text-align:center;
  font-size:clamp(22px,2.45vw,44px);
  line-height:1.5;
  font-weight:900;
  margin:55px 0
}
.achievements {
  width:80%;
  margin:65px auto 90px
}
.assurance {
  margin-bottom:30px
}
.slide-track {
  display:flex;
  gap:30px;
  overflow-x:auto;
  scrollbar-width:none;
  scroll-snap-type:x mandatory;
  overscroll-behavior-x:contain
}
.slide-track::-webkit-scrollbar {
  display:none
}
.slide {
  flex:0 0 calc((100% - 90px)/4);
  scroll-snap-align:start
}
.slide img {
  width:100%;
  aspect-ratio:1.48;
  object-fit:cover
}



.event-copy {
  margin:65px 0 85px
}
.events {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:34px 58px;
  padding:0 32px
}
.events figure {
  min-width:0;
  margin:0;
  text-align:center
}
.events img {
  width:100%;
  height:auto;
  aspect-ratio:1;
  object-fit:contain
}
.events figcaption {
  font-size:21px;
  white-space:nowrap;
  margin-top:12px
}
.etc {
  display:grid;
  place-items:center;
  font-size:32px;
  font-weight:900
}
.beach-facilities {
  margin-top:110px;
}
.beach-facilities > .large-copy {
  margin:0 0 60px;
}
.beach-grid {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:48px;
  width:94%;
  margin-inline:auto;
}
.beach-card {
  display:flex;
  flex-direction:column;
  overflow:hidden;
  border-radius:40px;
  background:#fff;
  color:#000;
  text-decoration:none;
}
.beach-photo {
  width:100%;
  height:auto;
}
.beach-card-body {
  display:flex;
  flex:1;
  flex-direction:column;
  align-items:center;
  padding:24px 7% 32px;
}
.beach-name {
  width:90%;
  margin:0 0 24px;
}
.beach-name img,
.beach-details {
  width:100%;
  height:auto;
}
.beach-link {
  margin-top:auto;
  padding-top:32px;
  font-size:clamp(18px,1.8vw,26px);
  font-weight:900;
}
.beach-card:hover .beach-link,
.beach-card:focus-visible .beach-link {
  color:#006da8;
  text-decoration:underline;
  text-underline-offset:5px;
}
@media (max-width:767px) {
  .beach-facilities { margin-top:60px; }
  .beach-facilities > .large-copy {
    margin-bottom:30px;
    font-size:clamp(18px,4.8vw,32px);
  }
  .beach-grid {
    grid-template-columns:minmax(0,1fr);
    max-width:480px;
    gap:28px;
  }
  .beach-card { border-radius:28px; }
  .beach-card-body { padding-block:20px 26px; }
  .beach-name { margin-bottom:20px; }
  .beach-link { padding-top:26px; }
}
.worries {
  margin:85px 0 100px
}
.points {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:24px
}
.points img {
  width:100%
}
.start-copy {
  margin:70px 0
}
.stores {
  padding:10px 0 120px
}
.shop-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:55px 30px
}
.shop {
  background:#fff;
  color:var(--ink);
  padding-bottom:20px
}
.shop>img {
  width:100%
}
.shop h3 {
  font-size:23px;
  text-align:center;
  line-height:1.4;
  margin:10px 0
}
.shop-links {
  display:flex;
  gap:12px;
  padding:0 12px
}
.shop-links a {
  flex:1;
  text-align:center;
  text-decoration:none;
  color:white;
  background:var(--navy);
  border-radius:14px;
  font-size:18px;
  line-height:1.4;
  padding:10px 4px;
  transition:transform .2s
}
.shop-links a+a {
  background:var(--red)
}
.shop-links a:hover {
  transform:translateY(-3px)
}
.stores .booking {
  margin-top:110px;
  box-shadow:1px 3px 8px #3336
}
.okinawa {
  border:4px solid var(--navy);
  border-radius:55px;
  margin-top:110px;
  padding:38px;
  color:var(--ink)
}
.okinawa>p {
  font-size:20px;
  text-align:center;
  margin:0 0 25px;
  line-height:1.6
}
.okinawa-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:20px
}
.okinawa-grid a {
  text-decoration:none
}
.okinawa h3 {
  text-align:center;
  font-size:23px;
  margin:14px 0 0
}
footer {
  background:#e2e2e2;
  padding:100px 24px
}
footer img {
  width:510px;
  margin:auto
}
.sr-only {
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0
}
.motion .reveal {
  opacity:0;
  transform:translateY(28px);
  transition:opacity .85s ease,transform .85s cubic-bezier(.2,.7,.3,1)
}
.motion .reveal.is-visible {
  opacity:1;
  transform:none
}
dialog {
  border:0;
  border-radius:16px;
  max-width:480px;
  width:calc(100% - 40px);
  padding:45px 28px 28px;
  color:#16385a;
  box-shadow:0 15px 60px #0003
}
dialog::backdrop {
  background:#101b3db0
}
.dialog-close {
  position:absolute;
  right:12px;
  top:5px;
  font-size:30px;
  border:0;
  background:none;
  cursor:pointer
}
.dialog-ok {
  display:block;
  margin:20px auto 0;
  background:var(--navy);
  color:white;
  padding:10px 30px;
  border:0;
  border-radius:20px;
  cursor:pointer
}

@media(min-width:768px) and (max-width:1250px) {
  .container {
  max-width:900px
}
.intro {
  padding-block:85px
}
.section-title {
  font-size:28px;
  margin-bottom:40px
}
.step-number {
  font-size:19px
}
.step h3 {
  font-size:14px;
  padding-right:40px
}
.step .time {
  width:48px
}
.step-card>p {
  font-size:14px;
  padding:15px
}
.flow-note {
  font-size:18px
}
.campaign-visual>img {
  height:440px
}
.campaign-visual p {
  font-size:16px
}
.offer-price p,.terms {
  font-size:14px
}
.booking h3 {
  font-size:22px
}
.booking-form {
  font-size:15px
}
.booking-form select {
  min-height:55px
}
.booking-form .pill {
  font-size:14px;
  min-height:60px
}
.skillup {
  font-size:21px
}
.large-copy {
  font-size:30px
}
.events figcaption {
  font-size:16px
}
.shop h3,.okinawa h3 {
  font-size:18px
}
.shop-links a {
  font-size:14px
}
.okinawa>p {
  font-size:16px
}

}

@media(max-width:767px) {
  .section-title {
  font-size:clamp(18px,4.8vw,32px);
  margin-bottom:45px;
  width:calc(100% - 30px);
  line-height:1.55
}
.section-title>span {
  padding:19px 0;
  width:100%
}
.section-title>span:before,.section-title>span:after {
  height:8px;
  background-size:auto;
  background-repeat:no-repeat
}
.flow>.section-title {
  width:100%
}
.steps {
  grid-template-columns:repeat(2,1fr);
  gap:30px 22px
}
.step-number {
  font-size:clamp(18px,4.4vw,28px)
}
.step-card {
  height:calc(100% - 25px)
}
.step h3 {
  font-size:clamp(11px,2.8vw,19px);
  padding:4px 30px 4px 3px
}
.step .time {
  width:22%
}
.step-card>p {
  font-size:clamp(12px,2.9vw,20px);
  padding:13px 12px;
  line-height:1.7
}
.flow {
  padding-bottom:85px
}
.flow-note {
  display:none
}
.campaign {
  padding:70px 0 65px
}
.campaign .container {
  width:calc(100% - 30px)
}
.campaign .section-title {
  width:100%;
  font-size:clamp(22px,5.5vw,37px);
  margin-bottom:32px
}
.campaign .section-title>span {
  padding-block:23px
}
.mobile-break {
  display:block
}
.offer {
  display:flex;
  flex-direction:column;
  width:94%;
  gap:10px
}
.campaign-visual {
  width:100%;
  border-radius:20px
}
.campaign-visual>img {
  height:auto;
  aspect-ratio:1.73;
  object-position:center 72%
}
.campaign-visual p {
  display:none
}
.offer-price {
  width:100%
}
.offer-price p {
  margin:15px 0 0;
  font-size:clamp(10px,2.6vw,17px)
}
.terms {
  width:100%;
  margin:45px auto 55px;
  padding-block:18px;
  font-size:clamp(10px,2.35vw,16px);
  line-height:2
}
.booking h3 {
  font-size:clamp(18px,4.5vw,29px);
  padding:20px 12px;
  line-height:1.45
}
.booking h3 strong {
  display:block
}
.booking-body {
  display:flex;
  flex-direction:column;
  gap:20px;
  padding:10px 10% 25px
}
.booking-body>img {
  width:70%
}
.booking-form {
  width:100%;
  font-size:clamp(13px,3vw,20px)
}
.booking-form select {
  min-height:50px;
  border-radius:9px;
  padding:10px 18px 10px 8px;
  margin-top:10px
}
.booking-form .pill {
  font-size:clamp(12px,2.9vw,20px);
  min-height:60px;
  padding:14px 22px;
  margin-top:26px
}
.skillup {
  font-size:clamp(14px,3.2vw,22px);
  line-height:1.8;
  margin:55px 0 0
}
.course {
  padding-top:65px;
  width:100%
}
.course .section-title {
  margin-bottom:35px
}
.about {
  padding-top:75px
}
.about .section-title {
  font-size:clamp(18px,4.7vw,32px);
  margin-bottom:45px
}
.large-copy {
  font-size:clamp(20px,4.8vw,33px);
  margin:42px 0
}
.achievements {
  width:100%;
  margin:55px auto 40px
}
.about>.container {
  width:calc(100% - 30px)
}
.assurance {
  font-size:clamp(18px,4.8vw,32px);
  margin-bottom:26px;
  white-space:nowrap
}
.slide-track {
  gap:20px
}
.slide {
  flex-basis:calc((100% - 30px)/2)
}


.event-copy {
  margin:40px 0
}
.events {
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:25px 24px;
  padding:0 20px
}
.events figcaption {
  font-size:clamp(10px,2.4vw,16px);
  margin-top:7px
}
.etc {
  font-size:20px
}
.worries {
  font-size:clamp(16px,3.8vw,26px);
  margin:55px 0 40px
}
.points {
  grid-template-columns:1fr;
  gap:32px;
  padding:0 10px
}
.start-copy {
  max-width:230px;
  margin:50px auto;
  font-size:21px
}
.stores {
  padding:10px 0 65px;
  width:calc(100% - 30px)
}
.stores .section-title {
  font-size:clamp(17px,4.3vw,29px);
  width:100%;
  margin-bottom:45px
}
.shop-grid {
  grid-template-columns:repeat(2,1fr);
  gap:30px 20px
}
.shop {
  padding-bottom:10px
}
.shop h3 {
  font-size:clamp(13px,3.1vw,21px);
  margin:7px 0
}
.shop-links {
  gap:6px;
  padding:0 5px
}
.shop-links a {
  font-size:clamp(10px,2.25vw,15px);
  padding:5px 2px;
  border-radius:8px
}
.stores .booking {
  margin-top:65px
}
.okinawa {
  border-width:2px;
  border-radius:30px;
  margin-top:45px;
  padding:22px 12px
}
.okinawa>p {
  font-size:clamp(11px,2.7vw,18px);
  margin-bottom:18px
}
.okinawa>p br {
  display:none
}
.okinawa-grid {
  gap:8px
}
.okinawa h3 {
  font-size:clamp(10px,2.5vw,17px);
  margin-top:8px
}
footer {
  padding:65px 24px
}
footer img {
  width:65%;
  max-width:360px
}

}

@media(prefers-reduced-motion:reduce) {
  html {
  scroll-behavior:auto
}
.motion .reveal {
  opacity:1;
  transform:none;
  transition:none
}
*,*:before,*:after {
  animation:none!important;
  transition:none!important
}

}

@keyframes soft-in {
  from {
  opacity:0;
  transform:translateY(16px)
}
to {
  opacity:1;
  transform:translateY(0)
}

}

@media(prefers-reduced-motion:no-preference) {
  .hero-title {
  animation:soft-in .9s both
}
.hero-photo {
  animation:soft-in 1s .15s both
}
.hero-price {
  animation:soft-in 1s .3s both
}
.hero-nav .pill {
  animation:soft-in .8s .45s both
}

}

@media(max-width:359px) {
  .steps {
  gap:25px 14px
}
.step h3 {
  white-space:normal;
  min-height:38px;
  display:flex;
  align-items:center;
  justify-content:center
}
.step-card>p {
  padding:10px
}
.shop-links {
  gap:4px
}
.shop-links a {
  font-size:10px
}
.assurance {
  font-size:16px
}
.hero-nav {
  padding-inline:4%
}

}


/* 支給画像のCTA：文字の折り返しを防ぎ、縦横比を保持する。 */
.hero-nav { align-items: center; }
.hero-nav .image-button {
  display: block;
  min-width: 0;
  line-height: 0;
  border: 0;
  padding: 0;
  background: transparent;
  transition: transform .25s ease, filter .25s ease;
}
.hero-nav .image-button-skillup { flex: 569 1 0; }
.hero-nav .image-button-reservation { flex: 674 1 0; }
.hero-nav .image-button img { width: 100%; height: auto; }
.hero-nav .image-button:hover { transform: translateY(-4px); filter: brightness(1.04); }
@media (prefers-reduced-motion: no-preference) {
  .hero-nav .image-button { animation: soft-in .8s .45s backwards; }
}

/* シームレスな写真ループ。自動移動と手動スワイプを併用。 */
.slide-track { scroll-snap-type: none; scroll-behavior: auto; overflow-anchor: none; }

/* スマートフォン：キャンペーンボタンを画面下部に常時表示。 */
@media (max-width: 767px) {
  body {
    padding-bottom: calc(60px + 17vw + env(safe-area-inset-bottom, 0px));
  }
  .hero-nav {
    position: fixed;
    inset: auto 0 0;
    z-index: 100;
    width: 100%;
    padding: 12px 5% calc(12px + env(safe-area-inset-bottom, 0px));
    gap: 12px;
    background: var(--navy);
    box-shadow: 0 -3px 12px #0002;
  }
}

/* SP見出し：小さな背景タイルで斜線を分断せず、全幅で連続描画。 */
@media (max-width: 767px) {
  .section-title > span::before,
  .section-title > span::after {
    background-image: repeating-linear-gradient(112deg,
      transparent 0 4px, #006688 4px 7px,
      transparent 7px 11px, #354776 11px 14px,
      transparent 14px 18px);
    background-size: 100% 100%;
    background-repeat: no-repeat;
  }
  .campaign .section-title > span::before,
  .campaign .section-title > span::after {
    background-image: repeating-linear-gradient(112deg,
      transparent 0 5px, #aee7ff 5px 8px,
      transparent 8px 13px, #168eac 13px 16px,
      transparent 16px 21px);
  }
}

/* メインビジュアルの重なり順：タイトルを写真より手前に表示。 */
.hero-photo { z-index: 1; }
.hero-title { z-index: 2; }
.hero-date, .hero-price, .brand { z-index: 3; }
@media (max-width: 767px) {
  .hero .brand {
    display: block;
    top: 2%;
    left: 3%;
    width: 35%;
  }
  .hero-title { top: 12%; }
  .hero-date { top: 8%; }
  .hero-photo {
    top: 23%;
    right: 1%;
    width: 42%;
  }
}

/* 参考ページの問い合わせボタンと同じ1.8秒周期・最大1.04倍の鼓動。 */
@keyframes reservation-pulse {
  0%, 100% {
    transform: scale(1);
    filter: drop-shadow(0 3px 6px rgba(212, 65, 20, .3));
  }
  50% {
    transform: scale(1.04);
    filter: drop-shadow(0 5px 10px rgba(212, 65, 20, .5));
  }
}
@media (prefers-reduced-motion: no-preference) {
  .hero-nav .image-button-reservation img {
    transform-origin: center;
    animation: reservation-pulse 1.8s ease-in-out infinite;
  }
}

/* フッター：固定ボタン用の末尾余白も灰色のフッター内に含める。 */
@media (max-width: 767px) {
  body { padding-bottom: 0; }
  footer {
    padding-bottom: calc(125px + 17vw + env(safe-area-inset-bottom, 0px));
  }
}
@media (min-width: 768px) {
  footer img { width: 300px; }
}

/* 差し替えたキャンペーン写真をトリミングせずに表示。 */
.campaign-visual > img {
  width: 100%;
  height: auto;
  aspect-ratio: auto;
  object-fit: contain;
  object-position: center;
}

/* PC：左右の列幅42:56と価格画像1239×1216から、写真の高さを揃える。 */
@media (min-width: 768px) {
  .campaign-visual > img {
    aspect-ratio: calc(1239 * 42 / 56) / 1216;
    object-fit: cover;
  }
}

/* 少しスクロールしてから表示するページトップボタン。 */
.page-top {
  position: fixed;
  right: 20px;
  bottom: 24px;
  width: 48px;
  z-index: 101;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(10px);
  transition: opacity .4s ease, transform .4s ease, visibility .4s;
}
.page-top img { width: 100%; height: auto; }
.page-top.is-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}
@media (max-width: 767px) {
  .page-top {
    width: 42px;
    right: 12px;
    bottom: calc(var(--mobile-cta-height, 100px) + 10px);
  }
}
@media (prefers-reduced-motion: reduce) {
  .page-top { transition: none; transform: none; }
}

/* SP背景画像（1537×2219）の下端70pxは透明なので、写真部分だけを表示する。 */
@media (max-width: 767px) {
  html { background-color: #ffffff; }
  .hero { background-color: #ffffff; }
  .hero-inner {
    height: calc(100vw * 2149 / 1537);
    background-size: 100% auto;
    background-position: center top;
  }
}

/* iPhoneの上部バーがbody背景を参照しても空色になるようにする。 */
@media (max-width: 767px) {
  html, body { background-color: var(--browser-top-color, #ffffff); }
  main { background-color: var(--cream); }
}