@charset "utf-8";
/* CSS Document */
body{
	position: relative;
}
h1.ttl01 {
    font-size: 5.8rem;
	background: linear-gradient(90deg, #d2f0ff 0%, #4da1ff 40%, #fff 80%);
  	-webkit-background-clip: text;
  	-webkit-text-fill-color: transparent;
	line-height: 1.4;
/*	text-shadow: 0 0 5px rgba(255, 255, 255, .2);*/
}
.ttl01 .small.text_c {
	font-size: 40%;
/*	text-shadow: 0 0 5px rgba(255, 255, 255, .2);*/
}
.p_small {
	background: linear-gradient(90deg, #d2f0ff 0%, #4da1ff 40%, #fff 80%);
	font-size: 2rem;
	-webkit-background-clip: text;
  	-webkit-text-fill-color: transparent;
}
.mv_box_wrap .ttl01_wrap{
	position: absolute;
	top: 50%;
	left: 0;
	transform: translateY(-50%);
	z-index: 2;
	background-color: rgba(16,34,115,.8);
	box-shadow: 0 0 6px 0 #202020;
}
.mv_box_wrap .ttl01_box {
	margin-left: 2vw;
	padding: 4rem 3rem 8rem;
}
.space_l {
	padding-left: 2.5rem;
}
.ttl02{
	font-size: 3.2rem;
	position: relative;
/*
	padding-left: 1.5rem;
*/
}
.ttl03{
	font-size: 2.8rem;
	position: relative;
	padding-left: 1.5rem;
}
.ttl02.un_line::before {
	background: #77b52d;
	content: '';
	display: block;
	width: 20%;
	height: 2px;
	position: absolute;
	bottom: -2px;
	left: 0;
	z-index: 10;
}
.ttl03.un_line::before {
	background: #77b52d;
	content: '';
	display: block;
	width: 20%;
	height: 2px;
	position: absolute;
	bottom: -2px;
	left: 0;
	z-index: 10;
}
.un_line {
	border-bottom: 2px solid #12278d;
	width: 50%;
	padding-left: 1.5rem;
}
.inline_b {
	display: inline-block;
}
h3 {
	color: #fff;
	font-size: 2.8rem;
	padding-left: 1.5rem;
}
.main_box{
	width: 95%;
	max-width: 1400px;
	margin: 0 auto;
}
.Btn_wrap{
	margin-top: 1.5rem;
}
/*mv_box*/
.mv_box_wrap {
	position: relative;
	padding-top: 0;
/*	height: 85vh;*/
}
.mv_box {
	border-radius: 0 0 0 20rem;
	width: 90%;
	margin: 0 0 0 auto;
	height: 85vh;
}
/*scroll*/ 
.scrolldown2{
    /*描画位置※位置は適宜調整してください*/
  position:absolute;
  bottom:50px;
  left:5.5%;
}

/*Scrollテキストの描写*/
.scrolldown2 span{
    /*描画位置*/
  position: absolute;
  left:-11px;
  bottom:75px;
    /*テキストの形状*/
  color: #1a1a1a;
  font-size: 1.6rem;
  letter-spacing: 0.05em;
  /*縦書き設定*/
  -ms-writing-mode: tb-rl;
    -webkit-writing-mode: vertical-rl;
    writing-mode: vertical-rl;
}


/* 丸の描写 */
.scrolldown2:before {
    content: "";
    /*描画位置*/
    position: absolute;
    bottom:0;
    left:-3px;
    /*丸の形状*/
  width:7px;
  height:7px;
  border-radius: 50%;
  background:#1a1a1a;
    /*丸の動き1.6秒かけて透過し、永遠にループ*/
  animation:
    circlemove 1.6s ease-in-out infinite,
    cirlemovehide 1.6s ease-out infinite;
}

/*下からの距離が変化して丸の全体が上から下に動く*/
@keyframes circlemove{
      0%{bottom:58px;}
     100%{bottom:-5px;}
 }

/*上から下にかけて丸が透過→不透明→透過する*/
@keyframes cirlemovehide{
      0%{opacity:0}
     50%{opacity:1;}
    80%{opacity:0.9;}
  100%{opacity:0;}
 }

/* 線の描写 */
.scrolldown2:after{
  content:"";
    /*描画位置*/
  position: absolute;
  bottom:0;
  left:0;
    /*線の形状*/
  width:1px;
  height: 60px;
  background:#1a1a1a;
}
/*summary*/
.summary_area .main_box .flex {
	display: flex;
	flex-wrap: none;
	justify-content: space-around;
}
.summary {
    padding: 2rem 0 2rem 3rem;
}
.space {
	margin: 2rem 0;
}
.img_box01 img {
	box-shadow: 25px 25px 1px rgba(136,194,254,.4);
	display: block;
	margin-left: auto;
	width: 85%;
}
.img_box02 img {
	box-shadow: -25px 25px 1px rgba(136,194,254,.4);
	display: block;
	margin-right: auto;
	width: 85%;
}
.summary .ttl03 {
	position: relative;
}
/*ourbusiness*/
.ourbusiness_area .reverse {
	flex-direction: row-reverse;
}
.ourbusiness_area .img_box img {
	display: block;
	margin-left: 0;
	width: 80%;
}
.ourbusiness_area .shaddow_left {
	box-shadow: -25px -25px 1px rgba(136,194,254,.4);
}
/*office*/
.office_area {
	background-image: url("../img/index_office.jpg");
	background-position: center 70%;
	background-repeat: no-repeat;
	background-size: cover;
	color: #fff;
	padding: 10rem;
	text-align: center;
	margin: 5rem auto;
}
.button.office_button {
	margin: 0 auto;
	width: 20%;
}
/*staff_recruit_area*/
.staff.w4,
.recruit.w4,
.query.w4 {
    margin: 1rem;
    background: rgb(8 105 209);
    padding: 3rem;
    position: relative;
    z-index: 10;
}
.staff_recruit_area .main_box .flex {
	flex-wrap: nowrap;
}
.staff_recruit_area .flex.w12 {
	gap: 5rem;
}
.staff .staff_button .ttl03 {
	color: #fff;
	margin-bottom: 1.5rem;
	text-align: center;
}
.recruit .recruit_button .ttl03 {
	color: #fff;
	margin-bottom: 1.5rem;
	text-align: center;
}
.query .query_button .ttl03 {
	color: #fff;
	margin-bottom: 1.5rem;
	text-align: center;
}
.text_blk {
	color: #fff;
	text-align: center;
}
.staff_recruit_area .text_box:before {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    /* background: rgba(0, 80, 160, 0.6); */
    border: 2px solid rgb(72 181 226);
    left: 15px;
    top: 15px;
    z-index: -1;
}
.button.btn_wrap.b-80 a{
    background-color: inherit;
    border: 2px solid white;
}
/*access*/
section.access_area {
	padding-bottom: 0;
}
#ACCESS{
    padding: 80px 0;
    background: #f2f6f7;
    margin-bottom: 0;
}
.access .secIn .ttl02.un_line {
	width: 20%
}
.secIn {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 3rem;
}
.topVisitors {
  width: calc(100% - 60px);
  max-width: 900px;
  text-align: center;
  border: 4px solid #1c1c1cB3;
  margin: 0 auto 70px;
}
.topVisitors a p {
  font-family: 'Bodoni Moda', serif;
  font-size: 3.2rem;
  color: #1c1c1c;
  transition: 0.5s;
  line-height: 1;
  padding: 20px;
  background: #fff;
}
.topVisitors a p span:last-child {
  font-family: 'Noto Serif JP', serif;
  font-size: 1.6rem;
}
.access {
  margin-bottom: 70px;
}
.access .access_wrap {
    position: relative;
}
.access .access_wrap .access_in {
  width: 100%;
  padding: 2rem 0;
}
.access .access_wrap .access_in a {
  transition: 0.5s;
}
.access .access_wrap .access_in a img {
  margin-bottom: 10px;
}
.access .access_wrap .map_box.access_in {
  margin: -7rem auto 0;
  width: 45% !important;
  margin-bottom: 0;
}
.access .access_wrap .map_txt.access_in{
  font-size: 1.8rem;
}
.access .access_wrap .map_txt.access_in li{
	border-bottom: 1px solid #abaaaa;
	padding: .5rem 0;
}
.access .access_wrap .map_txt dl {
	display: flex;
	width: 100%;
	line-height: 2;
}
.access .access_wrap .map_txt dl dt{
	width: 30%;
	font-size: 1.6rem;
}
.access .access_wrap .map_txt dl dd{
	width: 80%;
	padding-left: 3rem;
}
.access .btn01{
    text-align: left;
    margin: 3rem 0 0 -1.5rem;
}
.access .access_wrap .map_txt.access_in .access_eigyou{
    max-width: 557px;
}
.map_street{
    background-color: #f2f6f7;
}
.map_street iframe{
    opacity: .5;
}
@media screen and (max-width: 1600px){
	.mv_box_wrap{
		padding-bottom: 5rem;
	}
	.ttl01_txt{
		margin-top: 4rem;
	}
}
@media screen and (max-width: 1499px){
	.mv_box_wrap .mv_catch{
		top: 34%;
	}
	.mv_box_wrap .catch{
		margin-left: 2.5%;
	}
	h1.ttl01 {
    	font-size: 5rem;
	}
	.h_rl .nav li {
    	padding: 0 2rem;
	}
	.right {
	    padding-left: 0rem;
	}
}
@media screen and (max-width: 1199px){
	.mv_box_wrap .slick-list{
		margin-top: 0;
	}
	.mv_box, .slick-slide{
		height: 80vh;
	}
	.slick-slide img{
		width: auto;
		height: 100%;
	}
	.slick-initialized .slick-slide{
		justify-content: center;
	}
/*	.mv_box img {
	    height: 650px;
	}*/
	h1.ttl01{
		font-size: 4.5rem;
	}
	h2 .ttl02 span:lang(en)::first-letter{
		font-size: 5rem;
	}
	h2 .ttl02 span.small{
		font-size: 1.8rem;
	}
	h3{
		font-size: 3rem;
	}
	.staff .staff_button .ttl02 {
	    width: 85%;
	}
	.h_rl .nav li {
        padding: 0;
		width: 16%;
    }
	.nav ul:last-child {
    	width: 100%;
	}
/*	nav#js-nav {
    padding: 1.5rem 0rem 1rem 2rem;
	}*/
    .img_box01 img {
        object-fit: cover;
        margin-top: 4rem;
        width: 90%;
    }
	.img_box02 img {
		object-fit: cover;
		width: 90%;
	}
/*	.access_area .access li {
    	width: 100%;
	}
	*/
	.text_blk {
    	padding: 2rem;
	}
	.right .small {
   		padding-left: 10rem;
	}
	.staff_button .img_item img,
	.recruit_button .img_item img {
	    height: 100%;
	}
	.staff_recruit_area .main_box .flex {
    	gap: 3rem;
	}
	.googlemap {
    	width: 390px;
	}
	.f_nav li a::before {
		top: 21px;
		left: -25px;
	}
	#footer .f_nav {
    	margin: 10rem;
	}
	.mv_box_wrap .ttl01_box {
		padding: 2rem 1.5rem 4rem;
	}
	.access .access_wrap .map_txt dl dt {
    width: 20%;
	}
	.access .access_wrap .map_txt dl dd {
    width: 80%;
    padding-left: 0;
	}
	.access .access_wrap .map_txt.access_in {
		margin: 0 auto
	}
	.button.office_button {
		width: 100%;
	}
}
@media screen and (max-width: 999px){

	.office_area {
		margin: 0 auto 5rem;
	}
	.staff_recruit_area .main_box .flex {
		flex-direction: column;
	}
	.staff.w4, .recruit.w4, .query.w4 {
		width: 100% !important;
		margin: 0 auto;
	}
	.access .secIn .ttl02.un_line {
		width: 30%;
	}
	.access .access_wrap {
		flex-direction: column;
	}
	.access .access_wrap .map_box.access_in {
	   margin: 0 auto;
		width: 100%;
	}
	.query_button-wrap {
		display: flex;
		justify-content: center;
        gap: 3rem;
	}
	#ACCESS {
		padding: 50px 0;
	}

	.access .access_wrap .map_box.access_in {
		width: 100% !important;
	}
}
@media screen and (max-width: 480px){
	.slick-slide img {
		width: 100%;
        height: 100%;
        object-fit: cover;
		object-position: 0 10%;
	}
	.mv_box_wrap .ttl01_wrap {
		top: 35%;
	}
	.slick-initialized .slick-slide {
		justify-content: end;
	}
	h1.ttl01 {
		font-size: 2.5rem;
	}
	.ttl02 {
		font-size: 2.4rem;
	}
	.ttl03 {
		padding-left: 1rem;
		font-size: 2.2rem;
	}
	h3 {
		padding: 1rem;
	}
	.access .access_wrap .map_txt dl dd {
		font-size: 1.6rem;
	}
	.img_box01 img {
		margin: 2rem 0 4rem;
		width: 100%;
	}
	.summary_area .main_box .flex {
		justify-content: normal;
	}
	.p_small {
		font-size: 1.2rem;
	}
	.scrolldown2 span  {
		font-size: 1.4rem;
	}
	.office_area  {
		padding: 5rem;
	}
	.summary {
		padding: 0;
	}
	.staff.w4, .recruit.w4, .query.w4 {
		padding: 3rem 0;
	}
	.w7 {
		width: 100% !important;
	}
	.w5 {
     	width: 100% !important;
		margin-right: calc(50% - 50vw);
		margin-left: calc(50% - 50vw);

    } 
	.img_box02 img {
	 	margin: 2rem 0 4rem;
		width: 100%;
	}
	.reverse {
		 flex-flow: wrap;
	}
	.button.office_button {
        width: 80%;
    }
	.staff_recruit_area .text_box:before {
		left: 8px;
        top: 8px;
	}
	.query_button-wrap {
		flex-direction: column;
		gap:1rem;
	}
	 .access .secIn .ttl02.un_line {
        width: 50%;
    }
	#ACCESS {
		    padding: 80px 0 70px;
	}
	#footer .secIn .footerIn .footerTxt ul {
	   gap: 1rem 2.5rem;
	}
	#footer .secIn .footerIn .footerLogo  {
	   max-width: 60%;
	}
}