/* 標準可変メディア
   メモ : 可変メディアでは、HTML からメディアの高さおよび幅の属性を削除する必要がある
   http://www.alistapart.com/articles/fluid-images/ 
*/
img, object, embed, video {
    max-width: 100%;
}
/* IE 6 では最大幅がサポートされていないため、デフォルトで幅 100% に設定される */
.ie6 img {
    width:100%;
}

a.white:link { color : #ffffff; }
a.white:visited { color : #ffffff; }
a.white:active { text-decoration : underline; color : #ffffff; }
a.white:hover { text-decoration : underline; color : #ffffff; }

/*
    Dreamweaver 可変グリッドプロパティ
    ----------------------------------
    dw-num-cols-mobile:		5;
    dw-num-cols-tablet:		8;
    dw-num-cols-desktop:	10;
    dw-gutter-percentage:	25;
*/

@media (hover: hover) {
  .main .allbox .button:hover {
    background-color: #f79aa1;
    color: #000;
  }
}

@media (hover: none) {
  .main .allbox .button:active {
    background-color: #f79aa1;
    color: #000;
  }
}


/* =========================================
   1. ベース設定・テキスト・ユーティリティ
========================================= */
.ranking-wrapper, .allbox {
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
  font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "sans-serif";
}

.logo {
  text-align: center; /* ← コロン抜け修正しました */
  padding: 20px 15px; 
}
.logo p {
/*  text-align: center;*/
  font-family: YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif";
  font-weight: lighter;
  font-size: 15px;    /* ← コロン抜け修正しました */
  line-height: 130%;    
}

.hot_item {
  text-align: center;
  font-family: YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif";
  font-weight: bold;
  font-size: 25px;       
  line-height: 1em;
}

.mt-30 { margin-top: 30px; }
.clearfix { clear: both; }

/* PC/スマホ 改行切り替え */
.br-sp { display: block; }
.br-pc { display: none; }


/* =========================================
   2. アイテム・ボタンなどの共通デザイン
========================================= */
/* アイテム枠のデザイン（角丸・影付き） */
.item, .item_movie {
  text-align: center;
  border-radius: 12px;
  background: #ffffff;
  box-shadow: 0 4px 8px rgba(0,0,0,0.5);
  padding: 15px;
  box-sizing: border-box;
}

/* 画像とテキスト */
.item img {
  width: 100%;
  height: auto;
  border-radius: 8px;
  margin-bottom: 10px;
}
.item p {
  font-size: 13px;
  font-weight: bold;
  margin: 0;
  color: #333;
}
.item span {
  font-size: 12px;
  font-weight: bold;
  margin: 0;
  color: #333;
}

/* ボタン */
.main .allbox .button {
  text-decoration: none;
  color: #fff;
  background-color: #333;
  line-height: 30px;
  margin: 10px auto;
  display: block;
  text-align: center;
  padding: 5px 15px;
  border-radius: 5px; /* ← コロン抜け修正しました */
  font-size: 14px;
  box-shadow: 0 2px 10px 0 #DEDADA;
  font-weight: bold;
  width: 100%;
  box-sizing: border-box;
}
.btn-area { text-align: center; width: 100%; }
.btn-area a { width: 80%; margin: 0 auto; display: inline-block; }
.fontsizekeeper { font-size: 16px !important; }

/* 動画・Instagramの比率維持 */
.video {
  width: 100%;           /* ← コロン抜け修正しました */
  aspect-ratio: 16 / 9;
  background-color: #000; /* ← コロン抜け修正しました */
  border-radius: 8px;
  overflow: hidden;
}
.video iframe {
  width: 100%;
  height: 100%;
  display: block;
}
.instagram-wrap {
  width: 100%;
}
.instagram-media {
  max-width: 100% !important;
  min-width: 100% !important;
  margin: 0 auto !important;
}

/* バナー */
.banner-container {
  display: flex;
  justify-content: center;
  gap: 20px;
  max-width: 700px;
  margin: 0 auto;
}
.banner-item { width: 50%; }
.banner-item img {
  width: 100%;
  height: auto;
  border: 1px solid #000000;
  display: block;
}

/* =========================================
   3. スマホ用レイアウト（基本はスマホ向けに設定）
========================================= */
/* 1位、2位、その他の行すべてを「Gridで2列」にする */
.rank-1, .rank-2, .rank-row, .rank-grid-others {
  display: grid;
  grid-template-columns: 1fr 1fr; /* スマホは均等の2列 */
  gap: 10px;
  margin-bottom: 10px;
  width: 100%;
}

/* Instagram等がはみ出してスマホのレイアウトを壊すのを防ぐバリア */
.rank-1 > div, .rank-2 > div, .rank-grid-others > div {
  min-width: 0;
  overflow: hidden;
  width: 100%;
  margin: 0;
}

@media (max-width 600px) {
  .banner-container { gap: 10px; }
}


/* =========================================
   4. PC・タブレット用レイアウト（画面幅820px以上のとき）
========================================= */
@media only screen and (min-width: 820px) {
  
  /* テキスト・ボタンのサイズアップ */
  .logo { padding: 20px; }
  .logo p { font-size: 20px; line-height: 50px; }
  .hot_item { font-size: 40px; }
  .item p { font-size: 16px; }
  .item span { font-size: 16px; }
  .main .allbox .button { width: 170px; }
  .btn-area a { width: 70%; }
  
  /* 改行切り替え */
  .br-sp { display: none; }
  .br-pc { display: block; }

  /* Gridレイアウトの切り替え（余白を広くする） */
  .rank-row, .rank-grid-others {
    gap: 30px;
    margin-bottom: 30px;
  }

  /* 1位と2位の比率設定（PCでは右の動画側を少し広くする） */
  .rank-1, .rank-2 {
    grid-template-columns: 1fr 1.6fr;
  }

  /* 2位のInstagram（リール）が巨大化しないように幅を制限する */
  .rank-2 .instagram-wrap {
    max-width: 320px; /* リールの箱の最大幅を制限 */
    margin: 0;        /* 左側に寄せて配置 */
  }

  /* 3位以降（3列） */
  .rank-grid-others {
    grid-template-columns: repeat(3, 1fr);
  }
}