@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP&display=swap');
:root{
	--em: #e4007f;
	--lightblue:#a8cde1;
	--blue:#5d9cb8;
	--lightpurple:#bbb3d8;
	--purple:#8f82bc;
	--gold:#dbb400;
}

#detail #middle_cont_left {
	color: #232323;
	font-size: 13px;
	line-height: 21px;
	margin-bottom: 20px;
	box-sizing: border-box;
	font-family:'Hiragino Sans', 'Hiragino Kaku Gothic Pro', 'Noto Sans JP', 'Meiryo', 'MS PGothic', sans-serif;
	letter-spacing: -0.06em;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow: hidden;
	-webkit-font-kerning: normal;
	font-kerning: normal;
	background: #fff url('images/bg_pattern@2x.png') center top repeat;
	background-size:59px 60px;
	padding:30px 0;
}

#detail #middle_cont_left a img {
	border: none;
}

#page-top {
	z-index: 99;
}

#dv_latest_recipe .sq dd.naiyo {
	text-align: justify;
	line-break: strict;
}

#ul_kiji {
	padding: 0 28px;
}

/* ----------------------------------------------------------------------- */
/* 共通 */
/* ----------------------------------------------------------------------- */
/*
橙：#dc5310
土：#a9865f
黄：#fff67f
薄紫：#a2aac6
青緑：#98cac7

*/
.flex {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
}

.wrap {
	flex-wrap: wrap;
}

.caption,
.spec {
	font-size: 9px;
	line-height: 1.5;
	letter-spacing: 0;
	font-feature-settings:'palt';
}

.spec strong {
	display:block;
	white-space:nowrap;
}

.sp,
.sp5 {
	display: none!important;
}

.alignRight {
	text-align: right !important;
	transform-origin: right bottom;
}

.alignCenter {
	text-align: center !important;
}

#detail #middle_cont_left p {
	hanging-punctuation: allow-end;
	line-break: strict;
	font-feature-settings:'palt';
	letter-spacing:0;
}

#detail #middle_cont_left sup {
	font-size: 80%;
	top: -0.3em;
	line-height: 1;
}

#detail #middle_cont_left em {
	color: var(--em);
	font-style: normal;
}
#detail #middle_cont_left em.blue {
	color:#26b7bc;
	font-style:inherit;
}
#detail #middle_cont_left em.green{
	color:#92ab23;
	font-style:inherit;
}
#detail #middle_cont_left em.orange{
	color:#f08300;
	font-style:inherit;
}
#detail #middle_cont_left em.yellow{
	color:#fff33f;
	font-style:inherit;
}
#detail #middle_cont_left em.violet{
	color:#7d4698;
	font-style:inherit;
}
#detail #middle_cont_left .marker {
	/*color: #fff;*/
	color:inherit;
	background:transparent linear-gradient(to bottom,rgba(255,230,127,0) 45%,rgba(255,230,127,1) 55%,rgba(255,230,127,1) 90%,rgba(255,230,127,0) 95%);
	padding:0;
	margin:0;
}
#detail #middle_cont_left .marker_blue {
	/*color: #fff;*/
	color:inherit;
	background:transparent linear-gradient(to bottom,rgba(84,195,241,0) 45%,rgba(84,195,241,.5) 55%,rgba(84,195,241,.5) 90%,rgba(84,195,241,0) 95%);
	padding:0;
	margin:0;
}
#detail #middle_cont_left .marker_pink {
	/*color: #fff;*/
	color:inherit;
	background:transparent linear-gradient(to bottom,rgba(244,180,208,0) 45%,rgba(244,180,208,.5) 55%,rgba(244,180,208,.5) 90%,rgba(244,188,208,0) 95%);
	padding:0;
	margin:0;
}

.serif {
	font-family: 'Hiragino Mincho Pro', 'Noto Serif JP', 'Kozuka Mincho Pro', 'Yu Mincho', serif;
}

.btn_link{
	display:flex;
	align-items:center;
	justify-content:center;
	text-align:center;
	font-size:11px;
	font-weight:500;
	line-height:1.4;
	color:#fff;
	background:#a674b0;
	transition:.2s linear;
	white-space:nowrap;
	padding:8px 15px;
	border-radius:6px;
}
.btn_link:hover{
	color:#fff;
	text-decoration:none;
	filter:brightness(1.2);
}

.box{
	background:white;
	padding:30px 20px;
	margin:0 0 30px;
	border-radius:20px;
}


/* ----------------------------------------------------------------------- */
/* c00 */
/* ----------------------------------------------------------------------- */
#c00 {
	padding:30px;
	margin:0 30px 30px;
	background:white;
	border-radius:20px;
	box-shadow:0 0 6px rgba(0,0,0,.3) inset;
}
#c00_lead{
	font-size:16px;
	line-height:1.75;
	text-align:center;
	font-weight:400;
	margin:0 0 20px;
}

#c00_figure{
	display:grid;
	grid-template:auto / auto;
	margin:0;
	padding:0;
	justify-content:space-between;
}
#c00_title{
	grid-column:span 3;
	grid-row:2;
	margin:10px auto 14px;
}

/* ----------------------------------------------------------------------- */
/* c01 */
/* ----------------------------------------------------------------------- */
#c01 {
	background:white;
	margin:0 30px 60px;
	padding:30px;
	border-radius:20px;
	box-shadow:0 0 6px rgba(0,0,0,.3) inset;
}
#c01 h3{
	display:flex;
	justify-content:space-between;
	align-items:center;
	margin:0 0 30px;
	padding:0 15px;
}
#c01a,#c01b{
	filter:drop-shadow(3px 3px 3px rgba(0,0,0,.2));
}
#c01a{
	margin-bottom:30px;
}
.c01_polygon{
	position:relative;
	display:grid;
	grid-template:auto / 200px 1fr;
	background:white;
	clip-path:polygon(20px 0, 100% 0,100% calc(100% - 20px), calc(100% - 20px) 100%, 0 100%, 0 20px);
}
.c01_polygon h4{
	grid-column:span 2;
	color:white;
	font-size:13px;
	line-height:20px;
	font-weight:600;
	font-family:sans-serif;
	height:20px;
	padding:0 0 0 30px;
	margin:0;
	box-sizing:border-box;
	width:100%;
	clip-path:polygon(0 0, 100% 0,calc(100% - 20px) 100%, 0 100%);
}
#c01a h4{
	background:#a8cde1;
}
#c01b h4{
	background:#bbb3d8;
}
.c01_figure{
	display:flex;
	flex-direction:column;
	align-items:center;
	justify-content:flex-start;
	gap:20px;
	padding-top:15px;
}
.c01_figure>strong{
	color:#727171;
	font-size:15px;
	font-weight:500;
	line-height:1;	
}
#c01a .c01_figure{background-color:#d5e7f2;}
#c01b .c01_figure{background-color:#ddd9ec;}
.c01_wrap{
	font-size:11px;
	line-height:1.5;
	text-align:justify;
	padding:15px;
}
.c01_wrap p:last-of-type{margin:0;}
#c01b .c01_wrap{padding-bottom:50px;}
.c01_sub{
	font-size:13px;
	font-weight:400;
	line-height:1;
	margin:0 0 0.5em;
	letter-spacing:0;
	font-feature-settings:'palt';
}
.c01_sub img{
	display:block;
	margin-bottom:-4px;
}
#c01a .c01_sub{color:#5d9cb8;}
#c01b .c01_sub{color:#8f82bc;}
.c01_sub2{
	font-size:11px;
	line-height:1.5;
	color:#5d9cb8;
	margin:0;
	font-feature-settings:'palt';
	letter-spacing:0;
}
#c01b_effect{
	display:grid;
	grid-template:auto / 82px 1fr;
	font-size:11px;
	font-feature-settings:'palt';
	position:absolute;
	left:16px;
	bottom:16px;
	background:white;
	border:1px solid #777;
	width:calc(100% - 32px);
	margin:0;
}
#c01b_effect dt{
	font-weight:inherit;
	text-align:center;
	border-right:1px solid #777;
	padding:4px 0;
}
#c01b_effect dd{
	text-align:center;
	padding:4px 0;
	white-space:nowrap;
}

/* ----------------------------------------------------------------------- */
/* c02 */
/* ----------------------------------------------------------------------- */
#c02{
	padding:0 30px 60px;
	background:#f7f8f8;
}
#c02 h3{
	text-align:center;
	margin:0 0 20px;
}
#c02 h3 img{
	max-width:100%;
	margin-top:-20px;
}
#c02 h4{
	font-size:21px;
	color:#727171;
	margin:0;
}
#c02a,#c02b{
	padding-left:72px;
}
#c02a{
	display:grid;
	grid-template:auto / 200px 1fr;
	gap:20px;
	margin-bottom:80px;
}
#c02a h4,#c02a_step1,#c02a_step2{grid-column:span 2;}
#c02a h4,#c02b h4{position:relative;}
#c02a h4 img, #c02b h4 img{
	display:block;
	position:absolute;
	left:-75px;
	top:-70px;
}
.c02a_box,.c02b_box{
	position:relative;
	background:white;
	border-radius:14px;
}
.c02a_box{
	border:2px solid var(--lightblue);
	padding:20px 20px 20px 50px;
}
.c02a_box h5{
	color:var(--blue);
	font-size:16px;
	line-height:1.6;
	font-weight:600;
	margin:0 0 0.5em;
}
.c02b_box{
	display:flex;
	justify-content:space-between;
	align-items:center;
	border:2px solid var(--lightpurple);
	padding:10px 20px 10px 50px;
}
.c02b_box h5{
	color:var(--purple);
	font-size:16px;
	line-height:1.6;
	font-weight:600;
	margin:0;
}
.c02_step{
	position:absolute;
	left:-72px;
	top:calc(50% - 53px)
}
#c02a_step1{
	display:flex;
	gap:14px;
	align-items:flex-start;
	font-size:12px;
	line-height:1.5;
}
#c02a_step1_column{
	font-size:11px;
	position:relative;
	background:#ebf6f5;
	padding:10px 120px 10px 10px;
}
#c02a_step1_column h6{
	color:var(--blue);
	font-size:13px;
	line-height:1.5;
	margin:0 0 0.5em;
}
#c02a_step1_column p{margin:0;}
#c02a_step1_fig02{
	position:absolute;
	right:-16px;
	top:-14px;
}
#c02a_step2{display:flex;justify-content:space-between;align-items:center;}
#c02a_step2_fig{margin:-35px 20px -20px auto;}
#c02a_step3{padding-bottom:16px;}
#c02a_step3_fig{margin:0 10px 0 -14px;}
#c02a_column{
	font-size:12px;
	line-height:1.5;
	background:#fef7fa;
	border:1px solid #b19ba5;
	padding:14px 20px 10px 14px;
	border-radius:14px;
}
#c02a_column h5{
	color:var(--gold);
	font-size:14px;
	line-height:1.5;
	font-weight:600;
	margin:0 0 0.5em;
	font-feature-settings:'palt';
}
#c02a_column div{
	position:relative;
	font-size:11px;
	padding-right:58px;
}
#c02a_column div h5{
	font-size:13px;
	padding-bottom:0.3em;
	margin:1em 0 0.5em;
	border-bottom:1px solid #b19ba5;
}
#c02a_column div h5 span{
	display:flex;
	align-items:center;
	justify-content:center;
	font-size:10px;
	line-height:1;
	color:white;
	background:var(--gold);
	width:fit-content;
	border-radius:9px;
	padding:0 6px;
	height:18px;
	margin:0 0 0.5em;
}
#c02a_column div .spec{
	text-align:right;
	margin:0;
}
#c02a_column_fig{
	position:absolute;
	bottom:-6px;
	right:-48px;
}
#c02b{
	display:grid;
	grid-template:auto / 1fr;
	gap:20px;
	margin-bottom:30px;
}
#c02b_step1 figure{
	display:flex;
	flex-direction:column;
	align-items:center;
	gap:6px;
	font-size:10px;
	line-height:1.5;
	width:122px;
}
#c02b_step2{
	font-size:11px;
	line-height:1.5;
	text-align:justify;
	gap:20px;
}
#c02b_step2 h5{
	flex-shrink:0;
}
#c02b_step2 div{
	display:grid;
	grid-template:auto / auto 1fr;
	align-self:flex-start;
	gap:0 8px;
}
#c02b_step2 div p{margin:0;}
#c02b_step2 h6{
	font-size:11px;
	grid-column:span 2;
	width:100%;
	border-radius:9px;
	height:18px;
	display:flex;
	align-items:center;
	justify-content:center;
	color:white;
	background:var(--gold);
	margin:0 0 10px;
	padding:0 10px;
	white-space:nowrap;
}
#c02b_step2_fig01{margin:0 -6px 0 0;}
#c02b_step2_fig02{margin:0 -10px 0 0;}
#c02c_upper{
	align-items:center;
	gap:14px;
	margin-bottom:20px;
}
#c02c_upper h4{
	line-height:1.5;
	padding-left:1em;
	text-indent:-1em;
	margin-bottom:1em;
}
#c02c_upper p{
	text-align:justify;
	padding-left:21px;
	margin:0;
}
#c02c_fig01{
	margin-right:-14px;
	max-width:100%;
}
#c02c_mid{
	align-items:flex-start;
	gap:14px;
	margin:0 0 20px;
}
#c02c_mid h5{
	color:var(--gold);
	font-size:14px;
	font-weight:600;
	white-space:nowrap;
	margin:0;
}
#c02c_mid h5 span{
	display:flex;
	justify-content:center;
	align-items:center;
	width:fit-content;
	color:white;
	font-size:11px;
	line-height:1;
	background:var(--gold);
	padding:4px 8px;
	margin:0 0 1em;
	border-radius:9px;
}
#c02c_mid p{
	font-size:12px;
	text-align:justify;
	line-height:1.5;
	margin:0;
}
#c02c_comparison{
	gap:40px;
	align-items:stretch;
}
.c02c_comp_block{
	position:relative;
	font-size:12px;
	line-height:1.5;
	text-align:justify; 
	background:#e6ebee;
	padding:0 16px 10px;
}
.c02c_comp_block img{
	display:block;
	margin:0 auto 6px;
}
.c02c_comp_block h6{
	color:white;
	font-size:12px;
	line-height:1;
	font-weight:500;
	letter-spacing:0.2em;
	background:#8aa3d4;
	text-align:center;
	margin:0 -16px 6px;
	padding:4px 0;
}
.c02c_comp_block p{margin:0;}
.c02c_comp_block:last-of-type{
	font-size:11px;
}
.c02c_comp_block .caption{
	position:absolute;
	text-align:right;
	right:0;
	bottom:-20px;
}

/* ----------------------------------------------------------------------- */
/* retina */
/* ----------------------------------------------------------------------- */
@media (-webkit-min-device-pixel-ratio:2) and (min-width:641px),
(min-resolution:2dppx) and (min-width:641px) {}

/* ----------------------------------------------------------------------- */
/* iPad */
/* ----------------------------------------------------------------------- */
@media only screen and (max-width:1024px) {}

/* ----------------------------------------------------------------------- */
/* iPhone */
/* ----------------------------------------------------------------------- */
@media only screen and (max-width:640px) {
	.flex {
		flex-wrap: wrap;
	}

	.caption,
	.spec {
		transform: scale(1);
		font-size: 9px;
		line-height: 13px;
		letter-spacing: -0.05em;
	}
	.btn_link{font-size:14px;margin:10px 0;}

	#detail #middle_cont_left {
		padding:0;
	}
	#c00{margin:20px 0;padding:20px 15px 15px;border-radius:0;box-shadow:none;}
	#c00_lead{font-size:14px;line-height:1.7;padding:0;text-align:justify;margin:0;}
	#c00_figure{grid-template:auto / 1fr 1fr;gap:5px;margin:0;}
	#c00_figure img{max-width:100%;}
	#c00_title{grid-column:span 2;grid-row:1;margin-bottom:6px;}
	#c00_title img{max-width:100%;}

	#c01{margin:0 10px 30px;padding:20px 15px 15px;}
	#c01 h3{margin-bottom:30px;flex-direction:column;gap:20px;}
	.c01_polygon{grid-template:auto / 1fr;}
	.c01_polygon h4{grid-column:1;clip-path:none;}
	.c01_figure{padding:15px 0;}
	.c01_sub{line-height:1.5;margin-bottom:0.3em;}
	#c01b .c01_wrap{padding-bottom:0;}
	#c01b_effect{position:static;display:block;width:auto;margin:15px 15px 20px;}
	#c01b_effect dt{border-right:none;border-bottom:1px solid #777;}
	#c01b_effect dd{white-space:revert;}

	#c02{padding:0 15px 30px;}
	#c02 h3 img{margin-left:-10px;}
	#c02a{grid-template:auto / 1fr;}
	#c02a,#c02b{padding:0;margin-bottom:30px;}
	#c02a h4,#c02a_step1,#c02a_step2{grid-column:1;}
	#c02a h4, #c02b h4{position:static;display:flex;justify-content:space-between;align-items:center;font-size:18px;line-height:1.3;text-indent:-1em;padding-left:1em;margin-top:0;margin-bottom:-20px;}
	#c02a h4 img, #c02b h4 img{position:static;margin:0;}
	.c02a_box,.c02b_box{padding:40px 15px 15px;margin-top:20px;}
	.c02_step{height:70px;left:calc(50% - 35px);top:-40px;}
	.c02b_box h5{margin-bottom:0.5em;}
	#c02a_step1,#c02a_step2{flex-direction:column;align-items:center;}
	#c02a_step1_fig01{margin-right:-25px;}
	#c02a_step2_fig{margin:0 auto;max-width:100%;}
	#c02a_step3{display:flex;flex-direction:column;align-items:center;}
	#c02a_step3_fig{margin:0 -70px 0 0;}
	#c02a_column div{padding-right:64px;}
	#c02a_column_fig{right:-30px;bottom:-8px;width:90px;}
	#c02b_step1{flex-direction:column;}
	#c02b_step1 figure{flex-direction:row;width:auto;gap:10px;}
	#c02b_step1_fig02{margin-right:-46px;}
	#c02b_step2{flex-direction:column;gap:10px;}
	#c02c_upper p{padding:0;}
	#c02c_mid h5{white-space:revert;}
	#c02c_comparison img{max-width:100%;}
	
	.sp {
		display: revert !important;
	}
	.nosp {
		display: none !important;
	}
}

@media only screen and (max-width:320px) {
	.sp5 {
		display:inherit!important;
	}

	#detail #middle_cont_left {
		font-size: 12px;
		line-height: 1.5;
		width: 95vw;
		padding:5px;
	}
	#c00 {padding-bottom:120px;}
	#c00 p{
		font-size:14px;line-height:1.6;
	}
}

/* ----------------------------------------------------------------------- */
/* Android4 Legacy */
/* ----------------------------------------------------------------------- */