@charset "UTF-8";

/*toppage
----------------------------------------------------*/
#greet .text p.en {
    margin: 0;
    line-height: 1;
    font-size: 60px;
    font-size: 6.0rem;
	font-family: "Nanum Myeongjo", serif;
	font-weight: 500;
    background: linear-gradient(rgba(85, 72, 55, 0.4), rgba(255, 255, 255, 1));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    letter-spacing: 0;
}

#greet .img {
    margin-top: 2em;
    text-align: center;
}

#greet .img img {
	border-radius: 10px;
}

#hours .table_cover {
    background: #fff;
	border-radius: 10px;
    padding: 1em;
    margin-bottom: 1em;
	font-family: "Noto Serif JP", serif;
	font-weight: 500;
}

#hours table {
	width: 100%;
	text-align: center;
}

#hours table tbody tr {
    border-top: 1px solid rgba(158, 153, 147, 0.5);
}

#hours table th,
#hours table td {
    padding: 1em 0.2em;
}

#calendar .box {
    margin-bottom: 1em;
}

#calendar .caption {
	margin-bottom: 5px;
	font-family: "Noto Serif JP", serif;
	font-weight: 500;
	color: #554837;
	font-size: 1.5em;
    text-align: center;
}

#calendar table {
	width: 100%;
	text-align: center;
	border-radius: 10px;
    border-collapse: separate;
    border-spacing: 0;
    overflow: hidden;
	box-shadow: inset 0 0 0 max(.0625rem,1.5px) rgba(158, 153, 147, 0.5);
}

#calendar table th,
#calendar table td {
    padding: 0.5em;
	box-shadow: inset 0 0 0 max(.0625rem,0.5px) rgba(158, 153, 147, 0.5);
}

#calendar table thead {
	background: #9e9993;
	color: #fff;
    padding: 0 0.5em;
    line-height: 1.2;
}

#calendar table thead th:not(:last-child) {
    border-right: 1px solid #fff;
}

#calendar table td.sun,
#calendar table td.holiday {
	background	: rgba(255, 240, 247, 0.6);
	color: #c78881!important;
}

#calendar table td.d_2025_12_29,
#calendar table td.d_2025_12_30,
#calendar table td.d_2025_12_31,
#calendar table td.d_2026_1_1,
#calendar table td.d_2026_1_2,
#calendar table td.d_2026_1_3 {
	background	: rgba(255, 240, 247, 0.6);
}

#calendar table td.sat {
	color		: #6d92aa!important;
}

#calendar p.holiday {
    position: relative;
    padding-left: 2.5em;
    margin: 1em 0 0 auto;
    width: fit-content;
}

#calendar p.holiday::before {
    content: "";
    display: block;
    position: absolute;
    top: calc(50% - 0.7em);
    left: 0;
	background	: rgba(255, 240, 247, 0.6);
    width: 1.8em;
    height: 1.4em;
	box-shadow: inset 0 0 0 max(.0625rem,0.5px) rgba(158, 153, 147, 0.5);
}

#news dl {
    padding: 1% 3%;
	border-radius: 10px;
    background: #fff;
}

#news dd {
    padding-bottom: 1.5em;
}

#news dd:not(:last-child) {
    border-bottom: 1px dotted rgba(158, 153, 147, 0.5);
}

#system .box {
    border: 1px solid rgba(158, 153, 147, 0.5);
	border-radius: 10px;
    padding: 5%;
    margin-bottom: 1em;
    box-sizing: border-box;
}

#system .box h3 {
	font-family: "Noto Serif JP", serif;
	font-weight: 600;
	color: #554837;
    font-size: 1.4em;
    margin-bottom: 0.5em;
}

#system .box p.intro {
    margin: 1.5em 0;
	color: #554837;
}

#system .box li p,
#system .box li > ul {
    opacity: 0.8;
}


/*treat
----------------------------------------------------*/
#treat .img img {
    border-radius: 10px;
}

#treat .img_text .img {
    margin-top: 1em;
    border-radius: 10px;
}

#treat #about_treat {
    font-size: 1.1em;
	font-family: "Noto Serif JP", serif;
}

#treat #about_treat .img_text .img {
    width: 80%;
    margin: 2em auto;
}

#treat .img_text.about_perio .img {
    padding: 2em;
    background: #fff;
    width: fit-content;
    margin-right: auto;
    margin-left: auto;
}

#treat dl.perio_initial dt {
	font-family: "Noto Serif JP", serif;
	font-weight: 600;
	color: #554837;
    font-size: 1.2em;
    margin-bottom: 0.5em;
}

#treat .scaler {
    background: #efeceb;
    padding: 3%;
    border: 1px solid #DBD7D3;
    border-radius: 10px;
    margin-top: 2em;
}

#treat .scaler .img_text:not(:last-child) {
    margin-bottom: 1em;
    padding-bottom: 1em;
    border-bottom: 1px solid #DBD7D3;
}


#treat .scaler .img_text h4 {
	font-family: "Noto Serif JP", serif;
	font-weight: 600;
	color: #554837;
    font-size: 1.1em;
    margin-bottom: 0.5em;
}

#treat .scaler .img_text .img {
    padding: 1em 2em;
    background: #fff;
    width: fit-content;
    text-align: center;
    margin-right: auto;
    margin-left: auto;
}

#treat ul.flow {
    margin-top: 3em;
}

#treat ul.flow li {
    display: flex;
    gap: 5%;
    align-items: center;
    background: #fff;
    max-width: 1000px;
    margin: 0 auto;
    padding: 1em;
    border-radius: 10px;
    position: relative;
    font-size: 1.1em;
}

#treat ul.flow li:not(:last-child) {
    margin-bottom: 40px;
}

#treat ul.flow li:not(:last-child)::before {
    content: "";
    display: block;
    position: absolute;
    bottom: -36px;
    left: calc( 50% - 4px);
    background:  rgba(235, 170, 163, 1.0);
    height: calc(tan(60deg) * 8px / 2);
    width: 8px;
    clip-path: polygon(0 0, 100% 0, 50% 100%);
}

#treat ul.flow li:not(:last-child)::after {
    content: "";
    display: block;
    width: 4px;
    height: 26px;
    position: absolute;
    bottom: -30px;
    left: calc( 50% - 2px);
    background: linear-gradient( rgba(235, 170, 163, 0.1), rgba(235, 170, 163, 1.0));
}

#treat ul.flow li .img {
    width: 20%;
}

#treat ul.flow li p {
    width: 75%;
    line-height: 2;
}

#treat ul.flow li p b {
	background: #EDE9E9;
    display: inline-block;
    padding: 0 1em;
    line-height: 1.5;
    border-radius: 5px;
	color: #554837;
    font-size: 1.1em;
    font-weight: 500;
}

#treat ul.flow li .pink {
    font-weight: 500;
}

#treat ul.case {
    display: flex;
    gap: 2.5em;
    align-items: center;
    background: #fff;
    max-width: 800px;
    margin: 0 auto;
    padding: 1em;
    border-radius: 10px;
    position: relative;
    font-size: 1.1em;
    text-align: center;
	color: #554837;
}

#treat ul.case li {
    position: relative;
}

#treat ul.case li:not(:last-child)::before {
    content: "";
    display: block;
    position: absolute;
    top: calc( 50% - 25px);
    right: -1.8em;
    background: linear-gradient( to right, rgba(235, 170, 163, 0.4), rgba(235, 170, 163, 1.0));
    height: calc(tan(60deg) * 30px / 2);
    width: 15px;
    clip-path: polygon(0 0, 100% 50%, 0 100%);
}

#treat table.whitening_price th,
#treat table.whitening_price td {
    padding: 1em;
    text-align: left;
    font-weight: 600;
    vertical-align: bottom;
	font-family: "Noto Serif JP", serif;
}

#treat span.price {
    display: inline-block;
    font-size: 1.8em;
    line-height: 1.5;
    background:linear-gradient(transparent 70%, rgba(250, 160, 150, 0.5) 70%);
    font-weight: 500;
}

#implant .img_text_implant {
    background: #efeceb;
    padding: 2% 3%;
    border: 1px solid #DBD7D3;
    border-radius: 10px;
    margin-top: 2em;
    max-width: 740px;
    flex-direction: row-reverse;
    display: flex;
    gap: 5%;
    align-items: center;
}

#treat p.price {
	font-family: "Noto Serif JP", serif;
    font-weight: 600;
    margin-bottom: 1.5em;
}


/*clinic
----------------------------------------------------*/
#photo ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
}

#photo ul li {
    width: 48%;
    max-width: 600px;
    margin-bottom: 5%;
}

#photo ul li img {
    border-radius: 10px;
}

#photo ul li p {
    margin-top: 1em;
	color: #554837;
}

#equipment .cover {
    background: #efeceb;
    padding: 3%;
    border: 1px solid #DBD7D3;
    border-radius: 10px;
    margin-top: 2em;
}

#equipment .cover .img_text:not(:last-child) {
    margin-bottom: 1em;
    padding-bottom: 1em;
    border-bottom: 1px solid #DBD7D3;
}

#equipment .cover .img_text .img {
    text-align: center;
}

#equipment .cover .img_text img {
    border-radius: 10px;
    margin-bottom: 1em;
}

#director .img_text {
    text-align: center;
}

#director .img_text .img {
    margin-bottom: 1em;
}

#director .img_text .img img {
    border-radius: 10px;
}

#director .img_text p.director_name {
	font-family: "Noto Serif JP", serif;
    font-weight: 400;
    font-size: 32px;
    font-size: 3.2rem;
    line-height: 1;
}

#director p.director_name span.en {
    font-size: 0.5em;
}

#director dl.list01 dt {
    margin: 1em 0 0.1em;
}

/*access
----------------------------------------------------*/
#access .gmap {
	position: relative;
	padding: 0 0 80%;
	height: 0;
	overflow: hidden;
	width: 100%;
	border-radius: 10px;
    margin-bottom: 3em;
}

#access .gmap iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100% !important;
	height: 100% !important;
}

#access dl.list03 > dt {
    color: #554837;
    font-size: 1.1em;
	font-family: "Noto Serif JP", serif;
	font-weight: 700;
}

#access dl.list02 > dt {
    color: #554837;
}

#access dl.list02 > dd:not(:last-child) {
    margin-bottom: 1em;
}


/*link
----------------------------------------------------*/
#link dl a {
    color: #554837;
}

#link dl dt {
    font-size: 1.1em;
	font-family: "Noto Serif JP", serif;
	font-weight: 700;
}

#link dl dd.text {
    margin-bottom: 1em;
    padding-bottom: 1em;
    border-bottom: 1px dashed #554837;
}


/*media Queries
----------------------------------------------------*/
@media only screen and (min-width: 800px) {
    #greet .cover {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    #greet .cover .text {
        width: 60%;
    }

    #greet .cover .img {
        width: 35%;
    }

    #hours table th,
    #hours table td {
        padding: 1em 1em;
        font-size: 1.3em;
    }

    #hours li {
        text-align: center;
    }

    #calendar .box_cover,
    #system .box_cover {
        display: flex;
        justify-content: space-between;
    }

    #calendar .box_cover .box {
        width: 48%;
    }

    #system .box_cover .box {
        padding: 2%;
    }

    #system .box_cover .box#ex {
        width: 40%;
    }

    #system .box_cover .box#fs {
        width: 59%;
    }

    #news dt {
        float: left;
        margin: 1.5em 0;
    }

    #news dd {
        padding: 1.5em 0 1.5em 10em;
    }

    #treat .img_text {
        display: flex;
        gap: 5%;
        justify-content: space-between;
        align-items: center;
    }

    #treat .scaler .img_text,
    #treat #about_treat .img_text {
        flex-direction: row-reverse;        
    }   

    #treat .img_text .text {
        width: 60%;
    }

    #treat .img_text .img {
        margin-top: 0;
        width: 35%;
    }

    #treat #about_treat .img_text .img {
        margin-top: 0;
        width: 30%;
    }

    #treat table.whitening_price th,
    #treat table.whitening_price td,
    #treat p.price {
        font-size: 19px;
        font-size: 1.9rem;
    }

    #equipment .cover .img_text {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    #equipment .cover .img_text .text {
        width: 65%;
    }

    #equipment .cover .img_text .img {
        width: 30%;
    }

    #director .img_text {
        display: flex;
        gap: 3em;
        align-items: center;
        text-align: left;
    }

    #director .img_text .img {
        margin-bottom: 0;
    }

    #director dl.list01 dt {
        float: left;
        clear: both;
        margin: 0 0 1em;
    }

    #director dl.list01 dd {
        padding-left: 10em;
        margin: 0 0 1em;
    }

    #access .gmap {
        padding: 0 0 60%;
    }
}

/*media Queries
----------------------------------------------------*/
@media only screen and (min-width: 1100px) {	
    #greet .text p.en {
        font-size: 100px;
        font-size: 10.0rem;
    }

    #greet .text {
        font-size: 1.1em;
    }

    #treat #about_treat .img_text .text {
        font-size: 1.2em;
        line-height: 2;
    }

    #photo ul li {
        width: 32%;
    }

    #director .img_text p.director_name {
        font-size: 42px;
        font-size: 4.2rem;
    }

    #access  .gmap {
        padding: 0 0 45%;
    }

}