@charset "UTF-8";
/* ==============================
汎用（基本設定・共通パーツ）
==============================*/
:root {
  --a-duration: 0.3s;
  --c-black: #000;
  --c-red: #A44A3F;
  --c-gold: #FAEDCD;
  --c-green: #4d6c38;
  --c-white: #fff;
  --f-f-serif: "Shippori Mincho B1", serif;
  --f-f-sansserif: Roboto, Helvetica Neue, Arial, Hiragino Kaku Gothic ProN, Hiragino Sans, Meiryo, sans-serif;
  --f-lh-l: 2em;
  --f-lh-s: 1.5em;
  --f-s-h1: clamp(32px, 26px + 1.67vw, 50px);
  --f-s-h2: clamp(26px, 22.667px + 0.93vw, 36px);
  --f-s-h3: clamp(22px, 19.333px + 0.74vw, 30px);
  --f-s-h4: clamp(20px, 18px + 0.56vw, 26px);
  --f-s-h5: clamp(18px, 16.667px + 0.37vw, 22px);
  --f-s-h6: clamp(16px, 15.333px + 0.19vw, 18px);
  --f-s-p: clamp(14px, 12.864px + 0.36vw, 16px);
  --f-s-small: clamp(12px, 10.864px + 0.36vw, 14px);
  --f-w-bold: 700;
  --f-w-normal: 400;
  --g-0: 0;
  --g-5: 5px;
  --g-10: 10px;
  --g-20: clamp(15px, 9.28px + 1.79vw, 20px);
  --g-30: clamp(20px, 8.576px + 3.57vw, 30px);
  --g-40: clamp(30px, 18.576px + 3.57vw, 40px);
  --g-60: clamp(40px, 17.136px + 7.14vw, 60px);
  --g-90: clamp(60px, 42.864px + 5.36vw, 90px);
  --g-120: clamp(80px, 57.136px + 7.14vw, 120px);
  --g-180: clamp(120px, 85.712px + 10.71vw, 180px);
  --w-full: 100%;
  --w-l: 1600px;
  --w-m: 960px;
  --w-s: 720px;
  --w-xs: 480px;
}
html {
  scroll-behavior: smooth;
}
body {
  background-color: var(--c-green);
  color: var(--c-white);
  font-family: var(--f-f-sansserif);
  font-size: var(--f-s-p);
  font-weight: var(--f-w-normal);
  letter-spacing: 0;
  line-height: var(--f-lh-l);
  padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px));
}
img {
  width: 100%;
}
:is(h1, h2, h3, h4, h5, h6) {
  font-family: var(--f-f-serif);
  font-weight: var(--f-w-bold);
}
.text-chunk {
  display: inline-block;
}
.main {
  overflow: clip;
}
.information-item__heading {
  color: var(--c-green);
  font-size: var(--f-s-h6);
}
.information-item__lead {
  font-size: var(--f-s-h4);
  font-weight: var(--f-w-bold);
  line-height: var(--f-lh-s);
  margin-top: var(--g-10) !important;
}
.information-item__lead + p {
  margin-top: var(--g-10) !important;
}
.button {
  align-items: center;
  display: inline-flex;
  gap: var(--g-20);
  justify-content: space-between;
  line-height: var(--f-lh-s);
  min-height: 44px;
  text-decoration: none;
}
.button::after {
  -webkit-mask: url("../images/icon_arrow.png") center / contain no-repeat;
  background-color: currentColor;
  content: "";
  flex: 0 0 auto;
  height: 11px;
  mask: url("../images/icon_arrow.png") center / contain no-repeat;
  transition-duration: var(--a-duration);
  transition-property: transform;
  transition-timing-function: ease;
  width: 20px;
}
.button:is(:hover, :focus-visible)::after {
  transform: translateX(var(--g-5));
}
.button--outline {
  border: 1px solid currentColor;
  padding: calc(var(--g-10) * 1.5) var(--g-20);
}
.button--frame::before {
  border: 2px solid var(--c-red);
  content: "";
  height: 100%;
  left: var(--g-0);
  position: absolute;
  top: var(--g-0);
  transition-duration: var(--a-duration);
  width: 100%;
}
.button--frame:hover::before {
  height: calc(100% + var(--g-10));
  translate: calc(var(--g-5) * -1) calc(var(--g-5) * -1);
  width: calc(100% + var(--g-10));
}
.button--large {
  background-color: var(--c-red);
  border-bottom: 1px solid currentColor;
  color: var(--c-white);
  font-size: var(--f-s-h6);
  padding: calc(var(--g-40) * 1.5) var(--g-30);
  position: relative;
  transition-duration: var(--a-duration);
  transition-property: background-color, color, opacity;
  transition-timing-function: ease;
  width: min(100%, var(--w-s));
}
.button--large:is(:hover, :focus-visible) {
  background-color: var(--c-green);
  color: var(--c-white);
}
.button--large:hover {
  background-color: var(--c-red);
  color: var(--c-white);
}
.button--large span {
  transition-duration: var(--a-duration);
  transition-property: all;
}
.button--large:hover span {
  scale: 1.1;
}
.button--large::before {
  height: calc(100% + var(--g-10));
  translate: calc(var(--g-5) * -1) calc(var(--g-5) * -1);
  width: calc(100% + var(--g-10));
}
.button--large:hover::before {
  height: calc(100% + var(--g-10) * 2);
  translate: calc(var(--g-10) * -1) calc(var(--g-10) * -1);
  width: calc(100% + var(--g-10) * 2);
}
.button-group {
  display: flex;
  flex-wrap: wrap;
  gap: var(--g-20);
}
.parallax-image {
  height: clamp(300px, 50vh, 600px);
  overflow: hidden;
  position: relative;
}
.parallax-image__background {
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  height: 140%;
  left: var(--g-0);
  position: absolute;
  top: -20%;
  transform: translateY(-10%);
  width: 100%;
}
.section-heading {
  font-size: var(--f-s-h3);
  line-height: var(--f-lh-s);
  text-align: center;
}
.section-heading--line {
  align-items: center;
  display: flex;
  font-size: var(--f-s-h5);
  gap: var(--g-20);
  justify-content: center;
}
.section-heading--line::before,
.section-heading--line::after {
  background-color: currentColor;
  content: "";
  flex: 1;
  height: 1px;
  opacity: 0.25;
}
.section-heading--dark {
  color: currentColor;
  font-family: var(--f-f-serif);
  font-weight: var(--f-w-bold);
}
.split-two {
  display: grid;
  gap: var(--g-40);
}
.information-item--center {
  text-align: center;
}
:is(ul:not([class]), ol:not([class])) {
  counter-reset: number;
  list-style: none;
}
:is(ul:not([class]), ol:not([class])) > li {
  padding-left: 1.2em;
  position: relative;
}
:is(ul:not([class]), ol:not([class])) > li::before {
  display: inline-block;
  left: var(--g-0);
  position: absolute;
}
ul:not([class]) > li::before {
  background-color: currentColor;
  border-radius: 50%;
  content: "";
  height: 0.3em;
  top: 0.5lh;
  width: 0.3em;
}
ol:not([class]) > li::before {
  content: counter(number) ".";
  counter-increment: number 1;
  font-weight: var(--f-w-bold);
}
@media (min-width: 750px) {
  .break-mobile {
    display: none;
  }
  .button--large span {
    flex: 1;
    text-align: center;
  }
  .split-two {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .section-heading--line {
    font-size: var(--f-s-h2);
  }
  body {
    padding-bottom: var(--g-0);
  }
}
/* ==============================
オープニング
==============================*/
.opening {
  align-items: center;
  background-color: var(--c-black);
  display: none;
  font-family: var( --f-f-serif);
  inset: var(--g-0);
  justify-content: center;
  overflow: hidden;
  padding: var(--g-30);
  position: fixed;
  z-index: 1000;
}
.is-opening-ready .opening {
  display: flex;
}
.is-opening-ready .js-main-visual-fade,
.is-visual-reveal-ready .js-main-visual-fade {
  opacity: 0;
  visibility: hidden;
}
.opening__copy {
  font-size: 7vw;
  font-weight: var(--f-w-bold);
  line-height: var(--f-lh-s);
  position: relative;
  text-align: center;
  z-index: 2;
}
@media (min-width: 750px) {
  .opening__copy {
    font-size: min(3.6vw, 50px);
  }
}
/* ==============================
メインビジュアル
==============================*/
.main-visual {
  overflow: hidden;
  position: relative;
}
.main-visual__title {
  left: 50%;
  margin: var(--g-0);
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(80vw, 100vh);
  z-index: 2;
}
.main-visual__half {
  height: 50vh;
  position: relative;
}
.main-visual__half::after {
  content: "";
  height: 25vh;
  inset-inline: var(--g-0);
  pointer-events: none;
  position: absolute;
}
.main-visual__half--upper::after {
  background: linear-gradient(to bottom, transparent, var(--c-black));
  bottom: var(--g-0);
  opacity: 0.3;
}
.main-visual__half--lower::after {
  background: linear-gradient(to bottom, var(--c-black), transparent);
  top: var(--g-0);
}
.main-visual__background {
  height: 100%;
  inset: var(--g-0);
  object-fit: cover;
  object-position: center;
  position: absolute;
}
.main-visual__title img,
.main-visual__spot img,
.main-visual__cta img {
  height: auto;
}
.main-visual__spot,
.main-visual__cta {
  display: block;
  max-width: calc(100% - var(--g-20) * 2);
  position: absolute;
  z-index: 1;
}
.main-visual__spot {
  width: min(240px, 40vw);
}
.main-visual__spot--oppuji {
  left: var(--g-20);
  top: var(--g-20);
}
.main-visual__spot--ishikiriba {
  bottom: var(--g-20);
  right: var(--g-20);
}
.main-visual__cta {
  position: absolute;
  right: var(--g-20);
  top: var(--g-20);
  width: min(240px, 25vw);
  z-index: 10;
}
.main-visual__cta a {
  background-color: var(--c-red);
  border-radius: 50%;
  display: block;
  filter: drop-shadow(0 0 var(--g-10) #00000033);
  padding: 0;
  transition-duration: var(--a-duration);
  transition-property: scale;
}
.main-visual__cta a:hover {
  scale: 1.05;
}
.main-visual__cta a::before {
  border-radius: 50%;
}
@media (min-width: 750px) {
  .main-visual__cta a {
    padding: var(--g-20);
  }
}
/* ==============================
イントロダクション
==============================*/
.intro {
  padding-block: var(--g-90) var(--g-120);
  position: relative;
}
.intro__inner {
  display: flex;
  flex-direction: column;
  margin-inline: auto;
  max-width: var(--w-l);
  padding-inline: var(--g-0);
}
.intro__body {
  margin-top: var(--g-0);
  max-width: var(--w-s);
  padding-inline: var(--g-40);
  position: relative;
  z-index: 1;
}
.intro__eyebrow {
  border-bottom: 1px solid rgb(255 255 255 / 25%);
  margin: var(--g-0) var(--g-0) var(--g-20);
  padding-bottom: var(--g-5);
  width: 100%;
}
.intro__heading {
  font-size: 7vw;
  line-height: var(--f-lh-s);
}
.intro__text {
  display: grid;
  gap: var(--g-30);
  margin-top: var(--g-40);
}
.intro__information {
  display: grid;
  gap: var(--g-60);
  margin-top: var(--g-90);
}
.intro .information-item__heading {
  border-bottom: 1px solid currentColor;
  color: var(--c-gold);
  padding-bottom: var(--g-5);
  width: 100%;
}
.intro__button {
  margin: var(--g-60) var(--g-0) var(--g-0);
}
.intro__image {
  -webkit-mask-image: linear-gradient(to bottom, var(--c-black) 25%, transparent 100%);
  aspect-ratio: 2 / 3;
  mask-image: linear-gradient(to bottom, var(--c-black) 25%, transparent 100%);
  overflow: hidden;
  width: 100%;
}
.intro__image-column {
  display: none;
  order: -1;
  width: 100%;
}
.intro__image img {
  height: 100%;
  object-fit: cover;
}
@media (min-width: 750px) {
  .intro__inner {
    align-items: start;
    display: grid;
    gap: var(--g-90);
    grid-template-columns: minmax(0, 1.15fr) minmax(280px, 0.85fr);
    padding-inline: var(--g-60);
    padding-inline-end: var(--g-0);
    padding-inline-start: var(--g-60);
  }
  .intro {
    padding-block: var(--g-120);
  }
  .intro__body {
    margin-top: var(--g-0);
    padding-inline: var(--g-0);
  }
  .intro__heading {
    font-size: min(3.6vw, 45px);
  }
  .intro__image-column {
    display: block;
    order: 0;
  }
}
/* ==============================
スポット紹介
==============================*/
.spots {
  background-color: var(--c-white);
  color: var(--c-black);
}
.spots__inner {
  margin-inline: auto;
  max-width: var(--w-m);
  padding-block: var(--g-120);
  padding-inline: var(--g-40);
}
.spot-card {
  display: grid;
  gap: var(--g-40);
  margin-inline: auto;
  max-width: var(--w-xs);
}
.spot-card + .spot-card {
  border-top: 1px solid #00000033;
  margin-top: var(--g-120);
  padding-top: var(--g-120);
}
.spot-card__image img {
  aspect-ratio: 2 / 3;
  object-fit: cover;
}
.spot-card__body {
  align-self: center;
}
.spot-card__english {
  color: var(--c-green);
  font-size: var(--f-s-small);
}
.spot-card__title {
  font-size: var(--f-s-h2);
  line-height: var(--f-lh-s);
  margin: var(--g-10) var(--g-0) var(--g-0);
}
.spot-card__reading {
  color: var(--c-green);
  font-size: var(--f-s-small);
  margin-top: var(--g-5) !important;
}
.spot-card__heading {
  font-size: var(--f-s-h4);
  line-height: var(--f-lh-l);
  margin: var(--g-20) var(--g-0) var(--g-20);
}
.spot-card__buttons {
  margin-top: var(--g-30);
}
.spot-card__map {
  font-size: var(--f-s-small);
  margin-top: var(--g-20) !important;
}
.spot-card__map a {
  text-decoration: underline;
  text-underline-offset: 0.25em;
}
@media (min-width: 750px) {
  .spots__inner {
    padding-inline: var(--g-60);
  }
  .spot-card {
    gap: var(--g-60);
    grid-template-columns: minmax(220px, 0.75fr) minmax(0, 1.25fr);
    max-width: none;
  }
}
/* ==============================
賞品
==============================*/
.prizes {
  background-color: var(--c-green);
  padding-block: var(--g-120) var(--g-180);
  padding-inline: var(--g-40);
}
.prizes__inner {
  margin-inline: auto;
  max-width: var(--w-m);
}
.prize-list {
  list-style: none;
  margin: var(--g-90) var(--g-0) var(--g-0);
  padding: var(--g-0);
  text-align: center;
  width: var(--w-full);
}
.prize-list__item {
  border-top: 1px solid #ffffff33;
  padding-top: 60px;
}
.prize-list__title {
  color: var(--c-gold);
  font-size: var(--f-s-h2);
  margin: var(--g-0) var(--g-0) var(--g-60);
}
.prize-list__item:not(.prize-list__item--wide) .prize-list__title {
  margin-bottom: var(--g-10);
}
.prize-list__division {
  border: 1px solid currentColor;
  color: inherit;
  font-size: var(--f-s-h4);
  margin: var(--g-0) var(--g-0) var(--g-10);
  padding: 0.3em 0;
}
.prize-list__note {
  font-size: var(--f-s-small);
  line-height: var(--f-lh-s);
  margin-bottom: 20px;
}
.prize-list__product {
  font-size: var(--f-s-h4);
  font-weight: var(--f-w-bold);
}
.prize-list__count {
  font-size: var(--f-s-small);
  margin-top: var(--g-5) !important;
}
@media (min-width: 750px) {
  .prizes {
    padding-inline: var(--g-60);
  }
  .prize-list__item--wide {
    grid-column: 1 / -1;
  }
}
/* ==============================
応募について・応募規約
==============================*/
.section-gradation {
  background: linear-gradient(to bottom, var(--c-green), var(--c-white));
  height: calc(var(--g-120) * 2);
}
.application {
  background-color: var(--c-white);
  color: var(--c-black);
  padding-block: var(--g-120) var(--g-180);
  padding-inline: var(--g-40);
}
.application__inner {
  margin-inline: auto;
  max-width: var(--w-l);
}
.application__heading {
  margin-bottom: var(--g-60);
}
.application__subheading {
  color: var(--c-green);
  font-size: var(--f-s-h6);
  margin: var(--g-0) var(--g-0) var(--g-20);
  text-align: center;
}
.application__summary {
  display: grid;
  gap: var(--g-60);
  margin: var(--g-90) auto var(--g-0);
  max-width: var(--w-s);
}
.application__method-lead {
  font-size: var(--f-s-h5);
}
.application__button {
  text-align: center;
}
.application__button span {
  font-weight: var(--f-w-bold);
  text-align: left;
}
.terms {
  margin: var(--g-120) auto var(--g-0);
  max-width: var(--w-m);
}
.terms__column,
.terms__block {
  display: grid;
  gap: var(--g-30);
}
.terms__column {
  align-self: start;
}
.terms__block h3 {
  font-size: var(--f-s-p);
}
.terms__block h3::before {
  content: "■";
  margin-right: var(--g-5);
}
@media (min-width: 750px) {
  .application {
    padding-inline: var(--g-60);
  }
  .application__button span {
    text-align: center;
  }
}
/* ==============================
フッター
==============================*/
.footer {
  background-color: var(--c-green);
  padding-block: var(--g-90);
  padding-inline: var(--g-40);
}
.footer__inner {
  display: grid;
  gap: var(--g-60);
  margin-inline: auto;
  max-width: var(--w-s);
}
.footer__logo {
  align-self: start;
  width: min(100%, 280px);
}
.footer__logo img {
  height: auto;
}
.footer__credit {
  display: grid;
  gap: var(--g-20);
}
.footer__heading {
  font-size: var(--f-s-p);
}
.footer__website {
  text-decoration: underline;
  text-underline-offset: 0.25em;
}
.footer__copyright {
  font-size: var(--f-s-small);
}
@media (min-width: 750px) {
  .footer {
    padding-inline: var(--g-60);
  }
  .footer__inner {
    align-items: center;
    grid-template-columns: 1fr 1fr;
  }
}
/* ==============================
固定CTA（応募ボタン）
==============================*/
.cta {
  background-color: var(--c-red);
  bottom: var(--g-0);
  color: var(--c-white);
  opacity: 0;
  padding-bottom: env(safe-area-inset-bottom, 0px);
  pointer-events: none;
  position: fixed;
  right: var(--g-0);
  transition-duration: var(--a-duration);
  transition-property: opacity, visibility;
  transition-timing-function: ease;
  visibility: hidden;
  width: var(--w-full);
  z-index: 100;
}
.cta.is-visible {
  opacity: 1;
  pointer-events: auto;
  visibility: visible;
}
.cta__link {
  align-items: center;
  background-color: var(--c-red);
  display: flex;
  font-size: var(--f-s-h4);
  font-weight: var(--f-w-bold);
  justify-content: center;
  line-height: var(--f-lh-s);
  padding: 1em;
  text-align: center;
  text-decoration: none;
}
.cta__link::before {
  display: none;
}
@media (min-width: 750px) {
  .cta {
    bottom: var(--g-20);
    padding-bottom: var(--g-0);
    right: var(--g-20);
    width: min(360px, 40vw);
  }
  .cta__link::before {
    display: block;
  }
}
@media (prefers-reduced-motion: reduce) {
  .cta {
    transition: none;
  }
}