@charset "UTF-8";
/* CSS Document */
/* # =================================================================
   # informationibility
   # ================================================================= */
div.information dl{
 width:100%;
}
div.information dt{
 border-bottom:1px solid #ccc;
  float:left;
  padding:10px 5px;
}
div.information dd{
 border-bottom:1px solid #ccc;
  margin-left:100px;
  padding:10px 5px;
}
.original, .cockteil{
margin-top: 120px; }

/* ２カラム */
.container {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 5em;
}
.container .column--l,
.container .column--r {
  width: 90%; padding-right: 2em;
}
.container .column--r div .bold{
  font-size:150%;
}

.cockteil div p, .whisky div p,.gin div p, .vodka div p,
.ram div p, .tequila div p,.brandy div p, .liqueur div p{
	margin-bottom:1.5em; 
}

.beer div p, .sake  div p, .wine div p, .soft_drink div p,
.finfer_food, .menu01{	margin-bottom:1.5em; 
}

  .page-teaser .menu01{
    margin-top: 160px; }
    .page-teaser .menu01 .link {
      font-size: 24px;
      font-size: 2.4rem;
      line-height: 1.33333;
      margin-top: 12px; }
      @media print, screen and (max-width: 1079px) {
        .page-teaser .menu01 .link {
          font-size: 18px;
          font-size: 1.8rem;
          line-height: 1.77778;
          margin-top: 20px; } }
      .page-teaser .menu01 .link a {
		  text-decoration: none; }

/*767pxよりも大きいサイズ */
@media (min-width: 756px) {
 .container .column--l {
    width: 30%;
  }
 .container .column--r {
    width: 70%;
	display: flex;
    /*justify-content: center; 左右中央揃え*/
    align-items: center;     /*上下中央揃え*/
  }
div .s50 {
  border-style: none;
  /* Remove border when inside `a` element in IE 8/9/10 */
  width: 50%;
  height: auto;
  vertical-align: bottom; }
	
/*ボタン*/

.link02 a.btn_01 {
	display: block;
	text-align: center;
	vertical-align: middle;
	text-decoration: none;
	width: 75%;
	margin: auto;
	line-height: 150%;
	padding: 2rem 4rem;
	font-weight: bold;
	border: 2px solid #fff;
	color: #fff;
	transition: 0.5s;
	
}
.link02 a.btn_01:hover {
	color: #000;
	background: #fff;
	opacity:1;

}

.link02 a.btn_01 span{
	font-size: 2em;
	letter-spacing: 0.5rem;
}

.link02 a.btn_01 span small{
	font-size: 50%
}
.sns-banner{
    display: flex;
    flex-wrap:wrap;
}
.sns-banner li {
    width: calc(70%/4);/*←画像を横に4つ並べる場合*/
    padding:0 15px;/*←画像の左右に5pxの余白を入れる場合*/
    box-sizing:border-box;
}
.sns-banner li img {
    max-width:100%; /*画像のはみだしを防ぐ*/
    height: auto; /*画像の縦横比を維持 */
}
	
/*スライダー*/
.css-carousel-slider6 {
    width: 700px;
	height: 500px;
    overflow: hidden;
    position: relative;
}
.css-carousel-slider6 img {
    width: 100%;
    height: auto;
    vertical-align: top;
}

}

/*767pxよりも小さいサイズ */
 @media (max-width: 767px) {
 .container .column--l,  .container .column--r{
    width: 100%;
  }
 .original .br{
		content: "A" ;
  		white-space: pre;
	 } 
 .container img {
	display: block;
    border-style: none;
  /* Remove border when inside `a` element in IE 8/9/10 */
	margin: auto;
	width: 250px;
    vertical-align: bottom; }
.container .column--r{
	display: flex;
	justify-content: center; /*左右中央揃え*/}
div .s50 {
  border-style: none;
  /* Remove border when inside `a` element in IE 8/9/10 */
  width: 70%;
  height: auto;
  vertical-align: bottom; }
	 
/*ボタン*/

.link02 a.btn_01 {
	display: block;
	text-align: center;
	vertical-align: middle;
	text-decoration: none;
	width: 80%;
	margin: auto;
	line-height: 150%;
	padding: 2rem 2rem;
	font-weight: bold;
	border: 2px solid #fff;
	color: #fff;
	transition: 0.5s;
	
}
.link02 a.btn_01:hover {
	color: #000;
	background: #fff;
	opacity:1;

}

.link02 a.btn_01 span{
	font-size: 1.5em;
	letter-spacing: 0.5rem;
}

.link02 a.btn_01 span small{
	font-size: 50%
}
.sns-banner{
    display: flex;
    flex-wrap:wrap;
}
.sns-banner li {
    width: calc(80%/4);/*←画像を横に4つ並べる場合*/
    padding:0 15px;/*←画像の左右に5pxの余白を入れる場合*/
    box-sizing:border-box;
}
.sns-banner li img {
    max-width:100%; /*画像のはみだしを防ぐ*/
    height: auto; /*画像の縦横比を維持 */
}
/*スライダー*/
.css-carousel-slider6 {
    width: 450px;
	height: 350px;
    overflow: hidden;
    position: relative;
}
.css-carousel-slider6 img {
    width: 100%;
    height: auto;
    vertical-align: top;
}
}


/*アニメーション */

/* 上からフェードイン */
.slide-top {
	opacity: 0;
	transform: translate(0, -20px);
	transition: all 1s ease-out;
 }

/* 下からフェードイン */
.slide-bottom {
	opacity: 0;
	transform: translate(0, 20px);
	transition: all 1s ease-out;
 }

 /* 左からフェードイン */
.slide-left {
	opacity: 0;
	transform: translate(-20px, 0);
	transition: all 1s ease-out;
 }

/* 右からフェードイン */
.slide-right {
	opacity: 0;
	transform: translate(20px, 0);
	transition: all 1s ease-out;
 }

.sns{margin-top: 4em;
display:flex;
justify-content: center; /*左右中央揃え*/}

/*DIVフィードイン*/
.anim-box {
    opacity: 0; /* 最初は非表示にしておく */
    transition: all 2s; /* 動きを滑らかに */
}
.fadeIn_01 {
    opacity: 1;
}