@charset "UTF-8";
/* CSS Document */
/* loading
================================================== */
.loading {
	width: 100vw;
	height: 100vh;
	transition: all 1s;
	background-color: #fff;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 9999;
	opacity: 1;
	visibility: visible;
}
.loading.is-active {
	opacity: 0;
	visibility: hidden;
}
.loading-animation {
	width: 100vw;
	height: 100vh;
	transition: all 1s;
	background-color: #cc0000;
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	visibility: hidden;
}
.loading-animation.is-active {
	opacity: 1;
	visibility: visible;
}
.logo {
	width: 40%;
	-webkit-animation: logo 0.8s forwards;
	animation: logo 0.8s forwards;
	animation-delay: 0.2s;
}
@media screen and (max-width: 639px) {
	.logo {
		width: 60%;
	}
}
@keyframes byeShutter {
	70% {
		opacity: 1;
	}
	100% {
		display: none;
		opacity: 0;
		z-index: -1;
	}
}
@keyframes logo {
	0% {
		opacity: 1;
	}
	50% {
		transform: rotate(0deg);
	}
	100% {
		transform: scale(0.8);
	}
}
/* slideArea
================================================== */
#slideArea {
	position: relative;
	z-index: 0;
	width: 100%;
}
/* slideBox
================================================== */
#slideBox {
	position: relative;
	z-index: 1;
}
/* ------ スライダー ------ */
@keyframes zoomUp {
	0% {
		transform: scale(1);
	}
	100% {
		transform: scale(1.25);
	}
}
.swiper-slide-active .slide-img, .swiper-slide-duplicate-active .slide-img, .swiper-slide-prev .slide-img {
	animation: zoomUp 10s linear 0s 1 normal both;
}
//imgタグだと下に隙間ができるのでblockに。
.slide-img img {
	display: block;
}
/* conWrapper
================================================== */
#conWrapper {
	position: relative;
	overflow: hidden;
	width: 100%;
	padding-top: 60px;
}
@media screen and (max-width: 639px) {
	#conWrapper {
		padding-top: 80px;
	}
}
/* mainWrapper
================================================== */
#mainWrapper {
	width: 100%;
	position: relative;
	padding-top: 60px;
}
@media screen and (max-width: 639px) {
	#mainWrapper {
		padding-top: 80px;
	}
}
#slideTit {
	position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
	width: 15%;
	z-index: 3;
}
@media screen and (max-width: 639px) {
	#slideTit {
		width: 30%;
	}
}
#credit01 {
	position: absolute;
    right: 10px;
    bottom: 10px;
	z-index: 3;
	font-size: 50%;
	color: #fff;
	line-height: 100%;
}

/* topArea
================================================== */
#topArea {
	position: relative;
}
#topArea h1 {
	position: absolute;
    left: 50%;
    top: 44%;
    transform: translate(-50%,-50%);
	z-index: 3;
	color: #fff;
	text-align: center;
	line-height: 170%;
	font-size: 240%;
	letter-spacing: 0.15em;
	text-shadow: #0e1513 0 0 10px;
	width: 100%;
}
#topArea h1 .txtS {
	border-top: solid 2px #fff;
	font-size: 80%;
	padding-top: 30px;
	line-height: 500%;
}
@media screen and (max-width: 1400px) {
	#topArea h1 {
		font-size: 2.5vw;
	}
	#topArea h1 .txtS {
		padding-top: 2%;
	}
}
@media screen and (max-width: 639px) {
	#topArea h1 {
		font-size: 4.4vw;
	}
	#topArea h1 .txtS {
		border-top: solid 1px #fff;
		padding-top: 3%;
	}
}
#topArea p {
	position: absolute;
    left: 50%;
    top: 77%;
    transform: translate(-50%,-50%);
	z-index: 3;
	color: #fff;
	text-align: center;
	line-height: 170%;
	font-size: 240%;
	letter-spacing: 0.15em;
	text-shadow: #0e1513 0 0 10px;
	width: 100%;
}
@media screen and (max-width: 1400px) {
	#topArea p {
		font-size: 2.5vw;
	}
}
@media screen and (max-width: 639px) {
	#topArea p {
		font-size: 4.4vw;
	}
}
#topArea figure {
	position: relative;
	z-index: 0;
}
/* newsArea
================================================== */
.newsArea {
	padding: 60px 5% 0;
}
/* newsBlock */
.newsBlock {
	max-width: 1080px;
	margin: 0 auto;
}
.newsTit {
	padding-bottom: 10px;
}
.newsTit h3 {
	background-color: #054045;
	color: #fff;
	display: inline-block;
	padding: 0.5em 1em;
	font-size: 200%;
}
.newsTit p {
	padding-top: 0.5em;
	font-size: 120%;
	font-weight: 500;
}
@media screen and (max-width: 639px) {
	.newsTit h3 {
		font-size: 5vw;
	}
	.newsTit p {
		font-size: 100%;
	}
}
.newsTit h2 {
	padding-top: 15px;
	font-weight: 700;
	line-height: 100%;
	display: flex;
	align-items: center;
	color: #054045;
}
.newsTit h2:after {
	border-top: 10px solid #054045;;
	content: "";
	flex-grow: 1;
	margin-left: 2%;
}
@media screen and (max-width: 639px) {
	.newsTit h2 {
		font-size: 70%;
	}
}
#infoList {
	padding-top: 3px;
}
.infoBtn {
	padding: 20px 0;
}
.newsBlock .infoBox {
	padding: 0 0 15px 0;
}
.newsBlock .infoBox:first-child {
	border-top: solid 1px #ddd;
	padding: 15px 0 15px 0;
}
.newsBlock .infoBox .infoDay {
	float: left;
	width: 90px;
	font-size: 60%;
	font-weight: 500;
}
@media screen and (max-width: 639px) {
	.newsBlock .infoBox .infoDay {
		float: none;
		width: 100%;
		line-height: 100%;
		padding-bottom: 5px;
	}
}
.newsBlock .infoBox p {
	font-size: 90%;
	line-height: 140%;
	font-weight: 500;
}
.newsBlock .infoBox p a {
	color: #222;
	/*線の基点とするためrelativeを指定*/
	position: relative;
	/*リンクの形状*/
	padding: 0 0 15px;
	text-decoration: none;
	outline: none;
	display: block;
	transition: .3s;
}
.newsBlock .infoBox p a:hover {
	color: #008380;
	transition: .3s;
}
/*線の設定*/
.newsBlock .infoBox p a::before, .newsBlock .infoBox p a::after {
	content: '';
	/*絶対配置で線の位置を決める*/
	position: absolute;
	z-index: 1;
	bottom: 0;
	left: 0;
	/*線の形状*/
	background: #ddd;
	width: 100%;
	height: 1px;
	/*アニメーションの指定*/
	transition: all 0.3s ease-in-out;
}
/*hover時に伸びる線の形状*/
.newsBlock .infoBox p a::after {
	width: 0;
	background: #008380;
}
/*hover時に100%に伸びる*/
.newsBlock .infoBox p a:hover::after {
	width: 100%;
}
/* #infoArea　centerBtnMore */
.newsArea .forPc {
	display: flex !important;
}
/* greetingArea
================================================== */
#greetingArea {
	padding: 60px 5% 40px;
	background-color: #F9F8F6;
}
#greetingBlock {
	max-width: 1080px;
	margin: 0 auto;
	padding-bottom: 30px;
}
#greetingArea h2 {
	padding-bottom: 20px;
	font-size: 140%;
	letter-spacing: 0.2em;
}
@media screen and (max-width: 639px) {
	#greetingArea h2 {
		font-size: 100%;
	}
}
.greetingL {
	float: left;
	width: 75%;
}
.greetingR {
	float: right;
	width: 20%;
	padding-top: 1em;
	text-align: center;
}
@media screen and (max-width: 800px) {
	.greetingL {
		float: none;
		width: 100%;
	}
	.greetingR {
		float: none;
		width: 160px;
		margin: 0 auto;
		padding-top: 30px;
	}
}
.greetingL p {
	padding-top: 1em;
	text-align: justify;
}
.greetingR .txtS {
	font-size: 80%;
	line-height: 120%;
	padding: 1em 0 0.3em;
}
/* messageBlock
================================================== */
#messageBlock {
	position: relative;
	width: 100%;
	max-width: 1000px;
	margin: 0 auto;
}
#messageTit {
	position: absolute;
	width: 30%;
	top: 5%;
	left: 35%;
}
#message01 {
	position: absolute;
	width: 40%;
	top: 20%;
	left: 8%;
}
#message02 {
	position: relative;
	width: 40%;
	padding: 10% 8% 0 52%;
}
@media screen and (max-width: 639px) {
	#messageTit {
		position: relative;
		width: 66%;
		margin: 0 auto;
		padding: 30px 0;
		top: inherit;
		left: inherit;
	}
	#message01 {
		position: relative;
		width: 85%;
		margin: 0 auto;
		padding-bottom: 30px;
		top: inherit;
		left: inherit;
	}
	#message02 {
		position: relative;
		width: 85%;
		margin: 0 auto;
		padding: 0;
		top: inherit;
		left: inherit;
	}
}
/* projectList
================================================== */
#projectList {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 5%;
}
#projectListArea {
	padding: 30px 0 0;
}
/* projectBox */
.projectBox {
	display: inline-block;
	vertical-align: top;
	margin: 0 2.5% 3.5%;
	width: 28%;
}
@media screen and (max-width: 800px) {
	.projectBox {
		margin: 3.5%;
		width: 42%;
	}
}
@media screen and (max-width: 639px) {
	.projectBox {
		display: inherit;
		margin: 0 1.5% 6%;
		width: 100%;
	}
}
/* projectBox linkBox */
.projectBox .linkBox {
	position: relative;
	z-index: 1;
}
.projectBox .linkBox a {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	text-indent: -999px;
	z-index: 11;
}
.projectBox .zoomBox {
	display: block;
	transition-duration: 0.3s; /*変化に掛かる時間*/
}
.projectBox .zoomBox:hover {
	transform: scale(1.1); /*画像の拡大率*/
	transition-duration: 0.3s; /*変化に掛かる時間*/
}
.projectBox h3 {
	font-size: 100%;
}
@media screen and (max-width: 639px) {
	.projectBox h3 {
		margin: 2% 0;
	}
}
/* projectPhoto */
@media screen and (max-width: 639px) {
	.projectPhoto {
		float: left;
		width: 35%;
		padding-right: 5%;
	}
}
.projectPhoto img {
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
}
/* projectTxt */
@media screen and (max-width: 639px) {
	.projectTxt {
		float: right;
		width: 60%;
		padding-top: 15px;
	}
}
.projectTxt .projectDay {
	font-size: 60%;
	font-weight: 500;
	line-height: 100%;
	padding-top: 15px;
}
@media screen and (max-width: 639px) {
	.projectTxt .projectDay {
		padding: 0;
	}
}
.projectTxt h3 {
	font-weight: 500;
	margin: 0;
	padding-top: 5px;
	line-height: 130%;
}
/* course
================================================== */
#course {
	margin: 60px auto 0;
	max-width: 1280px;
	padding: 0 5%;
}
@media all and (max-width: 800px) {
	#course {
		margin: 20px auto 0;
	}
}
#courseArea .containerTit {
	padding-top: 40px;
}
@media all and (max-width: 800px) {
	#courseArea .containerTit {
		padding-top: 0;
	}
}
#courseArea .containerTit h2 {
	display: flex;
	align-items: center;
	padding-bottom: 60px;
}
#courseArea .containerTit h2:before, #courseArea .containerTit h2:after {
	content: "";
	height: 1px;
	flex-grow: 1;
	background-color: #000;
}
#courseArea .containerTit h2:before {
	margin-right: 1rem;
}
#courseArea .containerTit h2:after {
	margin-left: 1rem;
}
/* courseTop */
#courseTop {
	position: relative;
	padding-bottom: 32%;
}
#courseTop #coursebg01{
	position: absolute;
	z-index: 0;
	width: 65%;
	left: -6%;
	bottom: 0;
	padding: 0;
	margin: 0;
}
#courseTop #coursebg02{
	position: absolute;
	z-index: 0;
	width: 48%;
	right: -10%;
	bottom: 17%;
	padding: 0;
	margin: 0;
}
@media all and (max-width: 900px) {
	#courseTop {
		padding-bottom: 70%;
	}
	#courseTop #coursebg01{
		width: 85%;
		left: -6%;
		bottom: 14%;
	}
	#courseTop #coursebg02{
		width: 70%;
		right: -6%;
		bottom: 0;
	}
}
#courseArea .containerTit h5 {
	font-size: 700%;
	font-weight: 600;
	padding: 60px 0 0;
	color: #054045;
	line-height: 67%;
}
@media all and (max-width: 1400px) {
	#courseArea .containerTit h5 {
		font-size: 8vw;
	}
}
@media screen and (max-width: 638px) {
	#courseArea .containerTit h5 {
		font-size: 360%;
	}
}
/* courseBlock */
#courseArea .courseBlock {
	background-color: #054045;
	color: #fff;
	padding: 30px 5%;
}
@media screen and (max-width: 639px) {
	#courseArea .courseBlock {
		padding: 5%;
	}
}
#courseArea .courseBlock h6 {
	font-size: 200%;
	font-weight: 700;
	padding: 0 0 15px;
}
#courseArea .containerTit .courseBlock p.courseTxt {
	text-align: left;
	font-size: 120%;
	line-height: 160%;
	font-size: 400;
	padding: 0;
}
@media all and (max-width: 1400px) {
	#courseArea .courseBlock h6 {
		font-size: 2.5vw;
	}
	#courseArea .containerTit .courseBlock p.courseTxt {
		font-size: 100%;
	}
}
@media screen and (max-width: 800px) {
	#courseArea .courseBlock h6 {
		font-size: 3.5vw;
	}
}
@media screen and (max-width: 639px) {
	#courseArea .courseBlock h6 {
		font-size: 100%;
		line-height: 160%;
		padding: 0 0 5px;
	}
}


/* courseAll
================================================== */
#courseAll {
	padding-bottom: 5%;
}
/* courseTxt
================================================== */
#courseTxt {
	padding-bottom: 1em;
}
@media screen and (max-width: 800px) {
	#courseTxt {
		padding-bottom: 30px;
	}
}
/* tableArea1
================================================== */
#tableArea1 .boxL {
	float: left;
	width: 48%;
}
#tableArea1 .boxR {
	float: right;
	width: 48%;
}
#tableArea1 .boxR .tableBootom {
	margin-bottom: 1em;
}
#tableArea1 .boxR p {
	font-size: 80%;
}
@media screen and (max-width: 800px) {
	#tableArea1 .boxL {
		float: none;
		width: 100%;
		padding-bottom: 30px;
	}
	#tableArea1 .boxR {
		float: none;
		width: 100%;
	}
}

/* table */
table {
	border-collapse: collapse !important;
}
table th,
table td {
	padding: 2px 0;
	font-size: 100%;
	line-height: 160%;
	text-align: center;
}
@media screen and (max-width: 800px) {
	table th,
	table td {
		font-size: 80%;
	}
}
#table01 sup{
	font-size: 70%;
}
#specArea p{
	padding-top: 10px;
	font-size: 70%;
}
td {
	background-color: #eee;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	border: solid #fff 2px;
}
td span {
	font-size: 80%;
}
td.tableTit {
	font-weight: bold;
	text-align: center;
}
td.tableBg01 {
	background-color: #054045;
	color: #fff;
}
td.tableBg02 {
	background-color: #ccc;
}
td.tableBg03 {
	background-color: #EBF4EF;
}
td.tableBg04 {
	background-color: #fff;
}
/* courseArea
================================================== */
.courseArea {
	padding: 5% 0 0;
}
@media screen and (max-width: 639px) {
	.courseArea {
		padding: 10% 0 0;
	}
}
.courseBox {
	position: relative;
	float: left;
	width: 18%;
	padding: 1%;
}
@media screen and (max-width: 1000px) {
	.courseBox {
		width: 28%;
		padding: 2%;
	}
}
@media screen and (max-width: 639px) {
	.courseBox {
		width: 46%;
	}
}
.courseBox dt {
	font-size: 300%;
	padding: 0 0 10px;
	margin: 0;
}
.courseBox dd {
	font-size: 160%;
	padding: 0 0 3px;
	margin: 0;
	text-shadow: #fff 0 0 10px;
}
@media screen and (max-width: 639px) {
	.courseBox dt {
		font-size: 200%;
		padding: 0 0 5px;
	}
	.courseBox dd {
		font-size: 130%;
		padding: 0 0 0;
	}
}
.courseBox figure {
	position: relative;
	z-index: 0;
}
.courseBox .courseTxt {
	position: absolute;
	z-index: 1;
	top: 0;
	left: 0;
}
/* linkBox */
.courseArea .linkBox {
    position: relative;
    z-index: 1;
}
.courseArea .linkBox a {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    text-indent:-999px;
    z-index: 11;
}
/* zoomBox */
.courseArea .zoomBox {
	display: block;
	transition-duration: 0.3s;	/*変化に掛かる時間*/
}
.courseArea .zoomBox:hover {
	transform: scale(1.05);	/*画像の拡大率*/
	transition-duration: 0.3s;	/*変化に掛かる時間*/
}
/* ticket
================================================== */
#ticket {
	padding: 60px 5% 0;
}
.ticketArea {
    width: 100%;
    display: -webkit-box;
    display: flex;
    -webkit-box-pack: justify;
    justify-content: space-between;
    flex-wrap: wrap;
	padding-bottom: 30px;
}
.ticketBox {
	width: 40%;
	padding: 2.5%;
	margin: 0 auto;
    background-color: #fff;
    box-shadow: 0 0 10px 0 rgba(0, 0, 0, .1);
}
@media screen and (max-width: 639px) {
	.ticketBox {
		width: 90%;
		padding: 5% 5% 20px;
		margin-bottom: 5%;
	}
	.ticketBox:first-child {
		padding: 5% 5% 0;
	}
}
.ticketBox h3 {
	font-weight: 700;
	padding-bottom: 20px;
}
.ticketBox h4 {
	font-weight: 500;
	color: #064045;
	padding: 0 0 20px;
	font-size: 120%;
}
@media screen and (max-width: 639px) {
	.ticketBox h4 {
		font-size: 100%;
		padding-bottom: 5px;
	}
}
.ticketBox dl {
	padding-bottom: 20px;
	border-bottom: dotted 1px #ddd;
	margin-bottom: 20px;
}
@media screen and (max-width: 639px) {
	.ticketBox dl {
		margin-bottom: 5%;
	}
}
.ticketBox dt {
	font-size: 120%;
	font-weight: 500;
}
@media screen and (max-width: 639px) {
	.ticketBox dt {
		font-size: 100%;
	}
}
.ticketBox dd {
	font-size: 120%;
	font-weight: 500;
	color: #064045;
}
@media screen and (max-width: 639px) {
	.ticketBox dd {
		font-size: 100%;
	}
}
.ticketBox .fatTxt {
	font-weight: 700;
}
.ticketBox .sTxt {
	font-size: 70%;
	font-weight: 300;
	color: #222;
}
/* ticketshop
================================================== */
.ticketshop {
	border-bottom: dotted 1px #ddd;
	padding: 0 0 15px 0;
}
.ticketshop h5 {
	font-size: 120%;
	font-weight: 700;
	color: #064045;
	padding-top: 15px;
}
@media screen and (max-width: 639px) {
	.ticketshop h5 {
		font-size: 100%;
	}
}
.ticketshop h5 a {
	color: #064045;
}
.ticketshop h5 a:hover {
	color: #56a5af;
	transition: .3s;
}
.ticketshop h5 span {
	font-size: 70%;
	font-weight: 300;
	color: #222;
}
.ticketshop h6 {
	font-size: 80%;
	font-weight: 500;
	padding-top: 15px;
}
/* merchandise
================================================== */
#merchandise {
	padding: 60px 5% 0;
}
/* goodArea
================================================== */
.goodArea {
	padding-top: 40px;
}
@media screen and (max-width: 1000px) {
	.goodArea {
		padding-top: 30px;
	}
}
.goodAreaPh {
	float: left;
	width: 60%;
}
.goodAreatxt {
	float: right;
	width: 37%;
}
@media screen and (max-width: 1000px) {
	.goodAreaPh {
		float: none;
		width: 100%;
	}
	.goodAreatxt {
		float: none;
		width: 100%;
	}
}
.goodAreatxt h3 {
	font-weight: 500;
	font-size: 170%;
	margin-bottom: 20px;
	line-height: 160%;
	color: #064045;
}
@media all and (max-width: 1400px) {
	.goodAreatxt h3 {
		font-size: 2vw;
	}
}
@media all and (max-width: 639px) {
	.goodAreatxt h3 {
		font-size: 120%;
		margin: 20px 0;
	}
}
@media all and (max-width: 400px) {
	.goodAreatxt h3 {
		font-size: 100%;
	}
}
@media all and (max-width: 300px) {
	.goodAreatxt h3 {
		text-align: left;
	}
}
.goodAreatxt p {
	padding-bottom: 1em;
}
/* top_company
================================================== */
.top_company {
	position: relative;
	z-index: 0;
	padding: 60px 0 60px;
	margin-bottom: 10%;
}
.top_company::after {
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	/*四角形を傾けます*/
	transform: skewY(-4deg);
	transform-origin: top right;
	z-index: -1;
	width: 100%;
	height: 100%;
	background: #efefef;
}
.top_company#summary::after {
	background: #efefef;
}
.top_company#champion::after {
	background: #064045;
}
.top_company .inner {
	max-width: 1500px;
	margin: 0 auto;
	padding: 0 5%;
	position: relative;
}
.containerR {
	position: relative;
	z-index: 1;
	float: right;
	width: 45%;
	padding-top: 100px;
}
.containerL {
	position: relative;
	z-index: 1;
	float: left;
	width: 50%;
	padding-top: 10%;
}
@media screen and (max-width: 800px) {
	.containerR {
		float: none;
		width: 100%;
		padding-top: 0;
	}
	.containerL {
		float: none;
		width: 100%;
		padding-top: 90%;
	}
}
.containerL #img01 {
	position: absolute;
	z-index: 0;
	top: 50%;
	right: 0;
	width: 85%;
}
.containerL #img02 {
	position: absolute;
	z-index: 1;
	top: 410%;
	left: 0;
	width: 40%;
}
.containerL #img03 {
	position: absolute;
	z-index: 0;
	top: 320%;
	right: 0;
	width: 55%;
}
.containerL #img04 {
	position: absolute;
	z-index: 0;
	top: 625%;
	right: 0;
	width: 75%;
}
.containerL #credit02 {
	position: absolute;
	z-index: 0;
	top: 835%;
	right: 0;
	font-size: 50%;
	color: #666;
}
@media screen and (max-width: 800px) {
	.containerL #img01 {
		top: 5%;
		right: 0;
		width: 85%;
	}
	.containerL #img02 {
		position: absolute;
		z-index: 1;
		top: 50%;
		left: 0;
		width: 50%;
	}
	.containerL #img03 {
		position: absolute;
		z-index: 0;
		top: 70%;
		right: 10%;
		width: 35%;
	}
	.containerL #img04 {
		display: none;
	}
	.containerL #credit02 {
		position: absolute;
		z-index: 0;
		top: 108%;
		right: 10%;
	}
}
.containerTit h3 {
	font-size: 500%;
	line-height: 100%;
	text-align: center;
}
@media all and (max-width: 1400px) {
	.containerTit h3 {
		font-size: 6vw;
	}
}
@media all and (max-width: 800px) {
	.containerTit h3 {
		padding-top: 20%;
	}
}
@media all and (max-width: 639px) {
	.containerTit h3 {
		font-size: 230%;
	}
}
.containerTit h2 {
	text-align: center;
	font-weight: 700;
	padding-bottom: 20px;
}
@media all and (max-width: 639px) {
	.containerTit h2 {
		font-weight: 500;
	}
}
.containerTit h4 {
	font-weight: 700;
	font-size: 120%;
	line-height: 130%;
	margin-bottom: 30px;
	padding-top: 10px;
}
@media all and (max-width: 639px) {
	.containerTit h4 {
		font-size: 100%;
	}
}
.containerR .heading {
	font-weight: 500;
	font-size: 170%;
	margin-bottom: 20px;
	line-height: 160%;
	text-align: center;
	color: #064045;
}
@media all and (max-width: 1400px) {
	.containerR .heading {
		font-size: 2vw;
	}
}
@media all and (max-width: 639px) {
	.containerR .heading {
		font-size: 120%;
	}
}
@media all and (max-width: 400px) {
	.containerR .heading {
		font-size: 100%;
	}
}
@media all and (max-width: 300px) {
	.containerR .heading {
		text-align: left;
	}
}
.containerR p {
	padding-bottom: 1em;
}
#summaryList dl {
	padding: 1em 5%;
	border-bottom: solid 1px #ccc;
}
#summaryList dl dt {
	float: left;
	width: 20%;
	font-weight: 500;
	font-size: 80%;
}
#summaryList dl dd {
	float: right;
	width: 75%;
}
@media screen and (max-width: 639px) {
	#summaryList dl {
		padding: 1em 0;
		border: none;
	}
	#summaryList dl dt {
		float: none;
		width: 100%;
		font-weight: 500;
		font-size: 80%;
		line-height: 100%;
		display: flex;
		align-items: center;
		padding-bottom: 1em;
	}
	#summaryList dl dt:after {
		border-top: 1px solid;
		content: "";
		flex-grow: 1;
		margin-left: 2%;
	}
	#summaryList dl dd {
		float: none;
		width: 100%;
	}
}
.point {
	padding-top: 1em;
}
.point h4 {
	padding-bottom: 1em;
	font-size: 80%;
	font-weight: 500;
}
.point li {
	list-style: disc;
	list-style-position: outside;
	margin-left: 1.3em;
	font-size: 80%;
	padding-bottom: 0.5em;
	line-height: 130%;
	
}
/* historyArea
================================================== */
#historyArea {
	background-image: url("../images/historyBg.jpg");
	background-position: center top;
	background-repeat: no-repeat;
	background-size: contain;
	margin: 60px auto 0;
	max-width: 1280px;
}
@media all and (max-width: 800px) {
	#historyArea {
		margin: 20px auto 0;
	}
}
#historyArea .containerTit {
	padding-top: 40px;
}
@media all and (max-width: 800px) {
	#historyArea .containerTit {
		padding-top: 0;
	}
}
#historyArea .containerTit h3 {
	color: #fff;
}
@media all and (max-width: 800px) {
	#historyArea .containerTit h3 {
		padding-top: 0;
	}
}
#historyArea .containerTit h2 {
	color: #fff;
	display: flex;
	align-items: center;
}
#historyArea .containerTit h2:before, #historyArea .containerTit h2:after {
	content: "";
	height: 1px;
	flex-grow: 1;
	background-color: #fff;
}
#historyArea .containerTit h2:before {
	margin-right: 1rem;
}
#historyArea .containerTit h2:after {
	margin-left: 1rem;
}
#historyArea .containerTit p {
	color: #fff;
	text-align: center;
	padding-bottom: 60px;
	font-size: 120%;
}
@media screen and (max-width: 800px) {
	#historyArea .containerTit p {
		text-align: left;
	}
}
@media screen and (max-width: 638px) {
	#historyArea .containerTit p {
		font-size: 100%;
	}
}
/* messageArea
================================================== */
.messageArea {
	background-color: #fff;
	box-shadow: 0 3px 16px 0 rgba(0, 0, 0, 0.26);
	margin: 40px auto 0;
	max-width: 1000px;
}
@media screen and (max-width: 700px) {
	.messageArea {
		width: 90%;
		margin: 30px auto 60px;
	}
}
.messageImgBox {
	float: left;
	width: 50%;
	overflow: hidden;
}
@media screen and (max-width: 700px) {
	.messageImgBox {
		float: none;
		width: 100%;
	}
}
.messageImgBox:hover img {
	width: 100%;
	-webkit-transform: scale(1.1);
	transform: scale(1.1);
}
.messageImgBox img {
	width: 100%;
	-webkit-transition-duration: 0.4s;
	transition-duration: 0.4s;
	-webkit-transition-property: background, border, color, fill, content, opacity, -webkit-transform;
	transition-property: background, border, color, fill, content, opacity, -webkit-transform;
	transition-property: background, border, color, transform, fill, content, opacity;
	transition-property: background, border, color, transform, fill, content, opacity, -webkit-transform;
}
.messageTxtBox {
	float: right;
	width: 50%;
}
@media screen and (max-width: 700px) {
	.messageTxtBox {
		float: none;
		width: 100%;
	}
}
.messageTxtTitBox {
	padding: 15px 5% 0;
}
.messageTxtTitBox h3 {
	font-size: 80%;
	line-height: 120%;
	color: #064045;
	font-weight: 500;
	padding-bottom: 5px;
	border-bottom: solid 5px #064045;
}
.messageTxtTitBox p {
	padding-top: 15px;
	font-size: 130%;
	font-weight: 500;
}
@media screen and (max-width: 700px) {
	.messageTxtTitBox p {
		font-size: 100%;
	}
}
.messageTxtTitBox p .iconHistory::before {
	font-family: 'Material Symbols Outlined';
	content: "\e71a";
	vertical-align: -10%;
	margin-right: 0.2em;
}
.messageLeadBox {
	padding: 2% 5% 5%;
}
.messageLeadBox p {
	padding: 0 0 5%;
	line-height: 140%;
}
.messageBtn {
	position: relative;
	display: inline-block;
	border: solid 1px #222;
	-webkit-border-radius: 2px;
	-moz-border-radius: 2px;
	border-radius: 2px;
	line-height: 2px%;
	background-color: #fff;
}
.messageBtn:hover {
	border: solid 1px #064045;
	transition: .3S;
	-webkit-transition: .3s;
}
.messageBtn a {
	padding: 5px 25px 5px 35px;
	color: #222;
	display: block;
	font-size: 80%;
	font-weight: 500;
}
.messageBtn:hover a {
	transition: .3S;
	-webkit-transition: .3s;
	color: #fff;
	background-color: #064045;
}
.messageBtn .btn-border:before {
	position: absolute;
	top: 0;
	left: 0;
	-webkit-transition: .3s;
	transition: .3s;
	font-family: 'Material Symbols Outlined';
	content: "\e02e";
	-webkit-transform: translateX(10px) translateY(5px);
	transform: translateX(10px) translateY(5px);
}
.messageBtn:hover .btn-border:before {
	-webkit-transform: translateX(16px) translateY(5px);
	transform: translateX(16px) translateY(5px);
	color: #fff;
}
/* mapArea
================================================== */
#mapArea {
	padding: 20px 0 40px;
}
#mapBlock {
	height: 480px;
}
#map {
	width: 100%;
	height: 100%;
}
/* ------ google-maps ------ */
.google-maps {
	position: relative;
	padding-bottom: 0; // これが縦横比
	height: 0;
	overflow: hidden;
}
.google-maps iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100% !important;
	height: 100% !important;
}
/* bannerArea
================================================== */
.bannerArea {
	border-top: solid 1px;
    padding: 30px 0 60px;
}
.bannerTxt {
	padding-bottom: 20px;
}
.banner {
	max-width: 500px;
	margin: 0 auto;
}
/* sponsor
================================================== */
#sponsor {
	background-color: #054045;
	padding: 60px 5%;
}
#sponsorArea {
	margin: 0 auto;
	max-width: 1280px;
}
#sponsorArea .containerTit h3 {
	color: #fff;
}
@media all and (max-width: 800px) {
	#sponsorArea .containerTit h3 {
		padding-top: 0;
	}
}
#sponsorArea .containerTit h2 {
	color: #fff;
	display: flex;
	align-items: center;
}
#sponsorArea .containerTit h2:before, #sponsorArea .containerTit h2:after {
	content: "";
	height: 1px;
	flex-grow: 1;
	background-color: #fff;
}
#sponsorArea .containerTit h2:before {
	margin-right: 1rem;
}
#sponsorArea .containerTit h2:after {
	margin-left: 1rem;
}
#sponsorArea .containerTit p {
	color: #fff;
	text-align: center;
	padding-bottom: 60px;
	font-size: 120%;
}
@media screen and (max-width: 800px) {
	#sponsorArea .containerTit p {
		text-align: left;
	}
}
@media screen and (max-width: 638px) {
	#sponsorArea .containerTit p {
		font-size: 100%;
	}
}
.sponsorL,
#sponsorM,
#sponsorS {
	width: 100%;
	display: -webkit-box;
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	padding-top: 40px;
}
.sponsorBox {
	border: solid 1px #fff;
}
.sponsorL .sponsorBox {
	width: 30%;
	margin-bottom: 5%;
}
.sponsorL::after {
	display: block;
	content: "";
	width: 30%;
}
#sponsorM .sponsorBox {
	width: 23%;
	margin-bottom: 3%;
}
#sponsorM::before{
  content: "";
  display: block;
  width: 23%;
  order: 1;
}
#sponsorM::after {
	display: block;
	content: "";
	width: 23%;
}
#sponsorS .sponsorBox {
	width: 18%;
	margin-bottom: 2.5%;
}
#sponsorS .sponsorBox_empty {
	width: 18%;
}
@media screen and (max-width: 639px) {
	.sponsorL .sponsorBox {
		width: 47%;
		margin-bottom: 5%;
	}
	.sponsorL::after {
		width: 47%;
	}
	#sponsorM .sponsorBox {
		width: 30%;
	}
	#sponsorM::before{
	  width: 30%;
	}
	#sponsorM::after {
		width: 30%;
	}
	#sponsorS .sponsorBox {
		width: 23%;
	}
	#sponsorS .sponsorBox_empty {
		width: 23%;
	}
}
/* community
================================================== */
#community {
	padding: 60px 5%;
}
#communityArea {
	margin: 0 auto;
	max-width: 1280px;
}
#communityArea .containerTit {
	padding: 40px 0 20px;
}
@media all and (max-width: 800px) {
	#communityArea .containerTit {
		padding-top: 0;
	}
}
#communityArea .containerTit h2 {
	display: flex;
	align-items: center;
	padding: 10px 0 60px;
}
#communityArea .containerTit h2:before, #communityArea .containerTit h2:after {
	content: "";
	height: 1px;
	flex-grow: 1;
	background-color: #000;
}
#communityArea .containerTit h2:before {
	margin-right: 1rem;
}
#communityArea .containerTit h2:after {
	margin-left: 1rem;
}
#communityArea .containerTit p {
	padding-bottom: 1em;
}