@charset "utf-8";
/*!----------------
共有スタイル
-----------------*/

/*!Style
-------------------------------------*/
*{box-sizing:border-box}
html{font-size: 16px;}
body{margin: 0;padding:0;font-size: 16px;letter-spacing: 0.1em;font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", "メイリオ", sans-serif;color:#6e5454;}
b, strong, .bold{font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "メイリオ", "Hiragino Kaku Gothic ProN", "Hiragino Sans", sans-serif;}
img{vertical-align:middle;}
a{text-decoration: none;color:#00649f;}
a:hover{color:#ff7979;}
a:hover img{opacity:0.7;filter:alpha(opacity=70);-ms-filter:"alpha(opacity=70)"}
ul,li{margin:0;padding:0;list-style: none;}
figure,figcaption{margin: 0;padding:0;}
table {border-collapse: collapse;border-spacing: 0;width: 100%;}
iframe {vertical-align: bottom;}

.pc{display: block !important}
.sp{display: none !important}

@media screen and (max-width: 999px) {
.pc{display: none !important}
.sp{display: block !important}
}

/*!大枠
-------------------------------------*/
#stage{margin:0 auto;padding:0;width:100%;text-align:center;}

/*!ヘッダー
-------------------------------------*/
header{margin:0 auto;padding:2em;position:sticky;top:0;width:100%;background: #fff;display: flex;justify-content: space-between;align-items: center;z-index: 1000;}
header h1{margin:0;padding:0;vertical-align:middle}

@media (max-width:999px){
header{padding:0.5em;padding-right: 2em;justify-content: center;}
header img{width:80%;}
}

/*!nav
-------------------------------------*/
nav ul{margin:0;padding:0;display: flex;justify-content: space-between;}
nav ul li a{display: block; padding:0 1.5em;font-size: 16px;color:#6e5454;font-family:"ヒラギノ丸ゴ Pro W4","ヒラギノ丸ゴ Pro","Hiragino Maru Gothic Pro","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","HG丸ｺﾞｼｯｸM-PRO","HGMaruGothicMPRO";font-weight: bold;}

@media (max-width:999px){
nav ul{margin:0;padding:0;display:block;border-top:3px dashed #fff;border-left:3px dashed #fff;border-right:3px dashed #fff;}
nav ul li{background:#fff;border-bottom:3px dashed #d2edee;}
#g-nav .box img{width:70%;}
#g-nav .box p{font-size: 0.8em;}
nav .btn{display: flex !important;justify-content: space-between;}
nav .btn p{margin:0;display: block;width:48%;}
nav .btn a{margin:0;padding:0.5em;color:#fff;display: block;background: #ff7979;border-radius:10px;font-size: 2em;}
	
/*ハンバーガー*/
#g-nav{position:fixed;z-index: 999;top:-120%;left:0;width:100%;height: 100vh;background:#d2edee;transition: all 0.6s;font-family:"ヒラギノ丸ゴ Pro W4","ヒラギノ丸ゴ Pro","Hiragino Maru Gothic Pro","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","HG丸ｺﾞｼｯｸM-PRO","HGMaruGothicMPRO";}
#g-nav.panelactive{top: 0;}
#g-nav.panelactive #g-nav-list{position: fixed;z-index: 999;width: 100%;height: 100vh;overflow: auto;-webkit-overflow-scrolling: touch;}
#g-nav .box{position: absolute;z-index: 999;top:50%;left:50%;transform: translate(-50%,-50%);width:70%;}
#g-nav li{list-style: none;text-align: center;}
#g-nav li a{text-decoration: none;padding:10px;display: block;text-transform: uppercase;letter-spacing: 0.1em;font-weight: bold;}
#kotei{display: flex;align-items: center;}
.openbtn{position:absolute;z-index: 9999;right: 10px;cursor: pointer;width: 50px;height:50px;}
.openbtn span{display: inline-block;transition: all .4s;position: absolute;left: 14px;height: 3px;border-radius: 2px;background-color: #666;width: 45%;  }
.openbtn span:nth-of-type(1) {top:15px;}
.openbtn span:nth-of-type(2) {top:23px;}
.openbtn span:nth-of-type(3) {top:31px;}
.openbtn.active span:nth-of-type(1) {top: 18px;left: 18px;transform: translateY(6px) rotate(-45deg);width: 30%;}
.openbtn.active span:nth-of-type(2) {opacity: 0;}
.openbtn.active span:nth-of-type(3){top: 30px;left: 18px;transform: translateY(-6px) rotate(45deg);width: 30%;}
}

/*!mv
-------------------------------------*/
#mv{margin:0 auto;padding:0;width:100%;text-align:center;position: relative;}
#mv_box{margin:0 auto;padding:0;max-width:1000px;width:90%;height:100%;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);-webkit-transform: translate(-50%, -50%);-ms-transform: translate(-50%, -50%);z-index: 10;}
#mv #mv_box .text{margin:0;padding:0;position: absolute;top: 48%;left: 50%;transform: translate(-48%, -50%);-webkit-transform: translate(-48%, -50%);-ms-transform: translate(-50%, -50%);width: 100%;}
#mv #mv_box .animal{margin:0;padding:0;position: absolute;bottom:-1px;right:0;}

@media (max-width:999px){
.slider img {/*height: 70vh;*/margin: auto;max-height: 100%;max-width: 100%;object-fit: cover;width: 100%;}
#mv_box .animal{display: none;}
#mv_box .text img{width: 100%;}
}

/*!contact_bar
-------------------------------------*/
.contact_bar{margin:0 auto;padding:0;width:100%;background: url("img/bg_01.jpg") repeat;}
.contact_box{margin:0 auto;padding:3em 0;max-width:1000px;width:100%;}
.contact_box ul{margin:0 auto;display: flex;justify-content: center;max-width:1000px;width:90%;}
.contact_box ul li:first-child{width:60%;text-shadow: 1px 1px 2px #fff;}
.contact_box ul li:last-child{width:36%;margin-left: 30px;font-weight: bold;}
.contact_box ul li a{margin:0 auto;padding:0;width:100%;font-size: 1.8em;color:#6e5454;display: flex;align-items: center;justify-content: center;height:60px;background: #fff;border-bottom-left-radius: 10px;border-bottom-right-radius: 10px;box-shadow: 2px 2px 5px #ccc;}
.contact_box ul li a i{color:#00649f !important;margin-right: 8px;}
.contact_box ul li a:hover{color:#00649f;}
.contact_box ul li:first-child p{margin: 0;font-size: 1.4em;display: block;padding: 0 0 0.5em;font-weight: bold;letter-spacing: 0.2em;}
.contact_box ul li:last-child p{margin: 0;padding: 5px 0 3px;background: #00649f;color:#fff;border-top-left-radius: 10px;border-top-right-radius: 10px;}

@media (max-width:999px){
.contact_box{padding:2em 0;}
.contact_box ul{flex-wrap: wrap; justify-content:right}
.contact_box ul li{width:100% !important;}
.contact_box ul li a{font-size: 1.8em;}
.contact_box ul li:last-child{margin-left:0;margin-top:1em;font-size: 0.7em;}
.contact_box ul li:last-child a{padding:0.5em 0;font-size: 2em;}
.contact_box ul li:first-child a i{font-size: 0.8em;}
.contact_box ul li:last-child a i{margin-right: 5px;font-size: 1em;}
}

/*!病院概要-about
-------------------------------------*/
#about{margin:0 auto;padding:5em 0;width:100%;background: url("img/bg_02.png") no-repeat top left;}
#about_box{margin:0 auto;padding:3em 0;display: flex;justify-content: space-between;max-width:1000px;width:90%;}
table.about_table{background: #e0f1f9;width:50%;border-radius: 10px;}
table.about_table th{padding:15px 5px;background: #00649f;color:#fff;}
table.about_table th:first-child{width:140px;}
table.about_table tr:first-of-type th:first-child {border-radius: 10px 0 0 0;border-right: 1px solid #fff;}
table.about_table tr:first-of-type th:last-child {border-radius: 0 10px 0 0;}
table.about_table td{padding:15px 5px;}
table.about_table tr:not(:last-child) td {border-bottom: 1px solid #fff;}
table.about_table td:first-child {border-right: 1px solid #fff;}
#about_box #right{margin:0 auto;padding:0;width:40%;}
#about_box #right ul{margin:0 auto;padding:0;display: flex;justify-content: space-between;flex-wrap: wrap;}
#about_box #right ul li{margin:0 0 0.8em;padding:0;}
#about_box #right ul li:nth-child(odd){padding:0.2em;width:35%;background: #00649f;color:#fff;border-radius: 10px;}
#about_box #right ul li:nth-child(even){padding:0.2em;width:62%;text-align: left;}
#about_box #right p{margin:0;padding:0;text-align: left;}
#about_box #right ul li:first-child {background: #ff7979;color:#fff;}

@media (max-width:999px){
#about_box{padding:2em 0 0;flex-wrap: wrap;background: none;}
table.about_table{width:100%;}
table.about_table th:first-child{width:110px;}
table.about_table td:first-child {font-size: 0.8em;}
#about_box #right{margin:1em auto;width:100%;}
}


/*!news
-------------------------------------*/
#news{margin:0 auto;padding:4em 0;width:100%;background:#fdfcea;border-top:5px dashed #eceacd;border-bottom:5px dashed #eceacd;}
#news_box{margin:0 auto;padding:0;display: flex;justify-content: space-between;align-items: center;max-width:1000px;width:80%;}
#news_box ul{margin:0;padding:1em;max-width:750px;width:100%;border:1px solid #eceacd;background: #fff;}
#news_box ul li{margin:0 auto;padding:1em;border-bottom:1px dashed #eceacd;text-align: left;}
#news_box ul li:last-child{border-bottom:none;}
#news_box ul li dl{margin:0;padding:0;display: flex;justify-content: flex-start;}
#news_box ul li dt{margin:0 1em 0 0;padding:0;}
#news_box ul li dd{margin:0;padding:0;}

@media (max-width:999px){
#news{padding:3em 0 4em;}
#news_box{flex-wrap: wrap;background: none;}
#news_box ul li dl{flex-wrap: wrap;}
#news_box ul li dt{font-weight: bold;}
#news_box ul li dt,#news_box ul li dd{margin:0;padding:0;width:100%;}
}


/*!当動物病院の特徴-feature
-------------------------------------*/
#feature{margin:0 auto;padding:5em 0 2em;width:100%;background: url("img/bg_03.jpg") repeat top left;}
#feature figure img{width:100%;}
.feature_box{margin:0 auto 3em;padding:0;max-width:1000px;width:100%;display: flex;justify-content: space-between;}
#feature .left h4{font-size: 24px;color:#00649f;}
#feature .left figure{width:374px;}
#feature .left figcaption{width:600px;text-align: left;display: flex;align-items: center;}
#feature .right{flex-direction: row-reverse;}
#feature .right h4{font-size: 24px;color:#04b6d4;}
#feature .right figure{width:374px;}
#feature .right figcaption{width:600px;text-align: left;display: flex;align-items: center;}

@media (max-width:999px){
#feature{background-size: 160%;}
.feature_box{flex-wrap: wrap;width:80%;}
#feature figure,#feature figcaption{width:100% !important;}
}


/*!院長挨拶-greeting
-------------------------------------*/
#greeting{margin:0 auto;padding:0;width:100%;background: #e0f1f9;overflow: hidden;}
#greeting:before{content : "";display:block;background: linear-gradient(135deg, #fff 15px, transparent 0%) 0 15px, linear-gradient(-135deg, #fff 15px, #e0f1f9 0%) 0 15px;background-repeat: repeat-x;background-position: left bottom;background-size: 30px 30px;height:30px;}
#greeting_box{margin:5em auto;padding:0;max-width:1000px;width:100%;display: flex;justify-content: space-between;flex-direction: row-reverse;}
#greeting_box figcaption h4{font-size: 24px;background: url("img/greeting_img02.png") no-repeat top left;padding: 0 0 1em 2em;}
#greeting_box figcaption .title{font-size: 24px;}
#greeting_box figcaption{width: 580px;text-align: left;}

@media (max-width:999px){
#greeting_box{flex-wrap: wrap;width:80%;}
#greeting_box img{width:100%;}
#greeting_box{margin:3em auto 5em;}
#greeting_box figure{width:100%;margin: 0;}
#greeting_box figcaption{width:100%}
}


/*!footer
-------------------------------------*/
footer{margin:0 auto;padding:2em;width:100%;text-align: center;}
footer ul{margin:0 auto;padding:0;max-width:1000px;width:100%;display: flex;justify-content: space-between;}
footer ul li:first-child{width:48%;text-align: left}
footer ul li:last-child{width:50%;}
footer ul li:last-child table{width:100% !important;}
footer ul li p.address{margin: 2em 0 0 1.4em;position:relative;padding-left:35px;}
footer ul li p.train{margin: 1.4em 0 0 1.4em;position:relative;padding-left:35px;}
footer ul li p.tel{margin: 1.4em 0 0 1.4em;}
footer ul li ul{margin:0.5em 0 0;padding:0;}
footer ul li ul li{margin:0 0 0.8em;padding:0;}
footer ul li ul li:nth-child(odd){padding:0.2em;width:30%;background: #ff7979;color:#fff;border-radius: 10px;text-align: center;}
footer ul li ul li:nth-child(even){padding:0.2em;width:68%;text-align: left;}

p.address:before{content: '';display: block;width: 30px; height: 30px;background-image: url("img/footer_icon01.png");background-size: contain;background-repeat:no-repeat;position:absolute;top:0;left:0;}
p.train:before{content: '';display: block;width: 30px; height: 30px;background-image: url("img/footer_icon02.png");background-size: contain;background-repeat:no-repeat;position:absolute;top:0;left:0;}

@media (max-width:999px){
footer ul{flex-wrap: wrap;}
footer ul li:first-child,footer ul li:last-child{width:100%;}
footer ul li p.address{margin: 2em 0 0;font-size: 0.9em;}
footer ul li p.train{margin: 1.4em 0 2em;font-size: 0.9em;}
footer ul li p.tel{margin: 1.4em 0 2em;font-size: 0.9em;}
	
}


/*!copyright
-------------------------------------*/
#copyright{margin:0 auto;padding:0.5em 0;width:100%;text-align: center;background: #00c5e6;color:#fff;font-size: 0.8em;}

/*メニューをページ下部に固定*/
#footer_menu{display: none;}

@media (max-width:999px){
#footer_menu{position:sticky;width: 100%;bottom: 0px;z-index: 99;display: block;}
#footer_menu ul{display: flex;list-style: none;padding:0;margin:0;width:100%;border-top:1px solid #fff;}
#footer_menu li{justify-content: center;align-items: center;width: 25%;padding:0;margin:0;border-right: 1px solid #fff;}
#footer_menu li a{color: #fff;text-align: center;display:block;width: 100%;padding:15px 10px;font-size: 0.8em;}
#footer_menu li a i{font-size: 1.4em;display: block;}
#footer_menu li:nth-child(1) a{background: #ff7979;}
#footer_menu li:nth-child(2) a{background: #00649f;}
#footer_menu li:nth-child(3) a{background: #00c5e6;}
#footer_menu li:nth-child(4) a{background: #fdc677;}
}




/*----------------------- アニメーション ----------------------- */
/*アニメーション要素のスタイル*/
.animation{
	opacity: 0;
	visibility: hidden;
	transition: 1s;
	transform: translateY(30px);
}
/*アニメーション要素までスクロールした時のスタイル*/
.active{
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}
.animation2{
	opacity: 0;
	visibility: hidden;
	transition: 1s;
	transform: translateX(-30px);
}
/*アニメーション要素までスクロールした時のスタイル*/
.active2{
	opacity: 1;
	visibility: visible;
	transform: translateX(0);
}