@charset "UTF-8";

:root{
  --BaseFontColor:#323232;
  --BaseColor:#fff3c0;
  --LinkColor:#3d85c6;
  --Esinout:ease-in-out;
  --Baseeasing:cubic-bezier(0.2, 0.5, 0.4, 1);
  --OrangeColor:#f19072;
  --OrangeColorDark:#ffb69f;
}

/*-- コンテナ
-------------------------------------------------------------*/
html{
	line-height: 1.7;
	font-family: 'Meiryo', 'Hiragino Kaku Gothic Pro', 'Gothic', 'Mincho', 'MS Gothic', 'MS PGothic', 'Hiragino Mincho Pro', 'MS Mincho', 'MS PMincho', 'Comic Sans MS', 'Courier New', monospace, sans-serif;
	font-size:18px;
	overflow-x: hidden;
}
body{
	background:#fff;
	overflow-x: hidden;
	width: 100%;
}
	
footer{
	position: fixed;
	left: 0;
	bottom: 0;
	width: 100%;
	height:50px;
}
.fs-14{
	font-size: 14px;
}
h1{
	position: fixed;
	top:100px;
	left:50%;
	transform:translateX(-50%);
	z-index:1000;
}
.main-theme-section{
	width: 100%;
	/* max-width: 1320px; */
	height: calc(100vh - 50px);
	margin: 0 auto;
}
.row{
	height: 100%;
}
.col-md-6{
	padding: 0;
	overflow: hidden;
	position: relative;
}
.col-md-6 > a > img{
	position: absolute;
	top: 0;
	left:50%;
	transform:translateX(-50%);
	height: 100%;
	transition: all 0.3s ease;
}
.col-md-6 > a:not(.comming):hover > img{
	transform:translateX(-50%) scale(1.05);
	transform-origin: center;
}
.comming{
	cursor:default;
}
h2{
	position: absolute;
	top: 50%;
	left: 50%;
	transform:translate(-50%, -50%);
	z-index: 100;
}
p{
	position: absolute;
	bottom: 10%;
	left: 50%;
	transform:translate(-50%);
	z-index: 100;
	text-align: center;
	padding: 1em 3em;
	background: rgba(255, 255, 255, 0.8);
	color: #323232;
}
@media only screen and (max-width:750px){
	h1{
		position: absolute;
		top:25px;
	}
	.main-theme-section{
		margin-top:145px;
		height:auto;
	}
	.col-md-6{
		height: 450px;
	}
	h2{
		width: 70%;
		top: 42px;
    transform: translate(-50%, 0);
	}
	h2 img{
		max-width: 100%;
	}
	p{
		font-size: 14px;
		bottom: 0;
		width:90%;
	}
	footer{
		position: relative;
		height: auto;
	}
	footer p{
		position: relative;
		height: auto;
	}
}