@charset "utf-8";
/* CSS Document */
/*-----------------------------------*/
body{
	background-image: url("../img/bg_movie.jpg");
		background-size: 30% auto;

}
/*----------------------------------------------------------------
フッター
-----------------------------------------------------------------*/
footer{
	color: var(--boxBg);
	padding-bottom: 50px;
	text-align: center;
	padding-top: 2em;
}

footer #copy{
	padding: 1em 0;
	font-size: 12px;

}
footer #snsArea {
	padding:1em 0;
	
}
footer #snsArea img{
	width: 40px;
}
footer #linkArea{
	padding-top: 1em;
}
footer #linkArea a{
	width: 32.8%;
	max-width: 202px;
	margin: 2px 0.25%;
	display: inline-block;
	vertical-align: top;
	border: var(--boxBg) 1px solid;
}
footer img.txt{
	width: calc(100%-2em);
	max-width: 700px;
}
footer .txtLink{
	padding: 1em;
	color: var(--boxBg);
	display: inline-block;
	border-left: var(--boxBg) 1px solid;
	border-right: var(--boxBg) 1px solid;
	margin-bottom: 1em;

}
footer .txtLink:hover{
	color: var(--orange);
}

h1.second{
	width: 50%;
	max-width: 760px;
	text-align: center;
	margin: 0 auto;
	padding: 1em 0;
}


a.topLink{
	display: block;
	margin: 1em 0;
	background-color: var(--orange);
	color: var(--darkBrown);
	padding: 1em;
	border-radius: 6px;
	text-align: center;
	font-weight: bold;
}
a.topLink:hover{
background-color:  var(--darkBrown);
	color: var(--boxBg);
}
a.topLink span:not(.br2):after{
	content: "";
	width: 1.2em;
	height: 1em;
	background-image: url(../img/link_icon_b.png);
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	position: relative;
	display:inline-block;
	vertical-align:middle;

}
a.topLink:hover span:after{
	background-image: url(../img/link_icon_w.png);
}
.titleListWrap{
	display: grid;
	grid-template-columns:repeat(2, 1fr);
	column-gap: 10px;
	row-gap: 1em;

}
.titleBox{
	background-color:  var(--boxBg);
	border-radius: 6px;
	padding: 0.5em;
	
}
.titleBox .title,.titleNewsBox .title{
	padding: 0.5em;
	border-top: var(--darkBriwn) 2px solid;
	border-bottom: var(--darkBriwn) 2px solid;
	text-align: center;
	font-size:max(0.8em,11px);
	margin-top: 0.5em;
	font-weight: bold;
}
.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(--orange);
	color:  var(--darkBrown);

	font-size: max(1em,12px);
	display: block;
	border-radius: 6px;
	font-weight: bold;
}
.linkBox a:hover{
	background-color: var(--green);
	color: var(--boxBg);
	/*color: #fff;*/
}
.titleNewsBox{
	text-align: center;
	padding: 1em;
	border-radius: 6px;
	margin-top: 4em;
	background-color:  var(--boxBg);

}
.titleNewsBox h2{
	background-color: var(--green);
	color:  var(--boxBg);
	padding: 0.5em 1em;
	border-bottom: 0.5em var(--orange) solid;
	border-radius: 6px;
	font-size: 1.2em;
	line-height: 1.5em;
	font-weight: bold;
}
.titleNewsBox .img{
	background-color: #fff;
	margin: 0.5em 0 0;
}
.titleNewsBox .titleBox{
	background-color:var(--baseBg) ;
}
@media (max-width: 480px) {
.wideLinkBox{
	grid-template-columns:repeat(2, 1fr);

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

}
h1.second{
	width: 80%;
}

}