@charset "UTF-8";

#undercolumn {
  max-width: 1100px;
  width: 100%;
}

.container {
  max-width: 1100px;
  width: 100%;
}

.inner {
  max-width: 980px;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}

.img-scale {
  width: 100%;
  overflow: hidden;
  transition: 0.3s;

  img {
    transition: 0.3s;
  }
}

.img-scale-wr:hover .img-scale img {
  transform: scale(1.1);
}

.btn {
  font-family: '游明朝', 'YuMincho', "ヒラギノ明朝 ProN W3", "HiraMinProN-W3", "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", serif;
  text-decoration: none !important;
  padding: 0 20px;
  max-width: 300px !important;
  height: 35px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  border-radius: 4px;
  color: #fff !important;
  background-color: #00618b;
  border: 2px solid #00618b;
  transition: 0.4s;
  letter-spacing: 0.2em;

  &:hover {
    background-color: #fff;
    color: #00618b !important;
    opacity: 1;
  }
}

.products_area ul {
  max-width: 980px;
  width: 100%;
}

#footer_wrap {
  margin-top: 50px;
}

.footer_btn_wr {
  display: block;
}

#logo_area {
  padding: 15px 0;
}

#logo_area svg {
  margin-top: 5px;
  width: 75px !important;
  height: auto !important;
}

#container {
  padding-top: 140px;
}

.tel_link {
  display: inline-block;
  pointer-events: none !important;
  text-decoration: none;
  font-size: 1.6rem;
  transition: 0.3s;

  span {
    font-size: 2.4rem;
  }

  &:hover {
    opacity: 0.8;
  }
}

.txt_visit01 {
  margin-top: 20px;
}

.visit_tel {
  background-color: #fff;
  padding: 5px 15px;
  width: 65%;
  text-align: center;
}

.ta_c {
  text-align: center;
}

.button_add {
  padding: 3px 10px !important;
  letter-spacing: 0.2em;
  font-size: 1.4rem;
  min-width: auto !important;
  line-height: 1.8 !important;
}

@media screen and (max-width: 768px) {
  #container {
    padding-top: 100px;
  }

  body.home #container {
    padding-top: 35px;
  }

  #logo_area svg {
    margin-top: 5px;
    width: 50px !important;
    height: auto !important;
  }

  .btn_login {
    background-image: url(../img/common/btn_login01.png);
    background-position: 50% 50%;
    background-repeat: no-repeat;
    background-size: cover;

    .btn {
      background-color: transparent !important;
      border: none !important;
    }
  }

  #headerInternalColumn {
    top: 25px;
    right: -15px;
  }

  .header_list {
    display: flex;
    align-content: center;
  }

  #headerInternalColumn ul .menu a {
    display: inline-block;
    padding: 3px 10px;
    width: 50px !important;
    height: 50px !important;
  }

  .tel_link {
    pointer-events: auto !important;
  }

  .visit_tel {
    margin-top: 10px;
    width: 100%;

    span {
      display: inline-block;
    }
  }

  .txt_visit01 {
    text-align: center;
  }
}

#header_navi {
  bottom: 20px;
}

@media screen and (max-width: 950px) {
  #header_navi ul li {
    margin-left: 20px;

    a {
      font-size: 1.4rem;
    }

    &:first-child {
      margin-left: 80px;
    }
  }
}


@media screen and (max-width: 768px) {
  #header_navi ul li {
    margin-left: 0px;

    a {
      font-size: 1.8rem;
    }

    &:first-child {
      margin-left: 0px;
    }
  }
}


.aspect {
  position: relative;
  overflow: hidden;
  width: 100%;
}

.aspect1-1::before {
  content: '';
  display: block;
  padding-top: 95%;
}

.aspect img {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.wp-pagenavi .extend {
  display: none;
}

.wp-pagenavi {
  a {
    margin-bottom: 10px;
  }
}

/* 取扱店舗 */

.shoptitle-wr {
  display: flex;
  flex-wrap: wrap;
}

.shoptitle {
  font-size: 1.8rem;
  font-family: '游明朝', 'YuMincho', "ヒラギノ明朝 ProN W3", "HiraMinProN-W3", "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", serif;
  font-weight: bold;
  text-align: center;
  max-width: 230px;
  width: calc(100% / 2);
  margin: 0;
  padding: 10px 15px;
  color: #00618b;
  background-color: #f1f1f1;
  cursor: pointer;
}

.shoptitle.show {
  background-color: #00618b;
  color: #fff;
}

.shoplist-wr {
  margin-top: 80px;
  display: none;
}

.shoplist-wr.show {
  display: block;
}

.shoplist {
  margin-top: 20px;

  li {
    padding: 30px 15px;
    border-bottom: 1px solid #ddd;

    &:first-child {
      border-top: 1px solid #ddd;
    }

    a {
      text-decoration: none;

      &:hover {
        color: #00618b;

        .shop_name {
          span {
            svg {
              fill: #00618b;
            }
          }
        }
      }
    }
  }
}

.shop_name {
  font-size: 1.8rem;
  font-weight: bold;

  span {
    margin-left: 10px;
    display: inline-block;
    width: 12px;

    svg {
      transition: 0.3s;
      width: 100%;
      fill: #000;
    }
  }
}

.shoplink_tel {
  display: block;
  margin-top: 20px;
  pointer-events: none;
}

@media screen and (max-width: 768px) {
  .shoplink_tel {
    pointer-events: all;
  }
}

.locallist {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  font-size: 1.6rem;
  font-weight: bold;

  li {
    text-align: center;

    &::before {
      font-size: 2rem;
      content: '｜';
    }

    &:last-child {
      &::after {
        display: inline-block;
        font-size: 2rem;
        content: '｜';
        transform: translateX(-5px);
      }
    }

    a {
      width: 120px;
      display: inline-block;
      text-decoration: none;
    }
  }
}

.localtitle {
  margin-top: 80px;
  margin-bottom: 0;
  font-size: 1.6rem;
  font-weight: bold;
}

.localtitle-first {
  margin-top: 60px;
}

.nolink {
  pointer-events: none !important;
}

/* お知らせページ関連 */

.catlist {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  font-size: 1.6rem;
  font-weight: bold;
  margin-bottom: 60px;

  li {
    text-align: center;

    &::before {
      display: inline-block;
      font-size: 2rem;
      content: '｜';
    }

    &:last-child {
      &::after {
        display: inline-block;
        font-size: 2rem;
        content: '｜';
      }
    }

    a {
      width: 120px !important;
      display: inline-block;
      text-decoration: none;
    }
  }
}

.newslist {
  display: flex;
  flex-wrap: wrap;

  >li {
    width: calc(100% / 3);
    padding: 0 10px;
    margin-bottom: 60px;
  }

  a {
    text-decoration: none;
  }
}

.news-date-cat-wr {
  display: flex;
  font-size: 1.2rem;
  margin-top: 10px;
  margin-bottom: 5px;
}

.news-date {
  width: 85px;
}

.newscatlist {
  width: calc(100% - 85px);
  display: flex;
  font-size: 1.2rem;

  li {
    &::after {
      content: '、';
    }

    &:last-child {
      &::after {
        content: '';
        display: none;
      }
    }

    a {
      text-decoration: none;
      color: #00618b;
    }
  }
}

.newscatlist-wr-single {
  font-family: '游明朝', 'YuMincho', "ヒラギノ明朝 ProN W3", "HiraMinProN-W3", "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", serif;

  .newscatlist {
    display: flex;
    justify-content: center;
    font-size: 1.6rem;
    margin-top: 25px;
    margin-bottom: 25px;
    width: 100%;

    li {
      &::after {
        content: '、';
      }

      &:last-child {
        &::after {
          content: '';
          display: none;
        }
      }
    }
  }
}

.newstitle {
  font-weight: bold;
}

.newscatlist-wr-top {
  .newscatlist {
    display: flex;
    justify-content: center;
    font-size: 1.4rem;
    margin-top: 10px;
    margin-bottom: 10px;

    li {
      &::after {
        content: '、';
      }

      &:last-child {
        &::after {
          content: '';
          display: none;
        }
      }
    }
  }
}

.news_area .news_list>a {
  width: calc(33.33333% - 20px);
  margin-right: 20px;
  padding: 40px 20px 40px;
  background: #fff;
  display: block;
  display: block;
  text-decoration: none;

  .date {
    color: #666;
    font-family: '游明朝', 'YuMincho', "ヒラギノ明朝 ProN W3", "HiraMinProN-W3", "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", serif;
    font-size: 16px;
    font-size: 1.6rem;
    font-weight: bold;
    text-align: center;
  }

  .title {
    margin: 15px auto 0;
    color: #00b0fa;
    font-size: 1.6rem;
    font-weight: bold;
    text-decoration: none;
  }

  .excerpt {
    margin: 10px auto 0;
  }
}

@media screen and (max-width: 768px) {
  .news_area .news_list>a {
    width: auto;
    margin: 30px 0 0 0;
    padding: 15px;

    &:first-child {
      margin-top: 20px;
    }
  }

  .catlist {
    li {
      &:last-child {
        &::after {
          display: none;
        }
      }
    }
  }

  .newslist {
    >li {
      width: 50%;
      padding: 0 5px;
      margin-bottom: 60px;
    }
  }
}

/* 酒蔵見学ページ */

#undercolumn_vist {
  letter-spacing: 0.1em;
}

.visitbox {
  margin-top: 150px;
  text-align: center;

  h3 {
    font-size: 3rem;
  }

  .visitbox-img {
    margin-top: 40px;
  }
}

.visitbox-first {
  margin-top: 120px;
}

.guidebox-l {
  width: 100%;
}

.guidebox-r {
  margin-top: 60px;
  width: 100%;
}

.guidebox-list {
  li {
    padding: 20px;
    display: flex;
    border-bottom: 2px solid #e5e5e5;

    &:first-child {
      border-top: 2px solid #e5e5e5;
    }

    .l {
      width: 140px;
    }

    .r {
      width: calc(100% - 170px);
    }
  }

  .flex {
    display: flex;

    p {
      &:first-child {
        width: 35px;
      }
    }
  }
}

@media screen and (max-width: 768px) {
  .guidebox-list {
    li {
      padding: 20px;
      display: block;

      .l {
        width: 100%;
        font-weight: bold;
        margin-bottom: 5px;
      }

      .r {
        width: 100%;
      }
    }
  }
}



.gmap {
  width: 100%;
  height: 450px;
  overflow: hidden;
  position: relative;

  iframe {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
  }
}

.readbox {
  text-align: center;
  background-color: #f7f7f7;
  padding: 80px 0 90px;

  .d-i {
    margin: 0 auto;
    max-width: 700px;
    width: 90%;
    display: inline-block;
    text-align: left;
  }
}

.t-in {
  padding-left: 1em;
  text-indent: -1em;
}

.button_visit {
  width: 95%;
  max-width: 480px !important;
  font-size: 2rem;
  font-weight: bolder;
  height: 80px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  border-radius: 8px;
  color: #00618b;
  background-color: #fff;
  border: 2px solid #00618b;
  transition: 0.3s;

  &:hover {
    background-color: #00618b;
    ;
    color: #fff;
    opacity: 1;
  }
}

.mt_150 {
  margin-top: 150px;
}

.tel-link {
  text-decoration: none;
  pointer-events: none;
}

@media screen and (max-width: 768px) {
  .visitbox {
    margin-top: 80px;
  }

  .visitbox-first {
    margin-top: 80px;
  }

  .mt_150 {
    margin-top: 80px;
  }

  .guidebox-title {
    text-align: center;
  }

  .guidebox {
    display: block;
  }

  .guidebox-l {
    width: 100%;
  }

  .guidebox-r {
    margin-top: 60px;
    width: 100%;
  }

  .tel-link {
    pointer-events: all;
  }

  .gmap {
    height: 0;
    padding-bottom: 350px;
  }
}

/* philosophy */

.philos-contaciner {
  padding: 0 15px;
}

.philosophy {
  #container {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

.philosbox {
  padding: 60px 0;
  width: 100%;
  display: flex;
  align-items: center;
  font-family: '游明朝', 'YuMincho', "ヒラギノ明朝 ProN W3", "HiraMinProN-W3", "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", serif;
}

.philosbox-g {
  background-color: #F7F7F7;
  flex-direction: row-reverse;
}

.philosbox-l {
  margin: 0 auto;
  padding: 40px 5%;
  width: 50%;
  max-width: 650px;
  text-align: center;
}

.philosbox-r {
  width: 50%;
}

.philosbox-img {
  max-height: 950px;
  min-height: 300px;
  height: 45vh;

  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
  }
}

.philosbox-img1 {
  img {
    object-fit: cover;
    object-position: center bottom;
  }
}

.philosbox-title {
  font-size: clamp(2rem, 2vw, 2.4rem);
}

.phone-on {
  display: none;
}

@media screen and (max-width: 768px) {
  .philosbox {
    padding: 0;
    padding-top: 40px;
    display: block;
    margin-bottom: 60px;

    &:last-child {
      margin-bottom: 0;
    }
  }

  .philosbox-g {
    padding-top: 60px;
  }

  .philosbox-l {
    margin: 0 auto;
    padding: 0px 5%;
    width: 100%;
    max-width: 650px;
    text-align: center;
    margin-bottom: 40px;
  }

  .philosbox-r {
    width: 100%;
  }

  .phone-on {
    display: block;
  }
}

.fadein {
  opacity: 0;
  visibility: hidden;
  transition: 1.5s;
  transform: translateY(30px);
}

.active {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) translateX(0);
}

@keyframes fadebg2 {
  0% {
    transform-origin: right;
    transform: scaleX(1);
  }

  100% {
    transform-origin: right;
    transform: scaleX(0);
  }
}

@keyframes fadebg3 {
  0% {
    transform: scaleX(1);
  }

  50.001% {
    transform-origin: right;
    transform: scaleX(1);
  }

  100% {
    transform-origin: right;
    transform: scaleX(0);
  }
}

.fadein-w {
  position: relative;

  &::before,
  &::after {
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
  }

  &::before {
    transform: scaleX(1);
    background-color: #fff;
    z-index: 9000;
  }

  &::after {
    transform: scaleX(0);
    background-color: #00618b;
    ;
    z-index: 8000;
  }

  &.active {
    &::before {
      transform: scaleX(0);
      animation-name: fadebg2;
      animation-duration: 0.4s;
      animation-timing-function: ease-in-out;
      animation-fill-mode: forwards;
    }

    &::after {
      transform: scaleX(0);
      animation-name: fadebg3;
      animation-duration: 0.8s;
      animation-timing-function: ease-in-out;
      animation-fill-mode: forwards;
    }
  }
}

/* header jp/en 選択CSS */

#headerInternalColumn {
  display: flex;
  align-items: center;
}

.lang_link_wr {
  font-size: 1.6rem;
  margin-right: 20px;
  display: flex;

  a {
    text-decoration: none;
    color: #00618b;
  }

  .current {
    color: #333333;
    pointer-events: none;
  }
}

.lang_line {
  margin: auto 5px;
}