#contents-box h2 {
    font-size: var(--f-xx-large);
    font-family: var(--mincho);
    display: flex;
    justify-content: center;
    align-items: center;
}
#contents-box h2:before,
#contents-box h2:after {
    content: '';
    display: inline-block;
    max-width: 84px;
    min-width: 20px;
    flex: 1 1 auto;
    height: 6px;
    background: var(--primary);
    margin: 0 10px;
}

#app-header { position: fixed; }
@media screen and (max-width: 1380px) {
	#app-header { position: sticky; }
}

/* top */
#top {
	position: relative;
	height: 0;
	padding-top: calc(100% * 607 / 1080);
	overflow: hidden;
}
#top video {
	width: 100%;
	position: fixed;
	top: 0;
	left: 0;
	z-index: -1;
}
@media screen and (max-width: 1380px) {
	#top video { position: absolute; }
}
#contents-box section > div.pagetop-banner {
	padding: 0;
	margin: 0 auto 4rem;
}
@media screen and (max-width: 767px){
	#contents-box section > div.pagetop-banner {
		padding: 0 1rem;
		margin: 0;
	}
}

/*common*/
#contents-box {
	padding-top: calc(var(--base-margin) * 4);
	padding-bottom: calc(var(--base-margin) * 6);
	background: #fff;
	max-width: none;
}
#app-footer {
	margin-top: 0!important;
}

/*entry*/
#entry .entry-button {
	max-width: calc(200px + var(--base-margin) * 2);
	flex: 0 0 auto;
}
#entry .entry-menu {
	background: url(../img/entry.jpg);
	background-size: cover;
	background-position: center center;
	flex: 1 1 auto;
	max-width: 750px;
	min-height: 180px;
}
@media screen and (max-width: 960px) {
	#entry .entry-menu {
		max-width: 500px;
	}
}
@media screen and (max-width: 767px) {
	#entry > .flex {
		flex-wrap: wrap;
	}
	#entry .entry-button  {
		width: auto;
	}
	#entry .entry-menu {
		max-width:  none;
		width: 100%;
		margin: auto;
	}
}

/*subject*/
#subject .subject-menu {
	background: url(../img/subject.jpg);
	background-size: cover;
	background-position: top center;
	flex: 1 1 auto;
	max-width: 750px;
}
#subject .subject-menu a {
	display: flex;
}
#subject .subject-menu a .subject-inner {
  padding: 30px 25px;
}
#subject .subject-menu a .subject-inner p {
  font-size: 13px;
  color: var(--text-color);
}
#subject .subject-menu a .subject-inner p.text-bold {
  font-size: 17.5px;
}

#subject .subject-button {
	max-width: calc(200px + var(--base-margin) * 2);
}
@media screen and (max-width: 960px) {
	#subject .subject-menu {
		max-width: 500px;
	}
}
@media screen and (max-width: 767px) {
	#subject > .flex {
		flex-wrap: wrap;
	}
	#subject .subject-button  {
		width: auto;
	}
	#subject .subject-menu {
		max-width:  none;
		width: 100%;
		margin: auto;
		padding-left: calc(var(--base-margin) / 2)!important;
		padding-right: calc(var(--base-margin) / 2)!important;
	}
	#subject .subject-menu > div {
		padding: calc(var(--base-margin) / 2)!important;
	}
}

/*training*/
#training .training-button {
	max-width: calc(200px + var(--base-margin) * 2);
	flex: 0 0 auto;
}
#training .training-menu {
	background: url(../img/training.jpg);
	background-size: cover;
	background-position: center center;
	flex: 1 1 auto;
	max-width: 750px;
	min-height: 180px;
}
@media screen and (max-width: 960px) {
	#training .training-menu {
		max-width: 500px;
	}
}
@media screen and (max-width: 767px) {
	#training > .flex {
		flex-wrap: wrap;
	}
	#training .training-button  {
		width: auto;
	}
	#training .training-menu {
		max-width:  none;
		width: 100%;
		margin: auto;
	}
}

/*about*/
#about figure a {
	position: relative;
	display: inline-block;
	overflow: hidden;
}
#about figure a > * {
	transition: .4s all;
}
#about figure a:hover > img {
	transform: scale(1.1);
}
#about figcaption {
	position: absolute;
	background: rgba(90, 90, 90, .66);
	width: 100%;
	bottom: 0;
	left: 0;
	color: #fff;
	font-family: var(--mincho);
	z-index: 1;
}
#about figure a:hover figcaption {
	background: rgba(90, 90, 90, 0);
}
#about figcaption p:after {
	content: '';
	position: absolute;
	top: 0; right: 0; bottom: 0; left: 0;
	background: transparent linear-gradient(180deg, #00C3F7 0%, #118AAA 100%) 0% 0% no-repeat padding-box;
	opacity: 0;
	transform: scale(.88);
	z-index: -1;
	transition: .4s all;
}
#about figure a:hover figcaption p:after {
	opacity: 1;
	transform: scale(1.0);
}

/*news*/
#news .news-box {
	max-width: 940px;
    position: relative;
    z-index: 0;
}
#news .news-box .under-layer img {
	flex: 0 0 auto;
}
#news .news-box .under-layer figure { width: 50%; }
#news .news-box .under-layer figure:nth-child(even) { text-align: right; }
#news .news-box .under-layer figure:nth-child(2) img { transform: rotate(90deg); }
#news .news-box .under-layer figure:nth-child(3) img { transform: rotate(270deg); }
#news .news-box .under-layer figure:nth-child(4) img { transform: rotate(180deg); }
#news .news-box-inner { max-width: 728px; }
#news .categories li label { overflow: hidden; }
#news .categories li input[type="radio"] {display: none;}
#news .categories li input[type="radio"] + span {
	display: inline-flex;
	line-height: 1;
	justify-content: center;
	align-items: center;
	border-radius: 5px;
	opacity: .8;
	transform: scale(1);
	transition: .4s all;
	white-space: nowrap;
}
#news .categories li input[type="radio"]:checked + span {
	opacity: 1;
	border-radius: 0;
	transform: scale(1.08);
}
#news .news-list {
	height: 250px;
	overflow-y: auto;
}
#news .news-list li:not(:last-child) {
	padding-bottom: 15px;
}
#news .news-list li.fade-down-leave-active {
    position: absolute;
    z-index: 0;
}
#news .news-list li a:hover {
	background: rgba(0,0,0,.1);
}
#news .news-list .news-cat {
	white-space: nowrap;
	opacity: .8;
}
#news .news-list time {
	opacity: .8;
}
#news .news-list .news-title {
	display: block;
	font-size: 90%;
	line-height: 1.2;
}
@media screen and (max-width: 767px) {
	#news .news-list li a {
		flex-wrap: wrap;
	}
	#news .news-list .news-title {
		width: 100%;
	}
}

/*access*/
#access .access-button {
    max-width: calc(200px + var(--base-margin) * 2);
}
#access .access-menu {
	max-width: 750px;
	flex: 1 1 auto;
}
#access .access-menu iframe {
	width: 100%;
}
@media screen and (max-width: 767px) {
	#access > .flex {
		flex-wrap: wrap;
	}
	#access .access-menu {
		width: 100%;
		max-width: none;
		margin-top: calc(var(--base-margin) * 2);
		margin-right: 0!important;
	}
}

/* θ‡¨εΊŠη?”η©Άγ«ι–’γ™γ‚‹γŠηŸ₯らせ */
#information a.arrow {
	width: 80%;
	color: #fff;
  background: var(--primary)!important;
}
#information a.arrow::after {
	content: url(../img/common/arrow_white.svg);
}
#information a.arrow:hover {
	color: #000;
  background: white!important;
}
#information a.arrow:hover::after {
	content: url(../img/common/arrow.svg);
}
@media screen and (max-width: 480px) {
	#information a.arrow {
		width: auto;
	}
}