/* ==========================================================
   COMPONENTS（UIパーツ）
========================================================== */

/* ↓ボタン系↓ */

/* リンクボタン変更 */
.wp-block-button__link {
  color: #766e64 !important;
  background-color: transparent !important;
  border: 2px solid #766e64 !important;
  padding: 0.6em 1.2em;
  transition: all 0.3s ease;
  text-decoration: none;
  display: inline-block;
  border-radius: 5px; /* 角を少し丸くすると柔らかく見えます */
	font-family: "Gill Sans", "Gill Sans MT", Calibri, sans-serif;
}

/* ホバー時 */
.wp-block-button__link:hover,
.wp-block-button__link:focus-visible {
  background-color: #6c6155 !important;
  color: #f4f1ed !important;
  border-color: #6c6155 !important;
}

/* クリック時 */
.wp-block-button__link:active {
  background-color: #3f3f3f !important;
  border-color: #3f3f3f !important;
  color: #f4f1ed !important;
}


/* ボタンブロックの幅をテキストの幅に合わせるように設定 */

/* ===== Gutenbergボタンを“テキスト幅”に（全ページ） ===== */
/* 本文領域の代表クラスをまとめてスコープ。テーマにより片方だけでOK */
:where(.post_content, .p-entry__body, .entry-content) 
  .wp-block-buttons:not(.is-vertical) > .wp-block-button {
  flex: 0 0 auto !important;   /* 伸びない */
  width: auto !important;      /* 100%幅を打ち消し */
}

/* a要素（実ボタン）の幅を内容幅に。アウトラインも含めて統一 */
:where(.post_content, .p-entry__body, .entry-content) 
  .wp-block-button__link {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: auto !important;      /* 枠が横に伸びない */
  min-width: 0 !important;
  white-space: nowrap;         /* 1行で収める（改行させたい場合は normal に） */
  padding: .55em 14px !important;       /* 余白はお好みで */
  box-sizing: border-box;
}

/* アウトラインスタイルも同様に“内容幅”に固定 */
:where(.post_content, .p-entry__body, .entry-content) 
  .wp-block-button.is-style-outline .wp-block-button__link {
  width: auto !important;
}



/* =========================================
   SWELL ボタン：btn-border（例外化・統一版）
   - btn-border を付けたボタンだけ、SWELLの輪郭/背景（hover/focus含む）を無効化
   - 線はラッパー（.wp-block-button.btn-border）にだけ描画
   - 上線：現状どおり
   - 下線：ホバー時だけ逆（左→右へ短くなる）
   - 線色：#766e64 のまま
========================================= */

/* 0) btn-border を付けたボタンブロック（外側）だけ対象 */
.wp-block-button.btn-border{
  position: relative;
  display: inline-block;
  vertical-align: top;
}


/* 1) btn-border を付けたボタンブロック（内側）対象
 *    線とテキストのレイアウト設定
 * 	  btn-border のときだけ SWELLの「輪郭/背景/影」を強制的に無効化
 *    ※ is-style-outline 等が付いていても“当てさせない” */
.wp-block-button.btn-border .wp-block-button__link{
  width: auto !important;
  max-width: 100%;
  display: block !important;
  position: relative;

/* ↓SWELLのデザインリセット↓ */
  border: none !important;
  border-radius: 0 !important;
  outline: none !important;				/* SWELLが輪郭っぽく見せる要素をまとめて無効化 */
  box-shadow: none !important;
  background: transparent !important;	/* SWELLのoutline系ボタンは hover で背景が入ることがあるので透明固定 */
  text-decoration: none !important;  	/* 下線などを消して見た目を安定 */

  text-align: center;
  line-height: 1.4;
  box-sizing: border-box;
  white-space: normal !important;     /* 複数行OK */
  word-break: break-word;
}


/* SWELL outline完全無効（btn-border限定 最強） */
.wp-block-button.btn-border.is-style-outline .wp-block-button__link,
.wp-block-button.btn-border[class*="is-style-outline"] .wp-block-button__link{
  border: none !important;
  border-style: none !important;
}


/* 2) btn-border のときだけ hover / focus / active / focus-visible も無効化 */
.wp-block-button.btn-border .wp-block-button__link:hover,
.wp-block-button.btn-border .wp-block-button__link:focus,
.wp-block-button.btn-border .wp-block-button__link:active,
.wp-block-button.btn-border .wp-block-button__link:focus-visible{
  border: none !important;
  background: transparent !important;
  outline: none !important;
  box-shadow: none !important;
}

/* 3) 上下ライン（ラッパーに描画） */
.wp-block-button.btn-border::before,
.wp-block-button.btn-border::after{
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;

  background: #766e64 !important; /* ←カラー指定はそのまま */
  pointer-events: none;
  z-index: 2;

  transform: scaleX(1);
  transition: transform .3s;
}

/* 上ライン（現状維持） */
.wp-block-button.btn-border::before{
  top: 0;
  transform-origin: left;
}

/* 下ライン（ホバー時だけ逆方向に縮む） */
.wp-block-button.btn-border::after{
  bottom: 0;
  transform-origin: right; /* ★左→右へ短く見える */
}

/* 4) hoverで線を消す */
.wp-block-button.btn-border:hover::before{
  transform: scaleX(0);
}
.wp-block-button.btn-border:hover::after{
  transform: scaleX(0);
}

/* 5) 旧CSS（a.btn-border側の擬似要素）を無効化して競合を防ぐ */
.wp-block-button .wp-block-button__link.btn-border::before,
.wp-block-button .wp-block-button__link.btn-border::after{
  content: none !important;
}


/* =========================================
   btn-border：クリックできる感（右に ">" を追加）
   - ">" 分の余白を確保
   - ">" はリンク内の右端に固定表示
   - 線（ラッパー）はそのまま → ">" まで伸びる
========================================= */

/* 1) リンクに ">" 用のスペースを作る */
.wp-block-button.btn-border .wp-block-button__link{
  padding-right: 1.6em !important; /* ← ">" の分。必要なら増減 */
  cursor: pointer;
}

/* 2) 右側に ">" を表示（リンクの右端に固定） */
.wp-block-button.btn-border .wp-block-button__link::after{
  content: ">";
  position: absolute;
  right: .4em;               /* 右端からの距離 */
  top: 50%;
  transform: translateY(-50%);
  line-height: 1;
  pointer-events: none;      /* クリックの邪魔をしない */
}

/* 3) （任意）ホバーで ">" を少し動かして“押せる感”を強める */
.wp-block-button.btn-border .wp-block-button__link::after{
  transition: transform .6s;
}
.wp-block-button.btn-border:hover .wp-block-button__link::after{
  transform: translate(.35em, -50%); /* 少し右へ */
}



/* ================================================
 * btn-border のボタンだけ文字サイズを用途別に固定 
 * ================================================ */

/* タブレット（1025px >=）：16px */
@media (min-width: 1025px){
  .wp-block-button.btn-border .wp-block-button__link{
    font-size: 16px !important;
  }
}

/* タブレット（768px >= 1024px）：14px */
@media (min-width: 768px) and (max-width: 1024px){
  .wp-block-button.btn-border .wp-block-button__link{
    font-size: 14px !important;
  }
}

/* スマホ（<= 767px）：12px */
@media (max-width: 767px){
  .wp-block-button.btn-border .wp-block-button__link{
    font-size: 13px !important;
  }
}


/* ================================================
 * btn-rp（responsive） のボタンだけ文字サイズを用途別に固定 
 * ================================================ */

/* タブレット（1025px >=）：16px */
@media (min-width: 1025px){
  .wp-block-button.btn-rp .wp-block-button__link{
    font-size: 16px !important;
  }
}

/* タブレット（768px >= 1024px）：14px */
@media (min-width: 768px) and (max-width: 1024px){
  .wp-block-button.btn-rp .wp-block-button__link{
    font-size: 14px !important;
  }
}

/* スマホ（<= 767px）：12px */
@media (max-width: 767px){
  .wp-block-button.btn-rp .wp-block-button__link{
    font-size: 13px !important;
  }
}

/* ボタン系end */




/* ==========================================================
   COMPONENT（UI部品）
========================================================== */

/* video lightbox */
.video-lightbox{
display:inline-flex;
align-items:center;
justify-content:center;
padding:16px 32px;
color: #fff;
text-decoration:none;
transition:all .3s ease;
}
.video-lightbox:hover{transform:translateY(-2px);}
/* 再生時のLightbox背景 */
.goverlay{background:rgba(0,0,0,.85);}
.gvideo-wrapper{max-width:1100px;}
/* モバイル最適 */
@media (max-width:768px){
.gvideo-wrapper{width:95vw;}
}
/* フェードアニメーション */
.gslide-media{animation:videoFade .35s ease;}
@keyframes videoFade{
from{opacity:0;transform:scale(.95);}
to{opacity:1;transform:scale(1);}
}



/* ↓アコーディオン系・キャレット系↓ */

/* ========================================================================
   詳細ブロック：SVG chevron + 回転 + 途中で “じわっと消える” モーション
   ======================================================================== */

.post_content details.wp-block-details > summary{
  position: relative;
  padding-right: 2.2em;
  list-style: none;
}

/* 標準マーカー消し */
.post_content details.wp-block-details > summary::-webkit-details-marker{
  display: none;
}

/* テーマ側が summary::after などで矢印を出している場合に消す */
.post_content details.wp-block-details > summary::after{
  content: none !important;
  display: none !important;
}

/* 自前アイコン（chevron-right.svg） */
.post_content details.wp-block-details > summary::before{
  content: "";
  position: absolute;
  right: 0.8em;
  top: 50%;
  width: 16px;
  height: 16px;

  /* “閉” の基準状態 */
  transform: translateY(-50%) rotate(0deg);
  opacity: 1;

  /* currentColor で着色（マスク方式） */
  background-color: currentColor;

 -webkit-mask-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><path d='M6 9l6 6 6-6' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
/* harigaya バックスラッシュを削除した"dの前の↓ ");の前の "*/
  mask-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><path d='M6 9l6 6 6-6' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;

  pointer-events: none;
}

/* 開く時 */
.post_content details.wp-block-details[open] >summary::before{
	animation: chevronRotateOpen 0.3s cubic-bezier(0.4,0,0.2,1) both;
}

/* 閉じる時 */
.post_content details.wp-block-details:not([open]) > summary::before{
	animation: chevronRotateClose 0.3s cubic-bezier(0.4,0,0.2,1) both;
}


/* =======================================================
 * 共通キャレットモーション（全UI共通）途中じわっと消える
 * ======================================================= */
@keyframes chevronRotateOpen{
	0%		{ transform: translateY(-50%) rotate(0deg); opacity: 1; }
	49%		{ opacity: 0.5; }
	52%		{ opacity: 0.5; }
	100%	{ transform: translateY(-50%) rotate(180deg); opacity: 1; }
}

@keyframes chevronRotateClose{
	0%		{ transform: translateY(-50%) rotate(180deg); opacity: 1; }
	49%		{ opacity: 0.5; }
	52%		{ opacity: 0.5; }
	100%	{ transform: translateY(-50%) rotate(0deg); opacity: 1; }
}

/* アコーディオン系・キャレット系end */

/* ===========================
   custom-details：一列固定 + 擬似矢印
   =========================== */

/* スマホ（〜765.98px） */
@media (max-width: 765.98px) {
  details.wp-block-details.pc-hide.custom-details,
  details.wp-block-details.custom-details {
    display: block !important;
    float: none !important;
    clear: both !important;
    flex-direction: column !important; /* 万一flexが残っても縦並び */
    align-items: stretch !important;
    gap: 0 !important;
  }
  details.wp-block-details.custom-details > summary {
    display: block !important;
    position: relative;
    margin: 0 0 8px 0 !important;
    padding-left: 1.1em;  /* 矢印ぶん */
  }
  details.wp-block-details.custom-details > summary::-webkit-details-marker { display: none; }
  details.wp-block-details.custom-details > summary::marker { content: ""; }
  details.wp-block-details.custom-details > summary::before {
    content: "";
    position: absolute; left: 0; top: 0.55em;
    border: .32em solid transparent; border-left-color: currentColor;
    transition: transform .2s ease;
  }
  details.wp-block-details.custom-details[open] > summary::before { transform: rotate(90deg); }

  details.wp-block-details.custom-details > *:not(summary) {
    display: block !important; float: none !important; clear: both !important;
    margin-left: 0 !important; width: 100% !important; max-width: 100% !important;
  }
  details.wp-block-details.custom-details figure.wp-block-image {
    margin: 0 !important; max-width: 100%;
  }
}

/* タブレット/PC（766px〜） */
@media (min-width: 766px) {
  details.wp-block-details.pc-hide.custom-details,
  details.wp-block-details.custom-details {
    display: block !important;
    float: none !important;
    clear: both !important;
    /* 万一flexが勝っても縦積み */
    flex-direction: column !important;
	 align-items: stretch !important;
	 gap: 0 !important;
  }
	
  details.wp-block-details.custom-details > summary {
    display: block !important;
    position: relative;
    margin: 0 0 10px 0 !important;
    padding-left: 1.2em; /* 矢印ぶん */
  }
	
  details.wp-block-details.custom-details > summary::-webkit-details-marker { display: none; }
  details.wp-block-details.custom-details > summary::marker { content: ""; }
  details.wp-block-details.custom-details > summary::before {
    content: "";
    position: absolute; left: 0; top: 0.55em;
    border: .35em solid transparent; border-left-color: currentColor;
    transition: transform .2s ease;
  }
  details.wp-block-details.custom-details[open] > summary::before { transform: rotate(90deg); }

  details.wp-block-details.custom-details > *:not(summary) {
    display: block !important; float: none !important; clear: both !important;
    margin-left: 0 !important; width: 100% !important; max-width: 100% !important;
  }
  details.wp-block-details.custom-details figure.wp-block-image {
    margin: 0 !important; max-width: 100%;
  }
}