@charset 'UTF-8';

@font-face {
  font-family: "Yu Gothic";
  src: local("Yu Gothic Medium");
  font-weight: 100;
}
@font-face {
  font-family: "Yu Gothic";
  src: local("Yu Gothic Medium");
  font-weight: 200;
}
@font-face {
  font-family: "Yu Gothic";
  src: local("Yu Gothic Medium");
  font-weight: 300;
}
@font-face {
  font-family: "Yu Gothic";
  src: local("Yu Gothic Medium");
  font-weight: 400;
}
@font-face {
  font-family: "Yu Gothic";
  src: local("Yu Gothic Bold");
  font-weight: bold;
}
@font-face {
  font-family: "Helvetica Neue";
  src: local("Helvetica Neue Regular");
  font-weight: 100;
}
@font-face {
  font-family: "Helvetica Neue";
  src: local("Helvetica Neue Regular");
  font-weight: 200;
}


html {
  font-family: 'Avenir','Helvetica Neue','Helvetica','Arial','Hiragino Sans','ヒラギノ角ゴシック',YuGothic,'Yu Gothic','メイリオ', Meiryo,'ＭＳ Ｐゴシック','MS PGothic'  
}
@media all and (-ms-high-contrast: none)  {
  html {
  font-family: Verdana, Meiryo, sans-serif;
}
}
@media all and (-ms-high-contrast: active) {
  html {
  font-family: Verdana, Meiryo, sans-serif;
}
}

html, body {
  width: 100%;
  margin: 0;
  padding: 0;
  font-size: 16px;
  color: #000;
}


p,
h1,
h2,
h3,
h4,
h5,
h6,
li,
th,
td,
dt,
dd {
  line-height: 1.5;
  margin: 0;
  letter-spacing: 0.05em;
}

/* link */
a:hover {
  opacity: 0.8;
}

/*font*/
.font-12 {
  font-size: 12px;
}
.font-14 {
  font-size: 14px;
}
.font-16 {
  font-size: 16px;
}
.font-18 {
  font-size: 18px;
}
.font-20 {
  font-size: 20px;
}
.font-22 {
  font-size: 22px;
}
.font-24 {
  font-size: 24px;
}
.font-26 {
  font-size: 26px;
}
.font-28 {
  font-size: 28px;
}
.font-30 {
  font-size: 30px;
}
.font-32 {
  font-size: 32px;
}


/*text-align*/
.text-right {
  text-align: right;
}
.text-left {
  text-align: left;
}
.text-center {
  text-align: center;
}


/*padding*/
.pa-4 {
  padding: 4px;
}
.pa-6 {
  padding: 6px;
}
.pa-8 {
  padding: 8px;
}
.pa-10 {
  padding: 10px;
}
.pa-20 {
  padding: 20px;
}

.p-4 {
  padding: 4px 0;
}
.p-6 {
  padding: 6px 0;
}
.p-8 {
  padding: 8px 0;
}
.p-10 {
  padding: 10px 0;
}
.p-20 {
  padding: 20px 0;
}
.p-40 {
  padding: 40px 0;
}
.p-50 {
  padding: 50px 0;
}

.pt-10 {
  padding-top: 10px;
}
.pt-20 {
  padding-top: 20px;
}
.pt-40 {
  padding-top: 40px;
}
.pt-50 {
  padding-top: 50px;
}
.pt-60 {
  padding-top: 60px;
}

.pr-2 {
  padding-right: 2px;
}
.pr-4 {
  padding-right: 4px;
}
.pr-8 {
  padding-right: 8px;
}
.pr-10 {
  padding-right: 10px;
}
.pr-20 {
  padding-right: 20px;
}
.pr-40 {
  padding-right: 40px;
}

.pb-10 {
  padding-bottom: 10px;
}
.pb-15 {
  padding-bottom: 15px;
}
.pb-20 {
  padding-bottom: 20px;
}
.pb-40 {
  padding-bottom: 40px;
}
.pb-50 {
  padding-bottom: 50px;
}

.pl-2 {
  padding-left: 2px;
}
.pl-4 {
  padding-left: 4px;
}
.pl-8 {
  padding-left: 8px;
}
.pl-10 {
  padding-left: 10px;
}
.pl-20 {
  padding-left: 20px;
}
.pl-40 {
  padding-left: 40px;
}


/*margin*/
.m-0a {
  margin: 0 auto;
}
.m-10 {
  margin: 10px 0;
}
.m-20 {
  margin: 20px 0;
}
.m-30 {
  margin: 30px 0;
}
.m-40 {
  margin: 40px 0;
}
.m-50 {
  margin: 50px 0;
}

.mt-10 {
  margin-top: 10px;
}
.mt-20 {
  margin-top: 20px;
}
.mt-40 {
  margin-top: 40px;
}
.mt-50 {
  margin-top: 50px;
}

.mr-10 {
  margin-right: 10px;
}
.mr-20 {
  margin-right: 20px;
}
.mr-40 {
  margin-right: 40px;
}

.mb-10 {
  margin-bottom: 10px;
}
.mb-20 {
  margin-bottom: 20px;
}
.mb-40 {
  margin-bottom: 40px;
}

.ml-10 {
  margin-left: 10px;
}
.ml-20 {
  margin-left: 20px;
}
.ml-40 {
  margin-left: 40px;
}

/*color*/
.light-blue {
  color: #E9F5FF;
}
.blue {
  color: #4785da;
}
.pink {
  color: #fa7ba7;
}
.deep-pink {
  color: #fd558f;
}
.green {
  color: #3B8677;
}
.white {
  color: #fff;
}
.bg-light-blue, .bg-light-blue>a {
  width: 100%;
  background-color: #E9F5FF;
  color: #fff;
  text-decoration: none;
}
.bg-blue, .bg-blue>a {
  width: 100%;
  background-color: #4785da;
  color: #fff;
  text-decoration: none;
}
.bg-pink, .bg-pink>a {
  width: 100%;
  background-color: #fa7ba7;
  color: #fff;
  text-decoration: none;
}
.bg-deep-pink, .bg-deep-pink>a {
  width: 100%;
  background: #fd558f;
  color: #fff;
  text-decoration: none;
}
.bg-light-pink, .bg-light-pink>a {
  width: 100%;
  background: #FAE0E9;
  /*color: #6e6e6e;*/
  text-decoration: none;
}
.bg-opacity-pink, .bg-opacity-pink>a {
  width: 100%;
  background: rgba(250,224,233,0.3);
  /* color: #6e6e6e;*/
  text-decoration: none;
}
.bg-light-gray, .bg-light-gray>a {
  width: 100%;
  background: #F7F7F7;
  color: #292929;
  text-decoration: none;
}
.bg-white, .bg-white>a {
  width: 100%;
  background: #fff;
  color: #292929;
  text-decoration: none;
}

/*width*/
.w10 {
  width: 10%;
}
.w20 {
  width: 20%;
}
.w30 {
  width: 30%;
}
.w40 {
  width: 40%;
}
.w50 {
  width: 50%;
}
.w60 {
  width: 60%;
}
.w70 {
  width: 70%;
}
.w80 {
  width: 80%;
}
.w90 {
  width: 90%;
}
.w100 {
  width: 100%;
}
.grid-col {
  display: inline-block;
  vertical-align: top;
}
.grid-col>* {
  letter-spacing: normal;
}
.grid {
  letter-spacing: -0.4em;
}


.flex {
  display: flex;
  flex-direction: row;
}
.button {
  cursor: pointer;
  display: inline-block;
  width: 100%;
  padding: 16px 0;
  border-radius: 6px;
  text-align: center;
  border-bottom: solid 2px;
  border-radius: 4px;
  box-shadow: inset 0 2px 0 rgba(255,255,255,0.2), 0 2px 2px rgba(0, 0, 0, 0.19);
}
.submit-button .button:hover {
  border-bottom: solid 2px;
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.30);
}
.button.bg-blue, .button.bg-blue:hover {
  border-color: #4485da;
}
.button.bg-light-pink, .button.bg-light-pink:hover {
  border-color: #ffc0d6;
}

/*mv*/
/*#mv {
    padding: 20px 0;
    }*/
#mv h1 {
  font-size: 38px;
  font-weight: bold;
}

header {
  margin-top: -10px;
  height: 153px;
}
.header-inner {
  position: relative;
}
.header-inner img {
  position: relative;
  top: -5px;
}
.header-inner h1 {
  position: relative;
  z-index: 0;
}
.header-inner h2 {
  position: absolute;
  top: 75px;
  left: 455px;
  z-index: 10;
  color: #333;
  font-size: 24px;
  font-weight: bold;
  line-height: 1.4;
  text-shadow:3px 3px 3px #ffffff;
}
.header-inner h2 span {
  background: linear-gradient(transparent 60%, #ffff66 60%);
}

.banner-container {
  width: 1000px;
  margin: 10px auto;
  text-align:center;
  padding-bottom: 10px;
}

.container {
  width: 1000px;
  margin: 0 auto;
}

.button-search {
  border: 1px solid #15aeec;
  background-color: #4485da;
  border-radius: 4px;
  color: #fff;
  line-height: 25px;
  -webkit-transition: none;
  transition: none;
  text-shadow: 0 1px 1px rgba(0, 0, 0, .3);
}
.button-search:hover {
  border:1px solid #1090c3;
  background-color: #71a1e3;
  opacity: 1;
}


/* footer */

.title-application {
  text-align: center;
  font-size: 16px;
}


.application-button {
  padding:15px;
  justify-content: space-between;
  align-items: center;
}

.application-button a {
  color: #fff;
  font-weight: bold;
  text-decoration: none;
}

.button-type{
  position: relative;
  background-color: #f7d034;
  border-radius: 4px;
  color: #fff;
  -webkit-transition: none;
  transition: none;
  text-shadow: 0 1px 1px rgba(0, 0, 0, .4);
  
}


.footer-application {
  padding: 40px 0 10px;
  background: #eef7ff;
}
.footer-application-box {
  width: 667px;
  margin: 0 auto;
  text-align: center;
}
.title-application {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 20px;
  text-align: center;
}
.application-button {
  display: flex;
  margin-top: 20px;
}
.application-button .button-type {
  font-size: 24px;
  display: flex;
  width: 50%;
  height: 50px;
  padding: 10px 10px;
  
  align-items: center;
  justify-content: center;
}
.application-button .button-type span {
  font-size: 14px;
  margin-left: 5px;
}
.application-button .button-type .fa {
  margin-left: 20px;
}

.application-button .button-type a:hover {
  top: -2px;
  opacity: 1;
  box-shadow: 0 5px 0 #f7ba59;
}
.button-document {
  border-bottom: solid 4px #a00002;
  background: #c8475d;
}

.button-experience {
  border-bottom: solid 4px #016c62;
  background: #009c89;
}
.button-interview {
  border-bottom: solid 4px #01366c;
  background: #00519f;
}

.button-type:hover {
  top: -2px;
  opacity: 1;
}
.button-document:hover {
  box-shadow: 0 5px 0 #a00002;
}
.button-experience:hover {
  box-shadow: 0 5px 0 #016c62;
}
.button-interview:hover {
  box-shadow: 0 5px 0 #01366c;
}

.application-button .fa {
  font-size: 13px;
  position: relative;
  top: -1px;
}


/* sns */
.share-sns {
  width: 500px;
  margin: 0 auto;
  padding:15px 10vw;
  text-align: center;
}
/*.share-sns h2 {
  font-size: 16px;
  margin-bottom: 10px;
  color: #4785da;
  text-align: center;
}*/
.share-sns-box {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.share-sns-box img {
  width: 40px;
  height: auto;
}


.footer-application-bnr {
  padding:40px 30px;
  background-color:#f5f5f5;
}
.footer-application-bnr h4 {
  font-size: 28px;
  font-weight: bold;
  line-height: 1.3;
  text-align: center;
}
.footer-application-bnr-box_upper {
  width: 1000px;
  margin: 20px auto 0 auto;
  text-align: center;
  display: flex;
  justify-content: space-between;
}
.footer-application-bnr-box_down{
  width: 1000px;
  margin: 20px auto 0 auto;
  text-align: center;
  display: flex;
  justify-content: center;

}

.footer-application-bnr img {
  margin-bottom: 10px;
}
.application-bnr-item {
  padding:15px 15px;
  width: 32%;
}
.application-bnr-item p {
  line-height: 1.5;
  letter-spacing: 0.01em;
}
.img-link img{
  height:100px;
  width: auto;
}


/* page-top */
#page-top {
  position: fixed;
  right: 10px;
  bottom: 20px;
}

#page-top a {
  display: table-cell;
  width: 50px;
  height: 50px;
  text-align: center;
  vertical-align: middle;
  text-decoration: none;
  color: #fff;
  background: #fa7ba7;
}

#page-top a:hover {
  text-decoration: none;
  opacity: .8;
}