@charset "utf-8";

/*----------------------------------------------------------------
 /category/ under
----------------------------------------------------------------*/
#main .btn{
	margin: 5px 0;
	display: inline-block;
	background: var(--main-color);
	text-align: center;
	color: #FFF;
	text-decoration: none;
	padding: 3px 20px;
	border-radius: 25px;
	font-weight: bold;
	border: 1px solid transparent;
}
#main .btn:hover{
	background: transparent;
	border: 1px solid var(--main-color);
	color: var(--main-color);
}
#main .btn.btn-big{
	display: block;
	margin: 0 auto;
	font-size: 1.6rem;
	max-width: 80%;
	padding: 10px;
	border-radius: 30px;
}
@media screen and (min-width: 768px) {
#main .btn{
	padding: 5px 25px;
}
#main .btn.btn-big{
	font-size: 1.8rem;
	max-width: 470px;
	padding: 14px;
}
}
#main .btn>i{
	margin: 0 5px 0 0;
}


#main .note{
	background: rgba(0, 0, 0, 0.03);
	padding: 2em 3em;
	margin: 80px 0;
	border-radius: 30px;
}
#main .note p{
	margin-top: 1.5em;
}
/*----------------------------------------------------------------
 outline
----------------------------------------------------------------*/

/*-----------------------------------------------------
 outline
-----------------------------------------------------*/
#intro{
	padding				: 1px 0;
	background			: var(--base-color);
}
@media screen and (max-width: 767px) {
#intro{
	padding				: 40px 0 1px 0;
	background			: var(--base-color);
}
}
/* title
-----------------------------------------------------*/
#intro .title{
	position			: absolute;
	display				: inline-block;
	line-height			: 1;
	font-weight			: bold;
}

@media screen and (max-width: 767px) {
#intro .title{
	top					: -20px;
	border-bottom		: 1px solid #000;
	padding				: 0 0 13px 0;
	font-size			: 1.3rem;
}
}
@media screen and (min-width: 768px) {
#intro .title{
	top					: 23px;
	left				: 35px;
	border-bottom		: 2px solid #000;
	padding				: 0 0 18px 0;
	font-size			: 1.6rem;
}
}
/*-----------------------------------------------------
 about
-----------------------------------------------------*/
#about{
	padding				: 1px 0;
	background			: var(--base-color);
}

/* copy
-----------------------------------------------------*/
#about .copy{
	text-align: center;
}

@media screen and (max-width: 767px) {
#about .copy{
	margin				: 35px 0 0 0;
	font-size			: 1.4rem;
	line-height			: 2.1;
}
#about .copy p{ margin: 0 0 18px 0; }
}
@media screen and (min-width: 768px) {
#about .copy{
	margin				: 60px 0 100px 0;
	font-size			: 1.8rem;
	line-height			: 2.1;
}
#about .copy p{ margin: 0 0 35px 0; }
}

/* copy
-----------------------------------------------------*/
#about .message{
	margin				: 60px 0 160px 0;
}
#about .message rt{
	font-size: 60%;
	position: relative;	
	bottom: -3px;
}
#about .message p{ margin: 0 0 30px 0; }
@media screen and (max-width: 767px) {
#about .message{
	margin				: 60px 0 50px 0;
}#about .message p{ margin: 0 0 15px 0; }
}


#about .intro{}
#about .intro h3{
	color: var(--main-color);
	font-weight: bold;
	font-size: 2rem;
	line-height: 1.4;
	margin: 20px 0 5px 0;
}
#about .intro h4{
	color: var(--main-color);
	font-weight: bold;
	font-size: 1.8rem;
	line-height: 1.4;
	margin: 20px 0 5px 0;
}
#about .intro p{
	line-height: 2;
}
#about .intro nav{
	margin: 10px 0;
	text-align: center;
}
#about .intro .row{
	margin: 30px 0;
}
#about .intro .row:last-child{
	margin-bottom: 0;
	padding-bottom: 40px;
}
#about .intro .row img{
	border-radius: 10px;
}

#about .intro .col{
	margin: 20px 0;
}

@media screen and (min-width: 768px) {
#about .intro h3{
	font-size: 3rem;
	margin: 40px 0 10px 0;
}
#about .intro h4{
	font-size: 2.4rem;
	margin: 40px 0 5px 0;
}
#about .intro .row{
	display: block;
	margin: 40px 0 60px 0;
}

#about .intro .row>.col{
	margin: 40px 0;
}
#about .intro nav{
	margin: 10px 0 30px 0;
}
}



/*-----------------------------------------------------
 event
-----------------------------------------------------*/
#event{ background: #f6f6ee; }
#event .container{ padding: 30px 0; }
@media screen and (min-width: 768px) {
#event .container{ padding: 65px 0; }
}

#event a{
	text-decoration		: none;
	border-bottom		: 1px dotted var(--main-color);
	color				: var(--main-color);
}
#event a:hover{ border-bottom: none; }


/* outline-list
-----------------------------------------------------*/
#event .outline-list{ margin: 20px 0 40px 0; }
#event .outline-list li{ margin: 0 0 5px 0; }

#event .outline-list dl{
	-js-display			: flex; /* IE */
	display				: -webkit-flex; /* Safari */
	display				: flex;
	flex-direction		: column;
}

#event .outline-list dl>dt span{
	display				: block;
	margin				: 5px 0 0 0;
	padding				: 2px 0;
	border-radius		: 10px;
	background			: #cccc99;
	text-align			: center;
	line-height			: 1;
	font-size			: 1rem;
	font-weight			: bold;
}
#event .outline-list dl>dd small{ font-size: 1rem; }
#event .outline-list img{ margin: 0 5px 0 0; }

@media screen and (max-width: 767px) {
#event .outline-list li{ margin: 0 0 20px 0; }
#event .outline-list dl{ flex-direction column; }
#event .outline-list dl>dt{ margin: 0 0 5px 0; }
#event .outline-list dl>dt span{ width: 90px; }
}

@media screen and (min-width: 768px) {
#event .outline-list	{ margin: 40px 0; }
#event .outline-list li	{ margin: 0 0 10px 0; }

#event .outline-list dl{
	flex-direction		: row;
	align-items: flex-start; }
#event .outline-list dl>dt{ flex: 0 0 120px; }
#event .outline-list dl>dt span{
	margin				: 3px 0 0 0;
	border-radius		: 20px;
	padding				: 5px 0;
	font-size			: 1.4rem;
}

#event .outline-list dl>dd{
	padding				: 0 0 0 15px;
	font-size			: 1.8rem;
}
#event .outline-list dl>dd.font16{ font-size: 1.6rem; }
#event .outline-list dl>dd small{ font-size: 1.4rem; }
}


/*-----------------------------------------------------
 archives
-----------------------------------------------------*/
#archives{}
#archives .archive-list li a{
	display				: block;
	position			: relative;
	height				: 240px;
	background-repeat	: no-repeat;
	background-position	: center center;
	background-size		: cover;
}
#archives .archive-list li.archive2023 a{ background-image: url(../images/archive2023.jpg); }
#archives .archive-list li.archive2022 a{ background-image: url(../images/archive2022.jpg); }
#archives .archive-list li.archive2021 a{ background-image: url(../images/archive2021.jpg); }
#archives .archive-list li.archive2020 a{ background-image: url(../images/archive2020.jpg); }
#archives .archive-list li.archive2019 a{ background-image: url(../images/archive2019.jpg); }
#archives .archive-list li.archive2018 a{ background-image: url(../images/archive2018.jpg); }
#archives .archive-list li.archive2017 a{ background-image: url(../images/archive2017.jpg); }
#archives .archive-list li.archive2016 a{ background-image: url(../images/archive2016.jpg); }
#archives .archive-list li a:hover{
	opacity: 0.7;
}

#archives .archive-list li a span{
	position			: absolute;
	top					: 50%;
	left				: 50%;
	transform			: translateY(-50%) translateX(-50%);
	display				: inline-block;
	border				: 1px solid transparent;
	border-radius		: 15px;
	width				: 200px;
	padding				: 10px 15px;
	background			: var(--main-color);
	line-height			: 1;
	text-align			: center;
	text-decoration		: none;
	font-weight			: bold;
	color				: #FFF;
}

@media screen and (min-width: 768px) {
#archives .archive-list li a{ height: 600px; }
#archives .archive-list li a span{
	border-radius		: 30px;
	width				: 300px;
	padding				: 21px 0;
	font-size			: 18px;
}
}