/* ==================================================-2026/03/09 */
/* ===============================
共通
=============================== */

.top-section{
background:#fffaf5;
padding:60px 20px;
}

.top-inner{
max-width:1000px;
margin:auto;
padding:0 10px;
}

.section-title{
font-size:24px;
margin-bottom:30px;
text-align:center;
font-weight:600;
}

.section-title{
font-family:
"Yu Mincho",
"YuMincho",
"Hiragino Mincho ProN",
"Hiragino Mincho Pro",
"MS Mincho",
serif;

font-weight:500;
letter-spacing:0.05em;
}

.section-desc{
font-size:16px;
color:#666;
margin-bottom:36px;
line-height:1.6;
text-align:center;
}
/* ===============================
人気ジャンル
=============================== */

.genre-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:20px;
}

/* スマホ */
@media (max-width:768px){

.genre-grid{
grid-template-columns:1fr;
}

}

.genre-item{
display:flex;
align-items:center;
background:#fff;
padding:10px;
text-decoration:none;
color:#333;
border-radius:8px;
  
  box-shadow:0 2px 6px rgba(0,0,0,0.06);
}

.genre-img{
width:70px;
flex-shrink:0;
}

.genre-img img{
width:100%;
}

.genre-text{
flex:1;
padding-left:15px;
font-size:16px;
}

.genre-arrow{
margin-left:auto;
font-size:20px;
}

/* ===============================
ランキング
=============================== */

.ranking-list{
grid-template-columns:repeat(5,1fr);
gap:0px;
counter-reset:rank;
}

.ranking-item{
position:relative;
text-align:center;
}

.ranking-item img{
width:100%;
}

.ranking-item::before{
counter-increment:rank;
content:counter(rank);
position:absolute;
top:6px;
left:6px;
width:28px;
height:28px;
background:#333;
color:#fff;
display:flex;
align-items:center;
justify-content:center;
border-radius:50%;
font-size:13px;
}

/* 1〜3位 */

.ranking-item:nth-child(1)::before{background:#c9a36a;}
.ranking-item:nth-child(2)::before{background:#999;}
.ranking-item:nth-child(3)::before{background:#b87333;}

/* ===============================
キャラクター
=============================== */

.character-grid{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:20px;
text-align:center;
}

.character-item img{
width:100%;
border-radius:50%;
}

.more-btn{
display:block;
margin:40px auto 0;
width:200px;
text-align:center;
padding:12px;
background:#333;
color:#fff;
text-decoration:none;
}

/* ===============================
ギフト
=============================== */

.gift-grid{
display:grid;
gap:12px;
}

.gift-item{
display:flex;
align-items:center;
justify-content:space-between;
background:#fff;
padding:10px;
text-decoration:none;
color:#333;
border-radius:8px;

box-sizing:border-box;
min-width:0;
}

.gift-item{
position:relative;
}

.gift-item::after{
content:"＞";
position:absolute;
right:12px;
top:50%;
transform:translateY(-50%);
font-size:10px;
}

.gift-text{
flex:1;
padding-left:10px;
font-size:14px;
}

.gift-arrow{
flex-shrink:0;
margin-left:10px;
font-size:18px;
}

/* ===============================
ギフト特集（修正）
=============================== */
.gift-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:24px;
margin-top:30px;
}

.gift-box{
display:block;
background:#fff;
padding:18px;
border-radius:8px;
text-decoration:none;
color:#333;
text-align:center;
font-size:14px;
  
  /* 影 */
box-shadow:0 2px 6px rgba(0,0,0,0.06);
}

@media (max-width:768px){

.gift-grid{
grid-template-columns:repeat(2,1fr);
gap:14px;
}

}
/* ===============================
人気商品
=============================== */

.manual-products{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:20px;
text-align:center;
}

.manual-products img{
width:100%;
}

/* ===============================
レスポンシブ
=============================== */

@media(max-width:768px){

.ranking-list{
grid-template-columns:repeat(2,1fr);
}

.character-grid{
grid-template-columns:repeat(2,1fr);
}

.gift-grid{
grid-template-columns:repeat(2,1fr);
}

.manual-products{
grid-template-columns:repeat(2,1fr);
}

}

/* ===============================
時を越えて、今に残る九谷焼
=============================== */
/* 特集セクション */

.special-feature{
max-width:1100px;
margin:0px auto;
padding:0 10px;
}

.feature-box{
display:block;
text-decoration:none;
color:#333;
border:1px solid #e6e6e6;
padding:25px;
transition:0.3s;
background:#fff;
}

.feature-box:hover{
box-shadow:0 15px 35px rgba(0,0,0,0.08);
transform:translateY(-4px);
}

/* ラベル */

.feature-label{
font-size:11px;
letter-spacing:0.15em;
color:#999;
margin-bottom:10px;
}

/* タイトル */

.feature-title{
font-size:26px;
font-weight:500;
margin-bottom:25px;
letter-spacing:0.08em;
}

/* 画像 */

.feature-img img{
width:100%;
display:block;
margin-bottom:25px;
}

/* 説明 */

.feature-desc{
font-size:14px;
line-height:1.9;
margin-bottom:18px;
}

/* 情報 */

.feature-info{
font-size:13px;
color:#666;
margin-bottom:25px;
}

/* ボタン */

.feature-btn{
display:inline-block;
padding:10px 28px;
border:1px solid #333;
font-size:13px;
letter-spacing:0.05em;
transition:0.3s;
}

.feature-box:hover .feature-btn{
background:#333;
color:#fff;
}

/* ================================================== */

.category-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  margin: 20px 0px;
  background: #fffaf5;
  padding: 20px 0;
}

.category {
  text-align: center;
  width: 30%;
  min-width: 110px;
  margin-bottom:20px;
}

.category img {
  width: 95%;
  border-radius: 10px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  transition: transform 0.3s ease;
}

.category img:hover {
  transform: scale(1.03);
}

.category h3 {
  margin-top: 7px;
  font-size: 14px;
  color: #5a4634;
  font-family: "游明朝", serif;
}

.category p {
  margin-top: 3px;
  font-size: 13px;
  color: #5a4634;
  font-family: "游明朝", serif;
}

.categorynewitem {
  position: relative;
  text-align: center;
  color: #fff;
}
.categorynewitem img {
  object-fit: cover;
  filter: brightness(65%);
}
.categorynewitem-text {
  position: absolute;
  top: 47%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.categorynewitem-text p {
  font-size: 1.2rem;
  color:#fff;
}

/* モバイル：2カラム */
@media (max-width: 768px) {
  .category {
    width: 48%;
  }
}
/* ======================================================================= */

/* 春の九谷焼 */
.spring-banner {
  position: relative;
  max-width: 1200px;
  margin: 80px auto;
  background: #fffaf5;
  border-radius: 10px;
  padding: 30px 20px;
}

.spring-banner img {
  width: 100%;
  display: block;
  filter: brightness(0.92);
}

.spring-banner a {
  display: block;
  position: relative;
  text-decoration: none;
  color: #fff;
}

.spring-banner-text {
  position: absolute;
  bottom: 12%;
  left: 8%;
}

.spring-banner-text h2 {
  font-size: 38px;
  letter-spacing: 3px;
  margin-bottom: 12px;
  font-weight: 500;
  font-family: "游明朝", "Hiragino Mincho ProN", serif;
}

.spring-banner-text p {
  font-size: 18px;
  margin-bottom: 6px;
  font-family: "游明朝", "Hiragino Mincho ProN", serif;
}

.spring-banner-text span {
  font-size: 13px;
  letter-spacing: 2px;
  font-family: "游明朝", "Hiragino Mincho ProN", serif;
}

.spring-caption {
  text-align: center;
  margin-top: 20px;
  font-size: 16px;
  color: #555;
}
.spring-caption01 {
  text-align: center;
  margin-top: 20px;
  font-size: 24px;
  color: #555;
}
.spring-caption02 {
  text-align: center;
  margin-top: 10px;
  font-size: 14px;
  color: #555;
}
.spring-caption03 {
  text-align: center;
  margin-top: 0px;
  font-size: 14px;
  color: #555;
}
/* ======================================================================= */
/* ボタン */
.gift-links {
  text-align: center;
  margin: 50px 0;
}

.gift-link-btn {
  display: inline-block;
  width: 260px;
  margin: 10px;
  padding: 16px 20px;
  background: #ffffff;
  border: 1px solid #ddd;
  color: #333;
  text-decoration: none;
  transition: all 0.3s ease;
}

.gift-link-btn:hover {
  background: #f3eee6;
}
/* ======================================================================= */
/* ======================================================================= */
.top-gift-block {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  background: #fffaf5;
  border-radius: 10px;
  padding: 30px 20px;
  margin: 50px auto;
  max-width: 1000px;
  box-shadow: 0 0px 0px rgba(0,0,0,0.05);
}

.gift-text {
  flex: 1;
  min-width: 260px;
  text-align: left;
  padding: 10px 20px;
}

.gift-text h2 {
  font-size: 20px;
  font-family: "游明朝", "Hiragino Mincho ProN", serif;
  color: #4b3c2e;
  margin-bottom: 10px;
}

.gift-text p {
  font-size: 14px;
  color: #5a4634;
  line-height: 1.8;
  margin-bottom: 20px;
}

.gift-btn {
  display: inline-block;
  background: #a17c5a;
  color: #fff;
  padding: 10px 20px;
  border-radius: 5px;
  text-decoration: none;
  font-weight: bold;
}
.gift-btn:hover {
  opacity: 0.85;
}

.gift-image {
  flex: 1;
  min-width: 250px;
  text-align: center;
}

.gift-image img {
  width: 100%;
  max-width: 400px;
  border-radius: 8px;
}
/* ======================================================================= */

/* ======================================================================= */

.cp_cssslider input[name='cp_switch'] {
	display: none;

}
/* タイトル */
.section-title{
  margin-bottom:10px;
}
.title title--brown{
  font-size:18px;
  color:#1a1a1a;
  margin-bottom:10px;
}

.タイトル{
  font-size:20px;
  color:#4b4b4b;
  margin-bottom:0px;
  padding: 1rem 0rem;
  border-top: 1px solid #fff;
  border-bottom: 1px solid #fff;
  background-color:#fff;
  width:85%;
}


h2 {
  padding:0px;
  
}
.text {
font-size:14px;
  padding:0px;
  font-size:14px;
  letter-spacing: 0.5px;
  line-height: 1.9em;
  margin-top:0px;
}

h3{
  font-size:12px;
  color:#1a1a1a;
  margin-bottom:0px;
  margin-top:0px;
}
/* //タイトル */



#page_top{
  width: 50px;
  height: 50px;
  position: fixed;
  right: 0;
  bottom: 0;
  background: #3f98ef;
  opacity: 0.6;
  border-radius: 50%;
}
#page_top a{
  position: relative;
  display: block;
  width: 50px;
  height: 50px;
  text-decoration: none;
}
#page_top a::before{
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  content: '\f102';
  font-size: 25px;
  color: #fff;
  position: absolute;
  width: 25px;
  height: 25px;
  top: -5px;
  bottom: 0;
  right: 0;
  left: 0;
  margin: auto;
  text-align: center;
}



Resources

.contents{
  display:flex;
}



hr { 
    border: none; /* デフォルトをキャンセル */
    height: 3px; /* 線の高さ */
    background: linear-gradient(90deg, rgba(245,245,245,0.1) 0%,  rgba(0,0,0,1) 50%, rgba(245,245,245,0.1) 100%);
}

.slide ul{
  display:flex;
  overflow-x:scroll;
  margin:0;
  padding:0;
}
.slide li{
  min-width:85%;
  margin:10px;
  padding:0;
  list-style:none;
}

.contain {
  display: flex;
  flex-wrap: wrap;
justify-content: space-between;
}
.column {
  width: 100%;
}

@media (min-width: 1024px) {
  .column {
    width: calc(50% - 16.18px / 2);
  }
}

/* カテゴリー5カラム3カラム */
.categoryitem {
  display: flex;
  flex-wrap: wrap;
  margin-top:24px;
}
.categorycolumn {
  width: 33%;
  margin-bottom:24px;
 /* border: 1px solid #d2d0cf;*/
}
.categorycolumn img{
  width: 90%;
  border-radius: 30px;
}

@media (min-width: 1024px) {
  .categorycolumn {
    width: 20%;
  }
}
/* //カテゴリー5カラム3カラム */

/* 新着商品・作家・窯元 */
.footet-item__body span{
  font-size:14px;
}
.footet-item__body ul{
  font-size:18px;
}
.footer-items div{
  padding:5px;
}
.もっと見る {
  margin: 0 0 0 auto;
  width:185px;
  height:auto;
}

/* //新着商品・作家・窯元 */


.入荷待ち {
  background-color:#197815;
  font-size:12px;
  text-align:center;
  color:#fff;
}

.item-lists img{
  border: 0.15em solid#fff;
}

.wrappercharacter{
display: -webkit-box;
display: flex;
  background-color:#fff;
  margin-bottom:12px;
  margin-top:12px;
}
.yousocharacter{
width:20%;
padding:0vw;
display: -webkit-box;
display: flex;
align-items: center;
justify-content: center;
  margin-bottom:12px;
  margin-top:24px;
}
.yousocharacter img{
      border-radius: 100px;
  border: 1px solid#c3c3c3;
}
@media screen and (min-width: 600px){
.wrappercharacter{
flex-wrap: wrap;
}
}
@media screen and (max-width:599px){
.wrappercharacter{
flex-wrap: nowrap;
overflow-x: scroll;
}
.yousocharacter{
width:100%;
min-width:37.5%;
}
}