/* 黎ミン */
#title .lead,
#qa-finish,
#method h4,
#advice12 .head h2 {
	font-family: 'Reimin Y20 Regular';
	letter-spacing: -0.05em;
	-ms-transform: rotate(0.001deg);
}

/* UD新ゴ */
#qa > div h2 span.a,
#qa-3reason,
#advice .box h5,
#advice12 .entry p {
	font-family: 'UD Shin Go Regular';
	-ms-transform: rotate(0.001deg);
}

/* ボーダー */
#title {
	border-bottom: 0.5rem rgba(0,0,0,0.04) solid;
}

	html.PC main {
		padding-bottom: 40px;
	}
	html.PC main p {
		font-size: 90%;
	}

		html.SP main {
			padding-bottom: 2rem;
		}
		html.SP main p {
			font-size: 90%;
		}

/*==================== タイトル ====================*/
#title .lead {
	color: #666666;
}
#title .lead strong {
	color: #e03f00;
}

	/* override */
	html.PC section#title {
		padding-top: 20px;
		padding-bottom: 0;
	}
	html.PC #title > div {
		position: relative;
		width: 850px;
		height: 320px;
		margin: 0 auto;
	}
	html.PC #title h1 {
		margin: 0;
	}
	html.PC #title h1 span {
		display: block;
		position: absolute;
	}
	html.PC #title h1 span.text {
		left: 0;
		top: 0;
		width: 616px;
	}
	html.PC #title h1 span.image {
		right: 0;
		bottom: 0;
		width: 206px;
	}
	html.PC #title .lead {
		position: absolute;
		left: 0;
		top: 225px;
		width: 616px;
	}
	html.PC #title .lead p {
		margin: 0;
		text-align: center;
		font-size: 130%;
	}

		html.SP #title {
		}
		html.SP #title h1 {
			position: relative;
			margin: 0;
		}
		html.SP #title h1 span {
			display: block;
		}
		html.SP #title h1 span.text {
			width: 82%;
		}
		html.SP #title h1 span.image {
			position: absolute;
			right: -3%;
			top: 0;
			width: 20%;
		}
		html.SP #title .lead p {
			margin: 1em 0 0;
			padding: 0 0.75em;
			font-size: 100%;
			line-height: 1.4;
		}
		@media all and (max-width: 320px) {
			html.SP #title .lead p {
				font-size: 90%;
			}
		}

/*==================== Q&A ====================*/
#qa > div h2 span.a {
	color: #e03100;
	line-height: 1.4;
}

	html.PC #qa > div {
		position: relative;
	}
	html.PC #qa > div h2 span {
		display: block;
	}
	html.PC #qa > div h2 span.q {
		width: 405px;
	}
	html.PC #qa > div h2 span.a {
		position: relative;
		font-size: 18px;
		margin-top: 0.25em;
		padding-left: 78px;
	}
	html.PC #qa > div h2 span.a img {
		position: absolute;
		left: 0;
		top: 0;
		width: 70px;
	}
	html.PC #qa > div:nth-of-type(1) h2 span.a {
		line-height: 42px;
		vertical-align: bottom;
	}
	html.PC #qa > div:nth-of-type(2) h2 span.a {
		margin-top: 0.5em;
	}
	html.PC #qa > div:nth-of-type(2) h2 span.a img {
		top: 50%;
		transform: translate(0, -50%);
	}
	html.PC #qa > div .text {
		width: 455px;
		margin-left: 25px;
	}

		html.SP #qa > div h2 {
			margin: 0;
			font-size: 100%;
		}
		html.SP #qa > div h2 span {
			display: block;
		}
		html.SP #qa > div h2 span.q {
			width: 90%;
			margin: 0 auto;
			transform: translate(-1.5rem, 0);
		}
		html.SP #qa > div h2 span.a {
			position: relative;
			margin-top: 0.5em;
			padding-left: 3.25em;
		}
		html.SP #qa > div h2 span.a img {
			position: absolute;
			left: 0;
			top: 50%;
			width: 3em;
			transform: translate(0, -50%);
		}
		html.SP #qa > div h2 span.a br {
			display: none;
		}

			@media all and (max-width: 320px) {
				html.SP #qa > div h2 {
					font-size: 90%;
				}
			}

/* グラフ */
	html.PC #qa > div .figure {
		position: absolute;
		right: 0;
		top: 0;
		width: 450px;
	}
	html.PC #qa > div .figure p {
		margin: 0;
	}
	html.PC #qa > div:nth-of-type(2) .figure {
		top: 90px;
	}

/* 3大原因 */
#qa-3reason {
	border: 3px solid rgba(0,0,0,0.2);
	border-radius: 20px;
}
#qa-3reason h3 {
	margin: 0 auto;
	transform: translate(0, -50%);
}
#qa-3reason ol {
	margin: -1em 0 1em;
}
#qa-3reason li {
	line-height: 1.4;
	margin-top: 0.5em;
}

	html.PC #qa-3reason {
		margin-top: 2rem;
	}
	html.PC #qa-3reason h3 {
		width: 180px;
	}
	html.PC #qa-3reason ol {
		font-size: 90%;
	}

		html.SP #qa-3reason {
			margin-top: 2rem;
			padding: 0 0.5em 0.5em 0;
		}
		html.SP #qa-3reason h3 {
			width: 50%;
		}
		html.SP #qa-3reason ol {
			font-size: 90%;
		}

			@media all and (max-width: 320px) {
				html.SP #qa-3reason ol {
					font-size: 75%;
					padding-left: 2.5em;
				}
			}

/* オチ */
#qa-finish {
}

	html.PC #qa-finish {
		width: 794px;
		display: table;
		table-layout: fixed;
		margin: 40px auto 0;
	}
	html.PC #qa-finish > * {
		display: table-cell;
		vertical-align: middle;
	}
	html.PC #qa-finish h2 {
		font-size: 28px;
		line-height: 1.4;
	}
	html.PC #qa-finish .image {
		width :274px;
	}

		html.SP #qa-finish h2 {
			font-size: 120%;
			text-align: center;
		}
		html.SP #qa-finish .image {
			width: 60%;
			margin: 0 auto;
		}

			@media all and (max-width: 320px) {
				html.SP #qa-finish h2 {
					font-size: 115%;
				}
			}

/*==================== メニュー ====================*/

	html.PC #menu {
		margin-top: 50px;
	}

/* 見出し */
#menu h2 {
	width: 100%;
	background: url(/src/images/special/metabo/menu_title_back.png) no-repeat center center;
	background-size: 100% 100%;
}
	html.PC #menu h2 {
		height: 124px;
		text-align: center;
	}
	html.PC #menu h2 img {
		width: auto;
		height: 100%;
	}

		html.SP #menu h2 {
			text-align: center;
		}
		html.SP #menu h2 img {
			width: 95%;
		}

section.menu:nth-of-type(1){
	border-bottom: 0.5rem #ffdd00 solid;
}

	html.PC #menu1,
	html.PC #menu2 {
		width: 807px;
		margin: 0 auto;
	}

/* head */
	html.PC .menu .head {
		min-height: 280px;
	}
	html.PC .menu .head h3 {
		position: relative;
		width: 807px;
	}
	html.PC .menu .head h3 span.image {
		display: block;
		position: absolute;
		right: 0;
		top: -35px;
		width: 300px;
	}
	html.PC #menu2 .head {
		margin-top: 50px;
	}
		html.SP .menu .head h3 {
			margin: 0;
		}
		html.SP .menu .head h3 span.text {
			display: block;
			overflow: hidden;
			max-width: 100%;
		}
		html.SP .menu .head h3 span.text img {
			max-width: none;
			width: 150%;
		}
		html.SP .menu .head h3 span.image {
			display: block;
			float: right;
			width: 45%;
			margin: -1.25rem 0 0 0.5em;
		}

/* entrybtn */
	html.PC #menu1 .entrybtn img {
		width: 533px;
	}
	html.PC #menu2 .entrybtn img {
		width: 652px;
	}
	html.PC .menu .head p {
		width: 472px;
		font-size: 90%;
		line-height: 1.8;
	}

/*========== メソッド ==========*/
#method {
}

	#method h4 {
		color: #ff128d;
		line-height: 1.4;
	}
	#method h4 span {
		display: block;
		color: #007eed;
		font-size: 60%;
	}

		html.PC #method {
			margin-top: 40px;
		}
		html.PC #method > div.text {
		}
		html.PC #method > div.figure {
			width: 75%;
			margin: 25px auto 0;
			transform: translate(5%, 0);
		}
		html.PC #method > div.figure p {
			margin: 0;
		}
		html.PC #method h4 {
			margin: 0;
			font-size: 160%;
		}
		html.PC #method h4 br {
			display: none;
		}

			html.SP #method {
				margin-top: 2rem;
			}
			html.SP #method h4 {
				font-size: 120%;
				margin: 0;
			}
			html.SP #method .text p {
				margin: 0.5em 0 0;
			}
			html.SP #method .figure {
				/*
				width: 70%;
				margin: 0 auto;
				-webkit-transform: translate(10%, 0);
				transform: translate(10%, 0);
				*/
			}

/*========== アドバイス ==========*/
#advice .box {
	border: 3px solid rgba(0,0,0,0.2);
	border-radius: 20px;
}
#advice .box h5 {
	color: #007eed;
}

	html.PC #advice {
		margin-top: 40px;
	}
	html.PC #advice.box {
		display: table;
		table-layout: fixed;
		line-height: 1.4;
	}
	html.PC #advice .box > * {
		display: table-cell;
		padding: 15px;
	}
	html.PC #advice .box > *:not(:last-child){
		background: url(/src/images/special/metabo/menu2_advice_border.png) no-repeat right center;
		background-size: auto 90%;
		padding-right: 20px;
	}
	html.PC #advice .box h4 {
		vertical-align: middle;
	}
	html.PC #advice .box h4 img {
		max-width: none;
		width: 136px;
	}
	html.PC #advice .box h5 {
		font-size: 100%;
		margin: 0;
	}
	html.PC #advice .box p {
		margin: 0.75em 0 0;
	}
	html.PC #advice .note p {
		margin: 0.5em 0 0;
		font-size: 80%;
		text-align: right;
	}

		html.SP #advice .box {
			margin-top: 5rem;
			padding: 0 0.8rem 0.8rem;
		}
		html.SP #advice h4 {
			margin: 0 0 -3rem;
			-webkit-transform: translate(0, -50%);
			transform: translate(0, -50%);
			text-align: center;
		}
		html.SP #advice h4 img {
			width: auto;
			height: 7rem;
		}
		html.SP #advice .box > div {
			padding: 0.75em 0;
			border-top: 2px dashed rgba(0,0,0,0.2);
		}
		html.SP #advice h5 {
			margin: 0;
			font-size: 100%;
		}
		html.SP #advice p {
			margin: 0.5em 0 0;
		}

/*========== セミナー ==========*/
#seminar {
	background-color: #ffe3f4;
	color: #ff128d;
}

	html.PC #seminar {
		margin-top: 40px;
		-ms-transform: rotate(0.001deg);
	}
	html.PC #seminar {
		text-align: center;
		padding:  0.5em;
		margin-bottom: 40px;
	}
	html.PC #seminar h4 {
		margin: 0;
	}

		html.SP #seminar {
			margin: 2rem 0;
			padding: 0.5em;
		}
		html.SP #seminar h4 {
			margin: 0;
			font-size: 90%;
		}
		html.SP #seminar h4 br {
			display: none;
		}

/*==================== 12の食アドバイス ====================*/
#advice12 {
	background-color: #ffdd00;
}
#advice12 .head h2 strong {
	font-size: 120%;
}
#advice12 .head h2 strong span {
	font-size: 120%;
	border-bottom: 6px solid #e03100;
}

	html.PC #advice12 {
		margin-top: 50px;
	}
	html.PC #advice12 > div {
		width: 706px;
		margin: 15px auto;
	}
	html.PC #advice12 .head {
		display: table;
		table-layout: fixed;
		width: 100%;
	}
	html.PC #advice12 .head > * {
		display: table-cell;
		vertical-align: middle;
	}
	html.PC #advice12 .head h2 {
		font-size: 135%;
	}
	html.PC #advice12 .head .image {
		width: 207px;
	}

		html.SP #advice12 .head h2 {
			font-size: 100%;
			text-align: center;
		}
		html.SP #advice12 .head .image {
			width: 50%;
			margin: 0 auto;
		}

			@media all and (max-width: 320px) {
				html.SP #advice12 .head h2 br:not(:nth-of-type(3)) {
					display: none;
				}
			}

#advice12 .entry p {
	color: #e03100;
}

	html.PC #advice12 .entry {
		margin-top: 30px;
	}
	html.PC #advice12 .entry p {
		text-align: center;
		font-size: 100%;
		margin: 0;
	}
	html.PC #advice12 .entry h3 {
		margin: 10px 0 0;
	}

		html.SP #advice12 .entry p br {
			display: none;
		}
		html.SP #advice12 .entry h3 {
			margin-tpo: 0.5em;
		}
		@media all and (max-width: 320px) {
			html.SP #advice12 .entry p {
				font-size: 80%;
			}
		}