body {
font-family: var(--font-family);
color: var(--text-color);
margin: 0;
padding: 0;
line-height: 1.8;
}
.section_title {
font-size: 24px;
margin-bottom: 20px;
text-align: center;
font-weight: bold;
}
.inner {
max-width: 1200px;
margin: 0 auto;
padding: 40px 20px;
}
.top-first {
position: relative;
}
.top-first .container {
position: absolute;
top: 0;
width: 100%;
left: 0;
right: 0;
height: 100%;
max-width: 1900px;
}
.top-first figure.top-first-main {
height: clamp(50rem, 31.25rem + 39.06vw, 62.5rem);
}
.top-first figure.top-first-main img {
width: 100%;
height: 100%;
object-fit: cover;
}
.top-first figure.top-first-point {
position: absolute;
right: 5%;
bottom: clamp(1rem, -12.5rem + 28.13vw, 10rem);
}
.top-first figure.top-first-point img {
width: clamp(32.5rem, 21.25rem + 23.44vw, 40rem);
}
.top-first h1 {
position: absolute;
top: 24%;
left: 5%;
text-align: left;
line-height: 1;
font-weight: 400;
display: flex;
flex-direction: column;
color: var(--white-color);
gap: 16px;
}
.top-first h1 > span:first-child {
font-size: 30px;
}
.top-first h1 > span:nth-child(2) {
font-size: 68px;
}
.top-first h1 > span:nth-child(3) {
font-size: 16px;
display: flex;
gap: 8px;
}
.top-first h1 > span:nth-child(3) span {
border: solid 2px var(--white-color);
border-radius: 5px;
padding: 4px 8px;
}
h2 {
color: var(--white-color);
font-size: 32px;
font-weight: 600;
line-height: 1.2;
position: relative;
}
h2 .en {
display: block;
font-size: 14px;
color: var(--sub-color);
}
.contact h2 {
color: var(--main-color);
}
.top-h2-border {
position: relative;
display: inline-block;
margin-bottom: 12px;
}
.top-h2-border.left::before {
content: "";
position: absolute;
right: -18px;
bottom: -12px;
width: 100vw;
height: 4px;
}
.top-h2-border.right::before {
content: "";
position: absolute;
left: -18px;
bottom: -12px;
width: 100vw;
height: 4px;
}
.top-h2-border.white::before {
background: var(--white-color);
}
.top-h2-border.blue::before {
background: var(--main-color);
}
.top-h2-border.gold::before {
background: var(--sub-color);
}
.points-wrap,.movie-wrap,.column-wrap,.treatment-wrap,.news-wrap,.director {
margin: clamp(2.5rem, 1.952rem + 2.25vw, 3.75rem) auto 0;
}
.features-wrap {
margin: 0 auto clamp(2.5rem, 1.952rem + 2.25vw, 3.75rem);
}
.conceived {
margin: clamp(2.5rem, 1.952rem + 2.25vw, 3.75rem) auto;
}
.contact {
margin: clamp(5rem, 3.904rem + 4.49vw, 7.5rem) auto 0;
}
.banners {
max-width: 1900px;
width: 100%;
}
.banners-wrap {
    --tile-h: clamp(10rem, 7.809rem + 8.99vw, 15rem);
padding: clamp(1.25rem, 0.702rem + 2.25vw, 2.5rem) 0;
overflow: hidden;
}
.banners .swiper-slide{
height: var(--tile-h);
width: calc(var(--tile-h) * 16 / 9);
}
.banners .swiper-slide a,
.banners .swiper-slide img{
display: block;
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 10px;
}
.square.swiper-pagination {
position: static;
margin-top: 20px;
display: flex;
justify-content: center;
padding: 0 16px;
gap: 2px;
}
.square.swiper-pagination > span {
opacity: 0.6;
transition: .3s;
}
.square.swiper-pagination > span.swiper-pagination-bullet-active {
background: var(--accent-color);
opacity: 1;
}
.square.swiper-pagination > span:not(.swiper-pagination-bullet-active) {
background: var(--white-color);
}
.news-wrap ul {
display: grid;
grid-template-columns: 1fr;
margin-bottom: 12px;
}
.news-wrap li {
border-bottom: 1px solid var(--sub-color);
}
.news-wrap li a {
display: flex;
padding: 16px 24px;
color: var(--white-color);
text-decoration: none;
align-items: center;
font-weight: 600;
gap: 20px;
}
.news-wrap li a span:first-child {
display: flex;
align-items: center;
gap: 20px;
white-space: nowrap;
}
.news-wrap li a span:first-child span {
background: var(--sub-color);
    width: 100px;
    text-align: center;
    font-size: 14px;
padding: 4px 0;
border-radius: 10px;
}
.news-wrap li a span:first-child span.important {
background: var(--accent-color);
}
.news-wrap > div {
text-align: right;
}
.news-wrap > div a {
color: var(--white-color);
}
.news-wrap .view-all {
margin-top: 12px;
}
.view-all a {
color: var(--white-color);
font-weight: 600;
}
.view-all a::after {
content: "→";
padding-left: 6px;
}
.features-wrap {
position: relative;
}
.features-wrap .swiper {
width: 80%;
margin: auto;
}
.features-wrap .swiper-slide {
background: var(--white-color);
width: clamp(30rem, 26.25rem + 7.81vw, 32.5rem);
height: auto;
border-radius: 10px;
overflow: hidden;
}
.features-wrap ul li dl dt {
margin: 28px 20px;
text-align: center;
font-size: clamp(1rem, 0.89rem + 0.45vw, 1.25rem);
font-weight: 600;
color: var(--white-color);
background: var(--main-color);
padding: 12px 8px;
}
.features-wrap ul li dl dt::before {
font-family: "Merriweather", serif;
padding-right: 12px;
}
.features-head01::before{
content: "01";
}
.features-head02::before{
content: "02";
}
.features-head03::before{
content: "03";
}
.features-head04::before{
content: "04";
}
.features-head05::before{
content: "05";
}
.features-wrap ul li dl dd {
margin: 28px 20px;
padding-top: 26px;
border-top: 1px solid var(--main-color);
color: var(--main-color);
}
.features-wrap .swiper-button-prev::after,
.features-wrap .swiper-button-next::after {
content: none;
}
.features-wrap .swiper-button-prev,.features-wrap .swiper-button-next {
width: clamp(3.875rem, -0.438rem + 8.98vw, 6.75rem);
height: auto;
display: flex;
background: none;
}
.features-wrap .swiper-button-prev {
left: clamp(0.5rem, -0.625rem + 2.34vw, 1.25rem);
}
.features-wrap .swiper-button-next {
right: clamp(0.5rem, -0.625rem + 2.34vw, 1.25rem);
}
.features-wrap .swiper-button-prev svg,.features-wrap .swiper-button-next svg {
width: 100%;
height: auto;
stroke: none;
}
/* ポイント */
.points-list {
display: flex;
flex-direction: column;
gap: clamp(3.75rem, 1.875rem + 3.91vw, 5rem);
}
.points-list li {
counter-increment: point-counter;
position: relative;
}
.points-list dl {
display: flex;
gap: clamp(1.25rem, -0.625rem + 3.91vw, 2.5rem);
align-items: center;
}
.points-list dt {
font-size: clamp(1.125rem, 0.938rem + 0.39vw, 1.25rem);
font-weight: 600;
color: var(--main-color);
background: var(--white-color);
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
aspect-ratio: 1 / 1;
white-space: nowrap;
position: relative;
flex-direction: column;
min-width: clamp(11.25rem, 7.125rem + 8.59vw, 14rem);
width: clamp(11.25rem, 7.125rem + 8.59vw, 14rem);
}
.points-list dt::before {
content: counter(point-counter);
font-family: "Merriweather", serif;
position: absolute;
bottom: clamp(7.5rem, 4.5rem + 6.25vw, 9.5rem);
left: 0;
color: var(--sub-color);
font-size: clamp(5rem, 3.125rem + 3.91vw, 6.25rem);
font-weight: 200;
line-height: 1;
z-index: 1;
}
.points-list dt span {
display: block;
}
.points-list dd {
width: 800px;
font-size: clamp(1.125rem, 0.938rem + 0.39vw, 1.25rem);
color: var(--white-color);
}
.points-wrap .view-all-red {
margin-top: 16px;
text-align: right;
}
.view-all-red a {
background: var(--accent-color);
color: var(--white-color);
font-weight: 600;
padding: 4px 12px;
border-radius: 5px;
font-size: clamp(1rem, 0.813rem + 0.39vw, 1.125rem);
}
.view-all-red a::after {
content: "→";
padding-left: 6px;
}
.point-sns {
display: flex;
justify-content: center;
align-items: center;
gap: 40px;
flex-wrap: wrap;
margin-top: 40px;
}
.point-sns p {
font-size: clamp(1rem, 0.89rem + 0.45vw, 1.25rem);
color: var(--white-color);
}
.point-sns ul {
display: flex;
justify-content: center;
gap: 24px;
max-width: 300px;
align-items: center;
}
.point-sns ul li:first-child a img {
padding: 4px;
}

/* 動画 */
.movie-wrap {
max-width: 800px;
}
.movie-wrap figure {
position: relative;
padding-bottom: 56.25%;
margin-bottom: 12px;
}
.movie-wrap iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.movie-wrap time {
display: block;
color: var(--white-color);
}
.movie-wrap p {
font-size: 18px;
color: var(--white-color);
}
/* 診療内容 */
.treatment {
color: #fff;
}
.treatment h2 {
color: #fff;
}
.treatment-text {
margin: 20px 0 40px;
}
.treatment-list {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: clamp(1.25rem, 1.14rem + 0.45vw, 1.5rem);
}
.treatment-list a {
display: block;
padding: clamp(1rem, 0.89rem + 0.45vw, 1.25rem);
background: var(--white-color);
color: var(--main-color);
text-align: center;
font-weight: 600;
border-radius: 10px;
font-size: clamp(1rem, 0.945rem + 0.22vw, 1.125rem);
}
/* ご懐妊数 */
.conceived {
color: var(--white-color);
background: linear-gradient(to right, var(--sub-color) 50%, transparent 50%);
}
.conceived .container {
padding: 0 16px;
}
.conceived-wrap {
display: flex;
padding: 40px 16px 40px 0;
border-radius: 0 10px 10px 0;
gap: clamp(1.75rem, -1.25rem + 6.25vw, 3.75rem);
background: var(--sub-color);
}

.conceived h2 {
font-size: clamp(1.5rem, 0.75rem + 1.56vw, 2rem);
}
.conceived h2 span {
display: block;
line-height: 1.5;
}
.conceived h2 span:last-child {
font-size: clamp(0.875rem, 0.688rem + 0.39vw, 1rem);
}
.conceived-list {
display: flex;
gap: clamp(1.25rem, -1.375rem + 5.47vw, 3rem);
align-items: center;
}
.conceived-list li {
line-height: 1.3;
font-weight: 500;
}
.conceived-list li:not(:first-child) {
margin-top: clamp(1.125rem, 2.34vw, 1.875rem);
}
.conceived-list li > span {
display: block;
}
.conceived-list li:first-child > span:first-child {
font-size: clamp(1.125rem, 0.563rem + 1.17vw, 1.5rem);
}
.conceived-list li:first-child > span:last-child {
font-size: clamp(2.25rem, -0.75rem + 6.25vw, 4.25rem);
}
.conceived-list li:first-child > span:last-child span {
font-size: clamp(1.25rem, 0.125rem + 2.34vw, 2rem);
margin-left: 4px;
}
.conceived-list li:not(:first-child) > span:first-child {
font-size: clamp(0.875rem, 0.5rem + 0.78vw, 1.125rem);
}
.conceived-list li:not(:first-child) > span:last-child {
font-size: clamp(1.75rem, -0.125rem + 3.91vw, 3rem);
}
.conceived-list li:not(:first-child) > span:last-child span {
font-size: clamp(1.125rem, 0.563rem + 1.17vw, 1.5rem);
margin-left: 4px;
}
/* コラム */
.column {
overflow-x: hidden;
}
.column-wrap {
background: var(--white-color);
padding: 40px 0 40px 40px;
border-radius: 10px 0 0 10px;
position: relative;
outline: 1px solid var(--white-color);
}
.column-wrap::after {
content: "";
position: absolute;
background: var(--white-color);
top: 0;
left: 99%;
width: 50vw;
height: 100%;
z-index: -1;
outline: 1px solid var(--white-color);
}
.column-wrap ul {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 48px;
}
.column-wrap li a {
display: flex;
flex-direction: column;
height: 100%;
color: var(--white-color);
line-height: 1.2;
border-radius: 10px;
overflow: hidden;
}
.column-wrap li a figure img {
width: 100%;
object-fit: cover;
aspect-ratio: 2.4 / 1.2;
}
.column-wrap li a time {
display: block;
font-size: clamp(0.75rem, 0.563rem + 0.39vw, 0.875rem);
padding: 16px 8px 8px;
background: var(--main-color);
outline: 1px solid var(--main-color);
}
.column-wrap li a span {
display: block;
padding: 0 8px 16px;
font-size: clamp(0.875rem, 0.688rem + 0.39vw, 1rem);
background: var(--main-color);
outline: 1px solid var(--main-color);
flex: auto;
}
.column .view-all {
margin-top: 24px;
text-align: right;
}
.column .view-all a {
color: var(--main-color);
font-weight: 600;
font-size: 20px;
}
.column .view-all a::after {
content: "→";
padding-left: 6px;
}
/* 院長紹介 */
.director {
background: linear-gradient(to left, var(--white-color) 50%,transparent 50% );
overflow-x: hidden;
}
.director .container {
color: var(--main-color);
padding: 80px 0;
border-radius: 10px 0 0 10px;
}

.director .container {
padding: 0 16px;
}
.director-wrap {
display: grid;
grid-template-columns: auto 1fr;
grid-template-rows: auto;
column-gap: 60px;
background: var(--white-color);
border-radius: 10px 0 0 10px;
padding: 60px 0 60px 60px;
}
.director figure {
grid-column: 1 / 2;
grid-row: 1 / 3;
}
.director figure img {
width: 100%;
border-radius: 8px;
background: #ddd;
height: 400px;
object-fit: cover;
}
.director h2 {
color: var(--main-color);
grid-column: 2 / 3;
grid-row: 1 / 2;
}
.director h2 span:first-child span {
font-family: "Merriweather", serif;
}
.doctor-profile {
margin-top: 12px;
grid-column: 2 / 3;
grid-row: 2 / 3;
}
.doctor-profile > div {
margin: 32px 0 16px;
display: flex;
gap: 8px;
align-items: center;
line-height: 1;
}
.doctor-profile > div span:last-child {
font-size: 28px;
font-weight: 600;
}
/* お問い合わせ */
.contact {
padding: clamp(1.25rem, 0.702rem + 2.25vw, 2.5rem) 0;
background: #fff;
}
.contact-wrap {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 32px;
margin-top: 40px;
}
.contact-wrap li:first-child {
grid-column: 1 / 2;
grid-row: 1 / 2;
}
.contact-wrap li:nth-child(2) {
grid-column: 2 / 3;
grid-row: 1 / 2;
}
.contact-wrap li:last-child {
grid-column: 1 / 3;
grid-row: 2 / 3;
}

.contact-wrap li a {
display: flex;
gap:12px;
padding: 40px 0;
background: var(--main-color);
color: #fff;
border-radius: 8px;
font-size: 24px;
font-weight: 600;
width: 100%;
align-items: center;
justify-content: center;
}

.contact-wrap li a > * {
width: 32px;
height: 32px;
color: var(--sub-color);
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
.pc {
display: none;
}
.sp {
display: block;
}
h2 {
font-size: clamp(1.5rem, 0.468rem + 4.23vw, 2.5rem);
}

h2 .en {
font-size: clamp(0.875rem, 0.23rem + 2.65vw, 1.5rem);
}
.top-first figure.top-first-main {
height: clamp(42.5rem, 34.762rem + 31.75vw, 50rem);
}
.top-first figure.top-first-point {
left: 0;
right: 0;
bottom: 40px;
width: 100%;
padding: 0 16px;
}
.top-first figure.top-first-point img {
width: 100%;
max-width: 400px;
margin-left: auto;
}
.top-first h1 {
top: 10%;
left: 0;
right: 0;
width: 100%;
padding: 0 16px;
}
.top-first h1 > span:first-child {
font-size: clamp(1.5rem, 1.113rem + 1.59vw, 1.875rem);
}
.top-first h1 > span:nth-child(2) {
font-size: clamp(2.25rem, 0.187rem + 8.47vw, 4.25rem);
}
.top-first h1 > span:nth-child(3) {
flex-wrap: wrap;
margin-top: 8px;
}
.top-first h1 span:last-child span {
display: block;
font-size: 16px;
}
.banners-wrap .square.swiper-pagination {
display: none;
}
.news-wrap li a {
align-items: flex-start;
flex-direction: column;
gap: 8px;
padding: 16px 0;
}
.features-wrap .swiper {
width: calc(100% - 16px);
margin: 0 auto 0 16px;
}
.features-wrap ul li dl dt {
margin: clamp(1.25rem, 0.734rem + 2.12vw, 1.75rem) 16px;
padding: 12px 8px;
}
.features-wrap ul li dl dd {
font-size: clamp(0.875rem, 0.746rem + 0.53vw, 1rem);
padding-top: clamp(1.25rem, 0.734rem + 2.12vw, 1.75rem);
margin: clamp(1.25rem, 0.734rem + 2.12vw, 1.75rem) 16px;
}
.features-wrap .swiper-button-prev,
.features-wrap .swiper-button-next {
display: none;
}
.points-wrap {
margin: clamp(3.75rem, 2.46rem + 5.29vw, 5rem) auto 0;
}
.points-list {
gap: clamp(2.5rem, 1.21rem + 5.29vw, 3.75rem);
}
.points-list dt {
width: clamp(10rem, 7.421rem + 10.58vw, 12.5rem);
min-width: clamp(10rem, 7.421rem + 10.58vw, 12.5rem);
font-size: clamp(1.125rem, 0.996rem + 0.53vw, 1.25rem);
}
.points-list dt::before {
bottom: clamp(6.75rem, 5.202rem + 6.35vw, 8.25rem);
font-size: clamp(5rem, 3.71rem + 5.29vw, 6.25rem);
}
.points-list dd {
font-size: clamp(1rem, 0.871rem + 0.53vw, 1.125rem);
}
.points-wrap .view-all-red {
margin-top: 12px;
}
.point-sns {
gap: 12px;
}
.treatment-list {
grid-template-columns: repeat(2, 1fr);
}
.conceived-wrap {
flex-direction: column;
gap: clamp(1.25rem, -0.04rem + 5.29vw, 2.5rem);
}
.conceived-list {
flex-direction: column;
align-items: flex-start;
}
.conceived h2 {
font-size: clamp(1.75rem, 0.718rem + 4.23vw, 2.75rem);
}
.conceived h2 span {
line-height:  1.2;
}
.conceived h2 span:last-child {
font-size: clamp(1.125rem, 0.996rem + 0.53vw, 1.25rem);
margin-top: clamp(0.5rem, 0.242rem + 1.06vw, 0.75rem);
}
.conceived-list {
gap: clamp(0.625rem, -0.02rem + 2.65vw, 1.25rem);
}
.conceived-list li {
line-height: 1.2;
}
.conceived-list li:first-child {
margin-bottom: 20px;
}
.conceived-list li:not(:first-child) {
margin-top: 0;
}
.conceived-list li:first-child > span:first-child {
font-size: clamp(1.25rem, 0.734rem + 2.12vw, 1.75rem);
}
.conceived-list li:first-child > span:last-child {
font-size: clamp(2.75rem, 1.718rem + 4.23vw, 3.75rem);
}
.conceived-list li:first-child > span:last-child span {
font-size: clamp(1.5rem, 1.242rem + 1.06vw, 1.75rem);
margin-left: 8;
}
.conceived-list li:not(:first-child) > span:first-child {
font-size: clamp(1.125rem, 0.996rem + 0.53vw, 1.25rem);
}
.conceived-list li:not(:first-child) > span:last-child {
font-size: clamp(2.25rem, 1.734rem + 2.12vw, 2.75rem);
}
.conceived-list li:not(:first-child) > span:last-child span {
font-size: clamp(1.25rem, 0.992rem + 1.06vw, 1.5rem);
margin-left: 4px;
}
.column-wrap {
padding: 40px 0 40px clamp(1.25rem, -1.082rem + 7.46vw, 2.5rem);
}
.column-wrap ul {
grid-template-columns: 1fr 1fr;
gap: clamp(1.25rem, -1.082rem + 7.46vw, 2.5rem);
}
.column-wrap li a time {
font-size: clamp(0.75rem, 0.517rem + 0.75vw, 0.875rem);
}
.column-wrap li a span {
font-size: clamp(0.875rem, 0.642rem + 0.75vw, 1rem);
}
.director-wrap {
display: flex;
flex-direction: column;
padding: 40px 0 40px 20px;
}
.director figure {
order: 2;
margin: 40px 0 20px;
}
.director h2 {
order: 1;
}
.director h2 .top-h2-border.blue::before {
right: -18px;
left: auto;
}
.director h2 span:first-child span {
display: block;
}
.doctor-profile {
order: 3;
}
.contact-wrap {
display: flex;
flex-direction: column;
}

.points-list li::before {
position: static;
margin-bottom: 16px;
}

.points-list dl {
align-items: flex-start;
flex-direction: column;
gap: 16px;
width: 100%;
}
.points-list dd {
width: 100%;
}
.contact-wrap li a {
padding: clamp(1.25rem, -0.04rem + 5.29vw, 2.5rem) 0;
font-size: clamp(1.25rem, 0.992rem + 1.06vw, 1.5rem);
}
}
@media (max-width: 500px) {
.column-wrap ul {
grid-template-columns: 1fr;
}
.column-wrap li a time {
font-size: 14px;
}
.column-wrap li a span {
font-size: 16px;
}
}