@charset "utf-8";

/* CSS Document */
#shinsen .textbox p{
	font-family:Ryumin Medium KL;
}

#firstview video{
	position: absolute;
	top: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: -1;
}
#firstview .fvbox{
	position: absolute;
	width: 310px;
	top: 22%;
	left: calc(50% - 155px);
}
#firstview .fvbox h1{
	display: block;
	margin-bottom: 77px;
}

#shinsen .titlearea{
	padding: 80px 0;
}
#enjoy .titlearea,
#market .titlearea{
	padding: 80px 0 0;
}
#shinsen .titlearea h2,
#enjoy .titlearea h2,
#market .titlearea h2{
	display: block;
	width: 260px;
	margin: 0 auto;
	margin-bottom: 20px;
}
#shinsen .titlearea p,
#enjoy .titlearea p,
#market .titlearea p{
	font-size: 1.8em;
	text-align: center;
	color: #002b68;
}
#shinsen .contents{
	background: url(../images/gara_sasa.png);
}
#mikawawan{
	width: 100%;
	display: flex;
	flex-wrap: wrap;
}
#shinkaigyo{
	width: 100%;
	display: flex;
	flex-wrap: wrap;
}
#mikawawan .imagebox{
	width: 45%;
}
#mikawawan .textbox{
	width: 55%;
}
#mikawawan .textbox h3{
	padding-top:1.5em;
	text-indent:-1.5em;
}
#mikawawan .textbox p{
	columns: 2;
	column-gap: 2em;
}
#shinkaigyo .imagebox{
	width: 50%;
}
#shinkaigyo .textbox{
	width: 50%;
}
#shinkaigyo .textbox p{
	height: 25vw
}
#shinsen .textbox{
	-ms-writing-mode: tb-rl;
	writing-mode: vertical-rl;
	color: #fff;
	display: flex;
	flex-direction: column;
	justify-content: center;
}
#shinsen .textbox p{
	font-size: 1.3em;
	line-height: 2em;
}

#enjoy .contents{
	padding: 40px 0 0;
}
#enjoy ul{
	width: calc(100% - 40px);
	max-width: 842px;
	margin: 0 auto 80px;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
#enjoy ul li{
	width: calc(100% / 3 - 30px);
}
#enjoy p{
	font-size: 1.4em;
	color: #002b68;
	text-align: center;
	margin-top: 20px;
}
#enjoy ul li a{
	display: block;
}
#enjoy ul li a:hover{
	transform: translateY(-10px);
	opacity: .8;
}
#depth{
	width: 100%;
	height: 600px;
	overflow-y: scroll;
}

#market .contents{
	padding: 40px 0 80px;
}
#market .contents .dscrptn{
	width: calc(100% - 40px);
	max-width: 540px;
	margin: 0 auto 40px;
	font-size: 1.4em;
	color: #002b68;
}
#market .movie{
	width: calc(100% - 40px);
	max-width: 738px;
	margin: 0 auto 80px;
}
.moviebox{
	width: 100%;
  position: relative;
  padding-top: 56.25%;
}
.moviebox iframe{
  position: absolute;
  top: 0;
  right: 0;
	width: 100%;
  height: 100%;
}
#market ul{
	width: calc(100% - 80px);
	max-width: 738px;
	margin: 0 auto 80px;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
#market ul li{
	width: calc(100% / 3 - 14px);
}
#market ul li p{
	font-size: 1.6em;
	margin-top: 1em;
	text-align: center;
	color: #002b68;
}
#market ul li p span{
	display: block;
	font-size: 0.75em;
	line-height: 1.3em;
	padding-top: 0.5em;
}
#market .mapbox{
	width: 100%;
	max-width: 738px;
	margin: 0 auto;
}
#market .mapbox iframe{
	width: 100%;
	height: 420px;
	vertical-align: bottom;
}


@media screen and (max-width: 567px){

#firstview .fvbox{
	position: absolute;
	width: 60%;
	top: 15%;
	left: 20%;
}
	
#shinsen .contents{
	padding: 20px;
	box-sizing: border-box;
}
#shinsen .titlearea p{
	font-size: 1.4em;
}
#mikawawan .imagebox,
#mikawawan .textbox,
#shinkaigyo .imagebox,
#shinkaigyo .textbox{
	width: 100%;
}
#mikawawan .textbox{
	padding: 40px 0 60px;
	height: 40em;
}
#shinkaigyo .textbox{
	padding: 40px 0;
	height: 19em;
}
#shinsen .textbox h3{
	font-size: 1.7em;
	margin-left: 1em;
}
#shinsen .textbox p{
	font-size: 1em;
}
#shinkaigyo .textbox p{
	height: 48vw;
	height: 100%;
}
	
#enjoy .titlearea,
#market .titlearea{
	padding: 80px 0 20px;
}
#enjoy .contents{
	padding: 0;
}
#enjoy ul{
	margin: 0 auto 40px;
}
#enjoy ul li{
	width: 100%;
	margin-bottom: 30px;
}
#enjoy p{
	display: none;
}
#depth{
	height: 400px;
}
	
#market .contents{
	padding: 20px 0 0;
}
#market .contents .dscrptn{
	font-size: 1.15em;
}
#market .movie{
	margin: 0 auto 40px;
}
#market ul{
	margin: 0 auto 20px;
}
#market ul li{
	width: 100%;
	margin-bottom: 30px;
}
#market .mapbox iframe{
	height: 300px;
}
	
#market .mapbox iframe{
	height: 500px;
}
	
}

@media screen and (min-width: 568px) and (max-width: 1024px){

#shinsen .textbox h3{
	font-size: 2.5em;
	margin-left: 1em;
}
#mikawawan .imagebox{
	width: 35%;
}
#mikawawan .textbox{
	width: 65%;
}
#shinkaigyo .imagebox{
	width: 40%;
}
#shinkaigyo .textbox{
	width: 60%;
}
#shinkaigyo{
	flex-direction: row-reverse;
}
#mikawawan .textbox{
	padding: 40px 0;
	height: 40em;
}
#shinkaigyo .textbox{
	padding: 10px 0;
}
#shinsen .textbox p{
	font-size: 1.2em;
}
#shinkaigyo .textbox p{
	height: 30vw;
}

}

@media screen and (min-width: 1025px){

#shinsen .textbox h3{
	font-size: 4em;
	margin-left: 1em;
}
#shinkaigyo{
	flex-direction: row-reverse;
}
#mikawawan .textbox{
	padding-top: 80px;
	height: 51em;
}
#shinkaigyo .textbox{
	padding-top: 80px;
}
	
}