/* ==========================================================
   ご利用ガイド（claude-design-output/flow.dc.html）
   ========================================================== */

/* ===== 運用開始の流れ ===== */
.ty-steps { position: relative; overflow: hidden; padding: clamp(44px, 9vw, 120px) clamp(20px, 5vw, 64px) clamp(52px, 11vw, 150px); }
.ty-steps__bgword { right: -2vw; top: 40px; color: #FEFEFC; }
.ty-steps__inner { position: relative; max-width: 1080px; margin: 0 auto; display: flex; flex-direction: column; gap: clamp(32px, 5vw, 56px); }
.ty-steps__head { display: flex; flex-wrap: wrap; align-items: flex-end; gap: clamp(24px, 3vw, 32px) clamp(32px, 5vw, 56px); }
.ty-steps__title { flex: 1 1 300px; }
.ty-steps__lead { flex: 1.8 1 480px; }
.ty-steps__list { list-style: none; margin: 0; padding: 0; }
.ty-steps__item { display: grid; grid-template-columns: clamp(60px, 9vw, 84px) minmax(0, 1fr); gap: clamp(16px, 3.5vw, 40px); }
.ty-steps__rail { display: flex; flex-direction: column; align-items: center; }
/* 丸は枠線込みの大きさ（デザインは content-box） */
.ty-steps__circle { flex: 0 0 auto; width: calc(clamp(60px, 9vw, 84px) + 2px); height: calc(clamp(60px, 9vw, 84px) + 2px); border-radius: 50%; border: 1px solid #00132F; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; }
.ty-steps__step { font-family: "Cormorant Garamond", serif; font-weight: 600; font-size: 13px; letter-spacing: .06em; margin-right: -.06em; color: #00132F; }
.ty-steps__num { font-family: "Noto Serif JP", serif; font-variant-numeric: lining-nums; font-size: clamp(20px, 2.6vw, 26px); line-height: 1; color: #00132F; }
.ty-steps__line { flex: 1 1 0%; width: 1px; overflow: hidden; }
.ty-steps__progress { display: block; width: 100%; height: 100%; background: #00132F; }
.ty-steps__card { display: flex; flex-direction: column; gap: 12px; margin-bottom: clamp(24px, 3vw, 36px); padding: clamp(24px, 3.5vw, 36px) clamp(16px, 4vw, 44px); background: #FFFFFF; }
.ty-steps__card--last { margin-bottom: 0; }
.ty-steps__name { margin: 0; font-family: "Noto Serif JP", serif; font-weight: 500; font-size: clamp(18px, 1.8vw, 21px); letter-spacing: .08em; color: #00132F; }
.ty-steps__who { display: flex; align-items: center; gap: 10px; padding-top: 4px; }
.ty-steps__who-label { font-size: 12px; letter-spacing: .1em; color: #5A6273; }
.ty-steps__who-line { width: 20px; height: 1px; background: #B8933F; }
.ty-steps__tag--client { padding: 5px 12px; border: 1px solid #B8933F; background: #B8933F; color: #FFFFFF; font-size: 12px; font-weight: 500; letter-spacing: .06em; }
.ty-steps__tag--ty { padding: 4px 14px; border: 1px solid #00132F; background: #00132F; color: #FAF8F4; font-family: "Cormorant Garamond", serif; font-size: 14px; font-weight: 600; letter-spacing: .12em; }
@media (max-width: 767px) {
  .ty-steps__step { letter-spacing: .02em; margin-right: -.02em; }
  .ty-steps__name { letter-spacing: .02em; }
}

/* ===== 初月と2ヶ月目以降の違い（ネイビー） ===== */
.ty-cmp {
  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-cmp__net { opacity: .45; }
.ty-cmp__inner { position: relative; max-width: 1200px; margin: 0 auto; display: flex; flex-direction: column; gap: clamp(32px, 5vw, 56px); }
.ty-cmp__head { gap: 22px; }
.ty-cmp__head .ty-h2 { color: inherit; }
.ty-cmp__lead { max-width: 760px; text-align: center; }
.ty-cmp__grid { display: grid; grid-template-columns: minmax(0, 1fr) 56px minmax(0, 1fr); gap: 0; align-items: stretch; position: relative; }
.ty-cmp__card { display: flex; flex-direction: column; gap: clamp(20px, 2.6vw, 28px); padding: clamp(26px, 4vw, 56px); }
.ty-cmp__card--first { background: #FAF8F4; color: #2A3344; }
.ty-cmp__card--after { position: relative; border: 1px solid #B8933F; background: rgba(184,147,63,.07); }
.ty-cmp__top { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.ty-cmp__term { font-family: "Noto Serif JP", serif; font-size: clamp(22px, 3vw, 34px); font-weight: 500; letter-spacing: .1em; color: #00132F; }
.ty-cmp__term.ty-shine { color: transparent; }
.ty-cmp__en { font-family: "Cormorant Garamond", serif; font-weight: 600; font-size: 14px; letter-spacing: .18em; color: #8A6B25; }
.ty-cmp__en--gold { color: #B8933F; }
.ty-cmp__en-num { font-variant-numeric: lining-nums; font-size: 1.3em; line-height: 0; }
.ty-cmp__tilde { font-family: "Noto Sans JP", sans-serif; font-weight: 300; }
.ty-cmp__title { margin: 0; padding-bottom: 24px; border-bottom: 1px solid rgba(0,19,47,.14); font-family: "Noto Serif JP", serif; font-weight: 500; font-size: 18px; letter-spacing: .08em; color: #00132F; }
.ty-cmp__title--after { border-bottom-color: rgba(184,147,63,.35); color: inherit; }
.ty-cmp__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 16px; }
.ty-cmp__li { display: flex; align-items: center; gap: 14px; font-size: 15px; letter-spacing: .06em; }
.ty-cmp__diamond { width: 7px; height: 7px; background: #B8933F; rotate: 45deg; flex: 0 0 auto; }
.ty-cmp__arrow { display: flex; align-items: center; justify-content: center; padding: 0; }
.ty-cmp__arrow-svg { display: block; }
.ty-cmp__note { margin: 0; font-size: 12.5px; line-height: 2; letter-spacing: .05em; color: #C9CED8; display: flex; justify-content: center; text-align: left; }
.ty-cmp__mark { flex: 0 0 auto; }
@media (max-width: 767px) {
  .ty-cmp__lead { text-align: left; }
  .ty-cmp__grid { grid-template-columns: minmax(0, 1fr); }
  .ty-cmp__arrow { padding: 16px 0; }
  .ty-cmp__arrow-svg { rotate: 90deg; }
}

/* ===== よくある質問 ===== */
.ty-faq { position: relative; overflow: hidden; padding: clamp(52px, 11vw, 150px) clamp(20px, 5vw, 64px); }
.ty-faq__bgword { right: -2vw; top: 40px; color: #FEFEFC; }
.ty-faq__inner { position: relative; max-width: 960px; margin: 0 auto; display: flex; flex-direction: column; gap: clamp(32px, 5vw, 56px); }
.ty-faq__list { display: flex; flex-direction: column; border-top: 1px solid rgba(0,19,47,.18); }
.ty-faq__item { border-bottom: 1px solid rgba(0,19,47,.18); background: none; transition: background .5s; }
.ty-faq__item:not(.is-open):hover { background: #F2EEE5; }
.ty-faq__q { width: 100%; display: grid; grid-template-columns: 40px minmax(0, 1fr) 40px; align-items: center; gap: 16px; padding: 28px 4px 28px 10px; background: none; border: 0; text-align: left; color: #00132F; cursor: pointer; transition: color .4s; }
.ty-faq__q:hover { color: #8A6B25; }
.ty-faq__qa { font-family: "Cormorant Garamond", serif; font-size: 30px; line-height: 1; color: #B8933F; }
.ty-faq__qa--a { color: #00132F; }
.ty-faq__question { font-family: "Noto Serif JP", serif; font-size: clamp(14.5px, 1.5vw, 17px); font-weight: 500; line-height: 1.8; letter-spacing: .06em; }
/* 丸は枠線込みの大きさ（デザインは content-box） */
.ty-faq__ring { position: relative; width: 30px; height: 30px; border-radius: 50%; border: 1px solid #00132F; background: #00132F; transition: background .4s, border-color .4s; justify-self: end; }
.ty-faq__bar { position: absolute; left: 50%; top: 50%; width: 11px; height: 1px; translate: -50% -50%; background: #FFFFFF; }
.ty-faq__bar--v { width: 1px; height: 11px; transition: transform .4s; }
.ty-faq__item.is-open .ty-faq__bar--v { transform: scaleY(0); }
.ty-faq__rows { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .55s cubic-bezier(.16,1,.3,1); }
.ty-faq__item.is-open .ty-faq__rows { grid-template-rows: 1fr; }
.ty-faq__clip { overflow: hidden; }
.ty-faq__a { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 16px; padding: 0 4px 32px 10px; opacity: 0; transition: opacity .5s; }
.ty-faq__item.is-open .ty-faq__a { opacity: 1; }
.ty-faq__answer { margin: 0; font-size: 13px; line-height: 2.1; letter-spacing: .05em; }
.ty-faq__btn { display: flex; justify-content: center; padding-top: 16px; }
.ty-faq__cta { gap: clamp(10px, 2.6vw, 22px); padding: clamp(13px, 3vw, 24px) clamp(28px, 6vw, 52px); letter-spacing: .12em; }
@media (max-width: 767px) {
  .ty-faq__q { grid-template-columns: 28px minmax(0, 1fr) 40px; gap: 12px; }
  .ty-faq__qa { font-size: 25px; }
  .ty-faq__ring { width: 26px; height: 26px; }
  .ty-faq__bar { width: 9px; }
  .ty-faq__bar--v { width: 1px; height: 9px; }
  .ty-faq__a { grid-template-columns: 28px minmax(0, 1fr); gap: 12px; }
}