@charset "UTF-8";

:root {
  interpolate-size: allow-keywords;
  --blk: #000;
  --dgry: #999;
  --gry: #ccc;
  --lgry: #f5f5f5;
  --wht: #fff;
  --transition: all 0.3s ease-in-out;
}

/* ==================================
リセット・調整・ファンデーション
===================================== */
body {
  overflow-x: clip;
}
.main {
  overflow: clip;
}

body {
  /* 日本語（漢字・ひらがな・カタカナ）と半角英数字の間に、自動で適切な「隙間（アキ）」を入れる */
  text-autospace: normal;
  /* 画面幅に収まらない非常に長い英単語や URL、電子メールアドレスなどがある場合、どこでも強制的に改行させる */
  overflow-wrap: anywhere;
  /* ブラウザが機械学習や高度な解析（Google の BudouX などの技術）を利用し、日本語の文節を自動で判別して適切な位置で折り返す */
  word-break: auto-phrase;
  /* 主に見出し（4〜6行未満）に使い、各行の文字数がだいたい同じ（左右のバランスが均等）になるように改行する */
  /* text-wrap: balance; */
  /* 主に本文（長文）に使い、「行の最後に1文字だけポツンと残る」といった不自然な改行（孤立文字）を防ぐように、前の行の改行位置を賢く調整 */
  /* text-wrap: pretty; */
}

/* ==================================
moduleアレンジ
===================================== */
.main__pageNavi--menu.flex-column li {
  padding: 1rem 1em;
  text-align: center;
}
.main__pageNavi--menu.flex-column li + li {
  border-top: 1px solid #fff;
}
.main__pageNavi--menu.flex-column li + li::before {
  content: unset;
}

/* ==================================
タイポ
===================================== */
/*---------- font-family ----------*/
.ff-nycd {
  font-family: "Nothing You Could Do", cursive;
}
.ff-shippori {
  font-family: "Shippori Mincho", serif;
}

/*---------- 袋文字 ----------*/
.text-hukuro {
  text-shadow:
    2px 2px 1px var(--blk),
    -2px 2px 1px var(--blk),
    2px -2px 1px var(--blk),
    -2px -2px 1px var(--blk),
    2px 0px 1px var(--blk),
    0px 2px 1px var(--blk),
    -2px 0px 1px var(--blk),
    0px -2px 1px var(--blk);
}
.text-hukuro-wht {
  text-shadow:
    2px 2px 1px var(--wht),
    -2px 2px 1px var(--wht),
    2px -2px 1px var(--wht),
    -2px -2px 1px var(--wht),
    2px 0px 1px var(--wht),
    0px 2px 1px var(--wht),
    -2px 0px 1px var(--wht),
    0px -2px 1px var(--wht);
}

/*---------- text-stroke ----------*/
.text-stroke {
  -webkit-text-stroke: 0.0625em var(--blk);
  /* text-stroke: 0.0625em var(--blk); */
  paint-order: stroke;
}
.text-stroke-wht {
  -webkit-text-stroke: 0.0625em var(--wht);
  /* text-stroke: 0.0625em var(--wht); */
  paint-order: stroke;
}

/*---------- text-shadow ----------*/
.text-shadow {
  text-shadow: 0px 0px 0.25em var(--blk);
}
.text-shadow-wht {
  text-shadow: 0px 0px 0.25em var(--wht);
}

/*---------- マーカーのあしらい ----------*/
mark {
  background: linear-gradient(transparent 60%, yellow 60%);
}

/*---------- テキストをグラデーションにするベース ----------*/
.text-grad {
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  display: inline-block;
}

/* ========================================
パーツ
======================================== */
/*---------- table ----------*/
.p-table {
  --padding: 0.75em 0.5em;
  border-collapse: collapse;
  th,
  td {
    /* vertical-align: baseline; */
    padding: var(--padding);
  }
  th {
    /* text-align: start; */
    text-wrap: nowrap;
  }
}
.p-table.--border-bottom {
  tr {
    border-bottom: 1px solid #ccc;
  }
}
.p-table.--column {
  tr {
    display: flex;
    flex-direction: column;
    > th,
    > td {
      width: 100%;
    }
    > td {
      padding-top: 0;
    }
  }
}
@media print, screen and (max-width: 768px) {
  .p-table.--sp-column {
    tr {
      display: flex;
      flex-direction: column;
      > th,
      > td {
        width: 100%;
      }
      > td {
        padding-top: 0;
      }
    }
  }
}

/*---------- 背景のベース ----------*/
/* 背景画像を敷く場合、
   背景画像に各色のフィルターをかける場合
   疑似要素を配置したいときのベース */
.p-bg {
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  position: relative;
  z-index: 1;
  /* opacity（濃さ）はstyleでCSS変数を書き換える
     ex) style="--bg-opacity: 0.5;" */
  --bg: transparent;
  --bg-opacity: 0.3;
  --bg-after: transparent;
  --bg-after-opacity: 0;

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

  /* 疑似要素のファンデーション */
  &::before,
  &::after {
    content: "";
    display: block;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    border-radius: inherit;
    pointer-events: none;
  }
  &::before {
    background-color: var(--bg);
    opacity: var(--bg-opacity);
  }
  &::after {
    background-color: var(--bg-after);
    opacity: var(--bg-after-opacity);
  }

  /* ぼかしフィルター
     強さはstyleでCSS変数を書き換える
     ex) style="--blur: 1em;" */
  &.--blur {
    --blur: 0.5rem;
  }
  &.--blur::after {
    backdrop-filter: blur(var(--blur));
    opacity: 1;
  }

  /* 乗算 */
  &.--multiply::before,
  &.--multiply::after {
    mix-blend-mode: multiply;
  }
}

/*---------- outlineで作る枠線 ----------*/
.c-outline {
  --ol-color: var(--wht);
  --ol-style: solid;
  --ol-width: 1px;
  --ol-offset: 0;
  outline-color: var(--ol-color);
  outline-style: var(--ol-style);
  outline-width: var(--ol-width);
  outline-offset: var(--ol-offset);
}

/* ==================================
ユーティリティー
===================================== */
/*---------- 画像の比率 ----------*/
.u-aspect {
  /* 縦横比はstyleでCSS変数を書き換える
     ex) style="--aspect: 2.51 / 1;" */
  --aspect: auto;

  @media print, screen and (min-width: 576px) {
    --aspect-sm: var(--aspect);
  }
  @media print, screen and (min-width: 769px) {
    --aspect-md: var(--aspect-sm);
  }
  @media print, screen and (min-width: 992px) {
    --aspect-lg: var(--aspect-md);
  }
  @media print, screen and (min-width: 1200px) {
    --aspect-xl: var(--aspect-lg);
  }
  @media print, screen and (min-width: 1400px) {
    --aspect-xxl: var(--aspect-xl);
  }

  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    aspect-ratio: var(--aspect);

    @media print, screen and (min-width: 576px) {
      aspect-ratio: var(--aspect-sm);
    }
    @media print, screen and (min-width: 769px) {
      aspect-ratio: var(--aspect-md);
    }
    @media print, screen and (min-width: 992px) {
      aspect-ratio: var(--aspect-lg);
    }
    @media print, screen and (min-width: 1200px) {
      aspect-ratio: var(--aspect-xl);
    }
    @media print, screen and (min-width: 1400px) {
      aspect-ratio: var(--aspect-xxl);
    }
  }

  /* 画像全体を枠内に入れたいとき */
  &.--contain img,
  .--contain img {
    object-fit: contain;
  }
}

/* ==================================
ベース・コンポーネント
===================================== */
/*---------- 背景 ----------*/
.bg-noise {
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.5' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.1'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 200px 200px;
}

:where(.main) {
  /* background-color: #F0DED2; */
  /* background-color: #104a60; */
  color: #fff;
}

/*---------- ボタン ----------*/
.c-btn {
  display: inline-flex;
  align-items: center;
  column-gap: 0.8rem;
  width: 100%;
  max-width: 25rem;
  min-height: 5rem;
  border-width: 1px;
  transition-property:
    color,
    background-color,
    border-color,
    text-decoration-color,
    fill,
    stroke,
    -webkit-text-decoration-color;
  transition-duration: 300ms;
}

/* ==================================
プロジェクト、パーツ
===================================== */
/*---------- 画像ループスライダー（CSS） ----------*/
.p-loop-img {
  .p-loop-box {
    display: flex;

    .c-loop-img {
      display: flex;
      /* スライドの枚数 ÷ 表示させたい枚数 × 100vw */
      width: 12vw;

      /* @media print, screen and (min-width: 769px) {
        width: 150vw;
      }

      @media print, screen and (min-width: 992px) {
        width: 100vw;
      } */
    }
  }
}

/* ループアニメーション */
@keyframes loop-img {
  0% {
    transform: translateX(100%);
  }
  to {
    transform: translateX(-100%);
  }
}

@keyframes loop-img-02 {
  0% {
    transform: translateX(0);
  }
  to {
    transform: translateX(-200%);
  }
}

.p-loop-img .c-loop-item:first-child {
  -webkit-animation: loop-img 50s -25s linear infinite;
  animation: loop-img 50s -25s linear infinite;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  will-change: transform;
}

.p-loop-img .c-loop-item + .c-loop-item {
  -webkit-animation: loop-img-02 50s linear infinite;
  animation: loop-img-02 50s linear infinite;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  will-change: transform;
}

@keyframes loop-img-rev {
  0% {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(100%);
  }
}

@keyframes loop-img-02-rev {
  0% {
    transform: translateX(-200%);
  }
  to {
    transform: translateX(0%);
  }
}

.p-loop-img.--rev .c-loop-item:first-child {
  -webkit-animation: loop-img-rev 50s -25s linear infinite;
  animation: loop-img-rev 50s -25s linear infinite;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  will-change: transform;
}

.p-loop-img.--rev .c-loop-item + .c-loop-item {
  -webkit-animation: loop-img-02-rev 50s linear infinite;
  animation: loop-img-02-rev 50s linear infinite;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  will-change: transform;
}

/*---------- pt2 ----------*/
.p-infinite-carousel {
  display: flex;
  overflow: hidden;
}

.c-infinite-carousel__list {
  display: flex;
  animation: infinity-scroll-from-left 30s infinite linear;
}

.c-infinite-carousel__item {
  /* margin-left: 10px;
  width: 200px;
  aspect-ratio: 1; */
  width: 100vw;
}

@keyframes infinity-scroll-from-left {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-100%);
  }
}

/*---------- マップ ----------*/
.l-map {
  position: relative;
}
[class^="l-map-item"] {
  position: absolute;
  z-index: 1;
  /* width: 14%; */
  > button {
    font-size: 0.8rem;
    > img {
      width: 4rem;
      margin-inline: auto;
    }
  }
}
@media print, screen and (min-width: 769px) {
  [class^="l-map-item"] {
    /* width: 10%; */
    > button {
      font-size: 1rem;
      > img {
        width: 6rem;
      }
    }
  }
}

.l-map-item-standard {
  top: 65%;
  left: 80%;
}
@media print, screen and (min-width: 769px) {
  .l-map-item-standard {
    top: 65%;
    left: 80%;
  }
}
/* .l-map-item-00 {
  bottom: 20%;
  right: 16%;
}
@media print, screen and (min-width: 769px) {
  .l-map-item-00 {
    bottom: 20%;
    right: 16%;
  }
} */
.l-map-item-01 {
  top: 32%;
  left: 64%;
}
@media print, screen and (min-width: 769px) {
  .l-map-item-01 {
    top: 32%;
    left: 63%;
  }
}
.l-map-item-02 {
  top: 30%;
  left: 87%;
}
@media print, screen and (min-width: 769px) {
  .l-map-item-02 {
    top: 30%;
    left: 87%;
  }
}
.l-map-item-03 {
  top: 66%;
  left: 52%;
}
@media print, screen and (min-width: 769px) {
  .l-map-item-03 {
    top: 66%;
    left: 52%;
  }
}
.l-map-item-04 {
  top: 15%;
  left: 15%;
}
@media print, screen and (min-width: 769px) {
  .l-map-item-04 {
    top: 15%;
    left: 15%;
  }
}
.l-map-item-05 {
  top: 48%;
  left: 49%;
}
@media print, screen and (min-width: 769px) {
  .l-map-item-05 {
    top: 48%;
    left: 49%;
  }
}
.l-map-item-06 {
  top: 65%;
  left: 20%;
}
@media print, screen and (min-width: 769px) {
  .l-map-item-06 {
    top: 65%;
    left: 20%;
  }
}
.l-map-item-07 {
  top: 15%;
  left: 80%;
}
@media print, screen and (min-width: 769px) {
  .l-map-item-07 {
    top: 15%;
    left: 80%;
  }
}
.l-map-item-08 {
  top: 15%;
  left: 67.5%;
}
@media print, screen and (min-width: 769px) {
  .l-map-item-08 {
    top: 15%;
    left: 67.5%;
  }
}
.l-map-item-09 {
  top: 12%;
  left: 57%;
}
@media print, screen and (min-width: 769px) {
  .l-map-item-09 {
    top: 12%;
    left: 57%;
  }
}
.l-map-item-10 {
  top: 7%;
  left: 42%;
}
@media print, screen and (min-width: 769px) {
  .l-map-item-10 {
    top: 7%;
    left: 42%;
  }
}
.l-map-item-11 {
  top: 45%;
  left: 37%;
}
@media print, screen and (min-width: 769px) {
  .l-map-item-11 {
    top: 45%;
    left: 40%;
  }
}
.l-map-item-12 {
  top: 30%;
  left: 54%;
}
@media print, screen and (min-width: 769px) {
  .l-map-item-12 {
    top: 30%;
    left: 54%;
  }
}
.l-map-item-13 {
  top: 55%;
  left: 10%;
}
@media print, screen and (min-width: 769px) {
  .l-map-item-13 {
    top: 55%;
    left: 10%;
  }
}
.l-map-item-14 {
  top: 24%;
  left: 40%;
}
@media print, screen and (min-width: 769px) {
  .l-map-item-14 {
    top: 24%;
    left: 40%;
  }
}
.l-map-item-15 {
  top: 85%;
  left: 15%;
}
@media print, screen and (min-width: 769px) {
  .l-map-item-15 {
    top: 85%;
    left: 15%;
  }
}
.l-map-item-16 {
  top: 55%;
  left: 74%;
}
@media print, screen and (min-width: 769px) {
  .l-map-item-16 {
    top: 55%;
    left: 74%;
  }
}
.l-map-item-17 {
  top: 75%;
  left: 73.5%;
}
@media print, screen and (min-width: 769px) {
  .l-map-item-17 {
    top: 75%;
    left: 73.5%;
  }
}
.l-map-item-18 {
  top: 49%;
  left: 60%;
}
@media print, screen and (min-width: 769px) {
  .l-map-item-18 {
    top: 49%;
    left: 58%;
  }
}