@charset "utf-8";
@import url('https://fonts.googleapis.com/css?family=Cormorant');


/*===============================================
  デフォルト
===============================================*/

#global-nav {
	display:none;
}

#header .navbtn {
	display:none;
}

.pcv {
}

.spv {
	display:none;
}

br.sp {
	display:none;
}

/* iOSでのデフォルトスタイルをリセット */
input[type="submit"],
input[type="button"],
input[type="reset"] {
	border-radius: 0;
	-webkit-box-sizing: content-box;
	-webkit-appearance: button;
	appearance: button;
	border: none;
	box-sizing: border-box;
	cursor: pointer;
}
input[type="submit"]::-webkit-search-decoration,
input[type="button"]::-webkit-search-decoration,
input[type="reset"]::-webkit-search-decoration {
	display: none;
}
input[type="submit"]::focus,
input[type="button"]::focus,
input[type="reset"]::focus {
	outline-offset: -2px;
}




/*===============================================
  画面の横幅が1024px以下に適用
===============================================*/
@media screen and (max-width: 1024px){
	
	img {
		max-width:100%;
	}
	
	#wrap {
		padding:60px 0 0;
	}
	
	#header {
		height:auto;
	}
	
	#header .header {
		padding:10px 3%;
	}
	
	#header .header h1 {
		margin:0;
	}

	#header .header h1 img {
		max-height:40px;
	}
	
	#header .header ul.hdnav {
		display:none;
	}
	
	#header .navbtn {
		display:block;
		position:absolute;
		top:20px;
		right:3%;
		width:30px;
		cursor: pointer;
	}
	
	#header .navbtn span {
		display: block;
		position: absolute;
		height: 3px;
		width: 100%;
		background: #000;
		left: 0;
		-webkit-transition: .35s ease-in-out;
		-moz-transition: .35s ease-in-out;
		transition: .35s ease-in-out;
	}
	
	#header .navbtn span:nth-child(1) {
		top: 0;
	}
	
	#header .navbtn span:nth-child(2) {
		top: 10px;
	}
	
	#header .navbtn span:nth-child(3) {
		top: 20px;
	}
	
	/* global-nav */
	
	#global-nav.open {
		display:block;
	}
	
	#global-nav ul {
		line-height:1.0;
	}
	
	#global-nav ul li {
		border-bottom:1px solid #FFF;
	}
	
	#global-nav ul li:last-child {
		border-bottom:none;
	}
	
	#global-nav ul li span a {
		display:block;
		color: #fff;
		text-align:left;
		padding:15px 5%;
		text-decoration:none;
		font-size:1.5em;
		background: url(../image/common/glnav_icon.png) 95% center no-repeat rgba(0,0,0,0.8);
		background-size:auto 20%;
		font-family: 'Cormorant', serif;
		font-weight:600;
	}
	
	#global-nav ul li dl dt {
		display:block;
		color: #fff;
		text-align:left;
		padding:15px 5%;
		text-decoration:none;
		font-size:1.5em;
		background: url(../image/common/glnav_plus.png) 95% center no-repeat rgba(0,0,0,0.8);
		background-size:auto 50%;
		cursor:pointer;
		font-family: 'Cormorant', serif;
		font-weight:600;
	}
	
	#global-nav ul li dl dt.open {
		background: url(../image/common/glnav_minus.png) 95% center no-repeat rgba(0,0,0,0.8);
		background-size:20px auto;
	}
	
	
	#global-nav ul li dl dd {
		color:#FFF;
		display:none;
		padding:0 7% 5px;
		border-top:1px solid #fff;
		background:rgba(0,0,0,0.8);
	}
	
	#global-nav ul li dl dd ul li {
		background:none;
		border-bottom:none;
	}
	
	#global-nav ul li dl dd ul li a {
		display:block;
		font-size:1.4em;
		padding:3% 0 3% 20px;
		color:#FFF;
		position:relative;
	}
	
	#global-nav ul li dl dd ul li a:before {
		position:absolute;
		top:50%;
		left:0;
		width: 5px;
  	height: 5px;
  	border-top: solid 1px #fff;
  	border-right: solid 1px #fff;
  	-webkit-transform: rotate(45deg) translateY(-50%);
  	transform: rotate(45deg) translateY(-50%);
		content:'';
	}
	
	#global-nav ul li a:hover {
		text-decoration:none;
	}
	
	/* 切り替えアニメーション */
	#header .navbtn.move span:nth-child(1) {
		top: 12px;
		-webkit-transform: rotate(315deg);
		-moz-transform: rotate(315deg);
		transform: rotate(315deg);
	}
	#header .navbtn.move span:nth-child(2) {
		width: 0;
		left: 50%;
	}
	#header .navbtn.move span:nth-child(3) {
		top: 12px;
		-webkit-transform: rotate(-315deg);
		-moz-transform: rotate(-315deg);
		transform: rotate(-315deg);
	}
	
	#glnav {
		display:none;
	}
	
	
	#container {
		padding:60px 0;
		font-size:1.4em;
		line-height:1.8;
	}
	
	/* maintitle */


	#maintitle:before {
		width:94%;
	}

	#maintitle:after {
		width:40%;
	}

	
	/* footer */


	#footer .footer {
		width:94%;
		text-align:center;
	}

	#footer .footer .corp {
		float:none;
		display:inline-block;
		text-align:left;
	}


	#footer .footer .ftnav {
		display:none;
	}



}

/*===============================================
  画面の横幅が768px以下に適用
===============================================*/
@media screen and (max-width: 768px){
	
	/* maintitle */


	#maintitle .titlebox h2 {
		font-size:2.4em;
	}
	
	#container h3 {
		font-size:2em;
		padding:0 0 20px;
		position:relative;
		margin:0 auto 40px;
	}

	#container h3:before {
		width:80%;
	}

	#container h3:after {
		width:50%;
	}
	

}


/*===============================================
  画面の横幅が640px以下に適用
===============================================*/
@media screen and (max-width: 640px){
	
	.pcv {
		display:none;
	}

	.spv {
		display:block;
	}
	
	br.sp {
		display:block;
	}
	
	.mb20 {
		margin-bottom:10px !important;
	}

	.mb30 {
		margin-bottom:15px !important;
	}
	
	.mb40 {
		margin-bottom:20px !important;
	}
	
	.mb50 {
		margin-bottom:25px !important;
	}
	
	.mb100 {
		margin-bottom:50px !important;
	}
	
	#maintitle {
		position:relative;
		padding:0 0 40px;
	}

	#maintitle .titlebox h2 {
		left:0;
		transform:translate(0,-50%);
		font-size:2.0em;
		width:100%;
		text-align:center;
	}

	#maintitle .titlebox:before {
		height:10px;
	}

	#maintitle .titlebox:after {
		height:20px;
		bottom:-20px;
	}
	
	#header .logo img {
		height:32px;
	}
	
	#header .navbtn {
		top:15px;
	}


	
}


/* globalnav 高さ設定 */
@media screen and (max-width: 1024px) {
	#global-nav {
		height:500px;
		overflow-y:auto;
	}
}
@media screen and (max-width: 414px) {
	#global-nav {
		height:400px;
		overflow-y:auto;
	}
	
	
	
}
@media screen and (max-width: 320px) {
	#global-nav {
		height:350px;
		overflow-y:auto;
	}
	
	
	
}