@charset "utf-8";
/* --------------------------------------------- */
/*	common
/* --------------------------------------------- */
html {
	font-size:62.5%;
	overflow-x:hidden;
}

body {
	background:url(../img/back_wave_blu_btm.svg) 0 0 / 100% no-repeat fixed;
	color:#133d56;
	font-family:"Noto Sans JP", Hiragino Sans, "游ゴシック体", "YuGothic", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, sans-serif;
	font-size:1.4rem;
	letter-spacing:1px;
	line-height:1.5;
}

* {
	box-sizing:border-box;
}

dl, dt, dd {
	margin:0;
	padding:0;
}

img {
	width:100%;
	vertical-align:middle;
}

h1, h2, h3, h4, h5 {
	font-size:1.4rem;
	font-weight:400;
	margin:0;
}

p {
	margin:0 0 20px;
}

a {
	color:#133d56;
	text-decoration:none;
	transition:all 0.5s ease;
}

a:hover {
	opacity:0.6;
}

ul {
	list-style:none;
	margin:0;
	padding:0;
}

figure {
	margin:0;
}

a.disabled{
	pointer-events:none;
}

.zenmaru {
	font-family: 'Zen Maru Gothic', sans-serif;
}

.ubuntu {
	font-family: 'Ubuntu', sans-serif;
}

.pc-only {
	display:none !important;
}

@media only screen and (min-width:960px){ /* PC */
	body {
		font-size:1.6rem;
	}
	.sp-only {
		display:none !important;
	}
}

/* --------------------------------------------- */
/*	loader
/* --------------------------------------------- */
#loading {
	background:#74a889;
	transition: all 1s;
	position:fixed;
	top:0;
	left:0;
	width:100vw;
	height:100vh;
	z-index:999;
}

.loaded {
	opacity: 0;
	visibility: hidden;
}

.spinner {
	color:#fff;
	position:fixed;
	top:50%;
	left:50%;
	-webkit-transform:translate(-50%, -50%);
	transform:translate(-50%, -50%);
}

.spinner::before {
	content:url(https://salon-selfee.com/img/ico_loader.svg);
}

/* --------------------------------------------- */
/*	header
/* --------------------------------------------- */
header {
	width:100%;
	position:relative;
	z-index: 300;
}

.header-inner {
	margin:auto;
	padding:0 5%;
	position:relative;
}

.pc-only {
	display:none;
}

/* グローバルメニュー */
.header-nav {
	box-sizing:border-box;
	width:100%;
	z-index:200;
}

.header-logo {
	display:block;
	padding:20px 0;
	width:45%;
	z-index:201;
}

@media only screen and (min-width:960px){ /* PC */
	.header-inner {
	}
	.header-nav {
		padding:0;
	}
	.header-logo {
		max-width:200px;
	}
}

/* 各ページタイトル */
.header-title .headline {
	border-bottom:2px solid #0080bb;
	font-size:2rem;
	text-align:right;
	padding-bottom:20px;
}

.header-subtit {
	color:#54b2e0;
	font-size:1.3rem;
	display:block;
}

@media only screen and (min-width:960px){ /* PC */
	.header-title {
		margin:auto;
		margin-top:50px;
		max-width:1000px;
	}
.header-title .headline {
	font-size:5rem;
}

.header-subtit {
	font-size:2.5rem;
}

}

/**/
/* ドロワーメニュー */
.drawer.active {
	opacity:1;
	visibility:visible;
}

.drawer-inner {
	background:#63aedf;
	padding-top:80px;
	position:fixed;
	top:0;
	right:0;
	transform:translateX(100%);
	transition:transform .5s ease;
	width:100%;
	height:100vh;
	z-index:998;
}

.drawer.active .drawer-inner {
	transform:translateX(0);
}

/* ドロワーメニュー リンクデザイン */
.drawer-inner a,
.drawer-inner .title {
	border-top:1px solid #91d1d8;
	color:#fff;
	font-family: 'Zen Maru Gothic', sans-serif;
	font-size:1.4rem;
	display:block;
	padding:15px 5%;
	padding-left:calc(5% + 20px);
	position:relative;
}

.drawer-inner .title {
	margin:0;
}

.drawer-inner a:last-child {
	border-bottom:1px solid #91d1d8;
}

.drawer-inner a:hover {
	background:#00aeef;
}

.drawer-inner a i,
.drawer-inner .header-accordion i {
	margin-right:20px;
	width:1em;
}

.drawer.active .drawer-inner a,
.drawer.active .drawer-inner .header-accordion {
	animation-name:spnavDelay;
	animation-duration:3s;
	animation-fill-mode:forwards;
	opacity:0;
}

@keyframes spnavDelay {
	0% { opacity: 0; }
	100% { opacity: 1; }
}

.drawer-inner a span {
	padding-left:10px;
}

.header-contact span {
	padding-left:0 !important;
}


/* ハンバーガーボタン */
.openbtn {
	border:3px solid #d01e18;
	border-bottom:none;
	border-top:2px solid #d01e18;
	box-sizing:border-box;
	position:fixed;
	right:5%;
	top:30px;
	cursor:pointer;
	width:40px;
	height:25px;
	z-index:999;
}

.openbtn::before,
.openbtn::after {
}

.openbtn::before {
	content:"";
	width: 0;
	height: 0;
	border-style: solid;
	border-right: 20px solid transparent;
	border-left: 20px solid transparent;
	border-bottom: 10px solid #d01e18;
	border-top: 0;
	position:absolute;
	top:-12px;
	left:-3px;
}

.openbtn::after {
}

/* ハンバーガー内側 */
.openbtn span{
	background:#d01e18;
	display:inline-block;
	transition:all .4s;
	position:absolute;
	left:50%;
	-webkit-transform:translateX(-50%);
	transform:translateX(-50%);
	height:3px;
	width:50%;
	z-index:2;
}

.openbtn span:nth-of-type(1) {
	top:6px;	
}

.openbtn span:nth-of-type(2) {
	top:14px;
}

.openbtn.active span:nth-of-type(1) {
	top:4px;
	left:9px;
	transform: translateY(6px) rotate(-45deg);
	width:50%;
}

.openbtn.active span:nth-of-type(2){
	top: 16px;
	left:9px;
	transform: translateY(-6px) rotate(45deg);
	width:50%;
}

@media only screen and (min-width:960px){ /* PC */
	.openbtn {
		top:40px;
	}
	.drawer-inner {
		padding-top:100px;
		width:30%;
	}
}


/* --------------------------------------------- */
/*	footer
/* --------------------------------------------- */
footer {
	background:#d7eef5;
	width:100%;
}

.footer-inner {
	padding:50px 5% 0;
}

.footer-logo {
	margin-bottom:40px;
	width:40%;
}

footer small {
	display:block;
	padding:20px 0;
	margin:0 calc(50% - 50vw);
	text-align:center;
}

/* フッターナビ */
.footer-contents ul li {
	font-family: 'Zen Maru Gothic', sans-serif;
	margin-bottom:20px;
}

.footer-contents ul li a {
	color:#aaa;
	padding:5px 0;
	
}

.footer-contents ul li span {
	color:#333;
	font-weight:700;
	display:inline-block;
	width:50%;
}

.footer-contents address {
	border-top:1px solid #ccc;
	color:#333;
	font-size:1.4rem;
	font-style:normal;
	padding-top:20px;
}

.footer-contents address i {
	font-size:1.5rem;
	margin-right:10px;
}

.footer-contents iframe {
	border:1px solid #fff;
	border-radius:10px;
	margin-top:10px;
	width:100%;
	min-height:30vh;
}

@media only screen and (min-width:960px){ /* PC */
	.footer-inner {
		padding:0;
		padding-top:80px;
		padding-bottom:20px;
		margin:auto;
		max-width:1100px;
	}
	.footer-logo {
		width:20%;
	}
	.footer-contents {
		display:flex;
		align-items:stretch;
		flex-wrap:wrap;
		justify-content:space-between;
	}
	.footer-contents ul {
		width:45%;
	}
	.footer-contents ul li span {
		width:50%;
	}
	.footer-contents iframe {
		margin-top:0;
		width:45%;
		height:100%;
		min-height:35vh;
	}
}

/* --------------------------------------------- */
/*	共通デザイン
/* --------------------------------------------- */
.sec-inner {
	margin:0 5%;
	padding:40px 0;
	position:relative;
}

.headline {
	color:#133d56;
	font-weight:700;
	text-align:center;
	margin-bottom:20px;
}

.note {
	color:#aaa;
	font-size:1.1rem;
	display:block;
}

.em {
	color:#0080bb;
	font-weight:700;
}

.bg-blu {
	background:url(../img/back_wave_blu_top.svg) no-repeat 0 0 / 100%,
	url(../img/back_wave_blu_btm.svg) no-repeat 0 bottom / 100%,
	linear-gradient(92deg, rgba(224, 238, 248, 1) 10%, rgba(214, 228, 241, 1) 90%);
	position:relative;
}

@media only screen and (min-width:960px){ /* PC */
	.sec-inner {
		margin:0 auto !important;
		padding:60px 0;
	}
	.headline {
		font-size:3.5rem;
	}
}

/* お知らせリスト */
.info-list {
	background:linear-gradient(92deg, rgba(224, 238, 248, 1) 10%, rgba(214, 228, 241, 1) 90%);
	border-radius:5px;
	display:block;
	margin-bottom:10px;
	padding:10px 4%;
	position:relative;
	cursor:pointer;
}

.info-list:hover::after {
	color:#54b2e0;
	right:4%;
}

.info-list time {
	font-size:.9rem;
}

.info-list time::after {
	content:"…";
	font-size:1.1rem;
	padding:0 10px;
}

.info-list .cat {
	font-size:1.1rem;
	display:inline-block;
	margin-bottom:7px;
}

.info-list:hover .post-title {
	color:#54b2e0;
	opacity:100;
}

.info-list a:not(.thumb)::before {
	content:"\A";
	white-space:pre;
}

@media only screen and (min-width:960px){ /* PC */
	.info .headline {
		margin-bottom:50px;
		width:100%;
	}
	.info-list {
		width:100%;
		margin:0 auto 20px;
		padding-right:12%;
		padding-bottom:20px;
	}
	.info-list::after {
		content:"\f061";
		font-family:"Font Awesome 6 Free";
		font-size:2rem;
		font-weight:900;
		position:absolute;
		right:5%;
		top:50%;
		-webkit-transform:translateY(-50%);
		transform:translateY(-50%);
		transition:all .5s;
	}
}

/* delighter設定 */
.delighter { /* base style */
	opacity:0;
	transform:translatey(3%);
	transition:all 1s ease-out;
}
  
.delighter.started { /* at the start */
	opacity:1;
	transform:none;
}

.delighter.started.ended { /* at the end */
}

@media only screen and (min-width:960px){ /* PC */
	.delighter { /* base style */
		transform:translatey(10%);
	}
}