@charset "utf-8";

/* config.css */
body{
/*  font-family: "A+EqpB-游ゴシック体 Pr6N M",DJJULaiBARbFBPMh,YuGothic,"Yu Gothic",NoChattering,sans-serif;*/
font-family: yu-gothic-pr6n, sans-serif;
}
html,
body,
.lp_wrap * {
  margin: 0;
  padding: 0;
  outline: none;
}
.lp_wrap * {
  /* font-size: 10px; */
  font-weight: normal;
  line-height: 1.6;
}
.lp_wrap {
  width: 100%;
  margin: auto;
  overflow: hidden;
}
.lp_wrap ul,
.lp_wrap ol,
.lp_wrap dl {
  list-style: none;
}
.lp_wrap img,
.lp_wrap video {
  display: inline-block;
  max-width: 100%;
  height: auto;
  vertical-align: top;
}
.lp_wrap section {
  position: relative;
}
.lp_wrap .slider {
  display: none;
}
.lp_wrap .slider.slick-initialized {
  display: block;
}
.lp_wrap .slider .slick-arrow {
  cursor: pointer;
}
.lp_wrap .slider .slick-list {
  cursor: grab;
}
.lp_wrap .slider .slick-list:active {
  cursor: grabbing;
}
.lp_wrap .slider .slick-dots li * {
  display: none;
}
.relative {
  position: relative;
}
img {
  vertical-align: bottom !important;
}



/* ---------------------------------
  動き[a]の設定 .inview-blur .blur
--------------------------------- */
.inview-blur{
  opacity: 0;
  -moz-transition: -moz-transform 1s linear;
  -webkit-transition: -webkit-transform 1s linear;
  -o-transition: -o-transform 1s linear;
  -ms-transition: -ms-transform 1s linear;
  transition: transform 1s linear;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}
.blur{
  -webkit-animation-name: imageBlur;
  animation-name: imageBlur;
  opacity: 1;
  transition: .8s;
}
@keyframes imageBlur {
  from {
    opacity: 0;
    -webkit-filter: blur(15px);
    -moz-filter: blur(15px);
    -ms-filter: blur(15px);
    -o-filter: blur(15px);
    filter: blur(15px);
  }
  to {
      opacity: 1;
    -webkit-filter: blur(0px);
    -moz-filter: blur(0px);
    -ms-filter: blur(0px);
    -o-filter: blur(0px);
    filter: blur(0px);
  }
}

/* ---------------------------
  動き[b]の設定 typeing
--------------------------- */
.typeing {
    opacity: 0;
}
.typeing.active {
  opacity: 1;
}
.typeing span{
  opacity: 0;
  -webkit-transition: .6s ease-in-out;
  transition: .6s ease-in-out;
}

/* ---------------------------
  動き[c]の設定 fd-down
--------------------------- */
.fd-down{
  opacity: 0;
  transform : translate(0, -200px);
  transition : all 1s;
}
.fd-down.active{
  transform : translate(0px, 0);
  opacity: 1;
}
/* config.css */

/* style.css */
a{
  transition: all .3s cubic-bezier(0.645, 0.045, 0.355, 1);
}
a:hover{
  opacity: 0.7;
}
.lp_wrap section{
  margin-top: -0.5px;
}

.basis_txt {
	position: absolute;
	width: 70%;
	font-size: 1.5em;
	line-height: 2.5;
	bottom: 10%;
	right: 0;
	left: 0;
	margin: 0 auto;
}

/* ---------------------------
  float  float_in
--------------------------- */
.lp_wrap .float{
  position: fixed;
  bottom: 1%;
  left: 0;
  right: 0;
  z-index: 10;
  max-width: 568px;
  width: 100%;
  margin: auto;
  display: none;
}
.lp_wrap .float a{
  display: block;
}
.lp_wrap .float::after{
  content: "";
  display: block;
  position: absolute;
  top: 0%;
  right: 2.7%;
  width: 20.303%;
  height: 84%;
  pointer-events: none;
}
.lp_wrap .float.trigger::after{
  animation: 10s float_after linear infinite;
}
@keyframes float_after{
  to{
    transform: rotateZ(-360deg);
  }
}

/* .float_in{
  width: 100%;
  padding: 0 0 64px;
  background: #F5F3EF;
} */
.float_in .tit004{
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
  text-align: center;
  position: absolute;
  top: 160px;
  left: 0;
  width: 100%;
  text-align: center;
}
.float_in .tit004 span{
  /*font-size: 62px;
  font-feature-settings: "palt";
  letter-spacing:  0.18em;
  font-weight: 100;
  color: #7e695c;*/
  display: block;
}
.float_in .tit004 span:last-child{
  margin: 0 20px 0 10px;
}
.float_in video{
  display: block;
  margin: 0 auto;
}

.iron_temp_btn {
	display: block;
	max-width: 470px;
	margin: 30px auto 50px;
}


/* アコーディオン */
.lp_wrap .exchange a {
    position: absolute;
    top: 93.7%;
    left: 53.3%;
    width: 9%;
    height: 3%;
    cursor: pointer;
}

/* ---------------------------
  video
--------------------------- */
.video {
  position: absolute;
  top: 20%;
  height: auto;
}
.video video{
  -webkit-border-radius:15px;
  -moz-border-radius:15px;
  border-radius:15px;
}

/* ---------------------------
  qa
--------------------------- */
.lp_wrap .qa .list{
  padding: 0% 0% 10%;
}
.lp_wrap .qa .list dt{
  position: relative;
  cursor: pointer;
}
.lp_wrap .qa .list dt::after{
  content: "";
  display: block;
  position: absolute;
  top: 21%;
  right: 9%;
  width: 4.545%;
  height: 100%;
  background: url("/images/item/silkysalon/oil/qa-icon.png") center center/contain no-repeat;
  transition: 0.6s;
}
.lp_wrap .qa .list dt:nth-child(1)::after{
  top: 10%;
}
.lp_wrap .qa .list dt:nth-child(13)::after{
  background: none;
  display:none; 
}
.lp_wrap .qa .list dt.open::after{
  transform: rotateZ(45deg);
}
.lp_wrap .qa .list dd{
  display: none;
}


.impression .damage_top_txt{
  position: absolute;
  top: 986px;
  left: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 60px;
  background: #fff;
}
.impression .damage_top_txt span{
  display: block;
  height: 1em;
  font-size: 60px;
}
.impression .damage_top_txt span:nth-child(2){
  height: 0.9em;
  margin-left: -0.2em;
  margin-right: 0.3em;
  margin-bottom: 0.1em;
}
.impression .damage_top_txt span:nth-child(3){
  height: 0.12em;
  margin-right: 0.3em;
}
.impression .damage_top_txt span:nth-child(3) img{
  vertical-align: top !important;
}
.impression .damage_top_txt span img{
  width: auto;
  height: 100%;
}
.impression .img_rotate{
  position: absolute;
  top: 828px;
  left: 117px;
  width: 246px;
  animation: 50s linear infinite rotation;
}
@keyframes rotation{
  0%{ transform:rotate(0);}
  100%{ transform:rotate(360deg); }
}
/* style.css */


.iwrap {
	margin-top: -5px;
	overflow: hidden;
	font-family: var(--Fyg),var(--Fip);
	font-size: 21px;
	color: #7d6c69;
	line-height: 1.8;
	letter-spacing: 1px;
	min-width: 1500px;
}
.iwrap *{
	box-sizing: border-box;
	word-wrap: break-word;
}
.Tpink {
	color: #cc8a98;
}
.Tbrown {
	color: #7d6c69;
}

.iwrap img{
	max-width: 100%;
}
.iwrap a{
	transition: 0.3s;
}
.iwrap a:hover{
	opacity: 0.7;
}
.wide{
	position: relative;
	z-index: 2;
	max-width: 1120px;
	width: 100%;
	margin: 0 auto;
}
.iwrap.sup{
	position: relative;
	top: -8px;
	display: inline-block;
	vertical-align: middle;
	font-size: 12px;
	line-height: 0.8;
	letter-spacing: 0;
}
.iwrap .notes{
	font-size: 12px;
	line-height: 1.7;
	letter-spacing: 0;
}
.iwrap .notexs{
	font-size: 12px;
	line-height: 1.7;
	letter-spacing: 0;
	transform:scale(0.9);
	margin-left: -5%;
	margin-right: -5%;
}
.iwrap .btn a {
	background: #7d6c69;
	box-shadow: 8px 8px 0 rgb(100 80 80 / 20%);
	padding: 16px 10px 20px;
}
.fade_up {
	opacity: 0;
	transform: translate(0, 30%);
	transition: 1s;
}
.fade_up.active {
	transform: translate(0, 0);
	opacity: 1;
}

.iwrap .fv{
	position: relative;
	width: 100%;
	background: url(/images/item/silkysalon/oil/fv_bg.jpg) no-repeat top 50% center;
	background-size: cover;
	text-align: right;
	padding-bottom: 120px;
}
.iwrap .fv .inner {
	width: 1000px;
	margin: 0 auto;
}
.iwrap .fv .fvoil {
	margin: 100px auto 20px;
}
.iwrap .fv .ttl2 {
	position: absolute;
	top: 15%;
	left: 33%;
}
.iwrap .fv .ttl3 {
	position: absolute;
	top: 5%;
	right: 34%;
}
.iwrap .fv h2 {
	font-size: 30px;
	text-align: center;
	font-weight: bold;
}
.iwrap .fv .note {
	position: absolute;
	top: 60%;
  right: 24%;
	font-size: 12px;
	margin-right: 100px;
}
.iwrap .btn a::after {
	margin-bottom: 7px;
}

.iwrap .intro {
	background: #efefef;
	position: relative;
}
.iwrap .intro img.poab {
	top: 150px;
	right: 350px;
}

.scene{
  position: relative;
  padding-bottom: 150px;
  background: #DFD8CA;
  overflow: hidden;
}
.scene h2 {
	text-align: center;
	padding: 100px 0 50px;
}
.scene .flex{
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  width: 900px;
  margin: auto;
	padding-bottom: 50px;
}
.scene .flex img{
  width: 226px;
  height: auto;
}
.slide_up{
  opacity: 0;
  transform: translateY(500px);
  transition: all 1s;
}
.slide_up.ready {
  opacity: 1;
  transform: translateY(0px);
}

.iwrap .nayami {
	background-size: cover;
	padding-top: 10px;
	padding-bottom: 200px;
}
.iwrap .nayami .nayami_bg1 {
	background: linear-gradient(180deg, #F5F1EC, #E0D6C9, #CC8A98);
}
.iwrap .nayami .nayami_bg2 {
	background:url(/images/item/silkysalon/oil/nayami_bg2_01.png)no-repeat top center, url(/images/item/silkysalon/oil/nayami_model1.png)no-repeat  bottom center, linear-gradient(180deg, #fff, #EBE6E4);
	background-size: 100% 60%, 55% ,100%;
	padding-bottom: 500px;
	border-radius: 0 0 45% 45%;
}
.iwrap .nayami .nayami_bg2::before {
	content: "";
	width: 100%;
	height: 280px;
	top: -1px;
	background-color: #CC8A98;
	position: absolute;
	clip-path: polygon(50% 83%, 101% 0%, -1% 0%);
}
.iwrap .nayami p {
	color: #fff;
	font-size: 40px;
}
.iwrap .nayami p.border {
	padding-top: 75px;
}
.iwrap .nayami .hairset {
	position: relative;
	margin-top: -28px;
}
.iwrap .nayami .hairset ul {
	display: flex;
	position: absolute;
	top: 36%;
	width: 1100px;
	left: 0;
	right: 0;
	margin: 0 auto;
}
.iwrap .nayami .cause {
	position: relative;
	margin: 280px auto 0;
	text-align: center;
}
.iwrap .nayami .cause .txt {
	margin-top: 50px;
}
.iwrap .nayami .cause img {
	margin-bottom: 30px;
}
.iwrap .nayami .cause .next {
	position: absolute;
	bottom: -9%;
	right: 0;
	left: 0;
	margin: 0 auto;
	z-index: 1;
}
/* spanに適用する二重線スタイル */
.double-underline {
	position: relative;
}
.double-underline::after {
	content: '';
	position: absolute;
	left: 0;
	bottom: -15px;
	height: 50%;
	transition: all 1.5s;
	width: 0%;
	border-bottom: 7px double #fff;
}
.double-underline.active:after {
	width: 100%;
}

.iwrap .impression p.border {
	letter-spacing: 0.4em;
}
.iwrap .impression p.border::before {
	content: '';
	background-image: url(/images/item/silkysalon/oil/nayami_deco_l.png);
	background-repeat: no-repeat;
	position: absolute;
	bottom: 4%;
	right: 61%;
	width: 100px;
	height: 100px;
}
.iwrap .impression p.border::after {
	content: '';
	background-image: url(/images/item/silkysalon/oil/nayami_deco_r.png);
	background-repeat: no-repeat;
	position: absolute;
	bottom: 4%;
	right: 31%;
	width: 100px;
	height: 100px;
}
.txtdots {
	text-emphasis: dot #fff;
}
.iwrap .nayami .txt1 {
	padding-top: 15%;
	margin-bottom: 80px;
	text-align: center;
	font-size: 40px;
}
.iwrap .nayami .model {
	left:11%;
	bottom: 0;
	margin: 0 auto;
}
.iwrap .nayami .txt1 .txtbox {
	background: #7d6c69;
	color: #fff;
	padding: 13px 20px;
	margin-right: 30px;
}
.iwrap .nayami .txt2 {
	position: absolute;
	right: 31%;
	bottom: 37%;
}

.iwrap .feature {
	color: #7d6c69;
	background: url(/images/item/silkysalon/oil/point_bg.png) no-repeat top 20px center;
	background-size: cover;
	margin-top: 100px;
}
.iwrap .feature h2 {
	padding-top: 0;
	font-size: medium;
}
.iwrap .feature .point {
	text-align: center;
	font-size: 30px;
	margin-bottom: 100px;
}
.iwrap .feature .point .ttl {
	display: flex;
	justify-content: center;
	align-items: center;
	margin-bottom: 20px;
}
.iwrap .feature .point .note {
	width: 70%;
	text-align: right;
	font-size: 12px;
}
.iwrap .feature .point ul {
	display: flex;
	width: 60%;
	margin: 0 auto;
	justify-content: center;
}
.iwrap .feature .point ul li:first-child {
	margin-right: 50px;
}
.iwrap .feature .point2 .point .note1 {
	width: 67%;
}

.iwrap .commit {
	background: linear-gradient(180deg, #fff, #fef9de);
	margin: 200px auto 0;
	padding-bottom: 100px;
}
.iwrap .commit h3, .iwrap .commit p {
	text-align: center;
}
.iwrap .commit p {
	line-height: 1.3;
}
.iwrap .commit p.Tpink {
	font-weight: bold;
	margin: 5px auto 60px;
}
.iwrap .commit ul {
	display: flex;
	flex-wrap: wrap;
	column-count: 2;
	justify-content: space-around;
	margin: 40px auto 10px;
	width: 750px;
}

.iwrap .compfree {
	background: linear-gradient(180deg, #fff, #f5f1ec);
	margin: 150px auto 0;
	padding-bottom: 200px;
}
.iwrap .compfree h2 {
	margin-bottom: 150px;
}
.iwrap .compfree h2, .iwrap .compfree h3 {
	text-align: center;
}
.iwrap .compfree ul {
	display: flex;
	justify-content: space-evenly;
	text-align: center;
	width: 750px;
	margin: 0 auto;
}

.iwrap .fragrance {
	background: url(/images/item/silkysalon/oil/frag_bg.jpg) no-repeat top center;
	background-size: cover;
	text-align: center;
	padding: 150px 0;
	font-size: 25px;
}
.iwrap .fragrance h3 {
	margin-bottom: 80px;
}

.iwrap .howto {
	position: relative;
	background: linear-gradient(180deg, #e1dddf, #fff);
	margin-top: -0.5px;
}
.iwrap .howto .ttl {
	position: absolute;
	top: 100px;
	right: calc(50% - 500px);
}
.iwrap .howto .txt {
	position: absolute;
	right: 0;
	left: 0;
	bottom: 100px;
	text-align: center;
	font-size: 30px;
}

.iwrap .use {
	width: 70%;
	margin: 0 auto 150px;
}
.iwrap .use .step {
	position: relative;
	display: flex;
	background: #F9F6F4;
	padding: 50px;
	font-size: 25px;
	align-items: center;
}
.iwrap .use .step div {
	text-align: center;
	width: 70%;
}
.iwrap .use .step .memo {
	position: relative;
	border: 2px solid #7d6c69;
	width: 70%;
	margin: 50px auto 20px;
	padding: 30px 0 20px;
}
.iwrap .use .step .memo p.poab {
	background: #7d6c69;
	color: #fff;
	width: 250px;
	position: absolute;
	top: -30px;
	right: 0;
	left: 0;
	margin: 0 auto;
	font-size: 1.1em;
}
.iwrap .use .step.s01::before {
	content: '';
	background-image: url(/images/item/silkysalon/oil/step_01ttl.png);
	background-repeat: no-repeat;
	background-size: contain;
	position: absolute;
	top: -29px;
	left: -13px;
	width: 150px;
	height: 150px;
}
.iwrap .use .step.s02::before {
	content: '';
	background-image: url(/images/item/silkysalon/oil/step_02ttl.png);
	background-repeat: no-repeat;
	background-size: contain;
	position: absolute;
	top: -29px;
	left: -13px;
	width: 150px;
	height: 150px;
}
.iwrap .use .step.s03::before {
	content: '';
	background-image: url(/images/item/silkysalon/oil/step_03ttl.png);
	background-repeat: no-repeat;
	background-size: contain;
	position: absolute;
	top: -29px;
	left: -13px;
	width: 150px;
	height: 150px;
}
.iwrap .use .step.s04::before {
	content: '';
	background-image: url(/images/item/silkysalon/oil/step_04ttl.png);
	background-repeat: no-repeat;
	background-size: contain;
	position: absolute;
	top: -29px;
	left: -13px;
	width: 150px;
	height: 150px;

}
.iwrap .use .next {
	display: block;
	margin: 50px auto;
}

.iwrap .qa {
	width: 100%;
	margin: 200px auto 0;
}
.iwrap .qa_item{
	background: none;
	box-shadow: none;
	margin-top: 50px;
	width: 900px;
	letter-spacing: 0;
}
.iwrap .qa dt.acoA{
	display: flex;
	align-items: center;
	transition: 0.3s;
	font-size: 27px;
	border-bottom: 1px solid #7d6c69;
	padding: 0;
}
.iwrap .qa dt.acoA:before{
	content: none;
}
.iwrap .qa .acoA:hover{
	opacity: 0.6;
}
.iwrap .qa .acoA span{
	width: 90px;
	margin-right: 16px;
	line-height: 0;
}
.iwrap .qa .acoA p{
	line-height: 1.4;
	padding-top: 14px;
	padding-bottom: 14px;
}
.iwrap .qa .acoA p img{
	height: 24px;
	width: auto;
}
.iwrap .qa .acoB{
	margin: 20px 0;
	background: #F5F1EC;
}
.iwrap .qa dd.acoB {
	padding-left: 0;
	border-left: none;
}
.iwrap .qa_item dd{
	position: relative !important;
	margin-left: -15px;
}
.iwrap .qa_con{
	border-top: none;
	padding: 10px 25px 10px 0;
	margin-left: 45px;
	position: relative;
	font-size: 20px;
	line-height: 1.7;
}
.qa .aarw .acoA:after {
	content: "＋";
	border: none;
	transform:none;
	font-size: 2.5vw;
	top: 0;
	right: 23px;
	width: 40px;
	height: 70px;
	transition: none;
}
.qa .aarw dt.acoA.active:after {
	content: '−';
	color: #7d6c69;
}
.iwrap .qa_con .a_ico{
	position: absolute;
	left: -5px;
	top: 3px;
	width: 40px;
}
.iwrap .qa .qa_con p{
	padding-top: 5px;
}


.iwrap #Buy h3 img {
	margin-top: 50px;
}
@media only screen and (min-width: 2000px) {
	.fv .pore,.fv .pore img{
		width: 100%;
	}
	.culture,.work,.poi{
		background-size: 100% 100%;
	}
	.world,.pene,.penebg2{
		background-size: 100% auto;
	}
}
@media only screen and (min-width: 768px) and (max-width: 960px) {
	.fv .txt{
		width: 80%;
		left: 10%;
	}
}


.iwrap #Buy {
	margin-top: 200px;
}
.iwrap #Buy .note {
	width: 1200px;
	margin: 30px auto 0;
	font-size: .8em;
	text-align: right;
}
.iwrap #Buy .buyReg {
	width: 1200px;
	margin: 0 auto;
}
.iwrap #Buy .buyReg .box {
	position: relative;
	background: #F5F1ED;
	text-align: center;
	color: #7d6c69;
	padding-bottom: 30px;
}
.iwrap #Buy .buyReg .box .fle {
	justify-content: space-around;
	padding-top: 20px;
}
.iwrap #Buy .buyReg .box.reg1 {
	margin: 100px 0;
}
.iwrap #Buy .buyReg .box.reg1::after {
	content: '';
	background-image: url(/images/item/silkysalon/oil/20off.svg);
	background-repeat: no-repeat;
	background-size: contain;
	position: absolute;
	top: 199px;
	left: 28%;
	width: 180px;
	height: 180px;
}
.iwrap #Buy .buyReg .box.reg1 h3 {
	background: #CC8A98;
	color: #fff;
	font-weight: bold;
	font-size: 2.5em;
	padding: 60px 0 20px;
}
.iwrap #Buy .buyReg .box.reg1 img.product {
	margin-top: 130px;
}
.iwrap #Buy .buyReg .box p {
	padding-right: 5%;
}
.iwrap #Buy .buyReg .box.reg1 p.wari {
	font-size: 1.4em;
	background: #7d6c69;
	font-weight: bold;
	color: #fff;
	width: 145px;
	margin: 0 auto;
}
.iwrap #Buy .buyReg .box p.note {
	font-size: .8em;
	text-align: left;
	padding-left: 70px;
}
.iwrap #Buy .buyReg .box.reg1 h3::before {
	content: '';
	background-image: url(/images/item/silkysalon/oil/20off_ttl.svg);
	background-repeat: no-repeat;
	background-size: contain;
	position: absolute;
	top: -55px;
	left: 0;
	right: 0;
	margin: 0 auto;
	width: 400px;
	height: 200px;
}
.iwrap #Buy .box.one .fle {
	width: 1100px;
	margin: 40px auto;
}
.iwrap #Buy .box.one h3, #Buy .box.three h3 {
	background: #7d6c69;
	color: #fff;
	font-weight: bold;
	font-size: 2em;
	padding: 10px;
}
.iwrap #Buy .box.one form {
	margin-top: 20px;
}
.iwrap .ispec, .iwrap .ite, footer {
	color: #000;
}

#Buy .box.three h3 {
	padding: 30px 0;
}
.iwrap #Buy .buyReg .box.three img.product {
	margin-top: 150px;
	width: 550px;
}
.iwrap #Buy .buyReg .box.three img.price {
	margin-right: 30px;
}
.iwrap #Buy .buyReg .box.three::after {
	content: '';
	background-image: url(/images/item/silkysalon/oil/15off.svg);
	background-repeat: no-repeat;
	background-size: contain;
	position: absolute;
	top: 160px;
	left: 28%;
	width: 180px;
	height: 180px;
}
#Buy .box.three h3::before {
	content: '';
	background-image: url(/images/item/silkysalon/oil/cta_new.svg);
	background-repeat: no-repeat;
	background-size: contain;
	position: absolute;
	top: -0.6%;
	left: 5%;
	width: 18%;
	height: 18%;
}
#Buy .box.three img.product {
  position: relative;
  width: 90%;
  z-index: 3;
}

/* iron */
.special_bottom{
  position: relative;
	margin: -50px auto 0;
	background: url(/images/item/silkysalon/oil/special_bgtxt.png),#ECE8E0;
	background-repeat: no-repeat;
	background-size: 800px;
	background-position: 95% 0;
}
.special_bottom h2 {
	margin: 20px 0 30px;
}
.special_bottom .inview-blur {
  position: absolute;
  bottom: 200px;
  right: 300px;
  width: 430px;
}
/* .special_bottom .movarea img {
	position: absolute;
	top: 162px;
	left: 226px;
} */
.special_bottom .movarea video {
	position: absolute;
	top: 161px;
	left: 23px;
}
.special_bottom .inner {
	width: 1300px;
	margin: 0 auto;
	padding: 100px 0;
}
.special_bottom p.poab {
	font-size: .6em;
	right: 300px;
	bottom: 140px;
}


.satisfaction{
  position: relative;
  margin-top: -4vw;
  z-index: 2;
}
.satisfaction .circle_area{
  position: absolute;
  top: 0;
  left: 408px;
  bottom: 0;
  width: 400px;
  height: 400px;
  margin: auto;
}
@media (width < 1600px) {
	.satisfaction .circle_area{
		position: absolute;
		top: 0;
		left: 208px;
		bottom: 0;
		width: 400px;
		height: 400px;
		margin: auto;
	}
}
.satisfaction .circle_in{
  position: relative;
}
.satisfaction .svg {
  position: absolute;
  top: -8px;
  left: -8px;
  z-index: 2;
  transform:rotate(-90deg);
}
.satisfaction .circle-animation{
  fill: transparent;
}
.satisfaction .active .circle-animation {
  stroke: #DBD0BE;
  stroke-width: 20px;
  stroke-linecap: round;
  stroke-dashoffset: 0;
}
.satisfaction .active .circle-animation{
  animation: circleAnim5 2s forwards;
  stroke-dasharray: 854;
}

@keyframes circleAnim5 {
  0% {
    stroke-dasharray: 0 854;
  }
  99.9%, to {
    stroke-dasharray: 744 854;
  }
}
.satisfaction .note {
	position: absolute;
	bottom: 20px;
	left: 30px;
	color: #fff;
	font-size: 0.6em;
}


.circle_area{
  position: relative;
}
.circle_area .flex{
  position: absolute;
  top: 206px;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 28px;
  width: 687px;
  margin: auto;
}
.circle_area .first{
  position: relative;
  width: 273px;
  padding: 0;
  background: none;
}
.circle_area .first img{
  display: block;
  width: 273px;
}
.circle_area .others{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: stretch;
  gap: 30px;
  width: 384px
}
.circle_area .other{
  position: relative;
  width: 176px;
}
.circle_area .other img{
  width: 176px;
}
.circle_area.top .svg {
  position: absolute;
  top: -5px;
  left: -5px;
  right: 0;
  margin: auto;
  z-index: 2;
  transform:rotate(-90deg);
}
.circle_area.top .other .svg {
  top: -5px;
  left: -5px;
}

.circle_area.top .circle-animation{
  fill: transparent;
  opacity: 0;
}
.circle_area.top .active .circle-animation {
  stroke: #C0B296;
  stroke-width: 10px;
  stroke-linecap: round;
  stroke-dashoffset: 0;
}
.circle_area.top .first.active .circle-animation{
  animation: circleAnim 2s forwards;
  stroke-dasharray: 888;
}
.circle_area.top .others.active .other .circle-animation{
  stroke-width: 10px;
}
.circle_area.top .others.active .other._96 .circle-animation{
  animation: circleAnim2 2s forwards;
  stroke-dasharray: 584;
}
.circle_area.top .others.active .other._97 .circle-animation{
  animation: circleAnim3 2s forwards;
  stroke-dasharray: 584;
}
.circle_area.top .others.active .other._93 .circle-animation{
  animation: circleAnim4 2s forwards;
  stroke-dasharray: 584;
}
 
@keyframes circleAnim {
  0% {
    opacity: 0;
    stroke-dasharray: 0 888;
  }
  1%{
    opacity: 1;
  }
  99.9%, to {
    opacity: 1;
    stroke-dasharray: 830 888;
  }
}
.circle_area .iron{
  position: absolute;
  top: -35px;
  right: 0;
  width: 262px;
  z-index: 10;
}
 
@keyframes circleAnim2 {
  0% {
    opacity: 0;
    stroke-dasharray: 0 584;
  }
  1%{
    opacity: 1;
  }
  99.9%, to {
    opacity: 1;
    stroke-dasharray: 524 584;
  }
}
 
@keyframes circleAnim3 {
  0% {
    opacity: 0;
    stroke-dasharray: 0 584;
  }
  1%{
    opacity: 1;
  }
  99.9%, to {
    opacity: 1;
    stroke-dasharray: 528 584;
  }
}
 
@keyframes circleAnim4 {
  0% {
    opacity: 0;
    stroke-dasharray: 0 584;
  }
  1%{
    opacity: 1;
  }
  99.9%, to {
    opacity: 1;
    stroke-dasharray: 514 584;
  }
}

.and{
  position: relative;
  margin-top: -31px;
}
.and .fd-down{
  position: absolute;
  top: 100px;
  right: 90px;
  width: 385px
}

.impression{
  position: relative;
  width: 100%;
	background: #bbb;
	color: #fff;
}
.impression .txt02{
  position: absolute;
  top: 100px;
  left: 0;
  right: 0;
  width:520px;
  margin: auto;
}
@media (width < 1600px) {
	.impression .txt02{
		position: absolute;
		top: -30px;
		left: 0;
		right: 0;
		width:520px;
		margin: 50px auto;
	}
}
.impression ul.fle {
	width: 1000px;
	margin: 0 auto 100px;
}
.impression ul.fle li {
	padding: 0 30px;
}
.impression h2 {
	text-align: center;
	margin: 50px auto;
}

.impression .damage_top_txt{
  position: absolute;
  top: 986px;
  left: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 60px;
  background: #fff;
}
.impression .damage_top_txt span{
  display: block;
  height: 1em;
  font-size: 60px;
}
.impression .damage_top_txt span:nth-child(2){
  height: 0.9em;
  margin-left: -0.2em;
  margin-right: 0.3em;
  margin-bottom: 0.1em;
}
.impression .damage_top_txt span:nth-child(3){
  height: 0.12em;
  margin-right: 0.3em;
}
.impression .damage_top_txt span:nth-child(3) img{
  vertical-align: top !important;
}
.impression .damage_top_txt span img{
  width: auto;
  height: 100%;
}
.impression .img_rotate{
  position: absolute;
  top: 828px;
  left: 117px;
  width: 246px;
  animation: 50s linear infinite rotation;
}
@keyframes rotation{
  0%{ transform:rotate(0);}
  100%{ transform:rotate(360deg); }
}

.impression .img_rotate{
  position: absolute;
  top: 828px;
  left: 117px;
  width: 246px;
  animation: 50s linear infinite rotation;
}
@keyframes rotation{
  0%{ transform:rotate(0);}
  100%{ transform:rotate(360deg); }
}
.special.sp1::before {
	content: "";
	width: 100%;
	height: 150px;
	top: -1px;
	background-color: #bbb;
	position: absolute;
	clip-path: polygon(50% 83%, 101% 0%, -1% 0%);
}

.special{
  position: relative;
	/* margin-bottom: 150px; */
}
.special .slideinLeft,
.special .slideinRight{
  position: absolute;
}
.special .slideinLeft{
  top: 100px;
  left: 0;
  width: 424px;
  margin: auto;
}
.special .slideinLeft.active{
  right: 0;
}
.special .slideinRight{
  top: 177px;
  right: 0;
  width: 286px;
  margin: auto;
}
.special .slideinRight.active{
  left: 0;
}
.special .txt {
	color: #7d6c69;
	position: absolute;
	top: 300px;
	right: 483px;
	text-align: center;
	font-size: 1.5em;
}
.special .txt span {
	border-bottom: 1.5px solid #7d6c69;
	padding-bottom: 20px;
}
.special .typeing{
  position: absolute;
  top: 484px;
  right: 399px;
}
@media (width < 1600px) {
	.special .txt {
		right: 383px;
	}
	.special .typeing{
		position: absolute;
		top: 484px;
		right: 299px;
	}
}
.special .typeing p{
  display: flex;
  align-items: baseline;
  gap: 20px;
}
.special .typeing p + p{
  margin-top: 26px;
}
.special .typeing span.u{
  margin-right: 5px;
}
.special .typeing span.bou{
  height: 54px;
  margin: auto;
}
.special .typeing span.maru{
  margin-left: -13px;
}

.lp_wrap section.details {
	margin-top: 200px;
}
.details01{
  position: relative;
  margin-top: -0.5em;
	background: #ABAFB3;
	padding-bottom: 60px;
}
.details01 .details_in{
  width: 792px;
  margin: -300px auto 150px;
}
.details01 .details_in .fd-down{
  position: absolute;
  bottom: 96px;
  left: 69px;
  width: 336px;
}
.details02 {
	background: #E6E7E9;
	padding-bottom: 60px;
	position: relative;
  margin-top: -0.5em;
}
.details02 .details_in{
  width: 792px;
  margin: auto;
	margin: -300px auto 50px;
}
.details02 .slide_up_p{
  position: absolute;
	bottom: 364px;
	right: calc(50% - 320px);
  width: 260px;
  overflow: hidden;
}
.details02 .slide_up_p img.slide_up{
  opacity: 0;
  z-index: 2;
}
.details02 .slide_up_p img.slide_up.active{
  opacity: 1;
}
.details02 .slide_up{
  opacity: 0;
}
.details01 .inview-blur,
.details02 .inview-blur{
  animation-delay: 0.5s;
}

.keep {
  position: relative;
	text-align: center;
	margin: 0 auto 100px;
	width: 1200px;
}
.keep p.note {
	font-size: .6em;
	margin: 10px auto 20px;
	text-align: right;
}

.support,
.support_bottom{
  position: relative;
}
.support_bottom{
  position: relative;
  margin-top: -1px;
}
.support .buble{
  position: absolute;
  top: -170px;
  left: -100px;
  width: 353px;
}
.support .inview-blur{
  position: absolute;
  top: 150px;
  left: 0;
  right: 0;
  width: 800px;
  margin: auto;
}
.support .support_in{
  position: absolute;
  top: 500px;
  right: calc(50% - 710px);
  width: 600px;
}
@media  (widt > 2000px) {
  .support .support_in{
    position: absolute;
    top: 600px;
    right: calc(50% - 850px);
    width: 800px;
  }
}
@media (width < 1600px) {
	.support .support_in{
    position: absolute;
    top: 430px;
    right: calc(50% - 580px);
    width: 500px;
  }
}

.happy{
  position: relative;
}
.happy .slideinLeft{
  position: absolute;
  top: 200px;
  left: 0;
  width: 900px;
}
.happy .slideinRight{
  position: absolute;
  bottom: 200px;
  right: 0;
  width: 900px;
}
@media (width < 1600px) {
	.happy .slideinLeft{
		top: 100px;
		width: 800px;
	}
	.happy .slideinRight{
		bottom: 80px;
		width: 850px;
	}
}

.howto{
  position: relative;
  margin-top: -0.5px;
}
.howto .howto_move{
  position: absolute;
  top: 0;
  bottom: 0;
  right: 72px;
  width: 533px;
  height: 298px;
  margin: auto;
}

.iwrap .btn a::after {
	background: url(/images/item/silkysalon/oil/icon_buy.svg) no-repeat 0 0;
	width: 40px;
	height: 35px;
}

.slideinRight{
	transform: translateX(100%);
}
.slideinRight.active {
animation: slideinRight 2s;
transform: translateX(0);
}

@keyframes slideinRight {
0% {
	transform: translateX(100%);
}
100% {
	transform: translateX(0);
}
}

.slideinLeft{
	transform: translateX(-100%);
}
.slideinLeft.active {
animation: slideinLeft 2s;
	transform: translateX(0);
}

@keyframes slideinLeft {
0% {
	transform: translateX(-100%);
}
100% {
	transform: translateX(0);
}
}

/* LINEアコーディオン2つ目 */
.boxes-container {
  cursor: pointer;
}
.box {
  width: 100%;
  height: 100%;
}

.note_deliv {
  width: 730px;
  font-size: 12px;
  margin: 0 auto 50px;
}