.toppage{
	background: #003588;
}

.main{
	width: 100%;
	margin: auto;
	height: auto;
	position: relative;
	z-index: 6!important;
	background: #003588;
	position: fixed;
}


.main .mainp{
	position: absolute;
}

.main .mainp.main-p01{
	right: 6%;
	top: 9%;
	width: 30%;
	z-index: 1;
}
.main .mainp.main-p02{
	left: 2%;
	top: 13%;
	width: 16%;
	z-index: 2;
}
.main .mainp.main-p03{
	left: 50%;
	top: 3%;
	width: 16%;
	z-index: 3;
}
.main .mainp.main-p04{
	left: 50%;
	bottom:18%;
	width: 25%;
	z-index: 4;
}
.main .mainp.main-p05{
	left: 34%;
	bottom:18%;
	width: 16%;
	z-index: 5;
}
.main .mainp.main-p06{
	left: 10%;
	bottom:9%;
	width: 24%;
	z-index: 6;
}
.main .mainp.main-p07{
	left: 15%;
	top:11%;
	width: 16%;
	z-index: 7;
}
.main .mainp.main-p08{
	left: 20%;
	top: 33%;
	width: 31%;
	z-index: 8;
}
.main .mainp.main-p09{
	right: 18%;
	top:43%;
	width: 17%;
	z-index: 9;
}
.main .mainp.main-p10{
	right: 28%;
	top:22%;
	width: 22%;
	z-index: 10;
}
.main .mainp.main-p11{
	right: 2%;
	top:43%;
	width: 17%;
	z-index: 11;
}
.main .mainp.main-p12{
	left: 5%;
	top:33%;
	width: 16%;
	z-index: 12;
}
.main .mainp.main-p13{
	left: 25%;
	top:8%;
	width: 25%;
	z-index: 13;
}
.main .mainp.main-p14{
	left: 2%;
	top:52%;
	width: 19%;
	z-index: 14;
}
.main .mainp.main-p15{
	right: 10%;
	bottom:17%;
	width: 16%;
	z-index: 15;
}
.main .back{
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	z-index: 50;
}


.catch{
	margin: 25% auto 0;
	width: 100%;
	height: auto;
	/*padding: 5% 0;*/
	padding-bottom: 5%;
	z-index: 60;
	overflow-y: visible;
	position: relative;
	background: linear-gradient(rgba(0,53,136,0),rgba(0,53,136,1));
}
.catch .img{
	width: 70%;
	max-width: 900px;
	margin-left: 8%;
	padding-top: 10%;
}
.catch .copy{
	width: 100%;
	z-index: 150;
	color: #fff;
	font-weight: 700;
	font-size: 2.5rem;
	font-size: clamp(15px, 2.5vw, 25px);
	line-height: 2.5em;
	margin: 10% 0 0 8%;
	padding-bottom: 5%;
}
.catch .copy p{
	padding-bottom: 3%;
}

.catch .nami{
	width: 40%;
	margin: 0 auto 5% 0;
    transform-origin: center bottom;
    animation: fuwafuwa 5s linear infinite;
}

.white-background{
	background: #fff;
	margin: 0 auto;
	z-index: 300;
	position: relative;
}


@keyframes fuwafuwa {
	
  0% , 100%{
      transform: translate(0, 0);
  }
  50%{
      transform: translate(-6px, -12px);
  }
}


@media print , screen and (min-width:1px) and (max-width: 960px) {

.main .mainp.main-p01{
	right: 18%;
	top: 55%;
	width: 38%;
	z-index: 1;
}
.main .mainp.main-p02{
	left: 17%;
	top: 5%;
	width: 20%;
	z-index: 2;
}
.main .mainp.main-p03{
	left: 5%;
	top: 22%;
	width: 18%;
	z-index: 3;
}
.main .mainp.main-p04{
	left: 7%;
	bottom: inherit;
	top:35%;
	width: 36%;
	z-index: 4;
}
.main .mainp.main-p05{
	left: inherit;
	right: 13%;
	bottom:inherit;
	top: 40%;
	width: 22%;
	z-index: 5;
}
.main .mainp.main-p06{
	left: 40%;
	bottom:inherit;
	top: 41%;
	width: 25%;
	z-index: 6;
}
.main .mainp.main-p07{
	left: 35%;
	top: 5%;
	width: 20%;
	z-index: 7;
}
.main .mainp.main-p08{
	left: 39%;
	top: 20%;
	width: 39%;
	z-index: 8;
}
.main .mainp.main-p09{
	right: 10%;
	top:inherit;
	bottom: 8%;
	width: 22%;
	z-index: 9;
}
.main .mainp.main-p10{
	right: inherit;
	left: 15%;
	top:58%;
	width: 30%;
	z-index: 10;
}
.main .mainp.main-p11{
	right: 5%;
	top:15%;
	width: 24%;
	z-index: 11;
}
.main .mainp.main-p12{
	left: 20%;
	top:22%;
	width: 20%;
	z-index: 12;
}
.main .mainp.main-p13{
	left: inherit;
	right: 20%;
	top:4%;
	width: 27%;
	z-index: 11;
}
.main .mainp.main-p14{
	left: 25%;
	top:inherit;
	bottom: 10%;
	width: 25%;
	z-index: 14;
}
.main .mainp.main-p15{
	right: 30%;
	bottom:6%;
	width: 20%;
	z-index: 15;
}
.catch{
	margin: 60% auto 0;
	width: 100%;
	height: auto;
	/*padding: 5% 0;*/
	padding-bottom: 5%;
	z-index: 60;
	overflow-y: visible;
	position: relative;
	background: linear-gradient(rgba(0,53,136,0),rgba(0,53,136,1));
}
}
@media print , screen and (min-width:1px) and (max-width: 768px) {

.catch{
	margin: 80% auto 0;
	}
.main{
	top: 60px;
}
.main .back{
	top: 60px;
}
.catch .img{
	margin-left: 3%;
}
.catch .copy{
	margin: 10% 0 0 3%;
}
}
@media print , screen and (min-width:1px) and (max-width: 480px) {

	
}

.about{
	position: relative;
	margin: 0 auto 5% 0;
}
.about .en{
	width: 60%;
	margin: 0 auto 20px 1%;
}
.about .backimg{
	width: 100%;
	margin: 0 auto;
	position: relative;
}
.about .backimg .photo{
	width: 95%;
	margin: 0 auto 0 0;
}
.about .backimg .txt{
	position: absolute;
	display: block;
	left: 10%;
	top: 0;
	width: 45%;
	background: #fff;
	padding: 6% 3%;
}
.about .backimg .nami{
	position: absolute;
	display: block;
	right: -10%;
	bottom: -5%;
	width: 40%;
    transform-origin: center bottom;
    animation: fuwafuwa 5s linear infinite;
}
.about .backimg .txt .title{
	width: 80%;
	max-width: 500px;
}
.about .backimg .txt p{
	margin: 10% 0;
	font-weight: 700;
}
.about .backimg .txt .btn{
	width: 70%;
	max-width: 280px;
}

@media print , screen and (min-width:1px) and (max-width: 768px) {

.about .backimg .txt{
	position: relative;
	display: block;
	left: inherit;
	top: inherit;
	width: 100%;
	background: #fff;
	padding: 3% 5%;
	max-width: 400px;
	z-index: 2;
}
.about .backimg .photo{
	width: 95%;
	margin: -150px auto 0 0;
	z-index: 1;
}
}
@media print , screen and (min-width:1px) and (max-width: 530px) {

.about .backimg .photo{
	width: 95%;
	margin: -100px auto 0 0;
	z-index: 1;
}
}

.people{
	width: 95%;
	position: relative;
	margin: 8% 0 8% auto;
	background: #003588;
	border-radius: 50px 0 0 50px;
	padding: 0 3% 5%;
}

.people .en{
	width: 50%;
	margin: 0 0 20px auto;
}
.people .txt{
	margin: -5% auto 3% 0;
}
.people .txt .title{
	margin-bottom: 5%;
	width: 50%;	
}
.people .txt p{
	color: #fff;
	font-weight: 700;
}
.people .peoplelist{
	margin: auto;
	transform: rotate(-5deg);
	
}
.people .slick-slide {
  margin: 0px -15px;
	padding: 20px 30px;
	position: relative;
	/*transform-origin: bottom center;
  transition: transform .3s !important;*/
	overflow: hidden;
}
.people .slider-voice{
	/*transform: rotate(-5deg);*/
}
.people .slider-voice .slick-img{
	transform: rotate(5deg);
}
.people .txt{
	margin: -5% auto 3% 0;
}
.people .btn{
	width: 60%;
	margin: 10px 0 0 auto;
	max-width: 300px;
}
.people .nami{
	position: absolute;
	left: 10%;
	bottom: -10%;
	width: 45%;
	margin: 0 auto 5% 0;
    transform-origin: center bottom;
    animation: fuwafuwa 5s linear infinite;
}

/* ここから矢印カスタマイズ */
.people .slick-arrow {
	transition: all  0.5s;
	position: absolute;
	top: inherit;
	top: 40%;
	z-index: 10;
}
.people .slick-arrow:hover{
	cursor: pointer;
	opacity: 0.7;
}
.people .prev-arrow {
	right: 100%;
}
.people .next-arrow {
	left: 100%;
}
.people .slick-arrow {
		width: 40px;
		height: 40px;
	}
@media screen and (max-width: 768px){
.people .slick-arrow {
		width: 40px;
		height: 40px;
	}
.people .slick-arrow:hover{
		cursor: pointer;
		opacity: 0.7;
	}
.people .prev-arrow {
	right: 96%;
}
.people .next-arrow {
	left: 96%;
}
.people .nami{
	position: absolute;
	left: -5%;
	bottom: -2%;
	width: 50%;
	margin: 0 auto 5% 0;
    transform-origin: center bottom;
    animation: fuwafuwa 5s linear infinite;
}
	
.people .txt .title{
	margin-bottom: 5%;
	width: 75%;	
}
}
@media screen and (max-width: 530px){
.people .slick-arrow {
		width: 20px;
		height: 20px;
	}
.people .prev-arrow {
	right: 98%;
}
.people .next-arrow {
	left: 98%;
}
}



.environment{
	margin: 5% auto;
}
.environment .en{
	width: 96%;
	margin: 0 auto;
}
.environment .environment-flex{
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	align-items: center;
	margin: 0 auto 5%;
	max-width: 1080px;
}
.environment .environment-flex .txt{
	width: 50%;
	padding: 30px;
	background: #fff;
}
.environment .environment-flex .txt .title{
	max-width: 450px;
}
.environment .environment-flex .txt ul{
	border-top: 2px dashed #0c2f55;
	margin: 12% 0 8%;
	max-width: 380px;
}
.environment .environment-flex .txt ul li{
	border-bottom: 2px dashed #0c2f55;
}
.environment .environment-flex .txt ul li a{
	background: url("../img/top/arrow_e.svg") center right 10px no-repeat;
	background-size: 12px 13px;
	display: block;
	color: #0c2f55;
	text-decoration: none;
	font-weight: 700;
	padding: 15px;
}
.environment .environment-flex .txt .btn{
	width: 80%;
	margin: 10% 0 5%;
	max-width: 300px;
}
.environment .environment-flex .photo{
	width: 50%;
	position: relative;
}
.environment .environment-flex .photo .nami{
	position: absolute;
	right: -10%;
	bottom: -12%;
	width: 70%;
}
@media screen and (max-width: 768px){

.environment .environment-flex{
	margin: 3% auto 5%;
}	
.environment .environment-flex .txt{
	width: 70%;
	padding: 30px;
	margin: 0 auto 0 0;
}
	.environment .environment-flex .txt .title{
		max-width: 400px;
		width: 80%;
	}
.environment .environment-flex .photo{
	width: 90%;
	margin: -10% 0 0 auto;
	z-index: -1;
}
	
}
@media screen and (max-width: 530px){
	
.environment .environment-flex .txt{
	width: 80%;
	padding: 30px;
}
	
}

.faq{
	margin: 5% auto;
	position: relative;
}
.faq .nami{
	position: absolute;
	left: -5%;
	bottom: -5%;
	width: 35%;
    transform-origin: center bottom;
    animation: fuwafuwa 5s linear infinite;
}
.faq .en{
	text-align: center;
	margin: auto;
	max-width: 450px;
	width: 40%;
	z-index: 1;
}
.faq .faxbox{
	margin: -10% auto 5%;
	text-align: center;
	width: 90%;
	max-width: 870px;
	background: #d6dfec;
	border-radius: 30px;
	padding: 6% 30px 5%;
}
.faq .faxbox .title{
	width: 70%;
	max-width: 600px;
	text-align: center;
	margin: 5% auto;
}
.faq .faxbox .btn{
	width: 80%;
	max-width: 300px;
	margin: auto;
}


@media screen and (max-width: 768px){
.faq .nami{
	position: absolute;
	left: -10%;
	bottom: inherit;
	top: -10%;
	width: 35%;
    transform-origin: center bottom;
    animation: fuwafuwa 5s linear infinite;
}
.faq .faxbox .title{
	width: 80%;
	max-width: 600px;
	text-align: center;
	margin: 6% auto;
}
}

.entry{
	margin: 0 auto;
	position: relative;
}
.entry .en{
	position: relative;
	text-align: center;
	margin: auto;
	max-width: 1200px;
	width: 90%;
	z-index: 1;
}
.entry .photo{
	margin: -5% auto 0;
	text-align: center;
}
.entry .entry_btn{
	position: absolute;
	left: 0;
	right: 0;
	width: 70%;
	max-width: 500px;
	top: 50%;
	text-align: center;
	margin: auto;
}


.inline{
	max-width: 1000px;
	width: 90%;
	padding: 0 20px 40px;
	margin: auto;
	background: #fff;
	position: relative;
}
.inline .photo{
	width: 50%;
	padding: 0 10px 0 0;
}
.inline .txt{
	width: 50%;
	padding: 0 0 0 10px;
}

.inline h2{
	color: #003588;
	font-weight: 700;
	display: inline-block;
	padding: 20px 20px;
	margin-bottom: 10px;
	font-size: clamp(18px, 3vw, 30px);
	line-height: 1.8em;
	border-top: 10px solid #e50314;
}
.inline .txt h3{
	color: #003588;
	font-weight: 700;
	padding: 10px;
	margin-bottom: 10px;
	font-size: clamp(16px, 2.4vw, 24px);
}
.inline .txt p{
	line-height: 1.8em;
	font-size: clamp(13px, 1.6vw, 16px);
}
.inline .popup-modal-dismiss{
	position: absolute;
	right: 0px;
	top:10px;
	width: 60px;
}

.inline .people-btn{
	width: 80%;
	max-width: 250px;
	margin:20px auto;
}

@media print , screen and (max-width: 768px) {
	
.inline{
	padding: 0 10px 30px;
}
.inline .photo{
	width: 80%;
	padding: 10px;
	margin: auto;
	order: 2;
}
.inline .txt{
	width: 100%;
	padding: 0 10px 10px;
	order: 1;
}
}

@media print , screen and (max-width: 560px) {
.inline .photo{
	width: 80%;
	padding: 10px;
	margin: auto;
	order: 2;
}
.inline .txt{
	width: 100%;
	padding: 0 10px 10px;
	order: 1;
}
}