/*====================================================================
コンセプと
====================================================================*/
.sec_01 {
  padding: 80px 20px 140px;
}
.sec_01 p {
  text-align: left;
  line-height: 2;
}
/*====================================================================
共通
====================================================================*/
.main-ttl {
  font-size: clamp(40px, 12vw, 52px);
  text-align: center;
  line-height: 2;
}
.section-inner {
  margin-bottom: 50vw;
  display: block;
}
.hero__text-sub {
  text-align: right;
  margin-top: 2vw;
  margin-bottom: 2vw;
}

.spec__row {
  justify-content: flex-end;
  margin-top: 3px;
}
.sp-none {
  display: none!important;
}
.pc-none {
  display: block;
}
/*====================================================================
ボタン
====================================================================*/
.hero__cta{
   position: absolute;
  left: 0;
  right: 0;          /* ←これが効く */
  bottom: -14%;
  display: flex;
  justify-content: center; /* ←中央 */
  z-index: 5;
}
/*====================================================================
境界
====================================================================*/
.sec_products::before{
  content:"";
  position:absolute;
  left:0;
  top: -58px;
  width:100%;
  height: 60px;
  background: url("../images/sp_curve_01.png") no-repeat center top;
  background-size: 100% 100%;
  pointer-events:none;
  z-index: 2;
}
.sec_03_inner::before{
  content:"";
  position:absolute;
  left:0;
  top: -58px;
  width:100%;
  height: 60px;
  background: url("../images/sp_curve_02.png") no-repeat center top;
  background-size: 100% 100%;
  pointer-events:none;
  z-index: 2;
}
.sec_04_inner::before{
  content:"";
  position:absolute;
  left:0;
  top: -58px;
  width:100%;
  height: 60px;
  background: url("../images/sp_curve_03.png") no-repeat center top;
  background-size: 100% 100%;
  pointer-events:none;
  z-index: 6;
}
.sec_05_inner::before{
  content:"";
  position:absolute;
  left:0;
  top: -58px;
  width:100%;
  height: 60px;
  background: url("../images/sp_curve_04.png") no-repeat center top;
  background-size: 100% 100%;
  pointer-events:none;
  z-index: 10;
}
.sec_08_inner::before {
 content:"";
  position:absolute;
  left:0;
  top: -58px;
  width:100%;
  height: 60px;
  background: url("../images/sp_curve_04.png") no-repeat center top;
  background-size: 100% 100%;
  pointer-events:none;
  z-index: 10;
}
.sec_09_inner::before {
 content:"";
  position:absolute;
  left:0;
  top: -58px;
  width:100%;
  height: 60px;
  background: url("../images/curve_05.png") no-repeat center top;
  background-size: 100% 100%;
  pointer-events:none;
  z-index: 20;
}
/*====================================================================
ヘッダー
====================================================================*/
.p-header__inner {
  padding: 0 20px;
}
.p-header__hamburger {
  width: 70px;
}
/*====================================================================
products
====================================================================*/
.hero__text_sec_pd {
  font-size: clamp(16px, 1.25vw, 24px);
}
.hero__tag {
  margin-bottom: 4px;
  font-size: clamp(24px, 8vw, 40px);
}
.hero__left {
  padding-left: 20px;
  padding-right: 20px;
  padding-top: 30px;
}
.hero__tag--accent,.hero__tag--accent_pink,.hero__tag--accent_blue {
      font-size: clamp(16px, 1.563vw, 30px)!important;
}
.hero__tag--accent_green {
  font-size: clamp(14px, 1.563vw, 30px)!important;
}
/* 画像の指定 */
.sec_02_inner {
  position: relative;
  aspect-ratio: 400 / 332;
  background: url(../images/illustration_sp_01.png) no-repeat right bottom;
  background-size: contain;
  min-height: clamp(570px, 150vw, 700px);/* 個別に設定 */
}
.sec_03_inner {
  position: relative;
  aspect-ratio: 400 / 332;
  background: url(../images/illustration_sp_02.png) no-repeat right bottom;
  background-size: contain;
  min-height: clamp(570px, 140vw, 700px);/* 個別に設定 */
}
.sec_04_inner {
  position: relative;
  aspect-ratio: 400 / 332;
  background: url(../images/illustration_sp_03.png) no-repeat right bottom;
  background-size: contain;
  min-height: clamp(640px, 133vw, 700px);/* 個別に設定 */
}
.sec_05_inner {
  position: relative;
  aspect-ratio: 400 / 332;
  background: url(../images/illustration_sp_04.png) no-repeat right bottom;
  background-size: contain;
  min-height: clamp(510px, 150vw, 730px);/* 個別に設定 */
}
.hero__text-main {
  font-size: clamp(16px, 0.9375vw, 18px);
}
.hero__text-sub {
  font-size: clamp(14px, 1.042vw, 16px);;
}
.hero__title-sub {
    font-size: clamp(18px, 2.083vw, 24px)!important;
}
/*====================================================================
背景色
====================================================================*/
.bg_orange {
  background: var(--orange-color);
  padding-bottom: 5px;
}
.bg_pink {
  background: var(--pink-color);
  padding-bottom: 5px;
}
.bg_blue {
  background: var(--blue-color);
  padding-bottom: 5px;
}
.bg_green {
  background: var(--green-color);
  padding-bottom: 150px;
}/*====================================================================
Food Pairing
====================================================================*/
.sec_06_inner {
  padding: 60px 0px 80px 0;
}
.sec_06_inner h1 {
  padding-bottom: 8px;
}
.tab-2 > label {
  font-size: 1em;
  border-radius: 15px 15px 0 0;
  padding: 0.8em 0;
  width: 22vw!important;
}
.tab-2 {
  gap:0 4px;
  padding-top: 16px;
}
.tab-2 > div {
  padding: 20px;
}
/*====================================================================
ENJOY
====================================================================*/
.sec_07_inner{
  padding: 50px 20px;
  margin-bottom: 64px;
}
.enjoy-ttl_01 {
  font-size: clamp(16px, 1.25vw, 24px);
  margin-bottom: 10px;
}
.enjoy-images {
  display: grid;
  place-items: center;
  gap: 10px;
  margin: 0 auto 4vw;
}
.enjoy-images img {
  width: 100%;
}
.enjoy-ttl_02 {
  text-align: left;
}
.enjoy-images img:nth-of-type(1) {
 width: clamp(160px, 25vw, 500px); 
}
.sec_07 .main-ttl {
  margin-bottom: 8px;
}

/*====================================================================
ABOUT&SANTERO
====================================================================*/
.pc_img {
  display: none;
}
.sp_img {
  display: block;
  width: 100%;
  margin-top: 16px;
  margin-bottom: 24px;
}
.sec_08_main {
  padding: 0 20px 120px;
}
.sec_08_main .main-ttl {
  margin-top: 24px;
}
.sec_09_main .main-ttl {
  margin-top: 24px;
}
.sec_08_main .sec_text {
  font-size: clamp(16px,1.0417vw,20px);
}
.sec_09_main .sec_text {
  font-size: clamp(16px,1.0417vw,20px);
}
/*====================================================================
フッター 
====================================================================*/
.footer__cta_btn {
  padding: 24px 26px;
}
.p-footer__container {
  max-width: 100%;
}
.p-footer__bottom {
  padding: 1rem 20px;
}
.p-footer__sns {
  width: 100%;
}
.footer__cta {
  margin: 0;
 padding: 80px 20px 120px;
}
/*====================================================================
アニメーション
====================================================================*/
.marquee-text {
  line-height: 1;
}
.mvcard.is-pulse .mvcard__bottle{
    animation: bottlePulseTiltHeroSP 1.6s cubic-bezier(.25,.8,.25,1) .45s both;
  }

  @keyframes bottlePulseTiltHeroSP{
    0%   { transform: translate3d(-50%,0,0) scale(1) rotate(0deg); }

    40%  { transform: translate3d(-50%,-8%,0) scale(1.5) rotate(16deg); }

    70%  { transform: translate3d(-50%,-8%,0) scale(1.5) rotate(16deg); }

    100% { transform: translate3d(-50%,0,0) scale(1) rotate(0deg); }
  }
.mvcard__bottle{
  will-change: transform;
  transform: translateZ(0);
  backface-visibility: hidden;
}

/*====================================================================
MV
====================================================================*/
.hero__inner {
  width: 100%;
  margin: 0;
  padding: 0;
}
.hero__slider.swiper {
  padding-left: 0;
  padding-right: 16px; /* 右チラ見せ */
}
.hero .swiper-slide {
  width: 90vw !important;
  opacity: 1 !important;
  transform-origin: left center;
  transition: transform .4s var(--ease);
}
/* 1枚目（表示中）は等倍 */
.hero .swiper-slide-active {
  transform: scale(1) !important;
}
/* 2枚目（次）は少し縮小 */
.hero .swiper-slide-next {
  transform: scale(.80) !important;   /* ← 0.88〜0.95で好み調整 */
}
.mvcard{
  position: relative;
  left:0;
}
.mvcard.is-pulse .mvcard__bottle{
  animation: bottlePulseTiltHero 2.2s cubic-bezier(.22,1,.36,1) .2s both;
}

/* はみ出し防止の設定 */
.hero {
  overflow: hidden;
  height: auto;
  padding-top: 20vh;
  padding-bottom: 14vh; 
}
.hero__bgword {
  bottom: -0.1em;
  font-size: clamp(56px, 30vw, 140px);
}