@charset "UTF-8";

html {
  font-size:62.5%;
  height:100%;
}
body {
  font-size:1.4rem;
  background:#000;
  margin: 0;
  padding: 0;
  height:100%; 
}
body > .box {
	height: auto;
}
*{
	padding:0;
	margin:0;
}
*, *::before, *::after {
  box-sizing:border-box;
}
.clearfix::after {
  content:'';
  display:block;
  clear:both;
}

/*アニメーション*/
.effect-fade {
	opacity:0;
	transform:translate(0, 45px);
	transition:all 3500ms;
}

.effect-fade.effect-scroll {
	opacity : 1;
}
.mbr {display:none;}
.pcbr {display:block;}
@media (max-width: 800px) {
	.mbr {display:block;}
	.pcbr {display:none;}
}
/*===============================

トップページ

===============================*/
#contents {
	width:100%;
	height:100%;
	background:url("../img/top_bg01.jpg");
	background-size: cover;
	background-repeat:no-repeat;
	background-position:0 -45px;
}

.content_top {
	width:100%;
	height:auto;
	position:relative;
	
}
.sns_icon {
	width:100%;
	height:auto;

}
.sns_icon img{
	position:absolute;
	top:20%;
	left:7%;
}


/*ツインパック情報*/
.topbottom {
	width:100%;
	height:520px;
	position:relative;
}
div.twin_contents {
	width:320px;
	position:absolute;
	left:auto;
	top:auto;
	bottom:1px;
	right:500px;

}
.twin_contents img{
	width:320px;
}
@media (max-width: 1800px) {
	.topbottom {height:420px;}
}
@media (max-width: 1700px){
	div.twin_contents {
		width:320px;
		position:absolute;
		left:auto;
		top:auto;
		bottom:1px;
		right:200px;
	}
}
@media (max-width: 1200px){
	div.twin_contents {
		width:320px;
		position:absolute;
		left:auto;
		top:auto;
		bottom:1px;
		right:50px;
	}
}
@media (max-width: 900px) {
	.topbottom {display:none;}
}
/*==left01====================*/
.left01 {
	max-width:675px;
	width:24%;
	float: left;
}

/*==left02====================*/
/*==メニュー==*/
.left02 {
	max-width:675px;
	width:24%;
	float: left;
	position:relative;
	height:500px;

}
.menu01 {
	position:absolute;
	list-style: none;
	top:40px;
	left:70px;
}
.menu01 img{max-width:60px;}
.menu01 ul {width:100%;}
.menu01 li{display: inline-block;}
.menu01 li:first-child{
	margin-left:0px;
}
/*==ロゴ==*/
.toplogo {display:none;}
.toplogo img {
	max-width:300px;
}
/*==right01====================*/
.right01 {
	max-width:675px;
	width:24%;
	float: left;
	/*background:rgba(0,0,255,0.5);*/
	height:500px;	
}
.posterimage img {
	max-width:280px;
	margin-left:5px;
}
.twin_box_m {display:none;}
.cam_box_m {display:none;}
@media (max-width: 900px) {
	.cam_box_p {display:none;}
	.cam_box_m {
		display:block;
		margin:auto;
		text-align:center;
		margin-top:10px;
	}
	.cam_box_m img{width:95%;}
}
@media (max-width: 500px) {
    .twin_box_m{
		display:block;
		position:absolute;
		top:180px;
		right:0;
	}
}
/*==right02====================*/
/*==最新情報==*/
.right02{
	max-width:675px;
	width:26%;
	float: right;
	/*background:rgba(255,0,0,0.5);*/
	height:500px;
	margin-top: 280px;
	margin-right: 20px;
	/*position: absolute;
	right:10px;
	top:350px;*/
}
.news_title {
	text-align:center;
	/*margin-top:80px;*/
	margin-top:80px;
}
.news_title_m {display:none;}
.news_box {
	width: 100%;
	height: 250px;
	overflow-y: scroll;
	background:rgba(243,243,243,0.8);
	white-space: normal;
	border-radius:5px;
	box-shadow:0px 0px 8px 3px #ccc inset;
	font-size:16px;
	color:#454779;
	margin:auto;

}
.news_box dl {padding:10px;}
.news_box dt {
	font-weight:bold; 
}
.news_box dd {margin-bottom:20px;}

/*==スクロールバーのカスタマイズ==*/
/*==スクロールの幅の設定==*/
.news_box::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
/*==スクロールの背景の設定==*/
.news_box::-webkit-scrollbar-track {
  border-radius: 5px;
  box-shadow: 0 0 4px #ddd inset;
}
/*==スクロールのつまみ部分の設定==*/
.news_box::-webkit-scrollbar-thumb {
  border-radius: 5px;
  background: #34898f;
}

/*==モーダル==*/
.js-modal-open {display:block;}
.remodal_m{display:none;}
.modal{
    display: none;
    height: 100vh;
    position: fixed;
    top: 0;
    width: 100%;	z-index:1;
}
.modal__bg{
    background: rgba(0,0,0,0.7);
    height: 100vh;
    position: absolute;
    width: 100%;
}
.modal__content{
    left: 50%;
    padding: 40px;
    position: absolute;
    top: 50%;
    transform: translate(-50%,-50%);
    width: 60%;

}
.modalimage img{width:80%;}
.closeimage{
	position: absolute;
	top: 20%;
	left:0;
	width: 60%;
}


/*==900以下====================*/
@media (max-width: 1800px) {
	#contents {
	width:100%;
	background-position: 30% 75%;
	background-size: cover;
	}
}
@media (max-width: 1200px) {
	.menu01 {
		width:100%;
		position:relative;
		top:40px;
		left:0;
	}
	#contents {
	width:100%;
	background:url("../img/top_bg03.jpg");
	background-size: cover;

	}
}
@media (max-width: 900px) {
	#contents {
	width:100%;
	background-position: 35% 75%;
	background-size: cover;
	height:1000px;

	}
	.menu01 {
		width:80%;
		position:relative;
		top:40px;
		left:180px;
		
	}
	.menu01 ul {width:100%;}
	.menu01 li:first-child{
	margin-left:0px;
	}
	
	.menu01 li br{display:none;}
	.left01 {display:none;}
	.left02 {clear:both;width:100%;height:540px;}
	.right01 {height:100%;}
	.right01 img{
		position:absolute;
		right:0px;
		top:auto;
		width:100%;
	}
	.right02 {width:40%;}
	.news_title {
		text-align:center;
		margin-top:80px;
		
	}
	.sns_icon {
		position:absolute;
		top:auto;
		right:10%;
		width:30%;
	}
	.modal__content{
    left: 60%;
    padding: 40px;
    position: absolute;
    top: 50%;
    transform: translate(-50%,-50%);
    width: 100%;}
	.modalimage img{width:100%;}
}
@media (max-width: 800px) {
	#contents {
		background:url("../img/top_bg05.jpg");
		background-position: top;
		background-size: cover;
		height:1800px;
		position:relative;
	}
	.content_top {height:100%;}
	.menu01 {
		width:80%;
		position:relative;
		top:20px;
		left:100px;
	}
	.toplogo {display:block;}
	.toplogo img{max-width:75%;}
	.right01 {
		position:absolute;
		right:0;
		top:200px;
	}
	.right02{
	width:100%;
	float:none;
	/*background:rgba(255,0,0,0.5);*/
	margin:auto;
	}
	.news_title {
		text-align:center;
		margin-top:0px;
	}
	.news_box {
	width: 90%;
	height: 200px;
	overflow-y: scroll;
	background:rgba(243,243,243,0.8);
	white-space: normal;
	border-radius:5px;
	box-shadow:0px 0px 8px 3px #ccc inset;
	font-size:16px;
	color:#454779;
	margin:auto;
	}
	.remodal_m {display:block;}
	.js-modal-open {display:none;}
}
@media (max-width: 600px) {
    html {height:auto;}
	#contents {
		background:url("../img/top_bg06.jpg");
		background-position: top;
		background-size: contain;
		background-repeat:no-repeat;
		height:100%;

		position:relative;
	}
	.content_top {height:100%;}
	.mtop{display:flex;}
	.menu01 {
		width:75%;
		position:relative;
		top:8px;
		left:10px;

	}
	.menu01 ul {
		position:relative;
		top:20px;
		left:0px;
	}
	.menu1_im {max-width:45px;}
	.menu1_im img{max-width:50px;}
	/*.left02 li{clear:both;width:100%;height:100%;}*/
	.left02 {float:none;}
	
    .right01 {
		float:none;
		position:absolute;
		top:10px;
	}
	.right01 img{width:170px;}
    .sns_icon  img{width:90px;}
	.sns_icon {
		position:absolute;
		top:380px;
		right:0;
	}
	.right02 {margin-top:50px;height:auto;}
	.news_title{display:none;}
	.news_title_m {
		display:block;
		text-align:center;
	}
}
@media (max-width: 420px) {
	.sns_icon  {width:100px;}
	.sns_icon img{
		position:absolute;
	
		top:0;

	}
}


/*追加下
.bnr_sonota {
	text-align:center;
	position:fixed;
	bottom:50px;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
	z-index:999;
	display:flex;

}
.sbnr_1 {


}

.bnr_sonota img {
	width:280px;
}*/


.bnr_sonota_p {
	display:flex;
	flex-wrap: wrap;
	text-align:center;
	margin:auto;
	justify-content:center;
}
.bnr_sonota_p img{
	text-align:center;
	margin:auto;
	width:280px;
}
.sbnr_1,.sbnr_2 {padding:0 5px;}
.bnr_sonota {display:none;}
@media (max-width: 800px) {
	.bnr_sonota_p {display:none;}
	.bnr_sonota {
		position:static;
		display:block;
		transform:none;
		margin:auto;
		text-align:center;
	}
	.bnr_sonota img {
		width:95%;
	}
	.sbnr_1,.sbnr_2 {padding:0;}
}

/*追加パッチ*/
.patchbnr img{
	width: 420px;
	position:absolute;
	top:55px;
	right:50px;
}
@media (max-width: 800px) {
	.patchbnr img{
		width: 90%;
		position:static;
	}
	.patchbnr {	margin: auto; text-align: center;}
}



/*明朝*/
footer {
	font-family: "Sawarabi Mincho";
	color:#000;
	text-align:center;
	padding:2px 0;
	background:#000;
	color:#ddd;
	padding-top:10px;
	width:100%;
}
.footer_i img{max-width:120px;}
footer a {
	color:#ddd;
	text-decoration:none;
}
.footerbox{font-size:0.4em;}

@media (max-width: 900px) {
	footer {position:static;}
}
@media (max-width: 600px) {
	footer {position:relative;}
}