@charset "UTF-8";
/* ===================================================================
CSS information
 file name  :  style.css
 style info : LPスタイル（基準幅750px / vw可変レイアウト）
=================================================================== */

/* -----------------------------------------
 base
----------------------------------------- */
:root{
	--base: 750;
}

html{
	scroll-behavior: auto;
}

body{
	background:#e9e6e1;
	font-family: "ヒラギノ角ゴPro W3","Hiragino Kaku Gothic Pro","メイリオ",Meiryo,Osaka,"ＭＳ Ｐゴシック","MS PGothic",Arial,Helvetica,Verdana,sans-serif;
	-webkit-font-smoothing: antialiased;
}

.wrapper{
	max-width: 750px;
	margin: 0 auto;
	position: relative;
	background:#fff;
	box-shadow: 0 0 30px rgba(0,0,0,.18);
}

.wrapper img{
	display: block;
	width: 100%;
	height: auto;
	vertical-align: bottom;
}
/* smart-dialog は .wrapper 外のため LP の img 幅指定が当たらない。
   メッセージ内は max-width のみ（width:100%+display:block だと
   お支払い方法など横並び選択肢が縦積みになる）。
   縦並びCTA・フッター固定CTAだけ幅100%。
   下部固定CTAが「同意する」等を隠さないようタイムラインに余白を確保。 */
#smart-dialog .chat-timeline-container .q-message a img,
#smart-dialog .chat-timeline-container .q-message-text img {
	max-width: 100%;
	height: auto;
}
#smart-dialog .chat-timeline-container .chat-flex-with-direction-column a img {
	width: 100%;
	display: block;
}
#smart-dialog .chat-timeline-container .q-scrollarea__content {
	padding-bottom: min(32vw, 180px) !important;
	box-sizing: border-box !important;
}
#smart-dialog .chat-footer-content {
	max-width: 100%;
}
#smart-dialog .chat-footer-content img {
	width: 100%;
	max-width: 100%;
	height: auto;
	display: block;
}

.wrapper a{
	display:block;
}

.agreement_view_sp_ec a {
	display: inline;
}

.agreement_view_ec a {
	display: inline;
}

.inner{
	position: relative;
	z-index: 1;
}

.box{
	position: relative;
}
.bottom{
	position: absolute;
	bottom: 0;
}
/* カート側の共通CSS（lp-*.css）が style.css より後に読み込まれ、
   同じ詳細度の slick テーマで上書きされるため .first-slide-outer で詳細度を上げる。 */
.first-slide-outer .slick-dots {
  bottom: min(calc(5/ 750 * 100vw), 5px);
  left: 50%;
  transform: translateX(-50%);
}

.first-slide-outer .slick-dots li {
  margin: 0 min(calc(12 / 750 * 100vw), 12px) 0 0;
  width: min(calc(16 / 750 * 100vw), 16px);
  height: min(calc(16 / 750 * 100vw), 16px);
  z-index: 3;
}

.first-slide-outer .slick-dots li button {
  content: "";
  padding: 3px;
  width: min(calc(16 / 750 * 100vw), 16px);
  height: min(calc(16 / 750 * 100vw), 16px);
  display: inline-block;
  text-align: center;
  line-height: 1;
  border: 0;
  border-radius: 50%;
  background: #fff;
}

.first-slide-outer .slick-dots li.slick-active button {
  background: none;
  border: min(calc(2 / 750 * 100vw), 2px) solid #fff;
  opacity: 1;
}

.first-slide-outer .slick-dots li button::before,
.first-slide-outer .slick-dots li.slick-active button::before {
  display: none;
}
.screen {
	position: absolute;
	inset: 0;
	z-index: -1;
	margin: 0;
	pointer-events: none;
	opacity: 0.18;
	mix-blend-mode: screen;
}
.screen img {
	display: block;
	width: 100%;
	height: auto;
	filter: blur(min(calc(10 / 750 * 100vw), 10px));
	filter:
		blur(min(calc(5 / 750 * 100vw), 5px))
		drop-shadow(0 0 min(calc(20 / 750 * 100vw), 20px) rgba(255, 255, 255, 0.789));
}
/* -----------------------------------------
 FV
----------------------------------------- */
.sec-fv{
	height: min(calc(1340/ 750 * 100vw),1340px);
	isolation: isolate;  
}

.sec-fv video{
	position:absolute;
	left: 0;
	top: 0;
	z-index: 0;
	overflow: hidden;
	object-fit: cover;
	width: min(calc(750/ 750 * 100vw),750px);
	height: min(calc(1340/ 750 * 100vw),1340px);
}

/* -----------------------------------------
 cosme
----------------------------------------- */
.sec-cosme{
	background:url(../img/cosme_bg.png) no-repeat top center / 100%;
}

/* -----------------------------------------
 ba
----------------------------------------- */
.sec-ba{
	background:url(../img/ba_bg.png) no-repeat top center / 100%;
}

.sec-ba iframe{
	position: absolute;
	left: 0;
	top: 0;
	width: min(calc(579/ 750 * 100vw),579px);
	height: min(calc(324/ 750 * 100vw),324px);
}
/* -----------------------------------------
 first
----------------------------------------- */
.sec-first{
	background: url(../img/first_bg.png) no-repeat top center / 100%;
	padding-bottom: min(calc(99/ 750 * 100vw),99px);
	overflow: hidden;
}

.first-slide-outer .slick-slide{
	width: min(calc(510 / 750 * 100vw), 510px);
	margin: 0 min(calc(15 / 750 * 100vw), 15px);
}
.first-slide-outer .slick-list{
	overflow: visible;
}
.first-slide-outer img{
	width:100%;
}
.first-slide-outer .slick-dots{
	position: relative;
	margin-top: 3vw;
}

.first-slide-outer .slick-dotted.slick-slider{
margin-bottom: 0;
}
/* -----------------------------------------
 catch
----------------------------------------- */
.sec-catch{
	background:url(../img/catch_bg.png) no-repeat top center / 100%;
	margin-top: max(calc(-62 / 750 * 100vw), -62px);
}

/* -----------------------------------------
 cta
----------------------------------------- */
.sec-cta{
	background:url(../img/cta_bg.png) no-repeat top center / 100%;
}

.cta_color a{
	width: min(calc(662 / 750 * 100vw), 662px);
	margin: 0 auto max(calc(-5 / 750 * 100vw), -5px) min(calc(52 / 750 * 100vw), 52px);
}
.cta-accordion{
	position: relative;
}

.cta-accordion::before{
	content: '';
	position: absolute;
	inset: 0;
	top: 0;
	border: 1px solid #fff;
	border-radius: min(calc(50 / 750 * 100vw), 50px);
	pointer-events: none;
	width: min(calc(670 / 750 * 100vw), 670px);
	margin: 0 auto;
}

.cta-accordion .acc-btn{
	width: min(calc(670 / 750 * 100vw), 670px);
	margin: 0 auto;
	cursor:pointer;
	position:relative;
}

.cta-accordion .acc-btn::after{
	content:"+";
	position:absolute;
	right: min(calc(15/750*100vw),15px);
	top:50%;
	transform:translateY(-50%);
	font-size: min(calc(36/750*100vw),36px);
	color:#1eb8a8;
	line-height:1;
}
.cta-accordion.is-open .acc-btn::after{
	content:"−";
}

.cta-accordion .acc-cont{
	display:none;
	width: min(calc(670 / 750 * 100vw), 670px);
	margin: 0 auto;
}
.cta-accordion.is-open::before{
	content: '';
	position: absolute;
	inset: 0;
	border: 1px solid #fff;
	border-radius: min(calc(26 / 750 * 100vw), 26px);
	pointer-events: none;
	width: min(calc(670 / 750 * 100vw), 670px);
	margin: 0 auto;
}

/* -----------------------------------------
 nayami
----------------------------------------- */
.sec-nayami{
	background:url(../img/nayami_bg.png) no-repeat top center / 100%;
}

/* -----------------------------------------
 point
----------------------------------------- */
.sec-point{
	background:url(../img/point_bg.png) no-repeat top center / 100%;
}

/* -----------------------------------------
 min
----------------------------------------- */
.sec-min{
	background:url(../img/min_bg.png) no-repeat top center / 100%;
}
.sec-min video{
	position:absolute;
	top:0;
	left:50%;
	transform: translateX(-50%);
	width:min(calc(670/750*100vw),670px);
	height:min(calc(378/750*100vw),378px);
	border-radius: min(calc(20/750*100vw),20px);
	object-fit:cover;
	z-index: 0;
}

.sec-min .box p{
	position: relative;
	z-index: 1;
}
/* -----------------------------------------
 konbu
----------------------------------------- */
.sec-konbu{
	background:url(../img/konbu_bg.png) no-repeat top center / 100%;
	margin-top: max(calc(-58/750*100vw),-58px);
}

/* -----------------------------------------
 catch02
----------------------------------------- */
.sec-catch02{
	background:url(../img/catch02_bg.png) no-repeat top center / 100%;
	margin-top: max(calc(-50/750*100vw),-50px);
}

/* -----------------------------------------
 mg
----------------------------------------- */
.sec-mg {
	background: url(../img/mg_bg.png) no-repeat top center / 100%;
	overflow: hidden;
	padding: 0 0 min(calc(309 / 750 * 100vw), 309px);
}

.mg-slick {
	width: 100%;
	overflow: hidden;
}
.mg-slick .slick-slide {
	width: min(calc(2609 / 750 * 100vw), 2609px);
	height: min(calc(493 / 750 * 100vw), 493px);
	margin-right: min(calc(20 / 750 * 100vw), 20px);
}

.mg-slick .slick-slide img {
	display: block;
	width: min(calc(2609 / 750 * 100vw), 2609px);
	height: auto;
}

.mg-slick .slick-track {
	display: flex;
	align-items: flex-start;
}
/* -----------------------------------------
 cycle
----------------------------------------- */
.sec-cycle{
	background:url(../img/cycle_bg.png) no-repeat top center / 100%;
}

/* -----------------------------------------
 comment
----------------------------------------- */
.sec-comment{
	background:url(../img/comment_bg.png) no-repeat top center / 100%;
	margin-top: max(calc(-50/750*100vw),-50px);
}

/* -----------------------------------------
 step
----------------------------------------- */
.sec-step{
	background:url(../img/step_bg.png) no-repeat top center / 100%;
}

/* -----------------------------------------
 catch02
----------------------------------------- */
.sec-catch03{
	background:url(../img/catch03_bg.png) no-repeat top center / 100%;
	margin-top: max(calc(-42/750*100vw),-42px);
}


/* -----------------------------------------
 tokuten
----------------------------------------- */
.sec-tokuten{
	background:url(../img/tokuten_bg.png) no-repeat top center / 100%;
}


/* -----------------------------------------
 pro
----------------------------------------- */
.sec-pro{
	background:url(../img/pro_bg.png) no-repeat top center / 100%;
	margin-top: max(calc(-170/750*100vw),-170px);
}



/* -----------------------------------------
 qa
----------------------------------------- */
.sec-qa{
	background:url(../img/qa_bg.png) no-repeat top center / 100%;
}

.qa-item:not(:last-child) {
	width: min(calc(670 / 750 * 100vw), 670px);
	border-bottom: 1px solid #000;
	margin: 0 auto min(calc(52 / 750 * 100vw), 52px);
}
.qa-item .qa-q{
	cursor:pointer;
	position:relative;
	width: min(calc(670 / 750 * 100vw), 670px);
	margin: 0 auto;
}

.qa-item .qa-q::after{
	content: "";
    position: absolute;
    right: min(calc(14 / 750 * 100vw), 14px);
    top: 35%;
    width: min(calc(16 / 750 * 100vw), 16px);
    height: min(calc(16 / 750 * 100vw), 16px);
    border-right: min(calc(4 / 750 * 100vw), 4px) solid #000000;
    border-bottom: min(calc(4 / 750 * 100vw), 4px) solid #000000;
    transform: translateY(-70%) rotate(45deg);
    transition: transform .3s;
}

.qa-item.is-open .qa-q::after{
	transform: translateY(-70%) rotate(220deg);
}

.qa-item .qa-a{
	display:none;
	width: min(calc(670 / 750 * 100vw), 670px);
	margin: 0 auto;
}


/* -----------------------------------------
 footer
----------------------------------------- */
.sec-footer{
	position: relative;
	background:#e8e8e4;
	color:#000000;
	text-align:center;
	padding: 0 0 min(calc(40/750*100vw),40px);
}
.sec-footer .footer-logo{
	position: absolute;
	width: min(calc(106/750*100vw),106px);
	right: min(calc(40/750*100vw),40px);
	bottom: min(calc(40/750*100vw),40px);
}
.footer-nav{
	margin: 0 auto min(calc(20/750*100vw),20px) min(calc(40/750*100vw),40px);
	text-align: left;
}
.footer-nav a{
	font-size: min(calc(28/750*100vw),28px);
	padding: min(calc(4/750*100vw),4px) 0;
}

section.float_btn {
	position: fixed;
	left: 50%;
	bottom: 0;
	width: min(100vw, 750px);
	max-width: 750px;
	margin: 0;
	z-index: 9999;
	display: block;
	opacity: 0;
	visibility: hidden;
	transform: translateX(-50%) translateY(24px);
	transition: opacity .45s ease, transform .45s ease, visibility .45s ease;
	pointer-events: none;
}
section.float_btn.is-show {
	opacity: 1;
	visibility: visible;
	transform: translateX(-50%) translateY(0);
	pointer-events: auto;
}

/* stellasense 側の共通CSSより後に効かせる（opacity/transform は !important にしない＝ふわっと遷移用） */
.wrapper > section.float_btn {
	position: fixed !important;
	left: 50% !important;
	bottom: 0 !important;
	width: min(100vw, 750px) !important;
	max-width: 750px !important;
	margin: 0 !important;
	z-index: 9999 !important;
	display: block !important;
	opacity: 0;
	visibility: hidden;
	transform: translateX(-50%) translateY(24px);
	transition: opacity .45s ease, transform .45s ease, visibility .45s ease;
	pointer-events: none;
}
.wrapper > section.float_btn.is-show {
	opacity: 1;
	visibility: visible;
	transform: translateX(-50%) translateY(0);
	pointer-events: auto;
}

/* チャットボット起動中は追随バナーを隠す（z-index 9999 が bot の上に乗るため） */
html.chat-running .wrapper > section.float_btn,
html.chat-running .wrapper > section.float_btn.is-show {
	opacity: 0 !important;
	visibility: hidden !important;
	pointer-events: none !important;
	transform: translateX(-50%) translateY(24px) !important;
}