@charset "UTF-8";
/**
 * page-nonalgin.scss
 * template-single-nonalgin.php 用のページ固有スタイル。
 * 旧 sakuraodistillery.com の assets/css/nonalgin.css を
 * Step 1（見た目の再現）として移植したもの。common.css の後にロードされる前提。
 *
 * Step 1 方針につき内容は旧 nonalgin.css のままとし、画像参照の絶対パス
 * （/assets/img/...）のみビルド出力先 theme/assets/css/ からの相対パス
 * （../img/...）へ書き換えている。クラス名は Step 3 で FLOCSS 化済み（p-{slug}__*）。
 *
 * 旧CSS からの最小限の逸脱（Dart Sass が解釈できないため）:
 * - 旧 67 行目の孤立したコメント閉じ記号（対応する開始記号の無いもの）を削除。
 *   ブラウザは無視するが Sass はコンパイルエラーになるため。
 * - 旧 313 行目 `.p-nonalgin__picture-thumb-slider-wrap,`（カンマ後にセレクタが無い）は
 *   ブラウザではルールごと破棄され PC でマージン未適用だった。Sass はこの不正
 *   セレクタを解釈できず、かつカンマを直すと旧に無い 20px のずれが生じるため、
 *   当該ルールは適用しない形（コメント化）で旧の描画に合わせている（詳細は該当箇所）。
 * 上 1 点目は視覚に影響しない構文修正、2 点目は旧の描画結果に合わせた対応。
 *
 * メモ:
 * - `#header` のフェード制御・`bg-video-babble` 系は旧サイトのヘッダー/背景動画向け。
 *   背景動画イントロは page-nonalgin.js が vide プラグインで再生する。
 * - `.p-nonalgin__picture .p-nonalgin__slider` は slick 初期化後（.slick-initialized）に表示。
 *   gintonic 用（picture-main-slider / picture-thumb-slider）と
 *   ginbuck 用（picture-main-slider2 / picture-thumb-slider2）の 2 組がある。
 * - PC 限定の背景イラスト（botanical_*.png）は各セクションの背景として配置。
 */
/* public
============================================================ */
html {
  height: 100%;
}

body {
  /* background: #FEFDE5;*/
  /* height: 100%; */
  background: #FFF !important;
}

main#main {
  background: linear-gradient(#F2F0E5, #ADD5B6);
}

/* bg-video
============================================================ */
.c-bg-video > div {
  /*
  background: #F9F;
  width: 600px;
  height: 600px;
  */
}

.c-bg-video video {
  /*
  background: #99F;
  width: 500px;
  height: 500px;
  */
}

body.is-bg-video-babble .kv {
  transition: opacity 1.5s ease-in-out 3s;
  opacity: 0;
}

body.is-bg-video-babble-ready .kv {
  opacity: 1 !important;
}

.c-bg-video {
  background: url(../img/common/loading-white.gif) no-repeat center center;
  background-color: #FFF;
}

/*
 * 炭酸動画はKVより前面に出しつつ、共通ヘッダーは常に操作できるようにする。
 * Cocoon の通常コンテンツは明示的なスタック順を持たないため、動画とヘッダーを
 * このページ内だけで同じスタッキングコンテキストに固定する。
 */
body.is-bg-video-babble .c-bg-video {
  z-index: 100;
}

body.is-bg-video-babble #header-container.l-header {
  position: relative;
  z-index: 101;
}

@media screen and (max-width: 811px) {
  /* 縦長画面でも、ヘッダー下の表示領域を泡動画で満たす。 */
  body.is-bg-video-babble .c-bg-video video {
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    transform: none !important;
    -o-object-fit: cover;
       object-fit: cover;
  }
}
/* table
============================================================ */
/* kv
============================================================ */
.c-bg-video span.p-nonalgin__video-over {
  display: block;
  width: 100%;
  height: 100%;
  /*
  background:rgba(180,216,189,0.3);
  background: url(/assets/img/test/bg-gradation.png);
  */
}

.p-nonalgin__kv {
  position: relative;
  height: 100vh;
  /*
  background: url(/assets/img/test/bg-babble.png);
  background-size: cover;
  background: #FFF;
  */
  background: linear-gradient(#FFF, #F2F0E5) !important;
}

.p-nonalgin__kv-figure,
.p-nonalgin__kv-figure > div {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: no-repeat left center/cover;
}

/* KV 背景 image-set 化（フェーズ5・WebP+フォールバック） */
.p-nonalgin__kv-animation-01 > div {
  background-image: url(../img/nonalgin/kv-01-pc.jpg);
  background-image: -webkit-image-set(url(../img/nonalgin/kv-01-pc.webp) type("image/webp"), url(../img/nonalgin/kv-01-pc.jpg) type("image/jpeg"));
  background-image: image-set(url(../img/nonalgin/kv-01-pc.webp) type("image/webp"), url(../img/nonalgin/kv-01-pc.jpg) type("image/jpeg"));
}

@media screen and (max-width: 811px) {
  .p-nonalgin__kv-figure > div {
    height: 200%;
  }
}
.p-nonalgin__kv-animation-01 {
  transition: opacity 3s ease;
  opacity: 0;
}

.p-nonalgin__kv-animation-02 {
  transition: opacity 3s ease 3s;
  opacity: 0;
}

.p-nonalgin__kv-animation-03 {
  transition: opacity 3s ease 2.5s;
  opacity: 0;
}

body.is-animated .p-nonalgin__kv-animation-01,
body.is-animated .p-nonalgin__kv-animation-02,
body.is-animated .p-nonalgin__kv-animation-03 {
  opacity: 1;
}

.p-nonalgin__kv-title {
  top: 50%;
  left: 50%;
  width: 300px;
  position: absolute;
  transform: translate(-50%, -50%);
}

@media screen and (max-width: 811px) {
  .p-nonalgin__kv {
    min-height: 140vw;
  }
  .p-nonalgin__kv-figure {
    height: 50%;
  }
  .p-nonalgin__kv-figure > div {
    background-position: center bottom;
  }
  .p-nonalgin__kv-title {
    /* position: relative; */
    max-width: 60%;
    margin: 0 auto;
    /* top: 47%;*/
    height: 53%;
    padding: 0;
  }
  .p-nonalgin__kv-title span:last-child {
    display: block;
    margin: 0 auto;
    /* position: absolute;*/
    /* right: 0; */
    /* bottom: 2em;*/
    padding-top: 5%;
    width: 70%;
    text-align: center;
  }
}
.p-nonalgin__kv-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.p-nonalgin__kv-image-sp {
  position: absolute;
  inset: 0;
  background: url(../img/nonalgin/kv-01-sp.jpg) no-repeat center center/cover;
  background: -webkit-image-set(url(../img/nonalgin/kv-01-sp.webp) type("image/webp"), url(../img/nonalgin/kv-01-sp.jpg) type("image/jpeg")) no-repeat center center/cover;
  background: image-set(url(../img/nonalgin/kv-01-sp.webp) type("image/webp"), url(../img/nonalgin/kv-01-sp.jpg) type("image/jpeg")) no-repeat center center/cover;
}

.p-nonalgin__kv-image > div {
  /*
  background: url(/assets/img/nonalgin/slide02.png) no-repeat center center / cover !important;
  */
  height: 100%;
}

/* sec-lead
============================================================ */
.p-nonalgin__lead {
  padding-top: 150px;
  position: relative;
}

.p-nonalgin__lead-inner {
  text-align: center;
  /*
  background: url(/assets/img/nonalgin/....png) no-repeat center center / cover;
  */
}

.p-nonalgin__lead-title {
  margin-bottom: 1.5em;
  font-size: 30px;
  font-weight: 400;
}

.p-nonalgin__lead-text {
  /*
  max-width: 800px;
  margin: 0 auto;
  */
  text-align: center;
}

@media screen and (max-width: 811px) {
  .p-nonalgin__lead-title {
    margin-bottom: 1.5em;
    font-size: 1.5rem;
  }
  .p-nonalgin__lead-text {
    text-align: left;
  }
}
/* sec-product
============================================================ */
.p-nonalgin__product {
  padding-bottom: 80px;
}

.p-nonalgin__product .description {
  margin: 40px 16px 16px 16px;
  text-align: left;
  padding-top: 4px;
}

@media screen and (max-width: 811px) {
  .p-nonalgin__product .description {
    margin-top: -40px;
  }
}
div.p-nonalgin__bottles {
  padding-top: 100px;
  text-align: center;
}

div.p-nonalgin__bottles img {
  width: 600px;
}

div.p-nonalgin__label {
  padding-top: 100px;
  text-align: center;
}

div.p-nonalgin__label img {
  width: 180px;
}

div.p-nonalgin__text-and-bottle {
  display: flex;
  flex-direction: row-reverse;
}

div.p-nonalgin__text-and-bottle div {
  padding-top: 100px;
  text-align: center;
}

div.p-nonalgin__bottle {
  width: 50%;
}

div.p-nonalgin__bottle img {
  width: 450px;
}

.p-nonalgin__gintonic div.p-nonalgin__text {
  padding-top: 170px;
}

.p-nonalgin__ginbuck div.p-nonalgin__text {
  padding-top: 220px;
}

.p-nonalgin__gintonic div.p-nonalgin__text img {
  width: 260px;
}

.p-nonalgin__ginbuck div.p-nonalgin__text img {
  width: 320px;
}

div.p-nonalgin__text p {
  padding-top: 30px;
  text-align: center;
}

@media screen and (max-width: 811px) {
  div.p-nonalgin__bottles {
    padding-top: 50px;
  }
  div.p-nonalgin__text-and-bottle {
    padding-top: 0;
    display: block;
  }
  div.p-nonalgin__bottle, div.p-nonalgin__text {
    padding-top: 0 !important;
    width: 100%;
  }
  div.p-nonalgin__text img {
    width: 400px;
  }
  div.p-nonalgin__text p {
    text-align: left;
  }
}
/* sec-slider
============================================================ */
.p-nonalgin__picture {
  margin-top: 120px;
}

.p-nonalgin__picture :focus {
  outline: none;
}

.p-nonalgin__picture .p-nonalgin__slider {
  display: none;
}

.p-nonalgin__picture .p-nonalgin__slider.slick-initialized {
  display: block;
}

/* 旧 CSS では `.p-nonalgin__picture-thumb-slider-wrap, {`（末尾カンマでセレクタ不正）だったため、
   この `margin: 20px 0 0` は PC で適用されていなかった（ブラウザはルールごと破棄）。
   カンマを直すと旧サイトに無い 20px の上マージンが付き、以降のレイアウトが 20px ずれて
   旧と不一致になる。旧の描画に合わせ、PC ではマージンを適用しない。
   SP 用の `margin: 1rem 0 0`（下部 @media max-width:811px）は旧でも有効なので別途保持。 */
.p-nonalgin__picture-thumb-slider .p-nonalgin__slider-item, .p-nonalgin__picture-thumb-slider2 .p-nonalgin__slider-item {
  padding: 0;
  overflow: hidden;
}

.p-nonalgin__picture-thumb-slider .p-nonalgin__slider-item a, .p-nonalgin__picture-thumb-slider2 .p-nonalgin__slider-item a {
  position: relative;
  display: block;
  cursor: pointer;
  transition: transform 2s cubic-bezier(0.19, 1, 0.22, 1);
}

.p-nonalgin__picture-thumb-slider .p-nonalgin__slider-item a:hover, .p-nonalgin__picture-thumb-slider2 .p-nonalgin__slider-item a:hover {
  transition-duration: 6s;
  transform: scale(1.1, 1.1);
}

.p-nonalgin__picture-slider-dots, .p-nonalgin__picture-slider-dots2 {
  text-align: center;
}

.p-nonalgin__picture-slider-dots li, .p-nonalgin__picture-slider-dots2 li {
  display: inline-block;
  margin: 1.5em 0.75em;
  vertical-align: middle;
}

.p-nonalgin__picture-slider-dots button, .p-nonalgin__picture-slider-dots2 button {
  display: block;
  position: relative;
  width: 7px;
  height: 7px;
  text-indent: -10em;
  overflow: hidden;
}

.p-nonalgin__picture-slider-dots button::after, .p-nonalgin__picture-slider-dots2 button::after {
  content: "";
  position: absolute;
  display: block;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: #b2b2b2;
}

.p-nonalgin__picture-slider-dots .slick-active button::after, .p-nonalgin__picture-slider-dots2 .slick-active button::after {
  background: #000;
}

/* overwrite slick */
.slick-dotted.slick-slider {
  margin: 0;
}

/* Step 1 追記: Cocoon 既定の `#main ul` 下マージンがスライダー直後に
   余分な隙間（約30px）を生むため打ち消す。メインスライダーは上の
   `.slick-dotted.slick-slider` で消えるが、サムネイルスライダーは dots が無く
   `.slick-dotted` に該当しないため別途指定する（whiteherbs と同趣旨）。
   gintonic / ginbuck の 2 組とも対象。 */
#main .p-nonalgin__picture-main-slider,
#main .p-nonalgin__picture-thumb-slider,
#main .p-nonalgin__picture-main-slider2,
#main .p-nonalgin__picture-thumb-slider2 {
  margin: 0 !important;
}

@media screen and (max-width: 811px) {
  .p-nonalgin__picture {
    margin-top: 0;
  }
  /* picture-slider */
  .p-nonalgin__picture-thumb-slider-wrap {
    margin: 1rem 0 0;
  }
  .p-nonalgin__picture-slider-dots li, .p-nonalgin__picture-slider-dots2 li {
    margin: 1rem 0.5rem;
  }
}
/* sec-botanical
============================================================ */
.p-nonalgin__botanical {
  padding-top: 120px;
  padding-bottom: 120px;
}

.p-nonalgin__botanical .p-nonalgin__lead-img-text {
  text-align: center;
}

.p-nonalgin__botanical .p-nonalgin__lead-img-text img {
  width: 250px;
}

.p-nonalgin__botanical .p-nonalgin__lead-text {
  margin-top: 20px;
  text-align: center;
}

.p-nonalgin__botanical .p-nonalgin__botanicals {
  padding-top: 80px;
  display: flex;
  justify-content: space-between;
}

.p-nonalgin__botanical .p-nonalgin__botanicals div {
  width: 45%;
  text-align: center;
}

.p-nonalgin__botanical .p-nonalgin__botanicals div img {
  height: 190px;
}

.p-nonalgin__botanical .p-nonalgin__botanicals div h2 {
  padding-top: 30px;
  text-align: center;
  font-size: 1.2em;
}

.p-nonalgin__botanical .p-nonalgin__botanicals div p {
  text-align: center;
}

.p-nonalgin__botanical .p-nonalgin__botanicals div p.p-nonalgin__name {
  text-align: center;
}

.p-nonalgin__botanical .p-nonalgin__botanicals div p.description {
  padding-top: 10px;
  text-align: center;
}

@media screen and (max-width: 811px) {
  .p-nonalgin__botanical .p-nonalgin__botanicals {
    padding-top: 30px;
    display: block;
  }
  .p-nonalgin__botanical .p-nonalgin__botanicals div {
    padding-top: 30px;
    width: 100%;
  }
  .p-nonalgin__botanical .p-nonalgin__botanicals div + div {
    padding-top: 50px;
  }
  .p-nonalgin__botanical .p-nonalgin__botanicals div h2 {
    text-align: center;
  }
  .p-nonalgin__botanical .p-nonalgin__botanicals div p.p-nonalgin__name {
    text-align: center;
  }
  .p-nonalgin__botanical .p-nonalgin__botanicals div p.description {
    text-align: left;
  }
}
/* sec-onlineshop
============================================================ */
.p-nonalgin__onlineshop {
  padding-top: 100px;
  padding-bottom: 100px;
  background: #f2f0e5;
}

.p-nonalgin__onlineshop img {
  border: 3px solid #000;
}

@media screen and (min-width: 1200px) {
  .p-nonalgin__onlineshop-inner {
    margin: 0 -60px;
  }
}
@media screen and (max-width: 811px) {
  .p-nonalgin__onlineshop {
    padding-top: 5rem;
    padding-bottom: 5rem;
  }
}
/* 背景イラスト
============================================================ */
/* PC */
@media screen and (min-width: 811px) {
  .p-nonalgin__lead-inner {
    max-width: 1042px;
    margin: 0 auto;
  }
  /* 3果実 */
  .p-nonalgin__lead .p-nonalgin__lead-inner {
    background: url(../img/nonalgin/botanical_1.png) no-repeat;
    background-size: 100px auto;
    background-position: left 0 top 0;
  }
  /* LEMON */
  .p-nonalgin__lead .l-content-inner {
    background: url(../img/nonalgin/botanical_2.png) no-repeat;
    background-size: 200px auto;
    background-position: right 0 top 0;
  }
  /* 草 右向き */
  .p-nonalgin__lead {
    background: url(../img/nonalgin/botanical_3.png) no-repeat;
    background-size: 300px auto;
    background-position: left 0 bottom 0;
  }
  /* 草 左向き */
  .p-nonalgin__product:has(.p-nonalgin__bottles) {
    background: url(../img/nonalgin/botanical_6.png) no-repeat;
    background-size: 300px auto;
    background-position: right 0 top 0;
  }
  /* 輪切り左 */
  .p-nonalgin__product .p-nonalgin__bottles {
    background: url(../img/nonalgin/botanical_4.png) no-repeat;
    background-size: 200px auto;
    background-position: left 50px top 250px;
  }
  /* ジントニック */
  /* 輪切り右 */
  .p-nonalgin__gintonic {
    background: url(../img/nonalgin/botanical_4.png) no-repeat;
    background-size: 200px auto;
    background-position: right 250px top 0;
  }
  /* 草 左向き */
  .p-nonalgin__gintonic .p-nonalgin__label {
    background: url(../img/nonalgin/botanical_6.png) no-repeat;
    background-size: 300px auto;
    background-position: right 0 bottom 0;
  }
  /* ジンバック */
  /* レモン右 */
  .p-nonalgin__ginbuck {
    background: url(../img/nonalgin/botanical_lemon_1.png) no-repeat;
    background-size: 260px auto;
    background-position: right 220px top 50px;
  }
  /* 草右向き */
  .p-nonalgin__ginbuck .p-nonalgin__product-inner {
    background: url(../img/nonalgin/botanical_3.png) no-repeat;
    background-size: 300px auto;
    background-position: left 0 top 400px;
  }
  /* カットレモン2個左 */
  .p-nonalgin__ginbuck .p-nonalgin__label {
    background: url(../img/nonalgin/botanical_lemon_2.png) no-repeat;
    background-size: 200px auto;
    background-position: left 300px top 150px;
  }
  /* カットレモン右 */
  .p-nonalgin__ginbuck .p-nonalgin__buck-back1 {
    background: url(../img/nonalgin/botanical_lemon_3.png) no-repeat;
    background-size: 100px auto;
    background-position: right 30px bottom 0;
  }
  /* 3果実 左*/
  .p-nonalgin__ginbuck .p-nonalgin__buck-back2 {
    background: url(../img/nonalgin/botanical_1.png) no-repeat;
    background-size: 100px auto;
    background-position: left 50px bottom 0;
  }
}
@media screen and (max-width: 811px) {
  /* LEMON */
  .p-nonalgin__sp-lemon {
    text-align: right;
  }
  .p-nonalgin__sp-lemon img {
    width: 200px;
  }
  /* 3果実 */
  .p-nonalgin__sp-lemon {
    background: url(../img/nonalgin/botanical_1.png) no-repeat;
    background-size: 100px auto;
    background-position: left 0 bottom 0;
  }
  /* 草 右向き */
  .p-nonalgin__sp-kusa {
    text-align: left;
  }
  .p-nonalgin__sp-kusa img {
    width: 200px;
  }
  /* 輪切り右 */
  .p-nonalgin__sp-kusa {
    background: url(../img/nonalgin/botanical_4.png) no-repeat;
    background-size: 100px auto;
    background-position: right 0 bottom 0;
  }
  /* ジントニック */
  /* 輪切り左 */
  .p-nonalgin__gintonic {
    background: url(../img/nonalgin/botanical_4.png) no-repeat;
    background-size: 100px auto;
    background-position: left 0 top 170px;
  }
  /* 草 左向き */
  .p-nonalgin__gintonic .p-nonalgin__label {
    background: url(../img/nonalgin/botanical_6.png) no-repeat;
    background-size: 150px auto;
    background-position: right -50px bottom 50px;
  }
}