@charset "utf-8";
/* CSS Document */

/* 共通見出し・テキスト */

main.contents h2.pageTitle { width: 100%; height: 310px; padding-top: 90px; background-image: url("../img/schedule/img_hero.jpg"); background-position: center; background-size: cover; display: flex; justify-content: center; align-items: center; }
@media (max-width:1000px) { main.contents h2.pageTitle { max-height: 310px; height: 50vw; padding-top: 80px; }main.contents h2 img { max-height: 70px; height: 10vw; } }

/* メニューフォーカス */

header .menu-02 ul li:nth-of-type(3) a { color: #74a027 !important; }
header .menu-02 ul li:nth-of-type(3) a::after { animation: 0.3s menu-border forwards !important; }

/* ナビゲーション */

ul#navi { display: flex; justify-content: flex-start; flex-wrap: wrap; margin-top: 30px; }
ul#navi li { width: 25%; border: 1px solid #fff; }
ul#navi li a { display: block; padding: 6px 0; font-weight: bold; text-align: center; color: #FFF; background: #f8ad3b; border: solid 1px #f8ad3b; transition: all .3s; }
@media (max-width:768px) { ul#navi li a { font-size: 3vw; } }
ul#navi li a:hover, ul#navi li.active a { color: #f8ad3b; background: #FFF; }

main.contents h3.year { margin-top: 60px; text-align: center; font-size: 24px;  }
main.contents h3.year span { position: relative; display: inline-block; margin-bottom: 1em; }
main.contents h3.year span:before { content: ''; position: absolute; left: 50%; bottom: -20px; display: inline-block; width: 70px; height: 3px; -webkit-transform: translateX(-50%); transform: translateX(-50%); background-color: #f8ad3b; border-radius: 2px; }

/* 投稿ユニット */

main.contents section .unit:first-of-type { margin-top: 60px; }
main.contents .unit { margin-top: 40px; }
main.contents .unit > h4 { background-color: #74a027; text-align: center; position: relative; margin: 0; }
main.contents .unit > h4 span { display: block; margin: 0 auto; padding: 10px 0; font-size: 20px; color: #FFF; }
main.contents .unit > h4::after { width: 0; height: 0; position: absolute; bottom: -15px; margin-left: -15px; content: ''; border-left: 15px solid transparent; border-right: 15px solid transparent; border-top: 15px solid #74a027; }
main.contents .unit ul { padding-top: 20px; }
main.contents .unit ul li { border-bottom: solid 1px #c9c9c9; }

main.contents .unit ul li a, main.contents .unit ul li span { font-size: 16px; display: flex; align-items: center; padding: 20px 0; border-bottom: 1px solid #ccc; position: relative; }

main.contents .unit ul li a .tag, main.contents .unit ul li span .tag { width: 5em; margin-right: 35px; padding: 5px 0; font-size: .9em; text-align: center; color: #FFF; }
main.contents .unit ul li a h5 { text-decoration: underline; }
main.contents .unit ul li a:hover h5 {
	color: #f8ad3b;
}
@media (min-width: 769px) {
	main.contents .unit ul li a .date, main.contents .unit ul li span .date {
		width: 15em; margin-right: 35px;
	}
	main.contents .unit ul li a h5, main.contents .unit ul li span h5 {
		font-size: 16px; font-weight: normal; -webkit-flex: 1; flex: 1; margin-bottom: 0;
	}
}
@media (max-width: 768px) {
	main.contents .unit ul li a h5, main.contents .unit ul li span h5 { font-size: 16px; font-weight: normal; line-height: 1.5; }
	main.contents .unit ul li a,main.contents .unit ul li span { display: block;}
	main.contents .unit ul li a .date, main.contents .unit ul li a .tag,
	main.contents .unit ul li span .date, main.contents .unit ul li span .tag { margin-right: 20px; margin-bottom: 10px; display: inline-block; }
}

.c-pin { background-color: #e88580; }
.c-gre { background-color: #10a16c; }
.c-blu { background-color: #51a4ad; }
.c-gra { background-color: #969696; }

/* ポップアップ */

.popup { position: fixed; visibility: hidden; opacity: 0; transition: .4s opacity; z-index: 100000; background: #FFF; width: 100vw; height: 100vh; top: 0; left: 0; padding-top: 10vh; }
.popup > article { height: 70vh; overflow-y: scroll; }
.popup > article h3.title { padding: 20px 0 15px 0; font-size: 20px;}
.popup > article .info .date { margin-right: 25px; font-size: 18px; font-weight: bold; vertical-align: middle; }
.popup > article .info .tag { display: inline-block; margin-right: 5px; width: 5em; padding: 5px 0; font-size: .9em; text-align: center; color: #FFF; }
.popup > article .content { padding: 40px 0; border-top: solid 1px #969696; border-bottom: solid 1px #969696; }
.popup > article .content h1 { font-size: 1.5em; }
.popup > .btnArea a.button {
	color: #fff;
	background: linear-gradient(to bottom right,#648433 50%,#74a027 50%);
	border: 1px solid #74a027;
	margin: 60px auto 0 auto;
	position: relative;
	z-index: 1;
	font-weight: 700;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 200px;
    height: 40px;
}
.popup > .btnArea a.button span { position: relative; }
.popup > .btnArea a.button span:after {
    content: "";
	background: url("../img/common/icon-link-arrow.svg");
    background-size: contain;
    display: block;
    width: 25px;
    height: 5px;
    position: absolute;
    top: 50%;
    right: -35px;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
}
.popup > .btnArea a.button:hover { opacity: 0.5; }

/* popup visible */
.popup.view {
	visibility: visible;
	opacity: 1;
}

/* 講習会概要 */

/*
#outline a { text-decoration: underline; }
#outline a:hover {
	color: #f8ad3b;
}
*/
#outline a { color: #e88580; }
#outline a:hover { opacity: 0.5; }

#outline h3{ text-align: center; padding: 80px 0; }
#outline p { line-height: 1.8em; }
#outline p span { color: #e88580; }

#outline table { margin-top: 50px; border-bottom:solid 1px #cccccc; line-height: 1.8em; }
#outline table th { padding: 15px 15px 10px 15px; }
#outline table td { padding: 15px; }

@media (min-width:769px) { #outline table th { width: 20%; border-top:solid 1px #cccccc; vertical-align: top; } #outline table td { border-top:solid 1px #cccccc; } }
@media (max-width:768px) { #outline table th { width: 100%; display: block; border-top: solid 1px #cccccc; } #outline table td { width: 100%; display: block; padding-top: 0; } }

@media (min-width:769px) { #outline table .map { position: relative; } #outline table .map iframe { padding: 15px 35px 0 35px; } }
@media (max-width:768px) { #outline table .map { position: relative; } #outline table .map iframe { padding-top: 15px; } }

@media (min-width:769px) { #outline table .t-img { padding-bottom: 25px; text-align: center; } }
@media (max-width:768px) { #outline table .t-img { padding: 15px 0; text-align: center; } }

#outline table #link02 { position: absolute; bottom: 150px; }