@charset "UTF-8";

/* --------------------------------
 * 全体
 * -------------------------------- */

@import url(https://fonts.googleapis.com/css?family=Droid+Serif);

html {
	font-size: 62.5%;
}

*, *:after, *:before { -webkit-box-sizing: border-box; box-sizing: border-box; }

body {
	font-family: "游ゴシック体", 游ゴシック体, 'Yu Gothic', YuGothic, 'ヒラギノ角ゴシック Pro', 'Hiragino Kaku Gothic Pro', メイリオ, Meiryo, Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
	background-color: #fff;
	color: #333;
	width: 100%;
}

img {
	display: block;
	max-width: 100%;
	height: auto;
}

.clearfix:after {
	content:" ";
	display:block;
	clear:both;
}

.brsp_footer_pc {
	display: none;
}

.hidden {
	display: block;
	font-size: 0rem;
	text-indent: 100%;
	white-space: nowrap;
	overflow: hidden;
}

/* --------------------------------
 * ヘッダー
 * -------------------------------- */

.headerwrap {
}

header {
	position: fixed;
	top: 15px;
	left: 15px;
	z-index: 2;
}

header h1 img {
	width: 150px;
}

.headerwrap::after {
	content: '';
	display: block;
	position: fixed;
	top: 0px;
	width: 100%;
	height: 70px;
	background-color: #fff;
	box-shadow: 0px 1px 2px rgba(0,0,0,0.3);
	z-index: 1;
}

/* --------------------------------
 * ナビ
 * -------------------------------- */

nav ul {
	list-style: none;
}

#modal-open {
	position: fixed;
	top: 27px;
	right: 15px;
	z-index: 2;
}
#modal-close {
	display: none;
	cursor: pointer;
	position: fixed;
	top: 27px;
	right: 19px;
	z-index: 5;
	img {
		width: 27px;
	}
}
#modal-open img {
	width: 35px;
}

#modal-content {
	font-family: "Lora", serif;
	font-optical-sizing: auto;
	font-weight: 400;
	font-size: 2rem;
	position: fixed;
	display: none;
	z-index: 4;
	line-height: 3;
}

#modal-content a {
	text-decoration: none;
	color: black;
}

@media screen and (orientation:landscape){
	#modal-content {
		font-size: 2rem;
		line-height: 1;
		margin: 0 50px;
	}

	.button-link {
		font-size: 3rem;
	}

	#modal-content li {
		margin: 0px 20px 30px;
		padding: 0px;
	}

	#modal-content .land {
		float: left;
		background-color: #FBFF36;
	}

}

#modal-overlay {
	display: none ;
	position: fixed ;
	top: 0 ;
	left: 0 ;
	width: 100% ;
	height: 120% ;
	background-color: rgba( 255,255,255, 0.92 ) ;
	z-index: 3;
}

/* --------------------------------
 * footer
 * -------------------------------- */

footer {
	position: relative;
	height: 319px;
	border-top: solid 1px #bbb;
}

footer .boxa {
	width: 100%;
	display: block;
	position: absolute;
	top: 164px;
	text-align: center;
}

footer .boxa p {
	font-size: 1.1rem;
	letter-spacing: 0.05rem;
	line-height: 1.6;
	margin-top: 10px;
}

footer .boxa img {
	width: 120px;
	margin: 0 auto;
}

footer .boxb {
	position: relative;
	top: 43px;
}

footer small {
	position: absolute;
	top: 282px;
	width: 100%;
	display: block;
	text-align: center;
	font-size: 1rem;
}

/* --------------------------------
 * footer icon
 * -------------------------------- */

.footerinner ul {
	text-align: center;
	font-size: 2.5rem;
	list-style: none;
	font-size: 0rem;
}

.footerinner ul li {
	display: inline-block;
	font-size: 2rem;
	padding-left: 10px;
}

.footerinner ul li a{
	height: 50px;
	width: 50px;
	border-radius: 25px;
	-moz-border-radius: 25px;
	-webkit-border-radius: 25px;
	display: table-cell;
	text-align: center;
	vertical-align: middle;
	border: solid 1px;
	transition: all .1s ease-in-out;
	-webkit-transition: all .1s ease-in-out;
}

.footerinner ul li a:hover {
	transition: all .3s ease;
	-webkit-transition: all .3s ease;
	opacity: 1;
}

.linkmail {
	color: #FF84B4;
}

.linkmail:hover {
	color: #FFF;
	background-color: #FF84B4;
}

.linktwitter {
	color: #008DC1;
}

.linktwitter:hover {
	color: #FFF;
	background-color: #008DC1;
}

.linkfacebook {
	color: #3B5998;
}

.linkfacebook:hover {
	color: #FFF;
	background-color: #3B5998;
}

.linkinstagram {
	color: #888;
}

.linkinstagram:hover {
	color: #FFF;
	background-color: #888;
}