/* TCS LP（www.fuyaseru.jp/LP/tcs/）の「アンケート結果」の作りをそのまま写したもの。
   TCS LP を390幅で開き、この部分の要素に実際に当たっている規則だけを CSSOM から抜き出し（scratchpad rival/extract-css.js）、
   .tcs-survey の下に閉じ込めた。画像と JS（app.utils / app.donut / app.init）は corp/tcs/ に写し。AOS は読み込まない */
.tcs-survey { margin: 0 -32px; }
.tcs-survey ul, .tcs-survey li { padding: 0px; margin: 0px; list-style: none; }
.tcs-survey li { text-align: center; }
.tcs-survey .content2 { width: 100%; max-width: 100%; position: relative; overflow: hidden; margin: 0% 0px; }
.tcs-survey .p8 { background: rgb(255, 240, 238); position: relative; height: auto; margin: 0px; z-index: 0; }
.tcs-survey .p8h { padding: 0px; position: relative; top: 0px; left: 0px; right: 0px; width: 100%; height: 100%; margin: 0px auto; }
.tcs-survey .p8 img { width: 100%; }
.tcs-survey [data-aos="fade-up-small"] { opacity: 0; transform: translateY(30px); transition-property: transform, opacity; }
.tcs-survey .b_08 { }
.tcs-survey .b_08_list { background: rgb(255, 255, 255); border-radius: 22px; width: 90.5%; margin: 0px auto 6.5%; padding: 5.2% 4.8% 6.7% 5.5%; display: flex; justify-content: center; flex-flow: column; position: relative; }
.tcs-survey .b_08_circle { width: 69.7%; margin: 9% auto 0px; position: relative; }
.tcs-survey .donut237 { width: 100%; height: auto; transform: rotate(-90deg); }
.tcs-survey .track, .tcs-survey .progress { fill: none; stroke-linecap: butt; stroke-width: 36.46px; }
.tcs-survey .track { stroke: rgb(198, 198, 198); }
.tcs-survey .progress { stroke: rgb(70, 194, 78); stroke-dasharray: 100; stroke-dashoffset: 100; transition: stroke-dashoffset 1.6s ease-out; }
.tcs-survey .track { stroke: var(--track); }
.tcs-survey .progress { stroke: var(--ring); }
.tcs-survey .inner { fill: rgb(255, 255, 255); }
.tcs-survey .separator { fill: none; stroke: rgb(255, 255, 255); stroke-linecap: butt; stroke-width: 36.46px; --sep: .6; stroke-dasharray: var(--sep) calc(100 - var(--sep)); stroke-dashoffset: 100; transition: stroke-dashoffset 1.6s ease-out; }
.tcs-survey .sep-start { stroke-dashoffset: 0; transition: none; }
.tcs-survey .b_08_data_inner { position: absolute; width: 31.1%; margin: 0px auto; top: 49%; left: 0px; right: 0px; }
.tcs-survey .b_08_data_inner_2 { top: 49%; left: -1%; }
.tcs-survey .b_08_data_item { position: relative; display: inline-block; width: fit-content; text-align: right; left: -6%; }
.tcs-survey .num { margin: 0px; line-height: 1; text-align: right; font-weight: 700; font-size: 53px; }
.tcs-survey .countup { display: inline-block; text-align: right; font-variant-numeric: tabular-nums; font-feature-settings: "tnum", "lnum"; min-width: 3ch; }
.tcs-survey .pie_chart_number { position: absolute; top: 27%; right: 0px; width: 40%; transform: translateX(90%); }
.tcs-survey .pie_chart_03, .tcs-survey .pie_chart_04, .tcs-survey .pie_chart_05, .tcs-survey .pie_chart_08, .tcs-survey .pie_chart_09, .tcs-survey .pie_chart_10, .tcs-survey .pie_chart_13, .tcs-survey .pie_chart_14, .tcs-survey .pie_chart_15 { opacity: 0; transform: translateY(10px) scale(0.96); transition: opacity 0.45s, transform 0.45s; }
.tcs-survey .pie_chart_yes { width: 41%; margin: 0px auto; }
.tcs-survey .pie_chart_01 { }
.tcs-survey .pie_chart_02 { width: 36%; margin: 0px; position: absolute; top: 27%; left: 10%; }
.tcs-survey .pie_chart_03 { width: 21%; position: absolute; top: 28%; right: 4%; }
.tcs-survey .pie_chart_04 { width: 16%; top: 70%; left: 4.5%; position: absolute; }
.tcs-survey .pie_chart_05 { width: 18.5%; position: absolute; right: 3.8%; top: 76%; }
.tcs-survey .pie_chart_06 { width: 97.2%; }
.tcs-survey .pie_chart_07 { width: 38%; margin: 0px; position: absolute; top: 27%; left: 10%; }
.tcs-survey .pie_chart_08 { width: 19.5%; position: absolute; top: 3%; right: 6%; }
.tcs-survey .pie_chart_09 { position: absolute; width: 19.3%; bottom: 6%; }
.tcs-survey .pie_chart_10 { position: absolute; width: 17%; bottom: 15%; right: 5%; }
.tcs-survey .pie_chart_11 { width: 94.5%; }
.tcs-survey .pie_chart_12 { width: 36%; margin: 0px; position: absolute; top: 27%; left: 10%; }
.tcs-survey .pie_chart_13 { position: absolute; width: 26%; top: 22%; right: 4%; }
.tcs-survey .pie_chart_14 { position: absolute; width: 15.5%; bottom: 8%; }
.tcs-survey .pie_chart_15 { position: absolute; width: 16%; bottom: 13%; right: 4%; }
.tcs-survey .percent { font-weight: 700; font-size: 21px; line-height: 32.9px; color: rgb(70, 194, 78); margin-top: -4%; margin-bottom: 0px; }
.tcs-survey .percent_2 { color: rgb(184, 142, 90); }
.tcs-survey .percent_3 { color: rgb(200, 0, 0); }
.tcs-survey .e95 { width: 68.5%; margin: 12% auto 9.3%; }
.tcs-survey .e96 { width: 70.5%; margin: 0px 0px 8.3% 6%; }
@media screen and (max-width: 768px) {
  .tcs-survey .content2 { width: 100%; max-width: 100%; position: relative; overflow: hidden; margin: 0% 0px; }
  .tcs-survey .p8 { background: rgb(255, 240, 238); position: relative; height: auto; margin: 0px; z-index: 0; }
  .tcs-survey .p8h { padding: 0px; position: relative; top: 0px; left: 0px; right: 0px; width: 100%; height: 100%; margin: 0px auto; }
  .tcs-survey .p8 img { width: 100%; }
  .tcs-survey [data-aos="fade-up-small"] { opacity: 0; transform: translateY(30px); transition-property: transform, opacity; }
  .tcs-survey .b_08 { }
  .tcs-survey .b_08_list { background: rgb(255, 255, 255); border-radius: 22px; width: 90.5%; margin: 0px auto 6.5%; padding: 5.2% 4.8% 6.7% 5.5%; display: flex; justify-content: center; flex-flow: column; position: relative; }
  .tcs-survey .b_08_circle { width: 69.7%; margin: 9% auto 0px; position: relative; }
  .tcs-survey .donut237 { width: 100%; height: auto; transform: rotate(-90deg); }
  .tcs-survey .track, .tcs-survey .progress { fill: none; stroke-linecap: butt; stroke-width: 36.46px; }
  .tcs-survey .track { stroke: rgb(198, 198, 198); }
  .tcs-survey .progress { stroke: rgb(70, 194, 78); stroke-dasharray: 100; stroke-dashoffset: 100; transition: stroke-dashoffset 1.6s ease-out; }
  .tcs-survey .track { stroke: var(--track); }
  .tcs-survey .progress { stroke: var(--ring); }
  .tcs-survey .inner { fill: rgb(255, 255, 255); }
  .tcs-survey .separator { fill: none; stroke: rgb(255, 255, 255); stroke-linecap: butt; stroke-width: 36.46px; --sep: .6; stroke-dasharray: var(--sep) calc(100 - var(--sep)); stroke-dashoffset: 100; transition: stroke-dashoffset 1.6s ease-out; }
  .tcs-survey .sep-start { stroke-dashoffset: 0; transition: none; }
  .tcs-survey .b_08_data_inner { position: absolute; width: 31.1%; margin: 0px auto; top: 49%; left: 0px; right: 0px; }
  .tcs-survey .b_08_data_inner_2 { top: 49%; left: -1%; }
  .tcs-survey .b_08_data_item { position: relative; display: inline-block; width: fit-content; text-align: right; left: -6%; }
  .tcs-survey .num { margin: 0px; line-height: 1; text-align: right; font-weight: 700; font-size: 53px; }
  .tcs-survey .countup { display: inline-block; text-align: right; font-variant-numeric: tabular-nums; font-feature-settings: "tnum", "lnum"; min-width: 3ch; }
  .tcs-survey .pie_chart_number { position: absolute; top: 27%; right: 0px; width: 40%; transform: translateX(90%); }
  .tcs-survey .pie_chart_03, .tcs-survey .pie_chart_04, .tcs-survey .pie_chart_05, .tcs-survey .pie_chart_08, .tcs-survey .pie_chart_09, .tcs-survey .pie_chart_10, .tcs-survey .pie_chart_13, .tcs-survey .pie_chart_14, .tcs-survey .pie_chart_15 { opacity: 0; transform: translateY(10px) scale(0.96); transition: opacity 0.45s, transform 0.45s; }
  .tcs-survey .pie_chart_yes { width: 41%; margin: 0px auto; }
  .tcs-survey .pie_chart_01 { }
  .tcs-survey .pie_chart_02 { width: 36%; margin: 0px; position: absolute; top: 27%; left: 10%; }
  .tcs-survey .pie_chart_03 { width: 21%; position: absolute; top: 28%; right: 4%; }
  .tcs-survey .pie_chart_04 { width: 16%; top: 70%; left: 4.5%; position: absolute; }
  .tcs-survey .pie_chart_05 { width: 18.5%; position: absolute; right: 3.8%; top: 76%; }
  .tcs-survey .pie_chart_06 { width: 97.2%; }
  .tcs-survey .pie_chart_07 { width: 38%; margin: 0px; position: absolute; top: 27%; left: 10%; }
  .tcs-survey .pie_chart_08 { width: 19.5%; position: absolute; top: 3%; right: 6%; }
  .tcs-survey .pie_chart_09 { position: absolute; width: 19.3%; bottom: 6%; }
  .tcs-survey .pie_chart_10 { position: absolute; width: 17%; bottom: 15%; right: 5%; }
  .tcs-survey .pie_chart_11 { width: 94.5%; }
  .tcs-survey .pie_chart_12 { width: 36%; margin: 0px; position: absolute; top: 27%; left: 10%; }
  .tcs-survey .pie_chart_13 { position: absolute; width: 26%; top: 22%; right: 4%; }
  .tcs-survey .pie_chart_14 { position: absolute; width: 15.5%; bottom: 8%; }
  .tcs-survey .pie_chart_15 { position: absolute; width: 16%; bottom: 13%; right: 4%; }
  .tcs-survey .percent { font-weight: 700; font-size: 21px; line-height: 32.9px; color: rgb(70, 194, 78); margin-top: -4%; margin-bottom: 0px; }
  .tcs-survey .percent_2 { color: rgb(184, 142, 90); }
  .tcs-survey .percent_3 { color: rgb(200, 0, 0); }
  .tcs-survey .e95 { width: 68.5%; margin: 12% auto 9.3%; }
  .tcs-survey .e96 { width: 70.5%; margin: 0px 0px 8.3% 6%; }
}
@media screen and (max-width: 425px) {
  .tcs-survey .b_08 { }
  .tcs-survey .b_08_list { background: rgb(255, 255, 255); border-radius: 22px; width: 90.5%; margin: 0px auto 6.5%; padding: 5.2% 4.8% 6.7% 5.5%; display: flex; justify-content: center; flex-flow: column; position: relative; }
  .tcs-survey .b_08_circle { width: 69.7%; margin: 9% auto 0px; position: relative; }
  .tcs-survey .donut237 { width: 100%; height: auto; transform: rotate(-90deg); }
  .tcs-survey .track, .tcs-survey .progress { fill: none; stroke-linecap: butt; stroke-width: 36.46px; }
  .tcs-survey .track { stroke: rgb(198, 198, 198); }
  .tcs-survey .progress { stroke: rgb(70, 194, 78); stroke-dasharray: 100; stroke-dashoffset: 100; transition: stroke-dashoffset 1.6s ease-out; }
  .tcs-survey .track { stroke: var(--track); }
  .tcs-survey .progress { stroke: var(--ring); }
  .tcs-survey .inner { fill: rgb(255, 255, 255); }
  .tcs-survey .separator { fill: none; stroke: rgb(255, 255, 255); stroke-linecap: butt; stroke-width: 36.46px; --sep: .6; stroke-dasharray: var(--sep) calc(100 - var(--sep)); stroke-dashoffset: 100; transition: stroke-dashoffset 1.6s ease-out; }
  .tcs-survey .sep-start { stroke-dashoffset: 0; transition: none; }
  .tcs-survey .b_08_data_inner { position: absolute; width: 31.1%; margin: 0px auto; top: 49%; left: 0px; right: 0px; }
  .tcs-survey .b_08_data_inner_2 { top: 49%; left: -1%; }
  .tcs-survey .b_08_data_item { position: relative; display: inline-block; width: fit-content; text-align: right; left: -6%; }
  .tcs-survey .num { margin: 0px; line-height: 1; text-align: right; font-weight: 700; font-size: 12vw; }
  .tcs-survey .countup { display: inline-block; text-align: right; font-variant-numeric: tabular-nums; font-feature-settings: "tnum", "lnum"; min-width: 3ch; }
  .tcs-survey .percent { font-weight: 700; font-size: 5vw; line-height: unset; color: rgb(70, 194, 78); margin-top: 0%; margin-bottom: 0px; }
  .tcs-survey .percent_2 { color: rgb(184, 142, 90); }
  .tcs-survey .percent_3 { color: rgb(200, 0, 0); }
}

/* 2026-10-17 木村さん「アンケート結果のフォントと配置が変」: D案の本文フォント指定（LINE Seed）がこの中にも効いて、
   TCS LP が使っている標準の書体（ヒラギノ）と幅が変わり、数字の位置がずれた。TCS LP と同じ書体・同じ行の決まりに戻す */
.tcs-survey { font-family: 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', 'Noto Sans JP', sans-serif; line-break: auto; text-wrap: wrap; font-kerning: auto; font-variant-numeric: normal; }
.tcs-survey * { font-variant-numeric: inherit; }
.tcs-survey .countup { font-variant-numeric: tabular-nums; }
