@charset "utf-8";

@font-face {
font-family: 'Montserrat';
font-style: italic;
font-weight: 100 900;
font-display: swap;
src: url(https://fonts.gstatic.com/s/montserrat/v31/JTUQjIg1_i6t8kCHKm459WxRxC7mw9c.woff2) format('woff2');
unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
*,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
:root {
--mainColor: #22ac38;
--baseColor: #D5F7DA;
--accentColor: #f8b62d;
--fontColor: #333333;
--blackColor: #000;
--whiteColor: #fff;
--grayColor: #ccc;
}
html {
font-size: 10px;
scroll-behavior: smooth;
}
body {
font-family: "Montserrat", "Zen Maru Gothic", 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', '游ゴシック Medium', 'Yu Gothic Medium', '游ゴシック体', YuGothic, 'メイリオ', Meiryo, Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
line-height: 1.7;
color: var(--fontColor);
font-size: 1.6rem;
letter-spacing: 0.05em;
}
[id] {
scroll-margin-top: 90px;
} .grecaptcha-badge {
visibility: visible !important;
opacity: 0 !important;
pointer-events: none !important;
position: fixed !important;
bottom: -100px !important; } a {
text-decoration: none;
color: inherit;
transition: all .3s;
}
a:hover {
opacity: 0.8;
} a.newtab-link {
position: relative;
color: var(--accentColor);
text-decoration: underline;
}
a.newtab-link::after {
content: "\f2d2";
font-family: "Font Awesome 6 Free";
font-weight: 900;
position: absolute;
top: 50%;
right: -20px;
transform: translateY(-50%);
} #breadcrumbs a {
text-decoration: underline;
}
.text-link {
color: var(--mainColor);
}
.linkbtn {
display: inline-block;
position: relative;
z-index: 1;
overflow: hidden;
padding: 5px 20px 5px 35px;
margin: 20px 0;
border: 1px solid var(--mainColor);
border-radius: 40px;
color: var(--whiteColor);
text-align: center;
background-color: var(--mainColor);
}
.linkbtn::after {
background: linear-gradient(to right, rgba(255, 255, 255, 0) 25%, rgba(255, 255, 255, .6) 50%, rgba(255, 255, 255, 0) 75%);
content: '';
height: 100%;
left: -100%;
position: absolute;
top: 0;
transform: skewX(-15deg);
width: 100%;
}
.linkbtn:hover {
opacity: 1;
}
.linkbtn:hover::after {
animation: 2s 0s shine linear;
}
@keyframes shine {
20% {
left: 100%;
}
100% {
left: 100%;
}
} .accentbtn,
.contactbtn,
.telbtn {
position: relative;
z-index: 1;
margin: 0;
display: inline-block;
min-width: 165px;
max-width: 180px;
text-align: center;
}
.accentbtn a,
.contactbtn a,
.telbtn a {
position: relative;
display: block;
width: 100%;
height: 100%;
padding: 5px 5px 5px 20px;
font-weight: 700;
overflow: hidden;
}
.accentbtn a,
.contactbtn a {
border: 1px solid var(--mainColor);
border-radius: 40px;
background-color: var(--mainColor);
color: var(--whiteColor);
letter-spacing: 0.05em;
}
.accentbtn a::before,
.contactbtn a::before {
content: "";
position: absolute;
top: 50%;
left: 15px;
transform: translateY(-50%);
width: 20px;
height: 20px;
background: url(//kusunokicl.com/wp-content/themes/kusunokiclinic/assets/images/mail.svg) no-repeat;
background-size: contain; }
.accentbtn a::before {
background: url(//kusunokicl.com/wp-content/themes/kusunokiclinic/assets/images/sprout_white.svg) no-repeat center center;
background-size: contain !important;
}
.telbtn a {
border: 1px solid var(--accentColor);
border-radius: 40px;
background-color: var(--accentColor);
color: var(--whiteColor);
}
.telbtn a::before {
content: "";
position: absolute;
top: 50%;
left: 15px;
transform: translateY(-50%);
width: 20px;
height: 20px;
background: url(//kusunokicl.com/wp-content/themes/kusunokiclinic/assets/images/tel_white.svg) no-repeat;
background-size: contain; }
.accentbtn a::after,
.contactbtn a::after,
.telbtn a::after {
background: linear-gradient(to right, rgba(255, 255, 255, 0) 25%, rgba(255, 255, 255, .6) 50%, rgba(255, 255, 255, 0) 75%);
content: '';
height: 100%;
left: -100%;
position: absolute;
top: 0;
transform: skewX(-15deg);
width: 100%;
}
.accentbtn a:hover,
.contactbtn a:hover,
.telbtn a:hover {
opacity: 1;
}
.accentbtn a:hover::after,
.contactbtn a:hover::after,
.telbtn a:hover::after {
animation: 2s 0s shine linear;
} img {
max-width: 100%;
}
.photoS {
width: clamp(300px, 50vw, 480px);
}
.photoM {
width: clamp(400px, 50vw, 720px);
} ol,
ul {
list-style-type: none;
}
ol.baseOl {
list-style-type: decimal;
list-style-position: outside;
margin-left: 2em;
}
ul.baseUl {
list-style-type: disc;
list-style-position: outside;
margin-left: 2em;
}
ul.pointUl,
ul.notesUl {
margin-left: 2em;
}
ul.pointUl>li::before {
content: "\f219";
font-family: "Font Awesome 6 Free";
font-weight: 900;
}
ul.notesUl li::before {
content: "※";
} section {
margin-bottom: 14rem;
}
.containerL {
max-width: 1400px;
margin: 0 auto;
padding: 0 clamp(15px, 4vw, 30px);
}
.containerM {
max-width: 1200px;
margin: 0 auto;
padding: 0 clamp(15px, 4vw, 30px);
}
.containerM>div {
margin-bottom: 5rem;
}
.containerM>div:last-child {
margin-bottom: 7rem;
}
.containerS {
max-width: 1000px;
margin: 0 auto;
}
.flex {
display: flex;
justify-content: space-between;
}
.contents {
width: 100%;
margin-bottom: 3rem;
}
.contents p {
margin-bottom: 1em;
}
strong {
color: #ff981f;
} .inview-blur {
opacity: 0;
filter: blur(5px);
transform: translateY(10px);
transition: opacity .5s ease, filter .5s ease, transform .5s ease;
will-change: opacity, filter, transform;
} .inview-blur.is-inview {
opacity: 1;
filter: blur(0);
transform: translateY(0);
}  .subv {
position: relative;
display: block;
width: 100%;
min-height: 360px; background-size: cover;
background-position: center top;
background-repeat: no-repeat;
} .subv::before {
content: "";
position: absolute;
inset: 0;
background-color: rgba(0, 0, 0, 0.2);
pointer-events: none;
z-index: 1;
}
.subv-inner {
position: absolute;
z-index: 2; left: 0;
right: 0;
top: 80px;
bottom: 0;
display: flex;
align-items: center;
justify-content: center;
padding: 2rem;
}
.subv-title {
color: var(--whiteColor);
font-size: 4.2rem;
font-weight: 800;
text-align: center;
text-shadow: 0 8px 24px rgba(0, 0, 0, 0.7);
margin: 0;
} table {
border-collapse: collapse;
width: 100%;
} header {
width: 100%;
height: 80px;
position: fixed;
top: 0;
left: 0;
z-index: 100;
transition: background-color 0.3s ease;
color: var(--fontColor);
background-color: rgba(255, 255, 255, 0.8);
}
header.is-scroll {
color: var(--fontColor);
background-color: rgba(255, 255, 255, 0.8);
-webkit-backdrop-filter: blur(8px);
backdrop-filter: blur(8px);
}
header .flex {
align-items: center;
height: 100%;
}
header h1 a {
display: block;
width: clamp(200px, 20vw, 300px);
}
header h1 a img {
display: block;
max-width: 100%;
height: auto;
}
.sp-hnav-area {
display: none;
} .pc-hnav-area,
.menu-pc-header-menu-container {
height: 100%;
}
.pc-header-nav {
display: flex;
justify-content: space-between;
align-items: center;
gap: clamp(1rem, 1.2vw, 2rem);
height: 100%;
}
.pc-header-nav li a {
font-size: clamp(1.2rem, 2vw, 1.4rem);
white-space: nowrap;
} .p-side {
position: fixed;
bottom: unset;
left: unset;
right: 0;
top: 13.75rem;
width: unset;
display: flex;
flex-direction: column;
cursor: pointer;
opacity: 0;
visibility: hidden;
border: 2px solid var(--mainColor); z-index: 10;
font-kerning: normal;
transition: all 0.3s ease;
}
.p-side a:hover {
opacity: 1;
} .p-side__contact,
.p-side__reserve {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 0.75rem;
padding: 1.5rem 0.9375rem; color: var(--whiteColor);
font-weight: 700;
text-orientation: upright;
background: var(--mainColor);
}  .p-side__contact .p-side__icon {
width: 1.6875rem;
height: 1.6875rem;
background: url(//kusunokicl.com/wp-content/themes/kusunokiclinic/assets/images/tel_white.svg) no-repeat center/contain;
} .p-side__text {
writing-mode: vertical-rl;
text-orientation: upright;
display: block;
text-align: center;
}
.p-side__text .is-en {
letter-spacing: -0.2em; } h2 {
display: flex;
flex-direction: column;
align-items: center;
margin-bottom: 3rem;
color: var(--mainColor);
text-align: center;
font-size: 3.6rem;
font-weight: 900;
}
.title-en {
font-size: 1.4rem;
font-weight: 700;
color: var(--blackColor);
}
h3 {
margin-bottom: 20px;
font-size: clamp(2rem, 3vw, 2.8rem);
}
h3 em {
display: block;
font-style: normal;
font-size: 1.6rem;
}
h3 .title-en {
margin-left: .5rem;
color: var(--mainColor);
}
h3.subpage-h3 {
position: relative;
margin-bottom: 4rem;
padding: 0 0 0 16px;
}
h3.subpage-h3::before {
content: "";
position: absolute;
top: 50%;
left: 0;
-webkit-transform: translate3d(0, -50%, 0);
transform: translate3d(0, -50%, 0);
width: 4px;
height: 100%;
background-color: var(--mainColor);
}
h4 {
margin-bottom: 2rem;
padding: .6rem 2rem;
border: 1px solid var(--blackColor);
background: var(--whiteColor);
font-size: 2rem;
}
h4.subpage-h4 {
border: none;
border-bottom: 1px solid var(--blackColor);
padding: .5rem;
font-weight: 700;
}
h5 {
margin-left: 1em;
margin-bottom: 1.5rem;
font-size: 1.8rem;
font-weight: 700;
}
p.accent-text {
margin-bottom: 20px;
color: var(--accentColor);
text-align: center;
font-weight: 700;
font-size: clamp(1.6rem, 1.8vw, 2.2rem);
}  #contact {
margin-bottom: 0;
padding: 3rem 0;
background-color: var(--baseColor);
}
#contact .containerM {
margin-bottom: 0;
}
#contact .contact-area {
margin-bottom: 3rem;
padding: 4rem 12rem;
border-radius: 10px;
background-color: var(--whiteColor);
}
.contact-area .flex {
justify-content: center;
gap: 5rem;
}
.contact-title {
margin-bottom: 2.5rem;
text-align: center;
font-size: 2.4rem;
font-weight: 700;
}
.contact-tel {
display: flex;
flex-direction: column;
gap: 10px;
align-items: center;
font-weight: 700;
}
.tel-link {
position: relative;
padding-left: 3.5rem;
line-height: 1;
font-size: clamp(2.2rem, 4.2vw, 4.6rem);
text-decoration: none;
color: var(--accentColor);
}
.tel-link::before {
content: "";
position: absolute;
z-index: 1;
width: 30px;
height: 30px;
background: url(//kusunokicl.com/wp-content/themes/kusunokiclinic/assets/images/tel_orange.svg) no-repeat;
background-size: contain;
left: 0;
top: 50%;
transform: translateY(-50%);
}
.contact-web {
display: flex;
height: 6rem;
align-items: center;
justify-content: center;
overflow: hidden;
background: var(--accentColor);
border-radius: .8rem;
margin-bottom: 2rem;
}
.contact-web a {
position: relative;
padding: 2rem 6rem 2rem 4rem;
width: 380px;
color: var(--whiteColor);
font-weight: bold;
text-align: center;
}
.contact-web a::after {
content: "";
position: absolute;
right: 20px;
top: 50%;
transform: translateY(-50%);
width: 20px;
height: 20px;
background: url(//kusunokicl.com/wp-content/themes/kusunokiclinic/assets/images/right_arrow.svg) no-repeat;
margin-left: 0.2em;
}
.contact-web a::before {
background: linear-gradient(to right, rgba(255, 255, 255, 0) 25%, rgba(255, 255, 255, .6) 50%, rgba(255, 255, 255, 0) 75%);
content: '';
height: 100%;
left: -100%;
position: absolute;
top: 0;
transform: skewX(-15deg);
width: 100%;
}
.contact-web a:hover {
opacity: 1;
}
.contact-web a:hover::before {
animation: 2s 0s shine linear;
} button.page-top {
position: fixed;
display: flex;
align-items: center;
justify-content: center;
width: 160px;
height: 80px;
right: 40px;
bottom: -160px;
color: var(--whiteColor);
cursor: pointer;
opacity: 0;
visibility: hidden;
border: 0;
background: var(--accentColor);
transition: .2s;
letter-spacing: 3px;
font-weight: 700;
border-radius: 100px 100px 0 0;
}
button.page-top i {
position: absolute;
top: 15px;
margin-top: 0;
font-size: 3rem;
color: var(--whiteColor);
font-weight: 700;
transition: margin-top .2s ease;
}
button.page-top:hover i {
margin-top: -0.5rem
}
button.page-top p {
margin: 0;
font-size: 1.5rem;
bottom: 13px;
position: absolute;
}
.is-active {
opacity: 1;
visibility: visible;
}
button.is-active {
bottom: 0px;
opacity: 1;
visibility: visible;
}
footer {
background-color: var(--baseColor);
}
.footer-nav {
gap: 8rem;
padding: 2rem 2rem 0;
}
.footer-address {
width: 40%;
}
.footer-address h1 {
margin-bottom: 1rem;
width: 255px;
height: 50px;
}
.footer-address h1 a {
display: block;
height: 100%;
} .fnav-area {
width: 60%;
font-weight: 600;
}
#menu-footer-menu {
font-size: 1.4rem;
}
#menu-footer-menu li {
display: inline-block;
margin-right: 4rem;
margin-bottom: 2rem;
}
.telfax {
margin-bottom: 1.5rem;
font-size: clamp(1.6rem, 2.8vw, 2.4rem);
white-space: nowrap;
}
.copyright {
padding: 20px 0;
font-size: 1.4rem;
text-align: center;
} #notfound {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
margin-top: 150px;
margin-bottom: 70px;
text-align: center;
}
.l-pagehead {
width: 100%;
padding-right: 15px;
padding-left: 15px;
margin-bottom: 16px;
background-color: #f5f5f5;
border-top: 1px solid #dbdbdb;
border-bottom: 1px solid #dbdbdb;
}
.l-pagehead__title {
font-size: clamp(2rem, 2.8vw, 3.2rem);
padding-top: 30px;
padding-bottom: 30px;
}
.ttl404 {
color: var(--mainColor);
font-size: clamp(1.8rem, 2.8vw, 3rem);
font-weight: bold;
}
#notfound .linkbtn {
position: relative;
padding: 5px 35px 5px 20px;
}
#notfound .linkbtn::before {
position: absolute;
right: 15px;
content: "\f105";
font-family: "Font Awesome 5 Free";
color: inherit;
font-weight: bold;
margin-left: 0.2em;
} @media screen and (min-width: 960px) {
.p-side {
display: none;
}
}  @media screen and (max-width: 1199px) { header .flex {
align-items: center;
flex-direction: row;
padding: .5rem;
}
.pc-hnav-area {
display: none;
}
.sp-hnav-area {
display: block;
}
.menu-btn {
position: relative;
top: auto;
right: auto;
margin-left: auto;
display: flex;
height: 46px;
width: 46px;
justify-content: center;
align-items: center;
z-index: 300;
background-color: transparent;
}
.menu-btn span,
.menu-btn span:before,
.menu-btn span:after {
content: "";
display: block;
height: 3px;
width: 25px;
border-radius: 3px;
background-color: var(--mainColor);
position: absolute;
}
.menu-btn span:before {
bottom: 8px;
}
.menu-btn span:after {
top: 8px;
}
#menu-btn-check:checked~.menu-btn span:before,
#menu-btn-check:checked~.menu-btn span:after {
background-color: #fff;
}
#menu-btn-check:checked~.menu-btn span {
background-color: rgba(255,
255,
255,
0); }
#menu-btn-check:checked~.menu-btn span::before {
bottom: 0;
transform: rotate(45deg);
}
#menu-btn-check:checked~.menu-btn span::after {
top: 0;
transform: rotate(-45deg);
}
#menu-btn-check {
display: none;
}
.menu-content {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100vh;
background-color: var(--mainColor);
z-index: 200;
overflow-y: auto;
transform: translateY(-100%);
transition: transform 0.5s ease-in-out;
}
.menu-content.is-open {
transform: translateY(0);
}
#menu-btn-check:checked~.menu-content {
bottom: 0; }
.menu-content ul {
padding: 4rem 3rem 7rem;
margin-left: 0;
}
.menu-content ul li {
position: relative;
margin-top: 1.5rem;
border-bottom: 1px solid var(--whiteColor);
font-size: 1.4rem;
} .menu-content ul li.accent::before {
content: none;
}
.menu-content ul li a {
position: relative;
display: block;
width: 100%;
box-sizing: border-box;
padding: 8px 10px 8px 10px;
font-size: 1.6rem;
color: #ffffff;
text-decoration: none;
white-space: nowrap;
}
.menu-content .contactbtn,
.menu-content .accentbtn {
display: block;
max-width: 300px;
margin: 5rem auto 4rem; border: none;
border-radius: 40px;
background-color: var(--whiteColor);
}
.menu-content .contactbtn a,
.menu-content .accentbtn a {
display: block;
color: var(--mainColor);
background-color: var(--whiteColor);
}
.menu-content .contactbtn a::before {
background: url(//kusunokicl.com/wp-content/themes/kusunokiclinic/assets/images/mail_green.svg) no-repeat;
background-size: contain;
}
.menu-content .accentbtn a::before {
background: url(//kusunokicl.com/wp-content/themes/kusunokiclinic/assets/images/sprout_green.svg) no-repeat;
background-size: contain;
}
.menu-content .telbtn {
display: block;
max-width: 300px;
margin: 2rem auto 0;
border: 1px solid var(--accentColor);
border-radius: 40px;
background-color: var(--accentColor);
}
.menu-content .telbtn a {
display: block;
color: var(--whiteColor);
}
}
@media screen and (max-width: 959px) {
body {
font-size: 1.4rem;
}
header {
height: 60px;
} section {
margin-bottom: 5rem;
}
section>div {
padding: 0 1rem;
}
.flex {
flex-direction: column;
}
.containerM {
margin-bottom: 3rem;
}
.containerM>div:last-child {
margin-bottom: 0;
} ol.baseOl,
ul.baseUl,
ul.pointUl,
ul.notesUl {
margin-left: 1em;
} .title-en {
font-size: 1.2rem;
}
h2 {
margin-bottom: 1.5rem;
font-size: 2.4rem;
}
h3 {
display: flex;
align-items: baseline;
flex-wrap: wrap;
gap: .5rem;
}
h3 .title-jp,
h3 .title-en {
white-space: nowrap;
}
h3 .title-en {
margin-left: 0;
color: var(--mainColor);
}
h3 em {
font-size: 1.4rem;
}
h4 {
font-size: 1.6rem;
} .subv {
min-height: 200px;
}
.subv-inner {
top: 60px;
}
.subv-title {
font-size: 2.4rem;
}
.page-content {
padding: 2rem 1rem;
} .p-side {
display: block;
width: 100%;
max-width: 100vw; bottom: 0;
left: 0;
top: auto; }
.p-side__contact,
.p-side__reserve {
flex-direction: row;
padding: 1rem .5rem;
}
.p-side__text {
writing-mode: initial;
text-orientation: initial;
}
.p-side__contact {  writing-mode: initial;
text-orientation: mixed;
}
.p-side__contact::before {
top: 50%;
left: 1.25rem;
transform: translateY(-50%);
} .p-side__text .is-en {
letter-spacing: 0;
}  #contact {
padding-bottom: 0;
}
#contact .contact-area {
padding: 2rem;
margin-bottom: 0;
}
.contact-area .flex {
gap: 0;
}
.contact-title {
margin-bottom: 1.5rem;
font-size: 1.6rem;
line-height: 1.2;
}
.contact-tel {
margin-bottom: 1rem;
}
.tel-link {
padding-left: 20px;
}
.tel-link::before {
width: 20px;
height: 20px;
}
.contact-web {
margin-bottom: 0;
}
footer {
padding: 3rem 0 5rem;
}
.footer-nav {
flex-direction: column;
gap: 2rem;
padding: 2.5rem 1rem 0;
}
.footer-address {
width: 100%;
}
.fnav-area {
width: 100%;
}
#menu-footer-menu li {
width: calc((100% / 2) - 1rem);
margin-right: 0;
} button.page-top {
width: 60px;
height: 60px;
right: 10px;
bottom: 70px;
border-radius: 50%;
}
button.page-top i {
font-size: 1.2rem;
margin-top: -1rem
}
button.page-top p {
bottom: 10px;
font-size: 1.2rem;
letter-spacing: 0;
}
}