@import "default.css";

@charset "utf-8";

/* CSS Document */

html {
	background-color:#007878;
}


body {
	font-family:'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'ＭＳ Ｐゴシック',sans-serif;
	color:#000;
	font-size:12px;
	height: 100%;
	letter-spacing: 0;
	background-color:#DFFFBF;
}

.txt11{
	font-size: 11px;
	}

.txt12{
	font-size: 12px;
	}

.txt13{
	font-size: 13px;
	}
	
.txt14{
	font-size: 14px;
	}	

.txt16{
	font-size: 16px;
	}

.txt18{
	font-size: 18px;
	}

.txt20{
	font-size: 20px;
	}
	
.txt22{
	font-size: 22px;
	}
	
.txt24{
	font-size: 24px;
	}
	
.txt26{
	font-size: 26px;
	}
	
.txt28{
	font-size: 28px;
	}
	
.txt30{
	font-size: 30px;
	}
	
.txt32{
	font-size: 32px;
	}						

.m_0{
	margin: 0 !important;
	}

.m_5{
	margin: 5px auto!important;
	}
	
.top0{
	margin-top: 0px !important;
	}		

.top10{
	margin-top: 10px !important;
	}

.top20{
	margin-top: 20px !important;
	}
	
.top25{
	margin-top: 25px !important;
	}	

.top30{
	margin-top: 30px !important;
	}
	
.top40{
	margin-top: 40px !important;
	}
	
.top50{
	margin-top: 50px !important;
	}
	
.top60{
	margin-top: 60px !important;
	}
	
.top70{
	margin-top: 70px !important;
	}
	
.top80{
	margin-top: 80px !important;
	}
	
.top-2{
	margin-top: -2px !important;
	}
	
.top-10{
	margin-top: -10px !important;
	}	
	
.top-20{
	margin-top: -20px !important;
	}
	
.top-40{
	margin-top: -40px !important;
	}	
	
.top-50{
	margin-top: -50px !important;
	}
	
.top-65{
	margin-top: -65px !important;
	}
	
.top-85{
	margin-top: -85px !important;
	}			
	
.top-120{
	margin-top: -120px !important;
	}		

.bottom10{
	margin-bottom: 10px !important;
	}
	
.bottom20{
	margin-bottom: 20px !important;
	}	

.bottom30{
	margin-bottom: 30px !important;
	}
	
.bottom35{
	margin-bottom: 35px !important;
	}	
	
.bottom40{
	margin-bottom: 40px !important;
	}

.bottom50{
	margin-bottom: 50px !important;
	}
	
.bottom60{
	margin-bottom: 60px !important;
	}

.bottom70{
	margin-bottom: 70px !important;
	}

.bottom80{
	margin-bottom: 80px !important;
	}
	
.orange{
	color:#e85202 !important;
	}	
	
.red{
	color:#F00 !important;
	}	
	
.bold{
	font-weight: bold !important;
	}
	
.center{
	text-align: center;
	}	
	
.f_left{
	float: left;
	}
	
.c_both{
	clear: both;
	}
	
.after:after{
  display: block;
  clear: both;
  content: "";
}

br.sp_br{
	display: none;
	}


#container{
	margin:0 auto;
	padding:0;
	position: relative;
	overflow:hidden;
}

#main {
	width:1200px;
	margin:0 auto;
}

#mainInner h2 {
    margin: 9px 0 23px 21px;
}


#topicPath {
	padding:5px 0 7px 16px;
	line-height:20px;
	font-size:12px;
	text-align:left;
	overflow:hidden;
	color:#333;
}

#topicPath a {
	color:#333;
	text-decoration:none;
}

#topicPath ol{
}

#topicPath li{
	float:left;
}


#top_left {
	width:400px;
	float:left;
	margin:0;
	padding:0;
}


#top_center {
	width:400px;
	float:left;
	margin:0;
	padding:0;
}

#top_right {
	width:400px;
	float:left;
	margin:0;
	padding:0;
}



#top_left .btn ,
#top_center .btn ,
#top_right .btn {
	margin:0;
	padding:0;
}

#top_left .topics {
	margin:0;
	padding:0;
	background-image:url(../image/topics_bg.jpg);
	background-repeat:no-repeat;
	width:400px;
	height:300px;
	overflow:hidden;
}

#top_left #topi_title {
	margin:11px 0 0 9px;
	padding:8px 0 0 0;
	width:377px;
	height:39px;
	background-image:url(../image/topics_title.png);
	background-repeat:no-repeat;
	background-position:left;
	text-align:right;
}

#top_left #inframe_newsrelease {
	overflow: hidden;
	padding: 0px;
	width: 316px;
	height: 295px;
	margin: 20px 0 0 0;
}


/*2017/05/29本城追加*/
.topics1{
	position: relative;
	background-color: #fff;
	height: 375px;
	padding: 0 40px 0 17px;
}

.topics2{
	position: relative;
	background-color: #C0E0E0;
	height: 375px;
	padding: 0 40px 0 17px;
}

.t_1{
 padding-top: 25px;
}

#topi_ichiran{
	position: absolute;
	top: 5%;
	left: 75%;
}

iframe{
	width: 330px;
	height: 325px;
	padding:  5px;
}

#top_left p.t_img img{
	position:  absolute;
	bottom: 4%;
	right: 2%;
}





/*ヘッダー*/

#header{
	background-color:#007878;
	overflow:hidden;
}

#header #inner{
	width:1200px;
	padding:0;
	margin:0 auto;
	overflow:hidden;
}


#header h1 {
	width:805px;
	float:left;
	font-weight:normal;
	text-align:right;
	font-size:10px;
	padding:0;
	margin:2px 0 7px 78px;
	height:20px;
	line-height:20px;
	display:block;
	color:#FFF;
}


#header #headerTitle {
	margin:7px 0 0 16px;
	width:300px;
	padding:0;
	float:left;
	overflow:hidden;
}


#layerMenu {
	height:20px;
	float:left;
	margin:0 0 0 130px;
	padding:0 0 5px 0;
}


#layerMenu li {
	display:block;
	float:left;
	height:20px;
	margin:0 24px 0 0;
	overflow:hidden;
}

#layerMenu li.last {
	display:block;
	margin:0;
}


#layerMenu li a {
	display:block;
	color: #fff;
}

#layerMenu li a:hover{
	color: #EDE8B7;
}


/*フッター*/

#footer {
	clear:both;
	float:none;
	background-color:#007878;
	min-height: 100px;
}

#footer p{
	font-size: 16px;
	margin-bottom: 10px;
	line-height: 130%;
}

#footer i{
	color: #83d0e4;
}


#footer #footerInner {
	position: relative;
	width:945px;
	margin:0 auto;
	padding:20px 15px;
	text-align:center;
	color:#FFF;
}

#footer #footerInner .pagetop {
	position: absolute;
    left: 940px;
}

#footer #footerInner .pagetop a{
	font-size: 14px;
	display: block;
	color: #fff;
	padding: 7px;
	border: 1px solid #fff;
}

#footer .f_1{
	float: left;
}

#footer .f_2{
	float: left;
	margin-left: 100px;
	margin-top: 5px;
}

#footer .f_3{
    padding-top: 15px;
}

p#copyright {
	padding-top:25px;
	width:770px;
	height:30px;
	line-height:30px;
	text-align:center;
	color:#FFF;
	display:block;
}


@media screen and (min-width : 751px) {
#openMenu {
    display:none; /*通常時は非表示にしておきます*/
    }
	
	
#mainInner {
    overflow: hidden;
    margin: 0 auto;
    padding: 0;
    width: 1200px;
}	
	
}



@media screen and (min-width : 320px) and (max-width : 750px) {
img{
		width: 100%;
		vertical-align: bottom;
		line-height: 0;
		font-size: 0;
	}
	
br.sp_br{
	display: inherit;
	}	
	
/*ヘッダー*/
#header {
    background-color: #007878;
    padding: 25px 0;
}	
	
#header #headerTitle {
    margin: 0 0 0 12px;
    padding: 0;
    float: left;
}	
	
	
#header #headerTitle img{
	width: 80%;
}	
	
	
#openMenu {
    position:absolute; /*bodyに対しての絶対位置指定です*/
    right:20px;
    top:30px;
    width:30px;
    height:25px;
    cursor:pointer}
#openMenu div {position:relative} /*spanの絶対位置指定の親にします*/
#openMenu span {
    display:block;
    position:absolute; /*#navToggle div に対して*/
    width:100%;
    border-bottom:solid 3px #fff;
    -webkit-transition: .35s ease-in-out;
    -moz-transition: .35s ease-in-out;
    transition: .35s ease-in-out}
#openMenu span:nth-child(1) {top:0}
#openMenu span:nth-child(2) {top:11px}
#openMenu span:nth-child(3) {top:22px}
	
	
#layerMenu {
	display: none;
    position: absolute;
    top: 84px;
    left: 0;
    width: 100%;
    height: 100%;
    font-size: 18px;
    z-index: 9999;
	margin:  0;
}
	
#layerMenu ul {
    border-top-width: 1px;
    border-top-style: solid;
    border-top-color: #007878;
}
	
#layerMenu ul li {
	float: none;
	height: auto;
    list-style: none;
    background-color: #fff;
    border-bottom-width: 1px;
    border-bottom-style: solid;
    border-bottom-color: #007878;
	margin: 0;
}
	
#layerMenu ul li a {
    position: relative;
    padding: 10px;
    text-decoration: none;
    color: #007878;
    display: block;
}	
	

/*コンテンツ*/	
#main {
    width: auto;
    margin: 0 auto;
}
	
#main2 {
	width: auto;
	padding-left: 15px;
	padding-right: 15px;
}
	
#mainInner {
    margin: 0 auto;
    padding: 0;
    width: auto;
}
	
#mainInner h2 {
    margin: 9px 0 20px 0;
}
	
#mainInner h2 img{
    width: 80%;
}
	
#mainInner h3 img{
    width: 30%;
}	
	
#top_left p.t_1 img{
	width: 77%;
}
	
#top_left p.t_2 img{
	width: 78%;
}	
	
.topics1 {
    position: relative;
    background-color: #fff;
	height: auto;
    padding: 24px 40px 81px 13px;
}
	
.topics2 {
    position: relative;
    background-color: #C0E0E0;
	height: auto;
    padding: 24px 40px 40px 13px;
}
	
.t_1 {
    padding-top: 0;
}
	
.t_2 {
    padding-bottom: 10px;
}	
	
#top_left p.t_img img{
	width: 10%;
	bottom: 3%;
    right: 5%;
}
	
#top_left #inframe_newsrelease {
    overflow: hidden;
    padding: 0px;
    width: 100%;
    height: auto;
    margin: 20px 0 0 12px;
}	
	
#top_left {
	float: none;
	width: 100%;
	margin:0;
	padding:0;
}

#top_center {
	float: none;
	width: 100%;
	margin:0;
	padding:0;
}

#top_right {
	float: none;
	width: 100%;
	margin:0;
	padding:0;
}

	
/*フッター*/
#footer{
	padding: 5px;	
	}
	
#footer p {
    font-size: 16px;
    margin-bottom: 15px;
}	
	
#footer .f_1{
	float: none;
	margin-top: 15px;
}

#footer .f_2{
	float: none;
	margin-left: 0;
    margin-top: 25px;
}
	
#footer #footerInner {
	width: auto;
	padding: 40px 15px 20px;
}
	
#footer #footerInner .pagetop {
    position: absolute;
    left: 75%;
    top: 5%;
}	
	
#footer #footerInner img{
	width:90%;	
	}	
	
	
}