/*==================================================
フロントページ
======================================================================*/

/* ===== HEADER OVERRIDE (dark navy for homepage) ===== */
body.front-page #masthead,
body.home #masthead {
  background: #0c1240 !important;
  border-bottom: none;
}
body.front-page .header-top,
body.home .header-top {
  max-width: none;
  padding: 0 40px;
}
body.front-page .site-title a,
body.home .site-title a,
body.front-page .custom-logo-link,
body.home .custom-logo-link { color: #ffffff !important; }
body.front-page .custom-logo,
body.home .custom-logo { filter: brightness(0) invert(1); }
body.front-page .main-navigation a,
body.home .main-navigation a { color: rgba(255,255,255,0.85) !important; }
body.front-page .main-navigation a:hover,
body.home .main-navigation a:hover { color: #c9a84c !important; }
body.front-page .menu-toggle span,
body.home .menu-toggle span { background: #ffffff; }

/* ===== PAGE BASE ===== */
.ap { font-family: 'Noto Serif JP', 'Yu Mincho', serif; color: #1a1a1a; background: #fff; }
.ap * { box-sizing: border-box; }
.ap a { text-decoration: none; color: inherit; }
.ap img { display: block; }

/* ===== HERO ===== */
.ap-hero {
  height: 100svh;
  min-height: 600px;
  position: relative;
  overflow: visible;
  background: #060e2d;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ap-hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.ap-hero-bg img {
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0.5;
  transform: scale(1.05);
  transition: transform 8s ease;
}
.ap-hero.is-loaded .ap-hero-bg img { transform: scale(1); }
.ap-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(6,14,45,0.3) 0%, rgba(6,14,45,0.55) 100%);
  z-index: 1;
}
.ap-hero-content {
  position: relative;
  z-index: 2;
  text-align: center;
  color: #fff;
  padding: 0 24px;
}
.ap-hero-content {
  position: absolute !important;
  bottom: 4%;
  left: 0; right: 0;
  display: flex;
  justify-content: center;
}
.ap-hero-message {
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 900;
  font-size: clamp(1.8rem, 4.5vw, 3.8rem);
  line-height: 2;
  letter-spacing: 0.06em;
  transform: rotate(-3deg);
  opacity: 0;
  transition: opacity 1.2s ease 0.5s;
  text-align: left;
  display: inline-block;
  color: transparent;
}
.ap-hero.is-loaded .ap-hero-message { opacity: 1; }
.ap-hero-band {
  background: #fff;
  color: #111;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  padding: 0.15em 0.7em;
  line-height: 2;
}
@media (max-width: 640px) {
  .ap-hero-message { font-size: clamp(1.3rem, 6.5vw, 2rem); }
}
.ap-hero-label {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(0.65rem, 1vw, 0.85rem);
  letter-spacing: 0.6em;
  color: rgba(255,255,255,0.55);
  text-transform: uppercase;
  display: block;
  margin-bottom: 28px;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 1s ease 0.5s, transform 1s ease 0.5s;
}
.ap-hero.is-loaded .ap-hero-label { opacity: 1; transform: translateY(0); }
.ap-hero-title {
  font-family: 'Plus Jakarta Sans', 'Helvetica Neue', sans-serif;
  font-size: clamp(3rem, 7vw, 6.5rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.01em;
  margin-bottom: 24px;
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 1.1s ease 0.8s, transform 1.1s ease 0.8s;
}
.ap-hero.is-loaded .ap-hero-title { opacity: 1; transform: translateY(0); }
.ap-hero-sub {
  font-family: 'Noto Serif JP', serif;
  font-size: clamp(0.85rem, 1.4vw, 1.1rem);
  letter-spacing: 0.25em;
  color: rgba(255,255,255,0.72);
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 1s ease 1.2s, transform 1s ease 1.2s;
}
.ap-hero.is-loaded .ap-hero-sub { opacity: 1; transform: translateY(0); }
.ap-hero-sound {
  position: absolute;
  bottom: 48px;
  right: 32px;
  z-index: 3;
  background: rgba(255,255,255,0.15);
  border: 1px solid rgba(255,255,255,0.5);
  border-radius: 50%;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #fff;
  transition: background 0.2s;
  backdrop-filter: blur(4px);
}
.ap-hero-sound:hover { background: rgba(255,255,255,0.3); }
.ap-sound-icon { width: 20px; height: 20px; }
.ap-hero-scroll {
  position: absolute;
  bottom: 48px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  color: rgba(255,255,255,0.45);
  font-family: 'Cormorant Garamond', serif;
  font-size: 0.65rem;
  letter-spacing: 0.35em;
  z-index: 2;
  opacity: 0;
  transition: opacity 1s ease 1.8s;
}
.ap-hero.is-loaded .ap-hero-scroll { opacity: 1; }
.ap-hero-scroll::after {
  content: '';
  display: block;
  width: 1px;
  height: 48px;
  background: rgba(255,255,255,0.3);
  animation: ap-line-pulse 2s ease-in-out 2.5s infinite;
}
@keyframes ap-line-pulse {
  0%, 100% { opacity: 0.3; transform: scaleY(1); transform-origin: top; }
  50% { opacity: 0.8; transform: scaleY(0.6); transform-origin: top; }
}
/* ===== PRICE ===== */
.ap-price {
  padding: 100px 0;
  background: #ffffee;
}
.ap-price-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 80px;
}
.ap-price-hdr {
  margin-bottom: 40px;
}
.ap-price-title {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 1.4rem;
  font-weight: 700;
  color: #0c1240;
}
.ap-price-inner  table {
  margin-bottom: 40px;
  font-family: 'Noto Sans JP', 'ヒラギノ角ゴ ProN', 'Hiragino Kaku Gothic ProN', 'メイリオ', Meiryo, sans-serif;
  line-height: 1.6;
}
.ap-price-inner  table.price tr:first-child td {
  text-align: center;
  font-weight: normal;
  font-size: 14px;
}
.ap-price-inner  table.price tr:first-child td br {
  display: none;
}
.ap-price-inner  table td {
  border-bottom: 1px solid #e0ddd8; 
  padding: 10px 10px;
}
.ap-price-inner  table.price td span {
  display: block;
  font-weight: normal;
  font-size: 14px;
}
.ap-price-inner  table.price td:nth-of-type(1) {
  width: 20%;
  font-weight: bold;
}
.ap-price-inner  table.price td:nth-of-type(2) {
  width: 50%;
  text-align: left;
  font-size: 14px;
}
.ap-price-inner  table.price td:nth-of-type(3),
.ap-price-inner  table.price td:nth-of-type(4) {
  text-align: center;
  font-weight: bold;
  width: 15%;
}
.ap-price-inner  table.option {
  margin-bottom: 0px;
}
.ap-price-inner  table.option td:nth-of-type(1) {
  width: 60%;
}
.ap-price-inner  table.option td:nth-of-type(2) {
  width: 40%;
  text-align: right;
}



/* ===== INTRO ===== */
.ap-intro {
  padding: 100px 0;
  background: #fff;
}
.ap-intro-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 80px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: start;
}
.ap-intro-label {
  font-family: 'Cormorant Garamond', serif;
  font-size: 14px;
  letter-spacing: 0.2em;
  color: #c9a84c;
  text-transform: uppercase;
  display: block;
  margin-bottom: 24px;
}
.ap-intro-read {
  font-size: 1.4em;
  margin-bottom: 1.4em;
  color: #0c1240;
  font-weight: 900;
  font-family: 'Noto Sans JP','ヒラギノ角ゴ ProN','Hiragino Kaku Gothic ProN','メイリオ',Meiryo,sans-serif;
  letter-spacing: 0.05em;
  line-height: 1.6;
}
.ap-intro-title {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: clamp(2.8rem, 5vw, 4.5rem);
  font-weight: 700;
  line-height: 1.2;
  color: #0c1240;
  letter-spacing: 0.02em;
}
.ap-intro-title span {
  font-size: 0.3em;
  letter-spacing: 0.1em;
  font-weight: 900;
  text-transform: uppercase;
  display: block;
  margin-top: 0.3em;
}


.ap-intro-body p {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 0.9rem;
  line-height: 2.2;
  color: #333;
  letter-spacing: 0.06em;
  margin-bottom: 1.2em;
}

/* ===== GALLERY CAROUSEL ===== */
.ap-gallery {
  padding: 80px 0;
  background: #f8f7f4;
  overflow: hidden;
}
.ap-gallery-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  max-width: 1200px;
  margin: 0 auto 40px;
  padding: 0 80px;
}
.ap-gallery-header-left {}
.ap-gallery-lbl {
  font-family: 'Cormorant Garamond', serif;
  font-size: 14px;
  letter-spacing: 0.2em;
  color: #c9a84c;
  text-transform: uppercase;
  display: block;
  margin-bottom: 10px;
}

.ap-gallery-title {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: clamp(1.4rem, 2.2vw, 2rem);
  font-weight: 700;
  color: #0c1240;
}
.ap-gallery-nav {
  display: flex;
  gap: 12px;
}
.ap-gallery-btn {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1.5px solid #0c1240;
  background: transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #0c1240;
  transition: all 0.3s;
  flex-shrink: 0;
}
.ap-gallery-btn:hover { background: #0c1240; color: #fff; }
.ap-gallery-btn svg { width: 16px; height: 16px; fill: currentColor; }
.ap-swiper {
  overflow: visible;
  padding: 0 80px;
}
.ap-swiper .swiper-slide {
  width: 400px;
  border-radius: 6px;
  overflow: hidden;
  aspect-ratio: 4/3;
  background: #e0ddd8;
}
.ap-swiper .swiper-slide img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}
.ap-swiper .swiper-slide:hover img { transform: scale(1.04); }

/* ===== EXP CTA CARDS ===== */
.ap-exp {
  position: relative;
  min-height: 580px;
  display: flex;
  align-items: center;
  overflow: hidden;
}
.ap-exp-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.ap-exp-bg img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.8s ease;
}
.ap-exp:hover .ap-exp-bg img { transform: scale(1.03); }
.ap-exp-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, rgba(6,14,45,0.78) 45%, rgba(6,14,45,0.2));
  z-index: 1;
}
.ap-exp.ap-exp--right .ap-exp-overlay {
  background: linear-gradient(to left, rgba(6,14,45,0.78) 45%, rgba(6,14,45,0.2));
}
.ap-exp-content {
  position: relative;
  z-index: 2;
  color: #fff;
  padding: 80px;
  max-width: 560px;
}
.ap-exp--right .ap-exp-content { margin-left: auto; }
.ap-exp-num {
  font-family: 'Cormorant Garamond', serif;
  font-size: 0.68rem;
  letter-spacing: 0.5em;
  color: #c9a84c;
  display: block;
  margin-bottom: 20px;
}
.ap-exp-en {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: clamp(2.2rem, 4.5vw, 4rem);
  font-weight: 700;
  line-height: 1.05;
  margin-bottom: 14px;
  letter-spacing: 0.02em;
}
.ap-exp-ja {
  font-family: 'Noto Serif JP', serif;
  font-size: clamp(0.9rem, 1.4vw, 1.2rem);
  letter-spacing: 0.25em;
  color: rgba(255,255,255,0.7);
  margin-bottom: 32px;
}
.ap-exp-desc {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 0.88rem;
  line-height: 2.2;
  color: rgba(255,255,255,0.78);
  margin-bottom: 40px;
  max-width: 400px;
}
.ap-exp-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: #c9a84c;
  color: #0c1240;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 14px 32px;
  transition: all 0.3s;
}
.ap-exp-btn:hover { background: #fff; }
.ap-exp-btn svg { width: 14px; height: 14px; fill: currentColor; transition: transform 0.3s; }
.ap-exp-btn:hover svg { transform: translateX(4px); }

/* ===== SERVICES (circle icon grid) ===== */
.ap-services {
  padding: 100px 0;
  background: #fff;
}
.ap-services-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 80px;
}
.ap-services-header {
  text-align: center;
  margin-bottom: 64px;
}
.ap-services-lbl {
  font-family: 'Cormorant Garamond', serif;
  font-size: 0.72rem;
  letter-spacing: 0.5em;
  color: #c9a84c;
  display: block;
  margin-bottom: 16px;
}
.ap-services-title {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: clamp(1.6rem, 2.8vw, 2.4rem);
  font-weight: 700;
  color: #0c1240;
}
.ap-services-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
}
.ap-service-item { text-align: center; }
.ap-service-icon {
  width: 72px; height: 72px;
  border-radius: 50%;
  background: #0c1240;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 20px;
}
.ap-service-icon svg { width: 30px; height: 30px; fill: #c9a84c; }
.ap-service-title {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 1rem;
  font-weight: 700;
  color: #0c1240;
  margin-bottom: 12px;
  letter-spacing: 0.04em;
}
.ap-service-en {
  font-family: 'Cormorant Garamond', serif;
  font-size: 0.68rem;
  letter-spacing: 0.3em;
  color: #c9a84c;
  margin-bottom: 10px;
  text-transform: uppercase;
  display: block;
}
.ap-service-desc {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 0.82rem;
  line-height: 1.9;
  color: #666;
}

/* ===== NEWS ===== */
.ap-news {
  padding: 80px 0;
  background: #f8f7f4;
  border-top: 1px solid #e8e5df;
}
.ap-news-inner {
  max-width: 900px;
  margin: 0 auto;
  padding: 0 40px;
}
.ap-news-hdr {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 40px;
}
.ap-news-lbl {
  font-family: 'Cormorant Garamond', serif;
  font-size: 14px;
  letter-spacing: 0.2em;
  color: #c9a84c;
  display: block;
  margin-bottom: 8px;
}
.ap-news-title {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 1.4rem;
  font-weight: 700;
  color: #0c1240;
}
.ap-news-more {
  font-family: 'Cormorant Garamond', serif;
  font-size: 0.7rem;
  letter-spacing: 0.3em;
  color: #0c1240;
  border-bottom: 1px solid #0c1240;
  padding-bottom: 2px;
  transition: opacity 0.3s;
  white-space: nowrap;
}
.ap-news-more:hover { opacity: 0.5; }
.ap-news-list { list-style: none; padding: 0; margin: 0; }
.ap-news-item { border-top: 1px solid #e8e5df; }
.ap-news-item:last-child { border-bottom: 1px solid #e8e5df; }
.ap-news-item a {
  display: grid;
  grid-template-columns: 110px auto 1fr;
  gap: 20px;
  align-items: baseline;
  padding: 20px 0;
  transition: opacity 0.3s;
}
.ap-news-item a:hover { opacity: 0.55; }
.ap-news-date {
  font-family: "Noto Serif JP", "遊明朝", YuMincho, "ヒラギノ明朝 ProN", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
  font-size: 12px;
  letter-spacing: 0.12em;
  color: #555;
}
.ap-news-tag {
  font-family: "Noto Serif JP", "遊明朝", YuMincho, "ヒラギノ明朝 ProN", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
  font-size: 12px;
  letter-spacing: 0.2em;
  color: #c9a84c;
  text-transform: uppercase;
  padding: 2px 10px;
  border: 1px solid #c9a84c;
  white-space: nowrap;
  line-height: 1.5;
}
.ap-news-ttl {
  font-size: 0.88rem;
  letter-spacing: 0.06em;
  line-height: 1.8;
  color: #333;
  font-family: 'Noto Sans JP', sans-serif;
}

/* ===== LEARN GRID ===== */
.ap-learn {
  padding: 80px 0 100px;
  background: #fff;
}
.ap-learn-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 80px;
}
.ap-learn-hdr {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 48px;
}
.ap-learn-lbl {
  font-family: 'Cormorant Garamond', serif;
  font-size: 14px;
  letter-spacing: 0.2em;
  color: #c9a84c;
  display: block;
  margin-bottom: 8px;
}
.ap-learn-title {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: clamp(1.4rem, 2vw, 1.8rem);
  font-weight: 700;
  color: #0c1240;
}
.ap-learn-more {
  font-family: 'Cormorant Garamond', serif;
  font-size: 0.7rem;
  letter-spacing: 0.3em;
  color: #0c1240;
  border-bottom: 1px solid #0c1240;
  padding-bottom: 2px;
  transition: opacity 0.3s;
  white-space: nowrap;
}
.ap-learn-more:hover { opacity: 0.5; }
.ap-learn-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px 24px;
}
.ap-learn-card { display: block; }
.ap-learn-card:hover .ap-learn-card-img img { transform: scale(1.05); }
.ap-learn-card-img {
  width: 100%;
  aspect-ratio: 3/2;
  overflow: hidden;
  background: #e8e5df;
  margin-bottom: 14px;
  border-radius: 4px;
}
.ap-learn-card-img img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}
.ap-learn-cat {
  font-size: 12px;
  letter-spacing: 0.2em;
  color: #c9a84c;
  font-family: "Noto Serif JP", "遊明朝", YuMincho, "ヒラギノ明朝 ProN", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
  text-transform: uppercase;
  display: block;
  margin-bottom: 6px;
}
.ap-learn-ttl {
  font-size: 0.85rem;
  line-height: 1.8;
  color: #1a1a1a;
  font-family: 'Noto Sans JP', sans-serif;
  letter-spacing: 0.04em;
}

/* ===== DARK FOOTER ===== */
.ap-footer {
  background: #0c1240;
  color: rgba(255,255,255,0.75);
  padding: 80px 0 0;
}
.ap-footer-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 80px;
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 60px;
  padding-bottom: 60px;
}
.ap-footer-brand {}
.ap-footer-logo {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: #fff;
  margin-bottom: 16px;
  display: block;
}
.ap-footer-tagline {
  font-family: "Noto Serif JP", "遊明朝", YuMincho, "ヒラギノ明朝 ProN", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
  font-size: 0.78rem;
  line-height: 2;
  color: rgba(255,255,255);
  letter-spacing: 0.08em;
  margin-bottom: 28px;
}
.ap-footer-col-title {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: #c9a84c;
  margin-bottom: 20px;
}
.ap-footer-links { list-style: none; padding: 0; margin: 0; }
.ap-footer-links li { margin-bottom: 12px; }
.ap-footer-links a {
  display: inline-block;
  position: relative;
  font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", sans-serif;
  font-size: 14px;
  letter-spacing: 0.06em;
  color: #bebebe;
  transition: color 0.3s;
}
.ap-footer-links a::after {
  background-color: #bebebe;
  bottom: -4px;
  content: "";
  height: 1px;
  left: 0;
  position: absolute;
  transform: scale(0, 1);
  transform-origin: left top;
  transition: transform .3s;
  width: 100%;
}
.ap-footer-links a:hover {
  color: #bebebe;
  opacity: 1;
}
.ap-footer-links a:hover::after {
  transform: scale(1, 1);
}



.ap-footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.3);
  padding: 24px 80px;
  max-width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.ap-footer-copy {
  font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", sans-serif;
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  color: #bebebe;
}
/* Hide default site footer on this page */
body.front-page .site-footer,
body.home .site-footer { display: none; }

/* ===== RESPONSIVE ===== */
@media (max-width: 1024px) {
  .ap-price-inner { padding: 0 40px; }
  .ap-intro-inner { padding: 0 40px; gap: 48px; }
  .ap-gallery-header { padding: 0 40px; }
  .ap-swiper { padding: 0 40px; }
  .ap-services-inner { padding: 0 40px; }
  .ap-learn-inner { padding: 0 40px; }
  .ap-footer-inner { padding: 0 40px; padding-bottom: 48px; }
  .ap-footer-bottom { padding: 24px 40px; }
}
@media (max-width: 980px) {
  .ap-price-inner  table tr:first-child td br { display: inline; }
}
@media (max-width: 900px) {
  .ap-intro-inner { grid-template-columns: 1fr; gap: 32px; }
  .ap-services-grid { grid-template-columns: repeat(2, 1fr); }
  .ap-learn-grid { grid-template-columns: repeat(2, 1fr); gap: 24px 20px; }
  .ap-footer-inner { grid-template-columns: 1fr; gap: 32px; }
  .ap-exp { min-height: 500px; }
  .ap-exp-content { max-width: 80%; padding: 60px 40px; }
  .ap-exp--right .ap-exp-content { margin-left: 0; }
  .ap-exp-overlay,
  .ap-exp--right .ap-exp-overlay {
    background: linear-gradient(to top, rgba(6,14,45,0.85) 55%, rgba(6,14,45,0.25));
  }
  .ap-exp-content,
  .ap-exp--right .ap-exp-content {
    position: absolute; bottom: 0; left: 0; right: 0; max-width: 100%; padding: 40px 32px;
    text-align: left;
  }
}


@media (max-width: 767px) {
  .ap-price-inner  table.price,
  .ap-price-inner  table.price tbody,
  .ap-price-inner  table.price tr {
      display: block;
  }
  .ap-price-inner  table.price tr:first-child {
      display: none;
  }
  .ap-price-inner  table.price tr {
      display: grid;
      grid-template-columns: 1fr auto auto;
      grid-template-areas:
          "plan weekday holiday"
          "desc desc desc";
      gap: 15px 15px;
      padding: 30px 0;
      border-bottom: 1px solid #ccc;
  }
  .ap-price-inner  table.price tr:nth-child(2) {
      padding-top: 0px;
  }
  .ap-price-inner  table.price td {
      display: block;
      border: none;
      padding: 0;
  }
  .ap-price-inner  table.price td:nth-child(1) {
      grid-area: plan;
      font-weight: bold;
      width: auto;
  }
  .ap-price-inner  table.price td:nth-child(2) {
      grid-area: desc;
      grid-column: 1 / -1;
      width: auto;
  }
  .ap-price-inner  table.price td:nth-child(3),
  .ap-price-inner  table.price td:nth-child(4) {
      text-align: left;
      font-weight: bold;
  }
  .ap-price-inner  table.price td:nth-child(3) {
      grid-area: weekday;
      width: 80px;
  }
  .ap-price-inner  table.price td:nth-child(3)::before,
  .ap-price-inner  table.price td:nth-child(4)::before  {
      display: block;
      width: 100%;
      font-weight: normal;
      font-size: 14px;
  }
  .ap-price-inner  table.price td:nth-child(3)::before {
      content: "平日";
  }
  .ap-price-inner  table.price td:nth-child(4) {
      grid-area: holiday;
      width: 100px;
  }

  .ap-price-inner  table.price td:nth-child(4)::before {
      content: "土日祝・祝前日";
  }
}






@media (max-width: 640px) {
  .ap-hero-title { font-size: clamp(2.2rem, 12vw, 3.5rem); }
  .ap-services-grid { grid-template-columns: repeat(2, 1fr); gap: 24px; }
  .ap-learn-grid { grid-template-columns: repeat(2, 1fr); }
  .ap-news-item a { grid-template-columns: 90px 1fr; gap: 12px; }
  .ap-news-tag { display: none; }
  .ap-gallery-header { padding: 0 24px; flex-wrap: wrap; gap: 16px; }
  .ap-swiper { padding: 0 24px; }
  .ap-swiper .swiper-slide { width: 280px; }
  .ap-footer-bottom { flex-direction: column; gap: 12px; text-align: center; }
}

/* ===== CONTENTS SECTION (BRUTUS faithful) ===== */
.bn-contents {
  background: #f4f3ef;
  padding-top: 6rem;
  padding-bottom: 3.75rem;
}
@media (min-width: 48em) {
  .bn-contents { padding-top: 9rem; padding-bottom: 5.3125rem; }
}
.bn-wrapper { max-width: 1440px; margin: 0 auto; padding: 0 1.25rem; }
@media (min-width: 48em) { .bn-wrapper { padding: 0 2.5rem; } }

/* Headline */
.bn-headline {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid #cbcbcb;
  margin-bottom: 1.875rem;
}
@media (min-width: 48em) { .bn-headline { margin-bottom: 3rem; } }
.bn-headline__en {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: min(calc(0.8rem + 1.8vw), 2.25rem);
  font-weight: 700;
  line-height: 1;
  color: #101010;
  letter-spacing: 0.12em;
  display: block;
  text-align: center;
}
.bn-headline__ja {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 600;
  font-size: 0.85rem;
  line-height: 1;
  color: #101010;
  margin-top: 1.2rem;
  display: block;
  text-align: center;
  letter-spacing: 0.35em;
}

/* ── GRID ── */
.bn-grid {
  list-style: none; padding: 0; margin: 0;
  display: grid;
  gap: 0.47rem;
  grid-template-columns: repeat(2, 1fr);
  grid-auto-flow: dense;
}
@media (min-width: 48em) {
  .bn-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    grid-auto-rows: auto;
    grid-auto-flow: row;
  }
}

/* ── ITEM TYPES ── */
.bn-item { min-width: 0; }

/* movie-1: desktop col3-4 row1 / mobile full width */
.bn-item--movie-1 { grid-column: 1 / span 2; }
@media (min-width: 48em) { .bn-item--movie-1 { grid-column: 3 / span 2; grid-row: 1; } }

/* reel-1: desktop col1 rows2-3 / mobile col1 */
.bn-item--reel-1 { grid-column: 1; }
@media (min-width: 48em) { .bn-item--reel-1 { grid-column: 1; grid-row: 2 / span 2; align-self: start; } }

/* reel-2: desktop col3 rows3-4 / mobile col2 */
.bn-item--reel-2 { grid-column: 2; }
@media (min-width: 48em) { .bn-item--reel-2 { grid-column: 3; grid-row: 3 / span 2; align-self: start; } }

/* movie-2: desktop col1-2 row4 / mobile full width */
.bn-item--movie-2 { grid-column: 1 / span 2; }
@media (min-width: 48em) { .bn-item--movie-2 { grid-column: 1 / span 2; grid-row: 4; } }

/* large: desktop col3-4 rows5-6 / mobile full width */
.bn-item--large { grid-column: 1 / span 2; }
@media (min-width: 48em) { .bn-item--large { grid-column: 3 / span 2; grid-row: 5 / span 2; } }

/* ── CARD ── */
.bn-card {
  display: block;
  color: inherit;
  text-decoration: none;
  width: 100%;
}

/* ── IMAGE WRAPPER ── */
.bn-card__img-wrap {
  position: relative;
  overflow: hidden;
  border-radius: 0.5rem;
  aspect-ratio: 1 / 1;
  background: #e8e4e0;
}
@media (min-width: 48em) { .bn-card__img-wrap { border-radius: 0.9375rem; } }

/* Wide (movie): landscape 16:9 */
.bn-item--movie-1 .bn-card__img-wrap,
.bn-item--movie-2 .bn-card__img-wrap { aspect-ratio: 16 / 9; }

/* Reel (portrait/vertical): natural portrait ratio, gaps OK */
.bn-item--reel-1 .bn-card__img-wrap,
.bn-item--reel-2 .bn-card__img-wrap {
  aspect-ratio: 3 / 4;
  flex: none;
}

/* Large: stays square */
.bn-item--large .bn-card__img-wrap { aspect-ratio: 1 / 1; }

.bn-card__img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
  transition: transform 0.45s cubic-bezier(0.18, 0.06, 0.23, 1);
  will-change: transform;
}
.bn-card:hover .bn-card__img { transform: scale(1.05); }

/* ── META ── */
.bn-card__meta {
  margin-top: 0.25rem;
  padding-inline: 0.375rem;
  transition: opacity 0.4s cubic-bezier(0.22, 0.11, 0.22, 1);
  flex-shrink: 0;
}
@media (min-width: 48em) { .bn-card__meta { padding-inline: 0.625rem; margin-top: 0.4rem; } }
.bn-card:hover .bn-card__meta { opacity: 0.6; }

.bn-card__title {
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 700;
  font-size: 0.95rem;
  line-height: 1.4615;
  color: #101010;
  margin: 0 0 0.1rem;
}
@media (min-width: 48em) { .bn-card__title { font-size: 1.2rem; line-height: 1.4375; } }

.bn-card__info { display: flex; align-items: center; margin-top: 0.1rem; }
@media (min-width: 48em) { .bn-card__info { margin-top: 0.25rem; } }

.bn-card__date {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 0.75rem; color: #939393; font-weight: 400;
}
@media (min-width: 48em) { .bn-card__date { font-size: 0.875rem; } }

.bn-card__dot {
  display: inline-block;
  width: 0.3125rem; height: 0.3125rem;
  border-radius: 50%;
  margin-left: 0.4375rem;
  flex-shrink: 0;
}
@media (min-width: 48em) { .bn-card__dot { width: 0.375rem; height: 0.375rem; margin-left: 0.625rem; } }

.bn-card__cat {
  margin-left: 0.1875rem;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 0.75rem; color: #939393; text-transform: uppercase; font-weight: 400;
}
@media (min-width: 48em) { .bn-card__cat { margin-left: 0.25rem; font-size: 0.875rem; } }

.bn-no-img {
  width: 100%; height: 100%; min-height: 150px;
  display: flex; align-items: center; justify-content: center;
  color: #939393; font-size: 0.75rem; letter-spacing: 0.1em;
}
/* Hashtag overlay */
.bn-card__tags {
  position: absolute;
  top: 20%;
  left: 16px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  z-index: 2;
}
.bn-card__tag {
  display: inline-block;
  background: #fff;
  color: #111;
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 700;
  font-size: 0.88rem;
  line-height: 1;
  padding: 0.3em 0.55em;
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.bn-card__tags--elbow {
  top: auto;
  left: auto;
  right: 3%;
  bottom: 45%;
}
.bn-card__tags--left-elbow {
  top: auto;
  bottom: 8px;
  left: 12px;
}
@media (min-width: 48em) {
  .bn-card__tags { top: 20%; left: 52px; gap: 7px; }
  .bn-card__tags--elbow { top: auto; left: auto; right: 10%; bottom: 45%; }
  .bn-card__tags--left-elbow { top: 58%; left: 16px; right: auto; bottom: auto; }
  .bn-card__tag { font-size: 1rem; padding: 0.35em 0.65em; }
}

/* ===== GLOBAL BASE ===== */
html, body { overflow-x: hidden; }
img { max-width: 100%; height: auto; }

/* ===== FIXED CTA (mobile only) ===== */
.ap-fixed-cta {
  display: none;
}
@media (max-width: 767px) {
  .ap-fixed-cta {
    display: block;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 9999;
    padding: 12px 20px;
    padding-bottom: calc(12px + env(safe-area-inset-bottom));
    background: rgba(12,18,64,0.96);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
  }
  .ap-fixed-cta.is-visible {
    opacity: 1;
    pointer-events: auto;
  }
  .ap-fixed-cta__btn {
    display: block;
    text-align: center;
    background: #c9a84c;
    color: #fff;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0.15em;
    padding: 14px 0;
    border-radius: 2px;
    text-decoration: none;
  }
  .site-main { padding-bottom: 76px; }
}

/* ===== 津軽りんご酢 → 下國シェフカードの右横 ===== */
@media (min-width: 48em) {
  .bn-item--id-119 { grid-column: 4; grid-row: 2; }
  .bn-item--id-118 { grid-column: 4; grid-row: 3 / span 2; align-self: start; }
}

/* ===== ニセコ 横長override ===== */

/* ===== プレースホルダーカード（col1, row3 / 家計応援に近接） ===== */
@media (min-width: 48em) {
  .bn-item--placeholder { grid-column: 1; grid-row: 3; position: relative; z-index: 1; margin-top: 9rem; }
  .bn-item--reel-1 { position: relative; z-index: 2; }
}

/* ===== ニセコ → col1-2, row5（プレースホルダーの下） ===== */
@media (min-width: 48em) {
  .bn-item--id-144 { grid-column: 1 / span 2; grid-row: 5; }
}

/* ===== 羊蹄山 → みえ田の右横（col3-4, row4） ===== */
.bn-item--id-136 { grid-column: 1 / span 2; }
@media (min-width: 48em) { .bn-item--id-136 { grid-column: 3 / span 2; grid-row: 5; } }
.bn-item--id-136 .bn-card__img-wrap { aspect-ratio: 16 / 9; }

/* ===== BRUTUS GRID MOBILE ORDER ===== */
@media (max-width: 767px) {
  .bn-item          { order: 10; }
  .bn-item--id-152  { order: 1; }  /* 鮪解体 */
  .bn-item--id-142  { order: 2; }  /* 積丹の雲丹 */
  .bn-item--id-140  { order: 3; }  /* 握りたてが */

}

/* ===== MOBILE FINE-TUNING (≤430px) ===== */
@media (max-width: 430px) {
  .ap-hero-message { font-size: clamp(1.4rem, 5.5vw, 2rem); }
  .bn-headline__en { font-size: clamp(0.7rem, 4vw, 1.2rem); }
  .bn-headline__sub { font-size: clamp(1.2rem, 6vw, 2rem); }
  .ap-price-inner { padding: 0 20px; }
  .ap-intro-inner { padding: 0 20px; }
  .ap-gallery-header, .ap-swiper { padding: 0 16px; }
  .ap-swiper .swiper-slide { width: 240px; }
  .ap-news-inner { padding: 0 20px; }
  .ap-learn-inner { padding: 0 20px; }
}

/* ===== TYPOGRAPHY MOBILE ===== */
@media (max-width: 640px) {
  .bn-card__title { font-size: 0.8rem; line-height: 1.7; }
  .ap-intro-body p { line-height: 1.9; letter-spacing: 0.03em; }
  .ap-exp-ja { line-height: 1.8; }
  .ap-price-inner table.price td span { font-size:12px; }
  .ap-price-inner table.price td:nth-child(3)::before,
  .ap-price-inner table.price td:nth-child(4)::before { font-size: 12px; }
}

/* ===== ETOHA-LAB STYLE SERVICE SECTION ===== */
#ap-service {
  width: 100%;
  height: 100vh;
  background-color: #0870CA;
  position: relative;
  overflow: hidden;
}
.ap-svc-inner {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  width: min(1200px, calc(100% - 80px));
  height: 100%;
  margin: 0 auto;
  position: relative;
  z-index: 2;
}
/* LEFT: navigation (section is pinned, no sticky needed) */
.ap-svc-left {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: calc((420 / 1200) * 100%);
  height: 100%;
  /*padding: 180px 0 60px;*/
  padding: 60px 0 60px;
  flex-shrink: 0;
}
.ap-svc-heading {
  /*position: absolute;
  top: clamp(80px, 11vh, 130px);
  left: 0;*/
  position: static;
  margin-bottom: clamp(40px, 5vh, 70px);
}
.ap-svc-label {
  font-family: 'Cormorant Garamond', serif;
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #c9a84c;
  display: block;
  margin-bottom: 14px;
}


.ap-svc-title {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: clamp(2rem, 3.2vw, 3.4rem);
  font-size: clamp(32px, 4.5vw, 50px);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: 0.04em;
  color: #fff;
}
/* Nav pills */
.ap-svc-nav-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
  counter-reset: svc-num 0;
}
.ap-svc-nav-item {
  width: min(300px, 100%);
  /*padding: 13px 0 13px 58px;*/
  padding: clamp(8px, 1vw, 13px) 0 clamp(8px, 1vw, 13px) 58px;
  border-radius: 9999px;
  border: 1px solid rgba(255,255,255,0.4);
  position: relative;
  /*cursor: pointer;*/
  transition: background 0.35s, border-color 0.35s;
}
.ap-svc-nav-item._active {
  background-color: #fff;
  border-color: #fff;
}
.ap-svc-nav-item::before {
  counter-increment: svc-num 1;
  content: counter(svc-num, decimal-leading-zero);
  display: block;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: clamp(12px, 2vw, 14px);
  font-weight: 500;
  letter-spacing: 0.04em;
  color: rgba(255,255,255,0.7);
  position: absolute;
  top: 50%;
  left: 22px;
  transform: translateY(-50%);
  transition: color 0.35s;
}
.ap-svc-nav-item._active::before { color: #0870CA; }
.ap-svc-nav-line {
  display: block;
  width: 1px;
  height: 14px;
  background-color: rgba(255,255,255,0.4);
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%) scaleY(0);
  transform-origin: top center;
  transition: transform 0.4s ease;
}
.ap-svc-nav-item._active .ap-svc-nav-line { transform: translateX(-50%) scaleY(1); }
.ap-svc-nav-en {
  display: block;
  font-size: clamp(10px, 1vw, 12px);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.6);
  transition: color 0.35s;
  line-height: 1.4;
}
.ap-svc-nav-item._active .ap-svc-nav-en { color: rgba(12,18,64,0.6); }
.ap-svc-nav-ja {
  display: block;
  font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", sans-serif;
  font-size: clamp(14px, 2vw, 16px);
  letter-spacing: 0.06em;
  color: #fff;
  transition: color 0.35s;
  line-height: 1.5;
  padding-right: clamp(10px, 3vw, 30px);
}
.ap-svc-nav-item._active .ap-svc-nav-ja { color: #0870CA; }
/* CTA link under nav */
.ap-svc-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 32px;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #c9a84c;
  border: 1px solid #c9a84c;
  padding: 13px 24px;
  border-radius: 9999px;
  transition: background 0.3s, color 0.3s;
  text-decoration: none;
}
.ap-svc-cta:hover { background: #c9a84c; color: #0c1240; }
.ap-svc-cta::after { content: '→'; }
/* RIGHT: card list */
.ap-svc-right {
  width: calc((740 / 1200) * 100%);
  height: 100%;
  position: relative;
}
.ap-svc-cards {
  list-style: none;
  padding: 0;
  margin: 0;
  position: relative;
  width: 100%;
  height: 100%;
}
/* All card items stacked absolutely on top of each other */
.ap-svc-card-item {
  display: flex;
  align-items: center;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.ap-svc-card-item._01 { z-index: 1; }
.ap-svc-card-item._02 { z-index: 2; }
.ap-svc-card-item._03 { z-index: 3; }
.ap-svc-card-item._04 { z-index: 4; }
.ap-svc-card-item._05 { z-index: 5; }
.ap-svc-card-item._06 { z-index: 6; }
.ap-svc-card-item._07 { z-index: 7; }
.ap-svc-card-item._08 { z-index: 8; }
.ap-svc-card-item._09 { z-index: 9; }
.ap-svc-card-item._10 { z-index: 10; }

.ap-svc-card {
  width: 100%;
  /*aspect-ratio: 707 / 550;*/
  background: #fff;
  border-radius: 20px;
  overflow: hidden;
  position: relative;
  will-change: transform;
}
/* Number badge */
.ap-svc-card-num {
  display: flex;
  justify-content: center;
  align-items: center;
  width: calc((88 / 707) * 100%);
  aspect-ratio: 1 / 1;
  border-radius: 0 0 16px 0;
  background: linear-gradient(135deg, #c9a84c 0%, #b8952e 100%);
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 1.2rem;
  font-weight: 700;
  color: #fff;
  letter-spacing: 0.04em;
}
/* Sub-heading (top right) */
.ap-svc-card-sublabel {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(0.65rem, 0.85vw, 0.82rem);
  font-weight: 400;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: #c9a84c;
  position: absolute;
  top: calc((29 / 550) * 100%);
  right: calc((31 / 707) * 100%);
  z-index: 2;
}
/* Card visual area */
.ap-svc-card-visual {
  width: 100%;
  height: 58%;
  height: 340px;
  /*position: absolute;
  top: 0;
  left: 0;*/
  overflow: hidden;
}
.ap-svc-card-visual::after {
  content: '';
  display: block;
  /*position: absolute;*/
  inset: 0;
  background: linear-gradient(180deg, rgba(12,18,64,0.08) 0%, rgba(255,255,255,0) 100%);
}
.ap-svc-card-visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /*position: absolute;
  top: 0;
  left: 0;*/
  border-radius: inherit;
}
.ap-svc-card-visual-bg {
  display: none;
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
}
/* Card contents (bottom) */
.ap-svc-card-contents {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  /*width: calc((567 / 707) * 100%);
  position: absolute;
  bottom: calc((52 / 550) * 100%);
  left: 50%;
  transform: translateX(-50%);*/
  margin: 0px auto;
  padding: clamp(20px, 2vw, 30px) clamp(20px, 4vw, 50px) clamp(30px, 2vw, 40px);
}
.ap-svc-card-title {
  font-family:'Noto Serif JP','游明朝','Yu Mincho','ヒラギノ明朝 ProN','Hiragino Mincho ProN',serif;
  font-size: clamp(16px, 2vw, 20px);
  font-weight: 700;
  line-height: 1.7;
  letter-spacing: 0.05em;
  color: #333;
}
.ap-svc-card-title span {
  display: block;
  font-size: clamp(22px, 2.6vw, 32px);
  font-weight: 900;
  line-height: 1.4;
}
.ap-svc-card-contents p {
  font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", sans-serif;
  font-size: 0.85em;
  line-height: 1.8;
  margin-top: 0.8em;
}
.ap-svc-card-tags {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-width: 48%;
}
.ap-svc-card-tag {
  padding-left: 16px;
  font-family: 'Noto Sans JP', sans-serif;
  font-size: clamp(0.7rem, 0.9vw, 0.82rem);
  font-weight: 500;
  letter-spacing: 0.02em;
  color: #1a1916;
  position: relative;
}
.ap-svc-card-tag::before {
  content: '';
  display: block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #c9a84c;
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
}
.ap-svc-card-tag.no-dot { padding-left: 0; }
.ap-svc-card-tag.no-dot::before { display: none; }
/* Background gradient per card */
.ap-svc-card-item._01 .ap-svc-card-visual-bg { background: linear-gradient(135deg, #f0ebe0 0%, #e8dcc8 100%); }
.ap-svc-card-item._02 .ap-svc-card-visual-bg { background: linear-gradient(135deg, #e8f0f4 0%, #d4e8f0 100%); }
.ap-svc-card-item._03 .ap-svc-card-visual-bg { background: linear-gradient(135deg, #f0ede8 0%, #e8e0d4 100%); }
.ap-svc-card-item._04 .ap-svc-card-visual-bg { background: linear-gradient(135deg, #e8ede0 0%, #d8e8d0 100%); }
.ap-svc-card-item._05 .ap-svc-card-visual-bg { background: linear-gradient(135deg, #f0ebe0 0%, #e8dcc8 100%); }
.ap-svc-card-item._06 .ap-svc-card-visual-bg { background: linear-gradient(135deg, #e8f0f4 0%, #d4e8f0 100%); }
.ap-svc-card-item._07 .ap-svc-card-visual-bg { background: linear-gradient(135deg, #f0ede8 0%, #e8e0d4 100%); }
.ap-svc-card-item._08 .ap-svc-card-visual-bg { background: linear-gradient(135deg, #e8ede0 0%, #d8e8d0 100%); }
.ap-svc-card-item._09 .ap-svc-card-visual-bg { background: linear-gradient(135deg, #f0ebe0 0%, #e8dcc8 100%); }
.ap-svc-card-item._10 .ap-svc-card-visual-bg { background: linear-gradient(135deg, #e8f0f4 0%, #d4e8f0 100%); }
/* Decorative icon per card */
.ap-svc-card-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -66%);
  font-size: clamp(3rem, 6vw, 7rem);
  opacity: 0.18;
  pointer-events: none;
  user-select: none;
  line-height: 1;
}
/* RESPONSIVE */
@media (max-width: 1024px) {
  .ap-svc-inner { width: calc(100% - 64px); }
  .ap-svc-left { width: 35%; }
  .ap-svc-right { width: 61%; }
}
@media (max-width: 768px) {
  #ap-service { overflow: visible; height: auto; }
  .ap-svc-inner { flex-direction: column; width: calc(100% - 48px); height: auto; }
  .ap-svc-left {
    width: 100%;
    height: auto;
    padding: 60px 0 32px;
  }
  .ap-svc-heading { position: relative; top: auto; margin-bottom: 56px; }
  .ap-svc-cta { margin-top: 48px; }
  .ap-svc-nav-list { flex-direction: row; flex-wrap: wrap; gap: 10px; }
  .ap-svc-nav-item { width: min(210px, 100%); padding: 10px 16px 10px 46px; }
  .ap-svc-right { width: 100%; height: auto; }
  .ap-svc-cards { height: auto; }
  .ap-svc-card-item { position: relative; height: auto; padding: 20px 0; }
  .ap-svc-card { /*aspect-ratio: 4/3;*/ border-radius: 14px; }
  .ap-svc-card-visual { height: 52%; }
  .ap-svc-card-contents { bottom: calc((32 / 400) * 100%); }

  .ap-svc-card-title {
    font-size: clamp(16px, 2vw, 22px);
  }
  .ap-svc-card-title span {
    font-size: clamp(22px, 4vw, 34px);
  }




}
@media (max-width: 480px) {
  .ap-svc-inner { width: calc(100% - 32px); }
  .ap-svc-card { /*aspect-ratio: 3/4;*/ border-radius: 12px; }
  .ap-svc-card-visual { height: 48%; }
  .ap-svc-card-title { font-size: 1rem; }
  .ap-svc-card-num { font-size: 0.9rem; }
}
/* ===== TOMORROWGATE-STYLE 6-CARD SECTION ===== */
.ap-recruit {
  /*background: #c9941a;*/
  background: #92815a;
  padding: clamp(48px, 6vw, 70px) 0;
  color: #fff;
  font-weight: 700;
}
.ap-recruit-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}
.ap-recruit-header {
  text-align: center;
  margin-bottom: 64px;
}
.ap-recruit-label {
  font-family: 'Cormorant Garamond', serif;
  font-size: 14px;
  letter-spacing: 0.2em;
  color: #c9a84c;
  text-transform: uppercase;
  display: block;
  margin-bottom: 16px;
}




.ap-recruit-title {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: clamp(1.8rem, 3vw, 2.6rem);
  font-weight: 700;
  color: #fff;
  letter-spacing: 0.03em;
  margin-bottom: 2rem;
}
.ap-recruit-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border: 1px solid rgba(255,255,255,0.12);
}
.ap-recruit-card {
  padding: 48px 40px;
  border-right: 1px solid rgba(255,255,255,0.12);
  border-bottom: 1px solid rgba(255,255,255,0.12);
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  transition: background 0.3s;
}
.ap-recruit-card:nth-child(3n) { border-right: none; }
.ap-recruit-card:nth-child(4),
.ap-recruit-card:nth-child(5),
.ap-recruit-card:nth-child(6) { border-bottom: none; }
.ap-recruit-card:hover { background: rgba(201,168,76,0.07); }
.ap-recruit-num {
  font-family: 'Cormorant Garamond', serif;
  font-size: 3.2rem;
  font-weight: 700;
  color: #fff;
  line-height: 1;
  display: block;
  margin-bottom: 28px;
  letter-spacing: -0.02em;
}
.ap-recruit-card-title {
  font-family: "Noto Serif JP", "遊明朝", YuMincho, "ヒラギノ明朝 ProN", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
  font-size: clamp(18px, 3vw, 22px);
  font-weight: 700;
  color: #fff;
  margin-bottom: 16px;
  letter-spacing: 0.06em;
  line-height: 1.5;
}
.ap-recruit-card-body {
  font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", sans-serif;
  font-size: clamp(14px, 3vw, 14px);
  line-height: 1.9;
  color: #fff;
  font-weight: 400;
  flex: 1;
  letter-spacing: 0.04em;
}
.ap-recruit-arrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 32px;
  font-family: "Noto Serif JP", "遊明朝", YuMincho, "ヒラギノ明朝 ProN", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #fff;
  font-weight: 700;
}
.ap-recruit-arrow::after { content: '→'; font-size: 1rem; letter-spacing: 0; }
@media (max-width: 1024px) {
  .ap-recruit-inner { padding: 0 40px; }
}
@media (max-width: 900px) {
  .ap-recruit-grid { grid-template-columns: repeat(2, 1fr); }
  .ap-recruit-card:nth-child(3n) { border-right: 1px solid rgba(255,255,255,0.12); }
  .ap-recruit-card:nth-child(2n) { border-right: none; }
  .ap-recruit-card:nth-child(4),
  .ap-recruit-card:nth-child(5),
  .ap-recruit-card:nth-child(6) { border-bottom: 1px solid rgba(255,255,255,0.12); }
  .ap-recruit-card:nth-child(5),
  .ap-recruit-card:nth-child(6) { border-bottom: none; }
}
@media (max-width: 640px) {
  .ap-recruit { padding: 64px 0; }
  .ap-recruit-inner { padding: 0 24px; }
  .ap-recruit-grid { grid-template-columns: 1fr; }
  .ap-recruit-card { border-right: none !important; border-bottom: 1px solid rgba(255,255,255,0.12) !important; }
  .ap-recruit-card:last-child { border-bottom: none !important; }
  .ap-recruit-num { font-size: 2.6rem; }
  .ap-recruit-card { padding: 36px 28px; }
}

/*==================================================
今月のススデパの激推し　自動生成vew
======================================================================*/
.top_article_list {
    max-width: 1440px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    grid-auto-rows: auto;
    grid-auto-flow: row;
    list-style: none;
    padding: 0;
}

.top_article_list li {
    min-width: 0;
}

.top_article_list li .thumb {
    position: relative;
    overflow: hidden;
    border-radius: 8px;
    aspect-ratio: 1 / 1;
}


/*アイキャッチタグ*/
.top_article_list li .thumb .thumb_tags {
    position: absolute;
    inset: 0;
    z-index: 10;
}

.top_article_list li .thumb .thumb_tags .thumb_tag {
    position: absolute;
    pointer-events: none;
    padding: 2px 8px;
    background-color: #fff;
    border-radius: 8px;
    font-family: 'Noto Sans JP', sans-serif;
    font-size: clamp(12px, 1vw, 14px);
    font-weight: bold;
    line-height: 1.4;
}
/*----アイキャッチタグ配置--------------------------------*/
/* p1 */
.top_article_list li.p1 .thumb_tag {
    top: 40px;
    left: 40px;
}
/* p2 */
.top_article_list li.p2 .thumb_tag {
    bottom: 40px;
    left: 40px;
}
/* p3 */
.top_article_list li.p3 .thumb_tag:nth-child(1) {
    top: 60px;
    left: 70px;
}
.top_article_list li.p3 .thumb_tag:nth-child(2) {
    bottom: 140px;
    left: 20px;
}

.top_article_list li.p3 .thumb_tag:nth-child(3) {
    top: 50%;
    right: 20px;
    transform:translateY(-50%);
}
/* p4 */
.top_article_list li.p4 .thumb_tags {
    display: flex;
    justify-content: center;
    align-items: center;
}
/* p5 */
.top_article_list li.p5 .thumb_tag:nth-child(1) {
    top: 40px;
    left: 20px;
}
.top_article_list li.p5 .thumb_tag:nth-child(2) {
    bottom: 40px;
    right: 40px;
}
/* p6 */
.top_article_list li.p6 .thumb_tag {
    bottom: 100px;
    left: 40px;
}
/* p7 */
.top_article_list li.p7 .thumb_tag {
    top: 40px;
    left: 40px;
}
/* p8 */
.top_article_list li.p8 .thumb_tags {

}
/* p9 */
.top_article_list li.p9 .thumb_tag:nth-child(1) {
    top: 40px;
    right: 40px;
}
.top_article_list li.p9 .thumb_tag:nth-child(2) {
    bottom: 40px;
    left: 40px;
}
/* p10 */
.top_article_list li.p10 .thumb_tags {
    display: flex;
    justify-content: center;
    align-items: end;
    padding-bottom: 40px;
}
/* p11 */
.top_article_list li.p11 .thumb_tag:nth-child(1) {
    top: 80px;
    right: 20px;
}
.top_article_list li.p11 .thumb_tag:nth-child(2) {
    bottom: 38px;
    left: 10px;
}
/* p12 */
.top_article_list li.p12 .thumb_tag:nth-child(1) {
    top: 40px;
    left: 90px;
}
.top_article_list li.p12 .thumb_tag:nth-child(2) {
    bottom: 105px;
    left: 20px;
}
.top_article_list li.p12 .thumb_tag:nth-child(3) {
    top: 90px;
    right: 20px;
}
.top_article_list li.p12 .thumb_tag:nth-child(4) {
    bottom: 20px;
    right: 110px;
}
/* p13 */
.top_article_list li.p13 .thumb_tag:nth-child(1) {
    top: 140px;
    left: 50px;
}
.top_article_list li.p13 .thumb_tag:nth-child(2) {
    bottom: 20px;
    left: 20px;
}
.top_article_list li.p13 .thumb_tag:nth-child(3) {
    top: 50px;
    right: 50px;
}
.top_article_list li.p13 .thumb_tag:nth-child(4) {
    bottom: 75px;
    right: 20px;
}


.top_article_list li .thumb img,
.top_article_list li .thumb iframe,
.top_article_list li .thumb video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.45s cubic-bezier(0.18, 0.06, 0.23, 1);
    will-change: transform;
}
/*画像サイズ*/
.top_article_list li.p3 .thumb,
.top_article_list li.p12 .thumb,
.top_article_list li.p13 .thumb {
    aspect-ratio: 16 / 9;
}

.top_article_list li.p4 .thumb,
.top_article_list li.p10 .thumb {
    aspect-ratio: 3 / 4;
}

.top_article_list li h3.title {
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 700;
    font-size: clamp(13px, 3vw, 20px);
    line-height: 1.4615;
    color: #333;
    margin: 0 0 0.1rem;
}
.top_article_list li .content {
    padding: 0.625rem;
    margin-top: 0.4rem;
}

.top_article_list li .meta {
    display: flex;
    align-items: center;
    color: #939393;
    font-size: 0.75rem;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-weight: 400;
}
.top_article_list li .meta .category {
    margin-left: 10px;
}




/* パターン */
.top_article_list li.p1 {
    align-self: start;/*通常上寄せ*/
}
.top_article_list li.p2 {
    align-self: start;/*通常上寄せ*/
}
.top_article_list li.p3 {
    grid-column: 3 / span 2;/*列3横長*/
    grid-row: 1;/*1行目*/
}
.top_article_list li.p4 {
    grid-column: 1;/*列1に置く*/
    grid-row: 2 / span 2;/*2行目から開始 高さ2マス*/
    align-self: start;
}
.top_article_list li.p5 {
    align-self: start;/*通常上寄せ*/
}
.top_article_list li.p6 {
    align-self: start;/*通常上寄せ*/
}
.top_article_list li.p7 {
    align-self: start;/*通常上寄せ*/
}
.top_article_list li.p8 {
    grid-column: 1;
    grid-row: 3;
    position: relative;
    z-index: 1;
    margin-top: 9rem;
}
.top_article_list li.p9 {
    align-self: start;/*通常上寄せ*/
}
.top_article_list li.p10 {
    grid-column: 3;/*列3に置く*/
    grid-row: 3 / span 2;/*2行目から開始 高さ2マス*/
    align-self: start;
}
.top_article_list li.p11 {
    align-self: start;/*通常上寄せ*/
}
.top_article_list li.p12 {
    grid-column: 1 / span 2;
    grid-row: 5;
}
.top_article_list li.p13 {
    grid-column: 3 / span 2;
    grid-row: 5;
}




/* Responsive */
@media (max-width: 780px) {
    .top_article_list {
        grid-template-columns: repeat(2, 1fr);
    }
    /* パターン */
    .top_article_list li.p1 {
        
    }
    .top_article_list li.p2 {
        
    }
    .top_article_list li.p3 {
        grid-column: 1 / span 2;/*列1横長*/
        grid-row: 2;/*2行目*/
    }
    .top_article_list li.p4 {
        grid-column: 1;/*列1に置く*/
        grid-row: 3;/*3行目から開始*/
    }
    .top_article_list li.p5 {
        
    }
    .top_article_list li.p6 {
        grid-column: 1;
        grid-row: 4;
    }
    .top_article_list li.p7 {
    }
    .top_article_list li.p8 {
        grid-column: 1;
        grid-row: 5;
        margin-top: 0rem;
    }
    .top_article_list li.p9 {
        
    }
    .top_article_list li.p10 {
        grid-column: 1;/*列3に置く*/
        grid-row: 6;/*2行目から開始*/
        
    }
    .top_article_list li.p11 {
        
    }
    .top_article_list li.p12 {
        grid-column: 1 / span 2;
        grid-row: 7;
    }
    .top_article_list li.p13 {
        grid-column: 1 / span 2;
        grid-row: 8;
    }
}


/* ===== SHY GALLERY ===== */
.shy-gallery {
  /*background: url("https://shy.souvenir-nara.com/assets/image/gallery_bg.webp") repeat center top;
  background-size: cover;*/
  padding: 4.6% 0 2.9%;
  background-image: url(../img/main_bg.webp);
  background-repeat: repeat;
  background-position: top left;
  background-size: auto;
}
.shy-gallery__inner {
  max-width: 1220px;
  width: 98%;
  margin: 0 auto;
}
.shy-gallery__head {
  position: relative;
  min-height: 780px;
}
.shy-gallery__ttlbox {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  max-width: 1220px;
  z-index: 99;
}
.shy-gallery__ttl { width: 53%; }
.shy-gallery__ttl img { width: 100%; height: auto; }
.shy-gallery__text {
  font-family: 'Zen Maru Gothic', sans-serif;
  font-size: 1.8rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  line-height: 1.8;
  margin-top: 0.5em;
  text-align: center;
  text-shadow: 2px 3px 6px rgba(160, 141, 110, 1);
}
.shy-gallery__ig { width: 22.1%; margin-top: 1.5em; }
.shy-gallery__ig img { width: 100%; height: auto; }

/* === 番号ラベル（確認用・一時的） === */
.shy-tile-num {
  position: absolute;
  top: 4px; left: 4px;
  background: red;
  color: #fff;
  font-size: 18px;
  font-weight: bold;
  font-family: Arial, sans-serif;
  padding: 2px 7px;
  border-radius: 4px;
  z-index: 999;
  pointer-events: none;
  line-height: 1.4;
}
/* ===== Tile base ===== */
.shy-tile {
  --x: 10; --y: 10; --w: 15; --i: 1;
  position: absolute;
  left: calc(var(--x) * 1%);
  top: calc(var(--y) * 1%);
  width: calc(var(--w) * 1%);
  z-index: 2;
}

/* Desktop tile positions */
.shy-tile__a  { --x: -30;   --y: 18;  --w: 33; --i: 1;  }
.shy-tile__b  { --x: 11;   --y: 10;  --w: 14;  --i: 2;  }
.shy-tile__c  { --x: 34; --y: -10; --w: 10;  --i: 3;  }
.shy-tile__d  { --x: 41; --y: 7;  --w: 12;   --i: 4;  }
.shy-tile__e  { --x: 8;    --y: -4;  --w: 13.3; --i: 5;  }
.shy-tile__f  { --x: 85;   --y: -6;   --w: 24.8; --i: 6;  }
.shy-tile__g  { --x: 109;   --y: 18;  --w: 15.8; --i: 7;  }
.shy-tile__h  { --x: 74;   --y: 42;  --w: 12;   --i: 8;  }
.shy-tile__i  { --x: 98;   --y: 40;  --w: 34; --i: 9;  }
.shy-tile__j  { --x: 76;   --y: 62;  --w: 15;  --i: 10; }
.shy-tile__k  { --x: 52; --y: 79;  --w: 25; --i: 11; }
.shy-tile__l  { --x: 30;   --y: 64;  --w: 19; --i: 12; }
.shy-tile__m  { --x: 0;   --y: 71;  --w: 23;    --i: 13; }
.shy-tile__n  { --x: -22;   --y: 82;  --w: 21; --i: 14; }
.shy-tile__o  { --x: 9;    --y: 60;  --w: 8.3;  --i: 15; }
.shy-tile__p  { --x: -3.5; --y: 41;  --w: 21;   --i: 16; }

/* Decorative cut-out tiles */
.shy-tile__pattarn-a { --x: -9;  --y: -2;  --w: 18; --i: 2;  }
.shy-tile__pattarn-b { --x: 59;  --y: -5;  --w: 26;   --i: 5;  }
.shy-tile__pattarn-c { --x: 105;  --y: 76;  --w: 16.5; --i: 9;  }
.shy-tile__pattarn-d { --x: -2;  --y: 63;  --w: 15.5; --i: 15; }

/* SVG pattern overlays */
.shy-tile__f .shy-tile__pattern {
  position: absolute; width: 40%; height: 40%; top: -27%; right: -14%;
}
.shy-tile__i .shy-tile__pattern {
  position: absolute; width: 57%; height: 47%; top: -18%; right: -40%;
}

/* Mask clips image during entrance */
.shy-tile__mask {
  overflow: hidden;
}

/* Image transition */
.shy-tile__mask img {
  width: 100%;
  height: auto;
  display: block;
  transform: translate(0, 0);
  transition: transform 1.2s cubic-bezier(.25, 1, .5, 1);
  transition-delay: calc(var(--i) * 130ms);
}

/* Pre-animation states */
.shy-tile[data-from="right"]  img { transform: translateX(110%); }
.shy-tile[data-from="left"]   img { transform: translateX(-110%); }
.shy-tile[data-from="top"]    img { transform: translateY(-110%); }
.shy-tile[data-from="bottom"] img { transform: translateY(110%); }
.shy-tile[data-from="tr"]     img { transform: translate(110%, -110%); }
.shy-tile[data-from="tl"]     img { transform: translate(-110%, -110%); }
.shy-tile[data-from="br"]     img { transform: translate(110%, 110%); }
.shy-tile[data-from="bl"]     img { transform: translate(-110%, 110%); }

/* Trigger: .is-show resets all tiles to origin */
.shy-stage.is-show .shy-tile img {
  transform: translate(0, 0);
}

/* Decorative animations */
.shy-poyopoyo { animation: shy-poyopoyo 1.8s ease-out infinite; }
@keyframes shy-poyopoyo {
  0%, 40%, 60%, 80% { transform: scale(1.0); }
  50%, 70%          { transform: scale(0.95); }
}
.shy-wave-a { animation: shy-wave 3s linear infinite; }
.shy-wave-b { animation: shy-wave 2s linear infinite; }
@keyframes shy-wave {
  0%, 100% { transform: rotate(10deg); }
  50%      { transform: rotate(-10deg); }
}
.shy-swing { animation: shy-swing 2s ease-in-out infinite; }
@keyframes shy-swing {
  20%  { transform: rotate(15deg); }
  40%  { transform: rotate(-10deg); }
  60%  { transform: rotate(5deg); }
  80%  { transform: rotate(-5deg); }
  100% { transform: rotate(0deg); }
}

/* Mobile */
@media (max-width: 1000px) {
  /* Desktop tile positions */
  .shy-tile__a  { --x: -12;   --w: 26;  }
  .shy-tile__b  { --x: 21;  }
  .shy-tile__c  { --y: 0;  }
  .shy-tile__d  { --y: 16;  }
  .shy-tile__e  { --x: 8;    --y: -4;  --w: 13.3; --i: 5;  }
  .shy-tile__f  { --x: 85;   --y: -6;   --w: 24.8; --i: 6;  }
  .shy-tile__g  { --x: 109;   --y: 18;  --w: 15.8; --i: 7;  }
  .shy-tile__h  { --x: 74;   --y: 42;  --w: 12;   --i: 8;  }
  .shy-tile__i  { --x: 83;  }
  .shy-tile__j  { --x: 76;   --y: 62;  --w: 15;  --i: 10; }
  .shy-tile__k  { --x: 52; --y: 79;  --w: 25; --i: 11; }
  .shy-tile__l  { --x: 30;   --y: 64;  --w: 19; --i: 12; }
  .shy-tile__m  { --x: 0;   --y: 71;  --w: 23;    --i: 13; }
  .shy-tile__n  { --x: -22;   --y: 82;  --w: 21; --i: 14; }
  .shy-tile__o  { --x: 9;    --y: 60;  --w: 8.3;  --i: 15; }
  .shy-tile__p  { --x: -3.5; --y: 41;  --w: 21;   --i: 16; }

  /* Decorative cut-out tiles */
  .shy-tile__pattarn-a { --x: 3;  }
  .shy-tile__pattarn-b { --x: 59;  --y: -5;  --w: 26;   --i: 5;  }
  .shy-tile__pattarn-c { --x: 105;  --y: 76;  --w: 16.5; --i: 9;  }
  .shy-tile__pattarn-d { --x: -2;  --y: 63;  --w: 15.5; --i: 15; }
}
@media (max-width: 769px) {
  .shy-gallery { padding: 12% 0 1%; }
  .shy-gallery__inner { max-width: 100%; width: 98%; }
  .shy-gallery__ttlbox { top: 20%; left: 50%; transform: translateX(-50%); }
  .shy-gallery__ttl { width: 70%; }
  .shy-gallery__text { font-size: 1.3rem; margin-top: 1em; }
  .shy-gallery__ig { width: 65%; margin-top: 1em; }
  .shy-gallery__head { min-height: 720px; }
  .shy-tile__a  { --x: 25;   --y: 52;   --w: 31.5; --i: 12; }
  .shy-tile__b  { --x: 1;    --y: 13;   --w: 15;   --i: 1;  }
  .shy-tile__c  { --x: 21;   --y: -2.5;  --w: 11.2;  }
  .shy-tile__d  { --x: 24.5; --y: 13;   --w: 17;   --i: 3;  }
  .shy-tile__e  { --x: 38.5; --y: 1;    --w: 22;   --i: 4;  }
  .shy-tile__f  { --x: 72; --y: -11.5;  --w: 32;  }
  .shy-tile__g  { --x: 84;   --y: 18;   --w: 17.2; --i: 6;  }
  .shy-tile__h  { --y: 38.5;  }
  .shy-tile__i  { --x: 80; --y: 53; --w: 29;   }
  .shy-tile__j  { --x: 63;   --y: 67;   --w: 13;   --i: 9;  z-index: 5; }
  .shy-tile__k  { --x: 53;   --y: 13;   --w: 20.4; --i: 10; }
  .shy-tile__l  { --x: 39;   --y: 70;   --w: 30;   --i: 11; }
  .shy-tile__m  { --x: 4;   --y: 62;   --w: 21; }
  .shy-tile__n  { --x: 2;    --y: 80;   --w: 26;   --i: 14; }
  .shy-tile__o  { --x: 2;    --y: 67.5; --w: 13.8; --i: 15; }
  .shy-tile__p  { --y: 43; }
  .shy-tile__pattarn-a { --y: -12; z-index: 5; }
  .shy-tile__pattarn-b { --x: 52;  --y: -3; --w: 37;             }
  .shy-tile__pattarn-c { --x: 76;  --y: 76;  --w: 21;  }
  .shy-tile__pattarn-d { --x: 1;   --y: 47; --w: 22.6;           }
}
@media (max-width: 500px) {
  .shy-tile__a  { --x: 25;   --y: 52;   --w: 31.5; --i: 12; }
  .shy-tile__b  { --x: 1;    --y: 13;   --w: 15;   --i: 1;  }
  .shy-tile__c  { display:none;  }
  .shy-tile__d  { --x: 39.5; --y: 6;   --w: 18;  }
  .shy-tile__e  { --x: 38.5; --y: 1;    --w: 22;   --i: 4;  }
  .shy-tile__f  { --x: 53; --y: -7;  --w: 30;  }
  .shy-tile__g  { --y: 4;  }
  .shy-tile__h  { --x: 79; --y: 25; --w: 24; }
  .shy-tile__i  { --x: 70;   }
  .shy-tile__j  { --x: 63;   --y: 67;   --w: 13;   --i: 9;  z-index: 5; }
  .shy-tile__k  { display:none; }
  .shy-tile__l  { --x: 39;   --y: 70;   --w: 30;   --i: 11; }
  .shy-tile__m  { --x: 4;   --y: 62;   --w: 21; }
  .shy-tile__n  { --w: 41; }
  .shy-tile__o  { --x: 2;    --y: 67.5; --w: 13.8; --i: 15; }
  .shy-tile__p  { --y: 43; }
  .shy-tile__pattarn-a { --y: -7; --w: 34; }
  .shy-tile__pattarn-b { --x: 57;  --y: 7; --w: 42;             }
  .shy-tile__pattarn-c { --x: 66;  --y: 76;  --w: 30;  }
  .shy-tile__pattarn-d { --x: 1;   --y: 47; --w: 22.6;           }
}