@charset "utf-8"; /*文字コードをＵＴＦ－８にセット*/
/*
代表的な画面幅（横幅）の解像度
以下は、CSSのメディアクエリでよく使用される代表的な画面幅の目安です：

スマホ（縦向き）: 320px 〜 480px
スマホ（横向き）: 480px 〜 768px
タブレット（縦向き）: 768px 〜 1024px
タブレット（横向き）: 1024px 〜 1280px
デスクトップ・ノートパソコン: 1280px 〜 1920px
大画面モニター（4Kなど）: 1920px以上
*/
* {
  box-sizing: border-box; /* 幅を指定してもパディングやボーダーが加算されないように */
}
/*スマホを中心に作成。横方向・タブレット・パソコン用は後から指定し直す。*/
body {
  width: auto; /*bodyを表示幅いっぱいにセット*/
  display: grid; /*bodyの表示方法を２次元表示（エクセルのセルみたいなもの）にする*/
}

header {
  max-width: 100%; /* 画像が画面幅を超えないようにする */
  display: grid;
  grid-template-columns: 1fr 1fr; /*水平方向を二つに分ける*/
  grid-template-rows: auto auto; /*垂直方向を二つ準備する*/
  margin-bottom: 1em;
}
.screen_size {
  grid-column: 1 / 2;
  grid-row: 1 / 2;
}
.header_controls {
  grid-column: 2 / 3;
  grid-row: 1 / 2;
  text-align: right;
}
.header_image {
  grid-column: 1 / 3;
  grid-row: 2 / 3;
  width: 100%;
}

.title_container {
  display: grid; /*表示を２次元にセット*/
  grid-template-columns: 1fr 6fr; /* 列を画像サイズを１：６の幅で設定 */
  align-items: center; /* 垂直方向の整列 */
  gap: 10px; /* 画像とテキストの間隔 */
}
.title_image {
  grid-column: 1 / 2; /* 画像を左端に配置 */
  width: 100px; /* 画像の幅を指定 */
  height: auto; /* 画像の高さを自動調整 */
}
.title_text {
  grid-column: 2 / 3; /* テキストを画像の右側に配置 */
  text-align: left;
}

nav {
  justify-items: center; /* 横方向の中央揃え */
  text-align: center; /* 子要素のテキストを左右中央揃えにする */
  margin: 0 10;
  padding: 0px; /* 余白指定 */
  display: inline-block; /* インラインブロック要素にする */
  /* item__2を、grid containerのどこに配置するか指定。 */
  grid-row: 2 / 3; /* rowのライン２から３の間に配置 */
  grid-column: 1 / 2; /* columnのライン１から２の間に配置 */
}
.nav {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* 2列構成 */
  gap: 5px; /* ブロック間のスペース */
  /*display: inline-block; /* インラインブロックに設定 */
  flex-direction: row; /* 横方向に配置 */
  justify-content: center; /* 配置位置（センタリング） */
  background-color: yellow; /* 背景色指定 */
  padding: 5px 5px; /* 余白指定 */
}
.nav_content {
  background-color: lightyellow;
  /*padding: 20px;*/
  text-align: center;
  color: black; /* 文字色 */
  /*background-color: white; /* 背景色 */
  margin: 10px; /* 外側の余白 */
  border-radius: 5px; /* 角丸指定 */
  /*display: inline-block;*/
  white-space: nowrap;
  grid-template-columns: 1fr; /* 1列構成 */
}

.main_container {
  display: grid;
  grid-template-columns: 3fr 5fr;
  gap: 10px;
}
.main_title {
  grid-column: 1 / 3; /*タイトルを上段全てに配置*/
  grid-row: 1 / 2; /*タイトルを上段に設置*/
  border: 1px solid black; /* 線の太さ: 1px, 線種: 実線, 色: 黒 */
  font-weight: bolder;
  font-size: 1.2em;
  padding-left: 2em;
  padding-top: 1em;
  background-color: #9feef2;
  margin-top: 1em;
  height: 3em;
  /*display: grid;*/
  /*align-items: center; /* 垂直方向の中央揃え */
  box-sizing: border-box; /* パディングを含めた高さ計算 */
}
.main_title2 {
  height: 5em;
}
.main_image {
  grid-column: 1 / 3; /*画像を左に設置*/
  grid-row: 2 / 3; /*画像を上段に設置*/
  width: 100%;
}
.main_explain {
  grid-column: 1 / 3; /*画像を左に設置*/
  grid-row: 3 / 4; /*画像を上段に設置*/
  font-size: x-small; /*説明文の文字サイズを小さくした*/
}
.main_text {
  grid-column: 1 / 3; /*テキストを右に設置*/
  grid-row: 4 / 5; /*テキストを2段目に設置*/
}
.link {
  border: 1px solid black;
  width: 100%;
  background-color: pink;
  text-align: center;
  margin: 0px auto;
  border: 1px solid black; /* 線の太さ: 1px, 線種: 実線, 色: 黒 */
}
aside {
  text-align: center; /* 水平方向の中央揃え */
}
.aside_link {
  /*width: 16em;*/
  display: block;
  background-color: pink;
  text-align: center;
  height: 3em;
  margin: 1em 1em;
  padding-top: 1em;
  border: 1px solid black; /* 線の太さ: 1px, 線種: 実線, 色: 黒 */
  /*display: inline;*/
}

footer {
  max-width: fit-content;
  margin-top: 15px;
}
.footer_container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.footer_logo {
  grid-column: 1 / 2; /*ロゴを左端に配置*/
  grid-row: 1 / 2; /*ロゴを上段に配置*/
  margin: 0 auto;
}
.footer_QR {
  grid-column: 2 / 3; /*ＱＲコードを右端に配置*/
  grid-row: 1 / 2; /*ＱＲコードを上段に配置*/
  width: 100px;
  margin: 0 auto;
}
.footer_img {
  width: 100px;
}
.footer_pink {
  display: none; /*スマホ（縦表示）の時には非表示にする*/
}
.footer_access {
  grid-column: 1 / 3; /*連絡先を中央に配置*/
  grid-row: 2 / 3; /*連絡先を２段目に配置*/
  margin: 0px auto;
}
.footer_green {
  display: none; /*スマホ（縦表示）の時には非表示にする*/
}
.footer_report {
  grid-column: 1 / 3; /*決算書を左端に配置*/
  grid-row: 3 / 4; /*決算書を３段目に配置*/
  margin: 0 auto;
}
.report {
  white-space: nowrap;
  margin: 10px auto;
}

table {
  max-width: 100%; /* 画像が画面幅を超えないようにする */
  border: 2px solid black; /* テーブル全体のボーダーを指定 */
  border-collapse: collapse; /* ボーダーの重なりを防ぐ */
}
th,
td {
  border: 2px solid black; /* 各セルのボーダーを指定 */
  padding: 5px; /* セル内の余白 */
}
th .mobile {
  width: 10em;
}

.pdf {
  width: 100%;
  height: 4600px;
}

/*ここからが画面が（スマホ横・タブレット縦用）レイアウト*/
@media screen and (min-width: 480px) and (max-width: 768px) {
  body {
    width: auto;
  }
  .header_text {
    font-size: 2em;
  }
  .title_image {
    margin: 0 auto;
  }
  .nav {
    grid-template-columns: repeat(3, 1fr); /* 3列構成 */
  }
  .aside_link {
    width: 75%;
  }
  .footer_container {
    grid-template-columns: 1fr 3fr 2fr;
  }
  .footer_logo {
    grid-column: 1 / 2; /*ロゴを左端に配置*/
    grid-row: 1 / 2; /*ロゴを上段に配置*/
  }
  .footer_QR {
    grid-column: 1 / 2; /*ＱＲコードを左端に配置*/
    grid-row: 2 / 3; /*ＱＲコードを下段に配置*/
  }
  .footer_pink {
    display: none; /* 表示 */
    /*grid-column: 2 / 3; /*ピンク色のピースを左から２番目に配置*/
    /*grid-row: 1 / 3; /*ピンク色のピースを配置*/
  }
  .footer_access {
    grid-column: 2 / 3; /*連絡先を中央に配置*/
    grid-row: 1 / 3; /*連絡先を配置*/
  }
  .footer_green {
    display: none; /* 表示 */
    /*grid-column: 4 / 5; /*緑色のピースを左から２番目に配置*/
    /*grid-row: 1 / 3; /*緑色のピースを配置*/
  }
  .footer_report {
    grid-column: 3 / 4; /*決算書を左端に配置*/
    grid-row: 1 / 3; /*決算書を３段目に配置*/
    width: 100%;
    margin: 10px auto;
  }
}
/*ここからが画面が広い場合（タブレット横用）レイアウト*/
@media screen and (min-width: 769px) and (max-width: 1023px) {
  body {
    max-width: 769px;
  }
}
/*ここからが画面が広い場合（パソコン用）レイアウト*/
@media screen and (min-width: 1024px) {
  body {
    /*max-width: 1024px;*/
    width: auto;
  }
  .header_text {
    font-size: 2em;
  }
  .title_image {
    margin: 0 auto;
  }
  .nav {
    grid-template-columns: repeat(7, 1fr); /* 7列構成 */
  }
  .aside_link {
    width: 75%;
  }
  .main-title {
    margin-top: 1em;
    height: 3em;
  }
  .main_image {
    grid-column: 1 / 2; /*画像を左に設置*/
    grid-row: 2 / 3; /*画像を2段目に設置*/
  }
  .main_explain {
    margin: 10px auto;
    grid-column: 1 / 2; /*説明文を左端に設置*/
    /*grid-row: 2 / 3; /*画像の下に説明文*/
  }
  .main_text {
    grid-column: 2 / 3; /*テキストを右に設置*/
    grid-row: 2 / 3; /*テキストを2段目に設置*/
  }
  .footer_container {
    grid-template-columns: 1fr 50px 1fr 50px 1fr;
  }
  .footer_logo {
    grid-column: 1 / 2; /*ロゴを左端に配置*/
    grid-row: 1 / 2; /*ロゴを上段に配置*/
  }
  .footer_QR {
    grid-column: 1 / 2; /*ＱＲコードを左端に配置*/
    grid-row: 2 / 3; /*ＱＲコードを下段に配置*/
  }
  .footer_pink {
    display: block; /* 表示 */
    grid-column: 2 / 3; /*ピンク色のピースを左から２番目に配置*/
    grid-row: 1 / 3; /*ピンク色のピースを配置*/
  }
  .footer_access {
    grid-column: 3 / 4; /*連絡先を中央に配置*/
    grid-row: 1 / 3; /*連絡先を配置*/
  }
  .footer_green {
    display: block; /* 表示 */
    grid-column: 4 / 5; /*緑色のピースを左から２番目に配置*/
    grid-row: 1 / 3; /*緑色のピースを配置*/
  }
  .footer_report {
    grid-column: 5 / 6; /*決算書を右端に配置*/
    grid-row: 1 / 3; /*決算書を全段目に配置*/
    width: 100%;
    margin: 10px auto;
  }
  table {
    width: 100%;
  }
  th .mobile {
    width: 40%;
  }
}