@charset "UTF-8";

/* ====================================
 共通スタイル
 ==================================== */
:root {
	--color_theme: #249696;
	--color_beige: #EFE3D3;
}

main {
	background: url(./images/bg_grid.png) repeat;
	background-size: 12px;
}

.main-visual {
	max-width: 1400px;
	margin-inline: auto;
}

.main_copy {
	margin-block: 15rem 0;
	text-align: center;
}

.main_copy p {
	line-height: 2;
	font-size: 2rem;
	font-weight: 500;
}

.main_copy p em {
	color: var(--color_theme);
	font-size: 2.4rem;
}

/* ポイント */

.point_box {
	margin-block: 15rem;
}

.point_box .point_box_ttl h3 {
	font-size: 4rem;
	font-weight: 700;
	text-align: center;
	border: 1px solid #CCB18D;
	background: #fff;
	color: var(--color_theme);
	box-shadow: 7px 7px 0px #EFE3D3;
	padding-block: .3em;
}

.point_box .point_box_ttl span {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
	font-weight: 700;
	font-size: 2.4rem;
}
.point_box .point_box_ttl span::before {
  content: "";
  width: 30px;
  height: 2px;
  transform: rotate(60deg);
  box-sizing: border-box;
  background-color: #333333;
}
.point_box .point_box_ttl span::after {
  content: "";
  width: 30px;
  height: 2px;
  transform: rotate(-60deg);
  box-sizing: border-box;
  background-color: #333333;
}

.point_box .point_box_ttl small {
	display: block;
	margin-block-start: 3rem;
	font-size: 1.2rem;
	text-align: right;
}


.point_box .box_2col {
	margin-block: 8rem 5rem;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0 5%;
}

.point_box .box_2col h4 {
	padding-block: .4em;
	margin-block-end: 1.5em;
	border: 1px solid #707070;
	font-size: 2.2rem;
	text-align: center;
	font-weight: 700;
}

.point_box .box_2col h4 em {
	display: inline-block;
	margin-inline: .2em;
	color: var(--color_theme);
	font-size: 2.5rem;
}

.point_box .box_2col p {
	margin-block-start: 1em;
	text-align: center;
	font-size: 2.2rem;
}

.point_box .box_2col p em {
	display: inline-block;
	padding-inline: .1em;
	background-image: linear-gradient(0deg, #fbe425 0.5em, transparent 0.5em);
}

.graph_caption {
	text-align: right;
}

.graph_caption ul li {
	display: inline-block;
	margin-inline-start: 1em;
	font-weight: 500;
	color: #535353;
}

.graph_caption ul li::before {
	content: "";
	display: inline-block;
	width: 1em;
	height: 1em;
	margin: 0 5px -2px 0;
	background: #ccc;
}

.graph_caption ul li:nth-of-type(1)::before { background-color: #007d7e; }
.graph_caption ul li:nth-of-type(2)::before { background-color: #2AAAAA; }
.graph_caption ul li:nth-of-type(3)::before { background-color: #BEBEBE; }
.graph_caption ul li:nth-of-type(4)::before { background-color: #D2D2D2; }
.graph_caption ul li:nth-of-type(5)::before { background-color: #E6E6E6; }

.graph_caption p {
	font-size: 1.2rem;
	margin-block-start: 1em;
}

.monitor_voice {
	position: relative;
	margin-block: 6em;
	padding-block: 4rem 2rem;
	padding-inline: 5%;
	background: var(--color_beige);
	border-radius: 20px;
}

.monitor_voice h4 {
	position: absolute;
	top: -30px;
	left: 50%;
	transform: translateX(-50%);
	width: 40%;
	min-width: 18em;
	background: #000;
	color: #fff;
	height: 60px;
	line-height: 60px;
	border-radius: 30px;
	padding-inline: 1em;
	font-size: 2.5rem;
	text-align: center;
}

.monitor_voice_box {
	margin-block: 5rem;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 30px 5%;
}

.monitor_voice_box div {
	display: flex;
  justify-content: center;
  align-items: center;
	border-radius: 20px;
	background: #fff;
	padding: 2em;
}

.monitor_voice_box div img {
	width: 8.5rem;
	aspect-ratio: 1/1;
	margin-inline-end: 2em;
}

.monitor_voice_box div p {
	line-height: 1.8;
}

.monitor_voice_box div p em {
	color: var(--color_theme);
}

.monitor_voice_box div small {
	display: block;
}

/* こんな方におすすめ */

.with_recommend .box_3col {
	margin-block: 8rem 0;
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
}

.with_recommend .box_3col > div {
	display: grid;
  grid-template-rows: subgrid;
  grid-row: span 3;
	padding-inline: 5%;
}

.with_recommend .box_3col > div:nth-of-type(n+2) {
	border-left: 1px dashed #959595;
}

.with_recommend .box_3col > div h4 {
	text-align: center;
	font-size: 1.6rem;
}

.with_recommend .box_3col > div h4 em {
	display: inline-block;
	padding-inline: .1em;
	background-image: linear-gradient(0deg, #fbe425 0.4em, transparent 0.4em);
	font-size: 1.8rem;
	font-weight: 700;
	color: var(--color_theme);
}

.with_recommend .box_3col > div img {
	margin-block: 1em;
}

/* Withシリーズを使ってこんなメニューも！ */

.with_menu > p {
	text-align: center;
	margin-block: 5rem;
	font-size: 1.8rem;
}

.with_menu > p small {
	display: block;
	margin-block-start: .5em;
	font-size: 1.4rem;
}

.with_menu .box_3col {
	margin-block: 5rem 8rem;
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	gap: 50px 5%;
}

.with_menu .box_3col > div p {
	margin-block-start: 1em;
}

.with_menu .box_3col > div p small {
	display: block;
}


/* ボタン・アローつき */

.link_btn {
	margin-block: 5rem;
	text-align: center;
}

.link_btn .link_btn_hotcookbu {
	margin-block-end: 2rem;
}

.link_btn .link_btn_hotcookbu a {
	display: grid;
	text-align: center;
	grid-column-gap: .5em;
	inline-size: fit-content;
	block-size: fit-content;
	align-items: center;
	border-radius: 5px;
	padding: .5em 1.5em;
	margin-inline: auto;
	font-weight: 400;
	border: 1px solid #ff0000;
	background: #fff6c7;
	transition: all .2s;
}

.link_btn .link_btn_hotcookbu a span {
	display: block;
	margin-block-end: .2em;
	font-size: 1.2rem;
}

.link_btn .link_btn_hotcookbu a img {
	width: 250px;
}


.link_btn svg {
	inline-size: 0.6em;
	block-size: 1em;
	margin-inline-end: .2em;
}


/* 商品ラインアップ */

.products_lineup {
	padding-block: 8rem 5rem;
	background: #E4CFB2;
	text-align: center;
}

.products_lineup .base-width > p {
	font-size: 3.5rem;
	font-weight: 700
}

.products_lineup p small {
	display: block;
	font-size: 3rem;
}

.products_lineup .box_2col {
	margin-block: 5rem;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0 5%;
}

.products_lineup .box_2col > div {
	padding-block: 3rem;
	padding-inline: 5%;
	background: #fff;
	border-radius: 2rem;
}

.products_lineup .box_2col > div img {
	width: 20rem;
	max-width: 45%;
}

.products_lineup .box_2col > div p {
	font-size: 1.9rem;
	line-height: 1.2;
	font-weight: 700;
}

.products_lineup .box_2col > div p em {
	font-size: 3rem;
}

.products_lineup .box_2col .products_feature {
	display: grid;
	grid-template-columns: auto auto;
	gap: 1rem;
}

.products_lineup .box_2col .products_feature li {
	padding: .5rem;
	border-radius: .5rem;
	background: var(--color_theme);
	color: #fff;
}

.products_lineup .box_2col .products_feature li.bg_gray {
	background: #959595;
}

.products_lineup .box_2col .products_link {
	margin-block: 3rem 0;
}

.products_lineup .box_2col .products_link li {
	display: inline-block;
	margin-inline: .5rem;
	margin-block: .5rem;
}

.products_lineup .box_2col .products_link li a {
	display: grid;
	grid-template-columns: 1fr auto;
	grid-column-gap: .5em;
	inline-size: fit-content;
	block-size: fit-content;
	align-items: center;
	padding: .2em 1em;
	margin-inline: auto;
	font-weight: 700;
	border: 1px solid #000;
	transition: all .2s;
}

.products_lineup .box_2col .products_link li svg {
	inline-size: 0.6em;
	block-size: 1em;
	fill: #000;
}


/* ==========================================
	ホバー、マウスポインタがサポートされている環境
=========================================== */
@media (hover: hover) and (pointer: fine) {

	.link_btn a:hover {
		background: #fff;
		text-decoration: none;
	}

	.link_txt a:hover {
		text-decoration: underline;
	}
	
	.link_btn a:hover svg {
		fill: #000;
	}

	.products_lineup .box_2col .products_link li a:hover {
		background: #000;
		color: #fff;
		text-decoration: none;
	}

	.products_lineup .box_2col .products_link li a:hover  svg {
		fill: #fff;
	}

}

/* ====================================
	スマートフォン専用スタイル
===================================== */
@media screen and (width <768px) {

	.disp_pc { display: none; }
	.disp_sp { display: block; }

	.main_copy {
		margin-block: 5rem 0;
	}

	.main_copy p {
		font-size: 1.4rem;
	}

	.main_copy p em {
		font-size: 1.4rem;
	}

	/* ポイント */

	.point_box {
		margin-block: 5rem;
	}

	.point_box .point_box_ttl h3 {
		font-size: 2rem;
	}

	.point_box .point_box_ttl span {
		font-size: 1.8rem;
	}

	.point_box .point_box_ttl small {
		text-align: left;
		margin-block-start: 2rem;
	}


	.point_box .box_2col {
		margin-block: 5rem 3rem;
		display: block;
	}

	.point_box .box_2col > div:nth-of-type(2) {
		margin-block-start: 5rem;
	}

	.point_box .box_2col h4 {
		padding-block: .2em;
		margin-block-end: 1em;
		font-size: 1.5rem;
	}

	.point_box .box_2col h4 em {
		margin-inline: .1em;
		font-size: 1.5rem;
	}

	.point_box .box_2col p {
		font-size: 1.5rem;
	}

	.point_box .box_2col p em {
	}

	.graph_caption {
		text-align: center;
	}

	.graph_caption ul li {
		margin-inline-start: .5em;
		font-size: 1.2rem;
	}

	.graph_caption ul li::before {
		margin: 0 3px -2px 0;
	}

	.graph_caption p {
		text-align: left;
		margin-block-start: 1em;
	}

	.monitor_voice {
		margin-block: 5em;
		padding-block: 2rem 1rem;
		padding-inline: 5%;
		border-radius: 10px;
	}

	.monitor_voice h4 {
		top: -20px;
		height: 40px;
		line-height: 40px;
		border-radius: 20px;
		padding-inline: 1em;
		font-size: 1.5rem;
	}

	.monitor_voice_box {
		margin-block: 2rem;
		display: block;
	}

	.monitor_voice_box div {
		margin-block: 1em;
		border-radius: 10px;
		padding: 1em;
	}

	.monitor_voice_box div img {
		width: 6rem;
		margin-inline-end: 1em;
	}

	.monitor_voice_box div p {
		line-height: 1.6;
		font-size: 1.3rem;
	}

	.monitor_voice_box div p em {
		color: var(--color_theme);
	}

	.monitor_voice_box div small {
		display: block;
	}

	/* こんな方におすすめ */

	.with_recommend .box_3col {
		margin-block: 0;
		display: block;
	}

	.with_recommend .box_3col > div {
		padding-inline: 0;
		padding-block: 3rem;
	}

	.with_recommend .box_3col > div:nth-of-type(n+2) {
		border-left: none;
		border-top: 1px dashed #959595;
	}

	.with_recommend .box_3col > div h4 {
		font-size: 1.8rem;
	}

	.with_recommend .box_3col > div h4 em {
		font-size: 1.7rem;
	}

	.with_recommend .box_3col > div img {
		margin-block: .5em;
	}

	/* Withシリーズを使ってこんなメニューも！ */

	.with_menu > p {
		text-align: left;
		margin-block: 3em;
		font-size: 1.5rem;
	}

	.with_menu > p small {
		margin-block-start: .5em;
		font-size: 1.2rem;
	}

	.with_menu .box_3col {
		margin-block: 3rem 5rem;
		grid-template-columns: 1fr 1fr;
		gap: 30px 5%;
	}

	.with_menu .box_3col > div p {
		margin-block-start: .5em;
		font-size: 1.4rem;
	}

	/* ボタン・アローつき */
	.link_btn a {
		width: 100%;
		grid-column-gap: .3em;
		padding: .4em 1em;
	}

	/* 商品ラインアップ */

	.products_lineup {
		padding-block: 3rem;
	}

	.products_lineup .base-width > p {
		font-size: 1.7rem;
	}

	.products_lineup p small {
		font-size: 1.5rem;
	}

	.products_lineup .box_2col {
		margin-block: 3rem;
		display: block;
	}

	.products_lineup .box_2col > div {
		padding-block: 3rem;
		padding-inline: 5%;
		margin-block-end: 3rem;
		border-radius: 1rem;
	}

	.products_lineup .box_2col > div img {
		width: 15rem;
		max-width: 40%;
	}

	.products_lineup .box_2col > div p {
		font-size: 1.3rem;
	}

	.products_lineup .box_2col > div p em {
		font-size: 2rem;
	}

	.products_lineup .box_2col .products_feature {
		display: block;
	}

	.products_lineup .box_2col .products_feature li {
		padding: .2rem;
		margin-block-end: .5rem;
		font-size: 1.4rem;
	}

	.products_lineup .box_2col .products_link {
		margin-block: 2rem 0;
	}

	.products_lineup .box_2col .products_link li {
		display: block;
		width: 100%;
		margin-inline: 0;
		margin-block-end: .5em;
	}

	.products_lineup .box_2col .products_link li a {
		grid-template-columns: auto 1fr;
		inline-size: 100%;
	}

}

/* ====================================
	PC&タブレット専用スタイル
===================================== */
@media print,
screen and (width >=768px) {
	.disp_pc { display: block; }
	.disp_sp { display: none; }
}

/* ====================================
	タブレット専用スタイル
===================================== */
@media print,
screen and (768px <=width <1024px) {

}