@charset "UTF-8";
/* CSS Document */



/****************************************************************************************************
header
****************************************************************************************************/
body {
	background: #000;
}
#header.active {
	background: rgba(0,0,0,.95);
}
#logo,
#wakohre {
    filter: grayscale(100%) invert(100%) brightness(500%);
}
#hnavi .outline a {
	color: #FFF;
}
#gNavi > ul > li {
	border-left:1px solid rgba(255,255,255,0.25);
}
#gNavi > ul > li:nth-last-of-type(1) {
	border-right:1px solid rgba(255,255,255,0.25);
}
#gNavi > ul > li > a,
#gNavi > ul > li > span {
	color: #FFF;
}
#gNavi > ul > li.select > a {
	color:#BE9D7E;
}
#gNavi > ul > li > a span.small,
#gNavi > ul > li > span span.small {
	color: #FFF;
}



/****************************************************************************************************
contents
****************************************************************************************************/
#wrap {
	overflow: hidden;
	padding-top: 124px;
}



/****************************************************************************************************
main
****************************************************************************************************/
#main figure {
	position: relative;
}
#main figure img {
	width: 100%;
}
#main figure figcaption {
	position: absolute;
	margin-top: 0;
	bottom: 1em;
	right: 1em;
	color: #FFF;
	font-size: 0.866rem;
	font-weight: bold;
	text-shadow:
		0 0 8px rgba(0,0,0,1),
		0 0 8px rgba(0,0,0,1),
		0 0 8px rgba(0,0,0,1);
}



/****************************************************************************************************
point
****************************************************************************************************/
#point {
    background-image: linear-gradient(90deg, #520C0C 0%, #A21B20 50%, #520C0C 100%);
}



/****************************************************************************************************
information
****************************************************************************************************/
#information {
	padding: 80px 0 100px 0;
	color: #FFF;
}
#info1 div {
	font-size: 1.6rem;
	font-weight: bold;
	line-height: 1.6;
}
#info1 h2 {
	font-size: 3.733rem;
	line-height: 1.4;
}
#info1 h3 {
	margin-top: 10px;
	color: #BE9D7E;
	font-size: 4.266rem;
	line-height: 1.3;
}
#info1 h4 {
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: center;
	-webkit-justify-content: center;
	-ms-flex-pack: center;
	justify-content: center;
	-webkit-box-align: center;
	-webkit-align-items: center;
	-ms-flex-align: center;
	align-items: center;
	gap: .3em;
	color: #BE9D7E;
	font-size: 3.066rem;
	line-height: 1.4;
}
#info1 h4 .kei {
	padding: 0.2em 0.5em;
	border: 1px solid rgba(190,157,126,.5);
	font-size: 1.733rem;
}

#request-box {
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: center;
	-webkit-justify-content: center;
	-ms-flex-pack: center;
	justify-content: center;
	-webkit-box-align: center;
	-webkit-align-items: center;
	-ms-flex-align: center;
	align-items: center;
	gap: 10px;
	max-width: 1000px;
	margin: 60px auto 0 auto;
}
#request-box a {
	position: relative;
	display: block;
}
#request-box a::after {
	content: "";
	position: absolute;
	display: block;
	width: calc(100% - 8px);
	height: calc(100% - 8px);
	left: 4px;
	top: 4px;
	border: 1px solid rgba(0,0,0,.5);
}
#present {
	margin-top: 50px;
}
#campaign {
	margin-top: 19px;
}
#akashi-city {
	margin-top: 20px;
}
#movie-banner {
	margin-top: 100px;
}
#movie-banner ul {
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: center;
	-webkit-justify-content: center;
	-ms-flex-pack: center;
	justify-content: center;
	gap: 10px;
}



/****************************************************************************************************
contents
****************************************************************************************************/
#contents {
}



/****************************************************************************************************
index
****************************************************************************************************/
#index {
}
.index-block {
	border-top: 4px solid #00ADDF;
}
.index-block a {
	display: block;
	position: relative;
}
.index-block figure::before {
	position: absolute;
	display: block;
	content: "";
	width: 100%;
	height: 100%;
	background: url(../img/top/location-shadow.png);
	opacity: 1;
	mix-blend-mode: multiply;
	z-index: 0;
}
.index-block figure {
	position: relative;
}
.index-block figure img {
	object-fit: cover;
	width: 100%;
	height: 700px;
}
.index-block figure figcaption {
	position: absolute;
	right: 1em;
	bottom: 0.6em;
	color: #FFF;
	font-size: 0.866rem;
	font-weight: bold;
	line-height: 1.4;
	text-shadow:
		0px 0px 10px rgba(0,0,0,1),
		0px 0px 10px rgba(0,0,0,1);
}
.index-block .text-box {
	position: absolute;
	left: 0;
	top: 40px;
	min-width: 30vw;
}
.index-block .text-box .inner {
	position: relative;
	padding: 35px 35px 35px 35px;
	background: rgba(255,255,255,.95);
	text-align: left;
}
.index-block .text-box .inner::after {
	position: absolute;
	content: "";
	display: block;
	right: 0;
	top: 0;
	width: 200px;
	height: 100%;
	-webkit-transform: translate(100%, 0);
	transform: translate(100%, 0);
	background-image: linear-gradient(90deg, rgba(255, 255, 255, .95), rgba(255, 255, 255, 0));
}
.index-block .text-box h3 {
	position: relative;
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-webkit-align-items: center;
	-ms-flex-align: center;
	align-items: center;
	margin-bottom: 0.5em;
	padding-bottom: 0.4em;
	border-bottom: 1px solid rgba(0,173,223,.5);
	color: #00ADDF;
	font-size: 3.066rem;
	line-height: 1.0;
	z-index: 10;
}
.index-block .text-box h3::after {
	position: absolute;
	content: "";
	display: block;
	right: 0;
	bottom: -1px;
	width: 200px;
	height: 1px;
	-webkit-transform: translate(100%, 0);
	transform: translate(100%, 0);
	background-image: linear-gradient(90deg, rgba(0,173,223,.5), rgba(0,173,223,0));
}
.index-block .text-box h3 span {
	margin: 0 1em;
	font-size: 1.333rem;
}
.index-block .text-box p {
	font-size: 1.6rem;
	line-height: 1.6;
}
.index-block .text-box p.more {
	color: #00ADDF;
}




@media screen and (max-width: 767px),
screen and (max-width: 960px) and (orientation: landscape) {
	
	
	
	/****************************************************************************************************
	header
	****************************************************************************************************/
	
	
	
	/****************************************************************************************************
	contents
	****************************************************************************************************/
	#wrap {
		padding-top: 0;
	}
	
	
	
	/****************************************************************************************************
	main
	****************************************************************************************************/
	#main img {
		width: 100%;
	}
	#main figure figcaption {
		font-size: 0.533rem;
	}
	
	
	
	/****************************************************************************************************
	information
	****************************************************************************************************/
	#information {
		padding: 8vw 4vw 10vw 4vw;
	}
	#info1 div {
		font-size: 1.0rem;
	}
	#info1 h2 {
		margin-top: 1vw;
		font-size: 1.466rem;
	}
	#info1 h3 {
		margin-top: 3vw;
		font-size: 2rem;
	}
	#info1 h4 {
		display: -webkit-box;
		display: -webkit-flex;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-pack: center;
		-webkit-justify-content: center;
		-ms-flex-pack: center;
		justify-content: center;
		-webkit-box-align: center;
		-webkit-align-items: center;
		-ms-flex-align: center;
		align-items: center;
		gap: .3em;
		color: #BE9D7E;
		font-size: 1.6rem;
	}
	#info1 h4 .kei {
		font-size: 1.0rem;
	}
	#request-box {
		-webkit-box-lines: multiple;
		-webkit-flex-wrap: wrap;
		-ms-flex-wrap: wrap;
		flex-wrap: wrap;
		min-width: initial;
		min-width: auto;
		gap: 1vw;
		margin: 7vw 0 0 0;
	}
	#request-box a::after {
		width: calc(100% - 1vw);
		height: calc(100% - 1vw);
		left: 0.5vw;
		top: 0.5vw;
	}
	#present {
		margin-top: 4vw;
	}
	#campaign {
		margin-top: 1vw;
	}
	#akashi-city {
		margin-top: 2vw;
	}
	#movie-banner {
		margin-top: 4vw;
	}
	#movie-banner ul {
		gap: 2vw;
	}
	
	
	
	/****************************************************************************************************
	contents
	****************************************************************************************************/
	#contents {
	}
	
	
	
	/****************************************************************************************************
	index
	****************************************************************************************************/
	.index-block {
		border-top: 2px solid #00ADDF;
	}
	.index-block figure img {
		width: 100%;
		height: 50vw;
	}
	#design.index-block figure img {
		object-position: 90% 50%;
	}
	#plan.index-block figure img {
		object-position: 70% 50%;
	}
	.index-block figure figcaption {
		font-size: 0.533rem;
	}
	.index-block .text-box {
		position: static;
		top: auto;
		bottom: 6vw;
	}
	.index-block .text-box .inner {
		padding: 4.5vw 4.5vw 4.5vw 4.5vw;
	}
	.index-block .text-box .inner::after {
		width: 40vw;
	}
	.index-block .text-box h3 {
		-webkit-box-lines: multiple;
		-webkit-flex-wrap: wrap;
		-ms-flex-wrap: wrap;
		flex-wrap: wrap;
		gap: 0.2em 0.5em;
		font-size: 1.733rem;
	}
	.index-block .text-box h3::after {
		width: 40vw;
	}
	.index-block .text-box h3 span {
		margin: 0;
		font-size: 0.866rem;
	}
	.index-block .text-box p {
		font-size: 0.933rem;
	}
}

@media screen and (max-width: 960px) and (orientation: landscape) {
}