@charset "utf-8";
/*------------------------------------------------------------
	Reset
------------------------------------------------------------*/
*{
	box-sizing: border-box
}
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td,figure {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 1em;
	box-sizing: border-box;
	font-family: sans-serif;
}
html {
	font-size: 62.5%;
}
body{
	color: #333;
	background: #FFF
}
figure{
	margin: 0;
	padding: 0;
}
ol, ul {
	list-style: none;
}
img {
	vertical-align: top;
	max-width: 100%;
    height: auto;
}
a[href*="tel:"] {
	pointer-events: none;
	cursor: default;
	text-decoration: none;
}
input[type=text],
input[type=email],
input[type=tel],
textarea{
	border: 1px solid #ccc;
	padding: 12px;
	border-radius: 4px;
	width: 100%;
	outline: none;
	font-size: 1.6rem;
}
/*------------------------------------------------------------
	Stracture
------------------------------------------------------------*/

.inner{
	width:1100px;
	padding: 30px 0;
	margin: 0 auto;

}
.inner2 {
	width:1100px;
	padding: 3rem 6rem;
	margin: 0 auto;
	background: #FFF;
	border-radius: 10px;
	box-shadow: 3px 3px 0 #eee;
}
.inner3{
	width:1100px;

	box-shadow: 3px 3px 0 #eee;
	padding: 3rem 6rem;
	margin: 0 auto;
	background: #FFF;
	border-radius: 10px;
	overflow: hidden
}
.swiper {
  width: 1100px;
  height: auto;
}
.swiper p {
  font-size: 12px;
	padding-top: 5px;
	text-align: center
}
.swiper-slide{
	padding-bottom: 40px;	
}
/*------------------------------------------------------------
	Common
------------------------------------------------------------*/
.sp{ display: none; }
.pc{ display: block; }
.mb50{ margin-bottom: 50px; }
.mb40{ margin-bottom: 40px; }
.mb30{ margin-bottom: 30px; }
.mb20{ margin-bottom: 20px; }
.mb10{ margin-bottom: 10px; }
.mb5{ margin-bottom: 5px; }
.error{ color: red; }

.bdr{
	display: block;
	width: 200px;
	height: 3px;
	background: #252B38;
	margin: 10px auto 0 auto
}
.h1{
	font-size: 3rem;
	text-align: center;
	padding: 20px;
	margin-bottom: 30px
}

.h1 span{
	font-size: 4.3rem;
}
.ta1{
	width: 100%;
	margin-bottom: 40px;
}
.ta1 td,.ta1 th{
	font-size: 1.6rem;
	padding: 10px;
	border-bottom: 1px solid #ccc;
}
.ta1 th{
	background: #eeee;
	width: 25%;
	font-size: 17px;
}
.ta1 td{
	background: #FFF;
	font-size: 17px;
}

/*------------------------------------------------------------
	Header
------------------------------------------------------------*/
header{
	position: absolute;
	width: 100%;
	height: 80px;
	z-index:50;
	top:0;
	left: 0;
}
#page header{
	background: #2C4198;

}
#home #logo{
	display:none;

}
#page #logo{
	display: block;
	width: 250px;
	height: auto;
	position: absolute;
	left: 10px;
	top:7px;
}
.menu{
	display: none;
}
header ul{
	display: flex;
	position: absolute;
	right: 240px;
	top: 32px;
}
header ul li{

}
header ul a{
	color: #FFF;
	display: block;
	text-decoration: none;
	font-size: 20px;
	padding: 0 15px;
	text-align: center;
	letter-spacing: 2px;
	font-family:Arial, Helvetica, "sans-serif";
}
#hdr_entry{
	display: flex;
	justify-content: center;
	align-items: center;
	position: absolute;
	background:	#FF80A7;; 
	color: #FFF;
	font-size: 17px;
	letter-spacing: 1px;
	font-family:Arial, Helvetica, "sans-serif";
	line-height: 1;
	border-radius: 5px;
	text-decoration: none;
	width: 180px;
	height: 40px;
	right: 20px;
	top:23px;
	z-index:60;
}
#hdr_entry:hover,.btn1:hover {
	filter: brightness(1.1);
	box-shadow: 0 0 10px rgba(197, 42, 105, 0.6), 0 0 20px rgba(197, 42, 105, 0.4);
	transition: all 0.3s ease;
}
main{
	margin-top: 80px;
	padding-bottom: 100px;
}
nav{
	display:none
}
.fadeBlock {
  opacity: 0;
  transform: translateY(30px);
  transition: all 0.6s ease-out;
}

.fadeBlock.animate-slide {
  opacity: 1;
  transform: translateY(0);
}
.fade-target {
  opacity: 0;
  transform: translateY(40px);
  transition: all 0.6s ease-out;
}

.fade-target.fade-in {
  opacity: 1;
  transform: translateY(0);
}
/*------------------------------------------------------------
	MV
------------------------------------------------------------*/
.mv{
    height: 57vw;
    position: relative;
	overflow: hidden
}
.mv div {
	opacity:0;
	position: absolute;
	transition: all 0.5s ease-out;
}
.mv img {
	width: 100%;
	height: auto;
}
.mv_banner {
	z-index: 7;
	width: 44%;
	transform: translateY(20px);
	bottom: 2%;
	left: 41%;
}
.mv_logo {
	z-index: 7;
	width: 25%;
	transform: translateY(20px);
	top: 1%;
	left: 2%;
}
.mv_person {
	z-index: 6;
	width: 36%;
	transform: scale(0.85);
	bottom: 0;
	left: 16%;
}

.mv_text {
	z-index: 5;
	width: 36%;
	transform: translateY(90px);
	top: 36%;
	left: 50%;
}

.mv_bg_blue {
	z-index: 4;
	width: 100%;
	transform: translateX(-730px);
	top: 23%;
	left: 0;
}
.mv_bg_text {
	z-index: 3;
	width: 90%;
	transform: translateX(1730px);
	top: 25%;
	left: 0;
}
	
.mv_bg_pink {
	z-index: 2;
	width: 100%;
	transform: translateX(730px);
	top: 58%;
	left: 0;
}

.mv_bg_dot {
	z-index: 1;
	width: 100%;
	transform: translateY(30px);
	bottom: 0;
	left: 0;
}

.mv_bg {
	z-index: 0;
	width: 100%;
    height: 57vw;
	overflow: hidden;
	top: 0;
	left: 0;
}
	
/* 各アニメーション後の状態（表示される） */
.animate-fadein {
	opacity: 1;
}

.animate-slide-up {
	opacity: 1;
	transform: translateY(0);
}

.animate-slide-right {
	opacity: 1;
	transform: translateX(0);
}

.animate-slide-left {
	opacity: 1;
	transform: translateX(0);
}

.animate-text {
	opacity: 1;
	transform: translateY(0);
}

.animate-scale {
	opacity: 1;
	transform: scale(1);
}

.animate-banner {
	opacity: 1;
	transform: translateY(0);
}
.animate-fadein,
.animate-slide-up,
.animate-slide-left,
.animate-slide-right,
.animate-text,
.animate-scale,
.animate-banner {
	opacity: 1 !important;
}
	


#intro{
	background: #2C4198;
	padding: 30px 0 30px 0;
}
#intro h2{
	color: #fff;
	font-size: 30px;
	text-align: center;
	margin-bottom: 40px;
}
.bdr{
	width: 300px;
	height: 4px;
	margin: 0 auto;
	display: block;
	background: #FF80A7;
	margin-top: 15px;
}
#intro p{
	font-size: 18px;
	line-height: 200%;
	color: #FFF;
	margin-bottom: 40px;
}



/*------------------------------------------------------------
	Movie
------------------------------------------------------------*/
#movie{
	background: #002253;
	padding: 20px;
}
.youtube {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
}
.youtube iframe {
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
}
.swiper {
  width: 1100px;
  height: auto;
}
.swiper p {
  font-size: 12px;
	padding-top: 5px;
	text-align: center
}
.swiper-slide{
	padding-bottom: 0px;	
}

/*------------------------------------------------------------
	Home
------------------------------------------------------------*/
#service{
	background: #FFF;
	padding: 30px 0 60px 0;
}
.h2{
	font-size: 36px;
	text-align: center;
	border-top: 2px solid #2C3F98;
	border-bottom: 2px solid #2C3F98;
	color: #2C3F98;
	border-radius: 4px;
	padding: 10px;
	margin-bottom: 20px
}

#strength_list li .inr{
	width: 1100px;
	margin: 0 auto;
	display: flex;
	padding: 50px 0;
	justify-content: space-between
}
#strength_list li .item1{
	width: 45%;

	padding-top: 0px;
}
#strength_list li:nth-child(2) .item1{
	order: 2
}
#strength_list li:nth-child(2) .item3{
	order: 1
}
#strength_list li h3{
	font-size: 26px;
	margin-bottom: 15px;
}
#strength_list li h3 span{
	font-size: 36px;
}
#strength_list li h4{
	font-size: 21px;
	width: 220px;
	height: 50px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #FFF;
	text-align: center;
	border-radius: 100px;
	line-height: 1;
	background: #2C4198;
	margin-bottom:0px;
}
.sankaku3{
	height: 20px;
	width: 27px;
	clip-path: polygon(0 0, 100% 0, 0% 100%);
	background: #2C4198;
	margin: -2px 0 5px 98px
}
#strength_list li h5{
	font-size: 18px;
	margin-bottom: 60px;
	font-weight: normal
}
#strength_list li p{
	font-size: 18px;
	line-height: 180%;
}
#strength_list .inner{

}
#strength_list li:nth-child(2){
	background: #EFF1FA
}
#strength_list li .item2{
	width: 50%;
	position: relative
}
#strength_list .item2 img{
	border-radius: 20px;
}
#cv{
	background: url("../img/bg.jpg");
	background-size: cover;
	text-align: center;
	color: #FFF;
	padding: 80px 0;
	position: relative
}
#cv h2{
	color: #FFF;
	font-size: 38px;
	margin-bottom: 15px;
}
#cv p{
	color: #FFF;
	font-size: 18px;
	margin-bottom: 30px;
	line-height: 200%;
}
#cv_img{
	position: absolute;
	left: calc(50% + 220px);
	bottom: 0;
	width: 300px;
}
.btn1{
	background: #FF80A7;
	color: #FFF;
	border-radius: 100px;
	text-align: center;
	width: 280px;
	height: 55px;
	font-size: 18px;
	font-weight: bold;
	text-decoration: none;
	display: flex;
	justify-content: center;
	align-items: center;
	margin: 0 auto;
	line-height: 1;
	border: none;
}
footer{
	border-top: 5px solid #FF80A7;
	padding: 20px 30px 50px 30px;
	display: flex;
	background: #2C4198;
}
footer .item1{
	width: 100%;
	color: #FFF;
	font-size: 15px;

}
footer .item2{
	width: 100%;
	text-align: right;
	color: #FFF;
	font-size: 15px;
}
footer .item1 a{
	display: block;
	width: 300px;
	margin-bottom: 20px;
}
footer .item1 p{
	letter-spacing: 1px;
	line-height: 180%;
}

.txt1{
	text-align: center;
	font-size: 17px;
	line-height: 200%;
	margin-bottom: 50px;
}

.kiji{
	padding-bottom: 50px;
}
.kiji li{
	display: flex;
	justify-content: space-between;
	margin-bottom: 35px;
}
.kiji li:nth-child(2) figure{
	order: 2;
}
.kiji li:nth-child(2) .inr{
	order: 1;
}
.kiji li figure{
	width: 37%;
}
.kiji li figure img{
	width: 100%;
	height: auto
}
.kiji li .inr{
	width: 60%;

}
.kiji li h3{
	font-size: 20px;
	padding: 10px 16px;

	margin-bottom: 15px;
	background: #EFF1FA
}
.kiji li p{
	font-size: 18px;
	line-height: 180%;
}
.h3{
	text-align: center;
	font-size: 23px;
	padding: 15px;
	border: 2px solid #2C4198;
	border-radius: 6px;
	margin-bottom: 20px;
	color:  #2C4198;
}
.imgbox{
	margin-bottom: 40px;
	text-align: center;
	background: #5887A1
}

.txt2{
	font-size: 17px;
	line-height: 200%;
	padding: 30px;
	text-align: center;
	background: #EFF1FA;
	border-radius: 10px;
}
.faq_list{
	margin-bottom: 60px;	
}
.faq_list .item{
	padding-bottom: 25px;
	margin-bottom: 25px;
	border-bottom: 2px dashed #ccc;
	font-size: 1.6rem;
}
.faq_list .item:last-child{
	border: none;
}
.faq_list h2{
	font-size: 2.3rem;
	margin-bottom: 15px;
}
.qbox,.abox{
	padding-left: 46px;
	position: relative;
}
.qbox{
	padding-top: 3px;
}
.abox{
	padding-top: 6px;
}
.q,.a{
	font-size: 20px;
	font-family: Arial, Helvetica, "sans-serif";
	color: #FFF;
	border-radius: 100px;
	background: #252B38;
	display: inline-block;
	font-weight: bold;
	padding: 8px 0 0 0;
	width: 3.5rem;
	height: 3.5rem;
	text-align: center;
	line-height: 1;
	position: absolute;
	top:0px;
	left: 0px;
}
.q{
	background: #252B38;
}
.a{
	background: #86A4D4;
}
#privacy{
	font-size: 1.4rem;
	height: 300px;
	overflow-y: auto;
	width: 100%;
	padding: 15px;
	border: 1px solid #ccc;
	margin-bottom: 30px
}
#privacy p{
	padding-bottom: 15px;
}
@media screen and (max-width: 768px) {

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

/*------------------------------------------------------------
	Stracture
------------------------------------------------------------*/
.inner{
	width: 90%;
	padding:1rem;
	margin: 0 auto;
}

.swiper {
	width: 90%;
 	 height: auto;
}
.swiper a p{
	display: block;
	text-decoration: none !important;
}
.swiper-slide img{
  border-radius: 12px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}
/*------------------------------------------------------------
	Header
------------------------------------------------------------*/

#mv img{
	width: 100%;
	height: auto
}


header ul{
	display: none
}
#hdr_entry{
	display: none
}
.menu{
	display: block;
	position: fixed;
	width: 70px;
	height: 70px;
	z-index: 100;
	top:6px;
	right: 5px;
	background-image: url("../img/menu.png?2");
	background-size: 70% auto;
	background-position: center center;
	background-repeat: no-repeat;
}
	nav{
		display: none;
		width: 100%;
		height: 100vh;
		position: fixed;
		top:0;
		left: 0;
		z-index: 1000;
		background-color:rgba(0,6,56,0.96);
	}
	nav ul{

	}
	nav ul li{
		border-bottom: 1px solid rgba(255,255,255,0.10);
	}
	nav ul a{
		display: block;
		color: #FFF;
		text-align: center;
		font-size: 20px;
		padding: 20px;
		text-decoration: none;
	}
	.close{
		width: 70px;
		height: 70px;
		display: block;
		margin-left: auto;
		background-image: url("../img/close.png");
		background-repeat: no-repeat;
		background-size: 30% auto;
		background-position: center center;
	}
/*------------------------------------------------------------
	Footer
------------------------------------------------------------*/

#privacy{
	font-size: 1.4rem;
	height: 300px;
	overflow-y: auto;
	width: 100%;
	padding: 15px;
	border: 1px solid #ccc;
	margin-bottom: 30px
}
#privacy p{
	padding-bottom: 15px;
}

/*------------------------------------------------------------
	MV
------------------------------------------------------------*/
#mv{
	z-index: 0;
	width: 100%;
	text-align: center;
}
#mv img{
	width:100%;
	height: auto
}


#intro{

	padding: 30px 0 30px 0;
}
#intro h2{
	font-size: 20px;

	margin-bottom: 20px;
}
.bdr{
	width: 300px;
	height: 4px;
	margin: 0 auto;
	display: block;

	margin-top: 15px;
}
#intro p{
	font-size: 18px;
	line-height: 200%;
	color: #FFF;
	margin-bottom: 40px;
}


/*------------------------------------------------------------
	HOME
------------------------------------------------------------*/
#service{
	padding: 30px 0 40px 0;
}
.h2{
	font-size: 23px;
	color: #2C3F98;
	border-radius: 4px;
	padding: 10px;
	margin-bottom: 20px
}

#strength_list{

}

#strength_list li .inr{
	width: 98%;
	margin: 0 auto;
	display: block;
	padding: 50px 25px;
	justify-content: space-between
}
#strength_list li .item1{
	width: 100%;

	padding-top: 0px;
}
#strength_list li h3{
	font-size: 27px;
	margin-bottom: 9px;
	line-height: 130%;
	padding-top: 8px;
}
#strength_list li h3 span{
	font-size: 33px;
}
#strength_list li h4{
	font-size: 21px;
	width: 220px;
	height: 50px;
	text-align: center;
}
#strength_list li h5{
	font-size: 16px;
	margin-bottom: 30px;
	text-align: center
}
#strength_list li p{
	font-size: 18px;
	line-height: 180%;
}

#strength_list li .item2{
	width: 100%;
	position: relative;
	padding-top: 15px;
}
#strength_list .item2 img{
	border-radius: 20px;
}
#cv{
	padding: 6% 0 6% 0;
	height: auto;
}
#cv h2{
	font-size: 27px;
	margin-bottom: 2%;
	text-align: left;
	padding-left: 4%;
}
#cv p{
	text-align: left;
	font-size: 15px;
	margin-bottom: 20px;
	line-height: 170%;
	padding-left: 4%;
}
#cv_img{

	left: auto;
	right: 2%;
	bottom: 0;
	width: 42%;
}
.btn1{
	border-radius: 100px;
	width: 180px;
	height: 40px;
	font-size: 17px;
	margin: 0 0 0 4%;
}
footer{
	border-top: 5px solid #C52A69;
	padding: 20px 30px 50px 30px;
	display: block;
	background: #2C4198;
}
footer .item1{
	width: 100%;
	color: #FFF;
	font-size: 15px;

}
footer .item2{
	width: 100%;
	text-align: center;
	color: #FFF;
	font-size: 14px;
	padding-top: 30px;
}
footer .item1 a{
	display: block;
	width: 300px;
	margin-bottom: 20px;
}
footer .item1 p{
	letter-spacing: 1px;
	line-height: 180%;
	font-size: 13px;
	text-align: center
}
.ta1{
	width: 100%;
	margin-bottom: 40px;
}
.ta1 td,.ta1 th{
	display: block;
	width: 100%;

	padding: 10px;
	border-bottom: 1px solid #ccc;
}
.ta1 th{
	background: #eeee;
	padding:6px;
	font-size: 16px;
}
.ta1 td{
	background: #FFF;
	font-size: 17px;
}

.h3{
	text-align: center;
	font-size: 18px;
	padding: 9px;
	border: 2px solid #2C4198;
	border-radius: 6px;
	margin-bottom: 20px;
	color:  #2C4198;
}
.kiji{
	padding-bottom: 50px;
}
.kiji li{
	display: block;

	margin-bottom: 35px;

}
.kiji li:nth-child(2) figure{
	order: 1;
}
.kiji li:nth-child(2) .inr{
	order: 2;
}
.kiji li figure{
	width: 100%;
}
.kiji li figure img{
	width: 100%;
	height: auto
}
.kiji li .inr{
	width: 100%;

}
.kiji li h3{
	font-size: 20px;
	padding: 10px 16px;

	margin-bottom: 15px;
	background: #EFF1FA
}
.kiji li p{
	font-size: 18px;
	line-height: 180%;
}

/*------------------------------------------------------------
	MV
------------------------------------------------------------*/
.mv{
    height: 45vh;
	background:#2C4198;
}

.mv_banner {
	z-index: 7;
	width: 90%;
	transform: translateY(20px);
	bottom: 1%;
	left: 5%;
}
.mv_logo {

	width: 45%;
	transform: translateY(20px);
	top: -2%;
	left: 2%;
}
.mv_person {
	z-index: 6;
	width: 46%;
	transform: scale(0.85);
	bottom: 10%;
	left: 0%;
}


.mv_bg_blue,.mv_text,
	.mv_bg_text,
	.mv_bg_pink{
	display: none
}
.mv_bg {
	z-index: 0;
	width: 230%;
	height: 45vh;
	top: 0;
	left: 0;
}
.mv_bg img{
	width: auto;
	height: 120vh
	
}	
	
/* 各アニメーション後の状態（表示される） */
.animate-fadein {
	opacity: 1;
}

.animate-slide-up {
	opacity: 1;
	transform: translateY(0);
}

.animate-slide-right {
	opacity: 1;
	transform: translateX(0);
}

.animate-slide-left {
	opacity: 1;
	transform: translateX(0);
}

.animate-text {
	opacity: 1;
	transform: translateY(0);
}

.animate-scale {
	opacity: 1;
	transform: scale(1);
}

.animate-banner {
	opacity: 1;
	transform: translateY(0);
}
.animate-fadein,
.animate-slide-up,
.animate-slide-left,
.animate-slide-right,
.animate-text,
.animate-scale,
.animate-banner {
	opacity: 1 !important;
}
	
}

@media screen and (max-width: 400px) {
.mv{
    height: 90vw;
    position: relative;
	overflow: hidden
}

}