@charset "utf-8";
@import url('https://fonts.googleapis.com/css?family=Montserrat');
/* CSS Document */
div {
  scrollbar-color: var(--blue) #fff; /*firefox　つまみ　背景*/
}
div::-webkit-scrollbar { /*chrome : edge　幅*/
  width: 10px;
  height: 10px;
}
div::-webkit-scrollbar-track { /*chrome : edge　背景*/
  background:#fff;
  border-radius: 50px;
}
div::-webkit-scrollbar-thumb { /*chrome : edge :つまみ*/
  background: var(--blue);
  border-radius: 50px;
}

/*----------------------------------------------------
TOPエリア
------------------------------------------------------*/
#topArea{
	width:100%;
	position: relative;
	overflow: hidden;
}

#topArea .topBg{
	width:100%;
	position: relative;
	display: grid;
	align-items: center;
	justify-items: center;
	padding:3em 5em;
}

.topCont{
	width: 100%;
	max-width: 1150px;
	text-align: center;
	position: relative;
	z-index: 3;
	transition: all 0.5s 0s ease-out, opacity 0.5s 0s ease-out;
	opacity: 0;
	transform: scale(1);
	padding-top: 2em;
}

#topArea.action .topCont{
	opacity: 1;
}

.topCont h1{
	width: 50vw;
	margin: 0 auto;
}

.update{
	font-size: 1.2em;
	padding: 1em 1em 0.5em;
	color: var(--blue);
}

a.newsLink{
	width: calc(100% - 2em);
	max-width: 1300px;
	margin: 1em auto 0;
	display: block;
	border-radius: 50px;
	background-color: var(--red);
	border: var(--blue) 1px solid;
	border-left-width: 0.5em;
	border-right-width: 0.5em;
	color: var(--white);
	font-weight: bold;
	padding: 0.6em 2.5em;
	text-align: center;
	transition: opacity 0.2s 0s ease;


}
a.newsLink:hover{
	/*background-color: var(--blue);*/
	opacity: 0.5;
}
a.newsLink span:not(.br2):after{
	content: "";
	width: 1.2em;
	height: 1em;
	background-image: url(../img/link_icon.png);
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	position: relative;
	display:inline-block;
	vertical-align:middle;
	margin-left: 0.5em;

}
.infoArea{
	background-color: var(--blue);
	padding: 8em 1em 6em;
	background-image: url("../img/line_line.jpg");
	background-size: 100%;
	background-repeat: repeat-x;
	background-position: left top;
	transition: all 0.5s 0s ease-out, opacity 0.5s 0s ease-out;
	opacity: 0;
	transform: translateY(2em);

}
.infoArea.action{
		opacity: 1;
	transform: translateY(0);
}
.infoArea h2{
	font-size: 1.5em;
	padding: 0.5em;
	border-radius: 50px;
	text-align: center;
	color: var(--white);
	/*font-weight: bold;*/
	margin-bottom: 0.5em;
	/*font-family: 'Noto Serif JP',"游明朝", YuMincho, "ヒラギノ明朝 Pro W6", "Hiragino Mincho Pro", "HGS明朝E", "ＭＳ Ｐ明朝", serif;*/
	letter-spacing: 1px;
	background-color: var(--lightBlue) !important;
}
.titleListWrap{
	display: grid;
	grid-template-columns:repeat(2, 1fr);
	column-gap: 10px;
	row-gap: 1em;

}
.titleBox{
	border-radius: 10px;
	padding: 0.5em;
	border: var(--milk) 2px solid;
	position: relative;
	background-color: var(--milk);
}

.titleBox.new:before{
	content: "new";
	width: 3em;
	height: 3em;
	line-height: 3em;
	background-color: var(--pink);
	color: var(--white);
	transform: scale(0.9);
	border-radius: 50%;
	display: block;
	position: absolute;
	top:-0.5em;
	left:-0.5em;
	text-align: center;
	z-index: 2;
}


.titleBox.comingsoon{
	display: grid;
	align-items: center;
	text-align: center;
	color: var(--blue);
	padding: 3em 1em;
}

.titleBox .title,.titleNewsBox .title{
	padding: 0.5em;
	/*border-top: var(--blue) 2px solid;
	border-bottom: var(--blue) 3px solid;*/
	background-color: var(--PPink);
	text-align: center;
	font-size:max(0.8em,11px);
	margin-top: 0.5em;
	font-weight: bold;
	color: var(--white);
}
.linkBox{
	display: grid;
	grid-template-columns:repeat(2, 1fr);
	column-gap: 0.5em;
	row-gap: 0.5em;
	padding-top: 0.5em;
}
.wideLinkBox{
	grid-template-columns:repeat(3, 1fr);

}
.doubleLinkBox{
	grid-template-columns:repeat(2, 1fr);

}

.linkBox:not(.wideLinkBox) .wide{
	grid-column: span 2;
}
.linkBox a{
	padding: 1em;
	text-align: center;
	background-color: var(--lightBlue);
	color:  var(--gold);

	font-size: max(1em,12px);
	display:grid;
	align-items: center;
	border-radius: 6px;
	font-weight: bold;
}
.linkBox a:hover{
	background-color: var(--blue);
	/*color: #fff;*/
}

/*---------------------------------------------------------
@media
------------------------------------------------------------*/
@media (max-width: 1024px) {
	#topArea{

		margin-top: 0;
	}

}

@media (max-width: 912px) {

}

@media (max-width: 786px) {
.topCont h1{
	width: 70vw;
	margin: 0 auto;
}
	#topArea .topBg{

	padding:4em 1em 6em;
}
	
.infoArea{
	padding: 5.5em 1em;
}
	
	
}
@media (max-width: 480px) {



#topArea .topBg{
	/*min-height: 70vh;*/
	padding-top: 4em;
}
.infoArea h2{
	font-size: 1.3em;
	padding: 0.7em;

	margin-bottom: 0.7em;

}
.titleListWrap{
	grid-template-columns:repeat(1, 1fr);


}



}
@media (max-width: 360px) {

}