@charset "UTF-8";

/* ========================================
   みたか：家型MV・文字・左右装飾 CSS全量
======================================== */

/* MVの外側 */
#mv_outer {
  position: relative;
  padding: 28px clamp(48px, 4vw, 64px) 64px;
  background: #fcfaf6;
  overflow: visible;
}

/* 家型と影 */
#mv {
  --house-shape: polygon(
    0% 36%,
    50% 0%,
    73% 16.56%,
    73% 5%,
    83% 5%,
    83% 23.76%,
    100% 36%,
    100% 100%,
    0% 100%
  );

  position: relative;
  width: min(100%, 1200px);
  height: auto;
  min-height: 0 !important;
  aspect-ratio: 12 / 7;
  margin: 0 auto;
  padding: 0;
  isolation: isolate;
  overflow: visible;
  filter: drop-shadow(0 10px 14px rgb(18 56 82 / 20%));
}

/* 写真を家型に切り抜く */
#mv .mv_img {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  z-index: 6;
  -webkit-clip-path: var(--house-shape);
  clip-path: var(--house-shape);
}

#mv .mv_img > li > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 家型の右下にずらす斜線 */
#mv::before {
  content: "";
  display: block;
  position: absolute;
  inset: 0;
  transform: translate(24px, 24px);
  background: repeating-linear-gradient(
    135deg,
    transparent 0 5px,
    #9d937e 5px 6.5px
  );
  -webkit-clip-path: var(--house-shape);
  clip-path: var(--house-shape);
  pointer-events: none;
  z-index: 0;
}

/* 写真に重ねるグラデーション */
#mv::after {
  content: "";
  display: block;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  background: linear-gradient(
    transparent 36%,
    rgb(0 0 0 / 34%)
  );
  -webkit-clip-path: var(--house-shape);
  clip-path: var(--house-shape);
  pointer-events: none;
  z-index: 6;
}

/* 既存のスクロール表示 */
#mv .mv_scroll {
  display: none;
}

/* ========================================
   文字全体
======================================== */

#mv_outer #mv .mv_text {
  --roof-size: clamp(14px, 2vw, 25px);
  --copy-size: clamp(18px, 2.4vw, 30px);
  --copy-gap: clamp(12px, 1.4vw, 20px);
  --copy-pad: 6px;

  position: absolute;
  top: 0;
  bottom: auto !important;
  left: 0 !important;
  width: 100%;
  height: 100%;
  display: block !important;
  z-index: 10;

  font-family:
    "Noto Serif JP",
    "Yu Mincho",
    "Hiragino Mincho ProN",
    serif;
}

#mv_outer #mv .mv_text > div {
  position: relative;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  text-align: left;
  text-shadow: none;
}

/* 左の屋根に沿うコピー */
#mv_outer #mv .mv_text h2 {
  position: absolute;
  left: 4%;
  top: 33.12%;
  bottom: auto;
  width: max-content;
  max-width: none;
  min-height: 0;
  margin: 0;
  padding: 0;
  font-family: inherit;
  font-size: 0 !important;
  line-height: 0;
  letter-spacing: 0;
  color: transparent !important;
  background: transparent;
  text-shadow: none;
  transform-origin: left bottom;
}

#mv_outer #mv .mv_text h2::before {
  content: "三重で選ばれ続けるリフォーム会社";
  display: block;
  font-family: inherit;
  font-size: var(--roof-size);
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.08em;
  white-space: nowrap;
  color: #333;
}

/* 右側の縦書き2列 */
#mv_outer #mv .mv_text div p.static {
  position: absolute;
  top: 0;
  bottom: auto;

  /* 煙突の右端から32px離す */
  left: calc(83% + 32px);
  right: auto;

  display: flex !important;
  flex-direction: row-reverse;
  align-items: flex-start;
  gap: 0;
  width: max-content;
  min-height: 0;
  margin: 0;
  padding: 0;
  font-family: inherit;
  font-size: 0 !important;
  line-height: 0;
  letter-spacing: 0;
  color: transparent !important;
  background: transparent;
  text-shadow: none;
}

/* 元の文字が子要素で入っている場合も非表示 */
#mv_outer #mv .mv_text h2 > *,
#mv_outer #mv .mv_text div p.static > * {
  display: none !important;
}

/* 白帯付きの文字 */
#mv_outer #mv .mv_text div p.static::before,
#mv_outer #mv .mv_text div p.static::after {
  display: block;
  flex: 0 0 auto;
  writing-mode: vertical-rl;
  text-orientation: upright;
  white-space: nowrap;
  padding: 10px var(--copy-pad);
  font-family: inherit;
  font-size: var(--copy-size);
  font-weight: 700;
  line-height: 1.55;
  letter-spacing: 0.05em;
  color: #333;
  background: #fff;
  text-shadow: none;
}

#mv_outer #mv .mv_text div p.static::before {
  content: "お客様の要望を叶える";
  margin-left: var(--copy-gap);
}

#mv_outer #mv .mv_text div p.static::after {
  content: "鈴鹿、四日市の誇るプロ集団";
}

/* ========================================
   屋根に合わせて角度・文字サイズを自動調整
======================================== */

@media (min-width: 768px) {
  #mv_outer #mv .mv_text > div {
    container-type: size;
  }

  #mv_outer #mv .mv_text h2 {
    --roof-size: clamp(13px, 2.08cqw, 25px);

    transform:
      translateY(calc(-100% - 4px))
      rotate(atan2(-36cqh, 50cqw));
  }
}

/* 狭いPC・タブレット */
@media (min-width: 768px) and (max-width: 1000px) {
  #mv_outer #mv .mv_text {
    --copy-size: clamp(16px, 2.1vw, 21px);
    --copy-gap: 8px;
    --copy-pad: 4px;
  }
}

/* ========================================
   広い画面の左右余白にイラスト
======================================== */

@media (min-width: 1600px) {
  #mv_outer {
    --mv-side-art-width: clamp(
      100px,
      calc((100vw - 1200px) / 2 - 100px),
      180px
    );
  }

  #mv_outer::before,
  #mv_outer::after {
    content: "";
    display: block;
    position: absolute;
    width: var(--mv-side-art-width);
    aspect-ratio: 180 / 420;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    opacity: 0.65;
    pointer-events: none;
    z-index: 0;
  }

  /* 左：家・塗装ローラー・定規 */
  #mv_outer::before {
    top: 12%;
    left: calc((100% - 1200px) / 4 - var(--mv-side-art-width) / 2);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 180 420' fill='none' stroke='%23123852' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='86' cy='181' r='69' fill='%23EAC562' fill-opacity='.18' stroke='none'/%3E%3Cpath d='M19 159L87 102L157 159M35 147V251H140V147M91 251V201H119V251M115 126V102H130V139'/%3E%3Cpath d='M51 169H79V197H51ZM65 169V197M51 183H79M22 259H157M110 225H112'/%3E%3Crect x='27' y='290' width='67' height='21' rx='4'/%3E%3Cpath d='M94 300H108V332H67V352M34 296V305M40 296V305'/%3E%3Crect x='61' y='352' width='12' height='31' rx='3'/%3E%3Crect x='125' y='328' width='19' height='55' rx='1'/%3E%3Cpath d='M125 338H134M125 346H131M125 354H134M125 362H131M125 370H134'/%3E%3Cpath d='M139 49V70M129 60H149M27 89V100M21 95H33' stroke='%23BF2941'/%3E%3Ccircle cx='43' cy='35' r='7'/%3E%3Ccircle cx='143' cy='288' r='3' fill='%23123852' stroke='none'/%3E%3Cpath d='M31 399H97M107 399H154' stroke='%239D937E'/%3E%3C/svg%3E");
  }

  /* 右：窓・キッチン・浴槽 */
  #mv_outer::after {
    top: 35%;
    right: calc((100% - 1200px) / 4 - var(--mv-side-art-width) / 2);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 180 420' fill='none' stroke='%23123852' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='93' cy='258' r='71' fill='%23B8D7DD' fill-opacity='.25' stroke='none'/%3E%3Cpath d='M52 82H122V154H52ZM87 82V154M52 118H122M47 160H128'/%3E%3Cpath d='M146 172V121M146 143C131 142 124 131 126 122C140 123 148 132 146 143ZM146 156C160 152 165 141 161 132C151 135 145 146 146 156Z'/%3E%3Cpath d='M21 228H159V236H21ZM26 236V318H154V236M96 236V318M109 249H141M109 260H141M109 272H141'/%3E%3Crect x='39' y='256' width='41' height='46' rx='1'/%3E%3Cpath d='M43 264H76M45 249H48M57 249H60M69 249H72'/%3E%3Cpath d='M85 221V197C85 182 108 182 108 197V203M102 203H114M67 216H130V226H67'/%3E%3Cellipse cx='43' cy='222' rx='9' ry='2.5'/%3E%3Cellipse cx='62' cy='222' rx='7' ry='2.5'/%3E%3Cpath d='M29 352H151M35 352L45 378H135L145 352M51 378V386M130 378V386M30 352V338C30 328 46 328 46 338V342M41 342H52'/%3E%3Cpath d='M146 45V66M136 56H156M28 184V196M22 190H34' stroke='%23E0B94E'/%3E%3Ccircle cx='48' cy='36' r='4' fill='%23BF2941' stroke='none'/%3E%3Cpath d='M34 399H145M53 409H118' stroke='%239D937E'/%3E%3C/svg%3E");
  }
}

/* ========================================
   スマートフォン
======================================== */

@media (max-width: 767px) {
  #mv_outer {
    padding: 0;
  }

  /* 家型・斜線・影を外して長方形に */
  #mv {
    width: 100%;
    aspect-ratio: 4 / 3;
    filter: none;
  }

  #mv .mv_img,
  #mv::after {
    -webkit-clip-path: none;
    clip-path: none;
  }

  #mv::before {
    display: none;
  }

  #mv_outer #mv .mv_text {
    --roof-size: clamp(12px, 3.3vw, 16px);
    --copy-size: clamp(16px, 4.5vw, 21px);
  }

  /* 上側のコピー */
  #mv_outer #mv .mv_text h2 {
    top: 14px;
    left: 16px;
    max-width: calc(100% - 32px);
    transform: none;
  }

  #mv_outer #mv .mv_text h2::before {
    padding: 4px 8px;
    white-space: normal;
    letter-spacing: 0.03em;
  }

  /* 下側のコピーは横書き2行 */
  #mv_outer #mv .mv_text div p.static {
    top: auto;
    bottom: 16px;
    left: 16px;
    right: auto;
    flex-direction: column;
  }

  #mv_outer #mv .mv_text div p.static::before,
  #mv_outer #mv .mv_text div p.static::after {
    writing-mode: horizontal-tb;
    text-orientation: mixed;
    padding: 3px 8px;
    line-height: 1.5;
  }

  #mv_outer #mv .mv_text div p.static::before {
    margin-left: 0;
    margin-bottom: 6px;
  }

  /* 白背景だけを半透明にする */
  #mv_outer #mv .mv_text h2::before,
  #mv_outer #mv .mv_text div p.static::before,
  #mv_outer #mv .mv_text div p.static::after {
    background: rgba(255, 255, 255, 0.72);
  }
}