.wrap{
    overflow: hidden;
    height: 100%;
    width: 100%;
}

/**
 * Responsive Container Style
 * Brake Point
 * 1366px, 1024px, 768px, 640px
 */
 .box720 {
 	width: 720px;
 	margin: auto;
 	overflow: hidden;
 }

.box{
	width: 1024px;
	margin: auto;
	overflow: hidden;
}
.box1200{
	width: 1200px;
	margin: auto;
	overflow: hidden;
}

.sec{
	padding-top: 7vw !important;
	padding-bottom: 7vw !important;
}

[class^="box-"]{
	width: 100%;
}
.box-right{
	padding-left: 15%;
}
.box-left{
	padding-right: 15%;
}

.pb0 {
	padding-bottom: 0 !important;
}

.contentBox {
	display: flex;
	flex-flow: row nowrap;
	justify-content: space-between;
	align-items: stretch;
}

@media screen and (max-width: 1366px){

}
@media screen and (max-width: 1280px){
	.box1200{
		width: 1000px;
	}
}
@media screen and (max-width: 1024px){
	.box{
		width: 100%;
		padding: 0 2%;
	}
	.box1200{
		width: 100%;
		max-width: 980px;
	}
	.box-right {
		padding-left: 10%;
	}

	.box-left {
		padding-right: 10%;
	}
}
@media screen and (max-width: 820px){
	.box1200{
		width: 100%;
		padding: 0 2%;
	}
	.box-right {
		padding-left: 5%;
	}
	.box-left {
		padding-right: 5%;
	}
}
@media screen and (max-width: 640px){
	.box{
		width: 100% !important;
		padding: 0 4%;
	}
	.box720 {
		width: 100% !important;
		padding: 0 4%;
	}
	.img100{
		width: 100%;
		height: auto;
	}
	.box-right {
		padding-left: 2%;
		padding-right: 2%;
	}

	.box-left {
		padding-left: 2%;
		padding-right: 2%;
	}
}



/* animation
___________________*/
.draw div {
	display: inline-block !important;
	position: relative;
}

.draw div:before {
	content: "";
	display: block;
	width: 0;
	height: 107%;
	background: #fff;
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	z-index: 10;
}

.draw.drawimg div:before {
	height: 101%;
}

.draw2 div:before {
	background: var(--color-lightblue);
}

.draw.in div:before {
	animation-timing-function: cubic-bezier(0.6, 0, 0.4, 1);
	animation-duration: 1.2s;
	animation-delay: 0s;
	animation-fill-mode: forwards;
	animation-name: draw;
}

.draw.in div.ja:before {
	animation-delay: 0.3s;
}

@keyframes draw {
	0% {
		width: 0%;
	}

	50% {
		width: 100%;
	}

	100% {
		left: auto;
		right: 0;
		width: 0%;
	}
}

.draw div span {
	opacity: 0;
	transition: opacity 0s 0.7s;
}

.draw div.ja span {
	transition: opacity 0s 0.7s;
}

.draw.in div span {
	opacity: 1;
	display: inline-block;
	text-shadow: 0 0 2px black;
}



/* Util
___________________*/
.flex{
	display: flex;
	flex-flow: row nowrap;
	justify-content: space-between;
}

.flex .left,
.flex .right{
	width: 50%;
}

@media screen and (max-width: 640px) {

	.flex {
		display: flex;
		flex-flow: column-reverse wrap;
		justify-content: space-between;
	}

	.flex .left,
	.flex .right {
		width: 100%;
	}

	.flex .right{
		margin-bottom: 5vw;
	}
}


/* Lettering
___________________*/

.secTitle{
	margin-bottom: 3rem;
}
.secTitle .en{
	font-family: 'Poppins', sans-serif;
	font-size: clamp(36px, 4.2vw, 70px);
	letter-spacing: 0.1rem;
	line-height: 1.2;
	color: var(--color-lightblue);
	display: block;
}
.secTitle .ja {
	font-size: clamp(14px, 1.4vw, 18px);
	font-weight: bold;
	letter-spacing: 0.1rem;
	line-height: 1.2;
	color: var(--color-navy);
	display: block;
}

.fff{
	color: #fff !important;
}

.blue{
	color: #BBDDF7;
}

.secLead{
	font-size: clamp(16px, 1.2vw, 18px);
	line-height: 1.5;
	margin-bottom: 3rem;
}




/* header, footer
___________________*/
#header{
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	z-index: 2000;
	background: rgba(0,0,0, 0.5);
	background: linear-gradient(180deg, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0) 100%);
	display: flex;
	flex-flow: row nowrap;
	justify-content: space-between;
	align-items: center;
	padding: 1vw 2vw;
}

#header a{
	color: #fff;
}

#nav ul{
	display: flex;
	flex-flow: row nowrap;
	justify-content: flex-end;
	align-items: center;
}

#nav ul li{
	margin-bottom: 0;
}

#nav ul a{
	font-size: clamp(12px, 1.4vw, 14px);
	padding: 1.2vw;
	letter-spacing: 0.06rem;
}

.circle{
	background: var(--color-lightblue);
	height: 56px;
	width: 56px;
	padding: 0 !important;
	border-radius: 50%;
	font-size: 24px !important;
	position: relative;
	display: block;
	transition: all 0.2s;
}
.circle i{
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
}

.circle::after{
	content: "";
	display: block;
	height: 56px;
	width: 56px;
	padding: 0 !important;
	border-radius: 50%;
	font-size: 24px !important;
	position: relative;
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
}

@media screen and (max-width: 1366px) {}

@media screen and (max-width: 1280px) {}

@media screen and (max-width: 1024px) {}

@media screen and (max-width: 820px) {
	#logo{
		width: 180px;
	}
	#logo img{
		width: 100%;
		height: auto;
	}
	.circle,
	.circle::after{
		width: 45px;
		height: 45px;
	}
}

@media screen and (max-width: 640px) {
	#header{
		display: block;
		padding: 0;
		z-index: 8500;
	}
	#logo img{
		width: 150px;
		padding: 2vw;
	}
	#nav{
		display: none;
		position: absolute;
		top: 0;
		width: 100%;
		background: rgba(0,0,0,0.7);
		z-index: 8500;
		padding-top: 40px;
	}
	#nav ul{
		flex-flow: row wrap;
		justify-content: center;
	}
	#nav ul li{
		width: 100%;
		text-align: center;
	}
	#nav ul li a{
		display: block;
		width: 100% !important;
		height: auto !important;
		padding: 2rem 0;
	}
	.circle{
		position: static;
		border-radius: 0;
		padding: 0.5rem 0 !important;
	}
	.circle i{
		position: static;
		transform: none;
	}
}


#footer{
	position: relative;
	background: var(--color-granblue);
	color: #fff;
}

.footerMain{
	display: flex;
	flex-flow: row nowrap;
	justify-content: space-between;
	align-items: flex-start;
	padding: 2vw 0;
}

.footerInfo{
	width: 65%;
}

#footer .address{
	display: flex;
	flex-flow: row nowrap;
	justify-content: space-between;
	align-items: flex-start;
	font-size: clamp(12px, 1.4vw, 14px);
}

#footer .footerLogo{
	margin-bottom: 3rem;
}

#footer .address dt{
	margin-bottom: 0.5rem;
}

#footer .address dd{
	color: #8db1cc;
	line-height: 1.5;
}

.footerNav{
	width: 25%;
}

.footerNav li{
	margin-bottom: 0;
}

.footerNav a {
	padding: 15px 0;
	color: #fff;
	display: block;
	font-size: clamp(12px, 1.4vw, 14px);
}

.footerNav li:not(:first-child) a{
	border-top: 1px solid #1c609c;
}

.footerNav a i{
	margin-right: 10px;
}

.copyright{
	background: #003970;
	color: #8db1cc;
	padding: 2vw 0;
}

.copyright .box{
	display: flex;
	flex-flow: row nowrap;
	justify-content: space-between;
	align-items: center;
}

.copyright p{
	margin: 0;
	font-size: clamp(10px, 1.2vw, 12px);
}

.copyright a{
	color: #8db1cc;
}

.totop {
	position: absolute;
	right: 2%;
	top: -28px;
	z-index: 1500;
}

.totop a {
	width: 56px;
	height: 56px;
	display: block;
	position: relative;
	background: var(--color-lightblue);
	border-radius: 50%;
	box-shadow: 3px 3px 5px var(--color-granblue);
}

.totop a i {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	color: #fff;
	font-size: 20px;
}

@media screen and (max-width: 1366px) {}

@media screen and (max-width: 1280px) {}

@media screen and (max-width: 1024px) {}

@media screen and (max-width: 820px) {}

@media screen and (max-width: 640px) {
	#footer{
		padding-top: 2rem;
	}
	.footerMain {
		display: block;
		padding: 0;
	}

	.footerInfo,
	.footerNav {
		width: 100%;
	}

	.footerInfo{
		padding: 0 5vw;
	}

	#footer .address{
		display: block;
	}

	#footer .address dl{
		margin-bottom: 2rem;
	}

	#footer .footerLogo {
		margin-bottom: 5vw;
	}

	.footerNav a {
		padding: 15px;
	}

}








@media screen and (max-width: 1366px){
}
@media screen and (max-width: 1280px){
}
@media screen and (max-width: 1024px){
}
@media screen and (max-width: 820px){

}
@media screen and (max-width: 640px){
}