@charset "UTF-8";
/**
 * owners-cask 差分レイヤー（di-trippernew の style.css ベースの上にのみ適用）
 * 対象: ログイン後（body#owner）＋ 樽一覧（body.archive-owners-cask）のみ。他ページは style.css の clamp のまま
 * PC/タブレット（850px+）: 参考 di-tripperbase 二段構成
 *   - min-height: 941px → fixed（viewport 内に収める）
 *   - max-height: 940px → cliff（relative + 縦スクロール）
 * SP（〜849px）は下のブロックで上書き
 */
/* PC/タブレット（850px+）: 子要素・TOP漏れ遮断（シェル配置はモード別ブロック） */
@media screen and (min-width: 850px) {
  body#owner .p-top.p-ownerSingle {
    display: block;
    grid-template-rows: none;
    margin: 0;
    padding: 0;
  }
  body#owner .p-top__container.owner::after,
  body#owner .p-top.p-ownerSingle .p-ownerSingle__container::after {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 10;
    background: url(../img/top_frame2.png) no-repeat center center/100% 100%;
    padding-bottom: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    content: "";
  }
  body#owner .p-top.p-ownerSingle .p-ownerSingle__head {
    position: absolute;
    bottom: calc(100% + 5.8333333333vw);
    left: 50%;
    transform: translateX(-50%);
    z-index: 6;
    width: 100%;
  }
  body#owner .p-top.p-ownerSingle .p-top__title-wrap.p-ownerSingle__title-wrap {
    position: absolute;
    top: -3.3333333333vw;
    left: 50%;
    transform: translateX(-50%);
    z-index: 5;
    margin: 0;
    width: 100%;
  }
  body#owner .p-top.p-ownerSingle .p-ownerSingle__swiper {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    overflow: hidden;
  }
  body#owner .p-top.p-ownerSingle .p-ownerSingle__swiper .swiper-slide {
    position: relative;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
  }
  body#owner .p-top.p-ownerSingle .p-ownerSingle__swiper .swiper-slide .table,
  body#owner .p-top.p-ownerSingle .p-ownerSingle__swiper .swiper-slide .taru-status-container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 48.125rem;
    max-width: calc(100% - 3rem);
  }
  body#owner .p-top.p-ownerSingle .p-ownerSingle__swiper .swiper-slide .row-border-none {
    justify-content: center;
  }
  body#owner .p-top.p-ownerSingle .p-ownerSingle__swiper .swiper-slide .head-border-none {
    width: 36vw;
    text-align: right;
  }
  body#owner .p-top.p-ownerSingle .p-ownerSingle__swiper .swiper-slide .head-title {
    margin: 0 auto;
    text-align: center;
  }
  body#owner .p-top.p-ownerSingle .p-ownerSingle__swiper .swiper-slide .remark {
    position: absolute;
    /* 正解: 2.5vw（4vw は Console 検証後も参考と不一致のため廃止済み） */
    bottom: 2.5vw;
    left: 50%;
    transform: translateX(-50%);
    margin: 0;
    width: 100%;
    color: #F72B21;
    font-weight: 400;
    font-size: 1vw;
    line-height: 1.5;
    letter-spacing: 0;
    text-align: center;
  }
  body#owner .p-top.p-ownerSingle .p-ownerSingle__swiper .swiper-slide .remark span {
    display: inline-block;
    padding-left: 1.3333333333vw;
    font-weight: 400;
    font-size: 1vw;
    line-height: 1.5;
    letter-spacing: 0.15em;
  }
}
/* モード A（参考）: 高さ 941px 以上 → fixed + viewport 内収納 */
@media screen and (min-width: 850px) and (min-height: 941px) {
  body#owner .p-top.p-ownerSingle,
  body#owner .p-ownerSingle {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    height: 100dvh;
    overflow: hidden;
  }
  body#owner .p-top.p-ownerSingle .p-ownerSingle__scroll-y {
    padding: 0;
    width: 100%;
    height: 100%;
    min-height: 0;
  }
  body#owner .p-top__container.owner,
  body#owner .p-top.p-ownerSingle .p-ownerSingle__container,
  body#owner .p-ownerSingle__container {
    position: fixed;
    top: calc(50% + 5.8333333333vw);
    right: auto;
    left: 50%;
    transform: translate(-50%, -50%);
    box-sizing: border-box;
    margin: 0 0 3.3333333333vw;
    padding: 0;
    aspect-ratio: 1144/570;
    width: calc(100% - 5vw);
    max-width: calc(100% - 16.6666666667vw);
    height: auto;
    max-height: calc(100% - 10vw);
    overflow: visible;
  }
}
/* ズームアウト等: CSS は fixed 判定だが見えている高さが短い → cliff 強制 */
@media screen and (min-width: 850px) and (min-height: 941px) {
  body#owner.owner-force-cliff .p-top.p-ownerSingle,
  body#owner.owner-force-cliff .p-ownerSingle {
    position: relative;
    top: auto;
    left: auto;
    width: 100%;
    height: auto;
    overflow-x: hidden;
    overflow-y: scroll;
  }
  body#owner.owner-force-cliff .p-top.p-ownerSingle .p-ownerSingle__scroll-y {
    padding: 0;
    width: 100%;
    height: auto;
    min-height: 0;
  }
  body#owner.owner-force-cliff .p-top__container.owner,
  body#owner.owner-force-cliff .p-top.p-ownerSingle .p-ownerSingle__container,
  body#owner.owner-force-cliff .p-ownerSingle__container {
    position: relative;
    top: auto;
    right: auto;
    left: 50%;
    transform: translate(-50%, 0);
    box-sizing: border-box;
    margin: 15vw 0 3.3333333333vw;
    padding: 0;
    aspect-ratio: 1144/570;
    width: calc(100% - 5vw);
    max-width: 100%;
    height: auto;
    max-height: none;
    overflow: visible;
  }
}
/* モード B（参考 cliff）: 高さ 940px 以下 → relative + 縦スクロール */
@media screen and (min-width: 850px) and (max-height: 940px) {
  body#owner .p-top.p-ownerSingle,
  body#owner .p-ownerSingle {
    position: relative;
    top: auto;
    left: auto;
    width: 100%;
    height: auto;
    overflow-x: hidden;
    overflow-y: scroll;
  }
  body#owner .p-top.p-ownerSingle .p-ownerSingle__scroll-y {
    padding: 0;
    width: 100%;
    height: auto;
    min-height: 0;
  }
  body#owner .p-top__container.owner,
  body#owner .p-top.p-ownerSingle .p-ownerSingle__container,
  body#owner .p-ownerSingle__container {
    position: relative;
    top: auto;
    right: auto;
    left: 50%;
    transform: translate(-50%, 0);
    box-sizing: border-box;
    margin: 15vw 0 3.3333333333vw;
    padding: 0;
    aspect-ratio: 1144/570;
    width: calc(100% - 5vw);
    max-width: 100%;
    height: auto;
    max-height: none;
    overflow: visible;
  }
}
/* cliff: 850–1079 × h≤940 — 参考 850×866（containerHeight 428 / remarkToFrameBottom 34） */
@media screen and (min-width: 850px) and (max-width: 1079px) and (max-height: 940px) {
  body#owner .p-top__container.owner,
  body#owner .p-top.p-ownerSingle .p-ownerSingle__container,
  body#owner .p-ownerSingle__container {
    box-sizing: content-box;
    padding-bottom: 1.5294117647vw;
  }
  body#owner .p-top.p-ownerSingle .p-ownerSingle__swiper {
    top: 0;
    bottom: 1.5294117647vw;
    height: auto;
  }
}
/* cliff: 1080+ × h≤940 — 参考 1200×866（tableRemarkGap 43 / remarkToFrameBottom 46） */
@media screen and (min-width: 1080px) and (max-height: 940px) {
  body#owner .p-top__container.owner,
  body#owner .p-top.p-ownerSingle .p-ownerSingle__container,
  body#owner .p-ownerSingle__container {
    box-sizing: content-box;
    padding-bottom: 1.3333333333vw;
  }
  body#owner .p-top.p-ownerSingle .p-ownerSingle__swiper {
    top: 0;
    bottom: 1.3333333333vw;
    height: auto;
  }
}
@media screen and (min-width: 850px) and (max-width: 1079px) {
  html:has(body#owner) {
    font-size: 1.4814814815vw;
  }
  body#owner .p-top.p-ownerSingle .p-ownerSingle__swiper .swiper-slide .table,
  body#owner .p-top.p-ownerSingle .p-ownerSingle__swiper .swiper-slide .taru-status-container {
    width: 48.125rem;
    max-width: calc(100% - 3rem);
  }
}
@media screen and (min-width: 1080px) {
  body#owner .p-top.p-ownerSingle .p-ownerSingle__swiper .swiper-slide .table,
  body#owner .p-top.p-ownerSingle .p-ownerSingle__swiper .swiper-slide .taru-status-container {
    width: 71.6666666667vw;
    max-width: calc(100% - 3rem);
  }
}
/* SP: owners-cask 専用（style.css の SP owner ルールを上書き） */
@media screen and (max-width: 849px) {
  /* 参考サイトどおりの可変スケール。style.css の clamp(…, 20px) を上書き（469〜849px 帯で rem 余白が約1.8倍縮むのを防ぐ） */
  /* body#owner: ログイン後 / .archive-owners-cask: 一覧（header.php で手動付与。body_class() 未使用のため WP 標準クラスは使えない） */
  html:has(body#owner),
  html:has(body.archive-owners-cask) {
    font-size: 4.2666666667vw !important;
  }
  body#owner .p-top.p-ownerSingle {
    position: absolute;
    grid-template-rows: none;
    /* style.css SP の .p-top { padding-top: 4vw } 漏れ防止 */
    padding: 0;
    overflow: visible;
  }
  body#owner .p-top.p-ownerSingle .p-ownerSingle__scroll-y {
    overflow: visible;
  }
  body#owner .u-hidden--sp {
    display: none !important;
  }
  body#owner .u-hidden--pc {
    display: block !important;
  }
  body#owner br.u-hidden--pc {
    display: inline !important;
  }
  body#owner .p-top__container.owner,
  body#owner .p-top.p-ownerSingle .p-ownerSingle__container {
    display: block;
    position: relative;
    top: auto;
    right: auto;
    left: auto;
    transform: none;
    box-sizing: border-box;
    margin: 2.6666666667vw auto 0;
    padding: 0;
    aspect-ratio: 350/445;
    width: calc(100% - 5.3333333333vw);
    max-width: 100%;
    height: auto;
    min-height: 430px;
    max-height: none;
    overflow: visible;
  }
  body#owner .p-top__container.owner::after,
  body#owner .p-top.p-ownerSingle .p-ownerSingle__container::after {
    z-index: -1;
    background: url(../img/top_frame-sp2.png) no-repeat center center/100% 100%;
  }
  body#owner .p-top.p-ownerSingle .p-ownerSingle__head {
    position: relative;
    top: -7.5rem;
    bottom: auto;
    z-index: 6;
    margin: 0;
  }
  body#owner .p-top.p-ownerSingle .p-top__title-wrap.p-ownerSingle__title-wrap {
    position: absolute;
    top: -0.9375rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 5;
    margin-top: 0;
    width: 100%;
  }
  body#owner .p-top.p-ownerSingle .p-ownerSingle__title {
    margin: 0 auto;
    width: 18.75rem;
    max-width: 100%;
  }
  body#owner .p-top.p-ownerSingle .p-ownerSingle__title img {
    width: 100%;
    height: auto;
  }
  body#owner .p-top.p-ownerSingle .p-ownerSingle__swiper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    min-height: 0;
    overflow: hidden;
  }
  body#owner .p-top.p-ownerSingle .p-ownerSingle__swiper .swiper-button-prev,
  body#owner .p-top.p-ownerSingle .p-ownerSingle__swiper .swiper-button-next {
    top: calc(50% + 4vw);
  }
  body#owner .p-top.p-ownerSingle .p-ownerSingle__swiper .swiper-slide {
    display: block;
    position: relative;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    box-sizing: border-box;
    padding: 0;
    width: 100%;
    height: 100%;
    min-height: auto;
  }
  body#owner .p-top.p-ownerSingle .p-ownerSingle__swiper .swiper-slide .table,
  body#owner .p-top.p-ownerSingle .p-ownerSingle__swiper .swiper-slide .taru-status-container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 18.4375rem;
    max-width: 100%;
  }
  body#owner .p-top.p-ownerSingle .p-ownerSingle__swiper .swiper-slide .remark {
    position: absolute;
    top: auto;
    bottom: 3.3333333333vw;
    left: 50%;
    transform: translateX(-50%);
    margin: 0;
  }
  body#owner .p-top.p-ownerSingle .p-ownerSingle__bottom {
    position: absolute;
    bottom: -2.5rem;
    left: 50%;
    transform: translateX(-50%);
    padding-left: 1.5rem;
    width: 100%;
    text-align: left;
  }
}
@media screen and (max-width: 374px) {
  body#owner .p-ownerSingle__swiper .swiper-slide .table,
  body#owner .p-ownerSingle__swiper .swiper-slide .taru-status-container {
    width: 78.6666666667vw;
  }
  body#owner .p-ownerSingle__swiper .swiper-slide .taru-img.now {
    width: 68vw;
    height: 81.6vw;
  }
  body#owner .p-ownerSingle__swiper .swiper-slide .taru-img.color {
    width: 60.8vw;
    height: 81.6vw;
  }
  body#owner .p-ownerSingle__title {
    width: 80vw;
  }
  body#owner .p-ownerSingle__bottom {
    bottom: -3.75rem;
  }
}
/* 閉じるボタン（参考 style.css から欠落していたため owner ページのみ復元） */
body#owner .p-ownerSingle__close-btn {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 100;
  width: 3.3333333333vw;
  height: 3.3333333333vw;
}

body#owner .p-ownerSingle__close-btn a {
  display: inline-block;
  background: url(../img/owner-close.svg) no-repeat center center/100% 100%;
  width: 100%;
  height: 100%;
}

@media screen and (max-width: 849px) {
  body#owner .p-ownerSingle__close-btn {
    width: 2.5rem;
    height: 2.5rem;
  }
}