/* --------------------------------------------------------------------------
   main / common
-------------------------------------------------------------------------- */

.main { position: relative; width: 100%; background: #05172b; }
.main .movie { position: relative; width: 100%; height: 0; padding: 0 0 56.25%; }
.main .movie video {
	position: absolute; top: 0; left: 50%; width: 100%; height: 100%;
	transform: translateX(-50%); opacity: .7;
}
.main .dots {
	position: absolute; top: 0; left: 0; width: 100%; height: 100%;
	background: center/2px 2px repeat url(../img/dots.png);
}
.main h2 {
	position: absolute; top: 50%; left: 50%; width: 90%; font: 700 4.0rem/2.0 'Zen Old Mincho';
	color: #fff; text-align: center; transform: translate(-50%,-50%);
}
section { position: relative; width: 100%; }
article { position: relative; width: 1200px; margin: 0 auto; }
a.btn, a.out {
	position: relative; display: block; width: 200px; margin: 0 auto; padding: 0 30px;
	background: #fff; border: solid 1px #1f4873; border-radius: 999px;
	font-size: 1.8rem; line-height: 3.0; text-align: left;
}
a.btn::after {
	content: ''; position: absolute; top: 50%; right: 15px; width: 28px; height: 28px;
	background: 80% 0/600% auto no-repeat url(../img/ico.svg); transform: translateY(-50%);
}
a.out::after {
	content: ''; position: absolute; top: 50%; right: 15px; width: 28px; height: 28px;
	background: 100% 0/600% auto no-repeat url(../img/ico.svg); transform: translateY(-50%);
}
a.btn:hover,a.out:hover { background: #e8ebf0; }
a.btn:hover::after { background-position: 80% 100%; }
a.out:hover::after { background-position: 100% 100%; }

@media screen and (min-width:769px) {
	header,footer,.main,section { min-width: 1200px; }
}
@media screen and (max-width:768px) {
	.main { min-width: 100%; }
	.main .movie { padding: 0 0 100vw; overflow: hidden; }
	.main .movie video { width: auto; height: 100%; } 
	.main h2 { font-size: 2.0rem; }
	article { width: 90%; }
	a.btn, a.out { width: 60%; padding: 0 8vw; }
}

/* --------------------------------------------------------------------------
   about
-------------------------------------------------------------------------- */

.about { padding: 72px 0 0; text-align: center; }
.about article { background: center/contain no-repeat url(../img/index_base1.png); }
.about h2 { font-size: 6.5rem; font-weight: 700; }
.about h2::after {
	content: ''; display: block; width: 60px; height: 16px; margin: 20px auto 30px;
	background: #f7cf7c; transform: skew(0,-5deg);
}
.about h3 { margin: 0 0 48px; font: 700 2.8rem/1.6 'Zen Old Mincho'; }
.about h3 span { background: linear-gradient(#fff 85%,#f7cf7c 85%); font-size: 120%; }
.about p { line-height: 2.0; }
.about .btn { margin: 48px auto 60px; }
.about .photo { display: flex; justify-content: space-between; }
.about .photo i {
	display: block; height: 366px; text-indent: 200%; white-space: nowrap; overflow: hidden;
}
.about .photo i:first-child {
	width: 62%; background: center/cover no-repeat url(../img/index_about1.jpg);
}
.about .photo i:last-child {
	width: 36%; margin: 50px 0 0;
	background: center/cover no-repeat url(../img/index_about2.jpg);
}

@media screen and (max-width:768px) {
	.about { padding: 36px 0 24px; }
	.about article { background: center/cover no-repeat url(../img/index_base1_s.png); }
	.about h2 { font-size: 4.4rem; }
	.about h2::after { height: 12px; margin: 10px auto 20px; }
	.about h3 { margin: 0 0 24px; font-size: 2.0rem; }
	.about p { text-align: left; }
	.about .btn { margin: 24px auto 30px; }
	.about .photo i { height: 30vw; }
	.about .photo i:last-child { margin: 24px 0 0; }
}

/* --------------------------------------------------------------------------
   feature
-------------------------------------------------------------------------- */

.feature { padding: 100px 0; }
.feature article {
	width: 1000px; margin: 0 auto; padding: 36px; border: solid 1px #1f4873;
	box-shadow: 10px 10px 0 #f8cf7d; 
}
.feature h2 { width: 1000px; margin: 0 auto 40px; font-size: 5.6rem; font-weight: 700; }
.feature h2 span { display: block; font-size: 2.0rem; font-weight: 400; }
.feature h2 span::before {
	content: ''; display: inline-block; width: 26px; height: 26px; margin-right: 10px;
	background: #f7cf7c; transform: skew(0,-10deg); vertical-align: text-top;
}
.feature h3 { margin: 0 0 24px; font: 2.8rem/1.6 'Zen Old Mincho'; }
.feature .chapter { display: flex; }
.feature .chapter .photo { display: block; width: 430px; }
.feature .chapter .text { width: 496px; padding: 0 0 0 48px; }
.feature .chapter .text p:first-of-type { margin: 0 0 1.0em; }
.feature .btn { margin: 24px 0 0 auto; }

@media screen and (max-width:768px) {
	.feature { padding: 48px 0; }
	.feature article { width: 90%; padding: 24px 4vw; box-shadow: 5px 5px 0 #f7cf7d; }
	.feature h2 { width: 90%; font-size: 4.4rem; }
	.feature h2 span { font-size: 1.8rem; }
	.feature h2 span::before { width: 2.0rem; height: 2.0rem; }
	.feature h3 { margin: 0 0 16px; font-size: 2.4rem; }
	.feature .chapter { display: block; }
	.feature .chapter .photo { width: 100%; }
	.feature .chapter .text { width: 100%; padding: 16px 0 0; }
	.feature .btn { margin: 16px auto 0; }
}

/* --------------------------------------------------------------------------
   business
-------------------------------------------------------------------------- */

.business {
	background:
		top left/150px auto no-repeat url(../img/index_base2a.svg),
		top left/50% auto no-repeat linear-gradient(#1f4873 2px,#e8ebf0 2px),
		top right/50% auto no-repeat linear-gradient(#fff 10%,#1f4873 10%);
}
.business article {
	position: relative; padding: 120px 0;
	background:
		bottom right/100px auto no-repeat url(../img/index_base2b.svg),
		top right/100% auto no-repeat linear-gradient(to right,transparent 10%,#e8ebf0 10%);
	border: solid 2px #1f4873; border-width: 2px 2px 0 0;
}
.business article::before {
	content: ''; position: absolute; top: -2px; right: -2px; width: 100px; height: 100px;
	background: linear-gradient(45deg,#e8ebf0 49.5%,#1f4873 49.5%,#1f4873 51%,#fff 51%);
}
.business .part { display: flex; align-items: center; padding: 0 50px; }
.business .part:first-of-type { flex-direction: row-reverse; margin: 0 auto 120px; }
.business .photo { width: 650px; }
.business .text { width: 450px; padding: 0 50px; }
.business h2 { font-size: 5.6rem; font-weight: 700; }
.business h2 span { display: block; font-size: 2.0rem; font-weight: 400; }
.business h2 span::before {
	content: ''; display: inline-block; width: 26px; height: 26px; margin-right: 10px;
	background: #f7cf7c; transform: skew(0,-10deg); vertical-align: text-top;
}
.business h3 { margin: 24px 0 12px; font: 2.8rem/1.6 'Zen Old Mincho'; }
.business .btn { margin: 24px auto 0; }

@media screen and (max-width:768px) {
	.business { background-size: 20vw auto,50% auto,50% auto; }
	.business article { padding: 48px 5vw; background-size: 15vw auto,100% auto; }
	.business article::before {
		width: 12vw; height: 12vw;
		background: linear-gradient(45deg,#e8ebf0 48.5%,#1f4873 48.5%,#1f4873 51.5%,#fff 51.5%);
	}
	.business .part { display: block; padding: 0; }
	.business .part:first-of-type { margin: 0 auto 36px; }
	.business .photo { width: 100%; margin: 0 auto 16px; }
	.business .text { width: 100%; padding: 0; }
	.business h2 { font-size: 4.4rem; }
	.business h2 span { font-size: 1.8rem; }
	.business h2 span::before { width: 2.0rem; height: 2.0rem; }
	.business h3 { margin: 16px 0 12px; font-size: 2.0rem; }
	.business .btn { margin: 16px auto 0; }
}

/* --------------------------------------------------------------------------
   recruit
-------------------------------------------------------------------------- */

.recruit { background: linear-gradient(#1f4873 60%,#5d7eab 100%); color: #fff; }
.recruit::after {
	content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 180px; 
	clip-path: polygon(0 100%,100% 0,100% 100%); background: #fff;
}
.recruit article {
	padding: 130px 0 230px; background: center/contain no-repeat url(../img/index_base3.png);
	text-align: center; 
}
.recruit h2 { font-size: 6.5rem; font-weight: 700; }
.recruit h2::after {
	content: ''; display: block; width: 60px; height: 16px; margin: 20px auto 30px;
	background: #f7cf7c; transform: skew(0,-5deg);
}
.recruit h3 { margin: 0 0 48px; font: 700 2.8rem/1.6 'Zen Old Mincho'; }
.recruit h3 span { background: linear-gradient(#fff 85%,#f7cf7c 85%); font-size: 120%; }
.recruit p { line-height: 2.0; }
.recruit .btn { margin: 48px auto 60px; color: #1f4873; }
.recruit i.photo1 img, .recruit i.photo2 img {
	width: 100%; clip-path: polygon(0 10%,100% 0,100% 90%,0 100%);
}

@media screen and (min-width:769px) {
	.recruit i { display: block; position: absolute; }
	.recruit i.photo1 {
		top: 70px; right: 60px; width: 260px;
		filter: drop-shadow(10px 10px 0 rgba(251,191,86,.35));
	}
	.recruit i.photo2 {
		bottom: 180px; left: 60px; width: 260px;
		filter: drop-shadow(10px 10px 0 rgba(255,255,255,.35));
	}
	.recruit i.photo3 {
		top: 50px; left: 0; width: 280px; clip-path: polygon(0 12%,100% 0,100% 88%,0 100%);
	}
	.recruit i.photo4 {
		bottom: 200px; right: 0; width: 200px; clip-path: polygon(0 12%,100% 0,100% 88%,0 100%);
	}	
}
@media screen and (max-width:768px) {
	.recruit::after { height: 60px; }
	.recruit article {
		padding: 36px 0 72px;
		background: center 40%/contain no-repeat url(../img/index_base3_s.png);
	}
	.recruit h2 { font-size: 4.4rem; }
	.recruit h2::after { height: 12px; margin: 10px auto 20px; }
	.recruit h3 { margin: 0 0 24px; font-size: 2.0rem; }
	.recruit .btn { margin: 24px auto 30px; }
	.recruit .photo { display: flex; justify-content: space-between; }
	.recruit i { display: block; }
	.recruit i.photo1 { width: 45%; filter: drop-shadow(10px 10px 0 rgba(251,191,86,.35)); }
	.recruit i.photo2 { width: 45%; filter: drop-shadow(10px 10px 0 rgba(255,255,255,.35)); }
	.recruit i.photo3,.recruit i.photo4 { display: none; }
}

/* --------------------------------------------------------------------------
   csr
-------------------------------------------------------------------------- */

.csr { padding: 64px 0; }
.csr article { display: flex; justify-content: space-between; width: 1000px; }
.csr .text { width: 360px; padding: 24px 0 0; }
.csr .photo { display: flex; justify-content: space-between; width: 600px; }
.csr .photo i { display: block; width: 280px; }
.csr .photo i:first-child { margin: 100px 0 0; }
.csr h2 { margin: 0 0 24px; font-size: 5.6rem; font-weight: 700; }
.csr h2 span { display: block; font-size: 2.0rem; font-weight: 400; }
.csr h2 span::before {
	content: ''; display: inline-block; width: 26px; height: 26px; margin-right: 10px;
	background: #f7cf7c; transform: skew(0,-10deg); vertical-align: text-top;
}
.csr .btn { margin: 24px auto 0; }

@media screen and (max-width:768px) {
	.csr { padding: 36px 0; }
	.csr article { display: block; width: 90%; }
	.csr .text { width: 100%; padding: 0 0 24px; }
	.csr .photo { width: 100%; }
	.csr .photo i { width: 46%; }
	.csr .photo i:first-child { margin: 24px 0 0; }
	.csr h2 { margin: 0 0 16px; font-size: 4.4rem; }
	.csr h2 span { font-size: 1.8rem; }
	.csr h2 span::before { width: 2.0rem; height: 2.0rem; }
	.csr .btn { margin: 16px auto 0; }
}

/* --------------------------------------------------------------------------
   news
-------------------------------------------------------------------------- */

.news { padding: 64px 0 120px; }
.news article { width: 1000px; }
.news h2 { margin: 0 0 24px; font-size: 5.6rem; font-weight: 700; }
.news h2 span { display: block; font-size: 2.0rem; font-weight: 400; }
.news h2 span::before {
	content: ''; display: inline-block; width: 26px; height: 26px; margin-right: 10px;
	background: #f7cf7c; transform: skew(0,-10deg); vertical-align: text-top;
}
.news dl { display: flex; padding: 16px 0; border-bottom: solid 1px #1f4873; }
.news dt { width: 8.0em; }
.news dd { width: calc(100% - 8.0em); }
.news dd a { position: relative; display: block; padding-right: 20px; }
.news dd a::after {
	content: ''; position: absolute; top: 50%; right: 5px; width: 8px; height: 8px;
	border: solid 2px #1f4873; border-width: 2px 2px 0 0;
	transform: translateY(-50%) rotate(45deg);
}
.news .btn { margin: 16px 0 0 auto; }

@media screen and (max-width:768px) {
	.news { padding: 36px 0 48px; }
	.news article { width: 90%; }
	.news h2 { margin: 0 0 16px; font-size: 4.4rem; }
	.news h2 span { font-size: 1.8rem; }
	.news h2 span::before { width: 2.0rem; height: 2.0rem; }
	.news dl { display: block; padding: 10px 0; }
	.news dt, .news dd { width: 100%; }
}