@charset "utf-8"; @font-face { font-family: 'hiraginokakugoW7'; src: url(font/HiraginoKakuGothic_W7.ttc)format("truetype"); } @font-face { font-family: 'HGMaruGothic'; src: url(font/HGMaruGothic.ttf)format("truetype"); } /*--------------------------------------------- スマホ用スタイルシート（ポップメニュー含む）　・全頁共通データを多く含んでいます。 ----------------------------------------------*/ /*------ 全般初期設定 ---------------------------*/ /*--------------------------------------------- パソコン用スタイルシート（Edge,ie11,Fox,Opera用）　・全頁共通データを多く含んでいます。 ----------------------------------------------*/ /*------ 全般初期設定 ---------------------------*/ #all { width: 100vw; margin: 0; font-family: "hiraginokakugoW1"; font-feature-settings: "palt"; } a { text-decoration: none; } html { font-size: calc(100% + 0.25vw); } /*---　解　説　---------------------------------- 　・#all=全体に対する指定（id指定場所:30行目内）　・min/max-windth ページの最大幅及び最小幅の固定　・margin 中央への固定　・font-family 文字種の指定(左から順番に適用) 　・font-feature-setting 文字詰めの設定：自動で詰める ----------------------------------------------*/ /*--------------------------------------------- ------- スマホ用css/パソコン用cssの切り替え -------*/ .phone-only { display: none; } /*---　解　説　---------------------------------- ・.res-phone=スマートフォン用のスタイルシート・.pc-only=パソコン用スタイルシート・解像度 768pxが切換ポイント -----------------------------------------------*/ .load-img { width: 100vw; height: 100vh; background-color: white; display: flex; justify-content: center; align-items: center; position: fixed; z-index: 3; } .top-space { height: 11vw; width: 100%; } /*-----------全体背景カラー----------------------*/ body { background-image: url(00_top/01_img/bg_img.svg); background-size: 3%; } /*--------------------------------------------- ------ ページトップ画像【福知山駐屯地】 ---------------*/ .title { width: 100vw; height: 6.7vw; margin: 0 auto 0; padding: 0; position: fixed; text-align: center; background-color: white; top: 0; z-index: 15; } .title img { width: 100%; margin: 0; } .f00_main { width: 100vw; margin: 0 auto; overflow: hidden; } /*------------------------------------------------------------- ---------　ページトップ画像の隠れる設定　---------------------------*/ .removable-header { position: fixed; translate: 0; transition: 1.5s; z-index: 10; } .removable-header.barHide { translate: 0 -10.5vw; transition: 1s; } /*---------------------------------------------------------- ----------------------メニューバー ----------------------------*/ .menu-container { margin-top: 6.6vw; height: 4vw; position: fixed; top: 0; z-index: 9; width: 100vw; background-color: rgb(70, 70, 70); } .menu-container>ul { margin: auto; padding: 1vw 0 1vw 0; display: flex; align-items: center; justify-content: center; } .menu-container>ul>li { height: 2vw; list-style: none; display: flex; justify-content: center; align-items: center; border-right: .1vw solid rgba(255, 255, 255, .7); font-family: "hiraginokakugoW7"; } .menu-container>ul>li>a { text-decoration: none; color: white; padding: auto; font-size: 1.5vw; } .menu0 { width: 20vw; } .menu1, .menu2, .menu3, .menu4, .menu5 { width: 14vw; padding: 0; } /*----　駐屯地紹介　------*/ .menu2 ul, .menu4 ul, .menu5 ul { position: absolute; background: rgba(30, 30, 30, .95); margin: 0; padding: .3em 1em; display: block; box-sizing: border-box; list-style: none; opacity: 0; transition: .4s; box-shadow: 0 0 1em rgba(0, 0, 0, .5); } .menu2 li p, .menu4 li p, .menu5 li p { color: white; margin: 0; font-size: 1.3vw; padding: .5em 0; } .menu2 li, .menu4 li, .menu5 li { border-right: none; border-bottom: .1em solid rgba(200, 200, 200, .8); justify-content: left; } .menu2 li:nth-of-type(4), .menu4 li:nth-of-type(8), .menu5 li:nth-of-type(6) { border-bottom: none; } .menu2 ul { margin-top: -15.3vw; } .menu2 ul.active { margin-top: 18.3vw; opacity: 1; transition: .5s; } .menu4 ul { margin-top: -29.5vw; } .menu4 ul.active { margin-top: 29.5vw; opacity: 1; transition: .5s; } .menu5 ul { margin-top: -24.9vw; } .menu5 ul.active { margin-top: 24.9vw; opacity: 1; transition: .5s; } .now-menu { transition: .3s; } /*----------------------------------------------------- フッター情報 -------------------------------------------------------*/ .footer { width: 100vw; height: auto; } .copyright-box { width: 100vw; background-color: rgba(30, 30, 30, 1); color: white; text-align: center; box-shadow: 0 0 .5vw rgba(0, 0, 0, .5); } .copyright-box a { font-weight: bold; color: white; } .foot-top { padding-top: 1vw; background: linear-gradient(to top, rgba(30, 30, 30, 1), rgba(255, 255, 255, .2)); } .foot01, .foot02, .foot03 { font-size: 1.4vw; margin: 2vw; } .foot04 { margin-top: 1vw; } .foot04, .foot05 { font-size: 1.4vw; margin-bottom: .5vw; } .foot06 { margin-top: 1vw; font-size: 1.3vw; padding-bottom: 1vw; } .foot07 { margin-top: .5vw; font-size: 2.5vw; font-family: "hiraginokakugoW7"; } .foot07 span { margin: 1vw; } .foot08, .foot09 { margin: 1vw; font-size: 1.4vw; } /*-------------------------------------------------------------------------------- 　最大サイズ到達時に適用 ----------------------------------------------------------------------------------*/ @media screen and (min-device-width: 1040px) { /*------ 全般初期設定 ---------------------------*/ .top-space { height: 110px; } .title { height: 67px; } .title img { width: 1000px; } /*------------------------------------------------------------- ---------　ページトップ画像の隠れる設定　---------------------------*/ .removable-header.barHide { transform: translateY(-105px); } .menu-container { margin-top: 66px; height: 40px; } .menu-container>ul { padding: 10px 0 10px 0; } .menu-container>ul>li { height: 20px; font-size: 15px; border-right: 1px solid rgba(255, 255, 255, .7); } .menu-container>ul>li>a { font-size: 15px; } .menu0 { width: 200px; } .menu1, .menu2, .menu3, .menu4, .menu5 { width: 140px; } /*----　駐屯地紹介　------*/ .menu2 li p, .menu4 li p, .menu5 li p { font-size: 13px; } .menu2 ul { margin-top: -153px; } .menu2 ul.active { margin-top: 183px; } .menu4 ul { margin-top: -295px; } .menu4 ul.active { margin-top: 313px; } .menu5 ul { margin-top: -249px; } .menu5 ul.active { margin-top: 249px; } /*----------------------------------------------------- フッター情報 -------------------------------------------------------*/ .copyright-box { box-shadow: 0 0 5px rgba(0, 0, 0, .5); } .foot-top { padding-top: 10px; } .foot01, .foot02, .foot03 { font-size: 14px; margin: 20px; } .foot04 { margin-top: 10px; } .foot04, .foot05 { font-size: 14px; margin-bottom: 20px; } .foot06 { margin-top: 10px; font-size: 13px; padding-bottom: 10px; } .foot07 { margin-top: 20px; font-size: 25px; } .foot07 span { margin: 10px; } .foot08, .foot09 { margin: 10px; font-size: 14px; } } /*-------------------------------------------------------------------------------- 　最大サイズ到達時に適用 ----------------------------------------------------------------------------------*/ @media screen and (min-device-width: 1921px) { /*------ 全般初期設定 ---------------------------*/ .top-space { height: 140px; } .title { height: 85.76px; } .title img { width: 1280px; } .menu-container { margin-top: 84.48px; height: 51.2px; } .menu-container>ul { padding: 13px 0 13px 0; } .menu-container>ul>li { height: 25.6px; font-size: 19.2px; border-right: 1.3px solid rgba(255, 255, 255, .7); } .menu-container>ul>li>a { font-size: 19.2px; } .removable-header.barHide { transform: translateY(-134.4px); } .menu0 { width: 256px; } .menu1, .menu2, .menu3, .menu4, .menu5 { width: 179.2px; } /*----　駐屯地紹介　------*/ .menu2 li p, .menu4 li p, .menu5 li p { font-size: 16.64px; } .menu2 ul { margin-top: -195.84px; } .menu2 ul.active { margin-top: 234.24px; } .menu4 ul { margin-top: -377.6px; } .menu4 ul.active { margin-top: 400.6px; } .menu5 ul { margin-top: -318.72px; } .menu5 ul.active { margin-top: 318.72px; } /*----------------------------------------------------- フッター情報 -------------------------------------------------------*/ .copyright-box { box-shadow: 0 0 6.4px rgba(0, 0, 0, .5); } .foot-top { padding-top: 13px; } .foot01, .foot02, .foot03 { font-size: 18px; margin: 25.6px; } .foot04 { margin-top: 13px; } .foot04, .foot05 { font-size: 18px; margin-bottom: 25.6px; } .foot06 { margin-top: 13px; font-size: 16.6px; padding-bottom: 13px; } .foot07 { margin-top: 25.6px; font-size: 32px; } .foot07 span { margin: 13px; } .foot08, .foot09 { margin: 13px; font-size: 18px; } }