@charset "UTF-8";

*,
*:after,
*:before{
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-o-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;	
}
body{
color: #333333;
font-size: 14px;
line-height: 1.65;
font-weight: 300;
font-family:  'Noto Sans JP', sans-serif;
letter-spacing: 0.1rem;
}

img{
	max-width: 100%;
	height: auto;
	vertical-align: bottom;
	background: rgba(255,255,255,0.01);
}
a{
	color: #333;
	text-decoration: none;	
}
a:hover{
	color: #333;
	text-decoration: underline;
 text-decoration-thickness: 1px;
 text-underline-offset: 5px;
}

/*
font-family: 'Cormorant Garamond', serif;
font-family: 'Noto Sans JP', sans-serif;
*/

.wrap{
 height: 50%;
}
#bg-video{
width: 100%;
height: 50%;
background: url('/img/otto_movie.jpg') no-repeat;
 background-size: cover;
}
/* ----- 背景の上に表示させたいコンテンツ ----- */

.logo{
    position: absolute;
    width: 100%;
    text-align: center;
    color: white;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
}
menu{
margin-top: 3rem;
}
menu .box{
position: relative;
}
menu p{
position: absolute;
width: 100%;
text-align: center;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
font-family: 'Amiri', serif;
font-size: 1.4rem;
letter-spacing: 0.3rem;
}
menu a{
display: inline-block;
margin: 0 1rem;
}
@media (max-width: 768px) {
menu p{font-size: 1.2rem;letter-spacing: 0.2rem;position: relative;}
menu a{margin: 1rem 0.5rem 0;}
}
@media (max-width: 576px) {
menu p{font-size: 1rem;}
}

#otto{
margin-top: 3rem;
}
#otto .col-md-6{
margin-top: 3rem;
line-height: 2rem;
overflow-wrap:break-word;
}
#otto h3{
font-family: 'Amiri', serif;
font-size: 1.2rem;
letter-spacing: 0.2rem;
}
#otto .sns{
vertical-align: text-top;
}
#otto .sns img{
width: 1.5rem;
vertical-align: text-top;
}

/*---#menu---*/
#menu{
margin-top: 3rem;
}
#menu .col-md-4{
text-align: center;
margin-top: 1rem;
}
#menu h3{
font-family: 'Amiri', serif;
font-size: 2rem;
text-align: center;
margin-bottom: 2rem;
letter-spacing: 0.5rem;
margin-top: 4rem;
}
#menu h2{
margin-top: 1rem;
font-size: 1rem;
}
#menu h2 span{
font-size: 0.8rem;
}
#menu h2 img{
height: 1.3rem;
}
#menu .eabari{
background-image: url("/img/eabari_back.jpg");
background-size: cover;
background-position: center center;
padding: 2rem 0;
}
#menu .eabari h5{
font-family: 'Amiri', serif;
text-align: center;
font-size: 1.5rem;
}
#menu h6{
font-size: 1.1rem;
line-height: 1.6rem;
}
@media (max-width: 768px) {
#menu .eabari h5{font-size: 1.2rem;}
#menu .eabari .col-md-5{margin-top: 3rem;}
#menu h2{font-size: 0.9rem;}
}
#menu .price-plan{
margin: 0.8rem 0 0.5rem;
padding: 0.3rem 1rem 0;
font-size: 0.8rem;
font-family: 'Amiri', serif;
}
#menu .plan1{
background-color: #f1dcba;
}
#menu .plan2{
background-color: #a37a5e;
color: #fff;
}
#menu .price{
font-size: 1rem;
}
#menu .price span{
font-size: 0.8rem;
}
#menu p{
text-align: left;
}
#menu .col-12{
text-align: center;
margin-top: 2rem;
}
#menu h4{
width: 100%;
font-size: 1.5rem;
font-family: 'Amiri', serif;
text-align: center;
margin-top: 2rem;
position: relative;
padding: 0 65px;
}
#menu .top{
margin-top: 1rem;
margin-bottom: 1rem;
}
#menu h4:before {
  position: absolute;
  top: calc(50% - 1px);
  left: 0;
  width: 100%;
  height: 1px;
  content: '';
  background: #aaa;
}
#menu h4 span {
  position: relative;
  padding: 0 1em;
  background: #fff;
}
#menu .datsumou{
background-image: url("/img/datumou_back.jpg");
background-size: cover;
background-position: center center;
padding: 2rem 0;
}
#menu .datsumou h5{
font-family: 'Amiri', serif;
font-size: 1.5rem;
margin-bottom: 1rem;
}
@media (max-width: 768px) {
#menu .datsumou h5{font-size: 1.2rem;}
#menu .datsumou .col-md-5{margin-top: 3rem;}
#menu h2{font-size: 0.9rem;}
}
.datsumou-img{
margin-top: 3rem;
}
.hyou table{
width: auto;
margin: auto;
line-height: 1.3rem;
}
.hyou .parts{
padding: 0.8rem 0.5rem 0 0.5rem;
line-height: 1.2rem;
}
.hyou .price{
text-align: right;
padding: 0.8rem 0.5rem 0 0.5rem;
font-size: 1rem;
}
.hyou .times{
text-align: right;
padding: 0 0.5rem 0.5rem  0.8rem;
font-size: 0.7rem;
}
.hyou2 tr{
border-bottom: 1px solid #C7C7C7;
}
.hyou2 .parts{
padding: 0.8rem 0.5rem;
}
.hyou2 .price{
padding: 0.8rem 0.5rem;
}
#menu .facial{
text-align: center;
}
#menu strong{
font-weight: 800;
}

@media (max-width: 768px) {
.hyou table{font-size: 0.8rem;}
.hyou .parts{
padding: 0.5rem 0.2rem 0 0;
}
.hyou .price{
padding: 0.5rem 0.2rem 0 0;
font-size: 0.9rem!important;
letter-spacing: 0;
white-space: nowrap;}

.hyou .times{
text-align: right;
padding: 0 0.2rem 0.5rem 0;
font-size: 0.6rem;
}
}



#info{
margin-top: 5rem;
}
#info h3{
font-family: 'Amiri', serif;
font-size: 2rem;
text-align: center;
margin-bottom: 2rem;
letter-spacing: 0.5rem;
margin-top: 4rem;
}
#info div{
text-align: center;
}

footer{
background: #b91500;
padding: 2rem 0 1.5rem;
color: #fff;
}
footer img{
width: 20rem;
}
footer .box{
position: relative;
}
footer p{
position: absolute;
width: 100%;
text-align: center;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
font-family: 'Amiri', serif;
font-size: 1.4rem;
letter-spacing: 0.3rem;
}
footer a{
display: inline-block;
margin: 0 1rem;
color: #fff;
	text-decoration: underline;
 text-decoration-thickness: 1px;
 text-underline-offset: 5px;
}
footer a:hover{
color: #fff;
}
footer .col-12{
text-align: center;
margin-top: 1rem;
line-height: 1.8rem;
}
@media (max-width: 768px) {
footer img{width: 13rem;}
footer p{font-size: 1.2rem;letter-spacing: 0.2rem;position: relative;margin: 1rem 0.5rem 0;}
footer a{margin: 0 0.5rem;}
}
@media(min-width: 768px){
footer a[href^="tel:"]{pointer-events: none;}
}
@media (max-width: 576px) {
footer p{font-size: 1rem;}
}

.page_top {
  position: fixed;
  right: 20px;
  bottom: 20px;
  display: none;
  z-index: 20000;
}

.page_top a{
-webkit-transition: .2s;
transition: .2s;
}

.page_top a:hover{ opacity: 0.6; }












@media (min-width: 768px) {
.sp-br{display: none;}
}