@charset "UTF-8";
/* =========================================================
   TOP メインビジュアル（2026-10 改修）
   中身：assets/inc/mv-section.php ／ 動き：assets/js/mv.js
   すべて .mv の中だけに効くように書いています（ヘッダー・下のセクションには影響しません）
   動きは transform / opacity のみ。動きを減らす設定では、最初から完成形で表示します。
   ========================================================= */

.mv {
  --mv-black: #0A0A0A;
  --mv-brown: #765D41;
  --mv-tan: #9F8362;
  --mv-line: #E4DED6;
  --mv-beige: #F3F0EB;
  --mv-gray: #F8F8F8;
  --mv-ease: cubic-bezier(.2, .7, .2, 1);
  /* PC：幅1440pxの画面を基準に、狭い画面では全体を同じ比率で縮める */
  --u: min(1px, calc(100vw / 1440));
  /* 右の図：サイト全体と同じく1090px以下で縮める */
  --d: min(1px, calc(100vw / 1090));
  position: relative;
  overflow: hidden;
  padding-bottom: 0;
  background-color: #fff;
}

/* 背景：既存の「k」の形（Tekonoロゴ由来） */
.mv_bg {
  position: absolute;
  top: 0;
  left: 0;
  width: auto;
  height: 720px;
  pointer-events: none;
  user-select: none;
}

.mv_inner {
  position: relative;
  z-index: 1;
}

/* キャッチコピー（共通） */
.mv_copy {
  margin: 0;
  font-weight: 700;
  font-feature-settings: "palt";
  letter-spacing: .04em;
  line-height: 1.24;
  color: var(--mv-black);
}
.mv_copy_line {
  display: block;
  white-space: nowrap;
}
.mv_copy_line--2 {
  color: var(--mv-brown);
}
.mv .mv_sub {
  margin: 0;
  font-weight: 700;
  letter-spacing: .1em;
  line-height: 1.6;
  color: var(--mv-black);
  white-space: nowrap;
}

/* 流れる事例の帯（共通）
   同じ並びを複数回並べ、1並び分だけ左へ動かしてループ（継ぎ目で飛ばない・空白が出ない） */
.mv_marquee {
  overflow: hidden;
}
.mv_marquee_track {
  display: flex;
  width: max-content;
  animation: mv-marquee var(--mv-dur, 60s) linear infinite;
}
.mv_marquee_list {
  display: flex;
  flex-shrink: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}
.mv_marquee_item {
  flex-shrink: 0;
  width: var(--mv-card-w);
  margin-right: var(--mv-card-gap);
}
/* 幅と間隔を整数pxにそろえる（1並びの幅が整数になり、ループの継ぎ目で0.5pxのずれも出ない） */
@supports (width: round(1.5px, 1px)) {
  .mv_marquee_item {
    width: round(var(--mv-card-w), 1px);
    margin-right: round(var(--mv-card-gap), 1px);
  }
}
.mv_marquee_item img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: top;
  border-radius: var(--mv-card-r, 8px);
  border: 1px solid var(--mv-line);
  background-color: var(--mv-beige);
}
/* 画面外・タブ非表示では止める（mv.js が .is-offscreen を付ける）／マウスを乗せている間も止める */
.mv.is-offscreen .mv_marquee_track {
  animation-play-state: paused;
}
@media (hover: hover) {
  .mv_marquee:hover .mv_marquee_track {
    animation-play-state: paused;
  }
}

@keyframes mv-marquee {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(calc(-100% / var(--mv-sets, 2)), 0, 0); }
}
@keyframes mv-rise {
  from { opacity: 0; transform: translate3d(0, 18px, 0); }
  to   { opacity: 1; transform: none; }
}
@keyframes mv-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* =========================================================
   メインビジュアル（左：キャッチコピー／右：相談窓口は、Tekonoひとつ／下端：Works）
   ========================================================= */
.mv--b .mv_inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(40 * var(--u));
  width: calc(100% - 80 * var(--u));
  max-width: 1280px;
  margin: 0 auto;
  padding: max(118px, calc(152 * var(--u))) 0 calc(68 * var(--u)) calc(30 * var(--u));
}
.mv--b .mv_text {
  flex: 0 1 auto;
  min-width: 0; /* 狭い画面では補足説明を意味の区切りで折り返し、右のビジュアルを押し出さない */
}
/* キャッチコピー（2026-10-09 改訂）：2文を同じ大きさ・太さで、意味のまとまりごとに4行。
   1文目（Web制作から、集客・改善まで。）は黒、2文目（まとめて任せられるワンチーム。）はブラウン */
.mv--b .mv_copy {
  font-size: calc(54 * var(--u));
  letter-spacing: .03em;
  line-height: 1.3;
}
.mv--b .mv_copy_seg {
  display: block;
}
.mv--b .mv_copy_line--2 {
  margin-top: .2em;
}
/* 補足説明：対応範囲（1行目）を少し強めに、2行目は控えめに */
.mv--b .mv_sub {
  margin-top: calc(30 * var(--u));
  padding-top: calc(22 * var(--u));
  border-top: 1px solid var(--mv-line);
  font-size: max(12px, calc(16 * var(--u)));
  letter-spacing: .06em;
  line-height: 1.85;
  white-space: normal;
}
.mv--b .mv_sub_line {
  display: block;
}
.mv--b .mv_sub_line + .mv_sub_line {
  font-weight: 500;
  color: #3D3833;
}
.mv--b .mv_sub_seg {
  display: inline-block;
}

/* 下端：小さな事例の帯（補助） */
.mv--b .mv_works {
  --mv-card-w: calc(160 * var(--u));
  --mv-card-gap: calc(14 * var(--u));
  --mv-card-r: 5px;
  --mv-dur: 48s;
  display: flex;
  align-items: center;
  gap: calc(24 * var(--u));
  padding: calc(22 * var(--u)) 0 calc(26 * var(--u)) max(20px, calc(50% - 640px + 30 * var(--u)));
  background-color: var(--mv-gray);
}
.mv--b .mv_works_label {
  flex-shrink: 0;
  margin: 0;
  font-size: max(11px, calc(13 * var(--u)));
  letter-spacing: .14em;
  color: var(--mv-tan);
}
.mv--b .mv_works .mv_marquee {
  flex: 1;
  min-width: 0;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 calc(48 * var(--u)));
  mask-image: linear-gradient(to right, transparent, #000 calc(48 * var(--u)));
}

/* 初回表示：コピー → Works（右の図は下の「右側の図」で順に表示） */
.mv--b .mv_copy_line--1 { animation: mv-rise .6s var(--mv-ease) both; }
.mv--b .mv_copy_line--2 { animation: mv-rise .6s var(--mv-ease) .08s both; }
.mv--b .mv_sub          { animation: mv-rise .6s var(--mv-ease) .2s both; }
.mv--b .mv_works        { animation: mv-fade .8s ease .5s both; }

/* =========================================================
   スマートフォン（768px以下）：幅390pxの画面を基準に縮尺
   ========================================================= */
@media (max-width: 768px) {
  .mv {
    --s: min(calc(100vw / 390), 1.35px);
  }
  .mv_bg {
    height: 402px;
  }

  /* コピー → 補足説明 → 流れ図 → Works の順に縦並び */
  .mv--b .mv_inner {
    display: block;
    width: calc(100% - 40px);
    padding: calc(128 * var(--s)) 0 calc(36 * var(--s));
  }
  .mv--b .mv_copy {
    font-size: calc(35 * var(--s));
    line-height: 1.32;
  }
  .mv--b .mv_sub {
    margin-top: calc(20 * var(--s));
    padding-top: calc(14 * var(--s));
    font-size: calc(14 * var(--s));
    line-height: 1.8;
  }

  .mv--b .mv_works {
    --mv-card-w: calc(120 * var(--s));
    --mv-card-gap: calc(10 * var(--s));
    --mv-dur: 40s;
    gap: calc(12 * var(--s));
    padding: calc(16 * var(--s)) 0 calc(18 * var(--s)) 20px;
  }
  .mv--b .mv_works_label {
    font-size: calc(11 * var(--s));
    writing-mode: vertical-rl;
    letter-spacing: .16em;
  }
  .mv--b .mv_works .mv_marquee {
    -webkit-mask-image: linear-gradient(to right, transparent, #000 calc(24 * var(--s)));
    mask-image: linear-gradient(to right, transparent, #000 calc(24 * var(--s)));
  }
}

/* =========================================================
   動きを減らす設定：最初から完成形（帯も止まった状態で並べる）
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
  .mv *,
  .mv *::before,
  .mv *::after {
    animation: none !important;
  }
}

/* =========================================================
   右側の図（2026-10-09 ブラッシュアップB で確定）
   相談窓口は、Tekonoひとつ：お客様 →（ご相談）→ Tekono の枠の中に4サービス（線画イラスト＋名前）
   寸法は基準px × --k（PC＝--d／スマホ＝--s）。線は黒1.4px・ブラウン1.5px、角丸は枠20・カード12。
   動きは表示時に一度だけ（opacity / transform）。止まった状態でも意味が伝わる構成です。
   ========================================================= */
.mv--b .mv_diagram {
  position: relative;
  flex-shrink: 0;
  margin: 0;
  color: var(--mv-black);
}
.mv_diagram ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.mv--b .mv_one {
  --k: var(--d);
  display: grid;
  grid-template-columns: auto auto 1fr;
  grid-template-rows: auto auto;
  align-items: center;
  width: calc(612 * var(--k));
}

/* お客様（相談の吹き出しつき） */
.mv_one_client {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(10 * var(--k));
}
.mv_one_avatar {
  position: relative;
  display: grid;
  place-items: center;
  width: calc(84 * var(--k));
  height: calc(84 * var(--k));
  border: 1.4px solid var(--mv-black);
  border-radius: 50%;
  background-color: #fff;
}
.mv_one_avatar_icon {
  width: 78%;
  height: 78%;
  margin-top: 12%;
}
.mv_one_bubble {
  position: absolute;
  top: calc(-14 * var(--k));
  right: calc(-18 * var(--k));
  width: calc(34 * var(--k));
  height: auto;
  overflow: visible;
}
.mv_one_client_name {
  font-size: calc(14 * var(--k));
  font-weight: 700;
  letter-spacing: .1em;
  line-height: 1.3;
}

/* お客様 → Tekono：1本の線（窓口がひとつ） */
.mv_one_link {
  position: relative;
  width: calc(84 * var(--k));
  height: calc(28 * var(--k));
  margin-bottom: calc(30 * var(--k));
}
.mv_one_link::before {
  content: "";
  position: absolute;
  left: calc(14 * var(--k));
  right: calc(6 * var(--k));
  bottom: 0;
  height: 1.5px;
  background-color: var(--mv-brown);
  transform-origin: left center;
}
.mv_one_link::after {
  content: "";
  position: absolute;
  right: calc(6 * var(--k));
  bottom: calc(-3.8 * var(--k));
  width: calc(9 * var(--k));
  height: calc(9 * var(--k));
  border-top: 1.5px solid var(--mv-brown);
  border-right: 1.5px solid var(--mv-brown);
  transform: translateY(1px) rotate(45deg);
  transform-origin: center;
}
.mv_one_link_label {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(10 * var(--k));
  color: var(--mv-brown);
  font-size: calc(13 * var(--k));
  font-weight: 700;
  letter-spacing: .08em;
  line-height: 1.3;
  text-align: center;
  white-space: nowrap;
}

/* Tekono の枠：4つのサービスをひとまとまりに */
.mv_one_team {
  padding: calc(22 * var(--k));
  border: 1.5px solid var(--mv-brown);
  border-radius: calc(20 * var(--k));
  background-color: #fff;
  box-shadow: 0 calc(28 * var(--k)) calc(56 * var(--k)) calc(-36 * var(--k)) rgba(70, 50, 30, .28);
}
.mv_one_head {
  display: flex;
  align-items: center;
  margin: calc(2 * var(--k)) 0 calc(18 * var(--k)) calc(4 * var(--k));
  line-height: 1;
}
.mv_one_logo {
  display: block;
  width: calc(100 * var(--k));
  height: auto;
}
.mv_diagram .mv_one_services {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: calc(12 * var(--k));
}
/* サービス：上に線画、下にサービス名 */
.mv_one_service {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--mv-line);
  border-radius: calc(12 * var(--k));
  background-color: #fff;
  white-space: nowrap;
}
.mv_one_pic {
  display: block;
  padding: calc(8 * var(--k)) calc(6 * var(--k)) calc(6 * var(--k));
  background-color: var(--mv-beige);
}
.mv_one_illust {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}
.mv_one_name {
  padding: calc(11 * var(--k)) calc(12 * var(--k));
  font-size: calc(18 * var(--k));
  font-weight: 700;
  letter-spacing: .06em;
  line-height: 1.2;
  text-align: center;
}
.mv_one_caption {
  grid-column: 3;
  margin: calc(22 * var(--k)) 0 0;
  color: var(--mv-brown);
  font-size: calc(18 * var(--k));
  font-weight: 700;
  letter-spacing: .1em;
  line-height: 1.4;
  text-align: center;
}

/* ---------- 表示時の動き（一度だけ・約2.1秒） ----------
   お客様 → 吹き出し（…）→ 線が Tekono へ伸びる →「ご相談」→ Tekono の枠 → 4サービスが順に → 各イラストの差し色 → 一文 */
.mv--b .mv_one_client       { animation: mv-rise .6s var(--mv-ease) .1s both; }
.mv--b .mv_one_bubble       { animation: mv-pop .45s var(--mv-pop) .45s both; transform-origin: 25% 100%; }
.mv--b .mv_one_bubble circle { animation: mv-typing .7s ease-in-out .9s 2; }
.mv--b .mv_one_bubble circle:nth-of-type(2) { animation-delay: 1s; }
.mv--b .mv_one_bubble circle:nth-of-type(3) { animation-delay: 1.1s; }
.mv--b .mv_one_link::before { animation: mv-draw-x .5s var(--mv-ease) .55s both; }
.mv--b .mv_one_link::after  { animation: mv-fade .25s ease .95s both; }
.mv--b .mv_one_link_label   { animation: mv-fade .4s ease .7s both; }
.mv--b .mv_one_team         { animation: mv-rise .6s var(--mv-ease) .8s both; }
.mv--b .mv_one_service      { animation: mv-rise .5s var(--mv-ease) .92s both; }
.mv--b .mv_one_service:nth-child(2) { animation-delay: 1s; }
.mv--b .mv_one_service:nth-child(3) { animation-delay: 1.08s; }
.mv--b .mv_one_service:nth-child(4) { animation-delay: 1.16s; }
/* 差し色（ボタン・電波・AIの印・いいね）：カードが出た後に小さく弾む */
.mv--b .mv_one_accent {
  transform-box: fill-box;
  transform-origin: center;
  animation: mv-pop .45s var(--mv-pop) 1.27s both;
}
.mv--b .mv_one_service:nth-child(2) .mv_one_accent { animation-delay: 1.35s; }
.mv--b .mv_one_service:nth-child(3) .mv_one_accent { animation-delay: 1.43s; }
.mv--b .mv_one_service:nth-child(4) .mv_one_accent { animation-delay: 1.51s; }
.mv--b .mv_one_caption      { animation: mv-rise .6s var(--mv-ease) 1.5s both; }

.mv--b {
  --mv-pop: cubic-bezier(.3, 1.45, .55, 1);
}
@keyframes mv-pop {
  from { opacity: 0; transform: scale(.6); }
  to   { opacity: 1; transform: none; }
}
@keyframes mv-draw-x {
  from { transform: scaleX(0); }
  to   { transform: none; }
}
@keyframes mv-draw-y {
  from { transform: scaleY(0); }
  to   { transform: none; }
}
@keyframes mv-typing {
  0%, 60%, 100% { transform: none; }
  30%           { transform: translateY(-2px); }
}

/* ---------- スマホ：お客様 → 下向きの線 → Tekono の枠 ---------- */
@media (max-width: 768px) {
  .mv--b .mv_diagram {
    margin-top: calc(40 * var(--s));
  }
  .mv--b .mv_one {
    --k: var(--s);
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 560px;
  }
  .mv_one_client {
    flex-direction: row;
  }
  .mv_one_avatar {
    width: calc(52 * var(--k));
    height: calc(52 * var(--k));
  }
  .mv_one_bubble {
    top: calc(-10 * var(--k));
    right: calc(-16 * var(--k));
    width: calc(24 * var(--k));
  }
  .mv_one_link {
    width: calc(80 * var(--k));
    height: calc(44 * var(--k));
    margin: 0;
  }
  .mv_one_link::before {
    left: 50%;
    right: auto;
    top: calc(6 * var(--k));
    bottom: calc(4 * var(--k));
    width: 1.5px;
    height: auto;
    margin-left: -1px;
    transform-origin: center top;
  }
  .mv_one_link::after {
    left: 50%;
    right: auto;
    bottom: calc(4 * var(--k));
    margin-left: calc(-4.6 * var(--k));
    transform: rotate(135deg);
  }
  .mv_one_link_label {
    left: calc(50% + 10px);
    right: auto;
    bottom: auto;
    top: 50%;
    transform: translateY(-50%);
    font-size: calc(12.5 * var(--k));
    text-align: left;
  }
  .mv_one_team {
    box-sizing: border-box;
    width: 100%;
    padding: calc(18 * var(--k)) calc(16 * var(--k));
    border-radius: calc(16 * var(--k));
  }
  .mv_one_head {
    margin-bottom: calc(14 * var(--k));
  }
  .mv_one_logo {
    width: calc(86 * var(--k));
  }
  .mv_diagram .mv_one_services {
    gap: calc(10 * var(--k));
  }
  .mv_one_name {
    padding: calc(9 * var(--k)) calc(8 * var(--k));
    font-size: calc(15 * var(--k));
  }
  .mv_one_caption {
    margin-top: calc(16 * var(--k));
    font-size: calc(16 * var(--k));
  }
  .mv--b .mv_one_link::before { animation-name: mv-draw-y; }
}

/* 狭いPC（769〜1100px）では、左のコピー・Google Partner の列を狭めないよう、図の幅を少し小さく */
@media (min-width: 769px) and (max-width: 1100px) {
  .mv--b .mv_one {
    width: calc(560 * var(--k));
  }
}

/* =========================================================
   Google Partner 表示（2026-10-09）
   バッジは公式スニペットのまま（色・縦横比・文字・枠線は変えず、表示幅だけ指定）。
   --gp-w：バッジの幅／--gp-c：バッジの各辺の余白（バッジの高さの半分以上。高さ＜幅なので幅の半分で確保）
   ========================================================= */
.gp {
  --gp-w: 72px;
  --gp-c: calc(var(--gp-w) / 2);
  color: var(--mv-black, #0A0A0A);
}
.gp p {
  margin: 0;
}
.gp_seg {
  display: inline-block; /* 折り返すときは意味の区切りで */
}
.gp_badge {
  flex-shrink: 0;
  width: var(--gp-w);
  line-height: 0;
}
.gp_badge a {
  display: block;
}
.gp_badge a:hover {
  opacity: 1;
}
.gp_badge img {
  display: block;
  width: 100%;
  height: auto;
}
.gp_title {
  font-size: 15px;
  font-weight: 500;
  letter-spacing: .04em;
  line-height: 1.5;
}
.gp_desc {
  margin-top: 2px;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .04em;
  line-height: 1.6;
  color: #3D3833;
}

/* 補足説明の下に白いカードで配置（2026-10-09 A案で確定） */
.gp--inline {
  display: flex;
  align-items: center;
  gap: var(--gp-c);
  box-sizing: border-box;
  width: fit-content;
  max-width: 100%;
  /* 上の補足説明とバッジの間は、margin＋上の余白でバッジの高さの半分以上を確保 */
  margin-top: max(24px, calc(28 * var(--u)));
  padding: 16px 28px 16px 20px;
  border: 1px solid var(--mv-line);
  border-radius: 12px;
  background-color: #fff;
}
.gp--inline .gp_text {
  min-width: 0;
  max-width: 330px;
}
/* カードの分だけ、メインビジュアル下の余白を少し詰める */
.mv--b .mv_inner:has(.gp--inline) {
  padding-bottom: calc(44 * var(--u));
}

/* スマホ：バッジと文章を横並び（文章は意味の区切りで折り返し） */
@media (max-width: 768px) {
  .gp {
    --gp-w: 60px;
  }
  .gp--inline {
    width: 100%;
    margin-top: max(18px, calc(22 * var(--s)));
    padding: 14px 16px;
  }
  .gp_title {
    font-size: 14px;
    letter-spacing: .02em;
  }
  .gp_desc {
    font-size: 12.5px;
    letter-spacing: .02em;
  }
  .mv--b .mv_inner:has(.gp--inline) {
    padding-bottom: calc(36 * var(--s));
  }
}

/* 左の列が細くなるPC（769〜849px）：横並びだと文章が細切れになるため、バッジの下に文章 */
@media (min-width: 769px) and (max-width: 849px) {
  .gp--inline {
    flex-direction: column;
    align-items: flex-start;
  }
}