/* Confirmed SP changes only. PC/tablet and unprovided sections retain existing styles. */ @media (max-width:767px) { #fv { display:block; position:relative; min-height:0; background:#fff url('../images/sp-fv-photo.png') center top / 100% auto repeat-y; } #fv .fv_left { position:relative; z-index:1; padding:199px 17px 185px; } #fv .hero-copy { width:100%; margin:0; padding:0 13px 18px; background:white; text-align:center; } #fv .hero-eyebrow { margin:0 -13px; padding:8px 3px 8px clamp(88px,calc(100vw - 263px),112px); min-height:39px; color:white; background:linear-gradient(90deg,#212971,#184698 53%,#212971); font-size:clamp(16px,calc(4.8vw + 2px),20px); line-height:25px; letter-spacing:0; white-space:normal; } #fv h1 { margin:30px 0 0; font-size:clamp(38px,12.8vw,48px); line-height:1.15625; letter-spacing:1.2px; text-align:center; } #fv .sp-title-ai { font-family:Poppins,sans-serif; font-size:1.1041667em; } #fv .hero-description { margin:12px 0 0; font-size:15px; line-height:21px; letter-spacing:.4px; text-align:center; } #fv .hero-description-lead { display:block; } #fv .hero-highlights { display:flex; flex-direction:row; flex-wrap:nowrap; align-items:center; justify-content:center; gap:9px; margin:21px -1px 0; } #fv .hero-highlights li { width:min(152px,calc((100% - 9px)/2)); min-height:67.365px; grid-template-columns:27.11px minmax(0,1fr) 27.11px; } #fv .hero-laurel { content:url('../images/sp-laurel-left.svg'); width:27.1102px; height:67.3648px; } #fv .hero-laurel-right { content:url('../images/sp-laurel-right.svg'); } #fv .hero-highlights li>div>p:first-child { font-size:clamp(9px,3.2vw,12px); line-height:15.5px; letter-spacing:0; } #fv .highlight-value { margin-top:3px; } #fv .highlight-value strong { font-size:30px; line-height:35px; } #fv .highlight-value small { font-size:18px; } #fv .fv_cta_grp { display:none; margin-top:22px; } #fv .fv_cta_grp .cta_btn { text-align:left; } #fv .hero-note { width:100%; margin:0; padding:0 13px 14px; background:white; font-size:10px; line-height:17px; text-align:center; letter-spacing:0.03em; } #fv .fv_right { position:absolute; inset:0; min-height:0; pointer-events:none; } #fv .hero-photo-viewport { display:none; } #fv .fv_batch { width:125px; left:7px; right:auto; bottom:auto; top:100px; font-size:17px; z-index:2; } #fv .fv_batch>span { font-size:8px; margin-bottom:10px; } #results { padding:84px 0 60px; } #results .section-heading { padding:0 14px; } #results .section-heading-en { top:-65px; font-size:80px; line-height:1.2; } #results h2 { font-size:28px; line-height:1.4; max-width:320px; margin:auto; } #results .section-intro { font-size:13px; line-height:20.8px; max-width:270px; margin:19px auto 0; } #results .results-swiper { margin-top:29px; } #results .result-card { width:calc(100% - 28px); min-height:225px; padding:40px 12px 40px; box-shadow:none; } #results .result-card h3 { font-size:18px; line-height:26px; margin:0 0 10px; } #results .result-card>p:not(.result-author) { min-height:0; font-size:13px; line-height:28px; background-size:100% 1px; background-position:0 28px,0 56px,0 84px; } #results .result-author { font-size:11px; line-height:22px; padding-top:12px; } #results .result-corner { content:url('../images/sp-results-corner.svg'); width:36.9361px; height:36.9361px; } #results .result-corner-top { top:4px; left:6px; } #results .result-corner-bottom { bottom:4px; right:6px; } #results .results-note { margin:18px 17px 0; font-size:10px; line-height:17px; } #cta1 { min-height:0; background:linear-gradient(90deg,#252969,#23448b 50%,#242760); } #cta1 .section-heading-en { top:30px; font-size:80px; line-height:1; letter-spacing:.08em; } #cta1 .cta_sec_inner { padding:68px 17px 36px; } #cta1 .cta_sec_ttl { font-size:28px; line-height:1.4; } #cta1 .cta1-title-lead { display:block; } #cta1 .cta_sec_ttl span { background:none; color:#ffec92; } #cta1 .cta1-panel { display:grid; grid-template-columns:90px minmax(0,1fr); align-items:center; gap:22px 10px; margin:26px auto 0; padding:22px 20px 26px; width:100%; border-radius:15px; background:white; } #cta1 .cta_sec_batch { position:static; width:90px; font-size:18px; line-height:1.4; } #cta1 .cta_sec_text1 { margin:0; color:#000100; font-size:13px; font-weight:500; line-height:20.8px; text-align:left; letter-spacing:.3px; } #cta1 .cta_sec_text1 span { color:#a5144b; } #cta1 .cta_sec_cta_grp { grid-column:1/-1; margin:0; gap:12px; } #cta1 .cta_btn { width:100%; min-height:64px; padding:10px 18px 10px 20px; font-size:18px; } #cta1 .cta1-button-label { flex:1; text-align:center; } #cta1 .cta1-person { background:linear-gradient(90deg,#ef377d,#a7154d); } #cta1 .cta1-company { background:linear-gradient(90deg,#214185,#102743); } #witch { padding:84px 14px 56px; } #witch .section-heading-en { font-size:clamp(28px,8.5vw,44px); line-height:1.1; top:-42px; white-space:normal; } #witch h2 { font-size:28px; line-height:1.4; } #witch .section-intro { margin-top:19px; font-size:13px; line-height:20.8px; } #witch .witch_sec_box { margin-top:34px; gap:0; } #witch .comparison-card { min-height:0; padding:25px 18px 29px; border-radius:0; } #witch .witch_sec_box_left { border-radius:15px 15px 0 0; background-image:url('../images/sp-comparison-left.png'); } #witch .witch_sec_box_right { border-radius:0 0 15px 15px; background-image:url('../images/sp-comparison-right.png'); } #witch .comparison-card h3 { font-size:22px; line-height:1.4; } #witch .witch_sec_list { font-size:13px; line-height:1.6; margin-top:15px; gap:10px; } #witch .comparison-person { bottom:-16px; } #witch .comparison-person-left { left:auto; right:8px; width:72px; } #witch .comparison-person-right { right:8px; width:72px; } #witch .comparison-arrow { width:72px; height:auto; margin-top:24px; } #witch .comparison-conclusion { font-size:22px; line-height:1.55; letter-spacing:0; margin-top:10px; } #witch .comparison-conclusion strong { padding-inline:3px; } #impact { padding:87px 14px 42px; background:linear-gradient(135deg,#26357f,#1f469f 55%,#181c46); } #impact::before { border-radius:0; } #impact .section-heading h2,#impact .impact-eyebrow,#impact .section-intro,#impact .section-heading-en { color:white; } #impact .section-heading-en { font-size:clamp(27px,7.5vw,46px); line-height:1.15; top:-52px; white-space:normal; } #impact .impact-eyebrow { font-size:18px; line-height:1.4; margin-bottom:26px; } #impact .section-heading h2 { font-size:28px; line-height:1.4; } #impact .section-intro { font-size:13px; line-height:21px; font-weight:500; } #impact .impact_sec_box { margin-top:22px; gap:16px; } #impact .impact-card { padding:27px 18px 28px; border-radius:8px; } #impact .impact-card h3 { font-size:22px; line-height:1.4; gap:12px; margin-left:-7px; margin-bottom:20px; } #impact .impact-number { font-size:45px; line-height:1; padding-right:8px; } #impact .impact-row { gap:17px; font-size:13px; line-height:21px; } #impact .impact-row>p,#impact .impact-copy { font-size:13px; line-height:21px; letter-spacing:1px; } #impact .impact-stat-fill { width:100%; min-height:56px; padding:8px; flex-direction:row; gap:8px; } #impact .impact-stat-label { font-size:13px; line-height:17px; } #impact .impact-stat strong { font-size:38px; } #impact .impact-illustration { width:100%; grid-template-columns:repeat(2,minmax(0,1fr)); grid-template-rows:auto auto auto; gap:12px 9px; } #impact .impact-bubble { width:100%; max-width:100%; min-height:51px; margin:0; padding:7px 3px; font-size:clamp(10px,3.2vw,13px); line-height:16px; white-space:normal; } #impact .impact-bubble-risk { grid-column:1; grid-row:1; } #impact .impact-bubble-effect { grid-column:2; grid-row:1; } #impact .impact-bubble-skills { grid-column:1; grid-row:2; } #impact .impact-bubble-image { grid-column:2; grid-row:2; } #impact .impact-illustration .impact-person { grid-column:1/-1; grid-row:3; justify-self:center; width:188px; height:164px; margin:0; } #impact .impact-bubble::after { top:100%; left:50%; transform:none; } #impact .impact-copy p+p { margin-top:24px; } #impact .impact-card:nth-child(3) .impact-person { width:180px; height:180px; margin:0 auto 12px; } #impact .impact-association { width:146px; height:146px; margin:auto; } #impact .impact-source { color:#c0c9e8; font-size:10px; line-height:17px; } #about1 .people-swiper .swiper-slide { width:clamp(375px,125vw,626px); } #about1 .people-swiper img { width:100%; aspect-ratio:1252/834; } #about1 .person-intro { width:calc(100% - 28px); min-height:0; margin-top:-22px; padding:36px 17px 44px; } #about1 .person-intro::before { inset:7px 8px; border-width:5px; } #about1 .person-intro h2 { font-size:28px; line-height:36px; max-width:290px; margin:auto; } #about1 .person-abilities { width:min(285.5px,100%); padding:0 21px 0 48px; gap:5px; font-size:13px; line-height:21px; margin:21px auto 16px; background:url('../images/sp-person-brackets.svg') center / 285.5px 126.5px no-repeat; } #about1 .person-abilities::before,#about1 .person-abilities::after { content:none; } #about1 .person-abilities li::before { left:-19px; top:6px; } #about1 .person-intro>p { text-align:center; font-size:15px; line-height:21px; letter-spacing:.3px; } #message { padding:85px 0 65px; } #message .section-heading { padding:0 12px; } #message .section-heading-en { top:-65px; font-size:80px; line-height:1.2; } #message h2 { font-size:28px; line-height:1.4; max-width:300px; margin:auto; } #message .section-intro { font-size:13px; line-height:20.8px; margin-top:19px; } #message .message-rows { margin-top:28px; gap:17px; } #message .message-card { width:calc(100% - 29px); max-width:440px; min-height:173px; padding:20px 14px 14px; border-radius:0; font-size:15px; line-height:24px; text-align:center; } #message .message-card::before { top:-12px; } #message .message-card figcaption { font-size:12px; line-height:20px; padding-top:14px; } #benefits>.section-heading { padding-inline:0; } #benefits .merit-eyebrow { font-size:18px; line-height:1.3; margin-bottom:28px; } #benefits #merit-title { font-size:28px; line-height:1.4; } #benefits .section-heading-en { font-size:80px; line-height:1.2; top:-65px; } #benefits .section-intro { font-size:14px; line-height:22px; font-weight:500; } #benefits .merit-tabs { width:calc(100% + 10px); margin:25px -5px 0; } #benefits .merit-tabs button { min-height:64px; font-size:20px; padding:14px 6px; border-radius:10px 10px 0 0; } #benefits .merit-tabs button[aria-selected="false"] { min-height:52px; padding-block:10px; } #benefits #merit-person-panel { width:calc(100% + 10px); max-width:none; margin-inline:-5px; padding:18px; gap:17px; border-radius:0 0 15px 15px; } #merit-person-panel .merit-list { gap:17px; } #merit-person-panel .merit-list li { padding-left:28px; } #merit-person-panel .merit-list li::before { width:20px; height:20px; top:0; } #merit-person-panel .merit-list h3 { font-size:16px; line-height:19px; margin-bottom:5px; } #merit-person-panel .merit-list p { font-size:13px; line-height:17px; } #qualification-about { padding:88px 14px 59px; } #qualification-about .section-heading { padding:0; } #qualification-about h2 { font-size:28px; line-height:1.4; } #qualification-about .section-heading-en { top:-65px; font-size:80px; line-height:1.2; } #qualification-about .section-intro { margin-top:19px; font-size:13px; line-height:21px; } #qualification-about .qualification-steps { margin-top:23px; gap:7px; text-align:left; } #qualification-about .qualification-steps>li { display:grid; grid-template-columns:33px minmax(90px,138px) minmax(0,1fr); align-items:center; gap:10px; } #qualification-about .qualification-steps h3 { display:flex; flex-direction:column; justify-content:flex-start; gap:6px; width:33px; min-height:130px; padding:5px 3px; clip-path:none; font-size:16px; line-height:1.2; } #qualification-about .qualification-steps h3 span { width:27px; height:27px; line-height:25px; font-size:15px; } #qualification-about .qualification-step-label { writing-mode:vertical-rl; text-orientation:upright; letter-spacing:1px; } #qualification-about .qualification-art { width:100%; height:auto; aspect-ratio:1; margin:0; } #qualification-about .qualification-steps p { font-size:18px; line-height:1.5; } #qualification-about .qualification-links { flex-direction:row; gap:7px; margin-top:22px; } #qualification-about .qualification-links a { width:calc((100% - 7px)/2); min-height:64px; padding:8px 14px; gap:4px; font-size:16px; } #qualification-about .qualification-links img { flex-basis:24px; width:24px; height:24px; } #data { padding:88px 16px 54px; } #data>.section-heading { padding:0; } #data .section-heading-en { font-size:80px; top:-65px; line-height:1.2; } #data #data-title { font-size:28px; line-height:1.4; max-width:320px; margin:auto; } #data #data-title .heading-phrase { background:#1f3c8a; color:white; padding-inline:5px; } #data .section-intro { font-size:13px; line-height:21px; } #data .data-content { margin-top:32px; } #data .data-subtitle { font-size:24px; line-height:28px; margin-bottom:16px; } #data .data-age-card { display:flex; flex-direction:column; gap:4px; padding:18px 18px 24px; border-radius:15px; } #data .data-age-intro { padding:0; } #data .data-age-intro h4,#data .data-stat-card h4 { font-size:15px; line-height:24px; border-left-width:4px; padding-left:12px; } #data .data-age-intro>p { font-size:clamp(20px,6.8vw,28px); line-height:1.2; margin-top:22px; white-space:nowrap; } #data .data-age-intro strong,#data .data-age-intro .age-emphasis strong { font-family:Poppins,sans-serif; font-size:1.15em; } #data .data-age-intro .data-art { display:block; width:100%; height:auto; margin:15px auto 0; aspect-ratio:298/112; object-fit:contain; } #data .age-chart { width:100%; min-height:0; height:auto; aspect-ratio:1; padding:0; background:transparent; } #data .age-donut { width:100%; height:auto; aspect-ratio:1; max-width:287.862px; background:url('../images/sp-age-donut.svg') center / contain no-repeat; } #data .age-donut p { width:60%; height:auto; aspect-ratio:1; background:none; font-size:15px; } #data .age-donut strong { color:#b61d57; font-family:Poppins,sans-serif; font-size:50px; line-height:1.2; } #data .age-donut strong span { font-size:32px; } #data .age-donut small { font-size:12px; } #data .age-chart-labels>div { font-size:13px; } #data .age-chart-labels dd { font-family:Poppins,sans-serif; font-size:22px; } #data .age-40 { right:0; top:12px; color:#b61d57; } #data .age-50 { left:auto; right:0; bottom:10px; color:#b61d57; } #data .age-30 { left:0; top:10px; } #data .age-20 { left:0; top:30%; } #data .age-60 { left:0; right:auto; top:auto; bottom:10px; } #data .data-summary { margin-top:15px; gap:15px; } #data .data-stat-card { padding:18px; border-radius:15px; min-height:151px; position:relative; overflow:hidden; } #data .data-stat-with-art { margin-top:15px; min-height:100px; align-items:center; } #data .data-stat-with-art p { font-size:18px; line-height:1.2; } #data .data-stat-with-art p>small { font-size:13px; } #data .data-stat-with-art strong { font-family:Poppins,sans-serif; font-size:40px; } #data .data-stat-with-art strong>span { font-size:24px; } #data .data-stat-with-art b { font-size:22px; line-height:1.3; } #data .data-stat-with-art .data-art { width:100px; height:125px; flex-basis:100px; object-fit:contain; } #data .data-ratio-with-art { display:block; min-height:113px; } #data .data-ratio-values { width:max-content; position:relative; z-index:1; } #data .data-ratio-values>div { gap:3px; } #data .data-ratio-values>div+div { margin-top:0; } #data .data-ratio-values dt { width:26px; font-size:13px; } #data .data-ratio-with-art .data-ratio-values strong { font-size:40px; } #data .data-ratio-values strong>span { font-size:24px; } #data .ratio-separator,#data .data-ratio-values .ratio-company-unit { font-size:22px; } #data .data-ratio-with-art>.data-art { position:absolute; right:8px; top:36px; width:91px; height:91px; } #data .data-ratio-growth { position:absolute; right:12px; bottom:10px; font-size:9px!important; padding:3px 5px; } #data .data-completion>p { margin-top:17px; font-size:16px; line-height:1.4; } #data .data-completion strong { font-size:40px; } #data .data-completion strong span { font-size:26px; } #data .completion-suffix { font-size:18px; } #data .data-rankings { margin-top:32px; } #data .ranking-grid { gap:15px; margin-top:16px; } #data .ranking-grid article { padding:20px; } #data .ranking-grid h4 { font-size:15px; line-height:24px; border-left-width:4px; padding-left:10px; margin-bottom:20px; } #data .worry-ranking,#data .decision-ranking { display:grid; grid-template-columns:1fr; gap:20px; } #data .worry-ranking li,#data .decision-ranking li { display:grid; grid-template-columns:26px minmax(0,1fr) 90px; grid-template-rows:auto auto; gap:8px 10px; } #data .worry-ranking li>div,#data .decision-ranking li>div { display:contents; } #data .ranking-grid .rank-number { grid-column:1; grid-row:1; width:26px; height:26px; font-size:15px; line-height:24px; } #data .worry-ranking li p,#data .decision-ranking li p { grid-column:2/-1; grid-row:1; font-size:15px; line-height:23px; color:#000; } #data .worry-ranking li:first-child p { font-size:18px; } #data .rank-prefix { color:#000; } #data .rank-highlight { color:#1f3c8a; } #data .rank-track { display:block; grid-column:1/3; grid-row:2; margin:0; height:24px; background:#f2f6ff; } #data .worry-ranking li:first-child .rank-track { height:24px; } #data .ranking-grid strong { grid-column:3; grid-row:2; font-family:Poppins,sans-serif; font-size:30px; line-height:28px; color:#1f3c8a; text-align:right; } #data .ranking-grid strong small { font-size:1em; } #data .worry-ranking li:last-child strong,#data .decision-ranking li:last-child strong { color:#7292d2; } #data .worry-ranking li:last-child .rank-track>span,#data .decision-ranking li:last-child .rank-track>span { background:#c1d6f7; } #data .data-expanded { margin-top:38px; } #data .data-expanded-heading h3,#data .data-followup-title { font-size:24px; line-height:1.3; } #data .data-expanded-heading p { font-size:13px; line-height:21px; } #data .data-outcomes { gap:15px; } #data .data-outcome { padding:20px; border-radius:15px; } #data .data-outcome h4 { font-size:15px; line-height:24px; border-left-width:4px; padding-left:10px; } #data .data-outcome-body { grid-template-columns:minmax(0,1fr) minmax(0,1fr); min-height:0; margin-top:12px; align-items:center; } #data .data-outcome p { font-size:18px; line-height:1.4; } #data .data-outcome strong { font-family:Poppins,sans-serif; font-size:46px; line-height:1.2; } #data .data-outcome strong>span { font-size:24px; } #data .outcome-approx { color:#1f3c8a; } #data .data-outcome-art img { position:static; width:100%; height:100%; object-fit:contain; } #data .data-outcome-body>img { height:auto; width:100%; } #data .data-art-time { width:100%; } #data .data-art-usage { width:110px; max-width:100%; } #data .data-art-midlife { width:100%; } #data .data-outcome:nth-child(4) { display:grid; grid-template-columns:minmax(0,1fr) 100px; align-items:center; gap:12px 8px; } #data .data-outcome:nth-child(4) h4 { grid-column:1/-1; } #data .data-frequency-copy { margin:0; text-align:left; } #data .data-frequency-art { margin:0; width:100px; } #data .time-comparison { gap:22px; margin:16px auto 0; } #data .time-comparison dd { height:170px; } #data .time-comparison strong { font-size:36px; } #data .time-comparison>div:first-child strong { font-size:28px; } #data .time-comparison .comparison-bar { height:calc(105px * var(--bar-ratio)); } #data .data-followup-title { margin:32px 0 16px; } #data .data-followup-rankings { gap:16px; } #data .data-followup-rankings article { padding:20px; } #data .data-followup-rankings h4 { font-size:16px; line-height:24px; border-left-width:4px; padding-left:10px; } #data .data-followup-rankings ol { gap:0; margin-top:0; } #data .data-followup-rankings li { grid-template-columns:26px minmax(0,1fr) 77px; gap:8px; padding:12px 4px; min-height:59px; } #data .data-followup-rankings .rank-number { width:26px; height:26px; line-height:24px; font-size:15px; } #data .data-followup-rankings p { font-size:14px; line-height:19px; } #data .data-followup-rankings strong { font-family:Poppins,sans-serif; font-size:24px; text-align:right; } #data .data-followup-rankings strong span { font-size:24px; } #data .data-recommend { display:flex; flex-direction:column; gap:0; padding:20px 20px 0; overflow:hidden; } #data .data-recommend>div { width:100%; } #data .data-recommend h4 { font-size:16px; border-left-width:4px; padding-left:10px; } #data .data-recommend p { margin:6px 0 0; text-align:center; font-size:18px; line-height:1.4; } #data .data-recommend strong { font-family:Poppins,sans-serif; font-size:46px; } #data .data-recommend strong>span { font-size:26px; } #data .data-recommend img { width:211px; height:114px; object-fit:contain; } #data .data-expanded-note { margin-top:24px; font-size:11px; line-height:17px; } #data .data-more { min-height:64px; margin-top:24px; } #business .business-subheading:has(+.business-examples) { margin-bottom:28px; } #business .business-examples { width:calc(100% + 12px); margin-inline:-6px; gap:14px; } #business .business-examples>li { border-radius:0; padding:27px 18px 22px; background:#f2f6ff; overflow:hidden; } #business .business-examples .example-number { top:-19px; left:0; font-size:80px; line-height:1.3; color:#fff; opacity:1; } #business .business-examples h4 { display:block; min-height:0; color:#000; font-size:22px; line-height:1.3; } #business .business-examples h4 em { font-style:normal; color:#a5144b; } #business .business-examples img { width:216px; height:144px; margin:12px auto 0; } #business .business-examples p { font-size:13px; line-height:21px; margin-top:6px; letter-spacing:.5px; } #business .business-examples>li:nth-child(3) img { width:221px; height:147px; } #business .business-customers { width:calc(100% + 40px); max-width:none; margin:59px -20px 0; padding:54px 15px 60px; border-radius:0; background:#f2f6ff; } #business .business-customers>.business-subheading { margin:0 0 28px; } #business .business-customers>.business-subheading>p { font-size:15px; line-height:12px; font-family:Poppins,sans-serif; } #business .business-customers>.business-subheading h3 { font-size:24px; line-height:1.3; margin-top:20px; } #business .business-metrics { gap:13px; } #business .business-metrics article { position:relative; min-height:169px; padding:18px; border-radius:15px; } #business .business-metrics h4,#business .business-effects h4 { color:#000; font-size:15px; line-height:24px; border-left:4px solid #000; padding-left:12px; margin:0; } #business .business-metrics article>div { display:grid; grid-template-columns:minmax(0,1fr) 127px; gap:0; align-items:center; margin-top:10px; } #business .business-metrics p { font-size:18px; line-height:1.2; color:#000; } #business .business-metrics strong { font-family:Poppins,sans-serif; font-size:42px; line-height:1.1; } #business .business-metrics b { font-size:18px; color:#000; } #business .business-metrics small { font-size:9px; line-height:1.3; margin-top:7px; color:#949494; } #business .business-metrics img { width:127px; height:127px; object-fit:contain; } #business .business-cost-caption { font-size:13px; } #business .business-metric-unit { color:#1f3c8a; font-size:24px; } #business .business-effects { padding:18px; margin-top:13px; border-radius:15px; } #business .business-effects h4 { font-size:15px; } #business .business-outcomes { gap:10px; margin-top:10px; } #business .business-outcomes li { display:grid; grid-template-columns:minmax(0,1fr) minmax(90px,145px); padding:0; min-height:118px; gap:0; } #business .business-outcomes img { grid-column:2; grid-row:1; width:100%; height:auto; aspect-ratio:1.5; object-fit:contain; } #business .business-outcomes li>div { grid-column:1; grid-row:1; display:flex; flex-direction:column; align-items:flex-start; width:calc(100% + 45px); z-index:1; } #business .business-outcomes strong { order:-1; font-family:Poppins,sans-serif; font-size:40px; line-height:1.15; white-space:nowrap; } #business .business-outcomes small { font-size:24px; } #business .business-outcomes .business-stat-suffix { font-family:"Noto Sans JP",sans-serif; font-size:18px; color:#000; } #business .business-outcomes p { font-size:15px; line-height:24px; color:#000; } #business .business-outcomes em { font-style:normal; color:#a5144b; } #business .business-customers .business-source { margin-top:25px; font-size:10px; line-height:16px; text-align:center; color:#949494; } } /* TODO: Business 3-step interaction, hiding header/FV CTAs, SP resume asset, company Merit details, and breakpoint expansion are excluded. */ @media(max-width:767px) { #results .sp-heading-line,#message .sp-heading-line,#benefits .sp-heading-line { display:block; } #results h2,#message h2 { max-width:none; } #cta1 .cta1-panel { grid-template-columns:70px minmax(0,1fr); } #cta1 .cta_sec_batch { margin-left:-12px; } #cta1 .cta_sec_text1 { text-wrap:pretty; } #witch .witch_sec_box_left .witch_sec_list li:nth-last-child(-n+2) { padding-right:56px; } #qualification-about .section-intro { max-width:312px; margin-inline:auto; text-wrap:pretty; } #qualification-about .qualification-steps p { text-wrap:balance; } #data .age-chart-labels div,#data .age-chart-labels dt,#data .age-chart-labels dd { background:none; } #business .business-metrics article>div { display:block; min-height:91px; } #business .business-metrics p { position:relative; z-index:1; max-width:72%; } #business .business-metrics img { position:absolute; right:15px; bottom:10px; } } @media(max-width:767px) { #cta1 .cta_sec_ttl,#qualification-about .section-intro { text-wrap:balance; } #data .data-outcome:first-child .data-outcome-body { grid-template-columns:minmax(0,160px) minmax(0,1fr); } #data .data-outcome:first-child p { white-space:nowrap; } #data .data-outcome:first-child strong { font-size:clamp(40px,12.27vw,46px); } #data .data-outcome:nth-child(5) p br { display:none; } #data .data-followup-rankings p { text-wrap:balance; } } @media(max-width:767px) { #data .time-comparison { position:relative; gap:59px; max-width:259px; } #data .time-comparison .comparison-bar { height:calc(118px * var(--bar-ratio)); } #data .time-comparison::before { content:""; position:absolute; width:59.799px; height:117.301px; left:calc(50% - 29.8995px); bottom:28px; background:url('../images/sp-data-growth-line.png') center / contain no-repeat; pointer-events:none; } } /* SP展開メニュー：旧デザインの背景と白文字を継承。項目/URL/CTA要素は既存を使用。 */ @media(max-width:767px) { #header:has(#g-nav.panelactive) { inset:0 0 auto; width:100%; height:60px; min-height:60px; padding:8px 16px; border-radius:0; background:white; backdrop-filter:none; justify-content:flex-end; } #header:has(#g-nav.panelactive) .header-menu-control { margin-left:auto; } #header:has(#g-nav.panelactive) .sp_menu_line { height:1px; width:38px; } #header:has(#g-nav.panelactive) .openbtn { width:44px; height:44px; padding:3px; gap:8px; } #header .openbtn.active .sp_menu_line1 { transform:translateY(9px) rotate(20deg); } #header .openbtn.active .sp_menu_line3 { transform:translateY(-9px) rotate(-20deg); } #header #g-nav.panelactive { position:fixed; inset:60px 0 0; width:100%; height:calc(100dvh - 60px); max-height:none; display:flex; flex-direction:column; padding:0 0 56px; border-radius:0; background:#212b75 url('../images/sp-menu-background.png') center / 100% 100% no-repeat; box-shadow:none; overflow-y:auto; overscroll-behavior:contain; } #header #g-nav.panelactive ul { flex:none; align-items:center; gap:24px; margin:50px 20px 52px; padding:0; } #header #g-nav.panelactive ul a { padding:0; color:white; font-size:20px; line-height:28px; font-weight:700; text-align:center; } #header #g-nav.panelactive .header_right { flex:none; display:flex; flex-direction:column; gap:16px; width:min(315px,calc(100% - 40px)); margin:0 auto; } #header #g-nav.panelactive .header_right .cta_btn { width:100%; min-height:72px; padding:10px 10px 10px 24px; font-size:20px; line-height:1.4; justify-content:center; gap:12px; position:relative; } #header #g-nav.panelactive .header_right .cta_btn img { position:absolute; right:10px; width:36px; height:36px; } #header #g-nav.panelactive .header_right .cta_btn { padding-right:47px; } } /* SP closed menu button: Figma 161:20202. Existing application links remain visible. */ @media(max-width:767px) { #header:not(:has(#g-nav.panelactive)) { inset:6px 5px auto 8px; min-height:44px; padding:0; gap:6px; } #header:not(:has(#g-nav.panelactive)) .header-menu-control { order:2; flex:0 0 44px; margin-left:auto; } #header:not(:has(#g-nav.panelactive))>.header_right { order:1; } #header .openbtn:not(.active) { width:44px; height:44px; border-radius:0; padding:0; gap:0; position:relative; background:linear-gradient(90deg,#212971 0%,#184698 52.885%,#212971 100%); } #header .openbtn:not(.active) .sp_menu_line { position:absolute; left:10.057px; width:25.143px; height:1.257px; background:#fff; transform:none; } #header .openbtn:not(.active) .sp_menu_line1 { top:12.57px; } #header .openbtn:not(.active) .sp_menu_line2 { top:21.37px; } #header .openbtn:not(.active) .sp_menu_line3 { top:30.17px; } } /* Restore SP vertical photo loop and reuse the existing header CTA nodes at the bottom. */ @media(max-width:767px) { /* One native 750 x 2719 photo tile, rendered at the viewport width. */ #fv { animation:sp-fv-background-flow 150s linear infinite; } @keyframes sp-fv-background-flow { from { background-position:center 0; } to { background-position:center -362.5333333333vw; } } body { padding-bottom:0; } .site-footer { padding-bottom:calc(82px + env(safe-area-inset-bottom,0px)); } #header:not(:has(#g-nav.panelactive)) { inset:6px 5px auto auto; width:44px; background:transparent; backdrop-filter:none; } #header:not(:has(#g-nav.panelactive))>.header_right { position:fixed; inset:auto 0 0; width:100%; display:flex; flex-direction:row; gap:0; padding-bottom:env(safe-area-inset-bottom,0px); background:transparent; } #header:not(:has(#g-nav.panelactive))>.header_right .cta_btn { flex:1 1 50%; width:50%; min-width:0; min-height:72px; padding:10px 6px; justify-content:center; gap:6px; font-size:clamp(11.5px,3.8vw,15px); line-height:1.5; border-radius:0; letter-spacing:0; } #header:not(:has(#g-nav.panelactive))>.header_right .cta_btn:first-child { border-top-left-radius:14px; } #header:not(:has(#g-nav.panelactive))>.header_right .cta_btn:last-child { border-top-right-radius:14px; } #header:not(:has(#g-nav.panelactive))>.header_right .cta_btn img { width:26px; height:26px; flex-basis:26px; } } @media(max-width:767px) and (prefers-reduced-motion:reduce) { #fv { animation:none; } } @media(max-width:767px) { #witch-title .witch-title-lead { display:block; } } /* SPの英字装飾見出しはセクションごとの指定より優先して80pxに統一。 */ @media(max-width:767px) { .section-heading-en { font-size:80px !important; } } /* 展開時は閉じるボタンの背後まで同じ背景画像で覆う。 */ @media(max-width:767px) { #header:has(#g-nav.panelactive) { background:transparent; } #header:has(#g-nav.panelactive) .header-menu-control { position:relative; z-index:1; } #header:has(#g-nav.panelactive) .sp_menu_line { background:#fff; } #header #g-nav.panelactive { inset:0; height:100dvh; padding-top:60px; } } @media(max-width:767px) { #witch .comparison-person-left { z-index:1; } } @media(max-width:767px) { #impact-title .impact-title-lead { display:block; } } @media(max-width:767px) { #impact .impact-intro-break { display:inline; } } /* Figma 161:20470: 青い棒242px / 全体309px。右端にグレーを残す。 */ @media(max-width:767px) { #impact .impact-stat { container-type:inline-size; } #impact .impact-stat-fill { width:calc(100% * 242.008 / 309); min-height:56px; padding:8px min(8px,2.59cqw); gap:min(8px,2.59cqw); } #impact .impact-stat-label { font-size:min(13px,4.207cqw); line-height:1.3; letter-spacing:min(1px,0.324cqw); } #impact .impact-stat strong { font-size:min(38px,12.298cqw); } #impact .impact-stat small { font-size:min(19.42px,6.285cqw); } } /* メニュー内のCTAをCTA1と同じボタン仕様に揃える。 */ @media(max-width:767px) { #header #g-nav.panelactive .header_right { gap:12px; } #header #g-nav.panelactive .header_right .cta_btn { min-height:64px; padding:10px 18px 10px 20px; font-size:18px; line-height:1.5; justify-content:space-between; gap:14px; } #header #g-nav.panelactive .header-cta-label { flex:1; text-align:center; } #header #g-nav.panelactive .header_right .cta_btn img { position:static; width:32px; height:32px; flex-basis:32px; } #header #g-nav.panelactive .cta_btn_k { background:linear-gradient(90deg,#ef377d,#a7154d); } #header #g-nav.panelactive .cta_btn_c { background:linear-gradient(90deg,#214185,#102743); } #header #g-nav.panelactive .cta_btn_k img { content:url('../images/cta1-arrow-person.svg'); } #header #g-nav.panelactive .cta_btn_c img { content:url('../images/cta1-arrow-company.svg'); } } @media(max-width:767px) { #about1 .audience-cards { grid-template-columns:minmax(0,1fr); } } /* SPの申込CTA配色はPC版と統一。 */ @media(max-width:767px) { .cta_sec_cta_grp :is(.cta1-person,.cta2-person,.cta_btn_k) { background:linear-gradient(90deg,#ef377d,#a7154d); color:#fff; } .cta_sec_cta_grp :is(.cta1-company,.cta2-company,.cta_btn_c) { background:linear-gradient(90deg,#214185,#102743); color:#fff; } } /* Figma 147:6621: 大きな丸写真を使うSPの縦並びカード。既存の写真・トリミングを再利用。 */ @media(max-width:767px) { #about1 .audience-cards { width:min(287px,100%); margin-inline:auto; grid-template-columns:minmax(0,1fr); gap:24px; } #about1 .audience-cards li { min-height:0; padding:26px 32px; border-radius:12px; box-shadow:0 4px 12px rgb(0 0 0 / .2); } #about1 .audience-cards .audience-photo { width:159px; height:159px; max-width:100%; margin:0 auto 16px; } #about1 .audience-case { left:28px; top:-14px; width:67px; font-size:19px; line-height:1; text-align:center; letter-spacing:.76px; } #about1 .audience-case span { margin-top:4px; font-size:54px; line-height:1; letter-spacing:2.16px; text-align:left; } #about1 .audience-cards li>p:last-child { font-size:20px; line-height:1.6; letter-spacing:.8px; color:#1b1b1b; } } /* CTA1: 旧SPデザイン147:6856の配置とボタン。本文・URL・PCは維持。 */ @media(max-width:767px) { #cta1 .section-heading-en { top:-39px; letter-spacing:.14em; line-height:1.7; } #cta1 .cta_sec_inner { display:grid; grid-template-columns:86px minmax(0,1fr); gap:28px 14px; padding:42px 20px 60px; max-width:415px; } #cta1 .cta1-panel { display:contents; } #cta1 .cta_sec_ttl { grid-column:2; grid-row:1; align-self:center; font-size:28px; line-height:1.4; letter-spacing:1.12px; text-align:left; text-wrap:wrap; } #cta1 .cta1-title-lead { display:inline; } #cta1 .cta_sec_ttl span { color:inherit; background:linear-gradient(transparent 65%,#bc1b59 65% 93%,transparent 93%); } #cta1 .cta_sec_batch { grid-column:1; grid-row:1; align-self:center; width:96px; margin:0 0 0 -10px; font-family:'Shippori Mincho',serif; font-size:22px; line-height:1.3; background:#a5144b; position:relative; inset:auto; overflow:hidden; isolation:isolate; } #cta1 .cta_sec_batch::before { content:''; position:absolute; inset:0; z-index:-1; background:url('../images/sp-cta-legacy-badge-half.svg') center top / 100% 50% no-repeat; transform:rotate(-45deg); } #cta1 .cta_sec_text1 { grid-column:1/-1; margin:0; color:white; font-size:15px; line-height:1.6; letter-spacing:.6px; text-align:center; } #cta1 .cta_sec_text1 span { color:inherit; } #cta1 .cta_sec_cta_grp { grid-column:1/-1; margin:12px 0 0; gap:16px; } #cta1 .cta_btn { width:100%; min-height:72px; padding:18px 10px 18px 26px; gap:12px; background:#0f253e; color:white; font-size:20px; line-height:1; letter-spacing:.8px; border-radius:6px; } #cta1 .cta_btn img { content:url('../images/sp-cta-legacy-arrow.svg'); width:36px; height:36px; flex:0 0 36px; } } @media(max-width:767px) { #qualification-about .qualification-link-lead { display:block; } } /* SP展開メニューのCTAを通常のflex配置に統一。 */ @media(max-width:767px) { #header #g-nav.panelactive .header_right .cta_btn { display:flex; align-items:center; justify-content:space-between; padding:10px 18px 10px 20px; } #header #g-nav.panelactive .header_right .header-cta-label { flex:0 1 auto; min-width:0; text-align:left; } #header #g-nav.panelactive .header_right .cta_btn img { position:static; flex:0 0 32px; margin:0; } } /* SP資格ステップ：下向きの先端と、次段上部の切り欠き。 */ @media(max-width:767px) { #qualification-about .qualification-steps h3 { align-self:stretch; height:100%; padding:13px 3px; } #qualification-about .qualification-steps>li:first-child h3 { padding-top:8px; clip-path:polygon(0 0,100% 0,100% calc(100% - 7px),50% 100%,0 calc(100% - 7px)); } #qualification-about .qualification-steps>li:nth-child(2) h3 { clip-path:polygon(0 0,50% 7px,100% 0,100% calc(100% - 7px),50% 100%,0 calc(100% - 7px)); } #qualification-about .qualification-steps>li:last-child h3 { padding-bottom:8px; clip-path:polygon(0 0,50% 7px,100% 0,100% 100%,0 100%); } } /* Figma 161:20769: SP年代カード。テキストは共通HTML、グラフと人物は既存素材。 */ @media(max-width:767px) { #data .data-age-card { width:100%; max-width:none; margin-inline:auto; padding:18px 14px 24px; gap:0; container-type:inline-size; } #data .data-age-intro h4 { margin-left:4px; font-size:16px; line-height:27.2px; letter-spacing:.5px; } #data .data-age-intro>p { margin:14px 0 0; color:#000; font-size:min(27px,8.71cqw); line-height:1; text-align:center; letter-spacing:0; } #data .data-age-intro strong,#data .data-age-intro .age-emphasis strong { font-size:min(44px,14.2cqw); line-height:1; } #data .data-age-intro .data-art { width:298px; max-width:100%; height:auto; margin:0 auto; aspect-ratio:298/112; } #data .age-chart { background:#f2f6ff; border-radius:15px; width:100%; aspect-ratio:316/296; grid-template:1fr / minmax(0,1fr); } #data .age-donut { width:91.0956%; max-width:287.862px; height:auto; transform:none; } #data .age-donut p { color:#b61d57; font-size:min(15.725px,5.07cqw); width:70%; } #data .age-donut strong { font-size:min(55.911px,18.04cqw); line-height:1.2; letter-spacing:0; } #data .age-donut strong span { font-size:min(34.944px,11.27cqw); } #data .age-donut small { font-size:min(11.693px,3.77cqw); margin-top:0; color:#000; } #data .age-donut small b { font-family:Poppins,sans-serif; font-size:min(15.59px,5.03cqw); } #data .age-chart-labels { position:absolute; inset:0; } #data .age-chart-labels>div { padding:0; font-size:13px; line-height:23.762px; letter-spacing:.4368px; color:#000; white-space:nowrap; } #data .age-chart-labels dd { font-size:22px; line-height:23.762px; color:#325fb8; } #data .age-chart-labels .age-40 dd,#data .age-chart-labels .age-50 dd { color:#b61d57; } #data .age-chart-labels .age-40 { top:14px; right:8.86%; left:auto; bottom:auto; display:block; } #data .age-chart-labels .age-50 { top:auto; right:8.23%; left:auto; bottom:14px; display:block; } #data .age-chart-labels .age-30 { top:19px; left:5.38%; right:auto; bottom:auto; display:flex; align-items:baseline; gap:9px; } #data .age-chart-labels .age-20 { top:30.74%; left:3.16%; right:auto; bottom:auto; display:block; } #data .age-chart-labels .age-60 { top:auto; left:6%; right:auto; bottom:14px; display:flex; align-items:baseline; gap:9px; } #data .age-chart-labels>div::after { content:''; position:absolute; background-position:center; background-repeat:no-repeat; background-size:contain; pointer-events:none; } #data .age-40::after { width:25.672px; height:28.274px; right:100%; top:22px; background-image:url('../images/sp-age-line-40.svg'); } #data .age-50::after { width:21.378px; height:13.155px; right:100%; top:0; background-image:url('../images/sp-age-line-50.svg'); transform:scaleY(-1); } #data .age-30::after { width:18.604px; height:24.498px; left:66%; top:22px; background-image:url('../images/sp-age-line-30.svg'); transform:rotate(105deg); } #data .age-60::after { width:13.293px; height:51.407px; left:42%; bottom:100%; background-image:url('../images/sp-age-line-60.svg'); } } @media(max-width:767px) { #data .worry-ranking li:is(:first-child,:nth-child(3))>.rank-number, #data .worry-ranking li:is(:first-child,:nth-child(3)) p { align-self:start; } } /* Figma 161:20720 / 161:20729: 活用量・利用頻度のSPカードのみ。 */ @media(max-width:767px) { #data .data-outcome:is(:nth-child(3),:nth-child(4)) { display:grid; grid-template-columns:minmax(0,1fr) 114.332px; grid-template-rows:24px auto; gap:4px 0; padding:20px; container-type:inline-size; } #data .data-outcome:is(:nth-child(3),:nth-child(4)) h4 { grid-column:1/-1; grid-row:1; font-size:16px; line-height:24px; align-self:start; } #data .data-outcome:nth-child(3) .data-outcome-body { display:contents; } #data .data-outcome:is(:nth-child(3),:nth-child(4)) p { grid-column:1; grid-row:2; margin:0 0 0 9px; font-size:min(22px,7.46cqw); line-height:1.65; text-align:left; white-space:nowrap; } #data .data-outcome:is(:nth-child(3),:nth-child(4)) .outcome-figure { color:#1f3c8a; white-space:nowrap; } #data .data-outcome:is(:nth-child(3),:nth-child(4)) strong { font-size:min(50px,16.95cqw); line-height:1.2; } #data .data-outcome:is(:nth-child(3),:nth-child(4)) strong>span { font-size:min(22px,7.46cqw); } #data .data-outcome:is(:nth-child(3),:nth-child(4)) .outcome-description { color:#000; } #data .data-outcome:nth-child(3) .outcome-description br { display:none; } #data .data-outcome:nth-child(4) .outcome-description { display:block; } #data .data-outcome:nth-child(3) .data-art-usage { grid-column:2; grid-row:1/3; justify-self:end; align-self:start; position:relative; margin:-6px 4px 0 0; width:98.52px; height:131px; max-width:none; overflow:hidden; mask:url('../images/sp-outcome-usage-mask.svg') center / contain no-repeat; } #data .data-outcome:nth-child(3) .data-art-usage img { content:url('../images/sp-outcome-usage-source.png'); position:absolute; left:-35.727px; top:-21.653px; width:169.975px; height:169.975px; max-width:none; object-fit:cover; } #data .data-outcome:nth-child(4) .data-frequency-art { grid-column:2; grid-row:1/3; justify-self:end; align-self:center; position:relative; margin:0 10px 0 0; width:114.332px; height:91px; overflow:hidden; mask:url('../images/sp-outcome-frequency-mask.svg') center / contain no-repeat; } #data .data-outcome:nth-child(4) .data-frequency-art img { content:url('../images/sp-outcome-frequency-source.png'); position:absolute; left:-31.5px; top:-24.5px; width:175px; height:140px; max-width:none; object-fit:cover; } } @media(max-width:767px) { #data .data-outcome .data-outcome-art.sp-local-mask { mask:none; } #data .sp-local-mask>img { visibility:hidden; } #data .sp-local-mask>canvas { position:absolute; inset:0; display:block; width:100%; height:100%; } } /* SPコース切替。表の本文・料金・レッスンは既存HTMLを共用。 */ @media(max-width:767px) { #course.course-tabs-ready .course-mobile-tabs { display:flex; gap:6px; width:100%; max-width:560px; margin:32px auto 0; } #course .course-mobile-tab { flex:1; min-width:0; min-height:56px; padding:12px 6px; border:1px solid #1f3c8a; border-radius:8px 8px 0 0; color:#1f3c8a; background:#f2f6ff; font-size:16px; line-height:1.5; font-weight:700; } #course .course-mobile-tab[aria-selected='true'] { background:#1f3c8a; color:#fff; } #course .course-mobile-tab:focus-visible { outline:3px solid #e3a000; outline-offset:3px; } #course.course-tabs-ready .course-table-scroll { width:100%; max-width:560px; min-width:0; margin:0 auto; padding:0; overflow:visible; } #course.course-tabs-ready .course-table { display:block; width:100%; min-width:0; border-spacing:0; border-radius:0 0 12px 12px; overflow:hidden; } #course.course-tabs-ready .course-table colgroup,#course.course-tabs-ready .course-table thead { display:none; } #course.course-tabs-ready .course-table tbody { display:block; } #course.course-tabs-ready .course-table tbody tr { display:grid; grid-template-columns:82px minmax(0,1fr); border-bottom:1px solid #e4e4e4; } #course.course-tabs-ready .course-table tbody th { display:flex; align-items:center; justify-content:center; min-width:0; padding:16px 8px; border:0; font-size:14px; line-height:1.6; } #course.course-tabs-ready .course-table tbody td { display:block; min-width:0; padding:16px 12px; border:0; font-size:14px; line-height:1.7; overflow-wrap:anywhere; } #course.course-tabs-ready .course-table[data-active-course='normal'] [data-course='copilot'], #course.course-tabs-ready .course-table[data-active-course='copilot'] [data-course='normal'] { display:none; } #course.course-tabs-ready .course-table tbody tr:last-child { display:block; border-bottom:0; } #course.course-tabs-ready .course-table tbody tr:last-child th { padding:12px; } #course.course-tabs-ready .course-table tbody tr:last-child td { padding:12px 14px; } #course.course-tabs-ready .course-price { white-space:normal; } #course.course-tabs-ready .course-price strong { font-size:32px; } #course.course-tabs-ready .course-price span { font-size:14px; } #course.course-tabs-ready .course-note { font-size:11px; line-height:1.7; } #course.course-tabs-ready .lesson-list .lesson-toggle { font-size:16px; } #course.course-tabs-ready .lesson-list .lesson-toggle>span { min-width:0; } #course.course-tabs-ready .lesson-list .lesson-toggle small { font-size:12px; } #course.course-tabs-ready .lesson-panel { font-size:13px; } } /* SP資格取得フロー：PCの920px横並びをそのまま横スワイプ。 */ @media(max-width:767px) { #certified .flow-overview { width:calc(100% + 40px); max-width:none; margin:40px -20px; padding:48px 0 18px; overflow-x:auto; overflow-y:hidden; overscroll-behavior-x:contain; scrollbar-width:thin; scrollbar-color:#aeb5c5 transparent; -webkit-overflow-scrolling:touch; } #certified .flow-overview:focus-visible { outline:3px solid #e3a000; outline-offset:3px; } #certified .flow-overview ol { position:relative; display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); width:920px; height:169.072px; margin:0; padding:0 16px; gap:38px; background:#fff url('../images/flow-final-bg.svg') right top / 168px 168.995px no-repeat; border-radius:12px; } #certified .flow-overview ol::before { content:''; position:absolute; inset:-1px 0; pointer-events:none; background:url('../images/flow-separators.svg') center / 647.803px 174.477px no-repeat; } #certified .flow-overview li { position:relative; display:block; } #certified .flow-overview li>p { display:flex; flex:none; flex-direction:column; flex-wrap:nowrap; justify-content:flex-start; align-items:center; gap:17px; min-height:0; height:169.072px; padding:34px 0 0; background:none; clip-path:none; border-radius:0; } #certified .flow-overview p small { font-size:14px; line-height:14px; letter-spacing:.56px; white-space:nowrap; } #certified .flow-overview p span { font-size:16px; line-height:1.6; letter-spacing:.64px; white-space:nowrap; } #certified .flow-overview p em { display:block; font-size:8px; line-height:1.6; letter-spacing:.32px; margin-top:-8px; white-space:nowrap; } #certified .flow-overview .flow-pc-break { display:block; } #certified .flow-overview .flow-badge { display:none; } #certified .flow-overview li:is(:nth-child(4),:nth-child(5)) .flow-badge { position:absolute; top:-48px; left:50%; transform:translateX(-50%); display:flex; align-items:center; width:max-content; height:34px; min-height:34px; margin:0; padding:4px 12px; border-radius:100px; color:#1f3c8a; font-size:12px; line-height:1.6; letter-spacing:.48px; font-weight:700; white-space:nowrap; background:#fdd92c; } #certified .flow-overview li:nth-child(4) .flow-badge { left:calc(50% - 16px); background:#e7e7e7; } #certified .flow-overview li:is(:nth-child(4),:nth-child(5)) .flow-badge::after { content:''; position:absolute; top:29px; left:calc(50% - 4.76314px); width:9.52628px; height:8.25px; background:url('../images/flow-badge-tail-yellow.svg') center / 9.52628px 8.25px no-repeat; transform:rotate(180deg); } #certified .flow-overview li:nth-child(4) .flow-badge::after { background-image:url('../images/flow-badge-tail-gray.svg'); } } /* Figma 147:7889: SPの各ステップを見出し・絵・本文の縦構成にする。 */ @media(max-width:767px) { #certified .flow-detail { display:grid; grid-template-columns:minmax(0,1fr) 44px; grid-template-rows:repeat(6,auto); gap:70px 16px; width:100%; max-width:415px; margin-inline:auto; align-items:stretch; } #certified .flow-steps { grid-column:1; grid-row:1/7; display:grid; grid-template-rows:subgrid; gap:70px; min-width:0; } #certified .flow-steps>li { display:grid; grid-template-columns:minmax(0,1fr); grid-template-rows:auto auto auto; align-content:start; align-items:start; justify-items:center; gap:12px; min-height:0; min-width:0; } #certified .flow-steps>li::after { content:''; position:absolute; left:50%; bottom:-44px; width:53px; height:18px; background:url('../images/sp-flow-step-arrow.svg') center / contain no-repeat; transform:translateX(-50%) scaleY(-1); pointer-events:none; } #certified .flow-steps>li:last-child::after { display:none; } #certified .flow-copy { display:contents; } #certified .flow-step { grid-column:1; grid-row:1; margin:0 0 -4px; font-size:14px; line-height:14px; letter-spacing:.56px; text-align:center; } #certified .flow-copy h3 { grid-column:1; grid-row:2; margin:0; font-size:24px; line-height:1.6; letter-spacing:.96px; text-align:center; overflow-wrap:anywhere; } #certified .flow-art { grid-column:1; grid-row:3; width:166px; height:166px; margin:0; } #certified .flow-art::after { display:none; } #certified .flow-art img { width:166px; height:166px; max-width:none; max-height:none; } #certified .flow-copy>p:not(.flow-step) { grid-column:1; width:100%; margin:0; font-size:15px; line-height:1.6; letter-spacing:.6px; font-weight:500; color:#000100; } #certified .flow-area-note { font-size:inherit; } #certified .flow-copy .flow-note { font-size:12px; line-height:1.7; letter-spacing:.48px; } #certified .flow-time { display:block; top:-20px; padding:4px 12px; min-width:100px; font-size:12px; line-height:1.6; text-align:center; } #certified .flow-steps>li:nth-child(2) .flow-art { margin-top:0; } #certified .flow-formats { grid-column:1; width:100%; min-width:0; margin:0; gap:6px; font-size:14px; line-height:1.4; letter-spacing:.56px; } #certified .flow-formats>div { grid-template-columns:minmax(80px,105px) minmax(0,1fr); min-height:48px; border-radius:4px; overflow:hidden; } #certified .flow-formats dt { display:grid; align-items:center; padding:4px; background:#6689b5; font-size:14px; font-weight:700; } #certified .flow-formats dd { display:flex; align-items:center; padding:4px 10px; font-size:14px; font-weight:500; } #certified .flow-providers { grid-column:2; grid-row:1/7; display:grid; grid-template-columns:44px; grid-template-rows:subgrid; gap:70px; padding:0; } #certified .flow-providers p { grid-column:1; grid-row:1/4; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:9px; width:44px; height:auto; min-height:0; margin:0 0 -35px; padding:40px 0; writing-mode:horizontal-tb; color:white; clip-path:none; border-radius:0; background:transparent url('../images/sp-flow-provider-training.svg') center / 100% 100% no-repeat; } #certified .flow-providers p+p { grid-row:4/7; margin:-35px 0 0; gap:0; background-image:url('../images/sp-flow-provider-association.svg'); } #certified .flow-providers .provider-name { writing-mode:vertical-rl; text-orientation:upright; font-size:18px; line-height:1.3; letter-spacing:.72px; } #certified .flow-providers .provider-it { font-size:20px; line-height:1.3; letter-spacing:.8px; } #certified .flow-providers .provider-marker { font-size:12px; line-height:1.3; } #certified .flow-provider-note { max-width:415px; margin:32px auto 0; font-size:12px; line-height:1.7; text-align:left; } } @media(max-width:767px) { #Pricing .price-pill-group { display:flex; flex-wrap:wrap; gap:4px; margin-top:4px; } } @media(max-width:767px) { .trust-association::before { top:190px; } .trust-association::after { bottom:-120px; } } @media(max-width:767px) { #course .course-mobile-tab { text-align:center; } } @media(max-width:767px) { #course .course-learning-summary { display:flex; flex-direction:column; align-items:center; text-align:center; white-space:normal; } #course .course-learning-chapters,#course .course-learning-duration { display:block; } } @media(max-width:767px) { #business-title .business-title-lead { display:block; } } @media(max-width:767px) { #cta1 .cta_sec_cta_grp .cta1-person { background:linear-gradient(90deg,#ef377d,#a7154d); } #cta1 .cta_sec_cta_grp .cta1-company { background:linear-gradient(90deg,#214185,#102743); } } /* SPのCTA2・CTA3を最初のCTAと統一。PCのDOM配置は維持。 */ @media(max-width:767px) { :is(#cta2,#cta3) { display:grid; grid-template-columns:86px minmax(0,1fr); gap:28px 14px; padding:42px max(20px,calc((100% - 375px)/2)) 60px; } :is(#cta2,#cta3) .section-heading-en { top:-39px; letter-spacing:.14em; line-height:1.7; } :is(#cta2,#cta3) .cta_sec_inner,:is(#cta2,#cta3) .cta2-panel { display:contents; } :is(#cta2,#cta3) .cta_sec_ttl { grid-column:2; grid-row:1; align-self:center; font-size:28px; line-height:1.4; letter-spacing:1.12px; text-align:left; text-wrap:wrap; } :is(#cta2,#cta3) .cta_sec_ttl span { color:inherit; background:linear-gradient(transparent 65%,#bc1b59 65% 93%,transparent 93%); } :is(#cta2,#cta3) .cta_sec_batch { grid-column:1; grid-row:1; align-self:center; width:96px; margin:0 0 0 -10px; font-family:'Shippori Mincho',serif; font-size:22px; line-height:1.3; background:#a5144b; position:relative; inset:auto; overflow:hidden; isolation:isolate; } :is(#cta2,#cta3) .cta_sec_batch::before { content:''; position:absolute; inset:0; z-index:-1; background:url('../images/sp-cta-legacy-badge-half.svg') center top / 100% 50% no-repeat; transform:rotate(-45deg); } :is(#cta2,#cta3) .cta_sec_text1 { grid-column:1/-1; margin:0; color:white; font-size:15px; font-weight:500; line-height:1.6; letter-spacing:.6px; text-align:center; } :is(#cta2,#cta3) .cta_sec_text1 span { color:inherit; } :is(#cta2,#cta3) .cta_sec_cta_grp { grid-column:1/-1; margin:12px 0 0; gap:16px; } :is(#cta2,#cta3) .cta_btn { width:100%; min-height:72px; padding:18px 10px 18px 26px; gap:12px; color:white; font-size:20px; line-height:1; letter-spacing:.8px; border-radius:6px; } :is(#cta2,#cta3) .cta2-button-label { flex:1; text-align:center; } :is(#cta2,#cta3) .cta_btn img { content:url('../images/sp-cta-legacy-arrow.svg'); width:36px; height:36px; flex:0 0 36px; } :is(#cta2,#cta3) .cta2-person { background:linear-gradient(90deg,#ef377d,#a7154d); } :is(#cta2,#cta3) .cta2-company { background:linear-gradient(90deg,#214185,#102743); } } @media(max-width:767px) { #faq .faq-more>span { flex:1; text-align:center; } } @media(max-width:767px) { #course .course-cta .cta_btn { position:relative; justify-content:center; text-align:center; padding-inline:46px; } #course .course-cta .cta_btn img { position:absolute; right:10px; top:50%; transform:translateY(-50%); } } @media(max-width:767px) { #Pricing-title { font-size:clamp(18px,calc((100vw - 88px)/12.5),27px); letter-spacing:0; white-space:nowrap; } } /* 最新SP FV：告知を実績数字と注記の間に配置。 */ @media (max-width:767px) { #fv .fv_left { padding-bottom:139px; } #fv .hero-copy { display:flex; flex-direction:column; padding-bottom:12px; } #fv .hero-eyebrow { padding-block:7px; } #fv .sp-title-ai { line-height:1; } #fv .hero-highlights { margin-top:17px; } #fv .highlight-value strong { font-size:27.11px; line-height:34.646px; } #fv .highlight-value small { font-size:16.43px; } #fv .hero-copilot { --copilot-scale:.83729; order:1; align-self:center; flex:none; width:289px; height:30px; max-width:100%; margin:18px auto 0; background-size:auto; } #fv .hero-copilot::before { background-size:100% 26.383px; } #fv .hero-copilot-divider { height:16.96px; margin-inline:5px; } #fv .hero-note { font-size:clamp(8px,2.4vw,10px); line-height:17px; } #fv .fv_batch { width:127.8px; left:11px; top:138px; font-size:20px; font-weight:400; } #fv .fv_batch>span { width:142px; max-width:none; font-size:10px; margin-bottom:10px; } } @media (max-width:359px) { #fv .hero-copilot { --copilot-scale:.71; } #fv .hero-copilot-divider { margin-inline:4px; } #fv .fv_batch { left:7px; width:118px; font-size:18px; } #fv .fv_batch>span { width:130px; font-size:9px; } } @media (max-width:767px) { #fv .fv_left { padding-bottom:142px; } #fv .fv_batch>span { top:13px; margin:0; } } @media (max-width:767px) { #fv .hero-eyebrow { padding-left:clamp(108px,calc(32.73vw + 3.27px),126px); font-size:clamp(14px,calc(7.27vw - 9.27px),18px); letter-spacing:.7877px; white-space:nowrap; } } /* モバイル告知 167:202：289px原寸の文字位置。狭い画面では同じ比率で縮小。 */ @media (max-width:767px) { #fv .hero-copilot { container-type:inline-size; } #fv .hero-copilot-date { position:absolute; left:6.66436%; top:2.19983cqw; display:block; font-size:4.69308cqw; line-height:7.03945cqw; } #fv .hero-copilot-date b { position:absolute; left:13.20761cqw; top:-1.45606cqw; font-size:6.12664cqw; line-height:9.1900cqw; } #fv .hero-copilot-divider { position:absolute; left:28.39100%; top:2.08651cqw; width:.26083cqw; height:5.86851cqw; margin:0; } #fv .hero-copilot-name { position:absolute; left:30.13149%; top:.15208cqw; font-size:6.71765cqw; line-height:10.07647cqw; } #fv .hero-copilot-course { position:absolute; left:55.47751%; top:.17976cqw; font-size:4.69481cqw; line-height:10.07647cqw; } #fv .hero-copilot-new { position:absolute; left:79.09343%; top:.81799cqw; font-size:4.69481cqw; line-height:8.53702cqw; } } @media (max-width:767px) { #fv .hero-highlights .hero-note { right:-12px; font-size:9px; } } @media (max-width:767px) { #qualification-about .qualification-links .cta_btn[href='#Pricing'] > span { margin-left:16px; } } @media (max-width:767px) { #course .lesson-list .lesson-toggle > span:first-child { flex-wrap:nowrap; white-space:nowrap; gap:4px; } } /* 年代グラフは全幅でPCと同じSVG・色を使用する。 */ .age-chart-plot { display:contents; } .age-chart-leaders { display:none; } #data .age-donut { background:transparent url('../images/data-age-donut.svg') center / contain no-repeat; } #data .age-donut p { background:none; color:#b61d57; } @media (max-width:1199px) { #data .age-chart { display:flex; align-items:center; justify-content:center; height:auto; min-height:0; aspect-ratio:auto; padding:12px 0; background:#f2f6ff; } #data .age-chart-plot { position:relative; display:block; flex:none; width:100%; max-width:420px; aspect-ratio:420 / 340; container-type:inline-size; } #data .age-donut { position:absolute; left:50%; top:50%; width:85.714286%; max-width:none; height:auto; aspect-ratio:1; transform:translate(-50%,-50%); } #data .age-donut p { width:60%; height:60%; aspect-ratio:auto; font-size:clamp(11px,3.744cqw,15.725px); line-height:1.3; } #data .age-donut strong { font-family:Poppins,sans-serif; font-size:clamp(32px,13.312cqw,55.911px); line-height:1.2; letter-spacing:0; color:#b61d57; } #data .age-donut strong span { font-size:clamp(20px,8.32cqw,34.944px); } #data .age-donut small { font-size:clamp(8px,2.784cqw,11.693px); margin:0; color:#000; } #data .age-donut small b { font-family:Poppins,sans-serif; font-size:clamp(10px,3.712cqw,15.59px); } #data .age-chart-labels { position:absolute; inset:0; margin:0; } #data .age-chart-labels>div { position:absolute; display:block; padding:0; margin:0; font-size:clamp(10px,3.095cqw,13px); line-height:1.3; letter-spacing:0; white-space:nowrap; text-align:center; color:#000; background:none; } #data .age-chart-labels dd { font-family:Poppins,sans-serif; font-size:clamp(15px,5.238cqw,22px); line-height:1.3; color:#325fb8; } #data .age-chart-labels .age-40 dd,#data .age-chart-labels .age-50 dd { color:#b61d57; } #data .age-chart-labels .age-40 { left:80.95238%; top:7.35294%; right:auto; bottom:auto; width:16.66667%; } #data .age-chart-labels .age-50 { left:80.95238%; top:76.47059%; right:auto; bottom:auto; width:16.66667%; } #data .age-chart-labels .age-30 { display:block; left:1.19048%; top:17.94118%; right:auto; bottom:auto; width:17.85714%; } #data .age-chart-labels .age-20 { left:0; top:42.05882%; right:auto; bottom:auto; width:14.28571%; } #data .age-chart-labels .age-60 { display:block; left:0; top:76.47059%; right:auto; bottom:auto; width:14.28571%; } #data .age-chart-labels>div::after { content:none; } #data .age-chart-leaders { display:block; position:absolute; inset:0; width:100%; height:100%; pointer-events:none; } }