@charset "utf-8";

/* =========================================================
   Lion Animal Hospital - Responsive CSS (rewrite)
   Target: existing HTML structure (no markup changes)
   ========================================================= */

/* ---------- Base / Reset ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body,
h1, h2, h3, h4, h5, h6,
p, blockquote, dl, dd,
ul, ol, li,
table, th, td,
figure {
  margin: 0;
  padding: 0;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
  border: 0;
}

a {
  color: inherit;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

/* ---------- Theme Tokens ---------- */
:root{
  --wrap-max: 1000px;
  --gutter: 15px;

  --bg-body: #f6f4ea;
  --bg-wrap: #ffffff;
  --bg-contents: #E1DAC1;
  
  --bg-purple: #CCF;
  --bg-light-purple: #F0EFFE;
  --bg-glay: #D6D6D6;

  --text: #222;
  --muted: #555;
  --brand: #00844A;

  --midashi: #333300;
  --midashi-text: #fff;

  --h2: #333300;
  --h3: #973100;

  --line: #A28E4F;
  --radius: 6px;
  --shadow: 0 2px 10px rgba(0,0,0,.06);
}

body{
  font-family: "Hiragino Maru Gothic Pro", "ヒラギノ丸ゴ Pro W4", "Segoe UI",
               Arial, Helvetica, sans-serif;
  line-height: 1.6;
  color: var(--text);
  background: var(--bg-body) url(img/back.gif) repeat left top;
  text-align: center;
}

/* keep links green like old site */
a:link, a:visited { color: var(--brand); font-weight: 700; }
a:hover, a:active { color: var(--brand); }

/* ---------- Layout Wrapper ---------- */
#wrap{
  max-width: var(--wrap-max);
  margin: 0 auto;
  background: var(--bg-wrap);
  padding: var(--gutter);
  text-align: left;
  box-shadow: var(--shadow);
}

/* clearfix legacy support */
.clearfix::after{
  content:"";
  display:block;
  clear:both;
}

/* ---------- Top Bar (midashi) ---------- */
#midashi{
  width: 100%;
  background: var(--midashi);
  color: var(--midashi-text);
  border-radius: 0;
  padding: 6px 10px;
  display: flex;
  align-items: center;
  gap: 10px;
}

#midashi h1{
  font-family: Verdana, Geneva, sans-serif;
  font-size: 12px;
  font-weight: 400;
  color: var(--midashi-text);
  background: transparent;
  text-indent: 0;
  padding: 0;
  width: auto;
  flex: 1 1 auto;
}

.japan{
  color: var(--midashi-text);
  font-size: 12px;
  white-space: nowrap;
}

.japan a:link, .japan a:visited{
  color: #fff;
  font-weight: 400;
  text-decoration: underline;
}
.japan a:hover, .japan a:active{
  color: #ffff99;
  text-decoration: none;
}

/* ---------- Header ---------- */
#header.site-header{
  background: #fff !important;
  height: auto;
  padding: 10px 0 15px 0;
  position: relative;
}

/* ロゴは左寄せ（画像サイズに合わせて縮む） */
.site-header__logo img{
  display: block;
  max-width: 100%;
  height: auto;
  margin-bottom: 10px;
}

/* links：常に「ロゴ下・右寄せ」にする */
#for-map.site-header__links{
  position: absolute;   /* PCもスマホも同じ位置固定 */
  right: 0;
  bottom: 6px;          /* ロゴの下側に合わせて微調整 */
  text-align: right;
  color: #FF8133;
  font-size: 14px;
  white-space: nowrap;  /* 途中改行させない */
}

#for-map.site-header__links a{
  color: #F63;
  font-weight: 700;
  text-decoration: underline;
}
#for-map.site-header__links a:hover{
  text-decoration: none;
}

#for-map a:link, #for-map a:visited{ text-decoration: underline; }
#for-map a:hover, #for-map a:active{ text-decoration: none; }

/* -----------------------------------------------
 * WELCOME（犬 + 診療時間）を flex に再構成
 * ----------------------------------------------- */

/* 背景画像は使わない（犬はimgとして表示） */
#welcome.welcome{
  background: none !important;
  height: auto;
  min-height: 0;
  width: 100%;
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 10px 0;
}

/* 左：犬画像 */
.welcome__dog{
  flex: 0 0 320px;          /* PC時の左カラム幅（好みで調整） */
  display: flex;
  justify-content: center;  /* 犬画像を左カラム内で中央寄せ */
  align-items: flex-start;
  margin-top: 16px;
  border-radius: 6px;
}
.welcome__dog img{
  width: 100%;
  max-width: 320px;
  height: auto;
}

/* 右：テーブル＋住所 */
.welcome__info{
  flex: 1 1 auto;
  min-width: 0; /* flex内で縮むのに必要 */
}

/* テーブル：右側に回り込み（float）は使わない */
#welcome table{
  float: none;
  margin: 0;
  width: 100% !important;   /* width="500" をCSSで上書き */
  max-width: 700px;         /* PC時の見た目維持（好みで調整） */
}

/* 住所：float解除して下へ */
#welcome-adress.welcome__address{
  float: none;
  width: 100%;
  margin-top: 8px;
}

#welcome table td{
  min-width: 40px;
}

/* -----------------------------------------------
 * table
 * ----------------------------------------------- */
#welcome table{
	margin-top: 15px;
  background-color: var(--bg-light-purple);
	border-top-width: 1px;
	border-top-color: #999;
  border-radius: 6px;
}
#welcome table th{
	font-weight: normal;
	padding-top: 0.5em;
	padding-right: 0px;
	padding-bottom: 0.5em;
	padding-left: 0px;
	text-align: left;
	text-indent: 7px;
	width: 100px;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #999;
  background-color: var(--bg-glay);
}
#welcome table td{
	border-bottom-style: solid;
	text-align: center;
	padding-top: 0.5em;
	padding-right: 0px;
	padding-bottom: 0.5em;
	border-bottom-width: 1px;
	border-bottom-color: #999;
}

#welcome table td{
	min-width: 40px;
}

/* ---------- Reservation ---------- */
#reservation{
  max-width: var(--wrap-max);
  margin: 10px auto 0;
  background-color: var(--bg-purple);
  padding: 10px;
  text-align: center;
  border-radius: var(--radius);
}
#reservation img{
  width: min(60%, 760px) !important;
  margin: 0 auto !important;
}

/* ---------- Contents Area ---------- */
#contents{
  margin: 15px auto;
  background: var(--bg-contents);
  border-radius: var(--radius);
  padding: 0;
  overflow: hidden;
}

.contents-box{
  padding: 18px;
  border-bottom: 1px dotted var(--line);
}

/* headings */
h2{
  font-family: Verdana, Geneva, sans-serif;
  font-size: 18px;
  color: var(--h2);
  font-weight: 700;
  margin: 0 0 10px;
  padding: 6px 0 6px 0;
  background: url(img/paw-icon.gif) no-repeat left 11px;
  text-indent: 20px;
}

h3{
  font-family: Verdana, Geneva, sans-serif;
  font-size: 15px;
  color: var(--h3);
  font-weight: 700;
  margin: 10px 0 6px;
}

/* paragraphs */
.contents-box p{
  margin: 0 0 10px;
  color: var(--text);
}

/* ---------- Image helpers ---------- */
.img-left{
  float: left;
  padding: 10px;
  margin: 0 10px 5px 0;
}

.img-right{
  float: right;
  padding: 10px;
  margin: 0 0 5px 10px;
}

.img-right2{
  float: right;
  padding: 10px;
  margin-left: 10px;
}

.img-center{
  text-align: center;
  width: 100%;
  margin: 0 0 10px;
}
.img-center img{
  margin: 0 auto;
}

/* ---------- Tables inside contents (legacy blocks) ---------- */
.contents-box table{
  width: 100%;
  border-collapse: collapse;
  margin: 10px 0;
}

.contents-box table th,
.contents-box table td{
  text-align: center;
  padding: 6px 4px;
  border: 0;
}

/* ---------- Footer ---------- */
#footer{
  font-family: Verdana, Geneva, sans-serif;
  font-size: 12px;
  color: #fff;
  background: var(--midashi);
  padding: 8px 10px;
  text-align: center;
  border-radius: 0;
  margin-top: 10px;
}

/* ---------- Page Top (UP lion) ---------- */
#up-lion{
  position: fixed;
  right: 10px;
  bottom: 10px;
  z-index: 999;
}
#up-lion img{
  width: 65px;
  height: auto;
}

/* =========================================================
   Responsive
   ========================================================= */

/* --- Tablet --- */
@media (max-width: 1024px){
  #wrap{
    max-width: 920px;
    padding: 14px;
  }

  #header{
    background-position: left 8px;
  }

  #welcome{
    background-size: cover;
  }

  #welcome table{
    width: min(520px, 100%);
  }
}

/* -----------------------------------------------
 * タブレット以下：犬を中央、診療時間は下へ（縦積み）
 * ----------------------------------------------- */
@media (max-width: 1024px){
  #welcome.welcome{
    flex-direction: column;
    align-items: center;
    gap: 10px;
  }

  .welcome__dog{
    flex: 0 0 auto;
    width: 100%;
  }

  .welcome__info{
    width: 100%;
  }

  /* テーブルは中央寄せ */
  #welcome table{
    margin: 0 auto;
    width: 100%;
  }

  /* 住所も中央寄せ（文字は左でもOKなら text-alignは外してください） */
  #welcome-adress.welcome__address{
    text-align: center;
  }
}

/* --- Mobile --- */
@media (max-width: 768px){

  #wrap{
    padding: 12px;
  }

  /* top bar stacks */
  #midashi{
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }
  #midashi h1{
    font-size: 12px;
  }
  .japan{
    width: 100%;
    text-align: right;
  }

  /* ロゴが縮むので、リンクも同じ挙動（ロゴ下右寄せを維持） */
  #header.site-header{
    padding: 8px 0 22px;  /* 下にリンク分の余白を確保（重要） */
  }

  #for-map.site-header__links{
    right: 0;
    bottom: 6px;
    font-size: 13px;
  }

  /* welcome block: table becomes scrollable to keep all columns readable */
  #welcome{
    padding-top: 10px;
  }
  #welcome table{
    float: none;
    margin: 0 auto;
    display: block;
    overflow-x: auto;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
  }
  #welcome-adress{
    float: none;
    width: auto;
    margin: 10px 0 0;
    padding: 0 4px;
  }
}
  
/* -----------------------------------------------
 * スマホ：テーブルが詰まるので少しだけ読みやすく
 * （必要なければ削除OK）
 * ----------------------------------------------- */
@media (max-width: 480px){
  #welcome table{
    font-size: 11px;
  }
  #welcome table th{
    width: 84px; /* Time列を少し詰める */
  }
  
  .welcome__dog{
    flex: 0 0 auto;          /* 高さ計算に参加させない */
    display: block;          /* flex をやめる */
    text-align: center;      /* 画像中央寄せ */
    margin: 0 auto;          /* 余計な余白を完全に排除 */
    margin-bottom: 8px;    /* 必要な分だけ明示的に余白を指定 */
  }

  .welcome__dog img{
    display: inline-block;   /* 下の余白（inline画像問題）を回避 */
    max-width: 80%;
    height: auto;
  }

  /* contents padding */
  .contents-box{
    padding: 14px;
  }

  /* float images stop floating */
  .img-left,
  .img-right,
  .img-right2{
    float: none;
    margin: 0 auto 10px;
    padding: 0;
    text-align: center;
  }

  h2{
    font-size: 16px;
    background-position: left 10px;
  }
  h3{
    font-size: 14px;
  }

  #reservation{
    padding: 10px 8px;
  }
  #reservation img {
    min-width: 80%;
  }

  #up-lion img{
    width: 48px;
  }
}

/* --- Small Mobile --- */
@media (max-width: 420px){
  #for-map{
    font-size: 13px;
  }

  #welcome table{
    font-size: 11px;
  }

  h2{
    font-size: 15px;
  }
}

/* Accessibility: reduce motion preference (just in case) */
@media (prefers-reduced-motion: reduce){
  *{
    scroll-behavior: auto !important;
  }
}