@charset "utf-8";
/* ===============================
   index.css  â€�ETOPペã�Eジ専用
   PCã�¯å¾“æ�¥ãƒ�E‚¶ã‚¤ãƒ³ç¶­æŒ�E/ SPã�¯é‡�ã�ªã‚Šã�E横スク解消＋スライド稼åƒ�E
   =============================== */

/* ---------- タイトル/本æ–�E¼�EC�E�E---------- */
h1{
  font-size: 2.7em;
  font-weight: 400;
  padding: 0 50px;
  margin: 0;
  line-height: 180%;
	z-index: 10000;
	position: relative;
}
.comment{
  font-size: 1.2em;
  line-height: 160%;
  font-weight: 200;
  padding: 50px 0;
  text-indent: 1em;
}

/* ロゴ�置�E�EC�E�E*/
.animationpack{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2000;
	 opacity: 0.3;
}

/* ---------- 画�スライド�EC�E�E---------- */
.container{
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-20%);
  width: 45%;
  height: 50%;
  overflow: hidden;
}
.slider-area{
  position: relative;
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
	z-index: 0;
}
.slider-item{
  position: absolute;
  inset: 0;
  opacity: 0;
  z-index: 0;
  animation: slideShow 30s linear infinite 0s;
}
.slider-item:nth-child(2){ animation-delay: 10s; }
.slider-item:nth-child(3){ animation-delay: 20s; }
.slider-item img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.8;
  display: block;
  transform: translateZ(0); /* iOS�画安�E*/
}

@keyframes slideShow{
  0% { opacity: 0; animation-timing-function: ease-in; }
  8% { opacity: 1; animation-timing-function: ease-out; }
  20% { opacity: 1; }
  40%,100% { opacity: 0; }
}

/* ---------- 垂直書�テキスト�EC�E�E---------- */
div.animation_box{
  padding: 40px 10px;
  animation: fadeIn 5s ease 1s 1 normal backwards;
  font-family: "Noto Serif JP", serif;
  font-optical-sizing: auto;
  font-weight: 200;
  font-style: normal;
  writing-mode: vertical-rl;
  position: absolute;
  left: 200px;
  top: 50px;
}
@keyframes fadeIn{
  from{ opacity: 0; transform: translateY(20px); }
  to  { opacity: 1; transform: translateY(0); }
}

/* ---------- 「��様�方�漢方を��EC�E�E---------- */
.konna{
  overflow: hidden;
  width: calc(100% - 400px);
  padding: 150px 200px;
  text-align: center;
  margin: 100vh auto 0 auto; /* ヒã�Eローã�®ä¸‹ã�«é…�ç½® */
  font-family: "Noto Serif JP", serif;
}
.syoujyoutitle{
  display: inline-block;
  width: 510px;
  padding: 0 20px 20px 0;
  margin: 0;
  text-align: left;
  vertical-align: top;
}
.syoujyoutitle .title{
  font-size: 2em;
  padding: 0 0 15px 0 !important;
  margin: 0 !important;
}
.syoujyoutitle .comment{
  font-size: 1.1em;
  padding: 0 !important;
  margin: 0 !important;
}
.syoujyou{
  width: 200px;
  padding: 20px;
  margin: 10px;
  border: dotted 1px black;
  display: inline-block;
  text-align: center;
  color: #0e3460;
}
.syoujyou h2{ padding: 0; margin: 0; font-size: 1.15em; text-align: center; }
.syoujyou p{ padding: 10px 0 25px 0; margin: 0; font-size: 0.9em; text-align: left; }
.syoujyou a{
  padding: 5px 10px;
  margin: 0 auto;
  text-align: center;
  border: solid 1px #0e3460;
  text-decoration: none;
  color: #0e3460;
  font-size: 0.9em;
	display: block;
}
.syoujyou a:hover{ background: #f3f5f7; }

/* ---------- 他コンãƒ�Eƒ³ãƒ�E/ 地図�E�EC�E�E---------- */
.next{
  width: 70%;
  padding: 50px 0;
  text-align: left;
  margin: 0 auto;
}
.next2{
  width: 90%;
  padding: 50px 0;
  text-align: left;
  margin: 0 auto;
}
.map{
  width: 35%;
  padding: 0;
  margin: 0 50px 0 0;
  height: 60vh;
  display: inline-block;
  border: 0;
}
.timebold{ font-weight: 700; border-bottom: dashed 1px #0e3460; }

/* ---------- フッター�E�EC�E�E---------- */
.bottom{
  width: calc(100% - 40px);
  border-top: solid 1px #0e3460;
  padding: 30px 20px;
  margin: 50px 0 0 0;
  font-size: 0.8em;
  line-height: 160%;
  text-align: right;
  color: #0e3460;
}
.bottomul{ list-style: none; padding: 0 0 15px 0; margin: 0; }
.bottomul li{ display: inline-block; padding: 0 10px; }
.bottomp{ padding: 0; margin: 0; }

/* =========================================================
   📱 モ�イル�E�E00px以下�E
   - ヒã�Eローé‡�ã�ªã‚Šè§£æ¶�E
   - スライドショー稼�E
   - .comment å�³åˆ�E‚Œè§£æ¶�E
   - 診察時間テーブル��横スク
   ========================================================= */
@media (max-width: 900px){

  /* ヒã�Eロー周り：é‡�ã�ªã‚Šã‚’根本解æ¶�E*/
  .all{
    position: relative !important;
    height: auto !important;
    min-height: 100svh !important;
    padding-top: 130px !important;   /* 固定ã�Eãƒ�Eƒ€ãƒ¼åˆ�E*/
    overflow: visible !important;
  }

  /* ロゴ�通常フロー� */
  .animationpack{
    position: relative !important;
    top: auto !important;
    left: auto !important;
    transform: none !important;
    text-align: center;
    margin: 0 0 16px 0;
    z-index: 1;
	  opacity: 1;
  }
  .animationpack img{ width: 60% !important; height: auto !important; display: inline-block; }

  /* タイトル�E�Eœ¬æ–�E�E横書ã��ã�«ã�—ã€�è¡Œã�Eå�³åˆ�E‚Œã‚’防ã��E*/
  div.animation_box{
    position: relative !important;
    left: auto !important;
    top: auto !important;
    transform: none !important;
    writing-mode: horizontal-tb !important;
    padding: 16px 5vw !important;
    margin: 0 0 12px 0 !important;
    text-align: left !important;
    z-index: 1;
  }
  h1{ font-size: 1.8em; line-height: 1.5; padding: 0 0 8px 0; }
  .comment{
    font-size: 1em;
    line-height: 1.7;
    padding: 0.5rem 0.5rem !important;
    text-indent: 0 !important;
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
  }

  /* スライダー�Ešãƒ¢ãƒ�イルã�§ã‚�ESSフェードã�§å›žã�™ */
  .container{
    position: relative !important;
    top: auto !important;
    right: auto !important;
    transform: none !important;
    width: 100% !important;
    height: 44vh !important;          /* 36�E0vh�調整� */
    min-height: 240px !important;     /* è¶�E°�ç”»é�¢å¯¾ç­�E*/
    margin: 12px 0 24px 0 !important; /* 下ã�¨é‡�ã�ªã‚‰ã�ªã��E½™ç™½ */
    overflow: hidden !important;
    z-index: 1;
  }

  /* 「ã�“ã�®æ§˜ã�ªæ–¹ã�«æ¼¢æ–¹ã‚’ã€�：é‡�ã�ªã‚Šé˜²æ­¢ & レスãƒ�ンシブé�Eç½® */
  .konna{
    clear: both;                 /* ä¸�E¸€ã�®é‡�ã�ªã‚Šä¿�険 */
    width: 100% !important;
    padding: 48px 5vw !important;
    margin: 0 auto !important;
    box-sizing: border-box;
    text-align: center;
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: space-between;
    row-gap: 16px;
    column-gap: 12px;
  }
  .syoujyoutitle{ flex: 1 1 100% !important; margin-bottom: 8px; }
  .syoujyoutitle .title{ text-align: center !important; margin: 0 auto !important; display: block; }
  .syoujyoutitle .comment{ margin-bottom: 1.5em !important; }

  .syoujyou{
    display: block !important;
    flex: 0 1 calc(50% - 12px) !important; /* 2�E*/
    width: auto !important;
    margin: 0 !important;
    box-sizing: border-box;
  }
  @media (max-width: 400px){
    .syoujyou{ flex-basis: 100% !important; } /* 1�E*/
  }

  /* 地図・他セクション */
  .next,.next2{ width: 95% !important; padding: 1.5rem 0 !important; text-align: center !important; }
  .map{ width: 100% !important; height: 300px !important; margin: 0 0 1rem 0 !important; }

  /* 診察時間ã�E <ul> ã�¯ã€Œã�Eã€�を表示 */
  figure ul{ list-style: disc outside !important; padding-left: 1.2em !important; text-align: left !important; }

  /* フッター */
  .bottom{ width: 100% !important; text-align: center !important; padding: 20px 5vw !important; }
  .bottomp{ text-align: left; padding-right: 5vw; padding-left: 5vw; box-sizing: border-box; word-break: break-word; }
}

@media (max-width: 900px){

  /* 推奨�Ešãƒ©ãƒ�Eƒ‘æ–¹å¼�E*/
  .table-scroll{
    display: block !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    margin: 0 0 10px 0 !important;
    padding: 0 30px 10px 0 !important;                  /* å�³ç«¯ã�¾ã�§å±Šã�‹ã�ªã��EŽŸå› ã‚’排除 */
    background: transparent !important;
    scrollbar-gutter: stable both-edges;    /* ãƒ�ã�Eã�®å�–り回ã�—安å®�E*/
  }
  .table-scroll > table{
    width: max-content !important;          /* å†�E®¹å¹�E¼�スクロールå¹�E*/
    min-width: 820px !important;            /* 端末����E720�E00px �調整� */
    border-collapse: collapse !important;
    table-layout: auto !important;
  }
  .table-scroll > table th,
  .table-scroll > table td{
    white-space: nowrap !important;
    padding: 10px 12px !important;
  }

  /* フォールãƒ�ック�Ešãƒ©ãƒ�Eƒ‘ã�Œä½œã‚Œã�ªã��E ´å��E*/
  figure > table{
    display: block !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    width: max-content !important;
    min-width: 820px !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* figure 自体ã�«ã�¯æ¨ªã‚¹ã‚¯ãƒ­ãƒ¼ãƒ«ã‚’付ã�‘ã�ªã��E¼ˆãƒ�ーã�Œå�E体ã�«å‡ºã�ªã��E‚ˆã��E�«�E�E*/
  figure{ overflow: visible !important; }
}

/* =========================================================
   “動ã��を減らã�™â€�設定ã�E端末ã�¯é�™æ­¢1æžšã�«ãƒ•ã‚©ãƒ¼ãƒ«ãƒ�ック
   ========================================================= */
@media (prefers-reduced-motion: reduce){
  .slider-item{ animation: none !important; opacity: 0 !important; }
  .slider-item:first-child{ opacity: 1 !important; }
}
/* ======= TOP最終パãƒ�Eƒ��Eˆè¿½è¨˜ã�Eã�¿�E�E====== */
@media (max-width: 900px){
  /* 1) ç”»é�¢å…¨ä½“ã�E横スク発生æº�ã‚’æ ¹ã�“ã��ã�Žå°�ã�˜ã‚�E*/
  html,body{ overflow-x:hidden !important; }
  *,*::before,*::after{ box-sizing:border-box !important; }

  /* 2) ヒã�Eロー周りã�Eé‡�ã�ªã‚Šè§£æ¶ˆï¼ˆé«˜ã�•å›ºå®�Eabsoluteを解除�E�E*/
  .all{
    position:relative !important;
    height:auto !important;
    min-height:100svh !important;
    padding-top:130px !important;   /* 固定ã�Eãƒ�Eƒ€ãƒ¼åˆ�E*/
    overflow:visible !important;
  }
  .animationpack{
    position:relative !important;
    top:auto !important; left:auto !important;
    transform:none !important;
    margin:0 0 12px 0 !important;
    z-index:1;
    text-align:center;
  }
  div.animation_box{
    position:relative !important;
    left:auto !important; top:auto !important;
    transform:none !important;
    writing-mode:horizontal-tb !important;
    padding:16px 5vw !important;
    margin:0 !important;
    text-align:left !important;
    z-index:1;
  }
  .comment{
    font-size:1em; line-height:1.7;
    padding:8px 8px !important;
    text-indent:0 !important;
    width:100% !important; max-width:100% !important;
    overflow-wrap:anywhere !important; word-break:break-word !important;
  }
  .konna{
    width:100% !important;
    padding:48px 5vw !important;
    margin:0 auto !important;
    clear:both;  /* ��り�険 */
  }

  /* 4) �E�Eブル���横スクロール�E�Eigure全体����“table����E*/
  figure{ overflow:visible !important; }  /* �figure��付���E*/
  /* ラãƒ�Eƒ‘ã�Œã�ªã��E ´å�ˆã�§ã‚‚効ã��フォールãƒ�ック */
  figure > table{
    display:block !important;
    width:max-content !important;     /* å†�E®¹å¹�E¼�スクロールå¹�E*/
    min-width:820px !important;       /* 720�E00px�調整� */
    overflow-x:auto !important;
    overflow-y:hidden !important;
    -webkit-overflow-scrolling:touch !important;
    margin:0 auto !important;
    padding:0 !important;
  }

  /* 5) 診察時間下ã�EULã�«ã€Œã�Eã€�を表示�Eˆãƒ¢ãƒ�イルã�§æ¶ˆã�ˆã�Œã�¡å¯¾ç­–ï¼�E*/
  figure ul{
    list-style:disc outside !important;
    padding-left:1.2em !important;
    text-align:left !important;
  }
}

/* “動ã��を減らã�™â€�設定ã�E端末ã�¯é�™æ­¢1枚（アクセシビリãƒ�E‚£é…�æ�E�E�E*/
@media (prefers-reduced-motion: reduce){
  .slider-item{ animation:none !important; opacity:0 !important; }
  .slider-item:first-child{ opacity:1 !important; }
}
/* ===== 最終ã�Eãƒ�Eƒˆãƒ•ã‚£ãƒ�E‚¯ã‚¹�Eˆè¿½è¨˜ã�Eã�¿�E�E===== */

/* 1) モãƒ�イル�Ešãƒ’ーロー画åƒ�を“å¿�E�šâ€�スライドã�•ã�›ã‚‹ */
@media (max-width: 900px){

  /* 高ã�•ã‚¼ãƒ­é˜²æ­¢�E‹ä¸‹ã‚³ãƒ³ãƒ�Eƒ³ãƒ�E�¨é‡�ã�ªã‚Šé˜²æ­¢ */
  .all{ position:relative !important; padding-top:130px !important; }
  /* ヒã�Eロー下ã�Eブロãƒ�E‚¯ã�Œé‡�ã�ªã‚‰ã�ªã��E‚ˆã��E¿�険 */
  .konna{ clear:both; margin-top:0 !important; }
}

/* モ�イル専用�フェードアニメ�E�E枚を想定�E*/
@keyframes mobileFade{
  0%   { opacity:0 }
  4%   { opacity:1 }
  30%  { opacity:1 }
  34%  { opacity:0 }
  100% { opacity:0 }
}

/* 2) モãƒ�イル�Ešè¨ºå¯Ÿæ™‚間テーブルã� ã�‘横スク�E�Eigure ã�§ã�¯ã�ªã��Etable をスクロールå…�E�«�E�E*/
@media (max-width: 900px){
  /* figure ã�®æ¨ªã‚¹ã‚¯ã�¯ç„¡åŠ¹ã�«�Eˆâ€œå�E体ã�«ãƒ�ã�Eã�Œå�Eã‚‹â€�ã�E原因�E�E*/
  figure{ overflow: visible !important; }

  /* table 自身をスクロール�能��る�E�EOS�も効�設定�E*/
  figure > table{
    display:block !important;
    width:max-content !important;     /* å†�E®¹å¹�E¼�スクロールå¹�E¼ˆå�³ç«¯ã�¾ã�§è¡Œã���E�E*/
    min-width:820px !important;       /* 720�E00px �好��調整� */
    overflow-x:auto !important;
    overflow-y:hidden !important;
    -webkit-overflow-scrolling:touch !important;
    margin:0 auto 10px auto !important;
    padding:0 !important;             /* å�³ç«¯ã�«å±Šã�‹ã�ªã��EŽŸå› ã‚’除去 */
    background:transparent !important;
  }

  /* 端末ã�«ã‚ˆã�£ã�¦ã�¯ãƒ�E�Eブルã�®å½±éŸ¿ã�§æ¨ªã�«åƒ�E�‹ã�«ã�¯ã�¿å‡ºã�™ã�Eを根絶 */
  html, body{ overflow-x:hidden !important; }
}

/* モ�イル用フェード�E枚���E*/
@keyframes mobileFade{
  0%   { opacity: 0 }
  4%   { opacity: 1 }
  30%  { opacity: 1 }
  34%  { opacity: 0 }
  100% { opacity: 0 }
}

/* === モãƒ�イル�Ešãƒ†ãƒ¼ãƒ–ルã� ã�‘横スク。å�³ç«¯ã�¾ã�§å±Šã�� === */
@media (max-width: 900px){
  .next figure,.next2 figure{ display:block !important; width:100% !important; margin:0 !important; }
	
  /* figure 自体ã�«ã�¯æ¨ªã‚¹ã‚¯ã‚’付ã�‘ã�ªã��E¼ˆå�E体ã�«ãƒ�ã�Eã�Œå�Eã�ªã��E‚ˆã��E�«�E�E*/
  figure{ overflow:visible !important; }
}
/* =========================
   🔧 修正A�Ešãƒ¢ãƒ�イルã�®ã‚¹ãƒ©ã‚¤ãƒ‰ã�Œ1æžšã�§æ­¢ã�¾ã‚‹å•�題を解除
   ========================= */

/* モ�イル用フェード�E枚想定�E�E�E6秒開始�E*/
@keyframes mobileFade{
  0%   { opacity: 0 }
  4%   { opacity: 1 }
  30%  { opacity: 1 }
  34%  { opacity: 0 }
  100% { opacity: 0 }
}

/* =========================
   🔧 修正B�Ešè¨ºå¯Ÿæ™‚間テーブルã�Œå�³ç«¯ã�§è¦‹å�Eれるå•�é¡�E
   ========================= */
@media (max-width: 900px){
  /* figure 全体ã�«æ¨ªã‚¹ã‚¯ã�ŒæŽ›ã�‹ã‚‰ã�ªã��E‚ˆã��E¶­æŒ�E*/
  .next figure,.next2 figure{ overflow: visible !important; -webkit-mask-image:none !important; mask-image:none !important; }

  /* ラãƒ�Eƒ‘ã�«ã� ã�‘横スク。スクロール終端ã�§åˆ�E‚Œã�ªã��E€œé€�E�’å¹�E€�を用æ„�E*/

}