@charset "utf-8";
/*
************************************************************************
 ボックス
************************************************************************
*/
.box
{
	box-shadow: 2px 2px 2px 0px #00000022;
	border:1px solid #CCCCCC;
	border-radius:0.5em;
	overflow:hidden;
}
.box > .box-title
{
	padding:0.8em;
	border-bottom:2px solid var(--sub-color-01);
	background-color:#ebf1f2;
	display: flex;
}
.box > .box-title > .main
{
	font-size:1.2em;
	font-weight:bold;
    flex: 0 1 100%;
    white-space: pre-wrap;
}
.box > .box-title > .ope
{
	position:absolute;
	top:50%;
	right:1.0em;

	transform:translateY(-50%);
}

.box > .box-sub-title
{
	margin:1em;
	margin-top:1.5em;
	padding:0.25em 0.5em;
	border-left:2px solid var(--sub-color-01);
}
.box > .box-sub-title > .main
{
	font-weight:bold;
	display:block;
}
.box > .box-sub-title > .sub
{
	font-size:0.9em;
	font-weight:normal;
	display:block;
	margin-top:0.0em;
}

.box > .box-footer
{
	padding:0.8em;
	border-top:2px solid var(--sub-color-01);
	background-color:#EFEFEF;
	
	display: flex;
	align-items: center;
	align-content: center;
}
.box > .box-footer > *
{
	flex:1 0 auto;
}
.box > .box-footer > .box-footer-left
{
	display: flex;
	align-items: center;
	align-content: center;
	margin:-0.25em;
}
.box > .box-footer > .box-footer-left > *
{
	margin:0.25em;
}
.box > .box-footer > .box-footer-center
{
	display: flex;
	justify-content: center;
	align-items: center;
	align-content: center;
}
.box > .box-footer > .box-footer-right
{
	display: flex;
	justify-content: flex-end;
	align-items: center;
	align-content: center;
}
.box > .box-contents
{
	margin:1.0em;
}

.grid
{
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	margin:-0.5em;
}
.grid > *
{
	margin:0.5em;
	flex:0 0 calc(100% - 1em);
}
.grid > *.col-01 {flex: 0 0 calc(  8.33333% - 1em); width:calc(  8.33333% - 1em);}
.grid > *.col-02 {flex: 0 0 calc( 16.66666% - 1em); width:calc( 16.66666% - 1em);}
.grid > *.col-03 {flex: 0 0 calc( 25.00000% - 1em); width:calc( 25.00000% - 1em);}
.grid > *.col-04 {flex: 0 0 calc( 33.33333% - 1em); width:calc( 33.33333% - 1em);}
.grid > *.col-05 {flex: 0 0 calc( 41.66666% - 1em); width:calc( 41.66666% - 1em);}
.grid > *.col-06 {flex: 0 0 calc( 50.00000% - 1em); width:calc( 50.00000% - 1em);}
.grid > *.col-07 {flex: 0 0 calc( 58.33333% - 1em); width:calc( 58.33333% - 1em);}
.grid > *.col-08 {flex: 0 0 calc( 66.66666% - 1em); width:calc( 66.66666% - 1em);}
.grid > *.col-09 {flex: 0 0 calc( 75.00000% - 1em); width:calc( 75.00000% - 1em);}
.grid > *.col-10 {flex: 0 0 calc( 83.33333% - 1em); width:calc( 83.33333% - 1em);}
.grid > *.col-11 {flex: 0 0 calc( 91.66666% - 1em); width:calc( 91.66666% - 1em);}
.grid > *.col-12 {flex: 0 0 calc(100.00000% - 1em); width:calc(100.00000% - 1em);}
.grid > *.col-grow{flex: 1 1 auto;}
.grid > *.col-shrink{flex: 0 1 auto;}
.grid > *.grid-center{align-self:center;}

.grid.no-margin
{
	margin:0;
}
.grid.no-margin > *
{
	margin:0;
}


.notice-box
{
	border:1px solid #CCCCCC;
	background-color:#EFEFEF;
	padding:1em;
	display: flex;
}
.notice-box > .eyecatch
{
	padding-right:1em;
}
.notice-box > .eyecatch > .mark
{
	font-size:2.0em;
	line-height:1.2em;
	color:var(--main-color-01);
}
.notice-box > .info
{
	border-left:1px solid #CCCCCC;
	padding-left:1em;
	align-self: center;
}
.notice-box > .info > .title
{
	margin-bottom:0.5em;
}
.notice-box > .info > .title > .main
{
	font-size:1.6em;
	line-height:1.2em;
	font-weight:bold;
	color:#000000;
}
.notice-box > .info > .description
{
	line-height:1.4;
}
.notice-box > .info > .description > li
{
	margin-bottom:0.5em;
}
.notice-box > .info > .description > li:last-child
{
	margin-bottom:0.0em;
}

.warning-box
{
	border:1px solid #d6b6b6;
	background-color:#fcdede;
	padding:1em;
	display: flex;
}
.warning-box > .eyecatch
{
	padding-right:1em;
}
.warning-box > .eyecatch > .mark
{
	font-size:2.0em;
	line-height:1.2em;
	color:#a32a2a;
}
.warning-box > .info
{
	border-left:1px solid #d6b6b6;
	padding-left:1em;
	align-self: center;
}
.warning-box > .info > .title
{
	margin-bottom:0.5em;
}
.warning-box > .info > .title > .main
{
	font-size:1.6em;
	line-height:1.2em;
	font-weight:bold;
	color:#781919;
}
.warning-box > .info > .description
{
	line-height:1.4;
}
.warning-box > .info > .description > li
{
	margin-bottom:0.5em;
}
.warning-box > .info > .description > li:last-child
{
	margin-bottom:0.0em;
}

.thema-list
{
	width:100%;
	max-width:1000px;
	margin:4.0em auto;
}
.thema-list .thema-list-item
{
	margin: 2.0em 2.0em;
	display: flex;
	align-items: stretch;
}
.thema-list .thema-list-item .eyecatch
{
	flex:0 0 320px;
}
.thema-list .thema-list-item .contents
{
	margin-left:1em;
	align-self:center;
}
.thema-list .thema-list-item .contents .description
{
	margin:0.5em 0;
}
.thema-list .thema-list-item .contents h2.title
{
	font-size:1.8em;
	font-weight: bold;
}

.scroll
{
	overflow-x:scroll;
}
.scroll::-webkit-scrollbar {
    width: 0.5em;
    height: 0.5em;
}
.scroll::-webkit-scrollbar-track {
    background-color: #EFEFEF;
}
.scroll::-webkit-scrollbar-thumb {
    background-color: var(--main-color-01);
}


.information-list
{
	list-style: none;
	margin: 0%;
	padding: 0%;
}
.information-list > li
{
	display: block;
	margin: 0%;
	padding: 0%;
	margin-bottom: 0.5em;
	border-bottom: 1px solid #CCCCCC;
}
.information-list > li:last-child
{
	margin-bottom: 0.0em;
	border-bottom: 0px solid transparent;
}
.information-list > li > .prop
{
	display: flex;
	align-items: center;

	font-size: 0.8em;
	margin-bottom: 0.5em;
}
.information-list > li > .prop > .date
{
	margin-right: 0.5em;
}
.information-list > li > .title
{
	margin-bottom: 0.5em;
}

/* ################################################################################################ */
/* ## TAB                        ################################################################## */
/* ################################################################################################ */
@media screen and (max-width:1200px) {
}

/* ################################################################################################ */
/* ## スマホサイト用スタイル ###################################################################### */
/* ################################################################################################ */
@media screen and (max-width:640px) {
	.sp-scroll
	{
		overflow-x:scroll;
	}

	.grid > *.col-01 {flex: 0 0 calc( 50.00000% - 1em); width:calc( 50.00000% - 1em);}
	.grid > *.col-02 {flex: 0 0 calc( 50.00000% - 1em); width:calc( 50.00000% - 1em);}
	.grid > *.col-03 {flex: 0 0 calc( 50.00000% - 1em); width:calc( 50.00000% - 1em);}
	.grid > *.col-04 {flex: 0 0 calc( 50.00000% - 1em); width:calc( 50.00000% - 1em);}
	.grid > *.col-05 {flex: 0 0 calc( 50.00000% - 1em); width:calc( 50.00000% - 1em);}
	.grid > *.col-06 {flex: 0 0 calc(100.00000% - 1em); width:calc(100.00000% - 1em);}
	.grid > *.col-07 {flex: 0 0 calc(100.00000% - 1em); width:calc(100.00000% - 1em);}
	.grid > *.col-08 {flex: 0 0 calc(100.00000% - 1em); width:calc(100.00000% - 1em);}
	.grid > *.col-09 {flex: 0 0 calc(100.00000% - 1em); width:calc(100.00000% - 1em);}
	.grid > *.col-10 {flex: 0 0 calc(100.00000% - 1em); width:calc(100.00000% - 1em);}
	.grid > *.col-11 {flex: 0 0 calc(100.00000% - 1em); width:calc(100.00000% - 1em);}
	.grid > *.col-12 {flex: 0 0 calc(100.00000% - 1em); width:calc(100.00000% - 1em);}

	.grid > *.sp-col-01 {flex: 0 0 calc(  8.33333% - 1em); width:calc(  8.33333% - 1em);}
	.grid > *.sp-col-02 {flex: 0 0 calc( 16.66666% - 1em); width:calc( 16.66666% - 1em);}
	.grid > *.sp-col-03 {flex: 0 0 calc( 25.00000% - 1em); width:calc( 25.00000% - 1em);}
	.grid > *.sp-col-04 {flex: 0 0 calc( 33.33333% - 1em); width:calc( 33.33333% - 1em);}
	.grid > *.sp-col-05 {flex: 0 0 calc( 41.66666% - 1em); width:calc( 41.66666% - 1em);}
	.grid > *.sp-col-06 {flex: 0 0 calc( 50.00000% - 1em); width:calc( 50.00000% - 1em);}
	.grid > *.sp-col-07 {flex: 0 0 calc( 58.33333% - 1em); width:calc( 58.33333% - 1em);}
	.grid > *.sp-col-08 {flex: 0 0 calc( 66.66666% - 1em); width:calc( 66.66666% - 1em);}
	.grid > *.sp-col-09 {flex: 0 0 calc( 75.00000% - 1em); width:calc( 75.00000% - 1em);}
	.grid > *.sp-col-10 {flex: 0 0 calc( 83.33333% - 1em); width:calc( 83.33333% - 1em);}
	.grid > *.sp-col-11 {flex: 0 0 calc( 91.66666% - 1em); width:calc( 91.66666% - 1em);}
	.grid > *.sp-col-12 {flex: 0 0 calc(100.00000% - 1em); width:calc(100.00000% - 1em);}

	.thema-list
	{
		width:100%;
		max-width:1000px;
		margin:4.0em auto;
	}
	.thema-list .thema-list-item
	{
		margin: 2.0em 2.0em;
		display: flex;
		flex-wrap: wrap;
		align-items: stretch;
	}
	.thema-list .thema-list-item .eyecatch
	{
		flex:0 0 100%;
	}
	.thema-list .thema-list-item .contents
	{
		margin-left:0em;
		margin-top:1em;
		align-self:center;
	}
	.thema-list .thema-list-item .contents .description
	{
		margin:0.5em 0;
	}
	.thema-list .thema-list-item .contents h2.title
	{
		font-size:1.8em;
		font-weight: bold;
	}
}