/* **************************************************

  		　　　　　　変数設定

************************************************** */
:root {
    --base-color:#0165B2;
    --hover-color:#FBAA1E;
}

/* **************************************************

  		　　　　　　初期設定

************************************************** */
* {
	font-family:"游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", sans-serif;
	font-weight:200;
	color:#2d2d2d;
	word-wrap:break-word;
	overflow-wrap:break-word;
	box-sizing:border-box;
	margin:0;
	padding:0;
    font-feature-settings: "palt";
    letter-spacing:0.05rem;
}
ul {
	list-style-type:none;
}
ul li a {
    text-decoration:none;
}
img {
    width:100%;
	max-width:100%;
	height:auto;
	vertical-align:bottom;
}
a img {
	border:none;
}
a {
    text-decoration:none;
}
a:hover {
    text-decoration:underline;
}
a img:hover {
    opacity:0.9;
}
table {
	border-collapse:collapse;
	border:0px;
}
table tr td {
	word-break:break-all;
	padding:0px;
}
strong,
b {
	font-weight:600;
}
.shadow {
	text-shadow:0 0 5px #000;
}

p {
    font-size:1rem;
    line-height:1.6rem;
}

button {
    cursor:pointer;
}

/* **************************************************

  		　　　　　　レイアウト

************************************************** */
body {
    display:flex;
    justify-content:space-between;
    flex-direction:column;
    min-height:100vh;
    text-align:center;
}
header {
    background:url('../img/top/bg_202506a.jpg') repeat-x center top;
    background-size:auto 100%;
}
#header_inner {
    width:100%;
    max-width:960px;
    margin:0 auto;
    aspect-ratio: 960 / 490;
}
main {
    flex-grow: 1;
}

.inner {
    max-width:960px;
    margin:0 auto;
}

#menu ,
.menulist {
    display:none;
}

/* **************************************************

  		　　　　　　  メイン画像

************************************************** */
#logo {
    width:35%;
    max-width:358px;    
    height:auto;
    margin:1rem 0 0 1rem;
    position:absolute;
    z-index:10;
}
.move {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  height:100%;
  overflow:hidden;
  position:relative;
}
#move_mon {
    flex-basis:30%;
    height:auto;
    margin-bottom:-0.5rem;
}
#move_ebi {
    flex-basis:30%;
    height:auto;
    margin-bottom:-0.5rem;
}
@keyframes smoothSway {
  0%   { transform: rotate(2deg); }
  50%  { transform: rotate(-2deg); }
  100% { transform: rotate(2deg); }
}

.cat-face {
  animation: smoothSway 3s ease-in-out infinite;
  transform-origin: bottom center;
}

/* **************************************************

  		　　　　ネコ・イヌ専用の動物病院です。

************************************************** */
#info h1 {
    text-align:center;
}
#info h1 img {
    width:65%;
    height:auto;
    max-width:640px;
    margin:5rem auto 3rem;
}
#info p {
    margin:0rem 0 1rem 0;
    font-size:1.1rem;
}
#info span {
	background: linear-gradient(transparent 60%, #ffff66 60%);
	font-weight:bold;
}

/* **************************************************

  		　　　　　　病院からのお知らせ

************************************************** */
#topics .inner {
    position:relative;
    margin-top:7rem;
}
#topics h1 {
    position:absolute;
    top:-1.5em;
    left:50%;
    transform:translate(-50%,-0%);
    background:#e371b7;
    color:#fff;
    border-radius:2rem;
    width:12em;
    font-size:1.3rem;
    font-weight:bold;
    padding:0.5em;
}
#topics dl {
    border:1px solid #e371b7;
    background:#f8f8f8;
    padding:5rem 3rem 3rem;
}
#topics dl > div {
    display:flex;
    flex-wrap:wrap;
    border-bottom:1px dotted #ccc;
    padding:2rem 1rem;
}
#topics dl > div:first-child {
    border-top:1px dotted #ccc;
}
#topics dl > div > dt {
    font-weight:bold;
    color:#e371b7;
    font-size:1.2rem;
    flex-basis:15rem;
    text-align:left;
    display:flex;
    align-items: center;
}
#topics dl > div > dd {
    flex-basis:calc(100% - 15rem);
    text-align:left;
}

/* **************************************************

  		　　　　　　  診療案内

************************************************** */
#sinryouannai {
    background:url('../img/sinryouannnai_bg.jpg') repeat-x;
    background-position:0 13rem;
    margin-top:4rem;
    padding-bottom:2rem;
}
#sinryouannai #sinryou_schedule {
    display:flex;
    align-items: flex-end;
    flex-wrap:wrap;
}
#sinryouannai .inner {
    position:relative;
}
#sinryouannai .inner h1 {
    width:26%;
    height:auto;
    margin-bottom:4rem;
    padding-right:2rem;
}
#sinryouannai #monben {
    width:46%;
    height:auto;
}
#sinryouannai #monben_com {
    display:flex;
    width:28%;
    height:auto;
    margin-bottom:6rem;
    padding-left:2rem;
}
#schedule {
    border:3px solid #fff;
}
#sinryouannai #sinryou_coution p {
    text-align:left;
    margin:2rem 0 2rem 0;
}

#sinryou_closed {
    position:relative;
    margin:5rem 0 2rem;
}
#sinryou_closed h2 {
    position:absolute;
    top:-1.5em;
    left:50%;
    transform:translate(-50%,-0%);
    background:#e371b7;
    color:#fff;
    border-radius:2rem;
    width:12em;
    font-size:1.3rem;
    font-weight:bold;
    padding:0.5em;
}
#sinryou_closed dl {
    border:1px solid #e371b7;
    background:#fff;

}
#sinryou_closed dl > div {
    display:flex;
    justify-content:center;
    flex-wrap:wrap;
    padding:3rem 1rem 2rem;
    font-size:1.1rem;
    font-weight:bold;
}
#sinryou_closed dl > div > dt {
    justify-content:center;
    text-align:left;
    display:flex;
    align-items: center;
    margin-right:1rem;
    font-weight:bold;
}
#sinryou_closed dl > div > dd {
    text-align:left;
    font-weight:bold;
}

/* **************************************************

  		　　　　　　  病院案内

************************************************** */
#byouinannai .inner {
    position:relative;
    text-align:left;
}
#byouinannai .inner h1 {
    width:26%;
    height:auto;
    margin-top:6rem;
}

#byouinannai #gaikan {
    width:calc(100% - 9rem);
    margin-right:auto;
}

#byouinannai .daikokuten_block {
    position:absolute;
    right:0;
    bottom:-1rem;
    display:flex;
    flex-direction:column;
    justify-content:flex-end;
    align-items:flex-end;
    height:100%;
    width:auto;
}
#byouinannai #daikokuten_com {
    width:auto;
    height:40%;
}
#byouinannai #daikokuten {
    width:auto;
    height:45%;
    padding-top:2rem;
    margin-right:3rem;
}

#byouinannai .place h2 {
    font-weight:bold;
    margin:2rem 0 1rem 0;
}
#byouinannai .place ul li:first-child {
    margin-bottom:1rem;
}
#byouinannai .place ul li a {
    color:#0000EE;
}

/* **************************************************

  		　　　　　フォトギャラリー

************************************************** */
#photo {
    background:url('../img/photo_bg.jpg') repeat-x;
    background-position:0 14rem;
    margin-top:4rem;
    padding-bottom:2rem;
}

#photo .photo_header {
    display:flex;
    align-items:flex-end;
    position:relative;
}
#photo #juju2 {
    width:28%;
    height:auto;
}
#photo #juju2_com {
    width:26%;
    height:auto;
    margin-left:2rem;
    margin-bottom:2rem;
}
#photo #Photo_Kiyohiro {
    position:absolute;
    right:0;
    top:13rem;
    width:auto;
    height:2rem;
}

.scroll-gallery {
  overflow: hidden;
  width: 100%;
}

.scroll-track {
  display: flex;
  width: max-content;
  animation: scroll-left 70s linear infinite;
}

.scroll-gallery:hover .scroll-track {
    /* ホバーで一時停止（任意） */
  /* animation-play-state: paused; */
}

.scroll-track img {
  width:18vw;
  min-width:250px;
  height:18vw;
  min-height: 250px;
  border-radius:1.5rem;
  margin-right: 1rem;
  flex-shrink: 0;
  object-fit: cover;
}

/* アニメーション定義 */
@keyframes scroll-left {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

/* **************************************************

  		　　　　　　フッター

************************************************** */
footer {
    padding:5rem 0 2rem;
}

/* **************************************************

  		　　　　　　アニメーション

************************************************** */
#sinryouannai #monben {
	overflow:hidden;
}
#sinryouannai #monben img ,
#sinryouannai #monben_com {
    opacity:0;
}

.monben_anime {
  transform: translateY(50px);
  opacity: 0;
  animation: catPopUp 1s ease-out forwards;
}
@keyframes catPopUp {
  0% {
    transform: translateY(50px);
    opacity: 0;
  }
  60% {
    transform: translateY(0px);
    opacity: 1;
  }
  100% {
    transform: translateY(5px);
   opacity: 1;
  }
}

.monben_com_anime {
    opacity: 0;
    transform: translateX(-50px) scale(0.95);
    animation: balloonIn 1s ease-out 0.3s forwards;
}
@keyframes balloonIn {
  0% {
    opacity: 0;
    transform: translateX(-50px) scale(0.95);
  }
  60% {
    opacity: 1;
    transform: translateX(0) scale(1.05);
  }
  100% {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
}




#juju1 ,
#juju1_com {
    opacity:0;
}
.juju1_anime {
  display: inline-block;
  font-size: 80px; /* 絵文字なら */
  animation: bark 0.3s ease-out 0s forwards;
}

@keyframes bark {
  0% {
      opacity:0;
    transform: scale(1);
  }
  50% {
      opacity:1;
    transform: scale(1.2); /* 一瞬ふくらむ */
  }
  100% {
      opacity:1;
    transform: scale(1);
  }
}

.juju1_com_anime {
  animation: bubblePop 0.5s ease-out 0s forwards;;
}
@keyframes bubblePop {
  0% {
    transform: scale(0.8);
    opacity: 0;
  }
  50% {
    transform: scale(1.2);
    opacity: 1;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

.daikokuten_anime {
  transform: translateY(50px);
  opacity: 0;
  animation: catPopUp 1s ease-out 1s forwards;
}
.daikokuten_com_anime {
    opacity: 0;
    transform: translateY(50px) scale(0.95);
    animation: balloonIn_bottom 1s ease-out 1.5s forwards;
}
@keyframes balloonIn_bottom {
  0% {
    opacity: 0;
    transform: translateY(50px) scale(0.95);
  }
  60% {
    opacity: 1;
    transform: translateY(0) scale(1.05);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.juju2_anime {
  transform: translateY(50px);
  opacity: 0;
  animation: jujuSlide 1s ease-out 1s forwards;
}
@keyframes jujuSlide {
  0% {
    transform: translateY(50px);
    opacity: 0;
  }
  60% {
    transform: translateY(0px);
    opacity: 1;
  }
  100% {
    transform: translateY(0px);
   opacity: 1;
  }
}

.juju2_com_anime {
    opacity: 0;
    transform: translateX(-50px) scale(0.95);
    animation: balloonIn 1s ease-out 1.3s forwards;
}