﻿/*----------------------------------------------------------
	<header>ｿｰｽの基礎設定
------------------------------------------------------------*/
header {
	top: 0px;			/*--上からの位置を指定--*/
	left: 0px;			/*--左からの位置を指定--*/
	padding: 0;			/*--上下の余白を設定--*/
	margin: 0 auto;			/*--要素自体中央右寄せに設定--*/
	margin-left: 0px;		/*　外側の余白(左）　*/
	margin-right: 0px;		/*　外側の余白(右）　*/
	Z-index: 10;
}
/*	ﾃﾞﾊﾞｲｽ縦向きのﾍｯﾀﾞｰ内表示	 */
@media screen and (orientation:portrait){
header {
	margin: 0px;			/*　外側の余白なし　*/
}}
/*--------------------------------------------------------
	<footer>ｿｰｽの基礎設定
----------------------------------------------------------*/
footer {
	width: 100%;
	color: white; 					/*	文字の色	*/
	background-color: rgba( 0, 0, 0, 1.0 );	/*	背景色を黒にする	*/
	border-top: solid 3px white;			/*	上側に線を引く	*/
	margin: 0 auto;				/*　要素自体中央に設定　*/
}
footer a {
	text-decoration:none;	/*	ﾃｷｽﾄの装飾(初期値)	*/
	color: white; 		/*	文字の色	*/
	font-size: 12px; 	/*	文字の大きさ	*/
	font-weight: 600;	/*	文字の太さ	*/
}

@media screen and (max-width: 782px) {		/*表示幅782px以下で可変*/
footer {
	font-size: 11px;
}}
@media screen and (max-width: 420px) {		/*表示幅420px以下で可変*/
footer {
	font-size: 10px;
}
footer a {
	font-size: 9px;
}}
/*	ﾃﾞﾊﾞｲｽ縦向きのﾍｯﾀﾞｰ内表示	 */
@media screen and (orientation:portrait){
footer {
	margin: 0px;			/*　外側の余白なし　*/
}}
/*--------------------------------------------------------
	<header>ｿｰｽ内の<ul>ｿｰｽﾌﾚｯｸｽﾎﾞｯｸｽ設定
----------------------------------------------------------*/
ul.logo_nav {
	display: flex;
		display: -webkit-flex; /* ★Safari、Chromeブラウザに対応★ */
		display: -ms-flexbox; /* ★IEブラウザに対応★ */
	justify-content: center;
		-webkit-box-pack: center; /* ★Safari、Chromeブラウザに対応★ */
		-ms-flex-pack: center; /* ★IEブラウザに対応★ */
	align-items: center;
		-webkit-box-align: center; /* ★Safari、Chromeブラウザに対応★ */
		-ms-flex-align: center; /* ★IEブラウザに対応★ */
}
ul.logo_nav img{
	width: 90%;
}
ul.logo_nav li {
	flex-grow: 1;			/*　伸長率を指定　*/
		-webkit-box-flex: 1; /* ★Safari、Chromeブラウザに対応★ */
		-ms-flex-positive: 1; /* ★IEブラウザに対応★ */
}
ul.logo_nav li:nth-of-type(1) {
	padding-left: 10px;
}
ul.logo_nav li:nth-of-type(2) {
}
ul.logo_nav li:nth-of-type(3) {
}
ul.logo_nav li:nth-of-type(4) {
	max-width: 110px;
	padding-right: 10px;
}
ul.logo_nav li:nth-of-type(5) {
	max-width: 110px;
	padding-right: 10px;
}
ul.logo_nav li:nth-of-type(6) {
	max-width: 110px;
	padding-right: 10px;
}
ul.logo_nav li:nth-of-type(7) {
}
ul.logo_nav li:nth-of-type(7) img{
	border: solid 2px white;
	border-radius: 5px;
	max-height: 20%;
}
ul.logo_nav li:nth-of-type(8) img{
	height: 80%;
	max-width: 130px;
}

ul.logo_nav li img.logo-sp {
	display: none;
}
/*ﾃﾞﾊﾞｲｽ縦向きのﾍｯﾀﾞｰ表示 */
@media screen and (orientation:portrait){
ul.logo_nav li img.logo-pc{
	display: none;
}
ul.logo_nav li img.logo-sp {
	display: block;
}
ul.logo_nav img{
	width: 95%;
}
ul.logo_nav li:nth-of-type(1) {
	padding: 0 auto;
}
ul.logo_nav li:nth-of-type(2) {
}
ul.logo_nav li:nth-of-type(3) {
}
ul.logo_nav li:nth-of-type(4) {
	display: none;
}
ul.logo_nav li:nth-of-type(5) {
	display: none;
}
ul.logo_nav li:nth-of-type(6) {
	display: none;
}
ul.logo_nav li:nth-of-type(7) {
	padding: 0 auto;
}
ul.logo_nav li:nth-of-type(7) img {
	border: solid 2px white;
	border-radius: 3px;
	max-height: 30%;
}
ul.logo_nav li:nth-of-type(8) img {
}}
/*--------------------------------------------------------
	<footer>ｿｰｽ内の<ul>ｿｰｽﾌﾚｯｸｽﾎﾞｯｸｽ設定
----------------------------------------------------------*/
ul.foot {
	display: flex;
		display: -webkit-flex; /* ★Safari、Chromeブラウザに対応★ */
		display: -ms-flexbox; /* ★IEブラウザに対応★ */
	align-items: flex-end;
		-webkit-box-align: end; /* ★Safari、Chromeブラウザに対応★ */
		-ms-flex-align: end; /* ★IEブラウザに対応★ */
	text-align: center;
		-ms-flex-align: center; /* ★IEブラウザに対応★ */
	margin: 0 auto;
}
ul.foot li {
	border-bottom: solid 2px #fff;		/*	下側に線を引く	*/
	margin-bottom: 3px;
}
ul.foot li:nth-of-type(1) {
	width: 100%;	/*右側のﾌﾚｯｸｽﾎﾞｯｸｽ幅を引いた左側のﾌﾚｯｸｽﾎﾞｯｸｽ幅を幅100%で表示*/
}
ul.foot li:nth-of-type(2) {
	width: 130px;	/*右側のﾌﾚｯｸｽﾎﾞｯｸｽ幅を指定*/
}
ul.foot img {
	width: 95%;	/*ﾌﾚｯｸｽﾎﾞｯｸｽ内の画像はﾎﾞｯｸｽ幅95%で表示*/
}
/*表示幅420px以下で右側のﾌﾚｯｸｽﾎﾞｯｸｽ幅を可変*/
@media screen and (max-width: 420px) {
ul.foot li:nth-of-type(2) {
	width: 70px;	
}}



/*--------------------------------------------------------
	スクロールしたらで表示するメニューボタンの設定
----------------------------------------------------------*/
#menuBtn {
	position: fixed;	/*--位置を固定(fixed)する--*/
	top: 3px;		/*--上からの位置を指定--*/
	right: 0.3%;		/*--右からの位置を指定--*/
	width: 8%;	/*--画像を挿入するＢＯＸの横幅を指定--*/
	max-width: 130px;
}
#menuBtn img{
	max-width: 98%;	/*--画像の横幅を指定--*/
	display: block;			/*　メニューロゴを表示する　*/
}
@media screen and (orientation:portrait){
#menuBtn {
	width: 16%;
}}
/*--------------------------------------------------------
	サイドナビ用グローバルメニュー表示設定
----------------------------------------------------------*/
#black-bg {
	position: fixed;
	left: 0;
	top: 0;
	width: 100vw;
	height: 100vh;
	z-index: 30;
	background-color: rgba(0,0,0,0.60);
	opacity: 0;
	visibility: hidden;		/*普段は表示させない*/
	transition: all .6s;
	cursor: pointer;
}
#nav-close {
	position: fixed;
	right: 22px;
	top: 5px;
	width: 48px;
	height: 48px;
	z-index: 200;
	opacity: 0;
	cursor: pointer;
	visibility: hidden;		/*普段は表示させない*/
	transition: all .3s;
}
@media screen and (orientation:portrait){
#nav-close {
	right: 15px;
}}
/* ジャバスクリプトオンクリックで表示させる */
.nav-open #black-bg , .nav-open #nav-close {
	opacity: .8;
	visibility: visible;
}
.nav-open #global-nav , .nav-open .iframe-nav{
	right: 0px;
}

#global-nav {
	justify-content: center;
		-webkit-box-pack: center; /* ★Safari、Chromeブラウザに対応★ */
		-ms-flex-pack: center; /* ★IEブラウザに対応★ */
	position: fixed;
	right: -400px; /* これで隠れる */
	top: 0;
	width: 96%;
	max-width: 380px; /* スマホに収まるくらい */
	height: 100vh;
	padding: 5px;
	margin: 0 auto;			/*　ｲﾒｰｼﾞの位置　*/
	background-color: rgba(0,0,0,0.50);
	transition: all .6s;
	z-index: 50;
	line-height: 1.4em;		/*　行間の調整　*/
	overflow-y: auto; /* メニューが多くなったらスクロールできるように */
	scrollbar-width: none; /* スクロールバー非表示（★Firafoxに対応★） */
		-ms-overflow-style: none; /* スクロールバー非表示（★IEブラウザに対応★） */
}
#global-nav::-webkit-scrollbar {
	display: none; /* スクロールバー非表示（★Safari、Chromeブラウザに対応★） */
}
#global-nav a {
	color: white;			/*　文字の色　*/
}
#global-nav img {
	margin: 0 auto;			/*　ｲﾒｰｼﾞの位置　*/
	height: auto;
}
#global-nav iframe {
	width:100%;
	height:100%;
	margin-bottom: 20px;			/*　ｲﾒｰｼﾞの位置　*/
	overflow: hidden;
}
/*--------------------------------------------------------
	グローバルメニュー内リストの書式設定
----------------------------------------------------------*/
#navlist-title1 img , #navtitle img {
	margin-left:0px;
	width:80%;
}
.menulist {
	color: white;			/*　文字の色　*/
	font-size: 17px;		/*　文字のｻｲｽﾞ　*/
	font-weight: bold;		/*　文字の太さ　*/
	background: rgba(51,153,255,0.85);	/*　青色(透過)	*/
	list-style: none;	/*ﾘｽﾄｿｰｽの装飾を無効にする*/
}
.menulist li{
	background: rgba(51,153,255,0.85);	/*　青色(透過)	*/
	margin-top: 2px;		/*　外側の余白(上)　*/
	margin-bottom: 0px;		/*　外側の余白(下)　*/
}
.menulist p {
	font-size: 11px;		/*　文字のｻｲｽﾞ　*/
	font-weight: normal;		/*　文字の太さ　*/
}
.menulist a {
	color: white; 			/*　文字の色　*/
	text-shadow: 1px 1px #000;
	line-height: 1.3em;
	margin: 0 auto;			/*　ｲﾒｰｼﾞの位置　*/
	padding: 5px;			/*　内側の余白　*/
	display: block;			/* 項目内全域をリンク可能にする */
}
.menulist a:hover {
	color: yellow;			/* マウスが載ったときの文字色(黄色) */
	background: darkblue;		/* マウスが載ったときの背景色(青色) */
}
.menulist li img {
	width: 100%;
	margin: 0 auto;			/*　ｲﾒｰｼﾞの位置　*/
}
#global-nav p.page_title {
	color: white; 			/*　文字の色　*/
	font-size: 18px;		/*　文字のｻｲｽﾞ　*/
	font-weight: bold;		/*　文字の太さ　*/
}
#global-nav .page_menulist {	/*--メニューリスト--*/
	color: blue;			/*　文字の色　*/
	font-size: 17px;		/*　文字のｻｲｽﾞ　*/
	font-weight: normal;		/*　文字の太さ　*/
	background: rgba(255,255,255,0.85);	/*　白色(透過)	*/
}
#global-nav .page_menulist a {
	color: blue; 			/*　文字の色　*/
	background: white;		/*　白色	*/
	line-height: 1.3em;
	margin-bottom: 2px;		/*　外側下余白　*/
	padding: 5px;			/*　内側の余白　*/
	display: block;			/* 項目内全域をリンク可能にする */
}
#global-nav .page_menulist p {
	color: black;			/*　文字の色　*/
	font-size: 11px;		/*　文字のｻｲｽﾞ　*/
	font-weight: normal;		/*　文字の太さ　*/
}
#global-nav .page_menulist a:hover {
	background: yellow;		/* マウスが載ったときの背景色(黄色) */
}
#global-nav .page_menulist li img {
	width: 100%;
	margin: 0 auto;			/*　ｲﾒｰｼﾞの位置　*/
}
.nav-foot {
	text-align: center;
	color: white;			/*　文字の色　*/
	padding-bottom: 20px;			/*　ｲﾒｰｼﾞの位置　*/
}
#navlist-foot1 a {
	color: white;			/*　文字の色　*/
	font-weight: bold;		/*　文字の太さ　*/
}
/*--------------------------------------------------------
	グローバルメニューのリンク先内容をＣＳＳで設定
----------------------------------------------------------*/
#navlist-0 p:before { content: ""; }
	#nav00:before { content: "ホームページトップ"; } #nav00 p:after { content: "※愛媛地本のトップページに移動します。"; }
	#nav01:before { content: "知り合いを紹介する"; } #nav01 p:after { content: "※是非、ご紹介ください。"; }
	#nav02 { display: none; }
	#nav03 { display: none; }
	#nav04 { display: none; }
	#nav05:before { content: "強制リロード"; } #nav05 p:after { content: "※情報が古いと感じたら、こちらをタップ！"; }
#navlist-1 p:before { content: "▼　最新の情報を確認する"; }
	#nav11:before { content: "新着情報"; } #nav11 p:after { content: "※ＮＥＷ！！"; }
	#nav12:before { content: "合格発表"; } #nav12 p:after { content: "※頑張った結果がここにある！"; }
	#nav13:before { content: "予備自衛官招集案内"; } #nav13 p:after { content: "※参加できる日を確認して下さい！"; }
	#nav14:before { content: "イベント情報"; } #nav14 p:after { content: "※見逃さないようにcheckしてみよう♡"; }
	#nav15:before { content: "イベントギャラリー"; } #nav15 p:after { content: "※イベントの思い出を！！"; }
	#nav16 { display: none; }
	#nav17 { display: none; }
	#nav18 { display: none; }
	#nav19 { display: none; }

#navlist-2 p:before { content: "▼　自衛隊が気になるんです"; }
	#nav21:before { content: "自衛隊地方協力本部の任務と組織"; } #nav21 p:after { content: "※自衛隊と地域の懸け橋となります"; }
	#nav22:before { content: "自衛隊の魅力"; } #nav22 p:after { content: "※充実の福利厚生etc"; }
	#nav23:before { content: "採用案内"; } #nav23 p:after { content: "※豊富な選択肢があるんです！"; }
	#nav24:before { content: "説明会情報"; } #nav24 p:after { content: "※聞けば納得の情報満載！！"; }
	#nav25:before { content: "先輩からのメッセージ"; } #nav25 p:after { content: "※身近な先輩の声を聞こう！"; }
	#nav26:before { content: "はじめての防衛白書;" } #nav25 p:after { content: "防衛省自衛隊の取り組みがわかりやすく記載されております"; }
	#nav27:before { content: "自衛隊図鑑;" } #nav27 p:after { content: "※陸・海・空自衛官の様々な仕事・装備品について紹介しています"; }
	#nav28 { display: none; }
	#nav29 { display: none; }
#navlist-3 p:before { content: "▼　企業及び教育機関の皆様へ"; }
	#nav31:before { content: "企業の皆様へ"; } #nav31 p:after { content: "※皆様のご協力に感謝いたします"; }
	#nav32:before { content: "退職自衛官の雇用"; } #nav32 p:after { content: "※人材がそろっています"; }
	#nav33:before { content: "予備自衛官の制度"; } #nav33 p:after { content: "※雇用する企業への支援も充実しています"; }
	#nav34:before { content: "入札関連情報"; } #nav34 p:after { content: "※受注してみませんか？"; }
	#nav35:before { content: "総合的な学習の時間"; } #nav35 p:after { content: "※自衛隊の職場を体験してみませんか？"; }
	#nav36 { display: none; }
	#nav37 { display: none; }
	#nav38 { display: none; }
	#nav39 { display: none; }
#navlist-4 p:before { content: "▼　愛媛地本を紹介します"; }
	#nav41:before { content: "窓口のご案内"; } #nav41 p:after { content: "※貴方の地域にあるよ！"; }
	#nav42:before { content: "本部長の紹介"; } #nav42 p:after { content: "※ご挨拶申し上げます"; }
	#nav43:before { content: "愛媛地本キャラクター"; } #nav43 p:after { content: "※動画もあるよ！"; }
	#nav44:before { content: "地本かわら版"; } #nav44 p:after { content: "※四半期毎の機関誌です。"; }
	#nav45:before { content: "防衛モニター"; } #nav45 p:after { content: "※客観的な目線でご意見をいただきます"; }
	#nav46 { display: none; }
	#nav47 { display: none; }
	#nav48 { display: none; }
	#nav49 { display: none; }
#navlist-5 p:before { content: "▼　愛媛地本の遊べるコーナー"; }
	#nav51:before { content: "運試しコーナー"; } #nav51 p:after { content: "※あなたの運命を左右するものではありません！"; }
	#nav52:before { content: "ぬりえコーナー"; } #nav52 p:after { content: "※オンリーワンの絵画を完成させよう！"; }
	#nav53 { display: none; }
	#nav54 { display: none; }
	#nav55 { display: none; }
	#nav56 { display: none; }
	#nav57 { display: none; }
	#nav58 { display: none; }
	#nav59 { display: none; }
#navlist-6 p:before { content: "▼　Youtube自衛隊ちゃんねる"; }
	#nav61:before { content: "防衛省チャンネルmodchannel"; } #nav61 p:after { content: " "; }
	#nav62:before { content: "陸上自衛隊 広報チャンネル"; } #nav62 p:after { content: " "; }
	#nav63:before { content: "防衛省 海上自衛隊 公式チャンネル"; } #nav63 p:after { content: " "; }
	#nav64:before { content: "航空自衛隊チャンネル (JASDF Official Channel)"; } #nav64 p:after { content: " "; }
	#nav65:before { content: "自衛官募集チャンネル"; } #nav65 p:after { content: " "; }
	#nav66 { display: none; }
	#nav67 { display: none; }
	#nav68 { display: none; }
	#nav69:before { content: "ボーエもんの防衛だもん"; } #nav59 p:after { content: "～よくわかる自衛隊～"; }
#navlist-7 p:before { content: "▼　自衛隊コンテンツ"; } #navlist-7 p:after { content: "※外部サイトに移動します"; }
	#nav71:before { content: "ＬＩＦＥ ＨＡＣＫ"; } #nav71 p:after { content: "※そのとき自分を守る４８のワザ"; }
	#nav72:before { content: "教えて先輩！Ｑ＆Ａ"; } #nav72 p:after { content: "※先輩自衛官がお答えします"; }
	#nav73:before { content: "陸上自衛隊ゲームサイト"; } #nav73 p:after { content: "※モバイル端末では、ご利用できません"; }
	#nav74:before { content: "海上自衛隊キッズ"; } #nav74 p:after { content: "※知って、遊んで、作ってみよう"; }
	#nav75:before { content: "航空自衛隊キッズワールド"; } #nav75 p:after { content: "※ぬりえやオリジナルゲームで遊ぼう"; }
	#nav76:before { content: "航空自衛隊ジュニアｗｏｒｌｄ"; } #nav76 p:after { content: "※航空自衛隊クイズもあるよ"; }
	#nav77:before { content: "数字で見る防衛省自衛隊"; } #nav77 p:after { content: "※自衛隊のいろんなことを数字で見てみよう"; }
	#nav78:before { content: "まんがで読む防衛白書"; } #nav78 p:after { content: "※マンガで分かりやすく説明します"; }
	#nav79:before { content: "自衛隊検定"; } #nav79 p:after { content: "※防衛省自衛隊への理解度を写真でチェック！"; }
#navlist-8 p:before { content: "▼　関連サイトへのリンクはこちら"; }
	#nav81:before { content: "防衛省ホームページ"; } #nav81 p:after { content: ""; }
	#nav82:before { content: "統合幕僚監部ホームページ"; } #nav82 p:after { content: ""; }
	#nav83:before { content: "陸上自衛隊ホームページ"; } #nav83 p:after { content: ""; }
	#nav84:before { content: "海上自衛隊ホームページ"; } #nav84 p:after { content: ""; }
	#nav85:before { content: "航空自衛隊ホームページ"; } #nav85 p:after { content: ""; }
	#nav86 { display: none; }
	#nav87 { display: none; }
	#nav88 { display: none; }
	#nav89:before { content: "もっと見る▶▶"; } #nav89 p:after { content: ""; }
	
#navlist-foot1 , #navlist-foot2 , #navlist-foot3 {
	text-align: center;
	display: block;			/* 項目内全域をリンク可能にする */
}
.nav-foot li:hover , #navlist-foot1:hover , #navlist-foot3:hover{
	background: darkblue;		/* マウスが載ったときの背景色(青色) */
	margin-left:0px;
}
#navlist-foot1:before { content: "お問い合わせは[愛媛ちほん]へ"; } #navlist-foot1 p:after { content: "ＴＥＬ：０８９－９４１－８３８１"; font-weight:bold; }
#navlist-foot2:before { content: "自衛隊愛媛地方協力本部 募集課"; } #navlist-foot2 p:after { content: "愛媛県松山市三番町８丁目３５２－１"; }
#navlist-foot3:before { content: "mail：recruit1-ehime@pco.mod.go.jp"; }

/*----------------------------------------------------------
	headerの基礎設定
------------------------------------------------------------*/
.basicimg {	/*"<nav>"の設定（黒）*/
	margin: 0 auto;			/*中央表示*/
	background-color: #000;		/*--背景色を黒に設定--*/
	color: white;			/*--文字色を白に設定--*/
}
.cleanimg {	/*"<nav>"の設定（色なし）*/
	margin: 0 auto;
}
.rec-header {
	top: 0px;			/*--上からの位置を指定--*/
	left: 0px;			/*--左からの位置を指定--*/
	width: 100%;			/*--横幅を100％に設定--*/
	hieght: 65px;			/*--縦幅を100pxに設定--*/
	padding: 2px 0;			/*--上下の余白を設定--*/
	margin: 0 auto;			/*--要素自体中央右寄せに設定--*/
}
.head_top {
	display: flex;
	display: -webkit-flex;
	max-width: 1280px;	/* 表示幅1280px以上は1280px固定で中央表示*/
	margin: 0 auto;
}
.a_logo {
	width: 62.5%;
}
.b_logo {
	width: 37.5%;
}
.rec-header img {
	margin: 0 auto;
	max-width: 100%;
}
/*--------------------------------------------------------
	ﾍﾟｰｼﾞﾄｯﾌﾟへ戻るの設定
----------------------------------------------------------*/
#page-top {
	position: fixed;	/*--位置を固定(fixed)する--*/
	bottom: 20px;		/*--下からの位置を指定--*/
	right: 5px;		/*--右からの位置を指定--*/
	width: 80px;		/*--画像の横幅を指定--*/
	height: 80px;		/*--画像の縦幅を指定--*/
}
#page-top img {
	max-width: 100%;		/*--画像の横幅を指定--*/
}
/*--画面サイズが767px以下の場合に可変--*/
@media screen and (max-width: 767px) {
#page-top {
	right: 0px;		/*--右からの位置を指定--*/
	width: 60px;		/*--画像の横幅を指定--*/
	height: 60px;		/*--画像の縦幅を指定--*/
}}

