@charset "utf-8";

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	list-style-type: none;
	text-decoration: none;
}

html {
	font-size: 16px;
}

/* ＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊
body領域ここから
＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊*/
.outerWrapper {
	width: min(95%, 1200px);
	height: auto;
	margin: 0 auto;
	position: relative;
}

h1 {
	display: inline-box;
	font-family: "Impact", sans-serif;
	font-size: clamp(1.5rem, 1.318rem + 0.91vw, 2rem);
	color: #555;
}

h2 {
	width: 18rem;
	font-family: "Noto Sans JP", "Inpact", Arial, Helvetica, sans-serif;
	font-size: clamp(1.25rem, 1.159rem + 0.45vw, 1.5rem);
	border-left: solid 5px red;
	border-bottom: solid 1px red;
	padding-left: 0.5rem;
	margin-bottom: 1rem;
	text-align: left;
	color: #555;
}

caption {
	font-size: clamp(1.25rem, 1.159rem + 0.45vw, 1.5rem);
	font-weight: bold;
	color: #555;
}

p {
	font-family: "Noto Sans JP", "Impact", Arial, Helvetica, sans-serif,;
	font-size: clamp(0.8rem, 1.333vw, 1rem);
	color: #555;
}

time {
		display: block;
		width: 8rem;
		color: #555;
		border-bottom: solid 1px red;
		margin-bottom: 0.5rem;
		font-family: "Noto Sans JP", sans-serif;
		font-weight: bold;
}
	
/* ＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊
ヘッダー領域＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊*/
.headerContainer {
	width: min(100%, 1200px);
	height: 70px;
	margin: 0 auto;
	display: flex;
	justify-content: space-between;
	background-color: dimgray;
	/* border: solid 1px gray; */
}

.logoNameContainer {
	width: min(50%, 600px);
	height: 70px;
	background-color: dimgray;
	/* border: solid 1px gray; */
}

.logoNameContainer a {
	display: flex;
	justify-content: flex-start;
	align-items: center;
}

.logo {
	display: flex;
	justify-content: center;
	align-items: center;
	width: clamp(40px, 4.166vw, 50px);
	height: clamp(40px, 4.166vw, 50px);
	border-radius: 50%;
	font-family: "Impact",Arial, Helvetica, sans-serif, "Noto Sans JP";
	font-size: clamp(1.125rem, 0.974rem + 0.701vw, 1.5rem);
	background-color:red;
	color: #fff;
	margin: 0 10px;
}

.logo:hover {
	box-shadow: 0 0 20px #fff, inset 0 0 20px #fff, 0 0 0px #fff, 0 0 0px red, 0 0 0px red, 0 0 20px red,0 0 20px red, inset 0 0 20px red;
	background-color: #fff;
	 color: red;
	 text-shadow: 3px 3px 3px rgba(255, 255, 255, 0.4);
}

.companyName h1 {
	width: min(100%, 300px);
	line-height: 70px;
	color: #fff;
	font-family: "Impact",Arial, Helvetica, sans-serif;
	font-size: clamp(2rem, 1.799rem + 0.935vw, 2.5rem);
	letter-spacing: 0.1rem;	
}

.companyName h1:hover {
	/* box-shadow: 0 0 20px #fff, inset 0 0 20px #fff, 0 0 0px #fff, 0 0 0px red, 0 0 0px red, 0 0 20px red,0 0 20px red, inset 0 0 20px red;
	 background-color: #fff;
	 color: red; */
	 color: red;
	 text-shadow: 6px 6px 6px rgba(255, 255, 255, 0.5);
	 border-radius:25%;
}

/* .companyName h1 span {
	color: red;
} */

/* ＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊ ＊＊
ナビゲーション領域＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊*/

/* ＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊
	ナビゲーションメニュー（PC）
＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊　*/
@media (min-width: 769px) {
	.globalNav {
		width: min(50%, 600px);
		height: 70px;
		position: relative;
		display: flex;
		justify-content: flex-end;
		flex-direction: row;
		align-items: center;
	}

	.globalNav ul {
		width: 100%;
		height: 70px;
		display: flex;
		justify-content: end;
		align-items: center;
		background-color: dimgray;
	}

	.globalNav ul li {
		display: inline-block;
		width: 30%;
		height: 40px;
		margin-right: 1.67%;
	}

	.globalNav ul li a {
		background-color: darkgray;
		display: inline-block;
		width: 100%;
		height: 40px;
		text-align: center;
		line-height: 40px;
		font-family: "Impact", Arial, Helvetica, sans-serif;
		font-size: clamp(1rem, 0.950rem + 0.234vw, 1.125rem);
		letter-spacing: 0.03rem;
		color: #fff;
		border: solid 1px gray;
	}

	.globalNav ul li a:hover {
	 box-shadow: 0 0 20px #fff, inset 0 0 20px #fff, 0 0 0px #fff, 0 0 0px red, 0 0 0px red, 0 0 20px red,0 0 20px red, inset 0 0 20px red;
	 color: red;
	 text-shadow: 3px 3px 3px rgba(255, 0, 0, 0.4);
	 border: transparent;
  }
}

/* ＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊
	ナビゲーション/ハンバーガーボタンここから↓
＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊　*/

.nav-btn {
	padding: 0;
	border: none;
	outline: none;
	background: transparent;
	cursor: pointer;
	color: #aaa;
	font-size: 25px;
	position: absolute;
	right: 30px;
	line-height: 70px;
}

.open .nav-btn {
	z-index: 110;
}

.nav-btn .fa-bars {
	display: revert;
}

.open .nav-btn .fa-bars {
	display: none;
}

.nav-btn .batu {
	display: none;
}

.open .nav-btn .batu {
	display: revert;
}

.globalNav ul li a:hover {
	 box-shadow: 0 0 20px #fff, inset 0 0 20px #fff, 0 0 0px #fff, 0 0 0px red, 0 0 0px red, 0 0 20px red,0 0 20px red, inset 0 0 20px red;
	 color: red;
	 text-shadow: 3px 3px 3px rgba(255, 0, 0, 0.4);
	 border-radius: 10%;
	 border: transparent;
  }

@media (min-width: 769px) {
	.nav-btn {
		display: none;
	}
}

/* ＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊
	ナビゲーション/ハンバーガーボタンここまで↑
＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊　*/

/* ＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊
	ナビゲーションメニュー（スマートフォン）
＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊　*/

@media (max-width: 768px) {
	.globalNav {
		position: fixed;
		inset: 0 -100% 0 100%;
		z-index: 100;
		background-color: dimgray;
		color: #fff;
		transition: transform 0.3s;
	}

	.open .globalNav {
		transform: translate(-100%, 0);
	}

	.globalNav ul {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		height: 100%;
		gap: 40px;
	}

	.globalNav ul li a {
		color: #fff;
	}
}

/* ＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊ ＊
ナビゲーション領域ここまで
＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊*/

/* ＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊
メイン領域 カードレイアウトーここから
＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊*/

/*＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊
レスポンシブ対応 main領域SP340px以上650以下（スマホサイズ）ここから　↓*/

@media (min-width: 340px) {
	.itemsWrapper {
		width: min(100%, 1200px);
		height: auto;
		margin: 0 auto;
		text-align: center;
	}

	.outerContainer {
		margin: 0 auto;
		margin-bottom: 20px;
		width: 100%;
		height: auto;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		/* border: solid 1px gray; */
	}

	.innerContainer {
		width: 90%;
		margin-bottom: 20px;
		/* border: solid 1px gray; */
		background-color: rgba(192 192 192 0.8);
		padding: 1rem;
	}

	.imageBox {
		position: relative;
		background-color:rgba(192 192 192 0.8);
		color: #555;
	}

	.itemImage {
		object-fit: cover;
		aspect-ratio: 4 / 3;
		width: 100%;
		height: auto;
		vertical-align: bottom;
	}

	.dummy {
		position: absolute;
		top: 35%;
		left: 50%;
		transform: translate(-50%, -50%);
		font-size: 16px;
		font-weight: bold;
		color: #fff;
		 background: -webkit-radial-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.05));		 
	}

	h2 {
		margin-bottom: 20px;
	}

	.itemDeta {
		color: #333;
	}

	.itemDeta:nth-child(1) {
		padding-top: 0.5rem;
	}

	.itemDeta:nth-child(3) {
		padding-bottom: 0.5rem;
	}

	.itemDetail {
		display: block;
		padding-bottom: 1rem;
	}
}

/*＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊ 
	レスポンシブ対応　main領域PC 651px以上950px以下（タブレット/スマホ横向きサイズ）ここから　↓*/

@media (min-width: 651px) {

	.itemsWrapper {
		width: min(100% 1200px);
		text-align: center;
	}

	.outerContainer {
		margin: 0 auto;
		margin-bottom: 20px;
		width: min(100%, 1200px);
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: flex-start;
		justify-content: space-between;
	}

	/* flex space-betwwnの最終行に疑似要素でcontent:""を追加することで
	flex-itemが追加されたかのような状態を作り出して位置調整（疑似的flex-itemを追加） */
	.outerContainer::after {
		content: "";
		display: block;
		/* width: 250px; */
		width: 30%;
	}

	.innerContainer {
		width: 48%;
		height: auto;
		margin-bottom: 20px;
		box-shadow: 5px 5px 20px rgba(133, 133, 133, 0.5);
	}

	.imageBox {
		position: relative;
	}

	.itemImage {
		object-fit: cover;
		aspect-ratio: 4 / 3;
		width: 100%;
		height: auto;
		vertical-align: bottom;
	}

	.dummy {
		position: absolute;
		top: 35%;
		left: 50%;
		transform: translate(-50%, -50%);
		font-size: 16px;
		font-weight: bold;
		color: #fff;
		 background: -webkit-radial-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.05));		 
	}

	.itemDeta {
		color: #333;
	}

	.itemDeta:nth-child(1) {
		padding-top: 0.5rem;
	}

	.itemDeta:nth-child(3) {
		padding-bottom: 0.5rem;
	}

	.itemDetail {
		display: block;
		padding-bottom: 1rem;
	}
}

/*＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊
レスポンシブ対応 main領域950px以上1200px以下（パソコンサイズ）ここから　↓*/

@media (min-width: 951px) {

	.itemsWrapper {
		width: min(100% 1200px);
		text-align: center;
	}

	.outerContainer {
		margin: 0 auto;
		margin-bottom: 20px;
		width: min(100%, 1200px);
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: flex-start;
		justify-content: space-between;
	}

	/* flex space-betwwnの最終行に疑似要素でcontent:""を追加することで
	flex-itemが追加されたかのような状態を作り出して位置調整（疑似的flex-itemを追加） */
	.outerContainer::after {
		content: "";
		display: block;
		width: 30%;
	}

	.innerContainer {
		width: 30%;
		height: auto;
		margin-bottom: 20px;
		box-shadow: 5px 5px 20px rgba(133, 133, 133, 0.5);
	}

	.imageBox {
		position: relative;
	}

	.dummy {
		position: absolute;
		top: 30%;
		left: 50%;
		transform: translate(-50%, -50%);
		font-size:16px;
		font-weight: bold;
		color: #fff;
		 background: -webkit-radial-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.05));		 
	}

	/* ＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊
レスポンシブレイアウト共通要素ここから　↓*/

	.main h1 {
		display: inline-block;
		margin: 20px auto 20px auto;

	}

	.main h2 {
		display: inline-block;
		margin-bottom: 20px;
	}

	.itemImage {
		object-fit: cover;
		aspect-ratio: 4 / 3;
		width: 100%;
		height: auto;
		vertical-align: bottom;
	}

	.itemDeta {
		display: inline-block;
		text-align: left;
		width: 100%;
		height: auto;
		font-size: clamp(14px, calc(12.235294117647058px + 0.49019607843137253vw), 16px);
		padding-left: 1.5rem;
	}

	.itemDeta:nth-child(1) {
		padding-top: 1rem;
	}

	.itemDeta:nth-last-child {
		padding-bottom: 1rem;
	}

	figcaption p a {
		display: block;
		padding: 1rem 0 1rem 0;
	}

	.innerContainer {
		padding-bottom: 1rem;
	}

	.innerContainer figcaption p .itemDeta span {
		display: inline-block;
		font-weight: bold;
		padding-top: 5px;
	}

	.cartButton {
		width: 100%;
		text-align: left;
		background-color: #fce7c8;
		border: none;
		font-size: clamp(14px, calc(12.235294117647058px + 0.49019607843137253vw), 16px);
		padding-bottom: 1rem;
	}

	.cartButton form select {
		width: 20%;
	}

	.cartButton form input {
		margin-left: 10px;
		width: 50%;
	}
}

/* ＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊
メイン領域 カードレイアウト ここまで　↑
＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊*/

/* ＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊
フッター領域レスポンシブ共通　ここから　↓
＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊*/
.footerContainer {
	display: block;
	margin: 0 auto;
	width: min(100%, 1200px);
	/* height: 300px; */
	height: auto;
	background-color: dimgray;
	border: solid 1px #fff;
	padding-bottom: 50px;
}

.navTermsOuter {
	display: flex;
	justify-content: center;
	flex-direction: row;
}

/* ＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊
フッターナビゲーション　ここから　↓ */
.footerNav {
	width: min(100%, 600px);
	height: 70px;
	display: flex;
	justify-content: flex-start;
	justify-content: space-between;
	flex-direction: flex-start;
	align-items: center;
}

.footerNav ul {
	width: min(100%, 600px);
	height: 70px;
	display: flex;
	justify-content: flex-start;
	justify-content: space-around;
	align-items: center;
	background-color: dimgray;
}

.footerNav ul li {
	display: inline-block;
	width: 30%;
	height: 40px;
	margin-right: 1.67%;
}

/* ブレークポイント600以下でfooterNavの最初のliのabout usが中央寄せにならない原因となった記述。 */
/* .footerNav ul li:last-child {
	margin-right: none;
} */

.footerNav ul li a {
	background-color: darkgray;
	display: inline-block;
	width: 100%;
	height: 40px;
	text-align: center;
	line-height: 40px;
	font-family: "Impact", Arial, Helvetica, sans-serif;
	font-size: clamp(1rem, 0.950rem + 0.234vw, 1.125rem);
	letter-spacing: 0.03rem;
	color: white;
	border: solid 1px gray;
}

.footerNav ul li a:hover {
		box-shadow: 0 0 20px #fff, inset 0 0 20px #fff, 0 0 0px #fff, 0 0 0px red, 0 0 0px red, 0 0 20px red,0 0 20px red, inset 0 0 20px red;
	 	color: red;
	 	text-shadow: 3px 3px 3px rgba(255, 0, 0, 0.4);
		border: transparent;
	}

/* ブレークポイント600以下でfooterNavの最初のliのabout usが中央寄せにならない原因となった記述。 */
/* .footerNav ul li:first-child {
	margin-left: 10px;
} */

/* ＊＊＊フッターナビゲーション　ここまで　↑
＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊ */

/*＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊
フッター部各種条項・コピーライト　ここから↓ */

.termsConditions {
	width: min(100%, 600px);
	height: 70px;
	display: block;
}

/* ＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊
各種条項　ここから　↓　 */
.termsConditions ul {
	width: min(100%, 600px);
	height: 70px;
	display: flex;
	justify-content: flex-end;
	justify-content: space-around;
	align-items: center;
	background-color: dimgray;
}

.termsConditions ul li {
	display: inline-block;
	width: 30%;
	height: 40px;
	margin-right: 1.67%;
}

.termsConditions ul li a {
	background-color: darkgray;
	display: inline-block;
	width: 100%;
	height: 40px;
	text-align: center;
	line-height: 40px;
	font-size: clamp(14px, 1.33vw, 16px);	
	color: #fff;
	border: solid 1px gray;
}

.termsConditions ul li a:hover {
		box-shadow: 0 0 20px #fff, inset 0 0 20px #fff, 0 0 0px #fff, 0 0 0px red, 0 0 0px red, 0 0 20px red,0 0 20px red, inset 0 0 20px red;
	 	color: red;
	 	text-shadow: 3px 3px 3px rgba(255, 0, 0, 0.4);
		border: transparent;
	}

/* 各種条項　ここまで　↑
＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊ */

/* ＊＊＊問い合わせ先＊＊＊ */

.footerContactCopy {
	width: 100%;
	height: auto;
	text-align: center;
	display: block;
	margin-top: 20px;
	font-family: "Noto sans JP", sans-serif;
	color: #fff;
}

.address,
.contact {
	margin: 0 auto;
	text-align: center;
}

.address p,
.contact p {
	font-size: clamp(14px, 1.33vw, 16px);
	color: #fff;
}

/* ＊＊＊コピーライト＊＊＊ */

.copyRight {
	display: block;
	text-align: center;
	font-size: clamp(14px, 1.33vw, 16px);
}

/* ****************************************
タブレットサイズ ブレークポイント 975px以下
******************************************/
/*＊＊＊フッターナビゲーションと各種条項を縦並び中央寄せ＊＊＊ */

@media(max-width: 975px) {

	.navTermsOuter {
		width: min(100%, 600px);
		margin: 0 auto;
		flex-direction: column;
		justify-content: center;
		justify-content: flex-start;
	}

	.navTermsOuter ul {
		justify-content: center;
	}

	.footerNav ul li a:hover {
		box-shadow: 0 0 20px #fff, inset 0 0 20px #fff, 0 0 0px #fff, 0 0 0px red, 0 0 0px red, 0 0 20px red,0 0 20px red, inset 0 0 20px red;
	 	color: red;
	 	text-shadow: 3px 3px 3px rgba(255, 0, 0, 0.4);
		border: transparent;
	}

	/* .footerNav ul li:first-child {
		margin-left: 0;
	} */

	.footerContractCopy p {
		text-align: center;
		color: #fff;
	}

	.contact p {
		text-align: center;
		color: #fff;
	}

	.termsConditions ul li a:hover {
		box-shadow: 0 0 20px #fff, inset 0 0 20px #fff, 0 0 0px #fff, 0 0 0px red, 0 0 0px red, 0 0 20px red,0 0 20px red, inset 0 0 20px red;
	 	color: red;
	 	text-shadow: 3px 3px 3px rgba(255, 0, 0, 0.4);
		border: transparent;
	}
}
/* ****************************************
スマホサイズ ブレークポイント 600px以下
******************************************/

@media(max-width: 600px) {

	/*＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊
		 ヘッダー領域 社名に幅を与えて中央寄せに配置を変更する */

	.logoNameContainer {
		width: min(100%, 300px);
		margin: 0 auto;
	}

	/* ＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊
	フッター領域 
	フッターナブ、各条項、コピーライトを縦並び1列表示にする*/

	.navTermsOuter {
		width: min(100%, 600px);
		height: auto;
		display: block;
		margin-top: 10px;
	}

	.footerContainer {
		width: min(100%, 600px);
		height: auto;
		display: block;
	}

	.footerNav {
		width: min(100%, 600px);
		height: auto;
		display: block;
		margin-inline: auto;
		margin-top: 20px;
	}

	.footerNav ul {
		width: min(100%, 600px);
		/* height: 130px; */
		height: auto;
		display: block;
		margin: 0 auto;
	}

	.footerNav ul li {
		width: min(100%, 300px);
		height: 40px;
		display: block;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 10px;
	}

	.footerNav ul li a {
		width: 100%;
		height: 30px;
		line-height: 30px;
		display: block;
		margin: 0 auto;
	}

	.footerNav ul li a:hover {
		box-shadow: 0 0 20px #fff, inset 0 0 20px #fff, 0 0 0px #fff, 0 0 0px red, 0 0 0px red, 0 0 20px red,0 0 20px red, inset 0 0 20px red;
	 	color: red;
	 	text-shadow: 3px 3px 3px rgba(255, 0, 0, 0.4);
		border: transparent;
	}

	.termsConditions ul {
		width: min(100%, 600px);
		/* height: 130px; */
		height: auto;
		display: block;
		margin-inline: auto;
	}

	.termsConditions ul li {
		width: min(100%, 300px);
		height: 40px;
		display: block;
		margin: 0 auto 10px;
	}

	.termsConditions ul li a {
		width: 100%;
		height: 30px;
		line-height: 30px;
		display: block;
	}

	.termsConditions ul li a:hover {
		box-shadow: 0 0 20px #fff, inset 0 0 20px #fff, 0 0 0px #fff, 0 0 0px red, 0 0 0px red, 0 0 20px red,0 0 20px red, inset 0 0 20px red;
	 	color: red;
	 	text-shadow: 3px 3px 3px rgba(255, 0, 0, 0.4);
		border: transparent;
	}

	.footerContactCopy {
		display: block;
		width: min(100%, 600px);
		height: auto;
		margin-top: 80px;
	}

	.address p {
		text-align: center;
		color: #fff;
	}

	.contact p {
		text-align: center;
		color: #fff;
	}
}