/*
Theme Name: osakaodekakekids
Theme URI: https://osakaodekakekids.com/
Author: icca
Author URI: https://osakaodekakekids.com/
Description: 大阪こどもとおでかけ.com 用テーマ
Version: 1.0
Text Domain: osakaodekakekids
*/

/* =====================================
   Reset / Base
===================================== */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 15px;
}

body {
  font-family: "Noto Sans JP", sans-serif;
  font-optical-sizing: auto;
  font-weight: 500;
  font-style: normal;
  letter-spacing: 0.03rem;
  color: #333233;
}

a {
  text-decoration: none;
  color: #333233;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  cursor: pointer;
}

ol {
  list-style: none;
}

/* 画像のドラッグ・選択・長押しメニューを抑制（全画像） */
img {
  -webkit-user-drag: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}

/* 画像リンクの長押しメニュー抑制（iOS対策） */
a:has(img) {
  -webkit-touch-callout: none;
}

/* 例外にしたい時は .allow-save を付与 */
.allow-save,
.allow-save img {
  -webkit-user-drag: auto;
  user-select: text;
  -webkit-user-select: text;
  -webkit-touch-callout: default;
}

.container {
  width: 100%;
  margin: auto;
}

/* PCでは非表示（769px以上） */
@media (min-width: 769px) {
  .sp-only {
    display: none !important;
  }
}

/* SPでは表示 */
@media (max-width: 768px) {
  .sp-only {
    display: block; /* 必要なら flex 等に変更 */
  }
}

/* =========================
   ローディング画面（body.is-loadedで消す：整理版）
   ※ #loading-screen はこの1回だけ定義する
========================= */

#loading-screen {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: #ffffff;

  display: flex;
  align-items: center;
  justify-content: center;

  opacity: 1;
  visibility: visible;
  pointer-events: auto;

  transition:
    opacity 0.4s ease,
    visibility 0s linear 0.4s;
}

/* load後に消える（footer.php の is-loaded と連動） */
body.is-loaded #loading-screen {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* 中身（ボックス感なし） */
#loading-screen .loading-inner {
  text-align: center;
  padding: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

/* ロゴ */
#loading-screen .loading-logo {
  margin-bottom: 8px;
}
#loading-screen .loading-logo img {
  width: 50px;
  height: auto;
  display: block;
  margin: 0 auto 12px;
}

/* Loading... を1文字ずつ動かす */
.loading-letters span {
  display: inline-block;
  animation: loading-bounce 0.6s ease-in-out infinite alternate;
}

/* 1文字ずつ遅延 */
.loading-letters span:nth-child(1) {
  animation-delay: 0s;
}
.loading-letters span:nth-child(2) {
  animation-delay: 0.05s;
}
.loading-letters span:nth-child(3) {
  animation-delay: 0.1s;
}
.loading-letters span:nth-child(4) {
  animation-delay: 0.15s;
}
.loading-letters span:nth-child(5) {
  animation-delay: 0.2s;
}
.loading-letters span:nth-child(6) {
  animation-delay: 0.25s;
}
.loading-letters span:nth-child(7) {
  animation-delay: 0.3s;
}
.loading-letters span:nth-child(8) {
  animation-delay: 0.35s;
}
.loading-letters span:nth-child(9) {
  animation-delay: 0.4s;
}
.loading-letters span:nth-child(10) {
  animation-delay: 0.45s;
}

@keyframes loading-bounce {
  0% {
    transform: translateY(0);
    opacity: 1;
  }
  100% {
    transform: translateY(-6px);
    opacity: 0.8;
  }
}

/* =====================================
   Header / Logo
===================================== */
.navbar {
  box-shadow: 0px 3px 0px #eee;
}
.logo {
  text-align: center;
}
.logo img {
  margin: 25px auto 15px;
}
@media (min-width: 769px) {
  .logo img {
    margin: 32px auto 28px;
    height: 25px;
  }
}
.anim-box.poyoyologo.is-animated {
  animation: poyoyologo 1.5s ease-in-out forwards;
}
@keyframes poyoyologo {
  0% {
    transform: scale(1, 1) translate(0, 0);
  }
  15% {
    transform: scale(0.98, 0.9) translate(0, 5px);
  }
  30% {
    transform: scale(1.02, 1) translate(0, 8px);
  }
  50% {
    transform: scale(0.98, 1.05) translate(0, -8px);
  }
  70% {
    transform: scale(1, 0.9) translate(0, 5px);
  }
  100% {
    transform: scale(1, 1) translate(0, 0);
  }
  0%,
  100% {
    opacity: 1;
  }
}

/* =====================================
   お知らせ（news）
===================================== */
.new {
  display: flex;
  align-items: center;
  width: 100%;
  padding-left: 10px;
}
.new-icon {
  font-size: 10px;
  border-radius: 15px;
  background-color: #f4677b;
  color: #fff;
  padding: 0 10px 3px;
  line-height: 2.5;
}
.new-icon + div {
  height: 52px;
  padding: 17px 10px 0;
  font-size: 0.8rem;
  line-height: 1.2;
}

/* =====================================
   メインスクロールメニュー（タブ風）
===================================== */
.anim-box.poyopoyo {
  animation: poyopoyo 3s ease-out 1;
  opacity: 1;
}
@keyframes poyopoyo {
  0% {
    opacity: 0;
  }
  70% {
    opacity: 1;
  }
}

/* 1行で適用、番号だけ割り当てる方式 */
.main-menu .main-menu-inner a img.anim-box.poyopoyo {
  animation-delay: calc(var(--i, 0) * 0.2s);
}
.main-menu .main-menu-inner a:nth-of-type(1) {
  --i: 0;
}
.main-menu .main-menu-inner a:nth-of-type(2) {
  --i: 1;
}
.main-menu .main-menu-inner a:nth-of-type(3) {
  --i: 2;
}
.main-menu .main-menu-inner a:nth-of-type(4) {
  --i: 3;
}
.main-menu .main-menu-inner a:nth-of-type(5) {
  --i: 4;
}
.main-menu .main-menu-inner a:nth-of-type(6) {
  --i: 5;
}
.main-menu .main-menu-inner a:nth-of-type(7) {
  --i: 6;
}

/* タブ色＆CPTカラー（見出しの背景色） */
#tab00 {
  background-color: #fff;
  border-left: 1px solid #333233;
}
#tab01,
#park,
#park h2 span {
  background-color: #d4d89d;
}
#tab02,
#water_play,
#water_play h2 span {
  background-color: #9edddd;
}
#tab03,
#amusement_park,
#amusement_park h2 span {
  background-color: #ffb3b3;
}
#tab04,
#indoor,
#indoor h2 span {
  background-color: #fce481;
}
#tab05,
#experience,
#experience h2 span {
  background-color: #99d6ff;
}
#tab06,
#mall,
#mall h2 span {
  background-color: #d3c7dd;
}
#tab07,
#restaurant,
#restaurant h2 span {
  background-color: #f9b587;
}
#tab08,
#event,
#event h2 span {
  background-color: #e8e0d1;
}
@media (min-width: 769px) {
  #tab08,
  #info,
  #info h2 span {
    background-color: #e8e0d1;
  }
}
#tab09,
#item,
#item h2 span {
  background-color: #f9ea82;
}
#tab10,
#beneficial,
#beneficial h2 span {
  background-color: #ffb5a9;
}
#tab11,
#stay,
#stay h2 span {
  background-color: #b9dbb9;
}

.main-menu-inner a {
  margin-left: -1px;
}
#tab00 {
  margin-left: 0px;
}

@media (min-width: 431px) {
  #tab00 {
    margin-left: -1px;
  }
}
.contents {
  background-color: #fff;
  border-top: 1px solid #333233;
  margin-top: -1px;
  padding: 10px 0;
}

.main-menu-inner {
  display: flex;
  flex-wrap: nowrap;
  width: 880px;
}
.tab-label {
  cursor: pointer;
  flex: 1;
  order: -1;
  padding: 7px 10px 5px;
  position: relative;
  text-align: center;
  transition: cubic-bezier(0.4, 0, 0.2, 1) 0.2s;
  user-select: none;
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
  display: flex;
  flex-direction: column;
  font-size: 0.75rem;
  justify-content: flex-end;
  align-items: center;
  border-top-left-radius: 7px;
  border-top-right-radius: 7px;
  border: 1px solid #333233;
  border-bottom: none;
}
.tab-label img {
  margin-bottom: 3px;
}
.tab-label:hover {
  background: rgba(0, 191, 255, 0.1);
}

.main-menu,
.tab-content {
  width: 100%;
}
.main-menu {
  /* 横スク可能なタブ帯 */
  overflow-x: auto;
  white-space: nowrap;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
  visibility: visible;
}
.main-menu::-webkit-scrollbar {
  display: none;
}

.main-menu-inner {
  box-shadow: none;
  overflow: visible;
}
.main-menu-inner a {
  border-bottom: 1px solid #333233;
}
/* =========================
   ヘッダーメニュー共通
========================= */

/* 全タブは通常、下線あり */
.main-menu .main-menu-inner a {
  border-bottom: 1px solid #333233;
  box-sizing: border-box;
}

/* 現在地タブだけ下線なし */
body.home #tab00,
body.post-type-archive-event #tab08,
body.single-event #tab08,
body.post-type-archive-park #tab01,
body.single-park #tab01,
body.post-type-archive-water_play #tab02,
body.single-water_play #tab02,
body.post-type-archive-amusement_park #tab03,
body.single-amusement_park #tab03,
body.post-type-archive-indoor #tab04,
body.single-indoor #tab04,
body.post-type-archive-experience #tab05,
body.single-experience #tab05,
body.post-type-archive-mall #tab06,
body.single-mall #tab06,
body.post-type-archive-restaurant #tab07,
body.single-restaurant #tab07,
body.post-type-archive-item #tab09,
body.single-item #tab09,
body.post-type-archive-beneficial #tab10,
body.single-beneficial #tab10,
body.post-type-archive-stay #tab11,
body.single-stay #tab11 {
  border-bottom: 0 !important;
}
@media (min-width: 769px) {
  body.home #tab08 {
    border-bottom: 0 !important;
  }
}
/* =====================================
   絞り込み（カテゴリチップ）共通
   ※ 親だけ横スク／子は1行横並び
===================================== */
/* 入力は視覚的に隠す（アクセシブルに残す） */
.category-inner input[type="checkbox"] {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* 親：横スク容器 */
.category {
  position: relative;
  width: 100% !important;
  max-width: 100% !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  -webkit-overflow-scrolling: touch;
  white-space: normal !important;
  contain: inline-size;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.category::-webkit-scrollbar {
  display: none;
}

/* 子：1行化（inline-block並び） */
.category-inner {
  display: block !important;
  white-space: nowrap !important;
  font-size: 0; /* inline-block の隙間を消す */
  padding-left: 10px;
}
.category-inner > div {
  display: inline-block !important;
  vertical-align: top;
  font-size: 0.7rem; /* 親の 0 を戻す */
  flex: none !important;
}

/* チップ */
.category label {
  display: inline-block;
  line-height: 1.2;
  background: #fff;
  color: #333;
  padding: 5px 15px 6px;
  margin: 5px 10px 5px 0;
  border: 1px solid #333233;
  border-radius: 30px;
  cursor: pointer;
  transition:
    background 0.15s,
    color 0.15s,
    border-color 0.15s,
    box-shadow 0.15s;
}
.category label:hover {
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
}

/* 選択中（反転） */
.category-inner input[type="checkbox"]:checked + label {
  background: #333;
  color: #fff;
  border-color: #333;
}

/* キーボードフォーカス */
.category-inner input[type="checkbox"]:focus-visible + label {
  outline: 2px solid #333;
  outline-offset: 3px;
}

/* フェード演出（既存） */
.fade-in {
  animation: fadeIn 0.3s ease forwards;
}
.fade-out {
  animation: fadeOut 0.3s ease forwards;
}
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes fadeOut {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    transform: translateY(10px);
  }
}

/* =====================================
   地域ボタン（#リンク）
===================================== */
.area {
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  white-space: nowrap;
}
.area::-webkit-scrollbar {
  display: none;
}

.area .area-label.is-disabled {
  opacity: 0.35;
  pointer-events: none;
}

.area-inner {
  display: flex;
  padding-left: 10px;
}
.area-inner div {
  flex-shrink: 0;
  font-size: 0.7rem;
}
.area-inner a {
  display: inline-block;
  line-height: 1.1;
  background-color: #e0e0e0;
  padding: 5px 15px 6px;
  margin: 5px 10px 5px 0;
  border: 1px solid #333233;
  border-radius: 30px;
}
.area-inner span {
  font-weight: 900;
  font-size: 0.8rem;
  line-height: 0.8;
}
/* ページ内リンクの#色分け */
.area-inner > div:nth-of-type(1) > a > span {
  color: #fc6fb2;
}
.area-inner > div:nth-of-type(2) > a > span {
  color: #eac52a;
}
.area-inner > div:nth-of-type(3) > a > span {
  color: #ff7727;
}
.area-inner > div:nth-of-type(4) > a > span {
  color: #40cdea;
}
.area-inner > div:nth-of-type(5) > a > span {
  color: #b688e2;
}
.area-inner > div:nth-of-type(6) > a > span {
  color: #fc6fb2;
}
.area-inner > div:nth-of-type(7) > a > span {
  color: #eac52a;
}

/* disabled時 */
.area-inner a.is-disabled > span {
  opacity: 0.5;
}

/* =====================================
   地域見出し（h2）
===================================== */
h2 {
  position: relative;
  padding: 0px;
  text-align: center;
  margin: 10px 10px 0;
  font-size: 0.95rem;
}
.contents h2:before {
  position: absolute;
  top: calc(50% - 1px);
  left: 0;
  width: 100%;
  height: 1px;
  content: "";
  background: #333233;
}
h2 span {
  position: relative;
  padding: 0 1em;
  background: #fff;
}
h2:not(:first-of-type) {
  margin-top: 20px;
}

/* =====================================
   PR注意書き
===================================== */
.pr {
  font-size: 0.6rem;
  padding: 5px 10px 0;
}

/* =====================================
   TOP
===================================== */
#top {
  text-align: center;
}
#top .target {
  padding: 20px 15px;
  background-color: #e6e6e6 !important;
}
#top .target p {
  font-size: 0.7rem;
  text-align: center;
  display: block;
}
#top .target p:not(:first-of-type) {
  margin-top: 10px;
}
#top .target img {
  margin-top: 10px;
}
.black_line {
  text-decoration: underline;
  text-underline-offset: 1px;
}
.new a {
  text-decoration: underline;
  text-underline-offset: 1px;
}
#top .target img.instagram_icon {
  margin-top: 0px;
  border-radius: 50%;
}
/* 左カラム内の画像はカラム幅基準にする */
.info-column img {
  max-width: 100%;
  height: auto;
}

/* インスタアイコンだけ30% */
.info-column .instagram_icon {
  width: 30%;
}

/* 説明画像は100% */
.info-column .rule_img {
  width: 100%;
}
/* =====================================
   遊びスポット（カード）
===================================== */
.targets {
  margin-top: 0;
}

.spot,
.info-spot {
  border: 1px solid #333233;
  font-size: 0.8rem;
  background-color: #fff;
  margin: 15px 10px 10px;
  border-radius: 7px;
}
.spot_detail {
  display: flex;
  padding: 10px 15px 15px;
}

.spot_top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
}
.spot_top div {
  margin-right: 13px;
  padding: 0 15px 2px;
  font-size: 0.65rem;
  border-radius: 30px;
  background-color: #eee;
  margin-top: 5px;
  line-height: 2;
}
.spot_top .emoji {
  font-size: 0.8rem;
}

p.lead {
  font-size: 0.7rem;
  border-top-left-radius: 6px;
  border-bottom-right-radius: 7px;
  border: 1px solid #333233;
  background-color: #333233;
  color: #fff;
  padding: 5px 11px 7px 13px;
  font-weight: 500;
  letter-spacing: 0.06rem;
}

.spot_top .pr-label {
  position: absolute;
  right: 0px;
  top: 5px;
  padding: 2px 10px;
  border-radius: 30px;
}

.link {
  border-bottom: 2px dotted #333233;
  padding-bottom: 1px;
}
.link + div.link-icon {
  padding-top: 12px;
}

h3 {
  font-size: 1.2rem;
  margin: 6px 15px 0;
  text-align: center;
  justify-content: center;
}
/* 見出しの装飾色（周期で変化） */
.spot:nth-child(2n) h3 {
  text-decoration-color: #a7c9d2;
}
.spot:nth-child(3n) h3 {
  text-decoration-color: #ffdd8f;
}
.spot:nth-of-type(4n) h3 {
  text-decoration-color: #dacc63;
}
.spot:nth-of-type(5n) h3 {
  text-decoration-color: #d5bad8;
}
.spot:nth-of-type(6n) h3 {
  text-decoration-color: #ffd5d5;
}

img.spot_main_img {
  width: 150px;
  height: 150px;
  object-fit: cover;
  position: relative;
  border-radius: 7px;
}
.img > a:first-of-type {
  position: relative;
  display: block;
  line-height: 0;
}
.img > a:first-of-type .more {
  position: absolute;
  left: 4px;
  bottom: 3px;
}

span.quote {
  position: absolute;
  right: 5px;
  bottom: 10px;
  color: #fff;
  filter: drop-shadow(0 0 0.1rem #000);
  font-size: 0.5rem;
  letter-spacing: 0.01rem;
}

.spot .txt,
.info-spot .txt {
  padding: 0 0 0 10px;
  width: 100%;
  font-size: 0.75rem;
}
.spot p,
.info-spot p {
  display: flex;
  align-items: flex-start;
  line-height: 1.3;
  margin-bottom: 4px;
}

.link-icon {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 15px;
  justify-content: flex-start; /* デフォは左寄せ（2個以下想定） */
  margin-top: 10px;
}

/* 1つでも .hidden があれば左寄せのまま */
.link-icon:has(> a.hidden) {
  justify-content: flex-start;
}

/* hidden が無い＝3個全部見えてる → 均等配置 */
.link-icon:not(:has(> a.hidden)) {
  justify-content: space-between;
  gap: 5px;
}

/* 完全非表示にする */
.link-icon a.hidden {
  display: none !important;
}

.link-icon:not(:has(a:not(.hidden))) {
  display: none;
}
img.map {
  filter: drop-shadow(0 0 0.1rem #999);
}

.emoji {
  padding-right: 2px;
  font-family:
    apple color emoji,
    segoe ui emoji,
    noto color emoji,
    android emoji,
    emojisymbols,
    emojione mozilla,
    twemoji mozilla,
    segoe ui symbol;
}

a.official {
  border: 1px solid #333233;
  border-radius: 30px;
  font-size: 0.6rem;
  padding: 5px 9px 7px;
}
.hidden {
  opacity: 0;
  pointer-events: none;
}

.related-links {
  list-style: none;
  margin: 0.5em 0;
  padding: 0;
}
.related-links__item {
  margin: 0.4em 0;
}

.related-link {
  display: inline-block;
  padding-left: 1.5em;
  text-indent: -1.5em;
  transition: color 0.2s;
  line-height: 1.1rem;
  padding-bottom: 3px;
}

.related-link .icon {
  margin-right: 0.3em;
  text-decoration: none; /* アイコンに下線を付けない */
}

.related-link .label {
  text-decoration: underline; /* テキスト部分だけ下線 */
}

.related-link:hover .label {
  text-decoration: underline; /* ホバー時も下線キープ */
}

/* =====================================
   シングルページ
===================================== */
.single-spot-detail .spot {
  margin-bottom: 30px;
}
@media (min-width: 769px) {
  .single-spot-detail img.spot_main_img {
    width: 100%;
    height: auto;
  }
  .single-spot-detail .img {
    width: 100%;
  }
  .single-spot-detail p {
    font-size: 1rem !important;
  }

  .single-spot-detail a {
    font-size: 1rem !important;
  }
  .single-spot-detail h3 {
    font-size: 1.7rem !important;
    margin: 10px auto 20px;
  }
  .single-spot-detail img.more {
    width: 1.8rem;
  }
  .single-spot-detail .spot_detail {
    padding: 0px 30px 30px;
  }
  .single-spot-detail .txt {
    padding-left: 30px;
  }
  .single-spot-detail .event-spot {
    margin-bottom: 20px;
    font-size: 1.2rem !important;
  }
  .single-spot-detail .txt p {
    margin-bottom: 10px;
  }
  .single-spot-detail .lead {
    padding: 10px 13px;
  }
  .single-spot-detail span.quote {
    font-size: 0.8rem;
    right: 7px;
    bottom: 15px;
  }
}

/* =====================================
   フッター / ページトップ
===================================== */
footer {
  padding: 5px;
  text-align: center;
  font-size: 0.65rem;
}

button {
  /* ページトップ */
  position: fixed;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100px;
  height: 50px;
  right: 10px;
  bottom: -100px;
  color: #fff;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  border: 0;
  background: #333;
  transition: 0.2s;
  letter-spacing: 1px;
  font-weight: bold;
  border-radius: 100px 100px 0 0;
}
button i {
  position: absolute;
  top: 7px;
  font-size: 20px;
  color: #fff;
  font-weight: 300;
}
button p {
  position: absolute;
  bottom: 7px;
  margin: 0;
  font-size: 0.7rem;
}
.is-active {
  opacity: 1;
  visibility: visible;
}
button.is-active {
  bottom: 0;
}

@keyframes drive {
  0%,
  100% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(3px);
  }
}
.page-top.show {
  opacity: 1;
  pointer-events: auto;
}

/* =====================================
   Lightbox 調整
===================================== */
#lightbox {
  position: fixed !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  overflow: hidden;
}
#lightbox img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain;
  max-width: 100%;
  max-height: 100%;
}
.lb-outerContainer,
.lb-dataContainer {
  height: auto !important;
}

/* スマホ調整 */
@media (max-width: 768px) {
  #lightbox {
    max-width: 100%;
    max-height: 80vh;
    overflow-y: auto;
  }
  #lightbox img {
    width: 100% !important;
    height: auto !important;
  }
  .lb-outerContainer,
  .lb-dataContainer {
    width: 80vw !important;
  }
}

/* キャプション内リンク */
.lb-data .lb-caption a {
  color: #fff !important;
  background-color: #ed5d7c;
  border-radius: 5px;
  padding: 5px 10px;
  margin-top: 10px;
  display: inline-block;
}

/* PC時は画像幅を最大400pxに制限 */
@media (min-width: 769px) {
  .lb-image {
    width: auto !important;
    max-width: 560px !important;
    height: auto !important;
  }
  .lb-outerContainer,
  .lb-container {
    width: auto !important;
    max-width: 400px !important;
  }
  .lb-dataContainer {
    width: auto !important;
    max-width: 400px !important;
    padding-top: 15px !important;
  }
}

/* =====================================
   メディアクエリ：動きが苦手な人向け
===================================== */
@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
  }
}

/* ===== 全ページ共通：アンカーずれ対策（CSSのみ） ===== */

:root {
  --anchor-offset: 6px;
} /* 欲しい上余白に調整 */

html,
.ook-center__scroll {
  scroll-behavior: smooth;
}
html,
.ook-center__scroll {
  scroll-padding-top: var(--anchor-offset) !important;
}
.region-heading {
  scroll-margin-top: var(--anchor-offset) !important;
}
/* ===== リール動画リンク ===== */
.reel {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 10px auto 3px;
  padding: 0.8rem 1rem;
  border-radius: 10px;
  background: linear-gradient(
    -45deg,
    #f58529 0%,
    #dd2a7b 70%,
    #8134af 99%,
    #515bd4 100%
  );
  color: #fff;
  font-size: 1em;
  line-height: 1.2;
  font-weight: bold;
}

.reel:hover {
  background-color: f03d8a;
}

.reel::before {
  width: 1.25em;
  height: 1.25em;
  margin-right: 8px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12.001 4.52853C14.35 2.42 17.98 2.49 20.2426 4.75736C22.5053 7.02472 22.583 10.637 20.4786 12.993L11.9999 21.485L3.52138 12.993C1.41705 10.637 1.49571 7.01901 3.75736 4.75736C6.02157 2.49315 9.64519 2.41687 12.001 4.52853ZM18.827 6.1701C17.3279 4.66794 14.9076 4.60701 13.337 6.01687L12.0019 7.21524L10.6661 6.01781C9.09098 4.60597 6.67506 4.66808 5.17157 6.17157C3.68183 7.66131 3.60704 10.0473 4.97993 11.6232L11.9999 18.6543L19.0201 11.6232C20.3935 10.0467 20.319 7.66525 18.827 6.1701Z' fill='%23ffffff'%3E%3C/path%3E%3C/svg%3E");
  content: "";
}
/* a.reel の次に a が続くときだけ a.reel に margin を付ける */
a.reel:has(+ a) {
  margin-bottom: 10px;
}
/* link-icon内に表示されるaが無い場合 */
.link-icon:not(:has(a:not(.hidden))) + .reel {
  margin-top: 0;
}
/* ===== 推しポイント ===== */
.best {
  padding: 2px 10px 4px;
  background: #e0e0e0;
  color: #333;
  margin: 10px 15px 5px;
  border-radius: 5px;
}
.best div {
  text-align: center;
}
ul.best-list {
  list-style-type: none;
  padding-left: 4px;
  margin: 0px 15px 5px 20px;
}
ul.best-list li {
  padding-left: 1em;
  text-indent: -1em;
  margin-bottom: 3px;
}
ul.best-list li:before {
  content: "";
  display: inline-block;
  width: 0.4em;
  height: 0.4em;
  background: #333;
  border-radius: 50%;
  vertical-align: middle;
  margin-right: 0.5em;
}

/* ===== 詳細はこちら ===== */
.more-btn {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0px auto 13px;
  padding: 0.8rem 1rem;
  border-radius: 10px;
  color: #fff;
  font-size: 1em;
  line-height: 1.2;
  font-weight: bold;
}
.more-btn::before {
  width: 1.25em;
  height: 1.25em;
  margin-right: 8px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%23ffffff' stroke-width='2' viewBox='0 0 24 24'%3E%3Ccircle cx='9' cy='20' r='1'/%3E%3Ccircle cx='17' cy='20' r='1'/%3E%3Cpath d='M1 1h4l2.68 12.39a2 2 0 002 1.61h7.72a2 2 0 002-1.61L23 6H6'/%3E%3C/svg%3E");
  content: "";
}
.more-btn:hover {
  opacity: 0.9;
  transform: translateY(-1px);
}
.more-btn:last-child {
  margin-bottom: 0px;
}
/* .link-icon:has(+ .more-btn) {
  margin-top: 0;
}*/
.rakuten {
  background-color: #ed5d7c;
}
.yahoo {
  background-color: #f58529;
}
.amazon {
  background-color: cornflowerblue;
}
.yodobashi {
  background-color: rgb(110, 183, 110);
}

.rakuten_travel {
  background-color: #7ab650;
}
.yahoo_travel {
  background-color: #e04c4c;
}
.rakuten_travel::before,
.yahoo_travel::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%23ffffff' stroke-width='2' viewBox='0 0 24 24'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3Cpath d='M9 16l2 2 4-4'/%3E%3C/svg%3E");
  content: "";
}
.kuwashiku {
  background-color: #fff;
  color: #e02f4e;
  border: 1px solid #e02f4e;
  background-image: none;
  margin: 10px auto 13px;
}
.kuwashiku::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='9' stroke='%23000000' stroke-width='2' fill='%23FFD600'/%3E%3Ccircle cx='9' cy='10' r='1' fill='%23000000'/%3E%3Ccircle cx='15' cy='10' r='1' fill='%23000000'/%3E%3Cpath d='M8 15c1.2 1.5 6.8 1.5 8 0' stroke='%23000000' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  content: "";
}
.kuwashiku span {
  display: inline-block;
}

/* アニメーション定義 */
@keyframes pyonn {
  0% {
    transform: translateY(0);
  }
  30% {
    transform: translateY(-8px);
  }
  55% {
    transform: translateY(2px);
  }
  75% {
    transform: translateY(-3px);
  }
  100% {
    transform: translateY(0);
  }
}

/* 発火用クラス */
.kuwashiku.is-visible span {
  animation: pyonn 0.6s ease;
}
/* =====================================
   レスポンシブ化
===================================== */

/* PCでは非表示（769px以上） */
@media (min-width: 769px) {
  .sp-only {
    display: none !important;
  }
  .main-menu-inner {
    width: 100%;
  }
  .spot-list h2.region-heading:first-of-type {
    margin-top: 20px;
  }
}

/* SPでは表示 */
@media (max-width: 768px) {
  .info-contents {
    padding: 10px 0;
  }
  .pc-only {
    display: none;
  }
}

/* 769px以上：左＝info-column / 右＝spot-list（category+area+targets） */
@media (min-width: 769px) {
  .contents {
    padding: 20px 30px 20px;
  }

  .info-column {
    margin-right: 30px;
    display: block !important;
  }

  body.home .contents,
  body.post-type-archive .contents,
  body.single .contents {
    display: grid;
    grid-template-columns: minmax(0, 370px) minmax(0, 1fr);
    column-gap: 24px;
    align-items: flex-start;
  }

  body.post-type-archive .contents .info-column,
  body.single .contents .info-column {
    grid-column: 1;
  }

  body.post-type-archive .contents .spot-list,
  body.single .contents .spot-list {
    grid-column: 2;
  }

  /* 右カラム（spot-list）の中だけグリッド管理 */
  .spot-list .targets {
    display: grid;
    grid-template-columns: minmax(0, 1fr); /* デフォルト：1カラム */
    gap: 24px;
  }

  /* 地域見出しは常に横幅いっぱい（カラム全部を跨ぐ） */
  .spot-list .targets > .region-heading {
    grid-column: 1 / -1;
  }
  #tab00 {
    display: none !important;
  }
}
/* 769px〜：.spot を1カラム */
@media (min-width: 769px) {
  .spot-list .targets {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
}

/* 1280px〜：.spot を2カラム */
@media (min-width: 1080px) {
  .spot-list .targets {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* 1440px〜：.spot を3カラム */
@media (min-width: 1440px) {
  .spot-list .targets {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 431px) {
  .link-icon:not(:has(> a.hidden)) {
    justify-content: flex-start;
    gap: 15px;
  }
}
@media (min-width: 769px) {
  /* TOP（body.home）でも左=info / 右=spot を固定 */
  body.home .contents .info-column {
    grid-column: 1;
  }

  body.home .contents .spot-list {
    grid-column: 2;
  }
}

/* =====================================
   イベント
===================================== */
img.event_img {
  width: 100px;
  height: 90px;
  object-fit: cover;
  position: relative;
  border-radius: 7px;
}
h5 {
  display: block;
  padding: 3px 5px;
  width: 150px;
  text-align: center;
  margin: 0 auto;
  border-radius: 20px;
}
div.spot h5.event_now {
  background-color: #ed5d7c;
  color: #fff;
  border: 1px solid #ed5d7c;
}
div.spot h5.event_next {
  background-color: #fff;
  color: #ed5d7c;
  border: 1px solid #ed5d7c;
}
.event_detail {
  justify-content: flex-start;
  padding: 10px 15px 15px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin: 0 auto;
}
.event_detail + .event_detail {
  margin-top: -10px;
  padding-top: 0;
}
.event_box {
  flex: 0 1 auto;
  text-align: center;
}

.event-spot {
  padding: 4px 10px 6px;
  background: #e0e0e0;
  color: #333;
  margin: 10px auto 5px;
}
.event-spot div {
  text-align: center;
}

/* ★ イベント用 2カラムレイアウト（TOP でも /event/ でも共通） */
.contents.archive-event {
  display: grid;
  grid-template-columns: minmax(0, 320px) minmax(0, 1fr);
  gap: 24px;
  align-items: flex-start;
}

/* モバイル（〜768px）は縦並び */
@media (max-width: 768px) {
  .contents.archive-event {
    display: block;
  }
}

/* ▼ 例外②：TOPページ（/）のスマホ幅(〜768px)では「押せる」 */
@media (max-width: 768px) {
  #info .area .area-label.is-disabled {
    opacity: 1;
    pointer-events: auto;
  }
}

/* タブ（メニュー）アイコンの縦伸び防止 */
.tab-label img {
  height: 25px !important;
  width: auto !important;
  max-height: 25px !important;
}

/* アニメ用クラスがサイズを壊す場合の保険（アイコンだけに効かせる） */
.tab-label .anim-box {
  height: 25px !important;
  width: auto !important;
}
/* =========================
   [暫定] ローディング全面停止
   ========================= */

/* ローディング要素を強制的に無効化 */
#loading-screen,
#loading,
#loader,
#page-loader,
.loading-screen,
.loading-overlay,
.loading-wrapper,
.page-loader {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* スクロール禁止が残っても解除 */
html,
body {
  overflow: auto !important;
}

html.loading,
body.loading,
html.is-loading,
body.is-loading,
html.js-loading,
body.js-loading,
html.no-scroll,
body.no-scroll {
  overflow: auto !important;
}
/* =========================
   イベントページ：メニューを最初から表示（安全版）
   ========================= */

/* メニュー本体だけを対象にする
body.post-type-archive-event .main-menu-inner,
body.single-event .main-menu-inner {
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
  pointer-events: auto !important;
} */

/* もし親のラッパーが隠している場合にも効かせる（必要なら）
body.post-type-archive-event .main-menu,
body.single-event .main-menu {
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
} */

/* ---------------------------------
   768px以下（スマホ表示）
   ・TOP（body.home）だけ左カラム表示
   ・それ以外のページでは非表示
---------------------------------- */
@media (max-width: 768px) {
  /* TOP以外は非表示 */
  body:not(.home) .contents .info-column {
    display: none !important;
  }

  /* TOPは表示 */
  body.home .contents .info-column {
    display: block !important;
  }
}