@charset "UTF-8";

/* =====================================================
   1. 共通・ベーススタイル
===================================================== */
*{
  margin:0;
  padding:0;
  box-sizing:border-box;
}

html{
  scroll-behavior:smooth;
  overflow-x:hidden;
}

body{
  font-family:"Noto Sans JP", sans-serif;
  color:#371c14;
  background:#f6f2ea;
  font-size:18px;
  line-height:1.9;
  -webkit-text-size-adjust:100%;
}

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

a{
  text-decoration:none;
  color:inherit;
}

ul{
  list-style:none;
}

/*header{
  position:sticky;
  top:0;
  z-index:100;
}*/

/* =====================================================
   ヘッダー全体
===================================================== */

header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  background-color: #fff;
  padding: 0 0 10px 0;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}


/* =====================================================
   上部エリア
===================================================== */

.header-area{
  max-width: 1200px;
  margin: 0 auto;
  padding:0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}


.header-area p{
  font-size: 11px;
  font-weight: 700;
  padding: 0;
}


/* =====================================================
   ナビゲーション
===================================================== */

.header-nav {
  max-width: 1200px;
 
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
/* =====================================================
   ロゴ
===================================================== */

.header_logo img {
  width: 75px;
margin: 0;
padding: 0;
}

/* =====================================================
   グローバルナビ
===================================================== */

.gnav {
  display: flex;
  align-items: center;
  gap: 24px;
}

.gnav li {
  position: relative;
}

.gnav a,
.gnav button {
  border: none;
  background: none;
  cursor: pointer;
  font-size: 14px;
  font-weight: 700;
  color: #371c14;
  font-family: "Noto Sans JP", sans-serif;
}

.gnav button {
  display: flex;
  align-items: center;
  gap: 6px;
}


/* arrow */
.arrow{
  width:0;
  height:0;
  border-left:6px solid transparent;
  border-right:6px solid transparent;
  border-top:8px solid #ffbb27;
  transition:.3s;
}

.has-dropdown.active .arrow{
  transform:rotate(180deg);
}


/* モバイルarrow  */
.mob_arrow{
 margin: 10px 0 0 0;
  width:0;
  height:0;
  border-left:6px solid transparent;
  border-right:6px solid transparent;
  border-top:8px solid #ffbb27;
  transition:.3s;
}

.mobile-toggle.active .mob_arrow{
  transform:rotate(180deg);
}


/* dropdown */
.dropdown{
  position:absolute;
  top:45px;
  left:0;
  width:220px;
  background:#fff;
  border-radius:18px;
  box-shadow:0 10px 25px rgba(0,0,0,.08);
  padding:16px 0;
  opacity:0;
  visibility:hidden;
  transform:translateY(10px);
  transition:.3s;
}

.has-dropdown.active .dropdown{
  opacity:1;
  visibility:visible;
  transform:translateY(0);
}

.dropdown a{
  display:block;
  padding:12px 24px;
  font-size:15px;
}

.dropdown a:hover{
  background:#f6f1e8;
}

/* =====================================================
  アイコンなどのログイン情報など
===================================================== */
/* カート内の商品数を示す赤い丸バッジ */
.iconNav__cart .cartAmount {
    position: absolute;
    top: 0;   /* アイコンに対しての配置位置（必要に応じて調整） */
    right: 4px; 
    background-color: #f7ba38; 
    color: #ffffff;
    font-size: 10px;
    font-weight: bold;
    line-height: 1;
    min-width: 16px;
    height: 16px;
    padding: 0 3px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
    z-index:1002;
}
/* カートやマイページなど、ヘッダーのアイコンリンク共通 */
.iconNav__cart,
.iconNav__item {
    position: relative;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    padding: 4px;
}

/* アイコンとテキストをまとめるコンテナ */
.iconNav__cart-inner,
.iconNav__item-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* アイコン画像の共通調整 */
.iconNav__cart i.material-icons,
.iconNav__item i.material-icons {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-style: normal;
    margin: 0;
}

.iconNav__cart i.material-icons img,
.iconNav__item i.material-icons img {
    display: block;
    width: 24px;
    height: auto;
    object-fit: contain;
}

/* アイコンの下の文字（「カート」「マイページ」など共通） */
.iconNav__cart .cartText,
.iconNav__item .iconNav__text {
    font-size: 11px;
    color: #333333;
    margin-top: 2px;
    line-height: 1.2;
    text-align: center;
}


@media screen and (max-width: 750px){

.header-nav {
  max-width:700px;	
width:96%;	
padding: 0 2%;
	}
	
.header-area p{
  font-size: 11px;
  font-weight: 700;
  padding: 0 2%;
}
  .gnav,
  .search-box{
    display:none;
  }
  .hamburger{
    display:block;
  }
  .top-products-grid--4,
  .top-products-grid--3{
    grid-template-columns:repeat(2,1fr);
  }
  .top-products-grid--ranking{
    grid-template-columns:repeat(3,1fr);
  }
}

/* =========================================
   スマホ：会員メニューをヘッダーに常時表示
   ========================================= */

@media screen and (max-width: 750px){

  /* gnavをスマホでも表示 */
  .header-nav .gnav{
    display:flex !important;
    align-items:center;
    justify-content:flex-end;
    gap:6px;
    margin-left:auto;
    margin-right:20px;
  }

  /* カテゴリーなど通常のナビは非表示 */
  .header-nav .gnav > li:not(.header__nav-item):not(.header__cart-item){
    display:none;
  }

  /* 会員登録・ログイン・カートを表示 */
  .header-nav .gnav > li.header__nav-item,
  .header-nav .gnav > li.header__cart-item{
    display:block !important;
  }

  /* リンク */
  .header-nav .gnav .iconNav__item,
  .header-nav .gnav .iconNav__cart{
    display:flex;
    align-items:center;
    justify-content:center;
    padding:0;
    position:relative;
  }

  /* アイコン＋文字 */
  .header-nav .gnav .iconNav__item-inner,
  .header-nav .gnav .iconNav__cart-inner{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
  }

  /* アイコン */
  .header-nav .gnav .iconNav__item i.material-icons,
  .header-nav .gnav .iconNav__cart i.material-icons{
    display:flex;
    align-items:center;
    justify-content:center;
    margin:0;
    line-height:1;
  }

  .header-nav .gnav .iconNav__item img,
  .header-nav .gnav .iconNav__cart img{
    width:20px !important;
    height:auto;
    display:block;
  }

  /* 文字 */
  .header-nav .gnav .iconNav__text,
  .header-nav .gnav .cartText{
    display:block;
    font-size:9px;
    line-height:1.2;
    margin-top:2px;
    white-space:nowrap;
  }

  /* カート数量 */
  .header-nav .gnav .cartAmount{
    position:absolute;
    top:-5px;
    right:-5px;
    min-width:15px;
    height:15px;
    padding:0 3px;
    box-sizing:border-box;
    border-radius:50%;
    font-size:9px;
    line-height:15px;
    text-align:center;
    z-index:10;
  }

  /* 検索は非表示 */
  .header-nav .search-box{
    display:none !important;
  }

  /* ハンバーガーは表示 */
  .hamburger{
    display:flex !important;
    flex-shrink:0;
  }



}

/* =====================================================
   検索
===================================================== */

.search-box {
  width: 220px;
  height: 42px;
  background: #f3f3f3;
  border-radius: 42px;
  display: flex;
  align-items: center;
  padding: 0 14px;
  gap: 8px;
  margin: 0;
  box-sizing: border-box;
}

.search-box input {
  flex: 1;
  border: none;
  background: none;
  outline: none;
  font-size: 14px;
  min-width: 0;
}

.search-box button {
  border: none;
  background: none;
  cursor: pointer;
  display: flex;
  padding: 0;
}

.search-box img {
  width: 20px;
  display: block;
}
/* hamburger */
.hamburger{
  display:none;
  width:40px;
  height:44px; 
  border:none;
  background:none;
  cursor:pointer;
  position:relative;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
}

.hamburger span:not(.hamburger-text){
  position:absolute;
  left:0;
  width:100%;
  height:3px;
  background:#371c14;
  border-radius:10px;
  transition:.3s;
}

.hamburger span:nth-child(1){ top:0; }
.hamburger span:nth-child(2){ top:9.5px; }
.hamburger span:nth-child(3){ bottom: 22px; /* 三本線の下側の位置調整 */ }

.hamburger.active span:nth-child(1){
  transform:rotate(45deg);
  top:9.5px;
}

.hamburger.active span:nth-child(2){
  opacity:0;
}

.hamburger.active span:nth-child(3){
  transform:rotate(-45deg);
  bottom: 22px;
}

/* 追加：三本線の下の「MENU」のスタイル */
.hamburger-text {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  font-size: 10px;       /* 小さな文字サイズ */
  font-weight: 700;      /* 太字（必要に応じて調整） */
  color: #371c14;        /* 文字色 */
  line-height: 1;
  letter-spacing: 0.05em;
  pointer-events: none;  /* クリックイベントを親ボタンに透過させる */
}

/* mobile nav */
.mobile-nav{
  position:fixed;
  top:0;
  right:-100%;
  width:85%;
  height:100vh;
  background:#fff;
  z-index:999;
  transition:.4s;
  padding:90px 30px 40px;
  overflow-y:auto;
}

.mobile-nav.active{
  right:0;
}

.mobile-close{
  position:absolute;
  top:24px;
  right:24px;
  width:40px;
  height:40px;
  border:none;
  background:none;
  cursor:pointer;
}

.mobile-close span{
  position:absolute;
  left:0;
  top:18px;
  width:100%;
  height:3px;
  background:#371c14;
}

.mobile-close span:nth-child(1){ transform:rotate(45deg); }
.mobile-close span:nth-child(2){ transform:rotate(-45deg); }

.mobile-nav ul{
  display:flex;
  flex-direction:column;
  gap:24px;
}

.mobile-nav a,
.mobile-nav button{
  font-size:18px;
  font-weight:700;
  border:none;
  background:none;
  color:#371c14;
}

.mobile-toggle{
  width:100%;
  text-align:left;
}

.mobile-dropdown{
  display:none;
  padding-left:15px;
  margin-top:14px;
}

.mobile-dropdown a{
  display:block;
  padding:10px 0;
  font-size:15px;
}

.mobile-utility{
  margin-top:40px;
  padding-top:40px;
  border-top:1px solid #ddd;
  display:flex;
  flex-direction:column;
  gap:18px;
}

.mobile-utility a{
  display:flex;
  align-items:center;
  gap:10px;
}

.mobile-utility img{
  width:18px;
}

.overlay{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.45);
  z-index:998;
  opacity:0;
  visibility:hidden;
  transition:.3s;
}

.overlay.active{
  opacity:1;
  visibility:visible;
}

/* =====================================================
   3. FV (ファーストビュー)
===================================================== */
.fv{
  position:relative;
  width:100%;
  height:100vh;
  min-height:760px;
  overflow:hidden;
  margin-top:-30px;
}

.fv-bg-slider{
  position:absolute;
  inset:0;
}

.fv-bg{
  position:absolute;
  inset:0;
  opacity:0;
  transition:opacity 1.5s ease;
}

.fv-bg.active{
  opacity:1;
}

.fv-bg img{
  width:100%;
  height:100%;
  object-fit:cover;
  transform-origin:center center;
}

.fv-bg.active img{
  animation: fvKenburns 5s ease-in-out forwards;
}

@keyframes fvKenburns{
  0%{ transform:scale(1.08); }
  50%{ transform:scale(1.02); }
  100%{ transform:scale(1); }
}

.fv::before{
  content:"";
  position:absolute;
  inset:0;
  background:rgba(255,255,255,.12);
  z-index:1;
}

.fv-inner{
  position:relative;
  z-index:5;
  width:100%;
  max-width:1200px;
  height:100%;
  margin:0 auto;
  display:flex;
  align-items:center;
  padding:0 20px;
}

.fv-content{
  width:90%;
  padding:0;
  margin:0 auto;
  text-align:center;
}

.fv-top{
  font-size:24px;
  margin-bottom:18px;
  color:#371c14;
  text-shadow: 0 2px 8px rgba(255, 255, 255, 0.8), 0 0 2px rgba(255, 255, 255, 0.8);
}

.fv-title{
  font-size:75px;
  line-height:1;
  color:#ffbb27;
  margin-bottom:10px;
  font-weight:400;
  font-family: "Allison", cursive;
  text-shadow: 0 2px 8px rgba(255, 255, 255, 0.8), 0 0 2px rgba(255, 255, 255, 0.8);
}

.fv-subtitle{
  font-size:40px;
  line-height:1.4;
  color:#371c14;
  margin-bottom:40px;
  text-shadow: 0 2px 8px rgba(255, 255, 255, 0.8), 0 0 2px rgba(255, 255, 255, 0.8);
}

.fv-text{
  font-size:15px;
  line-height:2.2;
  text-shadow: 0 2px 8px rgba(255, 255, 255, 0.8), 0 0 2px rgba(255, 255, 255, 0.8);
}

.fv-dots{
  position:absolute;
  left:50%;
  bottom:40px;
  transform:translateX(-50%);
  display:flex;
  gap:14px;
  z-index:10;
}

.fv-dots span{
  width:12px;
  height:12px;
  border-radius:50%;
  background:rgba(255,255,255,.5);
  cursor:pointer;
}

.fv-dots span.active{
  background:#fff;
}

/* =====================================================
   4. バナー・スライダー・共通パーツ
===================================================== */
.banner-slider{
  width:100%;
  overflow:hidden;
}

.banner-track{
  display:flex;
  width:max-content;
  animation:bannerLoop 30s linear infinite;
}

.banner-item{
  flex-shrink:0;
  width:420px;
  margin-right:0;
  transition:.3s;
  display:block;
}

.banner-item:hover{
  opacity:.85;
}

.banner-item img{
  width:100%;
  display:block;
}

@keyframes bannerLoop{
  0%{ transform:translateX(0); }
  100%{ transform:translateX(-50%); }
}

.toptitle{
  font-family:"Lobster", cursive;
  font-size: clamp(35px,5vw,70px);
  font-weight: 700;
  line-height: 1;
  margin-bottom: 30px;
}

.toptitle_sub{
  font-size: clamp(12px,5vw,20px);
  margin-bottom: 50px;
}

/* =====================================================
   5. 各セクション (NEWS / ABOUT / PRODUCTS etc.)
===================================================== */
.news-section{
  background:#e9e5dc;
  padding:60px 0 0 0;
}

.news-inner{
  width:calc(100% - 160px);
  margin-left:160px;
  margin-right:0;
  background:#fff;
  border-radius:60px 0 0 0;
  padding:35px 70px;
  display:flex;
  gap:100px;
}

.news-heading{
  width:30%;
  flex-shrink:0;
  text-align:center;
}

.news-title{
  font-family:"Lobster", cursive;
  font-size:60px;
  line-height:1;
  color:#f0ad1f;
  font-weight:400;
  margin:30px 0 20px 0;
}

.news-subtitle{
  color:#f0ad1f;
  font-size:20px;
  letter-spacing:.15em;
}

.news-list{
  flex:1;
}

.news-item{
  display:block;
  padding:0 0 26px;
  margin-bottom:10px;
  border-bottom:1px solid #8c8c8c;
  transition:.3s;
}

.news-item:hover{
  opacity:.7;
}

.news-item time{
  display:block;
  font-size:10px;
  font-weight:700;
  color:#444;
  margin-bottom:5px;
}

.news-item p{
  font-weight:700;
  line-height:1.8;
  color:#444;
}

.news-btn-area{
  text-align:right;
  margin-top:30px;
}

.news-more-btn{
  display:inline-block;
  padding:12px 45px;
  border:1px solid #f0ad1f;
  color:#f0ad1f;
  font-size:13px;
  font-weight:700;
  letter-spacing:.15em;
  text-decoration:none;
  transition:.3s;
}

.news-more-btn:hover{
  background:#f0ad1f;
  color:#fff;
}


@media screen and (max-width: 750px) {

  .news-btn-area {
    text-align: center;
  }

}

/* ABOUT */
.top-about{
  position:relative;
  background:#e3dccc;
  overflow:hidden;
  padding:100px 20px 180px;
}

.top-about__inner{
  max-width:1200px;
  margin:0 auto;
  position:relative;
  z-index:2;
}

.top-about__content{
  text-align:center;
}

.top-about__text{
  font-size:14px;
  font-weight:700;
  line-height:1.8;
}

.top-about__text p{
  margin:0;
  line-height:1.8;
}

.top-about__almond01{
  position:absolute;
  top:0;
  left:0;
  width:min(35vw, 320px);
  z-index:1;
}

.top-about__almond02{
  position:absolute;
  right:0;
  bottom:0;
  width:min(40vw, 400px);
  z-index:1;
}

.top-about__line{
  position:absolute;
  left:0;
  bottom:0;
  width:100%;
  display:block;
  z-index:0;
}

/* Products Section */
.top-products-section{
  position:relative;
  padding:120px 20px;
  margin:0 auto;
  text-align:center;
}

.top-products-section02{
  position:relative;
  padding:120px 20px;
  margin:0 auto;
  text-align:center;
  background-image:url("img/top/back_charm.png");
  background-repeat:no-repeat;
  background-position:right center;
  background-size:350px auto;
}

.top-products-section--pickup{
  background:#fff;
}

.top-products_content{
  width:100%;
  max-width:1200px;
  margin:0 auto;
  padding:5% 0;
  text-align:center;
}

.top-products-grid{
  max-width:1200px;
  margin:0 auto;
  display:grid;
  gap:40px;
}

.top-products-grid--4{ grid-template-columns:repeat(4,1fr); }
.top-products-grid--3{ grid-template-columns:repeat(3,1fr); }
.top-products-grid--ranking{ grid-template-columns:repeat(5,1fr); }

.top-product-card{
  position:relative;
}

.top-product-card a{
  color:#111;
  text-decoration:none;
}

.top-product-card-image{
  background:#fff;
  margin-bottom:20px;
}

.top-product-card-image img{
  width:100%;
  display:block;
}

.top-product-card h3{
  font-size:14px;
  line-height:1.5;
  font-weight:700;
  margin-bottom:10px;
  text-align:left;
}

.top-product-card-comment{
  font-size:16px;
  line-height:1.5;
  font-weight:700;
  text-align:left;
}

.top-product-card-price{
  text-align:right;
  font-size:15px;
  font-weight:700;
}

.top-product-card-price span{
  font-size:10px;
}

.top-rank-no{
  position:absolute;
  top:0;
  left:0;
  width:40px;
  height:40px;
  background:#f2b52b;
  color:#fff;
  font-size:30px;
  font-weight:700;
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:2;
}

.top-products-charm{
  position:absolute;
}

.top-products-charm--pickup{
  width:240px;
  left:60px;
  top:-30px;
}

.top-products-charm--ranking{
  width:220px;
  right:80px;
  top:30px;
}

/* TOPカテゴリー */
.top-category{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:30px;
  max-width:1200px;
  margin:0 auto;
}

.top-category-item{
  display:block;
  overflow:hidden;
}

.top-category-item img{
  width:100%;
  display:block;
  transition: transform .4s ease, filter .4s ease;
}

.top-category-item:hover img{
  transform:scale(1.05);
}

@media screen and (max-width: 750px){
.top-category{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:15px;
  max-width:750px;
  margin:0 auto;
}
}	
	


/* コラム */
.top-column{
  position:relative;
  background:#f7ecd6;
  padding:140px 20px 120px;
  overflow:hidden;
}





.top-column__wave{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:120px;
  background:url("img/top/line02.png") no-repeat top center;
  background-size:cover;
  z-index:1;
}

.top-column__charm{
  position:absolute;
  z-index:2;
  pointer-events:none;
}

.top-column__charm--right{
  width:340px;
  top:20px;
  right:40px;
}

.top-column__charm--left{
  top:5%;
  width:200px;
  bottom:0;
  left:60px;
}


.top-column__charm--left02{
  top:50%;
  width:200px;
  bottom:0;
  left:60px;
}

.top-column__inner{
  position:relative;
  z-index:3;
  max-width:1200px;
  margin:0 auto;
}

.top-column__list{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:36px;
}

.column-card{
  display:block;
  background:#fff;
  border-radius:24px;
  overflow:hidden;
  text-decoration:none;
  color:#222;
  transition:.3s;
}

.column-card:hover{
  transform:translateY(-8px);
}

.column-card__image{
  position:relative;
}

.column-card__image img{
  width:100%;
  aspect-ratio:390 / 220;
  object-fit:cover;
  display:block;
}

.column-card__date{
  position:absolute;
  left:20px;
  bottom:-12px;
  background:#f6b51c;
  color:#fff;
  font-size:12px;
  font-weight:700;
  padding:6px 12px;
}

.column-card__body{
  padding:36px 32px;
}

.column-card__body h3{
  font-size:14px;
  font-weight:700;
  margin-bottom:10px;
}

.column-card__body p{
  font-size:18px;
}

/*.top-column__btn{
  text-align:center;
  margin-top:60px;
}

.top-column__btn a{
  display:inline-flex;
  justify-content:center;
  align-items:center;
  width:150px;
  height:50px;
  border-radius:999px;
  background:#f6b51c;
  color:#fff;
  text-decoration:none;
  transition:.3s;
}

.top-column__btn a:hover{
  transform:translateY(-3px);
}*/

.top-column__btn{
  text-align:center;
  margin:0 auto;
}

.top-column__btn a{
  display:inline-flex;
  justify-content:center;
  align-items:center;
  width:60%;
  height:100px;
  border-radius:999px;
  background:#f6b51c;
  color:#fff;
  text-decoration:none;
  transition:.3s;
}

.top-column__btn a:hover{
  transform:translateY(-3px);
}

/* TOPIC */
.top-topic{
  position:relative;
  overflow:hidden;
  padding:120px 0 100px;
  background:#f4f1e8;
}

.top-topic-marquee{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  overflow:hidden;
  pointer-events:none;
}

.top-topic-marquee__track{
  display:flex;
  width:max-content;
  animation: marquee 30s linear infinite;
}

.top-topic-marquee__track span{
  flex-shrink:0;
  margin-right:100px;
  white-space:nowrap;
  font-family:"Hiragino Sans","Hiragino Kaku Gothic ProN",Meiryo,sans-serif;
  font-size: clamp(80px, 10vw, 220px);
  font-weight:700;
  line-height:1;
  color:#f3d5a0;
}

@keyframes marquee{
  from{ transform: translateX(0); }
  to{ transform: translateX(-50%); }
}

.top-topic-slider{
  max-width:1200px;
  margin:5% auto 0 auto;
  overflow:visible !important;
}

.swiper-wrapper {
  display:flex;
  align-items:center;
}

.top-topic-slider .swiper-slide {
  width:1000px;
  max-width:80vw;
  transition:opacity 0.4s, transform 0.4s;
  opacity:0.4;
  transform:scale(0.9);
}

.top-topic-slider .swiper-slide a {
  display:block;
}

.top-topic-slider .swiper-slide img{
  width:100%;
  height:auto;
  display:block;
}

.top-topic-slider .swiper-slide-active {
  opacity:1;
  transform:scale(1);
}

.top-topic .swiper-pagination{
  position:relative;
  margin-top:40px;
}

.top-topic .swiper-pagination-bullet{
  width:12px;
  height:12px;
  background:#ccc;
  opacity:1;
}

.top-topic .swiper-pagination-bullet-active{
  background:#8f8f8f;
}

.top-topic-banner{
  max-width:1000px;
  margin:80px auto 0;
}

.top-topic-banner a{
  display:block;
}

.top-topic-banner img{
  width:100%;
  display:block;
  transition:.3s ease;
}

.top-topic-banner a:hover img{
  transform:scale(1.03);
}

/* 店舗情報 / Store Info */
.store-info {
  background-color:#f7b733;
  padding:80px 20px;
  color:#fff;
}

.store-info .inner {
  max-width:1000px;
  margin:0 auto;
  display:flex;
  gap:50px;
  align-items:flex-start;
}

.store-left {
  flex:0 0 300px;
}

.store-left-header {
  display:flex;
  align-items:center;
  gap:20px;
  margin-bottom:20px;
}

.store-logo {
  width:120px;
}

.store-sns {
  display:flex;
  gap:10px;
  font-size:24px;
}

.store-sns a {
  color:#fff;
  margin-right:15px;
}

.store-image {
  width:100%;
  border-radius:15px;
}

.store-right {
  flex:1;
}

.section-title {
  font-size:30px;
  margin-bottom:30px;
  border-bottom:2px solid #fff;
  padding-bottom:10px;
}

.shop-item {
  margin-bottom:30px;
}

.shop-item h3 {
  font-size:18px;
  margin-bottom:5px;
}

.shop-item p{
  font-size:16px;
}

/* =====================================================
   6. サービス・コンテナ・店舗カレンダー
===================================================== */
.service-container {
  display:flex;
  flex-wrap:wrap;
  max-width:1200px;
  margin:0 auto;
  padding:40px 20px;
}

.service-item {
  flex:1 1 25%;
  text-align:center;
  padding:20px;
  box-sizing:border-box;
  border-left:1px solid #D0C6B8;
}

.service-item:first-child {
  border-left:none;
}

.service-item img {
  display:block;
  margin:0 auto 20px auto;
  max-height:50px;
  width:auto;
}

.service-pay{
  margin:0 auto !important;
  padding:0 !important;
  width:100% !important;
  text-align:center !important;
  max-height:100% !important;
}

.service-item h3 {
  font-size:1.1rem;
  font-weight:bold;
  color:#1a1a1a;
  margin:0 0 10px 0;
}

.service-item p {
  font-size:0.9rem;
  color:#1a1a1a;
  line-height:1.6;
  margin:0;
}

.service-item-sub {
  margin-top:24px;
  padding-top:24px;
  border-top:1px dashed #D0C6B8;
}

.service-item a{
  padding:10px 0;
  text-align:center;
  text-decoration:underline;
}

.service-item-cal {
  display:flex;
  align-items:flex-start;
  justify-content:center;
  padding-top:20px;
}

.side_section_cal {
  width:100%;
  max-width:220px;
  text-align:center;
}

.side_cal_memo {
  margin-top:12px;
  font-size:0.8rem;
  color:#1a1a1a;
}

.side_cal table {
  width:100%;
  font-size:0.75rem;
  margin-bottom:30px;
}

.side_cal table:last-child{
  margin-bottom:0;
}

.side_cal_holiday{
  font-size:70%;
  padding:10px 0 0 0;
  text-align:left;
}

.side_cal_holiday-mark {
  color:#DB5656; 
}

.side_cal{
  margin:2% 0 0 0;
  padding:0;
}

.tbl_calendar {
  width:100%;
  border:none !important;
  border-collapse:collapse !important;
  border-spacing:0 !important;
}

.tbl_calendar th, .tbl_calendar td {
  padding:4px !important;
  text-align:center !important;
  border-bottom:1px solid #ccc !important;
}

/* =====================================================
   7. フッター
===================================================== */
.site-footer {
  width:100%;
  background-color:#EFEBE4;
  padding:60px 20px 0;
}

.footer-sns {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 24px;
  margin-bottom: 15px;
}

.footer-sns a {
  color: #333;
  font-size: 2.5rem;
  line-height: 1;
  transition: opacity 0.2s ease;
}

.footer-sns a:hover {
  opacity:0.6;
}

.footer-inner {
  max-width:1200px;
  margin:0 auto;
  display:flex;
  flex-wrap:wrap;
  gap:40px;
}

.footer-section {
  flex:1;
  min-width:250px;
}

.footer-logo {
  max-width:150px;
  margin-bottom:20px;
}

.footer-address {
  line-height:1.8;
  color:#333;
}

.footer-title {
  font-size:1.1rem;
  border-bottom:1px solid #333;
  padding-bottom:10px;
  margin-bottom:15px;
}

.footer-links {
  list-style:none;
  padding:0;
}

.footer-links li {
  margin-bottom:10px;
}

.footer-links a {
  text-decoration:none;
  color:#333;
}

.footer-bottom {
  background-color:#FFC132;
  color:#fff;
  text-align:center;
  padding:20px;
  margin-top:40px;
}

/* =====================================================
   8. 下層ページ・商品詳細・グリッド関連
===================================================== */
.top-content {
  width:100%;
  margin:0 auto;
}

.product-wrapper {
  max-width:1200px;
  margin:0 auto;
  display:flex;
  flex-direction:column;
  gap:30px;
  padding:120px 20px 20px;
}

.main-content { order:1; flex:1; min-width:0; }
.sidebar { order:2; width:100%; flex-shrink:0; }

.top-content .sidebar {
  display:none !important;
}

.main_title_areae{
  margin:0 auto;
  padding:5% 0;
  text-align:center;
}

.main_title_areae h1,
.main_title_areae h2{
  font-family:"Lobster", cursive;
  font-size: clamp(18px,5vw,30px);
  font-weight:700;
  line-height:1.8;
  margin:0 auto;
  padding:0;
}

.main_title_areae span{
  font-size: clamp(12px,5vw,20px);
  margin:0 auto;
  padding:0;
}

.side-block { margin-bottom:30px; }

.sidebar h3 {
  font-size:1.5rem;
  border-bottom:2px solid #333;
  padding-bottom:5px;
  margin-bottom:10px;
  font-family:"Lobster", cursive;
}

.side-menu { list-style:none; padding:0; }
.side-menu li { padding:10px 0; border-bottom:1px solid #ccc; }
.side-menu li a { text-decoration:none; color:#333; }

.side-banners img {
  display:block;
  width:100%;
  margin-bottom:10px;
  transition:opacity 0.3s;
}

.side-banners img:hover { opacity:0.8; }

.calendar-area { margin-top:20px; }

.breadcrumb {
  font-size:0.85rem;
  margin-bottom:20px;
}

.breadcrumb ol {
  list-style:none;
  padding:0;
  display:flex;
  flex-wrap:wrap;
}

.breadcrumb li {
  display:flex;
  align-items:center;
}

.breadcrumb li + li::before {
  content:">";
  margin:0 8px;
  color:#999;
}

.product-top { display:flex; gap:30px; margin-bottom:40px; flex-wrap:wrap; }
.product-gallery { flex:1; min-width:300px; }
.main-img { width:100%; height:auto; display:block; }
.thumb-list { display:flex; gap:10px; margin-top:10px; }
.thumb-list img { width:80px; }
.product-info { flex:1; min-width:300px; color:#3a1f16; }

.product-details h3 {
  border-left:5px solid #FFC132; 
  padding-left:10px; 
  margin:30px 0 15px; 
}

.cart-btn { display:block; width:100%; padding:15px; background:#FFC132; border:none; font-weight:bold; cursor:pointer; }

.spec-table { width:100%; border-collapse:collapse; margin-bottom:30px; }
.spec-table th { background:#FFC132; width:35%; padding:10px; text-align:left; border:1px solid #fff; }
.spec-table td { padding:10px; border-bottom:1px solid #ddd; background:#fff; }

.product-list{
  padding:0 0 5% 0;
  margin:0 0 5% 0;
}

.related-list{
  padding:5% 0;
  margin:0 0 5% 0;
}

.product-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:24px;
}

.product-card{
  display:block;
  text-decoration:none;
  color:#3f261d;
}

.product-image{
  aspect-ratio:1 / 1;
  overflow:hidden;
  background:#fff;
}

.product-image img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.product-name{
  margin:18px 0 16px;
  font-size:22px;
  font-weight:700;
  line-height:1.4;
  overflow-wrap:anywhere;
}

.product-weight{
  margin:0;
  font-size:20px;
  font-weight:500;
  overflow-wrap:anywhere;
}

.product-price{
  margin-top:18px;
  text-align:right;
  font-size:24px;
  font-weight:700;
  overflow-wrap:anywhere;
}

.product-price span{
  font-size:18px;
}

.txt_r {
  text-align:right !important;  
  margin:0 0 30px 0;
  font-size:14px;
  color:#333;
}

.txt_r a {
  color:#ffbb27;
  text-decoration:none;
}

.txt_r a:hover {
  text-decoration:underline;
}

.pager-btn {
  display:inline-block;
  padding:10px 20px;
  font-size:14px;
  font-weight:bold;
  color:#ffbb27;
  background:#fff;
  border-radius:10px;
  box-shadow:0 4px 8px rgba(255, 182, 219, 0.4);
  text-decoration:none;
  transition:all 0.3s ease;
}

.pager-btn:hover {
  background:#ffbb27;
  transform:scale(1.07);
  box-shadow:0 6px 12px rgba(255, 182, 219, 0.6);
}

.pager-btn.disabled {
  background:#ffbb27;
  color:#fff;
  box-shadow:none;
  cursor:not-allowed;
  pointer-events:none;
}

/* 親枠：1行目(ボタン)と2行目(テキスト)を上下に配置 */
.txt_c {
  display: flex !important;
  flex-direction: column !important; /* 上下に分ける */
  align-items: center !important;     /* 中央揃え */
  margin-top: 50px;
  margin-bottom: 50px;
}

/* 1行目：ボタン群（Prev / Next）を横並び */
ul.inline {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex !important;
  justify-content: center;
  gap: 14px; /* ボタン同士の間隔 */
}

/* 2行目：テキスト群（○商品中 ○-○商品）を横並び */
.txt_c p {
  display: flex !important;
  justify-content: center;
  align-items: center;
  gap: 4px;               /* 文字と数字の間の微調整 */
  margin-top: 16px;
  margin-bottom: 0;
  font-size: 14px;
  color: #ffbb27;
  white-space: nowrap;    /* スマホ等でテキストが途中で改行するのを防ぐ */
}

.productlist {
  list-style:none;
  padding:0;
  margin:0;
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}

.productlist li {
  padding:10px;
  width:calc((100% - 20px) / 3);
  box-sizing:border-box;
  text-align:left;
}

.productlist img {
  padding:0 0 10px 0;
  margin:0;
}

.price_area{
  padding:0;
  margin:0;
  text-align:right;
}

.product-pagination{
  margin:80px 0;
  text-align:center;
}

.pagination-nav{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:80px;
  margin:0;
  padding:0;
  list-style:none;
}

.pagination-nav a,
.pagination-nav span{
  display:flex;
  align-items:center;
  justify-content:center;
  width:60px;
  height:60px;
  font-size:48px;
  line-height:1;
  text-decoration:none;
  transition:.3s;
}

.pagination-nav a{
  color:#8f8177;
}

.pagination-nav a:hover{
  opacity:.6;
}

.pagination-nav .disabled{
  color:#d5d0c8;
  cursor:default;
}

.pagination-count{
  margin-top:25px;
  font-size:14px;
  color:#666;
}

.pagination-count b{
  font-weight:700;
}

/* Product Detail & Slick Slider customization */
.product-detail{
  display:grid;
  grid-template-columns:53% 47%;
  gap:60px;
  max-width:1400px;
  margin:0 auto;
  padding:40px 0 80px;
  box-sizing:border-box;
}

.product_images {
  min-width:0;
  width:100%;
}

.js-images-slider:not(.slick-initialized) {
  display:flex;
  overflow:hidden;
}

.js-images-slider:not(.slick-initialized) .p-product-img__main-item {
  flex:0 0 100%;
  max-width:100%;
}

.roduct-img {
  width:100%;
}

.p-product-img {
  width:100%;
  min-width:0;
}

.p-product-img__main {
  text-align:center;
  width:100%;
  max-width:100%;
  overflow:hidden;
}

.p-product-img__main-item {
  position:relative;
  text-align:center;
  width:100%;
  max-width:100%;
  overflow:hidden;
}

.p-product-img__main-item:before {
  content:"";
  display:block;
  padding-top:100%;
}

.p-product-img__main-item a {
  display:block;
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
}

.p-product-img__main-item img {
  display:inline-block;
  position:absolute;
  top:0;
  right:0;
  bottom:0;
  left:0;
  margin:auto;
  width:auto !important;
  max-width:100%;
  max-height:100%;
  text-align:center;
}

.p-product-thumb-list {
  display:flex;
  flex-wrap:wrap;
  margin:-4px 0 0 -4px;
  margin-top:8px;
}

.p-product-thumb-list__item {
  box-sizing:border-box;
  margin-bottom:8px;
  padding-left:4px;
  padding-right:4px;
  width:20%;
  transition:all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.p-product-thumb-list__item:hover, 
.p-product-thumb-list__item.is-current {
  opacity:0.7;
  cursor:pointer;
}

.p-product-thumb-list__img {
  position:relative;
  text-align:center;
}

.p-product-thumb-list__img:before {
  content:"";
  display:block;
  padding-top:100%;
}

.p-product-thumb-list__img img {
  display:inline-block;
  position:absolute;
  top:0;
  right:0;
  bottom:0;
  left:0;
  margin:auto;
  width:auto !important;
  max-width:100%;
  max-height:100%;
  text-align:center;
}

.p-product-img__main .slick-track {
  margin-left:0;
  margin-right:0;
}

.p-product-img__main .slick-prev, 
.p-product-img__main .slick-next {
  top:50%;
  width:30px;
  height:30px;
  transition:all 0.4s ease;
  z-index:1;
}

.p-product-img__main .slick-prev:before, 
.p-product-img__main .slick-next:before {
  content:"";
  position:absolute;
  top:7px;
  left:10px;
  width:15px;
  height:15px;
  border-left:1px solid #000000;
  border-top:1px solid #000000;
  transition:all 0.4s ease;
  z-index:1;
}

.p-product-img__main .slick-prev { left:15px; }
.p-product-img__main .slick-prev:before { transform:rotate(-45deg); }
.p-product-img__main .slick-next { right:15px; }
.p-product-img__main .slick-next:before { left:4px; transform:rotate(135deg); }

.product-info li{
  list-style:disc outside;
}

.product-tags{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-bottom:30px;
}

.product-tags a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:100px;
  height:30px;
  padding:0 10px;
  border-radius:999px;
  background:#3a1f16;
  color:#fff;
  text-decoration:none;
  font-size:12px;
  font-weight:700;
}

.product-title{
  margin:0 0 20px;
  font-size:25px;
  line-height:1.1;
  font-weight:700;
  overflow-wrap:anywhere;
}

.product-quantity{
  margin-bottom:30px;
}

.product-quantity input{
  width:82px;
  height:72px;
  border:1px solid #d7d7d7;
  background:#fff;
  font-size:2rem;
  color:#3a1f16;
  text-align:center;
}

.product-cart{
  margin-bottom:10px;
}

.product-cart input[type="submit"]{
  width:100%;
  height:50px;
  border:none;
  background:#f8bb21;
  color:#fff;
  font-size:20px;
  font-weight:700;
  cursor:pointer;
  transition:.3s;
}

.product-cart input[type="submit"]:hover{
  opacity:.85;
}

.product-favorite{
  margin-bottom:50px;
}

.product-favorite a,
.product-favorite button{
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  height:40px;
  background:#cfcfcf;
  color:#666;
  text-decoration:none;
  border:none;
  font-weight:700;
}

.product-note{
  margin-top:40px;
  padding-top:40px;
  border-top:2px solid #4a2a20;
  font-size:16px !important;
  line-height:1.8;
  font-weight:bold;
  overflow-wrap:anywhere;
}

.product-links{
  margin:40px 0 0;
  padding:0;
  list-style:none;
}

.product-links li{
  margin-bottom:12px;
}

.product-links li::before{
  content:"・";
  margin-right:4px;
}

.product-links a{
  color:#3a1f16;
  text-decoration:none;
  font-weight:700;
}

.product-links a:hover{
  text-decoration:underline;
}

.product_subtitle{
  margin:0 auto;
  padding:0;
  text-align:center;
}

.product_subtitle h2{
  font-family:"Lobster", cursive;
  font-size: clamp(18px,5vw,30px);
  font-weight:700;
  line-height:1;
  margin-bottom:30px;
}

.product_subtitle span{
  font-size: clamp(12px,5vw,20px);
  margin-bottom:50px;
}

.product_bese02 {
  margin:0 auto;
  padding:5% 0;
  text-align:center;	
}

.product_bese02 h3{
  padding:0.25em 0.5em;
  color:#371c14;
  background:transparent;
  border-left:solid 5px #371c14;
  text-align:left;
  margin:0 0 1% 0;
}

.product_bese02 p{
  margin:0;
  padding:0;
  text-align:left;
}

.product_bese02 table{
  width:100%;
  border-collapse:collapse;
}

.product_bese02 th{
  width:220px;
  padding:10px 20px;
  background:#ffbb27;
  border-bottom:1px solid #e5e5e5;
  text-align:left;
  color:#fff;
  vertical-align:top;
  font-weight:700;
}

.product_bese02 td{
  padding:10px 20px;
  border-bottom:1px solid #e5e5e5;
  line-height:2;
  text-align:left;
  background:#fff;
}

.product_bese02 tr:last-child th,
.product_bese02 tr:last-child td{
  border-bottom:none;
}

.sct{
  margin:0 auto;
  padding:5% 0;
  text-align:center;
}

.sct h2{
  padding:0.25em 0.5em;
  color:#371c14;
  background:transparent;
  border-left:solid 5px #ffbb27;
  text-align:left;
  margin:0 0 2% 0;
}

.sct table{
  width:100%;
  border-collapse:collapse;
}

.sct th{
  width:220px;
  padding:20px;
  background:#ffbb27;
  border-bottom:1px solid #e5e5e5;
  text-align:left;
  color:#fff;
  vertical-align:top;
  font-weight:700;
}

.sct td{
  padding:20px;
  border-bottom:1px solid #e5e5e5;
  line-height:2;
  text-align:left;
  background:#fff;
}

.sct tr:last-child th,
.sct tr:last-child td{
  border-bottom:none;
}

.sct a{
  color:#8a6d3b;
  text-decoration:none;
}

.sct a:hover{
  text-decoration:underline;
}

.privacy_area{
  margin:0 auto;
  padding:5% 0;
  text-align:center;
}

.privacy_area h2{
  padding:0.25em 0.5em;
  color:#371c14;
  background:transparent;
  border-left:solid 5px #ffbb27;
  text-align:left;
  margin:5% 0;
}

.privacy_area p{
  padding:0 2% 2% 2%;
  text-align:left;
}

.free_bese{
  margin:0;
  padding:0;
  text-align:left;
}

.faq_title_areae{
  margin:0 auto;
  padding:5% 0;
  text-align:center;
}

.faq_title_areae h1{
  font-family:"Lobster", cursive;
  font-size: clamp(24px,5vw,60px);
  font-weight:700;
  line-height:1.8;
  margin:0 auto;
  padding:0;
}

.faq_title_areae span{
  font-size: clamp(12px,5vw,20px);
  margin:0 auto;
  padding:0;
}

.faq_area{
  margin:0 auto;
  padding:0 0 5% 0;
}

.faq_area h2{
  padding:0.25em 0.5em;
  color:#371c14;
  background:transparent;
  border-left:solid 5px #ffbb27;
  text-align:left;
  margin:5% 0;
}

.faq_area dt {
  margin-bottom:1em;
  color:#333333;
  font-weight:700;
  font-size:22px;
  line-height:2;
}

.faq_area dt::before,
.faq_area dd::before {
  margin-right:.4em;
}

.faq_area dt::before {
  content:"Q.";
}

.faq_area dd {
  margin:0 0 2.5em;
  padding:2%;
  background-color:#fff;
  color:#333333;
  font-size:16px;
  line-height:2;
  letter-spacing:-0.05em;
}

.userguide{
  margin:0 auto;
  padding:60px 20px 100px;
  line-height:1.9;
}

.userguide_title_areae{
  margin:0 auto;
  padding:5% 0 0 0;
  text-align:center;
}

.userguide_title_areae h1{
  font-family:"Lobster", cursive;
  font-size: clamp(24px,5vw,60px);
  font-weight:700;
  line-height:1.8;
  margin:0 auto;
  padding:0;
}

.userguide_title_areae span{
  font-size: clamp(12px,5vw,20px);
  margin:0 auto;
  padding:0;
}

.userguide_title_areae p{
  font-size: clamp(12px,5vw,14px);
  margin:0 auto;
  padding:1% 0;
}

.userguide-nav{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:12px;
  margin-bottom:60px;
  padding:15px;
}

.userguide-nav a{
  text-decoration:none;
  color:#5b3a1c;
  border:1px solid #d7c4a4;
  padding:10px 18px;
  border-radius:999px;
  font-size:14px;
  transition:.3s;
  background:#fff;
  font-weight:bold;
}

.userguide-nav a:hover{
  background:#5b3a1c;
  color:#fff;
}

.userguide-section{
  margin-bottom:70px;
  scroll-margin-top:100px;
}

.userguide-section h2{
  font-size:28px;
  margin-bottom:30px;
  padding-bottom:12px;
  border-bottom:2px solid #d7c4a4;
  color:#5b3a1c;
}

.userguide-table{
  display:grid;
  grid-template-columns:220px 1fr;
  border-top:1px solid #ddd;
}

.userguide-table dt,
.userguide-table dd{
  padding:18px;
  margin:0;
  border-bottom:1px solid #ddd;
}

.userguide-table dt{
  background:#faf7f2;
  font-weight:700;
}

.ryocontac{
	text-decoration: underline;
	}

.userguide-payment{
  display:grid;
  gap:24px;
}

.userguide-payment-item{
  border:1px solid #e5e5e5;
  padding:25px;
  border-radius:10px;
}

.userguide-payment-item h3{
  margin-bottom:15px;
  color:#5b3a1c;
}

.userguide-card-logo img{
  max-width:400px;
  width:100%;
  height:auto;
  padding:10px 0;
}

.userguide-btn{
  display:inline-block;
  margin-top:15px;
  background:#5b3a1c;
  color:#fff;
  text-decoration:none;
  padding:14px 28px;
  border-radius:999px;
  transition:.3s;
}

.userguide-btn:hover{
  opacity:.8;
  color:#fff;
}

.userguide-note{
  margin-top:15px;
  font-size:14px;
  color:#777;
}

.guide{
  padding-bottom:100px;
}

.guide img,
.howto img,
.material img{
  display:block;
  max-width:100%;
  height:auto;
}

.guide-fv img{
  width:100%;
}

.guide-section{
  max-width:1400px;
  margin:0 auto;
  padding:60px 20px 0;
}

.guide-heading{
  display:flex;
  align-items:center;
  gap:14px;
  margin-bottom:35px;
  color:#5a2d14;
  font-size:42px;
  font-weight:700;
  line-height:1.2;
}

.guide-heading-num{
  width:54px;
  height:54px;
  background:#f6bc1d;
  color:#fff;
  border-radius:10px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:24px;
  font-weight:700;
  box-shadow:0 2px 8px rgba(0,0,0,.15);
}

.guide-nuts,
.guide-process{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px;
}


.guide-nuts{
  align-items:stretch;
}

.guide-card{
  background:#f8f6f2;
  border:3px solid #3f3024;
  border-radius:16px;
  padding:25px;
  height:100%;
  box-shadow:0 0 0 1px rgba(0,0,0,.05), 0 4px 15px rgba(0,0,0,.08);
}

.guide-card--center{
  grid-column:2;
}

.guide-card h3{
  text-align:center;
  font-size:20px;
  color:#333;
  margin:0 0 10px;
}

.guide-sub{
  text-align:center;
  margin-bottom:20px;
  font-weight:700;
  color:#444;
}

.guide-card > img{
  object-fit:contain;
  margin:0 auto 20px;
}

.guide-detail dt{
  display:inline-block;
  background:#4d9447;
  color:#fff;
  padding:4px 12px;
  border-radius:30px;
  font-size:14px;
  font-weight:700;
  margin:0 0 6px;
}

.guide-detail dd{
  margin:0 0 15px;
  line-height:1.8;
  color:#333;
}

.guide-process p{
  margin-top:15px;
  line-height:1.8;
}

.guide-scene{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:10px;
}

.guide-scene img{
  width:100%;
  border-radius:12px;
}

.howto{
  width:100%;
  max-width:1400px;
  margin:0 auto;
}

.howto-fv{
  margin-bottom:70px;
}

.howto-fv h1{
  margin:0;
}

.howto-section{
  margin-bottom:90px;
}

.howto-title{
  text-align:center;
  margin-bottom:45px;
}

.howto-icon{
  width:48px;
  margin:0 auto 12px;
}

.howto-title h2{
  margin:0;
  font-size:34px;
  line-height:1.4;
  color:#4a3727;
  font-weight:700;
  font-family:"Noto Sans JP",sans-serif;
}

.howto-title h2 span{
  display:block;
  font-size:22px;
  font-family:"Lobster", cursive;
}

.howto-title p{
  margin-top:15px;
  font-size:16px;
  color:#666;
  line-height:1.8;
}

.howto-process{
  margin-bottom:40px;
}

.howto-process:last-child{
  margin-bottom:0;
}

.material{
  max-width:1400px;
  margin:0 auto;
  padding:0 0 5% 0;
  background:#fff;
}

.material *,
.material *::before,
.material *::after{
  box-sizing:border-box;
}

.material section{
  margin-bottom:60px;
}

.material-fv{
  margin-bottom:70px;
}

.material-messege{
  padding:2% 0 0 0;
  margin:5% auto 0 auto;
}

.material-section-title{
  background:#472417;
  color:#fff;
  text-align:center;
  padding:18px 20px 20px;
}

.material-section-title h2{
  margin:0;
  color:#fff;
  font-weight:700;
  line-height:1.4;
  font-size:34px;
}

.material-section-title h2 span{
  display:block;
  font-size:22px;
  margin-bottom:6px;
  font-weight:400;
  font-family:"Lobster", cursive;
}

.material-card{
  background:#faf6f2;
  border:1px solid #eadfd5;
  border-radius:28px;
  padding:28px;
  margin:24px;
}

.material-head{
  margin-bottom:20px;
}

.material-number{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:14px;
  margin:0;
  padding:0;
  font-size:2.5rem;
  font-weight:700;
  line-height:1.3;
  color:#4b291b;
}

.material-number img{
  width:68px;
  min-width:68px;
  max-width:68px;
  height:auto;
  display:block;
  flex-shrink:0;
}

.material-number span{
  margin-left:4px;
  font-size:1.3rem;
  font-weight:500;
  color:#e2a321;
  white-space:nowrap;
}


.material-line{
  width:100%;
  margin-top:16px;
  display:block;
}

.material-body{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:28px;
}

.material-text{
  width:52%;
}

.material-text p{
  margin:0;
  font-size:17px;
  line-height:2.1;
  color:#3d312d;
  letter-spacing:.05em;
}

.material-photo{
  width:44%;
  flex:none;
}

.material-photo img{
  width:100%;
  border-radius:18px;
}

.material-photo-wide{
  margin:24px 0;
  width:100%;
}

.material-photo-wide img{
  width:100%;
  border-radius:22px;
  display:block;
}

.material-card .material-text:last-child{
  width:100%;
}

.material-card + .material-card{
  margin-top:28px;
}

.material-section:last-child{
  margin-bottom:0;
}

.material-pagenav {
  display:flex;
  flex-wrap:wrap;
  gap:20px;
  max-width:900px;
  margin:60px auto 40px;
  padding:0 20px;
  box-sizing:border-box;
}

.material-pagenav-item {
  flex:1 1 calc(50% - 10px);
  display:flex;
  align-items:center;
  gap:12px;
  padding:20px 24px;
  border:1px solid #D0C6B8;
  border-radius:8px;
  text-decoration:none;
  color:#1a1a1a;
  box-sizing:border-box;
  transition:background-color 0.2s ease;
}

.material-pagenav-item:hover {
  background-color:#F7F4EE;
}

.material-pagenav-item:last-child {
  justify-content:space-between;
}

.material-pagenav-arrow {
  font-size:1.3rem;
  color:#999;
  flex-shrink:0;
}

.material-pagenav-title {
  font-size:0.95rem;
  line-height:1.5;
}


/* =====================================================
   9. メディアクエリ (レスポンシブ調整)
===================================================== */
@media screen and (min-width: 750px){

	
	
  .product-wrapper { 
    flex-direction:row;
  }
  .sidebar { 
    order:-1;
    width:250px; 
    flex-shrink:0; 
  }
  .main-content { 
    order:0; 
    min-width:0;
  }
	

}

@media screen and (max-width: 1030px){
  .p-product-img {
    width:auto;
    margin-bottom:45px;
  }
  .p-product-img__main {
    margin-left:auto;
    margin-right:auto;
    width:530px;
  }
  .p-product-thumb-list {
    margin-left:0;
    margin-right:0;
    flex-wrap:nowrap;
  }
  .p-product-thumb-list__item {
    margin-right:5px;
    padding-left:0;
    padding-right:0;
    width:90px;
  }
  .p-product-thumb-list__item img,
  .p-product-thumb-list__img {
    width:90px;
  }
}



@media screen and (max-width: 750px){

.fv{
height: auto;
    min-height: auto;
    aspect-ratio: 4 / 3;
    margin-top:-10px;
  }

  .fv-subtitle{
    font-size:32px;
    margin-bottom:24px;
  }
  .fv-text{
    font-size:15px;
    line-height:2;
  }
  .banner-item{
    width:180px;
  }
  .news-inner{
    margin-left:16px;
    margin-right:0;
    width:auto;
    border-radius:40px 0 0 0;
    padding:10% 5% 5% 5%;
    flex-direction:column;
    gap:40px;
  }
  .news-heading{
    width:100%;
  }
  .news-title{
    font-size:35px;
    margin-bottom:10px;
  }
  .news-subtitle{
    font-size:14px;
  }
  .news-item{
    padding-bottom:18px;
    margin-bottom:18px;
  }
  .news-item time{
    font-size:12px;
    margin-bottom:10px;
  }
  .news-item p{
    font-size:18px;
    line-height:1.7;
  }
  .top-products-section{
    padding:80px 15px;
  }
  .top-products-grid--4,
  .top-products-grid--3,
  .top-products-grid--ranking{
    grid-template-columns:1fr 1fr;
    gap:20px;
  }
  .top-product-card h3{
    font-size:17px;
    line-height:1.8;
  }
  .top-product-card-comment{
    font-size:17px;
    line-height:1.9;
  }
  .top-product-card-price{
    font-size:20px;
  }
  .top-products-charm--pickup{
    width:150px;
    left:10px;
    top:10px;
  }
  .top-products-charm--ranking{
    width:120px;
    right:10px;
    top:10px;
  }
  .top-column{
    padding:100px 20px 80px;
  }
  .top-column__list{
    grid-template-columns:1fr;
    gap:24px;
  }
  .top-column__charm--right{
    width:180px;
    right:-20px;
  }
  .top-column__charm--left{
    width:160px;
    left:-20px;
  }
	
.top-column__charm--left02{
display: none !important;
}	
	
  .top-topic{
    padding:80px 15px;
  }
  .top-topic-slider{
    padding-top:80px;
  }
  .top-topic-marquee__track span{
    font-size:60px;
    margin-right:50px;
  }
  .top-topic-banner{
    margin-top:40px;
  }
  .store-info .inner {
    flex-direction:column;
    gap:30px;
  }
  .store-left {
    flex:none;
    width:100%;
  }
  .product-grid{
  grid-template-columns:repeat(2,1fr);
    gap:40px;
  }
  .product-name{
    font-size:20px;
    line-height:1.8;
  }
  .product-weight{
    font-size:18px;
    line-height:1.8;
  }
  .product-price{
    font-size:24px;
  }
  .productlist li {
    width:calc((100% - 10px) / 2);
  }
  .product-cart input[type="submit"]{
    height:70px;
    font-size:1.5rem;
  }
  .product-note{
    margin-top:40px;
    padding-top:40px;
    border-top:2px solid #4a2a20;
    font-size:16px;
    line-height:1.8;
    font-weight:bold;
  }
  .userguide{
    padding:40px 15px 80px;
  }
  .userguide-section h2{
    font-size:22px;
  }
  .userguide-table{
    grid-template-columns:1fr;
  }
  .userguide-table dt{
    border-bottom:none;
  }

  .guide{
    padding-bottom:60px;
  }
  .guide-section{
    padding:40px 15px 0;
  }
  .guide-heading{
    font-size:24px;
    margin-bottom:25px;
  }
  .guide-heading-num{
    width:40px;
    height:40px;
    font-size:18px;
  }

  .guide-process,
  .guide-scene{
   grid-template-columns: 1fr;
    gap:15px;
  }
	
.guide-nuts {
    grid-template-columns: 1fr;
    gap: 15px;
  }
	
  .guide-card{
    padding:15px;
  }
  .guide-card--center{
    grid-column:auto;
  }
  .guide-card h3{
    font-size:21px;
    line-height:1.7;
  }
  .guide-sub{
    font-size:16px;
    line-height:1.8;
  }
  .guide-detail dt{
    font-size:12px;
  }
  .guide-detail dd{
    font-size:13px;
    line-height:1.7;
  }
  .guide-process p{
    font-size:17px;
    line-height:2;
  }
  .howto{
    padding:0 15px;
  }
  .howto-fv{
    margin-bottom:50px;
  }
  .howto-section{
    margin-bottom:70px;
  }
  .howto-title{
    margin-bottom:35px;
  }
  .howto-icon{
    width:42px;
  }
  .howto-title h2{
    font-size:28px;
  }
  .howto-title h2 span{
    font-size:18px;
  }
  .howto-title p{
    font-size:17px;
    line-height:2;
  }
  .howto-process{
    margin-bottom:25px;
  }
 

  .material-body{
    gap:16px;
  }
  .material-text{
    width:52%;
  }
  .material-text p{
    font-size:17px;
    line-height:2;
  }
  .material-photo{
   width:100%!important;
  }
  .material-photo img{
    border-radius:12px;
  }
  .material-photo-wide{
    margin:18px auto;
	text-align: center;
	  width:100%!important;
  }
  .material-photo-wide img{
    border-radius:14px;
  width:100%!important;

  display:block;
  }

  .news-item p,
  .top-about__text,
  .top-about__text p,
  .column-card__body p,
  .shop-item p,
  .service-item p,
  .product-note,
  .faq_area dd,
  .guide-detail dd,
  .howto-title p,
  .material-text p{
    font-size:17px;
    line-height:2;
  }

  .product_bese02 p,
  .product_bese03 p{font-size:17px;line-height:2;}
  .product_bese02 th,
  .product_bese02 td,
  .sct th,
  .sct td{font-size:17px;line-height:1.9;}
  .faq_area dt{font-size:19px;line-height:1.9;}
  .faq_area dd{font-size:17px;}
  .userguide-table dt,
  .userguide-table dd{font-size:17px;line-height:1.9;}
  .userguide-note{font-size:15px;line-height:1.8;}

  .news-more-btn,
  .pager-btn,
  .userguide-btn,
  .cart-btn,
  .product-cart input[type="submit"]{
    min-height:52px;
  }
}

@media screen and (max-width: 750px) {
  .service-container {
    display:flex;
    flex-wrap:wrap;
  }

  .service-item {
    flex:1 1 50% !important;
    max-width:50% !important;
    box-sizing:border-box;
    border-left:none !important;
    border-top:none !important;
  }

  .service-item:nth-child(even) {
    border-left:1px solid #D0C6B8 !important;
  }

  .service-item:nth-child(n+3) {
    border-top:1px solid #D0C6B8 !important;
    margin-top:20px;
    padding-top:20px;
  }

  .service-item.service-item-cal {
    flex:1 1 50% !important;
    max-width:50% !important;
    display:block;
  }

  .side_section_cal {
    max-width:100%;
  }

  .service-item-cal {
    flex:1 1 100%;
    border-left:none;
    border-top:1px solid #D0C6B8;
    margin-top:10px;
    padding-top:20px;
  }

  .footer-inner {
    flex-direction:column;
    gap:30px;
  }

  .p-product-img {
    margin-left:-20px;
    margin-right:-20px;
    width:auto;
  }
  
  .sp_product{
    margin:0 auto;
    padding:0 2%;
    width:96%;
    text-align:center;
  }

  .p-product-img__main {
    width:auto;
  }

  .p-product-img__main-item {
    text-align:center;
  }

  .p-product-thumb-list {
    display:flex;
    flex-wrap:wrap;
    gap:2px; 
    padding:10px 0 0 0;
    margin:0;
    list-style:none;
  } 
  
  .p-product-thumb-list__item {
    width:60px;
    box-sizing:border-box;
  }

  .p-product-thumb-list__item img,
  .p-product-thumb-list__img img {
    width:60px;
  }

  .p-product-thumb-list__img {
    width:60px;
    text-align:center;
  }

  .p-product-img__main .slick-prev, 
  .p-product-img__main .slick-next {
    width:45px;
    height:45px;
  }

  .p-product-img__main .slick-prev:before, 
  .p-product-img__main .slick-next:before {
    top:15px;
  }

  .p-product-img__main .slick-prev { left:0px; }
  .p-product-img__main .slick-prev:before { left:17px; }
  .p-product-img__main .slick-next { right:0px; }
  .p-product-img__main .slick-next:before { left:13px; }

  .sct{
    padding:20px;
  }

  .product_bese02 table,
  .product_bese02 tbody,
  .product_bese02 tr,
  .product_bese02 th,
  .product_bese02 td,
  .sct table,
  .sct tbody,
  .sct tr,
  .sct th,
  .sct td{
    display:block;
    width:100%;
  }

  .product_bese02 th,
  .sct th{
    border-bottom:none;
    padding:15px;
  }

  .sct td,
  .product_bese02 td{
    padding:15px;
    margin-bottom:10px;
  }

  .material-pagenav-item {
    flex:1 1 100%;
  }

  /* Product Detail Mobile Overrides */
  .product-detail {
    display:block;
    width:100%;
    max-width:none;
    margin:0;
    padding:20px 16px 50px;
  }

  .product_images {
    width:100%;
    margin:0 0 30px;
  }

  .p-product-img {
    width:100%;
    margin:0;
    padding:0;
  }

  .sp_product {
    width:100%;
    max-width:100%;
    margin:0;
    padding:0;
  }

  .p-product-img__main {
    width:100%;
    margin:0;
  }

  .p-product-img__main-item {
    width:100%;
  }

  .p-product-img__main-item img {
    width:auto !important;
    max-width:100%;
    max-height:100%;
  }

  .p-product-img__thumb {
    width:100%;
    margin-top:10px;
    overflow:hidden;
  }

  .u-overflow-slide {
    width:100%;
    overflow-x:auto;
    overflow-y:hidden;
    -webkit-overflow-scrolling:touch;
  }

  .p-product-thumb-list {
    display:flex;
    flex-wrap:nowrap;
    gap:8px;
    width:max-content;
    margin:0;
    padding:0;
  }

  .p-product-thumb-list__item {
    flex:0 0 60px;
    width:60px;
    margin:0;
    padding:0;
  }

  .p-product-thumb-list__img {
    width:60px;
  }

  .p-product-thumb-list__img img {
    width:auto !important;
    max-width:100%;
    max-height:100%;
  }

  .product-info {
    width:100%;
    min-width:0;
    font-size:18px;
    line-height:2;
  }

  .product-tags {
    gap:8px;
    margin-bottom:20px;
  }

  .product-tags a {
    min-height:36px;
    padding:7px 14px;
    font-size:15px;
  }

  .product-title {
    margin-bottom:12px;
    font-size:22px;
    line-height:1.6;
  }

  .product-weight {
    font-size:18px;
    line-height:1.6;
    margin-top:5px;
  }

  .product-price {
    margin:20px 0;
    font-size:22px;
    text-align:right;
    line-height:1.5;
  }

  .product-quantity {
    margin-bottom:20px;
  }

  .product-quantity input {
    width:80px;
    height:55px;
    font-size:22px;
  }

  .product-cart {
    width:100%;
    margin-bottom:10px;
  }

  .product-cart input[type="submit"] {
    width:100%;
    min-height:54px;
    height:auto;
    padding:12px 15px;
    font-size:18px;
    line-height:1.5;
    white-space:normal;
  }

  .product-favorite {
    width:100%;
    margin-bottom:35px;
  }

  .product-favorite button,
  .product-favorite a {
    width:100%;
    min-height:48px;
    height:auto;
    padding:10px 15px;
    font-size:15px;
    line-height:1.5;
  }

  .product-info > ul {
    margin-top:25px;
    padding-left:20px;
  }

  .product-info > ul li {
    font-size:15px;
    line-height:1.8;
    margin-bottom:8px;
  }

  .product-note {
    margin-top:30px;
    padding-top:25px;
    font-size:14px !important;
    line-height:1.8;
    overflow-wrap:anywhere;
  }

  .p-product-img__main .slick-prev,
  .p-product-img__main .slick-next {
    width:40px;
    height:40px;
  }

  .p-product-img__main .slick-prev { left:5px; }
  .p-product-img__main .slick-next { right:5px; }
}

@media screen and (max-width: 750px){
  .material-card{
    padding:15px;
    margin:12px;
  }
.material-head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 15px;
  }

.material-number {
    flex-wrap: nowrap;
    gap: 8px;
    font-size: 20px;
    white-space: nowrap;
  }

  .material-number img {
    width: 40px;
    min-width: 40px;
    max-width: 40px;
    flex-shrink: 0;
  }

   .material-number span {
    margin-left: 0;
    font-size: 13px;
    white-space: nowrap;
    flex-shrink: 0;
  }

  /* 見出し横のライン画像 */
  .material-line {
    flex: 1;
    min-width: 20px;
    height: auto;
  }
  .material-body{
    display:flex;
    gap:12px;
  }
  .material-text{
    width:50%;
  }
  .material-photo{
    width:50%;
  }
  .material-text p{
    font-size:14px;
    line-height:1.8;
  }

  .product-detail {
    padding-left:12px;
    padding-right:12px;
  }

  .product-title {
    font-size:20px;
  }

  .product-price {
    font-size:20px;
  }

  .product-tags a {
    font-size:14px;
    padding:6px 12px;
  }

  .product-info > ul li {
    font-size:14px;
  }
}
/*おすすめ商品*/

.recommended_product-name{
  margin:18px 0 16px;
  font-size:20px;
  font-weight:700;
  line-height:1.4;
  overflow-wrap:anywhere;
}

.recommended_product-weight{
  margin:0;
  font-size:20px;
  font-weight:500;
  overflow-wrap:anywhere;
}

.recommended_product-price{
  margin-top:18px;
  text-align:right;
  font-size:20px;
  font-weight:700;
  overflow-wrap:anywhere;
}

/*TOPバナー*/

.top_bannerarea {
    margin: 2% auto;
    padding: 0;
    text-align: center;
    width: 100%;
}

.top_bannerarea a {
    display: inline-block; /* <a>タグをインラインブロックにして中央寄せを有効にする */
    width: 100%;
    max-width: 1000px; /* 画像の最大幅をリンク側に持たせる */
}

.top_bannerarea img {
    width: 100%;
    max-width: 1000px;
    margin: 0 auto; /* 万全を期すため左右auto */
    padding: 0;
    display: block; /* ブロック要素にして中央寄せしやすくする */
}


/* =================================
header scroll
================================= */

header .header-top {
  max-height: 100px;
  opacity: 1;
  overflow: hidden;
  padding-top: 18px;
  padding-bottom: 12px;
  transition:
    max-height 0.3s ease,
    opacity 0.2s ease,
    padding 0.3s ease;
}

header.is-scrolled .header-top {
  max-height: 0 !important;
  opacity: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* =================================
お気に入りボタン
================================= */
.product__fav-item {
  margin:10px auto 30px auto;
}

.product__fav-item button {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
    font-size:1.2rem;
  padding: 0;
  cursor: pointer;
  transition: .2s;

  width: 100%;
  height: 50px;

  color: #999;
  background: #fff;
  border: 0;
  outline: none;
  text-align: center;
}

.product__fav-item .fav-items {
  color: #ff7373;
}

.product__fav-item svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  fill: currentColor;
}

/* =================================
   商品検索フォーム
================================= */

.mar_b_50 {
  display: flex;
  align-items: center;
  width: 100%;
  max-width: 500px;
  margin: 0 auto 50px;
}

/* 検索キーワード入力欄 */
.mar_b_50 input[type="text"] {
  box-sizing: border-box;
  width: 100%;
  height: 46px;
  padding: 0 15px;

  font-size: 14px;
  color: #333;

  background: #fff;
  border: 1px solid #ddd;
  border-right: none;
  border-radius: 4px 0 0 4px;

  outline: none;
}

/* 入力欄にフォーカスしたとき */
.mar_b_50 input[type="text"]:focus {
  border-color: #999;
}

/* 検索ボタン */
.mar_b_50 button {
  flex-shrink: 0;
  width: 80px;
  height: 46px;
  padding: 0;

  display: flex;
  align-items: center;
  justify-content: center;

  font-size: 14px;
  color: #fff;

  background: #333;
  border: 1px solid #333;
  border-radius: 0 4px 4px 0;

  cursor: pointer;
}

/* 検索ボタン hover */
.mar_b_50 button:hover {
  opacity: .8;
}

/* =================================
   送料
================================= */

.shipping-table{
  max-width:640px;
  margin:0 auto;
padding: 0;
  color:#371c14;
}

.shipping-table__title{
  font-size:20px;
  font-weight:700;
  margin:0 0 16px;
  padding-bottom:10px;
  border-bottom:2px solid #371c14;
}

.shipping-table__table{
  width:100%;
  border-collapse:collapse;
  font-size:17px;
}

.shipping-table__table th{
  text-align:left;
  padding:10px 12px;
  background:#371c14;
  color:#fff;
  font-weight:600;
}

.shipping-table__table th:last-child,
.shipping-table__table td:last-child{
  text-align:right;
  width:100px;

}

.shipping-table__table td{
  padding:12px;
  border-bottom:1px solid #e6ddd6;
  vertical-align:top;

}

.shipping-table__table tr:nth-child(even) td{
  background:#faf6f2;
}

.shipping-table__table td:first-child{
  font-weight:600;
}

.shipping-table__sub{
  display:block;
  font-weight:400;
  color:#8a7368;
  margin-top:2px;
}

.shipping-table__note{
  margin-top:12px;
  font-size:12px;
  color:#8a7368;
 text-align: right;
}

@media (max-width:750px){
 .shipping-table__table {
    display: table !important;
    width: 100% !important;
    table-layout: fixed !important;
    border-collapse: collapse !important;
 
  }

  .shipping-table__table tbody {
    display: table-row-group !important;
    width: 100% !important;
  }

  .shipping-table__table tr {
    display: table-row !important;
    width: 100% !important;
  }

  .shipping-table__table th,
  .shipping-table__table td {
    display: table-cell !important;
    box-sizing: border-box !important;
    vertical-align: middle !important;
    padding: 12px 8px !important;

  }

  /* 地域の列 */
  .shipping-table__table th:first-child,
  .shipping-table__table td:first-child {
    width: auto !important;
    text-align: left !important;
    white-space: normal !important;
  }

  /* 送料の列 */
  .shipping-table__table th:last-child,
  .shipping-table__table td:last-child {
    width: 90px !important;
    text-align: right !important;
    white-space: nowrap !important;
    word-break: keep-all !important;
  }

  /* 都道府県名 */
  .shipping-table__sub {
    display: inline !important;
    margin-left: 3px !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
  }
}

/* =================================
   ファーストビュー20260917
================================= */
.firstview {
  position: relative;
  width: 100vw;
  height: 800px;
  margin-left: calc(50% - 50vw);
  overflow: hidden;
  background: #fff;
}

/* オレンジ背景 */
.firstview::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background: #e5b13a;

  /* 添付画像に近い大きな斜め */
  clip-path: polygon(
    0 0,
    92% 0,
    0 95%,
    0 100%
  );
}

/* ナッツ画像 */
.firstview__bg {
  position: absolute;
  z-index: 1;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* WE LOVE NUTS */
.firstview__title {
  position: absolute;
  z-index: 3;
  top: 40%;
  left: max(calc((100vw - 1200px) / 2), 0px);
  transform: translateY(-50%);
  width: 300px;
  margin: 0;
}

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

@media screen and (max-width: 750px) {

.firstview_sp {
    margin: 0 auto;
    padding-top:60px;
    padding-bottom: 0;
    text-align: center;
  }

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





/* =================================
   スマホ時に商品購入ボタン
================================= */
.sp-fixed-buy-area {
  display: none; /* PCでは非表示 */
}

@media screen and (max-width: 750px) {
  .sp-fixed-buy-area {
    display: block !important;
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 100% !important;
    background-color: #ffffff !important;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.15) !important;
    padding: 10px 15px !important;
    box-sizing: border-box !important;
    z-index: 99999 !important;
  }

  .sp-buy-btn {
    display: block !important;
    width: 100% !important;
    background-color: #371c14 !important; 
    color: #ffffff !important;
    text-align: center !important;
    padding: 14px 0 !important;
    font-size: 16px !important;
    font-weight: bold !important;
    border-radius: 4px !important;
    text-decoration: none !important;
  }

  /* 固定フッターにコンテンツが隠れないよう、ページの最下部に余白を空ける */
  body {
    padding-bottom: 75px !important;
  }
}

/* =================================
   pcとスマホで別々
================================= */

.pc-only {
  display: block;
}

.sp-only {
  display: none;
}

/* SP */
@media screen and (max-width: 750px) {

  .pc-only {
    display: none;
  }

  .sp-only {
    display: block;
  }

}

/* =================================
  商品一覧にタグボタンを導入
================================= */
.special_btn_group {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 15px;
  width: 100%;
  max-width: 1000px; /* 全体の最大幅 */
margin:0 auto 30px auto;
  box-sizing: border-box;
}

.special_btn {
  flex: 1; 
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 14px 10px;
  background-color: #361c15; /* ボタンの背景色 */
  color: #ffffff;            /* 文字色 */
  font-size: 15px;
  font-weight: bold;
  text-decoration: none;
  text-align: center;
  border-radius: 4px;        /* 角丸 */
  box-sizing: border-box;
  transition: opacity 0.3s;
}



.special_btn:hover,
.special_btn:active {
 opacity: 0.8;
  color: #ffffff !important; /* ホバー時も文字色を白に維持 */
  text-decoration: none;      /* 下線がつくのを防ぐ */
}

/* --- スマホ時の対応（幅750px以下） --- */
@media screen and (max-width: 750px) {
  /* パターンB：スマホでも3横並びを維持する場合 */
  .special_btn_group {
    gap: 8px; /* スマホ用に隙間を少し詰める */
	margin:0 auto 15px auto; 
  }

  .special_btn {
    padding: 10px 4px;
    font-size: 12px; /* 文字溢れ防止用にサイズを調整 */
  }
}


/* =====================================================
   対象：おいしさの理由は素材から
===================================================== */

@media screen and (max-width: 750px) {

  /* ページ全体 */
  .free_bese .material {
    width: 100%;
    max-width: 100%;
    padding: 0 0 40px;
    overflow: hidden;
  }

  .free_bese .material section {
    margin-bottom: 35px;
  }

  /* パンくずリスト */
  .free_bese .breadcrumb {
    width: 100%;
    margin-bottom: 20px;
    padding: 0 15px;
    font-size: 12px;
    line-height: 1.7;
  }

  .free_bese .breadcrumb ol {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 0;
  }

  .free_bese .breadcrumb li {
    min-width: 0;
    overflow-wrap: anywhere;
  }

  .free_bese .breadcrumb li + li::before {
    margin: 0 6px;
  }

  /* ファーストビュー画像 */
  .free_bese .material-fv {
    width: 100%;
    margin: 0 0 35px;
  }

  .free_bese .material-fv h1 {
    width: 100%;
    margin: 0;
    padding: 0;
  }

  .free_bese .material-fv h1 img {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    margin: 0;
  }

  /* 各セクション見出し */
  .free_bese .material-section-title {
    width: 100%;
    padding: 18px 12px;
    text-align: center;
  }

  .free_bese .material-section-title h2 {
    margin: 0;
    font-size: 23px;
    line-height: 1.5;
    overflow-wrap: anywhere;
  }

  .free_bese .material-section-title h2 span {
    margin-bottom: 5px;
    font-size: 17px;
    line-height: 1.4;
  }

  /* 各カード */
  .free_bese .material-card {
    width: auto;
    min-width: 0;
    margin: 16px 12px;
    padding: 18px 15px;
    border-radius: 18px;
  }

  /* 番号・タイトル・日付 */
  .free_bese .material-head {
    display: block;
    width: 100%;
    margin-bottom: 16px;
  }

  .free_bese .material-number {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px 9px;
    width: 100%;
    margin: 0;
    padding: 0;
    font-size: 21px;
    line-height: 1.5;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .free_bese .material-number img {
    display: block;
    width: 38px;
    min-width: 38px;
    max-width: 38px;
    height: auto;
    flex: 0 0 38px;
  }

  .free_bese .material-number span {
    display: inline-block;
    margin-left: 0;
    font-size: 13px;
    line-height: 1.6;
    white-space: normal;
    flex-shrink: 1;
  }

  /* 見出し下のライン */
  .free_bese .material-line {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    margin-top: 12px;
  }

  /* 説明文と写真：スマホでは縦並び */
  .free_bese .material-body {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 18px;
    width: 100%;
  }

  .free_bese .material-text {
    width: 100%;
    min-width: 0;
  }

  .free_bese .material-text p {
    width: 100%;
    margin: 0;
    font-size: 14px;
    line-height: 1.9;
    letter-spacing: 0.02em;
    overflow-wrap: anywhere;
    word-break: normal;
  }

  /* 文章内の改行は活かしつつ、横はみ出しを防止 */
  .free_bese .material-text br {
    display: inline;
  }

  /* 写真 */
  .free_bese .material-photo {
    width: 100%;
    min-width: 0;
    margin: 0;
    flex: 0 0 auto;
  }

  .free_bese .material-photo img {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    border-radius: 12px;
  }

  /* 横幅いっぱいの写真 */
  .free_bese .material-photo-wide {
    width: 100%;
    margin: 18px 0;
  }

  .free_bese .material-photo-wide img {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    border-radius: 12px;
  }

  /* 収穫・選別など、写真の下に説明文があるカード */
  .free_bese .material-card > .material-text:last-child {
    width: 100%;
    margin-top: 0;
  }

  .free_bese .material-card > .material-photo-wide + .material-text {
    margin-top: 0;
  }

  /* カード間の余白 */
  .free_bese .material-card + .material-card {
    margin-top: 16px;
  }

  /* 前後ページへのナビゲーション */
  .free_bese .material-pagenav {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
    max-width: 100%;
    margin: 35px auto 20px;
    padding: 0 12px;
  }

  .free_bese .material-pagenav-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    min-width: 0;
    padding: 16px 14px;
    border-radius: 8px;
  }

  .free_bese .material-pagenav-item:first-child {
    justify-content: flex-start;
  }

  .free_bese .material-pagenav-item:last-child {
    justify-content: space-between;
  }

  .free_bese .material-pagenav-arrow {
    flex: 0 0 auto;
    font-size: 20px;
  }

  .free_bese .material-pagenav-title {
    min-width: 0;
    font-size: 13px;
    line-height: 1.7;
    overflow-wrap: anywhere;
  }

}

/* 小さめのスマートフォン */
@media screen and (max-width: 380px) {

  .free_bese .material-card {
    margin: 12px 8px;
    padding: 15px 12px;
  }

  .free_bese .material-number {
    gap: 5px 7px;
    font-size: 19px;
  }

  .free_bese .material-number img {
    width: 34px;
    min-width: 34px;
    max-width: 34px;
    flex-basis: 34px;
  }

  .free_bese .material-number span {
    font-size: 12px;
  }

  .free_bese .material-section-title h2 {
    font-size: 21px;
  }

  .free_bese .material-text p {
    font-size: 14px;
  }

}