/* ------------------------------
   1. 全体スタイル
------------------------------ */
html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: auto;
  box-sizing: border-box;
  font-family: "Hiragino Sans", "Yu Gothic", sans-serif;
  background-color: #f4f4f4;
}
body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
/* ------------------------------
   2. ナビゲーションメニュー（PC）
------------------------------ */
nav {
  background-color: #333;
}
nav ul.menu {
  display: flex;
  flex-wrap: wrap;
  list-style-type: none;
  padding: 0;
  margin: 0;
  justify-content: center;
}
nav ul.menu li {
  flex-grow: 1;
  text-align: center;
}
nav ul.menu li a {
  display: block;
  padding: 15px;
  color: white;
  text-decoration: none;
  transition: background-color 0.3s ease;
  border-bottom: 1px solid #272121;
  border-top: 1px solid #5F5F5F;
  border-left: 1px solid #5F5F5F;
  border-right: 1px solid #272121;
}
nav ul.menu li a:hover, a.image-button:hover {
  background-color: #555;
}
/* --- フッター手前のスマホナビ設定 --- */
/* PCでは非表示 */
.sp-only-nav {
  display: none;
}
/* スマホ用（500px以下） */
@media screen and (max-width: 500px) {
  .sp-only-nav {
    display: block; /* スマホでは表示 */
    background-color: #333; /* 既存ナビと同じ背景色 */
    padding-bottom: 20px;
  }
  .sp-only-nav ul.menu {
    display: grid;
    grid-template-columns: 1fr 1fr; /* 2列並び */
    gap: 4px;
    padding: 10px;
    list-style: none;
    margin: 0;
  }
  .sp-only-nav ul.menu li a {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 15px;
    text-decoration: none;
    background-color: #444; /* 各ボタンの背景を少し明るくして見やすく */
    border: 1px solid #555;
  }
}
/* カレントページ（activeクラス）の背景色と文字を固定 */
/* PC・スマホ共通の active 設定 */
nav ul.menu li.active a, .main-nav ul.menu li.active a, .sp-only-nav ul.menu li.active a {
  background-color: #666 !important; /* 現在のページとわかるように背景を明るく */
}
/* active時の文字を光らせる（既存の設定を確実に適用） */
li.active a .nav-text-style {
  color: #ffffff;
  text-shadow: 0 0 10px rgba(255, 230, 150, 0.6), 0 0 20px rgba(255, 200, 100, 0.3);
  transform: scale(1.05);
}
/* ------------------------------
   3. 画像ホバー
------------------------------ */
.menu li.active a {
  background-color: #666;
}
/* ------------------------------
   4. ハンバーガーメニュー
------------------------------ */
/* PC：常に横並び */
.main-nav ul {
  display: flex;
  list-style: none;
  padding: 0;
  margin: 0;
}
/* スマホ用（500px以下） */
@media screen and (max-width: 500px) {
  .menu-toggle {
    display: block;
    background-image: url("https://graffitiknights.art/image/common/menu/menu_repeat.webp");
    background-size: 62px auto;
    background-repeat: repeat-x;
    cursor: pointer;
    padding: 30px 15px 0 0;
    /* ボタンを最前面に */
    position: relative;
    z-index: 1001;
  }
  .menu-toggle img {
    height: 50px;
    width: auto;
  }
  /* ▼ アニメーション用の設定（スライドのみ） */
  .main-nav {
    /* display: none は使いません */
    display: block;
    width: 100%;
    /* 閉じた状態：高さを0にして隠す */
    min-height: 0;
    height: 0;
    overflow: hidden;
    /* ★修正点：opacity（透明度）の設定を削除し、最初から不透明にする */
    /* opacity: 0; を削除 */
    /* ★修正点：transitionからopacityを削除し、高さの変化のみにする */
    transition: min-height 0.5s ease-in-out;
    background-color: #333;
  }
  /* ▼ 開いた状態（activeクラスが付いた時） */
  .main-nav.active {
    /* JSで min-height を設定するため、CSS側での高さ指定は不要 */
    /* opacityの設定も不要 */
  }
  .main-nav ul.menu {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px;
    padding: 10px;
    list-style: none;
    margin: 0;
  }
  .main-nav ul.menu li {
    width: 100%;
    text-align: center;
  }
  .main-nav ul.menu li a {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 12px;
    /* 文字色を明示 */
    color: #fff;
    text-decoration: none;
  }
}
/* PCではハンバーガー非表示・メニュー強制表示 */
@media screen and (min-width: 500px) {
  .menu-toggle {
    display: none;
  }
  /* PC表示時にメニューが消えないようにリセット */
  .main-nav {
    /* JSで付与された min-height を無効化する */
    min-height: auto !important;
    height: auto !important;
    max-height: none !important;
    opacity: 1 !important;
    overflow: visible !important;
    display: block !important;
    transition: none !important;
  }
}
/* ------------------------------
   5. ヘッダー
------------------------------ */
.header {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  height: clamp(200px, 50vh, 500px);
  overflow: hidden;
  min-height: 250px;
  max-height: 500px;
  background-image: url("../image/top/header_repeat.webp");
  background-size: auto 100%;
  background-repeat: repeat-x;
  background-position: top center;
}
@media screen and (max-width: 500px) {
    .header {
        /* 高さ200px固定をやめ、ヘッダーの高さ(100%)に合わせて背景を伸縮させる */
        background-size: auto 100%;
        min-height: 200px;
    }

    /* スマホの時だけ、中のイラストがパンパンにならないよう少し余白を持たせる */
    .header-illustration {
        max-height: 90%; /* 100%だと圧迫感がある場合はここを調整 */
        max-width: 90%;  /* 横幅も画面からはみ出さないように制限 */
    }
}
@media (min-width: 1100px) {
  .header {
    min-height: 350px;
  }
}
/* イラスト */
.header-illustration {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-width: 100%;
  max-height: 100%;
  min-width: 200px;
  min-height: 200px;
  z-index: 1;
}
/* テキスト */
.fade-in-text {
  position: relative;
  z-index: 2;
  text-align: center;
  font-size: 5vw;
  opacity: 0;
  transition: opacity 2s ease-in-out;
}
.fade-in {
  opacity: 1;
}
@media (max-width: 500px) {
  .fade-in-text {
    font-size: 8vw;
  }
}
.fade-in-text p.text_min {
  color: #fff;
  font-size: 12px;
  background: rgba(0, 0, 0, 0.5);
  padding: 5px 10px;
  display: inline-block;
  border-radius: 4px;
}
.fade-in-text h2 {
  color: #fff;
  font-size: 25px;
  background: rgba(0, 0, 0, 0.4);
  padding: 5px 10px;
  border-radius: 20px;
}
/* ------------------------------
   6. フッター
------------------------------ */
footer {
  background-color: #333;
  color: #fff;
  text-align: center;
  padding: 20px 0;
}
.social-links {
  margin: auto;
}
.social-links a {
  color: #fff;
  margin: 0 10px;
  margin-top: 20px;
  text-decoration: none;
}
.social-links a.X, .social-links a.FB, .social-links a.PV, .social-links a.IG, .social-links a.IC {
  display: inline-block;
  width: 50px;
  height: 50px;
  background-size: cover;
  background-position: center;
  text-indent: -9999px;
  border-radius: 10px;
}
.social-links a.X {
  background-image: url("../image/common/footer/X.webp");
}
.social-links a.FB {
  background-image: url("../image/common/footer/fb.webp");
}
.social-links a.PV {
  background-image: url("../image/common/footer/pixiv.webp");
}
.social-links a.IG {
  background-image: url("../image/common/footer/Instagram.webp");
}
.social-links a.IC {
  background-image: url("../image/common/hp_icon_jump.webp");
}
footer .exp {
  font-size: 12px;
  padding-top: 50px;
}
/* ------------------------------
   7. Page Top ボタン
------------------------------ */
#back-to-top {
  position: fixed;
  bottom: 20px;
  right: 0;
  padding: 12px 18px;
  font-size: 14px;
  background: rgba(0, 0, 0, 0.7);
  color: #fff;
  border: none;
  border-radius: 12px 0 0 12px;
  cursor: pointer;
  display: none;
  opacity: 0;
  transition: opacity 0.3s ease, transform 0.2s ease;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
  z-index: 99999;
}
#back-to-top:hover {
  background: rgba(0, 0, 0, 0.85);
  transform: translateY(-3px);
  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.5);
}
@media (max-width: 500px) {
  #back-to-top {
    padding: 10px 14px;
    font-size: 12px;
    bottom: 15px;
  }
}
/* ------------------------------
   9. バナー
------------------------------ */
#banner-container {
  width: 100%;
  overflow: hidden;
}
#banner-container img {
  width: 100%;
  height: auto;
}
/* ------------------------------
   10. プロフィールページ
------------------------------ */
.potofu {
  border: 1px solid #434343;
  height: auto;
  width: 100%;
}
/* ------------------------------
   11. 共通スタイル（文字関係）
------------------------------ */
.fbb {
  font-size: 30px;
  font-weight: 500;
}
.red {
  font-weight: 500;
  color: #B90003;
}
.f_20_b {
  font-size: 20px !important;
  font-weight: 500;
}
.f_12_s {
  font-size: 12px;
  color: #515151;
  font-weight: 100;
}
.nowrap {
  white-space: nowrap;
}
/* ------------------------------
   12. ページタイトル
------------------------------ */
.page-title-flex {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 10px;
}
.title-line {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 2px solid #e0e0e0;
  padding-bottom: 5px;
  margin: 10px 0px;
  width: 100%;
}
.title-line h1 {
  font-size: 40px;
  margin: 0;
}
.title-line .Symbol {
  height: 100px;
  width: auto;
}
@media (max-width: 500px) {
  .title-line .Symbol {
    height: 60px;
    width: auto;
  }
  .title-line {
    margin: 0px;
  }
  .title-line h1 {
    font-size: 30px;
  }
}
/* =========================================
   7. フッター：PDF閲覧・ダウンロードボタン (オレンジ改修版)
   ========================================= */
.btn-pdf {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  padding: 14px 40px;
  margin: 30px 0 10px 0;
  border-radius: 50px;
  
  /* --- オレンジ系の設定 --- */
  background: linear-gradient(135deg, #f39c12, #d35400); /* 鮮やかなオレンジから深いオレンジへのグラデーション */
  color: #fff;
  border: none; /* ボーダーを消してグラデーションを活かす */
  
  text-decoration: none;
  font-size: 14px; /* 少しだけ大きくして視認性アップ */
  font-weight: bold;
  font-family: "Zen Antique", serif; /* サイトの雰囲気に合わせる */
  letter-spacing: 0.05em;
  
  /* 影をオレンジに馴染む茶色系にして、ふんわり浮かせる */
  box-shadow: 0 4px 15px rgba(211, 84, 0, 0.4); 
  transition: all 0.3s ease;
  cursor: pointer;
}

/* ホバー時の動き */
.btn-pdf:hover {
  /* 少し明るくして「押せる感」を出す */
  background: linear-gradient(135deg, #ffb347, #f39c12); 
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(211, 84, 0, 0.6);
  color: #fff;
}

/* クリックした瞬間（アクティブ） */
.btn-pdf:active {
  transform: translateY(-1px);
  box-shadow: 0 2px 10px rgba(211, 84, 0, 0.4);
}

/* スマホ調整 */
@media (max-width: 500px) {
  .btn-pdf {
    width: 85%;
    max-width: 300px;
    padding: 12px 0;
    font-size: 13px;
  }
}
/* =========================================
   ▼ テキストナビゲーション用スタイル（追記）
   ========================================= */
/* 1. ファンタジー風フォント（Zen Antique）の読み込み */
@import url('https://fonts.googleapis.com/css2?family=Zen+Antique&display=swap');
/* 2. テキスト装飾クラス */
.nav-text-style {
  /* ▼ フォント設定 */
  font-family: "Zen Antique", serif; /* 筆の入りが独特な明朝体 */
  color: #e0e0e0; /* 通常時の色：少しグレーがかった白（落ち着き用） */
  font-size: 18px; /* PCでの基本サイズ */
  font-weight: 500;
  letter-spacing: 0.1em; /* 文字の間隔を少し広げて高級感を出す */
  /* ▼ Photoshop風の質感（ドロップシャドウ） */
  text-shadow: 2px 2px 3px rgba(0, 0, 0, 0.8);
  /* ▼ 配置調整 */
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%; /* 親要素(aタグ)のpadding内で中央に配置 */
  /* ▼ アニメーション */
  transition: all 0.3s ease;
}
/* 3. ホバー時の演出（親のaタグにホバーした時） */
a:hover .nav-text-style, li.active .nav-text-style {
  color: #ffffff; /* 真っ白に */
  /* ▼ ぼわっと光る演出（金色の光彩） */
  text-shadow: 0 0 10px rgba(255, 230, 150, 0.6), 0 0 20px rgba(255, 200, 100, 0.3);
  /* ▼ 少しだけ浮き上がる */
  transform: scale(1.05);
}
/* 4. スマホ・タブレット時のサイズ調整 */
/* 既存CSSのメディアクエリに合わせて調整 */
@media screen and (max-width: 1000px) {
  .nav-text-style {
    font-size: 15px; /* 少し小さく */
  }
}
@media screen and (max-width: 500px) {
  .nav-text-style {
    font-size: 14px; /* スマホで見やすいサイズ */
  }
}
/* =========================================
   外部リンクアイコン（テキストナビ用）
   ========================================= */
.nav-text-style.external::after {
  content: "";
  display: inline-block;
  width: 0.7em; /* 文字サイズに応じた大きさ */
  height: 0.7em;
  margin-left: 6px; /* 文字との隙間 */
  /* アイコンの形状（SVGデータ） */
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'%3E%3C/path%3E%3Cpolyline points='15 3 21 3 21 9'%3E%3C/polyline%3E%3Cline x1='10' y1='14' x2='21' y2='3'%3E%3C/line%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'%3E%3C/path%3E%3Cpolyline points='15 3 21 3 21 9'%3E%3C/polyline%3E%3Cline x1='10' y1='14' x2='21' y2='3'%3E%3C/line%3E%3C/svg%3E");
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  /* アイコンの色（文字色と同じにする設定） */
  background-color: currentColor;
  vertical-align: middle;
  transform: translateY(-2px); /* 位置の微調整 */
  opacity: 0.8; /* 少しだけ控えめに */
}
/* =========================================
   ローディング画面 (Loading Overlay)
   ========================================= */
#loading-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* 背景色：薄く白を被せる（透過率0.9） */
  background-color: rgba(255, 255, 255, 0.9);
  z-index: 99999; /* 最前面に表示 */
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  transition: opacity 0.5s ease, visibility 0.5s ease;
}
/* ロード完了後に消すためのクラス */
#loading-overlay.loaded {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
/* くるくる回るスピナー */
.spinner {
  width: 50px;
  height: 50px;
  border: 4px solid #f3f3f3; /* 薄いグレー */
  border-top: 4px solid #333; /* メインカラー（黒） */
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin-bottom: 15px;
}
/* ローディングテキスト */
.loading-text {
  font-family: 'Zen Antique', serif;
  font-size: 14px;
  color: #333;
  letter-spacing: 0.1em;
  animation: pulse 1.5s infinite ease-in-out;
  text-align: center;
}
/* アニメーション定義 */
@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@keyframes pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}
/* =========================================
   画像の読み込みチラつき防止（新規追加）
   ========================================= */
/* 初期状態は透明にしておく */
.thumb-wrapper img.thumbnail {
  opacity: 0;
  transition: opacity 0.3s ease;
}
/* JSで読み込み完了(loaded)が付いたらふわっと表示 */
.thumb-wrapper.loaded img.thumbnail {
  opacity: 1;
}
/* 横揺れ防止設定（修正版） */
html {
  overflow-x: hidden;
}
body {
  overflow-x: hidden;
  width: 100%;
  position: static; /* ★relative ではなく static に戻す（固定ボタンの不具合防止） */
}
/* 念のため Topボタンを強制的に最前面へ */
#back-to-top {
  z-index: 2147483647 !important; /* 可能な限り大きな数字 */
}