@charset "utf-8";

/*----------------------------------------------------------------
 /about under
----------------------------------------------------------------*/
/*----------------------------------------------------------------
 contents
----------------------------------------------------------------*/

/*-----------------------------------------------------
 pager
-----------------------------------------------------*/
#contents .pager{ margin: 25px 0; }
#contents .pager ul{
	-js-display			: flex; /* IE */
	display				: -webkit-flex; /* Safari */
	display				: flex;
	flex-direction		: row;
	justify-content		: space-between;
}
#contents .pager ul li{ flex: 0 0 48%; }
#contents .pager ul span,
#contents .pager ul a{
	display				: block;
	border				: 1px solid transparent;
	padding				: 0.6rem 0;
	background			: #95bc00;
	border-radius		: 0.5rem;
	text-align			: center;
	text-decoration		: none;
	font-size			: 1.3rem;
	color				: #FFF;
}
#contents .pager ul span{
	border				: 1px solid #95bc00;
	background			: #FFF;
	color				: #95bc00;
}

@media screen and (min-width: 768px) {
#contents .pager{ margin: 40px 0; }
#contents .pager ul span,
#contents .pager ul a{
	border				: 2px solid transparent;
	border-radius		: 1rem;
	padding				: 1.2rem 0;
	font-size			: 1.8rem;
}
#contents .pager ul span{ border: 2px solid #95bc00; }
}

/*-----------------------------------------------------
 heading03
-----------------------------------------------------*/
#contents .heading03{
	margin				: 0 0 0.75em 0;
	font-size			: 1.6rem;
	font-weight			: bold;
}
#contents .heading03:before{
	content				: "■";
	display				: inline-block;
	margin				: 0 0.5rem 0 0;
	color				: #eb9800;
}
#contents div + .heading03{ margin: 3em 0 0.75em 0; }

/*-----------------------------------------------------
 timeline-list
-----------------------------------------------------*/
#contents .timeline-list li{
	position			: relative;
	list-style			: none;
}
#contents .timeline-list li:not(:last-child)::after{
	display				: block;
	content				: "\f063";
	margin				: 10px 0;
	text-align			: center;
	line-height			: 1;
	font-family			: "Font Awesome 5 Free";
	font-weight			: 900;
	font-size			: 3rem;
	color				: #95bc00;
}
#contents .timeline-list h3{ font-weight: bold; }
#contents .timeline-list h4{
	font-size			: 1.6rem;
	margin				: 0 0 5px 0;
	font-weight			: bold;
}
@media screen and (max-width: 767px) {
#contents .timeline-list{ font-size: 1.4rem; }
#contents .timeline-list h3{ margin: 10px 0; }
}
@media screen and (min-width: 768px) {
#contents .timeline-list h3{
	margin				: 15px 0;
	font-size			: 2.2rem;
}
#contents .timeline-list li:not(:last-child)::after{
	font-size			: 5rem;
	margin				: 10px 0 30px 0;
}
}

/*-----------------------------------------------------
 note
-----------------------------------------------------*/
#contents .note{
	margin				: 20px 0;
	padding				: 10px 15px;
	background			: #FFF;
}
#contents .note .heading03{ margin: 1.5em 0 0 0; }
@media screen and (min-width: 768px) {
#contents .note{ padding: 15px 20px; }
}

/*-----------------------------------------------------
 event-list
-----------------------------------------------------*/
#contents .event-list{
	-js-display			: flex; /* IE */
	display				: -webkit-flex; /* Safari */
	display				: flex;
	flex-direction		: row;
	flex-wrap			: wrap;
	justify-content		: space-between;
	gap					: 5px 15px;
	margin				: 20px 0 0 0;
}
#contents .event-list li{
	list-style			: none;
	flex				: 0 0 calc(50% - 8px);
	text-align			: center;
}
#contents .event-list li img{ width: 100%; }
#contents .event-list li figcaption{
	margin				: 5px 0;
	font-weight			: bold;
}
@media screen and (max-width: 767px) {
#contents .event-list li figcaption{ font-size: 1.4rem; }
}
@media screen and (min-width: 768px) {
#contents .event-list{
	margin				: 40px 0 0 0;
	gap					: 15px 30px;
}
#contents .event-list li{ flex: 0 0 calc(50% - 15px); }
}

/*----------------------------------------------------------------
 about
----------------------------------------------------------------*/
@media screen and (max-width: 767px) {
#about p,
#about figcaption{ font-size: 1.4rem; }
}
@media screen and (min-width: 768px) {
#about p,
#about figcaption{ font-size: 1.6rem; }
}


/*-----------------------------------------------------
 mv
-----------------------------------------------------*/
#about .mv{
	text-align			: center;
	line-height			: 1.3333;
}
#about .mv .copy{
	margin				: 30px 0;
	font-size			: 2.2rem;
}

@media screen and (min-width: 768px) {
#about .mv{ line-height: 1.4; }
#about .mv .copy{
	margin				: 50px 0;
	font-size			: 4rem;
}
}

/*-----------------------------------------------------
 about-header
-----------------------------------------------------*/
#about .about-header .text{
	position			: relative;
	top					: -30px;
}
@media screen and (max-width: 767px) {
#about .about-header .text h2{
	width				: 73.958%;
	padding				: 10px 0;
	background			: #f6f3e4;
	font-size			: 1.8rem;
}
}
@media screen and (min-width: 768px) {
#about .about-header{
	text-align			: right;
	margin-bottom		: -150px;
}
#about .about-header:last-child{ margin-bottom: -100px; }
#about .about-header .image{ width: 73.958%; }
#about .about-header .text{
	position			: relative;
	top					: -150px;
	display				: inline-block;
	min-height			: 150px;
	width				: 48.4375%;
	background			: #f6f3e4;
	padding				: 20px 30px;
	text-align			: left;
}
#about .about-header .text h2{
	margin				: 0 0 20px 0;
	font-size			: 2.2rem;
}
}

/*-----------------------------------------------------
 about-list
-----------------------------------------------------*/
#about .about-list li{
	list-style			: none;
	margin				: 0 0 10px 0;
}
#about .about-list li figcaption{ padding: 15px 0; }

@media screen and (min-width: 768px) {
#about .about-list{ margin: 20px 0 80px 0; }
#about .about-list li{ margin: 0; }
#about .about-list figure{
	-js-display			: flex; /* IE */
	display				: -webkit-flex; /* Safari */
	display				: flex;
	flex-direction		: row;
	align-items			: center;
	justify-content		: space-between;
}
#about .about-list li:nth-child(odd) figure{ flex-direction: row-reverse; }

#about .about-list figure>img,
#about .about-list figure>figcaption{
	display				: block;
	width				: 50%;
	max-width			: initial;
	text-align			: center;
}
}

/*-----------------------------------------------------
 more-link
-----------------------------------------------------*/
#about .more-link{ text-align: center; }
#about .block:not(:last-child) .more-link{ margin: 0 0 40px 0; }
#about .more-link a{
	display				: block;
	padding				: 0.6rem 0;
	background			: #95bc00;
	border-radius		: 0.5rem;
	text-align			: center;
	text-decoration		: none;
	font-size			: 1.3rem;
	color				: #FFF;
}
@media screen and (min-width: 768px) {
#about .block:not(:last-child) .more-link{ margin: -40px 0 80px 0; }
#about .block:last-child .more-link{ margin: 60px 0 40px 0; }
#about .more-link a{
	margin				: 0 auto;
	max-width			: 580px;
	border-radius		: 1rem;
	font-size			: 1.8rem;
	padding				: 1.2rem 0;
}
}

#swimming .more-link{ text-align: center; }
#swimming .block:not(:last-child) .more-link{ margin: 0 0 40px 0; }
#swimming .more-link a{
	display				: block;
	padding				: 0.6rem 0;
	background			: #95bc00;
	border-radius		: 0.5rem;
	text-align			: center;
	text-decoration		: none;
	font-size			: 1.3rem;
	color				: #FFF;
}
@media screen and (min-width: 768px) {
#swimming .block:not(:last-child) .more-link{ margin: -40px 0 80px 0; }
#swimming .block:last-child .more-link{ margin: 60px 0 40px 0; }
#swimming .more-link a{
	margin				: 0 auto;
	max-width			: 580px;
	border-radius		: 1rem;
	font-size			: 1.8rem;
	padding				: 1.2rem 0;
}
}