@charset "UTF-8";
/* CSS Document */

sup {
	font-size: 75%;
	line-height: 0;
	position: relative;
	top: -0.5em;
	vertical-align: baseline;
}

.br-pc-x {
	display: inline;
}
.br-sp-x {
	display: none;
}
.no-br {
	display: inline-block;
}

/*=== メインビジュアル ===*/
.main-visual {
	width: 950px;
	margin: 0 auto 38px;
	text-align: center;
}
.main-visual img {
	width: 100%;
	height: auto;
	vertical-align: bottom;
}

.content-body {
	font-family: 'Hiragino Kaku Gothic Pro', 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', 'MS P Gothic', Verdana, Arial, sans-serif;
	width: 950px;
	margin: 0 auto;
	font-size: 100%;
	color: #3a3a3a;
}
.inner-content {
	width: 748px;
	margin: 0 auto;
}

/*=== リード部分 ===*/
.lead-block {
	font-size: 106%;
	text-align: center;
	margin-bottom: 70px;
}
.lead-txt {
	text-align: center;
	color: #4e4e4e;
	font-size: 110%;
	font-family: 'Noto Serif', 'Noto Serif JP', serif;
	line-height: 1.6;
}

/*=== 見出し ===*/
.heading {
	text-align: center;
}
.heading-inner {
	display: inline-block;
	overflow: hidden;
	margin-left: -40px;
}
.hd-label {
	width: 123px;
	float: left;
}
.hd-label img {
	width: 100%;
	height: auto;
	vertical-align: bottom;
}
.hd1 {
	font-size: 160%;
	font-family: 'Noto Serif', 'Noto Serif JP', serif;
	float: left;
	padding-top: 45px;
	margin-left: -12px;
}
.hd1.p01 {
	color: #00569f;
}
.hd1.p02 {
	color: #009250;
}
.hd1.p03 {
	color: #9a7400;
}

.hd2 {
	box-sizing: border-box;
	height: 128px;
	font-size: 110%;
	line-height: 1.2;
	text-align: center;
	background-position: center top;
	background-repeat: no-repeat;
	background-size: contain;
}
.hd2.p01 {
	color: #3f91dd;
	padding-top: 55px;
	background-image: url("../images/cloud_1.png");
}
.hd2.p02 {
	color: #18ac4c;
	height: 174px;
	padding-top: 65px;
	background-image: url("../images/cloud_2.png")
}
.hd2.p03 {
	color: #bc970e;
	padding-top: 65px;
	margin-bottom: 20px;
	background-image: url("../images/cloud_3.png");
}

.hd3 {
	font-size: 160%;
	line-height: 1.2;
}
.hd3.p04 {
	color: #0071a4;
	text-align: center;
	margin-bottom: 10px;
}
.sub-heading {
	font-size: 120%;
	line-height: 1.3;
	color: #009b88;
}

.hd3.p05 {
	color: #009b88;
	margin-top: 10px;
	margin-bottom: 10px;
}

/*=== セクション ===*/
.sec-lead {
	margin-top: -20px;
}
.sec-lead-txt {
	font-size: 100%;
	font-family: 'Noto Serif', 'Noto Serif JP', serif;
	line-height: 1.6;
	text-align: center;
}
.sec-lead.p03 {
	margin-top: 0;
}

.with-border:after {
	display: block;
    content: "";
    width: 738px;
    height: 1px;
	margin: 0 auto;
    background-size: 8px 1px;
    background-position: left top;
    background-repeat: repeat-x;
	background-image: linear-gradient(to right, #b4b4b4, #b4b4b4 5px, #fff 5px, #fff 8px);
}

/*=== 商品詳細 ===*/
.p-name {
	display: block;
	text-decoration: none;
	font-size: 115%;
	font-family: 'Noto Serif', 'Noto Serif JP', serif;
	line-height: 1.7;
	margin-bottom: 10px;
}
a.p-name:hover {
	opacity: 0.5;
}
.u-line {
	display: inline-block;
	padding: 0 0.2em;
	border-bottom: 1px solid #000;
}
.p01 .p-name {
	color: #00569f;
}
.p01 .u-line {
	border-bottom-color: #2993ca;
}
.p02 .p-name {
	color: #009250;
}
.p02 .u-line {
	border-bottom-color: #18ac4c;
}
.p03 .p-name {
	color: #9a7400;
}
.p03 .u-line {
	border-bottom-color: #9a7400;
}
.p04 .p-name {
	color: #009fb9;
}
.p04 .u-line {
	border-bottom-color: #5dc2d0;
}
.p05 .p-name {
	color: #1d969a;
}
.p05 .u-line {
	border-bottom-color: #5eb8b9;
}

.p-small {
	font-size: 82%;
	font-family: 'Noto Serif', 'Noto Serif JP', serif;
	line-height: 1.7;
}
.price {
	font-size: 94%;
	font-family: 'Noto Serif', 'Noto Serif JP', serif;
	line-height: 1.7;
}
.p04 .price {
	font-size: 82%;
}
.brand-name {
	font-size: 70%;
	font-family: 'Noto Serif', 'Noto Serif JP', serif;
	line-height: 1.7;
}
.release {
	font-size: 100%;
	line-height: 1.7;
	color: #e40076;
}

.iyaku-m {
	font-size: 77%;
	font-family: 'Noto Serif', 'Noto Serif JP', serif;
	color: #3a3a3a;
	display: inline-block;
	line-height: 1.3;
	padding: 0 2px;
	border: 1px solid #3a3a3a;
}

.tag {
	display: inline-block;
	font-size: 70%;
	line-height: 1;
}
.note {
	font-size: 70%;
	line-height: 1.3;
}
.p-note {
	font-size: 90%;
	line-height: 1.3;
	margin-top: 10px;
}

/*=== CHECKとINFORMATIONの枠 ===*/
.dashed-box-wrapper {
	box-sizing: border-box;
	width: 743px;
	margin: 0 auto;
	position: relative;
}
.dashed-box {
	padding: 30px 30px;
	position: relative;
}
.tab-box {
	position: absolute;
	top: -37px;
	left: 0;
	overflow: hidden;
}
.tab-box p {
	height: 19px;
	padding: 8px 4px;
	margin: 0 16px;
}
.tab-box img {
	height: 100%;
	width: auto;
}
.tab-box.p04 {
	width: 174px;
	background-color: #deefeb;
}
.tab-box.p04 p {
	border-bottom: 1px solid #0086ca;
}
.tab-box.p05 {
	width: 254px;
	background-color: #dff2fc;
}
.tab-box.p05 p {
	border-bottom: 1px solid #008380;
}

.slant {
	display: block;
	width: 50px;
	padding-top: 36px;
	background-color: #fff;
	position: absolute;
	bottom: 0;
	right: 0;
	transform-origin: right bottom;
	transform: rotate(56deg);
}
.slant:after {
	display: block;
    content: "";
    width: 100%;
    height: 1px;
    background-size: 8px 1px;
	background-position: right bottom;
    background-repeat: repeat-x;
}

.p04 .slant:after {
	background-image: linear-gradient(to left, #008380, #008380 5px, #fff 5px, #fff 8px);
}
.p05 .slant:after {
	background-image: linear-gradient(to left, #5bbce6, #5bbce6 5px, #fff 5px, #fff 8px);
}

.dashed-box.p04 {
	background-color: #deefeb;
}
.dashed-box.p05 {
	background-color: #dff2fc;
}

.tab-box:after,
.dashed-box:before,
.dashed-box:after {
	display: block;
    content: "";
    width: 1px;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background-size: 1px 8px;
    background-position: left top;
    background-repeat: repeat-y;
}
.dashed-box:after {
	left: auto;
	right: 0;
}

.tab-box.p04:after {
	background-image: linear-gradient(to top, #008380, #008380 5px, #fff 5px, #fff 8px);
	background-position: left bottom;
}
.dashed-box.p04:before {
	background-image: linear-gradient(to bottom, #fff, #fff 3px, #008380 3px, #008380 8px);
}
.dashed-box.p04:after {
	background-image: linear-gradient(to bottom, #008380, #008380 5px, #fff 5px, #fff 8px);
}

.tab-box.p05:after {
	background-image: linear-gradient(to top, #5bbce6, #5bbce6 5px, #fff 5px, #fff 8px);
	background-position: left bottom;
}
.dashed-box.p05:before {
	background-image: linear-gradient(to bottom, #fff, #fff 3px, #5bbce6 3px, #5bbce6 8px);
}
.dashed-box.p05:after {
	background-image: linear-gradient(to bottom, #5bbce6, #5bbce6 3px, #fff 5px, #fff 8px);
}

.dashed-box-wrapper:before,
.dashed-box-wrapper:after,
.tab-box:before {
	display: block;
    content: "";
    width: 100%;
    height: 1px;
    background-size: 8px 1px;
    background-position: left top;
    background-repeat: repeat-x;
}

.dashed-box-wrapper.p04:before,
.dashed-box-wrapper.p04:after,
.tab-box.p04:before {
	background-image: linear-gradient(to right, #008380, #008380 5px, #fff 5px, #fff 8px);
}

.dashed-box-wrapper.p05:before,
.dashed-box-wrapper.p05:after,
.tab-box.p05:before {
	background-image: linear-gradient(to right, #5bbce6, #5bbce6 5px, #fff 5px, #fff 8px);
}


/* 余白調整 */
#s02 {
	margin-top: 20px;
}
#s03 {
	margin-top: 20px;
}
#s04 {
	margin-top: 110px;
}
#s05 {
	margin-top: 75px;
}

/*=== Section I ===*/
/*=== トゥブラン ===*/
.item-title-block.p01 {
	position: relative;
	margin-top: 20px;
}
.fig {
	width: 130px;
	position: absolute;
	top: -20px;
	right: 70px;
}
.fig img {
	width: 100%;
	height: auto;
}

.item-box.p01 {
	overflow: hidden;
	margin-bottom: 40px;
}
.item-pic.p01 {
	box-sizing: border-box;
	width: calc(100% - 460px);
	height: 360px; /* XXX */
	float: left;
	text-align: right;
	padding-right: 40px;
}
.item-pic.p01 img {
	height: 346px;
	width: auto;
}
.spec-box.p01 {
	width: 460px;
	float: right;
	margin-top: 26px;
}

/*=== Section II ===*/
/*=== ノエビア 99プラス ===*/
.item-title-block.p02 {
	position: relative;
}
.plants {
	width: 205px;
	position: absolute;
	bottom: -70px;
	right: 0;
}
.plants img {
	width: 100%;
	height: auto;
}

.item-box.p02 {
	margin-bottom: 50px;
}

.item-box.p02:after {
	display: block;
	content: "";
	clear: both;
}
.item-pic.p02 {
	box-sizing: border-box;
	width: calc(100% - 460px);
	height: 300px; /* XXX */
	float: left;
	text-align: right;
	padding-right: 40px;
	margin-top: -70px;
}
.item-pic.p02 img {
	height: 296px;
	width: auto;
}
.spec-box.p02 {
	width: 460px;
	float: right;
	margin-top: 40px;
}
.p02 .note {
	margin-top: 30px;
}

/*=== Section III ===*/
/*=== セラム ===*/
.column-layout {
	overflow: hidden;
	margin-top: 30px;
}
.item-box-v.p03 {
	width: 45%;
	float: left;
}
.item-box-v.p03b {
	float: right;
}
.item-pic.p03 {
	height: 343px;
	text-align: center;
}
.item-pic.p03a img {
	height: 304px;
	width: auto;
	vertical-align: bottom;
}
.item-pic.p03b img {
	height: 314px;
	width: auto;
	vertical-align: bottom;
}

.p03 .note {
	margin-left: 75%;
	margin-top: -1.5em;
}

/*=== CHECK ===*/
/*=== レイセラ ===*/
.side-by-side {
	margin-top: 20px;
}
.side-by-side:after {
	display: block;
	content: "";
	clear: both;
}
.item-box.p04 {
	width: 50%;
	float: left;
}
.item-box.p04:after {
	display: block;
	content: "";
	clear: both;
}
.item-pic.p04 {
	height: 330px;
	position: relative;
}
.spec-box.p04 {
	margin-top: 170px;
}
.item-pic.p04a {
	box-sizing: border-box;
	width: 104px;
	float: right;
	padding-top: 60px;
}
.item-pic.p04a img {
	height: 268px;
	width: auto;
	vertical-align: bottom;
}
.spec-box.p04a {
	box-sizing: border-box;
	width: calc(100% - 104px);
	float: left;
	padding-left: 20px;
}
.p04a .bubble {
	width: 153px;
	position: absolute;
	top: 60px;
	right: 100%;
}
.p04a .bubble img {
	width: 100%;
	height: auto;
}


.item-pic.p04b {
	width: 124px;
	float: left;
}
.spec-box.p04b {
	width: calc(100% - 124px);
	float: right;
}
.item-pic.p04b img {
	height: 325px;
	width: auto;
	vertical-align: bottom;
}
.p04b .bubble {
	width: 124px;
	position: absolute;
	top: 20px;
	left: 100%;
}
.p04b .bubble img {
	width: 100%;
	height: auto;
}

/*=== INFORMATION ===*/
/*=== ピーセリン EX ===*/
.item-box.p05 {
	padding-right: 50px;
}
.item-box.p05:after {
	display: block;
	content: "";
	clear: both;
}
.item-pic.p05 {
	width: 230px;
	float: right;
	margin-top: -120px;
}
.item-pic.p05 img {
	height: 263px;
	width: auto;
}
.spec-box.p05 {
	width: calc(100% - 230px);
	float: left;
	margin-top: 30px;
}

.description {
	font-size: 100%;
	font-family: 'Noto Serif', 'Noto Serif JP', serif;
	line-height: 1.7;
}

.p05 .note {
	margin-top: 20px;
}

@media screen and (max-width: 767px) {
	.br-pc-x {
		display: none;
	}
	.br-sp-x {
		display: inline;
	}
	
	.content-body {
		width: 100%;
	}
	.inner-content {
		width: 92%;
	}
	/*=== メインビジュアル ===*/
	.main-visual {
		width: 100%;
		margin-bottom: 30px;
	}
	
	/*=== リード部分 ===*/
	.lead-block {
		width: 92%;
		margin: 0 auto;
		margin-bottom: 50px;
	}
	.lead-txt {
		font-size: 100%;
	}
	
	/*=== 見出し ===*/
	.heading {
		width: 92%;
		margin: 0 auto;
		text-align: left;
	}
	.heading-inner {
		margin-left: 0;
	}
	.hd-label {
		width: 20%;
		max-width: 123px;
	}
	.hd1 {
		width: 80%;
		font-size: 125%;
		padding-top: 0;
		line-height: 1.3;
		margin-left: 0;
	}
	.hd1.p01 {
		padding-top: 10px;
	}
	.hd1.p02 {
		padding-top: 10px;
	}
	.hd1.p03 {
		padding-top: 10px;
	}
	
	.hd2.p01,
	.hd2.p02 {
		float: left;
		width: 70%;
		text-align: left;
		background-position: left 2em top;
	}
	.hd2.p02 {
		width: 75%;
		height: auto;
		background-size: 128px 128px;
		letter-spacing: -0.02em;
		padding-top: 50px;
	}
	.hd2.p02 sup {
		font-size: 65%;
	}
	.hd2.p03 {
		margin-bottom: 10px;
	}
	
	.hd3 {
		font-size: 150%;
	}
	.hd3.p04 {
		text-align: left;
	}
	
	/*=== イラストとハトムギの写真 ===*/
	.fig {
		position: static;
		width: 30%;
		float: left;
		margin-top: -16px;
	}
	.plants {
		position: static;
		width: 25%;
		float: left;
	}
	.fig span,
	.plants span {
		display: block;
		position: relative;
		z-index: -1;
	}
	.plants span {
		margin-left: -30px;
	}
	
	.item-title-block.p01 {
		width: 100%;
		max-width: 405px;
		margin: 20px auto 10px;
	}
	.item-title-block.p02 {
		width: 100%;
		max-width: 477px;
		margin: 0 auto;
	}

	.item-title-block:after {
		display: block;
		content: "";
		clear: both;
	}
	
	/*=== セクション ===*/
	.sec-lead {
		width: 92%;
		margin: 0 auto;
	}
	.sec-lead-txt {
		text-align: left;
	}
	
	/*=== 商品詳細 ===*/
	.p-name {
		text-align: center;
	}
	.p-small {
		text-align: center;
	}
	.p-iyaku {
		text-align: center;
	}
	.price {
		text-align: center;
	}
	.brand-name {
		text-align: center;
	}
	.release {
		text-align: center;
	}
	.spec-box .note {
		text-align: center;
	}
	.spec-box .note span {
		display: inline-block;
		text-align: left;
	}
	.p-note {
		text-align: center;
	}
	.p-note span {
		display: inline-block;
		width: 90%;
		text-align: left;
	}
	
	/*=== CHECKとINFORMATIONの枠 ===*/
	.dashed-box-wrapper {
		width: 92%;
	}
	.dashed-box {
		padding: 20px 16px;
	}
	.tab-box {
		top: -32px;
	}
	.tab-box p {
		height: 14px;
	}
	.tab-box img {
		height: 14px;	/* for iOS Safari */
	}

	.tab-box.p04 {
		width: 140px;
	}
	.tab-box.p05 {
		width: 200px;
	}
	
	/*=== Section I ===*/
	/*=== トゥブラン ===*/
	.item-pic.p01 {
		width: 100%;
		height: auto;
		float: none;
		text-align: center;
		padding-right: 0;
	}
	.item-pic.p01a img {
		height: 316px;
	}
	.item-pic.p01b {
		margin-top: 50px;
	}
	.item-pic.p01b img {
		height: 291px;
	}
	.spec-box.p01 {
		width: 100%;
		float: none;
		margin-top: 10px;
	}

	.tag {
		display: none;
	}
	
	/*=== Section II ===*/
	/*=== ノエビア 99プラス ===*/
	.item-box.p02 {
		margin-top: 20px;
	}
	.item-pic.p02 {
		width: 100%;
		height: auto;
		float: none;
		text-align: center;
		padding-right: 0;
		margin-top: 0;
	}
	.item-pic.p02 img {
		height: 290px;
	}
	.spec-box.p02 {
		width: 100%;
		float: none;
		margin-top: 10px;
	}
	
	/*=== Section III ===*/
	/*=== セラム ===*/
	.item-box-v.p03 {
		width: 100%;
		float: none;
	}
	.item-box-v.p03b {
		margin-top: 40px;
	}
	.item-pic.p03 {
		height: auto;
	}
	.item-pic.p03b img {
		height: 288px;
	}
	.spec-box.p03 {
		margin-top: 10px;
	}
	.p03 .note {
		margin-top: 0;
		margin-left: 0;
		text-align: right;
	}
	
	/*=== CHECK ===*/
	/*=== レイセラ ===*/
	.item-box.p04 {
		width: 100%;
		float: none;
	}
	.item-pic.p04 {
		height: auto;
	}
	.item-pic.p04a {
		width: 90px;
		float: none;
		margin: 0 auto;
		text-align: center;
		padding-top: 0;
	}
	.item-pic.p04b {
		width: 130px;
		float: none;
		margin: 30px auto 0;
		text-align: center;
	}
	.item-pic.p04a > img {
		height: 265px;
	}
	.item-pic.p04b > img {
		height: 290px;
	}
	.spec-box.p04 {
		margin-top: 10px;
	}
	.spec-box.p04a {
		width: 100%;
		float: none;
		padding-left: 0;
		margin-top: 0;
	}
	.spec-box.p04b {
		width: 100%;
		float: none;
	}
	.p04a .bubble {
		width: calc(1.2 * (45vw - 65px - 4px));	/* W1: W2 = 153px:124px */
		max-width: 153px;
		top: 0;
	}
	.p04b .bubble {
		width: calc(45vw - 65px - 4px);
		max-width: 124px;
		top: 60px;
	}
	
	/*=== INFORMATION ===*/
	/*=== ピーセリン EX ===*/
	.item-box.p05 {
		margin-top: 20px;
		padding-right: 0;
	}
	.item-pic.p05 {
		width: 100%;
		float: none;
		text-align: center;
		margin-top: 0;
	}
	.item-pic.p05 img {
		height: 230px;
	}
	.spec-box.p05 {
		width: 100%;
		float: none;
		margin-top: 20px;
	}
	
	#s09 {
		margin-left: auto;
		margin-right: auto;
	}
}

@media screen and (min-width: 515px) and (max-width: 767px) {
	.hd1.p02 {
		padding-top: 30px;
	}
}
@media screen and (min-width: 597px) and (max-width: 767px) {
	.hd1.p03 {
		padding-top: 30px;
	}
}

@media screen and (max-width: 375px) {
	.hd1.p01 {
		padding-top: 0;
		margin-bottom: 10px;
	}
	.hd1.p02 {
		padding-top: 5px;
		margin-bottom: 10px;
	}
	.hd1.p03 {
		padding-top: 5px;
		margin-bottom: 10px;
	}
}
@media screen and (max-width: 360px) {
	.br-z {
		display: none;
	}
	.lead-txt {
		font-size: 100%;
		letter-spacing: -0.05em;
	}
	.p-note span {
		width: 100%;
	}
}