@charset "utf-8";

@media (max-width: 1200px) {

	/*===============================
common
=================================*/

	.site-wrapper, .top-page .container-fluid {
		flex-direction: column-reverse;
	}

	#left, .top-page #left {
		width: 100%;
		min-width: unset;
		background: #074689;
		order: 1;
	}

	#right {
		max-width: unset;
		width: calc(100% - 3rem);
		margin: 0 1.5rem;
	}

	.page-content {
		padding: 0 0 3rem 0;
	}

	.col-6 {
		flex: auto;
		max-width: 100%;
		margin-bottom: 2rem;
	}

	#page-top {
		bottom: 10px !important;
	}

	/*===============================
common - header
=================================*/

	.header-title {
		margin: 0;
		padding: 2rem 5rem 1.5rem 0;
	}
	.top-page .header-title {
		margin: 0;
		padding: 2rem 5rem 1.5rem 0;
		width: 100%;
	}

	#button {
		z-index: 30;
		text-align: center;
		color: #fff;
		display: block;
		position: fixed;
		cursor: pointer;
	}
	.menu-trigger,
.menu-trigger span {
	display: inline-block;
	transition: all .4s;
	box-sizing: border-box;
	z-index: 2000;
	}
	.menu-trigger {
		position: absolute;
		width: 36px;
		height: 28px;
		right: 1.5rem;
		top: 1.5rem;
		padding:0;
		box-sizing:border-box;
		mix-blend-mode: unset;
	}
	.menu-trigger span {
		position: absolute;
		left: 0;
		width: 36px;
		height: 2px;
		background-color: #000;
	}
	a.menu-trigger,
	a.menu-trigger:hover,
	a.menu-trigger:focus {
		text-decoration:none !important;
		position: fixed;
	}
	.menu-trigger span:nth-of-type(1) {
		top: 0;
	}
	.menu-trigger span:nth-of-type(2) {
		top: 24px;
	}
	.menu-trigger span:nth-of-type(3) {
		bottom: 14px;
	}

	body.open #button {
		display: none;
	}

	.sp-menubtn {
		display: block;
	}

	/*===============================
common - #left - nav
=================================*/

	#side-menu, .top-page #side-menu {
		position: fixed;
		top: 0;
		right: -100vw;
		width: 320px;
		height: 100%;
		padding: 0;
		-webkit-overflow-scrolling: touch;
		overflow-y: auto;
		z-index: 1000;
		background-color: #074689;
	}
	#button-close {
		display: block;
		width: 36px;
		height: 36px;
		position: relative;
		margin: 1.5rem 1.5rem 1.5rem auto;
	}
	#button-close::before, #button-close::after{
		content: "";
		display: block;
		width: 100%;
		height: 3px;
		background: #fff;
		transform: rotate(45deg);
		transform-origin:0% 50%;
		position: absolute;
		top: 0;
		left: 10px;
	}
	#button-close::after{
		transform: rotate(-45deg);
		transform-origin:100% 50%;
		left: auto;
		right: 0;
	}

	.menu {
		padding: 0 15px;
	}

	.layer {
		position: fixed;
		top: 0;
		display: none;
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, 0.8);
		z-index: 20;
	}

	.layer.visible {
		display: block;
		height: 100%;
		overflow: hidden;
	}

	/*===============================
common - footer
=================================*/
	.zimukyoku,
	.zimukyoku:first-child {
		display: block;
		margin-bottom: 1rem;
		padding: 1.5rem;
	}

	p.zimukyoku-heading {
		width: 100%;
		margin-right: 0;
		height: auto;
	}

	.zimukyoku-text {
		font-size: 1.2rem;
	}

	.comingsoon {
		width: 75vw;
		margin: 100px auto 10vh;
		padding: 40px;
		text-align: center;
		background-color: #eee;
		border-radius: 5px;
		font-weight: 500;
	}

}

@media (max-width: 768px) {

	/*===============================
common
=================================*/

	.page-heading h2 {
		font-size: 2.8rem;
		padding: 1.5rem 0;
	}

	.page-content h3 {
		font-size: 2.4rem;
		line-height: 1.6;
	}

	.page-content h4 {
		font-size: 2rem;
	}

	/*===============================
style
=================================*/
	/* top */

	main.main {
		margin: 0 -20px;
	}
	.top-page main.main {
		margin: 0 1.5rem;
		width: calc(100% - 3rem);
	}

	.main-attention {
		position: static;
		width: unset;
		max-width: unset;
		margin: 2em 2em 0;
		padding: 2% 2em;
		background-color: rgb(255, 250, 225);
	}

	ul.news-list {
		padding-left: 15px;
		padding-right: 15px;
	}

	ul.news-list li {
		font-size: 1.2rem;
	}

	ul.news-list li .date {
		font-size: 1.4rem;
	}

	.page-banner-wrap {
		display: block;
	}

	.page-banner-item {
		width: 300px;
		height: 300px;
		margin: 0 auto 30px;
	}

	.banner-cnt {
		padding: 0 15px;
	}

	/* program */
	.session-title {
		display: block;
	}

	.session-title h3 {
		font-size: 2.1rem;
	}

	.session-title h3 span {
		line-height: 1.25;
	}

	.session-title p {
		margin-top: 0.3rem;
	}

	.program-btn .d-flex {
		flex-direction: column;
	}

	.program-btn_schedule {
		padding-top: 1.2em;
	}

	.program-btn .d-flex p {
		width: 100%;
	}

	.endai-title-3 {
		padding-left: 3.3em !important;
	}
}


.sp-content {
	display: none;
}
.pc {
	display: block;
}

@media (max-width: 1200px) {

	/*===============================
common
=================================*/

	.sp-content {
		display: block;
	}
	.pc {
		display: none;
	}

	/*===============================
style
=================================*/

	.message-flex {
		flex-direction: column-reverse;
	}

	.message-people {
		margin-top: 30px;
		margin-right: 0;
	}

	.top-imp {
		right: 20px;
		left: 20px;
	}

}