@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700;800&display=swap');

/* ==========================================================================
   東京ゲームショウ2026（TGS2026）特集 / ギガインデックス カスタムHTML
   PC・SP共通 1本。分岐は max-width:768px
   配色トークンはキービジュアル（30周年・多色ポップ）から抽出
   ========================================================================== */

/* --- 1. トークン --------------------------------------------------------- */
#gigaContents {
 --tgs-cyan: #0077b3;
 --tgs-cyan-lt: #00b5f6;
 --tgs-magenta: #d6006a;
 --tgs-magenta-lt: #fe187b;
 --tgs-green: #2f7a00;
 --tgs-green-lt: #8dc21f;
 --tgs-purple: #5b4bc4;
 --tgs-orange: #d24500;
 --tgs-orange-lt: #fc693b;
 --tgs-yellow: #ffd400;
 --tgs-ink: #1c201f;
 --tgs-sub: #555555;
 --tgs-accent: var(--tgs-cyan);
 --tgs-tint: #eaf6fc;
 /* 記事サムネイルの縦横比。PC は 16:9、SP は 4:3。
    対象は .inner を持つカード（注目ブース / 配信番組 / ブロマイド）。
    インディーは提供素材の比率をそのまま使うので、このトークンは効かせない */
 --tgs-thumb-ratio: 16 / 9;
}
@media (max-width: 768px) {
 #gigaContents {
  --tgs-thumb-ratio: 4 / 3;
 }
}

/* --- 2. テンプレート側のレイアウト調整 ----------------------------------- */
.thm-page-special .gigaindex .head {
 border-bottom: none;
 display: none;
}
.thm-page-special .gigaindex .detail {
 width: 100%;
 margin-bottom: 3em;
}
.gigaindex .detail img {
 max-width: 100%;
 height: auto;
 background: none;
 opacity: inherit;
}

@media (min-width: 769px) {
 .thm-body {
  padding: 0;
  width: 1040px;
 }
 .jackad,
 .breadcrumb,
 .thm-body .main-ad,
 .thm-header .main-ad {
  display: none;
 }
 .thm-main {
  margin-left: 10px;
 }
 .thm-aside {
  margin-right: 10px;
 }
}

@media (max-width: 768px) {
 .jackad,
 .header-ad,
 .breadcrumb {
  display: none;
 }
 .gigaindex .detail {
  max-width: 750px;
  margin: 0 auto;
 }
 .thm-page-special .gigaindex .detail {
  margin-bottom: 1em;
 }
}

/* --- 3. 器 --------------------------------------------------------------- */
#gigaContents * {
 box-sizing: border-box;
}
#gigaContents {
 font-family: 'Noto Sans JP', "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif;
 font-size: clamp(14px, 13px + 0.25vw, 16px);
 line-height: 1.7;
 font-weight: 500;
 color: var(--tgs-ink);
 word-wrap: break-word;
 overflow-wrap: break-word;
 -webkit-text-size-adjust: 100%;
 background-color: #ffffff;
 background-image: radial-gradient(rgba(0, 181, 246, .10) 1.4px, transparent 1.5px);
 background-size: 12px 12px;
 padding-bottom: clamp(24px, 4vw, 56px);
}
#gigaContents img {
 max-width: 100%;
 height: auto;
}

/* フェードイン */
.fadein {
 opacity: 0;
 transform: translate(0, 32px);
 transition: opacity .8s ease, transform .8s ease;
}
.fadein.active {
 opacity: 1;
 transform: translate(0, 0);
}
@media (prefers-reduced-motion: reduce) {
 .fadein {
  opacity: 1;
  transform: none;
  transition: none;
 }
}

/* --- 4. ヒーロー --------------------------------------------------------- */
#gigaContents .giga-header {
 width: 100%;
 margin: 0;
 line-height: 0;
}
#gigaContents .giga-header img {
 display: block;
 width: 100%;
 aspect-ratio: 16 / 9;
 object-fit: cover;
}
@media (max-width: 768px) {
 #gigaContents .giga-header img {
  aspect-ratio: 1 / 1;
 }
}

#gigaContents .tgs-lead {
 background: linear-gradient(90deg, var(--tgs-cyan-lt), var(--tgs-green-lt) 28%, var(--tgs-yellow) 52%, var(--tgs-orange-lt) 74%, var(--tgs-magenta-lt));
 padding: clamp(4px, .6vw, 6px);
}
#gigaContents .tgs-lead-inner {
 background: #ffffff;
 padding: clamp(16px, 2.4vw, 28px) clamp(14px, 3vw, 40px);
 text-align: center;
}
/* PC は版面が 1040px 固定なので font-size も固定。
   SP は文字送りの実測 9.50px / font-size 1px から 6.1vw - 2.3px（上限43px）としている。
   折り返し防止の nowrap は付けない（端末のフォント差で溢れるより折り返す方が安全） */
#gigaContents .tgs-lead-ttl {
 margin: 0;
 font-weight: 800;
 font-size: 3.4rem;
 line-height: 1.35;
 letter-spacing: .02em;
}
@media (max-width: 768px) {
 #gigaContents .tgs-lead-ttl {
  font-size: clamp(15px, calc(6.1vw - 2.3px), 43px);
 }
}
#gigaContents .tgs-info {
 margin: clamp(10px, 1.6vw, 18px) 0 0;
 display: flex;
 flex-wrap: wrap;
 justify-content: center;
 gap: 6px clamp(10px, 2vw, 28px);
 font-size: clamp(.8rem, .72rem + .3vw, .95rem);
}
#gigaContents .tgs-info-row {
 display: flex;
 align-items: baseline;
 gap: 8px;
}
@media (max-width: 768px) {
 #gigaContents .tgs-info-row {
  width: 94%;
 }
}
#gigaContents .tgs-info dt {
 flex: none;
 background: var(--tgs-ink);
 color: #ffffff;
 font-weight: 700;
 border-radius: 2px;
 padding: 1px 8px;
 font-size: .85em;
 letter-spacing: .04em;
}
#gigaContents .tgs-info dd {
 margin: 0;
 font-weight: 700;
 font-feature-settings: "palt" 1;
 letter-spacing: 1px;
}

/* --- 5. 目次 ------------------------------------------------------------- */
#gigaContents .tgs-nav {
 width: min(94%, 1000px);
 margin: clamp(18px, 3vw, 34px) auto 0;
}
#gigaContents .tgs-nav-list {
 list-style: none;
 margin: 0;
 padding: 0;
 display: grid;
 grid-template-columns: repeat(5, 1fr);
 gap: clamp(6px, 1vw, 12px);
}
@media (max-width: 768px) {
 #gigaContents .tgs-nav-list {
  grid-template-columns: repeat(2, 1fr);
 }
 /* 5番目だけ余るので、1列分の幅を保ったまま行の中央に置く */
 #gigaContents .tgs-nav-item--latest {
  grid-column: 1 / -1;
  justify-self: center;
  width: -webkit-calc((100% - clamp(6px, 1vw, 12px)) / 2);
  width: calc((100% - clamp(6px, 1vw, 12px)) / 2);
 }
}
#gigaContents .tgs-nav-link {
 display: flex;
 align-items: center;
 justify-content: center;
 text-align: center;
 min-height: 48px;
 height: 100%;
 padding: 8px 10px 18px;
 background: #ffffff;
 border: 4px solid var(--tgs-nav-c, var(--tgs-cyan));
 color: var(--tgs-ink);
 font-weight: 700;
 font-size: clamp(.75rem, .68rem + .3vw, .9rem);
 line-height: 1.35;
 text-decoration: none;
 position: relative;
 transition: background-color .2s ease, color .2s ease;
}
#gigaContents .tgs-nav-link::after {
 content: "";
 position: absolute;
 left: 50%;
 bottom: 6px;
 width: 8px;
 height: 8px;
 border-right: 3px solid var(--tgs-nav-c, var(--tgs-cyan));
 border-bottom: 3px solid var(--tgs-nav-c, var(--tgs-cyan));
 transform: translateX(-50%) rotate(45deg);
 transition: border-color .2s ease;
}
@media (max-width: 768px) {
 #gigaContents .tgs-nav-link {
  border-width: 3px;
 }
}
#gigaContents .tgs-nav-link:hover,
#gigaContents .tgs-nav-link:focus-visible {
 background: var(--tgs-nav-c, var(--tgs-cyan));
 color: #ffffff;
}
#gigaContents .tgs-nav-link:hover::after,
#gigaContents .tgs-nav-link:focus-visible::after {
 border-right-color: #ffffff;
 border-bottom-color: #ffffff;
}
#gigaContents .tgs-nav-item--booth .tgs-nav-link {
 --tgs-nav-c: var(--tgs-cyan);
}
#gigaContents .tgs-nav-item--stream .tgs-nav-link {
 --tgs-nav-c: var(--tgs-magenta);
}
#gigaContents .tgs-nav-item--indie .tgs-nav-link {
 --tgs-nav-c: var(--tgs-green);
}
#gigaContents .tgs-nav-item--bromide .tgs-nav-link {
 --tgs-nav-c: var(--tgs-purple);
}
#gigaContents .tgs-nav-item--latest .tgs-nav-link {
 --tgs-nav-c: var(--tgs-orange);
}

/* --- 6. セクション共通 --------------------------------------------------- */
/* 2025年版と同じ「紙のフォルダ」表現。
   .box に drop-shadow をかけ、.folder-header の ::before で上辺に台形のタブを立てる。
   セクションの地色は各セクションカラーを白に寄せた淡色（--tgs-tint）にし、
   カードは白ベタで浮かせる（カードの border は使わない） */
#gigaContents .box {
 width: min(94%, 1000px);
 margin: clamp(26px, 4vw, 52px) auto 0;
 -webkit-filter: drop-shadow(0 2px 3px rgba(28, 32, 31, .20));
 filter: drop-shadow(0 2px 3px rgba(28, 32, 31, .20));
}
#gigaContents .folder-header {
 position: relative;
 margin-top: 18px;
 background: var(--tgs-tint);
 padding: clamp(14px, 2vw, 22px) clamp(14px, 2.4vw, 32px) clamp(10px, 1.4vw, 16px);
}
@media (min-width: 769px) {
 #gigaContents .folder-header {
  text-align: center;
 }
}
#gigaContents .folder-header::before {
 content: "";
 position: absolute;
 top: -36px;
 left: 0;
 width: -webkit-calc(100% - 36px);
 width: calc(100% - 36px);
 height: 0;
 border: solid 18px transparent;
 border-bottom-color: var(--tgs-accent);
}
#gigaContents .ttl-logo {
 margin: 0;
 font-weight: 800;
 font-size: 2.4rem;
 line-height: 1.4;
 letter-spacing: .01em;
 color: var(--tgs-accent);
 text-align: center;
}
#gigaContents .tgs-sub {
 margin: .5em 0 0;
 font-size: 1.2em;
 font-weight: 500;
 line-height: 1.6;
}
@media (max-width: 768px) {
 #gigaContents .ttl-logo {
  font-size: clamp(1.2rem, .95rem + 1.6vw, 1.9rem);
 }
 #gigaContents .tgs-sub {
  font-size: 1em;
 }
 /* SPは左右の余白をなくして全幅。上の余白は 30px */
 #gigaContents .box {
  width: 100%;
  margin-top: 30px;
 }
 /* タブの高さを半分（18px -> 9px）。逃げの margin-top も半分にして上端を詰める */
 #gigaContents .folder-header {
  margin-top: 9px;
 }
 #gigaContents .folder-header::before {
  top: -18px;
  border-width: 9px;
  width: -webkit-calc(100% - 18px);
  width: calc(100% - 18px);
 }
}
#gigaContents .folder {
 background: var(--tgs-tint);
 padding: clamp(10px, 1.4vw, 16px) clamp(14px, 2.4vw, 32px) clamp(14px, 2.4vw, 32px);
}
#gigaContents .contentBox {
 list-style: none;
 margin: 0;
 padding: 0;
}

/* セクション別アクセント（--tgs-tint は地色。白に近い淡色でカードの白を沈ませない） */
#gigaContents .tgs-sec--booth {
 --tgs-accent: var(--tgs-cyan);
 --tgs-tint: #eaf6fc;
}
#gigaContents .tgs-sec--stream {
 --tgs-accent: var(--tgs-magenta);
 --tgs-tint: #fdeef5;
}
#gigaContents .tgs-sec--indie {
 --tgs-accent: var(--tgs-green);
 --tgs-tint: #f0f7e8;
}
#gigaContents .tgs-sec--bromide {
 --tgs-accent: var(--tgs-purple);
 --tgs-tint: #f1effc;
}

/* --- 7. カード共通 ------------------------------------------------------- */
/* カードは白ベタ。地色（--tgs-tint）との明度差で輪郭を出すので border は持たせない */
#gigaContents .link-box {
 display: block;
 width: 100%;
 position: relative;
 padding: clamp(12px, 1.6vw, 20px);
 background: #ffffff;
 text-decoration: none;
 color: var(--tgs-ink);
 outline: none;
 transition: box-shadow .2s ease, transform .2s ease;
}
#gigaContents a.link-box:hover,
#gigaContents a.link-box:focus-visible {
 box-shadow: 0 4px 14px rgba(28, 32, 31, .16);
 transform: translateY(-2px);
}
#gigaContents .item-booth + .item-booth,
#gigaContents .item-stream + .item-stream {
 margin-top: clamp(12px, 1.8vw, 20px);
}
#gigaContents .link-box .inner {
 display: flex;
 align-items: flex-start;
 gap: clamp(12px, 2vw, 24px);
}
#gigaContents .link-box .inner .ImgArea {
 flex: none;
 width: 42%;
 display: block;
 aspect-ratio: var(--tgs-thumb-ratio);
 object-fit: cover;
 background: #f2f4f5;
}
#gigaContents .link-box .dataArea {
 flex: 1 1 auto;
 min-width: 0;
}
#gigaContents .PostTitle {
 margin: 0;
 font-weight: 700;
 font-size: clamp(.95rem, .82rem + .55vw, 1.25rem);
 line-height: 1.45;
}
#gigaContents .summary {
 margin: .6em 0 0;
 font-size: clamp(.78rem, .73rem + .2vw, .88rem);
 line-height: 1.65;
 color: var(--tgs-sub);
 font-weight: 400;
 /* テンプレート側（a.css）が .gigaindex .detail .summary に字送りを当てた場合の打ち消し */
 letter-spacing: normal;
}
/* ジャンル：タイトル名とブース番号の間に置くバッジ。
   地色はセクションカラー、文字は白（#2f7a00 × 白 = 5.38:1）。
   同じ位置に並ぶ .tgs-hall は「枠線＋色文字」なので、ベタ塗りと対で見分けがつく */
#gigaContents .tgs-genre {
 display: inline-block;
 margin: .6em 0 0;
 font-feature-settings: "palt" 1;
 background: var(--tgs-accent);
 color: #ffffff;
 font-weight: 700;
 font-size: clamp(.72rem, .68rem + .18vw, .82rem);
 line-height: 1.4;
 letter-spacing: .02em;
 border-radius: 3px;
 padding: 1px 10px;
}
#gigaContents .tgs-hall {
 margin: .6em 0 0;
 display: inline-block;
 font-weight: 700;
 font-size: clamp(.72rem, .68rem + .18vw, .82rem);
 line-height: 1.4;
 color: var(--tgs-accent);
 border: 1px solid var(--tgs-accent);
 border-radius: 3px;
 padding: 1px 10px;
 letter-spacing: .02em;
}

@media (min-width: 769px) {
 /* 画像が左に入るレイアウトで dataArea が画像より低い場合、
    余った高さを吸収して .tgs-btn を画像の下端に揃える。
    ImgArea は stretch で伸びないよう flex-start に固定し、16:9 を保つ。
    最小の間隔は .summary の margin-bottom で確保する */
 #gigaContents .link-box .inner {
  align-items: stretch;
 }
 #gigaContents .link-box .inner .ImgArea {
  align-self: flex-start;
 }
 #gigaContents .link-box .dataArea {
  display: flex;
  flex-direction: column;
 }
 #gigaContents .link-box .dataArea .summary {
  margin-bottom: .9em;
 }
 /* 縦並びの flex の中で幅が伸びてしまう要素だけ、内容幅に戻す */
 #gigaContents .link-box .dataArea .tgs-hall,
 #gigaContents .link-box .dataArea .tgs-btn {
  align-self: flex-start;
 }
 #gigaContents .link-box .dataArea .tgs-btn {
  margin-top: auto;
 }
}

/* SP も「左に画像・右にテキスト」の横並び。
   .inner は 7節の基底 flex（align-items: flex-start）をそのまま使うので display は再指定しない。
   縦を詰めるため、画像を 38%・各テキストの上余白を .6em -> .4em・リード文を2行で省略する */
@media (max-width: 768px) {
 #gigaContents .link-box .inner .ImgArea {
  width: 38%;
 }
 #gigaContents .tgs-hall,
 #gigaContents .tgs-date {
  margin-top: .4em;
 }
 #gigaContents .dataArea .summary {
  margin-top: .4em;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
 }
}

/* --- 8. Coming Soon ------------------------------------------------------ */
#gigaContents .link-box.soon {
 display: flex;
 align-items: center;
 justify-content: center;
 min-height: clamp(90px, 12vw, 150px);
 background: repeating-linear-gradient(-45deg, #ffffff, #ffffff 10px, #f1f4f6 10px, #f1f4f6 20px);
 text-align: center;
}
#gigaContents .contentBox + .link-box.soon {
 margin-top: clamp(12px, 1.8vw, 20px);
}
#gigaContents .link-box.soon h3 {
 margin: 0;
 font-family: Arial, Helvetica, sans-serif;
 font-weight: 700;
 font-style: italic;
 font-size: clamp(1.4rem, 1.4rem + 1.8vw, 2.4rem);
 color: #8a9298;
 letter-spacing: .04em;
}
/* SP はカードが「左に画像・右にテキスト」で低くなった（390px で約200px）ため、
   Coming Soon だけが突出しないよう高さと文字サイズを詰める */
@media (max-width: 768px) {
 #gigaContents .link-box.soon {
  min-height: clamp(84px, 24vw, 120px);
 }
 #gigaContents .link-box.soon h3 {
  font-size: clamp(1.15rem, 1rem + .9vw, 1.5rem);
 }
}
#gigaContents .link-box.soon .tgs-soon-note {
 display: block;
 margin-top: .4em;
 font-family: 'Noto Sans JP', sans-serif;
 font-style: normal;
 font-weight: 500;
 font-size: clamp(.78rem, .73rem + .2vw, .88rem); /* .summary と同値 */
 letter-spacing: 0;
 color: #8a9298;
}

/* --- 9. おすすめ配信番組 ------------------------------------------------- */
#gigaContents .tgs-date {
 margin: .6em 0 0;
 display: flex;
 align-items: center;
 gap: .2em;
 font-weight: 700;
 font-size: clamp(.8rem, .74rem + .25vw, .92rem);
 line-height: 1.4;
 font-feature-settings: "palt" 1;
 letter-spacing: 1px;
}
#gigaContents .tgs-date::before {
 content: "";
 width: 1.725em;
 height: 1.725em;
 flex: none;
 background: var(--tgs-accent);
 -webkit-mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' fill-rule='evenodd' d='M3 5h18v16H3V5zm2 6h14v8H5v-8z'/%3E%3Cpath fill='black' d='M7 2h2v4H7V2zm8 0h2v4h-2V2z'/%3E%3Cpath fill='black' d='M7 12.5h3v2H7zm3.5 0h3v2h-3zm3.5 0h3v2h-3zM7 16h3v2H7zm3.5 0h3v2h-3z'/%3E%3C/svg%3E") center / contain no-repeat;
 mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' fill-rule='evenodd' d='M3 5h18v16H3V5zm2 6h14v8H5v-8z'/%3E%3Cpath fill='black' d='M7 2h2v4H7V2zm8 0h2v4h-2V2z'/%3E%3Cpath fill='black' d='M7 12.5h3v2H7zm3.5 0h3v2h-3zm3.5 0h3v2h-3zM7 16h3v2H7zm3.5 0h3v2h-3z'/%3E%3C/svg%3E") center / contain no-repeat;
}
/* 全カードのCTA。カード全体がリンクなので span で置く（a の入れ子は不可）。
   背景は各セクションカラー（--tgs-accent） */
#gigaContents .tgs-btn {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 margin: .9em 0 .2em;
 min-height: 44px;
 /* 240px 未満のカード幅でも溢れないよう min() で上限を切る */
 min-width: min(240px, 100%);
 padding: 6px clamp(16px, 2vw, 26px);
 background: var(--tgs-accent);
 border-radius: 999px;
 color: #ffffff;
 font-weight: 700;
 font-size: clamp(.78rem, .73rem + .2vw, .88rem);
 line-height: 1.3;
 text-decoration: none;
 transition: opacity .2s ease;
}
#gigaContents a.link-box:hover .tgs-btn,
#gigaContents a.link-box:focus-visible .tgs-btn {
 opacity: .8;
}
/* SP の横並びカード（.dataArea を持つもの）だけ、右カラムに収まる小型ボタンにする。
   基底の inline-flex のまま内容幅まで縮め、min-height 44px -> 32px。中央寄せはしない。
   インディーは SP でも縦積みなので対象外＝PCと同じ大きさ・中央寄せのまま */
@media (max-width: 768px) {
 #gigaContents .dataArea .tgs-btn {
  min-width: 0;
  min-height: 32px;
  margin: .6em 0 0;
  padding: 4px clamp(12px, 3vw, 18px);
 }
}

/* --- 10. インディーゲーム ピックアップ ---------------------------------- */
/* 他セクションと違い .inner / .dataArea を持たず、a.link-box の直下に
   img + h3 + span + p + p + span が並ぶ。PC・SP とも縦積み（画像の下にテキスト）。
   サムネは各社の提供素材で比率がまちまちなので、--tgs-thumb-ratio は効かせず
   元画像の縦横比のまま表示する（object-fit による切り抜きをしない） */
#gigaContents .tgs-indie-list {
 display: grid;
 grid-template-columns: repeat(3, 1fr);
 gap: clamp(12px, 1.8vw, 22px);
}
#gigaContents .item-indie .link-box {
 height: 100%;
 display: flex;
 flex-direction: column;
}
#gigaContents .item-indie .ImgArea {
 width: 100%;
 display: block;
 background: #f2f4f5;
}
/* SP は 7節の .PostTitle と同じ大きさにする（ここでは font-size を持たない）。
   PC は3カラムで1枚あたりの幅が狭いため、下の min-width:769px で一段小さくしている */
#gigaContents .item-indie .PostTitle {
 margin: .7em 0 0;
}
/* 縦並びの flex の中で幅が伸びてしまうバッジだけ、内容幅に戻す（7節の .dataArea と同じ扱い） */
#gigaContents .item-indie .tgs-genre,
#gigaContents .item-indie .tgs-hall {
 align-self: flex-start;
}
/* CTA はカード下端に寄せて中央に置く（カード高さが揃うため）。
   本文との最小の間隔は最終段落の margin-bottom で確保し、余りを margin-top: auto が吸収する。
   PC・SP とも縦積みなのでメディアクエリで分けない（SPで本文に接触するのを防ぐ） */
#gigaContents .item-indie .summary:last-of-type {
 margin-bottom: 1.1em;
}
#gigaContents .item-indie .tgs-btn {
 display: flex;
 width: -webkit-fit-content;
 width: fit-content;
 margin-top: auto;
 margin-left: auto;
 margin-right: auto;
}
/* Steamアイコン。素材/iconmonstr-steam.svg の d属性をそのまま使用。
   9節の .tgs-date::before と同じCSSマスク方式なので画像ファイルは増えない。
   色は currentColor＝ボタンの文字色（#ffffff）なので白で出る */
#gigaContents .item-indie .tgs-btn::before {
 content: "";
 width: 1.35em;
 height: 1.35em;
 flex: none;
 margin-right: .45em;
 background: currentColor;
 -webkit-mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M24 12c0 6.627-5.373 12-12 12-5.782 0-10.608-4.091-11.744-9.537l4.764 2.003c.285 1.441 1.56 2.547 3.115 2.534 1.723-.017 3.105-1.414 3.116-3.129l.007-.003 3.602-2.684c2.304.024 4.14-1.833 4.14-4.091 0-2.26-1.834-4.093-4.093-4.093-2.234 0-4.048 1.791-4.09 4.015l-2.64 3.693c-.668-.014-1.269.169-1.791.51l-6.294-2.646c.708-5.953 5.765-10.572 11.908-10.572 6.627 0 12 5.373 12 12zm-16.577 5.477l-1.544-.649c.38.858 1.236 1.461 2.249 1.457 1.346-.012 2.422-1.11 2.41-2.455-.012-1.329-1.104-2.41-2.432-2.41-.287.001-.57.05-.86.16l1.542.648c.898.378 1.319 1.411.941 2.308-.376.896-1.409 1.318-2.306.941zm7.484-5.602c-1.533 0-2.781-1.249-2.781-2.782 0-1.534 1.248-2.782 2.781-2.782 1.534 0 2.781 1.248 2.781 2.782 0 1.533-1.247 2.782-2.781 2.782zm0-.682c1.159 0 2.1-.942 2.1-2.101 0-1.158-.94-2.102-2.1-2.102s-2.102.943-2.102 2.102c.001 1.159.943 2.101 2.102 2.101z'/%3E%3C/svg%3E") center / contain no-repeat;
 mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M24 12c0 6.627-5.373 12-12 12-5.782 0-10.608-4.091-11.744-9.537l4.764 2.003c.285 1.441 1.56 2.547 3.115 2.534 1.723-.017 3.105-1.414 3.116-3.129l.007-.003 3.602-2.684c2.304.024 4.14-1.833 4.14-4.091 0-2.26-1.834-4.093-4.093-4.093-2.234 0-4.048 1.791-4.09 4.015l-2.64 3.693c-.668-.014-1.269.169-1.791.51l-6.294-2.646c.708-5.953 5.765-10.572 11.908-10.572 6.627 0 12 5.373 12 12zm-16.577 5.477l-1.544-.649c.38.858 1.236 1.461 2.249 1.457 1.346-.012 2.422-1.11 2.41-2.455-.012-1.329-1.104-2.41-2.432-2.41-.287.001-.57.05-.86.16l1.542.648c.898.378 1.319 1.411.941 2.308-.376.896-1.409 1.318-2.306.941zm7.484-5.602c-1.533 0-2.781-1.249-2.781-2.782 0-1.534 1.248-2.782 2.781-2.782 1.534 0 2.781 1.248 2.781 2.782 0 1.533-1.247 2.782-2.781 2.782zm0-.682c1.159 0 2.1-.942 2.1-2.101 0-1.158-.94-2.102-2.1-2.102s-2.102.943-2.102 2.102c.001 1.159.943 2.101 2.102 2.101z'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* PC は3カラムで1枚あたりの幅が狭いので、見出しだけ一段小さくする */
@media (min-width: 769px) {
 #gigaContents .item-indie .PostTitle {
  font-size: clamp(.88rem, .8rem + .3vw, 1rem);
 }
}

/* SP は1カラム。カード内の並びは PC と同じ縦積みなので、列数だけ変える */
@media (max-width: 768px) {
 #gigaContents .tgs-indie-list {
  grid-template-columns: 1fr;
 }
}

/* --- 11. 注釈 ----------------------------------------------------------- */
#gigaContents .tgs-note {
 margin: 1em 0 0;
 font-size: clamp(.7rem, .68rem + .15vw, .78rem);
 line-height: 1.6;
 color: var(--tgs-sub);
 font-weight: 400;
}