html {font-size: 625%;}

/*リセット*/
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 {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	vertical-align: baseline;
	background: transparent;
}

body {
	font-family: source-han-serif-japanese, serif;
	/* font-family: 游明朝, "Yu Mincho", YuMincho, "Hiragino Mincho ProN", "Hiragino Mincho Pro", HGS明朝E, メイリオ, Meiryo, serif; */
	font-size: .16em;
	color:#231815;
	background: #fff;
	letter-spacing: .1em;
	padding: 14px;
	font-feature-settings: "palt";
	font-weight: 500;
}

/*共通*/
ol
,ul {
	list-style: none;
}
a{
	text-decoration: none;
}
section{
	margin-bottom: 1rem;
}
.wrap{
	max-width: 1050px;
	width: 96%;
	margin: 0 auto;
}
table{
	width: 100%;
}
th
,td{
	padding: 1.5em .5em .5em;
	text-align: left;
	vertical-align: top;
	font-family: 游ゴシック, YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, sans-serif;
}
th{
	width: 30%;
}
td{
	width: 70%;
}
input
,textarea{
	width: calc(100% - 20px);
	font-size: .16rem;
	padding-left: 10px;
}
input{
	height: 50px;
}
textarea{
	height: 300px;
}
.half{
	width: 49%;
	display: inline-block;
}
.relative{
	position: relative;
}
/*sub_page*/

/*font*/
.gothic{
	font-family: 游ゴシック, YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, sans-serif;
	font-weight: 500;
	}

/*color*/
.white{
	color: #fff;
}


/*link_button*/
.bg_about .relative{
	position: relative;
}
.link_button{
	border: 1px solid #fff;
	border-radius: 50px;
	width: 80px;
	height: 80px;
	display: flex;
	justify-content: center;
	align-items: center;
	position: absolute;
	top: 0;
	bottom: 0;
	right: 0;
	margin: auto;
}
.link_button::after{
	content: "";
	width: 20px;
	height: 6px;
	border-bottom: 2px solid #fff;
  border-right: 2px solid #fff;
  transform: skew(45deg);
	transition: all 0.5s;
}
.link_button:hover::after{
	border-color: #1b2d76;
}
.half .link_button{
	position: absolute;
	border-color: #ccc;
}
.half .link_button::after{
	border-color: #ccc;
}
.half .link_button:hover::after{
	border-color: #1b2d76;
}
.relative_button{
	height: 80px;
}

/*header*/
.hamburger
,.globalMenuSp{
	display: none;
}
header{
	padding: .3rem;
	position: relative;
	z-index: 2;
}
.logo{
	width: 20%;
	display: inline-block;
	vertical-align: middle;
}
nav{
	display: inline-block;
	width: 79%;
	vertical-align: middle;
}
nav ul{
	display: flex;
	flex-direction: row;
	justify-content: flex-end;
}
nav ul li{
	margin-left: .5rem;
	text-align: center;
}
nav ul li a{
	color: inherit;
	transition: .5s;
}
nav span{
	display: block;
}
nav .ja{
	font-family: 游ゴシック, YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, sans-serif;
	font-size: .12rem;
}
nav li a:hover{
	color: #54c2f0;
}
/*footer*/
footer{
	background: #1a1a1a;
	padding: 1rem 0 .3rem;
	color: #fff;
}
footer .half{
	margin-bottom: .5rem;
}
footer .half img{
	width: 34%;
}
footer .half.gothic{
	text-align: right;
}
footer a{
	color: #fff;
}
footer .copy{
	width: 100%;
	display: block;
	text-align: right;
	font-size: .14rem;
	color: #ccc;
}
/*common_area*/
.common_area{
	background: -moz-linear-gradient(left, #1b2d76 40%, #54c2f0);
  background: -webkit-linear-gradient(left, #1b2d76 40%, #54c2f0);
  background: linear-gradient(to right, #1b2d76 40%, #54c2f0);
	color: #fff;
	padding: 1rem 0;
	margin-bottom: 0;
}
.common_area .title{
	margin-bottom: 0;
}
.common_area .half .title h1::before
,.common_area .half .title h1::after{
	width: 4%;
}
.common_area .half .link_button
,.common_area .link_button::after{
	border-color: #fff;
}
.common_area .half .title h1{
	padding-left: 15%;
}
.common_area .half .title h1::after{
	left: 4%;
}
/*index*/
.top_main{
	background: url("../images/top_main.jpg") center center /cover no-repeat;
	height: 90vh;
	overflow: hidden;
	position: relative;
}
.top_main .bg_black{
	position: absolute;
	background: rgba(0,0,0,0.5);
	width: 50%;
	height: 150%;
	transform: rotate(-15deg);
	overflow: hidden;
	top: -90px;
}
.top_main .wrap{
	position: relative;
	z-index: 2;
}
.catch{
	color: #fff;
	width: 50%;
	position: absolute;
	height: fit-content;
	bottom: -50vh;
}
.catch h1{
	font-size: clamp(.24rem, 5vw, .54rem);
}
.catch h2{
	font-size: clamp(.16rem, 3vw, .3rem);
}
.title{
	margin-bottom: .5rem;
}
.title h1{
	font-size: clamp(.2rem, 4vw, .6rem);
	position: relative;
	padding-left: 6%;
	margin-bottom: .2rem;
}
.title h1::before
,.title h1::after{
	position: absolute;
	content: "";
	width: 2%;
	height: clamp(10px, 2vw, 20px);
	top: 0;
	bottom: 0;
	margin: auto;
	filter: drop-shadow(1px 1px 2px #ccc);
}
.title h1::before{
	background: #54c2f0;
	left: 0;
}
.title h1::after{
	background: #1b2d76;
	left: 2%;
}
.divide{
	width: 60%;
	margin-left: auto;
}
.divide h2{
	font-size: clamp(.24rem, 4vw, .34rem);
	margin-bottom: .2rem;
}
.divide h3{
	font-size: clamp(.14rem, 2vw, .18rem);
}
.about_wrap{
	margin-bottom: .5rem;
}
.bg_about{
	background: url("../images/bg_about.jpg") center center /cover no-repeat;
	padding: 2rem 0;
}
.about_wrap .title{
	margin-bottom: 0;
}
.bg_about .title h1{
	margin-bottom: 0;
}
.bg_about .gothic{
	color: #fff;
	font-weight: bold;
	display: block;
	font-size: clamp(.24rem, 4vw, .34rem);
}
.bg_navy{
	background: -moz-linear-gradient(left, #fff 90%, #1b2d76 50%);
	background: -webkit-linear-gradient(left, #fff 90%, #1b2d76 50%);
}
.bg_light_blue{
	background: -moz-linear-gradient(160deg, #fff 70%, #54c2f0 50%);
	background: -webkit-linear-gradient(160deg, #fff 70%, #54c2f0 50%);
}
.bg_linear{
	width:100%;
	height:100%;
	background-repeat: no-repeat;
	position: relative;
}
.bg_navy .half:nth-child(2){
	position: absolute;
	top: 0;
	bottom: 0;
	margin: auto;
	height: fit-content;
}
.bg_light_blue .half:first-child{
	position: absolute;
	top: 0;
	bottom: 0;
	margin: auto;
	height: fit-content;
}
.bg_linear .half:nth-child(2) .title{
	width: 100%;
}
.bg_linear img{
	width: 100%;
}
.bg_navy .inside{
	width: 50%;
	margin-left: 10%;
}
.bg_light_blue .inside{
	width: 50%;
	margin-left: 40%;
}
.bg_light_blue .half:nth-child(2){
	width: 100%;
}
.bg_light_blue .half:nth-child(2) img{
	width: 50%;
	margin-left: auto;
	display: block;
}
.half .title h1{
	padding-left: 20%;
}
.half .title h1::before, .half .title h1::after{
	width: 6%;
}
.half .title h1::after{
	left: 6%;
}
.title p{
	font-family: 游ゴシック, YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, sans-serif;
}

/*about*/
.sub_main{
	background:linear-gradient(120deg, #54c2f0 20%, #fff 10%, rgba(255, 255, 255, 0) 80%, rgba(255, 255, 255, 0) 40%)
 ,linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, #fff 10%, #fff 85%, #1b2d76 85%);
	padding: 1rem 0;
}
.sub_title h1{
	font-size: clamp(.24rem, 6vw, .6rem);
	letter-spacing: .04rem;
}
.about_img .wrap{
	background: url("../images/about_main.jpg") center center /cover no-repeat;
	height: 50vh;
}
.bg_gray{
	background: linear-gradient(90deg, #f1f1f1 0%, #f1f1f1 80%, #fff 20%, #fff 100%);
	padding: 1rem 0;
}
.headings{
	position: relative;
	border-bottom: 1px solid #ccc;
	margin-bottom: .3rem;
}
.headings h1{
	padding-left: 5%;
	text-align: left;
	font-size: clamp(.2rem, 2vw, .3rem);
	font-weight: normal;
}
.headings h1::before
,.headings h1::after{
	position: absolute;
  content: "";
  width: 1.5%;
  height: clamp(10px, 2vw, 15px);
  top: 0;
  bottom: 0;
  margin: auto;
}
.headings h1::before{
	background: #54c2f0;
  left: 0;
}
.headings h1::after{
	background: #1b2d76;
  left: 1.5%;
}

/*business*/
.detail_box{
	background: #f2f2f2;
	width: 50%;
	padding: .5rem;
	position: absolute;
	bottom: 0;
	right: 0;
}
.business_content .relative{
	height: 700px;;
}
.business_content img{
	vertical-align: bottom;
	width: 80%;
}
.business_content span{
	position: absolute;
	top: 0;
	right: 0;
	color: #1b2d76;
	opacity: .1;
	font-size: 2rem;
}
.business_content li{
	margin-bottom: 1rem;
}
.business_content li:nth-child(2) img{
	margin-left: 20%;
}
.business_content li:nth-child(2) .detail_box{
	left: 0;
}
.business_content .box h1{
	margin-bottom: .3rem;
}

/*recruit*/
.recruit_img .wrap{
	background: url("../images/recruit_main.jpg") center top /cover no-repeat;
	height: 50vh
}
.entry_button
,.square_button{
	display: block;
	width: 200px;
	padding: .1rem;
	border: 1px solid #4d4d4d;
	border-radius: 25px;
	background: #fff;
	color: #4d4d4d;
	text-align: center;
	transition: all 0.5s;
}
.entry_button:hover
,.square_button:hover{
	background: #4d4d4d;
	color: #fff;
	border-color: #4d4d4d;
}
.recruit table{
	margin-bottom: 1rem;
}

/*contact*/
.form_title{
	display: block;
}
.border input{
	display: inline-block;
	width: fit-content;
	vertical-align: middle;
	margin: 0;
}
form .border{
	border: 2px solid #ccc;
	padding: 0 0.2rem;
	width: fit-content;
	margin-bottom: .2rem;
	border-radius: 4px;
	display: block;
}
form label p{
	display: inline-block;
}
form h1{
	font-size: inherit;
	display: inline-block;
	margin: 0 10px 10px 0;
}
form div{
	margin-bottom: .4rem;
}
textarea{
	padding: 10px;
}
.square_button{
	margin: 0 auto;
}
form .border{
	padding: .1rem .2rem;
}
.border input{
	height: fit-content;
}





@media screen and (max-width: 767px) {
	/*共通*/
	th,td{
		display: block;
		width: calc(100% - 1em);
	}
	table tr:first-child th{
		padding-top: 0;
	}
	section{
		margin-bottom: .4rem;
	}
	.half{
		width: 100%;
	}
	/*font*/


	/*link_button*/

	/*header*/
	header{
		padding: .1rem;
	}
	header nav{
		display: none;
	}
	header .logo{
		filter:drop-shadow(1px 1px 2px black);
		width: 50%;
	}
	header nav.globalMenuSp{
		display: block;
	}

	.hamburger {
	  display : block;
	  position: fixed;
	  z-index : 3;
	  right : 13px;
	  top   : 12px;
	  width : 42px;
	  height: 42px;
	  cursor: pointer;
	  text-align: center;
	  -webkit-transition: 0.5s all;
	  -moz-transition   : 0.5s all;
	  transition        : 0.5s all;
	}
	.hamburger span {
	  display : block;
	  position: absolute;
	  width   : 30px;
	  height  : 2px ;
	  left    : 6px;
	  background : #333;
	}
	.hamburger span:nth-child(1) {
	  top: 10px;
	}
	.hamburger span:nth-child(2) {
	  top: 20px;
	}
	.hamburger span:nth-child(3) {
	  top: 30px;
	}

	/* ナビ開いてる時のボタン */
	.hamburger.active{
	  -webkit-transform: rotate(360deg);
	  transform: rotate(360deg);
	}
	.hamburger.active span{
		background: #fff;
	}
	.top_main .catch.active{
		display: none;
	}
	.hamburger.active span:nth-child(1) {
	  top : 16px;
	  left: 6px;
	  -webkit-transform: rotate(-45deg);
	  -moz-transform   : rotate(-45deg);
	  transform        : rotate(-45deg);
	}
	.hamburger.active span:nth-child(2) {
	  top: 16px;
	  -webkit-transform: rotate(45deg);
	  -moz-transform   : rotate(45deg);
	  transform        : rotate(45deg);
	}
	.hamburger.active span:nth-child(3) {
	  opacity: 0;
	}
	nav.globalMenuSp {
	  position: fixed;
	  z-index : 2;
	  top  : 0;
	  right: 0;
	  color: #000;
	  background: #000;
	  text-align: center;
	  transform: translateX(100%);
	  transition: all 0.6s;
	  width: fit-content;
		height: 100%;
		padding: 0 .4rem;
	}
	nav.globalMenuSp ul {
	  background: #000;
		color: #fff;
	  margin: 0 auto;
	  padding: 20vh 0 0;
	  width: fit-content;
	  flex-direction: column;
	}
	nav.globalMenuSp ul li {
	  list-style-type: none;
	  padding: 0;
	  width: 100%;
		text-align: left;
	}
	nav.globalMenuSp ul li:last-child {
	  padding-bottom: 0;
	  border-bottom: none;
	}
	nav.globalMenuSp ul li:hover{
	  background :#ddd;
	}

	nav.globalMenuSp ul li a {
	  display: block;
	  color: #fff;
	  padding: 1em 0;
	  text-decoration :none;
		font-size: .16rem;
		font-family: YuGothic,"Hiragino Kaku Gothic ProN","Noto Sans JP",sans-serif;
	}
	nav.globalMenuSp ul li a span{
		font-size: .1rem;
		display: block;
	}

	/* このクラスを、jQueryで付与・削除する */
	nav.globalMenuSp.active {
	  transform: translateX(0%);
	}

	/*index*/
	.top_main{
		height: 60vh;
	}
	.catch{
		width: 90%;
		bottom: -30vh;
	}
	.divide{
		width: 100%;
	}
	.bg_linear{
		height: 300px;
		margin-bottom: .8rem;
	}
	.bg_linear .half{
		display: block;
	}
	.bg_navy .inside
	,.bg_light_blue .inside{
		width: 100%;
		margin-left: 0;
	}
	.bg_linear img{
		height: 170px;
	}
	.bg_navy .half:nth-child(2){
		height: 130px;
		top: auto;
	}
	.bg_linear .half:nth-child(2) .title
	,.bg_linear .half .title{
		width: 80%;
	}
	.relative_button{
		position: absolute;
		bottom: 0;
		right: 0;
	}
	.link_button{
		height: 40px;
		width: 40px;
	}
	.bg_light_blue .half:nth-child(2) img{
		width: 100%;
	}
	.bg_light_blue .inside{
		height: 130px;
	}
	.bg_light_blue .half:first-child{
		top: auto;
	}
	.bg_light_blue .half .link_button{
		top: auto;
		bottom: -30px;
	}
	.common_area{
		padding: .5rem 0;
		position: relative;
	}
	.common_area .half{
		width: 80%;
	}
	.common_area .half .link_button{
		margin-bottom: .4rem;
	}
	footer{
		padding: .5rem 0 .3rem;
	}

	/*about*/
	.sub_main{
		padding: .5rem 0;
	}
	.about_img .wrap{
		width: 100%;
	}
	.bg_gray{
		padding: .5rem 0;
	}

	/*business*/
	.business_content img{
		width: 100%;
	}
	.detail_box{
		width: calc(100% - .4rem);
		padding: .2rem;
		bottom: auto;
		left: 0;
	}
	.business_content .relative{
		height: 500px;;
	}
	.business_content li:nth-child(2) img{
		margin-left: 0;
	}
}