@charset "utf-8";


/*
====================================================
■ TOP CONT
====================================================
*/
#topbox{
   width:100%;
   margin-top:20px;
   overflow:hidden;
}


/*写真＆プロフィール*/

#topbox #profdata{
   float: right;
   width:53%;
   margin-left:2%;
   position:relative;
   padding-top:15px;
}
#topbox #profdata .catch{
   font-size:1.6rem;
   line-height:1.2;
   margin-bottom:5px;
   text-align:center;
   font-weight: bold;
}

#topbox #profdata .catch:before{
content:"「";
}
#topbox #profdata .catch:after{
content:"」";
}
#topbox #profdata h3{
   font-size:2.2rem;
   line-height:1.5;
   text-align:center;
   font-weight: bold;
}
#topbox #profdata h3 .star{
   margin-left:7px;
	font-size: 1.33rem;
}
#topbox #profdata .body{
   font-size:1.4rem;
   line-height:1.2;
   margin-bottom:10px;
   text-align:center;
}
#topbox #photodata{
   float: left;
   width:45%;
   position:relative;
}

#topbox #photodata .list_today {
    /*right: 17%;*/
}

#topbox #photodata #mainImage {
	width:100%;
  position: relative;
}

#topbox #photodata #mainImage img {
	width:100%;
  max-width: 480px;
}

#topbox #photodata #imageList {
	width:100%;
}

#topbox #photodata #imageList li {
	float:left;
  width:calc(100% / 5);
}

#topbox #photodata #imageList li img {
	width:100%;
}

.moviebox{
  max-width:480px;
  width:100%;
  margin:10px auto;
}
.moviebox video{
	max-width:480px;
  width:100%;
  margin:auto;
}



#topbox #photodata .list_new{
width: 80px;
}
#topbox #photodata .list_today{
width: 100px;
}

#topbox #profdata .type{
width:100%;
margin:20px auto 15px;
position:relative;
}


#topbox #profdata .type .list_rank{
position:absolute;
left:-20px;
top:-78px;
width:100px;
}


#topbox #profdata .type li{
    border: 1px solid ;
    /*color:#D70000;*/
    padding:1% 0;
    font-size:11px;
    font-weight: bold;
    float:left;
    margin:0.5%;
    width:23.5%;
    text-align:center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#topbox #profdata dl {
    font-size: 1.1rem;
    overflow: hidden;
    padding: 1.5% 0 1% 1%;
    text-align: left;

}
#topbox #profdata dl:last-child{
    border:none;
}
#topbox #profdata dt {
    float: left;
    width: 31%;
    font-weight: bold;
}

#topbox #profdata dd {
    float: left;
    width: 67%;
}


@media screen and (max-width: 768px) {
    #topbox{
    margin-top:10px;
}
    #topbox #profdata{
    display:block;
    width:98%;
    margin-right:0%;
    text-align:center;
    padding: 1%;
}

#topbox #photodata .list_today {
    right: 0;
}

    #topbox #profdata h3{
    font-size:1.8rem;
    line-height:1.5;
}
    #topbox #profdata p{
    font-size:1rem;
    line-height:1.1;
}
#topbox #profdata .body {
    font-size: 1.2rem;
}
#topbox #profdata .type {
    width: 98%;
}
#topbox #profdata .type li{
    width:48%;
}
#topbox #profdata .type .list_rank{
width:55px;
}


#topbox #profdata dl {
    font-size: 1.1rem;
    width: 96%;
    margin:auto;
}

    #topbox #photodata{
    display:block;
    width:80%;
    max-width:500px;
    margin:auto;
    float: none;

}

#topbox #photodata #mainImage {
	float: none;
	width:100%;
}

#topbox #photodata #imageList {
	float: none;
	width:100%;
  max-width:480px;
	margin-bottom:20px;
}

#topbox #photodata #imageList li {
	/*display:inline-block;*/
  float:left;
  box-sizing: border-box;
	width:19%;
	margin-right:1%;
	margin-top:5px;
	margin-bottom:0;
}
#topbox #profdata .type .list_rank{
left:-10px;
}
.moviebox{
  margin:20px auto;
}

}



@media screen and (max-width: 480px) {
#topbox #profdata dl {
    font-size: 1rem;
}
#topbox #photodata .list_new{
width: 60px;
}
#topbox #photodata .list_today{
width: 80px;
}
}






/*
====================================================
■ BOTTOM CONT
====================================================
*/
#bottombox{
   width:100%;
   margin-top:20px;
   overflow:hidden;
}


/*
====================================================
■ 下部3カラム幅設定
====================================================
*/


#bottombox section{
   float: left;
   width:33.133%;
   position:relative;
   margin:0 0.1%;
}

@media screen and (max-width: 768px) {
    #bottombox section{
    display:block;
    float:none;
    width:100%;
    margin:auto;
}
}


/*写メ日記設定*/

#bottombox #diarybox iframe {
    margin-left: 2%;
    width: 96%;
}





/*
====================================================
■ SCHEDULE LIST設定 PC
====================================================
*/

div#schebox{margin-bottom:15px;} /*上メニュー用*/

#schebox > ul {
    border-bottom-width: 1px;
	border-bottom-style: solid;
    border-top-width: 1px;
	border-top-style: solid;
    margin: auto;
    width: 100%;
}
#schebox > ul li {
    width: calc(100% / 7);
    text-align:center;
    float: left;
}

#schebox > ul li .reserve a{
   transition: all 0.4s ease 0s;
   cursor: pointer;
   display:block;
   text-align:center;
   width:50px;
   margin:5px auto;
}
#schebox > ul li .days{
    border-bottom-width: 1px;
	border-bottom-style: solid;
    font-size: 1.1rem;
    font-weight: bold;
    padding: 4% 0;
}
#schebox > ul li .time {
    font-size: 1.1rem;
    padding: 4% 0;
    text-align: center;
}
#schebox .reserve a /* プロフィールページ 予約ボタン */
{
	border-style: solid;
	border-width: 1px;
}





/*
====================================================
■ SCHEDULE LIST設定 SP
====================================================
*/

#schebox dl{
	border-width: 3px;
	border-style: solid;
	border-top-width: 2px;
	width: 100%;
	font-size:1.1rem;
  box-sizing: border-box;
}
#schebox dt{
	border-top-width: 1px;
	border-top-style: solid;
	float: left;
	width: 28%;
	padding:5% 1%;
	text-align:center;
}

#schebox dd{
	border-left: 1px solid #ddd;
	border-top: 1px solid #ccc;
	_height: 1%; /* WinIEで頭の文字が右に微妙にずれるのを補正 */
	margin-left: 28%;
	padding:5% 1%;
	position:relative;
}

#schebox dd .reserve{
   float:right;
   width:50px;
   margin-right:2%;
	/*display: none;*/
}

#schebox dd .reserve a{
   transition: all 0.4s ease 0s;
   cursor: pointer;
   display:block;
   text-align:center;
}



/*
====================================================
■ LISTBOX (NEWFACE/RECENT/PICKUP)
====================================================
*/
.listbox ul li{}
.listbox ul li a{
  cursor: pointer;
  display: block;
  border-bottom-style: solid;
	border-bottom-width: 1px;
  width: 100%;
  font-size:1.1rem;
  box-sizing: border-box;
  overflow:hidden;
}
.listbox ul li .body{color:inherit;}
.listbox ul li .ph{
  float: left;
  height: 80px;
  margin-right: 2%;
  overflow: hidden;
  width: 25%;
  padding:0;
}
.listbox ul li article{
float: left;
    font-size: 1rem;
    width: 73%;
    padding:1% 0;
}
.listbox ul li article h5{
    font-size: 1.2rem;
    font-weight: bold;
}



/*
====================================================
■ お客様レビュー設定
====================================================
*/

/*タブ切り替え*/
.tab{
overflow:hidden;
}
.tab li{
padding:2% 0;
float:left;
width:50%;
text-align:center;
transition: all 0.4s ease 0s;
cursor: pointer;
font-size:1rem;
	opacity: 0.6;
}
.tab li.select{
background:none;
font-weight: bold;
border-top-style: solid;
	border-top-width: 1px;
	opacity: 1.0;
}
.content li{
background:none;
transition: all 0.4s ease 0s;
overflow:auto;
height:412px;
}
.hide {
display:none;
}

/*レビュー部分*/
#reviewlist div{
border-bottom-width: 1px;
border-bottom-style: solid;
padding:2%;
}
#reviewlist div .reviewer{
font-size:1.2rem;
}
#reviewlist div .reviewer:after{
font-size:1rem;
content:"さん"
}
#reviewlist div .star:before{
content:"満足度："
}
#reviewlist div .star{
font-weight: bold;
}

#reviewlist div .review_comment{
line-height:1.2;
}


/*FORM*/

.content li form{padding:2%;}

.content li form p{
margin-top:1.5%;
}
.content li form #comment{
width:95%;
}

.content li form #title{
width:70%;
}

.content li form .red{
font-size:0.9rem;
line-height:1.3;
}
input#reviewer,
textarea#comment,
select#star {
    font-size: 1.2rem;
    padding: 1%;
        background-color:#eee;
    border: 1px solid #ccc;
    color:#000;
}

.content li form .more_btn{
width:150px;
}



/*
====================================================
■ 前次設定
====================================================
*/

#navmenu {
    bottom: 60px;
    font-size: 1rem;
    position: fixed;
    right: 0;
    width: 80px;
    z-index: 10;
}
#navmenu li a {
    display: block;
    margin: 3px 0;
    padding: 5px;
    text-align: center;
}
#navmenu li a:hover {
}
#navmenu li i {
    color: #D70000;
    display: block;
    font-size: 5rem;
    line-height: 0.7;
}
#navmenu li i.list {
    font-size: 3rem;
    margin:10px 0;
}

@media screen and (max-width: 768px) {
#navmenu {
    font-size: 0.7rem;
    width: 50px;
}
#navmenu li i {
    color: #D70000;
    display: block;
    font-size: 3.5rem;
    line-height: 0.6;
}
#navmenu li i.list {
    margin:5px 0;
}
#navmenu li i.list:first-child {
    font-size: 2rem;
}

#schebox dt,#schebox dd{
	padding:2% 1%;
}


}