@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: "Outfit", sans-serif;
--color-black: #2e2e2e;
--color-white: #fff;
--color-main: #755b4c;
--color-accent: #dc590e;
--color-beige: #f7f3eb;
--color-beige-dark: #f2ecdf;
--color-beige-band: #f1eadc;
--sub-band: transparent;
--color-beige-deep: #decead;
--color-beige-line: #ebe1cc;
--color-gray: #8495a1;
--color-border: #f1eadc;
--color-important: #dc0000;
--color-line: #00b900;
--color-instagram: #d62f83;
--color-badge: #f3f4f6;
--shadow-card: 0 0.625rem 1.25rem rgb(0 0 0 / 0.1);
--transition-hover: opacity 0.3s ease-in-out, color 0.3s ease-in-out, background-color 0.3s ease-in-out, border-color 0.3s ease-in-out, box-shadow 0.3s ease-in-out, scale 0.3s ease-in-out, translate 0.3s ease-in-out, text-decoration-color 0.3s ease-in-out;
--shadow-card-hover: 0 0.875rem 1.875rem rgb(0 0 0 / 0.16);
--color-gradation: 46 46 46;
--border-line:
linear-gradient(
to right,
rgb(var(--color-gradation) / 1) 0,
rgb(var(--color-gradation) / 1) 20%,
rgb(var(--color-gradation) / 0.2) 20%,
rgb(var(--color-gradation) / 0.2) 100%
)
bottom / 100% 2px no-repeat;
--header-height: 9.375rem;
}
@media screen and (max-width: 1024px) {
:root {
--header-height: 4.375rem;
}
}
@media screen and (max-width: 767px) {
:root {
--header-height: 3.75rem;
}
}
html {
font-size: 16px;
}
@media screen and (max-width: 1440px) {
html {
font-size: 16px;
}
}
@media screen and (max-width: 1024px) {
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;
}
body {
container-type: inline-size;
display: flex;
flex-direction: column;
min-height: 100vh;
text-rendering: optimizeSpeed;
background-color: var(--color-beige);
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: var(--transition-hover);
}
@media (hover: none) {
a:active {
opacity: 0.7;
}
}
@media  {
img {
image-rendering: -webkit-optimize-contrast;
}
}
button {
color: inherit;
}
address,
em {
font-style: normal;
}
.l-an {
margin-top: 4rem;
}
@media screen and (max-width: 767px) {
.l-an {
margin-top: 2.5rem;
}
}
.l-an--lead {
margin-top: 5.25rem;
}
@media screen and (max-width: 767px) {
.l-an--lead {
margin-top: 2.5rem;
}
}
.l-an--group {
margin-top: 4.3125rem;
}
@media screen and (max-width: 767px) {
.l-an--group {
margin-top: 2rem;
}
}
.l-an--philosophy {
margin-top: 6.0625rem;
}
@media screen and (max-width: 767px) {
.l-an--philosophy {
margin-top: 2.5rem;
}
}
.l-an--policy {
margin-top: 4.8125rem;
}
@media screen and (max-width: 767px) {
.l-an--policy {
margin-top: 2.5rem;
}
}
.l-an--rights {
margin-top: 6.8125rem;
}
@media screen and (max-width: 767px) {
.l-an--rights {
margin-top: 2rem;
}
}
.l-an--history {
margin-top: 8.125rem;
}
@media screen and (max-width: 767px) {
.l-an--history {
margin-top: 3.5rem;
}
}
.l-an--related {
margin-block: 4.375rem;
}
@media screen and (max-width: 767px) {
.l-an--related {
margin-block: 2.5rem;
}
}
.page-template-page-normal-template {
--sub-band: var(--color-beige-band);
}
.l-block {
padding-bottom: 7.5rem;
}
@media screen and (max-width: 767px) {
.l-block {
padding-bottom: 4.375rem;
}
}
.l-block__section {
margin-top: 6.25rem;
}
@media screen and (max-width: 767px) {
.l-block__section {
margin-top: 3.5rem;
}
}
.l-block__section.l-sub-band {
padding-block: 5rem;
}
@media screen and (max-width: 767px) {
.l-block__section.l-sub-band {
padding-block: 3rem;
}
}
.l-block__section.l-sub-band + .l-block__section.l-sub-band {
margin-top: 0;
}
.l-block:has(> .l-sub-band:last-child) {
padding-bottom: 0;
}
.l-block:has(> .l-sub-band:last-child) + .l-saiyou--contact {
margin-top: 0;
}
.l-breadcrumb {
margin-top: 0;
padding-top: 0.625rem;
background-color: var(--sub-band);
}
@media screen and (max-width: 767px) {
.l-breadcrumb {
padding-top: 0.75rem;
}
}
.page-chiiki {
--sub-band: var(--color-beige-band);
}
.l-chiiki {
margin-top: 6.25rem;
}
@media screen and (max-width: 767px) {
.l-chiiki {
margin-top: 3.5rem;
}
}
.l-chiiki--lead {
margin-top: 0;
padding-block: 4.5rem;
}
@media screen and (max-width: 767px) {
.l-chiiki--lead {
padding-block: 2.5rem;
}
}
.l-chiiki--about {
padding-block: 0;
}
.l-chiiki--contact {
padding-block: 6.25rem;
}
@media screen and (max-width: 767px) {
.l-chiiki--contact {
padding-block: 3.5rem;
}
}
.l-construction {
margin-top: 4rem;
}
@media screen and (max-width: 767px) {
.l-construction {
margin-top: 2.5rem;
}
}
.l-construction--hero {
margin-top: 1.25rem;
}
@media screen and (max-width: 767px) {
.l-construction--hero {
margin-top: 1rem;
}
}
.l-construction--about {
margin-top: 6.25rem;
}
@media screen and (max-width: 767px) {
.l-construction--about {
margin-top: 2.5rem;
}
}
.l-construction--mvv {
margin-top: 6.25rem;
}
@media screen and (max-width: 767px) {
.l-construction--mvv {
margin-top: 2.5rem;
}
}
.l-construction--function {
margin-top: 6.25rem;
}
@media screen and (max-width: 767px) {
.l-construction--function {
margin-top: 3rem;
}
}
.l-construction--feature {
margin-top: 6.25rem;
}
@media screen and (max-width: 767px) {
.l-construction--feature {
margin-top: 3rem;
}
}
.l-construction--event {
margin-top: 6.25rem;
}
@media screen and (max-width: 767px) {
.l-construction--event {
margin-top: 3rem;
}
}
.l-construction--evaluation {
margin-top: 6.25rem;
}
@media screen and (max-width: 767px) {
.l-construction--evaluation {
margin-top: 3rem;
}
}
.l-construction--type {
margin-top: 6.25rem;
}
@media screen and (max-width: 767px) {
.l-construction--type {
margin-top: 3rem;
}
}
.l-construction--content {
margin-top: 6.25rem;
}
@media screen and (max-width: 767px) {
.l-construction--content {
margin-top: 3rem;
}
}
.l-construction--schedule {
margin-top: 6.25rem;
}
@media screen and (max-width: 767px) {
.l-construction--schedule {
margin-top: 3rem;
}
}
.l-construction--flow {
margin-top: 6.25rem;
}
@media screen and (max-width: 767px) {
.l-construction--flow {
margin-top: 3rem;
}
}
.l-construction--disease {
margin-top: 6.25rem;
}
@media screen and (max-width: 767px) {
.l-construction--disease {
margin-top: 3rem;
}
}
.l-construction--performance {
margin-top: 6.25rem;
}
@media screen and (max-width: 767px) {
.l-construction--performance {
margin-top: 3rem;
}
}
.l-construction--faq {
margin-top: 6.25rem;
}
@media screen and (max-width: 767px) {
.l-construction--faq {
margin-top: 3rem;
}
}
.l-construction--transfer {
margin-block: 6.25rem 7.5rem;
}
@media screen and (max-width: 767px) {
.l-construction--transfer {
margin-block: 3rem 3.75rem;
}
}
.page-dep {
--sub-band: var(--color-beige-band);
}
.l-dep-list {
margin-top: 4rem;
}
@media screen and (max-width: 767px) {
.l-dep-list {
margin-top: 2.5rem;
}
}
.l-dep-list--lead {
margin-top: 0;
padding-top: 2.375rem;
}
@media screen and (max-width: 767px) {
.l-dep-list--lead {
margin-top: 0;
padding-top: 2rem;
}
}
.l-dep-list.l-sub-band {
padding-block: 5rem;
}
@media screen and (max-width: 767px) {
.l-dep-list.l-sub-band {
padding-block: 3rem;
}
}
.l-dep-list--special {
margin-top: 5rem;
}
@media screen and (max-width: 767px) {
.l-dep-list--special {
margin-top: 2rem;
}
}
.l-dep-list--dep {
margin-top: 6.25rem;
}
@media screen and (max-width: 767px) {
.l-dep-list--dep {
margin-top: 3rem;
}
}
.l-dep-list--symptom {
margin-top: 6.25rem;
}
@media screen and (max-width: 767px) {
.l-dep-list--symptom {
margin-top: 3rem;
}
}
.l-dep-list--unit {
margin-top: 6.25rem;
}
@media screen and (max-width: 767px) {
.l-dep-list--unit {
margin-top: 3rem;
}
}
.l-dep-list--gairai {
margin-top: 6.25rem;
}
@media screen and (max-width: 767px) {
.l-dep-list--gairai {
margin-top: 3rem;
}
}
.l-dep-list--next {
margin-block: 6.25rem;
}
@media screen and (max-width: 767px) {
.l-dep-list--next {
margin-block: 3rem;
}
}
.l-dep {
padding-bottom: 7.5rem;
}
@media screen and (max-width: 767px) {
.l-dep {
padding-bottom: 4.375rem;
}
}
.l-dep__section.l-sub-band + .p-dep-reserve,
.p-dep-reserve + .l-dep__section.l-sub-band,
.l-dep__section.l-sub-band + .l-dep__section.l-sub-band {
margin-top: 0;
}
.l-dep:has(> .l-sub-band:last-child),
.l-dep:has(> .p-dep-reserve:last-child) {
padding-bottom: 0;
}
.l-dep__head {
margin-top: 0;
padding-top: 5rem;
padding-bottom: 3.5rem;
background-color: var(--sub-band);
}
@media screen and (max-width: 767px) {
.l-dep__head {
padding-top: 2.5rem;
padding-bottom: 1.75rem;
}
}
.l-dep__section {
margin-top: 6.25rem;
padding-block: 0;
}
@media screen and (max-width: 767px) {
.l-dep__section {
margin-top: 3.5rem;
}
}
.l-dep__section.l-sub-band {
padding-block: 5rem;
}
@media screen and (max-width: 767px) {
.l-dep__section.l-sub-band {
padding-block: 3rem;
}
}
.page-access {
--sub-band: var(--color-beige-band);
}
.l-doc {
padding-bottom: 7.5rem;
}
@media screen and (max-width: 767px) {
.l-doc {
padding-bottom: 4.375rem;
}
}
.l-doc__section {
margin-top: 5rem;
}
@media screen and (max-width: 767px) {
.l-doc__section {
margin-top: 3rem;
}
}
.l-doc__section.l-sub-band {
margin-top: 5rem;
padding-block: 5rem;
}
@media screen and (max-width: 767px) {
.l-doc__section.l-sub-band {
margin-top: 3rem;
padding-block: 3rem;
}
}
.l-doc__section.l-sub-band + .l-doc__section {
margin-top: 5rem;
}
@media screen and (max-width: 767px) {
.l-doc__section.l-sub-band + .l-doc__section {
margin-top: 3rem;
}
}
.l-doc:has(> .l-sub-band:last-child) {
padding-bottom: 0;
}
.page-doctor {
--sub-band: var(--color-beige-band);
}
.l-doctor {
padding-bottom: 7.5rem;
}
@media screen and (max-width: 767px) {
.l-doctor {
padding-bottom: 4.375rem;
}
}
.l-doctor__section {
margin-top: 6.25rem;
padding-block: 0;
}
@media screen and (max-width: 767px) {
.l-doctor__section {
margin-top: 3.5rem;
}
}
.page-gai {
--sub-band: var(--color-beige-band);
}
.l-gai {
margin-top: 5rem;
}
@media screen and (max-width: 767px) {
.l-gai {
margin-top: 3rem;
}
}
.l-gai--reception {
margin-top: 5.5rem;
}
@media screen and (max-width: 767px) {
.l-gai--reception {
margin-top: 2.5rem;
}
}
.l-greeting {
margin-top: 4rem;
}
@media screen and (max-width: 767px) {
.l-greeting {
margin-top: 2.5rem;
}
}
.l-greeting--intro {
margin-top: 5rem;
}
@media screen and (max-width: 767px) {
.l-greeting--intro {
margin-top: 2.5rem;
}
}
.l-greeting--message {
margin-top: 6.25rem;
}
@media screen and (max-width: 767px) {
.l-greeting--message {
margin-top: 3rem;
}
}
.l-greeting--related {
margin-block: 6.25rem 4.375rem;
}
@media screen and (max-width: 767px) {
.l-greeting--related {
margin-block: 3rem 2.5rem;
}
}
.l-header {
position: fixed;
inset: 0 0 auto 0;
z-index: 1001;
width: 100%;
height: var(--header-height);
background-color: rgba(255, 255, 255, 0.7);
transition: var(--transition-hover);
}
.l-header.is-scrolled {
background-color: var(--color-white);
}
@media screen and (max-width: 767px) {
body.is-fixed .l-header,
body.is-fixed .l-header.is-scrolled {
background-color: var(--color-beige);
}
}
.l-inner {
margin-inline: auto;
width: 100%;
padding-inline: 1.5625rem;
max-width: 78.125rem;
}
@media screen and (max-width: 1600px) {
.l-inner {
max-width: 78.125rem;
padding-inline: 1.5625rem;
width: 95%;
}
}
@media screen and (max-width: 767px) {
.l-inner {
max-width: 40rem;
padding-inline: 1.25rem;
width: 100%;
}
}
.l-inner--wide {
max-width: 111.125rem;
}
@media screen and (max-width: 1600px) {
.l-inner--wide {
max-width: 111.125rem;
width: 95%;
}
}
@media screen and (max-width: 767px) {
.l-inner--wide {
max-width: 40rem;
width: 100%;
}
}
.l-job {
padding-bottom: 7.5rem;
}
@media screen and (max-width: 767px) {
.l-job {
padding-bottom: 4.375rem;
}
}
.l-job__section {
margin-top: 5rem;
}
@media screen and (max-width: 767px) {
.l-job__section {
margin-top: 3rem;
}
}
.page-ken {
--sub-band: var(--color-beige-band);
}
.l-ken {
margin-top: 4rem;
}
@media screen and (max-width: 767px) {
.l-ken {
margin-top: 2.5rem;
}
}
.l-ken--lead {
margin-top: 4.25rem;
}
@media screen and (max-width: 767px) {
.l-ken--lead {
margin-top: 2rem;
}
}
.l-sub-anchor.l-ken-anchor {
margin-top: 2.6875rem;
padding-bottom: 2.125rem;
}
@media screen and (max-width: 767px) {
.l-sub-anchor.l-ken-anchor {
margin-top: 2rem;
}
}
.l-ken--reception {
margin-top: 6.25rem;
}
@media screen and (max-width: 767px) {
.l-ken--reception {
margin-top: 3.5rem;
}
}
.l-ken--group {
margin-top: 8.9375rem;
}
@media screen and (max-width: 767px) {
.l-ken--group {
margin-top: 4rem;
}
}
.l-ken--flow {
margin-top: 6.3125rem;
}
@media screen and (max-width: 767px) {
.l-ken--flow {
margin-top: 3.5rem;
}
}
.l-ken--course {
margin-top: 7.5rem;
}
@media screen and (max-width: 767px) {
.l-ken--course {
margin-top: 4rem;
}
}
.l-ken--dock {
margin-top: 7.5rem;
}
@media screen and (max-width: 767px) {
.l-ken--dock {
margin-top: 4rem;
}
}
.l-ken--city {
margin-top: 7.5rem;
}
@media screen and (max-width: 767px) {
.l-ken--city {
margin-top: 4rem;
}
}
.l-ken--junkai {
margin-top: 7.5rem;
}
@media screen and (max-width: 767px) {
.l-ken--junkai {
margin-top: 4rem;
}
}
.l-ken--faq {
margin-top: 7.5rem;
}
@media screen and (max-width: 767px) {
.l-ken--faq {
margin-top: 4rem;
}
}
.l-ken--contact {
margin-top: 7.5rem;
margin-bottom: 7.5rem;
}
@media screen and (max-width: 767px) {
.l-ken--contact {
margin-top: 4rem;
margin-bottom: 4rem;
}
}
.l-news {
padding-bottom: 7.5rem;
}
@media screen and (max-width: 767px) {
.l-news {
padding-bottom: 4.375rem;
}
}
.l-news__section {
margin-top: 5rem;
}
@media screen and (max-width: 767px) {
.l-news__section {
margin-top: 3rem;
}
}
.l-nin {
margin-top: 4rem;
}
@media screen and (max-width: 767px) {
.l-nin {
margin-top: 2.5rem;
}
}
.l-sub-anchor.l-nin-anchor {
padding-bottom: 3.75rem;
}
.l-nin--lead {
margin-top: 0;
padding-top: 2.375rem;
}
@media screen and (max-width: 767px) {
.l-nin--lead {
margin-top: 0;
padding-top: 2rem;
}
}
.l-nin--flow {
margin-top: 4rem;
}
@media screen and (max-width: 767px) {
.l-nin--flow {
margin-top: 2.5rem;
}
}
.l-nin--procedure {
margin-top: 3.625rem;
}
@media screen and (max-width: 767px) {
.l-nin--procedure {
margin-top: 1.5rem;
}
}
.l-nin--ward {
margin-top: 5.5625rem;
}
@media screen and (max-width: 767px) {
.l-nin--ward {
margin-top: 3.75rem;
}
}
.l-nin--life {
margin-top: 0.3125rem;
padding-top: 4rem;
}
@media screen and (max-width: 767px) {
.l-nin--life {
margin-top: 0.3125rem;
padding-top: 2.1875rem;
}
}
.l-nin--visit {
margin-top: 0;
padding-top: 3.25rem;
}
@media screen and (max-width: 767px) {
.l-nin--visit {
margin-top: 0;
padding-top: 1.5rem;
}
}
.l-nin--discharge {
margin-top: 3.9375rem;
}
@media screen and (max-width: 767px) {
.l-nin--discharge {
margin-top: 0;
}
}
.l-nin--cost {
margin-top: 4.125rem;
}
@media screen and (max-width: 767px) {
.l-nin--cost {
margin-top: 1.5rem;
}
}
.l-nin--next {
margin-top: 4.5rem;
margin-bottom: 5.25rem;
}
@media screen and (max-width: 767px) {
.l-nin--next {
margin-top: 1.5rem;
margin-bottom: 3.125rem;
}
}
.page-overview {
--sub-band: var(--color-beige-band);
}
.l-overview {
margin-top: 5.5rem;
}
@media screen and (max-width: 767px) {
.l-overview {
margin-top: 3rem;
}
}
.l-overview--lead {
margin-top: 3.75rem;
}
@media screen and (max-width: 767px) {
.l-overview--lead {
margin-top: 2rem;
}
}
.l-overview--outline {
margin-top: 6.1875rem;
}
@media screen and (max-width: 767px) {
.l-overview--outline {
margin-top: 3rem;
}
}
.l-overview--floor {
margin-top: 6.625rem;
}
@media screen and (max-width: 767px) {
.l-overview--floor {
margin-top: 3.25rem;
}
}
.l-overview--related {
margin-block: 6.1875rem 5rem;
}
@media screen and (max-width: 767px) {
.l-overview--related {
margin-block: 3rem 3rem;
}
}
.l-overview--equipment {
margin-top: 6.25rem;
}
@media screen and (max-width: 767px) {
.l-overview--equipment {
margin-top: 3.25rem;
}
}
.page-right {
--sub-band: var(--color-beige-band);
}
.l-right {
margin-top: 4rem;
}
@media screen and (max-width: 767px) {
.l-right {
margin-top: 2.5rem;
}
}
.l-sub-anchor.l-right-anchor {
padding-bottom: 3.625rem;
}
@media screen and (max-width: 767px) {
.l-sub-anchor.l-right-anchor {
padding-bottom: 1.5rem;
}
}
.l-right--rights {
margin-top: 3.625rem;
}
@media screen and (max-width: 767px) {
.l-right--rights {
margin-top: 2.25rem;
}
}
.l-right--requests {
margin-top: 5.625rem;
padding-block: 5rem;
}
@media screen and (max-width: 767px) {
.l-right--requests {
margin-top: 3rem;
padding-block: 3rem;
}
}
.l-right--decision {
margin-top: 5.5rem;
}
@media screen and (max-width: 767px) {
.l-right--decision {
margin-top: 3rem;
}
}
.l-right--policy {
margin-top: 5.5rem;
}
@media screen and (max-width: 767px) {
.l-right--policy {
margin-top: 3rem;
}
}
.l-right--system {
margin-top: 5.625rem;
}
@media screen and (max-width: 767px) {
.l-right--system {
margin-top: 3rem;
}
}
.l-right--action {
margin-top: 5.875rem;
}
@media screen and (max-width: 767px) {
.l-right--action {
margin-top: 3rem;
}
}
.l-right--management {
margin-top: 3rem;
}
@media screen and (max-width: 767px) {
.l-right--management {
margin-top: 2rem;
}
}
.l-right--infection {
margin-top: 5.75rem;
}
@media screen and (max-width: 767px) {
.l-right--infection {
margin-top: 3rem;
}
}
.l-right--related {
margin-top: 6.1875rem;
margin-bottom: 6.25rem;
}
@media screen and (max-width: 767px) {
.l-right--related {
margin-top: 3.5rem;
margin-bottom: 3.5rem;
}
}
.l-sub-anchor.l-saiyou-anchor {
padding-top: 3.125rem;
padding-bottom: 4.375rem;
}
@media screen and (max-width: 767px) {
.l-sub-anchor.l-saiyou-anchor {
padding-top: 2.5rem;
padding-bottom: 2.5rem;
}
}
.l-saiyou {
margin-top: 4rem;
}
@media screen and (max-width: 767px) {
.l-saiyou {
margin-top: 2.5rem;
}
}
.l-saiyou--lead {
padding-bottom: 5.6875rem;
}
@media screen and (max-width: 767px) {
.l-saiyou--lead {
padding-bottom: 2.5rem;
}
}
.l-saiyou--jobs {
margin-top: 5.4375rem;
}
@media screen and (max-width: 767px) {
.l-saiyou--jobs {
margin-top: 1.5rem;
}
}
.l-saiyou--reason {
margin-top: 5.375rem;
}
@media screen and (max-width: 767px) {
.l-saiyou--reason {
margin-top: 1.5rem;
}
}
.l-saiyou--interview {
margin-top: 6.9375rem;
}
@media screen and (max-width: 767px) {
.l-saiyou--interview {
margin-top: 3.75rem;
}
}
.l-saiyou--numbers {
margin-top: 4.5rem;
}
@media screen and (max-width: 767px) {
.l-saiyou--numbers {
margin-top: 1.5rem;
}
}
.l-saiyou--career {
margin-top: 5.375rem;
}
@media screen and (max-width: 767px) {
.l-saiyou--career {
margin-top: 2.5rem;
}
}
.l-saiyou--welfare {
margin-top: 7.5rem;
}
@media screen and (max-width: 767px) {
.l-saiyou--welfare {
margin-top: 1.5rem;
}
}
.l-saiyou--flow {
margin-top: 3.4375rem;
}
@media screen and (max-width: 767px) {
.l-saiyou--flow {
margin-top: 2.5rem;
}
}
.l-saiyou--contact {
margin-top: 4.625rem;
}
@media screen and (max-width: 767px) {
.l-saiyou--contact {
margin-top: 3.125rem;
}
}
.page-an,
.page-nin,
.page-saiyou,
.single-dep {
--sub-band: var(--color-beige-band);
}
.l-sub-content {
margin-block: 4rem;
}
@media screen and (max-width: 767px) {
.l-sub-content {
margin-block: 2.5rem;
}
}
.l-sub-content + .l-sub-content {
margin-top: 1.5rem;
}
.l-sub-lead {
margin-top: 3.5rem;
}
@media screen and (max-width: 767px) {
.l-sub-lead {
margin-top: 2rem;
}
}
.l-sub-band {
display: flow-root;
background-color: var(--sub-band);
}
.l-sub-anchor {
margin-top: 0;
padding-top: 2.0625rem;
padding-bottom: 2.125rem;
background-color: var(--sub-band);
}
@media screen and (max-width: 767px) {
.l-sub-anchor {
padding-top: 1.5rem;
padding-bottom: 1.5rem;
}
}
.l-top-nav {
margin-block-start: -5.6875rem;
}
@media screen and (max-width: 767px) {
.l-top-nav {
margin-block-start: -15.125rem;
}
}
.l-top-news {
margin-block-start: 8.4375rem;
}
@media screen and (max-width: 767px) {
.l-top-news {
margin-block-start: 3.6875rem;
}
}
.l-top-feature {
margin-block-start: 7.1875rem;
}
@media screen and (max-width: 767px) {
.l-top-feature {
margin-block-start: 3.75rem;
}
}
.l-top-department {
margin-block-start: 5.75rem;
}
@media screen and (max-width: 767px) {
.l-top-department {
margin-block-start: 4.0625rem;
}
}
.l-top-recruit {
margin-block-start: 6.875rem;
}
@media screen and (max-width: 767px) {
.l-top-recruit {
margin-block-start: 3.25rem;
}
}
.l-top-facility {
margin-block-start: 7.1875rem;
}
@media screen and (max-width: 767px) {
.l-top-facility {
margin-block-start: 0;
}
}
.l-top-sns {
margin-block-start: 5.6875rem;
}
@media screen and (max-width: 767px) {
.l-top-sns {
margin-block-start: 3.125rem;
}
}
.l-top-access {
margin-block-start: 5.75rem;
}
@media screen and (max-width: 767px) {
.l-top-access {
margin-block-start: 2.4375rem;
}
}
.l-voice {
padding-bottom: 7.5rem;
}
@media screen and (max-width: 767px) {
.l-voice {
padding-bottom: 4.375rem;
}
}
.l-voice__section {
margin-top: 5rem;
}
@media screen and (max-width: 767px) {
.l-voice__section {
margin-top: 3rem;
}
}
.l-ward {
margin-top: 4rem;
}
@media screen and (max-width: 767px) {
.l-ward {
margin-top: 2.5rem;
}
}
.l-ward + .l-ward {
margin-top: 12.125rem;
}
@media screen and (max-width: 767px) {
.l-ward + .l-ward {
margin-top: 5rem;
}
}
.l-ward:last-of-type {
margin-bottom: 10.125rem;
}
@media screen and (max-width: 767px) {
.l-ward:last-of-type {
margin-bottom: 3.75rem;
}
}
.page-zaitaku {
--sub-band: var(--color-beige-band);
}
.l-zaitaku {
margin-top: 4rem;
}
@media screen and (max-width: 767px) {
.l-zaitaku {
margin-top: 2.5rem;
}
}
.l-zaitaku--lead {
margin-top: 0;
padding-top: 2.375rem;
}
@media screen and (max-width: 767px) {
.l-zaitaku--lead {
padding-top: 2rem;
}
}
.l-zaitaku--compare {
margin-top: 6rem;
}
@media screen and (max-width: 767px) {
.l-zaitaku--compare {
margin-top: 3rem;
}
}
.l-zaitaku--houmon {
margin-top: 6rem;
}
@media screen and (max-width: 767px) {
.l-zaitaku--houmon {
margin-top: 3.5rem;
}
}
.l-zaitaku--tsusho {
margin-top: 6rem;
}
@media screen and (max-width: 767px) {
.l-zaitaku--tsusho {
margin-top: 3.5rem;
}
}
.l-zaitaku--flow {
margin-top: 6rem;
}
@media screen and (max-width: 767px) {
.l-zaitaku--flow {
margin-top: 3.5rem;
}
}
.l-zaitaku--contact {
margin-top: 6rem;
margin-bottom: 6rem;
}
@media screen and (max-width: 767px) {
.l-zaitaku--contact {
margin-top: 3.5rem;
margin-bottom: 3.5rem;
}
}
.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: 0.625rem;
}
@media screen and (max-width: 767px) {
.c-accordion {
border-radius: 0.3125rem;
}
}
.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-anchor-nav {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 1rem 2.5rem;
}
@media screen and (max-width: 767px) {
.c-anchor-nav {
gap: 0.75rem 1.25rem;
}
}
.c-anchor-nav__link {
position: relative;
display: inline-block;
padding-bottom: 0.5rem;
font-size: max(0.875rem, 10px);
font-weight: 500;
line-height: 1.5;
letter-spacing: 0.1em;
color: var(--color-black);
text-decoration: none;
}
.c-anchor-nav--box {
display: grid;
gap: 0.625rem;
}
@media screen and (max-width: 767px) {
.c-anchor-nav--box {
gap: 0.5rem;
}
}
.c-anchor-nav--box-5 {
grid-template-columns: repeat(5, 1fr);
gap: 0.625rem;
}
@media screen and (max-width: 767px) {
.c-anchor-nav--box-5 {
grid-template-columns: repeat(2, 1fr);
}
}
.c-anchor-nav--box-3 {
grid-template-columns: repeat(3, 1fr);
gap: 0.75rem;
}
@media screen and (max-width: 767px) {
.c-anchor-nav--box-3 {
grid-template-columns: repeat(2, 1fr);
}
}
.c-anchor-nav--box-4 {
grid-template-columns: repeat(4, 1fr);
gap: 0.75rem;
}
@media screen and (max-width: 767px) {
.c-anchor-nav--box-4 {
grid-template-columns: repeat(2, 1fr);
}
}
.c-anchor-nav--box .c-anchor-nav__link {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 3.6875rem;
padding-bottom: 0;
padding-inline: 1.75rem 2.25rem;
background-color: var(--color-white);
border-radius: 0.25rem;
text-align: center;
}
@media screen and (min-width: 768px) and (max-width: 1250px) {
.c-anchor-nav--box .c-anchor-nav__link {
padding-inline: 0.75rem 1.875rem;
letter-spacing: 0.05em;
}
}
@media screen and (max-width: 767px) {
.c-anchor-nav--box .c-anchor-nav__link {
width: 100%;
height: auto;
min-height: 3rem;
padding-block: 0.5rem;
padding-inline: 0.75rem 1.5rem;
font-size: max(0.75rem, 10px);
}
}
.c-anchor-nav--box .c-anchor-nav__link::before {
content: "";
position: absolute;
top: 50%;
right: 1.125rem;
width: 0.5rem;
height: 0.5rem;
border-right: 1px solid var(--color-main);
border-bottom: 1px solid var(--color-main);
transform: translateY(-70%) rotate(45deg);
}
@media (any-hover: hover) {
.c-anchor-nav__link:hover {
color: var(--color-main);
}
}
.c-anchor-nav--box-4.c-anchor-nav--center {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.c-anchor-nav--box-4.c-anchor-nav--center .c-anchor-nav__link {
width: calc((100% - 2.25rem) / 4);
}
@media screen and (max-width: 767px) {
.c-anchor-nav--box-4.c-anchor-nav--center .c-anchor-nav__link {
width: calc((100% - 0.75rem) / 2);
}
}
.c-button {
display: inline-flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
width: 17.625rem;
max-width: 100%;
min-height: 3.75rem;
padding-inline: 1.875rem 0.9375rem;
border-radius: 1.875rem;
background-color: var(--color-accent);
color: var(--color-white);
font-size: max(1rem, 10px);
font-weight: 700;
line-height: 1;
letter-spacing: 0.1em;
box-shadow: var(--shadow-card);
transition: var(--transition-hover);
}
@media screen and (max-width: 767px) {
.c-button {
width: 100%;
min-height: 3.125rem;
padding-inline: 1.875rem 0.875rem;
font-size: max(0.875rem, 10px);
}
}
@media (any-hover: hover) {
.c-button:hover {
background-color: var(--color-white);
color: var(--color-accent);
box-shadow: inset 0 0 0 1px var(--color-accent);
}
.c-button:hover .c-icon--arrow {
translate: 0 0;
}
}
.c-button svg {
flex-shrink: 0;
width: 1.375rem;
height: 1.375rem;
}
.c-button--wide {
width: auto;
min-width: 18.75rem;
white-space: nowrap;
}
@media screen and (max-width: 767px) {
.c-button--wide {
width: 100%;
}
}
.c-button--main {
background-color: var(--color-main);
}
@media (any-hover: hover) {
.c-button--main:hover {
color: var(--color-main);
box-shadow: inset 0 0 0 1px var(--color-main);
}
}
.c-button--outline {
background-color: transparent;
border: 1px solid var(--color-accent);
color: var(--color-accent);
}
.c-def {
margin-top: 2.0625rem;
border-top: 1px solid var(--color-beige-deep);
background-color: var(--color-white);
}
@media screen and (max-width: 767px) {
.c-def {
margin-top: 1.25rem;
}
}
.c-def__row {
display: grid;
grid-template-columns: 11.75rem 1fr;
border-bottom: 1px solid var(--color-beige-deep);
}
@media screen and (max-width: 767px) {
.c-def__row {
grid-template-columns: 1fr;
}
}
.c-def__dt {
display: flex;
align-items: center;
justify-content: center;
padding: 1.25rem;
border-right: 1px solid var(--color-beige-deep);
background-color: var(--color-beige-band);
font-size: max(0.875rem, 10px);
font-weight: 700;
line-height: 1.8;
letter-spacing: 0.05em;
color: var(--color-main);
text-align: center;
}
@media screen and (max-width: 767px) {
.c-def__dt {
justify-content: flex-start;
padding: 0.625rem 1rem;
border-right: none;
text-align: left;
}
}
.c-def__dd {
padding: 1.3125rem;
font-size: max(0.875rem, 10px);
font-weight: 500;
line-height: 1.8571428571;
letter-spacing: 0.05em;
}
@media screen and (max-width: 767px) {
.c-def__dd {
padding: 0.75rem 1rem 1rem;
}
}
.c-def--plain {
margin-top: 0;
border-top: none;
background-color: transparent;
}
.c-def--plain .c-def__row {
grid-template-columns: 9.8125rem 1fr;
border-bottom: none;
}
@media screen and (max-width: 767px) {
.c-def--plain .c-def__row {
grid-template-columns: 1fr;
}
}
.c-def--plain .c-def__row + .c-def__row {
border-top: 1px dotted var(--color-beige-deep);
}
.c-def--plain .c-def__dt {
display: block;
padding: 1.25rem 0 0;
border-right: none;
background-color: transparent;
text-align: left;
}
@media screen and (max-width: 767px) {
.c-def--plain .c-def__dt {
padding-top: 1rem;
}
}
.c-def--plain .c-def__dd {
padding: 1.125rem 0;
}
@media screen and (max-width: 767px) {
.c-def--plain .c-def__dd {
padding: 0.25rem 0 1rem;
}
}
.c-def--filled {
margin-top: 2.4375rem;
border-top: none;
}
@media screen and (max-width: 767px) {
.c-def--filled {
margin-top: 1.5rem;
}
}
.c-def--filled .c-def__row {
grid-template-columns: 8.6875rem 1fr;
border-bottom: none;
}
@media screen and (max-width: 767px) {
.c-def--filled .c-def__row {
grid-template-columns: 1fr;
}
}
.c-def--filled .c-def__row + .c-def__row {
border-top: 1px solid var(--color-beige-deep);
}
.c-def--filled .c-def__dt {
display: block;
padding: 1.125rem 2rem;
border-right: none;
background-color: var(--color-main);
color: var(--color-white);
text-align: left;
}
@media screen and (max-width: 767px) {
.c-def--filled .c-def__dt {
padding: 0.625rem 1rem;
}
}
.c-def--filled .c-def__dd {
padding: 1.125rem 1.25rem;
border-left: 1px solid var(--color-beige-deep);
}
@media screen and (max-width: 767px) {
.c-def--filled .c-def__dd {
border-left: none;
padding: 0.75rem 1rem 1rem;
}
}
@media (any-hover: hover) {
.c-def__dd a:hover {
opacity: 0.7;
}
}
.c-dialog__contents {
--duration: 0.3s;
--scale: 0.95;
transition: display var(--duration) allow-discrete, overlay var(--duration) allow-discrete, opacity var(--duration) ease-in-out, scale var(--duration) ease-in-out;
opacity: 0;
scale: var(--scale);
width: min(100% - 2.5rem, 40rem);
max-height: 80%;
border: none;
border-radius: 0.625rem;
background-color: var(--color-white);
text-align: center;
}
.c-dialog__contents[open] {
opacity: 1;
scale: 1;
}
@starting-style {
.c-dialog__contents[open] {
opacity: 0;
scale: var(--scale);
}
}
.c-dialog__contents-inner {
padding: 2.5rem 1.875rem;
}
@media screen and (max-width: 767px) {
.c-dialog__contents-inner {
padding: 2rem 1.25rem;
}
}
.c-dialog__title {
font-size: max(1.125rem, 10px);
font-weight: 700;
line-height: 1.5;
letter-spacing: 0.05em;
color: var(--color-main);
}
.c-dialog__close {
display: inline-block;
width: 100%;
max-width: 12.5rem;
margin-top: 2rem;
padding: 0.875rem;
border: 1px solid var(--color-main);
border-radius: 1.875rem;
background-color: var(--color-main);
font-size: max(0.875rem, 10px);
font-weight: 700;
line-height: 1;
letter-spacing: 0.05em;
color: var(--color-white);
text-align: center;
transition: color 0.3s ease-in-out, background-color 0.3s ease-in-out;
}
@media (any-hover: hover) {
.c-dialog__close:hover {
background-color: var(--color-white);
color: var(--color-main);
}
}
.c-dialog__contents::backdrop {
background-color: rgba(0, 0, 0, 0.4);
opacity: 0;
transition: opacity 0.3s ease-in-out;
}
.c-dialog__contents[open]::backdrop {
opacity: 1;
}
@starting-style {
.c-dialog__contents[open]::backdrop {
opacity: 0;
}
}
:root:has(dialog[open]) {
overflow: hidden;
}
.c-equipment-slider__lead {
text-align: center;
}
@media screen and (max-width: 767px) {
.c-equipment-slider__lead {
text-align: left;
}
}
.c-equipment-slider__lead + .c-equipment-slider__tabs {
margin-top: 1.875rem;
}
@media screen and (max-width: 767px) {
.c-equipment-slider__lead + .c-equipment-slider__tabs {
margin-top: 1.25rem;
}
}
.c-equipment-slider__panel {
margin-top: 1.875rem;
}
@media screen and (max-width: 767px) {
.c-equipment-slider__panel {
margin-top: 1.25rem;
}
}
.c-equipment-slider__slider .splide__arrow {
top: 6.5625rem;
width: 3rem;
height: 3rem;
background-color: transparent;
color: var(--color-main);
opacity: 1;
transition: var(--transition-hover);
}
@media screen and (max-width: 767px) {
.c-equipment-slider__slider .splide__arrow {
top: 7.5rem;
width: 2.5rem;
height: 2.5rem;
}
}
.c-equipment-slider__slider .splide__arrow:disabled {
opacity: 0;
pointer-events: none;
}
.c-equipment-slider__slider .splide__arrow--prev {
left: 0;
transform: translate(-50%, -50%);
}
@media screen and (max-width: 767px) {
.c-equipment-slider__slider .splide__arrow--prev {
left: 0.5rem;
transform: translateY(-50%);
}
}
.c-equipment-slider__slider .splide__arrow--next {
right: 0;
transform: translate(50%, -50%);
}
@media screen and (max-width: 767px) {
.c-equipment-slider__slider .splide__arrow--next {
right: 0.5rem;
transform: translateY(-50%);
}
}
.c-equipment-slider__slider .splide__arrow svg {
width: 100%;
height: 100%;
fill: none;
}
@media (any-hover: hover) {
.c-equipment-slider__slider .splide__arrow:hover:not(:disabled) {
color: var(--color-accent);
}
}
.c-equipment-slider__item {
border-radius: 0.25rem;
overflow: hidden;
}
.c-equipment-slider__figure {
margin: 0;
}
.c-equipment-slider__figure img {
display: block;
width: 100%;
height: 13.1875rem;
-o-object-fit: cover;
object-fit: cover;
}
@media screen and (max-width: 767px) {
.c-equipment-slider__figure img {
height: 15rem;
}
}
.c-equipment-slider__body {
padding-top: 0.625rem;
}
@media screen and (max-width: 767px) {
.c-equipment-slider__body {
padding-top: 0.5rem;
}
}
.c-equipment-slider__title {
font-size: max(1.125rem, 10px);
font-weight: 500;
line-height: 1.4;
letter-spacing: 0.05em;
color: var(--color-main);
}
@media screen and (max-width: 767px) {
.c-equipment-slider__title {
font-size: max(1.0625rem, 10px);
}
}
.c-equipment-slider__figure--top img {
-o-object-position: center 20%;
object-position: center 20%;
}
.p-block__content .c-equipment-slider {
margin-top: 4rem;
}
@media screen and (max-width: 767px) {
.p-block__content .c-equipment-slider {
margin-top: 2.5rem;
}
}
.p-block__content .c-equipment-slider ul:not(.c-equipment-slider__docs),
.p-block__content .c-equipment-slider li {
margin: 0;
padding: 0;
}
.p-block__content .c-equipment-slider li::before {
content: none;
}
.p-block__content .c-equipment-slider .c-equipment-slider__title {
margin: 0;
padding: 0;
border-radius: 0;
background-color: transparent;
font-size: max(1.125rem, 10px);
line-height: 1.4;
color: var(--color-main);
}
@media screen and (max-width: 767px) {
.p-block__content .c-equipment-slider .c-equipment-slider__title {
font-size: max(1.0625rem, 10px);
}
}
.p-block__content .c-equipment-slider .c-equipment-slider__title::before {
content: none;
}
.p-block__content .c-equipment-slider__figure img {
height: 13.1875rem;
border-radius: 0;
}
@media screen and (max-width: 767px) {
.p-block__content .c-equipment-slider__figure img {
height: 15rem;
}
}
.c-equipment-slider__docs {
display: grid;
gap: 0.75rem;
margin-top: 2rem;
}
@media screen and (max-width: 767px) {
.c-equipment-slider__docs {
gap: 0.625rem;
margin-top: 1.5rem;
}
}
.c-gallery-slider .splide__list {
align-items: center;
}
.c-gallery-slider__figure {
width: 100%;
height: auto;
margin: 0;
transform: scale(0.75);
transform-origin: center center;
transition: transform 0.7s ease;
}
@media screen and (max-width: 767px) {
.c-gallery-slider__figure {
transform: initial;
}
}
.c-gallery-slider .splide__slide.is-active .c-gallery-slider__figure {
transform: scale(1);
}
.c-gallery-slider__figure img {
display: block;
width: 100%;
height: auto;
aspect-ratio: 585/395;
-o-object-fit: cover;
object-fit: cover;
border-radius: 0.625rem;
}
.c-gallery-slider .splide__arrow {
top: 50%;
width: 3.375rem;
height: 3.375rem;
border-radius: 50%;
background-color: var(--color-main);
opacity: 1;
transition: var(--transition-hover);
}
@media screen and (max-width: 767px) {
.c-gallery-slider .splide__arrow {
width: 2.5rem;
height: 2.5rem;
}
}
@media (any-hover: hover) {
.c-gallery-slider .splide__arrow:hover:not(:disabled) {
background-color: var(--color-accent);
}
}
.c-gallery-slider .splide__arrow:disabled {
opacity: 0.3;
}
.c-gallery-slider .splide__arrow--prev {
left: 30%;
transform: translate(-50%, -50%);
}
@media screen and (max-width: 767px) {
.c-gallery-slider .splide__arrow--prev {
left: 0.5rem;
}
}
.c-gallery-slider .splide__arrow--next {
right: 30%;
transform: translate(50%, -50%);
}
@media screen and (max-width: 767px) {
.c-gallery-slider .splide__arrow--next {
right: 0.5rem;
}
}
.c-gallery-slider .splide__arrow svg {
width: 1.25rem;
height: 1.25rem;
fill: var(--color-white);
}
.c-icon--arrow {
overflow: visible;
}
.c-icon--arrow {
transition: var(--transition-hover);
}
@media (any-hover: hover) {
a:hover .c-icon--arrow {
translate: 0.25rem 0;
}
}
.c-lead__title {
font-size: max(3.125rem, 10px);
font-weight: 500;
line-height: 1.4;
letter-spacing: 0.1em;
color: var(--color-main);
text-align: center;
}
@media screen and (min-width: 768px) and (max-width: 1250px) {
.c-lead__title {
word-break: keep-all;
}
}
@media screen and (max-width: 767px) {
.c-lead__title {
font-size: max(1.5rem, 10px);
}
}
.c-lead__title-sm {
font-size: max(2.125rem, 10px);
}
@media screen and (max-width: 767px) {
.c-lead__title-sm {
font-size: max(1.0625rem, 10px);
}
}
@media screen and (min-width: 768px) and (max-width: 1250px) {
.c-lead__title--left .c-lead__title-sm {
font-size: max(1.875rem, 10px);
}
}
.c-lead__title--tight {
letter-spacing: 0.05em;
}
.c-lead__title--catch {
font-size: max(1.875rem, 10px);
font-weight: 700;
line-height: 1.6;
}
@media screen and (max-width: 767px) {
.c-lead__title--catch {
font-size: max(1.25rem, 10px);
}
}
.c-lead__title--left {
text-align: left;
}
@media screen and (min-width: 768px) and (max-width: 1250px) {
.c-lead__title--left {
font-size: max(2.75rem, 10px);
letter-spacing: 0;
word-break: normal;
}
}
.c-lead__text {
margin-top: 2rem;
text-align: center;
}
@media screen and (max-width: 767px) {
.c-lead__text {
margin-top: 1.25rem;
text-align: left;
}
}
.c-movie {
position: relative;
width: 100%;
aspect-ratio: 16/9;
overflow: hidden;
border-radius: 0.25rem;
background-color: var(--color-beige-band);
}
.c-movie iframe {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
border: 0;
}
.c-movie img,
.c-movie__video {
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
transition: var(--transition-hover);
}
.c-movie__link {
display: block;
width: 100%;
height: 100%;
transition: var(--transition-hover);
}
@media (any-hover: hover) {
.c-movie__link:hover img {
scale: 1.05;
}
}
.c-no-post {
font-size: max(1.25rem, 10px);
font-weight: 500;
line-height: 2;
letter-spacing: 0.05em;
text-align: center;
}
@media screen and (max-width: 767px) {
.c-no-post {
font-size: max(1.125rem, 10px);
}
}
.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: 3.375rem;
}
}
.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-pagenavi {
margin-top: 3.125rem;
text-align: center;
}
.c-pagenavi .nav-links {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
position: relative;
}
@media screen and (max-width: 767px) {
.c-pagenavi .nav-links {
gap: 0.3125rem;
}
}
.c-pagenavi a.page-numbers,
.c-pagenavi .page-numbers.current {
width: 3.125rem;
height: auto;
aspect-ratio: 1/1;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: max(1rem, 10px);
font-weight: 700;
line-height: 1;
}
@media screen and (max-width: 767px) {
.c-pagenavi a.page-numbers,
.c-pagenavi .page-numbers.current {
width: 1.875rem;
font-size: max(0.875rem, 10px);
}
}
.c-pagenavi .page-numbers.current {
background-color: var(--color-main);
color: var(--color-white);
border-radius: 50%;
}
.c-pagenavi .page-numbers.next,
.c-pagenavi .page-numbers.prev {
position: absolute;
top: 0;
}
.c-pagenavi .page-numbers.next {
right: -2.8125rem;
}
@media screen and (max-width: 767px) {
.c-pagenavi .page-numbers.next {
right: -2.1875rem;
}
}
.c-pagenavi .page-numbers.prev {
left: -2.8125rem;
}
@media screen and (max-width: 767px) {
.c-pagenavi .page-numbers.prev {
left: -2.1875rem;
}
}
.c-pagenavi a {
transition: var(--transition-hover);
}
@media (any-hover: hover) {
.c-pagenavi a:hover {
color: var(--color-main);
opacity: 1;
}
}
.c-room-fee {
margin-top: 2.5rem;
}
@media screen and (max-width: 767px) {
.c-room-fee {
margin-top: 1.75rem;
}
}
.c-room-fee__wrap {
margin-top: 1.25rem;
overflow-x: auto;
}
@media screen and (max-width: 767px) {
.c-room-fee__wrap {
margin-top: 0.875rem;
}
}
.c-table.c-room-fee__table {
min-width: 0;
}
.c-table.c-room-fee__table th,
.c-table.c-room-fee__table td {
padding: 0.875rem 1rem;
}
@media screen and (max-width: 767px) {
.c-table.c-room-fee__table th,
.c-table.c-room-fee__table td {
padding: 0.625rem 0.75rem;
}
}
.c-table.c-room-fee__table thead th {
white-space: nowrap;
}
.c-table.c-room-fee__table tbody th {
background-color: var(--color-white);
}
.c-room-fee__table tbody th {
white-space: nowrap;
}
@media screen and (max-width: 767px) {
.c-room-fee__table tbody th {
white-space: normal;
}
}
.c-room-fee__table td:nth-child(2) {
white-space: nowrap;
}
.c-section-title {
font-size: max(1.875rem, 10px);
font-weight: 500;
line-height: 1.5;
letter-spacing: 0.1em;
color: var(--color-main);
}
@media screen and (max-width: 767px) {
.c-section-title {
font-size: max(1.375rem, 10px);
}
}
.c-section-title--center {
text-align: center;
}
.c-step {
margin-top: 2.5rem;
}
.c-step__item {
position: relative;
display: grid;
grid-template-columns: 7.5rem 1fr;
gap: 1.875rem;
padding-bottom: 4.6875rem;
}
@media screen and (max-width: 767px) {
.c-step__item {
grid-template-columns: 3.5rem 1fr;
gap: 1rem;
padding-bottom: 1.5rem;
}
}
.c-step__item:not(:last-child)::before {
content: "";
position: absolute;
top: 3.5rem;
left: 3.625rem;
bottom: 0;
width: 1px;
background-color: var(--color-beige-deep);
}
@media screen and (max-width: 767px) {
.c-step__item:not(:last-child)::before {
top: 2.375rem;
left: 1.625rem;
}
}
.c-step__num {
display: flex;
align-items: center;
justify-content: center;
width: 3.5rem;
height: 3.5rem;
margin-inline: auto;
border-radius: 50%;
background-color: var(--color-main);
font-family: var(--en-font-family);
font-size: max(1.875rem, 10px);
font-weight: 400;
line-height: 1;
color: var(--color-white);
}
@media screen and (max-width: 767px) {
.c-step__num {
width: 2.375rem;
height: 2.375rem;
font-size: max(1.125rem, 10px);
}
}
.c-step__title {
font-size: max(1.75rem, 10px);
font-weight: 500;
line-height: 1.4;
letter-spacing: 0.1em;
color: var(--color-main);
}
@media screen and (max-width: 767px) {
.c-step__title {
font-size: max(1.125rem, 10px);
}
}
.c-step__text {
margin-top: 0.75rem;
font-size: max(0.9375rem, 10px);
font-weight: 500;
line-height: 2;
letter-spacing: 0.05em;
}
@media screen and (max-width: 767px) {
.c-step__text {
font-size: max(0.875rem, 10px);
line-height: 1.8;
text-align: left;
}
}
.c-step--card {
display: grid;
gap: 1.625rem;
width: 50rem;
max-width: 100%;
margin-inline: auto;
}
@media screen and (max-width: 767px) {
.c-step--card {
width: 100%;
gap: 1.25rem;
}
}
.c-step--card .c-step__item {
grid-template-columns: 1fr;
gap: 0;
min-height: 10rem;
padding: 1.25rem 3.75rem 1.75rem;
border-radius: 0.625rem;
background-color: var(--color-white);
text-align: center;
}
@media screen and (max-width: 767px) {
.c-step--card .c-step__item {
min-height: 6.5rem;
padding: 1.5rem 1.25rem 1.75rem;
}
}
.c-step--card .c-step__item:not(:has(.c-step__text)) {
align-content: center;
}
.c-step--card .c-step__item:nth-child(even) {
background-color: var(--color-beige-band);
}
.c-step--white .c-step__item:nth-child(even) {
background-color: var(--color-white);
}
.c-step--card .c-step__item:not(:last-child)::before {
content: "";
position: absolute;
top: auto;
left: 50%;
z-index: 1;
bottom: -2.125rem;
width: 4.6875rem;
height: 2.1875rem;
background-color: transparent;
background-image: url(//syokashi-hp.or.jp/wp-content/themes/syokashi-hp/images/common/arrow-step.svg);
background-repeat: no-repeat;
background-size: contain;
translate: -50% 0;
}
@media screen and (max-width: 767px) {
.c-step--card .c-step__item:not(:last-child)::before {
bottom: -1.375rem;
width: 3rem;
height: 1.4375rem;
}
}
.c-step--card .c-step__num {
position: absolute;
top: -0.625rem;
left: -0.625rem;
margin-inline: 0;
}
@media screen and (max-width: 767px) {
.c-step--card .c-step__num {
top: -0.75rem;
left: -0.375rem;
width: 2.5rem;
height: 2.5rem;
font-size: max(1.125rem, 10px);
}
}
.c-sub-title {
position: relative;
padding: 1rem 1.625rem;
border-radius: 0.25rem;
background-color: var(--color-beige-band);
font-size: max(1.125rem, 10px);
font-weight: 500;
line-height: 1.5;
letter-spacing: 0.05em;
color: var(--color-black);
}
@media screen and (max-width: 767px) {
.c-sub-title {
padding: 0.75rem 1.25rem;
font-size: max(1rem, 10px);
}
}
.c-sub-title::before {
content: "";
position: absolute;
top: 50%;
left: 0.6875rem;
width: 0.1875rem;
height: 2.4375rem;
background-color: var(--color-main);
transform: translateY(-50%);
}
@media screen and (max-width: 767px) {
.c-sub-title::before {
left: 0.5rem;
height: 1.75rem;
}
}
.c-tab {
display: flex;
justify-content: center;
gap: 0.5rem;
}
.c-tab__btn {
display: flex;
align-items: center;
justify-content: center;
flex: 0 1 11.6875rem;
min-width: 0;
height: 2.5rem;
padding-inline: 1rem;
border: none;
border-radius: 0.25rem;
background-color: var(--color-white);
font-family: inherit;
font-size: max(0.875rem, 10px);
font-weight: 500;
line-height: 1;
letter-spacing: 0.05em;
color: var(--color-black);
cursor: pointer;
transition: var(--transition-hover);
}
@media screen and (max-width: 767px) {
.c-tab__btn {
flex: 1 1 0;
}
}
.c-tab__btn.is-active {
background-color: var(--color-main);
color: var(--color-white);
}
@media (any-hover: hover) {
.c-tab__btn:not(.is-active):hover {
background-color: var(--color-beige-dark);
color: var(--color-main);
}
}
.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-table--week {
min-width: 55rem;
table-layout: fixed;
background-color: var(--color-white);
}
.c-table--week tr:has(> th) {
background-color: transparent;
}
.c-table--week th,
.c-table--week td {
padding: 0.875rem 0.5rem;
border-color: var(--color-beige-deep);
font-size: max(0.9375rem, 10px);
line-height: 1.6;
vertical-align: middle;
}
.c-table--week thead th,
.c-table--week tbody th {
background-color: var(--color-main);
color: var(--color-white);
font-weight: 700;
}
.c-table--week tbody th {
width: 7rem;
}
.c-table--week tbody td:empty {
background-color: var(--color-beige);
}
.c-table--doc {
min-width: 40rem;
background-color: var(--color-white);
}
.c-table--doc tr:has(> th) {
background-color: transparent;
}
.c-table--doc th,
.c-table--doc td {
padding: 1.125rem 1.5rem;
border-color: var(--color-beige-deep);
font-size: max(0.875rem, 10px);
font-weight: 500;
line-height: 1.8571428571;
letter-spacing: 0.05em;
text-align: left;
}
@media screen and (max-width: 767px) {
.c-table--doc th,
.c-table--doc td {
padding: 0.75rem 1rem;
font-size: max(0.8125rem, 10px);
}
}
.c-table--doc thead th {
background-color: var(--color-main);
color: var(--color-white);
font-weight: 700;
text-align: center;
}
.c-table--doc tbody th {
background-color: var(--color-beige-band);
color: var(--color-main);
font-weight: 700;
}
.c-text {
font-size: max(0.875rem, 10px);
font-weight: 500;
line-height: 1.714;
letter-spacing: 0.05em;
color: var(--color-black);
}
@media screen and (max-width: 767px) {
.c-text {
font-size: max(0.875rem, 10px);
}
}
.c-text--lg {
font-size: max(1rem, 10px);
line-height: 2;
}
.c-text--md {
font-size: max(0.9375rem, 10px);
line-height: 2;
letter-spacing: 0.1em;
}
.c-text--sm {
font-size: max(0.75rem, 10px);
}
.c-text-link {
text-decoration: underline;
text-underline-offset: 0.1875rem;
color: inherit;
}
@media (any-hover: hover) {
.c-text-link:hover {
color: var(--color-main);
}
}
.p-access__cols:not(:has(.p-access__cols-side)) {
grid-template-columns: 1fr;
}
.p-access__cols {
display: grid;
grid-template-columns: minmax(0, 698fr) minmax(0, 440fr);
gap: 3rem;
align-items: start;
margin-top: 1.5rem;
}
@media screen and (max-width: 767px) {
.p-access__cols {
grid-template-columns: 1fr;
gap: 1.5rem;
margin-top: 1rem;
}
}
.p-access__cols--map {
grid-template-columns: minmax(0, 35rem) minmax(0, 1fr);
}
@media screen and (max-width: 767px) {
.p-access__cols--map {
grid-template-columns: 1fr;
}
}
#location .p-doc__catch,
#location .c-section-title {
max-width: 75rem;
margin-inline: auto;
}
.p-access__cols > * > :first-child {
margin-top: 0;
}
.p-access__cols-main > .c-text + .p-doc__list {
margin-top: 1.5rem;
}
@media screen and (max-width: 767px) {
.p-access__cols-main > .c-text + .p-doc__list {
margin-top: 1rem;
}
}
.p-access__cols-side > .p-doc__map {
margin-top: 0;
}
.p-access__figure {
display: block;
}
.p-access__figure img {
display: block;
width: 100%;
height: auto;
border-radius: 0.25rem;
}
.p-access__figure-caption {
margin-top: 0.75rem;
font-size: max(0.8125rem, 10px);
font-weight: 500;
line-height: 1.8;
letter-spacing: 0.05em;
}
@media screen and (max-width: 767px) {
.p-access__figure-caption {
margin-top: 0.5rem;
font-size: max(0.75rem, 10px);
}
}
.p-access__panel {
margin-top: 1.5rem;
padding: 1.5rem 2rem;
border: 1px solid var(--border-line);
border-radius: 0.25rem;
background-color: var(--color-white);
}
@media screen and (max-width: 767px) {
.p-access__panel {
margin-top: 1rem;
padding: 1rem 1.25rem;
}
}
.p-access__panel--row {
display: flex;
align-items: center;
gap: 1.5rem;
}
@media screen and (max-width: 767px) {
.p-access__panel--row {
display: block;
}
}
.p-access__panel-label {
font-size: max(0.8125rem, 10px);
font-weight: 700;
line-height: 1.8;
letter-spacing: 0.05em;
color: var(--color-main);
white-space: nowrap;
}
@media screen and (max-width: 767px) {
.p-access__panel-label {
font-size: max(0.75rem, 10px);
}
}
.p-access__panel-text {
font-size: max(1.375rem, 10px);
font-weight: 700;
line-height: 1.6;
letter-spacing: 0.05em;
}
@media screen and (max-width: 767px) {
.p-access__panel-text {
font-size: max(1.0625rem, 10px);
}
}
.p-access__panel:not(.p-access__panel--row) .p-access__panel-text {
margin-top: 0.5rem;
}
@media screen and (max-width: 767px) {
.p-access__panel--row .p-access__panel-text {
margin-top: 0.5rem;
}
}
.p-access__steps {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: 1.75rem;
margin-top: 1.5rem;
}
@media screen and (max-width: 767px) {
.p-access__steps {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0.75rem;
margin-top: 1rem;
}
}
.p-access__step {
position: relative;
padding-bottom: 1rem;
border: 1px solid var(--border-line);
border-radius: 0.25rem;
background-color: var(--color-white);
}
.p-access__step:not(:last-child)::after {
content: "";
position: absolute;
top: 50%;
right: -2.375rem;
z-index: 1;
width: 3.25rem;
height: 1.5rem;
background-image: url(//syokashi-hp.or.jp/wp-content/themes/syokashi-hp/images/common/arrow-step.svg);
background-repeat: no-repeat;
background-size: contain;
translate: 0 -50%;
rotate: -90deg;
}
@media screen and (max-width: 767px) {
.p-access__step:not(:last-child)::after {
display: none;
}
}
.p-access__step-image {
overflow: hidden;
border-radius: 0.25rem 0.25rem 0 0;
}
.p-access__step-image img {
display: block;
width: 100%;
height: auto;
aspect-ratio: 222/167;
-o-object-fit: cover;
object-fit: cover;
}
.p-access__step-label {
margin-top: 1rem;
padding-inline: 1rem;
font-size: max(0.75rem, 10px);
font-weight: 700;
line-height: 1.6;
letter-spacing: 0.08em;
color: var(--color-main);
}
@media screen and (max-width: 767px) {
.p-access__step-label {
padding-inline: 0.75rem;
}
}
.p-access__step-text {
margin-top: 0.5rem;
padding-inline: 1rem;
font-size: max(0.875rem, 10px);
font-weight: 500;
line-height: 1.7142857143;
letter-spacing: 0.02em;
}
@media screen and (max-width: 767px) {
.p-access__step-text {
padding-inline: 0.75rem;
font-size: max(0.8125rem, 10px);
}
}
.p-access__notes {
margin-top: 1.5rem;
padding: 1.5rem 1.75rem;
border-radius: 0.25rem;
background-color: var(--color-white);
}
@media screen and (max-width: 767px) {
.p-access__notes {
margin-top: 1rem;
padding: 1rem 1.25rem;
}
}
.p-access__note {
font-size: max(0.8125rem, 10px);
font-weight: 500;
line-height: 1.8;
letter-spacing: 0.05em;
}
@media screen and (max-width: 767px) {
.p-access__note {
font-size: max(0.75rem, 10px);
}
}
.p-access__note + .p-access__note {
margin-top: 0.25rem;
}
.c-table--doc-plain tbody th {
background-color: var(--color-white);
}
.p-an-lead__inner {
display: grid;
grid-template-columns: 31.5625rem 1fr;
gap: 3.4375rem;
align-items: center;
}
@media screen and (max-width: 767px) {
.p-an-lead__inner {
grid-template-columns: 1fr;
gap: 2rem;
}
}
.p-an-lead__title {
font-size: max(3.125rem, 10px);
font-weight: 500;
line-height: 1.4;
letter-spacing: 0.1em;
color: var(--color-main);
}
@media screen and (max-width: 767px) {
.p-an-lead__title {
font-size: max(1.75rem, 10px);
}
}
.p-an-lead__text {
margin-top: 1.875rem;
font-size: max(0.9375rem, 10px);
line-height: 2;
letter-spacing: 0.05em;
}
@media screen and (max-width: 767px) {
.p-an-lead__text {
margin-top: 1.5rem;
font-size: max(0.875rem, 10px);
}
}
.p-an-lead__figure img {
width: 100%;
height: auto;
aspect-ratio: 638/448;
-o-object-fit: cover;
object-fit: cover;
border-radius: 0.25rem;
}
.p-an-group__box {
display: grid;
grid-template-columns: 18.75rem auto;
gap: 2rem;
align-items: center;
width: -moz-fit-content;
width: fit-content;
max-width: 100%;
min-height: 12.5rem;
margin-inline: auto;
padding: 0.625rem 3rem 0.625rem 0.625rem;
background-color: var(--color-beige-band);
}
@media screen and (max-width: 767px) {
.p-an-group__box {
grid-template-columns: 1fr;
gap: 1.5rem;
width: auto;
padding: 0.625rem;
}
}
.p-an-group__logo {
display: flex;
align-items: center;
justify-content: center;
height: 11.25rem;
background-color: var(--color-white);
}
@media screen and (max-width: 767px) {
.p-an-group__logo {
height: 11.25rem;
}
}
.p-an-group__logo img {
width: 13.125rem;
height: auto;
}
.p-an-group__body {
padding-block: 0.625rem;
}
.p-an-group__title {
display: flex;
align-items: baseline;
gap: 1rem;
font-family: var(--en-font-family);
font-size: max(1.875rem, 10px);
font-weight: 400;
letter-spacing: 0.02em;
color: var(--color-main);
}
@media screen and (max-width: 767px) {
.p-an-group__title {
flex-direction: column;
gap: 0.25rem;
font-size: max(1.625rem, 10px);
}
}
.p-an-group__title-ja {
font-family: var(--base-font-family);
font-size: max(0.9375rem, 10px);
font-weight: 500;
letter-spacing: 0.1em;
color: var(--color-black);
}
.p-an-group__text {
margin-top: 0;
font-size: max(0.875rem, 10px);
line-height: 2;
letter-spacing: 0.05em;
}
.p-an-group__button {
gap: 0.375rem;
width: auto;
min-width: 15rem;
min-height: 3.125rem;
margin-top: 1.25rem;
padding-inline: 1.75rem 0.8125rem;
font-size: max(0.875rem, 10px);
white-space: nowrap;
}
@media screen and (max-width: 767px) {
.p-an-group__button {
width: 100%;
max-width: 17.5625rem;
}
}
.p-an-philosophy {
padding-block: 4.1875rem 3.5rem;
background-color: var(--color-beige-band);
}
@media screen and (max-width: 767px) {
.p-an-philosophy {
padding-block: 2.5rem 2.25rem;
}
}
.p-an-philosophy__list {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1.875rem;
margin-top: 2.875rem;
}
@media screen and (max-width: 767px) {
.p-an-philosophy__list {
grid-template-columns: 1fr;
gap: 1.25rem;
}
}
.p-an-philosophy__item {
position: relative;
display: flex;
flex-direction: column;
min-height: 18.0625rem;
padding: 1.5625rem 1.875rem 2rem 3.25rem;
background-color: var(--color-white);
border-radius: 0.625rem;
}
@media screen and (min-width: 768px) and (max-width: 1250px) {
.p-an-philosophy__item {
padding-inline: 2.5rem 0.75rem;
}
}
@media screen and (max-width: 767px) {
.p-an-philosophy__item {
min-height: 0;
padding: 1.75rem 1.5rem 1.75rem 2.875rem;
}
}
.p-an-philosophy__num {
position: absolute;
top: 1.375rem;
left: 1.3125rem;
font-family: var(--en-font-family);
font-size: max(0.625rem, 10px);
font-weight: 400;
letter-spacing: 0.1em;
color: var(--color-main);
writing-mode: vertical-rl;
}
.p-an-philosophy__title {
display: flex;
flex-grow: 1;
align-items: center;
justify-content: center;
margin-top: 0;
font-size: max(1.375rem, 10px);
font-weight: 500;
line-height: 1.5454545455;
letter-spacing: 0.1em;
color: var(--color-black);
text-align: center;
}
@media screen and (max-width: 767px) {
.p-an-philosophy__title {
font-size: max(1.125rem, 10px);
}
}
.p-an-philosophy__text {
margin-top: 1.25rem;
line-height: 1.7142857143;
letter-spacing: 0.05em;
text-align: center;
}
@media screen and (min-width: 768px) and (max-width: 1250px) {
.p-an-philosophy__text {
letter-spacing: 0;
}
}
.p-an-policy__lead {
margin-top: 1.25rem;
text-align: center;
}
.p-an-policy__list {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 2.4375rem 0;
margin-top: 3.75rem;
}
@media screen and (max-width: 767px) {
.p-an-policy__list {
grid-template-columns: 1fr;
gap: 1.875rem;
}
}
.p-an-policy__item {
position: relative;
padding: 1.875rem 2.5rem 1.6875rem;
border-left: 2px solid var(--color-beige-line);
text-align: center;
}
@media screen and (max-width: 767px) {
.p-an-policy__item {
padding: 3.5rem 0.3125rem 1.5rem;
border-left: none;
}
}
.p-an-policy__item:nth-child(2n),
.p-an-policy__item:last-child {
border-right: 2px solid var(--color-beige-line);
}
@media screen and (max-width: 767px) {
.p-an-policy__item:nth-child(2n),
.p-an-policy__item:last-child {
border-right: none;
}
}
.p-an-policy__item:last-child {
grid-column: 1/-1;
width: 50%;
margin-inline: auto;
}
@media screen and (max-width: 767px) {
.p-an-policy__item:last-child {
width: 100%;
}
}
.p-an-policy__num {
position: absolute;
top: 0.3125rem;
left: 50%;
transform: translateX(-50%);
font-family: var(--en-font-family);
font-size: max(5rem, 10px);
font-weight: 400;
line-height: 1;
color: var(--color-white);
white-space: nowrap;
pointer-events: none;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
@media screen and (max-width: 767px) {
.p-an-policy__num {
font-size: max(3rem, 10px);
}
}
.p-an-policy__title {
position: relative;
font-size: max(1.5rem, 10px);
font-weight: 500;
line-height: 1.5;
letter-spacing: 0.1em;
color: var(--color-main);
}
@media screen and (min-width: 768px) and (max-width: 1250px) {
.p-an-policy__title {
word-break: keep-all;
}
}
@media screen and (max-width: 767px) {
.p-an-policy__title {
font-size: max(1.125rem, 10px);
}
}
.p-an-policy__text {
margin-top: 1.875rem;
font-size: max(1rem, 10px);
font-weight: 500;
line-height: 2;
letter-spacing: 0.05em;
}
@media screen and (max-width: 767px) {
.p-an-policy__text {
font-size: max(0.875rem, 10px);
}
}
.p-an-rights__box {
display: flow-root;
max-width: 92.375rem;
margin-inline: auto;
padding: 4.625rem 2.5rem 0;
background-color: var(--color-main);
border-radius: 0.75rem;
}
@media screen and (max-width: 767px) {
.p-an-rights__box {
padding: 2.5rem 1rem 0;
}
}
.p-an-rights__title {
font-size: max(1.875rem, 10px);
font-weight: 500;
line-height: 1.5;
letter-spacing: 0.1em;
color: var(--color-white);
text-align: center;
}
@media screen and (max-width: 767px) {
.p-an-rights__title {
font-size: max(1.25rem, 10px);
}
}
.p-an-rights__list {
display: grid;
grid-template-columns: repeat(2, 1fr);
max-width: 74.875rem;
margin: 3rem auto -2.5rem;
padding-block: 2.25rem 3.1875rem;
background-color: var(--color-white);
border: 1px solid var(--color-beige-deep);
border-radius: 0.5rem;
}
@media screen and (max-width: 767px) {
.p-an-rights__list {
grid-template-columns: 1fr;
margin-bottom: -1.5rem;
padding-block: 1.5rem;
}
}
.p-an-rights__item {
position: relative;
padding-inline: 3.5625rem;
text-align: center;
}
@media screen and (max-width: 767px) {
.p-an-rights__item {
padding-block: 1.25rem;
padding-inline: 1.25rem;
}
}
.p-an-rights__item + .p-an-rights__item::before {
content: "";
position: absolute;
top: 2.25rem;
bottom: 2.25rem;
left: 0;
width: 1px;
background-color: var(--color-beige-deep);
}
@media screen and (max-width: 767px) {
.p-an-rights__item + .p-an-rights__item::before {
inset: 0 1.25rem auto;
width: auto;
height: 1px;
}
}
.p-an-rights__en {
display: block;
padding-block: 0.5625rem;
font-family: var(--en-font-family);
font-size: max(0.9375rem, 10px);
letter-spacing: 0.1em;
color: var(--color-white);
background-color: var(--color-main);
border-radius: 0.125rem;
}
.p-an-rights__item-title {
margin-top: 1rem;
font-size: max(2.5rem, 10px);
font-weight: 500;
line-height: 1.3;
letter-spacing: 0.1em;
color: var(--color-main);
}
@media screen and (max-width: 767px) {
.p-an-rights__item-title {
font-size: max(1.75rem, 10px);
}
}
.p-an-rights__item-sub {
display: block;
font-size: max(1.25rem, 10px);
font-weight: 500;
line-height: 1.3;
}
@media screen and (max-width: 767px) {
.p-an-rights__item-sub {
font-size: max(1rem, 10px);
}
}
.p-an-rights__text {
margin-top: 0.4375rem;
font-size: max(0.875rem, 10px);
line-height: 2.1428571429;
letter-spacing: 0.05em;
}
.p-an-rights__button {
width: 17.5625rem;
min-height: 3.75rem;
margin-top: 1.75rem;
white-space: nowrap;
}
.p-an-history__lead {
margin-top: 1.25rem;
text-align: center;
}
.p-an-history__list {
margin-top: 3.125rem;
}
.p-an-history__item {
position: relative;
display: grid;
grid-template-columns: 7.375rem 3.875rem 1fr;
padding-block: 1.125rem;
}
@media screen and (max-width: 767px) {
.p-an-history__item {
grid-template-columns: 5.625rem 1.875rem 1fr;
padding-block: 1.25rem;
}
}
.p-an-history__item:nth-child(1),
.p-an-history__item:nth-child(2) {
padding-bottom: 1.3125rem;
}
@media screen and (max-width: 767px) {
.p-an-history__item:nth-child(1),
.p-an-history__item:nth-child(2) {
padding-bottom: 1.25rem;
}
}
.p-an-history__item:nth-child(3) {
padding-bottom: 2.3125rem;
}
@media screen and (max-width: 767px) {
.p-an-history__item:nth-child(3) {
padding-bottom: 1.25rem;
}
}
.p-an-history__item:nth-child(4) {
padding-bottom: 4.375rem;
}
@media screen and (max-width: 767px) {
.p-an-history__item:nth-child(4) {
padding-bottom: 1.25rem;
}
}
.p-an-history__item:nth-child(5) {
padding-bottom: 4.5rem;
}
@media screen and (max-width: 767px) {
.p-an-history__item:nth-child(5) {
padding-bottom: 1.25rem;
}
}
.p-an-history__item:nth-child(6) {
padding-bottom: 4.5625rem;
}
@media screen and (max-width: 767px) {
.p-an-history__item:nth-child(6) {
padding-bottom: 1.25rem;
}
}
.p-an-history__item:has(.p-an-history__figure) {
grid-template-columns: 7.375rem 3.875rem 32.4375rem;
}
@media screen and (max-width: 767px) {
.p-an-history__item:has(.p-an-history__figure) {
grid-template-columns: 5.625rem 1.875rem 1fr;
}
}
.p-an-history__item::before {
content: "";
position: absolute;
top: 0;
bottom: 0;
left: 5.5rem;
width: 1px;
background-color: var(--color-main);
translate: 1.9375rem 0;
}
@media screen and (max-width: 767px) {
.p-an-history__item::before {
left: 5.625rem;
translate: 0.9375rem 0;
}
}
.p-an-history__item:first-child::before {
top: 2.5rem;
}
.p-an-history__item:last-child::before {
bottom: auto;
height: 2.5rem;
}
.p-an-history__item::after {
content: "";
position: absolute;
top: 2.25rem;
left: 5.5rem;
width: 0.6875rem;
height: 0.6875rem;
border-radius: 50%;
background-color: var(--color-main);
translate: 1.625rem 0;
}
@media screen and (max-width: 767px) {
.p-an-history__item::after {
top: 1.625rem;
left: 5.625rem;
width: 0.5625rem;
height: 0.5625rem;
translate: 0.6875rem 0;
}
}
.p-an-history__body {
display: flex;
flex-wrap: wrap;
align-items: center;
-moz-column-gap: 0.75rem;
column-gap: 0.75rem;
row-gap: 0.5625rem;
grid-column: 3;
}
.p-an-history__figure {
position: absolute;
top: 1.1875rem;
right: 0;
width: 31.25rem;
}
@media screen and (min-width: 768px) and (max-width: 1250px) {
.p-an-history__figure {
width: min(31.25rem, 100% - 44.9375rem);
}
}
@media screen and (max-width: 767px) {
.p-an-history__figure {
position: relative;
z-index: 1;
grid-column: 1/-1;
width: 100%;
max-width: 31.25rem;
margin-top: 1rem;
}
}
.p-an-history__figure img {
width: 100%;
height: auto;
aspect-ratio: 500/300;
-o-object-fit: cover;
object-fit: cover;
border-radius: 0.25rem;
}
.p-an-history__year {
font-family: var(--en-font-family);
font-size: max(1.875rem, 10px);
font-weight: 400;
line-height: 1.1666666667;
color: var(--color-black);
}
.p-an-history__wareki {
font-size: max(0.75rem, 10px);
font-weight: 500;
line-height: 2;
letter-spacing: 0.05em;
}
.p-an-history__badge {
display: inline-block;
padding: 0.25rem 0.625rem;
background-color: var(--color-main);
font-size: max(0.875rem, 10px);
font-weight: 700;
line-height: 1.5;
letter-spacing: 0.1em;
color: var(--color-white);
text-align: center;
}
.p-an-history__break {
flex-basis: 100%;
height: 0;
}
.p-an-history__item:nth-child(5) > .p-an-history__body > .p-an-history__badge,
.p-an-history__item:nth-child(6) > .p-an-history__body > .p-an-history__badge {
min-width: 7.4375rem;
}
.p-an-history__item:nth-child(7) > .p-an-history__body {
align-items: flex-start;
}
.p-an-history__title {
font-size: max(1.5rem, 10px);
font-weight: 500;
line-height: 1.25;
letter-spacing: 0.1em;
color: var(--color-main);
}
@media screen and (max-width: 767px) {
.p-an-history__title {
font-size: max(1.125rem, 10px);
}
}
.p-an-history__text {
width: 100%;
font-size: max(0.875rem, 10px);
font-weight: 500;
line-height: 1.7142857143;
letter-spacing: 0.05em;
}
.p-an-related__list {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 1.375rem;
margin-top: 2.9375rem;
}
@media screen and (max-width: 767px) {
.p-an-related__list {
grid-template-columns: 1fr;
gap: 1rem;
}
}
.p-an-related__link {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1.25rem;
min-height: 9.25rem;
padding: 1.875rem 1.875rem 1.875rem 2.5rem;
background-color: var(--color-white);
border-radius: 0.25rem;
box-shadow: var(--shadow-card);
text-decoration: none;
transition: var(--transition-hover);
}
@media screen and (max-width: 767px) {
.p-an-related__link {
min-height: 0;
padding: 1.5rem;
}
}
.p-an-related__body {
display: block;
}
.p-an-related__title {
display: block;
font-size: max(1.25rem, 10px);
font-weight: 500;
line-height: 1.5;
letter-spacing: 0.1em;
color: var(--color-main);
}
@media screen and (max-width: 767px) {
.p-an-related__title {
font-size: max(1.0625rem, 10px);
}
}
.p-an-related__text {
display: block;
margin-top: 0.5625rem;
font-size: max(0.875rem, 10px);
line-height: 1.7142857143;
letter-spacing: 0.05em;
color: var(--color-black);
}
@media (any-hover: hover) {
.p-an-related__link:hover {
box-shadow: var(--shadow-card-hover);
translate: 0 -0.25rem;
}
.p-an-related__link:hover .c-icon--arrow {
translate: 0 0;
}
}
.p-block__content {
max-width: 62.5rem;
margin-inline: auto;
}
.p-block__content > * + * {
margin-top: 1.5rem;
}
@media screen and (max-width: 767px) {
.p-block__content > * + * {
margin-top: 1rem;
}
}
.p-block__content h2 {
margin-top: 5rem;
font-size: max(1.875rem, 10px);
font-weight: 500;
line-height: 1.5;
letter-spacing: 0.1em;
color: var(--color-main);
text-align: center;
}
@media screen and (max-width: 767px) {
.p-block__content h2 {
margin-top: 3rem;
font-size: max(1.375rem, 10px);
}
}
.p-block__content > h2:first-child {
margin-top: 0;
}
.p-block__content h3 {
position: relative;
margin-top: 3rem;
padding: 1rem 1.625rem;
border-radius: 0.25rem;
background-color: var(--color-beige-band);
font-size: max(1.125rem, 10px);
font-weight: 500;
line-height: 1.5;
letter-spacing: 0.05em;
color: var(--color-black);
}
@media screen and (max-width: 767px) {
.p-block__content h3 {
margin-top: 2rem;
padding: 0.75rem 1.25rem;
font-size: max(1rem, 10px);
}
}
.p-block__content h3::before {
content: "";
position: absolute;
top: 50%;
left: 0.6875rem;
width: 0.1875rem;
height: 2.4375rem;
background-color: var(--color-main);
transform: translateY(-50%);
}
@media screen and (max-width: 767px) {
.p-block__content h3::before {
left: 0.5rem;
height: 1.75rem;
}
}
.p-block__content h4 {
margin-top: 2rem;
font-size: max(1rem, 10px);
font-weight: 700;
line-height: 1.8;
letter-spacing: 0.05em;
color: var(--color-main);
}
@media screen and (max-width: 767px) {
.p-block__content h4 {
margin-top: 1.5rem;
font-size: max(0.9375rem, 10px);
}
}
.p-block__content p {
font-size: max(0.875rem, 10px);
font-weight: 500;
line-height: 1.714;
letter-spacing: 0.05em;
color: var(--color-black);
}
.p-block__content a:not(.wp-block-button__link) {
color: var(--color-black);
text-decoration: underline;
text-underline-offset: 0.1875rem;
}
.p-block__content a:not(.wp-block-button__link):hover {
color: var(--color-accent);
}
.p-block__content ul,
.p-block__content ol {
padding-left: 0;
list-style: none;
}
.p-block__content li {
position: relative;
padding-left: 1rem;
font-size: max(0.875rem, 10px);
font-weight: 500;
line-height: 1.8571428571;
letter-spacing: 0.05em;
}
@media screen and (max-width: 767px) {
.p-block__content li {
padding-left: 0.875rem;
font-size: max(0.8125rem, 10px);
}
}
.p-block__content li + li {
margin-top: 0.5rem;
}
.p-block__content ul > li::before {
content: "・";
position: absolute;
top: 0;
left: 0;
color: var(--color-main);
}
.p-block__content ol {
counter-reset: block-ol;
}
.p-block__content ol > li {
padding-left: 1.75rem;
counter-increment: block-ol;
}
.p-block__content ol > li::before {
content: counter(block-ol) ".";
position: absolute;
top: 0;
left: 0;
color: var(--color-main);
font-weight: 700;
}
.p-block__content .wp-block-table {
overflow-x: auto;
}
.p-block__content .wp-block-table table {
width: 100%;
min-width: 35rem;
border-collapse: collapse;
background-color: var(--color-white);
}
.p-block__content .wp-block-table thead,
.p-block__content .wp-block-table tfoot {
border: 0;
}
.p-block__content .wp-block-table th,
.p-block__content .wp-block-table td {
padding: 1.125rem 1.5rem;
border: 1px solid var(--color-beige-deep);
font-size: max(0.875rem, 10px);
font-weight: 500;
line-height: 1.8571428571;
letter-spacing: 0.05em;
text-align: left;
vertical-align: middle;
}
@media screen and (max-width: 767px) {
.p-block__content .wp-block-table th,
.p-block__content .wp-block-table td {
padding: 0.75rem 1rem;
font-size: max(0.8125rem, 10px);
}
}
.p-block__content .wp-block-table th {
width: 17.5rem;
background-color: var(--color-main);
color: var(--color-white);
font-weight: 700;
}
@media screen and (max-width: 767px) {
.p-block__content .wp-block-table th {
width: 8.75rem;
}
}
.p-block__content .wp-block-table thead th {
text-align: center;
}
.p-block__content figure img {
width: 100%;
height: auto;
border-radius: 0.25rem;
}
.p-block__content .wp-block-image figcaption {
margin-top: 0.5rem;
font-size: max(0.75rem, 10px);
letter-spacing: 0.05em;
text-align: center;
}
.p-block__content .wp-block-table figcaption {
margin-top: 0.5rem;
font-size: max(0.75rem, 10px);
letter-spacing: 0.05em;
text-align: right;
}
.p-block__content .wp-block-buttons {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 1.25rem;
margin-top: 3rem;
}
@media screen and (max-width: 767px) {
.p-block__content .wp-block-buttons {
gap: 0.75rem;
margin-top: 2rem;
}
}
.p-block__content .wp-block-button__link {
display: inline-flex;
align-items: center;
justify-content: center;
width: 17.625rem;
max-width: 100%;
min-height: 3.75rem;
padding-inline: 1.875rem;
border-radius: 1.875rem;
background-color: var(--color-accent);
color: var(--color-white);
font-size: max(1rem, 10px);
font-weight: 700;
letter-spacing: 0.05em;
text-align: center;
text-decoration: none;
}
@media screen and (max-width: 767px) {
.p-block__content .wp-block-button__link {
min-height: 3.25rem;
font-size: max(0.875rem, 10px);
}
}
@media (any-hover: hover) {
.p-block__content .wp-block-button__link:hover {
background-color: var(--color-white);
color: var(--color-accent);
box-shadow: inset 0 0 0 1px var(--color-accent);
}
}
.p-block__content .wp-block-separator {
margin-block: 4rem;
border: none;
border-top: 1px solid var(--color-beige-deep);
}
@media screen and (max-width: 767px) {
.p-block__content .wp-block-separator {
margin-block: 2.5rem;
}
}
.p-block__content .wp-block-media-text {
display: grid;
grid-template-columns: 1fr 1fr;
align-items: start;
gap: 2.5rem;
}
@media screen and (max-width: 767px) {
.p-block__content .wp-block-media-text {
grid-template-columns: 1fr;
gap: 1rem;
}
}
@media screen and (max-width: 767px) {
.p-block__content .wp-block-media-text {
grid-template-columns: 1fr !important;
}
}
.p-block__content .wp-block-media-text[style*=grid-template-columns] {
grid-template-columns: revert-layer;
}
.p-block__content .wp-block-media-text > * {
align-self: start;
}
@media screen and (max-width: 767px) {
.p-block__content .wp-block-media-text > * {
grid-column: 1 !important;
grid-row: auto !important;
}
}
.p-block__content .wp-block-media-text.has-media-on-the-right .wp-block-media-text__media {
order: 2;
}
@media screen and (max-width: 767px) {
.p-block__content .wp-block-media-text.has-media-on-the-right .wp-block-media-text__media {
order: 0;
}
}
.p-block__content .wp-block-media-text__media img {
width: 100%;
height: auto;
}
@media screen and (max-width: 767px) {
.p-block__content .wp-block-media-text > .wp-block-media-text__content {
padding-inline: 0;
}
}
.p-block__content .wp-block-media-text__content > * + * {
margin-top: 1rem;
}
.p-block__content .wp-block-media-text__content h3 {
margin-top: 0;
}
.p-block__content .wp-block-columns {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 2rem 0.75rem;
}
@media screen and (max-width: 767px) {
.p-block__content .wp-block-columns {
grid-template-columns: 1fr;
gap: 1.5rem;
}
}
.p-block__content .wp-block-columns.is-cols-1 {
display: grid;
grid-template-columns: repeat(1, 1fr);
gap: 2rem 0.75rem;
}
@media screen and (max-width: 767px) {
.p-block__content .wp-block-columns.is-cols-1 {
grid-template-columns: 1fr;
gap: 1.5rem;
}
}
.p-block__content .wp-block-columns.is-cols-2,
.p-block__content .wp-block-columns.is-style-cols-2 {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 2rem 0.75rem;
}
@media screen and (max-width: 767px) {
.p-block__content .wp-block-columns.is-cols-2,
.p-block__content .wp-block-columns.is-style-cols-2 {
grid-template-columns: 1fr;
gap: 1.5rem;
}
}
.p-block__content .wp-block-columns.is-cols-4,
.p-block__content .wp-block-columns.is-style-cols-4 {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 2rem 0.75rem;
}
@media screen and (max-width: 767px) {
.p-block__content .wp-block-columns.is-cols-4,
.p-block__content .wp-block-columns.is-style-cols-4 {
grid-template-columns: 1fr;
gap: 1.5rem;
}
}
.p-block__content .wp-block-column {
overflow: hidden;
border-radius: 0.25rem;
background-color: var(--color-white);
}
.p-block__content .wp-block-column:not(:has(> .wp-block-image)) {
padding: 0.75rem 0.875rem 0.75rem;
}
@media screen and (max-width: 767px) {
.p-block__content .wp-block-column:not(:has(> .wp-block-image)) {
padding: 0.5rem 0.5rem 0.5rem;
}
}
.p-block__content .wp-block-column > .wp-block-image {
margin: 0;
}
.p-block__content .wp-block-column img {
display: block;
}
.p-block__content .wp-block-column h3 {
margin-top: 1rem;
padding: 0 0.625rem;
border-radius: 0;
background-color: transparent;
font-size: max(1rem, 10px);
font-weight: 700;
line-height: 1.6;
color: var(--color-main);
}
@media screen and (max-width: 767px) {
.p-block__content .wp-block-column h3 {
margin-top: 0.75rem;
padding: 0 0.75rem;
font-size: max(0.875rem, 10px);
}
}
.p-block__content .wp-block-column h3::before {
content: none;
}
.p-block__content .wp-block-column p {
padding: 0 0.625rem 1rem;
text-wrap: pretty;
}
@media screen and (max-width: 767px) {
.p-block__content .wp-block-column p {
padding: 0 0.75rem 0.75rem;
}
}
.p-block__content .wp-block-column > * + p {
margin-top: 0.5rem;
}
.p-block__content .wp-block-column > * + * {
margin-top: 0.75rem;
}
.p-block__content .wp-block-column img {
width: 100%;
height: auto;
}
.p-block__content .wp-block-column > .wp-block-image img {
aspect-ratio: 4/3;
-o-object-fit: cover;
object-fit: cover;
}
.p-block__content .wp-block-column h4 {
margin-top: 1.25rem;
padding: 0 0.625rem;
border-radius: 0;
background-color: transparent;
font-size: max(1rem, 10px);
font-weight: 700;
line-height: 1.6;
color: var(--color-main);
}
@media screen and (max-width: 767px) {
.p-block__content .wp-block-column h4 {
margin-top: 1rem;
padding: 0 0.75rem;
font-size: max(0.875rem, 10px);
}
}
.p-block__content .wp-block-column ul,
.p-block__content .wp-block-column ol {
padding: 0 1rem 1.25rem;
}
@media screen and (max-width: 767px) {
.p-block__content .wp-block-column ul,
.p-block__content .wp-block-column ol {
padding: 0 0.75rem 1rem;
}
}
.p-block__content .wp-block-column:not(:has(> .wp-block-image)) > :is(ul, ol):last-child {
padding-bottom: 0;
}
.p-block__content .wp-block-column > :last-child:is(h3, h4, h5) {
padding-bottom: 1rem;
}
@media screen and (max-width: 767px) {
.p-block__content .wp-block-column > :last-child:is(h3, h4, h5) {
padding-bottom: 0.75rem;
}
}
.p-block__content :is(.is-style-numbered, .is-style-numbered-flow) {
counter-reset: numbered;
}
.p-block__content :is(.is-style-numbered, .is-style-numbered-flow) > * {
display: grid;
gap: 0;
width: 62.5rem;
max-width: 100%;
margin-inline: auto;
}
@media screen and (max-width: 767px) {
.p-block__content :is(.is-style-numbered, .is-style-numbered-flow) > * {
width: 100%;
}
}
.p-block__content :is(.is-style-numbered, .is-style-numbered-flow) h3 {
position: relative;
margin-top: 1.625rem;
padding: 2rem 2.5rem 0 5rem;
border-radius: 0.25rem 0.25rem 0 0;
background-color: var(--color-white);
text-align: center;
}
@media screen and (max-width: 767px) {
.p-block__content :is(.is-style-numbered, .is-style-numbered-flow) h3 {
padding: 1.5rem 1.25rem 0;
}
}
.p-block__content :is(.is-style-numbered, .is-style-numbered-flow) h3::before {
counter-increment: numbered;
content: counter(numbered, decimal-leading-zero);
position: absolute;
top: 1.75rem;
left: 1.25rem;
display: flex;
align-items: center;
justify-content: center;
width: 2.75rem;
height: 2.75rem;
border-radius: 50%;
background-color: var(--color-main);
font-size: max(1.125rem, 10px);
font-weight: 500;
line-height: 1;
color: var(--color-white);
}
@media screen and (max-width: 767px) {
.p-block__content :is(.is-style-numbered, .is-style-numbered-flow) h3::before {
position: static;
width: 2.25rem;
height: 2.25rem;
margin: 0 auto 0.75rem;
font-size: max(0.9375rem, 10px);
}
}
.p-block__content :is(.is-style-numbered, .is-style-numbered-flow) p {
margin-top: 0;
padding: 0.75rem 2.5rem 2rem;
border-radius: 0 0 0.25rem 0.25rem;
background-color: var(--color-white);
text-align: center;
}
@media screen and (max-width: 767px) {
.p-block__content :is(.is-style-numbered, .is-style-numbered-flow) p {
padding: 0.5rem 1.25rem 1.25rem;
}
}
.p-block__content .is-style-numbered-flow p:not(:last-child) {
position: relative;
}
.p-block__content .is-style-numbered-flow p:not(:last-child)::after {
content: "";
position: absolute;
left: 50%;
bottom: -2.125rem;
z-index: 1;
width: 4.6875rem;
height: 2.1875rem;
background-image: url(//syokashi-hp.or.jp/wp-content/themes/syokashi-hp/images/common/arrow-step.svg);
background-repeat: no-repeat;
background-size: contain;
translate: -50% 0;
}
@media screen and (max-width: 767px) {
.p-block__content .is-style-numbered-flow p:not(:last-child)::after {
bottom: -1.375rem;
width: 3rem;
height: 1.4375rem;
}
}
.p-block__content :is(.is-style-numbered, .is-style-numbered-flow) h3:nth-of-type(even),
.p-block__content :is(.is-style-numbered, .is-style-numbered-flow) h3:nth-of-type(even) + p {
background-color: var(--color-beige-band);
}
.l-sub-band .p-block__content :is(.is-style-numbered, .is-style-numbered-flow) h3:nth-of-type(even),
.l-sub-band .p-block__content :is(.is-style-numbered, .is-style-numbered-flow) h3:nth-of-type(even) + p {
background-color: var(--color-white);
}
.p-breadcrumb {
text-align: left;
}
.p-breadcrumb span,
.p-breadcrumb a {
font-size: max(0.75rem, 10px);
font-weight: 500;
line-height: 1.5;
letter-spacing: 0.1em;
color: var(--color-black);
display: inline;
}
.p-breadcrumb a {
text-decoration: none;
}
.p-breadcrumb__item + .p-breadcrumb__item::before,
.p-breadcrumb span + span::before {
content: "＞";
margin-inline: 0.75rem;
}
.p-breadcrumb span.current-item,
.p-breadcrumb__item.is-current {
color: var(--color-main);
}
@media (any-hover: hover) {
.p-breadcrumb__item a:hover {
color: var(--color-main);
}
}
.p-chiiki-lead {
background-color: var(--sub-band);
}
.p-chiiki-section-sub {
margin-top: 0.875rem;
font-size: max(0.875rem, 10px);
font-weight: 500;
line-height: 1.714;
letter-spacing: 0.05em;
color: var(--color-main);
text-align: center;
}
@media screen and (max-width: 767px) {
.p-chiiki-section-sub {
margin-top: 0.625rem;
font-size: max(0.8125rem, 10px);
}
}
@media screen and (max-width: 767px) {
.p-chiiki-lead .c-lead__title {
word-break: auto-phrase;
letter-spacing: 0.05em;
}
}
.p-chiiki-about__text {
margin-top: 1.75rem;
text-align: center;
}
@media screen and (max-width: 767px) {
.p-chiiki-about__text {
margin-top: 1.25rem;
text-align: left;
}
}
.p-chiiki-about__text + .p-chiiki-lead .c-lead__title {
letter-spacing: 0.04em;
}
@media screen and (max-width: 767px) {
.p-chiiki-about__text + .p-chiiki-lead .c-lead__title {
letter-spacing: 0.05em;
}
}
.p-chiiki-about__text {
margin-top: 1rem;
}
@media screen and (max-width: 767px) {
.p-chiiki-about__text {
margin-top: 0.75rem;
}
}
.p-chiiki-function__list {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 2rem;
margin-top: 3rem;
}
@media screen and (max-width: 767px) {
.p-chiiki-function__list {
grid-template-columns: 1fr;
gap: 1.25rem;
margin-top: 1.75rem;
}
}
.p-chiiki-function__item {
border-radius: 0.625rem;
background-color: var(--color-white);
overflow: hidden;
}
.p-chiiki-function__head {
padding: 1.5rem 2rem 1.75rem;
background-color: var(--color-main);
}
@media screen and (max-width: 767px) {
.p-chiiki-function__head {
padding: 1.125rem 1.25rem 1.25rem;
}
}
.p-chiiki-function__en {
display: inline-block;
padding: 0.25rem 0.75rem;
border-radius: 0.125rem;
background-color: var(--color-white);
font-family: var(--en-font-family);
font-size: max(0.75rem, 10px);
font-weight: 500;
line-height: 1.6;
letter-spacing: 0.1em;
color: var(--color-main);
}
.p-chiiki-function__title {
margin-top: 0.875rem;
font-size: max(1.375rem, 10px);
font-weight: 500;
line-height: 1.4;
letter-spacing: 0.1em;
color: var(--color-white);
}
@media screen and (max-width: 767px) {
.p-chiiki-function__title {
margin-top: 0.625rem;
font-size: max(1.125rem, 10px);
}
}
.p-chiiki-function__body {
padding: 1.75rem 2rem 2rem;
}
@media screen and (max-width: 767px) {
.p-chiiki-function__body {
padding: 1.25rem;
}
}
.p-chiiki-function__button {
margin-top: 1.5rem;
}
@media screen and (max-width: 767px) {
.p-chiiki-function__button {
margin-top: 1.125rem;
}
}
.p-chiiki-staff {
margin-top: 3.5rem;
padding: 2.25rem 3rem 2.5rem;
border-radius: 0.625rem;
background-color: var(--color-white);
}
@media screen and (max-width: 767px) {
.p-chiiki-staff {
margin-top: 2rem;
padding: 1.5rem 1.25rem 1.75rem;
}
}
.p-chiiki-staff__title {
font-size: max(1.25rem, 10px);
font-weight: 500;
line-height: 1.5;
letter-spacing: 0.1em;
color: var(--color-main);
}
@media screen and (max-width: 767px) {
.p-chiiki-staff__title {
font-size: max(1rem, 10px);
}
}
.p-chiiki-staff__list {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1.5rem;
margin-top: 1.75rem;
}
@media screen and (max-width: 767px) {
.p-chiiki-staff__list {
grid-template-columns: 1fr;
gap: 1rem;
margin-top: 1.25rem;
}
}
.p-chiiki-staff__item {
padding: 1.375rem 1rem 1.625rem;
border-radius: 0.625rem;
background-color: var(--color-beige);
text-align: center;
}
.p-chiiki-staff__en {
font-family: var(--en-font-family);
font-size: max(0.75rem, 10px);
font-weight: 500;
line-height: 1.6;
letter-spacing: 0.1em;
color: var(--color-main);
}
.p-chiiki-staff__name {
margin-top: 0.5rem;
font-size: max(1rem, 10px);
font-weight: 700;
line-height: 1.5;
letter-spacing: 0.05em;
color: var(--color-black);
}
.p-chiiki-staff__num {
margin-top: 0.875rem;
font-family: var(--en-font-family);
font-size: max(1.875rem, 10px);
font-weight: 500;
line-height: 1;
letter-spacing: 0.05em;
color: var(--color-main);
}
.p-chiiki-staff__unit {
margin-left: 0.25rem;
font-family: var(--base-font-family);
font-size: max(0.875rem, 10px);
font-weight: 500;
}
.p-chiiki-column {
display: grid;
grid-template-columns: 487fr 585fr;
gap: 3rem;
align-items: start;
margin-top: 3rem;
}
@media screen and (max-width: 767px) {
.p-chiiki-column {
grid-template-columns: 1fr;
gap: 1.5rem;
margin-top: 1.75rem;
}
}
.p-chiiki-column__body > *:first-child {
margin-top: 0;
}
.p-chiiki-column__figure img {
width: 100%;
height: auto;
aspect-ratio: 487/365;
-o-object-fit: cover;
object-fit: cover;
border-radius: 0.625rem;
}
.p-chiiki-column__caption {
margin-top: 0.75rem;
font-size: max(0.75rem, 10px);
font-weight: 500;
line-height: 1.8;
letter-spacing: 0.05em;
color: var(--color-black);
}
.p-chiiki-check {
display: grid;
gap: 0.625rem;
}
.p-chiiki-check__item {
position: relative;
padding-left: 1.5rem;
font-size: max(0.875rem, 10px);
font-weight: 500;
line-height: 1.8571428571;
letter-spacing: 0.05em;
}
.p-chiiki-check__item::before {
content: "";
position: absolute;
top: 0.5625rem;
left: 0;
width: 0.5rem;
height: 0.5rem;
border-radius: 0.125rem;
background-color: var(--color-main);
}
.p-chiiki-callout {
margin-top: 2rem;
padding: 1.375rem 1.75rem 1.625rem;
border-radius: 0.625rem;
background-color: var(--color-beige-band);
}
@media screen and (max-width: 767px) {
.p-chiiki-callout {
margin-top: 1.5rem;
padding: 1.125rem 1rem 1.25rem;
}
}
.p-chiiki-callout__title {
font-size: max(1rem, 10px);
font-weight: 700;
line-height: 1.6;
letter-spacing: 0.05em;
color: var(--color-main);
}
@media screen and (max-width: 767px) {
.p-chiiki-callout__title {
font-size: max(0.9375rem, 10px);
}
}
.p-chiiki-callout__text {
margin-top: 0.625rem;
}
.p-chiiki-soudan__list {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1rem;
margin-top: 2.75rem;
}
@media screen and (max-width: 767px) {
.p-chiiki-soudan__list {
grid-template-columns: 1fr;
gap: 0.875rem;
margin-top: 1.75rem;
}
}
.p-chiiki-soudan__item {
padding: 1.625rem 1.5rem 1.875rem;
border-radius: 0.625rem;
background-color: var(--color-white);
}
@media screen and (max-width: 767px) {
.p-chiiki-soudan__item {
padding: 1.25rem 1.125rem 1.375rem;
}
}
.p-chiiki-soudan__item-title {
font-size: max(1rem, 10px);
font-weight: 700;
line-height: 1.5;
letter-spacing: 0.05em;
color: var(--color-main);
}
@media screen and (max-width: 767px) {
.p-chiiki-soudan__item-title {
font-size: max(0.9375rem, 10px);
}
}
.p-chiiki-soudan__text {
margin-top: 1rem;
}
@media screen and (max-width: 767px) {
.p-chiiki-soudan__text {
margin-top: 0.75rem;
}
}
.p-chiiki-reserve {
margin-top: 3rem;
padding: 2.5rem 3rem 2.75rem;
border-radius: 0.625rem;
background-color: var(--color-white);
}
@media screen and (max-width: 767px) {
.p-chiiki-reserve {
margin-top: 2rem;
padding: 1.5rem 1.25rem 1.75rem;
}
}
.p-chiiki-reserve__title {
font-size: max(1.25rem, 10px);
font-weight: 500;
line-height: 1.5;
letter-spacing: 0.1em;
color: var(--color-main);
}
@media screen and (max-width: 767px) {
.p-chiiki-reserve__title {
font-size: max(1rem, 10px);
}
}
.p-chiiki-reserve__list {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 1rem 2rem;
margin-top: 1.5rem;
}
@media screen and (max-width: 767px) {
.p-chiiki-reserve__list {
grid-template-columns: 1fr;
gap: 0.75rem;
margin-top: 1.125rem;
}
}
.p-chiiki-reserve__item {
position: relative;
padding-left: 1.375rem;
font-size: max(0.875rem, 10px);
font-weight: 500;
line-height: 1.8571428571;
letter-spacing: 0.05em;
}
.p-chiiki-reserve__item::before {
content: "";
position: absolute;
top: 0.5rem;
left: 0.125rem;
width: 0.4375rem;
height: 0.4375rem;
border-right: 1px solid var(--color-main);
border-bottom: 1px solid var(--color-main);
transform: rotate(-45deg);
}
.p-chiiki-contact {
background-color: var(--color-main);
}
.p-chiiki-contact .c-section-title {
color: var(--color-white);
}
.p-chiiki-contact__lead {
margin-top: 1.5rem;
font-size: max(1.125rem, 10px);
line-height: 2;
color: var(--color-white);
text-align: center;
}
@media screen and (max-width: 767px) {
.p-chiiki-contact__lead {
margin-top: 1rem;
text-align: left;
}
}
.p-chiiki-contact__list {
display: grid;
grid-template-columns: repeat(2, 21.375rem);
justify-content: center;
gap: 1rem;
margin-top: 2.25rem;
}
@media screen and (max-width: 767px) {
.p-chiiki-contact__list {
grid-template-columns: 1fr;
gap: 0.875rem;
margin-top: 1.5rem;
}
}
.p-chiiki-contact__card {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 0.875rem;
height: 100%;
min-height: 11.1875rem;
padding: 1.5rem 1.25rem;
border-radius: 0.625rem;
background-color: var(--color-white);
text-align: center;
transition: var(--transition-hover);
}
@media screen and (max-width: 767px) {
.p-chiiki-contact__card {
min-height: 8.75rem;
padding: 1.25rem 1rem;
}
}
@media (any-hover: hover) {
a.p-chiiki-contact__card:hover {
box-shadow: var(--shadow-card-hover);
translate: 0 -0.25rem;
}
a.p-chiiki-contact__card:hover .c-icon--arrow {
translate: 0 0;
}
}
.p-chiiki-contact__label {
font-size: max(0.875rem, 10px);
font-weight: 500;
line-height: 1.5;
letter-spacing: 0.1em;
color: var(--color-main);
}
.p-chiiki-contact__tel {
font-family: var(--en-font-family);
font-size: max(1.875rem, 10px);
font-weight: 500;
line-height: 1.2;
letter-spacing: 0.05em;
color: var(--color-black);
}
@media screen and (max-width: 767px) {
.p-chiiki-contact__tel {
font-size: max(1.625rem, 10px);
}
}
.p-chiiki-contact__time {
font-size: max(1rem, 10px);
font-weight: 500;
line-height: 1.8;
letter-spacing: 0.05em;
color: var(--color-black);
}
@media screen and (max-width: 767px) {
.p-chiiki-contact__time {
font-size: max(0.9375rem, 10px);
}
}
.page-construction {
--sub-band: var(--color-beige-band);
}
.p-construction-hero__figure {
margin: 0;
}
.p-construction-intro {
padding-top: 2.5rem;
background-color: var(--sub-band);
}
.p-construction-hero__figure img {
display: block;
width: 100%;
height: 34.375rem;
-o-object-fit: cover;
object-fit: cover;
-o-object-position: center 60%;
object-position: center 60%;
}
@media screen and (max-width: 767px) {
.p-construction-hero__figure img {
height: 15rem;
}
}
.p-construction-hero__catch {
margin-top: 2.5rem;
font-size: max(1.875rem, 10px);
font-weight: 500;
line-height: 1.5;
letter-spacing: 0.1em;
color: var(--color-main);
text-align: center;
}
@media screen and (max-width: 767px) {
.p-construction-hero__catch {
margin-top: 1.5rem;
font-size: max(1.25rem, 10px);
}
}
.p-construction-about__body {
margin-top: 3.5rem;
}
@media screen and (max-width: 767px) {
.p-construction-about__body {
margin-top: 1.75rem;
}
}
.p-construction-about__text {
text-align: center;
}
@media screen and (max-width: 767px) {
.p-construction-about__text {
text-align: left;
}
}
.p-construction-function__list {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1.5rem;
margin-top: 3.5rem;
}
@media screen and (max-width: 767px) {
.p-construction-function__list {
grid-template-columns: repeat(2, 1fr);
gap: 1rem;
margin-top: 1.75rem;
}
}
.p-construction-function__item {
overflow: hidden;
border-radius: 0.25rem;
background-color: var(--color-white);
}
.p-construction-function__figure {
margin: 0;
}
.p-construction-function__figure img {
display: block;
width: 100%;
height: auto;
aspect-ratio: 242/182;
-o-object-fit: cover;
object-fit: cover;
}
.p-construction-function__body {
padding: 1rem;
}
@media screen and (max-width: 767px) {
.p-construction-function__body {
padding: 0.75rem;
}
}
.p-construction-function__title {
font-size: max(1rem, 10px);
font-weight: 700;
line-height: 1.6;
letter-spacing: 0.05em;
color: var(--color-main);
}
@media screen and (max-width: 767px) {
.p-construction-function__title {
font-size: max(0.875rem, 10px);
}
}
.p-construction-function__text {
margin-top: 0.5rem;
font-size: max(0.875rem, 10px);
font-weight: 500;
line-height: 1.714;
letter-spacing: 0.05em;
}
@media screen and (max-width: 767px) {
.p-construction-function__text {
font-size: max(0.75rem, 10px);
}
}
.p-construction-feature__list {
margin-top: 3.5rem;
}
@media screen and (max-width: 767px) {
.p-construction-feature__list {
margin-top: 1.75rem;
}
}
.p-construction-feature__item {
display: grid;
grid-template-columns: 30.625rem 1fr;
align-items: center;
gap: 3.75rem;
padding-block: 1.875rem;
}
@media screen and (max-width: 767px) {
.p-construction-feature__item {
grid-template-columns: 1fr;
gap: 1.25rem;
padding-block: 2rem;
}
}
.p-construction-feature__item:nth-child(even) {
grid-template-columns: 1fr 30.625rem;
}
@media screen and (max-width: 767px) {
.p-construction-feature__item:nth-child(even) {
grid-template-columns: 1fr;
}
}
.p-construction-feature__item:nth-child(even) .p-construction-feature__figure {
order: 2;
}
@media screen and (max-width: 767px) {
.p-construction-feature__item:nth-child(even) .p-construction-feature__figure {
order: 0;
}
}
.p-construction-feature__figure {
margin: 0;
}
.p-construction-feature__figure img {
display: block;
width: 100%;
height: auto;
aspect-ratio: 490/368;
-o-object-fit: cover;
object-fit: cover;
border-radius: 0.25rem;
}
.p-construction-feature__head {
position: relative;
padding-top: 1.125rem;
}
.p-construction-feature__num {
position: absolute;
top: 0;
left: 0;
font-family: var(--en-font-family);
font-size: max(5rem, 10px);
font-weight: 400;
line-height: 1;
letter-spacing: 0.05em;
color: var(--color-white);
white-space: nowrap;
pointer-events: none;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
@media screen and (max-width: 767px) {
.p-construction-feature__num {
font-size: max(3rem, 10px);
}
}
.p-construction-feature__title {
position: relative;
margin-top: 0;
font-size: max(1.5rem, 10px);
font-weight: 500;
line-height: 1.5;
letter-spacing: 0.05em;
color: var(--color-main);
}
@media screen and (max-width: 767px) {
.p-construction-feature__title {
margin-top: 0.75rem;
font-size: max(1.125rem, 10px);
}
}
.p-construction-feature__text {
margin-top: 1.25rem;
font-size: max(0.9375rem, 10px);
font-weight: 500;
line-height: 1.9;
letter-spacing: 0.05em;
}
@media screen and (max-width: 767px) {
.p-construction-feature__text {
margin-top: 0.75rem;
font-size: max(0.875rem, 10px);
}
}
.p-construction-feature__note {
margin-top: 1rem;
font-size: max(0.8125rem, 10px);
font-weight: 500;
line-height: 1.7;
letter-spacing: 0.05em;
color: var(--color-main);
}
@media screen and (max-width: 767px) {
.p-construction-feature__note {
margin-top: 0.75rem;
font-size: max(0.75rem, 10px);
}
}
.p-construction-event__gallery {
display: grid;
grid-template-columns: 37.0625rem 1fr;
align-items: start;
gap: 4rem;
margin-top: 3.5rem;
}
@media screen and (max-width: 767px) {
.p-construction-event__gallery {
grid-template-columns: 1fr;
gap: 1.25rem;
margin-top: 1.75rem;
}
}
.p-construction-event__main {
margin: 0;
}
.p-construction-event__main img {
display: block;
width: 100%;
height: auto;
aspect-ratio: 593/444;
-o-object-fit: cover;
object-fit: cover;
border-radius: 0.25rem;
}
.p-construction-event__thumbs {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 0.75rem;
}
.p-construction-event__thumb {
margin: 0;
}
.p-construction-event__thumb img {
display: block;
width: 100%;
height: auto;
aspect-ratio: 593/444;
-o-object-fit: cover;
object-fit: cover;
border-radius: 0.25rem;
}
.p-construction-event__text {
margin-top: 3.25rem;
text-align: center;
}
@media screen and (max-width: 767px) {
.p-construction-event__text {
margin-top: 1.5rem;
text-align: left;
}
}
.p-construction-evaluation__figure {
margin: 3.5rem 0 0;
}
@media screen and (max-width: 767px) {
.p-construction-evaluation__figure {
margin-top: 1.75rem;
}
}
.p-construction-evaluation__figure img {
display: block;
width: 100%;
height: auto;
-o-object-fit: cover;
object-fit: cover;
border-radius: 0.25rem;
}
.p-construction-evaluation__text {
margin-top: 2.5rem;
}
@media screen and (max-width: 767px) {
.p-construction-evaluation__text {
margin-top: 1.25rem;
}
}
.p-construction-evaluation__def {
margin-top: 1.5rem;
}
@media screen and (max-width: 767px) {
.p-construction-evaluation__def {
margin-top: 1rem;
}
}
.p-construction-type__list {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 2rem;
margin-top: 3.5rem;
}
@media screen and (max-width: 767px) {
.p-construction-type__list {
grid-template-columns: 1fr;
gap: 1.25rem;
margin-top: 1.75rem;
}
}
.p-construction-type__item {
overflow: hidden;
border-radius: 0.25rem;
background-color: var(--color-white);
}
.p-construction-type__figure {
margin: 0;
}
.p-construction-type__figure img {
display: block;
width: 100%;
height: auto;
aspect-ratio: 329/246;
-o-object-fit: cover;
object-fit: cover;
}
.p-construction-type__body {
padding: 1.75rem;
}
@media screen and (max-width: 767px) {
.p-construction-type__body {
padding: 1.25rem;
}
}
.p-construction-type__abbr {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 2.8125rem;
padding: 0.25rem 0.625rem;
border-radius: 0.125rem;
background-color: var(--color-main);
font-family: var(--en-font-family);
font-size: max(0.875rem, 10px);
font-weight: 700;
line-height: 1.5;
letter-spacing: 0.05em;
color: var(--color-white);
}
.p-construction-type__title {
margin-top: 1.125rem;
font-size: max(1.25rem, 10px);
font-weight: 500;
line-height: 1.5;
letter-spacing: 0.05em;
color: var(--color-main);
}
@media screen and (max-width: 767px) {
.p-construction-type__title {
margin-top: 0.75rem;
font-size: max(1.125rem, 10px);
}
}
.p-construction-type__text {
margin-top: 1rem;
font-size: max(0.875rem, 10px);
font-weight: 500;
line-height: 1.857;
letter-spacing: 0.05em;
}
@media screen and (max-width: 767px) {
.p-construction-type__text {
margin-top: 0.625rem;
}
}
.p-construction-content__list {
display: grid;
grid-template-columns: repeat(2, auto);
justify-content: center;
width: -moz-fit-content;
width: fit-content;
gap: 0.75rem 3.5rem;
margin-top: 3.5rem;
margin-inline: auto;
}
@media screen and (max-width: 767px) {
.p-construction-content__list {
grid-template-columns: 1fr;
width: 100%;
gap: 0.5rem;
margin-top: 1.75rem;
}
}
.p-construction-content__item {
position: relative;
padding-left: 1.1875rem;
font-size: max(0.875rem, 10px);
font-weight: 500;
line-height: 2;
letter-spacing: 0.05em;
}
.p-construction-content__item::before {
content: "";
position: absolute;
top: 0.5625rem;
left: 0;
width: 0.6875rem;
height: 0.6875rem;
border-radius: 50%;
background-color: var(--color-main);
}
.p-construction-schedule__body {
display: grid;
grid-template-columns: 32.75rem 1fr;
align-items: start;
gap: 5rem;
margin-top: 3.5rem;
}
@media screen and (max-width: 767px) {
.p-construction-schedule__body {
grid-template-columns: 1fr;
gap: 1.5rem;
margin-top: 1.75rem;
}
}
.p-construction-schedule__figure {
margin: 0;
padding: 1.875rem;
border-radius: 0.25rem;
background-color: var(--color-white);
}
@media screen and (max-width: 767px) {
.p-construction-schedule__figure {
padding: 1rem;
}
}
.p-construction-schedule__figure img {
display: block;
width: 100%;
height: auto;
-o-object-fit: contain;
object-fit: contain;
}
.p-construction-schedule__notes-title {
font-size: max(1.125rem, 10px);
font-weight: 700;
line-height: 1.5;
letter-spacing: 0.05em;
color: var(--color-main);
}
@media screen and (max-width: 767px) {
.p-construction-schedule__notes-title {
font-size: max(1rem, 10px);
}
}
.p-construction-schedule__note-list {
margin-top: 1rem;
border-top: 1px solid var(--color-beige-deep);
}
.p-construction-schedule__note {
display: grid;
grid-template-columns: 3.875rem 1fr;
gap: 0.5rem;
padding-block: 0.75rem;
border-bottom: 1px solid var(--color-beige-deep);
}
@media screen and (max-width: 767px) {
.p-construction-schedule__note {
grid-template-columns: 2.75rem 1fr;
padding-block: 0.625rem;
}
}
.p-construction-schedule__note-no {
font-size: max(0.875rem, 10px);
font-weight: 700;
line-height: 1.5;
letter-spacing: 0.05em;
color: var(--color-main);
}
@media screen and (max-width: 767px) {
.p-construction-schedule__note-no {
font-size: max(0.8125rem, 10px);
}
}
.p-construction-schedule__note-text {
font-size: max(0.875rem, 10px);
font-weight: 500;
line-height: 1.714;
letter-spacing: 0.05em;
}
@media screen and (max-width: 767px) {
.p-construction-schedule__note-text {
font-size: max(0.8125rem, 10px);
}
}
.p-construction-flow__figure {
margin: 3.5rem auto 0;
max-width: 64.375rem;
}
@media screen and (max-width: 767px) {
.p-construction-flow__figure {
margin-top: 1.75rem;
}
}
.p-construction-flow__figure img {
display: block;
width: 100%;
height: auto;
-o-object-fit: contain;
object-fit: contain;
}
.p-construction-disease__scroll {
overflow-x: auto;
margin-top: 3.5rem;
}
@media screen and (max-width: 767px) {
.p-construction-disease__scroll {
margin-top: 1.75rem;
}
}
.p-construction-disease__table thead th {
background-color: var(--color-beige-band);
color: var(--color-main);
}
.p-construction-disease__table thead th:first-child,
.p-construction-disease__table tbody td:first-child {
width: 3.75rem;
padding-inline: 0.5rem;
white-space: nowrap;
text-align: center;
}
.p-construction-disease__table thead th:last-child {
width: 10rem;
}
.p-construction-disease__name {
text-align: left;
}
.p-construction-disease__note {
display: block;
margin-top: 0.25rem;
font-size: max(0.75rem, 10px);
line-height: 1.6;
}
.p-construction-performance__text {
margin-top: 2.5rem;
text-align: center;
}
@media screen and (max-width: 767px) {
.p-construction-performance__text {
margin-top: 1.25rem;
text-align: left;
}
}
.p-construction-performance__button-wrap {
display: flex;
justify-content: center;
margin-top: 2.25rem;
}
@media screen and (max-width: 767px) {
.p-construction-performance__button-wrap {
margin-top: 1.5rem;
}
}
.p-construction-faq__list {
display: flex;
flex-direction: column;
gap: 1rem;
margin-top: 3.5rem;
}
@media screen and (max-width: 767px) {
.p-construction-faq__list {
gap: 0.75rem;
margin-top: 1.75rem;
}
}
.p-construction-faq__item {
border: none;
border-radius: 0.25rem;
background-color: var(--color-white);
box-shadow: var(--shadow-card);
}
.p-construction-faq__question {
display: flex;
align-items: flex-start;
gap: 1rem;
padding: 1.5rem 4.375rem 1.5rem 1.875rem;
}
@media screen and (max-width: 767px) {
.p-construction-faq__question {
gap: 0.75rem;
padding: 1rem 2.875rem 1rem 1rem;
}
}
.p-construction-faq__question::before,
.p-construction-faq__question::after {
right: 1.875rem;
}
@media screen and (max-width: 767px) {
.p-construction-faq__question::before,
.p-construction-faq__question::after {
right: 1rem;
}
}
.p-construction-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-size: max(1.125rem, 10px);
font-weight: 500;
line-height: 1;
color: var(--color-white);
}
@media screen and (max-width: 767px) {
.p-construction-faq__mark {
width: 1.75rem;
height: 1.75rem;
font-size: max(0.9375rem, 10px);
}
}
.p-construction-faq__mark--answer {
background-color: var(--color-beige-deep);
color: var(--color-main);
}
.p-construction-faq__question-text {
padding-top: 0.25rem;
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-construction-faq__question-text {
padding-top: 0.125rem;
font-size: max(0.9375rem, 10px);
line-height: 1.6;
}
}
.p-construction-faq__answer {
display: flex;
align-items: flex-start;
gap: 1rem;
padding: 0 1.875rem 1.75rem;
}
@media screen and (max-width: 767px) {
.p-construction-faq__answer {
gap: 0.75rem;
padding: 0 1rem 1.25rem;
}
}
.p-construction-faq__answer-text {
font-size: max(0.9375rem, 10px);
line-height: 2;
letter-spacing: 0.1em;
}
@media screen and (max-width: 767px) {
.p-construction-faq__answer-text {
font-size: max(0.875rem, 10px);
line-height: 1.8;
}
}
.p-construction-transfer__box {
margin-top: 3.5rem;
padding: 3.125rem 3.75rem;
border-radius: 0.625rem;
background-color: var(--color-main);
}
@media screen and (min-width: 768px) and (max-width: 1250px) {
.p-construction-transfer__box {
padding-inline: 1.5rem;
}
}
@media screen and (max-width: 767px) {
.p-construction-transfer__box {
margin-top: 1.75rem;
padding: 1.75rem 1.25rem;
}
}
.p-construction-transfer__box .p-construction-transfer__text {
font-size: max(1.125rem, 10px);
line-height: 2;
color: var(--color-white);
text-align: center;
}
@media screen and (max-width: 767px) {
.p-construction-transfer__box .p-construction-transfer__text {
font-size: max(0.9375rem, 10px);
text-align: left;
}
}
.p-construction-transfer__title {
margin-top: 2rem;
font-size: max(1.375rem, 10px);
font-weight: 500;
line-height: 1.5;
letter-spacing: 0.05em;
color: var(--color-white);
text-align: center;
}
@media screen and (max-width: 767px) {
.p-construction-transfer__title {
margin-top: 1.25rem;
font-size: max(1.125rem, 10px);
}
}
.p-construction-transfer__list {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 1.25rem;
margin-top: 1.5rem;
}
@media screen and (max-width: 767px) {
.p-construction-transfer__list {
grid-template-columns: 1fr;
gap: 1rem;
margin-top: 1rem;
}
}
.p-construction-transfer__item {
display: flex;
flex-direction: column;
align-items: center;
height: 100%;
padding: 1.875rem 1.25rem;
border-radius: 0.625rem;
background-color: var(--color-white);
text-align: center;
}
.p-construction-transfer__label {
font-family: var(--en-font-family);
font-size: max(1rem, 10px);
font-weight: 500;
line-height: 1.5;
letter-spacing: 0.05em;
color: var(--color-main);
}
.p-construction-transfer__tel {
margin-top: 0.375rem;
font-family: var(--en-font-family);
font-size: max(2.125rem, 10px);
font-weight: 500;
line-height: 1.3;
letter-spacing: 0.02em;
color: var(--color-main);
}
@media screen and (max-width: 767px) {
.p-construction-transfer__tel {
font-size: max(1.75rem, 10px);
}
}
.p-construction-mvv__figure {
margin: 2.5rem 0 0;
}
@media screen and (max-width: 767px) {
.p-construction-mvv__figure {
margin-top: 1.5rem;
}
}
.p-construction-mvv__figure img {
display: block;
width: 100%;
height: auto;
}
.p-construction-evaluation__figures {
display: grid;
grid-template-columns: 605fr 695fr;
gap: 1.25rem;
align-items: start;
margin-top: 2.5rem;
}
@media screen and (max-width: 767px) {
.p-construction-evaluation__figures {
grid-template-columns: 1fr;
gap: 1rem;
margin-top: 1.5rem;
}
}
.p-construction-evaluation__figures .p-construction-evaluation__figure img {
display: block;
width: 100%;
height: 100%;
-o-object-fit: contain;
object-fit: contain;
}
.p-construction-evaluation__figures .p-construction-evaluation__figure {
aspect-ratio: 605/342;
}
.p-construction-evaluation__figures .p-construction-evaluation__figure:last-child {
aspect-ratio: 695/342;
}
.p-construction-therapist {
display: grid;
grid-template-columns: 17.5rem 1fr;
gap: 2.5rem;
align-items: center;
max-width: 57.5rem;
margin: 3rem auto 0;
padding: 2.5rem 3.125rem;
border-radius: 0.625rem;
background-color: var(--sub-band);
}
@media screen and (max-width: 767px) {
.p-construction-therapist {
grid-template-columns: 1fr;
gap: 1.25rem;
margin-top: 1.75rem;
padding: 1.5rem 1.25rem;
}
}
.p-construction-therapist__figure {
margin: 0;
}
@media screen and (max-width: 767px) {
.p-construction-therapist__figure {
width: 100%;
max-width: 17.5rem;
margin-inline: auto;
}
}
.p-construction-therapist__figure img {
display: block;
width: 100%;
height: auto;
aspect-ratio: 1/1;
-o-object-fit: cover;
object-fit: cover;
-o-object-position: center top;
object-position: center top;
border-radius: 0.25rem;
}
.p-construction-therapist__name {
margin-top: 0.25rem;
font-size: max(1.375rem, 10px);
font-weight: 500;
line-height: 1.5;
letter-spacing: 0.1em;
color: var(--color-main);
}
@media screen and (max-width: 767px) {
.p-construction-therapist__name {
font-size: max(1.125rem, 10px);
}
}
.p-construction-therapist__role {
font-size: max(0.875rem, 10px);
font-weight: 500;
line-height: 1.8;
letter-spacing: 0.05em;
}
.p-construction-therapist__titles-heading {
margin-top: 1.25rem;
font-size: max(0.875rem, 10px);
font-weight: 700;
line-height: 1.8;
letter-spacing: 0.05em;
color: var(--color-main);
}
.p-construction-therapist__titles {
margin-top: 0.25rem;
}
.p-construction-therapist__title {
position: relative;
padding-left: 1.1875rem;
font-size: max(0.875rem, 10px);
font-weight: 500;
line-height: 2;
letter-spacing: 0.05em;
}
.p-construction-therapist__title::before {
content: "";
position: absolute;
top: 0.8125rem;
left: 0;
width: 0.75rem;
height: 1px;
background-color: var(--color-main);
}
.p-construction-therapist__schedule {
margin-top: 0.5rem;
font-size: max(0.875rem, 10px);
font-weight: 500;
letter-spacing: 0.05em;
}
.p-construction-function,
.p-construction-type,
.p-construction-schedule,
.p-construction-performance {
padding-block: 6.25rem;
background-color: var(--sub-band);
}
@media screen and (max-width: 767px) {
.p-construction-function,
.p-construction-type,
.p-construction-schedule,
.p-construction-performance {
padding-block: 3rem;
}
}
.p-construction-evaluation__link,
.p-construction-schedule__link {
position: relative;
display: block;
cursor: zoom-in;
transition: var(--transition-hover);
}
@media (any-hover: hover) {
.p-construction-evaluation__link:hover,
.p-construction-schedule__link:hover {
opacity: 0.8;
}
}
.p-construction-evaluation__link {
height: 100%;
}
.p-construction-zoom {
position: absolute;
right: 0.75rem;
bottom: 0.75rem;
display: flex;
align-items: center;
justify-content: center;
width: 2.5rem;
height: 2.5rem;
border-radius: 50%;
background-color: var(--color-white);
box-shadow: 0 0.125rem 0.5rem rgba(0, 0, 0, 0.15);
color: var(--color-main);
pointer-events: none;
}
@media screen and (max-width: 767px) {
.p-construction-zoom {
right: 0.5rem;
bottom: 0.5rem;
width: 2.125rem;
height: 2.125rem;
}
}
.p-construction-zoom svg {
width: 50%;
height: 50%;
}
.p-construction-type__more {
display: flex;
flex-direction: column;
align-items: center;
gap: 1.5rem;
margin-top: 2.5rem;
text-align: center;
}
@media screen and (max-width: 767px) {
.p-construction-type__more {
gap: 1rem;
margin-top: 1.5rem;
}
}
.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: var(--transition-hover);
}
@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-cta {
padding-block: 3.125rem;
background-color: var(--color-beige-dark);
}
.p-cta__list {
display: grid;
grid-template-columns: repeat(3, 24.5625rem);
justify-content: center;
gap: 0.625rem;
}
@media screen and (max-width: 767px) {
.p-cta__list {
padding-inline: 1.25rem;
grid-template-columns: 1fr;
max-width: 40rem;
margin-inline: auto;
}
}
@media screen and (max-width: 767px) {
.p-cta__list {
gap: 0.875rem;
}
}
.p-cta__link {
position: relative;
display: flex;
align-items: center;
justify-content: center;
height: 11.25rem;
border-radius: 0.25rem;
overflow: hidden;
color: var(--color-white);
}
@media screen and (max-width: 767px) {
.p-cta__link {
height: 10rem;
border-radius: 0.3125rem;
}
}
.p-cta__image {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
}
.p-cta__link::after {
content: "";
position: absolute;
inset: 0;
background-color: rgba(0, 0, 0, 0.45);
}
.p-cta__body {
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
align-items: center;
margin-bottom: 0.625rem;
text-align: center;
}
.p-cta__icon {
display: flex;
}
.p-cta__icon svg {
width: 1.5rem;
height: auto;
}
.p-cta__text {
margin-top: 1.75rem;
font-size: max(1.5rem, 10px);
font-weight: 700;
line-height: 1;
letter-spacing: 0.1em;
}
@media screen and (max-width: 767px) {
.p-cta__text {
font-size: max(1.3125rem, 10px);
}
}
.p-cta__sub {
margin-top: 0.5625rem;
font-size: max(0.9375rem, 10px);
font-weight: 500;
line-height: 1;
letter-spacing: 0.1em;
}
@media screen and (max-width: 767px) {
.p-cta__sub {
font-size: max(0.8125rem, 10px);
}
}
.p-cta__arrow {
position: absolute;
top: 50%;
right: 1.875rem;
translate: 0 -50%;
z-index: 1;
display: flex;
}
@media screen and (max-width: 767px) {
.p-cta__arrow {
right: 1.625rem;
}
}
.p-cta__image {
transition: var(--transition-hover);
}
@media (any-hover: hover) {
.p-cta__link:hover .p-cta__image {
scale: 1.05;
}
}
.p-dep-list-lead {
background-color: var(--sub-band);
}
.p-dep-list-lead__text {
text-align: center;
}
@media screen and (max-width: 767px) {
.p-dep-list-lead__text {
text-align: left;
}
}
.p-dep-list-lead__text + .p-dep-list-lead__text {
margin-top: 1rem;
}
.p-dep-list-special__box {
display: grid;
grid-template-columns: 1fr 1fr;
align-items: stretch;
overflow: hidden;
border-radius: 0.625rem;
background-color: var(--color-white);
}
@media screen and (max-width: 767px) {
.p-dep-list-special__box {
grid-template-columns: 1fr;
}
}
.p-dep-list-special__figure {
margin: 0;
}
.p-dep-list-special__figure img {
display: block;
width: 100%;
height: 100%;
aspect-ratio: 560/284;
-o-object-fit: cover;
object-fit: cover;
}
.p-dep-list-special__body {
padding: 2.375rem 2.5rem 2.5rem;
}
@media screen and (max-width: 767px) {
.p-dep-list-special__body {
padding: 1.5rem 1.25rem 1.75rem;
}
}
.p-dep-list-special__label {
display: inline-block;
padding: 0.375rem 0.75rem;
border: 1px solid var(--color-main);
font-family: var(--en-font-family);
font-size: max(0.75rem, 10px);
font-weight: 500;
line-height: 1;
letter-spacing: 0.1em;
color: var(--color-main);
}
.p-dep-list-special__title {
margin-top: 1.25rem;
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-dep-list-special__title {
font-size: max(1rem, 10px);
}
}
.p-dep-list-special__text {
margin-top: 1rem;
font-size: max(0.875rem, 10px);
font-weight: 500;
line-height: 1.7142857143;
letter-spacing: 0.05em;
color: var(--color-black);
}
.p-dep-list-special__button {
margin-top: 1.5rem;
}
.p-dep-list__list {
display: grid;
gap: 1.5rem;
margin-top: 3rem;
}
@media screen and (max-width: 767px) {
.p-dep-list__list {
gap: 1rem;
margin-top: 1.75rem;
}
}
.p-dep-list__list--4 {
grid-template-columns: repeat(4, 1fr);
}
@media screen and (max-width: 767px) {
.p-dep-list__list--4 {
grid-template-columns: 1fr;
}
}
.p-dep-list__list--3 {
grid-template-columns: repeat(3, 1fr);
}
@media screen and (max-width: 767px) {
.p-dep-list__list--3 {
grid-template-columns: 1fr;
}
}
.p-dep-list__item {
display: flex;
}
.p-dep-list__link {
display: flex;
flex-direction: column;
width: 100%;
padding: 1.75rem 1.875rem 1.5rem;
border-radius: 0.25rem;
background-color: var(--color-white);
box-shadow: var(--shadow-card);
text-decoration: none;
transition: var(--transition-hover);
}
@media screen and (max-width: 767px) {
.p-dep-list__link {
padding: 1.25rem;
}
}
@media (any-hover: hover) {
.p-dep-list__link:hover {
box-shadow: var(--shadow-card-hover);
translate: 0 -0.25rem;
}
.p-dep-list__link:hover .c-icon--arrow {
translate: 0 0;
}
}
.p-dep-list__title {
padding-bottom: 0.875rem;
border-bottom: 1px solid var(--color-beige-line);
font-size: max(1.25rem, 10px);
font-weight: 500;
line-height: 1.5;
letter-spacing: 0.1em;
color: var(--color-main);
}
@media screen and (max-width: 767px) {
.p-dep-list__title {
font-size: max(1.125rem, 10px);
}
}
.p-dep-list__text {
margin-top: 1.125rem;
font-size: max(0.875rem, 10px);
font-weight: 500;
line-height: 1.7142857143;
letter-spacing: 0.05em;
color: var(--color-black);
}
.p-dep-list__label {
margin-top: 1.25rem;
font-size: max(0.75rem, 10px);
font-weight: 500;
line-height: 1.5;
letter-spacing: 0.05em;
color: var(--color-gray);
}
.p-dep-list__names {
margin-top: 0.375rem;
font-size: max(0.8125rem, 10px);
font-weight: 500;
line-height: 1.6923076923;
letter-spacing: 0.05em;
color: var(--color-black);
}
.p-dep-list__more {
display: flex;
align-items: center;
gap: 0.625rem;
margin-top: auto;
padding-top: 1.25rem;
font-size: max(0.875rem, 10px);
font-weight: 500;
line-height: 1.5;
letter-spacing: 0.05em;
color: var(--color-main);
}
.p-dep-list__more svg {
flex-shrink: 0;
width: 1.125rem;
height: 1.125rem;
}
.p-dep-symptom__lead {
margin-top: 1.5rem;
text-align: center;
}
@media screen and (max-width: 767px) {
.p-dep-symptom__lead {
text-align: left;
}
}
.p-dep-symptom__list {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1.5rem;
margin-top: 2.5rem;
}
@media screen and (max-width: 767px) {
.p-dep-symptom__list {
grid-template-columns: repeat(auto-fill, minmax(min(15.625rem, 100%), 1fr));
gap: 1rem 0.75rem;
margin-top: 1.5rem;
}
}
.p-dep-symptom__item {
overflow: hidden;
border-radius: 0.25rem;
background-color: var(--color-white);
box-shadow: var(--shadow-card);
}
.p-dep-symptom__figure {
margin: 0;
}
.p-dep-symptom__figure img {
display: block;
width: 100%;
height: auto;
aspect-ratio: 246/181;
-o-object-fit: cover;
object-fit: cover;
}
.p-dep-symptom__body {
padding: 1.25rem 1.25rem 1.5rem;
}
.p-dep-symptom__title {
padding-bottom: 0.875rem;
border-bottom: 1px solid var(--color-beige-line);
font-size: max(1rem, 10px);
font-weight: 500;
line-height: 1.5;
letter-spacing: 0.05em;
color: var(--color-black);
}
.p-dep-symptom__links {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
margin-top: 1rem;
}
.p-dep-symptom__link {
display: inline-block;
padding: 0.375rem 0.75rem;
border-radius: 0.125rem;
background-color: var(--color-badge);
font-size: max(0.75rem, 10px);
font-weight: 500;
line-height: 1.5;
letter-spacing: 0.05em;
color: var(--color-main);
text-decoration: none;
transition: var(--transition-hover);
}
@media (any-hover: hover) {
.p-dep-symptom__link:hover {
background-color: var(--color-main);
color: var(--color-white);
}
}
.p-dep-symptom__note {
margin-top: 2rem;
font-size: max(0.75rem, 10px);
font-weight: 500;
line-height: 1.8333333333;
letter-spacing: 0.05em;
color: var(--color-black);
text-align: center;
}
@media screen and (max-width: 767px) {
.p-dep-symptom__note {
margin-top: 1.25rem;
text-align: left;
}
}
.p-dep-next__list {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 1.375rem;
margin-top: 3rem;
}
@media screen and (max-width: 767px) {
.p-dep-next__list {
grid-template-columns: 1fr;
gap: 1rem;
margin-top: 1.75rem;
}
}
.p-dep-next__link {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1.25rem;
height: 100%;
min-height: 6.875rem;
padding: 1.625rem 1.875rem;
border: 1px solid var(--color-beige-line);
border-radius: 0.25rem;
background-color: var(--color-white);
text-decoration: none;
transition: var(--transition-hover);
}
@media screen and (max-width: 767px) {
.p-dep-next__link {
min-height: 5.625rem;
padding: 1.25rem;
}
}
@media (any-hover: hover) {
.p-dep-next__link:hover {
box-shadow: var(--shadow-card-hover);
translate: 0 -0.25rem;
}
.p-dep-next__link:hover .c-icon--arrow {
translate: 0 0;
}
}
.p-dep-next__body {
display: block;
}
.p-dep-next__title {
display: block;
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-dep-next__title {
font-size: max(1rem, 10px);
}
}
.p-dep-next__text {
display: block;
margin-top: 0.5rem;
font-size: max(0.8125rem, 10px);
font-weight: 500;
line-height: 1.6923076923;
letter-spacing: 0.05em;
color: var(--color-black);
}
.p-dep-next__link svg {
flex-shrink: 0;
width: 1.375rem;
height: 1.375rem;
color: var(--color-main);
}
.p-dep-head__catch {
font-size: max(1.875rem, 10px);
font-weight: 700;
line-height: 1.6;
letter-spacing: 0.1em;
text-align: center;
color: var(--color-main);
}
@media screen and (max-width: 767px) {
.p-dep-head__catch {
font-size: max(1.25rem, 10px);
text-wrap: balance;
}
}
.p-dep-about__body {
margin-top: 3.5rem;
}
@media screen and (max-width: 767px) {
.p-dep-about__body {
margin-top: 1.75rem;
}
}
.p-dep-about__text {
max-width: 56.25rem;
margin-inline: auto;
}
.p-dep-about__text > .c-text + .c-text {
margin-top: 1.5rem;
}
@media screen and (max-width: 767px) {
.p-dep-about__text > .c-text + .c-text {
margin-top: 1rem;
}
}
.p-dep-spec {
width: 62.5rem;
max-width: 100%;
margin-top: 3rem;
margin-inline: auto;
}
@media screen and (max-width: 767px) {
.p-dep-spec {
width: 100%;
margin-top: 1.75rem;
}
}
.p-dep-diseases__lead {
margin-top: 2rem;
text-align: center;
}
@media screen and (max-width: 767px) {
.p-dep-diseases__lead {
margin-top: 1.25rem;
text-align: left;
}
}
.p-dep-diseases__list {
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
gap: 1.5rem 1.25rem;
margin-top: 3.5rem;
}
@media screen and (max-width: 767px) {
.p-dep-diseases__list {
gap: 1rem;
margin-top: 1.75rem;
}
}
.p-dep-diseases__list:not(:has(> :nth-child(4))) {
justify-content: center;
}
.p-dep-diseases__list > .p-dep-diseases__item {
width: calc((100% - 3.75rem) / 4);
}
@media screen and (max-width: 767px) {
.p-dep-diseases__list > .p-dep-diseases__item {
width: 100%;
}
}
.p-dep-diseases__item {
padding: 1.75rem 1.5rem 2rem;
border-radius: 0.25rem;
background-color: var(--color-white);
box-shadow: var(--shadow-card);
}
@media screen and (max-width: 767px) {
.p-dep-diseases__item {
padding: 1.25rem 1.125rem 1.5rem;
}
}
.p-dep-diseases__name {
padding-bottom: 1rem;
border-bottom: 1px solid var(--color-beige-line);
font-size: max(1.25rem, 10px);
font-weight: 700;
line-height: 1.5;
letter-spacing: 0.05em;
color: var(--color-main);
}
@media screen and (max-width: 767px) {
.p-dep-diseases__name {
padding-bottom: 0.75rem;
font-size: max(1.125rem, 10px);
}
}
.p-dep-diseases__text {
margin-top: 1.25rem;
font-size: max(0.9375rem, 10px);
font-weight: 500;
line-height: 1.8;
letter-spacing: 0.05em;
}
@media screen and (max-width: 767px) {
.p-dep-diseases__text {
margin-top: 0.875rem;
font-size: max(0.875rem, 10px);
}
}
.p-dep-diseases__label {
margin-top: 1.5rem;
padding-bottom: 0.625rem;
border-bottom: 1px solid var(--color-beige-line);
font-size: max(0.8125rem, 10px);
font-weight: 700;
letter-spacing: 0.05em;
color: var(--color-main);
}
@media screen and (max-width: 767px) {
.p-dep-diseases__label {
margin-top: 1.125rem;
}
}
.p-dep-diseases__symptoms {
margin-top: 0.875rem;
display: grid;
gap: 0.625rem;
}
.p-dep-diseases__symptom {
position: relative;
padding-left: 1.375rem;
font-size: max(0.875rem, 10px);
font-weight: 500;
line-height: 1.6;
letter-spacing: 0.05em;
}
@media screen and (max-width: 767px) {
.p-dep-diseases__symptom {
font-size: max(0.8125rem, 10px);
}
}
.p-dep-diseases__symptom::before {
content: "";
position: absolute;
top: 0.375rem;
left: 0;
width: 0.5rem;
height: 0.5rem;
border-right: 1px solid var(--color-main);
border-bottom: 1px solid var(--color-main);
transform: rotate(45deg);
}
.p-dep-diseases__note {
margin-top: 2rem;
font-size: max(0.875rem, 10px);
line-height: 1.8;
letter-spacing: 0.05em;
text-align: center;
}
@media screen and (max-width: 767px) {
.p-dep-diseases__note {
margin-top: 1.25rem;
font-size: max(0.8125rem, 10px);
text-align: left;
}
}
.p-dep-features__list {
display: grid;
gap: 1.625rem;
width: 62.5rem;
max-width: 100%;
margin-top: 3.5rem;
margin-inline: auto;
}
@media screen and (max-width: 767px) {
.p-dep-features__list {
width: 100%;
gap: 1.25rem;
margin-top: 1.75rem;
}
}
.p-dep-features__item {
position: relative;
padding: 2rem 2.5rem 2rem 5rem;
border-radius: 0.25rem;
background-color: var(--color-white);
text-align: center;
}
@media screen and (max-width: 767px) {
.p-dep-features__item {
padding: 1.5rem 1.25rem 1.25rem;
}
}
.p-dep-features__item:nth-child(even) {
background-color: var(--color-beige-band);
}
.p-dep-features__no {
position: absolute;
top: 1.75rem;
left: 1.25rem;
display: flex;
align-items: center;
justify-content: center;
width: 2.75rem;
height: 2.75rem;
border-radius: 50%;
background-color: var(--color-main);
font-size: max(1.125rem, 10px);
font-weight: 500;
line-height: 1;
color: var(--color-white);
}
@media screen and (max-width: 767px) {
.p-dep-features__no {
position: static;
width: 2.25rem;
height: 2.25rem;
margin: 0 auto 0.75rem;
font-size: max(0.9375rem, 10px);
}
}
.p-dep-features__title {
font-size: max(1.5rem, 10px);
font-weight: 700;
line-height: 1.5;
letter-spacing: 0.1em;
color: var(--color-main);
}
@media screen and (max-width: 767px) {
.p-dep-features__title {
font-size: max(1.125rem, 10px);
}
}
.p-dep-features__text {
margin-top: 0.75rem;
font-size: max(0.9375rem, 10px);
font-weight: 500;
line-height: 1.9;
letter-spacing: 0.05em;
}
@media screen and (max-width: 767px) {
.p-dep-features__text {
font-size: max(0.875rem, 10px);
text-align: left;
}
}
.p-dep-doctors .p-doctors__list {
margin-top: 3.5rem;
}
@media screen and (max-width: 767px) {
.p-dep-doctors .p-doctors__list {
margin-top: 1.75rem;
}
}
.p-dep-doctors__more {
display: flex;
justify-content: center;
margin-top: 3rem;
}
@media screen and (max-width: 767px) {
.p-dep-doctors__more {
margin-top: 1.75rem;
}
}
.p-dep-text__body {
display: grid;
gap: 1.5rem;
margin-top: 3.5rem;
}
@media screen and (max-width: 767px) {
.p-dep-text__body {
gap: 1rem;
margin-top: 1.75rem;
}
}
.p-dep-visit__body {
width: 100%;
max-width: 100%;
margin-top: 3.5rem;
margin-inline: auto;
padding: 2.5625rem 3.0625rem;
border: 1px solid var(--color-beige-deep);
border-radius: 0.25rem;
background-color: var(--color-white);
}
@media screen and (max-width: 767px) {
.p-dep-visit__body {
margin-top: 1.75rem;
padding: 1.5rem 1.25rem;
}
}
.p-dep-visit__lead {
font-size: max(1.25rem, 10px);
font-weight: 500;
line-height: 1.6;
letter-spacing: 0.05em;
color: var(--color-main);
}
@media screen and (max-width: 767px) {
.p-dep-visit__lead {
font-size: max(1rem, 10px);
}
}
.p-dep-visit__list {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0.5rem 2.5rem;
margin-top: 1.5rem;
}
@media screen and (max-width: 767px) {
.p-dep-visit__list {
grid-template-columns: 1fr;
gap: 0.625rem;
margin-top: 1rem;
}
}
.p-dep-visit__item {
position: relative;
padding-left: 1.375rem;
font-size: max(0.9375rem, 10px);
line-height: 2;
letter-spacing: 0.05em;
}
@media screen and (max-width: 767px) {
.p-dep-visit__item {
padding-left: 1.25rem;
font-size: max(0.875rem, 10px);
}
}
.p-dep-visit__item::before {
content: "";
position: absolute;
top: 0.5rem;
left: 0;
width: 0.5625rem;
height: 0.5625rem;
border-right: 1px solid var(--color-main);
border-bottom: 1px solid var(--color-main);
transform: rotate(45deg);
}
.p-dep-detail__body {
margin-top: 2.5rem;
}
@media screen and (max-width: 767px) {
.p-dep-detail__body {
margin-top: 1.5rem;
}
}
.p-dep-reserve {
margin-top: 6.25rem;
padding-block: 3.125rem 3.1875rem;
background-color: var(--color-main);
}
@media screen and (max-width: 767px) {
.p-dep-reserve {
margin-top: 3.5rem;
padding-block: 2.5rem;
}
}
.p-dep-reserve__inner {
display: grid;
grid-template-columns: minmax(16.25rem, max-content) minmax(0, 1fr);
align-items: center;
gap: 2rem;
}
@media screen and (max-width: 767px) {
.p-dep-reserve__inner {
grid-template-columns: 1fr;
gap: 1.5rem;
}
}
.p-dep-reserve__en {
font-family: var(--en-font-family);
font-size: max(4rem, 10px);
font-weight: 400;
line-height: 1;
letter-spacing: 0.05em;
color: var(--color-white);
}
@media screen and (max-width: 767px) {
.p-dep-reserve__en {
font-size: max(3rem, 10px);
}
}
.p-dep-reserve__lead {
margin-top: 0.625rem;
font-size: max(1.125rem, 10px);
font-weight: 500;
letter-spacing: 0.1em;
color: var(--color-white);
}
@media screen and (max-width: 767px) {
.p-dep-reserve__lead {
font-size: max(0.875rem, 10px);
}
}
.p-dep-reserve__body {
display: grid;
gap: 1.5rem;
}
.p-dep-reserve__note {
display: grid;
gap: 0.75rem;
font-size: max(0.9375rem, 10px);
line-height: 1.9;
letter-spacing: 0.05em;
color: var(--color-white);
}
@media screen and (max-width: 767px) {
.p-dep-reserve__note {
font-size: max(0.875rem, 10px);
}
}
.p-dep-reserve__list {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1rem;
}
@media screen and (max-width: 767px) {
.p-dep-reserve__list {
grid-template-columns: 1fr;
gap: 1rem;
}
}
.p-dep-reserve__list:has(> :only-child) {
grid-template-columns: 1fr;
}
.p-dep-reserve__inner:has(.p-dep-reserve__list > :only-child) {
grid-template-columns: max-content minmax(0, 30rem);
justify-content: center;
}
@media screen and (max-width: 767px) {
.p-dep-reserve__inner:has(.p-dep-reserve__list > :only-child) {
grid-template-columns: 1fr;
}
}
.p-dep-reserve__list:has(> :nth-child(3):last-child) {
grid-template-columns: repeat(3, 1fr);
}
@media screen and (max-width: 767px) {
.p-dep-reserve__list:has(> :nth-child(3):last-child) {
grid-template-columns: 1fr;
}
}
.p-dep-reserve__list:has(> :nth-child(2):last-child) {
grid-template-columns: repeat(2, 1fr);
}
@media screen and (max-width: 767px) {
.p-dep-reserve__list:has(> :nth-child(2):last-child) {
grid-template-columns: 1fr;
}
}
.p-dep-reserve__card {
display: flex;
flex-direction: column;
height: 100%;
padding: 2rem 0.75rem 1.75rem;
border-radius: 0.625rem;
background-color: var(--color-white);
text-align: center;
transition: var(--transition-hover);
}
@media screen and (max-width: 767px) {
.p-dep-reserve__card {
padding: 1.75rem 1.25rem 1.5rem;
}
}
@media (any-hover: hover) {
.p-dep-reserve__card:hover {
box-shadow: var(--shadow-card-hover);
translate: 0 -0.25rem;
}
.p-dep-reserve__card:hover .c-icon--arrow {
translate: 0 0;
}
}
.p-dep-reserve__label {
font-family: var(--en-font-family);
font-size: max(1rem, 10px);
letter-spacing: 0.05em;
color: var(--color-main);
}
.p-dep-reserve__link {
margin-top: 0.75rem;
font-size: max(1.25rem, 10px);
font-weight: 500;
line-height: 1.4;
letter-spacing: 0.1em;
color: var(--color-main);
}
@media screen and (max-width: 767px) {
.p-dep-reserve__link {
font-size: max(1.25rem, 10px);
}
}
.p-dep-reserve__tel {
margin-top: 0.375rem;
font-family: var(--en-font-family);
font-size: max(1.5rem, 10px);
letter-spacing: 0.02em;
white-space: nowrap;
color: var(--color-main);
}
@media screen and (max-width: 767px) {
.p-dep-reserve__tel {
font-size: max(1.375rem, 10px);
}
}
.p-dep-reserve__card > *:nth-last-child(2) {
margin-bottom: auto;
}
.p-dep-reserve__icon {
display: flex;
align-items: center;
justify-content: center;
width: 1.5rem;
height: 1.5rem;
margin: 1.875rem auto 0;
}
@media screen and (max-width: 767px) {
.p-dep-reserve__icon {
margin-top: 1.25rem;
}
}
.p-dep-reserve__icon svg {
width: 100%;
height: 100%;
}
.p-dep-faq__list {
display: flex;
flex-direction: column;
gap: 1rem;
margin-top: 3.5rem;
}
@media screen and (max-width: 767px) {
.p-dep-faq__list {
gap: 0.75rem;
margin-top: 1.75rem;
}
}
.p-dep-faq__item {
border: none;
border-radius: 0.25rem;
background-color: var(--color-white);
box-shadow: var(--shadow-card);
}
.p-dep-faq__question {
display: flex;
align-items: flex-start;
gap: 1rem;
padding: 1.5rem 4.375rem 1.5rem 1.875rem;
}
@media screen and (max-width: 767px) {
.p-dep-faq__question {
gap: 0.75rem;
padding: 1rem 2.875rem 1rem 1rem;
}
}
.p-dep-faq__question::before,
.p-dep-faq__question::after {
right: 1.875rem;
}
@media screen and (max-width: 767px) {
.p-dep-faq__question::before,
.p-dep-faq__question::after {
right: 1rem;
}
}
.p-dep-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-size: max(1.125rem, 10px);
font-weight: 500;
line-height: 1;
color: var(--color-white);
}
@media screen and (max-width: 767px) {
.p-dep-faq__mark {
width: 1.75rem;
height: 1.75rem;
font-size: max(0.9375rem, 10px);
}
}
.p-dep-faq__mark--answer {
background-color: var(--color-beige-deep);
color: var(--color-main);
}
.p-dep-faq__question-text {
padding-top: 0.25rem;
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-dep-faq__question-text {
padding-top: 0.125rem;
font-size: max(0.9375rem, 10px);
line-height: 1.6;
}
}
.p-dep-faq__answer {
display: flex;
align-items: flex-start;
gap: 1rem;
padding: 0 1.875rem 1.75rem;
}
@media screen and (max-width: 767px) {
.p-dep-faq__answer {
gap: 0.75rem;
padding: 0 1rem 1.25rem;
}
}
.p-dep-faq__answer-text {
font-size: max(0.9375rem, 10px);
line-height: 2;
letter-spacing: 0.1em;
}
@media screen and (max-width: 767px) {
.p-dep-faq__answer-text {
font-size: max(0.875rem, 10px);
line-height: 1.8;
}
}
.p-dep-related__title {
margin-bottom: 0;
}
.p-dep-related__list {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1.25rem;
margin-top: 2rem;
}
@media screen and (max-width: 767px) {
.p-dep-related__list {
grid-template-columns: 1fr;
gap: 0.75rem;
margin-top: 1.25rem;
}
}
.p-dep-related__link {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
min-height: 4.375rem;
padding-inline: 1.5rem 1.25rem;
border-radius: 0.25rem;
background-color: var(--color-white);
box-shadow: var(--shadow-card);
font-size: max(1rem, 10px);
font-weight: 500;
letter-spacing: 0.05em;
color: var(--color-main);
transition: var(--transition-hover);
}
@media screen and (max-width: 767px) {
.p-dep-related__link {
min-height: 3.5rem;
padding-inline: 1.125rem 0.875rem;
font-size: max(0.9375rem, 10px);
}
}
@media (hover: hover) {
.p-dep-related__link:hover {
box-shadow: var(--shadow-card-hover);
translate: 0 -0.25rem;
}
.p-dep-related__link:hover .c-icon--arrow {
translate: 0 0;
}
}
.p-dep-related__link svg {
flex-shrink: 0;
width: 1.25rem;
height: 1.25rem;
}
.p-dep-reserve__card-note {
margin-top: 0.5rem;
font-size: max(0.75rem, 10px);
font-weight: 500;
line-height: 1.6;
letter-spacing: 0.05em;
color: var(--color-black);
}
@media screen and (max-width: 767px) {
.p-dep-reserve__card-note {
font-size: max(0.6875rem, 10px);
}
}
.p-dep-features__list--single .p-dep-features__item {
padding-left: 2.5rem;
}
@media screen and (max-width: 767px) {
.p-dep-features__list--single .p-dep-features__item {
padding-left: 1.25rem;
}
}
.p-dep-reserve__panel {
padding: 2rem 2.0625rem;
border: 1px solid var(--color-beige-deep);
border-radius: 0.25rem;
background-color: var(--color-white);
}
@media screen and (max-width: 767px) {
.p-dep-reserve__panel {
padding: 1.25rem;
}
}
.p-dep-reserve__panel-title {
font-size: max(1.375rem, 10px);
font-weight: 700;
line-height: 1.5;
letter-spacing: 0.05em;
color: var(--color-main);
}
@media screen and (max-width: 767px) {
.p-dep-reserve__panel-title {
font-size: max(1.0625rem, 10px);
}
}
.p-dep-reserve__panel-text {
margin-top: 1rem;
font-size: max(0.9375rem, 10px);
font-weight: 500;
line-height: 1.7333333333;
letter-spacing: 0.05em;
}
@media screen and (max-width: 767px) {
.p-dep-reserve__panel-text {
margin-top: 0.75rem;
font-size: max(0.875rem, 10px);
}
}
.p-dep-reserve__panel-note {
margin-top: 1.5rem;
padding: 0.875rem 1rem;
border-radius: 0.25rem;
background-color: var(--color-beige-band);
font-size: max(0.8125rem, 10px);
font-weight: 500;
line-height: 1.8;
letter-spacing: 0.05em;
}
@media screen and (max-width: 767px) {
.p-dep-reserve__panel-note {
margin-top: 1rem;
font-size: max(0.75rem, 10px);
}
}
.p-dep-gallery {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1rem;
margin-top: 2.5rem;
}
@media screen and (max-width: 767px) {
.p-dep-gallery {
grid-template-columns: repeat(2, 1fr);
gap: 0.625rem;
margin-top: 1.5rem;
}
}
.p-dep-gallery__item img {
display: block;
width: 100%;
height: auto;
aspect-ratio: 4/3;
-o-object-fit: cover;
object-fit: cover;
border-radius: 0.25rem;
}
.p-dep-about__note {
margin-top: 1.25rem;
padding: 0.875rem 1.25rem;
border-radius: 0.375rem;
background-color: var(--color-white);
font-size: max(0.875rem, 10px);
font-weight: 500;
line-height: 1.8;
letter-spacing: 0.05em;
}
@media screen and (max-width: 767px) {
.p-dep-about__note {
margin-top: 1rem;
padding: 0.75rem 0.875rem;
font-size: max(0.8125rem, 10px);
}
}
.p-doc__lead > .c-text + .c-text,
.p-doc__block > .c-text + .c-text {
margin-top: 1.25rem;
}
@media screen and (max-width: 767px) {
.p-doc__lead > .c-text + .c-text,
.p-doc__block > .c-text + .c-text {
margin-top: 1rem;
}
}
.p-doc__block {
margin-top: 4rem;
}
@media screen and (max-width: 767px) {
.p-doc__block {
margin-top: 2.5rem;
}
}
.p-doc__block > .c-sub-title + * {
margin-top: 1.5rem;
}
@media screen and (max-width: 767px) {
.p-doc__block > .c-sub-title + * {
margin-top: 1rem;
}
}
.p-doc__sub-title {
margin-top: 2rem;
font-size: max(1rem, 10px);
font-weight: 700;
line-height: 1.8;
letter-spacing: 0.05em;
color: var(--color-main);
}
@media screen and (max-width: 767px) {
.p-doc__sub-title {
margin-top: 1.5rem;
font-size: max(0.9375rem, 10px);
}
}
.p-doc__list {
margin-top: 1.5rem;
}
@media screen and (max-width: 767px) {
.p-doc__list {
margin-top: 1rem;
}
}
.p-doc__item {
position: relative;
padding-left: 1rem;
font-size: max(0.875rem, 10px);
font-weight: 500;
line-height: 1.8571428571;
letter-spacing: 0.05em;
}
@media screen and (max-width: 767px) {
.p-doc__item {
padding-left: 0.875rem;
font-size: max(0.8125rem, 10px);
}
}
.p-doc__item::before {
content: "・";
position: absolute;
top: 0;
left: 0;
color: var(--color-main);
}
.p-doc__item + .p-doc__item {
margin-top: 0.5rem;
}
.p-doc__note {
margin-top: 1rem;
font-size: max(0.8125rem, 10px);
line-height: 1.8;
letter-spacing: 0.05em;
}
@media screen and (max-width: 767px) {
.p-doc__note {
font-size: max(0.75rem, 10px);
}
}
.p-doc__signature {
margin-top: 1.5rem;
font-size: max(0.875rem, 10px);
font-weight: 500;
letter-spacing: 0.05em;
text-align: right;
}
@media screen and (max-width: 767px) {
.p-doc__signature {
margin-top: 1rem;
font-size: max(0.8125rem, 10px);
}
}
.p-doc .c-def a {
color: var(--color-black);
text-decoration: underline;
text-underline-offset: 0.1875rem;
}
.p-doc__catch {
font-size: max(1.25rem, 10px);
font-weight: 500;
line-height: 1.8;
letter-spacing: 0.08em;
color: var(--color-main);
text-align: center;
}
@media screen and (max-width: 767px) {
.p-doc__catch {
font-size: max(1rem, 10px);
}
}
.p-doc__movie {
margin-top: 1.5rem;
max-width: 45rem;
}
@media screen and (max-width: 767px) {
.p-doc__movie {
margin-top: 1rem;
}
}
.p-doc__steps {
margin-top: 1.5rem;
counter-reset: doc-step;
}
@media screen and (max-width: 767px) {
.p-doc__steps {
margin-top: 1rem;
}
}
.p-doc__step {
position: relative;
padding-left: 2rem;
font-size: max(0.875rem, 10px);
font-weight: 500;
line-height: 1.8571428571;
letter-spacing: 0.05em;
counter-increment: doc-step;
}
@media screen and (max-width: 767px) {
.p-doc__step {
padding-left: 1.75rem;
font-size: max(0.8125rem, 10px);
}
}
.p-doc__step::before {
content: counter(doc-step);
position: absolute;
top: 0.1875rem;
left: 0;
display: flex;
align-items: center;
justify-content: center;
width: 1.25rem;
height: 1.25rem;
border-radius: 50%;
background-color: var(--color-main);
color: var(--color-white);
font-size: max(0.75rem, 10px);
font-weight: 700;
line-height: 1;
}
.p-doc__step + .p-doc__step {
margin-top: 0.625rem;
}
.p-doc__table-wrap {
margin-top: 1.5rem;
overflow-x: auto;
}
@media screen and (max-width: 767px) {
.p-doc__table-wrap {
margin-top: 1rem;
}
}
.p-doc__button {
margin-top: 2.5rem;
text-align: center;
}
@media screen and (max-width: 767px) {
.p-doc__button {
margin-top: 1.75rem;
}
}
.p-doc__policy + .p-doc__policy {
margin-top: 2.5rem;
}
@media screen and (max-width: 767px) {
.p-doc__policy + .p-doc__policy {
margin-top: 1.75rem;
}
}
.p-doc__map {
margin-top: 2.5rem;
}
@media screen and (max-width: 767px) {
.p-doc__map {
margin-top: 1.5rem;
}
}
.p-doc__map iframe {
display: block;
width: 100%;
height: 28.125rem;
border-radius: 0.25rem;
}
@media screen and (max-width: 767px) {
.p-doc__map iframe {
height: 17.5rem;
}
}
.p-doctor-pdf {
margin-top: 3.75rem;
text-align: center;
}
@media screen and (max-width: 767px) {
.p-doctor-pdf {
margin-top: 2.5rem;
}
}
.p-doctor-closed__list {
margin-top: 3rem;
border-bottom: 1px solid var(--color-beige-deep);
}
@media screen and (max-width: 767px) {
.p-doctor-closed__list {
margin-top: 1.75rem;
}
}
.p-doctor-closed__empty {
margin-top: 3rem;
text-align: center;
}
@media screen and (max-width: 767px) {
.p-doctor-closed__empty {
margin-top: 1.75rem;
}
}
.p-doctor-closed__item {
display: flex;
align-items: center;
padding-block: 1.1875rem;
border-top: 1px solid var(--color-beige-deep);
}
@media screen and (max-width: 767px) {
.p-doctor-closed__item {
display: grid;
grid-template-columns: 1fr;
gap: 0.375rem;
padding-block: 0.875rem;
}
}
.p-doctor-closed__date {
flex-shrink: 0;
min-width: 12.5rem;
font-family: var(--en-font-family);
font-size: max(0.875rem, 10px);
letter-spacing: 0.05em;
color: var(--color-black);
}
@media screen and (max-width: 767px) {
.p-doctor-closed__date {
min-width: 0;
font-size: max(0.75rem, 10px);
letter-spacing: 0.1em;
}
}
.p-doctor-closed__body {
padding-left: 0.875rem;
font-size: max(1rem, 10px);
font-weight: 500;
line-height: 1.5;
letter-spacing: 0.05em;
}
@media screen and (max-width: 767px) {
.p-doctor-closed__body {
padding-left: 0;
font-size: max(0.75rem, 10px);
line-height: 1.4;
letter-spacing: 0.1em;
}
}
.p-doctor-closed__note,
.p-doctor-schedule__note {
margin-top: 1.5rem;
font-size: max(0.875rem, 10px);
line-height: 1.8;
letter-spacing: 0.05em;
}
@media screen and (max-width: 767px) {
.p-doctor-closed__note,
.p-doctor-schedule__note {
margin-top: 1rem;
font-size: max(0.75rem, 10px);
}
}
.p-doctor-schedule__nav {
margin-top: 2.5rem;
}
@media screen and (max-width: 767px) {
.p-doctor-schedule__nav {
margin-top: 1.5rem;
}
}
.p-doctor-schedule__dept {
margin-top: 3.5rem;
}
@media screen and (max-width: 767px) {
.p-doctor-schedule__dept {
margin-top: 2rem;
}
}
.p-doctor-schedule__table-wrap {
margin-top: 1.5rem;
overflow-x: auto;
}
@media screen and (max-width: 767px) {
.p-doctor-schedule__table-wrap {
margin-top: 1.25rem;
margin-inline: -1.25rem;
padding-inline: 1.25rem;
}
}
.p-doctor-schedule__info {
margin-top: 1.5rem;
padding: 1.5rem 1.75rem;
background-color: var(--color-white);
border-radius: 0.25rem;
}
@media screen and (max-width: 767px) {
.p-doctor-schedule__info {
margin-top: 1rem;
padding: 1rem;
}
}
.p-doctor-schedule__info-title {
font-size: max(1rem, 10px);
font-weight: 700;
line-height: 1.5;
letter-spacing: 0.08em;
color: var(--color-main);
}
@media screen and (max-width: 767px) {
.p-doctor-schedule__info-title {
font-size: max(0.875rem, 10px);
}
}
.p-doctor-schedule__info .c-text {
margin-top: 0.5rem;
}
.p-doctors__filter {
display: flex;
flex-wrap: wrap;
gap: 0.75rem;
margin-bottom: 2.5rem;
}
@media screen and (max-width: 767px) {
.p-doctors__filter {
gap: 0.5rem;
margin-bottom: 1.5rem;
}
}
.p-doctors__filter-link {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 10rem;
min-height: 2.75rem;
padding-inline: 1.25rem;
border: 1px solid var(--color-beige-deep);
border-radius: 0.625rem;
background-color: var(--color-white);
font-size: max(0.9375rem, 10px);
font-weight: 500;
letter-spacing: 0.05em;
color: var(--color-main);
}
@media screen and (max-width: 767px) {
.p-doctors__filter-link {
min-width: 0;
min-height: 2.375rem;
padding-inline: 0.875rem;
font-size: max(0.8125rem, 10px);
}
}
.p-doctors__filter-link.is-current {
border-color: var(--color-main);
background-color: var(--color-main);
color: var(--color-white);
}
.p-doctors__list {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1.5625rem 1.25rem;
}
@media screen and (max-width: 767px) {
.p-doctors__list {
grid-template-columns: repeat(2, 1fr);
gap: 1rem 0.625rem;
margin-inline: -0.625rem;
}
}
.p-doctors__item {
display: flex;
flex-direction: column;
border-radius: 0.625rem;
background-color: var(--color-white);
box-shadow: var(--shadow-card);
overflow: hidden;
}
@media (any-hover: hover) {
.p-doctors__item figure {
overflow: hidden;
}
.p-doctors__item img {
transition: scale 0.3s ease-in-out;
}
.p-doctors__item:hover {
opacity: 1;
}
.p-doctors__item:hover img {
scale: 1.05;
}
}
.p-doctors__item:focus-visible {
opacity: 1;
}
.p-doctors__item:focus-visible img {
scale: 1.05;
}
.p-doctors__link {
display: flex;
flex-direction: column;
flex-grow: 1;
padding: 0 1.25rem 1.25rem;
}
.p-doctors__link:hover {
opacity: 1;
}
.p-doctors__item:has(.p-doctors__link:focus-visible) img {
scale: 1.05;
}
.p-doctors__image {
aspect-ratio: 1/1;
margin: 0 -1.25rem 0.875rem;
overflow: hidden;
}
.p-doctors__image img {
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
-o-object-position: center 22%;
object-position: center 22%;
}
.p-doctors__badges {
display: flex;
flex-wrap: wrap;
gap: 0.375rem;
margin-bottom: 0.625rem;
}
.p-doctors__badge {
display: inline-flex;
align-items: center;
min-height: 1.5rem;
padding-inline: 0.625rem;
border-radius: 0.75rem;
background-color: var(--color-badge);
font-size: max(0.75rem, 10px);
font-weight: 500;
letter-spacing: 0.02em;
}
.p-doctors__dep {
margin-bottom: 0.25rem;
font-size: max(0.8125rem, 10px);
font-weight: 500;
letter-spacing: 0.05em;
}
@media screen and (max-width: 767px) {
.p-doctors__dep {
font-size: max(0.75rem, 10px);
}
}
.p-doctors__name {
font-size: max(1.25rem, 10px);
font-weight: 700;
line-height: 1.5;
letter-spacing: 0.05em;
color: var(--color-main);
}
@media screen and (max-width: 767px) {
.p-doctors__name {
font-size: max(1.125rem, 10px);
}
}
.p-doctors__kana {
display: block;
font-size: max(0.8125rem, 10px);
font-weight: 500;
color: var(--color-black);
}
@media screen and (max-width: 767px) {
.p-doctors__kana {
font-size: max(0.75rem, 10px);
}
}
.p-doctors__meta {
margin-top: 0.75rem;
padding-top: 0.75rem;
border-top: 1px solid var(--color-beige-line);
font-size: max(0.75rem, 10px);
line-height: 1.7;
letter-spacing: 0.02em;
}
@media screen and (max-width: 767px) {
.p-doctors__meta {
font-size: max(0.6875rem, 10px);
}
}
.p-doctors__meta-row {
display: flex;
gap: 0.375rem;
}
.p-doctors__meta-row + .p-doctors__meta-row {
margin-top: 0.25rem;
}
.p-doctors__meta-row dt {
flex-shrink: 0;
font-weight: 500;
}
.p-doctors__meta-row dt::after {
content: "：";
}
.p-doctors__meta-row dd {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
}
.p-doctors__more-text {
font-size: max(0.8125rem, 10px);
font-weight: 500;
}
@media screen and (max-width: 767px) {
.p-doctors__more-text {
font-size: max(0.75rem, 10px);
}
}
.p-doctors__more {
display: flex;
align-items: center;
justify-content: flex-end;
margin-top: auto;
padding-top: 1rem;
}
.p-doctors__item--dep .p-doctors__more {
justify-content: flex-start;
gap: 0.5rem;
}
.p-doctors__pagenavi {
margin-top: 3rem;
}
@media screen and (max-width: 767px) {
.p-doctors__pagenavi {
margin-top: 2rem;
}
}
.p-doctor__inner {
display: grid;
grid-template-columns: minmax(0, 23.75rem) minmax(0, 1fr);
align-items: start;
gap: 2.5rem;
}
@media screen and (max-width: 767px) {
.p-doctor__inner {
grid-template-columns: 1fr;
gap: 1.25rem;
}
}
.p-doctor__image {
aspect-ratio: 380/475;
border-radius: 0.625rem;
overflow: hidden;
}
@media screen and (max-width: 767px) {
.p-doctor__image {
max-width: 17.5rem;
margin-inline: auto;
}
}
.p-doctor__image img {
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
-o-object-position: center 10%;
object-position: center 10%;
}
.p-doctor__body {
padding: 2.5rem;
border-radius: 0.625rem;
background-color: var(--color-white);
}
@media screen and (max-width: 767px) {
.p-doctor__body {
padding: 1.5rem 1.25rem;
}
}
.p-doctor__badges {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
}
.p-doctor__badge {
display: inline-flex;
align-items: center;
min-height: 1.625rem;
padding-inline: 0.75rem;
border-radius: 0.8125rem;
background-color: var(--color-badge);
font-size: max(0.8125rem, 10px);
font-weight: 500;
letter-spacing: 0.02em;
}
.p-doctor__dep {
margin-top: 1rem;
font-size: max(0.9375rem, 10px);
font-weight: 500;
letter-spacing: 0.05em;
}
@media screen and (max-width: 767px) {
.p-doctor__dep {
font-size: max(0.8125rem, 10px);
}
}
.p-doctor__name {
margin-top: 0.25rem;
font-size: max(2rem, 10px);
font-weight: 700;
line-height: 1.4;
letter-spacing: 0.05em;
color: var(--color-main);
}
@media screen and (max-width: 767px) {
.p-doctor__name {
font-size: max(1.5rem, 10px);
}
}
.p-doctor__kana {
margin-left: 1rem;
font-size: max(0.9375rem, 10px);
font-weight: 500;
color: var(--color-black);
}
@media screen and (max-width: 767px) {
.p-doctor__kana {
display: block;
margin-left: 0;
margin-top: 0.25rem;
font-size: max(0.8125rem, 10px);
}
}
.p-doctor__roman {
margin-top: 0.375rem;
font-family: var(--font-en);
font-size: max(0.875rem, 10px);
letter-spacing: 0.05em;
color: var(--color-gray);
}
.p-doctor__section {
margin-top: 2rem;
}
@media screen and (max-width: 767px) {
.p-doctor__section {
margin-top: 1.5rem;
}
}
.p-doctor__section-title {
margin-bottom: 0.75rem;
font-size: max(1.125rem, 10px);
font-weight: 700;
letter-spacing: 0.05em;
color: var(--color-main);
}
@media screen and (max-width: 767px) {
.p-doctor__section-title {
font-size: max(1rem, 10px);
}
}
.p-doctor__comment + .p-doctor__comment {
margin-top: 1rem;
}
.p-doctor__list-item {
position: relative;
padding-left: 1.125rem;
font-size: max(0.9375rem, 10px);
font-weight: 500;
line-height: 2;
letter-spacing: 0.05em;
}
@media screen and (max-width: 767px) {
.p-doctor__list-item {
font-size: max(0.875rem, 10px);
}
}
.p-doctor__list-item::before {
position: absolute;
top: 0.8125rem;
left: 0;
width: 0.375rem;
height: 0.375rem;
border-radius: 50%;
background-color: var(--color-beige-deep);
content: "";
}
.p-doctor__back {
display: flex;
justify-content: center;
margin-top: 3.5rem;
}
@media screen and (max-width: 767px) {
.p-doctor__back {
margin-top: 2.25rem;
}
}
@media (any-hover: hover) {
.p-doctors__filter-link:not(.is-current):hover {
background-color: var(--color-beige-dark);
}
}
.p-footer {
padding-top: 3.3125rem;
}
@media screen and (max-width: 767px) {
.p-footer {
padding-top: 2.75rem;
}
}
.p-footer__nav {
display: grid;
grid-template-columns: repeat(6, auto);
justify-content: space-between;
gap: 1.875rem;
}
@media screen and (min-width: 768px) and (max-width: 1024px) {
.p-footer__nav {
grid-template-columns: repeat(3, auto);
justify-content: space-around;
row-gap: 2.5rem;
}
}
@media screen and (max-width: 767px) {
.p-footer__nav {
grid-template-columns: 11.875rem auto;
justify-content: center;
align-items: start;
-moz-column-gap: 0.875rem;
column-gap: 0.875rem;
row-gap: 1.875rem;
}
}
.p-footer__column-group {
display: contents;
}
@media screen and (max-width: 767px) {
.p-footer__column-group {
display: block;
}
}
.p-footer__group + .p-footer__group {
margin-top: 1.5625rem;
}
.p-footer__group-title a {
padding-bottom: 0.25rem;
background-image: linear-gradient(currentColor, currentColor);
background-repeat: no-repeat;
background-position: left bottom;
background-size: 0 1px;
transition: var(--transition-hover), background-size 0.3s ease-in-out;
}
.p-footer__group-title {
font-size: max(1rem, 10px);
font-weight: 500;
line-height: 1;
letter-spacing: 0.1em;
color: var(--color-main);
}
@media screen and (max-width: 767px) {
.p-footer__group-title {
font-size: max(0.875rem, 10px);
}
}
.p-footer__list {
margin-top: 0.4375rem;
}
@media screen and (max-width: 767px) {
.p-footer__list {
margin-top: 0.3125rem;
}
}
.p-footer__item {
font-size: max(0.875rem, 10px);
font-weight: 500;
line-height: 2.1428571429;
letter-spacing: 0.05em;
}
@media screen and (max-width: 767px) {
.p-footer__item {
font-size: max(0.75rem, 10px);
line-height: 1.8333333333;
letter-spacing: 0.05em;
}
}
.p-footer__item--note {
font-size: max(0.75rem, 10px);
line-height: 1.5;
}
@media screen and (max-width: 767px) {
.p-footer__item--note {
font-size: max(0.6875rem, 10px);
}
}
.p-footer__item-todo {
color: inherit;
}
.p-footer__bottom {
margin-top: 2.9375rem;
padding-block: 2.8125rem 2rem;
background-color: var(--color-beige-band);
}
@media screen and (max-width: 767px) {
.p-footer__bottom {
padding-block: 2.3125rem 2rem;
}
}
.p-footer__bottom-inner {
display: grid;
grid-template-columns: 1fr auto;
align-items: start;
gap: 1.875rem;
}
@media screen and (max-width: 767px) {
.p-footer__bottom-inner {
gap: 1.625rem;
grid-template-columns: 1fr;
}
}
.p-footer__profile {
display: grid;
grid-template-areas: "logo sns" "address sns";
grid-template-columns: auto auto;
justify-content: start;
align-items: end;
-moz-column-gap: 2.25rem;
column-gap: 2.25rem;
padding-top: 0.375rem;
}
@media screen and (max-width: 767px) {
.p-footer__profile {
grid-template-areas: "logo" "address" "sns";
grid-template-columns: 1fr;
row-gap: 0.5625rem;
justify-items: center;
text-align: center;
}
}
.p-footer__logo {
grid-area: logo;
}
.p-footer__address {
grid-area: address;
}
.p-footer__sns {
display: flex;
grid-area: sns;
gap: 1rem;
}
@media screen and (max-width: 767px) {
.p-footer__sns {
justify-content: center;
margin-top: 0.3125rem;
}
}
.p-footer__sns-link {
display: flex;
align-items: center;
justify-content: center;
width: 2.5rem;
height: 2.5rem;
}
.p-footer__sns-link img {
width: 100%;
height: 100%;
-o-object-fit: contain;
object-fit: contain;
}
.p-footer__group-banner {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1.25rem;
width: 29.625rem;
min-height: 7.8125rem;
padding: 1.25rem 2rem;
border-radius: 0.25rem;
background-color: var(--color-white);
box-shadow: var(--shadow-card);
transition: var(--transition-hover);
}
@media screen and (max-width: 767px) {
.p-footer__group-banner {
width: 100%;
min-height: 6.5625rem;
padding: 0.6875rem 1.0625rem;
}
}
@media (hover: hover) {
.p-footer__group-banner:hover {
box-shadow: var(--shadow-card-hover);
translate: 0 -0.25rem;
}
}
.p-footer__group-banner-label {
display: block;
font-family: var(--en-font-family);
font-size: max(0.625rem, 10px);
letter-spacing: 0.1em;
color: var(--color-main);
}
.p-footer__group-banner-title {
display: block;
margin-top: 0.375rem;
font-size: max(1.25rem, 10px);
font-weight: 500;
letter-spacing: 0.1em;
color: var(--color-main);
}
@media screen and (max-width: 767px) {
.p-footer__group-banner-title {
margin-top: 0.125rem;
}
}
.p-footer__group-banner-text {
display: block;
margin-top: 0.4375rem;
font-size: max(0.875rem, 10px);
letter-spacing: 0.05em;
}
@media screen and (max-width: 767px) {
.p-footer__group-banner-text {
margin-top: 0;
font-size: max(0.75rem, 10px);
}
}
.p-footer__group-banner-logo {
flex-shrink: 0;
width: 5rem;
height: 2.125rem;
-o-object-fit: contain;
object-fit: contain;
}
.p-footer__meta {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1.25rem;
grid-column: 1/-1;
margin-top: 0.6875rem;
}
@media screen and (max-width: 767px) {
.p-footer__meta {
flex-direction: column;
align-items: center;
gap: 1.4375rem;
margin-top: 0;
text-align: center;
}
}
.p-footer__logo img {
width: 13.8125rem;
height: auto;
}
.p-footer__address {
margin-top: 0.875rem;
font-size: max(0.875rem, 10px);
line-height: 1.7;
letter-spacing: 0.05em;
}
@media screen and (max-width: 767px) {
.p-footer__address {
margin-top: 0;
font-size: max(0.75rem, 10px);
}
}
.p-footer__policy {
display: flex;
flex-wrap: wrap;
gap: 1.25rem;
font-size: max(0.75rem, 10px);
letter-spacing: 0.05em;
}
@media screen and (max-width: 767px) {
.p-footer__policy {
order: 1;
flex-direction: column;
align-items: center;
gap: 0.5rem;
}
}
.p-footer__copyright {
display: block;
font-size: max(0.75rem, 10px);
letter-spacing: 0.05em;
color: var(--color-black);
}
@media screen and (max-width: 767px) {
.p-footer__copyright {
order: 2;
}
}
@media screen and (max-width: 767px) {
.p-footer__group-title {
letter-spacing: 0;
}
}
@media screen and (max-width: 767px) {
.p-footer__column + .p-footer__column {
margin-top: 1.125rem;
}
}
@media screen and (max-width: 767px) {
.p-footer__column-group:first-child .p-footer__column:nth-child(n+2) {
margin-top: 1.875rem;
}
}
@media screen and (max-width: 767px) {
.p-footer__policy a {
white-space: nowrap;
}
}
@media (any-hover: hover) {
.p-footer__item a:hover,
.p-footer__bottom a:hover {
color: var(--color-main);
}
.p-footer__group-title a:hover {
background-size: 100% 1px;
}
}
.p-form__message.c-text {
text-align: center;
}
.p-form__contents {
margin-top: 1.875rem;
}
.p-form__wrap {
display: flex;
align-items: center;
max-width: 62.5rem;
margin-inline: auto;
}
@media screen and (max-width: 767px) {
.p-form__wrap {
flex-direction: column;
align-items: flex-start;
}
}
.p-form__wrap.p-form__wrap--textarea {
align-items: flex-start;
}
.p-form__wrap + .p-form__wrap {
margin-top: 1.875rem;
}
.p-form__label {
max-width: 15rem;
width: 100%;
font-size: max(0.9375rem, 10px);
}
.p-form__wrap.p-form__wrap--textarea .p-form__label {
margin-top: 0.625rem;
}
.u-required {
display: inline-block;
color: var(--color-important);
margin-left: 0.625rem;
padding: 0.3125rem;
border: 1px solid var(--color-important);
font-size: max(0.75rem, 10px);
line-height: 1;
}
@media screen and (max-width: 767px) {
.p-form__input,
.p-form__select,
.p-form__radio,
.p-form__checkbox,
.p-form__textarea {
margin-top: 0.625rem;
}
}
.p-form__input,
.p-form__select,
.p-form__textarea {
flex-grow: 1;
width: 100%;
}
.p-form__submit {
margin-top: 3.75rem;
text-align: center;
}
.p-form__submit--confirm {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: 1.5rem;
}
@media screen and (max-width: 767px) {
.p-form__submit--confirm {
flex-direction: column-reverse;
gap: 1rem;
}
}
.p-form__submit--confirm input.c-button {
justify-content: center;
height: 3.75rem;
padding: 0 1.875rem;
border-radius: 1.875rem;
}
@media screen and (max-width: 767px) {
.p-form__submit--confirm input.c-button {
height: 3.125rem;
}
}
.p-form__submit--confirm input.c-button--outline {
background-color: var(--color-white);
border: 1px solid var(--color-accent);
color: var(--color-accent);
}
.p-form__input input {
padding: 0.5rem 0.9375rem;
width: 100%;
font-size: max(0.9375rem, 10px);
line-height: 1;
border-radius: 0;
border: 1px solid var(--color-gray);
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background-color: var(--color-white);
background-image: none;
}
.p-form__input input:focus {
border: 1px solid var(--color-gray);
box-shadow: none;
outline: none;
}
.p-form__textarea textarea {
padding: 0.5rem 0.9375rem;
width: 100%;
height: 9.375rem;
font-size: max(0.9375rem, 10px);
border-radius: 0;
border: 1px solid var(--color-gray);
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background-color: var(--color-white);
background-image: none;
}
.p-form__textarea textarea:focus {
border: 1px solid var(--color-gray);
box-shadow: none;
outline: none;
}
.p-form__select select {
padding: 0.71875rem 3.125rem 0.71875rem 0.9375rem;
width: 100%;
font-size: max(0.9375rem, 10px);
line-height: 1;
border-radius: 0;
border: 1px solid var(--color-gray);
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background-color: var(--color-white);
background-image: none;
cursor: pointer;
}
.p-form__select .wpcf7-form-control-wrap {
position: relative;
display: block;
}
.p-form__select .wpcf7-form-control-wrap::after {
content: "";
position: absolute;
top: 50%;
right: 1.25rem;
width: 0.5rem;
height: 0.5rem;
border-right: 2px solid var(--color-main);
border-bottom: 2px solid var(--color-main);
translate: 0 -75%;
rotate: 45deg;
pointer-events: none;
}
.p-form__select select::-ms-expand {
display: none;
}
.p-form__select select:focus {
border: 1px solid var(--color-gray);
box-shadow: none;
outline: none;
}
.p-form__radio label {
display: inline-block;
}
@media screen and (max-width: 767px) {
.p-form__radio label {
display: block;
}
}
.p-form__radio label:not(:first-of-type) {
margin-left: 1.875rem;
}
@media screen and (max-width: 767px) {
.p-form__radio label:not(:first-of-type) {
margin-top: 0.625rem;
margin-left: 0;
}
}
.p-form__radio input {
display: none;
}
.p-form__radio input + span {
padding: 0 0 0 1.5625rem;
position: relative;
display: block;
font-size: max(0.9375rem, 10px);
line-height: 1;
cursor: pointer;
}
@media screen and (max-width: 767px) {
.p-form__radio input + span {
display: inline-block;
}
}
.p-form__radio input + span::before {
content: "";
width: 0.9375rem;
height: 0.9375rem;
display: block;
position: absolute;
top: 50%;
left: 0;
transform: translateY(-50%);
background: var(--color-white);
border: 1px solid var(--color-gray);
border-radius: 50%;
}
.p-form__radio input + span::after {
content: "";
padding: 0.125rem;
width: 0.4375rem;
height: 0.4375rem;
position: absolute;
top: 50%;
left: 0.25rem;
transform: translateY(-50%);
border: 1px solid transparent;
border-radius: 50%;
background: #000;
opacity: 0;
transition: 0.3s ease-in-out;
}
.p-form__radio input:checked + span::after {
opacity: 1;
}
.p-form__checkbox label {
display: inline-block;
}
@media screen and (max-width: 767px) {
.p-form__checkbox label {
display: block;
}
}
.p-form__checkbox label:not(:first-of-type) {
margin-left: 1.25rem;
}
@media screen and (max-width: 767px) {
.p-form__checkbox label:not(:first-of-type) {
margin-top: 0.625rem;
margin-left: 0;
}
}
.p-form__checkbox input {
display: none;
}
.p-form__checkbox input + span {
cursor: pointer;
display: inline-block;
padding: 0 0 0 1.5625rem;
position: relative;
font-size: max(0.9375rem, 10px);
line-height: 1;
}
.p-form__checkbox input + span::before {
content: "";
position: absolute;
top: 50%;
left: 0;
transform: translateY(-50%);
background: var(--color-white);
border: 1px solid var(--color-gray);
display: block;
width: 0.9375rem;
height: 0.9375rem;
}
.p-form__checkbox input + span::after {
content: "";
margin-top: -0.125rem;
position: absolute;
top: 50%;
left: 0;
transform: translateY(-50%) rotate(-45deg);
display: block;
width: 0.9375rem;
height: 0.5rem;
border-bottom: 0.1875rem solid #000;
border-left: 0.1875rem solid #000;
transition: 0.3s ease-in-out;
opacity: 0;
}
.p-form__checkbox input:checked + span::after {
opacity: 1;
}
.p-contact__form-privacy {
margin-top: 1.25rem;
text-align: center;
}
.p-contact__form-checkbox-text.c-text {
font-size: max(0.9375rem, 10px);
}
@media screen and (max-width: 767px) {
.p-contact__form-checkbox-text.c-text {
max-width: 25.625rem;
margin-inline: auto;
font-size: max(0.75rem, 10px);
}
}
.p-contact__form-checkbox-text.c-text a {
text-decoration: underline;
text-decoration-color: var(--color-black);
text-underline-offset: 1px;
text-decoration-thickness: 1px;
}
.p-contact__form-privacy-check {
display: inline-flex;
align-items: center;
}
.p-contact__form-privacy-check {
margin-top: 1.25rem;
}
@media screen and (max-width: 767px) {
.p-contact__form-privacy-check {
margin-top: 0.625rem;
}
}
.p-contact__form-privacy input + span {
position: relative;
padding-left: 1.875rem;
margin-left: 1.25rem;
}
@media screen and (max-width: 767px) {
.p-contact__form-privacy input + span {
font-size: max(0.8125rem, 10px);
padding-left: 1.5625rem;
margin-left: 0.625rem;
}
}
.p-contact__form-privacy input + span::before {
content: "";
position: absolute;
top: 60%;
left: 0;
transform: translateY(-50%);
display: block;
width: 1.25rem;
height: 1.25rem;
background-color: var(--color-white);
border: 1px solid var(--color-black);
}
@media screen and (max-width: 767px) {
.p-contact__form-privacy input + span::before {
top: 55%;
}
}
.p-contact__form-privacy input + span::after {
content: "";
margin-top: -0.125rem;
position: absolute;
top: 60%;
left: 0.25rem;
transform: translateY(-50%) rotate(-45deg);
display: block;
width: 0.8125rem;
height: 0.4375rem;
border-bottom: 2px solid var(--color-black);
border-left: 2px solid var(--color-black);
transition: 0.3s ease-in-out;
opacity: 0;
}
.p-contact__form-privacy input:checked + span::after {
opacity: 1;
}
.p-contact__form-submit {
margin-top: 6.25rem;
text-align: center;
}
@media screen and (max-width: 767px) {
.p-contact__form-submit {
margin-top: 3.125rem;
}
}
.wpcf7-form:not(.invalid):not(.unaccepted) .wpcf7-not-valid-tip {
display: none !important;
}
.wpcf7-not-valid-tip {
display: block;
margin-top: 0.3125rem;
font-size: max(0.875rem, 10px);
color: var(--color-important);
}
.wpcf7-not-valid {
border-color: var(--color-important);
}
.wpcf7-response-output {
display: none;
}
.wpcf7-spinner {
display: none;
}
.js-confirm-button:disabled {
cursor: not-allowed;
opacity: 0.5;
}
.js-confirm-area .p-form__label {
display: block;
}
.p-form__admin-notice {
margin-top: 1.875rem;
font-size: max(0.875rem, 10px);
color: var(--color-important);
text-align: center;
}
.p-gai-reception__def {
width: 57.5rem;
max-width: 100%;
margin-inline: auto;
}
@media screen and (max-width: 767px) {
.p-gai-reception__def {
width: 100%;
}
}
.p-gai-reception__row {
display: grid;
grid-template-columns: 7.25rem 1fr;
gap: 1rem;
}
@media screen and (max-width: 767px) {
.p-gai-reception__row {
grid-template-columns: 1fr;
gap: 0.25rem;
}
}
.p-gai-reception__row + .p-gai-reception__row {
margin-top: 1.25rem;
}
@media screen and (max-width: 767px) {
.p-gai-reception__row + .p-gai-reception__row {
margin-top: 1rem;
}
}
.p-gai-reception__label {
font-size: max(0.875rem, 10px);
font-weight: 700;
line-height: 1.8571428571;
letter-spacing: 0.05em;
color: var(--color-main);
}
.p-gai-reception__time {
font-size: max(0.875rem, 10px);
font-weight: 500;
line-height: 1.8571428571;
letter-spacing: 0.05em;
}
.p-gai-reception__note {
margin-top: 0.5rem;
color: var(--color-main);
}
.p-gai-first__sub {
margin-top: 3.5rem;
}
@media screen and (max-width: 767px) {
.p-gai-first__sub {
margin-top: 2.25rem;
}
}
.p-gai-sheet {
margin-top: 1.75rem;
}
@media screen and (max-width: 767px) {
.p-gai-sheet {
margin-top: 1.25rem;
}
}
.p-gai-sheet__label {
margin-top: 3rem;
padding-bottom: 0.75rem;
border-bottom: 1px solid var(--color-beige-deep);
font-size: max(1.25rem, 10px);
font-weight: 500;
line-height: 1.5;
letter-spacing: 0.1em;
color: var(--color-main);
}
@media screen and (max-width: 767px) {
.p-gai-sheet__label {
margin-top: 2rem;
font-size: max(1.0625rem, 10px);
}
}
.p-gai-sheet__list {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1rem;
margin-top: 2rem;
}
@media screen and (max-width: 767px) {
.p-gai-sheet__list {
grid-template-columns: 1fr;
gap: 0.75rem;
margin-top: 1.25rem;
}
}
.p-gai-sheet__link {
display: flex;
align-items: center;
gap: 1rem;
min-height: 5.375rem;
padding: 1.25rem 1.25rem 1.25rem 1.5625rem;
border-radius: 0.25rem;
background-color: var(--color-white);
text-decoration: none;
transition: var(--transition-hover);
}
@media screen and (max-width: 767px) {
.p-gai-sheet__link {
min-height: 4.5rem;
padding: 1rem;
}
}
@media (hover: hover) {
.p-gai-sheet__link:hover {
box-shadow: var(--shadow-card-hover);
translate: 0 -0.25rem;
}
.p-gai-sheet__link:hover .c-icon--arrow {
translate: 0 0;
}
}
.p-gai-sheet__icon {
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
width: 2.75rem;
height: 2.75rem;
border-radius: 0.25rem;
background-color: var(--sub-band);
color: var(--color-main);
}
.p-gai-sheet__icon svg {
width: 1.375rem;
height: auto;
}
.p-gai-sheet__body {
flex: 1;
min-width: 0;
}
.p-gai-sheet__type {
display: block;
font-size: max(0.75rem, 10px);
font-weight: 700;
line-height: 1.5;
letter-spacing: 0.1em;
color: var(--color-main);
}
.p-gai-sheet__name {
display: block;
margin-top: 0.125rem;
font-size: max(0.875rem, 10px);
font-weight: 500;
line-height: 1.4;
letter-spacing: 0;
color: var(--color-black);
}
.p-gai-sheet__link svg {
flex-shrink: 0;
color: var(--color-main);
}
.p-gai-sheet__note {
margin-top: 1.125rem;
}
@media screen and (max-width: 767px) {
.p-gai-sheet__note {
margin-top: 0.75rem;
}
}
.p-gai-request__list {
width: 57.5rem;
max-width: 100%;
margin: 2.25rem auto 0;
border-top: 1px solid var(--color-beige-deep);
}
@media screen and (max-width: 767px) {
.p-gai-request__list {
width: 100%;
margin-top: 1.5rem;
}
}
.p-gai-request__item {
position: relative;
padding: 1.25rem 1.75rem 1.25rem 2.875rem;
border-bottom: 1px solid var(--color-beige-deep);
background-color: var(--color-white);
font-size: max(0.875rem, 10px);
font-weight: 500;
line-height: 1.8571428571;
letter-spacing: 0.05em;
}
@media screen and (max-width: 767px) {
.p-gai-request__item {
padding: 0.875rem 1rem 0.875rem 2.125rem;
}
}
.p-gai-request__item::before {
content: "";
position: absolute;
top: 2.0625rem;
left: 1.75rem;
width: 0.5rem;
height: 1px;
background-color: var(--color-main);
}
@media screen and (max-width: 767px) {
.p-gai-request__item::before {
top: 1.5625rem;
left: 1rem;
}
}
.p-gai-request__box {
width: 57.5rem;
max-width: 100%;
margin: 3.25rem auto 0;
padding: 1.5rem 1.875rem 1.75rem;
border-radius: 0.625rem;
background-color: var(--color-white);
}
@media screen and (max-width: 767px) {
.p-gai-request__box {
width: 100%;
margin-top: 2rem;
padding: 1.25rem;
}
}
.p-gai-request__box-title {
font-size: max(1.25rem, 10px);
font-weight: 700;
line-height: 1.5;
letter-spacing: 0.05em;
color: var(--color-main);
}
@media screen and (max-width: 767px) {
.p-gai-request__box-title {
font-size: max(1rem, 10px);
}
}
.p-gai-request__box-text {
margin-top: 0.625rem;
font-size: max(0.9375rem, 10px);
font-weight: 500;
line-height: 1.7333333333;
letter-spacing: 0.05em;
}
@media screen and (max-width: 767px) {
.p-gai-request__box-text {
font-size: max(0.875rem, 10px);
}
}
.p-gai-belongings {
display: grid;
grid-template-columns: repeat(2, 1fr);
margin-top: 1.375rem;
border-right: 1px solid var(--color-beige-deep);
}
@media screen and (max-width: 767px) {
.p-gai-belongings {
grid-template-columns: 1fr;
border-right: none;
}
}
.p-gai-belongings__group {
padding: 0.6875rem 1.75rem 1.3125rem;
border-left: 1px solid var(--color-beige-deep);
}
@media screen and (max-width: 767px) {
.p-gai-belongings__group {
padding-inline: 0.625rem;
border-left: none;
}
}
@media screen and (max-width: 767px) {
.p-gai-belongings__group + .p-gai-belongings__group {
border-top: 1px solid var(--color-beige-deep);
}
}
.p-gai-belongings__group-title {
font-size: max(1.5rem, 10px);
font-weight: 500;
line-height: 1.5;
letter-spacing: 0.1em;
color: var(--color-black);
}
@media screen and (max-width: 767px) {
.p-gai-belongings__group-title {
font-size: max(1.125rem, 10px);
}
}
.p-gai-belongings__items {
margin-top: 0.8125rem;
}
.p-gai-belongings__item {
position: relative;
padding-left: 1.1875rem;
font-size: max(0.875rem, 10px);
font-weight: 500;
line-height: 2;
letter-spacing: 0.05em;
}
.p-gai-belongings__item::before {
content: "";
position: absolute;
top: 0.5625rem;
left: 0;
width: 0.6875rem;
height: 0.6875rem;
border-radius: 50%;
background-color: var(--color-main);
}
.p-gai-cold__box {
margin-top: 0;
}
@media screen and (max-width: 767px) {
.p-gai-cold__box {
margin-top: 0;
}
}
.p-greeting-intro__text {
text-align: center;
}
@media screen and (max-width: 767px) {
.p-greeting-intro__text {
text-align: left;
}
}
.p-greeting__profile {
display: grid;
grid-template-columns: 30.125rem minmax(0, 1fr);
gap: 6.25rem;
align-items: start;
margin-top: 3rem;
}
@media screen and (max-width: 767px) {
.p-greeting__profile {
grid-template-columns: 1fr;
gap: 1.5rem;
margin-top: 1.75rem;
}
}
.p-greeting__figure {
aspect-ratio: 4/5;
border-radius: 0.625rem;
overflow: hidden;
background-color: var(--color-beige-band);
}
@media screen and (max-width: 767px) {
.p-greeting__figure {
width: 100%;
max-width: 28.125rem;
margin-inline: auto;
}
}
.p-greeting__figure img {
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
}
.p-greeting__badge {
display: inline-flex;
align-items: center;
min-height: 2rem;
padding-inline: 1rem;
background-color: var(--color-main);
font-size: max(0.875rem, 10px);
font-weight: 500;
letter-spacing: 0.05em;
color: var(--color-white);
}
.p-greeting__kana {
margin-top: 1.1875rem;
font-size: max(0.875rem, 10px);
font-weight: 500;
line-height: 1.6;
letter-spacing: 0.05em;
}
.p-greeting__name {
margin-top: 0.5rem;
font-size: max(2.25rem, 10px);
font-weight: 500;
line-height: 1.4;
letter-spacing: 0.1em;
color: var(--color-main);
}
@media screen and (max-width: 767px) {
.p-greeting__name {
font-size: max(1.625rem, 10px);
}
}
.p-greeting__def {
margin-top: 1.75rem;
}
@media screen and (max-width: 767px) {
.p-greeting__def {
margin-top: 1.25rem;
}
}
.p-greeting__block {
margin-top: 5rem;
}
@media screen and (max-width: 767px) {
.p-greeting__block {
margin-top: 2.75rem;
}
}
.p-greeting__message {
margin-top: 2rem;
}
@media screen and (max-width: 767px) {
.p-greeting__message {
margin-top: 1.25rem;
}
}
.p-greeting__text + .p-greeting__text {
margin-top: 1.25rem;
}
@media screen and (max-width: 767px) {
.p-greeting__text + .p-greeting__text {
margin-top: 1rem;
}
}
.p-greeting__sign {
margin-top: 2.5rem;
font-size: max(0.9375rem, 10px);
font-weight: 500;
line-height: 2;
letter-spacing: 0.05em;
text-align: right;
}
@media screen and (max-width: 767px) {
.p-greeting__sign {
margin-top: 1.75rem;
font-size: max(0.875rem, 10px);
}
}
.p-greeting__sign-name {
font-size: max(1.25rem, 10px);
font-weight: 700;
letter-spacing: 0.1em;
color: var(--color-main);
}
@media screen and (max-width: 767px) {
.p-greeting__sign-name {
font-size: max(1.0625rem, 10px);
}
}
.p-greeting__columns {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 3rem;
margin-top: 2rem;
}
@media screen and (max-width: 767px) {
.p-greeting__columns {
grid-template-columns: 1fr;
gap: 1.75rem;
margin-top: 1.25rem;
}
}
.p-greeting__column-title {
padding-bottom: 0.75rem;
border-bottom: 1px solid var(--color-beige-deep);
font-size: max(1.25rem, 10px);
font-weight: 500;
line-height: 1.5;
letter-spacing: 0.1em;
color: var(--color-main);
}
@media screen and (max-width: 767px) {
.p-greeting__column-title {
font-size: max(1.0625rem, 10px);
}
}
.p-greeting__list {
margin-top: 1.25rem;
}
.p-greeting__list-item {
position: relative;
padding-left: 1.625rem;
font-size: max(0.875rem, 10px);
font-weight: 500;
line-height: 1.8571428571;
letter-spacing: 0.05em;
}
.p-greeting__list-item + .p-greeting__list-item {
margin-top: 0.875rem;
}
.p-greeting__list-item::before {
content: "";
position: absolute;
top: 0.75rem;
left: 0;
width: 0.5rem;
height: 1px;
background-color: var(--color-main);
}
.p-greeting-related__list {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 1.375rem;
margin-top: 2.9375rem;
}
@media screen and (max-width: 767px) {
.p-greeting-related__list {
grid-template-columns: 1fr;
gap: 1rem;
margin-top: 1.75rem;
}
}
.p-greeting-related__link {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1.25rem;
min-height: 9.25rem;
padding: 1.875rem 1.875rem 1.875rem 2.5rem;
background-color: var(--color-white);
border-radius: 0.25rem;
box-shadow: var(--shadow-card);
text-decoration: none;
transition: var(--transition-hover);
}
@media screen and (max-width: 767px) {
.p-greeting-related__link {
min-height: 0;
padding: 1.5rem;
}
}
.p-greeting-related__body {
display: block;
}
.p-greeting-related__title {
display: block;
font-size: max(1.25rem, 10px);
font-weight: 500;
line-height: 1.5;
letter-spacing: 0.1em;
color: var(--color-main);
}
@media screen and (max-width: 767px) {
.p-greeting-related__title {
font-size: max(1.0625rem, 10px);
}
}
.p-greeting-related__text {
display: block;
margin-top: 0.5625rem;
font-size: max(0.875rem, 10px);
line-height: 1.7142857143;
letter-spacing: 0.05em;
color: var(--color-black);
}
@media (hover: hover) {
.p-greeting-related__link:hover {
box-shadow: var(--shadow-card-hover);
translate: 0 -0.25rem;
}
.p-greeting-related__link:hover .c-icon--arrow {
translate: 0 0;
}
}
.p-header {
display: flex;
flex-direction: column;
}
.p-header__info {
height: 5.5rem;
}
@media screen and (max-width: 1024px) {
.p-header__info {
height: 100%;
}
}
.p-header__info-inner {
display: flex;
align-items: center;
height: 100%;
padding-inline: clamp(16px, 50vw - 704px, 96px);
}
@media screen and (max-width: 767px) {
.p-header__info-inner {
height: 100%;
padding-inline: 0.625rem 0;
align-items: center;
}
}
.p-header__logo {
width: 13.8125rem;
flex-shrink: 0;
}
@media screen and (max-width: 1024px) {
.p-header__logo {
width: 11.25rem;
}
}
@media screen and (max-width: 767px) {
.p-header__logo {
width: 13.8125rem;
}
}
.p-header__logo-link {
display: block;
}
.p-header__logo img {
width: 100%;
height: auto;
}
.p-header__tel {
flex-shrink: 0;
display: flex;
align-items: center;
gap: 0.625rem;
margin-left: auto;
}
@media screen and (max-width: 1024px) {
.p-header__tel {
display: none;
}
}
.p-header__tel-icon {
display: flex;
color: var(--color-main);
}
.p-header__tel-icon svg {
width: clamp(20px, 2.567vw - 8.07px, 33px);
height: auto;
}
.p-header__tel-note {
white-space: nowrap;
font-size: clamp(10px, 0.933vw - 2.93px, 12px);
letter-spacing: 0;
line-height: 1;
color: var(--color-black);
}
.p-header__tel-number {
display: block;
margin-top: 0.1875rem;
white-space: nowrap;
font-family: var(--en-font-family);
font-size: clamp(26px, 2.8vw - 8.8px, 36px);
font-weight: 500;
line-height: 1;
letter-spacing: 0.05em;
color: var(--color-black);
}
.p-header__cta {
display: flex;
align-items: center;
gap: 0.625rem;
margin-left: 0.5rem;
}
@media screen and (min-width: 768px) and (max-width: 1250px) {
.p-header__cta {
gap: 0.375rem;
}
}
@media screen and (max-width: 1024px) {
.p-header__cta {
display: none;
}
}
.p-header__cta-link {
position: relative;
display: flex;
align-items: center;
justify-content: center;
min-width: 10rem;
height: 3.125rem;
padding-inline: 0.9375rem 0.3125rem;
}
@media screen and (min-width: 768px) and (max-width: 1250px) {
.p-header__cta-link {
min-width: 8.75rem;
}
}
.p-header__cta-link {
border-radius: 1.5625rem;
text-align: center;
transition: var(--transition-hover);
}
.p-header__cta-link--access {
background-color: var(--color-beige);
color: var(--color-black);
}
.p-header__cta-link--reserve {
background-color: var(--color-main);
color: var(--color-white);
}
.p-header__cta-link--seikei {
width: 11.25rem;
}
@media screen and (min-width: 768px) and (max-width: 1250px) {
.p-header__cta-link--seikei {
width: 10rem;
}
}
.p-header__cta-link--seikei {
background-color: var(--color-accent);
color: var(--color-white);
}
.p-header__cta-icon {
position: absolute;
top: 50%;
left: 1rem;
translate: 0 -50%;
display: flex;
}
.p-header__cta-icon svg {
width: auto;
height: 1.0625rem;
}
.p-header__cta-icon .c-icon--pin {
height: 1.4375rem;
}
.p-header__cta-link--access .p-header__cta-icon {
color: var(--color-beige-deep);
transition: var(--transition-hover);
}
.p-header__cta-label {
display: block;
white-space: nowrap;
font-size: max(0.875rem, 10px);
font-weight: 500;
line-height: 1;
letter-spacing: 0.1em;
}
.p-header__cta-link--reserve .p-header__cta-label,
.p-header__cta-link--seikei .p-header__cta-label {
font-size: max(0.9375rem, 10px);
}
.p-header__cta-sub {
display: block;
white-space: nowrap;
margin-top: 0.25rem;
font-size: max(0.6875rem, 10px);
font-weight: 500;
line-height: 1;
letter-spacing: 0;
}
.p-header__nav {
height: 3.875rem;
}
@media screen and (max-width: 1024px) {
.p-header__nav {
display: none;
}
}
.p-header__nav-list {
display: flex;
justify-content: center;
align-items: stretch;
height: 100%;
padding-inline: 6rem;
}
.p-header__nav-item {
position: relative;
display: flex;
flex: 1;
align-items: center;
justify-content: center;
}
.p-header__nav-item {
border-left: 1px solid var(--color-beige-deep);
}
.p-header__nav-item:last-child {
border-right: 1px solid var(--color-beige-deep);
}
.p-header__nav-link {
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
gap: 0.25rem;
min-height: 1.75rem;
font-size: max(0.9375rem, 10px);
font-weight: 500;
line-height: 1;
letter-spacing: 0.1em;
color: var(--color-black);
white-space: nowrap;
}
span.p-header__nav-link {
cursor: default;
}
button.p-header__nav-link {
padding: 0;
border: none;
background: none;
font-family: inherit;
cursor: pointer;
}
.p-header__nav-chevron {
display: flex;
margin-top: 0.1875rem;
color: var(--color-main);
}
.p-header__submenu {
position: absolute;
top: 100%;
left: 50%;
translate: -50% 0;
z-index: 10;
min-width: 16.25rem;
padding: 0.875rem 1.375rem 1.125rem;
background-color: var(--color-white);
box-shadow: 0 0.25rem 1rem rgba(0, 0, 0, 0.08);
opacity: 0;
visibility: hidden;
transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
}
.p-header__nav-item--has-child:hover .p-header__submenu,
.p-header__nav-item--has-child:focus-within .p-header__submenu {
opacity: 1;
visibility: visible;
}
.p-header__submenu-link {
display: block;
padding: 0.625rem 0.625rem;
font-size: max(0.875rem, 10px);
line-height: 1.5;
letter-spacing: 0.05em;
white-space: nowrap;
transition: var(--transition-hover);
}
.p-header__submenu-link--parent {
margin-bottom: 0.3125rem;
padding-block: 0.25rem 0.9375rem;
border-bottom: 1px solid var(--color-beige-line);
font-size: max(0.9375rem, 10px);
font-weight: 700;
color: var(--color-main);
}
.p-header__submenu-list {
display: grid;
grid-template-rows: repeat(6, auto);
grid-auto-flow: column;
grid-auto-columns: max-content;
-moz-column-gap: 1.25rem;
column-gap: 1.25rem;
}
.p-header__submenu-item--col-break {
grid-row-start: 1;
}
.p-header__submenu-list--single {
grid-template-rows: none;
grid-auto-flow: row;
}
.p-header__submenu-label {
display: block;
padding: 0.625rem 0.625rem 0.25rem;
font-size: max(0.8125rem, 10px);
font-weight: 700;
line-height: 1.5;
letter-spacing: 0.05em;
color: var(--color-main);
white-space: nowrap;
}
.p-header__hamburger {
display: none;
margin-left: auto;
}
@media screen and (max-width: 1024px) {
.p-header__hamburger {
display: block;
}
}
.p-header__hamburger {
position: relative;
width: 1.875rem;
height: 1.25rem;
background-color: transparent;
border: none;
cursor: pointer;
}
@media screen and (max-width: 1024px) {
.p-header__hamburger {
width: 3.75rem;
height: 3.75rem;
background-color: var(--color-accent);
}
}
.p-header__hamburger span {
display: none;
}
.p-header__hamburger::before,
.p-header__hamburger::after {
content: "";
position: absolute;
left: 0;
width: 100%;
height: 1px;
background-color: var(--color-main);
transition: 0.3s ease-in-out;
}
.p-header__hamburger::before {
top: 0;
}
@media screen and (max-width: 1024px) {
.p-header__hamburger::before {
top: 1.53125rem;
}
}
.p-header__hamburger::after {
bottom: 0;
}
@media screen and (max-width: 1024px) {
.p-header__hamburger::after {
top: 2.375rem;
bottom: auto;
}
}
.p-header__drawer {
position: fixed;
inset: var(--header-height) 0 0 0;
z-index: 1000;
overflow-y: auto;
padding: 1.5rem 1.25rem 3.75rem;
background-color: var(--color-white);
opacity: 0;
visibility: hidden;
transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
}
@media screen and (max-width: 767px) {
.p-header__drawer {
padding: 0 1.25rem 5rem;
background-color: var(--color-beige);
}
}
.p-header__drawer.is-open {
opacity: 1;
visibility: visible;
}
.p-header__drawer-item > a {
display: flex;
align-items: center;
height: 2.8125rem;
font-size: max(1rem, 10px);
font-weight: 700;
border-bottom: 1px solid var(--color-beige-deep);
color: var(--color-main);
}
@media screen and (max-width: 767px) {
.p-header__drawer-item > a {
height: 2.8125rem;
font-size: max(0.875rem, 10px);
letter-spacing: 0.05em;
}
}
@media screen and (max-width: 767px) {
.p-header__drawer-item:first-child > a {
height: 3.1875rem;
align-items: flex-end;
padding-bottom: 1rem;
}
}
.p-header__drawer-tel {
display: flex;
align-items: center;
justify-content: center;
gap: 0.6875rem;
margin-top: 2.3125rem;
}
.p-header__drawer-tel-icon {
flex-shrink: 0;
width: 2.3125rem;
color: var(--color-main);
}
.p-header__drawer-tel-icon svg {
display: block;
width: 100%;
height: auto;
}
.p-header__drawer-tel-note {
font-size: max(0.75rem, 10px);
line-height: 1.2;
letter-spacing: -0.02em;
color: var(--color-black);
}
.p-header__drawer-tel-number {
display: block;
font-family: var(--en-font-family);
font-size: max(2.1875rem, 10px);
font-weight: 500;
line-height: 1;
letter-spacing: 0.02em;
color: var(--color-black);
}
.p-header__drawer-cta {
display: grid;
gap: 0.625rem;
margin-top: 1.625rem;
}
.p-header__drawer-cta-link {
position: relative;
display: flex;
align-items: center;
height: 3.125rem;
padding-inline: 1.875rem 3.125rem;
border-radius: 1.5625rem;
background-color: var(--color-beige);
box-shadow: var(--shadow-card);
font-size: max(0.875rem, 10px);
font-weight: 700;
letter-spacing: 0.05em;
color: var(--color-black);
}
.p-header__drawer-cta-link--reserve {
background-color: var(--color-main);
box-shadow: none;
color: var(--color-white);
}
.p-header__drawer-cta-link--seikei {
background-color: var(--color-accent);
box-shadow: none;
color: var(--color-white);
}
.p-header__drawer-cta-arrow {
position: absolute;
top: 50%;
right: 0.9375rem;
display: block;
width: 1.4375rem;
height: 1.4375rem;
translate: 0 -50%;
color: currentcolor;
}
.p-header__drawer-cta-arrow svg {
display: block;
width: 100%;
height: 100%;
}
@media screen and (max-width: 1024px) {
.p-header__hamburger::before,
.p-header__hamburger::after {
left: 50%;
width: 1.875rem;
height: 1px;
translate: -50% 0;
background-color: var(--color-white);
}
}
@media screen and (max-width: 1024px) {
.p-header__hamburger[aria-expanded=true]::before {
top: 50%;
translate: -50% -50%;
rotate: 45deg;
}
}
@media screen and (max-width: 1024px) {
.p-header__hamburger[aria-expanded=true]::after {
bottom: auto;
top: 50%;
translate: -50% -50%;
rotate: -45deg;
}
}
.p-header__drawer-acc-summary {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.5rem;
height: 2.8125rem;
border-bottom: 1px solid var(--color-beige-deep);
font-size: max(1rem, 10px);
font-weight: 700;
color: var(--color-main);
cursor: pointer;
list-style: none;
}
@media screen and (max-width: 767px) {
.p-header__drawer-acc-summary {
height: 2.8125rem;
font-size: max(0.875rem, 10px);
letter-spacing: 0.05em;
}
}
.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;
rotate: 90deg;
transition: rotate 0.3s ease-in-out;
}
.p-header__drawer-acc[open] > .p-header__drawer-acc-summary svg {
rotate: -90deg;
}
.p-header__drawer-subitem > a {
display: flex;
align-items: center;
height: 2.625rem;
padding-left: 1rem;
border-bottom: 1px solid var(--color-beige-line);
font-size: max(0.9375rem, 10px);
font-weight: 500;
}
@media screen and (max-width: 767px) {
.p-header__drawer-subitem > a {
height: 2.5rem;
font-size: max(0.8125rem, 10px);
letter-spacing: 0.05em;
}
}
@media (any-hover: hover) {
.p-header__logo-link:hover {
opacity: 0.7;
}
.p-header__nav-link:hover,
.p-header__tel-number:hover {
color: var(--color-main);
}
.p-header__submenu-link:hover {
opacity: 0.7;
}
.p-header__cta-link--access:hover {
background-color: var(--color-main);
color: var(--color-white);
}
.p-header__cta-link--access:hover .p-header__cta-icon {
color: var(--color-white);
}
.p-header__cta-link--reserve:hover {
background-color: var(--color-white);
color: var(--color-main);
box-shadow: inset 0 0 0 1px var(--color-main);
}
.p-header__cta-link--seikei:hover {
background-color: var(--color-white);
color: var(--color-accent);
box-shadow: inset 0 0 0 1px var(--color-accent);
}
}
.p-header__drawer-subitem--label > span {
display: flex;
align-items: center;
height: 2.25rem;
padding-left: 1rem;
font-size: max(0.8125rem, 10px);
font-weight: 700;
color: var(--color-main);
}
.p-header__drawer-subitem.p-header__drawer-subitem--parent > a {
font-weight: 700;
color: var(--color-main);
}
.p-job-detail__title {
position: relative;
padding: 1rem 1.625rem;
border-radius: 0.25rem;
background-color: var(--color-beige-band);
font-size: max(1.125rem, 10px);
font-weight: 500;
line-height: 1.5;
letter-spacing: 0.05em;
color: var(--color-black);
}
@media screen and (max-width: 767px) {
.p-job-detail__title {
padding: 0.75rem 1.25rem;
font-size: max(1rem, 10px);
}
}
.p-job-detail__title::before {
content: "";
position: absolute;
top: 50%;
left: 0.6875rem;
width: 0.1875rem;
height: 2.4375rem;
background-color: var(--color-main);
transform: translateY(-50%);
}
@media screen and (max-width: 767px) {
.p-job-detail__title::before {
left: 0.5rem;
height: 1.75rem;
}
}
.p-job-entry__lead {
margin-top: 1.5rem;
text-align: center;
}
@media screen and (max-width: 767px) {
.p-job-entry__lead {
margin-top: 1rem;
text-align: left;
}
}
.p-job-entry__attention {
max-width: 62.5rem;
margin-top: 2.5rem;
margin-inline: auto;
}
@media screen and (max-width: 767px) {
.p-job-entry__attention {
margin-top: 1.5rem;
}
}
.p-job-entry__attention-title {
padding-right: 3.5rem;
font-size: max(1rem, 10px);
font-weight: 700;
line-height: 1.8;
letter-spacing: 0.05em;
color: var(--color-main);
}
@media screen and (max-width: 767px) {
.p-job-entry__attention-title {
padding-right: 2.25rem;
font-size: max(0.9375rem, 10px);
}
}
.p-job-entry__attention-item {
position: relative;
padding-left: 1rem;
font-size: max(0.875rem, 10px);
font-weight: 500;
line-height: 1.8571428571;
letter-spacing: 0.05em;
}
@media screen and (max-width: 767px) {
.p-job-entry__attention-item {
padding-left: 0.875rem;
font-size: max(0.8125rem, 10px);
}
}
.p-job-entry__attention-item::before {
content: "・";
position: absolute;
top: 0;
left: 0;
}
.p-job-entry__form {
margin-top: 3.5rem;
}
@media screen and (max-width: 767px) {
.p-job-entry__form {
margin-top: 2rem;
}
}
.p-job-entry__back {
margin-top: 3rem;
text-align: center;
}
@media screen and (max-width: 767px) {
.p-job-entry__back {
margin-top: 2rem;
}
}
.p-ken-lead__inner {
display: grid;
grid-template-columns: 22.5rem 1fr;
gap: 3.75rem;
align-items: center;
}
@media screen and (max-width: 767px) {
.p-ken-lead__inner {
grid-template-columns: 1fr;
gap: 1.5rem;
}
}
.p-ken-lead__figure img {
width: 100%;
height: auto;
aspect-ratio: 518/351;
-o-object-fit: cover;
object-fit: cover;
border-radius: 0.25rem;
}
.p-ken-lead__title {
font-size: max(2.125rem, 10px);
font-weight: 500;
line-height: 1.3235294118;
letter-spacing: 0.1em;
color: var(--color-main);
}
@media screen and (max-width: 767px) {
.p-ken-lead__title {
font-size: max(1.375rem, 10px);
}
}
.p-ken-lead__text {
margin-top: 1.75rem;
line-height: 2;
}
@media screen and (max-width: 767px) {
.p-ken-lead__text {
margin-top: 1.25rem;
}
}
.p-ken-reception__table-wrap {
margin-top: 2.875rem;
overflow-x: auto;
}
@media screen and (max-width: 767px) {
.p-ken-reception__table-wrap {
margin-top: 1.5rem;
}
}
.p-ken-reception__table {
width: 55rem;
max-width: 100%;
margin-inline: auto;
}
.p-ken-reception__table tr > *:first-child {
width: 13.75rem;
}
.p-ken-reception__table tr > *:last-child {
width: 8.9375rem;
}
.p-ken-reception__note {
margin-top: 1rem;
font-size: max(0.75rem, 10px);
font-weight: 500;
line-height: 1.8;
letter-spacing: 0.05em;
text-align: center;
}
@media screen and (max-width: 767px) {
.p-ken-reception__note {
text-align: left;
}
}
.p-ken-group__inner {
display: grid;
grid-template-columns: 512fr 561fr;
gap: 7.1875rem;
align-items: start;
margin-top: 3.125rem;
}
@media screen and (max-width: 767px) {
.p-ken-group__inner {
grid-template-columns: 1fr;
gap: 1.75rem;
margin-top: 1.75rem;
}
}
.p-ken-group__catch {
font-size: max(0.9375rem, 10px);
font-weight: 700;
line-height: 1.8;
letter-spacing: 0.05em;
color: var(--color-main);
}
.p-ken-group__box {
margin-top: 1.25rem;
padding: 1.125rem 1.375rem;
border-radius: 0.25rem;
background-color: var(--color-beige-band);
font-size: max(0.9375rem, 10px);
font-weight: 500;
line-height: 1.8;
letter-spacing: 0.05em;
}
@media screen and (max-width: 767px) {
.p-ken-group__box {
padding: 0.875rem 1rem;
font-size: max(0.875rem, 10px);
}
}
.p-ken-group__movie-caption {
margin-top: 1rem;
font-size: max(0.875rem, 10px);
font-weight: 500;
line-height: 1.5;
letter-spacing: 0.05em;
text-align: center;
}
@media screen and (max-width: 767px) {
.p-ken-group__movie-caption {
margin-top: 0.75rem;
}
}
.p-ken-group__buttons {
display: flex;
flex-direction: column;
gap: 0.9375rem;
margin-top: 1.5rem;
}
.p-ken-group__buttons .c-button,
.p-ken-junkai__buttons .c-button {
width: auto;
min-width: 16.5rem;
}
@media screen and (max-width: 767px) {
.p-ken-group__buttons .c-button,
.p-ken-junkai__buttons .c-button {
width: 100%;
min-width: 0;
}
}
.p-ken-link {
display: inline-flex;
align-items: center;
font-size: max(0.9375rem, 10px);
font-weight: 500;
line-height: 1.5;
letter-spacing: 0.05em;
color: var(--color-main);
transition: var(--transition-hover);
}
@media screen and (max-width: 767px) {
.p-ken-link {
font-size: max(0.875rem, 10px);
}
}
@media (any-hover: hover) {
.p-ken-link:hover {
color: var(--color-main);
}
}
.p-ken-flow__more {
margin-top: 1.875rem;
text-align: center;
}
.p-ken-course__table-wrap {
margin-top: 2rem;
overflow-x: auto;
}
@media screen and (max-width: 767px) {
.p-ken-course__table-wrap {
margin-top: 1.5rem;
}
}
.p-ken-course__table {
min-width: 62.5rem;
table-layout: fixed;
}
.p-ken-course__table tr > * {
padding: 1rem;
border-color: var(--color-beige-deep);
font-size: max(0.875rem, 10px);
font-weight: 500;
line-height: 1.8;
letter-spacing: 0.05em;
text-align: left;
vertical-align: top;
}
@media screen and (max-width: 767px) {
.p-ken-course__table tr > * {
padding: 0.75rem;
}
}
.p-ken-course__table tbody tr:has(> th) {
background-color: transparent;
}
.p-ken-course__table thead th {
background-color: var(--color-main);
color: var(--color-white);
font-weight: 700;
text-align: center;
vertical-align: middle;
}
.p-ken-course__table thead th:first-child {
width: 8.75rem;
}
.p-ken-course__table tbody th {
width: 8.75rem;
background-color: var(--color-beige-band);
color: var(--color-main);
font-weight: 700;
}
.p-ken-course__pdf {
display: inline-flex;
align-items: center;
gap: 0.5rem;
color: var(--color-main);
text-decoration: underline;
text-underline-offset: 0.125rem;
}
.p-ken-course__pdf + .p-ken-course__pdf {
margin-top: 0.5rem;
}
.p-ken-dock__inner {
display: grid;
grid-template-columns: 563fr 561fr;
gap: 2.4375rem;
align-items: start;
margin-top: 3.125rem;
}
@media screen and (max-width: 767px) {
.p-ken-dock__inner {
grid-template-columns: 1fr;
gap: 1.75rem;
margin-top: 1.75rem;
}
}
.p-ken-dock__block + .p-ken-dock__block {
margin-top: 3.5rem;
}
@media screen and (max-width: 767px) {
.p-ken-dock__block + .p-ken-dock__block {
margin-top: 2rem;
}
}
.p-ken-dock__text {
margin-top: 1.25rem;
font-size: max(0.875rem, 10px);
font-weight: 500;
line-height: 1.857;
letter-spacing: 0.05em;
}
@media screen and (max-width: 767px) {
.p-ken-dock__text {
margin-top: 0.875rem;
}
}
.p-ken-dock__button {
display: flex;
flex-wrap: wrap;
gap: 0.75rem;
margin-top: 1.5rem;
}
.p-ken-dock__banner {
margin-top: 3.5rem;
}
@media screen and (max-width: 767px) {
.p-ken-dock__banner {
margin-top: 2rem;
}
}
.p-ken-dock__banner a {
display: block;
max-width: 34.75rem;
transition: scale 0.3s ease-in-out;
}
@media (any-hover: hover) {
.p-ken-dock__banner a:hover {
opacity: 1;
scale: 1.03;
}
}
.p-ken-dock__banner a:focus-visible {
opacity: 1;
scale: 1.03;
}
.p-ken-dock__banner img {
width: 100%;
max-width: 34.75rem;
height: auto;
}
.p-ken-dock__movie-caption {
margin-top: 1rem;
font-size: max(0.875rem, 10px);
font-weight: 500;
line-height: 1.5;
letter-spacing: 0.05em;
text-align: center;
}
@media screen and (max-width: 767px) {
.p-ken-dock__movie-caption {
margin-top: 0.75rem;
}
}
.p-ken-city__list {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 5rem 1.125rem;
margin-top: 3.125rem;
}
@media screen and (max-width: 767px) {
.p-ken-city__list {
grid-template-columns: 1fr;
gap: 1.25rem;
margin-top: 1.75rem;
}
}
.p-ken-city__item {
display: flex;
flex-direction: column;
border-radius: 0.625rem;
background-color: var(--color-white);
box-shadow: var(--shadow-card);
overflow: hidden;
transition: var(--transition-hover);
}
@media (any-hover: hover) {
.p-ken-city__item:hover {
box-shadow: var(--shadow-card-hover);
translate: 0 -0.25rem;
}
.p-ken-city__item:hover .p-ken-link {
color: var(--color-main);
}
}
.p-ken-city__link {
display: flex;
flex: 1;
flex-direction: column;
padding: 1.25rem 1.5rem;
color: inherit;
text-decoration: none;
}
@media screen and (max-width: 767px) {
.p-ken-city__link {
padding: 1rem;
}
}
.p-ken-city__item-title {
font-size: max(1.1875rem, 10px);
font-weight: 700;
line-height: 1.5;
letter-spacing: 0.05em;
color: var(--color-main);
}
@media screen and (max-width: 767px) {
.p-ken-city__item-title {
font-size: max(1rem, 10px);
}
}
.p-ken-city__text {
margin-top: 1.25rem;
padding-bottom: 1.5rem;
font-size: max(0.875rem, 10px);
font-weight: 500;
line-height: 1.857;
letter-spacing: 0.05em;
}
@media screen and (max-width: 767px) {
.p-ken-city__text {
margin-top: 0.875rem;
}
}
.p-ken-city__more {
margin-top: auto;
padding-top: 1.75rem;
border-top: 1px solid var(--color-beige-line);
}
.p-ken-junkai__inner {
display: grid;
grid-template-columns: 557fr 580fr;
gap: 7.3125rem;
align-items: start;
margin-top: 2.375rem;
}
@media screen and (max-width: 767px) {
.p-ken-junkai__inner {
grid-template-columns: 1fr;
gap: 1.75rem;
margin-top: 1.5rem;
}
}
.p-ken-junkai__sub {
font-size: max(0.9375rem, 10px);
font-weight: 700;
line-height: 1.8;
letter-spacing: 0.05em;
color: var(--color-main);
}
@media screen and (max-width: 767px) {
.p-ken-junkai__sub {
font-size: max(0.875rem, 10px);
}
}
.p-ken-junkai__text {
margin-top: 1rem;
font-size: max(0.875rem, 10px);
font-weight: 500;
line-height: 1.857;
letter-spacing: 0.05em;
}
.p-ken-junkai__text + .p-ken-junkai__sub {
margin-top: 2.5rem;
}
@media screen and (max-width: 767px) {
.p-ken-junkai__text + .p-ken-junkai__sub {
margin-top: 1.75rem;
}
}
.p-ken-junkai__buttons {
display: inline-flex;
flex-direction: column;
align-items: stretch;
gap: 1.5rem;
margin-top: 2.5rem;
}
@media screen and (max-width: 767px) {
.p-ken-junkai__buttons {
display: flex;
gap: 1rem;
margin-top: 1.75rem;
}
}
.p-ken-junkai__figure img {
width: 100%;
height: auto;
aspect-ratio: 580/361;
-o-object-fit: cover;
object-fit: cover;
border-radius: 0.25rem;
}
.p-ken-faq__list {
display: flex;
flex-direction: column;
gap: 1rem;
width: 57.5rem;
max-width: 100%;
margin-top: 3.5rem;
margin-inline: auto;
}
@media screen and (max-width: 767px) {
.p-ken-faq__list {
gap: 0.75rem;
margin-top: 1.75rem;
}
}
.p-ken-faq__item {
border: none;
border-radius: 0.25rem;
background-color: var(--color-white);
box-shadow: var(--shadow-card);
}
.p-ken-faq__question {
display: flex;
align-items: flex-start;
gap: 1rem;
padding: 1.5rem 4.375rem 1.5rem 1.875rem;
}
@media screen and (max-width: 767px) {
.p-ken-faq__question {
gap: 0.75rem;
padding: 1rem 2.875rem 1rem 1rem;
}
}
.p-ken-faq__question::before,
.p-ken-faq__question::after {
right: 1.875rem;
}
@media screen and (max-width: 767px) {
.p-ken-faq__question::before,
.p-ken-faq__question::after {
right: 1rem;
}
}
.p-ken-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-size: max(1.125rem, 10px);
font-weight: 500;
line-height: 1;
color: var(--color-white);
}
@media screen and (max-width: 767px) {
.p-ken-faq__mark {
width: 1.75rem;
height: 1.75rem;
font-size: max(0.9375rem, 10px);
}
}
.p-ken-faq__mark--answer {
background-color: var(--color-beige-deep);
color: var(--color-main);
}
.p-ken-faq__question-text {
padding-top: 0.25rem;
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-ken-faq__question-text {
padding-top: 0.125rem;
font-size: max(0.9375rem, 10px);
line-height: 1.6;
}
}
.p-ken-faq__answer {
display: flex;
align-items: flex-start;
gap: 1rem;
padding: 0 1.875rem 1.75rem;
}
@media screen and (max-width: 767px) {
.p-ken-faq__answer {
gap: 0.75rem;
padding: 0 1rem 1.25rem;
}
}
.p-ken-faq__answer-text {
font-size: max(0.9375rem, 10px);
line-height: 2;
letter-spacing: 0.1em;
}
@media screen and (max-width: 767px) {
.p-ken-faq__answer-text {
font-size: max(0.875rem, 10px);
line-height: 1.8;
}
}
.p-ken-faq__more {
margin-top: 2.5rem;
text-align: center;
}
@media screen and (max-width: 767px) {
.p-ken-faq__more {
margin-top: 1.75rem;
}
}
.p-ken-contact__list {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1rem;
width: 65rem;
max-width: 100%;
margin-top: 3.125rem;
margin-inline: auto;
}
@media screen and (max-width: 767px) {
.p-ken-contact__list {
grid-template-columns: 1fr;
margin-top: 1.75rem;
}
}
.p-ken-contact__item {
display: flex;
flex-direction: column;
padding: 2rem 1.875rem 2.25rem;
border-radius: 0.625rem;
background-color: var(--color-white);
box-shadow: var(--shadow-card);
}
@media screen and (max-width: 767px) {
.p-ken-contact__item {
padding: 1.25rem 1rem 1.5rem;
}
}
.p-ken-contact__badge {
display: inline-flex;
align-items: center;
justify-content: center;
width: -moz-fit-content;
width: fit-content;
min-width: 3.5rem;
padding: 0.25rem 0.625rem;
border-radius: 0.25rem;
background-color: var(--color-main);
font-size: max(0.8125rem, 10px);
font-weight: 700;
line-height: 1.5;
letter-spacing: 0.05em;
color: var(--color-white);
}
.p-ken-contact__badge--line {
background-color: var(--color-line);
}
.p-ken-contact__title {
margin-top: 1.125rem;
font-size: max(1.125rem, 10px);
font-weight: 700;
line-height: 1.5;
letter-spacing: 0.02em;
color: var(--color-main);
}
@media screen and (max-width: 767px) {
.p-ken-contact__title {
font-size: max(1.0625rem, 10px);
}
}
.p-ken-contact__catch {
margin-top: 0.75rem;
font-size: max(1.1875rem, 10px);
font-weight: 700;
line-height: 1.5;
letter-spacing: 0.05em;
}
@media screen and (max-width: 767px) {
.p-ken-contact__catch {
font-size: max(1.0625rem, 10px);
}
}
.p-ken-contact__note {
margin-top: 0.75rem;
font-size: max(0.75rem, 10px);
font-weight: 500;
line-height: 1.8;
letter-spacing: 0.05em;
}
.p-ken-contact__text {
margin-top: 1rem;
font-size: max(0.8125rem, 10px);
font-weight: 500;
line-height: 1.846;
letter-spacing: 0.02em;
}
.p-ken-contact__action {
margin-top: auto;
padding-top: 1.75rem;
}
.p-ken-contact__action .c-button {
width: 100%;
min-height: 4.5rem;
padding: 0.875rem 0.875rem 0.875rem 1.5rem;
border-radius: 2.25rem;
font-size: max(0.875rem, 10px);
line-height: 1.6;
text-align: left;
}
.p-ken-contact__button {
display: inline-flex;
align-items: center;
justify-content: center;
width: 100%;
min-height: 2.75rem;
padding-inline: 1rem;
border-radius: 0.25rem;
background-color: var(--color-main);
font-size: max(0.75rem, 10px);
font-weight: 700;
line-height: 1.4;
letter-spacing: 0.05em;
color: var(--color-white);
text-align: center;
transition: var(--transition-hover);
}
@media (any-hover: hover) {
.p-ken-contact__button:hover {
background-color: var(--color-white);
color: var(--color-main);
box-shadow: inset 0 0 0 1px var(--color-main);
}
}
.p-ken-contact__button--line {
background-color: var(--color-line);
letter-spacing: 0.02em;
}
.p-ken-contact__tel {
display: flex;
align-items: flex-start;
min-height: 4.5rem;
margin-top: auto;
padding-top: 1.25rem;
font-family: var(--en-font-family);
font-size: max(1.875rem, 10px);
font-weight: 500;
line-height: 1.2;
letter-spacing: 0.05em;
color: var(--color-black);
}
@media screen and (max-width: 767px) {
.p-ken-contact__tel {
font-size: max(1.625rem, 10px);
}
}
.p-ken-contact__box {
width: 65rem;
max-width: 100%;
margin-top: 2.375rem;
margin-inline: auto;
padding: 2rem 1.875rem 2.25rem;
border-radius: 0.625rem;
background-color: var(--color-white);
box-shadow: var(--shadow-card);
}
@media screen and (max-width: 767px) {
.p-ken-contact__box {
margin-top: 1.5rem;
padding: 1.25rem 1rem 1.5rem;
}
}
.p-ken-contact__box-title {
padding-bottom: 1.25rem;
border-bottom: 1px solid var(--color-beige-line);
font-size: max(1rem, 10px);
font-weight: 700;
line-height: 1.5;
letter-spacing: 0.05em;
color: var(--color-main);
}
@media screen and (max-width: 767px) {
.p-ken-contact__box-title {
padding-bottom: 0.875rem;
font-size: max(0.9375rem, 10px);
}
}
.p-ken-contact__courses {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 0.75rem 2.5rem;
margin-top: 1.25rem;
}
@media screen and (max-width: 767px) {
.p-ken-contact__courses {
grid-template-columns: 1fr;
gap: 0.625rem;
}
}
.p-ken-contact__course {
position: relative;
padding-left: 1.25rem;
font-size: max(0.8125rem, 10px);
font-weight: 500;
line-height: 1.6;
letter-spacing: 0.05em;
}
.p-ken-contact__course::before {
content: "";
position: absolute;
top: 0.375rem;
left: 0;
width: 0.375rem;
height: 0.375rem;
border-right: 1px solid var(--color-main);
border-bottom: 1px solid var(--color-main);
transform: rotate(-45deg);
}
.p-ken-contact__box-note {
margin-top: 1.5rem;
padding-top: 1.25rem;
border-top: 1px solid var(--color-beige-line);
font-size: max(0.75rem, 10px);
font-weight: 500;
line-height: 1.8;
letter-spacing: 0.05em;
}
.p-ken-float {
position: fixed;
right: 1.875rem;
bottom: 6rem;
z-index: 20;
}
@media screen and (max-width: 767px) {
.p-ken-float {
right: 0.75rem;
bottom: 5.75rem;
}
}
.p-ken-float.is-closed {
display: none;
}
.p-ken-float__close {
position: absolute;
top: -0.625rem;
right: -0.625rem;
display: flex;
align-items: center;
justify-content: center;
width: 1.75rem;
height: 1.75rem;
padding: 0;
border: 1px solid var(--color-beige-line);
border-radius: 50%;
background-color: #fff;
cursor: pointer;
transition: var(--transition-hover);
}
.p-ken-float__close span {
position: relative;
display: block;
width: 0.75rem;
height: 0.75rem;
}
.p-ken-float__close span::before,
.p-ken-float__close span::after {
position: absolute;
top: 50%;
left: 0;
width: 100%;
height: 1px;
background-color: var(--color-main);
content: "";
}
.p-ken-float__close span::before {
transform: rotate(45deg);
}
.p-ken-float__close span::after {
transform: rotate(-45deg);
}
@media (any-hover: hover) {
.p-ken-float__close:hover {
opacity: 0.7;
}
}
.p-ken-float__link {
display: block;
width: 15rem;
border-radius: 0.5rem;
overflow: hidden;
box-shadow: var(--shadow-card);
transition: scale 0.3s ease-in-out;
}
@media (any-hover: hover) {
.p-ken-float__link:hover {
opacity: 1;
scale: 1.03;
}
}
.p-ken-float__link:focus-visible {
opacity: 1;
scale: 1.03;
}
@media screen and (max-width: 767px) {
.p-ken-float__link {
width: 9.375rem;
}
}
.p-ken-float__link img {
display: block;
width: 100%;
height: auto;
}
@media (any-hover: hover) {
.p-ken-course__pdf:hover {
text-decoration-color: transparent;
}
}
.p-news__filter {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 0.75rem;
}
@media screen and (max-width: 767px) {
.p-news__filter {
gap: 0.5rem;
}
}
.p-news__filter-item {
display: flex;
align-items: center;
justify-content: center;
min-width: 5rem;
height: 1.875rem;
padding-inline: 0.75rem;
border-radius: 0.25rem;
background-color: var(--color-white);
font-size: max(0.75rem, 10px);
font-weight: 500;
line-height: 1;
letter-spacing: 0.05em;
color: var(--color-black);
text-decoration: none;
}
@media screen and (max-width: 767px) {
.p-news__filter-item {
height: 1.625rem;
padding-inline: 0.625rem;
}
}
.p-news__filter-item.is-current {
background-color: var(--color-main);
color: var(--color-white);
}
.p-news__list {
margin-top: 2.5rem;
border-bottom: 1px solid var(--color-beige-deep);
}
@media screen and (max-width: 767px) {
.p-news__list {
margin-top: 1.5rem;
}
}
.p-news__item {
border-top: 1px solid var(--color-beige-deep);
}
.p-news__link {
display: flex;
align-items: center;
padding-block: 1.1875rem;
text-decoration: none;
}
@media screen and (max-width: 767px) {
.p-news__link {
display: grid;
grid-template-columns: auto 1fr;
align-items: center;
gap: 0.375rem 0.5625rem;
padding-block: 0.875rem;
}
}
.p-news__date {
flex-shrink: 0;
font-family: var(--en-font-family);
font-variant-numeric: tabular-nums;
font-size: max(0.875rem, 10px);
letter-spacing: 0.05em;
color: var(--color-black);
transition: var(--transition-hover);
}
@media screen and (max-width: 767px) {
.p-news__date {
font-size: max(0.75rem, 10px);
letter-spacing: 0.1em;
}
}
.p-news__cat {
margin-left: 2.5rem;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
min-width: 5rem;
height: 1.875rem;
padding-inline: 0.5rem;
white-space: nowrap;
border-radius: 0.25rem;
background-color: var(--color-beige-band);
font-size: max(0.75rem, 10px);
line-height: 1;
letter-spacing: 0.05em;
}
@media screen and (max-width: 767px) {
.p-news__cat {
margin-left: 0;
justify-self: start;
min-width: 5rem;
height: 1.25rem;
border-radius: 0.125rem;
}
}
.p-news__cat--important {
background-color: var(--color-important);
color: var(--color-white);
}
.p-news__text {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 1;
overflow: hidden;
padding-left: 0.875rem;
font-size: max(1rem, 10px);
font-weight: 500;
line-height: 1.5;
letter-spacing: 0.05em;
color: var(--color-black);
transition: var(--transition-hover);
}
@media screen and (max-width: 767px) {
.p-news__text {
grid-column: 1/-1;
padding-left: 0;
font-size: max(0.75rem, 10px);
line-height: 1.4;
letter-spacing: 0.1em;
}
}
.p-news__pagenavi {
margin-top: 3.5rem;
}
@media screen and (max-width: 767px) {
.p-news__pagenavi {
margin-top: 2.25rem;
}
}
.p-news-single {
max-width: 62.5rem;
margin-inline: auto;
}
.p-news-single__head {
padding-bottom: 1.5rem;
border-bottom: 1px solid var(--color-beige-deep);
}
@media screen and (max-width: 767px) {
.p-news-single__head {
padding-bottom: 1rem;
}
}
.p-news-single__meta {
display: flex;
align-items: center;
gap: 1.25rem;
}
@media screen and (max-width: 767px) {
.p-news-single__meta {
gap: 0.75rem;
}
}
.p-news-single__meta .p-news__cat {
margin-left: 0;
}
.p-news-single__date {
font-family: var(--en-font-family);
font-size: max(0.875rem, 10px);
letter-spacing: 0.05em;
}
@media screen and (max-width: 767px) {
.p-news-single__date {
font-size: max(0.75rem, 10px);
}
}
.p-news-single__title {
margin-top: 1rem;
font-size: max(1.625rem, 10px);
font-weight: 500;
line-height: 1.5;
letter-spacing: 0.08em;
color: var(--color-main);
}
@media screen and (max-width: 767px) {
.p-news-single__title {
margin-top: 0.75rem;
font-size: max(1.25rem, 10px);
}
}
.p-news-single__body {
margin-top: 2.5rem;
}
@media screen and (max-width: 767px) {
.p-news-single__body {
margin-top: 1.5rem;
}
}
.p-news-single__nav {
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
gap: 1.25rem;
margin-top: 5rem;
padding-top: 2rem;
border-top: 1px solid var(--color-beige-deep);
}
@media screen and (max-width: 767px) {
.p-news-single__nav {
gap: 0.75rem;
margin-top: 3rem;
padding-top: 1.5rem;
}
}
.p-news-single__nav-side--next {
text-align: right;
}
.p-news-single__nav-link,
.p-news-single__nav-list {
font-size: max(0.875rem, 10px);
font-weight: 500;
letter-spacing: 0.05em;
color: var(--color-black);
text-decoration: none;
}
@media screen and (max-width: 767px) {
.p-news-single__nav-link,
.p-news-single__nav-list {
font-size: max(0.75rem, 10px);
}
}
.p-news-single__nav-list {
color: var(--color-main);
text-decoration: underline;
text-underline-offset: 0.1875rem;
}
.p-news-single__body h2 {
text-align: left;
}
.p-news-single__body p {
overflow-x: clip;
}
@media (any-hover: hover) {
.p-news__link:hover .p-news__text,
.p-news__link:hover .p-news__date,
.p-news-single__nav-link:hover {
color: var(--color-main);
}
.p-news-single__nav-list:hover {
text-decoration-color: transparent;
}
.p-news__filter-item:not(.is-current):hover {
background-color: var(--color-beige-dark);
}
}
.p-nin-lead {
background-color: var(--sub-band);
}
.p-nin-line {
padding-top: 3.5rem;
border-top: 1px solid var(--color-beige-deep);
}
@media screen and (max-width: 767px) {
.p-nin-line {
padding-top: 2rem;
}
}
.p-nin-procedure__sub,
.p-nin-discharge__sub {
position: relative;
margin-top: 3.125rem;
padding: 1rem 1.625rem;
border-radius: 0.25rem;
background-color: var(--color-beige-band);
font-size: max(1.125rem, 10px);
font-weight: 500;
line-height: 1.5;
letter-spacing: 0.05em;
color: var(--color-black);
}
@media screen and (max-width: 767px) {
.p-nin-procedure__sub,
.p-nin-discharge__sub {
margin-top: 1.875rem;
padding: 0.75rem 1.25rem;
font-size: max(1rem, 10px);
}
}
.p-nin-procedure__sub::before,
.p-nin-discharge__sub::before {
content: "";
position: absolute;
top: 50%;
left: 0.6875rem;
width: 0.1875rem;
height: 2.4375rem;
background-color: var(--color-main);
transform: translateY(-50%);
}
@media screen and (max-width: 767px) {
.p-nin-procedure__sub::before,
.p-nin-discharge__sub::before {
left: 0.5rem;
height: 1.75rem;
}
}
.p-nin-procedure__list {
display: grid;
grid-template-columns: repeat(2, 1fr);
margin-top: 1.375rem;
border-right: 1px solid var(--color-beige-deep);
}
@media screen and (max-width: 767px) {
.p-nin-procedure__list {
grid-template-columns: 1fr;
border-right: none;
}
}
.p-nin-procedure__group {
padding: 0.6875rem 1.75rem 1.3125rem;
border-left: 1px solid var(--color-beige-deep);
}
@media screen and (max-width: 767px) {
.p-nin-procedure__group {
padding-inline: 0.625rem;
border-left: none;
}
}
@media screen and (max-width: 767px) {
.p-nin-procedure__group + .p-nin-procedure__group {
border-top: 1px solid var(--color-beige-deep);
}
}
.p-nin-procedure__group-title {
font-size: max(1.5rem, 10px);
font-weight: 500;
line-height: 1.5;
letter-spacing: 0.1em;
color: var(--color-black);
}
@media screen and (max-width: 767px) {
.p-nin-procedure__group-title {
font-size: max(1.125rem, 10px);
}
}
.p-nin-procedure__items {
display: grid;
grid-template-columns: 18.875rem 1fr;
grid-template-rows: repeat(4, auto);
grid-auto-flow: column;
gap: 0;
margin-top: 0.8125rem;
}
@media screen and (max-width: 767px) {
.p-nin-procedure__items {
grid-template-columns: 1fr;
grid-template-rows: none;
grid-auto-flow: row;
}
}
.p-nin-procedure__group:last-child .p-nin-procedure__items {
grid-template-columns: 1fr;
}
.p-nin-procedure__item {
position: relative;
padding-left: 1.1875rem;
font-size: max(0.875rem, 10px);
font-weight: 500;
line-height: 2;
letter-spacing: 0.05em;
}
.p-nin-procedure__item::before {
content: "";
position: absolute;
top: 0.5625rem;
left: 0;
width: 0.6875rem;
height: 0.6875rem;
border-radius: 50%;
background-color: var(--color-main);
}
.p-nin-ward {
padding-block: 4.0625rem 5.625rem;
background-color: var(--color-main);
}
@media screen and (max-width: 767px) {
.p-nin-ward {
padding-block: 2.5rem;
}
}
.p-nin-ward__title {
font-size: max(1.875rem, 10px);
font-weight: 500;
line-height: 1.5;
letter-spacing: 0.1em;
color: var(--color-white);
text-align: center;
}
@media screen and (max-width: 767px) {
.p-nin-ward__title {
font-size: max(1.25rem, 10px);
}
}
.p-nin-ward__list {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1.25rem;
margin-top: 2rem;
}
@media screen and (min-width: 768px) and (max-width: 1024px) {
.p-nin-ward__list {
grid-template-columns: repeat(2, 1fr);
}
}
@media screen and (max-width: 767px) {
.p-nin-ward__list {
grid-template-columns: 1fr;
}
}
.p-nin-ward__item {
position: relative;
display: flex;
flex-direction: column;
padding: 1.3125rem 0.8125rem 1.25rem 1.25rem;
border-radius: 0.625rem;
background-color: var(--color-white);
}
.p-nin-ward__item-title {
position: relative;
display: flex;
align-items: center;
min-height: 3.375rem;
margin-right: -0.875rem;
padding-left: 0.875rem;
font-size: max(1.25rem, 10px);
font-weight: 500;
line-height: 1.35;
letter-spacing: 0.1em;
color: var(--color-main);
}
@media screen and (max-width: 767px) {
.p-nin-ward__item-title {
min-height: 0;
padding-block: 0.25rem;
font-size: max(1.125rem, 10px);
}
}
.p-nin-ward__item-title::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 0.1875rem;
height: 100%;
background-color: var(--color-main);
}
.p-nin-ward__text {
margin-top: 0.5625rem;
min-height: 3.75rem;
font-size: max(0.875rem, 10px);
font-weight: 500;
line-height: 1.4285714286;
letter-spacing: 0.05em;
}
@media screen and (max-width: 767px) {
.p-nin-ward__text {
min-height: 0;
margin-top: 0.75rem;
}
}
.p-nin-ward__spec {
margin-top: 0.8125rem;
padding-top: 0.625rem;
border-top: 1px dotted var(--color-beige-deep);
}
@media screen and (max-width: 767px) {
.p-nin-ward__spec {
margin-top: 0.75rem;
padding-top: 0.625rem;
}
}
.p-nin-ward__spec-row {
display: grid;
grid-template-columns: 7rem 1fr;
font-size: max(0.875rem, 10px);
line-height: 1.7142857143;
letter-spacing: 0.05em;
}
.p-nin-ward__spec-row dt {
font-weight: 700;
}
.p-nin-ward__spec-row dd {
letter-spacing: 0;
}
.p-nin-ward__note {
margin-top: 0.3125rem;
min-height: 2.5rem;
font-size: max(0.75rem, 10px);
font-weight: 500;
line-height: 1.6666666667;
letter-spacing: 0.05em;
}
@media screen and (max-width: 767px) {
.p-nin-ward__note {
min-height: 0;
}
}
.p-nin-ward__more {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 0.5rem;
margin-top: 1rem;
padding-top: 1rem;
border-top: 1px dotted var(--color-beige-deep);
font-size: max(0.875rem, 10px);
font-weight: 500;
letter-spacing: 0.1em;
color: var(--color-black);
}
.p-nin-ward__more::after {
content: "";
position: absolute;
inset: 0;
border-radius: 0.625rem;
}
.p-nin-life,
.p-nin-visit {
background-color: var(--color-beige-band);
}
.p-nin-visit {
padding-bottom: 5.3125rem;
}
@media screen and (max-width: 767px) {
.p-nin-visit {
padding-bottom: 3.125rem;
}
}
.p-nin-life__schedule {
margin-top: 2.4375rem;
padding: 1.375rem 0 1.625rem;
border-radius: 0.625rem;
background-color: var(--color-white);
}
@media screen and (max-width: 767px) {
.p-nin-life__schedule {
margin-top: 1.5rem;
padding: 1.25rem 0 1.25rem;
}
}
.p-nin-life__sub {
margin-top: 0;
font-size: max(1.5rem, 10px);
font-weight: 500;
line-height: 1.5;
letter-spacing: 0.1em;
color: var(--color-main);
text-align: center;
}
@media screen and (max-width: 767px) {
.p-nin-life__sub {
font-size: max(1.125rem, 10px);
}
}
.p-nin-life__scroll {
display: block;
margin-top: 1.125rem;
}
@media screen and (max-width: 767px) {
.p-nin-life__scroll {
margin-top: 0.875rem;
}
}
.p-nin-life__image {
display: block;
width: 100%;
height: auto;
}
.p-nin-life__note {
margin-top: 0.75rem;
font-size: max(0.875rem, 10px);
font-weight: 500;
line-height: 1.7142857143;
letter-spacing: 0.05em;
}
@media screen and (max-width: 767px) {
.p-nin-life__note {
margin-top: 1.25rem;
font-size: max(0.75rem, 10px);
}
}
.p-nin-visit__caution {
margin-top: 1.25rem;
padding: 1.5rem 1.875rem 1.75rem;
border-radius: 0.625rem;
background-color: var(--color-white);
}
@media screen and (max-width: 767px) {
.p-nin-visit__caution {
padding: 1.25rem;
}
}
.p-nin-visit__caution-title {
font-size: max(1.25rem, 10px);
font-weight: 700;
line-height: 1.5;
letter-spacing: 0.05em;
color: var(--color-main);
}
@media screen and (max-width: 767px) {
.p-nin-visit__caution-title {
font-size: max(1rem, 10px);
}
}
.p-nin-visit__caution-text {
margin-top: 0.625rem;
font-size: max(0.9375rem, 10px);
font-weight: 500;
line-height: 1.7333333333;
letter-spacing: 0.05em;
}
@media screen and (max-width: 767px) {
.p-nin-visit__caution-text {
font-size: max(0.875rem, 10px);
}
}
.p-nin-discharge__sub {
margin-top: 3.0625rem;
}
.p-nin-discharge__note {
margin-top: 0.6875rem;
font-size: max(0.75rem, 10px);
font-weight: 500;
line-height: 2.1666666667;
letter-spacing: 0.05em;
}
.p-nin-discharge .c-step {
margin-top: 2.125rem;
}
@media screen and (max-width: 767px) {
.p-nin-discharge .c-step {
margin-top: 1.25rem;
}
}
.p-nin-discharge__banner {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1.875rem;
margin-top: 2.9375rem;
padding: 1.4375rem 1.5rem 1.3125rem 1.875rem;
border-radius: 0.625rem;
background-color: var(--color-white);
}
@media screen and (max-width: 767px) {
.p-nin-discharge__banner {
flex-direction: column;
align-items: flex-start;
padding: 1.25rem;
}
}
.p-nin-discharge__banner-title {
font-size: max(1.25rem, 10px);
font-weight: 700;
line-height: 1.5;
letter-spacing: 0.05em;
color: var(--color-main);
}
@media screen and (max-width: 767px) {
.p-nin-discharge__banner-title {
font-size: max(1rem, 10px);
}
}
.p-nin-discharge__banner-text {
margin-top: 0.5rem;
font-size: max(1rem, 10px);
font-weight: 500;
line-height: 1.8;
letter-spacing: 0.05em;
}
@media screen and (max-width: 767px) {
.p-nin-discharge__banner-text {
font-size: max(0.875rem, 10px);
}
}
.p-nin-discharge__banner .c-button {
flex-shrink: 0;
width: 17.625rem;
height: 4.375rem;
}
.p-nin-next__list {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 1.375rem;
margin-top: 2.3125rem;
}
@media screen and (max-width: 767px) {
.p-nin-next__list {
grid-template-columns: 1fr;
}
}
.p-nin-next__link {
position: relative;
display: block;
height: 100%;
padding: 2.6875rem 4rem 1.25rem 2.5rem;
border-radius: 0.625rem;
background-color: var(--color-white);
box-shadow: var(--shadow-card);
}
@media screen and (max-width: 767px) {
.p-nin-next__link {
padding-inline: 1.25rem 2.75rem;
}
}
.p-nin-next__item-title {
font-size: max(1.25rem, 10px);
font-weight: 700;
line-height: 1.5;
letter-spacing: 0.1em;
color: var(--color-main);
}
@media screen and (max-width: 767px) {
.p-nin-next__item-title {
font-size: max(1rem, 10px);
}
}
.p-nin-next__text {
margin-top: 0.1875rem;
font-size: max(0.875rem, 10px);
font-weight: 500;
line-height: 1.8;
letter-spacing: 0;
}
.p-nin-next__arrow {
position: absolute;
top: 50%;
right: 1.875rem;
translate: 0 -50%;
display: flex;
color: var(--color-main);
}
@media screen and (max-width: 767px) {
.p-nin-lead .c-lead__title {
letter-spacing: 0.01em;
}
}
@media (any-hover: hover) {
.p-nin-next__link:hover {
box-shadow: var(--shadow-card-hover);
translate: 0 -0.25rem;
}
.p-nin-next__link:hover .c-icon--arrow {
translate: 0 0;
}
}
@media (any-hover: hover) {
.p-nin-ward__more:hover {
color: var(--color-main);
}
}
.p-nin-flow__note {
margin-top: 0.6875rem;
font-size: max(0.75rem, 10px);
font-weight: 500;
line-height: 2.1666666667;
letter-spacing: 0.05em;
text-align: center;
}
.p-nin-visit__button-wrap {
display: flex;
justify-content: center;
margin-top: 2rem;
}
@media screen and (max-width: 767px) {
.p-nin-visit__button-wrap {
margin-top: 1.5rem;
}
}
.p-nin-amenity__text {
margin-top: 1rem;
}
.p-nin-amenity__label {
margin-top: 1rem;
font-size: max(0.875rem, 10px);
font-weight: 700;
color: var(--color-main);
}
.p-nin-amenity__list {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 1rem;
margin-top: 0.75rem;
}
@media screen and (max-width: 767px) {
.p-nin-amenity__list {
grid-template-columns: repeat(3, 1fr);
gap: 0.75rem 0.5rem;
}
}
.p-nin-amenity__item {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.375rem;
}
.p-nin-amenity__icon {
width: 6rem;
height: auto;
}
@media screen and (max-width: 767px) {
.p-nin-amenity__icon {
width: 4.5rem;
}
}
.p-nin-amenity__name {
font-size: max(0.875rem, 10px);
font-weight: 500;
text-align: center;
}
@media screen and (max-width: 767px) {
.p-nin-amenity__name {
font-size: max(0.75rem, 10px);
}
}
.p-overview-equipment {
padding-block: 4.375rem 5rem;
background-color: var(--sub-band);
}
.p-overview-performance {
padding-block: 4.375rem 5rem;
background-color: var(--sub-band);
}
.p-overview-lead__figure {
margin: 0;
}
.p-overview-lead__figure img {
display: block;
width: 100%;
height: 34.375rem;
-o-object-fit: cover;
object-fit: cover;
-o-object-position: center 70%;
object-position: center 70%;
border-radius: 0.25rem;
}
@media screen and (max-width: 767px) {
.p-overview-lead__figure img {
height: 15rem;
}
}
.p-overview-lead__text {
max-width: 45rem;
margin-top: 2.5rem;
margin-inline: auto;
text-align: center;
}
@media screen and (max-width: 767px) {
.p-overview-lead__text {
margin-top: 1.5rem;
text-align: left;
}
}
.p-overview-outline__def {
max-width: 57.5rem;
margin-inline: auto;
margin-top: 2.25rem;
}
@media screen and (max-width: 767px) {
.p-overview-outline__def {
margin-top: 1.5rem;
}
}
.p-overview-outline__def .c-def__row {
grid-template-columns: 11.25rem 1fr;
}
@media screen and (max-width: 767px) {
.p-overview-outline__def .c-def__row {
grid-template-columns: 1fr;
}
}
.p-overview-outline__note {
display: block;
margin-top: 0.5rem;
font-size: max(0.8125rem, 10px);
line-height: 1.8461538462;
letter-spacing: 0.05em;
color: var(--color-main);
}
.p-overview-standard__lead {
margin-top: 1.875rem;
text-align: center;
}
@media screen and (max-width: 767px) {
.p-overview-standard__lead {
margin-top: 1.25rem;
text-align: left;
}
}
.p-overview-standard__group {
margin-top: 3rem;
}
@media screen and (max-width: 767px) {
.p-overview-standard__group {
margin-top: 2rem;
}
}
.p-overview-standard__group-title {
padding-bottom: 0.75rem;
border-bottom: 1px solid var(--color-beige-deep);
font-size: max(1.25rem, 10px);
font-weight: 500;
line-height: 1.5;
letter-spacing: 0.1em;
color: var(--color-main);
}
@media screen and (max-width: 767px) {
.p-overview-standard__group-title {
font-size: max(1.0625rem, 10px);
}
}
.p-overview-standard__list {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1rem;
margin-top: 2rem;
}
@media screen and (max-width: 767px) {
.p-overview-standard__list {
grid-template-columns: 1fr;
gap: 0.75rem;
margin-top: 1.25rem;
}
}
.p-overview-standard__link {
display: flex;
align-items: center;
gap: 1rem;
min-height: 5.375rem;
padding: 1.25rem 1.25rem 1.25rem 1.5625rem;
border-radius: 0.25rem;
background-color: var(--color-white);
text-decoration: none;
transition: var(--transition-hover);
}
@media screen and (max-width: 767px) {
.p-overview-standard__link {
min-height: 4.5rem;
padding: 1rem;
}
}
@media (hover: hover) {
.p-overview-standard__link:hover {
box-shadow: var(--shadow-card-hover);
translate: 0 -0.25rem;
}
.p-overview-standard__link:hover .c-icon--arrow {
translate: 0 0;
}
}
.p-overview-standard__icon {
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
color: var(--color-main);
width: 2.75rem;
height: 2.75rem;
border-radius: 0.25rem;
background-color: var(--sub-band);
}
.p-overview-standard__body {
flex: 1;
min-width: 0;
}
.p-overview-standard__label {
display: block;
font-size: max(0.75rem, 10px);
font-weight: 700;
line-height: 1.5;
letter-spacing: 0.1em;
color: var(--color-main);
}
.p-overview-standard__name {
display: block;
margin-top: 0.125rem;
font-size: max(0.875rem, 10px);
font-weight: 500;
line-height: 1.4;
letter-spacing: 0;
color: var(--color-black);
white-space: nowrap;
}
@media screen and (max-width: 767px) {
.p-overview-standard__name {
font-size: max(0.875rem, 10px);
white-space: normal;
}
}
.p-overview-standard__link svg {
flex-shrink: 0;
color: var(--color-main);
}
.p-overview-standard__icon svg {
width: 1.375rem;
height: auto;
}
.p-overview-performance__badge {
display: block;
width: -moz-fit-content;
width: fit-content;
margin-top: 2.25rem;
margin-inline: auto;
padding: 0.5625rem 1.5rem;
border-radius: 0.25rem;
background-color: var(--color-main);
font-size: max(0.875rem, 10px);
font-weight: 700;
line-height: 1.5;
letter-spacing: 0.1em;
color: var(--color-white);
}
@media screen and (max-width: 767px) {
.p-overview-performance__badge {
margin-top: 1.5rem;
font-size: max(0.8125rem, 10px);
}
}
.p-overview-performance__list {
max-width: 63.75rem;
margin-top: 1.5rem;
margin-inline: auto;
border-top: 1px solid var(--color-beige-deep);
}
@media screen and (max-width: 767px) {
.p-overview-performance__list {
margin-top: 1.25rem;
}
}
.p-overview-performance__item {
display: grid;
grid-template-columns: 8.75rem 1fr 24.0625rem;
align-items: center;
gap: 1.25rem;
padding-block: 2.25rem;
border-bottom: 1px solid var(--color-beige-deep);
}
@media screen and (max-width: 767px) {
.p-overview-performance__item {
grid-template-columns: 4.5rem 1fr;
gap: 1rem;
padding-block: 1.5rem;
}
}
.p-overview-performance__icon {
display: flex;
align-items: center;
justify-content: center;
}
.p-overview-performance__icon img {
width: auto;
height: 5.5rem;
}
@media screen and (max-width: 767px) {
.p-overview-performance__icon img {
height: 3.25rem;
}
}
.p-overview-performance__body {
min-width: 0;
}
.p-overview-performance__title {
display: inline-block;
padding: 0.375rem 1rem;
border: 1px solid var(--color-main);
border-radius: 0.125rem;
font-size: max(1rem, 10px);
font-weight: 700;
line-height: 1.5;
letter-spacing: 0.05em;
color: var(--color-main);
}
@media screen and (max-width: 767px) {
.p-overview-performance__title {
font-size: max(0.875rem, 10px);
}
}
.p-overview-performance__note {
margin-top: 0.875rem;
font-size: max(0.8125rem, 10px);
font-weight: 500;
line-height: 1.6923076923;
letter-spacing: 0.05em;
color: var(--color-black);
}
.p-overview-performance__sub {
position: relative;
margin-top: 0.625rem;
padding-left: 1rem;
font-size: max(0.8125rem, 10px);
font-weight: 500;
line-height: 1.6923076923;
letter-spacing: 0.05em;
color: var(--color-black);
}
.p-overview-performance__sub::before {
content: "";
position: absolute;
top: 0.6875rem;
left: 0;
width: 0.5rem;
height: 1px;
background-color: var(--color-black);
}
.p-overview-performance__data {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 0.75rem;
}
@media screen and (max-width: 767px) {
.p-overview-performance__data {
grid-column: 1/-1;
gap: 0.5rem;
}
}
.p-overview-performance__ward {
font-size: max(0.8125rem, 10px);
font-weight: 500;
line-height: 1.5;
letter-spacing: 0.05em;
color: var(--color-black);
text-align: center;
}
.p-overview-performance__value {
margin-top: 0.375rem;
font-size: max(2.5rem, 10px);
font-weight: 700;
line-height: 1.3;
letter-spacing: 0.02em;
color: var(--color-black);
text-align: center;
}
@media screen and (max-width: 767px) {
.p-overview-performance__value {
font-size: max(1.75rem, 10px);
}
}
.p-overview-performance__unit {
margin-left: 0.25rem;
font-size: max(1.125rem, 10px);
font-weight: 700;
}
@media screen and (max-width: 767px) {
.p-overview-performance__unit {
font-size: max(0.875rem, 10px);
}
}
.p-overview-floor__lead {
margin-top: 1.875rem;
text-align: center;
}
@media screen and (max-width: 767px) {
.p-overview-floor__lead {
margin-top: 1.25rem;
text-align: left;
}
}
.p-overview-floor__movie {
max-width: 65rem;
margin-top: 1.875rem;
margin-inline: auto;
}
.p-overview-floor__movie .p-overview-floor__map-all {
height: auto;
-o-object-fit: contain;
object-fit: contain;
}
.p-overview-floor__movie img {
display: block;
width: 100%;
height: 38.8125rem;
-o-object-fit: cover;
object-fit: cover;
border-radius: 0.25rem;
}
@media screen and (max-width: 767px) {
.p-overview-floor__movie img {
height: 13.125rem;
}
}
.p-overview-floor__list {
max-width: 65rem;
margin-top: 3.75rem;
margin-inline: auto;
}
@media screen and (max-width: 767px) {
.p-overview-floor__list {
margin-top: 2rem;
}
}
.p-overview-floor__item {
display: grid;
grid-template-columns: 9.4375rem 1fr;
gap: 3.75rem;
padding-block: 3.125rem;
}
@media screen and (max-width: 767px) {
.p-overview-floor__item {
grid-template-columns: 6rem 1fr;
gap: 1.25rem;
padding-block: 1.75rem;
}
}
.p-overview-floor__item + .p-overview-floor__item {
border-top: 1px solid var(--color-beige-deep);
}
.p-overview-floor__map {
margin: 0;
}
.p-overview-floor__map img {
display: block;
width: 100%;
height: auto;
border: 1px solid var(--color-beige-deep);
border-radius: 0.125rem;
}
.p-overview-floor__num {
font-size: max(1.5rem, 10px);
font-weight: 700;
line-height: 1.4;
letter-spacing: 0.1em;
color: var(--color-main);
}
@media screen and (max-width: 767px) {
.p-overview-floor__num {
font-size: max(1.25rem, 10px);
}
}
.p-overview-floor__blocks {
display: flex;
gap: 4.4375rem;
margin-top: 1rem;
}
@media screen and (max-width: 767px) {
.p-overview-floor__blocks {
flex-direction: column;
gap: 1.25rem;
margin-top: 0.75rem;
}
}
.p-overview-floor__block {
flex: 1;
min-width: 0;
}
.p-overview-floor__block:only-child {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1.25rem 1.875rem;
align-items: start;
}
@media screen and (max-width: 767px) {
.p-overview-floor__block:only-child {
grid-template-columns: 1fr;
gap: 0.75rem;
}
}
.p-overview-floor__block-title {
padding: 0.875rem 1.0625rem;
background-color: var(--sub-band);
font-size: max(1.125rem, 10px);
font-weight: 700;
line-height: 1.5;
letter-spacing: 0.05em;
color: var(--color-black);
}
@media screen and (max-width: 767px) {
.p-overview-floor__block-title {
padding: 0.625rem 0.875rem;
font-size: max(1rem, 10px);
}
}
.p-overview-floor__rooms {
margin-top: 1.25rem;
padding-left: 1.0625rem;
}
@media screen and (max-width: 767px) {
.p-overview-floor__rooms {
margin-top: 0.75rem;
padding-left: 0.875rem;
}
}
.p-overview-floor__room {
font-size: max(0.9375rem, 10px);
font-weight: 500;
line-height: 2.1333333333;
letter-spacing: 0.05em;
color: var(--color-black);
}
@media screen and (max-width: 767px) {
.p-overview-floor__room {
font-size: max(0.875rem, 10px);
line-height: 1.8571428571;
}
}
.p-overview-tour__lead {
margin-top: 1.875rem;
text-align: center;
}
@media screen and (max-width: 767px) {
.p-overview-tour__lead {
margin-top: 1.25rem;
text-align: left;
}
}
.p-overview-tour__list {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 2.75rem 1.5rem;
margin-top: 2.25rem;
}
@media screen and (max-width: 767px) {
.p-overview-tour__list {
grid-template-columns: 1fr;
gap: 1.5rem;
margin-top: 1.5rem;
}
}
.p-overview-tour__item {
border-radius: 0.25rem;
background-color: var(--color-white);
overflow: hidden;
box-shadow: var(--shadow-card);
}
.p-overview-tour__figure {
margin: 0;
}
.p-overview-tour__figure img {
display: block;
width: 100%;
height: 15.5rem;
-o-object-fit: cover;
object-fit: cover;
}
@media screen and (max-width: 767px) {
.p-overview-tour__figure img {
height: 15rem;
}
}
.p-overview-tour__body {
padding: 1rem 1.25rem 1.5rem;
}
@media screen and (max-width: 767px) {
.p-overview-tour__body {
padding: 0.875rem 1rem 1.25rem;
}
}
.p-overview-tour__title {
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-overview-tour__title {
font-size: max(1.0625rem, 10px);
}
}
.p-overview-tour__text {
margin-top: 0.5625rem;
font-size: max(0.875rem, 10px);
font-weight: 500;
line-height: 1.7142857143;
letter-spacing: 0.05em;
color: var(--color-black);
}
.p-overview-equipment__slider {
margin-top: 2.25rem;
}
@media screen and (max-width: 767px) {
.p-overview-equipment__slider {
margin-top: 1.5rem;
}
}
.p-overview-equipment__lead {
margin-top: 1.875rem;
text-align: center;
}
@media screen and (max-width: 767px) {
.p-overview-equipment__lead {
margin-top: 1.25rem;
text-align: left;
}
}
.p-overview-related__list {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 2rem;
max-width: 57.5rem;
margin-top: 2.75rem;
margin-inline: auto;
}
@media screen and (max-width: 767px) {
.p-overview-related__list {
grid-template-columns: 1fr;
gap: 1rem;
margin-top: 1.75rem;
}
}
.p-overview-related__link {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1.25rem;
min-height: 10rem;
padding: 1.875rem 1.875rem 1.875rem 2.5rem;
border-radius: 0.25rem;
background-color: var(--color-white);
box-shadow: var(--shadow-card);
text-decoration: none;
transition: var(--transition-hover);
}
@media screen and (max-width: 767px) {
.p-overview-related__link {
min-height: 0;
padding: 1.5rem;
}
}
@media (hover: hover) {
.p-overview-related__link:hover {
box-shadow: var(--shadow-card-hover);
translate: 0 -0.25rem;
}
.p-overview-related__link:hover .c-icon--arrow {
translate: 0 0;
}
}
.p-overview-related__body {
display: block;
}
.p-overview-related__title {
display: block;
font-size: max(1.25rem, 10px);
font-weight: 500;
line-height: 1.5;
letter-spacing: 0.1em;
color: var(--color-main);
}
@media screen and (max-width: 767px) {
.p-overview-related__title {
font-size: max(1.0625rem, 10px);
}
}
.p-overview-related__text {
display: block;
margin-top: 0.5625rem;
font-size: max(0.875rem, 10px);
font-weight: 500;
line-height: 1.7142857143;
letter-spacing: 0.05em;
color: var(--color-black);
}
.p-overview-floor__photo {
margin: 1.25rem 0 0;
border-radius: 0.25rem;
overflow: hidden;
background-color: var(--color-beige-band);
}
.p-overview-floor__block:only-child .p-overview-floor__photo {
grid-column: 2;
grid-row: 1/span 2;
margin-top: 0;
}
@media screen and (max-width: 767px) {
.p-overview-floor__block:only-child .p-overview-floor__photo {
grid-column: 1;
grid-row: auto;
margin-top: 0.75rem;
}
}
.p-overview-floor__photo img {
display: block;
width: 100%;
height: auto;
aspect-ratio: 3/2;
-o-object-fit: cover;
object-fit: cover;
}
.p-right-lead {
max-width: 60.9375rem;
margin-top: 2.5rem;
margin-inline: auto;
line-height: 2;
text-align: center;
}
@media screen and (max-width: 767px) {
.p-right-lead {
margin-top: 1.25rem;
text-align: left;
}
}
.p-right-num {
max-width: 57.5rem;
margin-top: 3.5rem;
margin-inline: auto;
}
@media screen and (max-width: 767px) {
.p-right-num {
margin-top: 1.75rem;
}
}
.p-right-num__item {
display: grid;
grid-template-columns: 3.75rem 1fr;
gap: 1.75rem;
padding-block: 1.75rem 2rem;
border-top: 1px solid var(--color-beige-line);
}
@media screen and (max-width: 767px) {
.p-right-num__item {
grid-template-columns: 2.5rem 1fr;
gap: 0.75rem;
padding-block: 1.125rem 1.25rem;
}
}
.p-right-num__item:last-child {
border-bottom: 1px solid var(--color-beige-line);
}
.p-right-num__num {
font-family: var(--en-font-family);
font-size: max(1.75rem, 10px);
font-weight: 700;
line-height: 1.1;
letter-spacing: 0.05em;
color: var(--color-main);
}
@media screen and (max-width: 767px) {
.p-right-num__num {
font-size: max(1.25rem, 10px);
}
}
.p-right-num__title {
font-size: max(1.125rem, 10px);
font-weight: 700;
line-height: 1.5;
letter-spacing: 0.05em;
color: var(--color-main);
}
@media screen and (max-width: 767px) {
.p-right-num__title {
font-size: max(1rem, 10px);
}
}
.p-right-num__text {
margin-top: 0.625rem;
font-size: max(0.875rem, 10px);
font-weight: 500;
line-height: 2;
letter-spacing: 0.05em;
color: var(--color-black);
}
@media screen and (max-width: 767px) {
.p-right-num__text {
line-height: 1.8;
}
}
.p-right-infection__title {
max-width: 57.5rem;
margin-top: 3rem;
margin-inline: auto;
}
@media screen and (max-width: 767px) {
.p-right-infection__title {
margin-top: 1.75rem;
}
}
.p-right-infection__label {
max-width: 57.5rem;
margin-top: 1.5rem;
margin-inline: auto;
}
@media screen and (max-width: 767px) {
.p-right-infection__label {
margin-top: 1rem;
}
}
.p-right-dash {
max-width: 57.5rem;
margin-top: 2.25rem;
margin-inline: auto;
border-top: 1px solid var(--color-beige-line);
}
@media screen and (max-width: 767px) {
.p-right-dash {
margin-top: 1.5rem;
}
}
.p-right-dash__item {
position: relative;
padding: 1.25rem 1.75rem 1.25rem 2.875rem;
border-bottom: 1px solid var(--color-beige-line);
background-color: var(--color-white);
font-size: max(0.875rem, 10px);
font-weight: 500;
line-height: 1.85;
letter-spacing: 0.05em;
color: var(--color-black);
}
@media screen and (max-width: 767px) {
.p-right-dash__item {
padding: 0.875rem 1rem 0.875rem 1.75rem;
}
}
.p-right-dash__item::before {
content: "";
position: absolute;
top: 2.0625rem;
left: 1.75rem;
width: 0.5rem;
height: 1px;
background-color: var(--color-main);
}
@media screen and (max-width: 767px) {
.p-right-dash__item::before {
top: 1.5625rem;
left: 0.75rem;
}
}
.p-right-decision__note {
margin-top: 1.9375rem;
text-align: center;
}
@media screen and (max-width: 767px) {
.p-right-decision__note {
margin-top: 1.25rem;
text-align: left;
}
}
.p-right-policy__button-wrap {
display: flex;
justify-content: center;
margin-top: 1.625rem;
}
@media screen and (max-width: 767px) {
.p-right-policy__button-wrap {
margin-top: 1.25rem;
}
}
.p-right-system__def {
max-width: 57.5rem;
margin-inline: auto;
}
.p-right-system__def .c-def__row {
grid-template-columns: 15rem 1fr;
}
@media screen and (max-width: 767px) {
.p-right-system__def .c-def__row {
grid-template-columns: 1fr;
}
}
.p-right-card {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1rem;
max-width: 64.125rem;
margin-top: 3rem;
margin-inline: auto;
}
@media screen and (max-width: 767px) {
.p-right-card {
grid-template-columns: 1fr;
gap: 1rem;
margin-top: 1.75rem;
}
}
.p-right-card__item {
padding: 1.5625rem;
border: 1px solid var(--color-beige-line);
border-radius: 0.25rem;
background-color: var(--color-white);
}
@media screen and (max-width: 767px) {
.p-right-card__item {
padding: 1.25rem;
}
}
.p-right-card__title {
padding-bottom: 0.75rem;
border-bottom: 1px solid var(--color-beige-line);
font-size: max(1rem, 10px);
font-weight: 700;
line-height: 1.5;
letter-spacing: 0.05em;
color: var(--color-main);
}
@media screen and (max-width: 767px) {
.p-right-card__title {
font-size: max(0.9375rem, 10px);
}
}
.p-right-card__text {
margin-top: 1.125rem;
font-size: max(0.8125rem, 10px);
font-weight: 500;
line-height: 1.85;
letter-spacing: 0.05em;
color: var(--color-black);
}
.p-right-card__list {
margin-top: 1.125rem;
}
.p-right-card__list-item {
position: relative;
padding-left: 1rem;
font-size: max(0.8125rem, 10px);
font-weight: 500;
line-height: 1.85;
letter-spacing: 0.05em;
color: var(--color-black);
}
.p-right-card__list-item::before {
content: "";
position: absolute;
top: 0.5625rem;
left: 0;
width: 0.3125rem;
height: 0.3125rem;
border-radius: 50%;
background-color: var(--color-main);
}
.p-right-card--wide {
grid-template-columns: repeat(2, 1fr);
gap: 1.875rem;
max-width: 63.6875rem;
}
@media screen and (max-width: 767px) {
.p-right-card--wide {
grid-template-columns: 1fr;
gap: 1rem;
}
}
.p-right-related__list {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 1.375rem;
max-width: 57.5rem;
margin-top: 2.9375rem;
margin-inline: auto;
}
@media screen and (max-width: 767px) {
.p-right-related__list {
grid-template-columns: 1fr;
gap: 1rem;
margin-top: 1.75rem;
}
}
.p-right-related__link {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1.25rem;
min-height: 9.25rem;
padding: 1.875rem 1.875rem 1.875rem 2.5rem;
border-radius: 0.25rem;
background-color: var(--color-white);
box-shadow: var(--shadow-card);
text-decoration: none;
transition: var(--transition-hover);
}
@media screen and (max-width: 767px) {
.p-right-related__link {
min-height: 0;
padding: 1.5rem;
}
}
.p-right-related__body {
display: block;
}
.p-right-related__title {
display: block;
font-size: max(1.25rem, 10px);
font-weight: 500;
line-height: 1.5;
letter-spacing: 0.1em;
color: var(--color-main);
}
@media screen and (max-width: 767px) {
.p-right-related__title {
font-size: max(1.0625rem, 10px);
}
}
.p-right-related__text {
display: block;
margin-top: 0.5625rem;
font-size: max(0.875rem, 10px);
line-height: 1.7142857143;
letter-spacing: 0.05em;
color: var(--color-black);
}
@media (hover: hover) {
.p-right-related__link:hover {
box-shadow: var(--shadow-card-hover);
translate: 0 -0.25rem;
}
.p-right-related__link:hover .c-icon--arrow {
translate: 0 0;
}
}
.p-saiyou-lead {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 40rem);
gap: 2.75rem;
padding-top: 0.625rem;
}
@media screen and (max-width: 767px) {
.p-saiyou-lead {
grid-template-columns: 1fr;
gap: 1.5rem;
}
}
.p-saiyou-lead__text {
margin-top: 1.875rem;
font-size: max(0.9375rem, 10px);
font-weight: 500;
line-height: 2;
letter-spacing: 0.05em;
}
@media screen and (max-width: 767px) {
.p-saiyou-lead__text {
margin-top: 1rem;
font-size: max(0.875rem, 10px);
}
}
.p-saiyou-lead__buttons {
display: flex;
gap: 0.6875rem;
margin-top: 2.5rem;
}
@media screen and (max-width: 767px) {
.p-saiyou-lead__buttons {
flex-direction: column;
gap: 0.75rem;
margin-top: 1.5rem;
}
}
.p-saiyou-lead__buttons .c-button {
width: 15.75rem;
}
@media screen and (max-width: 767px) {
.p-saiyou-lead__buttons .c-button {
width: 100%;
}
}
.p-saiyou-lead__image {
aspect-ratio: 1280/901;
border-radius: 0.625rem;
overflow: hidden;
}
.p-saiyou-lead__image img {
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
}
.p-saiyou-message {
position: relative;
border-bottom: 1px solid var(--color-beige-deep);
}
.p-saiyou-message::before {
content: "";
position: absolute;
top: 0;
right: 0;
bottom: 0;
width: 52%;
background-image: linear-gradient(to right, var(--color-beige) 0, rgba(247, 243, 235, 0) 30%), url(//syokashi-hp.or.jp/wp-content/themes/syokashi-hp/images/saiyou/message-bg.webp);
background-position: left top, 76% center;
background-size: 100% 100%, cover;
background-repeat: no-repeat, no-repeat;
}
@media screen and (max-width: 767px) {
.p-saiyou-message::before {
content: none;
}
}
@media screen and (max-width: 767px) {
.p-saiyou-message::after {
content: "";
display: block;
aspect-ratio: 1100/757;
background-image: linear-gradient(to bottom, var(--color-beige) 0, rgba(247, 243, 235, 0) 1.875rem), url(//syokashi-hp.or.jp/wp-content/themes/syokashi-hp/images/saiyou/message-bg-sp.webp);
background-position: top center, center top;
background-size: 100% 1.875rem, 100% 100%;
background-repeat: no-repeat, no-repeat;
}
}
.p-saiyou-message > .l-inner {
position: relative;
z-index: 1;
padding-block: 6.6875rem 5.375rem;
}
@media screen and (max-width: 767px) {
.p-saiyou-message > .l-inner {
padding-block: 3.75rem 1.5rem;
}
}
.p-saiyou-message__title {
font-size: max(3.125rem, 10px);
font-weight: 500;
line-height: 1.4;
letter-spacing: 0.1em;
color: var(--color-black);
}
@media screen and (max-width: 767px) {
.p-saiyou-message__title {
font-size: max(1.5rem, 10px);
}
}
.p-saiyou-message__text {
margin-top: 1.5625rem;
max-width: 31.5625rem;
font-size: max(0.9375rem, 10px);
font-weight: 500;
line-height: 2;
letter-spacing: 0.1em;
}
@media screen and (max-width: 767px) {
.p-saiyou-message__text {
max-width: none;
margin-top: 1.5rem;
font-size: max(0.875rem, 10px);
}
}
.p-saiyou-message__text + .p-saiyou-message__text {
margin-top: 1rem;
}
@media screen and (max-width: 767px) {
.p-saiyou-message__text + .p-saiyou-message__text {
margin-top: 0.75rem;
}
}
.p-saiyou-message__role {
margin-top: 3.875rem;
font-size: max(0.875rem, 10px);
font-weight: 500;
line-height: 1;
letter-spacing: 0.05em;
}
@media screen and (max-width: 767px) {
.p-saiyou-message__role {
margin-top: 1.5rem;
}
}
.p-saiyou-message__name {
margin-top: 0;
font-size: max(1.875rem, 10px);
font-weight: 500;
line-height: 1.5;
letter-spacing: 0.1em;
}
@media screen and (max-width: 767px) {
.p-saiyou-message__name {
font-size: max(1.375rem, 10px);
}
}
.p-saiyou-jobs__entry {
margin-top: 5rem;
}
@media screen and (max-width: 767px) {
.p-saiyou-jobs__entry {
margin-top: 3rem;
}
}
.p-saiyou-jobs__group {
margin-top: 4.375rem;
text-align: center;
}
.p-saiyou-jobs__group-link {
transition: scale 0.3s ease-in-out;
}
@media (any-hover: hover) {
.p-saiyou-jobs__group-link:hover {
opacity: 1;
scale: 1.03;
}
}
.p-saiyou-jobs__group-link:focus-visible {
opacity: 1;
scale: 1.03;
}
.p-saiyou-jobs__group-link {
display: inline-block;
width: 37.1875rem;
max-width: 100%;
}
@media screen and (max-width: 767px) {
.p-saiyou-jobs__group-link {
width: 100%;
}
}
.p-saiyou-jobs__group-link img {
width: 100%;
height: auto;
}
.p-saiyou-jobs__list {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1.5625rem 1.25rem;
margin-top: 4.125rem;
}
@media screen and (max-width: 767px) {
.p-saiyou-jobs__list {
grid-template-columns: 1fr;
}
}
.p-saiyou-jobs__item {
display: flex;
flex-direction: column;
border-radius: 0.625rem;
background-color: var(--color-white);
box-shadow: var(--shadow-card);
overflow: hidden;
}
@media (any-hover: hover) {
.p-saiyou-jobs__item figure {
overflow: hidden;
}
.p-saiyou-jobs__item img {
transition: scale 0.3s ease-in-out;
}
.p-saiyou-jobs__item:hover {
opacity: 1;
}
.p-saiyou-jobs__item:hover img {
scale: 1.05;
}
}
.p-saiyou-jobs__item:focus-visible {
opacity: 1;
}
.p-saiyou-jobs__item:focus-visible img {
scale: 1.05;
}
.p-saiyou-jobs__link {
display: flex;
flex-direction: column;
flex-grow: 1;
padding: 0 1.25rem 1.3125rem;
}
.p-saiyou-jobs__link:hover {
opacity: 1;
}
button.p-saiyou-jobs__link {
width: 100%;
border: none;
background: none;
text-align: left;
cursor: pointer;
}
.p-saiyou-jobs__dialog-list {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 1rem 1.5rem;
margin-top: 1.5rem;
}
@media screen and (max-width: 767px) {
.p-saiyou-jobs__dialog-list {
flex-direction: column;
align-items: center;
}
}
.p-saiyou-jobs__dialog-link {
transition: scale 0.3s ease-in-out;
}
@media (any-hover: hover) {
.p-saiyou-jobs__dialog-link:hover {
opacity: 1;
scale: 1.03;
}
}
.p-saiyou-jobs__dialog-link:focus-visible {
opacity: 1;
scale: 1.03;
}
.p-saiyou-jobs__dialog-link {
display: block;
}
.p-saiyou-jobs__dialog-link img {
width: 14.625rem;
height: 4.375rem;
-o-object-fit: contain;
object-fit: contain;
}
.p-saiyou-jobs__item:has(.p-saiyou-jobs__link:focus-visible) img {
scale: 1.05;
}
.p-saiyou-jobs__image {
aspect-ratio: 285/205;
margin: 0 -1.25rem 0.6875rem;
border-radius: 0.625rem 0.625rem 0 0;
overflow: hidden;
}
.p-saiyou-jobs__image img {
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
}
.p-saiyou-jobs__item-title {
font-size: max(1rem, 10px);
font-weight: 700;
line-height: 1.5;
letter-spacing: 0.05em;
color: var(--color-main);
}
.p-saiyou-jobs__text {
margin-top: 0.5625rem;
margin-bottom: 1.125rem;
min-height: 4.125rem;
font-size: max(0.9375rem, 10px);
font-weight: 500;
line-height: 1.4666666667;
letter-spacing: 0.05em;
}
@media screen and (max-width: 767px) {
.p-saiyou-jobs__text {
min-height: 0;
font-size: max(0.875rem, 10px);
}
}
.p-saiyou-jobs__more {
display: flex;
align-items: center;
gap: 0.5rem;
margin-top: auto;
padding-top: 1.1875rem;
border-top: 1px dotted var(--color-beige-deep);
font-size: max(0.875rem, 10px);
font-weight: 500;
letter-spacing: 0.05em;
color: var(--color-black);
}
.p-saiyou-jobs__list--hidden {
overflow: hidden;
max-height: 0;
margin-top: 0;
padding-top: 1.5625rem;
transition: max-height 0.45s ease;
}
.p-saiyou-jobs__list[hidden] {
display: none;
}
.p-saiyou-jobs__more-wrap {
margin-top: 3.5rem;
text-align: center;
}
.p-saiyou-jobs__more-wrap .p-saiyou-jobs__more {
cursor: pointer;
background: none;
border: none;
}
.p-saiyou-jobs__more[aria-expanded=true] .c-icon__bar {
display: none;
}
.p-saiyou-jobs__more-wrap .p-saiyou-jobs__more {
display: inline-flex;
padding-top: 0;
border-top: none;
}
.p-saiyou-reason {
display: grid;
grid-template-columns: minmax(0, 1fr) 43.75%;
gap: 6.3020833333%;
align-items: start;
background-color: var(--color-beige-band);
}
@media screen and (max-width: 767px) {
.p-saiyou-reason {
grid-template-columns: 1fr;
gap: 0;
}
}
.p-saiyou-reason__body {
padding-block: 7.375rem 5.625rem;
padding-left: max(1.25rem, 50vw - 37.5rem);
}
@media screen and (max-width: 767px) {
.p-saiyou-reason__body {
padding-block: 2.5rem 1.875rem;
padding-inline: 1.25rem;
width: 100%;
max-width: 40rem;
margin-inline: auto;
}
}
.p-saiyou-reason__head-sub {
font-size: max(1.875rem, 10px);
font-weight: 500;
line-height: 1;
letter-spacing: 0.1em;
color: var(--color-black);
}
@media screen and (max-width: 767px) {
.p-saiyou-reason__head-sub {
font-size: max(1.125rem, 10px);
}
}
.p-saiyou-reason__head-title {
font-size: max(5.625rem, 10px);
font-weight: 500;
line-height: 1.2;
letter-spacing: 0.1em;
color: var(--color-main);
}
@media screen and (max-width: 767px) {
.p-saiyou-reason__head-title {
font-size: max(2.25rem, 10px);
}
}
.p-saiyou-reason__image {
position: sticky;
top: var(--header-height);
aspect-ratio: 840/830;
}
@media screen and (max-width: 767px) {
.p-saiyou-reason__image {
position: static;
aspect-ratio: auto;
margin-bottom: 2.5rem;
}
}
.p-saiyou-reason__image img {
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
}
@media screen and (max-width: 767px) {
.p-saiyou-reason__image img {
height: auto;
}
}
.p-saiyou-reason__head-title-sm {
font-size: max(3.375rem, 10px);
}
@media screen and (max-width: 767px) {
.p-saiyou-reason__head-title-sm {
font-size: max(1.375rem, 10px);
}
}
.p-saiyou-reason__list {
margin-top: 5.25rem;
}
.p-saiyou-reason__item {
position: relative;
min-height: 17.5625rem;
padding: 3.4375rem 2.9375rem 2.5rem;
border-radius: 0.625rem;
background-color: var(--color-white);
}
@media screen and (max-width: 767px) {
.p-saiyou-reason__item {
min-height: 0;
padding: 1.875rem 1.25rem 1.625rem;
}
}
.p-saiyou-reason__item + .p-saiyou-reason__item {
margin-top: 5.375rem;
}
@media screen and (max-width: 767px) {
.p-saiyou-reason__item + .p-saiyou-reason__item {
margin-top: 3.125rem;
}
}
.p-saiyou-reason__num {
position: absolute;
top: -2.0625rem;
left: 0;
font-family: var(--en-font-family);
font-size: max(2.375rem, 10px);
font-weight: 400;
line-height: 1;
letter-spacing: 0.1em;
color: var(--color-white);
text-shadow: 0 0 1px rgba(117, 91, 76, 0.15);
}
@media screen and (max-width: 767px) {
.p-saiyou-reason__num {
font-size: max(1.625rem, 10px);
}
}
.p-saiyou-reason__title {
margin-top: 0;
font-size: max(1.5rem, 10px);
font-weight: 500;
line-height: 1.3333333333;
letter-spacing: 0.1em;
color: var(--color-main);
}
@media screen and (max-width: 767px) {
.p-saiyou-reason__title {
font-size: max(1.125rem, 10px);
}
}
.p-saiyou-reason__text {
margin-top: 0.9375rem;
font-size: max(0.9375rem, 10px);
font-weight: 500;
line-height: 2;
letter-spacing: 0.05em;
}
@media screen and (max-width: 767px) {
.p-saiyou-reason__text {
font-size: max(0.875rem, 10px);
}
}
.p-saiyou-interview {
overflow: hidden;
}
.p-saiyou-interview__slider {
margin-top: 3.125rem;
padding-bottom: 1.875rem;
}
.p-saiyou-interview__slider .splide__track {
overflow: visible;
}
.p-saiyou-interview__slider .splide__list {
align-items: stretch;
}
.p-saiyou-interview__slider .splide__arrow {
top: calc(50% - 0.9375rem);
width: 3.4375rem;
height: 3.4375rem;
background-color: transparent;
color: var(--color-black);
opacity: 1;
transition: var(--transition-hover);
}
.p-saiyou-interview__slider .splide__arrow--prev {
left: 0;
transform: translate(-50%, -50%);
}
.p-saiyou-interview__slider .splide__arrow--next {
right: 0;
transform: translate(50%, -50%);
}
.p-saiyou-interview__slider .splide__arrow svg {
width: 3.4375rem;
height: 3.4375rem;
fill: none;
}
.p-saiyou-interview__item {
border-radius: 0.625rem;
background-color: var(--color-white);
box-shadow: var(--shadow-card);
overflow: hidden;
}
.p-saiyou-interview__image {
aspect-ratio: 380/389;
overflow: hidden;
}
.p-saiyou-interview__image img {
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
}
.p-saiyou-interview__body {
position: relative;
padding: 1.375rem 1.9375rem 1.875rem;
}
.p-saiyou-interview__icon {
position: absolute;
top: 1.8125rem;
right: 1.8125rem;
display: flex;
align-items: center;
justify-content: center;
width: 1.5rem;
height: 1.5rem;
border-radius: 50%;
}
.p-saiyou-interview__icon svg {
width: 100%;
height: 100%;
}
.p-saiyou-interview__role {
font-size: max(0.75rem, 10px);
font-weight: 500;
line-height: 2;
letter-spacing: 0.05em;
}
.p-saiyou-interview__name {
padding-right: 2.125rem;
font-size: max(1.5rem, 10px);
font-weight: 500;
line-height: 1.3333333333;
letter-spacing: 0.1em;
color: var(--color-main);
}
@media screen and (max-width: 767px) {
.p-saiyou-interview__name {
font-size: max(1.125rem, 10px);
}
}
.p-saiyou-interview__text {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
margin-top: 0.625rem;
font-size: max(0.875rem, 10px);
font-weight: 500;
line-height: 1.7142857143;
letter-spacing: 0.05em;
}
.p-saiyou-numbers {
padding-block: 4.5rem 5.3125rem;
background-color: var(--color-beige-band);
}
@media screen and (max-width: 767px) {
.p-saiyou-numbers {
padding-block: 2.5rem 3.125rem;
}
}
.p-saiyou-numbers__list {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 2.0625rem 1.875rem;
margin-top: 2.5rem;
}
@media screen and (max-width: 767px) {
.p-saiyou-numbers__list {
flex-direction: column;
}
}
.p-saiyou-numbers__item {
width: calc((100% - 3.75rem) / 3);
padding: 2.5rem 1.875rem 2.125rem;
border-radius: 0.625rem;
background-color: var(--color-white);
text-align: center;
}
@media screen and (max-width: 767px) {
.p-saiyou-numbers__item {
width: 100%;
padding: 1.75rem 1.25rem 1.5rem;
}
}
.p-saiyou-numbers__num {
font-family: var(--en-font-family);
font-size: max(0.625rem, 10px);
letter-spacing: 0.1em;
color: var(--color-black);
}
.p-saiyou-numbers__title {
margin-top: 0.25rem;
font-size: max(1.25rem, 10px);
font-weight: 700;
line-height: 1.2;
letter-spacing: 0.05em;
color: var(--color-main);
}
@media screen and (max-width: 767px) {
.p-saiyou-numbers__title {
font-size: max(1rem, 10px);
}
}
.p-saiyou-numbers__chart {
--chart-1: #e44e00;
--chart-2: #e97132;
--chart-3: #be631e;
--chart-4: #985d32;
--chart-5: var(--color-main);
position: relative;
width: 12.5rem;
margin: 1.5rem auto 0;
aspect-ratio: 1;
}
.p-saiyou-numbers__pie {
display: block;
width: 100%;
height: 100%;
}
.p-saiyou-numbers__label {
position: absolute;
top: 50%;
left: 50%;
display: flex;
flex-direction: column;
align-items: center;
line-height: 1.1;
color: var(--color-white);
translate: -50% -50%;
transform: rotate(var(--deg)) translateY(calc(var(--r) * -1)) rotate(calc(var(--deg) * -1));
}
.p-saiyou-numbers__label-name {
font-size: max(0.8125rem, 10px);
font-weight: 700;
letter-spacing: 0.05em;
}
.p-saiyou-numbers__label-value {
font-family: var(--en-font-family);
font-size: max(1.375rem, 10px);
font-weight: 400;
}
.p-saiyou-numbers__label-value small {
font-size: max(0.8125rem, 10px);
}
.p-saiyou-career__list {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 3.6875rem 0;
margin-top: 3.6875rem;
}
@media screen and (max-width: 767px) {
.p-saiyou-career__list {
grid-template-columns: 1fr;
gap: 2.5rem;
}
}
.p-saiyou-career__item {
padding-inline: 1.5625rem;
border-inline: 1px solid var(--color-beige-deep);
}
@media screen and (max-width: 767px) {
.p-saiyou-career__item {
padding-inline: 0.3125rem;
border-inline: none;
}
}
.p-saiyou-career__item:nth-child(even) {
border-left: none;
}
.p-saiyou-career__head {
display: grid;
place-items: center;
}
.p-saiyou-career__num {
grid-area: 1/1;
font-family: var(--en-font-family);
font-size: max(5rem, 10px);
font-weight: 400;
line-height: 1;
color: var(--color-white);
text-shadow: 0 0 1px rgba(117, 91, 76, 0.15);
}
@media screen and (max-width: 767px) {
.p-saiyou-career__num {
font-size: max(2.125rem, 10px);
}
}
.p-saiyou-career__title {
grid-area: 1/1;
text-align: center;
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-saiyou-career__title {
font-size: max(1.125rem, 10px);
}
}
.p-saiyou-career__text {
margin-top: 0.5625rem;
text-align: center;
font-size: max(1rem, 10px);
font-weight: 500;
line-height: 2;
letter-spacing: 0.05em;
}
@media screen and (max-width: 767px) {
.p-saiyou-career__text {
font-size: max(0.875rem, 10px);
}
}
.p-saiyou-welfare {
padding-block: 4.375rem 4.875rem;
background-color: var(--color-beige-band);
}
@media screen and (max-width: 767px) {
.p-saiyou-welfare {
padding-block: 2.5rem 3.125rem;
}
}
.p-saiyou-welfare__list {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1.875rem;
margin-top: 2.5rem;
}
@media screen and (max-width: 767px) {
.p-saiyou-welfare__list {
grid-template-columns: 1fr;
}
}
.p-saiyou-welfare__group {
padding: 1.625rem 1.875rem 1.875rem;
border-radius: 0.625rem;
background-color: var(--color-white);
}
.p-saiyou-welfare__group-title {
font-size: max(1.5rem, 10px);
font-weight: 500;
line-height: 1.3333333333;
letter-spacing: 0.1em;
color: var(--color-main);
}
@media screen and (max-width: 767px) {
.p-saiyou-welfare__group-title {
font-size: max(1.125rem, 10px);
}
}
.p-saiyou-welfare__items {
margin-top: 0.875rem;
}
.p-saiyou-welfare__item {
position: relative;
padding-left: 1.125rem;
font-size: max(0.875rem, 10px);
font-weight: 500;
line-height: 1.7142857143;
letter-spacing: 0.05em;
}
.p-saiyou-welfare__item::before {
content: "";
position: absolute;
top: 0.4375rem;
left: 0.25rem;
width: 0.4375rem;
height: 0.4375rem;
border-radius: 50%;
background-color: var(--color-main);
}
.p-saiyou-contact {
padding-block: 3.125rem 3.1875rem;
background-color: var(--color-main);
}
@media screen and (max-width: 767px) {
.p-saiyou-contact {
padding-block: 2.5rem;
}
}
.p-saiyou-contact__inner {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 49.375rem);
align-items: center;
gap: 1.875rem;
}
@media screen and (max-width: 767px) {
.p-saiyou-contact__inner {
grid-template-columns: 1fr;
gap: 1.5rem;
}
}
.p-saiyou-contact__inner:has(.p-saiyou-contact__list > :nth-child(3):last-child) {
grid-template-columns: minmax(21.25rem, max-content) minmax(0, 1fr);
}
@media screen and (max-width: 767px) {
.p-saiyou-contact__inner:has(.p-saiyou-contact__list > :nth-child(3):last-child) {
grid-template-columns: 1fr;
}
}
.p-saiyou-contact__inner:has(.p-saiyou-contact__list > :only-child) {
grid-template-columns: max-content minmax(0, 30rem);
justify-content: center;
}
@media screen and (max-width: 767px) {
.p-saiyou-contact__inner:has(.p-saiyou-contact__list > :only-child) {
grid-template-columns: 1fr;
}
}
.p-saiyou-contact__en {
font-family: var(--en-font-family);
font-size: max(5rem, 10px);
font-weight: 400;
line-height: 1;
letter-spacing: 0.05em;
color: var(--color-white);
}
@media screen and (max-width: 767px) {
.p-saiyou-contact__en {
font-size: max(3rem, 10px);
}
}
.p-saiyou-contact__lead {
margin-top: 0.625rem;
font-size: max(1.25rem, 10px);
font-weight: 500;
letter-spacing: 0.1em;
color: var(--color-white);
}
@media screen and (max-width: 767px) {
.p-saiyou-contact__lead {
font-size: max(0.875rem, 10px);
}
}
.p-saiyou-contact__list {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 1.25rem;
}
@media screen and (max-width: 767px) {
.p-saiyou-contact__list {
grid-template-columns: 1fr;
gap: 1rem;
}
}
.p-saiyou-contact__list:has(> :only-child) {
grid-template-columns: 1fr;
}
.p-saiyou-contact__list:has(> :nth-child(3):last-child) {
grid-template-columns: repeat(3, 1fr);
}
@media screen and (max-width: 767px) {
.p-saiyou-contact__list:has(> :nth-child(3):last-child) {
grid-template-columns: 1fr;
}
}
.p-saiyou-contact__card {
display: flex;
flex-direction: column;
height: 100%;
padding: 2.9375rem 1.25rem 2.5rem;
border-radius: 0.625rem;
background-color: var(--color-white);
text-align: center;
transition: var(--transition-hover);
}
@media screen and (max-width: 767px) {
.p-saiyou-contact__card {
position: relative;
}
}
.p-saiyou-contact__list:has(> :nth-child(3):last-child) .p-saiyou-contact__card {
padding-inline: 0.75rem;
}
.p-saiyou-contact__list:has(> :nth-child(3):last-child) .p-saiyou-contact__link--sm {
font-size: clamp(12px, 1.5vw, 20px);
}
@media screen and (max-width: 767px) {
.p-saiyou-contact__list:has(> :nth-child(3):last-child) .p-saiyou-contact__link--sm {
font-size: max(1.25rem, 10px);
}
}
.p-saiyou-contact__tel {
font-size: max(1.75rem, 10px);
}
@media screen and (max-width: 767px) {
.p-saiyou-contact__tel {
font-size: max(1.5rem, 10px);
}
}
@media (any-hover: hover) {
.p-saiyou-contact__card:hover {
box-shadow: var(--shadow-card-hover);
translate: 0 -0.25rem;
}
.p-saiyou-contact__card:hover .c-icon--arrow {
translate: 0 0;
}
}
.p-saiyou-contact__label {
font-family: var(--en-font-family);
font-size: max(1rem, 10px);
letter-spacing: 0.05em;
color: var(--color-main);
}
.p-saiyou-contact__link {
margin-top: 0.75rem;
font-size: max(1.5rem, 10px);
font-weight: 500;
line-height: 1.4;
letter-spacing: 0.1em;
color: var(--color-main);
}
@media screen and (max-width: 767px) {
.p-saiyou-contact__link {
font-size: max(1.25rem, 10px);
}
}
.p-saiyou-contact__tel {
margin-top: 0.375rem;
font-family: var(--en-font-family);
font-size: max(2.125rem, 10px);
letter-spacing: 0.02em;
color: var(--color-main);
}
@media screen and (max-width: 767px) {
.p-saiyou-contact__tel {
font-size: max(1.75rem, 10px);
}
}
.p-saiyou-contact__note {
margin-top: auto;
font-size: max(0.8125rem, 10px);
font-weight: 500;
letter-spacing: 0.05em;
color: var(--color-black);
}
@media screen and (max-width: 767px) {
.p-saiyou-contact__note {
font-size: max(0.75rem, 10px);
}
}
.p-saiyou-contact__icon {
display: flex;
align-items: center;
justify-content: center;
width: 1.5rem;
height: 1.5rem;
margin: 1.875rem auto 0;
}
@media screen and (max-width: 767px) {
.p-saiyou-contact__icon {
position: absolute;
top: 50%;
right: 1.25rem;
margin: 0;
transform: translateY(-50%);
}
}
.p-saiyou-contact__icon svg {
width: 100%;
height: 100%;
}
.p-saiyou-interview__image img {
transition: var(--transition-hover);
}
@media (any-hover: hover) {
.p-saiyou-interview__link:hover .p-saiyou-interview__image img {
scale: 1.05;
}
.p-saiyou-interview__link:hover .c-icon--arrow {
translate: 0 0;
}
}
@media (any-hover: hover) {
.p-saiyou-interview__slider .splide__arrow:hover:not(:disabled) {
color: var(--color-main);
opacity: 1;
}
}
.p-saiyou-reason__photos {
position: sticky;
top: var(--header-height);
display: grid;
gap: 1.5rem;
width: 70%;
margin: 7.375rem auto 5.625rem;
}
@media screen and (max-width: 767px) {
.p-saiyou-reason__photos {
position: static;
grid-template-columns: repeat(2, 1fr);
gap: 0.625rem;
width: auto;
margin: 0 1.25rem 2.5rem;
}
}
.p-saiyou-reason__photos img {
width: 100%;
height: auto;
aspect-ratio: 3/2;
-o-object-fit: cover;
object-fit: cover;
border-radius: 0.625rem;
}
.p-sp-cta {
display: none;
}
@media screen and (max-width: 767px) {
.p-sp-cta {
position: fixed;
right: 0;
bottom: 0;
left: 0;
z-index: 30;
display: block;
padding: 0 0.5rem;
}
}
.p-sp-cta__list {
display: flex;
gap: 0.375rem;
margin: 0;
padding: 0;
list-style: none;
}
.p-sp-cta__item {
flex: 1 1 0;
min-width: 0;
}
.p-sp-cta__link {
position: relative;
display: flex;
align-items: center;
justify-content: center;
gap: 0.3125rem;
height: 2.875rem;
padding-inline: 0.375rem;
border-radius: 0.625rem 0.625rem 0 0;
text-align: center;
transition: filter 0.3s ease-in-out, background-color 0.3s ease-in-out;
}
@media (hover: hover) {
.p-sp-cta__link:hover {
opacity: 1;
}
.p-sp-cta__link--reserve:hover,
.p-sp-cta__link--seikei:hover {
filter: brightness(1.15);
}
.p-sp-cta__link--access:hover {
background-color: var(--color-beige);
}
}
.p-sp-cta__link--access {
border: 1px solid var(--color-main);
background-color: var(--color-white);
color: var(--color-black);
}
.p-sp-cta__link--reserve {
background-color: var(--color-main);
color: var(--color-white);
}
.p-sp-cta__link--seikei {
background-color: var(--color-accent);
color: var(--color-white);
}
.p-sp-cta__icon {
display: flex;
flex-shrink: 0;
}
.p-sp-cta__icon svg {
width: auto;
height: 0.9375rem;
}
.p-sp-cta__link--access .p-sp-cta__icon {
color: var(--color-main);
}
.p-sp-cta__label {
display: block;
overflow: hidden;
white-space: nowrap;
font-size: max(0.8125rem, 10px);
font-weight: 500;
line-height: 1;
letter-spacing: 0.1em;
}
.p-sub-mv {
position: relative;
width: 100%;
height: 25rem;
padding-top: var(--header-height);
background-color: var(--color-gray);
}
@media screen and (max-width: 767px) {
.p-sub-mv {
height: 13.75rem;
}
}
.p-sub-mv--image {
background-image: var(--sub-mv-image);
background-size: cover;
background-position: left center;
}
.p-sub-mv--image::before {
content: "";
position: absolute;
inset: 0;
background-color: rgba(46, 46, 46, 0.25);
}
.p-sub-mv--default {
--sub-mv-image: url(//syokashi-hp.or.jp/wp-content/themes/syokashi-hp/images/common/sub-mv.webp);
}
.p-sub-mv__inner.l-inner {
position: relative;
height: 100%;
}
.p-sub-mv__title-wrap {
height: 100%;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
.p-sub-mv__title-en {
font-size: max(1.25rem, 10px);
color: var(--color-white);
letter-spacing: 0.1em;
text-transform: uppercase;
}
.p-sub-mv__title-ja {
font-size: max(3.75rem, 10px);
font-weight: 500;
line-height: 1.333;
letter-spacing: 0.1em;
color: var(--color-white);
}
@media screen and (max-width: 767px) {
.p-sub-mv__title-ja {
font-size: max(1.375rem, 10px);
}
}
.p-top-access {
padding-bottom: 6.5625rem;
}
@media screen and (max-width: 767px) {
.p-top-access {
padding-bottom: 3.125rem;
}
}
.p-top-access__wrap {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 0.625rem;
margin-top: 1.75rem;
}
@media screen and (max-width: 767px) {
.p-top-access__wrap {
grid-template-columns: 1fr;
gap: 0.6875rem;
margin-top: 0.75rem;
}
}
.p-top-access__box {
display: flex;
flex-direction: column;
padding: 0.8125rem 1.875rem 1.8125rem;
border-radius: 0.25rem;
background-color: var(--color-white);
}
@media screen and (max-width: 767px) {
.p-top-access__box {
padding: 0.25rem 0.9375rem 1.375rem;
border-radius: 0.625rem;
}
}
.p-top-access__table {
width: 100%;
border-collapse: collapse;
font-size: max(1rem, 10px);
letter-spacing: 0.05em;
}
@media screen and (max-width: 767px) {
.p-top-access__table {
font-size: max(0.75rem, 10px);
letter-spacing: 0;
}
}
.p-top-access__table th,
.p-top-access__table td {
padding: 1.1875rem 0.25rem;
border-bottom: 1px solid var(--color-beige-deep);
text-align: center;
font-weight: 400;
line-height: 1;
}
.p-top-access__table thead th:first-child,
.p-top-access__table tbody th {
text-align: left;
white-space: nowrap;
}
.p-top-access__table tbody td {
color: var(--color-main);
}
.p-top-access__note {
margin-top: 0.625rem;
font-size: max(0.75rem, 10px);
letter-spacing: 0.05em;
color: var(--color-main);
}
.p-top-access__info {
margin-top: 0.3125rem;
}
@media screen and (max-width: 767px) {
.p-top-access__info {
margin-top: 0;
}
}
.p-top-access__info-row {
display: flex;
gap: 0.3125rem;
padding-block: 0.375rem;
font-size: max(0.875rem, 10px);
line-height: 1.3571428571;
letter-spacing: 0.05em;
}
@media screen and (max-width: 767px) {
.p-top-access__info-row {
flex-direction: column;
gap: 0;
font-size: max(0.75rem, 10px);
line-height: 1.5;
}
}
.p-top-access__info--grouped {
margin-top: 1.875rem;
padding-top: 0.8125rem;
border-top: 1px solid var(--color-beige-deep);
}
@media screen and (max-width: 767px) {
.p-top-access__info--grouped {
margin-top: 1rem;
}
}
.p-top-access__info--grouped .p-top-access__info-row:nth-child(3) {
margin-top: 0.6875rem;
padding-top: 1.0625rem;
border-top: 1px solid var(--color-beige-deep);
}
@media screen and (max-width: 767px) {
.p-top-access__info--grouped .p-top-access__info-row:nth-child(3) {
margin-top: 0.375rem;
padding-top: 0.6875rem;
padding-bottom: 0;
}
}
@media screen and (max-width: 767px) {
.p-top-access__info--grouped .p-top-access__info-row:nth-child(4) {
padding-top: 0;
}
}
.p-top-access__info--bordered .p-top-access__info-row {
padding-block: 0;
line-height: 2.8571428571;
border-bottom: 1px solid var(--color-beige-deep);
}
@media screen and (max-width: 767px) {
.p-top-access__info--bordered .p-top-access__info-row {
padding-block: 0.5rem;
line-height: 1.5;
}
}
.p-top-access__info--bordered .p-top-access__info-row:last-child {
border-bottom: none;
}
.p-top-access__info-row dt {
flex-shrink: 0;
width: 6rem;
font-weight: 700;
}
@media screen and (max-width: 767px) {
.p-top-access__info-row dt {
width: auto;
font-size: max(0.75rem, 10px);
}
}
.p-top-access__info-row dd a[href^="tel:"] {
font-weight: 700;
color: var(--color-main);
}
.p-top-access__caution {
display: block;
margin-top: 0.25rem;
font-size: max(0.875rem, 10px);
color: var(--color-black);
}
.p-top-access__map {
aspect-ratio: 535/270;
overflow: hidden;
border-radius: 0.25rem;
}
@media screen and (max-width: 767px) {
.p-top-access__map {
aspect-ratio: 318/270;
}
}
.p-top-access__map iframe {
width: 100%;
height: 100%;
display: block;
}
.p-top-access__button {
margin-top: auto;
align-self: flex-start;
}
@media screen and (max-width: 767px) {
.p-top-access__button {
margin-top: 0.8125rem;
}
}
.p-top-access__box--access {
padding-top: 2rem;
}
@media screen and (max-width: 767px) {
.p-top-access__box--access {
padding-top: 0.9375rem;
}
}
.p-top-access__box--access .p-top-access__button {
margin-top: 0.6875rem;
}
@media screen and (max-width: 767px) {
.p-top-access__box--access .p-top-access__button {
margin-top: 0.4375rem;
}
}
@media screen and (max-width: 767px) {
.p-top-access__title {
font-size: max(1.125rem, 10px);
}
}
@media screen and (max-width: 767px) {
.p-top-access__table th,
.p-top-access__table td {
padding: 0.875rem 0.125rem;
}
}
@media screen and (max-width: 767px) {
.p-top-access__note,
.p-top-access__caution {
font-size: max(0.75rem, 10px);
letter-spacing: 0.04em;
}
}
@media screen and (max-width: 767px) {
.p-top-access__info--grouped .p-top-access__info-row:nth-child(n+3) {
flex-direction: row;
gap: 0.5rem;
}
}
@media screen and (max-width: 767px) {
.p-top-access__info--grouped .p-top-access__info-row:nth-child(n+3) dt {
width: 3.0625rem;
}
}
.p-top-department {
position: relative;
padding-block: 3.875rem 5rem;
background-color: var(--color-beige-band);
}
@media screen and (max-width: 767px) {
.p-top-department {
padding-block: 1.875rem 1.125rem;
}
}
.p-top-department__inner {
position: relative;
z-index: 1;
}
.p-top-department::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 0;
aspect-ratio: 3840/795;
background-image: url(//syokashi-hp.or.jp/wp-content/themes/syokashi-hp/images/top/department-bg.webp);
background-size: cover;
background-position: center;
z-index: 0;
max-height: 24.8125rem;
}
@media screen and (max-width: 767px) {
.p-top-department::after {
aspect-ratio: 780/1858;
background-image: url(//syokashi-hp.or.jp/wp-content/themes/syokashi-hp/images/top/department-bg-sp.webp);
width: 100%;
max-height: 58.0625rem;
}
}
.p-top-department__title {
text-align: center;
}
@media screen and (max-width: 767px) {
.p-top-department__title {
font-size: max(1.125rem, 10px);
text-align: left;
}
}
.p-top-department__list {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1.125rem;
margin-top: 2.0625rem;
}
@media screen and (max-width: 767px) {
.p-top-department__list {
grid-template-columns: 1fr;
gap: 0.3125rem;
margin-top: 1.6875rem;
}
}
.p-top-department__card {
min-height: 24.125rem;
padding: 2.25rem 2.4375rem 0.5625rem 2.5rem;
border-radius: 0.375rem;
background-color: var(--color-white);
box-shadow: var(--shadow-card);
}
@media screen and (max-width: 767px) {
.p-top-department__card {
position: relative;
min-height: 0;
padding: 1.5625rem 1.25rem 0.5625rem;
border-radius: 0.625rem;
}
}
.p-top-department__card-title {
display: flex;
align-items: center;
gap: 1.125rem;
font-size: max(1.5rem, 10px);
font-weight: 500;
line-height: 1;
letter-spacing: 0.02em;
color: var(--color-black);
}
@media screen and (max-width: 767px) {
.p-top-department__card-title {
gap: 0.75rem;
font-size: max(1rem, 10px);
letter-spacing: 0.1em;
}
}
.p-top-department__card-title::after {
content: "";
flex: 1;
height: 1px;
background-color: var(--color-beige-deep);
}
@media screen and (max-width: 767px) {
.p-top-department__card-title::after {
display: none;
}
}
.p-top-department__card-icon {
display: block;
flex-shrink: 0;
height: 2.5625rem;
width: auto;
}
@media screen and (max-width: 767px) {
.p-top-department__card-icon {
position: absolute;
top: 1.125rem;
right: 1.25rem;
height: 2.5rem;
}
}
@media screen and (max-width: 767px) {
.p-top-department__card:nth-child(3) .p-top-department__card-icon {
height: 1.875rem;
}
}
.p-top-department__banner {
position: relative;
display: flex;
align-items: center;
height: 6.875rem;
margin-top: 2.9375rem;
border-radius: 0.25rem;
overflow: hidden;
color: var(--color-white);
}
@media screen and (max-width: 767px) {
.p-top-department__banner {
height: 5.6875rem;
margin-top: 1.5rem;
border-radius: 0.375rem;
}
}
.p-top-department__banner img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
}
.p-top-department__banner::after {
content: "";
position: absolute;
inset: 0;
background-color: rgba(0, 0, 0, 0.25);
}
.p-top-department__banner-text {
position: relative;
z-index: 1;
padding-left: 1.5rem;
font-size: max(1.5rem, 10px);
font-weight: 500;
line-height: 1;
letter-spacing: 0.1em;
}
@media screen and (min-width: 768px) and (max-width: 1250px) {
.p-top-department__banner-text {
padding-left: 1rem;
font-size: max(1.375rem, 10px);
letter-spacing: 0;
white-space: nowrap;
}
}
@media screen and (max-width: 767px) {
.p-top-department__banner-text {
padding-left: 1.25rem;
font-size: max(1rem, 10px);
}
}
.p-top-department__banner-arrow {
position: relative;
z-index: 1;
margin-left: auto;
margin-right: 1.25rem;
display: flex;
}
@media screen and (min-width: 768px) and (max-width: 1250px) {
.p-top-department__banner-arrow {
margin-right: 0.75rem;
}
}
.p-top-department__items {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: repeat(var(--dep-rows, 1), auto);
grid-auto-flow: column;
-moz-column-gap: 1.25rem;
column-gap: 1.25rem;
margin-top: 1.25rem;
}
@media screen and (min-width: 768px) and (max-width: 1250px) {
.p-top-department__items {
grid-template-columns: 1fr;
grid-template-rows: none;
grid-auto-flow: row;
}
}
@media screen and (max-width: 767px) {
.p-top-department__items {
grid-template-columns: 1fr;
grid-template-rows: none;
grid-auto-flow: row;
-moz-column-gap: 0;
column-gap: 0;
margin-top: 0;
}
}
.p-top-department__item a {
display: flex;
align-items: center;
gap: 0.625rem;
padding-block: 1.5rem;
border-bottom: 1px solid var(--color-beige-deep);
font-size: clamp(0.8125rem, 1vw, 1rem);
font-weight: 500;
line-height: 1;
letter-spacing: 0.05em;
}
@media screen and (max-width: 767px) {
.p-top-department__item a {
gap: 0.75rem;
padding-block: 0.875rem;
border-bottom: 1px dotted var(--color-beige-deep);
font-size: max(0.875rem, 10px);
letter-spacing: 0.1em;
}
}
.p-top-department__item--last-row a {
border-bottom: none;
}
@media screen and (min-width: 768px) and (max-width: 1250px) {
.p-top-department__item--last-row a {
border-bottom: 1px solid var(--color-beige-deep);
}
}
@media screen and (max-width: 767px) {
.p-top-department__item--last-row a {
border-bottom: 1px dotted var(--color-beige-deep);
}
}
.p-top-department__item svg {
flex-shrink: 0;
width: 1.375rem;
height: 1.375rem;
color: var(--color-main);
}
@media screen and (min-width: 768px) and (max-width: 1250px) {
.p-top-department__item:last-child a {
border-bottom: none;
}
}
@media screen and (max-width: 767px) {
.p-top-department__item:last-child a {
border-bottom: none;
}
}
.p-top-department__banner img {
transition: var(--transition-hover);
}
@media (any-hover: hover) {
.p-top-department__banner:hover img {
scale: 1.05;
}
}
@media (any-hover: hover) {
.p-top-department__item a:hover {
color: var(--color-main);
}
}
@media (min-width: 1251px) and (max-width: 1700px) {
.p-top-department__card {
padding-inline: 1.5rem;
}
.p-top-department__items {
grid-template-columns: auto auto;
-moz-column-gap: 0.75rem;
column-gap: 0.75rem;
}
.p-top-department__item a {
gap: 0.375rem;
letter-spacing: 0;
}
}
.p-top-facility {
padding-block: 3.75rem 4.6875rem;
background-color: var(--color-beige-band);
}
@media screen and (max-width: 767px) {
.p-top-facility {
padding-block: 2.9375rem 3.75rem;
}
}
.p-top-facility__list {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1.875rem;
margin-top: 2.1875rem;
}
@media screen and (max-width: 767px) {
.p-top-facility__list {
grid-template-columns: 1fr;
gap: 0.6875rem;
margin-top: 0.75rem;
}
}
.p-top-facility__link {
position: relative;
display: flex;
flex-direction: column;
height: 100%;
padding: 1.875rem 3.125rem 2.0625rem;
border-radius: 0.625rem;
background-color: var(--color-white);
box-shadow: var(--shadow-card);
text-align: center;
}
@media screen and (max-width: 767px) {
.p-top-facility__link {
height: auto;
padding: 0.8125rem 1.25rem 1.25rem;
text-align: left;
}
}
.p-top-facility__badge {
position: absolute;
top: 0.75rem;
right: 0.75rem;
display: flex;
align-items: center;
justify-content: center;
min-width: 3.0625rem;
height: 1.6875rem;
border-radius: 0.125rem;
background-color: var(--color-badge);
font-size: max(0.75rem, 10px);
font-weight: 700;
line-height: 1;
letter-spacing: 0.1em;
color: var(--color-black);
}
@media screen and (max-width: 767px) {
.p-top-facility__badge {
top: 1.125rem;
right: 1.25rem;
min-width: 3.0625rem;
height: 1.25rem;
}
}
.p-top-facility__num {
display: block;
font-family: var(--en-font-family);
font-size: max(0.625rem, 10px);
letter-spacing: 0.1em;
color: var(--color-black);
}
.p-top-facility__item-title {
margin-top: 0.5rem;
font-size: max(1.25rem, 10px);
font-weight: 500;
line-height: 1.5;
letter-spacing: 0.1em;
color: var(--color-main);
}
@media screen and (max-width: 767px) {
.p-top-facility__item-title {
margin-top: 0.1875rem;
font-size: max(1rem, 10px);
font-weight: 700;
line-height: 1.4;
}
}
.p-top-facility__text {
margin-top: 0.875rem;
text-align: left;
}
@media screen and (max-width: 767px) {
.p-top-facility__text {
margin-top: 0.25rem;
font-size: max(0.8125rem, 10px);
line-height: 1.538;
letter-spacing: 0.05em;
}
}
.p-top-facility__more {
display: inline-flex;
align-items: center;
align-self: center;
gap: 0.5rem;
margin-top: auto;
padding-top: 1.25rem;
font-size: max(0.875rem, 10px);
letter-spacing: 0.05em;
color: var(--color-main);
}
@media screen and (max-width: 767px) {
.p-top-facility__more {
align-self: flex-end;
padding-top: 0.375rem;
font-size: max(0.6875rem, 10px);
letter-spacing: 0.1em;
}
}
@media screen and (max-width: 767px) {
.p-top-facility__title {
font-size: max(1.125rem, 10px);
}
}
@media (any-hover: hover) {
.p-top-facility__link:hover {
box-shadow: var(--shadow-card-hover);
translate: 0 -0.25rem;
}
.p-top-facility__link:hover .c-icon--arrow {
translate: 0 0;
}
}
.p-top-feature__list {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1.875rem;
margin-top: 1.875rem;
}
@media screen and (max-width: 767px) {
.p-top-feature__list {
grid-template-columns: 1fr;
gap: 1.125rem;
margin-top: 0.8125rem;
}
}
.p-top-feature__image {
position: relative;
aspect-ratio: 380/320;
border-radius: 0.625rem;
overflow: hidden;
}
@media screen and (max-width: 767px) {
.p-top-feature__image {
aspect-ratio: 350/170;
}
}
.p-top-feature__image img {
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
}
.p-top-feature__image {
container-type: inline-size;
}
.p-top-feature__num {
position: absolute;
right: 4cqi;
bottom: -0.16em;
font-family: var(--en-font-family);
font-size: 15.5cqi;
font-weight: 400;
line-height: 1;
letter-spacing: 0.05em;
color: rgba(255, 255, 255, 0.85);
text-shadow: 0 0 1rem rgba(0, 0, 0, 0.18);
white-space: nowrap;
pointer-events: none;
}
@media screen and (max-width: 767px) {
.p-top-feature__num {
font-size: 12cqi;
}
}
.p-top-feature__item-title {
margin-top: 1rem;
font-size: clamp(18px, 1.72vw, 24px);
font-weight: 700;
line-height: 1.3333333333;
letter-spacing: 0.1em;
color: var(--color-main);
}
@media screen and (min-width: 768px) and (max-width: 1250px) {
.p-top-feature__item-title {
font-size: max(1.375rem, 10px);
letter-spacing: 0.05em;
}
}
@media screen and (max-width: 767px) {
.p-top-feature__item-title {
margin-top: 0.8125rem;
font-size: max(1rem, 10px);
line-height: 1.4375;
}
}
.p-top-feature__text {
margin-top: 0.875rem;
}
@media screen and (max-width: 767px) {
.p-top-feature__text {
margin-top: 0.1875rem;
font-size: max(0.75rem, 10px);
line-height: 1.5;
letter-spacing: 0.05em;
}
}
@media screen and (max-width: 767px) {
.p-top-feature__inner.l-inner {
padding-inline: 1.25rem;
}
}
@media screen and (max-width: 767px) {
.p-top-feature__title {
font-size: max(1.125rem, 10px);
}
}
@media screen and (max-width: 767px) {
.p-top-feature__item-title br {
display: none;
}
}
@media screen and (max-width: 767px) {
.p-top-feature__item:nth-child(2) .p-top-feature__item-title br {
display: inline;
}
}
.p-top-mv {
position: relative;
height: 46.1875rem;
margin-top: var(--header-height);
}
@media screen and (max-width: 767px) {
.p-top-mv {
height: 40.625rem;
}
}
.p-top-mv__bg {
position: absolute;
top: calc(var(--header-height) * -1);
right: 0;
left: 0;
height: 55.5625rem;
overflow: hidden;
isolation: isolate;
}
@media screen and (max-width: 767px) {
.p-top-mv__bg {
top: 0;
height: 40.625rem;
}
}
.p-top-mv__slide {
position: absolute;
inset: 0;
opacity: 0;
animation: p-top-mv-slide 27.5s linear infinite;
}
@media screen and (max-width: 767px) {
.p-top-mv__slide {
animation-name: p-top-mv-slide-sp;
}
}
.p-top-mv__slide:nth-child(1) {
opacity: 1;
animation-delay: -1.2s;
}
.p-top-mv__slide:nth-child(2) {
animation-delay: 4.3s;
}
.p-top-mv__slide:nth-child(3) {
animation-delay: 9.8s;
}
.p-top-mv__slide:nth-child(4) {
animation-delay: 15.3s;
}
.p-top-mv__slide:nth-child(5) {
animation-delay: 20.8s;
}
.p-top-mv__slide img {
position: absolute;
left: -2.1739130435%;
width: 104.347826087%;
height: 100%;
max-width: none;
-o-object-fit: cover;
object-fit: cover;
}
@media screen and (max-width: 767px) {
.p-top-mv__slide img {
left: 0;
width: 100%;
}
}
.p-top-mv__slide--group img {
-o-object-position: center 75%;
object-position: center 75%;
}
@media screen and (max-width: 767px) {
.p-top-mv__slide--group img {
-o-object-position: center;
object-position: center;
}
}
@keyframes p-top-mv-slide {
0% {
opacity: 0;
transform: translateX(0.3423913043%);
z-index: 5;
}
4.4% {
opacity: 1;
transform: translateX(0);
z-index: 5;
}
20% {
z-index: 5;
}
20.1% {
z-index: 4;
}
24.4% {
opacity: 1;
transform: translateX(-1.5652173913%);
}
40% {
z-index: 4;
}
40.1% {
z-index: 3;
}
60% {
z-index: 3;
}
60.1% {
z-index: 2;
}
80% {
z-index: 2;
}
80.1% {
z-index: 1;
}
100% {
opacity: 1;
transform: translateX(-1.5652173913%);
z-index: 1;
}
}
@media (prefers-reduced-motion: reduce) {
.p-top-mv__slide {
animation: none;
}
.p-top-mv__slide:not(:first-child) {
opacity: 0;
}
}
.p-top-mv__bg::after {
content: "";
position: absolute;
inset: 0;
z-index: 6;
pointer-events: none;
background: linear-gradient(90deg, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0) 100%);
}
@media screen and (max-width: 767px) {
.p-top-mv__bg::after {
background: none;
}
}
.p-top-mv__inner {
position: relative;
display: flex;
flex-direction: column;
height: 100%;
padding-top: 11.6875rem;
padding-left: 6rem;
color: var(--color-white);
}
@media screen and (max-width: 767px) {
.p-top-mv__inner {
padding-top: 1.5rem;
padding-left: 1.25rem;
padding-right: 0.3125rem;
}
}
.p-top-mv__title {
font-size: max(3.75rem, 10px);
font-weight: 500;
line-height: 1.333;
letter-spacing: 0.1em;
font-feature-settings: "palt" 1;
}
@media screen and (max-width: 767px) {
.p-top-mv__title {
font-size: max(1.875rem, 10px);
line-height: 1.067;
}
}
.p-top-mv__lead {
margin-top: 1.5625rem;
font-size: max(1rem, 10px);
font-weight: 500;
line-height: 2.5;
letter-spacing: 0.05em;
}
@media screen and (max-width: 767px) {
.p-top-mv__lead {
margin-top: 0.375rem;
font-size: max(0.6875rem, 10px);
line-height: 1.636;
letter-spacing: 0.05em;
}
}
@keyframes p-top-mv-slide-sp {
0% {
opacity: 0;
z-index: 5;
}
4.4% {
opacity: 1;
z-index: 5;
}
20% {
z-index: 5;
}
20.1% {
z-index: 4;
}
24.4% {
opacity: 1;
}
40% {
z-index: 4;
}
40.1% {
z-index: 3;
}
60% {
z-index: 3;
}
60.1% {
z-index: 2;
}
80% {
z-index: 2;
}
80.1% {
z-index: 1;
}
100% {
opacity: 1;
z-index: 1;
}
}
.p-top-nav {
position: relative;
z-index: 2;
}
.p-top-nav__list {
display: grid;
gap: 0.75rem;
}
@media screen and (max-width: 767px) {
.p-top-nav__list {
gap: 0.4375rem 0.5625rem;
}
}
.p-top-nav__list--primary {
grid-template-columns: repeat(5, 1fr);
}
@media screen and (max-width: 767px) {
.p-top-nav__list--primary {
grid-template-columns: repeat(2, 1fr);
}
}
.p-top-nav__list--secondary {
grid-template-columns: repeat(3, 1fr);
margin-top: 0.75rem;
}
@media screen and (max-width: 767px) {
.p-top-nav__list--secondary {
grid-template-columns: repeat(3, 1fr);
gap: 0.25rem;
margin-top: 0.4375rem;
}
}
.p-top-nav__link {
position: relative;
overflow: hidden;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 0.5rem;
height: 11.875rem;
padding-block: 1.5rem;
padding-inline: 1rem;
border-radius: 0.625rem;
background-color: var(--color-white);
box-shadow: var(--shadow-card);
text-align: center;
}
@media screen and (max-width: 767px) {
.p-top-nav__link {
height: 9.375rem;
gap: 0.25rem;
padding-block: 1.25rem;
padding-inline: 0.625rem;
}
}
@media (hover: hover) {
.p-top-nav__link:hover {
opacity: 1;
}
}
.p-top-nav__link--row {
flex-direction: row;
justify-content: space-between;
height: 7.5rem;
text-align: left;
}
@media screen and (max-width: 767px) {
.p-top-nav__link--row {
flex-direction: column;
align-items: center;
justify-content: center;
height: 7.625rem;
padding: 1rem 0.5rem;
text-align: center;
}
}
.p-top-nav__list--secondary .p-top-nav__link {
transition: var(--transition-hover);
}
@media (hover: hover) {
.p-top-nav__list--secondary .p-top-nav__link:hover {
background-color: #ffe4c0;
}
}
.p-top-nav__arrow {
position: absolute;
top: 1rem;
right: 1rem;
z-index: 2;
color: var(--color-main);
}
@media screen and (max-width: 767px) {
.p-top-nav__arrow {
display: none;
}
}
.p-top-nav__icon {
position: relative;
display: block;
width: 100%;
height: 3.5rem;
}
@media screen and (max-width: 767px) {
.p-top-nav__icon {
height: 2.875rem;
}
}
.p-top-nav__icon img {
position: absolute;
bottom: 0;
left: 50%;
z-index: 1;
transform: translateX(-50%);
}
@media screen and (min-width: 768px) and (max-width: 1250px) {
.p-top-nav__icon img {
width: auto;
max-height: 100%;
}
}
.p-top-nav__list--primary .p-top-nav__icon::before {
content: "";
position: absolute;
bottom: var(--nav-circle-y);
left: 50%;
width: 3.125rem;
height: 3.125rem;
margin-left: var(--nav-circle-x);
border-radius: 50%;
background-color: var(--nav-circle-color);
backface-visibility: hidden;
transition: var(--transition-hover);
}
.p-top-nav__item:hover .p-top-nav__icon::before,
.p-top-nav__item:focus-within .p-top-nav__icon::before {
scale: 16;
}
.p-top-nav__text-group,
.p-top-nav__text,
.p-top-nav__en {
position: relative;
z-index: 2;
}
.p-top-nav__icon img,
.p-top-nav__text-group,
.p-top-nav__text,
.p-top-nav__en {
transform: translateZ(0);
backface-visibility: hidden;
}
.p-top-nav__icon img {
transform: translate(-50%, 0) translateZ(0);
}
.p-top-nav__list--primary .p-top-nav__item:nth-child(1) .p-top-nav__icon {
--nav-circle-x: -0.875rem;
--nav-circle-y: -0.125rem;
--nav-circle-color: #c7d8f7;
}
.p-top-nav__list--primary .p-top-nav__item:nth-child(2) .p-top-nav__icon {
--nav-circle-x: -2.8125rem;
--nav-circle-y: 0.25rem;
--nav-circle-color: #ffe4c0;
}
.p-top-nav__list--primary .p-top-nav__item:nth-child(3) .p-top-nav__icon {
--nav-circle-x: -0.5625rem;
--nav-circle-y: -1.125rem;
--nav-circle-color: #dfcef1;
}
.p-top-nav__list--primary .p-top-nav__item:nth-child(4) .p-top-nav__icon {
--nav-circle-x: -0.75rem;
--nav-circle-y: 0.625rem;
--nav-circle-color: #c8edf3;
}
.p-top-nav__list--primary .p-top-nav__item:nth-child(5) .p-top-nav__icon {
--nav-circle-x: -1.6875rem;
--nav-circle-y: 0.6875rem;
--nav-circle-color: #ffcecd;
}
@media screen and (max-width: 767px) {
.p-top-nav__list--primary .p-top-nav__item:nth-child(5) .p-top-nav__icon {
grid-column: 2;
grid-row: 1/3;
justify-self: end;
width: auto;
height: auto;
}
}
.p-top-nav__link--row .p-top-nav__text br {
display: none;
}
@media screen and (max-width: 767px) {
.p-top-nav__link--row .p-top-nav__text br {
display: inline;
}
}
.p-top-nav__link--row .p-top-nav__icon {
flex-shrink: 0;
width: auto;
height: auto;
margin-right: 0.8125rem;
}
@media screen and (max-width: 767px) {
.p-top-nav__link--row .p-top-nav__icon {
order: -1;
margin-right: 0;
margin-bottom: 0.5rem;
}
}
.p-top-nav__link--row .p-top-nav__icon img {
position: static;
transform: none;
}
.p-top-nav__list--primary .p-top-nav__text {
margin-top: 0.625rem;
}
@media screen and (max-width: 767px) {
.p-top-nav__list--primary .p-top-nav__text {
margin-top: 0.6875rem;
}
}
.p-top-nav__text {
display: block;
font-size: max(1.25rem, 10px);
font-weight: 500;
line-height: 1.5;
letter-spacing: 0.05em;
white-space: nowrap;
color: var(--color-black);
}
@media screen and (max-width: 767px) {
.p-top-nav__text {
font-size: max(0.875rem, 10px);
letter-spacing: 0;
}
}
.p-top-nav__en {
display: block;
font-family: var(--en-font-family);
font-size: max(0.75rem, 10px);
letter-spacing: 0.1em;
color: var(--color-black);
}
@media screen and (max-width: 767px) {
.p-top-nav__en {
font-size: max(0.625rem, 10px);
letter-spacing: 0.05em;
}
}
@media screen and (max-width: 767px) {
.p-top-nav__inner.l-inner {
padding-inline: 1.25rem;
}
}
@media screen and (max-width: 767px) {
.p-top-nav__list--primary .p-top-nav__item:nth-child(5) {
grid-column: 1/-1;
}
}
@media screen and (max-width: 767px) {
.p-top-nav__list--primary .p-top-nav__item:nth-child(5) .p-top-nav__link {
display: grid;
grid-template-columns: 1fr auto;
align-items: center;
height: 5.125rem;
padding-inline: 1.25rem 3.1875rem;
text-align: left;
}
}
@media screen and (max-width: 767px) {
.p-top-nav__list--primary .p-top-nav__item:nth-child(5) .p-top-nav__icon img {
position: static;
transform: none;
}
}
@media screen and (max-width: 767px) {
.p-top-nav__list--primary .p-top-nav__item:nth-child(5) .p-top-nav__icon::before {
display: none;
}
}
@media screen and (max-width: 767px) {
.p-top-nav__list--primary .p-top-nav__item:nth-child(5) .p-top-nav__text,
.p-top-nav__list--primary .p-top-nav__item:nth-child(5) .p-top-nav__en {
grid-column: 1;
margin-top: 0;
text-align: left;
}
}
@media screen and (max-width: 767px) {
.p-top-nav__link--row .p-top-nav__text {
font-size: max(0.875rem, 10px);
line-height: 1.43;
}
}
.p-top-news__inner {
display: grid;
grid-template-columns: 14.5rem 1fr;
align-items: start;
}
@media screen and (max-width: 767px) {
.p-top-news__inner {
grid-template-columns: 1fr;
gap: 1.5rem;
}
}
.p-top-news__tab {
grid-column: 2;
grid-row: 1;
display: flex;
gap: 0.5rem;
justify-content: flex-end;
}
@media screen and (max-width: 767px) {
.p-top-news__tab {
grid-column: 1;
grid-row: auto;
justify-content: flex-start;
flex-wrap: wrap;
display: none;
}
}
.p-top-news__tab-item {
flex: 0 1 11.6875rem;
min-width: 0;
}
@media screen and (max-width: 767px) {
.p-top-news__tab-item {
flex: 0 0 auto;
}
}
.p-top-news__tab-btn {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 2.5rem;
border: none;
border-radius: 0.25rem;
background-color: var(--color-white);
font-family: inherit;
font-size: max(0.875rem, 10px);
font-weight: 500;
line-height: 1;
letter-spacing: 0.05em;
color: var(--color-black);
cursor: pointer;
transition: var(--transition-hover);
}
@media screen and (max-width: 767px) {
.p-top-news__tab-btn {
padding-inline: 1rem;
}
}
.p-top-news__tab-btn.is-active {
background-color: var(--color-main);
color: var(--color-white);
}
.p-top-news__select {
display: none;
}
@media screen and (max-width: 767px) {
.p-top-news__select {
display: block;
grid-column: 2;
grid-row: 1;
}
}
.p-top-news__panel {
display: none;
}
.p-top-news__panel.is-active {
display: block;
}
.p-top-news__body {
grid-column: 2;
grid-row: 2;
margin-top: 2.1875rem;
}
@media screen and (max-width: 767px) {
.p-top-news__body {
grid-column: 1/-1;
grid-row: 2;
margin-top: 0.9375rem;
}
}
.p-top-news__more {
grid-column: 1;
grid-row: 2;
display: inline-flex;
align-items: center;
gap: 0.5rem;
margin-top: 3.6875rem;
justify-self: start;
font-size: max(0.875rem, 10px);
letter-spacing: 0.05em;
color: var(--color-main);
}
@media screen and (max-width: 767px) {
.p-top-news__more {
grid-column: 1/-1;
grid-row: 3;
margin-top: 1.4375rem;
font-size: max(0.875rem, 10px);
letter-spacing: 0.1em;
}
}
.p-top-news__list {
border-bottom: 1px solid var(--color-beige-deep);
}
.p-top-news__item {
border-top: 1px solid var(--color-beige-deep);
}
.p-top-news__link {
display: flex;
align-items: center;
padding-block: 1.1875rem;
}
@media screen and (max-width: 767px) {
.p-top-news__link {
flex-wrap: wrap;
}
}
@media screen and (max-width: 767px) {
.p-top-news__link {
display: grid;
grid-template-columns: auto 1fr;
align-items: center;
gap: 0.375rem 0.5625rem;
padding-block: 0.875rem;
}
}
.p-top-news__date {
flex-shrink: 0;
font-family: var(--en-font-family);
font-variant-numeric: tabular-nums;
font-size: max(0.875rem, 10px);
letter-spacing: 0.05em;
color: var(--color-black);
transition: var(--transition-hover);
}
@media screen and (max-width: 767px) {
.p-top-news__date {
font-size: max(0.75rem, 10px);
letter-spacing: 0.1em;
}
}
.p-top-news__cat {
margin-left: 2.5rem;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
min-width: 5rem;
height: 1.875rem;
padding-inline: 0.5rem;
white-space: nowrap;
border-radius: 0.25rem;
background-color: var(--color-white);
font-size: max(0.75rem, 10px);
line-height: 1;
letter-spacing: 0.05em;
}
@media screen and (max-width: 767px) {
.p-top-news__cat {
margin-left: 0;
justify-self: start;
min-width: 5rem;
height: 1.25rem;
border-radius: 0.125rem;
font-size: max(0.75rem, 10px);
}
}
.p-top-news__cat--important {
background-color: var(--color-important);
color: var(--color-white);
}
.p-top-news__text {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 1;
overflow: hidden;
padding-left: 0.875rem;
font-size: max(1rem, 10px);
font-weight: 500;
line-height: 1.5;
letter-spacing: 0.05em;
transition: var(--transition-hover);
}
@media screen and (max-width: 767px) {
.p-top-news__text {
grid-column: 1/-1;
padding-left: 0;
font-size: max(0.75rem, 10px);
line-height: 1.4;
letter-spacing: 0.1em;
}
}
@media screen and (max-width: 767px) {
.p-top-news__inner.l-inner {
display: grid;
grid-template-columns: 1fr auto;
gap: 0;
padding-inline: 1.25rem;
}
}
@media screen and (max-width: 767px) {
.p-top-news__title {
grid-column: 1;
grid-row: 1;
align-self: center;
font-size: max(1.125rem, 10px);
}
}
@media screen and (max-width: 767px) {
.p-top-news__select-input {
width: 11.6875rem;
height: 2.5rem;
padding-inline: 1rem 2rem;
border: none;
border-radius: 0.25rem;
background-color: var(--color-white);
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23755B4C' stroke-width='1.4'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 0.875rem center;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
font-family: inherit;
font-size: max(0.75rem, 10px);
letter-spacing: 0.1em;
color: var(--color-main);
text-align: left;
}
}
@media (any-hover: hover) {
.p-top-news__tab-btn:not(.is-active):hover {
background-color: var(--color-beige-dark);
color: var(--color-main);
}
.p-top-news__more:hover .c-icon--arrow {
translate: 0 0;
scale: 1.15;
}
.p-top-news__link:hover .p-top-news__date,
.p-top-news__link:hover .p-top-news__text {
color: var(--color-main);
}
}
.p-top-recruit {
position: relative;
z-index: 1;
}
.p-top-recruit__inner {
display: grid;
grid-template-columns: 30.3125rem 1fr;
align-items: center;
padding-left: max(1.5625rem, (100% - 75rem) / 2);
}
@media screen and (max-width: 767px) {
.p-top-recruit__inner {
grid-template-columns: 1fr;
padding-inline: 1.5625rem;
gap: 0.125rem;
padding-inline: 1.25rem;
max-width: 40rem;
margin-inline: auto;
}
}
.p-top-recruit__body {
max-width: 27.1875rem;
}
@media screen and (max-width: 767px) {
.p-top-recruit__body {
position: relative;
z-index: 1;
max-width: none;
}
}
.p-top-recruit__title {
font-size: max(3.125rem, 10px);
font-weight: 500;
line-height: 1.4;
letter-spacing: 0.1em;
font-feature-settings: "palt" 1;
color: var(--color-main);
}
@media screen and (max-width: 767px) {
.p-top-recruit__title {
font-size: max(1.375rem, 10px);
line-height: 1.318;
letter-spacing: 0;
}
}
.p-top-recruit__text {
margin-top: 2.25rem;
}
@media screen and (max-width: 767px) {
.p-top-recruit__text {
margin-top: 0.75rem;
font-size: max(0.8125rem, 10px);
line-height: 1.692;
letter-spacing: 0.1em;
}
}
.p-top-recruit__button {
margin-top: 3.375rem;
}
@media screen and (max-width: 767px) {
.p-top-recruit__button {
margin-top: 1.25rem;
}
}
.p-top-recruit__image {
width: 86%;
justify-self: end;
}
@media screen and (max-width: 767px) {
.p-top-recruit__image {
width: auto;
justify-self: stretch;
margin-right: -1.5625rem;
margin-inline: calc(50% - 50cqw);
margin-top: -1.875rem;
}
}
.p-top-recruit__image img {
display: block;
width: 100%;
height: auto;
}
@media screen and (max-width: 767px) {
.p-top-recruit__image img {
height: auto;
}
}
@media screen and (max-width: 767px) {
.p-top-recruit__title br:nth-of-type(2) {
display: none;
}
}
.p-top-recruit__photos {
display: grid;
gap: 1.5rem;
justify-self: center;
width: min(100%, 26.25rem);
}
@media screen and (max-width: 767px) {
.p-top-recruit__photos {
grid-template-columns: repeat(2, 1fr);
gap: 0.625rem;
width: 100%;
margin-top: 1.5rem;
}
}
.p-top-recruit__photos img {
width: 100%;
height: auto;
aspect-ratio: 3/2;
-o-object-fit: cover;
object-fit: cover;
border-radius: 0.625rem;
}
.p-top-recruit__photos img + img {
translate: -5rem 0;
}
@media screen and (max-width: 767px) {
.p-top-recruit__photos img + img {
translate: none;
}
}
.p-top-service__lead {
margin-top: 1.25rem;
text-align: center;
}
.p-top-service {
padding-block: 4.3125rem 3.4375rem;
background-color: var(--color-beige-band);
}
@media screen and (max-width: 767px) {
.p-top-service {
padding-block: 2.75rem 2.25rem;
}
}
.p-top-service__list {
display: grid;
grid-template-columns: repeat(2, 23.75rem);
justify-content: center;
gap: 1.875rem;
margin-top: 3.0625rem;
}
@media screen and (max-width: 767px) {
.p-top-service__list {
grid-template-columns: minmax(0, 23.75rem);
}
}
.p-top-service__item {
overflow: hidden;
border-radius: 0.625rem;
background-color: var(--color-white);
box-shadow: var(--shadow-card);
}
.p-top-service__figure img {
display: block;
width: 100%;
height: auto;
aspect-ratio: 380/240;
-o-object-fit: cover;
object-fit: cover;
}
.p-top-service__link {
display: block;
}
@media (any-hover: hover) {
.p-top-service__link figure {
overflow: hidden;
}
.p-top-service__link img {
transition: scale 0.3s ease-in-out;
}
.p-top-service__link:hover {
opacity: 1;
}
.p-top-service__link:hover img {
scale: 1.05;
}
}
.p-top-service__link:focus-visible {
opacity: 1;
}
.p-top-service__link:focus-visible img {
scale: 1.05;
}
@media (any-hover: hover) {
.p-top-service__link:hover .c-icon--arrow {
translate: 0 0;
}
}
.p-top-service__body {
padding: 1.375rem 1.875rem 1.25rem;
}
.p-top-service__item-title {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.75rem;
font-size: max(1.5rem, 10px);
font-weight: 500;
line-height: 1.3333333333;
letter-spacing: 0.1em;
color: var(--color-main);
}
@media screen and (max-width: 767px) {
.p-top-service__item-title {
font-size: max(1.125rem, 10px);
}
}
.p-top-service__text {
margin-top: 0.5rem;
line-height: 1.7142857143;
}
@media screen and (min-width: 768px) and (max-width: 1250px) {
.p-top-service__text br {
display: none;
}
}
.p-top-service__points {
margin-top: 0.9375rem;
padding-top: 0.9375rem;
border-top: 1px dotted var(--color-beige-deep);
}
.p-top-service__point {
position: relative;
padding-left: 1.125rem;
font-size: max(0.875rem, 10px);
font-weight: 500;
line-height: 1.7142857143;
letter-spacing: 0.05em;
}
.p-top-service__point::before {
content: "";
position: absolute;
top: 0.5625rem;
left: 0;
width: 0.375rem;
height: 0.375rem;
border-radius: 50%;
background-color: var(--color-main);
}
.p-top-service__button-wrap {
margin-top: 2.375rem;
text-align: center;
}
.p-top-service__button-wrap .c-button {
width: 17.625rem;
}
.p-top-sns__box {
position: relative;
padding: 5.125rem 3.5rem;
min-height: 30rem;
border: 3px solid #e3dedb;
border-radius: 0.5rem;
background-color: var(--color-white);
background-image: url(//syokashi-hp.or.jp/wp-content/themes/syokashi-hp/images/top/sns-bg.webp);
background-repeat: no-repeat;
background-position: center;
background-size: cover;
}
@media screen and (max-width: 767px) {
.p-top-sns__box {
padding: 1.875rem 1.0625rem 1.875rem;
min-height: 0;
border-radius: 0.625rem;
background-image: url(//syokashi-hp.or.jp/wp-content/themes/syokashi-hp/images/top/sns-deco-sp.webp);
background-position: center;
background-size: 100% 100%;
}
}
.p-top-sns__title {
position: relative;
font-size: max(2.5rem, 10px);
font-weight: 500;
line-height: 1.4;
letter-spacing: 0.1em;
color: var(--color-main);
}
@media screen and (max-width: 767px) {
.p-top-sns__title {
font-size: max(1.5625rem, 10px);
letter-spacing: 0.1em;
}
}
.p-top-sns__title::after {
content: "";
position: absolute;
top: -1.3125rem;
left: 18.75rem;
width: 6rem;
height: 3.25rem;
background: url(//syokashi-hp.or.jp/wp-content/themes/syokashi-hp/images/top/sns-deco.svg) no-repeat center/contain;
}
@media screen and (max-width: 767px) {
.p-top-sns__title::after {
top: -1rem;
left: 11.75rem;
width: 3.75rem;
height: 2rem;
}
}
.p-top-sns__title-en {
font-family: var(--en-font-family);
color: var(--color-accent);
}
.p-top-sns__lead {
margin-top: 1rem;
}
@media screen and (max-width: 767px) {
.p-top-sns__lead {
margin-top: 0.75rem;
font-size: max(0.75rem, 10px);
line-height: 1.5;
letter-spacing: 0.1em;
}
}
.p-top-sns__list {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 0.875rem;
margin-top: 3.375rem;
max-width: 49.25rem;
}
@media screen and (max-width: 767px) {
.p-top-sns__list {
grid-template-columns: 1fr;
gap: 0.6875rem;
margin-top: 0.9375rem;
}
}
.p-top-sns__link {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
height: 5rem;
padding-inline: 2.5rem 2.1875rem;
border: 1px solid var(--color-border);
border-radius: 0.625rem;
background-color: var(--color-white);
box-shadow: var(--shadow-card);
}
@media screen and (max-width: 767px) {
.p-top-sns__link {
padding: 0.9375rem;
}
}
.p-top-sns__link--line {
border-color: var(--color-line);
}
.p-top-sns__link--instagram {
border-color: var(--color-instagram);
}
.p-top-sns__label {
font-size: max(1.25rem, 10px);
font-weight: 700;
line-height: 1.2;
letter-spacing: 0.1em;
color: var(--color-main);
}
@media screen and (max-width: 767px) {
.p-top-sns__label {
font-size: max(1rem, 10px);
}
}
.p-top-sns__label-en {
display: block;
margin-top: 0.25rem;
font-family: var(--en-font-family);
font-size: max(0.625rem, 10px);
letter-spacing: 0.1em;
color: var(--color-black);
}
.p-top-sns__icon {
display: block;
flex-shrink: 0;
width: 2.5rem;
height: 2.5rem;
-o-object-fit: contain;
object-fit: contain;
}
.p-top-sns__character {
position: absolute;
top: 3.875rem;
right: 4.6875rem;
width: 18.5rem;
text-align: center;
}
@media screen and (max-width: 767px) {
.p-top-sns__character {
position: static;
width: auto;
margin-top: 1.0625rem;
margin-inline: auto;
}
}
.p-top-sns__character img {
width: 18.5rem;
max-width: 100%;
height: auto;
}
@media screen and (max-width: 767px) {
.p-top-sns__character img {
width: 13.5rem;
margin-inline: auto;
}
}
@media (any-hover: hover) {
.p-top-sns__link:hover {
box-shadow: var(--shadow-card-hover);
translate: 0 -0.25rem;
}
.p-top-sns__link:hover .c-icon--arrow {
translate: 0 0;
}
}
.p-top-sns__item {
display: flex;
flex-direction: column;
justify-content: flex-end;
}
.p-top-sns__note {
margin-bottom: 0.625rem;
font-size: max(0.9375rem, 10px);
font-weight: 700;
line-height: 1.5;
letter-spacing: 0.05em;
color: var(--color-main);
text-align: center;
}
@media screen and (max-width: 767px) {
.p-top-sns__note {
margin-bottom: 0.375rem;
font-size: max(0.8125rem, 10px);
}
}
.p-voice-profile__inner {
display: grid;
grid-template-columns: 23.75rem 1fr;
gap: 3rem;
align-items: start;
}
@media screen and (max-width: 767px) {
.p-voice-profile__inner {
grid-template-columns: 1fr;
gap: 1.5rem;
}
}
.p-voice-profile__image {
border-radius: 0.625rem;
overflow: hidden;
}
.p-voice-profile__image img {
width: 100%;
height: auto;
aspect-ratio: 4/5;
-o-object-fit: cover;
object-fit: cover;
vertical-align: bottom;
}
.p-voice-profile__no {
display: inline-block;
padding: 0.375rem 1rem;
border-radius: 1.25rem;
background-color: var(--color-beige-band);
font-size: max(0.8125rem, 10px);
font-weight: 700;
line-height: 1;
letter-spacing: 0.1em;
color: var(--color-main);
}
.p-voice-profile__catch {
margin-top: 1.25rem;
font-size: max(1.75rem, 10px);
font-weight: 500;
line-height: 1.6428571429;
letter-spacing: 0.05em;
color: var(--color-black);
}
@media screen and (max-width: 767px) {
.p-voice-profile__catch {
margin-top: 1rem;
font-size: max(1.25rem, 10px);
}
}
.p-voice-profile__name {
margin-top: 1.5rem;
font-size: max(1.875rem, 10px);
font-weight: 700;
line-height: 1.4;
letter-spacing: 0.1em;
color: var(--color-main);
}
@media screen and (max-width: 767px) {
.p-voice-profile__name {
margin-top: 1rem;
font-size: max(1.5rem, 10px);
}
}
.p-voice-profile__role {
margin-top: 0.5rem;
font-size: max(0.875rem, 10px);
font-weight: 500;
line-height: 1.8;
letter-spacing: 0.05em;
}
.p-voice-profile__spec {
margin-top: 1.5rem;
}
@media screen and (max-width: 767px) {
.p-voice-profile__spec {
margin-top: 1rem;
}
}
.p-voice-qa__list {
display: flex;
flex-direction: column;
gap: 1rem;
margin-top: 3.5rem;
}
@media screen and (max-width: 767px) {
.p-voice-qa__list {
gap: 0.75rem;
margin-top: 1.75rem;
}
}
.p-voice-qa__item {
border-radius: 0.25rem;
background-color: var(--color-white);
box-shadow: var(--shadow-card);
}
.p-voice-qa__question {
display: flex;
align-items: flex-start;
gap: 1rem;
padding: 1.5rem 1.875rem;
}
@media screen and (max-width: 767px) {
.p-voice-qa__question {
gap: 0.75rem;
padding: 1rem;
}
}
.p-voice-qa__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-size: max(1.125rem, 10px);
font-weight: 500;
line-height: 1;
color: var(--color-white);
}
@media screen and (max-width: 767px) {
.p-voice-qa__mark {
width: 1.75rem;
height: 1.75rem;
font-size: max(0.9375rem, 10px);
}
}
.p-voice-qa__mark--answer {
background-color: var(--color-beige-deep);
color: var(--color-main);
}
.p-voice-qa__question-text {
padding-top: 0.25rem;
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-voice-qa__question-text {
padding-top: 0.125rem;
font-size: max(0.9375rem, 10px);
line-height: 1.6;
}
}
.p-voice-qa__answer {
display: flex;
align-items: flex-start;
gap: 1rem;
padding: 0 1.875rem 1.75rem;
}
@media screen and (max-width: 767px) {
.p-voice-qa__answer {
gap: 0.75rem;
padding: 0 1rem 1.25rem;
}
}
.p-voice-qa__answer-text {
font-size: max(0.9375rem, 10px);
line-height: 2;
letter-spacing: 0.1em;
}
@media screen and (max-width: 767px) {
.p-voice-qa__answer-text {
font-size: max(0.875rem, 10px);
line-height: 1.8;
}
}
.p-voice-schedule__cols {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 2.5rem;
margin-top: 2.5rem;
}
@media screen and (max-width: 767px) {
.p-voice-schedule__cols {
grid-template-columns: 1fr;
gap: 1.5rem;
margin-top: 1.5rem;
}
}
.p-voice-schedule__cols--single {
grid-template-columns: 1fr;
max-width: 50rem;
margin-inline: auto;
}
.p-voice-schedule__col {
padding: 1.75rem 2rem;
border: 1px solid var(--color-beige-deep);
border-radius: 0.625rem;
background-color: var(--color-white);
}
@media screen and (max-width: 767px) {
.p-voice-schedule__col {
padding: 1.25rem;
}
}
.p-voice-schedule__label {
display: inline-block;
padding: 0.3125rem 0.875rem;
border-radius: 1.25rem;
background-color: var(--color-main);
font-size: max(0.75rem, 10px);
font-weight: 700;
line-height: 1;
letter-spacing: 0.1em;
color: var(--color-white);
}
.p-voice-schedule__title {
margin-top: 0.75rem;
font-size: max(1.125rem, 10px);
font-weight: 700;
line-height: 1.6;
letter-spacing: 0.05em;
color: var(--color-main);
}
@media screen and (max-width: 767px) {
.p-voice-schedule__title {
font-size: max(1rem, 10px);
}
}
.p-voice-schedule__list {
margin-top: 1rem;
}
.p-voice-schedule__row {
display: grid;
grid-template-columns: 4.5rem 1fr;
gap: 0.75rem;
padding-block: 0.75rem;
border-bottom: 1px dotted var(--color-beige-deep);
}
@media screen and (max-width: 767px) {
.p-voice-schedule__row {
grid-template-columns: 3.75rem 1fr;
padding-block: 0.625rem;
}
}
.p-voice-schedule__row:last-child {
border-bottom: none;
}
.p-voice-schedule__time {
font-size: max(0.875rem, 10px);
font-weight: 700;
line-height: 1.8571428571;
letter-spacing: 0.05em;
color: var(--color-accent);
}
.p-voice-schedule__text {
font-size: max(0.875rem, 10px);
font-weight: 500;
line-height: 1.8571428571;
letter-spacing: 0.05em;
}
.p-voice-others__list {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1.5625rem 1.25rem;
margin-top: 2.5rem;
}
@media screen and (max-width: 767px) {
.p-voice-others__list {
grid-template-columns: repeat(2, 1fr);
gap: 1.25rem 0.9375rem;
margin-top: 1.5rem;
}
}
.p-voice-others__item {
border-radius: 0.625rem;
background-color: var(--color-white);
box-shadow: var(--shadow-card);
overflow: hidden;
}
@media (any-hover: hover) {
.p-voice-others__item figure {
overflow: hidden;
}
.p-voice-others__item img {
transition: scale 0.3s ease-in-out;
}
.p-voice-others__item:hover {
opacity: 1;
}
.p-voice-others__item:hover img {
scale: 1.05;
}
}
.p-voice-others__item:focus-visible {
opacity: 1;
}
.p-voice-others__item:focus-visible img {
scale: 1.05;
}
.p-voice-others__link {
display: block;
padding: 0 1.25rem 1.25rem;
}
.p-voice-others__link:hover {
opacity: 1;
}
.p-voice-others__image {
margin: 0 -1.25rem 0.875rem;
aspect-ratio: 4/5;
overflow: hidden;
}
.p-voice-others__image img {
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
transition: var(--transition-hover);
}
.p-voice-others__no {
font-size: max(0.75rem, 10px);
font-weight: 700;
line-height: 1.6;
letter-spacing: 0.05em;
color: var(--color-accent);
}
.p-voice-others__name {
margin-top: 0.375rem;
font-size: max(1.125rem, 10px);
font-weight: 700;
line-height: 1.4;
letter-spacing: 0.05em;
color: var(--color-main);
}
@media screen and (max-width: 767px) {
.p-voice-others__name {
font-size: max(1rem, 10px);
}
}
.p-voice-others__years {
margin-top: 0.25rem;
font-size: max(0.8125rem, 10px);
font-weight: 500;
line-height: 1.6;
letter-spacing: 0.05em;
}
.p-voice-others__more {
margin-top: 2.5rem;
text-align: center;
}
@media screen and (max-width: 767px) {
.p-voice-others__more {
margin-top: 1.75rem;
}
}
.p-voice-cta__catch {
font-size: max(1.875rem, 10px);
font-weight: 700;
line-height: 1.6;
letter-spacing: 0.1em;
color: var(--color-main);
text-align: center;
}
@media screen and (max-width: 767px) {
.p-voice-cta__catch {
font-size: max(1.375rem, 10px);
}
}
.p-voice-cta__text {
margin-top: 1rem;
font-size: max(0.875rem, 10px);
font-weight: 500;
line-height: 1.8571428571;
letter-spacing: 0.05em;
text-align: center;
}
.p-voice-cta__list {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 1.25rem;
max-width: 50rem;
margin-top: 2rem;
margin-inline: auto;
}
@media screen and (max-width: 767px) {
.p-voice-cta__list {
grid-template-columns: 1fr;
gap: 0.875rem;
margin-top: 1.5rem;
}
}
.p-voice-cta__link {
display: grid;
grid-template-columns: 1fr auto;
align-items: center;
gap: 0.5rem;
padding: 1.25rem 1.5rem;
border: 1px solid var(--color-beige-deep);
border-radius: 0.625rem;
background-color: var(--color-white);
}
@media (any-hover: hover) {
.p-voice-cta__link:hover {
box-shadow: var(--shadow-card-hover);
translate: 0 -0.25rem;
}
.p-voice-cta__link:hover .c-icon--arrow {
translate: 0 0;
}
}
.p-voice-cta__link-title {
grid-column: 1;
font-size: max(1rem, 10px);
font-weight: 700;
line-height: 1.6;
letter-spacing: 0.05em;
color: var(--color-main);
}
.p-voice-cta__link-text {
grid-column: 1;
font-size: max(0.8125rem, 10px);
font-weight: 500;
line-height: 1.6;
letter-spacing: 0.05em;
}
.p-voice-cta__link svg {
grid-column: 2;
grid-row: 1/3;
width: 1.375rem;
height: 1.375rem;
color: var(--color-accent);
}
.p-voice-schedule__note {
max-width: 50rem;
margin-top: 1rem;
margin-inline: auto;
font-size: max(0.8125rem, 10px);
font-weight: 500;
line-height: 1.8461538462;
letter-spacing: 0.05em;
}
@media (any-hover: hover) {
.p-voice-others__link:hover .p-voice-others__image img {
scale: 1.05;
}
}
.p-voice-photo__figure {
max-width: 50rem;
margin: 0 auto;
}
.p-voice-photo__figure img {
display: block;
width: 100%;
height: auto;
border-radius: 0.25rem;
}
.p-ward__body {
display: grid;
grid-template-columns: minmax(0, 473fr) minmax(0, 482fr);
align-items: start;
gap: 4.125rem;
width: 100%;
max-width: 63.8125rem;
margin-inline: auto;
margin-top: 6rem;
}
@media screen and (max-width: 767px) {
.p-ward__body {
grid-template-columns: minmax(0, 1fr);
gap: 1.5rem;
margin-top: 2rem;
}
}
.p-ward__text > p + p {
margin-top: 1.6875rem;
}
@media screen and (max-width: 767px) {
.p-ward__text > p + p {
margin-top: 1.25rem;
}
}
.p-ward__columns {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 5rem;
width: 100%;
max-width: 68.75rem;
margin-inline: auto;
}
@media screen and (max-width: 767px) {
.p-ward__columns {
grid-template-columns: minmax(0, 1fr);
gap: 3.5rem;
}
}
.p-ward__text--column {
margin-top: 3rem;
}
@media screen and (max-width: 767px) {
.p-ward__text--column {
margin-top: 1.75rem;
}
}
.p-ward__target-title {
margin-top: 2.5rem;
}
@media screen and (max-width: 767px) {
.p-ward__target-title {
margin-top: 1.75rem;
}
}
.p-ward__target-list {
margin-top: 1.25rem;
}
@media screen and (max-width: 767px) {
.p-ward__target-list {
margin-top: 1rem;
}
}
.p-ward__target-item {
position: relative;
padding-left: 1rem;
}
.p-ward__target-item + .p-ward__target-item {
margin-top: 0.5rem;
}
.p-ward__target-item::before {
content: "";
position: absolute;
top: 0.85em;
left: 0;
width: 0.3125rem;
height: 0.3125rem;
border-radius: 50%;
background-color: var(--color-main);
transform: translateY(-50%);
}
.p-ward__figure {
margin: 0;
}
.p-ward__figure img {
display: block;
width: 100%;
height: auto;
aspect-ratio: 482/348;
-o-object-fit: cover;
object-fit: cover;
border-radius: 0.625rem;
}
.p-ward__gallery {
width: min(104.9375rem, 100% - 3.125rem);
margin-inline: auto;
margin-top: 7.125rem;
}
@media screen and (max-width: 767px) {
.p-ward__gallery {
width: calc(100% - 2.5rem);
margin-top: 2.5rem;
}
}
.p-zaitaku-lead {
background-color: var(--sub-band);
}
.p-zaitaku-compare__lead {
margin-top: 2rem;
text-align: center;
}
@media screen and (max-width: 767px) {
.p-zaitaku-compare__lead {
margin-top: 1.25rem;
text-align: left;
}
}
.p-zaitaku-compare__scroll {
margin-top: 2.5rem;
overflow-x: auto;
}
@media screen and (max-width: 767px) {
.p-zaitaku-compare__scroll {
margin-top: 1.5rem;
}
}
.p-zaitaku-compare__table {
min-width: 47.5rem;
table-layout: fixed;
background-color: var(--color-white);
}
.p-zaitaku-compare__table tr:has(> th) {
background-color: transparent;
}
.p-zaitaku-compare__table th,
.p-zaitaku-compare__table td {
padding: 1.25rem;
border-color: var(--color-beige-deep);
font-size: max(0.875rem, 10px);
font-weight: 500;
line-height: 1.8;
letter-spacing: 0.05em;
vertical-align: top;
text-align: left;
}
@media screen and (max-width: 767px) {
.p-zaitaku-compare__table th,
.p-zaitaku-compare__table td {
padding: 0.875rem;
}
}
.p-zaitaku-compare__table thead th {
width: 18.75rem;
background-color: var(--color-main);
color: var(--color-white);
font-weight: 700;
text-align: center;
}
.p-zaitaku-compare__table tbody th {
width: 10rem;
background-color: var(--color-beige-band);
color: var(--color-main);
font-weight: 700;
}
.p-zaitaku-compare__blank {
width: 10rem;
background-color: var(--color-main);
}
.p-zaitaku-service__body {
display: grid;
grid-template-columns: 28.125rem 1fr;
gap: 3rem;
align-items: start;
margin-top: 2.5rem;
}
@media screen and (max-width: 767px) {
.p-zaitaku-service__body {
grid-template-columns: 1fr;
gap: 1.5rem;
margin-top: 1.5rem;
}
}
.p-zaitaku-service__figures {
display: grid;
gap: 1.5rem;
}
@media screen and (max-width: 767px) {
.p-zaitaku-service__figures {
gap: 1rem;
}
}
.p-zaitaku-service__figure img {
width: 100%;
height: auto;
border-radius: 0.25rem;
}
.p-zaitaku-service__def {
margin-top: 0;
}
.p-zaitaku-area {
display: grid;
gap: 0.875rem;
}
@media screen and (max-width: 767px) {
.p-zaitaku-area {
gap: 0.75rem;
}
}
.p-zaitaku-area__item {
padding: 0.6875rem 1.0625rem;
background-color: var(--color-beige-band);
}
@media screen and (max-width: 767px) {
.p-zaitaku-area__item {
padding: 0.625rem 0.875rem;
}
}
.p-zaitaku-area__city {
font-size: max(0.875rem, 10px);
font-weight: 700;
line-height: 1.8;
letter-spacing: 0.05em;
color: var(--color-main);
}
.p-zaitaku-area__text {
margin-top: 0.25rem;
font-size: max(0.875rem, 10px);
font-weight: 500;
line-height: 1.8;
letter-spacing: 0.05em;
}
.p-zaitaku-area__note {
margin-top: 0.75rem;
font-size: max(0.75rem, 10px);
font-weight: 500;
line-height: 1.8;
letter-spacing: 0.05em;
}
.p-zaitaku-day {
display: grid;
gap: 1.25rem;
}
@media screen and (max-width: 767px) {
.p-zaitaku-day {
gap: 1rem;
}
}
.p-zaitaku-day__label {
font-size: max(0.875rem, 10px);
font-weight: 700;
line-height: 1.8;
letter-spacing: 0.05em;
color: var(--color-main);
}
.p-zaitaku-day__text {
font-size: max(0.875rem, 10px);
font-weight: 500;
line-height: 1.8;
letter-spacing: 0.05em;
}
.p-zaitaku-day__note {
margin-top: 1.25rem;
font-size: max(0.75rem, 10px);
font-weight: 500;
line-height: 1.8;
letter-spacing: 0.05em;
}
@media screen and (max-width: 767px) {
.p-zaitaku-day__note {
margin-top: 1rem;
}
}
.p-zaitaku-contact__box {
margin-top: 3.5rem;
padding: 3.125rem 3.75rem;
border-radius: 0.625rem;
background-color: var(--color-main);
}
@media screen and (max-width: 767px) {
.p-zaitaku-contact__box {
margin-top: 1.75rem;
padding: 1.75rem 1.25rem;
}
}
.p-zaitaku-contact__box .p-zaitaku-contact__lead {
font-size: max(1.125rem, 10px);
line-height: 2;
color: var(--color-white);
text-align: center;
}
@media screen and (max-width: 767px) {
.p-zaitaku-contact__box .p-zaitaku-contact__lead {
font-size: max(0.9375rem, 10px);
text-align: left;
}
}
.p-zaitaku-contact__list {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 1.25rem;
margin-top: 1.5rem;
}
@media screen and (max-width: 767px) {
.p-zaitaku-contact__list {
grid-template-columns: 1fr;
gap: 1rem;
margin-top: 1rem;
}
}
.p-zaitaku-contact__item {
display: flex;
flex-direction: column;
align-items: center;
height: 100%;
padding: 1.875rem 1.25rem;
border-radius: 0.625rem;
background-color: var(--color-white);
text-align: center;
}
.p-zaitaku-contact__title {
font-size: max(1rem, 10px);
font-weight: 500;
line-height: 1.5;
letter-spacing: 0.05em;
color: var(--color-main);
}
.p-zaitaku-contact__tel {
margin-top: 0.375rem;
font-family: var(--en-font-family);
font-size: max(2.125rem, 10px);
font-weight: 500;
line-height: 1.3;
letter-spacing: 0.02em;
color: var(--color-main);
}
@media screen and (max-width: 767px) {
.p-zaitaku-contact__tel {
font-size: max(1.75rem, 10px);
}
}
.p-zaitaku-contact__fax {
margin-top: 0.5rem;
font-size: max(0.875rem, 10px);
font-weight: 500;
line-height: 1.6;
letter-spacing: 0.05em;
color: var(--color-black);
}
.p-zaitaku-contact__note {
margin-top: 2rem;
font-size: max(0.875rem, 10px);
font-weight: 500;
line-height: 1.8;
letter-spacing: 0.05em;
color: var(--color-white);
text-align: center;
}
@media screen and (max-width: 767px) {
.p-zaitaku-contact__note {
margin-top: 1.25rem;
text-align: left;
}
}
.p-zaitaku-service.l-zaitaku--houmon,
.p-zaitaku-flow {
padding-block: 6rem;
background-color: var(--sub-band);
}
@media screen and (max-width: 767px) {
.p-zaitaku-service.l-zaitaku--houmon,
.p-zaitaku-flow {
padding-block: 3.5rem;
}
}
.l-zaitaku--houmon .c-def {
background-color: var(--color-white);
}
.l-zaitaku--houmon .c-def__dt {
background-color: var(--color-main);
color: var(--color-white);
}
.u-sp-br {
display: none;
}
@media screen and (max-width: 767px) {
.u-sp-br {
display: inline;
}
}
@media screen and (max-width: 767px) {
.u-pc-br {
display: none;
}
}
.u-kana {
font-size: 0.667em;
}
.u-no-image {
background-color: var(--color-beige-dark);
-o-object-fit: cover;
object-fit: cover;
}
.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;
border: 0;
clip-path: inset(50%);
overflow: hidden;
white-space: nowrap;
}