@charset "utf-8";

/*----------------------------------------------------------------
 TopPage only
----------------------------------------------------------------*/
/*----------------------------------------------------------------
 base
----------------------------------------------------------------*/
/*----------------------------------------------------------------
 layout
----------------------------------------------------------------*/
/*----------------------------------------------------------------
 styles
----------------------------------------------------------------*/

/*-----------------------------------------------------
 mv
-----------------------------------------------------*/
#mv{ background: url(../images/mv.jpg) center center /cover no-repeat; }
#mv .container{ height: 40vh; }
@media screen and (min-width: 769px) {
#mv .container{ height: 70vh; }
}

/* copy
-----------------------------------------------------*/
#mv .copy{
	top					: 50%;
	left				: 50%;
	transform			: translateY(-50%) translateX(-50%);
	width				: 80%;
	padding				: 10px;
}
@media screen and (min-width: 1050px) {
#mv .copy{

	width				: 500px;
	padding				: 15px 0 0 15px;
}
#mv .copy img{
	width				: 472px;
	height				: 45px;
}
}

/*-----------------------------------------------------
 introduction
-----------------------------------------------------*/
/* description
-----------------------------------------------------*/
#introduction .description{
	margin				: var(--content-padding) 0;
	text-align			: center;
	font-family			: var(--font-family-serif);
	font-weight			: bold;
	line-height			: 2;
}
@media screen and (min-width: 769px) {
#introduction .description{ font-size: 1.8rem; }
#introduction .description>p{ margin: 0;}
}


/*-----------------------------------------------------
 nav
-----------------------------------------------------*/
#nav{ margin: var(--content-padding) 0; }


/* nav-list
-----------------------------------------------------*/
#nav .nav-list li:not(:last-child){ margin: 0 0 20px 0; }
#nav .nav-list li>a{ text-decoration: none; }

#nav .nav-list dl{
	display					: grid;
	grid-template-columns	: 100px auto;
	grid-template-rows		: auto auto;
	gap						: 0px 0px;
	grid-template-areas:
		"image text"
		"link link";
}
#nav .nav-list .image	{ grid-area: image; }
#nav .nav-list .text	{ grid-area: text; }
#nav .nav-list .link	{ grid-area: link; }


#nav .nav-list .image img{
	width			: 100%;
	height			: 100%;
	object-fit		: cover;
}

#nav .nav-list .text {
	padding			: 10px 15px;
	background		: var(--subbg-color);
	font-size		: 1.2rem;
	line-height		: 1.5;
	color			: var(--text-color);
}
#nav .nav-list .text strong{
	display			: block;
	margin			: 0 0 5px 0;
	font-family		: var(--font-family-serif);
	font-size		: 1.6rem;
}

#nav .nav-list .link {
	position		: relative;
	padding			: 5px 25px 10px 25px;
	background		: var(--sub-color);
	text-align		: right;
	font-size		: 1.2rem;
	color			: var(--base-color);
}
#nav .nav-list .link:after{
	content			: "";
	position		: absolute;
	right			: 10px;
	bottom			: 8px;
	display			: block;
	width			: 110px;
	height			: 10px;
	background		: url(../../common/images/arrow.svg) right bottom /contain no-repeat;
}

@media screen and (min-width: 769px) {
#nav .nav-list dl{
	grid-template-columns	: 200px auto;
	grid-template-areas:
		"image text"
		"image link";
}
#nav .nav-list .text {
	padding			: 20px 25px;
	font-size		: 1.4rem;
}
#nav .nav-list .text strong{
	margin			: 0 0 10px 0;
	font-size		: 2rem;
}
#nav .nav-list .link {
	padding			: 8px 58px 10px 25px;
	font-size		: 1.4rem;
}
#nav .nav-list .link:after{
	width			: 170px;
	height			: 12px;
}
}
@media all and (-ms-high-contrast:none) {
#nav .nav-list dl{
	display			: -ms-grid;
	-ms-grid-columns: 200px 400px;
	-ms-grid-rows	: auto auto;
	gap				: 0px 0px;
}

#nav .nav-list .image {
	-ms-grid-row		: 1;
	-ms-grid-row-span	: 2;
	-ms-grid-column		: 1;
	-ms-grid-column-span: 1;
}

#nav .nav-list .text {
	-ms-grid-row		: 1;
	-ms-grid-row-span	: 1;
	-ms-grid-column		: 2;
	-ms-grid-column-span: 2;
}

#nav .nav-list .link {
	-ms-grid-row		: 2;
	-ms-grid-row-span	: 1;
	-ms-grid-column		: 2;
	-ms-grid-column-span: 1;
}
}


/*-----------------------------------------------------
 information
-----------------------------------------------------*/
#information{ margin: var(--content-padding) 0; }


/* information-list
-----------------------------------------------------*/
#information .information-list{ margin: 10px 0; }
#information .information-list>li{
	margin				: 5px 0;
	list-style			: none;
}
#information .information-list li,
#information .information-list a,
#information .information-list dt{
	display				: flex;
	flex-direction		: column;
}
#information .information-list li time{
	font-weight			: bold;
	color				: var(--main-color);
}
#information .information-list li strong{ font-weight: normal; }


#information .information-list a{
	position			: relative;
	text-decoration		: none;
	color				: var(--text-color);
}

#information .information-list a>strong:after{
	content				: "\f35d";
	display				: inline-block;
	margin				: 0 0 0 5px;
	font-family			: "Font Awesome 5 Free";
	font-size			: 80%;
	font-weight			: 900;
}

#information .information-list dt>strong{
	cursor: pointer;
}
#information .information-list dt>strong:after{
	content				: "\f0d7";
	position			: absolute;
	right				: 0;
	text-decoration		: none;
	font-family			: "Font Awesome 5 Free";
	font-weight			: 900;
	transition			: transform 0.2s ease-in .2s;
}
#information .information-list dt.open>strong:after{ transform: rotate(180deg); }
#information .information-list dd{
	margin				: 8px 0 0 0;
	padding				: 15px 20px;
	background			: var(--subbg-color);
	font-size			: 1.2rem;
}

#information .information-list dt>strong,
#information .information-list a>strong{ text-decoration: underline; }

#information .information-list dt>strong:hover,
#information .information-list a>strong:hover{ text-decoration: none; }

@media screen and (min-width: 769px) {
#information .information-list{ margin: 25px 0; }
#information .information-list li{ margin: 15px 0; }
#information .information-list li,
#information .information-list a,
#information .information-list dl,
#information .information-list dt{
	flex-direction		: row;
	width				: 100%;
}
#information .information-list li>time,
#information .information-list a>time,
#information .information-list dt>time{ flex: 0 0 130px; }

#information .information-list li>strong,
#information .information-list a>strong,
#information .information-list dt>strong{ flex: 0 0 calc(100% - 130px); }

#information .information-list dd{
	margin				: 15px 0 0 0;
	padding				: 20px 30px;
	background			: var(--subbg-color);
	font-size			: 1.6rem;
}
}