@charset "utf-8";

/*----------------------------------------------------------------
 global styles
----------------------------------------------------------------*/

/* breadCrumb
-----------------------------------------------------*/
.breadCrumb{ margin: 10px 0; }
.breadCrumb dl{
	clear				: both;
	text-align: right;
	font-weight: var(--font-weight-r);
}
.breadCrumb dl dt{ display: none; }
.breadCrumb dl dd{
	font-size			: 1.2rem;
	line-height			: 1;
	color				: var(--main-color);
}
.breadCrumb dl dd a{
	text-decoration		: underline;
	padding				: 0 0 5px 0;
}
.breadCrumb dl dd a:hover{ text-decoration: none; }
.breadCrumb dl dd .home{  }
.breadCrumb dl dd .depth{
	padding				: 0 5px;
	color				: var(--link-color);
}
@media screen and (max-width: 768px) {
.breadCrumb{
	display: none;
}
}
/*----------------------------------------------------------------
 inside .content
----------------------------------------------------------------*/

/*----------------------------------------------------------------
 styles
----------------------------------------------------------------*/
.page-header{
	margin: 15px 0;
}
.page-header h1{
	font-family: var(--font-family-en);
	font-size: 185.7142857%;
	line-height: 1.5;
	text-align: center;
	color: var(--main-color);
	margin: 0.5em 0 0 0;
}

@media screen and (min-width: 769px) {
.page-header{
	margin: 0 0 65px 0;
}
.page-header h1{
	font-size: 325%;
}
}



.toc-link ul{
	display				: flex;
	flex-direction		: column;
	gap					: 10px;
	margin				: 0 0 50px 0;
}
.toc-link a{
	position			: relative;
	display				: block;
	background			: var(--bg-color);
	border-radius		: 6px;
	line-height			: 40px;
	color				: var(--main-color);
	padding: 0 1em;
	border: 1px solid var(--sub-color);
}
.toc-link li a::after{
	position			: absolute;
	right				: 10px;
	top					: 50%;
	transform			: translateY(-50%);
	content				: "\f107";
	font-family			: "Font Awesome 6 Free";
	font-weight			: 900;
	display				: inline-block;
	width				: 20px;
	border-radius		: 10px;
	background			: var(--main-color);
	height				: 20px;
	text-align			: center;
	line-height			: 20px;
	font-size			: 10px;
	color				: var(--bg-color);
}
/* section
-----------------------------------------------------*/
.content .section{
    margin: 50px auto;
}
.content .section:first-child{
	margin-top: 0;
}


/*-----------------------------------------------------
 content
-----------------------------------------------------*/

/* heading
-----------------------------------------------------*/
.content h2:not([class]){
	margin				: 0 0 1em 0;
	text-align			: center;
	font-size			: 156.25%;
	font-family: var(--font-weight-m);
	color				: var(--main-color);
}
.content h2:not([class])::after{
	content				: "・・";
	display				: block;
	font-size			: 120%;
	letter-spacing		: -0.4em;
	line-height			: 22px;
}


/* inline elements
-----------------------------------------------------*/
.content a:not([class]){ text-decoration: underline; }
.content a:not([class]):hover{ text-decoration: none; }


/* block elements
-----------------------------------------------------*/
.content p,
.content pre{
	margin				: calc(1em * var(--line-height)) 0;
}
.content p,
.content address,
.content dd{
	font-size: calc(var(--font-size) * 0.875);
	font-weight: var(--font-weight-r);
}

.card{
    height: 100%;
    border: 1px solid var(--sub-color);
    border-radius: var(--border-radius);
    padding: 1em;
}
.card h3{
    text-align: center;
    color: var(--main-color);
	line-height: 1.2;
	margin: 0 0 1em 0;
}
.card p{
    margin: 1em 0;
}
.card p:has(.btn){
    margin: 0;
    text-align: center;
}

@media screen and (min-width: 769px) {
.card{
    padding: 2em;
}
.card h3{
    font-size: 137.5%;
}
}