@charset "utf-8";
@import url("../../css/font.css");
@import url("../../css/variable.css");
/*==========================================================*/
/* initial value
/*==========================================================*/
body {
  font-size: 13px;
}
section {
  width: 100%;
}
h1, h2, h3, h4, h5, h6 {
  font-weight: 400;
}
main#str-main * {
  box-sizing: content-box;
}
main#str-main .modal, main#str-main .modal * {
  box-sizing: border-box;
}
img {
  width: 100%;
}
a, a:visited {
  color: inherit;
}
a:not([class]) {
  text-decoration: inherit;
}
#Breadcrumb {
  margin: 0;
}
#Cont {
  width: 100%;
}
#main_contents {
  position: relative;
  margin-bottom: 20px;
  background: var(--color-wh);
  color: var(--color-bk);
  font-family: var(--font-Shippori);
}
#main_contents a:hover {
  text-decoration: none;
}
@media screen and (max-width: 750px) {
  .pc-only {
    display: none;
  }
}
@media screen and (min-width: 751px) {
  .sp-only {
    display: none;
  }
}

@media screen and (min-width: 751px) {
  .scroll-fadein {
    opacity: 0;
    transform: translateY(2vw);
  }
  .header-title {
    width: 100%;
  }
  .navi-list {
    display: flex;
    width: 68.5vw;
    margin: 1.1vw auto;
  }
  .navi-item {
    position: relative;
    padding-left: 5vw;
    display: flex;
    color: #91602A;
    width: 22.8vw;
    font-size: 1.14vw;
    text-align: center;
    transition: opacity .3s;
  }
  .navi-item:hover {
    opacity: .7;
  }
  .navi-item:nth-child(n+2) {
    border-left: solid 0.07vw #91602A;
  }
  .navi-item::after {
    content: "";
    display: block;
    position: absolute;
    height: 0.6vw;
    width: 1.4vw;
    top: 1.7vw;
    right: 1.5vw;
    background-image: url(../images/navi-arrow.svg);
    background-repeat: no-repeat;
    background-position: top;
    background-size: contain;
  }

  .copy {
    display: flex;
    text-align: center;
    justify-content: center;
    align-items: center;
    height: 100lvh;
    background-image: url(../images/copy_bg_pc.jpg);
    background-repeat: no-repeat;
    background-position: top;
    background-size: cover;
  }
  .statement-bg {
    background-image: url(../images/statement_bg_pc.jpg);
    background-repeat: no-repeat;
    background-position: top;
    background-size: cover;
    position: absolute;
    z-index: 0;
    top: 0;
    right:0;
    left:0;
    bottom:0;
    width: 100%;
    height: 125svh;
    overflow: hidden;
  }
  .statement {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100vh;
  }
  .statement-inner {
    text-align: center;
  }
  .copy-text {
    font-size: 3.6vw;
    color: #91602A;
  }
  .sentence-large {
    font-size: 2.3vw;
    color: #222222;
    margin-bottom: 4.3vw;
  }
  .sentence-small {
    font-size: 1.43vw;
    color: #222222;
    margin-top: 2.85vw;
    line-height: 2;
  }
  .sentence-middle {
    font-size: 1.7vw;
    color: #222222;
    margin-top: 2.85vw;
    line-height: 1.67;
  }

  .product-detail {
    position: relative;
    padding: calc(120 / var(--w-base) * 100vw) 0 calc(96 / var(--w-base) * 100vw);
    color: #393939;
    background-color: #F7EDD1;
    background-image: url(../images/statement_bg_pc.jpg);
    background-repeat: no-repeat;
    background-position: top;
    background-size: cover;
  }
  .product-detail__inner {
    width: 68.57vw;
    margin: 0 auto;
    padding: calc(52 / var(--w-base) * 100vw) 8.57vw 5.71vw;
    background-color: rgba(255, 255, 255, .6);
    backdrop-filter: blur(5px);
  }
  .product-detail__text-graph {
    display: flex;
    align-items: flex-end;
  }
  .product-detail__text {
    flex: 1;
  }
  .product-detail__graph {
    width: 38vw;
  }
  .product-detail__title {
    font-size: 2.29vw;
    display: flex;
    align-items: flex-end;
    gap: 0 calc(40 / var(--w-base) * 100vw);
  }
  .product-detail__whisky {
    display: block;
    width: calc(74 / var(--w-base) * 100vw);
  }
  .product-detail__description {
    font-size: 1.14vw;
    margin-top: 3.57vw;
  }
  .product-detail__annotation {
    margin-top: 0.86vw;
    font-size: 0.86vw;
    color: #7C7C7C;
    line-height: 2.1;
  }
  .product-detail__foods-features {
    display: flex;
    margin-top: 4.28vw;
  }
  .product-detail__foods {
    width: 21.43vw;
  }
  .product-detail__features {
    margin-left: 2.8vw;
    flex: 1;
  }
  .product-detail__title-small {
    font-size: 2vw;
    line-height: 1;
  }
  .product-detail__feature {
    display: flex;
    font-size: 1.71vw;
    margin-top: 2.86vw;
    line-height: 1;
  }
  .product-detail__feature-span {
    display: flex;
    align-items: center;
    margin-left: 0.714vw;
  }
  .product-detail__feature-description {
    font-size: 1.14vw;
    margin-top: 0.74vw;
  }

  .commitment {
    position: relative;
    z-index: 1;
    padding: 11.14vw 0 10.57vw;
    color: #222222;
    background-image: url(../images/product_bg_pc.jpg);
    background-repeat: no-repeat;
    background-position: top;
    background-size: cover;
  }
  .commitment__title-wrapper {
    display: grid;
    flex-wrap: wrap;
    width: 44vw;
    margin: 0 auto;
  }
  .commitment__title {
    display: inline-block;
    font-size: min(calc((46 / var(--w-base)) * 100vw), 46px);
    line-height: 1.261;
    color: #91602A;
    text-align: center;
    justify-self: center;
  }
  .commitment__note {
    display: inline-block;
    justify-self: right;
    font-size: 1.14vw;
    color: #7C7C7C;
  }
  .commitment__text {
    font-size: 2.28vw;
    text-align: center;
    margin-top: 2.86vw;
  }
  .commitment__inner {
    display: flex;
    align-items: center;
    width: 85.71vw;
    margin: 3.9vw auto 0;
    padding: 6.57vw 8vw 6.57vw 10.4vw;
    border: solid 0.07vw #91602A;
    box-sizing: border-box!important;
    background-color: rgba(255, 255, 255, .4);
  }

  .commitment__product {
    display: flex;
    width: min(calc((380 / var(--w-base)) * 100vw), 380px);
    align-items: center;
  }
  .commitment__inner-text {
    flex: 1;
    margin-left: min(calc((80 / var(--w-base)) * 100vw), 80px);
  }
  .commitment__inner-title {
    font-size: 2vw;
    color: #393939;
  }
  .commitment__inner-title .char {
    opacity: 0;
    transform: translateY(2vw);
  }
  .commitment__inner-description {
    margin-top: 3.57vw;
    font-size: 1.14vw;
    color: #393939;
    line-height: 1.875;
  }
  .commitment__inner-annotation {
    margin-top: 2.86vw;
    font-size: 0.86vw;
    color: #7C7C7C;
    line-height: 2.1;
  }
  .commitment__inner-annotation:nth-of-type(2) {
    margin-top: 0.86vw;
  }

  .howto {
    position: relative;
    width: 100%;
    padding-top: 8.57vw;
    color: #222222;
    background-color: #fff;
    z-index: 1;
  }
  .howto__wrapper {
    position: relative;
    margin-left: 15.7vw;
    padding-bottom: 2.8vw;
    z-index: 1;
  }
  .howto__subtitle {
    font-size: 2.28vw;
  }
  .howto__title {
    position: relative;
    font-size: 3.57vw;
    margin-top: 0.1vw;
  }
  .howto__title-img {
    position: absolute;
    width: 13.3vw;
    left: 16.07vw;
    top: 6.5vw;
  }
  .howto__text {
    font-size: 1.14vw;
    margin-top: 2.2vw;
    color: #393939;
    line-height: 1.875;
  }
  .howto__annotation {
    font-size: 1.14vw;
    margin-top: 1.5vw;
    color: #7C7C7C;
    line-height: 2;
  }
  .howto__image {
    position: absolute;
    width: 27.14vw;
    top: 0;
    right: 15.7vw;
  }

  .howto__steps {
    background-color: #F2EDE3;
    padding: 8.28vw 0 10.21vw;
  }
  .howto__steps-icon {
    position: absolute;
    width: 10vw;
    top: 4.3vw;
    left: -5vw;
  }
  .howto__steps-list {
    display: flex;
    width: 68.57vw;
    margin: 0 auto;
    gap: 1.93vw;
    position: relative;
  }
  .howto__steps-list::after {
    content: "";
    display: block;
    background-image: url(../images/howto_deco_pc.png);
    background-repeat: no-repeat;
    background-size: contain;
    width: calc(249 / 1400 * 100vw);
    height: calc(211 / 1400 * 100vw);
    position: absolute;
    bottom: calc(143 / 1400 * -100vw);
    right: calc(120 / 1400 * -100vw);
  }
  .howto__steps-item {
    background-color: #fff;
    width: 29.3vw;
    padding: 1.9vw 0 2.86vw;
  }
  .howto__steps-image {
    width: 10.26vw;
    margin: 0 auto;
  }
  .howto__steps-text {
    position: relative;
    font-size: 1.14vw;
    text-align: center;
    margin-top: 4.2vw;
    line-height: 1.875;
  }
  .howto__steps-text::after {
    content: "";
    position: absolute;
    display: block;
    width: 8.57vw;
    height: 0.0714vw;
    background-color: #91602A;
    top: -2.53vw;
    left: 50%;
    transform: translateX(-50%);
  }

  .banner {
    padding: 8.57vw 0 7.1vw;
  }
  .banner__link {
    display: block;
    width: 68.6vw;
    margin: 0 auto;
    transition: opacity .3s;
  }
  .banner__link:hover {
    opacity: .7;
  }
}

@media screen and (max-width: 750px) {
  .scroll-fadein {
    opacity: 0;
    transform: translateY(1vw);
  }
  .header-title {
    position: relative;
    width: 100%;
    height: 166.7vw;
  }

  @keyframes kvFadeIn {
    0%     { opacity: 0; }
    5%  { opacity: 1; } /* 1 / 20 */
    25% { opacity: 1; } /* 5 / 20 */
    35% { opacity: 0; } /* 7 / 20 */
    100%   { opacity: 0; }
  }

  .header-title-img {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    animation: kvFadeIn 20s linear 0s infinite normal none;
    height: 166.7vw;
  }

  .header-title-img:nth-child(1) {
    animation-delay: 0s;
  }
  .header-title-img:nth-child(2) {
    animation-delay: 5s;
  }
  .header-title-img:nth-child(3) {
    animation-delay: 10s;
  }
  .header-title-img:nth-child(4) {
    animation-delay: 15s;
  }

  .navi-list {
    display: flex;
    flex-wrap: wrap;
    width: 90vw;
    margin: 0 auto;
    justify-content: center;
  }
  .navi-item {
    position: relative;
    padding-left: 5vw;
    margin: 4vw 0;
    display: flex;
    color: #91602A;
    width: 22.8vw;
    font-size: 3.7vw;
    text-align: center;
  }
  .navi-item:nth-child(1) {
    width: 39.8vw;
    padding-left: 4.8vw;
  }
  .navi-item:nth-child(2) {
    width: 41.74vw;
    padding-left: 2.86vw;
    border-left: solid 0.013vw #91602A;
  }
  .navi-item:nth-child(3) {
    width: 48.8vw;
    padding-left: 5.6vw;
    border-left: solid 0.013vw #91602A;
    border-right: solid 0.013vw #91602A;
  }
  .navi-item::after {
    content: "";
    display: block;
    position: absolute;
    height: 1.8vw;
    width: 3.5vw;
    top: 6.5vw;
    right: 4.86vw;
    background-image: url(../images/navi-arrow.svg);
    background-repeat: no-repeat;
    background-position: top;
    background-size: contain;
  }
  .navi-item:nth-of-type(2):after {
    right: -1.14vw;
  }
  .navi-item:nth-of-type(3):after {
    right: 8.86vw;
  }
  .copy {
    display: flex;
    text-align: center;
    justify-content: center;
    align-items: center;
    height: 100lvh;
    background-image: url(../images/copy_bg_sp.jpg);
    background-repeat: no-repeat;
    background-position: top;
    background-size: cover;
  }
  .copy-text {
    font-size: 8vw;
    color: #91602A;
  }
  .statement-bg {
    background-image: url(../images/statement_bg_sp.jpg);
    background-repeat: no-repeat;
    background-position: top;
    background-size: cover;
    position: absolute;
    z-index: 0;
    top: 0;
    right:0;
    left:0;
    bottom:0;
    width: 100%;
    height: 125dvh;
    overflow: hidden;
  }
  .statement {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100dvh;
  }
  .statement-inner {
    text-align: center;
  }
  .sentence-large {
    font-size: 6.67vw;
    color: #222222;
    margin-bottom: 10.67vw;
  }
  .sentence-small {
    font-size: 4.8vw;
    color: #222222;
    margin-top: 8vw;
    line-height: 1.57;
  }
  .sentence-middle {
    font-size: 5.3vw;
    color: #222222;
    margin-top: 8vw;
    line-height: 1.675;
  }

  .product-detail {
    position: relative;
    padding: calc(100 / 750 * 100vw) 0 16vw;
    color: #393939;
    background-color: #F7EDD1;
    background-image: url(../images/statement_bg_sp.jpg);
    background-repeat: no-repeat;
    background-position: top;
    background-size: cover;
  }
  .product-detail__inner {
    width: 76.03vw;
    margin: 0 auto;
    padding: 13.3vw 5.3vw;
    background-color: rgba(255, 255, 255, .4);
    backdrop-filter: blur(5px);
  }
  .product-detail__text-graph {
    display: block;
  }
  .product-detail__graph {
    width: 100%;
    margin-top: 8vw;
  }
  .product-detail__title {
    font-size: 6.6vw;
    display: flex;
    align-items: flex-end;
    gap: 0 calc(56 / 750 * 100vw);
  }
  .product-detail__whisky {
    display: block;
    width: calc(109 / 750 * 100vw);
  }
  .product-detail__description {
    font-size: 3.73vw;
    margin-top: 6.6vw;
  }
  .product-detail__annotation {
    margin-top: 5.33vw;
    font-size: 2.66vw;
    color: #7C7C7C;
    line-height: 1.8;
  }
  .product-detail__foods-features {
    display: block;
    margin-top: 10.6vw;
  }
  .product-detail__foods {
    width: 100%;
  }
  .product-detail__features {
    margin-top: 8vw;
  }
  .product-detail__title-small {
    font-size: 6.6vw;
    line-height: 1;
  }
  .product-detail__feature {
    display: flex;
    font-size: 4.8vw;
    margin-top: 8vw;
    line-height: 1;
  }
  .product-detail__feature-span {
    display: flex;
    align-items: center;
    margin-left: 1.3vw;
  }
  .product-detail__feature-description {
    font-size: 3.73vw;
    margin-top: 2.66vw;
  }

  .commitment {
    position: relative;
    z-index: 1;
    padding: 17.1vw 0 16vw;
    color: #222222;
    background-image: url(../images/product_bg_sp.jpg);
    background-repeat: no-repeat;
    background-position: top;
    background-size: cover;
  }
  .commitment__title-wrapper {
    margin: 0 auto;
    text-align: center;
  }
  .commitment__title {
    color: #91602A;
    font-size: 8vw;
  }
  .commitment__note {
    font-size: 3.7vw;
    color: #7C7C7C;
    margin-top: 4vw;
  }
  .commitment__text {
    font-size: 4.8vw;
    text-align: center;
    margin-top: 5.3vw;
  }
  .commitment__inner {
    display: block;
    width: 78.7vw;
    margin: 5.3vw auto 0;
    padding: 10.66vw 5.3vw;
    border: solid 0.13vw #91602A;
    background-color: rgba(255, 255, 255, .4);
  }
  .commitment__product {
    width: 66vw;
    margin: 0 auto;
  }
  .commitment__inner-text {
    margin-top: 8vw;
  }
  .commitment__inner-title {
    font-size: 4.8vw;
    color: #393939;
    white-space: nowrap;
  }
  .commitment__inner-title .char {
    opacity: 0;
    transform: translateY(1vw);
  }
  .commitment__inner-description {
    margin-top: 6.6vw;
    font-size: 3.73vw;
    color: #393939;
    line-height: 1.6;
  }
  .commitment__inner-annotation {
    margin-top: 5.33vw;
    font-size: 2.66vw;
    color: #7C7C7C;
    line-height: 1.8;
  }


  .howto {
    position: relative;
    width: 100%;
    padding-top: 16vw;
    color: #222222;
    background-color: #fff;
  }
  .howto__wrapper {
    position: relative;
    width: 89.3vw;
    padding-bottom: 94.66vw;
    margin: 0 auto;
    z-index: 1;
  }
  .howto__subtitle {
    font-size: 4.8vw;
  }
  .howto__title {
    position: relative;
    font-size: 8vw;
    margin-top: 4vw;
  }
  .howto__title-img {
    position: absolute;
    width: 26.93vw;
    left: 35.8vw;
    top: 14.86vw;
  }
  .howto__text {
    font-size: 3.73vw;
    margin-top: 6.66vw;
    color: #393939;
    line-height: 1.875;
  }
  .howto__annotation {
    font-size: 3.73vw;
    margin-top: 5.33vw;
    color: #7C7C7C;
    line-height: 2;
  }
  .howto__image {
    position: absolute;
    width: 100%;
    bottom: -21.87vw;
    left: 0;
  }

  .howto__steps {
    position: relative;
    background-color: #F2EDE3;
    padding: 33.3vw 0 calc(564 / 750 * 100vw);
  }
  .howto__steps-icon {
    position: absolute;
    width: 28vw;
    top: -14vw;
    right: -2.7vw;
  }
  .howto__steps-list {
    width: 89.3vw;
    margin: 0 auto;
    position: relative;
  }
  .howto__steps-list::after {
    content: "";
    display: block;
    background-image: url(../images/howto_deco_sp.png);
    background-size: contain;
    background-repeat: no-repeat;
    width: calc(670 / 750 * 100vw);
    height: calc(514 / 750 * 100vw);
    position: absolute;
    bottom: calc(564 / 750 * -100vw);
    right: 50%;
    transform: translateX(50%);
  }
  .howto__steps-item {
    display: flex;
    background-color: #fff;
    width: 100%;
    padding: 1.33vw 0;
  }
  .howto__steps-item:nth-child(n+2) {
    margin-top: 4vw;
  }
  .howto__steps-image {
    width: 32vw;
    margin-left: 4.93vw;
  }
  .howto__steps-text {
    display: flex;
    position: relative;
    font-size: 3.73vw;
    margin-left: 12vw;
    line-height: 1.57;
    flex: 1;
    align-items: center;
  }
  .howto__steps-text::after {
    content: "";
    position: absolute;
    display: block;
    width: 0.13vw;
    height: 26.9vw;
    background-color: #91602A;
    top: 50%;
    left: -5.3vw;
    transform: translateY(-50%);
  }

  .banner {
    padding: 16vw 0 17.3vw;
  }
  .banner__link {
    display: block;
    width: 89.3vw;
    margin: 0 auto;
  }
}

/* 独自ヘッダー */
.fix-header {
  background-color: #fff;
  box-sizing: border-box !important;
  display: block;
  width: 100%;
}

.fix-navi {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: calc(13 / var(--w-base) * 100vw) 0;
  margin: 0 auto;
  width: calc(960 / var(--w-base) * 100vw);
}

.fix-navi_logo {
  display: block;
  width: calc(34 / var(--w-base) * 100vw);
}

.fix-navi_list {
  display: flex;
  justify-content: flex-end;
  gap: 0 min(calc(30 / var(--w-base) * 100vw), 30px);
}

.fix-navi_item a {
  color: #91602A;
  font-size: min(calc(14 / var(--w-base) * 100vw), 14px);
}

.fix-navi_item.active a {
  text-decoration: underline;
  text-underline-offset: 4px;
}

.fix-navi_sp {
  display: none;
}

@media screen and (min-width: 1081px) {
  .fix-navi {
    display: flex !important;
  }
}

@media screen and (max-width: 1080px) {
  .header-child {
    /* padding-top: 65px; */
    margin-top: 65px;
  }

  .fix-header {
    padding: 13px 20px 13px 20px;
    position: fixed;
    top: 65px;
    left: 0;
    z-index: 100;
    transform: translateY(0);
    transition: transform .3s ease-out;
    width: 100%;
    height: 65px;
  }

  .is-hidden {
    transform: translateY(-100%);
  }

  .is-lock {
    overflow: hidden;
  }

  .fix-navi {
    padding: 0;
    width: 100%;
  }

  .fix-navi_logo {
    width: 37.5px;
  }

  .fix-navi_list {
    background-color: rgba(255, 255, 255, .95);
    display: none;
    text-align: center;
    position: absolute;
    top: 64px;
    left: 0;
    width: 100%;
    height: 100svh;
    z-index: 10;
  }

  .fix-navi_item a {
    font-size: 18px;
  }

  .fix-navi_item.active a {
    text-decoration: none;
  }

  .fix-navi_item {
    margin-top: 40px;
  }

  .fix-navi_sp {
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .fix-navi_sp-text {
    color: #91602A;
    font-size: 8px;
    margin-top: 8px;
    text-align: center;
  }

  .hamburger {
    width: 25px;
    min-height: 18px;
    position: relative;
  }

  .hamburgerIcon {
    background-color: #91602A;
    display: block;
    width: 100%;
    height: 2px;
    transition: transform ease-in-out .2s;
  }

  .hamburgerIcon:nth-child(2) {
    margin: 6px 0;
  }

  .fix-navi_sp.is-open .hamburgerIcon:nth-child(1) {
    position: absolute;
    top: 50%;
    transform: translateY(-50%) rotate(45deg);
  }

  .fix-navi_sp.is-open .hamburgerIcon:nth-child(2) {
    opacity: 0;
  }

  .fix-navi_sp.is-open .hamburgerIcon:nth-child(3) {
    position: absolute;
    top: 50%;
    transform: translateY(-50%) rotate(-45deg);
  }
}