@charset "UTF-8";

/* reset */
html, body, div, h1, h2, h3, h4, h5, h6,p, blockquote, pre, 
address,ul, ol, li, dl, dt, dd,table, th, td, form, fieldset {
  margin: 0;
  padding: 0;
  line-height: 1.0;
  font-family:
    "Hiragino Kaku Gothic ProN",
    Meiryo, 
    sans-serif;
}

/* body */
body{
  background:url(../img/tweety_ivy_mainphoto2.jpg)no-repeat center center fixed  ; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

/* navi */
#nav{
  width:100%;
  height:40px;
  padding-top:40px;
  background:#fff;
  opacity:0.85;
  position:fixed;
  top:0;
  left:0;
  display:none;
}

#nav ul{
  width:500px;
  height:40px;

  float:right;
}
#nav ul#main{
  display:none;
}

#nav ul li{
 /* font-family: 'Parisienne', cursive;*/
  font-family: 'Volkhov', serif;
  font-style: italic;
  font-weight:normal;
  font-size:26px;
  width:100px;
  height:40px;
  float:left;
  text-align:center;
  position:relative; /* ここの左上を基点にして直下のulタグを表示 */
  line-height:100%;
}
#nav ul li a{
  color:#CC3300;
  line-height:100%;
  text-align:center;
  margin-top:100px;
  padding-top:10px;
}
#nav ul li:hover{
  color:#fff;
  background:#E3E3E3;
  display:block;
  -webkit-transition: all 2s ease;
  -moz-transition:all 2s ease;
  -o-transition:all 2s ease;
}

#nav ul li ul.sub{
  padding-top:20px;
  width:100px;
  position:absolute;  /*liタグの左上を基点にして表示 */
  z-index:100;
}

#nav ul li ul.sub li{
 /* visibility:hidden;  /*普段は隠れるようにする */
  background:#fff;
  margin-top:5px;
}
#nav ul li ul.sub li{
  visibility:hidden;
}
#nav ul li:hover ul.sub li{
  height:70px;
  visibility:visible;
}

#nav ul li ul.sub li:hover{
  background:#0CF;
}
/* logo */
h1{
  white-space: nowrap;
  text-indent: 100%;
  overflow: hidden;
}

#logo{
  margin-top:100px;
  padding-bottom:90px;
  margin-left:50px;
  display:none;
}

/* wrapper */
#wrappermain{
  width:100%;
  height:100%;
  margin-top:180px;
  background-color:rgba(255,255,255,0.85);
  overflow:hidden;
}

h2{
  font-family: 'Playfair Display', serif;
  color:rgba(51,51,51,0.85);
  font-size:40px;
}

/* mapwrapper */
#wrappertop{
  margin:0 auto;
  height:520px;
  width:760px;
  padding-top:40px;
}
#mapwrapper{
  width:350px;
  height:390px;
  float:left;
}

/* maplist */
#maplist{
  margin-left:80px;
  width:300px;
  height:240px;
  margin-bottom:40px;
  float:left;
}
#maplist p{
  font-size:12px;
  line-height:1.5;
}

/* mapinfo */
#mapinfo{
  float:right;
  height:200px;
  width:380px;
  margin-top:-20px;
  margin-left:30px;
  background:rgba(153,153,153,0.25)
}
#mapinfo ul{
  padding-top:24px;
  padding-left:15px;
}
#mapinfo ul li{
  line-height:1.4;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}
ul, ol {
  list-style: none; /* マーカーを消す */
}
a {
  text-decoration: none; /* 下線を消す */
}
img {
  border: 0;
}
img, input {
  vertical-align: bottom;
}

#maplist a:hover img{
  opacity: 0.7;
  filter: alpha(opacity=70);
  -ms-filter: "alpha(opacity=70)";
}

/* footer */
#footer{
	background:rgba(255,255,255,0.65);
	width:100%;
	height:220px;
}
#footwrapper{
	background:url(../img/ivy_tweety_footer_line.png)repeat-x 10px 200px rgba(181,181,181,0.65);
		width:100%;
        height:100%;
}
#info {
  margin:0 auto;
  padding-top:60px;
  width:800px;
  color:#000000;
  overflow:hidden;
}
#footer #info p.logo{
	float:left;
    margin-top:-10px;
	width:150px;
	height:150px;
}
#footer #info ul{
	width:340px;
	height:120px;
	float:left;
}
#footer #info p.chairs{
	width:120px;
	height:120px;
	float:left;
}
#footer #info p.men{
	width:150px;
	height:190px;
	float:left;
	margin-top:-40px;
	margin-left:30px;
}
#footer li span.maru{
    font-family: 'Parisienne', cursive;
	font-weight:bold;
}
#footer p span.company{
	font-size:12px;
	color:rgba(87,87,87,1.00);
}


/* 戻るボタン */
#page-top {
    position: fixed;
    bottom: 20px;
    right: 20px;
    font-size: 77%;
}
#page-top a {
    background:rgba(255,26,83,0.85);
    text-decoration: none;
    color: #fff;
    width: 50px;
    padding: 20px 0;
    text-align: center;
    display: block;
}
#page-top a:hover {
    text-decoration: none;
    background: #999;
}

/* filter */
#filter{
  background:#FF0000;
}

/* tell・mailボタン */
#tell-mail {
    position: fixed;
    bottom: 20px;
    left: 10px;
	width:100px;
	height:50px;
	overflow:hidden;
	background:rgba(255,26,83,0.85);
}
#tell-mail a {
    text-decoration: none;
    color: #fff;
    text-align: center;
    display: block;
}
#tell-mail a:hover {
    text-decoration: none;
    background:#7E7E7E;
}
#tell-mail p#tell-button{
	width:50px;
	height:50px;
	float:left;
}
#tell-mail p#mail-button{
	width:50px;
	height:50px;
	float:left;
	display:block;
}
#tell-mail p img{
	text-align:center;
}

#tellnumber{
	background:rgba(255,26,83,0.85);
	color:#fff;
    position: fixed;
    bottom: 70px;
    left: 10px;
	display:none;
	width:220px;
	height:40px;
	text-align:center;
}
#tellnumber p{
	padding-top:5px;
}
p#tell-button img:hover{
	background:#7E7E7E;
}

/* メールボタンのgoogleフォームへのリンク */
div#glayLayer{
	display:none;
	position:fixed;
	left:0;
	top:0;
	height:100%;
	width:100%;
	background:rgba(130,130,130,1.00);
	filter:alpha(opacity=75);
	opacity: 0.75;
}

#overLayer{
	display:none;
	width:760px;
	background:white;
	padding:10px;
	position: fixed;
	top:55%;
	left:50%;
}
#overLayer img.close{
	position:absolute;
	top:-10px;
	right:-10px;
	cursor:pointer;
}