/*
Theme Name: AFFINGER Child - Portfolio
Theme URI: https://example.com
Description: AFFINGER子テーマ - ポートフォリオサイト用カスタマイズ
Author: Your Name
Author URI: https://example.com
Template: affinger
Version: 1.1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: affinger-child-portfolio
*/

/* ========================================
   カラースキーム
   ======================================== */
:root {
  --color-navy: #1a1a2e;
  --color-beige: #f5f0e8;
  --color-pink: #ffd6d6;
  --color-yellow: #ffd93d;
  --color-text: #333333;
  --color-text-light: #666666;
  --color-border: #d4c5b0;
}

/* ========================================
   基本スタイル
   ======================================== */
body {
  font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", Meiryo, メイリオ, sans-serif;
  color: var(--color-text);
  background-color: #ffffff;
  line-height: 1.7;
  /* ヘッダーの高さ分、コンテンツの開始位置を下げる */
  padding-top: 70px;
}

/* ========================================
   ヘッダー
   ======================================== */
.site-header {
  background-color: var(--color-navy);
  padding: 1rem 0;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  height: 70px; /* 高さを固定 */
  box-sizing: border-box;
}

.site-header .container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 2rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 100%;
}

.site-logo a {
  color: #ffffff;
  font-size: 1.5rem;
  font-weight: bold;
  text-decoration: none;
  letter-spacing: 0.05em;
}

.main-navigation {
  margin-left: auto;
}

.main-navigation ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 2rem;
}

.main-navigation a {
  color: #ffffff;
  text-decoration: none;
  font-size: 0.95rem;
  font-weight: 500;
  transition: opacity 0.3s ease;
  letter-spacing: 0.05em;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.main-navigation a:hover {
  opacity: 0.7;
}

.menu-item-image {
  width: 24px;
  height: 24px;
  object-fit: contain;
}

/* ========================================
   メインビジュアル (Swiper)
   ======================================== */
.swiper, .swiper-container, .main-visual-container {
  height: 63vh; /* PC用 */
}

.swiper-slide {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #000;
  position: relative;
}

.swiper-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.7;
  transition: opacity 0.3s ease;
}

.swiper-slide:hover img {
  opacity: 1;
}

.main-visual-text {
  position: absolute;
  bottom: 15%;
  left: 50%;
  transform: translateX(-50%);
  width: 90%;
  text-align: center;
  color: #ffffff;
  z-index: 2;
  padding: 1rem;
  background: none;
}

.main-visual-text h1 {
  font-size: 3rem;
  margin-bottom: 1rem;
  letter-spacing: 0.1em;
  text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.8);
}

.main-visual-text p {
  font-size: 1.2rem;
  letter-spacing: 0.05em;
  text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.8);
}

.swiper-pagination-bullet {
  background: #ffffff;
  opacity: 0.7;
}

.swiper-pagination-bullet-active {
  opacity: 1;
}

.swiper-button-prev,
.swiper-button-next {
  display: none;
}

/* ========================================
   トランプカードセクション（横一列固定・中央寄せ）
   ======================================== */
.trump-cards-section {
  padding: 4rem 2rem;
  background: #f8f8f8;
}

.trump-cards-container {
  max-width: 1300px;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 2rem;
  flex-wrap: nowrap;
  overflow-x: hidden;
  padding-bottom: 1rem;
}

.trump-card {
  width: 220px;
  height: 308px;
  perspective: 1000px;
  cursor: pointer;
  position: relative;
  transition: transform 0.3s ease;
  flex-shrink: 0;
}

.trump-card:hover {
  transform: scale(1.05);
}

.trump-card-inner {
  width: 100%;
  height: 100%;
  transition: transform 0.3s ease;
  transform-style: preserve-3d;
  position: relative;
  border: 2px solid #000;
  border-radius: 15px;
  background: transparent !important;
  background-color: transparent !important;
}

.trump-card-front {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 1rem;
  box-sizing: border-box;
}

.trump-card-corner {
  font-size: 1.5rem;
  font-weight: bold;
}

.trump-card-corner-bottom {
  transform: rotate(180deg);
}

.trump-card-center {
  text-align: center;
  font-size: 1.2rem;
  color: #000;
}

.trump-card-number {
  color: red;
}

.trump-card-suit {
  color: red;
}

/* ========================================
   ギャラリー/メイソンリー
   ======================================== */
.masonry-gallery {
  column-count: 4;
  column-gap: 1rem;
  margin-bottom: 2rem;
}

.masonry-item {
  break-inside: avoid;
  margin-bottom: 1rem;
  position: relative;
  overflow: hidden;
  cursor: pointer;
}

.masonry-item img {
  width: 100%;
  display: block;
  transition: transform 0.3s ease;
}

.masonry-item:hover img {
  transform: scale(1.05);
}

.masonry-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.5);
  opacity: 0;
  transition: opacity 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.masonry-item:hover .masonry-overlay {
  opacity: 1;
}

.masonry-icon {
  font-size: 2rem;
  color: #fff;
}

.gallery-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.9);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

.gallery-modal.active {
  display: flex;
}

.gallery-modal img {
  max-width: 90%;
  max-height: 90%;
}

.modal-close {
  position: absolute;
  top: 2rem;
  right: 2rem;
  color: #fff;
  font-size: 3rem;
  cursor: pointer;
}

.modal-prev, .modal-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  color: #fff;
  font-size: 3rem;
  cursor: pointer;
  padding: 1rem;
}

.modal-prev {
  left: 2rem;
}

.modal-next {
  right: 2rem;
}

.gallery-filters {
  text-align: center;
  margin-bottom: 2rem;
}

.filter-btn {
  background: #f0f0f0;
  border: none;
  padding: 0.5rem 1rem;
  margin: 0.5rem;
  cursor: pointer;
  border-radius: 20px;
  transition: background 0.3s ease;
}

.filter-btn.active {
  background: #000;
  color: #fff;
}

/* ========================================
   透かし
   ======================================== */
.watermark {
  position: fixed;
  bottom: 1rem;
  right: 1rem;
  color: rgba(0,0,0,0.3);
  font-size: 0.8rem;
  pointer-events: none;
}

/* ========================================
   フッター
   ======================================== */
.site-footer {
  background: var(--color-navy);
  color: #fff;
  padding: 2rem 0;
  text-align: center;
}

.footer-menu ul {
  list-style: none;
  padding: 0;
  display: flex;
  justify-content: center;
  gap: 1rem;
}

.footer-menu a {
  color: #fff;
  text-decoration: none;
}

.footer-contact a {
  color: #fff;
  margin: 1rem 0;
  display: inline-block;
}

/* ========================================
   アニメーション
   ======================================== */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.fade-in-up {
  opacity: 0;
  animation: fadeInUp 0.8s ease forwards;
}

/* ========================================
   レスポンシブ
   ======================================== */
/* タブレット (〜1024px) */
@media (max-width: 1024px) {
  .swiper, .swiper-container, .main-visual-container {
    height: 53vh; /* タブレット用 */
  }
  .main-visual-text h1 { font-size: 2.5rem; }
  .main-visual-text p { font-size: 1.1rem; }

  .trump-cards-container {
    gap: 1.5rem;
  }
  .trump-card {
    width: 180px;
    height: 250px;
  }
}

/* モバイル (〜768px) */
@media (max-width: 768px) {
  body {
    padding-top: 60px;
  }
  .site-header {
    height: 60px;
    padding: 0.5rem 0;
  }
  .site-header .container {
    padding: 0 1rem;
  }
  .site-logo a {
    font-size: 1.2rem;
  }
  .main-navigation {
    display: none;
  }

  .swiper, .swiper-container, .main-visual-container {
    height: 44vh; /* モバイル用 */
  }

  .main-visual-text {
    padding: 0 1rem;
  }
  .main-visual-text h1 {
    font-size: 1.8rem;
  }
  .main-visual-text p {
    font-size: 1rem;
  }

  .trump-cards-section {
    padding: 3rem 1rem;
  }
  .trump-cards-container {
    flex-direction: column;
    gap: 1.5rem;
  }
  .trump-card {
    width: 90%;
    max-width: 300px;
    height: auto;
    aspect-ratio: 5 / 7;
  }
}

/* さらに小さいモバイル (例: 480px以下) */
@media (max-width: 480px) {
  .swiper, .swiper-container, .main-visual-container {
    height: 40vh;
  }
}
/* ===== ポートフォリオサイト用カスタムCSS ===== */

/* 横スクロールバーが表示されるのを防ぐ */
body {
  overflow-x: hidden;
}

/* トップページのメインビジュアルを画面幅いっぱいに広げる */
.home .main-visual-container {
  width: 100vw;
  max-width: 100vw;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}

/* 1. 崩れたトランプカードの表示を修正 */
.home .trump-card-inner {
    background-color: #ffffff !important; /* カードの背景を白に戻します */
    border: 1px solid #ddd;
}
.home .trump-card-center .trump-card-title {
    color: #333333 !important; /* 文字の色を濃いグレーに戻します */
}
.home .trump-card-corner .trump-card-number,
.home .trump-card-corner .trump-card-suit {
    color: #d9534f !important; /* 数字とマークの色を赤に戻します */
}

/* 2. フッターのお問い合わせリンクの色を修正 */
.site-footer .footer-contact a.contact-link {
    color: #ffffff !important; /* 文字の色を白に戻します */
}

/* --- 以下、ユーザー設定のスタイル --- */

/* 透かし */
.watermark {
  position: fixed;
  bottom: 1rem;
  right: 1rem;
  color: rgba(0,0,0,0.3);
  font-size: 0.8rem;
  pointer-events: none;
}

/* コピーガード */
.copy-protected {
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}

/* メニューの枠線（下線）を削除 */
.main-navigation a,
.footer-menu a {
    border: none !important;
    text-decoration: none !important;
    box-shadow: none !important;
}
.main-navigation a:hover,
.footer-menu a:hover,
.main-navigation a:focus,
.footer-menu a:focus {
    border: none !important;
    text-decoration: none !important;
    box-shadow: none !important;
}

/* お問い合わせページやファンアートに関する注意書き */
.fan-art-notice {
  background-color: #f9f9f9;
  border: 1px solid #eee;
  border-left: 5px solid var(--color-navy);
  padding: 1.5rem 2rem;
  border-radius: 5px;
  margin-top: 3rem;
}
.fan-art-notice h3 {
  margin-top: 0;
  color: var(--color-navy);
}
/* トップページのメインビジュアルを画面幅いっぱいに広げる */
.home .main-visual-container {
  width: 100vw;
  max-width: 100vw;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}

/* フッターのお問い合わせリンクの色を白に修正 */
.site-footer .footer-contact a.contact-link {
    color: #ffffff !important;
}

body {
  padding-top: 70px; /* ヘッダー高さ分だけ下げる */
}

/* =============================
   メインビジュアル（Hero画像）最終調整
   ============================= */

/* 画像が横幅いっぱい、上下中央にピッタリ */
.hero-image,
.hero-image img,
.main-visual,
.main-visual img {
  width: 100%;
  height: auto;
  display: block;
  margin: 0;
  padding: 0;
  object-fit: cover;
  object-position: center;
  border: none;
}

/* ヘッダーとの隙間を完全除去 */
body,
.site-main,
.hero-image {
  margin: 0 !important;
  padding: 0 !important;
}

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 9999;
}
body {
  padding-top: 70px; /* ヘッダー分だけ確保 */
}

/* PCサイズでの高さ調整 */
@media (min-width: 1025px) {
  .hero-image img {
    height: 600px;
  }
}

/* タブレット */
@media (min-width: 769px) and (max-width: 1024px) {
  .hero-image img {
    height: 500px;
  }
}

/* スマホ */
@media (max-width: 768px) {
  .hero-image img {
    height: 400px;
  }
}

/* =========================================
   Grace Canvas – トップページ全体デザイン統合CSS
   ========================================= */

/* ====== ヘッダーとメインビジュアル調整 ====== */
.hero-image-container {
  width: 100%;
  max-width: 1920px;
  margin: 0 auto;
  position: relative;
  overflow: hidden;
}

.hero-image-container img {
  width: 100%;
  height: 650px;
  object-fit: cover;
  display: block;
  margin: 0 auto;
}

/* ヘッダーメニュー下の余白を削除 */
.site-header {
  margin-bottom: 0 !important;
}
.main-content {
  padding-top: 0 !important;
}

/* メインビジュアルの上の余白削除 */
.page .entry-header {
  margin: 0 !important;
  padding: 0 !important;
}

/* ====== トランプカードセクション全体 ====== */
.trump-cards-container,
.trump-cards-section,
.trump-cards-wrap {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 24px;
  justify-items: center;
  align-items: start;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 40px 0;
}

/* ====== 各トランプカード ====== */
.trump-card {
  width: 100%;
  max-width: 220px;
  aspect-ratio: 4 / 5.5;
  background: #fff;
  border: 2px solid #000;
  border-radius: 12px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  position: relative;
  box-sizing: border-box;
  overflow: hidden;
  transition: transform 0.25s ease;
}
.trump-card:hover {
  transform: translateY(-5px);
}

/* ====== カード上部（左上） ====== */
.trump-card-corner {
  position: absolute;
  top: 6px;
  left: 6px;
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1;
}

/* ====== カード下部（右下・回転配置） ====== */
.trump-card-corner-bottom {
  position: absolute;
  bottom: 4px;
  right: 6px;
  transform: rotate(180deg);
  transform-origin: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1;
}

/* ====== 数字とスート（♥） ====== */
.trump-card-number {
  font-size: 1.2rem;
  font-weight: bold;
  color: #e60033;
  margin: 0;
  padding: 0;
}
.trump-card-suit {
  font-size: 1.1rem;
  color: #e60033;
  margin: 0;
  padding: 0;
}

/* ====== カード中央のタイトル ====== */
.trump-card-title {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-weight: bold;
  font-size: 1rem;
  color: #000;
  text-align: center;
  width: 90%;
  line-height: 1.4;
}

/* ====== レスポンシブ対応 ====== */

/* タブレット（3列） */
@media (max-width: 1024px) {
  .hero-image-container img {
    height: 550px;
  }
  .trump-cards-container {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* スマホ（縦1列） */
@media (max-width: 768px) {
  .hero-image-container img {
    height: 390px;
  }

  .trump-cards-container {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .trump-card {
    max-width: 320px;
    margin: 0 auto;
  }

  .trump-card-title {
    font-size: 1.1rem;
  }
}

/* ====== 補足・見た目調整 ====== */
.trump-card {
  background-color: #fff !important;
}
.trump-card:hover {
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
}

/* =========================================
   Grace Canvas – トップページ トランプカードデザイン
   ========================================= */

/* ====== カードセクション全体 ====== */
.trump-cards-section {
  padding: 60px 20px; /* 上下の余白を調整 */
  background-color: #f8f8f8; /* 背景色を追加 */
}

.trump-cards-container {
  display: grid;
  /* PCでは最大5列、幅に応じて自動で列数が変わる */
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 30px; /* カード間の余白 */
  max-width: 1200px; /* コンテンツの最大幅 */
  margin: 0 auto; /* 中央寄せ */
}

/* ====== 各トランプカードのスタイル ====== */
.trump-card {
  width: 100%;
  aspect-ratio: 5 / 7; /* カードの縦横比を固定 */
  background: #ffffff;
  border: 2px solid #000;
  border-radius: 12px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  position: relative;
  box-sizing: border-box;
  overflow: hidden;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.trump-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}

/* ====== カードの角のマーク（共通設定） ====== */
.trump-card-corner {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1;
}

/* カード左上のマーク */
.trump-card-corner-top {
  top: 10px;
  left: 12px;
}

/* カード右下のマーク（ご指摘の箇所） */
.trump-card-corner-bottom {
  bottom: 10px;
  right: 5px; /* 右からの距離 */
  transform: rotate(180deg);
}

/* 数字とスート（♥）のスタイル */
.trump-card-number {
  font-size: 1.5rem;
  font-weight: bold;
  color: #d9534f; /* 赤色 */
}

.trump-card-suit {
  font-size: 1.3rem;
  color: #d9534f; /* 赤色 */
}

/* ====== カード中央のタイトル ====== */
.trump-card-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}

.trump-card-title {
  font-weight: bold;
  font-size: 1.2rem;
  color: #333333;
}

/* =========================================
   レスポンシブ対応
   ========================================= */

/* ====== タブレット (幅 1024px以下) ====== */
@media (max-width: 1024px) {
  .trump-cards-container {
    /* タブレットでは3列に固定 */
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ====== スマートフォン (幅 768px以下) ====== */
@media (max-width: 768px) {
  .trump-cards-section {
    padding: 40px 15px; /* スマホでは余白を少し狭く */
  }
  .trump-cards-container {
    /* スマートフォンでは縦1列に */
    grid-template-columns: 1fr;
    gap: 20px;
    max-width: 320px; /* カードの最大幅を指定 */
  }
  .trump-card-title {
    font-size: 1.3rem; /* 少し文字を大きくして見やすく */
  }
}
/* ========================================
   7. レスポンシブ対応 (メディアクエリ)
   ======================================== */

/* ====== タブレット (幅 1024px以下) ====== */
@media (max-width: 1024px) {
  /* ヒーローイメージ */
  .hero-image-container img {
    height: 550px;
  }
  /* トランプカード */
  .trump-cards-container {
    grid-template-columns: repeat(3, 1fr);
  }
}


/* ====== スマートフォン (幅 768px以下) の修正版 ====== */
@media (max-width: 768px) {
  /* 基本 */
  body {
    padding-top: 60px;
  }
  /* ヘッダー */
  .site-header {
    height: 60px;
  }
  .site-header .container {
    padding: 0 1rem;
  }
  .site-logo a {
    font-size: 1.2rem;
  }
  .main-navigation {
    display: none;
  }
  /* ヒーローイメージ */
  .hero-image-container {
    margin-top: -60px;
    padding-top: 60px;
  }
  .hero-image-container img {
    height: 400px;
  }
  /* トランプカード */
  .trump-cards-section {
    padding: 40px 20px; /* 左右の余白を少し調整 */
  }
  .trump-cards-container {
    grid-template-columns: 1fr; /* 縦1列を維持 */
    gap: 20px;
    /* ↓↓↓ ここが重要な変更点 ↓↓↓ */
    /* 固定の最大幅をやめて、画面幅いっぱいに広がるように設定 */
    max-width: 100%;
    margin: 0;
  }
  .trump-card-title {
    font-size: 1.3rem;
  }
}