/*
Description: Hokkaido heritage
Author: notherncross inc.
*/

/* =Layout 
-------------------------------------------------*/
div#wrapper {
margin: -14px auto 0 auto;
width:780px;
padding:0;
border-left: #cccccc 1px solid;
border-right: #cccccc 1px solid;
}


/*-OTHER PAGEs header ----*/

div#aheader {
margin:0;
padding:0;
width:780px;
height:138px;/*-＋＋＋＋＋＋＋＋＋＋＋これがヘッダーの上からの位置--*/
text-align: center;
}

/*-OTHER MAIN MENU ---------*/
div#omenu {
position:relative;
top:0px; /*-＋＋＋＋＋＋＋＋＋＋＋これがないとなぜか上下にずれる--*/
margin:10px 0 0 0 ;
padding:0;
width:780px;
height:23px;
font-size: 14px;
padding: 0px;
background-image : url(../wp-content/themes/hokkaido-heritage/imgs/common/sitemenu/menubg.gif);
color:#444444;
}

/*-COMMON Container ----*/
div#container {
position:relative;
top:0px; /*--＋＋＋＋＋＋＋＋＋＋これがないとなぜか上下にずれる--*/
margin:0;
padding:0;
width:780px;
text-align: left;
vertical-align:top;
}

/* CSSハック COMMON Container--*/
#container:after {
content: ".";
display: block;
height:0;
clear:both;
visibility: hidden;
}
#container: { display: inline-block;}

/* Hides from IE-mac \*/
* html #container {height: 1%;}
/* end hides from IE-mac \*/

/*-COMMON Footer ----*/
div#footer {
margin:0px 0 0px 0px; /*-上のマージンがないと上にずれ、position指定するとcontainerからはみだす--*/
padding:0 0 40px 0;
width:780px;
}

/* CSSハックCOMMON Footer--*/
#footer:after {
content: ".";
display: block;
height:0;
clear:both;
visibility: hidden;
}
#footer: { display: inline-block;}

/* Hides from IE-mac \*/
* html #footer {height: 1%;}
/* end hides from IE-mac \*/

/* =COMMON
-------------------------------------------------*/
body {
margin:0;
padding: 0;
font-family:Arial,Helvetica,sans-serif,"Osaka","Osaka","MS PGothic";
text-align: left;
font-size: 13px;
line-height: 1.5;
background-repeat:repeat-y;
background-position:center;
background-color:#ffffff;
color:#000000;
}
p {
margin:0;
padding:0 0 15px 0;
color:#000000;
text-align:left;
text-indent:0em;
line-height:1.5;
font-size:15px;
}
a {
text-decoration:none;
color:#000000;
}
a:visited {
color:#000000;
}
a img {
text-decoration:none;
border:none;
}

img { 
margin:0; padding:0;
}
h2 {
margin:0;
padding:20px 20px 0 30px;
width:730px;
height:43px;
color:#000000;
font-size:18px;
letter-spacing:1px;
background-color:#e6e6e6;
}
h3 {
margin:0 10px 15px 0;
padding:9px 4px 0 13px;
width:400px;
height:36px;
color:#666633;
font-size:17px;
border-left:1px solid #999999;
border-bottom:1px solid #999999;
}
h4 {
margin:25px 0 5px 30px;
padding: 0 0 0 15px;
background-position:left;
background-image:url(imgs/square1.jpg);
background-repeat:no-repeat;
}
span.black {
color:#000000;
font-size:13px;
}
div.border1 {
margin:0 0 15px 30px;
padding: 10px;
border:1px solid #999999;
}

ul.a01 {
margin:0 0 15px 10px;
padding: 0 0 0 10px;
}
li.a01 {
margin: 0 0 0 0;
padding: 0;
list-style-position: outside; 
list-style-image: url(imgs/arrow3.gif); 
color:#999999;
font-size:15px;
font-weight:bold;
}
ul.a011 {
margin:0;
padding:0;
}
li.a011 {
font-size:13px;
}



/* =HEADER
-------------------------------------------------*/
div#aheader h1 {
width:780px;
height:95px;
}
div#aheader h1 img{
margin:0;
padding:20px 10px 0 10px;
}
div#aheader h1 img a{
text-decoration:none;
border:none;
}

div#cheader {
width:780px;
height:20px;
}

/*-COMMON Container ----*/
div#container {
position:relative;
top:0px; /*--＋＋＋＋＋＋＋＋＋＋これがないとなぜか上下にずれる--*/
margin:0;
padding:0;
width:780px;
text-align: left;
}

/* CSSハック COMMON Container--*/
#container:after {
content: ".";
display: block;
height:0;
clear:both;
visibility: hidden;
}
#container: { display: inline-block;}

/* Hides from IE-mac \*/
* html #container {height: 1%;}
/* end hides from IE-mac \*/

/* =MAIN
-------------------------------------------------*/

div#main {
margin:18px auto 22px auto;
width:740px;
}
/* =INDEX(6lines)
------------------*/
div#index {
float:right;
margin:0 0 15px 15px;
width:265px;
height:200px;
background-image:url(imgs/001-02.jpg);
}
div#index ul {
margin:18px 8px 5px 11px;
padding:14px 0 0 0;
}
div#index li a{
color:#0000ff;
font-size;13px;
font-weigh:normal;
}
div#index li a:hover{
text-decoration:underlined;
}

div#index li.n1 {
margin:0 0 0 20px;
padding:2px 0 3px 5px;
list-style-position: outside; 
list-style-image:url('imgs/n1.jpg');
}
div#index li.n2 {
margin:0 0 0 20px;
padding:2px 0 3px 5px;
list-style-position: outside; 
list-style-image:url('imgs/n2.jpg');
}
div#index li.n3 {
margin:0 0 0 20px;
padding:2px 0 3px 5px;
list-style-position: outside; 
list-style-image:url('imgs/n3.jpg');
}
div#index li.n4 {
margin:0 0 0 20px;
padding:2px 0 3px 5px;
list-style-position: outside; 
list-style-image:url('imgs/n4.jpg');
}
div#index li.n5 {
margin:0 0 0 20px;
padding:2px 0 3px 5px;
list-style-position: outside; 
list-style-image:url('imgs/n5.jpg');
}

div#index li.n6 {
margin:0 0 0 20px;
padding:2px 0 3px 5px;
llist-style-position: outside; 
list-style-image:url('imgs/n6.jpg');
}

/* =INDEX(7lines)
------------------*/
div#index7 {
float:right;
margin:0 0 15px 15px;
width:265px;
height:270px;
background-image:url(imgs/002-02.jpg);
}
div#index7 ul {
margin:18px 8px 5px 11px;
padding:14px 0 0 0;
}
div#index7 li a{
color:#0000ff;
font-size;13px;
font-weigh:normal;
}
div#index7 li a:hover{
text-decoration:underlined;
}

div#index7 li.n1 {
margin:0 0 0 20px;
padding:2px 0 3px 5px;
list-style-position: outside; 
list-style-image:url('imgs/n1.jpg');
}
div#index7 li.n2 {
margin:0 0 0 20px;
padding:2px 0 3px 5px;
list-style-position: outside; 
list-style-image:url('imgs/n2.jpg');
}
div#index7 li.n3 {
margin:0 0 0 20px;
padding:2px 0 3px 5px;
list-style-position: outside; 
list-style-image:url('imgs/n3.jpg');
}
div#index7 li.n4 {
margin:0 0 0 20px;
padding:2px 0 3px 5px;
list-style-position: outside; 
list-style-image:url('imgs/n4.jpg');
}
div#index7 li.n5 {
margin:0 0 0 20px;
padding:2px 0 3px 5px;
list-style-position: outside; 
list-style-image:url('imgs/n5.jpg');
}

div#index7 li.n6 {
margin:0 0 0 20px;
padding:2px 0 3px 5px;
llist-style-position: outside; 
list-style-image:url('imgs/n6.jpg');
}
div#index7 li.n7 {
margin:0 0 0 20px;
padding:2px 0 3px 5px;
llist-style-position: outside; 
list-style-image:url('imgs/n7.jpg');
}

/* =INDEX(8lines)
------------------*/
div#index8 {
float:right;
margin:0 0 15px 15px;
width:265px;
height:200px;
background-image:url(imgs/003-02.jpg);
}
div#index8 ul {
margin:18px 8px 5px 11px;
padding:14px 0 0 0;
}
div#index8 li a{
color:#0000ff;
font-size;13px;
font-weigh:normal;
}
div#index8 li a:hover{
text-decoration:underlined;
}

div#index8 li.n1 {
margin:0 0 0 20px;
padding:2px 0 3px 5px;
list-style-position: outside; 
list-style-image:url('imgs/n1.jpg');
}
div#index8 li.n2 {
margin:0 0 0 20px;
padding:2px 0 3px 5px;
list-style-position: outside; 
list-style-image:url('imgs/n2.jpg');
}
div#index8 li.n3 {
margin:0 0 0 20px;
padding:2px 0 3px 5px;
list-style-position: outside; 
list-style-image:url('imgs/n3.jpg');
}
div#index8 li.n4 {
margin:0 0 0 20px;
padding:2px 0 3px 5px;
list-style-position: outside; 
list-style-image:url('imgs/n4.jpg');
}
div#index8 li.n5 {
margin:0 0 0 20px;
padding:2px 0 3px 5px;
list-style-position: outside; 
list-style-image:url('imgs/n5.jpg');
}

div#index8 li.n6 {
margin:0 0 0 20px;
padding:2px 0 3px 5px;
llist-style-position: outside; 
list-style-image:url('imgs/n6.jpg');
}
div#index8 li.n7 {
margin:0 0 0 20px;
padding:2px 0 3px 5px;
llist-style-position: outside; 
list-style-image:url('imgs/n7.jpg');
}

/* photo---------------*/
div.photo1 {
float:right;
margin:0 2px 10px 10px;
padding:0;
width:300px;
border:1px solid #666666;
}
div.photo1 img {
width:300px;
}
div.cap1 {
margin:5px;
padding:0;
color:#666666;
font-size:11px;
line-height:1.2;
}

div.photo2 {
width:750px;
margin:0 0 10px 0;
padding:0;
border:1px solid #666666;
}
div.photo2 img {
margin:0;
padding:0;
}
div.cap2 {
width:750px;
margin:5px;
padding:0;
color:#666666;
font-size:11px;
line-height:1.2;
}

div.photo3 {
float:left;
margin:0 10px 10px 2px;
padding:0;
width:200px;
border:1px solid #666666;
}
div.photo3 img {
width:200px;
}
div.cap3 {
margin:5px;
padding:0;
color:#666666;
font-size:11px;
line-height:1.2;
}

div.photo4 {
float:right;
margin:0 2px 10px 10px;
padding:0;
width:200px;
border:1px solid #666666;
}
div.photo4 img {
width:200px;
}
div.cap4 {
margin:5px;
padding:0;
color:#666666;
font-size:11px;
line-height:1.2;
}

div.photo5 {
float:left;
margin:0 10px 10px 2px;
padding:0;
width:300px;
border:1px solid #666666;
}
div.photo5 img {
width:300px;
}
div.cap5 {
margin:5px;
padding:0;
color:#666666;
font-size:11px;
line-height:1.2;
}


/* information---------------*/
div.info {
margin:15px 4px 14px 4px;
padding:5px;

}



/* =PAGE INDEX
-------------------------------------------------*/
div#pageindex {
clear:both;
margin:20px auto 0 auto ;
padding:0;
width:780px;
height:30px;
}
div#prev {
float:left;
margin:5px 0 5px 10px;
padding:0 0 0 20px;
width:100px;
text-align:left;
}

div#center {
float:left;
margin:5px auto 5px auto;
width:540px;
text-align:center;
}
div#center img {
margin:0 6px 0 0;
}

div#next {
float:left;
position:relative;
margin:0 0 5px 0;
padding:0 0 0 0;
width:90px;
text-align:right;
vertical-align:middle;
}

/*-COMMON Footer ----*/
div#footer {
margin:35px 0 0px 0px; /*-上のマージンがないと上にずれ、position指定するとcontainerからはみだす--*/
padding:0 0 40px 0;
width:780px;
}

/* CSSハックCOMMON Footer--*/
#footer:after {
content: ".";
display: block;
height:0;
clear:both;
visibility: hidden;
}
#footer: { display: inline-block;}

/* Hides from IE-mac \*/
* html #footer {height: 1%;}
/* end hides from IE-mac \*/





/* =FOOTER
-------------------------------------------------*/
/* copyrights */
#copyrights {
position:relative;
margin:0px 0 0 0 ;
padding:5px 0 5px 15px;
width:765px;
height:16px;
font-size: 12px;
background-image : url(../wp-content/themes/hokkaido-heritage/imgs/common/footerbg.gif);
color:#000000;
}

/* office */
#office {
display:block;
float:left;
margin:15px 3px 0px 15px;
padding:0;
width:500px;
font-size: 10px;
color:#000000;
}

#handy {
display:block;
width:70px;
float:right;
margin:5px;
padding:0;
}
#office p {
font-size: 10px;
line-height:1.3;
}
#office img {
margin:2px 0 -2px 0;
padding:0;
overflow:hidden;
}
#handy img {
width:60px;
text-decoration:none;
}

/* =HEADER TOP MENU
-------------------------------------------------*/
div.menu a{
color: #444444;
text-decoration: none;
display: block;
padding: 0px;
line-height: 23px;
width: 130px;
}

.menu, .menu ul {
	margin: 0;
	padding: 0;
	border: 0;
	list-style-type: none;
	display: block;
}

.menu li {
	margin: 0;
	padding: 0;
	width:130px; /*★*/
	border: 0;
	display: block;
	float: left;
	position: relative;	/* position each LI, thus creating potential IE.win overlap problem */
	z-index: 5;		/* thus we need to apply explicit z-index here... */
}

.menu li:hover {
	z-index: 10000;	/* ...and here. this makes sure active item is always above anything else in the menu */
	white-space: normal;/* required to resolve IE7 :hover bug (z-index above is ignored if this is not present)*/
}

.menu li li {
	float: none;/* items of the nested menus are kept on separate lines */
}

.menu ul {
	visibility: hidden;	/* initially hide all submenus. */
	position: absolute;
	z-index: 10;
	left: 0;	/* while hidden, always keep them at the top left corner, */
	top: 0;		/* 		to avoid scrollbars as much as possible */
}

.menu li:hover>ul {
	visibility: visible;	/* display submenu them on hover */
	top: 100%;	/* 1st level go below their parent item */
}

.menu li li:hover>ul {
top: 0;
left: 100%;
}
/* -- float.clear --
	force containment of floated LIs inside of UL */
.menu:after, .menu ul:after {
	content: ".";
	height: 0;
	display: block;
	visibility:visible;
	overflow: hidden;
	clear: both;
}
.menu, .menu ul {	/* IE7 float clear: */
	min-height: 0;
	height:23px;
}
/* -- float.clear.END --  */

/* -- sticky.submenu --
	it should not disappear when your mouse moves a bit outside the submenu
	YOU SHOULD NOT STYLE the background of the ".menu UL" or this feature may not work properly!
	if you do it, make sure you 110% know what you do */
.menu ul {
	background-image: url(../wp-content/themes/hokkaido-heritage/imgs/common/empty.gif);	/* required for sticky to work in IE6 and IE7 - due to their (different) hover bugs */
	padding: 10px 30px 30px 30px;
	margin: -10px 0 0 -30px;
	width:130px;
	/*background: #f00;*/	/* uncomment this if you want to see the "safe" area.
								you can also use to adjust the safe area to your requirement */
}
.menu ul ul {
	padding: 30px 30px 30px 10px;
	margin: -30px 0 0 -10px;
}
/* -- sticky.submenu.END -- */

.menu, .menu ul li {
	color: #444444;
	height:23px;
	background-image : url(../wp-content/themes/hokkaido-heritage/imgs/common/sitemenu/menubg.gif);
	background-color:#999999;
}

.menu ul {
	width: 130px;
}

.menu a {
	text-decoration: none;
	color: #444444;
	padding: 0em 0.5em;
	display: block;
	position: relative;
}

.menu a:hover, .menu li:hover>a {
	color: #cc0000;
	background-image : url(../wp-content/themes/hokkaido-heritage/imgs/common/sitemenu/menubg2.gif);
	background-color:#cccccc;
}

.menu li li {	/* create borders around each item */
	border: 1px solid #ccc;
}
.menu ul>li + li {	/* and remove the top border on all but first item in the list */
	border-top: 0;
}

.menu li li:hover>ul {	/* inset 2nd+ submenus, to show off overlapping */
	top: 5px;
	left: 90%;
}

.menu>li:first-child>a, .menu li + li + li li:first-child>a {
color:#cc0000;
}




/* =cleafix　これを利用する
-------------------------------------------------*/
.clearfix:after {
content: ".";
display: block;
height:0;
clear:both;
visibility: hidden;
}
.clearfix: { display: inline-block;}

/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
/* end hides from IE-mac \*/