@media (max-width: 767px) {
       .headline .copy { 
        padding-bottom: 8px;
        }
}

.hacobune-univideo {
  display: block;
  margin: 0 auto;
}

.hacobune-app-container {
  padding: 0 !important;
  border-radius: 6px;
}

.hacobune-unit-video-outline {
  display: none;
}

@media (max-width: 767px) {
    .hacobune-unit-video[data-v-2a6c6f09] {
        margin: 0!important;
    }
}

@media (max-width: 767px) {
    .block-page-freespace--caption .feature-kv .headline .tags {
    	padding-bottom: 24px!important;
    }
}

.joc h2 {
    font-size: 34px!important; 
    text-align: center;
    border: none!important;
}

.joc h3 {
    border-left: solid 5px;
    padding: 5px 0 3px 15px!important;
}


/* Visumo埋め込みの内側もはみ出さないように */
.media-pair .hacobune-univideo iframe,
.media-pair .hacobune-univideo .hacobune-container {
  width: 100%!important;
  display: block;
}

@media (max-width: 767px) {
	.hacobune-app-container {
	    width: 100% !important;
	    margin: 0 auto;
	    padding: 20px 0 10px;
	}
}
@media (min-width: 768px) {
	.media-pair {
	  display: grid !important;
	  grid-template-columns: 1fr 1fr !important; /* SPでもPCでも左右2カラム */
	  gap: 20px !important;
	  align-items: start !important;
	}

	/* ---- 画像ペアをSPでも常に左右2カラムにしたい場合のモディファイア ---- */
	.media-pair.--always-row {
	  grid-template-columns: 1fr 1fr;    /* すべての画面幅で左右配置 */
	}

	/* 右側(.R)を少し下げる（段差）。どのブレークポイントでも効かせたい時はこちらを使用 */
	.media-pair.--always-row > .R {
	  margin-top: var(--pair-offset);
	}
}
@media (max-width: 767px) {
	.media-pair.--always-row .L {
	    width: 80%;
    	text-align: left;
    	margin-bottom: 20px;
	}
	.media-pair.--always-row .R {
    	display: flex;
    	justify-content: flex-end;
	}
	.media-pair.--always-row .R img{
    	display: flex;
		width: 80%;
	}
}

/* ---- PC時に左右2カラムにする（動画ペアなどSPは縦積みでOKな場合） ---- */
@media (min-width: 768px) {
  .media-pair {
    grid-template-columns: 1fr 1fr;  /* PCで左右 */
    gap: 0 28px;                      /* PCは横だけ広め、縦は0 */
  }
  .media-pair > .R {
    margin-top: var(--pair-offset);   /* PCでだけ右側を下げる */
  }
}

/* 既存スタイルの補助（ご提示の方針に合わせて） */
.hacobune-app-container {
  padding: 0 !important;
  border-radius: 6px;
}

/* 1点：単体表示で「幅50%＋中央寄せ」にしたい“単発の動画”はこのユーティリティを使う */
@media (min-width: 768px) {
    .hacobune-univideo.center-75 {
      width: 75%;
      margin: 0 auto;
      display: block;
    }
}

    .ys-center {
      margin: 0 auto;
      display: block;
    }

/* 親幅依存の2カラム（SPは縦積み） */
.hb-gallery{
  width:100%;
  display:grid;
  grid-template-columns:1fr;   /* SP */
  gap:16px;
}
@media (min-width:768px){
  .hb-gallery{
    grid-template-columns:minmax(0,1fr) minmax(0,1fr); /* PCで左右 */
    align-items:stretch;
  }
}
/* オーバーフロー対策（画像や動画がはみ出さない） */
.hb-gallery > .hb-L,
.hb-gallery > .hb-R{ min-width:0; }

/* --- 左：縦動画（4/5） --- */
.hb-gallery .hb-L{ display:flex; }
.hb-gallery .hacobune-univideo{
  position:relative;
  width:100%;
  aspect-ratio:4 / 5;     /* ← ここが基準。4/5 に修正 */
  border-radius:6px;
  overflow:hidden;
}
/* Visumoの内側を“容器いっぱい”に拡げる */
.hb-gallery .hacobune-univideo .hacobune-container{
  position:absolute; inset:0;
  width:100% !important; height:100% !important;
  display:block;
}
.hb-gallery .hacobune-univideo iframe,
.hb-gallery .hacobune-univideo video{
  width:100% !important; height:100% !important;
  object-fit:cover; display:block;
}

/* --- 右：画像コラム（高さは左に同期） --- */
.hb-gallery .hb-R{
  display:flex;             /* ← “縦のFlex”で等分する */
  flex-direction:column;
  gap:8px;
  height:auto;              /* SPは自動のまま */
}
/* ===== レイアウト制御（比率 62.5% / 37.5%） ===== */
@media (min-width:768px){
  /* PCでは .hb-gallery を左右2カラムのFlexに */
  .hb-gallery{
    display:flex;
    align-items:stretch;    /* 左右の高さを揃える */
    column-gap:16px;        /* お好みで余白 */
  }

  /* 左：62.5% */
  .hb-gallery .hb-L{
    flex:0 0 62.5%;
    min-width:0;            /* はみ出し防止 */
  }

  /* 右：37.5%（左と同じ高さに） */
  .hb-gallery .hb-R{
    flex:0 0 37.5%;
    min-width:0;            /* はみ出し防止 */
  }
}

/* 右側の直下子要素（pでもdivでもimgでも）を“等分枠”にする */
.hb-gallery .hb-R > *{
  flex:1 1 0;               /* 枠を均等に分配（2枚でも3枚でもOK） */
  min-height:0;             /* はみ出し防止 */
  display:flex;             /* 中のimgをフィットさせるため */
  margin:0;                 /* <p> のデフォルト余白を無効化 */
}

/* 画像を枠いっぱいにフィット（トリミング前提） */
.hb-gallery .hb-R > * > img,
.hb-gallery .hb-R > img{
  width:100%;
  height:100% !important;   /* ← 枠の高さにピッタリ合わせる */
  object-fit:cover;
  display:block;
  border-radius:6px;

  /* 既存テーマの imgグローバル指定（max-width:380px など）を無効化 */
  max-width:none !important;
  margin:0 !important;
}

/* SPでは自然な流し込み（高さ固定を解除） */
@media (max-width:767.98px){
  .hb-gallery .hb-R > *{ flex:initial; }
  .hb-gallery .hb-R > * > img,
  .hb-gallery .hb-R > img{ height:auto !important; }
}

div.ys-center iframe {
    margin: 0 auto;
    display: block;
    border-radius: 6px;
}