﻿@charset "utf-8";  
/*------------------------------------------------------------ 
    STAFF css
------------------------------------------------------------*/  

#profileImg{
	width:290px;
	float:left;
}

#profile{
	width:100%;
	margin-left:-324px;
	float:right;
}

#profile h2{
	margin:0 0 20px 324px;
	color:#543F27;
	font-size:234%;
	letter-spacing:3px;
	line-height:32px;
	padding-bottom:16px;
	border-bottom:1px solid #E8DFD3;
	position:relative;
}

#staff-nameInsta{
	display:block;
	width:32px;
	height: 32px;
	position:absolute;
	right:0;
	top:0;
}

#staff-nameInsta img{ vertical-align: top;}

#profile p{
	padding-left:324px;
	color:#533F26;
	font-size:117%;
	line-height:2;
}

#photo{
	width:auto;
	padding:0 10px;
	margin-top:50px;
	border-top:1px solid #E8DFD3;
}

#photo-list{
	width:100%;
	max-width:1022px;
	margin:0 auto;
	letter-spacing: -.40em;
}

#photo-list > li{
	display:inline-block;
	vertical-align:top;
	letter-spacing:normal;
	width:19.56947162426614%;
	padding:3.620352250489237% 0;
	position:relative;
}

#photo-list > li:not(:nth-child(4n)){ margin-right:7.240704500978474%;}

#photo-list div{
	width:100%;
	height:100%;
	position:relative;
	overflow:hidden;
}

#photo-list ul li{
	position:absolute;
	left:0;
	top:0;
	z-index:-1;
}

#photo-list p{
	color:#533F26;
	margin-top:15px;
}

#pagination{
	width:auto;
	max-width:1024px;
	margin:0 auto;
	padding:0 0px 30px;
	overflow:hidden;
}

#pagination li{
	width:40px;
	height:40px;
	float:left;
	text-align:center;
	line-height:40px;
	font-size:125%;
	font-weight:bold;
	font-family:Arial, Helvetica, sans-serif;
	margin:0 5px 5px 0;
	border:1px solid #E4E4E4;
}

#pagination a{
	display:block;
	width:40px;
	height:40px;
	text-align:center;
	line-height:40px;
	background:#fff;
	color:#543F27;
	font-weight:bold;
	font-family:Arial, Helvetica, sans-serif;
	-webkit-transition:all 0.2s ease-out;
	-moz-transition:all 0.2s ease-out;
	-o-transition:all 0.2s ease-out;
	transition:all 0.2s ease-out;
}

#pagination .selected,
#pagination a:hover{
	color:#fff;
	background:#543F27;
}

#staffHd{ height:54px;}

.sectionHd{
	text-align:center;
	margin-bottom:30px;
	font-size:38px;
	height:43px;
	line-height:43px;
	font-weight:bold;
	padding-bottom:27px;
	background:no-repeat 50% bottom;
	background-size:153px 17px;
	color:#543F27;
	background-image:url(../../img/bg-section-hd01.png);
}

#schedule{
	width:auto;
	max-width:1024px;
	margin:0 auto;
	padding:70px 10px 0;
}

#footer{ margin-top:0;}


.flex{
	display:-webkit-box;
	display:-ms-flexbox;
	display:flex;
	-webkit-box-pack:justify;
	   -ms-flex-pack:justify;
	justify-content:space-between;
	-webkit-flex-wrap: wrap;
    flex-wrap: wrap;
	padding-top:50px;
	padding-bottom:50px;
}

.photoItem{ width:calc(33.33333333% - 16px);}
.photoItem:nth-child(n+4){ margin-top:24px;}

.iframeWrap{
	position: relative;
	height: 0;
	width: 100%;
	overflow:hiddem;
/*	padding-bottom: 72.0353982300885%; */
	padding-top:177.7777777777778%;
}

.iframeWrap iframe{
	position: absolute;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
}


/*------------------------------------------------------------ 
    MediaQuery 
------------------------------------------------------------*/  

/* PC */

@media screen and (min-width: 789px){
.photoItem:nth-child(3n+2):last-child{ margin-right:calc(33.33333333% + 8px);}
}

/* TABLET */
@media screen and (max-width: 788px){

#profileImg{ width:217px;}

#profile{ margin-left:-234px;}

#profile h2{
	margin:0 0 15px 234px;
	font-size:200%;
	letter-spacing:2px;
	padding-bottom:10px;
}

#profile p{
	font-size:109%;
	line-height:1.6;
	padding-left:234px;
}

#photo{
	padding:19px 10px;
	margin-top:50px;
}

#photo-list > li{
	width:22.28473581213307%;
	padding:1.810176125244619% 0;
}

#photo-list > li:not(:nth-child(4n)){ margin-right:3.620352250489237%;}

#pagination{ padding-top:30px;}

#staffHd{ height:40px;}

.sectionHd{
	font-size:242%;
	height:32px;
	line-height:32px;
}

.photoItem{ width:calc(50% - 12px);}
.photoItem:nth-child(n+3){ margin-top:24px;}


}

/* SP */
@media screen and (max-width: 560px){

#profileImg{
	width:100%;
	max-width:290px;
	margin:0 auto;
	float:none;
}

#profile{
	float:none;
	margin:20px 0 0;
}

#profile h2{
	margin:0 -10px 15px;
	padding:0 10px 10px;
	font-size:175%;
	letter-spacing:1px;
}

#staff-nameInsta{ right:10px;}

#profile p{ padding-left:0;}

#photo{
	padding:14px 5px;
	margin-top:30px;
}

#photo-list > li{
	width:50%;
	padding:5px;
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	-o-box-sizing:border-box;
	box-sizing:border-box;
}

#photo-list > li:not(:nth-child(4n)){ margin-right:0;}

#photo-list p{ margin-top:10px;}

#pagination{ padding:20px 0 0;}

.sectionHd{
	font-size:192%;
	height:25px;
	line-height:25px;
	margin-bottom:20px;
}

#schedule{
	padding-top:86px;
	margin-top:-46px;
}

.flex{
	padding-top:30px;
	padding-bottom:30px;
}

.photoItem{ width:calc(50% - 8px);}
.photoItem:nth-child(n+3){ margin-top:20px;}

}
