@charset "utf-8";
/*
 * 記事ページのスタイルシート
 * ======= ====== ||    \\    ====
 * ||        ||   ||  \\    ||    ||
 * ||=====   ||   ||\\     ||      ||
 * ||        ||   ||  \\    ||    ||
 * ======= ====== ||    \\    ====
 *
 * モバイルファースト
 * => 基本の CSS は、モバイル用のデザインとする
 * => PC対応 (768px以上) は、スマートフォン、タブレット用と異なる部分だけを下部に記述する
 *
 * できるだけシンプルに分かりやすくする
 * => 複雑にしない
 */
/*--------------------------------------------------
>>> 見出し
--------------------------------------------------*/
h1 {
    margin: 1.2em 0 0 0;
    padding: 0;
    font-size: 130%;
    color: #000;
}
h2 {
    margin: 2em 0 1em 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;
}
/*--------------------------------------------------
>>> お知らせ
--------------------------------------------------*/
.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 {
    font-size: 16px;
    color: #000;
}
.form-container p {
    margin: 0.5em 0;
    line-height: 1.2em;
}
.form-container table {
    margin: 0;
}
.submit-button {
    border: none;
    display: block;
    width: 100%;
    padding: 15px 20px;
    margin: 20px 0 20px 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;
}
.submit-button:hover {
    background-color: #0056b3;
}
.submit-button:active {
    background-color: #004085;
}
.form-container fieldset {  /* グループ化 */
    border: none;  /* 枠を無くす */
    padding: 0;  /* リセット */
    margin: 0;  /* リセット */
}
.form-container legend {  /* グループ化したときの見出し */
    border: none;
    margin: 1.2em 0 0.3em 0;
    font-weight: normal;
    font-size: 1em;
    padding: 0 0.5em;
    border-left: 4px solid #2589d0;
}
.form-container label {  /* グループ化していないときの見出し */
    display: block;
    font-size: 1em;
    font-weight: normal;
    margin: 1.2em 0 0.3em 0;  /* legend と合わせる */
    padding: 0 0.5em;  /* legend と合わせる */
    border-left: 4px solid #2589d0;  /* legend と合わせる */
}
.day-checkbox-table {  /* 日にちのチェックボックスのテーブル */
    text-align: center;
}
.day-checkbox-table input[type="checkbox"] {  /* チェックボックスを非表示にする */
    display: none;
}
.day-checkbox-table th {  /* 日にちのチェックボックスのテーブル */
    font-weight: normal;
}
.day-checkbox-label {  /* 日にちのチェックボックスのラベル */
    /* これを設定しないと、見出しのラベルと同じスタイルになってしまう */
    font-size: 1em !important;
    font-weight: normal !important;
    margin: 0 !important;
    padding: 0 0.1em 0 0.1em !important;
    border-left: none !important;
    display: block;
    border: 1px solid #ccc;
    border-radius: 10%;
    background-color: #f0f0f0;
    /*transition: background-color 0.3s ease;*/  /* 色の変化を滑らかにする */
}
.day-checkbox-table input[type="checkbox"]:checked + label {
    /* 「input[type="checkbox"]:checked + label」は、「チェックされたチェックボックスに直後に続くラベル」の意味 */
    /* => ラベルをチェックすると、ラベルのスタイルがこれに変わる */
    /*background-color: #4caf50;*/
    background-color: pink;
    /*color: white;*/
    /*border-color: #4caf50;*/
    border-color: pink;
}
.day-checkbox-sunday {  /* 日にちのチェックボックスのテーブルの日曜日 */
    color: red;
}
.form-container textarea {
    width: 90%;
    height: 3em;
    font-size: 90%;
}
.text-of-each-day-container {  /* 各日の文字 */
    display: grid;
    grid-template-columns: repeat(3, 1fr);  /* 3列に並べる */
    grid-auto-flow: dense;  /* アイテムをすき間なく詰める */
    gap: 0.1em;  /* アイテム間のすき間 */
    align-items: stretch;  /* 同一行のアイテムの高さは最も高いアイテムに揃う */
    line-height: 1em;
}
.text-of-each-day-item {  /* 各日の文字のアイテム */
    display: flex;
    align-items: center;
}
.text-of-each-day-label {  /* 各日の文字のラベル */
    /* これを設定しないと、見出しのラベルと同じスタイルになってしまう */
    font-size: 1em !important;
    font-weight: normal !important;
    margin: 0 !important;
    padding: 0 0.1em 0 0 !important;
    border-left: none !important;
    width: 1.5em;
    text-align: right;
}
.text-of-each-day-item textarea {  /* 各日の文字のテキストエリア */
    width: 90%;
    height: 1.5em;
    font-size: 90%;
}
/*--------------------------------------------------
>>> 結果
--------------------------------------------------*/
.result-container {
    margin: 20px 0;
    padding: 10px 0;
}
.result-container h3 {
    margin: 10px 0 10px 0;
    padding: 0 0.5em;
    border-left: 4px solid #2589d0;
}
.result-container p {
    line-height: 1.2em;
}
.result-container canvas {
    /* canvas に幅を指定しないと、画面をはみ出すことがある */
    width: 100% !important;
    height: auto !important;
}
.result-container textarea {
    width: 90%;
    height: 10em;
    font-size: 80%;
}
.result-container button {
    display: block;
    margin: 0.5em;
}
/*--------------------------------------------------
>>> 月間や年間などのページのカレンダーのリスト
--------------------------------------------------*/
.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;
}
/*--------------------------------------------------
>>> タイプ別のページのカレンダーのリスト
--------------------------------------------------*/
.calendar-type-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);  /* 2列に並べる */
    grid-auto-flow: dense;  /* アイテムをすき間なく詰める */
    gap: 0.1em;  /* アイテム間のすき間 */
    align-items: stretch;  /* 同一行のアイテムの高さは最も高いアイテムに揃う */
    margin: 1em 0;
}
.calendar-type-container img {
    width: 100%;
}
.calendar-type-item-left {
    padding: 1em 0;
}
.calendar-type-item-left h2 {
    margin: 0 0 0.5em 0;
    padding: 0.5em 0.7em;
    font-size: 120%;
    font-weight: bold;
    /*color: #333;*/
    color: #000;
    border-left: 5px solid #2589d0;
    background-color: #f2f2f2;
}
.calendar-type-item-right {
}
/*--------------------------------------------------
>>> アイキャッチ画像
--------------------------------------------------*/
.featured-image {
    width: 100%;
    margin: 1em 0 0 0;
}
/*==========           ===========           ===========           ===========           ===========
>>> PC対応 (768px以上) => スマートフォン、タブレット用と異なる部分だけ記述する
=========           ===========           ===========           ===========           ===========*/
@media screen and (min-device-width: 768px) {
/*--------------------------------------------------
>>> 結果
--------------------------------------------------*/
.result-container canvas {
    width: 30% !important;
}
/*--------------------------------------------------
>>> 月間や年間などのページのカレンダーのリスト
--------------------------------------------------*/
.calendar-type-list-container {
    grid-template-columns: repeat(4, 1fr);  /* 4列に並べる */
}
/*--------------------------------------------------
>>> タイプ別のページのカレンダーのリスト
--------------------------------------------------*/
.calendar-type-container img {
    width: 50%;
}
/*--------------------------------------------------
>>> アイキャッチ画像
--------------------------------------------------*/
.featured-image {
    width: 30%;
}
}  /* @media screen and (max-device-width: 768px) */