@charset "UTF-8";
/**
 * page-selection.scss
 * template-single-selection.php 用のページ固有スタイル。
 * 旧 sakuraodistillery.com の assets/css/selection.css を
 * Step 1（見た目の再現）として移植したもの。common.css の後にロードされる前提。
 *
 * Step 1 方針につき内容は旧 selection.css のままとし、画像参照の絶対パス
 * （/assets/img/...）のみビルド出力先 theme/assets/css/ からの相対パス
 * （../img/...）へ書き換えている。クラス名は Step 3 で FLOCSS 化済み（p-{slug}__*）。
 *
 * メモ:
 * - `#header` のフェード制御は旧サイトのヘッダー（#header）向け。新サイトの
 *   ヘッダーは Cocoon の #header-container のため、この指定は空振り（無害）。
 * - 旧 `.no-webp .p-selection__kv-bg-02` の参照 `img-kv-02jpg`（ドット欠落）は旧CSSのタイポ。
 *   image-set() 化（Step3）で JPG フォールバックが実発火するようになるため、
 *   正しい `img-kv-02.jpg` に修正した（同ファイルはディスク上に存在）。
 * - `body.is-animated` は page-selection.js が付与する（KVアニメの発火）。
 */
/* public
============================================================ */
html {
  height: 100%;
}

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

/* kv
============================================================ */
.p-selection__kv-inner {
  position: relative;
  height: 100vh;
  min-height: 800px;
}

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

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

.p-selection__kv-animation-02 {
  transition: opacity 2s ease 1s;
  opacity: 0;
}

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

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

.p-selection__kv-title {
  position: relative;
  display: flex;
  flex-direction: row-reverse;
  padding-top: 5%;
  padding-right: 5%;
}

@media screen and (max-width: 811px) {
  .p-selection__kv-inner {
    min-height: 140vw;
    background: #65BAFF;
  }
  .p-selection__kv-image {
    height: 50%;
  }
  .p-selection__kv-image > div {
    background-position: center bottom;
  }
  .p-selection__kv-title {
    /* position: relative; */
    max-width: 60%;
    margin: 0 auto;
    /* top: 47%;*/
    height: 53%;
    padding: 0;
  }
  .p-selection__kv-title span:last-child {
    display: block;
    margin: 0 auto;
    /* position: absolute;*/
    /* right: 0; */
    /* bottom: 2em;*/
    padding-top: 5%;
    width: 70%;
    text-align: center;
  }
}
/*
 * KV背景画像。旧CSSは IDセレクタ #img-kv-01 等（詳細度1,0,0）で指定していたため
 * `.kv__image > div` の background ショートハンド（0,1,1）に勝っていたが、
 * FLOCSSリネームで単独クラス（0,1,0）にした際に負けて background-image が
 * none に潰されるリグレッションが発生（旧一致検証 2026-07-03 で検出）。
 * 親クラスを付けて詳細度 0,2,0 とし、ショートハンドより優先させる。
 */
.p-selection__kv-image > .p-selection__kv-bg-01 {
  background-image: url(../img/selection/img-kv-01.jpg);
  background-image: -webkit-image-set(url(../img/selection/img-kv-01.webp) type("image/webp"), url(../img/selection/img-kv-01.jpg) type("image/jpeg"));
  background-image: image-set(url(../img/selection/img-kv-01.webp) type("image/webp"), url(../img/selection/img-kv-01.jpg) type("image/jpeg"));
}

.p-selection__kv-image > .p-selection__kv-bg-02 {
  background-image: url(../img/selection/img-kv-02.jpg);
  background-image: -webkit-image-set(url(../img/selection/img-kv-02.webp) type("image/webp"), url(../img/selection/img-kv-02.jpg) type("image/jpeg"));
  background-image: image-set(url(../img/selection/img-kv-02.webp) type("image/webp"), url(../img/selection/img-kv-02.jpg) type("image/jpeg"));
}

.p-selection__kv-image > .p-selection__kv-bg-01-sp {
  background-image: url(../img/selection/img-kv-01-sp.jpg);
  background-image: -webkit-image-set(url(../img/selection/img-kv-01-sp.webp) type("image/webp"), url(../img/selection/img-kv-01-sp.jpg) type("image/jpeg"));
  background-image: image-set(url(../img/selection/img-kv-01-sp.webp) type("image/webp"), url(../img/selection/img-kv-01-sp.jpg) type("image/jpeg"));
}

.p-selection__kv-image > .p-selection__kv-bg-01-sp-inline {
  background-image: url(../img/selection/img-kv-01-sp.jpg);
  background-image: -webkit-image-set(url(../img/selection/img-kv-01-sp.webp) type("image/webp"), url(../img/selection/img-kv-01-sp.jpg) type("image/jpeg"));
  background-image: image-set(url(../img/selection/img-kv-01-sp.webp) type("image/webp"), url(../img/selection/img-kv-01-sp.jpg) type("image/jpeg"));
}

.p-selection__kv-image > .p-selection__kv-bg-02-sp {
  background-image: url(../img/selection/img-kv-02-sp.jpg);
  background-image: -webkit-image-set(url(../img/selection/img-kv-02-sp.webp) type("image/webp"), url(../img/selection/img-kv-02-sp.jpg) type("image/jpeg"));
  background-image: image-set(url(../img/selection/img-kv-02-sp.webp) type("image/webp"), url(../img/selection/img-kv-02-sp.jpg) type("image/jpeg"));
}

/* sec-lead
============================================================ */
.p-selection__lead {
  position: relative;
}

.p-selection__lead-inner {
  height: 770px;
  padding-top: 120px;
  text-align: center;
}

.p-selection__lead-inner {
  background: url(../img/selection/bg-lead.png) no-repeat center center/cover;
  background: -webkit-image-set(url(../img/selection/bg-lead.webp) type("image/webp"), url(../img/selection/bg-lead.png) type("image/png")) no-repeat center center/cover;
  background: image-set(url(../img/selection/bg-lead.webp) type("image/webp"), url(../img/selection/bg-lead.png) type("image/png")) no-repeat center center/cover;
}

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

.p-selection__lead-img-text {
  text-align: center;
  padding-top: 0;
  padding-bottom: 30px;
}

.p-selection__lead-img-text img {
  width: 260px;
}

.p-selection__lead-img-icons {
  position: absolute;
  bottom: 2em;
  text-align: center;
  width: 1100px;
  margin: auto;
  left: 0;
  right: 0;
}

.p-selection__lead-img-icons img {
  width: 110px;
  cursor: pointer;
}

.p-selection__lead-img-icons img#lead-gooddesign {
  /* margin-left: 100px; */
}

.p-selection__lead-description {
  position: absolute;
  bottom: 0;
  background-color: rgba(255, 255, 255, 0.7);
  width: 25em;
  border-radius: 10px;
  padding: 6px;
  display: none;
}

.p-selection__lead-description p:first-child {
  font-size: 1.2em;
  text-align: center;
}

.p-selection__lead-description p {
  text-align: left;
}

#lead-gooddesign-description {
  right: 0;
}

@media screen and (max-width: 1200px) {
  .p-selection__lead-img-icons {
    width: 100%;
  }
  .p-selection__lead-description {
    bottom: 150px;
    display: block;
  }
  #lead-setouchi-description {
    left: 10px;
  }
  #lead-gooddesign-description {
    right: 10px;
  }
  .p-selection__lead-img-icons {
    width: auto;
  }
}
@media screen and (max-width: 811px) {
  .p-selection__lead {
    /* height: auto; */
    background: #FFF;
  }
  .p-selection__lead-inner {
    padding-top: 5rem;
    padding-bottom: 20rem;
  }
  .p-selection__lead-inner {
    background: url(../img/selection/bg-lead-sp.png) no-repeat center center/cover;
    background: -webkit-image-set(url(../img/selection/bg-lead-sp.webp) type("image/webp"), url(../img/selection/bg-lead-sp.png) type("image/png")) no-repeat center center/cover;
    background: image-set(url(../img/selection/bg-lead-sp.webp) type("image/webp"), url(../img/selection/bg-lead-sp.png) type("image/png")) no-repeat center center/cover;
  }
  .p-selection__lead-title {
    margin-bottom: 1.5em;
    font-size: 1.5rem;
  }
  .p-selection__lead-text {
    text-align: left;
  }
  .p-selection__lead-img-icons {
    position: static;
  }
  .p-selection__lead-img-icons img {
    margin-top: 30px;
    margin-bottom: 20px;
  }
  .p-selection__lead-img-icons img#lead-gooddesign {
    margin-left: 0;
  }
  .p-selection__lead-description {
    position: static;
    width: 90%;
    margin: auto;
  }
  .p-selection__lead-description p:first-child {
    margin-bottom: 20px;
  }
}
/* sec-product
============================================================ */
.p-selection__product {
  padding-bottom: 80px;
}

.p-selection__product h2 {
  padding-top: 60px;
  text-align: center;
}

.p-selection__product h2 img {
  width: 100px;
}

.p-selection__product .bottles {
  margin-top: 40px;
  display: flex;
}

.p-selection__product .bottles > div {
  text-align: center;
}

.p-selection__product img.p-selection__bottle {
  height: 500px;
  display: block;
  margin: auto;
}

.p-selection__lemonrocks-bottle {
  background: url(../img/selection/bottle-lemon-bg.png) no-repeat left top;
  background-position: 40px 30px;
}

.p-selection__lemonrocks-bottle img.p-selection__logo-mark {
  margin-top: 10px;
  height: 50px;
}

.p-selection__lemonrocks-bottle .description {
  background: url(../img/selection/description-lemon-bg.png) no-repeat right top;
}

.p-selection__hassakurocks-bottle {
  background: url(../img/selection/bottle-hassaku-bg.png) no-repeat left top;
  background-position: 40px 30px;
}

.p-selection__hassakurocks-bottle img.p-selection__logo-mark {
  margin-top: 6px;
  height: 60px;
}

.p-selection__hassakurocks-bottle .description {
  background: url(../img/selection/description-hassaku-bg.png) no-repeat right top;
}

.p-selection__yuzurocks-bottle {
  background: url(../img/selection/bottle-yuzu-bg.png) no-repeat left top;
  background-position: 30px 30px;
}

.p-selection__yuzurocks-bottle img.p-selection__logo-mark {
  margin-top: 6px;
  height: 60px;
}

.p-selection__yuzurocks-bottle .description {
  background: url(../img/selection/description-yuzu-bg.png) no-repeat right top;
}

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

.p-selection__product .description p:first-child {
  font-size: 1.4em;
}

@media screen and (max-width: 811px) {
  .p-selection__product h2 img {
    width: 150px;
  }
  .p-selection__product .bottles {
    margin-top: 40px;
    display: block;
  }
  .p-selection__product .bottles > div {
    max-width: 600px;
    margin: auto;
    text-align: left;
  }
  div.bottles > div img.p-selection__logo-mark {
    height: auto !important;
  }
  .p-selection__product .description {
    margin-top: -40px;
  }
  .p-selection__product .en .description {
    margin-top: 0;
  }
  .p-selection__product .description p:first-child {
    margin-top: -0.2em;
    font-size: 1.2em;
    text-align: right;
    margin-right: 80px;
    margin-bottom: 20px;
  }
  .p-selection__lemonrocks-bottle img.p-selection__logo-mark {
    width: 150px;
    margin-left: 20px;
  }
  .p-selection__hassakurocks-bottle img.p-selection__logo-mark {
    width: 140px;
    margin-left: 20px;
  }
  .p-selection__yuzurocks-bottle img.p-selection__logo-mark {
    width: 100px;
    margin-left: 20px;
  }
}
/* sec-kugiri1
============================================================ */
.p-selection__kugiri1 div {
  background: url(../img/selection/kugiri1-bg.png) repeat-x right top;
  text-align: right;
  width: 80%;
  margin: auto;
  height: 50px;
}

@media screen and (max-width: 380px) {
  .p-selection__kugiri1 div {
    background: none;
  }
}
/* sec-kodawari
============================================================ */
.p-selection__kodawari {
  padding-top: 80px;
  padding-bottom: 100px;
}

.p-selection__kodawari h2 {
  text-align: center;
}

.p-selection__kodawari h2 img {
  width: 300px;
}

.p-selection__kodawari > div > div {
  display: flex;
  margin-top: 80px;
}

.p-selection__kodawari > div > div:nth-child(3) {
  flex-direction: row-reverse;
}

.p-selection__kodawari > div > div > div {
  width: 50%;
  text-align: center;
}

.p-selection__kodawari > div > div > div p {
  text-align: left;
}

.p-selection__kodawari > div > div > div p:first-of-type {
  padding-top: 50px;
  font-size: 1.2em;
  padding-bottom: 10px;
}

.p-selection__kodawari > div > div > div:first-child img {
  width: 400px;
}

.p-selection__kodawari > div > div > div:last-child img {
  width: 200px;
}

@media screen and (max-width: 811px) {
  .p-selection__kodawari > div > div {
    display: block;
  }
  .p-selection__kodawari > div > div > div {
    width: 90%;
  }
  .p-selection__kodawari > div > div > div:first-child img {
    width: 300px;
  }
  .p-selection__kodawari > div > div > div:first-child img:first-child {
    width: 200px;
    display: inline-block;
  }
  .p-selection__kodawari > div > div > div p:first-of-type {
    text-align: center;
  }
}
/* sec-kugiri2
============================================================ */
.p-selection__kugiri2 div {
  background: url(../img/selection/kugiri2-bg.png) repeat-x right bottom;
  text-align: left;
  width: 80%;
  margin: auto;
}

/* sec-method
============================================================ */
.p-selection__method {
  padding-top: 80px;
  padding-bottom: 100px;
}

.p-selection__method h2 {
  text-align: center;
}

.p-selection__method h2 img {
  width: 400px;
}

.p-selection__method > div > p {
  text-align: center;
}

.p-selection__method > div > p:first-of-type {
  font-size: 1.4em;
  margin-top: 20px;
  margin-bottom: 10px;
}

@media screen and (max-width: 811px) {
  .p-selection__method > div > p {
    text-align: left;
  }
  .p-selection__method > div > p:first-of-type {
    margin-top: 40px;
    text-align: center;
  }
}
/* hr
============================================================ */
hr {
  border-top: 2px solid #CCC;
  display: block;
  width: 80%;
}

/* sec-logo
============================================================ */
.p-selection__logo {
  padding-top: 80px;
  padding-bottom: 100px;
}

.p-selection__logo h2 {
  text-align: center;
}

.p-selection__logo h2 img {
  width: 200px;
}

.p-selection__logo > div > p {
  text-align: center;
  margin-top: 50px;
}

@media screen and (max-width: 811px) {
  .p-selection__method > div > p {
    text-align: left;
  }
}