@charset "utf-8";
/* レイアウトのためのCSS */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100;300;400;500;700;900&display=swap');

body {
	background: url("../img/bg-s.jpg") top center repeat;
	color: #fff;
	background-color: #343f43;
	font-family: 'Noto Sans JP', sans-serif;
	line-height: 1.8rem;
}


ul {
	list-style: none;
}

#container {
}

/*============================== ボタン設定 */
.btn{
	width: 80%;
	max-width: 500px;
	/*アニメーションの起点とするためrelativeを指定*/
	position: relative;
	overflow: hidden;
	/*ボタンの形状*/
	text-decoration: none;
	display: inline-block;
	border: 1px solid #fff;/* ボーダーの色と太さ */
	padding: 10px 30px;
	text-align: center;
	outline: none;
	/*アニメーションの指定*/   
	transition: ease .2s;
}

/*ボタン内spanの形状*/
.btn span {
	position: relative;
	z-index: 2;
	color:#fff;
}

.btn:hover span{
	color:#fff;
}

/*============================== salonボタン設定 */
.btn-salon{
	width: 100%;
	/*アニメーションの起点とするためrelativeを指定*/
	position: relative;
	overflow: hidden;
	/*ボタンの形状*/
	text-decoration: none;
	display: inline-block;
	background:#000;
	padding: 14px 30px;
	text-align: center;
	outline: none;
	/*アニメーションの指定*/   
	transition: ease .2s;
}

/*ボタン内spanの形状*/
.btn-salon span {
	position: relative;
	z-index: 2;
	color:#fff;
}

.btn-salon:hover span{
	color:#fff;
}


/*== 背景が流れる（斜め） */
.bgskew::before {
	content: '';
	/*絶対配置で位置を指定*/
	position: absolute;
	top: 0;
	left: -130%;
	/*色や形状*/
	background:#e3007f;
	width:120%;
	height: 100%;
	transform: skewX(-25deg);
}

/*hoverした時のアニメーション*/
.bgskew:hover::before {
	animation: skewanime .3s forwards;/*アニメーションの名前と速度を定義*/
}

@keyframes skewanime {
  100% {
    left:-10%;/*画面の見えていない左から右へ移動する終了地点*/
  }
}







#header .fixed{
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    position: relative;
}

#header h1{
    position: fixed;
    z-index: 999;
    top:2.5vh;
    left:2vw;
}

#fiole-logo {
	width: 180px;
}

/* gnavi */

.circle-bg{
    border:1px solid #4bae0b;
	background: #243038;
	opacity: 0.98;
}

#g-nav a:hover {
	color: #fff;
}

#g-nav ul{
    font-size: 1.2rem;
    letter-spacing: 0.2em;
}


@media screen and (max-width:768px) {
#g-nav ul{
    font-size: 1rem;
}
}

.border-top {
	border-top: 1px #fff solid;
}

.border-top-50 {
	border-top: 1px #fff solid;
	width: 50%;
	max-width: 500px;
	margin: 0 auto;
}

#top-cont {
	margin: 100px auto 0;
	text-align: center;
}

#top-cont a {
	color: #fff;
}

#top-cont a:hover {
	opacity: 0.8;
}

#top-cont .inner img {
	width: 500px;
	margin: 0 0 40px 0;
}

@media screen and (max-width:768px) {
#top-cont .inner img {
	width: 100%;
}
}

#top-cont p {
	margin: 16px 0 0 0;
	font-size: 1.2rem;
}

#time-table-btn {
	width: 100%;
	margin: 80px 0 0 0;
}

#time-table-btn .button-0530,
#time-table-btn .button-0531 {
	display: table;
	width: 50%;
	height: 120px;
	text-align: center;
}


#time-table-btn .button-0530 div,
#time-table-btn .button-0531 div {
	display: table-cell;
	vertical-align: middle;
}

#time-table-btn .button-0530 {
	float: left;
	background: -moz-linear-gradient(left, #47954c, #7bc155);
	background: -webkit-linear-gradient(left, #47954c, #7bc155);
	background: linear-gradient(to right, #47954c, #7bc155);
}

#time-table-btn .button-0531 {
	background: -moz-linear-gradient(left, #004c82, #009eab);
	background: -webkit-linear-gradient(left, #004c82, #009eab);
	background: linear-gradient(to right, #004c82, #009eab);
}

@media screen and (max-width:768px) {
#time-table-btn .button-0530,
#time-table-btn .button-0531 {
	width: 100%;
}

#time-table-btn .button-0530 {
	float: none;
}
}

#time-table-btn a {
	color: #fff;
	text-decoration: none;
}

.txt-l {
	font-size: 1.6rem;
}

.txt-m {
	font-size: 1.2rem;
}

.txt-s {
	font-size: 0.9rem;
}

.txt-bold {
	font-weight: 500;
}

main {
}

.cont-001,
.cont-002 {
}

.cont-001 .inner {
	width: 100%;
	max-width: 1000px;
	margin: 64px auto;
	text-align: center;
}

@media screen and (max-width:768px) {
.cont-001 p {
	padding: 16px;
}
}

.cont-title img {
	width: 100%;
	margin-bottom: 32px;
}

.movie-wrap {
	position: relative;
	padding-bottom: 56.25%; /*アスペクト比 16:9の場合の縦幅*/
	height: 0;
	overflow: hidden;
	/*margin: 64px 0;*/
	margin: 0;
}
 
.movie-wrap iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.movie-wrap img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.btn i {
	font-size: 1.2rem;
}

.icon-red i {
	color: #ff0000;
}

.icon-purpl i {
	color: #b068cf;
}


.cont-002 .inner {
	width: 100%;
	max-width: 1000px;
	margin: 64px auto;
	text-align: center;
}

.cont-002 ul {
	display: flex;
}

.cont-img {
}

.cont-img img {
	width: 350px;
}

.cont-txt {
	width: 100%;
	max-width: 650px;
	padding: 16px 0 0 32px;
}

.cont-txt p {
	margin: 0 0 32px 0;
	text-align: left;
}

@media screen and (max-width:768px) {
.cont-002 ul {
	display: contents;
}
.cont-img  {
	float: none;
}

.cont-img  img {
	width: 90%;
}

.cont-txt {
	padding: 16px;
}
}

.step-no {
	display: table;
	text-align: center;
	width: 350px;
	height: 80px;
	background: -moz-linear-gradient(left, #47954c, #7bc155);
	background: -webkit-linear-gradient(left, #47954c, #7bc155);
	background: linear-gradient(to right, #47954c, #7bc155);	
}

.step-no div {
	display: table-cell;
	vertical-align: middle;
}

.step-txt {
	margin: 0 0 0 32px;
	text-align: left;
}

.photosnap-img {
	width: 50%;
}

.photosnap-img img {
	width: 90%;
}

@media screen and (max-width:768px) {
.step-no {
	width: 100%;
}

.step-txt {
	margin: 32px;
}

.photosnap-img {
	width: 100%;
}

.photosnap-img img {
	width: 90%;
}
}

.mb-32 {
	margin-bottom: 32px;
}

.item-green {
	color: #83c757;
}

.item-blue {
	color: #0073bc;
}

.cont-002 h3 {
	text-align: left;
	line-height: 5rem;
	font-size: 3rem;
	font-weight: 300;
}

@media screen and (max-width:768px) {
.cont-002 h3 {
	text-align: center;
	margin-bottom: 64px;
	font-size: 1.6rem;
	line-height: 2.4rem;
}
}

.cont-002 h4 {
	text-align: left;
	font-size: 1.6rem;
	margin: 0 0 16px 0;
}

.cont-003 .inner {
	width: 100%;
	max-width: 1000px;
	margin: 64px auto;
}

.cont-003 h5 {
	text-align: left;
	line-height: 3rem;
	font-size: 2.4rem;
	font-weight: 300;
}

.cont-003 ul {
}

.cont-003 li {
	margin: 0 0 40px 0;
	background: #fff;
	line-height: 0.7rem;
}

.cont-003 li img {
	width: 100%;
}

.cont-003 li .salon-info {
}


/*============================== salonアコーディオン設定 */

/* inputのチェックボックスを非表示 */
.accordion-hidden {
  display: none;
}

/* 見出しボタン部分 */
.accordion-open {
text-align: center;
color: #000;
display: block;
padding: 10px 80px 10px 10px;
margin: 5px 0;
position: relative;
}

/* ＋アイコン */
.accordion-open::before,
.accordion-open::after {
  content: '';
  width: 20px;
  height: 3px;
  background: #000;
  position: absolute;
  top: 50%;
  right: 5%;
  transform: translateY(-50%);
}

/* アイコンのー */
.accordion-open::after {
  transform: translateY(-50%) rotate(90deg);
  transition: .5s;
}

/* アコーディオンが開いたらーに */
.accordion-hidden:checked+.accordion-open:after {
  transform: translateY(-50%) rotate(0);
}

/* アコーディオン中身部分 */
.accordion-inner {
  display: block;
  height: 0;
  overflow: hidden;
  padding: 0;
  opacity: 0;
  transition: 0.5s;
  /* 表示速度の設定 */
  cursor: pointer;
}

/* チェックボックスにチェックが入ったら中身部分を表示する */
.accordion-hidden:checked+.accordion-open+.accordion-inner {
  height: auto;
  opacity: 1;
  padding: 10px;
}
/* ↑ここまで共通 */


/* 中にいろいろ入れたいとき */
.accordion-box {
  display: block;
  height: 0;
  overflow: hidden;
  padding: 0;
  opacity: 0;
  transition: 1s;
}

.accordion-hidden:checked+.accordion-open+.accordion-box {
  height: auto;
  opacity: 1;
  padding: 10px;
}


.cont-004 .inner-salon {
	color: #000;
	width: 100%;
	max-width: 1000px;
	margin: 64px auto;
	text-align: center;
}

.cont-004 .inner-salon p {
	line-height: 1.5rem;
	margin: 0 0 32px 0;
}

.cont-004 .inner {
	color: #000;
	width: 100%;
	max-width: 1000px;
	margin: 64px auto;
	text-align: center;
}

.cont-004 ul {
	display: flex;
}

.cont-004 li {
	width: 33%;
	padding-left: 12px;
}

.cont-004 li img {
	border-radius: 50%;
	width: 70%;
	margin: 0 auto;
}

.cont-004 li p {
line-height: 2.4em;
}

.cont-004 li a {
line-height: 1.2em;
}

@media screen and (max-width:768px) {
.cont-004 ul {
	display: contents;
}

.cont-004 li {
	width: 100%;
	padding-left: 0;
}

.cont-004 li img {
	width: 40%;
	margin: 0 auto;
}
}

footer {
text-align: center;
margin: 64px 0 32px 0;
}

footer a {
color: #fff;
}

@media screen and (max-width:768px) {
#floormap img {
	width: 100%;
}

footer {
	font-size: 0.8rem;
}

.pc {
 display: none;
}
}

@media screen and (min-width:769px) {
.sp {
 display: none;
}
}


.pd-16 {
	padding: 0 16px;
}

/*PAGE TOP（↑）設定
---------------------------------------------------------------------------*/
/*通常時のボタンは非表示*/
body .nav-fix-pos-pagetop a {display: none;}
/*fixmenu_pagetop.jsで設定している設定値になったら出現するボタンスタイル*/
body.is-fixed-pagetop .nav-fix-pos-pagetop a {
	display: block;text-decoration: none;text-align: center;
	width: 50px;		/*幅*/
	line-height: 50px;	/*高さ*/
	z-index: 1;
	position: fixed;
	bottom: 80px;	/*下から20pxの場所に配置*/
	right: 3%;		/*右から3%の場所に配置*/
	background: #666;	/*背景色（古いブラウザ用）*/
	background: rgba(0,0,0,0.6);	/*背景色。0,0,0は黒の事。0.6は60%色がついた状態。*/
	color: #fff;	/*文字色*/
	border: 1px solid #fff;	/*枠線の幅、線種、色*/
	animation-name: opa1;	/*keyframes.cssで使う@keyframesの指定*/
	animation-duration: 1S;	/*アニメーションの実行時間*/
	animation-fill-mode: both;	/*アニメーションの待機中は最初のキーフレームを維持、終了後は最後のキーフレームを維持。*/
}
/*マウスオン時*/
body.is-fixed-pagetop .nav-fix-pos-pagetop a:hover {
	background: #999;	/*背景色*/
}


.mt-80 {
	margin-top: 80px;
}

.mb-80 {
	margin-bottom: 80px;
}