﻿
header {
	width:100%;
	z-index:10;
	position:fixed;
	background: rgba(255,255,255,.2);
	display:table;
	font-size:0;
	line-height:0;
	}

header h1, nav {display:table-cell}
nav {text-align:right;vertical-align:bottom}
header h1 a img {height:60px;margin:15px auto auto 15px;}
header ul {font-size:16px;line-height:1;margin:0 15px 15px 0}
header ul li {margin-left:3px; display:inline-block}
header ul li::after {content:' |'}
header ul li:nth-last-child(2)::after {content:''}
header ul li:last-child::after {content:''}
header ul li a {color:inherit}

#slideshow3 {position:relative;top:px;width:100%;height:280px;}
#slideshow3 p { position:absolute;top:50px; width:100%;z-index: 1; opacity: 0.0;}
#slideshow3 p.active { z-index: 3;opacity: 1.0;}
#slideshow3 p.last-active {z-index: 2;}

@media screen and (max-width:249px) { #slideshow3 { height:130px;}#slideshow3 img {width:100%;height:auto;}}
@media screen and (min-width:250px) and ( max-width:299px) {#slideshow3 { height:140px;}#slideshow3 img {width:100%;height:auto;}}
@media screen and (min-width:300px) and ( max-width:349px) {#slideshow3 { height:160px;}#slideshow3 img {width:100%;height:auto;}}
@media screen and (min-width:350px) and ( max-width:399px) {#slideshow3 { height:170px;}#slideshow3 img {width:100%;height:auto;}}
@media screen and (min-width:400px) and ( max-width:449px) {#slideshow3 { height:180px;}#slideshow3 img {width:100%;height:auto;}}
@media screen and (min-width:450px) and ( max-width:549px) {#slideshow3 { height:195px;}#slideshow3 img {width:100%;height:auto;}}
@media screen and (min-width:550px) and ( max-width:639px) {#slideshow3 { height:215px;}#slideshow3 img {width:100%;height:auto;}}
@media screen and (min-width:640px) and ( max-width:800px) {#slideshow3 { height:265px;}#slideshow3 p { height:210px;top:60px;}#slideshow3 img {width:100%;height:; display: block;}}

@media screen and (min-width:800px) {

#slideshow3 {
 width:100%;text-align:center;
 height:270px;
 margin-bottom:20px;
 position:relative;
}

#slideshow3 p {
 position:absolute;
 top:60px;left:0;
 z-index: 1;
 opacity: 0.0;
 width:100%;
 clear:both;
 text-align:center;
}

}

.second-top-image img{ margin-top:76px;padding:0px;margin-bottom:-7px; }
@media screen and (max-width:640px) {.second-top-image img{ margin-top:66px;padding:0px;}}
@media screen and (max-width:799px) {.second-top-image img{width:100%;height:auto;}}
@media screen and (min-width:800px) {.second-top-image img{width:800px;}}


/*Media-queries_____________________________________*/


}@media screen and (max-width: 800px) {
html {-webkit-text-size-adjust:100%}/*disable webkit text size adjust (for iPhone)*/
a img:hover {opacity:1}
header h1 a img {height:60px}
}

@media screen and (max-height: 640px) {
html {-webkit-text-size-adjust:100%}/*disable webkit text size adjust (for iPhone)*/
a img:hover {opacity:1}
/*header h1 a img {height:60px}*/
}

/*smaller than 640-----------------------------*/
@media screen and (max-width: 640px) {
html {-webkit-text-size-adjust:100%}/*disable webkit text size adjust (for iPhone)*/
a img:hover {opacity:1}
header h1 a img {height:50px}
footer {font-size:80%; padding:5px}
}

/*drawerMenu.css */

/* Toggle(Button) */
#navToggle {
	display: none;
	position:absolute;/*to body*/
	right:22px;
	top:24px;
	width:36px;
	height:25px;
	cursor:pointer}
#navToggle div {position:relative}
#navToggle span {
	display:block;
	position:absolute;/*to div*/
	width:100%;
	border-bottom:solid 3px black/*#999*/;
	-webkit-transition: .35s ease-in-out;
	-moz-transition: .35s ease-in-out;
	transition: .35s ease-in-out}
#navToggle span:nth-child(1) {top:0}
#navToggle span:nth-child(2) {top:12px}
#navToggle span:nth-child(3) {top:24px}


/*Media-queries_____________________________________*/
@media screen and (max-height: 640px) {
}

@media screen and (max-width: 640px) {
header nav {z-index:20;
	position:absolute;
	right:0;
    top:-295px; /*通常時はビュー外*/
    /*background:rgba(255,255,255,.7);*/
    background:#fbeada;
    width:100%;
	padding:0 10px;
	-webkit-transition:.5s ease-in-out;
	-moz-transition:.5s ease-in-out;
	-ms-transition:.5s ease-in-out;
	-o-transition:.5s ease-in-out;
	transition:.5s ease-in-out;
	text-align:left}
header ul {margin:0}
header ul li {display:block;margin-left:-50px;padding-left:50px;margin-right:-20px;border-bottom:dotted 1px #b99d5b; line-height:2.7;}
header ul li a {display:block}
header ul li::after {content:''}
header ul li:last-child {border-bottom:none}
/* Toggle(Button) */
#navToggle {display: block}
/* Click Toggle(Button) */
.openNav #navToggle span:nth-child(1) {
	top: 11px;
	-webkit-transform:rotate(-45deg);
	-moz-transform:rotate(-45deg);
	-ms-transform:rotate(-45deg);
	transform:rotate(-45deg)}
.openNav #navToggle span:nth-child(2),
.openNav #navToggle span:nth-child(3) {
	top: 11px;
	-webkit-transform:rotate(45deg);
	-moz-transform:rotate(45deg);
	-ms-transform:rotate(45deg);
	transform:rotate(45deg)}
/*header menu*/
.openNav nav {
	z-index:4;
	-ms-transform: translateY(360px);
	-moz-transform: translateY(360px);
	-webkit-transform: translateY(360px);
	transform: translateY(360px)}
#toclose {cursor:pointer;text-align:center;vertical-align:bottom;background:rgba(153,153,153,0.5);
	margin-left:-30px;margin-right:-20px;}

#overlay {background:rgba(255,255,255,.7);position:absolute;top:-1000px;width:100%;height:1000px;}
.openNav #overlay {
	-ms-transform: translateY(1262px);
	-moz-transform: translateY(1262px);
	-webkit-transform: translateY(1262px);
	transform: translateY(1262px);
	cursor:pointer;}
}

@media screen and (min-width: 640px) {
#toclose {display:none;}
}