@charset "UTF-8"; /* *** Variables Settings *** */ /* Fonts */ /* Break Point */ /* Hover Style */ /* Color */ :root { /* Primary / Accent */ --color-primary: #155DFC; --color-primary-pale: #EFF6FF; --color-emphasis: #FFDF20; --color-orange: #F54900; /* Status colors */ --color-danger: #E7000B; --color-danger-pale: #FFE2E2; --color-safety: #00A63E; --color-safety-pale: #F0FDF4; /* Neutrals */ --color-white: #fff; --color-black: #000; --color-gray-light: #777; --color-gray-dark: #333; /* Containers */ --container-xs: 1024px; --container-sm: 1150px; --container-md: 1500px; --container-lg: 1600px; --container-inline-m: 1rem; /* Font weights */ --fw-normal: 400; --fw-semibold: 600; --fw-bold: 700; /* Radius */ --radius10: 10px; --radius14: 14px; /* Shadow */ --box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1); } /* *** mixin *** */ /* Break Point */ /* Hover Style */ /*** The new CSS reset - version 1.11.3 (last updated 25.08.2024) GitHub page: https://github.com/elad2412/the-new-css-reset ***/ /* Remove all the styles of the "User-Agent-Stylesheet", except for the 'display' property - The "symbol *" part is to solve Firefox SVG sprite bug - The "html" element is excluded, otherwise a bug in Chrome breaks the CSS hyphens property (https://github.com/elad2412/the-new-css-reset/issues/36) */ *:where(:not(html, iframe, canvas, img, svg, video, audio):not(svg *, symbol *)) { all: unset; display: revert; } /* Preferred box-sizing value */ *, *::before, *::after { box-sizing: border-box; } /* Fix mobile Safari increase font-size on landscape mode */ html { -moz-text-size-adjust: none; -webkit-text-size-adjust: none; text-size-adjust: none; } /* Reapply the pointer cursor for anchor tags */ a, button { cursor: revert; } /* Remove list styles (bullets/numbers) */ ol, ul, menu, summary { list-style: none; } /* Firefox: solve issue where nested ordered lists continue numbering from parent (https://bugzilla.mozilla.org/show_bug.cgi?id=1881517) */ ol { counter-reset: revert; } /* For images to not be able to exceed their container */ img { max-inline-size: 100%; max-block-size: 100%; } /* removes spacing between cells in tables */ table { border-collapse: collapse; } /* Safari - solving issue when using user-select:none on the text input doesn't working */ input, textarea { -webkit-user-select: auto; } /* revert the 'white-space' property for textarea elements on Safari */ textarea { white-space: revert; } /* minimum style to allow to style meter element */ meter { -webkit-appearance: revert; appearance: revert; } /* preformatted text - use only for this feature */ :where(pre) { all: revert; box-sizing: border-box; } /* reset default text opacity of input placeholder */ /* fix the feature of 'hidden' attribute. display:revert; revert to element instead of attribute */ :where([hidden]) { display: none; } /* revert for bug in Chromium browsers - fix for the content editable attribute will work properly. - webkit-user-select: auto; added for Safari in case of using user-select:none on wrapper element*/ :where([contenteditable]:not([contenteditable=false])) { -moz-user-modify: read-write; -webkit-user-modify: read-write; overflow-wrap: break-word; -webkit-line-break: after-white-space; -webkit-user-select: auto; } /* apply back the draggable feature - exist only in Chromium and Safari */ :where([draggable=true]) { -webkit-user-drag: element; } /* Revert Modal native behavior */ :where(dialog:modal) { all: revert; box-sizing: border-box; } /* Remove details summary webkit styles */ ::-webkit-details-marker { display: none; } /* *** Base *** */ :where(html) { font-size: 16px; scroll-behavior: smooth; } :where(body) { font-family: "Noto Sans JP", sans-serif; font-size: 1rem; line-height: 1.6; color: var(--color-black); background-color: var(--color-white); text-rendering: optimizeLegibility; font-synthesis: none; -webkit-text-size-adjust: 100%; -moz-osx-font-smoothing: grayscale; } /* *** Elements *** */ /* 要素の初期設定 */ a { text-decoration: none; } a, button { transition: all 0.3s 0s ease; } a:hover, button:hover { opacity: 0.7; } a, button { cursor: pointer; } summary { display: block; } picture { line-height: 0; display: block; } img { max-width: 100%; height: auto; } span { line-height: inherit; } /* *** Helper class *** */ /* Break Point */ @media (max-width: 767.89px) { .pc-only { display: none; } } @media (min-width: 768px) { .sp-only { display: none; } } /* Img */ .img-max { width: 100%; } /* Display */ .d-block { display: block; } .d-inline { display: inline; } .d-inline-block { display: inline-block; } .d-none { display: none; } .d-flex { display: flex; } .d-grid { display: grid; } /* Align */ .text-start { text-align: left; } .text-center { text-align: center; } .text-end { text-align: right; } /* Weight */ .fw-light { font-weight: 300; } .fw-regular { font-weight: 400; } .fw-medium { font-weight: 500; } .fw-semibold { font-weight: 600; } .fw-bold { font-weight: 700; } /* Position */ .p-relative { position: relative; } .p-absolute { position: absolute; } .p-fixed { position: fixed; } .p-sticky { position: sticky; } .p-static { position: static; } /* ------------------------------------------------ function関数改善版2025.11.20 ------------------------------------------------ */ /* 1rem = 16px */ /* *** Component *** */ /* Section */ .section:not(.section-mv) { position: relative; } @media (min-width: 768px) { .section:not(.section-mv) { padding-block: 5rem; } } @media (max-width: 767.89px) { .section:not(.section-mv) { padding-block: 4rem; } } /* Container */ .container-xs { width: min(100% - var(--container-inline-m) * 2, var(--container-xs)); margin-inline: auto; } .container-sm { width: min(100% - var(--container-inline-m) * 2, var(--container-sm)); margin-inline: auto; } .container-md { width: min(100% - var(--container-inline-m) * 2, var(--container-md)); margin-inline: auto; } .container-lg { width: min(100% - var(--container-inline-m) * 2, var(--container-lg)); margin-inline: auto; } .container-fluid { width: min(100% - var(--container-inline-m) * 2); margin-inline: auto; } /* Marker */ .marker { background: linear-gradient(transparent 70%, var(--color-emphasis) 70%); } /* Word Break */ .no-break { display: inline-block; } /* Title */ .heading-badge { width: fit-content; margin-inline: auto; padding: 0.625em 2em; border-radius: 100px; font-weight: var(--fw-semibold); line-height: 1; display: flex; align-items: baseline; justify-content: center; gap: 0.5em; color: var(--section-accent); background: var(--section-bg-light); } @media (min-width: 768px) { .heading-badge { margin-block-end: 2rem; } } @media (max-width: 767.89px) { .heading-badge { margin-block-end: 1.5rem; } } .heading-badge .sub { font-size: 0.875rem; } @media (min-width: 768px) { .heading-badge .main-txt { font-size: 2rem; } } @media (max-width: 767.89px) { .heading-badge .main-txt { font-size: 1.125rem; } } .heading-area { text-align: center; } @media (min-width: 768px) { .heading-area { margin-block-end: 4rem; } } @media (max-width: 767.89px) { .heading-area { margin-block-end: 2.5rem; } } @media (min-width: 768px) { .heading-area .ttl-sub { margin-block-start: 1rem; font-size: 1.25rem; } } @media (max-width: 767.89px) { .heading-area .ttl-sub { margin-block-start: 0.75rem; font-size: 1.125rem; } } .heading-lower-area { text-align: center; } @media (min-width: 768px) { .heading-lower-area { margin-block-end: 2rem; } } @media (max-width: 767.89px) { .heading-lower-area { margin-block-end: 1.5rem; } } @media (min-width: 768px) { .heading-lower-area .ttl-sub { margin-block-start: 0.75rem; font-size: 1rem; } } @media (max-width: 767.89px) { .heading-lower-area .ttl-sub { margin-block-start: 0.5rem; font-size: 0.875rem; } } .h2ttl, .h3ttl { font-weight: var(--fw-bold); line-height: 1.4; } @media (min-width: 768px) { .h2ttl, .h3ttl { font-size: 3rem; } } @media (max-width: 767.89px) { .h2ttl, .h3ttl { font-size: 2rem; } } .h4ttl { font-weight: var(--fw-bold); line-height: 1.4; } @media (min-width: 768px) { .h4ttl { font-size: 1.875rem; } } @media (max-width: 767.89px) { .h4ttl { font-size: 1.5rem; } } /* Text */ .emphasis-txt { font-weight: var(--fw-bold); line-height: 1.4; text-align: center; } @media (min-width: 768px) { .emphasis-txt { margin-block: 4rem; font-size: 2.5rem; } } @media (max-width: 767.89px) { .emphasis-txt { margin-block: 2.5rem 2rem; font-size: 1.5rem; } } /* Text Color */ .text-theme { color: var(--section-accent, var(--color-primary)); } .text-primary { color: var(--color-primary); } .text-emphasis { color: var(--color-emphasis); } .text-danger { color: var(--color-danger); } .text-safety { color: var(--color-safety); } .text-white { color: var(--color-white); } .text-orange { color: var(--color-orange); } /* Icon */ .icn-circle { width: var(--current-width); height: var(--current-width); padding: calc(var(--current-width) * 0.25); display: flex; align-items: center; justify-content: center; border-radius: 50%; } @media (min-width: 768px) { .icn-circle.sm { --current-width: 32px; } } @media (max-width: 767.89px) { .icn-circle.sm { --current-width: 24px; } } @media (min-width: 768px) { .icn-circle.md { --current-width: 48px; } } @media (max-width: 767.89px) { .icn-circle.md { --current-width: 40px; } } @media (min-width: 768px) { .icn-circle.lg { --current-width: 64px; } } @media (max-width: 767.89px) { .icn-circle.lg { --current-width: 48px; } } .icn-circle.primary { background-color: var(--color-primary); } .icn-circle.danger { background-color: var(--color-danger-pale); } .icn-circle.safety { background-color: var(--color-safety); } .icn-circle.gray { background-color: #F3F4F6; } .icn-circle.orange { background-color: #FFEDD4; } .icn-circle.purple { background-color: #9810FA; } .icn-circle.transparent { background-color: rgba(255, 255, 255, 0.2); } /* Button */ .btns { display: flex; gap: 1rem; } .btn-wrap { display: flex; justify-content: center; } .btn { font-weight: var(--fw-semibold); line-height: 1.4; border: solid 2px var(--btn-color, var(--section-accent)); border-radius: var(--radius10); display: flex; align-items: center; justify-content: center; text-align: center; max-width: 100%; } @media (min-width: 768px) { .btn { padding: 1rem; min-height: 64px; font-size: 1.125rem; } } @media (max-width: 767.89px) { .btn { padding: 0.5rem 1rem; min-height: 48px; font-size: 1rem; } } .btn.sm { width: min(100%, 260px); } .btn.mg { width: min(100%, 320px); } .btn.lg { width: min(100%, 400px); } .btn.max { width: 100%; } .btn:not(.rev) { color: var(--color-white); background: var(--btn-color, var(--section-accent)); } .btn.rev { color: var(--btn-color, var(--section-accent)); background: var(--color-white); } .btn.primary { --btn-color: var(--color-primary); } .btn.safety { --btn-color: var(--color-safety); } .btn.danger { --btn-color: var(--color-danger); } .btn.transparent { background-color: rgba(255, 255, 255, 0.2); border-color: rgba(255, 255, 255, 0.2); } /* Columns */ .cols { display: flex; } @media (max-width: 767.89px) { .cols { flex-direction: column; } } @media (min-width: 768px) { .cols:not(.no-gap) { gap: 2rem; } } @media (max-width: 767.89px) { .cols:not(.no-gap) { gap: 1rem; } } .cols > * { flex: 1; } /* List */ .icn-text { display: inline-flex; align-items: center; gap: 0.5em; line-height: 1.5; } .icn-text .icn { width: 1em; height: 1em; flex-shrink: 0; display: flex; align-items: center; } :not(.section-mv) .ls-box { --pc-mainW: 20px; --sp-mainW: 18px; } :not(.section-mv) .ls-box .ls-ttl { font-weight: var(--fw-bold); } @media (min-width: 768px) { :not(.section-mv) .ls-box .ls-ttl { margin-block-end: 1rem; font-size: 1.875rem; } } @media (max-width: 767.89px) { :not(.section-mv) .ls-box .ls-ttl { margin-block-end: 0.875rem; font-size: 1.5rem; } } :not(.section-mv) .ls-box ul li { display: flex; } @media (min-width: 768px) { :not(.section-mv) .ls-box ul li { column-gap: 1rem; } } @media (max-width: 767.89px) { :not(.section-mv) .ls-box ul li { column-gap: 0.75rem; } } @media (min-width: 768px) { :not(.section-mv) .ls-box ul li:not(:last-of-type) { margin-block-end: 1rem; } } @media (max-width: 767.89px) { :not(.section-mv) .ls-box ul li:not(:last-of-type) { margin-block-end: 0.75rem; } } @media (min-width: 768px) { :not(.section-mv) .ls-box .ls-icn { padding-block-start: 0.5rem; flex-basis: var(--pc-mainW); } } @media (max-width: 767.89px) { :not(.section-mv) .ls-box .ls-icn { padding-block-start: 0.25rem; flex-basis: var(--sp-mainW); } } :not(.section-mv) .ls-box .ls-txt { font-weight: var(--fw-bold); } @media (min-width: 768px) { :not(.section-mv) .ls-box .ls-txt { font-size: var(--pc-mainW); } } @media (max-width: 767.89px) { :not(.section-mv) .ls-box .ls-txt { font-size: var(--sp-mainW); } } :not(.section-mv) .ls-box li.icn-text { font-size: 1rem; } :not(.section-mv) .ls-box li.icn-text:not(:last-of-type) { margin-block-end: 0.5rem; } :not(.section-mv) .ls-box .sub { font-size: 1rem; } /* *** Header *** */ .header { box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.1), 0 1px 3px -1px rgba(0, 0, 0, 0.1); position: relative; } @media (min-width: 768px) { .header { padding-block: 1.5rem; } } @media (max-width: 767.89px) { .header { padding-block: 0.625rem; } } .header .row { display: flex; align-items: center; justify-content: space-between; } @media (min-width: 768px) { .header .row { gap: 1.25rem; } } @media (max-width: 767.89px) { .header .row { gap: 1rem; } } .header .row > * { flex-basis: auto; } .header .wpo-service { display: flex; align-items: center; gap: 0.5em; } .header .wpo-service .logo { line-height: 0; } @media (min-width: 768px) { .header .wpo-service .logo { width: 52px; height: 52px; } } @media (max-width: 767.89px) { .header .wpo-service .logo { width: 10%; aspect-ratio: 1/1; } } .header .wpo-service .h1ttl { font-weight: var(--fw-bold); line-height: 1; } @media (min-width: 768px) { .header .wpo-service .h1ttl { font-size: clamp(1.125rem, 0.995rem + 0.27vw, 1.25rem); } } @media (max-width: 767.89px) { .header .wpo-service .h1ttl { font-size: clamp(0.75rem, 0.572rem + 0.89vw, 1rem); } } .header .wpo-service .h1ttl span { margin-block-end: 0.25rem; font-size: 70%; color: var(--color-gray-light); display: block; } .header .menu { display: flex; align-items: center; gap: 0.5rem; } .header .menu ul { display: flex; align-items: center; gap: inherit; } @media (max-width: 767.89px) { .header .menu ul { display: none; } } .header .menu ul li a { padding: 0.5rem; color: var(--color-gray-light); font-size: clamp(0.875rem, 0.745rem + 0.27vw, 1rem); } @media (min-width: 768px) { .header .menu .btn { padding-block: 0.5rem; min-height: 48px; font-size: clamp(0.875rem, 0.793rem + 0.17vw, 1rem); } } @media (max-width: 767.89px) { .header .menu .btn { font-size: clamp(0.75rem, 0.572rem + 0.89vw, 1rem); } } /* *** Footer *** */ .footer { color: var(--color-white); background: #0D1931; font-size: clamp(0.75rem, 0.62rem + 0.27vw, 0.875rem); } @media (min-width: 768px) { .footer { padding-block: 3.75rem 0.75rem; } } @media (max-width: 767.89px) { .footer { padding-block: 2rem 0.75rem; } } .footer .row { display: flex; justify-content: space-between; } @media (min-width: 768px) { .footer .row { gap: 1.25rem; } } @media (max-width: 767.89px) { .footer .row { gap: 2rem 1.25rem; } } .footer .row:not(:last-of-type) { margin-block-end: 2rem; } @media (max-width: 767.89px) { .footer .row:not(.sp-row) { flex-direction: column; } } @media (max-width: 767.89px) { .footer .row.sp-row { justify-content: flex-start; } } @media (max-width: 767.89px) { .footer .row.copyright { flex-direction: column-reverse; gap: 0.5rem; } } .footer .wpo-service { flex-basis: auto; } .footer .wpo-service .ttl-wrap { margin-block-end: 1rem; display: flex; align-items: center; gap: 0.5em; } .footer .wpo-service .logo { width: 40px; height: 40px; } .footer .wpo-service .ttl { font-weight: var(--fw-bold); line-height: 1; } @media (min-width: 768px) { .footer .wpo-service .ttl { font-size: clamp(1rem, 0.87rem + 0.27vw, 1.125rem); } } @media (max-width: 767.89px) { .footer .wpo-service .ttl { font-size: 1rem; } } .footer .menu-groupe { flex: 1; display: flex; justify-content: space-around; gap: 1.25rem; } @media (max-width: 767.89px) { .footer .menu-groupe { flex-direction: column; } } .footer .menu { --menu-padding: .25rem; } .footer .menu .head { margin-block-end: 0.625rem; font-weight: var(--fw-bold); } @media (min-width: 768px) { .footer .menu .head { font-size: clamp(1rem, 0.87rem + 0.27vw, 1.125rem); } } @media (max-width: 767.89px) { .footer .menu .head { font-size: 1rem; } } .footer .menu a { padding: var(--menu-padding); display: block; } .footer .menu .nolink { padding: var(--menu-padding); } .footer .menu .nolink a { padding: 0; display: inline; } /* *** Front Page *** */ /* *** Section Theme Setting *** */ /* MV ---------------------------------- */ .section-mv { --section-accent: var(--color-primary); --section-bg-pale: var(--color-primary-pale); --section-bg-light: #DBEAFE; background-color: var(--section-bg-pale); } @media (min-width: 768px) { .section-mv { margin-block-end: 8rem; padding: 5.21%; } } @media (max-width: 767.89px) { .section-mv { margin-block-end: 4rem; padding: 2rem var(--container-inline-m); } } .section-mv .txt-img-content { display: flex; gap: 24px 5px; } @media (min-width: 768px) { .section-mv .txt-img-content { align-items: center; } } @media (max-width: 767.89px) { .section-mv .txt-img-content { flex-direction: column; } } .section-mv .txt-img-content .txt-content { flex: 1; display: flex; flex-direction: column; } @media (min-width: 768px) { .section-mv .txt-img-content .txt-content { row-gap: clamp(1rem, 0.333rem + 1.39vw, 2rem); } } @media (max-width: 767.89px) { .section-mv .txt-img-content .txt-content { row-gap: 16px; } } .section-mv .txt-img-content .img-content { flex-basis: 58.53%; position: relative; } .section-mv .ttl-sub { font-weight: var(--fw-bold); } @media (min-width: 768px) { .section-mv .ttl-sub { font-size: clamp(0.875rem, 0.289rem + 1.22vw, 1.75rem); } } @media (max-width: 767.89px) { .section-mv .ttl-sub { font-size: 1rem; } } .section-mv .mv-ttl { font-weight: var(--fw-bold); line-height: 1.4; } @media (min-width: 768px) { .section-mv .mv-ttl { font-size: clamp(1.625rem, 0.041rem + 3.3vw, 4rem); } } @media (max-width: 767.89px) { .section-mv .mv-ttl { font-size: clamp(1.75rem, 1.214rem + 2.68vw, 2.5rem); } } .section-mv .mv-ttl .fs-s { font-size: 75%; } .section-mv .mv-ttl .fs-l { font-size: 93.75%; } .section-mv .mv-ttl .fs-xl { font-size: 112.5%; } @media (min-width: 768px) { .section-mv .txt { font-size: clamp(0.75rem, 0.419rem + 0.69vw, 1.25rem); } } @media (max-width: 767.89px) { .section-mv .txt { font-size: clamp(0.75rem, 0.66rem + 0.45vw, 0.875rem); } } .section-mv .ls-box { margin-block-start: 3.5%; border-radius: var(--radius14); box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); background-color: var(--color-white); position: relative; } @media (min-width: 768px) { .section-mv .ls-box { padding: 8% 4% 4%; } } @media (max-width: 767.89px) { .section-mv .ls-box { padding: max(6%, 1.75rem) 1.25rem 1.25rem; } } .section-mv .ls-box .ls-ttl { padding: 0.375rem 1rem; border-radius: 100px; box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25); background-color: var(--color-white); font-weight: var(--fw-semibold); position: absolute; top: -10%; } @media (min-width: 768px) { .section-mv .ls-box .ls-ttl { font-size: clamp(0.625rem, 0.375rem + 0.52vw, 1rem); } } @media (max-width: 767.89px) { .section-mv .ls-box .ls-ttl { font-size: clamp(0.625rem, 0.447rem + 0.89vw, 0.875rem); } } .section-mv .ls-box ul li { font-weight: var(--fw-bold); } @media (min-width: 768px) { .section-mv .ls-box ul li { font-size: clamp(0.75rem, 0.419rem + 0.69vw, 1.25rem); } } @media (max-width: 767.89px) { .section-mv .ls-box ul li { font-size: 0.75rem; } } @media (min-width: 768px) { .section-mv .ls-box ul li:not(:last-of-type) { margin-block-end: 0.5rem; } } @media (max-width: 767.89px) { .section-mv .ls-box ul li:not(:last-of-type) { margin-block-end: 0.25rem; } } .section-mv .btns { flex-wrap: wrap; } @media (min-width: 768px) { .section-mv .btns .btn { padding-block: 0.5rem; min-height: 48px; font-size: clamp(0.875rem, 0.793rem + 0.17vw, 1rem); } } .section-mv .wpo-reports { width: fit-content; border-radius: 100px; box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1); background-color: var(--color-white); display: flex; align-items: center; gap: 4%; position: absolute; bottom: 0; } @media (min-width: 768px) { .section-mv .wpo-reports { padding-inline-end: 4%; left: 50%; transform: translateX(-50%); } } @media (max-width: 767.89px) { .section-mv .wpo-reports { right: 0; } } .section-mv .wpo-reports .icn-wp { line-height: 0; } @media (min-width: 768px) { .section-mv .wpo-reports .icn-wp { flex-basis: 41%; } } @media (max-width: 767.89px) { .section-mv .wpo-reports .icn-wp { flex-basis: 34.64%; } } .section-mv .wpo-reports p { flex: 1; font-weight: var(--fw-bold); word-break: keep-all; } @media (min-width: 768px) { .section-mv .wpo-reports p { font-size: clamp(1.125rem, 0.376rem + 1.56vw, 2.25rem); } } @media (max-width: 767.89px) { .section-mv .wpo-reports p { font-size: 1.125rem; } } .section-mv .wpo-reports p .sub { font-size: 38.89%; display: block; } .section-mv .resolve-txt { font-weight: var(--fw-bold); line-height: 1.4; text-align: center; } @media (min-width: 768px) { .section-mv .resolve-txt { margin-block-start: 1rem; font-size: clamp(1.5rem, 0.502rem + 2.08vw, 3rem); } } @media (max-width: 767.89px) { .section-mv .resolve-txt { margin-block-start: 0.5rem; font-size: 1.5rem; } } .section-mv .resolve-txt .fs-l { font-size: 150%; } /* 明確なリスク ---------------------------------- */ .section-danger { --section-accent: var(--color-danger); --section-bg-pale: var(--color-danger-pale); --section-bg-light: ; background-color: var(--section-bg-pale); } .section-danger .caution-badge { width: 100%; padding: 0.7em; border-radius: 100px; color: var(--color-white); background-color: var(--section-accent); font-weight: var(--fw-semibold); line-height: 1; text-align: center; position: absolute; left: 50%; transform: translateX(-50%); } @media (min-width: 768px) { .section-danger .caution-badge { max-width: 220px; font-size: 1.25rem; top: -24px; } } @media (max-width: 767.89px) { .section-danger .caution-badge { max-width: 160px; font-size: 1rem; top: -19px; } } @media (min-width: 768px) { .section-danger .trouble-area { margin-block-end: 4rem; } } @media (max-width: 767.89px) { .section-danger .trouble-area { margin-block-end: 2rem; } } .section-danger .trouble-area li { border-radius: var(--radius14); box-shadow: var(--box-shadow); background-color: var(--color-white); display: flex; flex-direction: column; align-items: center; justify-content: center; } @media (min-width: 768px) { .section-danger .trouble-area li { padding: 2rem 2rem 1.5rem; gap: 0.75rem; } } @media (max-width: 767.89px) { .section-danger .trouble-area li { padding: 1.25rem; gap: 0.5rem; } } .section-danger .trouble-area .main-txt { font-weight: var(--fw-bold); line-height: 1.2; } @media (min-width: 768px) { .section-danger .trouble-area .main-txt { margin-block-start: 0.25rem; font-size: 3rem; } } @media (max-width: 767.89px) { .section-danger .trouble-area .main-txt { margin-block-start: 0.5rem; font-size: 2.25rem; } } .section-danger .trouble-area .sub { font-weight: var(--fw-semibold); font-size: 1.25rem; } .section-danger .trouble-area .txt { font-size: 1rem; } .section-danger .risk-area { border-radius: var(--radius14); box-shadow: var(--box-shadow); background-color: var(--color-white); overflow: hidden; } .section-danger .risk-area .cols > li { display: flex; flex-direction: column; justify-content: center; } @media (min-width: 768px) { .section-danger .risk-area .cols > li .ls-box { padding: 3rem; } } @media (max-width: 767.89px) { .section-danger .risk-area .cols > li .ls-box { padding: 2rem 1rem; } } .section-danger .risk-area .ls-box.risk { color: var(--color-white); background-color: var(--color-orange); } .section-danger .risk-area .ls-box.risk li { padding: 0.75rem 1rem; border-radius: var(--radius10); border: solid 1px currentColor; background-color: rgba(255, 255, 255, 0.1); flex-direction: column; } .section-danger .btns { justify-content: center; } @media (min-width: 768px) { .section-danger .btns { margin-block-start: 2.5rem; } } @media (max-width: 767.89px) { .section-danger .btns { margin-block-start: 2rem; } } .section-danger .emphasis-txt { margin-block: 1.75rem 0; color: var(--section-accent); } .section-safety { --section-accent: var(--color-safety); --section-bg-pale: var(--color-safety-pale); --section-bg-light: #DCFCE7; } @media (min-width: 768px) { .section-safety .service-area { margin-block-end: 4rem; } } @media (max-width: 767.89px) { .section-safety .service-area { margin-block-end: 2rem; } } @media (min-width: 768px) { .section-safety .service-area .cols > li { display: flex; flex-direction: column; justify-content: center; } } .section-safety .service-area .cols > li > * { border-radius: var(--radius14); } .section-safety .service-area .ls-box { background-color: var(--section-bg-pale); } @media (min-width: 768px) { .section-safety .service-area .ls-box { padding: 1.5rem; } } @media (max-width: 767.89px) { .section-safety .service-area .ls-box { padding: 1.25rem; } } .section-safety .service-area .ls-box .ls-ttl { color: #016630; } @media (min-width: 768px) { .section-safety .service-area .ls-box .ls-ttl { font-size: 1.5rem; } } @media (max-width: 767.89px) { .section-safety .service-area .ls-box .ls-ttl { font-size: 1.25rem; } } .section-safety .safety-area li { border-radius: var(--radius14); box-shadow: var(--box-shadow); display: flex; flex-direction: column; align-items: center; justify-content: center; } @media (min-width: 768px) { .section-safety .safety-area li { padding: 2rem 2rem 1.5rem; gap: 0.75rem; } } @media (max-width: 767.89px) { .section-safety .safety-area li { padding: 1.25rem; gap: 0.5rem; } } .section-safety .safety-area li:nth-of-type(1) { background: linear-gradient(135deg, rgb(239, 246, 255) 0%, rgb(219, 234, 254) 100%); } .section-safety .safety-area li:nth-of-type(2) { background: linear-gradient(135deg, rgb(250, 245, 255) 0%, rgb(243, 232, 255) 100%); } .section-safety .safety-area li:nth-of-type(3) { background: linear-gradient(135deg, rgb(240, 253, 244) 0%, rgb(220, 252, 231) 100%); } .section-safety .safety-area .main-txt { font-weight: var(--fw-bold); line-height: 1.2; } @media (min-width: 768px) { .section-safety .safety-area .main-txt { margin-block-start: 0.25rem; font-size: 1.5rem; } } @media (max-width: 767.89px) { .section-safety .safety-area .main-txt { margin-block-start: 0.5rem; font-size: 1.75rem; } } .section-safety .safety-area .txt { text-align: center; font-size: 1rem; } .section-headless { --section-accent: var(--color-primary); --section-bg-pale: var(--color-primary-pale); --section-bg-light: #DBEAFE; background-color: var(--section-bg-pale); } .section-headless .structure-area { background-color: var(--color-white); border-radius: var(--radius14); } @media (min-width: 768px) { .section-headless .structure-area { margin-block-end: 5.75rem; padding: 3rem; } } @media (max-width: 767.89px) { .section-headless .structure-area { margin-block-end: 3rem; padding: 2.5rem 2rem; } } .section-headless .structure-area .inner { max-width: min(100%, 830px); margin-inline: auto; } @media (min-width: 768px) { .section-headless .structure-area .inner { padding: 1.25rem; } } .section-headless .structure-area .diagram-wrap { display: flex; justify-content: space-between; align-items: center; } @media (min-width: 768px) { .section-headless .structure-area .diagram-wrap { margin-block-end: 2rem; gap: 1rem; } } @media (max-width: 767.89px) { .section-headless .structure-area .diagram-wrap { margin-block-end: 1.5rem; flex-direction: column; gap: 1rem; } } .section-headless .structure-area .diagram-wrap .diagram-item { border-radius: var(--radius14); display: flex; flex-direction: column; align-items: center; gap: 0.5rem; text-align: center; position: relative; } @media (min-width: 768px) { .section-headless .structure-area .diagram-wrap .diagram-item { padding: 3.32%; flex-basis: 42.65%; } } @media (max-width: 767.89px) { .section-headless .structure-area .diagram-wrap .diagram-item { margin: 1.25rem; padding: 1.5rem; } } .section-headless .structure-area .diagram-wrap .diagram-item.edit { background-color: #FFF5E8; border: dashed 3px var(--color-orange); } .section-headless .structure-area .diagram-wrap .diagram-item.edit .tag { top: -1.25rem; left: -1.25rem; } .section-headless .structure-area .diagram-wrap .diagram-item.display { background-color: var(--color-primary-pale); border: solid 3px var(--color-primary); } .section-headless .structure-area .diagram-wrap .diagram-item.display .tag { top: -1.25rem; } @media (min-width: 768px) { .section-headless .structure-area .diagram-wrap .diagram-item.display .tag { right: -1.25rem; } } @media (max-width: 767.89px) { .section-headless .structure-area .diagram-wrap .diagram-item.display .tag { left: -1.25rem; } } .section-headless .structure-area .diagram-wrap .tag { background-color: var(--color-white); border: inherit; border-radius: 50%; font-size: 0.75rem; line-height: 1; display: flex; align-items: center; justify-content: center; position: absolute; top: 0; } @media (min-width: 768px) { .section-headless .structure-area .diagram-wrap .tag { width: 90px; height: 90px; } } @media (max-width: 767.89px) { .section-headless .structure-area .diagram-wrap .tag { width: 80px; height: 80px; } } .section-headless .structure-area .diagram-wrap h5 { font-weight: var(--fw-bold); font-size: 1.25rem; } .section-headless .structure-area .diagram-wrap .sub { font-size: 1rem; } .section-headless .structure-area .diagram-wrap .txt { font-size: 0.875rem; } .section-headless .structure-area .diagram-wrap .api-txt { font-weight: var(--fw-bold); color: var(--color-primary); font-size: 1.125rem; line-height: 1.2; text-align: center; position: relative; } @media (min-width: 768px) { .section-headless .structure-area .diagram-wrap .api-txt { padding-block-start: 40px; } } @media (max-width: 767.89px) { .section-headless .structure-area .diagram-wrap .api-txt { padding-inline-start: 40px; } } .section-headless .structure-area .diagram-wrap .api-txt:before { content: ""; width: 34px; height: 40px; background: url(../img/icons/icn_arrow-r.png) center/contain no-repeat; position: absolute; } @media (min-width: 768px) { .section-headless .structure-area .diagram-wrap .api-txt:before { left: 50%; transform: translateX(-50%); top: 0; } } @media (max-width: 767.89px) { .section-headless .structure-area .diagram-wrap .api-txt:before { transform: translateY(-50%) rotate(90deg); left: 0; top: 50%; } } .section-headless .structure-area .important-txt { background-color: var(--color-primary-pale); color: #193CB8; border-radius: 4px; border-inline-start: solid 4px var(--color-primary); padding: 1em; } @media (min-width: 768px) { .section-headless .structure-area .important-txt { font-size: 1rem; } } @media (max-width: 767.89px) { .section-headless .structure-area .important-txt { font-size: 0.875rem; } } @media (min-width: 768px) { .section-headless .merit-area { margin-block-end: 5.75rem; } } @media (max-width: 767.89px) { .section-headless .merit-area { margin-block-end: 3rem; } } .section-headless .merit-area .cols > li { border-radius: var(--radius14); box-shadow: var(--box-shadow); overflow: hidden; } .section-headless .merit-area .cols > li:nth-of-type(1) .head { background: linear-gradient(135deg, rgb(251, 44, 54) 0%, rgb(231, 0, 11) 100%); } .section-headless .merit-area .cols > li:nth-of-type(2) .head { background: linear-gradient(135deg, rgb(240, 177, 0) 0%, rgb(245, 73, 0) 100%); } .section-headless .merit-area .cols > li:nth-of-type(3) .head { background: linear-gradient(135deg, rgb(0, 201, 80) 0%, rgb(0, 166, 62) 100%); } .section-headless .merit-area .head { color: var(--color-white); display: flex; flex-direction: column; align-items: center; justify-content: center; } @media (min-width: 768px) { .section-headless .merit-area .head { padding: 2rem 2rem 1.5rem; gap: 0.75rem; } } @media (max-width: 767.89px) { .section-headless .merit-area .head { padding: 1rem; gap: 0.5rem; } } .section-headless .merit-area .contents { background-color: var(--color-white); height: 100%; } @media (min-width: 768px) { .section-headless .merit-area .contents { padding: 1.5rem; } } @media (max-width: 767.89px) { .section-headless .merit-area .contents { padding: 1.25rem; } } .section-headless .merit-area .h5ttl { font-weight: var(--fw-bold); line-height: 1.2; } @media (min-width: 768px) { .section-headless .merit-area .h5ttl { margin-block-start: 0.25rem; font-size: 1.5rem; } } @media (max-width: 767.89px) { .section-headless .merit-area .h5ttl { margin-block-start: 0.5rem; font-size: 1.75rem; } } .section-headless .merit-area .main-txt { line-height: 1.4; } @media (min-width: 768px) { .section-headless .merit-area .main-txt { margin-block-end: 1rem; font-size: 1.125rem; } } @media (max-width: 767.89px) { .section-headless .merit-area .main-txt { margin-block-end: 0.625rem; font-size: 1rem; } } @media (min-width: 768px) { .section-headless .recommend-area { margin-block-end: 5.75rem; } } @media (max-width: 767.89px) { .section-headless .recommend-area { margin-block-end: 3rem; } } @media (min-width: 768px) { .section-headless .recommend-area .cols { flex-direction: row-reverse; align-items: center; } } .section-headless .recommend-area .cols .ls-box li { padding: 0.75rem 1rem; border-radius: var(--radius10); border: solid 1px var(--color-white); background-color: var(--color-white); box-shadow: var(--box-shadow); flex-direction: column; } .section-headless .recommend-area .cols .img-wrap { border-radius: var(--radius14); overflow: hidden; line-height: 0; } .section-headless .consultation-area { background-color: var(--color-primary); border-radius: var(--radius14); color: var(--color-white); } @media (min-width: 768px) { .section-headless .consultation-area { padding: 3rem; } } @media (max-width: 767.89px) { .section-headless .consultation-area { padding: 1.5rem; } } .section-headless .consultation-area .main-txt { font-weight: var(--fw-bold); line-height: 1.4; text-align: center; } @media (min-width: 768px) { .section-headless .consultation-area .main-txt { font-size: 2rem; } } @media (max-width: 767.89px) { .section-headless .consultation-area .main-txt { font-size: 1.5rem; } } .section-headless .consultation-area .txt { text-align: center; } @media (min-width: 768px) { .section-headless .consultation-area .txt { margin-block-start: 0.5rem; font-size: 1.25rem; } } @media (max-width: 767.89px) { .section-headless .consultation-area .txt { margin-block-start: 0.25rem; font-size: 1rem; } } @media (min-width: 768px) { .section-headless .consultation-area .btn-wrap { margin-block-start: 2rem; } } @media (max-width: 767.89px) { .section-headless .consultation-area .btn-wrap { margin-block-start: 1.5rem; } } .section-difference { --section-accent: var(--color-primary); --section-bg-pale: var(--color-primary-pale); --section-bg-light: #DBEAFE; background-color: #F9FAFB; } .section-difference .tbl-headless-area { border-radius: var(--radius14); box-shadow: var(--box-shadow); background-color: var(--color-white); overflow: hidden; } @media (min-width: 768px) { .section-difference .tbl-headless-area { margin-block-end: 5.75rem; } } @media (max-width: 767.89px) { .section-difference .tbl-headless-area { margin-block-end: 3rem; } } .section-difference .tbl-headless-area table { inline-size: 100%; border: none; } .section-difference .tbl-headless-area thead th:nth-child(2), .section-difference .tbl-headless-area thead th:nth-child(3), .section-difference .tbl-headless-area tbody td:nth-child(2), .section-difference .tbl-headless-area tbody td:nth-child(3) { text-align: center; } .section-difference .tbl-headless-area tbody th:nth-child(1), .section-difference .tbl-headless-area tbody td:nth-child(2) { border-block-end: 1px solid rgba(0, 0, 0, 0.1); } .section-difference .tbl-headless-area th, .section-difference .tbl-headless-area td { padding: 0.75rem 1rem; border: none; text-align: left; vertical-align: middle; } .section-difference .tbl-headless-area th { font-weight: var(--fw-bold); } @media (min-width: 768px) { .section-difference .tbl-headless-area th { font-size: 1rem; } } @media (max-width: 767.89px) { .section-difference .tbl-headless-area th { font-size: 0.875rem; } } .section-difference .tbl-headless-area th.head { background-color: #F3F4F6; } .section-difference .tbl-headless-area .col-last { background-color: var(--color-primary-pale); } .section-difference .tbl-headless-area .col-last .txt { color: var(--color-primary); } .section-difference .tbl-headless-area .icn { width: 24px; height: 24px; margin-inline: auto; display: block; } @media (min-width: 768px) { .section-difference .tbl-headless-area .main-txt { font-size: 0.875rem; } } @media (max-width: 767.89px) { .section-difference .tbl-headless-area .main-txt { font-size: 0.75rem; } } @media (min-width: 768px) { .section-difference .tbl-headless-area .txt { font-size: 0.75rem; } } @media (max-width: 767.89px) { .section-difference .tbl-headless-area .txt { font-size: 0.625rem; } } .section-difference .step-area .cols { counter-reset: number 0; } .section-difference .step-area .cols > li { --numWidth: 48px; background-color: var(--color-white); box-shadow: var(--box-shadow); border-radius: var(--radius14); border: solid 2px var(--color-primary); position: relative; margin-inline-start: calc(var(--numWidth) / 2); margin-block-start: calc(var(--numWidth) / 2); } @media (min-width: 768px) { .section-difference .step-area .cols > li { padding: 2.5rem 2rem; } } @media (max-width: 767.89px) { .section-difference .step-area .cols > li { padding: 1.25rem; } } .section-difference .step-area .cols > li::before { content: counter(number); counter-increment: number 1; width: var(--numWidth); height: var(--numWidth); background-color: var(--color-primary); color: var(--color-white); border-radius: 50%; font-weight: var(--fw-bold); display: flex; align-items: center; justify-content: center; position: absolute; top: calc(-0.5 * var(--numWidth)); left: calc(-0.5 * var(--numWidth)); } @media (min-width: 768px) { .section-difference .step-area .cols > li::before { font-size: 1.25rem; } } @media (max-width: 767.89px) { .section-difference .step-area .cols > li::before { font-size: 1.125rem; } } .section-difference .step-area .cols > li:not(:last-of-type)::after { content: ""; width: 34px; height: 40px; background: url(../img/icons/icn_arrow-r.png) center/contain no-repeat; position: absolute; } @media (min-width: 768px) { .section-difference .step-area .cols > li:not(:last-of-type)::after { top: 50%; transform: translateY(-50%); right: -20px; } } @media (max-width: 767.89px) { .section-difference .step-area .cols > li:not(:last-of-type)::after { bottom: -24px; left: 50%; transform: translateX(-50%) rotate(90deg); } } .section-difference .step-area .h5ttl { font-weight: var(--fw-bold); margin-block-end: 0.625rem; } @media (min-width: 768px) { .section-difference .step-area .h5ttl { font-size: 1.25rem; } } @media (max-width: 767.89px) { .section-difference .step-area .h5ttl { font-size: 1.125rem; } } .section-difference .step-area .txt { margin-block-end: 0.625rem; font-size: 1rem; } .section-difference .step-area .note { font-size: 1rem; text-align: center; } @media (min-width: 768px) { .section-difference .step-area .note { margin-block-start: 3rem; } } @media (max-width: 767.89px) { .section-difference .step-area .note { margin-block-start: 2rem; } } .section-plan { --section-accent: var(--color-primary); --section-bg-pale: var(--color-primary-pale); --section-bg-light: #DBEAFE; } @media (min-width: 768px) { .section-plan .plan-area { margin-block-end: 5rem; } } @media (max-width: 767.89px) { .section-plan .plan-area { margin-block-end: 3rem; } } .section-plan .plan-area .h4ttl { display: flex; align-items: center; justify-content: center; gap: 0.5em; } .section-plan .plan-area .h4ttl::before, .section-plan .plan-area .h4ttl::after { content: ""; width: 32px; height: 3px; display: inline-block; background-color: currentColor; } @media (max-width: 767.89px) { .section-plan .plan-area .cols { gap: calc(1rem + 15px); } } .section-plan .plan-area .cols > li { border-radius: var(--radius14); border: solid 2px #E5E7EB; } @media (min-width: 768px) { .section-plan .plan-area .cols > li { padding: 2rem; } } @media (max-width: 767.89px) { .section-plan .plan-area .cols > li { padding: 1.5rem; } } .section-plan .plan-area .cols > li.popular { position: relative; } .section-plan .plan-area .cols > li.popular .popular-label { position: absolute; top: -15px; right: 16px; background-color: #FDC700; border-radius: 50px; line-height: 1; font-weight: var(--fw-bold); font-size: 0.875rem; text-align: center; width: 88px; padding: 0.5rem; } .section-plan .plan-area .cols hgroup { text-align: center; } .section-plan .plan-area .cols hgroup .h5ttl { font-weight: var(--fw-bold); } @media (min-width: 768px) { .section-plan .plan-area .cols hgroup .h5ttl { font-size: 1.5rem; } } @media (max-width: 767.89px) { .section-plan .plan-area .cols hgroup .h5ttl { font-size: 1.25rem; } } @media (min-width: 768px) { .section-plan .plan-area .cols hgroup .sub { font-size: 0.875rem; } } @media (max-width: 767.89px) { .section-plan .plan-area .cols hgroup .sub { font-size: 0.75rem; } } .section-plan .plan-area .cols .price-wrap { line-height: 1.4; text-align: center; } @media (min-width: 768px) { .section-plan .plan-area .cols .price-wrap { font-size: 2.25rem; } } @media (max-width: 767.89px) { .section-plan .plan-area .cols .price-wrap { font-size: 1.875rem; } } .section-plan .plan-area .cols .price-wrap .price { font-weight: var(--fw-bold); } .section-plan .plan-area .cols .price-wrap .month { font-size: 50%; } @media (min-width: 768px) { .section-plan .plan-area .cols .ls-box { margin-block-start: 1.25rem; } } @media (max-width: 767.89px) { .section-plan .plan-area .cols .ls-box { margin-block-start: 1rem; } } @media (min-width: 768px) { .section-plan .plan-area .cols .btn-wrap { margin-block-start: 1.25rem; } } @media (max-width: 767.89px) { .section-plan .plan-area .cols .btn-wrap { margin-block-start: 1rem; } } .section-plan .renewal-area { padding-inline: var(--container-inline-m); background-color: var(--section-bg-pale); border-radius: var(--radius14); } @media (min-width: 768px) { .section-plan .renewal-area { padding-block: 3rem; } } @media (max-width: 767.89px) { .section-plan .renewal-area { padding-block: 1.5rem; } } .section-plan .renewal-area .h4ttl { display: flex; align-items: center; justify-content: center; gap: 0.5em; } .section-plan .renewal-area .h4ttl::before, .section-plan .renewal-area .h4ttl::after { content: ""; width: 32px; height: 3px; display: inline-block; background-color: currentColor; } .section-plan .renewal-area .pack-wrap { max-width: 930px; margin-inline: auto; } .section-plan .renewal-area .cols > li { background-color: var(--color-white); border-radius: var(--radius14); box-shadow: var(--box-shadow); } @media (min-width: 768px) { .section-plan .renewal-area .cols > li { padding: 2rem; } } @media (max-width: 767.89px) { .section-plan .renewal-area .cols > li { padding: 1.5rem; } } .section-plan .renewal-area .cols .h5ttl { font-weight: var(--fw-bold); text-align: center; } @media (min-width: 768px) { .section-plan .renewal-area .cols .h5ttl { font-size: 1.5rem; } } @media (max-width: 767.89px) { .section-plan .renewal-area .cols .h5ttl { font-size: 1.25rem; } } .section-plan .renewal-area .cols .price { font-weight: var(--fw-bold); color: var(--color-primary); line-height: 1.4; text-align: center; } @media (min-width: 768px) { .section-plan .renewal-area .cols .price { font-size: 3rem; } } @media (max-width: 767.89px) { .section-plan .renewal-area .cols .price { font-size: 2rem; } } .section-plan .renewal-area .cols .sub { margin-block-start: 0.25rem; text-align: center; } @media (min-width: 768px) { .section-plan .renewal-area .cols .sub { font-size: 0.875rem; } } @media (max-width: 767.89px) { .section-plan .renewal-area .cols .sub { font-size: 0.75rem; } } @media (min-width: 768px) { .section-plan .renewal-area .cols .ls-box { margin-block-start: 1.25rem; } } @media (max-width: 767.89px) { .section-plan .renewal-area .cols .ls-box { margin-block-start: 1rem; } } .section-plan .renewal-area .cols .annotation-wrap { background-color: #F9FAFB; border-radius: var(--radius10); padding: 1em; } @media (min-width: 768px) { .section-plan .renewal-area .cols .annotation-wrap { margin-block-start: 1rem; } } @media (max-width: 767.89px) { .section-plan .renewal-area .cols .annotation-wrap { margin-block-start: 0.75rem; } } @media (min-width: 768px) { .section-plan .renewal-area .cols .annotation-wrap .annotation { font-size: 0.875rem; } } @media (max-width: 767.89px) { .section-plan .renewal-area .cols .annotation-wrap .annotation { font-size: 0.75rem; } } .section-plan .renewal-area .info-wrap { max-width: 420px; margin-inline: auto; background-color: var(--color-primary); color: var(--color-white); text-align: center; } @media (min-width: 768px) { .section-plan .renewal-area .info-wrap { margin-block-start: 3rem; padding: 1rem; } } @media (max-width: 767.89px) { .section-plan .renewal-area .info-wrap { margin-block-start: 2rem; padding: 0.75rem; } } @media (min-width: 768px) { .section-plan .renewal-area .info-wrap .txt { font-size: 1.25rem; } } @media (max-width: 767.89px) { .section-plan .renewal-area .info-wrap .txt { font-size: 1.125rem; } } @media (min-width: 768px) { .section-plan .renewal-area .info-wrap .sub { font-size: 0.875rem; } } @media (max-width: 767.89px) { .section-plan .renewal-area .info-wrap .sub { font-size: 0.75rem; } } @media (min-width: 768px) { .section-plan .note { font-size: 1rem; margin-block-start: 2rem; text-align: center; } } @media (max-width: 767.89px) { .section-plan .note { font-size: 0.875rem; margin-block-start: 1.5rem; } } .section-free-diagnosis { background-color: var(--color-primary); color: var(--color-white); } .section-free-diagnosis .btn-area { display: flex; flex-direction: column; } @media (min-width: 768px) { .section-free-diagnosis .btn-area { justify-content: center; text-align: center; } } @media (min-width: 768px) { .section-free-diagnosis .btn-area .main-txt { font-size: 1.5rem; } } @media (max-width: 767.89px) { .section-free-diagnosis .btn-area .main-txt { font-size: 1.25rem; } } .section-free-diagnosis .btn-area .txt { margin-block-start: 0.5rem; font-size: 1rem; } .section-free-diagnosis .btn-area .btn-wrap { margin-block-start: 1.5rem; } /* *** Page Diagnosis *** */ .page-diagnosis { /* scrollIntoView(block:start) 時に sticky の .diagnosis-progress と設問が重ならないよう空ける */ --diagnosis-progress-sticky-reserve: calc(1rem + 3.5rem + 1rem); } .page-diagnosis .diagnosis-progress { margin-block-end: 2.5rem; padding: 1rem 1.5rem; position: sticky; inset-block-start: 1rem; z-index: 99999; background-color: var(--color-white); border-radius: var(--radius10); box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); display: flex; align-items: center; gap: 1.5rem; } .page-diagnosis .diagnosis-progress .diagnosis-progress-bar { display: block; width: 100%; height: 8px; border-radius: 4px; background-color: rgba(0, 0, 0, 0.08); overflow: hidden; flex: 1; } .page-diagnosis .diagnosis-progress .diagnosis-progress-fill { display: block; height: 100%; width: 0%; border-radius: 4px; background-color: var(--color-primary, #1a5fb4); transition: width 0.25s ease; flex: auto; } .page-diagnosis .diagnosis-progress .diagnosis-progress-text { font-size: 0.875rem; } .page-diagnosis .diagnosis-progress { /* :where([hidden]) より .diagnosis-progress の display:flex が勝つため明示 */ } .page-diagnosis .diagnosis-progress[hidden] { display: none; } .page-diagnosis .diagnosis-content { min-height: 12rem; opacity: 1; transition: opacity 0.35s ease; } .page-diagnosis .diagnosis-content.is-all-questions-answered .diagnosis-fieldset { opacity: 1; } .page-diagnosis { /* 全問を縦に並べ。未完了時は「次に答える設問」のみ通常表示（他は opacity 0.3） */ } .page-diagnosis .diagnosis-fieldset { margin-block-end: 2.5rem; padding-block-end: 2.5rem; scroll-margin-block-start: var(--diagnosis-progress-sticky-reserve); opacity: 0.3; transition: opacity 0.25s ease; border-block-end: 1px solid rgba(0, 0, 0, 0.1); } @media (min-width: 768px) { .page-diagnosis .diagnosis-fieldset { padding-inline: 4rem; } } @media (max-width: 767.89px) { .page-diagnosis .diagnosis-fieldset { padding-inline: 2rem; } } .page-diagnosis .diagnosis-fieldset.is-current { opacity: 1; } .page-diagnosis .diagnosis-fieldset .diagnosis-legend { font-size: 1.25rem; font-weight: var(--fw-semibold); margin-block-end: 1.5rem; } .page-diagnosis .diagnosis-fieldset .question-num { color: var(--color-primary); font-size: 200%; line-height: 1; display: block; margin-block-end: 1rem; } .page-diagnosis .diagnosis-fieldset .answer-wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 1rem; } .page-diagnosis .diagnosis-fieldset { /* 各設問は name 単位でラジオ1択。見た目はボタン（ネイティブ input は非表示） */ } @media (max-width: 767.89px) { .page-diagnosis .diagnosis-fieldset .answer-item { flex-basis: min(33.3333333333% - 0.6666666667rem, 160px); } } .page-diagnosis .diagnosis-fieldset .answer-item input[type=radio] { position: absolute; opacity: 0; inline-size: 1px; block-size: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .page-diagnosis .diagnosis-fieldset .answer-item label { cursor: pointer; display: flex; align-items: center; justify-content: center; text-align: center; font-weight: var(--fw-semibold); line-height: 1.4; border: solid 2px var(--color-primary, #1a5fb4); border-radius: var(--radius10); color: var(--color-primary, #1a5fb4); background-color: var(--color-white); transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease; } @media (min-width: 768px) { .page-diagnosis .diagnosis-fieldset .answer-item label { min-inline-size: 10rem; padding-block: 1rem; padding-inline: 1.25rem; min-block-size: 64px; font-size: 1.125rem; } } @media (max-width: 767.89px) { .page-diagnosis .diagnosis-fieldset .answer-item label { min-inline-size: auto; inline-size: 100%; padding-block: 0.5rem; padding-inline: 1rem; min-block-size: 48px; font-size: 1rem; } } .page-diagnosis .diagnosis-fieldset .answer-item input[type=radio]:checked + label { color: var(--color-white); background-color: var(--color-primary, #1a5fb4); border-color: var(--color-primary, #1a5fb4); } .page-diagnosis .diagnosis-fieldset .answer-item input[type=radio]:focus-visible + label { outline: 2px solid var(--color-primary, #1a5fb4); outline-offset: 2px; } .page-diagnosis .diagnosis-completion { margin-block-start: 1.5rem; } .page-diagnosis .diagnosis-completion .diagnosis-completion-msg { margin-block-end: 1rem; font-weight: 700; } .page-diagnosis .diagnosis-completion .diagnosis-actions { margin-block-end: 1rem; } .page-diagnosis { /* 採点〜結果：質問フェード後に採点中 → スコア */ } .page-diagnosis .diagnosis-loading { display: flex; align-items: center; gap: 0.75rem; margin-block-end: 1rem; padding-block: 1rem; padding-inline: 1.25rem; border-radius: 8px; background-color: rgba(0, 0, 0, 0.04); opacity: 0; transform: translateY(12px); transition: opacity 0.35s ease, transform 0.35s ease; } .page-diagnosis .diagnosis-loading.is-visible { opacity: 1; transform: translateY(0); } .page-diagnosis .diagnosis-loading[hidden] { display: none; } .page-diagnosis .diagnosis-loading .diagnosis-loading-spinner { display: inline-block; flex-shrink: 0; width: 1.5rem; height: 1.5rem; border: 2px solid rgba(0, 0, 0, 0.12); border-block-start-color: var(--color-primary); border-radius: 50%; animation: diagnosis-loading-spin 0.75s linear infinite; } .page-diagnosis .diagnosis-loading .diagnosis-loading-text { font-size: 0.9375rem; font-weight: 700; } .page-diagnosis .diagnosis-result-error { margin-block-end: 1rem; padding-block: 1rem; padding-inline: 1.25rem; border-radius: 8px; background-color: rgba(176, 48, 48, 0.08); color: #7a2020; } .page-diagnosis .diagnosis-result-error[hidden] { display: none; } .page-diagnosis { /* 一次結果（docs/無料診断仕様.md §6） */ } .page-diagnosis .diagnosis-result { margin-block-end: 1rem; padding-block: 1.5rem; padding-inline: 1.25rem; border-radius: 8px; background-color: rgba(0, 0, 0, 0.03); border-inline-start: 4px solid var(--color-primary, #1a5fb4); opacity: 0; transform: translateY(10px); transition: opacity 0.45s ease, transform 0.45s ease; } .page-diagnosis .diagnosis-result.is-visible { opacity: 1; transform: translateY(0); } .page-diagnosis .diagnosis-result[hidden] { display: none; } .page-diagnosis .diagnosis-result.diagnosis-result--band-stable { border-inline-start-color: #2a7d4f; } .page-diagnosis .diagnosis-result.diagnosis-result--band-review { border-inline-start-color: #c9a012; } .page-diagnosis .diagnosis-result.diagnosis-result--band-action { border-inline-start-color: #b03030; } .page-diagnosis .diagnosis-result .diagnosis-result-heading { margin-block-end: 0.75rem; font-size: 1.25rem; font-weight: 700; } .page-diagnosis .diagnosis-result .diagnosis-result-score { margin-block-end: 1rem; font-size: 1.125rem; font-weight: 700; } .page-diagnosis .diagnosis-result .diagnosis-radar-wrap { margin-block-end: 1.25rem; } .page-diagnosis .diagnosis-result .diagnosis-radar-wrap[hidden] { display: none; } .page-diagnosis .diagnosis-result .diagnosis-radar-heading { margin-block-end: 0.75rem; font-size: 1rem; font-weight: 700; } .page-diagnosis .diagnosis-result .diagnosis-radar-figure { margin: 0; text-align: center; } .page-diagnosis .diagnosis-result .diagnosis-radar-svg { display: block; max-width: min(100%, 280px); height: auto; margin-inline: auto; } .page-diagnosis .diagnosis-result .diagnosis-radar-caption { margin-block-start: 0.75rem; font-size: 0.8125rem; line-height: 1.6; color: rgba(0, 0, 0, 0.65); } .page-diagnosis .diagnosis-result .diagnosis-hidden-risk { margin-block-end: 1.25rem; padding-block: 0.875rem; padding-inline: 1rem; font-size: 0.9375rem; line-height: 1.75; border-radius: 8px; background-color: rgba(176, 48, 48, 0.06); border: 1px solid rgba(176, 48, 48, 0.15); color: rgba(0, 0, 0, 0.85); } .page-diagnosis .diagnosis-result .diagnosis-hidden-risk[hidden] { display: none; } .page-diagnosis .diagnosis-result .diagnosis-hidden-risk.diagnosis-hidden-risk--neutral { background-color: rgba(42, 125, 79, 0.06); border-color: rgba(42, 125, 79, 0.2); } .page-diagnosis .diagnosis-result .diagnosis-id-card { margin-block-end: 1.25rem; padding-block: 1rem; padding-inline: 1.25rem; border-radius: 8px; background-color: rgba(26, 95, 180, 0.06); border: 1px solid rgba(26, 95, 180, 0.2); } .page-diagnosis .diagnosis-result .diagnosis-id-card[hidden] { display: none; } .page-diagnosis .diagnosis-result .diagnosis-id-hint { margin-block: 0 0.5rem; font-size: 0.875rem; font-weight: 700; line-height: 1.5; color: rgba(0, 0, 0, 0.85); } .page-diagnosis .diagnosis-result .diagnosis-result-id { margin-block: 0; font-size: 0.9375rem; font-weight: 700; line-height: 1.5; word-break: break-all; color: rgba(0, 0, 0, 0.75); } .page-diagnosis .diagnosis-result .diagnosis-report-cv { margin-block-end: 1.25rem; padding-block: 1rem; padding-inline: 1.25rem; border-radius: 8px; border: 1px solid rgba(0, 0, 0, 0.1); background-color: rgba(0, 0, 0, 0.02); } .page-diagnosis .diagnosis-result .diagnosis-report-cv-heading { margin-block-end: 0.75rem; font-size: 1rem; font-weight: 700; } .page-diagnosis .diagnosis-result .diagnosis-report-cv-lead { margin-block-end: 0.5rem; font-size: 0.9375rem; font-weight: 700; line-height: 1.6; } .page-diagnosis .diagnosis-result .diagnosis-report-cv-value { margin-block-end: 0.75rem; font-size: 0.875rem; line-height: 1.7; } .page-diagnosis .diagnosis-result .diagnosis-report-cv-trust { margin-block-end: 1rem; font-size: 0.8125rem; line-height: 1.65; color: rgba(0, 0, 0, 0.7); } .page-diagnosis .diagnosis-result .diagnosis-report-cv-field { margin-block-end: 1rem; } .page-diagnosis .diagnosis-result .diagnosis-report-cv-label { display: block; margin-block-end: 0.5rem; font-size: 0.875rem; font-weight: 700; } .page-diagnosis .diagnosis-result .diagnosis-report-cv-optional { font-weight: 400; font-size: 0.8125rem; } .page-diagnosis .diagnosis-result .diagnosis-report-cv-input { width: 100%; max-width: 28rem; padding-block: 0.5rem; padding-inline: 0.75rem; font: inherit; font-size: 1rem; border: 1px solid rgba(0, 0, 0, 0.2); border-radius: 4px; } .page-diagnosis .diagnosis-result .diagnosis-report-cv-actions { margin-block-end: 0.5rem; } .page-diagnosis .diagnosis-result .diagnosis-report-cv-feedback { font-size: 0.875rem; line-height: 1.5; color: rgba(0, 0, 0, 0.75); } .page-diagnosis .diagnosis-result .diagnosis-report-cv-feedback[hidden] { display: none; } .page-diagnosis .diagnosis-result .diagnosis-result-lead { margin-block-end: 1.25rem; font-size: 0.9375rem; line-height: 1.75; } .page-diagnosis .diagnosis-result .diagnosis-result-common-heading { margin-block-end: 0.5rem; font-size: 1rem; font-weight: 700; } .page-diagnosis .diagnosis-result .diagnosis-result-common-intro { margin-block-end: 0.75rem; font-size: 0.875rem; } .page-diagnosis .diagnosis-result .diagnosis-result-list { margin-block-end: 1.25rem; padding-inline-start: 1.25rem; font-size: 0.875rem; line-height: 1.75; } .page-diagnosis .diagnosis-result .diagnosis-result-note { font-size: 0.8125rem; line-height: 1.7; color: rgba(0, 0, 0, 0.65); white-space: pre-line; } .page-diagnosis .diagnosis-result-debug-wrap { margin-block-start: 1.25rem; } .page-diagnosis .diagnosis-result-debug-wrap[hidden] { display: none; } .page-diagnosis .diagnosis-result-debug-wrap .diagnosis-result-debug-label { margin-block-end: 0.5rem; font-size: 0.75rem; font-weight: 700; color: rgba(0, 0, 0, 0.55); } .page-diagnosis .diagnosis-result-debug-wrap .diagnosis-result-debug { padding-block: 0.75rem; padding-inline: 1rem; overflow-x: auto; font-size: 0.75rem; line-height: 1.5; tab-size: 2; border-radius: 6px; background-color: rgba(0, 0, 0, 0.06); border: 1px solid rgba(0, 0, 0, 0.08); white-space: pre; } @keyframes diagnosis-loading-spin { to { transform: rotate(360deg); } } /* *** Form *** */ input:not([type=radio]):not([type=checkbox]), textarea, select { border: 1px solid; padding: 8px 12px; font: inherit; } /* foundation/_reset の all:unset 後、ラジオ・チェックをネイティブ操作可能に戻す */ input[type=radio], input[type=checkbox] { all: revert; box-sizing: border-box; cursor: pointer; vertical-align: middle; } :focus-visible { outline: 2px solid; } button:disabled { opacity: 0.5; cursor: not-allowed; }/*# sourceMappingURL=style.css.map */