/*
Theme Name: HOP
Author: HOP team
Author URI: http://www.hopper1.co.jp/
Version: 1.0

-------------------------------------------------------------- */

/*-------------------------------
    general style
-------------------------------*/
html {
   height:100%;
}

body {
   color: #000;
   font-family: "Hiragino Mincho Pro","ヒラギノ明朝 Pro W3",ＭＳ Ｐ明朝,serif;
   height:100%;
   margin:0;
   padding:0;
   overflow-y:scroll;
	background-color: #eeeee7;
}

a {
    color: #000;
    text-decoration: none;
}

a:hover {
    color: #000;
    text-decoration: none;
}

a:active {
    color: #000;
    text-decoration: none;
}

a:visited {
    color: #000;
    text-decoration: none;
}

p {
   margin:0;
}

img {
   border:none;
}

#container {
    overflow: hidden;
    width: 1481px;
	position:relative;
	margin:0 auto;
	min-height:100%;
	background-color: white;
}

* html div#continer {
	height:100%;
}

#header {
    height: 264px;
    overflow: hidden;
	background: white url(headerback.gif) no-repeat;
	width: 100%;
	margin-right: 0;
	margin-left: 0;
}

h1.site-logo {
    height: 68px;
    width: 124px;
    float:left;
    margin:0;
	padding: 45px 0 0 45px;
}

#header h1.site-icon a {
	clear: both;
	float: left;
	padding-left: 73px;
	padding-top: 40px;
}

ul.h-nav {
    height: 10px;
    float: right;
    list-style: none;
    padding: 11px 50px 0 0;
    margin:0;
	position: relative;
	top: 60px;
}

ul.h-nav li {
   float: left;
   margin: 0;
   padding: 0;
}

ul.h-nav li a {
   display: block;
   background-repeat:no-repeat;
   height:10px;
}

li#hm1 a {
   background-image:url("menu_f_off.gif");
   width:41px;
   margin:0 35px 0 0;
}

#header ul.h-nav li a img {
	margin-left: 45px;
}

li#hm2 a {
   background-image:url("menu_h.gif");
   width:18px;
   margin:0 35px 0 0;
}

li#hm3 a {
   background-image:url("menu_yd.gif");
   width:38px;
   margin:0 35px 0 0;
}


#footer {
   clear:both;
   width:1130px;
   height:130px;
   z-index:1;
   background-image:url("images/footer.gif");
   background-repeat:no-repeat;
   position:absolute;
   bottom:10px;
}

#index-footer {
   clear:both;
   width:1484px;
   z-index:1;
   background-image:url("footer.gif");
   background-repeat:no-repeat;
   position:absolute;
	text-indent: -9999px;
	height: 66px;
	bottom: 0px;
}

/*-------------------------------
    index style
-------------------------------*/
.home #main {
   z-index:2;
   overflow:hidden;
   margin:0;
   padding:0 0 80px 0;
}

#main {
   z-index:2;
   overflow:hidden;
   margin:0;
   padding:0 0 130px 0;
}

#wrap1 {
   margin:0 0 40px 0;
   overflow: hidden;
}

#topsea {
   width:1481px;
   height:311px;
   float:left;
   clear:both;
}

#main-link {
   width:129px;
   height:570px;
   float:right;
}

p.hopfacebook {
   margin:0 0 52px 0;
   height:185px;
   width:129px;
}

p.terakoya {
   margin:0 0 50px 0;
   width:128px;
   height:103px;
}

p.neco {
   margin:0;
   width:128px;
   height:180px;
}

#wrap2 {
   margin:0 0 40px 0;
   overflow: hidden;
}

#flagcover {
   width: 850px;
   height:632px;
   float:left;
   clear:both;
	padding-top: 50px;
	padding-left: 60px;
}

#flagcover a.nonmover img {
	margin-right: 40px;
	margin-bottom: 20px;
}

#dejima {
   width:457px;
   float:right;
	padding-top: 50px;
	margin-right: 60px;
}

p#e {
	text-indent: -99999px;
	width: 463px;
	height: 431px;
	background: url(copy_e.gif) no-repeat;
	padding-bottom: 10px;
}

p#j {
	text-indent: -99999px;
	width: 467px;
	height: 201px;
	background: url(copy_j.gif) no-repeat;
	margin-bottom: 30px;
}


#wrap3 {
   width:100%;
   margin:0;
   padding:0;
}

#bottom-link {
   width:100%;
   height:87px;
   text-align:right;
   overflow: hidden;
}

p.kadc {
   margin:0;
   padding:0;
   float:right;
   z-index:3;
}

p.rescue_t {
   margin:0 0 0 20px;
   padding:0;
   float:right;
   z-index:3;
}

/*-------------------------------
    category style
-------------------------------*/
ul#category-menu {
   float:left;
   width:100px;
   margin:30px 0 0 0;
   padding:0 0 0 150px;
   list-style:none;
}

ul#category-menu li {
   width:100px;
   height:11px;
   margin:0 0 20px 0;
}

#post-list {
   width:670px;
   float:right;
   z-index:3;
   margin:0 0 20px 0;
}

#post-list table {
    margin:0;
	padding:0;
	border-collapse:collapse;
}

#post-list table td {
   padding:30px;
   width:50px;
   height:50px;
   border:1px #EDEDED solid;
}

#post-list table img {
   display:block;
}

/*-------------------------------
    page style
-------------------------------*/

/*Contact*/
.map {
   width:711px;
	margin-right: auto;
	margin-left: auto;
	padding-bottom: 50px;
}

/*Link*/
#links {
   width:711px;
   height:509px;
   margin:40px auto 0 auto;
   background-image:url("images/links/links_bg.gif");
   background-position:left top;
   background-repeat:no-repeat;
}

#links ul {
    margin:0;
	padding:60px 0 0 302px;
}

#links ul li {
    width:220px;
	display:block;
	margin:0 0 14px 0;
}

#links ul li#l01,
#links ul li#l08 {
    height:36px;
}

#links ul li#l02,
#links ul li#l03,
#links ul li#l04,
#links ul li#l05,
#links ul li#l06 {
    height:37px;
}

#links ul li#l02,
#links ul li#l03,
#links ul li#l05,
#links ul li#l06,
#links ul li#l07 {
    margin:0 0 13px 0;
}

#links ul li a {
    width:220px;
	display:block;
	background-position:left top;
	background-repeat:no-repeat;
}

#links ul li#l01 a,
#links ul li#l08 a {
    height:36px;
}

#links ul li#l02 a,
#links ul li#l03 a,
#links ul li#l04 a,
#links ul li#l05 a,
#links ul li#l06 a,
#links ul li#l07 a {
    height:37px;
}

#links ul li#l01 a {
    background-image:url("images/links/links_01.gif");
}

#links ul li#l01 a:hover {
    background-image:url("images/links/links_over_01.gif");
}

#links ul li#l02 a {
    background-image:url("images/links/links_02.gif");
}

#links ul li#l02 a:hover {
    background-image:url("images/links/links_over_02.gif");
}

#links ul li#l03 a {
    background-image:url("images/links/links_03.gif");
}

#links ul li#l03 a:hover {
    background-image:url("images/links/links_over_03.gif");
}

#links ul li#l04 a {
    background-image:url("images/links/links_04.gif");
}

#links ul li#l04 a:hover {
    background-image:url("images/links/links_over_04.gif");
}

#links ul li#l05 a {
    background-image:url("images/links/links_05.gif");
}

#links ul li#l05 a:hover {
    background-image:url("images/links/links_over_05.gif");
}

#links ul li#l06 a {
    background-image:url("images/links/links_06.gif");
}

#links ul li#l06 a:hover {
    background-image:url("images/links/links_over_06.gif");
}

#links ul li#l07 a {
    background-image:url("images/links/links_07.gif");
}

#links ul li#l07 a:hover {
    background-image:url("images/links/links_over_07.gif");
}

#links ul li#l08 a {
    background-image:url("images/links/links_08.gif");
}

#links ul li#l08 a:hover {
    background-image:url("images/links/links_over_08.gif");
}

/*TERAKOYA*/
body.terakoya-page {
   width:100%;
   height:100%;
   background-color:#131109;
}

#terakoya {
   width:800px;
   height:534px;
   position:absolute;
   top:50%;
   left:50%;
   margin-top:-267px;
   margin-left:-400px;
   margin-bottom:0;
}

.terakoya-image {
   width:800px;
   height:383px;
   margin:0;
   padding:0;
   }

#terakoya ul {
   width:800px;
   height:151px;
   padding:0;
   margin:0;
   list-style:none;
   overflow:hidden;
}

#terakoya li {
   margin:0;
   padding:0;
   float:left;
}

/*TOPICS*/
.text {
   font-size:12px;
   margin:40px 0 20px 0;
   padding:0;
   text-align:center;
}

.topics-image {
   width:1104px;
   height:422px;
   margin:auto 20px auto;
}

.text_small {
   font-size:11px;
   margin:0 0 20px 0;
   padding:0;
   text-align:center;
}

img#worktop {
	float: right;
	padding-top: 250px;
}

/*Link*/
#link2 ul {
	list-style-type: none;
	float: left;
}

li#dejimanokura {background: url(images/link_dejima.jpg) no-repeat;
	width: 110px;
	height: 11px;
	margin-bottom: 27px;
	margin-top: 27px;
}

li#dejimanokura a{background: url(images/link_dejima.jpg) no-repeat;
	width: 110px;
	height: 11px;
    display: block;
}

li#dejimanokura a:hover{background: url(images/link_dejima_h.jpg) no-repeat;
	width: 110px;
	height: 11px;
    display: block;
}

li#kyusyu {background: url(images/link_kyusyu.jpg) no-repeat;
	width: 61px;
	height: 10px;
	margin-top: 27px;
	margin-bottom: 27px;
}

li#kyusyu a{background: url(images/link_kyusyu.jpg) no-repeat;
	width: 61px;
	height: 10px;
	margin-top: 27px;
    display: block;
}

li#kyusyu a:hover{background: url(images/link_kyusyu_h.jpg) no-repeat;
	width: 61px;
	height: 10px;
	margin-top: 27px;
    display: block;
}

li#kadc {background: url(images/link_kadc.jpg) no-repeat;
	width: 35px;
	height: 8px;
	margin-top: 27px;
	margin-bottom: 27px;
}

li#kadc a{background: url(images/link_kadc.jpg) no-repeat;
	width: 35px;
	height: 8px;
    display: block;
}

li#kadc a:hover{background: url(images/link_kadc_h.jpg) no-repeat;
	width: 35px;
	height: 8px;
    display: block;
}

li#human_nw {background: url(images/link_human.jpg) no-repeat;
	width: 130px;
	margin-top: 27px;
	margin-bottom: 27px;
	height: 10px;
}

li#human_nw a{background: url(images/link_human.jpg) no-repeat;
	width: 130px;
    display: block;
	height: 9px;
}

li#human_nw a:hover{background: url(images/link_human_h.jpg) no-repeat;
	width: 130px;
    display: block;
	height: 9px;
}

li#yururira {background: url(images/link_yururira.jpg) no-repeat;
	width: 45px;
	height: 10px;
	margin-top: 27px;
	margin-bottom: 27px;
}

li#yururira a{background: url(images/link_yururira.jpg) no-repeat;
	width: 45px;
	height: 10px;
    display: block;
}

li#yururira a:hover{background: url(images/link_yururira_h.jpg) no-repeat;
	width: 45px;
	height: 10px;
    display: block;
}

li#sugarand {background: url(images/link_sugarand.jpg) no-repeat;
	width: 81px;
	height: 11px;
	margin-top: 27px;
	margin-bottom: 27px;
}

li#sugarand a{
	width: 81px;
	height: 11px;
    display: block;

}

li#sugarand a:hover{
	background: url(images/link_sugarand_h.jpg) no-repeat;
	width: 81px;
	height: 11px;
    display: block;

}

li#kogane {background: url(images/link_kogane.jpg) no-repeat;
	width: 36px;
	height: 11px;
	margin-top: 27px;
	margin-bottom: 27px;
}

li#kogane a{background: url(images/link_kogane.jpg) no-repeat;
	width: 36px;
	height: 11px;
    display: block;
}

li#kogane a:hover{background: url(images/link_kogane_h.jpg) no-repeat;
	width: 36px;
	height: 11px;
    display: block;
}

/*-------------------------------
    post style
（works記事拡大時設定）
*colorbox.cssも参照のこと
-------------------------------*/
body.post {
   width:660px;
   height:557px;
   overflow-y:hidden;
   padding:0 70px;
}

.post-content {
   position:absolute;
   bottom:0px;
   width:660px;
   text-align:center;
   font-size:12px;
}

.post-content a {
   text-decoration:underline;
}

.post-content a:hover {
   text-decoration:underline;
}

.post-image {
   width:660px;
   height:500px;
   text-align:center;
   display:table-cell;
   vertical-align:middle;
}

.post-image img {
   max-width:600px;
   max-height:450px;
   display:inline-block;
   text-align:left;
}