@charset "utf-8";
/*
 * 全てのページのスタイルシート
 * ======= ====== ||    \\    ====
 * ||        ||   ||  \\    ||    ||
 * ||=====   ||   ||\\     ||      ||
 * ||        ||   ||  \\    ||    ||
 * ======= ====== ||    \\    ====
 *
 * モバイルファースト
 * => 基本の CSS は、モバイル用のデザインとする。
 * => PC対応 (768px以上) は、スマートフォン、タブレット用と異なる部分だけを下部に記述する。
 *
 * ここ (style.css) には、
 * ウェブサイト全体に共通する CSS、
 * もしくは、多くのページで使い回す CSS、
 * および、ホームを除く、個別のページごとのスタイル
 * を記述する。
 * => できるだけ共通化して、使い回せるようにする。
 *     => 全体のスタイルを一発で変更できる。
 * => ホームだけは、「style_home.css」で必要箇所を上書きする。
 *
 * できるだけシンプルに分かりやすくする。
 * => 複雑にしない。
 */
/*--------------------------------------------------
>>> 基本設定
--------------------------------------------------*/
body, html {
  margin: 0;
  padding: 0;
}
body {
  line-height: 1.4em;
  /* 基本となる文字色 - 真っ黒より少し明るめがいい */
  /*color: #333;*/
  /*color: #000;*/
  color: #1f1f1f;
  /* 基本となるフォント - 欧文フォントを日本語フォントより先に記載する */
  font-family: "Roboto", "Arial", sans-serif;
  overflow-x: hidden;
}
/*--------------------------------------------------
>>> ページ全体を囲むdiv
--------------------------------------------------*/
.page {
  background-color: #ffffff;
}
/*--------------------------------------------------
>>> リンクの共通スタイル
--------------------------------------------------*/
a {
  color: #0000ff;
}
a:visited {
  color: #0000ff;  /* 訪問したリンクも色は同じにする */
}
a:hover {
  cursor: pointer;
}
/*--------------------------------------------------
>>> 段落の汎用クラス
--------------------------------------------------*/
.has-text-align-right {
  text-align: right;
}
/*--------------------------------------------------
>>> テーブルの汎用クラス
--------------------------------------------------*/
.table-w-full {  /* スマホでは、幅100%にする */
  width: 100%
}
/*--------------------------------------------------
>>> ボタンの汎用クラス
--------------------------------------------------*/
/* 送信ボタンなど (button要素に用いる) */
.btn {
  display: inline-block;
  padding: 12px 30px;
  background-color: #2589d0;  /* 背景色は、ボタンの種類によって、個別に上書きする */
  color: #fff;  /* 文字色は、ボタンの種類によって、個別に上書きする */
  border: none;
  border-radius: 25px;  /* 角を丸く */
  font-size: 16px;
  font-weight: bold;
  cursor: pointer;
  transition: background-color 0.3s ease, transform 0.1s ease;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);  /* 軽い影 */
}
/*.btn:hover {*/
  /*background-color: #1a6da8;*/  /* 背景色は、ボタンの種類によって、個別に上書きする */
/*}*/
.btn:active {
  transform: translateY(1px);  /* クリック時に少し沈む */
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);
}
/*--------------------------------------------------
>>> ヘッダー
--------------------------------------------------*/
.header {
  width: 100%;
  height: 50px;
  padding: 5px 15px 5px 10px;
  border-bottom: 4px solid #469;
  position: fixed;  /* 上に固定 */ /* positionを指定しないと、z-indexは使えない */
  z-index: 100;  /* メニューより上に重ねる */
  background-color: #ffffff;
  display: flex;  /* 横並びにする */
  justify-content: space-between;  /* 両端に広げて配置する */
  align-items: center;  /* 上下中央に揃える */
  box-sizing: border-box;  /* 全て含めたサイズにする */
}
/*--------------------------------------------------
>>> サイトタイトル
--------------------------------------------------*/
/* ホームのh1のスタイルを無効化 */
.header h1 {
  font-size: 18pt;
  font-weight:normal;
  margin: 0;
  padding: 0;
  display: inline;
}
.site-name {
  margin: 5px 0 0 0;  /* タイトルロゴの位置は微調整する */
  padding: 0;
}
.site-name img {
  width: 240px;
  margin: 0;
  padding: 0;
}
/*--------------------------------------------------
>>> メインメニュー (ヘッダーメニュー)
--------------------------------------------------*/
/* スマホ用 */
.menu-sp {
  position: fixed;  /* 画面に固定 */
  top: 0;
  right: -100%;  /* 最初は画面の右側に隠す */
  width: 80%;  /* メニューの幅 */
  height: 100vh;  /* 画面いっぱいの高さ */
  background: #f5f5f5;
  z-index: 10;  /* コンテンツより上に重ねる */
  transition: all 0.3s ease;  /* 動きを滑らかに */
  padding-top: 60px;  /* ヘッダ (ボタン) と重ならない高さにする */
}
.menu-sp ul {
  list-style: none;  /* リストの点を消す */
  padding: 0;
  margin: 0;
  width: 100%;
}
.menu-sp ul li {
  border-bottom: 1px solid #eee;  /* 下線を入れる */
}
.menu-sp ul li:first-child {
  border-top: 1px solid #eee;  /* 一番上だけ上線も入れる */
}
.menu-sp ul li a {
  display: block;  /* クリックできる範囲を広げる */
  padding: 10px 0;  /* 上下の余白 */
  text-decoration: none;  /* リンクの下線を消す */
  color: #333;
  font-size: 16px;
  letter-spacing: 0.1em;  /* 文字の間隔を少し空ける (雰囲気が出る) */
  text-align: center;
  transition: background-color 0.3s;
}
.menu-sp ul li a:hover {
  background-color: #fafafa;
  color: #000;
}
/* ハンバーガーメニュー */
.menu-btn {
  position: relative;
  width: 30px;
  height: 24px;
  cursor: pointer;
}
.menu-btn span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: #333;
  transition: all 0.3s;  /* アニメーションの速度 */
}
/* 各線の位置固定 */
.menu-btn span:nth-child(1) { top: 0; }
.menu-btn span:nth-child(2) { top: 11px; }
.menu-btn span:nth-child(3) { bottom: 0; }
/* 背景を暗くするパネル */
.menu-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);  /* 黒の50%、透明 */
  z-index: 5;  /* メニューより下、コンテンツより上 */
  opacity: 0;  /* 最初は透明 */
  visibility: hidden;  /* コンテンツをクリックできなくする */
  transition: all 0.3s;
}
/* クラスが付いたとき (表示しているとき) */
.menu-sp.is-active {
  right: 0;  /* 画面にスライドイン */
}
.menu-btn.is-active span:nth-child(1) {
  transform: translateY(11px) rotate(45deg);  /* 1本目を45度回転 */
}
.menu-btn.is-active span:nth-child(2) {
  opacity: 0;  /* 2本目を消す (透明にする) */
}
.menu-btn.is-active span:nth-child(3) {
  transform: translateY(-11px) rotate(-45deg);  /* 3本目を-45度回転 */
}
.menu-overlay.is-active {
  opacity: 1;  /* 背景をオーバーレイ */
  visibility: visible;
}
body.is-fixed {
  overflow: hidden;  /* 背後のスクロールを止める */
}
/* PC用 */
.menu-pc {
  display: none;  /* スマホでは消す */
}
/*--------------------------------------------------
>>> コンテンツ
--------------------------------------------------*/
/* コンテンツの装飾が基本 => homeはstyle_home.cssで上書きする */
.content {
  padding: 50px 6px 0 6px;  /* ヘッダの高さ下げる (position: fixed;で固定しているため) */
}
.content h1 {
  font-size: 120%;
}
.content h2 {
  font-size: 150%;
}
.content p {
  font-size: 90%;
}
.content table {
  font-size: 85%;
}
/*--------------------------------------------------
>>> パンくずリスト
--------------------------------------------------*/
.breadcrumbs {
  font-size: 85%;
  margin: 0;
  padding: 0;
  list-style: none;  /* リストのマークを消す */
}
.breadcrumbs li {
  display: inline;  /* 横並びに表示 */
  list-style: none;
}
.breadcrumbs li:after {
  /* > を表示 */
  content: '>';
  padding: 0 0.2em;
  /*color: #333;*/
  color: #1f1f1f;
}
.breadcrumbs li:last-child:after {
  content: '';
}
.breadcrumbs li a {
  text-decoration: none;
  /*color: #333;*/
  color: #1f1f1f;
}
.breadcrumbs li a:hover {
  text-decoration: underline;
}
/*--------------------------------------------------
>>> はじめに  不要  そのうち消す
--------------------------------------------------*/
.preface {
  margin-top: 1rem !important;
}
/*--------------------------------------------------
>>> カテゴリーページ
--------------------------------------------------*/

/*--------------------------------------------------
>>> 記事ページ
--------------------------------------------------*/
/* 運営者情報ページ */
.about-table {
  width: 100%;
  border-collapse: collapse;  /* 線を重ねる */
}
.about-table th, .about-table td {
  border-top: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
}
.about-table th {
  width: 1px;  /* 最小幅を指定しておく => white-space: nowrap;と合わせる */
  white-space: nowrap;  /* 改行を禁止して、中身に合わせる */
  background-color: #f2f2f2;
  padding: 10px 5px;
}
.about-table td {
  padding: 10px 5px;
}
/*--------------------------------------------------
>>> フォーム
--------------------------------------------------*/
/* 基本となるフォームのコンテナ */
.form-container {
  padding: 1em;
  background-color: #eee;
  border-radius: 4px;
}
/* 基本となるボタン */
/* => 送信しない場合もあるため、「:active」は設定しない (色が変わってしまう) */
.button {
  border: none;
  display: block;
  width: 100%;
  padding: 15px 20px;
  margin: 20px 0 0 0;
  background-color: #007bff;
  color: #fff;
  border-radius: 8px;  /* 角丸 */
  font-size: 1.1em;
  font-weight: bold;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.3s ease;
}
.button:hover {
  background-color: #0056b3;
}
/* 送信するボタン */
.submit-button {
  cursor: pointer;
}
.submit-button:active {
  background-color: #004085;
}
/* 基本となる input type="text" (10文字: 長い数値を入れることを想定) */
.form-container input[type="text"] {
  /* 打ち消すときは、input に class を入れる */
  width: 10em;
  padding: 6px;
  border: 1px solid #000;
  border-radius: 4px;
  box-shadow: 2px 2px 3px #666;
  font-size: 18px;
}
/* input type="text" を短くする (4文字) */
.input-text-short {
  width: 4em !important;
}
/* select の背景色 */
.form-container select {
  background-color: #fff;
}
/* フォームの基本となるtable */
.form-container table {
  /* 1本線にはしない */
  /* 一番外の線はなしにする */
  width: 100%;
  background-color: #fff;
}
.form-container th,td {
  border: #000 solid 1px;
}
/* フォームの基本となる画像 */
.form-container img {
  width: 85%;
  height: auto;
  margin: 0 auto;
  display: block;
}
/* 枠ありの独立したラジオボタン (ラジオボタン全体を div で囲んで指定する) */
.radio-container {
  margin: 1em 0;
  padding: 0.5em 0.3em;
  border: 1px solid #000;
  border-radius: 4px;
  box-shadow: 2px 2px 3px #666;
  background-color: #fff;
}
.radio-container label {
  border: 1px solid #8080ff;
  border-radius: 4px;
  padding: 1px 5px 1px 1px;
  margin-bottom: 5px;
  display: inline-block;
  font-size: 95%;
  cursor: pointer;
}
.radio-container label:hover {
  background-color: #ccc;
}
.radio-container label:has(input[type="radio"]:checked) {
  background-color: #EFEFEF;
  border-color: #666;
}
/* 外枠なしのラジオボタン (ラジオボタン全体を div で囲んで指定する) */
/* テーブルの中にラジオボタンを設置するときなどに使う */
.no-border-radio-container {
  margin: 0 0;
  padding: 0.3em 0.3em;
  background-color: #fff;
}
.no-border-radio-container label {
  border: 1px solid #8080ff;
  border-radius: 4px;
  padding: 1px 5px 1px 1px;
  margin-bottom: 5px;
  display: inline-block;
  font-size: 95%;
  cursor: pointer;
}
.no-border-radio-container label:hover {
  background-color: #ccc;
}
.no-border-radio-container label:has(input[type="radio"]:checked) {
  background-color: #EFEFEF;
  border-color: #666;
}
/* 単位を選択するラジオボタン (ラジオボタン全体を div で囲んで指定する) */
.unit-radio-container {
  margin: 1em 0;
  padding: 0.5em 0.3em;
  border: 1px solid #000;
  border-radius: 4px;
  box-shadow: 2px 2px 3px #666;
  background-color: #fff;
}
.unit-radio-container label {
  border: 1px solid #8080ff;
  border-radius: 4px;
  padding: 1px 5px 1px 1px;
  margin-bottom: 5px;
  display: inline-block;
  font-size: 95%;
  cursor: pointer;
}
.unit-radio-container label:hover {
  background-color: #ccc;
}
.unit-radio-container label:has(input[type="radio"]:checked) {
  background-color: #EFEFEF;
  border-color: #666;
}
/* 単位を選択するラジオボタン (外枠なし) (ラジオボタン全体を div で囲んで指定する) */
/* テーブルの中にラジオボタンを設置するときなどに使う */
.no-border-unit-radio-container {
  margin: 0 0;
  padding: 0.3em 0.3em;
  background-color: #fff;
}
.no-border-unit-radio-container label {
  border: 1px solid #8080ff;
  border-radius: 4px;
  padding: 1px 5px 1px 1px;
  margin-bottom: 5px;
  display: inline-block;
  font-size: 95%;
  cursor: pointer;
}
.no-border-unit-radio-container label:hover {
  background-color: #ccc;
}
.no-border-unit-radio-container label:has(input[type="radio"]:checked) {
  background-color: #EFEFEF;
  border-color: #666;
}
/* 年月日の入力欄 */
.date-input-container input[type="text"] {
  width: 3em;
  padding: 4px;
  border: 1px solid #000;
  border-radius: 4px;
  box-shadow: 2px 2px 3px #666;
  font-size: 16px;
}
/*--------------------------------------------------
>>> 結果
--------------------------------------------------*/
.result-container {
  width: 100%;
  margin: 1em 0 2em 0;
  padding: 0 0;
}
.result-container p {
  line-height: 1.2em;
}
/* 「結果」という文字 */
.result-label {
  font-weight: bold;
  font-size: 110%;
}
/* 短い1行の結果 (div で囲んで指定する) */
.result-1-line {
  width: 100%;
  margin: 0;
  padding: 0.2em 0.2em;
  text-align: center;
  font-size: 120%;
  border: #666 solid 1px;
  /* box-sizing: border-box; を指定しないと、はみ出す */
  box-sizing: border-box;
}
/* 結果を表で表示するときのテーブル */
.result-table {
  width: 100%;
  table-layout: auto;
  box-sizing: border-box;
  font-size: 95%;
  border: 1px solid #333;
  border-collapse: collapse;
  text-align: left;
  vertical-align: center;
}
.result-table td, .result-table th {
  border: 1px solid #333;
  border-collapse: collapse;
  padding: 0.1em 0.1em 0.1em 0.2em;
}
.result-center-top-td {  /* 分類など、 */
  text-align: center;
  vertical-align: top;
}
.result-numerical-value-td {  /* 結果の数値を右寄せにする (表計算ソフトのように) */
  text-align: right;
}
/*--------------------------------------------------
>>> フッター
--------------------------------------------------*/
.footer {
  padding: 0px 8px 5px 8px;
  border-top: 4px solid #469;
  background: #f5f5f5;
}
.footer a {
  color: #000;
  /*color: #333;*/
  text-decoration: none;
}
.footer a:visited {
  /*color: #000000;*/
  color: #000;
  /*color: #333;*/
}
/* 更新日 */
.post-date {
  margin: 1em 0 0 0;
}
.last-updated {
  font-size: 85%;
}
/* フッタ−のタイトルロゴ */
.footer-site-name {
  margin: 25px 0 0 0;
  padding: 0;
}
.footer-site-name img {
  width: 200px;
  margin: 0;
  padding: 0;
}
/* フッタ−の事業者名・住所等 */
.footer-about-us {
  font-size: 75%;
  padding: 0;
  margin: 0;
  line-height: 1em;
}
/* フッターメニュー */
.footer-nav {
  font-size: 80%;
  margin: 30px 0;
  line-height: 1.4em;
}
ul.footer-menu {
  padding: 0;
  list-style: none;  /* リストのマークを消す */
}
.footer-menu li {
  display: inline-block;  /* 横並びに表示 */
  padding-right: 10px;  /* 項目間のスペース */
}
/* 関連サイトの文字 */
.footer-related-site {
  font-weight: bold;
}
/* コピーライト */
.copyright {
  font-size: 85%;
}
/*==========           ===========           ===========           ===========           ===========
>>> PC対応 (768px以上) => スマートフォン、タブレット用と異なる部分だけ記述する
=========           ===========           ===========           ===========           ===========*/
@media screen and (min-device-width: 768px) {
/*--------------------------------------------------
>>> ヘッダー
--------------------------------------------------*/
.header {
  padding: 20px 100px 8px 100px;
  height: 60px;
}
/*--------------------------------------------------
>>> メインメニュー (ヘッダーメニュー)
--------------------------------------------------*/
/* スマホ用 */
.menu-sp {
  display: none;  /* PCでは消す */
}
.menu-btn {
  display: none;  /* PCでは消す */
}
.menu-overlay {
  display: none;  /* PCでは消す */
}
/* PC用 */
.menu-pc {
  display: block;  /* PCでは表示 */
  font-size: 110%;
  font-weight: bold;
}
.menu-pc ul li a {
  text-decoration: none;
  color: #1f1f1f;
}
.menu-pc a:hover {
  color: #000;
}
.menu-pc ul {
  padding: 0;
  margin: 0;
  list-style: none;  /* リストのマークを消す */
}
.menu-pc li {
  display: inline-block;  /* 横並びに表示 */
  padding-right: 20px;  /* 項目間のスペース */
}
.menu-sp ul li a:hover {
  background-color: #eee;
}
/*--------------------------------------------------
>>> コンテンツ
--------------------------------------------------*/
.content {
  padding: 60px 100px 0 100px;  /* 上はヘッダの高さに合わせる */
}
/*--------------------------------------------------
>>> フッター
--------------------------------------------------*/
.footer {
  padding: 0px 100px 5px 100px;
}
}  /* @media screen and (max-device-width: 768px) */