@charset "utf-8";
@charset "utf-8";
@keyframes scroll-hint-appear {
0% {
transform: translateX(40px);
opacity: 0;
}
10% {
opacity: 1;
}
50%,
100% {
transform: translateX(-40px);
opacity: 0;
}
}
.scroll-hint-icon {
position: absolute;
top: calc(50% - 25px);
left: calc(50% - 60px);
box-sizing: border-box;
width: 120px;
height: auto;
border-radius: 5px;
transition: opacity .3s;
opacity: 0;
background: rgba(0, 0, 0, .7);
text-align: center;
padding: 20px 10px 10px 10px;
}
.scroll-hint-icon-wrap {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
max-height: 100%;
pointer-events: none;
}
.scroll-hint-text {
font-size: 10px;
color: #FFF;
margin-top: 5px;
}
.scroll-hint-icon-wrap.is-active .scroll-hint-icon {
opacity: .8;
}
.scroll-hint-icon:before {
display: inline-block;
width: 40px;
height: 40px;
color: #FFF;
vertical-align: middle;
text-align: center;
content: "";
background-size: contain;
background-position: center center;
background-repeat: no-repeat;
background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNS43NyIgaGVpZ2h0PSIzMC41MiIgdmlld0JveD0iMCAwIDI1Ljc3IDMwLjUyIj48dGl0bGU+44Ki44K744OD44OIIDM8L3RpdGxlPjxnIGlkPSLjg6zjgqTjg6Tjg7xfMiIgZGF0YS1uYW1lPSLjg6zjgqTjg6Tjg7wgMiI+PGcgaWQ9IuODrOOCpOODpOODvF8xLTIiIGRhdGEtbmFtZT0i44Os44Kk44Ok44O8IDEiPjxwYXRoIGQ9Ik0yMS4zMywzMC41Mkg3Ljg1QTEuNTUsMS41NSwwLDAsMSw2LjMsMjlhMTIuNDYsMTIuNDYsMCwwLDAtLjYzLTQuNDIsMjUuMTYsMjUuMTYsMCwwLDAtNC4yNS01bC0uMDYtLjA2QTUsNSwwLDAsMSwwLDE1Ljg2YTMuNjQsMy42NCwwLDAsMSwxLjE3LTIuNjIsMy42MywzLjYzLDAsMCwxLDUuMTQuMDdWMy43N2EzLjc3LDMuNzcsMCwxLDEsNy41NCwwVjguMzNhMy4zNSwzLjM1LDAsMCwxLDEuMjYsMCwzLDMsMCwwLDEsMiwxLjIyLDMuNSwzLjUsMCwwLDEsMi0uMDYsMy4yMSwzLjIxLDAsMCwxLDIsMS41NCwzLjc0LDMuNzQsMCwwLDEsMywuNDdBNC4yMSw0LjIxLDAsMCwxLDI1Ljc0LDE1YzAsLjExLDAsLjI3LDAsLjQ2YTE5LjI2LDE5LjI2LDAsMCwxLS44NCw3Yy0uMTQuMzgtLjM2LjgxLS41NiwxLjIybC0uMTEuMjJjMCwuMDctLjA5LjE0LS4xNC4yMWE3LjEzLDcuMTMsMCwwLDAtMS4xNywyLjE3Yy0uMDYuNTYtLjA2LDIuMTUtLjA1LDIuNzFBMS41NSwxLjU1LDAsMCwxLDIxLjMzLDMwLjUyWk04LjYxLDI4LjIxaDEyYzAtLjcxLDAtMS43MS4wNy0yLjIzYTguNzQsOC43NCwwLDAsMSwxLjU5LTMuMjVsLjA2LS4xMmExMCwxMCwwLDAsMCwuNDYtMSwxNi44LDE2LjgsMCwwLDAsLjctNi4xMmMwLS4yMywwLS40MSwwLS41NGgwYTIsMiwwLDAsMC0uNjQtMS41MiwxLjMzLDEuMzMsMCwwLDAtMS41NS4wOCwxLjEzLDEuMTMsMCwwLDEtMS4xOC4yOCwxLjE1LDEuMTUsMCwwLDEtLjc4LS45NCwxLjI2LDEuMjYsMCwwLDAtLjc1LTEuMTEsMSwxLDAsMCwwLTEuMTEuMjhsLS4xLjFhMS4xNSwxLjE1LDAsMCwxLTEuMTkuMjksMS4xNiwxLjE2LDAsMCwxLS43OC0uOTVjLS4wOS0uNjgtLjIxLS43Ny0uNy0uODdhLjgyLjgyLDAsMCwwLTEsLjQ4LDEuMTYsMS4xNiwwLDAsMS0yLjE2LS41OFYzLjc3YTEuNDYsMS40NiwwLDEsMC0yLjkyLDB2Ny44NWwwLDQuMzNhMS4xNywxLjE3LDAsMCwxLS44MywxLjExLDEuMTUsMS4xNSwwLDAsMS0xLjItLjM1bC0xLS45MWMtLjQ3LS40Mi0uNzMtLjY2LS44NC0uNzdhMS4zNSwxLjM1LDAsMCwwLTItLjEyTDIuNywxNWExLjMyLDEuMzIsMCwwLDAtLjM5LDFBMi41NywyLjU3LDAsMCwwLDMsMTcuODVsMCwwYTI3LjI0LDI3LjI0LDAsMCwxLDQuNyw1LjYyQTEyLjYzLDEyLjYzLDAsMCwxLDguNjEsMjguMjFaTTIzLjIsMjMuMzVaTTYuNTEsMTYuNTlaIiBmaWxsPSIjZmZmIi8+PC9nPjwvZz48L3N2Zz4=);
}
.scroll-hint-icon:after {
content: "";
width: 34px;
height: 14px;
display: block;
position: absolute;
top: 10px;
left: 50%;
margin-left: -20px;
background-repeat: no-repeat;
background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMy4yOSIgaGVpZ2h0PSIxMi4wMiIgdmlld0JveD0iMCAwIDMzLjI5IDEyLjAyIj48dGl0bGU+44Ki44K744OD44OIIDE8L3RpdGxlPjxnIGlkPSLjg6zjgqTjg6Tjg7xfMiIgZGF0YS1uYW1lPSLjg6zjgqTjg6Tjg7wgMiI+PGcgaWQ9IuODrOOCpOODpOODvF8xLTIiIGRhdGEtbmFtZT0i44Os44Kk44Ok44O8IDEiPjxsaW5lIHgxPSIxLjg1IiB5MT0iNi4wMSIgeDI9IjEwLjQiIHkyPSI2LjAxIiBmaWxsPSIjZmZmIi8+PHBhdGggZD0iTTEwLjQsNy4xN0gxLjg1YTEuMTYsMS4xNiwwLDEsMSwwLTIuMzFIMTAuNGExLjE2LDEuMTYsMCwxLDEsMCwyLjMxWiIgZmlsbD0iI2ZmZiIvPjxwYXRoIGQ9Ik03LjQsMTJhMS4xNSwxLjE1LDAsMCwxLS43Mi0uMjVsLTYuMjUtNUExLjIsMS4yLDAsMCwxLDAsNS44NywxLjE0LDEuMTQsMCwwLDEsLjQ2LDVMNi43LjIzQTEuMTYsMS4xNiwwLDAsMSw4LjEsMi4wOEwzLDUuOTEsOC4xMiwxMEExLjE2LDEuMTYsMCwwLDEsNy40LDEyWiIgZmlsbD0iI2ZmZiIvPjxsaW5lIHgxPSIzMS40NSIgeTE9IjYuMDEiIHgyPSIyMi44OSIgeTI9IjYuMDEiIGZpbGw9IiNmZmYiLz48cGF0aCBkPSJNMzEuNDUsNy4xN0gyMi44OWExLjE2LDEuMTYsMCwxLDEsMC0yLjMxaDguNTZhMS4xNiwxLjE2LDAsMCwxLDAsMi4zMVoiIGZpbGw9IiNmZmYiLz48cGF0aCBkPSJNMjUuOSwxMmExLjE4LDEuMTgsMCwwLDEtLjkxLS40M0ExLjE3LDEuMTcsMCwwLDEsMjUuMTcsMTBsNS4wOS00LjA1TDI1LjIsMi4wOEExLjE2LDEuMTYsMCwwLDEsMjYuNTkuMjNMMzIuODQsNWExLjE2LDEuMTYsMCwwLDEsLjQ1LjkxLDEuMTQsMS4xNCwwLDAsMS0uNDMuOTJsLTYuMjQsNUExLjE3LDEuMTcsMCwwLDEsMjUuOSwxMloiIGZpbGw9IiNmZmYiLz48L2c+PC9nPjwvc3ZnPg==);
opacity: 0;
transition-delay: 2.4s;
}
.scroll-hint-icon-wrap.is-active .scroll-hint-icon:after {
opacity: 1;
}
.scroll-hint-icon-wrap.is-active .scroll-hint-icon:before {
animation: scroll-hint-appear 1.2s linear;
animation-iteration-count: 2;
}
.scroll-hint-icon-white {
background-color: #FFF;
box-shadow: 0 4px 5px rgba(0, 0, 0, .4);
}
.scroll-hint-icon-white:before {
background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNS43NyIgaGVpZ2h0PSIzMC41MiIgdmlld0JveD0iMCAwIDI1Ljc3IDMwLjUyIj48dGl0bGU+44Ki44K744OD44OIIDQ8L3RpdGxlPjxnIGlkPSLjg6zjgqTjg6Tjg7xfMiIgZGF0YS1uYW1lPSLjg6zjgqTjg6Tjg7wgMiI+PGcgaWQ9IuODrOOCpOODpOODvF8xLTIiIGRhdGEtbmFtZT0i44Os44Kk44Ok44O8IDEiPjxwYXRoIGQ9Ik0yMS4zMywzMC41Mkg3Ljg1QTEuNTUsMS41NSwwLDAsMSw2LjMsMjlhMTIuNDYsMTIuNDYsMCwwLDAtLjYzLTQuNDIsMjUuMTYsMjUuMTYsMCwwLDAtNC4yNS01bC0uMDYtLjA2QTUsNSwwLDAsMSwwLDE1Ljg2YTMuNjQsMy42NCwwLDAsMSwxLjE3LTIuNjIsMy42MywzLjYzLDAsMCwxLDUuMTQuMDdWMy43N2EzLjc3LDMuNzcsMCwxLDEsNy41NCwwVjguMzNhMy4zNSwzLjM1LDAsMCwxLDEuMjYsMCwzLDMsMCwwLDEsMiwxLjIyLDMuNSwzLjUsMCwwLDEsMi0uMDYsMy4yMSwzLjIxLDAsMCwxLDIsMS41NCwzLjc0LDMuNzQsMCwwLDEsMywuNDdBNC4yMSw0LjIxLDAsMCwxLDI1Ljc0LDE1YzAsLjExLDAsLjI3LDAsLjQ2YTE5LjI2LDE5LjI2LDAsMCwxLS44NCw3Yy0uMTQuMzgtLjM2LjgxLS41NiwxLjIybC0uMTEuMjJjMCwuMDctLjA5LjE0LS4xNC4yMWE3LjEzLDcuMTMsMCwwLDAtMS4xNywyLjE3Yy0uMDYuNTYtLjA2LDIuMTUtLjA1LDIuNzFBMS41NSwxLjU1LDAsMCwxLDIxLjMzLDMwLjUyWk04LjYxLDI4LjIxaDEyYzAtLjcxLDAtMS43MS4wNy0yLjIzYTguNzQsOC43NCwwLDAsMSwxLjU5LTMuMjVsLjA2LS4xMmExMCwxMCwwLDAsMCwuNDYtMSwxNi44LDE2LjgsMCwwLDAsLjctNi4xMmMwLS4yMywwLS40MSwwLS41NGgwYTIsMiwwLDAsMC0uNjQtMS41MiwxLjMzLDEuMzMsMCwwLDAtMS41NS4wOCwxLjEzLDEuMTMsMCwwLDEtMS4xOC4yOCwxLjE1LDEuMTUsMCwwLDEtLjc4LS45NCwxLjI2LDEuMjYsMCwwLDAtLjc1LTEuMTEsMSwxLDAsMCwwLTEuMTEuMjhsLS4xLjFhMS4xNSwxLjE1LDAsMCwxLTEuMTkuMjksMS4xNiwxLjE2LDAsMCwxLS43OC0uOTVjLS4wOS0uNjgtLjIxLS43Ny0uNy0uODdhLjgyLjgyLDAsMCwwLTEsLjQ4LDEuMTYsMS4xNiwwLDAsMS0yLjE2LS41OFYzLjc3YTEuNDYsMS40NiwwLDEsMC0yLjkyLDB2Ny44NWwwLDQuMzNhMS4xNywxLjE3LDAsMCwxLS44MywxLjExLDEuMTUsMS4xNSwwLDAsMS0xLjItLjM1bC0xLS45MWMtLjQ3LS40Mi0uNzMtLjY2LS44NC0uNzdhMS4zNSwxLjM1LDAsMCwwLTItLjEyTDIuNywxNWExLjMyLDEuMzIsMCwwLDAtLjM5LDFBMi41NywyLjU3LDAsMCwwLDMsMTcuODVsMCwwYTI3LjI0LDI3LjI0LDAsMCwxLDQuNyw1LjYyQTEyLjYzLDEyLjYzLDAsMCwxLDguNjEsMjguMjFaTTIzLjIsMjMuMzVaTTYuNTEsMTYuNTlaIi8+PC9nPjwvZz48L3N2Zz4=);
}
.scroll-hint-icon-white:after {
background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMy4yOSIgaGVpZ2h0PSIxMi4wMiIgdmlld0JveD0iMCAwIDMzLjI5IDEyLjAyIj48dGl0bGU+44Ki44K744OD44OIIDI8L3RpdGxlPjxnIGlkPSLjg6zjgqTjg6Tjg7xfMiIgZGF0YS1uYW1lPSLjg6zjgqTjg6Tjg7wgMiI+PGcgaWQ9IuODrOOCpOODpOODvF8xLTIiIGRhdGEtbmFtZT0i44Os44Kk44Ok44O8IDEiPjxsaW5lIHgxPSIxLjg1IiB5MT0iNi4wMSIgeDI9IjEwLjQiIHkyPSI2LjAxIi8+PHBhdGggZD0iTTEwLjQsNy4xN0gxLjg1YTEuMTYsMS4xNiwwLDEsMSwwLTIuMzFIMTAuNGExLjE2LDEuMTYsMCwxLDEsMCwyLjMxWiIvPjxwYXRoIGQ9Ik03LjQsMTJhMS4xNSwxLjE1LDAsMCwxLS43Mi0uMjVsLTYuMjUtNUExLjIsMS4yLDAsMCwxLDAsNS44NywxLjE0LDEuMTQsMCwwLDEsLjQ2LDVMNi43LjIzQTEuMTYsMS4xNiwwLDAsMSw4LjEsMi4wOEwzLDUuOTEsOC4xMiwxMEExLjE2LDEuMTYsMCwwLDEsNy40LDEyWiIvPjxsaW5lIHgxPSIzMS40NSIgeTE9IjYuMDEiIHgyPSIyMi44OSIgeTI9IjYuMDEiLz48cGF0aCBkPSJNMzEuNDUsNy4xN0gyMi44OWExLjE2LDEuMTYsMCwxLDEsMC0yLjMxaDguNTZhMS4xNiwxLjE2LDAsMCwxLDAsMi4zMVoiLz48cGF0aCBkPSJNMjUuOSwxMmExLjE4LDEuMTgsMCwwLDEtLjkxLS40M0ExLjE3LDEuMTcsMCwwLDEsMjUuMTcsMTBsNS4wOS00LjA1TDI1LjIsMi4wOEExLjE2LDEuMTYsMCwwLDEsMjYuNTkuMjNMMzIuODQsNWExLjE2LDEuMTYsMCwwLDEsLjQ1LjkxLDEuMTQsMS4xNCwwLDAsMS0uNDMuOTJsLTYuMjQsNUExLjE3LDEuMTcsMCwwLDEsMjUuOSwxMloiLz48L2c+PC9nPjwvc3ZnPg==);
}
.scroll-hint-icon-white .scroll-hint-text {
color: #000;
}
.scroll-hint-shadow-wrap {
position: relative;
}
.scroll-hint-shadow-wrap::after {
content: "";
width: 20px;
height: 100%;
background: linear-gradient(270deg, rgba(0, 0, 0, .15) 0, rgba(0, 0, 0, 0) 16px, rgba(0, 0, 0, 0));
position: absolute;
top: 0;
right: 0;
pointer-events: none;
z-index: 1;
opacity: 0;
visibility: hidden;
}
.scroll-hint-shadow-wrap::before {
content: "";
width: 20px;
height: 100%;
background: linear-gradient(90deg, rgba(0, 0, 0, .15) 0, rgba(0, 0, 0, 0) 16px, rgba(0, 0, 0, 0));
position: absolute;
top: 0;
left: 0;
pointer-events: none;
z-index: 1;
opacity: 0;
visibility: hidden;
}
.scroll-hint-shadow-wrap:has(.scroll-hint.is-right-scrollable)::after,
.scroll-hint-shadow-wrap.is-right-scrollable::after
{
opacity: 1;
visibility: visible;
}
.scroll-hint-shadow-wrap:has(.scroll-hint.is-left-scrollable)::before,
.scroll-hint-shadow-wrap.is-left-scrollable::before
{
opacity: 1;
visibility: visible;
}*,
::before,
::after {
box-sizing: border-box;
border-style: solid;
border-width: 0;
}   html {
line-height: 1; -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; }   body {
margin: 0;
} main {
display: block;
}  p,
table,
blockquote,
address,
pre,
iframe,
form,
figure,
dl {
margin: 0;
}  h1,
h2,
h3,
h4,
h5,
h6 {
font-size: inherit;
line-height: inherit;
font-weight: inherit;
margin: 0;
}  ul,
ol {
margin: 0;
padding: 0;
list-style: none;
}  dt {
font-weight: normal;
}
dd {
margin-left: 0;
}   hr {
box-sizing: content-box; height: 0; overflow: visible; border-top-width: 1px;
margin: 0;
clear: both;
color: inherit;
} pre {
font-family: monospace, monospace; font-size: inherit; }
address {
font-style: inherit;
}   a {
background-color: transparent;
text-decoration: none;
color: inherit;
} abbr[title] {
text-decoration: underline; text-decoration: underline dotted; } b,
strong {
font-weight: bolder;
} code,
kbd,
samp {
font-family: monospace, monospace; font-size: inherit; } small {
display: block;
} sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sub {
bottom: -0.25em;
}
sup {
top: -0.5em;
}   img,
embed,
object,
iframe {
vertical-align: bottom;
}   button,
input,
optgroup,
select,
textarea {
-webkit-appearance: none;
appearance: none;
vertical-align: middle;
color: inherit;
font: inherit;
background: transparent;
padding: 0;
margin: 0;
outline: 0;
border-radius: 0;
text-align: inherit;
} [type="checkbox"] {
-webkit-appearance: checkbox;
appearance: checkbox;
}
[type="radio"] {
-webkit-appearance: radio;
appearance: radio;
} button,
input { overflow: visible;
} button,
select { text-transform: none;
} button,
[type="button"],
[type="reset"],
[type="submit"] {
cursor: pointer;
-webkit-appearance: none;
appearance: none;
}
button[disabled],
[type="button"][disabled],
[type="reset"][disabled],
[type="submit"][disabled] {
cursor: default;
} button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
border-style: none;
padding: 0;
} button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
outline: 1px dotted ButtonText;
} select::-ms-expand {
display: none;
} option {
padding: 0;
} fieldset {
margin: 0;
padding: 0;
min-width: 0;
} legend {
color: inherit; display: table; max-width: 100%; padding: 0; white-space: normal; } progress {
vertical-align: baseline;
} textarea {
overflow: auto;
} [type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
height: auto;
} [type="search"] {
outline-offset: -2px; } [type="search"]::-webkit-search-decoration {
-webkit-appearance: none;
} ::-webkit-file-upload-button {
-webkit-appearance: button; font: inherit; }   details {
display: block;
} summary {
display: list-item;
} [contenteditable] {
outline: none;
}  table {
border-collapse: collapse;
border-spacing: 0;
}
caption {
text-align: left;
}
td,
th {
vertical-align: middle;
padding: 0;
}
th {
text-align: center;
font-weight: normal;
}   template {
display: none;
} [hidden] {
display: none;
}
    @font-face {
font-family: "DIN";
src: url(//km-ac.com/wp-content/themes/kmiki/assets/font/din-alternate-bold.ttf) format("truetype");
}
:root {
--YuGo: YuGothic, 'Yu Gothic', 'ヒラギノ角ゴ Pro W3', Hiragino Kaku Gothic Pro, Meiryo, メイリオ, Osaka, 'MS PGothic', arial, helvetica, sans-serif;
--DIN: "DIN", 'DIN Alternate', 'Arial Narrow', 'Helvetica Neue', sans-serif;;
}   body {
font-family: var(--YuGo);
font-size: 15px;
line-height: 1.7;
color: #3E3A39;
}
body.no-scroll {
overflow: hidden;
}
main {
min-width: 1500px;
padding-top: 185px;
position: relative;
z-index: 3;
}
@media screen and (max-width: 1499.98px) {
main {
padding-top: 90px;
}
}
@media screen and (max-width: 767.98px) {
main {
min-width: 100%;
}
}
main > h1 {
display: none;
}
main > p#breadcrumbs {
display: none;
}
img {
width: 100%;
height: auto;
object-fit: cover;
}
figure {
margin: 0;
}   .sp-only {
display: none;
}
@media screen and (max-width: 767.98px) {
.sp-only {
display: block;
}
.pc-only {
display: none;
}
}   @media screen and (min-width: 768px) {
a[href^="tel:"] {
pointer-events: none;
}
}   a, button {
display: inline-block;
transition: 0.3s;
}
@media (hover: hover) {
a:hover,
button:hover {
cursor: url(//km-ac.com/wp-content/themes/kmiki/assets/img/common/pointer.png) 10 10, auto;
}
}
.common-link {
width: 185px;
padding-block: 5px;
border-radius: 23px;
border: 3px solid #2DB8C3;
background-color: #fff;
text-align: center;
font-weight: 700;
letter-spacing: 0.04em;
}
.common-link.common-link--recruit {
border: 2px solid #fff;
background-color: #CF73A3;
color: #fff;
}    .common-wide-inner {
max-width: 1125px;
margin-inline: auto;
padding-inline: 20px;
}
@media screen and (max-width: 767.98px) {
.common-wide-inner {
padding-inline: min(calc(100vw / 375 * 28), 28px);
}
} .common-main-inner {
max-width: 920px;
margin-inline: auto;
padding-inline: 20px;
}
@media screen and (max-width: 767.98px) {
.common-main-inner {
padding-inline: 20px;
}
} .header {
position: fixed;
top: 0;
left: 0;
width: 100%;
min-width: 1500px;
padding-block: 12px;
background-color: #fff;
z-index: 999;
}
.header__inner {
width: 100%;
height: 100%;
padding-left: 14px;
padding-right: 34px;
display: flex;
justify-content: center;
column-gap: 70px;
}
.header__logo {
width: 162px;
position: relative;
z-index: 9999;
}
.header__logo-link {
position: relative;
width: 100%;
height: 100%;
}
.header__menu {
padding-top: 12px;
}
.header__menu-content {
display: flex;
flex-direction: column-reverse;
}
.header__buttonZone {
display: flex;
column-gap: 34px;
}
.header__clinic {
width: 360px;
}
.header__button-list {
display: flex;
column-gap: 16px;
}
.header__button-item {
width: 175px;
}
.header__button-link {
border-radius: 30px;
height: 52px;
display: flex;
justify-content: center;
align-items: center;
column-gap: 8px;
}
.header__button-link--frame {
border: 3px solid #2DB8C3;
background-color: #fff;
}
.header__button-link--region {
background-color: #005876;
}
.header__button-icon--phone {
width: 16px;
}
.header__button-icon--pc {
margin-bottom: 6px;
width: 32px;
}
.header__button-icon--line {
width: 32px;
}
.header__button-text {
font-size: 14px;
font-weight: 700;
}
.header__button-text--phone {
font-family: var(--DIN);
font-size: 16px;
letter-spacing: 0.1em;
}
.header__button-text--region {
color: #fff;
}
.header__nav {
margin-top: 8px;
padding-right: 45px;
display: flex;
align-items: center;
justify-content: space-between;
column-gap: 16px;
}
.header__nav-list {
padding-top: 14px;
display: flex;
align-items: center;
}
.header__nav-item {
margin-left: 46px;
line-height: 1.2;
position: relative;
}
.header__nav-item:first-child {
margin-left: 12px;
}
.header__nav-item:not(:first-child)::before {
position: absolute;
top: 0;
left: -23px;
content: "";
width: 1px;
height: 100%;
background-color: #231815;
}
.header__nav-link {
font-weight: 700;
font-size: 16px;
line-height: 1.4;
}
.header__nav-sub {
position: absolute;
top: 100%;
left: -23px;
width: calc(100% + 47px);
display: none;
}
.header__nav-item:nth-child(2):hover .header__nav-sub {
display: block;
}
.header__nav-subLink {
width: 100%;
padding: 8px;
background-color: rgba(46, 184, 195, .9);
text-align: center;
font-weight: 700;
font-size: 16px;
line-height: 1.4;
color: #fff;
}
.header__nav-recruit {
width: 74px;
}
.hamburger {
display: none;
}
@media screen and (max-width: 1499.98px) {
.header {
height: 90px;
min-width: 100%;
padding-block: min(calc(100vw / 425 * 12), 12px);
background-color: unset;
}
.header::before {
position: absolute;
top: 0;
left: 0;
content: "";
width: 100%;
height: 100%;
background-color: #fff;
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1);
z-index: -1;
opacity: 0;
transition: all 0.3s;
}
.header.is-bg-white::before {
opacity: 1;
}
.header__inner {
padding-left: min(calc(100vw / 425 * 20), 20px);
padding-right: 0;
justify-content: flex-start;
}
.header__logo {
width: auto;
}
.header__logo-link {
height: auto;
display: flex;
align-items: center;
}
@media(max-width: 1499.98px) {
.header__logo img.sp-only {
display: block;
}
}
.header__logo-link img:nth-child(1) {
width: min(calc(100vw / 425 * 65), 65px);
}
.header__logo-link img:nth-child(2) {
width: min(calc(100vw / 425 * 246), 246px);
margin-left: min(calc(100vw / 425 * 15), 15px);
}
.header__menu {
position: fixed;
top: 0;
left: 0;
width: 100vw;
min-width: 100%;
height: 100vh;
min-height: 100%;
padding-top: 90px;
background-color: #F0EFEF;
display: flex;
flex-direction: column-reverse;
opacity: 0;
visibility: hidden;
transition: 0.3s;
z-index: 999;
}
.header__menu.is-active {
opacity: 1;
visibility: visible;
}
.header__menu-content {
height: 100%;
flex-direction: column;
padding-inline: 30px;
padding-bottom: 100px;
overflow: auto;
}
.header__clinic {
position: absolute;
width: 1px;
height: 1px;
opacity: 0;
z-index: -999;
}
.header__button-list {
flex-direction: column;
row-gap: 12px;
}
.header__nav {
width: 100%;
padding-right: 0;
flex-direction: column;
align-items: flex-start;
margin-bottom: 40px;
}
.header__nav-list {
width: 100%;
padding: 0;
flex-direction: column;
align-items: flex-start;
}
.header__nav-item {
margin-left: 0;
}
.header__nav-item:first-child {
margin-left: 0;
}
.header__nav-item:not(:first-child) {
margin-top: 25px;
}
.header__nav-item:not(:first-child)::before {
display: none;
}
.header__nav-link {
font-size: 18px;
}
.header__nav-sub {
margin-top: 25px;
position: relative;
top: 0;
left: 0;
width: auto;
display: block;
}
.header__nav-subLink {
width: auto;
padding: 0;
background-color: unset;
font-size: 18px;
color: #3E3A39;
}
.header__nav-recruit {
margin-top: 25px;
}
.header__button-item {
width: 220px;
}
.header__button-text {
font-size: 16px;
}
.hamburger {
display: block;
position: fixed;
top: 0;
right: 0;
width: 53px;
height: 65px;
padding: 13px 10px;
background-color: #2DB8C3;
cursor: pointer;
transition: 0.3s;
z-index: 9999;
}
.hamburger__line-zone {
display: inline-block;
width: 100%;
height: 100%;
position: relative;
}
.hamburger__line-zone::before {
position: absolute;
bottom: -10px;
left: 50%;
transform: translateX(-50%);
content: "MENU";
font-weight: 700;
font-size: 11px;
color: #fff;
}
.hamburger__line {
display: inline-block;
position: absolute;
left: 0;
content: "";
width: 100%;
height: 5px;
background-color: #fff;
transition: 0.3s;
}
.hamburger__line:nth-child(1) {
top: 0;
}
.hamburger__line:nth-child(2) {
top: 12px;
}
.hamburger__line:nth-child(3) {
top: 24px;
}
.hamburger.is-active .hamburger__line:nth-child(1) {
top: 8px;
transform: rotate(-45deg);
}
.hamburger.is-active .hamburger__line:nth-child(2) {
opacity: 0;
}
.hamburger.is-active .hamburger__line:nth-child(3) {
top: 8px;
transform: rotate(45deg);
}
} .page-fv {
padding-bottom: 100px;
}
.common-fv__container {
display: flex;
justify-content: center;
padding-left: 40px;
}
.common-fv__titleZone {
width: 240px;
display: flex;
justify-content: center;
padding-top: 45px;
}
.common-fv__title {
writing-mode: vertical-rl;
font-weight: 700;
font-size: 32px;
letter-spacing: 0.15em;
}
.common-fv__imageZone {
width: calc(100% - 240px);
position: relative;
}
.common-fv__imageZone img {
border-radius: 65px 0 0 65px;
}
.top-fv__slider-item img {
aspect-ratio: 52 / 30;
}
.top-fv__circle {
position: absolute;
bottom: 21%;
left: 950px;
width: 225px;
height: 225px;
border-radius: 50%;
background-color: #2DB8C3;
display: flex;
justify-content: center;
align-items: center;
}
.top-fv__circle-text01 {
text-align: center;
font-weight: 700;
font-size: 24px;
letter-spacing: 0.14em;
color: #fff;
}
.top-fv__circle-text01 span {
display: inline-block;
position: relative;
}
.top-fv__circle-text01 span::before {
position: absolute;
top: -3px;
left: 50%;
transform: translateX(-50%);
content: "";
width: 5px;
height: 5px;
background-color: #fff;
border-radius: 50%;
}
.top-fv__circle-text02 {
width: 152px;
border-radius: 3px;
background-color: #fff;
padding-block: 2px;
text-align: center;
font-weight: 700;
font-size: 20px;
color: #2DB8C3;
}
.top-fv__circle-text03 {
margin-top: 4px;
text-align: center;
font-weight: 700;
font-size: 20px;
letter-spacing: 0.1em;
color: #fff;
}
@media screen and (min-width: 1537px) {
.common-fv__container {
margin-left: auto;
width: calc(50% + 768px);
}
.common-fv__slider-item img {
aspect-ratio: unset;
height: 725px;
}
}
@media screen and (max-width: 767.98px) {
.page-fv {
padding-bottom: 50px;
}
.common-fv {
position: relative;
background-color: #CEE3E2;
z-index: 1;
}
.common-fv::before {
position: absolute;
top: -91px;
left: 0;
content: "";
width: 100%;
height: 91px;
background-color: #CEE3E2;
z-index: -1;
}
.top-fv {
height: calc(100svh - 90px - 64px);
padding-top: 20px;
}
.common-fv__container {
padding-left: min(calc(100vw / 375 * 20), 20px);
justify-content: flex-start;
}
.top-fv .common-fv__container {
padding-left: 36px;
flex-direction: column-reverse;
}
.common-fv__titleZone {
width: 48px;
padding-top: 8px;
}
.common-fv__title {
font-size: 19px;
line-height: 1;
}
.common-fv__imageZone {
flex: 1;
height: 165px;
}
.top-fv .common-fv__imageZone {
width: 100%;
height: auto;
}
.common-fv__imageZone img {
height: 100%;
object-position: 30% center;
border-radius: 25px 0 0 25px;
}
.common-fv__imageZone.common-fv__imageZone--petsalon img,
.common-fv__imageZone.common-fv__imageZone--medical-departments img {
object-position: 50% center;
}
.top-fv__slider-item img {
object-position: 20%;
aspect-ratio: unset;
height: calc(100svh - 90px - 64px - 140px);
}
.top-fv .common-fv__titleZone {
width: 100%;
padding-top: 12px;
justify-content: flex-start;
}
.top-fv .common-fv__title {
font-size: min(calc(100vw / 375 * 21), 21px);
line-height: 1.6;
letter-spacing: 0.06em;
writing-mode: unset;
}
.top-fv__circle {
bottom: 8%;
left: auto;
right: 7%;
width: 135px;
height: 135px;
}
.top-fv__circle-text01 {
padding-top: 16px;
font-size: 14px;
line-height: 1;
}
.top-fv__circle-text01 span::before {
top: -9px;
width: 3px;
height: 3px;
}
.top-fv__circle-text02 {
margin-top: 4px;
margin-inline: auto;
width: 90px;
font-size: 12px;
}
.top-fv__circle-text03 {
margin-top: 2px;
font-size: 12px;
}
} .top-cta__buttons {
display: flex;
}
.top-cta__button {
width: 50%;
padding-block: 9px;
display: flex;
align-items: center;
justify-content: center;
column-gap: 6px;
}
.top-cta__button:nth-child(1) {
background-color: #fff;
}
.top-cta__button:nth-child(2) {
background-color: #2DB8C3;
}
.top-cta__button-icon--phone {
width: 28px;
}
.top-cta__button-icon--pc {
width: 44px;
-webkit-filter: brightness(0) invert(1);
filter: brightness(0) invert(1);
}
.top-cta__button-text--phone {
font-weight: 700;
font-family: var(--DIN);
font-size: 17px;
letter-spacing: 0.03em;
}
.top-cta__button-text--pc {
font-weight: 700;
font-size: 13px;
color: #fff;
} .top-news-about {
margin-top: -70px;
padding-top: 145px;
background-color: #CEE3E2;
}
@media screen and (max-width: 767.98px) {
.top-news-about {
margin-top: -1px;
padding-top: 30px;
}
} .top-news__container {
border-radius: 20px;
overflow: hidden;
display: flex;
}
.top-news__titleZone {
width: 150px;
background-color: #2DB8C3;
display: flex;
justify-content: center;
align-items: center;
}
.top-news__title {
font-family: var(--DIN);
font-weight: 700;
font-size: 16px;
letter-spacing: 0.04em;
color: #fff;
}
.top-news__wrapper {
flex: 1;
background-color: #fff;
padding: 30px 40px 28px 30px;
display: flex;
justify-content: space-between;
align-items: flex-end;
}
.top-news__list {
flex: 1;
padding-bottom: 4px;
}
.top-news__item:not(:first-child) {
margin-top: 12px;
}
.top-news__link {
display: flex;
column-gap: 28px;
width: fit-content;
font-weight: 500;
letter-spacing: 0.05em;
}
@media screen and (max-width: 767.98px) {
.top-news__container {
border-radius: 0;
flex-direction: column;
}
.top-news__titleZone {
width: 100%;
background-color: unset;
}
.top-news__title {
font-size: 21px;
color: #2DB8C3;
}
.top-news__wrapper {
margin-top: 16px;
width: 100%;
padding: 0;
background-color: unset;
flex-direction: column;
align-items: center;
}
.top-news__list {
width: 100%;
border-radius: 12px;
padding: 18px;
background-color: #fff;
}
.top-news__link {
column-gap: 16px;
font-size: 14px;
}
.top-news__archive {
margin-top: 14px;
}
} .top-about {
margin-top: 105px;
}
.top-about__container {
margin-left: auto;
width: calc(50% + 550px);
display: flex;
column-gap: 40px;
}
.top-about__body {
width: 450px;
}
.top-about__title {
font-weight: 700;
font-size: 31px;
line-height: calc(65.2 / 38);
letter-spacing: 0.1em;
}
.top-about__text {
margin-top: 16px;
font-weight: 500;
letter-spacing: 0.05em;
}
.top-about__linkZone {
margin-top: 36px;
display: flex;
justify-content: flex-end;
}
.top-about__image {
flex: 1;
}
.top-about__image img {
border-radius: 40px 0 0 40px;
height: 412px;
}
.top-about__sliderZone {
margin-top: 100px;
}
.top-about__slider-item {
width: 320px;
margin-right: 40px;
}
.top-about__slider-item:nth-child(even) {
margin-top: 40px;
}
.top-about__slider-item img {
border-radius: 35px;
}
.top-about__bottom {
margin-top: 50px;
display: flex;
align-items: center;
justify-content: center;
column-gap: 40px;
}
.top-about__bottom-text {
padding-top: 30px;
width: 1070px;
}
.top-about__bottom-cat {
width: 155px;
}
@media screen and (max-width: 767.98px) {
.top-about {
margin-top: 50px;
}
.top-about__container {
width: 100%;
flex-direction: column-reverse;
}
.top-about__body {
margin-top: 14px;
width: 100%;
padding-inline: min(calc(100vw / 375 * 36), 36px);
}
.top-about__title {
font-size: min(calc(100vw / 375 * 21), 21px);
line-height: 1.5;
}
.top-about__text {
margin-top: 12px;
font-size: 15px;
}
.top-about__linkZone {
margin-top: 24px;
justify-content: center;
}
.top-about__image {
width: 100%;
padding-left: min(calc(100vw / 375 * 36), 36px);
}
.top-about__image img {
border-radius: 20px 0 0 20px;
height: 170px;
}
.top-about__sliderZone {
margin-top: 60px;
}
.top-about__slider-item {
width: 160px;
margin-right: 20px;
}
.top-about__slider-item:nth-child(even) {
margin-top: 20px;
}
.top-about__slider-item img {
border-radius: 12px;
}
.top-about__bottom {
margin-top: 40px;
padding-inline: 10px;
column-gap: 10px;
}
.top-about__bottom-text {
padding-top: 0;
width: 80%;
}
.top-about__bottom-cat {
flex: 1;
}
} .top-feature {
padding-top: 160px;
padding-bottom: 330px;
position: relative;
z-index: 1;
overflow: hidden;
}
.top-feature::before {
position: absolute;
top: 0;
left: 0;
content: "";
width: 100%;
height: 50%;
background-color: #2DB8C3;
z-index: -1;
}
.top-feature::after {
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
content: "";
width: 110%;
height: auto;
aspect-ratio: 1 / 1;
border-radius: 50%;
background-color: #2DB8C3;
z-index: -1;
}
.top-feature .common-main-inner {
position: relative;
}
.top-feature__title {
text-align: center;
font-weight: 700;
font-size: 32px;
letter-spacing: 0.1em;
color: #fff;
}
.top-feature__subTitle {
font-family: var(--DIN);
text-align: center;
font-weight: 700;
font-size: 13px;
letter-spacing: 0.05em;
line-height: 1;
color: #fff;
}
.top-feature__container {
margin-top: 85px;
border-radius: 0 0 40px 40px;
background-color: #fff;
padding: 82px 90px 60px;
position: relative;
z-index: 1;
}
.top-feature__container::before {
position: absolute;
top: -105px;
left: 0;
content: "";
width: 210px;
height: 210px;
border-radius: 50%;
background-color: #fff;
padding-top: 102px;
}
.top-feature__container::after {
position: absolute;
top: -105px;
right: 0;
content: "";
width: 210px;
height: 210px;
border-radius: 50%;
background-color: #fff;
}
.top-feature__logo {
display: block;
position: absolute;
top: -42px;
left: 50%;
transform: translateX(-50%);
width: 100px;
border-radius: 50%;
border: 8px solid #fff;
background-color: #fff;
}
.top-feature__lead {
text-align: center;
font-weight: 700;
font-size: 23px;
letter-spacing: 0.1em;
}
.top-feature__lead-color {
color: #2DB8C3;
}
.top-feature__text {
margin-top: 24px;
font-weight: 500;
letter-spacing: 0.06em;
}
.top-feature__subject-list {
margin-top: 32px;
display: flex;
flex-wrap: wrap;
gap: 32px;
}
.top-feature__subject-item {
width: calc((100% - 32px * 2) / 3);
}
.top-feature__subject-link {
display: block;
width: 100%;
border-radius: 7px;
box-shadow: 5px 5px 6px 0 #ddd;
position: relative;
z-index: 1;
}
.top-feature__subject-link::before {
position: absolute;
top: 50%;
right: 4%;
transform: translateY(-50%);
content: "";
width: 22px;
height: 22px;
background-image: url(//km-ac.com/wp-content/themes/kmiki/assets/img/top/top_feature_arrow.svg);
background-repeat: no-repeat;
background-size: contain;
}
.top-feature__subject-link::after {
position: absolute;
top: 2px;
left: 2px;
content: "";
width: 100%;
height: 100%;
border-radius: 5px;
background-color: #ddd;
filter: blur(2px);
z-index: -1;
}
.top-feature__subject-item-main {
position: absolute;
top: 50%;
left: 30%;
transform: translateY(-50%);
width: 55%;
display: flex;
justify-content: center;
align-items: center;
}
.top-feature__subject-item-text {
text-align: center;
font-weight: 700;
font-size: 21px;
letter-spacing: 0.1em;
color: #3E3A39;
}
.top-feature__subject-item-medium {
text-align: center;
font-weight: 700;
font-size: 19px;
letter-spacing: 0.1em;
color: #3E3A39;
}
.top-feature__subject-item-small {
font-weight: 700;
font-size: 15px;
letter-spacing: 0.1em;
line-height: 1.3;
color: #3E3A39;
}
.top-feature__strong-list {
margin-top: 52px;
display: flex;
justify-content: space-between;
}
.top-feature__strong-item {
width: 30%;
border-radius: 3px;
background-color: #2DB8C3;
padding-block: 12px;
text-align: center;
font-weight: 700;
font-size: 16px;
letter-spacing: 0.05em;
color: #fff;
}
.top-feature__tableZone {
margin-top: 14px;
}
.top-feature__table {
width: 100%;
}
.top-feature__table tr th:nth-child(1) { width: 26%;
padding-block: 7px;
padding-right: 14px;
}
.medical-subject__table tr th:nth-child(1) br.sp-only,
.top-feature__table tr th:nth-child(1) br.sp-only {
display: block;
}
@media(min-width: 768px) {
.top-feature__table tr th:nth-child(1) {
text-align: left;
padding-left: 12px;
}
}
.top-feature__table tr th:not(:first-child),
.top-feature__table tr td {
vertical-align: middle;
padding-top: 14px;
padding-bottom: 10px;
width: 6.5%;
text-align: center;
font-weight: 700;
}
.top-feature__table tr th:last-child,
.top-feature__table tr td:last-child {
width: 14%;
}
.top-feature__table tbody tr {
border-top: 2px solid #2DB8C3;
}
.top-feature__table tbody tr th span {
font-weight: 700;
}
.top-feature__table tbody tr th span:nth-child(2) {
padding-left: 15px;
padding-right: 7px;
font-family: var(--DIN);
font-size: 20px;
letter-spacing: 0.05em;
}
.top-feature__table-circle {
display: inline-block;
width: 16px;
height: 16px;
background-color: #2DB8C3;
border-radius: 50%;
}
.top-feature__table-screen {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
.top-feature__time-note {
font-size: 0.8em;
color: #333;
}
.top-feature__emergency {
margin-top: 16px;
border-radius: 3px;
background-color: #D294B7;
padding-block: 10px;
padding-left: 7%;
display: flex;
align-items: center;
justify-content: center;
font-weight: 700;
color: #fff;
}
.top-feature__emergency-time {
margin-left: 14px;
}
.top-feature__emergency-time span {
font-family: var(--DIN);
font-size: 20px;
letter-spacing: 0.05em;
}
.top-feature__emergency-caution {
display: inline-block;
margin-left: 16px;
font-size: 11px;
}
.top-feature__reserve {
margin-top: 40px;
display: flex;
justify-content: center;
position: relative;
}
.top-feature__reserve-link {
width: 180px;
border-radius: 30px;
border: 3px solid #2DB8C3;
background-color: #fff;
padding-block: 7px;
display: flex;
justify-content: center;
align-items: center;
column-gap: 8px;
}
.top-feature__reserve-icon {
margin-bottom: 8px;
width: 30px;
}
.top-feature__reserve-text {
font-weight: 700;
font-size: 14px;
}
.top-feature__reserve-cat {
position: absolute;
bottom: -55px;
left: -20px;
width: 190px;
}
.top-feature__reserve-dog {
position: absolute;
bottom: -55px;
right: -24px;
width: 154px;
}
.top-feature__container-bg {
position: absolute;
bottom: 13%;
left: 50%;
transform: translateX(-50%);
width: 400px;
z-index: -1;
}
.top-feature__anchor {
margin-top: 95px;
border-radius: 32px;
background-color: #fff;
padding: 24px 20px;
}
.top-feature__anchor-list {
display: flex;
}
.top-feature__anchor-item {
width: 25%;
padding-block: 18px;
display: flex;
justify-content: center;
align-items: center;
position: relative;
}
.top-feature__anchor-item:not(:first-child)::before {
position: absolute;
top: 0;
left: 0;
content: "";
width: 1px;
height: 100%;
background-color: #595757;
}
.top-feature__anchor-link {
display: flex;
flex-direction: column;
align-items: center;
}
.top-feature__anchor-image {
display: inline-block;
width: 75px;
}
.top-feature__anchor-text {
margin-top: 5px;
font-weight: 700;
font-size: 16px;
letter-spacing: 0.1em;
}
.top-feature__mark01 {
display: block;
position: absolute;
top: 23%;
left: calc(50% - 700px);
width: 215px;
}
.top-feature__mark02 {
display: block;
position: absolute;
top: 40%;
left: calc(50% - 812px);
transform: rotate(-25deg);
width: 160px;
}
.top-feature__mark03 {
display: block;
position: absolute;
top: 56%;
left: calc(50% - 712px);
width: 160px;
}
.top-feature__mark04 {
display: block;
position: absolute;
top: 0;
left: calc(50% + 490px);
width: 250px;
}
.top-feature__mark05 {
display: block;
position: absolute;
top: 22%;
left: calc(50% + 615px);
transform: rotate(-25deg);
width: 200px;
}
.top-feature__mark06 {
display: block;
position: absolute;
top: 43%;
left: calc(50% + 500px);
transform: rotate(-25deg);
width: 200px;
}
@media screen and (max-width: 767.98px) {
.top-feature {
padding-top: 60px;
padding-bottom: 100px;
}
.top-feature::before {
height: 100%;
}
.top-feature::after {
display: none;
}
.top-feature__container-bg {
bottom: 210px;
width: 200px;
}
.top-feature__title {
font-size: 28px;
}
.top-feature__container {
margin-top: 120px;
padding: 70px 15px 30px;
}
.top-feature__container::before {
top: max(calc(-100vw / 375 * 60), -60px);
width: min(calc(100vw / 375 * 130), 130px);
height: min(calc(100vw / 375 * 130), 130px);
}
.top-feature__container::after {
top: max(calc(-100vw / 375 * 60), -60px);
width: min(calc(100vw / 375 * 130), 130px);
height: min(calc(100vw / 375 * 130), 130px);
}
.top-feature__logo {
width: 50px;
height: 50px;
padding: 0;
top: -20px;
border: 3px solid #fff;
}
.top-feature__lead {
font-size: 20px;
}
.top-feature__subject-list {
flex-direction: column;
margin-inline: auto;
max-width: 305px;
gap: 16px;
}
.top-feature__subject-item {
width: 100%;
}
.top-feature__subject-link::before {
right: 23px;
}
.top-feature__subject-item-main {
left: 31.5%;
}
.top-feature__subject-item-text {
font-size: 20px;
}
.top-feature__subject-item-small {
margin-left: 10px;
font-size: 13px;
}
.top-feature__strong-list {
flex-direction: column;
gap: 5px;
}
.top-feature__strong-item {
width: 100%;
}
.top-feature__table tr th:nth-child(1) {
width: 32%;
padding-block: 5px;
padding-right: 2px;
font-size: 11px;
}
.top-feature__table tr th:not(:first-child),
.top-feature__table tr td {
padding: 0;
font-size: 11px;
}
.top-feature__table tbody tr th span:nth-child(2) {
padding-inline: 0;
font-size: 13px;
}
.top-feature__table-circle {
width: 13px;
height: 13px;
}
.top-feature__emergency {
padding-block: 11px;
padding-left: 0;
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
font-size: 16px;
}
.top-feature__emergency-caution {
margin-left: 0;
font-size: 12px;
width: 100%;
text-align: center;
}
.top-feature__reserve-cat,
.top-feature__reserve-dog {
display: none;
}
.top-feature__anchor {
margin-top: 60px;
border-radius: 20px;
padding: 20px 10px;
}
.top-feature__anchor-list {
flex-wrap: wrap;
gap: 15px 0;
}
.top-feature__anchor-item {
padding-block: 10px;
width: 50%;
}
.top-feature__anchor-item:nth-child(3)::before,
.top-feature__anchor-item:nth-child(4)::before {
top: -7px;
left: 50%;
transform: translateX(-50%);
width: 80%;
height: 1px;
}
.top-feature__anchor-item:last-child::after {
position: absolute;
top: 0;
left: 0;
content: "";
width: 1px;
height: 100%;
background-color: #595757;
}
.top-feature__anchor-image {
width: 50px;
}
.top-feature__anchor-text {
font-size: 12px;
}
} .lower-catch {
background: #2db8c3;
padding: 183px 0 140px;
position: relative;
}
.lower-catch::after {
content: "";
width: 100%;
height: 147px;
background-image: url(//km-ac.com/wp-content/themes/kmiki/assets/img/common/wave.png);
background-repeat: no-repeat;
background-size: cover;
background-position: bottom;
position: absolute;
bottom: -50px;
left: 0;
}
.lower-catch__container {
margin-left: auto;
width: calc(50% + 600px);
display: flex;
column-gap: 100px;
}
.lower-catch__body {
width: 475px;
color: #fff;
}
.lower-catch__title {
font-weight: 700;
font-size: 31px;
line-height: calc(65.2 / 38);
letter-spacing: 0.1em;
}
.lower-catch__text {
margin-top: 28px;
font-size: 15px;
font-weight: 500;
line-height: calc(31.5 / 18);
letter-spacing: 0.05em;
}
.lower-catch__image {
flex: 1;
}
.lower-catch__image img {
border-radius: 50px 0 0 50px;
height: 518px;
}
@media screen and (max-width: 767.98px) {
.lower-catch {
padding: 80px 0;
}
.lower-catch::after {
height: 60px;
}
.lower-catch__container {
margin-inline: auto;
width: 100%;
padding-inline: 20px;
flex-direction: column;
row-gap: 30px;
}
.lower-catch__body {
width: 100%;
}
.lower-catch__title {
font-size: 21px;
}
.lower-catch__text {
font-size: 15px;
}
.lower-catch__image {
margin-right: calc(50% - 50vw);
}
.lower-catch__image img {
border-radius: 15px 0 0 15px;
height: auto;
aspect-ratio: 355 / 200;
object-fit: cover;
}
}
.lower-title {
text-align: center;
color: #fff;
}
.lower-title--black {
color: #3e3a39;
}
.lower-title--black .lower-title__en {
color: #898989;
}
.lower-title--green {
color: #2db8c3;
}
.lower-title--green .lower-title__en {
color: #727171;
}
.lower-title__ja {
font-weight: 700;
font-size: 32px;
letter-spacing: 0.1em;
line-height: 1.6;
}
.lower-title__en {
font-family: var(--DIN);
font-weight: 700;
font-size: 13px;
letter-spacing: 0.05em;
line-height: 1;
}
@media screen and (max-width: 767.98px) {
.lower-title__ja {
font-size: 28px;
}
.lower-title__en {
font-size: 13px;
}
}
.tel-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 7px;
background: #2db8c3;
border-radius: 100px;
padding: 14px 27px;
font-family: var(--DIN);
font-size: 20px;
font-weight: 700;
line-height: calc(35.9 / 20);
letter-spacing: 0.1em;
color: #fff;
}
.tel-btn--red {
background: #c30d23;
}
.tel-btn:before {
content: "";
width: 20px;
height: 32px;
background-image: url(//km-ac.com/wp-content/themes/kmiki/assets/img/salon/phone.svg);
background-repeat: no-repeat;
background-size: contain;
background-position: center;
} .staff-count {
background-color: #cee3e2;
padding: 156px 0 163px;
}
.staff-count__inner {
width: 1328px;
margin-inline: auto;
padding-inline: 20px;
}
.staff-count__list {
margin-top: 64px;
display: grid;
grid-template-columns: repeat(7, 1fr);
column-gap: 28px;
}
.staff-count__item {
border-radius: 50%;
aspect-ratio: 1 / 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
color: #fff;
font-weight: 700;
padding-top: 10px;
}
.staff-count__item:nth-child(odd) {
background-color: #2db8c3;
}
.staff-count__item:nth-child(even) {
background-color: #88bfb8;
}
.staff-count__itemTitle {
font-size: min(calc(100vw / 375 * 20), 20px);
line-height: calc(35 / 20);
letter-spacing: 0.1em;
}
.staff-count__itemText {
font-size: 20px;
line-height: calc(35 / 20);
letter-spacing: 0.2em;
}
.staff-count__itemText span {
font-family: var(--DIN);
font-size: 33px;
display: inline-block;
line-height: 1;
}
@media screen and (max-width: 767.98px) {
.staff-count {
padding: 120px 0 100px;
}
.staff-count__inner {
width: 100%;
margin-inline: auto;
padding-inline: 20px;
}
.staff-count__list {
margin-top: 40px;
display: grid;
grid-template-columns: repeat(2, 1fr);
column-gap: 20px;
row-gap: 20px;
}
} .doctor-staff {
background-color: #e3eff6;
position: relative;
z-index: 1;
}
.doctor-staff::before {
position: absolute;
bottom: 0;
left: 0;
content: "";
width: 100%;
height: 80%;
background: repeating-linear-gradient(
-60deg,
rgba(45, 184, 195, 0.3),
rgba(45, 184, 195, 0.3) 6px,
transparent 0,
transparent 24px
);
z-index: -1;
} .doctor {
padding-top: 156px;
padding-bottom: 337px;
position: relative;
z-index: 1;
overflow: hidden;
}
.doctor::before {
position: absolute;
top: 0;
left: 0;
content: "";
width: 100%;
height: 50%;
background-color: #2db8c3;
z-index: -1;
}
.doctor::after {
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
content: "";
width: 110%;
height: auto;
aspect-ratio: 1 / 1;
border-radius: 0 0 50% 50%;
background-color: #2db8c3;
z-index: -1;
}
.doctor__inner {
width: 920px;
margin-inline: auto;
padding-inline: 20px;
position: relative;
}
.doctor__container {
margin-top: 158px;
border-radius: 0 0 40px 40px;
background-color: #fff;
padding: 120px 70px;
position: relative;
z-index: 1;
}
.doctor__container::before {
position: absolute;
top: -105px;
left: 0;
content: "";
width: 210px;
height: 210px;
border-radius: 50%;
background-color: #fff;
padding-top: 102px;
opacity: 0.8;
}
.doctor__container::after {
position: absolute;
top: -105px;
right: 0;
content: "";
width: 210px;
height: 210px;
border-radius: 50%;
background-color: #fff;
opacity: 0.8;
}
.doctor__item:not(:first-child) {
margin-top: 85px;
}
.doctor__item:nth-child(2) .doctor__itemTitle {
padding-left: 109px;
}
.doctor__item:nth-child(2) .doctor__itemTitle::before {
position: absolute;
top: 0;
left: -6px;
mask-image: url(//km-ac.com/wp-content/themes/kmiki/assets/img/staff/mark.svg);
mask-repeat: no-repeat;
mask-size: contain;
mask-position: center;
background: #b27d91;
}
.doctor__item:nth-child(2) .doctor__bodyItem:not(:first-child) {
margin-top: 19px;
}
.doctor__item:nth-child(2) .doctor__body {
margin-top: -4px;
}
.doctor__item:nth-child(2) .doctor__bodyTitle {
background-color: #b27d91;
}
.doctor__header {
display: grid;
grid-template-columns: 350px 1fr;
column-gap: 32px;
}
.doctor__image {
margin-top: 5px;
}
.doctor__image img {
border-radius: 5px;
aspect-ratio: 422 / 335;
object-fit: cover;
width: 100%;
height: auto;
}
.doctor__itemTitle {
padding-left: 100px;
position: relative;
}
.doctor__itemTitle::before {
position: absolute;
top: 0;
left: -4px;
content: "";
width: 80px;
height: 64px;
background-image: url(//km-ac.com/wp-content/themes/kmiki/assets/img/staff/mark.svg);
background-repeat: no-repeat;
background-size: contain;
background-position: center;
}
.doctor__position {
font-size: 19px;
font-weight: 700;
line-height: calc(33.2 / 19);
letter-spacing: 0.1em;
}
.doctor__name {
font-size: 23px;
font-weight: 700;
line-height: calc(52.5 / 30);
letter-spacing: 0.1em;
}
.doctor__text {
margin-top: 11px;
font-size: 15px;
font-weight: 500;
line-height: calc(31.5 / 18);
letter-spacing: 0.05em;
}
.doctor__body {
margin-top: 35px;
}
.doctor__bodyItem:not(:first-child) {
margin-top: 27px;
}
.doctor__bodyTitle {
width: 190px;
display: inline-block;
font-size: 17px;
font-weight: 700;
line-height: calc(29.7 / 17);
text-align: center;
color: #fff;
background-color: #2db8c3;
border-radius: 50px;
padding: 6px;
}
.doctor__history {
margin-top: 17px;
margin-left: 4px;
}
.doctor__historyItem {
display: grid; grid-template-columns: 130px 1fr;
column-gap: 32px;
}
.doctor__historyTerm {
font-size: 16px;
font-weight: 700;
line-height: calc(29.7 / 17);
}
.doctor__historyDesc {
font-size: 16px;
font-weight: 500;
line-height: calc(31.5 / 18);
letter-spacing: 0.05em;
}
.doctor__bodyText {
font-size: 18px;
font-weight: 500;
line-height: calc(31.5 / 18);
letter-spacing: 0.05em;
margin-top: 14px;
margin-left: 3px;
}
.doctor__mark01 {
position: absolute;
width: 320px;
height: auto;
top: 481px;
left: calc(50% + 333px);
transform: rotate(-27deg);
}
.doctor__mark02 {
position: absolute;
width: 320px;
height: auto;
bottom: 318px;
left: calc(50% - 680px);
}
@media screen and (max-width: 767.98px) {
.doctor {
padding-top: 80px;
padding-bottom: 230px;
}
.doctor::before {
width: 100%;
height: 90%;
}
.doctor::after {
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
content: "";
width: 110%;
height: auto;
aspect-ratio: 1 / 1;
border-radius: 0 0 50% 50%;
background-color: #2db8c3;
z-index: -1;
}
.doctor__inner {
width: 100%;
}
.doctor__container {
margin-top: 110px;
border-radius: 0 0 20px 20px;
padding: 80px 20px 50px;
}
.doctor__container::before {
top: -65px;
width: 130px;
height: 130px;
}
.doctor__container::after {
top: -65px;
width: 130px;
height: 130px;
}
.doctor__item:not(:first-child) {
margin-top: 50px;
}
.doctor__item:nth-child(2) .doctor__itemTitle {
padding-left: 75px;
}
.doctor__item:nth-child(2) .doctor__itemTitle::before {
top: 50%;
transform: translateY(-50%);
left: -4px;
}
.doctor__item:nth-child(2) .doctor__body {
margin-top: 30px;
}
.doctor__item:nth-child(2) .doctor__bodyItem:not(:first-child) {
margin-top: 27px;
}
.doctor__header {
grid-template-columns: 1fr;
row-gap: 20px;
}
.doctor__image {
margin-top: 0;
}
.doctor__itemTitle {
padding-left: 75px;
position: relative;
width: fit-content;
margin-inline: auto;
}
.doctor__itemTitle::before {
top: 50%;
transform: translateY(-50%);
width: 68px;
height: 51px;
}
.doctor__position {
font-size: 14px;
}
.doctor__name {
font-size: 20px;
}
.doctor__text {
font-size: 16px;
}
.doctor__history {
margin-left: 0;
}
.doctor__historyItem {
grid-template-columns: 1fr;
}
.doctor__historyItem:not(:first-child) {
margin-top: 15px;
}
.doctor__historyDesc {
font-size: 16px;
}
.doctor__bodyText {
font-size: 16px;
margin-left: 0;
}
.doctor__mark01 {
display: none;
}
.doctor__mark02 {
display: none;
}
}
@media screen and (max-width: 374.98px) {
.doctor::after {
bottom: 10vw;
}
} .staff-introduction {
margin-top: -227px;
position: relative;
z-index: 1;
padding-bottom: 222px;
}
.staff-introduction__inner {
width: 920px;
margin-inline: auto;
padding-inline: 20px;
}
.staff-introduction__group01 {
margin-top: 252px;
}
.staff-introduction__group02 {
margin-top: 135px;
}
.staff-introduction__category {
width: 100%;
padding: 16px;
border-radius: 5px;
background-color: #fff;
text-align: center;
font-weight: 700;
font-size: 26px;
letter-spacing: 0.04em;
}
.staff-introduction__list {
margin-top: 40px;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 45px 60px;
}
.staff-introduction__item {
background-color: #fff;
border-radius: 150px 150px 0 0;
overflow: hidden;
}
.staff-introduction__image {
display: flex;
justify-content: center;
height: 350px;
width: 100%;
overflow: hidden;
}
.staff-introduction__image img {
width: 100%;
height: auto;
object-fit: cover;
aspect-ratio: 321 / 481;
object-position: top;
}
.staff-introduction__info {
padding: 10px 0 18px;
text-align: center;
}
.staff-introduction__position {
font-size: 19px;
font-weight: 700;
line-height: calc(33.2 / 19);
letter-spacing: 0.1em;
}
.staff-introduction__name {
font-size: 23px;
font-weight: 700;
line-height: 1.3;
letter-spacing: 0.1em;
}
.staff-introduction__name rt {
font-size: 10px;
font-weight: 500;
padding-inline: 10px;
line-height: 1.2;
}
@media screen and (max-width: 767.98px) {
.staff-introduction {
margin-top: -135px;
padding-bottom: 120px;
}
.staff-introduction__inner {
width: 100%;
}
.staff-introduction__group01 {
margin-top: 120px;
}
.staff-introduction__group02 {
margin-top: 80px;
}
.staff-introduction__category {
padding: 12px;
font-size: 23px;
}
.staff-introduction__list {
margin-top: 20px;
grid-template-columns: repeat(2, 1fr);
gap: 50px 15px;
}
.staff-introduction__item {
border-radius: 100px 100px 0 0;
}
.staff-introduction__image {
height: 200px;
}
.staff-introduction__info {
padding: 10px 0 10px;
}
.staff-introduction__position {
font-size: 16px;
}
.staff-introduction__name {
font-size: 20px;
}
} .advisor {
background-color: #bec685;
padding: 130px 0 0;
overflow: hidden;
}
.advisor__inner {
width: 920px;
margin-inline: auto;
padding-inline: 20px;
position: relative;
}
.advisor__container {
margin-top: 140px;
border-radius: 0 0 40px 40px;
background-color: #fff;
padding: 160px 100px 139px;
position: relative;
z-index: 1;
}
.advisor__container::before {
position: absolute;
top: -105px;
left: 0;
content: "";
width: 210px;
height: 210px;
border-radius: 50%;
background-color: #fff;
padding-top: 102px;
opacity: 0.8;
}
.advisor__container::after {
position: absolute;
top: -105px;
right: 0;
content: "";
width: 210px;
height: 210px;
border-radius: 50%;
background-color: #fff;
opacity: 0.8;
}
.advisor__item:not(:first-child) {
margin-top: 162px;
}
.advisor__item:nth-child(odd) .advisor__header {
display: flex;
flex-direction: row-reverse;
justify-content: flex-end;
}
.advisor__item:nth-child(2) .advisor__itemTitle {
padding-left: 103px;
}
.advisor__item:nth-child(2) .advisor__itemTitle::before {
top: 3px;
left: -2px;
background: #a48b78;
}
.advisor__item:nth-child(3) .advisor__itemTitle::before {
background: #91b522;
}
.advisor__item:nth-child(4) .advisor__itemTitle::before {
background: #aa6ea4;
}
.advisor__item:nth-child(2) .advisor__image {
margin: 0;
}
.advisor__item:nth-child(2) .advisor__body {
margin-top: 27px;
}
.advisor__item:nth-child(2) .advisor__bodyTitle {
background-color: #a48b78;
}
.advisor__item:nth-child(3) .advisor__bodyTitle {
background-color: #91b522;
}
.advisor__item:nth-child(4) .advisor__bodyTitle {
background-color: #aa6ea4;
}
.advisor__header {
display: flex;
column-gap: 32px;
}
.advisor__image {
margin-top: 5px;
width: 230px;
}
.advisor__image img {
border-radius: 5px;
aspect-ratio: 230 / 248;
object-fit: cover;
width: 100%;
height: auto;
}
.advisor__info {
width: 486px;
}
.advisor__itemTitle {
padding-left: 100px;
position: relative;
}
.advisor__itemTitle::before {
position: absolute;
top: 0;
left: -4px;
content: "";
width: 80px;
height: 64px;
mask-image: url(//km-ac.com/wp-content/themes/kmiki/assets/img/staff/mark.svg);
mask-repeat: no-repeat;
mask-size: contain;
mask-position: center;
background: #d0a939;
}
.advisor__position {
font-size: 19px;
font-weight: 700;
line-height: calc(33.2 / 19);
letter-spacing: 0.1em;
}
.advisor__name {
font-size: 23px;
font-weight: 700;
line-height: calc(52.5 / 30);
letter-spacing: 0.1em;
}
.advisor__text {
margin-top: 11px;
font-size: 15px;
font-weight: 500;
line-height: calc(31.5 / 18);
letter-spacing: 0.05em;
}
.advisor__body {
margin-top: 17px;
}
.advisor__bodyItem:not(:first-child) {
margin-top: 36px;
}
.advisor__bodyTitle {
width: 190px;
display: inline-block;
font-size: 17px;
font-weight: 700;
line-height: calc(29.7 / 17);
text-align: center;
color: #fff;
background-color: #d0a939;
border-radius: 50px;
padding: 6px;
}
.advisor__history {
margin-top: 17px;
margin-left: 4px;
}
.advisor__historyItem {
display: grid; grid-template-columns: 122px 1fr;
column-gap: 32px;
}
.advisor__historyTerm {
font-size: 16px;
font-weight: 700;
line-height: calc(29.7 / 17);
}
.advisor__historyDesc {
font-size: 16px;
font-weight: 500;
line-height: calc(31.5 / 18);
letter-spacing: 0.05em;
}
.advisor__bodyText {
font-size: 15px;
font-weight: 500;
line-height: calc(31.5 / 18);
letter-spacing: 0.05em;
margin-top: 14px;
margin-left: 3px;
}
.advisor__mark01 {
position: absolute;
width: 320px;
height: auto;
top: 439px;
left: calc(50% + 333px);
transform: rotate(-27deg);
}
.advisor__mark02 {
position: absolute;
width: 320px;
height: auto;
top: 1381px;
left: calc(50% - 680px);
}
.advisor__mark03 {
position: absolute;
width: 320px;
height: auto;
top: 2556px;
left: calc(50% + 333px);
transform: rotate(-27deg);
}
.advisor__mark04 {
position: absolute;
width: 320px;
height: auto;
bottom: 159px;
left: calc(50% - 680px);
}
.advisor__bottom {
margin-top: 204px;
display: flex;
align-items: center;
justify-content: center;
column-gap: 40px;
}
.advisor__bottom-text {
padding-top: 30px;
width: 1070px;
}
.advisor__bottom-dog {
width: 155px;
}
@media screen and (max-width: 767.98px) {
.advisor {
padding: 80px 0 0;
}
.advisor__inner {
width: 100%;
}
.advisor__container {
margin-top: 120px;
border-radius: 0 0 20px 20px;
padding: 80px 20px 50px;
}
.advisor__container::before {
top: -65px;
width: 130px;
height: 130px;
}
.advisor__container::after {
top: -65px;
width: 130px;
height: 130px;
}
.advisor__item:not(:first-child) {
margin-top: 80px;
}
.advisor__item:nth-child(odd) .advisor__header {
display: flex;
flex-direction: column;
justify-content: center;
}
.advisor__item:nth-child(2) .advisor__itemTitle {
padding-left: 60px;
}
.advisor__item:nth-child(2) .advisor__itemTitle::before {
top: 50%;
left: -4px;
}
.advisor__header {
display: flex;
flex-direction: column;
align-items: center;
row-gap: 20px;
}
.advisor__image {
margin-top: 0;
width: 85%;
max-width: 300px;
}
.advisor__info {
width: 100%;
}
.advisor__itemTitle {
padding-left: 60px;
position: relative;
width: fit-content;
margin-inline: auto;
}
.advisor__itemTitle::before {
top: 50%;
transform: translateY(-50%);
left: -4px;
width: 58px;
height: 41px;
}
.advisor__position {
font-size: 14px;
}
.advisor__name {
font-size: 20px;
}
.advisor__text {
font-size: 16px;
}
.advisor__body {
margin-top: 27px;
}
.advisor__bodyItem:not(:first-child) {
margin-top: 27px;
}
.advisor__history {
margin-left: 0;
}
.advisor__historyItem {
grid-template-columns: 1fr;
}
.advisor__historyItem:not(:first-child) {
margin-top: 15px;
}
.advisor__historyDesc {
font-size: 16px;
}
.advisor__bodyText {
font-size: 16px;
margin-left: 0;
}
.advisor__mark01 {
display: none;
}
.advisor__mark02 {
display: none;
}
.advisor__mark03 {
display: none;
}
.advisor__mark04 {
display: none;
}
.advisor__bottom {
margin-top: 80px;
column-gap: 10px;
}
.advisor__bottom-text {
padding-top: 0;
width: 80%;
display: flex;
align-items: center;
}
.advisor__bottom-dog {
width: 12%;
}
} .features {
background: #cee3e2;
padding: 214px 0 167px;
}
@media screen and (min-width: 768px) {
.features {
overflow: hidden;
}
}
.features__inner {
max-width: 920px;
margin-inline: auto;
padding-inline: 20px;
position: relative;
}
.feature__container {
margin-top: 162px;
border-radius: 0 0 40px 40px;
background-color: #fff;
padding: 66px 80px 87px;
position: relative;
z-index: 1;
}
.feature__container::before {
position: absolute;
top: -105px;
left: 0;
content: "";
width: 210px;
height: 210px;
border-radius: 50%;
background: linear-gradient(
to bottom,
#2db8c3 0,
#2db8c3 105px,
#fff 105px,
#fff 100%
);
}
.feature__container::after {
position: absolute;
top: -105px;
right: 0;
content: "";
width: 210px;
height: 210px;
border-radius: 50%;
background: linear-gradient(
to bottom,
#2db8c3 0,
#2db8c3 105px,
#fff 105px,
#fff 100%
);
}
.title-mark {
display: flex;
flex-direction: column;
align-items: center;
gap: 12px;
font-size: 23px;
font-weight: 700;
line-height: calc(53.5 / 30);
letter-spacing: 0.1em;
}
.title-mark:before {
content: "";
width: 87px;
height: 70px;
mask-image: url(//km-ac.com/wp-content/themes/kmiki/assets/img/staff/mark.svg);
mask-repeat: no-repeat;
mask-size: contain;
mask-position: center;
background-color: #2db8c3;
}
.feature__content {
margin-top: 30px;
background: rgba(45, 184, 195, 0.2);
border-radius: 5px;
padding: 32px 49px 37px;
}
.feature__contentText {
font-size: 15px;
line-height: calc(31.5 / 18);
letter-spacing: 0.05em;
}
.feature__tel {
text-align: center;
margin-top: 27px;
}
.feature__tel a {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 7px;
background: #2db8c3;
border-radius: 100px;
padding: 14px 27px;
font-family: var(--DIN);
font-size: min(calc(100vw / 375 * 20), 20px);
font-weight: 700;
line-height: calc(35.9 / 20);
letter-spacing: 0.1em;
color: #fff;
}
.feature__tel a:before {
content: "";
width: 20px;
height: 32px;
background-image: url(//km-ac.com/wp-content/themes/kmiki/assets/img/salon/phone.svg);
background-repeat: no-repeat;
background-size: contain;
background-position: center;
}
.feature__box {
background: #fff;
border-radius: 40px;
margin-top: 115px;
padding: 90px 80px 118px;
}
.feature__box .title-mark {
&::before {
background: #d294b7;
}
}
.feature__box .feature__content {
padding: 53px 49px;
background: rgba(210, 148, 183, 0.2);
}
.feature__conditions {
margin-top: 23px;
}
.feature__conditionsTitle {
background: #d294b7;
color: #fff;
width: fit-content;
font-size: 20px;
font-weight: 700;
line-height: calc(35 / 20);
letter-spacing: 0.1em;
padding: 4px 45px;
border-radius: 5px;
margin-inline: auto;
}
.feature__conditionsList {
margin-top: 24px;
margin-left: 5px;
}
.feature__conditionsItem {
font-size: 20px;
font-weight: 700;
line-height: calc(34 / 23);
letter-spacing: 0.1em;
}
.feature__conditionsItem:not(:first-child) {
margin-top: 8px;
}
.feature__conditionsItem:before {
content: "";
width: 16px;
height: 16px;
background-color: #b27d91;
border-radius: 50%;
margin-right: -4px;
display: inline-block;
}
.feature__note {
margin-top: 17px;
margin-left: -5px;
}
.feature__note small {
font-size: 15px;
line-height: calc(31.5 / 18);
letter-spacing: 0.05em;
}
.feature__boxItem:not(:first-child) {
margin-top: 96px;
}
.feature__boxItem:nth-child(2) .feature__content {
padding-top: 72px;
padding-bottom: 44px;
margin-top: 33px;
}
.feature__bring {
display: grid;
grid-template-columns: repeat(4, 150px);
justify-content: center;
gap: 20px;
}
.feature__bringItem {
background: #d294b7;
border-radius: 50%;
aspect-ratio: 1 / 1;
}
.feature__bringItem:nth-child(1) .feature__bringImage img {
width: 40px;
margin-top: 16px;
}
.feature__bringItem:nth-child(2) .feature__bringImage img {
width: 60px;
margin-top: 22px;
}
.feature__bringItem:nth-child(3) .feature__bringImage img {
width: 66px;
margin-top: 21px;
}
.feature__bringItem:nth-child(4) .feature__bringImage img {
width: 71px;
margin-top: 24px;
}
.feature__bringImage {
height: 90px;
display: flex;
align-items: center;
justify-content: center;
}
.feature__bringText {
font-size: 14px;
font-weight: 700;
line-height: calc(20.8 / 15);
letter-spacing: 0.05em;
color: #fff;
text-align: center;
}
.feature__bringLists {
margin-top: 26px;
margin-left: 7px;
}
.feature__bringList {
font-size: 20px;
font-weight: 700;
line-height: calc(42 / 23);
letter-spacing: 0.1em;
}
.feature__bringList span {
font-size: 16px;
}
.feature__mark01 {
position: absolute;
width: 320px;
height: auto;
top: 335px;
left: calc(50% + 333px);
transform: rotate(-27deg);
}
.feature__mark02 {
position: absolute;
width: 320px;
height: auto;
top: 935px;
left: calc(50% - 680px);
}
.feature__mark03 {
position: absolute;
width: 320px;
height: auto;
top: 1478px;
left: calc(50% + 333px);
transform: rotate(-27deg);
}
.feature__mark04 {
position: absolute;
width: 320px;
height: auto;
bottom: 212px;
left: calc(50% - 680px);
}
@media screen and (max-width: 767.98px) {
.features {
padding: 120px 0 100px;
}
.features__inner {
max-width: 100%;
}
.feature__container {
margin-top: 120px;
border-radius: 0 0 20px 20px;
padding: 40px 20px 50px;
}
.feature__container::before {
top: -65px;
width: 130px;
height: 130px;
background: linear-gradient(
to bottom,
#2db8c3 0,
#2db8c3 65px,
#fff 65px,
#fff 100%
);
}
.feature__container::after {
top: -65px;
width: 130px;
height: 130px;
background: linear-gradient(
to bottom,
#2db8c3 0,
#2db8c3 65px,
#fff 65px,
#fff 100%
);
}
.title-mark {
font-size: 20px;
text-align: center;
}
.title-mark:before {
content: "";
width: 51px;
height: 43px;
}
.feature__content {
padding: 30px 20px;
}
.feature__box {
border-radius: 20px;
margin-top: 50px;
padding: 30px 20px;
}
.feature__box .feature__content {
padding: 30px 20px;
}
.feature__conditionsTitle {
font-size: 16px;
}
.feature__conditionsList {
margin-left: 0;
}
.feature__conditionsItem {
font-size: 16px;
}
.feature__conditionsItem:before {
width: 13px;
height: 13px;
}
.feature__note {
margin-top: 15px;
margin-left: 0;
}
.feature__boxItem:not(:first-child) {
margin-top: 50px;
}
.feature__boxItem:nth-child(2) .feature__content {
padding-top: 30px;
padding-bottom: 30px;
}
.feature__bring {
grid-template-columns: repeat(2, min(calc(100vw / 375 * 120), 120px));
gap: 15px;
}
.feature__bringItem:nth-child(1) .feature__bringImage img {
width: 30px;
margin-top: 5px;
}
.feature__bringItem:nth-child(2) .feature__bringImage img {
width: 50px;
margin-top: 13px;
}
.feature__bringItem:nth-child(3) .feature__bringImage img {
width: 50px;
margin-top: 9px;
}
.feature__bringItem:nth-child(4) .feature__bringImage img {
width: 56px;
margin-top: 15px;
}
.feature__bringImage {
height: min(calc(100vw / 375 * 70), 70px);
}
.feature__bringText {
font-size: min(calc(100vw / 375 * 12), 12px);
}
.feature__bringLists {
margin-top: 20px;
margin-left: 0;
}
.feature__bringList {
font-size: 16px;
}
.feature__bringList span {
font-size: 13px;
display: inline-block;
}
.feature__mark01 {
display: none;
}
.feature__mark02 {
display: none;
}
.feature__mark03 {
display: none;
}
.feature__mark04 {
display: none;
}
} .guidance {
background: #2db8c3;
padding: 99px 0 154px;
}
.guidance__inner {
width: 920px;
margin-inline: auto;
padding-inline: 20px;
}
.guidance__title {
color: #fff;
}
.guidance__title:before {
background: #fff;
}
.guidance__box {
margin-top: 33px;
background: #fff;
border-radius: 40px;
padding: 64px 0 52px;
}
.gidunce__wrap {
display: flex;
align-items: center;
justify-content: center;
column-gap: 44px;
color: #fff;
width: 590px;
margin-inline: auto;
border-radius: 5px;
padding: 9px 29px 9px 9px;
}
.gidunce__wrap:nth-child(1) {
background: #d294b7;
}
.gidunce__wrap:nth-child(2) {
background: #91b522;
margin-top: 39px;
padding-right: 15px;
}
.guidance__term {
width: 152px;
font-size: 23px;
font-weight: 700;
line-height: calc(42.5 / 23);
letter-spacing: 0.1em;
}
.guidance__desc {
font-size: 26px;
font-weight: 700;
font-family: var(--DIN);
line-height: calc(45.5 / 26);
letter-spacing: 0.1em;
}
.gidance__note {
margin-top: 23px;
margin-left: 6px;
text-align: center;
}
.gidance__note small {
font-size: 15px;
line-height: calc(31.5 / 18);
letter-spacing: 0.05em;
}
.guidance__item-title {
margin-top: 93px;
}
.guidance__list { margin-top: 33px;
background: #fff;
border-radius: 40px;
padding: 80px;
}
@media(max-width: 767.98px) {
}
.guidance__item {
font-size: 20px;
font-weight: 700;
line-height: calc(39 / 23);
letter-spacing: 0.04em;
}
.guidance__item:not(:first-child) {
margin-top: 7px;
}
.guidance__item:before {
content: "";
width: 16px;
height: 16px;
background-color: #b27d91;
border-radius: 50%;
margin-right: -4px;
display: inline-block;
}
@media screen and (max-width: 767.98px) {
.guidance {
padding: 80px 0 100px;
}
.guidance__inner {
width: 100%;
}
.guidance__box {
border-radius: 20px;
padding: 30px 20px;
}
.gidunce__wrap {
column-gap: 20px;
width: 100%;
max-width: 300px;
padding: 5px 10px;
}
.gidunce__wrap:nth-child(2) {
margin-top: 15px;
padding-left: 25px;
}
.guidance__term {
width: 140px;
font-size: 18px;
}
.guidance__desc {
font-size: 22px;
}
.gidance__note {
margin-top: 23px;
margin-left: 0;
text-align: left;
}
.gidance__note small {
font-size: 13px;
}
.guidance__item-title {
margin-top: 50px;
}
.guidance__list { border-radius: 20px;
padding: 30px 20px;
}
.guidance__item {
font-size: 16px;
}
.guidance__item:before {
width: 13px;
height: 13px;
margin-right: -3px;
}
} .salon {
background: #fff;
padding: 156px 0 300px;
}
.salon__title {
width: 880px;
margin-inline: auto;
}
.salon__title img {
width: 100%;
}
.salon__sliderZone {
margin-top: 67px;
}
.salon__slider-item {
width: 450px;
margin-right: 50px;
}
.salon__slider-item:nth-child(even) {
margin-top: 62px;
}
.salon__slider-item img {
border-radius: 40px;
aspect-ratio: 878 / 1100;
}
.salon__text {
font-size: 22px;
font-weight: 700;
line-height: calc(42.5 / 22);
letter-spacing: 0.1em;
text-align: center;
margin-top: 50px;
}
.salon__link {
margin-top: 18px;
text-align: center;
}
.salon__link a {
font-size: 17px;
font-weight: 700;
line-height: calc(29.5 / 17);
color: #fff;
display: inline-flex;
align-items: center;
justify-content: center;
column-gap: 9px;
border-radius: 100px;
border: 1px solid #2db8c3;
background: #2db8c3;
padding: 13px 42px 15px;
width: 217px;
}
.salon__link a:before {
content: "";
width: 33px;
height: 33px;
mask-image: url(//km-ac.com/wp-content/themes/kmiki/assets/img/salon/icon_instagram.svg);
mask-size: contain;
mask-repeat: no-repeat;
background: #fff;
}
.salon__sign {
margin-top: 169px;
}
.salon__signTitle {
font-size: 23px;
font-weight: 700;
line-height: calc(52.5 / 30);
letter-spacing: 0.1em;
text-align: center;
}
.salon__table {
margin: 88px auto 0;
width: 880px;
overflow: hidden;
border: 5px solid #2db8c3;
border-radius: 40px;
border-collapse: inherit;
}
.salon__table tr {
display: grid;
grid-template-columns: 430px 1fr;
}
.salon__table tr:not(:last-child) {
border-bottom: 5px solid #2db8c3;
}
.salon__table tr th {
padding: 25px 15px 23px 112px;
text-align: left;
font-size: 21px;
font-weight: 700;
letter-spacing: 0.1em;
}
.salon__table tr td {
padding: 25px 40px 23px;
font-size: 21px;
font-weight: 500;
letter-spacing: 0.1em;
}
@media screen and (max-width: 767.98px) {
.salon {
padding: 80px 0 100px;
}
.salon__title {
width: 100%;
padding-inline: 20px;
}
.salon__sliderZone {
margin-top: 30px;
}
.salon__slider-item {
width: 220px;
margin-right: 20px;
}
.salon__slider-item:nth-child(even) {
margin-top: 30px;
}
.salon__slider-item img {
border-radius: 20px;
}
.salon__text {
font-size: 16px;
text-align: center;
margin-top: 30px;
line-height: 1.7;
}
.salon__sign {
margin-top: 80px;
}
.salon__signTitle {
font-size: 20px;
}
.salon__table {
margin: 50px auto 0;
width: 90%;
border: 2px solid #2db8c3;
border-radius: 20px;
}
.salon__table tr {
grid-template-columns: calc(150 / 335 * 100%) 1fr;
}
.salon__table tr:not(:last-child) {
border-bottom: 2px solid #2db8c3;
}
.salon__table tr th {
padding: 15px 10px;
font-size: min(calc(100vw / 375 * 15), 15px);
line-height: 1.5;
display: flex;
align-items: center;
}
.salon__table tr td {
padding: 15px 10px 15px 0;
font-size: min(calc(100vw / 375 * 15), 15px);
display: flex;
align-items: center;
}
} .equipments-anchor {
padding-top: 190px;
padding-bottom: 56px;
background-color: #cee3e2;
}
.equipments-anchor__inner {
width: 920px;
margin-inline: auto;
padding-inline: 20px;
}
.equipments-anchor__list {
display: flex;
background: #fff;
border-radius: 40px;
padding: 30px 110px 38px;
}
.equipments-anchor__item {
width: calc(100% / 3);
padding-block: 20px;
display: flex;
justify-content: center;
align-items: center;
position: relative;
}
.equipments-anchor__item:nth-child(1) {
padding-right: 36px;
}
.equipments-anchor__item:nth-child(3) {
padding-left: 13px;
}
.equipments-anchor__item:not(:first-child)::before {
position: absolute;
top: 0;
left: 0;
content: "";
width: 1px;
height: 100%;
background-color: #595757;
}
.equipments-anchor__link {
display: flex;
flex-direction: column;
align-items: center;
}
.equipments-anchor__image {
display: inline-block;
width: 75px;
}
.equipments-anchor__text {
margin-top: 5px;
font-weight: 700;
font-size: 16px;
line-height: calc(35 / 20);
letter-spacing: 0.1em;
}
@media screen and (max-width: 767.98px) {
.equipments-anchor {
padding-top: 120px;
padding-bottom: 40px;
}
.equipments-anchor__inner {
width: 100%;
}
.equipments-anchor__list {
border-radius: 20px;
padding: 20px 10px;
}
.equipments-anchor__item {
padding-block: 5px;
}
.equipments-anchor__item:nth-child(1) {
padding-right: 0;
}
.equipments-anchor__item:nth-child(3) {
padding-left: 0;
}
.equipments-anchor__image {
width: 50px;
}
.equipments-anchor__text {
margin-top: 5px;
font-size: 12px;
}
} .introduction {
background-color: #cee3e2;
padding-top: 60px;
padding-bottom: 280px;
overflow: hidden;
}
.introduction__inner {
width: 920px;
margin-inline: auto;
padding-inline: 20px;
position: relative;
}
.introduction__sliderZone {
margin-top: 75px;
position: relative;
z-index: 1;
}
.introduction__sliderZone .slick-track {
display: flex;
}
.introduction__slider-item img {
border-radius: 40px;
width: 100%;
height: 100%;
object-fit: cover;
aspect-ratio: 1097 / 740;
}
.introduction__mark01 {
position: absolute;
width: 320px;
height: auto;
top: 200px;
left: calc(50% + 333px);
}
.introduction__mark02 {
position: absolute;
width: 320px;
height: 342px;
top: 495px;
left: calc(50% - 680px);
transform: rotate(-27deg);
}
@media screen and (max-width: 767.98px) {
.introduction {
padding-top: 40px;
padding-bottom: 100px;
}
.introduction__inner {
width: 100%;
}
.introduction__sliderZone {
margin-top: 45px;
}
.introduction__slider-item img {
border-radius: 20px;
}
} .hospital-map-illust {
padding-top: 160px;
padding-bottom: 170px;
background-color: #2DB8C3;
}
.hospital-map-illust__inner {
margin-inline: auto;
max-width: 1430px;
padding-inline: 20px;
}
.hospital-map-illust__floor {
position: relative;
transform: scale(0.8);
}
.hospital-map-illust__floor01 {
margin-top: 42px;
}
.hospital-map-illust__floor02 {
margin-top: -42px;
padding-left: 6%;
}
.hospital-map-illust__floor-title {
position: absolute;
top: 5%;
left: 3%;
width: 13%;
height: auto;
aspect-ratio: 1 / 1;
border-radius: 50%;
background-color: #fff;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
font-family: var(--DIN);
font-weight: 700;
font-size: 59px;
color: #2DB8C3;
}
.hospital-map-illust__floor-message {
position: absolute;
top: 27%;
left: 4%;
width: max-content;
text-align: center;
font-weight: 700;
font-size: 22px;
}
.hospital-map-illust__floor-deco {
position: absolute;
bottom: 0;
right: 1.5%;
width: 26%;
}
.hospital-map-illust__bg {
position: relative;
}
.hospital-map-illust__bg-map {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
opacity: 0;
visibility: hidden;
}
.hospital-map-illust__list {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 2;
}
.hospital-map-illust__item {
position: absolute;
width: 25%;
transform: translateY(20%) scale(0.5);
transition: all 0.3s ease;
opacity: 0;
visibility: hidden;
}
.hospital-map-illust__item.is-active {
opacity: 1;
visibility: visible;
}
.hospital-map-illust__item.js-comment01 {
top: 61%;
left: 0.5%;
}
.hospital-map-illust__item.js-comment02 {
top: 55%;
left: 31%;
}
.hospital-map-illust__item.js-comment03 {
top: 42%;
left: 33%;
}
.hospital-map-illust__item.js-comment04 {
top: 31%;
left: 6.6%;
}
.hospital-map-illust__item.js-comment05 {
top: 23%;
left: 16.4%;
}
.hospital-map-illust__item.js-comment06 {
top: 42%;
left: 15.5%;
}
.hospital-map-illust__item.js-comment07 {
top: 23.5%;
left: 35%;
}
.hospital-map-illust__item.js-comment08 {
top: 35.3%;
left: 58.3%;
}
.hospital-map-illust__item.js-comment09 {
top: 24%;
left: 62.1%;
}
.hospital-map-illust__item.js-comment10 {
top: 12%;
left: 51%;
}
.hospital-map-illust__item.js-comment11 {
top: 12%;
left: 63%;
}
.hospital-map-illust__item.js-comment12 {
top: -5%;
left: 60.2%;
}
.hospital-map-illust__item.js-comment13 {
top: -10%;
left: 38%;
}
.hospital-map-illust__item.js-comment14 {
top: 4%;
left: 17.4%;
}
.hospital-map-illust__item.js-comment15 {
top: 9%;
left: 18.2%;
}
.hospital-map-illust__item.js-comment16 {
top: 33%;
left: 45%;
}
.hospital-map-illust__item-title,
.hospital-map-illust__item-text {
position: absolute;
width: 1px;
height: 1px;
opacity: 0;
visibility: hidden;
z-index: -999;
}
.hospital-map-illust__area {
cursor: pointer;
position: absolute;
z-index: 2;
}
.hospital-map-illust__area.js-area01 {
top: 75%;
left: 6.5%;
width: 21%;
height: 17%;
clip-path: polygon(32% 45%, 100% 45%, 100% 72%, 66% 72%, 65% 100%, 26% 100%, 26% 72%, 0 72%, 0 0, 32% 0);
transform: skewX(-27.5deg);
}
.hospital-map-illust__area.js-area02 {
top: 75%;
left: 30%;
width: 30%;
height: 10%;
transform: skewX(-27.5deg);
}
.hospital-map-illust__area.js-area03 {
top: 62%;
left: 35%;
width: 30%;
height: 10%;
transform: skewX(-27.5deg);
}
.hospital-map-illust__area.js-area04 {
top: 38%;
left: 17%;
width: 6%;
height: 34%;
transform: skewX(-27.5deg);
}
.hospital-map-illust__area.js-area05 {
top: 38%;
left: 26%;
width: 7%;
height: 22%;
transform: skewX(-27.5deg);
}
.hospital-map-illust__area.js-area06 {
top: 63%;
left: 24%;
width: 9%;
height: 10%;
transform: skewX(-27.5deg);
}
.hospital-map-illust__area.js-area07 {
top: 38%;
left: 34%;
width: 38%;
height: 22%;
clip-path: polygon(59% 0, 59% 37%, 100% 37%, 100% 100%, 0 100%, 0 0);
transform: skewX(-27.5deg);
}
.hospital-map-illust__area.js-area08 {
top: 56%;
left: 69%;
width: 8%;
height: 10%;
transform: skewX(-27.5deg);
}
.hospital-map-illust__area.js-area09 {
top: 45%;
left: 73%;
width: 8%;
height: 8%;
transform: skewX(-27.5deg);
}
.hospital-map-illust__area.js-area10 {
top: 33%;
left: 62%;
width: 6%;
height: 10%;
transform: skewX(-27.5deg);
}
.hospital-map-illust__area.js-area11 {
top: 33%;
left: 69%;
width: 16.5%;
height: 10%;
transform: skewX(-27.5deg);
}
.hospital-map-illust__area.js-area12 {
top: 10%;
left: 68%;
width: 24%;
height: 20%;
transform: skewX(-27.5deg);
}
.hospital-map-illust__area.js-area13 {
top: 10%;
left: 44%;
width: 12.5%;
height: 25%;
clip-path: polygon(75% 0, 75% 34%, 100% 34%, 100% 100%, 62% 100%, 62% 41%, 0 41%, 0 0);
transform: skewX(-27.5deg);
}
.hospital-map-illust__area.js-area14 {
top: 21%;
left: 27%;
width: 6%;
height: 14%;
transform: skewX(-27.5deg);
}
.hospital-map-illust__area.js-area15 {
top: 6%;
left: 19.5%;
width: 32%;
height: 41%;
clip-path: polygon(72% 0, 72% 72%, 100% 72%, 100% 100%, 0 100%, 0 0);
transform: skewX(-27.5deg);
}
.hospital-map-illust__area.js-area16 {
top: 46%;
left: 48%;
width: 25%;
height: 15%;
transform: skewX(-27.5deg);
}
.hospital-map-illust__bg:has(.hospital-map-illust__area:hover) .hospital-map-illust__bg-image {
opacity: 0;
}
.hospital-map-illust__bg:has(.js-area01:hover) .js-map01,
.hospital-map-illust__bg:has(.js-area01.is-active) .js-comment01,
.hospital-map-illust__bg:has(.js-area02:hover) .js-map02,
.hospital-map-illust__bg:has(.js-area02.is-active) .js-comment02,
.hospital-map-illust__bg:has(.js-area03:hover) .js-map03,
.hospital-map-illust__bg:has(.js-area03.is-active) .js-comment03,
.hospital-map-illust__bg:has(.js-area04:hover) .js-map04,
.hospital-map-illust__bg:has(.js-area04.is-active) .js-comment04,
.hospital-map-illust__bg:has(.js-area05:hover) .js-map05,
.hospital-map-illust__bg:has(.js-area05.is-active) .js-comment05,
.hospital-map-illust__bg:has(.js-area06:hover) .js-map06,
.hospital-map-illust__bg:has(.js-area06.is-active) .js-comment06,
.hospital-map-illust__bg:has(.js-area07:hover) .js-map07,
.hospital-map-illust__bg:has(.js-area07.is-active) .js-comment07,
.hospital-map-illust__bg:has(.js-area08:hover) .js-map08,
.hospital-map-illust__bg:has(.js-area08.is-active) .js-comment08,
.hospital-map-illust__bg:has(.js-area09:hover) .js-map09,
.hospital-map-illust__bg:has(.js-area09.is-active) .js-comment09,
.hospital-map-illust__bg:has(.js-area10:hover) .js-map10,
.hospital-map-illust__bg:has(.js-area10.is-active) .js-comment10,
.hospital-map-illust__bg:has(.js-area11:hover) .js-map11,
.hospital-map-illust__bg:has(.js-area11.is-active) .js-comment11,
.hospital-map-illust__bg:has(.js-area12:hover) .js-map12,
.hospital-map-illust__bg:has(.js-area12.is-active) .js-comment12,
.hospital-map-illust__bg:has(.js-area13:hover) .js-map13,
.hospital-map-illust__bg:has(.js-area13.is-active) .js-comment13,
.hospital-map-illust__bg:has(.js-area14:hover) .js-map14,
.hospital-map-illust__bg:has(.js-area14.is-active) .js-comment14,
.hospital-map-illust__bg:has(.js-area15:hover) .js-map15,
.hospital-map-illust__bg:has(.js-area15.is-active) .js-comment15,
.hospital-map-illust__bg:has(.js-area16:hover) .js-map16,
.hospital-map-illust__bg:has(.js-area16.is-active) .js-comment16 {
transform: translateY(0) scale(1);
opacity: 1;
visibility: visible;
}
.hospital-map-photo {
padding-top: 222px;
padding-bottom: 260px;
background-color: #CEE3E2;
}
.hospital-map-photo__inner {
margin-inline: auto;
max-width: 920px;
padding-inline: 20px;
}
.hospital-map-photo__list {
display: flex;
flex-wrap: wrap;
gap: 60px;
}
.hospital-map-photo__item {
width: calc((100% - 60px) / 2);
}
.hospital-map-photo__item-title {
display: flex;
justify-content: center;
align-items: center;
column-gap: 10px;
text-align: center;
font-weight: 700;
font-size: 26px;
letter-spacing: 0.1em;
}
.hospital-map-photo__item-title span {
width: 34px;
min-width: 34px;
height: 34px;
border-radius: 50%;
background-color: #CF73A3;
display: flex;
justify-content: center;
align-items: center;
font-size: 17px;
letter-spacing: 0.1em;
color: #fff;
}
.hospital-map-photo__item-image {
margin-top: 12px;
}
@media screen and (max-width: 767.98px) {
.hospital-map-illust {
padding-block: 60px;
overflow: hidden;
}
.hospital-map-illust__inner {
padding-inline: 0;
}
.hospital-map-illust__floor {
transform: scale(1);
}
.hospital-map-illust__floor01 {
margin-top: 50px;
}
.hospital-map-illust__floor02 {
margin-top: 40px;
}
.hospital-map-illust__scroll {
width: 100%;
padding-inline: 20px;
overflow-x: scroll;
}
.scroll-hint-icon {
top: 300px;
}
.hospital-map-illust__floor {
min-width: 800px;
}
.hospital-map-illust__floor-title {
font-size: 42px;
}
.hospital-map-illust__floor-message {
left: 2.5%;
font-size: 17px;
}
.hospital-map-illust__bg:has(.hospital-map-illust__area:hover) .hospital-map-illust__bg-image {
opacity: 1;
}
.hospital-map-illust__bg:has(.js-area01:hover) .js-map01,
.hospital-map-illust__bg:has(.js-area02:hover) .js-map02,
.hospital-map-illust__bg:has(.js-area03:hover) .js-map03,
.hospital-map-illust__bg:has(.js-area04:hover) .js-map04,
.hospital-map-illust__bg:has(.js-area05:hover) .js-map05,
.hospital-map-illust__bg:has(.js-area06:hover) .js-map06,
.hospital-map-illust__bg:has(.js-area07:hover) .js-map07,
.hospital-map-illust__bg:has(.js-area08:hover) .js-map08,
.hospital-map-illust__bg:has(.js-area09:hover) .js-map09,
.hospital-map-illust__bg:has(.js-area10:hover) .js-map10,
.hospital-map-illust__bg:has(.js-area11:hover) .js-map11,
.hospital-map-illust__bg:has(.js-area12:hover) .js-map12,
.hospital-map-illust__bg:has(.js-area13:hover) .js-map13,
.hospital-map-illust__bg:has(.js-area14:hover) .js-map14,
.hospital-map-illust__bg:has(.js-area15:hover) .js-map15,
.hospital-map-illust__bg:has(.js-area16:hover) .js-map16 {
opacity: 0;
visibility: hidden;
}
.hospital-map-illust__bg:has(.js-area01.is-active) .js-map01,
.hospital-map-illust__bg:has(.js-area02.is-active) .js-map02,
.hospital-map-illust__bg:has(.js-area03.is-active) .js-map03,
.hospital-map-illust__bg:has(.js-area04.is-active) .js-map04,
.hospital-map-illust__bg:has(.js-area05.is-active) .js-map05,
.hospital-map-illust__bg:has(.js-area06.is-active) .js-map06,
.hospital-map-illust__bg:has(.js-area07.is-active) .js-map07,
.hospital-map-illust__bg:has(.js-area08.is-active) .js-map08,
.hospital-map-illust__bg:has(.js-area09.is-active) .js-map09,
.hospital-map-illust__bg:has(.js-area10.is-active) .js-map10,
.hospital-map-illust__bg:has(.js-area11.is-active) .js-map11,
.hospital-map-illust__bg:has(.js-area12.is-active) .js-map12,
.hospital-map-illust__bg:has(.js-area13.is-active) .js-map13,
.hospital-map-illust__bg:has(.js-area14.is-active) .js-map14,
.hospital-map-illust__bg:has(.js-area15.is-active) .js-map15,
.hospital-map-illust__bg:has(.js-area16.is-active) .js-map16 {
opacity: 1;
visibility: visible;
}
.hospital-map-photo {
padding-block: 60px;
}
.hospital-map-photo__list {
gap: 32px 16px;
}
.hospital-map-photo__item {
width: calc((100% - 16px) / 2);
}
.hospital-map-photo__item-title {
font-size: min(calc(100vw / 375 * 16), 16px);
column-gap: 5px;
}
.hospital-map-photo__item-title span {
width: 22px;
min-width: 22px;
height: 22px;
font-size: 12px;
letter-spacing: 0.05em;
}
} .equipments {
background: #2db8c3;
padding: 127px 0 210px;
overflow: hidden;
}
.equipments__inner {
width: 920px;
margin-inline: auto;
padding-inline: 20px;
position: relative;
}
.equipments__box {
margin-top: 75px;
position: relative;
z-index: 1;
}
.equipments__box:not(:nth-child(1 of .equipments__box)) {
margin-top: 90px;
}
.equipments__boxTitle {
background: #d294b7;
color: #fff;
padding: 4px 40px;
border-radius: 50px;
font-size: 24px;
font-weight: 700;
letter-spacing: 0.05em;
position: relative;
} .equipments__boxTitle.js-accordion-enabled {
position: relative;
transition: all 0.5s ease;
}
.equipments__boxTitle.js-accordion-enabled::after {
content: "";
width: 16px;
height: 14px;
background: #fff;
position: absolute;
right: 30px;
top: 50%;
transform: translateY(-50%);
clip-path: polygon(0 0, 50% 100%, 100% 0);
transition: transform 0.3s ease;
}
.equipments__boxTitle.js-accordion-enabled.active::after {
transform: translateY(-50%) rotate(180deg);
}
.equipments__boxTitle span {
position: absolute;
top: 55%;
right: 65px;
transform: translateY(-50%);
font-size: 15px;
color: #fff;
}
.equipments__list {
margin-top: 40px;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 28px 32px;
overflow: hidden;
transition: height 0.4s ease;
}
.equipments__item {
background: #d9f1f3;
border-radius: 40px;
min-height: 509px;
}
.equipments__itemBody {
padding: 28px 20px 40px;
border-radius: 0 0 40px 40px;
}
.equipments__itemImage img {
width: 100%;
height: 100%;
object-fit: cover;
aspect-ratio: 337 / 275;
border-radius: 40px 40px 0 0;
}
.equipments__itemTitle {
font-size: 20px;
font-weight: 700;
line-height: calc(31.1 / 26);
letter-spacing: 0.1em;
text-align: center;
min-height: 61px;
}
.equipments__itemTitle--wide {
margin-inline: -15px;
}
.equipments__itemTitle--left {
text-align: left;
padding-left: 10px;
}
.equipments__itemTitle--txtSm {
font-size: 18px;
}
.equipments__itemTitle span {
display: block;
font-size: 14px;
font-weight: 500;
letter-spacing: 0.1em;
line-height: 1.5;
}
.equipments__itemTitle--left span {
display: inline-block;
}
.equipments__itemText {
margin-top: 7px;
font-size: 15px;
font-weight: 500;
line-height: calc(31.5 / 18);
letter-spacing: 0.05em;
}
.equipments__mark01 {
position: absolute;
width: 320px;
height: auto;
top: 287px;
left: calc(50% + 350px);
transform: rotate(-27deg);
}
.equipments__mark02 {
position: absolute;
width: 320px;
height: auto;
top: 1137px;
left: calc(50% - 680px);
}
.equipments__mark03 {
position: absolute;
width: 320px;
height: auto;
top: 2110px;
left: calc(50% + 350px);
transform: rotate(-27deg);
}
.equipments__mark04 {
position: absolute;
width: 320px;
height: auto;
top: 2958px;
left: calc(50% - 680px);
}
.equipments__mark05 {
position: absolute;
width: 320px;
height: auto;
top: 3995px;
left: calc(50% + 350px);
transform: rotate(-27deg);
}
.equipments__mark06 {
position: absolute;
width: 320px;
height: auto;
top: 4700px;
left: calc(50% - 680px);
}
.equipments__mark07 {
position: absolute;
width: 320px;
height: auto;
top: 5415px;
left: calc(50% + 350px);
transform: rotate(-27deg);
}
.equipments__mark08 {
position: absolute;
width: 320px;
height: 342px;
top: 5660px;
left: calc(50% - 680px);
}
.equipments__mark09 {
position: absolute;
width: 320px;
height: auto;
top: 6760px;
left: calc(50% + 350px);
transform: rotate(-27deg);
}
.equipments__mark10 {
position: absolute;
width: 320px;
height: auto;
top: 7300px;
left: calc(50% - 680px);
}
.equipments__mark11 {
position: absolute;
width: 320px;
height: auto;
top: 8095px;
left: calc(50% + 350px);
transform: rotate(-27deg);
}
.equipments__mark12 {
position: absolute;
width: 320px;
height: auto;
top: 9085px;
left: calc(50% - 680px);
}
.equipments__mark13 {
position: absolute;
width: 320px;
height: auto;
top: 9930px;
left: calc(50% + 350px);
transform: rotate(-27deg);
}
@media screen and (max-width: 767.98px) {
.equipments {
padding: 40px 0 100px;
}
.equipments__inner {
width: 100%;
}
.equipments__box {
margin-top: 50px;
}
.equipments__box:not(:nth-child(1 of .equipments__box)) {
margin-top: 50px;
}
.equipments__boxTitle {
padding: 4px 20px;
font-size: 18px;
}
.equipments__boxTitle span {
display: none;
}
.equipments__list {
margin-top: 30px;
grid-template-columns: repeat(2, 1fr);
gap: 16px 10px;
}
.equipments__itemImage img {
border-radius: 20px 20px 0 0;
}
.equipments__item {
border-radius: 20px;
min-height: auto;
}
.equipments__itemBody {
padding: 10px 10px 20px;
border-radius: 0 0 20px 20px;
}
.equipments__itemTitle {
font-size: 15px;
letter-spacing: 0;
min-height: 50px;
display: flex;
flex-direction: column;
justify-content: center;
}
.equipments__itemTitle--wide {
margin-inline: -10px;
}
.equipments__itemTitle--left {
padding-left: 0;
text-align: center;
}
.equipments__itemTitle--txtSm {
font-size: 15px;
}
.equipments__itemTitle span {
font-size: 10px;
}
.equipments__itemText {
font-size: 12px;
}
.equipments__mark01,
.equipments__mark02,
.equipments__mark03,
.equipments__mark04,
.equipments__mark05,
.equipments__mark06,
.equipments__mark07,
.equipments__mark08,
.equipments__mark09,
.equipments__mark10,
.equipments__mark11,
.equipments__mark12,
.equipments__mark13 {
display: none;
}
} .medical-departments {
background: #2db8c3;
padding: 105px 0 186px;
}
@media screen and (min-width: 768px) {
.medical-departments {
overflow: hidden;
}
}
.medical-departments__inner {
width: 920px;
margin-inline: auto;
padding-inline: 20px;
}
.medical-departments__box {
margin-top: 47px;
border-radius: 40px;
background: #fff;
padding: 62px 110px 75px;
}
.departments-list {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 32px 28px;
}
.departments-list__item a {
display: grid;
align-items: center;
grid-template-columns: 80px 1fr;
border-radius: 5px;
border: 2px solid;
overflow: hidden;
background: #fff;
box-shadow: 5px 5px 6px 0 #ddd;
height: 81px;
}
.departments-list__item:nth-child(-n + 13) a {
border-color: #a48b78;
}
.departments-list__item:nth-child(-n + 13) .departments-list__icon {
background: #a48b78;
}
.departments-list__item:nth-child(-n + 9) a {
border-color: #91b522;
}
.departments-list__item:nth-child(-n + 9) .departments-list__icon {
background: #91b522;
}
.departments-list__item:nth-child(-n + 6) a {
border-color: #d294b7;
}
.departments-list__item:nth-child(-n + 6) .departments-list__icon {
background: #d294b7;
}
.departments-list__item:nth-child(-n + 3) a {
border-color: #2db8c3;
}
.departments-list__item:nth-child(-n + 3) .departments-list__icon {
background: #2db8c3;
}
.departments-list__item:nth-child(1) .departments-list__icon img {
width: 36px;
}
.departments-list__item:nth-child(2) .departments-list__icon img {
width: 43px;
}
.departments-list__item:nth-child(3) .departments-list__icon img {
width: 55px;
}
.departments-list__item:nth-child(4) .departments-list__icon img {
width: 51px;
}
.departments-list__item:nth-child(5) .departments-list__icon img {
width: 48px;
}
.departments-list__item:nth-child(6) .departments-list__icon img {
width: 53px;
}
.departments-list__item:nth-child(7) .departments-list__icon img {
width: 55px;
}
.departments-list__item:nth-child(8) .departments-list__icon img {
width: 47px;
}
.departments-list__item:nth-child(9) .departments-list__icon img {
width: 43px;
}
.departments-list__item:nth-child(10) .departments-list__icon img {
width: 50px;
}
.departments-list__item:nth-child(11) .departments-list__icon img {
width: 36px;
}
.departments-list__item:nth-child(12) .departments-list__icon img {
width: 50px;
}
.departments-list__item:nth-child(13) .departments-list__icon img {
width: 53px;
}
.departments-list__icon {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
}
.departments-list__icon img {
width: 100%;
}
.departments-list__title {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
font-size: 26px;
font-weight: 700;
line-height: calc(45.5 / 26);
letter-spacing: 0.1em;
position: relative;
padding-right: 37px;
}
.departments-list__title--sm {
font-size: 22px;
}
.departments-list__title span {
font-size: 19px;
line-height: calc(22.6 / 19);
margin-left: 10px;
}
.departments-list__title::after {
content: "";
width: 22px;
height: 22px;
background: url(//km-ac.com/wp-content/themes/kmiki/assets/img/common/icon_arrow_gray.svg) no-repeat center center /
contain;
position: absolute;
top: 50%;
transform: translateY(-50%);
right: 23px;
display: block;
}
@media screen and (max-width: 767.98px) {
.medical-departments {
padding: 80px 0 100px;
}
.medical-departments__inner {
width: 100%;
}
.medical-departments__box {
margin-top: 30px;
border-radius: 20px;
background: #fff;
padding: 5px 20px 50px;
}
.departments-list {
grid-template-columns: 1fr;
gap: 16px 10px;
margin-inline: auto;
max-width: 305px;
}
.departments-list__item a {
grid-template-columns: 90px 1fr;
height: 94px;
}
.departments-list__item:nth-child(1) .departments-list__icon img {
width: 40px;
}
.departments-list__item:nth-child(2) .departments-list__icon img {
width: 47px;
}
.departments-list__item:nth-child(3) .departments-list__icon img {
width: 56px;
}
.departments-list__item:nth-child(4) .departments-list__icon img {
width: 56px;
}
.departments-list__item:nth-child(5) .departments-list__icon img {
width: 55px;
}
.departments-list__item:nth-child(6) .departments-list__icon img {
width: 59px;
}
.departments-list__item:nth-child(7) .departments-list__icon img {
width: 60px;
}
.departments-list__item:nth-child(8) .departments-list__icon img {
width: 55px;
}
.departments-list__item:nth-child(9) .departments-list__icon img {
width: 46px;
}
.departments-list__item:nth-child(10) .departments-list__icon img {
width: 55px;
}
.departments-list__item:nth-child(11) .departments-list__icon img {
width: 38px;
}
.departments-list__item:nth-child(12) .departments-list__icon img {
width: 57px;
}
.departments-list__item:nth-child(13) .departments-list__icon img {
width: 58px;
}
.departments-list__title {
font-size: 20px;
}
.departments-list__title--sm {
font-size: 20px;
}
.departments-list__title span {
font-size: 13px;
}
} .medical-detail {
background: #cee3e2;
padding: 175px 0 270px;
}
@media screen and (min-width: 768px) {
.medical-detail {
overflow: hidden;
}
}
.medical-detail__inner {
width: 920px;
margin-inline: auto;
padding-inline: 20px;
position: relative;
}
.medical-detail__list {
position: relative;
z-index: 1;
}
.medical-detail__item {
border-radius: 40px;
background: #fff;
overflow: hidden;
}
.medical-detail__item:not(:first-child) {
margin-top: 120px;
}
.medical-detail__title {
font-size: 32px;
font-weight: 700;
line-height: calc(66.5 / 38);
letter-spacing: 0.1em;
text-align: center;
padding: 14px 20px 10px;
color: #fff;
}
.medical-detail__item:nth-child(-n + 13) .medical-detail__title {
background: #a48b78;
}
.medical-detail__item:nth-child(-n + 9) .medical-detail__title {
background: #91b522;
}
.medical-detail__item:nth-child(-n + 6) .medical-detail__title {
background: #d294b7;
}
.medical-detail__item:nth-child(-n + 3) .medical-detail__title {
background: #2db8c3;
}
.medical-detail__wrap {
padding: 45px 80px 55px;
display: grid;
grid-template-columns: 320px 1fr;
align-items: flex-start;
gap: 40px;
}
.medical-detail__image {
border-radius: 5px;
overflow: hidden;
}
.medical-detail__bodyText {
font-size: 15px;
font-weight: 500;
line-height: calc(29.7 / 17);
letter-spacing: 0.05em;
text-align: justify;
}
.medical-detail__bodyText + .medical-detail__bodyText {
margin-top: 1.75em;
}
.medical-detail__link {
margin-top: 53px;
text-align: right;
}
.medical-detail__link a {
border-radius: 50px;
border: 3px solid #2db8c3;
padding: 11px 20px;
display: inline-flex;
align-items: center;
justify-content: center;
column-gap: 10px;
font-size: 17px;
font-weight: 700;
line-height: calc(29.7 / 17);
width: 220px;
}
.medical-detail__link a:before {
content: "";
width: 25px;
height: 36px;
background: url(//km-ac.com/wp-content/themes/kmiki/assets/img/medical-departments/ico_note.svg) no-repeat center
center / contain;
display: block;
}
.medical-detail__mark01 {
position: absolute;
width: 320px;
height: auto;
top: 60px;
left: calc(50% + 315px);
}
.medical-detail__mark02 {
position: absolute;
width: 320px;
height: auto;
top: 760px;
left: calc(50% - 680px);
transform: rotate(-27deg);
}
.medical-detail__mark03 {
position: absolute;
width: 320px;
height: auto;
top: 1623px;
left: calc(50% + 315px);
}
.medical-detail__mark04 {
position: absolute;
width: 320px;
height: auto;
top: 2350px;
left: calc(50% - 680px);
transform: rotate(-27deg);
}
.medical-detail__mark05 {
position: absolute;
width: 320px;
height: auto;
top: 3105px;
left: calc(50% + 315px);
}
.medical-detail__mark06 {
position: absolute;
width: 320px;
height: auto;
top: 3940px;
left: calc(50% - 680px);
transform: rotate(-27deg);
}
.medical-detail__mark07 {
position: absolute;
width: 320px;
height: auto;
top: 4765px;
left: calc(50% + 315px);
}
.medical-detail__mark08 {
position: absolute;
width: 320px;
height: auto;
top: 5605px;
left: calc(50% - 680px);
transform: rotate(-27deg);
}
.medical-detail__mark09 {
position: absolute;
width: 320px;
height: auto;
top: 6388px;
left: calc(50% + 315px);
}
.medical-detail__mark10 {
position: absolute;
width: 320px;
height: auto;
top: 7320px;
left: calc(50% - 680px);
transform: rotate(-27deg);
}
.medical-detail__mark11 {
position: absolute;
width: 320px;
height: auto;
top: 8115px;
left: calc(50% + 315px);
}
.medical-detail__mark12 {
position: absolute;
width: 320px;
height: auto;
top: 8925px;
left: calc(50% - 680px);
transform: rotate(-27deg);
}
.medical-detail__mark13 {
position: absolute;
width: 320px;
height: auto;
top: 9795px;
left: calc(50% + 315px);
}
@media screen and (max-width: 767.98px) {
.medical-detail {
padding: 80px 0 100px;
}
.medical-detail__inner {
width: 100%;
}
.medical-detail__item {
border-radius: 20px;
}
.medical-detail__item:not(:first-child) {
margin-top: 50px;
}
.medical-detail__title {
font-size: 20px;
}
.medical-detail__wrap {
grid-template-columns: 1fr;
gap: 20px;
padding: 30px 20px;
}
.medical-detail__bodyText + .medical-detail__bodyText {
margin-top: 1em;
}
.medical-detail__link {
margin-top: 30px;
text-align: center;
}
.medical-detail__mark01,
.medical-detail__mark02,
.medical-detail__mark03,
.medical-detail__mark04,
.medical-detail__mark05,
.medical-detail__mark06,
.medical-detail__mark07,
.medical-detail__mark08,
.medical-detail__mark09,
.medical-detail__mark10,
.medical-detail__mark11,
.medical-detail__mark12,
.medical-detail__mark13 {
display: none;
}
} .medical-anchor {
background: #cee3e2;
padding-top: 190px;
padding-bottom: 60px;
}
.medical-anchor__inner {
width: 920px;
margin-inline: auto;
padding-inline: 20px;
}
.medical-anchor__list {
border-radius: 40px;
background-color: #fff;
padding: 24px 20px;
display: flex;
}
.medical-anchor__item {
width: 25%;
padding-block: 23px;
display: flex;
justify-content: center;
align-items: center;
position: relative;
}
.medical-anchor__item:nth-child(1) {
padding-right: 15px;
}
.medical-anchor__item:nth-child(4) {
padding-left: 12px;
}
.medical-anchor__item:not(:first-child)::before {
position: absolute;
top: 0;
left: 0;
content: "";
width: 1px;
height: 100%;
background-color: #595757;
}
.medical-anchor__link {
display: flex;
flex-direction: column;
align-items: center;
transition: opacity 0.3s;
}
.medical-anchor__image {
display: inline-block;
width: 75px;
}
.medical-anchor__text {
margin-top: 5px;
font-weight: 700;
font-size: 16px;
line-height: calc(35 / 20);
letter-spacing: 0.1em;
}
@media screen and (max-width: 767.98px) {
.medical-anchor {
padding-top: 120px;
padding-bottom: 40px;
}
.medical-anchor__inner {
width: 100%;
}
.medical-anchor__list {
flex-wrap: wrap;
border-radius: 20px;
padding: 20px 10px;
gap: 15px 0;
}
.medical-anchor__item {
padding-block: 10px;
width: 50%;
}
.medical-anchor__item:nth-child(1) {
padding-right: 0;
}
.medical-anchor__item:nth-child(3):before {
display: none;
}
.medical-anchor__item:nth-child(4) {
padding-left: 0;
}
.medical-anchor__item:nth-child(n + 3):after {
position: absolute;
top: -7px;
left: 50%;
transform: translateX(-50%);
content: "";
width: 80%;
height: 1px;
background-color: #595757;
}
.medical-anchor__image {
width: 50px;
}
.medical-anchor__text {
margin-top: 5px;
font-size: 12px;
}
} .new-patient {
padding: 56px 0 70px;
background: #cee3e2;
overflow: hidden;
}
.new-patient__inner {
width: 920px;
margin-inline: auto;
padding-inline: 20px;
position: relative;
}
.new-patient__container {
margin-top: 145px;
background-color: #fff;
padding: 140px 112px 62px;
position: relative;
z-index: 1;
}
.new-patient__icon {
width: 100px;
height: 100px;
padding: 8px;
background: #fff;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
position: absolute;
top: -50px;
left: 50%;
transform: translateX(-50%);
z-index:1;
}
.new-patient__icon img {
width: 100%;
}
.new-patient__container::before {
position: absolute;
top: -105px;
left: 0;
content: "";
width: 210px;
height: 210px;
border-radius: 50%;
opacity: 0.8;
background: linear-gradient(
to bottom,
#2db8c3 0,
#2db8c3 105px,
#fff 105px,
#fff 100%
);
}
.new-patient__container::after {
position: absolute;
top: -105px;
right: 0;
content: "";
width: 210px;
height: 210px;
border-radius: 50%;
background: linear-gradient(
to bottom,
#2db8c3 0,
#2db8c3 105px,
#fff 105px,
#fff 100%
);
opacity: 0.8;
}
.new-patient__item:not(:first-child) {
margin-top: 63px;
}
.new-patient__itemTitle {
display: flex;
align-items: center;
column-gap: 13px;
font-size: 26px;
font-weight: 700;
line-height: calc(45.5 / 26);
letter-spacing: 0.1em;
}
.new-patient__itemTitle:before {
content: "";
width: 51px;
height: 51px;
background: url(//km-ac.com/wp-content/themes/kmiki/assets/img/medical/icon_dog.svg) no-repeat center center / contain;
}
.new-patient__itemText {
margin-top: 22px;
background: rgba(45, 184, 195, 0.2);
padding: 25px 55px 25px 47px;
border-radius: 10px;
font-size: 15px;
font-weight: 500;
line-height: calc(31.5 / 18);
letter-spacing: 0.05em;
}
.new-patient__itemList {
margin-top: 48px;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 26px;
}
.new-patient__listItem {
background: #2db8c3;
border-radius: 50%;
aspect-ratio: 1 / 1;
height: 110px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
}
.new-patient__listItem span {
display: block;
font-size: 16px;
font-weight: 700;
line-height: calc(24.3 / 18);
letter-spacing: 0.05em;
color: #fff;
text-align: center;
}
.new-patient__listItem:nth-child(1) {
padding-bottom: 16px;
}
.new-patient__listItem:nth-child(1) span {
margin-top: 13px;
}
.new-patient__listItem:nth-child(1) .new-patient__listIcon {
width: 48px;
}
.new-patient__listItem:nth-child(2) {
padding-bottom: 20px;
}
.new-patient__listItem:nth-child(2) .new-patient__listIcon {
width: 72px;
}
.new-patient__listItem:nth-child(2) span {
margin-top: 7px;
}
.new-patient__listItem:nth-child(3) {
padding-top: 15px;
}
.new-patient__listItem:nth-child(3) .new-patient__listIcon {
width: 62px;
}
.new-patient__listItem:nth-child(3) span {
margin-top: 10px;
}
.new-patient__listItem:nth-child(4) {
padding-top: 10px;
}
.new-patient__listItem:nth-child(4) span {
margin-top: 14px;
}
.new-patient__listItem:nth-child(4) .new-patient__listIcon {
width: 77px;
}
.new-patient__listItem:nth-child(4) .new-patient__listItem:nth-child(3) {
padding-top: 15px;
}
.new-patient__listIcon img {
width: 100%;
}
.new-patient__itemWrap {
display: flex;
justify-content: center;
gap: 67px;
margin-top: 42px;
}
.new-patient__itemImage:nth-child(1) {
width: 179px;
}
.new-patient__itemImage:nth-child(2) {
width: 118px;
}
.new-patient__itemImage figcaption {
font-size: 20px;
font-weight: 700;
line-height: calc(35 / 20);
letter-spacing: 0.1em;
text-align: center;
margin-top: 15px;
}
.new-patient__itemImage img {
width: 100%;
}
.new-patient__bottom {
background: #2db8c3;
border-radius: 0 0 40px 40px;
padding: 56px 110px 85px 120px;
}
.new-patient__bottomTitle {
font-size: 26px;
font-weight: 700;
line-height: calc(45.5 / 26);
letter-spacing: 0.1em;
text-align: center;
color: #fff;
padding-right: 10px;
}
.new-patient__bottomList {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 46px;
margin-top: 27px;
}
.new-patient__bottomItem {
display: grid;
grid-template-columns: 135px 1fr;
gap: 23px;
}
.new-patient__bottomItem:nth-child(1) img {
width: 100px;
}
.new-patient__bottomItem:nth-child(2) img {
width: 65px;
}
.new-patient__bottomImage {
background: #fff;
display: flex;
align-items: center;
justify-content: center;
aspect-ratio: 1 / 1;
border-radius: 50%;
}
.new-patient__body {
margin-top: 8px;
}
.new-patient__bottomText {
font-size: 20px;
font-weight: 700;
line-height: calc(28.5 / 20);
letter-spacing: 0.1em;
color: #fff;
}
.new-patient__bottomText + .new-patient__bottomText {
margin-top: 24px;
}
.new-patient__mark01 {
position: absolute;
width: 320px;
height: auto;
top: 278px;
left: calc(50% + 333px);
}
.new-patient__mark02 {
position: absolute;
width: 320px;
height: auto;
top: 1115px;
left: calc(50% - 640px);
transform: rotate(-27deg);
}
@media screen and (max-width: 767.98px) {
.new-patient {
padding: 40px 0 60px;
}
.new-patient__inner {
width: 100%;
}
.new-patient__container {
margin-top: 120px;
padding: 70px 20px 30px;
}
.new-patient__icon {
width: 50px;
height: 50px;
padding: 3px;
top: -20px;
}
.new-patient__container::before {
top: -65px;
width: 130px;
height: 130px;
background: linear-gradient(
to bottom,
#2db8c3 0,
#2db8c3 65px,
#fff 65px,
#fff 100%
);
}
.new-patient__container::after {
top: -65px;
width: 130px;
height: 130px;
background: linear-gradient(
to bottom,
#2db8c3 0,
#2db8c3 65px,
#fff 65px,
#fff 100%
);
}
.new-patient__item:not(:first-child) {
margin-top: 40px;
}
.new-patient__itemTitle {
column-gap: 8px;
font-size: min(calc(100vw / 375 * 18), 18px);
}
.new-patient__itemTitle:before {
width: 30px;
height: 30px;
}
.new-patient__itemText {
margin-top: 16px;
padding: 20px 15px 20px;
border-radius: 5px;
font-size: 15px;
}
.new-patient__itemList {
margin-top: 30px;
grid-template-columns: repeat(2, min(calc(100vw / 375 * 135), 135px));
justify-content: center;
gap: 15px;
}
.new-patient__listIcon {
height: 60px;
}
.new-patient__listItem span {
font-size: min(calc(100vw / 375 * 14), 14px);
}
.new-patient__listItem:nth-child(1) {
padding-bottom: 4px;
}
.new-patient__listItem:nth-child(1) span {
margin-top: 0;
}
.new-patient__listItem:nth-child(1) .new-patient__listIcon {
width: 36px;
}
.new-patient__listItem:nth-child(2) {
padding-bottom: 4px;
}
.new-patient__listItem:nth-child(2) .new-patient__listIcon {
width: 54px;
}
.new-patient__listItem:nth-child(2) span {
margin-top: 0;
}
.new-patient__listItem:nth-child(3) {
padding-top: 6px;
}
.new-patient__listItem:nth-child(3) .new-patient__listIcon {
width: 46px;
}
.new-patient__listItem:nth-child(3) span {
margin-top: 0;
}
.new-patient__listItem:nth-child(4) {
padding-top: 6px;
}
.new-patient__listItem:nth-child(4) span {
margin-top: 0;
}
.new-patient__listItem:nth-child(4) .new-patient__listIcon {
width: 57px;
}
.new-patient__listItem:nth-child(4) .new-patient__listItem:nth-child(3) {
padding-top: 15px;
}
.new-patient__listIcon img {
width: 100%;
}
.new-patient__itemWrap {
gap: min(calc(100vw / 375 * 40), 40px);
margin-top: 30px;
}
.new-patient__itemImage:nth-child(1) {
width: 125px;
}
.new-patient__itemImage:nth-child(2) {
width: 85px;
}
.new-patient__itemImage figcaption {
font-size: 15px;
margin-top: 10px;
}
.new-patient__itemImage img {
width: 100%;
}
.new-patient__bottom {
border-radius: 0 0 20px 20px;
padding: 40px 13px 50px;
}
.new-patient__bottomTitle {
font-size: 20px;
padding-right: 0;
}
.new-patient__bottomList {
grid-template-columns: 1fr;
gap: 30px;
}
.new-patient__bottomItem {
grid-template-columns: 1fr;
gap: 10px;
}
.new-patient__bottomItem:nth-child(1) img {
width: 85px;
}
.new-patient__bottomItem:nth-child(2) img {
width: 55px;
}
.new-patient__bottomImage {
width: 120px;
margin-inline: auto;
}
.new-patient__body {
margin-top: 0;
}
.new-patient__bottomText {
font-size: 15px;
text-align: center;
line-height: 1.7;
}
.new-patient__bottomText + .new-patient__bottomText {
margin-top: 16px;
}
.new-patient__mark01 {
display: none;
}
.new-patient__mark02 {
display: none;
}
} .flow-medical {
overflow: hidden;
padding-top: 14px;
background-color: #cee3e2;
}
.flow {
background: #2db8c3;
padding: 90px 0 315px;
position: relative;
z-index: 1;
}
.flow:before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 341px;
background-color: #cee3e2;
clip-path: polygon(0 0, 50% 100%, 100% 0);
z-index: -1;
}
.flow__inner {
width: 920px;
margin-inline: auto;
padding-inline: 20px;
position: relative;
}
.flow__box {
margin-top: 298px;
background: #fff;
border-radius: 40px;
padding: 115px 75px 194px;
position: relative;
}
.flow__box:before {
content: "";
position: absolute;
top: -108px;
right: 25px;
width: 204px;
height: 326px;
background: url(//km-ac.com/wp-content/themes/kmiki/assets/img/medical/flow_dog.png) no-repeat center center / contain;
}
.flow__box:after {
content: "";
position: absolute;
bottom: 20px;
left: 14px;
width: 237px;
height: 276px;
background: url(//km-ac.com/wp-content/themes/kmiki/assets/img/medical/flow_cat.png) no-repeat center center / contain;
}
.flow__item {
position: relative;
}
.flow__item:before {
content: "";
position: absolute;
top: 56px;
left: 24px;
width: 6px;
height: calc(100% - 55px);
background-image: radial-gradient(circle, #2db8c3 3px, transparent 3px);
background-position: left top;
background-repeat: repeat-y;
background-size: 6px 12px;
}
.flow__item:not(:first-child) {
margin-top: 33px;
}
.flow__itemTitle {
font-size: 26px;
font-weight: 700;
line-height: calc(45.5 / 26);
letter-spacing: 0.1em;
display: grid;
grid-template-columns: 51px 1fr;
align-items: center;
column-gap: 10px;
position: relative;
z-index: 1;
}
.flow__itemTitle span {
font-size: 27px;
font-family: var(--DIN);
font-weight: 700;
letter-spacing: 0.05em;
line-height: 1;
color: #fff;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background-color: #2db8c3;
aspect-ratio: 1 / 1;
padding-left: 5px;
}
.flow__wrap {
display: grid;
grid-template-columns: 395px 1fr;
gap: 30px;
margin-left: 61px;
margin-top: 23px;
}
.flow__body {
background: rgba(45, 184, 195, 0.2);
border-radius: 5px;
padding: 45px 37px 30px 40px;
}
.flow__text {
font-size: 15px;
font-weight: 500;
line-height: calc(26 / 15);
letter-spacing: 0.05em;
text-align: justify;
}
.flow__text:before {
content: "";
width: 12px;
height: 12px;
background-color: #2db8c3;
border-radius: 50%;
display: inline-block;
}
.flow__text:not(:first-child) {
margin-top: 22px;
}
.flow__link {
margin-top: 20px;
text-align: center;
}
.flow__link a {
border-radius: 50px;
background: #2db8c3;
padding: 15px;
display: inline-flex;
align-items: center;
justify-content: center;
column-gap: 8px;
font-size: 17px;
font-weight: 700;
line-height: calc(29.7 / 17);
color: #fff;
width: 220px;
}
.flow__link a:before {
content: "";
width: 43px;
height: 27px;
background: url(//km-ac.com/wp-content/themes/kmiki/assets/img/medical/icon_pc.svg) no-repeat center center / contain;
display: block;
}
.flow__image img {
width: 100%;
height: auto;
object-fit: cover;
aspect-ratio: 363 / 270;
border-radius: 5px;
}
.flow__mark01 {
position: absolute;
width: 320px;
height: auto;
top: -108px;
left: calc(50% + 333px);
}
.flow__mark02 {
position: absolute;
width: 320px;
height: auto;
top: 765px;
left: calc(50% - 680px);
}
.flow__mark03 {
position: absolute;
width: 320px;
height: auto;
top: 1040px;
left: calc(50% + 333px);
transform: rotate(-27deg);
}
.flow__mark04 {
position: absolute;
width: 320px;
height: auto;
top: 2100px;
left: calc(50% - 680px);
transform: rotate(-27deg);
}
@media screen and (max-width: 767.98px) {
.flow {
padding: 40px 0 80px;
}
.flow:before {
clip-path: polygon(0 0, 100% 0%, 100% 70%, 50% 100%, 0 70%);
height: 150px;
}
.flow__inner {
width: 100%;
}
.flow__box {
margin-top: 130px;
border-radius: 20px;
padding: 30px 20px 100px;
}
.flow__box:before {
top: -115px;
right: -15px;
width: 104px;
height: 226px;
}
.flow__box:after {
bottom: -8px;
left: -15px;
width: 137px;
height: 176px;
}
.flow__item:before {
top: 40px;
left: 15px;
height: calc(100% - 40px);
}
.flow__item:not(:first-child) {
margin-top: 20px;
}
.flow__itemTitle {
font-size: 20px;
grid-template-columns: 36px 1fr;
}
.flow__itemTitle span {
font-size: 20px;
padding-left: 2px;
}
.flow__wrap {
grid-template-columns: 1fr;
margin-left: 45px;
margin-top: 15px;
}
.flow__body {
padding: 30px 15px;
}
.flow__text:not(:first-child) {
margin-top: 15px;
}
.flow__link {
margin-top: 15px;
}
.flow__link a {
padding: 10px;
width: 100%;
max-width: 220px;
font-size: min(calc(100vw / 375 * 17), 17px);
}
.flow__link a:before {
width: min(calc(100vw / 375 * 43), 43px);
height: min(calc(100vw / 375 * 27), 27px);
}
.flow__image {
display: none;
}
.flow__mark01 {
display: none;
}
.flow__mark02 {
display: none;
}
.flow__mark03 {
display: none;
}
.flow__mark04 {
display: none;
}
}
@media screen and (max-width: 374.98px) {
.flow__box:before {
top: -145px;
}
} .medical-subject {
padding: 236px 0 0;
}
.medical-subject__inner {
width: 920px;
margin-inline: auto;
padding-inline: 20px;
position: relative;
}
.medical-subject__box {
margin-top: 100px;
background: #fff;
border-radius: 40px;
padding: 102px 90px 75px;
position: relative;
z-index: 1;
}
.medical-subject__text {
font-size: 15px;
font-weight: 500;
line-height: calc(31.5 / 18);
letter-spacing: 0.05em;
}
.medical-subject__list {
margin-top: 54px;
}
.medical-subject__link {
margin-top: 35px;
text-align: center;
}
.medical-subject__link a {
border-radius: 50px;
border: 3px solid #2db8c3;
padding: 8px;
display: inline-flex;
align-items: center;
justify-content: center;
width: 236px;
font-size: 18px;
font-weight: 700;
line-height: calc(31.5 / 18);
letter-spacing: 0.05em;
}
.medical-subject__strong-list {
margin-top: 52px;
display: flex;
justify-content: space-between;
padding-left: 6px;
}
.medical-subject__strong-item {
width: 210px;
border-radius: 3px;
background-color: #2db8c3;
padding-block: 12px;
text-align: center;
font-weight: 700;
font-size: 16px;
letter-spacing: 0.05em;
color: #fff;
}
.medical-subject__tableZone {
margin-top: 23px;
}
.medical-subject__table {
width: 100%;
}
.medical-subject__table tr th:nth-child(1) { width: 26%;
padding-block: 7px;
padding-right: 14px;
}
@media(min-width: 768px) {
.medical-subject__table tr th:nth-child(1) {
text-align: left;
padding-left: 12px;
}
}
.medical-subject__table tr th:not(:first-child),
.medical-subject__table tr td {
vertical-align: middle;
padding-top: 13px;
padding-bottom: 12px;
width: 6.5%;
text-align: center;
font-weight: 700;
font-size: 15px;
}
.medical-subject__table tr th:last-child,
.medical-subject__table tr td:last-child {
width: 14%;
}
.medical-subject__table tbody tr {
border-top: 2px solid #2db8c3;
}
.medical-subject__table tbody tr th span {
font-weight: 700;
font-size: 15px;
}
.medical-subject__table tbody tr th span:nth-child(2) {
padding-left: 18px;
padding-right: 10px;
font-family: var(--DIN);
font-size: 20px;
letter-spacing: 0.05em;
}
.medical-subject__table-circle {
display: inline-block;
width: 16px;
height: 16px;
background-color: #2db8c3;
border-radius: 50%;
}
.medical-subject__table-screen {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
.medical-subject__time-note {
font-size: 0.8em;
color: #333;
}
.medical-subject__emergency {
margin-top: 18px;
border-radius: 3px;
background-color: #d294b7;
padding-block: 10px;
padding-left: 56px;
display: flex;
align-items: center;
justify-content: center;
font-weight: 700;
font-size: 18px;
letter-spacing: 0.05em;
color: #fff;
}
.medical-subject__emergency-time {
margin-left: 22px;
}
.medical-subject__emergency-time span {
font-family: var(--DIN);
font-size: 20px;
letter-spacing: 0.05em;
}
.medical-subject__emergency-caution {
display: inline-block;
margin-left: 15px;
font-size: 11px;
}
.medical-subject__mark01 {
position: absolute;
width: 320px;
height: auto;
top: 100px;
left: calc(50% + 333px);
}
.medical-subject__mark02 {
position: absolute;
width: 320px;
height: auto;
top: 1390px;
left: calc(50% - 645px);
transform: rotate(-27deg);
}
@media screen and (max-width: 767.98px) {
.medical-subject {
padding: 80px 0 0;
}
.medical-subject__inner {
width: 100%;
}
.medical-subject__box {
margin-top: 50px;
border-radius: 20px;
padding: 50px 15px;
}
.medical-subject__text {
font-size: 15px;
}
.medical-subject__list {
margin-top: 30px;
margin-inline: auto;
max-width: 305px;
}
.medical-subject__strong-list {
margin-top: 52px;
display: grid;
justify-content: stretch;
gap: 5px;
padding-left: 0;
}
.medical-subject__strong-item {
width: 100%;
border-radius: 3px;
background-color: #2db8c3;
padding-block: 12px;
text-align: center;
font-weight: 700;
font-size: 16px;
letter-spacing: 0.05em;
color: #fff;
}
.medical-subject__tableZone {
margin-top: 23px;
}
.medical-subject__table {
width: 100%;
}
.medical-subject__table tr th:nth-child(1) {
width: 32%;
padding-block: 5px;
padding-right: 0px;
font-size: 11px;
}
.medical-subject__table tr th:not(:first-child),
.medical-subject__table tr td {
padding: 0;
font-size: 11px;
}
.medical-subject__table tr th:last-child,
.medical-subject__table tr td:last-child {
width: 14%;
}
.medical-subject__table tbody tr th span {
font-size: 12px;
}
.medical-subject__table tbody tr th span:nth-child(2) {
padding-left: 0;
padding-right: 0;
font-size: 15px;
}
.medical-subject__table-circle {
width: 13px;
height: 13px;
}
.medical-subject__emergency {
padding-block: 11px;
padding-left: 0;
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
font-size: 16px;
}
.medical-subject__emergency-time {
margin-left: 15px;
}
.medical-subject__emergency-time span {
font-size: 22px;
}
.medical-subject__emergency-caution {
margin-left: 0;
font-size: 12px;
width: 100%;
text-align: center;
}
.medical-subject__mark01 {
display: none;
}
.medical-subject__mark02 {
display: none;
}
} .night-medical {
padding: 157px 0 200px;
}
.night-medical__inner {
width: 920px;
margin-inline: auto;
padding-inline: 20px;
position: relative;
}
.night-medical__box {
background: #fff;
border-radius: 40px;
padding: 74px 53px 75px;
margin-top: 80px;
position: relative;
z-index: 1;
}
.night-medical__image img {
width: 100%;
height: auto;
object-fit: cover;
aspect-ratio: 986 / 407;
}
.night-medical__body {
margin: 35px auto 0;
}
.night-medical__bodyText {
font-size: 23px;
font-weight: 700;
line-height: calc(45.5 / 26);
letter-spacing: 0.1em;
}
.night-medical__bodyText--red {
color: #c30d23;
text-align: center;
}
.night-medical__emergency {
margin-top: 18px;
margin-bottom: 16px;
border-radius: 3px;
background-color: #d294b7;
padding-block: 7px;
display: flex;
align-items: center;
justify-content: center;
font-weight: 700;
font-size: 20px;
letter-spacing: 0.05em;
color: #fff;
}
.night-medical__emergency-time {
margin-left: 25px;
}
.night-medical__emergency-time span {
font-family: var(--DIN);
font-size: 28px;
letter-spacing: 0.05em;
}
.night-medical__list {
margin-top: 33px;
}
.night-medical__item {
background: rgba(210, 148, 183, 0.2);
border-radius: 5px;
padding: 46px 50px 41px;
position: relative;
}
.night-medical__item:first-child:after {
content: "";
position: absolute;
bottom: -49px;
left: 50%;
transform: translateX(-50%);
width: 40px;
height: 35px;
background: #d294b7;
clip-path: polygon(0 0, 50% 100%, 100% 0);
}
.night-medical__item:not(:first-child) {
margin-top: 58px;
padding: 31px 50px 38px;
}
.night-medical__itemTitle {
display: flex;
align-items: center;
gap: 3px;
font-size: 23px;
font-weight: 700;
line-height: calc(45.5 / 26);
letter-spacing: 0.1em;
}
.night-medical__itemTitle:before {
content: "";
width: 22px;
height: 22px;
background: #3e3a39;
border-radius: 50%;
flex-shrink: 0;
}
.night-medical__itemText {
font-size: 15px;
line-height: calc(26.3 / 15);
font-weight: 500;
letter-spacing: 0.05em;
margin-top: 6px;
}
.night-medical__link {
margin-top: 24px;
text-align: center;
}
.night-medical__note {
margin-top: 25px;
margin-left: 3px;
font-size: 15px;
font-weight: 700;
line-height: calc(26.3 / 15);
letter-spacing: 0.05em;
color: #d294b7;
}
.night-medical__note:before {
content: "";
width: 12px;
height: 12px;
background: #d294b7;
border-radius: 50%;
margin-top: 7px;
display: inline-block;
}
.night-medical__belongings {
margin-top: 33px;
margin-left: 7px;
display: flex;
align-items: baseline;
gap: 49px;
}
.night-medical__belongingsTitle {
font-size: 24px;
font-weight: 700;
line-height: calc(42 / 24);
letter-spacing: 0.1em;
flex-shrink: 0;
}
.night-medical__belongingsList {
display: flex;
flex-wrap: wrap;
column-gap: 17px;
}
.night-medical__belongingsItem {
font-size: 20px;
font-weight: 700;
line-height: calc(35 / 20);
letter-spacing: 0.1em;
}
.night-medical__belongingsItem:first-child {
width: 100%;
}
.night-medical__belongingsItem:before {
content: "";
width: 17px;
height: 17px;
background: #3e3a39;
border-radius: 50%;
display: inline-block;
margin-right: 4px;
}
.night-medical__bottom {
margin-top: 70px;
}
.night-medical__bottomTitle {
font-size: 26px;
font-weight: 700;
line-height: calc(45.5 / 26);
letter-spacing: 0.1em;
color: #c30d23;
display: flex;
align-items: center;
justify-content: center;
gap: 27px;
}
.night-medical__bottomTitle:before,
.night-medical__bottomTitle:after {
content: "";
width: 170px;
height: 3px;
background: #c30d23;
}
.night-medical__bottomWrap {
display: flex;
justify-content: center;
gap: 30px;
margin-top: 31px;
margin-left: 7px;
}
.night-medical__logo {
width: 240px;
margin-top: 8px;
}
.night-medical__logo img {
width: 100%;
}
.night-medical__bottomBody {
width: 410px;
}
.night-medical__bottomBodyText {
font-size: 20px;
font-weight: 700;
line-height: calc(35 / 20);
letter-spacing: 0.1em;
}
.night-medical__bottomAddress {
font-size: 18px;
font-weight: 700;
line-height: calc(31.5 / 18);
letter-spacing: 0.1em;
}
.night-medical__bottomTel {
margin-top: 7px;
display: flex;
align-items: center;
gap: 10px;
}
.night-medical__bottomTelText {
font-size: 18px;
font-weight: 700;
line-height: calc(26.5 / 18);
letter-spacing: 0.1em;
color: #c30d23;
margin-top: 4px;
}
.night-medical__mark01 {
position: absolute;
width: 320px;
height: auto;
top: 920px;
left: calc(50% + 333px);
}
.night-medical__mark02 {
position: absolute;
width: 400px;
height: 342px;
top: 1460px;
left: calc(50% - 670px);
}
@media screen and (max-width: 767.98px) {
.night-medical {
padding: 80px 0 100px;
}
.night-medical__inner {
width: 100%;
}
.night-medical__box {
border-radius: 20px;
padding: 50px 15px;
margin-top: 50px;
}
.night-medical__image img {
aspect-ratio: 16 / 9;
}
.night-medical__body {
margin: 20px auto 0;
}
.night-medical__bodyText {
font-size: 16px;
line-height: 1.5;
}
.night-medical__emergency {
padding-block: 10px;
display: block;
font-size: 18px;
text-align: center;
}
.night-medical__emergency-time span {
font-size: 24px;
}
.night-medical__item {
padding: 30px 15px;
}
.night-medical__item:not(:first-child) {
padding: 30px 15px;
}
.night-medical__itemTitle {
display: block;
font-size: 20px;
line-height: 1.5;
}
.night-medical__itemTitle:before {
width: 16px;
height: 16px;
display: inline-block;
margin-right: 3px;
}
.night-medical__note {
margin-left: 0;
}
.night-medical__belongings {
margin-left: 0;
display: block;
}
.night-medical__belongingsTitle {
font-size: 20px;
text-align: center;
}
.night-medical__belongingsList {
display: block;
margin-top: 10px;
}
.night-medical__belongingsItem {
font-size: 18px;
}
.night-medical__belongingsItem:before {
width: 16px;
height: 16px;
margin-right: 0;
}
.night-medical__bottom {
margin-top: 50px;
}
.night-medical__bottomTitle {
text-align: center;
font-size: 18px;
line-height: 1.5;
gap: 8px;
}
.night-medical__bottomTitle:before,
.night-medical__bottomTitle:after {
width: 7%;
height: 2px;
}
.night-medical__bottomWrap {
display: block;
margin-top: 30px;
margin-left: 0;
}
.night-medical__logo {
display: block;
width: 180px;
margin: 0 auto;
}
.night-medical__bottomBody {
width: 100%;
}
.night-medical__bottomBodyText {
font-size: 14px;
text-align: center;
margin-top: 15px;
}
.night-medical__bottomAddress {
font-size: 14px;
line-height: 1.5;
text-align: center;
}
.night-medical__bottomTel {
margin-top: 20px;
display: block;
text-align: center;
}
.night-medical__bottomTelText {
font-size: 14px;
line-height: 1.5;
margin-top: 10px;
}
.night-medical__mark01 {
display: none;
}
.night-medical__mark02 {
display: none;
}
} .footer {
min-width: 1500px;
padding-bottom: 68px;
}
.common-entry {
padding-top: 300px;
padding-bottom: 100px;
}
body.home .common-entry {
padding-top: 220px;
}
.page-entry {
background-color: #E3EFF6;
position: relative;
z-index: 1;
}
.page-entry::before {
position: absolute;
bottom: 0;
left: 0;
content: "";
width: 100%;
height: auto;
aspect-ratio: 3838 / 3029;
background-color: #E3EFF6;
z-index: -1;
}
.page-entry::after {
position: absolute;
bottom: 0;
left: 0;
content: "";
width: 100%;
height: auto;
aspect-ratio: 3838 / 3029;
background-image: url(//km-ac.com/wp-content/themes/kmiki/assets/img/common/footer_entry_bg.png);
background-repeat: no-repeat;
background-size: contain;
z-index: -1;
}
.common-entry__container {
margin-inline: auto;
max-width: 980px;
border-radius: 10px;
background-color: #2DB8C3;
padding-top: 72px;
padding-bottom: 45px;
position: relative;
z-index: 1;
}
.common-entry__container::before {
position: absolute;
top: -139px;
left: 50%;
transform: translateX(-50%);
content: "";
width: 700px;
height: auto;
aspect-ratio: 1 / 1;
border-radius: 50%;
background-color: #2DB8C3;
clip-path: polygon(0 0, 100% 0, 100% 20%, 0 20%);
z-index: -1;
}
.common-entry__container::after {
position: absolute;
top: -105px;
left: 50%;
transform: translateX(-50%);
content: "";
width: 67px;
height: 60px;
background-image: url(//km-ac.com/wp-content/themes/kmiki/assets/img/common/footer_entry_logo.svg);
background-repeat: no-repeat;
background-size: contain;
}
.common-entry__comment {
position: absolute;
top: -26px;
left: 50%;
transform: translateX(-50%);
width: fit-content;
text-align: center;
font-weight: 700;
font-size: 26px;
letter-spacing: 0.1em;
line-height: calc(44 / 32);
color: #fff;
z-index: 2;
}
.common-entry__comment::before {
position: absolute;
top: 0;
left: -22px;
transform: rotate(-35deg);
content: "";
width: 4px;
height: 68px;
border-radius: 5px;
background-color: #fff;
}
.common-entry__comment::after {
position: absolute;
top: 0;
right: -22px;
transform: rotate(35deg);
content: "";
width: 4px;
height: 68px;
border-radius: 5px;
background-color: #fff;
}
.common-entry__title {
text-align: center;
font-weight: 700;
font-size: 28px;
letter-spacing: 0.1em;
color: #fff;
}
.common-entry__en {
margin-top: 8px;
margin-inline: auto;
width: 240px;
}
.common-entry__button {
margin-top: 22px;
display: flex;
justify-content: center;
}
.common-entry__woman {
position: absolute;
bottom: 0;
left: 2%;
width: 314px;
}
.common-entry__man {
position: absolute;
bottom: 0;
right: 4%;
width: 302px;
}
.footer-gallery__list {
display: flex;
}
.footer-gallery__item {
width: 25%;
}
.footer-map iframe {
width: 100%;
height: 500px;
object-fit: cover;
}
.footer-clinic {
padding-top: 78px;
padding-bottom: 75px;
background-color: #2DB8C3;
}
.footer-clinic__flex {
display: flex;
column-gap: 45px;
}
.footer-clinic__logo {
flex: 1;
padding-left: 10px;
}
.footer-clinic__container {
width: 550px;
}
.footer-clinic__text {
display: block;
width: 100%;
padding-top: 12px;
padding-bottom: 9px;
background-color: #CF73A3;
padding-left: 5%;
text-align: center;
font-weight: 700;
font-size: 25px;
letter-spacing: 0.08em;
color: #fff;
}
.footer-clinic__text-dot {
display: inline-block;
margin-right: 10px;
}
.footer-clinic__text-dot span {
position: relative;
}
.footer-clinic__text-dot span::before {
position: absolute;
top: -8px;
left: 50%;
transform: translateX(-50%);
content: "";
width: 5px;
height: 5px;
border-radius: 50%;
background-color: #fff;
}
.footer-clinic__wrapper {
background-color: #fff;
padding: 10px 32px 24px;
}
.footer-clinic__table {
width: 100%;
font-size: 11px;
}
.footer-clinic__table tr th:nth-child(1) { width: 26%;
padding-block: 5px;
}
.footer-clinic__table tr th:nth-child(1) br.sp-only{
display: block;
}
@media(min-width: 768px) {
.footer-clinic__table tr th:nth-child(1) {
text-align: left;
padding-left: 10px;
}
}
.footer-clinic__table thead tr th:nth-child(1) {
text-align: left;
padding-left: 12px;
font-weight: 700;
font-size: 14px;
}
.footer-clinic__table tr th:not(:first-child),
.footer-clinic__table tr td {
vertical-align: middle;
padding-block: 5px;
width: 6.5%;
text-align: center;
font-weight: 700;
}
.footer-clinic__table tr th:last-child,
.footer-clinic__table tr td:last-child {
width: 14%;
}
.footer-clinic__table tbody tr {
border-top: 2px solid #2DB8C3;
}
.footer-clinic__table tbody tr th span {
font-weight: 700;
}
.footer-clinic__table tbody tr th span:nth-child(2) {
padding-left: 14px;
font-family: var(--DIN);
font-size: 14px;
}
.footer-clinic__table-circle {
display: inline-block; width: 14px;
height: 14px;
background-color: #595757;
border-radius: 50%;
}
.footer-clinic__table-screen {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
.footer-clinic__emergency {
margin-top: 12px;
border-radius: 2px;
background-color: #CF73A3;
padding-block: 2px;
display: flex;
align-items: center;
justify-content: center;
font-weight: 700;
font-size: 11px;
color: #fff;
}
.footer-clinic__emergency-time {
margin-left: 14px;
}
.footer-clinic__emergency-time span {
font-family: var(--DIN);
font-size: 15px;
letter-spacing: 0.05em;
}
.footer-clinic__emergency-caution {
display: inline-block;
margin-left: 16px;
font-size: 11px;
}
.footer-clinic__button-list {
margin-top: 20px;
display: flex;
align-items: center;
justify-content: space-between;
}
.footer-clinic__button-item {
width: 142px;
}
.footer-clinic__button-link {
border-radius: 30px;
height: 40px;
display: flex;
justify-content: center;
align-items: center;
column-gap: 6px;
}
.footer-clinic__button-link--frame {
border: 3px solid #2DB8C3;
background-color: #fff;
}
.footer-clinic__button-link--region {
background-color: #005876;
}
.footer-clinic__button-icon--phone {
width: 14px;
}
.footer-clinic__button-icon--pc {
margin-bottom: 6px;
width: 25px;
}
.footer-clinic__button-icon--line {
width: 38px;
}
.footer-clinic__button-text {
font-size: 12px;
font-weight: 700;
}
.footer-clinic__button-text--phone {
font-family: var(--DIN);
font-size: 13px;
letter-spacing: 0.1em;
}
.footer-clinic__button-text--region {
color: #fff;
}
.footer-clinic__bottom {
margin-top: 16px;
display: flex;
column-gap: 10px;
}
.footer-clinic__address {
display: inline-block;
font-style: normal;
font-weight: 700;
font-size: 14px;
line-height: 1.2;
}
.footer-clinic__icon-list {
flex: 1;
display: flex;
align-items: center;
justify-content: space-between;
}
.footer-clinic__icon-item {
width: 42px;
}
.footer-clinic__icon-item:first-child {
width: 104px;
}
.footer-nav {
margin-top: 55px;
}
.footer-nav__list {
display: flex;
align-items: center;
justify-content: center;
}
.footer-nav__item {
position: relative;
}
.footer-nav__item:not(:first-child) {
margin-left: 32px;
line-height: 1.4;
}
.footer-nav__item:not(:first-child)::before {
position: absolute;
top: 0;
left: -16px;
content: "";
width: 1px;
height: 100%;
background-color: #231815;
}
.footer-nav__link {
font-weight: 700;
}
.footer-nav__link:not(:first-child) {
margin-left: 16px;
}
@media(min-width: 768px) {
.footer-nav__item .footer-nav__link:not(:first-child) {
border-left: 1px solid #231815;
padding-left: 18px;
}
}
@media(max-width: 767px) {
.footer-nav__item .footer-nav__link:not(:first-child) {
display: block;
margin-left: 0;
margin-top: 6px;
}
}
.footer-banner {
margin-top: 38px;
}
.footer-banner__list {
display: flex;
justify-content: center;
gap: 20px;
}
.footer-banner__item:nth-child(1) {
width: 152px;
}
.footer-banner__item:nth-child(2) {
width: 300px;
}
.footer-banner__item:nth-child(3) {
width: 130px;
}
.footer-banner__item:nth-child(4) {
width: 240px;
}
.footer-copy {
display: block;
margin-top: 38px;
text-align: center;
font-size: 11px;
color: #595757;
}
@media screen and (max-width: 767.98px) {
.footer {
min-width: 100%;
}
.common-entry,
body.home .common-entry {
padding-top: 120px;
padding-bottom: 80px;
}
.footer-clinic__flex {
flex-direction: column;
}
.page-entry {
padding-inline: 20px;
overflow: hidden;
}
.page-entry::after {
width: 1000px;
}
.common-entry__title {
font-size: 21px;
}
.common-entry__en {
width: 170px;
}
.common-entry__container {
padding-top: 80px;
padding-bottom: 90px;
margin-inline: auto;
max-width: 450px;
}
.common-entry__container::before {
width: min(calc(100vw / 375 * 280), 280px);
top: -70px;
clip-path: polygon(0 0, 100% 0, 100% 30%, 0 30%);
}
.common-entry__container::after {
top: -60px;
}
.common-entry__comment {
top: 20px;
width: min(calc(100vw / 375 * 300), 300px);
font-size: min(calc(100vw / 375 * 16), 16px);
}
.common-entry__comment::before {
left: 28px;
width: 2px;
height: 50px;
}
.common-entry__comment::after {
right: 28px;
width: 2px;
height: 50px;
}
.common-entry__woman,
.common-entry__man {
width: min(calc(100vw / 375 * 150), 150px);
}
.footer-clinic {
padding-top: 50px;
padding-bottom: 50px;
}
.footer-clinic__logo {
width: 180px;
margin-inline: auto;
padding-left: 0;
}
.footer-clinic__container {
margin-top: 40px;
width: 100%;
}
.footer-clinic__text {
padding-top: 14px;
font-size: 21px;
}
.footer-clinic__wrapper {
padding: 10px 15px 20px;
}
.footer-clinic__table tbody tr th span:nth-child(2) {
padding-left: 10px;
}
.footer-clinic__emergency {
flex-wrap: wrap;
}
.footer-clinic__emergency-time {
display: flex;
align-items: center;
}
.footer-clinic__emergency-time span {
font-size: 20px;
}
.footer-clinic__emergency-caution {
margin-left: 0;
width: 100%;
text-align: center;
}
.footer-clinic__table thead tr th:nth-child(1) {
text-align: center;
}
.footer-clinic__table-circle {
width: 12px;
height: 12px;
}
.footer-clinic__button-list {
flex-wrap: wrap;
gap: 10px 10px;
justify-content: center;
}
.footer-clinic__bottom {
flex-direction: column;
row-gap: 10px;
}
.footer-clinic__icon-list {
max-width: 305px;
justify-content: flex-start;
column-gap: 2%;
}
.footer-clinic__icon-item {
width: 17%;
}
.footer-clinic__icon-item:first-child {
width: 43%;
}
.footer-nav {
margin-top: 32px;
}
.footer-nav__list {
flex-direction: column;
}
.footer-nav__item:not(:first-child) {
margin-left: 0;
margin-top: 6px;
}
.footer-nav__item:not(:first-child)::before {
display: none;
}
.footer-banner__list {
flex-wrap: wrap;
justify-content: center;
padding-inline: 20px;
margin-inline: auto;
max-width: 375px;
}
.footer-banner__item:nth-child(1),
.footer-banner__item:nth-child(3) {
width: min(calc(100vw / 375 * 100), 100px);
}
.footer-banner__item:nth-child(2),
.footer-banner__item:nth-child(4) {
width: min(calc(100vw / 375 * 200), 200px);
}
} .page-404 {
background-color: #fff;
min-height: calc(100vh - 185px);
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;
position: relative;
z-index: 1;
}
.page-404::before {
position: absolute;
bottom: calc(100% - 1px);
left: 0;
content: "";
width: 100%;
height: 100vh;
background-color: #fff;
z-index: -1;
}
.page-404__title {
text-align: center;
font-weight: 700;
font-size: 28px;
text-transform: uppercase;
}
.page-404__text {
margin-top: 32px;
text-align: center;
font-size: 20px;
}
.page-404__back {
margin-top: 48px;
}
.page-404__back-link {
font-size: 16px;
text-decoration: underline;
}
@media screen and (max-width: 1499.98px) {
.page-404 {
min-height: calc(100vh - 90px);
}
}
@media screen and (max-width: 767.98px) {
.page-404 {
min-height: calc(100svh - 90px);
}
.page-404__title {
font-size: 24px;
}
.page-404__text {
font-size: 16px;
}
}
 html { background: #fff; }
html, * {
-webkit-box-sizing: border-box;
box-sizing: border-box;
-webkit-tap-highlight-color: rgba(0,0,0,0);
}
a {
-webkit-font-smoothing: antialiased;
transition: .2s;
}
em, strong, span, figcaption {
font-size: inherit;
}
img {
max-width: 100%;
height: auto;
vertical-align: bottom;
}  .wrapper {
width: 100%;
height: 100%;
min-height: 100vh;
position: relative;
}
.inner {
width: 95%;
max-width: auto; margin: 0 auto;
}
.flex__col2,
.flex__col3 {
display: flex;
}
.flex__col2 > div {
width: calc(100%/2);
margin-left: 2%;
margin-right: 2%;
}
.flex__col3 > div {
width: calc(100%/3);
margin-left: 2%;
margin-right: 2%;
}
.clearfix::after {
content: "";
display: block;
clear: both;
}
.fl__r {
float: right;
}
.kerning {
display: inline-block !important;
}
.grecaptcha-badge {
visibility: hidden;
} .blog-date {
position: relative;
top: 0;
background: #fd9a09;
color: #fff;
border-radius: 5%;
padding: 1% 2%;
}
@media screen and (max-width: 767.98px) {
.blog__wrap {
padding-top: 40px !important;
}
.blog__item {
margin-top: 0 !important;
margin-bottom: 0 !important;
}
.blog__wrap__inner {
padding: 0 !important;
}
.blog__wrap .page__wrap {
padding: 30px 20px !important;
border-radius: 20px !important;
width: 91%;
}
}
.header__nav-item:not(:first-child)::before,
.footer-nav__item:not(:first-child)::before {
width: 2px;
transform: scaleX(0.5);
display: none;
}
@media screen and (min-width: 1499.99px) {
.header__nav-item:first-child {
padding-right: 22.5px;
}
.header__nav-item:not(:first-child) {
padding-left: 22.5px;
padding-right: 22.5px;
border-left: 1px solid #231815;
margin-left: 0;
}
.header__nav-item:last-child {
padding-right: 0;
}
}
@media screen and (min-width: 767.99px) {
.footer-nav__item:first-child {
padding-right: 15.5px;
} 
.footer-nav__item:not(:first-child) {
padding-left: 15.5px;
padding-right: 15.5px;
border-left: 1px solid #231815;
margin-left: 0;
}
.footer-nav__item:last-child {
padding-right: 0;
}
}
.header__nav-recruit-link {
width: 100%;
}
.doctor-staff::before {
background: repeating-linear-gradient(
-57.5deg,
rgba(201, 225, 233, 1),
rgba(201, 225, 233, 1) 2.5px,
transparent 0,
transparent 17px
);
}
@media(max-width: 767.98px) {
.doctor-staff::before {
background: repeating-linear-gradient(
-59deg,
rgba(201, 225, 233, 1),
rgba(201, 225, 233, 1) 2px,
transparent 0,
transparent 10px
);
}
}
@media(min-width: 768px) {
.top-feature__anchor-item:not(:first-child)::before,
.medical-anchor__item:not(:first-child)::before,
.equipments-anchor__item:not(:first-child)::before {
display: none;
}
.top-feature__anchor-item:not(:first-child),
.medical-anchor__item:not(:first-child),
.equipments-anchor__item:not(:first-child) {
border-left: 1px solid #595757;
}
}
@media(max-width: 767.98px) {
.medical-anchor__item:nth-child(3),
.top-feature__anchor-item:nth-child(3) {
border-left: none;
}
}