.front-page .landing-hero,
.home .landing-hero {
  width: 100vw;
  max-width: 100%;
/*  margin: 0; 
  padding: 0;*/
  height: 100svh;
  background-size: contain;
  background-position: bottom center;
  background-repeat: no-repeat;
  background-color: #fff;
}
.front-page main,
.home main,
.wp-block-group{
/*  margin-top: 0;!important
  padding-top: 0;!important*/
}
.front-page div.entry-content .alignfull .wp-block-post-content .has-global-padding .is-layout-constrained .wp-block-post-content-is-.layout-constrained,
.home div.entry-content .alignfull .wp-block-post-content .has-global-padding .is-layout-constrained .wp-block-post-content-is-.layout-constrained,
.wp-block-group{
/*  margin-top: 0;!important
	padding-top: 0;!important */
}
/* ======= トップページ専用スコープ ======= */
.front-page .landing-hero, .home .landing-hero {
    --hero-h: 100svh;         /* 例: 78% の画面高。80〜90svhなど好みで */
  height: var(--hero-h);
  background-image: url('https://musehopper.com/wp-content/uploads/2025/09/MH-landing-vertical-1.png');
  background-size: contain;      /* 全体を表示 */
  background-repeat: no-repeat;
  background-position: top center; /* 下に揃えて、余白は上に */
	background-color: #fff;        /* 上の余白を白で埋める */
}
.home h1.wp-block-post-title{display:none;}

/* 文字の可読性を上げる半透明スクリーン（必要なければ削除OK） */
.front-page .hero-scrim, .home .hero-scrim {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(255,255,255,0.0), rgba(255,255,255,0.12));
  pointer-events: none;
}

.front-page .hero-content, .home .hero-content {
	padding-top: 3.5em;
	padding-left: 1em;
/*	margin-top:-55px;*/
  position: relative;
  max-width: 56ch;
  text-align: left;
  color: #222; /* 背景が明るい想定 */
}
/* hero-content モバイル調整 */
@media screen and (max-width: 480px) {
  .front-page .hero-content, 
  .home .hero-content {
    padding-right: 4em; /* ここで右側の余白を確保して強制改行 */
    max-width: 90%;      /* 必要なら文字幅も狭める */
    box-sizing: border-box; /* paddingを含めて幅を計算 */
  }
}

.front-page .hero-content h1, .home .hero-content h1 {
  font-size: clamp(1.8rem, 3.8vw, 3rem);
  line-height: 1.15;
  margin: 0 0 .6em;
  font-weight: 800;
}

.front-page .hero-content p, .home .hero-content p {
  font-size: clamp(1rem, 2.2vw, 1.25rem);
  margin: 0 0 1.6em;
}

/* CTAボタン */
.front-page .cta-button, .home .cta-button {
  display: inline-block;
  text-decoration: none;
  background: #ff8800;
  color: #fff;
  padding: .9rem 1.6rem;
  border-radius: 12px;
  font-size: clamp(1rem, 2.2vw, 1.125rem);
  font-weight: 700;
  box-shadow: 0 6px 18px rgba(0,0,0,.12);
  transition: transform .12s ease, box-shadow .12s ease, background-color .12s ease;
}
.front-page .cta-button:hover, .home .cta-button:hover {
  background: #ff6e00;
  box-shadow: 0 10px 24px rgba(0,0,0,.16);
  transform: translateY(-1px);
}

/* ======= 横長の画面では横長画像に切替 + 左寄せ ======= */
@media screen and (min-aspect-ratio: 4/3) {
  .front-page .landing-hero, .home .landing-hero {
    background-image: url('https://musehopper.com/wp-content/uploads/2025/09/MH-landing-horizontal-1-1.png');
    background-size: contain;
    background-position: top center;
		background-color: #fff;
		background-repeat:no-repeat;
		--hero-h: 100svh;  /* ここも好みで */
  }
	.front-page .hero-content, .home .hero-content {
	/*	margin-top:-93px; */
		text-align: left;
		margin-left: min(12vw, 250px);
  }
}
/* スクロール時に上の隙間が気になる場合は main の余白もゼロに（必要なら） */
/*.front-page main, .home main { margin-top:0;!important padding-top: 0; }*/

/* scrim は高さを親に追従させるだけでOK（いじる必要なし） */
.front-page .hero-scrim, .home .hero-scrim { 
	position:absolute; inset:0; pointer-events:none; 
}

/* 文字が潰れない保護：極端に狭い端末で折り返し */
.front-page .hero-content :is(h1,p), .home .hero-content :is(h1,p) {
  overflow-wrap: anywhere;
}

/* 動きを控えたいユーザー配慮（任意） */
@media (prefers-reduced-motion: reduce) {
  .front-page .cta-button, .home .cta-button { transition: none; }
}