@charset "UTF-8";
/* CSS Document */

/* =========================================================
 TOPPAGE LAYOUT
========================================================= */

/* mainvisualArea
--------------------------------------------------------- */

#mainvisualArea {
	margin: 0px 0px 20px 0px;
	padding: 0px;
	border: 1px solid #A6A6A6;
}

#mainvisualArea #picupGround {
	margin: 0px;
	padding: 0px 0px 0px 1px;
	width: 333px;
	border-left: 1px solid #999;
	background: #F9F6F1;
}
#mainvisualArea #picupGround h2 {
	margin: 0px;
	padding: 0px;
}
@media screen and (min-width: 900px){
	.flash_sp{
		display: none;
	}
	.flash{
		display: block;
	}
}
@media screen and (max-width: 900px){
	#mainvisualArea {
		border: none;
	}
	#mainvisualArea img{
		width: 100%;
		height: auto;
	}
	#mainvisualArea #picupGround {
		width: 100%;
		padding: 0;
		border-left: none;
		background: none;
		max-width: 300px;
		margin: 0 auto;
	}
	#mainvisualArea #picupGround tr:nth-child(4) table tr{
		overflow: hidden;
	}
	#mainvisualArea #picupGround tr:nth-child(4) table td{
		float: left;
	}
	#mainvisualArea #picupGround tr:nth-child(4) table td:nth-child(1){
		width: 36.93%;
	}
	#mainvisualArea #picupGround tr:nth-child(4) table td:nth-child(2){
		width: 30.03%;
	}
	#mainvisualArea #picupGround tr:nth-child(4) table td:nth-child(3){
		width: 33.03%;
	}

	#mainvisualArea #picupGround .infoVideo{
		margin-bottom: 20px;
	}
	.flash{
		display: none;
	}
	.flash_sp{
		display: block;
	}
	.flash_sp video{
		width: 100%;
	}
}

/* contentArea
--------------------------------------------------------- */
@media screen and (max-width: 900px){
	#contentArea .space{
		display: none;
	}
}

/* topics
--------------------------------------------------------- */
#topics {
	margin: 0px 0px 20px 0px;
	padding: 4px;
	background: #EBEBEB;
}
#topics h2 {
	margin: -4px -4px 4px -4px;
}
#topics .box {
	margin: 0px;
	padding: 0px;
	border: 1px solid #AEA69D;
	overflow: hidden;
	display: flex;
}
#topics p.detail {
	margin: 0px;
	padding: 5px 10px 5px 10px;
	float: right;
	background: url(../images/arrow_topics.gif) no-repeat 2px center;
}

#topics .topics-section{
	width: 50%;
	float: left;
	background: linear-gradient(90deg,#deb386,#deb386 5px,#fff 5px,#fff);
}
#topics .topics-section__title{
	color: #fff;
	margin: 0;
	padding: 5px 12px;
	background: url("../images/h3_topics_bg.gif") left top/100% 100% no-repeat;
}
@media screen and (min-width: 900px){
#topics .box {
	display: flex;
}
#topics .topics-section{
/*	height: 270px;*/
}
}
@media screen and (max-width: 900px){
	#topics {
		background: none;
		padding: 0;
	}
	#topics .box{
		border: none;
		flex-wrap: wrap;
	}
	#topics .topics-section{
		float: none;
		width: 100%;
		margin-bottom: 10px;
	}
	#topics .topics-section-inner{
		background: #fff;
		border: 3px solid #e6af5c;
		border-top: 0;
		overflow: hidden;
	}
	#topics h2{
		margin: 0 0 20px;
	}
}

/* contentindex
--------------------------------------------------------- */
#contentindex {
	margin: 0px 0px 20px 0px;
	padding: 3px;
	background: #F1F0E7;
	border: 1px solid #CCC;
	display: flex;
	flex-flow: row wrap;
}
#contentindex .index {
	flex: 0 0 33.33%;
	max-width: 33.33%;
	padding: 3px;
	box-sizing: border-box;
}
#contentindex .index-inner{
	background: #f5f5fa;
	border: 2px solid #003a71;
	box-sizing: border-box;
	border-top: none;
	border-radius: 0 0 4px 4px;
	height: calc(100% - 38px);
	padding: 13px 8px 10px;
}
#contentindex .index h2 {
	margin: 0px;
}

#contentindex .index ul {
	margin: 0px;
	padding: 0;
	list-style: none;
	font-size: 93%;
	color: #666;
}

#contentindex .index ul li {
	margin: 0px;
	padding: 0px 0px 3px 10px;
	list-style: none;
	background: url(../images/arrow_contenindex_li.gif) no-repeat 2px 0.5em;
}
#contentindex .index ul li a {
	color:#333;
	text-decoration: none;
}
#contentindex .index ul li a:hover {
	text-decoration: underline;
}
@media screen and (max-width: 900px) {
	#contentindex {
		background: none;
		padding: 0;
		margin: 0;
		border: none;
		display: block;
	}
	#contentindex .index{
		margin-bottom: 10px;
		background: none;
		max-width: 100%;
		height: auto;
	}
	#contentindex .index-inner{
		border: 2px solid #003a71;
		border-top: none;
	}
	#contentindex .index ul{
		line-height: 1.5;
	}
	#contentindex .index ul li{
		padding: 0px 0px 10px 10px;
	}
}


/* banner
--------------------------------------------------------- */
#banner {
	margin: 0px;
	padding: 0px;
}
#banner #bannerBox {
	margin: 0px;
	padding: 12px 16px;
	background: #F3F3F3;
	border: 1px solid #CCC;
}
#banner #bannerBox table th,
#banner #bannerBox table td{
	padding-right: 14px;
}
#banner #bannerBox table th:last-child,
#banner #bannerBox table td:last-child{
	padding-right: 0;
}
#banner #bannerBox table tr td,
#banner #bannerBox table tr th{
	padding-bottom: 14px;
}
#banner #bannerBox table tr:last-child td,
#banner #bannerBox table tr:last-child th{
	padding-bottom: 0;
}
@media screen and (max-width: 900px) {
	#banner{
		margin: 0px;
		background: #F3F3F3;
		border: 1px solid #CCC;
	}
	#banner #bannerBox {
		padding: 1%;
		background: transparent;
		border: none;
	}
	#banner table{
		overflow: hidden;
	}
	#banner table th,
	#banner table td{
		width: 31.33%;
		padding: 1% !important;
		float: left;
	}
	#banner table tr:nth-child(2) td:first-child{
		clear: left;
	}
	#banner #bannerBox table td.is-link--top{
		display: none;
	}
	#banner #bannerBox img{
		width: 100%;
		height: auto;
	}
}
@media screen and (max-width: 768px) {
	#banner table tr:nth-child(2) td:first-child{
		clear: none;
	}
	#banner table th,
	#banner table td{
		width: 48%;
		padding: 1% !important;
	}
}


/* weather
--------------------------------------------------------- */
#weather {
	margin: 0px auto 15px auto;
	padding: 0px;
	border: 1px solid #CCC;
	background: #FAFAFA;
	max-width: 300px;
}
#weather .box {
	margin: 0px;
	padding: 0px 3px;
}


/* others
--------------------------------------------------------- */
#others {
	margin: 0px auto 15px auto;
	padding: 3px;
	border: 1px solid #CCC;
	background: #FAFAFA;
	max-width: 300px;
}
#others .box{
	margin-bottom: 3px;
}
#others .box:last-child{
	margin-bottom: 0;
}
@media screen and (max-width: 900px) {
	#others img{
		width: 100%;
		height: auto;
	}

}

/* access
--------------------------------------------------------- */
#access {
	margin: 0px auto 15px auto;
	padding: 0px;
	border: 1px solid #CCC;
	background: #FAFAFA;
	max-width: 300px;
}
#access h3{
	border-bottom: 1px solid #CCC;
}
#access .box {
	margin: 0px;
	padding: 7px;
}
#access .box .infobox {
	margin: 0px;
	padding: 0px 0px 0px 4px;
	border-left: 3px solid #90BC52;
	font-size: 85%;
	color: #333;
}
#access .box .infobox span.large {
	font-size: 115%;
	font-weight: bold;
	color: #F60;
}
@media screen and (max-width: 900px) {
	#access img{
		width: 100%;
		height: auto;
	}
}