@charset "utf-8";
/*
 * responsive-fix.css
 * 作成日: 2026-03-19
 * 目的: レスポンシブデザインの崩れを修正する
 *
 * 既存の style.css には手を加えず、このファイルで上書き修正する。
 * style.css の後に読み込むことで、同じセレクタはこちらが優先される。
 *
 * ■ 修正内容:
 *   A. デスクトップ（1025px以上）の固定幅1100pxを可変化
 *   B. タブレット用（769px〜1024px）をスマホ風レイアウトに切替
 *   C. スマホ表示（768px以下）の細かい崩れ修正
 *
 * ■ ロールバック方法:
 *   header.php の responsive-fix.css 読み込み行を削除するだけで元に戻る
 */


/* ====================================================================
   A. デスクトップ（1025px以上）: 固定幅 → 最大幅に変更

   元の style.css では width: 1100px 固定のため、
   画面幅が1100px未満で横スクロールが発生していた。
   max-width に変更し、画面に収まるようにする。
   1025px以上のみに適用し、1024px以下はセクションBで対応。
   ==================================================================== */
@media only screen and (min-width: 1025px) {

    /* --- ヘッダー ---
       元: width: 1100px 固定
       修正: 幅のみ可変化 */
    .header {
        max-width: 1100px;
        width: 100%;
    }

    /* --- グローバルナビ ---
       元: width: 1100px 固定
       修正: 幅を可変化 */
    .gnav {
        max-width: 1100px;
        width: 100%;
    }

    /* --- コンテナ（メイン＋サイドバーの親要素）---
       元: width: 1100px 固定
       修正: 幅を可変化 */
    .container {
        max-width: 1100px;
        width: 100%;
        box-sizing: border-box;
    }

    /* --- メインカラム ---
       元: width: 780px 固定
       修正: サイドバー幅(300px)+余白(20px)を引いた残りを使う */
    .main {
        width: calc(100% - 320px);
        max-width: 780px;
    }

    /* --- フッター ---
       元: width: 1030px 固定
       修正: 幅を可変化 */
    .footer {
        max-width: 1030px;
        width: 100%;
    }
}


/* ====================================================================
   B. タブレット用（769px〜1024px）

   この画面幅ではPC用レイアウト（1100px幅、2カラム、gnav画像）が
   収まらない。style.css の 769px以上のPC用スタイルを上書きして、
   スマホに近い1カラム・テキストベースのレイアウトに切り替える。

   ※ style.css の @media (min-width: 769px) が先に適用されるため、
     PC用に変更されたプロパティを1つずつモバイル相当に戻す必要がある。
   ==================================================================== */
@media only screen and (min-width: 769px) and (max-width: 1024px) {

    /* ---------------------------------------------------------------
       横方向のはみ出し防止:
       style.css(769px+)で1100px固定幅が設定される要素があり、
       CSSの上書き漏れがあった場合にページ全体が広がる問題を防ぐ。
       --------------------------------------------------------------- */
    html, body {
        overflow-x: hidden;
    }

    /* ---------------------------------------------------------------
       ヘッダー:
       style.css(769px+)で position:relative / width:1100px /
       height:260px / overflow:hidden に変更される。
       タブレットではこれらをモバイル相当に戻す。
       --------------------------------------------------------------- */
    .header {
        position: static;          /* absoluteの子要素配置を解除 */
        width: 100%;               /* 固定幅を解除 */
        max-width: 100%;           /* 画面幅を超えない */
        height: auto;              /* 固定高さを解除 */
        background-image: none;    /* PC用背景画像を非表示 */
        overflow: hidden;          /* はみ出しを防止 */
        padding: 0.625em 2% 0;     /* モバイルと同じpadding */
    }

    /* --- ヘッダーH1 ---
       style.css(769px+)で position:absolute になるため、
       static に戻してモバイルと同じ通常フローにする */
    .header__h1 {
        position: static;
        margin-bottom: 0.625em;
        font-size: 0.875em;
    }

    /* --- ヘッダーロゴエリア ---
       style.css(769px+)で float:left / margin:0 になるため解除し、
       モバイルと同じセンター配置にする。
       ※ bodyの text-align:center を継承してロゴを中央揃えにする */
    .header__logoArea {
        float: none;
        margin: 0 0 1em;
        text-align: center;
    }
    /* ロゴ画像がはみ出さないように */
    .header__logoArea img {
        max-width: 100%;
        height: auto;
    }

    /* --- ヘッダーナビエリア ---
       style.css(769px+)で position:absolute になるため、
       static に戻してモバイルと同じ通常フローにする */
    .header__navArea {
        position: static;
        margin: 0 0 0.5em;
    }

    /* --- ヘッダーナビアイテム ---
       style.css(769px+)で背景・ボーダーが変わるため、
       モバイルと同じスタイルに戻す */
    .header__navitem {
        float: left;
        width: 33%;
        padding: 0.3em;
        background: #D7CDBF;
        border-bottom: 1px solid #fff;
        border-right: 1px solid #fff;
    }
    .header__navitem:nth-child(3n) {
        border-right: none;
    }

    /* --- ヘッダーナビリンク ---
       style.css(769px+)で display:table-cell / width:150px /
       height:15px / vertical-align:middle 等になるため、
       モバイルと同じブロック表示に戻す */
    .header__navlink {
        display: block;
        width: auto;
        height: auto;
        color: #fff;
        text-align: center;
        font-size: 1em;
    }

    /* --- ヘッダーナビアイテムの個別幅をリセット ---
       style.css(769px+)で width:110px/100px 等の固定幅が設定されるため解除 */
    .header__navitem_name_cara,
    .header__navitem_name_article,
    .header__navitem_name_ask {
        width: auto;
    }

    /* ---------------------------------------------------------------
       グローバルナビ:
       style.css(769px+)でPC用画像表示に切り替わるが、
       タブレットではスマホと同じテキスト表示に戻す。
       --------------------------------------------------------------- */
    .gnav {
        width: 100%;               /* 固定幅を解除 */
    }

    /* --- gnavリスト ---
       フロートした子要素を正しく包含するためのクリア */
    .gnav__list {
        overflow: hidden;
    }

    /* --- gnavアイテム ---
       style.css(769px+)で width:auto / float:left / border解除になるため、
       モバイルと同じ50%幅・ボーダー付きに戻す */
    .gnav__item {
        float: left;
        width: 50%;
        margin-right: 0;
        border-left: 1px solid #fff;
        border-bottom: 2px solid #fff;
    }
    .gnav__item_sort_home {
        width: 100%;
    }

    /* --- PC用gnav画像を非表示にし、スマホ用テキストを表示 ---
       style.css(769px+)で .gnav__item_pc が display:inline、
       .gnav__item_smaph が display:none になるため、逆転させる */
    .gnav__item_pc {
        display: none !important;
    }
    .gnav__item_smaph {
        display: block !important;
        height: 55px;
        line-height: 55px;
        color: #fff;
        text-align: center;
    }

    /* --- gnavリンク ---
       style.css(769px+)ではgnav__linkに特別なスタイルはないが、
       クリック領域を確保するためblock表示にする */
    .gnav__link {
        display: block;
    }

    /* ---------------------------------------------------------------
       コンテナ・メイン・サイドバー:
       1カラム縦積みレイアウトにする。
       --------------------------------------------------------------- */

    /* --- コンテナ ---
       style.css(769px+)で width:1100px 固定になるため、
       全幅にしてpadding追加 */
    .container {
        width: 100%;
        max-width: 100%;
        padding: 15px 3%;
        box-sizing: border-box;
    }

    /* --- メインカラム ---
       style.css(769px+)で float:left / width:780px になるため、
       floatを解除して全幅にする */
    .main {
        float: none;
        width: 100%;
        max-width: 100%;
        margin: 0;
    }

    /* --- サイドバー ---
       style.css(769px+)で float:right / width:300px になるため、
       floatを解除して全幅・メインの下に配置 */
    .side {
        float: none;
        width: 100%;
        max-width: 100%;
        margin-top: 30px;
    }

    /* ---------------------------------------------------------------
       コンテンツボックス（記事リスト）:
       style.css(769px+)で flex-direction:row / margin-right:80px になるため、
       タブレットでは縦積みに戻す。
       --------------------------------------------------------------- */
    .content-box__main {
        flex-direction: column;     /* 横並び→縦積みに */
        margin-right: 0;           /* btnDetail用の右マージンを解除 */
        padding-bottom: 35px;      /* btnDetail用の下余白を確保 */
    }

    /* --- front-page.phpの記事リスト ---
       style.css(769px+)で float:left になるfloatLeft_s_noneを解除 */
    .floatLeft_s_none {
        float: none;
        margin-bottom: 10px;
    }

    /* --- 記事テキストエリア ---
       style.css(769px+)で width:450px 固定になるため、全幅に */
    .box_list_txtarea {
        width: 100%;
        margin-right: 0;
        margin-bottom: 40px;
    }

    /* ---------------------------------------------------------------
       フッター:
       style.css(769px+)で幅固定・absolute配置になるため、
       タブレットではシンプルなレイアウトに戻す。
       --------------------------------------------------------------- */
    .footer {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        padding: 1em 3%;
        overflow: hidden;          /* はみ出し防止 */
    }

    .footer__logoArea {
        float: none;
        margin-right: 0;
        margin-bottom: 10px;
    }

    .footer__copy {
        position: static;
    }

    /* ---------------------------------------------------------------
       その他:
       --------------------------------------------------------------- */

    /* --- PC専用の表示/非表示を逆転 ---
       style.css(769px+)で boxSmahoNone=block, boxPcNone=none だが、
       タブレットではスマホと同じ扱いにする */
    .boxSmahoNone {
        display: none;
    }
    .boxPcNone {
        display: block;
    }

    /* --- テーブル ---
       style.css(769px+)で固定幅のテーブルを全幅に */
    .tCompany {
        width: 100%;
    }
}


/* ====================================================================
   C. スマホ（768px以下）の崩れ修正

   元のstyle.cssではモバイルファーストで書かれているが、
   一部のクラスでスマホ用の処理が不足していた箇所を補完する。
   ==================================================================== */
@media only screen and (max-width: 768px) {

    /* --- front-page.phpの記事リスト ---
       floatLeft_s_none はPC用（769px以上）でのみfloatさせる想定だが、
       style.cssのモバイル部分にfloat解除がないため、ここで明示的に解除 */
    .floatLeft_s_none {
        float: none;
        margin-right: 0;
        margin-bottom: 10px;
    }

    /* --- 記事リストのテキストエリア ---
       元: margin-right: 85px（btnDetailのスペース確保用）
       スマホでは1カラムなので右マージン不要。下に余白を確保 */
    .box_list_txtarea {
        margin-right: 0;
        margin-bottom: 40px;
    }

    /* --- content-box（index.phpの記事リスト）---
       元: margin-right: 80px（btnDetailのスペース）
       スマホでは不要なので解除。下にボタン用の余白を確保 */
    .content-box__main {
        margin-right: 0;
        padding-bottom: 35px;
    }

    /* --- サイドバー ---
       スマホではfloatされないので全幅になるが、念のため明示 */
    .side {
        width: 100%;
    }

    /* --- テーブルの横スクロール対策 ---
       テーブルが画面幅を超える場合、横スクロール可能にする */
    .tNormal,
    .tCompany {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* --- Facebookプラグインの幅制御 ---
       サイドバー内のFBページウィジェットがはみ出す対策 */
    .fb-page,
    .fb-page iframe,
    .fb-page span {
        max-width: 100% !important;
    }
}