@charset "UTF-8";

*{
    margin: 0;
    padding: 0;
}
html {
    font-size: 62.5%;
    background-color: #f7f9fc;
}
body{
    font-family: 'Rounded Mplus 1c', sans-serif;
    font-size: 1.8rem;
    line-height: 1.5;
    letter-spacing: .05em;
}
img {
    max-width: 100%;
}

ul {
    list-style: none;
}
a {
    color: #333;
    text-decoration: none;
}
.container {
    max-width: 1000px;
    margin: 0 auto;
}
.flex{
    display: flex;
}
.between{
    justify-content: space-between;
}
.justify-center{
    justify-content: center;
}
.maru{
    border-radius: 10px;
}
.font-green{
    color: #00952F;
}
.font-blue{
    color: #003399;
}
.font-orange{
    color: #FE6701;
}
.font-red{
    color: red;
}
.font-white{
    color: #fff;
}
.back-green{
    background-color: #EAF6E9;
}
.back-blue{
    background-color: #E3EDF9;
}
.waku-blue{
    padding: 50px;
    border: 2px solid #003399;
    border-radius: 40px;
}
.waku-green{
    padding: 50px;
    border: 2px solid #2BAA5B;
    border-radius: 40px;
}
.bold{
    font-weight: bold;
}
.base-pic{
    width: 300px;
    height: 200px;
    object-fit: cover;
}
.right{
    text-align: right;
}
.center{
    text-align: center;
}
.align-center{
    align-items: center;
}
.bottom{
    display: flex;
    align-items: flex-end;
}
.width-none{
    max-width: none;
}
.width-270{
    width: 270px;
}
.sp{
    display: none;
}
.pc {
    display: table-cell;
}
.table-sp{
    display: none;
}
.sp-400px{
    display: none;
}


/* FONT-SIZE */
.font-size-15{
    font-size: 1.5rem;
}
.font-size-20{
    font-size: 2.0rem;
}
.font-size-30{
    font-size: 3.0rem;
}
.content-title{
    color: #00952F;
    font-size: 2.5rem;
}
.header-title{
    font-size: 3.0rem;
}
.sub-title{
    font-size: 4.0rem;
}
.gap{
    gap: 30px;
}


/* MARGIN・PADDING */
.margin-10{
    margin: 10px;
}
.margin-top-20{
    margin-top: 20px;
}
.margin-bottom-60{
    margin-bottom: 60px;
}
.margin-bottom-30{
    margin-bottom: 30px;
}
.margin-bottom-20{
    margin-bottom: 20px;
}
.margin-bottom-10{
    margin-bottom: 10px;
}
.margin-left-10{
    margin-left: 10px;
}
.padding-side-150{
    padding: 0 150px;
}
.padding-side-50{
    padding: 0 50px;
}
.padding-side-30{
    padding: 0 30px;
}
.margin-0-auto{
    margin: 0 auto;
}


/* BTN */
.btn {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    background-color: #2BAA5B;
    color: #fff;
    border-radius: 20px;
    text-decoration: none;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.4); /* 通常時の影 */
    transition: all 0.2s ease;
}
.btn:hover {
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.5); /* ホバー時は影を強く */
    transform: translateY(-2px); /* 少し浮き上がる */
    background-color: #007a26;
}
/* クリック（アクティブ）時のスタイル */
.btn:active {
    box-shadow: none; /* 影をなくす */
    transform: translateY(2px); /* 押し込まれる */
    background-color: #00691f;
}
/* まるボタン */
.circle-btn {
    width: 230px;
    height: 230px;
    font-size: 2.0rem;
    font-weight: bold;
    text-align: center;
    text-decoration: none;
    border-radius: 50%;
}
/* スクロールボタン */
#scrollTopBtn {
    position: fixed;        /* 常に画面に固定 */
    bottom: 20px;           /* 画面の下から20pxの位置 */
    right: 20px;            /* 画面の右から20pxの位置 */
    width: 50px;             /* 幅を指定（高さと同じに） */
    height: 50px;            /* 高さを指定（幅と同じに） */
    background-color: #2BAA5B;
    color: white;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.4); /* 通常時の影 */
    display: none;          /* 初期状態で非表示 */
    z-index: 1000;          /* 他の要素より手前に表示 */
    justify-content: center;     /* 水平方向の中央揃え */
    align-items: center;         /* 垂直方向の中央揃え */
    font-size: 2.4rem;             /* 矢印のサイズ */
    padding: 0;                  /* 余白を完全に除去 */
}
#scrollTopBtn:hover {
    background-color: #007a26;
}


/* HEADER */
.top-border1 {
    width: 100%;
    height: 3px;
    background-color: #003399;
    z-index: 1000;
    margin-top: 30px;
    margin-bottom: 2px;
}
.top-border2 {
    width: 100%;
    height: 1px;
    background-color: #003399;
    z-index: 1000;
    margin-bottom: 10px;
}
header img{
    vertical-align: bottom;
}
nav {
    display: flex;
    justify-content: flex-end; /* ナビゲーションを右寄せ */
}
nav ul{
    padding: 0;
    margin: 0;
}
nav li{
    position: relative;
}
nav ul li a {
    padding: 10px 30px;
    display: inline-block;
    position: relative;
}
nav ul li a::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -2px;
    width: 100%;
    height: 2px;
    background-color: #333;
    transform: scaleX(0);
    transform-origin: right;
    transition: transform 0.3s ease;
}
nav ul li a:hover::after {
    transform: scaleX(1);
    transform-origin: left;
}
nav ul .dropdown {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background-color: #EAF6E9;
    border: 1px solid #ddd;
    width: 150px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    z-index: 1000;
    border-radius: 0 0 10px 10px;
}
nav ul .dropdown li {
    display: block;
}
nav ul .dropdown li a {
    padding: 10px 15px;
    color: #333;
    transition: background-color 0.3s ease;
    display: block;
}
nav ul .dropdown li a:hover {
    background-color: #d9f2d7;
}
.burger-btn{
    display: none;
}
.header-nav-sp{
    display: none;
}


/* MAINVISUAL */
.mainvisual-slider {
    width: 100%;
    height: 60vh;
    margin: 10px 0px 50px 0px;
    overflow: hidden;
    box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.3);
    position: relative;
}
.mainvisual-slides {
    display: flex;
    width: calc(1000px * 5); /* 4枚 + クローン1枚 */
    transition: transform 1.2s ease-in-out;
}
.mainvisual-slides img {
    width: 1000px;
    height: 60vh;
    opacity: 0;
    transition: opacity 1.2s ease-in-out;
    object-fit: cover;
}
/* 初期状態で最初の画像を表示 */
.mainvisual-slides img:first-child {
    opacity: 1;
}
.general_mainvisual{
    width: 1000px;
    height: 300px;
    margin: 10px 0px 50px 0px;
    object-fit: cover;
}


/* CONCEPT */
#CONCEPT .btn{
    width: 270px;
    height: 80px;
    align-items: center;
    display: block;         /* インライン要素をブロック化 */
    margin: 20px auto;
    text-align: center;
    line-height: 80px;      /* 高さと同じ値で縦方向の中央揃え */
}
.dentist{
    width: 322px;
    height: 370px;
    object-fit: cover;
}


/* TREATMENT */
#TREATMENT{
    background-color: #EAF6E9;
    border-radius: 10px;
    padding: 50px;
}
#TREATMENT .btn{
    width: 270px;
    height: 100px;
}
.treatment-list {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: center;
    margin-top: 20px;
}
.btn img {
    width: 32px;
    height: 32px;
    margin-bottom: 10px;
}
.btn span {
    font-size: 1.8rem;
    font-weight: bold;
}


/* RESERVATION */
.reservation-text{
    background-color: #EAF6E9;
    border-radius: 10px;
    padding: 20px;
}
/* TABLE */
.schedule-table {
    table-layout: fixed; /* セルの幅を均等に */
    width: 80%;
    margin: 20px auto;
    border-collapse: collapse;
    background-color: white;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
}
.schedule-table th,
.schedule-table td {
    border: 1px solid #ccc;
    padding: 10px;
    text-align: center;
    font-size: 1.5rem;
}
/* 受付時間の列だけ幅を広げる */
.schedule-table th:first-child,
.schedule-table td.time {
    width: 20%; /* 受付時間の列だけ20% */
}
/* 他の列の幅 */
.schedule-table th:not(:first-child),
.schedule-table td:not(.time) {
    width: 11.43%; /* 残り7列を均等に（(100% - 20%) ÷ 7 ≒ 11.43%） */
}
.schedule-table th {
    background-color: #fff3b0;
    font-weight: bold;
}
.schedule-table td {
    background-color: #dfe9f5;
}
.schedule-table .holiday {
    background-color: #bfe1e9;
    font-weight: bold;
}
.schedule-table .special {
    font-size: 1.4rem;
    font-weight: bold;
    color: #333;
}
.schedule-table .time {
    background-color: #cdd6e6;
    font-weight: bold;
}


/* ACCESS */
#ACCESS dd{
    margin-bottom: 20px;
}
.parking{
    width: 28px;
    height: 30px;
}
.map{
    display: flex;
    justify-content: center; /* 水平方向の中央揃え */
    align-items: center;     /* 垂直方向の中央揃え */
}
iframe {
    max-width: 100%;
}


/* FOOTER */
footer{
    max-width: 1000px;
    margin: 0 auto;
}
footer img{
    vertical-align: bottom;
}
.footer-border{
    width: 100%;
    height: 1px;
    background-color: #003399;
    z-index: 1000;
    margin-bottom: 2px;
}
.copywright{
    text-align: center;
    font-size: 1.4rem;
}


/* DOCTORGREETING */
#GREETING img{
    width: 270px;
    height: 200px;
    object-fit: cover;
}
#CAREER img{
    width: 300px;
    height: 220px;
    object-fit: cover;
    margin-bottom: 15px;
}
.career-pic{
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    width: 40%;
}


/* GENERALDENTISTRY */
.medical-icon{
    object-fit: cover;
    width: 30px;
    height: 30px;
}
.line-height{
    line-height: 1; /* 行の高さを1にして余白を無くす */
}
#DENTURE .btn{
    width: 250px;
    height: 90px;
    margin-bottom: 20px;
}
.denture-btn{
    display: block;
    /* 画像はデフォルトでインライン要素のためdisplay: block; を使う。 */
    margin: 0 auto;
}
.img-base-size{
    width: 270px;
    height: 200px;
    object-fit: cover;
}
.denture-btn-wrapper{
    padding: 0 150px;
}


/* IMPLANT */
#EXAMPLE img{
    margin-bottom: 10px;
}
#EXAMPLE h3{
    margin-bottom: 10px;
}
#EXAMPLE p{
    margin-bottom: 10px;
}
.next{
    display: block;
    text-align: center;
    margin: auto;
}
.implant-btn{
    border-radius: 50%;/* 完全な円にする */
    width: 200px;
    height: 200px;
}
/* ボタンラッパー */
.implant-btn-wrapper {
    position: relative;
    width: 230px; /* SVGとボタンをまとめるために大きめ */
    height: 230px;
    display: flex;
    justify-content: center;
    align-items: center;
}
/* 曲線テキストを含むSVG */
.implant-btn-svg {
    position: absolute;
    top: 0;
    left: 0;
    pointer-events: none; /* テキストがクリックを妨げないように */
    width: 230px;
    height: 230px;
}
/* 曲線テキストのスタイル */
.implant-btn-svg text {
    font-size: 1.6rem;
    font-weight: bold;
    fill: #020804;
    letter-spacing: 2px;
}
.example-content{
	padding: 0 50px;
	gap: 30px;
	display: flex;
	align-items: center; /* 縦方向の中央揃え */
}


/* ORTHODONTICS */
.pricetable{
    background-color: #2BAA5B;
    padding: 10px;
}
table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 10px;
}
td {
    padding: 10px 0;
    border-bottom: 1px solid #ddd;
}
td:last-child {
    text-align: right;
}
#RESERVATION td:last-child {
    text-align: center;
}
#ORTH .btn{
    width: 250px;
    height: 80px;
    margin: 20px 0;
}


/* DENTURE */
#DENTURE .btn{
    width: 250px;
    height: 90px;
    margin-bottom: 20px;
}
.conf-text{
    width: 70%;   
}