@import url("https://fonts.googleapis.com/css?family=Poppins:400,500,700");

/* 基本 */
html {
  height: 100%;
  width: 100%;
  font-family: "M PLUS Rounded 1c", "Meiryo", "Poppins", "san-serif";
  color: #222;
  background-color: #ffffff;
}
body {
  font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", sans-serif;
  color: #222;
  background-color: #fff;
  padding-top: 70px; /* 固定ナビ分の余白 */
}
.wrap { overflow: hidden; }

h1 { font-size: 1rem; }
h2 { font-size: 180%; }
h3 { padding: 20px; }

/* ナビゲーション */
.navbar { padding: 0.8rem 0; }
.navbar img { width: 100%; max-width: 200px; }
.navbar .name { width: 20%; }
.navbar-nav li { padding-right: 20px; }
.nav-link { font-size: 1.1em !important; }

/* ヒーロー/カルーセル */
.carousel-inner img { width: 100%; height: 100%; opacity: 0.9; }
.carousel-caption { position: absolute; top: 50%; transform: translateY(-50%); }
.carousel-caption h1 { text-transform: uppercase; text-shadow: 1px 1px 10px #000; }
.carousel-caption h3 { font-size: 100%; font-weight: 500; text-shadow: 1px 1px 10px #000; padding-bottom: 1rem; }
.carousel-item {
  transition: transform 0.5s ease, -webkit-transform 0.5s ease;
  -webkit-backface-visibility: visible; backface-visibility: visible;
  height: 400px; width: 100%;
}
.carousel-item img { object-fit: cover; }

/* セクション共通 */
.padding { padding-bottom: 2rem; }
.titles { width: 35%; margin-top: 70px; }
.about-us { padding-top: 10px; }
.about-us .comment { padding: 30px 50px; }
.access-box { padding-top: 20px; }

/* 罫線 */
hr.light { border-top: 1px solid #d5d5d5; width: 65%; margin: 0.8rem auto 1rem; }
hr.light-100 { border-top: 1px solid #d5d5d5; width: 100%; margin: 0.8rem 0 1rem; }

/* 営業時間ブロック */
.time { width: 90%; margin: 0 auto; padding-top: 2rem; }


/* 営業時間テーブル */
.biz-hour { border-collapse: collapse; margin: 0 auto; text-align: center; }
.biz-hour th { border-top: 1px solid #a28c63; background: #fdede4; font-weight: normal; }
.biz-hour th, .biz-hour td {
  padding: 10px 20px; text-align: center; border-bottom: 1px solid #a28c63;
}
.biz-hour th.sat { color: #3db2da; }
.biz-hour th.sun { color: #e66a6a; }

/* 掲示事項テーブル */
.info-table { width: 100%; border-collapse: collapse; margin: 1rem auto; table-layout: fixed; }
.info-table th, .info-table td { 
  border: 2px solid #333; 
  padding: 10px 14px; 
  vertical-align: top;
  overflow-wrap: break-word; 
  word-wrap: break-word; 
  word-break: break-word;
}
.info-table th { background: #f7f7f7; font-weight: 600; }
.info-table thead th { text-align: center; background: #eee; }
.info-table.otc-table { table-layout: fixed; width: 100%; }
/* 「分類と表示」を狭めて全列が収まるようにする（PC/タブレット） */
.info-table.otc-table thead tr:nth-child(2) th:nth-child(1) { width: 16%; }
.info-table.otc-table tbody th { width: 16%; white-space: normal; }
.info-table.otc-table th, .info-table.otc-table td { word-break: break-word; overflow-wrap: break-word; }

/* 620px前後でも折り返してはみ出さないよう調整 */
@media screen and (max-width: 768px) {
  .info-table.otc-table { table-layout: auto; }
  .info-table.otc-table thead tr:nth-child(2) th:nth-child(1) { width: 22%; }
  .info-table.otc-table tbody th { width: 22%; white-space: normal; }
  .info-table.otc-table th, .info-table.otc-table td {
    white-space: normal; word-break: break-word; overflow-wrap: anywhere; line-break: strict;
  }
}

/* 見出しの左寄せ（本文中のh3のインデントをなくす） */
.text h3 { padding: 0 0 10px 0; margin-top: 36px; }
.text h4 { padding: 0 0 6px 0; margin-top: 24px; }

/* Google マップ */
.gmap { width: 100%; overflow: hidden; padding-bottom: 56.25%; position: relative; }
.gmap iframe { position: absolute; left: 15%; top: 0; height: 80%; width: 70%; }

/* お問い合わせ */
.contacts { padding-top: 50px; }

/* フッター */
footer {
  background-color: #f3f3f3; color: #333;
  padding: 2rem 2rem 1rem;
}
footer img { width: 30%; max-width: 300px; }

/* Bootstrapのカラム余白調整（既存レイアウト依存） */
[class*="col-"] { padding: 1rem; }

/* 細部 */
.del-list { text-align: left; } /* 文章で使用している可能性があるため残置 */

/* 固定背景の飾り（HTMLで使用） */
figure { position: relative; width: 100%; height: 30%; margin: 0 !important; }
.fixed-wrap { clip: rect(0, auto, auto, 0); position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
#fixed {
  background-image: url("/img/inside.jpg");
  opacity: 0.5; position: fixed; display: block; top: 0; left: 0;
  width: 100%; height: 100%; background-size: cover; background-position: center center;
  transform: translateZ(0); will-change: transform;
}

/* ====== レスポンシブ ====== */
@media screen and (max-width: 768px) {
  body { padding-top: 50px; }
  .container-fluid { padding-top: 5px; padding-bottom: 5px; }
  .navbar { padding: 0 2%; }
  .carousel-caption { top: 45%; }
  .titles { width: 60%; }
  footer img { width: 50%; }
  .gmap iframe { left: 5%; height: 90%; width: 90%; }

  .eyecatch__page { height: 110px; } /* ページ見出しエリアがあるため最小限だけ残し */
  .eyecatch__page-title { font-size: 2rem; }
  .breadcrumbs__page-heading { text-align: left; margin: 0; }
}

@media screen and (max-width: 576px) {
  .carousel-caption { top: 40%; }
  .navbar img { width: 180px; }
  .carousel-caption h1 { font-size: 250%; }
  .carousel-caption h3 { font-size: 110%; }
  .carousel-indicators { display: none; }
  .display-4 { font-size: 160%; }
  .titles { width: 70%; }

  .biz-hour th, .biz-hour td { padding: 8px; border-bottom: 1px solid #a28c63; }

  .footer-inner { justify-content: center; text-align: center; }
  .footer-bottom { text-align: center; font-size: 12px; margin-top: 10px; }

  /* 本文全体に左右余白を追加 */
  .col-12.text { padding-left: 16px !important; padding-right: 16px !important; }
  .col-12.text > * { max-width: 100%; }

  /* 表のレスポンシブ（横スクロールなしで縦積み表示） */
  .info-table { 
    width: 100%; 
    margin-left: 0; 
    margin-right: 0; 
    table-layout: auto !important;
    border-collapse: separate; 
    border-spacing: 0; 
  }
  .info-table thead { display: none; }
  .info-table tbody { display: block; width: 100%; padding: 0 12px; box-sizing: border-box; }
  .info-table tr { display: block; background: #fff; border: 2px solid #333; margin-bottom: 16px; padding: 0; width: 100%; box-sizing: border-box; }
  .info-table th, .info-table td { 
    display: block; 
    width: 100% !important;
    max-width: none !important;
    padding: 10px 12px; 
    white-space: normal; 
    font-size: 14px; 
    border: 0; 
    border-bottom: 1px solid #ddd;
    word-break: break-word;
    overflow-wrap: break-word;
    box-sizing: border-box;
  }
  .info-table th { background: #f7f7f7; font-weight: bold; border-bottom: 2px solid #333; }
  .info-table td { background: #fff; }
  .info-table tr > *:last-child { border-bottom: 0; }
  
  /* OTCテーブル専用：項目名を擬似要素で表示 */
  .info-table.otc-table tbody tr { position: relative; }
  .info-table.otc-table tbody td:nth-of-type(1):not([colspan])::before { content: "定義："; font-weight: bold; display: block; margin-bottom: 4px; color: #555; }
  .info-table.otc-table tbody td:nth-of-type(2):not([colspan])::before { content: "陳列："; font-weight: bold; display: block; margin-bottom: 4px; color: #555; }
  .info-table.otc-table tbody td:nth-of-type(3):not([colspan])::before { content: "情報提供："; font-weight: bold; display: block; margin-bottom: 4px; color: #555; }
}

@media screen and (max-width: 414px) {
  .biz-hour { width: 100%; } /* スマホは横幅いっぱい */
}

/* 1440px以上のヒーロー画像調整（HTML内で使用あり） */
@media screen and (min-width: 1440px) {
  .eyecatch__page-img {
    position: absolute; top: 50%; left: 50%;
    width: 100%; max-width: none; transform: translate(-50%, -50%);
  }
}

/* 追加のユーティリティ（必要なら） */
.text { padding: 0; text-align: left; }
.date { padding: 0; }