:root {
    --main_text_color: black;

    /*シンプル・グレー*/
    --main_back_color: white;
    --bord_line_color: silver;
    --bord_back_color: whitesmoke;
    --box_line_color: lightsteelblue;
    --box_text_color: slategray;

    /*シンプル・ブルー*/
    /* --main_back_color: white;
    --bord_line_color: cornflowerblue;
    --bord_back_color: aliceblue;
    --box_line_color: royalblue;
    --box_text_color: navy; */

    /*シンプル・グリーン*/
    /* --main_back_color: white;
    --bord_line_color: gainsboro;
    --bord_back_color: #cbe1d7;
    --box_line_color: seagreen;
    --box_text_color: darkgreen; */

    /*シフォン・ブラウン*/
    /* --main_back_color: ivory;
    --bord_line_color: burlywood;
    --bord_back_color: snow;
    --box_line_color: peru;
    --box_text_color: saddlebrown; */

    /*クール・ブルー*/
    /* --main_back_color: aliceblue;
    --bord_line_color: skyblue;
    --bord_back_color: lightcyan;
    --box_line_color: cornflowerblue;
    --box_text_color: royalblue; */

    /*ティール・グリーン*/
    /* --main_back_color: honeydew;
    --bord_line_color: darkseagreen;
    --bord_back_color: snow;
    --box_line_color: lightseagreen;
    --box_text_color: teal; */

    /*マゼンタ・ピンク*/
    /* --main_back_color: lavenderblush;
    --bord_line_color: blueviolet;
    --bord_back_color: snow;
    --box_line_color: mediumvioletred;
    --box_text_color: darkmagenta; */
}

body {
    color: var(--main_text_color);
	background-color: var(--main_back_color);
    /* line-height:200%; */
}

h1 {
    padding: 1rem 2rem;
    color:white;
    border-radius: 10px;
    font-size: x-large;
    font-weight: normal;
    background-image: -webkit-gradient(linear, left top, right top, from(var(--box_text_color)), to(var(--box_line_color)));
    background-image: -webkit-linear-gradient(left, var(--box_text_color) 0%, var(--box_line_color) 100%);
    /*background-color: var(--box_text_color);*/
}
h3 {
    padding: 0.25em 0.5em;/*上下 左右の余白*/
    font-size: large;
    font-weight: normal;
    background: transparent;/*背景透明に*/
    border-left: solid 5px var(--box_text_color);/*左線*/
}


/*上下線ボックス 変数色*/
.bord1{
    padding: 8px 19px;
    margin: 0.5em 0;
    color: black;
    background: var(--bord_back_color);
    border-top: solid 5px var(--bord_line_color);
    border-bottom: solid 5px var(--bord_line_color);
}
.bord1 p {
    margin: 0; 
    padding: 0;
}

/*囲みボックス 変数色*/
.box1 {
    position: relative;
    margin: 2em 0;
    padding: 0.5em 1em;
    border: solid 3px var(--box_line_color);
    border-radius: 8px;
}
.box1 .box-title {
    position: absolute;
    display: inline-block;
    top: -13px;
    left: 10px;
    padding: 0 9px;
    line-height: 1;
    font-size: 19px;
    background-color: var(--main_back_color);
    color:var(--box_text_color);
    font-weight: bold;
}
.box1 p {
    margin: 0; 
    padding: 0;
}

/*ボタン色*/
button.btn-default {
    background-color: whitesmoke;
	border: solid 1px silver;
}
button.btn-default:hover{
    background-color: gainsboro;
	border: solid 1px lightgray;
}

.btn-primary{
    background-color: darkslategray;
}

/* ラジオボタンの行間 */
label{
  line-height:200%;
}

/*エラーメッセージ*/
.warning {
	color: red;
	font-weight: bold;
}

/*Bootstrapの上書き*/
.input-group-addon {
	margin-right: 5px;
}

/* アコーディオン表示ここから */

/* -----------------------------------
 * 基本設定
 * ----------------------------------- */
.accordion {
	min-width: 300px;
	margin: 0 auto;
	padding: 0;
}
.accordion .ac-content {
	color: black;
	margin: 0;
	padding: 0;
}
.accordion input.ac-check {
	display: none;
}

/* -----------------------------------
 * ラベル（見出し）の共通スタイル
 * ----------------------------------- */
/* すべてのラベルに共通のスタイル（色指定は個別に上書き） */
.accordion label {
	display: block;
	cursor: pointer;
	padding: 10px;
	color: black;
	/* border-bottom: 1px solid #fff; <- 個別設定にするため一旦コメントアウト */
	box-sizing: border-box;
    transition: background 0.2s;
    /* margin-top: 5px; <- 個別設定にするため一旦コメントアウト */
}

/* 💡 修正点: 月日見出しのホバー色を明示的に指定 */
.accordion > .ac-content > input.ac-check + label:hover,
.ac-cont > input.ac-check + label:hover,
/* 💡 修正点: 時間帯のホバー色も mistyrose に設定 */
.ac-cont p label:hover {
	background: mistyrose;	/* 月、日、時間帯の共通ホバー色 */
}


/* -----------------------------------
 * 階層ごとのラベルスタイルとアイコン設定
 * ----------------------------------- */

/* 月の見出しスタイル (最上位の <label>) */
.accordion > .ac-content > input.ac-check + label {
    background: lavender;
    font-weight: bold;
    border-radius: 4px 4px 0 0;
    margin-top: 10px; /* 月見出しの上の間隔を広げる */
    border-bottom: 1px solid #fff; /* 元の border-bottom を適用 */
}

/* 日の見出しスタイル (<div.ac-cont> 内の <label>) */
.ac-cont > input.ac-check + label {
    background: #e6e6fa; /* lavender より少し濃い色 */
    font-weight: normal;
    padding-left: 20px;
    margin-top: 5px; /* 日見出しの上の間隔 */
    border-bottom: 1px solid #fff; /* 元の border-bottom を適用 */
    border-radius: 4px 4px 0 0; /* 角を丸く */
}

/* アイコンの追加と回転 (月と日の見出しのみ) */
.accordion > .ac-content > input.ac-check + label::before,
.ac-cont > input.ac-check + label::before {
    content: "▼";
    margin-right: 12px;
    font-weight: bold;
    color: lightslategray;
    display: inline-block;
    transition: transform 0.2s;
}
.ac-check:checked + label::before {
    transform: rotate(180deg);
}

/* -----------------------------------
 * 時間帯のスタイル (背景色と行間隔を修正)
 * ----------------------------------- */

/* 時間帯の親要素 <p> のスタイル調整 */
.ac-cont p {
    margin: 0;
    padding: 0;
}

/* 時間帯のラベルの背景色を lavender に、行間隔を margin-bottom で調整 */
.ac-cont p label {
    background: lavender; /* 時間帯の背景色を lavender に */
    padding: 10px; /* 上下のパディングを10pxに */
    margin-bottom: 5px; /* 行間隔を5px開ける */
    font-weight: normal;
    border-bottom: none; /* 個別で線を入れる場合は追加 */
    border-radius: 4px; /* 角を丸く */
    /* ラジオボタンとテキストの垂直位置を調整したい場合は以下も検討 */
    display: flex;
    align-items: center;
}
/* ラジオボタン自体のスタイル調整 */
.ac-cont p label input[type="radio"] {
    margin-right: 10px; /* ラジオボタンとテキストの間のスペース */
    /* 必要に応じてラジオボタンのサイズ調整 */
    transform: scale(1.2); /* 少し大きく表示 */
}

/* -----------------------------------
 * コンテンツ (ac-cont) の折り畳みと展開
 * ----------------------------------- */
.accordion .ac-cont {
	transition: max-height 0.1s ease-out, padding 0.1s ease-out;
	max-height: 0;
	overflow: hidden;
	background: lightsteelblue;	/* 枠外の色 (コンテンツ全体の背景) */
	padding: 0 10px; /* 左右のパディングを10pxに */
	margin: 0;
	box-sizing: border-box;
    border-left: 1px solid #c8c8e0;
    border-right: 1px solid #c8c8e0;
    /* 日見出しと時間帯の間に少し間隔を開ける場合は、上部のpaddingを調整 */
    padding-top: 5px;
}

.accordion input:checked + label + .ac-cont {
    
	max-height: 9999px; /*非常に大きな値に設定して、高さ制限を実質的に解除 */
	padding-top: 10px; /* コンテンツ展開時の上部パディング */
    padding-bottom: 10px; /* コンテンツ展開時の下部パディング */
    padding-left: 10px;
    padding-right: 10px;
}

/* 最後のコンテンツの下部境界線 */
/* 月ごとの最後のコンテンツに対して適用 */
.accordion > .ac-content > .ac-cont:last-of-type {
    border-bottom: 1px solid #c8c8e0;
    border-radius: 0 0 4px 4px; /* 下部の角を丸く */
}
/* 日ごとの最後の時間帯に適用されるborder-bottomはp label側で制御 */

/* アコーディオン表示ここまで */