@charset "UTF-8";
@import url(//vjs.zencdn.net/5.19/video-js.min.css);
/**
 * page-sakurao.scss
 * template-single-sakurao.php 用のページ固有スタイル。
 * 旧 sakuraodistillery.com の assets/css/sakurao.css を
 * Step 1（見た目の再現）として移植したもの。common.css の後にロードされる前提。
 *
 * Step 1 方針につき内容は旧 sakurao.css のままとし、画像参照の絶対パス
 * （/assets/img/...）のみビルド出力先 theme/assets/css/ からの相対パス
 * （../img/...）へ書き換えている。クラス名は Step 3 で FLOCSS 化済み（p-{slug}__*）。
 *
 * メモ:
 * - 先頭の `@import url(.../video-js.min.css)` は旧 sakurao.css 由来。このページに
 *   video-js プレイヤーは無いが、旧と同条件にするため faithful に保持（distillery-movie /
 *   .video-js 系の上書きも同様）。
 * - KV 背景動画（bg-sakura-video.mp4）と KV の opacity フェードは common.css の
 *   `body.is-bg-video` 系（_legacy-module）で制御。発火は page-sakurao.js（vide）。
 * - `body.is-bg-video.is-bg-video-ready` の body 背景 bg-sakura-01.jpg は動画再生後に表示。
 * - omo-slider（gintonic 缶のカスタムスライダー）の CSS は common.css（_legacy-add）に
 *   既出。JS は page-sakurao.js。
 */
/* public
============================================================ */
/* bg-video */
body.is-bg-video.is-bg-video-ready,
body.is-sp,
body.is-tab {
  background-image: url(../img/sakurao/bg-sakura-01.jpg);
  background-repeat: no-repeat;
  background-position: center top;
  background-size: 100% auto;
}

/* kv
============================================================ */
.p-sakurao__kv-inner {
  position: relative;
  height: 100vh;
}

.p-sakurao__kv-title {
  position: absolute;
  top: 50%;
  left: 50%;
  max-width: 1027px;
  width: 100%;
  margin-top: 70px;
  transform: translate(-50%, -50%);
}

@media screen and (max-width: 811px) {
  .p-sakurao__kv-inner {
    min-height: 100vw;
  }
  .p-sakurao__kv-title {
    max-width: 90%;
    margin-top: 0;
  }
}
/* sec-introduction
============================================================ */
.p-sakurao__introduction {
  margin-top: 100px;
  text-align: center;
}

.p-sakurao__introduction-copy-01 {
  margin-bottom: 80px;
}

.p-sakurao__introduction-copy-01 img {
  width: 670px;
}

.p-sakurao__introduction-copy-02 {
  margin-bottom: 130px;
}

.p-sakurao__introduction-copy-02 img {
  width: 280px;
}

@media screen and (max-width: 811px) {
  .p-sakurao__introduction {
    margin-top: 5rem;
  }
  .p-sakurao__introduction-copy-01 {
    margin-bottom: 4rem;
  }
  .p-sakurao__introduction-copy-02 {
    margin-bottom: 5rem;
  }
  .p-sakurao__introduction-copy-02 img {
    max-width: 75%;
  }
}
/* sec-gin
============================================================ */
.p-sakurao__gin {
  margin-top: 120px;
}

.p-sakurao__gin-title {
  padding: 0 20px 70px;
  text-align: center;
}

.p-sakurao__gin-title img {
  width: 1000px;
}

.p-sakurao__gin-sub-inner {
  padding: 140px 0 50px;
  background: url(../img/sakurao/bg-sakura-02.jpg) no-repeat center top;
  background-size: 100% auto;
}

.p-sakurao__gin-sub-inner .l-content-inner {
  display: table;
  table-layout: fixed;
  width: 100%;
}

.p-sakurao__gin-sub-inner .l-content-inner > * {
  display: table-cell;
  vertical-align: middle;
}

.p-sakurao__gin-sub-textbox {
  padding-bottom: 6%;
}

.p-sakurao__gin-sub-textbox > * {
  width: 84%;
}

.p-sakurao__gin-sub-title {
  margin-bottom: 80px;
  text-align: center;
}

.p-sakurao__gin-sub-title img {
  width: 200px;
}

.p-sakurao__gin-sub-type {
  margin-bottom: 20px;
  text-align: center;
}

.p-sakurao__gin-sub-type img {
  width: 260px;
}

.p-sakurao__gin-sub-text {
  text-align: center;
}

.p-sakurao__gin-sub-image-02 {
  text-align: right;
}

.p-sakurao__gin-sub-image-02 img {
  width: 94%;
}

@media screen and (max-width: 811px) {
  .p-sakurao__gin {
    margin-top: 5rem;
  }
  .p-sakurao__gin-title {
    padding: 0 1rem 3rem;
  }
  .p-sakurao__gin-sub-inner {
    padding: 3rem 0;
  }
  .p-sakurao__gin-sub-inner .l-content-inner {
    display: block;
  }
  .p-sakurao__gin-sub-inner .l-content-inner > * {
    display: block;
  }
  .p-sakurao__gin-sub-textbox {
    padding-bottom: 2rem;
  }
  .p-sakurao__gin-sub-textbox > * {
    width: auto;
  }
  .p-sakurao__gin-sub-title {
    margin-bottom: 2rem;
    text-align: center;
  }
  .p-sakurao__gin-sub-type {
    margin-bottom: 1.5rem;
  }
  .p-sakurao__gin-sub-image-02 {
    text-align: center;
  }
  .p-sakurao__gin-sub-image-02 img {
    width: 260px;
  }
}
/* sec-botanical
============================================================ */
.p-sakurao__botanical {
  text-align: center;
}

.p-sakurao__botanical-image-01 {
  /*margin: 0 -60px;*/
  margin: 120px -60px 0 -60px;
}

.p-sakurao__botanical-image-01 figcaption {
  padding: 0 60px;
  margin-top: 50px;
}

.p-sakurao__botanical-image-02 {
  margin: 220px 0 100px;
  text-align: center;
}

.p-sakurao__botanical-image-02 img {
  width: 316px;
}

.p-sakurao__botanical-image-03 {
  margin: 130px 0 100px;
}

@media screen and (max-width: 811px) {
  .p-sakurao__botanical-image-01 {
    /*margin: 0 -1rem;*/
    margin: 60px -1rem 0 -1rem;
  }
  .p-sakurao__botanical-image-01 figcaption {
    padding: 0 1rem;
    margin-top: 1rem;
  }
  .p-sakurao__botanical-image-02 {
    margin: 5rem 0;
  }
  .p-sakurao__botanical-image-02 img {
    max-width: 75%;
  }
  .p-sakurao__botanical-image-03 {
    margin: 5rem 0;
  }
  .p-sakurao__botanical .c-content__btn-more {
    margin-top: 1rem;
  }
}
/* sec-content-link
============================================================ */
@media screen and (min-width: 812px) {
  .c-content-link .c-content-link__list li {
    width: 50%;
  }
  .c-content-link .c-content-link__list li:nth-child(n+3) {
    margin-top: 55px;
  }
}
/* sec-online
============================================================ */
.p-sakurao__online {
  margin: 150px 0 120px;
}

.p-sakurao__online-outer {
  position: relative;
  z-index: 0;
}

.p-sakurao__online-outer::after {
  content: "";
  position: absolute;
  top: 0;
  left: -60px;
  display: block;
  width: 100%;
  height: 100%;
  padding: 0 60px;
  border: 4px solid;
  z-index: -1;
}

.p-sakurao__online-inner {
  display: table;
  table-layout: fixed;
  width: 100%;
}

.p-sakurao__online-inner > * {
  display: table-cell;
  vertical-align: middle;
}

.p-sakurao__online-textbox {
  width: 52%;
  padding: 2em 0;
}

.p-sakurao__online-text {
  margin-bottom: 1em;
  font-size: 18px;
}

.p-sakurao__online-caption {
  line-height: 1.5;
  margin-bottom: 0.25em;
  font-size: 45px;
  font-weight: 700;
  white-space: nowrap;
}

.p-sakurao__online-coming {
  margin: 0 -60px;
}

@media screen and (max-width: 811px) {
  .p-sakurao__online {
    margin: 5rem 0;
  }
  .p-sakurao__online-outer {
    padding: 2rem 1.5rem 0;
  }
  .p-sakurao__online-outer::after {
    left: 0;
    padding: 0;
    box-sizing: border-box;
    border-width: 0.2rem;
  }
  .p-sakurao__online-inner {
    display: block;
  }
  .p-sakurao__online-inner > * {
    display: block;
  }
  .p-sakurao__online-textbox {
    width: auto;
    padding: 0 0 1rem;
  }
  .p-sakurao__online-text {
    font-size: 110%;
  }
  .p-sakurao__online-caption {
    font-size: 200%;
  }
  .p-sakurao__online-image {
    text-align: center;
  }
  .p-sakurao__online-image img {
    width: 480px;
  }
  .p-sakurao__online-coming {
    margin: 0;
  }
}
/* distillery-movie */
.p-sakurao__distillery-movie {
  padding: 140px 0 180px;
  background: #000;
}

/* overwrite video-js */
.video-js:focus {
  outline: none !important;
}

.video-js .vjs-big-play-button {
  display: none;
}

.video-js .vjs-fullscreen-control {
  display: none;
}

.video-js .vjs-time-control {
  position: absolute;
  top: 20px;
  right: 0;
}

.video-js .vjs-load-progress {
  background: #f2f0e5;
}

.video-js .vjs-load-progress div {
  background: none;
}

.video-js .vjs-play-progress {
  background: #e19282;
}

.video-js .vjs-control-bar {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  width: 100%;
  bottom: auto;
  top: 100%;
  margin-top: 10px;
  background: none;
}

.video-js .vjs-play-control {
  position: absolute;
  top: 100%;
  left: 0;
  width: 80px;
  height: 80px;
  line-height: 80px;
  margin-top: 10px;
  border-radius: 50%;
  color: #000;
  background: #f2f0e5;
}

.video-js .vjs-play-control::before {
  line-height: inherit;
  font-size: 225%;
}

@media screen and (max-width: 811px) {
  .p-sakurao__distillery {
    margin-top: 5rem;
  }
  /* distillery-slider */
  .p-sakurao__distillery-thumb-slider-wrap {
    margin: 2rem -0.5rem 0;
  }
  .p-sakurao__distillery-thumb-slider .p-sakurao__slider-item {
    padding: 0 0.5rem;
  }
  .p-sakurao__distillery-slider-dots li {
    margin: 1.5rem 1rem;
  }
  /* distillery-movie */
  .p-sakurao__distillery-movie {
    padding: 3rem 0 9rem;
  }
  /* overwrite video-js */
  .video-js .vjs-time-control {
    position: absolute;
    right: 0;
  }
  .video-js .vjs-play-control {
    width: 3rem;
    height: 3rem;
    line-height: 3rem;
  }
}
/*
============================================================ */
/* sec-content-link
============================================================ */
@media screen and (min-width: 812px) {
  .c-content-link {
    margin-top: 120px;
  }
}
/*
============================================================ */
/* sec-news-pickup
============================================================ */
@media screen and (min-width: 812px) {
  .c-news-pickup {
    margin-top: 120px;
  }
}