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

html {scroll-behavior: smooth;}
body, h1, h2, h3, h4, h5, h6, p, address,ul, ol, li, dl, dt, dd,table, th, td, img, form, input,figure {margin: 0; padding: 0; list-style-type: none; font-feature-settings: "palt";}

/*/////////////////// Effect ///////////////////*/
/*　フェードイン　*/
.is-fadein01.is-animated {animation: fadeIn01 0.5s forwards;}
@keyframes fadeIn01 {
	0% {opacity: 0; transform: translateY(100px);}
  100% {opacity: 1; transform: translateY(0);}
}

.is-fadein02.is-animated {animation: fadeIn02 0.5s cubic-bezier(0.33, 1, 0.68, 1) forwards;}
@keyframes fadeIn02 {
	0% {opacity: 0; transform: translateY(100px);}
  100% {opacity: 1; transform: translateY(0);}
}

/*　フェードイン　*/
.fadein01 {opacity: 0.0; transform: translate(0, 100px); transition: all 1000ms;}
.fadein01.scrollin {opacity: 1; transform: translate(0, 0);}
.fadein02 {opacity: 0.0; transform: translate(0, 120px); transition: all 500ms;}
.fadein02.scrollin {opacity: 1; transform: translate(0, 0);}
.fadein03 {opacity: 0.0; transform: translate(0, 150px); transition: all 600ms;}
.fadein03.scrollin {opacity: 1; transform: translate(0, 0);}
.fadein04 {opacity: 0.0; transform: translate(0, 170px); transition: all 700ms;}
.fadein04.scrollin {opacity: 1; transform: translate(0, 0);}
.fadein05 {opacity: 0.0; transform: translate(0, 190px); transition: all 800ms;}
.fadein05.scrollin {opacity: 1; transform: translate(0, 0);}

/*/////////////////// LP ///////////////////*/
#autumnlp>.lpWrap>#proof {display: block; padding-top: 80px; margin-top: -80px;}
#autumnlp>.lpWrap>#shampoo {display: block; padding-top: 80px; margin-top: -80px;}
#autumnlp>.lpWrap>#hot {display: block; padding-top: 80px; margin-top: -80px;}
#autumnlp sup {font-size: 70%;}

#autumnlp {width: 100%; margin: 0 auto; padding: 0; background: linear-gradient(180deg, rgb(248 103 23), rgb(255 197 57), rgb(118 150 49));}
#autumnlp>.lpWrap {width: 650px; margin: 0 auto; padding: 0 0 80px; text-align: center; background-color: #ffffff;}
#autumnlp>.lpWrap>img {width: 100%; margin: 0 auto; padding: 0;}
#autumnlp>.lpWrap>#title {width: 100%; margin: 0 auto; padding: 0; background-color: #e9aa03;}
#autumnlp>.lpWrap>#title>img {width: 100%; margin: 0 auto; padding: 0;}
#autumnlp>.lpWrap>#title>.lead {width: 80%; margin: 30px auto 50px; padding: 0;}
#autumnlp>.lpWrap>#title>.lead>h3 {margin: 0 auto 30px; padding: 0; color: #ffffff; font-size: 28px; font-family: "Zen Kaku Gothic New", sans-serif; font-weight: 500; line-height: 1.0; letter-spacing: 0.01em; text-align: justify;}
#autumnlp>.lpWrap>#title>.lead>h3>span { font-weight: 700; background-color: #a64d44;}
#autumnlp>.lpWrap>#title>.lead>p {margin: 0 auto 0; padding: 0; color: #ffffff; font-size: 22px; font-family: "Zen Kaku Gothic New", sans-serif; font-weight: 400; font-style: normal; line-height: 2.0; letter-spacing: 0.01em; text-align: justify;}
#autumnlp>.lpWrap>#title>.selectArea {width: 90%; margin: 0 auto; padding: 0 0; text-align: center; display: flex; justify-content: space-between; vertical-align: top;}
#autumnlp>.lpWrap>#title>.selectArea>div {display: inline-block; width: 32%; width : -webkit-calc(100% / 3); width : calc(100% / 3 - 30px); margin: 0 auto 0; padding: 0;}
#autumnlp>.lpWrap>#title>.selectArea>div>a>img {width: 100%; margin: 0 auto; padding: 0; position:relative; top:0;}
#autumnlp>.lpWrap>#title>.selectArea>div>a>img:hover {top:-10px; transition:0.3s;}

#autumnlp>.lpWrap>#proofWrap {width: 100%; margin: 0 auto; padding: 0 0 80px; background-color: #eee5d5;}
#autumnlp>.lpWrap>#shampooWrap {width: 100%; margin: 0 auto; padding: 0 0 80px; background-color: #efcb7d;}
#autumnlp>.lpWrap>#hotWrap {width: 100%; margin: 0 auto; padding: 0 0 80px; background-color: #d04640;}
#autumnlp>.lpWrap>#proofWrap>.item,
#autumnlp>.lpWrap>#shampooWrap>.item,
#autumnlp>.lpWrap>#hotWrap>.item {width: 100%; margin: 0 auto 120px; padding: 0;}
#autumnlp>.lpWrap>#proofWrap>.item:last-child,
#autumnlp>.lpWrap>#shampooWrap>.item:last-child,
#autumnlp>.lpWrap>#hotWrap>.item:last-child {margin: 0 auto;}
#autumnlp>.lpWrap>#hotWrap>img,
#autumnlp>.lpWrap>#proofWrap>.item>img,
#autumnlp>.lpWrap>#shampooWrap>.item>img,
#autumnlp>.lpWrap>#hotWrap>.item>img {width: 100%; margin: 0 auto ; padding: 0;}
#autumnlp>.lpWrap>#proofWrap>.item>.itemimg,
#autumnlp>.lpWrap>#shampooWrap>.item>.itemimg,
#autumnlp>.lpWrap>#hotWrap>.item>.itemimg {width: 100%; margin: 0 auto 10px; padding: 0;}
#autumnlp>.lpWrap>#proofWrap>.item>p,
#autumnlp>.lpWrap>#shampooWrap>.item>p {width: 80%; margin: 0 auto; padding: 0; color: #000000; font-size: 18px; font-family: "Noto Sans JP", sans-serif; font-weight: 400; font-style: normal; line-height: 2.2; letter-spacing: 0.05em; text-align: justify;}
#autumnlp>.lpWrap>#hotWrap>.item>p {width: 80%; margin: 0 auto; padding: 0; color: #ffffff; font-size: 18px; font-family: "Noto Sans JP", sans-serif; font-weight: 400; font-style: normal; line-height: 2.2; letter-spacing: 0.05em; text-align: justify;}

#autumnlp .item>ul {width: 75%; margin: 10px auto 0; padding: 0;} 
#autumnlp .item>ul>li {margin: 0 auto 10px; color: #000000; font-size: 17px; font-family: "Noto Sans JP", sans-serif; font-weight: 400; text-align: justify;}
#autumnlp .item>ul>li::marker {font-size: 50%;}
#autumnlp>.lpWrap>#hotWrap>.item>ul {width: 80%; margin: 0 auto 20px; padding: 0;list-style: none;} 
#autumnlp>.lpWrap>#hotWrap>.item>ul>li {color: #ffffff; font-size: 20px; font-weight: 600; }


#autumnlp .item>ol {width: 75%; margin: 10px auto 0; padding: 0;} 
#autumnlp .item>ol>li {margin: 0 auto 10px; color: #ffffff; font-size: 13px; font-family: "Noto Sans JP", sans-serif; font-weight: 400; line-height: 1.6; text-align: justify;}
#autumnlp .item>ol>li::marker {content: "※";}

#autumnlp>.lpWrap>#proofWrap>.item>.min,
#autumnlp>.lpWrap>#shampooWrap>.item>.min,
#autumnlp>.lpWrap>#hotWrap>.item>.min {margin: 20px auto 0; font-size: 14px; font-weight: 300; line-height: 1.7; letter-spacing: 0.03em;}

#autumnlp .head {width: 100%; margin: 0 auto 50px; padding: 0; text-align: center;}
#autumnlp .head>img {width: 100%; margin: 0 auto; padding: 0}

.more-btn-proof,
.more-btn-proof:link,
.more-btn-proof:visited {display: block; width: 350px; margin: 30px auto 0; padding: 30px 0; color: #ffffff; font-size: 18px; font-weight: 600; letter-spacing: 0.05em; line-height: 1.0; position: relative; text-decoration: none; z-index: 0; background: transparent; border-radius: 50px; overflow: hidden; cursor: pointer;}
.more-btn-proof::before,
.more-btn-proof::after {content: ''; position: absolute; top: 0; left: 0; display: block; width: 100%; height: 100%;}
.more-btn-proof::before {transition: all 0.3s; z-index: -1; background: linear-gradient(135deg, #a3001c 0%, #ffb400 100%);}
.more-btn-proof::after {z-index: -2; background: linear-gradient(135deg, #ffb400 0%, #db4d68 50%, #b24a9d 100%);}
.more-btn-proof:hover {color: #ffffff !important;}
.more-btn-proof:hover::before {opacity: 0; color: #ffffff !important;}

.more-btn-shampoo,
.more-btn-shampoo:link,
.more-btn-shampoo:visited {display: block; width: 350px; margin: 30px auto 0; padding: 30px 0; color: #ffffff; font-size: 18px; font-weight: 600; letter-spacing: 0.05em; line-height: 1.0; position: relative; text-decoration: none; z-index: 0; background: transparent; border-radius: 50px; overflow: hidden; cursor: pointer;}
.more-btn-shampoo::before,
.more-btn-shampoo::after {content: ''; position: absolute; top: 0; left: 0; display: block; width: 100%; height: 100%;}
.more-btn-shampoo::before {transition: all 0.3s; z-index: -1; background: linear-gradient(135deg, #a3001c 0%, #ffb400 100%);}
.more-btn-shampoo::after {z-index: -2; background: linear-gradient(135deg, #ffb400 0%, #db4d68 50%, #b24a9d 100%);}
.more-btn-shampoo:hover {color: #ffffff !important;}
.more-btn-shampoo:hover::before {opacity: 0; color: #ffffff !important;}

.more-btn-hot,
.more-btn-hot:link,
.more-btn-hot:visited {display: block; width: 350px; margin: 30px auto 0; padding: 30px 0; color: #ffffff; font-size: 18px; font-weight: 600; letter-spacing: 0.05em; line-height: 1.0; position: relative; text-decoration: none; z-index: 0; background: transparent; border-radius: 50px; overflow: hidden; cursor: pointer;}
.more-btn-hot::before,
.more-btn-hot::after {content: ''; position: absolute; top: 0; left: 0; display: block; width: 100%; height: 100%;}
.more-btn-hot::before {transition: all 0.3s; z-index: -1; background: linear-gradient(135deg, #fff000 0%, #ff7600 100%);}
.more-btn-hot::after {z-index: -2; background: linear-gradient(135deg, #ffb400 0%, #db4d68 50%, #b24a9d 100%);}
.more-btn-hot:hover {color: #ffffff !important;}
.more-btn-hot:hover::before {opacity: 0; color: #ffffff !important;}

#autumnlp>.lpWrap>.footer {width: 100%; margin: 0 auto; padding: 0;}
#autumnlp>.lpWrap>.footer>img {width: 100%; margin: 0 auto; padding: 0;}