:root {
    /*シンプル・グレー*/
    --main-bg-color: white;

    /* --bord_line_color: silver;
    --bord_back_color: whitesmoke; */

    --box_line_color: lightsteelblue;
    --box_text_color: slategray;
	--box_back_color: ghostwhite;
}

body {
	background-color: var(--main-bg-color);
}

/*見出し*/
h1 {
    padding: 1rem 2rem;
    border-radius: 10px;
    font-size: x-large;
    font-weight: normal;
    color:white;
    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);/*左線*/
}

/*囲みボックス 変数色*/
.box1 {
    position: relative;
    margin: 2em 0;
    padding: 0.5em 1em;
    border: solid 2px var(--box_line_color);
    border-radius: 8px;
	background-color: var(--box_back_color);
	line-height:150%;
}
.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-bg-color);
    color:var(--box_text_color);
    font-weight: bold;
}
.box1 p {
    margin: 0.5em; 
    padding: 0.5em;
}

/*ボタン色*/
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;
}
.btn-primary[disabled] {
  background-color: #d3d3d3;
  border: 1px solid #b0b0b0;
  color: #7a7a7a;
  cursor: not-allowed;
}

/*HELP（説明）*/
.details_help {
    border: none;
    padding: 0.5em 0.5em 0;
    color:dimgray;
    background: transparent;
    font-weight: normal;
    font-size: small;
    margin:0px 3px 3px 3px;
}
.details_help[open] {
    background: cornsilk;
    border: 2px solid powderblue;
    border-radius: 6px;
}
.details_help p {
    margin: 0.2em; 
    padding: 0.2em; 
}
.details_help>summary {
    text-align: right;
    font-weight: normal;
    font-size: small;
    color:gray;
    background: transparent;
    margin: -0.5em -0.5em 0;
    padding-left: 1.5em;
    cursor: pointer;
    list-style-image: none;
    list-style-type: none;
    background-image: url(../img/help_icon.png);
    background-repeat: no-repeat;
    background-position: right 3em top 0em;
    background-size: 1.5em 1.5em;
}
/* Chrome/Safariなどのデフォルトの矢印を消す */
.details_help > summary::-webkit-details-marker {
    display: none;
}
.details_help[open]>summary {
    list-style-type: '▼';
    list-style-position: right;
    background-image:none
}
/* HELP（説明）のツールチップ表示 */
/* 親要素のsummaryにhoverした時の設定 */
.details_help > summary {
    position: relative; /* ツールチップの基準点 */
}
.details_help > summary:hover::after {
    content: "クリックすると説明が表示されます";
    position: absolute;
    right: 2.2em;
    bottom: 2em;
    padding: 5px 10px;
    border-radius: 6px;
    font-size: small; 
    white-space: nowrap;
    z-index: 100;
    pointer-events: none;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    background-color: lightgoldenrodyellow;
    color: darkgreen;

    /* にじみ対策：transformを一切使わない（visibility と opacity だけを使う） */
    opacity: 0;
    visibility: hidden;
    
    /* 4秒の間に、ふわと表示して、静止し、パッと消える設定 */
    animation: staticShow 4.0s forwards;
}
/* アニメーションの定義：移動させないことで「静止画」として描画させる */
@keyframes staticShow {
    5% { opacity: 0; visibility: hidden; } /* 0.2秒まで非表示 */
    20% { opacity: 1; visibility: visible; }  /* 0.8秒で表示完了 */
    85% { opacity: 1; visibility: visible; } /* ここから3.4秒地点まで「完全に動かない」 */
    100% { opacity: 0; visibility: hidden; } /* 最後に消える */
}
/* 展開時 */
.details_help[open] > summary:hover::after {
    content: "クリックで説明を折りたたみます";
    background-color: ivory; 
    color: dimgray;
}

/*HELP2（説明の中の展開箇所）*/
.details_help2 {
    border: none;
    padding: 0.5em 0.5em 0;
    color:dimgray;
    background: transparent;
    font-weight: normal;
    font-size: small;
    margin:0px 3px 3px 3px;
}
.details_help2[open] {
    background: lavenderblush;
    border: 2px solid mistyrose;
    border-radius: 3px;
}
.details_help2 p {
    margin: 0.2em; 
    padding: 0.2em; 
}
.details_help2>summary {
    font-weight: normal;
    font-size: small;
    color:blueviolet;
    background: transparent;
    margin: -0.5em -0.5em 0;
    padding-left: 1.5em;
    cursor: pointer;
}


/*右寄せ*/
.text-right {
	display: flex;
	justify-content: flex-end;
}
/*中央寄せ*/
.text-center {
	display: flex;
	justify-content: center;
}

/*説明書き*/
.guide {
	color: gray;
	font-size: small;
}

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

/*タイトルロゴ*/
.logo {
    display: flex;
    font-size:x-small;
    font-weight:normal;
    justify-content: center; /* inner-content を水平方向に中央揃え */
    align-items: center; /* inner-content を垂直方向に中央揃え（必要であれば） */
    width: 50%;
    /*border: 1px solid blue;*/ /* 分かりやすいように枠線を追加 */
}
.logo-text {
  margin-right: 10px; /* 画像と文字の間のスペース */
  /*white-space: nowrap;*/ /* 文字が折り返さないようにする */
  /*font-size: 1.2em;*/
  color: #333;
}
.logo-image {
  max-width: 50%; /* 画像の最大幅 */
  height: auto; /* 高さは自動調整 */
  display: block; /* margin: auto; が効くようにブロック要素にする */
}

/*Bootstrapの上書き*/
/* .row{
    line-height: 150%;
} */
.input-group-addon {
	margin-right: 5px;
}
input[type=text]  {
    margin-top: 2px;
    margin-bottom: 2px;
}
input[type=time]  {
    margin-top: 2px;
    margin-bottom: 2px;
}
input[type=radio]  {
    margin-top: 2px;
    margin-bottom: 2px;
}
select {
    margin-top: 2px;
    margin-bottom: 2px;
}
/*チェックボックスのデフォルトが薄すぎなので濃くする*/
input[type=checkbox] {
    border: thin solid dimgray;
}

/*予約一覧のテーブル*/
.table1 {
	max-width: 100%;
	text-align: center;
	border-collapse: collapse;
	border-spacing: 0;
	/* background: #cdf4f0; */
}
.table1 tr:nth-child(2n) {
	background: #cdf4f0;
}
.table1 tr:nth-child(2n+1) {
	background: #e9faf9;
}
.table1 th {
	padding: 10px;
	border: solid 1px #ffffff;
	background: #778ca3;
	color: #ffffff;
}
.table1  td {
	padding: 10px;
	border: solid 1px #ffffff;
}

/*お知らせ一覧*/
.info-area {
    background: whitesmoke; 
    color: #000; 
    padding: 15px; 
    border-radius: 10px; 
    overflow-x: auto;
    height: 120px;
    overflow: auto;
    line-height: 100%;
}

/* デフォルト（未読）は太字 */
.info-item.unread .info-title {
    font-weight: bold;
}
/* 既読（unreadクラスが外れた時）はノーマルに */
.info-item .info-title {
    font-weight: normal;
    text-decoration:underline;
    margin: 0pc; 
    padding: 0px; 
}

/*お知らせのダイアログボックス*/
/* モーダル全体の背景 */
.modal {
    display: none; /* 初期状態は非表示 */
    position: fixed;
    z-index: 9999;
    left: 0; top: 0;
    width: 100%; height: 100%;
    background-color: rgba(0,0,0,0.5); /* 背景を暗くする */
}
/* ダイアログ本体 */
.modal-content {
    background-color: #fff;
    margin: 10% auto;
    padding: 20px;
    border-radius: 12px;
    width: 80%;
    max-width: 500px;
    position: relative;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}
/* 閉じるボタン */
.close-button {
    position: absolute;
    right: 15px; top: 10px;
    font-size: 28px;
    cursor: pointer;
    color: #aaa;
}
.kuriza-icon {
    text-align: center;
    margin-bottom: 15px;
}
.news-text h3 {
    color: #2c5d63; /* くりざーぶのテーマカラーに合わせて調整してください */
    border-left: 4px solid #2c5d63;
    padding-left: 10px;
}