@charset "UTF-8";
/* 共通 CSS style.css */
/* #id:1回 .class:複数回 優先度：id高い class低い */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;/* 境界およびパディングを、要素に指定した width および height の中で取るようブラウザーに指示します。要素の width を 100 ピクセルに設定した場合、100 ピクセルの中に追加した境界やパディングが含まれ、コンテンツ領域はそれらの幅を吸収するために縮小されます */
}

.header {
  position: fixed; /* ヘッダーを画面上部に固定 */
  display: flex;/*HTMLブロックを横並びにする*/
  justify-content: space-between;/*最初のアイテムは先頭に最後のアイテムは末尾に寄せる */
  align-items: center;/* アイテムを中央付近にまとめる */
  padding: 0;/* 初期値：0 20px（上下0左右20px)その後：0 10px */
  width: 100%; /* 追加: ヘッダーの幅を100%に設定 */
  z-index: 10;
}


h1 {
    }


body {
    font-family: "Times New Roman", Times, serif; /* Arial, sans-serif をセリフ体に変更 */
    background-color: #000; /* 初期値：背景色を808080灰色に変更 */
    height: 100%; /* bodyの高さをビューポートの高さに設定 */
    /*position: relative;  追加 */
    margin: 0;
    overflow: hidden;  /*はみ出た部分を表示しない。スクロールバー非表示 */
}

/* ここから下がハンバーガーメニューに関するCSS */
  
/* チェックボックスを非表示にする */
.drawer_hidden {
  display: none;
}

/* ハンバーガーアイコンの設置スペース */
.drawer_open {
  display: flex;
  height: 60px;
  width: 60px;
  justify-content: center;
  align-items: center;
  position: absolute;/* 右5pxに統一できるかテスト：relativeをabsoluteに変更 */
  z-index: 100;/* 重なり順を一番上にする */
  cursor: pointer;
  right: 0px; /* 右5pxに統一できるかテスト：追加 */
}

/* ハンバーガーメニューのアイコン */
.drawer_open span,
.drawer_open span:before,
.drawer_open span:after {
  content: '';
  display: block;/*ブロック要素にする*/
  height: 3px;
  width: 25px;
  border-radius: 3px;
  background: #fff;
  transition: 0.5s;
  position: absolute;/*absoluteは絶対配置を指定する値です*/
}

/* 三本線の一番上の棒の位置調整 */
.drawer_open span:before {
  bottom: 8px;
}

/* 三本線の一番下の棒の位置調整 */
.drawer_open span:after {
  top: 8px;
}

/* アイコンがクリックされたら真ん中の線を透明にする */
#drawer_input:checked ~ .drawer_open span {
  background: rgba(255, 255, 255, 0);
}

/* アイコンがクリックされたらアイコンが×印になように上下の線を回転 */
#drawer_input:checked ~ .drawer_open span::before {
  bottom: 0;
  transform: rotate(45deg);
}

#drawer_input:checked ~ .drawer_open span::after {
  top: 0;
  transform: rotate(-45deg);
}
  
/* アイコンがクリックされたらメニューを表示 */
#drawer_input:checked ~ .nav_content {
  left: 0;/* メニューを画面に入れる初期値0% */
}


/* メニュー窓のデザイン*/
.nav_content {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 100%; /* メニューを画面の外に飛ばす */
  z-index: 99;
  background:rgba(0, 0, 0, 0.5);/* メニュー窓の濃度 */
  transition: .5s;
}


.nav_list {
  list-style: none;/* メニュー黒ポチを消す */
  /* font-family: "Times New Roman", Times, serif; セリフ体フォント */
  position: absolute; /* ポジションを絶対値に */
  top: 40%; /* 上からメニュー文字までの% */
  left: 50%; /* 左からメニュー文字までの% */
  transform: translate(-50%, -50%); /* 自分を中央に置くこれによってtop:,left:の%がより正確になる */
}

.nav_item {
font-family: "Quicksand";
font-size:1em; 
/*line-height: 1.5em;*/
margin-bottom: 2em; /* メニュー項目間のスペース */
color: white;
text-shadow: 2px 3px 8px rgba(0, 0, 0, 0.9); /* タイトル文字の影 offset-x | offset-y | blur-radius | color初期値0.5  */
}

a {
 text-decoration: none;
 color: white;
}

a:visited {
text-decoration: none;
color: white;
}

a:hover {
  text-decoration: underline;
}



/* フッター */

footer {
    position: fixed;
    bottom: 5px;
    left: 5px;
    /*transform: translateX(-50%);*/
    z-index: 10;
}


footer p {
    color: white;
    text-shadow: 1px 2px 4px rgba(0, 0, 0, 0.5); /* タイトル文字の影 offset-x | offset-y | blur-radius | color初期値0.5  */
}

footer span {
    color: white;
    font-size: 0.9rem; /* フォントサイズを小さく設定 */
}

/* ローディングテキストスタイル */
#loading-progress {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 0.9rem;
  color: #808080;
  /* display: none;  デフォルトでは非表示 */
  display: block; /* デフォルトでは表示 */
}


/* スライドショーに関するCSS */
@keyframes fadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@keyframes tiltDown {
    0% {
        background-position: center top;
    }
    100% {
        background-position: center bottom;
    }
}

@keyframes panRight {
    0% {
        background-position: left center;
    }
    100% {
        background-position: right center;
    }
}