/* リセット */
* { margin:0; padding:0; box-sizing:border-box; }
body { font-family:Arial,sans-serif; }

/* ラジオボタン・ハンバーガー非表示 */
input[type="radio"], #menu-toggle { display:none; }

/* コンテナ */
.container { display:flex; min-height:100vh; transition: background 0.3s, color 0.3s; }

/* サイドバー */
.sidebar {
  width:220px;
  padding:20px;
  display:flex;
  flex-direction:column;
  gap:10px;
  position:relative;
  transition: all 0.35s cubic-bezier(0.4,0,0.2,1);
  z-index:1100;
}
.sidebar h2 { margin-bottom:15px; }
.sidebar label {
  cursor:pointer;
  padding:8px;
  border-left:5px solid transparent;
  border-radius:4px;
  transition: all 0.35s;
  position: relative;
  z-index:1;
}

/* メインコンテンツ */
.content {
  flex:1;
  padding:20px 20px 20px 40px;
  position:relative;
  transition: transform 0.35s cubic-bezier(0.4,0,0.2,1), background 0.3s, color 0.3s;
  min-height:100vh;
}
.tab-content { display:none; }

/* タブ切替表示 */
#tab1:checked ~ .container .content #content1,
#tab2:checked ~ .container .content #content2,
#tab3:checked ~ .container .content #content3,
#tab4:checked ~ .container .content #content4,
#tab5:checked ~ .container .content #content5,
#tab6:checked ~ .container .content #content6 { display:block; }

/* 選択中ラベル */
#tab1:checked ~ .container .sidebar label[for="tab1"],
#tab2:checked ~ .container .sidebar label[for="tab2"],
#tab3:checked ~ .container .sidebar label[for="tab3"],
#tab4:checked ~ .container .sidebar label[for="tab4"],
#tab5:checked ~ .container .sidebar label[for="tab5"],
#tab6:checked ~ .container .sidebar label[for="tab6"] {
  border-left:5px solid;
}

/* ハンバーガー */
.menu-icon {
  display:none;
  position:fixed; top:15px; left:15px; width:30px; height:25px;
  flex-direction:column; justify-content:space-between; cursor:pointer;
  z-index:1200;
}
.menu-icon span { display:block; height:3px; border-radius:2px; transition:all 0.3s; }

/* 背景オーバーレイ */
.overlay { display:none; position:fixed; top:0; left:0; width:100%; height:100%; z-index:1050; cursor:pointer; }

/* デフォルト: ライトモード */
body {
  background-color: #fdfdfd;
  color: #111;
}
.sidebar {
  background:#e0e0e0;
  color:#111;
}
.sidebar label {
  background:#d6d6d6;
  color:#111;
}
#tab1:checked ~ .container .sidebar label[for="tab1"],
#tab2:checked ~ .container .sidebar label[for="tab2"],
#tab3:checked ~ .container .sidebar label[for="tab3"],
#tab4:checked ~ .container .sidebar label[for="tab4"],
#tab5:checked ~ .container .sidebar label[for="tab5"],
#tab6:checked ~ .container .sidebar label[for="tab6"] {
  background: #c0c0c0;
  border-left-color:#1976d2;
}
.content { background-color:#fff; color:#111; }
.menu-icon span { background:#111; }
.overlay { background-color: rgba(0,0,0,0.1); }

/* ダークモード自動切替 */
@media (prefers-color-scheme: dark) {
  body { background-color:#222; color:#fff; }
  .sidebar { background:#333; color:#fff; }
  .sidebar label { background: rgba(0,0,0,0.25); color:#fff; }
  #tab1:checked ~ .container .sidebar label[for="tab1"],
  #tab2:checked ~ .container .sidebar label[for="tab2"],
  #tab3:checked ~ .container .sidebar label[for="tab3"],
  #tab4:checked ~ .container .sidebar label[for="tab4"],
  #tab5:checked ~ .container .sidebar label[for="tab5"],
  #tab6:checked ~ .container .sidebar label[for="tab6"] {
    background: rgba(0,0,0,0.6);
    border-left-color: #f39c12;
  }
  a {
    color: #FFB74D; /* 落ち着いたオレンジ */
  }
  .content { background-color:#444; color:#fff; }
  .menu-icon span { background:#fff; }
  .overlay { background-color: rgba(255,255,255,0.1); }
}

/* スマホ用 */
@media (max-width:768px){
  .menu-icon { display:flex; }
  .sidebar { position:fixed; top:0; left:-250px; height:100%; transition:left 0.35s cubic-bezier(0.4,0,0.2,1); }
  .content { transition: transform 0.35s cubic-bezier(0.4,0,0.2,1); }

  #menu-toggle:checked ~ .container .sidebar { left:0; }
  #menu-toggle:checked ~ .container .content { transform:translateX(180px); }
  #menu-toggle:checked ~ .overlay { display:block; }

  /* ハンバーガーX形 */
  #menu-toggle:checked + .menu-icon span:nth-child(1){ transform:rotate(45deg) translate(5px,5px);}
  #menu-toggle:checked + .menu-icon span:nth-child(2){ opacity:0; }
  #menu-toggle:checked + .menu-icon span:nth-child(3){ transform:rotate(-45deg) translate(6px,-6px);}
}

.map-container {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%; /* 16:9 アスペクト比 */
  height: 0;
  overflow: hidden;
  border-radius: 8px;
}

.map-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
