@charset "UTF-8";
/* CSS Document */
	html, body{
		color:#666;
		font-size: 10px;
		font-size:62.5%;
		font-family: "Zen Old Mincho", serif;
  		font-weight: 400;
  		font-style: normal;
	}
	body{
		padding-top:130px;
		font-size: 1.6rem;
		line-height: 3rem;
		letter-spacing:0.08rem;
	}
.zen-old-mincho-regular {
  font-family: "Zen Old Mincho", serif;
  font-weight: 400;
  font-style: normal;
	}

	.bg1{background-color: #eae5e2;color:#6E493D;}
	.bg2{background-color: #f5f4f0;}
	
	#logo img,#footer_logo img{
		width:200px;
		height:77px;
	}
	#t_content{width: 119px;height: auto}
	#t_salon{width: 92px;height: auto}
	#t_nailmenu{width: 157px;height: auto}
	#t_school{width: 104px;height: auto}
	#t_profile{width: 107px;height: auto}
	#t_reserve{width: 112px;height: auto}
    #t_reserve{width: 112px;height: auto}
	.main_container{
		width:100%;
		max-width:950px;
		margin:0 auto;
		padding-left: 38px;
		padding-right: 38px;
	}
	.follow_btn{
		display:flex;
		flex-wrap:wrap;
	}
	.sns_icon{
		margin:0em 0.5em 0.25em 0.5em;
		width:45px;
		height:45px;
	}
	.sns_icon_line{
		margin:0em 0.5em 0.25em 0.5em;
		width:80px;
		height:80px;
	}

	.c_wrap{
		display: flex;
		flex-wrap: wrap;
	}
	.c_img{
		width:40%;
	}
	.c_img img{
		width: 100%;
		height: auto;
	}
	.al_center{
		text-align: center;
	}
	.c_title{
		margin-bottom:2rem;
	}
	#concept .c_title, #salon .c_title, #profile .c_title{
		margin-bottom:2.7rem;
	}
	#concept, #salon ,#nailmenu, #school, #profile, #reserve{
		padding-bottom:7rem;
	}
	#nailmenu, #school, #profile, #reserve{
		padding-top:7rem;
	}
	
	#navigation_bar{
		position:fixed;
		padding-top:2.5rem;
		padding-bottom:2.5rem;
		top:0;
		width:100%;
		background-color:rgba(255,255,255,0.8);
		z-index:50;
	}
	.menu-btn {
		position: fixed;
		top: 10px;
		right: 70px;
		display: flex;
		height: 60px;
		width: 60px;
		justify-content: center;
		align-items: center;
		z-index: 90;
	}
	.menu-btn span,
	.menu-btn span:before,
	.menu-btn span:after {
		content: '';
		display: block;
		height: 1px;
		width: 25px;
		border-radius: 1px;
		background-color: #999999;
		position: absolute;
	}
	.menu-btn span:before {
		bottom: 8px;
	}
	.menu-btn span:after {
		top: 8px;
	}
	#menu-btn-check:checked ~ .menu-btn span {
		background-color: rgba(255, 255, 255, 0);
	}
	#menu-btn-check:checked ~ .menu-btn span::before {
		bottom: 0;
		transform: rotate(45deg);
	}
	#menu-btn-check:checked ~ .menu-btn span::after {
		top: 0;
		transform: rotate(-45deg);
	}
	#menu-btn-check {
		display: none;
	}
	#menu-btn-check:checked ~ #global_menu{
		top: -50px;/*メニューを画面内へ*/
		left:0;
		opacity:1;
		visibility: visible;
	}
	#global_menu{
		opacity:0;
		visibility: hidden;
		position:fixed;
		left:0;
		right:0;
		top:0;
		width:100%;
		height:calc(100vh + 140px);
		z-index:80;
		text-align:right;
		padding-top:140px;
		padding-right:70px;
		background-color:#fff;
	}
	.global_open{
		transition: all 0.5s;/*アニメーション設定*/
	}
	#global_menu li{
		font-size:1.8rem;
		padding-bottom:3.7rem;
	}
	#global_menu li p{
		font-size:2.1rem;
	}
	#global_menu .follow_btn{
		justify-content:right;
	}
	.swiper{
		width:950px;
		margin:0 auto;
		position:relative;
		z-index:40;
	}
	.slide-media{
		positon:relative;
		overflow:hidden;
		height:465px;
	}
	.slide-media img{
		position:absolute;
		top:0;
		left:0;
		width:100%;
		height:100%;
		-o-object-fit: cover;
		object-fit: cover;
	}
	.swiper-pagination-bullet{
		background-color:#eae5e2;
	}
	#concept{
		margin-top:-233px;
		padding-top:280px;
	}
	#concept .c_desc{
		width:60%;
		padding-right: 4em;
	}
#salon {
	padding-top: 100px;
}

	#salon .c_desc{
	width: 60%;
	padding-left: 5.5rem;
	}

	#salon .c_wrap{
		flex-flow: row-reverse;
	}
	#salon h3{
		font-size: 2.25em;
		margin-bottom: 0.8rem;
	}
	#salon p{
		margin-bottom:2.2rem;
	}
	
	#nailmenu h3{font-size:1.8rem;}
	#nailmenu h3, #nailmenu h4{
		margin-top:2em;
		text-align:center;
	}
	.t_price{
		width:86%;
		margin: 1em 7%;
		border:1px solid #cccccc;
	}
	.t_price th, .t_price td, .s_course th, .s_course td{
		padding:0.75em 2rem;
		vertical-align:middle;
	}
	.t_price tr{
		background-color:#EFEFEF;
	}
	.t_price tr:nth-child(odd){
		background-color:#fff;
	}
	.t_price th{
		font-weight:normal;
		width:70%;
	}
	.t_price td{
		border-left:1px solid #cccccc;
		width:30%;
	}
	.t_price .bt, .s_course tr{
		border-top:1px solid #cccccc;
	}
	.ind1{text-indent:1em}
	.ind3{text-indent:3em}
	.ind10{text-indent:10.5em}
	.ind11{text-indent:11.5em}

	#school h3{
		display:inline-block;
		margin:30px auto 40px;
		text-align:center;
		padding:1.5rem 3rem;
		background-color:#F2F1ED;
		color:#666666;
		font-size:1.8rem;
		line-height: 1.8rem;
	}
	#school h3 span{
		display:block;
		margin-top:0.4rem;
		font-size:1.2rem;
		line-height: 1.2rem;
	}
	#school.s_course_wrap{
		width:100%;
		padding-bottom: 6rem;
	}
	#school .s_course{
		width:100%;
		margin: 0 0 6rem;
		border:1px solid #cccccc;
	}
	#school .s_course tr{
		background-color: #fff;
	}
	#school .s_course tr:nth-child(odd){
		background-color: #efefef;
	}
	#school .s_course th{
		text-align:center;
		background-color: #fff;
		border-left:1px solid #cccccc;
	}
	#school .s_course td{
		border-left:1px solid #cccccc;
		padding:1.5rem;
	}
	#school .s_course td p{
		font-size:1.4rem;
	}
	#school .s_course tr td:not(:nth-child(3)){
		text-align:center;
	}
	#school ul{
		list-style:disc;
		margin-left:1em;
		margin-bottom:8rem;
	}
	#school li{
		padding-top: 0.8rem;
		padding-bottom: 0.8rem;
	}
	#school dl{
		padding:1em;
		border-radius:1.6rem;
		background-color:#e7e2df;
		margin:0 10% 1.6rem;
		display:flex;
		flex-wrap:wrap;
		width: 80%;
	}
	#school dt{
		width:2.5em;
		text-align:center;
	}
	#school dt p{
		display:inline-block;
		background-color:#fff;
		color:#665500;
		line-height:2em;
		width:2em;
		text-align:center;
	}
	#school dd{
		display:inline-block;
		padding-left:1.5rem;
		width:calc(100% - 2.5em);
	}
	#school #line{
		margin-top:6rem;
	}

	#profile .c_desc{
		width:60%;
		padding-left:5.5rem;
	}
	#profile strong{
		font-weight: normal;
	}
	#reserve .follow_btn{
		margin-top:1.5em;
	}
	#reserve #tel{
		font-size:1.8rem;
	}
	#reserve #tel strong{
		display:block;
		margin-top:4.5rem;
		margin-bottom:8rem;
		font-size:2.4rem;
	}
	#reserve .follow_btn{
		justify-content: center;
		margin-bottom: 4rem;
	}
	#reserve strong{
		font-weight: normal;
	}


	#attention b{
		font-size:1.8rem;
		font-weight:normal;
		color: red;
	}
	#attention ul{
		margin-top:2.5rem;
	}
	#attention li{
		text-indent:-1em;
		padding-left: 1em;
	}
	
	
	#footer{
		padding-top:4.5em;
		padding-bottom:5em;
	}
	#footer_logo{
		margin-bottom:2.8em;
	}
	#footer .follow_btn{
		justify-content:center;
	}
	#access_map{
		width:620px;
		height:295px;
		margin:3em auto 3.5em;
		border:1px solid #b3b3b3;
		position:relative;
	}
	#access_map iframe{
		width:100%;
		height:293px;
	}
	#copyrights{
		color:#b3b3b3;
		font-size: 1rem;
	}
	#tel strong .small {
		font-size: 14px;
		color: #FF0000;
	}
	div a .line {
		text-decoration: underline;
	}
	.c_desc div p {
		margin-top: 10px;
	}
.c_wrap .c_desc h2 {
	font-size: 20px;
	margin-bottom: 20px;
	color: #4E342B;
	line-height: 1.5em;
}
.c_wrap .c_desc h3 {
	font-size: 20px;
	margin-top: 30px;
	margin-bottom: 20px;
	color: #4E342B;
}
.c_wrap .c_desc .sub {
	color: #4E342B;
	margin-bottom: 10px;
	padding-top: 5px;
	padding-right: 5px;
	padding-bottom: 5px;
	padding-left: 5px;
	background-color: #FFFFFF;
}
.c_wrap .c_desc .sub2 {
	color: #4E342B;
	margin-top: 30px;
	margin-bottom: 10px;
	padding-top: 5px;
	padding-right: 5px;
	padding-bottom: 5px;
	padding-left: 5px;
	background-color: #FFFFFF;
}
.c_wrap .c_desc h4 {
	margin-bottom: 15px;

}









@media only screen and (max-width:949px) {
	.menu-btn{right:14px;}
	#global_menu{
		padding-right:28px;
	}
	#global_menu li{
		padding-bottom:2.8rem;
	}
	#global_menu .follow_btn{
		margin-top:1rem;
	}
	.t_price, .s_course{
		width:96%;
		margin: 1em 2%;
		border:1px solid #cccccc;
	}
	.t_price td{
		min-width: 11em;
	}
	.on_sp{
		display: none;
	}
	.swiper{
		width:100%;
	}
	footer .main_container{
		padding:0;
	}
	#access_map{
		width:100%;
	}
	
}
@media only screen and (max-width:629px) {
	.on_pc{
		display: none;
	}
	.on_sp{
		display:table-row;
	}
}
@media only screen and (max-width:519px) {
	.main_container{
		padding-left: 14px;
		padding-right: 14px;
	}
								
	.c_title{text-align: center;}
	.sp_al_left{
		text-align: left;
	}
	#concept .c_desc, #salon .c_desc, #profile .c_desc, #qa .c_desc{
		width:100%;
		padding:0;
	}
	#concept .c_img, #salon .c_img, #profile .c_img,#qa .c_img{
		margin-top: 2.3rem;
		margin-bottom:4.5rem;
		width:100%;
	}
	
	#salon .c_wrap{
		display: block;
		flex-flow: row;
	}
	.t_price{
		width:100%;
		font-size: 1.2rem;
	}
	.t_price th{
		width: auto;
	}
	.t_price td{
		min-width: 11em;
	}
	.t_price span{
		display:block;
	}
	.t_wrap{
/*		width:calc(100% + 14px);
/*		overflow:auto;
/*		white-space:nowrap;*/
	}
	.s_course_wrap{
		width:calc(100 +14px);
		overflow:auto;
		white-space:nowrap;
	}
	.s_course{
		width:100%;
		font-size:1.2rem;
	}
	#profile{
		padding-top:2.5rem;
	}
	#reserve span{
		display: block;
	}
}

@media screen and (min-width: 768px){
  .pc_sp{
    display:block;
  }
	.pc_br{
		display: none;
	}
}

@media screen and (max-width: 767px){
  .pc_sp{
    display:none;
  }
}

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

@media screen and (max-width: 767px){
  .swipe{
    display:block;
  }
}

@media screen and (min-width: 768px){
  .s-pc{
    display:block;
  }
  .s-sp{
    display:none;
  }
}

@media screen and (max-width: 767px){
  .s-pc{
    display:none;
  }
  .s-sp{
    display:block;
  }
}
.main_container .t_wrap .center {
	text-align: center;
}
.c_desc ul .important {
	margin-left: 10px;
}
.c_wrap .c_desc .text_sp {
	margin-bottom: 15px;
}
#nailmenu .main_container .bold {
	font-weight: bold;

}

@media screen and (max-width: 767px){
.main_container .c_desc .hf {
	text-align: left;
}
}
@media screen and (min-width: 768px){
.main_container .c_desc .hf {
	text-align: center;
}
}
.main_container #attention .qa {
	margin-top: 40px;
	font-size: 20px;
	margin-bottom: 25px;
}


.cp_qa01 dt {
  position: relative;
  margin: 0 0 1.5em 30px;
}
.cp_qa01 dd {
  position: relative;
  margin: 0 0 1.5em 0;
  padding: 0 0 10px 60px;
  border-bottom: 1px dotted #CCCCCC;
}
.cp_qa01 dt::before,
.cp_qa01 dd::before {
  position: absolute;
  margin: 0 0.5em 0 -30px;
  color: #ffffff;
  font-weight: bold;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 24px;
  height: 24px;
  border-radius: 3px;
}
.cp_qa01 dt::before {
  content: 'Q';
  background: #B8B6B6;
}
.cp_qa01 dd::before {
  content: 'A';
  background: #B8B6B6;
}
.cp_qa01 dt::after,

.video-container {
            width: 500px;
            height: 888px;
            margin: 0 auto;
	        margin-top: 100px;
	        position: relative;
        }

        video {
            width: 100%;
            height: 100%;
            display: block;
        }

        @media (max-width: 768px) {
            .video-container {
	width: 95%;
	height: auto;
	margin-top: 50px;
            }
        }
/* 音声ONボタンのスタイル */
#unmuteButton {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.7);
    color: white;
    border: none;
    padding: 10px 20px;
    font-size: 16px;
    cursor: pointer;
    display: none;
}