/**
 *　リセット
 */
html,body{
	margin:0;
	padding:0;
	word-wrap: break-word;
	text-align:center;
	background:#fed;
}
h1{font-size:1.5 rem}
h2{font-size:1.17rem}
h3{font-size:1   rem}
h4{font-size:0.83rem}
h5{font-size:0.67rem}
h6{font-size:0.67rem}
/**
 *　ヘッダー
 */
header{
	height:12em;
	background-image:url('./img/header.jpg');
	background-size:cover;
	background-position: top center;
	background-repeat: no-repeat;
	text-align:center;
}
div#logo{
	margin:auto;
	width:90%;
	max-width:640px;
	height:10rem;
	background-image:url('./img/logo.png');
	background-size:contain;
	background-position: center center;
	background-repeat: no-repeat;
	filter: drop-shadow(0px 0px 9px #fc0a);
}
/**
 *　内容
 */
main{
	max-width:640px;
	text-align:left;
	margin:auto;
	background:#fff;
	margin-bottom:1em;
	overflow:hidden;
}
section{
	padding:1em;
}
h1{
	text-align:center;
	margin-bottom:0;
}
div.photo_area{
	width:100%;
	position:relative;
	padding-bottom:75%;
}
div.images{
	width:100%;
	height:100%;
	position:absolute;
}
div.images > img{
	background:#ccc;
	width:100%;
	height:100%;
	object-fit: contain;
	left:0;
	right:0;
	top:0;
	opacity:0;
	position:absolute;
	transition:1s;
}
div.images > img.show{
	opacity:1;
	position:static;
}
div#gallery > div.side_btn{
	position:absolute;
	top:0;
	bottom:0;
	width:25%;
	font-size:3em;
	color:#000;

	display: -webkit-flex;
	display: flex;
	-webkit-align-items: center;
	align-items: center;
	-webkit-justify-content: center;
	justify-content: center;
}
.line{
	transition: 1s;
	transition-delay: 0.5s;
	height:2px;
	width:0px;
	background-color:#fa8;
}
.fadein > .line{
	width:100%;
}
td:first-child{
	width:4.5rem;
}
div.gmap{
	width:0;
	height:0;
	transition:1s;
	overflow:hidden;
}
div.gmap.open{
	width:100%;
	height: 0;
	overflow: hidden;
	padding-bottom: 75%;
	position: relative;
}
iframe{
	background:#eee;
	max-width:100%;
	display:none;
}
.open > iframe{
	max-width:100%;
	display:block;
}

/**
 *　clearfix
 */
.cf:before,
.cf:after{
	content: "";
	display: table;
}
.cf:after{ clear: both; }

/**
 *　Often use style
 */
.l-arrow{
	display:inline-block;
	width:2rem;
	height:2rem;
	border-top: solid 2px;
	border-right: solid 2px;
	transform: rotate(225deg);
}
.r-arrow{
	display:inline-block;
	width:2rem;
	height:2rem;
	border-top: solid 2px;
	border-right: solid 2px;
	transform: rotate(45deg);
	float:right;
}
.fade{
	opacity : 0;
	visibility: hidden;
	transition: 0s;
}
.fade.up{
	transform: translateY(30px);
}
.fade.left{
	transform: translateX(50px);
}
.fade.fadein{
	opacity: 1;
	visibility: visible;
	transform: translate(0,0);
	transition: 1s;
}
.preload * {
    -webkit-transition: none !important;
    -moz-transition: none !important;
    -ms-transition: none !important;
    -o-transition: none !important;
    transition: none !important;
}
.center{
	text-align:center;
}