@charset "UTF-8";

/*!
Theme Name: Cocoon Child
Description: Cocoon専用の子テーマ
Theme URI: https://wp-cocoon.com/
Author: わいひら
Author URI: https://nelog.jp/
Template:   cocoon-master
Version:    1.1.3
*/

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/

/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1023px以下*/
@media screen and (max-width: 1023px){
  /*必要ならばここにコードを書く*/
}

/*834px以下*/
@media screen and (max-width: 834px){
  /*必要ならばここにコードを書く*/
}

/*480px以下*/
@media screen and (max-width: 480px){
  /*必要ならばここにコードを書く*/
}

/* 各プランの段（行） */
#sponsor-section .sponsor-row {
 display: flex;
 flex-wrap: wrap;
 gap: 16px 20px;
 justify-content: center;
 margin: 12px 0 28px;
}

/* ロゴリンク共通 */
#sponsor-section .sponsor-logo {
 display: inline-block;
 line-height: 0;
 transition: filter .2s ease, transform .2s ease;
}

/* ホバー時のドロップシャドウ（やや控えめ） */
#sponsor-section .sponsor-logo:hover {
 filter: drop-shadow(0 6px 16px rgba(0,0,0,0.2));
 transform: translateY(-1px);
}

/* 画像要素の基本 */
#sponsor-section .sponsor-logo img {
 height: auto;
 display: block;
}

/* プラン別サイズ（縦横比は統一前提、幅のみ調整） */
#sponsor-section .plan-gold .sponsor-logo img {
 width: clamp(160px, 14vw, 240px);
}

#sponsor-section .plan-silver .sponsor-logo img {
 width: clamp(140px, 12vw, 200px);
}

#sponsor-section .plan-bronze .sponsor-logo img {
 width: clamp(120px, 10vw, 170px);
}

/* リンクなし要素（将来の装飾余地、今は見た目同等） */
#sponsor-section .sponsor-logo.no-link {
 cursor: default;
}

/* ポスター */
#about-section .poster-wrapper {
  display: flex;
  align-items: center;
  flex-direction:column;
  margin-bottom: 30px;
}
#about-section .poster-wrapper img {
  width: 80%;
  max-width: 600px;
  transition: filter .2s ease, transform .2s ease;
  cursor: zoom-in;
}
#about-section .poster-wrapper img:hover {
  filter: drop-shadow(0 6px 16px rgba(0,0,0,0.2));
  transform: translateY(-1px);
}

/* 背面スクロールロック */
body.no-scroll {
  overflow: hidden;
}

/* モーダル本体（フェード用にopacity/visibilityで制御） */
.image-modal {
  position: fixed;
  z-index: 2147483647;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  padding: min(4vh, 40px) min(4vw, 40px);
  background: rgba(0,0,0,0.72);
  transition: opacity .25s ease, visibility .25s ease;
}

/* 拡大画像（開くときに軽くズームイン） */
.image-modal img.modal-content {
  max-width: 90vw; 
  max-height: 90vh;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 8px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
  display: block;
}

/* 閉じるボタン */
.image-modal__close {
  position: absolute;
  top: 16px;
  right: 20px;
  font-size: 28px;
  line-height: 1;
  width: 44px;
  height: 44px;
  border-radius: 9999px;
  background: rgba(0,0,0,0.55);
  color: #fff;
  border: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform .15s ease, background .15s ease;
}
.image-modal__close:hover {
  transform: scale(1.05);
  background: rgba(0,0,0,0.7);
}

/* 低速回線/減速設定ユーザー配慮 */
@media (prefers-reduced-motion: reduce) {
  #about-section .poster-wrapper img,
  .image-modal,
  .image-modal__content,
  .image-modal__close {
    transition: none;
  }
}