/* ========== Base ========== */
*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  font-family: 'Zen Maru Gothic', 'M PLUS Rounded 1c', 'Noto Sans JP', sans-serif;
  color: #333;
  background: #fff;
}

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

.palt { font-feature-settings: "palt" 1; }

.u-inner {
  width: 1440px;
  max-width: 85%;
  margin: 0 auto;
  padding: 0 24px;
}

/* ========== FV ========== */
.fv {
  display: block;
  width: 100%;
  background: url("../img/bg_brick.png") repeat;
  background-color: #ffe6ed;
  background-size: 780px;
  line-height: 0;
}
.fv-img {
  width: 100%;
  max-width: 1440px;
  height: auto;
  margin: 0 auto;
  display: block;
  padding: 30px 0;
}

/* ========== フィーチャー ========== */
.section-features {
  background: #fff;
  padding: 80px 0 80px;
}
.features-grid {
  display: flex;
  gap: 40px;
  align-items: center;
}
.features-left { flex: 1; }
.chiikawa-label-wrap { text-align: center; }
.chiikawa-label {
  display: inline-block;
  padding: 6px 20px;
  border: 2px solid #1a5476;
  border-radius: 50px;
  background: #1a5476;
  color: #fff;
  font-size: large;
  font-weight: 700;
  letter-spacing: 1px;
  margin-bottom: 8px;
}
.features-heading {
  font-weight: 700;
  font-size: x-large;
  line-height: 1.7;
  letter-spacing: 1px;
  margin: 0 0 12px;
  color: #333;
  text-align: center;
}
.features-heading em {
  font-style: normal;
  font-size: xx-large;
  font-weight: 700;
  color: #000;
  display: block;
  margin: -4px;
}
.features-icons {
  width: 100%;
  max-width: 608px;
  margin: 0 auto;
}
.features-right {
  flex: 1;
  width: 80%;
}
.features-right img { width: 95%; }

/* ========== フレームデザイン ========== */
.section-frame {
  background: #ffe6ed;
  padding: 80px 0 80px;
}
.frame-title-wrap {
  text-align: center;
  margin-bottom: 80px;
}
.frame-en-title {
  font-size: 60px;
  font-weight: 700;
  letter-spacing: 2px;
  color: #015373;
  margin: 0;
  line-height: 1.2;
}
.frame-jp-title {
  font-size: 35px;
  font-weight: 700;
  letter-spacing: 2px;
  color: #015373;
  margin: 6px 0 0;
}
.frame-items {
  display: flex;
  flex-direction: column;
  gap: 40px;
  width: 80%;
  margin: 0 auto;
}
.frame-size-img {
  width: 100%;
  height: auto;
  display: block;
}
.fukidashi-wrap {
  margin-top: 36px;
  text-align: center;
}
.fukidashi-img {
  width: 50%;
  height: auto;
  margin: 0 auto;
  display: block;
}

/* ========== HOW TO PLAY ========== */
.section-howto {
  background: #fff;
  padding: 80px 0 0;
}
.section-howto .u-inner { max-width: 100%; }
.howto-title-wrap {
  position: relative;
  z-index: 3;
  text-align: center;
  margin-bottom: 80px;
}
.howto-en-title {
  font-size: 60px;
  font-weight: 700;
  letter-spacing: 2px;
  color: #015373;
  margin: 0;
  line-height: 1.2;
}
.howto-jp-title {
  font-size: 35px;
  font-weight: 700;
  letter-spacing: 2px;
  color: #015373;
  margin: 6px 0 0;
}
.howto-board {
  position: relative;
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  --howto-arrow-half: 48px;
  --howto-arrow-height: 53px;
}
.howto-frame-img {
  position: absolute;
  top: 100px;
  bottom: 0;
  height: 75%;
  width: auto;
  max-width: 28%;
  max-height: 100%;
  margin: 0;
  object-fit: contain;
  pointer-events: none;
  z-index: 1;
}
.howto-frame-img--left {
  left: 0;
  object-position: left center;
  transform: scale(1.4);
  transform-origin: left center;
}
.howto-frame-img--right {
  right: 0;
  object-position: right center;
  transform: scale(1.4);
  transform-origin: right center;
}
.howto-content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
}
.howto-overlay {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0;
}
.howto-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  flex: 0 0 auto;
  gap: 0.35em;
  text-align: center;
  color: #2f313a;
}
.howto-arrow {
  display: block;
  width: 0;
  height: 0;
  flex: 0 0 auto;
  margin: 32px auto;
  border-left: var(--howto-arrow-half) solid transparent;
  border-right: var(--howto-arrow-half) solid transparent;
  border-top: var(--howto-arrow-height) solid #fad9d4;
}
.howto-step--3 { padding-bottom: 60px; }
.howto-step-title {
  margin: 0;
  width: 100%;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.02em;
}
.howto-step-title--stack {
  flex-direction: column;
  align-items: center;
  gap: 0.25em;
}
.howto-hl {
  display: inline-block;
  background: #ffffcc;
  padding: 0 0.06em;
  line-height: 1.3;
  white-space: nowrap;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.howto-step-desc {
  margin: 0;
  width: 100%;
  flex: 0 0 auto;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.02em;
  color: #343741;
  white-space: nowrap;
}

/* ========== アクセス ========== */
.section-access {
  background: #fff;
  padding: 95px 0 80px;
}
.access-title-wrap {
  text-align: center;
  margin-bottom: 80px;
}
.access-en-title {
  font-size: 60px;
  font-weight: 700;
  letter-spacing: 8px;
  color: #015373;
  margin: 0;
  line-height: 1.2;
}
.access-jp-title {
  font-size: 35px;
  font-weight: 700;
  letter-spacing: 2px;
  color: #015373;
  margin: 6px 0 0;
}
.access-grid {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 36px;
  margin: 0 auto;
}
.access-map {
  position: relative;
  width: 100%;
  min-width: 0;
  height: 450px;
  overflow: hidden;
}
.access-map iframe {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  min-height: 100%;
  border: 0;
  display: block;
}
.access-info {
  font-weight: 400;
  font-size: 15px;
  padding-top: 2rem;
}
.access-dl {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.access-row {
  display: grid;
  grid-template-columns: 5em 1fr;
  column-gap: 12px;
  align-items: start;
}
.access-row dt {
  padding: 3px 0;
  border: 2px solid #1a5476;
  border-radius: 50px;
  background: #1a5476;
  color: #fff;
  font-size: 12px;
  letter-spacing: 2px;
  margin-bottom: 8px;
  text-align: center;
}
.access-row dd {
  line-height: 1.5;
  letter-spacing: 2px;
}
.access-hours span {
  padding-left: 20px;
  color: #ed0808;
}
.access-address {
  padding-bottom: 12px;
}
.access-address span {
  display: block;
  margin-top: 8px;
}
.access-address a {
  line-height: 4;
  color:#1e90ff;
} 
.access-note {
  padding-top: 30px;
  line-height: 2;
  text-align: center;
}
.access-note span {
  color: #ed0808;
}

.map-link {
  display: inline-block;
  margin-top: 24px;
  padding: 10px 28px;
  background: #1a5476;
  color: #fff;
  border-radius: 6px;
  text-decoration: none;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1px;
  transition: background 0.2s;
}
.map-link:hover { background: #0f3b56; }

/* ========== サイトフッター ========== */
.site-footer {
  background: #ffe6ed;
  padding: 60px 0 25px;
  text-align: center;
}
.site-footer-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

.footer-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  text-decoration: none;
  color: #1a5476;
}
.footer-logo {
  max-width: 420px;
  width: 100%;
  margin: 0;
}
.footer-link-text {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 2px;
  color: #1a5476;
  padding-bottom: 2px;
  margin: 0;
}

.copyright-text {
  font-size: 0.75rem;
  font-weight: 500;
  color: #1a5476;
  margin: 0;
}

.sp-mode { display: none; }
.pc-mode { display: inline-block; }

/* ========================================
  Responsive: Tablet (〜768px)
======================================== */
@media (max-width: 768px) {
  .sp-mode { display: inline-block; }
  .pc-mode { display: none; }
  .u-inner { max-width: 100%; padding: 0; }

  .fv { background-size: 300px; }
  .fv-img {
    max-width: 100%;
    padding: 16px 0;
  }
  .fv .u-inner, .section-features .u-inner, .section-howto .u-inner, .section-access .u-inner, .site-footer-inner { padding: 0 12px; }

  .section-features, .section-frame, .section-access { padding: 40px 0 40px; }
  .frame-title-wrap, .howto-title-wrap, .access-title-wrap { margin-bottom: 40px; }

  .features-grid {
    flex-direction: column;
    gap: 16px;
  }
  .features-heading { font-size: 18px; }
  .features-heading em { font-size: 22px; }
  .features-icons {
    max-width: 480px;
    width: 90%;
  }
  .frame-en-title {
    font-size: 28px;
    letter-spacing: 5px;
  }
  .frame-jp-title {
    font-size: 20px;
    letter-spacing: 2px;
  }
  .frame-items {
    width: 90%;
    gap: 20px;
  }
  .fukidashi-img { width: 75%; }
  .fukidashi-wrap { margin-top: 18px; }

  .section-howto {
    width: 100%;
    padding: 40px 0 0;
  }
  .howto-board {
    --howto-arrow-half: 32px;
    --howto-arrow-height: 35px;
  }
  .howto-frame-img {
    max-width: 18%; 
    top: 0;
    height: 100%;
  }
  .howto-frame-img--left, .howto-frame-img--right {
    transform: none;
  }  
  .howto-en-title {
    font-size: 28px;
    letter-spacing: 5px;
  }
  .howto-jp-title {
    font-size: 20px;
    letter-spacing: 2px;
  }
  .howto-overlay { padding: 0; }
  .howto-step--3 { padding-bottom: 40px; }
  .howto-step-title {
    font-size: 16px;
    line-height: 1.25;
  }
  .howto-step-title--stack { gap: 0.2em; }
  .howto-step-desc { font-size: 12px; }
  .howto-arrow { margin: 20px auto; }

  .access-en-title {
    font-size: 28px;
    letter-spacing: 5px;
  }
  .access-jp-title {
    font-size: 20px;
    letter-spacing: 2px;
  }
  .access-grid {
    width: 90%;
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .access-map { height: 260px; }
  .access-note { padding: 30px 12px 0 12px; }
  .access-hours span { padding-left: 0; }

  .footer-logo { max-width: 240px; }
}

/* ========================================
  Responsive: Mobile (〜480px)
======================================== */
@media (max-width: 480px) {
  .fv .u-inner, .section-features .u-inner, .section-access .u-inner, .site-footer-inner { padding: 0 8px; }

  .chiikawa-label {
    font-size: 11px;
    padding: 5px 14px;
  }
  .frame-en-title {
    font-size: 22px;
    letter-spacing: 3px;
  }
  .frame-jp-title {
    font-size: 16px;
    letter-spacing: 1px;
  }

  .howto-board {
    --howto-arrow-half: 20px;
    --howto-arrow-height: 22px;
  }
  .howto-en-title {
    font-size: 22px;
    letter-spacing: 3px;
  }
  .howto-jp-title {
    font-size: 16px;
    letter-spacing: 1px;
  }
  .howto-overlay {
    padding: 0;
  }
  .howto-step-title {
    font-size: 13px;
    line-height: 1.22;
    letter-spacing: 0;
  }
  .howto-step-title--stack { gap: 0.15em; }
  .howto-step-title--stack .howto-hl { line-height: 1.2; }
  .howto-step-desc { font-size: 10px; }
  .howto-hl { padding: 0 0.04em; }

  .access-en-title {
    font-size: 22px;
    letter-spacing: 3px;
  }
  .access-jp-title {
    font-size: 16px;
    letter-spacing: 1px;
  }
  .access-row { grid-template-columns: 4em 1fr; }
  .access-row dd { font-size: 12px; }
  .access-note {
    padding: 30px 8px 0;
    font-size: 13px;
  }

  .footer-link-text {
    font-size: 12px;
    letter-spacing: 1px;
  }
}