/* =========================================================
   CHATROIS / Otete Collection
   FutureShop CLEAN CSS

   Page order:
   1. Base / Shared
   2. Hero
   3. Story
   4. Otete Flavors
   5. Kittens (Intro + Orbit)
   6. Collection Guide
   7. Catalog
   8. Footer
   9. Mobile
   10. Accessibility / PC only
========================================================= */

/* =========================================================
   1. BASE / SHARED
========================================================= */

#fs_CustomPage .chatrois-otete {
  --ink:#382a2e;
  --wine:#6c3344;
  --rose:#c9979f;
  --paper:#fbf8f7;
  --line:#d9c9ca;

  width:100%;
  max-width:none;
  margin:0;
  color:var(--ink);
  background:var(--paper);
/*  font-family:"Yu Mincho","Hiragino Mincho ProN","Noto Serif JP",serif;*/
  overflow-x:hidden;
}

#fs_CustomPage .chatrois-otete,
#fs_CustomPage .chatrois-otete *,
#fs_CustomPage .chatrois-otete *::before,
#fs_CustomPage .chatrois-otete *::after {
  box-sizing:border-box;
}

#fs_CustomPage .chatrois-otete a {
  color:inherit;
  text-decoration:none;
}

#fs_CustomPage .chatrois-otete button {
  font:inherit;
}

#fs_CustomPage .fs-l-pageMain {
  width:100%;
  max-width:none;
  margin:0 auto;
  padding-left:0;
  padding-right:0;
}

#fs_CustomPage .chatrois-otete .brand {
  font-family:Georgia,"Times New Roman",serif;
  font-size:1.35rem;
  letter-spacing:.22em;
}

#fs_CustomPage .chatrois-otete .eyebrow {
  margin:0;
  color:#8f6b73;
  font:.9rem Arial,sans-serif;
  letter-spacing:.24em;
}

#fs_CustomPage .chatrois-otete .desktop {
  display:inline;
}

/* ========================================
   Anchor
======================================== */

#fs_CustomPage .chatrois-otete .anchor-point {
  position:relative;
  top:50px;
  height:0;
}

/* =========================================================
   2. HERO
========================================================= */

#fs_CustomPage .chatrois-otete .hero {
  position:relative;
  min-height:92vh;
  padding:28px 5vw 80px;

  background-image:
    linear-gradient(
      90deg,
      rgba(250,247,247,.98) 0%,
      rgba(250,247,247,.88) 35%,
      rgba(250,247,247,.08) 68%
    ),
    url("../../img/otete/hero-cookies-no-tin.webp");

  background-position:
    center center,
    50% center;

  background-size:
    cover,
    cover;

  background-repeat:
    no-repeat,
    no-repeat;

  background-attachment:
    fixed,
    fixed;
}

#fs_CustomPage .chatrois-otete .hero nav {
  display:flex;
  align-items:center;
  justify-content:flex-end;
  font-family:Georgia,"Times New Roman",serif;
  font-size:.76rem;
  letter-spacing:.16em;
}

#fs_CustomPage .chatrois-otete .hero-copy {
  max-width:620px;
  margin:17vh 0 0 7vw;
}

#fs_CustomPage .chatrois-otete .hero h1 {
  margin:22px 0;
  font-size:clamp(3rem,6vw,6rem);
  font-weight:400;
  line-height:1.25;
  letter-spacing:.08em;
}

#fs_CustomPage .chatrois-otete .hero-lead {
  margin:0;
  font-size:1.5rem;
  line-height:2.1;
}

#fs_CustomPage .chatrois-otete .text-link {
  display:inline-block;
  margin-top:25px;
  padding-bottom:8px;
  border-bottom:1px solid var(--wine);
  font:1.2rem Arial,sans-serif;
  letter-spacing:.12em;
}

#fs_CustomPage .chatrois-otete .text-link span {
  margin-left:20px;
}


/* =========================================================
   3. STORY / OTETEとは？
========================================================= */

#fs_CustomPage .chatrois-otete .story {
  display:grid;
  grid-template-columns:1fr 1fr;
  align-items:end;
  gap:10vw;
  min-height:540px;
  padding:120px 12vw;

  color:#fff;
  text-shadow:0 2px 18px #1e0f1461;

  background-image:
    linear-gradient(
      rgba(50,32,38,.70),
      rgba(50,32,38,.76)
    ),
    url("../../img/otete/story-bg.webp");

  background-position:
    center center,
    66% center;

  background-size:
    cover,
    cover;

  background-repeat:
    no-repeat,
    no-repeat;

  background-attachment:
    fixed,
    fixed;
}

#fs_CustomPage .chatrois-otete .story h2 {
  margin:18px 0 0;
  font-size:clamp(2.3rem,4.5vw,4.2rem);
  font-weight:400;
  line-height:1.5;
}

#fs_CustomPage .chatrois-otete .story > p {
  max-width:500px;
  margin:0;
  line-height:2.2;
}

#fs_CustomPage .chatrois-otete .story .eyebrow {
  color:#ead6da;
}


/* =========================================================
   4. OTETE FLAVORS
========================================================= */

#fs_CustomPage .chatrois-otete .otete-flavors {
  padding:120px 7vw 130px;
  background:var(--paper);
}

#fs_CustomPage .chatrois-otete .flavors-heading {
  max-width:760px;
  margin:0 auto 70px;
  text-align:center;
}

#fs_CustomPage .chatrois-otete .flavors-heading h2 {
  margin:18px 0 24px;
  font-size:clamp(2.2rem,4vw,3.6rem);
  font-weight:400;
  line-height:1.45;
  letter-spacing:.07em;
}

#fs_CustomPage .chatrois-otete .flavors-lead {
  margin:0;
  font-size:1rem;
  line-height:2;
}

#fs_CustomPage .chatrois-otete .flavor-list {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:58px 34px;
  max-width:1180px;
  margin:0 auto;
}

#fs_CustomPage .chatrois-otete .flavor-item {
  min-width:0;
  text-align:center;
}

#fs_CustomPage .chatrois-otete .flavor-photo {
  display:flex;
  align-items:center;
  justify-content:center;
  height:230px;
  margin-bottom:22px;
}

#fs_CustomPage .chatrois-otete .flavor-photo img {
  display:block;
  width:auto;
  max-width:88%;
  height:100%;
  object-fit:contain;
}

/* PCだけ少し配置にリズムをつける */
#fs_CustomPage .chatrois-otete .flavor-item:nth-child(4n+2) {
  transform:translateY(24px);
}

#fs_CustomPage .chatrois-otete .flavor-item:nth-child(4n+4) {
  transform:translateY(12px);
}

#fs_CustomPage .chatrois-otete .flavor-name-en {
  margin:0 0 7px;
  color:#92747b;
  font:10px Arial,sans-serif;
  letter-spacing:.18em;
}

#fs_CustomPage .chatrois-otete .flavor-item h3 {
  margin:0;
  font-size:1.1rem;
  font-weight:400;
  line-height:1.6;
}

#fs_CustomPage .chatrois-otete .flavors-note {
  margin:75px 0 0;
  color:#92747b;
  font-size:.78rem;
  line-height:1.8;
  text-align:center;
}


/* =========================================================
   5. KITTENS / INTRO + ORBIT
========================================================= */

/* MEET THE KITTENS ～ 子猫缶セレクターを1枚の背景でつなぐ */
#fs_CustomPage .chatrois-otete .kittens-section {
  background:radial-gradient(
    ellipse at 50% 65%,
    #fff 0%,
    #f8f1f2 55%,
    #f3ebed 100%
  );
}

/* Intro */
#fs_CustomPage .chatrois-otete .intro {
  padding:110px 24px 45px;
  text-align:center;
  background:transparent;
}

#fs_CustomPage .chatrois-otete .intro h2 {
  margin:18px 0 24px;
  font-size:clamp(2rem,4vw,3.4rem);
  font-weight:400;
  letter-spacing:.07em;
}

#fs_CustomPage .chatrois-otete .intro > p:last-child {
  margin:0;
  line-height:2;
}

/* Orbit */
#fs_CustomPage .chatrois-otete .orbit-section {
  padding:15px 0 110px;
  overflow:hidden;
  text-align:center;
  background:transparent;
}

#fs_CustomPage .chatrois-otete .orbit-help {
  margin:18px;
  color:#9c7f86;
  font:10px Arial,sans-serif;
  letter-spacing:.2em;
}

#fs_CustomPage .chatrois-otete .orbit-stage {
  position:relative;
  max-width:1200px;
  height:390px;
  margin:auto;
  cursor:grab;
  user-select:none;
  -webkit-user-select:none;
  touch-action:pan-y;
}

#fs_CustomPage .chatrois-otete .orbit-stage:active {
  cursor:grabbing;
}

#fs_CustomPage .chatrois-otete .tin {
  position:absolute;
  top:8px;
  left:50%;
  z-index:var(--depth);

  width:215px;
  height:310px;
  margin-left:-107.5px;
  padding:0;

  border:0;
  border-radius:0;
  background:transparent;
  cursor:pointer;

  transform:translate(var(--x),var(--y)) scale(var(--scale));
  opacity:calc(.35 + var(--scale) * .65);
  filter:blur(calc((1 - var(--scale)) * 2px));

  transition:
    transform .42s cubic-bezier(.2,.8,.2,1),
    filter .35s,
    opacity .35s;
}

#fs_CustomPage .chatrois-otete .tin.active {
  opacity:1;
  filter:none;
}

#fs_CustomPage .chatrois-otete .tin-face {
  position:relative;
  display:grid;
  place-items:center;
  width:100%;
  height:100%;
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
}

#fs_CustomPage .chatrois-otete .tin-face > img {
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
  pointer-events:none;
}

#fs_CustomPage .chatrois-otete .tin-label {
  position:absolute;
  inset:0;
  z-index:2;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  color:#fff;
}

#fs_CustomPage .chatrois-otete .tin-label b {
  font:italic 1rem Georgia,serif;
}

#fs_CustomPage .chatrois-otete .tin-label small {
  margin-top:6px;
  font:9px Arial,sans-serif;
  letter-spacing:.22em;
}

#fs_CustomPage .chatrois-otete .tin.has-photo .tin-label {
  display:none;
}

#fs_CustomPage .chatrois-otete .tin.placeholder .tin-face > img {
  opacity:.12;
  filter:brightness(0);
}

#fs_CustomPage .chatrois-otete .tin.placeholder .tin-face::after {
  content:"";
  position:absolute;
  inset:0;
  opacity:.92;
  background:var(--tone);

  -webkit-mask:
    url("../../img/otete/otete-ragdoll.webp")
    50% / contain no-repeat;

  mask:
    url("../../img/otete/otete-ragdoll.webp")
    50% / contain no-repeat;
}

#fs_CustomPage .chatrois-otete .tin.soon .tin-label b {
  font-size:.82rem;
  letter-spacing:.16em;
}

#fs_CustomPage .chatrois-otete .tin.soon .tin-label small {
  font-size:.62rem;
}

#fs_CustomPage .chatrois-otete .selector {
  display:grid;
  grid-template-columns:54px minmax(210px,340px) 54px;
  align-items:center;
  justify-content:center;
  gap:12px;
}

#fs_CustomPage .chatrois-otete .selector button {
  width:50px;
  height:50px;
  padding:0;
  border:1px solid var(--line);
  border-radius:50%;
  background:#fff8;
  cursor:pointer;
}

#fs_CustomPage .chatrois-otete .selector span {
  color:#92747b;
  font:10px Arial,sans-serif;
  letter-spacing:.18em;
}

#fs_CustomPage .chatrois-otete .selector h3 {
  margin:8px;
  font:italic 400 2.2rem Georgia,serif;
}

#fs_CustomPage .chatrois-otete .selector p {
  margin:0;
  font-size:.9rem;
}

#fs_CustomPage .chatrois-otete .button {
  display:inline-block;
  margin-top:24px;
  padding:15px 35px;
  color:#fff;
  background:var(--wine);
  font:12px Arial,sans-serif;
  letter-spacing:.14em;
}

#fs_CustomPage .chatrois-otete .button.disabled {
  background:#a99b9e;
}


/* =========================================================
   6. COLLECTION GUIDE / 3つのかたち
========================================================= */

#fs_CustomPage .chatrois-otete .collections {
  padding:120px 7vw;
}

#fs_CustomPage .chatrois-otete .collections > .eyebrow,
#fs_CustomPage .chatrois-otete .collections > h2 {
  text-align:center;
}

#fs_CustomPage .chatrois-otete .collections > h2 {
  margin:18px 0 24px;
  font-size:clamp(2rem,4vw,3.4rem);
  font-weight:400;
  letter-spacing:.07em;
}

#fs_CustomPage .chatrois-otete .collection-grid {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:24px;
  margin-top:65px;
}

#fs_CustomPage .chatrois-otete .collection-grid article {
  min-width:0;
  padding:0 10px;
}

#fs_CustomPage .chatrois-otete .collection-grid small {
  color:#997a81;
  font:10px Arial,sans-serif;
  letter-spacing:.18em;
}

#fs_CustomPage .chatrois-otete .collection-grid h3 {
  margin:12px 0;
  font-size:1.8rem;
  font-weight:400;
}

#fs_CustomPage .chatrois-otete .collection-grid p {
  min-height:58px;
  line-height:1.8;
}

#fs_CustomPage .chatrois-otete .collection-grid a {
  display:inline-block;
  padding: 10px 0 2px 0;
  border-bottom:1px solid var(--wine);
  font-size:1.2rem;
}

#fs_CustomPage .chatrois-otete .package {
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  aspect-ratio:1 / .82;
  margin-bottom:25px;
  overflow:hidden;
  background:#eadfe1;
}

/*#fs_CustomPage .chatrois-otete .package::before {
  content:"";
  position:absolute;
  inset:12%;
  border:1px solid #fff9;
}*/

#fs_CustomPage .chatrois-otete .package span {
  position:relative;
  z-index:2;
  font:italic 1rem Georgia,serif;
  letter-spacing:.14em;
}

/* 旧ダミー表示：子猫缶 */
#fs_CustomPage .chatrois-otete .package.round::after {
  content:"";
  width:48%;
  aspect-ratio:1;
  border-radius:50%;
  background:#b88b92;
  box-shadow:0 18px 35px #73505c55;
}

#fs_CustomPage .chatrois-otete .package.round span {
  position:absolute;
  color:#fff;
  font-size:2rem;
}

/* 旧ダミー表示：レリーフ缶 */
 /*#fs_CustomPage .chatrois-otete .package.relief::after,
#fs_CustomPage .chatrois-otete .package.square::after {
  content:"";
  width:52%;
  aspect-ratio:1;
  background:#805563;
 box-shadow:10px 15px 25px #6a455066;
}*/

#fs_CustomPage .chatrois-otete .package.relief span,
#fs_CustomPage .chatrois-otete .package.square span,
#fs_CustomPage .chatrois-otete .package.box span {
  position:absolute;
  color:#fff;
}

/* 旧ダミー表示：ギフトボックス */
#fs_CustomPage .chatrois-otete .package.box::after {
  content:"";
  width:58%;
  height:42%;
  background:#523940;
  box-shadow:10px 15px 25px #60424b55;
}

/* 実商品画像を使うカテゴリカード */
#fs_CustomPage .chatrois-otete .package-photo::before,
#fs_CustomPage .chatrois-otete .package-photo::after {
  display:none;
}

#fs_CustomPage .chatrois-otete .package-photo img {
  display:block;
  width:82%;
  height:82%;
  object-fit:contain;
}

#fs_CustomPage .chatrois-otete .gift-package img {
  width:92%;
  height:92%;
}


/* =========================================================
   7. CATALOG
========================================================= */

#fs_CustomPage .chatrois-otete .catalog {
  padding:30px 7vw 120px;
  background:#f3edef;
}

#fs_CustomPage .chatrois-otete .product-group {
  max-width:1240px;
  margin:0 auto;
  padding:105px 0;
  border-bottom:1px solid #d7c7ca;
}

#fs_CustomPage .chatrois-otete .product-group:last-child {
  border-bottom:0;
}

#fs_CustomPage .chatrois-otete .group-heading {
  margin-bottom:52px;
  text-align:center;
}

#fs_CustomPage .chatrois-otete .group-heading > p {
  margin:0;
  color:#92747b;
  font:11px Arial,sans-serif;
  letter-spacing:.2em;
}

#fs_CustomPage .chatrois-otete .group-heading > p span {
  display:inline-grid;
  place-items:center;
  width:34px;
  height:34px;
  margin-right:9px;
  border:1px solid #b99da3;
  border-radius:50%;
}

#fs_CustomPage .chatrois-otete .group-heading h2 {
  margin:18px 0;
  font-size:clamp(2.2rem,4vw,3.6rem);
  font-weight:400;
  letter-spacing:.08em;
}

#fs_CustomPage .chatrois-otete .group-heading div {
  font-size:1.2rem;
  line-height:1.8;
}

#fs_CustomPage .chatrois-otete .product-list {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:46px 24px;
}

#fs_CustomPage .chatrois-otete .product-list.short {
  grid-template-columns:repeat(2,minmax(0,380px));
  justify-content:center;
  gap:38px;
}

#fs_CustomPage .chatrois-otete .product-list.single {
  grid-template-columns:minmax(0,380px);
  justify-content:center;
}

#fs_CustomPage .chatrois-otete .product-card {
  min-width:0;
  text-align:center;
}

#fs_CustomPage .chatrois-otete .product-visual {
  display:grid;
  place-items:center;
  aspect-ratio:1;
  margin-bottom:24px;
  overflow:hidden;
  background:#fff;
  transition:
    transform .25s,
    box-shadow .25s,
    opacity .15s;
  -webkit-tap-highlight-color:transparent;
}

#fs_CustomPage .chatrois-otete .product-visual:active {
  opacity:.8;
}

/* ----------------------------------------
   Relief tin / Coming Soon
---------------------------------------- */

#fs_CustomPage .chatrois-otete .coming-soon-visual {
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:320px;
  background:
    radial-gradient(
      circle at 50% 40%,
      #ffffff 0%,
      #f7eff1 60%,
      #eee3e6 100%
    );
  cursor:default;
}

#fs_CustomPage .chatrois-otete .coming-soon-inner {
  text-align:center;
}

#fs_CustomPage .chatrois-otete .coming-soon-en {
  margin:0 0 18px;
  color:#805563;
  font:italic 1.15rem Georgia,"Times New Roman",serif;
  letter-spacing:.18em;
}

#fs_CustomPage .chatrois-otete .product-photo {
  display:block;
  width:95%;
  height:95%;
  object-fit:contain;
}

#fs_CustomPage .chatrois-otete .mini-kitten {
  position:relative;
  width:58%;
  height:72%;
  background:transparent !important;
  box-shadow:none !important;
}

#fs_CustomPage .chatrois-otete .mini-kitten img {
  width:100%;
  height:100%;
  object-fit:contain;
}

#fs_CustomPage .chatrois-otete .mini-kitten.pending-product-photo img {
  position:absolute;
  inset:0;
  opacity:.1;
  filter:brightness(0);
}

#fs_CustomPage .chatrois-otete .mini-kitten.pending-product-photo::after {
  content:"";
  position:absolute;
  inset:0;
  opacity:.42;
  background:var(--product-tone);

  -webkit-mask:
    url("../../img/otete/otete-ragdoll.webp")
    50% / contain no-repeat;

  mask:
    url("../../img/otete/otete-ragdoll.webp")
    50% / contain no-repeat;
}

#fs_CustomPage .chatrois-otete .mini-kitten b,
#fs_CustomPage .chatrois-otete .mini-kitten small {
  position:relative;
  z-index:2;
}

#fs_CustomPage .chatrois-otete .mini-square {
  width:56%;
  aspect-ratio:1;
  background:var(--product-tone,#805563);
  box-shadow:9px 15px 28px #5b3a444f;
}

#fs_CustomPage .chatrois-otete .mini-box {
  width:64%;
  aspect-ratio:1.35;
  background:var(--product-tone,#523940);
  box-shadow:9px 15px 28px #5b3a444f;
}

#fs_CustomPage .chatrois-otete .product-detail {
  margin:0 0 8px;
  color:#92747b;
  font-size:1.2rem;
}

#fs_CustomPage .chatrois-otete .product-card h3 {
  margin:0 0 10px;
  font-size:1.5rem;
  font-weight:400;
}

#fs_CustomPage .chatrois-otete .product-price {
  margin:0 0 18px;
  font:1.2rem Arial,sans-serif;
}

#fs_CustomPage .chatrois-otete .product-link {
  display:inline-flex;
  gap:25px;
  padding:0 4px 5px;
  border-bottom:1px solid var(--wine);
  font-size:1.2rem;
}


/* =========================================================
   8. FOOTER
========================================================= */

#fs_CustomPage .chatrois-otete > footer {
  padding:70px 20px;
  border-top:1px solid var(--line);
  text-align:center;
}

#fs_CustomPage .chatrois-otete > footer p {
  margin:16px 0 0;
  font-size:.85rem;
  letter-spacing:.08em;
}


/* =========================================================
   HOVER DEVICES
========================================================= */

@media (hover:hover) {
  #fs_CustomPage .chatrois-otete .product-visual:hover {
    transform:translateY(-4px);
    box-shadow:0 18px 45px #67455018;
  }
}


/* =========================================================
   9. MOBILE
========================================================= */

@media (max-width:760px) {

  /* Base */
  #fs_CustomPage .chatrois-otete {
    width:100%;
    margin:0;
  }

  #fs_CustomPage .chatrois-otete .desktop {
    display:none;
  }


  /* ------------------------------
     Hero
  ------------------------------ */

  #fs_CustomPage .chatrois-otete .hero {
    min-height:780px;
    padding:22px 22px 250px;
    background-color:#eadcdd;

    background-image:
      linear-gradient(
        rgba(250,247,247,.98) 0%,
        rgba(250,247,247,.96) 35%,
        rgba(250,247,247,.50) 55%,
        rgba(250,247,247,.08) 85%
      ),
      url("../../img/otete/hero-cookies-no-tin-sp.webp");

    background-position:
      center center,
      50% center;

    background-size:
      100% 100%,
      cover;

    background-repeat:
      no-repeat,
      no-repeat;

    background-attachment:
      scroll,
      scroll;
  }

  #fs_CustomPage .chatrois-otete .hero nav a {
    display:none;
  }

  #fs_CustomPage .chatrois-otete .hero-copy {
    margin:70px 0 0;
  }

  #fs_CustomPage .chatrois-otete .hero h1 {
    font-size:3rem;
  }

  #fs_CustomPage .chatrois-otete .hero .eyebrow {
    font-size:.78rem;
  }

  #fs_CustomPage .chatrois-otete .hero-lead {
    font-size:1.25rem;
    line-height:2.05;
  }

/*  #fs_CustomPage .chatrois-otete .hero-lead br {
    display:none;
  }*/

  #fs_CustomPage .chatrois-otete .hero .text-link {
    font-size:1.2rem;
  }


  /* ------------------------------
     Story
  ------------------------------ */

  #fs_CustomPage .chatrois-otete .story {
    grid-template-columns:1fr;
    gap:35px;
    min-height:560px;
    padding:85px 28px;

    background-image:
      linear-gradient(
        rgba(50,32,38,.70),
        rgba(50,32,38,.76)
      ),
      url("../../img/otete/story-bg-sp.webp");

    background-position:
      center center,
      50% center;

    background-size:
      cover,
      cover;

    background-repeat:
      no-repeat,
      no-repeat;

    background-attachment:
      scroll,
      scroll;
  }


  /* ------------------------------
     Flavors
  ------------------------------ */

  #fs_CustomPage .chatrois-otete .otete-flavors {
    padding:85px 18px 95px;
  }

  #fs_CustomPage .chatrois-otete .flavors-heading {
    margin-bottom:48px;
  }

  #fs_CustomPage .chatrois-otete .flavors-heading h2 {
    font-size:2rem;
    line-height:1.5;
  }

  #fs_CustomPage .chatrois-otete .flavors-lead {
    font-size:1rem;
    line-height:1.95;
  }

  #fs_CustomPage .chatrois-otete .flavor-list {
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:42px 12px;
  }

  #fs_CustomPage .chatrois-otete .flavor-item,
  #fs_CustomPage .chatrois-otete .flavor-item:nth-child(4n+2),
  #fs_CustomPage .chatrois-otete .flavor-item:nth-child(4n+4) {
    transform:none;
  }

  #fs_CustomPage .chatrois-otete .flavor-photo {
    height:165px;
    margin-bottom:16px;
  }

  #fs_CustomPage .chatrois-otete .flavor-photo img {
    max-width:96%;
  }

  #fs_CustomPage .chatrois-otete .flavor-name-en {
    font-size:9px;
  }

  #fs_CustomPage .chatrois-otete .flavor-item h3 {
    font-size:1rem;
  }

  #fs_CustomPage .chatrois-otete .flavors-note {
    margin-top:55px;
    font-size:1.2rem;
  }


  /* ------------------------------
     Kittens
  ------------------------------ */

  #fs_CustomPage .chatrois-otete .intro {
    padding:80px 22px 45px;
  }

  #fs_CustomPage .chatrois-otete .orbit-stage {
    height:290px;
    overflow:hidden;
  }

  #fs_CustomPage .chatrois-otete .tin {
    top:28px;
    width:145px;
    height:209px;
    margin-left:-72.5px;

    transform:
      translateX(var(--mobile-x))
      scale(var(--mobile-scale));

    z-index:var(--mobile-depth);
    opacity:.78;
    filter:none;
  }

  #fs_CustomPage .chatrois-otete .tin.active {
    opacity:1;
  }

  #fs_CustomPage .chatrois-otete .tin.mobile-far {
    visibility:hidden;
    opacity:0;
    pointer-events:none;
  }

  #fs_CustomPage .chatrois-otete .tin.mobile-near {
    visibility:visible;
  }

  #fs_CustomPage .chatrois-otete .tin.mobile-outer {
    opacity:.3;
  }

  #fs_CustomPage .chatrois-otete .tin.mobile-outer .tin-label {
    display:none;
  }

  #fs_CustomPage .chatrois-otete .tin:not(.active) .tin-face {
    filter:saturate(.76) brightness(.92);
  }

  #fs_CustomPage .chatrois-otete .tin.active .tin-face {
    filter:drop-shadow(0 20px 22px #482b3333);
  }

  #fs_CustomPage .chatrois-otete .selector {
    grid-template-columns:44px minmax(190px,240px) 44px;
  }

  #fs_CustomPage .chatrois-otete .selector button {
    width:42px;
    height:42px;
  }


  /* ------------------------------
     Collection Guide
  ------------------------------ */

  #fs_CustomPage .chatrois-otete .collections {
    padding:85px 22px;
  }

  #fs_CustomPage .chatrois-otete .collection-grid {
    grid-template-columns:1fr;
    gap:65px;
  }

  #fs_CustomPage .chatrois-otete .collection-grid p {
    min-height:auto;
  }

  #fs_CustomPage .chatrois-otete .package {
    aspect-ratio:1 / .72;
  }


  /* ------------------------------
     Catalog
  ------------------------------ */

  #fs_CustomPage .chatrois-otete .catalog {
    padding:10px 18px 80px;
  }

  #fs_CustomPage .chatrois-otete .product-group {
    padding:78px 0;
  }

  #fs_CustomPage .chatrois-otete .group-heading {
    margin-bottom:36px;
  }

  #fs_CustomPage .chatrois-otete .product-list,
  #fs_CustomPage .chatrois-otete .product-list.short {
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:40px 14px;
  }

  #fs_CustomPage .chatrois-otete .product-list.single {
    grid-template-columns:minmax(0,1fr);
    max-width:380px;
    margin-left:auto;
    margin-right:auto;
  }

  #fs_CustomPage .chatrois-otete .product-detail {
    font-size:1rem;
  }

  #fs_CustomPage .chatrois-otete .product-card h3 {
    font-size:1.2rem;
    line-height:1.55;
  }

  #fs_CustomPage .chatrois-otete .product-price {
    font-size:1.0rem;
  }

  #fs_CustomPage .chatrois-otete .product-link {
    gap:12px;
    font-size:1.0rem;
  }

  #fs_CustomPage .chatrois-otete .mini-kitten {
    width:67%;
    height:74%;
  }

  #fs_CustomPage .chatrois-otete .mini-square {
    width:62%;
  }

  #fs_CustomPage .chatrois-otete .mini-box {
    width:70%;
  }
}

/* =========================================================
   10. ACCESSIBILITY / PC ONLY
========================================================= */

@media (prefers-reduced-motion:reduce) {
  #fs_CustomPage .chatrois-otete .tin,
  #fs_CustomPage .chatrois-otete .product-visual {
    transition:none;
  }
}

@media (min-width:761px) {
  /* 1200x1200透過画像の余白を活かして、子猫缶を少し大きく表示 */
  #fs_CustomPage .chatrois-otete .tin-face > img {
    transform:scale(1.15);
    transform-origin:center center;
  }
}

/* ========================================
   SP / FutureShop header spacing
======================================== */

@media (max-width: 767px) {
  body {
    padding-top: 101px;
  }
}