@charset "UTF-8";

/* --------------------
   HERO
-------------------- */
#hero {
  position: relative;
  background: url("../images/index/main.jpg") no-repeat center center;
  background-size: cover;
  height: 60vw;
  color: #fff;
  z-index: 1;
  text-shadow: 0 0 10px rgba(0,0,0,0.5);}
#hero .text {
  position: absolute;
  bottom: 20%;}
#hero .text h1 { letter-spacing: 0.1em;}
#hero .text p { padding: 20px 0;}
@media screen and (max-width: 1280px){
	#hero { height: 80vw;}
	#hero .text { left: 10%;}
	#hero .text h1 { font-size: 28px;}
	#hero .text p { padding: 20px 0;}}
@media screen and (max-width: 768px){
	#hero {
		height: 150vw;
		background: url("../images/index/main-sp.jpg") no-repeat center center;
		text-shadow: 0 0 10px rgba(0,0,0,1);
		background-size: cover;}
	#hero .text {
		padding-top: 30vw;
		left: auto;
		text-align: center;
		position: relative;
		bottom: auto;}
	#hero .text h1 { font-size: 30px;}
	#hero .text p { padding: 10px 0;font-size: 14px;}}
@media screen and (max-width: 480px){
	#hero { height: 170vw;}
	#hero .text { padding-top: 40vw;}
	#hero .text h1 { font-size: 20px;}
	#hero .text p { padding: 10px 0 0;font-size: 12px;letter-spacing: normal;}}

/* --------------------
   BANNER
-------------------- */
#banner {
  overflow: visible;
  position: relative;}
#banner::before {
  position: absolute;
  top: -59px;
  left: 0;
  background: #F5F7F5;
  border-radius: 60px 60px 0 0;
  height: 60px;
  content: "";
  display: block;
  width: 100%;
  z-index: 2;}
#banner h1::before {
  margin-right: 12px;
  content: "";
  width: 20px;
  position: relative;
  top: -6px;
  background: #00CC18;
  height: 1px;
  display: inline-block;}
#banner .flex {
  margin-top: 10px;
  display: flex;
  justify-content: space-between;}
#banner a {
  width: 340px;
  height: 140px;
  border-radius: 6px;
  box-shadow: 0 2px 20px 0 rgba(0,0,0,0.1);}
@media screen and (max-width: 1080px){
	#banner::before { border-radius: 30px 30px 0 0;}
	#banner .flex {
		flex-wrap: wrap;
		justify-content: center;
		gap:10px 20px;}
	#banner a { display: inline-block;width: auto;height: auto;}
	#banner a img { display: block;height: auto;width: 100%;}}

/* --------------------
   VISION
-------------------- */
#vision { 
  overflow: visible;
  padding-top: 100px;}
#vision .content { position: relative;}
#vision .content::before {
  content: "";
  position: absolute;
  left: 20px;
  top: 90px;
  background: url("../images/index/vision-back.png") no-repeat center top;
  background-size: contain;
  width: 540px;
  height: 600px;
  z-index: 1;}
#vision .flex {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: space-between;}
#vision .flex h1 {
  height: 600px;
  width: 100%;}
#vision .flex .text { width: 100%;}
#vision .flex .text h2 { padding: 136px 0 50px;}
#vision .flex .text p {letter-spacing: normal;}
@media screen and (max-width: 1080px){
	#vision { padding-top: 0;}
	#vision .content::before { top: 50px;left: auto;right: -100px;}
	#vision .flex { flex-wrap: wrap;}
	#vision .flex h1 { width: 100%; height: auto;padding-top: 15vw;}
	#vision .flex .text h2 { padding: 50px 0 50px;}}
@media screen and (max-width: 768px){
	#vision .flex .text h2 { padding: 30px 0 20px;font-size: 28px;}}
@media screen and (max-width: 480px){
	#vision .content::before { width: 340px; height: 400px;top: 0;right: -100px;}}

/* --------------------
   GROUP
-------------------- */
#group {
  position: relative;
  padding-top: 120px;}
#group::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 1000px;
  height: 1000px;
  background: url("../images/common/back.png") no-repeat right top;
  background-size: contain;
  z-index: 1;}
#group .content { position: relative;z-index: 2;}
#group h2 { padding: 30px 0 60px;}
#group .box {
  display: flex;
  margin-top: 20px;
  position: relative;
  padding: 80px 60px;
  gap:45px;
  align-items: center;
  background: #fff;
  border-radius: 0 0 20px 20px;}
#group .box.change { flex-direction: row-reverse;}
#group .box::before {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 4px;
  content: "";
  background: linear-gradient(90deg, #0099F5 0%, #00F50C 100%);}
#group .box p { flex: 1;}
@media screen and (max-width: 1080px){
	#group { padding-top: 20vw;}
	#group::before { width: 60%;}}
@media screen and (max-width: 768px){
  #group h2 { padding: 20px 0 30px;}
	#group .box { display: block;}
	#group .box img { margin: 0 auto;}
	#group .box p { padding-top: 40px;}}
@media screen and (max-width: 480px){
  #group h2 { padding: 10px 0 20px;}
	#group .box { padding: 40px 8vw;}
	#group .box p { padding-top: 30px;}}

/* --------------------
   PAGENAVI
-------------------- */
#pagenv .flex {
  padding-top: 160px;
  display: flex;}
#pagenv .item {
  border-bottom: 1px solid #00CC18;
  padding-left: 40px;}
#pagenv a {
  padding-bottom: 8px;
  font-size: 14px;
  color: #100F10;}
#pagenv .flex .item:last-child a { padding-right: 20px;}
#pagenv a img {
  margin-left: 9px;
  display: inline-block;}
@media screen and (max-width: 1080px){
	#pagenv .flex { padding-top: 15vw; flex-wrap: wrap;gap: 10px 0;}
	#pagenv .item { padding-left: 20px;}}

/* --------------------
   FLOW
-------------------- */
#flow {
  padding: 120px 0 170px;
  position: relative;}
#flow .flex {
  justify-content: space-between;
  position: relative;
  display: flex;}
#flow .flex .item { width: 100%;}
#flow .flex .item p { padding-top: 60px;}
#flow h2 { padding-top: 30px;}
#flow .flowback {
  position: absolute;
  overflow: hidden;
  border-radius: 0 100px 0 0;
  bottom: 0;
  left: 0;
  height: 820px;
  background: url("../images/index/flow-back.jpg") no-repeat center center;
  background-size: cover;
  width: calc(50vw - 120px);}
#flow .list { margin: 30px 0 60px;}
#flow .list li { margin-bottom: 5px;}
#flow .list li::before {
  display: inline-block;
  content: "";
  margin-right: 10px;
  width: 10px;
  height: 10px;
  background: #00CC18;
  border-radius: 5px;}
#flow .nami {
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 1;
  width: 100%;}
#flow .illust {
  position: absolute;
  bottom: -40px;
  right: 200px;
  z-index: 2;
  width: 76px;}
@media screen and (max-width: 1080px){
  #flow { padding: 20vw 0 20vw;}
  #flow .flex { flex-wrap: wrap;}
  #flow .flowback { top: 15vw;right: 0;left: auto;border-radius: 60px 0 0 60px; height: 1000px;width: 50%;}
  #flow .item p {padding-right: 40vw;}}
@media screen and (max-width: 768px){
  #flow { padding: 50vw 4vw 20vw;}
  #flow .flowback { width: 80%;height: 60vw; background-position: center top -50px;}
  #flow .item p {padding-right: 0;}
  #flow h2 { padding: 20px 0 30px;}
  #flow .flex .item p { padding-top: 0;}
  #flow .illust { right: 50px; width: 57px;}}
@media screen and (max-width: 480px){
  #flow h2 { padding: 10px 0 20px;}
  #flow .list li { letter-spacing: normal;font-size: 15px;}
  #flow .list { margin-bottom: 40px;}
  #flow .illust {  width: 47px;}}

/* --------------------
   CAREER
-------------------- */
#career {
  padding-top: 80px;
  background: #fff;}
#career .flex {
  justify-content: space-between;
  position: relative;
  gap:60px;
  display: flex;}
#career .flex .text { flex: 1;}
#career h1 {
  padding-bottom: 30px;
  display:flex;
  gap: 12px;
  align-items: center;}
#career h1 img { height: 32px;}
#career .flex .list { width: 580px;}
#career .flex .list .box {
  line-height: 1.4;
  padding: 8px 20px 12px;
  margin-top: 10px;
  border:1px solid;
  border-left:2px solid;}
#career .flex .list .box.pink { border-color:#E66F89;}
#career .flex .list .box.blue { border-color:#00B4CC;}
#career .flex .list .box.green { border-color:#00CC18;}
@media screen and (max-width: 1080px){
  #career { padding-top: 15vw;}
  #career h1 { padding-bottom: 20px;}
  #career .flex { flex-wrap: wrap;gap:30px;}
  #career .flex .list { width: 100%;}}

/* --------------------
   WORK
-------------------- */
#work {
  padding-top: 100px;
  padding-bottom: 50px;
  background: #fff;}
#work h2 { padding: 30px 0 60px;}
#work .flex {
  display: flex;
  justify-content: space-between;}
#work .flex > div { width: 100%;}
#work .flex .text { padding: 40px 0 0 60px;}
#work .list {
  padding: 70px 0;
  display: flex;
  justify-content: space-between;}
#work .list li {
  padding-bottom: 12px;
  text-align: center;
  line-height: 1.4;
  border-right: 1px solid #EEEEEE;
  width: 100%;}
#work .list li img { margin: 0 auto;}
#work .list p.txs-18 { margin-bottom: 4px;}
#work .list li:last-child { border: none;}
@media screen and (max-width: 1080px){
  #work .flex { flex-wrap: wrap;}
  #work .flex .text { padding: 0;}
  #work h2 { padding: 20px 0 30px;}
  #work .flex .photo img { margin: 0 0 -140px auto;width: 70%;}
  #work .list { flex-wrap: wrap;justify-content: center;padding:40px 0;}
  #work .list  li { width: 30%;border:none;}}
@media screen and (max-width: 768px){
  #work { padding-top: 10vw;}
  #work .list { justify-content:flex-start;}
  #work .list li { width: 50%;}}
@media screen and (max-width: 480px){
  #work .flex .photo img { margin: 0 0 0 auto;width: 100%;}
  #work h2 { padding: 10px 0 20px;}}

/* --------------------
   SERVICE
-------------------- */
#service {
  padding-bottom: 120px;
  overflow: visible;
  padding-top: 200px;
  position: relative;}
#service h2 { padding: 30px 0 60px;}
#service .nami {
  position: absolute;
  transform: rotate(180deg);
  top: -1px;
  left: 0;
  z-index: 1;
  width: 100%;}
#service .flex {
  flex-direction: row-reverse;
  display: flex;
  justify-content: space-between;}
#service .flex > div { width: 100%;}
#service .flex .text a { text-decoration: underline;}
#service .flex .photo { position:relative;}
#service .flex .photo .p1 {
  position:absolute;
  top: -200px;
  right: 0;
  z-index: 1;}
#service .flex .photo .p2 {
  position:absolute;
  top: 100px;
  right: 20px;
  z-index: 1;}
#service .flex .photo img { border-radius: 6px;}
#service .flex2 {
  margin: 60px 0;
  display: flex;
  flex-wrap: wrap;
  gap:20px;
  justify-content: space-between;}
#service .box {
  background: #fff;
  border-radius: 10px;
  padding: 24px 30px;
  width: calc(50% - 10px);}
#service h3 { margin-bottom: 6px;}
#service h3::before {
  position: relative;
  top: -2px;
  display: inline-block;
  content: "";
  margin-right: 8px;
  width: 12px;
  height: 12px;
  background: #00CC18;
  border-radius: 6px;}

@media screen and (max-width: 1080px){
  #service h2 { padding: 20px 0 30px;}
  #service .flex .photo { position: absolute;}
  #service .flex .text { position: relative;z-index: 2; padding-right: 30vw;}
  #service .flex .photo .p1 { width: 40vw;top:-20vw;right: -4vw;}
  #service .flex .photo .p2 { top: 8vw;width: 30vw;right: -2vw;}
  #service .flex2 { flex-wrap: wrap;gap:10px;}
  #service .box { width: 100%;padding:16px 20px 20px;}
  #service h3 { line-height: 1.4;}}
@media screen and (max-width: 768px){
  #service { padding: 20vw 4vw;}}
@media screen and (max-width: 480px){
  #service { padding-top: 30vw;}
  #service h2 { padding: 10px 0 20px;}
  #service .flex2 { margin: 30px 0;}
  #service .flex .text { padding-right: 0;}
  #service .flex .photo .p1 { width: 50vw;top:-45vw;right: -4vw;}
  #service .flex .photo .p2 { top: -10vw;width: 25vw;right: -2vw;}}

/* --------------------
   VOICE
-------------------- */
#voice {
	padding-bottom: 100px;
	position: relative;}
#voice .content {
  position: relative;
  z-index: 2;}
#voice .voice-back img { width: 100%;}
#voice h1 {
  margin: 0 auto;
  background: #fff;
  max-width: 260px;
  height: 50px;
  border-radius: 25px;
  line-height: 50px;
  text-align: center;}
#voice h2 { padding: 30px 0 60px;}
#voice .content {
  position: relative;
  top: -80px;}
#voice .tabarea {
  gap:20px;
  justify-content: center;
  display: flex;}
#voice .tabarea .photo {
  margin-bottom: 10px;
  border:2px solid #fff;
  border-radius: 80px;
  box-shadow: 0 0 10px rgba(0,0,0,0.1);}
#voice .tabarea a {
  text-align: center;
  line-height: 1.4;
  color: #100F10;}
#voice .tabarea a p img {
  margin-left: 5px;
  display: inline-block;}
#voice::before {
  content: "";
  position: absolute;
  top: 700px;
  right: 0;
  width: 1000px;
  height: 1000px;
  background: url("../images/common/back.png") no-repeat right top;
  background-size: contain;
  z-index: 1;}
#voice::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 1000px;
  height: 1000px;
  transform: rotate(180deg);
  background: url("../images/common/back.png") no-repeat right top;
  background-size: contain;
  z-index: 1;}
#voice .voicearea .flex {
  padding-top: 80px;
  justify-content: space-between;
  gap:60px;
  align-items: center;
  display: flex;}
#voice .voicearea .flex.chage { flex-direction: row-reverse;}
#voice .voicearea .flex .human {
  position: relative;
  width: 440px;}
#voice .voicearea .flex .human::before {
  opacity: 0.1;
  content: "";
  display: block;
  width: 100%;
  height: 280px;
  position: absolute;
  bottom: -10px;
  left: 0;
  border-radius: 140px;
  background: linear-gradient(90deg, #0099F5 0%, #00F50C 100%);}
#voice .voicearea .flex .text { width: 580px;}
#voice .dots-wrap {
  position: relative;
  top: -18px;
  display: flex;
  justify-content: center;}
#voice .dots-wrap li {
  width: 8px;
  height: 8px;
  margin: 0 3px;
  background: #fff;
  border-radius: 50%;
  cursor: pointer;}
#voice .dots-wrap li:hover, 
#voice .dots-wrap li.slick-active { background: #00CC18;}
#voice .dots-wrap li button {
  display: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  outline: none;
  padding: 0;
  border: none;
  background-color: transparent;}
@media screen and (max-width: 1080px){
  #voice { padding: 0;}
  #voice .voicearea { padding: 0 4vw;}
  #voice .voicearea .flex { flex-wrap: wrap;gap:30px;}
  #voice .voicearea .flex .text { width: 100%;}
  #voice .voicearea .flex .human { margin: 0 auto;}}
@media screen and (max-width: 768px){
  #voice .tabarea { flex-wrap: wrap;}}
@media screen and (max-width: 480px){
  #voice h2 { padding-bottom: 30px;}
	#voice .content { top: -20px;}
  #voice .tabarea .item { width: 40%;}
  #voice .voicearea .flex .human::before { height: 200px;}
  #voice .voicearea .flex .human { width: 100%;}}

/* --------------------
   COMPANY
-------------------- */
#company {
	margin: 120px 0 160px;
	position: relative;
	padding: 100px 0 120px;}
#company .content {
	position: relative;
	z-index: 2;}
#company::before {
	position: absolute;
	z-index: 1;
	top: 0;
	right: 0;
	content: "";
	background: #fff;
	border-radius: 60px 0 0 60px;
	width: 80vw;
	height: 100%;}
#company h2 { padding: 30px 0 20px;}
#company h3 { letter-spacing: 0.25em;}
#company .tablearea { padding: 70px 0 0 260px;}
#company table {
	border-top: 1px solid #E0DFDF;
	width: 100%;
	border-spacing:0;}
#company table th, #company table td {
	padding: 16px 0 16px 20px;
	text-align: left;
	vertical-align: text-top;
	border-bottom: 1px solid #E0DFDF;}
#company table th { color: #00CC18;}

@media screen and (max-width: 1080px){
  #company { padding: 100px 4vw 120px;}
  #company .tablearea { padding: 70px 0 0 15vw;}
  #company::before { width: 85vw;}
  #company h2 { padding: 20px 0;}}
@media screen and (max-width: 768px){
  #company { padding: 15vw 4vw;margin: 15vw 0;}
  #company h2 { padding: 10px 0;}
  #company table th, #company table td { display: block;}
  #company table th { border: none; padding-bottom: 0;}
  #company table td { padding-top: 10px;}}
@media screen and (max-width: 480px){
  #company h3 { font-size: 14px;}
  #company::before { width: 90vw;}
  #company .tablearea { padding: 40px 0 0 10vw;}}