@charset "UTF-8";

*,
*::before,
*::after {
box-sizing: border-box;
}
ul,
ol {
padding: 0;
}
body,
h1,
h2,
h3,
h4,
p,
ul,
ol,
figure,
blockquote,
dl,
dd {
margin: 0;
}
ul,
ol {
list-style: none;
}
a:not([class]) {
-webkit-text-decoration-skip: ink;
text-decoration-skip-ink: auto;
}
img {
max-width: 100%;
display: block;
width: 100%;
}
article > * + * {
margin-top: 1em;
}
input,
button,
textarea,
select {
font: inherit;
}
img:not([alt]) {
filter: blur(10px);
}
input,
button,
select,
textarea {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background: transparent;
border: none;
border-radius: 0;
font: inherit;
outline: none;
}
textarea {
resize: vertical;
}
input[type=checkbox],
input[type=radio] {
display: none;
}
input[type=submit],
input[type=button],
label,
button,
select {
cursor: pointer;
}
select::-ms-expand {
display: none;
}
:root {
--base-font-family: "Noto Sans JP", sans-serif;
--second-font-family: "Noto Serif JP", serif;
--en-font-family: "EB Garamond", serif;
--color-main: #003a6b;
--color-sub: #8495a1;
--color-black: #2e2e2e;
--color-white: #fff;
--color-gray: #b7bec0;
--color-bg: #edeff1;
--color-bg-light: #f3f4f6;
--color-bg-deep: #e7eaec;
--color-sub-deep: #7b8987;
--color-sub-light: #9caab4;
--color-border: #cdd5d7;
--color-border-light: #e6eaec;
--color-border-table: #d5d5d5;
--color-accent: #b50d23;
--color-alert: #d70012;
--button-shadow: 0 0.4375rem 1.125rem rgb(0 0 0 / 0.13);
--radius: 0.625rem;
--header-height: 9.375rem;
}
@media screen and (max-width: 1023px) {
:root {
--header-height: 6.25rem;
}
}
@media screen and (max-width: 767px) {
:root {
--header-height: 3.75rem;
--radius: 0.3125rem;
}
}
html {
font-size: 16px;
}
@media screen and (max-width: 1440px) {
html {
font-size: 16px;
}
}
@media screen and (max-width: 1023px) {
html {
font-size: 16px;
}
}
@media (max-width: 1250px) {
html {
font-size: 1.28vw;
}
}
@media screen and (max-width: 767px) {
html {
font-size: 16px;
}
}
@media screen and (max-width: 599px) {
html {
font-size: 16px;
}
}
@media (max-width: 375px) {
html {
font-size: 4.2666666667vw;
}
}
a[href^="tel:"] {
pointer-events: none;
}
@media screen and (max-width: 767px) {
a[href^="tel:"] {
pointer-events: initial;
}
}
html {
scrollbar-gutter: stable;
scroll-padding-top: calc(var(--header-height) + 1.25rem);
}
@media (prefers-reduced-motion: no-preference) {
html {
scroll-behavior: smooth;
}
}
body {
container-type: inline-size;
display: flex;
flex-direction: column;
min-height: 100vh;
text-rendering: optimizeSpeed;
color: var(--color-black);
font-family: var(--base-font-family);
line-height: 1.5;
overflow-wrap: anywhere;
word-break: normal;
line-break: strict;
}
main {
flex: 1;
}
html:has(body.is-fixed),
body.is-fixed {
overflow: hidden;
}
a {
text-decoration: none;
color: inherit;
transition: opacity 0.3s ease-in-out;
}
@media (hover: hover) {
a:hover {
opacity: 0.7;
}
}
@media (hover: none) {
a:active {
opacity: 0.7;
}
}
@media  {
img {
image-rendering: -webkit-optimize-contrast;
}
}
button {
color: inherit;
}
address,
em {
font-style: normal;
}
.l-breadcrumb {
margin-top: 0.3125rem;
}
@media screen and (max-width: 767px) {
.l-breadcrumb {
margin-top: 0.75rem;
}
}
.l-header {
position: fixed;
inset: 0 0 auto 0;
z-index: 1001;
width: 100%;
height: var(--header-height);
box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.3);
}
.l-inner {
margin-inline: auto;
width: 100%;
padding-inline: 1.5625rem;
max-width: 78.125rem;
}
@media screen and (max-width: 767px) {
.l-inner {
max-width: 40rem;
padding-inline: 1.25rem;
}
}
.l-inner--base {
max-width: 88.5rem;
}
@media screen and (max-width: 767px) {
.l-inner--base {
max-width: 40rem;
}
}
.l-inner--wide {
max-width: 111.125rem;
}
@media screen and (max-width: 767px) {
.l-inner--wide {
max-width: 40rem;
}
}
.l-orthopedics-support {
margin-block-start: 4.0625rem;
}
@media screen and (max-width: 767px) {
.l-orthopedics-support {
margin-block-start: 3rem;
}
}
.l-orthopedics-results {
margin-block-start: 5.5625rem;
}
@media screen and (max-width: 767px) {
.l-orthopedics-results {
margin-block-start: 3.5rem;
}
}
.l-orthopedics-policy {
margin-block-start: 9rem;
}
@media screen and (max-width: 767px) {
.l-orthopedics-policy {
margin-block-start: 4rem;
}
}
.l-orthopedics-rehabilitation {
margin-block-start: 4.9375rem;
}
@media screen and (max-width: 767px) {
.l-orthopedics-rehabilitation {
margin-block-start: 3.5rem;
}
}
.l-orthopedics-search {
margin-block-start: 6.5625rem;
}
@media screen and (max-width: 767px) {
.l-orthopedics-search {
margin-block-start: 4rem;
}
}
main:has(.p-orthopedics) + .l-contact {
margin-block-start: 0;
}
.l-sub-content {
margin-block: 6.25rem;
}
@media screen and (max-width: 767px) {
.l-sub-content {
margin-block: 5rem;
}
}
.l-sub-content + .l-sub-content {
margin-top: 3.125rem;
}
.l-sub-mv {
margin-top: 0;
}
.l-top-features {
margin-block-start: 0;
}
.l-top-symptoms {
margin-block-start: 6.75rem;
}
@media screen and (max-width: 767px) {
.l-top-symptoms {
margin-block-start: 3.0625rem;
}
}
.l-top-conditions {
margin-block-start: 6.625rem;
}
@media screen and (max-width: 767px) {
.l-top-conditions {
margin-block-start: 4.6875rem;
}
}
.l-top-procedure {
margin-block-start: 6.5625rem;
}
@media screen and (max-width: 767px) {
.l-top-procedure {
margin-block-start: 4.1875rem;
}
}
.l-top-doctors {
margin-block-start: 8.3125rem;
}
@media screen and (max-width: 767px) {
.l-top-doctors {
margin-block-start: 0rem;
}
}
.l-top-access {
margin-block-start: 4.375rem;
}
@media screen and (max-width: 767px) {
.l-top-access {
margin-block-start: 2.5rem;
}
}
.l-contact {
margin-block-start: 5.3125rem;
}
@media screen and (max-width: 767px) {
.l-contact {
margin-block-start: 3.1875rem;
}
}
.c-accordion::details-content {
content-visibility: unset;
display: block grid;
}
@media (prefers-reduced-motion: no-preference) {
.c-accordion::details-content {
transition: grid-template-rows 0.3s ease-in-out;
}
}
.c-accordion:not([open])::details-content {
grid-template-rows: 0fr;
}
.c-accordion[open]::details-content {
grid-template-rows: 1fr;
}
.c-accordion {
border: 1px solid var(--color-black);
border-radius: var(--radius);
}
@media screen and (max-width: 767px) {
.c-accordion {
border-radius: var(--radius);
}
}
.c-accordion__summary {
list-style: none;
position: relative;
cursor: pointer;
padding: 1.25rem;
}
@media screen and (max-width: 767px) {
.c-accordion__summary {
padding: 0.625rem;
}
}
.c-accordion__summary::before,
.c-accordion__summary::after {
content: "";
position: absolute;
top: 50%;
transform: translateY(-50%);
right: 1.25rem;
width: 1.25rem;
height: 1px;
background-color: var(--color-black);
transition: transform 0.3s ease-in-out;
}
@media screen and (max-width: 767px) {
.c-accordion__summary::before,
.c-accordion__summary::after {
right: 0.625rem;
width: 0.9375rem;
}
}
.c-accordion__summary::before {
transform: translateY(-50%) rotate(90deg);
}
.c-accordion[open] .c-accordion__summary::before {
transform: translateY(-50%) rotate(0deg);
}
.c-accordion__body {
overflow: hidden;
}
.c-accordion__wrap {
padding: 1.25rem;
}
.c-button {
display: inline-flex;
align-items: center;
justify-content: space-between;
gap: 0.5rem;
padding-inline: 1.8125rem 0.9375rem;
white-space: nowrap;
width: 18.125rem;
max-width: 100%;
height: 3.75rem;
border-radius: 1.875rem;
border: 0.0625rem solid var(--color-main);
background-color: var(--color-main);
box-shadow: var(--button-shadow);
color: var(--color-white);
font-family: var(--second-font-family);
font-size: max(1rem, 10px);
font-weight: 600;
line-height: 1.4;
letter-spacing: 0.05em;
text-align: center;
text-decoration: none;
transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out, border-color 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}
.c-button svg {
flex-shrink: 0;
}
.c-button svg circle {
fill: var(--color-white);
stroke: none;
transition: fill 0.3s ease-in-out;
}
.c-button svg path {
stroke: var(--color-main);
transition: stroke 0.3s ease-in-out;
}
@media screen and (max-width: 767px) {
.c-button {
width: 100%;
max-width: 18.125rem;
font-size: max(0.875rem, 10px);
}
}
.c-button--wide {
width: 37.5rem;
}
@media (any-hover: hover) {
.c-button:hover {
background-color: var(--color-white);
color: var(--color-main);
box-shadow: none;
opacity: 1;
}
.c-button:hover svg circle {
fill: var(--color-main);
stroke: none;
}
.c-button:hover svg path {
stroke: var(--color-white);
}
}
.c-button--md {
width: 22.5rem;
}
@media screen and (max-width: 767px) {
.c-button--md {
max-width: 100%;
}
}
.c-button--sm {
width: 17.5rem;
height: 3.125rem;
padding-inline: 1.5rem 0.75rem;
font-size: max(0.875rem, 10px);
}
@media screen and (max-width: 767px) {
.c-button--sm {
width: 100%;
max-width: none;
font-size: max(0.8125rem, 10px);
}
}
.c-image-placeholder {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
border-radius: var(--radius);
background-color: var(--color-bg);
}
.c-image-placeholder__label {
font-size: max(0.8125rem, 10px);
font-weight: 500;
letter-spacing: 0.1em;
text-align: center;
color: var(--color-sub);
}
@media screen and (max-width: 767px) {
.c-image-placeholder__label {
font-size: max(0.75rem, 10px);
}
}
.c-marker {
background: linear-gradient(transparent 60%, rgba(255, 214, 0, 0.5) 60%);
font-weight: 700;
color: var(--color-black);
}
.c-page-top {
position: fixed;
right: 1.875rem;
bottom: 1.875rem;
z-index: 25;
visibility: hidden;
opacity: 0;
transition: opacity 0.3s ease-out, visibility 0.3s ease-out;
}
@media screen and (max-width: 767px) {
.c-page-top {
right: 0.75rem;
bottom: 1rem;
}
}
.c-page-top.is-show {
visibility: visible;
opacity: 1;
}
.c-page-top a {
display: flex;
align-items: center;
justify-content: center;
width: 3.125rem;
height: 3.125rem;
border: 2px solid var(--color-main);
border-radius: 50%;
background-color: var(--color-white);
color: var(--color-main);
transition: transform 0.3s ease-out;
}
@media screen and (max-width: 767px) {
.c-page-top a {
width: 2.25rem;
height: 2.25rem;
}
}
.c-page-top a span {
width: 0.8125rem;
height: 0.8125rem;
border-top: 3px solid currentcolor;
border-right: 3px solid currentcolor;
transform: translateY(20%) rotate(-45deg);
}
@media screen and (max-width: 767px) {
.c-page-top a span {
width: 0.625rem;
height: 0.625rem;
border-width: 2px;
}
}
@media (any-hover: hover) {
.c-page-top a:hover {
opacity: 1;
transform: scale(1.1);
}
}
.c-section-title {
text-align: center;
}
.c-section-title__en {
font-family: var(--en-font-family);
font-size: max(3.75rem, 10px);
font-weight: 500;
line-height: 1.1;
letter-spacing: 0.02em;
color: var(--color-main);
}
@media screen and (max-width: 767px) {
.c-section-title__en {
font-size: max(2.5rem, 10px);
}
}
.c-section-title {
position: relative;
padding-bottom: 2.625rem;
}
.c-section-title::after {
content: "";
position: absolute;
bottom: 0;
left: 50%;
width: 1px;
height: 1.75rem;
background-color: var(--color-black);
transform: translateX(-50%);
}
@media screen and (max-width: 767px) {
.c-section-title {
padding-bottom: 1.875rem;
}
.c-section-title::after {
height: 1.25rem;
}
}
.c-section-title--light::after {
background-color: var(--color-white);
}
.c-section-title--left::after {
left: 0;
transform: none;
}
.c-section-title__ja {
font-family: var(--second-font-family);
font-size: max(1.25rem, 10px);
font-weight: 500;
line-height: 1.4;
letter-spacing: 0.1em;
color: var(--color-black);
}
@media screen and (max-width: 767px) {
.c-section-title__ja {
font-size: max(0.9375rem, 10px);
}
}
.c-section-title--light .c-section-title__en,
.c-section-title--light .c-section-title__ja {
color: var(--color-white);
}
.c-section-title--left {
text-align: left;
padding-bottom: 0;
}
.c-section-title--left::after {
content: none;
}
.c-table {
width: 100%;
border-spacing: 0;
border-collapse: collapse;
}
.c-table tr > * {
border: 1px solid var(--color-border);
padding: 0.625rem;
text-align: center;
}
.c-table tr:has(> th) {
background-color: var(--color-gray);
}
.c-text {
font-size: max(1rem, 10px);
}
@media screen and (max-width: 767px) {
.c-text {
font-size: max(0.875rem, 10px);
}
}
.c-title {
font-size: max(1rem, 10px);
}
@media screen and (max-width: 767px) {
.c-title {
font-size: max(0.875rem, 10px);
}
}
.c-title--page {
font-family: var(--second-font-family);
font-size: max(2.5rem, 10px);
font-weight: 500;
line-height: 1.75;
letter-spacing: 0.1em;
text-align: center;
color: var(--color-black);
}
@media screen and (max-width: 767px) {
.c-title--page {
font-size: max(1.5rem, 10px);
}
}
.c-title--lg {
font-family: var(--second-font-family);
font-size: max(1.875rem, 10px);
font-weight: 500;
line-height: 1.667;
letter-spacing: 0.1em;
color: var(--color-main);
}
@media screen and (max-width: 767px) {
.c-title--lg {
font-size: max(1.25rem, 10px);
}
}
.c-title--band {
display: flex;
align-items: center;
justify-content: center;
height: 3.75rem;
background-color: var(--color-sub);
font-family: var(--second-font-family);
font-size: max(1.375rem, 10px);
font-weight: 500;
line-height: 1.75;
letter-spacing: 0.1em;
text-align: center;
color: var(--color-white);
}
@media screen and (max-width: 767px) {
.c-title--band {
height: auto;
padding-block: 0.75rem;
font-size: max(1rem, 10px);
}
}
.p-404 {
display: grid;
place-items: center;
min-height: calc(100svh - var(--header-height));
margin-block: 0;
padding-block: calc(var(--header-height) + 7rem) 7.5rem;
background-color: var(--color-bg-light);
}
@media screen and (max-width: 767px) {
.p-404 {
min-height: calc(100svh - var(--header-height));
padding-block: calc(var(--header-height) + 4.5rem) 5rem;
}
}
.p-404__content {
padding: 4.5rem 3.75rem;
background-color: var(--color-white);
text-align: center;
}
@media screen and (max-width: 767px) {
.p-404__content {
padding: 2.875rem 1.25rem;
}
}
.p-404__title {
font-family: var(--en-font-family);
font-size: max(4.5rem, 10px);
font-weight: 500;
line-height: 1;
letter-spacing: 0.02em;
color: var(--color-main);
}
@media screen and (max-width: 767px) {
.p-404__title {
font-size: max(2.625rem, 10px);
}
}
.p-404__text {
margin-block-start: 1.875rem;
font-weight: 500;
line-height: 2;
letter-spacing: 0.08em;
}
@media screen and (max-width: 767px) {
.p-404__text {
margin-block-start: 1.375rem;
line-height: 1.8;
letter-spacing: 0.04em;
}
}
.p-404__button {
margin-block-start: 2.625rem;
}
@media screen and (max-width: 767px) {
.p-404__button {
margin-block-start: 1.875rem;
}
}
.p-breadcrumb {
text-align: left;
}
.p-breadcrumb span {
font-size: max(0.75rem, 10px);
font-weight: 500;
line-height: 2.5;
letter-spacing: 0.1em;
display: inline-block;
}
.p-breadcrumb a {
color: inherit;
text-decoration: none;
}
.p-breadcrumb a:hover {
opacity: 1;
color: var(--color-main);
}
.p-breadcrumb span.current-item,
.p-breadcrumb span.is-current {
color: var(--color-black);
}
.p-breadcrumb__item + .p-breadcrumb__item::before,
.p-breadcrumb .current-item::before {
content: "/";
margin-inline: 0.5rem;
}
.p-contact {
padding-block: 3.375rem 3.625rem;
background-color: var(--color-sub);
color: var(--color-white);
}
@media screen and (max-width: 767px) {
.p-contact {
padding-block: 2.25rem;
}
}
.p-contact__lead {
margin-top: 0.75rem;
font-size: max(0.875rem, 10px);
font-weight: 500;
line-height: 1.8;
letter-spacing: 0.1em;
text-align: center;
}
@media screen and (max-width: 767px) {
.p-contact__lead {
margin-top: 0.8125rem;
font-size: max(0.75rem, 10px);
line-height: 1.667;
}
}
.p-contact__wrap {
display: grid;
grid-template-columns: 33.75rem 1fr;
align-items: start;
gap: 1.25rem;
margin-top: 1.125rem;
}
@media screen and (max-width: 767px) {
.p-contact__wrap {
grid-template-columns: 1fr;
}
}
@media screen and (max-width: 767px) {
.p-contact__wrap {
gap: 0.625rem;
margin-top: 1.3125rem;
}
}
.p-contact__reserve {
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
padding: 2.625rem 1.875rem 1.3125rem;
min-height: 15.625rem;
background-color: var(--color-white);
box-shadow: var(--button-shadow);
color: var(--color-black);
text-align: center;
}
@media screen and (max-width: 767px) {
.p-contact__reserve {
align-items: stretch;
padding: 0.9375rem 0.9375rem 1.5625rem;
min-height: 0;
text-align: left;
}
}
.p-contact__title {
padding-bottom: 0;
}
.p-contact__title .c-section-title__ja {
margin-top: 0.6875rem;
}
@media screen and (max-width: 767px) {
.p-contact__title .c-section-title__ja {
margin-top: -0.125rem;
}
}
.p-contact__title::after {
content: none;
}
.p-contact__reserve-title {
display: flex;
align-items: center;
gap: 1.875rem;
padding-right: 3.25rem;
}
.p-contact__reserve-title svg {
width: 2.125rem;
height: 2rem;
}
.p-contact__reserve-title {
font-family: var(--base-font-family);
font-size: max(2rem, 10px);
font-weight: 500;
line-height: 1.4;
letter-spacing: 0.1em;
color: var(--color-main);
}
@media screen and (max-width: 767px) {
.p-contact__reserve-title {
position: relative;
display: block;
padding-right: 0;
padding-inline: 0.3125rem;
font-size: max(1.125rem, 10px);
}
.p-contact__reserve-title svg {
position: absolute;
top: 1.1875rem;
right: 1.875rem;
width: 2rem;
height: 1.9375rem;
}
}
.p-contact__reserve-text {
margin-top: 0.25rem;
font-size: max(0.875rem, 10px);
font-weight: 500;
line-height: 1.8;
}
@media screen and (max-width: 767px) {
.p-contact__reserve-text {
margin-top: 0.25rem;
padding-inline: 0.3125rem;
font-size: max(0.75rem, 10px);
line-height: 1.5;
text-align: left;
}
}
.p-contact__reserve .c-button {
margin-top: 1.375rem;
}
@media screen and (max-width: 767px) {
.p-contact__reserve .c-button {
margin-top: 0.875rem;
width: 100%;
max-width: none;
height: 3.125rem;
}
}
.p-contact__related {
padding: 0.625rem 1.25rem 1.125rem;
background-color: var(--color-sub-light);
}
@media screen and (max-width: 767px) {
.p-contact__related {
padding: 0.625rem 0.625rem 0.5625rem;
}
}
.p-contact__related-head {
display: flex;
align-items: baseline;
justify-content: flex-start;
gap: 0.875rem;
}
.p-contact__related-en {
font-family: var(--en-font-family);
font-size: max(1.5rem, 10px);
letter-spacing: 0.02em;
}
@media screen and (max-width: 767px) {
.p-contact__related-en {
font-size: max(1.25rem, 10px);
}
}
.p-contact__related-ja {
font-size: max(0.875rem, 10px);
font-weight: 500;
letter-spacing: 0.1em;
}
@media screen and (max-width: 767px) {
.p-contact__related-ja {
font-size: max(0.75rem, 10px);
}
}
.p-contact__related-link::-webkit-details-marker {
display: none;
}
.p-contact__related-acc[open] .p-contact__related-arrow {
transform: rotate(180deg);
}
.p-contact__related-arrow {
transition: transform 0.3s ease-in-out, background-color 0.3s ease-in-out, color 0.3s ease-in-out;
display: flex;
flex-shrink: 0;
align-items: center;
justify-content: center;
width: 1.375rem;
height: 1.375rem;
border-radius: 50%;
background-color: var(--color-main);
color: var(--color-white);
}
.p-contact__related-arrow svg {
width: 0.625rem;
height: 0.375rem;
}
.p-contact__related-list {
margin-top: 0.375rem;
display: grid;
gap: 0.25rem;
list-style: none;
}
@media screen and (max-width: 767px) {
.p-contact__related-list {
margin-top: 0.5625rem;
gap: 0.4375rem;
}
}
.p-contact__related-acc {
background-color: var(--color-white); border-radius: 0.125rem;
overflow: hidden;
}
.p-contact__related-acc::details-content {
content-visibility: unset;
display: block grid;
grid-template-rows: 0fr;
}
.p-contact__related-acc[open]::details-content {
grid-template-rows: 1fr;
}
@media (prefers-reduced-motion: no-preference) {
.p-contact__related-acc::details-content {
transition: grid-template-rows 0.3s ease-in-out;
}
}
.p-contact__related-panel {
min-height: 0;
overflow: hidden;
}
.p-contact__related-sublist {
padding: 0 1.25rem 1.25rem;
display: grid;
grid-auto-flow: column;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, auto);
gap: 0.5rem 0.625rem;
list-style: none;
}
.p-contact__related-sublist li {
font-size: max(0.875rem, 10px);
font-weight: 500;
line-height: 1.7;
letter-spacing: 0.05em;
}
.p-contact__related-sublist a {
color: var(--color-black);
text-decoration: none;
}
@media screen and (max-width: 767px) {
.p-contact__related-sublist {
padding: 0 0.8125rem 0.8125rem;
grid-auto-flow: row;
grid-template-columns: 1fr;
grid-template-rows: none;
gap: 0.375rem;
}
.p-contact__related-sublist li {
font-size: max(0.8125rem, 10px);
}
}
.p-contact__related-link {
list-style: none;
cursor: pointer;
display: flex;
align-items: center;
justify-content: space-between;
padding-inline: 1.25rem 0.9375rem;
height: 3.625rem;
border-radius: 0.125rem;
background-color: var(--color-white);
color: var(--color-main);
font-size: max(1rem, 10px);
font-weight: 500;
letter-spacing: 0.05em;
text-decoration: none;
transition: opacity 0.3s ease-in-out;
}
@media screen and (max-width: 767px) {
.p-contact__related-link {
padding-inline: 0.8125rem 0.8125rem;
height: 3rem;
font-size: max(0.875rem, 10px);
}
}
.p-contact__related-link:hover {
opacity: 0.7;
}
.p-contact__related-acc[open] .p-contact__related-link {
border-radius: 0.125rem 0.125rem 0 0;
}
.p-contact__monshin {
margin-top: 1.375rem;
padding: 1.875rem 2.5rem 1.875rem;
background-color: var(--color-sub-light);
text-align: center;
}
@media screen and (max-width: 767px) {
.p-contact__monshin {
margin-top: 0.625rem;
padding: 0.9375rem 1.125rem 0.9375rem;
}
}
.p-contact__monshin-title {
font-family: var(--second-font-family);
font-size: max(1.875rem, 10px);
font-weight: 500;
letter-spacing: 0.1em;
}
@media screen and (max-width: 767px) {
.p-contact__monshin-title {
font-size: max(1.375rem, 10px);
line-height: 1.318;
}
}
.p-contact__monshin-text {
margin-top: 0.1875rem;
font-size: max(0.9375rem, 10px);
font-weight: 500;
line-height: 1.733;
letter-spacing: 0.1em;
}
@media screen and (max-width: 767px) {
.p-contact__monshin-text {
margin-top: 0.25rem;
font-size: max(0.75rem, 10px);
line-height: 1.667;
letter-spacing: 0.05em;
}
}
.p-contact__monshin-label {
margin-top: 1.125rem;
font-family: var(--base-font-family);
font-size: max(1.125rem, 10px);
font-weight: 700;
letter-spacing: 0.1em;
}
@media screen and (max-width: 767px) {
.p-contact__monshin-label {
margin-top: 0.875rem;
font-size: max(0.875rem, 10px);
}
}
.p-contact__monshin-button {
position: relative;
display: flex;
align-items: center;
justify-content: center;
margin: 0.3125rem auto 0;
padding-inline: 1.875rem;
width: 37.5rem;
max-width: 100%;
height: 3.625rem;
border-radius: 1.8125rem;
border: 0.0625rem solid var(--color-main);
background-color: var(--color-main);
box-shadow: var(--button-shadow);
color: var(--color-white);
font-family: var(--second-font-family);
font-size: max(1rem, 10px);
font-weight: 600;
letter-spacing: 0.05em;
text-decoration: none;
transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out, border-color 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}
@media screen and (max-width: 767px) {
.p-contact__monshin-button {
margin-top: 0.5625rem;
padding-inline: 1.25rem;
width: 100%;
height: 3.125rem;
border-radius: 1.5625rem;
font-size: max(0.875rem, 10px);
}
.p-contact__monshin-button svg {
right: 1rem;
}
}
.p-contact__monshin-button:hover {
background-color: var(--color-white);
color: var(--color-main);
box-shadow: none;
opacity: 1;
}
.p-contact__monshin-button svg {
position: absolute;
right: 1.5rem;
}
.p-contact__monshin-note {
margin-top: 0.375rem;
font-size: max(0.8125rem, 10px);
font-weight: 500;
line-height: 1.8;
}
@media screen and (max-width: 767px) {
.p-contact__monshin-note {
margin-top: 0.3125rem;
font-size: max(0.75rem, 10px);
line-height: 1.5;
letter-spacing: 0.05em;
text-align: left;
}
}
.p-content h2 {
margin-block: 5rem 2rem;
}
@media screen and (max-width: 767px) {
.p-content h2 {
margin-block: 3rem 1.25rem;
}
}
.p-content h3 {
margin-block: 3.75rem 1.25rem;
}
@media screen and (max-width: 767px) {
.p-content h3 {
margin-block: 1.875rem 1.25rem;
}
}
.p-content h4 {
margin-block: 1.875rem 0.625rem;
}
@media screen and (max-width: 767px) {
.p-content h4 {
margin-block: 1.25rem 0.625rem;
}
}
.p-content h5 {
margin-block: 1.25rem 0.625rem;
}
@media screen and (max-width: 767px) {
.p-content h5 {
margin-block: 0.9375rem 0.625rem;
}
}
.p-content p {
margin-block: 0.625rem;
}
@media screen and (max-width: 767px) {
.p-content p {
margin-block: 0.625rem;
}
}
.p-content figure,
.p-content > ul,
.p-content > ol,
.p-content .wp-block-table {
margin-block: 1.5rem;
}
@media screen and (max-width: 767px) {
.p-content figure,
.p-content > ul,
.p-content > ol,
.p-content .wp-block-table {
margin-block: 1.25rem;
}
}
.p-content .wp-block-button {
margin-block: 1.5rem 3.5rem;
}
@media screen and (max-width: 767px) {
.p-content .wp-block-button {
margin-block: 1.25rem 2rem;
}
}
.p-content p,
.p-content li,
.p-content th,
.p-content td {
font-size: max(1rem, 10px);
font-weight: 500;
line-height: 2;
}
@media screen and (max-width: 767px) {
.p-content p,
.p-content li,
.p-content th,
.p-content td {
font-size: max(0.875rem, 10px);
}
}
.p-content h2 {
font-size: max(1.375rem, 10px);
line-height: 2;
font-weight: 700;
background: var(--border-line);
}
@media screen and (max-width: 767px) {
.p-content h2 {
font-size: max(1.25rem, 10px);
}
}
.p-content h3 {
font-size: max(1.25rem, 10px);
line-height: 2;
font-weight: 700;
position: relative;
display: flex;
gap: 1.25rem;
}
@media screen and (max-width: 767px) {
.p-content h3 {
font-size: max(1.125rem, 10px);
}
}
.p-content h3::before {
content: "";
width: 0.3125rem;
height: 1lh;
border-radius: 0.625rem;
background-color: var(--color-main);
}
.p-content h4 {
font-size: max(1.125rem, 10px);
line-height: 2;
font-weight: 700;
letter-spacing: 0.05em;
}
@media screen and (max-width: 767px) {
.p-content h4 {
font-size: max(1rem, 10px);
}
}
.p-content h5 {
font-size: max(1.0625rem, 10px);
line-height: 2;
font-weight: 700;
letter-spacing: 0.05em;
}
@media screen and (max-width: 767px) {
.p-content h5 {
font-size: max(1rem, 10px);
}
}
.p-content a:not(.wp-block-button *) {
color: var(--color-main);
text-decoration: underline;
text-underline-offset: 0.125rem;
}
.p-content a[href^="tel:"] {
text-decoration: none;
}
@media screen and (max-width: 767px) {
.p-content a[href^="tel:"] {
text-decoration: underline;
}
}
.p-content .wp-block-button__link {
width: 100%;
min-width: 12.5rem;
padding: 1.25rem;
display: inline-block;
font-size: max(1rem, 10px);
line-height: 1;
color: var(--color-white);
background-color: var(--color-main);
border: 1px solid var(--color-main);
text-align: center;
border-radius: 1.875rem;
transition: color 0.3s ease-in-out, background-color 0.3s ease-in-out;
}
@media (any-hover: hover) {
.p-content .wp-block-button__link:hover {
opacity: 1;
color: var(--color-main);
background-color: var(--color-white);
}
}
.p-content img {
width: auto;
}
.p-content figure.aligncenter,
.p-content img.aligncenter {
margin-right: auto;
margin-left: auto;
}
.p-content figure.alignright,
.p-content img.alignright {
margin-left: auto;
}
.p-content ol,
.p-content ul {
list-style: revert;
padding-left: 1.5em;
}
.p-content .wp-block-table {
border: none;
}
.p-content .wp-block-table table {
width: 100%;
border-spacing: 0;
border-collapse: collapse;
border: 1px solid var(--color-border);
}
.p-content .wp-block-table th,
.p-content .wp-block-table td {
border: 1px solid var(--color-border);
}
.p-content .wp-block-table th:not(:last-child),
.p-content .wp-block-table td:not(:last-child) {
border-right: 1px solid var(--color-border);
}
.p-content .wp-block-table th,
.p-content .wp-block-table tr:not(:last-child) td {
border-bottom: 1px solid var(--color-border);
}
.p-content .wp-block-table thead {
border-bottom: 2px solid var(--color-border);
}
.p-content .wp-block-table tr > * {
padding: 0.625rem;
}
.p-content .wp-block-table tr:has(> th) {
background-color: var(--color-gray);
}
.p-footer {
padding-top: 3.3125rem;
background-color: var(--color-white);
}
@media screen and (max-width: 767px) {
.p-footer {
padding-top: 2.8125rem;
}
}
.p-footer__wrap {
display: grid;
grid-template-columns: 20.625rem 1fr;
gap: 3.5625rem;
}
@media screen and (max-width: 1023px) {
.p-footer__wrap {
grid-template-columns: 1fr;
gap: 2.5rem;
}
}
@media screen and (max-width: 767px) {
.p-footer__wrap {
grid-template-columns: 1fr;
}
}
@media screen and (max-width: 767px) {
.p-footer__wrap {
gap: 2.1875rem;
}
}
@media screen and (max-width: 1023px) {
.p-footer__left {
text-align: center;
}
.p-footer__left .p-footer__logo-link {
justify-content: center;
}
}
.p-footer__logo-link {
display: flex;
align-items: center;
gap: 0.625rem;
color: var(--color-main);
text-decoration: none;
}
.p-footer__logo-link img {
width: auto;
max-width: 100%;
height: 2.625rem;
-o-object-fit: contain;
object-fit: contain;
}
.p-footer__logo-mark {
display: block;
width: 1.875rem;
}
.p-footer__logo-mark svg {
display: block;
width: 100%;
height: auto;
}
.p-footer__logo-text {
display: flex;
flex-direction: column;
}
.p-footer__logo-corp {
font-size: max(0.6875rem, 10px);
letter-spacing: 0.05em;
}
.p-footer__logo-name {
font-family: var(--second-font-family);
font-size: max(1.25rem, 10px);
font-weight: 600;
letter-spacing: 0.1em;
}
.p-footer__corp {
margin-top: 1.25rem;
font-size: max(0.875rem, 10px);
font-weight: 500;
letter-spacing: 0.05em;
color: var(--color-main);
}
@media screen and (max-width: 767px) {
.p-footer__corp {
margin-top: 0.875rem;
}
}
.p-footer__address {
margin-top: 0.625rem;
font-size: max(0.75rem, 10px);
font-weight: 500;
font-style: normal;
line-height: 1.9;
}
.p-footer__address a {
color: inherit;
text-decoration: none;
}
@media screen and (max-width: 767px) {
.p-footer__address {
margin-top: 0.3125rem;
line-height: 1.417;
}
}
.p-footer__nav {
display: grid;
grid-template-columns: 148fr 176fr 165fr 196fr 128fr;
gap: 0;
}
.p-footer__nav > :nth-child(3) {
grid-column: span 2;
}
@media screen and (max-width: 767px) {
.p-footer__nav {
grid-template-columns: repeat(2, 1fr);
}
.p-footer__nav > :nth-child(3) {
grid-column: auto;
}
}
@media screen and (max-width: 767px) {
.p-footer__nav {
display: block;
-moz-columns: 2;
columns: 2;
-moz-column-gap: 1.0625rem;
column-gap: 1.0625rem;
}
.p-footer__nav > * {
-moz-column-break-inside: avoid;
break-inside: avoid-column;
}
.p-footer__nav > *:not(:first-child) {
margin-top: 1.3125rem;
}
.p-footer__nav > :nth-child(3) {
grid-column: auto;
margin-top: 0;
-moz-column-break-before: column;
break-before: column;
}
}
.p-footer__nav-title {
white-space: nowrap;
font-size: max(1rem, 10px);
font-weight: 500;
letter-spacing: 0.1em;
color: var(--color-main);
}
@media screen and (max-width: 767px) {
.p-footer__nav-title {
font-size: max(0.875rem, 10px);
}
}
.p-footer__nav-lists {
display: grid;
grid-template-columns: 165fr 201fr;
gap: 0;
}
.p-footer__nav-lists:has(> :only-child) {
grid-template-columns: 1fr;
}
@media screen and (max-width: 767px) {
.p-footer__nav-lists {
grid-template-columns: 1fr;
}
}
.p-footer__nav-list {
margin-top: 0.75rem;
}
@media screen and (max-width: 767px) {
.p-footer__nav-list {
margin-top: 0.3125rem;
}
}
.p-footer__nav-list {
display: grid;
gap: 0.3125rem;
list-style: none;
}
@media screen and (max-width: 767px) {
.p-footer__nav-list {
gap: 0;
}
}
.p-footer__nav-item a,
.p-footer__nav-item span {
font-size: max(0.875rem, 10px);
font-weight: 500;
line-height: 1.6;
color: var(--color-black);
text-decoration: none;
transition: color 0.3s ease-in-out;
}
@media screen and (max-width: 767px) {
.p-footer__nav-item a,
.p-footer__nav-item span {
display: block;
font-size: max(0.75rem, 10px);
line-height: 1.833;
}
}
.p-footer__nav-item a:hover,
.p-footer__nav-item span:hover {
opacity: 1;
color: var(--color-main);
}
.p-footer__nav-item span {
color: var(--color-main);
cursor: default;
}
.p-footer__banners {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 1.25rem;
margin-top: 3.75rem;
list-style: none;
}
@media screen and (max-width: 767px) {
.p-footer__banners {
grid-template-columns: 1fr;
gap: 0.875rem;
margin-top: 2.875rem;
}
}
.p-footer__banner {
display: flex;
align-items: center;
gap: 1.25rem;
padding: 0.625rem;
min-height: 8.75rem;
background-color: var(--color-bg);
color: inherit;
text-decoration: none;
transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}
@media screen and (max-width: 767px) {
.p-footer__banner {
gap: 0.625rem;
padding: 1.25rem;
min-height: 6.25rem;
}
.p-footer__banner svg {
display: none;
}
}
.p-footer__banner svg {
flex-shrink: 0;
margin-left: auto;
margin-right: 1.25rem;
color: var(--color-main);
}
@media (any-hover: hover) {
.p-footer__banner:hover {
background-color: var(--color-bg-light);
color: var(--color-main);
box-shadow: 0 0.25rem 0.875rem rgba(0, 0, 0, 0.12);
opacity: 1;
}
}
.p-footer__banner-logo {
display: grid;
place-items: center;
flex-shrink: 0;
width: 7.5rem;
height: 7.5rem;
background-color: var(--color-white);
}
@media screen and (max-width: 767px) {
.p-footer__banner-logo {
order: 1;
margin-left: auto;
width: 3.75rem;
height: 3.75rem;
}
}
.p-footer__banner-logo img {
width: auto;
max-width: 100%;
-o-object-fit: contain;
object-fit: contain;
}
.p-footer__banners-item:nth-child(1) .p-footer__banner-logo img {
height: 3.625rem;
}
@media screen and (max-width: 767px) {
.p-footer__banners-item:nth-child(1) .p-footer__banner-logo img {
width: 100%;
height: auto;
max-height: 2.75rem;
-o-object-fit: contain;
object-fit: contain;
}
}
.p-footer__banners-item:nth-child(2) .p-footer__banner-logo img {
height: 2.375rem;
}
@media screen and (max-width: 767px) {
.p-footer__banners-item:nth-child(2) .p-footer__banner-logo img {
width: 80%;
height: auto;
max-height: 2.75rem;
-o-object-fit: contain;
object-fit: contain;
}
}
.p-footer__banner-logo--text {
font-family: var(--en-font-family);
font-size: max(1rem, 10px);
line-height: 1.3;
text-align: center;
color: var(--color-main);
}
.p-footer__banner-body {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.p-footer__banner-title {
font-family: var(--base-font-family);
font-size: max(1.125rem, 10px);
font-weight: 500;
letter-spacing: 0.1em;
color: var(--color-main);
}
@media screen and (max-width: 767px) {
.p-footer__banner-title {
font-size: max(0.875rem, 10px);
}
}
.p-footer__banner-text {
font-size: max(0.875rem, 10px);
font-weight: 500;
line-height: 1.6;
}
@media screen and (max-width: 767px) {
.p-footer__banner-text {
font-size: max(0.75rem, 10px);
line-height: 1.5;
}
}
.p-footer__bottom {
margin-top: 3.75rem;
background-color: #2e2e2e;
}
@media screen and (max-width: 767px) {
.p-footer__bottom {
margin-top: 3.3125rem;
}
}
.p-footer__bottom {
color: var(--color-white);
}
.p-footer__bottom-inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1.25rem;
height: 3.75rem;
}
@media screen and (max-width: 767px) {
.p-footer__bottom-inner {
flex-direction: column-reverse;
justify-content: center;
gap: 1.375rem;
height: auto;
padding-block: 1.625rem;
text-align: center;
}
}
.p-footer__copyright {
font-size: max(0.75rem, 10px);
font-weight: 500;
letter-spacing: 0.05em;
}
@media screen and (max-width: 767px) {
.p-footer__copyright {
letter-spacing: 0;
}
}
.p-footer__policy {
display: flex;
gap: 1.5rem;
list-style: none;
}
.p-footer__policy a {
font-size: max(0.75rem, 10px);
font-weight: 500;
color: inherit;
text-decoration: none;
}
.p-footer__policy a:hover {
opacity: 1;
text-decoration: underline;
}
.p-header {
position: fixed;
inset: 0 0 auto;
z-index: 100;
width: 100%;
background-color: rgba(255, 255, 255, 0.9);
}
@media screen and (max-width: 1023px) {
.p-header {
position: fixed;
background-color: var(--color-white);
}
}
.p-header__top {
display: flex;
align-items: center;
gap: 1.5rem;
margin-inline: auto;
width: 100%;
max-width: 108rem;
height: 6.0625rem;
}
@media screen and (max-width: 1820px) {
.p-header__top {
max-width: none;
padding-inline: 1.5rem;
}
}
@media screen and (max-width: 1023px) {
.p-header__top { padding-inline: 13px 0;
height: 6.25rem;
}
}
@media screen and (max-width: 767px) {
.p-header__top {
gap: 0;
padding-inline: 0.8125rem 0;
height: 3.75rem;
}
}
.p-header__logo {
flex-shrink: 0;
margin: 0;
font-weight: inherit;
}
.p-header__logo-link {
display: block;
color: var(--color-main);
text-decoration: none;
}
.p-header__logo-link img {
display: block;
width: 19.75rem;
height: auto;
}
.p-header__logo-link { }
@media screen and (max-width: 1023px) {
.p-header__logo-link img {
width: 250px;
}
}
@media screen and (max-width: 767px) {
.p-header__logo-link img {
width: 15.625rem;
}
}
.p-header__logo-mark {
display: block;
width: 2.125rem;
color: var(--color-main);
}
.p-header__logo-mark svg {
display: block;
width: 100%;
height: auto;
}
@media screen and (max-width: 767px) {
.p-header__logo-mark {
width: 1.5rem;
}
}
.p-header__logo-text {
display: flex;
flex-direction: column;
}
.p-header__logo-hospital {
font-family: var(--second-font-family);
font-size: max(0.75rem, 10px);
font-weight: 600;
letter-spacing: 0.1em;
line-height: 1.4;
}
.p-header__logo-main {
font-family: var(--second-font-family);
font-size: max(1.5625rem, 10px);
font-weight: 600;
letter-spacing: 0.1em;
line-height: 1.2;
}
@media screen and (max-width: 767px) {
.p-header__logo-main {
font-size: max(1.125rem, 10px);
}
}
.p-header__logo-en {
align-self: flex-end;
font-family: var(--en-font-family);
font-size: max(1.25rem, 10px);
letter-spacing: 0.05em;
line-height: 1.6;
}
@media screen and (max-width: 1023px) {
.p-header__logo-en {
display: none;
}
}
.p-header__contact {
flex-shrink: 0;
display: flex;
align-items: center;
gap: 0.875rem;
margin-left: auto;
text-align: left;
white-space: nowrap;
}
@media screen and (max-width: 1023px) {
.p-header__contact {
display: none;
}
}
.p-header__contact-label,
.p-header__contact-time {
font-size: max(0.6875rem, 10px);
font-weight: 500;
line-height: 1.6;
color: var(--color-black);
}
.p-header__tel {
display: block;
color: var(--color-main);
text-decoration: none;
}
.p-header__tel-icon {
flex-shrink: 0;
display: block;
width: 2.0625rem;
}
.p-header__tel-icon svg {
display: block;
width: 100%;
height: auto;
}
.p-header__tel-number {
font-family: var(--en-font-family);
font-size: max(2.3125rem, 10px);
font-weight: 500;
line-height: 0.7;
letter-spacing: 0.02em;
}
.p-header__buttons {
display: flex;
gap: 0.5rem;
list-style: none;
}
@media screen and (max-width: 1023px) {
.p-header__buttons {
display: none;
}
}
.p-header__button {
position: relative;
display: flex;
align-items: center;
justify-content: center;
gap: 0.625rem;
width: 12.5rem;
white-space: nowrap;
}
.p-header__button:not(.p-header__button--outline) svg {
position: absolute;
left: 1.1875rem;
}
.p-header__button {
height: 3.125rem;
border-radius: 1.5625rem;
border: 1px solid var(--color-main);
background-color: var(--color-main);
color: var(--color-white);
font-family: var(--second-font-family);
font-size: max(0.875rem, 10px);
font-weight: 700;
letter-spacing: 0.1em;
text-decoration: none;
transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out, border-color 0.3s ease-in-out;
}
.p-header__button:hover {
background-color: var(--color-white);
color: var(--color-main);
opacity: 1;
}
.p-header__button svg {
flex-shrink: 0;
}
.p-header__button--outline {
width: 16.625rem;
border-radius: var(--radius);
border: 1px solid #dadfe3;
background-color: transparent;
color: var(--color-black);
}
.p-header__button--outline:hover {
border-color: var(--color-main);
background-color: var(--color-main);
color: var(--color-white);
}
@media screen and (max-width: 1023px) {
.p-header__nav {
display: none;
}
}
.p-header__nav-list {
display: flex;
margin-inline: auto;
width: 100%;
max-width: 108rem;
height: 3.3125rem;
list-style: none;
}
@media screen and (max-width: 1820px) {
.p-header__nav-list {
max-width: none;
padding-inline: 1.5rem;
}
}
.p-header__nav-item {
position: relative;
flex: 1;
border-left: 1px solid rgba(46, 46, 46, 0.2);
}
.p-header__nav-item:last-child {
border-right: 1px solid rgba(46, 46, 46, 0.2);
}
.p-header__nav-link {
position: relative;
display: flex;
align-items: center;
justify-content: center;
padding-bottom: 0.875rem;
width: 100%;
height: 100%;
color: var(--color-black);
font-family: var(--second-font-family);
font-size: max(0.9375rem, 10px);
font-weight: 600;
letter-spacing: 0.1em;
text-decoration: none;
transition: color 0.3s ease-in-out;
}
.p-header__nav-link:hover {
opacity: 1;
color: var(--color-main);
}
.p-header__nav-chevron {
position: absolute;
left: 50%;
bottom: 0.875rem;
display: block;
color: var(--color-main);
transform: translateX(-50%);
}
.p-header__nav-chevron svg {
display: block;
width: 0.5rem;
height: 0.25rem;
}
.p-header__submenu {
position: absolute;
top: 100%;
left: 0;
z-index: 10;
visibility: hidden;
opacity: 0;
padding: 0.5rem 0;
min-width: 100%;
width: -moz-max-content;
width: max-content;
background-color: rgba(255, 255, 255, 0.9);
box-shadow: 0 0.25rem 1rem rgba(0, 0, 0, 0.1);
list-style: none;
transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
}
.p-header__nav-item:hover .p-header__submenu, .p-header__nav-item:focus-within .p-header__submenu {
visibility: visible;
opacity: 1;
}
.p-header__submenu-link {
display: block;
padding: 0.625rem 1.25rem;
color: var(--color-black);
font-size: max(0.875rem, 10px);
font-weight: 500;
letter-spacing: 0.05em;
text-decoration: none;
white-space: nowrap;
transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out;
}
.p-header__submenu-link:hover {
opacity: 1;
background-color: var(--color-bg);
color: var(--color-main);
}
.p-header__hamburger {
display: none;
margin: 0;
padding: 0;
outline: none;
border: none;
position: relative;
z-index: 999;
width: auto;
height: inherit;
aspect-ratio: 1/1;
background-color: var(--color-main);
cursor: pointer;
transition: 0.3s ease-in-out;
}
@media screen and (max-width: 1023px) {
.p-header__hamburger {
display: block;
margin-left: auto;
}
}
.p-header__hamburger.is-open {
background-color: var(--color-main);
}
.p-header__hamburger span {
display: block;
background-color: transparent;
} .p-header__hamburger span::before,
.p-header__hamburger span::after {
position: absolute;
content: "";
display: block;
top: 50%;
left: 50%;
width: 30px;
height: 1px;
background-color: var(--color-white);
transition: transform 0.3s ease-in-out;
}
.p-header__hamburger span::before {
transform: translate(-50%, -6px);
}
.p-header__hamburger span::after {
transform: translate(-50%, 6px);
}
.p-header__hamburger.is-open span::before {
transform: translate(-50%, -50%) rotate(45deg);
}
.p-header__hamburger.is-open span::after {
transform: translate(-50%, -50%) rotate(-45deg);
}
.p-header__drawer {
position: fixed;
z-index: 900;
inset: var(--header-height) 0 0;
width: 100%;
background-color: rgba(255, 255, 255, 0.95);
overflow-y: auto;
overscroll-behavior: contain;
scrollbar-width: none;
opacity: 0;
visibility: hidden;
transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
}
.p-header__drawer.is-open {
opacity: 1;
visibility: visible;
}
.p-header__drawer::-webkit-scrollbar {
display: none;
}
.p-header__drawer-nav {
margin-inline: auto;
padding-inline: 1.25rem;
padding-block: 1.125rem 1.875rem;
width: 100%;
max-width: 40rem;
}
.p-header__drawer-list {
list-style: none;
}
.p-header__drawer-item a {
display: flex;
align-items: center;
padding: 0;
height: 2.8125rem;
border-bottom: 1px solid rgba(46, 46, 46, 0.2);
color: var(--color-black);
font-size: max(0.875rem, 10px);
font-weight: 500;
line-height: 1.4;
letter-spacing: 0;
text-decoration: none;
transition: color 0.3s ease-in-out;
}
@media (any-hover: hover) {
.p-header__drawer-item a:hover {
color: var(--color-main);
opacity: 1;
}
} .p-header__drawer-item--has-child > .p-header__drawer-acc > .p-header__drawer-acc-summary {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.5rem;
height: 2.8125rem;
border-bottom: 1px solid rgba(46, 46, 46, 0.2);
color: var(--color-black);
font-size: max(0.875rem, 10px);
font-weight: 500;
line-height: 1.4;
cursor: pointer;
list-style: none;
}
.p-header__drawer-acc-summary::-webkit-details-marker {
display: none;
}
.p-header__drawer-acc::details-content {
content-visibility: unset;
display: block grid;
}
@media (prefers-reduced-motion: no-preference) {
.p-header__drawer-acc::details-content {
transition: grid-template-rows 0.3s ease-in-out;
}
}
.p-header__drawer-acc:not([open])::details-content {
grid-template-rows: 0fr;
}
.p-header__drawer-acc[open]::details-content {
grid-template-rows: 1fr;
}
.p-header__drawer-acc-body {
overflow: hidden;
}
.p-header__drawer-acc-summary svg {
flex-shrink: 0;
width: 0.875rem;
height: 0.875rem;
transform: rotate(90deg);
transition: transform 0.3s ease-in-out;
}
.p-header__drawer-acc[open] > .p-header__drawer-acc-summary svg {
transform: rotate(-90deg);
}
.p-header__drawer-sublist {
list-style: none;
}
.p-header__drawer-subitem a {
display: flex;
align-items: center;
padding-left: 1rem;
height: 2.625rem;
border-bottom: 1px solid rgba(46, 46, 46, 0.2);
color: var(--color-black);
font-size: max(0.8125rem, 10px);
font-weight: 400;
line-height: 1.4;
text-decoration: none;
transition: color 0.3s ease-in-out;
}
@media (any-hover: hover) {
.p-header__drawer-subitem a:hover {
color: var(--color-main);
opacity: 1;
}
}
.p-header__drawer-contact {
display: flex;
align-items: center;
gap: 0.8125rem;
margin-block-start: 1.5rem;
padding-inline-start: 3rem;
}
.p-header__drawer-tel-icon {
flex-shrink: 0;
display: block;
width: 2.0625rem;
color: var(--color-main);
}
.p-header__drawer-tel-icon svg {
display: block;
width: 100%;
height: auto;
}
.p-header__drawer-contact-label,
.p-header__drawer-contact-time {
font-size: max(0.6875rem, 10px);
font-weight: 500;
line-height: 1.6;
color: var(--color-black);
}
.p-header__drawer-tel {
display: block;
color: var(--color-main);
text-decoration: none;
}
.p-header__drawer-tel-number {
font-family: var(--en-font-family);
font-size: max(2.3125rem, 10px);
font-weight: 500;
line-height: 0.7;
letter-spacing: 0.02em;
}
.p-header__drawer-buttons {
display: flex;
flex-direction: column;
gap: 0.9375rem;
margin-block-start: 1.375rem;
list-style: none;
}
.p-header__drawer-button {
position: relative;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 3.125rem;
border-radius: 1.5625rem;
background-color: var(--color-main);
color: var(--color-white);
font-family: var(--second-font-family);
font-size: max(0.875rem, 10px);
font-weight: 700;
letter-spacing: 0.1em;
text-decoration: none;
}
.p-header__drawer-button svg {
position: absolute;
inset-block: 0;
margin-block: auto;
flex-shrink: 0;
}
.p-header__drawer-buttons > li:nth-child(1) .p-header__drawer-button svg {
inset-inline-start: 0.875rem;
}
.p-header__drawer-buttons > li:nth-child(2) .p-header__drawer-button svg {
inset-inline-start: 1.375rem;
}
.p-header__drawer-buttons > li:nth-child(3) .p-header__drawer-button svg {
inset-inline-start: 1.1875rem;
}
.p-header__drawer-button--outline {
border-radius: var(--radius);
border: 1px solid #dadfe3;
background-color: transparent;
color: var(--color-black);
padding-inline-start: 1.3125rem;
} @media screen and (min-width: 1024px) and (max-width: 1399px) {
.p-header__top {
gap: 1rem;
} .p-header__button {
width: auto;
min-width: 0;
padding-inline: 1rem;
gap: 0.375rem;
}
.p-header__button:not(.p-header__button--outline) { padding-inline: 2.875rem 1.125rem;
}
.p-header__button:not(.p-header__button--outline) svg {
left: 0.875rem;
}
.p-header__button--outline {
width: auto;
padding-inline: 0.875rem;
}
}
.p-orthopedics__anchor {
margin-block-start: 2.125rem;
}
.p-orthopedics__anchor-list {
display: grid;
grid-template-columns: repeat(4, 1fr);
min-height: 6.625rem;
border: 1px solid var(--color-border-light);
border-radius: var(--radius);
background-color: var(--color-white);
overflow: hidden;
}
@media screen and (max-width: 767px) {
.p-orthopedics__anchor-list {
grid-template-columns: repeat(2, 1fr);
}
}
@media screen and (max-width: 767px) {
.p-orthopedics__anchor-list {
grid-template-columns: 1fr;
}
}
.p-orthopedics__anchor-item {
position: relative;
}
.p-orthopedics__anchor-item:not(:first-child)::before {
content: "";
position: absolute;
top: 50%;
left: 0;
width: 1px;
height: 4.8125rem;
background-color: var(--color-border-light);
transform: translateY(-50%);
}
@media screen and (max-width: 767px) {
.p-orthopedics__anchor-item:nth-child(odd)::before {
content: none;
}
}
@media screen and (max-width: 767px) {
.p-orthopedics__anchor-item::before {
content: none;
}
.p-orthopedics__anchor-item:not(:first-child) {
border-top: 1px solid var(--color-border-light);
}
}
.p-orthopedics__anchor-link {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
padding: 1.25rem 2.5rem;
font-size: max(0.9375rem, 10px);
font-weight: 500;
line-height: 1.6;
letter-spacing: 0.1em;
text-align: center;
text-decoration: none;
color: var(--color-black);
}
@media screen and (max-width: 767px) {
.p-orthopedics__anchor-link {
min-height: 4.5rem;
font-size: max(0.875rem, 10px);
}
}
.p-orthopedics__anchor-icon {
position: absolute;
top: 50%;
right: 1.25rem;
display: flex;
color: var(--color-main);
transform: translateY(-50%);
}
.p-orthopedics__section--band {
padding-block: 4.5625rem 5.8125rem;
background-color: var(--color-bg-light);
}
@media screen and (max-width: 767px) {
.p-orthopedics__section--band {
padding-block: 3rem 3.25rem;
}
}
.p-orthopedics__lead {
margin-block-start: 0.625rem;
font-size: max(0.875rem, 10px);
font-weight: 500;
line-height: 2.143;
letter-spacing: 0.1em;
text-align: center;
color: var(--color-black);
}
@media screen and (max-width: 767px) {
.p-orthopedics__lead {
font-size: max(0.8125rem, 10px);
line-height: 1.8;
text-align: left;
}
}
.p-orthopedics__text {
font-size: max(0.9375rem, 10px);
font-weight: 500;
line-height: 2;
letter-spacing: 0.1em;
color: var(--color-black);
}
@media screen and (max-width: 767px) {
.p-orthopedics__text {
font-size: max(0.875rem, 10px);
line-height: 1.8;
}
}
.p-orthopedics__subhead {
margin-block-start: 1rem;
font-size: max(0.9375rem, 10px);
font-weight: 500;
line-height: 2;
letter-spacing: 0.1em;
color: var(--color-main);
}
.c-title--band {
margin-block-start: 3.375rem;
}
@media screen and (max-width: 767px) {
.c-title--band {
margin-block-start: 2rem;
}
}
.p-orthopedics__cols {
margin-block-start: 2.0625rem;
display: grid;
grid-template-columns: 1fr 34rem;
align-items: start;
gap: 2.5rem;
}
@media screen and (max-width: 767px) {
.p-orthopedics__cols {
grid-template-columns: 1fr;
gap: 1.5rem;
}
}
.p-orthopedics__cols-image img {
width: 100%;
height: auto;
aspect-ratio: 544/350;
-o-object-fit: cover;
object-fit: cover;
}
.p-orthopedics__cols--reverse {
grid-template-columns: 34rem 1fr;
margin-block-start: 3.25rem;
}
@media screen and (max-width: 767px) {
.p-orthopedics__cols--reverse {
grid-template-columns: 1fr;
}
}
.p-orthopedics__cols-body {
display: flex;
flex-direction: column;
gap: 1.4375rem;
}
.p-orthopedics__cols-body .c-title--lg {
text-align: left;
}
.p-orthopedics__dept {
margin-block-start: 2.125rem;
}
.p-orthopedics__dept-label {
font-family: var(--second-font-family);
font-size: max(0.9375rem, 10px);
font-weight: 500;
line-height: 1.4;
letter-spacing: 0.1em;
color: var(--color-main);
}
.p-orthopedics__dept-head {
display: flex;
align-items: center;
gap: 1.25rem;
}
.p-orthopedics__dept-head::after {
content: "";
order: 1;
flex: 1;
height: 1px;
background-color: var(--color-black);
}
.p-orthopedics__dept-head .c-title--lg {
order: 0;
}
@media screen and (max-width: 767px) {
.p-orthopedics__dept-head {
flex-wrap: wrap;
}
.p-orthopedics__dept-head::after {
content: none;
}
}
.p-orthopedics__dept-note {
order: 2;
font-size: max(0.9375rem, 10px);
font-weight: 500;
line-height: 2;
letter-spacing: 0.1em;
color: var(--color-black);
}
.p-orthopedics__dept + .p-orthopedics__text {
margin-block-start: 0.8125rem;
}
.p-orthopedics__table-wrap {
margin-block-start: 0.625rem;
}
.p-orthopedics__table {
width: 100%;
border-collapse: collapse;
table-layout: fixed;
}
.p-orthopedics__table th,
.p-orthopedics__table td {
border-bottom: 1px solid var(--color-border-table);
}
.p-orthopedics__table thead th {
height: 3.75rem;
border-bottom: none;
background-color: var(--color-sub);
font-size: max(1rem, 10px);
font-weight: 700;
line-height: 1.875;
letter-spacing: 0.1em;
text-align: center;
color: var(--color-white);
}
.p-orthopedics__table tbody th,
.p-orthopedics__table tbody td {
padding: 1.125rem 1.25rem;
vertical-align: middle;
text-align: left;
}
.p-orthopedics__table tbody td:last-child {
padding-inline: 1.25rem 1rem;
}
.p-orthopedics__table tbody th {
font-size: max(1rem, 10px);
font-weight: 700;
line-height: 1.875;
letter-spacing: 0.1em;
color: var(--color-main);
}
.p-orthopedics__table tbody td {
font-size: max(0.9375rem, 10px);
font-weight: 500;
line-height: 2;
letter-spacing: 0.1em;
color: var(--color-black);
}
.p-orthopedics__table tbody th,
.p-orthopedics__table thead th:first-child {
border-right: 1px solid var(--color-border-table);
}
.p-orthopedics__table tbody td:first-of-type,
.p-orthopedics__table thead th:nth-child(2) {
border-right: 1px solid var(--color-border-table);
}
.p-orthopedics__table th:nth-child(1) {
width: 17.875rem;
}
.p-orthopedics__table th:nth-child(2) {
width: 42.6875rem;
}
@media screen and (max-width: 767px) {
.p-orthopedics__table {
display: block;
border-collapse: separate;
}
.p-orthopedics__table thead {
display: none;
}
.p-orthopedics__table tbody {
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.p-orthopedics__table tr {
display: block;
border: 1px solid var(--color-border-table);
border-radius: var(--radius);
background-color: var(--color-white);
overflow: hidden;
}
.p-orthopedics__table th:nth-child(1),
.p-orthopedics__table th:nth-child(2) {
width: auto;
}
.p-orthopedics__table tbody th {
display: block;
width: auto;
padding: 0.625rem 1rem;
border-bottom: 1px solid var(--color-border-table);
background-color: rgba(132, 149, 161, 0.12);
font-size: max(0.9375rem, 10px);
}
.p-orthopedics__table tbody td {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.25rem 0.625rem;
padding: 0.625rem 1rem;
border-bottom: 1px solid var(--color-border-table);
border-right: none;
font-size: max(0.875rem, 10px);
line-height: 1.8;
}
.p-orthopedics__table tbody td::before {
content: attr(data-label);
flex-shrink: 0;
min-width: 5.25rem;
font-size: max(0.75rem, 10px);
font-weight: 700;
letter-spacing: 0.1em;
color: var(--color-main);
}
.p-orthopedics__table tbody tr td:last-child {
padding-inline: 1rem;
border-bottom: none;
}
}
.p-orthopedics__tags {
display: flex;
flex-wrap: wrap;
gap: 0.25rem;
}
.p-orthopedics__tag {
display: inline-flex;
align-items: center;
justify-content: center;
width: 3.8125rem;
height: 1.875rem;
border-radius: 0.25rem;
background-color: rgba(132, 149, 161, 0.4);
font-size: max(0.8125rem, 10px);
font-weight: 500;
line-height: 1;
letter-spacing: 0.1em;
color: var(--color-black);
}
.p-orthopedics__data {
margin-block-start: 1.875rem;
padding: 1.3125rem 1.875rem 1rem;
background-color: var(--color-sub);
}
@media screen and (max-width: 767px) {
.p-orthopedics__data {
margin-block-start: 2.5rem;
padding: 1.5rem 1rem 1rem;
}
}
.p-orthopedics__data-title {
padding-bottom: 0.5625rem;
border-bottom: 1px solid var(--color-white);
font-family: var(--second-font-family);
font-size: max(1.375rem, 10px);
font-weight: 500;
line-height: 1.75;
letter-spacing: 0.1em;
text-align: center;
color: var(--color-white);
}
@media screen and (max-width: 767px) {
.p-orthopedics__data-title {
font-size: max(1.0625rem, 10px);
}
}
.p-orthopedics__data-period {
margin-block-start: 1.0625rem;
font-family: var(--second-font-family);
font-size: max(1.125rem, 10px);
font-weight: 500;
line-height: 1.75;
letter-spacing: 0.1em;
text-align: center;
color: var(--color-white);
}
@media screen and (max-width: 767px) {
.p-orthopedics__data-period {
font-size: max(0.875rem, 10px);
}
}
.p-orthopedics__data-grid {
margin-block-start: 0.6875rem;
display: grid;
grid-template-columns: 35rem 1fr 1fr;
gap: 0.3125rem;
}
@media screen and (max-width: 767px) {
.p-orthopedics__data-grid {
grid-template-columns: 1fr 1fr;
}
}
@media screen and (max-width: 767px) {
.p-orthopedics__data-grid {
grid-template-columns: 1fr;
}
}
.p-orthopedics__data-total {
grid-row: span 2;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 0.25rem;
min-height: 17.8125rem;
padding: 1.625rem 1.25rem;
background-color: var(--color-white);
}
@media screen and (max-width: 767px) {
.p-orthopedics__data-total {
grid-row: auto;
grid-column: 1/-1;
}
}
@media screen and (max-width: 767px) {
.p-orthopedics__data-total {
min-height: 12.5rem;
}
}
.p-orthopedics__data-item {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 8.75rem;
padding: 1rem;
background-color: var(--color-white);
}
.p-orthopedics__data-label {
font-family: var(--second-font-family);
font-size: max(1.125rem, 10px);
font-weight: 500;
line-height: 1.75;
letter-spacing: 0.1em;
text-align: center;
color: var(--color-main);
}
@media screen and (max-width: 767px) {
.p-orthopedics__data-label {
font-size: max(0.9375rem, 10px);
}
}
.p-orthopedics__data-number {
display: flex;
align-items: baseline;
justify-content: center;
gap: 0.25rem;
font-family: var(--second-font-family);
font-size: max(1.125rem, 10px);
font-weight: 500;
line-height: 1.75;
letter-spacing: 0.1em;
color: var(--color-main);
}
.p-orthopedics__data-number span {
font-family: var(--en-font-family);
font-size: max(7.29375rem, 10px);
line-height: 1.2;
letter-spacing: 0;
}
@media screen and (max-width: 767px) {
.p-orthopedics__data-number span {
font-size: max(4.5rem, 10px);
}
}
.p-orthopedics__data-number--sm span {
font-size: max(3.75rem, 10px);
}
@media screen and (max-width: 767px) {
.p-orthopedics__data-number--sm span {
font-size: max(3rem, 10px);
}
}
.p-orthopedics__data-source {
font-size: max(0.875rem, 10px);
font-weight: 500;
line-height: 2.143;
letter-spacing: 0.1em;
color: var(--color-black);
}
@media screen and (max-width: 767px) {
.p-orthopedics__data-source {
font-size: max(0.75rem, 10px);
}
}
.p-orthopedics__data-note {
margin-block-start: 0;
font-size: max(0.75rem, 10px);
font-weight: 500;
line-height: 2.5;
letter-spacing: 0.1em;
text-align: right;
color: var(--color-white);
}
@media screen and (max-width: 767px) {
.p-orthopedics__data-note {
text-align: left;
}
}
.p-orthopedics__button-wrap {
margin-block-start: 1.625rem;
display: flex;
justify-content: center;
}
.p-orthopedics__steps {
margin-block-start: 2.25rem;
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 2.5rem;
}
@media screen and (max-width: 767px) {
.p-orthopedics__steps {
grid-template-columns: 1fr;
gap: 3.5rem;
}
}
@media screen and (max-width: 767px) {
.p-orthopedics__steps {
margin-block-start: 3.5rem;
}
}
.p-orthopedics__step {
position: relative;
display: flex;
flex-direction: column;
padding: 1.875rem 1.875rem 2rem;
background-color: var(--color-white);
}
.p-orthopedics__step:not(:first-child)::before {
content: "";
position: absolute;
top: 11.5rem;
left: -2.5rem;
width: 2.0625rem;
height: 3.875rem;
background: url(//syokashi-hp.or.jp/seikei/wp-content/themes/syokashi-se/images/sub/arrow-flow.svg) center/contain no-repeat;
}
@media screen and (max-width: 767px) {
.p-orthopedics__step:not(:first-child)::before {
top: -3.5rem;
left: 50%;
transform: translateX(-50%) rotate(90deg);
}
}
.p-orthopedics__step-badge {
position: absolute;
top: -1.25rem;
left: -1.25rem;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 6.625rem;
height: 6.625rem;
border-radius: 50%;
background-color: var(--color-sub);
color: var(--color-white);
}
@media screen and (max-width: 767px) {
.p-orthopedics__step-badge {
top: -1rem;
left: 0;
width: 5rem;
height: 5rem;
}
}
.p-orthopedics__step-en {
font-family: var(--en-font-family);
font-size: max(1rem, 10px);
line-height: 1;
letter-spacing: 0.05em;
}
.p-orthopedics__step-num {
font-family: var(--en-font-family);
font-size: max(3.125rem, 10px);
line-height: 1.1;
}
@media screen and (max-width: 767px) {
.p-orthopedics__step-num {
font-size: max(2.25rem, 10px);
}
}
.p-orthopedics__step-title {
text-align: center;
}
.p-orthopedics__step-text {
margin-block-start: 0.75rem;
margin-block-end: 1.9375rem;
font-size: max(0.875rem, 10px);
font-weight: 500;
line-height: 2;
letter-spacing: 0.1em;
text-align: center;
color: var(--color-black);
}
@media screen and (max-width: 767px) {
.p-orthopedics__step-text {
text-align: left;
}
}
.p-orthopedics__step-list {
margin-block-start: auto;
padding-block-start: 1.3125rem;
border-top: 1px solid var(--color-black);
display: grid;
grid-template-columns: 14.25rem 1fr;
gap: 0;
}
@media screen and (max-width: 767px) {
.p-orthopedics__step-list {
grid-template-columns: 1fr;
}
}
.p-orthopedics__step-item {
position: relative;
padding-inline-start: 1rem;
font-size: max(0.875rem, 10px);
font-weight: 500;
line-height: 2;
letter-spacing: 0.1em;
color: var(--color-black);
}
.p-orthopedics__step-item::before {
content: "";
position: absolute;
top: 0.6875rem;
left: 0;
width: 0.375rem;
height: 0.375rem;
border-radius: 50%;
background-color: var(--color-main);
}
.p-orthopedics__flow-band {
margin-block-start: 2.6875rem;
}
.p-orthopedics__flow {
margin-block-start: 2.0625rem;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1.25rem;
}
@media screen and (max-width: 767px) {
.p-orthopedics__flow {
grid-template-columns: 1fr;
gap: 2.875rem;
}
}
.p-orthopedics__flow-item {
position: relative;
min-height: 15.8125rem;
padding: 2.5rem 0.9375rem 1.375rem 1.5625rem;
border-radius: var(--radius);
background-color: var(--color-white);
box-shadow: 0 0.125rem 0.625rem rgba(0, 0, 0, 0.08);
}
.p-orthopedics__flow-item:not(:first-child)::before {
content: "";
position: absolute;
top: 5.4375rem;
left: -1.6875rem;
width: 2.0625rem;
height: 3.875rem;
background: url(//syokashi-hp.or.jp/seikei/wp-content/themes/syokashi-se/images/sub/arrow-flow.svg) center/contain no-repeat;
}
@media screen and (max-width: 767px) {
.p-orthopedics__flow-item {
min-height: 0;
}
.p-orthopedics__flow-item:not(:first-child)::before {
top: -3.375rem;
left: 50%;
transform: translateX(-50%) rotate(90deg);
}
}
.p-orthopedics__flow-num {
font-family: var(--en-font-family);
font-size: max(1rem, 10px);
line-height: 1.75;
letter-spacing: 0.05em;
text-align: center;
color: var(--color-main);
}
.p-orthopedics__flow-head {
margin-block-start: 1.25rem;
display: flex;
align-items: center;
gap: 0.625rem;
}
.p-orthopedics__flow-title {
font-family: var(--second-font-family);
font-size: max(1.25rem, 10px);
font-weight: 500;
line-height: 1.75;
letter-spacing: 0.05em;
color: var(--color-main);
}
@media screen and (max-width: 767px) {
.p-orthopedics__flow-title {
font-size: max(1.0625rem, 10px);
}
}
.p-orthopedics__flow-text {
margin-block-start: 1.0625rem;
font-size: max(0.875rem, 10px);
font-weight: 500;
line-height: 1.714;
letter-spacing: 0.05em;
color: var(--color-black);
}
.p-orthopedics__notice {
margin-block-start: 1.1875rem;
padding: 1.5625rem 1.5625rem;
border: 1px solid var(--color-alert);
background-color: var(--color-white);
font-size: max(0.875rem, 10px);
font-weight: 500;
line-height: 1.714;
letter-spacing: 0.05em;
color: var(--color-black);
}
.p-orthopedics__notice-strong {
color: var(--color-alert);
}
.p-orthopedics__notice + .p-orthopedics__button-wrap {
margin-block-start: 1.8125rem;
}
.p-orthopedics__search {
margin-block-start: 2.125rem;
display: grid;
grid-template-columns: repeat(3, 1fr);
align-items: start;
gap: 1.875rem;
}
@media screen and (max-width: 767px) {
.p-orthopedics__search {
grid-template-columns: 1fr;
max-width: 23.75rem;
margin-inline: auto;
}
}
@media screen and (max-width: 767px) {
.p-orthopedics__search {
margin-block-start: 2.5rem;
}
}
.p-orthopedics__search-item {
padding: 0.625rem;
background-color: var(--color-white);
}
.p-orthopedics__search-image img {
width: 100%;
height: 13.75rem;
-o-object-fit: cover;
object-fit: cover;
}
.p-orthopedics__search-body {
padding: 1.4375rem 0.9375rem 1.1875rem;
}
.p-orthopedics__search-title {
font-family: var(--second-font-family);
font-size: max(1.25rem, 10px);
font-weight: 500;
line-height: 1.75;
letter-spacing: 0.1em;
text-align: center;
color: var(--color-main);
}
@media screen and (max-width: 767px) {
.p-orthopedics__search-title {
font-size: max(1.0625rem, 10px);
}
}
.p-orthopedics__search-text {
margin-block-start: 0.375rem;
font-size: max(0.875rem, 10px);
font-weight: 500;
line-height: 1.714;
letter-spacing: 0.05em;
text-align: left;
color: var(--color-black);
}
@media screen and (max-width: 767px) {
.p-orthopedics__search-text {
text-align: left;
}
}
.p-orthopedics__search-foot {
background-color: var(--color-bg-light);
}
.p-orthopedics__search-foot::details-content {
content-visibility: unset;
display: block grid;
grid-template-rows: 0fr;
}
.p-orthopedics__search-panel {
min-height: 0;
overflow: hidden;
}
.p-orthopedics__search-foot[open]::details-content {
grid-template-rows: 1fr;
}
@media (prefers-reduced-motion: no-preference) {
.p-orthopedics__search-foot::details-content {
transition: grid-template-rows 0.3s ease-in-out;
}
}
.p-orthopedics__search-link {
list-style: none;
cursor: pointer;
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.625rem;
height: 3.125rem;
padding-inline: 1.0625rem;
font-size: max(1rem, 10px);
font-weight: 500;
line-height: 1.4;
letter-spacing: 0.1em;
text-decoration: none;
color: var(--color-main);
}
@media screen and (max-width: 767px) {
.p-orthopedics__search-link {
font-size: max(0.875rem, 10px);
}
}
.p-orthopedics__search-link::-webkit-details-marker {
display: none;
}
.p-orthopedics__search-arrow {
display: flex;
flex-shrink: 0;
align-items: center;
justify-content: center;
width: 1.375rem;
height: 1.375rem;
border-radius: 50%;
background-color: var(--color-main);
color: var(--color-white);
transition: transform 0.3s ease-in-out;
}
.p-orthopedics__search-foot[open] .p-orthopedics__search-arrow {
transform: rotate(180deg);
}
.p-orthopedics__search-list {
padding: 0.125rem 1.0625rem 1.375rem;
display: grid;
grid-auto-flow: column;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: repeat(4, auto);
gap: 0 0.625rem;
}
.p-orthopedics__search-list li {
font-size: max(0.875rem, 10px);
font-weight: 500;
line-height: 2.143;
letter-spacing: 0.05em;
}
.p-orthopedics__search-list a {
text-decoration: none;
color: var(--color-black);
}
@media screen and (max-width: 767px) {
.p-orthopedics__search-list {
grid-auto-flow: row;
grid-template-columns: 1fr;
grid-template-rows: none;
}
}
@media (any-hover: hover) {
a.p-orthopedics__search-link:hover {
opacity: 0.7;
}
}
.p-orthopedics__search--even .p-orthopedics__search-item {
display: flex;
flex-direction: column;
}
.p-orthopedics__search--even .p-orthopedics__search-text {
min-height: 5.142em;
}
@media screen and (max-width: 767px) {
.p-orthopedics__search--even .p-orthopedics__search-text {
min-height: 0;
}
}
.p-orthopedics__search--2col {
grid-template-columns: repeat(2, 1fr);
max-width: 49.375rem;
margin-inline: auto;
}
@media screen and (max-width: 767px) {
.p-orthopedics__search--2col {
grid-template-columns: 1fr;
}
}
.p-orthopedics__lead + .p-orthopedics__lead {
margin-block-start: 1rem;
}
.c-title--band + .p-orthopedics__text {
margin-block-start: 1.5rem;
}
@media screen and (max-width: 767px) {
.c-title--band + .p-orthopedics__text {
margin-block-start: 1rem;
}
}
.p-orthopedics__text + .p-orthopedics__text {
margin-block-start: 0.75rem;
}
.p-orthopedics__text--note {
font-size: max(0.8125rem, 10px);
}
@media screen and (max-width: 767px) {
.p-orthopedics__text--note {
font-size: max(0.75rem, 10px);
}
}
.p-orthopedics__features {
display: flex;
align-items: baseline;
justify-content: center;
gap: 0.5rem;
margin-block-end: 0.25rem;
font-family: var(--en-font-family);
line-height: 1;
color: var(--color-main);
}
.p-orthopedics__features-en {
font-size: max(1rem, 10px);
letter-spacing: 0.05em;
}
@media screen and (max-width: 767px) {
.p-orthopedics__features-en {
font-size: max(0.75rem, 10px);
}
}
.p-orthopedics__features-num {
font-size: max(2rem, 10px);
letter-spacing: 0.02em;
}
@media screen and (max-width: 767px) {
.p-orthopedics__features-num {
font-size: max(1.625rem, 10px);
}
}
.p-pdffd__intro,
.p-pdffd__reason {
margin-block-start: 2.5rem;
display: grid;
grid-template-columns: 1fr 32.5rem;
gap: 3.125rem;
align-items: center;
}
@media screen and (max-width: 767px) {
.p-pdffd__intro,
.p-pdffd__reason {
margin-block-start: 1.5rem;
grid-template-columns: 1fr;
gap: 1.5rem;
}
}
.p-pdffd__intro-body .p-sub-page__text + .p-sub-page__text,
.p-pdffd__reason-body .p-sub-page__text + .p-sub-page__text {
margin-block-start: 1.25rem;
}
.p-pdffd__intro-image img,
.p-pdffd__reason-image img,
.p-pdffd__figure img {
width: 100%;
height: auto;
border-radius: var(--radius);
}
.p-pdffd__check {
margin-block-start: 2.5rem;
padding: 2.5rem 3.75rem;
border-radius: var(--radius);
background-color: var(--color-white);
}
@media screen and (max-width: 767px) {
.p-pdffd__check {
margin-block-start: 1.5rem;
padding: 1rem 1.25rem;
}
}
.p-pdffd__check-item {
position: relative;
padding: 1.125rem 0 1.125rem 2.375rem;
border-bottom: 1px dashed var(--color-border);
font-size: max(0.9375rem, 10px);
font-weight: 500;
line-height: 1.867;
letter-spacing: 0.1em;
color: var(--color-black);
}
.p-pdffd__check-item:last-child {
border-bottom: none;
}
.p-pdffd__check-item::before {
content: "";
position: absolute;
top: 1.375rem;
left: 0;
width: 1.25rem;
height: 1.25rem;
border-radius: 50%;
background-color: var(--color-sub);
}
.p-pdffd__check-item::after {
content: "";
position: absolute;
top: 1.75rem;
left: 0.375rem;
width: 0.5rem;
height: 0.25rem;
border-left: 2px solid var(--color-white);
border-bottom: 2px solid var(--color-white);
transform: rotate(-45deg);
}
@media screen and (max-width: 767px) {
.p-pdffd__check-item {
padding: 0.75rem 0 0.75rem 1.875rem;
font-size: max(0.875rem, 10px);
line-height: 1.7;
}
.p-pdffd__check-item::before {
top: 0.9375rem;
width: 1.125rem;
height: 1.125rem;
}
.p-pdffd__check-item::after {
top: 1.25rem;
left: 0.3125rem;
}
}
.p-pdffd__merit {
margin-block-start: 2.5rem;
padding: 2.5rem 3.75rem;
border-radius: var(--radius);
background-color: var(--color-white);
}
@media screen and (max-width: 767px) {
.p-pdffd__merit {
margin-block-start: 1.5rem;
padding: 1rem 1.25rem;
}
}
.p-pdffd__merit-item {
padding-block: 1.375rem;
border-bottom: 1px dashed var(--color-border);
}
.p-pdffd__merit-item:last-child {
border-bottom: none;
}
@media screen and (max-width: 767px) {
.p-pdffd__merit-item {
padding-block: 1rem;
}
}
.p-pdffd__merit-title {
position: relative;
padding-inline-start: 2.375rem;
font-size: max(1rem, 10px);
font-weight: 700;
line-height: 1.75;
letter-spacing: 0.1em;
color: var(--color-main);
}
.p-pdffd__merit-title::before {
content: "";
position: absolute;
top: 0.25rem;
left: 0;
width: 1.25rem;
height: 1.25rem;
border-radius: 50%;
background-color: var(--color-sub);
}
.p-pdffd__merit-title::after {
content: "";
position: absolute;
top: 0.625rem;
left: 0.375rem;
width: 0.5rem;
height: 0.25rem;
border-left: 2px solid var(--color-white);
border-bottom: 2px solid var(--color-white);
transform: rotate(-45deg);
}
@media screen and (max-width: 767px) {
.p-pdffd__merit-title {
padding-inline-start: 1.875rem;
font-size: max(0.9375rem, 10px);
}
.p-pdffd__merit-title::before {
width: 1.125rem;
height: 1.125rem;
}
}
.p-pdffd__merit-text {
margin-block-start: 0.5rem;
padding-inline-start: 2.375rem;
font-size: max(0.9375rem, 10px);
font-weight: 500;
line-height: 1.867;
letter-spacing: 0.1em;
color: var(--color-black);
}
@media screen and (max-width: 767px) {
.p-pdffd__merit-text {
padding-inline-start: 1.875rem;
font-size: max(0.875rem, 10px);
}
}
.p-pdffd__figure {
margin-block-start: 2.5rem;
text-align: center;
}
.p-pdffd__figure img {
display: inline-block;
max-width: 56.25rem;
}
@media screen and (max-width: 767px) {
.p-pdffd__figure {
margin-block-start: 1.5rem;
}
}
.p-pdffd__caution {
margin-block-start: 1.875rem;
padding: 1.375rem 1.625rem;
border: 1px solid var(--color-border);
border-radius: var(--radius);
font-size: max(0.875rem, 10px);
font-weight: 500;
line-height: 1.857;
letter-spacing: 0.1em;
color: var(--color-black);
}
@media screen and (max-width: 767px) {
.p-pdffd__caution {
margin-block-start: 1.25rem;
padding: 1rem;
font-size: max(0.8125rem, 10px);
}
}
.p-pdffd__flow {
margin-block-start: 2.5rem;
}
@media screen and (max-width: 767px) {
.p-pdffd__flow {
margin-block-start: 1.5rem;
}
}
.p-pdffd__flow-item {
position: relative;
display: flex;
align-items: center;
gap: 1.875rem;
padding: 1.625rem 2.5rem;
border-radius: var(--radius);
background-color: var(--color-white);
}
.p-pdffd__flow-item + .p-pdffd__flow-item {
margin-block-start: 2.875rem;
}
.p-pdffd__flow-item + .p-pdffd__flow-item::before {
content: "";
position: absolute;
top: -3.375rem;
left: 50%;
width: 2.0625rem;
height: 3.875rem;
background: url(//syokashi-hp.or.jp/seikei/wp-content/themes/syokashi-se/images/sub/arrow-flow.svg) center/contain no-repeat;
transform: translateX(-50%) rotate(90deg);
}
@media screen and (max-width: 767px) {
.p-pdffd__flow-item {
gap: 1rem;
padding: 1.125rem 1.25rem;
}
.p-pdffd__flow-item + .p-pdffd__flow-item {
margin-block-start: 2.375rem;
}
}
.p-pdffd__flow-num {
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
width: 3.125rem;
height: 3.125rem;
border-radius: 50%;
background-color: var(--color-bg);
font-family: var(--en-font-family);
font-size: max(1.25rem, 10px);
line-height: 1;
color: var(--color-black);
}
@media screen and (max-width: 767px) {
.p-pdffd__flow-num {
position: absolute;
top: 0.75rem;
left: 0.75rem;
z-index: 1;
width: 2.375rem;
height: 2.375rem;
font-size: max(1rem, 10px);
}
}
.p-pdffd__flow-title {
font-size: max(1.125rem, 10px);
font-weight: 700;
line-height: 1.6;
letter-spacing: 0.1em;
color: var(--color-main);
}
@media screen and (max-width: 767px) {
.p-pdffd__flow-title {
font-size: max(1rem, 10px);
}
}
.p-pdffd__flow-text {
margin-block-start: 0.5rem;
font-size: max(0.9375rem, 10px);
font-weight: 500;
line-height: 1.867;
letter-spacing: 0.1em;
color: var(--color-black);
}
@media screen and (max-width: 767px) {
.p-pdffd__flow-text {
font-size: max(0.875rem, 10px);
}
}
.p-pdffd__cautions {
margin-block-start: 2.5rem;
display: flex;
flex-direction: column;
gap: 1.25rem;
}
@media screen and (max-width: 767px) {
.p-pdffd__cautions {
margin-block-start: 1.5rem;
gap: 1rem;
}
}
.p-pdffd__cautions-item {
padding: 1.625rem 1.875rem;
border: 1px solid var(--color-border);
border-radius: var(--radius);
}
@media screen and (max-width: 767px) {
.p-pdffd__cautions-item {
padding: 1.125rem 1.25rem;
}
}
.p-pdffd__cautions-title {
font-size: max(1rem, 10px);
font-weight: 700;
line-height: 1.75;
letter-spacing: 0.1em;
color: var(--color-main);
}
@media screen and (max-width: 767px) {
.p-pdffd__cautions-title {
font-size: max(0.9375rem, 10px);
}
}
.p-pdffd__cautions-text {
margin-block-start: 0.625rem;
font-size: max(0.9375rem, 10px);
font-weight: 500;
line-height: 1.867;
letter-spacing: 0.1em;
color: var(--color-black);
}
@media screen and (max-width: 767px) {
.p-pdffd__cautions-text {
font-size: max(0.875rem, 10px);
}
}
.p-pdffd__cta {
padding-block: 3.5rem 3.75rem;
background-color: var(--color-black);
text-align: center;
}
@media screen and (max-width: 767px) {
.p-pdffd__cta {
padding-block: 2.5rem;
}
}
.p-pdffd__cta-title {
font-family: var(--second-font-family);
font-size: max(1.375rem, 10px);
font-weight: 500;
line-height: 1.6;
letter-spacing: 0.1em;
color: var(--color-white);
}
@media screen and (max-width: 767px) {
.p-pdffd__cta-title {
font-size: max(1.0625rem, 10px);
}
}
.p-pdffd__cta-text {
margin-block-start: 0.875rem;
font-size: max(0.875rem, 10px);
font-weight: 500;
line-height: 1.857;
letter-spacing: 0.1em;
color: var(--color-white);
}
@media screen and (max-width: 767px) {
.p-pdffd__cta-text {
font-size: max(0.8125rem, 10px);
}
}
.p-pdffd__cta-button {
width: 22.5rem;
margin-block-start: 1.625rem;
}
@media screen and (max-width: 767px) {
.p-pdffd__cta-button {
width: 100%;
max-width: 20rem;
margin-block-start: 1.25rem;
}
}
.p-pdffd__flow-image {
flex-shrink: 0;
}
.p-pdffd__flow-image img {
width: 5.125rem;
height: 5.375rem;
border-radius: 50%;
-o-object-fit: cover;
object-fit: cover;
}
@media screen and (max-width: 767px) {
.p-pdffd__flow-image img {
width: 5.125rem;
height: 5.375rem;
}
}
.p-results__about {
margin-block-start: 2.5rem;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1.875rem;
}
@media screen and (max-width: 767px) {
.p-results__about {
margin-block-start: 1.5rem;
grid-template-columns: 1fr;
gap: 1rem;
}
}
.p-results__about-item {
padding: 1.5rem 1.625rem 1.75rem;
border-radius: var(--radius);
background-color: var(--color-bg-light);
}
@media screen and (max-width: 767px) {
.p-results__about-item {
padding: 1.125rem 1.25rem 1.25rem;
}
}
.p-results__about-term {
font-size: max(0.8125rem, 10px);
font-weight: 500;
letter-spacing: 0.1em;
color: var(--color-sub-deep);
}
@media screen and (max-width: 767px) {
.p-results__about-term {
font-size: max(0.75rem, 10px);
}
}
.p-results__about-name {
margin-block-start: 0.625rem;
font-family: var(--second-font-family);
font-size: max(1.25rem, 10px);
font-weight: 500;
line-height: 1.6;
letter-spacing: 0.1em;
color: var(--color-main);
}
@media screen and (max-width: 767px) {
.p-results__about-name {
font-size: max(1.0625rem, 10px);
}
}
.p-results__about-text {
margin-block-start: 0.75rem;
font-size: max(0.875rem, 10px);
font-weight: 500;
line-height: 1.857;
letter-spacing: 0.1em;
color: var(--color-black);
}
@media screen and (max-width: 767px) {
.p-results__about-text {
font-size: max(0.8125rem, 10px);
}
}
.p-results__total {
margin-block-start: 2.5rem;
display: flex;
align-items: center;
justify-content: center;
gap: 5rem;
}
@media screen and (max-width: 767px) {
.p-results__total {
margin-block-start: 1.5rem;
flex-direction: column;
align-items: flex-start;
gap: 1.25rem;
}
}
.p-results__total-text {
font-size: max(0.9375rem, 10px);
font-weight: 500;
line-height: 2;
letter-spacing: 0.1em;
color: var(--color-black);
}
@media screen and (max-width: 767px) {
.p-results__total-text {
font-size: max(0.875rem, 10px);
line-height: 1.8;
}
}
.p-results__total-figure {
text-align: center;
}
@media screen and (max-width: 767px) {
.p-results__total-figure {
align-self: center;
}
}
.p-results__total-label {
font-size: max(0.8125rem, 10px);
font-weight: 500;
letter-spacing: 0.1em;
color: var(--color-black);
}
.p-results__total-num {
margin-block-start: 0.375rem;
font-family: var(--en-font-family);
font-size: max(4rem, 10px);
line-height: 1.1;
letter-spacing: 0.02em;
color: var(--color-main);
}
.p-results__total-num small {
margin-inline-start: 0.375rem;
font-family: var(--base-font-family);
font-size: max(1rem, 10px);
font-weight: 500;
}
@media screen and (max-width: 767px) {
.p-results__total-num {
font-size: max(2.75rem, 10px);
}
.p-results__total-num small {
font-size: max(0.875rem, 10px);
}
}
.p-results__total-note {
margin-block-start: 0.375rem;
font-size: max(0.8125rem, 10px);
font-weight: 500;
letter-spacing: 0.1em;
color: var(--color-sub-deep);
}
@media screen and (max-width: 767px) {
.p-results__total-note {
font-size: max(0.75rem, 10px);
}
}
.p-results__source {
display: flex;
align-items: center;
justify-content: center;
gap: 0.625rem;
margin-block-start: 1.5rem;
}
@media screen and (max-width: 767px) {
.p-results__source {
align-items: flex-start;
flex-direction: column;
gap: 0.375rem;
margin-block-start: 1rem;
}
}
.p-results__source-label {
flex-shrink: 0;
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 4rem;
height: 1.5625rem;
padding-inline: 0.625rem;
border-radius: 0.25rem;
background-color: var(--color-bg);
font-size: max(0.75rem, 10px);
font-weight: 500;
letter-spacing: 0.1em;
color: var(--color-black);
}
.p-results__source-text {
font-size: max(0.8125rem, 10px);
font-weight: 500;
line-height: 1.6;
letter-spacing: 0.1em;
color: var(--color-black);
}
@media screen and (max-width: 767px) {
.p-results__source-text {
font-size: max(0.75rem, 10px);
}
}
.p-results__table-wrap {
margin-block-start: 2.5rem;
}
@media screen and (max-width: 767px) {
.p-results__table-wrap {
margin-block-start: 1.5rem;
}
}
.p-results__table {
width: 100%;
border-collapse: collapse;
}
.p-results__table thead th {
padding: 0.75rem 1rem;
border-bottom: 1px solid var(--color-black);
font-size: max(0.8125rem, 10px);
font-weight: 500;
letter-spacing: 0.1em;
text-align: right;
color: var(--color-sub-deep);
}
.p-results__table thead th:first-child {
text-align: left;
}
.p-results__table tbody th,
.p-results__table tfoot th {
padding: 1.25rem 1rem;
font-size: max(1rem, 10px);
font-weight: 700;
letter-spacing: 0.1em;
text-align: left;
color: var(--color-black);
}
.p-results__table tbody td,
.p-results__table tfoot td {
padding: 1.25rem 1rem;
text-align: right;
letter-spacing: 0.1em;
color: var(--color-black);
}
.p-results__table tbody tr {
border-bottom: 1px solid var(--color-border);
}
.p-results__table tfoot tr {
border-top: 1px solid var(--color-black);
background-color: var(--color-bg-light);
}
.p-results__table small {
margin-inline-start: 0.25rem;
font-size: max(0.75rem, 10px);
font-weight: 500;
}
@media screen and (max-width: 767px) {
.p-results__table {
display: block;
}
.p-results__table thead {
display: none;
}
.p-results__table tbody,
.p-results__table tfoot,
.p-results__table tr {
display: block;
}
.p-results__table tbody tr,
.p-results__table tfoot tr {
padding-block: 0.75rem;
}
.p-results__table tbody th,
.p-results__table tfoot th {
display: block;
padding: 0 0.625rem 0.5rem;
font-size: max(0.9375rem, 10px);
}
.p-results__table tbody td,
.p-results__table tfoot td {
display: flex;
align-items: baseline;
gap: 0.25rem;
padding: 0.25rem 0.625rem;
}
.p-results__table tbody td::before,
.p-results__table tfoot td::before {
content: attr(data-label);
margin-inline-end: auto;
font-size: max(0.75rem, 10px);
font-weight: 500;
color: var(--color-sub-deep);
}
}
.p-results__num {
font-family: var(--en-font-family);
font-size: max(1.5rem, 10px);
line-height: 1.2;
color: var(--color-main);
}
@media screen and (max-width: 767px) {
.p-results__num {
font-size: max(1.25rem, 10px);
}
}
.p-results__table-total {
font-size: max(0.875rem, 10px);
color: var(--color-sub-deep);
}
.p-results__table-sub {
display: block;
margin-block-start: 0.125rem;
font-size: max(0.75rem, 10px);
font-weight: 500;
color: var(--color-sub-deep);
}
.p-results__year {
display: flex;
align-items: center;
justify-content: center;
width: -moz-fit-content;
width: fit-content;
height: 2rem;
margin: 2.5rem auto 0;
padding-inline: 1.5rem;
background-color: var(--color-black);
font-size: max(0.875rem, 10px);
font-weight: 700;
letter-spacing: 0.1em;
color: var(--color-white);
}
@media screen and (max-width: 767px) {
.p-results__year {
margin-block-start: 1.5rem;
font-size: max(0.8125rem, 10px);
}
}
.p-results__rehab {
margin-block-start: 1.875rem;
border-top: 1px solid var(--color-border);
}
.p-results__rehab-item {
display: grid;
grid-template-columns: 7.5rem 1fr auto;
gap: 1.5rem;
align-items: center;
padding: 1.75rem 0.625rem;
border-bottom: 1px solid var(--color-border);
}
@media screen and (max-width: 767px) {
.p-results__rehab-item {
grid-template-columns: 4rem 1fr;
gap: 0.75rem;
padding: 1.25rem 0;
}
}
.p-results__rehab-icon {
display: flex;
align-items: center;
justify-content: center;
color: var(--color-black);
}
.p-results__rehab-icon img {
width: auto;
height: 4rem;
}
@media screen and (max-width: 767px) {
.p-results__rehab-icon img {
height: 2.625rem;
}
}
.p-results__rehab-name {
display: inline-flex;
align-items: center;
height: 1.875rem;
padding-inline: 0.875rem;
border: 1px solid var(--color-black);
font-size: max(0.875rem, 10px);
font-weight: 700;
letter-spacing: 0.1em;
color: var(--color-black);
}
@media screen and (max-width: 767px) {
.p-results__rehab-name {
height: auto;
padding: 0.25rem 0.625rem;
font-size: max(0.8125rem, 10px);
}
}
.p-results__rehab-note {
margin-block-start: 0.625rem;
font-size: max(0.8125rem, 10px);
font-weight: 500;
line-height: 1.7;
letter-spacing: 0.1em;
color: var(--color-black);
}
@media screen and (max-width: 767px) {
.p-results__rehab-note {
font-size: max(0.75rem, 10px);
}
}
.p-results__rehab-sub {
margin-block-start: 0.25rem;
font-size: max(0.75rem, 10px);
font-weight: 500;
letter-spacing: 0.1em;
color: var(--color-sub-deep);
}
.p-results__rehab-figures {
display: flex;
gap: 2.5rem;
}
@media screen and (max-width: 767px) {
.p-results__rehab-figures {
grid-column: 1/-1;
justify-content: space-around;
gap: 1.25rem;
}
}
.p-results__rehab-figure {
text-align: center;
}
.p-results__rehab-floor {
font-size: max(0.8125rem, 10px);
font-weight: 500;
letter-spacing: 0.1em;
color: var(--color-black);
}
@media screen and (max-width: 767px) {
.p-results__rehab-floor {
font-size: max(0.75rem, 10px);
}
}
.p-results__rehab-num {
margin-block-start: 0.25rem;
font-family: var(--en-font-family);
font-size: max(2.5rem, 10px);
line-height: 1.1;
letter-spacing: 0.02em;
color: var(--color-black);
}
.p-results__rehab-num small {
margin-inline-start: 0.25rem;
font-family: var(--base-font-family);
font-size: max(1rem, 10px);
font-weight: 500;
}
@media screen and (max-width: 767px) {
.p-results__rehab-num {
font-size: max(1.9375rem, 10px);
}
.p-results__rehab-num small {
font-size: max(0.8125rem, 10px);
}
}
.p-sub-cause__list {
margin-block-start: 2.5rem;
display: flex;
flex-direction: column;
gap: 0.75rem;
}
@media screen and (max-width: 767px) {
.p-sub-cause__list {
margin-block-start: 1.5rem;
gap: 0.625rem;
}
}
.p-sub-cause__item {
display: grid;
grid-template-columns: 16.25rem 1fr auto;
gap: 1.5rem;
align-items: center;
padding: 1.5rem 1.875rem;
border-radius: var(--radius);
background-color: var(--color-white);
box-shadow: 0 0.125rem 0.625rem rgba(0, 0, 0, 0.08);
text-decoration: none;
transition: background-color 0.3s ease-in-out;
}
@media screen and (max-width: 767px) {
.p-sub-cause__item {
grid-template-columns: 1fr;
gap: 0.5rem;
padding: 1rem 1.25rem;
}
}
.p-sub-cause__name {
font-family: var(--second-font-family);
font-size: max(1.125rem, 10px);
font-weight: 500;
line-height: 1.6;
letter-spacing: 0.1em;
color: var(--color-main);
}
@media screen and (max-width: 767px) {
.p-sub-cause__name {
font-size: max(1rem, 10px);
}
}
.p-sub-cause__text {
font-size: max(0.875rem, 10px);
font-weight: 500;
line-height: 1.857;
letter-spacing: 0.1em;
color: var(--color-black);
}
@media screen and (max-width: 767px) {
.p-sub-cause__text {
font-size: max(0.8125rem, 10px);
}
}
.p-sub-cause__more {
display: inline-flex;
align-items: center;
gap: 0.5rem;
white-space: nowrap;
font-size: max(0.875rem, 10px);
font-weight: 700;
letter-spacing: 0.1em;
color: var(--color-main);
}
@media screen and (max-width: 767px) {
.p-sub-cause__more {
font-size: max(0.8125rem, 10px);
}
}
@media (any-hover: hover) {
a.p-sub-cause__item:hover {
opacity: 1;
background-color: var(--color-bg-light);
}
}
.p-sub-cause__note {
margin-block-start: 1.5rem;
font-size: max(0.875rem, 10px);
font-weight: 500;
line-height: 1.857;
letter-spacing: 0.1em;
color: var(--color-black);
}
@media screen and (max-width: 767px) {
.p-sub-cause__note {
margin-block-start: 1rem;
font-size: max(0.8125rem, 10px);
}
}
.p-sub-check__list {
margin-block-start: 2.5rem;
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 1rem 1.875rem;
padding: 3.125rem 3.75rem;
border-radius: var(--radius);
background-color: var(--color-white);
box-shadow: 0 0.125rem 0.625rem rgba(0, 0, 0, 0.08);
}
@media screen and (max-width: 767px) {
.p-sub-check__list {
margin-block-start: 1.5rem;
grid-template-columns: 1fr;
gap: 0.75rem;
padding: 1.5rem 1.25rem;
}
}
.p-sub-check__item {
position: relative;
padding-inline-start: 2.125rem;
font-size: max(0.9375rem, 10px);
font-weight: 500;
line-height: 1.867;
letter-spacing: 0.1em;
color: var(--color-black);
}
.p-sub-check__item::before {
content: "";
position: absolute;
top: 0.25rem;
left: 0;
width: 1.25rem;
height: 1.25rem;
border: 1px solid var(--color-sub);
border-radius: 0.1875rem;
background-color: var(--color-white);
}
@media screen and (max-width: 767px) {
.p-sub-check__item {
padding-inline-start: 1.75rem;
font-size: max(0.875rem, 10px);
line-height: 1.7;
}
.p-sub-check__item::before {
top: 0.125rem;
width: 1.125rem;
height: 1.125rem;
}
}
.p-sub-check__note {
margin-block-start: 1.5rem;
font-size: max(0.9375rem, 10px);
font-weight: 700;
line-height: 2;
letter-spacing: 0.1em;
text-align: center;
color: var(--color-main);
}
@media screen and (max-width: 767px) {
.p-sub-check__note {
margin-block-start: 1rem;
font-size: max(0.875rem, 10px);
text-align: left;
}
}
.p-sub-disease__list {
margin-block-start: 2.5rem;
display: flex;
flex-direction: column;
gap: 1.25rem;
}
@media screen and (max-width: 767px) {
.p-sub-disease__list {
margin-block-start: 1.5rem;
gap: 1rem;
}
}
.p-sub-disease__item {
border: none;
border-radius: var(--radius);
background-color: var(--color-white);
box-shadow: 0 0.125rem 0.625rem rgba(0, 0, 0, 0.08);
overflow: hidden;
}
.p-sub-disease__summary {
display: grid;
grid-template-columns: 16.25rem 1fr;
gap: 1.875rem;
align-items: center;
padding: 1.875rem 4.375rem 1.875rem 1.875rem;
}
@media screen and (max-width: 767px) {
.p-sub-disease__summary {
grid-template-columns: 1fr;
gap: 1rem;
padding: 1.25rem 2.875rem 1.25rem 1.25rem;
}
}
.p-sub-disease__summary:not(:has(.p-sub-disease__image)) {
grid-template-columns: 1fr;
}
.p-sub-disease__image img {
width: 100%;
height: auto;
border-radius: var(--radius);
}
.p-sub-disease__num {
display: inline-block;
margin-inline-end: 0.875rem;
font-family: var(--en-font-family);
font-size: max(0.9375rem, 10px);
letter-spacing: 0.1em;
color: var(--color-sub);
}
.p-sub-disease__name {
display: inline;
font-family: var(--second-font-family);
font-size: max(1.5rem, 10px);
font-weight: 500;
line-height: 1.5;
letter-spacing: 0.1em;
color: var(--color-main);
}
@media screen and (max-width: 767px) {
.p-sub-disease__name {
font-size: max(1.125rem, 10px);
}
}
.p-sub-disease__name-sub {
margin-inline-start: 0.625rem;
font-size: max(0.875rem, 10px);
color: var(--color-sub);
}
@media screen and (max-width: 767px) {
.p-sub-disease__name-sub {
display: block;
margin-inline-start: 0;
font-size: max(0.75rem, 10px);
}
}
.p-sub-disease__summary-text {
display: block;
margin-block-start: 0.625rem;
font-size: max(0.9375rem, 10px);
font-weight: 500;
line-height: 1.867;
letter-spacing: 0.1em;
color: var(--color-black);
}
@media screen and (max-width: 767px) {
.p-sub-disease__summary-text {
font-size: max(0.8125rem, 10px);
line-height: 1.7;
}
}
.p-sub-disease__meta {
display: flex;
flex-wrap: wrap;
gap: 0.625rem 1.5rem;
margin-block-start: 1rem;
}
@media screen and (max-width: 767px) {
.p-sub-disease__meta {
gap: 0.375rem 1rem;
margin-block-start: 0.75rem;
}
}
.p-sub-disease__meta-item {
display: inline-flex;
align-items: center;
gap: 0.625rem;
}
.p-sub-disease__meta-term {
display: inline-flex;
align-items: center;
height: 1.625rem;
padding-inline: 0.625rem;
border-radius: 0.25rem;
background-color: rgba(132, 149, 161, 0.4);
font-size: max(0.75rem, 10px);
font-weight: 700;
letter-spacing: 0.1em;
color: var(--color-black);
}
.p-sub-disease__meta-desc {
font-size: max(0.875rem, 10px);
font-weight: 500;
letter-spacing: 0.1em;
color: var(--color-black);
}
@media screen and (max-width: 767px) {
.p-sub-disease__meta-desc {
font-size: max(0.8125rem, 10px);
}
}
.p-sub-disease__body {
padding: 0 1.875rem 2.25rem;
}
@media screen and (max-width: 767px) {
.p-sub-disease__body {
padding: 0 1.25rem 1.5rem;
}
}
.p-sub-disease__section + .p-sub-disease__section {
margin-block-start: 1.75rem;
}
@media screen and (max-width: 767px) {
.p-sub-disease__section + .p-sub-disease__section {
margin-block-start: 1.25rem;
}
}
.p-sub-disease__section-title {
margin-block-end: 0.625rem;
padding-block-end: 0.5rem;
border-bottom: 1px solid var(--color-border);
font-family: var(--second-font-family);
font-size: max(1.125rem, 10px);
font-weight: 500;
line-height: 1.6;
letter-spacing: 0.1em;
color: var(--color-main);
}
@media screen and (max-width: 767px) {
.p-sub-disease__section-title {
font-size: max(1rem, 10px);
}
}
.p-sub-disease__link {
width: auto;
min-width: 17.5rem;
padding-inline: 1.875rem 1.25rem;
margin-block-start: 1.75rem;
}
@media screen and (max-width: 767px) {
.p-sub-disease__link {
margin-block-start: 1.25rem;
}
}
.p-sub-disease__summary::before,
.p-sub-disease__summary::after {
top: 2.375rem;
right: 1.875rem;
transform: none;
}
@media screen and (max-width: 767px) {
.p-sub-disease__summary::before,
.p-sub-disease__summary::after {
top: 1.75rem;
right: 1rem;
}
}
.p-sub-disease__summary::before {
transform: rotate(90deg);
}
.p-sub-disease__item[open] .p-sub-disease__summary::before {
transform: rotate(0deg);
}
.p-sub-disease__ops-note {
margin-block-start: 0.625rem;
font-size: max(0.8125rem, 10px);
font-weight: 500;
line-height: 1.8;
letter-spacing: 0.1em;
color: var(--color-sub-deep);
}
@media screen and (max-width: 767px) {
.p-sub-disease__ops-note {
font-size: max(0.75rem, 10px);
}
}
.p-sub-exam__block {
margin-block-start: 3.75rem;
}
@media screen and (max-width: 767px) {
.p-sub-exam__block {
margin-block-start: 2.5rem;
}
}
.p-sub-exam__sub-lead {
margin-block-start: 1.25rem;
font-size: max(0.9375rem, 10px);
font-weight: 500;
line-height: 2;
letter-spacing: 0.1em;
text-align: center;
color: var(--color-black);
}
@media screen and (max-width: 767px) {
.p-sub-exam__sub-lead {
margin-block-start: 0.875rem;
font-size: max(0.875rem, 10px);
text-align: left;
}
}
.p-sub-exam__steps {
margin-block-start: 1.875rem;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1.25rem;
}
@media screen and (max-width: 767px) {
.p-sub-exam__steps {
grid-template-columns: 1fr;
gap: 2.875rem;
}
}
.p-sub-exam__step {
position: relative;
padding: 1.75rem 1.5rem 1.875rem;
border-radius: var(--radius);
background-color: var(--color-white);
box-shadow: 0 0.125rem 0.625rem rgba(0, 0, 0, 0.08);
}
.p-sub-exam__step:not(:first-child)::before {
content: "";
position: absolute;
top: 50%;
left: -1.625rem;
width: 2.0625rem;
height: 3.875rem;
background: url(//syokashi-hp.or.jp/seikei/wp-content/themes/syokashi-se/images/sub/arrow-flow.svg) center/contain no-repeat;
transform: translateY(-50%);
}
@media screen and (max-width: 767px) {
.p-sub-exam__step:not(:first-child)::before {
top: -3.375rem;
left: 50%;
transform: translateX(-50%) rotate(90deg);
}
}
.p-sub-exam__step-num {
display: block;
font-family: var(--en-font-family);
font-size: max(1rem, 10px);
line-height: 1.75;
letter-spacing: 0.05em;
text-align: center;
color: var(--color-main);
}
.p-sub-exam__step-title {
margin-block-start: 0.625rem;
font-family: var(--second-font-family);
font-size: max(1.25rem, 10px);
font-weight: 500;
line-height: 1.6;
letter-spacing: 0.1em;
text-align: center;
color: var(--color-main);
}
@media screen and (max-width: 767px) {
.p-sub-exam__step-title {
font-size: max(1.0625rem, 10px);
}
}
.p-sub-exam__step-text {
margin-block-start: 0.875rem;
font-size: max(0.875rem, 10px);
font-weight: 500;
line-height: 1.857;
letter-spacing: 0.1em;
color: var(--color-black);
}
@media screen and (max-width: 767px) {
.p-sub-exam__step-text {
font-size: max(0.8125rem, 10px);
}
}
.p-sub-exam__devices {
margin-block-start: 1.875rem;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1.875rem;
}
@media screen and (max-width: 767px) {
.p-sub-exam__devices {
grid-template-columns: 1fr;
gap: 1.25rem;
}
}
.p-sub-exam__device-image img {
width: 100%;
height: auto;
border-radius: var(--radius);
}
.p-sub-exam__device-title {
margin-block-start: 1rem;
font-family: var(--second-font-family);
font-size: max(1.25rem, 10px);
font-weight: 500;
line-height: 1.6;
letter-spacing: 0.1em;
color: var(--color-main);
}
@media screen and (max-width: 767px) {
.p-sub-exam__device-title {
font-size: max(1.0625rem, 10px);
}
}
.p-sub-exam__device-text {
margin-block-start: 0.625rem;
font-size: max(0.875rem, 10px);
font-weight: 500;
line-height: 1.857;
letter-spacing: 0.1em;
color: var(--color-black);
}
@media screen and (max-width: 767px) {
.p-sub-exam__device-text {
font-size: max(0.8125rem, 10px);
}
}
.p-sub-exam__note {
display: flex;
align-items: baseline;
gap: 0.5rem;
margin-block-start: 1.5rem;
}
@media screen and (max-width: 767px) {
.p-sub-exam__note {
align-items: flex-start;
flex-direction: column;
gap: 0.375rem;
margin-block-start: 1.25rem;
}
}
.p-sub-exam__note-label {
flex-shrink: 0;
display: inline-flex;
align-items: center;
justify-content: center;
width: 2.625rem;
height: 1.5625rem;
border-radius: 0.25rem;
background-color: var(--color-bg);
font-size: max(0.75rem, 10px);
font-weight: 500;
letter-spacing: 0.1em;
color: var(--color-black);
}
.p-sub-exam__note-text {
font-size: max(0.875rem, 10px);
font-weight: 500;
line-height: 1.5;
letter-spacing: 0.1em;
color: var(--color-black);
}
@media screen and (max-width: 767px) {
.p-sub-exam__note-text {
font-size: max(0.8125rem, 10px);
line-height: 1.8;
}
}
.p-sub-faq__list {
margin-block-start: 2.5rem;
display: flex;
flex-direction: column;
gap: 1rem;
}
@media screen and (max-width: 767px) {
.p-sub-faq__list {
margin-block-start: 1.5rem;
gap: 0.75rem;
}
}
.p-sub-faq__item {
border: none;
background-color: var(--color-white);
box-shadow: 0 0.125rem 0.625rem rgba(0, 0, 0, 0.08);
}
.p-sub-faq__summary {
display: flex;
align-items: flex-start;
gap: 1rem;
padding: 1.5rem 4.375rem 1.5rem 1.875rem;
}
@media screen and (max-width: 767px) {
.p-sub-faq__summary {
gap: 0.75rem;
padding: 1rem 2.875rem 1rem 1rem;
}
}
.p-sub-faq__mark {
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
width: 2.125rem;
height: 2.125rem;
border-radius: 50%;
background-color: var(--color-main);
font-family: var(--en-font-family);
font-size: max(1.125rem, 10px);
line-height: 1;
color: var(--color-white);
}
@media screen and (max-width: 767px) {
.p-sub-faq__mark {
width: 1.75rem;
height: 1.75rem;
font-size: max(0.9375rem, 10px);
}
}
.p-sub-faq__mark--answer {
background-color: var(--color-sub);
}
.p-sub-faq__question {
padding-block-start: 0.25rem;
font-family: var(--second-font-family);
font-size: max(1.125rem, 10px);
font-weight: 500;
line-height: 1.667;
letter-spacing: 0.1em;
color: var(--color-main);
}
@media screen and (max-width: 767px) {
.p-sub-faq__question {
padding-block-start: 0.125rem;
font-size: max(0.9375rem, 10px);
line-height: 1.6;
}
}
.p-sub-faq__body {
display: flex;
align-items: flex-start;
gap: 1rem;
padding: 0 1.875rem 1.75rem;
}
@media screen and (max-width: 767px) {
.p-sub-faq__body {
gap: 0.75rem;
padding: 0 1rem 1.25rem;
}
}
.p-sub-faq__answer {
font-size: max(0.9375rem, 10px);
font-weight: 500;
line-height: 2;
letter-spacing: 0.1em;
color: var(--color-black);
}
@media screen and (max-width: 767px) {
.p-sub-faq__answer {
font-size: max(0.875rem, 10px);
line-height: 1.8;
}
}
.p-sub-faq__summary::before,
.p-sub-faq__summary::after {
right: 1.875rem;
}
@media screen and (max-width: 767px) {
.p-sub-faq__summary::before,
.p-sub-faq__summary::after {
right: 1rem;
}
}
.p-sub-lead__inner {
display: grid;
grid-template-columns: 1fr 26.25rem;
gap: 3.125rem;
align-items: start;
}
@media screen and (max-width: 767px) {
.p-sub-lead__inner {
grid-template-columns: 1fr;
gap: 1.5rem;
}
}
.p-sub-lead__inner:not(:has(.p-sub-lead__image)) {
grid-template-columns: 1fr;
}
.p-sub-lead__title {
margin-block-end: 1.5rem;
}
@media screen and (max-width: 767px) {
.p-sub-lead__title {
margin-block-end: 1rem;
}
}
.p-sub-lead__image img {
width: 100%;
height: auto;
border-radius: var(--radius);
}
.p-sub-mv {
width: 100%;
height: 24.875rem;
background-color: var(--color-gray);
}
@media screen and (max-width: 767px) {
.p-sub-mv {
height: 12.5rem;
}
}
.p-sub-mv--image {
position: relative;
background-image: var(--sub-mv-image);
background-size: cover;
background-position: center;
}
.p-sub-mv--image .p-sub-mv__inner {
position: relative;
}
.p-sub-mv--default {
--sub-mv-image: url(//syokashi-hp.or.jp/seikei/wp-content/themes/syokashi-se/images/common/sub-mv.webp);
}
.p-sub-mv__inner.l-inner {
height: inherit;
}
.p-sub-mv__title-wrap {
height: inherit;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
padding-top: var(--header-height);
}
.p-sub-mv__title-en {
font-family: var(--en-font-family);
font-size: max(3.75rem, 10px);
font-weight: 500;
line-height: 1;
letter-spacing: 0.02em;
color: var(--color-main);
}
@media screen and (max-width: 767px) {
.p-sub-mv__title-en {
font-size: max(2.5rem, 10px);
}
}
.p-sub-mv__title-ja {
font-family: var(--second-font-family);
font-size: max(1.25rem, 10px);
font-weight: 500;
line-height: 1.75;
letter-spacing: 0.1em;
color: var(--color-black);
}
@media screen and (max-width: 767px) {
.p-sub-mv__title-ja {
font-size: max(0.9375rem, 10px);
}
}
.l-sub-page {
margin-block-start: 4.375rem;
margin-block-end: 6.0625rem;
}
@media screen and (max-width: 767px) {
.l-sub-page {
margin-block-start: 2.125rem;
margin-block-end: 4rem;
}
}
@media screen and (max-width: 767px) {
.l-sub-page > .l-sub-content:first-child {
margin-block-start: 0;
}
}
.p-sub-page__lead {
margin-block-start: 0.375rem;
font-size: max(0.875rem, 10px);
font-weight: 500;
line-height: 2.143;
letter-spacing: 0.1em;
text-align: center;
color: var(--color-black);
}
@media screen and (max-width: 767px) {
.p-sub-page__lead {
font-size: max(0.8125rem, 10px);
line-height: 1.8;
text-align: left;
}
}
.p-sub-page__text {
font-size: max(0.9375rem, 10px);
font-weight: 500;
line-height: 2;
letter-spacing: 0.1em;
color: var(--color-black);
}
@media screen and (max-width: 767px) {
.p-sub-page__text {
font-size: max(0.875rem, 10px);
line-height: 1.8;
}
}
.p-sub-page__cards {
margin-block-start: 3.25rem;
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 1.875rem;
}
@media screen and (max-width: 767px) {
.p-sub-page__cards {
grid-template-columns: 1fr;
}
}
@media screen and (max-width: 767px) {
.p-sub-page__cards {
margin-block-start: 2rem;
gap: 1rem;
}
}
.p-sub-page__cards--3col {
grid-template-columns: repeat(3, 1fr);
}
@media screen and (max-width: 767px) {
.p-sub-page__cards--3col {
grid-template-columns: 1fr;
}
}
.p-sub-page__card {
position: relative;
display: flex;
flex-direction: column;
gap: 0.625rem;
min-height: 8.75rem;
padding: 1.75rem 3.125rem 1.75rem 1.875rem;
border: 1px solid var(--color-sub);
background-color: var(--color-white);
text-decoration: none;
transition: background-color 0.3s ease-in-out;
}
@media screen and (max-width: 767px) {
.p-sub-page__card {
min-height: 0;
padding: 1.25rem 2.5rem 1.25rem 1.25rem;
}
}
.p-sub-page__card-title {
font-family: var(--second-font-family);
font-size: max(1.25rem, 10px);
font-weight: 500;
line-height: 1.75;
letter-spacing: 0.1em;
color: var(--color-main);
}
@media screen and (max-width: 767px) {
.p-sub-page__card-title {
font-size: max(1.0625rem, 10px);
}
}
.p-sub-page__card-text {
font-size: max(0.875rem, 10px);
font-weight: 500;
line-height: 1.714;
letter-spacing: 0.05em;
color: var(--color-black);
}
.p-sub-page__card-arrow {
position: absolute;
top: 50%;
right: 1.25rem;
display: flex;
color: var(--color-main);
transform: translateY(-50%);
}
.p-sub-page__section + .p-sub-page__section {
margin-block-start: 5rem;
}
@media screen and (max-width: 767px) {
.p-sub-page__section + .p-sub-page__section {
margin-block-start: 3rem;
}
}
.p-sub-page__body {
margin-block-start: 1.875rem;
display: flex;
flex-direction: column;
gap: 1.875rem;
}
.p-sub-page__list {
display: grid;
gap: 0.5625rem;
}
.p-sub-page__list--2col {
grid-template-columns: repeat(2, 1fr);
gap: 0.5625rem 1.25rem;
}
@media screen and (max-width: 767px) {
.p-sub-page__list--2col {
grid-template-columns: 1fr;
}
}
.p-sub-page__list-item {
position: relative;
padding-inline-start: 1rem;
font-size: max(0.9375rem, 10px);
font-weight: 500;
line-height: 2;
letter-spacing: 0.1em;
color: var(--color-black);
}
.p-sub-page__list-item::before {
content: "";
position: absolute;
top: 0.75rem;
left: 0;
width: 0.375rem;
height: 0.375rem;
border-radius: 50%;
background-color: var(--color-main);
}
@media screen and (max-width: 767px) {
.p-sub-page__list-item {
font-size: max(0.875rem, 10px);
}
}
.p-sub-page__checks {
margin-block-start: 1.875rem;
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 0.75rem 1.875rem;
padding: 1.875rem;
background-color: var(--color-bg-light);
}
@media screen and (max-width: 767px) {
.p-sub-page__checks {
grid-template-columns: 1fr;
padding: 1.25rem;
}
}
.p-sub-page__check {
position: relative;
padding-inline-start: 1.875rem;
font-size: max(0.9375rem, 10px);
font-weight: 500;
line-height: 1.8;
letter-spacing: 0.1em;
color: var(--color-black);
}
.p-sub-page__check::before {
content: "";
position: absolute;
top: 0.3125rem;
left: 0;
width: 1.125rem;
height: 1.125rem;
border: 1px solid var(--color-main);
}
.p-sub-page__check::after {
content: "";
position: absolute;
top: 0.5rem;
left: 0.3125rem;
width: 0.5rem;
height: 0.25rem;
border-left: 2px solid var(--color-main);
border-bottom: 2px solid var(--color-main);
transform: rotate(-45deg);
}
@media screen and (max-width: 767px) {
.p-sub-page__check {
font-size: max(0.875rem, 10px);
}
}
.p-sub-page__grid {
margin-block-start: 1.875rem;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1.25rem;
}
@media screen and (max-width: 767px) {
.p-sub-page__grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media screen and (max-width: 767px) {
.p-sub-page__grid {
grid-template-columns: 1fr;
}
}
.p-sub-page__grid--4col {
grid-template-columns: repeat(4, 1fr);
}
@media screen and (max-width: 767px) {
.p-sub-page__grid--4col {
grid-template-columns: repeat(2, 1fr);
}
}
@media screen and (max-width: 767px) {
.p-sub-page__grid--4col {
grid-template-columns: 1fr;
}
}
.p-sub-page__grid-item {
display: flex;
flex-direction: column;
gap: 0.625rem;
padding: 1.75rem 1.5625rem;
border: 1px solid var(--color-border);
background-color: var(--color-white);
}
.p-sub-page__grid-title {
font-family: var(--second-font-family);
font-size: max(1.125rem, 10px);
font-weight: 500;
line-height: 1.75;
letter-spacing: 0.1em;
color: var(--color-main);
}
.p-sub-page__grid-text {
font-size: max(0.875rem, 10px);
font-weight: 500;
line-height: 1.714;
letter-spacing: 0.05em;
color: var(--color-black);
}
.p-sub-page__flow {
margin-block-start: 1.875rem;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1.25rem;
}
@media screen and (max-width: 767px) {
.p-sub-page__flow {
grid-template-columns: 1fr;
}
}
.p-sub-page__flow-item {
position: relative;
display: flex;
flex-direction: column;
gap: 0.625rem;
padding: 1.75rem 1.5625rem;
background-color: var(--color-bg-light);
}
.p-sub-page__flow-item:not(:first-child)::before {
content: "";
position: absolute;
top: 50%;
left: -1.25rem;
width: 0;
height: 0;
border-top: 1.25rem solid transparent;
border-bottom: 1.25rem solid transparent;
border-left: 1rem solid var(--color-black);
transform: translateY(-50%);
}
@media screen and (max-width: 767px) {
.p-sub-page__flow-item:not(:first-child)::before {
content: none;
}
}
.p-sub-page__flow-num {
font-family: var(--en-font-family);
font-size: max(1rem, 10px);
line-height: 1.75;
letter-spacing: 0.05em;
color: var(--color-main);
}
.p-sub-page__qa {
margin-block-start: 1.875rem;
display: grid;
gap: 1.25rem;
}
.p-sub-page__qa-item {
padding: 1.75rem 1.875rem;
border: 1px solid var(--color-border);
background-color: var(--color-white);
}
.p-sub-page__qa-q {
display: flex;
gap: 0.75rem;
font-family: var(--second-font-family);
font-size: max(1.125rem, 10px);
font-weight: 500;
line-height: 1.75;
letter-spacing: 0.1em;
color: var(--color-main);
}
.p-sub-page__qa-q::before {
content: "Q.";
font-family: var(--en-font-family);
flex-shrink: 0;
}
.p-sub-page__qa-a {
margin-block-start: 0.75rem;
display: flex;
gap: 0.75rem;
font-size: max(0.9375rem, 10px);
font-weight: 500;
line-height: 2;
letter-spacing: 0.1em;
color: var(--color-black);
}
.p-sub-page__qa-a::before {
content: "A.";
font-family: var(--en-font-family);
flex-shrink: 0;
color: var(--color-main);
}
@media screen and (max-width: 767px) {
.p-sub-page__qa-a {
font-size: max(0.875rem, 10px);
}
}
.p-sub-page__notice {
margin-block-start: 1.875rem;
padding: 1.75rem 1.5625rem;
border: 1px solid var(--color-alert);
background-color: var(--color-white);
font-size: max(0.875rem, 10px);
font-weight: 500;
line-height: 1.714;
letter-spacing: 0.05em;
color: var(--color-alert);
}
.p-sub-page__price {
margin-block-start: 1.875rem;
padding: 1.875rem;
border: 3px solid var(--color-sub);
background-color: var(--color-white);
}
.p-sub-page__price-title {
font-family: var(--second-font-family);
font-size: max(1.25rem, 10px);
font-weight: 500;
line-height: 1.75;
letter-spacing: 0.1em;
color: var(--color-main);
}
.p-sub-page__button-wrap {
margin-block-start: 2.5rem;
display: flex;
justify-content: center;
}
.p-sub-page__content {
margin-block-start: 1.875rem;
}
.p-sub-page__content p {
font-size: max(0.9375rem, 10px);
font-weight: 500;
line-height: 2;
letter-spacing: 0.1em;
color: var(--color-black);
}
.p-sub-page__content p + p {
margin-block-start: 1.875rem;
}
@media (any-hover: hover) {
.p-sub-page__card:hover {
opacity: 1;
background-color: var(--color-bg-light);
}
}
.p-sub-page__grid-heading {
margin-block-start: 2.5rem;
}
.p-sub-page__text a,
.p-sub-disease__summary-text a,
.p-sub-procedure__summary-text a {
color: var(--color-main);
text-decoration: underline;
text-underline-offset: 0.125rem;
}
.p-sub-list {
display: flex;
flex-direction: column;
gap: 0.5rem;
counter-reset: sub-list;
}
.p-sub-list__item {
position: relative;
padding-inline-start: 1.25rem;
font-size: max(0.9375rem, 10px);
font-weight: 500;
line-height: 2;
letter-spacing: 0.1em;
color: var(--color-black);
}
.p-sub-list__item::before {
content: "";
position: absolute;
top: 0.8125rem;
left: 0;
width: 0.375rem;
height: 0.375rem;
border-radius: 50%;
background-color: var(--color-main);
}
@media screen and (max-width: 767px) {
.p-sub-list__item {
font-size: max(0.875rem, 10px);
line-height: 1.8;
}
.p-sub-list__item::before {
top: 0.625rem;
}
}
.p-sub-list--num {
counter-reset: sub-list;
}
.p-sub-list--num .p-sub-list__item {
padding-inline-start: 2rem;
counter-increment: sub-list;
}
.p-sub-list--num .p-sub-list__item::before {
content: counter(sub-list);
top: 0.25rem;
display: flex;
align-items: center;
justify-content: center;
width: 1.375rem;
height: 1.375rem;
font-family: var(--en-font-family);
font-size: max(0.8125rem, 10px);
line-height: 1;
color: var(--color-white);
}
@media screen and (max-width: 767px) {
.p-sub-list--num .p-sub-list__item::before {
top: 0.125rem;
}
}
.p-sub-tags {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
}
.p-sub-tags__item {
display: inline-flex;
align-items: center;
height: 1.875rem;
padding-inline: 0.875rem;
border-radius: 0.25rem;
background-color: rgba(132, 149, 161, 0.4);
font-size: max(0.8125rem, 10px);
font-weight: 500;
letter-spacing: 0.1em;
color: var(--color-black);
}
@media screen and (max-width: 767px) {
.p-sub-tags__item {
font-size: max(0.75rem, 10px);
}
}
.p-sub-procedure__list {
margin-block-start: 2.5rem;
display: flex;
flex-direction: column;
gap: 1.25rem;
}
@media screen and (max-width: 767px) {
.p-sub-procedure__list {
margin-block-start: 1.5rem;
gap: 1rem;
}
}
.p-sub-procedure__item {
border: none;
border-radius: var(--radius);
background-color: var(--color-white);
box-shadow: 0 0.125rem 0.625rem rgba(0, 0, 0, 0.08);
overflow: hidden;
}
.p-sub-procedure__summary {
display: grid;
grid-template-columns: 16.25rem 1fr;
gap: 1.875rem;
align-items: center;
padding: 1.875rem 4.375rem 1.875rem 1.875rem;
}
@media screen and (max-width: 767px) {
.p-sub-procedure__summary {
grid-template-columns: 1fr;
gap: 1rem;
padding: 1.25rem 2.875rem 1.25rem 1.25rem;
}
}
.p-sub-procedure__summary:not(:has(.p-sub-procedure__image)) {
grid-template-columns: 1fr;
}
.p-sub-procedure__image img {
width: 100%;
height: auto;
border-radius: var(--radius);
}
.p-sub-procedure__num {
display: inline-block;
margin-inline-end: 0.875rem;
font-family: var(--en-font-family);
font-size: max(0.9375rem, 10px);
letter-spacing: 0.1em;
color: var(--color-sub);
}
.p-sub-procedure__name {
display: inline;
unicode-bidi: normal;
font-family: var(--second-font-family);
font-size: max(1.5rem, 10px);
font-weight: 500;
line-height: 1.5;
letter-spacing: 0.1em;
color: var(--color-main);
}
@media screen and (max-width: 767px) {
.p-sub-procedure__name {
font-size: max(1.125rem, 10px);
}
}
.p-sub-procedure__name-sub {
margin-inline-start: 0.625rem;
font-size: max(0.875rem, 10px);
color: var(--color-sub);
}
@media screen and (max-width: 767px) {
.p-sub-procedure__name-sub {
display: block;
margin-inline-start: 0;
font-size: max(0.75rem, 10px);
}
}
.p-sub-procedure__summary-text {
display: block;
margin-block-start: 0.625rem;
font-size: max(0.9375rem, 10px);
font-weight: 500;
line-height: 1.867;
letter-spacing: 0.1em;
color: var(--color-black);
}
@media screen and (max-width: 767px) {
.p-sub-procedure__summary-text {
font-size: max(0.8125rem, 10px);
line-height: 1.7;
}
}
.p-sub-procedure__meta {
display: flex;
flex-wrap: wrap;
gap: 0.625rem 1.5rem;
margin-block-start: 1rem;
}
@media screen and (max-width: 767px) {
.p-sub-procedure__meta {
gap: 0.375rem 1rem;
margin-block-start: 0.75rem;
}
}
.p-sub-procedure__meta-item {
display: inline-flex;
align-items: center;
gap: 0.625rem;
}
.p-sub-procedure__meta-term {
display: inline-flex;
align-items: center;
height: 1.625rem;
padding-inline: 0.625rem;
border-radius: 0.25rem;
background-color: rgba(132, 149, 161, 0.4);
font-size: max(0.75rem, 10px);
font-weight: 700;
letter-spacing: 0.1em;
color: var(--color-black);
}
.p-sub-procedure__meta-desc {
font-size: max(0.875rem, 10px);
font-weight: 500;
letter-spacing: 0.1em;
color: var(--color-black);
}
@media screen and (max-width: 767px) {
.p-sub-procedure__meta-desc {
font-size: max(0.8125rem, 10px);
}
}
.p-sub-procedure__body {
padding: 0 1.875rem 2.25rem;
}
@media screen and (max-width: 767px) {
.p-sub-procedure__body {
padding: 0 1.25rem 1.5rem;
}
}
.p-sub-procedure__section + .p-sub-procedure__section {
margin-block-start: 1.75rem;
}
@media screen and (max-width: 767px) {
.p-sub-procedure__section + .p-sub-procedure__section {
margin-block-start: 1.25rem;
}
}
.p-sub-procedure__section-title {
margin-block-end: 0.625rem;
padding-block-end: 0.5rem;
border-bottom: 1px solid var(--color-border);
font-family: var(--second-font-family);
font-size: max(1.125rem, 10px);
font-weight: 500;
line-height: 1.6;
letter-spacing: 0.1em;
color: var(--color-main);
}
@media screen and (max-width: 767px) {
.p-sub-procedure__section-title {
font-size: max(1rem, 10px);
}
}
.p-sub-procedure__cost-label {
display: inline-flex;
align-items: center;
height: 1.875rem;
margin-block-end: 0.625rem;
padding-inline: 0.875rem;
border-radius: 0.25rem;
background-color: var(--color-main);
font-size: max(0.8125rem, 10px);
font-weight: 700;
letter-spacing: 0.1em;
color: var(--color-white);
}
.p-sub-procedure__summary::before,
.p-sub-procedure__summary::after {
top: 2.375rem;
right: 1.875rem;
transform: none;
}
@media screen and (max-width: 767px) {
.p-sub-procedure__summary::before,
.p-sub-procedure__summary::after {
top: 1.75rem;
right: 1rem;
}
}
.p-sub-procedure__summary::before {
transform: rotate(90deg);
}
.p-sub-procedure__item[open] .p-sub-procedure__summary::before {
transform: rotate(0deg);
}
.p-sub-procedure__note {
margin-block-start: 1.5rem;
font-size: max(0.875rem, 10px);
font-weight: 500;
line-height: 1.857;
letter-spacing: 0.1em;
color: var(--color-black);
}
@media screen and (max-width: 767px) {
.p-sub-procedure__note {
margin-block-start: 1rem;
font-size: max(0.8125rem, 10px);
}
}
.p-sub-section--band {
margin-block: 0;
padding-block: 4.5625rem 5.8125rem;
background-color: var(--color-bg-light);
}
@media screen and (max-width: 767px) {
.p-sub-section--band {
padding-block: 3rem 3.25rem;
}
}
.l-sub-page:has(> section:last-child.p-sub-section--band) {
margin-block-end: 0;
}
main:has(.p-sub-page > section:last-child.p-sub-section--band) + .l-contact {
margin-block-start: 0;
}
.p-top-access {
background-color: var(--color-white);
}
.p-top-access__wrap {
margin-top: 2.75rem;
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 0.625rem;
}
@media screen and (max-width: 767px) {
.p-top-access__wrap {
grid-template-columns: 1fr;
gap: 2rem;
}
}
@media screen and (max-width: 767px) {
.p-top-access__wrap {
margin-top: 0.9375rem;
gap: 0.875rem;
}
}
.p-top-access__hours,
.p-top-access__map {
display: flex;
flex-direction: column;
padding: 2.125rem 1.875rem;
background-color: var(--color-bg-light);
}
@media screen and (max-width: 767px) {
.p-top-access__hours,
.p-top-access__map {
padding: 1.1875rem 0.9375rem;
}
}
.p-top-access__hours {
padding-top: 1.25rem;
}
@media screen and (max-width: 767px) {
.p-top-access__hours {
padding-top: 0;
}
}
.p-top-access__table {
width: 100%;
border-collapse: collapse;
font-family: var(--base-font-family);
font-size: max(1rem, 10px);
font-weight: 400;
}
.p-top-access__table th,
.p-top-access__table td {
font-weight: inherit;
padding-block: 0.875rem;
text-align: center;
border-bottom: 1px solid var(--color-border);
}
.p-top-access__table thead th {
letter-spacing: 0.05em;
}
.p-top-access__table thead th:first-child {
text-align: left;
}
.p-top-access__table tbody th {
text-align: left;
white-space: nowrap;
}
.p-top-access__table tbody td {
color: var(--color-main);
}
@media screen and (max-width: 767px) {
.p-top-access__table {
font-size: max(0.75rem, 10px);
}
.p-top-access__table th,
.p-top-access__table td {
padding-block: 0.75rem;
}
}
.p-top-access__table-note {
margin-top: 0.625rem;
font-size: max(0.75rem, 10px);
font-weight: 400;
}
@media screen and (max-width: 767px) {
.p-top-access__table-note {
margin-top: 0.3125rem;
}
}
.p-top-access__table-mark {
color: var(--color-main);
}
.p-top-access__info {
margin-top: 0.5625rem;
display: grid;
grid-template-columns: 6.3125rem 1fr;
gap: 0.75rem 0;
font-size: max(0.875rem, 10px);
line-height: 1.3571428571;
}
.p-top-access__info dt {
font-weight: 700;
}
.p-top-access__info dd {
margin: 0;
}
@media screen and (max-width: 767px) {
.p-top-access__info {
margin-top: -0.25rem;
grid-template-columns: 1fr;
gap: 0;
font-size: max(0.75rem, 10px);
line-height: 1.417;
}
.p-top-access__info dd {
margin-bottom: 0.625rem;
}
.p-top-access__info dd:last-of-type {
margin-bottom: 0;
}
}
.p-top-access__info dt {
font-size: max(0.875rem, 10px);
}
@media screen and (max-width: 767px) {
.p-top-access__info dt {
font-size: max(0.75rem, 10px);
}
}
.p-top-access__hours .p-top-access__info {
margin-top: 1.875rem;
padding-top: 1.125rem;
border-top: 1px solid var(--color-border);
}
.p-top-access__hours .p-top-access__info dt:nth-of-type(3),
.p-top-access__hours .p-top-access__info dd:nth-of-type(3) {
margin-top: 0.25rem;
padding-top: 1.0625rem;
border-top: 1px solid var(--color-border);
}
@media screen and (max-width: 767px) {
.p-top-access__hours .p-top-access__info {
margin-top: 1.25rem;
grid-template-columns: 3.5625rem 1fr;
}
.p-top-access__hours .p-top-access__info dt:nth-of-type(3),
.p-top-access__hours .p-top-access__info dd:nth-of-type(3) {
padding-top: 0.8125rem;
}
.p-top-access__hours .p-top-access__info dd:nth-of-type(3) {
margin-bottom: 0;
}
.p-top-access__hours .p-top-access__info dt:nth-of-type(1),
.p-top-access__hours .p-top-access__info dt:nth-of-type(2),
.p-top-access__hours .p-top-access__info dd:nth-of-type(1),
.p-top-access__hours .p-top-access__info dd:nth-of-type(2) {
grid-column: 1/-1;
}
}
.p-top-access__map .p-top-access__info {
grid-template-columns: 6rem 1fr;
gap: 0;
}
.p-top-access__map .p-top-access__info dt,
.p-top-access__map .p-top-access__info dd {
padding-block: 0.625rem;
border-bottom: 1px solid var(--color-border);
}
.p-top-access__map .p-top-access__info dt:last-of-type,
.p-top-access__map .p-top-access__info dd:last-of-type {
border-bottom: 0;
}
@media screen and (max-width: 767px) {
.p-top-access__map .p-top-access__info {
grid-template-columns: 1fr;
}
.p-top-access__map .p-top-access__info dt {
padding-block: 0.4375rem 0;
border-bottom: 0;
font-size: max(0.75rem, 10px);
}
.p-top-access__map .p-top-access__info dd {
margin-bottom: 0;
padding-block: 0.125rem 0.5625rem;
}
}
.p-top-access__info-note {
display: block;
margin-top: 0.75rem;
font-size: max(0.875rem, 10px);
}
@media screen and (max-width: 767px) {
.p-top-access__info-note {
margin-top: 0.5625rem;
font-size: max(0.75rem, 10px);
}
}
.p-top-access__tel {
color: var(--color-main);
font-weight: 700;
text-decoration: none;
}
.p-top-access__map-frame {
display: block;
aspect-ratio: 535/270;
overflow: hidden;
}
@media screen and (max-width: 767px) {
.p-top-access__map-frame {
aspect-ratio: 318/270;
}
}
.p-top-access__map-frame img,
.p-top-access__map-frame iframe {
display: block;
width: 100%;
height: 100%;
border: 0;
-o-object-fit: cover;
object-fit: cover;
}
.p-top-access__hours .c-button,
.p-top-access__map .c-button {
margin-top: 0.625rem;
align-self: flex-start;
}
@media screen and (max-width: 767px) {
.p-top-access__hours .c-button,
.p-top-access__map .c-button {
align-self: stretch;
margin-top: 0.4375rem;
width: 100%;
max-width: none;
height: 3.125rem;
}
}
.p-top-access__hours .c-button {
margin-top: 1.4375rem;
}
@media screen and (max-width: 767px) {
.p-top-access__hours .c-button {
margin-top: 1.3125rem;
}
}
.p-top-conditions {
background-color: var(--color-white);
}
.p-top-conditions__lead {
margin-top: 1.875rem;
font-size: max(0.875rem, 10px);
font-weight: 500;
line-height: 2.143;
letter-spacing: 0.1em;
text-align: center;
}
@media screen and (max-width: 767px) {
.p-top-conditions__lead {
margin-top: 0.5625rem;
font-size: max(0.75rem, 10px);
line-height: 1.667;
text-align: center;
}
}
.p-top-conditions__list {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 0.625rem;
margin-top: 2.1875rem;
list-style: none;
}
@media screen and (max-width: 767px) {
.p-top-conditions__list {
grid-template-columns: 1fr;
gap: 0.5625rem;
margin-top: 0.8125rem;
}
}
.p-top-conditions__link {
position: relative;
display: block;
aspect-ratio: 859/300;
overflow: hidden;
}
@media screen and (max-width: 767px) {
.p-top-conditions__link {
aspect-ratio: 350/110;
border-radius: var(--radius);
}
}
.p-top-conditions__link {
color: var(--color-white);
text-decoration: none;
}
.p-top-conditions__image {
position: absolute;
inset: 0;
}
.p-top-conditions__image img {
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
transition: transform 0.3s ease-in-out;
}
.p-top-conditions__image::after {
content: "";
position: absolute;
inset: 0;
background-color: rgb(132, 149, 161);
mix-blend-mode: multiply;
}
@media (any-hover: hover) {
.p-top-conditions__link:hover {
opacity: 1;
}
.p-top-conditions__link:hover .p-top-conditions__image img {
transform: scale(1.05);
}
}
.p-top-conditions__body {
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
justify-content: center;
padding-inline: 3.75rem;
height: 100%;
}
@media screen and (max-width: 767px) {
.p-top-conditions__body {
align-items: center;
padding-inline: 1.25rem;
text-align: center;
}
}
.p-top-conditions__title {
font-family: var(--second-font-family);
font-size: max(1.875rem, 10px);
font-weight: 500;
line-height: 1.4;
letter-spacing: 0.1em;
}
@media screen and (max-width: 767px) {
.p-top-conditions__title {
font-size: max(1.125rem, 10px);
line-height: 1.611;
}
}
.p-top-conditions__text {
margin-top: 1rem;
font-size: max(0.9375rem, 10px);
font-weight: 500;
line-height: 1.733;
letter-spacing: 0.1em;
}
@media screen and (max-width: 767px) {
.p-top-conditions__text {
margin-top: 0.1875rem;
font-size: max(0.75rem, 10px);
line-height: 1.667;
}
}
.p-top-conditions__arrow {
position: absolute;
top: 50%;
right: 4.3125rem;
z-index: 1;
width: 2.75rem;
height: 2.75rem;
border-top: 1px solid var(--color-white);
border-right: 1px solid var(--color-white);
transform: translateY(-50%) rotate(45deg);
}
@media screen and (max-width: 767px) {
.p-top-conditions__arrow {
right: 1.8125rem;
width: 0.875rem;
height: 0.875rem;
}
}
.p-top-doctors {
background-color: var(--color-white);
}
.p-top-doctors__main {
position: relative;
min-height: 26.875rem;
}
@media screen and (max-width: 767px) {
.p-top-doctors__main { margin-inline: calc(50% - 50cqw);
width: 100cqw;
min-height: 16.875rem;
}
}
.p-top-doctors__image {
position: absolute;
inset: 0;
z-index: 0;
}
.p-top-doctors__image picture {
display: block;
width: 100%;
height: 100%;
}
.p-top-doctors__image img {
display: block;
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
-o-object-position: center right;
object-position: center right;
}
.p-top-doctors__body {
position: relative;
z-index: 1;
padding: 4.9375rem 3.4375rem;
max-width: 38.75rem;
}
@media screen and (max-width: 767px) {
.p-top-doctors__body { margin-inline: auto;
padding: 2.25rem 1.25rem 2.625rem;
max-width: 40rem;
}
}
.p-top-doctors__text {
margin-top: 1.875rem;
font-size: max(0.875rem, 10px);
font-weight: 500;
line-height: 2.143;
letter-spacing: 0.1em;
}
@media screen and (max-width: 767px) {
.p-top-doctors__text {
margin-top: 0.9375rem;
line-height: 1.429;
}
}
.p-top-doctors__body .c-button {
margin-top: 1.1875rem;
}
@media screen and (max-width: 767px) {
.p-top-doctors__body .c-button {
margin-top: 1.0625rem;
width: 100%;
max-width: none;
height: 3.125rem;
}
}
.p-top-doctors__cooperation {
display: flex;
align-items: center;
justify-content: space-between;
gap: 2.5rem;
margin-top: 1.875rem;
padding: 2rem 3.4375rem;
border: 3px solid var(--color-border-light);
border-radius: var(--radius);
background-color: var(--color-white);
}
@media screen and (max-width: 767px) {
.p-top-doctors__cooperation {
flex-direction: column;
align-items: flex-start;
}
}
@media screen and (max-width: 767px) {
.p-top-doctors__cooperation {
position: relative;
display: block;
margin-top: 2.3125rem;
padding: 1.125rem 0.625rem 1.6875rem 1.4375rem;
}
}
.p-top-doctors__cooperation-image {
flex-shrink: 0;
width: 12.25rem;
}
.p-top-doctors__cooperation-image img {
display: block;
width: 100%;
height: auto;
}
@media screen and (max-width: 767px) {
.p-top-doctors__cooperation-image {
position: absolute;
top: 1.5rem;
right: 1.625rem;
margin-inline: 0;
width: 3.5rem;
}
}
.p-top-doctors__cooperation-title {
font-family: var(--second-font-family);
font-size: max(1.875rem, 10px);
font-weight: 500;
line-height: 1.4;
letter-spacing: 0.1em;
color: var(--color-main);
}
@media screen and (max-width: 767px) {
.p-top-doctors__cooperation-title {
padding-right: 4.375rem;
font-size: max(1.25rem, 10px);
line-height: 1.45;
}
}
.p-top-doctors__cooperation-text {
margin-top: 1rem;
font-size: max(0.9375rem, 10px);
font-weight: 500;
line-height: 1.733;
letter-spacing: 0.1em;
}
@media screen and (max-width: 767px) {
.p-top-doctors__cooperation-text {
margin-top: 0.625rem;
font-size: max(0.75rem, 10px);
line-height: 1.417;
}
}
.p-top-features {
position: relative;
padding-block: 5.625rem 4.375rem;
background-color: var(--color-bg);
}
@media screen and (max-width: 767px) {
.p-top-features {
padding-block: 2.75rem 3.4375rem;
}
} .p-top-features::before,
.p-top-features::after {
content: "";
position: absolute;
left: 0;
z-index: 0;
width: 100%;
height: 50%;
pointer-events: none;
}
.p-top-features::before {
top: 0;
background-color: var(--color-bg-light);
clip-path: polygon(0 0, 100% 0, 50% 100%);
}
.p-top-features::after {
bottom: 0;
background-color: var(--color-bg-deep);
clip-path: polygon(50% 0, 100% 100%, 0 100%);
}
.p-top-features__inner {
position: relative;
z-index: 1;
}
.p-top-features__lead {
margin-top: 1.25rem;
font-size: max(0.875rem, 10px);
font-weight: 500;
line-height: 2.143;
letter-spacing: 0.1em;
text-align: center;
}
@media screen and (max-width: 767px) {
.p-top-features__lead {
margin-top: 0.5625rem;
font-size: max(0.75rem, 10px);
line-height: 1.667;
text-align: center;
}
}
.p-top-features__list {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 3rem 3rem;
margin-top: 2.8125rem;
list-style: none;
}
@media screen and (max-width: 767px) {
.p-top-features__list {
grid-template-columns: repeat(2, 1fr);
}
}
@media screen and (max-width: 767px) {
.p-top-features__list {
grid-template-columns: 1fr;
gap: 1.75rem;
margin-top: 0.8125rem;
}
}
.p-top-features__image {
position: relative;
aspect-ratio: 544/350;
}
@media screen and (max-width: 767px) {
.p-top-features__image {
aspect-ratio: 350/180;
}
}
.p-top-features__image img {
width: 100%;
height: 100%;
border-radius: var(--radius);
-o-object-fit: cover;
object-fit: cover;
}
.p-top-features__number {
position: absolute;
right: 0;
bottom: -3.3125rem;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 6.625rem;
height: 6.625rem;
border-radius: 50%;
background-color: var(--color-main);
color: var(--color-white);
line-height: 1;
}
@media screen and (max-width: 767px) {
.p-top-features__number {
right: -0.625rem;
bottom: -2rem;
width: 5rem;
height: 5rem;
}
}
.p-top-features__number-en {
font-family: var(--en-font-family);
font-size: max(1rem, 10px);
letter-spacing: 0.05em;
}
@media screen and (max-width: 767px) {
.p-top-features__number-en {
font-size: max(0.75rem, 10px);
}
}
.p-top-features__number-num {
margin-top: 0.25rem;
font-family: var(--en-font-family);
font-size: max(3.125rem, 10px);
letter-spacing: 0.02em;
}
@media screen and (max-width: 767px) {
.p-top-features__number-num {
margin-top: 0.125rem;
font-size: max(2.375rem, 10px);
}
}
.p-top-features__title {
margin-top: 1.3125rem;
}
@media screen and (max-width: 1700px) {
.p-top-features__title {
padding-right: 7.5rem;
}
}
.p-top-features__title {
font-family: var(--second-font-family);
font-size: max(1.5rem, 10px);
font-weight: 500;
line-height: 1.5;
letter-spacing: 0.1em;
color: var(--color-main);
}
@media screen and (max-width: 767px) {
.p-top-features__title {
padding-right: 5.625rem;
margin-top: 0.4375rem;
font-size: max(1rem, 10px);
line-height: 1.44;
}
}
.p-top-features__text {
flex-grow: 1;
margin-top: 1rem;
font-size: max(0.9375rem, 10px);
font-weight: 500;
line-height: 1.733;
letter-spacing: 0.1em;
}
@media screen and (max-width: 767px) {
.p-top-features__text {
margin-top: 0.375rem;
font-size: max(0.8125rem, 10px);
line-height: 1.692;
}
}
.p-top-features__item {
display: flex;
flex-direction: column;
}
.p-top-features__button {
align-self: center;
margin-top: 1.5rem;
}
@media screen and (max-width: 767px) {
.p-top-features__button {
margin-top: 0.875rem;
width: 100%;
max-width: none;
height: 3.125rem;
}
}
.p-top-mv {
position: relative;
height: 57.75rem;
}
@media screen and (max-width: 767px) {
.p-top-mv {
height: auto;
padding-top: var(--header-height);
}
}
@media screen and (max-width: 767px) {
.p-top-mv {
height: 37.5625rem;
padding-top: 0;
}
}
.p-top-mv__image {
position: absolute;
inset: 0;
z-index: -1;
}
.p-top-mv__image img {
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
-o-object-position: center;
object-position: center;
}
@media screen and (max-width: 767px) {
.p-top-mv__image {
position: relative;
height: 26.25rem;
}
}
@media screen and (max-width: 767px) {
.p-top-mv__image {
position: absolute;
inset: 0;
height: 100%;
}
}
.p-top-mv__inner {
display: flex;
flex-direction: column;
justify-content: center;
margin-inline: auto;
padding-top: 4.9375rem;
width: 100%;
max-width: 108rem;
height: 100%;
color: var(--color-white);
}
@media screen and (max-width: 1820px) {
.p-top-mv__inner {
max-width: none;
padding-inline: 1.5rem;
}
}
@media screen and (max-width: 767px) {
.p-top-mv__inner {
position: absolute;
inset: 0;
padding-top: var(--header-height);
}
}
@media screen and (max-width: 767px) {
.p-top-mv__inner {
justify-content: flex-end;
padding-top: 0;
padding-bottom: 1.25rem;
padding-inline: 1.25rem;
}
}
.p-top-mv__catch {
font-family: var(--second-font-family);
font-size: max(5.625rem, 10px);
font-weight: 500;
line-height: 1.222;
letter-spacing: 0.1em;
}
@media screen and (max-width: 767px) {
.p-top-mv__catch {
font-size: max(3rem, 10px);
}
}
@media screen and (max-width: 767px) {
.p-top-mv__catch {
font-size: max(2.9375rem, 10px);
line-height: 1.149;
}
}
.p-top-mv__catch-sm {
font-size: 0.68em;
}
.p-top-mv__sub {
margin-top: 1.125rem;
font-family: var(--second-font-family);
font-size: max(2.25rem, 10px);
font-weight: 500;
line-height: 1.6;
}
@media screen and (max-width: 767px) {
.p-top-mv__sub {
margin-top: 1rem;
font-size: max(1.25rem, 10px);
}
}
@media screen and (max-width: 767px) {
.p-top-mv__sub {
margin-top: 0.4375rem;
font-size: max(1.0625rem, 10px);
line-height: 1.706;
letter-spacing: 0;
}
}
.p-top-mv__text {
margin-top: 1.875rem;
font-size: max(1rem, 10px);
font-weight: 500;
line-height: 1.875;
letter-spacing: 0.1em;
}
@media screen and (max-width: 767px) {
.p-top-mv__text {
margin-top: 0.875rem;
font-size: max(0.6875rem, 10px);
line-height: 1.766;
letter-spacing: 0.14em;
}
}
.p-top-outpatient {
padding-block: 2.5rem;
background-color: var(--color-bg-light);
}
@media screen and (max-width: 767px) {
.p-top-outpatient {
padding-block: 1.5rem;
}
}
.p-top-outpatient__list {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 1.5rem;
}
@media screen and (max-width: 767px) {
.p-top-outpatient__list {
grid-template-columns: 1fr;
gap: 0.75rem;
}
}
.p-top-outpatient__link {
display: flex;
align-items: center;
gap: 1.25rem;
padding: 1.5rem 1.75rem;
height: 100%;
border: 0.0625rem solid var(--color-border);
border-radius: 0.25rem;
background-color: var(--color-white);
color: var(--color-main);
text-decoration: none;
transition: border-color 0.3s ease-in-out, background-color 0.3s ease-in-out, color 0.3s ease-in-out;
}
@media screen and (max-width: 767px) {
.p-top-outpatient__link {
gap: 0.875rem;
padding: 1rem 1rem;
}
}
.p-top-outpatient__icon {
display: grid;
flex-shrink: 0;
place-items: center;
width: 4rem;
height: 4rem;
border-radius: 50%;
background-color: var(--color-bg);
color: var(--color-main);
}
.p-top-outpatient__icon svg {
width: 1.875rem;
height: 1.875rem;
}
@media screen and (max-width: 767px) {
.p-top-outpatient__icon {
width: 3rem;
height: 3rem;
}
.p-top-outpatient__icon svg {
width: 1.375rem;
height: 1.375rem;
}
}
.p-top-outpatient__body {
display: flex;
flex: 1;
flex-direction: column;
gap: 0.375rem;
min-width: 0;
}
@media screen and (max-width: 767px) {
.p-top-outpatient__body {
gap: 0.125rem;
}
}
.p-top-outpatient__title {
font-family: var(--second-font-family);
font-size: max(1.375rem, 10px);
font-weight: 600;
line-height: 1.4;
letter-spacing: 0.05em;
}
@media screen and (max-width: 767px) {
.p-top-outpatient__title {
font-size: max(1.0625rem, 10px);
}
}
.p-top-outpatient__text {
color: var(--color-sub-deep);
font-size: max(0.875rem, 10px);
line-height: 1.6;
transition: color 0.3s ease-in-out;
}
@media screen and (max-width: 767px) {
.p-top-outpatient__text {
font-size: max(0.75rem, 10px);
}
}
.p-top-outpatient__arrow {
flex-shrink: 0;
}
.p-top-outpatient__arrow svg {
width: 1.875rem;
height: 1.875rem;
}
.p-top-outpatient__arrow svg circle {
fill: var(--color-main);
transition: fill 0.3s ease-in-out;
}
.p-top-outpatient__arrow svg path {
transition: stroke 0.3s ease-in-out;
}
@media screen and (max-width: 767px) {
.p-top-outpatient__arrow svg {
width: 1.5rem;
height: 1.5rem;
}
}
@media (any-hover: hover) {
.p-top-outpatient__link:hover {
border-color: var(--color-main);
background-color: var(--color-main);
color: var(--color-white);
opacity: 1;
}
.p-top-outpatient__link:hover .p-top-outpatient__text {
color: var(--color-white);
}
.p-top-outpatient__link:hover .p-top-outpatient__arrow svg circle {
fill: var(--color-white);
}
.p-top-outpatient__link:hover .p-top-outpatient__arrow svg path {
stroke: var(--color-main);
}
}
.p-top-procedure {
position: relative;
z-index: 0;
padding-block: 4.0625rem 5.25rem;
background-color: var(--color-sub);
color: var(--color-white);
}
.p-top-procedure::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background: url(//syokashi-hp.or.jp/seikei/wp-content/themes/syokashi-se/images/top/procedure-bg.webp) center/cover no-repeat;
mix-blend-mode: multiply;
}
@media screen and (max-width: 767px) {
.p-top-procedure {
padding-block: 2.875rem 1.5625rem;
}
}
.p-top-procedure__lead {
margin-top: 1.875rem;
font-size: max(0.875rem, 10px);
font-weight: 500;
line-height: 2.143;
letter-spacing: 0.1em;
text-align: center;
}
@media screen and (max-width: 767px) {
.p-top-procedure__lead {
margin-top: 0.3125rem;
font-size: max(0.75rem, 10px);
line-height: 1.667;
text-align: center;
}
}
.p-top-procedure__list {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 2.5rem;
margin-top: 0.875rem;
padding-block: 2.25rem 2.5rem;
padding-inline: 1.25rem; border-top: 1px solid var(--color-white);
border-bottom: 1px solid var(--color-white);
list-style: none;
}
@media screen and (max-width: 767px) {
.p-top-procedure__list {
grid-template-columns: 1fr;
gap: 2rem;
}
}
@media screen and (max-width: 767px) {
.p-top-procedure__list {
gap: 1.5625rem;
margin-top: 1.125rem;
padding-block: 0;
padding-inline: 0;
border-top: none;
border-bottom: none;
}
}
.p-top-procedure__item {
position: relative;
}
@media screen and (max-width: 767px) {
.p-top-procedure__item {
padding-top: 0.9375rem;
}
}
.p-top-procedure__item {
min-width: 0;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}
@media screen and (max-width: 767px) {
.p-top-procedure__item + .p-top-procedure__item {
border-top: 1px solid var(--color-white);
}
}
.p-top-procedure__item + .p-top-procedure__item::before {
content: "";
position: absolute;
top: 0;
left: -1.25rem;
width: 1px;
height: 31.375rem;
background-color: var(--color-white);
}
@media screen and (max-width: 767px) {
.p-top-procedure__item + .p-top-procedure__item::before {
content: none;
}
}
.p-top-procedure__title {
font-family: var(--second-font-family);
font-size: max(1.875rem, 10px);
font-weight: 500;
line-height: 1.4;
letter-spacing: 0.1em;
}
@media screen and (max-width: 767px) {
.p-top-procedure__title {
font-size: max(1.25rem, 10px);
line-height: 1.45;
}
}
.p-top-procedure__en {
margin-top: 0.375rem;
font-family: var(--en-font-family);
font-size: max(0.875rem, 10px);
letter-spacing: 0.05em;
}
@media screen and (max-width: 767px) {
.p-top-procedure__en {
margin-top: 0.1875rem;
font-size: max(0.75rem, 10px);
}
}
.p-top-procedure__image {
margin-top: 1rem;
margin-inline: auto;
width: 25.9375rem;
max-width: 100%;
aspect-ratio: 415/210;
background-color: rgba(255, 255, 255, 0.25);
}
@media screen and (max-width: 767px) {
.p-top-procedure__image {
margin-top: 0.4375rem;
width: 100%;
aspect-ratio: 350/120;
}
}
.p-top-procedure__image img {
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
}
.p-top-procedure__tags {
flex-grow: 1;
margin-top: 0.625rem;
width: 100%;
list-style: none;
text-align: left;
}
@media screen and (max-width: 767px) {
.p-top-procedure__tags {
display: grid;
grid-template-rows: repeat(2, auto);
grid-auto-flow: column;
align-content: start;
justify-content: start;
-moz-column-gap: 0.875rem;
column-gap: 0.875rem;
margin-top: 0.5rem;
}
}
@media screen and (max-width: 767px) {
.p-top-procedure__tags--1row {
grid-template-rows: auto;
}
}
.p-top-procedure__tags--2col {
display: grid;
align-content: start;
grid-template-rows: repeat(2, auto);
grid-auto-flow: column;
justify-content: start;
-moz-column-gap: 1.5rem;
column-gap: 1.5rem;
}
@media screen and (max-width: 767px) {
.p-top-procedure__tags--2col {
-moz-column-gap: 0.875rem;
column-gap: 0.875rem;
}
}
.p-top-procedure__tag {
position: relative;
padding-left: 1.4375rem;
font-size: max(1rem, 10px);
font-weight: 500;
line-height: 1.875;
letter-spacing: 0.05em;
}
@media screen and (max-width: 767px) {
.p-top-procedure__tag {
padding-left: 0.875rem;
font-size: max(0.75rem, 10px);
line-height: 1.667;
}
}
.p-top-procedure__tag::before {
content: "";
position: absolute;
top: 0.75rem;
left: 0.3125rem;
width: 0.5rem;
height: 0.5rem;
border-radius: 50%;
background-color: var(--color-white); }
@media screen and (max-width: 767px) {
.p-top-procedure__tag::before {
top: 0.375rem;
left: 0;
}
}
.p-top-procedure__item .c-button {
margin-top: auto;
margin-block-start: 1.75rem;
}
@media screen and (max-width: 767px) {
.p-top-procedure__item .c-button {
margin-block-start: 0.5625rem;
width: 100%;
max-width: none;
height: 3.125rem;
}
}
@media screen and (max-width: 767px) {
.p-top-procedure__banner-body .c-button {
margin-top: 0.8125rem;
width: 100%;
max-width: none;
height: 3.125rem;
}
}
.p-top-procedure__banner {
position: relative;
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 44.8125rem);
align-items: center;
margin-top: 2.5rem;
min-height: 15.625rem; border-radius: 0.375rem;
background-color: var(--color-white);
color: var(--color-black);
}
@media screen and (max-width: 767px) {
.p-top-procedure__banner {
grid-template-columns: minmax(0, 1fr);
}
}
@media screen and (max-width: 767px) {
.p-top-procedure__banner {
margin-top: 1.3125rem;
min-height: 0;
}
}
.p-top-procedure__banner + .p-top-procedure__banner {
margin-top: 2.5rem;
}
@media screen and (max-width: 767px) {
.p-top-procedure__banner + .p-top-procedure__banner {
margin-top: 0.8125rem;
}
}
.p-top-procedure__banner-body {
padding: 2.5rem 3.4375rem 2.1875rem;
}
@media screen and (max-width: 767px) {
.p-top-procedure__banner-body {
padding: 0.8125rem 1.25rem 1.25rem;
}
}
.p-top-procedure__banner-title {
font-family: var(--second-font-family);
font-size: max(1.875rem, 10px);
font-weight: 500;
line-height: 1.4;
letter-spacing: 0.1em;
color: var(--color-main);
}
@media screen and (max-width: 767px) {
.p-top-procedure__banner-title {
font-size: max(1.25rem, 10px);
line-height: 1.45;
}
}
.p-top-procedure__banner-text {
margin-top: 0.25rem;
font-size: max(0.9375rem, 10px);
font-weight: 500;
line-height: 1.733;
letter-spacing: 0.1em;
}
@media screen and (max-width: 767px) {
.p-top-procedure__banner-text {
margin-top: 0.125rem;
font-size: max(0.75rem, 10px);
line-height: 1.417;
}
}
.p-top-procedure__banner-body .c-button {
margin-top: 1.125rem;
box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.15);
}
.p-top-procedure__banner-image {
position: relative;
align-self: stretch;
min-width: 0;
width: 100%;
min-height: 15.625rem; border-radius: 0 0.375rem 0.375rem 0;
background-color: var(--color-bg);
overflow: hidden;
}
.p-top-procedure__banner-image img {
position: absolute;
inset: 0;
display: block;
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
}
@media screen and (max-width: 767px) {
.p-top-procedure__banner-image {
min-height: 12.5rem;
}
}
@media screen and (max-width: 767px) {
.p-top-procedure__banner-image {
display: none;
}
}
.p-top-procedure__banner--results {
grid-template-columns: minmax(0, 1fr);
}
.p-top-procedure__banner--results .p-top-procedure__banner-title,
.p-top-procedure__banner--results .p-top-procedure__banner-text {
position: relative;
z-index: 2;
max-width: 40rem;
}
.p-top-procedure__banner-image--graph {
border-radius: 0;
position: absolute;
top: -1.25rem;
right: 0;
z-index: 1; width: 47%;
min-height: 0;
background-color: transparent;
overflow: visible;
}
.p-top-procedure__banner-image--graph img {
position: static;
display: block;
width: 100%;
height: auto;
-o-object-fit: contain;
object-fit: contain;
}
@media screen and (max-width: 767px) {
.p-top-procedure__banner-image--graph {
position: static;
width: 100%;
min-height: 0;
}
}
@media screen and (max-width: 767px) {
.p-top-procedure__banner-image--graph {
display: none;
}
}
.p-top-symptoms {
background-color: var(--color-white);
}
.p-top-symptoms__lead {
margin-top: 1.875rem;
font-size: max(0.875rem, 10px);
font-weight: 500;
line-height: 2.143;
letter-spacing: 0.1em;
text-align: center;
}
@media screen and (max-width: 767px) {
.p-top-symptoms__lead {
margin-top: 0.4375rem;
font-size: max(0.75rem, 10px);
line-height: 1.667;
text-align: center;
}
}
.p-top-symptoms__list {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 0.9375rem;
margin-top: 3.3125rem;
list-style: none;
}
@media screen and (max-width: 767px) {
.p-top-symptoms__list {
grid-template-columns: repeat(2, 1fr);
}
}
@media screen and (max-width: 767px) {
.p-top-symptoms__list {
grid-template-columns: repeat(2, 1fr);
gap: 0.625rem 0.5625rem;
margin-top: 0.6875rem;
}
}
.p-top-symptoms__link {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
padding: 2rem 0.875rem 2.625rem;
height: 100%;
background-color: var(--color-white);
box-shadow: 0 0.125rem 0.625rem rgba(0, 0, 0, 0.08);
color: inherit;
text-align: center;
text-decoration: none;
transition: box-shadow 0.3s ease-in-out;
}
@media screen and (max-width: 767px) {
.p-top-symptoms__link {
padding: 1.8125rem 0.3125rem 1rem;
min-height: 9.875rem;
}
}
@media (any-hover: hover) {
.p-top-symptoms__link:hover {
opacity: 1;
box-shadow: 0 0.5rem 1.25rem rgba(0, 0, 0, 0.12);
}
.p-top-symptoms__link:hover .p-top-symptoms__icon {
transform: scale(1.1);
}
}
.p-top-symptoms__icon {
transition: transform 0.3s ease-in-out;
display: flex;
align-items: center;
justify-content: center;
width: 3.75rem;
height: 3.75rem;
}
@media screen and (max-width: 767px) {
.p-top-symptoms__icon {
width: 2rem;
height: 2rem;
}
}
.p-top-symptoms__icon img {
display: block;
width: auto;
height: auto;
max-width: 100%;
max-height: 100%;
}
.p-top-symptoms__title {
margin-top: 1.25rem;
font-family: var(--second-font-family);
font-size: max(1.125rem, 10px);
font-weight: 500;
line-height: 1.5;
letter-spacing: 0.1em;
color: var(--color-main);
}
@media screen and (max-width: 767px) {
.p-top-symptoms__title {
margin-top: 1.125rem;
font-size: max(0.9375rem, 10px);
line-height: 1.75;
letter-spacing: 0;
}
}
.p-top-symptoms__text {
margin-top: 0.625rem;
font-size: max(0.75rem, 10px);
font-weight: 500;
line-height: 1.8;
letter-spacing: 0.1em;
}
@media screen and (max-width: 767px) {
.p-top-symptoms__text {
margin-top: 0;
line-height: 1.583;
}
}
.p-top-symptoms__arrow {
position: absolute;
top: 42%;
right: 1.1875rem;
display: flex;
align-items: center;
justify-content: center;
width: 1.375rem;
height: 1.375rem;
color: var(--color-main);
transform: translateY(-50%);
}
@media screen and (max-width: 767px) {
.p-top-symptoms__arrow {
display: none;
}
}
.u-no-image {
background-color: var(--color-gray);
padding: 2% 20%;
-o-object-fit: contain;
object-fit: contain;
}
.u-pc {
display: block;
}
@media screen and (max-width: 767px) {
.u-pc {
display: none;
}
}
.u-sp {
display: none;
}
@media screen and (max-width: 767px) {
.u-sp {
display: block;
}
}
.u-visually-hidden {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}