/* ==========================================================
   トップページ（claude-design-output/index.dc.html）
   ========================================================== */

/* ===== メインビュー ===== */
.ty-mv {
  position: relative;
  height: 100vh;
  min-height: 520px;
  display: flex;
  align-items: center;
  overflow: hidden;
  color: #FAF8F4;
  background: radial-gradient(760px circle at var(--mx) var(--my), rgba(184,147,63,.2), transparent 60%), radial-gradient(1100px 760px at 88% 12%, #0B2B5C 0%, rgba(11,43,92,0) 62%), #00132F;
}
.ty-mv__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1.6s; pointer-events: none; }
.ty-mv__video.is-playing { opacity: .55; }
.ty-mv__overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(0,19,47,.92) 0%, rgba(0,19,47,.72) 45%, rgba(0,19,47,.45) 100%), radial-gradient(760px circle at var(--mx) var(--my), rgba(184,147,63,.2), transparent 60%);
}
/* 斜めに走る光の線 */
.ty-mv__beams { position: absolute; inset: -20%; transform: rotate(-24deg); pointer-events: none; }
.ty-mv__beam { left: 0; right: 0; height: 1px; }
.ty-mv__beam--1 { top: 34%; background: rgba(184,147,63,.12); }
.ty-mv__beam--1 .ty-beam__light { width: 22%; background: linear-gradient(90deg, transparent, #FFF1C4, transparent); }
.ty-mv__beam--2 { top: 52%; background: rgba(184,147,63,.1); }
.ty-mv__beam--2 .ty-beam__light { width: 18%; background: linear-gradient(90deg, transparent, #E9CF8A, transparent); }
.ty-mv__beam--3 { top: 71%; height: 2px; background: rgba(184,147,63,.06); }
.ty-mv__beam--3 .ty-beam__light { width: 26%; background: linear-gradient(90deg, transparent, #F3DFA6, transparent); }

.ty-mv__inner {
  position: relative;
  width: 100%;
  height: 100%;
  max-width: 1360px;
  margin: 0 auto;
  padding: 92px clamp(20px, 5vw, 64px) 32px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 0;
}
.ty-mv__text {
  position: relative;
  top: 0;
  z-index: 2;
  width: min(640px, 100%);
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: clamp(16px, 3vw, 36px);
  container-type: inline-size;
}
.ty-mv__en {
  display: flex;
  align-items: center;
  gap: min(16px, 2.4cqw);
  font-family: "Cormorant Garamond", serif;
  font-size: min(16.5px, 3cqw);
  letter-spacing: .2em;
  color: #B8933F;
  white-space: nowrap;
}
.ty-mv__en-line { width: calc(-4px + min(120px, 6cqw)); height: .5px; background: #B8933F; flex: 0 0 auto; }
.ty-mv__catch {
  margin: 0;
  font-family: "Noto Serif JP", serif;
  font-weight: 500;
  font-size: min(8.6cqw, 76px);
  line-height: 1.35;
  letter-spacing: .08em;
  display: flex;
  flex-flow: row;
  white-space: nowrap;
}
.ty-mv__catch-clip { overflow: hidden; display: block; padding-bottom: .06em; }
.ty-mv__catch-line { display: block; }
.ty-shine--mv { background-image: linear-gradient(110deg, #B8933F 0%, #C9A452 38%, #FFF4CF 50%, #C9A452 62%, #B8933F 100%); }
.ty-mv__lead { margin: 0; max-width: 640px; font-size: 15px; line-height: 2.2; letter-spacing: .06em; color: #DCDFE6; }

/* 右のイラスト（リング・スマホ・SNSアイコン） */
.ty-mv__illust {
  position: absolute;
  z-index: 1;
  right: clamp(0px, 4vw, 64px);
  top: calc(50% + 30px);
  width: min(46vw, 100vh - 200px, 560px);
  margin-top: calc(-.5 * min(46vw, 100vh - 200px, 560px));
  flex: 0 0 auto;
  aspect-ratio: 1 / 1;
  container-type: inline-size;
  pointer-events: none;
  user-select: none;
}
.ty-mv__layer { position: absolute; inset: 0; }
.ty-mv__ring { position: absolute; border-radius: 50%; }
.ty-mv__ring--1 { inset: 0; border: 1px dashed rgba(184,147,63,.35); }
.ty-mv__ring--2 { inset: 12%; border: 1px solid rgba(184,147,63,.25); }
.ty-mv__ring--3 { inset: 26%; border: 1px solid rgba(250,248,244,.12); }
.ty-mv__ring-dot { position: absolute; border-radius: 50%; }
.ty-mv__ring-dot--gold { top: -4px; left: 50%; width: 8px; height: 8px; background: #E9CF8A; box-shadow: 0 0 16px #E9CF8A; }
.ty-mv__ring-dot--white { bottom: -3px; left: 30%; width: 6px; height: 6px; background: #FAF8F4; }
.ty-mv__phone { position: absolute; left: 50%; top: 50%; width: 42%; margin-left: -21%; margin-top: -42%; aspect-ratio: 9 / 18; }
.ty-mv__phone-body {
  width: 100%;
  height: 100%;
  border-radius: clamp(14px, 5cqw, 28px); /* イラストの大きさに比例（PCの最大 560px で 28px） */
  border: 1px solid rgba(250,248,244,.35);
  background: rgba(0,19,47,.65);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  box-shadow: 0 30px 80px rgba(0,0,0,.45);
}
.ty-mv__phone-head { display: flex; align-items: center; gap: 8px; padding: 4px 4px 0; }
.ty-mv__phone-icon { width: min(21px, 4.6cqw); height: min(21px, 4.6cqw); flex: 0 0 auto; display: flex; align-items: center; justify-content: center; }
.ty-mv__phone-icon img { width: 100%; height: 100%; display: block; }
.ty-mv__phone-bar { flex: 1 1 0%; height: 4px; border-radius: 2px; background: rgba(250,248,244,.25); }
.ty-mv__phone-photo { flex: 1 1 0%; border-radius: clamp(8px, 2.86cqw, 16px); overflow: hidden; }
.ty-mv__phone-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ty-mv__phone-actions { display: flex; gap: 8px; padding: 0 4px; }
.ty-mv__phone-line { height: 4px; border-radius: 2px; margin: 0 4px; }
.ty-mv__phone-line--1 { width: 80%; background: rgba(250,248,244,.3); }
.ty-mv__phone-line--2 { width: 55%; background: rgba(250,248,244,.18); margin-bottom: 8px; }
.ty-mv__float { position: absolute; }
.ty-mv__float--ig { left: -2%; top: 12%; }
.ty-mv__float--tt { right: -2%; top: 70%; }
.ty-mv__float--heart { right: 4%; top: 8%; }
.ty-mv__float--chat { left: 6%; bottom: 6%; }
.ty-mv__bubble { width: min(64px, 12cqw); height: min(64px, 12cqw); border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.ty-mv__bubble--white { background: #FAF8F4; box-shadow: 0 14px 40px rgba(0,0,0,.3); }
.ty-mv__bubble--gold { background: #B8933F; box-shadow: 0 14px 40px rgba(0,0,0,.3); }
.ty-mv__bubble--glass {
  width: min(58px, 10cqw);
  height: min(58px, 10cqw);
  background: rgba(250,248,244,.08);
  border: 1px solid rgba(184,147,63,.6);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}
.ty-mv__bubble-icon { width: min(30px, 5.6cqw); height: min(30px, 5.6cqw); display: block; }
.ty-mv__heart { width: 44%; height: 44%; display: block; }
.ty-mv__chat {
  width: min(64px, 11cqw);
  height: min(52px, 9cqw);
  border-radius: clamp(8px, 2.5cqw, 14px);
  background: rgba(250,248,244,.08);
  border: 1px solid rgba(250,248,244,.35);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: min(5px, .9cqw);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}
.ty-mv__chat-dot { width: min(6px, 1.1cqw); height: min(6px, 1.1cqw); flex: 0 0 auto; border-radius: 50%; background: #FAF8F4; }
.ty-mv__chat-dot--gold { background: #B8933F; }
.ty-mv__twinkle { color: #FFF1C4; }
.ty-mv__twinkle--1 { left: 30%; top: 6%; width: 18px; height: 18px; }
.ty-mv__twinkle--2 { right: 20%; bottom: 12%; width: 12px; height: 12px; }

@media (max-width: 767px) {
  .ty-mv { height: auto; min-height: 100svh; }
  .ty-mv__inner { padding: 96px 20px 48px; flex-direction: column-reverse; justify-content: center; gap: 28px; }
  .ty-mv__text { top: 4svh; }
  .ty-mv__lead { font-size: 13.5px; } /* デザインは 14px。作業者指示で少し小さく（13px と 14px の間） */
  .ty-mv__illust { position: relative; right: auto; top: 3svh; width: min(58vw, 260px); margin-top: 0; }
}

/* ===== こんなお悩みはありませんか？ ===== */
.ty-worries { position: relative; overflow: hidden; padding: clamp(52px, 11vw, 160px) clamp(20px, 5vw, 64px) clamp(40px, 7vw, 110px); }
.ty-worries__bgword { right: -2vw; top: 40px; color: #FEFEFC; }
.ty-worries__inner { position: relative; max-width: 1200px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: clamp(28px, 5vw, 56px); text-align: center; }
.ty-worries__lead { margin: 0; font-family: "Noto Serif JP", serif; font-size: clamp(18px, 1.9vw, 23px); letter-spacing: .1em; color: #2A3344; }
.ty-worries__grid { width: 100%; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(50% - 8px, 240px), 1fr)); gap: clamp(26px, 4.5vw, 40px) clamp(12px, 2.4vw, 28px); }
.ty-worries__card {
  position: relative;
  background: #FFFFFF;
  padding: clamp(24px, 5vw, 40px) clamp(8px, 2.4vw, 26px) clamp(22px, 4.6vw, 36px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(12px, 2.6vw, 20px);
  container-type: inline-size;
  box-shadow: 0 20px 50px -30px rgba(52,36,18,.4);
}
.ty-worries__icon { width: clamp(36px, 9vw, 48px); height: clamp(36px, 9vw, 48px); display: flex; align-items: center; justify-content: center; }
.ty-worries__svg { width: 90%; height: 90%; display: block; }
.ty-worries__svg * { fill: none; stroke: #B8933F; stroke-width: 1.5; vector-effect: non-scaling-stroke; stroke-linecap: round; stroke-linejoin: round; }
.ty-worries__txt { font-family: "Noto Serif JP", serif; font-size: min(17px, 9.2cqw); line-height: 1.8; letter-spacing: .04em; color: #00132F; white-space: nowrap; }
.ty-worries__tail { position: absolute; bottom: -9px; width: 16px; height: 16px; background: #FFFFFF; transform: rotate(45deg); }
.ty-worries__tail--left { left: clamp(20px, 6vw, 36px); }
.ty-worries__tail--right { right: clamp(20px, 6vw, 36px); }
.ty-worries__answer { display: flex; flex-direction: column; align-items: center; gap: clamp(20px, 2.6vw, 28px); padding-top: 24px; }
.ty-worries__beam { position: relative; width: 1px; height: 80px; background: rgba(184,147,63,.3); }
.ty-worries__beam .ty-beam__light { width: 100%; height: 35%; background: #B8933F; }
.ty-worries__msg { margin: 0; font-family: "Noto Serif JP", serif; font-weight: 500; font-size: min(5.4vw, clamp(22px, 2.8vw, 34px)); line-height: 1.8; letter-spacing: .08em; color: #00132F; white-space: nowrap; }
.ty-worries__brand { font-family: "Cormorant Garamond", serif; font-size: 1.3em; font-weight: 600; }

/* ===== T&Yについて ===== */
.ty-about { position: relative; overflow: hidden; padding: clamp(24px, 4.5vw, 90px) clamp(20px, 5vw, 64px) clamp(52px, 11vw, 160px); }
.ty-about__inner { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); align-items: center; gap: clamp(40px, 8vw, 120px); }
.ty-about__photo { position: relative; padding: 0 28px 28px 0; }
.ty-about__frame { position: absolute; inset: 28px 10px 10px 28px; border: 1px solid #B8933F; }
.ty-about__img { position: relative; overflow: hidden; aspect-ratio: 4 / 5; }
.ty-about__img img { width: 100%; height: 118%; margin-top: -9%; object-fit: cover; display: block; }
.ty-about__badge { position: absolute; right: 0; bottom: 0; width: 130px; height: 130px; border-radius: 50%; background: #00132F; display: flex; align-items: center; justify-content: center; }
.ty-about__badge-ring { position: absolute; inset: 0; }
.ty-about__badge-txt { font-family: "Cormorant Garamond", serif; font-size: 22px; color: #FAF8F4; letter-spacing: .06em; }
.ty-about__body { display: flex; flex-direction: column; gap: clamp(22px, 3vw, 32px); }
.ty-about__btn { display: flex; justify-content: flex-start; }
@media (max-width: 767px) {
  .ty-about__btn { justify-content: center; }
}

/* ===== サービス紹介（ネイビー） ===== */
.ty-service {
  position: relative;
  overflow: hidden;
  padding: clamp(52px, 11vw, 160px) clamp(20px, 5vw, 64px);
  color: #FAF8F4;
  background: radial-gradient(700px circle at var(--mx) var(--my), rgba(184,147,63,.16), transparent 60%), #00132F;
}
.ty-service__net { opacity: .5; }
.ty-service__bgword { left: -2vw; top: 20px; color: #001029; }
.ty-service__inner { position: relative; max-width: 1200px; margin: 0 auto; display: flex; flex-direction: column; gap: clamp(28px, 6vw, 64px); }
.ty-service__head { display: flex; flex-wrap: wrap; align-items: flex-end; gap: clamp(24px, 3vw, 32px) clamp(32px, 5vw, 56px); }
.ty-service__title { flex: 1 1 300px; }
.ty-service__title .ty-h2 { color: inherit; }
.ty-service__lead { flex: 1.8 1 480px; }
.ty-service__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 40px 0; padding: 0 0 0 1px; }
.ty-service__card {
  position: relative;
  margin-left: -1px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
  padding: clamp(36px, 5vw, 52px) 20px clamp(28px, 4vw, 40px);
  text-align: center;
  border: 1px solid #8A733B;
  color: #FAF8F4;
  transition: background .6s;
}
.ty-service__card:hover { background: rgba(184,147,63,.12); color: #FAF8F4; }
.ty-service__num { position: absolute; left: 16px; top: 16px; font-family: "Noto Serif JP", serif; font-variant-numeric: lining-nums; font-size: 15px; line-height: 1; letter-spacing: .2em; color: #B8933F; }
.ty-service__svg { display: block; }
.ty-service__name { min-height: 3.2em; display: flex; align-items: center; justify-content: center; font-family: "Noto Serif JP", serif; font-size: 17px; line-height: 1.6; letter-spacing: .06em; }
.ty-service__more { display: flex; justify-content: center; }
@media (max-width: 767px) {
  .ty-service__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; }
  .ty-service__card { margin-top: -1px; }
  .ty-service__card:first-child { grid-column: 1 / -1; }
}

/* ===== T&Yが大切にする3つのこと ===== */
.ty-values { position: relative; overflow: hidden; padding: clamp(52px, 11vw, 160px) clamp(20px, 5vw, 64px); }
.ty-values__inner { max-width: 1200px; margin: 0 auto; display: flex; flex-direction: column; gap: clamp(28px, 6vw, 72px); }
.ty-values__wrap { display: flex; flex-direction: column; gap: 20px; }
.ty-values__list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: clamp(16px, 4vw, 48px);
  align-items: start;
  overflow-x: visible;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 4px;
}
.ty-values__list::-webkit-scrollbar { display: none; }
.ty-values__card { position: relative; min-width: 0; flex: 0 1 auto; scroll-snap-align: start; padding: 0 18px 18px 0; }
/* PCでは段違いに下げる */
.ty-values__card--2 { margin-top: max(0px, min(48px, 20vw - 180px)); }
.ty-values__card--3 { margin-top: max(0px, min(96px, 40vw - 360px)); }
.ty-values__frame { position: absolute; inset: 18px 0 0 18px; border: 1px solid #B8933F; }
.ty-values__body {
  position: relative;
  background: #FFFFFF;
  padding: clamp(40px, 4.4vw, 52px) clamp(24px, 3vw, 36px) clamp(36px, 4vw, 48px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
  text-align: center;
  box-shadow: 0 20px 50px -30px rgba(0,19,47,.35);
}
.ty-values__num { font-family: "Noto Serif JP", serif; font-variant-numeric: lining-nums; font-weight: 300; font-size: clamp(46px, 12vw, 60px); line-height: 1; letter-spacing: .04em; color: #B8933F; }
.ty-values__title { margin: 0; font-family: "Noto Serif JP", serif; font-weight: 500; font-size: clamp(19px, 5.2vw, 22px); letter-spacing: .1em; color: #00132F; }
.ty-values__line { width: 28px; height: 1px; background: #B8933F; }
.ty-values__pager { display: none; justify-content: center; align-items: center; gap: 18px; }
.ty-values__arrow { width: 44px; height: 44px; border: 0; padding: 0; background: none; cursor: pointer; display: flex; align-items: center; justify-content: center; color: #B8933F; transition: color .4s; }
.ty-values__arrow:hover { color: #8A6B25; }
.ty-values__dots { display: flex; align-items: center; gap: 4px; }
.ty-values__dot { width: 22px; height: 32px; border: 0; padding: 0; background: none; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.ty-values__dot span { display: block; width: 8px; height: 8px; border-radius: 50%; background: rgba(0,19,47,.2); transition: background .4s; }
.ty-values__dot.is-current span { background: #B8933F; }
/* ふわっと出す単位：PCはカード1枚ずつ／スマホは横スライド全体（カード＋ページ送り）をまとめて1回
   （スマホでカードごとに出すと、横に切り替えたときに2枚目以降が遅れて出てきて不自然なため） */
@media (min-width: 768px) {
  .ty-js .ty-values__wrap[data-reveal]:not(.is-in) { opacity: 1; transform: none; }
}
@media (max-width: 767px) {
  .ty-js .ty-values__card[data-reveal]:not(.is-in) { opacity: 1; transform: none; }
  .ty-values__list { display: flex; gap: 24px; overflow-x: auto; }
  .ty-values__card { flex: 0 0 100%; }
  .ty-values__pager { display: flex; }
}