@charset "UTF-8";

/*!
Theme Name: Cocoon Child
Description: Cocoon専用の子テーマ
Theme URI: https://wp-cocoon.com/
Author: わいひら
Author URI: https://nelog.jp/
Template:   cocoon-master
Version:    1.1.3
*/

/************************************
下処理
************************************/
/*固定ページのカラム背景を透明にする*/
#main {
	background:transparent;
	margin-bottom:0px;
	padding-bottom:0px;
}

/*日付時間を非表示にする*/
.page .date-tags {
display: none;
}

/*各固定ページの背景を個別に設定*/
#body{
	background-color:#f8f5f0;
}

/*下記追加cssを設定したブロックの色を白半透明にする*/
.block-background-color{
	background-color:#ffffff80;
}

/*下記追加cssを設定したブロックの背景を透明にする*/
.block-background-transparent{
	background-color:transparent;
}

/*段落の色変更*/
.oukaen-paragraph-color1,
.oukaen-paragraph-color1 * {
  color: #9b8b65 !important;
}

/*追加cssを設定したブロックの幅を変更*/
.block-width{
	position:relative;
	left:50%;
	transform:translatex(-50%);
	width:85vw;
}

/*フッターの上の空白を削除*/
#footer{
	margin-top:0px;
	padding-top:0px;
}

/*rechapchaのロゴを消す*/
.grecaptcha-badge { 
	visibility: hidden;
}

/*全ページの詩*/
.wp-block-verse{
 border:none;
 background-color:transparent;
}

/*追加css：指定した画像を画面幅いっぱいにする*/
@media (min-width: 768px) {
  .hero{
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
  }
  .hero img{
    width: 100%;
    height: auto;
    display: block;
  }
}

/*追加css：指定ブロックをフェイドイン*/
/* 初期状態：透明にして少し下に配置する */
.fade-in-up {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}
/* 画面に入った時に追加するクラス：表示状態にする */
.fade-in-up.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/*カスタムテキスト追加（アンダーライン）*/
.cocoon-custom-text-1 {
  text-decoration-line: underline;
  text-decoration-style: solid;
  --custom-text-1-color: currentColor;
  text-decoration-color: var(--custom-text-1-color);
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}

/*コンテンツ末尾の余白を詰める（フッター直前の空き対策）*/
#content-in{
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
}
.entry-content{
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

/************************************
ページ毎のcss
************************************/
/*-----------------
お問い合わせページ
------------------*/
/*ファイル選択ボタン*/
.cf7-file-btn{
  background: #4b4038;
  color: #f8f5f0;
  padding: 8px 14px;
  border-radius: 4px;
  font-size: 14px;
  white-space: nowrap;
}
/*ファイル選択ボタンのテキスト部分*/
.cf7-file-text{
  font-size: 14px;
  color: #8a8087;
}
/* クリックできるようにするための土台 */
.cf7-file{
  display: inline-flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  position: relative;
}
/* 本体の file input をボタン上に透明で重ねる */
.cf7-file .cf7-file-input{
  position: absolute;
  left: 0;
  top: 0;
  width: 140px;   /* ←ボタンの幅に合わせる（要調整） */
  height: 34px;   /* ←ボタンの高さに合わせる（要調整） */
  opacity: 0;
  cursor: pointer;
}
/*ファイルを選択ボタン*/
.cf7-file-btn{
  cursor: pointer;
}

/*送信ボタン*/
body .wpcf7 .btn-submit-wrapper .btn-submit input.wpcf7-submit{
  background: #9C8B65 !important;
  background-image: none !important;
  color: #f8f5f0 !important;
  border: 1px solid #9C8B65 !important;
  width: auto !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 12px 36px !important;
  line-height: 1.2 !important;
  min-height: 44px !important;
  border-radius: 4px !important;
}

/*リンクの装飾*/
a{
  color: #4b4038;
}
/*ホバー時*/
a:hover{
  opacity: 0.75;
  text-decoration: none;
}

@media (max-width: 1023px) {
  .ouka-contact-text-pc {
    display:none !important;
  }
  .ouka-contact-text-sp {
	text-align:left;
  }
}

@media (min-width: 1024px) {
  .ouka-contact-text-sp {
    display:none !important;
  }
  .ouka-contact-text-pc {
	text-align:center;
  	font-weight:600;
  }
}

.ouka-contact-text-general {
	font-size:16px;
	font-family:Shippori Mincho B1;
	font-weight:400;
}

.ouka-contact-title{
	font-size:29px;
	font-family:Shippori Mincho B1;
	text-align:center;
	font-weight:600;
}

.ouka-contact-title::after{
  content: "";
  display: block;
  width: 60px;
  height: 0.5px;
  background: #000000;
  margin: 0 auto 18px;
}

/*------------------------------
「桜花園について」ページの店舗情報
-------------------------------*/
/*店舗情報-総合*/
.oukaen-info-section {
  position: relative;
  padding: 0px 24px;
  padding-bottom:40px;
  color: #f8f5f0;
}

/*店舗情報-背景*/
.oukaen-info-wrap {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0px 0 0;
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

.oukaen-info-en {
  margin: 0 0 10px;
  font-size: 12px;
  line-height: 1.6;
  letter-spacing: 0.18em;
  color: #4b4043;
}

.oukaen-info-title {
  margin: 0;
  font-size: clamp(28px, 4vw, 48px);
  line-height: 1.35;
  font-weight: 500;
  color: #4b4043;
  font-family: "Shippori Mincho B1", serif;
}

.oukaen-info-wrap {
  border-top: 1px solid rgba(75, 64, 67, 0.25);
}

.oukaen-info-row {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 24px;
  align-items: start;
  padding: 24px 0;
  border-bottom: 1px solid rgba(75, 64, 67, 0.25);
}

.oukaen-info-label {
  font-size: 14px;
  line-height: 1.9;
  letter-spacing: 0.08em;
  color: #4b4043;
}

.oukaen-info-value {
  font-size: 16px;
  line-height: 2;
  color: #4b4043;
  word-break: break-word;
}

.oukaen-info-value a {
  text-decoration: none;
  transition: opacity 0.25s ease;
}

.oukaen-info-value a::after {
  content: "↗";
  font-size: 0.88em;
  line-height: 1;
  opacity: 0.75;
  transform: translateY(-0.02em);
}

.oukaen-info-value a:hover {
  opacity: 0.75;
  color: #4b4043;
}

.oukaen-info-value a:visited {
  color: #4b4043;
}

/*店舗情報-スマホ*/
@media (max-width: 767px) {
  .oukaen-info-section {
    padding: 0px 20px;
	padding-bottom:30px;
  }

  .oukaen-info-wrap {
    padding-top: 0px;
  }

  .oukaen-info-row {
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 18px 0;
  }

  .oukaen-info-label {
    font-size: 12px;
    letter-spacing: 0.14em;
  }

  .oukaen-info-value {
    font-size: 16px;
    line-height: 1.9;
  }
}

/*----------------------------
「桜花園について」ページの年表
------------------------------*/
.oukaen-history {
  max-width: 1280px;
  margin: 0 auto;
  padding: 10px 24px 100px;
  color: #4b4043;
}

/*年表本体*/
.oukaen-timeline {
  position: relative;
}

/*中央の縦線*/
.oukaen-timeline::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 1px;
  background: #9b8b65;
  transform: translateX(-50%);
}

/*各項目*/
.oukaen-timeline__item {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 230px;
  margin-bottom: 40px;
}

/*左右の本文領域*/
.oukaen-timeline__body {
  width: min(100%, 420px);
}

.oukaen-timeline__item.left .oukaen-timeline__body {
  grid-column: 1;
  justify-self: start;
  text-align: left;
}

.oukaen-timeline__item.right .oukaen-timeline__body {
  grid-column: 2;
  justify-self: start;
  text-align: left;
}

/*マーカー*/
.oukaen-timeline__marker {
  position: absolute;
  top: 0.95em;
  left: 50%;
  width: 0;
  height: 0;
  transform: translateX(-50%);
}

.oukaen-timeline__dot {
  position: absolute;
  top: 50%;
  left: 0;
  width: 12px;
  height: 12px;
  background: #9b8b65;
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

.oukaen-timeline__line-h {
  position: absolute;
  top: 50%;
  height: 1px;
  background: #9b8b65;
  transform: translateY(-50%);
}

:root {
  --timeline-line-right: 190px;
  --timeline-line-left: clamp(240px, 20vw, 380px);
  --timeline-content-gap-right: 28px;
  --timeline-date-gap-left: 28px;
  --timeline-date-offset-y: -8px;
}

@media (min-width: 768px) {
  .oukaen-timeline__item.right .oukaen-timeline__line-h {
    width: var(--timeline-line-right);
    left: 0;
    right: auto;
  }

  .oukaen-timeline__item.left .oukaen-timeline__line-h {
    width: var(--timeline-line-left);
    right: 0;
    left: auto;
  }
}

/*年月*/
.oukaen-timeline__date {
  margin:0 0 12px;
  font-size: clamp(26px, 3vw, 44px);
  line-height: 1.2;
  letter-spacing: 0.04em;
  color: #9b8b65;
  font-family: "Shippori Mincho B1", serif;
  position: relative;
  transform: translateY(var(--timeline-date-offset-y));
  white-space: nowrap;
  margin-bottom:12px !important;
}

@media (min-width: 768px) {
  .oukaen-timeline__date {
    display: block;
    width: fit-content;
    max-width: 100%;
  }

  /* 左側本文 */
  .oukaen-timeline__item.left .oukaen-timeline__body {
    width: min(100%, 380px);
    padding-right: 0;
    text-align: left;
  }

  /* 右側本文
     横線の右端から本文左端までの距離を管理 */
.oukaen-timeline__item.right .oukaen-timeline__body {
margin-left: calc(var(--timeline-line-right) + var(--timeline-content-gap-right));
padding-left: 0;
text-align: left;
}

	/* 左側日付
     横線の左端から日付右端までの距離を管理 */
  .oukaen-timeline__item.left .oukaen-timeline__date {
    margin-left: 0;
    margin-right: var(--timeline-date-gap-left);
    text-align: left;
  }

  /* 右側日付は本文と同じ左端から始める */
  .oukaen-timeline__item.right .oukaen-timeline__date {
    margin-left: 0;
    margin-right: 0;
    text-align: left;
  }
}

/*見出し*/
.oukaen-timeline__heading {
  font-size: clamp(24px, 2.1vw, 38px);
  line-height: 1.5;
  font-weight: 500;
  color: #4b4043;
  font-family: "Shippori Mincho B1", serif;
}

/*年表内の見出しだけCocoonのh3装飾を無効化*/
.oukaen-timeline__heading {
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  margin: 0 0 12px !important;
}

/*本文*/
.oukaen-timeline__text {
  margin: 0;
  font-size: 15px;
  line-height: 2.1;
  color: #4b4043;
}

/*項目間の余白調整*/
.oukaen-timeline__item:last-child {
  margin-bottom: 0;
}

/*タブレット*/
@media (min-width: 768px) and (max-width: 1024px) {
  .oukaen-history {
    padding: 64px 24px 80px;
  }

  .oukaen-timeline__item {
    min-height: 210px;
    margin-bottom: 28px;
  }

  :root {
    --timeline-line-right: 140px;
    --timeline-line-left: clamp(180px, 22vw, 280px);
    --timeline-content-gap-right: 22px;
    --timeline-date-gap-left: 22px;
  }

  .oukaen-timeline__item.left .oukaen-timeline__body {
    width: min(100%, 330px);
  }
}

/*スマホ*/
@media (max-width: 767px) {
  .oukaen-history {
    padding: 10px 20px 30px;
  }

  .oukaen-timeline::before {
    left: 28px;
    transform: none;
  }

  .oukaen-timeline__item {
    display: block;
    min-height: auto;
    margin-bottom: 54px;
    padding-left: 86px;
  }

  .oukaen-timeline__marker {
    left: 28px;
    transform: none;
    top: 0.85em;
  }

  .oukaen-timeline__dot {
    top: 50%;
    transform: translate(-50%, -50%);
    width: 11px;
    height: 11px;
  }

  .oukaen-timeline__line-h {
    top: 50%;
    width: 52px;
    left: 0;
    transform: translateY(-50%);
  }

  .oukaen-timeline__item.left .oukaen-timeline__line-h,
  .oukaen-timeline__item.right .oukaen-timeline__line-h {
    left: 0;
    right: auto;
    transform: none;
  }

  .oukaen-timeline__body,
  .oukaen-timeline__item.left .oukaen-timeline__body,
  .oukaen-timeline__item.right .oukaen-timeline__body {
    width: 100%;
    padding: 0;
    text-align: left;
  }

  .oukaen-timeline__date {
    margin: 0 0 18px;
    font-size: clamp(22px, 7vw, 34px);
  }

  .oukaen-timeline__heading {
    margin: 0 0 16px;
    font-size: clamp(18px, 5.8vw, 28px);
    line-height: 1.6;
  }

  .oukaen-timeline__text {
    font-size: 14px;
    line-height: 2;
  }
}

/* =========================
「桜花園について」ページ：仕事の流れエリア用 下向き矢印
========================= */

.oukaen-flow-arrow {
  --arrow-color: #9b8b65;
  --arrow-thickness: 1px;
  --arrow-line-length: 56px;
  --arrow-head-length: 14px;
  --arrow-gap-top: 16px;
  --arrow-gap-bottom: 16px;

  position: relative;
  width: 100%;
  height: calc(var(--arrow-line-length) + var(--arrow-head-length));
  margin: var(--arrow-gap-top) auto var(--arrow-gap-bottom);
}

.oukaen-flow-arrow__line {
  position: absolute;
  left: 50%;
  top: 0;
  width: var(--arrow-thickness);
  height: var(--arrow-line-length);
  background: var(--arrow-color);
  transform: translateX(-50%);
}

.oukaen-flow-arrow__head {
  position: absolute;
  top: var(--arrow-line-length);
  left: 50%;
  width: var(--arrow-head-length);
  height: var(--arrow-thickness);
  background: var(--arrow-color);
  transform-origin: left center;
}

.oukaen-flow-arrow__head--left {
  transform: rotate(230deg);
}

.oukaen-flow-arrow__head--right {
  transform: rotate(-50deg);
}

/*------------------------------
「アクセス」ページの情報
-------------------------------*/
/*総合*/
.oukaen-access-section {
  position: relative;
  padding: 0px 24px;
  padding-bottom:40px;
  color: #f8f5f0;
}

/*アクセス-背景*/
.oukaen-access-wrap {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0px 0 0;
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

.oukaen-access-en {
  margin: 0 0 10px;
  font-size: 12px;
  line-height: 1.6;
  letter-spacing: 0.18em;
  color: #4b4043;
}

.oukaen-access-title {
  margin: 0;
  font-size: clamp(28px, 4vw, 48px);
  line-height: 1.35;
  font-weight: 500;
  color: #4b4043;
  font-family: "Shippori Mincho B1", serif;
}

.oukaen-access-wrap {
  border-top: 1px solid rgba(75, 64, 67, 0.25);
}

.oukaen-access-row {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 24px;
  align-items: start;
  padding: 24px 0;
  border-bottom: 1px solid rgba(75, 64, 67, 0.25);
}

.oukaen-access-label {
  font-size: 14px;
  line-height: 1.9;
  letter-spacing: 0.08em;
  color: #4b4043;
}

.oukaen-access-value {
  font-size: 16px;
  line-height: 2;
  color: #4b4043;
  word-break: break-word;
}

.oukaen-access-value a {
  text-decoration: none;
  transition: opacity 0.25s ease;
}

.oukaen-access-value a:hover {
  opacity: 0.75;
  color: #4b4043;
}

.oukaen-access-value a:visited {
  color: #4b4043;
}

/*アクセス-スマホ*/
@media (max-width: 767px) {
  .oukaen-access-section {
    padding: 0px 20px;
	padding-bottom:30px;
  }

  .oukaen-access-wrap {
    padding-top: 0px;
  }

  .oukaen-access-row {
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 18px 0;
  }

  .oukaen-access-label {
    font-size: 12px;
    letter-spacing: 0.14em;
  }

  .oukaen-access-value {
    font-size: 16px;
    line-height: 1.9;
  }
}

/* =========================================
   桜花園 PCフッター
   Cocoon フッター左 / 中 / 右 ウィジェット用
========================================= */

/* 新しいカスタムHTMLは、まず非表示
   → スマホでは今のフッターをそのまま使う */
.ouka-footer-pc{
  display: none;
}

@media (min-width: 768px){

  /* PCでは既存のCocoonフッター下部を隠す */
  #footer .navi-footer,
  #footer .footer-bottom,
  #footer .copyright{
    display: none !important;
  }

  /* フッター全体 */
  #footer{
    background: #f8f5f0 !important;
  }

/* 外枠 */
#footer{
  --ouka-footer-max-width-pc: 1280px;
  --ouka-footer-pad-top-pc: 24px;
  --ouka-footer-pad-side-pc: 28px;
  --ouka-footer-pad-bottom-pc: 26px;
  --ouka-footer-line-gap-pc: 18px;
}

#footer-in{
  max-width: var(--ouka-footer-max-width-pc) !important;
  margin: 0 auto !important;
  padding:
    var(--ouka-footer-pad-top-pc)
    var(--ouka-footer-pad-side-pc)
    var(--ouka-footer-pad-bottom-pc) !important;
  box-sizing: border-box !important;
}

  /* 上の細い罫線 */
  #footer-in::before{
    content: "";
    display: block;
    width: 100%;
    height: 0.5px;
    background: #000000;
    margin: 0 0 18px;
  }

  /* Cocoonの3カラム器を安定化 */
  #footer .footer-widgets{
    display: flex !important;
    align-items: stretch !important;
    gap: 48px !important;
  }

  #footer .footer-left,
  #footer .footer-center,
  #footer .footer-right{
    float: none !important;
    width: auto !important;
    flex: 1 1 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  #footer .footer-left{
    flex: 1.25 1 0 !important;
  }

  #footer .footer-center{
    flex: 0.85 1 0 !important;
  }

  #footer .footer-right{
    flex: 1.05 1 0 !important;
  }

  /* ウィジェットタイトルは空欄想定。
     もし入っていてもPCでは出さない */
  #footer .footer-widgets .widget-title{
    display: none !important;
  }

  /* ウィジェット余白を整理 */
  #footer .footer-widgets .widget{
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  #footer .footer-widgets .textwidget,
  #footer .footer-widgets .custom-html-widget{
    margin: 0 !important;
    padding: 0 !important;
  }

  /* 新フッター本体 */
  .ouka-footer-pc{
    display: block;
    color: #000000;
  }

  .ouka-footer-pc,
  .ouka-footer-pc p,
  .ouka-footer-pc ul,
  .ouka-footer-pc li{
    margin: 0;
    padding: 0;
  }

  .ouka-footer-pc a{
    color: #000000;
    text-decoration: none;
  }

  .ouka-footer-pc a:hover{
    opacity: 0.75;
    text-decoration: none;
  }

  /* 左カラム */
  .ouka-footer-pc__name{
    font-size: 16px;
    line-height: 1.6;
    letter-spacing: 0.06em;
    margin-bottom: 14px;
  }

  .ouka-footer-pc__block{
    margin-bottom: 14px;
  }

  .ouka-footer-pc__text{
    font-size: 14px;
    line-height: 1.95;
    letter-spacing: 0.03em;
  }

  .ouka-footer-pc__sns{
    margin-top: 8px;
  }

  .ouka-footer-pc__insta{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
  }

.ouka-footer-pc__insta img{
  display: block;
  width: 34.4px;
  height: auto;
}

  /* 中カラム */
  .ouka-footer-pc__nav{
    list-style: none;
    display: grid;
    gap: 0px;
  }

  .ouka-footer-pc__nav a{
    display: inline-block;
    font-size: 14px;
    line-height: 1.75;
    letter-spacing: 0.04em;
  }
/*フッター中文字リンクの行間調整*/
@media (min-width: 768px){
  #footer .footer-center{
    --ouka-footer-center-link-gap: 4px;
    --ouka-footer-center-link-line-height: 1.35;
    --ouka-footer-center-link-font-size: 14px;
  }

  #footer .footer-center .ouka-footer-pc__nav{
    display: block !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  #footer .footer-center .ouka-footer-pc__nav > li{
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  #footer .footer-center .ouka-footer-pc__nav > li + li{
    margin-top: var(--ouka-footer-center-link-gap) !important;
  }

  #footer .footer-center .ouka-footer-pc__nav > li > a{
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: var(--ouka-footer-center-link-font-size) !important;
    line-height: var(--ouka-footer-center-link-line-height) !important;
    letter-spacing: 0.04em !important;
  }
}

  /* 右カラム */
  .ouka-footer-pc--right{
    height: 100%;
    min-height: 155px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: flex-end;
  }

  .ouka-footer-pc__logo{
    width: min(170px, 16vw);
    margin-bottom: 16px;
  }

  .ouka-footer-pc__logo img{
    display: block;
    width: 146px;
    height: 146px;
  }

  .ouka-footer-pc__copyright{
    font-size: 12px;
    line-height: 1.6;
    letter-spacing: 0.02em;
    white-space: nowrap;
    text-align: right;
  }
/* 右カラムロゴ画像位置調整*/
@media (min-width: 768px){
  #footer .footer-right{
    --ouka-footer-right-logo-width: 146px;
    --ouka-footer-right-logo-shift-x: 35px;   /* negative = left, positive = right */
    --ouka-footer-right-logo-shift-y: 100px;   /* negative = up, positive = down */
    --ouka-footer-right-logo-margin-bottom: 16px;
  }

  /* Overall anchor point of the right widget */
  #footer .footer-right .ouka-footer-pc--right{
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-end !important;   /* flex-start / center / flex-end */
    justify-content: flex-end !important;
  }

  /* Fine positioning hook for the logo block */
  #footer .footer-right .ouka-footer-pc__logo{
    width: auto !important;
    margin: 0 !important;
    margin-bottom: var(--ouka-footer-right-logo-margin-bottom) !important;
    padding: 0 !important;
    align-self: flex-end !important;
    transform: translate(
      var(--ouka-footer-right-logo-shift-x),
      var(--ouka-footer-right-logo-shift-y)
    ) !important;
  }

  /* Size only */
  #footer .footer-right .ouka-footer-pc__logo img{
    display: block !important;
    width: var(--ouka-footer-right-logo-width) !important;
    height: auto !important;
    max-width: none !important;
  }

  /* Keep copyright aligned with the same edge */
  #footer .footer-right .ouka-footer-pc__copyright{
    margin: 0 !important;
    text-align: right !important;
    align-self: flex-end !important;
  }
}

/* フッター右コピーライト位置調整 */
@media (min-width: 768px){
  #footer .footer-right{
    --ouka-footer-copyright-shift-x: 30px;
    --ouka-footer-copyright-shift-y: 0px;
    --ouka-footer-copyright-margin-top: 0px;
  }

  #footer .footer-right .ouka-footer-pc__copyright{
    margin: 0 !important;
    margin-top: calc(
      var(--ouka-footer-copyright-margin-top) +
      max(0px, var(--ouka-footer-right-logo-shift-y))
    ) !important;
    align-self: flex-end !important;
    text-align: right !important;
    transform: translate(
      var(--ouka-footer-copyright-shift-x),
      var(--ouka-footer-copyright-shift-y)
    ) !important;
  }
}
	
}
/*フッターの中カラムの左右位置調整*/
@media (min-width: 768px){
  #footer .footer-center{
    --ouka-footer-center-shift-x: -60px; /* マイナスで左、プラスで右 */
  }

  #footer .footer-center .ouka-footer-pc--center{
    transform: translateX(var(--ouka-footer-center-shift-x)) !important;
  }
}

/* =========================================
   桜花園 スマホフッター
   - PCフッター用HTMLをスマホで再利用
   - 文字サイズや余白は変数で調整
========================================= */
@media (max-width: 767px){
  #footer{
    background: #f8f5f0 !important;
  }

  /* Cocoon標準の下部フッターは隠す */
  #footer .navi-footer,
  #footer .footer-bottom,
  #footer .copyright{
    display: none !important;
  }

  /* 全体の調整値 */
  #footer-in{
    --ouka-footer-sp-side: 25px;
    --ouka-footer-sp-top-pad: 0px;
    --ouka-footer-sp-bottom-pad: 0px;
    --ouka-footer-sp-line-gap: 18px;

    --ouka-footer-sp-name-size: 16px;
    --ouka-footer-sp-name-gap: 22px;

    --ouka-footer-sp-text-size: 14px;
    --ouka-footer-sp-text-line: 1.65;
    --ouka-footer-sp-block-gap: 18px;

    --ouka-footer-sp-insta-top: 6px;
    --ouka-footer-sp-insta-size: 29px;

    --ouka-footer-sp-center-top: 34px;
    --ouka-footer-sp-link-size: 14px;
    --ouka-footer-sp-link-line: 1.5;
    --ouka-footer-sp-link-gap: 3px;

    --ouka-footer-sp-right-top: 30px;
    --ouka-footer-sp-logo-width: 150px;
    --ouka-footer-sp-logo-shift-x: 0px;
    --ouka-footer-sp-logo-shift-y: 0px;

    --ouka-footer-sp-copyright-top: 12px;
    --ouka-footer-sp-copyright-size: 12px;
    --ouka-footer-sp-copyright-line: 1.5;
    --ouka-footer-sp-copyright-shift-x: 0px;
    --ouka-footer-sp-copyright-shift-y: 0px;

    max-width: none !important;
    margin: 0 !important;
    padding:
      var(--ouka-footer-sp-top-pad, 0px)
      var(--ouka-footer-sp-side, 25px)
      var(--ouka-footer-sp-bottom-pad, 0px) !important;
    box-sizing: border-box !important;
  }

  /* 上の細い線 */
  #footer-in::before{
    content: "";
    display: block;
    width: 100%;
    height: 1px;
    background: #000000;
    margin: 0 0 var(--ouka-footer-sp-line-gap);
  }

  /* フッターの器を縦積みにする */
  #footer .footer-widgets{
    display: block !important;
  }

  #footer .footer-left,
  #footer .footer-center,
  #footer .footer-right{
    float: none !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* タイトルや余計な装飾は消す */
  #footer .footer-widgets .widget-title{
    display: none !important;
  }

  #footer .footer-widgets .widget,
  #footer .footer-widgets .textwidget,
  #footer .footer-widgets .custom-html-widget{
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  /* PC用HTMLをスマホでも表示 */
  .ouka-footer-pc{
    display: block !important;
    color: #000000;
  }

  .ouka-footer-pc,
  .ouka-footer-pc p,
  .ouka-footer-pc ul,
  .ouka-footer-pc li{
    margin: 0;
    padding: 0;
  }

  .ouka-footer-pc a{
    color: #000000;
    text-decoration: none !important;
  }

  .ouka-footer-pc a:hover{
    opacity: 1;
    text-decoration: none !important;
  }

  /* 左ブロック */
  #footer .footer-left .ouka-footer-pc__name{
    font-size: var(--ouka-footer-sp-name-size);
    line-height: 1.6;
    letter-spacing: 0.04em;
    margin-bottom: var(--ouka-footer-sp-name-gap);
  }

  #footer .footer-left .ouka-footer-pc__block{
    margin-bottom: var(--ouka-footer-sp-block-gap);
  }

  #footer .footer-left .ouka-footer-pc__text{
    font-size: var(--ouka-footer-sp-text-size);
    line-height: var(--ouka-footer-sp-text-line);
    letter-spacing: 0.02em;
  }

  #footer .footer-left .ouka-footer-pc__sns{
    margin-top: var(--ouka-footer-sp-insta-top);
  }

  #footer .footer-left .ouka-footer-pc__insta{
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    width: auto !important;
    height: auto !important;
  }

  #footer .footer-left .ouka-footer-pc__insta img{
    display: block;
    width: var(--ouka-footer-sp-insta-size);
    height: auto;
  }

  /* 中ブロック */
  #footer .footer-center{
    margin-top: var(--ouka-footer-sp-center-top) !important;
  }

  #footer .footer-center .ouka-footer-pc__nav{
    display: block !important;
    list-style: none;
    margin: 0 !important;
    padding: 0 !important;
  }

  #footer .footer-center .ouka-footer-pc__nav > li{
    margin: 0 !important;
    padding: 0 !important;
  }

  #footer .footer-center .ouka-footer-pc__nav > li + li{
    margin-top: var(--ouka-footer-sp-link-gap) !important;
  }

  #footer .footer-center .ouka-footer-pc__nav a{
    display: block !important;
    font-size: var(--ouka-footer-sp-link-size) !important;
    line-height: var(--ouka-footer-sp-link-line) !important;
    letter-spacing: 0.03em;
    text-decoration: none !important;
  }

  /* 右ブロック */
  #footer .footer-right{
    margin-top: var(--ouka-footer-sp-right-top) !important;
  }

  #footer .footer-right .ouka-footer-pc--right{
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-end !important;
    justify-content: flex-start !important;
  }

  #footer .footer-right .ouka-footer-pc__logo{
    margin: 0 !important;
    transform: translate(
      var(--ouka-footer-sp-logo-shift-x),
      var(--ouka-footer-sp-logo-shift-y)
    ) !important;
  }

  #footer .footer-right .ouka-footer-pc__logo img{
    display: block;
    width: var(--ouka-footer-sp-logo-width) !important;
    height: auto !important;
  }

  #footer .footer-right .ouka-footer-pc__copyright{
    margin-top: var(--ouka-footer-sp-copyright-top) !important;
    font-size: var(--ouka-footer-sp-copyright-size) !important;
    line-height: var(--ouka-footer-sp-copyright-line) !important;
    letter-spacing: 0.01em;
    white-space: nowrap;
    text-align: right;
    transform: translate(
      var(--ouka-footer-sp-copyright-shift-x),
      var(--ouka-footer-sp-copyright-shift-y)
    ) !important;
  }
}

/* =========================================
id1427のインスタグラム周辺レイアウト
========================================= */
body.page-id-1427{
  /* Existing upper Instagram account row spacing */
  --ouka-home-instagram-account-gap-sp: 60px;
  --ouka-home-instagram-account-gap-pc: 90px;

  /* 1. Instagram photos -> Instagram link button */
  --ouka-home-instagram-photo-button-gap-sp: 24px;
  --ouka-home-instagram-photo-button-gap-pc: 32px;

  /* 2. Instagram link button -> footer horizontal line */
  --ouka-home-instagram-button-footer-gap-sp: 60px;
  --ouka-home-instagram-button-footer-gap-pc: 90px;
}

body.page-id-1427 .ouka-footer-instagram{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

body.page-id-1427 .ouka-footer-instagram__icon img{
  display: block;
  width: 29px;
  height: 29px;
}

body.page-id-1427 .ouka-footer-instagram__text{
  font-size: 20px;
  text-decoration: none !important;
}

body.page-id-1427 .ouka-footer-instagram__text:hover{
  text-decoration: none !important;
}

/* Cancel plugin-generated bottom padding */
body.page-id-1427 #sb_instagram{
  padding-bottom: 0 !important;
}

body.page-id-1427 #sb_instagram #sbi_load{
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
}

@media (max-width: 767px){
  body.page-id-1427
  #post-1427 > .entry-content > pre.wp-block-verse.has-text-align-center.has-text-color.has-background.has-link-color.is-style-bottom-margin-3em.has-bottom-margin{
    margin-bottom: 0 !important;
  }

  body.page-id-1427
  #post-1427 > .entry-content > .ouka-footer-instagram{
    margin-top: var(--ouka-home-instagram-account-gap-sp) !important;
  }

  body.page-id-1427
  #post-1427 > .entry-content > #sb_instagram #sbi_load{
    margin-top: var(--ouka-home-instagram-photo-button-gap-sp) !important;
  }

  body.page-id-1427 #footer-in::before{
    margin-top: calc(
      var(--ouka-home-instagram-button-footer-gap-sp)
      - var(--ouka-footer-sp-top-pad, 0px)
    ) !important;
    margin-bottom: var(--ouka-footer-sp-line-gap) !important;
  }
}

@media (min-width: 768px){
  body.page-id-1427
  #post-1427 > .entry-content > pre.wp-block-verse.has-text-align-center.has-text-color.has-background.has-link-color.is-style-bottom-margin-3em.has-bottom-margin{
    margin-bottom: 0 !important;
  }

  body.page-id-1427
  #post-1427 > .entry-content > .ouka-footer-instagram{
    margin-top: var(--ouka-home-instagram-account-gap-pc) !important;
  }

  body.page-id-1427
  #post-1427 > .entry-content > #sb_instagram #sbi_load{
    margin-top: var(--ouka-home-instagram-photo-button-gap-pc) !important;
  }

  body.page-id-1427 #footer-in::before{
    margin-top: calc(
      var(--ouka-home-instagram-button-footer-gap-pc)
      - var(--ouka-footer-pad-top-pc)
    ) !important;
    margin-bottom: var(--ouka-footer-line-gap-pc) !important;
  }
}

/* =========================================
   ヘッダー / スマホメニュー / トップFV
========================================= */
/* -------------------------
   共通変数
------------------------- */
:root{
  --ouka-text: #000000;
  --ouka-white: #f8f5f0;
  --ouka-safe-top: env(safe-area-inset-top, 0px);
  --ouka-hamburger-size: 56px;
  --ouka-hamburger-top: calc(var(--ouka-safe-top) + 8px);
  --ouka-hamburger-left: 10px;
  --ouka-drawer-width: 65vw;
  --ouka-drawer-max-width: 360px;
  --ouka-drawer-bg: rgba(248, 245, 240, 0.82);
  --ouka-content-width: min(92vw, 760px);
  --ouka-instagram-width-pc: min(92vw, 720px);
  --ouka-instagram-width-sp: min(84vw, 520px);
  --ouka-top-text-gap-sp: clamp(40px, 15vw, 60px);
  --ouka-top-nav-top-sp: 65%;
  --ouka-top-nav-right-sp: 16px;

  /* スマホ下層ロゴ
     top / height を変えても space が自動追従する */
  --ouka-sp-logo-top: -46px;
  --ouka-sp-logo-height: 42px;
  --ouka-sp-logo-gap: 8px;
  --ouka-sp-logo-space: calc(var(--ouka-sp-logo-top) + var(--ouka-sp-logo-height) + var(--ouka-sp-logo-gap));
  --ouka-sp-logo-left: 55%;
  --ouka-sp-logo-shift-x: -50%;
  --ouka-sp-logo-width: min(52vw, 220px);
}

/* =========================================
   1) PC / タブレット下層ページ
   - head-insert.php の JS で #navi を固定
========================================= */
@media (min-width: 768px){
  body:not(.page-id-1427):not(.page-id-1530) #header-container,
  body:not(.page-id-1427):not(.page-id-1530) .header-container,
  body:not(.page-id-1427):not(.page-id-1530) #header-container-in,
  body:not(.page-id-1427):not(.page-id-1530) .header-container-in,
  body:not(.page-id-1427):not(.page-id-1530) #header,
  body:not(.page-id-1427):not(.page-id-1530) .header,
  body:not(.page-id-1427):not(.page-id-1530) #header-in,
  body:not(.page-id-1427):not(.page-id-1530) .header-in{
    position: static !important;
    top: auto !important;
    background-color: transparent !important;
    box-shadow: none !important;
    border: 0 !important;
    overflow: visible !important;
  }

  body:not(.page-id-1427):not(.page-id-1530) #navi{
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    width: 100% !important;
    min-height: 60px !important;
    z-index: 9990 !important;
    background: rgba(248, 245, 240, 0.88) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    box-shadow: none !important;
    border: 0 !important;
  }

  body:not(.page-id-1427):not(.page-id-1530) #navi.ouka-is-fixed{
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    z-index: 9999 !important;
  }

  body:not(.page-id-1427):not(.page-id-1530).ouka-nav-fixed-active #contents,
  body:not(.page-id-1427):not(.page-id-1530).ouka-nav-fixed-active .contents,
  body:not(.page-id-1427):not(.page-id-1530).ouka-nav-fixed-active #content,
  body:not(.page-id-1427):not(.page-id-1530).ouka-nav-fixed-active .content{
    padding-top: var(--ouka-fixed-nav-height, 60px) !important;
  }

  body:not(.page-id-1427):not(.page-id-1530) #navi .navi-in,
  body:not(.page-id-1427):not(.page-id-1530) .navi .navi-in{
    padding-top: 10px !important;
    padding-bottom: 14px !important;
  }

  /* PC下層のヘッダー下画像を横いっぱいに安定表示 */
  body:not(.page-id-1427):not(.page-id-1530) .oukaen-page-hero,
  body:not(.page-id-1427):not(.page-id-1530) .entry-content > figure:first-child,
  body:not(.page-id-1427):not(.page-id-1530) .entry-content > .wp-block-image:first-child{
    width: 100% !important;
    max-width: none !important;
    margin-top: 0 !important;
    margin-bottom: 10px !important;
  }

  body:not(.page-id-1427):not(.page-id-1530) .oukaen-page-hero img,
  body:not(.page-id-1427):not(.page-id-1530) .entry-content > figure:first-child img,
  body:not(.page-id-1427):not(.page-id-1530) .entry-content > .wp-block-image:first-child img{
    display: block !important;
    width: 100% !important;
    height: auto !important;
  }
}

/* =========================================
   2) トップページ page-id-1427
========================================= */
/* トップページ共通 */
body.page-id-1427{
  --ouka-preloader-bg: #f8f5f0;
  --ouka-preloader-logo-url: url("https://oukaen-hayama.com/wp-content/uploads/2026/03/preloader-img.png");
  --ouka-preloader-fade: 3.0s;
  --ouka-top-header-trigger-offset: 0px; /* 正の値で早め、負の値で遅め */
  --ouka-top-header-height: 0px;
  --ouka-top-navi-height: 0px;
  --ouka-top-after-nav-gap: 0px;
}

/* JS有効時のみプリローダーを使う */
html.ouka-js body.page-id-1427.ouka-preloader-active{
  overflow: hidden !important;
  overscroll-behavior: none !important;
}

body.page-id-1427{
  --ouka-preloader-bg: #f8f5f0;
  --ouka-preloader-fade: 3.0s;
  --ouka-top-header-trigger-offset: 0px;
  --ouka-top-header-height: 0px;
  --ouka-top-navi-height: 0px;
  --ouka-top-after-nav-gap: 0px;
}

html.ouka-js body.page-id-1427.ouka-preloader-active{
  overflow: hidden !important;
  overscroll-behavior: none !important;
}

html.ouka-js body.page-id-1427 #ouka-preloader{
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: var(--ouka-preloader-bg);
  z-index: 110001;
  opacity: 1;
  visibility: visible;
  pointer-events: none;
  transition:
    opacity var(--ouka-preloader-fade) ease,
    visibility 0s linear var(--ouka-preloader-fade);
}

html.ouka-js body.page-id-1427 #ouka-preloader .ouka-preloader__logo{
  display: block;
  width: min(60vw, 520px);
  max-width: 100%;
  height: auto;
  max-height: min(26vh, 220px);
  object-fit: contain;
}

html.ouka-js body.page-id-1427.ouka-preloader-done #ouka-preloader{
  opacity: 0;
  visibility: hidden;
}

@media (max-width: 767px){
  html.ouka-js body.page-id-1427 #ouka-preloader .ouka-preloader__logo{
    width: min(74vw, 340px);
    max-height: min(20vh, 140px);
  }
}

body.page-id-1427 .article-header.entry-header,
body.page-id-1427 .entry-header,
body.page-id-1427 .entry-title,
body.page-id-1427 .post-date,
body.page-id-1427 .date-tags,
body.page-id-1427 .eye-catch,
body.page-id-1427 .singular-eye-catch{
  display: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

body.page-id-1427 .content,
body.page-id-1427 .main,
body.page-id-1427 .article,
body.page-id-1427 .entry-content,
body.page-id-1427 .entry{
  margin: 0 !important;
  padding: 0 !important;
}

body.page-id-1427 .article{
  max-width: none !important;
  width: 100% !important;
  min-height: 0 !important;
}

body.page-id-1427 .ouka-home-hero{
  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  margin-bottom: 0 !important;
  overflow: hidden;
  color: var(--ouka-white);
  min-height: 100vh;
  min-height: 100svh;
  min-height: 100dvh;
  height: 100vh;
  height: 100svh;
  height: 100dvh;
  opacity: 1 !important;
}

body.page-id-1427 .ouka-home-hero__bg,
body.page-id-1427 .ouka-home-hero__bg img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

body.page-id-1427 .ouka-home-hero__bg img{
  display: block;
  object-fit: cover;
}

body.page-id-1427 .ouka-home-hero__overlay{
  position: absolute;
  inset: 0;
  background: rgba(20,16,13,.22);
  z-index: 1;
}

body.page-id-1427 .ouka-home-hero__logo{
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 4;
  transform: translate(-50%, -55%);
  width: min(34vw, 280px);
}

body.page-id-1427 .ouka-home-hero__logo img{
  display: block;
  width: 100%;
  height: auto;
}

body.page-id-1427 .ouka-home-hero__content{
  display: none !important;
}

/* PCトップ */
@media (min-width: 768px){
  body.page-id-1427{
    padding-top: 0 !important;
    --ouka-top-header-height: 0px;
  }

  /* 1427 の PC では旧 Cocoon ヘッダー / 旧ナビは使わない */
  body.page-id-1427 #header-container,
  body.page-id-1427 .header-container,
  body.page-id-1427 #header-container-in,
  body.page-id-1427 .header-container-in,
  body.page-id-1427 #header,
  body.page-id-1427 .header,
  body.page-id-1427 #header-in,
  body.page-id-1427 .header-in,
  body.page-id-1427 #navi,
  body.page-id-1427 .navi{
    display: none !important;
  }

  /* 1530型の共通ヘッダーを、FVを抜けた後だけ表示 */
  body.page-id-1427 #ouka-global-header{
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-12px);
    transition:
      opacity .28s ease,
      transform .28s ease,
      visibility 0s linear .28s;
  }

  body.page-id-1427.ouka-top-header-visible #ouka-global-header{
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
    transition-delay: 0s;
  }

  /* FV 全体 */
  body.page-id-1427 .ouka-home-hero{
    position: relative;
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    min-height: 100vh;
    min-height: 100svh;
    min-height: 100dvh;
    height: 100vh;
    height: 100svh;
    height: 100dvh;
    overflow: hidden;
  }

  /* スマホ用スライドはPCでは使わない */
  body.page-id-1427 .ouka-home-hero__slides--sp{
    display: none !important;
  }

  /* 将来の複数画像スライド構造にも対応 */
  body.page-id-1427 .ouka-home-hero__slides--pc,
  body.page-id-1427 .ouka-home-hero__bg{
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
  }

  body.page-id-1427 .ouka-home-hero__slides--pc img{
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    opacity: 0;
    transition: opacity .9s ease;
  }

  body.page-id-1427 .ouka-home-hero__slides--pc img.is-active{
    opacity: 1;
  }

  /* 現在の単一 picture 構造でも崩れないように残す */
  body.page-id-1427 .ouka-home-hero__bg picture,
  body.page-id-1427 .ouka-home-hero__bg img{
    display: block;
    width: 100%;
    height: 100%;
  }

  body.page-id-1427 .ouka-home-hero__bg img{
    object-fit: cover;
    object-position: center center;
  }

  /* オーバーレイ / 文字リンク / テキストは背景より前面 */
  body.page-id-1427 .ouka-home-hero__overlay{
    position: absolute;
    inset: 0;
    z-index: 1;
  }

  body.page-id-1427 .ouka-home-hero__nav,
  body.page-id-1427 .ouka-home-hero__content{
    position: relative;
    z-index: 2;
  }

/* PC版FV内の文字リンク調整 */
body.page-id-1427{
  --ouka-fv-nav-top-pc: 50%;
  --ouka-fv-nav-right-pc: 36px;
  --ouka-fv-nav-gap-pc: 14px;
  --ouka-fv-nav-font-size-pc: 16px;
  --ouka-fv-nav-line-height-pc: 1.55;
  --ouka-fv-nav-letter-spacing-pc: 0.08em;
  --ouka-fv-nav-color-pc: #ffffff;
  --ouka-fv-nav-text-align-pc: right;
}

body.page-id-1427 .ouka-home-hero__nav{
  position: absolute !important;
  top: var(--ouka-fv-nav-top-pc) !important;
  right: var(--ouka-fv-nav-right-pc) !important;
  left: auto !important;
  z-index: 10020 !important;

  display: flex !important;
  flex-direction: column !important;
  align-items: flex-end !important;
  justify-content: center !important;
  gap: var(--ouka-fv-nav-gap-pc) !important;

  transform: translateY(-50%) !important;
  writing-mode: horizontal-tb !important;
  text-orientation: mixed !important;
}

body.page-id-1427 .ouka-home-hero__nav a,
body.page-id-1427 .ouka-home-hero__nav a:visited,
body.page-id-1427 .ouka-home-hero__nav a:hover,
body.page-id-1427 .ouka-home-hero__nav a:focus{
  display: block !important;
  color: var(--ouka-fv-nav-color-pc) !important;
  text-decoration: none !important;
  text-decoration-line: none !important;
  border-bottom: 0 !important;
  box-shadow: none !important;
  background: transparent !important;

  font-size: var(--ouka-fv-nav-font-size-pc) !important;
  line-height: var(--ouka-fv-nav-line-height-pc) !important;
  letter-spacing: var(--ouka-fv-nav-letter-spacing-pc) !important;
  text-align: var(--ouka-fv-nav-text-align-pc) !important;

  padding: 0 !important;
  white-space: nowrap !important;
}

/* リンク内に span や Cocoon の装飾クラスが入っていても白・下線なしを優先 */
body.page-id-1427 .ouka-home-hero__nav a *,
body.page-id-1427 .ouka-home-hero__nav .cocoon-custom-text-1{
  color: inherit !important;
  text-decoration: none !important;
  text-decoration-line: none !important;
  text-decoration-color: transparent !important;
  text-decoration-thickness: 0 !important;
  border-bottom: 0 !important;
  box-shadow: none !important;
}

  /* PCではFV上の桜花園ロゴ画像を出さない */
  body.page-id-1427 .ouka-home-hero__logo,
  body.page-id-1427 .ouka-home-hero__logo-sp{
    display: none !important;
  }

  /* FV直後の本文は通常幅に戻す */
  body.page-id-1427 .entry-content{
    padding-top: 0 !important;
  }

  body.page-id-1427 .entry-content > *:not(.ouka-home-hero):not(script):not(style){
    max-width: var(--ouka-content-width);
    margin-left: auto;
    margin-right: auto;
  }

  body.page-id-1427 .entry-content > .block-width{
    max-width: none;
  }
}

/* スマホトップ */
@media (max-width: 767px){
  body.page-id-1427{
    /* 1427スマホは 1530 寄りの見せ方に寄せる */
    padding-top: var(--ouka-header-total-height-sp) !important;

    /* FV の上位置は 1530 系と同じ発想で微調整可能にする */
    --ouka-1427-fv-offset-sp: 6px;

    /* ロゴ位置とサイズ */
    --ouka-1427-logo-left-sp: 18px;
    --ouka-1427-logo-top-sp: calc(var(--ouka-header-total-height-sp) + 28px);
    --ouka-1427-logo-width-sp: min(50vw, 210px);

    /* FV直後の本文との間隔 */
    --ouka-1427-top-text-gap-sp: clamp(40px, 15vw, 60px);
  }

  /* スマホでは共通ヘッダーを最初から使う */
  body.page-id-1427 #ouka-global-header{
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: none !important;
  }

  /* 旧 Cocoon ヘッダー系は使わない */
  body.page-id-1427 #header-container,
  body.page-id-1427 .header-container,
  body.page-id-1427 #header-container-in,
  body.page-id-1427 .header-container-in,
  body.page-id-1427 #header,
  body.page-id-1427 .header,
  body.page-id-1427 #header-in,
  body.page-id-1427 .header-in,
  body.page-id-1427 #navi,
  body.page-id-1427 .navi{
    position: static !important;
    display: block !important;
    width: 0 !important;
    height: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    line-height: 0 !important;
  }

  body.page-id-1427 .mobile-menu-buttons{
    position: static !important;
    display: block !important;
    width: 0 !important;
    height: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    overflow: visible !important;
    list-style: none !important;
  }

  body.page-id-1427 .logo-menu-button.menu-button,
  body.page-id-1427 .logo-menu-button.menu-button *,
  body.page-id-1427 .search-menu-button.menu-button,
  body.page-id-1427 .search-menu-button.menu-button *{
    display: none !important;
  }

  /* 1427スマホも 1530寄りに、右ハンバーガーへ寄せる */
  body.page-id-1427 .navi-menu-button.menu-button{
    position: fixed !important;
    top: calc(var(--ouka-safe-top) + ((var(--ouka-header-bar-height-sp) - var(--ouka-header-menu-size-sp)) / 2)) !important;
    right: var(--ouka-header-menu-right-sp) !important;
    left: auto !important;
    width: var(--ouka-menu-box-size-sp) !important;
    height: var(--ouka-menu-box-size-sp) !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: transparent !important;
    color: var(--ouka-text) !important;
    border: 0 !important;
    box-shadow: none !important;
    z-index: 10090 !important;
  }

  /* 1427スマホも右からドロワーが出るように最終調整 */
  body.page-id-1427 #navi-menu-content.navi-menu-content.menu-content{
    left: auto !important;
    right: 0 !important;
    transform: translateX(100%) !important;
  }

  body.page-id-1427 #navi-menu-input:checked ~ #navi-menu-content{
    transform: translateX(0) !important;
  }

  body.page-id-1427 #navi-menu-content .navi-menu-close-button{
    left: 14px !important;
    right: auto !important;
  }

  /* FV 全体 */
  body.page-id-1427 .ouka-home-hero{
    position: relative;
    width: 100vw;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;


    min-height: 100vh;
    min-height: 100svh;
    min-height: 100dvh;
    height: 100vh;
    height: 100svh;
    height: 100dvh;
  }

  /* PC用スライドはスマホでは使わない */
  body.page-id-1427 .ouka-home-hero__slides--pc{
    display: none !important;
  }

  /* スマホ用スライド */
  body.page-id-1427 .ouka-home-hero__slides--sp,
  body.page-id-1427 .ouka-home-hero__bg{
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
  }

  body.page-id-1427 .ouka-home-hero__slides--sp img{
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    opacity: 0;
    transition: opacity .9s ease;
  }

  body.page-id-1427 .ouka-home-hero__slides--sp img.is-active{
    opacity: 1;
  }

  /* 現在の単一 picture 構造でも崩れないように残す */
  body.page-id-1427 .ouka-home-hero__bg picture,
  body.page-id-1427 .ouka-home-hero__bg img{
    display: block;
    width: 100%;
    height: 100%;
  }

  body.page-id-1427 .ouka-home-hero__bg img{
    object-fit: cover;
    object-position: center top;
  }

  /* モバイルでは id1530 寄りに、画像上のリンク群は出さない */
  body.page-id-1427 .ouka-home-hero__nav{
    display: none !important;
  }

  /* オーバーレイ / ロゴ / テキストは背景より前へ */
  body.page-id-1427 .ouka-home-hero__overlay{
    position: absolute;
    inset: 0;
    z-index: 1;
  }

  body.page-id-1427 .ouka-home-hero__content,
  body.page-id-1427 .ouka-home-hero__logo,
  body.page-id-1427 .ouka-home-hero__logo-sp{
    position: relative;
    z-index: 2;
  }

  /* PCで消したロゴを、スマホでは左寄せで表示 */
  body.page-id-1427 .ouka-home-hero__logo,
  body.page-id-1427 .ouka-home-hero__logo-sp{
    position: absolute !important;
    top: var(--ouka-1427-logo-top-sp) !important;
    left: var(--ouka-1427-logo-left-sp) !important;
    right: auto !important;
    width: var(--ouka-1427-logo-width-sp) !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: none !important;
    display: block !important;
  }

  body.page-id-1427 .ouka-home-hero__logo img,
  body.page-id-1427 .ouka-home-hero__logo-sp img{
    display: block !important;
    width: 100% !important;
    height: auto !important;
  }

  /* FV直後の本文との間隔 */
  body.page-id-1427 .entry-content{
    padding-top: 0 !important;
  }

  body.page-id-1427 .entry-content > .ouka-home-hero + *{
    margin-top: var(--ouka-1427-top-text-gap-sp) !important;
    margin-block-start: var(--ouka-1427-top-text-gap-sp) !important;
  }

  body.page-id-1427 .entry-content > *:not(.ouka-home-hero):not(script):not(style),
  body.page-id-1427 .entry-content > *:not(.ouka-home-hero):not(script):not(style) p,
  body.page-id-1427 .entry-content > *:not(.ouka-home-hero):not(script):not(style) h1,
  body.page-id-1427 .entry-content > *:not(.ouka-home-hero):not(script):not(style) h2,
  body.page-id-1427 .entry-content > *:not(.ouka-home-hero):not(script):not(style) h3,
  body.page-id-1427 .entry-content > *:not(.ouka-home-hero):not(script):not(style) h4,
  body.page-id-1427 .entry-content > *:not(.ouka-home-hero):not(script):not(style) h5,
  body.page-id-1427 .entry-content > *:not(.ouka-home-hero):not(script):not(style) h6,
  body.page-id-1427 .entry-content > *:not(.ouka-home-hero):not(script):not(style) li,
  body.page-id-1427 .entry-content > *:not(.ouka-home-hero):not(script):not(style) a,
  body.page-id-1427 .entry-content > *:not(.ouka-home-hero):not(script):not(style) span{
    text-align: left !important;
  }
}

/* =========================================
   3) トップFVの下の本文
========================================= */
body.page-id-1427 .entry-content > *:not(.ouka-home-hero):not(script):not(style){
  max-width: var(--ouka-content-width);
  margin-left: auto;
  margin-right: auto;
}

/* PCトップは hero 直後に spacer を置いて、
   共通ヘッダー表示時のレイアウトシフトを防ぐ */
body.page-id-1427 .ouka-top-nav-spacer{
  display: block;
  width: 100%;
  height: 0;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  pointer-events: none;
  transition: height .28s ease;
}

@media (max-width: 767px){
  body.page-id-1427 .ouka-top-nav-spacer{
    display: none !important;
  }
}

@media (min-width: 768px){
  body.page-id-1427 .ouka-top-nav-spacer{
    display: block !important;
    height: 0;
    min-height: 0 !important;
    flex: 0 0 auto;
  }

  /* JS がセットする共通ヘッダー高さの変数を保持 */
  body.page-id-1427{
    --ouka-top-header-height: 0px;
    --ouka-top-body-gap-pc: clamp(64px, 23vw, 90px);
  }
}

@media (max-width: 767px){
  body.page-id-1427 .entry-content > *:not(.ouka-home-hero):not(script):not(style):first-of-type{
    margin-top: var(--ouka-top-text-gap-sp) !important;
  }
}

body.page-id-1427 .entry-content > .block-width{
  max-width: none;
}

/* Instagram */
body.page-id-1427 #sb_instagram,
body.page-id-1427 .instagram-media,
body.page-id-1427 .sbi,
body.page-id-1427 .sbi-owl-stage-outer{
  width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

@media (min-width: 768px){
  body.page-id-1427 #sb_instagram,
  body.page-id-1427 .instagram-media,
  body.page-id-1427 .sbi,
  body.page-id-1427 .sbi-owl-stage-outer{
    max-width: var(--ouka-instagram-width-pc) !important;
  }
}

@media (max-width: 767px){
  body.page-id-1427 #sb_instagram,
  body.page-id-1427 .instagram-media,
  body.page-id-1427 .sbi,
  body.page-id-1427 .sbi-owl-stage-outer{
    max-width: var(--ouka-instagram-width-sp) !important;
  }
}

body.page-id-1427 .instagram-media{
  min-width: 0 !important;
}

/* =========================================
   4) 既存の汎用ヒーロー画像
========================================= */
.oukaen-page-hero{
  display: block;
  width: 100%;
  max-width: none;
  margin: 0 0 10px;
}

.oukaen-page-hero img{
  display: block;
  width: 100%;
  height: auto;
}

/* =========================================
   スマホ版トップページ本文だけ左揃え
   - PCはそのまま
   - ファーストビューは除外
========================================= */
@media (max-width: 767px){
  body.page-id-1427 .entry-content > *:not(.ouka-home-hero):not(script):not(style),
  body.page-id-1427 .entry-content > *:not(.ouka-home-hero):not(script):not(style) p,
  body.page-id-1427 .entry-content > *:not(.ouka-home-hero):not(script):not(style) h1,
  body.page-id-1427 .entry-content > *:not(.ouka-home-hero):not(script):not(style) h2,
  body.page-id-1427 .entry-content > *:not(.ouka-home-hero):not(script):not(style) h3,
  body.page-id-1427 .entry-content > *:not(.ouka-home-hero):not(script):not(style) h4,
  body.page-id-1427 .entry-content > *:not(.ouka-home-hero):not(script):not(style) h5,
  body.page-id-1427 .entry-content > *:not(.ouka-home-hero):not(script):not(style) h6,
  body.page-id-1427 .entry-content > *:not(.ouka-home-hero):not(script):not(style) li,
  body.page-id-1427 .entry-content > *:not(.ouka-home-hero):not(script):not(style) a,
  body.page-id-1427 .entry-content > *:not(.ouka-home-hero):not(script):not(style) span{
    text-align: left !important;
  }
}

/* =========================================
   B案トップページ page-id-1530
   - PCは MetaSlider
   - スマホは静止画像FV
   - 共通ヘッダーは後段の共通CSSをそのまま使う
========================================= */

body.page-id-1530{
  --ouka-preloader-bg: #f8f5f0;
  --ouka-preloader-fade: 1.0s;
  --ouka-b-top-text-gap-sp: 8px;
}

/* プリローダーは維持 */
html.ouka-js body.page-id-1530.ouka-preloader-active{
  overflow: hidden !important;
  overscroll-behavior: none !important;
}

html.ouka-js body.page-id-1530 #ouka-preloader{
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: var(--ouka-preloader-bg);
  z-index: 110001;
  opacity: 1;
  visibility: visible;
  pointer-events: none;
  transition:
    opacity var(--ouka-preloader-fade) ease,
    visibility 0s linear var(--ouka-preloader-fade);
}

html.ouka-js body.page-id-1530 #ouka-preloader .ouka-preloader__logo{
  display: block;
  width: min(60vw, 520px);
  max-width: 100%;
  height: auto;
  max-height: min(26vh, 220px);
  object-fit: contain;
}

html.ouka-js body.page-id-1530.ouka-preloader-done #ouka-preloader{
  opacity: 0;
  visibility: hidden;
}

@media (max-width: 767px){
  html.ouka-js body.page-id-1530 #ouka-preloader .ouka-preloader__logo{
    width: min(74vw, 340px);
    max-height: min(20vh, 140px);
  }
}

/* 固定ページタイトルなどは非表示 */
body.page-id-1530 .article-header.entry-header,
body.page-id-1530 .entry-header,
body.page-id-1530 .entry-title,
body.page-id-1530 .post-date,
body.page-id-1530 .date-tags,
body.page-id-1530 .eye-catch,
body.page-id-1530 .singular-eye-catch{
  display: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

body.page-id-1530 .content,
body.page-id-1530 .main,
body.page-id-1530 .article,
body.page-id-1530 .entry-content,
body.page-id-1530 .entry{
  margin: 0 !important;
  padding: 0 !important;
}

body.page-id-1530 .article{
  max-width: none !important;
  width: 100% !important;
  min-height: 0 !important;
}

/* 念のため旧FVの右側リンク群は消す */
body.page-id-1530 .ouka-home-hero__nav{
  display: none !important;
}

/* -------------------------
   PC用FV: MetaSlider
------------------------- */
body.page-id-1530 .ouka-b-top-hero--pc{
  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  margin-bottom: 0 !important;
  overflow: hidden;
  min-height: 100vh;
  min-height: 100svh;
  min-height: 100dvh;
  height: 100vh;
  height: 100svh;
  height: 100dvh;
}

body.page-id-1530 .ouka-b-top-hero--pc,
body.page-id-1530 .ouka-b-top-hero--pc .metaslider,
body.page-id-1530 .ouka-b-top-hero--pc .metaslider .flexslider,
body.page-id-1530 .ouka-b-top-hero--pc .metaslider .slides,
body.page-id-1530 .ouka-b-top-hero--pc .metaslider .slides > li{
  height: 100% !important;
}

body.page-id-1530 .ouka-b-top-hero--pc .metaslider{
  margin: 0 !important;
  max-width: none !important;
}

body.page-id-1530 .ouka-b-top-hero--pc .metaslider .slides > li{
  position: relative !important;
}

body.page-id-1530 .ouka-b-top-hero--pc .metaslider .slides img,
body.page-id-1530 .ouka-b-top-hero--pc .flexslider .slides img{
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  margin: 0 !important;
  padding: 0 !important;
}

body.page-id-1530 .ouka-b-top-hero--pc .caption-wrap{
  display: none !important;
}

/* スマホ用静止画像FVは初期状態では隠す */
body.page-id-1530 .ouka-b-top-hero-sp{
  display: none;
  margin: 0 !important;
  padding: 0 !important;
}

/* FV以外の本文幅 */
body.page-id-1530 .entry-content > *:not(.ouka-b-top-hero--pc):not(.ouka-b-top-hero-sp):not(script):not(style){
  max-width: var(--ouka-content-width);
  margin-left: auto;
  margin-right: auto;
}

body.page-id-1530 .entry-content > .block-width{
  max-width: none;
}

/* PCだけ、ヘッダー下の線とFVの間を少しあける */
@media (min-width: 768px){
  body.page-id-1530 .entry-content{
    padding-top: 6px !important;
  }

  body.page-id-1530 .ouka-b-top-hero--pc{
    display: block !important;
  }

  body.page-id-1530 .ouka-b-top-hero-sp{
    display: none !important;
  }
}

/* -------------------------
   id1530スマホ用FV: 静止画像
   - 上位置は維持
   - 下方向だけ表示範囲を広げる
------------------------- */
@media (max-width: 767px){
  body.page-id-1530{
    /* 今の上位置はちょうど良いので、そのまま維持 */
    --ouka-1530-fv-offset-sp: 6px;

    /* 下方向の表示範囲をここで調整 */
    --ouka-b-top-text-gap-sp: 8px;
  }

  body.page-id-1530 .ouka-b-top-hero--pc{
    display: none !important;
  }

  body.page-id-1530 .ouka-b-top-hero-sp{
    display: block !important;
    width: 100vw;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    margin-top: calc(
      -1 * var(--ouka-header-total-height-sp) + var(--ouka-1530-fv-offset-sp)
    ) !important;
    margin-bottom: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;

    /* ここでスマホ画面に近い高さまで見せる */
    height: 100vh !important;
    height: 100svh !important;
    height: 100dvh !important;
    min-height: 100vh !important;
    min-height: 100svh !important;
    min-height: 100dvh !important;
  }

  body.page-id-1530 .ouka-b-top-hero-sp img{
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;

    /* 上側を維持しながら下へ広げる */
    object-fit: cover !important;
    object-position: center top !important;
  }

  body.page-id-1530 .entry-content > .ouka-b-top-hero-sp + *{
    margin-top: var(--ouka-b-top-text-gap-sp) !important;
    margin-block-start: var(--ouka-b-top-text-gap-sp) !important;
  }

  body.page-id-1530 .entry-content > *:not(.ouka-b-top-hero--pc):not(.ouka-b-top-hero-sp):not(script):not(style),
  body.page-id-1530 .entry-content > *:not(.ouka-b-top-hero--pc):not(.ouka-b-top-hero-sp):not(script):not(style) p,
  body.page-id-1530 .entry-content > *:not(.ouka-b-top-hero--pc):not(.ouka-b-top-hero-sp):not(script):not(style) h1,
  body.page-id-1530 .entry-content > *:not(.ouka-b-top-hero--pc):not(.ouka-b-top-hero-sp):not(script):not(style) h2,
  body.page-id-1530 .entry-content > *:not(.ouka-b-top-hero--pc):not(.ouka-b-top-hero-sp):not(script):not(style) h3,
  body.page-id-1530 .entry-content > *:not(.ouka-b-top-hero--pc):not(.ouka-b-top-hero-sp):not(script):not(style) h4,
  body.page-id-1530 .entry-content > *:not(.ouka-b-top-hero--pc):not(.ouka-b-top-hero-sp):not(script):not(style) h5,
  body.page-id-1530 .entry-content > *:not(.ouka-b-top-hero--pc):not(.ouka-b-top-hero-sp):not(script):not(style) h6,
  body.page-id-1530 .entry-content > *:not(.ouka-b-top-hero--pc):not(.ouka-b-top-hero-sp):not(script):not(style) li,
  body.page-id-1530 .entry-content > *:not(.ouka-b-top-hero--pc):not(.ouka-b-top-hero-sp):not(script):not(style) a,
  body.page-id-1530 .entry-content > *:not(.ouka-b-top-hero--pc):not(.ouka-b-top-hero-sp):not(script):not(style) span{
    text-align: left !important;
  }
}

/*webフォント指定*/
html body,
html body button,
html body input,
html body select,
html body textarea,
html body h1,
html body h2,
html body h3,
html body h4,
html body h5,
html body h6,
html body p,
html body li,
html body dt,
html body dd,
html body a,
html body span,
html body div,
.news_date_title,
.oukaen-info-title,
.oukaen-timeline__date,
.oukaen-timeline__heading,
.oukaen-access-title {
	font-family: "Shippori Mincho B1", serif;
}

/* =========================================
   共通カスタムヘッダー
   - 全ページ共通の基礎スタイル
   - 1427 の表示 / 非表示タイミングはトップ専用ブロック側で制御
   - body の padding-top は 1427 以外だけに付与
========================================= */

body{
  --ouka-header-bg: #f8f5f0;
  --ouka-header-line: #000000;

  /* PC */
  --ouka-header-height-pc: 71px;
  --ouka-header-side-pc: 28px;

  --ouka-header-logo-width-pc: 100px;
  --ouka-header-logo-height-pc: 28px;
  --ouka-header-logo-shift-x-pc: 0px;
  --ouka-header-logo-shift-y-pc: 0px;

  --ouka-header-nav-gap-pc: 22px;
  --ouka-header-nav-font-size-pc: 14px;
  --ouka-header-nav-font-weight-pc: 300;
  --ouka-header-nav-line-height-pc: 1;
  --ouka-header-nav-letter-spacing-pc: 0em;
  --ouka-header-nav-shift-y-pc: 0px;

  --ouka-header-instagram-size-pc: 18px;

  /* SP */
  --ouka-header-bar-height-sp: 36px;
  --ouka-header-total-height-sp: calc(var(--ouka-safe-top) + var(--ouka-header-bar-height-sp));

  --ouka-header-logo-width-sp: 100px;
  --ouka-header-logo-height-sp: 25px;
  --ouka-header-logo-left-sp: 16px;
  --ouka-header-logo-shift-y-sp: 0px;

  --ouka-header-menu-right-sp: 16px;
  --ouka-header-menu-size-sp: 24px;

  /* ドロワー共通 */
  --ouka-drawer-width: 65vw;
  --ouka-drawer-max-width: 360px;
  --ouka-drawer-bg: rgba(248, 245, 240, 0.82);
  --ouka-drawer-blur: 10px;

  --ouka-drawer-padding-top: calc(var(--ouka-safe-top) + 56px);
  --ouka-drawer-padding-side: 24px;
  --ouka-drawer-padding-bottom: 28px;

  --ouka-drawer-link-gap: 18px;
  --ouka-drawer-link-size: 18px;
  --ouka-drawer-link-line-height: 1.9;
  --ouka-drawer-link-letter-spacing: 0.04em;
  --ouka-drawer-link-font-family: "Shippori Mincho B1", serif;

  --ouka-drawer-close-size: 40px;
  --ouka-drawer-close-top: calc(var(--ouka-safe-top) + 12px);
  --ouka-drawer-close-right: 14px;
  --ouka-drawer-close-bar-length: 24px;
  --ouka-drawer-close-bar-thickness: 1px;
}

/* =========================================
   PC
========================================= */
@media (min-width: 768px){
  /* 旧ヘッダー / 旧ナビは全ページで見せない
     → 以後は #ouka-global-header を使う */
  body #header-container,
  body .header-container,
  body #header-container-in,
  body .header-container-in,
  body #header,
  body .header,
  body #header-in,
  body .header-in,
  body #navi,
  body .navi{
    display: none !important;
  }

  /* 1427 以外は通常ページとしてヘッダーぶん下げる
     1427 はトップ専用ブロックで制御 */
  body:not(.page-id-1427){
    padding-top: var(--ouka-header-height-pc) !important;
  }
}

/* =========================================
   スマホ
========================================= */
@media (max-width: 767px){
  /* 1427 以外は通常ページとしてヘッダーぶん下げる
     1427 はトップ専用ブロックで制御 */
  body:not(.page-id-1427){
    padding-top: var(--ouka-header-total-height-sp) !important;
  }

  /* 旧ヘッダー系は「消す」のではなく、ゼロサイズ化して残す
     → ハンバーガー要素の親を壊さないため */
  body .mobile-header,
  body #header-container,
  body .header-container,
  body #header-container-in,
  body .header-container-in,
  body #header,
  body .header,
  body #header-in,
  body .header-in,
  body #navi,
  body .navi{
    position: static !important;
    display: block !important;
    width: 0 !important;
    height: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    line-height: 0 !important;
  }

  body .mobile-menu-buttons{
    position: static !important;
    display: block !important;
    width: 0 !important;
    height: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    overflow: visible !important;
    list-style: none !important;
  }

  body .logo-menu-button.menu-button,
  body .logo-menu-button.menu-button *,
  body .search-menu-button.menu-button,
  body .search-menu-button.menu-button *{
    display: none !important;
  }

  /* ハンバーガー共通サイズ */
  body{
  --ouka-menu-box-size-sp: 24px;

  --ouka-menu-icon-width-sp: 19px;
  --ouka-menu-icon-height-sp: 12px;
  --ouka-menu-icon-line-thickness-sp: 0.6666667px;
  --ouka-menu-icon-line-edge-inset-y-sp: 0.6666667px;

  --ouka-menu-label-width-sp: 24px;
  --ouka-menu-label-size-sp: 9px;
  --ouka-menu-label-gap-sp: 1px;
}

  /* ハンバーガーメニュー右固定*/
  body:not(.page-id-1427) .navi-menu-button.menu-button{
    position: fixed !important;
    top: calc(var(--ouka-safe-top) + ((var(--ouka-header-bar-height-sp) - var(--ouka-header-menu-size-sp)) / 2)) !important;
    right: var(--ouka-header-menu-right-sp) !important;
    left: auto !important;
    width: var(--ouka-header-menu-size-sp) !important;
    height: var(--ouka-header-menu-size-sp) !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: transparent !important;
    color: var(--ouka-text) !important;
    border: 0 !important;
    box-shadow: none !important;
    z-index: 10090 !important;
  }

  body.page-id-1427 .navi-menu-button.menu-button,
  body:not(.page-id-1427) .navi-menu-button.menu-button{
    width: var(--ouka-menu-box-size-sp) !important;
    height: var(--ouka-menu-box-size-sp) !important;
  }

  body.page-id-1427 #navi-menu-open.menu-open.menu-button-in,
  body:not(.page-id-1427) #navi-menu-open.menu-open.menu-button-in{
    display: inline-flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    padding: 0 !important;
    line-height: 1 !important;
    color: inherit !important;
  }

  body.page-id-1427 #navi-menu-open .fa.fa-bars,
  body:not(.page-id-1427) #navi-menu-open .fa.fa-bars{
    --ouka-menu-icon-line-top-y-sp: 0.6666667px;
    --ouka-menu-icon-line-middle-y-sp: 4.6666667px;
    --ouka-menu-icon-line-bottom-y-sp: 8.6666667px;

    display: block !important;
    width: var(--ouka-menu-icon-width-sp) !important;
    height: var(--ouka-menu-icon-height-sp) !important;
    min-width: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 0 !important;
    line-height: 0 !important;
    overflow: hidden !important;
    color: transparent !important;
    background:
      linear-gradient(var(--ouka-text), var(--ouka-text)) left top var(--ouka-menu-icon-line-top-y-sp) / 100% var(--ouka-menu-icon-line-thickness-sp) no-repeat,
      linear-gradient(var(--ouka-text), var(--ouka-text)) left top var(--ouka-menu-icon-line-middle-y-sp) / 100% var(--ouka-menu-icon-line-thickness-sp) no-repeat,
      linear-gradient(var(--ouka-text), var(--ouka-text)) left top var(--ouka-menu-icon-line-bottom-y-sp) / 100% var(--ouka-menu-icon-line-thickness-sp) no-repeat !important;
  }

  body.page-id-1427 #navi-menu-open .fa.fa-bars::before,
  body:not(.page-id-1427) #navi-menu-open .fa.fa-bars::before{
    content: none !important;
    display: none !important;
  }

  body.page-id-1427 #navi-menu-open .navi-menu-caption,
  body:not(.page-id-1427) #navi-menu-open .navi-menu-caption{
    display: block !important;
    width: var(--ouka-menu-label-width-sp) !important;
    min-width: 0 !important;
    margin-top: var(--ouka-menu-label-gap-sp) !important;
    padding: 0 !important;
    font-size: var(--ouka-menu-label-size-sp) !important;
    font-weight: 400 !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
    text-align: center !important;
    white-space: nowrap !important;
  }

  /* 下層ページの旧ロゴ描画ルートを止める */
  body:not(.page-id-1427) .article::after,
  body:not(.page-id-1427) .article::before,
  body:not(.page-id-1427) .entry-content::before,
  body:not(.page-id-1427) .entry-content::after,
  body:not(.page-id-1427) .oukaen-page-hero::before,
  body:not(.page-id-1427) #header-container-in::after,
  body:not(.page-id-1427) .header-container-in::after{
    content: none !important;
    display: none !important;
  }

  /* ドロワー系 */
  body #navi-menu-input,
  body #navi-menu-content{
    z-index: 10095 !important;
  }

  /* 下層ページの先頭画像まわり */
  body:not(.page-id-1427):not(.page-id-1530){
    --ouka-subpage-first-visual-gap-sp: 0px;
  }

  body:not(.page-id-1427):not(.page-id-1530) .article-header.entry-header,
  body:not(.page-id-1427):not(.page-id-1530) .entry-header,
  body:not(.page-id-1427):not(.page-id-1530) .entry-title,
  body:not(.page-id-1427):not(.page-id-1530) .post-date,
  body:not(.page-id-1427):not(.page-id-1530) .date-tags,
  body:not(.page-id-1427):not(.page-id-1530) .eye-catch,
  body:not(.page-id-1427):not(.page-id-1530) .singular-eye-catch{
    display: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  body:not(.page-id-1427):not(.page-id-1530) #content,
  body:not(.page-id-1427):not(.page-id-1530) .content,
  body:not(.page-id-1427):not(.page-id-1530) #content-in,
  body:not(.page-id-1427):not(.page-id-1530) .content-in,
  body:not(.page-id-1427):not(.page-id-1530) #main,
  body:not(.page-id-1427):not(.page-id-1530) .main,
  body:not(.page-id-1427):not(.page-id-1530) .article,
  body:not(.page-id-1427):not(.page-id-1530) .entry-content,
  body:not(.page-id-1427):not(.page-id-1530) .entry{
    margin-top: 0 !important;
    padding-top: 0 !important;
  }

  body:not(.page-id-1427):not(.page-id-1530) .oukaen-page-hero,
  body:not(.page-id-1427):not(.page-id-1530) .entry-content > figure:first-child,
  body:not(.page-id-1427):not(.page-id-1530) .entry-content > .wp-block-image:first-child{
    margin-top: var(--ouka-subpage-first-visual-gap-sp) !important;
    margin-bottom: 10px !important;
  }
}

/* =========================================
   新ヘッダー本体
========================================= */
#ouka-global-header{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background: var(--ouka-header-bg);
  border-bottom: 0.5px solid var(--ouka-header-line);
  z-index: 10080;
  box-sizing: border-box;
}

#ouka-global-header .ouka-global-header__inner{
  box-sizing: border-box;
}

/* PC */
@media (min-width: 768px){
  #ouka-global-header{
    height: var(--ouka-header-height-pc);
  }

  #ouka-global-header .ouka-global-header__inner{
    max-width: 1280px;
    height: 100%;
    margin: 0 auto;
    padding: 0 var(--ouka-header-side-pc);
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  #ouka-global-header .ouka-global-header__logo{
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    transform: translate(
      var(--ouka-header-logo-shift-x-pc),
      var(--ouka-header-logo-shift-y-pc)
    );
  }

  #ouka-global-header .ouka-global-header__logo img{
    display: block;
    width: var(--ouka-header-logo-width-pc);
    height: var(--ouka-header-logo-height-pc);
    object-fit: contain;
  }

  #ouka-global-header .ouka-global-header__nav{
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--ouka-header-nav-gap-pc);
    transform: translateY(var(--ouka-header-nav-shift-y-pc));
  }

  #ouka-global-header .ouka-global-header__link{
    color: var(--ouka-text);
    text-decoration: none;
    font-family: "Shippori Mincho B1", serif;
    font-weight: var(--ouka-header-nav-font-weight-pc);
    font-size: var(--ouka-header-nav-font-size-pc);
    line-height: var(--ouka-header-nav-line-height-pc);
    letter-spacing: var(--ouka-header-nav-letter-spacing-pc);
    white-space: nowrap;
  }

  #ouka-global-header .ouka-global-header__instagram{
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  #ouka-global-header .ouka-global-header__instagram img{
    display: block;
    width: var(--ouka-header-instagram-size-pc);
    height: auto;
  }

  #ouka-global-header .ouka-global-header__logo-sp{
    display: none !important;
  }
}

/* スマホ */
@media (max-width: 767px){
  #ouka-global-header{
    height: var(--ouka-header-total-height-sp);
	border-bottom: none !important;
  }

  #ouka-global-header .ouka-global-header__inner{
    position: relative;
    height: 100%;
    width: 100%;
    box-sizing: border-box;
    padding-top: var(--ouka-safe-top);
    padding-left: max(var(--ouka-header-logo-left-sp), env(safe-area-inset-left, 0px));
    display: flex;
    align-items: center;
    justify-content: flex-start;
  }

  #ouka-global-header .ouka-global-header__logo,
  #ouka-global-header .ouka-global-header__nav{
    display: none !important;
  }

  #ouka-global-header .ouka-global-header__logo-sp{
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    height: var(--ouka-header-bar-height-sp);
    margin: 0;
    transform: translateY(var(--ouka-header-logo-shift-y-sp));
  }

  #ouka-global-header .ouka-global-header__logo-sp img{
    display: block;
    width: var(--ouka-header-logo-width-sp);
    height: var(--ouka-header-logo-height-sp);
    object-fit: contain;
  }
}

/* =========================================
   ドロワー共通デザイン
   - 見た目は全ページ共通
   - 出る向きは下の補助ブロックで調整
========================================= */
@media (max-width: 1023px){
  #navi-menu-content.navi-menu-content.menu-content{
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: var(--ouka-drawer-width) !important;
    max-width: var(--ouka-drawer-max-width) !important;
    height: 100dvh !important;
    margin: 0 !important;
    padding:
      var(--ouka-drawer-padding-top)
      var(--ouka-drawer-padding-side)
      var(--ouka-drawer-padding-bottom) !important;
    box-sizing: border-box !important;
    background: var(--ouka-drawer-bg) !important;
    backdrop-filter: blur(var(--ouka-drawer-blur)) !important;
    -webkit-backdrop-filter: blur(var(--ouka-drawer-blur)) !important;
    color: var(--ouka-text) !important;
    overflow-y: auto !important;
    z-index: 10040 !important;
    transform: translateX(-100%) !important;
    transition: transform 0.32s ease !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  #navi-menu-input:checked ~ #navi-menu-content{
    transform: translateX(0) !important;
  }

  #navi-menu-content .menu-drawer{
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    writing-mode: horizontal-tb !important;
    text-orientation: mixed !important;
  }

  #navi-menu-content .menu-drawer li{
    margin: 0 0 var(--ouka-drawer-link-gap) !important;
    padding: 0 !important;
  }

  #navi-menu-content .menu-drawer a{
    display: block !important;
    width: 100% !important;
    color: var(--ouka-text) !important;
    text-decoration: none !important;
    font-size: var(--ouka-drawer-link-size) !important;
    line-height: var(--ouka-drawer-link-line-height) !important;
    letter-spacing: var(--ouka-drawer-link-letter-spacing) !important;
    font-family: var(--ouka-drawer-link-font-family) !important;
    white-space: nowrap !important;
  }

  #navi-menu-content .navi-menu-close-button{
    position: absolute !important;
    top: var(--ouka-drawer-close-top) !important;
    right: var(--ouka-drawer-close-right) !important;
    display: block !important;
    width: var(--ouka-drawer-close-size) !important;
    height: var(--ouka-drawer-close-size) !important;
    z-index: 10041 !important;
  }

  #navi-menu-content .navi-menu-close-button .fa.fa-close{
    visibility: hidden !important;
  }

  #navi-menu-content .navi-menu-close-button::before,
  #navi-menu-content .navi-menu-close-button::after{
    content: "" !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    width: var(--ouka-drawer-close-bar-length) !important;
    height: var(--ouka-drawer-close-bar-thickness) !important;
    background: var(--ouka-text) !important;
    transform-origin: center center !important;
  }

  #navi-menu-content .navi-menu-close-button::before{
    transform: translate(-50%, -50%) rotate(45deg) !important;
  }

  #navi-menu-content .navi-menu-close-button::after{
    transform: translate(-50%, -50%) rotate(-45deg) !important;
  }
}

/* -----------------------------
   右ハンバーガーに合わせて、
   ドロワーを右から出す
   閉じるボタンは左上へ
   ※ 1427 は次のトップ専用ブロック差し替えで最終調整する
----------------------------- */
@media (max-width: 1023px){
  body:not(.page-id-1427) #navi-menu-content.navi-menu-content.menu-content{
    left: auto !important;
    right: 0 !important;
    transform: translateX(100%) !important;
  }

  body:not(.page-id-1427) #navi-menu-input:checked ~ #navi-menu-content{
    transform: translateX(0) !important;
  }

  body:not(.page-id-1427) #navi-menu-content .navi-menu-close-button{
    left: 14px !important;
    right: auto !important;
  }
}

/* -----------------------------
   スマホのInstagram投稿画像の間隔を調整可能にする
   1427 / 1530 の両方を対象
----------------------------- */
@media (max-width: 767px){
  body.page-id-1427,
  body.page-id-1530{
    --ouka-instagram-gap-sp: 18px;
  }

  body.page-id-1427 #sb_instagram #sbi_images,
  body.page-id-1530 #sb_instagram #sbi_images{
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: var(--ouka-instagram-gap-sp) !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  body.page-id-1427 #sb_instagram #sbi_images .sbi_item,
  body.page-id-1530 #sb_instagram #sbi_images .sbi_item{
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    flex: unset !important;
  }

  body.page-id-1427 #sb_instagram .sbi_photo_wrap,
  body.page-id-1530 #sb_instagram .sbi_photo_wrap,
  body.page-id-1427 #sb_instagram .sbi_photo,
  body.page-id-1530 #sb_instagram .sbi_photo{
    margin: 0 !important;
    padding: 0 !important;
  }
}
@media (max-width: 1023px){
  body{
    --ouka-drawer-width: 65vw;
    --ouka-drawer-max-width: 360px;
    --ouka-drawer-bg: rgba(248, 245, 240, 0.82);
    --ouka-drawer-blur: 10px;

    --ouka-drawer-padding-top: calc(var(--ouka-safe-top) + 56px);
    --ouka-drawer-padding-side: 24px;
    --ouka-drawer-padding-bottom: 28px;

    --ouka-drawer-link-gap: 18px;
    --ouka-drawer-link-size: 18px;
    --ouka-drawer-link-line-height: 1.9;
    --ouka-drawer-link-letter-spacing: 0.04em;
    --ouka-drawer-link-font-family: "Shippori Mincho B1", serif;

    --ouka-drawer-close-size: 40px;
    --ouka-drawer-close-top: calc(var(--ouka-safe-top) + 12px);
    --ouka-drawer-close-right: 14px;
    --ouka-drawer-close-bar-length: 24px;
    --ouka-drawer-close-bar-thickness: 1px;
  }

  #navi-menu-content.navi-menu-content.menu-content{
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: var(--ouka-drawer-width) !important;
    max-width: var(--ouka-drawer-max-width) !important;
    height: 100dvh !important;
    margin: 0 !important;
    padding:
      var(--ouka-drawer-padding-top)
      var(--ouka-drawer-padding-side)
      var(--ouka-drawer-padding-bottom) !important;
    box-sizing: border-box !important;
    background: var(--ouka-drawer-bg) !important;
    backdrop-filter: blur(var(--ouka-drawer-blur)) !important;
    -webkit-backdrop-filter: blur(var(--ouka-drawer-blur)) !important;
    color: var(--ouka-text) !important;
    overflow-y: auto !important;
    z-index: 10040 !important;
    transform: translateX(-100%) !important;
    transition: transform 0.32s ease !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  #navi-menu-input:checked ~ #navi-menu-content{
    transform: translateX(0) !important;
  }

  #navi-menu-content .menu-drawer{
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    writing-mode: horizontal-tb !important;
    text-orientation: mixed !important;
  }

  #navi-menu-content .menu-drawer li{
    margin: 0 0 var(--ouka-drawer-link-gap) !important;
    padding: 0 !important;
  }

  #navi-menu-content .menu-drawer a{
    display: block !important;
    width: 100% !important;
    color: var(--ouka-text) !important;
    text-decoration: none !important;
    font-size: var(--ouka-drawer-link-size) !important;
    line-height: var(--ouka-drawer-link-line-height) !important;
    letter-spacing: var(--ouka-drawer-link-letter-spacing) !important;
    font-family: var(--ouka-drawer-link-font-family) !important;
    white-space: nowrap !important;
  }

  #navi-menu-content .navi-menu-close-button{
    position: absolute !important;
    top: var(--ouka-drawer-close-top) !important;
    right: var(--ouka-drawer-close-right) !important;
    display: block !important;
    width: var(--ouka-drawer-close-size) !important;
    height: var(--ouka-drawer-close-size) !important;
    z-index: 10041 !important;
  }

  #navi-menu-content .navi-menu-close-button .fa.fa-close{
    visibility: hidden !important;
  }

  #navi-menu-content .navi-menu-close-button::before,
  #navi-menu-content .navi-menu-close-button::after{
    content: "" !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    width: var(--ouka-drawer-close-bar-length) !important;
    height: var(--ouka-drawer-close-bar-thickness) !important;
    background: var(--ouka-text) !important;
    transform-origin: center center !important;
  }

  #navi-menu-content .navi-menu-close-button::before{
    transform: translate(-50%, -50%) rotate(45deg) !important;
  }

  #navi-menu-content .navi-menu-close-button::after{
    transform: translate(-50%, -50%) rotate(-45deg) !important;
  }
}

/* =========================================
   下層ページのヒーロー
     1) current id1270 block (.ouka-about-intro)
     2) future reusable block (.ouka-subpage-hero)
========================================= */

/* -----------------------------------------
   root variables
----------------------------------------- */
body.page-id-1270 .ouka-about-intro,
.entry-content > .ouka-subpage-hero{
  --ouka-subhero-max-width-pc: 1280px;

  --ouka-subhero-left-pad-pc: 56px;
  --ouka-subhero-left-pad-sp: 20px;

  --ouka-subhero-top-pc: 44px;
  --ouka-subhero-top-sp: 12px;

  --ouka-subhero-bottom-pc: 72px;
  --ouka-subhero-bottom-sp: 40px;

  --ouka-subhero-gap-y-pc: 18px;

  --ouka-subhero-title-size-pc: 29px;
  --ouka-subhero-title-size-sp: 24px;
  --ouka-subhero-title-line: 1.6;
  --ouka-subhero-title-letter-pc: 0.16em;
  --ouka-subhero-title-letter-sp: 0.10em;
  --ouka-subhero-title-media-gap-sp: 14px;
	
  --ouka-subhero-text-max-pc: 360px;
  --ouka-subhero-text-width-pc: 600px;
  --ouka-subhero-text-size-pc: 20px;
  --ouka-subhero-text-size-sp: 16px;
  --ouka-subhero-text-line-pc: 2.1;
  --ouka-subhero-text-line-sp: 2.0;

  --ouka-subhero-media-offset-y-pc: -40px;
  --ouka-subhero-image-aspect-sp: 16 / 9;

  --ouka-subhero-plate-color: #e9e4d9;
  --ouka-subhero-plate-left-pc: 70px;
  --ouka-subhero-plate-top-pc: 70px;
  --ouka-subhero-plate-bottom-pc: 40px;
}

/* -----------------------------------------
   base wrapper
----------------------------------------- */
body.page-id-1270 .entry-content > .ouka-about-intro,
.entry-content > .ouka-subpage-hero{
  box-sizing: border-box;
  width: 100vw;
  max-width: none !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  color: #4b4043;
  overflow: visible;
}

/* text alignment */
body.page-id-1270 .ouka-about-intro,
body.page-id-1270 .ouka-about-intro *,
.entry-content > .ouka-subpage-hero,
.entry-content > .ouka-subpage-hero *{
  text-align: left;
}

/* typography base */
body.page-id-1270 .ouka-about-intro__title,
body.page-id-1270 .ouka-about-intro__text,
.ouka-subpage-hero__title,
.ouka-subpage-hero__text{
  margin: 0;
  color: #4b4043;
  font-family: "Shippori Mincho B1", serif;
}

body.page-id-1270 .ouka-about-intro__title,
.ouka-subpage-hero__title{
  font-weight: 600;
}

body.page-id-1270 .ouka-about-intro__text,
.ouka-subpage-hero__text{
  font-weight: 400;
}

body.page-id-1270 .ouka-about-intro__media,
.ouka-subpage-hero__media{
  position: relative;
  min-width: 0;
}

body.page-id-1270 .ouka-about-intro__media img,
.ouka-subpage-hero__media img{
  display: block;
  width: 100%;
  max-width: none;
}

/* -----------------------------------------
   PC
----------------------------------------- */
@media (min-width: 768px){
  body.page-id-1270 .entry-content > .ouka-about-intro,
  .entry-content > .ouka-subpage-hero{
    --ouka-subhero-copy-left-pc: max(
      var(--ouka-subhero-left-pad-pc),
      calc((100vw - var(--ouka-subhero-max-width-pc)) / 2 + var(--ouka-subhero-left-pad-pc))
    );
    --ouka-subhero-copy-right-clear-pc: clamp(32px, 4vw, 72px);
    --ouka-subhero-copy-width-pc: min(
      var(--ouka-subhero-text-max-pc),
      calc(50vw - var(--ouka-subhero-copy-left-pc) - var(--ouka-subhero-copy-right-clear-pc))
    );

    display: grid;
    grid-template-columns: 50vw 50vw;
    grid-template-areas:
      "title media"
      "text  media";
    column-gap: 0;
    row-gap: var(--ouka-subhero-gap-y-pc);
    align-items: start;

    padding-top: var(--ouka-subhero-top-pc);
    padding-right: 0;
    padding-bottom: 0;
    padding-left: 0;

    margin-bottom: var(--ouka-subhero-bottom-pc);
  }

  body.page-id-1270 .ouka-about-intro__title,
  .ouka-subpage-hero__title{
    grid-area: title;
    width: var(--ouka-subhero-copy-width-pc);
    max-width: var(--ouka-subhero-copy-width-pc);
    margin-left: var(--ouka-subhero-copy-left-pc);
    margin-right: 0;
    font-size: var(--ouka-subhero-title-size-pc) !important;
    line-height: var(--ouka-subhero-title-line);
    letter-spacing: var(--ouka-subhero-title-letter-pc);
    align-self: end;
    position: relative;
    z-index: 2;
  }

  body.page-id-1270 .ouka-about-intro__text,
  .ouka-subpage-hero__text{
    grid-area: text;
    width: var(--ouka-subhero-text-width-pc);
    max-width: var(--ouka-subhero-text-width-pc);
    margin-left: var(--ouka-subhero-copy-left-pc);
    margin-right: 0;
    font-size: var(--ouka-subhero-text-size-pc);
    line-height: var(--ouka-subhero-text-line-pc);
    letter-spacing: 0.04em;
    position: relative;
    z-index: 2;
  }

  body.page-id-1270 .ouka-about-intro__media,
  .ouka-subpage-hero__media{
    grid-area: media;
    align-self: start;
    justify-self: stretch;
    width: 100%;
    max-width: none;
    margin: 0;
    margin-top: var(--ouka-subhero-media-offset-y-pc);
    overflow: visible;
  }

  body.page-id-1270 .ouka-about-intro__media::before,
  .ouka-subpage-hero__media::before{
    content: "";
    position: absolute;
    z-index: 0;
    left: calc(-1 * var(--ouka-subhero-plate-left-pc));
    top: var(--ouka-subhero-plate-top-pc);
    right: 0;
    bottom: calc(-1 * var(--ouka-subhero-plate-bottom-pc));
    background: var(--ouka-subhero-plate-color);
    pointer-events: none;
  }

  body.page-id-1270 .ouka-about-intro__media img,
  .ouka-subpage-hero__media img{
    position: relative;
    z-index: 3;
    height: auto !important;
    aspect-ratio: auto !important;
    object-fit: contain !important;
    object-position: center center;
  }
}

/* -----------------------------------------
   SP
----------------------------------------- */
@media (max-width: 767px){
  body.page-id-1270 .entry-content > .ouka-about-intro,
  .entry-content > .ouka-subpage-hero{
    display: block;
    padding-top: var(--ouka-subhero-top-sp);
    padding-right: 0;
    padding-bottom: 0;
    padding-left: 0;
    margin-bottom: var(--ouka-subhero-bottom-sp);
  }

body.page-id-1270 .entry-content > .ouka-about-intro > .ouka-about-intro__title,
.entry-content > .ouka-subpage-hero > .ouka-subpage-hero__title{
  padding-left: var(--ouka-subhero-left-pad-sp);
  padding-right: var(--ouka-subhero-left-pad-sp);
  margin-top: 0 !important;
  margin-bottom: var(--ouka-subhero-title-media-gap-sp) !important;
  font-size: var(--ouka-subhero-title-size-sp);
  line-height: 1.55;
  letter-spacing: var(--ouka-subhero-title-letter-sp);
}

  /* id1270 + reusable lower-level pages mobile: same layered composition */
  body.page-id-1270 .entry-content > .ouka-about-intro > .ouka-about-intro__media,
  .entry-content > .ouka-subpage-hero > .ouka-subpage-hero__media{
    --ouka-subhero-media-width-sp: calc(100vw - 36px);
    --ouka-subhero-media-plate-shift-y-sp: 18px;
    --ouka-subhero-media-gap-below-sp: 18px;

    position: relative;
    width: 100vw;
    max-width: none;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    margin-bottom: calc(
      var(--ouka-subhero-media-gap-below-sp) +
      var(--ouka-subhero-media-plate-shift-y-sp)
    );
    overflow: visible;
  }

  body.page-id-1270 .entry-content > .ouka-about-intro > .ouka-about-intro__media::before,
  .entry-content > .ouka-subpage-hero > .ouka-subpage-hero__media::before{
    content: "";
    position: absolute;
    top: var(--ouka-subhero-media-plate-shift-y-sp);
    left: 0;
    z-index: 0;
    width: var(--ouka-subhero-media-width-sp);
    aspect-ratio: var(--ouka-subhero-image-aspect-sp);
    background: var(--ouka-subhero-plate-color);
    pointer-events: none;
  }

  body.page-id-1270 .entry-content > .ouka-about-intro > .ouka-about-intro__media img,
  .entry-content > .ouka-subpage-hero > .ouka-subpage-hero__media img{
    position: relative;
    z-index: 1;
    width: var(--ouka-subhero-media-width-sp);
    margin-left: auto;
    aspect-ratio: var(--ouka-subhero-image-aspect-sp);
    object-fit: cover;
    object-position: center center;
  }

  /* reusable lower-level pages mobile: new layered composition */
  .entry-content > .ouka-subpage-hero > .ouka-subpage-hero__media{
    --ouka-subhero-media-width-sp: calc(100vw - 36px);
    --ouka-subhero-media-plate-shift-y-sp: 18px;
    --ouka-subhero-media-gap-below-sp: 18px;

    position: relative;
    width: 100vw;
    max-width: none;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    margin-bottom: calc(
      var(--ouka-subhero-media-gap-below-sp) +
      var(--ouka-subhero-media-plate-shift-y-sp)
    );
    overflow: visible;
  }

  .entry-content > .ouka-subpage-hero > .ouka-subpage-hero__media::before{
    content: "";
    position: absolute;
    top: var(--ouka-subhero-media-plate-shift-y-sp);
    left: 0;
    z-index: 0;
    width: var(--ouka-subhero-media-width-sp);
    aspect-ratio: var(--ouka-subhero-image-aspect-sp);
    background: var(--ouka-subhero-plate-color);
    pointer-events: none;
  }

  .entry-content > .ouka-subpage-hero > .ouka-subpage-hero__media img{
    position: relative;
    z-index: 1;
    width: var(--ouka-subhero-media-width-sp);
    margin-left: auto;
    aspect-ratio: var(--ouka-subhero-image-aspect-sp);
    object-fit: cover;
    object-position: center center;
  }

  body.page-id-1270 .ouka-about-intro__text,
  .ouka-subpage-hero__text{
    padding-left: var(--ouka-subhero-left-pad-sp);
    padding-right: var(--ouka-subhero-left-pad-sp);
    font-size: var(--ouka-subhero-text-size-sp);
    line-height: var(--ouka-subhero-text-line-sp);
    letter-spacing: 0.03em;
  }
}

/* =========================================
   id1270
   これまでの歩み　PC
   - shorter horizontal lines
   - move content closer to center line
   - font size tuning
========================================= */
@media (min-width: 768px){
  body.page-id-1270{
    --ouka-1270-history-line-left-pc: 280px;
    --ouka-1270-history-line-right-pc: 110px;
    --ouka-1270-history-right-gap-pc: 18px;
    --ouka-1270-history-left-shift-x-pc: 140px; /* positive = move right */

    --ouka-1270-history-year-size-pc: 40px;
    --ouka-1270-history-title-size-pc: 20px;
    --ouka-1270-history-text-size-pc: 16px;
  }

  body.page-id-1270 .oukaen-timeline__item.right .oukaen-timeline__line-h{
    width: var(--ouka-1270-history-line-right-pc);
  }

  body.page-id-1270 .oukaen-timeline__item.left .oukaen-timeline__line-h{
    width: var(--ouka-1270-history-line-left-pc);
  }

  body.page-id-1270 .oukaen-timeline__item.right .oukaen-timeline__body{
    margin-left: calc(
      var(--ouka-1270-history-line-right-pc) +
      var(--ouka-1270-history-right-gap-pc)
    );
  }

  body.page-id-1270 .oukaen-timeline__item.left .oukaen-timeline__body{
    transform: translateX(var(--ouka-1270-history-left-shift-x-pc));
  }

  body.page-id-1270 .oukaen-timeline__date{
    font-size: var(--ouka-1270-history-year-size-pc);
  }

  body.page-id-1270 .oukaen-timeline__heading{
    font-size: var(--ouka-1270-history-title-size-pc);
  }

  body.page-id-1270 .oukaen-timeline__text{
    font-size: var(--ouka-1270-history-text-size-pc);
  }
}

/* =========================================
   id1270 only
   仕事の流れ 01-03
========================================= */
body.page-id-1270{
  --ouka-1270-workflow-max-width: 1280px;
  --ouka-1270-workflow-side-pad-pc: 24px;
  --ouka-1270-workflow-side-pad-sp: 20px;
  --ouka-1270-workflow-top-pad: 8px;
  --ouka-1270-workflow-bottom-pad-pc: 66px;
  --ouka-1270-workflow-bottom-pad-sp: 40px;

  --ouka-1270-workflow-section-title-size: 20px;
  --ouka-1270-workflow-section-title-color: #000000;
  --ouka-1270-workflow-section-title-gap-pc: 42px;
  --ouka-1270-workflow-section-title-gap-sp: 28px;

  --ouka-1270-workflow-step-gap-pc: 64px;
  --ouka-1270-workflow-step-gap-sp: 44px;
  --ouka-1270-workflow-column-gap-pc: clamp(32px, 6vw, 96px);

  --ouka-1270-workflow-number-size: 60px;
  --ouka-1270-workflow-number-color: #9C8B65;
  --ouka-1270-workflow-title-size: 20px;
  --ouka-1270-workflow-title-color: #000000;
  --ouka-1270-workflow-text-size: 16px;
  --ouka-1270-workflow-text-color: #000000;

  --ouka-1270-workflow-title-gap: 14px;
  --ouka-1270-workflow-body-top-gap: 14px;
  --ouka-1270-workflow-image-radius: 0px;
  --ouka-1270-workflow-image-aspect-pc: 16 / 9;
  --ouka-1270-workflow-image-aspect-sp: 16 / 9;
  --ouka-1270-workflow-text-max-pc: 420px;

  --ouka-1270-workflow-carousel-btn-size: 34px;
  --ouka-1270-workflow-carousel-btn-bg: #9C8B65;
  --ouka-1270-workflow-carousel-btn-icon: #f8f5f0;
  --ouka-1270-workflow-carousel-btn-gap-pc: 10px;
  --ouka-1270-workflow-carousel-btn-gap-sp: 4px;
  --ouka-1270-workflow-carousel-btn-triangle-width: 10px;
  --ouka-1270-workflow-carousel-btn-triangle-height: 12px;
  --ouka-1270-workflow-carousel-slide-speed: 380ms;
}

body.page-id-1270 .ouka-workflow{
  max-width: var(--ouka-1270-workflow-max-width);
  margin: 0 auto;
  padding:
    var(--ouka-1270-workflow-top-pad)
    var(--ouka-1270-workflow-side-pad-pc)
    var(--ouka-1270-workflow-bottom-pad-pc);
  color: #000000;
}

body.page-id-1270 .ouka-workflow,
body.page-id-1270 .ouka-workflow *{
  box-sizing: border-box;
}

body.page-id-1270 .ouka-workflow__section-title{
  margin: 0 0 var(--ouka-1270-workflow-section-title-gap-pc);
  text-align: center;
  font-size: var(--ouka-1270-workflow-section-title-size);
  line-height: 1.6;
  letter-spacing: 0.12em;
  color: var(--ouka-1270-workflow-section-title-color);
  font-family: "Shippori Mincho B1", serif;
  font-weight: 600;
}

body.page-id-1270 .ouka-workflow__step{
  margin: 0 0 var(--ouka-1270-workflow-step-gap-pc);
}

body.page-id-1270 .ouka-workflow__step:last-child{
  margin-bottom: 0;
}

body.page-id-1270 .ouka-workflow__content{
  min-width: 0;
}

body.page-id-1270 .ouka-workflow__head{
  display: flex;
  align-items: baseline;
  gap: var(--ouka-1270-workflow-title-gap);
  margin: 0;
}

body.page-id-1270 .ouka-workflow__num{
  flex: 0 0 auto;
  margin: 0;
  font-size: var(--ouka-1270-workflow-number-size);
  line-height: 1;
  letter-spacing: 0.04em;
  color: var(--ouka-1270-workflow-number-color);
  font-family: "Shippori Mincho B1", serif;
  font-weight: 500;
}

body.page-id-1270 .ouka-workflow__title{
  margin: 0 !important;
  font-size: var(--ouka-1270-workflow-title-size);
  line-height: 1.6;
  letter-spacing: 0.04em;
  color: var(--ouka-1270-workflow-title-color);
  font-family: "Shippori Mincho B1", serif;
  font-weight: 500;

  background: none !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
}

body.page-id-1270 .ouka-workflow__text{
  margin: var(--ouka-1270-workflow-body-top-gap) 0 0;
  font-size: var(--ouka-1270-workflow-text-size);
  line-height: 2;
  letter-spacing: 0.03em;
  color: var(--ouka-1270-workflow-text-color);
  font-family: "Shippori Mincho B1", serif;
  white-space: normal;
}

body.page-id-1270 .ouka-workflow__media{
  margin: 22px 0 0;
  min-width: 0;
}

body.page-id-1270 .ouka-workflow__carousel{
  position: relative;
  width: 100%;
}

body.page-id-1270 .ouka-workflow__viewport{
  width: 100%;
  overflow: hidden;
}

body.page-id-1270 .ouka-workflow__track{
  display: flex;
  transition: transform var(--ouka-1270-workflow-carousel-slide-speed) ease;
  will-change: transform;
}

body.page-id-1270 .ouka-workflow__slide{
  flex: 0 0 100%;
  margin: 0;
}

body.page-id-1270 .ouka-workflow__slide img{
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: var(--ouka-1270-workflow-image-aspect-sp);
  object-fit: cover;
  object-position: center center;
  border-radius: var(--ouka-1270-workflow-image-radius);
}

body.page-id-1270 .ouka-workflow__nav{
  position: absolute;
  top: 50%;
  z-index: 4;
  width: var(--ouka-1270-workflow-carousel-btn-size);
  height: var(--ouka-1270-workflow-carousel-btn-size);
  border: 0;
  border-radius: 50%;
  background: var(--ouka-1270-workflow-carousel-btn-bg);
  cursor: pointer;
  padding: 0;
  margin: 0;
  appearance: none;
  -webkit-appearance: none;
  touch-action: manipulation;
  transition: opacity .2s ease, transform .2s ease;
}

body.page-id-1270 .ouka-workflow__nav:hover{
  opacity: 0.85;
}

body.page-id-1270 .ouka-workflow__nav:disabled{
  opacity: 0.35;
  cursor: default;
}

body.page-id-1270 .ouka-workflow__nav::before{
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  transform: translate(-50%, -50%);
}

body.page-id-1270 .ouka-workflow__nav--prev::before{
  border-top: calc(var(--ouka-1270-workflow-carousel-btn-triangle-height) / 2) solid transparent;
  border-bottom: calc(var(--ouka-1270-workflow-carousel-btn-triangle-height) / 2) solid transparent;
  border-right: var(--ouka-1270-workflow-carousel-btn-triangle-width) solid var(--ouka-1270-workflow-carousel-btn-icon);
  margin-left: -1px;
}

body.page-id-1270 .ouka-workflow__nav--next::before{
  border-top: calc(var(--ouka-1270-workflow-carousel-btn-triangle-height) / 2) solid transparent;
  border-bottom: calc(var(--ouka-1270-workflow-carousel-btn-triangle-height) / 2) solid transparent;
  border-left: var(--ouka-1270-workflow-carousel-btn-triangle-width) solid var(--ouka-1270-workflow-carousel-btn-icon);
  margin-left: 1px;
}

body.page-id-1270 .ouka-workflow__carousel.is-single .ouka-workflow__nav{
  display: none;
}

/* PC only layout */
@media (min-width: 768px){
  body.page-id-1270 .ouka-workflow__step{
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(360px, 520px);
    gap: var(--ouka-1270-workflow-column-gap-pc);
    align-items: start;
  }

  body.page-id-1270 .ouka-workflow__content{
    max-width: var(--ouka-1270-workflow-text-max-pc);
  }

  body.page-id-1270 .ouka-workflow__media{
    margin: 0;
    align-self: start;
  }

  body.page-id-1270 .ouka-workflow__slide img{
    aspect-ratio: var(--ouka-1270-workflow-image-aspect-pc);
  }

  body.page-id-1270 .ouka-workflow__nav--prev{
    left: 0;
    transform: translate(
      calc(-100% - var(--ouka-1270-workflow-carousel-btn-gap-pc)),
      -50%
    );
  }

  body.page-id-1270 .ouka-workflow__nav--next{
    right: 0;
    transform: translate(
      calc(100% + var(--ouka-1270-workflow-carousel-btn-gap-pc)),
      -50%
    );
  }
}

/* Mobile keeps stacked layout */
@media (max-width: 767px){
  body.page-id-1270 .ouka-workflow{
    padding:
      var(--ouka-1270-workflow-top-pad)
      var(--ouka-1270-workflow-side-pad-sp)
      var(--ouka-1270-workflow-bottom-pad-sp);
  }

  body.page-id-1270 .ouka-workflow__section-title{
    margin-bottom: var(--ouka-1270-workflow-section-title-gap-sp);
  }

  body.page-id-1270 .ouka-workflow__step{
    margin-bottom: var(--ouka-1270-workflow-step-gap-sp);
  }

  body.page-id-1270 .ouka-workflow__head{
    gap: 12px;
  }

  body.page-id-1270 .ouka-workflow__num{
    font-size: 60px;
  }

  body.page-id-1270 .ouka-workflow__title{
    font-size: 20px;
  }

  body.page-id-1270 .ouka-workflow__text{
    font-size: 16px;
  }

  body.page-id-1270 .ouka-workflow__nav--prev{
    left: 0;
    transform: translate(
      calc(-100% - var(--ouka-1270-workflow-carousel-btn-gap-sp)),
      -50%
    );
  }

  body.page-id-1270 .ouka-workflow__nav--next{
    right: 0;
    transform: translate(
      calc(100% + var(--ouka-1270-workflow-carousel-btn-gap-sp)),
      -50%
    );
  }
}

/* =========================================
   id1270 only
   仕事の流れ 04 販売
========================================= */
body.page-id-1270{
  --ouka-1270-sales-gallery-max-width-pc: none;
  --ouka-1270-sales-gallery-top-gap-pc: 30px;
  --ouka-1270-sales-gallery-top-gap-sp: 22px;

  --ouka-1270-sales-gallery-col-gap-pc: 24px;
  --ouka-1270-sales-gallery-row-gap-pc: 34px;
  --ouka-1270-sales-gallery-row-gap-sp: 26px;

  --ouka-1270-sales-image-aspect: 4 / 3;
  --ouka-1270-sales-caption-top-gap: 8px;
  --ouka-1270-sales-caption-size: 12px;
  --ouka-1270-sales-caption-line-height: 1.8;
  --ouka-1270-sales-caption-color: #000000;

  --ouka-1270-sales-carousel-btn-inset-pc: 8px;
  --ouka-1270-sales-carousel-btn-inset-sp: 8px;
}

/* Empty placeholders should not create blank visible text areas */
body.page-id-1270 .ouka-workflow__step--sales .ouka-workflow__text--sales:empty,
body.page-id-1270 .ouka-workflow__step--sales .ouka-workflow-sales__caption:empty{
  display: none;
}

body.page-id-1270 .ouka-workflow__step--sales .ouka-workflow-sales{
  margin-top: var(--ouka-1270-sales-gallery-top-gap-sp);
}

body.page-id-1270 .ouka-workflow__step--sales .ouka-workflow-sales__grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--ouka-1270-sales-gallery-row-gap-sp);
}

body.page-id-1270 .ouka-workflow__step--sales .ouka-workflow-sales__card,
body.page-id-1270 .ouka-workflow__step--sales .ouka-workflow__slide{
  margin: 0;
}

body.page-id-1270 .ouka-workflow__step--sales .ouka-workflow-sales__image,
body.page-id-1270 .ouka-workflow__step--sales .ouka-workflow__slide img{
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: var(--ouka-1270-sales-image-aspect);
  object-fit: cover;
  object-position: center center;
  border-radius: var(--ouka-1270-workflow-image-radius);
}

body.page-id-1270 .ouka-workflow__step--sales .ouka-workflow-sales__caption{
  margin: var(--ouka-1270-sales-caption-top-gap) 0 0;
  padding: 0;
  font-size: var(--ouka-1270-sales-caption-size);
  line-height: var(--ouka-1270-sales-caption-line-height);
  letter-spacing: 0.03em;
  color: var(--ouka-1270-sales-caption-color);
  font-family: "Shippori Mincho B1", serif;
}

/* 04 only: put carousel buttons inside the image area */
body.page-id-1270 .ouka-workflow__step--sales .ouka-workflow__nav--prev{
  left: var(--ouka-1270-sales-carousel-btn-inset-sp);
  transform: translateY(-50%);
}

body.page-id-1270 .ouka-workflow__step--sales .ouka-workflow__nav--next{
  right: var(--ouka-1270-sales-carousel-btn-inset-sp);
  transform: translateY(-50%);
}

/* PC */
@media (min-width: 768px){
  body.page-id-1270 .ouka-workflow__step--sales{
    display: block;
  }

  body.page-id-1270 .ouka-workflow__step--sales .ouka-workflow__content--sales{
    max-width: var(--ouka-1270-workflow-text-max-pc);
  }

  body.page-id-1270 .ouka-workflow__step--sales .ouka-workflow-sales{
    max-width: var(--ouka-1270-sales-gallery-max-width-pc);
    margin-top: var(--ouka-1270-sales-gallery-top-gap-pc);
    margin-left: 0;
    margin-right: auto;
  }

  body.page-id-1270 .ouka-workflow__step--sales .ouka-workflow-sales__grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--ouka-1270-sales-gallery-col-gap-pc);
    row-gap: var(--ouka-1270-sales-gallery-row-gap-pc);
  }

  body.page-id-1270 .ouka-workflow__step--sales .ouka-workflow-sales__card--final{
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--ouka-1270-sales-gallery-col-gap-pc);
    align-items: center;
  }

  body.page-id-1270 .ouka-workflow__step--sales .ouka-workflow-sales__card--final .ouka-workflow-sales__caption{
    margin-top: 0;
  }

  body.page-id-1270 .ouka-workflow__step--sales .ouka-workflow__nav--prev{
    left: var(--ouka-1270-sales-carousel-btn-inset-pc);
    transform: translateY(-50%);
  }

  body.page-id-1270 .ouka-workflow__step--sales .ouka-workflow__nav--next{
    right: var(--ouka-1270-sales-carousel-btn-inset-pc);
    transform: translateY(-50%);
  }
}

/* SP */
@media (max-width: 767px){
  body.page-id-1270 .ouka-workflow__step--sales .ouka-workflow-sales__card--final{
    display: block;
  }
}

/* =========================================
   id1270 仕事の流れ
   SPのみ 01-03のボタンを内側に移動
========================================= */
@media (max-width: 767px){
  body.page-id-1270{
    --ouka-1270-workflow-mobile-content-width: 100%;
    --ouka-1270-workflow-mobile-carousel-btn-inset: var(--ouka-1270-sales-carousel-btn-inset-sp, 8px);
  }

  /* Unify text width and image/gallery width on mobile */
  body.page-id-1270 .ouka-workflow__content,
  body.page-id-1270 .ouka-workflow__media,
  body.page-id-1270 .ouka-workflow__step--sales .ouka-workflow-sales{
    width: var(--ouka-1270-workflow-mobile-content-width);
    max-width: var(--ouka-1270-workflow-mobile-content-width);
    margin-left: auto;
    margin-right: auto;
  }

  /* Preserve the existing vertical gap above images in 01-03 */
  body.page-id-1270 .ouka-workflow__media{
    margin-top: 22px;
  }

  /* Preserve the existing vertical gap above the 04 gallery */
  body.page-id-1270 .ouka-workflow__step--sales .ouka-workflow-sales{
    margin-top: var(--ouka-1270-sales-gallery-top-gap-sp);
  }

  /* 01-03 only: move carousel buttons inside the image area */
  body.page-id-1270 .ouka-workflow__step:not(.ouka-workflow__step--sales) .ouka-workflow__nav--prev{
    left: var(--ouka-1270-workflow-mobile-carousel-btn-inset);
    transform: translateY(-50%);
  }

  body.page-id-1270 .ouka-workflow__step:not(.ouka-workflow__step--sales) .ouka-workflow__nav--next{
    right: var(--ouka-1270-workflow-mobile-carousel-btn-inset);
    transform: translateY(-50%);
  }
}

/* =========================================
   主な取り扱い商品 id1214
========================================= */
body.page-id-1214{
  --ouka-items-gallery-max-width-pc: 980px;

  --ouka-items-gallery-column-gap-pc: 48px;
  --ouka-items-gallery-row-gap-pc: 30px;

  --ouka-items-gallery-column-gap-sp: 28px;
  --ouka-items-gallery-row-gap-sp: 0px;

  --ouka-items-image-caption-gap: 10px;

  --ouka-items-caption-min-height-pc: 82px;
  --ouka-items-caption-min-height-sp: 60px;

  --ouka-items-caption-jp-size-pc: 20px;
  --ouka-items-caption-jp-size-sp: 14px;

  --ouka-items-caption-en-size-pc: 14px;
  --ouka-items-caption-en-size-sp: 12px;
}

/* Gallery layout itself */
body.page-id-1214 #post-1214 .entry-content > .wp-block-gallery.has-nested-images{
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  align-items: start !important;
  justify-items: stretch !important;
  gap:
    var(--ouka-items-gallery-row-gap-sp)
    var(--ouka-items-gallery-column-gap-sp) !important;
  width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Each gallery card */
body.page-id-1214 #post-1214 .entry-content > .wp-block-gallery.has-nested-images > .wp-block-image{
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Fixed square image area */
body.page-id-1214 #post-1214 .entry-content > .wp-block-gallery.has-nested-images > .wp-block-image > a{
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  aspect-ratio: 1 / 1 !important;
  overflow: hidden !important;
}

/* Image itself */
body.page-id-1214 #post-1214 .entry-content > .wp-block-gallery.has-nested-images > .wp-block-image img{
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  aspect-ratio: 1 / 1 !important;
  object-fit: cover !important;
  object-position: center center !important;
  max-width: none !important;
  margin: 0 !important;
}

/* Caption area below image */
body.page-id-1214 #post-1214 .entry-content > .wp-block-gallery.has-nested-images > .wp-block-image > figcaption.wp-element-caption{
  position: static !important;
  display: flex !important;
  align-items: flex-start !important;
  justify-content: center !important;
  min-height: var(--ouka-items-caption-min-height-sp) !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  margin: var(--ouka-items-image-caption-gap) 0 0 !important;
  padding: 0 !important;
  background: transparent !important;
  color: inherit !important;
  text-align: center !important;
  overflow: visible !important;
}

/* Caption reset */
body.page-id-1214 .ouka-category-label{
  display: block;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1.4;
  text-align: center !important;
}

body.page-id-1214 .ouka-category-label__link{
  display: block;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  color: inherit;
  text-decoration: none;
}

body.page-id-1214 .ouka-category-label__link:hover{
  opacity: 0.75;
  text-decoration: none;
}

body.page-id-1214 .ouka-category-label__jp{
  display: block;
  max-width: 100%;
  font-family: "Shippori Mincho B1", serif;
  font-size: var(--ouka-items-caption-jp-size-sp);
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: 0.08em;
  white-space: normal;
  word-break: normal;
  overflow-wrap: anywhere;
}

body.page-id-1214 .ouka-category-label__en{
  display: block;
  max-width: 100%;
  font-family: "Shippori Mincho B1", serif;
  font-size: var(--ouka-items-caption-en-size-sp);
  font-weight: 400;
  line-height: 1.35;
  letter-spacing: -0.02em;
  margin-top: 4px;
  white-space: normal;
  word-break: normal;
  overflow-wrap: normal;
  hyphens: none;
}

/* PC: 3 columns */
@media (min-width: 768px){
  body.page-id-1214 #post-1214 .entry-content > .wp-block-gallery.has-nested-images{
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    max-width: var(--ouka-items-gallery-max-width-pc) !important;
    gap:
      var(--ouka-items-gallery-row-gap-pc)
      var(--ouka-items-gallery-column-gap-pc) !important;
  }

  body.page-id-1214 #post-1214 .entry-content > .wp-block-gallery.has-nested-images > .wp-block-image > figcaption.wp-element-caption{
    min-height: var(--ouka-items-caption-min-height-pc) !important;
  }

  body.page-id-1214 .ouka-category-label__jp{
    font-size: var(--ouka-items-caption-jp-size-pc);
  }

  body.page-id-1214 .ouka-category-label__en{
    font-size: var(--ouka-items-caption-en-size-pc);
  }
}

/* SP: 2 columns */
@media (max-width: 767px){
  body.page-id-1214 #post-1214 .entry-content > .wp-block-gallery.has-nested-images{
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    width: 100% !important;
  }
}

/* =========================================
Cocoonがスマホのヘッダー下に自動で設ける空白をキャンセルする
========================================= */
@media (max-width: 1023px){
  body.ouka-custom-header-active:where(.mblt-header-mobile-buttons, .mblt-header-and-footer-mobile-buttons){
    margin-top: 0 !important;
  }
}

/* =========================================
ハンバーガーメニューのセンター揃え
========================================= */
@media (max-width: 767px){
  body.page-id-1427 #navi-menu-open.menu-open.menu-button-in,
  body:not(.page-id-1427) #navi-menu-open.menu-open.menu-button-in{
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    width: 100% !important;
    height: 100% !important;
    box-sizing: border-box !important;
  }

  body.page-id-1427 #navi-menu-open .fa.fa-bars,
  body:not(.page-id-1427) #navi-menu-open .fa.fa-bars{
    flex: 0 0 auto !important;
    align-self: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
    background:
      linear-gradient(var(--ouka-text), var(--ouka-text)) center top var(--ouka-menu-icon-line-top-y-sp) / 100% var(--ouka-menu-icon-line-thickness-sp) no-repeat,
      linear-gradient(var(--ouka-text), var(--ouka-text)) center top var(--ouka-menu-icon-line-middle-y-sp) / 100% var(--ouka-menu-icon-line-thickness-sp) no-repeat,
      linear-gradient(var(--ouka-text), var(--ouka-text)) center top var(--ouka-menu-icon-line-bottom-y-sp) / 100% var(--ouka-menu-icon-line-thickness-sp) no-repeat !important;
  }

  body.page-id-1427 #navi-menu-open .navi-menu-caption,
  body:not(.page-id-1427) #navi-menu-open .navi-menu-caption{
    flex: 0 0 auto !important;
    align-self: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center !important;
  }
}

/* =========================================
instagramボタンの下にプラグインで自動でつくpadding-bottomを削除
========================================= */
body.page-id-1270 #sb_instagram #sbi_load{
  padding-bottom: 0 !important;
}

/* =========================================
下層ページのハンバーガーメニューの位置を修正する
========================================= */
@media (max-width: 767px){
  body.ouka-custom-header-active:not(.page-id-1427) .mobile-header-menu-buttons{
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    left: auto !important;
    width: 0 !important;
    height: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    z-index: 10090 !important;
    background: transparent !important;
    box-shadow: none !important;
    border: 0 !important;
  }

  body.ouka-custom-header-active:not(.page-id-1427) .mobile-header-menu-buttons .navi-menu-button.menu-button{
    position: fixed !important;
    top: calc(var(--ouka-safe-top) + ((var(--ouka-header-bar-height-sp) - var(--ouka-header-menu-size-sp)) / 2)) !important;
    right: var(--ouka-header-menu-right-sp) !important;
    left: auto !important;
    bottom: auto !important;

    width: var(--ouka-menu-box-size-sp) !important;
    height: var(--ouka-menu-box-size-sp) !important;
    min-width: 0 !important;
    min-height: 0 !important;

    margin: 0 !important;
    padding: 0 !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    background: transparent !important;
    color: var(--ouka-text) !important;
    border: 0 !important;
    box-shadow: none !important;
    z-index: 10091 !important;
  }
}

/* =========================================
   id1270の仕事の流れエリア（スマホ）
　 コンテンツ幅調整
========================================= */
@media (max-width: 767px){
  body.page-id-1270 .entry-content > .ouka-workflow{
    width: 100vw !important;
    max-width: none !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    padding-left: var(--ouka-1270-workflow-side-pad-sp) !important;
    padding-right: var(--ouka-1270-workflow-side-pad-sp) !important;
    box-sizing: border-box !important;
  }
}

/* =========================================
   id497 Google Map(PC)中央揃え
========================================= */
@media (min-width: 768px){
  body.page-id-497 #post-497 .entry-content > p:has(> iframe[src*="google.com/maps/embed"]){
    width: 100vw !important;
    max-width: none !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    text-align: center !important;
  }

  body.page-id-497 #post-497 .entry-content > p:has(> iframe[src*="google.com/maps/embed"]) > iframe{
    display: block !important;
    width: 600px !important;
    max-width: 100% !important;
    height: 450px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

/* =========================================
id247　PCのみ記入欄の横幅を1000pxに固定
========================================= */
@media (min-width: 1024px){
  body.page-id-247{
    --ouka-contact-form-field-width-pc: 1000px;
  }

  /* Field rows: name / email / message / file upload */
  body.page-id-247 #post-247 .wpcf7-form > p:has(input[name="your-name"]),
  body.page-id-247 #post-247 .wpcf7-form > p:has(input[name="your-email"]),
  body.page-id-247 #post-247 .wpcf7-form > p:has(textarea[name="your-message"]),
  body.page-id-247 #post-247 .wpcf7-form > p:has(> label.cf7-file){
    width: var(--ouka-contact-form-field-width-pc) !important;
    max-width: none !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
  }

  /* Contact Form 7 wrappers */
  body.page-id-247 #post-247 .wpcf7-form-control-wrap[data-name="your-name"],
  body.page-id-247 #post-247 .wpcf7-form-control-wrap[data-name="your-email"],
  body.page-id-247 #post-247 .wpcf7-form-control-wrap[data-name="your-message"],
  body.page-id-247 #post-247 .wpcf7-form-control-wrap[data-name="mfile-171"]{
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    box-sizing: border-box !important;
  }

  /* Text inputs / textarea */
  body.page-id-247 #post-247 input[name="your-name"],
  body.page-id-247 #post-247 input[name="your-email"],
  body.page-id-247 #post-247 textarea[name="your-message"]{
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    box-sizing: border-box !important;
  }

  /* File upload text wrapper */
  body.page-id-247 #post-247 .wpcf7-form > p:has(> label.cf7-file) > label.cf7-file{
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    box-sizing: border-box !important;
  }

  /* File upload plugin area */
  body.page-id-247 #post-247 .codedropz-upload-wrapper,
  body.page-id-247 #post-247 .codedropz-upload-handler,
  body.page-id-247 #post-247 .codedropz-upload-container,
  body.page-id-247 #post-247 .codedropz-upload-inner{
    width: 100% !important;
    max-width: none !important;
    box-sizing: border-box !important;
  }
}

/* =========================================
主な取り扱い商品　下層ページ
========================================= */
/*--------------
①フッターエリア
--------------*/

body:is(
  .page-id-792,
  .page-id-799,
  .page-id-801,
  .page-id-803,
  .page-id-805,
  .page-id-811
){
  --ouka-related-products-bg: #e9e4d9;
  --ouka-related-products-max-width-pc: 980px;

  --ouka-related-products-pad-top-pc: 44px;
  --ouka-related-products-pad-bottom-pc: 72px;
  --ouka-related-products-side-pc: 24px;

  --ouka-related-products-pad-top-sp: 30px;
  --ouka-related-products-pad-bottom-sp: 40px;
  --ouka-related-products-side-sp: 20px;

  --ouka-related-products-title-size: 16px;
  --ouka-related-products-title-gap-pc: 34px;
  --ouka-related-products-title-gap-sp: 28px;

  --ouka-related-products-column-gap-pc: 48px;
  --ouka-related-products-row-gap-pc: 30px;

  --ouka-related-products-column-gap-sp: 28px;
  --ouka-related-products-row-gap-sp: 28px;

  --ouka-related-products-image-caption-gap: 10px;

  --ouka-related-products-jp-size-pc: 20px;
  --ouka-related-products-jp-size-sp: 14px;

  --ouka-related-products-en-size-pc: 14px;
  --ouka-related-products-en-size-sp: 12px;
}

/* フッター上の横線を消す */
body:is(
  .page-id-792,
  .page-id-799,
  .page-id-801,
  .page-id-803,
  .page-id-805,
  .page-id-811
) #footer-in::before{
  display: none !important;
  content: none !important;
  margin: 0 !important;
}

/* 背景 */
body:is(
  .page-id-792,
  .page-id-799,
  .page-id-801,
  .page-id-803,
  .page-id-805,
  .page-id-811
) .entry-content > .ouka-related-products{
  width: 100vw !important;
  max-width: none !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  margin-bottom: 0 !important;
  background: var(--ouka-related-products-bg) !important;
  box-sizing: border-box !important;
}

/* Inner content width */
body:is(
  .page-id-792,
  .page-id-799,
  .page-id-801,
  .page-id-803,
  .page-id-805,
  .page-id-811
) .ouka-related-products__inner{
  max-width: var(--ouka-related-products-max-width-pc);
  margin-left: auto;
  margin-right: auto;
  padding:
    var(--ouka-related-products-pad-top-pc)
    var(--ouka-related-products-side-pc)
    var(--ouka-related-products-pad-bottom-pc);
  box-sizing: border-box;
}

/* Title */
body:is(
  .page-id-792,
  .page-id-799,
  .page-id-801,
  .page-id-803,
  .page-id-805,
  .page-id-811
) .ouka-related-products__title{
  margin: 0 0 var(--ouka-related-products-title-gap-pc) !important;
  padding: 0 !important;
  text-align: center !important;
  font-size: var(--ouka-related-products-title-size);
  line-height: 1.6;
  letter-spacing: 0.12em;
  color: #000000;
  font-family: "Shippori Mincho B1", serif;
  font-weight: 500;
}

/* Grid */
body:is(
  .page-id-792,
  .page-id-799,
  .page-id-801,
  .page-id-803,
  .page-id-805,
  .page-id-811
) .ouka-related-products__grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: var(--ouka-related-products-column-gap-pc);
  row-gap: var(--ouka-related-products-row-gap-pc);
}

/* Card */
body:is(
  .page-id-792,
  .page-id-799,
  .page-id-801,
  .page-id-803,
  .page-id-805,
  .page-id-811
) .ouka-related-products__card{
  display: block;
  color: #000000;
  text-decoration: none !important;
}

body:is(
  .page-id-792,
  .page-id-799,
  .page-id-801,
  .page-id-803,
  .page-id-805,
  .page-id-811
) .ouka-related-products__card:hover{
  opacity: 0.75;
  text-decoration: none !important;
}

/* Image */
body:is(
  .page-id-792,
  .page-id-799,
  .page-id-801,
  .page-id-803,
  .page-id-805,
  .page-id-811
) .ouka-related-products__card img{
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  object-position: center center;
  margin: 0;
}

/* Label */
body:is(
  .page-id-792,
  .page-id-799,
  .page-id-801,
  .page-id-803,
  .page-id-805,
  .page-id-811
) .ouka-related-products__label{
  display: block;
  margin-top: var(--ouka-related-products-image-caption-gap);
  text-align: center;
}

body:is(
  .page-id-792,
  .page-id-799,
  .page-id-801,
  .page-id-803,
  .page-id-805,
  .page-id-811
) .ouka-related-products__jp{
  display: block;
  font-family: "Shippori Mincho B1", serif;
  font-size: var(--ouka-related-products-jp-size-pc);
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: 0.08em;
}

body:is(
  .page-id-792,
  .page-id-799,
  .page-id-801,
  .page-id-803,
  .page-id-805,
  .page-id-811
) .ouka-related-products__en{
  display: block;
  margin-top: 4px;
  font-family: "Shippori Mincho B1", serif;
  font-size: var(--ouka-related-products-en-size-pc);
  font-weight: 400;
  line-height: 1.35;
  letter-spacing: -0.02em;
}

/* SP: 2 columns */
@media (max-width: 767px){
  body:is(
    .page-id-792,
    .page-id-799,
    .page-id-801,
    .page-id-803,
    .page-id-805,
    .page-id-811
  ) .ouka-related-products__inner{
    padding:
      var(--ouka-related-products-pad-top-sp)
      var(--ouka-related-products-side-sp)
      var(--ouka-related-products-pad-bottom-sp);
  }

  body:is(
    .page-id-792,
    .page-id-799,
    .page-id-801,
    .page-id-803,
    .page-id-805,
    .page-id-811
  ) .ouka-related-products__title{
    margin-bottom: var(--ouka-related-products-title-gap-sp) !important;
  }

  body:is(
    .page-id-792,
    .page-id-799,
    .page-id-801,
    .page-id-803,
    .page-id-805,
    .page-id-811
  ) .ouka-related-products__grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--ouka-related-products-column-gap-sp);
    row-gap: var(--ouka-related-products-row-gap-sp);
  }

  body:is(
    .page-id-792,
    .page-id-799,
    .page-id-801,
    .page-id-803,
    .page-id-805,
    .page-id-811
  ) .ouka-related-products__jp{
    font-size: var(--ouka-related-products-jp-size-sp);
  }

  body:is(
    .page-id-792,
    .page-id-799,
    .page-id-801,
    .page-id-803,
    .page-id-805,
    .page-id-811
  ) .ouka-related-products__en{
    font-size: var(--ouka-related-products-en-size-sp);
  }
}

/*--------------
②ヒーローエリア
--------------*/
body:is(
  .page-id-792,
  .page-id-799,
  .page-id-801,
  .page-id-803,
  .page-id-805,
  .page-id-811
){
  /* PC normal content width */
  --ouka-products-child-content-width-pc: 1000px;

  /* PC + SP hero typography */
  --ouka-products-child-hero-title-size: 28px;
  --ouka-products-child-hero-title-weight: 600;
  --ouka-products-child-hero-text-size: 16px;
  --ouka-products-child-hero-text-weight: 400;

  /* SP hero image / beige rectangle */
  --ouka-products-child-hero-image-size-sp: 337px;
  --ouka-products-child-hero-plate-size-sp: 320px;
  --ouka-products-child-hero-plate-left-sp: 25px;
  --ouka-products-child-hero-plate-top-sp: 40px;
  --ouka-products-child-hero-gap-below-sp: 40px;
}

/* PC + SP hero title */
body:is(
  .page-id-792,
  .page-id-799,
  .page-id-801,
  .page-id-803,
  .page-id-805,
  .page-id-811
) .entry-content > .ouka-subpage-hero > .ouka-subpage-hero__title{
  font-size: var(--ouka-products-child-hero-title-size) !important;
  font-weight: var(--ouka-products-child-hero-title-weight) !important;
}

/* PC + SP hero text */
body:is(
  .page-id-792,
  .page-id-799,
  .page-id-801,
  .page-id-803,
  .page-id-805,
  .page-id-811
) .entry-content > .ouka-subpage-hero > .ouka-subpage-hero__text{
  font-size: var(--ouka-products-child-hero-text-size) !important;
  font-weight: var(--ouka-products-child-hero-text-weight) !important;
}

/* -----------------------------------------
   PC only
   Fix hero area and normal content width to 1000px
   Related-products section remains full-width
----------------------------------------- */
@media (min-width: 1024px){
  body:is(
    .page-id-792,
    .page-id-799,
    .page-id-801,
    .page-id-803,
    .page-id-805,
    .page-id-811
  ){
    --ouka-products-child-hero-text-col-pc: 540px;
    --ouka-products-child-hero-column-gap-pc: 10px;

    /* Y position controls */
    --ouka-products-child-hero-top-pc: 20px;
    --ouka-products-child-hero-copy-shift-y-pc: 0px;
    --ouka-products-child-hero-media-shift-y-pc: -40px;
    --ouka-products-child-hero-text-shift-y-pc: -40px;

    /* PC hero image / beige rectangle */
    --ouka-products-child-hero-image-size-pc: 450px;
    --ouka-products-child-hero-plate-size-pc: 450px;
    --ouka-products-child-hero-plate-left-pc: -40px;
    --ouka-products-child-hero-plate-top-pc: 40px;
  }

  /* Hero wrapper: fixed to the same 1000px content width */
  body:is(
    .page-id-792,
    .page-id-799,
    .page-id-801,
    .page-id-803,
    .page-id-805,
    .page-id-811
  ) .entry-content > .ouka-subpage-hero{
    width: var(--ouka-products-child-content-width-pc) !important;
    max-width: calc(100vw - 48px) !important;
    margin-left: auto !important;
    margin-right: auto !important;

    grid-template-columns:
      var(--ouka-products-child-hero-text-col-pc)
      minmax(0, 1fr) !important;
    column-gap: var(--ouka-products-child-hero-column-gap-pc) !important;

    box-sizing: border-box !important;
  }

  /* Hero title: reset viewport-based left positioning */
  body:is(
    .page-id-792,
    .page-id-799,
    .page-id-801,
    .page-id-803,
    .page-id-805,
    .page-id-811
  ) .entry-content > .ouka-subpage-hero > .ouka-subpage-hero__title{
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* Hero text: reset viewport-based left positioning */
  body:is(
    .page-id-792,
    .page-id-799,
    .page-id-801,
    .page-id-803,
    .page-id-805,
    .page-id-811
  ) .entry-content > .ouka-subpage-hero > .ouka-subpage-hero__text{
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* Hero image area: keep it inside the 1000px hero width */
  body:is(
    .page-id-792,
    .page-id-799,
    .page-id-801,
    .page-id-803,
    .page-id-805,
    .page-id-811
  ) .entry-content > .ouka-subpage-hero > .ouka-subpage-hero__media{
    width: 100% !important;
    max-width: none !important;
    justify-self: stretch !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* Normal content below hero: fixed to 1000px */
  body:is(
    .page-id-792,
    .page-id-799,
    .page-id-801,
    .page-id-803,
    .page-id-805,
    .page-id-811
  ) .entry-content > :not(.ouka-subpage-hero):not(.ouka-related-products):not(script):not(style){
    width: var(--ouka-products-child-content-width-pc) !important;
    max-width: calc(100vw - 48px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
  }

  /* Keep the related product image-link area full-width */
  body:is(
    .page-id-792,
    .page-id-799,
    .page-id-801,
    .page-id-803,
    .page-id-805,
    .page-id-811
  ) .entry-content > .ouka-related-products{
    width: 100vw !important;
    max-width: none !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
  }

  body:is(
    .page-id-792,
    .page-id-799,
    .page-id-801,
    .page-id-803,
    .page-id-805,
    .page-id-811
  ) .entry-content > .ouka-subpage-hero > .ouka-subpage-hero__media{
    width: var(--ouka-products-child-hero-image-size-pc) !important;
    max-width: none !important;
    justify-self: end !important;
    overflow: visible !important;
  }

  body:is(
    .page-id-792,
    .page-id-799,
    .page-id-801,
    .page-id-803,
    .page-id-805,
    .page-id-811
  ) .entry-content > .ouka-subpage-hero > .ouka-subpage-hero__media::before{
    content: "" !important;
    position: absolute !important;
    z-index: 0 !important;
    left: var(--ouka-products-child-hero-plate-left-pc) !important;
    top: var(--ouka-products-child-hero-plate-top-pc) !important;
    right: auto !important;
    bottom: auto !important;
    width: var(--ouka-products-child-hero-plate-size-pc) !important;
    height: var(--ouka-products-child-hero-plate-size-pc) !important;
    background: var(--ouka-subhero-plate-color) !important;
    pointer-events: none !important;
  }

  body:is(
    .page-id-792,
    .page-id-799,
    .page-id-801,
    .page-id-803,
    .page-id-805,
    .page-id-811
  ) .entry-content > .ouka-subpage-hero > .ouka-subpage-hero__media img{
    display: block !important;
    width: var(--ouka-products-child-hero-image-size-pc) !important;
    height: var(--ouka-products-child-hero-image-size-pc) !important;
    max-width: none !important;
    aspect-ratio: 1 / 1 !important;
    object-fit: cover !important;
    object-position: center center !important;
  }
  /* PC hero Y position controls */
  body:is(
    .page-id-792,
    .page-id-799,
    .page-id-801,
    .page-id-803,
    .page-id-805,
    .page-id-811
  ){
    /* Moves the whole hero section relative to the header/page */
    --ouka-products-child-hero-shift-y-pc: -55px;

    /* Keeps the internal top padding stable */
    --ouka-products-child-hero-inner-top-pc: 44px;

    /* Fine adjustment: title + text only */
    --ouka-products-child-hero-copy-shift-y-pc: 0px;

    /* Fine adjustment: image + beige rectangle only */
    --ouka-products-child-hero-media-shift-y-pc: 0px;
  }

  /* Whole hero section Y position */
  body:is(
    .page-id-792,
    .page-id-799,
    .page-id-801,
    .page-id-803,
    .page-id-805,
    .page-id-811
  ) .entry-content > .ouka-subpage-hero{
    margin-top: var(--ouka-products-child-hero-shift-y-pc) !important;
    padding-top: var(--ouka-products-child-hero-inner-top-pc) !important;
  }

  /* Title: keep fixed */
  body:is(
    .page-id-792,
    .page-id-799,
    .page-id-801,
    .page-id-803,
    .page-id-805,
    .page-id-811
  ) .entry-content > .ouka-subpage-hero > .ouka-subpage-hero__title{
    transform: none !important;
  }

  /* Text only: Y position adjustment */
  body:is(
    .page-id-792,
    .page-id-799,
    .page-id-801,
    .page-id-803,
    .page-id-805,
    .page-id-811
  ) .entry-content > .ouka-subpage-hero > .ouka-subpage-hero__text{
    transform: translateY(var(--ouka-products-child-hero-text-shift-y-pc)) !important;
  }

  /* Image + beige rectangle fine Y adjustment */
  body:is(
    .page-id-792,
    .page-id-799,
    .page-id-801,
    .page-id-803,
    .page-id-805,
    .page-id-811
  ) .entry-content > .ouka-subpage-hero > .ouka-subpage-hero__media{
    transform: translateY(var(--ouka-products-child-hero-media-shift-y-pc)) !important;
  }
}

/* -----------------------------------------
   SP only
   Square hero image layout
----------------------------------------- */
@media (max-width: 767px){
  /* Hero media wrapper */
  body:is(
    .page-id-792,
    .page-id-799,
    .page-id-801,
    .page-id-803,
    .page-id-805,
    .page-id-811
  ) .entry-content > .ouka-subpage-hero > .ouka-subpage-hero__media{
    position: relative !important;
    width: 100vw !important;
    max-width: none !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    margin-bottom: var(--ouka-products-child-hero-gap-below-sp) !important;
    overflow: visible !important;
  }

  /* Beige rectangle */
  body:is(
    .page-id-792,
    .page-id-799,
    .page-id-801,
    .page-id-803,
    .page-id-805,
    .page-id-811
  ) .entry-content > .ouka-subpage-hero > .ouka-subpage-hero__media::before{
    content: "" !important;
    position: absolute !important;
    top: var(--ouka-products-child-hero-plate-top-sp) !important;
    left: var(--ouka-products-child-hero-plate-left-sp) !important;
    z-index: 0 !important;
    width: var(--ouka-products-child-hero-plate-size-sp) !important;
    height: var(--ouka-products-child-hero-plate-size-sp) !important;
    aspect-ratio: auto !important;
    background: var(--ouka-subhero-plate-color) !important;
    pointer-events: none !important;
  }

  /* Hero image */
  body:is(
    .page-id-792,
    .page-id-799,
    .page-id-801,
    .page-id-803,
    .page-id-805,
    .page-id-811
  ) .entry-content > .ouka-subpage-hero > .ouka-subpage-hero__media img{
    position: relative !important;
    z-index: 1 !important;
    display: block !important;
    width: var(--ouka-products-child-hero-image-size-sp) !important;
    height: var(--ouka-products-child-hero-image-size-sp) !important;
    max-width: none !important;
    margin-left: auto !important;
    margin-right: 0 !important;
    aspect-ratio: 1 / 1 !important;
    object-fit: cover !important;
    object-position: center center !important;
  }
}

/* =========================================
主な取り扱い商品-下層ページのコンテンツ
========================================= */
/*-------------
  建具id792①
  ----------*/
body.page-id-792{
  --ouka-id792-showcase-bg: #E9E4D9;

  /* whole area vertical position */
  --ouka-id792-showcase-offset-y-pc: 150px;
  --ouka-id792-showcase-offset-y-sp: 0px;

  /* spacing below this area */
  --ouka-id792-showcase-margin-bottom-pc: 90px;
  --ouka-id792-showcase-margin-bottom-sp: 60px;

  /* -------------------------
     PC
  ------------------------- */
  --ouka-id792-showcase-width-pc: 1000px;

  --ouka-id792-showcase-image-size-pc: 450px;
  --ouka-id792-showcase-col-gap-pc: 100px;
  --ouka-id792-showcase-row-gap-pc: 80px;

  /* shared beige rectangle behind whole 2x2 composition */
  --ouka-id792-showcase-plate-width-pc: 550px;
  --ouka-id792-showcase-plate-height-pc: 550px;
  --ouka-id792-showcase-plate-shift-x-pc: 0px;
  --ouka-id792-showcase-plate-shift-y-pc: 0px;

  /* -------------------------
     SP
  ------------------------- */
  --ouka-id792-showcase-width-sp: 100vw;
  --ouka-id792-showcase-set-gap-sp: 60px;

  --ouka-id792-showcase-image-size-sp: 300px;

  /* image-to-image relationship */
  --ouka-id792-showcase-image-gap-y-sp: 60px;
  --ouka-id792-showcase-second-image-left-sp: 70px;
  --ouka-id792-showcase-second-image-top-sp: calc(
    var(--ouka-id792-showcase-image-size-sp)
    + var(--ouka-id792-showcase-image-gap-y-sp)
  );

  /* one set box */
  --ouka-id792-showcase-set-width-sp: calc(
    var(--ouka-id792-showcase-image-size-sp)
    + var(--ouka-id792-showcase-second-image-left-sp)
  );
  --ouka-id792-showcase-set-height-sp: calc(
    var(--ouka-id792-showcase-second-image-top-sp)
    + var(--ouka-id792-showcase-image-size-sp)
  );

  /* shared beige square behind the 2-image set */
  --ouka-id792-showcase-plate-width-sp: 300px;
  --ouka-id792-showcase-plate-height-sp: 300px;
  --ouka-id792-showcase-plate-left-sp: 25px;

  /* 130px overlap with upper image + 130px overlap with lower image when gap is 40px */
  --ouka-id792-showcase-plate-overlap-y-sp: 130px;
  --ouka-id792-showcase-plate-top-sp: calc(
    var(--ouka-id792-showcase-image-size-sp)
    - var(--ouka-id792-showcase-plate-overlap-y-sp)
  );
}

body.page-id-792 .entry-content > .ouka-id792-showcase{
  box-sizing: border-box;
}

body.page-id-792 .ouka-id792-showcase figure{
  margin: 0;
}

body.page-id-792 .ouka-id792-showcase img{
  display: block;
}

/* -----------------------------------------
   PC only
----------------------------------------- */
@media (min-width: 1024px){
  body.page-id-792 .entry-content > .ouka-id792-showcase{
    width: var(--ouka-id792-showcase-width-pc) !important;
    max-width: calc(100vw - 48px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    margin-top: var(--ouka-id792-showcase-offset-y-pc) !important;
    margin-bottom: var(--ouka-id792-showcase-margin-bottom-pc) !important;
    position: relative;
  }

  body.page-id-792 .ouka-id792-showcase__sp{
    display: none !important;
  }

  body.page-id-792 .ouka-id792-showcase__pc{
    position: relative;
    display: grid;
    grid-template-columns: repeat(2, var(--ouka-id792-showcase-image-size-pc));
    column-gap: var(--ouka-id792-showcase-col-gap-pc);
    row-gap: var(--ouka-id792-showcase-row-gap-pc);
    justify-content: center;
    align-content: start;
  }

  body.page-id-792 .ouka-id792-showcase__pc-plate{
    position: absolute;
    left: 50%;
    top: 50%;
    width: var(--ouka-id792-showcase-plate-width-pc);
    height: var(--ouka-id792-showcase-plate-height-pc);
    background: var(--ouka-id792-showcase-bg);
    transform:
      translate(-50%, -50%)
      translate(
        var(--ouka-id792-showcase-plate-shift-x-pc),
        var(--ouka-id792-showcase-plate-shift-y-pc)
      );
    z-index: 0;
    pointer-events: none;
  }

  body.page-id-792 .ouka-id792-showcase__pc-item{
    position: relative;
    z-index: 1;
    width: var(--ouka-id792-showcase-image-size-pc);
    height: var(--ouka-id792-showcase-image-size-pc);
  }

  body.page-id-792 .ouka-id792-showcase__pc-item img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
  }
}

/* -----------------------------------------
   SP only
----------------------------------------- */
@media (max-width: 767px){
  body.page-id-792 .entry-content > .ouka-id792-showcase{
    width: var(--ouka-id792-showcase-width-sp) !important;
    max-width: 390px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    margin-top: var(--ouka-id792-showcase-offset-y-sp) !important;
    margin-bottom: var(--ouka-id792-showcase-margin-bottom-sp) !important;
    overflow: visible !important;
    box-sizing: border-box !important;
  }

  body.page-id-792 .ouka-id792-showcase__pc{
    display: none !important;
  }

  body.page-id-792 .ouka-id792-showcase__sp{
    display: block !important;
  }

  body.page-id-792 .ouka-id792-showcase__sp-set{
    position: relative !important;
    width: var(--ouka-id792-showcase-set-width-sp) !important;
    height: var(--ouka-id792-showcase-set-height-sp) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    margin-bottom: var(--ouka-id792-showcase-set-gap-sp) !important;
    overflow: visible !important;
  }

  body.page-id-792 .ouka-id792-showcase__sp-set:last-child{
    margin-bottom: 0 !important;
  }

  body.page-id-792 .ouka-id792-showcase__sp-plate{
    position: absolute !important;
    left: var(--ouka-id792-showcase-plate-left-sp) !important;
    top: var(--ouka-id792-showcase-plate-top-sp) !important;
    width: var(--ouka-id792-showcase-plate-width-sp) !important;
    height: var(--ouka-id792-showcase-plate-height-sp) !important;
    background: var(--ouka-id792-showcase-bg) !important;
    z-index: 0 !important;
    pointer-events: none !important;
  }

  body.page-id-792 .ouka-id792-showcase__sp-item{
    position: absolute !important;
    z-index: 1 !important;
    width: var(--ouka-id792-showcase-image-size-sp) !important;
    height: var(--ouka-id792-showcase-image-size-sp) !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  body.page-id-792 .ouka-id792-showcase__sp-item--1{
    left: 0 !important;
    top: 0 !important;
  }

  body.page-id-792 .ouka-id792-showcase__sp-item--2{
    left: var(--ouka-id792-showcase-second-image-left-sp) !important;
    top: var(--ouka-id792-showcase-second-image-top-sp) !important;
  }

  body.page-id-792 .ouka-id792-showcase__sp-item img{
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    object-fit: cover !important;
    object-position: center center !important;
  }
}

/*-------------
  建具id792②
  ----------*/
body.page-id-792{
  --ouka-id792-storage-bg: #E9E4D9;

  /* Whole section vertical position */
  --ouka-id792-storage-offset-y-pc: 80px;
  --ouka-id792-storage-offset-y-sp: 40px;

  --ouka-id792-storage-margin-bottom-pc: 60px;
  --ouka-id792-storage-margin-bottom-sp: 70px;

  /* Text */
  --ouka-id792-storage-text-size: 16px;
  --ouka-id792-storage-text-weight: 400;
  --ouka-id792-storage-text-line-height: 2;

  /* PC: align image columns with the previous id792 showcase */
  --ouka-id792-storage-content-width-pc: var(--ouka-id792-showcase-width-pc, 1000px);
  --ouka-id792-storage-content-active-width-pc: min(
    var(--ouka-id792-storage-content-width-pc),
    calc(100vw - 48px)
  );
  --ouka-id792-storage-content-left-pc: calc(
    (100vw - var(--ouka-id792-storage-content-active-width-pc)) / 2
  );

  --ouka-id792-storage-image-width-pc: 450px;
  --ouka-id792-storage-image-height-pc: 600px;
  --ouka-id792-storage-column-gap-pc: var(--ouka-id792-showcase-col-gap-pc, 100px);

  /* PC beige rectangle */
  --ouka-id792-storage-plate-width-pc: 1300px;
  --ouka-id792-storage-plate-height-pc: 590px;
  --ouka-id792-storage-plate-left-pc: 0px;
  --ouka-id792-storage-plate-top-pc: 90px;

  /* PC image vertical balance */
  --ouka-id792-storage-image-base-top-pc: calc(var(--ouka-id792-storage-plate-top-pc) - 5px);
  --ouka-id792-storage-image-offset-y-pc: 80px;

  /* PC text position */
  --ouka-id792-storage-text-left-pc: calc(var(--ouka-id792-storage-content-left-pc) + 50px);
  --ouka-id792-storage-text-top-pc: calc(var(--ouka-id792-storage-plate-top-pc) + 30px);
  --ouka-id792-storage-text-width-pc: 500px;

  /* PC stage height */
  --ouka-id792-storage-stage-height-pc: calc(
    var(--ouka-id792-storage-plate-top-pc)
    + var(--ouka-id792-storage-plate-height-pc)
    + var(--ouka-id792-storage-image-offset-y-pc)
    + 40px
  );

  /* SP: align with previous id792 showcase mobile columns */
  --ouka-id792-storage-image-width-sp: 300px;
  --ouka-id792-storage-image-height-sp: 400px;
  --ouka-id792-storage-second-image-left-sp: var(--ouka-id792-showcase-second-image-left-sp, 70px);

  /* Gap between the two image boxes */
  --ouka-id792-storage-image-gap-y-sp: 120px;

  --ouka-id792-storage-stage-width-sp: calc(
    var(--ouka-id792-storage-image-width-sp)
    + var(--ouka-id792-storage-second-image-left-sp)
  );

  --ouka-id792-storage-second-image-top-sp: calc(
    var(--ouka-id792-storage-image-height-sp)
    + var(--ouka-id792-storage-image-gap-y-sp)
  );

  --ouka-id792-storage-stage-height-sp: calc(
    var(--ouka-id792-storage-second-image-top-sp)
    + var(--ouka-id792-storage-image-height-sp)
  );

  /* SP beige square */
  --ouka-id792-storage-plate-width-sp: 300px;
  --ouka-id792-storage-plate-height-sp: 300px;
  --ouka-id792-storage-plate-left-sp: calc(
  (var(--ouka-id792-storage-stage-width-sp) - var(--ouka-id792-storage-plate-width-sp)) / 2
);
  --ouka-id792-storage-plate-top-sp: 305px;

  /* SP text position */
  --ouka-id792-storage-text-left-sp: 0px;
  --ouka-id792-storage-text-top-sp: calc(var(--ouka-id792-storage-image-height-sp) + 14px);
  --ouka-id792-storage-text-width-sp: 300px;
}

/* Base */
body.page-id-792 .entry-content > .ouka-id792-storage{
  box-sizing: border-box !important;
  overflow: visible !important;
}

body.page-id-792 .ouka-id792-storage,
body.page-id-792 .ouka-id792-storage *{
  box-sizing: border-box;
}

body.page-id-792 .ouka-id792-storage__stage{
  position: relative;
  overflow: visible;
}

body.page-id-792 .ouka-id792-storage__item{
  position: absolute;
  z-index: 2;
  margin: 0;
  padding: 0;
}

body.page-id-792 .ouka-id792-storage__item img{
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center center;
}

body.page-id-792 .ouka-id792-storage__plate{
  position: absolute;
  z-index: 0;
  background: var(--ouka-id792-storage-bg);
  pointer-events: none;
}

body.page-id-792 .ouka-id792-storage__text{
  position: absolute;
  z-index: 3;
  margin: 0 !important;
  padding: 0 !important;
  font-size: var(--ouka-id792-storage-text-size) !important;
  font-weight: var(--ouka-id792-storage-text-weight) !important;
  line-height: var(--ouka-id792-storage-text-line-height) !important;
  color: #000000 !important;
  font-family: "Shippori Mincho B1", serif;
}

/* PC */
@media (min-width: 1024px){
  body.page-id-792 .entry-content > .ouka-id792-storage{
    width: 100vw !important;
    max-width: none !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    margin-top: var(--ouka-id792-storage-offset-y-pc) !important;
    margin-bottom: var(--ouka-id792-storage-margin-bottom-pc) !important;
  }

  body.page-id-792 .ouka-id792-storage__stage{
    width: 100vw;
    height: var(--ouka-id792-storage-stage-height-pc);
  }

  body.page-id-792 .ouka-id792-storage__plate{
    left: var(--ouka-id792-storage-plate-left-pc);
    top: var(--ouka-id792-storage-plate-top-pc);
    width: var(--ouka-id792-storage-plate-width-pc);
    height: var(--ouka-id792-storage-plate-height-pc);
  }

  body.page-id-792 .ouka-id792-storage__text{
    left: var(--ouka-id792-storage-text-left-pc);
    top: var(--ouka-id792-storage-text-top-pc);
    width: var(--ouka-id792-storage-text-width-pc);
  }

  body.page-id-792 .ouka-id792-storage__item{
    width: var(--ouka-id792-storage-image-width-pc);
    height: var(--ouka-id792-storage-image-height-pc);
  }

  body.page-id-792 .ouka-id792-storage__item--left{
    left: var(--ouka-id792-storage-content-left-pc);
    top: calc(
      var(--ouka-id792-storage-image-base-top-pc)
      + var(--ouka-id792-storage-image-offset-y-pc)
    );
  }

  body.page-id-792 .ouka-id792-storage__item--right{
    left: calc(
      var(--ouka-id792-storage-content-left-pc)
      + var(--ouka-id792-storage-image-width-pc)
      + var(--ouka-id792-storage-column-gap-pc)
    );
    top: calc(
      var(--ouka-id792-storage-image-base-top-pc)
      - var(--ouka-id792-storage-image-offset-y-pc)
    );
  }
}

/* SP */
@media (max-width: 767px){
  body.page-id-792 .entry-content > .ouka-id792-storage{
    width: 100vw !important;
    max-width: 390px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    margin-top: var(--ouka-id792-storage-offset-y-sp) !important;
    margin-bottom: var(--ouka-id792-storage-margin-bottom-sp) !important;
  }

  body.page-id-792 .ouka-id792-storage__stage{
    width: var(--ouka-id792-storage-stage-width-sp);
    height: var(--ouka-id792-storage-stage-height-sp);
    margin-left: auto;
    margin-right: auto;
  }

  body.page-id-792 .ouka-id792-storage__plate{
    left: var(--ouka-id792-storage-plate-left-sp);
    top: var(--ouka-id792-storage-plate-top-sp);
    width: var(--ouka-id792-storage-plate-width-sp);
    height: var(--ouka-id792-storage-plate-height-sp);
  }

  body.page-id-792 .ouka-id792-storage__text{
    left: var(--ouka-id792-storage-text-left-sp);
    top: var(--ouka-id792-storage-text-top-sp);
    width: var(--ouka-id792-storage-text-width-sp);
  }

  body.page-id-792 .ouka-id792-storage__item{
    width: var(--ouka-id792-storage-image-width-sp);
    height: var(--ouka-id792-storage-image-height-sp);
  }

  /* SP upper image: same as PC right image */
  body.page-id-792 .ouka-id792-storage__item--right{
    left: 0;
    top: 0;
  }

  /* SP lower image: same as PC left image */
  body.page-id-792 .ouka-id792-storage__item--left{
    left: var(--ouka-id792-storage-second-image-left-sp);
    top: var(--ouka-id792-storage-second-image-top-sp);
  }
}

/*-------------
  建具id792②の上書き
  ----------*/

/* PC only: storage area must not be constrained by normal 1000px content rules */
@media (min-width: 1024px){
  body.page-id-792 #post-792 .entry-content > .ouka-id792-storage{
    width: 100vw !important;
    max-width: none !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    overflow-x: clip !important;
  }

  body.page-id-792 #post-792 .ouka-id792-storage__stage{
    width: 100vw !important;
  }

  body.page-id-792 #post-792 .ouka-id792-storage__plate{
    left: 0 !important;
  }
}

/* Fallback for browsers that do not support overflow: clip */
@supports not (overflow: clip){
  @media (min-width: 1024px){
    body.page-id-792 #post-792 .entry-content > .ouka-id792-storage{
      overflow-x: hidden !important;
    }
  }
}

/* SP only: keep the 300px images, but prevent the offset layout from exceeding the viewport */
@media (max-width: 767px){
  body.page-id-792{
    --ouka-id792-showcase-second-image-left-sp: clamp(
      0px,
      calc(100vw - var(--ouka-id792-showcase-image-size-sp)),
      70px
    );

    --ouka-id792-showcase-set-width-sp: min(
      100vw,
      calc(
        var(--ouka-id792-showcase-image-size-sp)
        + var(--ouka-id792-showcase-second-image-left-sp)
      )
    );

    --ouka-id792-storage-stage-width-sp: min(
      100vw,
      calc(
        var(--ouka-id792-storage-image-width-sp)
        + var(--ouka-id792-storage-second-image-left-sp)
      )
    );
  }

  body.page-id-792 #post-792 .entry-content > .ouka-id792-showcase,
  body.page-id-792 #post-792 .entry-content > .ouka-id792-storage{
    overflow-x: clip !important;
  }
}

/* Fallback for browsers that do not support overflow: clip */
@supports not (overflow: clip){
  @media (max-width: 767px){
    body.page-id-792 #post-792 .entry-content > .ouka-id792-showcase,
    body.page-id-792 #post-792 .entry-content > .ouka-id792-storage{
      overflow-x: hidden !important;
    }
  }
}

/* ----------
id792　スマホの画面表示を上書き修正
アートボード幅に合わせる
-------------*/
@media (max-width: 767px){

  /* Safety guard: do not allow page-level horizontal overflow on id792 */
  html:has(body.page-id-792),
  body.page-id-792{
    max-width: 100% !important;
    overflow-x: clip !important;
  }

  /* Closed drawer: keep it off-screen, but remove it from visual interaction/overflow */
  body.page-id-792 #navi-menu-content.navi-menu-content.menu-content{
    left: auto !important;
    right: 0 !important;
    transform: translate3d(100%, 0, 0) !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transition:
      transform 0.32s ease,
      visibility 0s linear 0.32s !important;
  }

  /* Open drawer: restore visibility and interaction */
  body.page-id-792 #navi-menu-input:checked ~ #navi-menu-content.navi-menu-content.menu-content{
    transform: translate3d(0, 0, 0) !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transition:
      transform 0.32s ease,
      visibility 0s linear 0s !important;
  }
}

/* Fallback for browsers that do not support overflow: clip */
@supports not (overflow: clip){
  @media (max-width: 767px){
    html:has(body.page-id-792),
    body.page-id-792{
      overflow-x: hidden !important;
    }
  }
}

/* ----------
id792　スマホ
ベージュ四角形の位置調整を上書き修正
-------------*/
@media (max-width: 767px){
  body.page-id-792{
    /* Screen-centered beige square position */
    --ouka-id792-showcase-plate-screen-left-sp: calc(
      (100vw - var(--ouka-id792-showcase-plate-width-sp)) / 2
    );

    --ouka-id792-storage-plate-screen-left-sp: calc(
      (100vw - var(--ouka-id792-storage-plate-width-sp)) / 2
    );

    /* Keep the current image-column positions after making the stage full-screen */
    --ouka-id792-showcase-content-left-sp: calc(
      (100vw - var(--ouka-id792-showcase-set-width-sp)) / 2
    );

    --ouka-id792-storage-content-left-sp: calc(
      (100vw - var(--ouka-id792-storage-stage-width-sp)) / 2
    );
  }

  /* Make showcase area use the screen as its positioning coordinate system */
  body.page-id-792 #post-792 .entry-content > .ouka-id792-showcase{
    width: 100vw !important;
    max-width: none !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
  }

  body.page-id-792 #post-792 .ouka-id792-showcase__sp-set{
    width: 100vw !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* Showcase beige square: screen-centered */
  body.page-id-792 #post-792 .ouka-id792-showcase__sp-plate{
    left: var(--ouka-id792-showcase-plate-screen-left-sp) !important;
  }

  /* Preserve current showcase image positions */
  body.page-id-792 #post-792 .ouka-id792-showcase__sp-item--1{
    left: var(--ouka-id792-showcase-content-left-sp) !important;
  }

  body.page-id-792 #post-792 .ouka-id792-showcase__sp-item--2{
    left: calc(
      var(--ouka-id792-showcase-content-left-sp)
      + var(--ouka-id792-showcase-second-image-left-sp)
    ) !important;
  }

  /* Make storage area use the screen as its positioning coordinate system */
  body.page-id-792 #post-792 .entry-content > .ouka-id792-storage{
    width: 100vw !important;
    max-width: none !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
  }

  body.page-id-792 #post-792 .ouka-id792-storage__stage{
    width: 100vw !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* Storage beige square: screen-centered */
  body.page-id-792 #post-792 .ouka-id792-storage__plate{
    left: var(--ouka-id792-storage-plate-screen-left-sp) !important;
  }

  /* Preserve current storage image and text positions */
  body.page-id-792 #post-792 .ouka-id792-storage__item--right{
    left: var(--ouka-id792-storage-content-left-sp) !important;
  }

  body.page-id-792 #post-792 .ouka-id792-storage__item--left{
    left: calc(
      var(--ouka-id792-storage-content-left-sp)
      + var(--ouka-id792-storage-second-image-left-sp)
    ) !important;
  }

  body.page-id-792 #post-792 .ouka-id792-storage__text{
    left: calc(
      var(--ouka-id792-storage-content-left-sp)
      + var(--ouka-id792-storage-text-left-sp)
    ) !important;
  }
}

/* =========================================
   id792
お問い合わせエリア
========================================= */

body.page-id-792{
  --ouka-id792-contact-bg: #E9E4D9;
  --ouka-id792-contact-text-color: #000000;
  --ouka-id792-contact-button-bg: #9C8B65;
  --ouka-id792-contact-button-color: #FFFFFF;

  /* whole area spacing */
  --ouka-id792-contact-offset-y-pc: 80px;
  --ouka-id792-contact-offset-y-sp: 60px;
  --ouka-id792-contact-margin-bottom-pc: 50px;
  --ouka-id792-contact-margin-bottom-sp: 70px;

  /* text */
  --ouka-id792-contact-text-size: 16px;
  --ouka-id792-contact-text-weight: 400;
  --ouka-id792-contact-text-line-height: 2;

  /* button */
  --ouka-id792-contact-button-width: 194px;
  --ouka-id792-contact-button-height: 51px;
  --ouka-id792-contact-button-text-size: 20px;
  --ouka-id792-contact-button-text-weight: 500;

  /* PC base */
  --ouka-id792-contact-width-pc: var(--ouka-id792-showcase-width-pc, 1000px);
  --ouka-id792-contact-image-width-pc: 550px;
  --ouka-id792-contact-image-height-pc: 340px;

  /* PC stage */
  --ouka-id792-contact-stage-height-pc: 430px;

  /* PC media position: right edge aligns with previous right image column */
  --ouka-id792-contact-media-left-pc: calc(
    var(--ouka-id792-contact-width-pc)
    - var(--ouka-id792-contact-image-width-pc)
  );
  --ouka-id792-contact-media-top-pc: 0px;

  /* PC beige rectangle offset relative to image */
  --ouka-id792-contact-plate-shift-x-pc: -40px;
  --ouka-id792-contact-plate-shift-y-pc: 34px;

  /* PC text/button position */
  --ouka-id792-contact-copy-left-pc: 90px;
  --ouka-id792-contact-copy-top-pc: 70px;
  --ouka-id792-contact-copy-width-pc: 380px;

  --ouka-id792-contact-text-shift-x-pc: -100px;
  --ouka-id792-contact-text-shift-y-pc: 0px;

  --ouka-id792-contact-button-gap-pc: 48px;
  --ouka-id792-contact-button-shift-x-pc: 0px;
  --ouka-id792-contact-button-shift-y-pc: 0px;

  /* SP base */
  --ouka-id792-contact-image-width-sp: 340px;
  --ouka-id792-contact-image-height-sp: 210px;

  /*
    Align image left edge with previous left image column.
    This uses the same screen-coordinate logic as the corrected showcase/storage areas.
  */
  --ouka-id792-contact-content-left-sp: var(
    --ouka-id792-showcase-content-left-sp,
    calc((100vw - var(--ouka-id792-showcase-set-width-sp, 370px)) / 2)
  );

  /*
    Beige rectangle right edge aligns with previous right image column.
    Previous right edge = content-left + second-image-left + 300px.
  */
  --ouka-id792-contact-right-edge-sp: calc(
    var(--ouka-id792-contact-content-left-sp)
    + var(--ouka-id792-showcase-second-image-left-sp, 70px)
    + var(--ouka-id792-showcase-image-size-sp, 300px)
  );

  --ouka-id792-contact-plate-left-sp: calc(
    var(--ouka-id792-contact-right-edge-sp)
    - var(--ouka-id792-contact-image-width-sp)
  );

  /* SP beige rectangle: only vertical offset is intended for later adjustment */
  --ouka-id792-contact-plate-shift-y-sp: 18px;

  /* SP media box height */
  --ouka-id792-contact-media-height-sp: calc(
    var(--ouka-id792-contact-image-height-sp)
    + var(--ouka-id792-contact-plate-shift-y-sp)
  );

  /* SP text/button position */
  --ouka-id792-contact-text-width-sp: 340px;
  --ouka-id792-contact-text-gap-sp: 10px;
  --ouka-id792-contact-text-shift-x-sp: 0px;
  --ouka-id792-contact-text-shift-y-sp: 0px;

  --ouka-id792-contact-button-gap-sp: 36px;
  --ouka-id792-contact-button-shift-x-sp: 0px;
  --ouka-id792-contact-button-shift-y-sp: 0px;
}

/* base */
body.page-id-792 .entry-content > .ouka-id792-contact,
body.page-id-792 .ouka-id792-contact,
body.page-id-792 .ouka-id792-contact *{
  box-sizing: border-box;
}

body.page-id-792 .ouka-id792-contact__inner{
  position: relative;
}

body.page-id-792 .ouka-id792-contact__copy,
body.page-id-792 .ouka-id792-contact__media{
  position: relative;
}

body.page-id-792 .ouka-id792-contact__text{
  margin: 0 !important;
  padding: 0 !important;
  color: var(--ouka-id792-contact-text-color) !important;
  font-family: "Shippori Mincho B1", serif;
  font-size: var(--ouka-id792-contact-text-size) !important;
  font-weight: var(--ouka-id792-contact-text-weight) !important;
  line-height: var(--ouka-id792-contact-text-line-height) !important;
  letter-spacing: 0.04em;
}

body.page-id-792 .ouka-id792-contact__button{
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: var(--ouka-id792-contact-button-width) !important;
  height: var(--ouka-id792-contact-button-height) !important;
  background: var(--ouka-id792-contact-button-bg) !important;
  color: var(--ouka-id792-contact-button-color) !important;
  border: 0 !important;
  text-decoration: none !important;
  font-family: "Shippori Mincho B1", serif;
  font-size: var(--ouka-id792-contact-button-text-size) !important;
  font-weight: var(--ouka-id792-contact-button-text-weight) !important;
  line-height: 1 !important;
  letter-spacing: 0.12em;
}

body.page-id-792 .ouka-id792-contact__button:hover{
  opacity: 0.85;
  text-decoration: none !important;
}

body.page-id-792 .ouka-id792-contact__media{
  overflow: visible;
}

body.page-id-792 .ouka-id792-contact__plate{
  position: absolute;
  z-index: 0;
  background: var(--ouka-id792-contact-bg);
  pointer-events: none;
}

body.page-id-792 .ouka-id792-contact__image{
  position: absolute;
  z-index: 1;
  display: block;
  max-width: none !important;
  object-fit: cover;
  object-position: center center;
}

/* -----------------------------------------
   PC
----------------------------------------- */
@media (min-width: 1024px){
  body.page-id-792 #post-792 .entry-content > .ouka-id792-contact{
    width: var(--ouka-id792-contact-width-pc) !important;
    max-width: calc(100vw - 48px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    margin-top: var(--ouka-id792-contact-offset-y-pc) !important;
    margin-bottom: var(--ouka-id792-contact-margin-bottom-pc) !important;
  }

  body.page-id-792 .ouka-id792-contact__inner{
    width: 100%;
    height: var(--ouka-id792-contact-stage-height-pc);
  }

  body.page-id-792 .ouka-id792-contact__copy{
    position: absolute;
    left: var(--ouka-id792-contact-copy-left-pc);
    top: var(--ouka-id792-contact-copy-top-pc);
    width: var(--ouka-id792-contact-copy-width-pc);
    z-index: 3;
  }

  body.page-id-792 .ouka-id792-contact__text{
    transform: translate(
      var(--ouka-id792-contact-text-shift-x-pc),
      var(--ouka-id792-contact-text-shift-y-pc)
    );
  }

  body.page-id-792 .ouka-id792-contact__button{
    margin-top: var(--ouka-id792-contact-button-gap-pc);
    transform: translate(
      var(--ouka-id792-contact-button-shift-x-pc),
      var(--ouka-id792-contact-button-shift-y-pc)
    );
  }

  body.page-id-792 .ouka-id792-contact__media{
    position: absolute;
    left: var(--ouka-id792-contact-media-left-pc);
    top: var(--ouka-id792-contact-media-top-pc);
    width: var(--ouka-id792-contact-image-width-pc);
    height: var(--ouka-id792-contact-image-height-pc);
  }

  body.page-id-792 .ouka-id792-contact__plate{
    left: var(--ouka-id792-contact-plate-shift-x-pc);
    top: var(--ouka-id792-contact-plate-shift-y-pc);
    width: var(--ouka-id792-contact-image-width-pc);
    height: var(--ouka-id792-contact-image-height-pc);
  }

  body.page-id-792 .ouka-id792-contact__image{
    left: 0;
    top: 0;
    width: var(--ouka-id792-contact-image-width-pc);
    height: var(--ouka-id792-contact-image-height-pc);
  }
}

/* -----------------------------------------
   SP
----------------------------------------- */
@media (max-width: 767px){
  body.page-id-792 #post-792 .entry-content > .ouka-id792-contact{
    width: 100vw !important;
    max-width: none !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    margin-top: var(--ouka-id792-contact-offset-y-sp) !important;
    margin-bottom: var(--ouka-id792-contact-margin-bottom-sp) !important;
    overflow: visible !important;
  }

  body.page-id-792 .ouka-id792-contact__inner{
    width: 100vw;
    overflow: visible;
  }

  body.page-id-792 .ouka-id792-contact__media{
    width: 100vw;
    height: var(--ouka-id792-contact-media-height-sp);
  }

  body.page-id-792 .ouka-id792-contact__image{
    left: var(--ouka-id792-contact-content-left-sp);
    top: 0;
    width: var(--ouka-id792-contact-image-width-sp);
    height: var(--ouka-id792-contact-image-height-sp);
  }

  body.page-id-792 .ouka-id792-contact__plate{
    left: var(--ouka-id792-contact-plate-left-sp);
    top: var(--ouka-id792-contact-plate-shift-y-sp);
    width: var(--ouka-id792-contact-image-width-sp);
    height: var(--ouka-id792-contact-image-height-sp);
  }

  body.page-id-792 .ouka-id792-contact__copy{
    width: 100vw;
    margin-top: var(--ouka-id792-contact-text-gap-sp);
  }

  body.page-id-792 .ouka-id792-contact__text{
    width: var(--ouka-id792-contact-text-width-sp);
    margin-left: calc(
      var(--ouka-id792-contact-content-left-sp)
      + var(--ouka-id792-contact-text-shift-x-sp)
    ) !important;
    transform: translateY(var(--ouka-id792-contact-text-shift-y-sp));
  }

  body.page-id-792 .ouka-id792-contact__button{
    margin-top: var(--ouka-id792-contact-button-gap-sp);
    margin-left: calc(
      ((100vw - var(--ouka-id792-contact-button-width)) / 2)
      + var(--ouka-id792-contact-button-shift-x-sp)
    ) !important;
    transform: translateY(var(--ouka-id792-contact-button-shift-y-sp));
  }
}

@media (max-width: 767px){
  body.page-id-792 .ouka-id792-contact__text br{
    display: none !important;
  }
}

/* --------------------
   SP　テキスト幅上書き調整
----------------*/
@media (max-width: 767px){
  body.page-id-792{
    --ouka-id792-contact-text-shift-x-sp: 0px;

    --ouka-id792-contact-text-width-sp: calc(
      var(--ouka-id792-contact-right-edge-sp)
      - var(--ouka-id792-contact-content-left-sp)
    );
  }

  body.page-id-792 .ouka-id792-contact__text{
    width: var(--ouka-id792-contact-text-width-sp) !important;
    margin-left: var(--ouka-id792-contact-content-left-sp) !important;
  }
}

/* =========================================
   Main Products child pages except id792
   Hero image / beige rectangle size override
   Target: id799 / 801 / 803 / 805 / 811 only
========================================= */

body:is(
  .page-id-799,
  .page-id-801,
  .page-id-803,
  .page-id-805,
  .page-id-811
){
  /* PC */
  --ouka-products-child-other-hero-image-width-pc: 550px;
  --ouka-products-child-other-hero-image-height-pc: 344px;
  --ouka-products-child-other-hero-plate-width-pc: 550px;
  --ouka-products-child-other-hero-plate-height-pc: 344px;

  /* Keep total hero width inside the existing 1000px content width */
  --ouka-products-child-other-hero-column-gap-pc: 10px;

  /* SP */
  --ouka-products-child-other-hero-image-width-sp: 366px;
  --ouka-products-child-other-hero-image-height-sp: 229px;
  --ouka-products-child-other-hero-plate-width-sp: 366px;
  --ouka-products-child-other-hero-plate-height-sp: 229px;
}

/* -----------------------------------------
   PC only
   id799 / 801 / 803 / 805 / 811
----------------------------------------- */
@media (min-width: 1024px){
  body:is(
    .page-id-799,
    .page-id-801,
    .page-id-803,
    .page-id-805,
    .page-id-811
  ) .entry-content > .ouka-subpage-hero{
    grid-template-columns:
      minmax(
        0,
        calc(
          100%
          - var(--ouka-products-child-other-hero-image-width-pc)
          - var(--ouka-products-child-other-hero-column-gap-pc)
        )
      )
      var(--ouka-products-child-other-hero-image-width-pc) !important;
    column-gap: var(--ouka-products-child-other-hero-column-gap-pc) !important;
  }

  body:is(
    .page-id-799,
    .page-id-801,
    .page-id-803,
    .page-id-805,
    .page-id-811
  ) .entry-content > .ouka-subpage-hero > .ouka-subpage-hero__media{
    width: var(--ouka-products-child-other-hero-image-width-pc) !important;
    max-width: none !important;
    justify-self: end !important;
    overflow: visible !important;
  }

  body:is(
    .page-id-799,
    .page-id-801,
    .page-id-803,
    .page-id-805,
    .page-id-811
  ) .entry-content > .ouka-subpage-hero > .ouka-subpage-hero__media::before{
    width: var(--ouka-products-child-other-hero-plate-width-pc) !important;
    height: var(--ouka-products-child-other-hero-plate-height-pc) !important;
    aspect-ratio: auto !important;
  }

  body:is(
    .page-id-799,
    .page-id-801,
    .page-id-803,
    .page-id-805,
    .page-id-811
  ) .entry-content > .ouka-subpage-hero > .ouka-subpage-hero__media img{
    width: var(--ouka-products-child-other-hero-image-width-pc) !important;
    height: var(--ouka-products-child-other-hero-image-height-pc) !important;
    aspect-ratio: auto !important;
    object-fit: cover !important;
    object-position: center center !important;
  }
}

/* -----------------------------------------
   SP only
   id799 / 801 / 803 / 805 / 811
----------------------------------------- */
@media (max-width: 767px){
  body:is(
    .page-id-799,
    .page-id-801,
    .page-id-803,
    .page-id-805,
    .page-id-811
  ) .entry-content > .ouka-subpage-hero > .ouka-subpage-hero__media::before{
    width: var(--ouka-products-child-other-hero-plate-width-sp) !important;
    height: var(--ouka-products-child-other-hero-plate-height-sp) !important;
    aspect-ratio: auto !important;
  }

  body:is(
    .page-id-799,
    .page-id-801,
    .page-id-803,
    .page-id-805,
    .page-id-811
  ) .entry-content > .ouka-subpage-hero > .ouka-subpage-hero__media img{
    width: var(--ouka-products-child-other-hero-image-width-sp) !important;
    height: var(--ouka-products-child-other-hero-image-height-sp) !important;
    aspect-ratio: auto !important;
    object-fit: cover !important;
    object-position: center center !important;
  }
}

body:is(
  .page-id-799,
  .page-id-801,
  .page-id-803,
  .page-id-805,
  .page-id-811
){
  /* SP beige rectangle position */
  --ouka-products-child-hero-plate-left-sp: -20px;
  --ouka-products-child-hero-plate-top-sp: 20px;
}

/* =========================================
   id799 / id801 / id803
ヒーローエリア下のコンテンツ
========================================= */

body:is(.page-id-799, .page-id-801, .page-id-803, .page-id-805){
  --ouka-stock-bg: #E9E4D9;
  --ouka-stock-text-color: #000000;

  /* Whole section spacing */
  --ouka-stock-offset-y-pc: 120px;
  --ouka-stock-offset-y-sp: 40px;
  --ouka-stock-margin-bottom-pc: 50px;
  --ouka-stock-margin-bottom-sp: 70px;

  /* Typography */
  --ouka-stock-caption-size: 16px;
  --ouka-stock-caption-weight: 400;
  --ouka-stock-caption-line-height: 1.8;
  --ouka-stock-caption-letter-spacing: 0.03em;

  /* -------------------------
     PC
  ------------------------- */
  --ouka-stock-width-pc: var(--ouka-products-child-content-width-pc, 1000px);

  --ouka-stock-image-size-pc: 450px;
  --ouka-stock-image-half-pc: 225px;

  --ouka-stock-plate-size-pc: 450px;
  --ouka-stock-plate-half-pc: 225px;

  /*
    PC X positions:
    upper-left image left = hero text left
    lower-right image right = hero image right
  */
  --ouka-stock-upper-image-left-pc: 0px;
  --ouka-stock-lower-image-left-pc: calc(
    var(--ouka-stock-width-pc) - var(--ouka-stock-image-size-pc)
  );

  /*
    PC Y balance:
    image centers are symmetric around the beige square center.
    Increase this value = images move farther apart vertically.
  */
  --ouka-stock-plate-center-y-pc: 450px;
  --ouka-stock-image-center-offset-y-pc: 225px;

  --ouka-stock-upper-image-top-pc: calc(
    var(--ouka-stock-plate-center-y-pc)
    - var(--ouka-stock-image-center-offset-y-pc)
    - var(--ouka-stock-image-half-pc)
  );

  --ouka-stock-lower-image-top-pc: calc(
    var(--ouka-stock-plate-center-y-pc)
    + var(--ouka-stock-image-center-offset-y-pc)
    - var(--ouka-stock-image-half-pc)
  );

  --ouka-stock-plate-top-pc: calc(
    var(--ouka-stock-plate-center-y-pc) - var(--ouka-stock-plate-half-pc)
  );

  /*
    Set height.
    This makes:
    lower-right image bottom of upper set
    =
    upper-left image top of next set
  */
  --ouka-stock-set-height-pc: calc(
    var(--ouka-stock-lower-image-top-pc)
    + var(--ouka-stock-image-size-pc)
  );

  --ouka-stock-set-gap-pc: 0px;

  /* PC caption positions */
  --ouka-stock-caption-gap-pc: 20px;
  --ouka-stock-caption-width-pc: 500px;

  /* right-side text beside upper-left image */
  --ouka-stock-upper-caption-top-pc: 150px;

  /* left-side text beside lower-right image */
  --ouka-stock-lower-caption-top-pc: 280px;

  /* -------------------------
     SP
  ------------------------- */
  --ouka-stock-image-size-sp: 300px;
  --ouka-stock-image-half-sp: 150px;

  --ouka-stock-plate-size-sp: 300px;
  --ouka-stock-plate-half-sp: 150px;

  /*
    SP X positions:
    upper-left image left = hero text left
    lower-right image right = hero text right
  */
  --ouka-stock-side-sp: var(--ouka-subhero-left-pad-sp, 20px);
  --ouka-stock-upper-image-left-sp: var(--ouka-stock-side-sp);
  --ouka-stock-lower-image-left-sp: calc(
    100vw - var(--ouka-stock-side-sp) - var(--ouka-stock-image-size-sp)
  );

  /*
    SP Y balance:
    Increase this value = bigger gap between upper and lower images.
  */
  --ouka-stock-plate-center-y-sp: 335px;
  --ouka-stock-image-center-offset-y-sp: 215px;

  --ouka-stock-upper-image-top-sp: calc(
    var(--ouka-stock-plate-center-y-sp)
    - var(--ouka-stock-image-center-offset-y-sp)
    - var(--ouka-stock-image-half-sp)
  );

  --ouka-stock-lower-image-top-sp: calc(
    var(--ouka-stock-plate-center-y-sp)
    + var(--ouka-stock-image-center-offset-y-sp)
    - var(--ouka-stock-image-half-sp)
  );

  --ouka-stock-plate-top-sp: calc(
    var(--ouka-stock-plate-center-y-sp) - var(--ouka-stock-plate-half-sp)
  );

  /* Text below each image */
  --ouka-stock-caption-gap-sp: 8px;
  --ouka-stock-caption-width-sp: 300px;

  /*
    Reserve space for lower image caption.
    If mobile captions become longer, increase this.
  */
  --ouka-stock-caption-reserve-sp: 150px;

  --ouka-stock-set-height-sp: calc(
    var(--ouka-stock-lower-image-top-sp)
    + var(--ouka-stock-image-size-sp)
    + var(--ouka-stock-caption-gap-sp)
    + var(--ouka-stock-caption-reserve-sp)
  );

  --ouka-stock-set-gap-sp: 0px;
}

/* Base */
body:is(.page-id-799, .page-id-801, .page-id-803, .page-id-805) .entry-content > .ouka-id799-stock,
body:is(.page-id-799, .page-id-801, .page-id-803, .page-id-805) .ouka-id799-stock,
body:is(.page-id-799, .page-id-801, .page-id-803, .page-id-805) .ouka-id799-stock *{
  box-sizing: border-box;
}

body:is(.page-id-799, .page-id-801, .page-id-803, .page-id-805) .entry-content > .ouka-id799-stock{
  position: relative;
  overflow: visible;
}

body:is(.page-id-799, .page-id-801, .page-id-803, .page-id-805) .ouka-id799-stock__set{
  position: relative;
  overflow: visible;
}

body:is(.page-id-799, .page-id-801, .page-id-803, .page-id-805) .ouka-id799-stock__plate{
  position: absolute;
  z-index: 0;
  background: var(--ouka-stock-bg);
  pointer-events: none;
}

body:is(.page-id-799, .page-id-801, .page-id-803, .page-id-805) .ouka-id799-stock__item{
  position: absolute;
  z-index: 2;
  margin: 0;
  padding: 0;
  overflow: visible;
}

body:is(.page-id-799, .page-id-801, .page-id-803, .page-id-805) .ouka-id799-stock__item img{
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center center;
}

body:is(.page-id-799, .page-id-801, .page-id-803, .page-id-805) .ouka-id799-stock__caption{
  position: absolute;
  z-index: 3;
  margin: 0 !important;
  padding: 0 !important;
  color: var(--ouka-stock-text-color) !important;
  font-family: "Shippori Mincho B1", serif;
  font-size: var(--ouka-stock-caption-size) !important;
  font-weight: var(--ouka-stock-caption-weight) !important;
  line-height: var(--ouka-stock-caption-line-height) !important;
  letter-spacing: var(--ouka-stock-caption-letter-spacing) !important;
}

/* -----------------------------------------
   PC
----------------------------------------- */
@media (min-width: 1024px){
  body:is(.page-id-799, .page-id-801, .page-id-803, .page-id-805) .entry-content > .ouka-id799-stock{
    width: 100vw !important;
    max-width: none !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    margin-top: var(--ouka-stock-offset-y-pc) !important;
    margin-bottom: var(--ouka-stock-margin-bottom-pc) !important;
  }

  body:is(.page-id-799, .page-id-801, .page-id-803, .page-id-805) .ouka-id799-stock__set{
    width: var(--ouka-stock-width-pc);
    height: var(--ouka-stock-set-height-pc);
    max-width: calc(100vw - 48px);
    margin-left: auto;
    margin-right: auto;
    margin-bottom: var(--ouka-stock-set-gap-pc);
  }

  body:is(.page-id-799, .page-id-801, .page-id-803, .page-id-805) .ouka-id799-stock__set:last-child{
    margin-bottom: 0;
  }

  /* Beige square: centered horizontally in the screen/content axis */
  body:is(.page-id-799, .page-id-801, .page-id-803, .page-id-805) .ouka-id799-stock__plate{
    left: 50%;
    top: var(--ouka-stock-plate-top-pc);
    width: var(--ouka-stock-plate-size-pc);
    height: var(--ouka-stock-plate-size-pc);
    transform: translateX(-50%);
  }

  body:is(.page-id-799, .page-id-801, .page-id-803, .page-id-805) .ouka-id799-stock__item{
    width: var(--ouka-stock-image-size-pc);
    height: var(--ouka-stock-image-size-pc);
  }

  /* Upper-left image */
  body:is(.page-id-799, .page-id-801, .page-id-803, .page-id-805) .ouka-id799-stock__item--upper{
    left: var(--ouka-stock-upper-image-left-pc);
    top: var(--ouka-stock-upper-image-top-pc);
  }

  /* Lower-right image */
  body:is(.page-id-799, .page-id-801, .page-id-803, .page-id-805) .ouka-id799-stock__item--lower{
    left: var(--ouka-stock-lower-image-left-pc);
    top: var(--ouka-stock-lower-image-top-pc);
  }

  /* Text to the right of upper-left image */
  body:is(.page-id-799, .page-id-801, .page-id-803, .page-id-805) .ouka-id799-stock__item--upper .ouka-id799-stock__caption{
    left: calc(100% + var(--ouka-stock-caption-gap-pc));
    top: var(--ouka-stock-upper-caption-top-pc);
    width: var(--ouka-stock-caption-width-pc);
  }

  /* Text to the left of lower-right image */
  body:is(.page-id-799, .page-id-801, .page-id-803, .page-id-805) .ouka-id799-stock__item--lower .ouka-id799-stock__caption{
    right: calc(100% + var(--ouka-stock-caption-gap-pc));
    top: var(--ouka-stock-lower-caption-top-pc);
    width: var(--ouka-stock-caption-width-pc);
  }
}

/* -----------------------------------------
   SP
----------------------------------------- */
@media (max-width: 767px){
  body:is(.page-id-799, .page-id-801, .page-id-803, .page-id-805) .entry-content > .ouka-id799-stock{
    width: 100vw !important;
    max-width: none !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    margin-top: var(--ouka-stock-offset-y-sp) !important;
    margin-bottom: var(--ouka-stock-margin-bottom-sp) !important;
    overflow: visible !important;
  }

  body:is(.page-id-799, .page-id-801, .page-id-803, .page-id-805) .ouka-id799-stock__set{
    width: 100vw;
    height: var(--ouka-stock-set-height-sp);
    margin-left: 0;
    margin-right: 0;
    margin-bottom: var(--ouka-stock-set-gap-sp);
    overflow: visible;
  }

  body:is(.page-id-799, .page-id-801, .page-id-803, .page-id-805) .ouka-id799-stock__set:last-child{
    margin-bottom: 0;
  }

  /* Beige square: centered relative to screen width */
  body:is(.page-id-799, .page-id-801, .page-id-803, .page-id-805) .ouka-id799-stock__plate{
    left: 50%;
    top: var(--ouka-stock-plate-top-sp);
    width: var(--ouka-stock-plate-size-sp);
    height: var(--ouka-stock-plate-size-sp);
    transform: translateX(-50%);
  }

  body:is(.page-id-799, .page-id-801, .page-id-803, .page-id-805) .ouka-id799-stock__item{
    width: var(--ouka-stock-image-size-sp);
    height: var(--ouka-stock-image-size-sp);
  }

  /* Upper-left image */
  body:is(.page-id-799, .page-id-801, .page-id-803, .page-id-805) .ouka-id799-stock__item--upper{
    left: var(--ouka-stock-upper-image-left-sp);
    top: var(--ouka-stock-upper-image-top-sp);
  }

  /* Lower-right image */
  body:is(.page-id-799, .page-id-801, .page-id-803, .page-id-805) .ouka-id799-stock__item--lower{
    left: var(--ouka-stock-lower-image-left-sp);
    top: var(--ouka-stock-lower-image-top-sp);
  }

  /* Text below each image */
  body:is(.page-id-799, .page-id-801, .page-id-803, .page-id-805) .ouka-id799-stock__caption{
    left: 0;
    top: calc(100% + var(--ouka-stock-caption-gap-sp));
    width: var(--ouka-stock-caption-width-sp);
  }
}

/* ---------------------------------------
   id799 / id801 / id803　PCのみ
右下画像の左側のテキスト位置を上書き調整
--------------------------------------- */

@media (min-width: 1024px){
  body:is(.page-id-799, .page-id-801, .page-id-803, .page-id-805)
  .ouka-id799-stock__item--lower
  .ouka-id799-stock__caption{
    width: max-content !important;
    max-width: none !important;
    white-space: nowrap !important;

    right: calc(100% + var(--ouka-stock-caption-gap-pc)) !important;
  }
}

/* ---
   id799 / id801 / id803
SP縦間隔上書き調整
--- */
@media (max-width: 767px){
  body:is(.page-id-799, .page-id-801, .page-id-803, .page-id-805){
    /* Text immediately after hero → topmost stock set */
    --ouka-stock-offset-y-sp: 100px;

    /* Spacing between each stock set */
    --ouka-stock-set-gap-sp: 30px;

    /* Bottommost stock set → footer / related-products area */
    --ouka-stock-margin-bottom-sp: 0px;
  }
}

/* =========================================
   id801 only
   Additional content below existing stock area
   - PC: image left / text right
   - SP: image top / text below
========================================= */

body.page-id-801{
  --ouka-id801-feature-bg: #E9E4D9;
  --ouka-id801-feature-text-color: #000000;

  /* whole section spacing */
  --ouka-id801-feature-offset-y-pc: 100px;
  --ouka-id801-feature-offset-y-sp: 60px;
  --ouka-id801-feature-margin-bottom-pc: 70px;
  --ouka-id801-feature-margin-bottom-sp: 70px;

  /* text */
  --ouka-id801-feature-text-size: 16px;
  --ouka-id801-feature-text-weight: 400;
  --ouka-id801-feature-text-line-height: 1.8;
  --ouka-id801-feature-text-letter-spacing: 0.03em;

  /* -----------------------------------------
     PC
  ----------------------------------------- */
  --ouka-id801-feature-width-pc: var(--ouka-products-child-content-width-pc, 1000px);

  --ouka-id801-feature-image-width-pc: 550px;
  --ouka-id801-feature-image-height-pc: 360px;

  --ouka-id801-feature-plate-width-pc: 550px;
  --ouka-id801-feature-plate-height-pc: 360px;

  /* image position */
  --ouka-id801-feature-image-left-pc: 0px;
  --ouka-id801-feature-image-top-pc: 0px;

  /* beige rectangle offset: lower right relative to image */
  --ouka-id801-feature-plate-shift-x-pc: 40px;
  --ouka-id801-feature-plate-shift-y-pc: 35px;

  /*
    text position controls
    - gap between beige rectangle and text left edge
    - text vertical position
    - text width
  */
  --ouka-id801-feature-text-gap-from-plate-pc:25px;
  --ouka-id801-feature-text-top-pc: 40px;
  --ouka-id801-feature-text-width-pc: 400px;

  /* section height */
  --ouka-id801-feature-stage-height-pc: 430px;

  /* -----------------------------------------
     SP
  ----------------------------------------- */
  --ouka-id801-feature-image-width-sp: 320px;
  --ouka-id801-feature-image-height-sp: 220px;

  --ouka-id801-feature-plate-width-sp: 320px;
  --ouka-id801-feature-plate-height-sp: 220px;

  /*
    align with the stock section above
    upper-left image left edge
  */
  --ouka-id801-feature-image-left-sp: var(--ouka-stock-upper-image-left-sp, 20px);

  /*
    lower-right image right edge in the stock section above
    = 100vw - side
  */
  --ouka-id801-feature-right-edge-sp: calc(
    100vw - var(--ouka-stock-side-sp, 20px)
  );

  /*
    plate right edge must align with the right edge above
  */
  --ouka-id801-feature-plate-left-sp: calc(
    var(--ouka-id801-feature-right-edge-sp)
    - var(--ouka-id801-feature-plate-width-sp)
  );

  /* only vertical offset should be adjustable later */
  --ouka-id801-feature-plate-shift-y-sp: 20px;

  /*
    text
    left edge = image left edge
    right edge = beige rectangle right edge
  */
  --ouka-id801-feature-text-gap-from-plate-sp: 5px;

  --ouka-id801-feature-text-width-sp: calc(
    var(--ouka-id801-feature-right-edge-sp)
    - var(--ouka-id801-feature-image-left-sp)
  );

  /* media height on SP */
  --ouka-id801-feature-media-height-sp: calc(
    var(--ouka-id801-feature-plate-shift-y-sp)
    + var(--ouka-id801-feature-plate-height-sp)
  );
}

/* base */
body.page-id-801 .entry-content > .ouka-id801-feature,
body.page-id-801 .ouka-id801-feature,
body.page-id-801 .ouka-id801-feature *{
  box-sizing: border-box;
}

body.page-id-801 .entry-content > .ouka-id801-feature{
  position: relative;
  overflow: visible;
}

body.page-id-801 .ouka-id801-feature__inner{
  position: relative;
  overflow: visible;
}

body.page-id-801 .ouka-id801-feature__media{
  position: relative;
  overflow: visible;
}

body.page-id-801 .ouka-id801-feature__plate{
  position: absolute;
  z-index: 0;
  background: var(--ouka-id801-feature-bg);
  pointer-events: none;
}

body.page-id-801 .ouka-id801-feature__image{
  position: absolute;
  z-index: 1;
  display: block;
  max-width: none !important;
  object-fit: cover;
  object-position: center center;
}

body.page-id-801 .ouka-id801-feature__text{
  margin: 0 !important;
  padding: 0 !important;
  color: var(--ouka-id801-feature-text-color) !important;
  font-family: "Shippori Mincho B1", serif;
  font-size: var(--ouka-id801-feature-text-size) !important;
  font-weight: var(--ouka-id801-feature-text-weight) !important;
  line-height: var(--ouka-id801-feature-text-line-height) !important;
  letter-spacing: var(--ouka-id801-feature-text-letter-spacing) !important;
}

/* -----------------------------------------
   PC only
----------------------------------------- */
@media (min-width: 1024px){
  body.page-id-801 .entry-content > .ouka-id801-feature{
    width: var(--ouka-id801-feature-width-pc) !important;
    max-width: calc(100vw - 48px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    margin-top: var(--ouka-id801-feature-offset-y-pc) !important;
    margin-bottom: var(--ouka-id801-feature-margin-bottom-pc) !important;
  }

  body.page-id-801 .ouka-id801-feature__inner{
    width: 100%;
    min-height: var(--ouka-id801-feature-stage-height-pc);
  }

  body.page-id-801 .ouka-id801-feature__media{
    position: absolute;
    left: 0;
    top: 0;
    width: calc(
      var(--ouka-id801-feature-image-width-pc)
      + var(--ouka-id801-feature-plate-shift-x-pc)
    );
    height: calc(
      var(--ouka-id801-feature-image-height-pc)
      + var(--ouka-id801-feature-plate-shift-y-pc)
    );
  }

  body.page-id-801 .ouka-id801-feature__image{
    left: var(--ouka-id801-feature-image-left-pc);
    top: var(--ouka-id801-feature-image-top-pc);
    width: var(--ouka-id801-feature-image-width-pc);
    height: var(--ouka-id801-feature-image-height-pc);
  }

  body.page-id-801 .ouka-id801-feature__plate{
    left: calc(
      var(--ouka-id801-feature-image-left-pc)
      + var(--ouka-id801-feature-plate-shift-x-pc)
    );
    top: calc(
      var(--ouka-id801-feature-image-top-pc)
      + var(--ouka-id801-feature-plate-shift-y-pc)
    );
    width: var(--ouka-id801-feature-plate-width-pc);
    height: var(--ouka-id801-feature-plate-height-pc);
  }

  body.page-id-801 .ouka-id801-feature__copy{
    position: absolute;
    left: calc(
      var(--ouka-id801-feature-image-left-pc)
      + var(--ouka-id801-feature-plate-shift-x-pc)
      + var(--ouka-id801-feature-plate-width-pc)
      + var(--ouka-id801-feature-text-gap-from-plate-pc)
    );
    top: var(--ouka-id801-feature-text-top-pc);
    width: var(--ouka-id801-feature-text-width-pc);
    z-index: 2;
  }
}

/* -----------------------------------------
   SP only
----------------------------------------- */
@media (max-width: 767px){
  body.page-id-801 .entry-content > .ouka-id801-feature{
    width: 100vw !important;
    max-width: none !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    margin-top: var(--ouka-id801-feature-offset-y-sp) !important;
    margin-bottom: var(--ouka-id801-feature-margin-bottom-sp) !important;
    overflow: visible !important;
  }

  body.page-id-801 .ouka-id801-feature__inner{
    width: 100vw;
    overflow: visible;
  }

  body.page-id-801 .ouka-id801-feature__media{
    width: 100vw;
    height: var(--ouka-id801-feature-media-height-sp);
  }

  body.page-id-801 .ouka-id801-feature__image{
    left: var(--ouka-id801-feature-image-left-sp);
    top: 0;
    width: var(--ouka-id801-feature-image-width-sp);
    height: var(--ouka-id801-feature-image-height-sp);
  }

  body.page-id-801 .ouka-id801-feature__plate{
    left: var(--ouka-id801-feature-plate-left-sp);
    top: var(--ouka-id801-feature-plate-shift-y-sp);
    width: var(--ouka-id801-feature-plate-width-sp);
    height: var(--ouka-id801-feature-plate-height-sp);
  }

  body.page-id-801 .ouka-id801-feature__copy{
    width: 100vw;
    margin-top: var(--ouka-id801-feature-text-gap-from-plate-sp);
  }

  body.page-id-801 .ouka-id801-feature__text{
    width: var(--ouka-id801-feature-text-width-sp);
    margin-left: var(--ouka-id801-feature-image-left-sp) !important;
  }
}

/* =========================================
   id805 / id811 only
   Reuse id792 showcase structure
   - For Custom HTML using .ouka-id792-showcase
========================================= */

body:is(.page-id-805, .page-id-811){
  --ouka-805-811-showcase-bg: #E9E4D9;

  /* whole area spacing */
  --ouka-805-811-showcase-offset-y-pc: 90px;
  --ouka-805-811-showcase-offset-y-sp: 0px;
  --ouka-805-811-showcase-margin-bottom-pc: 80px;
  --ouka-805-811-showcase-margin-bottom-sp: 60px;

  /* PC */
  --ouka-805-811-showcase-width-pc: 1000px;
  --ouka-805-811-showcase-image-size-pc: 450px;
  --ouka-805-811-showcase-col-gap-pc: 100px;
  --ouka-805-811-showcase-row-gap-pc: 80px;

  --ouka-805-811-showcase-plate-width-pc: 550px;
  --ouka-805-811-showcase-plate-height-pc: 550px;
  --ouka-805-811-showcase-plate-shift-x-pc: 0px;
  --ouka-805-811-showcase-plate-shift-y-pc: 0px;

  /* SP */
  --ouka-805-811-showcase-width-sp: 100vw;
  --ouka-805-811-showcase-set-gap-sp: 60px;

  --ouka-805-811-showcase-image-size-sp: 300px;
  --ouka-805-811-showcase-image-gap-y-sp: 60px;
  --ouka-805-811-showcase-second-image-left-sp: 70px;

  --ouka-805-811-showcase-second-image-top-sp: calc(
    var(--ouka-805-811-showcase-image-size-sp)
    + var(--ouka-805-811-showcase-image-gap-y-sp)
  );

  --ouka-805-811-showcase-set-width-sp: calc(
    var(--ouka-805-811-showcase-image-size-sp)
    + var(--ouka-805-811-showcase-second-image-left-sp)
  );

  --ouka-805-811-showcase-set-height-sp: calc(
    var(--ouka-805-811-showcase-second-image-top-sp)
    + var(--ouka-805-811-showcase-image-size-sp)
  );

  --ouka-805-811-showcase-plate-width-sp: 300px;
  --ouka-805-811-showcase-plate-height-sp: 300px;

  /* Center beige square against screen width */
  --ouka-805-811-showcase-plate-screen-left-sp: calc(
    (100vw - var(--ouka-805-811-showcase-plate-width-sp)) / 2
  );

  --ouka-805-811-showcase-content-left-sp: calc(
    (100vw - var(--ouka-805-811-showcase-set-width-sp)) / 2
  );

  --ouka-805-811-showcase-plate-overlap-y-sp: 130px;
  --ouka-805-811-showcase-plate-top-sp: calc(
    var(--ouka-805-811-showcase-image-size-sp)
    - var(--ouka-805-811-showcase-plate-overlap-y-sp)
  );
}

/* Base */
body:is(.page-id-805, .page-id-811) .entry-content > .ouka-id792-showcase{
  box-sizing: border-box !important;
}

body:is(.page-id-805, .page-id-811) .ouka-id792-showcase figure{
  margin: 0 !important;
}

body:is(.page-id-805, .page-id-811) .ouka-id792-showcase img{
  display: block !important;
}

/* -----------------------------------------
   PC
----------------------------------------- */
@media (min-width: 1024px){
  body:is(.page-id-805, .page-id-811) .entry-content > .ouka-id792-showcase{
    width: var(--ouka-805-811-showcase-width-pc) !important;
    max-width: calc(100vw - 48px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    margin-top: var(--ouka-805-811-showcase-offset-y-pc) !important;
    margin-bottom: var(--ouka-805-811-showcase-margin-bottom-pc) !important;
    position: relative !important;
    overflow: visible !important;
  }

  body:is(.page-id-805, .page-id-811) .ouka-id792-showcase__sp{
    display: none !important;
  }

  body:is(.page-id-805, .page-id-811) .ouka-id792-showcase__pc{
    position: relative !important;
    display: grid !important;
    grid-template-columns: repeat(2, var(--ouka-805-811-showcase-image-size-pc)) !important;
    column-gap: var(--ouka-805-811-showcase-col-gap-pc) !important;
    row-gap: var(--ouka-805-811-showcase-row-gap-pc) !important;
    justify-content: center !important;
    align-content: start !important;
  }

  body:is(.page-id-805, .page-id-811) .ouka-id792-showcase__pc-plate{
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    width: var(--ouka-805-811-showcase-plate-width-pc) !important;
    height: var(--ouka-805-811-showcase-plate-height-pc) !important;
    background: var(--ouka-805-811-showcase-bg) !important;
    transform:
      translate(-50%, -50%)
      translate(
        var(--ouka-805-811-showcase-plate-shift-x-pc),
        var(--ouka-805-811-showcase-plate-shift-y-pc)
      ) !important;
    z-index: 0 !important;
    pointer-events: none !important;
  }

  body:is(.page-id-805, .page-id-811) .ouka-id792-showcase__pc-item{
    position: relative !important;
    z-index: 1 !important;
    width: var(--ouka-805-811-showcase-image-size-pc) !important;
    height: var(--ouka-805-811-showcase-image-size-pc) !important;
  }

  body:is(.page-id-805, .page-id-811) .ouka-id792-showcase__pc-item img{
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    object-fit: cover !important;
    object-position: center center !important;
  }
}

/* -----------------------------------------
   SP
----------------------------------------- */
@media (max-width: 767px){
  body:is(.page-id-805, .page-id-811) .entry-content > .ouka-id792-showcase{
    width: var(--ouka-805-811-showcase-width-sp) !important;
    max-width: none !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    margin-top: var(--ouka-805-811-showcase-offset-y-sp) !important;
    margin-bottom: var(--ouka-805-811-showcase-margin-bottom-sp) !important;
    overflow: visible !important;
    box-sizing: border-box !important;
  }

  body:is(.page-id-805, .page-id-811) .ouka-id792-showcase__pc{
    display: none !important;
  }

  body:is(.page-id-805, .page-id-811) .ouka-id792-showcase__sp{
    display: block !important;
  }

  body:is(.page-id-805, .page-id-811) .ouka-id792-showcase__sp-set{
    position: relative !important;
    width: 100vw !important;
    height: var(--ouka-805-811-showcase-set-height-sp) !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    margin-bottom: var(--ouka-805-811-showcase-set-gap-sp) !important;
    overflow: visible !important;
  }

  body:is(.page-id-805, .page-id-811) .ouka-id792-showcase__sp-set:last-child{
    margin-bottom: 0 !important;
  }

  body:is(.page-id-805, .page-id-811) .ouka-id792-showcase__sp-plate{
    position: absolute !important;
    left: var(--ouka-805-811-showcase-plate-screen-left-sp) !important;
    top: var(--ouka-805-811-showcase-plate-top-sp) !important;
    width: var(--ouka-805-811-showcase-plate-width-sp) !important;
    height: var(--ouka-805-811-showcase-plate-height-sp) !important;
    background: var(--ouka-805-811-showcase-bg) !important;
    z-index: 0 !important;
    pointer-events: none !important;
  }

  body:is(.page-id-805, .page-id-811) .ouka-id792-showcase__sp-item{
    position: absolute !important;
    z-index: 1 !important;
    width: var(--ouka-805-811-showcase-image-size-sp) !important;
    height: var(--ouka-805-811-showcase-image-size-sp) !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  body:is(.page-id-805, .page-id-811) .ouka-id792-showcase__sp-item--1{
    left: var(--ouka-805-811-showcase-content-left-sp) !important;
    top: 0 !important;
  }

  body:is(.page-id-805, .page-id-811) .ouka-id792-showcase__sp-item--2{
    left: calc(
      var(--ouka-805-811-showcase-content-left-sp)
      + var(--ouka-805-811-showcase-second-image-left-sp)
    ) !important;
    top: var(--ouka-805-811-showcase-second-image-top-sp) !important;
  }

  body:is(.page-id-805, .page-id-811) .ouka-id792-showcase__sp-item img{
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    object-fit: cover !important;
    object-position: center center !important;
  }
}

/* =========================================
   id805 / id811 only
   Additional feature content
   - PC: text left / image right
   - SP: image top / text below
========================================= */

body:is(.page-id-805, .page-id-811){
  --ouka-805-811-feature-bg: #E9E4D9;
  --ouka-805-811-feature-text-color: #000000;

  /* whole section spacing */
  --ouka-805-811-feature-offset-y-pc: 100px;
  --ouka-805-811-feature-offset-y-sp: 60px;
  --ouka-805-811-feature-margin-bottom-pc: 60px;
  --ouka-805-811-feature-margin-bottom-sp: 70px;

  /* text */
  --ouka-805-811-feature-text-size: 16px;
  --ouka-805-811-feature-text-weight: 400;
  --ouka-805-811-feature-text-line-height: 1.8;
  --ouka-805-811-feature-text-letter-spacing: 0.03em;

  /* -----------------------------------------
     PC
  ----------------------------------------- */
  --ouka-805-811-feature-width-pc: var(--ouka-805-811-showcase-width-pc, 1000px);

  --ouka-805-811-feature-image-width-pc: 550px;
  --ouka-805-811-feature-image-height-pc: 360px;

  --ouka-805-811-feature-plate-width-pc: 550px;
  --ouka-805-811-feature-plate-height-pc: 360px;

  /* beige rectangle offset: lower left relative to image */
  --ouka-805-811-feature-plate-shift-x-pc: -40px;
  --ouka-805-811-feature-plate-shift-y-pc: 35px;

  /*
    PC text controls
    - text right edge spacing from beige rectangle
    - text vertical position
  */
  --ouka-805-811-feature-text-gap-from-plate-pc: 40px;
  --ouka-805-811-feature-text-top-pc: 70px;

  /* section height */
  --ouka-805-811-feature-stage-height-pc: 430px;

  /* -----------------------------------------
     SP
  ----------------------------------------- */
  --ouka-805-811-feature-image-width-sp: 320px;
  --ouka-805-811-feature-image-height-sp: 220px;

  --ouka-805-811-feature-plate-width-sp: 320px;
  --ouka-805-811-feature-plate-height-sp: 220px;

  /*
    Align image left edge with upper-left image in the showcase above.
    This uses the id805/id811 showcase variables created earlier.
  */
  --ouka-805-811-feature-image-left-sp: var(
    --ouka-805-811-showcase-content-left-sp,
    calc((100vw - 370px) / 2)
  );

  /*
    Align beige rectangle right edge with lower-right image in the showcase above.
  */
  --ouka-805-811-feature-right-edge-sp: calc(
    var(--ouka-805-811-feature-image-left-sp)
    + var(--ouka-805-811-showcase-second-image-left-sp, 70px)
    + var(--ouka-805-811-showcase-image-size-sp, 300px)
  );

  --ouka-805-811-feature-plate-left-sp: calc(
    var(--ouka-805-811-feature-right-edge-sp)
    - var(--ouka-805-811-feature-plate-width-sp)
  );

  /* only this vertical offset should be adjusted later */
  --ouka-805-811-feature-plate-shift-y-sp: 20px;

  /*
    Text:
    left edge = image left edge
    right edge = beige rectangle right edge
  */
  --ouka-805-811-feature-text-gap-from-plate-sp: 24px;

  --ouka-805-811-feature-text-width-sp: calc(
    var(--ouka-805-811-feature-right-edge-sp)
    - var(--ouka-805-811-feature-image-left-sp)
  );

  --ouka-805-811-feature-media-height-sp: calc(
    var(--ouka-805-811-feature-plate-shift-y-sp)
    + var(--ouka-805-811-feature-plate-height-sp)
  );
}

/* Base */
body:is(.page-id-805, .page-id-811) .entry-content > .ouka-805-811-feature,
body:is(.page-id-805, .page-id-811) .ouka-805-811-feature,
body:is(.page-id-805, .page-id-811) .ouka-805-811-feature *{
  box-sizing: border-box;
}

body:is(.page-id-805, .page-id-811) .entry-content > .ouka-805-811-feature{
  position: relative;
  overflow: visible;
}

body:is(.page-id-805, .page-id-811) .ouka-805-811-feature__inner{
  position: relative;
  overflow: visible;
}

body:is(.page-id-805, .page-id-811) .ouka-805-811-feature__media{
  position: relative;
  overflow: visible;
}

body:is(.page-id-805, .page-id-811) .ouka-805-811-feature__plate{
  position: absolute;
  z-index: 0;
  background: var(--ouka-805-811-feature-bg);
  pointer-events: none;
}

body:is(.page-id-805, .page-id-811) .ouka-805-811-feature__image{
  position: absolute;
  z-index: 1;
  display: block;
  max-width: none !important;
  object-fit: cover;
  object-position: center center;
}

body:is(.page-id-805, .page-id-811) .ouka-805-811-feature__text{
  margin: 0 !important;
  padding: 0 !important;
  color: var(--ouka-805-811-feature-text-color) !important;
  font-family: "Shippori Mincho B1", serif;
  font-size: var(--ouka-805-811-feature-text-size) !important;
  font-weight: var(--ouka-805-811-feature-text-weight) !important;
  line-height: var(--ouka-805-811-feature-text-line-height) !important;
  letter-spacing: var(--ouka-805-811-feature-text-letter-spacing) !important;
}

/* -----------------------------------------
   PC only
----------------------------------------- */
@media (min-width: 1024px){
  body:is(.page-id-805, .page-id-811) .entry-content > .ouka-805-811-feature{
    width: var(--ouka-805-811-feature-width-pc) !important;
    max-width: calc(100vw - 48px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    margin-top: var(--ouka-805-811-feature-offset-y-pc) !important;
    margin-bottom: var(--ouka-805-811-feature-margin-bottom-pc) !important;
  }

  body:is(.page-id-805, .page-id-811) .ouka-805-811-feature__inner{
    width: 100%;
    min-height: var(--ouka-805-811-feature-stage-height-pc);
  }

  body:is(.page-id-805, .page-id-811) .ouka-805-811-feature__media{
    position: absolute;
    right: 0;
    top: 0;
    width: var(--ouka-805-811-feature-image-width-pc);
    height: calc(
      var(--ouka-805-811-feature-image-height-pc)
      + var(--ouka-805-811-feature-plate-shift-y-pc)
    );
  }

  body:is(.page-id-805, .page-id-811) .ouka-805-811-feature__image{
    left: 0;
    top: 0;
    width: var(--ouka-805-811-feature-image-width-pc);
    height: var(--ouka-805-811-feature-image-height-pc);
  }

  body:is(.page-id-805, .page-id-811) .ouka-805-811-feature__plate{
    left: var(--ouka-805-811-feature-plate-shift-x-pc);
    top: var(--ouka-805-811-feature-plate-shift-y-pc);
    width: var(--ouka-805-811-feature-plate-width-pc);
    height: var(--ouka-805-811-feature-plate-height-pc);
  }

  body:is(.page-id-805, .page-id-811) .ouka-805-811-feature__copy{
    position: absolute;
    right: calc(
      var(--ouka-805-811-feature-image-width-pc)
      - var(--ouka-805-811-feature-plate-shift-x-pc)
      + var(--ouka-805-811-feature-text-gap-from-plate-pc)
    );
    top: var(--ouka-805-811-feature-text-top-pc);
    z-index: 2;

    width: max-content;
    max-width: none;
  }

  body:is(.page-id-805, .page-id-811) .ouka-805-811-feature__text{
    width: max-content !important;
    max-width: none !important;
    white-space: nowrap !important;
  }
}

/* -----------------------------------------
   SP only
----------------------------------------- */
@media (max-width: 767px){
  body:is(.page-id-805, .page-id-811) .entry-content > .ouka-805-811-feature{
    width: 100vw !important;
    max-width: none !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    margin-top: var(--ouka-805-811-feature-offset-y-sp) !important;
    margin-bottom: var(--ouka-805-811-feature-margin-bottom-sp) !important;
    overflow: visible !important;
  }

  body:is(.page-id-805, .page-id-811) .ouka-805-811-feature__inner{
    width: 100vw;
    overflow: visible;
  }

  body:is(.page-id-805, .page-id-811) .ouka-805-811-feature__media{
    width: 100vw;
    height: var(--ouka-805-811-feature-media-height-sp);
  }

  body:is(.page-id-805, .page-id-811) .ouka-805-811-feature__image{
    left: var(--ouka-805-811-feature-image-left-sp);
    top: 0;
    width: var(--ouka-805-811-feature-image-width-sp);
    height: var(--ouka-805-811-feature-image-height-sp);
  }

  body:is(.page-id-805, .page-id-811) .ouka-805-811-feature__plate{
    left: var(--ouka-805-811-feature-plate-left-sp);
    top: var(--ouka-805-811-feature-plate-shift-y-sp);
    width: var(--ouka-805-811-feature-plate-width-sp);
    height: var(--ouka-805-811-feature-plate-height-sp);
  }

  body:is(.page-id-805, .page-id-811) .ouka-805-811-feature__copy{
    width: 100vw;
    margin-top: var(--ouka-805-811-feature-text-gap-from-plate-sp);
  }

  body:is(.page-id-805, .page-id-811) .ouka-805-811-feature__text{
    width: var(--ouka-805-811-feature-text-width-sp) !important;
    margin-left: var(--ouka-805-811-feature-image-left-sp) !important;
    white-space: normal !important;
  }
}

/* =========================================
   id811 only
   Stock-style sets below hero
   - Same structure as id799 / id801 / id803 / id805
   - Different image / beige rectangle sizes
========================================= */

body.page-id-811{
  --ouka-id811-stock-bg: #E9E4D9;
  --ouka-id811-stock-text-color: #000000;

  /* whole section spacing */
  --ouka-id811-stock-offset-y-pc: 120px;
  --ouka-id811-stock-offset-y-sp: 60px;
  --ouka-id811-stock-margin-bottom-pc: 100px;
  --ouka-id811-stock-margin-bottom-sp: 60px;

  /* typography */
  --ouka-id811-stock-caption-size: 16px;
  --ouka-id811-stock-caption-weight: 400;
  --ouka-id811-stock-caption-line-height: 1.8;
  --ouka-id811-stock-caption-letter-spacing: 0.03em;

  /* -------------------------
     PC
  ------------------------- */
  --ouka-id811-stock-width-pc: var(--ouka-products-child-content-width-pc, 1000px);

  --ouka-id811-stock-image-width-pc: 550px;
  --ouka-id811-stock-image-height-pc: 340px;

  --ouka-id811-stock-plate-width-pc: 450px;
  --ouka-id811-stock-plate-height-pc: 450px;

  /*
    PC X positions:
    upper image left = hero text left
    lower image right = hero image right
  */
  --ouka-id811-stock-upper-image-left-pc: 0px;
  --ouka-id811-stock-lower-image-left-pc: calc(
    var(--ouka-id811-stock-width-pc) - var(--ouka-id811-stock-image-width-pc)
  );

  /*
    PC Y balance:
    Increase this value = images move farther apart vertically.
  */
  --ouka-id811-stock-plate-center-y-pc: 340px;
  --ouka-id811-stock-image-center-offset-y-pc: 190px;

  --ouka-id811-stock-upper-image-top-pc: calc(
    var(--ouka-id811-stock-plate-center-y-pc)
    - var(--ouka-id811-stock-image-center-offset-y-pc)
    - (var(--ouka-id811-stock-image-height-pc) / 2)
  );

  --ouka-id811-stock-lower-image-top-pc: calc(
    var(--ouka-id811-stock-plate-center-y-pc)
    + var(--ouka-id811-stock-image-center-offset-y-pc)
    - (var(--ouka-id811-stock-image-height-pc) / 2)
  );

  --ouka-id811-stock-plate-top-pc: calc(
    var(--ouka-id811-stock-plate-center-y-pc)
    - (var(--ouka-id811-stock-plate-height-pc) / 2)
  );

  --ouka-id811-stock-set-height-pc: calc(
    var(--ouka-id811-stock-lower-image-top-pc)
    + var(--ouka-id811-stock-image-height-pc)
  );

  --ouka-id811-stock-set-gap-pc: 0px;

  /* PC caption positions */
  --ouka-id811-stock-caption-gap-pc: 20px;
  --ouka-id811-stock-caption-width-pc: 300px;

  --ouka-id811-stock-upper-caption-top-pc: 40px;
  --ouka-id811-stock-lower-caption-top-pc: 190px;

  /* -------------------------
     SP
  ------------------------- */
  --ouka-id811-stock-image-width-sp: 340px;
  --ouka-id811-stock-image-height-sp: 210px;

  --ouka-id811-stock-plate-width-sp: 250px;
  --ouka-id811-stock-plate-height-sp: 250px;

  /*
    SP X positions:
    upper image left = hero text left
    lower image right = hero text right
  */
  --ouka-id811-stock-side-sp: var(--ouka-subhero-left-pad-sp, 20px);

  --ouka-id811-stock-upper-image-left-sp: var(--ouka-id811-stock-side-sp);

  --ouka-id811-stock-lower-image-left-sp: calc(
    100vw - var(--ouka-id811-stock-side-sp) - var(--ouka-id811-stock-image-width-sp)
  );

  /*
    SP Y balance:
    Increase this value = bigger vertical gap between images.
  */
  --ouka-id811-stock-plate-center-y-sp: 280px;
  --ouka-id811-stock-image-center-offset-y-sp: 160px;

  --ouka-id811-stock-upper-image-top-sp: calc(
    var(--ouka-id811-stock-plate-center-y-sp)
    - var(--ouka-id811-stock-image-center-offset-y-sp)
    - (var(--ouka-id811-stock-image-height-sp) / 2)
  );

  --ouka-id811-stock-lower-image-top-sp: calc(
    var(--ouka-id811-stock-plate-center-y-sp)
    + var(--ouka-id811-stock-image-center-offset-y-sp)
    - (var(--ouka-id811-stock-image-height-sp) / 2)
  );

  --ouka-id811-stock-plate-top-sp: calc(
    var(--ouka-id811-stock-plate-center-y-sp)
    - (var(--ouka-id811-stock-plate-height-sp) / 2)
  );

  --ouka-id811-stock-caption-gap-sp: 8px;
  --ouka-id811-stock-caption-width-sp: 340px;
  --ouka-id811-stock-caption-reserve-sp: 120px;

  --ouka-id811-stock-set-height-sp: calc(
    var(--ouka-id811-stock-lower-image-top-sp)
    + var(--ouka-id811-stock-image-height-sp)
    + var(--ouka-id811-stock-caption-gap-sp)
    + var(--ouka-id811-stock-caption-reserve-sp)
  );

  --ouka-id811-stock-set-gap-sp: 30px;
}

/* Base */
body.page-id-811 .entry-content > .ouka-id811-stock,
body.page-id-811 .ouka-id811-stock,
body.page-id-811 .ouka-id811-stock *{
  box-sizing: border-box;
}

body.page-id-811 .entry-content > .ouka-id811-stock{
  position: relative;
  overflow: visible;
}

body.page-id-811 .ouka-id811-stock__set{
  position: relative;
  overflow: visible;
}

body.page-id-811 .ouka-id811-stock__plate{
  position: absolute;
  z-index: 0;
  background: var(--ouka-id811-stock-bg);
  pointer-events: none;
}

body.page-id-811 .ouka-id811-stock__item{
  position: absolute;
  z-index: 2;
  margin: 0;
  padding: 0;
  overflow: visible;
}

body.page-id-811 .ouka-id811-stock__item img{
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center center;
}

body.page-id-811 .ouka-id811-stock__caption{
  position: absolute;
  z-index: 3;
  margin: 0 !important;
  padding: 0 !important;
  color: var(--ouka-id811-stock-text-color) !important;
  font-family: "Shippori Mincho B1", serif;
  font-size: var(--ouka-id811-stock-caption-size) !important;
  font-weight: var(--ouka-id811-stock-caption-weight) !important;
  line-height: var(--ouka-id811-stock-caption-line-height) !important;
  letter-spacing: var(--ouka-id811-stock-caption-letter-spacing) !important;
}

/* -----------------------------------------
   PC
----------------------------------------- */
@media (min-width: 1024px){
  body.page-id-811 .entry-content > .ouka-id811-stock{
    width: 100vw !important;
    max-width: none !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    margin-top: var(--ouka-id811-stock-offset-y-pc) !important;
    margin-bottom: var(--ouka-id811-stock-margin-bottom-pc) !important;
  }

  body.page-id-811 .ouka-id811-stock__set{
    width: var(--ouka-id811-stock-width-pc);
    height: var(--ouka-id811-stock-set-height-pc);
    max-width: calc(100vw - 48px);
    margin-left: auto;
    margin-right: auto;
    margin-bottom: var(--ouka-id811-stock-set-gap-pc);
  }

  body.page-id-811 .ouka-id811-stock__set:last-child{
    margin-bottom: 0;
  }

  body.page-id-811 .ouka-id811-stock__plate{
    left: 50%;
    top: var(--ouka-id811-stock-plate-top-pc);
    width: var(--ouka-id811-stock-plate-width-pc);
    height: var(--ouka-id811-stock-plate-height-pc);
    transform: translateX(-50%);
  }

  body.page-id-811 .ouka-id811-stock__item{
    width: var(--ouka-id811-stock-image-width-pc);
    height: var(--ouka-id811-stock-image-height-pc);
  }

  body.page-id-811 .ouka-id811-stock__item--upper{
    left: var(--ouka-id811-stock-upper-image-left-pc);
    top: var(--ouka-id811-stock-upper-image-top-pc);
  }

  body.page-id-811 .ouka-id811-stock__item--lower{
    left: var(--ouka-id811-stock-lower-image-left-pc);
    top: var(--ouka-id811-stock-lower-image-top-pc);
  }

  body.page-id-811 .ouka-id811-stock__item--upper .ouka-id811-stock__caption{
    left: calc(100% + var(--ouka-id811-stock-caption-gap-pc));
    top: var(--ouka-id811-stock-upper-caption-top-pc);
    width: var(--ouka-id811-stock-caption-width-pc);
  }

  body.page-id-811 .ouka-id811-stock__item--lower .ouka-id811-stock__caption{
    right: calc(100% + var(--ouka-id811-stock-caption-gap-pc));
    top: var(--ouka-id811-stock-lower-caption-top-pc);
    width: max-content !important;
    max-width: none !important;
    white-space: nowrap !important;
  }
}

/* -----------------------------------------
   SP
----------------------------------------- */
@media (max-width: 767px){
  body.page-id-811 .entry-content > .ouka-id811-stock{
    width: 100vw !important;
    max-width: none !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    margin-top: var(--ouka-id811-stock-offset-y-sp) !important;
    margin-bottom: var(--ouka-id811-stock-margin-bottom-sp) !important;
    overflow: visible !important;
  }

  body.page-id-811 .ouka-id811-stock__set{
    width: 100vw;
    height: var(--ouka-id811-stock-set-height-sp);
    margin-left: 0;
    margin-right: 0;
    margin-bottom: var(--ouka-id811-stock-set-gap-sp);
    overflow: visible;
  }

  body.page-id-811 .ouka-id811-stock__set:last-child{
    margin-bottom: 0;
  }

  body.page-id-811 .ouka-id811-stock__plate{
    left: 50%;
    top: var(--ouka-id811-stock-plate-top-sp);
    width: var(--ouka-id811-stock-plate-width-sp);
    height: var(--ouka-id811-stock-plate-height-sp);
    transform: translateX(-50%);
  }

  body.page-id-811 .ouka-id811-stock__item{
    width: var(--ouka-id811-stock-image-width-sp);
    height: var(--ouka-id811-stock-image-height-sp);
  }

  body.page-id-811 .ouka-id811-stock__item--upper{
    left: var(--ouka-id811-stock-upper-image-left-sp);
    top: var(--ouka-id811-stock-upper-image-top-sp);
  }

  body.page-id-811 .ouka-id811-stock__item--lower{
    left: var(--ouka-id811-stock-lower-image-left-sp);
    top: var(--ouka-id811-stock-lower-image-top-sp);
  }

  body.page-id-811 .ouka-id811-stock__caption{
    left: 0;
    top: calc(100% + var(--ouka-id811-stock-caption-gap-sp));
    width: var(--ouka-id811-stock-caption-width-sp);
  }
}

/* =========================================
   id803 only
   SP only: reduce extra blank space after the last stock set
========================================= */

@media (max-width: 767px){
  body.page-id-803{
    /*
      Adjust this if the final caption needs more or less space.
      0px = tightest.
      40px to 80px = safer if there is text below the final lower image.
    */
    --ouka-stock-last-set-caption-reserve-sp: 60px;
  }

  body.page-id-803 .entry-content > .ouka-id799-stock .ouka-id799-stock__set:last-child{
    height: calc(
      var(--ouka-stock-lower-image-top-sp)
      + var(--ouka-stock-image-size-sp)
      + var(--ouka-stock-caption-gap-sp)
      + var(--ouka-stock-last-set-caption-reserve-sp)
    ) !important;
  }
}

/* =========================================
   id811 only
   SP only: align .ouka-id811-stock images
   with the image columns of the sets below
========================================= */

@media (max-width: 767px){
  body.page-id-811{
    /*
      Left edge of upper-left image in the sets below.
      This comes from the id805/id811 showcase area.
    */
    --ouka-id811-stock-align-left-sp: var(
      --ouka-805-811-showcase-content-left-sp,
      calc((100vw - 370px) / 2)
    );

    /*
      Right edge of lower-right image in the sets below.
      = left edge of lower-right image + image width
    */
    --ouka-id811-stock-align-right-sp: calc(
      var(--ouka-id811-stock-align-left-sp)
      + var(--ouka-805-811-showcase-second-image-left-sp, 70px)
      + var(--ouka-805-811-showcase-image-size-sp, 300px)
    );

    /*
      Apply the alignment to .ouka-id811-stock.
      Upper-left image:
      left edge = left edge of upper-left image below.

      Lower-right image:
      right edge = right edge of lower-right image below.
    */
    --ouka-id811-stock-upper-image-left-sp: var(--ouka-id811-stock-align-left-sp);

    --ouka-id811-stock-lower-image-left-sp: calc(
      var(--ouka-id811-stock-align-right-sp)
      - var(--ouka-id811-stock-image-width-sp, 340px)
    );
  }
}

/* =========================================
   id811 only
   SP only: reduce extra blank space inside the last stock set
========================================= */

@media (max-width: 767px){
  body.page-id-811{
    /*
      Controls only the extra reserved space at the bottom
      of the final .ouka-id811-stock set.
    */
    --ouka-id811-stock-last-set-caption-reserve-sp: 0px;
  }

  body.page-id-811 .entry-content > .ouka-id811-stock .ouka-id811-stock__set:last-child{
    height: calc(
      var(--ouka-id811-stock-lower-image-top-sp)
      + var(--ouka-id811-stock-image-height-sp)
      + var(--ouka-id811-stock-caption-gap-sp)
      + var(--ouka-id811-stock-last-set-caption-reserve-sp)
    ) !important;
  }
}

/* =========================================
   id805 only
   SP only: reduce extra blank space inside the last stock set
   and make the spacing to the next content adjustable
========================================= */

@media (max-width: 767px){
  body.page-id-805{
    /*
      Extra reserved space at the bottom of the final stock set.
      Increase this if the lower caption needs more room.
    */
    --ouka-id805-stock-last-set-caption-reserve-sp: 20px;

    /*
      Spacing between the stock area and the content below it.
      Adjust this after the internal blank space has been removed.
    */
    --ouka-id805-stock-after-gap-sp: 40px;
  }

  body.page-id-805 .entry-content > .ouka-id799-stock{
    margin-bottom: var(--ouka-id805-stock-after-gap-sp) !important;
  }

  body.page-id-805 .entry-content > .ouka-id799-stock .ouka-id799-stock__set:last-child{
    height: calc(
      var(--ouka-stock-lower-image-top-sp)
      + var(--ouka-stock-image-size-sp)
      + var(--ouka-stock-caption-gap-sp)
      + var(--ouka-id805-stock-last-set-caption-reserve-sp)
    ) !important;
  }
}

/* =========================================
   id805 only
   SP only: disable <br> line breaks in .ouka-805-811-feature text
========================================= */

@media (max-width: 767px){
  body.page-id-805 .ouka-805-811-feature__text br{
    display: none !important;
  }
}

/* =========================================
   id1270
   PC only: adjust y-position of "これまでの歩み"
========================================= */

@media (min-width: 1024px){
  body.page-id-1270{
    --ouka-history-section-title-shift-y-pc: 40px;
  }

  body.page-id-1270 .ouka-history-section-title{
    transform: translateY(var(--ouka-history-section-title-shift-y-pc));
  }
}

/* =========================================
   id1270 Workflow
   SP only: align title bottom with number bottom
========================================= */

@media (max-width: 767px){
  body.page-id-1270{
    /*
      Fine adjustment for the title only.
      Positive = move title downward.
      Negative = move title upward.
    */
    --ouka-1270-workflow-title-bottom-adjust-sp: 0px;
  }

  body.page-id-1270 .ouka-workflow__head{
    align-items: flex-end !important;
  }

  body.page-id-1270 .ouka-workflow__title{
    transform: translateY(var(--ouka-1270-workflow-title-bottom-adjust-sp)) !important;
  }
}

/* =========================================
   SP footer layout revision
   - Text links left
   - Logo + copyright right
========================================= */

@media (max-width: 767px){
  #footer-in{
    /* Existing content side padding is 25px.
       Right block is placed 1px inside from the content right edge. */
    --ouka-footer-sp-right-edge-inset: 1px;
	  
    --ouka-footer-sp-center-width: 175px;
    --ouka-footer-sp-center-right-gap: 12px;
    /* Logo controls */
    --ouka-footer-sp-logo-width: 86px;
    --ouka-footer-sp-logo-shift-y: 0px;

    /* Copyright controls */
    --ouka-footer-sp-copyright-size: 12px;
    --ouka-footer-sp-copyright-line: 1.0;
    --ouka-footer-sp-copyright-letter-spacing: 0em;
	  
    /* Space between logo and copyright */
    --ouka-footer-sp-logo-copyright-gap: 5px;

    /* Vertical position of the whole logo/copyright block relative to the link row */
    --ouka-footer-sp-right-block-shift-y: 40px;
  }

  /* Make footer layout:
     first row = store/address block
     second row = links left + logo/copyright right */
#footer .footer-widgets{
  display: grid !important;
  grid-template-columns:
    var(--ouka-footer-sp-center-width, 175px)
    minmax(0, 1fr) !important;
  grid-template-areas:
    "left left"
    "center right" !important;
  align-items: start !important;
  column-gap: var(--ouka-footer-sp-center-right-gap, 12px) !important;
}

  #footer .footer-left{
    grid-area: left !important;
    width: auto !important;
  }

  #footer .footer-center{
    grid-area: center !important;
    width: auto !important;
    margin-top: var(--ouka-footer-sp-center-top) !important;
  }

  #footer .footer-right{
    grid-area: right !important;
    width: auto !important;
    margin-top: var(--ouka-footer-sp-center-top) !important;
    justify-self: end !important;
    align-self: start !important;
    transform:
      translateX(calc(-1 * var(--ouka-footer-sp-right-edge-inset)))
      translateY(var(--ouka-footer-sp-right-block-shift-y)) !important;
  }

  #footer .footer-right .ouka-footer-pc--right{
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-end !important;
    justify-content: flex-start !important;
  }

  #footer .footer-right .ouka-footer-pc__logo{
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: translateY(var(--ouka-footer-sp-logo-shift-y)) !important;
  }

  #footer .footer-right .ouka-footer-pc__logo img{
    display: block !important;
    width: var(--ouka-footer-sp-logo-width) !important;
    height: auto !important;
    max-width: none !important;
  }

  #footer .footer-right .ouka-footer-pc__copyright{
    margin: 0 !important;
    margin-top: var(--ouka-footer-sp-logo-copyright-gap) !important;
    font-size: var(--ouka-footer-sp-copyright-size) !important;
    line-height: var(--ouka-footer-sp-copyright-line) !important;
    white-space: nowrap !important;
    text-align: right !important;
    transform: none !important;
  }
}

/* =========================================
   id247 Contact title spacing
   Contact → line → text
========================================= */

body.page-id-247{
  --ouka-contact-title-to-line-gap: 20px;
  --ouka-contact-line-to-text-gap: 20px;
}

body.page-id-247 .ouka-contact-title{
  margin: 0 !important;
}

body.page-id-247 .ouka-contact-title > p{
  margin: 0 !important;
  padding: 0 !important;
}

body.page-id-247 .ouka-contact-title::after{
  margin-top: var(--ouka-contact-title-to-line-gap) !important;
  margin-bottom: var(--ouka-contact-line-to-text-gap) !important;
}

body.page-id-247 .ouka-contact-text-general,
body.page-id-247 .ouka-contact-text-pc,
body.page-id-247 .ouka-contact-text-sp{
  margin-top: 0 !important;
}

body.page-id-247 .ouka-contact-text-general > p,
body.page-id-247 .ouka-contact-text-pc > p,
body.page-id-247 .ouka-contact-text-sp > p{
  margin-top: 0 !important;
}

/* =========================================
   PC footer copyright x-position adjustment
========================================= */
@media (min-width: 1024px){
  #footer .footer-right{
    --ouka-footer-copyright-shift-x: 30px;
  }
}

/* =========================================
   id801 / id805
   PC only: move first set upper caption upward
========================================= */

@media (min-width: 1024px){
  body:is(.page-id-801, .page-id-805){
    /*
      Negative = move upward.
      Positive = move downward.
    */
    --ouka-stock-first-upper-caption-shift-y-pc: -40px;
  }

  body:is(.page-id-801, .page-id-805)
  .entry-content > .ouka-id799-stock
  .ouka-id799-stock__set:is(.ouka-id799-stock__set--1, :first-of-type)
  .ouka-id799-stock__item--upper
  .ouka-id799-stock__caption{
    top: calc(
      var(--ouka-stock-upper-caption-top-pc)
      + var(--ouka-stock-first-upper-caption-shift-y-pc)
    ) !important;
  }
}

/* =========================================
   id1270 Workflow
   PC only: prevent unwanted wrapping in 04 Sales text
========================================= */

@media (min-width: 1024px){
  body.page-id-1270{
    --ouka-1270-sales-text-max-width-pc: max-content;
  }

  body.page-id-1270 .ouka-workflow__step--sales .ouka-workflow__content--sales{
    width: var(--ouka-1270-sales-text-max-width-pc) !important;
    max-width: none !important;
  }

  body.page-id-1270 .ouka-workflow__step--sales .ouka-workflow__text--sales{
    white-space: nowrap !important;
  }
}

/* =========================================
   id1270
   PC only: adjust hero title vertical position
========================================= */

@media (min-width: 1024px){
  body.page-id-1270{
    /*
      Negative = move title upward.
      Positive = move title downward.
    */
    --ouka-1270-hero-title-shift-y-pc: 0px;
  }

  body.page-id-1270 .entry-content > .ouka-about-intro > .ouka-about-intro__title{
    transform: translateY(var(--ouka-1270-hero-title-shift-y-pc)) !important;
  }
}

/* =========================================
   id247
   SP only: Contact page title size
========================================= */

@media (max-width: 767px){
  body.page-id-247 .ouka-contact-title,
  body.page-id-247 .ouka-contact-title > p{
    font-size: 24px !important;
  }
}

@media (max-width: 767px){
  body.page-id-247{
    --ouka-contact-form-field-width-sp: 100%;
  }

  body.page-id-247 #post-247 .wpcf7-form > p:has(input[name="your-name"]),
  body.page-id-247 #post-247 .wpcf7-form > p:has(input[name="your-email"]),
  body.page-id-247 #post-247 .wpcf7-form > p:has(textarea[name="your-message"]){
    width: var(--ouka-contact-form-field-width-sp) !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
  }

  body.page-id-247 #post-247 .wpcf7-form-control-wrap[data-name="your-name"],
  body.page-id-247 #post-247 .wpcf7-form-control-wrap[data-name="your-email"],
  body.page-id-247 #post-247 .wpcf7-form-control-wrap[data-name="your-message"],
  body.page-id-247 #post-247 input[name="your-name"],
  body.page-id-247 #post-247 input[name="your-email"],
  body.page-id-247 #post-247 textarea[name="your-message"]{
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    box-sizing: border-box !important;
  }
}

/* =========================================
   Main Products child pages
   Related products title font size
   id792 / 799 / 801 / 803 / 805 / 811
========================================= */

body:is(
  .page-id-792,
  .page-id-799,
  .page-id-801,
  .page-id-803,
  .page-id-805,
  .page-id-811
){
  --ouka-related-products-title-size-pc: 20px;
  --ouka-related-products-title-size-sp: 20px;
}

/* PC / tablet */
@media (min-width: 768px){
  body:is(
    .page-id-792,
    .page-id-799,
    .page-id-801,
    .page-id-803,
    .page-id-805,
    .page-id-811
  ) .ouka-related-products__title{
    font-size: var(--ouka-related-products-title-size-pc) !important;
  }
}

/* Mobile */
@media (max-width: 767px){
  body:is(
    .page-id-792,
    .page-id-799,
    .page-id-801,
    .page-id-803,
    .page-id-805,
    .page-id-811
  ) .ouka-related-products__title{
    font-size: var(--ouka-related-products-title-size-sp) !important;
  }
}

/* =========================================
   id247
   SP only: make contact input fields match text width
========================================= */

@media (max-width: 767px){
  body.page-id-247 #post-247 .wpcf7-form{
    width: 100% !important;
    max-width: none !important;
    box-sizing: border-box !important;
  }

  body.page-id-247 #post-247 .wpcf7-form > p:has(input[name="your-name"]),
  body.page-id-247 #post-247 .wpcf7-form > p:has(input[name="your-email"]),
  body.page-id-247 #post-247 .wpcf7-form > p:has(textarea[name="your-message"]){
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
  }

  body.page-id-247 #post-247 .wpcf7-form > p:has(input[name="your-name"]) label,
  body.page-id-247 #post-247 .wpcf7-form > p:has(input[name="your-email"]) label,
  body.page-id-247 #post-247 .wpcf7-form > p:has(textarea[name="your-message"]) label{
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    box-sizing: border-box !important;
  }

  body.page-id-247 #post-247 .wpcf7-form-control-wrap[data-name="your-name"],
  body.page-id-247 #post-247 .wpcf7-form-control-wrap[data-name="your-email"],
  body.page-id-247 #post-247 .wpcf7-form-control-wrap[data-name="your-message"]{
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    box-sizing: border-box !important;
  }

  body.page-id-247 #post-247 input[name="your-name"],
  body.page-id-247 #post-247 input[name="your-email"],
  body.page-id-247 #post-247 textarea[name="your-message"]{
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    box-sizing: border-box !important;
  }
}

/* =========================================
   id247
   SP only: make CF7 input fields match content text width
========================================= */

@media (max-width: 767px){
  body.page-id-247{
    --ouka-contact-field-width-sp: 100%;
  }

  body.page-id-247 #post-247 .wp-block-contact-form-7-contact-form-selector,
  body.page-id-247 #post-247 .wpcf7,
  body.page-id-247 #post-247 form.wpcf7-form{
    display: block !important;
    width: var(--ouka-contact-field-width-sp) !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
  }

  body.page-id-247 #post-247 form.wpcf7-form > p{
    display: block !important;
    width: var(--ouka-contact-field-width-sp) !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
  }

  body.page-id-247 #post-247 form.wpcf7-form > p > label{
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    box-sizing: border-box !important;
  }

  body.page-id-247 #post-247 .wpcf7-form-control-wrap{
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    box-sizing: border-box !important;
  }

  body.page-id-247 #post-247 input.wpcf7-text,
  body.page-id-247 #post-247 input.wpcf7-email,
  body.page-id-247 #post-247 textarea.wpcf7-textarea{
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }
}

/* =========================================
   id1270
   PC only: align About hero title Y position
   with id497 / id1214 hero titles
========================================= */

@media (min-width: 1024px){
  body.page-id-1270{
    /*
      Negative = move the title upward.
      Positive = move the title downward.
    */
    --ouka-1270-about-title-shift-y-pc: 0px;
  }

  body.page-id-1270
  .entry-content > .ouka-about-intro > .ouka-about-intro__title{
    transform: translateY(var(--ouka-1270-about-title-shift-y-pc)) !important;
  }
}

/* =========================================
   id1214
   SP only: adjust spacing between product image links
========================================= */

@media (max-width: 767px){
  body.page-id-1214{
    /* horizontal spacing between the two columns */
    --ouka-items-gallery-column-gap-sp: 24px;

    /* spacing between each row */
    --ouka-items-gallery-row-gap-sp: 12px;

    /* reserved height for the caption area */
    --ouka-items-caption-min-height-sp: 30px;

    /* spacing between image and caption */
    --ouka-items-image-caption-gap: 7px;
  }
}

/* =========================================
   id1270 hero
   Reset old title-only adjustment
   and keep title/text relationship consistent
========================================= */

@media (min-width: 1024px){
  body.page-id-1270
  .entry-content > .ouka-about-intro > .ouka-about-intro__title{
    transform: none !important;
  }

  body.page-id-1270
  .entry-content > .ouka-about-intro > .ouka-about-intro__text{
    transform: none !important;
    margin-top: 0 !important;
  }
}

/* =========================================
   id1270 hero
   PC only: enforce same title/text/media grid as lower-page heroes
========================================= */

@media (min-width: 1024px){
  body.page-id-1270 .entry-content > .ouka-about-intro{
    display: grid !important;
    grid-template-columns: 50vw 50vw !important;
    grid-template-areas:
      "title media"
      "text  media" !important;
    row-gap: var(--ouka-subhero-gap-y-pc) !important;
    align-items: start !important;
  }

  body.page-id-1270 .entry-content > .ouka-about-intro > .ouka-about-intro__title{
    grid-area: title !important;
    align-self: end !important;
    transform: none !important;
  }

  body.page-id-1270 .entry-content > .ouka-about-intro > .ouka-about-intro__text{
    grid-area: text !important;
    margin-top: 0 !important;
    transform: none !important;
  }

  body.page-id-1270 .entry-content > .ouka-about-intro > .ouka-about-intro__media{
    grid-area: media !important;
  }
}

/* =========================================
   id1270
========================================= */

@media (min-width: 1024px){
  body.page-id-1270{
    /*
      Negative = move upward.
      Positive = move downward.
    */
    --ouka-1270-about-title-final-shift-y-pc: 0px;
  }

  body.page-id-1270
  .entry-content > .ouka-about-intro > .ouka-about-intro__title{
    transform: translateY(var(--ouka-1270-about-title-final-shift-y-pc)) !important;
  }
}

/* =========================================
   id1214
   Match image-link label color with related-products labels
========================================= */

body.page-id-1214 .ouka-category-label,
body.page-id-1214 .ouka-category-label__link,
body.page-id-1214 .ouka-category-label__jp,
body.page-id-1214 .ouka-category-label__en{
  color: #000000 !important;
}

/* =========================================
   id811 only
   SP only: adjust spacing between hero and .ouka-id811-stock
========================================= */

@media (max-width: 767px){
  body.page-id-811{
    --ouka-id811-hero-bottom-gap-sp: 0px;
    --ouka-id811-hero-text-bottom-gap-sp: 0px;
  }

  body.page-id-811 .entry-content > .ouka-subpage-hero{
    margin-bottom: var(--ouka-id811-hero-bottom-gap-sp) !important;
  }

  body.page-id-811 .entry-content > .ouka-subpage-hero > .ouka-subpage-hero__text{
    margin-bottom: var(--ouka-id811-hero-text-bottom-gap-sp) !important;
  }
}

/* =========================================
   id801 only
   SP only: set exact image-to-image gap
   between set--1 lower image and set--2 upper image
========================================= */

@media (max-width: 767px){
  body.page-id-801{
    --ouka-id801-stock-set1-to-set2-image-gap-sp: 30px;
  }

  body.page-id-801
  .entry-content > .ouka-id799-stock
  .ouka-id799-stock__set:is(.ouka-id799-stock__set--1, :first-of-type){
    height: calc(
      var(--ouka-stock-lower-image-top-sp)
      + var(--ouka-stock-image-size-sp)
      + var(--ouka-id801-stock-set1-to-set2-image-gap-sp)
      - var(--ouka-stock-upper-image-top-sp)
    ) !important;

    margin-bottom: 0 !important;
  }
}

/* =========================================
   id801 only
   SP only: gap between images inside stock set--2
   3-1.webp → 4-2.webp
========================================= */

@media (max-width: 767px){
  body.page-id-801{
    --ouka-id801-stock-set2-image-gap-sp: 60px;
  }

  body.page-id-801
  .entry-content > .ouka-id799-stock
  .ouka-id799-stock__set.ouka-id799-stock__set--2
  .ouka-id799-stock__item--lower{
    top: calc(
      var(--ouka-stock-upper-image-top-sp)
      + var(--ouka-stock-image-size-sp)
      + var(--ouka-id801-stock-set2-image-gap-sp)
    ) !important;
  }
}

/* =========================================
   id801 only
   SP only: disable <br> in set--2 lower caption
========================================= */

@media (max-width: 767px){
  body.page-id-801
  .entry-content > .ouka-id799-stock
  .ouka-id799-stock__set.ouka-id799-stock__set--2
  .ouka-id799-stock__caption.ouka-id799-stock__caption--lower br{
    display: none !important;
  }
}

/* =========================================
   id801 only
   SP only: fix stock set--2 height dynamically
   and keep 60px gap to .ouka-id801-feature
========================================= */

@media (max-width: 767px){
  body.page-id-801{
    --ouka-id801-set2-caption-to-feature-gap-sp: 60px;
    --ouka-id801-stock-set2-image-gap-sp: 60px;
  }

  body.page-id-801
  .entry-content > .ouka-id799-stock
  .ouka-id799-stock__set.ouka-id799-stock__set--2{
    height: auto !important;
    min-height: 0 !important;
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
    overflow: visible !important;
  }

  body.page-id-801
  .entry-content > .ouka-id799-stock
  .ouka-id799-stock__set.ouka-id799-stock__set--2
  .ouka-id799-stock__item{
    position: relative !important;
    left: auto !important;
    top: auto !important;
    z-index: 2 !important;
    width: var(--ouka-stock-image-size-sp) !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
  }

  body.page-id-801
  .entry-content > .ouka-id799-stock
  .ouka-id799-stock__set.ouka-id799-stock__set--2
  .ouka-id799-stock__item img{
    display: block !important;
    width: var(--ouka-stock-image-size-sp) !important;
    height: var(--ouka-stock-image-size-sp) !important;
    max-width: none !important;
    object-fit: cover !important;
    object-position: center center !important;
  }

  /* Upper image in set--2 */
  body.page-id-801
  .entry-content > .ouka-id799-stock
  .ouka-id799-stock__set.ouka-id799-stock__set--2
  .ouka-id799-stock__item--upper{
    height: var(--ouka-stock-image-size-sp) !important;
    margin-left: var(--ouka-stock-upper-image-left-sp) !important;
  }

  /*
    Lower image in set--2.
    This keeps the image-to-image spacing at 60px.
  */
  body.page-id-801
  .entry-content > .ouka-id799-stock
  .ouka-id799-stock__set.ouka-id799-stock__set--2
  .ouka-id799-stock__item--lower{
    height: auto !important;
    margin-left: var(--ouka-stock-lower-image-left-sp) !important;
    margin-top: var(--ouka-id801-stock-set2-image-gap-sp) !important;
  }

  /*
    Make only the lower caption in set--2 part of normal flow.
    This is the important part: the caption height is now counted,
    even when it wraps to 3 lines.
  */
  body.page-id-801
  .entry-content > .ouka-id799-stock
  .ouka-id799-stock__set.ouka-id799-stock__set--2
  .ouka-id799-stock__caption.ouka-id799-stock__caption--lower{
    position: static !important;
    display: block !important;
    width: var(--ouka-stock-caption-width-sp) !important;
    margin-top: var(--ouka-stock-caption-gap-sp) !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    white-space: normal !important;
  }

  /*
    The feature section starts 60px after the lower caption.
    Existing .ouka-id801-feature is already margin-controlled,
    so this overrides only id801 mobile.
  */
  body.page-id-801 .entry-content > .ouka-id801-feature{
    margin-top: var(--ouka-id801-set2-caption-to-feature-gap-sp) !important;
  }
}

/* =========================================
   id803 only
   SP only: exact gap between set--1 lower image
   and set--2 upper image
   2-3.webp → ３.webp
========================================= */

@media (max-width: 767px){
  body.page-id-803{
    /*
      Gap between:
      - bottom edge of the lower image in set--1
      - top edge of the upper image in set--2
    */
    --ouka-id803-stock-set1-to-set2-image-gap-sp: 30px;
  }

  body.page-id-803
  .entry-content > .ouka-id799-stock
  .ouka-id799-stock__set.ouka-id799-stock__set--1{
    height: calc(
      var(--ouka-stock-lower-image-top-sp)
      + var(--ouka-stock-image-size-sp)
      + var(--ouka-id803-stock-set1-to-set2-image-gap-sp)
      - var(--ouka-stock-upper-image-top-sp)
    ) !important;

    margin-bottom: 0 !important;
  }
}

/* =========================================
   id803 only
   SP only: gap between images inside stock set--2
   ３.webp → 4-1.webp
========================================= */

@media (max-width: 767px){
  body.page-id-803{
    /*
      Gap between:
      - bottom edge of the upper image in set--2
      - top edge of the lower image in set--2
    */
    --ouka-id803-stock-set2-image-gap-sp: 60px;
  }

  body.page-id-803
  .entry-content > .ouka-id799-stock
  .ouka-id799-stock__set.ouka-id799-stock__set--2
  .ouka-id799-stock__item--lower{
    top: calc(
      var(--ouka-stock-upper-image-top-sp)
      + var(--ouka-stock-image-size-sp)
      + var(--ouka-id803-stock-set2-image-gap-sp)
    ) !important;
  }
}

/* =========================================
   id803 only
   SP only: dynamic set--2 height
   and 60px gap from set--2 lower caption
   to set--3 upper image
========================================= */

@media (max-width: 767px){
  body.page-id-803{
    /*
      Gap between:
      - bottom edge of set--2 lower caption
      - top edge of set--3 upper image
    */
    --ouka-id803-set2-caption-to-set3-image-gap-sp: 60px;

    /*
      Gap between:
      - bottom edge of upper image in set--2
      - top edge of lower image in set--2
    */
    --ouka-id803-stock-set2-image-gap-sp: 60px;
  }

  /*
    Let set--2 height be determined by its actual contents.
    This avoids estimating caption height.
  */
  body.page-id-803
  .entry-content > .ouka-id799-stock
  .ouka-id799-stock__set.ouka-id799-stock__set--2{
    height: auto !important;
    min-height: 0 !important;
    padding-bottom: 0 !important;
    overflow: visible !important;

    /*
      set--3 upper image has its own top offset.
      This formula makes the visible gap from set--2 caption bottom
      to set--3 upper image top equal to 60px.
    */
    margin-bottom: calc(
      var(--ouka-id803-set2-caption-to-set3-image-gap-sp)
      - var(--ouka-stock-upper-image-top-sp)
    ) !important;
  }

  /*
    Convert only the figures inside set--2 from absolute positioning
    to controlled normal-flow layout.
  */
  body.page-id-803
  .entry-content > .ouka-id799-stock
  .ouka-id799-stock__set.ouka-id799-stock__set--2
  .ouka-id799-stock__item{
    position: relative !important;
    left: auto !important;
    top: auto !important;
    z-index: 2 !important;
    width: var(--ouka-stock-image-size-sp) !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
  }

  body.page-id-803
  .entry-content > .ouka-id799-stock
  .ouka-id799-stock__set.ouka-id799-stock__set--2
  .ouka-id799-stock__item img{
    display: block !important;
    width: var(--ouka-stock-image-size-sp) !important;
    height: var(--ouka-stock-image-size-sp) !important;
    max-width: none !important;
    object-fit: cover !important;
    object-position: center center !important;
  }

  /* Upper image in set--2: ３.webp */
  body.page-id-803
  .entry-content > .ouka-id799-stock
  .ouka-id799-stock__set.ouka-id799-stock__set--2
  .ouka-id799-stock__item--upper{
    height: var(--ouka-stock-image-size-sp) !important;
    margin-left: var(--ouka-stock-upper-image-left-sp) !important;
  }

  /* Lower image in set--2: 4-1.webp */
  body.page-id-803
  .entry-content > .ouka-id799-stock
  .ouka-id799-stock__set.ouka-id799-stock__set--2
  .ouka-id799-stock__item--lower{
    height: auto !important;
    margin-left: var(--ouka-stock-lower-image-left-sp) !important;
    margin-top: var(--ouka-id803-stock-set2-image-gap-sp) !important;
  }

  /*
    Make only the lower caption in set--2 part of normal flow.
    This is the key part.
    The height is counted even if the caption wraps differently.
  */
  body.page-id-803
  .entry-content > .ouka-id799-stock
  .ouka-id799-stock__set.ouka-id799-stock__set--2
  .ouka-id799-stock__caption.ouka-id799-stock__caption--lower{
    position: static !important;
    display: block !important;
    width: var(--ouka-stock-caption-width-sp) !important;
    margin-top: var(--ouka-stock-caption-gap-sp) !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    white-space: normal !important;
  }
}

/* =========================================
   id799 only
   SP only: 60px gap between set--2 upper caption
   and set--2 lower image
========================================= */

@media (max-width: 767px){
  body.page-id-799{
    /*
      Gap between:
      - bottom edge of set--2 upper caption
      - top edge of set--2 lower image
    */
    --ouka-id799-set2-upper-caption-to-lower-image-gap-sp: 60px;
  }

  /*
    Keep set--2 itself in the existing stock layout.
    We only change the internal flow of set--2's upper item and lower item.
  */
  body.page-id-799
  .entry-content > .ouka-id799-stock
  .ouka-id799-stock__set.ouka-id799-stock__set--2{
    overflow: visible !important;
  }

  /*
    Upper image + upper caption:
    Convert only this figure from absolute layout to controlled normal flow.
    This lets the real caption height be counted, even if it wraps.
  */
  body.page-id-799
  .entry-content > .ouka-id799-stock
  .ouka-id799-stock__set.ouka-id799-stock__set--2
  .ouka-id799-stock__item--upper{
    position: relative !important;
    left: auto !important;
    top: auto !important;
    width: var(--ouka-stock-image-size-sp) !important;
    height: auto !important;
    margin-left: var(--ouka-stock-upper-image-left-sp) !important;
    margin-top: var(--ouka-stock-upper-image-top-sp) !important;
    padding: 0 !important;
    overflow: visible !important;
  }

  body.page-id-799
  .entry-content > .ouka-id799-stock
  .ouka-id799-stock__set.ouka-id799-stock__set--2
  .ouka-id799-stock__item--upper img{
    display: block !important;
    width: var(--ouka-stock-image-size-sp) !important;
    height: var(--ouka-stock-image-size-sp) !important;
    max-width: none !important;
    object-fit: cover !important;
    object-position: center center !important;
  }

  /*
    Make only the upper caption in set--2 part of normal flow.
    This is the key part.
  */
  body.page-id-799
  .entry-content > .ouka-id799-stock
  .ouka-id799-stock__set.ouka-id799-stock__set--2
  .ouka-id799-stock__caption.ouka-id799-stock__caption--upper{
    position: static !important;
    display: block !important;
    width: var(--ouka-stock-caption-width-sp) !important;
    margin-top: var(--ouka-stock-caption-gap-sp) !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    white-space: normal !important;
  }

  /*
    Lower image:
    Place it 60px after the actual bottom edge of the upper caption.
  */
  body.page-id-799
  .entry-content > .ouka-id799-stock
  .ouka-id799-stock__set.ouka-id799-stock__set--2
  .ouka-id799-stock__item--lower{
    position: relative !important;
    left: auto !important;
    top: auto !important;
    width: var(--ouka-stock-image-size-sp) !important;
    height: var(--ouka-stock-image-size-sp) !important;
    margin-left: var(--ouka-stock-lower-image-left-sp) !important;
    margin-top: var(--ouka-id799-set2-upper-caption-to-lower-image-gap-sp) !important;
    padding: 0 !important;
    overflow: visible !important;
  }

  body.page-id-799
  .entry-content > .ouka-id799-stock
  .ouka-id799-stock__set.ouka-id799-stock__set--2
  .ouka-id799-stock__item--lower img{
    display: block !important;
    width: var(--ouka-stock-image-size-sp) !important;
    height: var(--ouka-stock-image-size-sp) !important;
    max-width: none !important;
    object-fit: cover !important;
    object-position: center center !important;
  }
}

/* =========================================
   PC only
   Footer logo → copyright spacing adjustment
========================================= */

@media (min-width: 1024px){
  #footer .footer-right{
    --ouka-footer-right-logo-margin-bottom: 0px;
  }
}

/* =========================================
   id799 only
   PC only: spacing between final stock image
   and related-products area
========================================= */

@media (min-width: 1024px){
  body.page-id-799{
    --ouka-id799-stock-to-related-gap-pc: 90px;
  }

  body.page-id-799 .entry-content > .ouka-id799-stock{
    margin-bottom: var(--ouka-id799-stock-to-related-gap-pc) !important;
  }
}

/* =========================================
   id803 only
   PC only: spacing between final stock image
   and related-products area
========================================= */

@media (min-width: 1024px){
  body.page-id-803{
    --ouka-id803-stock-to-related-gap-pc: 90px;
  }

  body.page-id-803 .entry-content > .ouka-id799-stock{
    margin-bottom: var(--ouka-id803-stock-to-related-gap-pc) !important;
  }
}

/* =========================================
   id811 only
   PC only: gap between hero beige rectangle
   and first .ouka-id811-stock image
========================================= */

@media (min-width: 1024px){
  body.page-id-811{
    --ouka-id811-hero-plate-to-stock-image-gap-pc: 90px;

    --ouka-id811-stock-offset-y-pc: calc(
      var(--ouka-id811-hero-plate-to-stock-image-gap-pc)
      + (
        var(--ouka-products-child-hero-plate-top-pc)
        + var(--ouka-products-child-other-hero-plate-height-pc)
        - var(--ouka-products-child-other-hero-image-height-pc)
      )
      - var(--ouka-id811-stock-upper-image-top-pc)
    );
  }

  body.page-id-811 .entry-content > .ouka-id811-stock{
    margin-top: var(--ouka-id811-stock-offset-y-pc) !important;
  }
}

/* =========================================
   id1270 SP ヒーローエリア 最初の<br>を無効化
========================================= */

@media (max-width: 767px){
  body.page-id-1270 .ouka-about-intro__text > br:first-child{
    display: none !important;
  }
}

/* =========================================
   id1270 PC ヒーローエリア テキストy方向位置変更
========================================= */
@media (min-width: 1024px){
  body.page-id-1270{
    --ouka-1270-about-title-text-gap-pc: 28px;
    --ouka-1270-about-title-final-shift-y-pc: 0px;
  }

  body.page-id-1270 .entry-content > .ouka-about-intro{
    row-gap: var(--ouka-1270-about-title-text-gap-pc) !important;
  }

  body.page-id-1270 .entry-content > .ouka-about-intro > .ouka-about-intro__title{
    transform: none !important;
  }

  body.page-id-1270 .entry-content > .ouka-about-intro > .ouka-about-intro__text{
    margin-top: 0 !important;
    transform: none !important;
  }
}