@charset "UTF-8";

html, body {
    height: 100%;
}

/* ダイアログ（モーダル）の見た目 */
dialog {
	border: none;
	border-radius: 8px;
	padding: 0;
	width: 90%;
	max-width: 1200px;
}

dialog::backdrop {
	background: rgba(0, 0, 0, 0.6);
	/* 背景を暗くする */
}

.dialog-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 10px 20px;
	background: #f8f8f8;
	border-bottom: 1px solid #ccc;
}

.dialog-content {
	padding: 20px;
}

/* ボタンの見た目（必要に応じて調整してください） */
.info-button {
	background: url(アイコン画像のパス) no-repeat;
	border: none;
	cursor: pointer;
	width: 50px;
	height: 50px;
}
@media screen and (min-width: 1200px) {
/* ボタンの土台設定 */
.info-modal-trigger {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 45px;
	min-height: 120px;
	/* 背景色を確実に合格する濃い赤に変更 */
	color: #fff !important;
	background-color: #911d16;
	border: none;
	border-radius: 12px;
	cursor: pointer;
	box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
	padding: 10px 0;
}

.info-modal-trigger:focus {
	color: #fff !important;
	background-color: #911d16;
}

.info-modal-trigger:hover {
	background-color: #a52a1f;
	/* ホバー時の色を少し明るく */
	box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.5);
}

/* 事業一覧の文字設定 */
.info-modal-trigger::after {
	content: "事業一覧";
	writing-mode: vertical-rl;
	color: #ffffff !important;
	/* 強制的に白 */
	font-size: 1.4em;
	/* 標準的なサイズに戻す */
	font-weight: 900;
	/* 太さは維持 */
	letter-spacing: 0.3em;
	position: absolute;
	top: 10px;
	bottom: 0px;
	right: 15px;
	left: 10px;
}
}
#syousai-iframe,
#box-frame iframe {
	-ms-overflow-style: none;
	/* IE, Edge用 */
	scrollbar-width: none;
	/* Firefox用 */
}

#syousai-iframe::-webkit-scrollbar,
#box-frame iframe::-webkit-scrollbar {
	display: none;
	/* Chrome, Safari用 */
}

/* モーダルが開いている間（bodyにダイアログが開いている状態）の制御 */
body:has(dialog[open]) {
	overflow: hidden !important;
}

/* もしIEや古いブラウザを考慮する場合 */
.modal-open {
	overflow: hidden !important;
}


/* 3. モーダル内のiframeのスクロールバーを非表示にする（既にある記述の補強） */
iframe {
	-ms-overflow-style: none !important;
	scrollbar-width: none !important;
}

iframe::-webkit-scrollbar {
	display: none !important;
}

/* 
html:has(dialog[open]),
body:has(dialog[open]) {
    overflow: hidden !important;
} */
/* モーダル表示時にJSでbodyに付与するクラス */
body.modal-open {
	position: fixed !important;
	width: 100% !important;
	height: 100% !important;
	overflow: hidden !important;
}/* 1. 全ページ共通の「形」と「×印」の設定 */
.close-business {
    cursor: pointer;
    width: 26px;
    height: 26px;
    position: absolute;
    top: -13px;
    right: -13px;
    border-radius: 50%;
    border: none;
    padding: 0;
    margin: 0;
    z-index: 100;
    text-indent: -9999px;
    overflow: hidden;
    background-color: #ccc; /* ←色が指定されていない時のための予備色 */
}
/* 1. ×印を出す（共通設定） */
.close-business::before, .close-business::after {
    content: ""; position: absolute; top: 50%; left: 50%;
    width: 14px; height: 2px; background-color: #fff !important;
    display: block;
}
.close-business::before { transform: translate(-50%, -50%) rotate(45deg); }
.close-business::after  { transform: translate(-50%, -50%) rotate(-45deg); }
/* 1. ×印を出す（共通：ここは絶対必要です） */
.close-business::before, .close-business::after {
    content: ""; position: absolute; top: 50%; left: 50%;
    width: 14px; height: 2px; background-color: #fff !important;
    display: block;
}
.close-business::before { transform: translate(-50%, -50%) rotate(45deg); }
.close-business::after  { transform: translate(-50%, -50%) rotate(-45deg); }

/* 2. 「事業一覧（info）」側のボタンがクリックされた時の色（赤） */
/* ボタンの親要素のどこかに info という文字があれば赤にする */
:has(.info-modal-trigger) + dialog .close-business,
:has(.info-modal-trigger) + #box-frame .close-business {
    background-color: #911d16 !important;
}

/* 3. 「料金プラン（ryoukin）」側のボタンがクリックされた時の色（青） */
/* ボタンの親要素のどこかに ryoukin という文字があれば青にする */
:has([href*="ryoukin"]) + dialog .close-business,
:has([href*="ryoukin"]) + #box-frame .close-business {
    background-color: #1d5c87 !important;
}/* 1. ×印を出す（これが無いと中が真っ白になります） */
.close-business::before, .close-business::after {
    content: "";
    position: absolute;
    top: 50%; left: 50%;
    width: 14px; height: 2px;
    background-color: #fff !important;
    display: block;
}
.close-business::before { transform: translate(-50%, -50%) rotate(45deg); }
.close-business::after  { transform: translate(-50%, -50%) rotate(-45deg); }