@charset "UTF-8";

/* =========================================
   基本リセットと共通設定
========================================= */
*, *::before, *::after {
  box-sizing: border-box;
}

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

body {
  font-family: "ＭＳ ゴシック", "MS Gothic", sans-serif;
  margin: 0;
  padding: 0;
  line-height: 1.6;
  color: #333;
  overflow-x: hidden;
  width: 100%;
}

a { text-decoration: none; color: #0066cc; }
/* ★リンクにマウスを重ねた時に下線を出す設定を維持 */
a:hover { text-decoration: underline; }
ul { list-style-type: none; padding: 0; margin: 0; }
li { margin-bottom: 8px; }

img {
  max-width: 100%;
  height: auto;
}

/* =========================================
   PC・スマホ 表示切り替え
========================================= */
.ad_pc, .header-ad { 
  display: none !important; 
  width: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
  visibility: hidden !important;
} 
.ad_sp { display: block !important; }

@media (min-width: 768px) {
  .ad_pc, .header-ad { 
    display: block !important; 
    width: auto !important;
    height: auto !important;
    overflow: visible !important;
    visibility: visible !important;
  }
  .ad_sp { display: none !important; }
}

/* =========================================
   ヘッダーとフッター
========================================= */
.header-inner {
  background-color: #EDFFBE;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 10px 20px;
  width: 100%; /* スマホは100% */
  margin: 0 auto;
}
@media (min-width: 768px) {
  .header-inner {
    flex-direction: row;
    justify-content: space-between;
    width: 70%; /* ★PC画面は70%に縮小 */
  }
}

.footer {
  text-align: center;
  padding: 20px;
  font-size: 0.9em;
  background-color: #f5f5f5;
  margin-top: 40px;
}

/* =========================================
   レイアウト（基本はスマホ向け）
========================================= */
.wrapper {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 20px 10px;
  width: 100%; /* スマホは100% */
  margin: 0 auto;
}

/* =========================================
   カテゴリー等の左サイドバー（スマホ向け設定）
   ※スマホ画面は以前のまま（横スライド）残しています
========================================= */
.sidebar-left { width: 100%; }

#list_ct_menu {
  background-color: #eee;
  padding: 10px;
  font-weight: bold;
  margin-bottom: 10px;
  border-radius: 4px;
}

#list_ct { width: 100%; }

/* スマホ用の横スクロール */
#list_ct ul {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  white-space: nowrap;
  gap: 10px;
  padding: 0 0 15px 0;
  -webkit-overflow-scrolling: touch;
}
#list_ct ul::-webkit-scrollbar { display: none; }
#list_ct li {
  background-color: #f9f9f9;
  padding: 10px 15px;
  border: 1px solid #ddd;
  border-radius: 20px;
  margin-bottom: 0;
  font-size: 0.9em;
  white-space: nowrap;
}
#list_ct li a { display: block; }

/* =========================================
   PC向けレイアウト（画面幅768px以上）
========================================= */
@media (min-width: 768px) {
  .wrapper {
    display: grid;
    grid-template-columns: 220px 1fr 300px; 
    align-items: start;
    padding: 20px 0;
    width: 70%; /* ★PC画面は70%に縮小 */
  }

  /* ★PC画面のカテゴリー表示をスクリーンショットを参考に枠線付きにする */
  #list_ct ul {
    display: block; /* フレックス（横並び）を解除 */
    overflow-x: visible;
    white-space: normal;
    padding: 0;
    border: 1px solid #ccc; /* ★全体の枠線を追加（灰色） */
  }
  #list_ct li {
    background-color: transparent; /* 背景色なし */
    padding: 5px 10px; /* ★内側余白追加 */
    border: none; /* 個別の枠線は解除 */
    border-bottom: 1px solid #ccc; /* ★下の枠線を追加（灰色） */
    border-radius: 0; /* 角丸なし */
    margin-bottom: 0; /* 行間なし */
    font-size: 0.9em;
    white-space: normal; /* テキストの折り返し許可 */
  }
  #list_ct li:last-child {
    border-bottom: none; /* ★最後の項目だけ下の枠線を消す */
  }
  #list_ct li a {
    display: inline; /* 通常のテキストリンクの挙動 */
  }
}

/* =========================================
   各パーツのスタイル調整
========================================= */
.main-content { padding: 0 10px; }
.main-title { color: #ff6600; font-size: 1.5rem; margin-bottom: 20px; }
.sub-title { color: #3399cc; font-size: 1.2rem; margin-bottom: 20px; line-height: 1.5; }
.content-text p { margin-bottom: 1em; font-size: 1rem; }
.img-center { text-align: center; margin: 20px 0; }
.attention-box { background-color: #fff3e0; padding: 15px; border-radius: 5px; margin-top: 30px; }
.pr-text { font-size: 0.8em; color: #999; text-align: right; margin: 0; }