@charset "UTF-8";

/*toppage
----------------------------------------------------*/
#greet .img_text .img {
    margin: 1.5em auto 0;
    text-align: center;
    max-width: 80%;
}

#dentist .img {
    text-align: center;
    margin-bottom: 1em;
}

#dentist p.dentist_name {
    font-size: 24px;
    font-size: 2.4rem;
	font-family: "Zen Maru Gothic", serif;
	font-weight: 500;
}

#dentist dl dt {
    float: left;
    clear: both;
}

#dentist dl dd {
    padding-left: 10em;
    margin: 0.5em;
}

#about p {
    text-align: center;
}

#about p.subject {
    font-size: 1.4em;
}

#about h3.title02 {
    margin-top: 2.5em;
}

#about table {
    width: 100%;
    max-width: 1000px;
    margin: 0 auto 1em;
}

#about table th,
#about table td {
    padding: 0.5em 0;
    border-bottom: 1px solid rgba(180, 167, 152, 0.5);
}

#about table tbody td {
	color: rgba(241, 96, 33, 0.8);
}

#news dl {
    max-width: 1000px;
    margin: 0 auto;
    border: 1px solid rgba(241, 96, 33, 0.5);
    padding: 1em;
    border-radius: 15px;
}

#news dd:not(:last-child) {
    margin-bottom: 1em;
    padding-bottom: 1em;
    border-bottom: 1px dashed rgba(180, 167, 152, 0.7);
}

#dx h2.title02 {
    padding: 0;
    margin-bottom: 1.5em;
}

#dx h2.title02::before,
#dx h2.title02::after {
    display: none;
}


#dx p {
	font-size: 1.1em;
}

#dx ol {
	padding-left: 1.5em;
}

#dx ol li {
	list-style-type: decimal;
	margin-top: 0.7em;
}

#dx ol li::marker {
	color: rgba(241, 96, 33, 1.0);
}	

#dx .img {
    text-align: center;
}

#clinic ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 3%;
}

#clinic ul li {
    width: 48%;
    text-align: center;
    margin-bottom: 3%;
}

#clinic ul li h3 {
	font-weight: 500;
    margin-top: 0.3em;
}

#clinic ul li.air_cleaner {
    width: 100%;
    border: 1px solid rgba(180, 167, 152, 0.5);
    padding: 3%;
    border-radius: 15px;
}

#clinic ul li.air_cleaner .img {
    max-width: 80%;
    margin: 0 auto 1em;
}

#clinic ul li.air_cleaner p {
    margin-top: 0.5em;
    text-align: left;
}


/*media Queries
----------------------------------------------------*/
@media only screen and (min-width: 800px) {
    
    #greet .img_text {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

   #greet .img_text .img {
        width: 30%;
    }

    #greet .img_text .text {
        width: 65%;
        font-size: 1.2em;
    }

    #dentist .cover {
        display: flex;
        justify-content: space-between;
    }

    #dentist .box {
        width: 48%;
        box-sizing: border-box;
    }

    #dentist .box h3 {
        margin-top: 0;
    }

    #about table th,
    #about table td {
        padding: 1em 0;
        font-size: 1.3em;
    }

    #news dl {
        padding: 1.5em 3% 0.5em;
        font-size: 1.2em;
    }

    #news dl dt {
        float: left;
        clear: both;
    }

    #news dl dd {
        padding: 0 0 0 10em;
        margin: 0 1em 1em 0;
    }
    
    #dx .img_text {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    #dx .img_text .img {
        width: 30%;
    }

    #dx .img_text .text {
        width: 65%;
    }

    #clinic ul li {
        width: 31%;
    }
    
    #clinic ul li.air_cleaner {
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    #clinic ul li.air_cleaner .img {
        width: 40%;
        margin: 0;
    }

    #clinic ul li.air_cleaner .text {
        width: 55%;
        text-align: left;
    }



}

/*media Queries
----------------------------------------------------*/
@media only screen and (min-width: 1200px) {	

    #dentist .box {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    #dentist .box .img {
        margin: 0;
        width: 30%;
    }

    #dentist .career {
        margin: 0;
        width: 65%;
    }

    
}

