@charset 'UTF-8';
/* ========================================================================
/*
/* Foundation
/*
========================================================================= */
/* Bootstrap Customize
--------------------------------------------------------- */
h1 {
float: none;
margin: 0;
padding: 0;
}
h2 {
margin: 0;
padding: 0;
}
h3 {
margin: 0;
padding: 0;
}
h4,
h5,
h6,
.h4,
.h5,
.h6 {
margin-top: 0;
margin-bottom: 0;
}
img {
border: 0;
vertical-align: top;
}
p {
margin: 0;
}
ol,
ul {
margin: 0;
padding: 0;
list-style: none;
}
dl {
margin: 0;
padding: 0;
line-height: 1.9;
}
dt {
font-weight: normal;
line-height: 1.9;
}
dd {
line-height: 1.9;
}
address {
margin-bottom: auto;
}
@media (min-width: 1400px) {
.d-xxl-block {
display: block !important;
}
.d-xxl-none {
display: none !important;
}
}
@media screen and (min-width: 1200px) {
.container {
max-width: 1500px;
}
}
[class*=col-]:not(:last-child) {
margin-bottom: 2em;
}
@media print, screen and (min-width: 768px) {
[class*=col-]:not(:last-child) {
margin-bottom: 0;
}
}
.modal {
z-index: 9999;
}
@media print {
.modal {
display: none !important;
}
}
@media print, screen and (min-width: 768px) {
.modal-body img {
max-height: 700px;
}
}
.thumb {
position: relative;
width: auto;
height: 300px;
border: solid 1px #e5e5e5;
background: #f8f8f8;
}
.thumb img {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: auto;
max-width: 100%;
max-height: 100%;
margin: auto;
}
.thumb a {
display: block;
width: 100%;
height: 100%;
outline: none;
cursor: pointer;
}
.thumb a:is(:hover, :active, :focus) img {
opacity: .7;
transition: .3s;
}
@media only screen and (max-width: 767.98px) {
.form-inline select {
display: inline-block;
width: auto;
padding-right: 2px;
padding-left: 2px;
}
}
input[type=file].form-control {
height: 0;
}
@media only screen and (max-width: 575.98px) {
.form-check-inline {
display: block;
}
}
@media print, screen and (min-width: 576px) {
.form-check-inline:not(:last-of-type) {
margin-right: 1.4em;
}
}
.form-control {
height: auto;
padding: .7em .7em;
border-radius: 4px;
}
@media only screen and (max-width: 767.98px) {
.form-control {
font-size: 1rem;
}
}
@media print, screen and (min-width: 768px) {
.form-control {
font-size: clamp(.938rem, .158vw + .862rem, 1rem);
}
}
.form-control::placeholder {
color: #b3b3b3;
font-weight: 350;
}
@media only screen and (max-width: 767.98px) {
.form-control::placeholder {
font-size: .875rem;
}
}
@media print, screen and (min-width: 768px) {
.form-control::placeholder {
font-size: clamp(.875rem, .158vw + .799rem, .938rem);
}
}
/* Base
--------------------------------------------------------- */
:root {
--color-main: #f9a771;
--color-sub: #306e83;
--color-txt: #0e0f0f;
--color-txt2: #ea803b;
--color-txt3: #c2c2c2;
--color-txt-blush: #f6dabf;
--color-txt-peach: #ffe2c6;
--color-base: #fdf5ed;
--color-base2: #fbe7d4;
--color-base3: #f5dfca;
--color-accent: #d90b0b;
--color-shadow: #fbebdb;
--color-shadow2: #ecd6c1;
--color-shadow3: #dd8d58;
--color-shadow4: #b69384;
--color-shadow5: #c1926b;
--color-box: #c4a395;
--color-box2: #b68f61;
--font-family-primary: 'Kiwi Maru', serif;
--font-family-secondary: 'Andika', sans-serif;
--font-family-awesome: 'Font Awesome 6 Free';
--header-height-mobile: clamp(45px, 7.8vw, 60px);
--header-height-desktop: clamp(100px, 7.6vw, 120px);
--icon-phone: url('data:image/svg+xml;utf-8,');
--icon-arrow: url('data:image/svg+xml;utf-8,');
--icon-arrow2: url('data:image/svg+xml;utf-8,');
--icon-cross: url('data:image/svg+xml;utf-8,');
--icon-triangle: url('data:image/svg+xml;utf-8,');
--icon-plus: url('data:image/svg+xml;utf-8,');
--bg-wave: url('data:image/svg+xml;utf-8,');
--bg-wave2: url('data:image/svg+xml;utf-8,');
--bg-wave3: url('data:image/svg+xml;utf-8,');
--flow-arrow: url('data:image/svg+xml;utf-8,');
}
*,
*::before,
*::after {
box-sizing: border-box;
}
body {
overflow-x: hidden;
background-color: var(--color-base);
color: var(--color-txt);
letter-spacing: .025em;
font-weight: 400;
font-family: var(--font-family-primary);
line-height: 1.8;
font-optical-sizing: auto;
}
body :lang(en) {
font-family: var(--font-family-secondary);
}
a {
color: var(--color-main);
text-decoration: none;
transition: color .3s;
text-underline-offset: .3em;
}
a:is(:hover, :active, :focus) {
color: var(--color-sub);
text-decoration: none;
}
a:has([data-action=call]) {
color: inherit;
text-decoration: none;
}
em,
strong {
font-weight: bold;
font-style: normal;
}
button,
input[type=submit],
input[type=button] {
padding: 0;
border: 0;
}
img {
-webkit-backface-visibility: hidden;
}
a:focus,
button:focus,
input:focus,
select:focus,
textarea:focus,
summary:focus,
[role=button]:focus,
[tabindex]:not([tabindex='-1']):focus {
outline: none;
}
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[role=button]:focus-visible,
[tabindex]:not([tabindex='-1']):focus-visible {
outline: 1px solid currentColor;
outline-offset: 2px;
}
/* ========================================================================
/*
/* Layout
/*
========================================================================= */
/* 全体
--------------------------------------------------------- */
.l-page-wrapper {
display: flex;
flex-direction: column;
min-height: 100vh;
}
/* ヘッダーレイアウト
--------------------------------------------------------- */
.l-header {
position: fixed;
top: 0;
left: 0;
z-index: 1;
display: flex;
width: 100%;
background-color: transparent;
opacity: 1;
transition: opacity .3s, background-color .3s;
align-items: center;
}
@media screen and (max-width: 991.98px) {
.l-header {
z-index: 1000;
height: var(--header-height-mobile);
background-color: var(--color-base);
}
}
@media print, screen and (min-width: 992px) {
.l-header {
height: var(--header-height-desktop);
}
}
@media print, screen and (min-width: 992px) {
.l-header.is-passed-hero,
.l-header.is-leaving-hero {
z-index: 100;
background-color: var(--color-base);
}
}
@media screen and (min-width: 1400px) {
.l-header.is-passed-hero .p-header__block,
.l-header.is-leaving-hero .p-header__block {
column-gap: clamp(40px, 3vw, 60px);
}
}
.l-header.is-passed-hero .p-header__deco,
.l-header.is-leaving-hero .p-header__deco {
opacity: 0;
}
@media screen and (min-width: 1400px) {
.l-header.is-passed-hero .c-global-nav__items,
.l-header.is-leaving-hero .c-global-nav__items {
column-gap: clamp(40px, 3vw, 58px);
justify-content: flex-end;
}
}
@media print, screen and (min-width: 992px) {
.l-header.is-passed-hero {
opacity: 1;
}
}
@media print, screen and (min-width: 992px) {
.l-header.is-leaving-hero {
opacity: 0;
}
}
/* コンテンツ
--------------------------------------------------------- */
.l-contents {
position: relative;
position: -webkit-sticky;
position: sticky;
z-index: 2;
flex: 1 0 auto;
padding-bottom: clamp(70px, 10.1vw, 160px);
background-color: var(--color-base);
}
.l-contents.--home {
padding-top: 0;
}
.l-contents.--home::before,
.l-contents.--home::after {
display: none;
}
.l-contents.--contact {
padding-bottom: clamp(30px, 3.1vw, 40px);
}
.l-contents__fv {
position: relative;
padding-top: clamp(30px, 3.5vw, 50px);
background-color: var(--color-base);
}
.l-contents__fv::before {
position: absolute;
bottom: calc(100% - 1px);
left: 0;
z-index: -1;
width: 100%;
margin: auto;
background-color: inherit;
content: '';
-webkit-mask-size: 100% 100%;
mask-size: 100% 100%;
-webkit-mask-image: var(--bg-wave);
mask-image: var(--bg-wave);
aspect-ratio: 1920/100;
}
@media print {
.l-contents__fv::before {
-webkit-print-color-adjust: exact;
}
}
.l-contents__fv.--theme-base {
padding-bottom: clamp(60px, 7.9vw, 120px);
background-color: var(--color-base2);
}
.l-contents__fv.--no-padding-bottom {
padding-bottom: 0;
}
/* フッターレイアウト
--------------------------------------------------------- */
.l-footer {
position: relative;
z-index: 1;
background-color: var(--color-base);
}
@media print {
.l-footer {
break-inside: avoid;
page-break-inside: avoid;
}
}
/* First View
--------------------------------------------------------- */
.l-first-view {
position: -webkit-sticky;
position: sticky;
top: 0;
z-index: 0;
}
@media screen and (max-width: 991.98px) {
.l-first-view {
padding-top: var(--header-height-mobile);
}
}
@media print, screen and (min-width: 992px) {
.l-first-view {
padding-top: var(--header-height-desktop);
}
}
/* ========================================================================
/*
/* Component
/*
========================================================================= */
/* ドロワー
--------------------------------------------------------- */
.drawer__btn {
position: absolute;
top: 0;
right: 0;
z-index: 1000;
width: var(--header-height-mobile);
height: var(--header-height-mobile);
outline: none !important;
background: var(--color-main);
transition: background-color .5s;
-webkit-user-select: none;
user-select: none;
}
@media print, screen and (min-width: 992px) {
.drawer__btn {
display: none;
}
}
.is-drawer-open .drawer__btn {
background-color: transparent;
}
.drawer__btn-line {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 10;
display: block;
width: clamp(24px, 4vw, 30px);
height: 1px;
margin: auto;
background: #fff;
transition: .5s cubic-bezier(.645, .045, .355, 1);
pointer-events: none;
}
.is-drawer-open .drawer__btn-line {
background-color: #5f5f5f;
}
.drawer__btn-line:nth-child(1) {
transform: translateY(-6px);
}
.is-drawer-open .drawer__btn-line:nth-child(1) {
transform: rotate(45deg);
}
.is-drawer-open .drawer__btn-line:nth-child(2) {
opacity: 0;
}
.drawer__btn-line:nth-child(3) {
transform: translateY(6px);
}
.is-drawer-open .drawer__btn-line:nth-child(3) {
transform: rotate(-45deg);
}
@media screen and (max-width: 991.98px) {
.drawer__bg {
position: fixed;
top: 0;
left: 100%;
z-index: 500;
overflow-x: hidden;
width: min(80vw, 450px);
height: 100vh;
background-color: var(--color-base);
transition: transform .5s cubic-bezier(.645, .045, .355, 1);
pointer-events: none;
}
}
@media print, screen and (min-width: 992px) {
.drawer__bg {
height: 100%;
}
}
@media screen and (max-width: 991.98px) {
.drawer__bg::-webkit-scrollbar {
display: none;
}
}
@media screen and (max-width: 991.98px) {
.is-drawer-open .drawer__bg {
overflow-y: auto;
transform: translateX(-100%);
pointer-events: auto;
-ms-overflow-style: none;
scrollbar-width: none;
}
}
@media screen and (max-width: 991.98px) {
.drawer__inner {
visibility: hidden;
padding: 90px 4vw 140px;
opacity: 0;
transition: opacity .5s cubic-bezier(.645, .045, .355, 1) .25s, visibility .5s cubic-bezier(.645, .045, .355, 1) .25s, transform .5s cubic-bezier(.645, .045, .355, 1) .25s;
transform: translateX(30px);
}
}
@media print, screen and (min-width: 992px) {
.drawer__inner {
height: 100%;
}
}
@media screen and (max-width: 991.98px) {
.is-drawer-open .drawer__inner {
visibility: visible;
opacity: 1;
transform: none;
}
}
@media screen and (max-width: 991.98px) {
.drawer__overlay {
position: fixed;
top: 0;
left: 0;
z-index: 400;
visibility: hidden;
width: 100%;
height: 100vh;
opacity: 0;
transition: .5s cubic-bezier(.645, .045, .355, 1);
pointer-events: none;
-webkit-backdrop-filter: blur(1px);
backdrop-filter: blur(1px);
}
}
@media screen and (max-width: 991.98px) {
.is-drawer-open .drawer__overlay {
visibility: visible;
background: rgba(0, 0, 0, .3);
opacity: 1;
pointer-events: auto;
}
}
/* グローバルナビ
--------------------------------------------------------- */
@media print, screen and (min-width: 992px) {
.c-global-nav__items {
display: flex;
justify-content: space-between;
}
}
@media screen and (min-width: 1400px) {
.c-global-nav__items {
column-gap: clamp(40px, 3vw, 58px);
justify-content: flex-end;
}
}
@media screen and (min-width: 1400px) {
.c-global-nav__items.--home {
justify-content: space-between;
}
}
@media screen and (max-width: 991.98px) {
.c-global-nav__item + .c-global-nav__item {
margin-top: 7px;
}
}
@media print, screen and (min-width: 992px) {
.c-global-nav__item.--only-sp {
display: none;
}
}
.c-global-nav__item > a {
position: relative;
display: block;
color: var(--color-txt);
text-decoration: none;
letter-spacing: .02em;
line-height: 1.5;
transition: opacity .5s, color .5s;
}
@media screen and (max-width: 991.98px) {
.c-global-nav__item > a {
padding: .9em 1em;
text-align: left;
font-size: 1.0625rem;
}
}
@media print, screen and (min-width: 992px) {
.c-global-nav__item > a {
text-align: center;
font-size: clamp(.875rem, .216vw + .741rem, 1rem);
}
}
@media print, screen and (min-width: 992px) {
.c-global-nav__item > a:hover,
.c-global-nav__item > a:focus {
opacity: .6;
}
}
.c-global-nav__item.is-current > a {
color: var(--color-main);
}
.c-global-nav .drop-down {
position: relative;
}
.c-global-nav .drop-down.is-open .drop-down__trigger {
opacity: .6;
}
@media screen and (max-width: 991.98px) {
.c-global-nav .drop-down.is-open .drop-down__trigger::before {
content: '\f0d8';
}
}
.c-global-nav .drop-down__trigger {
position: relative;
}
@media screen and (max-width: 991.98px) {
.c-global-nav .drop-down__trigger::before {
position: absolute;
top: 0;
right: 0;
bottom: 0;
display: flex;
color: var(--color-main);
content: '\f0d7';
font-weight: 900;
font-size: .9em;
font-family: var(--font-family-awesome);
line-height: 1;
align-items: center;
}
}
.c-global-nav .drop-down__target {
display: none;
border-radius: clamp(8px, .7vw, 12px);
background-color: #fff;
box-shadow: 2px 3px 0 0 var(--color-shadow);
}
@media screen and (max-width: 991.98px) {
.c-global-nav .drop-down__target {
position: relative;
padding: 10px 10px 18px;
}
}
@media print, screen and (min-width: 992px) {
.c-global-nav .drop-down__target {
position: absolute;
top: 100%;
left: calc(clamp(20px, 2.4vw, 34px) * -1);
z-index: 1000;
padding-top: clamp(15px, 1.2vw, 20px);
padding-right: clamp(15px, 1.2vw, 20px);
padding-bottom: clamp(20px, 1.7vw, 30px);
padding-left: clamp(15px, 1.2vw, 20px);
transform: translateY(13px);
}
}
@media print, screen and (min-width: 992px) {
.c-global-nav .drop-down__target::before {
position: absolute;
right: 0;
bottom: 100%;
left: 0;
height: 13px;
content: '';
}
}
@media print, screen and (min-width: 992px) {
.c-global-nav .drop-down__items {
display: grid;
column-gap: clamp(15px, 1.2vw, 20px);
grid-auto-flow: column;
grid-template-rows: repeat(3, auto);
grid-auto-columns: clamp(150px, 11.7vw, 190px);
}
}
.c-global-nav .drop-down__item a {
display: block;
border-bottom: 1px dashed #d9d6d4;
color: var(--color-txt);
font-weight: 400;
line-height: 1.5;
transition: opacity .5s, color .5s;
}
@media screen and (max-width: 991.98px) {
.c-global-nav .drop-down__item a {
padding: .6em 1.4em;
}
}
@media print, screen and (min-width: 992px) {
.c-global-nav .drop-down__item a {
height: 100%;
padding: .4em .4em .5em;
text-align: center;
font-size: clamp(.875rem, .216vw + .741rem, 1rem);
}
}
@media print, screen and (min-width: 992px) {
.c-global-nav .drop-down__item a:is(:hover, :active, :focus) {
opacity: .6;
}
}
.c-global-nav .drop-down__item.is-current > a {
color: var(--color-main);
}
/* フッターナビ
--------------------------------------------------------- */
.c-footer-nav__items {
display: flex;
flex-wrap: wrap;
}
@media print, screen and (min-width: 768px) {
.c-footer-nav__items {
justify-content: flex-end;
}
}
.c-footer-nav__item {
position: relative;
line-height: 1.6;
}
@media only screen and (max-width: 767.98px) {
.c-footer-nav__item:not(:last-of-type) {
margin-right: 1.1em;
padding-right: 1.1em;
}
}
@media print, screen and (min-width: 768px) {
.c-footer-nav__item:not(:last-of-type) {
margin-right: 1.8em;
padding-right: 1.8em;
}
}
@media print, screen and (min-width: 992px) {
.c-footer-nav__item:not(:last-of-type) {
margin-right: 2em;
padding-right: 2em;
}
}
@media screen and (min-width: 1200px) {
.c-footer-nav__item:not(:last-of-type) {
margin-right: 2.2em;
padding-right: 2.2em;
}
}
.c-footer-nav__item:not(:last-of-type)::before {
position: absolute;
top: .2em;
right: 0;
bottom: 0;
width: 1px;
height: 1em;
margin-top: auto;
margin-bottom: auto;
background-color: var(--color-txt);
content: '';
}
.c-footer-nav__item a {
color: var(--color-txt);
}
/* コンテナ
--------------------------------------------------------- */
.c-container {
max-width: min(92vw, 1470px);
margin-right: auto;
margin-left: auto;
}
/* セクション
--------------------------------------------------------- */
.c-section {
margin-top: clamp(80px, 10.5vw, 160px);
}
.c-section:first-child {
margin-top: 0;
}
/* ページタイトル
--------------------------------------------------------- */
.c-page-header {
position: relative;
z-index: 0;
display: flex;
flex-direction: column;
height: clamp(170px, 25vw, 400px);
background-position: center;
background-size: cover;
background-repeat: no-repeat;
text-align: center;
align-items: center;
justify-content: center;
}
.c-page-header::before {
position: absolute;
z-index: -1;
background-color: rgba(144, 115, 96, .3);
content: '';
inset: 0;
}
.c-page-header.--first {
background-image: url('../images/first/bg-page-header.jpg');
}
.c-page-header.--general {
background-image: url('../images/general/bg-page-header.jpg');
background-position: center bottom;
}
.c-page-header.--orthodontics {
background-image: url('../images/orthodontics/bg-page-header.jpg');
background-position: center 50%;
}
.c-page-header.--esthetic {
background-image: url('../images/esthetic/bg-page-header.jpg');
background-position: center 90%;
}
.c-page-header.--whitening {
background-image: url('../images/whitening/bg-page-header.jpg');
background-position: center 65%;
}
.c-page-header.--dentures {
background-image: url('../images/dentures/bg-page-header.jpg');
}
.c-page-header.--cosmetic {
background-image: url('../images/cosmetic/bg-page-header.jpg');
background-position: center 60%;
}
.c-page-header.--about {
background-image: url('../images/about/bg-page-header.jpg');
background-position: right bottom;
}
.c-page-header.--facilities {
background-image: url('../images/facilities/bg-page-header.jpg');
background-position: center 90%;
}
.c-page-header.--contact {
background-image: url('../images/contact/bg-page-header.jpg');
background-position: center center;
}
.c-page-header__inner {
padding-top: .8em;
}
.c-page-header__en,
.c-page-header__title {
color: #fff;
}
.c-page-header__en {
color: #fff;
white-space: nowrap;
letter-spacing: .025em;
font-weight: 400;
font-family: var(--font-family-primary);
font-family: var(--font-family-secondary);
line-height: .8;
}
@media only screen and (max-width: 767.98px) {
.c-page-header__en {
font-size: clamp(1.75rem, 1.471vw + 1.419rem, 2.125rem);
}
}
@media print, screen and (min-width: 768px) {
.c-page-header__en {
font-size: clamp(2.813rem, 2.17vw + 1.771rem, 4.375rem);
}
}
.c-page-header__title {
position: relative;
z-index: 1;
letter-spacing: .03em;
font-weight: 500;
line-height: 1.8;
}
@media only screen and (max-width: 767.98px) {
.c-page-header__title {
margin-top: .6em;
font-size: clamp(1.125rem, .49vw + 1.015rem, 1.25rem);
}
}
@media print, screen and (min-width: 768px) {
.c-page-header__title {
margin-top: .7em;
font-size: clamp(1.375rem, .694vw + 1.042rem, 1.875rem);
}
}
/* キャッチコピー
--------------------------------------------------------- */
.c-copy {
margin-bottom: 1.2em;
color: var(--color-main);
font-weight: 500;
font-size: clamp(1.125rem, .769vw + .952rem, 1.875rem);
line-height: 1.5;
}
.c-copy.--secondary {
color: var(--color-sub);
}
@media print, screen and (min-width: 768px) {
.c-copy.--center {
text-align: center;
}
}
/* リスト
--------------------------------------------------------- */
.c-list > li {
position: relative;
}
.c-list > li::before {
position: absolute;
left: 0;
}
.c-list.--dot > li {
padding-left: 1.2em;
}
.c-list.--dot > li::before {
content: '・';
}
.c-list.--num > li {
margin-left: 1.3em;
list-style-type: decimal;
}
.c-list.--inline {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(6em, 1fr));
gap: 4%;
}
/* テーブル
--------------------------------------------------------- */
.c-table {
width: 100%;
font-size: clamp(.938rem, .096vw + .916rem, 1rem);
line-height: 1.7;
}
@media only screen and (max-width: 767.98px) {
.c-table {
font-size: 1rem;
}
}
@media print {
.c-table {
page-break-inside: avoid;
}
}
@media only screen and (max-width: 767.98px) {
.c-table tbody th,
.c-table tbody td {
display: block;
width: 100%;
}
}
.c-table th,
.c-table td {
overflow-wrap: break-word;
}
.c-table.--style-a thead {
border-top: 1px solid var(--color-main);
border-right: 1px solid var(--color-main);
border-left: 1px solid var(--color-main);
}
.c-table.--style-a thead th {
padding: .4em 1.4em;
border-bottom: 1px solid var(--color-main);
background-color: var(--color-main);
color: #fff;
text-align: center;
font-weight: 500;
}
.c-table.--style-a thead th:not(:last-of-type) {
border-right: 1px solid color-mix(in srgb, var(--color-main), black 10%);
}
.c-table.--style-a tbody {
border-top: 1px solid #e8eaeb;
border-right: 1px solid #e8eaeb;
border-left: 1px solid #e8eaeb;
}
.c-table.--style-a tbody th {
border-bottom: 1px solid #e8eaeb;
}
@media print, screen and (min-width: 768px) {
.c-table.--style-a tbody th {
border-right: 1px solid #e8eaeb;
}
}
.c-table.--style-a tbody td {
border-right: 1px solid #e8eaeb;
border-bottom: 1px solid #e8eaeb;
}
@media print, screen and (min-width: 768px) {
.c-table.--style-a th,
.c-table.--style-a td {
padding: .8em 1.4em;
}
}
.c-table.--style-a th {
background-color: var(--color-base);
font-weight: 500;
}
@media only screen and (max-width: 767.98px) {
.c-table.--style-a th {
padding: .3em 1.4em;
text-align: center;
}
}
.c-table.--style-a td {
background-color: #fff;
}
@media only screen and (max-width: 767.98px) {
.c-table.--style-a td {
padding: 1em 1.4em;
}
}
@media only screen and (max-width: 767.98px) {
.c-table.--style-a.--lineup tbody th,
.c-table.--style-a.--lineup tbody td {
display: table-cell;
}
}
.c-table.--style-a.--lineup tbody th {
border-right: 1px solid #e8eaeb;
}
@media only screen and (max-width: 767.98px) {
.c-table.--style-a.--lineup tbody th {
width: 30%;
text-align: left;
}
}
@media only screen and (max-width: 767.98px) {
.c-table.--style-b {
border: 1px solid var(--color-base3);
}
}
.c-table.--style-b tr {
border-bottom: 1px solid var(--color-base3);
}
@media only screen and (max-width: 767.98px) {
.c-table.--style-b tr:not(:last-child) td {
border-bottom: 1px solid var(--color-base3);
}
}
.c-table.--style-b th,
.c-table.--style-b td {
vertical-align: top;
}
@media print, screen and (min-width: 768px) {
.c-table.--style-b th,
.c-table.--style-b td {
padding: 1.7em .4em;
}
}
.c-table.--style-b th {
font-weight: normal;
font-weight: 500;
}
@media only screen and (max-width: 767.98px) {
.c-table.--style-b th {
padding: .3em 1.4em;
border-bottom: 1px solid var(--color-base3);
background-color: var(--color-base3);
text-align: center;
}
}
@media only screen and (max-width: 767.98px) {
.c-table.--style-b td {
padding: 1em 1.4em;
}
}
@media print, screen and (min-width: 768px) {
.c-table.--style-b td {
padding-left: 2em;
}
}
@media print, screen and (min-width: 768px) {
.c-table.--history tbody th {
width: 25%;
}
}
.c-table.--contact {
margin-top: clamp(30px, 4vw, 40px);
}
.c-table.--contact tbody th,
.c-table.--contact tbody td {
position: relative;
}
@media only screen and (max-width: 767.98px) {
.c-table.--contact tbody th,
.c-table.--contact tbody td {
padding-right: .8em;
padding-left: .8em;
}
}
@media print, screen and (min-width: 768px) {
.c-table.--contact tbody th,
.c-table.--contact tbody td {
padding: 1.2em 1em;
}
}
.c-table.--contact tbody th .c-badge,
.c-table.--contact tbody td .c-badge {
position: absolute;
top: 50%;
right: 10px;
transform: translateY(-50%);
}
.c-table.--contact tbody th:has(.c-badge),
.c-table.--contact tbody td:has(.c-badge) {
padding-right: 4em;
}
@media only screen and (max-width: 767.98px) {
.c-table.--contact tbody th {
text-align: left;
}
}
@media print, screen and (min-width: 768px) {
.c-table.--contact tbody th {
width: clamp(220px, 22.6vw, 270px);
}
}
@media only screen and (max-width: 767.98px) {
.c-table.--contact tbody td {
display: block;
}
}
/* バッジ
--------------------------------------------------------- */
.c-badge {
display: inline-block;
padding: .2em .6em;
background-color: var(--color-accent);
color: #fff;
font-weight: normal;
font-size: .625rem;
line-height: 1.4;
}
.c-heading-wrap.--center {
text-align: center;
}
.c-heading {
position: relative;
display: inline-block;
padding-top: .58em;
}
@media only screen and (max-width: 767.98px) {
.c-heading {
margin-bottom: .8em;
font-size: clamp(1.875rem, 1.961vw + 1.434rem, 2.375rem);
}
}
@media print, screen and (min-width: 768px) {
.c-heading {
margin-bottom: .6em;
font-size: clamp(4.75rem, 3.819vw + 2.917rem, 7.5rem);
}
}
.c-heading + * {
margin-top: 0 !important;
}
.c-heading.--align-left .c-heading__en {
left: -.07em;
transform: translateX(0);
}
.c-heading__en {
position: absolute;
top: 0;
left: 50%;
z-index: 1;
color: var(--color-txt-peach);
white-space: nowrap;
letter-spacing: .025em;
font-weight: 400;
font-style: italic;
font-family: var(--font-family-secondary);
line-height: .8;
transform: translateX(-50%);
}
.c-heading__en.--base {
color: var(--color-base);
}
.c-heading__en.--main {
color: var(--color-main);
}
.c-heading__en.--white {
color: #fff;
}
.c-heading__en.--blush {
color: var(--color-txt-blush);
}
.c-heading__title {
position: relative;
z-index: 1;
letter-spacing: .03em;
font-weight: 500;
line-height: 1.8;
}
@media only screen and (max-width: 767.98px) {
.c-heading__title {
font-size: clamp(1.125rem, .49vw + 1.015rem, 1.25rem);
}
}
@media print, screen and (min-width: 768px) {
.c-heading__title {
font-size: clamp(1.625rem, .521vw + 1.375rem, 2rem);
}
}
.c-heading-bar {
margin-bottom: 1.6em;
padding-left: .8em;
border-left: clamp(3px, .4vw, 4px) solid var(--color-sub);
font-weight: bold;
font-size: clamp(1.063rem, .192vw + 1.019rem, 1.188rem);
line-height: 1.5;
}
@media only screen and (max-width: 767.98px) {
.c-heading-bar {
font-size: 1rem;
}
}
.c-heading-sideline {
display: grid;
color: var(--color-sub);
font-size: clamp(1.063rem, .385vw + .976rem, 1.438rem);
line-height: 1.6;
column-gap: 20px;
grid-template-columns: 1fr auto 1fr;
align-items: center;
}
@media only screen and (max-width: 767.98px) {
.c-heading-sideline {
margin-bottom: 1.2em;
}
}
@media print, screen and (min-width: 768px) {
.c-heading-sideline {
margin-bottom: 1.5em;
}
}
.c-heading-sideline::before,
.c-heading-sideline::after {
height: 4px;
min-width: 30px;
border-top: 1px solid currentColor;
border-bottom: 1px solid currentColor;
content: '';
}
/* メインビジュアル
--------------------------------------------------------- */
.c-hero {
position: relative;
z-index: 0;
overflow: hidden;
}
@media screen and (max-width: 991.98px) {
.c-hero {
display: grid;
height: calc(100vh - var(--header-height-mobile));
height: calc(100svh - var(--header-height-mobile));
grid-template-rows: minmax(0, 1fr) auto;
grid-template-areas: 'img' 'content';
}
}
@media screen and (max-width: 991.98px) {
.c-hero__content {
padding-right: 4vw;
padding-bottom: clamp(20px, 3.7vw, 30px);
padding-left: 4vw;
grid-area: content;
}
}
@media print, screen and (min-width: 992px) {
.c-hero__content {
position: absolute;
top: 0;
bottom: 0;
left: 0;
z-index: 2;
display: flex;
flex-direction: column;
justify-content: space-between;
}
}
@media screen and (max-width: 991.98px) {
.c-hero__logo {
padding-top: clamp(30px, 5.2vw, 40px);
text-align: center;
}
}
@media print, screen and (min-width: 992px) {
.c-hero__logo {
display: flex;
width: 31.2vw;
height: 100%;
padding-top: clamp(20px, 2.4vw, 50px);
align-items: center;
justify-content: center;
}
}
.c-hero__logo img {
height: auto;
}
@media screen and (max-width: 991.98px) {
.c-hero__logo img {
width: clamp(60px, 10.4vw, 80px);
}
}
@media print, screen and (min-width: 992px) {
.c-hero__logo img {
width: clamp(110px, 9.2vw, 158px);
}
}
.c-hero__copy {
position: relative;
background-color: rgba(255, 255, 255, .8);
}
@media screen and (max-width: 991.98px) {
.c-hero__copy {
display: flex;
margin-top: clamp(15px, 2.6vw, 20px);
padding: 6vw 4vw;
align-items: center;
justify-content: center;
}
}
@media print, screen and (min-width: 992px) {
.c-hero__copy {
margin-top: 3vh;
margin-bottom: clamp(30px, 3.1vw, 60px);
margin-left: clamp(30px, 3.1vw, 60px);
padding-top: clamp(30px, 3.4vw, 70px);
padding-right: clamp(40px, 4.1vw, 80px);
padding-bottom: clamp(30px, 3.4vw, 70px);
padding-left: clamp(40px, 4.1vw, 80px);
}
}
.c-hero__copy-txt {
color: #0e0f0f;
letter-spacing: .025em;
font-weight: 500;
font-family: var(--font-family-primary);
line-height: 1.6;
}
@media screen and (max-width: 991.98px) {
.c-hero__copy-txt {
font-size: clamp(1.063rem, .316vw + .991rem, 1.188rem);
}
}
@media print, screen and (min-width: 992px) {
.c-hero__copy-txt {
font-size: clamp(1.75rem, 1.293vw + .948rem, 2.5rem);
}
}
.c-hero__deco {
position: absolute;
z-index: 0;
background-color: rgba(255, 255, 255, .8);
aspect-ratio: 1;
}
.c-hero__deco.--middle-lg {
top: calc(clamp(60px, 8.3vw, 129px) * -1);
}
@media screen and (max-width: 991.98px) {
.c-hero__deco.--middle-lg {
right: clamp(20px, 4vw, 34px);
left: auto;
width: clamp(40px, 6.7vw, 50px);
}
}
@media print, screen and (min-width: 992px) {
.c-hero__deco.--middle-lg {
left: clamp(210px, 22.7vw, 450px);
width: clamp(44px, 4.1vw, 76px);
}
}
.c-hero__deco.--middle-sm {
top: calc(clamp(40px, 4.9vw, 72px) * -1);
}
@media screen and (max-width: 991.98px) {
.c-hero__deco.--middle-sm {
right: clamp(50px, 8.1vw, 60px);
left: auto;
width: clamp(30px, 5.2vw, 40px);
}
}
@media print, screen and (min-width: 992px) {
.c-hero__deco.--middle-sm {
left: clamp(190px, 21.3vw, 430px);
width: clamp(22px, 2.2vw, 42px);
}
}
.c-hero__deco.--bottom-left {
top: -14px;
}
@media screen and (max-width: 991.98px) {
.c-hero__deco.--bottom-left {
left: -5%;
width: clamp(40px, 6.7vw, 50px);
}
}
@media print, screen and (min-width: 992px) {
.c-hero__deco.--bottom-left {
left: calc(clamp(50px, 4.1vw, 70px) * -1);
width: clamp(50px, 5.3vw, 103px);
}
}
.c-hero__img {
position: relative;
z-index: 1;
overflow: hidden;
grid-area: img;
}
@media screen and (max-width: 991.98px) {
.c-hero__img {
position: relative;
overflow: hidden;
min-height: 0;
grid-area: img;
}
}
@media print, screen and (min-width: 992px) {
.c-hero__img {
width: 68.1vw;
margin-left: auto;
}
}
@media screen and (max-width: 991.98px) {
.c-hero .swiper {
position: absolute;
inset: 0;
}
}
@media screen and (max-width: 991.98px) {
.c-hero .swiper,
.c-hero .swiper-wrapper,
.c-hero .swiper-slide {
height: 100% !important;
}
}
.c-hero .swiper-slide img {
width: 100%;
height: 100%;
object-fit: cover;
}
@media print, screen and (min-width: 768px) {
.c-hero .swiper-slide img {
height: calc(100vh - var(--header-height-desktop));
}
}
.c-hero .swiper-slide img.img2 {
object-position: left center;
}
.c-hero .swiper-slide img.img3 {
object-position: right 90%;
}
.c-hero .swiper-fade .swiper-slide {
transition-property: opacity, transform !important;
pointer-events: none;
}
.c-hero .swiper-fade .swiper-slide-active {
pointer-events: auto;
}
/* 背景画像固定
--------------------------------------------------------- */
.c-fixed-bg {
height: clamp(250px, 36.6vw, 584px);
-webkit-clip-path: inset(0);
clip-path: inset(0);
}
.c-fixed-bg::before {
position: fixed;
top: 0;
left: 0;
z-index: -1;
width: 100%;
height: 100vh;
background-position: center top;
background-size: cover;
background-repeat: no-repeat;
content: '';
}
@media only screen and (max-width: 767.98px) {
.c-fixed-bg::before {
background-image: url('../images/common/fixed-img-sp.jpg');
}
}
@media print, screen and (min-width: 768px) {
.c-fixed-bg::before {
background-image: url('../images/common/fixed-img-pc.jpg');
}
}
/* フェードエッジ
--------------------------------------------------------- */
.c-blur-edge {
display: block;
overflow: hidden;
}
.c-blur-edge img {
display: block;
width: 100%;
-webkit-mask: linear-gradient(to right, transparent 0, #000 20%, #000 80%, transparent 100%), linear-gradient(to bottom, transparent 0, #000 20%, #000 80%, transparent 100%);
mask: linear-gradient(to right, transparent 0, #000 20%, #000 80%, transparent 100%), linear-gradient(to bottom, transparent 0, #000 20%, #000 80%, transparent 100%);
-webkit-mask-composite: source-in, xor;
mask-composite: intersect;
}
/* ボタン
--------------------------------------------------------- */
.c-btn {
position: relative;
z-index: 0;
display: inline-block;
overflow: hidden;
outline: none !important;
background-color: transparent;
color: inherit;
text-align: center;
text-decoration: none;
font-size: inherit;
line-height: 1.5;
cursor: pointer;
transition: background-color .5s, color .5s;
-webkit-appearance: none;
appearance: none;
}
.c-btn.--primary {
display: inline-flex;
border-radius: 999px;
background: var(--color-main);
background-color: var(--color-main);
box-shadow: 2px 3px 0 0 var(--color-shadow3);
color: #fff;
font-weight: 400;
align-items: center;
justify-content: start;
}
@media only screen and (max-width: 767.98px) {
.c-btn.--primary {
padding: .9em clamp(45px, 9.3vw, 60px) .9em 1.7em;
font-size: 1rem;
}
}
@media print, screen and (min-width: 768px) {
.c-btn.--primary {
padding: .9em clamp(60px, 5.6vw, 90px) .9em 3.2em;
font-size: 1rem;
}
}
.c-btn.--primary .c-btn__text {
position: relative;
z-index: 2;
transition: transform .5s cubic-bezier(.4, 0, .2, 1);
}
.c-btn.--primary .c-btn__arrow {
position: absolute;
top: 0;
bottom: 0;
left: 20px;
height: .74em;
margin: auto;
padding-left: .5em;
opacity: 0;
transition: all .5s cubic-bezier(.4, 0, .2, 1);
transform: translateX(-20px);
}
.c-btn.--primary .c-btn__arrow img {
width: 100%;
height: 100%;
object-fit: contain;
}
.c-btn.--primary .c-btn__circle {
position: absolute;
top: .05em;
right: clamp(18px, 2.1vw, 29px);
bottom: 0;
margin: auto;
border-radius: 50%;
background: #fff;
transition: transform .5s cubic-bezier(.4, 0, .2, 1), opacity .5s cubic-bezier(.4, 0, .2, 1);
}
@media only screen and (max-width: 767.98px) {
.c-btn.--primary .c-btn__circle {
width: 8px;
height: 8px;
}
}
@media print, screen and (min-width: 768px) {
.c-btn.--primary .c-btn__circle {
width: clamp(9px, .7vw, 10px);
height: clamp(9px, .7vw, 10px);
}
}
@media print, screen and (min-width: 768px) {
.c-btn.--primary:is(:hover, :active, :focus) .c-btn__circle {
opacity: 0;
transform: scale(0);
}
}
@media print, screen and (min-width: 768px) {
.c-btn.--primary:is(:hover, :active, :focus) .c-btn__text {
transform: translateX(20px);
}
}
@media print, screen and (min-width: 768px) {
.c-btn.--primary:is(:hover, :active, :focus) .c-btn__arrow {
opacity: 1;
transform: translateX(0);
}
}
.c-btn.--secondary {
position: relative;
padding: .4em 2.3em .4em 1.5em;
border-radius: 999px;
background-color: var(--color-main);
box-shadow: 2px 3px 0 0 var(--color-shadow3);
color: #fff;
text-align: left;
line-height: 1.2;
transition: opacity .5s;
}
@media only screen and (max-width: 767.98px) {
.c-btn.--secondary {
font-size: clamp(.875rem, .49vw + .765rem, 1rem);
}
}
@media print, screen and (min-width: 768px) {
.c-btn.--secondary {
font-size: clamp(.938rem, .087vw + .896rem, 1rem);
}
}
.c-btn.--secondary::before {
position: absolute;
top: 0;
right: clamp(13px, 1.6vw, 23px);
bottom: 0;
height: .6em;
margin: auto;
background-color: #fff;
content: '';
transition: background-color .2s;
-webkit-mask-image: var(--icon-arrow2);
mask-image: var(--icon-arrow2);
-webkit-mask-size: 100% 100%;
mask-size: 100% 100%;
aspect-ratio: 6/11;
}
@media print {
.c-btn.--secondary::before {
-webkit-print-color-adjust: exact;
}
}
.c-btn.--secondary:is(:hover, :active, :focus) {
opacity: .6;
}
.c-btn.--back {
background-color: #aaa;
}
.c-btn.--back:is(:hover, :active, :focus) {
background-color: #858585;
}
/* ページトップ
--------------------------------------------------------- */
.c-pagetop {
position: fixed;
z-index: 50;
font-size: 0;
opacity: 0;
cursor: pointer;
transition: opacity .5s;
}
@media only screen and (max-width: 767.98px) {
.c-pagetop {
right: 10px;
bottom: 10px;
}
}
@media print, screen and (min-width: 768px) {
.c-pagetop {
right: clamp(20px, 2.2vw, 40px);
bottom: clamp(20px, 2.2vw, 40px);
}
}
@media print {
.c-pagetop {
display: none;
}
}
.c-pagetop.is-show {
opacity: 1;
}
.c-pagetop img {
width: 44px;
}
/* スクロールアニメーション
--------------------------------------------------------- */
[data-io] {
opacity: 0;
}
@media print {
[data-io] {
opacity: 1;
transition: none;
transform: none;
animation: none;
}
}
@media (prefers-reduced-motion: reduce) {
[data-io] {
opacity: 1 !important;
transition: none !important;
transform: none !important;
animation: none !important;
}
}
[data-io=slide-in-bottom] {
transition: opacity .9s, transform .9s;
transform: translateY(60px);
}
[data-io=slide-in-bottom].is-appear {
opacity: 1;
transform: none;
}
[data-io=fade-in].is-appear {
animation-name: io-fade-in;
animation-duration: 2s;
animation-timing-function: cubic-bezier(.33, 1, .68, 1);
animation-iteration-count: 1;
animation-fill-mode: forwards;
}
@keyframes io-fade-in {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
[data-io=blur-in] {
filter: blur(12px);
transition: opacity .9s, filter .9s;
}
[data-io=blur-in].is-appear {
opacity: 1;
filter: blur(0);
}
/* ローディング
--------------------------------------------------------- */
.c-loading {
position: absolute;
z-index: 9999;
margin: auto;
background-color: var(--color-base);
inset: 0;
}
.is-hero-ready .c-loading {
animation: fadeOut .8s linear forwards;
pointer-events: none;
}
@keyframes fadeOut {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
/* 埋め込みコンポーネント
--------------------------------------------------------- */
.c-embed {
font-size: 0;
}
.c-embed iframe,
.c-embed video {
width: 100% !important;
height: 100% !important;
}
@media only screen and (max-width: 767.98px) {
.c-embed.--gmap iframe {
aspect-ratio: 1;
}
}
@media print, screen and (min-width: 768px) {
.c-embed.--gmap iframe {
aspect-ratio: 16/9;
}
}
@media screen and (min-width: 1400px) {
.c-embed.--gmap iframe {
aspect-ratio: 5/2;
}
}
/* ========================================================================
/*
/* Project
/*
========================================================================= */
/* ヘッダー
--------------------------------------------------------- */
.p-header {
flex: 1;
}
@media screen and (max-width: 991.98px) {
.p-header {
display: flex;
padding-left: 2.5vw;
align-items: center;
}
}
@media print, screen and (min-width: 992px) {
.p-header {
display: grid;
column-gap: 2%;
grid-template: 'logo util'/auto 1fr;
align-items: center;
}
}
.p-header__logo {
grid-area: logo;
}
@media print, screen and (min-width: 992px) {
.p-header__logo {
margin-top: .5em;
margin-left: clamp(20px, 2.1vw, 40px);
}
}
.p-header__logo a {
display: block;
color: var(--color-txt);
}
@media screen and (max-width: 991.98px) {
.p-header__logo a {
display: flex;
align-items: center;
gap: clamp(8px, 1.6vw, 14px);
}
}
.p-header__logo-typo {
font-size: 0;
}
@media screen and (max-width: 991.98px) {
.p-header__logo-typo img {
width: auto;
height: clamp(17px, 3vw, 24px);
}
}
@media print, screen and (min-width: 992px) {
.p-header__logo-typo img {
width: clamp(220px, 18.6vw, 323px);
height: auto;
}
}
.p-header__logo-en {
margin-top: .2em;
color: var(--color-txt3);
font-family: var(--font-family-secondary);
}
@media screen and (max-width: 991.98px) {
.p-header__logo-en {
font-size: clamp(.625rem, .475vw + .518rem, .813rem);
}
}
@media print, screen and (min-width: 992px) {
.p-header__logo-en {
letter-spacing: .1em;
font-size: clamp(.813rem, .323vw + .612rem, 1rem);
}
}
.p-header__util {
grid-area: util;
}
@media print, screen and (min-width: 992px) {
.p-header__util {
align-self: stretch;
}
}
@media print, screen and (min-width: 992px) {
.p-header__block {
display: grid;
width: 68.1vw;
margin-left: auto;
padding-right: clamp(20px, 2.1vw, 40px);
column-gap: clamp(20px, 2.1vw, 30px);
grid-template: 'nav tel'/1fr auto;
align-items: center;
}
}
@media screen and (min-width: 1400px) {
.p-header__block {
column-gap: clamp(40px, 3vw, 60px);
}
}
@media screen and (min-width: 1400px) {
.p-header__block.--home {
column-gap: clamp(50px, 4.5vw, 100px);
}
}
@media screen and (min-width: 1600px) {
.p-header__block.--home {
column-gap: clamp(100px, 6vw, 112px);
}
}
.p-header__nav {
grid-area: nav;
}
.p-header__tel {
padding: .9em 1em;
border-radius: clamp(10px, 1.1vw, 16px);
background-color: var(--color-main);
color: #fff;
grid-area: tel;
}
@media screen and (max-width: 991.98px) {
.p-header__tel {
margin-top: 40px;
}
}
@media print, screen and (min-width: 992px) {
.p-header__tel {
min-width: clamp(170px, 14.5vw, 253px);
}
}
.p-header__tel-label {
text-align: center;
letter-spacing: .03em;
line-height: 1.5;
}
@media screen and (max-width: 991.98px) {
.p-header__tel-label {
font-size: clamp(.813rem, .158vw + .777rem, .875rem);
}
}
@media print, screen and (min-width: 992px) {
.p-header__tel-label {
font-size: clamp(.813rem, .108vw + .746rem, .875rem);
}
}
.p-header__tel-num {
display: flex;
letter-spacing: .03em;
font-size: 24px;
font-family: var(--font-family-secondary);
line-height: 1.4;
align-items: center;
justify-content: center;
}
@media screen and (max-width: 991.98px) {
.p-header__tel-num {
font-size: clamp(1.375rem, .633vw + 1.233rem, 1.625rem);
}
}
@media print, screen and (min-width: 992px) {
.p-header__tel-num {
font-size: clamp(1.063rem, .754vw + .595rem, 1.5rem);
}
}
.p-header__tel-num::before {
position: relative;
top: .03em;
display: inline-block;
height: .835em;
margin-right: .42em;
background-color: #fff;
content: '';
transition: background-color .5s;
-webkit-mask-image: var(--icon-phone);
mask-image: var(--icon-phone);
-webkit-mask-size: 100% 100%;
mask-size: 100% 100%;
aspect-ratio: 1;
}
@media print {
.p-header__tel-num::before {
-webkit-print-color-adjust: exact;
}
}
.p-header__deco {
position: absolute;
z-index: -1;
background-color: rgba(255, 255, 255, .8);
aspect-ratio: 1;
}
@media screen and (max-width: 991.98px) {
.p-header__deco {
display: none;
}
}
@media screen and (max-width: 991.98px) {
.p-header__deco.--lg {
top: 0;
width: clamp(60px, 9.6vw, 70px);
}
}
@media print, screen and (min-width: 992px) {
.p-header__deco.--lg {
top: 0;
left: clamp(4px, .3vw, 4px);
width: clamp(120px, 10.4vw, 182px);
}
}
@media screen and (max-width: 991.98px) {
.p-header__deco.--sm {
top: clamp(50px, 8.1vw, 60px);
left: 0;
width: clamp(25px, 4.4vw, 35px);
}
}
@media print, screen and (min-width: 992px) {
.p-header__deco.--sm {
top: clamp(20px, 1.8vw, 31px);
left: clamp(96px, 8.2vw, 142px);
width: clamp(60px, 5.5vw, 100px);
}
}
/* フッター
--------------------------------------------------------- */
.p-footer {
margin-top: clamp(60px, 11.6vw, 205px);
padding-bottom: clamp(60px, 5.2vw, 59px);
}
.p-footer__inner {
position: relative;
width: min(92%, 1470px);
margin-inline: auto;
}
.p-footer__inner::before {
position: absolute;
left: -35%;
height: clamp(30px, 3.6vw, 52px);
background: url('../images/common/deco-ribbon01.svg') left top/100% 100% no-repeat;
content: '';
aspect-ratio: 842/52;
}
@media only screen and (max-width: 767.98px) {
.p-footer__inner::before {
top: -3em;
left: auto;
width: 100%;
}
}
@media print, screen and (min-width: 768px) {
.p-footer__inner::before {
top: calc(clamp(40px, 6.6vw, 110px) * -1);
left: calc(clamp(70px, 11.6vw, 195px) * -1);
}
}
@media screen and (min-width: 1200px) {
.p-footer__container {
display: grid;
column-gap: 4%;
grid-template: 'content util'/auto 1fr;
align-items: start;
}
}
.p-footer__content {
grid-area: content;
}
@media screen and (min-width: 1200px) {
.p-footer__content {
width: min(47vw, 660px);
}
}
.p-footer__util {
grid-area: util;
}
@media screen and (min-width: 576px) and (max-width: 1199.98px) {
.p-footer__util {
display: grid;
column-gap: 4%;
grid-template: 'nav logo'/auto 1fr;
}
}
@media screen and (max-width: 1199.98px) {
.p-footer__util {
margin-top: clamp(40px, 7.1vw, 70px);
}
}
.p-footer__nav {
display: grid;
}
@media only screen and (max-width: 767.98px) {
.p-footer__nav {
margin-bottom: 2.2em;
grid-template-columns: auto auto auto;
justify-content: center;
gap: clamp(10px, 2.2vw, 15px);
}
}
@media print, screen and (min-width: 768px) {
.p-footer__nav {
column-gap: clamp(30px, 3vw, 50px);
grid-template: 'cols menu'/auto auto;
justify-content: center;
}
}
@media screen and (min-width: 1200px) {
.p-footer__nav {
margin-top: clamp(90px, 6.4vw, 110px);
justify-content: end;
}
}
@media print, screen and (min-width: 768px) {
.p-footer__nav-cols {
display: flex;
column-gap: clamp(30px, 3vw, 50px);
}
}
@media only screen and (max-width: 767.98px) {
.p-footer__nav-col + .p-footer__nav-col {
margin-top: .7em;
}
}
.p-footer__menu {
position: relative;
}
@media only screen and (max-width: 767.98px) {
.p-footer__menu {
padding-left: 20px;
}
}
@media print, screen and (min-width: 768px) {
.p-footer__menu {
padding-left: 15px;
}
}
.p-footer__menu .p-footer__nav-subitems {
position: relative;
padding-left: .7em;
}
.p-footer__menu .p-footer__nav-subitems::before {
position: absolute;
top: .2em;
bottom: .2em;
left: 0;
width: 2px;
background-color: #fed9c0;
content: '';
}
.p-footer__nav-item + .p-footer__nav-item {
margin-top: .7em;
}
.p-footer__nav-title {
margin-bottom: .2em;
}
.p-footer__nav-subitem + .p-footer__nav-subitem {
margin-top: .15em;
}
.p-footer__nav-item,
.p-footer__nav-subitem,
.p-footer__nav-title {
color: #0e0f0f;
letter-spacing: .03em;
font-size: clamp(.938rem, .064vw + .923rem, 1rem);
line-height: 1.6;
}
.p-footer__nav a {
color: inherit;
text-decoration: none;
}
.p-footer__nav a:is(:hover, :active, :focus) {
color: var(--color-main);
}
.p-footer__logo {
grid-area: logo;
}
@media only screen and (max-width: 575.98px) {
.p-footer__logo {
text-align: center;
}
}
@media print, screen and (min-width: 576px) {
.p-footer__logo {
text-align: right;
}
}
@media screen and (min-width: 1200px) {
.p-footer__logo {
margin-top: clamp(50px, 5.9vw, 85px);
}
}
.p-footer__logo img {
width: clamp(80px, 8.5vw, 114px);
height: auto;
}
.p-footer__copyright {
margin-top: 25px;
color: #bdbcbb;
letter-spacing: .03em;
font-size: clamp(.625rem, .128vw + .596rem, .75rem);
line-height: 1.3;
}
@media only screen and (max-width: 767.98px) {
.p-footer__copyright {
text-align: center;
}
}
@media print, screen and (min-width: 768px) {
.p-footer__copyright {
text-align: right;
}
}
/* TOP リード
--------------------------------------------------------- */
.p-top-lead {
position: relative;
z-index: 0;
}
@media only screen and (max-width: 767.98px) {
.p-top-lead {
padding-top: 30vw;
}
}
.p-top-lead::before {
position: absolute;
top: 0;
right: 0;
bottom: clamp(100px, 11.1vw, 198px);
left: 0;
z-index: -1;
background: url('../images/top/bg-lead.jpg') center top/cover no-repeat;
content: '';
}
@media only screen and (max-width: 767.98px) {
.p-top-lead::before {
bottom: auto;
height: 80vw;
background-position: 20% bottom;
}
}
.p-top-lead::after {
position: absolute;
right: 0;
bottom: calc(clamp(100px, 11.1vw, 198px) - 1px);
left: 0;
z-index: -1;
margin: auto;
background-color: var(--color-base);
content: '';
-webkit-mask-size: 100% 100%;
mask-size: 100% 100%;
-webkit-mask-image: var(--bg-wave);
mask-image: var(--bg-wave);
aspect-ratio: 1920/100;
}
@media print {
.p-top-lead::after {
-webkit-print-color-adjust: exact;
}
}
.p-top-lead__body {
position: relative;
z-index: 1;
}
@media print, screen and (min-width: 768px) {
.p-top-lead__body {
display: grid;
column-gap: 10%;
grid-template: 'lead panel'/auto auto;
align-items: start;
justify-content: space-between;
}
}
.p-top-lead__lead {
grid-area: lead;
gap: clamp(12px, 1.2vw, 16px);
}
@media only screen and (max-width: 767.98px) {
.p-top-lead__lead {
display: inline-flex;
flex-direction: column-reverse;
margin-right: 4vw;
margin-left: 4vw;
align-items: flex-start;
}
}
@media print, screen and (min-width: 768px) {
.p-top-lead__lead {
display: flex;
margin-top: clamp(40px, 3.7vw, 60px);
margin-left: clamp(80px, 9.4vw, 174px);
align-items: flex-start;
}
}
.p-top-lead__lead-item {
border-radius: 999px;
background-color: #fff;
color: var(--color-txt2);
letter-spacing: .03em;
font-weight: 500;
line-height: 2;
}
@media only screen and (max-width: 767.98px) {
.p-top-lead__lead-item {
padding: .5em 1.3em;
text-align: center;
font-size: clamp(1.063rem, .49vw + .952rem, 1.188rem);
}
}
@media print, screen and (min-width: 768px) {
.p-top-lead__lead-item {
padding: 1.4em .4em 1.2em;
font-size: clamp(1.25rem, 1.042vw + .75rem, 2rem);
writing-mode: vertical-rl;
}
}
@media only screen and (max-width: 767.98px) {
.p-top-lead__lead-item.--waiting {
margin-left: clamp(30px, 6.2vw, 40px);
}
}
@media print, screen and (min-width: 768px) {
.p-top-lead__lead-item.--waiting {
margin-top: clamp(50px, 5.2vw, 90px);
}
}
.p-top-lead__panel {
position: relative;
z-index: 0;
grid-area: panel;
}
@media only screen and (max-width: 767.98px) {
.p-top-lead__panel {
margin-top: clamp(50px, 9.8vw, 60px);
margin-right: 4vw;
margin-left: 4vw;
padding: clamp(28px, 6vw, 40px) clamp(18px, 3.7vw, 24px) clamp(36px, 7.4vw, 48px);
background-color: rgba(255, 255, 255, .9);
}
}
@media print, screen and (min-width: 768px) {
.p-top-lead__panel {
margin-top: clamp(140px, 15.4vw, 275px);
padding: clamp(44px, 4.4vw, 75px) clamp(44px, 8vw, 170px) clamp(60px, 6.8vw, 124px) clamp(44px, 8.3vw, 180px);
background-color: rgba(255, 255, 255, .8);
}
}
.p-top-lead__title {
position: relative;
margin-bottom: 1em;
padding-bottom: clamp(40px, 3.7vw, 60px);
letter-spacing: .03em;
font-weight: 500;
font-size: clamp(1.25rem, 1.282vw + .962rem, 2.5rem);
line-height: 1.6;
}
.p-top-lead__title::before {
position: absolute;
right: 0;
bottom: 0;
height: clamp(30px, 3.6vw, 53px);
background: url('../images/common/deco-ribbon01.svg') left top/100% 100% no-repeat;
content: '';
aspect-ratio: 865/53;
}
@media only screen and (max-width: 767.98px) {
.p-top-lead__title::before {
left: 0;
width: 100%;
}
}
@media print, screen and (min-width: 768px) {
.p-top-lead__title::before {
left: -10%;
}
}
@media print, screen and (min-width: 992px) {
.p-top-lead__title::before {
left: -20%;
}
}
@media screen and (min-width: 1200px) {
.p-top-lead__title::before {
left: -35%;
}
}
.p-top-lead__txt {
letter-spacing: .03em;
font-size: clamp(.938rem, .192vw + .894rem, 1.125rem);
line-height: 1.9;
}
.p-top-lead__parts {
position: absolute;
z-index: -1;
background-color: rgba(255, 255, 255, .8);
}
.p-top-lead__parts.--top-large {
top: calc(clamp(100px, 9.9vw, 126px) * -1);
right: 0;
width: clamp(60px, 6vw, 76px);
height: clamp(60px, 6vw, 76px);
}
.p-top-lead__parts.--top-small {
top: calc(clamp(50px, 5.2vw, 69px) * -1);
right: clamp(40px, 4.3vw, 57px);
width: clamp(30px, 3.1vw, 40px);
height: clamp(30px, 3.1vw, 40px);
}
.p-top-lead__parts.--bottom-small {
bottom: clamp(80px, 10.9vw, 169px);
left: calc(clamp(50px, 6.4vw, 97px) * -1);
width: clamp(26px, 3.3vw, 50px);
height: clamp(26px, 3.3vw, 50px);
}
.p-top-lead__parts.--bottom-large {
bottom: calc(clamp(20px, 2.9vw, 47px) * -1);
left: calc(clamp(20px, 2.9vw, 47px) * -1);
width: clamp(50px, 6.6vw, 100px);
height: clamp(50px, 6.6vw, 100px);
}
/* TOP 初めて受診される方へ
--------------------------------------------------------- */
.p-top-first {
position: relative;
margin-top: clamp(60px, 9.5vw, 157px);
}
.p-top-first__inner {
position: relative;
width: min(92%, 1470px);
margin-right: auto;
margin-left: auto;
}
@media print, screen and (min-width: 992px) {
.p-top-first__inner {
display: grid;
column-gap: clamp(50px, 4.8vw, 90px);
grid-template: 'img content'/clamp(400px, 38.5vw, 720px) 1fr;
align-items: flex-start;
}
}
.p-top-first__img {
position: relative;
z-index: 0;
text-align: center;
grid-area: img;
}
@media screen and (max-width: 991.98px) {
.p-top-first__img {
max-width: 600px;
margin-right: auto;
margin-left: auto;
}
}
.p-top-first__img img {
width: 100%;
max-width: 100%;
aspect-ratio: 4/3;
object-fit: cover;
}
.p-top-first__part {
position: absolute;
z-index: 0;
background-color: rgba(255, 255, 255, .8);
}
.p-top-first__part.--left-middle {
top: 60%;
left: calc(clamp(12px, 1.7vw, 27px) * -1);
width: clamp(24px, 2.4vw, 40px);
aspect-ratio: 1/1;
}
.p-top-first__part.--left-bottom-large {
bottom: calc(clamp(20px, 3vw, 48px) * -1);
left: calc(clamp(50px, 8.1vw, 135px) * -1);
width: clamp(48px, 4.6vw, 76px);
aspect-ratio: 1/1;
}
.p-top-first__part.--left-bottom-small {
bottom: calc(clamp(30px, 4.3vw, 67px) * -1);
left: calc(clamp(60px, 9.4vw, 155px) * -1);
width: clamp(24px, 2.4vw, 40px);
aspect-ratio: 1/1;
}
.p-top-first__content {
position: relative;
grid-area: content;
}
@media screen and (max-width: 991.98px) {
.p-top-first__content {
margin-top: clamp(50px, 8.9vw, 70px);
}
}
@media screen and (max-width: 991.98px) {
.p-top-first__heading {
text-align: center;
}
}
@media print, screen and (min-width: 768px) {
.p-top-first__heading .c-heading {
margin-bottom: clamp(25px, 2.2vw, 35px);
}
}
.p-top-first__txt {
letter-spacing: .03em;
font-weight: 400;
line-height: 1.8;
}
@media print, screen and (min-width: 768px) {
.p-top-first__txt {
font-size: clamp(.938rem, .087vw + .896rem, 1rem);
}
}
.p-top-first__btn {
margin-top: clamp(40px, 4.4vw, 60px);
}
@media screen and (max-width: 991.98px) {
.p-top-first__btn {
text-align: center;
}
}
/* TOP 治療内容について
--------------------------------------------------------- */
.p-top-treatment {
margin-top: clamp(60px, 10.9vw, 188px);
}
.p-top-treatment__inner {
border-radius: clamp(10px, 1.8vw, 32px);
background-color: #fff;
box-shadow: 2px 3px 0 0 var(--color-shadow);
}
@media only screen and (max-width: 767.98px) {
.p-top-treatment__inner {
margin-right: 4vw;
margin-left: 4vw;
padding: 7vw 4vw 8vw;
}
}
@media print, screen and (min-width: 768px) {
.p-top-treatment__inner {
width: min(94%, 1800px);
padding-top: clamp(40px, 5.6vw, 110px);
padding-right: clamp(40px, 5.4vw, 105px);
padding-bottom: clamp(50px, 6.3vw, 120px);
padding-left: clamp(40px, 5.4vw, 105px);
margin-inline: auto;
}
}
.p-top-treatment__heading {
text-align: center;
}
@media print, screen and (min-width: 768px) {
.p-top-treatment__heading .c-heading {
margin-bottom: clamp(25px, 2.2vw, 35px);
}
}
@media print, screen and (min-width: 768px) {
.p-top-treatment__heading .c-heading__en {
left: 47%;
}
}
@media print, screen and (min-width: 768px) {
.p-top-treatment__heading .c-heading__title {
left: .1em;
}
}
@media print, screen and (min-width: 768px) {
.p-top-treatment__lead {
text-align: center;
line-height: 1.8;
}
}
.p-top-treatment__items {
display: grid;
margin-top: clamp(40px, 5.7vw, 90px);
}
@media only screen and (max-width: 767.98px) {
.p-top-treatment__items {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: clamp(35px, 7.5vw, 50px) 15px;
}
}
@media print, screen and (min-width: 768px) {
.p-top-treatment__items {
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: clamp(40px, 5.1vw, 50px) clamp(20px, 2.8vw, 30px);
}
}
@media screen and (min-width: 1200px) {
.p-top-treatment__items {
column-gap: clamp(20px, 1.6vw, 30px);
grid-template-columns: repeat(6, 1fr);
}
}
.p-top-treatment__item {
display: flex;
flex-direction: column;
}
@media print, screen and (min-width: 768px) {
.p-top-treatment__item {
max-width: 240px;
}
}
.p-top-treatment__item a {
display: flex;
flex-direction: column;
flex-grow: 1;
}
.p-top-treatment__item a:is(:hover, :focus-within) .p-top-treatment__icon img {
transform: scale(1.1);
}
.p-top-treatment__item a:is(:hover, :focus-within) .p-top-treatment__btn .c-btn {
opacity: .6;
}
.p-top-treatment__item.--general .p-top-treatment__icon img {
width: 46.4%;
}
.p-top-treatment__item.--orthodontics .p-top-treatment__icon img {
width: 49.5%;
}
.p-top-treatment__item.--esthetic .p-top-treatment__icon img {
width: 51%;
}
.p-top-treatment__item.--whitening .p-top-treatment__icon img {
width: 38%;
}
.p-top-treatment__item.--dentures .p-top-treatment__icon img {
width: 57%;
margin-top: .2em;
}
.p-top-treatment__item.--cosmetic .p-top-treatment__icon img {
width: 74%;
}
.p-top-treatment__icon {
display: flex;
overflow: hidden;
width: 100%;
border-radius: 50%;
background: linear-gradient(150deg, #fffaf6 20%, #ffead5 80%);
align-items: center;
justify-content: center;
aspect-ratio: 1;
}
.p-top-treatment__icon img {
height: auto;
max-width: 100%;
transition: transform .5s;
}
.p-top-treatment__btn {
display: flex;
flex-grow: 1;
align-items: center;
}
@media only screen and (max-width: 767.98px) {
.p-top-treatment__btn {
margin-top: 1em;
}
}
@media print, screen and (min-width: 768px) {
.p-top-treatment__btn {
margin-top: 20px;
}
}
.p-top-treatment__btn .c-btn {
width: 100%;
}
@media screen and (min-width: 1200px) {
.p-top-treatment__btn .c-btn {
font-size: clamp(.813rem, .417vw + .5rem, 1rem);
}
}
/* TOP 当院について
--------------------------------------------------------- */
.p-top-about {
position: relative;
z-index: 0;
margin-top: clamp(60px, 9.4vw, 155px);
padding-bottom: clamp(40px, 4.6vw, 65px);
}
.p-top-about::after {
position: absolute;
top: calc(100% - 1px);
right: 0;
left: 0;
z-index: -1;
margin: auto;
background-color: var(--color-base);
content: '';
-webkit-mask-size: 100% 100%;
mask-size: 100% 100%;
-webkit-mask-image: var(--bg-wave2);
mask-image: var(--bg-wave2);
aspect-ratio: 1920/100;
}
@media print {
.p-top-about::after {
-webkit-print-color-adjust: exact;
}
}
.p-top-about__inner {
width: min(92%, 1470px);
margin-right: auto;
margin-left: auto;
}
.p-top-about__heading {
position: relative;
display: inline-block;
}
@media print, screen and (min-width: 768px) {
.p-top-about__heading {
margin-bottom: clamp(50px, 4.8vw, 80px);
}
}
.p-top-about__heading-en {
margin: auto;
color: #fff;
white-space: nowrap;
letter-spacing: .025em;
font-weight: 400;
font-style: italic;
font-family: var(--font-family-secondary);
line-height: .8;
}
@media only screen and (max-width: 767.98px) {
.p-top-about__heading-en {
font-size: clamp(2.625rem, 1.471vw + 2.294rem, 3rem);
}
}
@media print, screen and (min-width: 768px) {
.p-top-about__heading-en {
font-size: clamp(4.75rem, 3.819vw + 2.917rem, 7.5rem);
}
}
.p-top-about__heading-title {
position: relative;
left: 1.4em;
margin-top: -.8em;
letter-spacing: .03em;
font-weight: 500;
line-height: 1.8;
}
@media only screen and (max-width: 767.98px) {
.p-top-about__heading-title {
font-size: clamp(1.125rem, .49vw + 1.015rem, 1.25rem);
}
}
@media print, screen and (min-width: 768px) {
.p-top-about__heading-title {
font-size: clamp(1.625rem, .521vw + 1.375rem, 2rem);
}
}
@media screen and (max-width: 991.98px) {
.p-top-about__body {
margin-top: clamp(40px, 8.1vw, 70px);
}
}
@media print, screen and (min-width: 992px) {
.p-top-about__body {
display: grid;
column-gap: clamp(40px, 4.5vw, 90px);
grid-template: 'map content'/clamp(370px, 37.4vw, 720px) auto;
}
}
.p-top-about__content {
position: relative;
grid-area: content;
}
.p-top-about__content::before {
position: absolute;
background: url('../images/common/deco-ribbon02.svg') left top/100% 100% no-repeat;
content: '';
aspect-ratio: 811/66;
}
@media only screen and (max-width: 767.98px) {
.p-top-about__content::before {
right: 0;
bottom: 100%;
left: 0;
}
}
@media print, screen and (min-width: 768px) {
.p-top-about__content::before {
top: -3.9em;
left: -.2em;
height: clamp(30px, 4.2vw, 66px);
}
}
.p-top-about__map {
font-size: 0;
grid-area: map;
}
@media screen and (max-width: 991.98px) {
.p-top-about__map {
margin-top: clamp(50px, 8.1vw, 60px);
}
}
.p-top-about__map iframe {
width: 100%;
height: 100%;
}
@media screen and (max-width: 991.98px) {
.p-top-about__map iframe {
aspect-ratio: 4/3;
}
}
@media only screen and (max-width: 767.98px) {
.p-top-about__map iframe {
aspect-ratio: 1;
}
}
/* TOP LINE / FACILITIES
--------------------------------------------------------- */
.p-top-line-facilities {
padding-top: clamp(90px, 13.5vw, 218px);
padding-bottom: clamp(90px, 10.8vw, 157px);
background-color: var(--color-base2);
}
/* TOP お友達登録のご案内
--------------------------------------------------------- */
.p-top-line {
position: relative;
width: min(92%, 1470px);
margin-inline: auto;
}
.p-top-line__part {
position: absolute;
background-color: #ffdab7;
opacity: .8;
aspect-ratio: 1;
}
.p-top-line__part.--large {
top: -20px;
width: clamp(40px, 4.6vw, 66px);
}
@media only screen and (max-width: 767.98px) {
.p-top-line__part.--large {
right: clamp(20px, 5.3vw, 40px);
}
}
@media print, screen and (min-width: 768px) {
.p-top-line__part.--large {
right: clamp(150px, 16.2vw, 220px);
}
}
.p-top-line__part.--small {
top: calc(clamp(40px, 5.1vw, 76px) * -1);
right: clamp(80px, 16.6vw, 298px);
width: clamp(25px, 2.7vw, 37px);
}
.p-top-line__heading {
text-align: center;
}
@media print, screen and (min-width: 768px) {
.p-top-line__heading .c-heading {
margin-bottom: clamp(25px, 2.2vw, 35px);
}
}
.p-top-line__heading .c-heading__en {
font-feature-settings: 'liga' 1;
}
@media print, screen and (min-width: 768px) {
.p-top-line__heading .c-heading__en {
left: 48%;
}
}
@media print, screen and (min-width: 992px) {
.p-top-line__txt {
text-align: center;
}
}
.p-top-line__note {
margin-top: .7em;
color: var(--color-accent);
font-weight: 500;
font-size: clamp(.813rem, .064vw + .798rem, .875rem);
}
.p-top-line__link {
margin-top: 35px;
}
@media print, screen and (min-width: 768px) {
.p-top-line__link {
display: grid;
column-gap: clamp(30px, 3.3vw, 58px);
justify-content: center;
grid-template: 'qr btn'/auto auto;
align-items: center;
}
}
.p-top-line__qr {
grid-area: qr;
}
@media only screen and (max-width: 767.98px) {
.p-top-line__qr {
text-align: center;
}
}
.p-top-line__qr img {
width: clamp(120px, 12.5vw, 166px);
height: auto;
}
.p-top-line__btn {
grid-area: btn;
}
@media only screen and (max-width: 767.98px) {
.p-top-line__btn {
margin-top: clamp(30px, 6.2vw, 40px);
text-align: center;
}
}
/* TOP 院内設備紹介
--------------------------------------------------------- */
.p-top-facilities {
position: relative;
width: min(92%, 1470px);
margin-top: clamp(60px, 9.6vw, 160px);
margin-inline: auto;
}
@media print, screen and (min-width: 992px) {
.p-top-facilities__inner {
display: grid;
column-gap: clamp(40px, 4.5vw, 90px);
grid-template: 'img content'/clamp(400px, 38.5vw, 720px) 1fr;
align-items: start;
}
}
.p-top-facilities__img {
grid-area: img;
}
@media screen and (max-width: 991.98px) {
.p-top-facilities__img {
margin-top: clamp(50px, 8.9vw, 70px);
}
}
.p-top-facilities__img img {
width: 100%;
aspect-ratio: 723/542;
object-fit: cover;
}
.p-top-facilities__content {
grid-area: content;
}
@media print, screen and (min-width: 992px) {
.p-top-facilities__content {
padding-top: clamp(30px, 2.7vw, 50px);
}
}
@media screen and (max-width: 991.98px) {
.p-top-facilities__heading {
text-align: center;
}
}
@media print, screen and (min-width: 768px) {
.p-top-facilities .c-heading {
margin-bottom: clamp(25px, 2.2vw, 35px);
}
}
@media print, screen and (min-width: 992px) {
.p-top-facilities .c-heading__en {
transform: translateX(-42%);
}
}
.p-top-facilities__btn {
margin-top: clamp(30px, 3.7vw, 55px);
}
@media screen and (max-width: 991.98px) {
.p-top-facilities__btn {
text-align: center;
}
}
.p-top-facilities__part {
position: absolute;
background-color: #ffdab7;
opacity: .8;
aspect-ratio: 1;
}
.p-top-facilities__part.--top-large {
top: calc(clamp(20px, 2.8vw, 44px) * -1);
right: clamp(10px, 1.6vw, 26px);
width: clamp(60px, 6.8vw, 96px);
}
.p-top-facilities__part.--top-small {
top: calc(clamp(70px, 7.9vw, 110px) * -1);
right: calc(clamp(10px, 1.3vw, 20px) * -1);
width: clamp(30px, 3.2vw, 42px);
}
.p-top-facilities__part.--bottom-large {
bottom: calc(clamp(50px, 6.1vw, 88px) * -1);
left: calc(clamp(30px, 3.7vw, 55px) * -1);
width: clamp(70px, 8vw, 112px);
}
.p-top-facilities__part.--bottom-small {
bottom: 0;
left: calc(clamp(50px, 5.9vw, 84px) * -1);
width: clamp(49px, 4.4vw, 51px);
}
/* TOP お知らせ
--------------------------------------------------------- */
.p-top-information {
position: relative;
z-index: 0;
padding-top: clamp(50px, 6.4vw, 95px);
}
.p-top-information::before {
position: absolute;
right: 0;
bottom: calc(100% - 1px);
left: 0;
z-index: -1;
margin: auto;
background-color: var(--color-base);
content: '';
-webkit-mask-size: 100% 100%;
mask-size: 100% 100%;
-webkit-mask-image: var(--bg-wave3);
mask-image: var(--bg-wave3);
aspect-ratio: 1920/100;
}
@media print {
.p-top-information::before {
-webkit-print-color-adjust: exact;
}
}
.p-top-information__inner {
position: relative;
width: min(92%, 1470px);
margin-inline: auto;
}
.p-top-information__inner::after {
position: absolute;
top: calc(clamp(40px, 6vw, 97px) * -1);
right: 0;
left: 0;
height: clamp(30px, 3.2vw, 44px);
margin: auto;
background: url('../images/common/deco-ribbon03.svg') left top/100% 100% no-repeat;
content: '';
aspect-ratio: 658/44;
}
@media only screen and (max-width: 767.98px) {
.p-top-information__inner::after {
width: 80%;
}
}
.p-top-information__heading {
text-align: center;
}
@media print, screen and (min-width: 768px) {
.p-top-information__heading .c-heading {
margin-bottom: clamp(35px, 3.2vw, 50px);
}
}
.p-top-information__panel {
border-radius: clamp(10px, 1.5vw, 24px);
background-color: #fff;
box-shadow: 2px 3px 0 0 var(--color-shadow);
box-shadow: 2px 3px 0 0 var(--color-shadow);
}
@media only screen and (max-width: 767.98px) {
.p-top-information__panel {
padding: 5vw 4vw 6vw;
}
}
@media print, screen and (min-width: 768px) {
.p-top-information__panel {
padding: clamp(30px, 4.5vw, 90px) clamp(50px, 6.5vw, 125px);
}
}
.p-top-information__items {
overflow-y: auto;
width: 100%;
padding-right: 10px;
}
@media only screen and (max-width: 767.98px) {
.p-top-information__items {
max-height: 350px;
}
}
@media print, screen and (min-width: 768px) {
.p-top-information__items {
max-height: 295px;
}
}
@media print {
.p-top-information__items {
max-height: 100%;
}
}
.p-top-information__items::-webkit-scrollbar {
width: 7px;
}
.p-top-information__items::-webkit-scrollbar-track {
background-color: #f2f1f0;
}
.p-top-information__items::-webkit-scrollbar-thumb {
background-color: var(--color-sub);
}
.p-top-information__item {
border-top: 1px solid #dbdbdb;
}
.p-top-information__item:last-child {
border-bottom: 1px solid #dbdbdb;
}
.p-top-information__summary {
position: relative;
cursor: pointer;
}
.p-top-information__summary.is-open .p-top-information__toggle-icon::after {
transform: translate(-50%, -50%) scaleY(0);
}
@media only screen and (max-width: 767.98px) {
.p-top-information__summary-inner {
padding-top: clamp(20px, 4.4vw, 30px);
padding-right: 25px;
padding-bottom: clamp(20px, 4.4vw, 30px);
}
}
@media print, screen and (min-width: 768px) {
.p-top-information__summary-inner {
display: grid;
padding-top: clamp(30px, 2.4vw, 35px);
padding-right: clamp(50px, 4.8vw, 80px);
padding-bottom: clamp(30px, 2.4vw, 35px);
grid-template: 'date title'/clamp(140px, 14.5vw, 250px) auto;
align-items: center;
}
}
.p-top-information__date {
display: flex;
color: var(--color-main);
letter-spacing: .03em;
font-weight: 700;
font-size: clamp(.813rem, .064vw + .798rem, .875rem);
font-family: var(--font-family-secondary);
grid-area: date;
align-items: center;
gap: 1em;
}
@media only screen and (max-width: 767.98px) {
.p-top-information__date {
margin-bottom: .3em;
line-height: 1.5;
}
}
@media print, screen and (min-width: 768px) {
.p-top-information__date {
margin-bottom: auto;
padding-right: clamp(40px, 4.5vw, 80px);
justify-content: space-between;
}
}
.p-top-information__date .icon-new {
color: #f00000;
letter-spacing: .03em;
font-weight: 700;
font-size: clamp(.688rem, .192vw + .644rem, .875rem);
font-family: var(--font-family-secondary);
}
.p-top-information__item-title {
letter-spacing: .03em;
font-weight: 500;
line-height: 1.5;
grid-area: title;
}
@media only screen and (max-width: 767.98px) {
.p-top-information__item-title {
font-size: clamp(1.063rem, .245vw + 1.007rem, 1.125rem);
}
}
@media print, screen and (min-width: 768px) {
.p-top-information__item-title {
font-size: clamp(1rem, .128vw + .971rem, 1.125rem);
}
}
.p-top-information__toggle {
position: absolute;
top: 0;
bottom: 0;
display: flex;
align-items: center;
}
@media only screen and (max-width: 767.98px) {
.p-top-information__toggle {
right: 5px;
}
}
@media print, screen and (min-width: 768px) {
.p-top-information__toggle {
right: clamp(20px, 1.9vw, 30px);
}
}
.p-top-information__toggle-icon {
position: relative;
display: block;
width: clamp(12px, 1.2vw, 16px);
height: clamp(12px, 1.2vw, 16px);
}
.p-top-information__toggle-icon::before,
.p-top-information__toggle-icon::after {
position: absolute;
top: 50%;
left: 50%;
display: block;
width: 100%;
height: 2px;
background-color: var(--color-main);
content: '';
transition: transform .3s;
transform: translate(-50%, -50%);
}
.p-top-information__toggle-icon::after {
transform: translate(-50%, -50%) rotate(90deg);
}
.p-top-information__detail {
display: none;
}
@media only screen and (max-width: 767.98px) {
.p-top-information__detail {
padding-bottom: 1.5em;
}
}
@media print, screen and (min-width: 768px) {
.p-top-information__detail {
margin-right: clamp(50px, 4.8vw, 80px);
margin-left: clamp(140px, 14.5vw, 250px);
padding-bottom: 2.1em;
}
}
.p-top-information__txt::after {
display: block;
clear: both;
content: '';
}
.p-top-information__txt iframe {
max-width: 100%;
}
.p-top-information__imgs {
display: grid;
margin-top: 1.8em;
grid-template-columns: repeat(3, minmax(0, 1fr));
}
@media only screen and (max-width: 767.98px) {
.p-top-information__imgs {
gap: clamp(8px, 1.6vw, 10px);
}
}
@media print, screen and (min-width: 768px) {
.p-top-information__imgs {
max-width: 760px;
gap: clamp(8px, 1.2vw, 20px);
}
}
.p-top-information__img {
cursor: zoom-in;
aspect-ratio: 4/3;
}
@media print, screen and (min-width: 768px) {
.p-top-information__img:hover img {
opacity: .7;
}
}
.p-top-information__img img {
display: block;
width: 100%;
height: 100%;
transition: opacity .5s;
object-fit: cover;
}
.p-top-information__files {
display: flex;
margin-top: clamp(20px, 1.9vw, 24px);
flex-wrap: wrap;
gap: clamp(8px, .9vw, 12px);
}
.p-top-information__file a {
display: inline-flex;
padding: .2em .8em;
border: 1px solid var(--color-main);
border-radius: 4px;
background-color: #fdf0e7;
color: var(--color-main);
text-decoration: none;
font-size: clamp(.75rem, .128vw + .721rem, .875rem);
font-family: var(--font-family-secondary);
line-height: 1.5;
transition: .3s;
align-items: center;
justify-content: center;
}
.p-top-information__file a:hover {
background-color: var(--color-main);
color: #fff;
}
/* TOP お知らせ
--------------------------------------------------------- */
.p-top-calendar {
position: relative;
z-index: 0;
margin-top: clamp(60px, 7.9vw, 120px);
padding-top: clamp(60px, 7.9vw, 120px);
padding-bottom: clamp(60px, 7.9vw, 120px);
background-color: #fbe3cd;
}
.p-top-calendar::after {
position: absolute;
z-index: -1;
background: url('../images/common/bg-pattern.png') center top/cover no-repeat;
content: '';
opacity: .6;
inset: 0;
mix-blend-mode: color-burn;
}
.p-top-calendar__inner {
width: min(92%, 970px);
margin-inline: auto;
}
.p-top-calendar__heading {
text-align: center;
}
@media print, screen and (min-width: 768px) {
.p-top-calendar__heading .c-heading {
margin-bottom: clamp(25px, 2.2vw, 35px);
}
}
@media print, screen and (min-width: 768px) {
.p-top-calendar__content {
margin-top: 10px;
}
}
.p-top-calendar__content iframe {
width: 100% !important;
height: 100% !important;
}
@media screen and (max-width: 991.98px) {
.p-top-calendar__content iframe {
aspect-ratio: 1;
}
}
@media print, screen and (min-width: 768px) {
.p-top-calendar__content iframe {
aspect-ratio: 4/3;
}
}
@media print, screen and (min-width: 992px) {
.p-top-calendar__content iframe {
aspect-ratio: 16/9;
}
}
/* お問い合わせ導線
--------------------------------------------------------- */
.p-inquiry {
position: relative;
z-index: 1;
background-color: var(--color-base);
}
@media screen and (max-width: 991.98px) {
.p-inquiry {
padding-top: 45vw;
padding-bottom: 50px;
}
}
@media print, screen and (min-width: 992px) {
.p-inquiry {
padding-top: 61px;
padding-bottom: 61px;
}
}
.p-inquiry::before,
.p-inquiry::after {
position: absolute;
z-index: -1;
content: '';
}
.p-inquiry::after {
top: 0;
left: 0;
background-image: url('../images/common/pic-inquiry.jpg');
background-position: 20% center;
background-size: cover;
background-repeat: no-repeat;
}
@media screen and (max-width: 991.98px) {
.p-inquiry::after {
width: 90%;
height: 50vw;
}
}
@media print, screen and (min-width: 992px) {
.p-inquiry::after {
bottom: 0;
width: calc(min(92%, 1570px) * .809 + (100% - min(92%, 1570px)) / 2);
}
}
.p-inquiry__inner {
margin-left: auto;
background-color: rgba(255, 255, 255, .8);
}
@media screen and (max-width: 991.98px) {
.p-inquiry__inner {
width: 95%;
padding-right: 4vw;
padding-left: 4vw;
}
}
@media print, screen and (min-width: 992px) {
.p-inquiry__inner {
width: 49.2%;
padding-right: calc((100% - min(92%, 1570px)) / 2);
}
}
.p-inquiry__content {
position: relative;
}
@media screen and (max-width: 991.98px) {
.p-inquiry__content {
padding: 7vw 4vw 8vw;
}
}
@media print, screen and (min-width: 992px) {
.p-inquiry__content {
padding-top: clamp(50px, 3.9vw, 65px);
padding-bottom: clamp(50px, 4.5vw, 80px);
padding-left: clamp(40px, 5.4vw, 100px);
}
}
@media screen and (min-width: 1600px) {
.p-inquiry__content {
padding-left: clamp(150px, 9.2vw, 175px);
}
}
@media print, screen and (min-width: 768px) {
.p-inquiry__heading .c-heading {
margin-bottom: clamp(25px, 2.2vw, 35px);
}
}
.p-inquiry__lead {
font-weight: 500;
font-size: clamp(1rem, .128vw + .971rem, 1.125rem);
line-height: 1.9;
}
.p-inquiry__tel {
display: flex;
flex-direction: column;
margin-top: 30px;
padding-top: 25px;
padding-right: clamp(15px, 2.9vw, 50px);
padding-bottom: 32px;
padding-left: clamp(15px, 2.9vw, 50px);
border-radius: clamp(8px, .9vw, 12px);
background-color: var(--color-main);
color: #fff;
text-align: center;
text-decoration: none;
justify-content: center;
}
.p-inquiry__tel-num {
position: relative;
letter-spacing: .025em;
font-size: clamp(1.75rem, .769vw + 1.577rem, 2.5rem);
font-family: var(--font-family-secondary);
line-height: 1.2;
}
.p-inquiry__tel-num::before {
position: relative;
top: -.04em;
display: inline-block;
height: .65em;
margin-right: .35em;
background-color: currentColor;
content: '';
-webkit-mask-image: var(--icon-phone);
mask-image: var(--icon-phone);
-webkit-mask-size: 100% 100%;
mask-size: 100% 100%;
aspect-ratio: 1;
}
@media print {
.p-inquiry__tel-num::before {
-webkit-print-color-adjust: exact;
}
}
.p-inquiry__tel-note {
position: relative;
left: -.6em;
margin-top: .3em;
font-size: clamp(.75rem, .128vw + .721rem, .875rem);
line-height: 1.4;
}
.p-inquiry__line {
margin-top: 20px;
}
.p-inquiry__line a {
display: block;
border: 1px solid var(--color-main);
border-radius: clamp(8px, .9vw, 12px);
color: var(--color-main);
text-align: center;
transition: background-color .5s, color .5s;
}
@media screen and (max-width: 991.98px) {
.p-inquiry__line a {
padding: 1.2em 1.4em;
font-size: clamp(1.063rem, .158vw + 1.027rem, 1.125rem);
}
}
@media print, screen and (min-width: 992px) {
.p-inquiry__line a {
padding: 1.9em 1.5em;
font-size: clamp(.938rem, .108vw + .871rem, 1rem);
}
}
.p-inquiry__line a:is(:hover, :active, :focus) {
background-color: #fff;
}
/* 診療時間・アクセス
--------------------------------------------------------- */
.p-info__logo-title {
letter-spacing: .025em;
font-weight: 500;
line-height: 1;
}
@media only screen and (max-width: 767.98px) {
.p-info__logo-title {
font-size: clamp(1.5rem, .98vw + 1.279rem, 1.75rem);
}
}
@media print, screen and (min-width: 768px) {
.p-info__logo-title {
font-size: clamp(2rem, .868vw + 1.583rem, 2.625rem);
}
}
.p-info__logo-en {
position: relative;
left: .1em;
display: flex;
margin-top: .6em;
color: var(--color-txt3);
letter-spacing: .1em;
font-family: var(--font-family-secondary);
line-height: .9;
align-items: center;
gap: .7em;
}
@media only screen and (max-width: 767.98px) {
.p-info__logo-en {
font-size: clamp(1.063rem, .245vw + 1.007rem, 1.125rem);
}
}
@media print, screen and (min-width: 768px) {
.p-info__logo-en {
font-size: clamp(1rem, .174vw + .917rem, 1.125rem);
}
}
.p-info__sub-title {
display: inline-block;
min-width: 120px;
margin-bottom: .8em;
padding: .4em .8em;
border-radius: .4em;
background-color: var(--color-main);
color: #fff;
text-align: center;
font-weight: 500;
font-size: clamp(1.063rem, .064vw + 1.048rem, 1.125rem);
line-height: 1.5;
}
.p-info__address {
margin-top: .6em;
font-weight: 500;
line-height: 1.8;
}
@media only screen and (max-width: 767.98px) {
.p-info__address {
font-size: clamp(.875rem, .245vw + .82rem, .938rem);
}
}
@media print, screen and (min-width: 768px) {
.p-info__address {
font-size: clamp(.938rem, .087vw + .896rem, 1rem);
}
}
.p-info__address span {
font-weight: 400;
}
@media only screen and (max-width: 767.98px) {
.p-info__address span {
font-size: clamp(.75rem, .245vw + .695rem, .813rem);
}
}
@media print, screen and (min-width: 768px) {
.p-info__address span {
font-size: clamp(.813rem, .087vw + .771rem, .875rem);
}
}
.p-info__schedule {
margin-top: 33px;
}
.p-info__schedule-reserve {
padding: .9em 1em;
border-radius: clamp(8px, .9vw, 12px);
background-color: var(--color-sub);
color: #fff;
text-align: center;
font-weight: 400;
line-height: 1.6;
}
@media only screen and (max-width: 767.98px) {
.p-info__schedule-reserve {
font-size: clamp(.938rem, .49vw + .827rem, 1.063rem);
}
}
@media print, screen and (min-width: 768px) {
.p-info__schedule-reserve {
font-size: clamp(1.063rem, .087vw + 1.021rem, 1.125rem);
}
}
.p-info__schedule-reserve strong {
text-decoration: underline;
font-weight: 400;
text-underline-offset: .15em;
}
.p-info__schedule-body {
overflow: hidden;
margin-top: 18px;
border-radius: clamp(8px, .9vw, 12px);
background-color: #fff;
}
.p-info__schedule-table {
width: 100%;
}
.p-info__schedule-table th,
.p-info__schedule-table td {
border-right: 2px solid var(--color-base);
border-bottom: 2px solid var(--color-base);
text-align: center;
}
@media only screen and (max-width: 767.98px) {
.p-info__schedule-table th,
.p-info__schedule-table td {
font-size: clamp(.75rem, .245vw + .695rem, .813rem);
}
}
@media print, screen and (min-width: 768px) {
.p-info__schedule-table th,
.p-info__schedule-table td {
font-size: clamp(.875rem, .174vw + .792rem, 1rem);
}
}
.p-info__schedule-table thead th {
padding: .3em .1em;
background-color: var(--color-base3);
font-weight: 500;
line-height: 1.6;
}
.p-info__schedule-table tbody th {
padding: .9em .1em;
font-weight: 400;
line-height: 1.3;
}
@media only screen and (max-width: 767.98px) {
.p-info__schedule-table tbody th {
width: 31%;
}
}
@media print, screen and (min-width: 768px) {
.p-info__schedule-table tbody th {
width: 25%;
}
}
@media screen and (min-width: 1400px) {
.p-info__schedule-table tbody th {
width: 23%;
}
}
@media only screen and (max-width: 767.98px) {
.p-info__schedule-table tbody td {
width: 9.5%;
}
}
@media print, screen and (min-width: 768px) {
.p-info__schedule-table tbody td {
width: 10.5%;
}
}
@media only screen and (max-width: 767.98px) {
.p-info__schedule-table tbody td:last-of-type {
width: 12%;
}
}
@media print, screen and (min-width: 768px) {
.p-info__schedule-table tbody td:last-of-type {
width: 12%;
}
}
@media screen and (min-width: 1400px) {
.p-info__schedule-table tbody td:last-of-type {
width: 14%;
}
}
.p-info__schedule-table tr th:last-child,
.p-info__schedule-table tr td:last-child {
border-right: 0;
}
.p-info__time-main,
.p-info__time-sub {
display: block;
}
.p-info__time-main {
font-family: var(--font-family-secondary);
}
@media only screen and (max-width: 767.98px) {
.p-info__time-main {
letter-spacing: 0;
font-size: clamp(.75rem, .245vw + .695rem, .813rem);
}
}
@media print, screen and (min-width: 768px) {
.p-info__time-main {
font-size: clamp(.938rem, .087vw + .896rem, 1rem);
}
}
.p-info__time-sub {
margin-top: .2em;
}
@media only screen and (max-width: 767.98px) {
.p-info__time-sub {
font-size: clamp(.625rem, .245vw + .57rem, .688rem);
}
}
@media print, screen and (min-width: 768px) {
.p-info__time-sub {
font-size: clamp(.688rem, .158vw + .612rem, .75rem);
}
}
@media screen and (min-width: 1400px) {
.p-info__time-sub {
font-size: clamp(.813rem, .192vw + .644rem, .875rem);
}
}
.p-info__mark {
display: inline-flex;
width: 1em;
height: 1em;
color: var(--color-main);
line-height: 1;
justify-content: center;
align-items: center;
}
.p-info__mark::before {
display: block;
line-height: 1;
}
.p-info__mark.--circle::before {
width: 12px;
height: 12px;
border-radius: 50%;
background-color: var(--color-main);
content: '';
}
.p-info__mark.--cross::before {
display: inline-block;
height: 9px;
margin: auto;
background-color: var(--color-main);
content: '';
-webkit-mask-image: var(--icon-cross);
mask-image: var(--icon-cross);
-webkit-mask-size: 100% 100%;
mask-size: 100% 100%;
aspect-ratio: 1;
}
@media print {
.p-info__mark.--cross::before {
-webkit-print-color-adjust: exact;
}
}
.p-info__mark.--triangle::before {
display: inline-block;
height: 11px;
margin: auto;
background-color: var(--color-main);
content: '';
-webkit-mask-image: var(--icon-triangle);
mask-image: var(--icon-triangle);
-webkit-mask-size: 100% 100%;
mask-size: 100% 100%;
aspect-ratio: 22/20;
}
@media print {
.p-info__mark.--triangle::before {
-webkit-print-color-adjust: exact;
}
}
.p-info__notes {
padding: .8em 1.5em .9em;
color: #7a7a7a;
}
@media only screen and (max-width: 767.98px) {
.p-info__notes {
font-size: clamp(.75rem, .245vw + .695rem, .813rem);
line-height: 1.5;
}
}
@media print, screen and (min-width: 768px) {
.p-info__notes {
font-size: clamp(.813rem, .087vw + .771rem, .875rem);
line-height: 1.5;
}
}
.p-info__tel {
margin-top: 20px;
border: 1px solid var(--color-main);
border-radius: clamp(10px, 1vw, 12px);
color: var(--color-main);
text-align: center;
}
@media only screen and (max-width: 767.98px) {
.p-info__tel {
padding: 1.3em .5em 1.2em;
}
}
@media print, screen and (min-width: 768px) {
.p-info__tel {
padding: 1.4em 1em 1.2em;
}
}
@media only screen and (max-width: 767.98px) {
.p-info__tel-lead {
letter-spacing: 0;
font-size: clamp(.75rem, .245vw + .695rem, .813rem);
line-height: 1.5;
}
}
@media print, screen and (min-width: 768px) {
.p-info__tel-lead {
font-size: clamp(.813rem, .087vw + .771rem, .875rem);
line-height: 1.1;
}
}
.p-info__tel-num {
display: inline-flex;
margin-top: .1em;
letter-spacing: .025em;
font-weight: 700;
font-family: var(--font-family-secondary);
align-items: center;
gap: .3em;
}
@media only screen and (max-width: 767.98px) {
.p-info__tel-num {
font-size: clamp(1.5rem, 1.471vw + 1.169rem, 1.875rem);
line-height: 1.2;
}
}
@media print, screen and (min-width: 768px) {
.p-info__tel-num {
font-size: clamp(1.875rem, .521vw + 1.625rem, 2.25rem);
line-height: 1;
}
}
.p-info__tel-num::before {
position: relative;
top: .03em;
display: inline-block;
height: .75em;
margin-right: .07em;
background-color: currentColor;
content: '';
-webkit-mask-image: var(--icon-phone);
mask-image: var(--icon-phone);
-webkit-mask-size: 100% 100%;
mask-size: 100% 100%;
aspect-ratio: 1;
}
@media print {
.p-info__tel-num::before {
-webkit-print-color-adjust: exact;
}
}
@media screen and (max-width: 991.98px) {
.p-info__btn {
margin-top: clamp(30px, 5.2vw, 40px);
text-align: center;
}
}
@media print, screen and (min-width: 992px) {
.p-info__btn {
margin-top: 30px;
}
}
/* 来院時のお願い
--------------------------------------------------------- */
.p-first-request__inner {
width: min(92%, 1470px);
margin-right: auto;
margin-left: auto;
}
.p-first-request__items {
display: grid;
margin-top: clamp(40px, 4.4vw, 60px);
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: clamp(14px, 2.4vw, 40px);
}
@media print, screen and (min-width: 992px) {
.p-first-request__items {
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: clamp(30px, 2.4vw, 40px);
}
}
.p-first-request__item {
border-radius: clamp(10px, 1vw, 12px);
background-color: var(--color-main);
box-shadow: 2px 3px 0 0 var(--color-shadow3);
color: #fff;
}
@media only screen and (max-width: 767.98px) {
.p-first-request__item {
padding: clamp(14px, 3.4vw, 18px);
}
}
@media print, screen and (min-width: 768px) {
.p-first-request__item {
padding: clamp(18px, 1.5vw, 22px) clamp(14px, 1.2vw, 18px) clamp(18px, 1.6vw, 24px);
}
}
.p-first-request__item-icon {
display: flex;
border-radius: 10px;
background-color: #fff;
align-items: center;
justify-content: center;
}
@media only screen and (max-width: 767.98px) {
.p-first-request__item-icon {
height: 180px;
padding: 20px;
}
}
@media print, screen and (min-width: 768px) {
.p-first-request__item-icon {
height: clamp(150px, 15.4vw, 200px);
}
}
@media print, screen and (min-width: 768px) {
.p-first-request__item-icon {
min-height: clamp(130px, 11.4vw, 176px);
padding: clamp(16px, 1.5vw, 24px);
}
}
.p-first-request__item-icon img {
width: 100%;
height: clamp(80px, 8.8vw, 120px);
object-fit: scale-down;
}
.p-first-request__item-icon.--my-number img {
height: clamp(70px, 7vw, 90px);
}
.p-first-request__item-icon.--mask img {
height: clamp(70px, 7vw, 90px);
}
.p-first-request__item-icon.--thermometer img {
height: clamp(100px, 9.6vw, 120px);
}
.p-first-request__item-icon.--hand-sanitizer img {
height: clamp(100px, 9.6vw, 120px);
}
.p-first-request__item-title {
margin-top: 1em;
text-align: center;
line-height: 1.5;
}
@media screen and (max-width: 991.98px) {
.p-first-request__item-title {
font-size: clamp(.875rem, .158vw + .839rem, .938rem);
}
}
@media print, screen and (min-width: 992px) {
.p-first-request__item-title {
font-size: clamp(1rem, .216vw + .866rem, 1.125rem);
}
}
/* 感染症対策
--------------------------------------------------------- */
.p-first-countermeasures {
margin-top: clamp(60px, 7.9vw, 120px);
}
.p-first-countermeasures__inner {
width: min(92%, 1470px);
margin-right: auto;
margin-left: auto;
}
.p-first-countermeasures__lead {
margin-bottom: 1em;
color: #f0a270;
font-size: clamp(1.188rem, .449vw + 1.087rem, 1.625rem);
line-height: 1.8;
}
.p-first-countermeasures__items {
display: grid;
margin-top: clamp(40px, 4.4vw, 60px);
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: clamp(14px, 2.4vw, 40px);
}
@media print, screen and (min-width: 992px) {
.p-first-countermeasures__items {
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: clamp(30px, 2.4vw, 40px);
}
}
.p-first-countermeasures__item {
border-radius: clamp(10px, 1vw, 12px);
background-color: var(--color-box);
box-shadow: 2px 3px 0 0 var(--color-shadow4);
color: #fff;
}
@media only screen and (max-width: 767.98px) {
.p-first-countermeasures__item {
padding: clamp(14px, 3.4vw, 18px);
}
}
@media print, screen and (min-width: 768px) {
.p-first-countermeasures__item {
padding: clamp(18px, 1.5vw, 22px) clamp(14px, 1.2vw, 18px) clamp(18px, 1.6vw, 24px);
}
}
.p-first-countermeasures__item-icon {
display: flex;
border-radius: 10px;
background-color: #fff;
align-items: center;
justify-content: center;
}
@media only screen and (max-width: 767.98px) {
.p-first-countermeasures__item-icon {
height: 180px;
padding: 20px;
}
}
@media print, screen and (min-width: 768px) {
.p-first-countermeasures__item-icon {
height: clamp(150px, 15.4vw, 200px);
}
}
@media print, screen and (min-width: 768px) {
.p-first-countermeasures__item-icon {
min-height: clamp(130px, 11.4vw, 176px);
padding: clamp(16px, 1.5vw, 24px);
}
}
.p-first-countermeasures__item-icon img {
width: 100%;
height: clamp(80px, 8.8vw, 120px);
object-fit: scale-down;
}
.p-first-countermeasures__item-icon.--ventilation img {
height: clamp(80px, 7.9vw, 100px);
}
.p-first-countermeasures__item-icon.--mask img {
height: clamp(80px, 7.9vw, 100px);
}
.p-first-countermeasures__item-icon.--medical-record img {
height: clamp(110px, 10.5vw, 130px);
}
.p-first-countermeasures__item-icon.--air-purifier img {
height: clamp(120px, 11.4vw, 140px);
}
.p-first-countermeasures__item-title {
margin-top: 1em;
text-align: center;
font-size: clamp(1rem, .128vw + .971rem, 1.125rem);
line-height: 1.6;
}
/* 対象となる症状
--------------------------------------------------------- */
.p-first-condition {
margin-top: clamp(60px, 7.9vw, 120px);
}
.p-first-condition__inner {
width: min(92%, 1470px);
margin-right: auto;
margin-left: auto;
}
@media print, screen and (min-width: 768px) {
.p-first-condition__media {
display: grid;
column-gap: clamp(30px, 3.8vw, 72px);
grid-template-columns: clamp(360px, 35.3vw, 590px) auto;
}
}
.p-first-condition__img img {
width: 100%;
}
@media only screen and (max-width: 767.98px) {
.p-first-condition__content {
margin-top: clamp(40px, 8.9vw, 60px);
}
}
/* 初診の流れ・無料カウンセリングについて
--------------------------------------------------------- */
.p-flow {
margin-top: clamp(60px, 7.9vw, 120px);
}
.p-flow__inner {
width: min(92%, 1470px);
margin-right: auto;
margin-left: auto;
}
.p-flow__item {
position: relative;
border-radius: clamp(10px, 1vw, 12px);
}
@media only screen and (max-width: 767.98px) {
.p-flow__item {
padding: 5vw 4vw 6vw;
}
}
@media print, screen and (min-width: 768px) {
.p-flow__item {
display: grid;
padding: clamp(20px, 1.9vw, 30px);
padding-top: clamp(40px, 3.3vw, 50px);
padding-right: clamp(30px, 3vw, 50px);
padding-bottom: clamp(40px, 3.3vw, 50px);
padding-left: clamp(30px, 3vw, 50px);
column-gap: clamp(40px, 3.7vw, 60px);
grid-template-columns: 1fr 35%;
align-items: center;
}
}
.p-flow__item::before {
position: absolute;
top: calc(100% + clamp(17px, 1.8vw, 25px));
right: 0;
left: 0;
height: clamp(20px, 2.2vw, 30px);
margin: auto;
margin: auto;
background-color: var(--color-main);
content: '';
transition: background-color .2s;
-webkit-mask-image: var(--flow-arrow);
mask-image: var(--flow-arrow);
-webkit-mask-size: 100% 100%;
mask-size: 100% 100%;
aspect-ratio: 54.7/25;
}
@media print {
.p-flow__item::before {
-webkit-print-color-adjust: exact;
}
}
.p-flow__item + .p-flow__item {
margin-top: clamp(50px, 5.7vw, 80px);
}
.p-flow__item:last-of-type::before {
display: none;
}
.p-flow__item:nth-of-type(odd) {
background-color: #f9d1ad;
}
.p-flow__item:nth-of-type(even) {
background-color: #fbe7d4;
}
.p-flow__item-title {
font-size: clamp(1.25rem, .641vw + 1.106rem, 1.875rem);
line-height: 1.6;
}
@media only screen and (max-width: 767.98px) {
.p-flow__item-title {
margin-bottom: 1em;
}
}
@media print, screen and (min-width: 768px) {
.p-flow__item-title {
margin-bottom: 1.1em;
}
}
.p-flow__tel-num {
display: inline-block;
padding-right: .4em;
padding-left: .4em;
border-radius: .2em;
background-color: #c9d7e7;
color: #0e0f0f;
}
@media only screen and (max-width: 767.98px) {
.p-flow__item-img {
margin-top: clamp(40px, 8vw, 50px);
}
}
.p-flow__item-img img {
width: 100%;
}
.p-flow__files {
margin-top: clamp(30px, 3.1vw, 40px);
}
.p-flow__file {
display: flex;
color: #fff;
text-decoration: none;
align-items: center;
}
.p-flow__file + .p-flow__file {
margin-top: 15px;
}
.p-flow__file-label {
display: inline-flex;
min-height: 2em;
padding-right: 1em;
padding-left: 1em;
border-radius: 3px 0 0 3px;
background-color: #e48b58;
font-size: clamp(.813rem, .064vw + .798rem, .875rem);
line-height: 1.4;
align-items: center;
}
.p-flow__file-name {
display: inline-flex;
min-height: 2em;
padding-right: .9em;
padding-left: .9em;
background-color: #d4e3f2;
color: #0e0f0f;
font-size: clamp(.688rem, .064vw + .673rem, .75rem);
font-family: var(--font-family-secondary);
line-height: 1;
align-items: center;
}
/* 一般歯科
--------------------------------------------------------- */
.p-general-dentistry__inner {
width: min(92%, 1470px);
margin-right: auto;
margin-left: auto;
}
.p-general-dentistry__lead {
border-radius: clamp(10px, 1vw, 12px);
background-color: var(--color-base2);
}
@media only screen and (max-width: 767.98px) {
.p-general-dentistry__lead {
padding: 5vw 4vw 6vw;
}
}
@media print, screen and (min-width: 768px) {
.p-general-dentistry__lead {
padding-top: clamp(40px, 3.3vw, 50px);
padding-right: clamp(30px, 3vw, 50px);
padding-bottom: clamp(40px, 3.3vw, 50px);
padding-left: clamp(30px, 3vw, 50px);
}
}
@media print, screen and (min-width: 992px) {
.p-general-dentistry__lead {
text-align: center;
}
}
/* 当院の治療方針
--------------------------------------------------------- */
.p-general-policy {
margin-top: clamp(60px, 7.9vw, 120px);
}
.p-general-policy__inner {
width: min(92%, 1470px);
margin-inline: auto;
}
@media print, screen and (min-width: 992px) {
.p-general-policy__media {
display: grid;
gap: clamp(25px, 3.3vw, 50px);
grid-template: 'img content'/clamp(320px, 29.2vw, 530px) auto;
}
}
.p-general-policy__img {
grid-area: img;
}
@media screen and (max-width: 991.98px) {
.p-general-policy__img {
max-width: 500px;
margin-right: auto;
margin-left: auto;
}
}
.p-general-policy__img img {
height: auto;
max-width: 100%;
}
.p-general-policy__content {
grid-area: content;
}
@media screen and (max-width: 991.98px) {
.p-general-policy__content {
margin-top: clamp(40px, 6.7vw, 50px);
}
}
.p-general-policy__symptoms {
display: grid;
margin-top: clamp(50px, 5.7vw, 80px);
gap: clamp(25px, 3.3vw, 50px);
}
@media print, screen and (min-width: 768px) {
.p-general-policy__symptoms {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
.p-general-policy__symptom-list {
border-radius: 8px;
background-color: #fff;
box-shadow: 2px 3px 0 0 var(--color-shadow);
}
@media only screen and (max-width: 767.98px) {
.p-general-policy__symptom-list {
padding: 5vw 4vw 6vw;
}
}
@media print, screen and (min-width: 768px) {
.p-general-policy__symptom-list {
padding-top: clamp(30px, 2.6vw, 40px);
padding-right: clamp(30px, 2.6vw, 40px);
padding-bottom: clamp(30px, 2.6vw, 40px);
padding-left: clamp(30px, 2.6vw, 40px);
}
}
.p-general-policy__symptom-list li {
position: relative;
}
@media print, screen and (min-width: 768px) {
.p-general-policy__symptom-list li {
font-size: clamp(.938rem, .174vw + .854rem, 1.063rem);
}
}
.p-general-policy__symptom-list li::before {
margin-right: .5em;
color: var(--color-main);
content: '\f14a';
font-weight: 900;
font-size: 120%;
font-family: 'Font Awesome 6 Free';
line-height: 1;
}
.p-general-policy__symptom-list li + li {
margin-top: .25em;
}
.p-general-policy__prevention {
margin-top: clamp(40px, 4.4vw, 60px);
}
.p-general-policy__prevention-title {
margin-bottom: .5em;
color: #ec975f;
font-weight: 500;
font-size: clamp(1.125rem, .897vw + .923rem, 2rem);
line-height: 1.6;
}
/* 一般歯科・小児歯科｜小児歯科
--------------------------------------------------------- */
.p-pediatric {
margin-top: clamp(60px, 7.9vw, 120px);
}
.p-pediatric__inner {
width: min(92%, 1470px);
margin-right: auto;
margin-left: auto;
}
.p-pediatric__content {
border-radius: clamp(10px, 1.8vw, 32px);
background-color: #fff;
box-shadow: 2px 3px 0 0 var(--color-shadow);
}
@media only screen and (max-width: 767.98px) {
.p-pediatric__content {
padding: 7vw 4vw 8vw;
}
}
@media print, screen and (min-width: 768px) {
.p-pediatric__content {
padding-top: clamp(40px, 5.6vw, 110px);
padding-right: clamp(40px, 5.4vw, 105px);
padding-bottom: clamp(50px, 6.3vw, 120px);
padding-left: clamp(40px, 5.4vw, 105px);
}
}
.p-pediatric__lead {
border-radius: clamp(10px, 1vw, 12px);
background-color: var(--color-base2);
}
@media only screen and (max-width: 767.98px) {
.p-pediatric__lead {
padding: 5vw 4vw 6vw;
}
}
@media print, screen and (min-width: 768px) {
.p-pediatric__lead {
padding-top: clamp(40px, 3.3vw, 50px);
padding-right: clamp(30px, 3vw, 50px);
padding-bottom: clamp(40px, 3.3vw, 50px);
padding-left: clamp(30px, 3vw, 50px);
}
}
@media screen and (min-width: 1200px) {
.p-pediatric__lead {
text-align: center;
}
}
.p-pediatric__health {
margin-top: clamp(60px, 7.9vw, 120px);
}
@media print, screen and (min-width: 992px) {
.p-pediatric__health-media {
display: grid;
gap: clamp(25px, 3.3vw, 50px);
grid-template: 'img content'/clamp(320px, 29.2vw, 530px) auto;
}
}
.p-pediatric__health-img {
grid-area: img;
}
@media screen and (max-width: 991.98px) {
.p-pediatric__health-img {
max-width: 500px;
margin-right: auto;
margin-left: auto;
}
}
.p-pediatric__health-img img {
height: auto;
max-width: 100%;
}
.p-pediatric__health-content {
grid-area: content;
}
@media screen and (max-width: 991.98px) {
.p-pediatric__health-content {
margin-top: clamp(40px, 6.7vw, 50px);
}
}
.p-pediatric__prevention {
margin-top: clamp(60px, 7.9vw, 120px);
}
.p-pediatric__prevention-copy {
color: #ec975f;
font-weight: 500;
font-size: clamp(1.125rem, .641vw + .981rem, 1.75rem);
line-height: 1.6;
}
.p-pediatric__prevention-lead {
margin-top: 1em;
}
.p-pediatric__prevention-items {
display: grid;
margin-top: clamp(30px, 3.7vw, 55px);
gap: clamp(20px, 2.6vw, 40px);
}
@media print, screen and (min-width: 768px) {
.p-pediatric__prevention-items {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
.p-pediatric__prevention-item {
border-radius: clamp(10px, 1vw, 12px);
background-color: var(--color-box);
box-shadow: 2px 3px 0 0 var(--color-shadow4);
color: #fff;
}
@media only screen and (max-width: 767.98px) {
.p-pediatric__prevention-item {
padding: 5vw 4vw 6vw;
}
}
@media print, screen and (min-width: 768px) {
.p-pediatric__prevention-item {
padding-top: clamp(30px, 2.6vw, 40px);
padding-right: clamp(20px, 2vw, 35px);
padding-bottom: clamp(30px, 2.6vw, 40px);
padding-left: clamp(20px, 2vw, 35px);
}
}
.p-pediatric__prevention-item p {
margin-top: 1em;
}
@media only screen and (max-width: 767.98px) {
.p-pediatric__prevention-item p {
font-size: 1rem;
}
}
@media print, screen and (min-width: 768px) {
.p-pediatric__prevention-item p {
letter-spacing: .02em;
font-size: clamp(.875rem, .174vw + .792rem, 1rem);
}
}
.p-pediatric__prevention-icon {
text-align: center;
}
.p-pediatric__prevention-icon img {
width: 100%;
max-width: clamp(120px, 13.2vw, 180px);
aspect-ratio: 1/1;
object-fit: contain;
}
.p-pediatric__prevention-title {
margin-top: clamp(15px, 1.5vw, 20px);
text-align: center;
font-weight: 500;
line-height: 1.6;
}
@media only screen and (max-width: 767.98px) {
.p-pediatric__prevention-title {
font-size: clamp(1.125rem, .49vw + 1.015rem, 1.25rem);
}
}
@media print, screen and (min-width: 768px) {
.p-pediatric__prevention-title {
font-size: clamp(1.125rem, .521vw + .875rem, 1.5rem);
}
}
.p-pediatric__sealant {
margin-top: clamp(60px, 7.9vw, 120px);
}
@media print, screen and (min-width: 768px) {
.p-pediatric__sealant-media {
display: grid;
gap: clamp(40px, 4.4vw, 60px);
grid-template: 'img content'/clamp(270px, 21.9vw, 320px) auto;
}
}
.p-pediatric__sealant-img {
grid-area: img;
}
@media only screen and (max-width: 767.98px) {
.p-pediatric__sealant-img {
max-width: 300px;
margin-right: auto;
margin-left: auto;
}
}
.p-pediatric__sealant-img img {
height: auto;
max-width: 100%;
cursor: zoom-in;
}
.p-pediatric__sealant-content {
grid-area: content;
}
@media only screen and (max-width: 767.98px) {
.p-pediatric__sealant-content {
margin-top: clamp(40px, 8vw, 50px);
}
}
.p-pediatric__sealant-note {
margin-top: 1em;
color: #ea6e5f;
}
@media only screen and (max-width: 767.98px) {
.p-pediatric__sealant-note .pc-txt {
display: none;
}
}
@media print, screen and (min-width: 768px) {
.p-pediatric__sealant-note .sp-txt {
display: none;
}
}
/* 一般歯科・小児歯科｜キッズスペース
--------------------------------------------------------- */
.p-kids-space {
margin-top: clamp(60px, 7.9vw, 120px);
}
.p-kids-space__inner {
width: min(92%, 1470px);
margin-right: auto;
margin-left: auto;
}
.p-kids-space__box {
padding: clamp(10px, 1.8vw, 30px);
border-radius: clamp(10px, 1vw, 12px);
background-color: #f6d8c3;
}
@media print, screen and (min-width: 992px) {
.p-kids-space__box {
display: grid;
column-gap: clamp(20px, 1.7vw, 30px);
grid-template: 'img content'/clamp(360px, 29.5vw, 500px) auto;
}
}
.p-kids-space__img {
grid-area: img;
}
.p-kids-space__img img {
width: 100%;
aspect-ratio: 4/3;
object-fit: cover;
object-position: center top;
}
@media screen and (max-width: 991.98px) {
.p-kids-space__img img {
border-top-left-radius: 8px;
border-top-right-radius: 8px;
}
}
@media print, screen and (min-width: 992px) {
.p-kids-space__img img {
border-radius: clamp(10px, 1vw, 12px);
}
}
.p-kids-space__content {
display: flex;
flex-direction: column;
padding: clamp(24px, 2.8vw, 40px);
background-color: #fff;
grid-area: content;
justify-content: center;
}
@media screen and (max-width: 991.98px) {
.p-kids-space__content {
border-bottom-right-radius: 8px;
border-bottom-left-radius: 8px;
}
}
@media print, screen and (min-width: 992px) {
.p-kids-space__content {
border-radius: clamp(10px, 1vw, 12px);
}
}
.p-kids-space__title {
margin-bottom: .8em;
color: #ec975f;
font-weight: 500;
line-height: 1.6;
}
@media screen and (max-width: 991.98px) {
.p-kids-space__title {
font-size: clamp(1.188rem, .323vw + .987rem, 1.375rem);
}
}
@media print, screen and (min-width: 992px) {
.p-kids-space__title {
font-size: clamp(1.375rem, 1.94vw + .172rem, 2.5rem);
}
}
/* 矯正歯科
--------------------------------------------------------- */
.p-orthodontics__inner {
width: min(92%, 1470px);
margin-inline: auto;
}
.p-orthodontics__notice {
margin-top: clamp(40px, 3.9vw, 50px);
border-radius: clamp(10px, 1vw, 12px);
background-color: var(--color-main);
box-shadow: 2px 3px 0 0 var(--color-shadow);
color: #fff;
}
@media only screen and (max-width: 767.98px) {
.p-orthodontics__notice {
padding: 7vw 4vw 8vw;
}
}
@media print, screen and (min-width: 768px) {
.p-orthodontics__notice {
padding-top: clamp(30px, 2.8vw, 45px);
padding-right: clamp(40px, 5.4vw, 105px);
padding-bottom: clamp(30px, 2.8vw, 45px);
padding-left: clamp(40px, 5.4vw, 105px);
}
}
.p-orthodontics__type-grid {
margin-top: clamp(50px, 6.1vw, 90px);
}
@media print, screen and (min-width: 768px) {
.p-orthodontics__type-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: clamp(20px, 2.2vw, 40px);
}
}
@media only screen and (max-width: 767.98px) {
.p-orthodontics__type + .p-orthodontics__type {
margin-top: 30px;
}
}
@media print, screen and (min-width: 768px) {
.p-orthodontics__type {
display: flex;
flex-direction: column;
flex-grow: 1;
}
}
.p-orthodontics__type-body {
padding: clamp(20px, 2.1vw, 28px);
border-radius: 8px;
background-color: #fff;
box-shadow: 2px 3px 0 0 var(--color-shadow);
}
@media only screen and (max-width: 767.98px) {
.p-orthodontics__type-body {
padding: 5vw 4vw 6vw;
}
}
@media print, screen and (min-width: 768px) {
.p-orthodontics__type-body {
padding-top: clamp(30px, 2.6vw, 40px);
padding-right: clamp(30px, 2.6vw, 40px);
padding-bottom: clamp(40px, 3.3vw, 50px);
padding-left: clamp(30px, 2.6vw, 40px);
flex-grow: 1;
}
}
/* 矯正歯科の流れ
--------------------------------------------------------- */
.p-orthodontics-flow {
margin-top: clamp(60px, 7vw, 100px);
}
.p-orthodontics-flow__inner {
width: min(92%, 1470px);
margin-inline: auto;
}
@media print, screen and (min-width: 768px) {
.p-orthodontics-flow__content {
display: flex;
justify-content: center;
}
}
.p-orthodontics-flow__summary {
margin-top: 1.8em;
}
.p-orthodontics-flow__summary li {
width: -webkit-fit-content;
width: fit-content;
padding-bottom: .5em;
border-bottom: 1px solid #e7a47a;
line-height: 1.6;
}
@media only screen and (max-width: 767.98px) {
.p-orthodontics-flow__summary li {
font-size: clamp(1rem, .245vw + .945rem, 1.063rem);
}
}
@media print, screen and (min-width: 768px) {
.p-orthodontics-flow__summary li {
font-size: clamp(1.188rem, .347vw + 1.021rem, 1.438rem);
}
}
.p-orthodontics-flow__summary li + li {
margin-top: .7em;
}
/* 矯正歯科の費用
--------------------------------------------------------- */
.p-orthodontics-price {
margin-top: clamp(80px, 8.8vw, 120px);
}
.p-orthodontics-price__inner {
width: min(92%, 1470px);
margin-inline: auto;
}
@media print, screen and (min-width: 768px) {
.p-orthodontics-price__main-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: clamp(20px, 2.2vw, 40px);
}
}
.p-orthodontics-price__main-item {
border-radius: clamp(10px, 1vw, 12px);
background-color: #fff;
box-shadow: 2px 3px 0 0 var(--color-shadow);
text-align: center;
}
@media only screen and (max-width: 767.98px) {
.p-orthodontics-price__main-item {
padding: 5vw 4vw 6vw;
}
}
@media print, screen and (min-width: 768px) {
.p-orthodontics-price__main-item {
padding-top: clamp(40px, 3.3vw, 50px);
padding-right: clamp(25px, 2.4vw, 40px);
padding-bottom: clamp(40px, 3.3vw, 50px);
padding-left: clamp(25px, 2.4vw, 40px);
}
}
@media only screen and (max-width: 767.98px) {
.p-orthodontics-price__main-item + .p-orthodontics-price__main-item {
margin-top: 30px;
}
}
.p-orthodontics-price__main-title {
position: relative;
margin-bottom: 1em;
text-align: center;
font-weight: 400;
font-size: clamp(1.25rem, .641vw + 1.106rem, 1.875rem);
line-height: 1.6;
padding-inline: 2.8em;
}
.p-orthodontics-price__main-title::before,
.p-orthodontics-price__main-title::after {
position: absolute;
top: .8em;
width: 2em;
border-top: 1px solid #e7a47a;
content: '';
}
.p-orthodontics-price__main-title::before {
left: 0;
}
.p-orthodontics-price__main-title::after {
right: 0;
}
.p-orthodontics-price__price-box {
display: flex;
flex-direction: column;
justify-content: center;
}
.p-orthodontics-price__item + .p-orthodontics-price__item {
margin-top: clamp(30px, 3.1vw, 40px);
}
.p-orthodontics-price__label {
font-size: clamp(1.063rem, .192vw + 1.019rem, 1.25rem);
line-height: 1.6;
}
@media only screen and (max-width: 767.98px) {
.p-orthodontics-price__label {
font-size: clamp(1rem, .245vw + .945rem, 1.063rem);
}
}
@media print, screen and (min-width: 768px) {
.p-orthodontics-price__label {
font-size: clamp(.875rem, .174vw + .792rem, 1rem);
}
}
.p-orthodontics-price__num {
color: var(--color-txt2);
font-size: clamp(1.75rem, 1.282vw + 1.462rem, 3rem);
font-family: var(--font-family-secondary);
line-height: 1.4;
}
.p-orthodontics-price__num .tax {
font-size: 60%;
}
.p-orthodontics-price__intro {
font-size: clamp(.875rem, .256vw + .817rem, 1.125rem);
line-height: 2;
}
.p-orthodontics-price__other-grid {
margin-top: clamp(25px, 2.9vw, 40px);
}
@media print, screen and (min-width: 992px) {
.p-orthodontics-price__other-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: clamp(30px, 3.1vw, 60px);
}
}
@media print, screen and (min-width: 992px) {
.p-orthodontics-price__other-item {
display: grid;
grid-template: 'img body'/clamp(140px, 13.4vw, 250px) 1fr;
gap: clamp(20px, 1.7vw, 30px);
align-items: start;
}
}
@media screen and (max-width: 991.98px) {
.p-orthodontics-price__other-item + .p-orthodontics-price__other-item {
margin-top: clamp(50px, 8.1vw, 60px);
}
}
.p-orthodontics-price__other-body {
grid-area: body;
}
.p-orthodontics-price__other-img {
grid-area: img;
}
@media screen and (max-width: 991.98px) {
.p-orthodontics-price__other-img {
max-width: 280px;
margin-top: clamp(30px, 3.1vw, 40px);
margin-inline: auto;
}
}
.p-orthodontics-price__other-img img {
width: 100%;
border-radius: clamp(10px, 1vw, 12px);
}
.p-orthodontics-price__other-title {
margin-bottom: 1em;
padding: .3em 1em;
border-radius: 999px;
background-color: var(--color-sub);
color: #fff;
text-align: center;
font-weight: 400;
line-height: 1.4;
}
@media only screen and (max-width: 767.98px) {
.p-orthodontics-price__other-title {
font-size: clamp(1.063rem, .245vw + 1.007rem, 1.125rem);
}
}
@media print, screen and (min-width: 768px) {
.p-orthodontics-price__other-title {
font-size: clamp(1rem, .174vw + .917rem, 1.125rem);
}
}
.p-orthodontics-price__other-list div + div {
margin-top: 1.2em;
}
.p-orthodontics-price__other-list dt,
.p-orthodontics-price__other-list dd {
line-height: 1.8;
}
@media print, screen and (min-width: 768px) {
.p-orthodontics-price__other-list dt,
.p-orthodontics-price__other-list dd {
font-size: clamp(.938rem, .174vw + .854rem, 1.063rem);
}
}
.p-orthodontics-price__other-list dd {
position: relative;
padding-left: 1.4em;
color: var(--color-txt2);
}
.p-orthodontics-price__other-list dd::before {
position: absolute;
top: 0;
left: 0;
color: var(--color-txt);
content: '…';
}
.p-orthodontics-price__other-list dd strong {
color: var(--color-accent);
font-weight: 400;
}
.p-orthodontics-price__note-grid {
margin-top: clamp(50px, 6.1vw, 90px);
border-radius: clamp(10px, 1vw, 12px);
background-color: #f4d8c5;
}
@media screen and (max-width: 991.98px) {
.p-orthodontics-price__note-grid {
padding: 5vw 4vw 6vw;
}
}
@media print, screen and (min-width: 992px) {
.p-orthodontics-price__note-grid {
display: grid;
padding-top: clamp(30px, 2.4vw, 40px);
padding-right: clamp(30px, 2.4vw, 40px);
padding-bottom: clamp(40px, 3.1vw, 50px);
padding-left: clamp(30px, 2.4vw, 40px);
grid-template-columns: 1fr 1fr;
gap: clamp(24px, 2.2vw, 40px);
}
}
@media screen and (max-width: 991.98px) {
.p-orthodontics-price__note-item + .p-orthodontics-price__note-item {
margin-top: 2em;
}
}
.p-orthodontics-price__note-title {
margin-bottom: .5em;
font-weight: 500;
font-size: clamp(1.125rem, .128vw + 1.096rem, 1.25rem);
line-height: 1.6;
}
/* 審美歯科
--------------------------------------------------------- */
.p-esthetic__inner {
width: min(92%, 1470px);
margin-inline: auto;
}
.p-esthetic__lead {
margin-bottom: clamp(40px, 4.4vw, 60px);
}
.p-esthetic__item {
border-radius: clamp(10px, 1vw, 12px);
background-color: #fff;
box-shadow: 2px 3px 0 0 var(--color-shadow);
}
@media screen and (max-width: 991.98px) {
.p-esthetic__item {
padding: 5vw 4vw 6vw;
}
}
@media print, screen and (min-width: 992px) {
.p-esthetic__item {
padding-top: clamp(40px, 3.8vw, 70px);
padding-right: clamp(30px, 2.7vw, 50px);
padding-bottom: clamp(40px, 3.8vw, 70px);
padding-left: clamp(30px, 2.7vw, 50px);
}
}
.p-esthetic__item + .p-esthetic__item {
margin-top: clamp(50px, 6.1vw, 90px);
}
.p-esthetic__item-head {
display: flex;
margin-bottom: 2.2em;
align-items: center;
gap: 1em;
}
.p-esthetic__item-head::after {
flex: 1 1 auto;
border-top: 1px solid var(--color-main);
content: '';
}
.p-esthetic__item-title {
color: var(--color-main);
font-weight: 400;
font-size: clamp(1.25rem, .769vw + 1.077rem, 2rem);
line-height: 1.6;
}
.p-esthetic__item-body {
line-height: 1.6;
}
@media print, screen and (min-width: 992px) {
.p-esthetic__item-body {
display: grid;
column-gap: clamp(20px, 2.1vw, 40px);
grid-template: 'content gallery'/1fr 27%;
}
}
.p-esthetic__item-content {
grid-area: content;
}
@media print, screen and (min-width: 992px) {
.p-esthetic__item-content {
font-size: clamp(.875rem, .108vw + .808rem, .938rem);
}
}
.p-esthetic__gallery {
display: grid;
grid-area: gallery;
gap: 10px;
}
@media screen and (max-width: 991.98px) {
.p-esthetic__gallery {
margin-top: clamp(30px, 6.2vw, 40px);
grid-template-columns: repeat(2, 1fr);
}
}
@media print, screen and (min-width: 992px) {
.p-esthetic__gallery {
grid-template-columns: repeat(2, 1fr);
align-content: start;
}
}
.p-esthetic__gallery-item.--wide {
grid-column: 1/-1;
}
.p-esthetic__gallery-item.--wide img {
aspect-ratio: 2.2/1;
}
.p-esthetic__gallery-item img {
width: 100%;
aspect-ratio: 1/1;
object-fit: cover;
}
.p-esthetic__specs,
.p-esthetic__points {
display: grid;
gap: clamp(14px, 1.4vw, 18px);
}
@media print, screen and (min-width: 992px) {
.p-esthetic__specs,
.p-esthetic__points {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
.p-esthetic__points {
margin-top: clamp(30px, 3.5vw, 50px);
}
@media only screen and (max-width: 767.98px) {
.p-esthetic__spec + .p-esthetic__spec,
.p-esthetic__spec + .p-esthetic__point,
.p-esthetic__point + .p-esthetic__spec,
.p-esthetic__point + .p-esthetic__point {
margin-top: 20px;
}
}
.p-esthetic__spec-head,
.p-esthetic__point-head {
margin-bottom: 1.1em;
padding: .4em .8em;
background-color: #bba79b;
background-color: var(--color-box);
color: #fff;
font-weight: 500;
font-size: clamp(.875rem, .128vw + .846rem, 1rem);
line-height: 1.6;
}
.p-esthetic__point-head {
background-color: var(--color-box2);
}
.p-esthetic__spec-body {
padding-right: .5em;
padding-left: .5em;
}
.p-esthetic__spec-body > * + * {
margin-top: .4em;
}
.p-esthetic__spec-body dl {
display: grid;
column-gap: 1em;
grid-template: 'label price'/1fr auto;
}
.p-esthetic__spec-body dt {
grid-area: label;
}
.p-esthetic__spec-body dd {
text-align: right;
grid-area: price;
}
.p-esthetic__spec-price {
color: var(--color-txt2);
font-weight: 500;
}
.p-esthetic__spec-price .tax {
font-size: 80%;
}
.p-esthetic__point-list li + li {
margin-top: .5em;
}
/* 審美歯科症例
--------------------------------------------------------- */
.p-esthetic-case {
position: relative;
z-index: 0;
margin-top: clamp(60px, 7.9vw, 120px);
background-color: var(--color-base);
}
.p-esthetic-case::before {
position: absolute;
right: 0;
bottom: calc(100% - 1px);
left: 0;
z-index: -1;
margin: auto;
background-color: var(--color-base);
content: '';
-webkit-mask-size: 100% 100%;
mask-size: 100% 100%;
-webkit-mask-image: var(--bg-wave);
mask-image: var(--bg-wave);
aspect-ratio: 1920/100;
}
@media print {
.p-esthetic-case::before {
-webkit-print-color-adjust: exact;
}
}
.p-esthetic-case__inner {
width: min(92%, 1470px);
margin-inline: auto;
}
@media print, screen and (min-width: 768px) {
.p-esthetic-case__items {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: clamp(20px, 2vw, 35px);
}
}
.p-esthetic-case__item {
border-radius: clamp(10px, 1vw, 12px);
background-color: #fff;
box-shadow: 2px 3px 0 0 var(--color-shadow);
}
@media only screen and (max-width: 767.98px) {
.p-esthetic-case__item {
padding: 5vw 4vw 6vw;
}
}
@media print, screen and (min-width: 768px) {
.p-esthetic-case__item {
padding-top: clamp(40px, 3.3vw, 50px);
padding-right: clamp(30px, 2.6vw, 40px);
padding-bottom: clamp(50px, 4.1vw, 60px);
padding-left: clamp(30px, 2.6vw, 40px);
}
}
@media only screen and (max-width: 767.98px) {
.p-esthetic-case__item + .p-esthetic-case__item {
margin-top: clamp(40px, 8vw, 50px);
}
}
.p-esthetic-case__title {
color: var(--color-main);
text-align: center;
font-weight: 400;
font-size: clamp(1.125rem, .641vw + .981rem, 1.75rem);
line-height: 1.5;
}
@media only screen and (max-width: 767.98px) {
.p-esthetic-case__title {
margin-bottom: 1.2em;
}
}
@media print, screen and (min-width: 768px) {
.p-esthetic-case__title {
margin-bottom: 1.2em;
}
}
.p-esthetic-case__gallery {
display: grid;
gap: 1.5em clamp(12px, 1.4vw, 20px);
}
@media only screen and (max-width: 767.98px) {
.p-esthetic-case__gallery {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media print, screen and (min-width: 768px) {
.p-esthetic-case__gallery {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media print, screen and (min-width: 768px) {
.p-esthetic-case__gallery.--three {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
.p-esthetic-case__card {
text-align: center;
}
.p-esthetic-case__img img {
width: 100%;
border-radius: clamp(10px, 1vw, 12px);
aspect-ratio: 1.24/1;
object-fit: cover;
}
.p-esthetic-case__label {
margin-top: .6em;
color: var(--color-txt2);
font-family: var(--font-family-secondary);
line-height: 1.2;
}
@media only screen and (max-width: 767.98px) {
.p-esthetic-case__label {
font-size: clamp(.813rem, .245vw + .757rem, .875rem);
}
}
@media print, screen and (min-width: 768px) {
.p-esthetic-case__label {
font-size: clamp(.938rem, .087vw + .896rem, 1rem);
}
}
/* ホワイトニング
--------------------------------------------------------- */
.p-whitening__inner {
width: min(92%, 1470px);
margin-right: auto;
margin-left: auto;
}
.p-whitening__office,
.p-whitening__home,
.p-whitening__gum {
margin-top: clamp(60px, 7.9vw, 120px);
}
@media print, screen and (min-width: 768px) {
.p-whitening__media {
display: grid;
gap: clamp(25px, 3.3vw, 50px);
grid-template: 'img content'/clamp(320px, 31.6vw, 530px) auto;
}
}
.p-whitening__img {
grid-area: img;
}
.p-whitening__img img {
height: auto;
max-width: 100%;
}
.p-whitening__content {
grid-area: content;
}
@media only screen and (max-width: 767.98px) {
.p-whitening__content {
margin-top: clamp(40px, 8vw, 50px);
}
}
.p-whitening__note {
margin-top: 1em;
color: #ea803b;
}
.p-whitening__flow-list {
margin-top: clamp(40px, 3.9vw, 50px);
counter-reset: item;
}
.p-whitening__flow-list li {
position: relative;
padding-bottom: .7em;
padding-left: 1.4em;
border-bottom: 1px solid #efc7ae;
line-height: 1.6;
}
.p-whitening__flow-list li::before {
position: absolute;
top: 0;
left: 0;
color: #6a5b52;
content: counter(item) '.';
counter-increment: item;
}
.p-whitening__flow-list li + li {
margin-top: .9em;
}
.p-whitening__price {
margin-top: 1.6em;
color: #ec975f;
font-size: clamp(1.25rem, .449vw + 1.149rem, 1.688rem);
line-height: 1.8;
}
.p-whitening__care {
display: grid;
margin-top: clamp(35px, 4.2vw, 60px);
gap: clamp(25px, 3.3vw, 50px);
}
@media print, screen and (min-width: 768px) {
.p-whitening__care {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
.p-whitening__care-item {
padding: clamp(20px, 2.2vw, 30px);
border-radius: 12px;
background-color: var(--color-base2);
}
.p-whitening__care-title {
margin-bottom: .7em;
color: #6a5b52;
font-weight: 500;
font-size: clamp(1.125rem, .385vw + 1.038rem, 1.5rem);
line-height: 1.6;
}
.p-whitening__care-list li {
position: relative;
padding-left: 1.2em;
line-height: 1.6;
}
.p-whitening__care-list li::before {
position: absolute;
top: 0;
left: 0;
content: '・';
}
.p-whitening__care-list li + li {
margin-top: .2em;
}
/* ホワイトニング｜症例の紹介
--------------------------------------------------------- */
.p-whitening-case {
margin-top: clamp(60px, 7.9vw, 120px);
}
.p-whitening-case__inner {
width: min(92%, 1470px);
margin-right: auto;
margin-left: auto;
}
@media print, screen and (min-width: 768px) {
.p-whitening-case__items {
display: grid;
gap: clamp(40px, 3.9vw, 50px);
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
.p-whitening-case__item {
border-radius: clamp(10px, 1vw, 12px);
background-color: #fff;
box-shadow: 2px 3px 0 0 var(--color-shadow);
}
@media only screen and (max-width: 767.98px) {
.p-whitening-case__item {
padding: 5vw 4vw 6vw;
}
}
@media print, screen and (min-width: 768px) {
.p-whitening-case__item {
padding-top: clamp(40px, 3.3vw, 50px);
padding-right: clamp(30px, 3vw, 50px);
padding-bottom: clamp(40px, 4.1vw, 70px);
padding-left: clamp(30px, 3vw, 50px);
}
}
@media only screen and (max-width: 767.98px) {
.p-whitening-case__item + .p-whitening-case__item {
margin-top: clamp(40px, 8vw, 50px);
}
}
.p-whitening-case__title {
color: #6a5b52;
text-align: center;
font-weight: 500;
font-size: clamp(1.125rem, .385vw + 1.038rem, 1.5rem);
line-height: 1.6;
}
.p-whitening-case__gallery {
margin-top: clamp(20px, 2.1vw, 28px);
}
@media print, screen and (min-width: 768px) {
.p-whitening-case__gallery {
display: grid;
gap: clamp(15px, 1.7vw, 24px);
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
.p-whitening-case__label {
margin-bottom: .8em;
color: #ec975f;
text-align: center;
font-size: clamp(1.125rem, .385vw + 1.038rem, 1.5rem);
font-family: var(--font-family-secondary);
line-height: 1.4;
}
.p-whitening-case__figure img {
width: 100%;
cursor: zoom-in;
aspect-ratio: 320/220;
object-fit: cover;
}
.p-whitening-case__note {
margin-top: 1em;
text-align: center;
}
/* 金属床義歯
--------------------------------------------------------- */
.p-denture__inner {
width: min(92%, 1470px);
margin-right: auto;
margin-left: auto;
}
.p-denture__heading {
position: relative;
margin-bottom: 1.9em;
padding-left: clamp(48px, 4.8vw, 62px);
}
.p-denture__heading::before,
.p-denture__heading::after {
position: absolute;
border-radius: 50%;
content: '';
}
.p-denture__heading::before {
top: 50%;
left: 0;
width: clamp(32px, 3.5vw, 48px);
background-color: #f8d8be;
transform: translateY(-50%);
aspect-ratio: 1/1;
}
.p-denture__heading::after {
top: 50%;
left: clamp(16px, 1.9vw, 28px);
width: clamp(32px, 3.5vw, 48px);
background-color: #f6c89f;
transform: translateY(-50%);
aspect-ratio: 1/1;
}
.p-denture__heading .c-heading__title {
position: relative;
font-size: clamp(1.75rem, .769vw + 1.577rem, 2.5rem);
line-height: 1.5;
}
.p-denture__heading .c-heading__en {
position: relative;
margin-top: .1em;
color: #e3a46a;
font-size: clamp(1.625rem, .769vw + 1.452rem, 2.375rem);
line-height: 1.2;
}
.p-denture__feature {
margin-top: clamp(50px, 5.7vw, 80px);
border-radius: clamp(10px, 1vw, 12px);
background-color: #fff;
box-shadow: 2px 3px 0 0 var(--color-shadow);
}
@media screen and (max-width: 991.98px) {
.p-denture__feature {
padding: 5vw 4vw 6vw;
}
}
@media print, screen and (min-width: 768px) {
.p-denture__feature {
padding-top: clamp(40px, 3.7vw, 60px);
padding-right: clamp(30px, 3vw, 50px);
padding-bottom: clamp(40px, 3.7vw, 60px);
padding-left: clamp(30px, 3vw, 50px);
}
}
.p-denture__feature-title {
position: relative;
margin-bottom: 1em;
padding-bottom: .4em;
font-weight: 500;
font-size: clamp(1.188rem, .449vw + 1.087rem, 1.625rem);
line-height: 1.4;
}
.p-denture__feature-title::after {
position: absolute;
right: 0;
bottom: 0;
left: 0;
height: 1px;
background-color: #f8d0b6;
content: '';
}
.p-denture__feature-list li {
position: relative;
padding-left: 1.5em;
}
.p-denture__feature-list li::before {
position: absolute;
top: .3em;
left: 0;
margin-right: .5em;
color: var(--color-main);
content: '\f14a';
font-weight: 900;
font-size: 120%;
font-family: 'Font Awesome 6 Free';
line-height: 1;
}
.p-denture__feature-list li + li {
margin-top: .25em;
}
.p-denture__cards {
margin-top: clamp(50px, 6.6vw, 100px);
}
.p-denture__card {
padding: clamp(18px, 2vw, 28px);
border: 1px solid #e3a06f;
border-radius: clamp(10px, 1vw, 12px);
}
@media screen and (max-width: 991.98px) {
.p-denture__card {
padding: 6vw 4vw 7vw;
}
}
@media print, screen and (min-width: 992px) {
.p-denture__card {
display: grid;
padding-top: clamp(30px, 2.4vw, 40px);
padding-right: clamp(20px, 1.7vw, 30px);
padding-bottom: clamp(40px, 3.1vw, 50px);
padding-left: clamp(20px, 1.7vw, 30px);
column-gap: clamp(30px, 2.7vw, 50px);
grid-template: 'content media'/1fr clamp(200px, 17.2vw, 300px);
}
}
.p-denture__card + .p-denture__card {
margin-top: clamp(40px, 4.4vw, 60px);
}
.p-denture__card-media {
grid-area: media;
}
@media screen and (max-width: 991.98px) {
.p-denture__card-media {
max-width: 320px;
margin-right: auto;
margin-bottom: clamp(40px, 6.7vw, 50px);
margin-left: auto;
}
}
.p-denture__card-media img {
width: 100%;
border-radius: 6px;
}
.p-denture__card-content {
grid-area: content;
}
.p-denture__price-grid {
margin-top: clamp(22px, 2.3vw, 30px);
}
@media print, screen and (min-width: 992px) {
.p-denture__price-grid {
display: grid;
column-gap: clamp(20px, 1.7vw, 30px);
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media screen and (max-width: 991.98px) {
.p-denture__price-item + .p-denture__price-item {
margin-top: clamp(25px, 4.9vw, 30px);
}
}
.p-denture__price-label {
margin-bottom: .8em;
padding: .3em .5em;
background-color: var(--color-box);
color: #fff;
text-align: center;
font-size: clamp(1.063rem, .128vw + 1.034rem, 1.188rem);
line-height: 1.6;
}
@media screen and (max-width: 991.98px) {
.p-denture__price-label {
font-size: clamp(1.063rem, .158vw + 1.027rem, 1.125rem);
}
}
@media print, screen and (min-width: 992px) {
.p-denture__price-label {
font-size: clamp(.938rem, .431vw + .67rem, 1.188rem);
}
}
.p-denture__price-value {
color: #e3a06f;
text-align: center;
font-size: clamp(1.25rem, .513vw + 1.135rem, 1.75rem);
font-family: var(--font-family-secondary);
line-height: 1.4;
}
.p-denture__price-value span {
font-size: 70%;
font-family: var(--font-family-primary);
}
/* 美容歯科
--------------------------------------------------------- */
.p-cosmetic__inner {
width: min(92%, 1470px);
margin-right: auto;
margin-left: auto;
}
.p-cosmetic__heading {
display: flex;
column-gap: clamp(12px, 1.5vw, 22px);
align-items: flex-start;
}
@media screen and (min-width: 1400px) {
.p-cosmetic__lead {
text-align: center;
}
}
.p-cosmetic__overview {
margin-top: clamp(50px, 6.1vw, 90px);
}
@media print, screen and (min-width: 768px) {
.p-cosmetic__overview {
display: grid;
column-gap: clamp(30px, 3.7vw, 70px);
grid-template: 'media content'/clamp(240px, 22.7vw, 370px) auto;
justify-content: center;
}
}
.p-cosmetic__overview-media {
grid-area: media;
}
@media only screen and (max-width: 767.98px) {
.p-cosmetic__overview-media {
max-width: clamp(300px, 57.6vw, 350px);
margin-bottom: clamp(24px, 6vw, 32px);
margin-inline: auto;
}
}
.p-cosmetic__overview-media img {
width: 100%;
}
.p-cosmetic__overview-content {
grid-area: content;
}
.p-cosmetic__overview-list > * + * {
margin-top: .7em;
}
.p-cosmetic__overview-list li {
font-size: clamp(1.125rem, .321vw + 1.053rem, 1.438rem);
line-height: 1.7;
}
.p-cosmetic__overview-list span {
display: inline-block;
padding-bottom: .3em;
border-bottom: 1px solid var(--color-main);
}
.p-cosmetic__cards {
margin-top: clamp(60px, 7.9vw, 120px);
}
@media print, screen and (min-width: 768px) {
.p-cosmetic__cards {
display: grid;
column-gap: clamp(30px, 3vw, 50px);
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media print, screen and (min-width: 768px) {
.p-cosmetic__item {
display: flex;
flex-direction: column;
}
}
@media only screen and (max-width: 767.98px) {
.p-cosmetic__item + .p-cosmetic__item {
margin-top: clamp(40px, 9.6vw, 50px);
}
}
.p-cosmetic__item-title {
padding-bottom: .4em;
border-bottom: 1px solid var(--color-main);
font-weight: 500;
font-size: clamp(1.5rem, .577vw + 1.37rem, 2.063rem);
line-height: 1.5;
}
.p-cosmetic__item-media {
margin-top: clamp(20px, 2vw, 26px);
}
.p-cosmetic__item-media img {
width: 100%;
height: auto;
}
.p-cosmetic__item-media.--col2 {
display: flex;
}
.p-cosmetic__item-media.--col2 img {
width: 50%;
}
.p-cosmetic__item-body {
margin-top: clamp(20px, 2.2vw, 30px);
border-radius: clamp(10px, 1vw, 12px);
background-color: #fff;
box-shadow: 2px 3px 0 0 var(--color-shadow);
}
@media only screen and (max-width: 767.98px) {
.p-cosmetic__item-body {
padding: 5vw 4vw 6vw;
}
}
@media print, screen and (min-width: 768px) {
.p-cosmetic__item-body {
padding-top: clamp(40px, 3.3vw, 50px);
padding-right: clamp(30px, 3vw, 50px);
padding-bottom: clamp(40px, 4.1vw, 70px);
padding-left: clamp(30px, 3vw, 50px);
flex-grow: 1;
}
}
/* ほうれい線治療
--------------------------------------------------------- */
.p-cosmetic-facial {
margin-top: clamp(60px, 7.9vw, 120px);
padding-top: clamp(50px, 6.6vw, 100px);
padding-bottom: clamp(50px, 5.7vw, 80px);
background-color: var(--color-base2);
}
.p-cosmetic-facial__inner {
width: min(92%, 1470px);
margin-right: auto;
margin-left: auto;
}
.p-cosmetic-facial__title {
padding-bottom: .4em;
border-bottom: 1px solid var(--color-main);
font-weight: 500;
font-size: clamp(1.75rem, .769vw + 1.577rem, 2.5rem);
line-height: 1.4;
}
@media only screen and (max-width: 767.98px) {
.p-cosmetic-facial__media {
margin-top: clamp(24px, 5.8vw, 30px);
}
}
@media print, screen and (min-width: 768px) {
.p-cosmetic-facial__media {
display: grid;
column-gap: 4%;
grid-template: 'img content'/clamp(350px, 29.8vw, 450px) 1fr;
align-items: flex-start;
}
}
.p-cosmetic-facial__img {
grid-area: img;
}
@media only screen and (max-width: 767.98px) {
.p-cosmetic-facial__img {
max-width: clamp(350px, 66.5vw, 400px);
margin-bottom: clamp(24px, 5.8vw, 30px);
margin-inline: auto;
}
}
@media print, screen and (min-width: 768px) {
.p-cosmetic-facial__img {
margin-bottom: auto;
}
}
.p-cosmetic-facial__img img {
width: 100%;
}
.p-cosmetic-facial__content {
border-radius: clamp(10px, 1vw, 12px);
background-color: #fff;
box-shadow: 2px 3px 0 0 #ecd6c1;
box-shadow: 2px 3px 0 0 var(--color-shadow2);
grid-area: content;
}
@media only screen and (max-width: 767.98px) {
.p-cosmetic-facial__content {
padding: 5vw 4vw 6vw;
}
}
@media print, screen and (min-width: 768px) {
.p-cosmetic-facial__content {
padding-top: clamp(40px, 3.3vw, 50px);
padding-right: clamp(30px, 3vw, 50px);
padding-bottom: clamp(40px, 4.1vw, 70px);
padding-left: clamp(30px, 3vw, 50px);
}
}
.p-cosmetic-lips {
margin-top: clamp(60px, 7.9vw, 120px);
}
.p-cosmetic-lips__inner {
width: min(92%, 1470px);
margin-right: auto;
margin-left: auto;
}
.p-cosmetic-lips__heading {
display: flex;
column-gap: clamp(12px, 1.5vw, 22px);
align-items: flex-start;
}
.p-cosmetic-lips__heading-mark {
width: clamp(34px, 3.5vw, 46px);
border-radius: 50%;
background-color: var(--color-base2);
flex-shrink: 0;
aspect-ratio: 1;
}
.p-cosmetic-lips__heading-body {
min-width: 0;
}
.p-cosmetic-lips__heading-title {
font-weight: 500;
font-size: clamp(1.75rem, 1.282vw + 1.462rem, 3rem);
line-height: 1.4;
}
.p-cosmetic-lips__heading-en {
margin-top: .1em;
color: var(--color-main);
font-style: italic;
font-size: clamp(1.5rem, .641vw + 1.356rem, 2.125rem);
font-family: var(--font-family-secondary);
line-height: 1.2;
}
@media only screen and (max-width: 767.98px) {
.p-cosmetic-lips__body {
margin-top: clamp(30px, 7.5vw, 40px);
}
}
@media print, screen and (min-width: 768px) {
.p-cosmetic-lips__body {
display: grid;
margin-top: clamp(50px, 4.5vw, 70px);
column-gap: clamp(30px, 3.7vw, 70px);
grid-template: 'media recommend'/50% auto;
}
}
.p-cosmetic-lips__media {
grid-area: media;
}
@media only screen and (max-width: 767.98px) {
.p-cosmetic-lips__media {
margin-bottom: clamp(24px, 6vw, 32px);
}
}
.p-cosmetic-lips__media img {
width: 100%;
}
.p-cosmetic-lips__recommend {
grid-area: recommend;
}
.p-cosmetic-lips__recommend-title {
display: inline-block;
margin-bottom: .3em;
padding: .6em 1.2em;
border-radius: .4em;
background-color: var(--color-sub);
color: #fff;
font-weight: 500;
font-size: clamp(1rem, .513vw + .885rem, 1.5rem);
line-height: 1.5;
}
.p-cosmetic-lips__recommend-list {
margin-top: clamp(18px, 1.8vw, 24px);
}
.p-cosmetic-lips__recommend-list > * + * {
margin-top: clamp(12px, 1.3vw, 18px);
}
.p-cosmetic-lips__recommend-list li {
font-size: clamp(1.125rem, .321vw + 1.053rem, 1.438rem);
line-height: 1.7;
}
.p-cosmetic-lips__recommend-list span {
display: inline-block;
padding-bottom: .3em;
border-bottom: 1px solid var(--color-main);
}
/* 歯科医としての想い
--------------------------------------------------------- */
.p-about-philosophy__inner {
width: min(92%, 1470px);
margin-right: auto;
margin-left: auto;
}
@media only screen and (max-width: 767.98px) {
.p-about-philosophy .c-heading-sideline {
display: block;
}
}
@media only screen and (max-width: 767.98px) {
.p-about-philosophy .c-heading-sideline::before,
.p-about-philosophy .c-heading-sideline::after {
display: none;
}
}
.p-about-philosophy__body {
position: relative;
margin-top: clamp(30px, 3.3vw, 46px);
}
@media screen and (min-width: 1200px) {
.p-about-philosophy__body {
display: grid;
column-gap: 8%;
grid-template: 'content img'/1fr 40%;
align-items: flex-start;
}
}
.p-about-philosophy__content {
position: relative;
z-index: 1;
grid-area: content;
}
.p-about-philosophy__content p + p {
margin-top: 1.5em;
}
.p-about-philosophy__content strong {
color: var(--color-txt2);
font-weight: 400;
}
.p-about-philosophy__img {
position: relative;
max-width: 600px;
margin-right: auto;
margin-left: auto;
text-align: center;
grid-area: img;
}
@media screen and (max-width: 1199.98px) {
.p-about-philosophy__img {
margin-top: clamp(40px, 6.7vw, 50px);
}
}
.p-about-philosophy__img img {
width: 100%;
height: auto;
}
.p-about-philosophy__img-logo {
position: absolute;
border-radius: 50%;
background-color: #fff;
box-shadow: 2px 3px 0 0 var(--color-shadow);
}
@media screen and (max-width: 1199.98px) {
.p-about-philosophy__img-logo {
bottom: -3em;
left: -2vw;
width: clamp(120px, 16.7vw, 140px);
height: clamp(120px, 16.7vw, 140px);
padding: clamp(20px, 3.2vw, 30px);
}
}
@media screen and (min-width: 1200px) {
.p-about-philosophy__img-logo {
bottom: -3em;
left: -4em;
width: clamp(150px, 10.6vw, 180px);
height: clamp(150px, 10.6vw, 180px);
padding: clamp(20px, 1.6vw, 30px);
}
}
.p-about-philosophy__img-logo img {
width: 100%;
height: 100%;
object-fit: contain;
}
/* 米山歯科クリニックの治療方針
--------------------------------------------------------- */
.p-about-policy {
margin-top: clamp(60px, 7.9vw, 120px);
}
.p-about-policy__inner {
width: min(92%, 1470px);
margin-inline: auto;
}
.p-about-policy__content {
border-radius: clamp(10px, 1vw, 12px);
background-color: #fff;
box-shadow: 2px 3px 0 0 #ecd6c1;
box-shadow: 2px 3px 0 0 var(--color-shadow2);
grid-area: content;
}
@media only screen and (max-width: 767.98px) {
.p-about-policy__content {
padding: 5vw 4vw 6vw;
}
}
@media print, screen and (min-width: 768px) {
.p-about-policy__content {
padding-top: clamp(40px, 3.3vw, 50px);
padding-right: clamp(30px, 3vw, 50px);
padding-bottom: clamp(40px, 3.3vw, 50px);
padding-left: clamp(30px, 3vw, 50px);
}
}
.p-about-policy__list li {
position: relative;
padding-left: 1.1em;
line-height: 1.6;
}
@media print, screen and (min-width: 768px) {
.p-about-policy__list li {
font-size: clamp(1.063rem, .087vw + 1.021rem, 1.125rem);
}
}
.p-about-policy__list li::before {
position: absolute;
top: .6em;
left: 0;
width: clamp(8px, .8vw, 10px);
height: clamp(8px, .8vw, 10px);
border-radius: 50%;
background-color: #8c7e73;
content: '';
}
.p-about-policy__list li span {
display: inline-block;
padding-bottom: .8em;
border-bottom: 1px solid var(--color-main);
}
.p-about-policy__list li + li {
margin-top: 1.2em;
}
/* 院長挨拶
--------------------------------------------------------- */
.p-about-greeting {
margin-top: clamp(60px, 7.9vw, 120px);
}
.p-about-greeting__inner {
width: min(92%, 1470px);
margin-right: auto;
margin-left: auto;
}
@media print, screen and (min-width: 992px) {
.p-about-greeting__body {
display: grid;
grid-template-columns: 1fr clamp(310px, 23.4vw, 370px);
gap: clamp(50px, 4.1vw, 70px);
}
}
@media screen and (max-width: 991.98px) {
.p-about-greeting__photo {
margin-top: clamp(30px, 5.2vw, 40px);
}
}
@media print, screen and (min-width: 992px) {
.p-about-greeting__photo {
position: relative;
z-index: 0;
margin-top: -.5em;
}
}
.p-about-greeting__photo-img {
position: relative;
z-index: 0;
}
@media screen and (max-width: 991.98px) {
.p-about-greeting__photo-img {
max-width: clamp(300px, 51.8vw, 400px);
margin-inline: auto;
}
}
.p-about-greeting__photo-img img {
height: auto;
max-width: 100%;
}
.p-about-greeting__name {
border-radius: clamp(10px, 1vw, 12px);
background-color: var(--color-box);
color: #fff;
text-align: center;
}
@media screen and (max-width: 991.98px) {
.p-about-greeting__name {
position: relative;
z-index: 1;
margin-top: 1.5em;
padding: 1em 1.4em;
}
}
@media print, screen and (min-width: 992px) {
.p-about-greeting__name {
position: absolute;
right: -1em;
bottom: -1em;
bottom: calc(clamp(40px, 3.9vw, 50px) * -1);
z-index: 1;
padding: .8em 1.4em;
}
}
.p-about-greeting__name-txt {
line-height: 1.5;
}
@media screen and (max-width: 991.98px) {
.p-about-greeting__name-txt {
font-size: clamp(1.25rem, .316vw + 1.179rem, 1.375rem);
}
}
@media print, screen and (min-width: 992px) {
.p-about-greeting__name-txt {
font-size: clamp(1.25rem, .216vw + 1.116rem, 1.375rem);
}
}
.p-about-greeting__name-txt small {
font-size: 80%;
}
@media screen and (max-width: 991.98px) {
.p-about-greeting__name-txt small {
display: inline-block;
margin-right: .5em;
}
}
@media print, screen and (min-width: 992px) {
.p-about-greeting__name-txt small {
display: block;
}
}
.p-about-greeting__name-en {
font-family: var(--font-family-secondary);
}
@media screen and (max-width: 991.98px) {
.p-about-greeting__name-en {
font-size: clamp(.875rem, .158vw + .839rem, .938rem);
}
}
@media print, screen and (min-width: 992px) {
.p-about-greeting__name-en {
font-size: clamp(.875rem, .108vw + .808rem, .938rem);
}
}
.p-about-greeting__career {
margin-top: clamp(60px, 7.9vw, 120px);
}
.p-about-greeting__career-title {
display: flex;
font-weight: 500;
font-size: clamp(1.25rem, .513vw + 1.135rem, 1.75rem);
line-height: 1.6;
align-items: center;
gap: 1em;
}
.p-about-greeting__career-title::before,
.p-about-greeting__career-title::after {
height: 1px;
background-color: #dfb39b;
content: '';
}
.p-about-greeting__career-title::before {
width: 1.4em;
}
.p-about-greeting__career-title::after {
flex: 1;
}
/* 当院について 概要
--------------------------------------------------------- */
.p-about-overview {
margin-top: clamp(60px, 7.9vw, 120px);
}
.p-about-overview__inner {
width: min(92%, 1470px);
margin-right: auto;
margin-left: auto;
}
.p-about-overview__payment {
display: grid;
margin-top: clamp(50px, 6.1vw, 90px);
border-radius: 8px;
background-color: #fff;
box-shadow: 2px 3px 0 0 var(--color-shadow);
gap: clamp(20px, 2.1vw, 28px);
}
@media only screen and (max-width: 767.98px) {
.p-about-overview__payment {
padding: 5vw 4vw 6vw;
}
}
@media print, screen and (min-width: 768px) {
.p-about-overview__payment {
padding-top: clamp(40px, 3.3vw, 50px);
padding-right: clamp(30px, 2.6vw, 40px);
padding-bottom: clamp(40px, 3.3vw, 50px);
padding-left: clamp(30px, 2.6vw, 40px);
grid-template-columns: 1fr 34.9%;
}
}
.p-about-overview__payment-title {
margin-bottom: 1.3em;
color: var(--color-sub);
font-weight: 500;
font-size: clamp(1.25rem, .513vw + 1.135rem, 1.75rem);
line-height: 1.6;
}
.p-about-overview__payment-list li + li {
margin-top: .3em;
}
.p-about-overview__payment-note {
margin-top: 1.5em;
color: var(--color-accent);
}
.p-about-overview__payment-img {
margin-top: clamp(30px, 3.1vw, 40px);
}
.p-about-overview__payment-img img {
height: auto;
max-width: 100%;
}
.p-about-overview__map {
margin-top: clamp(50px, 6.1vw, 90px);
}
/* 当院について 診療内容
--------------------------------------------------------- */
.p-about-medical {
margin-top: clamp(60px, 7.9vw, 120px);
}
.p-about-medical__inner {
width: min(94%, 1200px);
margin-inline: auto;
}
@media only screen and (max-width: 767.98px) {
.p-about-medical__items {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: clamp(20px, 4.4vw, 30px) 2%;
}
}
@media print, screen and (min-width: 768px) {
.p-about-medical__items {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: clamp(20px, 1.9vw, 30px) clamp(15px, 1.3vw, 20px);
}
}
.p-about-medical__item {
position: relative;
display: flex;
flex-direction: column;
padding: 1em .2em;
border-radius: 50%;
background-color: var(--color-box);
color: #fff;
text-align: center;
line-height: 1.5;
align-items: center;
justify-content: center;
aspect-ratio: 1;
}
@media only screen and (max-width: 767.98px) {
.p-about-medical__item {
font-size: clamp(.875rem, .245vw + .82rem, .938rem);
}
}
@media print, screen and (min-width: 768px) {
.p-about-medical__item {
width: clamp(160px, 13.4vw, 200px);
height: clamp(160px, 13.4vw, 200px);
font-size: clamp(1.063rem, .26vw + .938rem, 1.25rem);
}
}
@media only screen and (max-width: 767.98px) {
.p-about-medical__item small {
letter-spacing: 0;
font-size: clamp(.563rem, .735vw + .397rem, .75rem);
}
}
@media print, screen and (min-width: 768px) {
.p-about-medical__item small {
font-size: clamp(.75rem, .087vw + .708rem, .813rem);
}
}
.p-about-medical__item::after {
position: absolute;
right: 15%;
bottom: 1%;
z-index: -1;
width: 0;
height: 0;
border-top: 26px solid var(--color-box);
border-left: 26px solid transparent;
content: '';
}
.p-about-medical__note {
z-index: 1;
margin-top: .5em;
padding: .2em .5em;
border-radius: 4px;
background-color: #fff;
color: #d97d49;
white-space: nowrap;
line-height: 1.4;
}
@media only screen and (max-width: 767.98px) {
.p-about-medical__note {
letter-spacing: 0;
font-size: clamp(.563rem, .49vw + .452rem, .688rem);
}
}
@media print, screen and (min-width: 768px) {
.p-about-medical__note {
font-size: clamp(.75rem, .087vw + .708rem, .813rem);
}
}
.p-about-medical__message {
margin-top: clamp(40px, 4.4vw, 60px);
padding: 1em 1.4em;
border-radius: clamp(10px, 1vw, 12px);
background-color: var(--color-base3);
font-size: clamp(1rem, .128vw + .971rem, 1.125rem);
line-height: 1.7;
}
@media only screen and (max-width: 767.98px) {
.p-about-medical__message {
padding: 5vw 4vw 6vw;
}
}
@media print, screen and (min-width: 768px) {
.p-about-medical__message {
padding-top: clamp(30px, 2.6vw, 40px);
padding-right: clamp(20px, 1.9vw, 30px);
padding-bottom: clamp(30px, 2.6vw, 40px);
padding-left: clamp(20px, 1.9vw, 30px);
text-align: center;
}
}
/* 院内設備紹介
--------------------------------------------------------- */
.p-facilities-barrierfree__inner,
.p-facilities-equipment__inner,
.p-facilities-clinic__inner {
width: min(92%, 1470px);
margin-right: auto;
margin-left: auto;
}
.p-facilities-barrierfree__catch {
text-align: center;
font-weight: 500;
font-size: clamp(1.25rem, 1.026vw + 1.019rem, 2.25rem);
line-height: 1.6;
}
.p-facilities-barrierfree__lead {
margin-top: 1.5em;
font-size: clamp(1rem, .128vw + .971rem, 1.125rem);
line-height: 2;
}
@media print, screen and (min-width: 992px) {
.p-facilities-barrierfree__lead {
text-align: center;
}
}
.p-facilities-barrierfree__unit-items {
margin-top: clamp(50px, 5.7vw, 80px);
}
@media print, screen and (min-width: 768px) {
.p-facilities-barrierfree__unit-items {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: clamp(40px, 3.7vw, 60px) 4%;
}
}
@media screen and (min-width: 1200px) {
.p-facilities-barrierfree__unit-items {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
@media only screen and (max-width: 767.98px) {
.p-facilities-barrierfree__unit-item + .p-facilities-barrierfree__unit-item {
margin-top: 20px;
}
}
.p-facilities-barrierfree__unit-item img {
width: 100%;
border-radius: clamp(10px, 1vw, 12px);
}
.p-facilities-barrierfree__notes {
margin-top: clamp(30px, 3.5vw, 50px);
}
.p-facilities-barrierfree__cards {
margin-top: clamp(50px, 6.6vw, 100px);
}
@media print, screen and (min-width: 768px) {
.p-facilities-barrierfree__cards {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: clamp(40px, 3.7vw, 60px) 4%;
}
}
@media screen and (min-width: 1200px) {
.p-facilities-barrierfree__cards {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
.p-facilities-barrierfree__card {
padding: clamp(15px, 1.5vw, 20px);
border-radius: clamp(10px, 1vw, 12px);
background-color: #fff;
box-shadow: 2px 3px 0 0 var(--color-shadow);
}
@media only screen and (max-width: 767.98px) {
.p-facilities-barrierfree__card + .p-facilities-barrierfree__card {
margin-top: clamp(30px, 3.1vw, 40px);
}
}
.p-facilities-barrierfree__card-img img {
width: 100%;
border-radius: clamp(10px, 1vw, 12px);
}
.p-facilities-barrierfree__card-title {
margin-top: 1em;
text-align: center;
font-weight: 500;
font-size: clamp(1.125rem, .192vw + 1.082rem, 1.313rem);
line-height: 1.5;
}
.p-facilities-barrierfree__card-txt {
margin-top: 1em;
padding-bottom: 1em;
}
.p-facilities-equipment {
margin-top: clamp(60px, 7.9vw, 120px);
}
@media print, screen and (min-width: 768px) {
.p-facilities-equipment__items {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: clamp(40px, 3.7vw, 60px) 4%;
}
}
@media screen and (min-width: 1200px) {
.p-facilities-equipment__items {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
.p-facilities-equipment__item {
padding: clamp(15px, 1.5vw, 20px);
border-radius: clamp(10px, 1vw, 12px);
background-color: #fff;
box-shadow: 2px 3px 0 0 var(--color-shadow);
}
@media only screen and (max-width: 767.98px) {
.p-facilities-equipment__item + .p-facilities-equipment__item {
margin-top: clamp(30px, 3.1vw, 40px);
}
}
.p-facilities-equipment__item-img img {
width: 100%;
height: auto;
border-radius: clamp(10px, 1vw, 12px);
}
.p-facilities-equipment__item-title {
margin-top: 1em;
text-align: center;
font-weight: 500;
font-size: clamp(1.125rem, .192vw + 1.082rem, 1.313rem);
line-height: 1.5;
}
.p-facilities-equipment__item-txt {
margin-top: 1em;
padding-bottom: 1em;
}
.p-facilities-clinic {
margin-top: clamp(60px, 7.9vw, 120px);
}
@media print, screen and (min-width: 768px) {
.p-facilities-clinic__items {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: clamp(40px, 3.7vw, 60px) 4%;
}
}
@media screen and (min-width: 1200px) {
.p-facilities-clinic__items {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
.p-facilities-clinic__item {
padding: clamp(15px, 1.5vw, 20px);
border-radius: clamp(10px, 1vw, 12px);
background-color: #fff;
box-shadow: 2px 3px 0 0 var(--color-shadow);
}
@media only screen and (max-width: 767.98px) {
.p-facilities-clinic__item + .p-facilities-clinic__item {
margin-top: clamp(30px, 3.1vw, 40px);
}
}
.p-facilities-clinic__item-img img {
width: 100%;
height: auto;
border-radius: clamp(10px, 1vw, 12px);
}
.p-facilities-clinic__item-title {
margin-top: 1em;
text-align: center;
font-weight: 500;
font-size: clamp(1.125rem, .192vw + 1.082rem, 1.313rem);
line-height: 1.5;
}
.p-facilities-clinic__item-txt {
margin-top: 1em;
padding-bottom: 1em;
}
/* お問い合わせ
--------------------------------------------------------- */
.p-contact__inner {
width: min(92%, 1470px);
margin-right: auto;
margin-left: auto;
}
.p-contact__section + .p-contact__section {
margin-top: clamp(50px, 6.1vw, 90px);
}
.p-contact__heading {
position: relative;
width: -webkit-fit-content;
width: fit-content;
text-align: center;
margin-inline: auto;
}
.p-contact__heading::before,
.p-contact__heading::after {
position: absolute;
top: clamp(8px, .9vw, 12px);
width: clamp(34px, 3.6vw, 47px);
border-radius: 50%;
background-color: #f5dfca;
content: '';
aspect-ratio: 1/1;
}
.p-contact__heading::before {
right: calc(100% + clamp(18px, 2.2vw, 32px));
}
.p-contact__heading::after {
left: calc(100% + clamp(18px, 2.2vw, 32px));
}
.p-contact__heading-title {
color: #676767;
font-size: clamp(1.5rem, .513vw + 1.385rem, 2rem);
line-height: 1.6;
}
.p-contact__heading-en {
margin-top: .1em;
color: #e5a77e;
font-style: italic;
font-size: clamp(1.625rem, 1.026vw + 1.394rem, 2.625rem);
font-family: var(--font-family-secondary);
line-height: 1;
}
.p-contact__tel-link {
display: block;
width: min(100%, 1170px);
border-radius: clamp(10px, 1vw, 12px);
background-color: #fff;
box-shadow: 2px 3px 0 0 var(--color-shadow);
text-align: center;
text-decoration: none;
margin-inline: auto;
}
@media only screen and (max-width: 767.98px) {
.p-contact__tel-link {
padding: 5vw 2vw 6vw;
}
}
@media print, screen and (min-width: 768px) {
.p-contact__tel-link {
padding-top: clamp(30px, 2.6vw, 40px);
padding-right: clamp(20px, 1.9vw, 30px);
padding-bottom: clamp(30px, 2.6vw, 40px);
padding-left: clamp(20px, 1.9vw, 30px);
}
}
.p-contact__tel-num {
color: #e5a77e;
font-family: var(--font-family-secondary);
line-height: 1.2;
}
@media only screen and (max-width: 767.98px) {
.p-contact__tel-num {
font-size: clamp(1.75rem, .98vw + 1.529rem, 2rem);
}
}
@media print, screen and (min-width: 768px) {
.p-contact__tel-num {
font-size: clamp(2.5rem, .521vw + 2.25rem, 2.875rem);
}
}
.p-contact__tel-num::before {
position: relative;
top: .03em;
display: inline-block;
height: .72em;
margin-right: .4em;
background-color: currentColor;
content: '';
-webkit-mask-image: var(--icon-phone);
mask-image: var(--icon-phone);
-webkit-mask-size: 100% 100%;
mask-size: 100% 100%;
aspect-ratio: 1;
}
@media print {
.p-contact__tel-num::before {
-webkit-print-color-adjust: exact;
}
}
.p-contact__tel-time {
margin-top: .6em;
color: #0e0f0f;
font-weight: 500;
line-height: 1.7;
}
@media only screen and (max-width: 767.98px) {
.p-contact__tel-time {
letter-spacing: 0;
font-size: clamp(.75rem, .49vw + .64rem, .875rem);
}
}
@media print, screen and (min-width: 768px) {
.p-contact__tel-time {
font-size: clamp(.938rem, .26vw + .813rem, 1.125rem);
}
}
.p-contact__line {
margin-top: clamp(25px, 3.1vw, 45px);
margin-inline: auto;
}
@media print, screen and (min-width: 768px) {
.p-contact__line {
display: grid;
column-gap: clamp(40px, 4.1vw, 70px);
grid-template-columns: auto 1fr;
align-items: start;
}
}
.p-contact__line-side {
text-align: center;
}
.p-contact__line-qr {
margin-right: auto;
margin-left: auto;
}
@media only screen and (max-width: 767.98px) {
.p-contact__line-qr {
max-width: 260px;
}
}
@media print, screen and (min-width: 768px) {
.p-contact__line-qr {
width: clamp(240px, 22.3vw, 360px);
}
}
.p-contact__line-qr img {
width: 100%;
}
.p-contact__line-btn {
margin-top: clamp(20px, 2.2vw, 30px);
}
@media only screen and (max-width: 767.98px) {
.p-contact__line-content {
margin-top: clamp(40px, 9.6vw, 50px);
}
}
/* ========================================================================
/*
/* Utility
/*
========================================================================= */
/* typography
--------------------------------------------------------- */
.u-kome {
position: relative;
padding-left: 1.2em;
}
.u-kome.--inline {
display: inline-block;
}
.u-kome.--red::before {
color: var(--color-accent);
}
.u-kome::before {
position: absolute;
left: 0;
content: '※';
}
/* ------------------------------------------------------------------------
/* 印刷用
------------------------------------------------------------------------- */
@media print {
html {
font-size: 10px !important;
}
}
@page {
margin: 8mm;
size: A4 portrait;
}