@charset "utf-8";

/*----------------------------------------------------------------
 /category/ under
----------------------------------------------------------------*/
/*----------------------------------------------------------------
 styles
----------------------------------------------------------------*/
.s-mark{
	position			: absolute;
	top					: 0;
	left				: -15px;
	z-index				: 5;
	width				: 100%;
	pointer-events		: none;
}

/*-----------------------------------------------------
 mainview
-----------------------------------------------------*/
#mainview{ position: relative; }

/* information
-----------------------------------------------------*/
#mainview .information{
	overflow			: hidden;
	position			: absolute;
	bottom				: -31px;
	z-index				: 2;
	width				: 100%;
	background			: var(--main-color);
	text-align			: center;
	font-size			: 1.1rem;
	font-weight			: bold;
	padding				: 6px 0;
	color				: #FFF;
}
#mainview .information a{
	display				: block;
	line-height			: 35px;
	text-decoration		: none;
	color				: #FFF;
}
@media screen and (min-width: 768px) {
#mainview .information{
	bottom				: -37px;
	font-size			: 1.4rem;
}
#mainview .information a{ line-height: 40px; }
}


/*-----------------------------------------------------
 intro
-----------------------------------------------------*/
#intro{ background: var(--base-color); }

#intro .container{ padding: 65px 0 5px 0; font-size: 1.6rem;}
@media screen and (min-width: 768px) {
#intro .container{ padding: 80px 0 30px 0; }
}

#intro .close-message{
	text-align			: left;
	padding				: 30px;
	color				: #FFF;
	background-color	: var(--main-color);
	border-radius		: 10px;
	font-weight			: bold;
}

/* copy
-----------------------------------------------------*/
#intro .copy{
	margin				: 0 0 30px 0;
	text-align			: center;
	font-weight			: bold;
}
@media screen and (min-width: 768px) {
#intro .copy{
	margin				: 20px 0 60px 0;
	font-size			: 2.2rem;
}
}

/* logo
-----------------------------------------------------*/
#intro .logo{
	margin				: 0px auto 20px auto;
	width				: 265px;
}
@media screen and (min-width: 768px) {
#intro .logo{
	margin				: 20px auto 25px auto;
	width				: 530px;
}
}

/* data
-----------------------------------------------------*/
#intro .data{ text-align: center; }
#intro .data small{ font-size: 1rem; }
#intro .data>dl{ margin: 0 0 15px 0; }
#intro .data>dl>dt{
	display				: inline-block;
	background			: var(--main-color);
	padding				: 1px 15px;
	line-height			: 1.1;
	border-radius		: 10px;
	margin				: 0 0 5px 0;
	font-weight			: bold;
	color				: var(--base-color);
}
#intro .data>dl>dd{
	font-weight			: bold;
	line-height			: 1.666;
}
@media screen and (min-width: 768px) {
#intro .data		{ margin: 0 0 30px 0; }
#intro .data>dl		{ margin: 0 0 20px 0; }
#intro .data>dl>dt{
	width				: 120px;
	font-size			: 1.4rem;
	padding				: 4px 0;
	border-radius		: 15px;
}
#intro .data>dl>dd{ font-size: 1.8rem; }
#intro .data small{
	font-size			: 1.2rem;
	position			: relative;
	bottom				: 6px;
}
}

/* banner
-----------------------------------------------------*/
#intro .banner{
	max-width			: 650px;
	margin				: 0 auto 40px auto;
}
#intro .banner>a{
	display				: block;
	margin				: 0 0 10px 0;
}
@media screen and (max-width: 767px) {
#intro .banner{
	margin				: 0 auto 30px auto;
	padding				: 0 15px;
}
}


/*-----------------------------------------------------
 outline
-----------------------------------------------------*/

#outline{
	background			: url(../images/about_bg-sp.jpg) center center /cover no-repeat;
	color				: #FFF;
}
@media screen and (min-width: 768px) {
#outline{ background: url(../images/about_bg.jpg) center center /cover no-repeat; }
}

/* title
-----------------------------------------------------*/
#outline .title{ border-color: #FFF; }
@media screen and (min-width: 768px) {
#outline .title{
	top					: 50px;
	left				: 0px;
}
}

/* btn
-----------------------------------------------------*/
#outline .btn{
	display				: inline-block;
	border				: 2px solid transparent;
	border-radius		: 20px;
	padding				: 12px 50px;
	background			: var(--base-color);
	text-decoration		: none;
	line-height			: 1;
	font-weight			: bold;
	color				: var(--main-color);
}
#outline .btn:hover{
	background			: var(--main-color);
	border				: 2px solid var(--base-color);
	color				: var(--base-color);
}
@media screen and (min-width: 768px) {
#intro .btn{
	border-radius		: 30px;
	font-size			: 1.4rem;
	padding				: 12px 50px;
	min-width			: 300px;
}
}
#intro .btn{
	display				: inline-block;
	border				: 1px solid transparent;
	border-radius		: 20px;
	padding				: 12px 20px;
	background			: var(--main-color);
	text-decoration		: none;
	line-height			: 1;
	font-weight			: bold;
	color				: #FFF;
}
#intro .btn:hover{
	background			: var(--base-color);
	border				: 1px solid var(--main-color);
	color				: var(--main-color);
}
@media screen and (min-width: 768px) {
#intro .btn{
	border-radius		: 20px;
	padding				: 10px 20px;
	min-width			: 180px;
	text-align			: center;
}
}



/* text
-----------------------------------------------------*/
#outline .text{ padding-bottom: 30px; }
#outline .text .text-center{ margin: 30px 0 0 0; }
@media screen and (min-width: 768px) {
#outline .text{
	text-align			: left;
	padding-bottom		: 0;
}
#outline .text .text-center{ margin: 65px 0 0 0; }
}

/*-----------------------------------------------------
 content-navi
-----------------------------------------------------*/
#contents .content-navi ul{
	-js-display			: flex; /* IE */
	display				: -webkit-flex; /* Safari */
	display				: flex;
	flex-direction		: row;
}
#contents .content-navi li{ flex: 1; }
#contents .content-navi li a{
	position			: relative;
	display				: block;
	height				: 125px;
	text-align			: center;
	font-size			: 1.3rem;
	color				: var(--main-color);
}
#contents .content-navi li a:hover{ opacity: 0.7; }
#contents .content-navi li:nth-child(even) a{ background: var(--base-color); }
#contents .content-navi li:nth-child(odd) a{ background: #e8d400; }
#contents .content-navi li a span{
	display				: block;
	position			: absolute;
	top					: 50%;
	transform			: translateY(-50%);
	width				: 100%;
	font-weight			: bold;
}
#contents .content-navi li a .fas{
	margin				: 0 0 8px 0;
	font-size			: 2.4rem;
}
@media screen and (min-width: 768px) {
#contents .content-navi li a{
	height				: 250px;
	font-size			: 2.2rem;
}
#contents .content-navi li a .fas{ font-size: 4.5rem; }
}

.banner ul{
	display: flex;
	flex-direction: column;
	gap: 20px;
}