@charset "utf-8";

/*header（ロゴなどが入った最上段のブロック）
---------------------------------------------------------------------------*/
/*ヘッダーブロック*/
header {
/*background: #a18136;確認用*/
	margin: 0 auto;		/*追記2023/02/21　中央揃え*/
	padding: 0;
	line-height: 0.5;
	display: flex;		/*flexボックスを使う指定*/
	flex-direction: column;	/*子要素を縦並びにする*/
	text-align: center;
}


/*既定のstyle.cssの適用が抜けない場合は !important; を付けて最優先に
---------------------------------------------------------------------------*/
/*logoの設定*/
header #logo {
margin: 0 auto 10px;
}

/*contentsブロック設定（main、sub、sideを囲むブロック）
---------------------------------------------------------------------------*/
#contents {
	display: flex;
    justify-content: center;
    align-items: center;
}
/*ページの全体的な設定(他のページでは margin がある。）
---------------------------------------------------------------------------*/
#container {
	max-width: none !important;
	background-color: #000 !important;	/*背景の色*/
	overflow: hidden;
	padding: 0;	/*外側に空けるスペース*/
}





/*ページ内の和文フォント googleフォントを使用
---------------------------------------------------------------------------*/
body {
	font-family: 'Yuji Syuku', serif;
	font-size: 2.5em;	/*基準となるフォントサイズ*/
	color: #fff;		/*全体の文字色*/
	max-height: 5300px;/***************************注意、指定しないと超長くなる**************************************/
}



/*画面に映し出されるときにフェードイン
---------------------------------------------------------------------------*/
body {
    animation: fadeIn 2s ease 0s 1 normal;
    -webkit-animation: fadeIn 2s ease 0s 1 normal;
}

@keyframes fadeIn {
    0% {opacity: 0}
    100% {opacity: 1}
}

@-webkit-keyframes fadeIn {
    0% {opacity: 0}
    100% {opacity: 1}
}





/*数字用フォント（グーグルフォント）の読み込み
---------------------------------------------------------------------------*/
@import url('https://fonts.googleapis.com/css2?family=Crimson+Text:wght@700&display=swap');
/*
---------------------------------------------------------------------------*/
/*スマホなども、メニューは全て非表示にしておく*/
#menubar {
	display: none;
}


/*最初の大きな文字の配置　親要素・子要素
---------------------------------------------------------------------------*/
.text_wrap {			/* 親要素(文字の括り) */
	position: relative;	/* 中の子要素に z-indexを明示的に定義するため */
	top: 180px;
	text-align:  center;	/* 中央寄せ（子要素 centering_item に対する配置） */
	width: 100%;

}

.centering_item {		/* 子要素 */
	display: inline-block;	/* インライン要素を指定 */
	font-weight: bold;
	z-index: 100;
}


/*最初の大きな文字のサイズ指定と光彩
---------------------------------------------------------------------------*/
.glow{
	font-size: 1.5em;
	text-shadow: 2px 2px 10px #a18136 ,
	-2px 2px 10px #a18136 ,
	2px -2px 10px #a18136 ,
	-2px -2px 10px #5bbab2;
	z-index: 10;
}


/*画面のスクロールを促す矢印
---------------------------------------------------------------------------*/
arrow-container {
	position: absolute;
	left: 0;
	right: 0;
	top: 550px;
	margin: auto;
	width: 24px;
	height: 24px;
	/*border: dashed red; 確認用*/
	z-index: 10;
}

.chevron {
	position: absolute;
	left: -18px;
	width: 54px;
  	height: 8px;
	opacity: 0;
	transform: scale3d(0.5, 0.5, 0.5);
	animation: move 3s ease-out infinite;
}

.chevron:first-child {
	animation: move 3s ease-out 1s infinite;
}

.chevron:nth-child(2) {
	animation: move 3s ease-out 2s infinite;
}

.chevron:before,
.chevron:after {
	content: ' ';
	position: absolute;
	top: 0;
	height: 100%;
	width: 51%;
	background: #a18136;
}

.chevron:before {
	left: 0;
	transform: skew(0deg, 30deg);
}

.chevron:after {
	right: 0;
	width: 50%;
	transform: skew(0deg, -30deg);
}

@keyframes move {
  25% {
    opacity: 1;

  }
  33% {
    opacity: 1;
    transform: translateY(30px);
  }
  67% {
    opacity: 1;
    transform: translateY(40px);
  }
  100% {
    opacity: 0;
    transform: translateY(55px) scale3d(0.5, 0.5, 0.5);
  }
}

.sc-text {
	display: block;
	margin-top: 75px;
	margin-left: -80px;
	font-family: "Helvetica Neue", "Helvetica", Arial, sans-serif;
	font-size: 24px;
	color: #fff;
	text-transform: uppercase;
	text-shadow: 2px 2px 10px #a18136 ,
	-2px 2px 10px #a18136 ,
	2px -2px 10px #a18136 ,
	-2px -2px 10px #5bbab2;
	white-space: nowrap;
	opacity: .25;
	animation: pulse 2s linear alternate infinite;
}

@keyframes pulse {
  to {
    opacity: 1;
  }
}


/*航空写真を格納するボックス要素
---------------------------------------------------------------------------*/
.parent{
	display: flex;
	flex-direction: column;
	max-width: 1500px;
	margin: 0 auto;
	padding-top: 200px;
	/*background-color: #e5e5fa; 確認用*/
}

.child{
	display: block;
	margin: 0 auto;
	font-size: 1.2em;
	width:  500px;		/*子要素の背景を画像にしたとき、正確な指定が必要*/
	height: 350px;		/*子要素の背景を画像にしたとき、正確な指定が必要*/
	/*background-color: #b36a22;　確認用*/
	padding: 0px;
	margin-bottom: 7%;		/*heightで調整できるので無くても良い*/
}

.child p{
	display: block;
	position: relative;	/*親要素の左上を基点*/
	margin-left: 0px;	/*基点から下へ200px*/
	max-width:  500px;
	font-family: 'Crimson Text', serif;
	font-size: 1.2em;
	/*background-color: #b36a22; 確認用*/
	padding: 0px;
	bottom: 0px;
}

.child p2{
	position: relative;	/*親要素の左上を基点*/
	top: 210px;		/*基点から下へ200px*/
	display: block;
	max-width:  500px;
	font-size: 0.5em;
	line-height: 23px;
	/*background-color: #b36a22; 確認用*/
	padding: 0px;
	opacity: 0;		/*最初は透過で見えなくする*/
	text-shadow: 300px 300px 300px #0c0c0c;
}


/*文字揃えを交互に入れ替える。指定したものを右揃えにする(無指定は左なので、交互で変わる）*/
main .parent .child:nth-of-type(2n-1) p {
text-align: right;
}

main .parent .child:nth-of-type(2n-1) p2 {
text-align: right;
}

/*一番初めの写真はJPG、CSSで周囲をぼかす
---------------------------------------------------------------------------*/
.frame {
	position: relative;
	display: block;
	margin: 0 auto;
	max-width: 770px;
	/*border: solid 1px #eee;*/
	margin-top: -100px;	/*上の間隔が空き過ぎなので仕方なく*/
	margin-bottom: 200px;
}


.frame::after {
	position: absolute;
	content: '';
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	box-shadow: 
	  inset 50px 100px 200px #000 /* 背景色と同じ色 　box-shadow: inset X(→方向) Y(↓方向) ぼかし 拡張 色; */,
	  inset 50px 100px 200px #000,
	  inset -150px -100px 200px #000,
	  inset -150px -100px 200px #000;
}


/*
---------------------------------------------------------------------------*/


/*
---------------------------------------------------------------------------*/




/*要素の背景として画像を挿入するためのクラスセレクタ
背景グラデーションはhttps://ics.media/entry/200212/
---------------------------------------------------------------------------*/
.img-ini {
	background-image: url(../images/air/ini.jpg);
	background-size: contain;
	background-repeat: no-repeat;
}

.img1990 {
 	background-image: url(../images/air/1990.png);
	background-size: contain;
	background-repeat: no-repeat;
}

.img1991 {
	background-image: url(../images/air/1991.png);
	background-size: contain;
	background-repeat: no-repeat;
}

.img1992 {
	background-image: url(../images/air/1992.png);
	background-size: contain;
	background-repeat: no-repeat;
}

.img1993 {
	background-image: url(../images/air/1993.png);
	background-size: contain;
	background-repeat: no-repeat;
}

.img1994 {
	background-image: url(../images/air/1994.png);
	background-size: contain;
	background-repeat: no-repeat;
}

.img1995 {
	background-image: url(../images/air/1995.png);
	background-size: contain;
	background-repeat: no-repeat;
}

.img1996 {
	background-image: url(../images/air/1996.png);
	background-size: contain;
	background-repeat: no-repeat;
}

.img1997 {
	background-image: url(../images/air/1997.png);
	background-size: contain;
	background-repeat: no-repeat;
}

.img1998 {
	background-image: url(../images/air/1998.png);
	background-size: contain;
	background-repeat: no-repeat;
}

.img1999 {
	background-image: url(../images/air/1999.png);
	background-size: contain;
	background-repeat: no-repeat;
}

.img2000 {
	background-image: url(../images/air/2000.png);
	background-size: contain;
	background-repeat: no-repeat;
}

.img2001 {
	background-image: url(../images/air/2001.png);
	background-size: contain;
	background-repeat: no-repeat;
}

.img2002 {
	background-image: url(../images/air/2002.png);
	background-size: contain;
	background-repeat: no-repeat;
}

.img2003 {
	background-image: url(../images/air/2003.png);
	background-size: contain;
	background-repeat: no-repeat;
}

.img2004 {
	background-image: url(../images/air/2004.png);
	background-size: contain;
	background-repeat: no-repeat;
}

.img2005 {
	background-image: url(../images/air/2005.png);
	background-size: contain;
	background-repeat: no-repeat;
}

.img2006 {
	background-image: url(../images/air/2006.png);
	background-size: contain;
	background-repeat: no-repeat;
}

.img2007 {
	background-image: url(../images/air/2007.png);
	background-size: contain;
	background-repeat: no-repeat;
}

.img2008 {
	background-image: url(../images/air/2008.png);
	background-size: contain;
	background-repeat: no-repeat;
}

.img2009 {
	background-image: url(../images/air/2009.png);
	background-size: contain;
	background-repeat: no-repeat;
}

.img2010 {
	background-image: url(../images/air/2010.png);
	background-size: contain;
	background-repeat: no-repeat;
}

.img2011 {
	background-image: url(../images/air/2011.png);
	background-size: contain;
	background-repeat: no-repeat;
}

.img2012 {
	background-image: url(../images/air/2012.png);
	background-size: contain;
	background-repeat: no-repeat;
}

.img2013 {
	background-image: url(../images/air/2013.png);
	background-size: contain;
	background-repeat: no-repeat;
}

.img2014 {
	background-image: url(../images/air/2014.png);
	background-size: contain;
	background-repeat: no-repeat;
}

.img2015 {
	background-image: url(../images/air/2015.png);
	background-size: contain;
	background-repeat: no-repeat;
}

.img2016 {
	background-image: url(../images/air/2016.png);
	background-size: contain;
	background-repeat: no-repeat;
}

.img2017 {
	background-image: url(../images/air/2017.png);
	background-size: contain;
	background-repeat: no-repeat;
}

.img2018 {
	background-image: url(../images/air/2018.png);
	background-size: contain;
	background-repeat: no-repeat;
}

.img2019 {
	background-image: url(../images/air/2019.png);
	background-size: contain;
	background-repeat: no-repeat;
}

.img2020 {
	background-image: url(../images/air/2020.png);
	background-size: contain;
	background-repeat: no-repeat;
}

.img2021 {
	background-image: url(../images/air/2021.png);
	background-size: contain;
	background-repeat: no-repeat;
}

.img2022 {
	background-image: url(../images/air/2022.png);
	background-size: contain;
	background-repeat: no-repeat;
}

.img2023 {
	background-image: url(../images/air/2023.png);
	background-size: contain;
	background-repeat: no-repeat;
}


/*一覧ブロック（listタイプ）
---------------------------------------------------------------------------*/


/*---------------------------------------------------------------------------
2021/02/21 追記：画面幅1000px以下で表示させたくないもの
---------------------------------------------------------------------------*/
@media screen and (max-width:1000px) {
#menubar_hdr {
	display: none;
}


/*@media screen and (max-width:1100px)ここまで*/

}


/*---------------------------------------------------------------------------
ここから下は画面幅415px以上430px以下の追加指定
---------------------------------------------------------------------------*/
@media screen and (min-width:415px) and (max-width:430px){

/*・・・に関する設定*/

/*　※注意！　下の閉じカッコ　}　はこのブロックに必要なので、削除しないで下さい。　*/

}




/*---------------------------------------------------------------------------
ここから下は画面幅1000px以下の追加指定
---------------------------------------------------------------------------*/
@media screen and (max-width:1000px) {

body {
	max-height: 2550px;/***************************注意、指定しないと超長くなる**************************************/
}


/*最初の大きな文字のサイズ指定と光彩
--------------------------------------------------------------------1000px以下*/
.glow{
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	margin: auto;
	margin-top: 50px;
	width: 80%;
	height: 0.2rem;
	font-size: 0.8em;
}

/*最初の大きな文字の配置　親要素・子要素
--------------------------------------------------------------------1000px以下*/
.text_wrap {			/* 親要素(文字の括り) */
	position: relative;	/* 中の子要素に z-indexを明示的に定義するため */
	top: 60px;
	text-align:  center;	/* 中央寄せ（子要素 centering_item に対する配置） */
	width: 100%;

}


/*最初の大きな画像
--------------------------------------------------------------------1000px以下*/
.frame {
	position: relative;
	display: block;
	margin: 0 auto;
	max-width: 800px;
	top: 100px;	/*上の間隔が空き過ぎなので仕方なく*/
	margin-bottom: 450px;

}

.frame::after {
	position: absolute;
	content: '';
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	box-shadow: 
	  inset 0 0 100px #000 /* 背景色と同じ色 　box-shadow: inset X(→方向) Y(↓方向) ぼかし 拡張 色; */,
	  inset 0 0 100px #000,
	  inset 0 0 100px #000,
	  inset 0 0 100px #000;
}


/*画面スクロールを促す矢印
---------------------------------------------------------------------------*/
arrow-container {
	position: absolute;
	left: 0;
	right: 0;
	top: 390px;
	margin: auto;
	width: 24px;
	height: 24px;
	/*border: dashed red; 確認用*/
	z-index: 10;
}




/*画像を格納するボックス要素
--------------------------------------------------------------------1000px以下*/
.parent{
	display: flex;
	flex-direction: column;

	margin: 0 auto;
	padding-top: 10px;
	/*background-color: #e5e5fa;　確認用*/
}

.child{
	display: block;
	margin: 0 auto;
	font-size: 1.5em;
	max-width:  190px;			/*子要素の背景を画像にすたとき、正確な指定が必要*/
	height: 150px;			/*子要素の背景を画像にすたとき、正確な指定が必要*/
	padding: 0px;
	margin-bottom: 3%;		/*heightで調整できるので無くても良い*/
}

.child p{
	display: block;
	max-width:  300px;
	font-size: 0.4em;
	margin: 0 30px;
	padding: 0px;
	bottom: 8px;
}

.child p2{
	position: relative;	/*親要素の左上を基点*/
	top: 70px;		/*基点から下へ200px*/
	display: block;
	max-width:  300px;
	font-size: 0.18em;
	margin: 0 30px;
	line-height: 10px;
	padding: 0px;
	opacity: 1;
}


/*画面のスクロールを促す矢印
--------------------------------------------------------------------1000px以下*/
.chevron {
	left: -8px;
	width: 24px;
  	height: 8px;
}


.sc-text {
	margin-top: 55px;
	margin-left: -60px;
	font-family: "Helvetica Neue", "Helvetica", Arial, sans-serif;
	font-size: 18px;
}


/*　※注意！　下の閉じカッコ　}　はこのブロックに必要なので、削除しないで下さい。　*/

}

/*---------------------------------------------------------------------------
ここから下は画面幅1000px以上1200px以下の追加指定
---------------------------------------------------------------------------*/
@media screen and (min-width:1000px) and (max-width:1200px){

arrow-container {
	position: absolute;
	left: 0;
	right: 0;
	top: 400px;
	margin: auto;
	width: 24px;
	height: 24px;
	/*border: dashed red; 確認用*/
	z-index: 10;
}



/*　※注意！　下の閉じカッコ　}　はこのブロックに必要なので、削除しないで下さい。　1000以上ここまで。*/

}


/*---------------------------------------------------------------------------
デバイスが「縦向き」、画面の横幅が 600px 以上 770px 以下の場合の記述　タブレットなどの縦向きを想定
---------------------------------------------------------------------------*/
@media (orientation: portrait) and (min-width: 600px) and (max-width:770px){

body {
	max-height: 4600px;/***************************注意、指定しないと超長くなる**************************************/
}


/*最初の大きな画像
---------------------------------------------------------------「縦向き」600px以上*/
.frame {
	position: relative;
	display: block;
	margin: 0 auto;
	max-width: 600px;
	top: 100px;	/*上の間隔が空き過ぎなので仕方なく*/
	margin-bottom: 450px;

}

/*画面スクロールを促す矢印
---------------------------------------------------------------------------*/
arrow-container {
	position: absolute;
	left: 0;
	right: 0;
	top: 600px;
	margin: auto;
	width: 24px;
	height: 24px;
	/*border: dashed red; 確認用*/
	z-index: 10;
}


/*画像を格納するボックス要素
---------------------------------------------------------------「縦向き」600px以上*/
.parent{
	display: flex;
	flex-direction: column;
	margin: 0 auto;
	padding-top: 40px;

	/*background-color: #e5e5fa;　確認用*/
}

.child{
	display: block;
	margin: 0 auto;
	font-size: 2.8em;
	max-width:  400px;			/*子要素の背景を画像にしたとき、正確な指定が必要*/
	height: 340px;			/*子要素の背景を画像にしたとき、正確な指定が必要*/
	padding: 0px;
	/*background-color: #bc0000;確認用*/
	margin-bottom: 3%;		/*heightで調整できるので無くても良い*/
}

.child p{
	display: block;
	max-width:  330px;
	font-size: 0.5em;
	margin: 0 30px;
	padding: 0px;
	bottom: 8px;
}

.child p2{
	position: relative;	/*親要素の左上を基点*/
	top: 170px;		/*基点から下へ200px*/
	display: block;
	max-width:  330px;
	font-size: 0.17em;
	margin: 0 30px;
	line-height: 17px;
	padding: 0px;
	opacity: 1;
}




/*　※注意！　下の閉じカッコ　}　はこのブロックに必要なので、削除しないで下さい。　*/

}

/*---------------------------------------------------------------------------
デバイスが「縦向き」、画面の横幅が 770px 以上の場合の記述　タブレットなどの縦向きを想定
---------------------------------------------------------------------------*/
@media (orientation: portrait) and (min-width: 770px){

body {
	max-height: 4600px;/***************************注意、指定しないと超長くなる**************************************/
}


/*最初の大きな画像
---------------------------------------------------------------「縦向き」600px以上*/
.frame {
	position: relative;
	display: block;
	margin: 0 auto;
	max-width: 650px;
	top: 100px;	/*上の間隔が空き過ぎなので仕方なく*/
	margin-bottom: 450px;

}

/*画面スクロールを促す矢印
---------------------------------------------------------------------------*/
arrow-container {
	position: absolute;
	left: 0;
	right: 0;
	top: 600px;
	margin: auto;
	width: 24px;
	height: 24px;
	/*border: dashed red; 確認用*/
	z-index: 10;
}


/*画像を格納するボックス要素
---------------------------------------------------------------「縦向き」600px以上*/
.parent{
	display: flex;
	flex-direction: column;
	margin: 0 auto;
	padding-top: 40px;

	/*background-color: #e5e5fa;　確認用*/
}

.child{
	display: block;
	margin: 0 auto;
	font-size: 2.8em;
	max-width:  450px;			/*子要素の背景を画像にしたとき、正確な指定が必要*/
	height: 340px;			/*子要素の背景を画像にしたとき、正確な指定が必要*/
	padding: 0px;
	/*background-color: #bc0000;確認用*/
	margin-bottom: 3%;		/*heightで調整できるので無くても良い*/
}

.child p{
	display: block;
	max-width:  450px;
	font-size: 0.6em;
	margin: 0 30px;
	padding: 0px;
	bottom: 8px;
}

.child p2{
	position: relative;	/*親要素の左上を基点*/
	top: 210px;		/*基点から下へ200px*/
	display: block;
	max-width:  450px;
	font-size: 0.18em;
	margin: 0 30px;
	line-height: 17px;
	padding: 0px;
	opacity: 1;
}




/*　※注意！　下の閉じカッコ　}　はこのブロックに必要なので、削除しないで下さい。　*/

}