@charset"UTF-8";

/*Google webfont*/
@import url('https://fonts.googleapis.com/css2?family=Calligraffitti&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Qwigley&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Bilbo&family=Poiret+One&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Tangerine&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Shadows+Into+Light&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Bilbo&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Amatic+SC&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Stint+Ultra+Expanded&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Princess+Sofia&display=swap');

.Tangerine{
		font-family: 'Tangerine';
		font-size:30px;
		text-shadow: 4px 4px 4px #aaa;
		}
.bilbo{
 font-family: 'Bilbo', cursive;
}

.intolignt{
	font-family: 'Shadows Into Light', cursive;
	}


/* ページ全体の基本的な設定と背景色 */
body {
    display:none;
	font-family:Garamond, Times New Roman, Times, 'メイリオ';
	font-size: 12px;
	font-weight: normal;
	margin:0px;
	margin-top: 0px;
	margin-bottom: 0px;
	text-align:left;
	}

/*ヘッダの基本的な設定*/
header {
	font-family: Garamond, Times New Roman, Times, serif;
	text-align: left;
	 background-color: rgba(255,255,255,0.7);
    /*kbackground-color:rgba(246,249,21,0.7);*/
	margin-left:0px;
	padding:0px;
    width:auto;
	margin-left:0%;
    padding-right:30px;
    margin-bottom:15px;
    padding-left: 30px;
    top:-3px;
    border-radius: 0 0 3px 0;    
	border:1px rgb(190,190,190) solid;
    position: fixed;
    z-index: 10000;
    padding-bottom: 5px;
    float: left;
    box-shadow:inset 1px 1px 1px 1px rgba(255,255,255,0.5);
    }

#title{
	font-size :32px;
	font-family: Bilbo;
	text-align: left;
	line-height:1.5;
	font-weight: 100;
    color: black;
    float: left;
    margin-left: 95px;
    margin-top: 3px;
    margin-bottom: 0px;
	padding-top:5px;
    text-shadow:1px 1px 1px rgba(0,0,0,0.5);
}

img#keylogo{
    position: fixed;
    height:110px;
    top:2px;
    margin-left:5px;
    z-index:-10;
}

header div#description{
    display: none;
    color:#000000;
	height:auto;
	font-size: 12px;
		}

header:hover{
	font-family: Bilbo;
    color:#FFFFFF;
    top:0px;
    left:0px;
    background-color: rgba(255,255,255,0.9);
    font-weight: bold;
    width:300%;
    height:2000px;
	text-align: left;
    -webkit-transition:all 2s ease-in-out;
    -ms-transition:all 2s ease-in-out;
    transition:all 2s ease-in-out;
}

header:hover #title{
    font-size:46px;
    color: black;
    top:3%;
    left:4%;
    position: absolute;
        -webkit-transition:all 1s ease-in-out;
    -ms-transition:all 1s ease-in-out;
    transition:all 1s ease-in-out;
      text-shadow:none;
}

header:hover img#keylogo{
    height:25%;
    transform:translate(270%,25%);
    -webkit-transition:all 1.5s ease-in-out;
    -ms-transition:all 1.5s ease-in-out;
    transition:all 1.5s ease-in-out;
    position:absolute;
}

header:hover div#description{
    display: block;
    font-weight:normal;
    transform:translate(40%,28%);
    -webkit-transform:translate(40%,28%);
    -webkit-transition:all 1s ease-in-out;
    -ms-transition:all 1s ease-in-out;
    transition:all 1s ease-in-out;
    font-size: 36px;
    line-height: 2.4;
    position:absolute;
}

/*************************************************/
/*メニューの基本設定*/
div.menu{
    float: right; 
    margin-top:20px;
    text-align: left;
    margin-right:0%;
    padding-bottom: 0px;
    margin-bottom: 0px;
    padding-left: 10px;
    line-height: 1.5;
    width:180px;
}

div.menulist{
    float: left; 
     margin-top:20px;
    text-align: left;
     padding-bottom: 0px;
    width:180px;
}

div.menulist ul li a{
    color: rgba(255,255,255,1);
    font-weight: 400;
  	text-shadow:1px 1px 2px rgba(0,0,0,0.8);
}
div.menulist ul li a:hover{
color: rgb(240,20,70);
	text-shadow:none;
}

div.menu ul{
    font-size: 16px;
    margin-left: 0px;
    padding-left: 10px;   
}

div.menu ul li{
    list-style-type:none;
    float:left;
    line-height: 1.8;
    font-size:16px;
    margin:0 4px 2px 4px;
    color: black;
}
div.menu ul li a{
    color: rgba(255,255,255,1);
    font-weight: 400;
  	text-shadow:1px 1px 2px rgba(0,0,0,0.8);
}

div.menu ul li a:hover{
color: rgb(35,75,100);
    text-shadow: none;
}

div.menulist ul li{
    list-style-type:none;
    float:left;
    line-height: 1.4;
    margin:0px 1px 2px 4px;
}

/******************************************************/
div.menu_right{
    float: left; 
    margin-top:20px;
    text-align: left;
    margin-right:0%;
    padding-bottom: 0px;
    margin-bottom: 0px;
    padding-left: 2px;
    line-height: 1.5;
    width:400px;
}

div.menu_right ul{
    font-size: 16px;
    margin-left: 0px;
    padding-left: 0px;   
}

div.menu_right ul li{
    list-style-type:none;
    float:left;
    line-height: 1.8;
    font-size:16px;
    margin:0 4px 2px 4px;
    color: rgba(255,255,255,1);
}
div.menu_right ul li a{
    color: rgba(255,255,255,1);
    font-weight: 400;
  	text-shadow:1px 1px 2px rgba(0,0,0,0.8);
}

div.menu_right table {
    float: left;
    font-size: 16px;
    margin-left: 15px;
    padding-left: 0px;
   color: rgba(255,255,255,1);
    font-weight: 400;
  	text-shadow:1px 1px 2px rgba(0,0,0,0.8);
}
div.menu_right table td{
    width:180px;
}
div.menu_right table td a{
    color: rgba(255,255,255,1);
    font-weight: 400;
  	text-shadow:1px 1px 2px rgba(0,0,0,0.8);
}

div.menu_right table td a:hover{
color: rgb(0,0,0);
    	text-shadow:none;
}

/*******************************************************/
/*ヘッダの設定終了*/
/*bodyのドキュメント設定*/
.wordstyle{
    margin-top:65px;
	white-space:pre-wrap;
	font-size: 12px;
	font-family:  'メイリオ';
	color:#000000;
    line-height: 2.2;
	text-align: left;
    margin-left:17%;
	margin-right:12%;
    padding: 1%;
    background-color: rgba(255,255,255,0.5);
    border:1px rgb(190,190,190) solid;
    border-radius:5px;
	}

.wordstyle:hover{
    background-color:  rgba(255,255,255,0.8);
    -webkit-transition:all 0.5s ease-in-out;
    -ms-transition:all 0.5s ease-in-out;
  	transition:all 0.5s ease-in-out;
}
.wordstyle_menu{
	white-space:pre-wrap;
	font-size: 12px;
  
	color:#000000;
    line-height: 1;
	text-align: left;
	}    
/*BOXの設定*/
menu.box{
	font-family: Shadows Into Light;
	text-align: left;
	background-color:rgba(10,210,250,0.7);
	margin-left:0px;
    width:400px;
    height:84%;
    top:12%;
    left:-210px;
    border-radius: 3px;    
    border:1px rgb(190,190,190) solid;
    position: fixed;
    z-index: 10000;
    padding-bottom: 10px;
    padding: 5px;
    float: left;
}
menu.box:hover {
    	-webkit-transform:translate(180px,0);
	-webkit-transition:all 0.7s ease-in-out;
	transform:translate(180px,0);
    transition:all 0.7s ease-in-out;
}

menu.box li{
  
    font-size: 16px;
    line-height: 1;
     list-style-type: none;
}
/***********************************************************/
/*BOXの設定*/
menu.box2{
	font-family: Shadows Into Light;
	text-align: left;
	background-color:rgba(252,45,104,0.8);
	margin-left:0px;
    top:12%;
    width:400px;
    right:-270px;
  height:84%;
    border-radius: 3px 0 0 3px;    
	border:1px rgb(190,190,190) solid;
    position: fixed;
    z-index: 10000;
    padding-bottom: 5px;
    float: left;
    padding: 20px;
    padding-left: 0px;
}
menu.box2:hover {
    	-webkit-transform:translate(-200px,0);
	-webkit-transition:all 0.5s ease-in-out;
	transform:translate(-2-0px,0);
    transition:all 0.5s ease-in-out;
}

menu.box2 ul{
font-size: 16px;
padding: 10px;
}

div.tab2{
    background-color:rgba(255,255,255,1);
    border:1px rgb(95,95,95) solid;
    position: fixed;
    top:100px;
    left:-42px;
    height:90px;
    width:40px;    
}

menu.box2 li{ 
    font-size: 16px;
    line-height: 1;
     list-style-type: none;
}
/***********************************************************/
/*BOXの設定*/
menu.box3{
		background-color:rgba(255,255,255,0.8);
    top:88%;
  
	text-align: left;
	margin-left:0px;
    width:auto;
    left:-95px;
    border-radius: 5px;       
	border:1px rgb(95,95,95) solid;
    position: fixed;
    z-index: 10000;
    padding-bottom: 5px;
    padding: 10px;
    float: left;
    border-radius: 0 4px 4px 0;
    
}
menu.box3:hover {
    	-webkit-transform:translate(120px,0);
	-webkit-transition:all 0.5s ease-in-out;
	transform:translate(120px,0);
    transition:all 0.5s ease-in-out;
}
/*******************************************************/

/*hgroup設定*/
h1 {
	font-size :32px;
	font-family: Garamond, Times New Roman, Times, serif;
	text-align: left;
	padding-top:15px;
	padding-left: 10px;
	line-height:1.7;
	font-weight: 100;
    margin:0px;
    margin-left: auto;

 }

.perlfont{
  
    padding-left:40px;
 }

.perlfont_menu{
  
    font-size: 16px;
    line-height: 1.2;
    padding-top: 15px;
        color: rgba(255,255,255,1);
    font-weight: 600;
  	text-shadow:1px 1px 2px rgba(0,0,0,0.8);
    
 }

h2 {
    	font-size:28px;
	font-family: Bilbo;
	margin-left: auto;
	text-align: left;
	padding-left: 10px;
    	font-weight: 100;
    	line-height: 1.8;
    	margin:0px;
    }

h3 {
    font-size:20px;
 font-family: Garamond, Times New Roman, Times, serif;
	margin-left: auto;
	margin-top: 0px;
	text-align: left;
    vertical-align: middle;
    padding-left:10px;
	line-height:1.5;
    font-weight: 400;
    margin-bottom: 0px;
	}

h4 {
    font-size:18px;
	margin-left: auto;
    margin-bottom: 10px;
	text-align: left;
	padding-left: 10px;
    font-weight: 100;
    }

h5 {
    float: left;
  font-size:16px;

	margin-left: auto;
	margin-top: 0px;
    width:100px;
    margin-right: 30px;
	text-align: left;
    vertical-align: middle;
    padding-left:30px;
	line-height:1.5;
    font-weight: 400;
    margin-bottom: 0px;
}
h6 {
    float: left;
  font-size:16px;

	margin-left: auto;
	margin-top: 0px;
    width:20%;
    margin-right: 30px;
	text-align: left;
    vertical-align: middle;
    padding-left:30px;
	line-height:1.5;
    font-weight: 400;
    margin-bottom: 0px;
}

p {
	text-align: left;
	padding-left: 30px;
    padding-right: 30px;    
	line-height:2.2;
	font-family:  'メイリオ';
	font-size: 12px;
	}
/**********************************************************/
pre{
    background-color: rgba(0,90,90,1);
    border-radius: 3px;
    /*font-family:  'メイリオ';*/
  
	font-size: 14px;
    color:rgb(255,255,255);
    padding: 15px;
    padding-left:50px;
    line-height: 1.5;
    margin:0px;
}   

div.plist{
    font-family:  'メイリオ';
	font-size: 14px;
    padding: 10px;
    padding-left:30px;
    line-height: 2;    
} 
/* 指定が無い時のリンクの下線の有無 */

a:link{color:rgb(225,0,113);
	text-decoration:none;
}
/* 指定が無い時の既読リンクの色 */
a:visited{color:rgb(196,0,100);}

/* 指定無い時のリンク部分のクリック時 */
a:active {
	color: #006699;
	}

/* マウスカーソルがリンクにかさなった時 */
a:hover {
	color: rgb(240,20,70);
	 text-decoration: none ;
	}

footer{
	font-family:Times New Roman;
	width:100%;
	font-size:14px;
    padding:10px;
    line-height: 2;
    text-align: center;
    margin-bottom: 30px;
	}
/*********************************************************************/
div.mlist{
    border:1px rgb(95,95,95) solid;
    border-radius:3px;
    padding:5px;
    margin-left:15px;
    width:350px;
    float:right;
}
div.profile{
    border:1px rgb(95,95,95) solid;
    border-radius:3px;
    padding:5px;
    width:500px;
    float:left;
}

/********************************************************************/
input{
    font-family:  'メイリオ';
    font-size:14px;
}
/**********************scroll****************************************/
.page-top
{
	margin: 0 ;
	padding: 0 ;
	z-index:20000;
}
 
.page-top p
{
	margin: 0 ;
	padding: 0 ;
	position: fixed ;
	right: 155px ;
	bottom: 5px ;
	z-index:20000;
}
 
.move-page-top
{
	display: block ;
	background: rgba(0,0,0,0.8);
	width: 50px ;
	height: 50px ;
	color: #fff ;
	line-height: 50px ;
	text-decoration: none ;
	text-align: center ;
	-webkit-transition:all 0.3s ;
	-moz-transition:all 0.3s ;
	transition:all 0.3s ;
	z-index:20000;
}

.move-page-top:hover
{
	opacity: 0.85 ;
	z-index:20000;
}
/**********************scroll_end*******************/
/*Video*********************************************/
video#bgvid {
  position: fixed; left:0; top: 0;
  min-width: 100%; min-height: 100%;
  width: auto; height: auto; z-index: -100;
  background-size: cover;
}

div#container{
    background-color: rgba(255,255,255,0.4);
    top:0px;
    left:0px;
    position: absolute;
}
/*お問い合わせBOX************************************/
div.inquirybox{
    color: white;
	font-family:'Times New Roman',メイリオ;
    position: fixed;
    background-color:rgba(255,255,255,0.4);
    color: black;
    border-radius:2px;
     width:12%;
    top:96%;
    left:69%;
    padding:15px;
    padding-left: 30px;
    border: 1px;
	border:1px rgb(190,190,190) solid;
    z-index: 40000;
    box-shadow:inset 1px 1px 1px 1px rgba(255,255,255,0.4);
}

div.inquirybox table{
    color: white;
}

div.inquirybox p{
    color: white;
}
#inqui_h{
     font-size: 16px;
    top:-28px;
    font-family:'Times New Roman';
    position:relative; 
    padding-left:0px;
}

div.inquirybox:hover #inqui_h{
    top:520px;
    left:-16px;
    font-size: 34px;
    font-family:'Times New Roman';
        -webkit-transition:all 1s ease-in-out;
    -ms-transition:all 1s ease-in-out;
  	transition:all 1s ease-in-out;
color: white;
}

div.inquirybox:hover{
    width:100%;
    height:1500px;
    position: fixed;
    top:0px;
    left:0px;
    padding:15px;
    padding-left: 10%;
    background-color: rgba(0,0,0,0.7);
    -webkit-transition:all 1s ease-in-out;
    -ms-transition:all 1s ease-in-out;
  	transition:all 1s ease-in-out;
    z-index: 40000;
}
/********************************************************************/
dl {
     margin:5px;
}
dl dt{
    font-weight: bold;
}
div.dlcl{
    white-space:normal;
}
/********************************************************************/
/*ショップ*/
div.shopbox{
    color: white;
	font-family:'Times New Roman',メイリオ;
    position: fixed;
       background-color:rgba(255,255,255,0.4);
    color: black;
    border-radius:2px;
    width:14%;
    height: 200px;
    top:96%;
    left:51.1%;
    padding:15px;
    padding-left: 30px;
    border: 1px;
	border:1px rgb(190,190,190) solid;
    z-index: 40000;
    box-shadow:inset 1px 1px 1px 1px rgba(255,255,255,0.4);
}

div.shopbox:hover{
    width:100%;
    height:1500px;
    position: fixed;
    top:0px;
    left:0px;
    padding:15px;
    padding-left: 10%;
    background-color: rgba(255,255,255,0.9);
    -webkit-transition:all 1s ease-in-out;
    -ms-transition:all 1s ease-in-out;
  	transition:all 1s ease-in-out;
    z-index: 40000;
}

#shop_h{
     font-size: 16px;
    top:-28px;
    font-family:'Times New Roman';
    position:relative; 
    padding-left:0px;
}

.shopbox p{
    margin-top:1%;
    left:-15%;
    width:65%;
}
div.shopbox:hover #shop_h{
    top:20px;
    left:-16px;
    font-size: 34px;
    font-family:'Times New Roman';
        -webkit-transition:all 1s ease-in-out;
    -ms-transition:all 1s ease-in-out;
  	transition:all 1s ease-in-out;
color: black;
}
/********************************************************************/

table {
    padding-left: 50px;
    margin-bottom:0px;
}
/*wine_img_class*******************************************************/
p.floatl{
  width:55%;
    float:left;
    margin-top:-5px; 
    line-height: 2.4;
}
.floatl_img{
    width:80px;
    border-radius:70%;
    float:left;
    margin-top:-50px;
}
/*ワイン画像タグ**********************************************************************/
img.wines{
    height:350px;
    margin-left:20%;
    float:left;
}

img.vines{
    float:right;
    width:25%;
    border-radius:5px;
    margin:30px;
}

div.wine_record{
margin-bottom:5px;
}

div.winetext{
    float:right;
    margin:10px;
    margin-top: -10px;
    width:55%; 
}

dl {
    margin-left:30px;
}
div.map{
  background:url(img/map/map.png) no-repeat top left;
    background-size: 100%;
    height:640px;
}
img#title_image{
    float:right;
    width: 30%;
    margin:30px;
    border-radius: 3px;
    border: 3px rgb(255,255,255) solid;
    position:relative;
}

img.body_image{
    float:right;
    width: 35%;
    margin:20px;
    border-radius: 5px;
    border: 3px rgb(255,255,255) solid;
    position:relative;
}

img#tuta{
    position:fixed;
    top:70%;
    width:300px;
    left:0px;
    z-index:10000;
}

dl{
    white-space:normal;
}
dt.marriage{
    font-size:16px;
  
}

img#yajirushi{
	width:7%;
	}