@charset "utf-8";

/*-------------------------
全体setting
-------------------------*/
html {
	font-size: 100%;/*ブラウザのデフォルトの文字サイズが設定した通り正しく反映される*/
}

body {
	position: relative;
	color: #333333;
	font-size: 1rem;
  font-family: 'Yu Gothic', sans-serif;
}

a {
	text-decoration: none;
  color: #333333;
}

a,p {
  font-size: 1.125rem;
}

img {
	max-width: 100%;/*画像が親要素より大きくなるのを防ぐ*/
  }

ul {
	list-style: none;
}

h2, h3 {
  font-family: 'BIZ UDMincho', serif;
  font-weight: normal;
}
.container {
  margin: 0 auto;
	max-width: 980px;
	text-align: center;
}

.inner {
  margin: 0 auto;/*containerより左右40pxずつ小さい枠 */
  max-width: 900px;
  text-align: center;
}

/*-------------------------
ヘッダー
-------------------------*/
#header {
  position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 100%;
  height: 70px;
  background: rgba(255, 255, 255, 0.5);
	z-index: 20;
}

#header .container {
  display: flex;
	justify-content: space-between;
	width: 980px;
	height: 70px;

}

.header_logo {
  width: 230px;
}

.header_logo img {
	display: block;
	height: 70px;
}

.header_nav {
	width: 700px;
	height: 70px;
}

.header_nav ul {
	display: flex;
  justify-content: space-between;
}

.header_nav li {
  display: flex;
  height: 70px;
}

.header_nav li a {
  display: block;
  justify-content: center;
  align-items: center;
  font-size: 1rem;
  height: 70px;
	line-height: 70px;
}

.header_nav li:nth-child(4)::before {
	content: "";
  display: inline-block;
  width: 20px;
  height: 20px;
  background-image: url("../images/mail.svg");
  background-size: contain;/* 画像の縦横比を維持 */
  vertical-align: middle;
	margin-right: 5px;
  margin-top: 25px;
}

.header_nav li:nth-child(5)::before {
	content: "";
  display: inline-block;
  width: 20px;
  height: 20px;
  background-image: url("../images/cart.svg");
  background-size: contain;
  vertical-align: middle;
	margin-right: 5px;
  margin-top: 23px;
}

.header_logo:hover {
  opacity: 0.5;
  transition: 0.5s all;
}

.header_nav li:hover {
  opacity: 0.5;
  transition: 0.5s all;
}

/*-------------------------
メインビジュアル
-------------------------*/
#main_visual {
  margin-bottom: 80px;
  height: 700px;

}

#main_visual img {
  width: 100%;
  height: 700px;
  object-fit: cover;
}

/*-------------------------
メインコピー
-------------------------*/
.main_visual_title {
  position: absolute;
  text-align: center; 
  top: 280px;
  bottom: 0;
  left: 0; 
  right: 0;
  margin: 0;
	z-index: 20;
  height: 100px;
}

.main_visual_title h1 {
  font-family: 'BIZ UDMincho', serif;
	font-size: 3.75rem;
  font-weight: normal;
  color: #ffffff;
}

.main_visual_title span {
	display: block;
  font-family: "Cambria";
	font-weight: normal;
  font-size: 1.875rem;
	line-height: 1.875rem;
}

.main_copy h2 {
  font-size: 1.875rem;
  margin-bottom: 50px;
}

.main_copy p {
  font-size: 1.125rem;
  margin-bottom: 70px;
}

/*-------------------------
商品一覧
-------------------------*/
.product_list {
	width: 100%;
	height: 1500px;
	background-image: url("../images/product_bg.jpg");
	background-size: 100% 100%;
	padding: 60px 0 80px 0;
}

.search {
	height: 45px;
	margin-bottom: 30px;
}

.search ul {
	display: flex;
	align-items: center;
	font-size: 1.125rem;
	border-bottom: 1px solid #333333;
	padding-bottom: 10px;
}

.search li:first-child {
	border: 0.5px solid #333333;
	margin-right: 20px;
	padding: 5px;
}

.search li:not(:first-child) {
	width: 120px;
	height: 30px;
	background-color: #3659a7;
	margin-right: 10px;
}

.search a {
	display: block;
	color: #ffffff;
	text-align: center;
	font-size: 1rem;
	line-height: 30px;
}

.search a:hover {
	color: #3659a7;
	background-color: #ffffff;
	border: 0.5px solid #3659a7;
  transition: 0.5s all;
}

#product_grid {
  display: grid;
  gap: 30px;
  grid-template-columns: repeat(3,1fr);
}

.product_card {
  width: 280px;
  height: 390px;
  background-color: #ffffff;
}

.product_info {
  width:280px;
  height:140px;
  background-color: #ffffff;
	text-align: left;
	font-size: 1.125rem;
	line-height: 1.3;
	padding: 20px 0 10px 20px;
	margin-top: -8px/*謎の隙間調整*/
}

.prodct_info a {
	display: block
}

.product_info a:hover {
	border-bottom: 1px solid #333333;
}

.product_card:hover img{
  opacity: 0.7;
  transition: 0.5s all;
}

.cart {
	margin-top: 15px;
}

.cart::before {
	content: "";
  display: inline-block;
  width: 20px;
  height: 20px;
  background: url("../images/cart.svg") no-repeat;
  background-size: contain;
  margin-right: 8px;
	vertical-align: middle;
}

.page {
  margin-top: 50px;
}

.page p {
text-align: center;
}

/*-------------------------
フッター
-------------------------*/
#footer {
  display: grid;
}

#footer ul {
  display: grid;
  gap: 50px;
  grid-template-columns: repeat(3,1fr);
  text-align: left;
	margin-top: 40px;
}

#footer li:last-child > p {
  margin-bottom: 45px;
}

#footer h2 {
  margin-bottom: 10px;
  padding-bottom: 10px;
  font-size: 1.125rem;
  border-bottom: 1px solid #333333;
}

#footer p {
  font-size: 0.75rem;
}

.footer_btn {
  width: 200px;
  height: 50px;
  border: 1px solid #333333;
  margin: 0 10px 20px auto;
}

.footer_btn a {
	display: block;
	width: 200px;
  height: 50px;
	font-family: 'BIZ UDMincho', serif;
  font-size: 0.75rem;
	text-align: center;
	line-height: 50px;
}

.footer_btn a:hover {
  background-color: #535353;
  color: #ffffff;
  transition: 0.5s all;
}
.sns_icon {
	float: right;
}
.sns_icon a:first-child {
	margin-right: 10px;
}

.footer_copyright {
  height: 100px;
  padding: 20px auto 10px auto;
  background-image: linear-gradient(to bottom, #00E9CC, #3659A7);
}

.footer_logo {
	margin-top: 20px;
}

.footer_logo a {
  display: block;
  text-align: center;
}

.footer_copyright p {
  text-align: center;
  color: #ffffff;
}