/* ルート設定 : 流体タイポとセーフエリア */
:root{
    --font-base: clamp(16px, 1.9vw, 18px);
    --space-1: 0.5rem;
	--space-2: 1rem;
	--space-3: 1.5rem;
    --content-max: 72ch;   /* 読みやすい行長 */
    --inset-top: env(safe-area-inset-top, 0px);
    --inset-right: env(safe-area-inset-right, 0px);
    --inset-bottom: env(safe-area-inset-bottom, 0px);
    --inset-left: env(safe-area-inset-left, 0px);
}

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

body {
      font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
      margin: 0;
      padding: 0;
      background-color: #f5f5f5;
      color: #333;
        font-size: var(--font-base);
        list-style: 1.6;
        min-height: 100dvh;
}
/* セーフエリアに配慮したラッパー */
.app{
  padding: calc(var(--space-2) + var(--inset-top))
           calc(var(--space-2) + var(--inset-right))
           calc(var(--space-2) + var(--inset-bottom))
           calc(var(--space-2) + var(--inset-left));
}
/* 画像は等比縮小・横幅フィット */
img, video { max-width:100%; height:auto; display:block; text-align: center;margin: 0 auto;}

.kochira{}
/* タップしやすいUI（44px相当を確保） */
button, .btn, a.btnlike{
  min-height: 44px; padding: 0 var(--space-2);
  display:inline-flex; align-items:center; justify-content:center;
}

/* コンテンツ幅の制御（中央寄せ） */
.container{
  width: min(100%, var(--content-max));
  margin-inline: auto;
  padding-inline: var(--space-2);
}

/* ステータスバー下にヘッダーを置く例 */
.header{
  position: sticky; top: 0;
  padding: var(--space-2) var(--space-2);
  background:#fff; border-bottom: 1px solid #eee;
}

/* カードグリッド：小画面は1列、広がるほど列追加 */
.grid{
  display:grid;
  grid-template-columns: 1fr;
  gap: var(--space-2);
}
.kaisha{
		font-size: 170%;
		text-align: left;
		background-color: skyblue;
		padding: 20px;
		text-shadow: 1px 1px 2px black;
		color: navy;
		font-weight: 800;
}
section#carptour{
        text-align: center;
        display: block;
        margin: 0 auto;
    }
table.schedule {
  margin: 0 auto;   /* 左右中央寄せ */
  border-collapse: collapse; /* 表の枠線をきれいに */
}
table.schedule{
  text-align: center;
  font-size: x-large;
  border: 2px solid #f6efef;
}
th {
  color: #868686;
  background-color: #e6e6e6;
  border-color: #868686 #868686 #868686 #868686;
  border-style: solid solid solid solid;
  border-width: 0px 1px 1px 0px;
  font-size: 80%;
}
th.schedule{
  background-color: #f6efef;
  color: #000000;
  width: 160px;
  height: 50px;
}

tr.schedule{
  background-color: #f6efef;
  color: #000000;
  height: 150px;
}
#tuktukInfo{
        text-align: center;
    }
#yamaBus{
        text-align: center;
    }
#line{
        text-align: center
    }
table.schedule{
    text-align: center;
}

@media (min-width: 480px){  /* 小型タブレット/横持ち */
  .grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 768px){  /* タブレット */
  .grid{ grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1024px){ /* PC */
  .grid{ grid-template-columns: repeat(4, 1fr); }
}

/* ナビの横スクロール（モバイルに有効） */
.tabs{
  display:flex; gap: var(--space-1);
  overflow-x:auto; -webkit-overflow-scrolling: touch;
  padding-bottom: var(--space-1);
}
.tabs::-webkit-scrollbar{ display:none; }

/* SafariのURLバー伸縮に強い高さ指定 */
.hero{ min-height: 60dvh; display:grid; place-items:center; }

/* ホバーなし・タッチ粗いポインタ向け調整（iPhone含む多くのスマホ） */
@media (hover: none) and (pointer: coarse){
  a, button{ /* ホバー依存UIを無くす・可視フィードバックを付与 */
    outline-offset: 2px;
  }
}



input, select, textarea{
  font-size: 16px;  /* 16px未満でのフォーカス時ズームを防ぐ */
  padding: 0.6rem 0.8rem;
  border:1px solid #ddd; 
    border-radius: 0.5rem;
  width:100%;
}
label{ display:block; margin-bottom: 0.4rem; }

/* コンポーネントをコンテナに指定 */
.card{ container-type: inline-size; }

/* カード自身の幅でレスポンシブに振る舞う */
@container (min-width: 360px){
  .card__body{ display:flex; gap: var(--space-2); }
  .card__media{ flex: 0 0 160px; }
}

    header {
      background-color: #4A3FFF;
      color: white;
      padding: 1rem;
      text-align: center;
    }
    header a{
        color: white;
        padding: 1rem;
        text-decoration: none;
        transition: background 0.3s;
        flex: 1 1 auto;
        text-align: center;
}
    header a:hover{
      background-color: #4A2EE0;    
}
header .carp{
    background-color:#FD0000;
}
    nav {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      background-color: #006699;
    }
    nav a {
      color: white;
      padding: 1rem;
      text-decoration: none;
      transition: background 0.3s;
      flex: 1 1 auto;
      text-align: center;
    }
    nav a:hover {
      background-color: #00557a;
    }
    .hero {
/*      background: url('car-hero.jpg') no-repeat center center/cover; */
      height: 300px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: white;
      font-size: 2rem;
      text-shadow: 0 2px 4px rgba(0,0,0,0.6);
      text-align: center;
      padding: 1rem;
    }

    .section {
        
          padding: 20px
      background-color: white;
      margin: 20px auto;
      max-width: 1000px;
      border-radius: 8px;
      box-shadow: 0 0 10px rgba(0,0,0,0.1);
    }
    section{
        margin-top: 40px;
    }
    footer {
      text-align: center;
      padding: 1rem;
      background-color: #004466;
      color: white;
    }
    .news {
        max-width: 1000px;
        margin: 20px auto;
        padding: 15px;
        border: 1px solid #ddd;
        border-radius: 8px;
        background: #f9f9f9;
    }

    .news h2 {
        font-size: 1.5em;
        border-bottom: 2px solid #333;
        padding-bottom: 5px;
        margin-bottom: 10px;
    }

    .news ul {
        list-style: none;
        padding: 0;
    }

    .news li {
        padding: 8px 0;
        border-bottom: 1px dashed #ccc;
    }

    .news li:last-child {
        border-bottom: none;
    }

    .news .date {
        font-weight: bold;
        color: #666;
        margin-right: 10px;
    }

    .news a {
        text-decoration: none;
        color: #0073e6;
    }

    .news a:hover {
        text-decoration: underline;
    }
    .nobr{
        white-space: nowrap;
    }

@media (max-width: 768px) {
      nav a {
        padding: 0.75rem;
        font-size: 0.9rem;
      }
      .hero {
        font-size: 1.5rem;
        height: 200px;
      }
      .section {
        padding: 1rem;
        margin: 1rem;
      }
    .picture{
        width: 100%;
        height: auto; /* 縦横比を維持して高さを自動調整 */
        display: block; /* 画像下に余白が出ないように */
        text-align: center;
          margin: 0 auto;
    }
        img .picture{
            width: 100%;
            height: auto; /* 縦横比を維持して高さを自動調整 */
            display: block; /* 画像下に余白が出ないように */
            text-align: center
                      display: block;
          margin: 0 auto;    
        }
    }


    @media (max-width: 768px) {
      nav a {
        padding: 0.75rem;
        font-size: 0.9rem;
      }
      .hero {
        font-size: 1.5rem;
        height: 200px;
      }
      .section {
        padding: 1rem;
        margin: 1rem;
      }
    .picture{
        width: 100%;
        height: auto; /* 縦横比を維持して高さを自動調整 */
        display: block; /* 画像下に余白が出ないように */
        text-align:center;
          margin: 0 auto;
    }
        img .picture{
            width: 100%;
            height: auto; /* 縦横比を維持して高さを自動調整 */
            display: block; /* 画像下に余白が出ないように */
            text-align: center;
          margin: 0 auto;
        }
    }
    @media (max-width: 480px) {
      .hero {
        font-size: 1.2rem;
        height: 180px;
      }
      nav {
        flex-direction: column;
      }
    .picture{
        width: 100%;
        height: auto; /* 縦横比を維持して高さを自動調整 */
        display: block; /* 画像下に余白が出ないように */
        text-align: center;
          margin: 0 auto;
    }
                img .picture{
            width: 100%;
            height: auto; /* 縦横比を維持して高さを自動調整 */
            display: block; /* 画像下に余白が出ないように */
            text-align: center;
          margin: 0 auto;
        }

}

/* ダークモード対応（iOSの外観に追随） */
@media (prefers-color-scheme: dark){
  body{ color:#f5f5f5; background:#0b0b0b; }
  .header{ background:#0b0b0b; border-bottom-color:#222; }

  /*ここからChatGPTのコピー*/
  nav {
    background-color: #00334d;
  }
  nav a {
    color: #f5f5f5;
  }
  nav a:hover {
    background-color: #004466;
  }

  .section {
    background-color: #1a1a1a;
    color: #e5e5e5;
    box-shadow: 0 0 10px rgba(0,0,0,0.6);
  }

  .card {
    background-color: #1c1c1c;
    border: 1px solid #333;
    color: #ddd;
  }

  footer {
    background-color: #002233;
    color: #f5f5f5;
  }

  .news {
    background: #1a1a1a;
    border-color: #333;
  }
  .news h2 {
    border-bottom-color: #666;
  }
  .news li {
    border-bottom-color: #444;
  }
  .news .date {
    color: #aaa;
  }
  .news a {
    color: #66b2ff;
  }
  .news a:hover {
    color: #99ccff;
  }

  input, select, textarea {
    background: #111;
    border-color: #444;
    color: #f5f5f5;
  }
  input:focus, select:focus, textarea:focus {
    border-color: #66b2ff;
    outline: none;
  }
/*ここまでChatGPTのコピー*/

}