@import url('https://fonts.googleapis.com/css2?family=Noto+Serif:wght@400;700&display=swap'); @font-face { font-family: 'LocalNotoSerif'; src: url('/img/font/notoserif-variablefont.ttf') format('truetype-variations'); font-weight: 400 700; font-style: normal; font-display: swap; } /* ========================================================================== 共通 ========================================================================== */ html body { font-family: "Noto Serif", "LocalNotoSerif", "Times New Roman", "Georgia", serif; min-width: 0; overflow-x: hidden; } /* -------------------------------------------------------------------------- ヘッダー -------------------------------------------------------------------------- */ /* * レイアウト */ /* * メニュー項目 */ #header nav > ul li:nth-child(1) > a > img, #header nav > ul li:nth-child(2) > a > img, #header nav > ul li:nth-child(3) > a > img, #header nav > ul li:nth-child(4) > a > img { max-width: 100%; } #header nav > ul li a { font-weight: 700; text-decoration: none; } /* * Languageボタン */ /* -------------------------------------------------------------------------- フッター -------------------------------------------------------------------------- */ /* * レイアウト */ /* * コンテンツ */ /* 連絡先名 */ /* 営業時間等 */ /* * パンフレット */ /* * コピーライト */ /* -------------------------------------------------------------------------- トップへ戻るボタン -------------------------------------------------------------------------- */ /* ========================================================================== トップページ ========================================================================== */ /* -------------------------------------------------------------------------- メインビジュアルスライドショー -------------------------------------------------------------------------- */ /* * スライドショー */ /* * スライド上のバナー画像 */ /* * スクロールダウンボタン */ /* -------------------------------------------------------------------------- メッセージエリア -------------------------------------------------------------------------- */ /* -------------------------------------------------------------------------- コンセプト -------------------------------------------------------------------------- */ /* * レイアウト */ /* * 見出し2 */ #concept_area h2 { display: grid; /* 4つの画像をそれぞれ1行ずつに割り当てる */ grid-template-rows: repeat(4, auto); /* 垂直方向（行の高さ内）で中央揃え */ align-items: center; /* 行間の隙間が必要ならここで調整 */ row-gap: 2.5rem; } #concept_area h2 img { /* 画像が親の幅いっぱいに広がらないよう、元のサイズを維持 */ width: fit-content; display: block; } /* 階段状に10%ずつずらしていく設定 */ #concept_area h2 img:nth-child(1) { margin-left: 25%; } #concept_area h2 img:nth-child(2) { margin-left: 35%; } #concept_area h2 img:nth-child(3) { margin-left: 45%; } #concept_area h2 img:nth-child(4) { margin-left: 55%; } /* * テキストエリア */ /* -------------------------------------------------------------------------- 無限スライダー -------------------------------------------------------------------------- */ /* -------------------------------------------------------------------------- お知らせ -------------------------------------------------------------------------- */ /* * レイアウト */ /* * 見出し2 */ /* * 新着リスト */ /* -------------------------------------------------------------------------- 公園施設案内 -------------------------------------------------------------------------- */ /* * レイアウト */ /* * 左側 */ /* 見出し */ /* * 右側 */ /* -------------------------------------------------------------------------- アクセス -------------------------------------------------------------------------- */ /* * レイアウト */ /* * 見出し */ /* * 左側 */ /* * 右側 */ /* -------------------------------------------------------------------------- パララックスデザイン -------------------------------------------------------------------------- */ /* * レイアウト */ /* * パララックス部分 */ /* -------------------------------------------------------------------------- 関連リンク -------------------------------------------------------------------------- */ /* * レイアウト */ /* ========================================================================== 大メニューページ ========================================================================== */ /* -------------------------------------------------------------------------- 下層ページ共通 -------------------------------------------------------------------------- */ /* * レイアウト */ /* * パンくず */ /* * 見出し1 */ /* ========================================================================== 小メニューページ ========================================================================== */ /* ========================================================================== 最終ページ ========================================================================== */ /* ========================================================================== レスポンシブここから ========================================================================== */ /* -------------------------------------------------------------------------- 1099px以下ここから -------------------------------------------------------------------------- */ @media all and (max-width: 1099px) { /* * フッター */ /* * コンセプト */ #concept_area h2 img:nth-child(1) { margin-left: 5vw; } #concept_area h2 img:nth-child(2) { margin-left: 10vw; } #concept_area h2 img:nth-child(3) { margin-left: 15vw; } #concept_area h2 img:nth-child(4) { margin-left: 20vw; } } /* -------------------------------------------------------------------------- 1099px以下ここまで -------------------------------------------------------------------------- */ /* -------------------------------------------------------------------------- 991px以下ここから -------------------------------------------------------------------------- */ @media all and (max-width: 991px) { /* * ヘッダー */ /* * フッター */ /* * スライドショー */ /* * コンセプト */ /* * お知らせ */ /* * 公園施設案内 */ /* * アクセス */ /* * 関連リンク */ } /* -------------------------------------------------------------------------- 991px以下ここまで -------------------------------------------------------------------------- */ /* -------------------------------------------------------------------------- 767px以下ここから -------------------------------------------------------------------------- */ @media all and (max-width: 767px) { /* * スライド */ /* * メッセージエリア */ /* * コンセプト */ #concept_area h2 img { height: 5.5vw !important; width: auto !important; } /* * 公園施設案内 */ /* * アクセス */ /* * 下層 */ } /* -------------------------------------------------------------------------- 767px以下ここまで -------------------------------------------------------------------------- */ /* -------------------------------------------------------------------------- 599px以下ここから -------------------------------------------------------------------------- */ @media all and (max-width: 599px) { /* * ヘッダー */ /* * フッター */ /* * スライド */ /* * コンセプト */ #concept_area h2 { row-gap: 1.5em; } #concept_area h2 img { height: 6.5vw !important; width: auto !important; margin-left: 0 !important; } /* * お知らせ */ /* * 公園施設案内 */ /* * アクセス */ } /* -------------------------------------------------------------------------- 599px以下ここまで -------------------------------------------------------------------------- */ /* -------------------------------------------------------------------------- 480px以下ここから -------------------------------------------------------------------------- */ @media all and (max-width: 480px) { /* * ヘッダー */ /* * フッター */ /* * コンセプト */ /* * お知らせ */ /* * 公園施設案内 */ /* * アクセス */ /* * 関連リンク */ /* * フッター */ } /* -------------------------------------------------------------------------- 480px以下ここから -------------------------------------------------------------------------- */ /* -------------------------------------------------------------------------- 一時的に非表示 -------------------------------------------------------------------------- */