@charset "UTF-8";
/* ===============================
  フローティングバナー
================================ */
.top__floating{
  position: fixed;
  right: 4%;
  bottom: 10px;
  z-index: 3;
  padding: 1.4rem 2rem;
  background-color: #ea5505;
  border-radius: 1.4rem;
}
.floating__grid{
  max-width: 300px;
  grid-template-columns: 50px 1fr;
  align-items: center;
  gap: 1.6rem;
}
.circle{
  border-radius: var( --li-radius-full);
  overflow: auto;
}
.top__floating__text{
  color: #fff;
  font-weight: 700;
  font-size: 1.4rem;
}
@media (min-width: 769px) {
  .top__floating{
    right: 20px;
    bottom: 20px;
    padding: 1.6rem 2.4rem;
    border-radius: 1.6rem;
  }
  .top__floating__text{
    font-size: 1.6rem;
  }
}

/* 閉じるボタン */
.floating__close {
  position: absolute;
  top: -12px;
  right: -5px;
  width: 28px;
  height: 28px;
  padding-block: 1px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid #ea5505;
  color: #ea5505;
  font-size: 20px;
  font-weight: normal;
  text-align: center;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
  transition: transform 0.2s ease;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
}

.floating__close:hover {
  transform: scale(1.1);
}
.top__floating { transition: opacity .2s ease, transform .2s ease; }
.top__floating.is-hiding { opacity: 0; transform: translateY(4px); }

@media (min-width: 769px) {
  .floating__close {
    width: 30px; height: 30px;
    font-size: 25px;
    font-weight: bold;
    align-items: unset;
  }
}

/* ===============================
  FV共通
================================ */
.fv {
  position: relative; 
  overflow: hidden;
}
.fv__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  will-change: transform;
}

/* ===============================
  FVトップページ
================================ */
#mv-stack {
  margin: 0; padding: 0;
  position: relative;
}
#main__mv.fv { min-height: 100svh;}

#intro {
  position: relative;
  z-index: 1;
  background-color: #fff;
  transform: translateY(clamp(-160px, var(--parallax-offset), 0px));
  will-change: transform;
  overflow: visible;
}

#intro::before {
  pointer-events: none;
  content: "";
  z-index: -1;
  position: absolute;
  inset: calc(-1 * 16rem) 0;
  pointer-events: none;
  z-index: 0;
  height: 200px;
    background: linear-gradient(
    180deg,
    rgba(255,255,255,0)    0%,
    rgba(255,255,255,0.9)  50%,
    rgba(255,255,255,1.0)  60%
  ),
  linear-gradient(
    180deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,0.9) 50%,
    rgba(255,255,255,1.0) 60%
  );
}
@media (min-width: 769px) {
  #intro::before {
      background: linear-gradient(
    180deg,
    rgba(255,255,255,0)    0%,
    rgba(255,255,255,0.9)  50%,
    rgba(255,255,255,1.0)  60%
  );
  }  
}

.fv__video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; z-index: 0;
  filter: drop-shadow(0px 0px #000);
  z-index: -1;
}
/* 中央テキスト */
.fv__lead {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 2.4rem;
  width: 100%;
  text-align: center;
  color: #ffffff;
  letter-spacing: 0.36rem;
  text-shadow: 0px 0px 5px rgba(0, 0, 0, 1);
}
/* 下部ボタン */
#main__mv .fv__btn {
  position: absolute;
  display: inline-flex;
  bottom: 20%;
  left: 50%;
  width: 80%;
  max-width: 300px;
  transform: translateX(-50%);
  color: #fff;
  z-index: 2;
}
#main__mv .fv__btn > .btn-md{
  border: 0.1rem solid #fff;
  padding-bottom: 1.3rem;
  background: rgba(0, 0, 0, 0.2);
  transition: background-color .4s ease-in-out;
  letter-spacing: 0.05em;
}
#main__mv .fv__btn > .btn-md:hover {
  background: rgba(255, 255, 255, 0.2);
}
/* #main__mv .fv__shade{
  position: absolute;
  left: 0; right: 0; bottom: -200px;
  height: clamp(320px, 32vh, 720px);
  z-index: 0;
  pointer-events: none;
  opacity: 1;
  background: linear-gradient(
    180deg,
    rgba(255,255,255,0)    0%,
    rgba(255,255,255,0.5)  30%,
    rgba(255,255,255,1.0)  70%
  );
  transform: translateY(var(--shadeShift, 0px));
  will-change: transform;
  z-index: 2;
} */


/* ===============================
  FV果らり
================================ */
#karari__mv{margin-top: 10rem;}
/* 下部ボタン */
#karari__mv .fv__btn{
  display: inline-flex;
  position: absolute;
  top: 65%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 60%;
  max-width: 300px;
  color: #fff;
  text-align: center;
  letter-spacing: 0.36rem;
}
#karari__mv .fv__btn > .btn-lg{
  border: 2px solid #fff;
  font-size: 1.6rem;
  width: 100%;
  font-weight: 500;
  background: rgba(0, 0, 0, 0.2);
  height: 5.4rem;
  padding: unset;
}
#karari__mv .fv__btn > .btn-lg:hover{ background: rgba(255, 255, 255, 0.2); }
 #karari__mv .fv__btn > .btn-lg span{ filter:brightness(0) invert(1); }
.karari-logo{
  position: relative;
  margin: 6rem auto 0;
  width: min(300px, 80%);
  z-index: 2;
}
.karari__copy{
  text-align: center;
  margin-top: var(--li-space-128);
  margin-bottom: 160px;
  line-height: 2;
  letter-spacing: 2;
  font-size: 1.6rem;
}
.karari__media{
  margin: 3.2rem auto 0;
  width: 100%;
  max-width: min(90%, 400px);
}
#karari__mv .fv__shade{
  position: absolute;
  left: 0; right: 0; bottom: -160px;
  height: clamp(320px, 32vh, 720px);
  z-index: 0;
  pointer-events: none;
  opacity: 1;
  background: linear-gradient(
    180deg,
    rgba(255,255,255,0)    0%,
    rgba(255,255,255,0.5)  30%,
    rgba(255,255,255,1.0)  70%
  );
  transform: translateY(var(--shadeShift, 0px));
  will-change: transform;
  z-index: 2;
}

@media (min-width: 769px) {
  .karari__copy{
    margin-top: 160px;
    font-size: 1.8rem;
  }
  #karari__mv .fv__btn{
    top: 30vw;
    left: 75%;
    color: #fff;  
  }
  #karari__mv .fv__btn > .btn-lg{
    border: 2px solid #fff;
    color: #000;  
    background: rgba(0, 0, 0, 0.2);
    transition: background-color .4s ease-in-out;
  }
  /* #karari__mv .fv__btn > .btn-lg:hover{ background: rgba(255, 255, 255, 0.2); }
  #karari__mv .fv__btn > .btn-lg span{ filter:brightness(0) invert(1); } */
  .karari-logo{ width: max(300px, 22%); }
}

/* パララックス用 */
.karari-mt-parallax{
  --logo-mt: 0rem;
  margin-top: var(--logo-mt);
  will-change: margin-top;
}

/* ===============================
  FVショコネ
================================ */
#chocone__mv{margin-top: 12rem;}
#chocone__mv .fv { margin-block: 100px 160px; }
#chocone__mv .fv__overlay{ z-index: 3;}
#chocone__mv .fv__btn{
  display: inline-flex;
  position: absolute;
  bottom: 0%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 60%;
  max-width: 300px;
  margin: auto;
  color: #000;
  text-align: center;
  letter-spacing: 0.36rem;
  z-index: 3;
}
#chocone__mv .fv__btn > .btn-lg{
  border: 0.5px solid #000;
  font-size: 1.6rem;
  width: 100%;
  font-weight: 500;
  height: 5.4rem;
  padding: unset;
}
.chocone-logo{
  margin: 30rem auto 0;
  width: min(250px, 60%);
  position: relative;
  z-index: 3;
}
#chocone__mv .fv__shade{
  position: absolute;
  left: 0; right: 0; bottom: -280px;
  height: clamp(320px, 32vh, 720px);
  z-index: 0;
  pointer-events: none;
  opacity: 1;
  background: linear-gradient(
    180deg,
    rgba(255,255,255,0)    0%,
    rgba(255,255,255,0.5)  30%,
    rgba(255,255,255,1.0)  70%
  );
  transform: translateY(calc(0px + var(--shadeShift)));   
  will-change: transform;
  z-index: 2;
}
@media (min-width: 769px) {
  #chocone__mv{ margin-top: 9rem; }
  #chocone__mv .fv__shade{
    transform: translateY(var(--shadeShift, 0px)); bottom: -100px;
  }
  #chocone__mv .fv__overlay{ z-index: 1;}
  #chocone__mv .fv__btn{
    top: 40vw;
    left: 75%;
    z-index: 3;
  }
  #chocone__mv .fv__btn > .btn-lg{
    border: 1px solid #000;
    color: #000;  
  }
  .chocone-logo{
    margin: 20rem auto 0;
    width: max(200px, 25%);
    padding-block: 1rem;
  }
}
/* パララックス用 */
.chocone-mt-parallax{  margin: calc(0px + var(--logo-mt, 0rem)) auto 0; }
@media (min-width: 769px) {
  .chocone-mt-parallax{  margin: var(--logo-mt, 0rem) auto 0; }
}

.chocone-message__intro{
  position: relative;
  isolation: isolate;
  overflow: hidden; 
  min-height: clamp(420px, 60vh, 680px);
  display: block;
  width: 100%;
  max-width: 1600px;
  margin-inline: auto;
  padding-inline: var(--li-space-16);
  margin-top: 0;
}
@media (min-width: 769px) {
  .chocone-message__intro{ margin-top: 100px; }
}

/* 最背面：動画 */
.chocone-intro__bgvid{
  position: absolute;
  z-index: -3;
  top: 0;
  right: 0;
  transform: translateY(0);
  width: min(900px, 100vw);
  aspect-ratio: 1 / 1;
  height: auto;
  object-fit: cover;
  pointer-events: none;
  outline: none;
  filter: drop-shadow(0px 0px #fff);
}
/* 中間：白い背景シェイプ画像 */
.shape-background{
  position: absolute;
  opacity: 0.7; 
}
  
.shape-blue{
  width: 300px;
  height: 300px;
  background: url(../img/shape-b-1.svg) no-repeat center / contain;
  z-index: -2;
  top: 0px;
  left: -70px;
}
.shape-white{
  width: 400px; height: 400px;
  background: url(../img/shape-w-1.svg) no-repeat center / contain;
  z-index: -1;
  top: -180px;
  left: -100px;
}
/* 最前面：テキスト */
.chocone-intro__body{
  position: relative;
  max-width: 520px;
  margin-left: 5%;
  margin-top: 110vw;
  margin-bottom: 4.8rem;
}
.chocone-intro__body h2{ font-size: 3.2rem; z-index: 3; }
.chocone-intro__copy{
  z-index: 3;
  letter-spacing: 0.05em;
  font-size: 1.8rem; 
  line-height: 3.6rem;
}
.chocone-intro__mt{ margin-top: 3.2rem; }
@media (min-width: 769px) {
  .chocone-intro__body { margin-top: 60vw; }
  .shape-white{ width: 450px; height: 400px; top: -200px; }
}
@media (min-width: 1020px) {
  .chocone-intro__body{ margin-top: 19.2rem;}
  .chocone-intro__bgvid{
    top: 50%;
    transform: translateY(-50%);
  }
  .chocone-message__intro{ overflow: visible; margin-top: 200px;}
  .chocone-intro__body{
    margin-left: 10%;
    margin-top: unset;
  }
  .chocone-intro__body h2{ font-size: 3.6rem; }
  .chocone-intro__copy{
    font-size: 2.4rem; 
    line-height: 4.8rem;
  }
  .shape-white{
    top: -100px;
    left: 100px;
  }
  .shape-blue{
    top: 100px;
    left: -50px;
  }
}

@media (prefers-reduced-motion: reduce){
  .chocone-intro__bgvid{
    animation: none;
  }
}

/* ===============================
  NEWS
================================ */
/* カード */
.newsCard a { color:inherit; }
.newsCard__thumb { aspect-ratio: 3 / 2; margin:0; overflow:hidden; background:#eee; }
.newsCard__thumb img { width:100%; height:100%; object-fit:cover; display:block; }
.newsCard__date { display:block; margin-top: 1.6rem; font-weight:700; }
.newsCard__text { color:#444; margin-top: .8rem; }
.newsCard{
  transition:transform .08s ease, opacity .12s ease;
}
.newsCard__btn{
  margin-top: auto;
  text-align: end;
}
.newsAll__btn{ text-align: end; }
@media (min-width: 769px) {
  .topnews__list {
    grid-template-columns: repeat(2, 360px);
    gap: var(--li-space-48);
    justify-content: end;
  }
}


/* ===============================
  GIFT
================================ */
.gift__card {
  position: relative;
  display: block;
  isolation: isolate;
  max-width: 500px;
  margin: auto;
  transition: var(--li-transition-base) var(--li-ease),
   opacity var(--li-transition-base) var(--li-ease);
}
.gift__card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(0,0,0,.45) 0%,
    rgba(0,0,0,.25) 30%,
    rgba(0,0,0,0) 60%
  );
  pointer-events: none;
  z-index: 1;
}
.gift__figure{ overflow: hidden; }
.gift__label {
  position: absolute;
  bottom: 10px;
  left: -10px;
  color: #fff;
  font-size: 1.6rem;
  line-height: 1.5;
  letter-spacing: 0.05em;
  padding: 0.8rem 2.4rem;
  text-shadow: 0 1px 2px rgba(0,0,0,.8), 0 2px 6px rgba(0,0,0,.6);
  z-index: 2;
}
.gift__cta{
  margin-top: var(--li-space-64);
  text-align: end;
}

@media (min-width: 769px) {
.gift__cta{ text-align: end; }
.gift__list {
  display: grid;
  gap: 4rem 3.2rem;
  width: max(700px, 80%);
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: 1fr 1fr;
  justify-content: end;
  margin-left:auto;
  margin-right:0;
}
.gift__item--large {
  grid-row: span 2;
}
.gift__item--large .gift__card,
.gift__item--large .gift__card .gift__figure,
.gift__item--large .gift__card .gift__figure img{ height:100%; }
.gift__item--large .gift__card .gift__figure img{ object-fit:cover;}
.gift__label { bottom: 0px; }
}


/* ===============================
  Brand
================================ */

/* ========= テーマごとの色（親に data-theme を付け替える） ========= */
/* choco-ne 有効時 */
.bg-color[data-theme="chocone"] .brand__tab.is-active{
  --tab-active-bg: #69E0DC;
  --tab-active-fg: #583C27;
  --brand-accent: #69E0DC;
}
/* やまと果らり 有効時 */
.bg-color[data-theme="karari"] .brand__tab.is-active{
  --tab-active-bg: #FFE26D;
  --tab-active-fg: #583C27;
  --brand-accent: #DBBF1C;
}
/* 3つ目のブランド仮 有効時 */
.bg-color[data-theme="no3"] .brand__tab.is-active{
  --tab-active-bg: #80A867;
  --tab-active-fg: #583C27;
  --brand-accent: #80A867;
}
.brand-section[data-theme="chocone"] .brand__tab:not(.is-active){ color:#AAA; --tab-border:#CCC; --tab-bg: #fff;}
.brand-section[data-theme="karari"] .brand__tab:not(.is-active){ color:#AAA; --tab-border:#CCC; --tab-bg: #fff; }
.brand-section[data-theme="no3"] .brand__tab:not(.is-active){ color:#AAA; --tab-border:#CCC; --tab-bg: #fff; }

/* ========= ブランドコンテンツ ========= */
.brand-hero{
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto auto auto;
  justify-items: center;
  align-items: center;
  text-align: center;
  gap: 2rem;
  height: auto;
}
.brand-slide[data-theme="karari"] .brand-title{
  margin-bottom: 2rem;
  max-width: 70%;
}
.brand-slide[data-theme="chocone"] .brand-title{
  max-width: 50%;
}

.brand-title{
  width: 100%;
  grid-column: 1;
  grid-row: 1;
  align-self: end;
}
.brand-excerpt{
  grid-column: 1;
  grid-row: 2;
  position: relative;
  background: url("../img/shape-w-1.svg") no-repeat center/contain;
  width: 100%;
}
.brand-excerpt img{
  width: 80%;
  margin: auto;
  justify-self: center;
}
.brand-excerpt-txt{margin: 1.6rem auto 0; max-width: 300px; font-size: 1.4rem;}
.brand__cta{
  grid-column: 1;
  grid-row: 3;
  align-self: end;
}
.brand__cta a{
  background-color: #ffffff70; border: 1px solid #000; padding-inline: 3rem;
}

@media (min-width: 769px) {
  .brand-hero{
    grid-template-columns: 55% 1fr;
    grid-template-rows: repeat(3, 1fr);
    gap: 0;
  }
  .brand-title {
    order: 2;
    justify-self: center;
    align-self: unset;
  }
  .brand-excerpt {
    order: 1;
  }
  .brand-title{
    grid-row: 1 / 3;
    grid-column: 2 / 3;
  }
  .brand-excerpt{
    grid-row: 1 / 4;
    grid-column: 1 / 2;
  }
  .brand__cta{
    grid-row: 3 / 4;
    grid-column: 2 / 3;
  }
  .brand-excerpt img{ width: 80%; }

}


/* ===============================
  スライダー
================================ */
#brand__swipers .swiper-slide {
  width: clamp(300px, 90vw, 1100px);
  box-sizing: border-box;
}
.mb-brand{ margin-bottom: 30px; }
.brand-slide[data-theme="karari"] {
  padding: 55px 10px 50px;
  box-sizing: border-box;
  border-radius: 10px;
}
.brand-slide[data-theme="chocone"] {
  padding: 50px 10px 50px;
  box-sizing: border-box;
  border-radius: 10px;
}
.brand-slide.bg-color::before{ border-radius: 10px;}

#brand__swipers .swiper-slide-active {
  transform: translateY(0) scaleY(1);
  z-index: 2;
}
#brand__swipers .swiper-slide-prev,
#brand__swipers .swiper-slide-next {
  transform: scaleY(.95);
  opacity: .5;
  z-index: 1;
}
#brand__swipers .swiper-slide {
  transition: transform 0.6s,
              opacity 0.6s;
  will-change: transform;
}

#brand__swipers { position: relative; }
#brand__swipers .swiper-controller{
  position: absolute;
  left: 0; right: 0; 
  top: 45%; gap: 78%;
  z-index: 20;
  display: flex;
  justify-content: center;
  align-items: center;
  pointer-events: none;
}
#brand__swipers .swiper-button-prev,
#brand__swipers .swiper-button-next{
  position: static;
  width: 38px;
  height: 38px;
  border-radius: 999px;
  background: rgba(255,255,255,.95);
  box-shadow: 0 6px 18px rgba(0,0,0,.15);
  display: grid;
  place-items: center;
  cursor: pointer;
  pointer-events: auto;
}
#brand__swipers .swiper-button-prev::after,
#brand__swipers .swiper-button-next::after {
  content: "";
  display: block;
  width: 12px;
  height: 12px;
  background: url("../img/ic-caret-right-b.svg") no-repeat center / contain;
}
#brand__swipers .swiper-button-prev::after {
  transform: rotate(180deg);
}

@media (hover:hover){
  #brand__swipers .swiper-button-prev:hover,
  #brand__swipers .swiper-button-next:hover{
    transform: scale(1.06);
    transition: transform .18s ease, box-shadow .18s ease;
    box-shadow: 0 8px 22px rgba(0,0,0,.2);
  }
}
@media (min-width: 769px){
  #brand__swipers .swiper-controller{ top: 45%; gap: 85%; }
  #brand__swipers .swiper-button-prev,
  #brand__swipers .swiper-button-next{ width: 44px; height: 44px; }
}
@media (min-width: 1020px){
  #brand__swipers .swiper-controller{ top: 48%; gap: 75%; }
  .brand-slide[data-theme="karari"],
  .brand-slide[data-theme="chocone"] { padding: 110px 60px 90px; }
}

/* ===============================
  ブランドストーリー
================================ */
.story-hero{
  width: 100%;
  margin-left:auto;
  margin-right:0;
}
.story-hero__eyecatch{ overflow: hidden; display: block;}

.lead__title{
  margin-top: var(--li-space-16);
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.6;
}
.lead__text{
  margin-top: var(--li-space-8);
}
.lead__btn{ text-align: end;}
@media (min-width: 769px) {
  .story-hero{
    width: max(700px, 80%);
  }
}

/* ===============================
  果らりブランドページGIFT
================================ */
.karari-gift-eyecatch{
  max-width: 824px;
  width: 100%;
  margin-left:auto;
  margin-right:0;
}
.karari-gift-eyecatch figure{
  position: relative;
  overflow: hidden;
}
.karari-gift-eyecatch .lead__text{
  margin-top: 1.6rem;
  font-size: 1.6rem;
  letter-spacing: 0.05em;
}
.gift__btn{
  text-align: end;
  margin-top: 3.2rem;
}
@media (min-width: 769px) {
  .gift__btn{
    margin-top: 6.4rem;
  }
}

/* ===============================
  CATEGORY共通
================================ */
.category-section{
  margin-top: 200px;
}
#category-karari .category__list-item > * svg{
  width: 100%;
  overflow: visible;
}
#category-karari svg * { transform-box: fill-box; transform-origin: center; }


/* ===============================
  果らり カテゴリー
================================ */
#category-karari .category__list-item{
  display: flex;
  margin-bottom: 6rem;
}
#category-karari .category__list-1{
  position: relative;
  max-width: 800px;
  display: flex;
  flex-direction: column;
  z-index: 1;
  --parallax-y: 0px;
}
#category-karari .category__list-1::before{
  content: "";
  position: absolute;
  overflow: hidden;
  inset: 0;
  width: 60vw;
  height: min(800px, 100%);
  background: linear-gradient(to bottom, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);
  z-index: -1;
}

#category-karari .category__list-item:nth-child(even) .category__list-1{ align-items: end; }

#category-karari .category__list-item {
  position: relative;
  display: flex;
  align-items: center;
}
.category__list-1 {
  position: relative;
  z-index: 2;
}
.category__list-2 {
  position: absolute;
  z-index: 3;
  max-width: none;
}

/* SVGあにめ */
#kobito04.category__list-2 { margin-top: 17.6rem; right: -4%; top: -72%; transform: translateY(-50%); width: 50%; }
#kobito01.category__list-2 { left: 0%; top: 50%; transform: translateY(-50%); width: 30%; }
#kobito05.category__list-2 { right: 0%; top: 18%; width: 30%; }
#kobito03.category__list-2 { left: 5%; top: 38%; width: 27%; }
#kobito06.category__list-2 { right: 0%; top: 40%; width: 30%; }
#kobito02.category__list-2 { left: 4%; top: 30%; width: 30%; }

/* パララックス */
#category-karari .category__list .category__list-item:nth-child(odd) .category__list-1::before{
  transform: translate(-12%, calc(450px - calc(var(--parallax-y, 0) * 1.5 )));
}
#category-karari .category__list .category__list-item:nth-child(even) .category__list-1::before{
  transform: translate(60%, calc(350px - calc(var(--parallax-y, 0) * 2 )));
}
@media (min-width: 769px) {
  #kobito04.category__list-2 { margin-top: 17.6rem; right: 0%; top: -18%; transform: translateY(-50%); width: 30%; }
  #category-karari .category__list .category__list-item:nth-child(odd) .category__list-1::before{
    transform: translate(-50%, calc(450px - calc(var(--parallax-y, 0) * 1.5 )));
  }
  #category-karari .category__list .category__list-item:nth-child(even) .category__list-1::before{
    transform: translate(40%, calc(350px - calc(var(--parallax-y, 0) * 2 )));
  }  
}

.category__thumb{
  width: 100%;
  display: block;
  overflow: hidden;
}
.category__h3{
  font-size: 2.8rem;
  margin-top: 1.6rem;
  margin-right: 16px;
  font-weight: 700;
}
.category__h3-upper{ display: block; font-weight: 400; font-size: 1.4rem; line-height: 1; }
.category__h3-main{ display: block; font-size: 3.4rem; line-height: 1.3; font-weight: 700; letter-spacing: 0.03em; }
.category__h3-lower{ display: block; font-weight: 400; font-size: 1.8rem; }

@media (min-width: 769px) {
  .category__h3-main{ font-size: 4rem;}
}

.category__caption{
  margin-top: 0.8rem;
  letter-spacing: 0.05em;
  max-width: 400px;
}
.category__btn a{
  margin-top: 1.2rem;
}
.cy__btn{
  text-align: center; 
}
.cy__btn a{background-color: #ffffff70;}
/* .category__list-item .category__btn a{ border: 1px solid #333;} */

@media (min-width: 769px) {
  .category__list-item{
    gap: 50px;
  }
  .category__list-1{
    margin:0px 10% 0 min(30rem, 12%);
  }
  .category__list .category__list-item:nth-child(even){
    flex-direction: row-reverse;
  }
  .category__list .category__list-item:nth-child(even) .category__list-1{
    margin:0px 7% 0 min(30rem, 15%);
  }
}

.position-relative{ position: relative; margin-top: 100px;}
@media (min-width: 769px) {
  .position-relative{ margin-top: unset;}
}
.karari_kobito04{
  width: 100%;
  text-align: end;
  position: absolute;
  top: -160px;
  z-index: 3;
}
.karari_kobito02{
  width: 100%;
  text-align: end;
  position: absolute;
  bottom: -50px;
}
.karari_kobito04 img,
.karari_kobito02 img{
  width: 50%; display: inline;
}


/* ===============================
  chocone カテゴリー
================================ */
#category-karari, #category-chocone{ overflow-x: clip;}
#category-chocone{ border-radius: 60px 0 0 60px;}
@supports not (overflow: clip){
  #category-karari, #category-chocone{ overflow-x: hidden; }
}

#category-chocone .category__list{
  display: grid;
  grid-template-columns: 1fr;
}
@media (min-width: 769px) {
  #category-chocone .category__list{ grid-template-columns: 1fr 1fr; }
  #category-chocone .category__list-item{ justify-content: unset; }
  #category-chocone .category__list-item{ margin-bottom: 4rem; }
  #category-chocone .category__list .category__list-item:nth-child(even){ margin-top: 16rem; }
}

#category-chocone .category__list-item{
  position: relative;
  display: flex;
  justify-content: center;
  margin-bottom: 4rem;
}
#category-chocone .category__list-1{
  max-width: 500px;
  display: flex;
  flex-direction: column;
  z-index: 1;
}
#category-chocone .category__list-2{ pointer-events: none; z-index: -2; }

#chocone04.category__list-2 { left: -60%; top: 20%; }
#chocone05.category__list-2 { left: -30%; top: -10%; }
#chocone06.category__list-2 { left: -70%; top: 30%; }
#chocone07 .choco3{
  right: 580px;
  bottom: 40px;
}

@media screen and (min-width: 769px) {
  #chocone07 .choco3{ top: unset; bottom: 0; }
  #chocone01.category__list-2 { left: -50%; top: -95%; }
  #chocone02.category__list-2 { left: -20%; top: -40px; }
  #chocone03.category__list-2 { left: -10%; bottom: -60%; }
  #chocone04.category__list-2 { left: -110%; top: -30%; }
  #chocone05.category__list-2 { left: -90%; top: -60%; }
  #chocone06.category__list-2 { left: -100%; top: -25%; }
}
@media screen and (min-width: 1020px) {
  #chocone01.category__list-2 { left: 20%; top: -80%; }
  #chocone02.category__list-2 { left: -40%; top: -80px; }
  #chocone03.category__list-2 { left: 30%; bottom: -40%; }
  #chocone04.category__list-2 { left: -70%; top: -20%; }
  #chocone05.category__list-2 { left: -30%; top: -30%; }
  #chocone06.category__list-2 { left: -65%; top: -5%; }
}

.ellipse__img {
  display: block;
  position: absolute;
  left: 180px;
  top: 190px;

  will-change: transform;
  animation: ellipse-float 7s ease-in-out 0s infinite alternate;
}
.ellipse__img__bg {
  background-image: url(../img/shape-w-1.svg);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center center;
  width: 802px;
  height: 627px;
  text-indent: -9999px;
  display: block;
  position: absolute;
  left: 0;
  top: 0;

  will-change: transform;
  transform-origin: 55% 45%;
  animation: ellipse-wobble 8.5s ease-in-out -0.6s infinite alternate-reverse;
}

@keyframes ellipse-float {
  from { transform: translate3d(calc(6px * -1), calc(14px * -1), 0); }
  to   { transform: translate3d(6px, 14px, 0); }
}
@keyframes ellipse-wobble {
  from { transform: scale(1, 1) rotate(calc(1.2deg * -1)); }
  to   { transform: scale(1.03, 0.97) rotate(1.2deg); }
}

.choco{
  position: absolute;
  left: unset;
  right: 200px;
  top: -1100px;
  display: block;
  pointer-events: none;
}
.choco3{
  position: absolute;
  left: unset;
  top: unset;
  display: block;
  pointer-events: none;
  bottom: -850px;
  right: 200px;
}

@media screen and (min-width: 769px) {
  .choco, .choco2, .choco3{
    position: absolute;
    left: 50%; top: 0;
    right: unset; bottom: unset;
    display: block;
    pointer-events: none;
    /* z-index: 4; */
  }
}
.choco__1,.choco__2,.choco__3, 
.choco2__1,.choco2__2,.choco2__3,
.choco3__1,.choco3__2,.choco3__3 {
  position: absolute
}
.choco__1{ left: 210px; top:  68px; }
.choco__2{ left: 315px; top: 210px; }
.choco__3{ left: 460px; top: 120px; }
.choco2__1 { left: -110px; top: -50px; }
.choco2__2 { left: 25px; top: -180px }
.choco2__3 { left: 180px; top: -80px; }
.choco3__1 { left: 225px; top: 0; }
.choco3__2 { left: 336px; top: -200px; }
.choco3__3 { left: 520px; top: -150px }

.p-choco-blue-1,.p-choco-blue-2,.p-choco-brown-1,.p-choco-brown-2,.p-choco-green-1,.p-choco-pink-1,.p-choco-pink-2,.p-choco-yellow-1,.p-choco-yellow-2 {
  background-repeat:no-repeat;
  background-position: center center;
  background-size: contain;
  display: block;
  text-indent: -9999px
}
.p-choco-brown-1 {
  background-image: url(../img/brown-1.png);
  width: 216px;
  height: 222.5px;
  -webkit-transform-origin: 54px 54px;
  transform-origin: 54px 54px
}
.p-choco-brown-2 {
  background-image: url(../img/brown-2.png);
  width: 234px;
  height: 232px;
  -webkit-transform-origin: 45px 53px;
  transform-origin: 45px 53px
}
.p-choco-green-1 {
  background-image: url(../img/green-1.png);
  width: 250px;
  height: 245.5px;
  -webkit-transform-origin: 45px 50px;
  transform-origin: 45px 50px
}
.p-choco-pink-1 {
  background-image: url(../img/pink-1.png);
  width: 252px;
  height: 236px;
  -webkit-transform-origin: 56px 52px;
  transform-origin: 56px 52px
}
.p-choco-pink-2 {
  background-image: url(../img/pink-2.png);
  width: 246px;
  height: 226px;
  -webkit-transform-origin: 50px 38px;
  transform-origin: 50px 38px
}
.p-choco-yellow-1 {
  background-image: url(../img/yellow-1.png);
  width: 236px;
  height: 237px;
  -webkit-transform-origin: 50px 52px;
  transform-origin: 50px 52px
}
.p-choco-yellow-2 {
  background-image: url(../img/yellow-2.png);
  width: 223px;
  height: 215px;
  -webkit-transform-origin: 39px 43px;
  transform-origin: 39px 43px
}
.p-choco-blue-1 {
  background-image: url(../img/blue-1.png);
  width: 246px;
  height: 248px;
  -webkit-transform-origin: 58px 53px;
  transform-origin: 58px 53px
}
.p-choco-blue-2 {
  background-image: url(../img/blue-2.png);
  width: 245px;
  height: 231px;
  -webkit-transform-origin: 48px 37px;
  transform-origin: 48px 37px
}

.particle-floating{ will-change: transform; }
.choco *, .choco2 *, .choco3 * { animation: floatY 6s ease-in-out infinite; }
.choco *:nth-child(2), .choco2 *:nth-child(3),.choco3 *:nth-child(2){ animation-duration: 8s; animation-delay: 1s; }
.choco *:nth-child(3), .choco2 *:nth-child(2),.choco3 *:nth-child(3){ animation-duration: 5.5s; animation-delay: -.3s; }

@keyframes floatY{
  0%{   transform: translateY(0) rotate(0deg); }
  50%{  transform: translateY(-12px) rotate(1.5deg); }
  100%{ transform: translateY(0) rotate(0deg); }
}

.bg-wave{
  position: absolute; inset: 0; z-index: -3; pointer-events: none;
}

.wave1, .wave2 {
  width: 100%;
  height: 294px;
  display: block;
  position: absolute;
  left: 0;
  right: auto;
  bottom: auto;
  background-position: calc(50% + 30px) 0;
  pointer-events: none;
  will-change: transform;
  --ampX: 12px;      /* 左右振幅 */
  --ampY: 10px;      /* 上下振幅 */
  --rot: .6deg;      /* 回転 */
  --scale: 1.02;     /* 拡大（ほんの少し） */
  --dur: 9s;         /* 片道時間 */
  --delay: 0s;       /* 遅延 */

  animation: wave-drift var(--dur) ease-in-out var(--delay) infinite alternate;
}
.wave1 {
  top:730px;
  background-image: url(../img/wave-1.svg);
  --ampX: 8px; --ampY: 8px; --rot: 5deg; --scale: 1.015; --dur: 11s; --delay: -.6s;
}
.wave2 {
  top:1730px;
  background-image: url(../img/wave-2.svg);
  --ampX: 16px; --ampY: 12px; --rot: 8deg; --scale: 1.03; --dur: 8s; --delay: 0s;
  animation-direction: alternate-reverse;
}

@keyframes wave-drift{
  from{
    transform: translate3d(calc(var(--ampX) * -1), calc(var(--ampY) * -1), 0)
               rotate(calc(var(--rot) * -1)) scale(1);
  }
  to{
    transform: translate3d(var(--ampX), var(--ampY), 0)
               rotate(var(--rot)) scale(var(--scale));
  }
}

@media (prefers-reduced-motion: reduce){
  .ellipse__img, .ellipse__img__bg{ animation:none !important; transform:none !important; }
  .wave1, .wave2{ animation: none !important; transform: none !important; }
}


/* ===============================
  features
================================ */
.feature__list{
  max-width: 957px;
  width: 100%;
  display: flex;
  gap: 9.6rem;
  flex-direction: column;
}
.feature__row{
  display: flex;
  flex-direction: column;
  gap: 2.4rem;
  align-items: flex-start; 
}
.--flex-reverse{
  flex-direction: column;
}
.feature__media{
  margin-top: 3.2rem;
  max-width: 100%;
  width: 100%;
}
.feature__body {
  flex: auto;
  width: 100%;
}
.feature__title{
  font-size: 2.2rem;
  font-weight: 700;
  letter-spacing: 0.05em;
}
.feature__body p{
  width: 100%;
  margin-top: 3.2rem;
  font-size: 1.6rem;
  letter-spacing: 0.05em;
  line-height: 1.875;
}
@media (min-width: 769px) {
  .feature__row{
    flex-direction: row;
    gap: 4.8rem;
  }
  .--flex-reverse{
    flex-direction: row-reverse;
  }
  .feature__media{
    max-width: 560px;
  }
  .feature__title{ font-size: 2.6rem; }
  .feature__body{
    flex: 0 0 350px;
    width: 350px;
  }
}

/* ===============================
  SNS
================================ */
.instagram-section{ text-align: center; }
.ig-icon{display: inline-block;}
.instagram__link{ margin-top: 3.2rem; }
.instagram-grid{
  width: 100%;
  margin-inline: auto;
  margin-top: 2.4rem;
  background-color: #000;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  gap: 1px;
  border-top: 1px solid #000;
  border-bottom: 1px solid #000;
}
.instagram-section[data-theme="chocone"] .instagram-grid{background-color:unset; border: none;}
.ig9__card{
  overflow: hidden;
  display: block;
}
.instagram__wrap {
  position: relative;
}
.instagram__overlay-text {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  color: #fff;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  pointer-events: none;
  z-index: 2;
}
.instagram__overlay-text p {
  font-size: clamp(1.2rem, 1.5vw, 2rem);
  font-weight: normal;
  text-shadow: 
    0 1px 2px rgba(0,0,0,0.9),
    0 2px 6px rgba(0,0,0,1),
    0 4px 10px rgba(0,0,0,0.8);
  line-height: 2;
  color: #fff;
}
.instagram__overlay-text p + p { margin-top: 2rem;}
@media (min-width: 769px) {
  .instagram-section[data-theme="chocone"] .instagram-grid{width: 90%;}
  .instagram-section[data-theme="karari"] .instagram-grid{width: 80%;}
  .instagram__overlay-text p + p { margin-top: 3rem;}
  .instagram__overlay-text p { line-height: 2.4; }
}

/* ===============================
  下位カテゴリへの導線
================================ */
.fs-c-subgroup{
  max-width: var(--li-max-brand);
  margin-top: 128px;
  margin-inline: auto;
}