body{
font-family: "M PLUS 1", sans-serif;
overflow-x: hidden; 
-webkit-font-smoothing: antialiased;
line-height: 1.5; 
font-optical-sizing: auto;
font-weight: 400;
font-style: normal;
}
a{
text-decoration: none;
word-break: break-all;
}
i{
margin-right: 8px;
}
strong{
font-weight: bold;
}
/*＝＝＝＝＝　header　＝＝＝＝＝*/
.header_top{
color: #059058;
text-align: right;
background: #dcffdc;
font-size: 90%;
line-height: 1.2;
position: relative;
}
header{
display: flex;
justify-content: space-between;
color: #059058;
align-items:flex-end;
background: #dcffdc;
padding-bottom: 20px;

}
.line_top{
width: 10%;
position: absolute;
top:20px;
right: 10px;
}
.top_logo_img{
}
.top_logo_img img,.line_top img{
width: 100%;
}
.top_cont{
position: relative;
width: 100%;
height: 500px;
margin: 0 auto;
background-image: url("../img/top/xmas.png");
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.top_cal{
width: 55%;
max-width: 800px;
position: absolute;
right: 0;
top:230px;
}
/*＝＝＝＝＝　見出し　＝＝＝＝＝*/
h1{
font-size:250%;
font-weight: 900;
background: #059058;
background-clip: text;
-webkit-background-clip: text;
animation: fadeIn 1.5s cubic-bezier(0.33, 1, 0.68, 1) forwards;
font-style: normal;
color: #059058;
font-family: "M PLUS Rounded 1c", serif;
position: relative;
padding: 0px 0 0px 80px;
line-height: 1.2;
}

h1::before {
content: "";
display: inline-block;
width: 80px;
height: 80px;
background-image: url("../img/logo.png");
background-size: contain;
background-repeat: no-repeat;
position: absolute;
left: 0;
top: -10px;	
animation: rotateImage 2s linear 1; /* 1回のアニメーションで2回転分 */
}
h1 img{
width: 100%;
}
h1 span{

}
/* 回転アニメーションの定義 */
@keyframes rotateImage {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
.glowAnime span{opacity: 0;}
/*アニメーションで透過を0から1に変化させtext-shadowをつける*/
.glowAnime.glow span{ animation:glow_anime_on 1s ease-out forwards; }
@keyframes glow_anime_on{
0% { opacity:0; text-shadow: 0 0 0 #fff,0 0 0 #fff;}
40% { opacity:1;text-shadow: 0 0 10px #fff,0 0 15px #fff; }
90% { opacity:1; text-shadow: 0 0 0 #fff,0 0 0 #fff;}
100% { opacity:1; text-shadow: 0 0 10 #fff,0 0 15 #fff;}
}

h2{
font-size: 220%;
font-weight: 900;
color: #059058;
position: relative;
text-align: center;
margin: 70px auto 30px;
font-family: "M PLUS Rounded 1c", serif;
line-height: 1.2;
}
h2 img{
position: absolute;
top: -150px;
right: 0;
bottom: 0;
left: 0;
margin: auto;
}
h2 p{
font-size: 80%;
}
h3{
border-bottom: dotted 4px #059058;
font-size: 200%;
text-align: center;
font-weight: bold;
color: #059058;
font-family: "M PLUS Rounded 1c", serif;
margin: 10px auto 20px;
} 
h3::before {
content: '';/*何も入れない*/
display: inline-block;/*忘れずに！*/
width: 60px;/*画像の幅*/
height: 30px;/*画像の高さ*/
background-image: url("../img/icon/icon02_le.png");
background-size: contain;
vertical-align: middle;	
margin-right: 10px;
background-repeat: no-repeat;
}

h3::after {
content: '';/*何も入れない*/
display: inline-block;/*忘れずに！*/
width: 60px;/*画像の幅*/
height: 30px;/*画像の高さ*/
background-image: url("../img/icon/icon02_ri.png");
background-size: contain;
vertical-align: middle;	
margin-left: 10px;
background-repeat: no-repeat;
}
h4{
color: #ffffff;
background:#36C46E;
font-size: 130%;
font-weight: bold;
line-height: 2;
margin-bottom: 10px;
margin-top: 5px;
border-left: 2px dotted rgba(0,0,0,.1);/* テープのギザギザ左*/
border-right: 2px dotted rgba(0,0,0,.1);/* テープのギザギザ右*/
padding:5px 20px;/*タイトルの余白*/
box-shadow: 3px 3px 0px 0px rgba(0, 0, 0, 0.1);
}
h4::before {
content: '';/*何も入れない*/
display: inline-block;/*忘れずに！*/
width: 30px;/*画像の幅*/
height: 30px;/*画像の高さ*/
background-image: url("../img/icon/icon01.png");
background-size: contain;
vertical-align: middle;	
margin-right: 10px;
background-repeat: no-repeat;
}
.h4_blue {
color: #059058;
background: repeating-linear-gradient(-45deg, #dcffdc, #dcffdc 5px, #fff 0, #fff 10px);
line-height: 2;
margin-bottom: 10px;
box-shadow: 3px 3px 0px 0px rgba(0, 0, 0, 0.1);	
}
.h4_check {
 background-image: linear-gradient(45deg, #dcffdc 25%, transparent 25%, transparent 50%, #dcffdc 50%, #dcffdc 75%, transparent 75%, transparent), linear-gradient(-45deg, #dcffdc 25%, transparent 25%, transparent 50%, #dcffdc 50%, #dcffdc 75%, transparent 75%, transparent);
 background-color: #ffffff;
 background-size: 20px 20px;
 color: #5ba9f7;
}
h5{
position: relative;
padding: 5px 0 0 0;
border-bottom: 2px double #059058;
color: #059058;
font-weight: bold;
font-size: 115%;
}
h5.mordal_title::before {
content: '';/*何も入れない*/
display: inline-block;/*忘れずに！*/
width: 30px;/*画像の幅*/
height: 30px;/*画像の高さ*/
background-image: url("../img/icon/news01.png");
background-size: contain;
vertical-align: middle;	
margin-right: 3px;
background-repeat: no-repeat;
}
h6 {
background-color: #fff;
padding: 0.5em;
position: relative;
font-size: 120%;
font-weight: bold;
background: #dcffdc;
color: #059058;
margin-bottom: 20px;
}
h6::before {
content: '';
width: 100%;
height: 30%;
background-image: radial-gradient(#dcffdc 8%, transparent 16%), radial-gradient(#dcffdc 8%, transparent 16%);
background-position: 0 0, 7px 7px;
background-size: 12px 12px;
position: absolute;
bottom: -10px;left: 0px;
}
.midashi01 {
font-size: 125%;
font-weight: bold;
color: #d8222f;
padding: 10px 0 10px 50px;
position: relative; /* 疑似要素の位置指定のために必要 */
}
.midashi01 {
font-size: 125%;
font-weight: bold;
color: #d8222f;
padding: 10px 0;
position: relative; /* 疑似要素の位置指定に必要 */
}
.midashi01 {
font-size: 125%;
font-weight: bold;
color: #d8222f;
padding: 10px 0px 10px 20px;
position: relative; /* 疑似要素の位置指定のために必要 */
}
.midashi01::before {
content: '◎';
position: absolute;
left: 0;
}
.list01{
position: relative;
padding: 5px 0 5px 25px;
text-align: left;
font-size: 105%;
font-weight: bold;
}
.list01::after { 
position: absolute;
top: 0px;
left: 0px;
color: #059058;
content: "＊";
font-size: 130%;
}
.list02{
position: relative;
padding: 5px 0 5px 17px;
text-align: left;
font-size: 105%;
line-height: 1.3;
}
.list02::after { 
position: absolute;
top: 13px;
left: 5px;
content: '';
width: 8px;
height: 8px;
background-color: #6B7B77;
border-radius: 50%; /* これで円形になります */
}
.list03::after { 
position: absolute;
top: 10px;
left: 5px;
content: '';
width: 12px;
height: 12px;
background-color: #efdb17;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
/* ＝＝＝＝＝＝　pickupinfo01　＝＝＝＝＝＝ */
.cal_msg{
position:relative;
margin:0 20px 0 20px;
padding:5px 10px;
background: #ffffff;
}
.cal_msg:before {
content:"<";
position:absolute;
left:-10px;
width:0;
height:0;
top:-5px;
font-size:30px;
line-height:1.0;
color:#c96;
}
.cal_msg:after {
content:" ";
position:absolute;
top:-2px;
left:-10px;
width:0;
height:130%;
border:#D3C50D solid 2px;
border-radius:2px;
 -webkit-transform: rotate(-1deg);
 -moz-transform: rotate(-1deg);
 -o-transform: rotate(-1deg);
transform: rotate(-1deg);
}
.futoji01{
color: #d8222f;
font-weight: bold;
font-size: 110%;
}
.cal_sent{
font-size: 95%;
width: 95%;
margin: 5px auto;
}
/* ＝＝＝＝＝＝　news　＝＝＝＝＝＝ */
.news_cont{
width: 100%;
margin: 0px auto;
padding: 60px 0 30px;
}
.mask_de00 {
 mask:  linear-gradient(180deg,#0000 30px,#000 0),radial-gradient(30px,#000 calc(100% - 1px),#0000) top/55.5px 60px;
}
.mask_de01 {
padding-top: 35px;
mask: 
linear-gradient(0,#0000 60px,#000 0) 0 30px,radial-gradient(30px,#000 calc(100% - 1px),#0000) 50%/55.5px 60px repeat space;
}
.mask_de02 {
mask: linear-gradient(-90deg,#0000 60px,#000 0) 30px,radial-gradient(30px,#000 calc(100% - 1px),#0000) 50%/60px 55.5px space repeat;
}
.news_title{
padding-bottom: 30px;
}
.schedule_img{
position: absolute;
width: 10%;
right: -60px;
bottom: -10px;   
}
.schedule_img img{
width: 100%;
}
/* ＝＝＝＝＝＝　診療予定表　＝＝＝＝＝＝ */
/* -- SVG CSS -- */
.clinic_guide_whole{
padding: 20px 0;
}
.box_inner{
width: 85%;
margin: 0 auto;
}
.sch_box{
position: relative;
}
.bg001{
background-image:url("../img/bg001.png");
background-size: contain;
background-repeat: no-repeat;
}
.bg002{
background-image:url("../img/bg002.png");
background-size: contain;
background-repeat: no-repeat;
}
.sep3 {
transform: translateY(10%) translateY(2px) scale(1,1);
transform-origin: top;
}
/* ＝＝＝＝＝＝　予約について　＝＝＝＝＝＝ */
.yoyaku_cont_whole{
margin: 0 auto;
width: 100%;
padding: 60px 0;
position: relative;
}
/* ＝＝＝＝＝＝　アクセス　＝＝＝＝＝＝ */
.access_cont_whole{
margin: 0px auto;
width: 100%;
background: #ffffff;
padding: 60px 0;
}
.access_cont{
width: 90%;
margin: 0 auto;  
max-width: 1500px;
position: relative;
}
.emmy_cont_whole{
position: relative;
padding: 60px 0;
background-color: #ffffff;
margin: 0 auto;
}
.emmy_cont_whole::before {
content: '';
width: 100%;
height: 30%;
background-image: radial-gradient(#dcffdc 8%, transparent 16%), radial-gradient(#dcffdc 8%, transparent 16%);
background-position: 0 0, 7px 7px;
background-size: 12px 12px;
position: absolute;
top: -10px;left: 0px;
}
.emmy_cont{
width: 90%;
margin: 0 auto;  
max-width: 1500px;
background: #ffffff;
}
.clinic_info{
width: 90%;
margin: 0 auto;
padding: 15px;    
}
.clinic_info p{
width: 90%;
margin: 5px auto 30px;
font-size: 95%;
}
/* ＝＝＝＝＝＝　ノーマル　＝＝＝＝＝＝ */
.normal_cont{
margin: 0px auto;
max-width: 1500px;
width: 90%;
padding: 60px 0;
}

/*＝＝＝＝＝　common ＝＝＝＝＝*/
.common_title{
width: 65%;
text-align: center;
-webkit-animation:zoomIn 1.5s forwards;
animation:zoomIn 1.5s forwards;
}

/*トップページ*/
#pagetop{
position:fixed;
right: -550px;
cursor:pointer;
}
@media screen and (max-width: 998px){
.top_cont{
position: inherit;
width: 100%;
height: 550px;
margin: 0 auto;
background-image: url("../img/top/xmas_sp.png");
}
.box_inner{
width: 96%;
margin: 0 auto;
}
.line_top{
width: 20%;
}
.top_cal{
width: 100%;
margin: 0 auto;
position: inherit;
}
h1{
font-size:240%;
text-align: left;
position: relative;
padding: 0px 0 20px 80px;
}
}
@media screen and (max-width: 789px){
h1{
font-size:300%;
text-align: left;
position: relative;
}
h1::before {
content: "";
display: inline-block;
width: 80px;
height: 80px;
left: 0;
top: 0px;	
}
h2{
font-size: 160%;
margin: 50px auto 20px;
}
h2 img{
top: -125px;
}
h2 p{
font-size: 90%;
}
h3 {
font-size: 115%;
line-height: 2;
margin: 5px auto 20px;
}
h4{
font-size: 115%;
}
h6{
font-size: 110%;
padding: 8px 20px;
}
.oshirasemsg{
padding: 10px 0;
}
/*＝＝＝＝＝　header　＝＝＝＝＝*/
.header_top{
font-size: 85%;
text-align: left;
}
header p{
padding: 5px 5px 0;
line-height: 1;
font-size: 80%;
}
header{
display: flex;
justify-content:center;
color: #059058;
align-items:flex-end;
background: #dcffdc;
flex-direction: column-reverse;
width: 100%;
padding-bottom: 0px;
}
.top_logo_img{
width: 100%;
padding-top: 20px;
}
.top_logo_img img{
width: 10%;
}
.line_top{
width: 10%;
top:10px;
}
.top_cont{
position: inherit;
width: 100%;
height: 400px;
margin: 0 auto;
}

.schedule_img{
position: absolute;
width: 20%;
right: -10px;
bottom: -40px;   
}

/* ＝＝＝＝＝＝　news　＝＝＝＝＝＝ */
.news_cont{
width: 100%;
padding: 20px 0;
}
/* ＝＝＝＝＝＝　診療予定表　＝＝＝＝＝＝ */

/*当院案内*/
.access_cont_whole{
margin: 0px auto;
width: 100%;
}
.access_cont{
width: 98%;
}
.clinic_info{
width: 98%;
margin: 0 auto;
padding: 5px;    
}
.clinic_info p{
width: 90%;
margin: 5px auto 10px;
font-size: 95%;
}
.yoyaku_cont_whole{
padding: 30px 0;
}
.normal_cont{
margin: 0px auto;
max-width: 1500px;
width: 100%;
padding: 30px 0;
}
.emmy_cont{
width: 100%;
margin: 0 auto;  
background: #ffffff;
}
}
@media only screen and (max-width:600px){
.top_cont{
height: 350px;
}
h1{
font-size:220%;
text-align: left;
position: relative;
padding: 0px 0 15px 50px;
}
h1::before {
content: "";
display: inline-block;
width: 50px;
height: 50px;
left: 0;
top: 0px;	
}
h5.mordal_title::before {
width: 20px;/*画像の幅*/
height: 20px;/*画像の高さ*/
}
.news_cont{
width: 100%;
padding: 10px 0 20px;
}

}
@media only screen and (max-width:400px){
.top_cont{
height: 300px;
}
h1{
font-size:200%;
}
}