/* ---subf view bg --- */

.subf_bottom::before {
	background:url(../images/bg_subf_blacktea.jpg) no-repeat center / cover;
}

/* --- black tea --- */

.blacktea h1 {
	font-size:6rem;
	margin-bottom:190px;
}

.blt_block {
	margin-bottom:150px;
	padding:100px 0;
}

.blt_block:nth-of-type(even) .inner {
	-webkit-box-orient: horizontal;
	-webkit-box-direction: reverse;
	-ms-flex-direction: row-reverse;
	flex-direction: row-reverse;
}

.blt_block .inner {
	max-width:100%;
	padding:0;
}

.blt_img {
	width:50%;

}

.blt_detail {
	width:25%;
	max-width:450px;
	margin:0 auto;
	position:relative;
}

#cubebox .blt_detail::after,
#indivi .blt_detail::after,
#leaves .blt_detail::after {
	content:"";
	display: block;
	position:absolute;
}

#cubebox .blt_detail::after,
#indivi .blt_detail::after {
	width:24vw;
	height:15vw;
	max-width:423px;
	max-height:261px;
	background:url(../images/teapac.png) no-repeat center / contain;
	right:-50%;
	top:-15%;
	transform:rotate(12deg);
}

#indivi .blt_detail::after {
	transform:rotate(-12deg);
}

#leaves .blt_detail::after {
	width:20vw;
	height:12vw;
	max-width:348px;
	max-height:206px;
	background:url(../images/leaf.png) no-repeat center / contain;
	bottom:-6%;
	left:-110%;
	transform:rotate(-25deg);
}


.blt_detail h2 {
	font-size:3rem;
	margin:1em 0 0.5em 0;
}

.blt_detail h2 span {
	font-size:1.6rem;
	margin-left:0.5em;
}

.blt_detail p {
	line-height:2.2em;
	font-size:1.4rem;
	margin-bottom:1.5em;
}

.blt_detail .btn_white {
	border:1px solid #c45900;
	line-height:70px;
}

/* --- blt cute --- */

.blt_cute {
	padding:0 150px;
	max-width:1800px;
	width:100%;
	position:relative;
	margin:0 auto 150px;
}

.blt_cute h3 {
	width:55%;
	position:absolute;
	top:0;
	left:4%;
	top:-9%;
	transform:rotate(-12deg);
}

/* --- how to --- */

.howto_hottea {
	padding-top:330px;
	position:relative;
}

.howto_hottea::before {
	content:"";
	display: block;
	width:25vw;
	max-width:400px;
	min-width:300px;
	height:25vw;
	max-height:400px;
	min-height:300px;
	background:url(../images/tete_tea.png) no-repeat center / contain;
	position:absolute;
	top:0;
	right:0;
}

.howto_block:not(:last-of-type) {
	margin-bottom:120px;
}

.howto_block:nth-of-type(even) {
	-webkit-box-orient: horizontal;
	-webkit-box-direction: reverse;
	-ms-flex-direction: row-reverse;
	flex-direction: row-reverse;
}

.howto_img {
	width:50%;
	text-align:center;
}

.howto_txt {
	width:40%;
	max-width:540px;
	margin-top:120px;
}

.howto_block:nth-of-type(even) .howto_txt {
	margin-left:6%;
}

.howto_txt h2 {
	font-size:3rem;
	position:relative;
	padding-left:1em;
	margin-bottom:1em;
}

.howto_txt h2::before {
	content:"";
	display:block;
	width:25px;
	height:21.6506px;
	background:url(../images/icon_tryangle.svg) no-repeat center / contain;
	transform:rotate(90deg);
	position:absolute;
	left:0;
	top:0.3em;
}



/* --- responsive --- */
@media screen and (max-width:1024px){

	.blt_detail {
		width:30%;
	}

	.howto_block:nth-of-type(even) .howto_txt {
		margin-left:0%;
	}
	.howto_txt {
		margin-top:0px;
	}

	#howto .h_title {
		font-size:4rem;
	}
		
}

/* --- ver.sp --- */

@media screen and (max-width:768px){


/* --- black tea --- */

.blacktea h1 {
	font-size:8vw;
	margin-bottom:20vw;
}

.blt_block {
	margin-bottom:15vw;
	padding:0;
}

#indivi {
	margin-bottom:0;
}

.blt_block:nth-of-type(even) .inner {
	-webkit-box-orient: horizontal;
	-webkit-box-direction: normal;
	-ms-flex-direction: row;
	flex-direction: row;
}

.blt_img {
	width:100%;
	height:60vw;
	margin-bottom:10vw;
}

.blt_detail {
	width:66.5vw;
	max-width:100%;
	padding-bottom:10vw;
}

.blt_img_child {
	height:66.5vw;
}

.blt_detail h2 {
	font-size:8vw;
}

.blt_detail h2 span {
	font-size:4vw;
	display: block;
	margin-left:0;;
}

.blt_detail p {
	font-size:3.5vw;
}

.blt_detail .btn_white {
	border:1px solid #c45900;
	line-height:14.5vw;
}

/* --- blt cute --- */

.blt_cute {
	padding:0 5vw;
	width:100%;
	margin-bottom:5vw;
	padding-top:15vw;
}

.blt_cute h3 {
	width:auto;
}

.blt_cute h3 img {
	width:81.0075vw;
	height:29.5926vw;
}

/* --- how to --- */


#howto .h_title {
	font-size:6vw;
	margin-bottom:10vw;
}


.howto_hottea {
	padding-top:85vw;
	position:relative;
}

.howto_hottea::before {
	width:65vw;
	max-width:100%;
	min-width:auto;
	height:65vw;
	max-height:100%;
	min-height:auto;
	right:50%;
	transform:translateX(50%);
}

.howto_block:not(:last-of-type) {
	margin-bottom:20vw;
}

.howto_block:nth-of-type(even),
.howto_block:nth-of-type(odd) {
	-webkit-box-orient: vertical;
	-webkit-box-direction: reverse;
	-ms-flex-direction: column-reverse;
	flex-direction: column-reverse;
}

.howto_img {
	width:90%;
	margin:0 auto;
}

.howto_txt {
	width:100%;
	max-width:100%;
	margin:0 auto 10vw auto;
}

.howto_block:nth-of-type(even) .howto_txt {
	margin-left:0%;
}

.howto_txt h2 {
	font-size:5.5vw;
	padding-left:1.2em;
}

.howto_txt h2::before {
	width:5vw;
	height:4.33012vw;
}

#cubebox .blt_detail::after,
#indivi .blt_detail::after {
	width:38vw;
	height:23vw;
	max-width:100%;
	max-height:100%;
	right:-16vw;
	top:51vw
}

#leaves .blt_detail::after {
	width:34vw;
	height:20vw;
	max-width:100%;
	max-height:100%;
	bottom:auto;
	left:auto;
	right:-13vw;
	top:50vw;
}

	
}