body{
  margin: 0;
  background-color: black;
  font-family: 'M PLUS 1', sans-serif;
}

/* ===== TOP（ヒーロー）を1画面に収める修正 ===== */
.main{
  width: 100%;
  height: 100vh;        /* 1画面固定 */
  position: relative;   /* 絶対配置の基準 */
  overflow: hidden;     /* はみ出しカット */
}

/* 画像の余白が黒バーを作っていたので撤去 */
.topimg{
  width: 100%;
  height: 100%;
  object-fit: cover;
  margin: 0;            /* ← 5% 0 をやめる */
}

/* 左上コピー：大きすぎて上が切れる/黒バーに噛むので安全域を確保 */
.company{
  position: absolute;
  top: 24px;
  left: 24px;
  color: #fff;
  font-size: var(--fs-hero-title);
  line-height: 1.05;
}

/* 右下ロゴ：bottom がマイナスで見切れていた */
.right1{
  position: absolute;
  right: 24px;
  bottom: 24px;         /* ← -5px をやめる */
  color: #fff;
  font-size: 16px;
  font-family: 'Zen Old Mincho';
  line-height: 1;
}

.m1{
  position: relative;
  width: 100%;
  height: 100vh; /* 100Vh -> 100vh */
}

.m1 > img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.mc{
  color:#fff;
  font-size: 48px;
  text-align: right;
  bottom:10px;
  right:30px;
  position:absolute;
}

.cont > img{
  width: 100%;
  height: 700px;
  object-fit: cover;
  margin-bottom: 16px;
}

.flex{
  display: flex;
  width: 100%;
  gap: 20px;
  height: auto; /* 50% を撤去 */
}

.child{
  width: 50%;
  flex: 1 1 0;
  min-width: 0;
}

.child > img{
  width: 100%;
  height: 700px;
  object-fit: cover;
}

.hedding{
  text-align: center;
  color: #fff;
  font-size: 48px;
  margin: 20px 0;
}

.cimg{
  width: 100%;
  height: 100%;
}

.cimg > img{
  width: 100%;
}

.m2{
  position: relative;
  text-align: center;
  margin: 100px;
  height: 800px;
}

.m2 > img{
  width: 100%;
  height: 800px;
  object-fit: cover;
  border-radius: 50px;
}

footer{
  color: #fff;
  margin: 0 100px;
}

.top{
  text-align: center;
  text-decoration: none;
}

.foot{
  display: flex;
  justify-content: space-between;
  font-size: 26px;
}

.link{
  font-size: 36px;
  font-weight: 700;
  text-decoration: none;
  color: #ffffff;
}

.btn {
  width: 200px;
}

.btn a {
  position: relative;
  top: 0;
  display: block;
  padding: 12px 0;
  background-color: #c05802;
  box-shadow: 0 9px #612c01;
  border-radius: 5px;
  font-size: 22px;
  color: #ffffff;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
  transition: .2s ease-in-out;
}

.btn a:hover {
  top: 9px;
  box-shadow: 0 0 #4C0F13;
}

.blur{
  animation-name:blurAnime;
  animation-duration:2s;
  animation-fill-mode:forwards;
}

@keyframes blurAnime{
  from {
    filter: blur(10px);
    transform: scale(1.02);
    opacity: 0;
  }
  to {
    filter: blur(0);
    transform: scale(1);
    opacity: 1;
  }
}

.blurTrigger{
  opacity: 0;
}

/* その場で */
.fadeIn{
  animation-name:fadeInAnime;
  animation-duration:1s;
  animation-fill-mode:forwards;
  opacity:0;
}

@keyframes fadeInAnime{
  from { opacity: 0; }
  to { opacity: 1; }
}

/* 下から */
.fadeUp{
  animation-name:fadeUpAnime;
  animation-duration:2s;
  animation-fill-mode:forwards;
  opacity:0;
}

@keyframes fadeUpAnime{
  from { opacity: 0; transform: translateY(100px); }
  to { opacity: 1; transform: translateY(0); }
}

/* 上から */
.fadeDown{
  animation-name:fadeDownAnime;
  animation-duration:1.5s;
  animation-fill-mode:forwards;
  opacity:0;
}

@keyframes fadeDownAnime{
  from { opacity: 0; transform: translateY(-100px); }
  to { opacity: 1; transform: translateY(0); }
}

/* 左から */
.fadeLeft{
  animation-name:fadeLeftAnime;
  animation-duration:1.5s;
  animation-fill-mode:forwards;
  opacity:0;
}

@keyframes fadeLeftAnime{
  from { opacity: 0; transform: translateX(-100px); }
  to { opacity: 1; transform: translateX(0); }
}

/* 右から */
.fadeRight{
  animation-name:fadeRightAnime;
  animation-duration:1.5s;
  animation-fill-mode:forwards;
  opacity:0;
}

@keyframes fadeRightAnime{
  from { opacity: 0; transform: translateX(100px); }
  to { opacity: 1; transform: translateX(0); }
}

@media screen and (max-width: 430px) {
  .main{
    width: 100%;
    height: 80vh;
    position: relative;
    padding: 0px;
  }

  .topimg{
    width: 100%;
    height: 100%;
    object-fit: cover;
    margin: 0px;
  }

  .company{
    position:absolute;
    color:#fff;
    top:0px;
    left:10px;
  }

  .company > h1{ font-size: 36px; }

  .right1{
    color:#fff;
    right:10px;
    position:absolute;
  }

  .m1{
    width: 100%;
    height: 80vh;
    position: relative;
  }

  .m1 > img{
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .mc{
    color:#fff;
    text-align: right;
    right: 10px;
    bottom: 10px;
    position:absolute;
  }

  .headtxt1{
    font-size: 18px;
    font-family: 'Zen Old Mincho';
  }

  .headtxt2{ font-size: var(--fs-section-title); }

  .cont{ overflow: hidden; }

  .cont > img{
    width: 100%;
    height: 50%;
    object-fit: cover;
    margin-bottom: 16px;
  }

  .flex{
    flex-direction: column; /* 追加：縦積み */
    width: 100%;
    gap: 20px;
  }

  .child{
    width: 100%;
  }

  .child > img{
    width: 100%;
    height: 52vh; /* 追加：固定700pxの破綻回避 */
    min-height: 320px;
    object-fit: cover;
  }

  .hedding{
    text-align: center;
    color: #fff;
    margin: 20px 0;
  }

  .hedding > span{ font-size: 18px; }

  .cimg{ width: 100%; height: 100%; }

  .cimg > img{ width: 100%; }

  .m2{
    position: relative;
    text-align: center;
    margin: 20px;
    height: 50vh;
  }

  .m2 > img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 20px;
  }

  footer{
    color: #fff;
    margin: 0 16px;
  }

  .top{
    text-align: center;
    text-decoration: none;
  }

  .foot{
    display: flex;
    justify-content: space-between;
  }

  .mail{
    font-size: 16px;
    font-weight: 700;
    text-decoration: none;
  }

  .adress{ font-size: 14px; }

  .btn{
    width: 100px;
    margin: 14px 0px;
    font-size: 14px;
  }

  .btn a{
    position: relative;
    top: 0;
    display: block;
    padding: 12px 0;
    background-color: #c05802;
    box-shadow: 0 9px #612c01;
    border-radius: 5px;
    font-size: 14px;
    color: #ffffff;
    font-weight: 700;
    text-align: center;
    text-decoration: none;
    transition: .2s ease-in-out;
  }

  .btn a:hover{
    top: 9px;
    box-shadow: 0 0 #4C0F13;
  }
}

@media screen and (max-width: 1100px) {
  .main{
    width: 100%;
    height: 80vh;
    position: relative;
    padding: 0px;
  }

  .topimg{
    width: 100%;
    height: 100%;
    object-fit: cover;
    margin: 0px;
  }

  .company{
    position:absolute;
    color:#fff;
    font-size: 26px;
    top:0px;
    left:10px;
  }

  .headtxt{ margin: 0px; }

  .right1{
    color:#fff;
    font-size: 16px;
    font-family: 'Zen Old Mincho';
    right:10px;
    position:absolute;
  }

  .m1{
    width: 100%;
    height: 80vh;
    position: relative;
  }

  .m1 > img{
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .mc{
    color:#fff;
    font-size: 20px;
    text-align: right;
    right: 10px;
    bottom: 10px;
    position:absolute;
  }

  .cont{ overflow: hidden; }

  .cont > img{
    width: 100%;
    height: 50%;
    object-fit: cover;
    margin-bottom: 16px;
  }

  .flex{
    display: flex;
    width: 100%;
    gap: 20px;
  }

  .child{
    width: 50%;
  }

  .child > img{
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .hedding{
    text-align: center;
    color: #fff;
    font-size: 32px;
    margin: 20px 0;
  }

  .cimg{ width: 100%; height: 100%; }
  .cimg > img{ width: 100%; }

  .m2{
    position: relative;
    text-align: center;
    margin: 20px;
    height: 50vh;
  }

  .m2 > img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 20px;
  }

  footer{
    color: #fff;
    margin: 0 20px;
  }

  .top{
    text-align: center;
    text-decoration: none;
  }

  .foot{
    display: flex;
    justify-content: space-between;
    font-size: 18px;
  }

  .mail{
    font-size: 18px;
    font-weight: 700;
    text-decoration: none;
  }

  .link{
    text-decoration: none;
    color: #ffffff;
  }

  .btn{
    width: 200px;
    margin: 24px;
  }

  .btn a{
    position: relative;
    top: 0;
    display: block;
    padding: 12px 0;
    background-color: #c05802;
    box-shadow: 0 9px #612c01;
    border-radius: 5px;
    font-size: 18px;
    color: #ffffff;
    font-weight: 700;
    text-align: center;
    text-decoration: none;
    transition: .2s ease-in-out;
  }

  .btn a:hover{
    top: 9px;
    box-shadow: 0 0 #4C0F13;
  }
}

@media screen and (max-width: 1600px) {
  .main{
    width: 100%;
    height: 80vh;
    position: relative;
    padding: 0px;
    margin: 7% 0px;
  }

  .topimg{
    width: 100%;
    height: 100%;
    object-fit: cover;
    margin: 0px;
  }

  .company{
    position:absolute;
    color:#fff;
    font-size: 32px;
    top:0px;
    left:10px;
  }

  .headtxt{ margin: 0px; }

  .right1{
    color:#fff;
    font-size: 16px;
    font-family: 'Zen Old Mincho';
    right:10px;
    position:absolute;
  }

  .m1{
    width: 100%;
    height: 80vh;
    position: relative;
  }

  .m1 > img{
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .mc{
    color:#fff;
    font-size: 32px;
    text-align: right;
    right: 10px;
    bottom: 10px;
    position:absolute;
  }

  .cont{ overflow: hidden; }

  .cont > img{
    width: 100%;
    height: 50%;
    object-fit: cover;
    margin-bottom: 16px;
  }

  .flex{
    display: flex;
    width: 100%;
    gap: 20px;
  }

  .child{
    width: 50%;
  }

  .child > img{
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .hedding{
    text-align: center;
    color: #fff;
    margin: 20px 0;
  }

  .cimg{ width: 100%; height: 100%; }
  .cimg > img{ width: 100%; }

  .m2{
    position: relative;
    text-align: center;
    margin: 20px;
    height: 50vh;
  }

  .m2 > img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 20px;
  }

  footer{
    color: #fff;
    margin: 0 20px;
  }

  .top{
    text-align: center;
    text-decoration: none;
  }

  .foot{
    display: flex;
    justify-content: space-between;
    font-size: 24px;
  }

  .mail{
    font-size: 24px;
    font-weight: 700;
    text-decoration: none;
  }

  .link{
    text-decoration: none;
    color: #ffffff;
  }

  .btn{
    width: 200px;
    margin: 24px;
  }

  .btn a{
    position: relative;
    top: 0;
    display: block;
    padding: 12px 0;
    background-color: #c05802;
    box-shadow: 0 9px #612c01;
    border-radius: 5px;
    font-size: 24px;
    color: #ffffff;
    font-weight: 700;
    text-align: center;
    text-decoration: none;
    transition: .2s ease-in-out;
  }

  .btn a:hover{
    top: 9px;
    box-shadow: 0 0 #4C0F13;
  }
}

#changePic {
  animation: imgfade 6s infinite;
  opacity: 0;
}

@keyframes imgfade {
  0% { opacity: 0; }
  25% { opacity: 1; }
  50% { opacity: 1; }
  75% { opacity: 1; }
  100% { opacity: 0; }
}

/* ===== 追加：共通テキスト（Typewriter用）ここから ===== */
:root{
  --copy-font-size: 24px;      /* 14 -> 16 */
  --copy-line-height: 1.75;
  --copy-letter-spacing: 0.02em;
  --copy-max-width: 700px;     /* 560 -> 680（必要なら） */
}


.m1-copy{
  position: absolute;
  top: 24px;
  left: 24px;
  z-index: 5;

  max-width: var(--copy-max-width);
  padding: 12px 14px;

  color: #fff;
  font-size: var(--copy-font-size);
  line-height: var(--copy-line-height);
  letter-spacing: var(--copy-letter-spacing);

  background: rgba(0,0,0,0.38);
  border-radius: 10px;
  text-shadow: 0 1px 6px rgba(0,0,0,0.55);
  backdrop-filter: blur(2px);
}

.tw-cursor{
  display: inline-block;
  margin-left: 2px;
  width: 0.6em;
  animation: twBlink 0.9s steps(1) infinite;
}

@keyframes twBlink{
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: 0; }
}

@media screen and (max-width: 430px){
  :root{
    --copy-font-size: 12.5px;
    --copy-max-width: calc(100% - 32px);
  }
  .m1-copy{
    top: 14px;
    left: 16px;
    right: 16px;
    padding: 10px 12px;
  }
}
/* ===== 追加：共通テキスト（Typewriter用）ここまで ===== */

/* ===== 追加：cont-hero 対角テキスト（Typewriter用）ここから ===== */
:root{
  --child-overlay-font-size: 24px;
  --child-overlay-line-height: 1.75;


  --child-label-font-size: 24px;
  --child-label-line-height: 1.15;
  --hero-copy-max-width: 560px;
}

/* Commerceセクションの上段を「1画面」にする */
.cont-hero{
  position: relative;
  height: 100vh;
}

.cont-hero > img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  margin-bottom: 0;
}

.cont-title{
  position: absolute;
  left: 24px;
  bottom: 32px;
  z-index: 6;

  padding: 0;
  background: none;

  color: #fff;
  font-weight: 700;
  line-height: 1.15;
  text-shadow: 0 2px 10px rgba(0,0,0,0.65);
}

@media screen and (max-width: 430px){
  .cont-title{
    left: 16px;
    bottom: 16px;
    right: 16px;
  }
}

.cont-copy{
  position: absolute;
  top: 24px;
  right: 24px;
  z-index: 6;

  max-width: var(--hero-copy-max-width);
  padding: 12px 14px;

  color: #fff;
  font-size: var(--hero-copy-font-size);
  line-height: var(--hero-copy-line-height);
  letter-spacing: var(--hero-copy-letter-spacing);

  background: rgba(0,0,0,0.38);
  border-radius: 10px;
  text-shadow: 0 1px 6px rgba(0,0,0,0.55);
  backdrop-filter: blur(2px);
}
  :root{
    --hero-title-font-size: 24px;
    --hero-copy-font-size: 24px;
    --hero-copy-max-width: 700px;
  }
@media screen and (max-width: 430px){
  :root{
    --hero-title-font-size: 16px;
    --hero-copy-font-size: 12.5px;
    --hero-copy-max-width: calc(100% - 32px);
  }
  .cont-copy{
    top: 14px;
    left: 16px;
    right: 16px;
  }
}
/* ===== 追加：cont-hero 対角テキスト（Typewriter用）ここまで ===== */

/* ===== 追加：左右画像上の実績オーバーレイ ここから ===== */
:root{
  --child-overlay-font-size: 24px;
  --child-overlay-line-height: 1.75;


  --child-label-font-size: 24px;
  --child-label-line-height: 1.15;
}

.child-hero{
  height: 100%;
  overflow: visible;
}
.child-hero > img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.child-top{
  position: absolute;
  top: 18px;
  left: 18px;
  right: 18px;
  z-index: 6;
  box-sizing: border-box;
  word-break: break-word;
  padding: 12px 14px;

  color: #fff;
  font-size: var(--child-overlay-font-size);
  line-height: var(--child-overlay-line-height);

  background: rgba(0,0,0,0.38);
  border-radius: 10px;
  text-shadow: 0 1px 6px rgba(0,0,0,0.55);
  backdrop-filter: blur(2px);
    width: auto;
  max-width: none;
  box-sizing: border-box;
}

.child-bottom{
  position: absolute;
  left: 18px;
  bottom: 18px;
  z-index: 6;

  padding: 10px 12px;

  color: #fff;
  font-size: var(--child-label-font-size);
  line-height: var(--child-label-line-height);
  font-weight: 700;

  background: rgba(0,0,0,0.32);
  border-radius: 10px;
  text-shadow: 0 2px 10px rgba(0,0,0,0.65);
  backdrop-filter: blur(2px);
}
.child-top,
.child-bottom{
  position: absolute;
  z-index: 10;
}

@media screen and (max-width: 430px){
  :root{
    --child-overlay-font-size: 12.5px;
    --child-label-font-size: 16px;
  }
  .child-top{
    top: 12px;
    left: 12px;
    right: 12px;
    padding: 10px 12px;
  }
  .child-bottom{
    left: 12px;
    bottom: 12px;
    padding: 9px 11px;
  }
}
/* ===== 追加：左右画像上の実績オーバーレイ ここまで ===== */

/* ===== 追加：cont-hero 下部ラベル（左下）ここから ===== */
:root{
  --cont-label-font-size: 24px;
  --cont-label-line-height: 1.15;
}

.cont-label{
  position: absolute;
  left: 24px;
  bottom: 24px;
  z-index: 6;

  padding: 10px 12px;

  color: #fff;
  font-size: var(--cont-label-font-size);
  line-height: var(--cont-label-line-height);
  font-weight: 700;

  background: rgba(0,0,0,0.32);
  border-radius: 10px;
  text-shadow: 0 2px 10px rgba(0,0,0,0.65);
  backdrop-filter: blur(2px);
}

@media screen and (max-width: 430px){
  :root{ --cont-label-font-size: 16px; }
  .cont-label{
    left: 16px;
    bottom: 16px;
    padding: 9px 11px;
  }
}
/* ===== 追加：cont-hero 下部ラベル（左下）ここまで ===== */

/* ===== 追加：タイポ/余白の正規化（崩れ防止） ===== */
h1, p { margin: 0; }
img { display:block; }

/* headtxt2 が媒体によって未定義になるのを防ぐ（PC幅でも安定させる） */
.headtxt2{
  line-height: 1.1;
  letter-spacing: 0.01em;
}

/* cont-title を “h1デフォルトサイズ” に引っ張られないように明示 */
.cont-title{
  font-size: var(--hero-title-font-size);
  line-height: var(--hero-title-line-height);
  letter-spacing: var(--hero-title-letter-spacing);
}
/* PC基準：Digital Marketing & EC Support +Creation に合わせる */

/* ===== Rakuten/Amazon：2カラム画像を1画面(PC)に揃える ===== */
@media screen and (min-width: 1100px){
  .flex.flex-fullvh{
    height: 100vh;
  }

  .flex.flex-fullvh .child{
    height: 100%;
  }

  .flex.flex-fullvh .child-hero{
    height: 100%;
  }

  .flex.flex-fullvh .child-hero > img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
}
/* ===== child-bottom を Commerce見出しと同トンマナ（headtxt2）に統一 ===== */
.child-bottom{
  position: absolute;
  left: 18px;
  bottom: 18px;
  z-index: 6;

  /* ボックス表現は外して見出しに寄せる */
  padding: 0;
  background: none;
  border-radius: 0;
  backdrop-filter: none;

  color: #fff;
  font-weight: 700;
  line-height: 1.15;

  /* 背景に負けないようにシャドウは強め */
  text-shadow: 0 2px 10px rgba(0,0,0,0.65);
}

@media screen and (max-width: 430px){
  .child-bottom{
    left: 12px;
    bottom: 12px;
  }
}
/* ===== セクション共通の余白（フェードインの違和感軽減）===== */
:root{
  --section-gap: 20px;  /* PCの基本ギャップ */
  --section-gap-sp: 20px; /* SPの基本ギャップ */
}

/* セクション間に“共通の間”を作る（HTMLはいじらない） */
.m1{
  margin-bottom: var(--section-gap);
}

/* 連続する .cont を等間隔に */
.cont{
  margin: var(--section-gap) 0;
}

/* フッター前も詰まりやすいので共通ギャップ */
footer{
  margin-top: var(--section-gap);
}

/* SPは詰める */
@media screen and (max-width: 430px){
  .m1{
    margin-bottom: var(--section-gap-sp);
  }
  .cont{
    margin: var(--section-gap-sp) 0;
  }
  footer{
    margin-top: var(--section-gap-sp);
  }
}
/* ===== cont-label を Digital Marketing 見出し（headtxt2）と同トンマナに統一 ===== */
.cont-label{
  position: absolute;
  left: 24px;
  bottom: 24px;
  z-index: 6;

  /* 見出し寄せ：ボックスを外す */
  padding: 0;
  background: none;
  border-radius: 0;
  backdrop-filter: none;

  color: #fff;
  font-weight: 700;
  line-height: 1.15;

  text-shadow: 0 2px 10px rgba(0,0,0,0.65);
}

@media screen and (max-width: 430px){
  .cont-label{
    left: 16px;
    bottom: 16px;
  }
}
/* ===== 実績リッチ化 ===== */

.ach-block{
  margin-top: 28px;
  position: relative;
}

.ach-toggle{
  background: none;
  border: none;
  padding: 0;
  color: #fff;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 0.12em;
  cursor: pointer;
  position: relative;
  transition: 0.4s ease;
}

/* 下線アニメーション */
.ach-toggle::after{
  content: "";
  position: absolute;
  left: 0;
  bottom: -6px;
  width: 0%;
  height: 1px;
  background: rgba(255,255,255,0.6);
  transition: width 0.4s ease;
}

.ach-toggle:hover::after{
  width: 100%;
}

/* コンテンツ */
.ach-content{
  margin-top: 16px;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transform: translateY(-6px);
  transition: 
    max-height 0.5s ease,
    opacity 0.35s ease,
    transform 0.35s ease;

  padding-left: 14px;
  border-left: 1px solid rgba(255,255,255,0.25);
}

.ach-block.active .ach-content{
  max-height: 600px;
  opacity: 1;
  transform: translateY(0);
}

.ach-content div{
  display: flex;
  justify-content: space-between;
  padding: 6px 0;
  font-size: 15px;
  letter-spacing: 0.03em;
  color: rgba(255,255,255,0.92);
}

.ach-content span{
  font-size: 18px;
  font-weight: 700;
}
/* =========================
   Font Size Control System
   ========================= */
.m1-copy,
.child-top,
.cont-copy{
  font-size: var(--fs-body-copy);
}
.child-bottom,
.cont-label{
  font-size: var(--fs-label);
}
/* ===== PC（1101px以上） ===== */
:root{
  --fs-hero-title: 56px;     /* TOP左上英語 */
  --fs-section-title: 48px;  /* headtxt2系 */
  --fs-body-copy: 24px;      /* 本文系 */
  --fs-label: 48px;          /* child-bottom / cont-label */
}


/* ===== Tablet（1100px以下） ===== */
@media screen and (max-width:1100px){
  :root{
    --fs-hero-title: 42px;
    --fs-section-title: 36px;
    --fs-body-copy: 28px;
    --fs-label: 48px;
  }
    .flex.flex-fullvh{
    height: 700px;
  }

  /* 1100以下は縦積み */
  .flex{
    flex-direction: column;
  }

  .child{
    width:100%;
  }
}


/* ===== Mobile（768px以下） ===== */
@media screen and (max-width:768px){
  :root{
    --fs-hero-title: 48px;
    --fs-section-title: 24px;
    --fs-body-copy: 24px;
    --fs-label: 48px;
  }
  .flex.flex-fullvh{
    height: auto;   /* まず100vhを解除 */
  }

  .flex.flex-fullvh .child{
    flex: 1 1 0;    /* flexは戻す */
    height: auto;
  }

  .flex.flex-fullvh .child-hero{
    height: 700px;  /* ← ここで揃える */
  }
}


/* ===== Small Mobile（480px以下） ===== */
@media screen and (max-width:480px){
  :root{
    --fs-hero-title: 34px;
    --fs-section-title: 34px;
    --fs-body-copy: 14px;
    --fs-label: 34px;
  .flex.flex-fullvh{
    height: auto;   /* まず100vhを解除 */
  }

  .flex.flex-fullvh .child{
    flex: 1 1 0;    /* flexは戻す */
    height: auto;
  }

  .flex.flex-fullvh .child-hero{
    height: 700px;  /* ← ここで揃える */
  }

}
.m1-copy,
.child-top,
.cont-copy{
  font-size: var(--fs-body-copy);
}
.child-bottom,
.cont-label{
  font-size: var(--fs-label);
}.child-hero{
  position: relative;
}

.child-hero > img{
  position: relative;
  z-index: 1;
}

.child-top,
.child-bottom{
  position: absolute;
  z-index: 10;
}
}.cont-title{
  font-size: var(--fs-section-title);
}
.child-hero{
  position: relative;
}
@media screen and (min-width:1100px){
  .flex.flex-fullvh{
    height: 700px;
  }
}
.child-hero{
  position: relative;
}