@charset "UTF-8";
/* =====================
	トップページ
 ======================= */
.sec-ttl .ja-ttl {
  font-size: 200%;
  font-weight: normal;
  line-height: 1;
}

.sec-ttl .eng-ttl {
  font-size: 60%;
  font-weight: bold;
  line-height: 1.28;
  letter-spacing: 0.2em;
  color: var(--c_accent2);
}

/** ------------------------ hero ------------------------ **/
.hero {
  padding-bottom: 7.81%;
  overflow: hidden;
}

.hero .hero-img-slider {
  margin-bottom: 8.91%;
}

.hero .dots-wrap {
  display: flex;
  justify-content: center;
  margin-top: 1.56%;
}

.hero .dots-wrap li {
  width: 0.5em;
  height: 0.5em;
  margin: 0 0.5em;
  background: var(--c_border);
  border-radius: 50%;
  cursor: pointer;
  transition: var(--anim);
}

.hero .dots-wrap li:hover,
.hero .dots-wrap li.slick-active {
  background: var(--c_text);
}

.hero .dots-wrap li button {
  display: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  outline: none;
  padding: 0;
  border: none;
  background-color: transparent;
}

.hero .slogan {
  position: relative;
}

.hero .slogan .slogan-ttl {
  display: flex;
  justify-content: center;
  column-gap: 0.83em;
  transform: translateX(2%);
  margin-bottom: 5.83%;
}

.hero .slogan .slogan-ttl .ja-ttl {
  font-size: 200%;
  font-weight: normal;
  line-height: 1;
  writing-mode: vertical-lr;
}

.hero .slogan .slogan-ttl .eng-ttl {
  font-size: 60%;
  font-weight: bold;
  line-height: 1.28;
  letter-spacing: 0.2em;
  color: var(--c_accent2);
  writing-mode: vertical-lr;
}

.hero .slogan .slogan-txt {
  font-size: 150%;
  writing-mode: vertical-rl;
  display: flex;
  flex-direction: column;
  margin: 0 auto;
}

.hero .slogan .slogan-txt span {
  padding: 0.5em 0.5em 0;
  border-left: 1px solid var(--c_border);
}

.hero .slogan .slogan-txt span:first-child {
  border-right: 1px solid var(--c_border);
}

.hero .slogan .bg-paint04-img {
  width: 147.08%;
  position: absolute;
  top: -50%;
  left: -25%;
  z-index: -100;
  filter: blur(5px);
  clip-path: polygon(100% 0%, 100% 0%, 100% 0%, 100% 0%);
  transition: filter 2s ease-out, clip-path 2s ease-out;
  will-change: filter, transform, clip-path;
}

.hero .slogan .bg-paint04-img.is-show {
  filter: blur(0);
  clip-path: polygon(100% 0%, 0% 0%, 0% 100%, 100% 100%);
}

/** ------------------------ commitment ------------------------ **/
.commitment {
  padding: 7.81% 0 9.53%;
  background-color: var(--c_white);
}

.commitment .commitment-bnr a:hover {
  opacity: 1;
}

.commitment .commitment-bnr a:hover .commitment-bnr-img > img {
  filter: brightness(50%);
}

.commitment .commitment-bnr-img {
  position: relative;
}

.commitment .commitment-bnr-img img {
  transition: var(--anim);
}

.commitment .commitment-bnr-container {
  position: absolute;
  top: 26.67%;
  right: 2.75%;
  z-index: 10;
}

.commitment .commitment-bnr-container.arrow-big::after {
  filter: invert(1);
  position: absolute;
  top: calc(100% + 4.2em);
  right: 0;
}

.commitment .commitment-bnr a:hover .commitment-bnr-container.arrow-big::after {
  right: -1em;
}

.commitment .sec-ttl {
  display: flex;
  flex-direction: column;
  row-gap: 0.4em;
  margin-bottom: 1.5em;
}

.commitment .sec-ttl .ja-ttl,
.commitment .sec-ttl .eng-ttl {
  color: var(--c_white);
}

.commitment .sec-ttl .ja-ttl {
  font-size: 166.67%;
}

.commitment .commitment-bnr-txt {
  font-weight: bold;
  line-height: 2;
  color: var(--c_white);
}

.commitment .kihei-sake-bottle-img {
  width: 13.08%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/** ------------------------ product ------------------------ **/
.product {
  padding-bottom: 7.81%;
  background-color: var(--c_white);
}

.product .sec-ttl {
  margin-bottom: 4.33%;
  display: flex;
  align-items: baseline;
  column-gap: 0.67em;
}

.product .product-bnr:not(:last-of-type) {
  margin-bottom: 4.17%;
}

.product .product-bnr a:hover {
  opacity: 1;
}

.product .product-bnr-img {
  width: 100%;
  position: relative;
}

.product .product-bnr-img img {
  transition: var(--anim);
}

.product .product-bnr a:hover .product-bnr-img img {
  filter: brightness(50%);
}

.product .product-bnr-ttl {
  font-size: 300%;
  font-weight: normal;
  line-height: 1;
  color: var(--c_white);
  position: absolute;
  top: 50%;
  left: 5.83%;
  transform: translateY(-50%);
}

.product .product-bnr-ttl.arrow-big::after {
  width: 0.58em;
  height: 0.23em;
  filter: invert(1);
  position: absolute;
  top: 50%;
  left: calc(100% + 0.5em);
  transform: translateY(-50%);
}

.product .product-bnr a:hover .product-bnr-ttl.arrow-big::after {
  left: calc(100% + 0.5em + 0.33em);
}

.product .btn-product {
  padding: 0.85em 1.35em 0.7em 3.1em;
  margin: 0 auto 8.33%;
}

/* ↓↓　オンラインショップが解説するまでの一時的なもの　↓↓ */
.product .product-bnr-ttl {
  transition: var(--anim);
}

.product .product-bnr-ttl.hover {
  opacity: 0;
  position: absolute;
}

.product .product-bnr a:hover .product-bnr-ttl.default {
  opacity: 0;
}

.product .product-bnr a:hover .product-bnr-ttl.hover {
  opacity: 1;
}
/* ↑↑　オンラインショップが解説するまでの一時的なもの　↑↑ */

/** ------------------------ whats-new ------------------------ **/
.whats-new {
  padding-bottom: 5.21%;
}

.whats-new .whats-new-img {
  width: 100%;
  margin-bottom: 5.36%;
}

.whats-new .whats-new-container {
  display: flex;
  column-gap: 2.7em;
  margin-bottom: 4.17%;
}

.whats-new .sec-ttl {
  display: flex;
  column-gap: 0.63em;
}

.whats-new .sec-ttl .ja-ttl {
  writing-mode: vertical-lr;
}

.whats-new .sec-ttl .eng-ttl {
  writing-mode: vertical-lr;
}

.whats-new .whats-new-list {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.whats-new .whats-new-item {
  border-bottom: 0.5px solid var(--c_border);
}

.whats-new .whats-new-item a {
  display: flex;
  flex-direction: column;
  row-gap: 0.55em;
  padding: 1.25em 1em 1.5em 0;
}

.whats-new .whats-new-item:first-child a {
  padding-top: 0;
}

.whats-new .whats-new-article-date {
  /* font-family: var(--font_Noto_Sans_JP); */
  font-size: 75%;
  line-height: 1.47;
}

.whats-new .whats-new-article-ttl {
  /* font-family: var(--font_Noto_Sans_JP); */
  font-size: 100%;
  font-weight: normal;
}

.whats-new .btn-notice {
  padding: 0.85em 1.6em 0.7em 2.1em;
  margin: 0 auto;
}

/** ------------------------ company-recruit ------------------------ **/
.company-recruit {
  padding: 5.21% 0 7.76%;
  background-color: var(--c_white);
}

.company-recruit .company-recruit-bnr-list {
  display: flex;
  justify-content: space-between;
}

.company-recruit .company-recruit-bnr-item {
  width: 48.83%;
}

.company-recruit .company-recruit-bnr-item a:hover {
  opacity: 1;
}

.company-recruit .company-recruit-bnr-img {
  position: relative;
}

.company-recruit .company-recruit-bnr-img img {
  transition: var(--anim);
}

.company-recruit
  .company-recruit-bnr-item
  a:hover
  .company-recruit-bnr-img
  img {
  filter: brightness(50%);
}

.company-recruit .company-recruit-bnr-ttl {
  display: flex;
  align-items: baseline;
  column-gap: 0.33em;
  position: absolute;
  bottom: 0;
  left: 0;
  background-color: var(--c_white);
  padding: 0.23em 2.33em 0.03em 0.03em;
}

.company-recruit .company-recruit-bnr-ttl.arrow-big::after {
  width: 1.17em;
  height: 0.47em;
  position: absolute;
  top: 50%;
  right: 0.67em;
  transform: translateY(-50%);
}

.company-recruit
  .company-recruit-bnr-item
  a:hover
  .company-recruit-bnr-ttl.arrow-big::after {
  right: 0.17em;
}

.company-recruit .company-recruit-bnr-ttl .ja-ttl {
  font-size: 100%;
  font-weight: normal;
  line-height: 1;
}

.company-recruit .company-recruit-bnr-ttl .eng-ttl {
  font-size: 50%;
  font-weight: bold;
  line-height: 1.53;
  letter-spacing: 0.2em;
  color: var(--c_accent2);
}

/** -------------------- タブレット -------------------- **/
@media (max-width: 1280px) {
  /** ------------------------ hero ------------------------ **/
  .hero .slogan .bg-paint04-img {
    top: -25%;
  }

  /** ------------------------ commitment ------------------------ **/
  .commitment .commitment-bnr-container {
    top: 50%;
    transform: translateY(-50%);
  }

  .commitment .commitment-bnr-container.arrow-big::after {
    top: calc(100% + 1em);
  }
}

/** -------------------- スマホ -------------------- **/
@media (max-width: 699px) {
  .sec-ttl .ja-ttl {
    font-size: 25px;
  }

  .sec-ttl .eng-ttl {
    font-size: 12px;
  }

  /** ------------------------ hero ------------------------ **/
  .hero {
    padding-bottom: 50px;
  }

  .hero .hero-img-slider {
    margin-bottom: 50px;
  }

  .hero .dots-wrap {
    margin-top: 25px;
  }

  .hero .slogan .slogan-ttl {
    column-gap: 10px;
    margin-bottom: 25px;
  }

  .hero .slogan .slogan-ttl .ja-ttl {
    font-size: 30px;
  }

  .hero .slogan .slogan-ttl .eng-ttl {
    font-size: 12px;
  }

  .hero .slogan .slogan-txt {
    font-size: 20px;
  }

  .hero .slogan .bg-paint04-img {
    top: -15%;
  }

  /** ------------------------ commitment ------------------------ **/
  .commitment {
    padding: 50px 0 100px;
  }

  .commitment .sec-ttl {
    margin: 0;
  }

  .commitment .sec-ttl .ja-ttl {
    font-size: 25px;
  }

  .commitment .commitment-bnr-txt {
    margin-top: 10px;
    color: var(--c_text);
  }

  .commitment .commitment-bnr-container.arrow-big::after {
    width: 14.5px;
    height: 5.75px;
    top: calc(100% + 0.5em);
  }

  /** ------------------------ product ------------------------ **/
  .product {
    padding-bottom: 50px;
  }

  .product .sec-ttl {
    margin-bottom: 25px;
  }

  .product .product-bnr:not(:last-of-type) {
    margin-bottom: 25px;
  }

  .product .product-bnr-ttl {
    font-size: 25px;
  }

  /** ------------------------ whats-new ------------------------ **/
  .whats-new {
    padding-bottom: 50px;
  }

  .whats-new .whats-new-img {
    margin-bottom: 50px;
  }

  .whats-new .whats-new-container {
    column-gap: 25px;
    margin-bottom: 50px;
  }

  .whats-new .sec-ttl {
    column-gap: 10px;
  }

  .whats-new .whats-new-article-date {
    font-size: 14px;
  }

  .whats-new .whats-new-article-ttl {
    font-size: 16px;
  }

  /** ------------------------ company-recruit ------------------------ **/
  .company-recruit {
    padding: 50px 0;
  }

  .company-recruit .company-recruit-bnr-list {
    flex-direction: column;
    row-gap: 25px;
  }

  .company-recruit .company-recruit-bnr-item {
    width: 100%;
  }

  .company-recruit .company-recruit-bnr-ttl .ja-ttl {
    font-size: 20px;
  }

  .company-recruit .company-recruit-bnr-ttl .eng-ttl {
    font-size: 12px;
  }
}