@charset "utf-8";

:root {
  /* ============================================================
    色系（Color Palette）
  ============================================================ */
  --text-color: #636569;         /* メイン文字色（YOIYO濃グレー） */
  --text-sub: #9b9a9a;           /* サブ文字色（注釈・日付など） */
  
  --bg-content: #e2e6ec;         /* コンテンツ背景色 */
  --border-color: #595757;       /* 枠線カラー */

  /* ============================================================
    フォント
  ============================================================ */
  --font-main: "Zen Old Mincho", serif;

  /* ============================================================
    レイアウト共通
  ============================================================ */
  --yoiyo-max-width: 450px;      /* コンテンツ最大幅（YOIYO方式） */
  
}
/* 768px以下の時だけ上書き */
@media (max-width: 768px) {
  :root {
    --yoiyo-max-width: 100%;
  }
}

/* ============================================================
ベース
============================================================ */
body{
  margin: 0 !important; /* !importantは念のためつけています */
  padding: 0;
  width: 100%;
  min-height: 100vh;
  background: url("../../assets/img/pc-bg.jpg") no-repeat center / cover fixed;
  scrollbar-gutter: stable;
  font-family: var(--font-main);
}

#yoiyo-article {
	position: relative;
  width: min(100%, var(--yoiyo-max-width)); 
	max-width: 100%;
	margin: 0 auto;             /* 中央寄せ（左右） */
	min-height: 100vh;          /* 画面いっぱいの高さを確保 */
  overflow: visible;
	-webkit-overflow-scrolling: touch;
	background-color: #fff;
	box-shadow: 0 14px 30px rgba(50, 63, 48, 10.3);
  font-family: "Zen Old Mincho", serif;

}

#yoiyo-article img {
    max-width: 100%;
    height: auto;
    display: block;
    
}


/* ============================================================
   ヘッダー (修正版)
   PCで見ても450pxの枠内に固定されるように調整
============================================================ */
header {
  position: fixed;
top: -60px;
  left: 50%;
  transform: translateX(-50%);
  width: min(100%, var(--yoiyo-max-width)); 
  height: 55px; 
  display: flex;
  align-items: center;
  justify-content: flex-end; 
  padding: 0 2%;
  box-sizing: border-box;
  z-index: 1010; 
  background-color: #fff;
  /* ▼ 追加: 上下に動く際のアニメーション設定 */
  transition: top 0.3s ease;
  
}

.logo {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 1; 
  width: 28.13%;  
  line-height: 0;
}

.logo a {
  display: block;
}

.logo img {
  width: 100%;
  height: auto;
  display: block;
}

.btn_sp_menu {
  display: block;
  width: 5.6%;
  height: 20px;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  position: relative;
  z-index: 1006;
}

.btn_sp_menu span {
  display: block;
  height: 1px;
  width: 100%;
  background-color: var(--text-sub);
  position: absolute;
  left: 0;
  transition: all 0.3s ease-in-out;
}

.btn_sp_menu span:nth-child(1) { top: 0; }
.btn_sp_menu span:nth-child(2) { top: 9px; }
.btn_sp_menu span:nth-child(3) { bottom: 0; }

.btn_sp_menu.active span:nth-child(1) { transform: translateY(9px) rotate(45deg); }
.btn_sp_menu.active span:nth-child(2) { opacity: 0; }
.btn_sp_menu.active span:nth-child(3) { transform: translateY(-9px) rotate(-45deg); }

.sp_menu {
  position: fixed;
  top: 55px; 
  left: 50%;
  transform: translateX(-50%);
  width: min(100%, var(--yoiyo-max-width)); 
  height: calc(100vh - 55px);
  background-color: #ffffff;
  z-index: 1000;
  text-align: center;
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.4s, visibility 0.4s;
  display: flex;
  justify-content: center;  /* 横中央 */
  align-items: center;      /* ★縦中央 */
  padding-top: 0;           /* ★絶対入れない！中央阻害の原因 */
  overflow-y: auto;
}

.sp_menu.active {
  visibility: visible;
  opacity: 1;
}
.menu_inner {
  width: 100%;
  max-width: 280px;
  margin: auto;          /* ★中央ブロックとして扱う */
  text-align: center;
}

/* --- 個別のリンクボタン --- */
.sp_menu .btn_menu {
  display: block;          
  text-align: center;      
  padding: 26px 0;         
  text-decoration: none;   
  transition: opacity 0.3s; 
}

.sp_menu .btn_menu:hover {
  opacity: 0.7;
}

/* --- 画像の設定 --- */
.sp_menu .btn_menu img {
  display: block;
  margin-left: auto;
  margin-right: auto;
  height: 22px !important;
  width: auto;
}

/* ============================================================
フローティングカート（ナビ下追従）
============================================================ */
.p-fixed-footer {
  position: fixed;
  bottom: -150px; /* ★最初は見えないように隠しておく（高さ分余裕を持つ） */
  left: 0;
  right: 0;
  margin: 0 auto;
  width: min(100%, var(--yoiyo-max-width)); 
  z-index: 3000;
  background-color: var(--bg-content);
  padding: 10px;
  box-shadow: 0 -4px 10px rgba(0,0,0,0.1);
  box-sizing: border-box;
  transition: bottom 0.3s ease; /* アニメーション */
}

.p-fixed-footer__inner {
  width: 100%;
  box-sizing: border-box;
  display: flex;
  gap: 10px;
}

/* --- ボタン共通 --- */
.p-fixed-footer__btn {
  position: relative;
  display: flex;
  align-items: center; /* テキストを上下中央に */
  justify-content: center;
  flex: 1;
  height: 50px; /* ボタンの高さを固定（適宜調整） */
  text-decoration: none;
  color: #fff;
  transition: opacity 0.3s;
}

/* ボタンの色分け */
.p-fixed-footer__btn.-blue { background-color: #324E56; }
.p-fixed-footer__btn.-brown { background-color: #4E3524; }

.p-fixed-footer__btn:hover { opacity: 0.9; }

.p-fixed-footer__product-img {
  position: absolute;
  bottom: 9px; 
  left: 50%;
  transform: translateX(-50%);
  width: 90%; 
}

.p-fixed-footer__product-img img {
  width: 100%;
  height: auto;
  vertical-align: bottom;
}



/* --- SPでの微調整（450px以下） --- */
@media (max-width: 450px) {

  .p-fixed-footer {
    width: 100%; /* 横幅いっぱいに */
    padding: 5px; /* 上下は維持、左右を狭く（5px） */
    box-sizing: border-box; /* paddingを含めた幅計算に */
  }

  .p-fixed-footer__inner {
    gap: 5px; /* ボタン同士の間隔も少し詰める */
  }

  .p-fixed-footer__btn {
    /* 固定の高さだと文字がはみ出る場合があるので、min-height推奨 */
    height: auto; 
    min-height: 30px; 
    padding: 5px 0; /* 上下に少し余白を持たせる */
  }

  .p-fixed-footer__product-img {
    width: 80%; /* ★画像を少し小さくしてバランスを取る（適宜調整） */
  }

}

/* ============================================================
KV
============================================================ */
.p-hero{
  position: relative;
  width: 100%;

}

.p-hero__movie{
  position: relative;
  width: 100%;
  aspect-ratio: 9 / 16;     
  overflow: hidden;  
}

.p-hero__movie video{
  width: 100%;
  height:100%;
  display: block;
  object-fit: cover;
  object-position: center;
}

/* ページトップ */
/* .p-pagetop{
	position: fixed;
	bottom:10.95238095vw;
	left: 4.28571429vw;
	width: 15.71428571vw;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
	z-index: 10;
}

.p-pagetop.is-show{
	opacity: 1;
	visibility: visible;
} */


/* ============================================================
コンセプト
============================================================ */

.p-concept-section {
  position: relative;
  overflow: hidden;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-image: url("../../assets/img/concept-bg.png"); 
  background-size: cover;
  background-position: left center; 

  background-repeat: no-repeat;
  background-position: -0.5px center;
}

.p-concept-content {
	padding:  8% 7% 12%;
  position: relative;
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem;
}
.p-concept_img{
  width: 100%;
}


/* ============================================================
ラインアップ
============================================================ */
.p-lineup-section {
  padding: 12% 0;
  background-color: var(--bg-content);
}

.p-lineup__heading{
	padding-inline: 5%;
	margin-bottom: 3rem;
}


/* ============================================================
製品
============================================================ */
/* 上の画像（背景） */
.p-product-top {
  width: min(100%, var(--yoiyo-max-width)); 
  height: 0; 
  padding-top: calc((1540 / 750) * 100%); 
  background-image: url("../../assets/img/product-top-img.png");
  background-size: cover;
  background-position: center;
  display: block; 
  position: relative;
  z-index: 5;
}
  
.p-product-top-inner {
  width: min(100%, var(--yoiyo-max-width)); 
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  height: 100%; /* 必要に応じて */
}
  
.p-product_img img{
	margin-top: 2rem;
}

.p-product__button{
    width: 22.2%;
    margin-left: auto;  
    margin-right: 1rem; 
    /* margin-top: 1rem; */
    display: block;     
}

.p-modalContent,
.p-modalBg {
    position: absolute;
}

  /* p-product 全体を相対位置に */
.p-product {
	position: relative;
  }
  
  /* 真ん中に重ねる画像 */
  .p-product-middle {
    position: absolute;
    left: 50%;
    top: calc(50% + clamp(0px, 450px - 100vw) / 1, 20px);
    transform: translate(-50%, -50%);
    width: 23%;
    z-index: 10;
  }

/* --- 下の画像エリア --- */
.p-product-bottom {
  position: relative;
  margin-top: -2px;
  width: min(100%, var(--yoiyo-max-width)); 
  height: 0;
  padding-top: calc((1540 / 750) * 100%);
  
  overflow: hidden;
}

/* 下の画像は絶対配置のまま変更なし */
.p-product-bottom img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 4.5s ease;
}

.p-product-bottom img.active {
  opacity: 1;
}
  
/* ============================================================
  Product Buy Section
============================================================ */
.p-product-buy-section {
    padding: 12% 7% 35% 7%;
    position: relative;
}

.p-product-buy-section::after {
  content: "";
  position: absolute;
  bottom: 10px;              
  left: 0;
  right: 0;
  width: 100%;            
  height: 180px;          
  margin: 0 auto;
  background: url("../../assets/img/product_deco.png")
      no-repeat center top / cover;
  pointer-events: none;
  z-index: 10;
}

/* 中央寄せコンテナ（横幅は450pxを上限） */
.p-product-buy_inner {
    margin: 0 auto;
}

/* 商品タイトル画像 */
.p-product-buy-item img {
    margin: 0 auto 2.4rem;
}

/* 商品セット全体 */
.p-buy-list {
  margin-bottom: 3rem;

}

/* 商品アイテム（画像 + ボタン） */
.p-buy-item {
    display: flex;
	flex-direction: column;
    justify-content: space-between;
	align-items: flex-start;
    margin-bottom: 2rem;
    gap: 1.2rem;
}

.p-buy-info {
  width: 65.87%; 
}

.p-buy-info.small{
  width: 58%; 
}
.p-buy-info.medium{
  width: 59.07%; 
}

.p-buy-link a {
  display: block; /* リンク領域をブロックにする */
  transition: opacity 0.3s ease; /* 0.3秒かけて変化させる（アニメーション） */
}

.p-buy-link a:hover {
  opacity: 0.7; /* 70%の不透明度にする（少し薄くなる） */
}

.p-buy-link img {
  width: 100%;
  height: auto;
  vertical-align: bottom; /* 下の隙間を消すおまじない */
}

/* 注釈 */
.p-buy-note {
  padding-bottom: 2rem;
}

.p-line {
  display: block;
  width: 100%;             /* 横幅いっぱい */
  height: 1px;             /* 線の太さ */
  border: none;            /* デフォルトの線を消す */
  background-color: var(--border-color); /* 色を指定 */
  margin: 0 auto 2rem;          /* 上下の余白 */
}

/* ============================================================
お客様の声
============================================================ */
.p-voice-section{
	padding:  12% 7%;
	text-align: center; 
}

.p-voice__title{
	width: 64%;
  margin: 0 auto 7.2%;
}

.p-voice__item{
	width: 100%;
}

.p-voice__item + .p-voice__item{
	margin-top: 8%;
}

.p-voice__block{
	margin-top: 9%;
}

.p-voice__accButton{
	width: 22%;
	margin: auto;
}
.p-voice__contents{
	display: none;
	padding: 7.9% 0 0;
	margin:0 -4%;
}

.p-voice__img {
  margin-bottom: 24px; /* 下を大きく */
  text-align: center;  /* 画像中央寄せ（必要なら） */
}


/* ============================================================
レビコ
============================================================ */
#revico .block-goods-user-review {
  color:#504741;
  font-family:"メイリオ", Meiryo, "ヒラギノ角ゴ Pro W6", "Hiragino Kaku Gothic Pro", Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  text-align:left;
}
#revico .revico-multicomment-top .revico-review-comment-row-wrapper .revico-review-comment-row .revico-review-comment-detail .revico-review-comment-detail--addition .revico-review-comment-detail--addition-reviewer .revico-review-comment-detail--addition-reviewer-image img{
  width:40px !important;
}
#revico .revico-multicomment-top .revico-review-comment-row-wrapper .revico-review-comment-row .revico-review-comment-detail .revico-review-comment-detail--action-sns img{
  width:auto !important;
  height:18px;
}
#revico .revico-multicomment-top .revico-starability-result {
  background-image: url(https://show.revico.jp/img/star_yellow.png);
}
#revico .revico-modal-state{
  display:none !important;
}

/* ============================================================
その他
============================================================ */
.p-other-section {
  margin: 0 auto;
  padding: 17.87% 7%;
  box-sizing: border-box;
  text-align: center;
  background-color: var(--bg-content, #eef1f5); 
}

.p-other__item a {
  display: block;
  transition: opacity 0.3s;
}

.p-other__item a:hover {
  opacity: 0.7;
}

.p-other__item {
  width: 100%;
}

.p-other__title {
  width: 100%; 
  margin-top: 17.87%;   
  margin-bottom: 8%; 
}

/* 3. 下の商品バナー同士の間隔 */
.p-other__item + .p-other__item {
  margin-top: 5.6%;
}

/* ============================================================
sns
============================================================ */
.p-sns-section {
  margin: 0 auto;
  padding: 0 7% 11.47% 7%;
  box-sizing: border-box;
  text-align: center;
  background-color: var(--bg-content)
}

.p-sns__title {
  width: 72.53%;
  margin: 0 auto 1.5rem;
}

.p-sns__content {
  display: flex;
  justify-content: center; 
  gap: 1.5rem;
}

.p-sns__link {
  display: block;
  width: 18.53%; 
  transition: opacity 0.3s;
}

.p-sns__link:hover {
  opacity: 0.7;
}

/* ============================================================
フッター
============================================================ */
.p-footer {
  width: min(100%, var(--yoiyo-max-width));
  margin: 0 auto;
  
  /* 文字色・背景 */
  color: #fff;
  background-image: url("../../assets/img/footer_bg.png"); 
  background-repeat: no-repeat;
  background-position: center bottom;
  background-size: cover;
  padding-top: 16.8%;
  padding-bottom: calc(13.3% + 30px);
  
  position: relative;
  text-align: center; /* 中身を全部センター寄せ */
  box-sizing: border-box; /* パディングを含めた幅計算 */
}
.p-footer__bg {
  width: 100%;
  box-sizing: border-box;
}

/* YOIYO ロゴ */
.p-footer__logo-yoiyo {
  width: 56.8%; /* 元のサイズ感を維持 */
  margin: 0 auto 8%; /* 下の余白（参照コードのmargin-top相当） */
}

.p-footer__logo-yoiyo img {
  width: 100%;
  height: auto;
  display: block;
}

/* リンク集（リスト） */
.p-footer__nav {
  display: flex;
  flex-direction: column;
  gap: 1rem; 
  width: fit-content;
  margin: 0 auto 3rem;
  padding: 0;
  list-style: none;
  align-items: flex-start;
}

.p-footer__nav-item {
  margin: 0; 
}

.p-footer__nav-item a {
  color: #fff;
  text-decoration: none;
  font-size: .75rem; 
  font-weight: 700;
  letter-spacing: 0.05em;
  transition: opacity 0.3s;
  display: inline-block;
}

.p-footer__nav-item a:hover {
  opacity: 0.7;
}

/* コピーライトブロック */
.p-footer__copyright-block {
  margin-top: 13%;
}

/* LOTTE ロゴ */
.p-footer__logo-lotte {
  width: 70px; 
  margin: 0 auto 1rem; 
}

.p-footer__logo-lotte img {
  width: 100%;
  display: block;
}

/* コピーライトテキスト */
.p-footer__copyright {
  display: block;
  font-size: 10px;
  font-weight: 400;
  opacity: 0.8;
  letter-spacing: 0.05em;
}

.p-sns__list{
  display: flex;
  justify-content: center;
  gap: 7%;
  margin: 0 0 10%;
  padding: 0;
  list-style: none;
}

.p-sns__icon{
  width: 10%;
}

/* ============================================================
slick調整
============================================================ */
.p-slickSlider{
	position: relative;
	padding: 0;
}

.p-slickSlider__item{
	margin-inline: 20px;
	margin-bottom: 20px;
	background-color: #fff;
	overflow: hidden;
}

.p-slickSlider__btn {
	display: block;
	width: 100%;              
	margin: 2px auto 0;        
  }

.p-slickSlider .prev-arrow,
.p-slickSlider .next-arrow{
	position: absolute;
	top: calc(50% - 2vw);
	transform: translateY(-50%);
	width: 2%;
	height: auto;
	z-index: 1;
}

.p-slickSlider .prev-arrow{
	left: 48px;
}

.p-slickSlider .next-arrow{
	right:48px;
}

  /* 薄く見せる（サイド） */
.slick-products .slick-slide {
	opacity: 0.4;
	transition: opacity 0.3s ease;
  }
  
  /* メインは濃く */
.slick-products .slick-center {
	opacity: 1;
 }
  
 .p-slickSlider img{
  width: 100%;
 }

 @media (max-width: 768px) {
  .slick-products .prev-arrow {

    left: 32px; 
  }

  .slick-products .next-arrow {
    right: 32px;
  }
}
/* ============================================================
モーダル
============================================================ */
.p-modalContent {
  position: fixed;
  display: none;
  z-index: 2001;
  top: 55px; 
  left: 50%;
  transform: translateX(-50%); 

  width: min(100%, var(--yoiyo-max-width));
  height: fit-content;
  overflow-y: auto;
}

.p-modalClose{
  position: absolute;
  right: 1.5rem;
  top: 1rem;
  width: 20px;
  height: 20px;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  z-index: 2001;
}

.p-modalClose img{
  width: 100%;
  height: auto;
  display: block;
}
.p-about__contents{
    position: relative;
    text-align: center;
    z-index: 300;
}
  
.p-about__contents img{
    position: relative;
    width: 100%;
    height: auto;
    display: block;
    z-index: 301;
}

/* ============================================================
パララックス
============================================================ */
.p-fadeIn{
	opacity: 0;
	transform: translateY(20px);
	transition: all 1s ease;
	visibility: hidden;
	transition-delay: 0.1s;
}

.p-fadeIn.is-show{
	opacity: 1;
	transform: translateY(0);
	visibility: visible;
}