@charset "utf-8";

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


#main .note{
	margin				: 80px 0;
	padding				: 2em 3em;
	border-radius		: 30px;
	background			: rgba(0, 0, 0, 0.03);
}
#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; }
}

/* message
-----------------------------------------------------*/
#about .message{
	margin				: 60px 0 160px 0;
}
#about .message rt{
	position			: relative;	
	bottom				: -3px;
	font-size			: 60%;
}
#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; }
}


/* nanda10
-----------------------------------------------------*/
#about .nanda10{ padding: 5em 0; }
#about .nanda10>h2 img{
	margin				: 0 0 1em;
	max-height			: 60px;
}
#about .nanda10>.text{
	margin				: 2em;
	font-size			: 112.5%;
}


@media screen and (min-width: 769px) {
#about .nanda10>h2 img{ max-height: 76px; }
#about .nanda10>.text{
	margin				: 0 2em 4em 2em;
	text-align			: center;
}
}


#about .nanda10 .row{
	display				: flex;
	flex-direction		: column;
	gap					: 20px;
	margin				: 0 0 5em;
}
#about .nanda10 .row .item{ padding: 0 2em; }

@media screen and (min-width: 769px) {
#about .nanda10 .row{
	flex-direction		: row;
	align-items			: center;
	gap					: 50px;
	margin				: 0 0 3em;
}
#about .nanda10 .row>.col{ flex: 1; }
#about .nanda10 .row.row-reverse{ flex-direction: row-reverse; }
#about .nanda10 .row .item{ padding: 0 2em 0 0; }
#about .nanda10 .row.row-reverse .item{ padding: 0 0 0 2em; }
}

#about .nanda10 .btn {
	display				: block;
	margin				: 20px 0;
	border				: 1px solid transparent;
	border-radius		: 30px;
	padding				: 0.8em 1em;
	background			: var(--main-color);
	text-align			: center;
	text-decoration		: none;
	font-size			: 1.3rem;
	font-weight			: bold;
	line-height			: 1.2;
	color				: #FFF;
}
@media screen and (min-width: 769px) {
#about .nanda10 .btn {
    max-width			: 470px;
    font-size			: 1.8rem;
  }
}

#about .nanda10 h3{
	margin				: 0 0 0.75em;
	text-align			: left;
	line-height			: 1.3;
	font-size			: 2rem;
	font-weight			: bold;
}
#about .nanda10 h3>img{
	margin				: 0 0 0.5em;
	max-height			: 75px;
}
#about .nanda10 h3>span{ display: block; }
@media screen and (min-width: 769px) {
#about .nanda10 h3{ font-size: 3rem; }
}

#about .nanda10 .tag-list{
	display				: flex;
	font-display		: row;
	flex-wrap			: wrap;
	gap					: 10px;
	margin				: 0 0 1.25em 0;
}
#about .nanda10 .tag-list .tag{
	display				: inline-block;
	border				: 1px solid var(--main-color);
	border-radius		: 2em;
	padding				: 4px 12px;
	line-height			: 1;
	font-size			: 75%;
}


#about .nanda10 .tobe{ margin: 50px 20px 20px 20px; }
@media screen and (min-width: 769px) {
#about .nanda10 .tobe{
	margin				: 100px 20px 20px 20px;
	text-align			: center;
}
#about .nanda10 .tobe img{ max-width: 570px; }
}


/*-----------------------------------------------------
 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; }
}


/* intro
-----------------------------------------------------*/
#event .intro{}
#event .intro h3{
	margin				: 20px 0 5px 0;
	line-height			: 1.4;
	font-weight			: bold;
	font-size			: 2rem;
	color				: var(--main-color);
}
#event .intro h4{
	margin				: 20px 0 5px 0;
	line-height			: 1.4;
	font-weight			: bold;
	font-size			: 1.8rem;
	color				: var(--main-color);
}
#event .intro p{ line-height: 2; }
#event .intro nav{
	margin				: 10px 0;
	text-align			: center;
}

#event .intro .row{ margin: 30px 0; }
#event .intro .row:last-child{
	margin-bottom		: 0;
	padding-bottom		: 40px;
}
#event .intro .row img{ border-radius: 10px; }
#event .intro .col{ margin: 20px 0; }

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


/*-----------------------------------------------------
 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.archive2024 a{ background-image: url(../images/archive2024.jpg); }
#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;
}
}