@charset "utf-8";


/*----------------------------------------------------
	                 header
------------------------------------------------------*/
/*body#index,body#indextest{padding-top:42px;}*/
.status_message{
	/*position:fixed;
	z-index:9999;
	width:100%;
	height:42px;
	top:0;
	right:0;
	left:0;*/
	margin:0 auto;
	padding:15px;
	text-align:center;
	background-color:#333;
	color:#fff;
	line-height:1.3em;
	font-size:14px;
	letter-spacing:0.16em;
}
.status_message .sp{
	display:none;
}
#mainvis{
	position:relative;
	background:url("../img/mainvis_background.png") no-repeat bottom center;
	background-size:100%;
	object-fit:cover;
	padding-bottom:213px;
}
#mainvis div > img{
	width:76.2vw;
}
#mainvis .main_copy{
	position:absolute;
	width:33.333vw;
	height:33.333vw;
	top:0;
	right:0;
	background-color:#2aa75c;
	color:#fff;
	/*padding:3.4vw 2vw 0 3.4vw;*/
	line-height:2.1;
	font-size:2.15vw;
	letter-spacing:1.333vw;
}
#mainvis .main_copy p{
	width:85%;
	position: absolute;
	top: 50%;
	left: 65%;
	-webkit-transform: translate(-65%, -50%);
	transform: translate(-65%, -50%);
}
#scroll_nav p{
	position:absolute;
    bottom: 40px;
    left: 12px;
	transform: rotate(-90deg);
    color: #2aa75c;
	font-size:12px;
	letter-spacing:5px;
}
#scroll_nav div{
    position: absolute;
   /* bottom:90px;*/
    left: 50px;
    width: 1px;
    height: 0;
    background: #2aa75c;
}
@media (max-width:1200px) {
	#mainvis .main_copy{
		width:400px;
		height:400px;
		font-size:24px;
		letter-spacing:18px;
	}
}
@media (max-width:1000px) {
	
}
@media (max-width:900px) {
	#mainvis{
		background:url("../img/mainvis_background_sp.png") no-repeat bottom left;
	}
}
@media (max-width:850px) {
	#mainvis .main_copy{
		width:400px;
		height:400px;
		font-size:24px;
		letter-spacing:18px;
	}
	#scroll_nav{
		display:none!important;
	}
}
@media (max-width:690px) {
	br.max690{
		display:none;
	}
	#mainvis{
		background:url("../img/mainvis_background_sp.png") no-repeat bottom left;
		background-size:130% auto;
		padding-bottom:32.3vw;
	}
	#mainvis .inner{
		width:100%;
		background:url("../img/mainvis_background_sp.png") no-repeat top right -40px;
		background-size:auto 50.11vw;
	}
	#mainvis .main_copy{
		position:relative;
		top:auto;
		left:auto;
		right:auto;
		bottom:auto;
		width:100%;
		margin:0;
		padding:20px;
		height:auto;
	}
	#mainvis .main_copy p{
		position:relative;
		width:initial;
		top:auto;
		left:auto;
		-webkit-transform: translate(0,0);
		transform: translate(0,0);

		font-size:18px;
		line-height:1.8;
		letter-spacing:10px;
	}
	
}
@media (max-width:550px) {
	/*body#index,body#indextest{padding-top:3.5em;}*/
	.status_message{
		/*height:3.5em;;*/
		padding:15px;
		line-height:1.3em;
		/*ext-align:left;*/
	}
	.status_message .sp{
		display:block;
	}
	#scroll_nav{
		display:none!important;
	}
}
/*----------------------------------------------------
	                 sections index
------------------------------------------------------*/
/* sections common */
#contents section{
	margin:200px 0;
	border-top:#d8d8d8 1px solid;
}
#contents section h2{
	margin:0;
	font-size:95px;
	font-weight:bold;
	line-height:1.0;
	letter-spacing:10px;
}
#contents section h3{
	margin:30px 0 60px;
	text-align:left;
	font-size:14px;
	font-weight:bold;
	letter-spacing:10px;
}
#contents section h3:after{
	content:"";
	display:block;
	width:32px;
	height:5px;
	background-color:#333;
	margin-top:10px;
}
#contents section div.txt{
	width:30vw;
	max-width:300px;
}
#contents section div.txt h6{
	margin:20px 0 5px;
}
#contents section div.txt p{
	line-height:2.0;
}
#contents section .flex{
	position:relative;
	min-height:200px;
}

#contents section .flex_left.cont{
	position:absolute;
	top:50px;
	left:calc(50% - 440px);
}
#contents section .flex_right.cont{
	position:absolute;
	top:50px;
	right:calc(50% - 440px);
}
#contents section .flex_right.photo{
	/*width:43.9vw;*/
	max-width:527px;
	margin-top:-9px;
	margin-left:auto;
	margin-right:calc((100% - 880px) / 2);
}
#contents section .flex_left.photo{
	/*width:43.9vw;*/
	max-width:527px;
	margin-top:-9px;
	margin-right:auto;
	margin-left:calc((100% - 880px) / 2);
}
#contents section .photo img{
	width:100%;
	object-fit:cover;
	box-shadow: 5px 15px 30px rgba(0,0,0,.2);
}
#contents section .flex.small_img{
	margin:60px 0;
}
#contents section .flex.small_img .flex_right.photo{
	max-width:480px;
	margin-top:0;
	margin-right: calc((100% - 880px) / 2 - 50px );
}

@media (max-width:1000px) {
	#contents section .flex_right.photo{
		width:100%;
		max-width:none;
		margin-right:0;
	}
	#contents section .flex_left.cont{
		width:430px;
		background:rgba(255,255,255,0.7);
		padding:30px 15px;
		top:0;
		left:0;
	}
	#contents section .flex_left.photo{
		width:100%;
		max-width:none;
		margin-left:0;
	}
	#contents section .flex_right.cont{
		width:430px;
		background:rgba(255,255,255,0.7);
		padding:15px;
		top:0;
		right:0;
	}
	#contents section div.txt {
		width:auto;
		max-width:none;
	}
	
	#contents section .flex.small_img .flex_left.cont{
		position:relative;
		width:100%;
	}
	#contents section .flex.small_img .flex_right.photo{
		max-width:480px;
		margin:0 auto;
	}
	#contents section .flex.small_img{
		margin:0;
	}
}

@media (max-width:550px) {
	#contents section{
		margin:100px 0;
	}
	#contents section .flex_left.cont,
	#contents section .flex_right.cont{
		position:relative;
		width:100%;
		background:none;
		padding-bottom:40px;
	}
	#contents section .flex.small_img{
		margin: 0!important;
	}
	#contents section h2 {
		font-size: 70px;
		font-weight: bold;
		line-height: 1.0;
		letter-spacing: 8px;
	}
	#contents section h3 {
		margin: 10px 0 20px;
		letter-spacing: 7px;
	}
}


/* mission */
#contents #mission .title{
	padding-top:20px;
}

/* outline */
#contents #outline .title{
	width:calc(8em + 80px);
	font-size:40px;
	margin-top:50px;
	margin-left:auto;
	margin-right:calc(50% - 440px);
}
#contents #outline iframe{
	width:100%;
	height:282px;
	max-width:480px;
}

.floor_name{
	width:64px;
	height:30px;
	margin-bottom:20px;
	background-color:#333;
	color:#fff;
	text-align:center;
	font-size:18px;
	line-height:30px;
}
#contents #outline h4{
	margin-bottom:30px;
	font-size:42px;
	font-weight:bold;
	line-height:1.0;
	letter-spacing:8px;
}
#contents #outline h4 .jp{
	font-size:24px;
	vertical-align:8px;
}
#contents #outline h5{
	margin-bottom:30px;
	font-size:18px;
	font-weight:bold;
	line-height:1.5;
	letter-spacing:2px;
}
.first_floor{
	padding-top:20px;
}

.second_floor{
	margin-top:100px;
}
#contents section .second_floor + .flex.small_img{
	margin:110px 0;
}

/* activity */
#contents #activity{
	margin-bottom:350px;
}

/* access */
#contents #access{
	margin-bottom:258px;
}
#contents #access .flex_right.cont{
	position:absolute;
	top:50px;
	right:calc(50% - 500px);
}
#contents #access .flex_left.photo{
	max-width:527px;
	margin-top:-5.5px;
	margin-left:calc((100% - 880px) / 2);
}
#contents #access .photo img{
	box-shadow:none;
	position:relative;
}

@media (max-width:1100px) {
	#contents #access .flex_right.cont{
		width:400px;
		right:5px;
	}
}

@media (max-width:1000px) {
	#contents #outline .title {
		margin-right:0;
	}
	#index #contents section#outline .photo img{
		box-shadow:none;
	}
	#contents section .second_floor + .flex.small_img {
		margin: 0 0 60px;
	}
	#contents #activity,
	#contents #access{
		margin:200px 0;
	}
	#contents #access .flex_right.cont{
		position:relative;
		width:100%;
		top:0;
		right:0;
		padding: 30px 15px 40px;
	}
	#contents #access .flex_left.photo{
		width:100%;
		margin:0 auto;
		text-align:center;
	}
}
@media (max-width:786px) {
	#contents section .second_floor + .flex.small_img {
		margin: 0!important;
	}
}
@media (max-width:550px) {
	#contents #outline .title {
		margin-left:15px;
		width:auto;
	}
	#contents #activity,
	#contents #access{
		margin:200px 0;
	}

	#contents #activity, #contents #access {
		margin: 100px 0;
	}
}


/*----------------------------------------------------
	                 English version
------------------------------------------------------*/
.en-US#index #mainvis .main_copy,
.en-US#indextest #mainvis .main_copy{
		font-size:2.4vw;
		letter-spacing:14px;
}
.en-US#index #contents h2,
.en-US#indextest #contents h2{
	margin-bottom:50px;
}
.en-US#index #contents section#outline .flex.small_img .flex_left.cont div.txt,
.en-US#indextest #contents section#outline .flex.small_img .flex_left.cont div.txt{
	max-width:400px;
}
.en-US#index #contents section#outline .flex.small_img,
.en-US#indextest #contents section#outline .flex.small_img{
	margin-top:180px;
}
.en-US#index #contents section#outline .flex.small_img:last-of-type,
.en-US#indextest #contents section#outline .flex.small_img:last-of-type{
	margin-top:320px;
}
@media (max-width:1100px) {
	.en-US#index #mainvis .main_copy,
	.en-US#indextest #mainvis .main_copy{
			font-size:26px;
	}	
	.en-US#index #contents #access .flex_left.photo,
	.en-US#indextest #contents #access .flex_left.photo{

	}
}
@media (max-width:1000px) {
	.en-US#index #contents section#outline .flex.small_img,
	.en-US#index #contents section#outline .second_floor + .flex.small_img,
	.en-US#indextest #contents section#outline .flex.small_img,
	.en-US#indextest #contents section#outline .second_floor + .flex.small_img{
			margin-top: 0px!important;
		}
	.en-US#index #contents #access .flex_left.photo,
	.en-US#indextest #contents #access .flex_left.photo{
		    margin:0 auto;
	}
	.en-US#index #contents #access .flex_left.photo,
	.en-US#indextest #contents #access .flex_left.photo{
			max-width:590px;
	}
}

@media (max-width:740px) {
	.en-US#index #contents section#outline .second_floor + .flex.small_img,
	.en-US#indextest #contents section#outline .second_floor + .flex.small_img{
			margin-top: calc(782px - 105vw)!important;
		}
}
@media (max-width:550px) {
	.en-US#index #contents section#outline .second_floor + .flex.small_img,
	.en-US#indextest #contents section#outline .second_floor + .flex.small_img{
			margin-top: 0px!important;
		}
}