@charset "UTF-8";

/*------------ TOP HEADER ------------*/
#top #header {
	/*position: relative;
	margin-top: calc(100vh - 60px);*/
	position: absolute;
	top: auto;
	bottom: 0;
}
#top #header.fixed {
	position: fixed;
	top: 0;
}
#top #header nav .header_logo,
#top #header .header_logo_sp{
	opacity: 0;	
	transition: all 0.3s ease-in-out;
}
/*#top #header nav .header_lang ul {
	top: -90px;
}*/
	.header_logo_sp {
		display: none;
	}
#top #header nav .header_logo.active,
#top #header .header_logo_sp.active {
	opacity: 1;
}
@media screen and (max-width: 1240px) {	
	#header nav {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
	}
	#top #header nav .header_lang ul {
     top: auto; 
	}
}
@media screen and (max-width: 767px) {	
	#top #header {
		position: fixed;
		bottom: auto;
		top: 0;
	}
	#top .sp_fixed {
		z-index: -1;
	}
}

/*------------ TOP MV ------------*/
.top_mv {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 0;
}
.top_slide {
	overflow: hidden;
	width: 100vw;
	height: 100vh;
	position: relative;
}
.top_slide ul{
	position:absolute;
	width:100%;
	height:100%;
	z-index:1;
	top:0;
	left:0;
}
.top_slide ul li{
	position:absolute;
	left:0;
	top:0;
	width:100%;
	height:100%;
    transition: transform 10s linear;
}
/*.top_slide ul li.active{
	-webkit-transform: scale(1.2);
	-moz-transform: scale(1.2);
	-o-transform: scale(1.2);
	-ms-transform: scale(1.2);
	transform: scale(1.2);
}*/
.top_slide ul li:nth-child(1){
	height:100%;
	background-image:url(../images/top/mv01.jpg);
	background-size: cover;
	background-position: top 30% center;
	z-index:1;
}
.top_slide ul li:nth-child(2){
	background-image:url(../images/top/mv02.jpg);
	background-size: cover;
	background-position: bottom center;
	opacity:0;
	z-index:2;
}
.top_slide ul li:nth-child(3){
	background-image:url(../images/top/mv03.jpg);
	background-size: cover;
	background-position: bottom center;
	opacity:0;
	z-index:3;
}
/*.top_slide ul li:nth-child(4){
	background-image:url(../images/top/main04.jpg);
	background-size: cover;
	background-position: 50% 50%;
	opacity:0;
	z-index:4;
}
.top_slide ul li:nth-child(5){
	background-image:url(../images/top/main05_r2.jpg);
	background-size: cover;
	background-position: 50% 50%;
	opacity:0;
	z-index:5;
}*/
.top_wrapper {
	/*margin-top: 100vh;*/
	position: relative;
	z-index: 100;
	text-align: center;
}
.top_logo {
	width: 100%;
	height: 100vh;
	position: relative;
}
.top_logo h1 {
	position:absolute;
	width: 340px;
	text-align:center;
	top:50%;
	left: 50%;
	transform: translate(-50%, -90%);
	z-index:2;
	filter: drop-shadow(0px 0px 26px rgba(217,210,198,0.5));
}
.top_logo h1 img {
	width: 100%;
	height: auto;
}
.top_logo .top_tagline {
	font-size: 22px;
	font-weight: bold;
	position: absolute;	
	left: 50%;
	transform: translateX(-50%);
	bottom: 33vh;
	z-index:2;
	font-family: "Yu Gothic", sans-serif;
	letter-spacing: 0.2em;
	white-space: nowrap;
	text-shadow:  0px 3px 14px rgba(0,0,0,1.00);
}
/*------------ TOP > top_container > NEWS ------------*/
.top_info {
	background: rgba(217,210,198,0.60);
	padding: 98px 30px;
    position: relative;
	text-align: left;
}
.live_btn {
	background-color: #D9D2C6;
	text-align: center;
	border: 1px solid #681B00;
	font-size: 22px;
	font-weight: bold;
	width: 588px;
	line-height: 84px;
	margin: 0 auto;
	position: relative;
}
.live_btn .live_btn--sun {
	position: absolute;
	z-index: 0;
	width: 188px;
	height: 170px;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}
.live_btn .live_btn--sun:before {
	content: " ";
	display: block;
	width: 100%;
	height: 100%;
	background: url("../images/top/top_sun.png") no-repeat center center;
	background-size: contain;
	transform-origin: center;
	transition: all 0.2s cubic-bezier(0.785, 0.135, 0.15, 0.86);
}
.live_btn a {
	display: block;
	position: relative;
	z-index: 1;
}
.live_btn a span {
	font-size: 80%;
	padding: 0 1.7em;
	vertical-align: top;
	transition: all 0.2s cubic-bezier(0.785, 0.135, 0.15, 0.86);
	display: inline-block;
}
.live_btn a span.sp {
	display: none;
}
.live_btn:hover a span {
	transform: translateX(10px);
}
.live_btn:hover a span.right {
	transform: translateX(-10px);
}
#news {
	width: 850px;
	margin: 90px auto 0;
	padding: 32px 50px 17px 44px;
	background: #D9D2C6;
}
#news h2 {
	font-size: 20px;
	line-height: 1;
	letter-spacing: 0.06em;
	float: left;
}
#news .news_container {
	width: 650px;
	position: relative;
	font-size: 14px;
	border-bottom: 1px solid #fff;
	margin-bottom: 15px;
	padding-bottom: 15px;
	margin-left: 8em;
}
#news .news_container .news_container--label {
	line-height: 20px;
	float: left;
}
#news .news_container .news_container--label .label {
	border: 1px solid rgba(0, 0, 0, 0.5);
	font-size: 13px;
	text-align: center;
	width: 72px;
	margin-left: 26px;
	display: inline-block;
	padding: 2px 0;
}
#news .news_container .news_container--label .label.label3 {
	color: rgba(223,0,3,1.00);
}
#news .news_container .news_container--title {
	margin-left: 192px;
}
#news .news_container .news_container--title a {
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	width: 100%;
}
/*------------ TOP > お知らせ > Modal →　news.css ------------*/
/*------------ CONTENT > BOX,WIDE 共通 ------------*/
.top_content {
	text-align: center;
	background-color: #D9D2C6;
}
.box_text h2, .wide_text h2 {
	font-size: 21px;
	font-weight: bold;
	line-height: 1.7;
	letter-spacing: 0.18em;
	margin-bottom: 46px;
}
.wide_text h2 {
	font-size: 30px;
}
.box_text a, .wide_text a {
	margin-top: 3em;
	font-size: 17px;
	line-height: 2.4;
	padding-right: 2.2em;
	padding-top: 0.5em;
	position: relative;
	background: url("../images/top/line_brown.gif") repeat-x bottom left;
	background-size: 6px auto;
	transition: all 0.3s ease-in-out;
	text-align: left;
}
.wide_text a {
	margin-top: 1.5em;
	background: url("../images/top/line_white.gif") repeat-x bottom left;
	background-size: 6px auto;
}
.box_text a:after, .wide_text a:after {
	content: " ";
	display: block;
	width: 19px;
	height: 100%;
	position: absolute;
	right: 0;
	top: 0;
	background-repeat: no-repeat;
	background-position: right top 1.4em;
	background-image: url("../images/top/arrow_brown.png"); 
	background-size: 100% auto;
	transition: all 0.3s ease-in-out;
}
.wide_text a:after {
	background-image: url("../images/top/arrow_white.png"); 
	background-size: 100% auto;
}
.box_text a:hover:after, .wide_text a:hover:after {
	transform: translateX(15px);
}
.box_text a:hover, .wide_text a:hover {
	letter-spacing: 0.1em;
}
.box_text a span {
	font-size: 16px;
}

/*------------ CONTENT > BOX ------------*/
.box_container {
	background-color: #D9D2C6;
	display: flex;
	height: 50vw;
}
.box_container.box02 {
	flex-direction: row-reverse;
}
.box_container > div {
	width: 50%;
}
.box_container .box_img ul {
	width: 100%;
	height: 100%;
	position: relative;
}
.box_container .box_img.slide01 ul .img01 {
	background-image: url("../images/top/top01_1.jpg");
}
.box_container .box_img.slide01 ul .img02 {
	background-image: url("../images/top/top01_2.jpg");
}
.box_container .box_img.slide02 ul .img01 {
	background-image: url("../images/top/top02_1.jpg");
}
.box_container .box_img.slide02 ul .img02 {
	background-image: url("../images/top/top02_2.jpg");
}
.box_container .box_img.slide03 ul .img01 {
	background-image: url("../images/top/top03_1.jpg");
}
.box_container .box_img.slide03 ul .img02 {
	background-image: url("../images/top/top03_2.jpg");
}
.box_container .box_img ul li {
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	height: 100%;
	position:absolute;
	left:0;
	top:0;
	width:100%;
    transition: transform 10s linear;
}
.box_container .box_text {
	align-self: center;
	line-height: 3;
	padding: 30px;
}
/*------------ CONTENT > LIVE ------------*/
.wide_container {
	background: url("../images/top/top_live.jpg") no-repeat bottom 10% center;
	background-size: cover;
	height: 50vw;
	display: flex;
	align-items: center;
	justify-content: center;
}
.wide_container .wide_text {
	backdrop-filter: blur(8px);
	padding: 40px 75px;
	position: absolute;
	line-height: 3;
	margin-top: -5%;
	background-color: rgba(0,0,0,0.2);
}

/*------------ レスポンシブ ------------*/
@media screen and (max-width: 1300px) and (min-width: 768px) {
	.top_wrapper {
		font-size: 85%;
	}
}
@media screen and (max-width: 940px) {
	#news {
		width: auto;
		display: block;
	}
	#news h2 {
		margin-bottom: 1em;
		float: none;
	}
	#news .news_container {
		width: auto;
		margin-left: 0;
	}
	/*------------ CONTENT > BOX,WIDE ------------*/
	.box_text h2, .wide_text h2 {
		font-size: 18px;
		margin-bottom: 26px;
	}
	.wide_text h2 {
		font-size: 21px;
	}
	.box_text a, .wide_text a {
		font-size: 14px;
		margin-top: 1.5em;
	}
	.box_text a span {
		font-size: 16px;
	}
	.box_container .box_text {
		line-height: 2;
	}
	.wide_container .wide_text {
		line-height: 2;
		margin-top: 0;
	}
}
@media screen and (max-width: 850px) {
	.top_logo .top_tagline {
		font-size: 19px;
		letter-spacing: 0.15em;
	}
}
/*------------ スマホ用  ------------*/
@media screen and (max-width: 767px) {
	/*------------ TOP HEADER ------------*/
	/*------------ TOP MV ------------*/
    .top_slide {
    }
	.top_slide ul li:nth-child(1){
		background-image:url("../images/top/mv01_sp.jpg?r2");
		background-size: cover;
		background-position: center center;
		z-index:1;
	}
	.top_slide ul li:nth-child(2){
		background-image:url("../images/top/mv02_sp.jpg?r3");
		background-size: cover;
		background-position: bottom center;
		z-index:2;
	}
	.top_slide ul li:nth-child(3){
		background-image:url("../images/top/mv03_sp.jpg?r2");
		background-size: cover;
		background-position: bottom center;
		z-index:3;
	}
	.top_logo h1 {
		width: 210px;
		transform: translate(-50%, -140%);
        filter: none;
	}
	.top_logo .top_tagline {
		font-size: 16px;
		letter-spacing: 0.1em;
        bottom: 45vh;
	}
	/*------------ TOP > top_container > NEWS ------------*/
	.top_info {
		padding: 84px 15px;
	}
	.live_btn {
		font-size: 20px;
		width: auto;
		max-width: 400px;
		line-height: 1.5em;
		padding: 15px 30px;
	}_btn .live_btn--sun {
	}
	.live_btn .live_btn--sun:before {
		background-image: url("../images/top/top_sun_sp.png");
	}
	.live_btn a span.sp {
		display: inline-block;
	}
	.live_btn a span.pc {
		display: none;
	}
	#news {
		width: auto;
		margin: 78px auto 0;
		padding: 24px 32px 12px;
	}
	#news .news_container {
		width: auto;
		padding-bottom: 4px;
	}
	#news .news_container .news_container--label {
		float: none;
		margin-bottom: 0.5em;
	}
	#news .news_container .news_container--label .label {
		margin-left: 10px;
	}
	#news .news_container .news_container--title {
		margin-left: 0;
	}
	/*------------ TOP > お知らせ > Modal →　news.css ------------*/
	/*------------ CONTENT > BOX,WIDE 共通 ------------*/
	.box_text h2, .wide_text h2 {
		font-size: 21px;
	}
	.wide_text h2 {
		font-size: 30px;
	}
	.box_text a, .wide_text a {
		margin-top: 2em;
	}
	.wide_text a {
		margin-top: 1.5em;
		background: url("../images/top/line_white.gif") repeat-x bottom left;
		background-size: 6px auto;
	}
	.box_text a:after, .wide_text a:after {
		content: " ";
		display: block;
		width: 19px;
		height: 100%;
		position: absolute;
		right: 0;
		top: 0;
		background-repeat: no-repeat;
		background-position: right top 1.4em;
		background-image: url("../images/top/arrow_brown.png"); 
		background-size: 100% auto;
		transition: all 0.3s ease-in-out;
	}
	.wide_text a:after {
		background-image: url("../images/top/arrow_white.png"); 
		background-size: 100% auto;
	}
	.box_text a:hover:after, .wide_text a:hover:after {
		transform: translateX(15px);
	}
	.box_text a span {
		font-size: 16px;
	}

	/*------------ CONTENT > BOX ------------*/
	.box_container {
		flex-direction: column;
		height: auto;
	}
	.box_container.box02 {
		flex-direction: column;
	}
	.box_container.box03 {
		flex-direction: column-reverse;
	}
	.box_container > div {
		width: auto;
	}
	.box_container .box_img ul {
		height: 100vw;
	}
	.box_container .box_text {
		line-height: 3;
		padding: 66px 20px;
	}
	/*------------ CONTENT > LIVE ------------*/
	.wide_container {
		height: auto;
		display: block;
		padding: 80px 10px;
	}
	.wide_container .wide_text {
		padding: 35px 10px;
		position: relative;
		line-height: 3;
		max-width: 400px;
		margin: 0 auto;
		backdrop-filter: blur(5px);
	}
}