@charset "utf-8";

div#bodybox {
	padding: 0;
	padding-top: 70px;
	margin: 0;
	position: relative;
}

div#containerbox {
	padding: 0;
	margin: 0;
	position: relative;
	background-color: #fff;
}

div#container {
	padding: 0;
	margin: 0;
	position: relative;
	overflow: hidden;
}

body.sidenavi div#container {
}

div#contents {
	padding: 3vw;
	margin: 0;
	z-index: 0;
}






/*--------------------------------------------
■［サイドナビ ］
--------------------------------------------*/

div#sidenavi {
	position: fixed;
	right: -250px;
	bottom: 0;
	overflow-y: auto;
	border-left: 1px solid #eee;
	width: 250px;
	background-color: #fff;
	z-index: 100;
	transition: all .3s ease-out;
}

div#sidenavi div.sidenavi-cnt {
	position: fixed;
	right: -250px;
	bottom: 0;
	overflow-y: auto;
	border-left: 1px solid #eee;
	width: 250px;
	background-color: #fff;
	z-index: 100;
	transition: all .3s ease-out;
	padding-bottom: 4em;
}

body.open div#sidenavi {
	right: 0;
}

div#sidenavi h3 {
	padding: 0.5em;
	background-color: #333;
	color: #fff;
	font-weight: bold;
}

p#btn-opensidenavi,
p#btn-closesidenavi {
	position: absolute;
	top: 10px;
	right: 10px;
	text-align: center;
	line-height: 1;
}

p#btn-opensidenavi button,
p#btn-closesidenavi button {
	line-height: 1;
	padding: 0;
	margin: 0;
	width: 26px;
	height: 26px;
	border-radius: 0.2em;
	line-height: 26px;
	background-color: #fff;
	border: 1px solid #f5f5f5;
}

p#btn-opensidenavi button {
	background-color: #333;
	border: 1px solid #333;
	color: #fff;
}

body.open p#btn-opensidenavi button {
	display: none;
}

div#sidenavi h4 {
	padding: 0.5em;
	border-bottom: 1px solid #eee;
	position: relative;
	cursor: pointer;
}

div#sidenavi h4.active {
	border-bottom: none;
}

div#sidenavi h4 i {
	width: 1em;
	height: 1em;
	line-height: 1;
	position: absolute;
	right: 0.5em;
	top: 0;
	bottom: 0;
	margin: auto;
	color: #D80700;
}

div#sidenavi h4.active i {
	color: #ccc;
}

div#sidenavi div.accordion-cnt {
	display: none;
	border: 5px solid #f2f2f2;
}
.active + div.accordion-cnt,
div#sidenavi h4.active + div.accordion-cnt {
	display: block !important;
}

div#sidenavi h4 {
	border-bottom: 3px solid #333;
	font-weight: bold;
	font-family: "Roboto Condensed", sans-serif;
	font-size: 1em;
	margin: 0 0 1em 0;
	padding-bottom: 0.3em;
	line-height: 1.3;
	position: relative;
}
div#sidenavi dl {
	padding: 0;
	font-size: 0.8em;
}

div#sidenavi dl dt {
	padding: 0.5em 0.5em 0 0.5em;
}

div#sidenavi dl dt img {
	width: 1em;
	vertical-align: middle;
}

div#sidenavi dl dt i {
	color: #999;
}

div#sidenavi dl dd {
	padding: 0.5em;
	border-bottom: 1px solid #eee;
}

div#sidenavi dl dd h5 {
	padding: 0.3em 0.5em;
	font-size: 1.1em;
	border-bottom: none;
	background-color: #eee;
	margin-top: 0.5em;
}

div#sidenavi dl dd h5:first-child {
	margin-top: 0;
}
div#sidenavi dl dd ul.h12 {max-height: 12em;}
div#sidenavi dl dd ul.h15 {max-height: 15em;}
div#sidenavi dl dd ul.h20 {max-height: 20em;}
div#sidenavi dl dd ul.h25 {max-height: 25em;}
div#sidenavi dl dd ul.h30 {max-height: 30em;}
div#sidenavi dl dd ul.h50 {max-height: 50em;}
div#sidenavi dl dd ul.h200 {max-height: 200em;}
div#sidenavi dl dd ul.large {max-height: 400em;}

div#sidenavi dl dd ul {
	max-height: 10em;
	overflow-y: auto;
	border: 1px solid #eee;
}

div#sidenavi dl dd ul ul {
	margin-left: 1.5em;
	border: none;
	overflow-y: none;
	max-height: inherit;
	border-top: 1px dotted #eee;
}

div#sidenavi dl dd ul li {
	border-bottom: 1px dotted #eee;
}

div#sidenavi dl dd ul li label {
	margin: 0;
	display: block;
}

div#sidenavi dl dd ul li label img {
	width: 1.6em;
	height: 1.6em;
	margin-right: 0.5em;
	vertical-align: middle;
	display: inline-block;
}

div#sidenavi dl dd ul li label span {
	padding: 0.5em;
	display: block;
}

div#sidenavi dl dd ul li label input:checked + span {
	background-color: #FAE1E0;
}

div#sidenavi p.btn-apply {
	position: sticky;
	left: 0;
	right: 0;
	bottom: 0;
}

div#sidenavi p.btn-apply button.btn {
	width: calc(100% - 1em);
	display: block;
	margin: 0.5em;
}



/*--------------------------------------------
■［共通］
--------------------------------------------*/

div#main {
	padding: 0;
	margin: 0;
	position: relative;
}

div#main div.main-container {
	max-width: 1200px;
	margin: 0 auto;
	position: relative;
	padding: 0 10px;
	box-sizing: border-box;
}

div#main p {
	margin-bottom: 2em;
}

div#main *:first-child {
	margin-top: 0;
}

div#main *:last-child {
	margin-bottom: 0;
}

div#main hr {
	margin: 4em 0;
	border: none;
	height: 1px;
	clear: both;
	background-color: #a6a8a9;
}



/*--------------------------------------------
■［ページャー］
--------------------------------------------*/

ul.pager {
	margin: 3vw 0;
	text-align: center;
	font-size: 0;
}

ul.pager li {
	display: inline-block;
	font-size: 1rem;
	line-height: 1;
	vertical-align: middle;
	margin-left: -1px;
}

ul.pager li a,
ul.pager li strong,
ul.pager li span {
	display: block;
	border: 1px solid #D80700;
	color: #D80700;
	text-decoration: none;
	padding: 0.8em 1em;
	height: 2.8em;
}

ul.pager li:first-child a,
ul.pager li:first-child strong,
ul.pager li:first-child span {
	border-radius: 0.3em 0 0 0.3em;
}

ul.pager li:last-child a,
ul.pager li:last-child strong,
ul.pager li:last-child span {
	border-radius: 0 0.3em 0.3em 0;
}

ul.pager li strong {
	color: #fff;
	background-color: #D80700;
}

ul.pager li span {
	color: #999;
	border-color: #999;
}



/*--------------------------------------------
■［モーダル］
--------------------------------------------*/

div#mw-shade {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	max-width: 100%!important;
	height: 100%;
	background: #fff;
	z-index: 1000;
	cursor: pointer;
}

div#mw-shade:after {
	position: absolute;
	right: 0.5em;
	top: 0.5em;
	content: "\f057";
	font-family: 'Font Awesome 5 Free';
	font-weight: 400;
	color: #333;
	line-height: 1;
}

div#mw-shade img {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto;
	max-width: 90%;
	max-height: 90%;
}

div.modal {
	width: 100%;
	height: 100vh;
	position: fixed;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	z-index: 1000;
	display: none;
	background-color: rgba(0, 0, 0, 0.8);
}
div.modal-container {
	background-color: #fff;
	max-width: 90%;
	max-height: 90vh;
	width: 980px;
	position: fixed;
	left: 50%;
	top: 50%;
	transform: translate(-50%,-50%);
	padding: 20px;
	z-index: 1200;
	overflow-y: hidden;
	border-radius: 0.5em;
	box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.5);
}
div.modal-container.w980 {
	width: 980px;
}
div.modal-container.w1100 {
	width: 1100px;
}
div.modal-container.w1280 {
	width: 1280px;
}
div.modal-container.w1600 {
	width: 1600px;
}

div.modal-container p.close {
	position: fixed;
	right: 1em;
	top: 1em;
	z-index: 100;
}

div.modal-container p.close button.mw-close {
	display: block;
	margin: 0;
	padding: 0;
	line-height: 1;
	color: #fff;
	width: 26px;
	height: 26px;
	font-size: 20px;
	line-height: 1;
	background-color: #333;
	text-align: center;
}

div.modal-container div.modal-content {
	padding-bottom: 0;
	position: relative;
	max-height: calc(90vh - 3vw);
	z-index: 1;
}

div.modal-container div.modal-content > div.modal-sc {
	overflow-y: auto;
	max-height: calc(90vh - (3vw + 8em));
	position: relative;
	padding-top: 20px;
	padding-bottom: 20px;
}
div.modal-container div.modal-content > div.modal-sc.nosc {
	overflow-y: none !important;
	padding-bottom: 0 !important;
}

div.modal-container div.modal-content > div.btnarea {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: #eee;
	margin: 0;
}

div.modal-container div.modal-content > div.btnarea {
	position: sticky;
	bottom: 0;
}

div.modal-container div.modal-content > div.btnarea p {
	margin: 0.4em 0.2em !important;
}

div.modal-container div.modal-content h3 {
	font-size: 1.2em;
	position: relative;
	margin: -20px -20px 0 -20px !important;
	color: #333;
	padding: 0.75em 1em;
	font-weight: normal;
	font-weight: bold;
	border-bottom: 1px solid #eee;
	text-overflow: ellipsis;
	overflow: hidden;
	white-space: nowrap;
}
div.modal-container div.modal-content h3 i {
	color: #D90000;
}
div.modal-container div.modal-content video {
	max-width: 100%;
}
div.modal-container div.modal-content div.iframevideo {
	width: 100%;
	position: relative;
	padding-top: 56.25%;
}
div.modal-container div.modal-content div.iframevideo iframe {
	width: 100%;
	height: 100%;
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	margin: auto;
}


/*--------------------------------------------
■［タブメニュー］
--------------------------------------------*/

ul.tab-menu {
	padding: 0 10px;
	display: flex;
	gap: 5px;
}
ul.tab-menu.l {
	padding: 10px 0;
	float: left;
	gap: 5px;
	flex-direction: column;
	max-height: calc(90vh - (3vw + 10em));
	overflow-y: auto;
}
ul.tab-menu.l > li {
	width: 100%;
}
ul.tab-menu > li button {
	font-size: 1em;
	display: block;
	border-radius: 0.3em 0.3em 0 0;
	border: 2px solid #D90000;
	border-bottom: none;
	color: #D90000;
	text-align: center;
	padding: 0.75em;
	line-height: 1;
	height: 100%;
}
ul.tab-menu.l > li button {
	border-radius: 0.3em 0 0 0.3em;
	border: 2px solid #D90000;
	border-right: none;
	width: 100%;
	text-align: left;
}
ul.tab-menu > li button.active {
	color: #fff;
	background-color: #D90000;
}
ul.tab-menu + div.tab-contents {
	border: 3px solid #D90000;
	padding: 20px;
}
ul.tab-menu.l + div.tab-contents {
	float: right
}
ul.tab-menu + div.tab-contents > div[data-tab] {
	/*overflow: hidden;*/
	position: relative;
}
ul.tab-menu + div.tab-contents > div[data-tab].active {
	height: auto;
}
ul.tab-menu.l + div.tab-contents {
	height: calc(90vh - (3vw + 5em));
	overflow-y: auto;
}


/*--------------------------------------------
■［レスポンシブ］
--------------------------------------------*/

@media screen and (max-width: 736px) {



	/*--------------------------------------------
	■［サイドナビ ］
	--------------------------------------------*/

	div#sidenavi {
		position: relative;
		right: auto;
		bottom: auto;
		overflow-y: inherit;
		border-top: 1px solid #eee;
		border-left: none;
		width: auto;
	}


	/*--------------------------------------------
	■［共通］
	--------------------------------------------*/

	div#main p {
		margin-bottom: 1.5em;
	}


}