/*
Theme Name: VENUS Child
Theme URI: https://example.com/
Description: Child theme for VENUS (tcd038). Edit safely without losing changes on updates.
Author: Akemi (with ChatGPT)
Author URI: https://example.com/
Template: venus_tcd038
Text Domain: venus-child
Version:4.1.1
*/

/* --- ここから追記CSS --- */
/* 例：
.site-title a { text-decoration: none; }
*/

/* 例：
/* 競合しがちなリセットの上書き */
canvas[style*="position:fixed"][style*="pointer-events:none"] {
  max-width: none !important;
  max-height: none !important;
}


/* 小バナー（S）1個ぶんの外枠 */
.box-links-S { margin: 0 auto; width: 100%; }

/* Sの1枚 */
.links { 
  float: left;
  margin: 0 2px;
  width: 88px;
  line-height: 0;
}
.links img { display:block; width:88px; height:31px; }

/* Lの1枚（wrapを追加したのでターゲット変更） */
.links-L-wrap { margin: 4px auto; width:100%; max-width:468px; }
.links-L { display:block; width:100%; max-width:468px; overflow:hidden; line-height:0; }
.links-L img { display:block; width:100%; height:auto; }

/* ===============================
   相互リンクバナー（エンターページ）
   おとなしく小さく・自然サイズより拡大しない
================================== */

/* 小さいバナー（S） */
.links img,
.links-S img {
  width: auto;
  height: auto;
  max-width: 88px;
  max-height: 31px;
  display: inline-block;
  opacity: 0.7;          /* 少し目立たなく */
  transition: opacity 0.2s ease;
}
.links img:hover,
.links-S img:hover {
  opacity: 0.9;          /* hover時だけ少し明るく */
}

/* 大きいバナー（L） */
.links-L img,
.links-L-wrap img {
  width: auto;
  height: auto;
  max-width: 468px;
  max-height: 60px;
  display: inline-block;
  opacity: 0.7;
  transition: opacity 0.2s ease;
}
.links-L img:hover,
.links-L-wrap img:hover {
  opacity: 0.9;
}

/* 親コンテナは中央寄せ＆少し下マージン */
.wrapper-links-L,
.wrapper-links-S {
  text-align: center;
  padding: 10px 0 20px;
  margin: 0 auto;
}


/* ===============================
   相互リンクバナー（S：横並び・自動折り返し対応）
================================== */

/* Sバナー全体の行コンテナ */
.links-S,
.box-links-S {
  display: flex;
  flex-wrap: wrap;              /* 画面幅が狭くなると自動で折り返す */
  justify-content: center;      /* 中央揃え */
  gap: 4px 6px;                 /* 上下・左右の間隔 */
  margin: 0 auto 20px;
  padding: 0;
  max-width: 650px;             /* 全体幅の上限（必要に応じて調整） */
}

/* 各Sバナー */
.links,
.links-S a,
.links-S span {
  flex: 0 0 auto;               /* 1つずつ自然幅で */
  display: inline-block;
  text-align: center;
}

/* 画像サイズは実寸を上限に・透明度調整 */
.links img,
.links-S img {
  width: auto;
  height: auto;
  max-width: 88px;
  max-height: 31px;
  display: inline-block;
  opacity: 0.7;
  transition: opacity 0.2s ease;
}

/* hover時だけほんのり明るく */
.links img:hover,
.links-S img:hover {
  opacity: 0.9;
}

/* さらに地味に */

.links-S {
  filter: grayscale(20%); /* 少し彩度を落とす */
}
.links-S img:hover {
  filter: none;           /* hover時のみフルカラー */
}

/* もう少し「控えめ感」を出したい場合 */

.links-S {
  gap: 2px 4px;       /* バナー間のすき間をさらに小さく */
  opacity: 0.8;       /* 全体的にほんの少し淡く */
}

.wrapper-links-S { text-align:center; padding:10px 0; }


/* スマホ時：中央寄せ＆余白少なめ */
@media screen and (max-width: 767px) {
  .links-S {
    gap: 3px 4px;
    max-width: 95%;
  }
}