@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;600;700&family=Noto+Serif+JP:wght@600;700;800&display=swap");

:root {
  --cream: #fbf5ec;
  --green: #126145;
  --deep-green: #003c20;
  --gold: #b38721;
  --brown: #704b32;
  --line: #dec598;
  --table-muted: #f4f4f4;
  --table-border: #e4dacb;
  --table-radius: 18px;
  --date-font-size: clamp(20px, 2.083vw, 24px);
  --serif: "Noto Serif JP","Hiragino Mincho ProN","Yu Mincho",serif;
  --sans: "Noto Sans JP","Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif
}

* {
  box-sizing: border-box
}

body {
  margin: 0;
  background-color: #ffffff;
  background-image: linear-gradient(
    to right,
    rgba(246, 235, 221, 0.6) 0%,
    #fefaf3 50%,
    rgba(246, 235, 221, 0.6) 100%
  );
  color: var(--brown);
  font-family: var(--serif);
  line-height: 1.8
}

img {
  max-width: 100%;
  height: auto;
  display: block
}

h1,h2,h3,p,dl,dd {
  margin: 0
}

a {
  color: inherit
}

.container {
  width: min(73%,960px);
  margin-inline: auto
}

.hero {
  position: relative;
  width: 100%;
  max-width: 1920px;
  margin: auto;
  aspect-ratio: 1920/1106;
  isolation: isolate
}

.hero-photo {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: fill;
  z-index: -1
}

.hero-content {
  padding-top: 3.125%;
  text-align: center
}

.hero-logo {
  width: 19.74%;
  margin: auto
}

h1 {
  width: 70.16%;
  margin: 2.65% auto 0;
  line-height: 0
}

.route {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5.8%;
  width: 44.4%;
  margin: 0.7% auto 0
}

.route img:nth-child(1) {
  width: 27.15%
}

.route img:nth-child(2) {
  width: 9.1%
}

.route img:nth-child(3) {
  width: 24%
}

.route img:nth-child(4) {
  width: 6.5%
}

main,footer {
  position: relative
}

.page-body::before,.page-body::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: min(22%,300px);
  background: url("images/bg_pattern_continuous.png") top right/100% auto repeat-y;
  opacity: .4;
  pointer-events: none;
  z-index: -1
}

.page-body::before {
  left: 0;
  transform: scaleX(-1)
}

.page-body::after {
  right: 0
}

main {
  isolation: isolate
}

.intro {
  text-align: center;
  padding: 0 20px 34px;
  margin-top: -15px;
  position: relative
}

.delhi {
  width: 345px;
  margin: 0 auto 5px
}

.tagline {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 14px;
  font-family: var(--sans);
  font-size: 18px;
  letter-spacing: .28em;
  color: #c38b38
}

.tagline::before,.tagline::after {
  content: "";
  width: 50px;
  height: 1px;
  background: var(--line)
}

.intro-copy {
  font-size: 20px;
  font-weight: 600;
  line-height: 1.9;
  margin-top: 28px
}

.intro-copy span {
  display: block
}

.campaign {
  border: 1px solid var(--gold);
  border-radius: 22px;
  background: #fdf9f3;
  padding: 26px 7% 32px;
  text-align: center
}

.campaign h2 {
  font-size: clamp(30px,3.6vw,48px);
  color: var(--deep-green);
  font-weight: 800;
  line-height: 1.5
}

.campaign-subtitle {
  font-size: 19px;
  margin-top: 8px;
  letter-spacing: .04em;
  font-weight: 600
}

.offers {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin-top: 32px;
  gap: 0
}

.offer {
  min-width: 0
}

.offer+.offer {
  border-left: 1px solid var(--line)
}

.offer h3 {
  font-size: 23px;
  letter-spacing: .08em;
  line-height: 1.5
}

.offer-lead {
  font-size: 14px;
  letter-spacing: .07em;
  margin-top: 9px;
  white-space: nowrap
}

.offer-art {
  width: 100%;
  margin: 0 auto;
  max-width: 320px
}

.offer-detail {
  font-size: 15px;
  letter-spacing: .08em;
  font-weight: 600
}

.offer:nth-child(2) {
  color: var(--deep-green)
}

.offer:nth-child(2) h3 {
  color: var(--brown)
}

.dates {
  border-top: 1px solid var(--line);
  margin-top: 22px;
  padding-top: 25px;
  text-align: left;
  font-size: var(--date-font-size);
  font-weight: 800;
  color: #5b3824;
  letter-spacing: .075em;
  line-height: 2;
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  justify-content: center;
  align-items: baseline;
  column-gap: 32px;
  row-gap: 8px
}

.dates>div {
  display: contents
}

.dates>div+div {
  margin-top: 0
}

.dates dt,
.dates dd {
  font-size: inherit;
  font-weight: 800
}

.dates dd {
  min-width: 0;
  white-space: normal;
  font-variant-numeric: tabular-nums
}

.dates time {
  display: inline-block;
}

.flights {
  margin-top: 30px
}

.section-heading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 22px;
  color: var(--deep-green);
  font-size: 28px;
  letter-spacing: .08em;
  margin-bottom: 24px
}

.section-heading::before,.section-heading::after {
  content: "";
  height: 1px;
  background: #89aa98;
  flex: 1
}

table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-family: var(--sans);
  font-size: 15px;
  color: #02120c;
  table-layout: fixed;
  border: 1px solid var(--table-border);
  border-radius: var(--table-radius);
  overflow: hidden
}

thead {
  background: var(--green);
  color: white
}

th,td {
  padding: 20px 8px;
  text-align: center;
  border-right: 1px solid #e9e6e1;
  font-weight: 600;
  line-height: 1.6
}

thead th {
  font-size: 14px;
  padding-block: 14px;
  border-color: #548e76
}

th:last-child,td:last-child {
  border-right: 0
}

tbody tr {
  background: white
}

tbody tr:nth-child(2) {
  background: var(--table-muted)
}

td[data-label="運航曜日"] {
  font-size: 14px;
  letter-spacing: -.05em
}

.flight-note {
  font-family: var(--sans);
  text-align: right;
  font-size: 12px;
  font-weight: 600;
  color: var(--deep-green);
  margin-top: 12px
}

.booking {
  text-align: center;
  margin-top: 26px
}

.booking-button {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  min-height: 70px;
  background: var(--green);
  border-radius: 18px;
  color: #fff;
  text-decoration: none;
  letter-spacing: .13em;
  font-size: 24px;
  font-weight: 700;
  width: 90%;
  margin: auto;
  transition: background .2s,transform .2s
}

.booking-button span {
  position: absolute;
  right: 6%;
  font-family: var(--sans);
  font-size: 30px;
  font-weight: 400
}

.booking-button:hover {
  background: #084b34;
  transform: translateY(-2px)
}

.booking-button:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 4px
}

.booking-note {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .07em;
  margin-top: 12px
}

.booking-status {
  font-family: var(--sans);
  font-size: 14px;
  color: var(--green);
  padding: 12px
}

.conditions {
  width: min(59%,770px);
  border-top: 1px solid var(--line);
  padding: 32px 60px 0;
  margin: 28px auto 0;
  font-family: var(--sans);
  font-size: 14px
}

.conditions h2 {
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 14px
}

.conditions ul {
  list-style: none;
  margin: 0;
  padding: 0
}

.conditions li {
  position: relative;
  padding-left: 1em;
  line-height: 1.9;
  margin: 4px 0
}

.conditions li::before {
  content: "※";
  position: absolute;
  left: 0
}

footer {
  text-align: center;
  padding: 65px 20px 35px;
  isolation: isolate
}

footer img {
  width: 276px;
  margin: auto
}

footer p {
  font-size: 12px;
  letter-spacing: .13em;
  margin-top: 44px;
  font-weight: 600;
  color: #956014
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0
}

@media (min-width:1500px) {
  .intro {
    padding-bottom: 50px
  }

  .delhi {
    width: 400px
  }

  .intro-copy {
    margin-top: 35px
  }

  .campaign {
    padding-inline: 80px
  }

  .container {
    max-width: 1060px
  }

  .offer-art {
    max-width: 360px
  }

  .flights {
    margin-top: 40px
  }
}

@media (max-width:900px) and (min-width:601px) {
  .container {
    width: 84%
  }

  .campaign {
    padding-inline: 25px
  }

  .dates {
    display: block;
    text-align: center;
    letter-spacing: .075em
  }

  .intro-copy {
    font-size: 18px
  }

  .conditions {
    width: 78%;
    padding-inline: 30px
  }
}

@media (max-width:600px) {
  .container {
    width: calc(100% - 36px)
  }

  .hero {
    aspect-ratio: auto;
    height: 420px;
    overflow: hidden
  }

  .hero-photo {
    height: 420px;
    width: 729px;
    max-width: none;
    left: 50%;
    transform: translateX(-50%)
  }

  .hero-content {
    padding-top: 23px
  }

  .hero-logo {
    width: 155px
  }

  h1 {
    width: 94%;
    margin-top: 27px
  }

  .route {
    width: 72%;
    margin-top: 18px;
    gap: 8%
  }

  .intro {
    margin-top: 0;
    padding: 0 18px 28px
  }

  .delhi {
    width: 235px;
    margin-bottom: 8px
  }

  .tagline {
    font-size: 12px;
    letter-spacing: .2em;
    gap: 9px
  }

  .tagline::before,.tagline::after {
    width: 22px
  }

  .intro-copy {
    font-size: 16px;
    line-height: 1.9;
    margin-top: 23px
  }

  .intro-copy span {
    display: block
  }

  .campaign {
    padding: 26px 20px 25px;
    border-radius: 18px
  }

  .campaign h2 {
    font-size: 28px;
    letter-spacing: -.035em
  }

  .campaign-subtitle {
    font-size: 15px;
    margin-top: 10px;
    letter-spacing: 0
  }

  .offers {
    grid-template-columns: 1fr;
    margin-top: 25px;
    gap: 24px
  }

  .offer h3 {
    font-size: 20px
  }

  .offer-lead {
    font-size: 14px;
    margin-top: 9px;
    white-space: normal
  }

  .offer-art {
    width: 88%;
    max-width: 300px
  }

  .offer-detail {
    font-size: 14px
  }

  .offer+.offer {
    border-left: 0;
    border-top: 1px solid var(--line);
    padding-top: 22px
  }

  .dates {
    padding-top: 20px;
    margin-top: 24px;
    display: block;
    text-align: center;
    letter-spacing: .075em
  }

  .dates>div {
    display: block
  }

  .dates>div+div {
    margin-top: 16px
  }

  .dates dt {
    margin-bottom: 4px
  }

  .dates dd {
    white-space: normal
  }

  .dates time {
    display: inline-block
  }

  .flights {
    margin-top: 32px
  }

  .section-heading {
    font-size: 20px;
    gap: 10px;
    letter-spacing: .03em;
    margin-bottom: 18px
  }

  table,tbody {
    display: block
  }

  table {
    border: 0;
    border-radius: 0;
  }

  thead {
    display: none
  }

  tbody tr {
    display: grid;
    grid-template-columns: 1fr 1fr;
    border: 1px solid var(--table-border);
    border-radius: var(--table-radius);
    overflow: hidden;
    background: #fff
  }

  tbody tr:nth-child(2) {
    margin-top: 14px;
    background: #fff
  }

  th,td {
    border: 0;
    padding: 12px;
    font-size: 16px;
    line-height: 1.5
  }

  tbody th {
    grid-column: 1/-1;
    background: var(--green);
    color: white;
    font-size: 18px;
    padding: 13px
  }

  td::before {
    content: attr(data-label);
    display: block;
    font-size: 12px;
    color: #687c70;
    font-weight: 400;
    margin-bottom: 5px
  }

  td[data-label="運航曜日"] {
    font-size: 14px;
    letter-spacing: 0
  }

  td[data-label="出発時刻"],td[data-label="到着時刻"] {
    background: var(--table-muted);
    font-size: 23px;
    align-self: stretch
  }

  .next-day {
    font-size: 14px
  }

  .flight-note {
    font-size: 12px;
    margin-top: 10px
  }

  .booking {
    margin-top: 24px
  }

  .booking-button {
    width: 100%;
    min-height: 62px;
    font-size: 20px;
    border-radius: 14px;
    letter-spacing: .06em;
    padding-right: 24px
  }

  .booking-button span {
    font-size: 26px;
    right: 6%
  }

  .booking-note {
    font-size: 12px;
    letter-spacing: 0
  }

  .conditions {
    width: calc(100% - 52px);
    margin-top: 25px;
    padding: 25px 0 0;
    font-size: 14px
  }

  .conditions h2 {
    font-size: 14px
  }

  .conditions li {
    margin: 7px 0;
    line-height: 1.8
  }

  footer {
    padding: 45px 18px 25px
  }

  footer img {
    width: 230px
  }

  footer p {
    font-size: 10px;
    letter-spacing: .05em;
    margin-top: 30px
  }

  .page-body::before,.page-body::after {
    width: 26%;
    opacity: .22
  }
}

@media (max-width:360px) {
  .hero {
    height: 390px
  }

  .hero-photo {
    height: 390px;
    width: 677px
  }

  .intro-copy {
    font-size: 15px
  }

  .campaign h2 {
    font-size: 24px
  }

  .campaign {
    padding-inline: 15px
  }

  .tagline {
    font-size: 11px
  }

  .section-heading {
    font-size: 18px
  }
}

@media (prefers-reduced-motion:reduce) {
  .booking-button {
    transition: none
  }

  .booking-button:hover {
    transform: none
  }
}

.hero {
  overflow: hidden;
}

.hero-content {
  position: relative;
  z-index: 1;
}

.hero-wave {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  pointer-events: none;
}

.hero-wave img {
  width: 100%;
}

.hero-ready .hero-photo {
  animation: hero-photo-enter 1.6s ease-out both;
}

.hero-ready .hero-logo {
  animation: hero-text-enter .7s ease-out .15s both;
}

.hero-ready h1 {
  animation: hero-text-enter .8s ease-out .3s both;
}

.hero-ready .route img:nth-child(1) {
  animation: route-text-enter .7s ease-out .45s both;
}

.hero-ready .route img:nth-child(2) {
  animation: route-text-enter .6s ease-out .6s both;
}

.hero-ready .route img:nth-child(3) {
  animation: route-text-enter .7s ease-out .75s both;
}

.hero-ready .route img:nth-child(4) {
  animation: plane-enter 1.1s cubic-bezier(.16, 1, .3, 1) .9s both;
}

.hero-ready .hero-wave {
  animation: wave-reveal 1.4s cubic-bezier(.22, .61, .36, 1) .35s both;
}

.reveal {
  opacity: 0;
  translate: 0 12px;
  transition: opacity .7s ease-out, translate .7s ease-out;
}

.reveal.is-visible,
.reveal:focus-within {
  opacity: 1;
  translate: 0 0;
}

.booking-button span {
  transition: transform .2s ease-out;
}

@media (hover: hover) {
  .booking-button:hover span {
    transform: translateX(4px);
  }
}

@keyframes hero-photo-enter {
  from {
    opacity: 0;
    scale: 1.025;
  }
  to {
    opacity: 1;
    scale: 1;
  }
}

@keyframes hero-text-enter {
  from {
    opacity: 0;
    translate: 0 8px;
  }
  to {
    opacity: 1;
    translate: 0 0;
  }
}

@keyframes wave-reveal {
  from {
    clip-path: inset(0 100% 0 0);
  }
  to {
    clip-path: inset(0 0 0 0);
  }
}

@keyframes route-text-enter {
  from {
    opacity: 0;
    translate: -6px 0;
  }
  to {
    opacity: 1;
    translate: 0 0;
  }
}

@keyframes plane-enter {
  from {
    opacity: 0;
    translate: -90px 0;
  }
  to {
    opacity: 1;
    translate: 0 0;
  }
}

@media (max-width: 600px) {
  .hero-wave {
    width: 729px;
    left: 50%;
    transform: translateX(-50%);
  }

  .reveal {
    translate: 0 6px;
  }

  .reveal.is-visible {
    translate: 0 0;
  }
}

@media (max-width: 360px) {
  .hero-wave {
    width: 677px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-ready .hero-photo,
  .hero-ready .hero-logo,
  .hero-ready h1,
  .hero-ready .route,
  .hero-ready .route img:nth-child(n),
  .hero-ready .hero-wave {
    animation: none;
  }

  .reveal {
    opacity: 1;
    translate: none;
    transition: none;
  }

  .booking-button span {
    transition: none;
    transform: none;
  }

  .booking-button:hover span {
    transform: none;
  }
}

@media (min-width: 601px) and (max-width: 1000px) {
  .dates {
    display: block;
    text-align: center;
  }

  .dates > div {
    display: block;
  }

  .dates > div + div {
    margin-top: 18px;
  }

  .dates dd {
    white-space: normal;
  }
}

@media (max-width: 600px) {
  .dates dd {
    display: block;
    font-size: clamp(13px, 3.7vw, 18px);
    letter-spacing: 0;
    white-space: nowrap;
    line-height: 1.8;
  }

  .dates dt {
    font-size: 18px;
    margin-bottom: 8px;
  }
}

.hero-video-layer {
  position: absolute;
  inset: 0;
  opacity: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  clip-path: polygon(0% 0%, 100% 0%, 100.000% 95.570%, 98.750% 96.293%, 97.500% 96.881%, 96.250% 97.378%, 95.000% 97.830%, 93.750% 98.237%, 92.500% 98.553%, 91.250% 98.870%, 90.000% 99.141%, 88.750% 99.367%, 87.500% 99.548%, 86.250% 99.684%, 85.000% 99.819%, 83.750% 99.910%, 82.500% 99.955%, 81.250% 100.000%, 80.000% 100.000%, 78.750% 99.955%, 77.500% 99.910%, 76.250% 99.819%, 75.000% 99.729%, 73.750% 99.593%, 72.500% 99.458%, 71.250% 99.277%, 70.000% 99.051%, 68.750% 98.825%, 67.500% 98.599%, 66.250% 98.327%, 65.000% 98.011%, 63.750% 97.694%, 62.500% 97.378%, 61.250% 97.016%, 60.000% 96.655%, 58.750% 96.248%, 57.500% 95.841%, 56.250% 95.389%, 55.000% 94.937%, 53.750% 94.439%, 52.500% 93.942%, 51.250% 93.445%, 50.000% 92.948%, 48.750% 92.405%, 47.500% 91.908%, 46.250% 91.456%, 45.000% 90.958%, 43.750% 90.552%, 42.500% 90.099%, 41.250% 89.693%, 40.000% 89.286%, 38.750% 88.924%, 37.500% 88.562%, 36.250% 88.246%, 35.000% 87.929%, 33.750% 87.658%, 32.500% 87.342%, 31.250% 87.116%, 30.000% 86.890%, 28.750% 86.664%, 27.500% 86.438%, 26.250% 86.257%, 25.000% 86.121%, 23.750% 85.986%, 22.500% 85.850%, 21.250% 85.759%, 20.000% 85.714%, 18.750% 85.669%, 17.500% 85.624%, 16.250% 85.624%, 15.000% 85.624%, 13.750% 85.669%, 12.500% 85.759%, 11.250% 85.850%, 10.000% 85.940%, 8.750% 86.121%, 7.500% 86.302%, 6.250% 86.483%, 5.000% 86.709%, 3.750% 87.025%, 2.500% 87.342%, 1.250% 87.703%, 0.000% 88.156%);
  transition: opacity 1.2s ease-in-out;
}

.hero-video {
  position: absolute;
  width: 120%;
  height: 132%;
  max-width: none;
  left: -12%;
  top: 0;
  object-fit: fill;
  filter: brightness(1.06) contrast(0.92) saturate(0.88) sepia(0.06);
}

.hero.video-visible .hero-video-layer {
  opacity: 1;
}

.hero.video-returning .hero-video-layer {
  transition-duration: 1.5s;
}

.hero h1 {
  position: relative;
}

.title-shine {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

#title-shine-mask {
  mask-type: alpha;
}

.title-shine-band {
  opacity: 0;
}

.hero-ready .title-shine-band {
  animation: title-light-pass 8s ease-in-out 1.4s infinite;
}

@keyframes title-light-pass {
  0% {
    opacity: 0;
    transform: translateX(0);
  }
  3% {
    opacity: 1;
  }
  18% {
    opacity: 1;
    transform: translateX(3600px);
  }
  20%, 100% {
    opacity: 0;
    transform: translateX(3600px);
  }
}

.booking-button {
  overflow: hidden;
}

.booking-button::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(110deg, transparent 35%, rgba(255,255,255,.5) 50%, transparent 65%);
  background-size: 300% 100%;
  background-position: 100% 0;
  opacity: 0;
}

.booking-button.shine-once::after {
  animation: title-shine 6s ease-in-out .3s infinite;
}

@keyframes title-shine {
  0% {
    opacity: 0;
    background-position: 100% 0;
  }
  3% {
    opacity: 1;
  }
  20% {
    opacity: 1;
    background-position: 0% 0;
  }
  22%, 100% {
    opacity: 0;
    background-position: 0% 0;
  }
}

@media (max-width: 600px) {
  .hero-video-layer {
    width: 729px;
    height: 420px;
    left: 50%;
    right: auto;
    transform: translateX(-50%);
  }
}

@media (max-width: 360px) {
  .hero-video-layer {
    width: 677px;
    height: 390px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-video-layer {
    display: none;
    transition: none;
  }

  .hero-ready .title-shine-band,
  .booking-button.shine-once::after {
    animation: none;
  }
}

.hero-video {
  position: absolute;
  width: 120%;
  height: 132%;
  max-width: none;
  left: -12%;
  top: 0;
  object-fit: fill;
  filter: brightness(1.06) contrast(0.92) saturate(0.88) sepia(0.06);
  transform: none;
}

.date-mobile {
  display: none;
}

@media (max-width: 600px) {
  .dates {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    column-gap: 8px;
    row-gap: 12px;
    text-align: left;
    letter-spacing: 0;
  }

  .dates > div {
    display: contents;
  }

  .dates dt,
  .dates dd {
    font-size: clamp(11px, 3vw, 16px);
    line-height: 1.7;
    margin: 0;
    white-space: nowrap;
  }

  .dates .date-desktop {
    display: none;
  }

  .dates .date-mobile {
    display: inline;
  }
}

.dates {
  display: grid;
  grid-template-columns: max-content max-content;
  justify-content: center;
  align-items: baseline;
  text-align: left;
}

.dates > div {
  display: contents;
}

.dates > div + div {
  margin: 0;
}

.dates dt,
.dates dd {
  font-size: inherit;
  margin: 0;
  white-space: nowrap;
}

.dates dd {
  display: block;
}

@media (max-width: 1100px) {
  .dates {
    font-size: clamp(16px, 2vw, 20px);
    letter-spacing: 0;
    column-gap: 16px;
    row-gap: 12px;
  }

  .dates .date-desktop {
    display: none;
  }

  .dates .date-mobile {
    display: inline;
  }
}

@media (max-width: 600px) {
  .dates {
    font-size: clamp(11px, 3vw, 16px);
    column-gap: 8px;
  }
}

.campaign-title-kanji {
  letter-spacing: 0.06em;
}

.campaign-title-kana {
  letter-spacing: 0;
}

.page-body {
  position: relative;
  isolation: isolate;
}

.page-body::before,
.page-body::after {
  background-image: url("images/bg_pattern_continuous.png");
  z-index: 0;
}

.page-body > main,
.page-body > footer {
  position: relative;
  z-index: 1;
}

@media (max-width: 600px) {
  .page-body::before,
  .page-body::after {
    opacity: 0.4;
  }
}

.offer-art {
  margin-top: -14px;
  margin-bottom: -14px;
}

@media (max-width: 600px) {
  .offer-art {
    margin-top: -10px;
    margin-bottom: -10px;
  }
}

@media (max-width: 1100px) {
  .dates {
    font-size: clamp(18px, 2.5vw, 24px);
    column-gap: 14px;
    row-gap: 14px;
  }

  .dates dt,
  .dates dd {
    font-size: inherit;
    font-weight: 800;
  }
}

@media (max-width: 600px) {
  .dates {
    font-size: clamp(12px, 3.6vw, 18px);
    column-gap: 8px;
    row-gap: 14px;
  }
}

.booking-button {
  font-family: var(--sans);
  font-weight: 700;
  letter-spacing: 0.06em;
}

@media (min-width: 601px) {
  .conditions {
    display: grid;
    grid-template-columns: minmax(0, max-content);
    justify-content: center;
    padding-inline: 0;
    text-align: left;
  }

  .conditions ul {
    min-width: 0;
    max-width: 100%;
  }
}

.booking-button {
  font-size: 22px;
  letter-spacing: 0.1em;
}

@media (max-width: 600px) {
  .booking-button {
    font-size: 18px;
  }
}

.section-heading {
  font-weight: 800;
}