/* 固定費を抑えられる理由：法人・個人共通。本文はsrc/sections/cost-reason.htmlで編集。 */
.cost-reason {
  --reason-navy: #102d47;
  --reason-gold: #8b6a35;
  --reason-gap: 46px;
  --reason-height: 304px;
  background: #f6f8f9;
  color: var(--reason-navy);
  padding: clamp(64px, 7vw, 104px) max(24px, 5vw);
  scroll-margin-top: 110px;
  font-family: var(--serif, 'Yu Mincho', serif);
}
.cost-reason *, .cost-reason *::before, .cost-reason *::after { box-sizing: border-box; }
.cost-reason__inner { max-width: 1280px; margin: auto; }
.cost-reason p, .cost-reason h2 { margin: 0; }
.cost-reason strong { font-weight: 700; }
.cost-reason__heading { display: grid; grid-template-columns: 1fr 1.1fr; gap: 5%; align-items: center; }
.cost-reason .cost-reason__eyebrow { display: flex; flex-wrap: wrap; gap: 12px 20px; font: 500 11px/1.8 Arial, sans-serif; letter-spacing: .17em; color: var(--reason-gold); margin-bottom: 22px; }
.cost-reason__eyebrow span { font-family: var(--serif, serif); font-size: 15px; letter-spacing: .08em; font-weight: 600; }
.cost-reason h2 { font-size: clamp(34px, 4vw, 56px); font-weight: 500; line-height: 1.55; letter-spacing: .035em; }
.cost-reason h2 em { font-style: normal; color: var(--reason-gold); }
.cost-reason .cost-reason__lead { padding-left: 30px; border-left: 1px solid #aa8951; font-size: clamp(18px, 1.72vw, 25px); line-height: 2.15; letter-spacing: .015em; }
.cost-reason__diagram { display: grid; grid-template-columns: minmax(0,1.2fr) repeat(2,minmax(0,1fr)); gap: var(--reason-gap); align-items: stretch; margin-top: 50px; }
.cost-reason__portfolio, .cost-reason__principle, .cost-reason__outcome { position: relative; display: flex; flex-direction: column; min-width: 0; }
.cost-reason .cost-reason__step { display: flex; gap: 12px; align-items: baseline; font: 400 24px/1.4 Georgia, serif; color: var(--reason-gold); margin-bottom: 18px; }
.cost-reason__step span { font: 500 13px/1.6 var(--serif, serif); letter-spacing: .06em; color: var(--reason-navy); }
.cost-reason__portfolio::after, .cost-reason__principle::after { content: ''; position: absolute; width: 22px; height: 7px; border-top: 1px solid #aa8951; border-right: 1px solid #aa8951; transform: skew(40deg); right: calc((var(--reason-gap) + 22px) / -2); top: calc(52px + var(--reason-height) / 2); }
.cost-reason__services { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); list-style: none; padding: 20px 0 0; margin: 0; gap: 6px; flex: 1; }
.cost-reason__services li { min-width: 0; background: transparent; border-top: 1px solid #b9a06f; text-align: center; padding: 18px 0 14px; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; }
.cost-reason__services img { display: block; width: 100%; height: 120px; object-fit: contain; padding: 6px 5px; margin: 0 0 16px; }
.cost-reason__services span { font-size: 13px; line-height: 1.5; white-space: nowrap; }
.cost-reason__collector { display: grid; grid-template-columns: repeat(4,1fr); height: 24px; margin: 0 12.5%; border-bottom: 1px solid #aa8951; border-left: 1px solid #aa8951; border-right: 1px solid #aa8951; border-radius: 0 0 5px 5px; position: relative; }
.cost-reason__collector i:nth-child(2) { position: absolute; height: 24px; border-left: 1px solid #aa8951; left: 33.33%; }
.cost-reason__collector i:nth-child(3) { position: absolute; height: 24px; border-left: 1px solid #aa8951; left: 66.66%; }
.cost-reason__collector::after { content: ''; position: absolute; left: 50%; top: 23px; height: 12px; border-left: 1px solid #aa8951; }
.cost-reason .cost-reason__foundation { background: var(--reason-navy); color: #fff; text-align: center; font-size: 16px; line-height: 1.8; padding: 17px 10px; margin-top: 12px; }
.cost-reason__principle-body, .cost-reason__outcome-body { position: relative; min-height: var(--reason-height); padding: 34px 26px; flex: 1; display: flex; flex-direction: column; justify-content: center; }
.cost-reason__principle-body, .cost-reason__outcome-body { isolation: isolate; overflow: hidden; background: #102d47; color: #fff; }
.cost-reason__photo { position: absolute; z-index: -2; inset: -6px; width: calc(100% + 12px); height: calc(100% + 12px); max-width: none; object-fit: cover; object-position: center; filter: blur(3px); }
.cost-reason__principle-body::after, .cost-reason__outcome-body::after { content: ''; position: absolute; z-index: -1; inset: 0; background: rgba(5,25,44,.73); }
.cost-reason .cost-reason__principle-text, .cost-reason .cost-reason__outcome-text { font-size: clamp(21px, 1.9vw, 27px); line-height: 1.9; letter-spacing: 0; }
.cost-reason__principle-text strong { color: #ecd29b; }
.cost-reason__handshake { object-position: 50% 72%; }
.cost-reason__money { object-position: 48% 50%; }
.cost-reason__principle-body, .cost-reason__outcome-body { border-top: 2px solid #b89d68; }
.cost-reason__outcome-text strong { color: #ecd29b; }
.cost-reason .cost-reason__outcome-note { font-size: 12px; line-height: 1.9; border-top: 1px solid #ffffff40; padding-top: 15px; margin-top: 19px; color: #e5ecf1; }
.cost-reason .cost-reason__notice { font-size: 12px; line-height: 1.9; color: #536676; margin-top: 30px; }
@media (min-width: 961px) and (max-width: 1150px) {
  .cost-reason { --reason-gap: 32px; }
  .cost-reason__principle-body, .cost-reason__outcome-body { padding: 28px 18px; }
  .cost-reason__services { gap: 4px; }
  .cost-reason__services span { font-size: 10px; }
  .cost-reason .cost-reason__foundation { font-size: 14px; }
  .cost-reason__step span { font-size: 12px; }
  .cost-reason .cost-reason__principle-text, .cost-reason .cost-reason__outcome-text { font-size: 20px; }
  .cost-reason__portfolio::after, .cost-reason__principle::after { width: 16px; right: calc((var(--reason-gap) + 16px) / -2); }
}
@media (max-width: 960px) {
  .cost-reason { padding: 58px 24px; scroll-margin-top: 92px; --reason-height: 260px; }
  .cost-reason__heading { grid-template-columns: 1fr; gap: 27px; }
  .cost-reason .cost-reason__eyebrow { gap: 8px 14px; font-size: 10px; margin-bottom: 17px; }
  .cost-reason__eyebrow span { font-size: 13px; }
  .cost-reason h2 { font-size: clamp(30px, 7.5vw, 44px); line-height: 1.6; }
  .cost-reason .cost-reason__lead { font-size: 16px; padding-left: 17px; line-height: 2.1; }
  .cost-reason__diagram { grid-template-columns: minmax(0,1fr); gap: 44px; margin: 36px auto 0; max-width: 620px; }
  .cost-reason .cost-reason__step { margin-bottom: 16px; }
  .cost-reason__services { padding-top: 0; }
  .cost-reason__services img { height: 100px; }
  .cost-reason__services span { font-size: clamp(10px, 2.9vw, 14px); }
  .cost-reason .cost-reason__foundation { font-size: 16px; }
  .cost-reason__portfolio::after, .cost-reason__principle::after { width: 7px; height: 17px; border-top: 0; border-bottom: 1px solid #aa8951; transform: skewY(40deg); right: calc(50% - 3px); top: auto; bottom: -28px; }
  .cost-reason__principle-body, .cost-reason__outcome-body { padding: 30px 26px; }
  .cost-reason .cost-reason__principle-text, .cost-reason .cost-reason__outcome-text { font-size: 26px; line-height: 1.85; }
  .cost-reason .cost-reason__notice { font-size: 11px; max-width: 620px; margin: 27px auto 0; }
}

/* v42: a continuous shaft and two-sided arrowhead, in the existing gap. */
.cost-reason__portfolio::after, .cost-reason__principle::after {
  width: 26px; height: 14px; border: 0; transform: none;
  right: calc((var(--reason-gap) + 26px) / -2);
  background: #aa8951;
  clip-path: polygon(0 43%, 73% 43%, 52% 8%, 59% 0, 100% 50%, 59% 100%, 52% 92%, 73% 57%, 0 57%);
}
@media (min-width: 961px) and (max-width: 1150px) {
  .cost-reason__portfolio::after, .cost-reason__principle::after { width: 22px; right: calc((var(--reason-gap) + 22px) / -2); }
}
@media (max-width: 960px) {
  .cost-reason__portfolio::after, .cost-reason__principle::after {
    width: 14px; height: 26px; right: calc(50% - 7px); bottom: -35px; top: auto;
    clip-path: polygon(43% 0, 57% 0, 57% 73%, 92% 52%, 100% 59%, 50% 100%, 0 59%, 8% 52%, 43% 73%);
  }
}