html {
  font-size: 62.5%;
}

#event_bnr {
  display: none;
}

body {
  background-color: #ffffff;
  color: #363636;
  font-size: 1.5rem;
  font-family: "Noto Serif JP", serif, "FOT-筑紫Aオールド明朝 Pr6 M", "游明朝体",
    "游明朝", YuMincho, "ヒラギノ明朝 ProN", "Hiragino Mincho ProN",
    "ＭＳ Ｐ明朝", "MS PMincho", serif;
  line-height: 1.2;
  font-feature-settings: "palt" 1;
  -webkit-font-smoothing: antialiased;
}

#top a img:hover {
  opacity: 0.7;
}

#top .inner {
  width: 100%;
  max-width: 1024px;
  margin: 0 auto;
  height: auto;
}

#point_01,
#point_02,
#about_lsc,
#lineup {
  line-height: 1.9;
  padding: 140px 0;
  text-align: center;
}

/* ------------------------------------
■　Title
------------------------------------ */

#top #wrapper .title {
  line-height: 2.6rem;
  padding-bottom: 2px;
  font-size: 1.6rem;
  font-weight: 100;
}

/* ------------------------------------
■　header
------------------------------------ */

header {
  display: block;
  height: 50px;
  padding-top: 10px;
  z-index: 100;
  background-color: #fff;
  position: -webkit-sticky;
  position: sticky;
  top: 0;
}

.whj_logo {
  width: 30px;
}

header .inner {
  display: flex;
  line-height: 30px;
}

header .inner ul {
  display: flex;
  margin: 0 0 0 auto;
}

/* ------------------------------------
■　kv
------------------------------------ */

#top #kv {
  background-color: #e4ebed;
  position: relative;
  height: calc(100vh - 100px);
}

#kv .inner h1 {
  font-size: 5.9rem;
  text-align: center;
  color: #fff;
  text-shadow: 0px 0px 11px rgba(0, 0, 0, 0.58);
  position: absolute;
  top: 210px;
  left: 0;
  right: 0;
  margin: auto;
  z-index: 99;
}
#kv .inner h1 span {
  font-size: 1.9rem;
}
#kv .inner h1 .en {
  font-size: 3.9rem;
}
#kv .vin {
  color: #696969;
  text-align: center;
  bottom: 20px;
  position: absolute;
  display: inline-block;
  left: calc(50% - 17vh);
}
#kv .kv_img {
  height: 85vh;
  width: auto;
  position: absolute;
  top: 40px;
  left: 0;
  right: 0;
  margin: auto;
  text-align: center;
}

#kv .kv_text {
  position: absolute;
  font-size: 3.4rem;
  left: calc(50% + 190px);
  padding-top: 62vh;
}
#kv .kv_text .btn_b {
  margin: 10px 0 20px 0;
  width: min-content;
}

#kv .kv_text .en_kv {
  font-size: 2.1rem;
  max-width: 310px;
}


/* ------------------------------------
■　ボタン
------------------------------------ */

/* ▼ ボタンB ▼ */
#top .btn_b {
  font-size: 2.1rem;
  font-weight: 300;
  color: #363636;
  /* background-color: #de0000; */
  line-height: 5.0rem;
  text-align: center;
  border-radius: 7px;
  width: calc(18vw);
  min-width: 300px;
  margin-bottom: 20px;
  border: #9b0000 1px solid;
}
#top .btn_b:hover {
  opacity: 0.7;
}
/* ▲ ボタンB ▲ */

/* ▼ ボタンC ▼ */
#top .btn_c {
  font-size: 2.4rem;
  font-weight: 300;
  color: #363636;
  background-color: #d2d2d2;
  line-height: 5.0rem;
  text-align: center;
  border-radius: 7px;
  width: calc(18vw);
  min-width: 300px;
  margin-bottom: 20px;
}
/* ▲ ボタンC ▲ */

/* ------------------------------------
■　ボタン
------------------------------------ */

#top h2 {
  font-size: 3.2rem;
  line-height: 1.4;
  margin-bottom: 20px;
}
#top h2 span {
  font-size: 1.2rem;
  color: #be6d00;
  vertical-align: top;
}

/* ------------------------------------
■　ロンドン酒チャレンジ金賞酒
------------------------------------ */
#image {
  background-image: url(../images/bk.jpg);
  background-position: center;
  background-size: cover;
  padding-top: 160px;
  position: relative;
  padding-bottom: calc(45vh);
}

.line_gray {
  background-color: #383838a3;
  height: 32vh;
}
.line_gray div {
  position: absolute;
  top: 70px;
  left: calc(14% + 100px);
  z-index: 99;
}
.line_gray img {
  vertical-align: bottom;
  padding: 20px 0;
  z-index: 99;
  height: 34vh;
  width: auto;
}
.line_wrap {
  position: relative;
}
.line_wrap::before {
  content: " ";
  width: 391px;
  height: 391px;
  display: block;
  border: 1px #fff solid;
  opacity: 0.3;
  border-radius: 100%;
  margin-bottom: -310px;
  margin-left: -92px;
}

#image .image_bottle {
  width: 100%;
  max-width: 640px;
  min-width: 100px;
  position: absolute;
  top: 10vh;
  right: calc(50% - 660px);
  z-index: 97;
}

#image .white_text {
  font-family: "Yu Gothic Medium", "游ゴシック Medium", YuGothic, 游ゴシック体,
    sans-serif;
  color: #fff;
  opacity: 0.5;
  position: absolute;
  top: 110px;
  right: calc(24% + 10px);
}

/* ------------------------------------
■　point_02
------------------------------------ */
#point_02 p {
  margin-bottom: 100px;
}

/* ------------------------------------
■　受賞酒３種
------------------------------------ */

#main ,#main2 {
  background-color: #e4ebed;
  position: relative;
  padding: 120px 0;
}

#main .item_flex ,#main2 .item_flex {
  display: flex;
  margin-bottom: 120px;
}
#main .item_flex:last-child, #main2 .item_flex:last-child {
  margin-bottom: 0px;
}

#main #item02, #main2 #item02 {
  flex-direction: row-reverse;
}

#main .item_img, #main2 .item_img {
  width: calc(30%);
  max-width: 260px;
  min-width: 220px;
  margin: 0 10%;
}

#main .item_text, #main2 .item_text {
  width: calc(49%);
  min-width: 360px;
  margin: 0 auto;
}

#main .item_text dd, #main2 .item_text dd {
  padding-bottom: 10px;
}

#main h3, #main2 h3 {
  font-size: 3.0rem;
  color: #9b0000;
}

#main .en_h3, #main2 .en_h3 {
font-size: 1.9rem;
margin: 5px 0 30px;
color: #9b0000;
}

#main h4, #main2 h4 {
  font-size: 3.0rem;
  margin-bottom: 30px;
}

#main dl, #main2 dl {
  line-height: 1.5;
  font-size: 1.4rem;
  margin-bottom: 30px;
}
#main dl.ja_comment, #main2 dl.ja_comment {
  margin-bottom: 20px;
}

#main ul, #main2 ul {
  width: 72%;
  min-width: 260px;
  margin-bottom: 30px;
}

#main ul li, #main2 ul li {
  border-bottom: 1px solid #bbb;
  padding: 5px 0 1px 0;
}

#main h5.comment, #main2 h5.comment {
  font-weight: 600;
  border-bottom: 1px #c9d7db solid;
  padding-bottom: 10px;
  margin-bottom: 5px;
}


/* ------------------------------------
■　受賞酒2020
------------------------------------ */

#main2021 {background: #e4ebed;}
#main2021 .inner {width: 100%; max-width: 1024px; padding: 120px 0 0;}
#main2021 .item_img {width: 100%; max-width: 190px; margin: 0 auto;}

#main2021 .main2021_wrap {display: flex; flex-wrap: wrap; justify-content: space-between;}
#main2021 .jushou_2021 {width: 100%; max-width: 260px; margin-bottom: 120px;}
#main2021 h3 {font-size: 3.0rem;color: #9b0000;}
#main2021 .en_h3 {font-size: 1.9rem; margin: 5px 0 30px; color: #9b0000;}
#main2021 h4 {font-size: 3.0rem; margin: 20px 0 10px;}

#main2021 .btn_b {min-width:250px; max-width: 260px;}
#main2021 .btn_c {min-width:250px; max-width: 260px;}

/* ------------------------------------
■　WHJコレクション
------------------------------------ */

#lineup {
  background-color: #e4ebed;
}
.lineup_inner {
  width: 80%;
  max-width: 1240px;
  margin: 0 auto;
}
#lineup ul {
  width: 100%;
}
#lineup ul li {
  width: 100%;
  max-width: 135px;
  min-width: 100px;
}
#lineup ul li img {
  width: 50%;
}

#lineup .lineup_flex {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
}

#link_c {
  padding-bottom: 160px;
  text-align: center;
  font-size: 2.4rem;
}
#link_c a img {
  width: 60px;
  margin: 8px auto;
}

/* ------------------------------------
■　おしらせ
------------------------------------ */
#news {
  padding: 140px 0;
}
#news .news_inner {
  width: 80%;
  max-width: 860px;
  margin: 0 auto;
}
#news h2 {
text-align: center;
}
.news-list {
  overflow: auto;
  max-height: 200px;
  }
.news-list__item {
display: block;
padding-top: 30px;
padding-bottom: 30px;
border-bottom: 1px solid #c9d7db;
}
.news-list dl.news-list__item:first-child {
padding-top: 0px;
}
.news-list__item__category {
display: flex;
width: 100%;
align-items: center;
margin-bottom: 15px;
font-size: 1.2rem;
}
.date {
margin-right: 30px;
}
.category {
line-height: 0.6rem;
height: 20px;
padding: 7px 13px;
background: #e60013;
border-radius: 8px;
color: #ffffff;
}

/* ------------------------------------
■　footer
------------------------------------ */

footer {
  border-top: 1px #bbb solid;
  padding: 100px 0 30px 0;
}

footer #foot_link {
  text-align: center;
}
footer #foot_link ul {
  display: flex;
  justify-content: center;
  margin-bottom: 20px;
}
footer #foot_link small {
  text-align: center;
}

/* ------------------------------------
■　footer table
------------------------------------ */

table {
  border-collapse: collapse;
  margin: 0 auto;
  padding: 0;
  margin: 20px auto;
  width: 100%;
  table-layout: fixed;
  font-size: 1.3rem;
}

table tr {
  background-color: #fff;
  border: 1px solid #bbb;
  padding: 0.35em;
}
table th,
table td {
  padding: 0.8em 10px 0.8em 1em;
  border-right: 1px solid #bbb;
  vertical-align: middle;
}
table th {
  font-size: 0.85em;
  background-color: #eee;
}
table thead tr {
  background-color: #eee;
}
.txt {
  text-align: left;
  font-size: 0.85em;
}
.price {
  text-align: right;
}

/* ------------------------------------
■　ふわっとスライド
------------------------------------ */

#kv .kv_img,
#kv h1,
#kv .kv_text {
  opacity: 0;
  animation-duration: 1.5s;
  animation-timing-function: ease-out;
  animation-fill-mode: forwards;
}

.kv_img {
  animation-name: fadein-bottom;
}

@keyframes fadein-bottom {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

#kv h1 {
  animation-name: fadein-top;
  animation-delay: 0.7s;
}

@keyframes fadein-top {
  0% {
    opacity: 0;
    transform: translateY(-20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

#kv .kv_text {
  animation-name: fadein-right;
  animation-delay: 1.3s;
}

@keyframes fadein-right {
  0% {
    opacity: 0;
    transform: translateX(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@media screen and (max-width: 1920px) {
  /* ------------------
Header
------------------- */
  #top .inner {
    width: 94%;
  }

  /* ------------------
KV
------------------- */
  #image .image_bottle {
    max-width: 585px;
  }
}

@media screen and (min-width: 1024px) and (max-width: 1300px) {
  /* ------------------
London
------------------- */
  #image .image_bottle {
    max-width: 550px;
  }
  #image .image_bottle {
    right: calc(50% - 510px);
  }
}

@media screen and (min-width: 600px) and (max-width: 1024px) {
  /* ------------------
KV
------------------- */
  #kv .inner h1 {
    font-size: 5.4rem;
    top: 190px;
  }
  #kv .inner h1 .en {
    font-size: 3.2rem;
  }
  #kv .kv_img {
    top: 20px;
  }
  #kv .kv_text {
    font-size: 3.2rem;
    left: calc(50% + 140px);
  }
  #top .btn_b {
    min-width: 265px;
  }
  /*-----------------
#London
-----------------*/
  .line_wrap::before {
    width: 30vh;
    height: 30vh;
    margin-bottom: -24vh;
  }
  #image .image_bottle {
    right: calc(50% - 340px);
  }
  #image {
    padding-top: 80px;
    padding-bottom: calc(50vh);
  }
  .line_gray {
    height: 30vh;
  }
  .line_gray div {
    left: calc(15%);
    top: 2vh;
  }
  .line_gray img {
    height: 30vh;
  }
  #image .image_bottle img {
    width: auto;
    height: 70vh;
  }

/*-----------------
■　受賞酒2020
-----------------*/

#main2021 .main2021_wrap {
  justify-content: space-around;
}
#main2021 .jushou_2021 {
max-width: 220px;
}
#main2021 .item_img {
max-width: 140px;  
}

/*-----------------
btn_b/btn_c
-----------------*/
#top .btn_b, #top .btn_c {
width: 100%;
min-width: 210px;
letter-spacing: -0.06em;
}
}

@media screen and (min-width: 600px) and (max-width: 800px) {
  /* ------------------
Header
------------------- */
  header .inner ul {
    display: none;
  }
  /* ------------------
KV
------------------- */
  #kv .inner h1 {
    font-size: 5.1rem;
    top: 190px;
  }

  #kv .kv_text {
    position: initial;
    text-align: center;
    padding-top: 74vh;
    font-size: 2.8rem;
  }
    #kv .kv_text .en_kv {
    margin: 0 auto;
}
  #kv .kv_img {
    height: 75vh;
    top: 5px;
  }
  #kv .kv_text .btn_b {
    margin: auto;
  }
  #kv .vin {
    left: calc(50% - 23vh);
  }
}

@media screen and (max-width: 599px) {
  /*-----------------
common 
-----------------*/
  #top .inner {
    width: auto;
    margin: 0 2rem;
  }
  #top h2 {
    font-size: 3rem;
  }
  header {
    display: block;
    height: 45px;
    padding-top: 6px;
  }
  .whj_logo {
    width: 35px;
    margin-right: 15px;
  }
  header .inner ul {
    display: none;
  }

  /*-----------------
btn_b
-----------------*/
  #top .btn_b, #top .btn_c {
    width: 100%;
  }
  /*-----------------
kv 
-----------------*/
  #top #kv {
    height: calc(100vh - 65px);
  }/* --------20210402追加-------- */
  #kv .inner h1 {
    font-size: 3rem;
  }
  #kv .inner h1 .en {
    font-size: 1.9rem;
  }
  #kv .kv_img {
    height: 63vh;
    width: auto;
    position: absolute;
    top: 15px;
    left: 0;
    right: 0;
    margin: auto;
    text-align: center;
  }
  #kv .kv_text {
    position: inherit;
    font-size: 2.4rem;
    left: calc(50% - 130px);
    margin: 0 auto;
    padding-top: 65vh;
    display: flex;
    flex-wrap: wrap;
    text-align: center;
  }
  #kv .kv_text .en_kv {
    margin: 0 auto;
}
  #kv .kv_text div,
  #kv .kv_text .btn_b {
    margin: 0 auto 10px;
  }
  #kv .kv_text div {
    width: 100%;
  }
  #kv .vin {
    left: auto;
    right: calc(50% - 150px);
    margin-bottom: 20px;
  }
  /*-----------------
#London
-----------------*/
  #image {
    padding-top: 5.8vh;
    padding-bottom: 54vh;
  }
  .line_gray {
    height: 21vh;
  }
  .line_gray img {
    width: auto;
    height: 24vh;
  }
  #image .image_bottle {
    right: calc(50% - 18vh);
    top: 30vh;
    width: auto;
  }
  #image .image_bottle img {
    width: auto;
    height: 46vh;
  }
  #image .white_text {
    display: none;
  }
  .line_wrap::before {
    width: 23vh;
    height: 23vh;
    margin-bottom: -20vh;
    margin-left: calc(50% - 23vh);
  }
  .line_gray div {
    position: absolute;
    left: 18%;
    top: 1vh;
  }

  /*-----------------
#main
-----------------*/
  #main .item_img img, #main2 .item_img img{
    width: auto;
    height: 50vh;
  }
  #main .item_img, #main2 .item_img {
    margin-left: calc(50% - 8vh);
  }
  #main .item_flex, #main2 .item_flex {
    flex-wrap: wrap;
  }
  #main .item_text, #main2 .item_text {
    min-width: 100%;
  }
  #main h3, #main2 h3 {
    font-size: 2.4rem;
  }
#main .en_h3, #main2 .en_h3 {
font-size: 1.6rem;
}
  #main h4, #main2 h4 {
    font-size: 2.4rem;
  }
  #main ul, #main2 ul {
    width: 100%;
  }
  

  /* ------------------------------------
■　受賞酒2020
------------------------------------ */

#main2021 .item_img {
max-width:120px
}

#main2021 .main2021_wrap {
  display: flex; flex-wrap: wrap; justify-content: space-around;
}
#main2021 .jushou_2021 {
  width: 100%; max-width: 100%; margin-bottom: 80px;
}
#main2021 h3 {
  font-size: 2.4rem;
}
#main2021 .en_h3 {
  font-size: 1.6rem;
}
#main2021 h4 {
  font-size: 2.4rem;
}

#main2021 .btn_b {width: 100%; max-width:none;}
#main2021 .btn_c {width: 100%; max-width:none;}

  /*-----------------
#lineup
-----------------*/
  #lineup ul li {
    margin-bottom: 15px;
  }

  /*-----------------
table
-----------------*/
  table {
    border: 0;
    width: 100%;
  }
  table th {
    background-color: #eee;
    display: block;
    border-right: none;
  }
  table thead {
    border: none;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
  }
  table td {
    border-bottom: 1px solid #bbb;
    display: block;
    font-size: 0.8em;
    text-align: right;
    position: relative;
    padding: 0.625em 0.625em 0.625em 4em;
    border-right: none;
  }
  table td::before {
    content: attr(data-label);
    font-weight: bold;
    position: absolute;
    left: 10px;
  }
  table td:last-child {
    border-bottom: 0;
  }

  /*-----------------
footer
-----------------*/
  footer #foot_link ul {
    display: block;
  }
}

  /*-----------------
フローティングバナー
-----------------*/

.floating-banner {
  position: fixed; /* 追従 */
  z-index: 99999; /* 他の要素の下に隠れないように */
  /* top: 600px; */
   /* バナーの上下の位置 */
bottom: 100px;
  right: 20px; /* バナーの左右の位置 */
}
.pc {
  width: 200px; /* バナーの横幅を指定 */
}
.floating-banner:hover {
  opacity: .8; /* ホバーで少し透過 */
}
.sp {
  display: none; /* PCではスマホ用のバナーは非表示に */
}
@media screen and (max-width: 990px) { /* タブレット用のブレイクポイントを指定 */
  .pc {
      display: none; /* タブレットサイズ以下でPC用のバナーを非表示に */
  }
}

@media screen and (max-width: 560px) { /* スマホ用のブレイクポイントを指定 */
  .sp {
      display: inline-block; /* 消していたスマホ用のバナーを表示させる */
      width: 100vw; /* スマホの画面幅いっぱいにバナーを表示 */
  }
  .floating-banner  {
      top: unset; /* PCで指定していた上下の位置指定をクリア */
      right: 0; /* 左右の隙間が空かないように */
      bottom: 0; /* 画面の最下部にぴったりくっつくように指定 */
  }
}




/*---------- 20210402追加 ここから ----------*/
#vin {
  text-align: center;
  background-color: #e4ebed;
  padding-bottom: 40px;
  color: #696969;
}

@media screen and (min-width: 1024px) {
#top #kv {
min-height: 700px;
}
#kv .kv_img {
min-height: 680px;
}
#image {
  min-height: 850px;
}
}

@media screen and (max-width: 599px) {
footer {
  padding: 100px 0 90px 0;
}
}
/*---------- 20210402追加 ここまで ----------*/






/*----------------------------------------
PC .modal
----------------------------------------*/
.flex_modal {
  display: flex;
}
.modal {
  position: fixed;
  display: none;
  z-index: 9999;
  top: 40%;
  width: 100%;
  height: 300px;
  margin: -116px 0 0;
  font-family: "Noto Sans JP", sans-serif;
  text-align: center;
  border-radius: 10px;
}
.modal h4 {
  font-size: 24px;
  line-height: 50px;
  border-top: 1px solid #c9caca;
  border-bottom: 1px solid #c9caca;
  margin: 0 0 20px;
}
.modal p {
  font-size: 18px;
  margin: 0 0 30px;
}
.modal p strong {
  font-size: 24px;
  color: #b28247;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.modal ul {
  justify-content: center;
}
.modal li {
  margin: 0 20px;
}
.modal a {
  display: block;
  width: 165px;
  color: #fff;
  background: #9ec83b;
  border-radius: 9px;
  font-size: 18px;
  /*font-weight: bold;*/
  line-height: 38px;
  padding: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.modal a.exit {
  background: #f8b62d;
  position: relative;
}
.modal li span {
  position: absolute;
  display: block;
  width: 165px;
  left: 0;
  bottom: 3px;
  font-size: 12px;
  font-weight: normal;
  text-align: center;
}

/*----------------------------------------
SP .modal
----------------------------------------*/
@media screen and (max-width: 599px) {
  .modal {
    position: fixed;
    display: none;
    z-index: 9999;
    top: 40%;
    width: 100%;
    height: 300px;
    margin: -116px 0 0;
    font-family: "Noto Sans JP", sans-serif;
    text-align: center;
    border-radius: 10px;
  }
  .modal h4 {
    width: 100%;
    font-size: 24px;
    line-height: 50px;
    border-top: 1px solid #c9caca;
    border-bottom: 1px solid #c9caca;
    margin: 0 0 20px;
  }
  .modal p {
    font-size: 16px;
    margin: 0 0 30px;
  }
  .modal p strong {
    font-size: 20px;
    color: #b28247;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
  .modal ul {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .modal li {
    margin: 0 0 20px;
  }
  .modal a {
    display: block;
    color: #fff;
    background: #9ec83b;
    border-radius: 9px;
    font-size: 18px;
    /*font-weight: bold;*/
    line-height: 38px;
    padding: 0;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
  .modal a.exit {
    background: #f8b62d;
    position: relative;
  }
  .modal li span {
    position: absolute;
    display: block;
    width: 100%;
    left: 0;
    bottom: 3px;
    font-size: 12px;
    font-weight: normal;
    text-align: center;
  }
}

/*PCの場合*/
.pc {
  display: inline !important;
}
.sp {
  display: none !important;
}
@media screen and (max-width: 599px) {
  /*タブレット、スマホの場合*/
  .pc {
    display: none !important;
  }
  .sp {
    display: inline !important;
  }
}