/* --------------------------------------------------------------------------
   common
-------------------------------------------------------------------------- */

.wrap { min-width: 1200px; padding: 80px 0 0; }
.cover { width: 100%; }
.cover.about { background: center/cover no-repeat url(../img/kv_about.webp); }
.cover.news { background: center/cover no-repeat url(../img/kv_news.webp); }
.cover.report { background: center/cover no-repeat url(../img/kv_report.webp); }
.cover.media { background: center/cover no-repeat url(../img/kv_media.webp); }
.cover.donation { background: center/cover no-repeat url(../img/kv_donation.webp); }
.cover.canteen { background: center/cover no-repeat url(../img/kv_canteen.webp); }
.cover.contact, .cover.error { background: linear-gradient(to right, #233579, #569bd3); }

.cover article { position: relative; width: 1100px; height: 300px; margin: 0 auto; }
.cover.contact article, .cover.error article { height: 200px; }
.cover.contact article::after {
	content: ''; position: absolute; top: 10px; right: 0; width: 180px; height: 180px;
	background: center/contain no-repeat url(../img/inquiry.svg); opacity: .6;
}
.cover h2 {
	position: absolute; bottom: 0; left: 0; width: 400px; background: #fff;
	border-radius: 20px 20px 0 0; font-size: 3.6rem; line-height: 2.4; font-weight: 700;
	text-align: center;
}
.cover h2::after {
	content: ''; position: absolute; bottom: 0; left: 50%; width: 100px;
	border-bottom: solid 5px #dc3705; transform: translateX(-50%);
}
.cover.canteen h2 { width: 420px; }
.cover.error h2 {
	position: absolute; top: 50%; bottom: auto; transform: translateY(-50%);
	width: auto; background: none; border-radius: 0; color: #fff; opacity: .7;
	font-size: 6.4rem; line-height: 1.0; font-weight: 700; text-align: left;
}
.cover.error h2::after { content: none; }

section { padding: 80px 0; }
section:nth-of-type(even) { background: #eaf5fe; }
section * img { width: 100%; }
article { width: 1100px; margin: 0 auto; }
section .btn {
	position: relative; display: block; width: 320px; margin: 30px auto 0; background: #eaf5fe; 
	border: solid 3px #1d2a6f; border-radius: 50px; box-shadow: 0 4px #1d2a6f;
	color: #1d2a6f; font-size: 2.0rem; font-weight: 700; line-height: 2.2; text-align: center;
}
section:nth-of-type(even) .btn { background: #fff; }
section .btn::after {
	content: ''; position: absolute; top: 50%; right: 30px; width: 8px; height: 8px;
	border: solid 3px #dc3705; border-width: 3px 3px 0 0;
	transform: translateY(-50%) rotate(45deg);
}
section .btn:hover { transform: translateY(4px); box-shadow: none; }

section h3.pare {
	position: relative; margin: 0 0 36px; font-size: 3.0rem; font-weight: 700; text-align: center;
}
section h3.pare::before {
	content: '('; margin-right: 1.0em; font-family: 'Zen Maru Gothic'; color: #dc3705;
}
section h3.pare::after {
	content: ')'; margin-left: 1.0em; font-family: 'Zen Maru Gothic'; color: #dc3705;
}

@media screen and (max-width:768px) {
	.wrap { min-width: 100%; padding: 60px 0 0; }
	.cover article, .cover.contact article, .cover.error article { width: 90%; height: 24vh; }
	.cover.contact article::after { top: 2vh; width: 16vh; height: 16vh; }
	.cover h2 { width: 60%; border-radius: 12px 12px 0 0; font-size: 2.2rem; }
	.cover h2::after { border-bottom: solid 3px #dc3705; }
	.cover.canteen h2 { width: 100%; }
	.cover.error h2 { font-size: 4.8rem; }
	section { padding: 40px 0 60px; }
	article { width: 90%; }
	section .btn { width: 80%; margin: 20px auto 0; }

	section h3.pare { margin: 0 0 24px; font-size: 2.4rem; }
	section h3.pare.col {
		display: flex; justify-content: space-evenly; align-items: end;
		width: 90%; margin: 0 auto 24px; font-size: 2.4rem;
	}
	section h3.pare.col::before, section h3.pare.col::after {
		margin: 0; font-size: 5.6rem; font-weight: 400; line-height: inherit;
	}
}


/* --------------------------------------------------------------------------
   about
-------------------------------------------------------------------------- */

#about { font-size: 2.0rem; line-height: 1.8; }
#about .lead { text-align: center; }
#about .lead p { margin: 36px 0 0; }
#about .lead p:first-child { margin: 0; }
#about .lead .kome { text-align: right; }

#about .action article { display: flex; align-items: center; }
#about .action article:nth-of-type(even) { margin: 60px auto; }
#about .action article h4 {
	width: 360px; font-size: 3.0rem; font-weight: 700; text-align: center;
}
#about .action article h4::before {
	content: ''; display: block; width: 60px; height: 60px; margin: 0 auto;
	background: 0 100%/300% auto no-repeat url(../img/ico.svg);
}
#about .action article:nth-of-type(2) h4::before { background-position: 50% 100%; }
#about .action article:last-of-type h4::before { background-position: 100% 100%; }
#about .action article div {
	width: 730px; padding: 20px 0 20px 26px; border: solid 4px #1d2a6f; border-width: 0 0 0 4px;
}
#about .action article .list { margin: 16px 0 0; padding-left: 1.3em; }
#about .action article .list li { list-style-type: "● "; }

#about .member dl { display: flex; width: 640px; margin: 0 auto; flex-wrap: wrap; }
#about .member dt { width: 200px; padding: 0.5em 20px; border-bottom: solid 1px #1d2a6f; }
#about .member dd { width: 440px; padding: 0.5em 20px; border-bottom: solid 1px #1d5a6f; }
#about .member dl:first-child, #about .member dd:first-child { border-top: solid 1px #1d2a6f; }

#about .message {
	padding: 30px 0; background: center/contain no-repeat url(../img/heart.svg);
	text-align: center;
}
#about .message p:nth-child(even) { margin: 1.6em 0; }

@media screen and (max-width:768px) {
	#about { font-size: 1.6rem; }
	#about .lead { text-align: left; }
	#about .lead p { margin: 20px 0 0; }
	#about .lead .kome { text-align: left; }
	#about .action article { display: block; }
	#about .action article:nth-of-type(even) { margin: 48px auto; }
	#about .action article h4 { width: 100%; font-size: 2.2rem; margin: 0 0 16px; }
	#about .action article h4::before { width: 70px; height: 70px; }
	#about .action article div { width: 100%; padding: 20px 0 0; border-width: 3px 0 0 0; }
	#about .member dl { width: 100%; }
	#about .member dt { width: 30%; padding: 0.5em 5px; }
	#about .member dd { width: 70%; padding: 0.5em 5px; }
	#about .message { padding: 20px 0; text-align: left; }
}

/* --------------------------------------------------------------------------
   news
-------------------------------------------------------------------------- */

#news .noticia { padding: 20px 0 80px; }
.noticia article { padding: 60px 0; border-bottom: dashed 2px #569bd3; }
.noticia h3 { margin: 0 0 24px; font-size: 2.4rem; font-weight: 700; }
.noticia h3 span { display: block; font-size: 80%; font-weight: 500; }
.noticia .content { display: flex; justify-content: space-between; }
.noticia .content div { width: 520px; }
.noticia p { font-size: 1.6rem; font-weight: 500; }

@media screen and (max-width:768px) {
	#news .noticia { padding: 4px 0 60px; }
	.noticia article { padding: 36px 0; }
	.noticia h3 { font-size: 1.8rem; }
	.noticia .content { display: block; }
	.noticia .content div { width: 100%; }
}

/* --------------------------------------------------------------------------
   report
-------------------------------------------------------------------------- */

#report section { position: relative; margin: 0 0 60px; padding: 40px 0 60px; }
#report section:nth-of-type(even) { background: #fff; }
#report section::before {
	content: ''; position: absolute; top: 50px; left: 50%; width: 2px; height: calc(100% - 60px);
	background: #1d2a6f; transform: translateX(-1px);
}
#report section::after {
	content: ''; position: absolute; bottom: 0; left: 50%; width: 20px; height: 20px;
	background: #1d2a6f; border-radius: 20px; transform: translateX(-50%);
}
#report h3 {
	position: relative; width: 120px; height: 120px; margin: 0 auto; background: #1d2a6f; 
	border-radius: 80px; font-size: 3.6rem; font-weight: 700; line-height: 120px; color: #fff;
	text-align: center; 
}
#report h3 button {
	position: absolute; top: 0; left: 0; width: 100%; height: 100%; padding: 0;
	appearance: none; background: none; border: none; cursor: pointer;
	text-indent: 120%; white-space: nowrap; overflow: hidden;
}
#report h3 button::after {
	content: ''; position: absolute; bottom: 20px; left: 50%; width: 10px; height: 10px;
	border: solid 3px #fff; border-width: 0 3px 3px 0; transform: translateX(-50%) rotate(45deg);
}
#report h3.open.done button::after { bottom: 12px; transform: translateX(-50%) rotate(-135deg); }
#report .archives { display: none; }
#report .actions article {
	position: relative; margin: 40px auto 0; padding: 60px 30px 40px; background: #fff;
	border: solid 2px #1d2a6f; border-radius: 8px;
}
#report .actions article::before {
	content: ''; position: absolute; top: -10px; left: 50%; width: 20px; height: 20px;
	background: #1d2a6f; border-radius: 20px; transform: translateX(-50%);
}
#report .date {
	position: absolute; top: 0px; left: 30px; padding: 0 12px; background: #dc3705;
	border-radius: 0 0 16px 16px; font-size: 1.8rem; line-height: 2.8; color: #fff;
}
#report h4 { font-size: 2.4rem; font-weight: 700; text-align: center; }
#report .act { display: flex; justify-content: space-between; margin: 24px 0 0; }
#report .act i { display: block; width: 440px; }
#report .act p { width: 570px; font-size: 1.6rem; line-height: 1.8; font-weight: 500; }

@media screen and (max-width:768px) {
	#report section { margin: 0 0 36px; padding: 30px 0 48px; }
	#report h3 { width: 100px; height: 100px; font-size: 2.8rem; line-height: 100px; }
	#report .actions article { margin: 24px auto 0; padding: 48px 4% 24px; }
	#report .date { left: 4%; font-size: 1.6rem; font-weight: 700; }
	#report h4 { font-size: 1.8rem; }
	#report .act { display: block; margin: 16px 0 0; }
	#report .act i { width: 100%; margin: 0 0 16px; }
	#report .act p { width: 100%; line-height: 1.6; }
}

/* --------------------------------------------------------------------------
   media
-------------------------------------------------------------------------- */

#media section { padding: 60px 0 40px; }
#media section:nth-of-type(even) { background: #fff; }
#media section:last-of-type { padding: 60px 0 80px; }
#media .date {
	position: relative; width: 320px; margin: 0 auto; background: #dc3705; color: #fff;
	border-radius: 50px; font-size: 1.8rem; line-height: 2.2; font-weight: 700;
	text-align: center;
}
#media .date::after {
	content: ''; position: absolute; bottom: -8px; left: 50%; width: 20px; height: 20px; 
	background: linear-gradient(-45deg,#dc3705 60%,transparent 60%);
	transform: translateX(-50%) rotate(45deg);
}
#media .publish article { padding: 40px 0; border-bottom: dashed 2px #569bd3; }
#media .title { display: flex; align-items: center; }
#media h3 {
	display: flex; align-items: center; justify-content: center; font-size: 2.0rem;
	line-height: 1.6; font-weight: 700;
}
#media .name {
	width: 240px; margin-right: 20px; padding: 0.32em 0; 
	background: #1d2a6f; border-radius: 0 50px 50px 0; font-size: 2.0rem; font-weight: 700;
	color: #fff; line-height: 1.6; text-align: center;
}
#media .name span { display: block; font-size: 80%; font-weight: 500; }
#media .pub { display: flex; margin: 24px 0 0; justify-content: space-between; }
#media .pub i { display: block; width: 520px; border: solid 1px #c2c3c8; }
#media .pub p { width: 520px; font-size: 1.6rem; line-height: 1.8; }

@media screen and (max-width:768px) {
	#media section { padding: 36px 0 24px; }
	#media section:last-of-type { padding: 36px 0 60px; }
	#media .date { width: 60%; font-size: 1.6rem; }
	#media .publish article { padding: 36px 0; }
	#media .title { display: block; }
	#media h3 { display: block; font-size: 1.8rem; }
	#media .name {
		display: block; width: 90%; margin: 0 0 5px; padding: 0 10px; line-height: 2.4;
		text-align: left; 
	}
	#media .name span { display: inline-block; margin-right: 12px; }
	#media .pub { display: block; margin: 16px 0 0; }
	#media .pub i { width: 100%; margin: 0 0 16px; }
	#media .pub p { width: 100%; line-height: 1.6; }
}

/* --------------------------------------------------------------------------
   donation
-------------------------------------------------------------------------- */

#donation .lead { text-align: center; }
#donation .lead h3 { font-size: 3.6rem; font-weight: 700; }
#donation .lead h3 span {
	background: linear-gradient(transparent 60%,rgba(220,55,5,.2) 60%);
}
#donation .lead h4 { font-size: 2.2rem; font-weight: 700; }
#donation .lead p { margin: 36px 0; font-size: 2.0rem; line-height: 1.8; }

#donation .method article {
	position: relative; width: 760px; margin: 0 auto 40px; padding-left: 60px;
	font-size: 1.8rem; line-height: 1.8;
}
#donation .method article::before {
	content: ''; position: absolute; top: 0; left: 0; width: 20px; height: 20px;
	border: solid 8px #dc3705; border-radius: 36px;
}
#donation .method article::after {
	content: ''; position: absolute; top: 36px; left: 17px; width: 2px; height: calc(100% - 34px);
	background: #1d2a6f; border-radius: 2px;
}
#donation .method h4 { margin: 0 0 20px; font-size: 2.4rem; font-weight: 700; line-height: 36px; }
#donation .method dl {
	display: flex; margin: 10px 0 0; padding: 10px 20px; background: rgba(255,255,255,.8);
	border-radius: 8px; flex-wrap: wrap;
}
#donation .method dt { width: 120px; font-size: 1.6rem; }
#donation .method dd { width: 540px; font-size: 1.6rem; }
#donation .more { width: 1100px; margin: 60px auto 0; text-align: center; }
#donation .more p { margin: 1.0em 0 0; font-size: 2.0rem; line-height: 1.8; }

#donation .supporter { text-align: center; }
#donation .supporter p { font-size: 2.0rem; line-height: 1.8; }
#donation .supporter .txt { margin: 1.0em 0 0; }
#donation .supporter p a { color: #dc3705; border-bottom: solid 1px #dc3705; }
#donation .supporter i { display: block; width: 100%; margin: 36px auto; }

@media screen and (max-width:768px) {
	#donation .lead h3 { font-size: 2.2rem; }
	#donation .lead h4 { font-size: 1.8rem; }
	#donation .lead p { margin: 24px 0; font-size: 1.6rem; text-align: left; }
	#donation .method article {
		width: 90%; margin: 0 auto 36px; padding-left: 40px; font-size: 1.6rem;
	}
	#donation .method article::before { width: 16px; height: 16px; border: solid 8px #dc3705; }
	#donation .method article::after { top: 32px; left: 15px; height: calc(100% - 32px); }
	#donation .method h4 { margin: 0 0 12px; font-size: 2.0rem; line-height: 32px; }
	#donation .method dl { display: block; padding: 3vw; }
	#donation .method dt { width: 100%; font-weight: 700; }
	#donation .method dd { width: 100%; padding-left: 0.5em; }
	#donation .more { width: 90%; margin: 48px auto 0; text-align: left; }
	#donation .more p { font-size: 1.6rem; }

	#donation .supporter { text-align: left; }
	#donation .supporter p { font-size: 1.6rem; }
	#donation .supporter i { display: block; width: 100%; margin: 24px auto; }
}

/* --------------------------------------------------------------------------
   canteen
-------------------------------------------------------------------------- */

#canteen .lead p { font-size: 2.0rem; line-height: 2.0; text-align: center; }
#canteen .lead p:last-of-type { margin: 16px 0 0; }

@media screen and (max-width:768px) {
	#canteen .lead p { text-align: left; font-size: 1.6rem; }
}

/* --------------------------------------------------------------------------
   contact
-------------------------------------------------------------------------- */

.inquiry .lead { text-align: center; font-size: 1.8rem; }
.inquiry form { width: 1000px; margin: 0 auto; }
.inquiry article {
	width: 100%; margin: 24px auto 48px; padding: 48px 20px 18px; border: solid 1px #1d2a6f;
	border-width: 1px 0 1px 0;
}
.inquiry .complete { border: none; }
.inquiry dl { display: flex; margin: 0 0 40px; }
.inquiry dt { width: 280px; font-size: 1.6rem; line-height: 2.0; }
.inquiry dd { position: relative; width: 680px; font-size: 1.6rem; line-height: 2.0; }
.inquiry dd.txt { white-space: pre-wrap; }
.inquiry dd p { line-height: 1.8; }
.inquiry input[type=text] {
	appearance: none; width: 100%; padding: 0 10px; background: #fff; border: solid 1px #1d2a6f;
	border-radius: 8px; font: inherit; color: #1d2a6f;
}
.inquiry .type { width: 480px; }
.inquiry .type::after {
	content: ''; position: absolute; top: 50%; right: 20px; width: 8px; height: 8px;
	border: solid 3px #1d2a6f; border-width: 0 3px 3px 0; cursor: pointer;
	transform: translateY(-75%) rotate(45deg);
}
.inquiry select {
	appearance: none; position: relative; width: 100%; padding: 0 10px; background: #fff;
	border: solid 1px #1d2a6f; border-radius: 8px; font: inherit; color: #1d2a6f;
}
.inquiry textarea {
	width: 100%; padding: 10px; background: #fff; border: solid 1px #1d2a6f;
	border-radius: 8px; font: inherit; line-height: 1.6; color: #1d2a6f;
}

.inquiry .policy {
	width: 670px; margin: 0 auto 24px; padding: 20px; background: #eaf5fe; border-radius: 8px;
	font-size: 1.6rem; line-height: 1.8; text-align: left; 
}
.inquiry .policy h3 {
	margin: 0 0 12px; font-size: 1.8rem; font-weight: 700; text-align: center;
}
.inquiry .agreement { text-align: center; }
.inquiry input[type=checkbox] { opacity: 0; margin-left: 12px; }
.inquiry .check {
	position: relative; padding: 0 24px; font-size: 1.6rem; cursor: pointer;
	white-space: nowrap;
}
.inquiry .check::before {
	content: ''; position: absolute; top: 0; left: 0; width: 18px; height: 18px;
	border: solid 1px #1d2a6f; border-radius: 4px;
}
.inquiry .check::after {
	content: ''; position: absolute; top: 3px; left: 6px; opacity: 0; width: 5px; height: 9px;
	border: solid 3px #1d2a6f; border-width: 0 3px 3px 0; transform: rotate(45deg);
}
.inquiry input[type=checkbox]:checked + .check::after { opacity: 1; }

.inquiry button {
	position: relative; appearance: none; width: 320px; margin: 24px 20px 0; background: #eaf5fe;
	border: solid 3px #1d2a6f; border-radius: 60px; box-shadow: 0 4px #1d2a6f; color: #1d2a6f;
	font-size: 2.0rem; font-weight: 700; line-height: 2.6; text-align: center; cursor: pointer;
}
.inquiry button:hover { transform: translateY(4px); box-shadow: none; }
.inquiry button.inact { opacity: .5; }
.inquiry button.inact:hover { transform: translateY(0); box-shadow: 0 4px #1d2a6f; }
.inquiry button:disabled { cursor: default; }
.inquiry button.back { background: #fff; }

@media screen and (max-width:768px) {
	.inquiry .lead { font-size: 1.6rem; }
	.inquiry form { width: 90%; }
	.inquiry article { margin: 24px auto; padding: 24px 0 0; }
	.inquiry .complete { width: 90%; margin: 24px auto; }
	.inquiry .complete .lead { text-align: left; }
	.inquiry dl { display: block; margin: 0 0 24px; }
	.inquiry dt, .inquiry dd { width: 100%; }
	.inquiry dt { font-weight: 700; }
	.inquiry .type { width: 100%; }
	.inquiry .policy { width: 100%; margin: 0 auto 24px; }
	.inquiry button { width: 80%; margin: 24px auto 0; font-size: 1.8rem; }
}

/* --------------------------------------------------------------------------
   error
-------------------------------------------------------------------------- */

#error p { font-size: 1.6rem; }
#error a { border-bottom: solid 1px #dc3705; color: #dc3705; }

/*@media screen and (max-width:768px) {
	#error section { padding: 80px 0; }
}*/