@charset "utf-8";


body{
    background-color: #C6F0FF;
    font-family: sans-serif;
    color: #2C3E50;
    display: flex;
    flex-flow: column;
    min-height: 100vh;
}

.clearbox{
    margin: 0 auto;
    width: 820px;
    padding: 10px;
}

#whitebox{
    background-color: white;
    padding: 20px;
    border-radius: 10px;
}

p{
    font-size: 16px;
    color: #333333;
    margin-bottom: 10px;
    line-height: 1.5;
}



header{
    text-align: center;
    color: #2C3E50;
    padding: 10px;
}

header p{
    font-size: 26px;
}

header h1{
    font-size: 42px;
    font-weight: bold;
    margin-bottom: 10px;
}

header h1 span{
    color: #FF80B3;
    background-color: white;
    border-radius: 50%;
    padding: 5px 3px;
    margin: 0 -2px;
}

header a{
    font-size: 24px;
    background-color: #FF8800;
    font-style: bold;
    color: white;
    padding: 5px;
    border-radius: 10px;
    box-shadow: 5px 5px gray;
}

header a:hover{
    background-color: #FF4D4D;
}

nav ul {
    display: flex;
    flex-wrap: wrap;
}

nav li{
    margin: 10px;
}

nav a{
    display: block;
    font-size: 28px;
    font-weight: bold; 
    text-align: center;
    background-color: white;
    width: 175px;
    height: 175px;
    padding: 70px 0;
    border-radius: 50%;
}

.nav1 a{
	box-shadow: 5px 5px 5px gray;
}
.nav1 li:first-child a{
	box-shadow: none; padding-top: 5px;
}
.nav1 li:last-child a{
	box-shadow: none; padding-top: 20px;
}
.nav1 li:last-child a img{
	border-radius: 50%;
}
.back{
	font-size: 20px; padding-top: 40px; box-shadow: 5px 5px 5px gray;
}

.nav1 a:hover{
	margin-top: -10px; margin-bottom: 10px;
}
.nav1 li:first-child a:hover{
	margin: 0px;
}
.nav1 li:last-child a:hover{
	margin: 0px;
}
.back:hover{
	margin-top: -10px; margin-bottom: 10px;
}

.red{
	color: white; background-color: #FF4D4D;
}
.orange{
	color: white; background-color: #FF8800;
}
.blue{
	color: white; background-color: #0077CC;
}
.green{
	color: white; background-color: #00AA00;
}
.yellow{
	color: gray; background-color: #FFEB3B;
}
.white{
	color: gray; background-color: white;
}
.draw, .back{
	color: #333333; background-color: #C6F0FF;
}

.betsutabu{
    font-size: 14px;
}


#welcome p{
    color: #333333;
    font-size: 18px;
    text-align: center;
}

#welcome .larger{
    font-size: 22px;
}


main h2{
    font-size: 24px;
    font-weight: bold;
    color: #2C3E50;
    border-left: 10px solid #99CCFF;
    border-bottom: 3px solid #99CCFF;
    margin-top: 30px;
    margin-bottom: 10px;
    padding: 10px;
}

main h2:first-child{
    margin-top: 0px;
}

main h3{
    font-size: 22px;
    border-left: 24px solid #66B2FF;
    margin-top: 20px;
    margin-bottom: 10px;
    padding-left: 5px;
}

.clover p{
    margin-bottom: 20px;
    padding-left: 24px;
    background-image: url(../img/clover.gif);
    background-repeat: no-repeat;
    background-position: left top;
    background-size: 20px;
}

.pencil p{
    font-size: 20px;
    margin-bottom: 20px;
    padding-left: 20px;
    background-image: url(../img/pencil.gif);
    background-repeat: no-repeat;
    background-position: left top;
    background-size: 16px;
}

main li{
    color: #2C3E50;
    line-height: 1.5;
}

main a{
    color: #FF80B3;
    font-size: 20px;
    font-weight: bold;
    text-decoration: underline;
}

.photoright{
    text-align: right;
}


footer{
    flex: 1;
    color: white;
    background-color: #0077CC;
}

footer h1{
    font-size: 24px;
    font-weight: bold;
    margin-bottom: 10px;
}

footer p{
    font-size: 18px;
    color: white;
}


.nav2 ul{
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    width: 550px;
    margin: 0 0 0 auto;
}

.nav2 li{
    margin: 0px;
}

.nav2 a{
    font-size: 18px;
    font-weight: normal;
    height: 16px;
    width: auto;
    padding: 0 8px;
    margin: 5px 0;
    border-radius: 0%;
    border-right: 1px solid white;
    background-color: #0077CC;
}


.time, .map{
    background-color: white;
    padding: 10px;
    margin: 0 auto 10px 100px;
    color: #333333;
}

.time th{
    font-size: 16px;
    color: white;
    background-color: #66B2FF;
    border: 1px solid black;
    padding: 10px;
}

.time td{
    font-size: 16px;
    color: #333333;
    border: 1px solid black;
    padding: 10px;
}

.caption p{
    margin-left: 150px;
}

.frame, .frame1, .frame2{
    font-size: 16px;
    color: #333333;
    padding: 10px;
    background-color: #E0E0E0;
}

.frame{
    border-radius: 5px;
}

.frame2{
    border-radius: 20px;
}

.schedule{
    margin: 20px auto 30px 100px;
}

.schedule td{
    padding: 10px;
    text-align: center;
}

.table_word{
    width: 160px;
}

.table_row td{
    text-align: left;
    vertical-align: bottom;
}


.small{
    font-size: 16px;
}

.linklist{
    list-style-type: square;
    margin-left: 20px;
}

.linklist li{
    font-size: 20px;
    margin-bottom: 30px;
}


.diseaselist{
    list-style-type: disc;
    margin-left: 40px;
}

.diseaselist li{
    font-size: 16px;
    margin-bottom: 10px;
}


.doctorlist{
    list-style-type: disc;
    margin-left: 20px;
}

.doctorlist li{
    font-size: 18px;
    margin-bottom: 10px;
}

.doctorsname{
    font-size: 24px;
    text-align: center;
}


.stafftable{
    margin: 0 auto;
}

.stafftable td{
    font-size: 16px;
    color: #2C3E50;
    border: 1px solid lightgray;
    padding: 10px;
}


.diseases h3{
    font-size: 24px;
    color: white;
    background-color: #FF80B3;
    border-left: none;
    padding: 5px;
    margin-top: 40px
;
}

.diseases h4{
    font-size: 20px;
    color: #2C3E50;
    border-left: 24px solid #FFB3CC;
    padding-left: 5px;
    margin-top: 20px;

}
}