@charset "UTF-8";

/* ************************************************************************
*
*   Perie Hall - common.css
*
************************************************************************ */

/* -------------- ▼ Base ▼ -------------- */

@import url('https://fonts.googleapis.com/css?family=Noto+Serif:400,700');
/*@font-face {
  font-family: 'Noto Serif Japanese';
  font-style: normal;
  font-weight: 400;
  src: url(//fonts.googleapis.com/earlyaccess/NotoSerifCJKjp-Regular.otf) format('opentype');
 }
@font-face {
  font-family: 'Noto Serif Japanese';
  font-style: normal;
  font-weight: 500;
  src: url(//fonts.googleapis.com/earlyaccess/NotoSerifCJKjp-Medium.otf) format('opentype');
 }*/
 @font-face {
  font-family: 'Sawarabi Mincho';
  font-style: normal;
  font-weight: 400;
  src: url(//fonts.gstatic.com/ea/sawarabimincho/v1/SawarabiMincho-Regular.eot);
  src: url(//fonts.gstatic.com/ea/sawarabimincho/v1/SawarabiMincho-Regular.eot?#iefix) format('embedded-opentype'),
       url(//fonts.gstatic.com/ea/sawarabimincho/v1/SawarabiMincho-Regular.woff2) format('woff2'),
       url(//fonts.gstatic.com/ea/sawarabimincho/v1/SawarabiMincho-Regular.woff) format('woff'),
       url(//fonts.gstatic.com/ea/sawarabimincho/v1/SawarabiMincho-Regular.ttf) format('truetype');
}
@import url('//fonts.googleapis.com/css?family=Noto+Sans:400,500|Noto+Serif:400,500');
@import url(//fonts.googleapis.com/earlyaccess/notosansjapanese.css);
@import url('https://fonts.googleapis.com/css?family=Roboto:500');

body{
	-webkit-print-color-adjust: exact;
}
*{
	box-sizing: border-box;
}
#container, header{
	font-family: 'Noto Serif','Noto Serif Japanese', 'Sawarabi Mincho' , "游明朝体", "Yu Mincho", YuMincho,  serif;
	font-weight: 400;
	font-size: 13px;
	letter-spacing: 1px;
}
img{
	vertical-align: bottom;	
	backface-visibility: hidden;
}
img.fit{
	width: 100%;
}
a{
	transition: opacity ease .5s;
}
a:hover{
	opacity: .6;
}
.linkOr{
	padding-right: 13px;
	background: url( ../img/arrow_or.png) no-repeat 97% center;
	background-size: 5px auto;
	display: inline-block;
}
em, strong{
	font-weight: bold;
}
table,  x:-moz-any-link{ /*Firefox*/
	border-collapse:separate;
}
.sp{
	display: none;
}
.clear{
	clear: both;
}
.clearfix:after {
  	content: "";
  	clear: both;
  	display: block;
}
.sanserif{
	font-family: 'Noto Sans', 'Noto Sans Japanese',"游ゴシック", "Yu Gothic", YuGothic, "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "ＭＳ ゴシック", sans-serif;
	letter-spacing: 0;
}
.txt16{
	font-size: 114.2%;
}
.txt12{
	font-size: 85.7%;
}
.txtOr{
	color: #f08845;
}

/*Animation*/

.animate .animList li,
.anim1,.anim2,.anim3{
	position: relative;
	top: 30px;
	opacity: 0;
}
.animImg{
	overflow: hidden;
}
.animImg img{
	animation: zoomOut 2s linear;
	transform: scale(1);
}
@keyframes line {
  0% { width: 1px; }
  100% { width: 100%; }
}
@keyframes line2 {
  0% { width: 1px; }
  100% { width: 96%; }
}
@keyframes zoomOut {
  0% { transform: scale(1.1);}
  100% { transform: scale(1);}
}
@keyframes fadeOut {
  0% { transform: opacity(1);}
  100% { transform: opacity(0.5);}
}


/* -------------- ▼ Loading ▼ -------------- */


/*@keyframes loading {
  0% { width: 1px; }
  100% { width: 300px; }
}
*/


/* ----------------- ▼ Contents ▼ ----------------- */

#container.subpage{
	padding-top: 128px;
	font-size: 14px;
}
.inner{
	width: 1024px;
	margin: auto;
}
h2{
	font-family: 'Noto Serif','Noto Serif Japanese', 'Sawarabi Mincho' , "游明朝体", "Yu Mincho", YuMincho,  serif;
	font-weight: 500;
	letter-spacing: 4px;
}

.inner h3{
	font-weight: 400;
}

.subpage h2{
	margin: 20px auto 52px;
	font-size: 40px;
	text-align: center;
	letter-spacing: 8px;
	line-height: 2;
}
.subpage h2 span{
	position: relative;
	display: inline-block;
}
.subpage h2 span:after{
	width: 96%;
	height: 2px;
	content: "";
	background: #40b6e8;
	display: inline-block;
	position: absolute;
	bottom: 4px;
	left: 2%;
	/*animation: line2 1s ease-out;*/
}

/* ----------------- ▼ Header ▼ ----------------- */

header{
	width: 100%;
	padding-top: 80px;
	z-index: 999;
	position: fixed;
	/*margin-bottom: 53px;*/
}
header .headInner{
	max-width: 1460px;
	min-width: 1184px ;
	margin: auto;
	padding: 0 80px;
}
header h1{
	display: inline-block;
}
header nav{
	float: right;
}
header nav li{
	padding: 0 20px;
	float: left;
	position: relative;
}
header nav li:first-child{
	padding: 0;
}

header nav li:last-child{
	padding: 0 0 0 20px;
}

header nav li a:hover{
	opacity: 1;
}
header nav li.active:after{
	height: 1px;
	content: "";
	background: #45b8e9;
	display: block;
	position: relative;
	top: 5px;
}
header nav > ul > li:not(.active) a:hover:after{
	height: 1px;
	content: "";
	background: #45b8e9;
	display: block;
	animation: line .3s linear;
	position: relative;
	top: 5px;
}
header nav li .child{
	width: 202px;
	padding: 40px 23px 15px;
	display: none;
	position: absolute;
	top: 33px;
	left: 7px;
	border-bottom: 1px solid #d9d9d9;
	font-size: 85%;
	background: url(../img/subnav_top.png) no-repeat center top,
				url(../img/subnav_mid.png) repeat-y center 7px;
	background-size: 100% auto;
}
header nav li .child li{
	height: 22px;
	margin-bottom: 14px;
	padding: 0 0 10px;
	float: none;
	/*display: inline-block;*/
}
/*header nav li .child li:nth-child(3){
	height: 44px;
}*/
header nav li .child li a{
	display: inline-block;
}
header nav li .child li a:hover:after{
	height: 1px;
	content: "";
	background: #45b8e9;
	display: block;
	animation: line .3s linear;
	position: relative;
	top: 4px;
}

/*@media screen and (max-width: 1368px){
	header{

		padding-top: 80px;
	}
	header .headInner{
		max-width: 1368px;
		padding: 0 80px;
	}
}
@media screen and (max-width: 1184px){
	header{

		padding-top: 80px;
	}
	header .headInner{
		max-width: 1024px;
		min-width: 1024px;
		padding: 0;
	}	
	header nav li{
		padding: 0 20px;
	}
}*/

/* ----------------- ▼ Interface ▼ ----------------- */

.telBnr.pc{
	width: 210px;
	height: 44px;
	padding: 18px 0 0 76px;
	background: url(/chiba/periehall/img/tel_pc.png) no-repeat;
	color: #fff;
	font-family: 'Noto Sans', 'Noto Sans Japanese', sans-serif;
	font-weight: 400;
	letter-spacing: 1px;
	position: fixed;
	top: 0;
	right: 0;
	z-index: 999;
}

/* ----------------- ▼ Subnav ▼ ----------------- */

#subnav{
	width: 100%;
	padding: 35px 0 75px;
	border-top: 1px solid #e3e3e3;
	text-align: center;
	bottom: 0;
	background: #fff;
}
#subnav li{
	padding: 0 20px;
	display: inline-block;
}

/* -------------- ▼ pagetop ▼ -------------- */

#pagetop{
	position: fixed;
	bottom:200px;
	right:45px;
	transition-property: all;
	transition-duration: 0.5s;
	transition-timing-function: ease;
	z-index: 999;
}
#pagetop:hover{
 transform: translate3d(0,-10px,0);
}

/* -------------- ▼ indexボタン ▼ -------------- */

.btnIndex{
	width: 100%;
	height: 40px;
	padding-top: 10px;
	background: #000;
	text-align: center;
	position: fixed;
	left: 0;
	bottom: 0;
	/*bottom: -40px;*/
	z-index: 997;
	overflow: hidden;
	display: none;
}
.btnIndex .btn{
	padding-bottom: 10px;
	display: block;
}

/* ----------------- ▼ Footer ▼ ----------------- */

#globalFooter{
	width: 100%;
	z-index: 997;
	background: rgba(0, 0, 0, 0) url("/common/img/pattern.gif") repeat scroll 0 0;
	text-align: left;
}
#globalFooter .f_info .list a{
	padding-bottom: 0;
}
#copyright_y{
	background: rgba(0, 0, 0, 0) url("/common/img/pattern.gif") repeat scroll 0 0;
	height:120px;
	border-top: 1px solid #000;
	color: #000;
}
#copyright_y .inner{
	width: 450px;
	margin:0 auto;
	padding:40px 0 0;
	box-sizing:border-box;
}
#copyright_y .inner .logo{
	float: left;
	line-height:1;
	padding-right:10px;
}
#copyright_y .inner .logo img{
	width: 100px;
}
#copyright_y .inner .copy{
	font-size:14px;
	text-align:left;
	line-height:1.2;
}

/*------------------------------------------------
     SP View
 ----------------------------------------------- */

@media screen and (max-width: 768px) {
	
	/* ----------------- ▼ Base ▼ ----------------- */
	
	body{
		-webkit-text-size-adjust: 100%;
		-webkit-tap-highlight-color:rgba(0,0,0,0);
	}
	body.fixed{
		overflow: hidden;
		/*position: fixed;*/
	}
	#container, header{
		font-size: 12px;
	}
	.sp {
		display: block;
	}
	.pc {
		display: none;
	}
	a:hover{
		opacity: 1;
	}
	img{
		width: 100%;
		height: auto;
	}
	
	/* ----------------- ▼ Contents ▼ ----------------- */
	
	#container.subpage{
		padding-top: 0;
		font-size: 12px;
	}
	.inner{
		width: 88%;
	}
	.subpage h2{
		margin: 11% auto 15%;
		font-size: 26px;
	}
	/*.subpage h2 span:after{
		bottom: -2px;
	}*/
	
	/* ----------------- ▼ Header ▼ ----------------- */
	
	header{
		padding-top: 6%;
		position: relative;
	}
	header .headInner{
		width: 88%;
		max-width: 768px;
		min-width: 280px;
		padding: 0 0 4%;
		border-bottom: 1px solid #c7c7c7;
	}
	header h1{
		width: 40%;
		padding-top: 2px;
		/*width: 113px;*/
	}
	header .spMenu{
		width: 21.5%;
		/*width: 62px;*/
		float: right;
	}
	header .telBnr{
		width: 42.2%;
		/*width: 26px;*/
		position: static;
		float: left;
	}
	header .menuBtn{
		width: 35.9%;
		/*width: 22px;*/
		float: right;
	}
	header nav{
		width: 80%;
		height: 100%;
		padding: 15% 10% 10%;
		background: rgba(0,0,0,.9);
		position: fixed;
		top:0;
		right: -100%;
		z-index: 999;
		overflow-y: scroll;
	}
	header nav li{
		margin-bottom: 14%;
		padding: 0;
		float: none;
		font-size: 15px;
	}
	header nav li.active:after{
		display: none;
	}
	header nav li.active span{
		display: inline-block;
		position: relative;
	}
	header nav li.active span:after{
		width: 100%;
		height: 1px;
		content:"";
		background: #fff;
		display: block;
		position: absolute;
		bottom: -5px;
	}
	header nav > ul > li:not(.active) a:hover:after{
		display: none;
	}
	header nav li:last-child {
    padding: 0;
}
	header nav a{
		color: #fff;
	}
	header nav li .child{
		width: 100%;
		padding: 13% 10% 0;
		display: block;
		position: static;
		border: none;
		background: none;
		letter-spacing: 0;
	}
	header nav li .child li{
		height: auto;
		margin-bottom: 14%;
		padding-bottom: 0;
		display: block;
	}
	header nav li .child li:nth-child(3){
		height: auto;
	}
	header nav li .child li a:hover:after{
		display: none;
	}
	header nav .close{
		width: 8.5%;
		position: absolute;
		top: 4%;
		right: 10%;
	}
	header .overlay{
		width: 100%;
		height: 100%;
		background: rgba(0,0,0,.6);
		position: fixed;
		top: 0;
		left: 0;
		z-index: 998;
		display: none;
	}
	
	/* -------------- ▼ pagetop ▼ -------------- */
	
	#pagetop{
		position: fixed;
		bottom:20px;
		right:10px;
	}
	
	/* -------------- ▼ indexボタン ▼ -------------- */

	.btnIndex{
		height: auto;
		position: relative;
		display: block;
	}
	
	/* ----------------- ▼ Footer ▼ ----------------- */
	#copyright_y{
		height: auto;
	}
	#copyright_y .inner{
		width: 100%;
		padding-top: 0;
	}
	#copyright_y .inner .logo{
		float: none;
	}
	#copyright_y .inner .copy{
		font-size:10px;
		text-align:center;
	}
	ul.sns_foot img{
		width: auto;
		max-height: 28px;
	}
}