/* ============================================
   Gallery KINGYO — レスポンシブ追加CSS v2
   style2.css の末尾に追記するか、
   既存 <link> の直後に追加で読み込んでください:
   <link rel="stylesheet" href="responsive_add.css">
   ============================================ */

/* ============================================
   全画面共通：画像を可変幅に
   ============================================ */
img {
  max-width: 100% !important;
  height: auto !important;
}

/* 全体フォントをサンセリフに統一 */
body, * {
  font-family: Arial, "Helvetica Neue", Helvetica, "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", Meiryo, "メイリオ", sans-serif !important;
  color: #3d3d3d !important;
}

/* ============================================
   フッター
   ============================================ */
#footter {
  clear: both;
  width: 720px !important;
  max-width: 720px !important;
  margin: 0 auto;
  box-sizing: border-box;
  background: #3a1a1a !important;
  padding: 30px 40px !important;
  height: auto !important;
}

/* mainboxの背景を白に */
#mainbox {
  background: #ffffff !important;
  background-image: none !important;
}

/* PC時のcontents・contents_3フォントサイズを15pxに統一 */
#contents,
#contents *,
#contents_3,
#contents_3 * {
  font-size: 15px !important;
  line-height: 1.8 !important;
}
#contents h1,
#contents h2,
#contents h3 {
  font-size: 16px !important;
  line-height: 1.6 !important;
}

#footter .footer-inner {
  text-align: center;
}

#footter .footer-name {
  font-size: 16px;
  font-weight: bold;
  color: #fff !important;
  letter-spacing: 0.12em;
  margin-bottom: 10px;
}

#footter .footer-info {
  font-size: 11px;
  color: #bbb !important;
  line-height: 2;
}

#footter .footer-copy {
  margin-top: 16px;
  font-size: 10px;
  color: #777 !important;
}

@media screen and (max-width: 768px) {
  #footter {
    max-width: 100% !important;
    padding: 24px 20px !important;
  }
  #footter .footer-name {
    font-size: 14px;
  }
  #footter .footer-info {
    font-size: 11px;
  }
}

/* sidemenuリンクの下線を消してマウスオーバーで色変化 */
#sidemenu li a {
  text-decoration: none !important;
  transition: color 0.2s ease;
}
#sidemenu li a:hover {
  color: #710101 !important;
  text-decoration: none !important;
}
.sp-logo {
  display: none;
}

/* PC時はサイドメニュートグルボタンを非表示 */
#sidemenu-toggle {
  display: none !important;
}

/* ============================================
   サイドメニューなし1カラムページ用
   (#sidemenuが存在しない場合にfloatを解除)
   ============================================ */
#mainbox:not(:has(#sidemenu)) #contents {
  float: none !important;
  width: auto !important;
  max-width: 660px;
  margin: 10px auto !important;
  padding: 0px 20px 0px 20px !important;
  box-sizing: border-box;
}



/* ============================================
   タブレット (769px〜1024px)：幅を縮める
   ============================================ */
@media screen and (max-width: 1024px) {
  #mainbox {
    width: 100% !important;
    max-width: 720px;
    box-sizing: border-box;
  }
  #footter {
    width: 100% !important;
    max-width: 720px;
    box-sizing: border-box;
  }
}

/* ============================================
   スマホ・小さめタブレット (768px以下)
   ============================================ */
@media screen and (max-width: 768px) {

  /* --- 全体ボックス --- */
  #mainbox,
  #footter {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
    padding: 0 !important;
    background-image: none !important;
    overflow-x: hidden !important;
  }

  /* --- ロゴテキスト（スマホのみ表示） --- */
  .sp-logo {
    display: block !important;
    font-size: 22px;
    font-weight: bold;
    color: #710101;
    text-align: center;
    padding: 15px 0;
    letter-spacing: 0.08em;
    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
  }

  /* --- コンテンツ内テキストサイズ統一 --- */
  #contents,
  #contents * {
    font-size: 15px !important;
    line-height: 1.9 !important;
  }
  #contents h1 {
    font-size: 17px !important;
    font-weight: bold !important;
    line-height: 1.6 !important;
    margin-bottom: 10px !important;
  }
  #contents span[style*="font-size"] {
    font-size: 16px !important;
  }
  #contents .txt_s {
    font-size: 13px !important;
  }

  /* --- ヘッダー：背景画像を非表示、高さも詰める --- */
  #hedder,
  #hedder_random,
  #hedder_line {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    box-sizing: border-box;
    background-image: none !important;
    height: auto !important;
    min-height: 0 !important;
  }

  /* cover.jsが挿入する画像を非表示 */
  #hedder_random img {
    display: none !important;
  }

  /* ナビ：スプライト画像を隠してテキストを表示 */
  .menu {
    width: 100% !important;
    height: auto !important;
    background: #710101 !important;
    box-sizing: border-box;
  }
  .menu ul {
    display: flex !important;
    flex-wrap: wrap !important;
    width: 100% !important;
    height: auto !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  .menu li {
    float: none !important;
    flex: 1 1 50%;
    text-indent: 0 !important;
    text-align: left !important;
    border-bottom: 1px solid rgba(255,255,255,0.2);
  }
  .menu li a {
    display: block !important;
    height: auto !important;
    padding: 10px 15px !important;
    margin: 0 !important;
    background: none !important;
    color: #fff !important;
    text-decoration: none !important;
    text-align: left !important;
    text-indent: 0 !important;
    font-size: 12px;
  }

  /* 各ナビリンクの個別marginをリセット */
  .menu li a#top,
  .menu li a#top_on,
  .menu li a#about,
  .menu li a#about_on,
  .menu li a#exhibition,
  .menu li a#exhibition_on,
  .menu li a#goods,
  .menu li a#goods_on,
  .menu li a#list,
  .menu li a#list_on,
  .menu li a#group,
  .menu li a#group_on {
    margin: 0 !important;
    padding: 10px 15px !important;
    width: 100% !important;
    text-align: left !important;
    text-indent: 0 !important;
    background-image: none !important;
  }
  .menu li a:hover {
    background: rgba(255,255,255,0.15) !important;
  }

  /* --- サイドメニュー --- */
  #sidemenu {
    float: none !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box;
    border-top: 1px solid #ddd;
    background: #f5f5f5;
  }

  /* トグルボタン */
  #sidemenu-toggle {
    display: block !important;
    width: 100%;
    padding: 10px 15px;
    background: #f0f0f0;
    border: none;
    border-bottom: 1px solid #ddd;
    text-align: left;
    font-size: 13px;
    color: #4C4C4C;
    cursor: pointer;
    box-sizing: border-box;
  }
  #sidemenu-toggle::after {
    content: ' ▼';
    float: right;
    font-size: 11px;
  }
  #sidemenu-toggle.open::after {
    content: ' ▲';
  }

  /* メニューリスト：初期は非表示 */
  #sidemenu ul {
    display: none;
    width: 100% !important;
    flex-direction: column;
    padding: 5px 0 !important;
    margin: 0 !important;
  }
  #sidemenu ul.open {
    display: block;
  }
  #sidemenu li {
    width: 100% !important;
    flex: none !important;
    margin: 0 !important;
    padding: 0 !important;
    background-image: none !important;
    border-bottom: 1px solid #e8e8e8 !important;
    text-align: left !important;
  }
  #sidemenu li a {
    display: block;
    padding: 10px 15px !important;
  }

  /* --- コンテンツエリア --- */
  #contents,
  #contents_2 {
    float: none !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 10px 15px !important;
    box-sizing: border-box;
  }

  /* --- テキスト・展示ブロックの固定幅をリセット --- */
  .txt_ul,
  .txt,
  .txt2_ul,
  .txt3_ul,
  .txt4_ul,
  .txt_center,
  .txt_center_ul,
  .exhibition_thumbnail,
  .exhibition_thumbnail2,
  .exhibition_txt,
  .exhibition_txt2,
  .exhibition_txt3,
  .exhibition_txt4,
  #exhibition_img,
  #exhibition_img2,
  #exhibition_img3,
  .about_photo,
  #about_img,
  .diary,
  dl {
    width: 100% !important;
    box-sizing: border-box;
    float: none !important;
  }

  .exhibition_photo,
  .exhibition_photo_2 {
    float: none !important;
    width: 100% !important;
    box-sizing: border-box;
  }

  .thumbnail {
    float: none !important;
    width: auto !important;
  }

  .txt_center,
  .txt_center_ul {
    margin-left: 0 !important;
    text-align: left !important;
  }

  .exhibition_menu,
  .about_menu {
    float: none !important;
    width: 100% !important;
  }
  .exhibition_menu ul,
  .about_menu ul {
    float: none !important;
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
  }

  body {
    font-size: 13px;
  }
}

/* ============================================
   スマートフォン (480px以下)
   ============================================ */
@media screen and (max-width: 480px) {

  .menu li {
    flex: 1 1 100% !important;
  }

  #sidemenu ul {
    flex-direction: column;
  }
  #sidemenu li {
    text-align: left !important;
  }

  h1 {
    background: none !important;
    padding-left: 0 !important;
    font-size: 13px;
  }

  .img_thumbnail {
    width: auto !important;
    height: auto !important;
    max-width: 100% !important;
  }

  .img_exhibition {
    float: none !important;
    height: auto !important;
    max-width: 100% !important;
  }
}

/* ============================================
   Google Custom Search（search.html用）
   PC・モバイル共通
   ============================================ */

/* contents_2のpaddingによるズレを修正 */
#contents_2 {
  float: none !important;
  width: auto !important;
  max-width: 660px;
  margin: 10px auto !important;
  padding: 0 20px !important;
  box-sizing: border-box !important;
}

/* 検索ページ専用コンテナ */
#contents_3 {
  float: none !important;
  width: 90% !important;
  max-width: 600px;
  margin: 10px auto !important;
  padding: 0 10px !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}

/* 外枠をコンテナ幅に収める */
.gsc-control-cse,
.gsc-search-box,
.gsc-search-box-tools {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  padding: 4px !important;
}

/* テーブルレイアウトの崩れ防止 */
.gsc-search-box table,
.gsc-search-box-tools table {
  width: 100% !important;
  table-layout: fixed;
}

/* 入力欄 */
.gsc-input-box {
  width: 100% !important;
  box-sizing: border-box !important;
}
.gsc-input input.gsc-input {
  width: 100% !important;
  box-sizing: border-box !important;
  font-size: 13px !important;
  padding: 5px 8px !important;
}

/* 検索ボタン */
.gsc-search-button {
  width: auto !important;
  white-space: nowrap;
}
.gsc-search-button input.gsc-search-button-v2 {
  padding: 6px 10px !important;
  min-width: 44px;
}

/* 検索結果のオーバーフロー防止 */
.gsc-results-wrapper-overlay,
.gsc-results-wrapper-nooverlay,
.gsc-result,
.gs-result {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  overflow-wrap: break-word !important;
  word-break: break-word !important;
}

/* サジェストのはみ出し防止 */
.gssb_c {
  width: auto !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

@media screen and (max-width: 768px) {
  #contents_2 {
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }
  #contents_3 {
    width: 85% !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 10px auto !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }
  /* CSE内部要素のはみ出しも抑制 */
  #contents_2 * {
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  /* input要素を強制的に収める */
  #contents_2 input,
  #contents_2 input.gsc-input,
  #contents_2 .gsc-input-box,
  #contents_2 .gsc-input-box-hover,
  #contents_2 td.gsc-input {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }
}