header{
max-width: 2000px;
position: relative;
}
h3.mizu{
background: #DFF3FC;
border: solid 3px #BDE6F8;
color: #0A98FF;
}
h4.pink{
font-weight: bold;
color: #FF8AA1;
font-size: 110%;
}
h4.pink:before{
content: url("../img/icon/logo_01_pink.png");
margin-right:5px;  /*画像右の余白*/
vertical-align: middle;
}
.common_logo{
position: absolute;
left: 1%;
width: 25%;
animation: zoomIn_common 2.2s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}
.common_logo img{
width: 100%;
}
.common_cent{
text-align: right;
font-size: 80%;
line-height: 1;
}
.common_cent span{
display: inline-block;
}
nav{
display: flex;
justify-content: flex-end;
margin: 0;
}
.main_nav{
display: flex;
flex-direction: row;
justify-content: flex-end;
flex-wrap: wrap;
width: 70%;
}
.main_nav a{
font-size: 100%;
font-weight: bold;
margin: 5px 5px 0 0;
padding: 5px 0px;
border-radius: 30px;
text-align: center;
width: 13%;
}
.consult_btn{
background: #9ADE7B;
border: 2px outset #C3F3AD;
}
a.arege_btn,a.guide_btn{
font-size: 100%;
}
.main_nav a.guide_btn{
width: 15%;
}
.common_title{
width: 50%;
animation: zoomIn02 2.2s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}
h1{
font-size: 300%;
}
.top_img_common{
width: 50%;
}
.top_img_common img{
width: 50%;
animation: blurAnime 2.2s cubic-bezier(0.25, 1, 0.5, 1) forwards;
vertical-align: bottom;
}
.top_cont_common{
position: relative;
width: 100%;
max-width: 1650px;
margin: 0 auto;
display: flex;
align-items: center;
}
.circles{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
}
.circles li{
position: absolute;
display: block;
list-style: none;
width: 20px;
height: 20px;
background: rgba(196,224,171,0.64);
animation: animate 25s linear infinite;
bottom: -150px;    
}
.circles li:nth-child(1){
left: 25%;
width: 30px;
height: 30px;
animation-delay: 0s;
}
.circles li:nth-child(2){
left: 10%;
width: 20px;
height: 20px;
animation-delay: 2s;
animation-duration: 12s;
}
.circles li:nth-child(3){
left: 70%;
width: 20px;
height: 20px;
animation-delay: 4s;
}
.circles li:nth-child(4){
left: 40%;
width: 60px;
height: 60px;
animation-delay: 0s;
animation-duration: 18s;
}
.circles li:nth-child(5){
left: 65%;
width: 20px;
height: 20px;
animation-delay: 0s;
}
.circles li:nth-child(6){
left: 75%;
width: 65px;
height: 65px;
animation-delay: 3s;
}
.circles li:nth-child(7){
left: 35%;
width: 45px;
height: 45px;
animation-delay: 7s;
}
.circles li:nth-child(8){
left: 50%;
width: 25px;
height: 25px;
animation-delay: 15s;
animation-duration: 45s;
}
.circles li:nth-child(9){
left: 20%;
width: 15px;
height: 15px;
animation-delay: 2s;
animation-duration: 35s;
}
.circles li:nth-child(10){
left: 85%;
width: 55px;
height: 55px;
animation-delay: 0s;
animation-duration: 11s;
}
@keyframes animate {
0%{
transform: translateY(0) rotate(0deg);
opacity: 1;
border-radius: 20%;
}
100%{
transform: translateY(-1000px) rotate(720deg);
opacity: 0;
border-radius: 100%;
}
}
.common_cont01{
width: 100%;
margin: 0px auto 0;
padding: 20px 0 30px;
background-image: linear-gradient(#DEEFA8,#F9F1E1,#F9F1E1,#F9F1E1);
max-width: 1650px;
border-radius: 20px; 
}
.common_cont{
width: 100%;
margin: 0px auto 0;
padding: 30px 0 40px;
max-width: 1650px;
}
.common_inner{
margin: 50px auto;
max-width: 1500px;
width: 90%;
background: #ffffff;
border-radius: 20px;
padding: 20px 0 50px;
}
.photo_box{
margin: 50px 0;
position: relative;
cursor: pointer;
width: 25%;
text-decoration: none;
box-shadow: rgba(0, 0, 0, 0.1) 0px 2px 2px, rgba(0, 0, 0, 0.1) 0px 7px 10px -3px, rgba(0, 0, 0, 0.1) 0px -3px 0px inset;
color: #5EB520;
background: #FFFFFF;
border: solid 3px #FCD766;
border-radius: 0 10px 10px 10px;
padding: 5px;
}
.photo_box p{
font-size: 110%;
position: absolute;
top: -30px;
left: 0;
height: 25px;
padding: 0 1em;
color: #fff;
border-radius: 10px 10px 0 0;
background: #FBA3BB;
font-weight: 500;
border-bottom: 5px solid #F09596;
}
.photo_box img{
margin-right:10px;
vertical-align:text-bottom;
width: 100%;
}
.consult_common{
color: #9ADE7B;
background-image: linear-gradient(#9ADE7B,#F9F1E1,#F9F1E1,#F9F1E1);
}
.helth_common{
color: #F3CA52;
background-image: linear-gradient(#F3CA52,#F9F1E1,#F9F1E1,#F9F1E1);
}
.gen_common{
color: #9ADE7B;
}
.vacc_common{
color: #F4A12A;
}
.arege_common{
color: #F47676;
font-size: 105%;
}
.arege_btn span,.guide_btn span{
display: inline-block;
}
.info_common{
color: #31C4C2;
}
.dr_common{
color: #7BC0DE;
}
.access_btn_common{
color: #C189D9;
}
.book_btn_common{
color: #ED3A83;
}
.bar_bar{
width: 100%;
max-width: 1650px;
}
.bar_pink_green{
background-image: url("../img/bar/bar_pink-green.png");
}
.vacc_cont95{
width: 95%;
margin: 0px auto;
}
ul.list_cont {
width: 95%;
margin: 0px auto;
}
ul.list_cont li{
text-indent: -1em;
padding: 5px 5px 5px 1em; 
}
@media screen and (max-width: 1300px){ 
a.arege_btn,a.guide_btn{
font-size: 85%;
}
}
@media screen and (max-width: 768px){ 
h2{
font-size: 150%;
}
.common_logo{
left: 5px;
width: 50%;
}
.common_cent{
text-align: right;
font-size: 80%;
line-height: 1;
width: 50%;
float: right;
}
.top_cont_common{
position: relative;
flex-direction:column;
}
.common_title{
width: 100%;
margin: 80px auto 0px;
animation: blurAnime 2.2s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}
h1{
font-size: 220%;
}
.top_img_common{
width: 100%;
}
.top_img_common img{
width: 100%;
}
nav{
display: flex;
justify-content: center;
margin: 0;
}
.main_nav{
display: flex;
flex-direction: row;
justify-content: center;
flex-wrap: wrap;
width: 97%;
}
.main_nav a{
font-size: 95%;
font-weight: bold;
margin: 3px 5px 0 0;
padding: 5px 0px;
border-radius: 30px;
width: 30%;
}
.common_cont{
padding: 10px 0 20px;
}
.common_cont01{
border-radius: 0px; 
}
.common_inner{
margin: 10px auto 20px;;
width: 98%;
background: #ffffff;
border-radius: 10px;
padding: 10px 0 20px;
}
h5 {
position: relative;
padding: 10px 0 5px;
margin-bottom: 10px;
text-align: center;
font-size: 115%;
}
.photo_box{
margin: 35px auto;
width: 75%;
background: #FCEDBF;
padding: 20px;
}
.photo_box p{
font-size: 100%;
top: -10px;
left: -10px;
height: 25px;
padding: 10px 1em;
border-radius: 30px;
}
.vacc_cont95{
font-size: 95%;
line-height: 1.3;
width: 95%;
margin: 5px auto;
}
ul.list_cont {
width: 96%;
margin: 5px auto;
}
ul.list_cont li{
padding: 5px 5px 5px 1em; 
font-size: 95%;
line-height: 1.3;
}
}
@media screen and (max-width: 834px){ 
nav{
display: none;
}
}
@media screen and (max-width: 750px){ 
h4.pink{
text-align: center;
line-height: 1.2;
padding-bottom: 10px;
}
h4.pink:before{
content: url("../img/icon/logo_01_pink25.png");
width: 20px;
height: 25px;
}
table.table01 {
font-size: 90%;
}
}