@charset "utf-8";

/*----------------------------------------------------------------
 /viewing/ under
----------------------------------------------------------------*/
/*----------------------------------------------------------------
 styles
----------------------------------------------------------------*/
/*-----------------------------------------------------
 toc
-----------------------------------------------------*/
.toc{ background: var(--main-color); }
.toc ul{
	-js-display			: flex; /* IE */
	display				: -webkit-flex; /* Safari */
	display				: flex;
	text-align			: center;
	justify-content		: center;
	padding				: 13px 0;
}
.toc ul li{ margin: 0 5px; }
.toc ul a{
	display				: inline-block;
	border-radius		: 20px;
	border				: 1px solid transparent;
	padding				: 5px 15px;
	background			: #FFF;
	text-decoration		: none;
	line-height			: 1;
	font-weight			: bold;
	color				: var(--main-color);
}
.toc ul a:hover{
	border				: 1px solid #FFF;
	background			: transparent;
	color				: #FFF;
}

.toc ul span{
	display				: inline-block;
	border-radius		: 20px;
	border				: 1px solid #FFF;
	padding				: 5px 15px;
	text-decoration		: none;
	line-height			: 1;
	font-weight			: bold;
	color				: #FFF;
}

@media screen and (min-width: 768px) {
.toc ul{ padding: 30px 0; }
.toc ul a{
	width				: 200px;
	padding				: 10px;
}
}

@media screen and (min-width: 768px) {
.toc ul{ padding: 30px 0; }
.toc ul span{
	width				: 200px;
	padding				: 10px;
}
}


/*-----------------------------------------------------
 common
-----------------------------------------------------*/
/* title
-----------------------------------------------------*/
.section .title{
margin: 0 0 15px 0;
color: var(--main-color);
}

/* btn
-----------------------------------------------------*/
.section .btn{
	display				: inline-block;
	border-radius		: 20px;
	border				: 1px solid transparent;
	padding				: 10px 20px;
	text-decoration		: none;
	line-height			: 1;
	font-weight			: bold;
	color				: #FFF;
 	background			: var(--main-color);
}
.section .btn.small{
	padding				: 10px 15px;
	font-size			: 1.4rem;
}
.section .btn.small i.fas{ font-size: 1.4rem; }
.section .btn:hover{ background: transparent;
	border				: 1px solid var(--main-color);
	color				: var(--main-color);
}

/* btn_nolink
-----------------------------------------------------*/
.section .btn_nolink{
	display				: inline-block;
	border-radius		: 20px;
	border				: 1px solid transparent;
	padding				: 10px 20px;
	text-decoration		: none;
	line-height			: 1;
	font-weight			: bold;
	color				: #ffffff;
 	background			: #aaaaaa;
}
.section .btn_nolink.small{
	padding				: 10px 15px;
	font-size			: 1.4rem;
}
.section .btn_nolink.small i.fas{ font-size: 1.4rem; }


/* links
-----------------------------------------------------*/
.section a:not(.btn){ text-decoration: none;
	border-bottom		: 1px dotted var(--main-color);
	color				: var(--main-color);
}




/*-----------------------------------------------------
 guideline
-----------------------------------------------------*/
#guideline{ background: var(--base-color); }
#guideline .container{ padding: 30px 0 40px 0; }
#guideline .title{ margin: 15px 0 30px 0; }
#guideline .coming-soon{
	margin: 5px 0 50px 0;
}

#guideline small{ font-size: 12px; }
@media screen and (min-width: 768px) {
#guideline .container{ padding: 45px 0 80px 0; }
#guideline small{ font-size: 14px; }
}

#guideline h3{
	margin				: 50px 0 20px 0;
	text-align			: center;
	font-weight			: bold;
	font-size			: 1.8rem;
}
@media screen and (min-width: 768px) {
#guideline h3{
	margin				: 40px 0 40px 0;
	font-size			: 3rem;
}
}

/* promise-list
-----------------------------------------------------*/
#guideline .promise-list{
	-js-display			: flex; /* IE */
	display				: -webkit-flex; /* Safari */
	display				: flex;
	flex-direction		: column;
	flex-wrap			: wrap;
	margin				: 40px 0 -40px 0;
}
#guideline .promise-list dd{ margin: 15px 0 40px 0; }
#guideline .promise-list li:last-child dd{ margin: 15px 0 0 0; }

#guideline .promise-list figure{
	-js-display			: flex; /* IE */
	display				: -webkit-flex; /* Safari */
	display				: flex;
	flex-direction		: row;
	align-items			: center;
	font-weight			: bold;
}
#guideline .promise-list figure figcaption{ padding: 0 0 0 10px; }
#guideline .promise-list dd .btn{
	display				: block;
	margin				: 10px 0;
	text-align			: center;
}
@media screen and (max-width: 767px) {
#guideline .promise-list figure img{ width: 16vw; }

}
@media screen and (min-width: 768px) {
#guideline .promise-list{
	margin				: 50px -1.8% 0 -1.8%;
	justify-content		: center;
	flex-direction		: row;
}
#guideline .promise-list li{
	margin				: 0 1.5%;
	flex				: 0 0 30%;
}
#guideline .promise-list dd{ margin: 25px 0 40px 0; }
#guideline .promise-list dd .btn{ margin: 15px 0; }
#guideline .promise-list figure img{
	flex: 0 0 120px;
	width: 120px;
}
#guideline .promise-list figure figcaption{
	flex				: 0 0 calc(100% - 10px - 120px);
	padding				: 0 0 0 20px;
	font-size			: 2rem;
}
}

/* guideline-list
-----------------------------------------------------*/
#guideline .guideline-list{ margin: 10px 0 0 0; }
#guideline .guideline-list li{
	position			: relative;
	margin				: 0 0 5px 0;
	padding				: 0 0 0 1.2em;
}
#guideline .guideline-list li:before{
	content				: "●";
	position			: absolute;
	left				: 0;
	color				: var(--main-color);
}
#guideline .guideline-list li li:before{ content: "・"; }
#guideline .guideline-list + p{ margin: 0 0 40px 0; }