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

#contents{
	padding-bottom: 0px;
}


/* main */ 

#contents main,
#contents main #alphablack{
	min-height: 600px;
}

#contents main #mainphoto div{
	position: absolute;
	top:0px;
	left: 0px;
	width: 100%;
	height: 100%;
	min-height: 500px;
	background-size: cover;
	background-position: center top;
	z-index: 1;
}

#contents.load main #mainphoto ul{
	position: absolute;
	top:0px;
	left: 0px;
	width: 100%;
	height: 100%;
	min-height: 500px;
	z-index: 1;
	
	display: -webkit-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	-ms-flex-wrap: wrap;
	-webkit-flex-wrap: wrap;
	flex-wrap: wrap;
}

#contents main #mainphoto ul,
#contents.check main #mainphoto ul
#contents main #mainphoto div,
#contents.check main #mainphoto div{
	transform: scale(1.2,1.2);
	-webkit-transform:scale(1.2,1.2);
	-moz-transform:scale(1.2,1.2);
	-ms-transform:scale(1.2,1.2);
	-o-transform:scale(1.2,1.2);
	
}

#contents.load main #mainphoto ul,
#contents.load main #mainphoto div{
	transform: scale(1.2,1.2);
	-webkit-transform:scale(1.2,1.2);
	-moz-transform:scale(1.2,1.2);
	-ms-transform:scale(1.2,1.2);
	-o-transform:scale(1.2,1.2);
	
	-webkit-animation: shrink 1.2s forwards cubic-bezier(.07,.68,.41,1) .8s;
	animation: shrink 1.2s forwards cubic-bezier(.07,.68,.41,1) .8s;
}

body.culture_1 #contents main #mainphoto div{
	background-image: url(../img/main_1.jpg);
}

body.culture_2 #contents main #mainphoto ul li{
	background-size: cover;
	background-position: center top;
	height: 100%;
	width: 50%;
}

body.culture_2 #contents main #mainphoto ul li:nth-child(1){
	background-image: url(../img/main_2_l.jpg);
}

body.culture_2 #contents main #mainphoto ul li:nth-child(2){
	background-image: url(../img/main_2_r.jpg);
}


#contents main article{
	color: #FFF;
	width: 90%;
	max-width: 1200px;
}

body.culture_1 #contents main article{
	font-size: 16px;
	position: absolute;
	top: 60%;
	left: 50%;
	line-height: 1.6;
	font-weight: 600;
	z-index: 100;
	
	-webkit-transform: translate(-50%,-50%);
	-ms-transform: translate(-50%,-50%);
	transform: translate(-50%,-50%);
}

body.culture_2 #contents main article{
	font-size: 16px;
	position: absolute;
	top: 60%;
	left: 50%;
	line-height: 1.6;
	font-weight: 600;
	z-index: 100;
	text-align: center;
	-webkit-transform: translate(-50%,-50%);
	-ms-transform: translate(-50%,-50%);
	transform: translate(-50%,-50%);
}


#contents main .categorytitle {
	padding-bottom: 5%;
}

#contents main .categorytitle span{
	padding-top: .3em;
}

#contents main #maincopy span{
	overflow: hidden;
	display: inline-block;
	width: 0%;
}

#contents main #maincopy span > i{
	background-color: #FFF;
	color: #000;
	font-weight: 700;
	font-size: 55px;
	padding: 5px 15px;
	line-height: 2;
	white-space: nowrap;
}

#contents main #maincopy span > i aside,
#contents main #maincopy span > i aside > i{
	display: inline-block;
}


#contents.load main #maincopy span:nth-of-type(1){
	width: 0%;
	-webkit-animation: width_100 1.5s forwards cubic-bezier(.86,0,.07,1) 1s;
	animation: width_100 1.5s forwards cubic-bezier(.86,0,.07,1) 1s;
}

#contents.load main #maincopy span:nth-of-type(2){
	width: 0%;
	-webkit-animation: width_100 1.5s forwards cubic-bezier(.86,0,.07,1) 1.4s;
	animation: width_100 1.5s forwards cubic-bezier(.86,0,.07,1) 1.4s;
}




/* main */ 

/* menmbarbox */ 

#menmbarbox{
	position: relative;
	padding: 95px 0px 110px;
}

#menmbarbox::before,
#menmbarbox.inview_anime_slide::before{
	content: "";
	display: block;
	position: absolute;
	z-index: 5;
	width: 100%;
	height: 100%;
	background-color: #FFF;
	bottom: 0px;
}

#contents.load #menmbarbox.inview_anime_slide_on::before{
	height: 100%;
	-webkit-animation: height_0 1s forwards cubic-bezier(.86,0,.07,1) .2s;
	animation: height_0 1s forwards cubic-bezier(.86,0,.07,1) .2s;
}

#menmbarbox ul{
	position: relative;
	width: 100%;
	max-width: 900px;
	display: -webkit-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	-ms-flex-wrap: wrap;
	-webkit-flex-wrap: wrap;
	flex-wrap: wrap;
	margin: 0 auto;
}

#menmbarbox ul li{
	width: 40%;
	margin-right: 20%;
	font-weight: 500;
	padding: 0px 20px;
	color: #FFF;
	text-align: center;
}

#menmbarbox li:nth-child(2){
	margin-right: 0;
}

#menmbarbox ul li figure{
	width: 140px;
	margin: 0 auto;
}

#menmbarbox ul li h2{
	font-size: 20px;
	line-height: 0;
	font-weight: 700;
	padding-top: 25px;
}

#menmbarbox ul li i{
	font-size: 12px;
	font-weight: 600;
	line-height: 1;
	letter-spacing: 2px;
}

#menmbarbox ul li div{
	line-height: 1.6;
	padding: 10px 0px 25px;
}

#menmbarbox ul li p{
	line-height: 1.8;
	font-size: 13px;
	text-align:justify;
	text-justify:distribute;
}

#menmbarbox ul::before,
#menmbarbox ul::after{
	content: "";
	width: 25%;
	height: 1px;
	background-color: #FFF;
	display: block;
	position: absolute;
	
	top: 50%;
	left: 50%;
}

#menmbarbox ul::before{
	-webkit-transform: translate(-50%,-50%) rotate(-45deg);
	transform: translate(-50%,-50%) rotate(-45deg);
}

#menmbarbox ul::after{
	-webkit-transform: translate(-50%,-50%) rotate(45deg);
	transform: translate(-50%,-50%) rotate(45deg);
}


/* menmbarbox */ 


/* talk_box */ 
.talk_box{
	position: relative;
	margin: 0 auto;
	width: 100%;
	max-width: 1800px;
}


.talk_area_1{
	padding-top: 180px;
}

.talk_area_2 {
	background-color: #0b2438;
}


.talk_box article div aside{
	font-size: 34px;
	font-weight: 500;
	letter-spacing: 2px;
}

.talk_box article div h1{
	font-size: 40px;
	font-weight: 700;
	line-height: 1.4;
	padding: 15px 0px 60px;
}

.talk_box article dl dt {
    width: 50px;
    float: left;
    font-weight: 500;
    position: relative;
	line-height: 2;
}

.talk_box article dl dt::before {
    content: "";
    width: 1px;
    height: 1.2em;
    display: block;
    background-color: #666;
    position: absolute;
    right: 0px;
    top: 7px;
}

.talk_box article dl dd {
    padding-left: 70px;
    padding-bottom: 50px;
    text-align: justify;
    text-justify: distribute;
	line-height: 2;
}




#talk_column_1 > div{
	position: absolute;
	width: 41.538462%;
	max-width: 750px;
}

#talk_column_1 > div figure{
	position: relative;
	width: 100%;
	padding-top: 115%;
	overflow: hidden;
}

#talk_column_1 > div figure img{
	position: absolute;
	top:0px;
}

#talk_column_1 article div{
	padding-left: 45%;
	padding-bottom: 130px;
}


.talk_area_2 > div figure{
	position: relative;
	width: 100%;
	padding-top: 38%;
	overflow: hidden;
}

.talk_area_2 > div figure img{
	position: absolute;
	top: 0px;
}

.talk_area_2 article{
	color: #FFF;
	font-weight: 500;
	padding: 100px 0px;
}

#talk_column_3 > div{
	position: absolute;
	width: 41.538462%;
	max-width: 750px;
	right: 0;
}

#talk_column_3 > div figure{
	position: relative;
	width: 100%;
	padding-top: 115%;
	overflow: hidden;
}

#talk_column_3 > div figure img{
	position: absolute;
	top: 0px;
}

#talk_column_3 article div{
	width: 55%;
	padding-bottom: 130px;
}

#talk_column_4 article div{
	padding-bottom: 130px;
}


/* talk_box */ 

/* last photo */ 

#contentslastphoto{
	position: relative;
	width: 80%;
	max-width: 1440px;
	margin: -100px auto 0px;;
	z-index: 100;
	text-align: center;
}

#contents #contentslastphoto figure,
#contents #contentslastphoto.inview_anime_photo figure{
	transition: all .8s .8s ease;
	transform: scale(1.1,1.1);
	-webkit-transform:scale(1.1,1.1);
	-moz-transform:scale(1.1,1.1);
	-ms-transform:scale(1.1,1.1);
	-o-transform:scale(1.1,1.1);
	opacity: 0;
}


#contents.load #contentslastphoto.inview_anime_photo_on figure{
	transform: scale(1,1);
	-webkit-transform:scale(1,1);
	-moz-transform:scale(1,1);
	-ms-transform:scale(1,1);
	-o-transform:scale(1,1);
	opacity: 1;
}

/* last photo */ 




/* FooterList */


#contentsfooter #cultureFooter{
	width: 90%;
	max-width: 970px;
	margin: 0 auto;
	display: -webkit-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	-ms-flex-wrap: wrap;
	-webkit-flex-wrap: wrap;
	flex-wrap: wrap;
	align-items: center;
  	justify-content: center;
}

#contentsfooter #cultureFooter li{
	width: 30%;
	margin-right: 5%;
	overflow: hidden;
}

#contentsfooter #cultureFooter li:nth-child(2n){
	margin-right: 0;
}

#contentsfooter #cultureFooter li p{
	padding: 16px 0px 0px;
	text-align: center;
	font-weight: 500;
	line-height: 1.6;
}

#contentsfooter #cultureFooter li:hover p{
	color: #00559a;
}



#contentsfooter #cultureFooter li figure{
	position: relative;
	overflow: hidden;
}

#contentsfooter #cultureFooter li figure img{
	transition: all 500ms 0s ease;
}

#contentsfooter #cultureFooter li:hover figure img{
	transform: scale(1.1,1.1);
}

#contentsfooter #cultureFooter li figure::before{
	transition: all 500ms 0s ease;
	content: "";
	display: block;
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	border: transparent solid 3px;
	z-index: 5;
}

#contentsfooter #cultureFooter li:hover figure::before{
	border: #00559a solid 3px;
}


/* FooterList */

@media screen and (max-width: 1250px) {
	
	/* last photo */ 

	#contentslastphoto{
		position: relative;
		width: 90%;
		max-width: 1440px;
		margin: -100px auto 0px;;
		z-index: 100;
		text-align: center;
	}
	
	/* last photo */ 
}


@media screen and (max-width: 1000px) {
	
	/* main */ 

	#contents main #maincopy span > i{
		font-size: 5vw;
	}
	
	/* main */ 

	
}


@media screen and (max-width: 768px) {
	
	/* main */ 
	
	#contents main,
	#contents main #alphablack,
	#contents main #mainphoto div{
		min-height: inherit;
	}

	body.culture_1 #contents main article{
		padding-top: 10%;
	}
	
	/* main */ 
	
	
	/* menmbarbox */ 
	
	#menmbarbox{
		padding: 70px 0px 80px;
	}

	
	#menmbarbox ul li{
		width: 45%;
		margin-right: 10%;
		font-weight: 500;
		padding: 0px 20px 0px 0px;
		color: #FFF;
	}
	
	#menmbarbox ul li:nth-child(2){
		padding: 0px 0px 0px 20px;
	}

	#menmbarbox ul::before,
	#menmbarbox ul::after{
		content: "";
		width: 15%;
	}
	
	/* menmbarbox */ 
	
	
	/* talk_box */ 
	
	.talk_box article div aside{
		font-size: 30px;
		font-weight: 500;
		letter-spacing: 2px;
	}

	.talk_box article div h1{
		font-size: 36px;
		font-weight: 700;
		line-height: 1.4;
		padding: 15px 0px 60px;
	}

	
	.talk_area_1{
		padding-top: 100px;
	}
	
	#talk_column_1 > div{
		position: static;
		width: 100%;
	}

	#talk_column_1 > div figure{
		position: relative;
		width: 90%;
		padding-top: 71.614583%;
		overflow: hidden;
		background-size: cover;
	}
	
	body.culture_1 #talk_column_1 > div figure{
		background-image: url(../img/photo_1_1_sp.jpg);
		background-size: cover;
	}
	
	body.culture_2 #talk_column_1 > div figure{
		background-image: url(../img/photo_2_1_sp.jpg);
		background-size: cover;
	}

	#talk_column_1 > div figure img{
		display: none;
	}

	#talk_column_1 article div{
		width: 100%;
		padding: 80px 0% 80px 10%;
	}
	
	
	.talk_area_2 > div figure{
		position: relative;
		width: 100%;
		padding-top: 71.614583%;
		overflow: hidden;
	}
	
	#talk_column_2 > div figure{
		position: relative;
		width: 100%;
		padding-top: 71.614583%;
		overflow: hidden;
		background-size: cover;
	}
	
	body.culture_1 #talk_column_2 > div figure{
		background-image: url(../img/photo_1_2_sp.jpg);
	}
	
	body.culture_2 #talk_column_2 > div figure{
		background-image: url(../img/photo_2_2_sp.jpg);
	}

	.talk_area_2 > div figure img{
		display: none;
	}
	
	.talk_area_2 article{
		color: #FFF;
		font-weight: 500;
		padding: 80px 0px;
	}
	
	.talk_area_2 article div{
		color: #FFF;
		font-weight: 500;
		padding: 0px 5%;
	}
	
	
	#talk_column_3 > div{
		position: static;
		width: 100%;
		text-align: right;
		max-width: 750px;
	}

	#talk_column_3 > div figure{
		position: relative;
		display: inline-block;
		width: 90%;
		padding-top: 71.614583%;
		overflow: hidden;
		background-size: cover;
	}
	
	body.culture_1 #talk_column_3 > div figure{
		background-image: url(../img/photo_1_3_sp.jpg);
	}
	
	body.culture_2 #talk_column_3 > div figure{
		background-image: url(../img/photo_2_3_sp.jpg);
	}
	
	
	#talk_column_3 > div figure img{
		display: none;
	}

	#talk_column_3 article div{
		width: 100%;
		padding: 80px 10% 80px 0%;
	}
	
	#talk_column_4 > div figure{
		position: relative;
		width: 100%;
		padding-top: 71.614583%;
		overflow: hidden;
		background-size: cover;
	}
	
	body.culture_1 #talk_column_4 > div figure{
		background-image: url(../img/photo_1_4_sp.jpg);
	}
	
	body.culture_2 #talk_column_4 > div figure{
		background-image: url(../img/photo_2_4_sp.jpg);
	}
	
	#talk_column_4 article div{
		padding-bottom: 80px;
	}
	
	/* talk_box */ 
	
	/* FooterList */


	#contentsfooter #cultureFooter li{
		width: 40%;
		margin-right: 5%;
		overflow: hidden;
	}



}


@media screen and (max-width: 640px) {
	
	/* menmbarbox */ 
	#menmbarbox ul{
		display: block;
	}
	
	#menmbarbox ul li{
		position: relative;
		width: 100%;
		margin-right: 0%;
		font-weight: 500;
		padding: 0px 0px 80px 0px;
		color: #FFF;
	}
	
	#menmbarbox ul li:nth-child(2){
		padding: 20px 0px 0px 0px;
	}
	
	#menmbarbox ul li figure{
		float: left;
		width: 140px;
		margin: 0 auto;
	}
	
	#menmbarbox ul li article{
		padding-left: 160px;
		text-align: left;
	}
	
	#menmbarbox ul li h2{
		font-size: 18px;
		line-height: 0;
		font-weight: 700;
		padding-top: 10px;
		padding-bottom: 3px;
	}
	
	#menmbarbox ul li div{
		font-size: 12px;
		line-height: 1.5;
		padding: 10px 0px 15px;
	}
	
	#menmbarbox ul li p{
		line-height: 1.8;
		font-size: 13px;
		text-align:justify;
		text-justify:distribute;
	}
	
	#menmbarbox ul::before,
	#menmbarbox ul::after{
		display: none;
	}
	
	#menmbarbox ul li:nth-child(1)::before{
		content: "";
		width: 60px;
		height: 1px;
		background-color: #FFF;
		display: block;
		position: absolute;
		width: 100%;
		bottom: 10%;
		left: 0%;
	}
	
	/* menmbarbox */ 
	
	
	/* talk_box */ 
	
	.talk_box article dl dt {
		width: 45px;
		float: left;
		font-weight: 500;
		position: relative;
		line-height: 2;
	}

	.talk_box article dl dt::before {
		content: "";
		width: 1px;
		height: 1.2em;
		display: block;
		background-color: #666;
		position: absolute;
		right: 0px;
		top: 7px;
	}

	.talk_box article dl dd {
		padding-left: 60px;
		padding-bottom: 40px;
		text-align: justify;
		text-justify: distribute;
		line-height: 2;
	}
	
	/* talk_box */ 
	
	
	/* last photo */ 
	
	#contentslastphoto{
		position: relative;
		width: 80%;
		max-width: 1440px;
		margin: -100px auto 0px;;
		z-index: 100;
		text-align: center;
	}
	
	/* last photo */ 
	
}


@media screen and (max-width: 560px) {
	
	/* main*/ 
	
	body.culture_1 #contents main article{
		font-size: 16px;
		position: absolute;
		top: auto;
		bottom: 5%;
		left: 50%;
		line-height: 1.6;
		font-weight: 600;
		z-index: 100;

		-webkit-transform: translate(-50%,0%);
		-ms-transform: translate(-50%,0%);
		transform: translate(-50%,0%);
	}
	
	
	#contents main #maincopy span{
		overflow: hidden;
		display: block;
		width: 100%;
	}
	
	#contents main #maincopy span > i{
		background-color: inherit;
		color: #000;
		font-weight: 700;
		padding: 0px;
		line-height: 0;
		white-space: normal;
	}
	
	#contents.load main #maincopy span:nth-of-type(1){
		width: 100%;
		-webkit-animation: none;
		animation: none;
	}

	#contents.load main #maincopy span:nth-of-type(2){
		width: 100%;
		-webkit-animation: none;
		animation: none;
	}

	
	#contents main #maincopy span > i aside{
		overflow: hidden;
		display: inline-block;
		width: 50%;
		line-height: 0;
	}
	
	#contents main #maincopy span > i aside > i{
		background-color: #FFF;
		color: #000;
		font-weight: 700;
		font-size: 6.5vw;
		padding: 5px 10px;
		line-height: 1.2;
		white-space: nowrap;
	}
	
	
	#contents.load main #maincopy span:nth-of-type(1) > i aside:nth-of-type(1){
		width: 0%;
		-webkit-animation: width_100 1s forwards cubic-bezier(.86,0,.07,1) 1s;
		animation: width_100 1s forwards cubic-bezier(.86,0,.07,1) 1s;
	}

	#contents.load main #maincopy span:nth-of-type(1) > i aside:nth-of-type(2){
		width: 0%;
		-webkit-animation: width_100 1s forwards cubic-bezier(.86,0,.07,1) 1.2s;
		animation: width_100 1s forwards cubic-bezier(.86,0,.07,1) 1.2s;
	}
	
	#contents.load main #maincopy span:nth-of-type(2) > i aside:nth-of-type(1){
		width: 0%;
		-webkit-animation: width_100 1s forwards cubic-bezier(.86,0,.07,1) 1.4s;
		animation: width_100 1s forwards cubic-bezier(.86,0,.07,1) 1.4s;
	}

	#contents.load main #maincopy span:nth-of-type(2) > i aside:nth-of-type(2){
		width: 0%;
		-webkit-animation: width_100 1s forwards cubic-bezier(.86,0,.07,1) 1.6s;
		animation: width_100 1s forwards cubic-bezier(.86,0,.07,1) 1.6s;
	}
	
	/* main*/ 
	
	
	/* last photo*/ 
	
	#contents #contentslastphoto figure,
	#contents #contentslastphoto.inview_anime_photo figure{
		transition: all .8s .8s ease;
		transform: scale(1.2,1.2);
		-webkit-transform:scale(1.2,1.2);
		-moz-transform:scale(1.2,1.2);
		-ms-transform:scale(1.2,1.2);
		-o-transform:scale(1.2,1.2);
		opacity: 0;
	}


	#contents.load #contentslastphoto.inview_anime_photo_on figure{
		transform: scale(1.1,1.1);
		-webkit-transform:scale(1.1,1.1);
		-moz-transform:scale(1.1,1.1);
		-ms-transform:scale(1.1,1.1);
		-o-transform:scale(1.1,1.1);
		opacity: 1;
	}
	
	/* last photo*/ 
	
	
	/* FooterList */
	
	#contentsfooter #cultureFooter{
		width: 80%;
		max-width: 360px;
		margin: 0 auto;
		align-items: center;
		justify-content: center;
	}

	#contentsfooter #cultureFooter li{
		width: 1000%;
		margin-right: 0%;
		padding-bottom: 20px;
		margin-bottom: 50px;
		overflow: hidden;
		border-bottom: #ccc dotted 1px;
	}

	#contentsfooter #cultureFooter li:nth-child(2n){
		margin-right: 0;
		margin-bottom: 0px;
	}

	/* FooterList */
}



@media screen and (max-width: 480px) {
	
	/* menmbarbox */
	#menmbarbox{
		padding: 50px 0px 50px;
	}

	#menmbarbox ul li figure{
		float: left;
		width: 100px;
		margin: 0 auto;
	}
	
	#menmbarbox ul li article{
		padding-left: 120px;
		text-align: left;
	}
	
	/* menmbarbox */
	
	
	/* talk_box */
	
	.talk_box article div aside{
		font-size: 24px;
		font-weight: 500;
		letter-spacing: 2px;
	}

	.talk_box article div h1{
		font-size: 30px;
		font-weight: 700;
		line-height: 1.4;
		padding: 15px 0px 50px;
	}
	
	#talk_column_1 article div{
		width: 100%;
		padding: 60px 0% 60px 5%;
	}
	
	.talk_area_2 article{
		color: #FFF;
		font-weight: 500;
		padding: 60px 0px;
	}
	
	.talk_area_2 article div{
		padding: 0px 2.5%;
	}
	
	#talk_column_3 article div{
		width: 100%;
		padding: 60px 5% 60px 0%;
	}
	
	/* talk_box */

}