/*
0 - 640px:      Phone
640px - 768px:    Tablet portrait
768px - 1024px:   Tablet landscape
1024px - 1280px: is where our normal styles apply
1280px + :      Big desktop
*/
*,
*::after,
*::before {
  margin: 0;
  padding: 0;
  -webkit-box-sizing: inherit;
          box-sizing: inherit;
}

/* reset
------------------------------------------------ */
body,div,pre,p,a,img,form,fieldset,input,textarea,select,option,
dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,table,th,td,embed,object,
figure,figcaption {
	margin: 0;
	padding: 0;
}
html {
  /* This defines what 1rem is */
  /* 1 rem = 10px; 10px/16px = 62.5% */
  height: 100%;
  font-size: 62.5%;
  visibility: hidden;
  scroll-behavior: smooth;
  scroll-padding-top: 8rem; /* 固定ヘッダの高さ分 */
}
html.wf-active, html.loading-delay {
  visibility: visible;
}
@media only screen and (min-width: 2240px) {
  html { font-size: 80%; }
}
@media only screen and (min-width: 1025px) {
	.pc { display: block !important; }
	.sp { display: none !important; }
}
@media only screen and (max-width: 1024px) {
	.pc { display: none !important; }
	.sp { display: block !important; }
}

ul,ol { list-style: none; }
img { width: auto; height: auto; max-width: 100%; border: none; vertical-align: top; }
input[type=image],
input[type=submit] {
  background-position: 0 0;
  background-size: 200% auto;
  -webkit-transition: .3s;
  transition: .3s;
}
input[type=image]:hover,
input[type=submit]:hover {
  background-position: -100% 0;
}
input,textarea,select{ -webkit-appearance: none; -moz-appearance: none; appearance: none; }
a { text-decoration: none; }

/*
------------------------------------------------ */
body {
  color: #001D45;
  font-family: YuGothic,'Yu Gothic',Verdana,Meiryo,sans-serif;
  font-weight: 500;
  font-size: 1.6rem;
  line-height: 2;
  letter-spacing: 0.1em;
  font-style: normal;
  background-color: #F7F7F7;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}
/* スクロールバー非表示 */
body {
  -webkit-overflow-scrolling: touch
  overflow-y: scroll;
  -ms-overflow-style: none;    /* IE, Edge 対応 */
  scrollbar-width: none;       /* Firefox 対応 */
}
body::-webkit-scrollbar {  /* Chrome, Safari 対応 */
    display:none;
}
input,textarea,select {
  color: #012532;
  font-family: dnp-shuei-gothic-gin-std, sans-serif;
  line-height: 2;
  letter-spacing: 0.1em;
}
input::-webkit-input-placeholder, textarea::-webkit-input-placeholder { color: #C3C3C3; }
input::-moz-placeholder, textarea::-moz-placeholder { color: #C3C3C3; }
input:-ms-input-placeholder, textarea:-ms-input-placeholder { color: #C3C3C3; }
input::-ms-input-placeholder, textarea::-ms-input-placeholder { color: #C3C3C3; }
input::placeholder, textarea::placeholder { color: #C3C3C3; }
main {
  background-image: url(/recruit/image/bg.jpg);
  background-repeat: repeat;
}

h1,h2 {
  font-family: marydale, sans-serif;
  font-weight: 100;
  font-size: 4.6rem;
  line-height: 1;
  letter-spacing: 0.06em;
  font-style: normal;
}
h2.menu-h2 {
  font-family: marydale, sans-serif;
  font-weight: 100;
  font-size: 2.8rem;
  line-height: 1;
  letter-spacing: 0.06em;
  font-style: normal;
}
/* バルーン */
.about_headline__no {
  width: 10rem;
  height: 10.8rem;
  background-image: url(/recruit/image/balloon.png);
  background-size: 100%;
  background-repeat: no-repeat;

  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
     -ms-flex-align: center;
        align-items: center;
  -webkit-justify-content: center;
            -ms-flex-pack: center;
          justify-content: center;
}
h3 {
  color: #FFF;
  font-weight: 400;
  font-size: 3.2rem;
  line-height: 1;
  letter-spacing: 0.06em;
  font-style: normal;
}
h4 {
  font-weight: 800;
  font-size: 2.8rem;
  line-height: 2;
  letter-spacing: 0.06em;
  font-style: normal;
}
h5 {
  font-weight: 800;
  font-size: 2.2rem;
  line-height: 2;
  letter-spacing: 0.06em;
  font-style: normal;
}
h6 {
  font-weight: 800;
  font-size: 1.6rem;
  line-height: 2;
  letter-spacing: 0.06em;
  font-style: normal;
}
h6.h6-accent {
  padding-left: 0.8em;
  background-image: url(/recruit/image/icon/h6-arrow.svg);
  background-size: 0.6rem;
  background-position: left 45%;
  background-repeat: no-repeat;
}
.sub-title {
  margin-top: 8px;
  font-size: 1.8rem;
  font-weight: 600;
}
.accent { border-bottom: solid 2px #001D45; }
.accent-small { font-size: 1.2rem; }

.right { text-align: right; }
.left { text-align: left; }
.button_link { margin: 3rem 0 0; }

#information, #for-students, #message,
#about, #company-information-session,
#job-detail, #flow, #entry_link {
  padding-top: 8rem;
}

section {
  width: 100%;
  margin: auto;
}
.wrap_80 {
  width: 80%;
  margin: auto;
  max-width: 1200px;
}
.wrap_60 {
  width: 60%;
  margin: auto;
  max-width: 1000px;
}

.container-h { padding: 15rem 0 0; }
.p_l { padding: 10rem 0 10rem 0; }
.p_60 { padding-top: 0rem; padding-bottom: 10rem; }
.p_40 { padding-top: 4rem; padding-bottom: 4rem; }

a.button__default {
  background-image: linear-gradient(to right, #24C6DC 0%, #514A9D  51%, #24C6DC  100%)
}
a.button__default {
  color: #FFF;
  line-height: 1em;
  padding: 1em 3rem;
  background: transparent linear-gradient(213deg, #39ADF6 0%, #1383BC 48%, #002D9F 100%) 0% 0% no-repeat padding-box;
  opacity: 1;
  transition: color 0.3s ease;
  text-transform: uppercase;
  transition: 0.5s;
  background-size: 200% auto;
}
a.button__default:hover {
  background-position: right center; /* change the direction of the change here */
  text-decoration: none;
}

.flex {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
.flex_center {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
     -ms-flex-align: center;
        align-items: center;
}

/* JOB DETAIL */
table.details {
  width: 100%;
  margin: 6rem 0;
  border-collapse: collapse;
  background-color: #FFF;
  line-height: 1.8;
}
table.details tr {
}
table.details th {
  width: 20%;
  border-bottom: solid 2px #2698D9;
}
table.details td {
  width: 80%;
  padding: 2rem 4rem 2rem 0;
  text-align: left;
  border-bottom: solid 2px #2698D9;
}
table.details tr:first-child th {
  padding: 4rem 0 2rem;
}
table.details tr:last-child th {
  padding: 2rem 0 4rem;
  border-bottom: none;
}
table.details tr:first-child td {
  padding: 4rem 4rem 2rem 0;
}
table.details tr:last-child td {
  padding: 2rem 4rem 4rem 0;
  border-bottom: none;
}

/* LINE */
.line {
  width: 60%;
  max-width: 1000px;
  margin: auto ;
}
.line__content {
  margin-top: 3rem;
  padding: 6rem;
  border: solid 4px #1EB900;
  background-color: #FFF;
}
.line__detail {
  padding-top: 6rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
     -ms-flex-align: start;
        align-items: flex-start;
  -webkit-box-pack: start;
     -ms-flex-pack: start;
   justify-content: flex-start;
   flex-direction: row;
}
.line__item1 { width: 30%; }
.button img { height: 45px; }
.line__item2 {
  padding-left: 6rem;
  text-align: left;
}
@media only screen and (max-width: 1024px) {
  /* LINE */
  .line__detail {
    padding-top: 3rem;
    flex-direction: column;
  }
  .line__item1 { width: 100%; }
  .line__item2 {
    padding-top: 6rem;
    padding-left: 0;
  }
}

/* ENTRY */
.entry_link {
  margin: auto;
  width: 100%;
  text-align: center;
}
.entry_link a {
  color: #FFF;
  width: 100%;
  height: 35rem;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
}
.entry_link a:hover {
  font-size: 5.6rem;
}

/* footer */
.footer {
  margin: auto;
  padding-top: 6rem;
  background-color: #FFF;
  font-size: 1.2rem;
  line-height: 2;
  letter-spacing: 0.06em;
  font-style: normal;
}
.footer-logo {
  width: 100%;
}
.footer-logo img {
  width: 40%;
  margin-bottom: 4rem;
}
.page-top_button {
  width: 12rem;
  height: 13rem;
  position: relative;
  text-align: right;
  background-image: url(/recruit/image/balloon/default.png);
  background-size: 100% auto;
  background-position: center;
  background-repeat: no-repeat;
}
.page-top_button img {
  width: 18%;
  max-width: 20rem;
  position: absolute;
  margin: auto;
  left: 0;
  right: 0;
  height: 90%;
}
p.footer-tel {
  padding-left: 1.5em;
  background-image: url(/recruit/image/icon/tel.svg);
  background-size: 1.4rem;
  background-position: left center;
  background-repeat: no-repeat;
}
@media only screen and (max-width: 1023px) {
  #information, #for-students, #message,
  #about, #company-information-session,
  #job-detail, #flow, #entry_link {
    padding-top: 6rem;
  }

  html {
    scroll-padding-top: 6rem; /* 固定ヘッダの高さ分 */
  }
  body {
    font-size: 1.4rem;
    line-height: 1.8;
    letter-spacing: 0.1em;
  }
  h1 { font-size: 3.6rem; line-height: 1; }
  h2,h3 { font-size: 2.8rem; line-height: 1; }
  /* バルーン */
  .about_headline__no {
    width: 6rem;
    height: 6.6rem;
  }
  h2.menu-h2 { font-size: 1.8rem; }
  h3 { font-size: 1.8rem; }
  h4 { font-size: 2.0rem; line-height: 1.8; }
  h5 { font-size: 1.6rem; line-height: 1.6; }
  h6 { font-size: 1.4rem; line-height: 1.6; }
  /* h6.h6-accent { margin-bottom: 1rem; } */

  .sub-title { margin-top: 0.8rem; font-size: 1.4rem; }
  .accent-small { font-size: 1.2rem; }

  .wrap_80 { width: 90%; max-width: 90%; }
  .wrap_60 { width: 80%; max-width: 1000px; }

  .container-h { padding: 12rem 0 0; }
  .p_l { padding: 3rem 0 4rem 0; }
  .p_60 { padding-top: 0; padding-bottom: 5rem; }
  .p_40 { padding-top: 2rem; padding-bottom: 2rem; }

  /* ENTRY */
  .entry_link a { height: 14rem; }

  /* JOB DETAIL */
  table.details {
    margin: 3rem 0;
  }
  table.details tr {
    width: 100%;
    display: block;
  }
  table.details th {
    width: 100%;
    padding: 1rem 1rem 0;
    border-bottom: none;
  }
  table.details td {
    display: block;
    width: 100%;
    padding: 1rem 1rem 1rem;
    float: left;
    clear: both;
  }
  table.details tr:first-child th {
    padding: 2rem 1rem 0;
  }
  table.details tr:last-child th {
    padding: 1rem 1rem 0;
    border-bottom: none;
  }
  table.details tr:first-child td {
    padding: 1rem 1rem 1rem;
  }
  table.details tr:last-child td {
    padding: 1rem 1rem 2rem;
    border-bottom: none;
  }

  /* LINE */
  .line {
    width: 90%;
    max-width: 90%;
    margin: auto ;
  }
  .line__content {
    margin-top: 3rem;
    padding: 2rem;
  }
  .line__detail {
    padding-top: 1rem;
  }
  .button img { height: 40px; }
  .line__item2 { padding-top: 3rem; }

  /* footer */
  .footer { font-size: 1.2rem; }
  .footer__text {
    width: 80%;
    background-size: auto 40%;
    background-position: top right;
  }
  .footer-logo img {
    width: 60%;
    margin-bottom: 2rem;
  }
  .page-top_button {
    width: 14%;
    background-size: 100% auto;
    background-position: top right;
  }
  .page-top_button img {
    width: 18%;
    max-width: 20rem;
    height: 76%;
  }
  p.sp-footer {
    width: 90%;
    margin: auto;
    padding: 1rem 0;
    text-align: center;
    font-size: 1.0rem;
  }
}

@media only screen and (max-width: 767px) {
  body { font-size: 1.4rem; }
  .wrap_60 { width: 90%; max-width: 1000px; }
  /* ENTRY */
  .entry_link a { height: 18rem; }
  /* footer */
  .footer__text { width: 80%; }
  .page-top_button {
    width: 20%;
    background-size: 100% auto;
    background-position: top left;
  }
  .page-top_button img {
    height: 50%;
  }
}