* {
	margin: 0;
	padding: 0;
}

body{
	font-family: "a-otf-futo-go-b101-pr6n";
	background-color:#020202;
	color:#fff;
	font-size: 17px;
	text-align: center;
	letter-spacing: 0.06em;
	cursor: default;
}

p{
	line-height: 2.4em;
	margin-bottom: 20px;
}

h2{
	font-size: 30px;
}

a,a:hover,a:focus{
	color: #fff;
	text-decoration: none;
}

.animation {
}

.fadeInDown {
 -webkit-animation-fill-mode:both;
 -ms-animation-fill-mode:both;
 animation-fill-mode:both;
 -webkit-animation-duration:1s;
 -ms-animation-duration:1s;
 animation-duration:1s;
 -webkit-animation-name: fadeInDown;
 animation-name: fadeInDown;
 visibility: visible !important;
}
@-webkit-keyframes fadeInDown {
 0% { opacity: 0; -webkit-transform: translateY(-15px); }
 100% { opacity: 1; -webkit-transform: translateY(0); }
}
@keyframes fadeInDown {
 0% { opacity: 0; -webkit-transform: translateY(-15px); -ms-transform: translateY(-15px); transform: translateY(-15px); }
 100% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); }
}

button{
	font-family: "a-otf-futo-go-b101-pr6n";
	display: inline;
	background-color:#020202;
	color:#fff;
	padding: 10px 40px;
	font-size: 17px;
	border: 1px solid #fff;
	margin: 0 auto;
	margin-top: 20px;
	letter-spacing: 0.06em;
}

button:hover{
	background-color:#fff;
	cursor: pointer;
	color:#3e3a39;
    -webkit-transition: all 0.2s;
    -moz-transition: all 0.2s;
    -ms-transition: all 0.2s;
    -o-transition: all 0.2s;
    transition: all 0.2s;
}



#logo_area{
  width: 100vw;
  height: 100vh;
  display: flex; /* 要素をflexboxに対応させる */
  align-items: center; /* 縦方向の中央揃え */
  justify-content: center; /* 横方向の中央揃え */
  flex-direction: column; /* 子要素の並びを上から下にする（要素の改行に対応） */
  background-image: url(../img/first_image.jpg);
  background-size: cover;
  background-position: center;
}


#logo_enologue{
	width: 400px;
}


.logo_svg0{
	enable-background:new ;
	transform: translate3d(0,0,0);
}

.logo_svg11{
	stroke	:#fff;
	stroke-width:1;
	stroke-dasharray: 1000;
	stroke-dashoffset: 1000;
	animation: dash1 0.5s 0.1s linear forwards;
	fill	:#fff;
	fill-opacity:0;
}

@keyframes dash1 {
    40% {fill-opacity: 0}
    100% {fill-opacity: 1}
    100% {stroke-dashoffset: 1}
}

.logo_svg12{
	stroke	:#fff;
	stroke-width:1;
	stroke-dasharray: 1000;
	stroke-dashoffset: 1000;
	animation: dash2 0.5s 1.2s linear forwards;
	fill	:#fff;
	fill-opacity:0;
}

@keyframes dash2 {
    40% {fill-opacity: 0}
    100% {fill-opacity: 1}
    100% {stroke-dashoffset: 1}
}

.logo_svg13{
	stroke	:#fff;
	stroke-width:1;
	stroke-dasharray: 1000;
	stroke-dashoffset: 1000;
	animation: dash3 0.5s 1.0s linear forwards;
	fill	:#fff;
	fill-opacity:0;
}

@keyframes dash3 {
    40% {fill-opacity: 0}
    100% {fill-opacity: 1}
    100% {stroke-dashoffset: 1}
}

.logo_svg14{
	stroke	:#fff;
	stroke-width:1;
	stroke-dasharray: 1000;
	stroke-dashoffset: 1000;
	animation: dash4 0.5s 0.7s linear forwards;
	fill	:#fff;
	fill-opacity:0;
}

@keyframes dash4 {
    40% {fill-opacity: 0}
    100% {fill-opacity: 1}
    100% {stroke-dashoffset: 1}
}

.logo_svg15{
	stroke	:#fff;
	stroke-width:1;
	stroke-dasharray: 1000;
	stroke-dashoffset: 1000;
	animation: dash5 0.5s 1.4s linear forwards;
	fill	:#fff;
	fill-opacity:0;
}

@keyframes dash5 {
    40% {fill-opacity: 0}
    100% {fill-opacity: 1}
    100% {stroke-dashoffset: 1}
}

.logo_svg16{
	stroke	:#fff;
	stroke-width:1;
	stroke-dasharray: 1000;
	stroke-dashoffset: 1000;
	animation: dash6 0.5s 1.1s linear forwards;
	fill	:#fff;
	fill-opacity:0;
}

@keyframes dash6 {
    40% {fill-opacity: 0}
    100% {fill-opacity: 1}
    100% {stroke-dashoffset: 1}
}

.logo_svg17{
	stroke	:#fff;
	stroke-width:1;
	stroke-dasharray: 1000;
	stroke-dashoffset: 1000;
	animation: dash7 0.5s 0.9s linear forwards;
	fill	:#fff;
	fill-opacity:0;
}

@keyframes dash7 {
    40% {fill-opacity: 0}
    100% {fill-opacity: 1}
    100% {stroke-dashoffset: 1}
}

.logo_svg18{
	stroke	:#fff;
	stroke-width:1;
	stroke-dasharray: 1000;
	stroke-dashoffset: 1000;
	animation: dash8 0.5s 1.2s linear forwards;
	fill	:#fff;
	fill-opacity:0;
}

@keyframes dash8 {
    40% {fill-opacity: 0}
    100% {fill-opacity: 1}
    100% {stroke-dashoffset: 1}
}

#wrap{
}



#about{
	margin-top: 150px;
}

#about h2{
	margin-bottom: 40px;
}

table#gaiyo{
	border-collapse: collapse;
	width: 50%;
	text-align: left;
	margin: 0 auto;
}

	 #gaiyo tr td{
	 	border-top:1px solid #fff;
	 	padding: 15px 0;
	 }

	 #gaiyo tr:hover{
	 	background-color: #222;
	    -webkit-transition: all 0.2s;
	    -moz-transition: all 0.2s;
	    -ms-transition: all 0.2s;
	    -o-transition: all 0.2s;
	    transition: all 0.2s;
	 }

	 #gaiyo tr td:first-child{
	 	padding-left: 10px;
	 	padding-right:20px;
	 }

	 #gaiyo tr:last-child td{
	 	border-bottom:1px solid #fff;
	 }

.space{
	margin-top:100px;
}




div#contact {
}

	#contact input,#contact textarea{
		border:0px;
		padding: 10px;
		font-size:17px;
		width: 50%;
		-webkit-border-radius: 5px;
		-moz-border-radius: 5px;
		border-radius: 5px;
		margin-top: 12px;
		letter-spacing: 0.02em;
	}

	#contact input:hover,#contact textarea:hover{
		cursor: pointer;
		background-color: #ddd;
	    -webkit-transition: all 0.4s;
	    -moz-transition: all 0.4s;
	    -ms-transition: all 0.4s;
	    -o-transition: all 0.4s;
	    transition: all 0.4s;
	}

	#contact input:focus{
	}



div#mail_check,div#send{
	margin: 0 auto;
	margin-bottom: 100px;
	margin-top: 100px;
	width: 50%;
}

#mail_check h2{

}

#mail_check table{
	border-collapse: collapse;
	width: 100%;
	text-align: left;
	margin: 0 auto;
	margin-top: 50px;
	margin-bottom: 50px;
}

	 #mail_check tr td{
	 	border-top:1px solid #fff;
	 	padding: 15px 0;
	 }

	 #mail_check tr:hover{
	 	background-color: #222;
	    -webkit-transition: all 0.2s;
	    -moz-transition: all 0.2s;
	    -ms-transition: all 0.2s;
	    -o-transition: all 0.2s;
	    transition: all 0.2s;
	 }

	 #mail_check tr td:first-child{
	 	padding-left: 10px;
	 	width: 150px;
	 	padding-right:20px;
	 }

	 #mail_check tr:last-child td{
	 	border-bottom:1px solid #fff;
	 }


	 #mail_check button+button{
	 	margin-left: 15px;
	}



#copy-rights{
	margin-top: 50px;
	margin-right: 20px;
	text-align: right;
	font-size: 12px;
}

#map_canvas,#map_canvas{
	margin-top: 15px;
	border-top:1px solid #fff;
}

.pc-view{
	display: inline;
}

.sp-view{
	display: none;
}





@media screen and (max-width:600px){

body{
	font-size: 12px;
}

h2{
	font-size: 18px;
}

#wrap{
	padding: 15px;
}

.space{
	margin-top:50px;
}


#about{
	margin-top: 30px;
}

#about h2{
	margin-bottom: 20px;
}


#logo_enologue{
	width: 250px;
}

table#gaiyo{
	width: 100%;
}

	 #gaiyo tr td:first-child{
	 	padding-left: 5px;
	 	width:25%;
	 	padding-right:10px;
	 }

#contact input,#contact textarea{
	width: 100%;
	box-sizing: border-box;
}

#contact input,#contact textarea,button{
	font-size: 14px;
}




#mail_check h2{

}

#mail_check table{
	margin-top: 30px;
	margin-bottom: 30px;
}

	 #mail_check tr td{
	 }

	 #mail_check tr:hover{

	 }

	 #mail_check tr td:first-child{
	 	padding-left: 10px;
	 	width: 60px;
	 	padding-right:20px;
	 }

	 #mail_check tr:last-child td{
	 	border-bottom:1px solid #fff;
	 }


	 #mail_check button+button{
	 	margin-left: 15px;
	}

div#mail_check,div#send{
	margin: 0 auto;
	margin-bottom: 10px;
	margin-top: 10px;
	width: 100%;
}

div#send{
	margin-bottom: 50px;
	margin-top: 10px
}

.pc-view{
	display: none;
}

.sp-view{
	display: inline;
}

}