/* ==========================================================
   サービス内容（claude-design-output/service.dc.html）
   ========================================================== */

/* ===== サービス一覧 ===== */
.ty-svc { position: relative; overflow: hidden; padding: clamp(44px, 9vw, 120px) clamp(20px, 5vw, 64px) clamp(52px, 11vw, 160px); }
.ty-svc__bgword { right: -2vw; top: 40px; color: #FEFEFC; }
.ty-svc__head { position: relative; max-width: 1200px; margin: 0 auto clamp(36px, 7vw, 80px); }
.ty-svc__list { position: relative; max-width: 1200px; margin: 0 auto; display: flex; flex-direction: column; gap: clamp(48px, 10vw, 130px); }
.ty-svc__item { scroll-margin-top: clamp(44px, 9vw, 110px); display: flex; flex-wrap: wrap; align-items: center; gap: clamp(32px, 6vw, 96px); }
.ty-svc__item--reverse { flex-direction: row-reverse; }
.ty-svc__photo { flex: 1 1 calc(420px + 24px); position: relative; padding: 12px; } /* デザインは余白の外側に 420px（content-box） */
.ty-svc__img { position: relative; overflow: hidden; aspect-ratio: 3 / 2; }
.ty-svc__img img { width: 100%; height: 120%; margin-top: -10%; object-fit: cover; display: block; }
/* 写真の角のL字（写真が右のときは向きを入れ替える） */
.ty-svc__corner { position: absolute; width: 64px; height: 64px; border: 0 solid #B8933F; }
.ty-svc__corner--a { left: 0; top: 0; border-left-width: 1px; border-top-width: 1px; }
.ty-svc__corner--b { right: 0; bottom: 0; border-right-width: 1px; border-bottom-width: 1px; }
.ty-svc__item--reverse .ty-svc__corner--a { left: auto; right: 0; border-left-width: 0; border-right-width: 1px; }
.ty-svc__item--reverse .ty-svc__corner--b { right: auto; left: 0; border-right-width: 0; border-left-width: 1px; }
.ty-svc__body { flex: 1 1 380px; display: flex; flex-direction: column; gap: 24px; }
.ty-svc__num-row { display: flex; align-items: flex-end; gap: 20px; }
.ty-svc__num { font-family: "Noto Serif JP", serif; font-variant-numeric: lining-nums; display: inline-block; font-size: clamp(48px, 5vw, 68px); font-weight: 300; line-height: 1.1; padding-bottom: .02em; }
.ty-svc__en { font-family: "Cormorant Garamond", serif; font-weight: 600; font-size: 14px; letter-spacing: .3em; color: #8A6B25; padding-bottom: 8px; }
.ty-svc__title { margin: 0; font-family: "Noto Serif JP", serif; font-weight: 500; font-size: clamp(24px, 2.6vw, 32px); line-height: 1.6; letter-spacing: .1em; color: #00132F; }
.ty-svc__line { width: 64px; height: 1px; background: #B8933F; }

/* ===== 対応プラットフォーム（ネイビー） ===== */
.ty-pf {
  position: relative;
  overflow: hidden;
  padding: clamp(52px, 11vw, 150px) clamp(20px, 5vw, 64px);
  color: #FAF8F4;
  background: radial-gradient(700px circle at var(--mx) var(--my), rgba(184,147,63,.18), transparent 60%), #00132F;
}
.ty-pf__net { opacity: .55; }
.ty-pf__inner { position: relative; max-width: 1000px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: clamp(28px, 5vw, 56px); text-align: center; }
.ty-pf__inner .ty-h2 { color: inherit; }
.ty-pf__grid { width: 100%; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(12px, 2.6vw, 28px); }
.ty-pf__card { display: flex; flex-direction: column; align-items: center; gap: clamp(14px, 2.4vw, 24px); padding: clamp(24px, 5vw, 56px) clamp(8px, 3vw, 32px); border: 1px solid rgba(184,147,63,.45); background: rgba(250,248,244,.03); }
.ty-pf__icon { width: clamp(44px, 8vw, 64px); height: clamp(44px, 8vw, 64px); display: block; background: #B8933F; }
.ty-pf__icon--ig { -webkit-mask: url(https://ros-cdn.s3.ap-northeast-1.amazonaws.com/hp/img/ros_keiyaku/28899/icon-instagram-thin.svg) center / contain no-repeat; mask: url(https://ros-cdn.s3.ap-northeast-1.amazonaws.com/hp/img/ros_keiyaku/28899/icon-instagram-thin.svg) center / contain no-repeat; }
.ty-pf__icon--tt { -webkit-mask: url(https://ros-cdn.s3.ap-northeast-1.amazonaws.com/hp/img/ros_keiyaku/28899/icon-tiktok-thin.svg) center / contain no-repeat; mask: url(https://ros-cdn.s3.ap-northeast-1.amazonaws.com/hp/img/ros_keiyaku/28899/icon-tiktok-thin.svg) center / contain no-repeat; }
.ty-pf__name { font-family: "Cormorant Garamond", serif; font-size: clamp(22px, 4.6vw, 36px); letter-spacing: .12em; }
.ty-pf__note { margin: 0; font-size: 12.5px; line-height: 2; letter-spacing: .06em; color: #C9CED8; display: flex; justify-content: center; text-align: left; }
.ty-pf__mark { flex: 0 0 auto; }

/* ===== サービスの対象範囲 ===== */
.ty-scope { padding: clamp(48px, 10vw, 130px) clamp(20px, 5vw, 64px); }
.ty-scope__card { position: relative; max-width: 1080px; margin: 0 auto; background: #FFFFFF; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); }
.ty-scope__img { position: relative; overflow: hidden; min-height: 280px; }
.ty-scope__img img { position: absolute; left: 0; top: -10%; width: 100%; height: 120%; object-fit: cover; display: block; }
.ty-scope__body { display: flex; flex-direction: column; justify-content: center; gap: clamp(20px, 2.6vw, 28px); padding: clamp(22px, 5vw, 64px); }
/* カード全体の角のL字（本文側に置くが、位置はカード基準） */
.ty-scope__corner { position: absolute; z-index: 2; width: 40px; height: 40px; border: 0 solid #B8933F; pointer-events: none; }
.ty-scope__corner--tl { left: -1px; top: -1px; border-left-width: 1px; border-top-width: 1px; }
.ty-scope__corner--br { right: -1px; bottom: -1px; border-right-width: 1px; border-bottom-width: 1px; }
.ty-scope__head { display: flex; flex-direction: column; gap: 14px; }
.ty-scope__title { margin: 0; font-family: "Noto Serif JP", serif; font-weight: 500; font-size: clamp(20px, 2vw, 24px); line-height: 1.6; letter-spacing: .1em; color: #00132F; white-space: nowrap; }
.ty-scope__text { margin: 0; font-size: 13px; line-height: 2.2; letter-spacing: .05em; }