@import url('https://fonts.googleapis.com/css2?family=Zen+Old+Mincho:wght@400;500;600;700;900&display=swap');

.zen-old-mincho-regular {
  font-family: "Zen Old Mincho", serif;
  font-weight: 400;
  font-style: normal;
}

.zen-old-mincho-medium {
  font-family: "Zen Old Mincho", serif;
  font-weight: 500;
  font-style: normal;
}

.zen-old-mincho-semibold {
  font-family: "Zen Old Mincho", serif;
  font-weight: 600;
  font-style: normal;
}

.zen-old-mincho-bold {
  font-family: "Zen Old Mincho", serif;
  font-weight: 700;
  font-style: normal;
}

.zen-old-mincho-black {
  font-family: "Zen Old Mincho", serif;
  font-weight: 900;
  font-style: normal;
}


body{
/*font-family: "Zen Maru Gothic",
               "Hiragino Maru Gothic ProN",
               "Yu Gothic",
               "Hiragino Kaku Gothic ProN","Hiragino Sans",
               "Meiryo","Noto Sans JP", sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: "palt" 1; */

  font-family: "Zen Old Mincho", serif;
  font-weight: 400;
  font-style: normal;
  font-size:1rem;
  line-height: 1.9;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: "palt" 1; /* プロポーショナル仮名 */
  font-weight: 400;
  letter-spacing: .01em; /* ほんの少し締める */
background-color: #000;;
    color:#fff;
    letter-spacing: 0.3rem;
}

.bgblack{
  background-color: #000;
  color:#fff;
}
.bgblack a{
  color:#fff;
}
.catch{
  font-size:1.6rem;
}

h2.title,h3.title {
  display: inline-block;
  position: relative;
  color: #fff; /* 文字色（茶色） */
  font-weight: 400;
  font-size:1.5rem;
  padding-bottom: 12px; /* ← 下に余白を追加！ */
  margin-bottom:2rem;
  padding-left: 0;
}
h2.title::before{
  display: none;
}
h3.title{
  font-size:1.2rem; 
}
h2.title::after ,h3.title::after {
  content: '';
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 0; /* padding-bottomで調整済みなので0 */
  width: 24px; /* 下線の幅 */
  height: 6px; /* 下線の太さ */
  background-color: #fff; /* 下線の色 */
}

.section{
  padding-top: 5rem !important;
  padding-bottom: 5rem !important;
}
.section-subtitle {
  font-size: 1rem;
  line-height: 2;
  margin-bottom: 2rem;
}

.text-left{
  text-align: left;
   line-height: 2;
}
/* ベース */
.site-header{position:sticky;top:0;z-index:1000;background:#e6e6e6;border-bottom:1px solid #cfcfcf}
.container{max-width:1100px;margin:0 auto;padding:0 16px;text-align: center;}
.header-inner{display:flex;align-items:center;justify-content:space-between;height:56px}

/* 左：ロゴ */
.branding{display:flex;align-items:center;gap:12px}
.site-title{font-family: "Times New Roman", serif; font-weight:700; font-size:22px; color:#111; text-decoration:none}

/* 右：メニュー */
.nav-area{display:flex;align-items:center;gap:24px}
.menu{list-style:none;margin:0;padding:0;display:flex;gap:28px}
.menu a{color:#111;text-decoration:none;font-size:14px;letter-spacing:.02em}
.menu a:hover{opacity:.7}

/* SNSアイコン（メニューの「CSSクラス」に social-facebook / social-instagram を付ける） */
.menu-social{gap:16px}
.menu-social li a{display:block;width:22px;height:22px;text-indent:-9999px;overflow:hidden;}

/* SVG を /assets/icons/ に置く例 */
.menu-social li.social-facebook a{background:url('../images/facebook.svg') no-repeat center/contain}
.menu-social li.social-instagram a{background:url('../images/instagram.svg') no-repeat center/contain}

/* モバイル */
.nav-toggle{display:none}
@media (max-width: 900px){
  .nav-toggle{display:inline-flex;align-items:center;justify-content:center;
    width:40px;height:32px;border:1px solid #bbb;background:#fff}
  .nav-area{display:none;position:absolute;right:16px;top:56px;background:#e6e6e6;padding:12px 16px;border:1px solid #cfcfcf;border-radius:8px}
  .nav-area.open{display:flex;flex-direction:column;gap:12px}
  .menu{flex-direction:column;gap:12px}
  .menu-social{flex-direction:row}
}


/*#members*/
/* カードを横3列 */
.member-grid{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap:24px;
  margin:0; padding:0; list-style:none;
}.member-card{border:1px solid #eee;border-radius:12px;background:#fff;padding:16px;text-align:center;transition:transform .15s}
.member-card:hover{transform:translateY(-2px)}
.member-link{text-decoration:none;color:inherit;display:block}

.member-logo{aspect-ratio:2/1;display:flex;align-items:center;justify-content:center;border-radius:8px;overflow:hidden;margin:0 0 12px}
.member-logo img{max-width:60%;max-height:100%;object-fit:contain}
.logo-placeholder{font-weight:700;font-size:14px;opacity:.5}

.member-name{font-weight:600;font-size: 12px; letter-spacing: 0.1rem;background: #f7f7f7;padding: 5px 0;}

/*#members*/
/* カードを横4列 */
.member4-grid{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap:24px;
  margin-top:24px; 
  padding:0; list-style:none;
}
.member4-grid .member-card{border:1px solid #eee;border-radius:12px;background:#fff;padding:16px;text-align:center;transition:transform .15s}
.member4-grid .member-card:hover{transform:translateY(-2px)}
.member4-grid .member-link{text-decoration:none;color:inherit;display:block}

.member4-grid .member-logo{aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;background:#f7f7f7;border-radius:8px;overflow:hidden;margin:0 0 12px}
.member4-grid .member-logo img{max-width:100%;height:auto;object-fit:contain}
.member4-grid .logo-placeholder{font-weight:700;font-size:24px;opacity:.25}

.member4-grid .member-name{font-weight:600;font-size:14px}



/*single-member.php*/

.member-single .container{max-width:960px;margin:0 auto;padding:0 20px}

/* 上段2カラム */
.ms-head{display:grid;grid-template-columns:1.1fr 1fr;gap:32px;margin:48px 0}
@media (max-width: 900px){ .ms-head{grid-template-columns:1fr} }

/* 左：テキスト */
.ms-name{
  font-size: 28px;
    font-weight: 500;
    margin: 0 0 8px;
    background: #f7f7f7;
    padding: 10px;
    border-radius: 8px;
    /* border: 1px solid #ccc; */
    margin-bottom: 50px;}
.ms-title{letter-spacing: 0.3rem;font-size:24px;font-weight:500;margin:10px 0 16px;letter-spacing: 1.5px;}
.ms-catch{line-height:2;letter-spacing: 0.3rem;font-size:16px;font-weight:400;margin:0 0 16px;letter-spacing: 1px;text-align: left;}
.ms-desc{line-height:1.8;color:#333}
.ms-desc p{margin:0 0 1em}

/* 右：画像＋サムネ */
.ms-mainimg{border:1px solid #e5e5e5;border-radius:8px;overflow:hidden;margin:0}
.ms-mainimg img{display:block;width:100%;height:auto;object-fit:cover;background:#fafafa}
.ms-thumbs{display:flex;gap:10px;list-style:none;margin:12px 0 0;padding:0}
.ms-thumb{border:1px solid #e5e5e5;border-radius:6px;padding:0;background:#fff;cursor:pointer}
.ms-thumb img{display:block;width:72px;height:72px;object-fit:cover}

/* 右のメイン画像の枠（3:2で一定比率） */
.ms-mainimg{
  width: 100%;           /* カラム幅いっぱい */
  aspect-ratio: 3 / 2;   /* ← 比率を固定（2:3や16:9でも可） */
  overflow: hidden;      /* はみ出しを隠す */
  border-radius: 8px;    /* お好みで */
  background: #f5f5f5;
}

/* 中央基準で端をトリミング */
#ms-main{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;      /* 枠いっぱい＋はみ出した端は切り落とし */
  object-position: center;/* 中央基準 */
}

/* 下段：情報テーブル（カード） */
.card{background:#f7f7f7;border:1px solid #e5e5e5;border-radius:12px;padding:20px;margin:36px 0 64px}
.ms-table{display:grid;grid-template-columns:1fr;gap:10px;margin:0;text-align: left;}
.ms-table .row{display:grid;grid-template-columns:140px 1fr;gap:12px;align-items:start}
.ms-table dt{font-weight:600;color:#666}
.ms-table dd{margin:0}
.ms-table a{text-decoration:none;color:#0073aa}
.ms-table a:hover{text-decoration:underline}


/*footer*/

/* 左側に固定 */
.side-icons {
  position: fixed;
  left: 24px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  z-index: 999;
}

/* アイコン共通 */
.side-icons .icon {
  color: #046e74;            /* アイコン色（金寄り） */
  font-size: 20px;
  text-decoration: none;
  transition: transform 0.3s, opacity 0.3s;
}
.side-icons .icon:hover {
  transform: translateY(-3px);
  opacity: 0.7;
}

/* コピーライト縦書き */
.side-icons .copyright {
  writing-mode: vertical-rl;
  transform: rotate(360deg);
  font-size: 0.85rem;
  color: #046e74;
  letter-spacing: 0.05em;
  margin-top: 8px;
  font-family: "Zen Old Mincho", serif;
}

/* 背景が明るい場合に少し影をつけると読みやすい */
.side-icons .icon, 
.side-icons .copyright {
  text-shadow: 0 0 4px rgba(255,255,255,0.6);
}

/* スマホ時は非表示にする例 */
@media (max-width: 768px) {
  .side-icons {
    display: none;
  }
}


.site-footer{background:#f7f7f7;border-top:1px solid #e5e5e5;padding:24px 0}
.footer-inner{max-width:1100px;margin:0 auto;padding:0 16px;display:flex;gap:24px;align-items:center;justify-content:space-between}
.footer-logo{text-decoration:none;color:#111;font-weight:700}
.menu-footer{list-style:none;margin:0;padding:0;display:flex;gap:16px}
.menu-footer a{text-decoration:none;color:#111}
.to-top{text-decoration:none}
@media (max-width: 860px){
  .footer-inner{flex-direction:column;align-items:flex-start;gap:12px}
}

.fade-up { 
opacity: 0; 
transform: translateY(40px); 
transition: opacity 0.8s ease, transform 0.8s ease; 

} 

.fade-up.active { 

opacity: 1; 

transform: translateY(0); 

} 


@media (max-width: 768px) { 
.container{
  max-width:90%;
}
.member-grid{
    grid-template-columns: repeat(2, 1fr);
}
.member4-grid{
    grid-template-columns: repeat(2, 1fr);
}


}


/******** KOHAKU ********/

.page-main{
  width:80%;
  max-width:1280px;
  margin:5rem auto;

}
@media (max-width: 768px) { 
  .page-main{
      width: calc(100% - 40px);
      margin: 3rem 20px;
  }
}
h2 {
  position: relative;           /* ← 基準を作る */
  display: inline-block;        /* 任意：サイズをテキストに合わせる */
  padding-left: 60px;           /* 画像ぶんの余白は h2 に付ける */
  line-height: 1.5;
  font-family: "Zen Old Mincho", serif;
  color: #036E75;
  font-size: 3.5rem;
  text-shadow: 1px 1px 2px rgba(255,255,255,0.6);
  margin-top: 100px;
  margin-bottom:50px;
}

/* テキスト（前面） */
h2 span{
  display: block;
  color: #036E75;

  padding-left: 4.8px;          /* 必要なら微調整だけ */
  font-size: 2rem;              /* 1.8remは削除（どちらか一方に） */
  font-weight: 700;
  letter-spacing: calc(50 * 0.001em);
  margin-right: calc(50 * 0.001em * -1);
  position: relative;
  z-index: 1;                   /* ← 前面に出す */
}

/* 背景アイコン（背面） */
h2::before{
  content: "";
  position: absolute;
  left: -50px;                      /* h2の左から配置（必要なら調整） */
  top: 35%;
  transform: translateY(-50%);
  width: 120px;
  height: 120px;
  background-image: url("../images/KOHAKU.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  opacity: 0.5;
  z-index: 0;                   /* ← 背面に固定 */
  pointer-events: none;         /* 任意：クリックを邪魔しない */
}
@media (max-width: 768px){
h2{
  font-size: 2rem;
  margin-top: 50px;
}
h2::before{
  width: 80px;
  height: 80px;
  left: -20px;
}
}
/* Page Hero */
.page-hero{
  position: relative;
  display: grid;
  place-items: center;
  min-height: clamp(36vh, 48vh, 60vh);
  padding: 6rem 1.5rem;
  /* 背景画像はCSSカスタムプロパティで受け取る */
  background-image: var(--hero-bg, none);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  color: #fff;
  text-align: center;
  isolation: isolate; /* overlay を上に重ねる */
}

.page-hero__overlay{
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.35); /* 画像を少し暗く */
  z-index: -1;
}

.page-hero__inner{
  max-width: 1100px;
  margin-inline: auto;
}

.page-hero__title{
  font-size: clamp(2rem, 4vw + 1rem, 3.5rem);
  line-height: 1.15;
  letter-spacing: .05em;
  margin: 0;
  font-weight: 700;
}

.page-hero__subtitle{
  font-size: clamp(1rem, 1.1rem + .6vw, 1.375rem);
  line-height: 1.6;
  margin-top: .75rem;
  opacity: .95;
}


table,table tr,table th,table td{
    padding:2rem!important;
}
@media (max-width: 768px) { 
table,table tr,table th,table td{
    padding:2rem 0!important;
}
}

.info_tbl{
  padding:2rem;
  border:none;
}

.info_tbl tr{
  border-bottom:1px solid;
  padding:2rem 0;
}

.info_tbl tr:first-child{
  border-top:1px solid;
}
.info_tbl th{
  font-weight: bold;
  border:none;
  border-bottom:1px solid;
  width:250px;
}
@media (max-width: 768px) { 
.info_tbl th{
  width:100px;
}
}
.info_tbl td{
  border:none;
  border-bottom:1px solid;
  padding:2rem 0;
}

.price_tbl{
border:none;
}
.price_tbl tr{
  border-bottom:1px solid;
}
.price_tbl th{
border:none;
}
.price_tbl td{
  border:none;
  text-align: center;
}

.price_tbl thead{
  border:none;
  border-bottom:5px double ;
}

.price_tbl thead th{
  text-align: center;
}

/* ===============================
   ▼ グローバルナビ全体
================================ */
.nav-area {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  display: none;
}

/* メインメニュー */
.menu-primary {
  display: flex;
  align-items: center;
  gap: 24px;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* 1階層目 */
.menu-primary > li {
  position: relative;
}
.menu-primary > li > a {
  display: block;
  padding: 8px 12px;
  color: #064a4a;
  text-decoration: none;
  font-weight: 600;
  transition: color 0.3s;
}
.menu-primary > li > a:hover {
  color: #007f7f;
}

/* ▼ サブメニュー（ピロロん下がるアニメ） */
.menu-primary .sub-menu {
  position: absolute;
  left: 0;
  top: 100%;
  min-width: 200px;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.08);
  padding: 8px 0;
  margin-top: 8px;
  list-style: none;

  transform-origin: top;
  transform: translateY(-8px) scaleY(0.9);
  opacity: 0;
  visibility: hidden;
  transition: all 0.25s ease;
  z-index: 100;
}

/* サブメニュー項目 */
.menu-primary .sub-menu li a {
  display: block;
  padding: 10px 16px;
  color: #333;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.3s;
}
.menu-primary .sub-menu li a:hover {
  background: #f5f7f7;
}

/* ホバーで下に「ピロロん」 */
.menu-primary > li:hover > .sub-menu,
.menu-primary > li:focus-within > .sub-menu {
  visibility: visible;
  opacity: 1;
  transform: translateY(0) scaleY(1);
}

/* ▼ 子ありメニューの矢印 */
.menu-primary > li.menu-item-has-children > a::after {
  content: "▾";
  font-size: 0.8em;
  margin-left: 0.4em;
}

/* ===============================
   ▼ SNSメニュー（右寄せ・アイコン想定）
================================ */
.menu-social {
  display: flex;
  align-items: center;
  gap: 16px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.menu-social a {
  color: #036E75;
  font-size: 1.2rem;
  transition: opacity 0.3s;
}
.menu-social a:hover {
  opacity: 0.7;
}
/*************** nav *******/
:root{
  --brand:#036E75;
  --gold:#C2A66D;
  --ease:cubic-bezier(.22,.61,.36,1); /* ぬるっと */
}

/* スクリーンリーダー用 */
.sr-only{position:absolute!important;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ==== トグル（右上に固定・常に見える） ==== */
.nav-toggle{

  position: fixed;           /* ← 常時表示 */
  top: 12px;
  right: 12px;
  width: 46px; height: 46px;
  display: grid; place-items: center;
  background: rgba(255,255,255,.85);
  backdrop-filter: blur(4px);
  border: 1px solid #e8e8e8;
  border-radius: 12px;
  cursor: pointer;
  z-index: 1002;             /* ドロワーより上 */
    display: none;
}
.nav-toggle:focus-visible{outline:2px solid var(--gold);outline-offset:2px}

/* 三本線（アニメで X に） */
.nav-toggle .burger{
  position: relative;
  width: 24px; height: 2px;
  background: var(--brand);
  transition: background .3s var(--ease);
}
.nav-toggle .burger::before,
.nav-toggle .burger::after{
  content: "";
  position: absolute; left: 0;
  width: 24px; height: 2px; background: var(--brand);
  transition: transform .34s var(--ease), top .34s var(--ease), opacity .2s;
}
.nav-toggle .burger::before{ top: -7px; }
.nav-toggle .burger::after { top: 7px;  }

/* 開いたら X に変形 */
.nav-toggle[aria-expanded="true"] .burger{ background: transparent; }
.nav-toggle[aria-expanded="true"] .burger::before{ top: 0; transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] .burger::after { top: 0; transform: rotate(-45deg); }

/* ==== PC時のナビ（任意で調整） ==== */
.nav-area{
  display:flex; align-items:center; gap:24px;
}
.menu-primary,.menu-social{display:flex;gap:20px;list-style:none;margin:0;padding:0}
.menu-primary a,.menu-social a{text-decoration:none;color:#111}
/* スマホ対応（例） */
@media (max-width:1024px){
  .nav-toggle{
  display: grid; 
  }
  .nav-area{
    position: fixed;
    top: 0; right: 0; bottom: 0;
    width: min(86vw, 360px);
    height: 100dvh;
    background: #fff;
    box-shadow: -14px 0 32px rgba(0,0,0,.10);
    transform: translateX(100%);
    /* ← ここをゆっくりに */
    transition: transform 0.58s var(--ease);
    z-index: 1000;
    display: flex; flex-direction: column;
    padding: 16px 12px;
  }
  .nav-area.is-open{ transform: translateX(0); }

  .menu-primary,.menu-social{flex-direction:column;gap:0}
  .menu-primary li,.menu-social li{border-bottom:1px solid #f2f2f2}
  .menu-primary a,.menu-social a{
    display:block; padding:16px 8px; font-weight:600; letter-spacing:.03em; color:#222;
    transition: transform .25s var(--ease), color .25s var(--ease);
  }
  .menu-primary a:hover{ color:var(--brand); transform:translateX(6px); }

  /* オーバーレイ（速度も少しゆっくり） */
  .drawer-backdrop{
    position: fixed; inset: 0;
    background: rgba(0,0,0,.36);
    backdrop-filter: saturate(120%) blur(2px);
    opacity: 0; transition: opacity .45s var(--ease);
    z-index: 999; display: none;
  }
  .drawer-backdrop.is-show{ display:block; opacity:1; }
}



/* --- 全体レイアウト --- */
.kohaku-about {
  background: #f8f7f5;
  color: #1a1a1a;
 /* font-family: "Zen Kaku Gothic New", "Noto Sans JP", sans-serif;*/
  line-height: 1.9;
  padding: 2rem;
}

.kohaku-about .container {
  max-width: 900px;
  margin: 0 auto;
  padding: 0 24px;
}

/* --- タイトル --- */
.kohaku-about .title-main {
  font-size: 2.4rem;
  text-align: center;
  color: #036E75;
  letter-spacing: 0.1em;
  margin: 60px auto;
  position: relative;
  display: block;
}
.kohaku-about .title-main::after {
  content: "";
  display: block;
  width: 60px;
  height: 2px;
  background: #C2A66D;
  margin: 20px auto 0;
}
.kohaku-about h2{
  padding-left: 0;
  margin-top:0;
}
/* --- セクションブロック --- */
.kohaku-about .block {
  margin-bottom: 64px;
}
.kohaku-about h2 {
  font-family: "Zen Old Mincho", serif;
  font-size: 1.8rem;
  color: #036E75;
  margin-bottom: 16px;
  position: relative;
}
.kohaku-about h2::before {
  content: "";
  position: absolute;
  left: -24px;
  top: 0.6em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #C2A66D;
}
.kohaku-about h3 {
  font-size: 1.2rem;
  margin: 24px 0 8px;
  color: #444;
}

/* --- テキスト --- */
.kohaku-about p {
  font-size: 1rem;
  margin: 0 0 1.4em;
}
.kohaku-about strong {
  color: #036E75;
}

/* --- 強調ブロック --- */
.kohaku-about .highlight {
  background: #fff;
  border-left: 4px solid #C2A66D;
  padding: 24px 28px;
  border-radius: 10px;
  box-shadow: 0 3px 10px rgba(0,0,0,0.05);
}

/* --- サイン --- */
.kohaku-about .signature {
  text-align: center;
  margin-top: 80px;
  font-family: "Zen Old Mincho", serif;
  color: #555;
}
.kohaku-about .signature strong {
  color: #036E75;
  font-weight: 600;
}

/* --- レスポンシブ --- */
@media (max-width: 767px) {
  .kohaku-about { padding: 60px 20px; }
  .kohaku-about .title-main { font-size: 2rem; }
  .kohaku-about h2::before { display: none; }
}


/*******/
body {
  margin: 0;
}

.l-mrt-main img,
.l-mrt-main input[type=image] {
  -webkit-backface-visibility: hidden;
}
.l-mrt-main img {
  width: 100%;
  height: auto;
  vertical-align: bottom;
}
.l-mrt-main *,
.l-mrt-main *:before,
.l-mrt-main *:after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
.l-mrt-main a {
  text-decoration: none;
}
.l-mrt-main button {
  background: unset;
  border: unset;
}
.l-mrt-main li {
  list-style-type: none;
}
.l-mrt-main em {
  font-style: normal;
}

.l-mrt-main {
  font-family: "FOT-TsukuARdGothic Std", "fot-tsukuardgothic-std", sans-serif;
  font-weight: 700;
  letter-spacing: -0.024em;
  color: #fff;
  background-color: #E05E0E;
}
.l-mrt-main a {
  transition: opacity 0.3s;
}
.l-mrt-main a:hover {
  opacity: 0.7;
}

.spD {
  display: none;
}
@media screen and (max-width: 750px) {
  .spD {
    display: block;
  }
}

.pcD {
  display: block;
}
@media screen and (max-width: 750px) {
  .pcD {
    display: none;
  }
}

.kohaku-info, .kohaku-topics, .kohaku-shop, .kohaku-qa, .kohaku-cm, .kohaku-product, .kohaku-concept {
  position: relative;
  z-index: 1;
  padding: min(9.1508052709vw, 125px) 0 0 0;
}
@media screen and (max-width: 750px) {
  .kohaku-info, .kohaku-topics, .kohaku-shop, .kohaku-qa, .kohaku-cm, .kohaku-product, .kohaku-concept {
    padding: 20vw 0;
  }
}

.kohaku-info__inner, .kohaku-topics__inner, .kohaku-shop__inner, .kohaku-qa__inner, .kohaku-cm__inner, .kohaku-product__inner, .kohaku-concept__inner {
  position: relative;
  z-index: 1;
  width: min(84.1874084919vw, 1150px);
  margin: 0 auto;
  padding: 0 min(5.9297218155vw, 81px);
}
@media screen and (max-width: 750px) {
  .kohaku-info__inner, .kohaku-topics__inner, .kohaku-shop__inner, .kohaku-qa__inner, .kohaku-cm__inner, .kohaku-product__inner, .kohaku-concept__inner {
    width: 90.9333333333vw;
    padding: 0 4.5333333333vw;
  }
}

.kohaku-topics__ttl, .kohaku-shop__ttl, .kohaku-qa__ttl, .kohaku-cm__ttl, .kohaku-product__ttl, .kohaku-product__box h3, .kohaku-concept__ttl {
  position: relative;
  z-index: 1;
  text-align: center;
  margin: 0 auto;
  margin-bottom: min(2.9282576867vw, 40px);
  font-size: min(2.635431918vw, 36px);
  padding-bottom: min(1.317715959vw, 18px);
}
@media screen and (max-width: 750px) {
  .kohaku-topics__ttl, .kohaku-shop__ttl, .kohaku-qa__ttl, .kohaku-cm__ttl, .kohaku-product__ttl, .kohaku-product__box h3, .kohaku-concept__ttl {
    margin-bottom: 6.4vw;
    font-size: 6.4vw;
    padding-bottom: 3.7333333333vw;
  }
}
.kohaku-topics__ttl::after, .kohaku-shop__ttl::after, .kohaku-qa__ttl::after, .kohaku-cm__ttl::after, .kohaku-product__ttl::after, .kohaku-product__box h3::after, .kohaku-concept__ttl::after {
  position: absolute;
  z-index: 1;
  content: "";
  background-color: #fff;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  width: min(7.906295754vw, 108px);
  height: min(0.2928257687vw, 4px);
}
@media screen and (max-width: 750px) {
  .kohaku-topics__ttl::after, .kohaku-shop__ttl::after, .kohaku-qa__ttl::after, .kohaku-cm__ttl::after, .kohaku-product__ttl::after, .kohaku-product__box h3::after, .kohaku-concept__ttl::after {
    width: 16vw;
    height: 1.0666666667vw;
  }
}

.obj {
  position: absolute;
  z-index: 2;
  transform-style: preserve-3d;
  will-change: transform;
  transition: all 0.5s;
}

/* ----------------------------------------------------------------
フェードアニメーション
----------------------------------------------------------------- */
:root {
  --fade-translate-x: 0px;
  --fade-translate-y: 0px;
  --fade-duration: 1000ms;
}

/* 表示方向 */
.up {
  --fade-translate-x: 0px;
  --fade-translate-y: 50px;
}

.down {
  --fade-translate-x: 0px;
  --fade-translate-y: -50px;
}

.left {
  --fade-translate-x: -50px;
  --fade-translate-y: 0px;
}

.right {
  --fade-translate-x: 50px;
  --fade-translate-y: 0px;
}

.jsFade {
  opacity: 0;
  filter: blur(10px);
  transition-duration: 1000ms;
  transition-property: opacity, filter, transform;
  transition-delay: 0ms;
  transform: translate(var(--fade-translate-x), var(--fade-translate-y));
}
.jsFade.speed--100 {
  transition-duration: 100ms;
}
.jsFade.speed--200 {
  transition-duration: 200ms;
}
.jsFade.speed--300 {
  transition-duration: 300ms;
}
.jsFade.speed--400 {
  transition-duration: 400ms;
}
.jsFade.speed--500 {
  transition-duration: 500ms;
}
.jsFade.speed--600 {
  transition-duration: 600ms;
}
.jsFade.speed--700 {
  transition-duration: 700ms;
}
.jsFade.speed--800 {
  transition-duration: 800ms;
}
.jsFade.speed--900 {
  transition-duration: 900ms;
}
.jsFade.speed--1000 {
  transition-duration: 1000ms;
}
.jsFade.speed--1100 {
  transition-duration: 1100ms;
}
.jsFade.speed--1200 {
  transition-duration: 1200ms;
}
.jsFade.speed--1300 {
  transition-duration: 1300ms;
}
.jsFade.speed--1400 {
  transition-duration: 1400ms;
}
.jsFade.speed--1500 {
  transition-duration: 1500ms;
}
.jsFade.speed--1600 {
  transition-duration: 1600ms;
}
.jsFade.speed--1700 {
  transition-duration: 1700ms;
}
.jsFade.speed--1800 {
  transition-duration: 1800ms;
}
.jsFade.speed--1900 {
  transition-duration: 1900ms;
}
.jsFade.speed--2000 {
  transition-duration: 2000ms;
}
.jsFade.speed--2100 {
  transition-duration: 2100ms;
}
.jsFade.speed--2200 {
  transition-duration: 2200ms;
}
.jsFade.speed--2300 {
  transition-duration: 2300ms;
}
.jsFade.speed--2400 {
  transition-duration: 2400ms;
}
.jsFade.speed--2500 {
  transition-duration: 2500ms;
}
.jsFade.speed--2600 {
  transition-duration: 2600ms;
}
.jsFade.speed--2700 {
  transition-duration: 2700ms;
}
.jsFade.speed--2800 {
  transition-duration: 2800ms;
}
.jsFade.speed--2900 {
  transition-duration: 2900ms;
}
.jsFade.speed--3000 {
  transition-duration: 3000ms;
}
.jsFade.delay--100 {
  transition-delay: 100ms;
}
.jsFade.delay--200 {
  transition-delay: 200ms;
}
.jsFade.delay--300 {
  transition-delay: 300ms;
}
.jsFade.delay--400 {
  transition-delay: 400ms;
}
.jsFade.delay--500 {
  transition-delay: 500ms;
}
.jsFade.delay--600 {
  transition-delay: 600ms;
}
.jsFade.delay--700 {
  transition-delay: 700ms;
}
.jsFade.delay--800 {
  transition-delay: 800ms;
}
.jsFade.delay--900 {
  transition-delay: 900ms;
}
.jsFade.delay--1000 {
  transition-delay: 1000ms;
}
.jsFade.delay--1100 {
  transition-delay: 1100ms;
}
.jsFade.delay--1200 {
  transition-delay: 1200ms;
}
.jsFade.delay--1300 {
  transition-delay: 1300ms;
}
.jsFade.delay--1400 {
  transition-delay: 1400ms;
}
.jsFade.delay--1500 {
  transition-delay: 1500ms;
}
.jsFade.delay--1600 {
  transition-delay: 1600ms;
}
.jsFade.delay--1700 {
  transition-delay: 1700ms;
}
.jsFade.delay--1800 {
  transition-delay: 1800ms;
}
.jsFade.delay--1900 {
  transition-delay: 1900ms;
}
.jsFade.delay--2000 {
  transition-delay: 2000ms;
}
.jsFade.delay--2100 {
  transition-delay: 2100ms;
}
.jsFade.delay--2200 {
  transition-delay: 2200ms;
}
.jsFade.delay--2300 {
  transition-delay: 2300ms;
}
.jsFade.delay--2400 {
  transition-delay: 2400ms;
}
.jsFade.delay--2500 {
  transition-delay: 2500ms;
}
.jsFade.delay--2600 {
  transition-delay: 2600ms;
}
.jsFade.delay--2700 {
  transition-delay: 2700ms;
}
.jsFade.delay--2800 {
  transition-delay: 2800ms;
}
.jsFade.delay--2900 {
  transition-delay: 2900ms;
}
.jsFade.delay--3000 {
  transition-delay: 3000ms;
}

.jsScrollIn {
  opacity: 1;
  filter: blur(0);
  transform: translate(0, 0);
}

/* ----------------------------------------------------------------
swiper
----------------------------------------------------------------- */
.l-mrt-main .swiper {
  padding-bottom: min(2.9282576867vw, 40px);
}
@media screen and (max-width: 750px) {
  .l-mrt-main .swiper {
    padding-bottom: 5.3333333333vw;
  }
}
.l-mrt-main .swiper-wrapper {
  transition-timing-function: linear;
}
.l-mrt-main .swiper-pagination-bullet {
  width: min(1.317715959vw, 18px);
  height: min(1.317715959vw, 18px);
  background: #fff;
  border: 1px solid #724404;
  opacity: 1;
}
@media screen and (max-width: 750px) {
  .l-mrt-main .swiper-pagination-bullet {
    width: 2.9333333333vw;
    height: 2.9333333333vw;
  }
}
.l-mrt-main .swiper-pagination-bullet-active {
  background: #E05E0E;
}
.l-mrt-main .swiper .swiper-horizontal > .swiper-pagination-bullets,
.l-mrt-main .swiper .swiper-pagination-bullets.swiper-pagination-horizontal,
.l-mrt-main .swiper .swiper-pagination-custom,
.l-mrt-main .swiper .swiper-pagination-fraction {
  bottom: min(0.2196193265vw, 3px);
  display: flex;
  justify-content: center;
}
@media screen and (max-width: 750px) {
  .l-mrt-main .swiper .swiper-horizontal > .swiper-pagination-bullets,
  .l-mrt-main .swiper .swiper-pagination-bullets.swiper-pagination-horizontal,
  .l-mrt-main .swiper .swiper-pagination-custom,
  .l-mrt-main .swiper .swiper-pagination-fraction {
    bottom: 2.1333333333vw;
  }
}
.l-mrt-main .swiper .swiper-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet,
.l-mrt-main .swiper .swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet {
  margin: 0 var(--swiper-pagination-bullet-horizontal-gap, min(0.439238653vw, 6px));
}
@media screen and (max-width: 750px) {
  .l-mrt-main .swiper .swiper-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet,
  .l-mrt-main .swiper .swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet {
    margin: 0 var(--swiper-pagination-bullet-horizontal-gap, 1.0666666667vw);
  }
}
.l-mrt-main .swiper-button-prev, .l-mrt-main .swiper-button-next {
  width: min(5.1244509517vw, 70px);
  height: min(5.1244509517vw, 70px);
  border: 1px solid #E05E0E;
  border-radius: 50%;
  transition: all 0.3s;
}
@media screen and (max-width: 750px) {
  .l-mrt-main .swiper-button-prev, .l-mrt-main .swiper-button-next {
    width: 8vw;
    height: 8vw;
    border: unset;
  }
}
.l-mrt-main .swiper-button-prev::before, .l-mrt-main .swiper-button-prev::after, .l-mrt-main .swiper-button-next::before, .l-mrt-main .swiper-button-next::after {
  position: absolute;
  z-index: 1;
  content: "";
  background-color: #E05E0E;
  width: min(1.4641288433vw, 20px);
  height: 1px;
  border-radius: 2px;
  transition: all 0.3s;
}
@media screen and (max-width: 750px) {
  .l-mrt-main .swiper-button-prev::before, .l-mrt-main .swiper-button-prev::after, .l-mrt-main .swiper-button-next::before, .l-mrt-main .swiper-button-next::after {
    width: 4.2666666667vw;
  }
}
.l-mrt-main .swiper-button-prev::before, .l-mrt-main .swiper-button-next::before {
  transform: rotate(-45deg);
}
.l-mrt-main .swiper-button-prev::after, .l-mrt-main .swiper-button-next::after {
  transform: rotate(45deg);
}
.l-mrt-main .swiper-button-prev:hover, .l-mrt-main .swiper-button-next:hover {
  background-color: #E05E0E;
}
@media screen and (max-width: 750px) {
  .l-mrt-main .swiper-button-prev:hover, .l-mrt-main .swiper-button-next:hover {
    background: unset;
  }
}
.l-mrt-main .swiper-button-prev:hover::before, .l-mrt-main .swiper-button-prev:hover::after, .l-mrt-main .swiper-button-next:hover::before, .l-mrt-main .swiper-button-next:hover::after {
  background-color: #fff;
}
@media screen and (max-width: 750px) {
  .l-mrt-main .swiper-button-prev:hover::before, .l-mrt-main .swiper-button-prev:hover::after, .l-mrt-main .swiper-button-next:hover::before, .l-mrt-main .swiper-button-next:hover::after {
    background-color: #E05E0E;
  }
}
.l-mrt-main .swiper-button-prev::before, .l-mrt-main .swiper-button-prev::after {
  right: 35%;
  transform-origin: left;
}
@media screen and (max-width: 750px) {
  .l-mrt-main .swiper-button-prev::before, .l-mrt-main .swiper-button-prev::after {
    right: 23%;
  }
}
.l-mrt-main .swiper-button-next::before, .l-mrt-main .swiper-button-next::after {
  left: 35%;
  transform-origin: right;
}
@media screen and (max-width: 750px) {
  .l-mrt-main .swiper-button-next::before, .l-mrt-main .swiper-button-next::after {
    left: 23%;
  }
}

/* ----------------------------------------------------------------
button
----------------------------------------------------------------- */
.l-mrt-main .followButton {
  width: min(9.0775988287vw, 124px);
  position: fixed;
  right: 23px;
  bottom: 50px;
  z-index: 10;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
  will-change: transform;
  filter: drop-shadow(3px 3px 8px rgba(0, 0, 0, 0.22));
}
@media screen and (max-width: 750px) {
  .l-mrt-main .followButton {
    width: 24.5333333333vw;
    right: 4vw;
    bottom: 10.6666666667vw;
  }
}
.l-mrt-main .followButton.is-active {
  opacity: 1;
  pointer-events: auto;
}
.l-mrt-main .followButton.is-active:hover {
  transform: scale(1.2);
  transition: 0.4s ease;
  opacity: 0.7;
}

/* ----------------------------------------------------------------
modal
----------------------------------------------------------------- */
.l-mrt-main .modalBtn {
  cursor: pointer;
}
.l-mrt-main .movieModal {
  display: none;
  position: fixed;
  z-index: 1000;
  top: 0;
  width: 100%;
  height: 100%;
}
.l-mrt-main .movieModal__bg {
  position: absolute;
  width: 100%;
  height: 100%;
  background-image: url("https://kao-h.assetsadobe3.com/is/image/content/dam/sites/kao/www-kao-co-jp/merit/osolo/images/bg_video_pc.png?fmt=png-alpha&wid=2732");
  background-position: left top;
  background-size: cover;
  background-repeat: no-repeat;
}
@media screen and (max-width: 750px) {
  .l-mrt-main .movieModal__bg {
    background-image: url("https://kao-h.assetsadobe3.com/is/image/content/dam/sites/kao/www-kao-co-jp/merit/osolo/images/bg_video_sp.png?fmt=png-alpha&wid=750");
  }
}
.l-mrt-main .movieModal--open {
  display: block;
}
.l-mrt-main .movieModal__inner {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  width: min(52.7086383602vw, 720px);
  height: fit-content;
}
@media screen and (max-width: 750px) {
  .l-mrt-main .movieModal__inner {
    width: 100%;
  }
}
.l-mrt-main .movieModal__close {
  cursor: pointer;
  position: absolute;
  z-index: 1;
  top: max(-3.4407027818vw, -47px);
  left: 50%;
  transform: translateX(-50%);
  width: min(5.6368960469vw, 77px);
  height: min(2.0497803807vw, 28px);
  background-image: url("https://kao-h.assetsadobe3.com/is/image/content/dam/sites/kao/www-kao-co-jp/merit/osolo/images/btn_modal_close.png?fmt=png-alpha&wid=142");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}
@media screen and (max-width: 750px) {
  .l-mrt-main .movieModal__close {
    top: -44vw;
    width: 18.9333333333vw;
    height: 7.2vw;
  }
}
.l-mrt-main .movieModal__movie {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
}
.l-mrt-main .movieModal__movie iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* ----------------------------------------------------------------
kohaku-header
----------------------------------------------------------------- */
.kohaku-header {
  position: absolute;
  width: 100%;
  z-index: 99;
  transition: background-color 0.5s;
}
.kohaku-header.is-fixed {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
}
.kohaku-header__inner {
  position: relative;
  display: flex;
  justify-content: space-between;
  padding: min(1.4641288433vw, 20px) min(4.0263543192vw, 55px);
}
@media screen and (max-width: 750px) {
  .kohaku-header__inner {
    padding: 4.8vw 4.5333333333vw;
  }
}
.kohaku-header__logo {
  width: min(10.0292825769vw, 137px);
}
@media screen and (max-width: 750px) {
  .kohaku-header__logo {
    width: 21.3333333333vw;
    position: relative;
    z-index: 20;
  }
}
.kohaku-header .hamburgerBtn {
  display: none;
}
@media screen and (max-width: 750px) {
  .kohaku-header .hamburgerBtn {
    position: absolute;
    display: block;
    z-index: 20;
    cursor: pointer;
    width: 9.3333333333vw;
    height: 8.8vw;
    top: 4.8vw;
    right: 4.5333333333vw;
  }
  .kohaku-header .hamburgerBtn picture:nth-child(2) {
    display: none;
  }
  .kohaku-header .hamburgerBtn.is-active {
    position: fixed;
    z-index: 2000;
  }
  .kohaku-header .hamburgerBtn.is-active picture:nth-child(1) {
    display: none;
  }
  .kohaku-header .hamburgerBtn.is-active picture:nth-child(2) {
    display: block;
  }
}
.kohaku-header .gMenu {
  position: relative;
}
@media screen and (max-width: 750px) {
  .kohaku-header .gMenu {
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    right: 0;
    margin: auto;
    background-image: url("https://kao-h.assetsadobe3.com/is/image/content/dam/sites/kao/www-kao-co-jp/merit/osolo/images/bg_menu.png?fmt=png-alpha&wid=750");
    background-position: left top;
    background-size: cover;
    background-repeat: no-repeat;
    text-align: center;
    display: none;
    width: 100%;
    height: 100vh;
    height: 100dvh;
    overflow-y: auto;
    flex-direction: column;
    justify-content: flex-start;
    padding: 5.3333333333vw 8vw;
  }
  .kohaku-header .gMenu.is-active {
    display: flex;
  }
}
.kohaku-header .gMenu ul {
  display: flex;
}
.kohaku-header .gMenu ul:first-child {
  gap: min(1.4641288433vw, 20px);
}
@media screen and (max-width: 750px) {
  .kohaku-header .gMenu ul:first-child {
    flex-direction: column;
    margin-bottom: 6.9333333333vw;
    gap: 7.2vw;
  }
}
.kohaku-header .gMenu ul:first-child li:first-child {
  width: min(2.4890190337vw, 34px);
}
@media screen and (max-width: 750px) {
  .kohaku-header .gMenu ul:first-child li:first-child {
    width: 15.7333333333vw;
  }
}
.kohaku-header .gMenu ul:first-child li:nth-child(2) {
  width: min(6.2957540264vw, 86px);
}
@media screen and (max-width: 750px) {
  .kohaku-header .gMenu ul:first-child li:nth-child(2) {
    width: 39.2vw;
  }
}
.kohaku-header .gMenu ul:first-child li:nth-child(3) {
  width: min(5.8565153734vw, 80px);
}
.kohaku-header .gMenu ul:first-child li:nth-child(3) picture img {
  vertical-align: unset;
}
@media screen and (max-width: 750px) {
  .kohaku-header .gMenu ul:first-child li:nth-child(3) {
    width: 36.5333333333vw;
  }
}
.kohaku-header .gMenu ul:first-child li:nth-child(4) {
  width: min(8.78477306vw, 120px);
}
@media screen and (max-width: 750px) {
  .kohaku-header .gMenu ul:first-child li:nth-child(4) {
    width: 56vw;
  }
}
.kohaku-header .gMenu ul:first-child li:nth-child(5) {
  width: min(3.8799414348vw, 53px);
}
@media screen and (max-width: 750px) {
  .kohaku-header .gMenu ul:first-child li:nth-child(5) {
    width: 23.7333333333vw;
  }
}
.kohaku-header .gMenu ul:first-child li:nth-child(6) {
  width: min(9.3704245974vw, 128px);
}
@media screen and (max-width: 750px) {
  .kohaku-header .gMenu ul:first-child li:nth-child(6) {
    width: 58.4vw;
  }
}
.kohaku-header .gMenu ul:first-child li a {
  display: block;
  color: #fff;
  text-align: left;
  font-size: min(1.317715959vw, 18px);
}
@media screen and (max-width: 750px) {
  .kohaku-header .gMenu ul:first-child li a {
    font-size: 7.4666666667vw;
  }
}
.kohaku-header .gMenu ul:first-child li a picture {
  position: relative;
}
.kohaku-header .gMenu ul:first-child li a picture::before {
  content: "";
  display: block;
  position: absolute;
  bottom: max(-0.3660322108vw, -5px);
  left: 50%;
  width: 0;
  height: min(0.1464128843vw, 2px);
  background: #fff;
  transition: all 0.3s ease;
  transform: translateX(-50%);
}
@media screen and (max-width: 750px) {
  .kohaku-header .gMenu ul:first-child li a picture::before {
    display: none;
  }
}
.kohaku-header .gMenu ul:first-child li a:hover picture::before {
  width: 100%;
}
.kohaku-header .gMenu ul:nth-child(2) {
  gap: 7.2vw;
  display: none;
}
@media screen and (max-width: 750px) {
  .kohaku-header .gMenu ul:nth-child(2) {
    display: flex;
    margin-bottom: 8vw;
  }
}
.kohaku-header .gMenu ul:nth-child(2) li:first-child {
  width: 6.9333333333vw;
}
.kohaku-header .gMenu ul:nth-child(2) li:last-child {
  width: 7.2vw;
}
.kohaku-header .gMenu p:nth-child(3) {
  width: 53.0666666667vw;
  margin: 0 auto 10.1333333333vw;
}
@media screen and (max-width: 750px) {
  .kohaku-header .gMenu p small {
    font-size: 2.4vw;
  }
}
.kohaku-header .is-active + .gMenu {
  display: flex;
  z-index: 1000;
}

/* ----------------------------------------------------------------
kohaku-kv
----------------------------------------------------------------- */
.kohaku-kv {
  position: relative;
  z-index: 1;
}
.kohaku-kv__movie {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 53.0882352941vw;
  overflow: hidden;
}
@media screen and (max-width: 750px) {
  .kohaku-kv__movie {
    height: 165.3333333333vw;
  }
}
.kohaku-kv__movie video {
  position: absolute;
  z-index: 1;
  top: 50%;
  left: 50%;
  display: block;
  width: 100%;
  height: auto;
  min-width: 100%;
  min-height: 100%;
  transform: translate(-50%, -50%);
}
.kohaku-kv__movie .video-js .vjs-tech {
  position: absolute;
  z-index: 1;
  top: 50%;
  left: 50%;
  display: block;
  width: 100%;
  height: auto;
  min-width: 100%;
  min-height: 100%;
  transform: translate(-50%, -50%);
}
.kohaku-kv__movie .pcD {
  display: block !important;
}
@media screen and (max-width: 750px) {
  .kohaku-kv__movie .pcD {
    display: none !important;
  }
}
.kohaku-kv__movie .spD {
  display: none !important;
}
@media screen and (max-width: 750px) {
  .kohaku-kv__movie .spD {
    display: block !important;
  }
}
.kohaku-kv__movie .modalBtn {
  position: absolute;
  z-index: 1;
  width: min(7.3206442167vw, 100px);
  height: min(7.3206442167vw, 100px);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
@media screen and (max-width: 750px) {
  .kohaku-kv__movie .modalBtn {
    width: 16vw;
    height: 16vw;
    margin: auto;
  }
}
.kohaku-kv__movie .modalBtn::before {
  position: absolute;
  z-index: 1;
  content: "";
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 1px solid #fff;
  border-radius: 50%;
  transition: all 0.3s;
}
.kohaku-kv__movie .modalBtn:hover::before {
  transform: scale(1.1);
}
.kohaku-kv__movie .modalBtn picture {
  display: block;
  position: absolute;
  z-index: 1;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width: min(3.074670571vw, 42px);
  height: fit-content;
  margin: auto;
}
@media screen and (max-width: 750px) {
  .kohaku-kv__movie .modalBtn picture {
    width: 6.9333333333vw;
  }
}
.kohaku-kv__movie .movieBtn {
  position: absolute;
  z-index: 1;
  width: min(4.5387994143vw, 62px);
  bottom: min(7.3206442167vw, 100px);
  right: min(3.8067349927vw, 40px);
}
@media screen and (max-width: 750px) {
  .kohaku-kv__movie .movieBtn {
    width: 16vw;
    bottom: 10.6666666667vw;
    right: 5.3333333333vw;
  }
}
.kohaku-kv__movie .movieBtn:hover {
  opacity: 0.5;
}
@media screen and (max-width: 750px) {
  .kohaku-kv__movie .movieBtn:hover {
    opacity: unset;
  }
}
.kohaku-kv__movie .movieBtn img {
  display: none;
}
.kohaku-kv__movie .movieBtn img.active {
  display: block;
}

.wave-sep {
  position: absolute;
  left: 0;
  right: 0;
  line-height: 0;
  height: clamp(60px, 8vw, 140px); /* 画面に応じて優しく可変 */
  pointer-events: none;
  z-index: 1; /* セクション背景より上に載せる */
}

.wave-bottom { bottom: -1px; } /* 継ぎ目のスキマを消すため -1px */

 /* もし上側に波を置きたい時は */
.wave-top    { top: -1px; transform: scaleY(-1); }


/* ----------------------------------------------------------------
kohaku-concept
----------------------------------------------------------------- */
.kohaku-concept {
  z-index: 2;
  background-color: #306dd0;
  height: min(68.6676427526vw, 938px);
  white-space: nowrap;

}

.ohaku-concept::before {
  content: "";
  position: absolute;
  top: -30px;
  left: 0;
  width: 100%;
  height: 60px;
  background: linear-gradient(to bottom, rgba(48,109,208,1) 0%, rgba(48,109,208,0) 100%);
  pointer-events: none;
}
@media screen and (max-width: 750px) {
  .kohaku-concept {
    background-image: url("https://kao-h.assetsadobe3.com/is/image/content/dam/sites/kao/www-kao-co-jp/merit/osolo/images/bg_concept_sp.png?fmt=png-alpha&wid=750");
    height: 158.6666666667vw;
    padding-top: 25.3333333333vw;
  }
}
.kohaku-concept__inner {
  position: relative;
}
@media screen and (max-width: 750px) {
  .kohaku-concept__inner {
    padding: 0;
  }
}
.kohaku-concept__inner .obj:nth-of-type(1) {
  width: min(39.0922401171vw, 534px);
  top: max(-4.6852122987vw, -64px);
  right: max(-27.0863836018vw, -370px);
}
@media screen and (max-width: 750px) {
  .kohaku-concept__inner .obj:nth-of-type(1) {
    width: 50.6666666667vw;
    top: -18.1333333333vw;
    right: -36.2666666667vw;
  }
}
.kohaku-concept__inner .obj:nth-of-type(2) {
  width: min(36.8960468521vw, 504px);
  top: min(17.8623718887vw, 244px);
  left: max(-22.5475841874vw, -308px);
}
@media screen and (max-width: 750px) {
  .kohaku-concept__inner .obj:nth-of-type(2) {
    width: 56.8vw;
    top: 85.6vw;
    left: -40vw;
    z-index: 0;
  }
}
.kohaku-concept__inner p {
  font-size: min(1.6105417277vw, 22px);
  margin-bottom: min(2.4890190337vw, 34px);
  line-height: 1.7727272727;
  text-align: center;
}
@media screen and (max-width: 750px) {
  .kohaku-concept__inner p {
    font-size: 4vw;
    margin-bottom: 5.8666666667vw;
  }
}
.kohaku-concept__inner p:nth-child(3) {
  margin-bottom: min(5.3440702782vw, 73px);
}
@media screen and (max-width: 750px) {
  .kohaku-concept__inner p:nth-child(3) {
    margin-bottom: 8.5333333333vw;
  }
}
.kohaku-concept__inner p:last-child {
  width: min(22.8404099561vw, 312px);
  margin: 0 auto;
}
@media screen and (max-width: 750px) {
  .kohaku-concept__inner p:last-child {
    width: 48.2666666667vw;
  }
}
.kohaku-concept__ttl {
  width: min(13.9824304539vw, 191px);
}
@media screen and (max-width: 750px) {
  .kohaku-concept__ttl {
    width: 31.2vw;
  }
}
.kohaku-concept__note {
  font-size: min(1.0980966325vw, 15px);
  position: absolute;
  right: min(3.953147877vw, 54px);
}
@media screen and (max-width: 750px) {
  .kohaku-concept__note {
    font-size: 3.7333333333vw;
    right: 2.6666666667vw;
  }
}
.obj {
    position: absolute;
    z-index: 2;
    transform-style: preserve-3d;
    will-change: transform;
    transition: all 0.5s;
}

 img {
    width: 100%;
    height: auto;
    vertical-align: bottom;
}