@charset "utf-8";
/*------------------------------------------------------------
	index
------------------------------------------------------------*/

.mainVisual {
	background: url("../../image/mv_bg.png");
	background-size: cover;
	background-position: center;
	padding: 0;
	position: relative;
	margin: 9rem 3rem 0;
	aspect-ratio: 100 / 48;
	display: flex;
    align-items: center;
	color: #fff;
	overflow: hidden;
}
.mainVisual .inner {
	width: 90%;
}
.mainVisual h2 {
	font-size: 1.8rem;
	text-align: left;
    position: relative;
    z-index: 1;
    line-height: 1.4;
	font-weight: 400;
	letter-spacing: .2em;
}
.mainVisual h2 span.en {
	display: block;
	font-size: 8rem;
	letter-spacing: 2px;
}
.mainVisual.active h2 span.en span {
	animation: textanimation .6s forwards;
	animation-timing-function: ease-out;
	opacity: 0;
	display: inline-block;
}
.mainVisual.active h2 span.en span:nth-child(1) {
	animation-delay: 1.2s
}
.mainVisual.active h2 span.en span:nth-child(2) {
	animation-delay: 1.6s
}

.mainVisual.active h2 span.en span:nth-child(3) {
	animation-delay: 2s
}

.mainVisual.active h2 span.en span:nth-child(4) {
	animation-delay: 2.4s
}

.mainVisual.active h2 span.en span:nth-child(5) {
	animation-delay: 2.8s
}

.mainVisual.active h2 span.en span:nth-child(6) {
	animation-delay: 3.2s
}

.mainVisual.active h2 span.en span:nth-child(7) {
	animation-delay: 1.8s
}

.mainVisual.active h2 span.en span:nth-child(8) {
	animation-delay: 2s
}

.mainVisual.active h2 span.en span:nth-child(9) {
	animation-delay: 2.2s
}

.mainVisual.active h2 span.en span:nth-child(10) {
	animation-delay: 2.4s
}

.mainVisual.active h2 span.en span:nth-child(11) {
	animation-delay: 2.6s
}

.mainVisual.active h2 span.en span:nth-child(12) {
	animation-delay: 2.8s
}

.mainVisual.active h2 span.en span:nth-child(13) {
	animation-delay: 3s
}


@keyframes textanimation {
    0% {
		opacity: 0;
        transform: translateX(.2em);
    }

    100% {
		opacity: 1;
        transform: translateX(0);
    }
}

.mainVisual.active h2 span.ja {
	animation: textanimation2 1s forwards;
	animation-delay: 3.6s;
	opacity: 0;
	display: inline-block;
}

@keyframes textanimation2 {
    0% {
		opacity: 0;
        transform: translateY(1em);
    }

    100% {
		opacity: 1;
        transform: translateY(0);
    }
}

.mainVisual .point {
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.mainVisual .point p {
	background-color: rgba(255,255,255,.6);
	padding: 2em;
}

.mainVisual .point ul {
	display: flex;
}

.mainVisual .point ul li {
	background-color: #111;
	text-align: center;
	padding: 3.2rem 1rem;
	border-radius: 100%;
	width: 128px;
	height: 128px;
	margin-left: 1rem;
	box-sizing: border-box;
	line-height: 1.4;
	color: #fff;
}
.mainVisual .point ul li.list01 span {
	font-size: 2.6rem;
}
.mainVisual .point ul li.list02 span {
	font-size: 2.6rem;
}
.mainVisual .point ul li.list03 {
	font-size: 2.4rem;
	padding: 2.6rem 1rem;
}
.mainVisual02 {
	background: url("../../image/sec02_bg.png");
	background-repeat: repeat;
	background-position: center;
}
.mainVisual02 .inner {
	padding: 12rem 0 0;
	align-items: center;
}
.mainVisual02 .inner > img {
	display: block;
	margin: 0 auto 2rem;
	width: 480px;
}
.mainVisual02 h2 {
	font-size: 3.2rem;
	text-align: center;
    position: relative;
    z-index: 1;
	margin-bottom: 2em;
    line-height: 1.4;
}
.mainVisual02 h2 span {
	font-size: 2.5rem;
}
.mainVisual02 .point {
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.mainVisual02 .point p {
	background-color: rgba(255,255,255,.6);
	padding: 2em;
}

.mainVisual02 .point ul {
	display: flex;
}

.mainVisual02 .point ul li {
	background-color: #111;
	text-align: center;
	padding: 3.2rem 1rem;
	border-radius: 100%;
	width: 128px;
	height: 128px;
	margin-left: 1rem;
	box-sizing: border-box;
	line-height: 1.4;
	color: #fff;
}
.mainVisual02 .point ul li.list01 span {
	font-size: 2.6rem;
}
.mainVisual02 .point ul li.list02 span {
	font-size: 2.6rem;
}
.mainVisual02 .point ul li.list03 {
	font-size: 2.4rem;
	padding: 2.6rem 1rem;
}
.inner ul.circle li {
	padding-left: 1.5em;
	position: relative;
}
.inner ul.circle li:before {
	content: "●";
	color: #FDD772;
	position: absolute;
	top: 0;
	left: 0;
}

section h3 {
	text-align: left;
	font-weight: 400;
	font-size: 4.2rem;
	margin-bottom: 3rem;
}
section h3 span.en {
	display: block;
	color: #1d4094;
	font-size: 2rem;
}
section {
	padding: 8rem 3rem;
}

.sec01 {
	position: relative;
}

.sec01-01 {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	margin-bottom: 5rem;
	align-items: center;
}

.sec01-01 .text {
	width: 48%;
}

.sec01-01 .photo {
	width: 48%;
	margin-right: -4rem;
	z-index: 2;
}

.sec01-02 {
	background-color: #EEEBE3;
    padding: 4rem 6rem;
    box-sizing: border-box;
	position: relative;
	z-index: 2;
}

.sec01-02 h4.en {
	position: absolute;
	top: -.9em;
	left: 50%;
	transform: translateX(-50%);
	font-size: 2rem;
	color: #dc0508;
}

.sec01-02 .box {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}

.sec01-02 .box .item {
	width: 48%;
}

.sec01-02 .box .item h5 {
	font-weight: 400;
	font-size: 2rem;
	margin-bottom: 1rem;
}

.sec01-02 .box .item h5 .en {
	font-size: 2.8rem;
	margin-right: .9rem;
	padding-right: .6rem;
	color: #1d4094;
	border-right: #1d4094 solid 1px;
	vertical-align: -3px;
}

.sec02 {
	background-color: #1d4094;
	background-image: url("../../image/sec_bg.png");
	background-repeat: repeat;
	background-size: auto;
	color: #fff;
	padding-bottom: 14rem;
}

.sec02 .inner {
	opacity: 0;
}

.sec02 .title-area {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	padding-bottom: 3rem;
	border-bottom: 1px solid #fff;
	margin-bottom: 4rem;
}

.sec02 .title-area h3 {
	width: 24%;
}

.sec02 .title-area p {
	width: 73%;
}

.sec02 h3 ,
.sec02 h3 span.en {
	color: #fff;
}

.sec02 h4 {
	font-weight: 400;
	font-size: 2.8rem;
	margin-bottom: 2rem;
}

.sec02 .greeting-area {
    padding-bottom: 1rem;
    margin-bottom: 4rem;
    border-bottom: 1px solid #fff;
}

.sec02 .greeting-area .item {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	margin-bottom: 4rem;
}

.sec02 .greeting-area .item .photo {
	width: 23%;
}

.sec02 .greeting-area .item .text {
	width: 73%;
	font-size: 1.4rem;
}

.sec02 .greeting-area .item .text .name {
	text-align: right;
	font-size: 1.6rem;
	margin-top: 1rem;
}

.sec02 .greeting-area .item .text .name span {
	font-size: 2.2rem;
}

.sec02 .affiliation-area {
    padding-bottom: 4rem;
    margin-bottom: 4rem;
    border-bottom: 1px solid #fff;
}

.sec02 .affiliation-area ul {
	display: flex;
	gap: 2rem;
	flex-wrap: wrap;
}
.sec02 .affiliation-area ul li {
	font-size: 2rem;
}
.sec02 .affiliation-area ul.post li {
	font-size: 2.4rem;
}
.sec02 .business-area .business-box {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
}
.sec02 .business-area .business-box .item {
	width: 48.5%;
	padding: 3.5rem;
	color: #111;
	background-color: rgba(255,255,255,.9);
	box-sizing: border-box;
	margin-bottom: 3.5rem;
}
.sec02 .business-area .business-box .item h5 {
	font-weight: 400;
	font-size: 2.4rem;
	margin-bottom: 1rem;
}
.sec02 .business-area .business-box .item ul li {
	padding-left: 1.5rem;
	position: relative;
}

.sec02 .business-area .business-box .item ul li:before {
	content: "";
	background-color: #dc0508;
	width: .4rem;
	height: .4rem;
	border-radius: 1rem;
	position: absolute;
	top: .8em;
	left: 0;
}

.sec03 {
	position: relative;
	z-index: 1;
}

.sec03:before {
	content: "";
	height: 100%;
	padding: 2rem 6rem 4rem;
	width: calc(68rem + ( (100vw - 114rem) / 2)) ;
	background-color: #EEEBE3;
	position: absolute;
	top: -6rem;
	right: 0;
	z-index: 1;
}

.sec03 .inner {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	position: relative;
	z-index: 2;
	opacity: 0;
}

.sec03 h3 {
	width: 30%;
}

.sec03 .news-area {
	width: 62%;
	margin-top: -6rem;
}

.sec03 .news-area dt {
	font-size: 1.2rem;
}

.sec03 .news-area dd {
	margin-bottom: 2rem;
	padding-bottom: 2rem;
	border-bottom: 1px solid #111;
}
.sec03 .news-area a.en {
	text-align: right;
	display: block;
}

.sec04 {
    background-color: #1d4094;
	background-image: url("../../image/sec_bg.png");
	background-repeat: repeat;
	background-size: auto;
	margin-top: -8rem;
	color: #fff;
}
.sec04 .inner {
	opacity: 0;
}
.sec04 h3 ,
.sec04 h3 .en {
	color: #fff;
}

.sec04 .access-area {
	opacity: 0;
	position: relative;
	z-index: 2;
}
.sec04 .access-area .text {
	margin-top: 1rem;
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
}

.sec04 .access-area .text > p {
	width: 34%;
}

.sec04 .access-area .text .method {
	width: 60%;
}

.sec04 .access-area .text .method h4 {
	font-weight: 400;
	margin: 1.2rem 0 .6rem;
	padding-left: 2.8rem;
	background-repeat: no-repeat;
	background-size: 2rem;
	background-position: top .5rem left;
}
.sec04 .access-area .text .method h4.bus {
	background-image: url("../../image/icon_bus.png");
}
.sec04 .access-area .text .method h4.car {
	background-image: url("../../image/icon_car.png");
}
.sec04 .access-area .text .method h4.train {
	background-image: url("../../image/icon_train.png");
}
.sec04 .access-area .text .method h4.mt0 {
	margin-top: 0;
}

.sec04 .access-area .text .method p {
	font-size: 1.4rem;
}

@media all and (max-width: 896px) {
	#main .mainVisual {
		margin: 1rem 1rem 0;
		padding: 0;
		background-position: top right -8rem;
		aspect-ratio: 100 / 80;
	}
	.mainVisual h2 {
		font-size: 1.8rem;
	}
	.mainVisual .inner {
		flex-wrap: wrap;
		padding: 12rem 0 7rem;
	}
	.mainVisual h2 span.en {
		font-size: 4rem;
        line-height: 1;
		padding-bottom: 1rem;
	}

	#main {
		overflow: hidden;
	}
	#main section {
		padding-left: 1.5rem;
		padding-right: 1.5rem;
		box-sizing: border-box;
	}
	section {
		padding: 6rem 0;
	}
	section h3 {
		font-size: 2.8rem;
		margin-bottom: 3rem;
	}
	section h3 span.en {
		font-size: 1.4rem;
	}

	section h4 {
		font-size: 2.2rem;
		margin-bottom: 2rem;
	}

	.sec01-01 .text ,
	.sec01-01 .photo {
		width: 100%;
	}

	.sec01-01 .text {
		margin-bottom: 3rem;
	}
	
	.sec01-02 {
		padding: 2rem;
	}
	
	.sec01-02 .box .item h5 .en {
		font-size: 2.2rem;
		vertical-align: -1px;
	}
	
	.sec01-02 .box .item h5 {
		font-size: 1.8rem;
	}
	
	.sec01-02 .box .item {
		width: 100%;
		margin-bottom: 2rem;
	}
	
	.sec02 {
		padding-bottom: 10rem;
	}
	
	.sec02 .title-area h3 ,
	.sec02 .title-area p {
		width: 100%;
		margin-bottom: 2rem;
	}
	
	.sec02 h4 {
		font-size: 2.2rem;
	}
	
	.sec02 .greeting-area .item .photo ,
	.sec02 .greeting-area .item .text {
		width: 100%;
	}
	
	.sec02 .greeting-area .item .photo {
		max-width: 16rem;
        margin: 0 auto 2rem;
	}
	
	.sec02 .greeting-area .item .text .name {
		font-size: 1.2rem;
	}
	
	.sec02 .greeting-area .item .text .name span {
		font-size: 2rem;
	}
	
	.sec02 .affiliation-area ul li {
		font-size: 1.6rem;
	}

	.sec02 .affiliation-area ul.post li {
		font-size: 2rem;
	}

	.sec02 .business-area .business-box .item {
		width: 100%;
		padding: 2rem;
		margin-bottom: 2rem;
	}
	
	.sec02 .business-area .business-box .item h5 {
		font-size: 1.8rem;
	}
	
	.sec03 {
		padding-top: 0;
	}
	
	.sec03 h3 ,
	.sec03 .news-area {
		width: 100%;
		margin-top: 0;
	}
	
	.sec04 {
		margin-top: 0;
	}
	
	.sec04 .access-area .text > p ,
	.sec04 .access-area .text .method {
		width: 100%;
	}

	.sec04 .access-area .text > p {
		margin-bottom: 2rem;
	}
	
	.sec04 .access-area .text .method h4 {
		background-position: top .7rem left;
		font-size: 1.8rem;
	}
	
}
}