@charset "UTF-8";
/* CSS Document */

*{
margin:0;
padding:0;
}


h1,h2,h3,h4,h5,h6 {
font-size: 100%;
font-weight: normal;
}
body {
  /*font-size: 1.4em;*/
  margin-top: 100px;
}


header {
width: 100%;
height: 60vh;
}


.bx-viewport {
left: 0;
box-shadow: none;
border: none;
}
.bxSlider li {
height: 60vh;
background: center / cover no-repeat;
}

main {
	width:100%;
	/*max-width:800px;*/
	margin: auto;
}
.headarea h2 {
	font-family: 'Oswald', sans-serif;
	font-size:8vw;
	font-weight: bold;
	text-align: center;
	line-height: 1.8;
	margin: 4rem auto;
	color:#727171;
}

.headarea img{
margin: auto;
display: block;
width:30%;
}


.headarea h3 {
	text-align: center;
	font-size:16px;
	line-height: 1.8;
	margin: 4rem auto;
}

p {
	text-align: center;
	font-size:16px;
	margin: 2rem auto;
}

p a i{
	font-size:50px;
	padding:0 20px;
	color:#999;
}

.info,
.KHAinfo,
.shops {
background-color: #EEE;
width:100%;
padding: 4rem 0 8rem;
}

.shops {
padding-top: 2rem;
margin-top: 15rem;
}


.prdct,
.retail,
.sns,
.KHAshops{
width:100%;
padding: 4rem 0 8rem;
}

.info h1,
.prdct h1,
.shops h1,
.retail h1,
.sns h1,
.KHAinfo h1,
.KHAshops h1,
.beerkun h1{
font-family: 'Oswald', sans-serif;
font-size:5vw;
font-weight: bold;
text-align: center;
line-height: 1.8;
color:#727171;
padding-top: 6rem
}
.prdct h1 span,
.shops h1 span,
.retail h1 span,
.KHAinfo h1 span,
.KHAshops h1 span,
.beerkun h1 span{
display: block;
font-size: 20px;
color: #000;
}

.info h2{
text-align: center;
font-size: 20px;
}

.KHAinfo h2,
.beerkun h2{
text-align: center;
font-size: 20px;
margin-top: 2rem;
}
.KHAinfo h2 span,
.beerkun h2 span{
display: block;
font-size: 16px;
}
.KHAinfo img,
.beerkun img{
display: block;
max-width:800px;
margin: auto;
width:50%;
}

.KHAshops h2{
text-align: center;
font-size: 20px;
margin: 2rem auto;
border-bottom: 1px solid #000;
width:80%;
}

.KHAshops h3,
.beerkun h3{
text-align: center;
font-size: 17px;
margin: 4rem auto 2rem;
}

.info h3 {
text-align: center;
font-size: 20px;
margin: 2rem 0 0;
}
.info div,
.prdct div,
.shops div,
.retail div,
.sns div,
.KHAinfo div,
.KHAshops div{
max-width: 800px;
width:92%;
margin: auto;
}
.info div p{
font-size: 16px;
}

.KHAinfo div p{
font-size: 16px;
text-align: justify;
width:80%;
}

.beerkun table{
width:auto;
margin: auto;
}

.beerkun table caption{
border-bottom: 1px dotted #CCC;
}

.beerkun p{
max-width:800px;
width:50%;
}

.prdct h2 {
font-family: 'Oswald', sans-serif;
font-size:3vw;
font-weight: bold;
text-align: center;
line-height: 1.8;
color:#727171;
padding-top: 10rem;
clear: both;
}
.prdct h2 span {
font-size: 20px;
color:#000;
display: block;
border-bottom: 1px #808080 solid;
padding-bottom: 1rem;
}

.prdct div p{
font-size: 16px;
text-align: justify;
}
.prdct div p.bdr{
text-align: center;
border: 1px solid #B3B3B3;
border-radius: 4px;
padding: 1rem 0;
}
div.prdct_box{
width:100%;
margin: auto;
padding:4rem 0;
clear: both;
}
div.img_box{
width:42%;
float:left;
}
div.txt_box{
width:58%;
float:left;
}
div.txt_box2 {
width:100%;
}

div.img_box img {
width:100%;
}

div.txt_box .read,
div.txt_box2 .read {
text-align: center;
font-size: 19px;
margin-bottom: 1rem; 
margin-top: 0;
}

div.txt_box h3,
div.txt_box2 h3 {
background-color: #8C6239;
font-size: 22px;
text-align: center;
padding: 0.8rem 0;
color: #FFF;
}
div.txt_box h3 span,
div.txt_box2 h3 span{
font-family: 'Oswald', sans-serif;
display: block;
font-size:20px;
}


div.txt_box .txt {
text-align: justify;
line-height: 1.8;
}
div.txt_box2 .txt {
text-align: justify;
line-height: 1.8;
width:70%;
}

div.txt_box .food {
text-align: left;
font-size: 14px;
}

div.txt_box .food span {
display: block;
padding: 0.35rem 0.5rem;
margin-right: 0.5rem;
margin-bottom: 0.5rem;
font-size: 12px;
color:#FFF;
border-radius: 4px;
background-color: #595757;
width:6rem;
text-align: center;
}

div.txt_box .alc,
div.txt_box2 .alc {
font-family: 'Oswald', sans-serif;
font-size: 16px;
}
div.txt_box2 .alc {
width:70%;
}

div.txt_box .btn,
.beerkun .btn{
display: block;
text-align: center;
width:90%;
margin:0 auto 2rem;
border-radius: 0.5rem;
padding: 1.5rem 0;
text-decoration: none;
background-color: gold;
color:#666;
}


div.txt_box .alc span,
div.txt_box2 .alc span{
margin-left: 2rem
}

div.txt_box .alc span img,
div.txt_box2 .alc span img{
vertical-align: middle;
width:40px;
}


div.prdct_box dl {
clear: both;
width:100%;
background-color: #F2F2F2;
padding: 1.6rem 0;
}

div.prdct_box dt {
text-align: center;
border-bottom: 2px dotted #B3B3B3;
margin: 0 1rem 1rem;
padding-bottom: 1rem;
font-weight: bold;
}
div.prdct_box dd {
text-align: center;
font-size: 14px;
}




.info div table {
width:98%;
margin: 2rem auto;
}
.info th,
.info td {
border-bottom: dotted 1px #AAA;
padding:1rem 0.25rem;
}

.about_tour {
border: 1px solid #DDD;
width:80%;
max-width: 600px;
margin:4rem auto;
padding: 2rem;
color: #666;
box-sizing: border-box;
}
.about_tour h4 {
font-size: 16px;
font-weight: 600;
text-align: center;
}
.about_tour p {
font-size: 14px;
line-height: 1.6;
}

.shops a {
display: block;
font-size: 24px;
text-align: center;
background-color: rgba(120,119,119,1.00);
padding: 2.5rem;
text-decoration: none;
color: #FFFFFF;
font-weight: bold;
border-radius: 1rem;
}

.shops a>img {
display: inline-block;
width:38px;
margin-left: 1rem;
margin-top: -0.5rem;
vertical-align: middle;
}


.shops a:last-child{
margin-top: 3rem;
}


.mail a i {
	display: block;
	font-size:40px;
}

.mail a {
	display: block;
	width:80%;
	margin:4rem auto;
	text-align: center;
	text-decoration: none;
	border: 2px solid #999;
	padding: 1.5rem 0;
	border-radius: 8px;
	color:#999;
	font-size: 16px;
}

.KHAshops p{
width:90%;
margin: 2rem auto;
}

.KHAshops table {
width:90%;
margin: auto;
font-size: 13px;
}
.KHAshops table tr td {
border-bottom: 1px dotted #CCC;
padding: 1rem 0
}
.KHAshops table tr td:first-child{
width:13rem;
}
.KHAshops table tr td img {
width:1.5rem;
}

.KHAshops table tr td a {
font-size: 15px;
text-decoration: none;
font-weight: bold;
}

.KHAmovie {
width:80%;
margin: 3rem auto 0;
max-width: 980px;
}

.KHAmovie video {
width:100%;
margin: auto;
}


.info .kha2020 a {
display: block;
text-align: center;
text-decoration: none;
}

.info .kha2020 a img {
width:100%;
display: block;
margin: auto;
}
.info .kha2020 a p {
width:100%;
margin: 1rem auto;
text-align: justify;
color:#666;
}
.info .kha2020 a span {
display: block;
border: 2px solid #666;
padding: 1.5rem 0;
border-radius: 8px;
color:#666;
font-size: 18px;
width:100%;
margin: 1rem auto 3rem;
background-color: #FFF;
}
.info .kha2020 a span:hover {
opacity: 0.7;
}


footer {
	width:100%;
	background-color: #EEE;
	margin-top: 5vh;
	text-align: center;
	padding: 2rem 0;
	z-index: 0;
	position: relative;
}
footer:before {
	content: "";
	background-color: #EBEBEB;
	height: 20px;
	position: absolute;
	top:0;
	left: 0;
	width:100%;
	z-index: 1;
}
footer img {
	width:20%;
	margin-top: 2rem;
}
footer address {
	text-align: center;
	font-size: 10px;
	font-style: normal;
}

footer p{
	text-align: center;
	font-size: 10px;
	margin: 0.5rem 0 0;
}

.beer-kun{
position: fixed;
left:-25px;
bottom: -20px;
animation: fadeIn 2s linear;
animation-fill-mode: both;
}

@keyframes fadeIn{
	0%{
		opacity: 0;
	}
	100%{
		opacity: 1;
	}
}

.beer-kun a{
color: #000;
}

.beer-kun a img{
transform: rotate(45deg);
vertical-align: middle;
width:25%;
}

.beer-kun a strong{
display: inline-block;
 text-shadow    : 
       4px  4px 0px #ffffff,
      -4px  4px 0px #ffffff,
       4px -4px 0px #ffffff,
      -4px -4px 0px #ffffff,
       4px  0px 0px #ffffff,
       0px  4px 0px #ffffff,
      -4px  0px 0px #ffffff,
       0px -4px 0px #ffffff;
}


@media all and (min-width: 768px) {
header {
	height: 60vh;
}
		
header h1 img {
	max-width:300px;
	margin-top: 10vh;
}
footer img {
	max-width:100px;
}

.prdct h2 {
font-size:40px;
}
.headarea h3 {
	font-size:30px;
}

p {
	text-align: center;
	font-size:16px;
	margin: 2rem auto;
}

.mail a {
	display: block;
	width:60%;
	margin:4rem auto;
	text-align: center;
	text-decoration: none;
	border: 2px solid #999;
	padding: 1rem 0;
	border-radius: 8px;
	color:#999;
	font-size: 16px;
}	

.mail a:hover {
	opacity: 0.5;
}


}

@media all and (min-width: 920px) {
header {
	height: 60vh;
}
header h1 img {
	max-width:300px;
	margin-top: 7vh;
}
.headarea h2 {
	font-size:78px;
}
.info h1,
.prdct h1,
.shops h1,
.retail h1,
.sns h1 {
font-size:39px;
line-height: 1.8;
}

.prdct h2 {
font-size:32px;
}

}


@media (max-width: 767px) {

br.only_sp {
display: inline-block;
}

header {
	height: 60vh;
}
header h1 img {
	max-width:300px;
	margin-top: 15vh;
}

.KHAinfo {
padding:0 0 4rem;
}
.KHAshops{
padding-top: 1rem;
}


.info h1,
.prdct h1,
.shops h1,
.retail h1,
.sns h1,
.KHAinfo h1,
.KHAshops h1,
.beerkun h1{
font-size: 28px
}

.info th,
.info td {
display: block;
}
.info td {
border: none;
padding-bottom: 2rem
}

.shops {
margin-top: -2rem;
}

.shops a {
font-size: 18px;
}

.shops a>img {
display:block;
width:28px;
margin: 1rem auto 0;
}

.about_tour p {
text-align:justify;
}
br.only_dt{
display: none;
width:0;
height: 0;
}

.prdct h1 {
font-size: 28px
}

.prdct h2 {
font-size: 26px
}

div.prdct_box{
width:92%;
padding:4rem 0;
}


div.img_box,
div.txt_box {
width:100%;
float: none;
}

div.txt_box .read {
padding-top: 0;
margin-top: 0;
}

.w100 {
width:100%;
}

div.txt_box .alc,
div.txt_box2 .alc {
text-align: right;
}
div.txt_box2 .txt,
div.txt_box2 .alc{
width:100%;
}

.KHAinfo img,
.beerkun img{
width:80%;
}

.KHAmovie {
width:96%;
}


.KHAshops table {
width:90%;
margin: auto;
font-size: 13px;
}

.KHAshops table tr {
border-bottom: 1px dotted #CCC;
}
.KHAshops table tr th{
display: none;
}

.KHAshops table tr td {
border-bottom:none;
padding: 0.25rem 0;
display: block;
}
.KHAshops table tr td:first-child{
border-bottom: 1px dotted #999;
width:100%;
}
.KHAshops table tr td:last-child{
margin-bottom: 2rem;

}

.KHAshops table tr td img {
width:2rem;
}

.KHAshops table tr td a {
font-size: 16px;
text-decoration: none;
font-weight: bold;
}

.beerkun p{
width:90%;
margin:2rem auto;
line-height: 1.8;
}


}

.sml {
font-size: 80%;
}
.al_r {
text-align: right;
}
.al_c {
text-align: center;
}
.al_l {
text-align: left;
}
.red {
color:red;
}

.txt_cnt {
text-align: center;
}

.only_sp {
display: none;
width:0;
height: 0;
}