@charset "UTF-8";

.container {
//	width: 100%;
//	background: midnightblue;
}
#wrapper {
	width: 100%;
	background: midnightblue;
}
#sub__title {
	margin: 0 auto;
	width: 90%;
	text-align: center;
}
#sub__title h2 {
	display: inline-block;
	font-family: 'Zen Kaku Gothic New';
	font-size: 2.8rem;
	line-height: 2;
	color: pink;
}
#dateSet {
	float:right;
	width:30%;
	text-align:right;
}
#date_today{
	font-size:1.2rem;
	color:orangered;
	text-align:right;
}
#dateSet p {
	width: 100%;
	font-size:1rem;
	text-align: right;
}
strong {
	font-weight: bold;
	color: red;
}
#contents{
	width:100%;
	margin:0 auto;
	background: url(../top/Christmas-Tree.png);
	background-position: center top;
	background-repeat: no-repeat;
	background-size: contain;
}
.info__box {
	display:flex;
	justify-content:space-between;
	margin: 0 auto;
	width:96%;
	color: peachpuff;
}
.info__box p{
	font-size:1.1rem;
	line-height:1.6em;
}
.slide video {
	width: 100%;
}
.slide{
//	margin:0 auto;
	width:40%;
}
.slide p{
	display: inline;
	color: azure;
}
.news_box{
	margin:1% 0 0;
	width:40%;
	border:solid 2px #6C9;
	border-radius:5px;
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
	background: rgba(255,255,255,0.2);;
	box-sizing:border-box;
}
.info__box span{
	color:red;
}
.info__box h2{
	font-size:1.2rem;
	line-height:1.6em;
	color:#FFF;
	text-align: center;
	background-color:#6C9;
}
.info__box h3 {
	font-size:1.1rem;
	line-height:1.6em;
}
.info__box ul{
	list-style-type:disc;
	padding-left:30px;
}
.info__box li{
	font-size:0.95rem;
	line-height:1.6em;
	text-align:left;
}
/*
.news_box li.space{
	padding: 0;
	list-style:none;
}
*/
.topics__box {
	margin:1% 0 0;
	width:30%;
	border:solid 2px #6C9;
	border-radius:5px;
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
	background: rgba(255,255,255,0.2);
	box-sizing:border-box;
}
.topics__box section{
	float:left;
	padding:2%;
	width:76%;
	color: peachpuff;
}
.topics__box p {
	margin-top:2%;
	font-size:0.95rem;
	line-height:1.6em;
}
.topics__box img {
	float:right;
	margin:2% 2% 0 0;
	width:16%;
}
.info__box .news_box comments {
	margin-right: 10px;
	padding-top: 10px;
	padding-left: 20px;
}
.info__box .bx-wrapper{
	width:100%;
}
.subInfo{
	display:flex;
	justify-content:space-between;
	margin:2% auto;
	width:98%;
}
.subInfo section{
	width:24%;
	margin: 0 0 10px 0;
	border: solid 1px #F33;
	border-radius: 5px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	-o-border-radius: 5px;
	background: rgba(255,255,255,0.2);
}
.subInfo section h3{
	padding:2%;
	font-size:0.9rem;
	color:#FFF;
	line-height:1.4em;
	text-align:center;
	background:#F33;
}
.subInfo section h3 a{
	background:#F33;
	color: #FFF;
}
.subInfo section h3 a:hover{
	color:#B4CEFC;
}

.subInfo section ul {
	padding:2%;
}
.subInfo section li{
	font-size:0.9rem;
	line-height:1.4em;
	padding:2%;
}
.subInfo section p {
	font-size:0.9rem;
	line-height:1.4em;
	padding:2%;
	color: peachpuff;
}
.subInfo section img {
	margin-left:4%;
}


/*Responsive=====================================================*/

@media screen and (max-width:1040px){
	.slide p{
//		margin-top:2%;
	}
	.slide{
//		margin-top:2%;
	}
	#h_group h3{
		width:40%;
		font-size:1.4rem;
	}
	nav ul#menu li img{
		margin-bottom:2%;
	}
}

@media screen and (max-width:970px){
	#topics{
//		width:80%;
	}
	#topics ul {
//		width: 96%;
	}
	#topics li {
//		font-size: 1.2rem;
	}
	.slide p{
//		margin-top:5%;
	}
	.slide{
		margin-top:3%;
	}
	#dateSet {
		width:40%;
	}
	#contents{
		background-position: center center;
	}
	#sub__title {
//		margin: 0 auto;
//		width: 90%;
//		text-align: center;
	}
	#sub__title h2 {
//		display: inline-block;
		font-size: 2.8rem;
		line-height: 1.2;
	}
}

@media screen and (max-width:780px){
/*
	#dateSet {
		float:none;
		width:100%;
	}
*/

	.info__box {
		flex-direction:column;

	}
	.slide{
		margin:2% auto 0;
		width:90%;
	}
	.slide p{
//		padding-bottom:3%;
	}
	.news_box{
		margin:4% auto 0;
		width:100%;
	}
	.news_box li{
		font-size:1rem;
		line-height:1.6em;
	}
	.news_box p {
		margin-top:1%;
		font-size:1rem;
		line-height:1.6em;
	}
	.topics__box {
		margin: 0 auto 2%;
		width:90%;
	}
	#contents{
		background-position: center top 60%;
		background-repeat: no-repeat;
		background-size: contain;
	}
	#bottom__info {
		margin: 140% auto 20px;
		width: 96%;
	}
	.subInfo{
//		margin: 10px auto 20px;
//		width:96%;
	}
	.subInfo section{
		width:49%;
	}
}


@media screen and (max-width:500px){
	#topics h4{
		font-size:1.2rem;
		line-height:1.4em;
	}
	.slide p{
//		display: block;
		margin: 0;
		font-size: 0.9rem;
	}
	#contents{
		background-position: center top 65%;
	}
	#bottom__info {
		margin: 140% auto 20px;
		width: 96%;
	}

}