@charset "UTF-8";

html {
	font-size: 62.5%;
}
#topics.stick {
	overflow: hidden;
	padding: 0;
	color: #000;
	font-family: 'Noto Sans JP', sans-serif;
	font-size: 1.5rem;
	font-weight: 300;
	font-feature-settings : "palt" 1;
	text-align: center;
	letter-spacing: 0.08em;
	animation: fadeIn 1s ease-in;
}
#topics.stick img {
	max-width: 100%;
}

.mainvisual img {
	width: 100%;
	margin: auto;
}

.section {
	position: relative;
}
.section_ttl, .section_ttl_hair_styling_sticks {
	font-family: 'Noto Serif JP', serif;
	font-size: 4.2rem;
	font-weight: 600;
	line-height: 1.5;
}
.section_ttl > span, .section_ttl_hair_styling_sticks > span {
	position: relative;
	padding: 0 20px;
}
.section_ttl > span + br + span, .section_ttl_hair_styling_sticks > span + br + span {
	padding-left: 0;
	margin-left: -20px;
}
.section_ttl > span::before, .section_ttl_hair_styling_sticks > span::before {
	content: "";
	position: absolute;
	bottom: -5px;
	left: 0;
	width: 100%;
	height: 25px;
	background: #f2d4e5;
	z-index: -1;
}
.section_ttl > small, .section_ttl_hair_styling_sticks > small {
	display: block;
	font-size: 2.4rem;
	margin-bottom: 10px;
}
.section_txt {
	font-size: 1.8rem;
	line-height: 2;
	margin-top: 30px;
	width:600px;
}

#introduction {
	margin-top: 90px;
}
.img_slide {
	position: relative;
	width: 1218px;
	margin: 60px auto 0;
}

.point1_txt { font-size: 1.6rem; line-height: 1.9; width:300px; padding:0 20px; }
.point2_txt, .point4_txt, .point5_txt, .point6_txt { font-size: 1.6rem;  width:454px; padding:10px 20px; line-height:26px;}
.point3_txt { font-size: 1.6rem;  width:454px; padding:10px 25px; line-height:26px; margin-top:-30px;}

.purple { color:#7d4698;font-weight:bold }
.pink { color:#e75c9a;font-weight:bold }

.hair-styling-stick-container { width:750px; position:relative; margin:0 auto; }
.hair-styling-stick-img { float:left; margin-right:30px; width:260px;}
.hair-styling-stick-text { float:left;  width:400px; padding-top:30px; line-height:30px;}

@media screen and (max-width:1400px){
	.img_slide {
		width: 88vw;
	}
}
.img_slide .swiper-container {
	padding-bottom: 0;
}
.img_slide .swiper-wrapper {
	-webkit-box-pack: justify;
	-ms-flex-pack: justify;
	justify-content: space-between;
}
.img_slide .swiper-slide img {
	max-width: 350px;
}
.img_slide .slide_arrow {
	background-color: #551418;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background-size: 22%;
	box-sizing: border-box;
	opacity: .7 !important;
	transition: opacity 0.6s cubic-bezier(.19,1,.22,1);
}
.img_slide .slide_arrow:hover {
	opacity: 1 !important;
}
.img_slide .swiper-button-next {
	right: -20px;
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23ffffff'%2F%3E%3C%2Fsvg%3E");
}
.img_slide .swiper-button-prev {
	left: -20px;
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23ffffff'%2F%3E%3C%2Fsvg%3E");
}

#remort {
	margin-top: -100px;
	padding: 240px 0 120px;
}
#remort::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 120%;
	height: 930px;
	background: #fdecf5;
	margin: -80px -10% 0;
	transform-origin: right center;
	transform: rotate(-6deg);
	z-index: -1;
}
#remort .section_ttl {
	color: #e4007f;
	font-size: 2.4rem;
	line-height: 2;
	letter-spacing: 0;
}

.library_img {
	position: absolute;
	width: 29.85vw;
}
@media screen and (min-width:1400px){
	.library_img {
		width: 418px;
	}
}
#remort_imgL {
	bottom: 0;
	left: -60px;
}
#remort_imgR {
	bottom: 190px;
	right: -85px;
}

#movie {
	margin-top: 110px;
}

#point {
	margin-top: 80px;
}
.point_wrap {
	width: 1100px;
	margin: auto;
	margin-top: 60px;
}
.point_block {
	position: relative;
	margin-top: 40px;
	padding: 60px 0 40px;
	background: #f9f9f1;
	border-radius: 10px;
	box-sizing: border-box;
	overflow: hidden;
}
#point1 {
	background: #f9f9f1 url(../img/products/hair-styling-stick/point1_bg.jpg) no-repeat top 30px right 25px / 227px auto;
}

.point_block .num {
	position: absolute;
	top: -120px;
	left: -120px;
	width: 215px;
	height: 215px;
}
.point_block .num > span {
	position: absolute;
	right: 45px;
	bottom: 20px;
	color: #fff;
	font-family: 'Noto Serif JP', serif;
	font-size: 4.2rem;
	font-weight: 600;
	z-index: 1;
}
.point_block .num::before {
	content: "";
	display: block;
	width: 215px;
	height: 215px;
	background: #eb6da5;
	transform:rotate(45deg);
}
.point_ttl {
	font-family: 'Noto Serif JP', serif;
	font-size: 2.8rem;
	font-weight: 600;
	line-height: 1.4;
	width:350px;
}
.point_txt {
	font-size: 1.6rem;
	line-height: 1.9;
	margin-top: 20px;
	width:500px;
}
.point_img {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	-webkit-box-align: end;
	-ms-flex-align: end;
	align-items: flex-end;
	margin-top: 40px;
}
.point_img img {
	width: 100%;
}
.point_img .block {
	position: relative;
}
.point_img .block + .block {
	margin-left: 15px;
}
#point1 .point_img .block:last-child {
	margin-left: 30px;
}
#point1 .point_img .block::after {
	content: "";
	position: absolute;
	bottom: 30px;
	right: -20px;
	width: 33px;
	height: 21px;
	background: url(../img/products/hair-styling-stick/point1_arrow.png) no-repeat center center / 100%;
}
#point1 .point_img #point1_img3.block::after {
	display: none;
}
#point1_img1 img {
	width: 342px;
}
#point1_img2 img {
	width: 288px;
}
#point1_img3 img {
	width: 177px;
}
.point_img .block p {
	position: relative;
	height: 60px;
	margin-top: 40px;
	font-size: 1.3rem;
	line-height: 1.6;
}
.point_flex {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	-webkit-box-pack: justify;
	-ms-flex-pack: justify;
	justify-content: space-between;
	-webkit-box-align: start;
	-ms-flex-align: start;
	align-items: flex-start;
}
.point_flex .point_block {
	width: 530px;
	padding: 60px 43px 40px;
}
.point_prescription {
	margin-top: 30px;
}
.point_prescription + .point_prescription {
	margin-top: 40px;
}
.point_subttl {
	color: #eb6da5;
	font-size: 2.2rem;
	font-weight: 700;
}
.point_prescription .point_txt {
	margin-top: 5px;
}
.point_prescription .point_img {
	margin-top: 25px;
}
.point_prescription .point_img img {
	border-radius: 10px;
}
#point4 {
	margin-top: -394px;
}
#point6 {
	margin-top: -255px;
}

#twoWay {
	margin-top: -100px;
	padding: 200px 0 120px;
}
#twoWay::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 120%;
	height: 1100px;
	background: #fdf5ff;
	margin: -80px -10% 0;
	transform-origin: right center;
	transform: rotate(-6deg);
	z-index: -1;
}
#twoWay .section_ttl {
	font-size: 3.6rem;
	line-height: 1.4;
}
#twoWay .section_txt {
	margin-top: 60px;
}
#twoWay .img_wrap {
	width: 564px;
	margin: 40px auto 0;
}

#arrange {
	margin-top: 40px;
}
#arrange .section_ttl {
	font-size: 3.6rem;
	line-height: 1.2;
}
#arrange .img_wrap {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: justify;
	-ms-flex-pack: justify;
	justify-content: space-between;
	width: 1162px;
	margin: 70px auto 0;
}
#arrange .img_wrap .img_block {
	width: 276px;
}
#arrange .img_wrap .img_block .caption {
	color: #188497;
	font-size: 1.8rem;
	font-weight: 400;
	line-height: 1.6;
	margin-top: 20px;
}
#arrange .movie_wrap {
	margin-top: 60px;
}

#product {
	margin: 122px auto 65px;
}
.product_wrap {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: justify;
	-ms-flex-pack: justify;
	justify-content: space-between;
	width: 1162px;
	margin: auto;
}
.product_block {
	position: relative;
	width: 550px;
	padding: 60px 80px 155px;
	border-radius: 10px;
	box-sizing: border-box;
	text-align: left;
}
#stick_hard {
	background: #ffedf3;
}
#stick_natural {
	background: #faf1f4;
}
.product_block .package_img {
	width: 232.5px;
	margin: auto;
}
.product_block .category {
	color: #e4007f;
	font-size: 1.6rem;
	font-weight: 400;
	margin-top: 40px;
}
.product_block .product_name {
	font-size: 2.4rem;
	font-weight: 700;
	line-height: 1.25;
	margin-top: 10px;
}
.product_block .product_txt {
	font-size: 2.0rem;
	font-weight: 400;
	line-height: 1.5;
	margin-top: 20px;
}
.product_block .btn {
	position: absolute;
	bottom: 55px;
	left: 0;
	right: 0;
	margin: auto;
	text-align: center;
}

@keyframes fadeIn {
	0% {opacity: 0;}
	100% {opacity: 1;}
}


.product-2-column-560px { padding:15px!important; }

.product-name { font-size:14px!important; }

/*======================================
Tablet
======================================*/
@media screen and (max-width:960px){
	.img_slide {
		width: 84vw;
	}
	#remort {
		margin-top: -60px;
		padding: 120px 0 90px;
	}
	#remort::before {
		width: 140vw;
		height: 130vw;
		margin: -80px -20vw 0;
	}
	#remort .img_wrap {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-pack: center;
		-ms-flex-pack: center;
		justify-content: center;
	}
	.library_img {
		position: static;
		margin: 40px 2vw 0;
	}
	iframe {
		width: 90vw;
		height: 51vw;
	}
	#point1 {
		background-position: top 110px right 20px;
		background-size: 16vw;
	}
	#point .wrap {
		width: 94vw;
		margin-left: auto;
		margin-right: auto;
	}
	.point_wrap {
		width: 100%;
	}
	#point1 .point_img .block {
		width: 29.5%;
	}
	#point4 {
		margin-top: -43vw;
	}
	#point6 {
		margin-top: -26.5vw;
	}
	.point_flex .point_block {
		width: 46vw;
		margin-top: 20px;
	}
	#arrange .img_wrap {
		width: 90vw;
	}
	#arrange .img_wrap .img_block {
		width: 32%;
	}
	#arrange .img_wrap .img_block .caption {
		font-size: 1.4rem;
	}
	.product_wrap {
		width: 90vw;
	}
	.product_block {
		width: 44vw;
		padding: 60px 5vw 155px;
	}
	.product_block .btn {
		width: 34vw;
	}
	
	.point_ttl { width:310px; }
	.point_txt { width:330px; }
	.point1_txt { width:200px; padding:0; margin-bottom:40px; display:block;}
	.point2_txt, .point4_txt, .point5_txt, .point6_txt { width:300px; padding:20px 0; }
	.point3_txt { width:300px; padding:20px 0; }
	
}



/*======================================
SP
======================================*/
@media screen and (max-width:768px){
	.wrap {
		width: 82vw;
		margin-left: auto;
		margin-right: auto;
	}
	.section_ttl, .section_ttl_hair_styling_sticks {
		font-size: 7vw;
		letter-spacing: 0;
	}
	.section_ttl > span {
		padding: 0 2vw;
	}
	.section_ttl > span + br + span  {
		padding-left: 2vw;
		margin-left: auto;
	}
	
	.section_ttl > span::before {
		bottom: 1px;
		height: 20px;
	}

	.section_ttl > small, .section_ttl_hair_styling_sticks > small {
		font-size: 4.5vw;
	}
	.section_txt {
		font-size: 4vw;
		margin-top: 20px;
		width:100%;
	}

	#introduction {
		margin: 40px 4vw 0;
	}
	.img_slide {
		width: 78vw;
		margin-top: 40px;
	}
	.img_slide .slide_arrow {
		width: 9vw;
		height: 9vw;
		background-size: 2.2vw;
	}
	.img_slide .swiper-button-prev {
		left: -5vw;
	}
	.img_slide .swiper-button-next {
		right: -5vw;
	}

	#remort {
		margin-top: -20px;
		padding-top: 60px;
	}
	#remort::before {
		height: 316vw;
	}
	#remort .section_ttl {
		font-size: 5.2vw;
		line-height: 1.8;
	}
	.library_img {
		width: 41vw;
		margin-top: 20px;
	}


	#movie {
		margin-top: 40px;
	}

	#point {
		margin-top: 60px;
	}
	#point1 {
		background: #f9f9f1;
	}
	#point .wrap {
		width: 90vw;
	}
	.point_wrap {
		margin-top: 40px;
	}
	.point_block {
		margin-top: 20px;
		padding: 50px 5vw 40px;
		border-radius: 3vw;
	}
	#point4, #point6 {
		margin-top: 20px;
	}
	.point_block .num {
		top: -15vw;
		left: -16vw;
		width: 30vw;
		height: 30vw;
	}
	.point_block .num::before {
		width: 30vw;
		height: 30vw;
	}
	.point_block .num > span {
		right: 6vw;
		bottom: 3.5vw;
		font-size: 6vw;
	}
	.point_ttl {
		font-size: 5vw;
		width:300px;
	}
	.point_txt {
		font-size: 3.5vw;
		margin-top: 15px;
		width:100%;
	}
	#point1 .point_img {
		display: block;
		margin-top: 40px;
	}
	.point1_txt, .point2_txt, .point3_txt, .point4_txt, .point5_txt, .point6_txt { width:100%; padding:10px 0;}
	
	.point_img {
		margin-top: 20px;
	}
	.point_img .block + .block {
		margin-left: 0;
	}
	#point1 .point_img .block {
		width: 100%;
	}
	#point1 .point_img .block:last-child {
		margin-left: 0;
	}
	#point1_img1 img {
		width: 90%;
	}
	#point1_img2 img {
		width: 80%;
	}
	#point1_img3 img {
		width: 40%;
	}
	.point_img .block p {
		height: auto;
		margin-top: 15px;
		font-size: 3vw;
	}
	#point1 .point_img .block::after {
		display: block;
		position: static;
		width: 100%;
		height: 5vw;
		margin: 20px 0;
		background-size: 8vw auto;
		transform: rotate(90deg);
		pointer-events: none;
	}
	.point_flex .point_block {
		width: 100%;
		padding: 40px 5vw 40px;
	}
	.point_prescription {
		margin-top: 20px;
	}
	.point_prescription + .point_prescription {
		margin-top: 20px;
	}
	.point_prescription .point_img img {
		border-radius: 2vw;
	}
	.point_subttl {
		font-size: 4.5vw;
	}

	#twoWay {
		margin-top: 0;
		padding: 60px 0 120px;
	}
	#twoWay::before {
		width: 140vw;
		height: 182vw;
		margin: -80px -20vw 0;
	}
	#twoWay .section_ttl {
		font-size: 6vw;
	}
	#twoWay .section_txt {
		margin-top: 40px;
	}
	#twoWay .img_wrap {
		width: 100%;
		margin-top: 30px;
	}

	#arrange {
		margin-top: -10px;
	}
	#arrange .section_ttl {
		font-size: 6vw;
	}
	#arrange .img_wrap {
		display: block;
		margin-top: 50px;
	}
	#arrange .img_wrap .img_block {
		width: 100%;
	}
	#arrange .img_wrap .img_block + .img_block {
		margin-top: 30px;
	}
	#arrange .img_wrap .img_block .caption {
		font-size: 4vw;
		margin-top: 15px;
	}

	#product {
		margin: 100px auto 50px;
	}
	.product_wrap {
		display: block;
	}
	.product_block {
		width: 100%;
		padding: 40px 7vw 110px;
		border-radius: 3vw;
	}
	.product_block + .product_block {
		margin-top: 20px;
	}
	.product_block .package_img {
		width: 60%;
	}
	.product_block .category {
		font-size: 3.5vw;
		margin-top: 20px;
	}
	.product_block .product_name {
		font-size: 5.2vw;
	}
	.product_block .product_txt {
		font-size: 4vw;
		margin-top: 15px;
	}
	.product_block .btn {
		width: 76vw;
		bottom: 40px;
	}

	.topics_btn {
		width: 90vw;
		margin: auto;
		border: 1px solid #ddd;
		border-radius: 1vw;
	}
	
	
	.hair-styling-stick-container { width:100%; }
    .hair-styling-stick-text { float:none; width:100%;}
	.hair-styling-stick-img { float:none; margin-right:0; width:80%; }
	

}

@media screen and (min-width:320px) and (max-width:520px){
	.section_ttl_hair_styling_sticks > span::before {
		bottom: 1px;
		height: 20px;
		margin-left:-60px;
		width:117%;
	}
}

@media screen and (min-width:521px) and (max-width:600px){
	.section_ttl_hair_styling_sticks > span::before {
		bottom: 1px;
		height: 20px;
		margin-left:-70px;
		width:118%;
	}
}

@media screen and (min-width:601px) and (max-width:680px){
	.section_ttl_hair_styling_sticks > span::before {
		bottom: 1px;
		height: 20px;
		margin-left:-76px;
		width:119%;
	}
}

@media screen and (min-width:681px) and (max-width:750px){
	.section_ttl_hair_styling_sticks > span::before {
		bottom: 1px;
		height: 20px;
		margin-left:-86px;
		width:120%;
	}
}

@media screen and (min-width:751px) and (max-width:768px){
	.section_ttl_hair_styling_sticks > span::before {
		bottom: 1px;
		height: 20px;
		margin-left:-94px;
		width:120%;
	}
}