/* ============================================================ 米の儀助 カスタムCSS v2 HTMLソース（PC・SP両方）から逆引き再構築 ============================================================ */ /* ============================================================ ヘッダー #header ============================================================ */ #header { position: relative; /* #switch の absolute 基準 */ width: 100%; background: #fff; border-bottom: 1px solid #ddd; padding: 10px 20px; display: flex; align-items: center; justify-content: space-between; box-sizing: border-box; z-index: 100; } /* ロゴ */ h1.logo { margin: 0; padding: 0; line-height: 1; } h1.logo img { display: block; width: 290px; height: auto; } /* ハンバーガーボタン: PC では非表示 */ #switch { display: none; } #switch img { display: block; width: 40px; height: 40px; } /* デフォルト: ハンバーガー(off)を表示 */ #switch img.on { display: none; } #switch img.off { display: block; } /* active 時: バツ(on)を表示 */ #switch.active img.on { display: block; } #switch.active img.off { display: none; } /* PC ナビゲーション */ #navi { flex: 1; display: flex; justify-content: flex-end; } ul.header_nav2 { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; } ul.header_nav2 .fs-pt-menu__link { display: block; padding: 6px 14px; text-decoration: none; color: #333; font-size: 13px; white-space: nowrap; } ul.header_nav2 .fs-pt-menu__link:hover { opacity: 0.7; } /* ============================================================ メインイメージ（Slick フェードスライダー） ※ slick.css が で読み込まれていないため slick の動作に必要な CSS をここに記述する ============================================================ */ /* --- slick コア CSS（slick.css の代替） --- */ #main_image .slick-list { position: relative; display: block; overflow: hidden; margin: 0; padding: 0; } #main_image .slick-track { position: relative; display: block; top: 0; left: 0; } /* 未初期化スライドを非表示 */ #main_image .slick-slide { display: none; float: left; min-height: 1px; /* --- 背景画像 --- */ background-size: cover; background-position: center center; /* --- フェード制御 --- 非アクティブスライドの opacity:0 をCSSで明示。 slick は アクティブスライドに inline style で opacity:1 を付与するため、 inline style がCSS宣言を上書きして active のみ表示される。 transition はここで定義することで fade が機能する。 */ opacity: 0; transition: opacity 1000ms linear; } /* 初期化後は表示 */ #main_image.slick-initialized .slick-slide { display: block; } /* --- スライド高さの確保 --- .opa を absolute にするとスライドが高さを失うため ::before で opa 画像の縦横比（1300:565）を維持した高さを作る */ #main_image .slick-slide { position: relative; } #main_image .slick-slide::before { content: ''; display: block; padding-top: calc(565 / 1300 * 100%); /* = 43.46% 1300:565の比率 */ } /* --- .opa 共通ベース --- 各スライドで個別に位置指定するため、ここでは絶対配置のみ設定。 visibility: hidden で作業中は全て非表示。 位置が確定したスライドから個別ルールで visible に戻す。 */ #main_image img.opa { position: absolute; display: block; width: 100%; /* スライド幅いっぱい。必要なら px や % で個別指定 */ height: auto; visibility: hidden; /* ← 全完成後に visible へ変更 */ } /* ============================================================ opa 個別配置 top / left / right / bottom / width をスライドごとに調整。 完成したら visibility: visible; のコメントを外す。 座標の基準: スライド左上が (top:0, left:0) 中央縦 = top: 50% ============================================================ */ /* 1枚目 (.image01): 左上 */ #main_image .image01 img.opa { top: 0; left: 0; /* visibility: visible; */ /* ← 位置OK になったら外す */ } /* 2枚目 (.image02): 中央より微妙に上 */ #main_image .image02 img.opa { top: 35%; /* ← 50% が中央。小さくすると上へ */ left: 0; /* visibility: visible; */ /* ← 位置OK になったら外す */ } /* 3枚目 (.image03): 未設定（後で追加） */ #main_image .image03 img.opa { top: 0; left: 0; /* visibility: visible; */ } /* 4枚目 (.image04): 未設定（後で追加） */ #main_image .image04 img.opa { top: 0; left: 0; /* visibility: visible; */ } /* ============================================================ コンテンツエリア ============================================================ */ .site_message { font-size: 12px; padding: 6px 15px; background: #f5f5f5; border-bottom: 1px solid #e0e0e0; } .side_register { padding: 12px; background: #f9f9f9; border: 1px solid #e5e5e5; margin-bottom: 15px; font-size: 13px; } .side_register .regist, .side_register .mypage, .side_register .login { margin-bottom: 8px; } .side_register .regist img, .side_register .mypage img, .side_register .login img { max-width: 100%; height: auto; } .side_register .message { font-size: 12px; color: #666; margin-bottom: 10px; line-height: 1.6; } .side_register p.label { font-size: 12px; font-weight: bold; color: #444; margin: 10px 0 5px; } .bnrbox2 { margin: 15px 0; text-align: center; } .bnrbox2 figure { margin: 0; } .bnrbox2 figure img { max-width: 100%; height: auto; display: block; } /* ============================================================ SP対応 (max-width: 768px) ============================================================ */ @media screen and (max-width: 768px) { /* ヘッダー: 右側に #switch 分の余白を確保 */ #header { padding: 10px 60px 10px 15px; } h1.logo img { width: 200px; } /* ハンバーガーボタンを右上に絶対配置 */ #switch { display: block; position: absolute; right: 12px; top: 50%; transform: translateY(-50%); z-index: 200; text-decoration: none; } /* ナビをヘッダー直下にドロップダウン表示 ※ JS の slideToggle が display:none/block を制御する */ #navi { display: none; /* JS が上書き */ position: absolute; top: 100%; left: 0; width: 100%; background: #fff; z-index: 999; border-top: 1px solid #eee; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); box-sizing: border-box; } /* SP ナビを縦並びに */ ul.header_nav2 { flex-direction: column; width: 100%; } ul.header_nav2 .fs-pt-menu__item { width: 100%; border-bottom: 1px solid #f0f0f0; } ul.header_nav2 .fs-pt-menu__link { padding: 13px 15px; font-size: 14px; white-space: normal; } }