@charset "utf-8";
@import "base.css";
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700;900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@400;500;700;900&display=swap");

/*━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
  全般設定
　━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━*/
body {
	font-family: 'Noto Serif JP', serif;
	font-family: 'Noto Sans JP', 'Yu Gothic Medium', '游ゴシック Medium', YuGothic, '游ゴシック体', 'Noto Sans JP', 'ヒラギノ角ゴ Pro W3', 'メイリオ', sans-serif;
	font-size: 16px;
	color: #000000;
	line-height: 1.4;
	-webkit-text-size-adjust: 100%;
}
#wrapper {
	width: 100%;
	max-width: 1920px;
	margin: 0 auto;
	padding: 0;
	position: relative;
	overflow: hidden;
}
* { box-sizing: border-box; }

.flex {
	display: flex;
	flex-wrap: wrap;
}
.jc_c {
	justify-content: center;
}
.jc_sb {
	justify-content: space-between;
}
.jc_fe {
	justify-content: flex-end;
}
.ai_c {
	align-items: center;
}
.ai_fe {
	align-items: flex-end;
}
.reverse {
	flex-flow: row-reverse;
}

a.flex {
	width: 100%;
	height: 100%;
}

@media (min-width: 769px) {
	a[href^="tel:"] {
		pointer-events: none;
	}
}

.w1700,
.w1660,
.w1500,
.w1300,
.w1200,
.w1100,
.w1000 {
	width: 100%;
	margin: 0 auto;
}
.w1700 {
	max-width: 1700px;
}
.w1660 {
	max-width: 1660px;
}
.w1500 {
	max-width: 1500px;
}
.w1300 {
	max-width: 1300px;
}
.w1200 {
	max-width: 1200px;
}
.w1100 {
	max-width: 1100px;
}
.w1000 {
	max-width: 1000px;
}

.lh175 {
	line-height: 1.75;
}


.pc1400,
.pc1200,
.pc1000,
.pc {
	display: inline-block;
}
.sp1400,
.sp1200,
.sp1000,
.sp {
	display: none;
}

@media (max-width: 1400px) {
	.pc1400 {
		display: none;
	}
	.sp1400 {
		display: inline-block;
	}

}

@media (max-width: 1200px) {
	.pc1200 {
		display: none;
	}
	.sp1200 {
		display: inline-block;
	}
}

@media (max-width: 1000px) {
	.pc1000 {
		display: none;
	}
	.sp1000 {
		display: inline-block;
	}
}

@media (max-width: 768px) {
	.pc {
		display: none;
	}
	.sp {
		display: inline-block;
	}
}

/* header
------------------------------------------------------------*/
header {
	width: 100%;
	height: 95px;
	position: absolute;
	left: 0;
	top: 0;
	z-index: 999;
}
header .logo {
	width: 440px;
	height: 100%;
	background-color: #000000;
	padding: 15px;
	clip-path: polygon(0 0, 100% 0, 100% 40px, 390px 100%, 0 100%);
}

@media (min-width: 1001px) {
	nav {
		width: calc(100% - 500px);
		max-width: 624px;
		height: 70px;
		background-color: #000000;
		padding: 20px 10px;
		clip-path: polygon(24px 0, 100% 0, 100% 100%, 0 100%, 0 18px);
	}
	nav ul {
		width: 100%;
		height: 100%;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-evenly;
		align-items: center;
	}
	nav ul li a {
		color: #ffffff;
		transition: 0.5s;
	}

	nav ul li.current a,
	nav ul li a:hover {
		color: #0097cc;
		position: relative;
		transition: 0.5s;
	}

	nav ul li.current a::before,
	nav ul li a:hover::before {
		content: '';
		width: 10px;
		height: 20px;
		background-color: #0097cc;
		position: absolute;
		left: 0;
		right: 0;
		bottom: -23px;
		margin: auto;
		transition: 0.5s;
	}
}

@media screen and (max-width: 1000px) {
	header {
		height: 60px;
		position: fixed;
		top: 0;
	}
	header .logo {
		width: auto;
		padding: 6px 30px 6px 10px;
		clip-path: polygon(0 0, 100% 0, 100% 40px, calc(100% - 20px) 100%, 0 100%);
	}

	header .logo img {
		width: auto;
		height: 48px;
	}

	.sp_menu {
		display : block;
		width: 50px;
		height: 50px;
		background-color: #000000;
		text-align: center;
		clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
		position: fixed;
		right: 10px;
		top: 10px;
		z-index: 3;
		cursor: pointer;
	}
    .sp_menu span {
	    display: block;
		width: 30px;
		height: 2px;
		background-color: #ffffff;
		position: absolute;
		left: 10px;
		transition: 0.3s ease-in-out;
  	}
  	.sp_menu span:nth-child(1) { top: 18px; }
  	.sp_menu span:nth-child(2) { top: 30px; }
  
    /* スマホメニューを開いてる時のボタン */
    .sp_menu.active span:nth-child(1) {
		left: 10px;
		top: 24px;
		transform: rotate(-45deg);
  	}
    .sp_menu.active span:nth-child(2) {
		top: 24px;
		transform: rotate(45deg);
  	}

    nav {
		width: 100%;
		max-width: 210px;
		height: 100%;
		background-color: #000000;
		position: fixed;
		right: 0;
		top: 0;
		z-index: 1;
		transform: translateX(100%);
		transition: all 0.2s;
    }
    nav ul {
		width: 100%;
		border-radius: 0;
		margin: 0 auto;
		padding: 60px 0 20px 15px;
	}
    nav ul li {
		width: 100%;
		border-right: none;
		padding: 0;
		transition: .4s all;
    }
    nav ul li:last-child {
		padding-bottom: 0;
    }
    nav ul li a {
	    display: block;
		border-bottom: 1px dashed #ffffff;
		color: #ffffff;
	    padding: 1em 20px;
    }
    /* クリックでjQueryで追加・削除 */
    nav.active {
		display: block;
	    opacity: 1;
	    transform: translateX(0%);
    }
}



/* footer
------------------------------------------------------------*/
footer {
	background-color: #0f2e82;
	background-image: url(../img/common/f_bg.png);
	background-position: center;
	background-repeat: no-repeat;
	color: #ffffff;
}
footer .inner {
	padding: 90px 40px 60px;
}

footer .office {
	margin-top: 40px
}
footer .office dl:not(:first-child) {
	margin-top: 10px;
}
footer .office dl dt {
	width: 150px;
}
footer .office dl dd {
	width: calc(100% - 150px);
}

footer .right {
	width: calc(100% - 450px);
	max-width: 780px;
	padding-top: 20px;
}
footer .f_nav {
	width: 100%;
}
footer .f_nav ul li {
	width: 25%;
}
footer .f_nav ul li:nth-child(n+5) {
	margin-top: 60px;
}
footer .f_nav ul li a {
	font-size: 18px;
	font-weight: 900;
}

#copyright {
	width: 100%;
	margin-top: 120px;
}
#copyright .copyright {
	font-size: 12px;
}


#pagetop {
	width: 100%;
	height: 100px;
	background-color: #000000;
}
#pagetop .pagetop {
	width: 100%;
	height: 100%;
}
#pagetop a {
	color: #ffffff;
	font-size: 20px;
	font-weight: 900;
}

@media screen and (max-width: 1000px) {
	footer .inner {
		justify-content: center;
	}

	footer .office {
		margin-top: 30px
	}


	footer .right {
		width: 100%;
		margin-top: 50px;
		padding-top: 0;
	}
	footer .f_nav ul li {
		width: 33.33%;
		text-align: center;
	}
	footer .f_nav ul li:nth-child(n+4) {
		margin-top: 40px;
	}

	#copyright {
		margin-top: 80px;
	}

	#copyright .copyright {
		text-align: center;
	}
}

@media screen and (max-width: 768px) {
	footer .inner {
		padding: 60px 20px 40px;
	}


	#pagetop {
		height: 72px;
	}
	#pagetop a {
		font-size: 16px;
	}

}

@media screen and (max-width: 480px) {
	footer .inner .left {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
	}
	footer .office {
		max-width: 210px;
		margin-top: 20px;
	}
	footer .office dl:not(:first-child) {
		margin-top: 15px;
	}
	footer .office dl dt {
		width: 100%;
	}
	footer .office dl dd {
		width: 100%;
	}

	footer .f_nav ul li a {
		font-size: 16px;
	}



}

#recruit {
	width: 100%;
	height: 750px;
	background-image: url(../img/common/lb_bg.png), url(../img/common/recruit_bg.jpg);
	background-position: center bottom, center;
	background-repeat: no-repeat;
	position: relative;
}
#recruit::before {
	content: '';
	width: 100%;
	height: 980px;
	background-image: url(../img/common/recruit_person.png);
	background-position: center bottom;
	background-repeat: no-repeat;
	position: absolute;
	left: 0;
	bottom: 0;
}
#recruit .inner {
	height: 100%;
	padding-left: 20px;
	padding-right: 20px;
	position: relative;
}
#recruit .ishikawa_ball {
	text-align: center;
	position: absolute;
	left: 0;
	right: 0;
	top: -170px;
}
#recruit .cont {
	position: relative;
}
#recruit .cont .ttl {
	color: #ffffff;
	font-size: 80px;
	font-weight: 900;
	text-align: center;
}
#recruit .cont .ttl rt {
	font-size: 32px;
	font-weight: 400;
	ruby-align: center;
	margin-bottom: 10px;
}

#recruit .cont .txt {
	color: #ffffff;
	font-size: 40px;
	text-align: center;
	margin: 40px 0 60px;
}


@media screen and (max-width: 1000px) {
	#recruit .cont .ttl {
		font-size: 64px;
	}
	#recruit .cont .ttl rt {
		font-size: 20px;
	}
}
	
@media screen and (max-width: 768px) {
	#recruit {
		height: auto;
		background-size: cover;
		padding-top: 80px;
		padding-bottom: 80px;
	}
	#recruit::before {
		background-image: url(../img/common/recruit_person_sp.png);
		background-position: center bottom 100px;
		background-size: 550px auto;
	}

	#recruit .ishikawa_ball {
		width: 100%;
		max-width: 320px;
		margin: auto;
		left: -30%;
		top: -150px;
	}

	#recruit .cont .ttl {
		max-width: 320px;
		font-size: 28px;
		text-align: left;
		margin: 0 auto;
	}


	#recruit .cont .txt {
		max-width: 320px;
		font-size: 24px;
		text-align: left;
		margin: 30px auto;
	}

}

@media screen and (max-width: 480px) {
	#recruit .ishikawa_ball {
		left: -45%;
	}
}

.sign_btn .btn {
	width: 560px;
	height: 180px;
	margin: 0 auto;
}
.sign_btn .btn a {
	background-image: url(../img/common/sign_red.svg);
	background-position: right 40px center;
	background-repeat: no-repeat;
	background-size: 20px auto;
	font-size: 40px;
	font-weight: 900;
	padding: 20px 80px 20px 50px;
	transition: 0.5s;
}
.sign_btn .btn.white a {
	background-color: #ffffff;
}
.sign_btn .btn a:hover {
	background-position: right 35px center;
	transition: 0.5s;
}

@media screen and (max-width: 768px) {
	.sign_btn .btn {
		width: 100%;
		max-width: 360px;
		height: 80px;
	}

	.sign_btn .btn a {
		background-position: right 30px center;
		background-size: 16px auto;
		font-size: 24px;
	}
}


/* main　
------------------------------------------------------------*/
article.bg {
	background-color: #0d2261;
	color: #ffffff;
}

section {
	padding-left: 30px;
	padding-right: 30px;
}

section.pt {
	padding-top: 100px;
}
section.pb {
	padding-bottom: 100px;
}

section.pt_middle {
	padding-top: 150px;
}
section.pb_middle {
	padding-bottom: 150px;
}

section.pt_first {
	padding-top: 250px;
}
section.pb_last {
	padding-bottom: 250px;
}

@media screen and (max-width: 768px) {
	section {
		padding-left: 20px;
		padding-right: 20px;
	}

	section.pt {
		padding-top: 60px;
	}
	section.pb {
		padding-bottom: 60px;
	}

	section.pt_middle {
		padding-top: 80px;
	}
	section.pb_middle {
		padding-bottom: 80px;
	}

	section.pt_first {
		padding-top: 100px;
	}
	section.pb_last {
		padding-bottom: 100px;
	}
}
	

#page_ttl {
	width: 100%;
	height: 480px;
	background-image: url(../img/common/page_ttl.jpg);
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	padding-left: 20px;
	padding-right: 20px;
	padding-top: 25px;
	position: relative;
	z-index: 3;
}
#page_ttl .inner,
#page_ttl .cont {
	width: 100%;
	height: 100%;
}
#page_ttl .inner {
	position: relative;
}
#page_ttl .ttl {
	color: #ffffff;
	font-weight: 900;
}
#page_ttl .ttl .ja {
	font-size: 70px;
	transform: rotate(-5deg);
}
#page_ttl .ttl .en {
	font-size: 30px;
	transform: rotate(-5deg);
}

#page_ttl .cont_img {
	position: absolute;
	left: 0;
	right: 0;
	bottom: -110px;
}

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

	#page_ttl .cont_img {
		left: -45px;
	}
}


@media screen and (max-width: 768px) {
	#page_ttl {
		height: 240px;
	}
	#page_ttl .ttl .ja {
		font-size: 36px;
	}
	#page_ttl .ttl .en {
		font-size: 20px;
	}

	#page_ttl .cont_img {
		width: 320px;
		margin: unset;
		bottom: -50px;
	}
}
	

.section_ttl {
	margin-bottom: 40px;
}


.s_ttl .ja {
	font-size: 46px;
	font-weight: 900;
	line-height: 1;
}

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

	.s_ttl .ja {
		font-size: 28px;
	}

}

table.table01 th {
	color: #3548a6;
	vertical-align: top;
}
article.bg table.table01 th {
	color: #0097cc;
}

table.table01 td ol li {
	text-indent: -1em;
	padding-left: 1em;
}

.t_btn {
	width: 845px;
	height: 230px;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	font-weight: 900;
	line-height: 1;
	margin: 60px auto 0;
}
.t_btn.white {
	background-image: url(../img/top/btn_white.png);
}
.t_btn.black {
	background-image: url(../img/top/btn_black.png);
}
.t_btn a {
	width: 100%;
	height: 100%;
	background-image: url(../img/common/sign_red.svg);
	background-position: right 60px center;
	background-repeat: no-repeat;
	background-size: 20px auto;
	text-align: center;
	transition: 0.5s;
}
.t_btn a:hover {
	background-position: right 55px center;
	transition: 0.5s;
}
.t_btn.black a {
	color: #ffffff;
}
.t_btn .ja {
	font-size: 70px;
}
.t_btn .en {
	font-size: 30px;
	margin-top: 15px;
}

@media screen and (max-width: 1400px) {
	.t_btn {
		width: 720px;
		height: 197px;
		background-size: contain;
	}
}

@media screen and (max-width: 1000px) {
	.t_btn {
		width: 100%;
		max-width: 480px;
		height: 132px;
		background-size: contain;
	}

	.t_btn .ja {
		font-size: 32px;
	}
	.t_btn .en {
		font-size: 20px;
		margin-top: 10px;
	}
}


/* フェードインのベース（共通） */
.fade_in {
	opacity: 0;
	transition: opacity 0.8s ease-out, transform 0.8s ease-out;
	will-change: opacity, transform;
}

/* 左から来るパターン */
.fade_left {
	transform: translateX(-50px);
}

/* 下から来るパターン */
.fade_bottom {
	transform: translateY(50px);
}
.fade_left_top {
	/* Xをマイナス（左）、Yをマイナス（上）にずらす */
	transform: translate(-50px, -50px);
}
/* 左下から来るパターン */
.fade_left_bottom {
	/* Xをマイナス（左）、Yをプラス（下）にずらす */
	transform: translate(-50px, 50px);
}
.fade_right_top {
	/* Xをプラス（右）、Yをマイナス（上）にずらす */
	transform: translate(50px, -50px);
}
.fade_right_bottom {
	/* Xをプラス（右）、Yをプラス（下）にずらす */
	transform: translate(50px, 50px);
}

/* 右から来るパターン */
.fade_right {
	transform: translateX(50px);
}

/* フェードイン＆スケールのベース（画面外にある状態） */
.fade_in_scale {
	opacity: 0;
    transform: scale(0.1);
    
    /* transitionの設定 */
    /* 0.5s〜0.8sくらいが「どーん」という勢いが出やすいです */
    transition: 
        opacity 0.4s ease-out, 
        transform 1s cubic-bezier(0.34, 1.56, 0.64, 1); 
    will-change: opacity, transform;
}
/*
.fade_in_scale {
	opacity: 0;
	transform: scale(0) translateY(20px);
	transition: opacity 1s ease-in, transform 1s ease-in;
	will-change: opacity, transform;
}
	*/

/* 表示前の状態 */
.fade_in_fuwa {
  opacity: 0;
  /* 0.8倍の大きさから1倍へ、20px下から上へ */
  transform: scale(0.8) translateY(20px);
  
  /* 動きの滑らかさ：少しゆっくりめ（1.2秒）にすると、より「ふわっと」します */
  transition: opacity 1.2s cubic-bezier(0.33, 1, 0.68, 1), 
              transform 1.2s cubic-bezier(0.33, 1, 0.68, 1);
  
  will-change: opacity, transform;
}


/* JSでこのクラスが付与されたら表示される */
.is_visible {
	opacity: 1;
	transform: translateX(0); /* 元の位置に戻る */
}
.is_visible.fade_bottom {
	transform: translateY(0); /* 元の位置に戻る */
}
.is_visible.fade_left_top,
.is_visible.fade_left_bottom,
.is_visible.fade_right_top,
.is_visible.fade_right_bottom  {
	transform: translate(0, 0);
}
.is-visible.fade_in_scale {
    transform: scale(1);
}

.delay_100 { transition-delay: 0.1s; }
.delay_200 { transition-delay: 0.2s; }
.delay_300 { transition-delay: 0.3s; }
.delay_400 { transition-delay: 0.4s; }
.delay_500 { transition-delay: 0.5s; }
.delay_600 { transition-delay: 0.6s; }
.delay_700 { transition-delay: 0.7s; }
.delay_800 { transition-delay: 0.8s; }
.delay_900 { transition-delay: 0.9s; }
.delay_1000 { transition-delay: 1.0s; }
.delay_1100 { transition-delay: 1.1s; }

.a_delay_200 { animation-delay: 0.2s !important; }
.a_delay_400 { animation-delay: 0.4s !important; }




#random_txt span {
    display: inline-block;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.5s, transform 0.5s;
}
#random_txt.is-visible span.random {
    opacity: 1;
    transform: translateY(0);
}



section {
	position: relative;
}
.fade_cloud {
	position: absolute;
}
.cloud_left {
	left: 0;
	bottom: 0;
}
.cloud_right {
	right: 0;
	top: 0;
}

@media screen and (max-width: 1400px) {
	.cloud_left {
		left: -60px;
		bottom: -30px;
	}
	.cloud_right {
		right: -60px;
		top: -40px;
	}
}
	
@media screen and (max-width: 1200px) {
	.cloud_left {
		left: -120px;
	}
	.cloud_right {
		right: -120px;
	}
}

@media screen and (max-width: 768px) {
	.cloud_left {
		width: 60%;
		left: -25px;
	}
	.cloud_right {
		width: 60%;
		right: -35px;
	}
}


/* top
------------------------------------------------------------*/
#main_img {
	width: 100%;
/*	height: 1065px; */
	height: 950px;
	background-image: url(../img/top/main_img.jpg);
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	padding-left: 20px;
	padding-right: 20px;
}
#main_img .inner {
	height: 100%;
	padding-top: 220px;
	position: relative;
}
.main_fade_img {
	position: absolute;
	z-index: 5;
}
.main_fade_img.img01 {
	color: #ffffff;
	font-size: 58px;
	font-weight: 900;
	left: 0;
	top: 220px;
}
.main_fade_img.img02 {
	left: 0;
	top: 380px;
}
.main_fade_img.img03 {
	left: 0;
	bottom: 0;
}
.main_fade_img.img04 {
	left: 30%;
	top: -120px;
}
.main_fade_img.img05 {
	right: -200px;
	bottom: -60px;
}
.main_cloud {
	position: absolute;
	right: -180px;
	bottom: -80px;
	z-index: 3;
}


@media screen and (max-width: 1000px) {
	#main_img {
		height: 720px;
	}
	#main_img .inner {
		padding-top: 180px;
	}
	.main_fade_img.img01 {
		font-size: 48px;
		top: 180px;
	}
	.main_fade_img.img02 {
		width: 480px;
		top: 320px;
	}
	.main_fade_img.img03 {
		width: 480px;
		left: -40px;
		bottom: -40px;
	}
	.main_fade_img.img04 {
		width: 320px;
	}
	.main_fade_img.img05 {
		width: 240px;
		right: -100px;
	}
	.main_cloud {
		width: 60%;
	}
}


@media screen and (max-width: 768px) {
	#main_img {
		background-color: #000000;
		background-image: url(../img/top/main_img_sp.jpg);
		background-position: center top;
		background-size: 100% auto;
		height: 720px;
		position: relative;
	}
	#main_img::before {
		content: '';
		display: block;
		width: 100%;
		height: 100%;
		background-image: url(../img/top/main_img_sp_shadow.png);
		background-position: center bottom;
		background-repeat: no-repeat;
		background-size: 100% 80%;
		position: absolute;
		left: 0;
		bottom: 0;
	}
	#main_img .inner {
		padding-top: 120px;
	}
	.main_fade_img.img01 {
		font-size: 24px;
		top: auto;
		bottom: 340px;
	}
	.main_fade_img.img02 {
		width: 300px;
		top: auto;
		bottom: 200px;
	}
	.main_fade_img.img03 {
		width: 320px;
		left: -40px;
		bottom: 60px;
	}
	.main_fade_img.img04 {
		display: none;
	}
	.main_fade_img.img05 {
		width: 160px;
		right: -60px;
		bottom: 30px;
	}
	.main_cloud {
		width: 110%;
		right: -55px;
		bottom: -30px;
	}
}


#top01 {
	height: 720px;
	position: relative;
}
#top01::before,
#top01::after {
	content: '';
	width: 100%;
	height: 100%;
	position: absolute;
	left: 0;
	top: 0;
}
#top01::before {
	background: linear-gradient(90deg, #000000 0%, #252c37 100%);
}
#top01::after {
	background-image: url(../img/top/top01_bg.png);
	background-position: center top;
	background-repeat: no-repeat;
}
#top01 section {
	padding-top: 50px;
}
#top01 .cont {
	position: relative;
	z-index: 1;
}
#top01 .cont .ttl {
	color: #ffffff;
	font-size: 92px;
	font-weight: 900;
	transform: rotate(-15deg);
}
#top01 .cont .ttl ruby {
	font-size: 169px;
}
#top01 .cont .ttl ruby rt {
	font-size: 40px;
	font-weight: 400;
	ruby-align: center;
	margin-bottom: 10px;
}

#top01 section,
#top01 .section_cont,
#top01 .cont {
	height: 100%;
}
#top01 .cont {
	position: relative;
}
#top01 .fade_img {
	position: absolute;
}
#top01 .fade_img.img01 {
	right: -80px;
	top: -320px;
}
#top01 .fade_img.img02 {
	left: 15%;
	top: -100px;
}
#top01 .fade_img.img03 {
	left: 25%;
	bottom: -210px;
}
#top01 .fade_img.img04 {
	right: 5%;
	bottom: 0;
}
#top01 .fade_img.img05 {
	left: 0;
	top: 0;
}



#top01 .fade_img {
    opacity: 0;
    will-change: transform, opacity;
}
#top01 .fade_img.is_visible {
    animation-fill-mode: forwards;
}

#top01 .img01.is_visible,
#top01 .img04.is_visible {
    animation: flowFromRightTop 1.0s ease-out forwards;
}
#top01 .img02.is_visible {
    animation: boundDontRightTop 0.8s cubic-bezier(0.215, 0.610, 0.355, 1.000) forwards;
}
#top01 .img03.is_visible {
    animation: hitAndBounceRightTop 0.8s ease-out forwards;
}
#top01 .img05.is_visible {
    animation: fadeFromLeft 1.0s ease-out forwards;
}


/* img01 img04 右上から */
@keyframes flowFromRightTop {
    0% {
        opacity: 0;
        transform: translate(100px, -100px);
    }
    100% {
        opacity: 1;
        transform: translate(0, 0);
    }
}

/* img05 */
@keyframes fadeFromLeft {
    0% {
        opacity: 0;
        transform: translateX(-50px); /* 左50pxから */
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

/* img02：右上から */
@keyframes boundDontRightTop {
    0% {
        opacity: 0;
        transform: translate(200px, -200px) scale(0.5);
    }
    60% {
        opacity: 1;
        transform: translate(0, 0) scale(1.1);
    }
    80% {
        transform: scale(0.95);
    }
    100% {
        opacity: 1;
        transform: translate(0, 0) scale(1);
    }
}

/* img03：右上から */
@keyframes hitAndBounceRightTop {
    0% {
        opacity: 0;
        transform: translate(300px, -300px);
    }
    50% {
        opacity: 1;
        transform: translate(-15px, 15px);
    }
    70% {
        transform: translate(10px, -10px);
    }
    100% {
        opacity: 1;
        transform: translate(0, 0);
    }
}



@media screen and (max-width: 1200px) {
	#top01 .fade_img.img03 {
		bottom: 10px;
	}
	#top01 .fade_img.img04 {
		right: 3%;
		bottom: 25%;
	}

}


@media screen and (max-width: 1000px) {
	#top01 {
		height: 540px;
	}
	#top01::after {
		background-size: cover;
	}
	#top01 .cont .ttl {
		font-size: 50px;
	}
	#top01 .cont .ttl ruby {
		font-size: 100px;
	}
	#top01 .cont .ttl ruby rt {
		font-size: 18px;
		margin-bottom: 5px;
	}

	#top01 .fade_img.img02 {
		top: 0;
	}
	#top01 .fade_img.img03 {
		width: 280px;
		bottom: -100px;
	}
	#top01 .fade_img.img04 {
		width: 240px;
		bottom: 12%;
	}

}

@media screen and (max-width: 768px) {
	#top01 {
		height: 420px;
	}
	#top01 section {
		padding-top: 120px;
	}
	#top01 .cont .ttl {
		font-size: 28px;
		margin-top: -70px;
	}
	#top01 .cont .ttl ruby {
		font-size: 60px;
	}

	#top01 .fade_img.img01 {
		width: 340px;
        right: -50px;
        top: -155px;
	}
	#top01 .fade_img.img02 {
		top: -10px;
	}
	#top01 .fade_img.img03 {
		width: 160px;
		left: 30%;
		bottom: -56px;
	}
	#top01 .fade_img.img04 {
		width: 160px;
		right: -8%;
		bottom: 12%;
	}

}


#top02 {
	background-color: #000000;
	overflow: hidden;
}

#top02 .cont .left {
	width: 580px;
	padding-bottom: 60px;
}
#top02 .cont .left .txt {
	color: #ffffff;
	font-size: 26px;
	font-weight: 900;
}

#top02 .cont .right {
	width: 48vw;
    margin-right: calc(50% - 50vw);
}


#top02 .cont_box {
	height: 780px;
	padding-top: 60px;
	position: relative;
}
#top02 .cont_box .t_btn {
	position: relative;
	z-index: 3;
}


#works_bg_slide {
	height: 500px;
	margin-left: -30px;
	position: absolute;
	left: 0;
	top: 60px;
}
#works_bg_slide ul li img {
	opacity: 0.3;
}

#works_bg_slide ul li {
	height: 500px;
	margin: 0 5px;
	display: flex;
}
#works_bg_slide ul li:nth-child(2n) {
	align-items: flex-end;
}



@media screen and (max-width: 1400px) {
	#top02 .cont .left {
		width: 480px;
	}
	#top02 .cont .left .txt {
		font-size: 21px;
	}

	#top02 .cont .right {
		width: calc(100% - 480px);
		margin-right: 0;
	}
}

@media screen and (max-width: 1000px) {
	#top02 .cont .left {
		width: 100%;
		padding-bottom: 0;
	}

	#top02 .cont .right {
		width: 100%;
		margin-top: 20px;
	}
}

@media screen and (max-width: 768px) {
	#top02 .cont .left .txt {
		font-size: 18px;
	}
}


#top03 {
	background-image: url(../img/top/top03_bg.png);
	background-position: center top;
	background-repeat: no-repeat;
	background-size: cover;
	margin-top: -600px;
	position: relative;
}
#top03::before {
	content: '';
	width: 100%;
	height: 100%;
	background-color: #000000;
	position: absolute;
	left: 0;
	top: 0;
	z-index: -1;
}
#top03 section {
	padding-top: 32%;
}

#top03 .t_ttl .ttl {
	color: #ffffff;
	font-size: 71px;
	font-weight: 900;
	text-align: center;
	line-height: 1.2;
	position: relative;
	z-index: 1;
}
#top03 .t_ttl .ttl span.clr {
	color: #ff5610;
}
#top03 .t_ttl .ttl span.fs {
	font-size: 98px;
}

#top03 .t_btn a {
	position: relative;
}
#top03 .t_btn a .btn_img {
	position: absolute;
	left: 25px;
	top: -25px;
}

#top03 .section_ttl,
#top03 .section_cont {
	position: relative;
}
#top03 .fade_img {
	position: absolute;
}
#top03 .fade_img.img01 {
	left: -100px;
	top: -540px;
}
#top03 .fade_img.img02 {
	right: -5%;
	top: -360px;
}
#top03 .fade_img.img03 {
	left: -240px;
	bottom: -240px;
}


@media (max-width: 1400px) {
	#top03 .t_btn a .btn_img {
		width: 150px;
		left: 20px;
		top: -10px;
	}
}

@media (max-width: 1000px) {

	#top03 {
		margin-top: -540px;
	}
	#top03 .fade_img.img01 {
		left: 0;
		top: -360px
	}
	#top03 .fade_img.img02 {
		width: 180px;
	}


	#top03 .t_ttl .ttl {
		font-size: 45px;
	}
	#top03 .t_ttl .ttl span.fs {
		font-size: 60px;
	}

}

@media (max-width: 768px) {
    #top03 .fade_img.img01 {
        width: 120%;
        left: -10%;
        top: -250px;

    }

	#top03 .fade_img.img02 {
		display: none;
	}
	#top03 .fade_img.img03 {
		display: none;
	}

	#top03 .t_btn a .btn_img {
		width: 80px;
		top: 10px;
	}

}

#voice_slide {
	margin-top: 80px;
}
#voice_slide ul li {
	width: 400px;
	max-width: 400px;
	height: 500px;
	background-image: url(../img/top/top_slide_bg.png);
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	position: relative;
	margin: 0 16.66px;
	padding-left: 30px;
}

#voice_slide ul li .num {
	position: absolute;
	left: 3px;
	top: 40px;
}
#voice_slide ul li .num img {
	width: auto;
	height: 80px;
}
#voice_slide ul li .cloud {
	position: absolute;
}
#voice_slide ul li .cloud01 {
	right: 0;
	top: 80px;
}
#voice_slide ul li .cloud02 {
	left: 35px;
	top: 220px;
}
#voice_slide ul li .img {
	width: 425px;
	height: 384px;
	position: absolute;
	left: 30px;
	top: 0;
}
#voice_slide ul li .img img {
	width: auto;
	height: 384px;
}
#voice_slide ul li .box {
	width: calc(100% - 30px);
	height: 116px;
	background-color: #0d2a59;
	padding: 15px 25px;
	position: absolute;
	right: 0;
	bottom: 0;
}
#voice_slide ul li .box .charge {
	color: #70c5e2;
	font-size: 19px;
	font-weight: 900;
}
#voice_slide ul li .box .ttl {
	width: 100%;
	height: 50px;
	color: #000000;
	font-size: 24px;
	font-weight: 900;
	text-align: center;
	line-height: 48px;
	margin-top: 10px;
	position: relative;
	z-index: 1;
}
#voice_slide ul li .box .ttl::before,
#voice_slide ul li .box .ttl::after {
	content: '';
	width: 100%;
	height: 100%;
	position: absolute;
	left: 0;
	top: 0;
	z-index: -1;
}
#voice_slide ul li .box .ttl::before {
	background-color: #000000;
}
#voice_slide ul li .box .ttl::after {
	background-color: #70c5e2;
	clip-path: polygon(15px 0, 100% 0, 100% calc(100% - 15px), calc(100% - 15px) 100%, 0 100%, 0 15px);
}
.prev-arrow,
.next-arrow {
	position: absolute;
	top: calc(50% - 35px);
	z-index: 3;
	cursor: pointer;
}
.prev-arrow {
	left: -25px;
}
.next-arrow {
	right: -25px;
}


#top04 .cont .left {
	width: 38%;
	position: relative;
}
#top04 .cont .left .img {
	position: absolute;
	left: 0;
	bottom: -100px;
}
#top04 .cont .right {
	width: 50%;
	font-weight: 900;
}
#top04 .cont .right .ttl {
	color: #0744ad;
	font-size: 43px;
}
#top04 .cont .right .txt {
	font-size: 26px;
	margin: 20px 0 40px;
}

#top04 .cont .right .btn {
	width: 100%;
	max-width: 640px;
	height: 190px;
}
#top04 .cont .right .btn a {
	width: 100%;
	height: 100%;
	background-color: #000000;
	background-image: url(../img/common/sign_red.svg);
	background-position: right 60px center;
	background-repeat: no-repeat;
	background-size: 20px auto;
	padding: 10px 100px 10px 80px;
	transition: 0.5s;
}
#top04 .cont .right .btn a:hover {
	background-position: right 55px center;
	transition: 0.5s;
}
#top04 .cont .right .btn_txt01 {
	color: #b8b8b8;
	font-size: 35px;
	margin-right: 40px;
}
#top04 .cont .right .btn_txt02 {
	color: #ffffff;
	font-size: 70px;
}

#top04 .cont {
	position: relative;
}
#top04 .fade_img {
	position: absolute;
}
#top04 .fade_img.img01 {
	left: 10%;
	top: -160px;
}
#top04 .fade_img.img02 {
	left: -16%;
	top: -30px;
}
#top04 .fade_img.img03 {
	left: 21%;
	top: 85px;
}

@media screen and (max-width: 1400px) {
	#top04 .cont {
		max-width: 1000px;
		justify-content: center;
	}
	#top04 .cont .left {
		width: 100%;
	}
	#top04 .cont .left .img {
		text-align: center;
		position: static;
	}

	#top04 .fade_img.img01 {
		left: 36%;
		top: -195px;
	}
	#top04 .fade_img.img02 {
		left: 0;
		top: -120px;
	}
	#top04 .fade_img.img03 {
		left: auto;
		right: 0;
		top: 10px;
	}

	#top04 .cont .right {
		width: 100%;
		max-width: 640px;
		margin-top: 40px;
	}
	#top04 .cont .right .ttl {
		font-size: 40px;
	}
}

@media screen and (max-width: 1000px) {
	#top04 .cont .left {
		padding-top: 120px;
	}

    #top04 .fade_img.img01 {
		width: 270px;
        left: 36%;
        top: -60px;
    }
    #top04 .fade_img.img02 {
		width: 250px;
        left: -10px;
        top: 30px;
    }

    #top04 .fade_img.img03 {
        width: 270px;
        top: 160px;
    }


	#top04 .cont .right .ttl {
		font-size: 32px;
	}

	#top04 .cont .right .txt {
		font-size: 24px;
		margin: 10px 0 20px;
	}



	#top04 .cont .right .btn {
		max-width: 480px;
		height: 140px;
		margin: 0 auto;
	}
	#top04 .cont .right .btn a {
		background-position: right 50px center;
		background-size: 16px auto;
		padding: 10px 80px 10px 60px;
	}
	#top04 .cont .right .btn a:hover {
		background-position: right 45px center;
	}
	#top04 .cont .right .btn_txt01 {
		color: #b8b8b8;
		font-size: 26px;
		margin-right: 20px;
	}
	#top04 .cont .right .btn_txt02 {
		color: #ffffff;
		font-size: 54px;
	}

}


@media screen and (max-width: 768px) {
    #top04 .fade_img.img01 {
		width: 230px;
    }
    #top04 .fade_img.img02 {
		width: 170px;
    }

    #top04 .fade_img.img03 {
        width: 180px;
        top: 35px;
        right: -20px;
    }

	#top04 .cont .right .ttl {
		font-size: 21px;
	}

	#top04 .cont .right .txt {
		font-size: 18px;
	}

	#top04 .cont .right .btn {
		height: 120px;
	}
	#top04 .cont .right .btn a {
		padding-left: 50px;
	}
	#top04 .cont .right .btn_txt01 {
		font-size: 18px;
		margin-right: 15px;
	}
	#top04 .cont .right .btn_txt02 {
		font-size: 48px;
	}

	#voice_slide ul li .img {
		width: 100%;
		height: 100%;
		top: auto;
		bottom: 116px;
	}
	#voice_slide ul li .img img {
		width: 100%;
		height: auto;
		position: absolute;
		left: 0;
		bottom: 0;
	}

	#voice_slide ul li .cloud02 {
		top: auto;
		bottom: 100px;
		z-index: 1;
	}


}



#top05 {
	background-image: url(../img/top/top05_bg.jpg);
	background-position: center;
	background-repeat: no-repeat;
}
#top05 .t_ttl {
	color: #ffffff;
	font-size: 60px;
	font-weight: 900;
	text-align: center;
}
#top05 .cont .video {
	width: 100%;
	max-width: 960px;
	margin: 0 auto;
}
#top05 .cont .video video {
	width: 100%;
	height: 100%;
}


@media screen and (max-width: 1000px) {
	#top05 .t_ttl {
		font-size: 36px;
	}
}

@media screen and (max-width: 768px) {
	#top05 .t_ttl {
		font-size: 28px;
	}

}


#top06 {
	background-image: url(../img/top/top06_bg.png);
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	margin-top: 90px;
}
#top06 .cont {
	position: relative;
	z-index: 3;
}
#top06 .cont .t_txt .txt {
	display: inline-block;
	background-color: #ffffff;
	font-size: 26px;
	font-weight: 900;
	padding: 60px 50px;
}

#top06 .section_cont {
	position: relative;
}
#top06 .fade_img {
	position: absolute;
}
#top06 .fade_img.img01 {
	left: 30%;
	top: -160px;
}
#top06 .fade_img.img02 {
	left: -10%;
	bottom: -100px;
}
#top06 .fade_img.img03 {
	right: -10%;
	top: 20px;
}

@media screen and (max-width: 1400px) {
	#top06 .fade_img.img01 {
		left: 40%;
		top: -250px;
	}
	#top06 .fade_img.img02 {
		left: -10%;
		bottom: -200px;
		z-index: 1;
	}
	#top06 .fade_img.img03 {
		display: none;
	}

}

@media screen and (max-width: 1000px) {
	#top06 {
		background-position: left center;
	}
	#top06 .cont .t_txt .txt {
		font-size: 20px;
		padding: 40px 30px;
	}

    #top06 .fade_img.img02 {
        bottom: -120px;
        width: 310px;
    }

}


/* company
------------------------------------------------------------*/
#company01 .left {
	width: 30.15%;
}
#company01 .left .img {
	position: relative;
	display: flex;
	justify-content: center;
}
#company01 .left .line {
	width: 114%;
	position: absolute;
	top: 93%;
}
#company01 .right {
	width: 63.84%;
}
#company01 .sign {
	font-size: 24px;
	font-weight: 900;
	text-align: right;
	margin-top: 40px;
}

#company04 .cont .map {
	width: 100%;
	height: 500px;
	margin-bottom: 30px;
}
#company04 .cont .ttl {
	font-size: 38px;
	font-weight: 900;
}
#company04 .cont .box {
	margin-top: 20px;
}
#company04 .cont .box .info {
	width: 50%;
	font-size: 20px;
}


table.table01 {
	width: 100%;
}
table.table01 th,
table.table01 td {
	font-size: 18px;
	padding: 15px;
}
table.table01 th {
	width: 150px;
	border-bottom: 2px solid #a6a6a6;
	padding-left: 0;
}
table.table01 td {
	 border-bottom: 1px solid #e5e5e5;
}



@media screen and (max-width: 1000px) {
	#company04 .cont .box .info {
		width: 100%;
	}

}

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


	#company01 .left {
		width: 80%;
		max-width: 320px;
		margin: 0 auto 60px
	}
	#company01 .left .line {
		width: 120%;
		height: 68px;
		max-width: 340px;
	}

	#company01 .right {
		width: 100%;
	}

	#company01 .sign {
		font-size: 20px;
		margin-top: 20px;
	}


	table.table01 tr {
		display: flex;
		flex-wrap: wrap;
	}
	table.table01 th,
	table.table01 td {
		width: 100%;
		font-size: 16px;
		padding: 5px 10px;
	}
	table.table01 th {
		font-weight: 900;
	}



	#company04 .cont .map {
		height: 240px;
	}
	#company04 .cont .ttl {
		font-size: 20px;
	}
	#company04 .cont .box {
		margin-top: 10px;
	}
	#company04 .cont .box .info {
		font-size: 16px;
	}

}



/* works
------------------------------------------------------------*/
.works .s_txt {
	color: #ffffff;
	font-size: 26px;
	font-weight: 900;
}

#works01 {
	background-color: #0d2261;
	background-image: url(../img/works/works01_bg.png);
	background-position: center top 180px;
	background-repeat: no-repeat;
}
#works01 .cont {
	color: #ffffff;
}
#works01 .cont .box {
	margin: 30px 0 50px;
}
#works01 .cont .box .item {
	display: inline-block;
	height: 55px;
	background-color: #ffffff;
	border-radius: 30px;
	color: #0744ad;
	font-size: 20px;
	font-weight: 900;
	line-height: 55px;
	margin-right: 10px;
	padding: 0 20px;
}
#works01 .cont .box .etc {
	font-size: 26px;
	font-weight: 900;
	line-height: 60px;
	margin-left: 5px;
}

#works_slide {
	width: calc(100% + 60px);
	margin: 0 0 100px -30px;
}
#works_slide ul li {
	width: 180px !important;
	margin: 0 10px;
}
#works_slide ul li .img_ttl {
	font-size: 15px;
	text-align: center;
	margin-top: 5px;
}

#works02 .cont:not(:first-child) {
	margin-top: 100px;
}
#works02 .cont .left {
	width: 42.3%;
}
#works02 .cont .left_ttl {
	color: #0d2261;
	font-size: 40px;
	font-weight: 900;
	margin-bottom: 30px;
}
#works02 .cont .box {
	padding-left: 40px;
}
#works02 .cont .box .ttl {
	min-height: 80px;
	font-size: 20px;
	font-weight: 900;
}
#works02 .cont .box .sub {
	color: #0d2261;
	font-size: 26px;
	font-weight: 900;
	margin-top: 10px;
	margin-bottom: 10px;
}

#works02 .cont .right {
	width: 47.69%;
}

#works03 {
	margin-top: -70px;
	position: relative;
}
#works03::before,
#works03::after {
	content: '';
	width: 100%;
	height: 100%;
	position: absolute;
	left: 0;
	top: 0;
}
#works03::before {
	background: linear-gradient(180deg, transparent 1000px, #0f2e82 1000px);
}
#works03::after {
	background-image: url(../img/works/works03_bg.png);
	background-position: center top;
	background-repeat: no-repeat;
}
#works03 section {
	padding-top: 430px;
	position: relative;
	z-index: 1;
}

#works03 .s_txt {
	text-align: center;
}

#works03 .cont {
	width: 100%;
	max-width: 1490px;
	margin: 60px auto 0;
}
#works03 .cont .box {
	width: 23.4805%;
	margin-right: 2.026%;
}
#works03 .cont .box:nth-child(4n) {
	margin-right: 0;
}
#works03 .cont .box:nth-child(n+5) {
	margin-top: 40px;
}
#works03 .cont .box .ttl {
	color: #ffffff;
	font-size: 20px;
	font-weight: 900;
	margin-top: 10px;
}

#works04 {
	background-color: #0d2261;
	color: #ffffff;
	overflow: hidden;
}

#works04 .cont {
	width: 100%;
	max-width: 1520px;
	margin: 0 auto;
}
#works04 .cont .left {
	width: 44.74%;
	padding-top: 30px;
}
#works04 .cont .left_ttl {
	font-size: 50px;
	font-weight: 900;
	margin-bottom: 40px;
}
#works04 .cont .box {
	padding-left: 50px;
}
#works04 .cont .box .ttl {
	font-size: 26px;
	font-weight: 900;
	margin-bottom: 40px;
}

#works04 .cont .right {
	width: 55.26%;
}

#works04 .cont_ttl {
	margin: -20px 0 20px;
	position: relative;
}
#works04 .cont_ttl .ja {
	font-size: 50px;
	font-weight: 900;
	text-align: center;
}
#works04 .cont_ttl .en {
	color: #666666;
	font-size: 140px;
	font-weight: 900;
	text-align: center;
	line-height: 1;
}

#works04 .cont_txt .img_left,
#works04 .cont_txt .img_right {
	width: calc((100% - 550px) / 2);
}
#works04 .cont_txt .img_left {
	text-align: right;
	padding-right: 50px;
}
#works04 .cont_txt .img_right {
	text-align: right;
}
#works04 .cont_txt .img_right img {
	margin-right: -100px;
}


@media (max-width: 1400px) {

	#works02 .cont .left {
		width: 47%;
	}
	#works02 .cont .box {
		padding-left: 0;
	}

	#works04 .cont .left {
		width: 100%;
		padding-top: 0;
	}

	#works04 .cont .right {
		width: 100%;
		text-align: center;
		margin-top: 40px;
	}

	#works04 .cont .box {
		padding-left: 0;
	}


	#works04 .cont_ttl .en {
		font-size: 120px;
	}


}

@media (max-width: 1200px) {

	#works03 {
		margin-top: -200px;
	}


	#works04 .cont_ttl .en {
		font-size: 100px;
	}
}

@media (max-width: 1000px) {

	#works01 .cont .box .item {
		font-size: 18px;
	}

	#works04 .cont_ttl .en {
		font-size: 80px;
	}
}



@media (max-width: 768px) {

	.works .s_txt {
		font-size: 18px;
	}

	#works01 .cont .box .item {
		width: 100%;
		height: 48px;
		font-size: 16px;
		line-height: 48px;
		margin-right: 0;
		margin-bottom: 10px;
	}

	#works01 .cont .box .etc {
		width: 100%;
		font-size: 18px;
		text-align: right;
		line-height: 30px;
		margin-left: 0;
		padding: 0 20px;
	}


	#works02 .cont:not(:first-child) {
		margin-top: 40px;
	}
	#works02 .cont .left {
		width: 100%;
	}
	#works02 .cont .left_ttl {
		font-size: 28px;
		margin-bottom: 10px;
	}
	#works02 .cont .box .ttl {
		min-height: 1px;
		font-size: 18px;
	}
	#works02 .cont .box .sub {
		font-size: 20px;
		margin-bottom: 5px;
	}

	#works02 .cont .right {
		width: 100%;
		margin-top: 20px;
	}


	#works03 .cont .box {
		width: 32.3%;
		margin-right: 1.55%;
	}
	#works03 .cont .box:nth-child(4n) {
		margin-right: 1.55%;
	}
	#works03 .cont .box:nth-child(3n) {
		margin-right: 0;
	}
	#works03 .cont .box:nth-child(n+4) {
		margin-top: 30px;
	}
	#works03 .cont .box .ttl {
		font-size: 16px;
	}

	#works04 .cont .left {
		width: 100%;
	}
	#works04 .cont .left_ttl {
		font-size: 24px;
		margin-bottom: 20px;
	}
	#works04 .cont .box .ttl {
		font-size: 18px;
		margin-bottom: 20px;
	}

	#works04 .cont .right {
		width: 100%;
	}

	#works04 .cont_ttl .ja {
		font-size: 32px;
	}
	#works04 .cont_ttl .en {
		max-width: 320px;
		font-size: 60px;
		margin: 0 auto;
	}

	#works04 .cont_txt .img_left,
	#works04 .cont_txt .img_right {
		width: calc((100% - 550px) / 2);
	}
	#works04 .cont_txt .img_left {
		text-align: right;
		padding-right: 50px;
	}
	#works04 .cont_txt .img_right {
		text-align: right;
	}
	#works04 .cont_txt .img_right img {
		margin-right: -100px;
	}
}


@media (max-width: 480px) {
	#works03 .cont .box {
		width: 49.5%;
		margin-right: 1%;
	}
	#works03 .cont .box:nth-child(3n) {
		margin-right: 1%;
	}
	#works03 .cont .box:nth-child(2n) {
		margin-right: 0;
	}
	#works03 .cont .box:nth-child(n+3) {
		margin-top: 30px;
	}
	#works03 .cont .box .ttl {
		font-size: 16px;
	}

}



/* voice
------------------------------------------------------------*/
.voice article {
	overflow: hidden;
}
.voice section {
	background-image: url(../img/common/img_bg.png);
	background-position: center top;
	background-repeat: no-repeat;
}
.voice .cont .left {
	width: 46.15%;
	text-align: center;
	position: relative;
}
.voice .cont .left .num {
	position: absolute;
	left: 0;
	top: 0;
}

.voice .cont .right {
	width: 43%;
	padding-top: 30px;
}
.voice .cont .right.pb {
	padding-top: 0;
	padding-bottom: 30px;
}
.voice .cont .right .type {
	width: 200px;
	height: 70px;
	background-color: #0744ad;
	border-radius: 35px;
	color: #ffffff;
	font-size: 22px;
	text-align: center;
	line-height: 68px;
	margin-right: 20px;
}
.voice .cont .right .type_sub {
	color: #d2d2d2;
	font-size: 26px;
	font-weight: 900;
	line-height: 1;
}
.voice .cont .right .type_ttl {
	color: #3548a6;
	font-size: 35px;
	font-weight: 900;
	line-height: 1.2;
}

.voice .cont .right .ttl {
	color: #3548a6;
	font-size: 36px;
	font-weight: 900;
	margin-top: 30px;
	margin-bottom: 40px;
}

.voice .cont02 {
	margin-top: 0;
	margin-bottom: 40px;
	padding: 120px 0 80px;
	position: relative;
}
.voice .cont02::before {
    content: '';
    width: 100vw;
    height: 100%;
    background-color: #0f3e90;
    position: absolute;
    left: 50%;
    right: 0;
    top: 0;
    margin: auto;
    transform: translate(-50%, 0%);
	clip-path: polygon(0 80px, 100% 0, 100% calc(100% - 80px), 0 100%);
}
.voice .cont02 .right {
	position: relative;
}
.voice .cont02 .right .txt {
	color: #ffffff;
}

.voice .cont04 {
	background-color: #0d2261;
	border-radius: 0 0 0 40px;
	color: #ffffff;
	margin-top: 180px;
	padding-bottom: 5px;
	position: relative;
}
.voice .cont04::before,
.voice .cont04::after {
	content: '';
	background-color: #0d2261;
	position: absolute;
}
.voice .cont04::before {
	width: 64px;
	height: 64px;
	left: 0;
	top: -63px;
	clip-path: polygon(100% 0, 100% 100%, 0 100%);
}
.voice .cont04::after {
	width: 50vw;
	height: 100%;
	left: 50%;
	top: 0;
}
.voice .cont04 .center {
	position: relative;
	z-index: 1;
}
.voice .cont04 .center {
	padding-top: 20px;
}
.voice .cont04 .img {
	text-align: center;
	margin-top: -240px;
}
.voice .cont04 .ttl {
	font-size: 38px;
	font-weight: 900;
	text-align: center;
	position: absolute;
	left: 0;
	right: 0;
	bottom: 40px;
}
.voice .cont04 .box {
	width: 33.33%;
	background-image: url(../img/voice/voice_tech_bg.png);
	background-position: center bottom;
	background-repeat: no-repeat;
	padding-bottom: 60px;
	position: relative;
	opacity: 0;
} 
.voice .cont04 .box_ttl {
	font-size: 28px;
	font-weight: 900;
	transform: rotate(-5deg);
}
.voice .cont04 .box_sub {
	max-width: 310px;
	font-size: 21px;
	font-weight: 700;
	text-align: right;
	margin: 0 auto;
}
.voice .cont04 .box_img {
	text-align: center;
	margin: 25px 0;
	padding: 0 20px;
}


.is_visible.animation_buruburu {
	animation: buruburu 1s linear forwards;
	scale: 1;
}

@keyframes buruburu {
	  0% {
			transform:translateX(0);
			opacity: 0;
		 }
	  7% {	transform:translateX(-10px); }
		
	 14% {	transform:translateX(10px); }
	 20% {	transform:translateX(-10px); }
	 32% {
			transform:translateX(10px);
			opacity: 1;
		 }
	 40% {	transform:translateX(0px); }
	100% {	opacity: 1; }
}


@media screen and (max-width: 1400px) {
	.voice .cont .right {
		width: 48%;
	}
	.voice .cont04 .center {
		padding-left: 15px;
		padding-right: 15px;
	}
	.voice .cont04 .box_ttl {
		font-size: 25px;
	}
}

@media screen and (max-width: 1200px) {
	.voice .cont .right .type {
		width: 180px;
		height: 60px;
		font-size: 20px;
		line-height: 58px;
	}
	.voice .cont .right .type_sub {
		font-size: 24px;
	}
	.voice .cont .right .type_ttl {
		font-size: 28px;
	}

	.voice .cont .right .ttl {
		font-size: 30px;
	}

	.voice .cont04 .box {
		background-position: center bottom 60px;
		background-size: cover;
	}
	.voice .cont04 .box_ttl {
		font-size: 20px;
	}
	.voice .cont04 .box_sub,
	.voice .cont04 .box_img,
	.voice .cont04 .box_txt {
		padding: 0 10px;
	}
	.voice .cont04 .box_sub {
		font-size: 16px;
	}

}


@media (max-width: 1000px) {
	.voice .cont.reverse {
		flex-flow: wrap;
	}

	.voice .cont .left {
		width: 100%;
	}

	.voice .cont .right {
		width: 100%;
	}
	.voice .cont .right.pb {
		padding-top: 30px;
		padding-bottom: 15px;
	}

	.voice .cont04 .box {
		width: 50%;
	}

}

@media (max-width: 768px) {
	.voice .cont .left .num {
		width: 100px;
		z-index: 1;
	}

	.voice .cont .right .type {
		width: 140px;
		height: 54px;
		font-size: 16px;
		line-height: 54px;
	}
	.voice .cont .right .type_sub {
		font-size: 20px;
	}
	.voice .cont .right .type_ttl {
		font-size: 24px;
	}

	.voice .cont .right .ttl {
		font-size: 21px;
		margin-bottom: 10px;
	}

	.voice .cont04::before {
		content: none;
	}
	.voice .cont04::after {
		width: 100vw;
		height: 100%;	left: -20px;
	}

	.voice .cont04 .center {
		padding-left: 0;
		padding-right: 0;
	}
	.voice .cont04 .img {
		margin-top: -200px;
	}

	.voice .cont04 .ttl {
		font-size: 20px;
	}
	.voice .cont04 .box {
		background-position: center bottom 100px;
		background-size: 120% auto;
		padding-bottom: 45px;
	}
	.voice .cont04 .box_ttl {
		font-size: 18px;
	}
	.voice .cont04 .box_img {
		margin: 5px 0;
	}
}



/* recruit
------------------------------------------------------------*/
#recruit01 {
	background-image: url(../img/common/img_bg.png);
	background-position: center;
	background-repeat: no-repeat;
	position: relative;
}
#recruit01 section {
	padding-bottom: 80px;
}
#recruit01 .cont {
	width: 100%;
	background-color: #0d2261;
	color: #ffffff;
	padding: 60px;
	position: relative;
}
#recruit01 .img {
	position: absolute;
}
#recruit01 .img.lt {
	left: -240px;
	top: -120px;
}
#recruit01 .img.rb {
	right: -160px;
	bottom: -80px;
}

#recruit01 .cont .box {
	position: relative;
}
#recruit01 .cont .ttl {
	font-size: 45px;
	font-weight: 900;
	text-align: center;
}
#recruit01 .cont .txt {
	font-size: 18px;
	margin-top: 40px;
}

#recruit02 .cont .txt {
	font-size: 26px;
	text-align: center;
	margin-top: 50px;
	margin-bottom: 40px;
}


@media screen and (max-width: 1200px) {
	#recruit01 .img.rb {
		max-width: 540px;
	}
}

@media (max-width: 1000px) {
	#recruit01 .cont {
		padding-left: 40px;
		padding-right: 40px;
	}
	#recruit01 .img.rb {
		right: -210px;
		bottom: -300px;
	}
}

@media (max-width: 768px) {
	#recruit01 section {
		padding-bottom: 0;
	}
	#recruit01 .img {
		display: none;
	}
	#recruit01 .cont {
		width: calc(100% + 40px);
		margin-left: -20px;
		padding: 60px 20px;
	}
	#recruit01 .cont .ttl {
		font-size: 28px;
	}
	#recruit01 .cont .txt {
		margin-top: 30px;
	}
	#recruit02 .cont .txt {
		font-size: 18px;
		text-align: left;
		margin-top: 40px;
		margin-bottom: 20px;
	}
}



/* blog
------------------------------------------------------------*/
#blogList {
	border-top: 1px solid #a6a6a6;
}
#blogList li {
	border-bottom: 1px solid #a6a6a6;
	padding: 15px 20px;
}
.up_date {
	width: 120px;
	color: #0d2261;
	font-size: 20px;
	font-weight: 900;
	margin-right: 30px;
}
.up_ttl {
	width: calc(100% - 150px);
	font-size: 20px;
	font-weight: 900;
}

#up_ttl {
	border-bottom: 1px solid #0d2261;
	color: #0d2261;
	font-size: 20px;
	font-weight: 900;
	margin-bottom: 15px;
	padding-bottom: 15px;
}
#up_date {
	text-align: right;
}

.back_btn {
	width: 180px;
	height: 50px;
	margin: 80px auto 0;
}
.back_btn a {
	width: 100%;
	height: 100%;
	background-color: #0d2261;
	color: #ffffff;
	font-size: 18px;
	font-weight: 700;
}

@media (max-width: 768px) {
	.up_ttl {
		width: 100%;
	}
}