@charset "UTF-8";

/*:::::トップページ共通:::::*/
.top{
	width:100%
}
/* NEWSタイトル装飾 */
.title {
  text-align: center;
  margin: 40px 0;
  position: relative;
}

.title h2.news-title{
  display: inline-block;
  position: relative;
  font-size: 1.8rem;
  font-weight: 700;
  color: rgba(var(--color-main), 1); /* コーポレートカラーで */
  padding: 0 1em;
}

/* 左右の線を ::before / ::after で作る */
.title h2::before,
.title h2::after {
  content: "";
  display: inline-block;
  width: 100px;
  height: 1px;
  background: rgba(var(--color-gray), 0.6);
  vertical-align: middle;
  margin: 0 12px;
}
.top .title p{
	margin-top:-1.25rem;
	text-align:center;
	font-size:0.875rem;
}

/*:::::カルーセルのCSS:::::*/

/* ===== Hero Carousel Simple ===== */
#left-section .carousel {
  position: relative;
  overflow: hidden;
  border-radius: 12px;
}

#left-section .carousel::before {
  content: "";
  display: block;
  padding-top: 56.25%; /* アスペクト比16:9 */
}

#left-section .carousel .slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity .8s ease;
}

#left-section .carousel .slide.is-active {
  opacity: 1;
}

#left-section .carousel .slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ドット */
.carousel-dots {
  position: absolute;
  left: 50%;
  bottom: 10px;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
  z-index: 2;
}
.carousel-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(var(--color-main), 0.6);
  border: none;
  cursor: pointer;
}
.carousel-dot[aria-current="true"] {
  background: rgba(var(--color-white), 1);
}

/* 動きに弱いユーザー配慮 */
@media (prefers-reduced-motion: reduce) {
  #left-section .carousel .slide {
    transition: none;
  }
}

/*:::::新着お知らせここから:::::*/

/* セクション余白 */
.news-section{ margin:40px 0; }

/* タイトル（NEWS左右にライン） */
.title{ text-align:center; margin:24px 0 16px; }
.title h2{
  display:inline-block; position:relative;
  font-size:1.8rem; font-weight:700;
  color:rgba(var(--color-main-c),1);
  padding:0 1em;
}
.title h2::before,
.title h2::after{
  content:""; display:inline-block; vertical-align:middle;
  width:100px; height:2px; background:rgba(var(--color-gray),.6);
  margin:0 12px;
}
.title p{ color:rgba(var(--color-gray),.9); margin:6px 0 0; font-size:.95rem; }

/* コンテンツ */
.news-contents{ list-style:none; margin:0; padding:0; }
.news-contents li{ border-bottom:1px solid rgba(var(--color-gray),.5); }
.news-contents li a{
  display:flex; align-items:center; justify-content:space-between;
  text-decoration:none; color:inherit; padding:0 .5rem;
}

/* 1: 日付 */
.news-contents .date-news{
  flex:0 0 120px; text-align:left; color:rgba(var(--color-main), 1); font-size:.9em;
  position:relative; padding-left:1.2em;
}
.news-contents .date-news::before{
  content:"\f0da"; font-family:"Font Awesome 6 Free"; font-weight:900;
  position:absolute; left:0; top:50%; transform:translateY(-50%);
  font-size:1em; color:rgba(var(--color-red),1);
}

/* 2: タイトル */
.news-contents .title-news{
  flex:1; text-align:left; padding:0 1em; font-weight:500;
}

/* 3: MORE */
.news-contents .link-news{
  flex:0 0 auto; text-align:right;
  display:inline-block; background:rgba(var(--color-gray),1);
  color:rgba(var(--color-white),1); font-size:.9em; font-weight:600;
  padding:.3em .8em; border-radius:4px; text-align:center;
  transition:background-color .2s ease;
}
.news-contents .link-news:hover{ background:rgba(var(--color-gray),.8); color:rgba(var(--color-white),1); }

/* ===== WP-PageNavi：完全リセット＋再定義（他テーマ干渉を遮断） ===== */
.news-pager{ margin-top:20px; text-align:center; }

/* コンテナをまず初期化して自前で整列 */
.news-pager .wp-pagenavi{
  all:unset;
  display:inline-flex; align-items:center; gap:8px;
}
.news-pager .wp-pagenavi *{ box-sizing:border-box; }

/* 余計な「Pages: …」は非表示 */
.news-pager .wp-pagenavi .pages{ display:none !important; }

/* ボタン（a と span.current を同条件に統一） */
.news-pager .wp-pagenavi a,
.news-pager .wp-pagenavi span{
  all:unset;                           /* ← position/line-height/transform 等を全解除 */
  display:grid; place-items:center;     /* ど真ん中 */
  min-width:36px; height:36px; padding:0 10px;
  border:1px solid rgba(var(--color-main), 0.15); border-radius:6px;
  background:rgba(var(--color-white), 1);; color:rgba(var(--color-main),1);
  line-height:1; text-decoration:none;
  /* 念のため位置系も明示的に無効化 */
  position:static !important; top:auto !important; bottom:auto !important;
  left:auto !important; right:auto !important; transform:none !important;
  margin:0 !important; vertical-align:middle !important;
}

/* 現在ページ */
.news-pager .wp-pagenavi span.current{
  background:rgba(var(--color-main-c),1);
  border-color:rgba(var(--color-main-c),1);
  color:rgba(var(--color-white), 1);
}

/* ホバー */
.news-pager .wp-pagenavi a:hover{ border-color:rgba(var(--color-main-c),.6); }

/* 前へ/次へは横広 */
.news-pager .wp-pagenavi a.previouspostslink,
.news-pager .wp-pagenavi a.nextpostslink{ padding:0 12px; }

/* モバイル微調整 */
@media (max-width:640px){
  .news-pager .wp-pagenavi{ gap:6px; }
  .news-pager .wp-pagenavi a,
  .news-pager .wp-pagenavi span{ min-width:34px; height:34px; padding:0 8px; }
}

/*:::::新着お知らせここまで:::::*/

/* ↓↓↓↓↓ CATEGORYカテゴリここから ↓↓↓↓↓ */
/* セクション余白 */
.new-items { margin: 40px 0; }
/* グリッド2列＋gap16px */
/* グリッド4列＋gap10px */
.category ul {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* カード共通スタイル */
.category ul li {
  border: 1px solid rgba(var(--color-main-c), 1);
  border-radius: 8px;
  background: rgba(var(--color-white), 1);
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.category ul li:hover {
  transform: translateY(-4px);
  box-shadow: 0 4px 12px rgba(var(--color-main), 0.12);
}

.category ul li a {
  display: block;
  color: rgba(var(--color-main), 1);
  text-decoration: none;
}

/* 画像 */
.category ul li img {
  display: block;
  width: 100%;
  height: auto;
  border-bottom: 1px solid rgba(var(--color-main-c), 0.2);
}

/* タイトル・本文 */
.category ul li h6 {
    font-size: 1.1rem!important;
  padding:0 1rem;
  margin: 0.8rem 1rem 0.4rem;
  color: rgba(var(--color-main), 1);
}
.category ul li p {
  margin: 0 1rem 1rem;
  color: rgba(var(--color-main), 0.9);
  line-height: 1.6;
  font-size: 0.95rem;
}

/* 全商品はこちら */
.category>a{
	display: block;
	margin-top: 1rem;
	padding: 1rem;
	width: 100%;
	text-align: center;
	color: rgba(var(--color-white), 1.00);
	border-radius: 10px;
	background-color: rgba(var(--color-gray), 1);
}

/* レスポンシブ対応 */
@media (max-width: 1200px) {
  .category ul {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width: 800px) {
  .category ul {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 500px) {
  .category ul {
    grid-template-columns: 1fr;
  }
}
/* ↑↑↑↑↑ CATEGORY カテゴリ ここまで ↑↑↑↑↑ */

/* ↓↓↓↓↓ CAMPAIGH キャンペーン ここから ↓↓↓↓↓ */
/* セクション余白 */
.new-items { margin: 40px 0; }
/* グリッド2列＋gap16px */
.campaign ul {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* カード共通スタイル */
.campaign ul li {
  border: 1px solid rgba(var(--color-main-c), 1);
  border-radius: 8px;
  background: rgba(var(--color-white), 1);
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.campaign ul li:hover {
  transform: translateY(-4px);
  box-shadow: 0 4px 12px rgba(var(--color-main), 0.12);
}

.campaign ul li a {
  display: block;
  color: rgba(var(--color-main), 1);
  text-decoration: none;
}

/* 画像 */
.campaign ul li img {
  display: block;
  width: 100%;
  height: auto;
  border-bottom: 1px solid rgba(var(--color-main-c), 0.2);
}

/* タイトル・本文 */
.campaign ul li h6 {
  font-size: 1.2rem!important;
  padding:0 1rem;
  margin: 0.8rem 1rem 0.4rem;
  color: rgba(var(--color-main), 1);
}
.campaign ul li p {
  margin: 0 1rem 1rem;
  color: rgba(var(--color-main), 0.9);
  line-height: 1.6;
  font-size: 0.95rem;
}

/* レスポンシブ対応 */
@media (max-width: 960px) {
  .campaign ul {
    grid-template-columns: 1fr;
  }
}
/* ↑↑↑↑↑ CAMPAIGH キャンペーンここまで ↑↑↑↑↑ */

/* ↓↓↓↓↓ BEST SELLERS おすすめ商品ここから ↓↓↓↓↓ */
/* セクション余白 */
.new-items { margin: 40px 0; }
/* グリッド3列＋gap16px */
.new-items ul {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* カード共通スタイル */
.new-items ul li {
  border: 1px solid rgba(var(--color-main-c), 1);
  border-radius: 8px;
  background: rgba(var(--color-white), 1);
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.new-items ul li:hover {
  transform: translateY(-4px);
  box-shadow: 0 4px 12px rgba(var(--color-main), 0.12);
}

.new-items ul li a {
  display: block;
  color: rgba(var(--color-main), 1);
  text-decoration: none;
}

/* 画像はカード上部でフィット */
.new-items ul li img {
  display: block;
  width: 100%;
  height: auto;
  border-bottom: 1px solid rgba(var(--color-main-c), 0.2);
}

/* タイトル・本文 */
.new-items ul li h6 {
  font-size: 1.2rem!important;
  padding:1rem 1rem 0 1rem;
  margin: 0.8rem 1rem 0.4rem;
  color: rgba(var(--color-main), 1);
  border-top:1px solid rgba(var(--color-main-c), 1);
}
.new-items ul li p {
  margin: 0 1rem 1rem;
  color: rgba(var(--color-main), 0.9);
  line-height: 1.6;
  font-size: 0.95rem;
}

/* MOREボタン */
.new-items ul li span {
  display: inline-block;
  float: right;
  margin: 0 1rem 1rem 0;
  color: rgba(var(--color-red), 1);
  font-weight: 600;
  transition: color 0.3s ease;
}
.new-items ul li:hover span {
  color: rgba(var(--color-main-c), 1);
}

/* レスポンシブ対応 */
@media (max-width: 960px) {
  .new-items ul {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 640px) {
  .new-items ul {
    grid-template-columns: 1fr;
  }
}
/* ↑↑↑↑↑ NEW ITEMS新商品ここまで ↑↑↑↑↑ */

/*:::::バナートップここから:::::*/
/* セクション余白 */
.top a{
	display:block;
	margin-top:2rem!important;
}
.top .banner img{
	border: 1px solid rgba(102,205,170,1.00);
	border-radius:8px;
}

/*:::::タブレット:::::*/
@media only screen and (max-width: 960px) {
}
/*:::::スマホ:::::*/
@media only screen and (max-width: 640px) {
}

/* ===== Patch: fix image-top spacing & unify grids for .top sections ===== */
.top.new-items ul,
.top.campaign ul,
.top.category ul{
  margin:0;
  padding:0;
  list-style:none;
}

/* Remove unexpected spacing and ensure tight image placement */
.top.new-items ul li,
.top.campaign ul li,
.top.category ul li{
  padding:0 !important;
  margin:0;
  overflow:hidden;
  line-height:0; /* kill inline baseline gaps inside cards */
}

/* Make anchor a zero-line wrapper to eliminate top gap caused by line boxes */
.top.new-items ul li > a,
.top.campaign ul li > a,
.top.category ul li > a{
  display:block;
  margin:0 !important;
  padding:0 !important;
  line-height:0 !important;
  font-size:0 !important; /* text restored below */
  text-decoration:none;
  color: rgba(var(--color-main), 1);
}

/* Images: block-level & no margins for perfect fit */
.top.new-items ul li > a > img,
.top.campaign ul li > a > img,
.top.category ul li > a > img{
  display:block !important;
  width:100%;
  height:auto;
  margin:0 !important;
  padding:0 !important;
  border:0;
}

/* Restore text sizing inside cards */
.top.new-items ul li > a > h6,
.top.campaign ul li > a > h6,
.top.category ul li > a > h6{
  font-size:1.1rem;
  line-height:1.4;
  margin:.8rem 1rem .4rem 1rem;
}
.top.new-items ul li > a > p,
.top.campaign ul li > a > p,
.top.category ul li > a > p{
  font-size:.95rem;
  line-height:1.6;
  margin:0 1rem 1rem 1rem;
  color: rgba(var(--color-main), .9);
}
.top.new-items ul li > a > span,
.top.campaign ul li > a > span,
.top.category ul li > a > span{
  font-size:.95rem;
  font-weight:600;
  display:inline-block;
  float:right;
  margin:0 1rem 1rem 0;
  color: rgba(var(--color-red), 1);
}

/* Ensure grid definitions (kept as in file, this is just a safety net) */
.top.new-items ul{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.top.campaign  ul{ display:grid; grid-template-columns:repeat(2,1fr); gap:16px; }
.top.category  ul{ display:grid; grid-template-columns:repeat(4,1fr); gap:10px; }

@media (max-width: 960px){
  .top.new-items ul{ grid-template-columns:repeat(2,1fr); }
  .top.campaign  ul{ grid-template-columns:1fr; }
  .top.category  ul{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width: 640px){
  .top.new-items ul,
  .top.campaign  ul,
  .top.category  ul{ grid-template-columns:1fr; }
}

/* Fix for NEWS title class selector to ensure styling applies */
.title h2.news-title{
  display:inline-block;
  position:relative;
  font-size:1.8rem;
  font-weight:700;
  color: rgba(var(--color-main), 1);
  padding:0 1em;
}