@charset "UTF-8";

/*============================
#mv
============================*/

#mv {
  padding-top: 140px;
}

#mv .mv-inner {
  max-width: 1200px;
  margin: 0 auto;
  overflow: hidden;
  position: relative;
}
/*
#mv .mv-inner::after {
  content: "";
  width: calc(100% - 68px);
  height: calc(100% - 68px);
  border: 4px solid #fff;
  position: absolute;
  top: 20px;
  left: 20px;
}

#mv .mv-inner::before {
  content: "";
  width: calc(100% - 68px);
  height: calc(100% - 68px);
  border: 4px solid #fff;
  position: absolute;
  top: 40px;
  right: 20px;
}
*/
#mv .mv-inner img {}

#mv .mv-inner a {
  display: inline-block;
  position: absolute;
  left: 11%;
  top: 74%;
  z-index: 3;
}

#mv .mv-inner a img {
  /*width: 29vw;*/
  width: 100%;
  max-width: 469px;
}

#mv .sp {
  display: none;
}

@media screen and (max-width: 959px) {
  #mv {
    padding-top: 86px;
  }
  #mv .mv-inner {}
  #mv .mv-inner::after {
    border: 2px solid #fff;
    top: 15px;
    left: 10px;
    width: calc(100% - 38px);
    height: calc(100% - 48px);
  }
  #mv .mv-inner::before {
    border: 2px solid #fff;
    top: 27px;
    right: 11px;
    width: calc(100% - 38px);
    height: calc(100% - 48px);
  }
  #mv .mv-inner img {}
  #mv .mv-inner a {
    display: none;
  }
  #mv .mv-inner a img {}
  #mv .pc {
    display: none;
  }
  #mv .sp {
    display: block;
  }
}

@media screen and (max-width: 480px) {
  #mv {
    padding-top: 70px;
  }
  #mv .mv-inner {
    overflow: initial;
  }
  #mv .mv-inner::after {
    display: none;
  }
  #mv .mv-inner::before {
    display: none;
  }
  #mv .mv-inner img {}
  #mv .mv-inner a {
    right: 0;
    left: 0;
    margin: auto;
    display: inline-block;
    text-align: center;
    top: 82%;
  }
  #mv .mv-inner a img {
    width: 65%;
  }
}


/*============================
#your-type
============================*/

#your-type {}

#your-type h2 {
  margin-bottom: 30px;
}

#your-type h2 img {}

#your-type .your-type-wrap {
  background-color:#f2e3c3;
  width: 100%;
  padding: 35px 0 30px;
}

#your-type ul {
  display: flex;
  justify-content: space-between;
  max-width: 1200px;
  margin: 0 auto;
}

#your-type ul li {
  width: calc(20% - 18px);
}

#your-type ul li a {
  display: block;
}

#your-type ul li a img {}

#your-type ul li a img:hover {
  transform: scale(1.05, 1.05);
  transition: 0.3s all;
  opacity: 0.5;
}

a img:hover {
  transform: scale(1.1, 1.1);
  transition: 0.3s all;
  opacity: 0.7;
}

#your-type p {
  text-align: center;
  margin: 30px auto 0;
}

#your-type p img {
  width: auto;
}

@media screen and (max-width: 959px) {
  #your-type {}
  #your-type h2 {}
  #your-type h2 img {}
  #your-type .your-type-wrap {}
  #your-type ul {
    flex-wrap: wrap;
    padding: 0 20px;
    justify-content: flex-start;
  }
  #your-type ul li {
    width: calc(50% - 40px);
    margin: 20px 20px;
  }
  #your-type ul li a {}
  #your-type ul li a img {}
  #your-type p {}
  #your-type p img {}
}

@media screen and (max-width: 480px) {
  #your-type {
    padding-top: 30px;
  }
  #your-type h2 {}
  #your-type h2 img {}
  #your-type .your-type-wrap {
    padding: 40px 10px 1px;
  }
  #your-type ul {
    padding: 0;
  }
  #your-type ul li {
    margin: 10px 5px;
    width: calc(50% - 10px);
  }
  #your-type ul li a {}
  #your-type ul li a img {}
  #your-type p {}
  #your-type p img {
    width: 100%;
  }
}

/*============================
#voice
============================*/

#voice {padding-top: 0;}

#voice .your-type-wrap {
  width: 100%;
  padding: 35px 0 30px;
}

#voice ul {
  display: flex;
  justify-content: space-between;
  max-width: 1200px;
  margin: 0 auto;
}

#voice ul li {
  width: calc(50% - 18px);
}

#voice ul li a {
  display: block;
}

@media screen and (max-width: 959px) {
  #voice {}
  #voice .your-type-wrap {}
  #voice ul {
    flex-wrap: wrap;
    padding: 0 20px;
    justify-content: flex-start;
  }
#voice ul li {
    width: calc(100% - 0px);
    margin: 10px auto;
}
}

@media screen and (max-width: 480px) {
  #voice {
    padding-top: 30px;
  }
  #voice ul {
    padding: 0;
  }
  #voice ul li {
    width: calc(100% - 0px);
    margin: 10px auto;
  }
}


/*============================
#merit
============================*/

#merit {
  text-align: center;
}

#merit h2 {
  margin-bottom: 40px;
}

#merit h2 img {}

#merit ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  max-width: 1200px;
  margin: 0 auto;
}

#merit ul li {
  width: calc(25% - 20px);
  margin: 10px;
}

#merit ul li img {}

#merit a {
  margin: 50px auto 90px;
  display: inline-block;
}

#merit a img {
    width: 100%;
    max-width: 480px;
}

@media screen and (max-width: 959px) {
  #merit {}
  #merit h2 {}
  #merit h2 img {}
  #merit ul {
    padding: 0 20px;
	   justify-content: flex-start;
 
  }
  #merit ul li {
    width: calc(50% - 20px);
  }
  #merit ul li img {}
  #merit a {}
  #merit a img {}
}

@media screen and (max-width: 480px) {
  #merit {}
  #merit h2 {}
  #merit h2 img {}
  #merit ul {
    padding: 0;
    position: relative;
    left: 12px;
  }
  #merit ul li {
    margin: 0 4px;
  }
  #merit ul li img {}
  #merit a {
    margin: 20px auto 30px;
  }
  #merit a img {
    width: 80%;
  }
}


/*============================
#flow
============================*/

#flow {
  background: url(../img/flow-bg.jpg) no-repeat;
  background-size: cover;
  background-position: 50% 67%;
  padding: 0;
  overflow: hidden;
  position: relative;
}

#flow::before {
  position: absolute;
  content: "";
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgb(229, 229, 229, 0.7);
  z-index: 1;
}

#flow h2 {
  margin-top: 60px;
  z-index: 2;
  position: relative;
}

#flow h2 img {}

#flow ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  max-width: 1100px;
  margin: 60px auto 80px;
  z-index: 2;
  position: relative;
}

#flow ul li {
  width: calc(25% - 25px);
}

#flow ul li img {}

@media screen and (max-width: 959px) {
  #flow {}
  #flow::before {}
  #flow h2 {}
  #flow h2 img {}
  #flow ul {
    padding: 0 100px;
  }
  #flow ul li {
    width: calc(50% - 40px);
    margin: 10px 20px;
  }
  #flow ul li img {}
}

@media screen and (max-width: 480px) {
  #flow {}
  #flow::before {}
  #flow h2 {}
  #flow h2 img {}
  #flow ul {
    padding: 0;
    margin: 30px 10px;
  }
  #flow ul li {
    margin: 5px 0;
    width: calc(50% - 8px);
  }
  #flow ul li img {}
}


/*============================
#salary
============================*/

#salary {
  overflow: hidden;
}

#salary h2 {
  margin-bottom: 35px;
}

#salary h2 img {}

#salary .inner {
  /*max-width: 1100px;*/
  margin: 0 auto 50px;
  text-align: center;
  background: url(../img/salary-bg.jpg);
  overflow: hidden;
  position: relative;
}
/*
#salary .inner::before {
  content: "";
  width: calc(100% - 50px);
  height: calc(100% - 50px);
  border: 5px solid rgba(166, 147, 124, 0.5);
  ;
  position: absolute;
  top: 22.5px;
  right: 21.5px;
}
*/
#salary .inner p:first-child {
  margin: 80px 50px 16px;
}

#salary .inner p:last-child {
  margin: 20px auto 60px;
}

#salary .inner p img {
  width: auto;
}

#salary .inner ul {
  background-color: rgb(255, 255, 255, 0.8);
  display: flex;
  flex-wrap: wrap;
  padding: 23px 0 20px;
}

#salary .inner ul li {
  width: 50%;
}

#salary .inner ul li {}

#salary .inner ul li:nth-child(1) {
  order: 1;
  text-align: right;
}

#salary .inner ul li:nth-child(2) {
  order: 3;
  text-align: right;
}

#salary .inner ul li:nth-child(3) {
  order: 5;
  text-align: right;
}

#salary .inner ul li:nth-child(4) {
  order: 2;
  text-align: left;
}

#salary .inner ul li:nth-child(5) {
  order: 6;
  text-align: left;
}

#salary .inner ul li:nth-child(6) {
  order: 4;
  text-align: left;
}

#salary .inner ul li img {
  width: auto;
}

@media screen and (max-width: 959px) {
  #salary {}
  #salary h2 {}
  #salary h2 img {}
  #salary .inner {}
  #salary .inner::before {}
  #salary .inner p:first-child {}
  #salary .inner p:last-child {
    margin: 20px 70px 60px;
  }
  #salary .inner p img {
    width: 100%;
  }
  #salary .inner ul {
    padding: 0 18%;
  }
  #salary .inner ul li {}
  #salary .inner ul li {
    width: 100%;
  }
  #salary .inner ul li:nth-child(1) {
    text-align: left;
    position: relative;
    left: 80px;
  }
  #salary .inner ul li:nth-child(2) {
    text-align: left;
    order: 2;
    position: relative;
    left: 80px;
  }
  #salary .inner ul li:nth-child(3) {
    order: 3;
    text-align: left;
    position: relative;
    left: 80px;
  }
  #salary .inner ul li:nth-child(4) {
    display: none;
  }
  #salary .inner ul li:nth-child(5) {
    order: 4;
  }
  #salary .inner ul li:nth-child(6) {
    order: 5;
  }
  #salary .inner ul li img {}
}

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

		#salary {padding-top: 40px;}

		#salary h2 {margin-bottom: 0;}

		#salary h2 img {}

		#salary .inner {
			background: url(../img/salary-bg-sp.jpg);
			overflow: hidden;
			position: relative;
		}

		#salary .inner::before {display: none;}

		#salary .inner p:first-child {margin: 50px 10px 30px;}

		#salary .inner p:last-child {
			margin: 30px 20px;
		}

		#salary .inner p img {}
		#salary .inner ul {
			padding: 20px 15px;
		}

		#salary .inner ul li {}
		#salary .inner ul li {}
		#salary .inner ul li:nth-child(1) {
			left: 30px;
		}

		#salary .inner ul li:nth-child(2) {
			left: 30px;
		}

		#salary .inner ul li:nth-child(3) {
			left: 30px;
		}

		#salary .inner ul li:nth-child(4) {}
		#salary .inner ul li:nth-child(5) {}
		#salary .inner ul li:nth-child(6) {
			position: relative;
			left: -20px;
		}

		#salary .inner ul li img {
			width: 100%;
		}
	}

/*============================
#average
============================*/

#average {
}

#average .bg {
  background: url(../img/average-bg-02.jpg)no-repeat center top;
  padding: 0;
  overflow: hidden;
  position: relative;
}

/*
#average::before {
  content: "";
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.5);
  position: absolute;
  top: 0;
  left: 0;
}
*/

#average .inner {
  display: flex;
  flex-wrap: wrap;
  max-width: 1100px;
  margin: 0 auto;
  position: relative;
}

#average .inner .low-l {
  width: 400px;
  display: flex;
  align-items: center;
  justify-content: center;
}

#average .inner .low-l img {
  width: auto;
}

#average .inner .low-r {
    width: calc(100% - 400px);
    padding-top: 60px;
    padding-left: 74px;
}

#average .inner .low-r img {
  width: auto;
  display: block;
  margin-bottom: 40px;
}

#average a {
    margin: 90px auto 90px;
    display: inline-block;
}

#average a img {
    width: 100%;
    max-width: 480px;
}

@media screen and (max-width: 959px) {
  #average {}
	
  #average .bg {    
	    background: url(../img/average-bg-02-sp.jpg)no-repeat center top;

	  background-size: cover;
  }
	
  #average .inner {
    padding: 0 20px;
  }
  #average .inner .low-l {
    width: 40%;
    padding-right: 30px;
  }
  #average .inner .low-l img {
    width: 100%;
  }
  #average .inner .low-r {
    width: 60%;
  }
  #average .inner .low-r img {
    width: 100%;
  }
}

@media screen and (max-width: 480px) {
  #average {}
	
  #average .bg {
  }
		
  #average .inner {}
  #average .inner .low-l {
    width: 100%;
    padding: 60px 20px 0;
  }
  #average .inner .low-l img {}
  #average .inner .low-r {
    width: 100%;
    padding: 5px;
  }
  #average .inner .low-r img {}
	
  #average a {
    margin: 20px auto 30px;
  }
  #average a img {
    width: 80%;
  }
}


/*============================
#qa
============================*/

#qa {
  background-color:#f2e3c3;
}

#qa h2 {}

#qa h2 img {}

#qa .inner {
  overflow: hidden;
  text-align: left;
}

#qa .inner .accbox {}

#qa .inner .accbox label {}

.accbox {
  margin: 40px auto 40px;
  padding: 0;
  width: 100%;
  max-width: 950px;
}

.accbox label {
  display: block;
  margin: 0 0 10px;
  padding: 11px 12px;
  color: #333333;
  font-weight: bold;
  background: #fff;
  cursor: pointer;
  transition: all 0.5s;
  font-size: 1.375rem;
  position: relative;
}

.accbox label::before {
  /* content: ""; */
  /* background: url(../img/q.png) no-repeat; */
  /* background-size: contain; */
  /* display: inline-block; */
  /* width: 60px; */
  /* height: 40px; */
  /* position: relative; */
}

.accbox label:hover {
  background: #ECECEC;
}

.accbox input {
  display: none;
}

.accbox .accshow {
  height: 0;
  padding: 0;
  overflow: hidden;
  opacity: 0;
  transition: 0.8s;
  margin-bottom: 20px;
  font-size: 1.125rem;
  line-height: 26px;
}

.accbox .accshow p {
  display: inline-block;
  position: relative;
  padding: 0 0 0 70px;
}

.accbox .accshow p::before {
  content: "";
  background: url(../img/a.png) no-repeat;
  background-size: contain;
  display: block;
  width: 84px;
  height: 40px;
  position: absolute;
  top: 0px;
  left: 35px;
  margin: 0 15px 0 20px;
}

.cssacc:checked+.accshow {
  height: auto;
  padding: 5px;
  background-color: rgb(247, 247, 247);
  opacity: 1;
}

label {
  position: relative;
}

label::after {
  content: "";
  width: 29px;
  height: 29px;
  background: url(../img/qa-button-sp.png);
  position: absolute;
  top: 13px;
  background-size: cover;
  right: 30px;
}

@media screen and (max-width: 1200px) {
  #faq h2 {
    font-size: 1.875rem;
  }
  .accbox {
    margin: 30px 0 90px;
  }
  .accbox label {
    font-size: 1.25rem;
  }
  .accbox .accshow p {
    padding: 0 0 0 60px;
  }
  .accbox .accshow p::before {
    left: -5px;
  }
  label::after {
    content: "";
    width: 29px;
    height: 29px;
    background: url(../img/qa-button-sp.png);
    position: absolute;
    top: 13px;
    right: 17px;
    background-size: cover;
  }
}

@media screen and (max-width: 768px) {
  .accbox {
    margin: 30px 0 30px;
  }
}


/*============================
#label1
============================*/

#qa .inner .accbox input#label1.cssacc {}

#qa .inner .accbox .accshow {}

#qa .inner .accbox .accshow p {}


/*============================
#label2
============================*/

#qa .inner .accbox input#label2.cssacc {}


/*============================
#label3
============================*/

#qa .inner .accbox input#label3.cssacc {}


/*============================
#label4
============================*/

#qa .inner .accbox input#label4.cssacc {}

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

@media screen and (max-width: 480px) {
  #qa .inner .accbox label {
    padding: 11px 40px 11px 12px;
    font-size: 16px;
  }
  label::after {
    content: "";
    width: 15px;
    height: 15px;
    background: url(../img/qa-button-sp.png);
    position: absolute;
    top: 20px;
    right: 17px;
    background-size: cover;
  }
  .accbox .accshow p {
    padding: 0 20px 0 20px;
    font-size: 16px;
  }
}


/*============================
#entry
============================*/

#entry {
  padding-bottom: 50px;
}

#entry h2 {
  margin-bottom: 35px;
}

#entry h2 img {}

#entry p {
  text-align: center;
  margin-bottom: 35px;
  font-size: 20px;
}

#entry p img {
  width: auto;
}

#entry ul {
  display: flex;
  flex-wrap: wrap;
  max-width: 900px;
  justify-content: space-between;
  margin: 0 auto;
}

#entry ul li {
  width: calc(50% - 13px);
}

#entry ul li img {}

@media screen and (max-width: 959px) {
  #entry {}
  #entry h2 {}
  #entry h2 img {}
  #entry p {}
  #entry p img {}
  #entry ul {
    justify-content: space-around;
    padding: 0 20px;
  }
  #entry ul li {}
  #entry ul li img {}
}

@media screen and (max-width: 480px) {
  #entry {}
  #entry h2 {}
  #entry h2 img {}
  #entry p {}
  #entry p img {
    width: 90%;
  }
  #entry ul {}
  #entry ul li {
    width: 100%;
  }
  #entry ul li img {}
}


/*============================
#covid19
============================*/

#covid19 {
  background-size: auto auto;
  background-color: rgba(1, 210, 255, 0.21);
  background-image: repeating-linear-gradient(135deg, transparent, transparent 18px, rgba(0, 212, 255, 0.27) 18px, rgba(0, 212, 255, 0.27) 34px);
  overflow: hidden;
}

#covid19 img {
  max-width: 900px;
  margin: 0 auto;
  display: block;
  margin-bottom: 50px;
}

@media screen and (max-width: 959px) {
  #covid19 {
    padding: 0;
    background: none;
  }
  #covid19 img {}
}

@media screen and (max-width: 480px) {
  #covid19 {}
  #covid19 img {}
}

#toggle, #toggle-menu {
  display: none;
}



/*============================
#first
============================*/

#first {
  overflow: hidden;
}

#first h2 {
  margin-bottom: 35px;
}

#first .inner {
  max-width: 1200px;
  margin: 0 auto 50px;
  text-align: center;
  overflow: hidden;
  position: relative;
}

#first .inner p {
    font-weight: bold;
}

#first .inner p:first-child {
	margin: 30px auto;
}

#first .inner p:last-child {
    line-height: 40px;
}

@media screen and (max-width: 959px) {
  #first .inner p {
  }
}

@media screen and (max-width: 480px) {
  #first {
    padding-top: 30px;
  }
	
#first .inner p {
    font-size: 13px;
    line-height: 28px;
    margin: 10px auto;
    padding: 0px 3px;
}
	
#first .inner p:last-child {
    line-height: 30px;
}
}


/*============================
#about
============================*/

#about {
  overflow: hidden;
}

#about h2 {
  margin-bottom: 35px;
}

#about .inner {
  margin: 0 auto 50px;
  text-align: center;
  overflow: hidden;
  position: relative;
}

#about .inner p {
    font-weight: bold;
	margin: 30px auto;
    line-height: 40px;
}

@media screen and (max-width: 959px) {
  #about .inner p {
  }
}

@media screen and (max-width: 480px) {
  #about {
    padding-top: 0;
  }
	
	#about .inner p {
		font-size: 13px;
		line-height: 28px;
		margin: 10px auto;
		padding: 0px 3px;
	}
}

#about .point {
    line-height: 0;
}

#about .p-bg {
    padding: 48px 0;
}

	@media screen and (max-width: 480px) {
		#about .p-bg {
			padding: 0;
		}
	}

#about .p-bg:first-of-type {background: url(../img/point1.jpg) center top;}
#about .p-bg:nth-of-type(2) {background: url(../img/point2.jpg) center top;}
#about .p-bg:nth-of-type(3) {background: url(../img/point3.jpg) center top;}
#about .p-bg:nth-of-type(4) {background: url(../img/point4.jpg) center top;}
#about .p-bg:last-of-type {background: url(../img/point5.jpg) center top;}

	@media screen and (max-width: 480px) {
		#about .p-bg:first-of-type ,
		#about .p-bg:nth-of-type(2),
		#about .p-bg:nth-of-type(3),
		#about .p-bg:nth-of-type(4),
		#about .p-bg:last-of-type {background:none;}
	}

#about .point picture {
}

#about .point picture img {
    width: 100%;
    max-width: 900px;
    margin-right: 10%;
}

/*============================
#debut
============================*/

#debut {
  overflow: hidden;
}

#debut h2 {
  margin-bottom: 35px;
}

#debut .inner {
  margin: 0 auto 50px;
  text-align: center;
  overflow: hidden;
  position: relative;
}


@media screen and (max-width: 480px) {
  #debut {
    padding-top: 0;
  }
}

#debut h2 {
  margin-bottom: 0;
}


#debut .step {
    line-height: 0;
}

#debut .step .s-innr {
    margin: 80px auto;
}

	@media screen and (max-width: 480px) {
		#debut .step .s-innr {
			margin: 40px auto;
		}
	}



#debut .step picture {
}

#debut .step picture img {
    width: 100%;
    max-width: 1090px;
}

	@media screen and (max-width: 480px) {
		#debut .step picture img {
			width: 90%;
		}
	}

@media screen and (min-width: 480px) {
  .sp {
   display: none;
  }
}

@media screen and (max-width: 480px) {
  .sp {
   display: block;
  }
}