@charset "utf-8";
/* CSS Document */

.section-01 {
	background: url(https://happyblessing.itembox.design/item/herbtea/poka_bg.png) left bottom;
	background-size: 100% auto;
	padding: 1em 8px 15%;
	display: flex;
	align-items: center;
}

.section-01 .pic {
	flex-basis: 25%;
}

.section-01 h2 {
	color: #fff;
	line-height: 1.7;
	font-size: 1.3em;
	flex-basis: 75%;
}

.section-01 h2 img {
	height: 1.5em;
	margin-right: 8px;
}

.section-02 h2 {
	background: url(https://happyblessing.itembox.design/item/herbtea/sugoi_hl.png) no-repeat left bottom;
	background-size: 100% auto;
	color: #75542d;
	text-align: left;
	padding: 2% 8px;
}

.section-02 p {
	text-align: left;
}

.section-02 h3 {
	background: url(https://happyblessing.itembox.design/item/herbtea/sugoi_point.png) no-repeat;
	background-size: 100% auto;
	color: #fff;;
	position: relative;
	height: 0;
	padding-top: 60.406885758%;
}

.section-02 h3 span {
	position: absolute;
	top: 50%;
	left: 0;
	margin-top: -10%;
	width: 100%;
	line-height: 1.8;
}

.bloc.section-03 {
	max-width: 640px;
}


.section-03 h2 {
	text-align: left;
}

.section-03 h2 img {
	width: 40%;
}

.section-03 .txtblock {
	display: flex;
}

.section-03 .txtblock.sec3-2 {
	flex-direction: row-reverse;
}

.section-03 .txtblock.sec3-3 {
	display: inline-block;
	width: 80%;
}

.section-03 h3 {
	color: #75542d;
}


.section-03 .sec3-1 h3 {
	background: url(https://happyblessing.itembox.design/item/herbtea/osusume_sb1.png) no-repeat;
	background-size: 100% auto;
	position: relative;
	height: 0;
	padding-top: 40.762463343%;
}

.section-03 .sec3-2 h3 {
	background: url(https://happyblessing.itembox.design/item/herbtea/osusume_sb2.png) no-repeat;
	background-size: 100% auto;
	position: relative;
	height: 0;
	padding-top: 41.017964071%;
}

.section-03 .sec3-3 h3 {
	background: url(https://happyblessing.itembox.design/item/herbtea/osusume_sb3.png) no-repeat;
	background-size: 100% auto;
	position: relative;
	height: 0;
	padding-top: 26.126126126%;
}

.section-03 h3 span {
	position: absolute;
	top: 50%;
	left: 0;
	margin-top: -10%;
	width: 100%;
}

.section-03 .sec3-3 h3 span {
	margin-top: -5%;
}

.section-04 h2 {
	background: url(https://happyblessing.itembox.design/item/herbtea/choice_hl.png) center;
	background-size: 170% auto;
	color: #fff;
	font-size: 2em;
	position: relative;
	height: 0;
	padding-top: 62.321428571%;
}

.section-04 h2 span {
	position: absolute;
	top: 50%;
	left: 0;
	margin-top: -25%;
	width: 100%;
	line-height: 1.65;
}

.section-04 h2 span img {
	width: 190px;
}

.section-04 .secblock {
	padding-top: 2em;
}

.section-04 .secblock p {
	background-color: rgba(255,255,255,0.3);
	text-align: left;
}

.section-05 .bg img {
	vertical-align: bottom;
	width: 100%;
}

.section-05 .inner {
	background-color: #f0f5d9;
	padding: 2em 0;
}

.section-05 p {
	text-align: left;
	padding: 0 8px;
}

.sec5-1 p {
	text-shadow: 0 0 3px #fff;
}

.sec5-2 {
	background: url(https://happyblessing.itembox.design/item/herbtea/gnk_what_bg.png) no-repeat right center;
	background-size: contain;
}

.sec5-2 h3 {
	color: #75542d;
	background: url(https://happyblessing.itembox.design/item/herbtea/line.png) no-repeat left bottom;
	background-size: 100% auto;
	margin: 2em 8px 1em;
	font-size: 1.5em;
	text-align: left;
}

.sec5-2 p {
	padding-right: 15%; 
}

.sec5-3 {
	display: grid;
	grid-template-columns: 30% 1fr;
	grid-template-rows: auto auto;
	grid-gap: 8px;
	align-items: end;
}

.sec5-3 h3 {
	background: url(https://happyblessing.itembox.design/item/herbtea/gnk_weak_sb.png) no-repeat;
	background-size: 100% auto;
	color: #75542d;
	position: relative;
	height: 0;
	padding-top: 27.580071174%;
	font-size: 1.5em;
	margin: 2em 16px 0;
	grid-column: 1 / 3;
	grid-row: 1 / 2;

}

.sec5-3 h3 span {
	position: absolute;
	top: 50%;
	left: 0;
	margin-top: -8%;
	width: 100%;
}

.sec5-3 .pic {
	grid-column: 1 / 2;
	grid-row: 2 / 3;
	padding-left: 8px;
}

.sec5-3 .text {
	grid-column: 2 / 3;
	grid-row: 2 / 3;
}

.sec5-4 h3 {
	background: url(https://happyblessing.itembox.design/item/herbtea/gnk_frame.png) no-repeat;
	background-size: 100% auto;
	position: relative;
	height: 0;
	padding-top: 67.063492063%;
	color: #fff;
	line-height: 1.65;
}


.sec5-4 h3 span {
	position: absolute;
	top: 50%;
	left: 0;
	margin-top: -13%;
	width: 100%;
}

.sec5-5 {
	display: grid;
	grid-template-columns: 40% auto;
	grid-template-rows: auto auto;
	grid-gap: 8px;
	margin: 0 8px;
}

.sec5-5 h3 {
	grid-column: 1 / 3;
	grid-row: 1 / 2;
	color: #75542d;
	background: url(https://happyblessing.itembox.design/item/herbtea/line.png) no-repeat left bottom;
	background-size: 100% auto;
	margin: 2em 0 1em;
	font-size: 1.5em;
	text-align: left;
}

.sec5-5 .pic {
	grid-column: 1 / 2;
	grid-row: 2 / 3;
}

.sec5-5 .text {
	grid-column: 2 / 3;
	grid-row: 2 / 3;
}

.sec5-5 .text .ill {
	display: flex;
}

.section-06 ol {
	list-style: none;
	padding: 0;
	text-align: left;
}

.section-06 li {
	display: grid;
	grid-template-columns: 55% auto;
	grid-template-rows: 50px auto;
	grid-gap: 8px;
	margin-bottom: 2em;
}

.section-06 .no {
	grid-column: 1 / 2;
	grid-row: 1 / 2;
}

.section-06 .no img {
	height: 100%;
}

.section-06 p {
	grid-column: 1 / 2;
	grid-row: 2 / 3;
}

.section-06 img {
	grid-column: 2 / 3;
	grid-row: 1 / 3;
}

.section-06 .point {
	border: 3px solid #d3c5ab;
	border-radius: 8px;
	padding: 16px;
	text-align: left;
	display: flex;
}

.section-06 .point h3 {
	flex-basis: 30%;
	padding-right: 8px;
}

.section-06 .point p {
	flex-basis: 70%;
}

.section-07 {
	background-color: #f5ede0;
	padding: 16px 8px;
}

.section-07 h2 {
	color: #75542d;
	background: url(https://happyblessing.itembox.design/item/herbtea/line.png) no-repeat left bottom;
	background-size: 100% auto;
	padding-bottom: 5px;
}

.section-07 p {
	text-align: left;
}

.section-08 {
	display: grid;
	grid-template-columns: 30% 1fr;
	grid-template-rows: auto auto;
	grid-gap: 8px;
	align-items: center;
}

.section-08 h2 {
	color: #75542d;
	background: url(https://happyblessing.itembox.design/item/herbtea/line.png) no-repeat left bottom;
	background-size: 100% auto;
	padding-bottom: 5px;
	grid-column: 1 / 3;
	grid-row: 1 / 2;
}

.section-08 h2 img {
	display: block;
	width: 130px;
}

.section-08 .pic {
	grid-column: 1 / 2;
	grid-row: 2 / 3;
}

.section-08 .text {
	grid-column: 2 / 3;
	grid-row: 2 / 3;
}

.section-08 p {
	text-align: left;
}

/*------------------------------------------
　幅768px以上↓↓
------------------------------------------*/
@media screen and (min-width: 768px){
/*----------------------------------------*/
.section-01 h2 {
	font-size: 2.2em;
}

.section-02 h2 {
	display: inline-block;
	text-align: center;
	font-size: 2.2em;
	max-width: 758px;
	padding: 2% 50px;
}

.section-02 p {
	text-align: center;
}

.section-02 h3 {
	font-size: 2.2em;
	max-width: 700px;
	margin-left: auto;
	margin-right: auto;
}

.section-02 h3 span {
	margin-top: -15%;
}

.fs-p-productDescription .block.section-03 {
	margin-left: 4em;
	margin-right: 4em;
}

.section-03 .sec3-1 h3,
.section-03 .sec3-2 h3{
	width: 30.0625vw;
}

.section-03 h3 span {
	font-size: 2.90625vw;
}

.section-03 p {
	font-size: 1.2em;
}

.section-04 h2 {
	font-size: 2.8em;
}

.section-04 h2 span {
	margin-top: -20%;
}

.section-04 h2 span img {
	width: 300px;
}

.section-04 .secblock {
	padding-top: 4em;
}

.section-04 .secblock p {
	text-align: center;
}

.section-05 p {
	text-align: center;
}

.sec5-2 h3 {
	display: inline-block;
	font-size: 2em;
	text-align: center;
	padding: 0 1em 8px;
}

.sec5-3 h3 {
	grid-column: 2 / 3;
	grid-row: 1 / 2;
	font-size: 2em;
}

.sec5-3 .pic {
	grid-column: 1 / 2;
	grid-row: 1 / 3;
	padding-left: 8px;
}

.sec5-4 h3 {
	font-size: 2em;
	max-width: 700px;
	margin-left: auto;
	margin-right: auto;
}

.sec5-4 h3 span {
	margin-top: -15%;
}

.sec5-5 h3 {
	font-size: 2em;
	text-align: center;
	margin-left: 4em;
	margin-right: 4em;
}

.section-06 ol {
	display: flex;
	margin-left: 2em;
	margin-riight: 2em;
}

.section-06 li {
	display: flex;
	flex-direction: column;
	flex-basis: 33%;
	padding: 0 16px;
}

.section-06 .no img {
	height: 50px;
}

.section-06 img.ill {
	margiin-top: 2em;
}

.section-06 .point {
	padding: 0;
	text-align: center;
	align-items: center;
}

.section-06 .point h3 {
	flex-basis: 15%;
	padding-left: 16px;
}

.section-06 .point p {
	flex-basis: 90%;
}

.section-07 h2 {
	display: inline-block;
}

.section-07 .txtarea {
	display: flex;
	align-items: center;
	padding: 0 2em;
}

.section-07 .txtarea .txt {
	flex-basis: 60%;
}

.section-07 .txtarea img {
	flex-basis: 40%;
}

.section-08 h2 {
	font-size: 2em;
	grid-column: 2 / 3;
	grid-row: 1 / 2;
}

.section-08 .pic {
	grid-column: 1 / 2;
	grid-row: 1 / 3;
}

/*----------------------------------------*/
}
/*----------------------------------------*/