/* 基本設定とモバイルファーストのスタイル */

/* 全ての要素で余白の計算を簡単にします */
* {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: sans-serif;
    text-align: center; /* 全体的に中央揃えを基本にします */
    color: #333;
}

header {
    padding: 1rem;
    background-color: #f4f4f4;
}

/* h1タグの指定 */
h1 {
    background-color: red;      /* 枠内を赤くする */
    color: white;               /* 文字を白くする */
    border: 3px solid red;      /* 赤い枠で囲む */
    padding: 1rem;              /* 内側の余白 */
    margin: 1rem auto;          /* 外側の余白 (上下に1rem、左右は自動で中央配置) */
    max-width: 90%;             /* 画面幅が狭い時に端につかないようにする */
    border-radius: 8px;         /* 角を少し丸める */
}

h2 {
    font-size: 1.1rem;
    font-weight: normal;
    color: #666;
    margin-bottom: 2rem;
}

/* フォームのスタイル */
form {
    display: flex;
    flex-direction: column; /* スマホでは縦に並べる */
    align-items: center;    /* 中央に配置 */
    gap: 0.5rem;            /* 要素間の隙間 */
}

#search {
    padding: 0.8rem;
    width: 80%;
    max-width: 300px;
    border: 1px solid #ccc;
    border-radius: 5px;
}

.btn {
    padding: 0.8rem 1.5rem;
    border: none;
    background-color: #337ab7;
    color: white;
    font-size: 1rem;
    cursor: pointer;
    border-radius: 5px;
}

.btn:hover {
    background-color: #286090;
}

/* パソコン用のスタイル (画面幅が768px以上の場合に適用) */
@media (min-width: 768px) {
    h1 {
        max-width: 700px; /* パソコンではh1の最大幅を固定 */
    }

    form {
        flex-direction: row; /* パソコンでは横に並べる */
        justify-content: center; /* 中央に配置 */
    }
}

ul {
    font-size:1.3rem;
    list-style: none; /* デフォルトの黒丸を削除 */
    padding: 0;
    margin: 2rem auto;
    max-width: 600px;
    border: 1px solid #e0e0e0;
    border-radius: 12px;
    overflow: hidden; /* 角丸に合わせて中身をクリップ */
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}

.features-list.fancy {
list-style: none;
padding: 2rem;
margin: 2rem auto;
max-width: 650px;
background-color: #fff;
border-radius: 16px;
box-shadow: 0 8px 24px rgba(0,0,0,0.1);
border: 1px solid #eee;
}

/* リストの各項目のスタイル (fancyクラス用) */
.features-list.fancy li {
padding: 1.5rem 0;
border-bottom: 1px dashed #ddd;
font-size: 1.15rem;
color: #555;
display: flex;
align-items: center;
gap: 1.5rem;
}

/* 最後の項目だけ下の線を消す (fancyクラス用) */
.features-list.fancy li:last-child {
border-bottom: none;
}

/* アイコンのスタイル (fancyクラス用) */
.features-list.fancy .icon {
display: flex;
justify-content: center;
align-items: center;
width: 40px;
height: 40px;
border-radius: 50%;
background-color: #f0f8ff;
color: #007bff;
font-size: 1.2rem;
}

/* ホバーエフェクト (fancyクラス用) */
.features-list.fancy li:hover {
background-color: #f9f9f9;
}

/* 全体のコンテナ */
.popular-channels {
  width: 100%;
  max-width: 400px; /* スマートフォン表示を想定した最大幅 */
  margin: 0 auto;
  padding: 16px;
  box-sizing: border-box;
}

/* 各チャンネルのアイテム */
a.channel-item {
  display: flex;
  flex-direction: column; /* 要素を縦に並べる */
  align-items: center;   /* 中央揃えにする */
  margin-bottom: 20px;   /* 各チャンネル間の余白 */
  text-decoration: none;
  background-color: #f9f9f9; /* 背景色 */
  border-radius: 12px;       /* 角を丸くする */
  padding: 16px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 影を付けて立体感を出す */
  transition: transform 0.2s ease-in-out; /* ホバー時のアニメーション */
}

/* ホバー時に少し浮き上がるエフェクト */
a.channel-item:hover {
    transform: translateY(-5px);
}

/* チャンネル名 */
.channel-name {
  font-size: 18px;
  font-weight: bold;
  color: #333;
  text-decoration: none; /* 下線を消す */
  margin-bottom: 12px;   /* 画像との余白 */
}

/* チャンネル画像 */
.channel-image {
  width: 150px;          /* 幅を75pxに固定 */
  height: 100px;         /* 高さを50pxに固定 */
  border-radius: 8px;   /* 角を丸くするスタイルは維持 */
  object-fit: cover;    /* 画像の比率を保ちつつ、指定したサイズに合わせて表示 */
}

h2.style-1 {
  font-size: 28px; /* フォントサイズ */
  font-weight: bold;
  text-align: center;
  color: #333;
  padding-bottom: 10px; /* 下線との余白 */
  position: relative;
  background-image: linear-gradient(45deg, #FFC107, #F44336); /* グラデーションの色 */
  -webkit-background-clip: text; /* テキストで背景を切り抜く（Safari, Chrome）*/
  -webkit-text-fill-color: transparent; /* テキストの色を透明にする */
  background-clip: text;
  color: transparent;
}

h2.style-1::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 80px; /* 下線の幅 */
  height: 4px; /* 下線の高さ */
  background: linear-gradient(45deg, #FFC107, #F44336); /* 下線のグラデーション */
  border-radius: 2px;
  transform: translateX(-50%);
  transition: width 0.3s ease-in-out; /* 幅が変わるアニメーション */
}

h2.style-1:hover::after {
  width: 120px; /* ホバー時に下線の幅を広げる */
}