@charset "UTF-8";
/* ==========================================================
   瑞花 追加CSS（ローディング＋オンラインショップボタンD案）
   ※ add.css の後に読み込む
   ========================================================== */

/* ---------- 既存の #loading は使わない（白い幕が後から出るのを防ぐ） ---------- */
/* 新しいローディングがあるページだけ既存の #loading を隠す（concept.html などはそのまま） */
body:has(#zk-loader) #loading{display:none !important}

/* ---------- ローディング ---------- */
.zk-loader{
  --zk-navy:#204068;
  --zk-paper:#f4f2ee;
  position:fixed; inset:0; z-index:100000; /* ヘッダー(9999)より上 */
  display:grid; place-items:center;
  background:var(--zk-paper) url("../images/common/back_texture@2x.png") repeat;
  transition:clip-path 1.1s cubic-bezier(.77,0,.18,1), visibility 0s 1.1s;
  clip-path:inset(0 0 0 0);
}
.zk-loader__inner{display:flex; align-items:center; gap:clamp(32px,5.5vw,64px)}
/* マーク：判子を押すように＋墨がにじむように */
.zk-loader__mark{
  width:clamp(144px,26.4vw,216px); aspect-ratio:1;
  opacity:0;
  clip-path:circle(0% at 50% 50%);
  filter:blur(4px);
  transform:scale(1.04) rotate(-4deg);
  animation:zk-stamp 1.85s cubic-bezier(.3,0,.15,1) .2s forwards,
            zk-float 6s ease-in-out 2.1s infinite;
}
.zk-loader__mark img{width:100%; height:100%; display:block}
/* ロゴ：縦書きを筆で上から書くように */
.zk-loader__logo{
  width:clamp(36px,5vw,48px);
  clip-path:inset(0 0 100% 0);
  animation:zk-write 1.1s cubic-bezier(.65,0,.35,1) .9s forwards;
}
.zk-loader__logo img{width:100%; display:block}

@keyframes zk-stamp{
  0%  {opacity:0; clip-path:circle(0% at 50% 50%); filter:blur(4px); transform:scale(1.04) rotate(-4deg)}
  50% {opacity:1}
  100%{opacity:1; clip-path:circle(75% at 50% 50%); filter:blur(0); transform:scale(1) rotate(0)}
}
@keyframes zk-float{0%,100%{translate:0 0} 50%{translate:0 -2px}}
@keyframes zk-write{to{clip-path:inset(0 0 0 0)}}

/* 退場：和紙をめくるように上へ */
.zk-loader.is-done{clip-path:inset(0 0 100% 0); visibility:hidden}
.zk-loader.is-done .zk-loader__inner{
  transition:opacity .5s, transform .9s cubic-bezier(.77,0,.18,1);
  opacity:0; transform:translateY(-24px);
}
/* ローディング中のスクロール止めは JS（zuika-loader.js）で行う
   ※ overflow:hidden にするとスクロールバーが消えて、幕が上がるときに画面が横にズレるため */

@media (prefers-reduced-motion: reduce){
  .zk-loader, .zk-loader *{animation:none !important; transition:opacity .4s !important}
  .zk-loader__mark, .zk-loader__logo{opacity:1; clip-path:none; filter:none; transform:none}
  .zk-loader.is-done{clip-path:none; opacity:0}
}

/* ---------- オンラインショップボタン（D案：紺塗り＋カート） ----------
   対象：ヘッダー(.header_online)／メニュー内・大ボタン(.round_border_btn--large)
   商品紹介内の小さいボタン(.product_info__btn)は現状のまま
   ------------------------------------------------------------------ */
header a.round_border_btn.header_online,
a.round_border_btn.round_border_btn--large{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.75em;
  font-family:"Shippori Mincho", "Yu Mincho", YuMincho, "Hiragino Mincho ProN", serif;
  font-weight:500;
  line-height:1;
  background-color:#204068;
  border-color:#204068;
  color:#fff;
  transition:background-color .4s, border-color .4s;
}
/* カートアイコン */
header a.round_border_btn.header_online::before,
a.round_border_btn.round_border_btn--large::before{
  content:"";
  flex:none;
  display:block;
  width:1.2em; height:1.2em;
  margin:0;
  position:static;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 4h2.6l2.3 10.6a1.6 1.6 0 0 0 1.6 1.3h8.3a1.6 1.6 0 0 0 1.6-1.2L21 8H6.2'/%3E%3Ccircle cx='9.6' cy='19.6' r='1.2'/%3E%3Ccircle cx='17.2' cy='19.6' r='1.2'/%3E%3C/svg%3E") center/contain no-repeat;
  transition:transform .5s cubic-bezier(.22,1,.36,1);
}
/* 右上矢印：白・位置を文字の中心に揃える */
header a.round_border_btn.header_online::after,
a.round_border_btn.round_border_btn--large::after{
  flex:none;
  display:block;
  position:static;
  margin:0 0 0 .2em;
  width:.7em; height:.7em;
  transform:none;
  filter:brightness(0) invert(1);
  opacity:.85;
  transition:transform .4s;
}
/* メニュー内のボタン：少し小さく、中央に */
a.round_border_btn.round_border_btn--large{
  width:auto;
  max-width:none;
  font-size:1.05em;
  letter-spacing:.14em;
  padding:1.05em 2.2em;
  margin-left:auto;
  margin-right:auto;
}
.main_nav li:has(> a.round_border_btn--large){text-align:center}
@media screen and (max-width:550px){
  a.round_border_btn.round_border_btn--large{font-size:.95em; padding:1em 1.8em}
}
@media (hover:hover){
  header a.round_border_btn.header_online:hover,
  a.round_border_btn.round_border_btn--large:hover{
    background-color:#18324f;
    border-color:#18324f;
    color:#fff;
  }
  header a.round_border_btn.header_online:hover::before,
  a.round_border_btn.round_border_btn--large:hover::before{transform:translateX(3px)}
  header a.round_border_btn.header_online:hover::after,
  a.round_border_btn.round_border_btn--large:hover::after{transform:translate(2px,-2px)}
}

/* ---------- VIEW MORE ボタン（紺塗り＋白矢印） ---------- */
a.round_border_btn.round_border_btn--arrow_right{
  background-color:#204068;
  border-color:#204068;
  color:#fff;
  transition:background-color .4s, border-color .4s;
}
a.round_border_btn.round_border_btn--arrow_right::after{
  filter:brightness(0) invert(1);
  transition:transform .4s cubic-bezier(.22,1,.36,1);
}
@media (hover:hover){
  a.round_border_btn.round_border_btn--arrow_right:hover{background-color:#18324f; border-color:#18324f; color:#fff}
  a.round_border_btn.round_border_btn--arrow_right:hover::after{transform:translateX(4px)}
}

/* ---------- スライダーの前後ボタン（紺の円＋白矢印） ----------
   prev は既存CSSで180°回転しているため、右向き矢印1枚で両方に対応 */
.splide__arrow{
  background:#204068 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 60'%3E%3Cpath d='M22 30h16M32 24l6 6-6 6' fill='none' stroke='%23fff' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/100% auto no-repeat !important;
  border-radius:50%;
  transition:background-color .4s, opacity .4s;
}
@media (hover:hover){
  .splide__arrow:hover{background-color:#18324f !important}
}

/* ---------- 下部バナー「オンラインショップ」（カートアイコン追加・書体は元のまま） ---------- */
.img_link__ttl{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:.45em;
  white-space:nowrap;
}
.img_link__ttl::before{
  content:"";
  flex:none;
  width:1em; height:1em;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 4h2.6l2.3 10.6a1.6 1.6 0 0 0 1.6 1.3h8.3a1.6 1.6 0 0 0 1.6-1.2L21 8H6.2'/%3E%3Ccircle cx='9.6' cy='19.6' r='1.2'/%3E%3Ccircle cx='17.2' cy='19.6' r='1.2'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* ---------- ファーストビューのキャッチ（SP） ----------
   .vertical_ttl span は white-space:pre のため、HTMLの改行やインデントがそのまま表示されてしまう。
   SPでは空白・改行を無視し、<br class="show_sp"> の改行だけを効かせたうえで、
   行の間隔と2行目の下げ位置をCSSで指定する（HTMLの書き方に左右されない） */
@media screen and (max-width:550px){
  .vertical_ttl .first_view_ttl__txt{
    white-space:nowrap;
    line-height:2.8;      /* 行の間隔（数値を小さくすると列が寄る／元の見え方は3.4） */
    padding-top:5.65em;   /* 2行目の下げ幅 */
    text-indent:-5.65em;  /* 1行目は上端から */
  }
}