@charset "utf-8";

/* ==============================================
   responsive.css
   yasuekunio4_responsive テーマ用レスポンシブCSS
   PC では非表示にするUI要素
   ============================================== */

#hamburger-btn { display: none; }
.nav-label { display: none; }

/* ==============================================
   box-sizing リセット例外
   style.css の * { box-sizing: border-box } が
   jQuery UI タブ（width/height 固定）を壊すため元に戻す
   ============================================== */
.ui-tabs .ui-tabs-nav li,
.ui-tabs .ui-tabs-nav li a { box-sizing: content-box; }

/* ページ内インラインCSSの .tab（videoページのタブボタン）も同様に元に戻す */
.tab { box-sizing: content-box; }

/* ==============================================
   流体タイポグラフィ（clamp で全幅自動スケール）
   ビューポート幅に比例して文字サイズが滑らかに変化。
   PC では元のサイズ(max値)のまま。スマホで縮小。
   ============================================== */

/* 見出し: 375px→約21px、1000px→30px */
.midashi-a  { font-size: clamp(18px, 5.5vw, 30px); }
/* 小見出し: 375px→約17px、1000px→20px */
.midashi-a2 { font-size: clamp(15px, 4.5vw, 20px); }

/* ユーティリティクラス */
.font30 { font-size: clamp(18px, 5.5vw, 30px); }
.font25 { font-size: clamp(16px, 5vw,   25px); }
.font20 { font-size: clamp(15px, 4.5vw, 20px); }

/* mel-wrap 本文: 375px→約15px、450px以上→18px(上限) */
.mel-wrap                     { font-size: clamp(14px, 4vw, 18px); }
.mel-wrap p:first-of-type,
.mel-wrap p:first-of-type + p { font-size: clamp(15px, 4.5vw, 20px); }
.mel-wrap hr + p,
.mel-wrap hr + p ~ p          { font-size: clamp(14px, 4vw, 18px); }

/* ==============================================
   タブレット (〜999px)
   ============================================== */
@media screen and (max-width: 999px) {

  #contents { width: 68%; }
  #left { width: 28%; }

}

/* ==============================================
   スマホ (〜768px)
   ============================================== */
@media screen and (max-width: 768px) {

  /* --- レイアウト --- */
  #outline { padding: 0 10px; }
  #text { padding: 15px 0; }
  #contents { width: 100%; float: none; }
  #left { width: 100%; float: none; margin-top: 20px; }

  /* --- ヘッダー --- */
  #title { height: auto; padding: 10px 0; }
  #title-inner { padding: 0 15px; }
  #title h1 { display: none; }
  .logo { margin-top: 8px; max-width: 200px; height: auto; }

  /* --- ハンバーガーボタン --- */
  #hamburger-btn {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    width: 40px;
    height: 40px;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 5px;
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1000;
  }
  #hamburger-btn span {
    display: block;
    width: 100%;
    height: 3px;
    background: #333;
    border-radius: 2px;
    transition: transform 0.3s ease, opacity 0.3s ease;
  }
  #hamburger-btn.is-active span:nth-child(1) { transform: translateY(11px) rotate(45deg); }
  #hamburger-btn.is-active span:nth-child(2) { opacity: 0; }
  #hamburger-btn.is-active span:nth-child(3) { transform: translateY(-11px) rotate(-45deg); }

  /* --- グローバルナビ（スマホ用ドロワー） --- */
  #globalnavi { height: auto; position: relative; overflow: visible; }
  #globalnavi-inner { height: auto; overflow: visible; }
  #globalnavi ul {
    display: none;
    flex-direction: column;
    background: rgba(185, 150, 48, 0.96); /* バナー金色 */
    position: absolute;
    top: 0;
    right: 0;
    left: auto;
    width: 58%;
    max-width: 220px;
    z-index: 999;
    box-shadow: -3px 3px 10px rgba(0, 0, 0, 0.25);
  }
  #globalnavi ul.is-open { display: flex; }
  #globalnavi li {
    float: none;
    border-left: none;
    border-bottom: 1px solid rgba(0, 0, 0, 0.18);
  }
  #globalnavi li.gend { border-right: none; }
  #globalnavi a {
    padding: 15px 20px;
    text-align: left;
    display: flex;
    align-items: center;
  }
  #globalnavi a img { display: none; }
  .nav-label {
    display: inline !important;
    color: #fff;
    font-size: 16px;
  }
  #globalnavi a:hover .nav-label { color: #ffddaa; }

  /* --- 全画像レスポンシブ --- */
  img { max-width: 100%; height: auto; }

  /* --- スライダー（JSのインラインスタイルを!importantで上書き） --- */
  .Opening { height: 250px !important; }
  .Opening ul li { height: 250px !important; max-height: 250px !important; overflow: hidden !important; }
  .Opening ul li span img.Opening__img {
    width: 100% !important;
    height: 250px !important;
    object-fit: cover;
    margin-left: 0 !important;
    margin-top: 0 !important;
    transform: none !important;
  }

  /* --- お知らせ下3バナーを横並び --- */
  .ov.m-t40 { display: flex; justify-content: space-between; align-items: center; gap: 4px; }
  .ov.m-t40 a { flex: 1; }
  .ov.m-t40 a img { width: 100%; height: auto; }

  /* --- サイドバー4ボタンを2×2グリッド --- */
  #mainlink { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; margin-bottom: 15px; }
  #mainlink li { margin-bottom: 0; }
  #mainlink li a img { width: 100%; height: auto; }

  /* --- お問い合わせセクション＋下バナーを中央揃え --- */
  .side-contact { height: auto; text-align: center; padding: 10px 0; }
  .side-botan { position: static; margin: 10px auto 0; }
  #left > a { display: block; text-align: center; }

  /* --- コンテンツ要素の固定幅を上書き --- */
  /* ニュース行 */
  .news-line-day { width: 90px; font-size: 11px; }
  .news-line-tt { width: calc(100% - 100px); float: right; }

  /* 講演会行 */
  .kouen-line-l { width: 120px; }
  .kouen-line-r { width: calc(100% - 130px); }
  .kouen-line-r2 { width: calc(100% - 130px); }

  /* 著作詳細 */
  .bd-waku { display: block; }
  .bd-img { width: 100%; float: none; margin-bottom: 15px; max-width: 300px; }
  .bd-text { width: 100%; float: none; }
  .bd-line-l { width: 80px; }
  .bd-line-r { width: calc(100% - 90px); }

  /* プロフィール */
  .prof-waku-l { width: 100%; float: none; margin-bottom: 15px; }
  .prof-waku-r { width: 100%; float: none; }

  /* リンクページ */
  .link-line-l { width: 100%; float: none; margin-bottom: 5px; }
  .link-line-r { width: 100%; float: none; }

  /* お問い合わせ */
  .cline-l { width: 120px; }
  .cline-r { width: calc(100% - 130px); }

  /* 著作ボックス（2列）: margin 5px×2=10px + 余白2px = 12px */
  .book-box { width: calc(50% - 12px); }

  /* --- 見出し・テキストサイズ（モバイル） --- */
  .top_title   { font-size: 17px; }
  .prof-name   { font-size: 20px; }
  .kouen-title { font-size: 15px; }
  .large       { font-size: 16px; }

  /* UIタブナビ（contents.css が !important を持つため !important で上書き） */
  .ui-tabs .ui-tabs-nav li:first-child,
  .ui-tabs .ui-tabs-nav li:last-child,
  .ui-tabs .ui-tabs-nav li:nth-of-type(2) { font-size: 14px !important; }

  /* --- blog-body（videoページ等）インラインfont-size上書き --- */
  /* WPエディターで挿入されたインライン font-size を !important で縮小 */
  #contents [style*="font-size"] { font-size: 15px !important; }

  /* --- mel-wrap 本文フォントサイズ（モバイル上書き） --- */
  /* WPエディターのインラインstyle="font-size:Xpx"を!importantで上書き */
  .mel-wrap span[style*="font-size"] { font-size: 14px !important; }
  .mel-wrap                     { font-size: 14px; }
  .mel-wrap p:first-of-type,
  .mel-wrap p:first-of-type + p { font-size: 14px; }
  .mel-wrap hr + p,
  .mel-wrap hr + p ~ p          { font-size: 14px; }

  /* --- フッター（横折り返し） --- */
  #bottom #footer { display: flex; flex-wrap: wrap; justify-content: center; padding: 5px 10px; }
  #bottom #footer li {
    display: inline;
    border-left: 1px solid rgba(255, 255, 255, 0.4);
    padding: 2px 8px;
    margin-bottom: 4px;
  }
  #bottom #footer li.sampleFooterHome {
    border-left: none;
    padding-left: 8px;
  }

}

/* ==============================================
   小型スマホ (〜480px)
   ============================================== */
@media screen and (max-width: 480px) {

  .book-box { width: calc(50% - 12px); }
  .kouen-line-l { width: 90px; }
  .kouen-line-r { width: calc(100% - 100px); }
  .kouen-line-r2 { width: calc(100% - 100px); }
  .news-line-day { width: 75px; }
  .news-line-tt { width: calc(100% - 85px); }

}