/*
Theme Name: Introductory Child
Template: introductory_theme_ver2
*/

/* =========================================================
   Allegro Nihonbashi LP (page-id-18)
   Clean + Stable Layout Fix (English-only)
========================================================= */

/* AOS: avoid clipping during animation */
body.page-id-18 [data-aos]{
  overflow: visible !important;
}

/* Global centering helper */
body.page-id-18 .has-text-align-center{
  text-align: center !important;
}

/* Cover: prevent weird sizing + keep inner content centered */
body.page-id-18 .wp-block-cover{
  width: 100% !important;
  max-width: 100% !important;
}

body.page-id-18 .wp-block-cover__inner-container{
  width: 100% !important;
  max-width: none !important;
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: center !important;
}

body.page-id-18 .wp-block-cover h1,
body.page-id-18 .wp-block-cover h2,
body.page-id-18 .wp-block-cover h3,
body.page-id-18 .wp-block-cover h4,
body.page-id-18 .wp-block-cover h5,
body.page-id-18 .wp-block-cover h6,
body.page-id-18 .wp-block-cover p{
  text-align: center !important;
}

body.page-id-18 .wp-block-cover__image-background,
body.page-id-18 .wp-block-cover img{
  object-fit: cover !important;
}

/* Columns: keep safe defaults (do not force layouts too hard) */
body.page-id-18 .wp-block-columns{
  gap: 24px !important;
}

@media (max-width: 781px){
  body.page-id-18 .wp-block-columns{
    gap: 16px !important;
}

/* Images: never overflow */
body.page-id-18 img{
  max-width: 100% !important;
  height: auto !important;
}

/* =========================================================
   POINT (Group-based) - only target .points-row
   IMPORTANT: add class "points-row" to the outer wrapper group
========================================================= */

/* Wrapper */
body.page-id-18 .points-row{
  display: flex !important;
  justify-content: center !important;
  align-items: flex-start !important;
  gap: 32px !important;
  flex-wrap: nowrap !important;
}

/* Each card (direct child groups) */
body.page-id-18 .points-row > .wp-block-group{
  flex: 1 1 0 !important;
  max-width: 380px !important;
}

/* Image size (bigger + responsive) */
body.page-id-18 .points-row img{
  width: 300px !important;
  max-width: 100% !important;
  height: auto !important;
  display: block !important;
  margin: 0 auto 16px !important;
}

/* Title center */
body.page-id-18 .points-row h3,
body.page-id-18 .points-row h4{
  text-align: center !important;
}

/* Description left */
body.page-id-18 .points-row p{
  text-align: left !important;
}

/* Mobile stack */
@media (max-width: 781px){
  body.page-id-18 .points-row{
    flex-wrap: wrap !important;
    gap: 24px !important;
  }
  body.page-id-18 .points-row > .wp-block-group{
    max-width: 520px !important;
}

/* POINT mobile: stack */
@media (max-width: 781px){
  body.page-id-18 .points-row{
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
  }

  body.page-id-18 .points-row > .wp-block-group{
    width: 100% !important;
    max-width: 520px !important;
  }

/* Catch copy heading: force center on mobile */
@media (max-width: 781px){
  body.page-id-18 .catch-copy{
    text-align: center !important;
  }

  body.page-id-18 .catch-copy h1,
  body.page-id-18 .catch-copy h2,
  body.page-id-18 .catch-copy h3,
  body.page-id-18 .catch-copy h4,
  body.page-id-18 .catch-copy h5,
  body.page-id-18 .catch-copy h6{
    text-align: center !important;
  }
}
/* =========================================================
   page-id-18 Auto Scroll Gallery (final)
   - fixed-size tiles
   - auto-scroll with 2 loops in HTML
========================================================= */

body.page-id-18 .jo-auto-gallery{
  padding: 28px 0 !important;
}

body.page-id-18 .jo-auto-gallery__mask{
  overflow: hidden !important;
  width: 100% !important;
}

body.page-id-18 .jo-auto-gallery__rail{
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  gap: 12px !important;

  width: max-content !important;
  max-width: none !important;

  will-change: transform !important;
  animation: jo-auto-scroll 40s linear infinite !important;
}

body.page-id-18 .jo-auto-gallery__item{
  flex: 0 0 auto !important;
  margin: 0 !important;
  padding: 0 !important;

  border-radius: 12px !important;
  overflow: hidden !important;
}

/* tile size: PC default */
@media (min-width: 782px){
  body.page-id-18 .jo-auto-gallery__item{
    width: 220px !important;
    height: 140px !important;
}

@media (max-width: 781px){
  body.page-id-18 .jo-auto-gallery__item{
    width: 190px !important;
    height: 145px !important;
    flex: 0 0 190px !important;
 }

  body.page-id-18 .jo-auto-gallery__rail{
    animation-duration: 28s !important;
 }
}

/* image fills tile */
body.page-id-18 .jo-auto-gallery__item img{
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

/* animation: assumes 2 loops in HTML */
@keyframes jo-auto-scroll{
  0%{ transform: translate3d(0,0,0); }
  100%{ transform: translate3d(-50%,0,0); }
}

/* accessibility: reduced motion */
@media (prefers-reduced-motion: reduce){
  body.page-id-18 .jo-auto-gallery__rail{
    animation: none !important;
    transform: none !important;
}

/* =========================
   FONT SETTINGS (LP COMMON)
   ========================= */

/* Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Zen+Old+Mincho&family=Noto+Sans+JP:wght@400;500;700&family=Zen+Kaku+Gothic+New:wght@500;700&family=Oswald:wght@400;600&display=swap');

/* ===== Base ===== */
body {
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 400;
}

/* ===== Hero / Key copy ===== */
.hero-sub,
.zero-price {
  font-family: 'Zen Old Mincho', serif;
}

/* ===== Headings ===== */
.heading-jp {
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 700;
}

.heading-en {
  font-family: 'Zen Kaku Gothic New', sans-serif;
  font-weight: 700;
  letter-spacing: 0.05em;
}

/* ===== Concept ===== */
.concept-en {
  font-family: 'Oswald', sans-serif;
  font-weight: 600;
  letter-spacing: 0.08em;
}

.concept-sub {
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 500;
}

/* ===== Story ===== */
.story {
  font-family: 'Zen Kaku Gothic New', sans-serif;
  font-weight: 500;
}

/* ===== fv inner spacing ===== */
.section-fv img {
  display: block;
  width: 100%;
  height: auto;
  margin-bottom: 32px;
}

.section-fv .wp-block-heading,
.section-fv .wp-block-paragraph {
  margin-bottom: 14px;
}

.section-fv .wp-block-button {
  margin-top: 8px;
}

.hero-sub {
  font-family: 'Zen Old Mincho', serif !important;
}

/* ===== inner content background ===== */
.wp-site-blocks {
  background-color: #e8d8a5;
}

.concept-image img {
  width: 100%;
  max-width: 430px;
  height: auto;
  display: block;
}

@media (max-width: 768px) {

  /* Cover height */
  body.page-id-18 .concept-cover {
    min-height: 1200px !important;
    height: 1200px !important;
  }

  /* no triming */
  body.page-id-18 .concept-cover .wp-block-cover__image-background {
    object-fit: contain !important;
    object-position: center center !important;
  }

  /* back ground */
  body.page-id-18 .concept-cover .wp-block-cover__background {
    background-color: #754c42 !important;
  }
}

/* ===== inner content background ===== */
.wp-site-blocks {
  background-color: #e8d8a5;
}