@charset "UTF-8";
.inMainVisual {
  width: 100%;
  height: 250px;
  background-size: cover;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  position: relative;
}
.inMainVisual h2 {
  width: 100%;
  position: absolute;
  top: 90px;
  left: 50%;
  margin-left: -50%;
  font-size: 22px;
  color: #000;
  text-align: center;
  font-weight: normal;
  z-index: 3000;
}
.inMainVisual span {
  font-size: 12px;
  border-top: 2px solid #000;
  width: 80%;
  display: block;
  margin: 0px auto;
  padding: 5px 0px 0px;
}
.inMainVisual .filterBox {
  background: rgba(255, 255, 255, 0.3);
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0px;
  left: 0px;
  z-index: 2000;
}
.visualImage01 {
  background-image: url(/recruit/sp/image/howto_main01.jpg);
}
.visualImage02 {
  background-image: url(/recruit/sp/image/howto_main02.jpg);
}
.visualImage03 {
  background-image: url(/recruit/sp/image/howto_main03.jpg);
}
.visualImage04 {
  background-image: url(/recruit/sp/image/howto_main04.jpg);
}
.visualImage04 h2 {
  top: 140px;
}
.howtoBack {
  background: #f8f7f7;
  text-align: center;
  padding: 0px 0px 10px;
}
.howtoBack .cptTxt {
  width: 100%;
  padding: 20px 0px 0px;
  margin: 0px auto;
  display: block;
}
.howtoBack .cptTxt h3 {
  padding: 0px 0px 10px;
}
.howtoBack .cptTxt strong {
  font-size: 20px;
  text-align: center;
  display: block;
}
.howtoBack .cptTxt .lineBox {
  background: #aaa;
  height: 4px;
  width: 80px;
  margin: 10px auto 0px;
}
.howtoBack .cptTxt span {
  font-size: 14px;
  display: block;
}
.howtoBack .cptTxt p {
  font-size: 12px;
  line-height: 20px;
  padding: 10px 0px;
}
.howtoBack .flowBox {
  padding: 20px 0px 0px;
}
.howtoBack div.imageBox {
  width: 100%;
  margin: 0px auto;
  line-height: 0px;
  font-size: 0px;
  position: relative;
}
.howtoBack div.imageBox img {
  width: 100%;
  height: auto;
  line-height: 0px;
  font-size: 0px;
}
.howtoBack div.imageBox .iconBox {
  display: block;
  position: absolute;
  top: 0px;
  left: 0px;
  background: #00a493;
  color: #FFF;
  padding: 10px 8px;
  line-height: 100%;
  font-size: 12px;
  font-weight: bold;
}
.howtoBack .flowInBox {
  padding: 15px 15px 0px;
}
.howtoBack .flowBoxA {
  width: 100%;
}
.howtoBack .flowBoxA .textBox {
  width: 100%;
  height: 100%;
  background: #000;
  color: #FFF;
  text-align: center;
  padding: 20px 0px;
  box-sizing: border-box;
}
.howtoBack .flowBoxA .textBox .capsData {
  font-size: 16px;
  font-weight: bold;
  line-height: 28px;
}
.howtoBack .flowBoxA .textBox .capsData span {
  font-size: 14px;
  display: block;
  padding: 0px;
  line-height: 120%;
}
.howtoBack .flowBoxA .textBox p {
  line-height: 160%;
  font-weight: normal;
  font-size: 12px;
}
.howtoBack .flowBoxA .textBox .underBoard {
  height: 1px;
  background: #FFF;
  display: block;
  width: 50px;
  margin: 10px auto;
}
.howtoBack .flowBoxA .photoBox {
  width: 50%;
  height: 100%;
  float: right;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: 50% 50%;
}
.howtoBack .flowBoxB {
  width: 100%;
}
.howtoBack .flowBoxB .textBox {
  width: 100%;
  height: 100%;
  background: #FFF;
  color: #000;
  text-align: center;
  padding: 20px 0px;
  box-sizing: border-box;
}
.howtoBack .flowBoxB .textBox .capsData {
  font-size: 16px;
  font-weight: bold;
  line-height: 28px;
}
.howtoBack .flowBoxB .textBox .capsData span {
  font-size: 14px;
  display: block;
  padding: 0px 0px 10px;
}
.howtoBack .flowBoxB .textBox p {
  line-height: 160%;
  font-weight: normal;
  font-size: 12px;
}
.howtoBack .flowBoxB .textBox .underBoard {
  height: 1px;
  background: #000;
  display: block;
  width: 50px;
  margin: 10px auto;
}
.howtoBack .flowBoxB .photoBox {
  width: 50%;
  height: 100%;
  float: right;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: 50% 50%;
}
.howtoBack .flowBoxC {
  width: 100%;
}
.howtoBack .flowBoxC .textBox {
  width: 100%;
  height: 100%;
  background: #00a493;
  color: #FFF;
  text-align: center;
  padding: 20px 0px;
  box-sizing: border-box;
}
.howtoBack .flowBoxC .textBox .capsData {
  font-size: 16px;
  font-weight: bold;
  line-height: 28px;
}
.howtoBack .flowBoxC .textBox .capsData span {
  font-size: 14px;
  display: block;
  padding: 0px;
  line-height: 120%;
}
.howtoBack .flowBoxC .textBox p {
  line-height: 160%;
  font-weight: normal;
  font-size: 12px;
}
.howtoBack .flowBoxC .textBox img {
  width: 50%;
  height: auto;
  margin: 0px auto;
}
.howtoBack .flowBoxC .textBox .underBoard {
  height: 1px;
  background: #FFF;
  display: block;
  width: 50px;
  margin: 10px auto;
}
.howtoBack .flowBoxC .photoBox {
  width: 50%;
  height: 100%;
  float: right;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: 50% 50%;
}
.howtoBack .flowBoxC .inTxt {
  padding: 10px 40px;
}
.howtoBack .flowBoxC .inTxt strong {
  display: block;
  padding: 0px 0px 10px;
}
.howtoBack .flowBoxC .lastBox {
  width: 100%;
  background: #00a493;
  color: #FFF;
  text-align: center;
  padding: 0px 0px 0px;
  margin-bottom: -10px;
  box-sizing: border-box;
}
.howtoBack .flowBoxC .lastBox img {
  width: 100%;
  height: auto;
}
.howtoBack .flowBoxC .lastBox strong {
  font-size: 18px;
  padding: 10px 0px 20px;
  display: block;
}
.howtoBack .flowBoxC .lastBox strong span {
  display: block;
  font-size: 14px;
}
.howtoBack .flowArrow {
  background: #00a493;
  padding: 5px 10px;
  width: 100%;
  box-sizing: border-box;
}
.howtoBack .flowArrow img {
  width: 100%;
  height: auto;
}
.howtoBack .flowDataBox {
  background: #000;
  padding: 15px;
  color: #FFF;
}
.howtoBack .flowDataBox .swiper-slide {
  margin-left: 0px;
}
.howtoBack .flowDataBox .swiper-slide img {
  width: 100%;
  height: auto;
}
.howtoBack .flowDataBox .swiper-slide .textBoxIn {
  background: #FFF;
  padding: 0px;
  text-align: left;
  font-size: 14px;
  color: #000;
}
.howtoBack .flowDataBox .swiper-slide span {
  display: block;
  padding: 5px;
  background: #00a493;
  color: #FFF;
  text-align: center;
  font-size: 18px;
}
.howtoBack .flowDataBox .swiper-slide p {
  padding: 10px;
  font-size: 14px;
}
.howtoBack .flowDataBox2 {
  color: #FFF;
}
.howtoBack .flowDataBox2 .swiper-slide {
  margin-left: 0px;
  position: relative;
}
.howtoBack .flowDataBox2 .swiper-slide img {
  width: 100%;
  height: auto;
}
.howtoBack .flowDataBox2 .swiper-slide .textBoxIn {
  background: #FFF;
  padding: 0px;
  width: 100%;
  text-align: left;
  font-size: 14px;
  color: #000;
  position: absolute;
  bottom: 0px;
  left: 0px;
}
.howtoBack .flowDataBox2 .swiper-slide span {
  display: block;
  padding: 5px;
  background: #00a493;
  color: #FFF;
  text-align: center;
  font-size: 18px;
}
.howtoBack .flowDataBox2 .swiper-slide p {
  padding: 10px;
  font-size: 14px;
}
.howtoBack .flowDataBox2 .underArrow img {
  width: 100%;
  height: auto;
}
.howtoBack .inFlowBox {
  width: 85%;
  padding: 10px 0px;
  margin: 0px auto;
}
.howtoBack .inFlowBox img {
  width: 50%;
  height: auto;
  display: block;
  margin: 0px auto;
}
.howtoBack .inFlowBox .pointTxt {
  text-align: center;
  padding: 0px 0px 20px;
}
.howtoBack .inFlowBox .pointTxt strong {
  font-weight: bold;
  font-size: 16px;
  display: block;
  padding: 5px 0px;
}
.howtoBack .inFlowBox .pointTxt p {
  font-size: 10px;
  line-height: 140%;
}
.howtoBack .movieCont {
  margin: 40px auto;
  padding: 8% 4%;
  border: solid 3px #00a493;
  box-sizing: border-box;
}
.howtoBack .movieCont h3 {
  padding: 0px 0px 20px;
}
.howtoBack .movieCont strong {
  font-size: 20px;
  line-height: 120%;
  text-align: center;
  display: block;
}
.howtoBack .movieCont .lineBox {
  background: #00a493;
  height: 3px;
  width: 80px;
  margin: 10px auto 0px;
}
.howtoBack .movieCont p {
  font-size: 14px;
  text-align: justify;
}
.howtoBack .movieCont .movieBox {
  margin: 20px auto 0;
}
.howtoBack .movieCont .movieBox h4 {
  margin-bottom: 15px;
}
.howtoBack .movieCont .movieBox .movie {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}
.howtoBack .movieCont .movieBox .movie iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
  display: block;
}
.howtoBack .movieCont .movieBox .movie:nth-child(2) {
  margin-bottom: 20px;
}
.howtoBack2 {
  background: #FFF;
  text-align: center;
  padding: 0px 0px 20px;
  width: 100%;
}
.howtoBack2 .cptTxt {
  width: 100%;
  padding: 20px 0px;
  margin: 0px auto;
  display: block;
}
.howtoBack2 .cptTxt h3 {
  padding: 0px 0px 10px;
}
.howtoBack2 .cptTxt strong {
  font-size: 20px;
  line-height: 120%;
  text-align: center;
  display: block;
}
.howtoBack2 .cptTxt .lineBox {
  background: #aaa;
  height: 3px;
  width: 80px;
  margin: 10px auto 0px;
}
.howtoBack2 .cptTxt span {
  font-size: 14px;
  display: block;
}
.howtoBack2 .cptTxt p {
  font-size: 12px;
  line-height: 200%;
  width: 95%;
  margin: 0px auto;
}
.howtoBack2 .interviewBox {
  width: 100%;
  height: 400px;
  background-image: url(/recruit/sp/image/howto04/image01.jpg);
  background-size: cover;
  background-position: 50% 50%;
  position: relative;
  margin: 0px 0px 200px;
}
.howtoBack2 .interviewBox .textBox {
  width: 100%;
  height: 150px;
  font-size: 10px;
  box-sizing: border-box;
  background: rgba(255, 255, 255, 0.7);
  padding: 15px;
  position: absolute;
  bottom: -164px;
  right: 0px;
}
.howtoBack2 .interviewBox .textBox .capsData {
  font-size: 20px;
  font-weight: bold;
  line-height: 22px;
}
.howtoBack2 .interviewBox .textBox .capsData span {
  font-size: 12px;
  display: block;
  padding: 0px 0px 0px;
}
.howtoBack2 .interviewBox .textBox p {
  line-height: 200%;
  font-weight: normal;
  font-size: 12px;
}
.howtoBack2 .interviewBox .textBox .underBoard {
  height: 1px;
  background: #000;
  display: block;
  width: 50px;
  margin: 10px auto 10px;
}
.howtoBack2 .flowBoxA {
  width: 100%;
}
.howtoBack2 .flowBoxA .textBox {
  width: 100%;
  height: 100%;
  background: #aaa;
  color: #FFF;
  text-align: center;
  padding: 20px 0px;
  box-sizing: border-box;
}
.howtoBack2 .flowBoxA .textBox .capsData {
  font-size: 20px;
  font-weight: bold;
  line-height: 22px;
}
.howtoBack2 .flowBoxA .textBox .capsData span {
  font-size: 12px;
  display: block;
  padding: 0px 0px 0px;
}
.howtoBack2 .flowBoxA .textBox p {
  line-height: 200%;
  font-weight: normal;
  font-size: 12px;
}
.howtoBack2 .flowBoxA .textBox .underBoard {
  height: 1px;
  background: #FFF;
  display: block;
  width: 50px;
  margin: 10px auto 10px;
}
.howtoBack2 .flowBoxA .photoBox {
  width: 100%;
  height: 200px;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: 50% 50%;
}
.howtoBack2 .flowBoxB {
  width: 100%;
}
.howtoBack2 .flowBoxB .textBox {
  width: 100%;
  background: #f8f7f7;
  color: #000;
  text-align: center;
  padding: 20px 0px;
  box-sizing: border-box;
}
.howtoBack2 .flowBoxB .textBox .capsData {
  font-size: 20px;
  font-weight: bold;
  line-height: 28px;
}
.howtoBack2 .flowBoxB .textBox .capsData span {
  font-size: 12px;
  display: block;
  padding: 0px 0px 10px;
}
.howtoBack2 .flowBoxB .textBox p {
  line-height: 200%;
  font-weight: normal;
  font-size: 12px;
}
.howtoBack2 .flowBoxB .textBox .underBoard {
  height: 1px;
  background: #000;
  display: block;
  width: 50px;
  margin: 10px auto 10px;
}
.howtoBack2 .flowBoxB .photoBox {
  width: 100%;
  height: 200px;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: 50% 50%;
}
.howtoBack2 .subImage {
  width: 100%;
}
.howtoBack2 .subImage img {
  width: 100%;
  height: auto;
}
.howtoBack2 .subImage p {
  text-align: left;
  font-size: 12px;
  line-height: 18px;
  padding: 20px 15px;
}
.underContents {
  width: 100%;
  box-sizing: border-box;
  padding: 20px 15px 40px;
}
.underContents strong {
  display: block;
  padding: 10px 0px;
}
.underContents img {
  width: 100%;
  height: auto;
}
.underContents p {
  font-size: 14px;
  line-height: 200%;
  padding: 0px 0px 20px;
}
.underTxt {
  width: 100%;
  text-align: center;
}
.underTxt strong {
  font-weight: bold;
  font-size: 14px;
  display: block;
  color: #00a493;
  padding: 15px 0px 0px;
}
.underTxt p {
  font-size: 12px;
  line-height: 140%;
}
.underTxt .lineBox {
  background: #000;
  height: 1px;
  width: 80px;
  margin: 15px auto 0px;
}
.underTxt img {
  width: 100%;
  height: auto;
}