@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";
	height: 100vh;
	position: relative;
}
body::before{
	content: "";
	width: 100%;
	height: 100vh;
	position: fixed;
	background: url("../images/bg.png") center / cover no-repeat;
	z-index: -1;
}

main,footer{
	max-width: 750px;
	width: 100%;
	margin: 0 auto;
}

/*  共通 */
.mb30{margin-bottom: 30px!important;}
.mb50{margin-bottom: 50px!important;}
.mb60{margin-bottom: 60px!important;}
.mb80{margin-bottom: 80px!important;}
.mb100{margin-bottom: 100px!important;}
.bg_g{background: url("../images/bg_g.png") center / cover repeat;}
.bg_n{background: url("../images/bg_n.png") center / cover repeat;}
.bg_b{background: url("../images/bg_b.png") center / cover repeat;}

/* ヘッダー
------------------------------------------------------------*/
header{
	position: fixed;
	z-index: 5;
	top:5%;
	left: 2%;
}
header > a{
	width: 180px;
	display: block;
}

/* フッター
------------------------------------------------------------*/
footer{width: 100%;}
footer p{
	background: #001528;
	text-align: center;
	font-size: 14px;
	padding: 10px 0 110px;
}

/* ナビゲーション
------------------------------------------------------------*/
/* ドロワー */
.drawer-hamburger {
	width: 3.5rem !important;
	padding: 12px .7rem 22px 1rem!important;
	position: fixed;
	top: 2%!important;
	right: 2%!important;
	background: url("../images/drawer_bg.png") center / 130px repeat;
	z-index: 99!important;
	border-radius: 60%;
}
.drawer-hamburger-icon:after,.drawer-hamburger-icon:before {
	background-color: #fff !important;
	height: 2px !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;
	position: relative;
	background: url("../images/drawer_bk.png") center / cover no-repeat!important;
}

.drawer-menu{
	max-width: 1200px;
	width: 90%!important;
	margin: 0 auto;
	text-align: left;
}
.drawer-menu > li:not(:last-child){margin-bottom: 40px;}
.drawer-menu > li > a{
	color: #fff;
	font-weight: bold;
	font-size: 25px!important;
	letter-spacing: .15em;
}

/* コンテンツ
------------------------------------------------------------*/
/* fix-btn */
.fix-btn{
	position: fixed;
	bottom:1.5%;
	left: 50%;
	transform: translateX(-50%);
	max-width: 425px;
	width: 90%;
	z-index: 4;
	mix-blend-mode: difference;
	backdrop-filter:blur(2px);
}

/* pagetop */
#page-top{
	position: fixed;
	right: 9%;
	bottom:7%!important;
	z-index: 4;
}
#page-top > a::before{
	content: "";
	background: url("../images/pagetop_round.png") center / contain no-repeat;
	width: 150px;
	height: 150px;
	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: 100px 0;}
.content_top{padding-top: 100px;}
.content_bottom{padding-bottom: 100px;}
.inner-box{
	width: 90%;
	margin: 0 auto;
}

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

/* mainarea */
#main_area{
	height: 100vh;
	width: 96%;
	margin: 0 auto;
	padding: 20px 0;
	display: flex;
}
#main_area ul,#main_area > div{width: 50%;}
#main_area ul,#main_area ul *{height: 100%;}
#main_area ul img{
	object-fit: cover;
	width: 100%;
	height: 100%;
}
#main_area > div{position: relative;}
#main_area > div > div,#main_area > div::after{
	position: absolute;
	left: 50%;
}
#main_area > div > div{
	max-width: 608px;
	width: 85%;
	top:50%;
	transform: translate(-50%,-50%);
}
#main_area > div::after{
	width: 1px;
	height: 80px;
	background: #fff;
	content: "";
	transform: translateX(-50%);
	bottom:0;
}

/* 各コンテンツ
------------------------------------------------------------*/
/* 根本治療のパルスネクスト */
#co02{padding-bottom: 420px;}

/* 痛くない・ダウンタイムほぼなし・日帰り治療 オリジナル最新レーザー治療 パルスネクスト */
#co03{position: relative;}
#co03::before{
	content: "";
	background: url("../images/co03_01.jpg") center / cover no-repeat;
	width: 90%;
	height: 640px;
	position: absolute;
	top: -320px;
	right: 0;
	z-index: 0;
}
#co03 > div{
	position: relative;
	z-index: 1;
}

/* いびきの原因と危険性 */
.sas_box{
	background: url("../images/co04_bg.jpg") 70% center / cover no-repeat;
	padding: 80px 0;
	border-radius: 60px;
	width: 90%;
	margin: 0 auto;
}

/* 施術の流れ */
#co05{padding-bottom: 180px;}

/* いびき治療パルスネクストに関するよくあるご質問 */
#co06{
	padding-top: 150px;
	position: relative;
}
#co06::before{
	content: "";
	background: url("../images/co06_before.png") center / auto 100% no-repeat;
	width: 100%;
	height: 161px;
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	top: -78px;
}

/* 美容外科・美容皮膚科 クリニーク大阪心斎橋 */
.map{
	width: 90%;
	height: 460px;
	margin: 0 auto;
}
.map iframe{
	width: 100%;
	height: 100%;
}

/* 無料カウンセリング予約
------------------------------------------------------------*/


/* 750px以下から
------------------------------------------------------------*/
@media only screen and (max-width:750px){
	body {
		min-width: 700px!important;
		background-size: auto 100%;
	}
	body::before{background-image: url("../images/bgSP.png");}
	a[href^="tel"]{pointer-events: auto;}

	#page-top{
		width: 45px;
		right: 7%;
		bottom: 5%!important;
	}
	#page-top > a::before{
		width: 120px;
		height: 120px;
	}
	
	/* ヘッダー
	------------------------------------------------------------*/
	header{top:2%;}
	
	/* ナビゲーション
	------------------------------------------------------------*/
	.drawer-menu > li > a{font-size: 18px!important;}
	.drawer-menu > li:not(:last-child){margin-bottom: 25px;}
	
	/* メインエリア
	------------------------------------------------------------*/
	#main_area{
		position: relative;
		padding: 12px 0;
	}
	#main_area ul, #main_area > div{width: 100%;}
	#main_area > div{
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%,-50%);
		height: 100%;
	}
}

/* 500px以下から
------------------------------------------------------------*/
@media only screen and (max-width:500px){
    body {min-width: inherit!important;width: 100%;}
	
	#page-top{
		bottom:100px!important;
		right:6%;
	}
	
	/* コンテンツ */
	#main_area > div > div{width: 92%;}
	#co02{padding-bottom: 300px;}
	#co03::before{
		height: 480px;
		top:-240px;
		width: 95%;
	}
	.sas_box{width: 100%;}
	#co05{padding-bottom: 130px;}
	#co06{padding-top: 100px;}
	#co06::before{
		height: 100px;
		top:-46px;
	}
}