@charset "UTF-8";
/*
html5doctor.com Reset Stylesheet
v1.6.1
Last Updated: 2010-09-17
Author: Richard Clark - http://richclarkdesign.com
Twitter: @rich_clark
*/
html,
body,
div,
span,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
abbr,
address,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
samp,
small,
strong,
sub,
sup,
var,
b,
i,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section,
summary,
time,
mark,
audio,
video {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent;
}

body {
  line-height: 1;
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  display: block;
}

nav ul {
  list-style: none;
}

blockquote,
q {
  quotes: none;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
  content: "";
  content: none;
}

a {
  margin: 0;
  padding: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent;
}

a:visited {
  text-decoration: none;
}

a:link {
  text-decoration: none;
}

a img {
  border-width: 0px;
  border-style: none;
  border-color: #fff;
  background: transparent;
}

/* change colours to suit your needs */
ins {
  background-color: #ff9;
  color: #000;
  text-decoration: none;
}

/* change colours to suit your needs */
mark {
  background-color: #ff9;
  color: #000;
  font-style: italic;
  font-weight: bold;
}

del {
  text-decoration: line-through;
}

abbr[title],
dfn[title] {
  border-bottom: 1px dotted;
  cursor: help;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

/* change border colour to suit your needs */
hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid #cccccc;
  margin: 1em 0;
  padding: 0;
}

input,
select {
  vertical-align: middle;
}

ul {
  list-style: none;
}

input,
button,
textarea,
select {
  /* デフォルトスタイルをリセット */
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  /* font-familyを継承しないので、継承させる */
  font-family: inherit;
  /* iOSの角丸をリセット */
  border-radius: 0;
  /* box-size */
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  /* 文字の大きさ iOSでズームさせないために16px以上を指定 */
  font-size: 16px;
  /* 文字色を親から継承 */
  color: inherit;
}

body {
  text-rendering: optimizelegibility;
  -webkit-text-size-adjust: 100%;
     -moz-text-size-adjust: 100%;
      -ms-text-size-adjust: 100%;
          text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
}

.section img {
  width: 100%;
  max-width: 100%;
  height: auto;
  line-height: 1;
  -ms-interpolation-mode: bicubic;
  vertical-align: top;
}

.section .sp-block {
  display: block !important;
}

.section .pc-block {
  display: none !important;
}

.section .sp-inline {
  display: inline !important;
}

.section .pc-inline {
  display: none !important;
}

.section .sp350-block {
  display: none !important;
}

@media screen and (min-width: 769px) {
  .section .sp-block {
    display: none !important;
  }
  .section .pc-block {
    display: block !important;
  }
  .section .sp-inline {
    display: none !important;
  }
  .section .pc-inline {
    display: inline !important;
  }
}
@media screen and (max-width: 350px) {
  .section .sp350-block {
    display: block !important;
  }
}
header {
  position: relative;
}

html {
  height: -webkit-fill-available;
}

body {
  background-color: #ddd;
  background: url(../_img/bg_base_sp@2x.webp) center top repeat;
  background-size: 100% auto;
  min-height: -webkit-fill-available;
  min-width: 100%;
  --col-main: #3760ab;
  --col-black: #35363d;
  --col-main-green: #287b59;
  --col-blue-pale: #3760ab;
  --col-blue-deep: #27457b;
  --col-green-pale: #287b59;
  --col-green-transp: #287b591a;
  --col-blue-transp: #3760ab1a;
  --col-gray: #bac5cc;
  --col-gray-nav: #c5cbd5;
  --col-blue-nav: #3760abcc;
  --bg-gradation: linear-gradient(to bottom, #eaf7ff, #eafff8);
  --btn-gradation: linear-gradient(to right, #1f9565, #2e61bf);
}

.footer {
  position: relative;
}
.footer footer .s-footer-links {
  background-color: #fff;
}
.footer .s-footer {
  margin-top: 0;
}

header,
.section {
  font-family: "Shippori Mincho", "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "游明朝", YuMincho, "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
  font-weight: 400;
  font-size: 15px;
  color: var(--col-black);
  line-height: 1.5;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  -webkit-font-feature-settings: "pwid" on;
          font-feature-settings: "pwid" on;
}
header *,
.section * {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}
header *::after, header *::before,
.section *::after,
.section *::before {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}
header img,
.section img {
  width: 100%;
  max-width: 100%;
  height: auto;
  line-height: 1;
  -ms-interpolation-mode: bicubic;
  vertical-align: top;
}

.section .gothic {
  font-family: "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", "游ゴシック", "Yu Gothic", "ＭＳ Ｐゴシック", sans-serif;
  font-weight: 300;
}
.section .gothic.regular,
.section .gothic .regular {
  font-weight: 300;
}
.section .gothic.bold,
.section .gothic .bold {
  font-weight: 600;
}
.section .mincho {
  font-family: "Shippori Mincho", "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "游明朝", YuMincho, "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
  font-weight: 400;
  font-style: normal;
}
.section .regular {
  font-weight: 400;
}
.section .medium {
  font-weight: 500;
}
.section .semibold {
  font-weight: 600;
}
.section .bold {
  font-weight: 700;
}
.section .extrabold {
  font-weight: 800;
}

.section a:hover {
  text-decoration: none;
}
.section a:visited, .section a:link {
  color: inherit;
}

.section .pc-block {
  display: none;
}
.section .sp350-block {
  display: none;
}
.section .sp-block {
  display: block;
}

.clip_wrap {
  overflow-x: clip;
  overflow-y: visible;
  overflow: clip;
  width: 100%;
}

/*下部バナーエリア*/
#banner-sec {
  padding: 0 16px;
  z-index: 10;
  background: #fff;
  position: relative;
}
#banner-sec .wrap {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 8px 0;
  padding: 60px 24px 80px;
}
#banner-sec .wrap a {
  max-width: 100%;
  background: #fff;
}
#banner-sec .wrap a img {
  -webkit-transition: opacity 0.2s ease-in;
  transition: opacity 0.2s ease-in;
}
#banner-sec .wrap a:hover {
  opacity: 1;
  background: var(--col-orange);
}
#banner-sec .wrap a:hover img {
  opacity: 0.6;
}

/* MV */
#mainvisual {
  padding-inline: 0;
}
#mainvisual .content_wrap {
  height: 200svh;
  position: relative;
}
#mainvisual .content_wrap .sticky_wrap {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  height: 50%;
}
#mainvisual .content_wrap .logo {
  position: absolute;
  top: 8px;
  left: 12px;
  width: 48px;
  z-index: 10;
}
#mainvisual .content_wrap .mv_bg {
  height: 100%;
  display: block;
  padding-bottom: 56px;
}
#mainvisual .content_wrap .mv_bg img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
#mainvisual .content_wrap .main_wrap {
  margin: 36px 34px 0;
  width: calc(100% - 68px);
  height: calc(100% - 36px);
  display: block;
  position: absolute;
  inset: 0;
}
#mainvisual .content_wrap .main_wrap #mv_title {
  display: block;
  position: absolute;
  z-index: 2;
  inset: 0;
  margin: auto;
  width: 100%;
  height: 100%;
  --clip-start: 67.5px;
  --clip-progress: 0;
  -webkit-clip-path: polygon(calc(50% - (var(--clip-start) + (50% - var(--clip-start)) * var(--clip-progress))) calc(50% - (var(--clip-start) + (50% - var(--clip-start)) * var(--clip-progress))), calc(50% + var(--clip-start) + (50% - var(--clip-start)) * var(--clip-progress)) calc(50% - (var(--clip-start) + (50% - var(--clip-start)) * var(--clip-progress))), calc(50% + var(--clip-start) + (50% - var(--clip-start)) * var(--clip-progress)) calc(50% + var(--clip-start) + (50% - var(--clip-start)) * var(--clip-progress)), calc(50% - (var(--clip-start) + (50% - var(--clip-start)) * var(--clip-progress))) calc(50% + var(--clip-start) + (50% - var(--clip-start)) * var(--clip-progress)));
          clip-path: polygon(calc(50% - (var(--clip-start) + (50% - var(--clip-start)) * var(--clip-progress))) calc(50% - (var(--clip-start) + (50% - var(--clip-start)) * var(--clip-progress))), calc(50% + var(--clip-start) + (50% - var(--clip-start)) * var(--clip-progress)) calc(50% - (var(--clip-start) + (50% - var(--clip-start)) * var(--clip-progress))), calc(50% + var(--clip-start) + (50% - var(--clip-start)) * var(--clip-progress)) calc(50% + var(--clip-start) + (50% - var(--clip-start)) * var(--clip-progress)), calc(50% - (var(--clip-start) + (50% - var(--clip-start)) * var(--clip-progress))) calc(50% + var(--clip-start) + (50% - var(--clip-start)) * var(--clip-progress)));
  overflow: clip;
}
#mainvisual .content_wrap .main_wrap #mv_title .wrap {
  width: 100%;
  height: 100%;
  position: relative;
}
#mainvisual .content_wrap .main_wrap #mv_title .wrap h2 {
  aspect-ratio: 375/497;
  position: absolute;
  z-index: 10;
  width: 39.7394136808%;
  top: 25.1450676983%;
  right: 8.1433224756%;
  opacity: calc(var(--clip-progress) * 1);
  -webkit-filter: drop-shadow(0 0 16px rgb(50, 63, 69));
          filter: drop-shadow(0 0 16px rgb(50, 63, 69));
  will-change: opacity, filter;
}
@media screen and (orientation: landscape) {
  #mainvisual .content_wrap .main_wrap #mv_title .wrap h2 {
    width: auto;
    height: 21.1411992263%;
  }
}
#mainvisual .content_wrap .main_wrap #mv_title .wrap .mv_img {
  -webkit-filter: blur(calc(25px - 25px * var(--clip-progress)));
          filter: blur(calc(25px - 25px * var(--clip-progress)));
}
#mainvisual .content_wrap .main_wrap #mv_title .wrap .mv_img img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
#mainvisual .content_wrap .main_wrap #mv_title .wrap .scroll {
  position: absolute;
  top: calc(50% - 10px);
  left: calc(50% - 35px);
  color: #fff;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  font-size: 12px;
  line-height: 1.2;
  width: 70px;
  height: 20px;
  opacity: calc(1 - var(--clip-progress) * 1.5);
  will-change: opacity;
  text-align: center;
}
#mainvisual .content_wrap .main_wrap #mv_title .wrap .scroll .bar {
  position: absolute;
  bottom: -32px;
  left: calc(50% - 0.5px);
  height: 32px;
  width: 1px;
  overflow: hidden;
  background-color: rgba(255, 255, 255, 0.2);
}
#mainvisual .content_wrap .main_wrap #mv_title .wrap .scroll .bar::after {
  content: "";
  background-color: #fff;
  position: absolute;
  display: block;
  width: 1px;
  height: 200%;
  top: 0;
  left: 0;
  -webkit-animation-name: scroll_animation;
          animation-name: scroll_animation;
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
  -webkit-animation-duration: 1.2s;
          animation-duration: 1.2s;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
  -webkit-animation-timing-function: ease-in-out;
          animation-timing-function: ease-in-out;
}
@-webkit-keyframes scroll_animation {
  0% {
    top: -200%;
  }
  100% {
    top: 200%;
  }
}
@keyframes scroll_animation {
  0% {
    top: -200%;
  }
  100% {
    top: 200%;
  }
}
#mainvisual .alert {
  display: none;
  background-color: #b90000;
  font-size: 14px;
  color: #fff;
  padding: 8px;
  line-height: 1;
  z-index: 10;
  text-align: center;
}
@media screen and (min-width: 769px) {
  #mainvisual .alert {
    font-size: 15px;
  }
}

@media (max-width: 768px) {
  #mv_title {
    transition: --clip-progress 0.8s ease;
  }
  #mv_title .content_wrap .sticky_wrap.is-open #mv_title {
    --clip-progress: 1;
  }
}
/* ／ MV */
/* 共通 */
.section {
  padding-inline: 16px;
}
.section.bg_grad {
  background: var(--bg-gradation);
  position: relative;
  margin-block: 80px;
}
.section.bg_grad::before, .section.bg_grad::after {
  content: "";
  position: absolute;
  left: 0;
  top: -80px;
  display: block;
  width: 100%;
  height: 80px;
  background: -webkit-gradient(linear, left top, left bottom, from(rgba(234, 247, 255, 0)), color-stop(58%, #eaf7ff));
  background: linear-gradient(to bottom, rgba(234, 247, 255, 0) 0%, #eaf7ff 58%);
}
.section.bg_grad::after {
  top: auto;
  bottom: -80px;
  background: -webkit-gradient(linear, left top, left bottom, from(#eafff8), color-stop(65%, rgba(234, 255, 248, 0)));
  background: linear-gradient(to bottom, #eafff8 0%, rgba(234, 255, 248, 0) 65%);
}

.common_title {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 8px;
}
.common_title.blue {
  --col-key: var(--col-main);
}
.common_title.green {
  --col-key: var(--col-main-green);
}
.common_title .label {
  font-size: 12px;
  line-height: 1.5;
  color: var(--col-key);
  display: block;
  padding: 3px 15px;
  border: solid 1px var(--col-key);
  margin: 0 auto 20px;
  position: relative;
}
.common_title .label::after {
  content: "";
  position: absolute;
  bottom: -20px;
  left: calc(50% - 0.5px);
  display: block;
  width: 1px;
  height: 20px;
  background: var(--col-key);
}
.common_title .main {
  font-size: 32px;
  line-height: 1.2;
  letter-spacing: 0.05em;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 8px;
}
.common_title .main.pickup {
  gap: 0px;
}
.common_title .main .sub {
  font-size: 20px;
  letter-spacing: normal;
  line-height: 1.5;
}
.common_title .main .sub.interview {
  line-height: 1.2;
  letter-spacing: 0.05em;
}
.common_title .main .small {
  font-size: 20px;
}
.common_title .main .small.pickup {
  font-size: 22px;
}

.simple_title {
  font-size: 32px;
  line-height: 1.2;
  text-align: center;
  font-weight: 500;
  letter-spacing: 0.05em;
}

.btn {
  display: block;
  position: relative;
  margin: auto;
  width: 100%;
  max-width: 600px;
  height: 60px;
  padding: 0 12px;
  background: var(--btn-gradation);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
@media (min-width: 769px) {
  .btn {
    height: 80px;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
  }
}
.btn::after {
  content: "";
  position: absolute;
  inset: 1px;
  display: block;
  background: transparent;
  -webkit-transition: background 0.2s ease-in;
  transition: background 0.2s ease-in;
}
.btn .text {
  position: relative;
  z-index: 5;
  background: var(--btn-gradation);
  -webkit-background-clip: text;
          background-clip: text;
  color: #fff;
  font-size: 15px;
  line-height: 1.8;
  font-weight: 900;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center; /*画像の位置を決める*/
  -webkit-transition: color 0.2s ease-in;
  transition: color 0.2s ease-in;
}
@media (min-width: 769px) {
  .btn .text {
    font-size: 18px;
  }
}
.btn .arrow {
  position: absolute;
  right: 12px;
  top: calc(50% - 15px);
  z-index: 5;
  display: block;
  width: 30px;
  height: 30px;
  background: var(--btn-gradation);
  -webkit-mask-image: url(../_img/arrow_btn_circle.svg);
          mask-image: url(../_img/arrow_btn_circle.svg);
  -webkit-mask-size: contain;
          mask-size: contain;
}
.btn .arrow::after {
  content: "";
  position: absolute;
  inset: 0;
  display: block;
  width: 30px;
  height: 30px;
  background: #fff;
  -webkit-transition: opacity 0.2s ease-in;
  transition: opacity 0.2s ease-in;
}
.btn.comingsoon, .btn.end {
  pointer-events: none;
  background: #99a9b0;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
.btn.comingsoon .text, .btn.end .text {
  display: none;
}
.btn.comingsoon .arrow, .btn.end .arrow {
  display: none;
}
.btn.comingsoon::after, .btn.end::after {
  position: relative;
  content: "Coming soon";
  color: #fff;
  font-weight: 800;
  font-size: 18px;
  line-height: 1.2;
}
.btn.end::after {
  content: "販売終了";
}
@media (any-hover: hover) {
  .btn:hover::after {
    background: #fff;
  }
  .btn:hover .text {
    color: transparent;
  }
  .btn:hover .arrow::after {
    opacity: 0;
  }
}
.btn.blue {
  background: transparent;
  outline: solid 1px var(--col-main);
  -webkit-transition: background 0.2s ease-in;
  transition: background 0.2s ease-in;
}
.btn.blue::after {
  display: none;
}
.btn.blue .text {
  background: none;
  background-clip: unset;
  font-size: 15px;
  color: var(--col-main);
  margin: auto;
}
@media (min-width: 769px) {
  .btn.blue .text {
    font-size: 18px;
  }
}
.btn.blue .arrow {
  background: var(--col-main);
  -webkit-mask-image: url(../_img/arrow_btn_circle.svg);
          mask-image: url(../_img/arrow_btn_circle.svg);
  -webkit-mask-size: contain;
          mask-size: contain;
  -webkit-transition: background 0.2s ease-in;
  transition: background 0.2s ease-in;
}
.btn.blue .arrow::after {
  display: none;
}
@media (any-hover: hover) {
  .btn.blue:hover {
    background: var(--col-main);
  }
  .btn.blue:hover .text {
    color: #fff;
  }
  .btn.blue:hover .arrow {
    background: #fff;
  }
}

.gothic a.link_text {
  font-weight: bold;
  text-decoration: underline;
  text-underline-offset: 1px;
  display: inline-block;
  padding: 1px 2px;
  margin: -1px -2px;
  border-radius: 3px;
  -webkit-transition: background 0.2s ease-in, color 0.2s ease-in;
  transition: background 0.2s ease-in, color 0.2s ease-in;
}
@media (any-hover: hover) {
  .gothic a.link_text:hover {
    background: var(--col-main);
    color: #fff;
  }
}

/* ／ 共通*/
/* TOP */
#top {
  padding-block: 40px 80px;
  overflow: clip;
}
#top .content_wrap {
  display: grid;
  gap: 40px;
}
#top .wrap .lead_wrap {
  display: grid;
  grid-template-columns: auto 1fr;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 24px;
}
#top .wrap .title {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: reverse;
      -ms-flex-direction: row-reverse;
          flex-direction: row-reverse;
  gap: 10px;
}
#top .wrap .title > span {
  -webkit-writing-mode: vertical-rl;
      -ms-writing-mode: tb-rl;
          writing-mode: vertical-rl;
  font-size: 16px;
  line-height: 1;
  letter-spacing: 0.05em;
}
#top .wrap .title > span:nth-child(2) {
  padding-top: 47px;
}
#top .wrap .photo_wrap {
  display: grid;
  margin: auto;
  width: 81.9241982507%;
  aspect-ratio: 328/226;
}
#top .wrap .photo_wrap > li {
  grid-area: 1/1;
}
#top .nav_wrap {
  display: grid;
  gap: 16px;
}
#top .nav_wrap .title {
  font-size: 24px;
  line-height: 1.05;
  color: var(--col-main);
  text-align: center;
}
#top .nav_wrap ul {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: auto auto;
  gap: 0 2px;
}
#top .nav_wrap ul li {
  height: 48px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  border-top: solid 1px var(--col-main);
  position: relative;
}
#top .nav_wrap ul li:nth-child(n+4) {
  border-bottom: solid 1px var(--col-main);
}
#top .nav_wrap ul li a {
  display: block;
  width: 100%;
  color: var(--col-main);
  font-size: 13px;
  padding: 0 4px;
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  height: 100%;
  -webkit-transition: background 0.2s ease-in, color 0.2s ease-in;
  transition: background 0.2s ease-in, color 0.2s ease-in;
}
#top .nav_wrap ul li a::after {
  content: "";
  display: block;
  width: 6px;
  height: 24px;
  background: var(--col-main);
  -webkit-mask-image: url(../_img/arrow_nav_sp.svg);
          mask-image: url(../_img/arrow_nav_sp.svg);
  -webkit-mask-size: contain;
          mask-size: contain;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-transition: background 0.2s ease-in;
  transition: background 0.2s ease-in;
}
@media (any-hover: hover) {
  #top .nav_wrap ul li a:hover {
    background: var(--col-main);
    color: #fff;
  }
  #top .nav_wrap ul li a:hover::after {
    background: #fff;
  }
}

/*／TOP*/
/* ピックアップ */
#pickup {
  padding-block: 40px;
}
#pickup .content_wrap {
  display: grid;
  gap: 32px;
}
#pickup .content_wrap .wrap {
  display: grid;
  gap: 24px;
}
#pickup .content_wrap .wrap .btn_wrap {
  display: grid;
  gap: 24px;
}
#pickup .btn_list_wrap .btn_list {
  display: grid;
  gap: 0;
}
#pickup .btn_list_wrap .btn_list a.link {
  display: grid;
  grid-template-columns: 1fr auto;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 12px;
  padding: 16px 0;
  border-bottom: solid 1px var(--col-gray);
}
#pickup .btn_list_wrap .btn_list a.link .text_wrap {
  display: grid;
  justify-items: start;
  gap: 12px;
  -webkit-transition: opacity 0.2s ease-in;
  transition: opacity 0.2s ease-in;
}
#pickup .btn_list_wrap .btn_list a.link .text_wrap .label_wrap {
  display: grid;
  gap: 8px;
}
#pickup .btn_list_wrap .btn_list a.link .text_wrap .label_wrap .label {
  font-size: 13px;
  line-height: normal;
  color: #fff;
  padding: 4px 8px;
  background: var(--col-main);
  justify-self: start;
}
#pickup .btn_list_wrap .btn_list a.link .text_wrap .label_wrap .sub {
  font-size: 15px;
  line-height: 1.2;
}
#pickup .btn_list_wrap .btn_list a.link .text_wrap .main {
  font-size: 18px;
  line-height: 1.2;
}
#pickup .btn_list_wrap .btn_list a.link .text_wrap .lead {
  font-size: 15px;
  line-height: 1.2;
}
#pickup .btn_list_wrap .btn_list a.link .img_wrap {
  position: relative;
  padding-right: 24px;
}
#pickup .btn_list_wrap .btn_list a.link .img_wrap .photo {
  width: 86px;
  aspect-ratio: 86/108;
}
#pickup .btn_list_wrap .btn_list a.link .img_wrap .arrow {
  display: block;
  position: absolute;
  top: calc(50% - 15px);
  right: 0;
  width: 30px;
  height: 30px;
  border: solid 1px var(--col-main);
  border-radius: 50%;
  -webkit-transition: background 0.2s ease-in;
  transition: background 0.2s ease-in;
}
#pickup .btn_list_wrap .btn_list a.link .img_wrap .arrow::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  display: block;
  width: 12px;
  height: 6px;
  background: var(--col-main);
  -webkit-mask-image: url(../_img/arrow_btn.svg);
          mask-image: url(../_img/arrow_btn.svg);
  -webkit-mask-size: contain;
          mask-size: contain;
  -webkit-transition: background 0.2s ease-in;
  transition: background 0.2s ease-in;
}
@media (any-hover: hover) {
  #pickup .btn_list_wrap .btn_list a.link:hover .text_wrap {
    opacity: 0.5;
  }
  #pickup .btn_list_wrap .btn_list a.link:hover .img_wrap .arrow {
    background: var(--col-main);
  }
  #pickup .btn_list_wrap .btn_list a.link:hover .img_wrap .arrow::after {
    background: #fff;
  }
}
#pickup .btn_list_wrap .btn_list a.link.comingsoon .img_wrap .arrow {
  opacity: 0;
}
#pickup .btn_list_wrap .btn_img {
  display: none;
}
#pickup .btn_wrap {
  display: grid;
  gap: 24px;
}
#pickup .btn_wrap .notes {
  font-size: 12px;
  width: 100%;
  max-width: 600px;
  margin: auto;
}
@media (min-width: 600px) {
  #pickup .btn_wrap .notes {
    text-align: center;
  }
}
#pickup .btn_wrap .notes span {
  padding-left: 1em;
}

/*／ ピックアップ*/
/*固定ナビ*/
body:has(#nav-sec nav input:checked) {
  overflow: auto;
}

#nav-sec {
  position: -webkit-sticky;
  position: sticky;
  padding: 0;
  top: calc(50dvh - 182.5px);
  width: 100%;
  height: 0px;
  margin: auto;
  overflow: visible;
  z-index: 1000;
  pointer-events: none;
}
@media (min-width: 769px) {
  #nav-sec {
    top: calc(50dvh - 170px);
  }
}
#nav-sec nav {
  position: absolute;
  top: 0;
  right: 3px;
  overflow: visible;
}
@media (min-width: 769px) {
  #nav-sec nav {
    right: 6px;
  }
}
@media (min-width: 900px) {
  #nav-sec nav {
    right: 18px;
  }
}
@media (min-width: 1080px) {
  #nav-sec nav {
    right: 40px;
  }
}
#nav-sec nav input,
#nav-sec nav label {
  display: none;
}
#nav-sec nav input + label + .menu {
  z-index: 1;
  width: 203px;
  height: auto;
  overflow: clip;
}
#nav-sec nav .menu ul {
  display: grid;
  grid-template-columns: auto;
  grid-template-rows: repeat(6, 60px);
  gap: 1px;
  position: relative;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
  -webkit-transition-delay: 0.5s;
          transition-delay: 0.5s;
}
@media (max-width: 768px) {
  #nav-sec nav .menu ul:has(li:nth-child(2) a.active_sp), #nav-sec nav .menu ul:has(li:nth-child(2) a.current), #nav-sec nav .menu ul:has(li:nth-child(2) a:hover) {
    grid-template-rows: 60px 70px 60px 60px 60px 60px;
    -webkit-transition-delay: 0s;
            transition-delay: 0s;
  }
  #nav-sec nav .menu ul:has(li:nth-child(3) a.active_sp), #nav-sec nav .menu ul:has(li:nth-child(3) a.current), #nav-sec nav .menu ul:has(li:nth-child(3) a:hover) {
    grid-template-rows: 60px 60px 82px 60px 60px 60px;
    -webkit-transition-delay: 0s;
            transition-delay: 0s;
  }
  #nav-sec nav .menu ul:has(li:last-child a.active_sp), #nav-sec nav .menu ul:has(li:last-child a.current), #nav-sec nav .menu ul:has(li:last-child a:hover) {
    grid-template-rows: 60px 60px 60px 60px 60px 80px;
    -webkit-transition-delay: 0s;
            transition-delay: 0s;
  }
}
@media (min-width: 769px) {
  #nav-sec nav .menu ul {
    grid-template-rows: repeat(6, 50px);
    gap: 8px;
  }
}
#nav-sec nav .menu ul a {
  -webkit-tap-highlight-color: rgbr(0, 0, 0, 0);
  position: relative;
  display: block;
  width: 13px;
  height: 100%;
  margin-inline: auto 0;
  cursor: pointer;
  pointer-events: all;
}
#nav-sec nav .menu ul a > span {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  display: block;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  height: auto;
  word-break: keep-all;
  background: var(--col-blue-nav);
  display: grid;
  place-items: center;
  padding: 8px;
  font-size: 10px;
  letter-spacing: 0.02em;
  color: #fff;
  -webkit-writing-mode: vertical-rl;
      -ms-writing-mode: tb-rl;
          writing-mode: vertical-rl;
  text-orientation: upright;
  -webkit-font-feature-settings: normal;
          font-feature-settings: normal;
  overflow: hidden;
  -webkit-transform: translateX(100%);
          transform: translateX(100%);
  opacity: 0;
}
@media (any-hover: hover) {
  #nav-sec nav .menu ul a > span {
    -webkit-transition: opacity 0.5s ease-in-out, background 0.2s ease-in-out, color 0.2s ease-in-out, -webkit-transform 0.5s ease-in-out;
    transition: opacity 0.5s ease-in-out, background 0.2s ease-in-out, color 0.2s ease-in-out, -webkit-transform 0.5s ease-in-out;
    transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out, background 0.2s ease-in-out, color 0.2s ease-in-out;
    transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out, background 0.2s ease-in-out, color 0.2s ease-in-out, -webkit-transform 0.5s ease-in-out;
    -webkit-transition-delay: 0s;
            transition-delay: 0s;
  }
}
@media (min-width: 769px) {
  #nav-sec nav .menu ul a > span {
    background: #fff;
    padding: 16px;
    font-size: 15px;
    line-height: 1;
    letter-spacing: normal;
    color: var(--col-main);
    -webkit-writing-mode: horizontal-tb;
        -ms-writing-mode: lr-tb;
            writing-mode: horizontal-tb;
    text-orientation: sideways;
  }
}
#nav-sec nav .menu ul a::after {
  content: "";
  position: absolute;
  inset: 0;
  margin-inline: auto 0;
  display: block;
  width: 3px;
  height: 100%;
  background: var(--col-gray-nav);
  -webkit-transition: background 0.2s ease-in;
  transition: background 0.2s ease-in;
}
@media (min-width: 769px) {
  #nav-sec nav .menu ul a::after {
    width: 4px;
  }
}
@media (min-width: 769px) and (any-hover: hover) {
  #nav-sec nav .menu ul a:hover > span {
    opacity: 1;
    -webkit-transform: translateX(0);
            transform: translateX(0);
    -webkit-transition: opacity 0.3s ease-in-out, -webkit-transform 0.3s ease-in-out;
    transition: opacity 0.3s ease-in-out, -webkit-transform 0.3s ease-in-out;
    transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
    transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out, -webkit-transform 0.3s ease-in-out;
    -webkit-transition-delay: 0s;
            transition-delay: 0s;
  }
  #nav-sec nav .menu ul a:hover:after {
    background: var(--col-main);
  }
}
#nav-sec nav .menu ul a.current > span {
  -webkit-transition: none;
  transition: none;
  -webkit-transition-delay: unset;
          transition-delay: unset;
  -webkit-animation-name: label_animation, label_animation;
          animation-name: label_animation, label_animation;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  -webkit-animation-duration: 0.3s;
          animation-duration: 0.3s;
  -webkit-animation-timing-function: ease-in-out;
          animation-timing-function: ease-in-out;
  -webkit-animation-delay: 0.3s, 2s;
          animation-delay: 0.3s, 2s;
  animation-direction: normal, reverse;
}
@-webkit-keyframes label_animation {
  0% {
    -webkit-transform: translateX(100%);
            transform: translateX(100%);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
    opacity: 1;
  }
}
@keyframes label_animation {
  0% {
    -webkit-transform: translateX(100%);
            transform: translateX(100%);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
    opacity: 1;
  }
}
@media (min-width: 769px) and (any-hover: hover) {
  #nav-sec nav .menu ul a.current > span {
    -webkit-transition: opacity 0.5s ease-in-out, -webkit-transform 0.5s ease-in-out;
    transition: opacity 0.5s ease-in-out, -webkit-transform 0.5s ease-in-out;
    transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out;
    transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out, -webkit-transform 0.5s ease-in-out;
    -webkit-transition-delay: 0s;
            transition-delay: 0s;
    -webkit-animation-name: none;
            animation-name: none;
    -webkit-transform: translateX(0);
            transform: translateX(0);
    opacity: 1;
  }
}
@media (any-hover: hover) {
  #nav-sec nav .menu ul a.current:hover > span {
    color: #fff;
    background: var(--col-main);
    -webkit-transition: opacity 0.5s ease-in-out, background 0.2s ease-in-out, color 0.2s ease-in-out, -webkit-transform 0.5s ease-in-out;
    transition: opacity 0.5s ease-in-out, background 0.2s ease-in-out, color 0.2s ease-in-out, -webkit-transform 0.5s ease-in-out;
    transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out, background 0.2s ease-in-out, color 0.2s ease-in-out;
    transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out, background 0.2s ease-in-out, color 0.2s ease-in-out, -webkit-transform 0.5s ease-in-out;
    -webkit-transition-delay: 0s;
            transition-delay: 0s;
  }
}
#nav-sec nav .menu ul a.current::after {
  background: var(--col-main);
}

/*／固定ナビ*/
/* 固定バナー */
#fixed_bnr {
  z-index: 1000;
  position: fixed;
  bottom: 70px;
}
#fixed_bnr.comingsoon {
  display: none;
}
@media (min-width: 769px) {
  #fixed_bnr {
    bottom: 100px;
  }
}
#fixed_bnr {
  right: 20px;
  display: block;
  width: 246px;
  height: 58px;
  padding: 0;
  opacity: 0;
  visibility: hidden;
  -webkit-transition: opacity 0.5s ease-in-out;
  transition: opacity 0.5s ease-in-out;
}
#fixed_bnr.active {
  opacity: 1;
  visibility: visible;
}
#fixed_bnr #btf {
  position: absolute;
  z-index: 10;
  top: -41px;
  right: 24px;
  width: 48px;
  height: 49px;
  overflow: hidden;
  -webkit-transition: -webkit-transform 0.4s ease-in-out;
  transition: -webkit-transform 0.4s ease-in-out;
  transition: transform 0.4s ease-in-out;
  transition: transform 0.4s ease-in-out, -webkit-transform 0.4s ease-in-out;
}
#fixed_bnr #btf.active img {
  -webkit-animation-name: pata_animarion;
          animation-name: pata_animarion;
  -webkit-animation-duration: 0.9s;
          animation-duration: 0.9s;
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
  -webkit-animation-iteration-count: 4;
          animation-iteration-count: 4;
  -webkit-animation-timing-function: linear;
          animation-timing-function: linear;
  -webkit-animation-delay: 0s;
          animation-delay: 0s;
  -webkit-animation-direction: normal;
          animation-direction: normal;
}
@-webkit-keyframes pata_animarion {
  0% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  49.9% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  50% {
    -webkit-transform: translateY(-25%);
            transform: translateY(-25%);
  }
  100% {
    -webkit-transform: translateY(-25%);
            transform: translateY(-25%);
  }
}
@keyframes pata_animarion {
  0% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  49.9% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  50% {
    -webkit-transform: translateY(-25%);
            transform: translateY(-25%);
  }
  100% {
    -webkit-transform: translateY(-25%);
            transform: translateY(-25%);
  }
}
@media (any-hover: hover) {
  #fixed_bnr:has(a.link:hover) #btf {
    -webkit-transform: translateX(-10%) translateY(-30%);
            transform: translateX(-10%) translateY(-30%);
    -webkit-transition-delay: 0.25s;
            transition-delay: 0.25s;
  }
  #fixed_bnr:has(a.link:hover) #btf img {
    -webkit-animation-name: pata_animarion;
            animation-name: pata_animarion;
    -webkit-animation-duration: 0.9s;
            animation-duration: 0.9s;
    -webkit-animation-fill-mode: both;
            animation-fill-mode: both;
    -webkit-animation-iteration-count: infinite;
            animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
            animation-timing-function: linear;
    -webkit-animation-delay: 0s;
            animation-delay: 0s;
    -webkit-animation-direction: normal;
            animation-direction: normal;
  }
  @-webkit-keyframes pata_animarion {
    0% {
      -webkit-transform: translateY(0);
              transform: translateY(0);
    }
    49.9% {
      -webkit-transform: translateY(0);
              transform: translateY(0);
    }
    50% {
      -webkit-transform: translateY(-25%);
              transform: translateY(-25%);
    }
    100% {
      -webkit-transform: translateY(-25%);
              transform: translateY(-25%);
    }
  }
  @keyframes pata_animarion {
    0% {
      -webkit-transform: translateY(0);
              transform: translateY(0);
    }
    49.9% {
      -webkit-transform: translateY(0);
              transform: translateY(0);
    }
    50% {
      -webkit-transform: translateY(-25%);
              transform: translateY(-25%);
    }
    100% {
      -webkit-transform: translateY(-25%);
              transform: translateY(-25%);
    }
  }
}
#fixed_bnr a.link {
  position: relative;
  display: block;
  outline: solid 1px var(--col-main);
  -webkit-transition: opacity 0.2s ease-in;
  transition: opacity 0.2s ease-in;
}
#fixed_bnr a.link .bg {
  display: block;
}
#fixed_bnr a.link .arrow {
  position: absolute;
  top: calc(50% - 3px);
  right: -20px;
  width: 40px;
  height: 6px;
  background: var(--col-main);
  -webkit-mask-image: url(../_img/arrow_right40.svg);
          mask-image: url(../_img/arrow_right40.svg);
  -webkit-mask-size: contain;
          mask-size: contain;
}
@media (any-hover: hover) {
  #fixed_bnr a.link:hover {
    opacity: 0.5;
  }
}
#fixed_bnr #fixed_radio {
  display: none;
}
#fixed_bnr #fixed_radio + label {
  z-index: 10;
  position: absolute;
  top: -15px;
  right: -15px;
  display: block;
  width: 30px;
  height: 30px;
  background: rgba(0, 0, 0, 0.5019607843);
  border: solid 1px transparent;
  border-radius: 50%;
  cursor: pointer;
  -webkit-transition: background 0.2s ease-in, border 0.2s ease-in;
  transition: background 0.2s ease-in, border 0.2s ease-in;
}
#fixed_bnr #fixed_radio + label::before, #fixed_bnr #fixed_radio + label::after {
  content: "";
  position: absolute;
  top: calc(50% - 0.5px);
  left: calc(50% - 8px);
  display: block;
  width: 16px;
  height: 1px;
  background: #fff;
  rotate: 45deg;
  -webkit-transition: background 0.2s ease-in;
  transition: background 0.2s ease-in;
}
#fixed_bnr #fixed_radio + label::after {
  rotate: -45deg;
}
@media (any-hover: hover) {
  #fixed_bnr #fixed_radio + label:hover {
    background: rgba(255, 255, 255, 0.5019607843);
    border: solid 1px rgba(0, 0, 0, 0.5019607843);
  }
  #fixed_bnr #fixed_radio + label:hover::before, #fixed_bnr #fixed_radio + label:hover::after {
    background: #000;
  }
}
#fixed_bnr:has(#fixed_radio:checked) {
  display: none;
}

/*／ 固定バナー */
/* 共通カード */
.card_wrap {
  display: grid;
  gap: 56px;
  --col-card-text: var(--col-black);
  --col-card-bg: #fff;
  --col-card-key: var(--col-main-green);
}
@media (min-width: 769px) {
  .card_wrap {
    gap: 56px 24px;
  }
  .card_wrap.two_rows {
    grid-template-columns: 1fr 1fr;
    max-width: 712px;
  }
  .card_wrap.three_rows {
    grid-template-columns: 1fr 1fr 1fr;
  }
}
@media (min-width: 769px) {
  .card_wrap:has(.card_label) .card {
    padding-top: 19px;
  }
  .card_wrap:has(.card_label.twolines) .card {
    padding-top: 30px;
  }
}
@media (max-width: 768px) {
  .card_wrap .card:has(.card_label) {
    padding-top: 19px;
  }
  .card_wrap .card:has(.card_label.twolines) {
    padding-top: 30px;
  }
}

.card .card_link {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--col-card-bg);
  position: relative;
}
.card .card_link .card_link_inner {
  -webkit-transition: opacity 0.2s ease-in;
  transition: opacity 0.2s ease-in;
}
@media (any-hover: hover) {
  .card .card_link:hover .card_link_inner {
    opacity: 0.5;
  }
  .card .card_link:hover .card_arrow {
    background: var(--col-card-key);
  }
  .card .card_link:hover .card_arrow::after {
    background: #fff;
  }
}
.card .card_link.comingsoon,
.card .card_link.end {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  pointer-events: none;
}
.card .card_link.comingsoon::after,
.card .card_link.end::after {
  content: "Coming soon";
  display: block;
  width: 100%;
  height: -webkit-min-content;
  height: -moz-min-content;
  height: min-content;
  background: #99a9b0;
  color: #fff;
  font-size: 18px;
  line-height: 1.2;
  font-weight: 700;
  padding: 13px 16px;
  text-align: right;
}
.card .card_link.comingsoon .card_arrow,
.card .card_link.end .card_arrow {
  display: none;
}
.card .card_link.end::after {
  content: "販売終了";
}
.card .card_label {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  color: #fff;
  background: var(--col-card-key);
  font-size: 15px;
  line-height: normal;
  padding: 8px 16px;
}
.card .card_img {
  position: relative;
  aspect-ratio: 344/238;
}
.card .card_img figcaption {
  position: absolute;
  bottom: 8px;
  left: 8px;
  right: 8px;
  font-size: 12px;
  line-height: 1.2;
  color: #fff;
  text-align: right;
  font-family: "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", "游ゴシック", "Yu Gothic", "ＭＳ Ｐゴシック", sans-serif;
  font-weight: bold;
  -webkit-filter: drop-shadow(0 0 4px #000);
          filter: drop-shadow(0 0 4px #000);
}
.card .card_detail {
  padding: 16px 16px 40px;
  display: grid;
  gap: 12px;
  color: var(--col-card-text);
}
.card .card_detail .card_title {
  font-size: 18px;
  line-height: 1.2;
}
.card .card_detail .card_lead,
.card .card_detail .card_date {
  font-size: 15px;
  line-height: 1.2;
}
.card .card_arrow {
  display: block;
  position: absolute;
  bottom: -33px;
  right: 16px;
  width: 56px;
  height: 56px;
  background: transparent;
  border: solid 1px var(--col-card-key);
  border-radius: 50%;
  -webkit-transition: background 0.2s ease-in;
  transition: background 0.2s ease-in;
}
.card .card_arrow::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  display: block;
  width: 30px;
  height: 6px;
  background: var(--col-card-key);
  -webkit-mask-image: url(../_img/arrow_right30.svg);
          mask-image: url(../_img/arrow_right30.svg);
  -webkit-mask-size: contain;
          mask-size: contain;
  -webkit-transition: background 0.2s ease-in;
  transition: background 0.2s ease-in;
}

/* 特別拝観 */
#tokuhai {
  padding-block: 40px 40px;
}
#tokuhai .content_wrap {
  display: grid;
  gap: 32px;
}
#tokuhai .content_wrap .title_wrap {
  display: grid;
  gap: 16px;
}
#tokuhai .content_wrap .title_wrap .lead_wrap {
  display: grid;
  gap: 16px;
}
#tokuhai .content_wrap .title_wrap .lead_wrap .lead {
  font-size: 15px;
  line-height: 1.8;
}
#tokuhai .content_wrap .title_wrap .lead_wrap .note {
  font-size: 12px;
  line-height: 1.5;
}

/* ／ 特別拝観 */
/* 観光プラン */
#plan {
  position: relative;
  padding: 0;
  display: block;
  -webkit-mask-image: -webkit-gradient(linear, left bottom, left top, from(#000), to(transparent)), -webkit-gradient(linear, left bottom, left top, from(#000), to(#000));
  -webkit-mask-image: linear-gradient(to top, #000, transparent), linear-gradient(to top, #000, #000);
          mask-image: -webkit-gradient(linear, left bottom, left top, from(#000), to(transparent)), -webkit-gradient(linear, left bottom, left top, from(#000), to(#000));
          mask-image: linear-gradient(to top, #000, transparent), linear-gradient(to top, #000, #000);
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: top center, top 80px center;
          mask-position: top center, top 80px center;
  -webkit-mask-size: 100% 80px, 100% calc(100% - 80px);
          mask-size: 100% 80px, 100% calc(100% - 80px);
}
#plan .content_wrap_outer {
  position: relative;
  z-index: 10;
  padding: 120px 16px 180px;
}
#plan .content_wrap {
  display: block;
}

#canvas_bg_wrap {
  position: relative;
  overflow: hidden;
  margin: auto;
}
#canvas_bg_wrap canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
}

.plan_bottom_bg {
  display: block;
  background: -webkit-gradient(linear, left top, left bottom, from(rgba(234, 247, 255, 0)), color-stop(58%, #eaf7ff));
  background: linear-gradient(to bottom, rgba(234, 247, 255, 0), #eaf7ff 58%);
  margin: -100px auto 0;
  width: 100%;
  height: 100px;
  position: relative;
  z-index: 2;
}

#plan .title_wrap {
  display: grid;
  gap: 16px;
  margin-bottom: 40px;
}
#plan .plan_group_wrap {
  display: grid;
  gap: 120px;
}
#plan .plan_group_wrap .plan_group {
  display: grid;
  gap: 24px;
}
#plan .plan_group_wrap .plan_spot_title {
  font-size: 24px;
  line-height: 1.05;
  padding-bottom: 11px;
  color: var(--col-main);
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  border-bottom: solid 1px var(--col-main);
}
#plan .plan_group_wrap .plan_group.green .plan_spot_title {
  color: var(--col-main-green);
  border-color: var(--col-main-green);
}
#plan .btn_wrap {
  margin-block: 56px 176px;
  padding-inline: 12px;
}
#plan .card_wrap {
  --col-card-text: #fff;
  --col-card-bg: var(--col-blue-nav);
  --col-card-key: var(--col-main);
}
#plan .card_wrap.seasons {
  --col-card-text: #fff;
  --col-card-bg: #287b59cc;
  --col-card-key: var(--col-main-green);
}
#plan .card.profile .card_label {
  left: -1px;
}
#plan .card.profile .card_link {
  background: #fff;
  outline: 1px var(--col-main) solid;
  pointer-events: none;
}
#plan .card.profile .card_link .profile_wrap {
  padding: 40px 24px 24px;
  display: grid;
  gap: 16px;
}
#plan .card.profile .card_link .profile_top {
  display: grid;
  gap: 12px 24px;
  grid-template-columns: min(40%, 164px) 1fr;
  grid-template-rows: auto auto;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: start;
}
#plan .card.profile .card_link .profile_top .profile_img {
  grid-column: 1/2;
  grid-row: 2/3;
  outline: 1px solid var(--col-gray);
  outline-offset: -1px;
  aspect-ratio: 164/232;
}
#plan .card.profile .card_link .profile_top .profile_catch {
  grid-column: 1/3;
  grid-row: 1/2;
  font-size: 18px;
  line-height: 1.8;
  color: var(--col-main);
}
#plan .card.profile .card_link .profile_top .proflie_lead {
  grid-column: 2/3;
  grid-row: 2/3;
  line-height: 1.8;
  display: grid;
  gap: 12px;
}
#plan .card.profile .card_link .profile_bottom {
  background: #eaf7ff;
  padding: 16px;
  display: grid;
  gap: 24px;
}
#plan .card.profile .card_link .profile_bottom dt {
  font-size: 18px;
  line-height: 1.2;
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 4px 16px;
}
#plan .card.profile .card_link .profile_bottom dt .small {
  font-size: 14px;
  line-height: 1.2;
}
#plan .card.profile .card_link .profile_bottom dt .profile_img {
  width: 70px;
  grid-column: 1/2;
  grid-row: 1/3;
  aspect-ratio: 70/71;
}
#plan .card.profile .card_link .profile_bottom dt > span {
  grid-column: 2/3;
  grid-row: 1/2;
  margin-block: auto 0;
}
#plan .card.profile .card_link .profile_bottom dt > .small {
  grid-column: 2/3;
  grid-row: 2/3;
  margin-block: 0 auto;
}
#plan .card.profile .card_link .profile_bottom dt::after {
  content: "";
  position: absolute;
  bottom: -12px;
  left: 0;
  display: block;
  width: 100%;
  height: 1px;
  border-bottom: dashed 1px var(--col-main);
}
#plan .card.profile .card_link .profile_bottom dd {
  line-height: 1.8;
}

#sustainable {
  padding: 0;
  background: var(--col-green-transp);
}
#sustainable .main_img img {
  aspect-ratio: 960/446;
}
#sustainable .inner_wrap {
  display: grid;
  gap: 24px;
  margin-top: 32px;
  padding: 0 16px 56px;
}
#sustainable .inner_wrap .lead {
  line-height: 1.8;
  text-align: center;
}
#sustainable .card_wrap {
  --col-card-text: var(--col-black);
  --col-card-bg: #fff;
  --col-card-key: var(--col-main-green);
}
#sustainable .present {
  position: relative;
  margin: 42px auto 0;
  display: grid;
  gap: 16px;
  grid-template-rows: auto auto auto;
  background: #d0e5db;
  padding: 16px;
}
#sustainable .present .label {
  position: absolute;
  top: -5px;
  left: 0;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  background: var(--col-main-green);
  font-size: 15px;
  line-height: normal;
  color: #fff;
  letter-spacing: 0.07em;
  padding: 8px 16px;
}
#sustainable .present .present_img {
  grid-row: 2/3;
  background: rgba(255, 255, 255, 0.7019607843);
  display: grid;
  place-items: center;
}
#sustainable .present .present_img img {
  aspect-ratio: 200/171;
}
#sustainable .present .present_title {
  grid-row: 1/2;
  display: grid;
  gap: 4px;
  justify-items: start;
}
#sustainable .present .present_title .present_title_main {
  font-size: 18px;
  line-height: 1.6;
}
#sustainable .present .present_title .present_title_main em {
  font-style: normal;
  color: var(--col-main-green);
}
#sustainable .present .present_lead {
  grid-row: 3/4;
  line-height: 1.5;
}

/* ／ 観光プラン */
/* 特別イベント */
#event {
  margin-block: 0 100px;
  padding-block: 40px;
  position: relative;
  z-index: 10;
}
#event::before {
  display: none;
}
#event::after {
  height: 100px;
  top: auto;
  bottom: -100px;
}
#event .card_wrap {
  --col-card-text: #fff;
  --col-card-bg: var(--col-blue-nav);
  --col-card-key: var(--col-main);
}
#event .content_wrap {
  display: grid;
  gap: 56px;
}
#event .title_wrap {
  display: grid;
  gap: 16px;
  margin-bottom: 40px;
}
#event .title_wrap .notes {
  font-size: 12px;
}
#event .event_list_wrap {
  display: grid;
  gap: 56px;
}
#event .event_list_wrap > li {
  background: #fff;
  padding: 100px 16px 40px;
  position: relative;
  display: grid;
  gap: 32px;
}
#event .event_list_wrap > li .number_wrap {
  display: grid;
  gap: 20px;
  position: absolute;
  justify-items: center;
  top: -14px;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
}
#event .event_list_wrap > li .number_wrap .title {
  color: var(--col-main);
  font-size: 12px;
  line-height: 1.5;
  padding: 3px 15px;
  border: solid 1px var(--col-main);
  position: relative;
}
#event .event_list_wrap > li .number_wrap .title::after {
  content: "";
  position: absolute;
  bottom: -20px;
  left: calc(50% - 0.5px);
  display: block;
  width: 1px;
  height: 20px;
  background: var(--col-main);
}
#event .event_list_wrap > li .number_wrap .number {
  -webkit-text-stroke: 1px var(--col-main);
  text-stroke: 1px var(--col-main);
  paint-order: stroke;
  color: transparent;
  font-size: 32px;
  line-height: 1.2;
}
#event .event_list_wrap > li .img_wrap {
  width: 100%;
  aspect-ratio: 311/400;
  background: #aaa;
}
#event .event_list_wrap > li .img_wrap picture {
  width: 100%;
  height: 100%;
}
#event .event_list_wrap > li .img_wrap img {
  aspect-ratio: 311/400;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: 76.0416666667% center;
     object-position: 76.0416666667% center;
  height: 100%;
}
#event .inner_wrap {
  display: grid;
  gap: 16px;
}
#event .inner_wrap .inner_title {
  color: var(--col-main);
  font-size: 20px;
}
#event .inner_wrap .inner_lead {
  line-height: 1.8;
}
#event .inner_dl dt {
  color: var(--col-main);
  background: #ceebfc;
  font-size: 15px;
  line-height: 1.8;
  padding: 4px 16px;
}
#event .inner_dl dd {
  background: #eaf7ff;
  font-size: 15px;
  line-height: 1.5;
  padding: 4px 8px;
}
#event .inner_dl.talkshow_dl dt {
  background: #ceebfc;
}
#event .inner_dl.talkshow_dl dd {
  background: #fff;
}

#event #dinner .inner_lead {
  display: grid;
  gap: 12px;
}
#event #dinner dl.dinner_menu {
  display: grid;
  gap: 4px;
  line-height: 1.8;
}
#event #dinner dl.dinner_menu dd {
  border: 1px solid var(--col-gray);
  border-left: none;
  border-right: none;
  padding: 4px 0;
}
#event #dinner .profile_wrap .profile_title {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  gap: 4px 16px;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
#event #dinner .profile_wrap .profile_title > figure {
  grid-column: 1/2;
  grid-row: 1/3;
  width: 60px;
  aspect-ratio: 1/1;
}
#event #dinner .profile_wrap .profile_title .position {
  grid-column: 2/3;
  grid-row: 1/2;
  letter-spacing: normal;
  font-size: 15px;
  line-height: 1.2;
  margin-top: auto;
}
#event #dinner .profile_wrap .profile_title .name {
  grid-column: 2/3;
  grid-row: 2/3;
  font-size: 20px;
  line-height: 1.2;
  display: grid;
  grid-template-columns: auto 1fr;
  -webkit-box-align: baseline;
      -ms-flex-align: baseline;
          align-items: baseline;
  margin-bottom: auto;
}

#event #collaboration .collaboration_main_wrap {
  display: grid;
  gap: 24px;
}
#event #collaboration .collaboration_main_wrap .img_wrap {
  margin-bottom: 8px;
}
#event #collaboration .collaboration_main_wrap .img_wrap img {
  aspect-ratio: 267/400;
}
#event .collaboration_wrap {
  display: grid;
  gap: 24px;
}
#event .collaboration_wrap .collaboration_title_wrap {
  display: grid;
  gap: 16px;
}
#event .collaboration_wrap .collaboration_title_wrap .collaboration_title {
  text-align: center;
  color: var(--col-main);
  line-height: 1.8;
  padding: 8px;
  border: solid 1px var(--col-main);
  border-left: none;
  border-right: none;
}
#event .collaboration_wrap .collaboration_title_wrap .collaboration_inner {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  max-width: 311px;
  width: 100%;
  margin: auto;
  gap: 4px;
}
#event .collaboration_wrap .collaboration_title_wrap .collaboration_inner .name_wrap {
  display: grid;
  gap: 8px;
}
#event .collaboration_wrap .collaboration_title_wrap .collaboration_inner .name_wrap .category {
  background: #eaf7ff;
  color: var(--col-main);
  text-align: center;
  line-height: 1.2;
  padding: 4px;
}
#event .collaboration_wrap .collaboration_title_wrap .collaboration_inner .name_wrap .name {
  font-size: 24px;
  line-height: 1.2;
  color: var(--col-main);
}
#event .collaboration_wrap .collaboration_title_wrap .collaboration_inner .name_wrap .name > span {
  font-size: 15px;
}
#event .collaboration_wrap .collaboration_title_wrap .collaboration_inner .x_wrap {
  width: 30px;
  position: relative;
}
#event .collaboration_wrap .collaboration_title_wrap .collaboration_inner .x_wrap::before, #event .collaboration_wrap .collaboration_title_wrap .collaboration_inner .x_wrap::after {
  content: "";
  position: absolute;
  top: calc(50% - 0.5px);
  left: calc(50% - 21px);
  display: block;
  width: 42px;
  height: 1px;
  background: #aeb1bf;
  rotate: 45deg;
}
#event .collaboration_wrap .collaboration_title_wrap .collaboration_inner .x_wrap::after {
  rotate: -45deg;
}
#event .collaboration_wrap .collaboration_title_wrap .collaboration_inner .logo {
  width: 83px;
  aspect-ratio: 196/228;
}
#event .collaboration_wrap .inner_lead {
  line-height: 1.8;
}
#event .talkshow_wrap {
  background: #eaf7ff;
  padding: 24px 16px;
  display: grid;
  gap: 16px;
}
#event .talkshow_wrap .talkshow_title {
  font-size: 20px;
  line-height: 1.5;
  color: var(--col-main);
}
#event .talkshow_wrap .talkshow_inner {
  display: grid;
  gap: 16px;
}
#event .talkshow_wrap .talkshow_inner .talkshow_lead {
  line-height: 1.8;
}
#event .card_list_wrap {
  display: grid;
  gap: 71px;
}
#event .profile_wrap {
  padding: 16px;
  background: #eafeff;
  display: grid;
  gap: 16px;
}
#event .profile_wrap .profile_title {
  position: relative;
  display: grid;
  gap: 4px;
  font-size: 20px;
  line-height: 1.8;
  margin-bottom: 8px;
}
#event .profile_wrap .profile_title > .en {
  font-size: 12px;
  letter-spacing: 0.15em;
}
#event .profile_wrap .profile_title::after {
  content: "";
  position: absolute;
  bottom: -12px;
  left: 0;
  display: block;
  width: 100%;
  height: 1px;
  border-bottom: dashed 1px var(--col-main);
}
#event .profile_wrap .profile_lead {
  line-height: 1.8;
}
#event .profile_wrap .profile_lead.takahashi {
  display: grid;
  gap: 16px;
}
#event .profile_wrap .profile_lead .comment {
  border: solid 1px var(--col-main);
  border-radius: 0 16px 16px 16px;
  background-color: #fff;
  padding: 15px;
}

/* イベント03 comingsoonクラスあり */
#event .event_list_wrap > li#collaboration:has(.comingsoon) .collaboration_wrap .inner_lead {
  display: none;
}
#event .event_list_wrap > li#collaboration:has(.comingsoon) .talkshow_wrap {
  display: none;
}
#event .event_list_wrap > li#collaboration:has(.comingsoon) .card_list_wrap {
  display: none;
}

/* ／ 特別イベント */
/* マップ */
#map {
  position: relative;
  z-index: 1;
  padding-block: 40px;
}
#map .deco {
  display: none;
  width: 693px;
  position: absolute;
  top: -200px;
  left: 0;
  z-index: -1;
}
#map .deco.right {
  width: 613px;
  left: auto;
  right: 0;
}
#map .content_wrap {
  display: grid;
  gap: 40px;
}
#map .title_wrap {
  display: grid;
  gap: 24px;
}
#map .title_wrap .map_icon_list {
  display: grid;
  gap: 16px;
  width: 100%;
  max-width: 400px;
  margin: auto;
}
@media (min-width: 742px) {
  #map .title_wrap .map_icon_list {
    max-width: none;
  }
}
#map .title_wrap .map_icon_list ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 8px 16px;
}
#map .title_wrap .map_icon_list ul li {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  font-size: 12px;
  line-height: 1.8;
  gap: 8px;
}
#map .title_wrap .map_icon_list ul li img {
  width: 20px;
  aspect-ratio: 1/1;
}
#map .title_wrap .map_icon_list ul li:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  right: -8px;
  margin: auto;
  display: block;
  width: 1px;
  height: auto;
  background: var(--col-gray);
}
#map .title_wrap .map_icon_list ul li:nth-child(3)::after {
  display: none;
}
@media (min-width: 742px) {
  #map .title_wrap .map_icon_list ul li:nth-child(3)::after {
    display: block;
  }
}
#map .title_wrap .map_icon_list ul li:nth-child(5)::after {
  display: none;
}
@media (min-width: 400px) {
  #map .title_wrap .map_icon_list ul li:nth-child(5)::after {
    display: block;
  }
}
#map .map_area_wrap {
  padding: 16px;
  background: rgba(255, 255, 255, 0.5019607843);
  margin-inline: auto;
}
#map .map_area {
  position: relative;
  max-width: 1000px;
  margin-inline: auto;
  width: 100%;
  aspect-ratio: 800/852;
}
#map .map_area input#map_check {
  display: none;
}
#map .map_area input#map_check + label {
  position: absolute;
  bottom: 10px;
  left: 10px;
  z-index: 10;
  display: block;
  width: 42px;
  aspect-ratio: 1/1;
  cursor: pointer;
  background: var(--col-main);
  border-radius: 50%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 2px;
  border: solid 1px var(--col-main);
  color: #fff;
  font-size: 10px;
  line-height: 1;
  -webkit-transition: background 0.2s ease-in, color 0.2s ease-in;
  transition: background 0.2s ease-in, color 0.2s ease-in;
}
#map .map_area input#map_check + label > .zoom_icon {
  display: block;
  width: 16px;
  aspect-ratio: 1/1;
  background: #fff;
  -webkit-transition: background 0.2s ease-in;
  transition: background 0.2s ease-in;
  -webkit-mask-image: url(../_img/icon_zoomin.svg);
          mask-image: url(../_img/icon_zoomin.svg);
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-size: contain;
          mask-size: contain;
  transition: background 0.2s ease-in;
}
#map .map_area input#map_check + label > span.zoomin {
  display: block;
}
#map .map_area input#map_check + label > span.zoomout {
  display: none;
}
@media (any-hover: hover) {
  #map .map_area input#map_check + label:hover {
    background: #fff;
    color: var(--col-main);
  }
  #map .map_area input#map_check + label:hover > .zoom_icon {
    background: var(--col-main);
  }
}
@media (min-width: 769px) {
  #map .map_area input#map_check + label {
    display: none;
  }
}
#map .map_area input#map_check:checked + label > .zoom_icon {
  -webkit-mask-image: url(../_img/icon_zoomout.svg);
          mask-image: url(../_img/icon_zoomout.svg);
  -webkit-mask-size: contain;
          mask-size: contain;
}
#map .map_area input#map_check:checked + label > span.zoomin {
  display: none;
}
#map .map_area input#map_check:checked + label > span.zoomout {
  display: block;
}
#map .map_area input#map_check:checked + label + .map_outer {
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}
#map .map_area input#map_check:checked + label + .map_outer* {
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}
#map .map_area input#map_check:checked + label + .map_outer img,
#map .map_area input#map_check:checked + label + .map_outer picture,
#map .map_area input#map_check:checked + label + .map_outer a {
  -webkit-user-drag: none;
  user-drag: none;
}
#map .map_area input#map_check:checked + label + .map_outer .map_wrap .spot > .name {
  font-size: min(34px, 17 / var(--maxW) * (100vw - 16px) * 2);
}
#map .map_area input#map_check:checked + label + .map_outer .map_wrap .spot > .name .small {
  font-size: min(28px, 14 / var(--maxW) * (100vw - 16px) * 2);
}
@media (min-width: 769px) {
  #map .map_area input#map_check:checked + label + .map_outer .map_wrap .spot > .name {
    font-size: min(17px, 17 / var(--maxW) * (100vw - 16px) * 1);
  }
  #map .map_area input#map_check:checked + label + .map_outer .map_wrap .spot > .name .small {
    font-size: min(14px, 14 / var(--maxW) * (100vw - 16px));
  }
}
#map .map_area .map_outer {
  display: block;
  width: 100%;
  aspect-ratio: 800/852;
}
#map .map_area .map_outer .map_img img {
  aspect-ratio: 800/852;
}
#map .map_area input#map_check + label + .map_outer {
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}
#map .map_area input#map_check + label + .map_outer .map_wrap {
  width: 100%;
}
#map .map_area input#map_check:checked + label + .map_outer {
  overflow: scroll;
  cursor: -webkit-grab;
  cursor: grab;
}
#map .map_area input#map_check:checked + label + .map_outer .map_wrap {
  width: 200%;
}
#map .map_area input#map_check:checked + label + .map_outer.is-dragging {
  cursor: -webkit-grabbing;
  cursor: grabbing;
}
#map .map_area input#map_check:checked + label + .map_outer.is-dragging * {
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}
@media (min-width: 769px) {
  #map .map_area input#map_check:checked + label + .map_outer {
    overflow: auto;
    cursor: auto;
  }
  #map .map_area input#map_check:checked + label + .map_outer .map_wrap {
    width: 100%;
  }
  #map .map_area input#map_check:checked + label + .map_outer.is-dragging {
    cursor: auto;
  }
  #map .map_area input#map_check:checked + label + .map_outer.is-dragging * {
    -webkit-user-select: auto;
       -moz-user-select: auto;
        -ms-user-select: auto;
            user-select: auto;
  }
}

/* ／ マップ */
/* SPインタビュー */
#interview {
  padding-block: 40px;
  margin-block: 100px;
}
#interview::before, #interview::after {
  top: -100px;
  height: 100px;
}
#interview::after {
  top: auto;
  bottom: -100px;
}
#interview .content_wrap {
  display: grid;
  gap: 24px;
}
#interview .content_wrap .inner_wrap {
  display: grid;
  gap: 24px;
}
#interview .content_wrap .inner_wrap .text_wrap {
  display: grid;
  gap: 24px;
}
#interview .photo_overly_wrap {
  display: grid;
  margin: auto;
  width: 93.0029154519%;
}
#interview .photo_overly_wrap > li {
  grid-area: 1/1;
}
#interview .photo_overly_wrap > li picture img {
  aspect-ratio: 428/392;
}
#interview .photo_overly_wrap > li figure figcaption {
  outline: solid 1px var(--col-main-green);
  outline-offset: -1px;
  margin: auto;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  color: var(--col-main-green);
  line-height: 1.8;
  padding: 0 16px;
  background: #eafff8;
}
#interview dl.lead {
  line-height: 1.8;
  display: grid;
  gap: 24px;
}
#interview dl.lead dt {
  display: grid;
  grid-template-columns: auto 1fr;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 16px;
  position: relative;
}
#interview dl.lead dt > picture {
  display: block;
  width: 60px;
  aspect-ratio: 1/1;
}
#interview dl.lead dt .dt_inner {
  display: grid;
  grid-template-columns: auto 1fr;
  -webkit-box-align: last baseline;
      -ms-flex-align: last baseline;
          align-items: last baseline;
  gap: 8px;
  font-size: 20px;
  line-height: 1.8;
  position: relative;
}
#interview dl.lead dt .dt_inner .small {
  font-size: 15px;
}
#interview dl.lead dt::after {
  content: "";
  position: absolute;
  bottom: -13px;
  left: 0;
  display: block;
  width: 100%;
  height: 1px;
  border-bottom: dashed 1px var(--col-main);
}

/* ／ SPインタビュー */
/* CM情報 */
#cm {
  padding-block: 40px;
}
#cm .content_wrap {
  display: grid;
  gap: 80px;
}
#cm .cm_wrap {
  background: var(--col-blue-transp);
  padding: 40px 16px;
  margin: auto;
  display: grid;
  gap: 24px;
  width: 100%;
}
#cm .cm_wrap .cm_list_wrap {
  display: grid;
  gap: 32px;
}
#cm .cm_wrap .cm_list_title {
  background: var(--col-main);
  font-size: 18px;
  line-height: 1.05;
  color: #fff;
  padding: 4px 8px;
  display: grid;
  grid-template-columns: auto auto auto;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: start;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.5em;
}
#cm .cm_wrap .cm_list_title.poster {
  grid-template-columns: auto;
}
#cm .cm_wrap .cm_list_img.poster img {
  aspect-ratio: 600/425;
}
#cm .cm_wrap .cm_list_img.youtube_wrap {
  width: 100%;
  aspect-ratio: 16/9;
}
#cm .cm_wrap .cm_list_img.youtube_wrap iframe {
  width: 100%;
  height: 100%;
}
#cm .spot_wrap {
  display: grid;
  gap: 24px;
}
#cm .spot_wrap .spot_list_wrap {
  display: grid;
  gap: 16px;
}

/* ／ CM情報 */
/* おすすめ情報 */
#recommend {
  padding-block: 40px;
  margin-block: 100px;
}
#recommend::before, #recommend::after {
  top: -100px;
  height: 100px;
}
#recommend::after {
  top: auto;
  bottom: -100px;
  background: -webkit-gradient(linear, left top, left bottom, from(#eafff8), color-stop(65%, #fff));
  background: linear-gradient(to bottom, #eafff8 0%, #fff 65%);
}
#recommend .content_wrap {
  display: grid;
  gap: 40px;
}
#recommend .reccomend_wrap {
  display: grid;
  gap: 20px;
}
#recommend .reccomend_wrap a {
  display: grid;
  gap: 8px;
}
#recommend .reccomend_wrap a figure {
  -webkit-transition: opacity 0.2s ease-in;
  transition: opacity 0.2s ease-in;
  display: grid;
  place-items: center;
  overflow: hidden;
}
#recommend .reccomend_wrap a figure picture {
  width: 100%;
}
#recommend .reccomend_wrap a figure img {
  -webkit-transition: -webkit-transform 0.45s ease-in-out;
  transition: -webkit-transform 0.45s ease-in-out;
  transition: transform 0.45s ease-in-out;
  transition: transform 0.45s ease-in-out, -webkit-transform 0.45s ease-in-out;
}
#recommend .reccomend_wrap a p {
  font-size: 15px;
  line-height: 1.5;
}
@media (any-hover: hover) {
  #recommend .reccomend_wrap a:hover figure {
    opacity: 0.5;
  }
  #recommend .reccomend_wrap a:hover figure img {
    -webkit-transform: scale(1.02);
            transform: scale(1.02);
  }
}
#recommend .notes {
  font-size: 12px;
  line-height: 1.8;
}

/* ／ おすすめ情報 */
/* アニメーション設定 */
#top {
  overflow: clip;
}
#top .photo_wrap.animation li > picture > img {
  opacity: 0;
  -webkit-transform: translateX(50%);
          transform: translateX(50%);
  -webkit-transition: opacity 0.8s ease-in-out, -webkit-transform 0.8s ease-in-out;
  transition: opacity 0.8s ease-in-out, -webkit-transform 0.8s ease-in-out;
  transition: opacity 0.8s ease-in-out, transform 0.8s ease-in-out;
  transition: opacity 0.8s ease-in-out, transform 0.8s ease-in-out, -webkit-transform 0.8s ease-in-out;
  -webkit-transition-delay: calc(var(--timing) * 1s + 0.25s);
          transition-delay: calc(var(--timing) * 1s + 0.25s);
}
#top .photo_wrap.animation li {
  --timing: 2;
}
#top .photo_wrap.animation li:first-child {
  --timing: 0;
}
#top .photo_wrap.animation li:last-child {
  --timing: 4;
}
#top .photo_wrap.animation.active li > picture > img {
  opacity: 1;
  -webkit-transform: translateX(0);
          transform: translateX(0);
}

body .photo_overly_wrap {
  --move-x-right: 0%;
  --move-x-left: 0%;
  --move-y: 0px;
  --move-duration: 700ms;
  --loop-delay: 1800ms;
  --start-delay: 4000ms;
  --rotate-right: 0deg;
  --rotate-left: 0deg;
  --return-scale-max: 1;
}
body .photo_overly_wrap > li {
  -webkit-transform: translate3d(0, 0, 0) rotate(0deg);
          transform: translate3d(0, 0, 0) rotate(0deg);
  will-change: transform;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  -webkit-transform-origin: center center;
          transform-origin: center center;
  -webkit-transition: opacity 0.5s ease-in-out;
  transition: opacity 0.5s ease-in-out;
}
body .photo_overly_wrap > li img {
  display: block;
  -webkit-transform: scale(1);
          transform: scale(1);
  -webkit-transform-origin: center center;
          transform-origin: center center;
  will-change: transform;
}
body .photo_overly_wrap.right > li.is-going {
  -webkit-animation: photoMoveGoRight var(--move-duration) ease both;
          animation: photoMoveGoRight var(--move-duration) ease both;
}
body .photo_overly_wrap.left > li.is-going {
  -webkit-animation: photoMoveGoLeft var(--move-duration) ease both;
          animation: photoMoveGoLeft var(--move-duration) ease both;
  opacity: 0;
}
body .photo_overly_wrap.right > li.is-returning {
  -webkit-animation: photoMoveReturnRight var(--move-duration) ease both;
          animation: photoMoveReturnRight var(--move-duration) ease both;
}
body .photo_overly_wrap.left > li.is-returning {
  -webkit-animation: photoMoveReturnLeft var(--move-duration) ease both;
          animation: photoMoveReturnLeft var(--move-duration) ease both;
  opacity: 1;
}
body .photo_overly_wrap > li.is-returning img {
  -webkit-animation: photoScaleReturn var(--move-duration) ease both;
          animation: photoScaleReturn var(--move-duration) ease both;
}

@-webkit-keyframes photoMoveGoRight {
  from {
    -webkit-transform: translate3d(0, 0, 0) rotate(0deg);
            transform: translate3d(0, 0, 0) rotate(0deg);
  }
  to {
    -webkit-transform: translate3d(var(--move-x-right), var(--move-y), 0) rotate(var(--rotate-right));
            transform: translate3d(var(--move-x-right), var(--move-y), 0) rotate(var(--rotate-right));
  }
}

@keyframes photoMoveGoRight {
  from {
    -webkit-transform: translate3d(0, 0, 0) rotate(0deg);
            transform: translate3d(0, 0, 0) rotate(0deg);
  }
  to {
    -webkit-transform: translate3d(var(--move-x-right), var(--move-y), 0) rotate(var(--rotate-right));
            transform: translate3d(var(--move-x-right), var(--move-y), 0) rotate(var(--rotate-right));
  }
}
@-webkit-keyframes photoMoveGoLeft {
  from {
    -webkit-transform: translate3d(0, 0, 0) rotate(0deg);
            transform: translate3d(0, 0, 0) rotate(0deg);
  }
  to {
    -webkit-transform: translate3d(var(--move-x-left), var(--move-y), 0) rotate(var(--rotate-left));
            transform: translate3d(var(--move-x-left), var(--move-y), 0) rotate(var(--rotate-left));
  }
}
@keyframes photoMoveGoLeft {
  from {
    -webkit-transform: translate3d(0, 0, 0) rotate(0deg);
            transform: translate3d(0, 0, 0) rotate(0deg);
  }
  to {
    -webkit-transform: translate3d(var(--move-x-left), var(--move-y), 0) rotate(var(--rotate-left));
            transform: translate3d(var(--move-x-left), var(--move-y), 0) rotate(var(--rotate-left));
  }
}
@-webkit-keyframes photoMoveReturnRight {
  from {
    -webkit-transform: translate3d(var(--move-x-right), var(--move-y), 0) rotate(var(--rotate-right));
            transform: translate3d(var(--move-x-right), var(--move-y), 0) rotate(var(--rotate-right));
  }
  to {
    -webkit-transform: translate3d(0, 0, 0) rotate(0deg);
            transform: translate3d(0, 0, 0) rotate(0deg);
  }
}
@keyframes photoMoveReturnRight {
  from {
    -webkit-transform: translate3d(var(--move-x-right), var(--move-y), 0) rotate(var(--rotate-right));
            transform: translate3d(var(--move-x-right), var(--move-y), 0) rotate(var(--rotate-right));
  }
  to {
    -webkit-transform: translate3d(0, 0, 0) rotate(0deg);
            transform: translate3d(0, 0, 0) rotate(0deg);
  }
}
@-webkit-keyframes photoMoveReturnLeft {
  from {
    -webkit-transform: translate3d(var(--move-x-left), var(--move-y), 0) rotate(var(--rotate-left));
            transform: translate3d(var(--move-x-left), var(--move-y), 0) rotate(var(--rotate-left));
  }
  to {
    -webkit-transform: translate3d(0, 0, 0) rotate(0deg);
            transform: translate3d(0, 0, 0) rotate(0deg);
  }
}
@keyframes photoMoveReturnLeft {
  from {
    -webkit-transform: translate3d(var(--move-x-left), var(--move-y), 0) rotate(var(--rotate-left));
            transform: translate3d(var(--move-x-left), var(--move-y), 0) rotate(var(--rotate-left));
  }
  to {
    -webkit-transform: translate3d(0, 0, 0) rotate(0deg);
            transform: translate3d(0, 0, 0) rotate(0deg);
  }
}
@-webkit-keyframes photoScaleReturn {
  0% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  80% {
    -webkit-transform: scale(var(--return-scale-max));
            transform: scale(var(--return-scale-max));
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}
@keyframes photoScaleReturn {
  0% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  80% {
    -webkit-transform: scale(var(--return-scale-max));
            transform: scale(var(--return-scale-max));
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}

#interview .photo_overly_wrap.animation li > picture > img {
  opacity: 0;
  -webkit-transition: opacity 0.5s ease-in-out;
  transition: opacity 0.5s ease-in-out;
  -webkit-transition-delay: calc(var(--timing) * 1s + 0.5s);
          transition-delay: calc(var(--timing) * 1s + 0.5s);
}
#interview .photo_overly_wrap.animation li {
  --timing: 1;
}
#interview .photo_overly_wrap.animation li:first-child {
  --timing: 0;
}
#interview .photo_overly_wrap.animation li:last-child {
  --timing: 2;
}
#interview .photo_overly_wrap.animation.active li > picture > img {
  opacity: 1;
}

/* ／ アニメーション設定 */
.slideup.animation {
  opacity: 0;
}
.slideup.animation.active {
  -webkit-animation-name: fadein_animation;
          animation-name: fadein_animation;
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
  -webkit-animation-duration: 0.8s;
          animation-duration: 0.8s;
  -webkit-animation-timing-function: ease-in-out;
          animation-timing-function: ease-in-out;
  -webkit-animation-delay: 0.1s;
          animation-delay: 0.1s;
  -webkit-transform: translateY(100px);
          transform: translateY(100px);
}
@-webkit-keyframes fadein_animation {
  0% {
    opacity: 0;
    -webkit-transform: translateY(100px);
            transform: translateY(100px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}
@keyframes fadein_animation {
  0% {
    opacity: 0;
    -webkit-transform: translateY(100px);
            transform: translateY(100px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}

/*#debug {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 99999;
  background: rgba(0, 0, 0, 0.9);
  color: #00ff66;
  font: 12px/1.4 monospace;
  padding: 8px;
  white-space: pre-wrap;
  word-break: break-word;
  pointer-events: none;
  display: none;
  height: 10px;
  overflow: hidden;
}*/
.single-header {
  z-index: calc(infinity) !important;
}

/* MicroModal スタイル */
.modal {
  display: none;
}
.modal.is-open {
  display: block;
}
.modal .modal_overlay {
  position: fixed;
  inset: 0;
  width: 100%;
  height: auto;
  display: grid;
  place-items: center;
  z-index: 1000;
  overflow: auto;
}
.modal .modal_overlay::before {
  content: "";
  display: block;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
}

/* モーダルopen／close時のアニメーション設定 */
@-webkit-keyframes modal-fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes modal-fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@-webkit-keyframes modal-zoomIn {
  from {
    -webkit-transform: scale(0.8);
            transform: scale(0.8);
  }
  to {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}
@keyframes modal-zoomIn {
  from {
    -webkit-transform: scale(0.8);
            transform: scale(0.8);
  }
  to {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}
@-webkit-keyframes modal-fadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
@keyframes modal-fadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
@-webkit-keyframes modal-zoomOut {
  from {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  to {
    -webkit-transform: scale(0.8);
            transform: scale(0.8);
  }
}
@keyframes modal-zoomOut {
  from {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  to {
    -webkit-transform: scale(0.8);
            transform: scale(0.8);
  }
}

.modal .modal-container,
.modal .modal-overlay {
  will-change: transform, opacity;
}
.modal[aria-hidden=false] .modal_overlay {
  -webkit-animation: modal-fadeIn 0.3s ease both;
          animation: modal-fadeIn 0.3s ease both;
}
.modal[aria-hidden=false] .modal_container {
  -webkit-animation: modal-zoomIn 0.3s ease both;
          animation: modal-zoomIn 0.3s ease both;
}
.modal[aria-hidden=true] .modal_overlay {
  -webkit-animation: modal-fadeOut 0.3s ease both;
          animation: modal-fadeOut 0.3s ease both;
}
.modal[aria-hidden=true] .modal_container {
  -webkit-animation: modal-zoomOut 0.3s ease both;
          animation: modal-zoomOut 0.3s ease both;
}

/* モーダル調整部分・コンテンツ部分 */
.modal .modal_overlay {
  padding: 32px 16px 40px;
}
.modal .modal_overlay::before {
  background: rgba(0, 0, 0, 0.5);
}
.modal .modal_content {
  max-width: 840px;
  background-color: #fff;
  padding: 24px;
}
@media (min-width: 769px) {
  .modal .modal_content {
    padding: 40px;
  }
}
.modal .modal_content_wrap {
  display: grid;
  gap: 40px;
}
.modal .modal_title {
  display: grid;
  gap: 16px;
  justify-items: center;
  text-align: center;
}
.modal .modal_title > p {
  font-size: 14px;
  line-height: 1.5;
  color: var(--col-main-green);
  border: solid 1px var(--col-main-green);
  padding: 3px 15px;
}
.modal .modal_title > h2 {
  font-size: 20px;
  line-height: 1.5;
}
@media (min-width: 769px) {
  .modal .modal_title > p {
    font-size: 20px;
  }
  .modal .modal_title > h2 {
    font-size: 32px;
  }
}
.modal .modal_close {
  position: absolute;
  top: 10px;
  right: 10px;
  border: solid 1px var(--col-black);
  border-radius: 50%;
  width: 40px;
  height: 40px;
  background: var(--col-black);
  cursor: pointer;
  line-height: 1;
  outline: none;
  -webkit-transition: background 0.2s ease-in;
  transition: background 0.2s ease-in;
}
@media (min-width: 769px) {
  .modal .modal_close {
    top: 12px;
    right: 12px;
  }
}
.modal .modal_close::before, .modal .modal_close::after {
  content: "";
  position: absolute;
  top: calc(50% - 0.5px);
  left: calc(50% - 12px);
  display: block;
  width: 24px;
  height: 2px;
  background: #fff;
  rotate: 45deg;
  -webkit-transition: background 0.2s ease-in;
  transition: background 0.2s ease-in;
}
.modal .modal_close::after {
  rotate: -45deg;
}
@media (hover: hover) {
  .modal .modal_close:hover {
    background: #fff;
  }
  .modal .modal_close:hover::before, .modal .modal_close:hover::after {
    background: var(--col-black);
  }
}
.modal .modal_list {
  display: grid;
  gap: 24px;
}
.modal .modal_list > li {
  display: grid;
  gap: 12px;
}
.modal .modal_list > li .modal_list_title {
  color: var(--col-main-green);
  font-size: 18px;
  line-height: 1.5;
  position: relative;
}
.modal .modal_list > li .modal_list_title::after {
  content: "";
  position: absolute;
  bottom: -4px;
  left: 0;
  display: block;
  width: 100%;
  height: 1px;
  background: var(--col-gray);
}
.modal .modal_list > li > p {
  font-size: 15px;
  line-height: 1.8666666667;
}
.modal .modal_close_btn {
  display: block;
  border: solid 1px var(--col-main-green);
  width: 100%;
  height: 60px;
  display: grid;
  place-items: center;
  font-size: 15px;
  line-height: 1.8;
  color: var(--col-main-green);
  margin: auto;
  -webkit-transition: color 0.2s ease-in, background 0.2s ease-in;
  transition: color 0.2s ease-in, background 0.2s ease-in;
}
@media (any-hover: hover) {
  .modal .modal_close_btn:hover {
    color: #fff;
    background: var(--col-main-green);
  }
}
@media (min-width: 769px) {
  .modal .modal_close_btn {
    width: 300px;
    height: 80px;
    font-size: 18px;
  }
}

/* ／ MicroModal スタイル */
@media screen and (min-width: 769px) {
  body {
    min-width: 768px !important;
    background: url(../_img/bg_base@2x.webp) center top repeat;
    background-size: max(1400px, 100%) auto;
  }
  .section .pc-block {
    display: block;
  }
  .section .sp350-block {
    display: none;
  }
  .section .sp-block {
    display: none;
  }
  .footer .s-footer .inner {
    max-width: 1080px !important;
    width: 100% !important;
  }
  .footer .s-footer-links .inner {
    max-width: 1080px !important;
    width: 100% !important;
  }
  /*下部バナーエリア*/
  #banner-sec {
    padding-block: 0px 80px;
  }
  #banner-sec .wrap {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    gap: 0 8px;
    margin-top: 66px;
  }
  #banner-sec .wrap a {
    width: 100%;
    max-width: 245px;
  }
  /*MV*/
  #mainvisual {
    overflow: clip;
  }
  #mainvisual .content_wrap {
    max-width: none;
  }
  #mainvisual .content_wrap .sticky_wrap {
    height: 50%;
  }
  #mainvisual .content_wrap .logo {
    top: 16px;
    left: 0;
    right: 0;
    width: 100%;
    max-width: 1056px;
    margin: auto;
    z-index: 10;
  }
  #mainvisual .content_wrap .logo > a {
    display: block;
    width: 60px;
  }
  #mainvisual .content_wrap .mv_bg {
    padding-bottom: 68px;
  }
  #mainvisual .content_wrap .main_wrap {
    margin: auto 40px 0;
    width: calc(100% - 80px);
    height: calc(100% - 67px - 0px);
  }
}
@media screen and (min-width: 769px) and (min-width: 1200px) {
  #mainvisual .content_wrap .main_wrap {
    margin: auto 7.1428571429% 0;
    width: 85.7142857143%;
  }
}
@media screen and (min-width: 769px) {
  #mainvisual .content_wrap .main_wrap #mv_title {
    --clip-start: 130px;
  }
  #mainvisual .content_wrap .main_wrap #mv_title .wrap h2 {
    height: 33.2838038633%;
    width: auto;
    top: 10.4011887073%;
    right: 7.375%;
    -webkit-filter: drop-shadow(0 0 20px rgb(50, 63, 69)) drop-shadow(0 0 30px rgb(50, 63, 69));
            filter: drop-shadow(0 0 20px rgb(50, 63, 69)) drop-shadow(0 0 30px rgb(50, 63, 69));
  }
}
@media screen and (min-width: 769px) and (orientation: landscape) {
  #mainvisual .content_wrap .main_wrap #mv_title .wrap h2 {
    width: 20.8333333333%;
    height: auto;
  }
}
@media screen and (min-width: 769px) {
  #mainvisual .content_wrap .main_wrap #mv_title .wrap .scroll {
    font-size: 15px;
  }
  #mainvisual .content_wrap .main_wrap #mv_title .wrap .scroll .bar {
    bottom: -40px;
    height: 40px;
  }
  #mainvisual .content_wrap .main_wrap #mv_title .wrap .scroll .bar::after {
    -webkit-animation-duration: 1.8s;
            animation-duration: 1.8s;
  }
}
@media screen and (min-width: 769px) {
  /*／MV*/
  /* 共通 */
  .section.bg_grad {
    margin-block: 200px;
  }
  .section.bg_grad::before, .section.bg_grad::after {
    top: -200px;
    height: 200px;
  }
  .section.bg_grad::after {
    top: auto;
    bottom: -200px;
  }
  .section .content_wrap {
    max-width: 1080px;
    margin-inline: auto;
  }
  .common_title {
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
  }
  .common_title .label {
    margin-left: 0;
    font-size: 15px;
  }
  .common_title .label.en {
    font-size: 22px;
  }
  .common_title .main {
    font-size: 40px;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
    gap: 8px;
  }
  .common_title .main.pickup, .common_title .main.interview {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    -webkit-box-align: end;
        -ms-flex-align: end;
            align-items: flex-end;
    gap: 0.3em;
  }
  .common_title .main.interview .sub {
    margin-bottom: 4px;
  }
  .common_title .main.interview .sub + span br {
    display: none;
  }
  .common_title .main .small.pickup {
    font-size: 30px;
  }
  .simple_title {
    font-size: 40px;
  }
  /* ／ 共通*/
  /* TOP */
  #top {
    padding-block: 120px;
  }
  #top .content_wrap {
    gap: 120px;
    max-width: 1080px;
  }
  #top .wrap {
    display: grid;
    grid-template-columns: auto 30.3703703704%;
    gap: 24px;
  }
  #top .wrap .lead_wrap {
    gap: 60px;
  }
  #top .wrap .title {
    gap: 16px;
  }
  #top .wrap .title > span {
    font-size: 24px;
  }
  #top .wrap .title > span:nth-child(2) {
    padding-top: 69px;
  }
  #top .wrap .lead {
    font-size: 15px;
    line-height: 1.8;
  }
  #top .wrap .photo_wrap {
    max-width: 328px;
    width: 100%;
  }
  #top .nav_wrap {
    display: grid;
    grid-template-columns: auto 1fr;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    gap: 39px;
  }
  #top .nav_wrap ul {
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: auto auto;
    gap: 0 4px;
  }
  #top .nav_wrap ul li {
    height: 62px;
    border: none;
    position: relative;
  }
  #top .nav_wrap ul li:nth-child(n+4) {
    border-bottom: none;
  }
  #top .nav_wrap ul li:nth-child(n+4) a {
    border-bottom: solid 1px var(--col-main);
  }
  #top .nav_wrap ul li::after {
    content: "";
    position: absolute;
    top: 11px;
    bottom: 11px;
    right: -2px;
    display: block;
    width: 1px;
    height: auto;
    background: var(--col-main);
  }
  #top .nav_wrap ul li:nth-child(3)::after, #top .nav_wrap ul li:last-child::after {
    display: none;
  }
  #top .nav_wrap ul li a {
    border-top: solid 1px var(--col-main);
    font-size: 15px;
    padding: 0 8px;
    -webkit-transition: border 0.2s ease-in, color 0.2s ease-in;
    transition: border 0.2s ease-in, color 0.2s ease-in;
  }
  #top .nav_wrap ul li a::before {
    content: "";
    display: block;
    border-radius: 50%;
    border: solid 1px var(--col-main);
    width: 30px;
    height: 30px;
    position: absolute;
    right: 8px;
    top: calc(50% - 15px);
    -webkit-transition: background 0.2s ease-in;
    transition: background 0.2s ease-in;
  }
  #top .nav_wrap ul li a::after {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    -webkit-mask-image: url(../_img/arrow_nav.svg);
            mask-image: url(../_img/arrow_nav.svg);
    -webkit-mask-size: 6px 12px;
            mask-size: 6px 12px;
    -webkit-mask-position: center center;
            mask-position: center center;
    -webkit-transition: background 0.2s ease-in;
    transition: background 0.2s ease-in;
  }
}
@media screen and (min-width: 769px) and (any-hover: hover) {
  #top .nav_wrap ul li a:hover {
    background: transparent;
    color: rgba(55, 96, 171, 0.5019607843);
    border-color: rgba(55, 96, 171, 0.5019607843);
  }
  #top .nav_wrap ul li a:hover::before {
    background: var(--col-main);
  }
  #top .nav_wrap ul li a:hover::after {
    background: #fff;
  }
}
@media screen and (min-width: 769px) and (min-width: 980px) {
  #top .nav_wrap ul {
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
    grid-template-rows: auto;
  }
  #top .nav_wrap ul li a {
    border-top: solid 1px var(--col-main);
    border-bottom: solid 1px var(--col-main);
  }
  #top .nav_wrap ul li:nth-child(3)::after {
    display: block;
  }
}
@media screen and (min-width: 769px) {
  /*／TOP*/
  /* ピックアップ */
  #pickup {
    padding-block: 0 120px;
  }
  #pickup .content_wrap {
    gap: 40px;
  }
  #pickup .content_wrap .wrap {
    gap: 40px;
  }
  #pickup .content_wrap .wrap .btn_wrap {
    gap: 32px;
  }
  #pickup .btn_list_wrap {
    display: grid;
    gap: 31px;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    grid-template-columns: 50.0925925926% 1fr;
  }
  #pickup .btn_list_wrap .btn_list {
    grid-column: 1/2;
    gap: 24px;
  }
  #pickup .btn_list_wrap .btn_list li:not(:last-child) {
    position: relative;
  }
  #pickup .btn_list_wrap .btn_list li:not(:last-child)::after {
    content: "";
    position: absolute;
    bottom: -12px;
    left: 0;
    display: block;
    width: 100%;
    height: 1px;
    background: var(--col-gray);
  }
  #pickup .btn_list_wrap .btn_list a.link {
    gap: 24px;
    border-bottom: none;
  }
  #pickup .btn_list_wrap .btn_list a.link .text_wrap {
    gap: 13px;
  }
  #pickup .btn_list_wrap .btn_list a.link .text_wrap .label_wrap {
    display: grid;
    grid-template-columns: auto auto;
    gap: 12px;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }
  #pickup .btn_list_wrap .btn_list a.link .img_wrap {
    position: relative;
    padding-right: 0;
  }
  #pickup .btn_list_wrap .btn_list a.link .img_wrap .photo {
    display: none;
  }
  #pickup .btn_list_wrap .btn_list a.link .img_wrap .arrow {
    position: relative;
    top: auto;
    right: auto;
    width: 60px;
    height: 60px;
    -webkit-transition: background 0.2s ease-in;
    transition: background 0.2s ease-in;
  }
  #pickup .btn_list_wrap .btn_list a.link .img_wrap .arrow::after {
    width: 30px;
    height: 6px;
    -webkit-mask-image: url(../_img/arrow_right30.svg);
            mask-image: url(../_img/arrow_right30.svg);
  }
  #pickup .btn_list_wrap .btn_img {
    grid-column: 2/3;
    display: grid;
    aspect-ratio: 505/611;
  }
  #pickup .btn_list_wrap .btn_img > * {
    grid-area: 1/1;
  }
  #pickup .btn_list_wrap .btn_img ul {
    display: grid;
    width: 78.7401574803%;
    margin-top: 10.4330708661%;
    margin-left: 13.7795275591%;
  }
  #pickup .btn_list_wrap .btn_img ul li {
    grid-area: 1/1;
    opacity: 0;
    -webkit-transition: opacity 0.5s ease-in;
    transition: opacity 0.5s ease-in;
  }
  #pickup .btn_list_wrap .btn_img ul li img {
    aspect-ratio: 400/500;
  }
  #pickup .btn_list_wrap .btn_img ul li.img05 {
    opacity: 1;
  }
  #pickup .btn_list_wrap:has(a.btn_list01:hover) .btn_img ul li.img01 {
    opacity: 1;
    z-index: 10;
  }
  #pickup .btn_list_wrap:has(a.btn_list02:hover) .btn_img ul li.img02 {
    opacity: 1;
    z-index: 10;
  }
  #pickup .btn_list_wrap:has(a.btn_list03:hover) .btn_img ul li.img03 {
    opacity: 1;
    z-index: 10;
  }
  #pickup .btn_list_wrap:has(a.btn_list04:hover) .btn_img ul li.img04 {
    opacity: 1;
    z-index: 10;
  }
  #pickup .btn_list_wrap:has(a.btn_list05:hover) .btn_img ul li.img05 {
    opacity: 1;
    z-index: 10;
  }
  #pickup .btn_wrap {
    gap: 32px;
  }
  #pickup .pc-block {
    display: none !important;
  }
}
@media screen and (min-width: 769px) and (min-width: 1063px) {
  #pickup .pc-block {
    display: block !important;
  }
}
@media screen and (min-width: 769px) {
  /*／ ピックアップ*/
  /* 特別拝観 */
  #tokuhai {
    padding-block: 120px 80px;
  }
  #tokuhai .content_wrap {
    gap: 80px;
  }
  #tokuhai .content_wrap .title_wrap {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 80px;
  }
  #tokuhai .content_wrap .title_wrap .lead_wrap {
    margin-top: 58px;
    max-width: 675px;
    -ms-flex-item-align: start;
        align-self: start;
  }
  /* ／ 特別拝観 */
  /* 観光プラン */
  #plan .content_wrap_outer {
    padding: 260px 16px 320px;
  }
  #plan .title_wrap {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 80px;
    margin-bottom: 80px;
  }
  #plan .title_wrap .lead {
    max-width: 675px;
    line-height: 1.8;
  }
  #plan .plan_group_wrap .plan_group {
    max-width: 800px;
    margin-inline: auto;
    display: grid;
    grid-template-columns: auto 1fr;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: start;
    gap: 40px;
  }
  #plan .plan_group_wrap .plan_spot_title {
    -webkit-writing-mode: vertical-rl;
        -ms-writing-mode: tb-rl;
            writing-mode: vertical-rl;
    line-height: 1;
    letter-spacing: 0.05em;
    padding-bottom: 0;
    padding-right: 24px;
    border-right: solid 1px var(--col-main);
    border-bottom: none;
  }
  #plan .btn_wrap {
    margin-block: 80px 176px;
    padding-inline: 0;
  }
  #plan .card.profile {
    grid-column: 1/3;
  }
  #plan .card.profile .card_link .profile_top {
    grid-template-columns: 164px 1fr;
    grid-template-rows: auto 1fr;
  }
  #plan .card.profile .card_link .profile_top .profile_img {
    grid-column: 1/2;
    grid-row: 1/3;
  }
  #plan .card.profile .card_link .profile_top .profile_catch {
    grid-column: 2/3;
    grid-row: 1/2;
    font-size: 20px;
  }
  #plan .card.profile .card_link .profile_bottom {
    padding: 24px;
    gap: 48px;
    grid-template-columns: auto 1fr;
  }
  #plan .card.profile .card_link .profile_bottom dt {
    -ms-flex-line-pack: start;
        align-content: start;
    grid-template-columns: auto;
    grid-template-rows: auto auto auto;
  }
  #plan .card.profile .card_link .profile_bottom dt .profile_img {
    grid-column: 1/2;
    grid-row: 1/2;
    margin-bottom: 8px;
  }
  #plan .card.profile .card_link .profile_bottom dt > span {
    grid-column: 1/2;
    grid-row: 2/3;
    margin-block: auto;
  }
  #plan .card.profile .card_link .profile_bottom dt > .small {
    grid-column: 1/2;
    grid-row: 3/4;
    margin-block: auto;
  }
  #plan .card.profile .card_link .profile_bottom dt::after {
    bottom: auto;
    left: auto;
    right: -24px;
    width: 1px;
    height: 100%;
    border-bottom: none;
    border-right: dashed 1px var(--col-main);
  }
  #plan .card.profile .card_link .profile_bottom dd {
    line-height: 1.8;
  }
  #plan .card.profile + .card {
    padding-top: 0;
  }
  #sustainable {
    padding: 60px;
  }
  #sustainable .inner_wrap {
    padding: 0;
    gap: 56px;
  }
  #sustainable .present {
    margin: 39px auto 0;
    gap: 12px 24px;
    grid-template-columns: 200px 1fr;
    grid-template-rows: auto auto;
    padding: 24px;
  }
  #sustainable .present .present_img {
    grid-column: 1/2;
    grid-row: 1/4;
  }
  #sustainable .present .present_title {
    grid-column: 2/3;
    grid-row: 1/2;
    gap: 8px;
    grid-template-columns: auto 1fr;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }
  #sustainable .present .present_title .present_title_main {
    line-height: 1.2;
  }
  #sustainable .present .present_lead {
    grid-column: 2/3;
    grid-row: 2/3;
  }
  .plan_bottom_bg {
    margin: -200px auto 0;
    height: 200px;
  }
  /* ／ 観光プラン */
  /* 特別イベント */
  #event {
    margin-block: 0 200px;
    padding-block: 120px;
  }
  #event::after {
    height: 200px;
    top: auto;
    bottom: -200px;
  }
  #event .content_wrap {
    gap: 80px;
  }
  #event .title_wrap {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
    gap: 16px 80px;
    margin-bottom: 0;
  }
  #event .title_wrap .common_title {
    grid-column: 1/2;
    grid-row: 1/3;
  }
  #event .title_wrap .lead {
    max-width: 675px;
    line-height: 1.8;
    grid-column: 2/3;
    grid-row: 1/2;
  }
  #event .title_wrap .notes {
    grid-column: 2/3;
    grid-row: 2/3;
  }
  #event .event_list_wrap {
    display: grid;
    gap: 80px;
  }
  #event .event_list_wrap > li {
    padding: 120px min(60px, 5.5555555556%) 56px;
    gap: 40px;
  }
  #event .event_list_wrap > li .number_wrap {
    top: -17px;
  }
  #event .event_list_wrap > li .number_wrap .title {
    font-size: 15px;
    line-height: 1.5;
  }
  #event .event_list_wrap > li .number_wrap .number {
    font-size: 42px;
  }
  #event .event_list_wrap > li .img_wrap {
    aspect-ratio: 960/400;
  }
  #event .event_list_wrap > li .img_wrap img {
    aspect-ratio: 960/400;
  }
  #event .inner_wrap {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: start;
    gap: 24px 32px;
  }
  #event .inner_wrap .inner_title {
    grid-column: 1/3;
    grid-row: 1/2;
    font-size: 24px;
    line-height: 1.8;
  }
  #event .inner_dl {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    gap: 2px 0;
  }
  #event .inner_dl dt {
    font-size: 18px;
    padding: 15px 28px;
    width: 128px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }
  #event .inner_dl dd {
    padding: 8px 16px;
    width: calc(100% - 128px);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: start;
        -ms-flex-pack: start;
            justify-content: flex-start;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }
  #event #dinner .profile_wrap {
    grid-template-rows: auto;
    -webkit-box-align: stretch;
        -ms-flex-align: stretch;
            align-items: stretch;
  }
  #event #dinner .profile_wrap .profile_title {
    position: relative;
    display: grid;
    grid-template-columns: auto;
    grid-template-rows: auto auto 1fr;
    gap: 4px;
  }
  #event #dinner .profile_wrap .profile_title > figure {
    justify-self: center;
    grid-column: 1/2;
    grid-row: 1/2;
    width: 106px;
    margin-bottom: 12px;
  }
  #event #dinner .profile_wrap .profile_title .position {
    grid-column: 1/2;
    grid-row: 2/3;
    text-align: center;
  }
  #event #dinner .profile_wrap .profile_title .name {
    grid-column: 1/2;
    grid-row: 3/4;
    justify-self: center;
  }
  #event #collaboration .collaboration_main_wrap {
    width: 100%;
    grid-template-columns: 1fr 57.96875%;
    grid-template-rows: auto auto;
    gap: 60px 40px;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }
  #event #collaboration .collaboration_main_wrap .inner_wrap_pc:has(.img_wrap) {
    grid-column: 1/2;
    grid-row: 1/2;
  }
  #event #collaboration .collaboration_main_wrap .inner_wrap_pc:has(.img_wrap) .img_wrap {
    aspect-ratio: unset;
    margin-bottom: auto;
    max-width: 267px;
    width: 100%;
    margin-inline: auto 0;
  }
  #event #collaboration .collaboration_main_wrap .collaboration_wrap {
    display: contents;
  }
  #event #collaboration .collaboration_main_wrap .inner_wrap_pc:has(.collaboration_title_wrap) {
    grid-column: 2/3;
    grid-row: 1/2;
  }
  #event #collaboration .collaboration_main_wrap .inner_lead {
    grid-column: 1/3;
    grid-row: 2/3;
  }
  #event .collaboration_wrap .collaboration_title_wrap {
    max-width: 460px;
    gap: 24px;
  }
  #event .collaboration_wrap .collaboration_title_wrap .collaboration_title {
    font-size: 24px;
  }
  #event .collaboration_wrap .collaboration_title_wrap .collaboration_inner {
    width: 100%;
    max-width: none;
  }
  #event .collaboration_wrap .collaboration_title_wrap .collaboration_inner .name_wrap .category {
    font-size: 20px;
  }
  #event .collaboration_wrap .collaboration_title_wrap .collaboration_inner .name_wrap .name {
    font-size: 32px;
  }
  #event .collaboration_wrap .collaboration_title_wrap .collaboration_inner .x_wrap {
    width: 50px;
  }
  #event .collaboration_wrap .collaboration_title_wrap .collaboration_inner .x_wrap::before, #event .collaboration_wrap .collaboration_title_wrap .collaboration_inner .x_wrap::after {
    left: calc(50% - 35.5px);
    width: 71px;
  }
  #event .collaboration_wrap .collaboration_title_wrap .collaboration_inner .logo {
    max-width: 121px;
    width: 100%;
  }
  #event .talkshow_wrap {
    padding: 40px;
    gap: 32px;
  }
  #event .talkshow_wrap .talkshow_title {
    font-size: 24px;
    text-align: center;
  }
  #event .talkshow_wrap .talkshow_inner {
    grid-template-columns: 1fr 1fr;
    gap: 32px;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: start;
  }
  #event .card_list_wrap {
    gap: 99px;
  }
  #event .profile_wrap {
    padding: 40px;
    gap: 40px 48px;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: start;
  }
  #event .profile_wrap .profile_title::after {
    display: none;
  }
  #event .profile_wrap .profile_lead {
    position: relative;
  }
  #event .profile_wrap .profile_lead::before {
    content: "";
    position: absolute;
    top: 0;
    left: -24px;
    display: block;
    width: 1px;
    height: 100%;
    border-left: dashed 1px var(--col-main);
  }
  #event .profile_wrap .btn {
    grid-column: 1/3;
    grid-row: 2/3;
  }
  /* イベント03 comingsoonクラスあり */
  #event .event_list_wrap > li#collaboration:has(.comingsoon) .collaboration_main_wrap {
    grid-template-rows: auto;
  }
  #event .event_list_wrap > li#collaboration:has(.comingsoon) .collaboration_main_wrap .inner_wrap_pc:has(.img_wrap) {
    grid-row: 1/1;
  }
  #event .event_list_wrap > li#collaboration:has(.comingsoon) .collaboration_main_wrap .inner_wrap_pc:has(.collaboration_title_wrap) {
    grid-row: 1/1;
  }
  /* ／ 特別イベント */
  /* マップ */
  #map {
    padding-block: 120px;
  }
  #map .deco {
    display: block;
  }
  #map .title_wrap {
    gap: 32px;
  }
  #map .title_wrap .map_icon_list {
    display: grid;
    gap: 24px;
    max-width: 700px;
  }
  #map .title_wrap .map_icon_list ul {
    gap: 16px 32px;
  }
  #map .title_wrap .map_icon_list ul li {
    font-size: 15px;
    gap: 8px;
  }
  #map .title_wrap .map_icon_list ul li img {
    width: 30px;
  }
  #map .title_wrap .map_icon_list ul li:not(:last-child)::after {
    right: -16px;
  }
  #map .title_wrap .map_icon_list ul li:nth-child(4)::after {
    display: none;
  }
}
@media screen and (min-width: 769px) and (min-width: 990px) {
  #map .title_wrap .map_icon_list ul li:nth-child(4)::after {
    display: block;
  }
}
@media screen and (min-width: 769px) and (min-width: 990px) {
  #map .title_wrap .map_icon_list {
    max-width: none;
  }
}
@media screen and (min-width: 769px) {
  #map .map_area_wrap {
    padding: 40px;
    max-width: 880px;
  }
}
@media screen and (min-width: 769px) {
  /* ／ マップ */
  /* SPインタビュー */
  #interview {
    padding-block: 120px;
    margin-block: 200px;
  }
  #interview::before, #interview::after {
    top: -200px;
    height: 200px;
  }
  #interview::after {
    top: auto;
    bottom: -200px;
  }
  #interview .content_wrap {
    display: grid;
    gap: 56px;
  }
  #interview .content_wrap .inner_wrap {
    grid-template-columns: 1fr 588px;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    gap: 64px;
  }
  #interview .photo_overly_wrap {
    width: 100%;
    max-width: 428px;
  }
  #interview dl.lead dt {
    gap: 24px;
  }
  #interview dl.lead dt > picture {
    width: 80px;
  }
  #interview dl.lead dt .dt_inner {
    font-size: 24px;
  }
  #interview dl.lead dt .dt_inner .small {
    font-size: 15px;
  }
  /* ／ SPインタビュー */
  /* CM情報 */
  #cm {
    padding-block: 120px;
  }
  #cm .cm_wrap {
    padding: 80px 60px 56px;
    gap: 56px;
  }
  #cm .cm_wrap .cm_list_wrap {
    gap: 56px;
    max-width: 642px;
    margin-inline: auto;
  }
  #cm .cm_wrap .cm_list {
    display: grid;
    grid-template-columns: auto 1fr;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: start;
  }
  #cm .cm_wrap .cm_list_title {
    -webkit-writing-mode: vertical-rl;
        -ms-writing-mode: tb-rl;
            writing-mode: vertical-rl;
    text-orientation: upright;
    -webkit-font-feature-settings: normal;
            font-feature-settings: normal;
    font-size: 20px;
    line-height: 1;
    width: 42px;
    padding: 12px 8px;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
  }
  #cm .spot_wrap {
    gap: 40px;
  }
  #cm .spot_wrap .spot_list_wrap {
    gap: 24px;
    grid-template-columns: 1fr 1fr 1fr;
  }
  /* ／ CM情報 */
  /* おすすめ情報 */
  #recommend {
    padding-block: 120px;
    margin-block: 200px;
  }
  #recommend::before, #recommend::after {
    top: -200px;
    height: 200px;
  }
  #recommend::after {
    top: auto;
    bottom: -200px;
  }
  #recommend .reccomend_wrap {
    gap: 32px;
    grid-template-columns: 1fr 1fr;
  }
  #recommend .reccomend_wrap a {
    gap: 12px;
  }
  #recommend .reccomend_wrap a p {
    font-size: 20px;
  }
  #recommend .notes {
    text-align: right;
  }
  /* ／ おすすめ情報 */
  /* ／pc end */
}/*# sourceMappingURL=style.css.map */