@charset "utf-8";
a{
	text-decoration: none;
	transition: .3s;
}
a:hover{opacity: .7;}
a[href^="tel:"] {pointer-events: none;}
img{
	margin: 0 auto;
	display: block;
}
body {
    min-width: 1300px;
    margin:0 auto;
    font-feature-settings: "palt";
	background: url("../images/bg.png") center / cover no-repeat;
	height: 100vh;
	background-attachment: fixed;
}
body::before{
	content: "";
	background: url("../images/bg-text.png") center / contain repeat-x;
	width: 100%;
	height: 196px;
	position: fixed;
	top: 50%;
	transform: translateY(-50%);
	left: 0;
	animation: loop 20s linear infinite;
}
@keyframes loop {
    from { background-position: 0 0;}
    to {background-position: -1920px 0;}
}
body > div{
	position: relative;
	max-width: 750px;
	width: 100%;
	background: #fff;
	margin: 0 auto;
	overflow: hidden;
}

/*  共通 */
.mb30{margin-bottom: 30px!important;}
.mb40{margin-bottom: 40px!important;}
.mb50{margin-bottom: 50px!important;}
.mb60{margin-bottom: 60px!important;}
.mb70{margin-bottom: 70px!important;}
.mb90{margin-bottom: 90px!important;}

/* ヘッダー
------------------------------------------------------------*/
header{
	width: 22.5vw;
	position: fixed;
	z-index: 5;
	top:5%;
	left: 2%;
}
header > a{
	width: 240px;
	display: block;
	margin-bottom: 30px;
}

/* フッター
------------------------------------------------------------*/
footer > div{
	width: 100%;
	background: linear-gradient(to bottom,#c5d3eb,#afcdc1);
	padding-top: 320px;
	border-radius: 60px 60px 0 0;
}
footer > img{
	border-radius: 300px;
	margin-bottom: -290px;
}
.map{
	width: 100%;
	height: 400px;
}
.map iframe{
	width: 100%;
	height: 100%;
	border-radius: 10px;
}
.copyright{
	font-size: 14px;
	color: #fff;
	text-align: center;
	padding-bottom: 95px;
}

/* ナビゲーション
------------------------------------------------------------*/
.pc-nav a,.drawer-nav a{
	font-weight: bold;
	transition: .3s;
	font-family: YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif";
	letter-spacing: .2em;
}
.pc-nav a:hover{color: #00244b;}
.pc-nav > ul > li > a,.drawer-nav > ul > li > a{
	width: 100%;
	background: url("../images/nav-bg.png") left center / contain no-repeat;
	padding-left: clamp(15px,2.7vh,25px);
}
.pc-nav > ul > li > a{font-size: clamp(14px,1.2vw,18px);}
.pc-nav > ul > li:not(:last-child),.drawer-nav > ul > li:not(:last-child){margin-bottom: clamp(20px,4vh,40px);}
.pc-nav > ul > li:nth-child(3) > a,.drawer-nav > ul > li:nth-child(3) > a{
	margin-bottom: clamp(15px,2.7vh,25px);
	display: block;
}
.pc-nav > ul ul{margin-left: 5%;}
.pc-nav > ul ul li:not(:last-child),.drawer-nav > ul ul li:not(:last-child){margin-bottom: clamp(10px,2.5vh,18px);}
.pc-nav > ul ul a,.drawer-nav > ul ul a{font-size: clamp(12px,1vw,16px);}
.clone-nav{display: none;}

/* ドロワー */
.drawer-hamburger {display: none !important;}
.drawer-hamburger {
	width: 3.5rem !important;
	padding: 10px .7rem 22px .7rem!important;
	position: fixed;
	top: 2%!important;
	right: 2%!important;
	background: linear-gradient(to right,#919bf4,#b7d5bb);
	z-index: 99!important;
	border-radius: 60%;
}
.drawer-hamburger-icon:after,.drawer-hamburger-icon:before {
	background-color: #fff !important;
	height: 1px !important;
	width: 29px!important;
}
.drawer-hamburger-icon{
	margin-left: 10px!important;
	background-color: transparent !important;
}
.drawer-hamburger-icon:after {top: 5px !important;}
.drawer-hamburger-icon:before {top: -5px !important;}
.drawer-open .drawer-hamburger-icon:before{
	-webkit-transform: rotate(20deg)!important;
    transform: rotate(20deg)!important;
}
.drawer-open .drawer-hamburger-icon:after{
	-webkit-transform: rotate(-20deg)!important;
    transform: rotate(-20deg)!important;
}
.drawer-open .drawer-hamburger-icon:after, .drawer-open .drawer-hamburger-icon:before {top: 0 !important;}
.drawer-nav {
	width: 100% !important;
	height: 100%!important;
}
.drawer--right.drawer-open .drawer-hamburger {right: 225px !important;}
.drawer-overlay {z-index: 0!important;background: none !important;}

/* ドロワーをふわっと表示↓ */
.drawer--top .drawer-nav{
	opacity: 0!important;
	transition: opacity .4s linear!important;
	top: inherit!important;
	height: 0!important;
}
.drawer--top .drawer-nav a{pointer-events: none!important;}
.drawer--top.drawer-open .drawer-nav{
	opacity: 1!important;
	top: 0!important;
	height: 100%!important;
}
.drawer--top.drawer-open .drawer-nav a{pointer-events: auto!important;}

 /*この下でデザイン*/ 
.drawer-nav {
	display: flex;
	align-items: center;
	justify-content: center;
	background: url("../images/bg.png") center / cover no-repeat!important;
	position: relative;
}
.drawer-menu{
	width: 85%!important;
	margin: 0 auto;
	text-align: left;
}
.drawer-nav > ul > li > a{
	font-size: 16px!important;
	padding-left: 25px!important;
}
.drawer-nav > ul ul{margin-left: 9%;}
.drawer-nav > ul ul a{font-size: 14px!important;}


/* コンテンツ
------------------------------------------------------------*/
/* fix-btn */
.fix-btn{
	position: fixed;
	left: 50%;
	bottom:2%;
	transform: translateX(-50%);
	max-width: 350px;
	width: 85%;
	z-index: 4;
}

/* pagetop */
#page-top{
	position: fixed;
	right: 5%;
	bottom:8%!important;
	z-index: 4;
}
#page-top > a::before{
	content: "";
	background: url("../images/pagetop_bg.png") center / contain no-repeat;
	width: 220px;
	height: 220px;
	position: absolute;
	top:50%;
	left: 50%;
	transform: translate(-50%,-50%);
	animation: rotate 20s linear infinite;
}
@keyframes rotate {
    0% { transform: translate(-50%,-50%) rotate(0);}
	50% { transform: translate(-50%,-50%) rotate(180deg);}
	100% { transform: translate(-50%,-50%) rotate(360deg);}
}

/* content */
.content{padding: 70px 0;}
.content-top{padding-top: 70px;}
.content-bottom{padding-bottom: 70px;}
.inner-box{
	width: 90%;
	margin: 0 auto;
}

/* コンバージョン */
.cv-btn{
	max-width: 420px;
	width: 100%;
	display: block;
	margin: 0 auto;
}

/* mainarea */
#main_area > div{
	background: url("../images/main.jpg") 25% 30% / cover no-repeat;
	height: 89vh;
	width: 100%;
	border-radius: 0 0 60px 60px;
	position: relative;
	z-index: 1;
}
.main-copy{
	position: absolute;
	left: 50%;
	bottom:35vh;
	transform: translateX(-50%);
	width: 90%;
}
.main-copy p{width: 100%;}
.main-copy p img{
	margin: 0 auto 0 0;
	max-width: 390px;
	width: 90%;
}
#main_area > img{
	margin-top: -33vh;
	position: relative;
	z-index: 2;
	width: 100%;
}
.main_case{
	width: 210px;
	margin: 0 auto 20px 0!important;
}

/* こんなお肌のお悩み、ポテンツァが解決します。 */
#co01{
	position: relative;
	padding-bottom: 100px;
	background: url("../images/content01_bg.png") center bottom / contain no-repeat;
}

/* そんなお悩みにはポテンツァがおすすめ！ */
.co02_bg{
	background: linear-gradient(to right,rgba(145,155,244,.2),rgba(183,213,187,.2));
	position: relative;
}
.co02_bg::before{
	content: "";
	background: url("../images/content02_bg.png") center / contain no-repeat;
	width: 100%;
	height: auto;
	padding-top: 42%;
	position: absolute;
	top:-1px;
	left: 0;
	z-index: 1;
}
.co02_bg > div{
	position: relative;
	z-index: 2;
}

/* お悩みに合わせて豊富なチップと薬剤を組み合わせ幅広い肌悩みに対応します */
#co04{
	background: linear-gradient(to bottom,rgba(209,211,244,.2) 0%,rgba(235,228,244,.2) 8%,rgba(239,247,205,.2) 93%, rgba(223,247,185,.2) 100%);
	border-radius: 40px;
}

/* ポテンツァがダーマペンの超進化版と言われるのはなぜ？*/
#co05 li{
	background: rgba(233,234,239,.3);
	border-radius: 10px;
	padding: 55px 5%;
}
.price_btn{
	width: 320px;
	margin: 0 auto;
	display: block;
}

/* 症状に合わせたポテンツァの治療で無駄なく効果を発揮します */
#co06 ul{
	max-width: 380px;
	width: 100%;
	margin: 0 auto;
}
#co06 li:not(:last-child){margin-bottom: 15px;}
#s16{background: url("../images/s16_bg.png") center top / contain no-repeat;}
#cp25{background: url("../images/cp25_bg.png") center top / contain no-repeat;}
#diamondtip{background: url("../images/diamondtip_bg.png") center top / contain no-repeat;}

/* ポテンツァの料金表 */
.fee > div:not(:last-child){position: relative;}
.fee > div:first-child{
	background: linear-gradient(to bottom,#fff,#eff7cd);
	padding-bottom: 100px;
}

.fee > div:nth-child(2){
	background: linear-gradient(to bottom,#fff,#ffe6e6);
	padding: 70px 0 100px;
}
.fee > div:last-child{
	background: linear-gradient(to bottom,#fff,#ebe4f4);
	padding: 70px 0 300px;
}
.fee > div:not(:last-child)::after{
	content: "";
	width: 100%;
	height: auto;
	padding-top: 7.2%;
	position: absolute;
	left: 0;
	bottom:0;
}
.fee > div:first-child::after{background: url("../images/content07_bg01.png") center / contain no-repeat;}
.fee > div:nth-child(2)::after{background: url("../images/content07_bg02.png") center / contain no-repeat;}

/* 施術の流れ */
#co08{margin-top: -240px;}

/* よくあるご質問 */
#co09{
	background: linear-gradient(to right,rgba(145,155,244,.2),rgba(183,213,187,.2));
	position: relative;
	padding-bottom: 230px;
}
#co09::before{
	content: "";
	background: url("../images/content09_bg.png") center / contain no-repeat;
	width: 100%;
	height: auto;
	padding-top: 48%;
	position: absolute;
	top:0;
	left: 0;
	z-index: 1;
}
#co09 > div{
	position: relative;
	z-index: 2;
}

/* 施術について */
#co10::before{
	content: "";
	background:url("../images/content10-img.jpg") center / cover no-repeat;
	max-width: 625px;
	width: 90%;
	height: 300px;
	display: block;
	margin: -150px 0 0 auto;
	border-radius: 10px 0 0 10px;
	position: relative;
	z-index: 2;
}

/* 1025px以下から
------------------------------------------------------------*/
@media only screen and (max-width:1025px){
	body {min-width: 980px!important;}
	
	body > div{margin: 0 0 0 auto;}
	#page-top > a::before{
		width: 100px;
		height: 100px;
		background-color: #dfeaef;
		border-radius: 50%;
	}
	#page-top{
		width: 55px;
		bottom:4%!important;
		right: 8%!important;
	}
	#page-top img{
		position: relative;
		z-index: 4;
	}
}
	
/* 750px以下から
------------------------------------------------------------*/
@media only screen and (max-width:750px){
	body {min-width: 700px!important;}
	a[href^="tel"]{pointer-events: auto;}
	
	/* ヘッダー */
	header{top:2%;}
	header > a{margin: 0;}
	
	/* ナビゲーション
	------------------------------------------------------------*/
	.drawer-hamburger {display: block!important;}
	
	.main_case{width: 180px;}
	
}

/* 500px以下から
------------------------------------------------------------*/
@media only screen and (max-width:500px){
    body {min-width: inherit!important;width: 100%;}
	
	/* mainarea */
	#main_area > div{height: 73vh;}
	#main_area > img{margin-top: -8vh;}
	.main-copy{bottom:13%;}
	.main-copy p:first-child{margin-bottom: 18px;}
	
	.fix-btn{
		transform: none;
		left: 2%;
		max-width: none;
		width: 65%;
	}
}