@charset "utf-8";
/* CSS Document */
body {
  font-size: 100%;
  letter-spacing: 0.1rem;
}
html {
  max-width: 100%;
  font-family: "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "Osaka", "游ゴシック", "YuGothic", "メイリオ", "Meiryo", "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}
/*＝＝＝＝＝＝＝＝＝＝共通＝＝＝＝＝＝＝＝＝*/
.main-img {
  max-width: 100%;
  height: 100vh;
  background-image: url("../img/main.jpg");
  background-position: center center;
}
h2 {
  font-size: 4.3rem;
  color: #dd304d;
}
h2 span {
  font-size: 1.4rem;
  color: #000;
  display: block;
}
h3 {
  color: #fff;
}
a:hover {
  opacity: 0.7;
}
.container {
  margin: 10% 10% 3%;
}

/*＝＝＝＝＝＝＝＝＝＝ヘッダー＝＝＝＝＝＝＝＝＝*/
header {
  width: 100%;
  height: 60px;
  position: fixed;
  padding: 70px 50px;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
}
.nav ul {
  list-style-type: none;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
.nav ul li:not(.not) {
  float: right;
  margin-left: 50px;
}
.nav ul li:last-child {
  float: right;
  margin-left: 20px;
}
.nav ul li a {
  text-decoration: none;
  color: #fff;
  font-size: 110%;
  font-weight: bold;
}
.nav ul {
  display: flex;
  align-items: center;
}
.white-box {
  width: 140px;
  height: 40px;
  background-color: #fff;
  color: #dd304d !important;
	
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0 5%;
}
.white-box:hover {
  width: 140px;
  height: 40px;
  background-color: #dd304d;
  color: #fff !important;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0 5%;
	opacity: 1;
	transition: 0.8s;
}
.red-box {
  width: 140px;
  height: 40px;
  background-color: #dd304d;
  color: #fff !important;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-left: 10px !important;
}
.red-box:hover {
  width: 140px;
  height: 40px;
  background-color: #fff;
  color: #dd304d !important;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-left: 10px !important;
	opacity: 1;
	border: 1px solid #dd304d;
	transition: 0.8s;
}
.header.change-color {
  background-color: #fff; /*スクロールしたあとのヘッダー背景色*/
  transition: 0.3s;
	z-index: 999;
}
.header.change-color ul li a {
	color: #000;
}
.header.change-color .white-box{
	border: 1px solid #dd304d;
	box-sizing: border-box;
}
/*＝＝＝＝＝＝＝＝＝＝メインイメージ＝＝＝＝＝＝＝＝＝*/
.main-img {
  max-width: 100%;
  height: 100vh;
  background-image: url("../img/main.jpg");
  background-position: center top;
	position: relative;
}
.main-wrap {
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: flex-end;
}

.column {
  width: 40%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-bottom: 40px;
	position: absolute;
	top: 180px;
}
.column img{
	margin-top: 50px;
	width: 610px;
	z-index: 999;
}

a{
	text-decoration: none;
}


.main-img::after{
	 content: '';
	animation: bgchange 15s ease infinite;/*変化の時間を変更したい場合は20sの部分を好きな時間に変更*/
	position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}

@keyframes bgchange{
      0%   {background:rgba(30,144,255,0.5);}/*変化させたい色*/
      25%  {background:rgba(30,203,158,0.5);}/*変化させたい色*/
      50%  {background:rgba(255,102,179,0.5);}/*変化させたい色*/
      75%  {background:rgba(255,223,251,0.5);}/*変化させたい色*/
      90%  {background:rgba(30,203,158,0.5);}/*変化させたい色*/
      100% {background:rgba(30,144,255,0.5);}/*変化させたい色*/
 }


/*＝＝＝＝＝＝＝＝＝＝Message＝＝＝＝＝＝＝＝＝*/
#message {
  width: 100%;
}
.black-box-wrap {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 4.8rem;
}
.black-box {
  width: 35rem;
  height: 13rem;
  background-color: #000;
  position: relative;
}
.black-box p {
  color: #fff;
  font-weight: bold;
  text-align: right;
  margin-top: 3rem;
  margin-right: 5.6rem;
}
.black-box a {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 999;
  text-decoration: none;
}
.stickarrow {
  width: 1.8rem;
  height: 0.6rem;
  border-bottom: 2px solid #fff;
  border-right: 2px solid #fff;
  transform: skew(45deg);
  position: absolute;
  bottom: 1.8rem;
  right: 0.9rem;
  z-index: 99;
}
.black-box p span {
  font-size: 0.9rem;
}
.black-box::before {
  content: "";
  display: inline-block;
  width: 3.6rem;
  height: 3.6rem;
  background: #dd304d;
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: 1;
}
.black-box h3 {
  font-size: 1.5rem;
  letter-spacing: 0.1rem;
	  margin-top: 3rem;
}

.black-box .flex-start {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin-left: 2rem;
}
/*＝＝＝＝＝＝＝＝＝＝business＝＝＝＝＝＝＝＝＝*/
.business-wrap{
	margin: 10% 10% 10% 0px;
}
.business-wrap h2{
	text-align: right;
}
.businessman{
	background-image: url("../img/bg_business02.png");
	height: 380px;
	position: relative;
	width: 95%;
background-size: cover;
}
.businesswoman{
	background-image: url("../img/bg_business.png");
	height: 380px;
	position: relative;
	width: 95%;
background-size: cover;
}
.businessman img, .businesswoman img{
	position: absolute;
	right: 20%;
	bottom: 0;
	height: 350px;
	width: auto;
	object-fit: cover;
}
.businesswoman .title p{
	color: #fff;
	background-color: #dd304d;
	display: inline-block;
	font-weight: bold;
	padding: 0.5%;
	margin-bottom: 10px;
}
.title p{
	color: #FFFFFF;
	background-color: #000;
	display: inline-block;
	font-weight: bold;
	padding: 0.5%;
	margin-bottom: 10px;
}
.row{
	color: #fff;
	background-color: #dd304d;
	display: inline-block;
	margin-top: 12px;
	padding: 0.5%;
	font-size: 2rem;
}
.businesswoman .row{
	color: #fff;
	background-color: #000;
	display: inline-block;
	margin-top: 12px;
	padding: 0.5%;
	font-size: 2rem;
}
.word-wrap{
	display: flex;
	justify-content: center;
	flex-direction: column;
	height: 380px;
	margin-left: 300px;
	position: relative;
}
.detail{
	position: relative;
}
.detail a{
	width: 250px;
	height: 60px;
	color: #fff;
	background-color: #dd304d;
	font-size: 1rem;
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-top: 3.8rem;
	position: absolute;
	font-weight: bold;
		padding: 0 1.9rem;
top: -220px;
right: 15%;

}
.detail a:hover{
	width: 250px;
	height: 60px;
	color: #dd304d;
	background-color: #fff;
	font-size: 1rem;
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-top: 3.8rem;
	position: absolute;
	right: 10%;
	font-weight: bold;
		padding: 0 1.9rem;
	border: #dd304d 1px solid;
}
.detail a:hover::after{
	content: '';
  width: 1.8rem;
  height: 0.6rem;
  border-bottom: 1px solid #dd304d;
  border-right: 1px solid #dd304d;
  transform: skew(45deg);
  z-index: 99;
	  transition: inherit;

}
.detail a::after{
	content: '';
  width: 1.8rem;
  height: 0.6rem;
  border-bottom: 1px solid #fff;
  border-right: 1px solid #fff;
  transform: skew(45deg);
  z-index: 99;

}
/*==================================================
スライダーのためのcss
===================================*/
.slider {
    position:relative;
	z-index: 1;
	/*↑z-indexの値をh1のz-indexの値よりも小さくして背景に回す*/
	margin-right: 7%;
}
/*　背景画像設定　*/


.slider-item {
    width: 100%;/*各スライダー全体の横幅を画面の高さいっぱい（100%）にする*/
    height:100vh;/*各スライダー全体の縦幅を画面の高さいっぱい（100vh）にする*/
    background-repeat: no-repeat;/*背景画像をリピートしない*/
    background-position: center;/*背景画像の位置を中央に*/
    background-size: cover;/*背景画像が.slider-item全体を覆い表示*/
}

/*矢印の設定*/

/*戻る、次へ矢印の位置*/
.slick-prev, 
.slick-next {
    position: absolute;/*絶対配置にする*/
	z-index: 3;
    top: 29%;
    cursor: pointer;/*マウスカーソルを指マークに*/
    outline: none;/*クリックをしたら出てくる枠線を消す*/
    height: 25px;
    width: 25px;
}


.slick-prev::after {/*次へ矢印の位置と形状*/
  content: '';
  width: 20px;
  height: 20px;
  border: 0;
  border-top: solid 2px #dd304d;
  border-right: solid 2px #dd304d;
  position: absolute;
left: 45px;
bottom: 42%;
  margin-top: -4px;
  transform: rotate(-135deg);
	z-index:2;
}
.slick-prev {
  content: "";
  display: inline-block;
  width: 6.25rem;
  height: 6.25rem;
  background: #fff;
  position: absolute;
	left: 130px;
top: 170px;
  z-index: 1;

}
.slick-next {
  content: "";
  display: inline-block;
  width: 6.25rem;
  height: 6.25rem;
  background: #fff;
  position: absolute;
right: 21px;
top: 170px;
  z-index: 1;

}
.slick-next::after {/*次へ矢印の位置と形状*/
  content: '';
  width: 20px;
  height: 20px;
  border: 0;
  border-top: solid 2px #dd304d;
  border-right: solid 2px #dd304d;
  position: absolute;
right: 45px;
bottom: 42%;
  margin-top: -4px;
  transform: rotate(45deg);
	z-index:2;
}


/*＝＝＝＝＝＝＝＝＝＝people＝＝＝＝＝＝＝＝＝*/
#people {
  width: 100%;
	margin-top: -240px;
}
    .people01 a img{ filter:grayscale(100%); 
}
    .people01 a img:hover{
    	filter:grayscale(0);
    	transition:0.3s;
    }
.people01 {
  width: inherit;
}
.people-wrap {
  width: 100%;
	display: flex;
  align-items: center;
}
.gray-box {
  height: 30rem;
  background-color: #dfe2e5;
	overflow: hidden;
	position: relative;
		display: flex;
	justify-content: center;
}
.gray-box img{
	width: 12.5rem;
  height: auto;
position: absolute;
right: -44px;
bottom: -59px;

}
.people-word{
	width: 90%;
	background-color: rgba(255,255,255,0.80);
	color: #000;
	position: absolute;
	bottom: 0;
	display: flex;
  justify-content: center;
  align-items: center;
	font-weight: bold;
	padding: 1rem;
	margin-bottom: 1rem;
}
.job{
	font-size: 0.8rem;
	font-weight: normal;
}
.name{
	font-weight: bold;
}
.people-wrap a:hover .gray-box {
  height: 30rem;
  background-color: #dd304d;
	overflow: hidden;
	position: relative;
		display: flex;
	justify-content: center;
}
.people-wrap a:hover {
	opacity: 1 !important;
}
.people-wrap a:hover .people-word{
	height: 7.8rem;
	width: 90%;
	background-color: rgba(0,0,0,0.80);
	color: #fff;
	position: absolute;
	bottom: 0;
	display: flex;
  justify-content: center;
  align-items: center;
	font-weight: bold;
	padding: 0 0.6rem;
	margin-bottom: 1rem;
}
.people-detail{
	position: relative;
}
.people-detail a{
	width: 250px;
	height: 60px;
	color: #fff;
	background-color: #dd304d;
	font-size: 1rem;
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-top: 3.8rem;
	position: absolute;
	font-weight: bold;
		padding: 0 1.9rem;
right: 15%;

}
.people-detail a:hover{
	width: 250px;
	height: 60px;
	color: #dd304d;
	background-color: #fff;
	font-size: 1rem;
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-top: 3.8rem;
	position: absolute;
	right: 10%;
	font-weight: bold;
		padding: 0 1.9rem;
	border: #dd304d 1px solid;
}
.people-detail a:hover::after{
	content: '';
  width: 1.8rem;
  height: 0.6rem;
  border-bottom: 1px solid #dd304d;
  border-right: 1px solid #dd304d;
  transform: skew(45deg);
  z-index: 99;
	  transition: inherit;

}
.people-detail a::after{
	content: '';
  width: 1.8rem;
  height: 0.6rem;
  border-bottom: 1px solid #fff;
  border-right: 1px solid #fff;
  transform: skew(45deg);
  z-index: 99;

}
/*＝＝＝＝＝＝＝＝＝＝Company＝＝＝＝＝＝＝＝＝*/
#company h2{
	margin-bottom: 70px;
	text-align: right;
}
.company-box-wrap{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
.company01{
	width: 540px;
	height: 290px;
	background-image: url("../img/img_company01.png");
	background-size: cover;

}
.company02{
	width: 540px;
	height: 290px;
	background-image: url("../img/img_company02.png");
	background-size: cover;

}
.company03{
	width: 540px;
	height: 290px;
	background-image: url("../img/img_company03.png");
	background-size: cover;

}
.company04{
	width: 540px;
	height: 290px;
	background-image: url("../img/img_company04.png");
	background-size: cover;

}
.company-box {
	display: flex;
	justify-content: center;
	align-items: center;
	margin-bottom: 200px;
}
.company-box h3 {
	font-size: 1.4rem;
	text-align: center;
}
.company-box h3 span{
	font-size: 0.8rem;
	color: rgba(255,255,255,0.7);
	display: block;
}
.company-wrap{
	position: relative;
}
.company-detail a{
	width: 250px;
	height: 60px;
	color: #fff;
	background-color: #dd304d;
	font-size: 1rem;
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-top: 3.8rem;
	position: absolute;
	right: 0;
	bottom: 80px;
	font-weight: bold;
		padding: 0 1.9rem;

}
.company-detail a:hover{
	width: 250px;
	height: 60px;
	color: #dd304d;
	background-color: #fff;
	font-size: 1rem;
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-top: 3.8rem;
	position: absolute;
	right: 0;
	font-weight: bold;
		padding: 0 1.9rem;
	border: #dd304d 1px solid;
}
.company-detail a:hover::after{
	content: '';
  width: 1.8rem;
  height: 0.6rem;
  border-bottom: 1px solid #dd304d;
  border-right: 1px solid #dd304d;
  transform: skew(45deg);
  z-index: 99;
	  transition: inherit;

}
.company-detail a::after{
	content: '';
  width: 1.8rem;
  height: 0.6rem;
  border-bottom: 1px solid #fff;
  border-right: 1px solid #fff;
  transform: skew(45deg);
  z-index: 99;

}
#company{
	position: relative;
	margin-top: 310px;
}
.bg{
	width: 95%;
	height: 300px;
	background-color: #dfe2e5;
	position: absolute;
	left: 0;
	top: 290px;
}
.bg2{
	width: 95%;
	height: 300px;
	background-color: #dfe2e5;
	position: absolute;
	right: 0;
	top: 780px;
}
#company a:hover{
	opacity: 1;
}

/*＝＝＝＝＝＝＝＝＝＝Company＝＝＝＝＝＝＝＝＝*/

#recruit{
	position: relative;
	margin-top: -100px;
}
#recruit h2{
	margin-bottom: 70px;
}
.bg{
	width: 95%;
	height: 300px;
	background-color: #dfe2e5;
	position: absolute;
	left: 0;
	top: 290px;
}
.recruit01{
	width: 540px;
	height: 290px;
	background-image: url("../img/img_recruit01.png");
	background-size: cover;

}
.recruit02{
	width: 540px;
	height: 290px;
	background-image: url("../img/img_recruit02.png");
	background-size: cover;

}
#recruit a:hover{
	opacity: 1;
}
/*＝＝＝＝＝＝＝＝＝＝footer＝＝＝＝＝＝＝＝＝*/
footer{
	background-color: #222;
	padding-bottom: 10%;
}
footer p a{
	color: #dd304d;
}
footer .container{
	display: flex;
	justify-content: space-between;
	padding-top: 100px;
}
ul{
	text-decoration: none;
	color: #fff;}
ul li {
	list-style-type: none;
	margin-top: 30px;
} 
footer ul li a{
	color: #fff;
	font-size: 0.8rem;
}
footer small{
	color: #fff;
}
.footer-p02{
	margin-top: 1.7rem;
}
.footer-m, .footer-b, .footer-p, .footer-c,.footer-r{
	margin-bottom: 40px;
}
.footer-box{
	display: flex;
	justify-content: center;
	border-top: 1px solid #666;
	padding-top: 50px;
	width: 80%;
	margin: 0 auto;
	margin-bottom: 75px;
}
.footer-box p{
	white-space: nowrap
}
.center{
	display: flex;
	justify-content: center;
	
}
.footer-box a {
  text-decoration: none;
  color: #fff;
  font-size: 110%;
  font-weight: bold;
}
.footer-white-box {
  width: 235px;
  height: 80px;
  background-color: #fff;
  color: #dd304d !important;
	
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0 5%;
}
.footer-white-box:hover {
  width: 235px;
  height: 80px;
  background-color: #dd304d;
  color: #fff !important;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0 5%;
	opacity: 1;
	transition: 0.8s;
}
.footer-red-box {
  width: 235px;
  height: 80px;
  background-color: #dd304d;
  color: #fff !important;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-left: 10px !important;
}
.footer-red-box:hover {
  width: 235px;
  height: 80px;
  background-color: #fff;
  color: #dd304d !important;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-left: 10px !important;
	opacity: 1;
	border: 1px solid #dd304d;
	transition: 0.8s;
}
/*＝＝＝＝＝＝＝＝＝＝くるくる＝＝＝＝＝＝＝＝＝*/

html,body{
	height: 100%;/*高さを100%にして描画エリアをとる*/
}

#particles-js{ 
	position:fixed;/*描画固定*/
	z-index:-1;/*描画を一番下に*/
	width: 100%;
	height: 100%;
	background-color:#f5f6f7;/*背景色*/
}

#wrapper{
	position: relative;/*描画を#particles-jsよりも上にするためposition:relative;を指定*/
	z-index: 1;/*z-indexの数字を大きくすることで描画を#particles-jsよりも上に*/
	width:100%;
	height: 100%;
}