/* ===============================
   共通
================================ */

h3{
  font-weight:700;
  margin-top:50px;
}

/* ===============================
   商品メニュー（上のカテゴリボタン）
================================ */
.product-menu{
  background:#f8f8f8;
  padding:15px 0;
  position:sticky;
  top:80px;
  z-index:1000;
  border-bottom:1px solid #e5e5e5;
}

.menu-btn{
  display:inline-block;
  margin:5px 8px;
  padding:10px 20px;
  border-radius:30px;
  background:#f2f2f2;
  color:#333;
  text-decoration:none;
  font-size:14px;
  transition:0.3s;
}

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

.menu-toggle{
  display:none;
  background:#333;
  color:#fff;
  padding:10px;
  cursor:pointer;
}

.title {
  scroll-margin-top: 160px;
}

@media (max-width:768px){

  .menu-toggle{
    display:block;
  }

  .menu-list{
    display:none;
  }

  .menu-list.open{
    display:block;
  }

  .menu-btn{
    display:block;
    width:80%;
    margin:5px auto;
  }

  .title {
    scroll-margin-top: 220px; /* スマホ用（調整） */
  }
}


/* ===============================
   ページタイトル
================================ */
.page-title {
  font-size:28px;
  font-weight:bold;
  border-bottom:3px solid #333;
  padding-bottom:10px;
  margin-bottom:30px;
}

/* ===============================
   セクション
================================ */
.section-gray{
  background:#f7f7f7;
  padding:60px 0;
}

.section-white{
  background:#ffffff;
  padding:60px 0;
}

/* ===============================
   セクションタイトル
================================ */
.title{
  font-size:30px;
  font-weight:700;
  margin-top:80px;
  margin-bottom:15px;
  position:relative;
  padding-left:15px;
}

.title:before{
  content:"";
  position:absolute;
  left:0;
  top:5px;
  width:5px;
  height:28px;
  background:#333;
}

.subtitle{
  color:#666;
  max-width:800px;
  line-height:1.9;
  margin-bottom:40px;
  font-size:15px;
}

/* ===============================
   商品カード
================================ */
.card{
  border:none;
  background:#fff;
  border-radius:10px;
  overflow:hidden;
  transition:0.3s;

  height:100%;
  display:flex;
  flex-direction:column;
}
.card:hover{
  transform:translateY(-10px);
  box-shadow:0 20px 40px rgba(0,0,0,0.12);
}

.card-img-top{
  transition:0.4s;
  width:100%;
  height:200px;
  object-fit:cover;
}

.card:hover .card-img-top{
  transform:scale(1.08);
}

.card-body{
  padding:22px;
  flex-grow:1;
}
.card-title{
  font-weight:700;
  font-size:18px;
  margin-bottom:10px;
}

.card-text{
  font-size:14px;
  color:#555;
  line-height:1.6;
}

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

.card a:hover{
  color:inherit;
}

/* ===============================
   区切り線
================================ */
hr{
  margin:80px 0;
  border:none;
  border-top:1px solid #e5e5e5;
}

/* ===============================
   レスポンシブ（スマホ）
================================ */
@media (max-width:768px){

  .section-gray,
  .section-white{
    padding:40px 0;
  }

  .title{
    font-size:22px;
    margin-top:40px;
  }

  .subtitle{
    font-size:14px;
    margin-bottom:30px;
  }

  .page-title{
    font-size:22px;
  }

  .menu-btn{
    display:block;
    width:80%;
    margin:5px auto;
    text-align:center;
  }

}