/* --------------- top --------------- */

.col_topmain {
	width: 100%;
	height: 100vh;
	margin: 0 0 50px;
	padding: 0;
	background-color: #fff;
	overflow: hidden;
	position: relative;
	z-index: 0;
}


.bg_topmain {
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0 0 0;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	position: relative;
	z-index: 0;
}

.bg_topmain:after {
	content: "";
	width: 100%;
	height: 45px;
	background-image: url(../img/top/img_line2.png);
	background-repeat: no-repeat;
	position: absolute;
	top: 96%;
	background-size: cover;
}


.cont_topmain {
	width: 85%;
	max-width: 1260px;
	height: 100vh;
	margin: 0 auto;
	padding: 0;
	display: flex;
	align-items: center;
	position: relative;
	z-index: 0;
}

.cont_topmain a.scroll_tag.pc_none{
		display: none;
}
	
.cont_topmain a.scroll_tag{
	margin: 24% 15px 0 0; 
    padding: 0;
    color: #ffffff;
    text-decoration: none;
    -webkit-writing-mode: vertical-rl;
    -ms-writing-mode: tb-rl;
    -o-writing-mode: vertical-rl;
    writing-mode: vertical-rl;
    display: inline-block;
    transition: opacity .3s;
    -moz-transition: opacity .3s;
    -webkit-transition: opacity .3s;
    position: relative;
}

.cont_topmain a.scroll_tag:before{
	content: "";
	width: 1px;
	height: 50%;
	background: #fff;
	position: absolute;
	top: 110%;
	left: 35%;
	transition: all .3s;
    -moz-transition: all .3s;
    -webkit-transition: all .3s;
}

.cont_topmain a.scroll_tag:after{
	content: "";
	width: 8px;
	height: 8px;
	background: #fff;
	border-radius: 50%;
	position: absolute;
	top: 160%;
	left: 23%;
	transition: all .3s;
    -moz-transition: all .3s;
    -webkit-transition: all .3s;

}

.cont_topmain a.scroll_tag:hover:after{
	top: 210%;
}

.cont_topmain a.scroll_tag:hover:before{
	height: 100%;
}


.cont_topmain .lead{
	margin-top: 30%;
	font-size: 2.7em;
	font-weight: 600;
	color: #fff;
	line-height: 1.4;
	position: relative;
	z-index: 0;
}


.cont_topmain .lead .inner{
	margin: 0;
	padding: 0;
}

.cont_topmain .lead .inner span.yellow{
	color: #fff100;
}

.cont_topmain .lead .inner span.en{
	font-size: 0.395em;
	line-height: 1.3;
}



@media screen and ( max-width: 800px ) {
	.col_topmain{
		height: 125vw;
		margin: 0 0 25px
	}
	
	.bg_topmain{
		height: 125vw;
	}
	
	.cont_topmain{
	    height: 100%;
	    justify-content: space-between;
	    align-items: flex-start;
	    margin-top: 60%;
	}
	
	.cont_topmain .lead{
		font-size: min(8vw , 50px);
		margin-top: 0;
	}
	
	.bg_topmain:after{
		height: 24px;
		background-image: url(../img/top/sp/img_line2.png);
		top: 98%;
	}
	
	.cont_topmain .lead:before{
		content: "";
		width: 19px;
		height: 296px;
		top: 0;
		left: 200%;
	}
	
	.cont_topmain .lead .inner span.en{
		font-size: min(3vw , 17px);
	}
	.cont_topmain a.scroll_tag{
		margin-top: 55%;
		font-size: min(5vw , 24px);
	}
	
	.cont_topmain a.scroll_tag.sp_none{
		display: none;
	}
	
	.cont_topmain a.scroll_tag.pc_none{
		display: block;
		margin-top: 0;
	}
	.cont_topmain a.scroll_tag:before{
		left: 40%;
	}
	
	.cont_topmain a.scroll_tag:after{
		left: 31.5%;
	}
	
}


@media screen and ( max-width: 600px ) {
	.cont_topmain a.scroll_tag:hover:before{
		height: 70%;
	}
	
	.cont_topmain a.scroll_tag:hover:after{
		top: 175%;
	}
	
	.bg_topmain:after{
		top: 97%;
	}
	
	
}


/* --------------- top news--------------- */

.col_topnews{
	width: 100%;
    margin: 0 0 80px;
    padding: 0;
    display: block;
    transition: all 1s;

}

.col_topnews:before{
	content:'';
  display: block;
  padding-top: 250px;
  margin-top: -250px;

}


.box_topnews{
	max-width: 860px;
	margin: 0 auto;
	padding: 15px;
	background-color: #fff;
    display: flex;
    justify-content: center;
}



.box_topnews .mds{
	width: 170px;
	margin: 0 40px 0 0;
    padding: 5px 5px 0 0;
    font-size: 30px;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: 0.14em;
    text-align: center;
}

.box_topnews .mds span{
	line-height: 1;
    position: relative;
    z-index: 0;
}

.box_topnews .mds span:before{
	content: "";
	width: 100%;
	height: 3px;
	background-image: url(../img/img_dotted2.svg);
    background-repeat: no-repeat;
	position: absolute;
	top: 117%;
	left: 0;
}

.box_topnews .mds span:after{
	content: "";
	width: 11px;
	height: 11px;
	background-image: url(../img/top/icon_circle.svg);
	background-size: contain;
	background-repeat: no-repeat;
	position: absolute;
	top: 106%;
	left: -4%;
	z-index: -1;
}

.list_topnews{
	font-size: 15px;
}

.scroll_topnews{
    margin: 0;
    padding: 15px 0 0;
}

.col_topnews dl{
	width: 100%;
    margin: 0;
    padding: 15px 2px;
    font-weight: 500;
    box-sizing: border-box;
    display: flex;
    position: relative;
    z-index: 0;
}

.col_topnews dl:before{
	content: "";
    width: 100%;
    height: 3px;
    background-image: url(../img/img_dotted.svg);
    background-repeat: no-repeat;
    background-size: cover;
    position: absolute;
    top: 94%;
    left: 0;
}

.col_topnews dl:first-of-type{
    padding: 0 2px 12px;

}

.col_topnews dl:after{
	content: "";
	width: 11px;
	height: 11px;
	background-image: url(../img/top/icon_circle.svg);
	background-size: contain;
	background-repeat: no-repeat;
	position: absolute;
	top: 87%;
	right: -0.3%;
	z-index: -1;
}

.col_topnews dl dt{
	width: 130px;
    margin: 0;
    padding: 0 0 0 10px;
    position: relative;
    z-index: 0;
}

.col_topnews dl dd{
    margin: 0;
    padding: 0 20px 0 15px;
    line-height: 1.6;
}

.col_topnews dl dd span a{
	color: #282828;
	text-decoration: none;
	padding-left: 1em;
}

.col_topnews dl dd span:hover a{
	text-decoration: underline;
}

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

	.box_topnews{
		width: 90%;
		padding: 0;
		display: block;
	}
	
	.col_topnews dl{
		display: block;
	}
	
	.box_topnews .mds{
		margin: 0 0 30px;
		padding: 10px 15px 5px 15px;
		text-align: left;
	}
	
	.box_topnews .mds:before{
		top: 100%;
	}
	
	.box_topnews .mds:after{
		top: 91%;
	}
	
	.col_topnews dl:before{
		top: 100%;
	}
	
	.col_topnews dl:after{
		top: 95%;
	}
	
	
}




/* --------------- top event --------------- */

.col_topevent{
	margin: 0;
	padding: 0 0 125px;
	position: relative;
	z-index: 0;
}

.col_topevent:before{
	content: "";
	width: 90%;
	height: 100%;
	max-height: 10px;
	background-image: url(../img/img_wavy.svg);
	background-repeat: no-repeat;
	position: absolute;
	top: 90%;
	left: 5%;
	background-size: contain;
}

.ttl_topevent{
	margin: 0 auto 40px;
	display: flex;
	justify-content: center;
	align-items: center;
}

.left_ttl{
	margin: 0 35px 0 0;
}

.right_ttl{
	margin: 0 0 0 35px;
}
h2.mds2{
	position: relative;
	z-index: 0;
	line-height: 0.8;
	text-align: center;
	font-size: 2.05em;
	color: #282828;
}

h2.mds2 span.jp{
	font-weight: 500;
	letter-spacing: 0.14em;
}


h2.mds2 span.en{
	font-size: 0.55em;
	font-weight: 600;
	
}



.wrap_event{
	width: 95%;
	max-width: 1100px;
	margin: 0 auto;
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
}

a.link_event{
	width: calc(50% - 25px);
    max-width: 513px;
    margin: 0 0;
    padding: 0;
    box-sizing: border-box;
    display: flex;
    position: relative;
}

a.link_event:hover .img_event1 img{
	opacity: .8;
}

a.link_event:hover .btn1.event1{
	background-color: #fff;
    color: #000;
    border: solid 1px #000;
}

.col_event{
	width: 100%;
    max-width: 513px;
    margin: 0 0 85px 0;
    padding: 0;
    box-sizing: border-box;
    display: flex;
    position: relative;
}



.img_event1{
	width: 90%;
	max-width: 224px;
	margin: 0 25px 0 0;
    text-align: center;
}

.img_event1 img{
	width: 100%;
	height: auto;
	margin: 0 0 5px 0;
	transition: opacity .3s;
	-moz-transition: opacity .3s;
	-webkit-transition: opacity;
	filter: drop-shadow(7px 7px 0px #dcdddd);
}

.lead_event1{
	width: 100%;
}

.lead_event1 h2{
	margin: 0 0 15px 0;
    padding: 0 10px 15px 10px;
    color: #282828;
    font-size: 20px;
    font-weight: 900;
    line-height: 1.5em;
    letter-spacing: -0.07em;
    border-bottom: 1px solid #707070;
}

.lead_event1 h2 span{
	font-size: 18px;
}



.label_new{
	max-width: 63px;
	margin: 0 0 5px 10px;
	padding: 5px 6px;
	background: #fff100;
	font-weight: 600;
	border-radius: 1.9px;
	text-align: center;
	font-size: 20px;
	line-height: 1;
	color: #282828;
}


.txt_event1{
	margin: 0 0 15px;
	padding: 0 10px;
}

.list_event1{
	margin: 0;
    padding: 0;
    color: #282828;
}


.list_event1 dd{
	margin: 0 0 0 5px;
}


.btn1.event1{
	width: 137px;
    padding: 10px 17px;
    border-radius: 23px;
    font-size: 16px;
    justify-content: space-between;
    border: solid 1px #000;
}



.btn_event1 a{
	color: #ffffff;
}

.btn1.event1 span{
	line-height: 1;
}

span.more_link{
	width: 15px;
    height: 15px;
    background-color: #fff;
    border-radius: 50%;
    color: #000;
}

.right_info{
	margin: 0 auto;
	display: flex;
	justify-content: center;
	max-width: 155px;
}


.icon{
	width: 15px;
	height: 15px;
	background-color: #fff;
	border-radius: 50%;
	position: relative;
}

.icon:before{
	content: "";
	width: 4px;
	height: 7px;
	background-image: url(../img/img_btn.svg);
	background-repeat: no-repeat;
	position: absolute;
	top: 4px;
	left: 6px;
}

a.link_event:hover .btn1.event1 .icon{
	background-color: #000;
}

a.link_event:hover .btn1.event1 .icon:before{
	background-image: url(../img/img_btnhover.svg);
}





.icon2{
	width: 20%;
	max-width: 15px;
	height: 15px;
	margin: 5px 0 0 0;
	background-color: #282828;
	border-radius: 50%;
	position: relative;
}

.icon2:before{
	content: "";
	width: 4px;
	height: 7px;
	background-image: url(../img/img_btnhover.svg);
	background-repeat: no-repeat;
	position: absolute;
	top: 4px;
	left: 6px;
}

a.btn1.event1:hover .icon2{
	background-color: #000;
}

a.btn1.event1:hover .icon2:before{
	background-image: url(../img/img_btnhover.svg);
}

.icon3{
	width: 20%;
	max-width: 15px;
	height: 15px;
	margin: 5px 0 0 0;
	border-radius: 50%;
	position: relative;
}

.icon3:before{
	content: "";
	width: 12px;
	height: 12px;
	background-image: url(../img/img_btnlink.svg);
	background-repeat: no-repeat;
	position: absolute;
	top: 4px;
	left: 6px;
}

a.btn1.event1:hover .icon3{
	background-color: #000;
}

a.btn1.event1:hover .icon3:before{
	background-image: url(../img/img_btnhover.svg);
}

@media screen and ( max-width: 1000px ) {
	.wrap_event{
		display: block;
	}
	
	a.link_event{
		width: 90%;
		max-width: 100%;
		margin: 0 auto;
	}
	
	.col_event{
		max-width: 100%;
	}
	
	.col_topevent:before{
		top: 95%;
	}
	
}


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

	.ttl_topevent{
		margin: 0 auto 5%;
	}
	
	h2.mds2{
		font-size: min(8vw , 2.05em);
		line-height: 0.7;
	}
	
	
	.left_ttl{
		width: 10%;
        max-width: 36px;
		margin: 0 7% 0 0;
	}
	
	.right_ttl{
		width: 10%;
        max-width: 36px;
		margin: 0 0 0 7%;
	}
	
	.wrap_event{
		display: block;
	}
	
	.col_topevent{
		padding: 0 0 3%;
	}
	
	a.link_event{
		width: 100%;
		max-width: 100%;
		margin: 0 auto 0;
		padding: 0;
		display: block;
	}
	
	.col_event{
		width: 100%;
		max-width: 100%;
		margin: 0 auto 0;
		padding: 0 0 20%;
		display: block;
	}
	
	.col_event:before{
		content: "";
		width: 100%;
		height: 100%;
		max-height: 10px;
		background-image: url(../img/img_wavy.svg);
		background-repeat: no-repeat;
		background-size: 100% 100%;
		position: absolute;
		top: 95%;
		left: 0;
	}
	.img_event1{
		width: 75%;
		max-width: 460px;
		margin: 0 auto 30px;
	}
	
	.col_topevent:before{
		display: none;
	}
	

	
}




/* --------------- top info --------------- */

.col_topinfo{
	width: 92%;
	max-width: 1088px;
	margin: 0 auto;
	padding: 0 0 70px;
}


.list_info{
	max-width: 1088px;
    margin: 0 auto;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.list_info a{
	width: 31%;
    max-width: 330px;
    margin: 0 3% 0 0;
    padding: 15px 15px 60px 15px;
    color: #000;
    transition: all 1s;
    display: block;
    postion: relative;
    background-image: url(../img/top/img_infobg.svg);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

.list_info a:last-of-type{
	margin: 0;
}



.list_info a .thumb{
	width: 100%;
    height: calc(((105vw - 200px) / 3 - 20px)* 0.7);
    max-height: 180px;
    margin: 0 0 12px;
    padding: 0;
    overflow: hidden;
	border-top-left-radius: 76px;
    border-bottom-right-radius: 76px;
}


.list_info a .thumb img{
	width: auto;
    height: 100%;
    margin: 0;
    padding: 0;
    transform: translate(-50%, -50%);
    transition: transform .5s;
    position: relative;
    top: 50%;
    left: 50%;
}

.list_info a:hover .thumb img{
	transform: translate(-50%, -50%) scale(1.1);
}


.list_info a .title{
	margin: 0;
    padding: 0 0 0 0;
    font-size: 23px;
    font-weight: 500;
    line-height: 1;
    text-align: center;
}

.list_info a .title .jp{
	letter-spacing: 0.14em;
	padding: 0 10px;
	margin: 0 0 5px 0;
}



.list_info a .title .en{
		font-size: 14px;
	font-weight: 600;
	color: #a3a3a3;

}

.list_info2 a .title .en{
		font-size: 14px;
	font-weight: 600;
	color: #a3a3a3;
	line-height: 1.2;

}

.list_info2 a .title .jp{
	letter-spacing: 0.14em;
	padding: 0 10px;
	margin: 0 0 5px 0;

}



.list_info a .title span.en{
	font-size: 14px;
	font-weight: 600;
	color: #a3a3a3;
}








.list_info2{
	max-width: 980px;
    margin: 0 auto;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.list_info2 a{
	width: calc(50% - 35px);
    max-width: 473px;
    margin: 0 35px 0 0;
    padding: 15px 15px 25px 0;
    color: #000;
    transition: all 1s;
    display: flex;
    align-items: center;
    postion: relative;
    background-image: url(../img/top/img_infobg2.svg);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

.list_info2 a:last-of-type{
    margin: 0 0 0 0;
}


.list_info2 a .thumb{
	width: 100%;
	max-width: 202px;
    height: calc(((85vw - 200px) / 3 - 20px)* 0.7);
    max-height: 135px;
    margin: 0 0 8px;
    padding: 0;
    overflow: hidden;
    transform: translate(-6%, -6%);
    border-top-left-radius: 51px;
    border-bottom-right-radius: 51px;


}


.list_info2 a .thumb img{
	width: auto;
    height: 100%;
    margin: 0;
    padding: 0;
    transform: translate(-50%, -50%);
    transition: transform .5s;
    position: relative;
    top: 50%;
    left: 50%;
}

.list_info2 a:hover .thumb img{
	transform: translate(-50%, -50%) scale(1.1);
}


.list_info2 a .title{
	margin: 0;
    padding: 0;
    font-size: min(2vw , 23px);
    font-weight: 500;
    line-height: 1;
    text-align: center;
}


.list_info2 a .title span.en{
	font-size: 14px;
	font-weight: 600;
	color: #a3a3a3;
}

.right_info2{
	width: 100%;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
}

.pc_none2{
	display: none;
}

@media screen and ( max-width: 1080px ) {
	.right_info{
		margin: 0 auto 20px;
	}
	
}

@media screen and ( max-width: 900px ) {
	.list_info2 a .title .jp{
		font-size: 18px;
	}
	
}

@media screen and ( max-width: 846px ) {
	.icon3:before{
		top: 9px;
    	left: 100%;
	}
	
}


@media screen and ( max-width: 800px ) {
	
	.col_topinfo{
		padding: 0 0 20%;
	}
	
	.list_info{
		display: block;
	}
	
	.list_info a{
		width: 100%;
		max-width: 525px;
		margin: 0 auto 9.5%;
		padding: 15px 15px 0 15px;
	}
	
	.list_info a .thumb{
		height: calc(((290vw - 200px) / 3 - 20px)* 0.7);
		max-height: 300px;
		transform: translate(0, -15%);
		margin: 0;
		border-top-left-radius: 130px;
    	border-bottom-right-radius: 130px;

	}
	
	.list_info a:last-of-type{
		margin: 0 auto 9.5%;
	}
	
	.list_info2 a .title .jp{
		font-size: min(5.5vw , 25px);
	}
	
	
	.list_info2{
		max-width: 620px;
		display: block;
	}
	
	.list_info2 a{
		width: 92%;
		max-width: 590px;
		margin: 0 auto 7%;
        padding: 0 15px 2% 0;
	}
	
	.list_info2 a .thumb{
		max-width: 262px;
		height: calc(((195vw - 200px) / 3 - 20px)* 0.7);
		max-height: 175px;
		transform: translate(-8% , -8%);
	}
	
	.list_info2 a:last-of-type{
		margin: 0 auto 0;
	}
	
	.list_info2 a .title{
		font-size: min(5vw , 28px);
	}
	
	.right_info{
		max-width: 220px;
		transform: translate(0, -22px);
	}
	
	.icon2{
		margin: 2% 0 0;
		transform: translate(10%, -0);
	}
	
	.right_info2 .icon2{
		margin: 6% 0 0;
		transform: translate(100%, -0);
	}
	
	.right_info2 .icon3{
				transform: translate(-10%, -0);

	}
	
	
	.pc_none2{
		display: block;
	}
	
	.icon3:before{
		width: 18px;
		height: 18px;
	}
	
	.list_info2 a .title .en{
		font-size: min(3.5vw , 14px);
	}
	
	.icon3:before{
		top: 13px;
        left: 40%;
	}
	
}

@media screen and ( max-width: 600px ) {
	.list_info2 a .thumb{
		height: calc(((175vw - 200px) / 3 - 20px)* 0.7)
	}
	
}



@media screen and ( max-width: 550px ) {
	.list_info2 a{
		margin: 0 auto 3%;
	}
	
	.list_info a .thumb{
		border-top-left-radius: 123px;
    	border-bottom-right-radius: 123px;

	}
	
}



@media screen and ( max-width: 400px ) {
	.list_info a .thumb{
		margin: 0 0 3%;
		border-top-left-radius: 76px;
    	border-bottom-right-radius: 76px;
	}
	
	.list_info2 a .thumb{
		height: calc(((195vw - 200px) / 3 - 20px)* 0.7)
	}
}


@media screen and ( max-width: 350px ) {
	.list_info a .thumb{
		transform: translate(0, -18%);
	}
	
	
}






/* --------------- top gallery --------------- */

.loop_foot_land{
	width: 100vw;
    height: 158px;
    display: flex;
    overflow: hidden;
    position: relative;
    z-index: -3;
}

.loop_foot_land span.loop1{
	animation: loop_land1 60s -30s linear infinite;
}

.loop_foot_land span.loop2 {
	animation: loop_land2 60s linear infinite;
}


@keyframes loop_land1 {
	0% {
		transform: translate3d(100%, 0, 0);
	}

	100% {
		transform: translate3d(-100%, 0, 0);
	}
}

@keyframes loop_land2 {
	0% {
		transform: translate3d(0, 0, 0);
	}

	100% {
		transform: translate3d(-200%, 0, 0);
	}
}

.loop_foot_land img {
	width: auto;
	max-width: max-content;
	height: 100%;
}


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

	.loop_foot_land{
	    height: 105px;
    }
}