@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);
}

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

.topCont h1{
	width: 40vw;
	margin: 0 auto;
	max-width: 500px;
}

.topCont h1 p{
	background-color: var(--black);
	padding: 1em 0.5em 0.8em;
	border-radius: 10px;
	font-weight: bold;
	font-size: 120%;
	letter-spacing: 0.1em;
}

.topCont h1 img{
	margin: 0 auto 2em;
}

.update{
	font-size: 1.2em;
	padding: 1em 1em 0.5em;
	color: var(--red);
	margin-bottom: 2em;
}

a.newsLink{
	width: calc(100% - 2em);
	max-width: 1300px;
	margin: 1em auto 0;
	display: block;
	border-radius: 50px;
	background-color: var(--red);
	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-image:url("../img/tex3.png"), url("../img/tex_2.jpg");
	background-repeat: repeat-y, repeat;
	background-position: center top, left top;
	border-top: double 6px var(--white);
	border-bottom: double 6px var(--white);
	padding: 0 1em 8em;
	transition: all 0.5s 0s ease-out, opacity 0.5s 0s ease-out;
	opacity: 0;
	transform: translateY(2em);
}

.infoArea .contentsBox{
	padding: 3em 0 2em;
}


.infoArea.action{
		opacity: 1;
	transform: translateY(0);
}


.infoArea h2{
	margin:0 auto 1em;
	text-align: center;
	font-size: 160%;
	font-weight: bold;
	letter-spacing: 0.1em;
	display: flex;
    align-items: center;
	background-color: inherit !important;
	
	padding: 1.2em 0 0.5em;
	background-image: url("../img/select.png");
	background-position: center top;
	background-repeat: no-repeat;
	background-size:1.3em;
	font-family: "游明朝", YuMincho, "ヒラギノ明朝 Pro W6", "Hiragino Mincho Pro", "HGS明朝E", "ＭＳ Ｐ明朝", serif;
}

.infoArea h2:before,
.infoArea h2:after {
    content: "";
    flex-grow: 1;
    background-color: var(--black);
	border-top: 1px solid var(--gold);
    border-bottom: 2px solid var(--gold);
    height: 3px;
}

.infoArea h2:before {
    margin-right: 1rem;
}

.infoArea h2:after {
    margin-left: 1rem;
}



.titleListWrap{
	display: grid;
	grid-template-columns:repeat(2, 1fr);
	column-gap: 10px;
	row-gap: 1em;
}

.titleListWrap .imgSet{
	display: grid;
	grid-template-columns:repeat(3, 1fr);
	gap: 0.5em;
}

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

.titleBox::after {
	content: "";
	position: absolute;
	inset: 0;
	border-image-source: url("../img/fream2.png");
	border-image-slice: 30 fill;
	border-image-width:30px;
	pointer-events: none;
}


.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(--black);
	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(--gold);
	color:  var(--white);

	font-size: max(1em,12px);
	display:grid;
	align-items: center;
	border-radius: 6px;
	font-weight: bold;
}
.linkBox a:hover{
	background-color: var(--black);
	/*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 h2{
	padding: 1.2em 0 0;
}

.infoArea{
	padding: 3em 1em;
}

.infoArea .contentsBox{
	padding: 2em 0 0;
}
	
.titleListWrap{
	display: block;
}
	
.titleBox{
	margin-bottom: 2em;
}

.titleListWrap .imgSet{
	display: block;
}
	
.titleListWrap .imgSet img{
	margin-bottom: 0.5em;
}
	
	
	
}
@media (max-width: 480px) {



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

}