@charset "utf-8";
/*
 * 記事ページのスタイルシート
 * ======= ====== ||    \\    ====
 * ||        ||   ||  \\    ||    ||
 * ||=====   ||   ||\\     ||      ||
 * ||        ||   ||  \\    ||    ||
 * ======= ====== ||    \\    ====
 *
 * モバイルファースト
 * => 基本の CSS は、モバイル用のデザインとする
 * => PC対応 (768px以上) は、スマートフォン、タブレット用と異なる部分だけを下部に記述する
 *
 * できるだけシンプルに分かりやすくする
 * => 複雑にしない
 */
/*--------------------------------------------------
>>> 見出し
--------------------------------------------------*/
h1 {
    margin: 1.2em 0 0 0;
    padding: 0;
    font-size: 130%;
    color: #000;
}
h2 {
    margin: 1.5em 0 0.5em 0;
    /*padding: 2px 0.5rem 0.5rem 0.5rem;*/
    padding: 0.5em 0.7em;
    font-size: 120%;
    font-weight: normal;
    color: #000;
    /*border-bottom: #cccccc solid 1.5px;*/
    border-left: 5px solid #2589d0;
    background-color: #f2f2f2;
}
/*--------------------------------------------------
>>> 段落
--------------------------------------------------*/
p {
    font-size: 90%;
    color: #000;
}
/*--------------------------------------------------
>>> 文字
--------------------------------------------------*/
/* 太字にする */
.bold {
    font-weight: bold;
}
.italic {
    font-style: italic;
}
.text-right {
    text-align: right;
}
/*--------------------------------------------------
>>> テーブル
--------------------------------------------------*/
/* 1本線のテーブル */
.table-collapse {
    border-collapse: collapse;
    border: 1px solid #000;
    font-size: 95%;
}
.table-collapse th, td {
    border: 1px solid #000;
    padding: 0.1em 0.2em 0.1em 0.3em;
}
/* テーブルだけを横スクロールさせるコンテナ (テーブルを div で囲んで指定する) */
.table-scroll-container {
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    max-width: 100%;
}
/* 文字を中央寄せにする */
.td-center {
    text-align: center;
}
/*--------------------------------------------------
>>> 横スクロールさせるコンテナ
--------------------------------------------------*/
/* テーブルを div で囲んで指定する */
.scroll-container {
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    max-width: 100%;
}
/*--------------------------------------------------
>>> お知らせ
--------------------------------------------------*/
.notice_title {
    margin: 1.2rem 0 0 0;
    padding: 0;
}
.notice_date {
    margin: 0 0 0.3rem 0;
    padding: 0;
    font-size: 90%;
    /*color: #333;*/
    color: #000;
}
.notice_title h1 {
    margin: 0;
}
/*--------------------------------------------------
>>> フォーム
--------------------------------------------------*/
/* 基本となるフォームのコンテナ */
.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 で囲んで指定する) */
.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;
}
/* 短い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;
}
/*--------------------------------------------------
>>> 単位換算の結果
--------------------------------------------------*/
.unit-result {
    font-weight: bold;
    font-size: 110%;
}
.unit-result-table {
    width: 100%;
    table-layout: auto;
    box-sizing: border-box;
    font-size: 90%;
    border: 1px solid #333;
    border-collapse: collapse;
    text-align: left;
    vertical-align: center;
}
.unit-result-table td, .unit-result-table th {
    border: 1px solid #333;
    border-collapse: collapse;
    padding: 0.1em 0.1em 0.1em 0.2em;
}
.unit-system-td {
    text-align: center;
    vertical-align: top;
}
.numerical-value-td {
    text-align: right;
}
/*--------------------------------------------------
>>> 月間や年間などのページのカレンダーのリスト
--------------------------------------------------*/
.calendar-type-list-container {
    display: grid;
    /*grid-template-columns: repeat(3, 1fr);*/  /* 3列に並べる */
    grid-template-columns: repeat(2, 1fr);  /* 2列に並べる */
    grid-auto-flow: dense;  /* アイテムをすき間なく詰める */
    gap: 0.1em;  /* アイテム間のすき間 */
    align-items: stretch;  /* 同一行のアイテムの高さは最も高いアイテムに揃う */
}
.calendar-type-list-item {
    margin-bottom: 1.5em;
}
.calendar-type-list-item img {
    width: 100%;
}
.calendar-type-list-link {
    margin: 0;
    padding: 0 2em;
    font-size: 75%;
    line-height: 1.1em;
}
.calendar-type-list-link a {
    color: #000;
}
.calendar-type-list-link a:visited {
    color: #000;
}
/*--------------------------------------------------
>>> アイキャッチ画像
--------------------------------------------------*/
.featured-image {
    width: 100%;
    margin: 1em 0 0 0;
}
/*--------------------------------------------------
>>> カテゴリーページ (ホームページを除くindex.html)
--------------------------------------------------*/
/* h1を含めて、全体を <div class="category-page"> で囲む */
.category-page h1 {
    margin-bottom: 1em;
}
.category-page h2 {
    margin: 0;
    padding: 3px 10px;
    font-size: 1.2em;
    font-weight: bold;
    border-left: none;
    background-color: #f2f2f2;
    text-align: center;
}
.category-page h2:first-of-type {
    margin: 1em 0 0 0;
}
.category-page h3 {
    margin: 0;
    padding: 3px 10px;
    font-size: 1em;
    font-weight: bold;
    border-left: none;
    /*background-color: #f2f2f2;*/
    color: #000000;
}
.category-page ul {
    list-style: none;
    padding: 0;
    margin: 0;
    border-top: 1px solid #cccccc;
    width: 100%;
}
.category-page li {
    border-bottom: 1px solid #cccccc;
    padding: 3px 10px;
    background-color: #ffffff;
}
.category-page a {
    text-decoration: none;
    display: block;
}
/*==========           ===========           ===========           ===========           ===========
>>> PC対応 (768px以上) => スマートフォン、タブレット用と異なる部分だけ記述する
=========           ===========           ===========           ===========           ===========*/
@media screen and (min-device-width: 768px) {
/*--------------------------------------------------
>>> フォーム
--------------------------------------------------*/
/* フォームの基本となる画像 */
.form-container img {
    width: 350px;
}
/*--------------------------------------------------
>>> 結果
--------------------------------------------------*/
.result-container canvas {
    width: 30% !important;
}
/*--------------------------------------------------
>>> 月間や年間などのページのカレンダーのリスト
--------------------------------------------------*/
.calendar-type-list-container {
    grid-template-columns: repeat(4, 1fr);  /* 4列に並べる */
}
/*--------------------------------------------------
>>> アイキャッチ画像
--------------------------------------------------*/
.featured-image {
    width: 30%;
}
}  /* @media screen and (max-device-width: 768px) */