@charset "UTF-8";
/* =====
 * LAYOUT :: ALL DEVICE
=================================================================== */
#Main .block-recruit-01 {background: transparent url("../img/recruit/bg_01.webp") no-repeat 50% / cover;}
#Main .block-recruit-01 h2 {text-align: center;letter-spacing: 0.25em;font-size: 87.5%;color: #fff;transition: letter-spacing var(--easing) 1200ms 400ms;}
#Main .block-recruit-01 h2 + p {text-align: center;letter-spacing: 0.25em;font-size: 200%;color: #fff;mix-blend-mode: soft-light;transition: letter-spacing var(--easing) 1200ms 400ms;}
body.loaded #Main .block-recruit-01 h2.staging {letter-spacing: 0.2em;}
body.loaded #Main .block-recruit-01 h2 + p.staging {letter-spacing: 0.2em;}

#Main .block-recruit-02 p {margin-bottom: 2em;text-align: center;line-height: 2;}
#Main .block-recruit-02 .container {padding: 4em 0 1.5em;}

#Main .block-recruit-03 .outline .grid-list {border-top: 1px solid #ddd;}
#Main .block-recruit-03 .outline .grid-list .item {border-bottom: 1px solid #ddd;}
#Main .block-recruit-03 .outline .grid-list .item > div:nth-child(1) {background-color: #f5f8f9;font-weight: bold;}
#Main .block-recruit-03 .outline .grid-list .item p {margin: 0;}
#Main .block-recruit-03 .outline .grid-list .item ul li {margin: 0;}
#Main .block-recruit-03 .outline .grid-list .item ol {padding-left: 1.5em;}
#Main .block-recruit-03 .outline .grid-list .item ol li {margin: 0;list-style: decimal;}
#Main .block-recruit-03 .outline .grid-list .item.map > div:nth-child(2) {flex-direction: column;align-items: flex-start;}
#Main .block-recruit-03 .outline .grid-list .item.map > div:nth-child(2) iframe {margin-top: 1em;width: 100%;height: 20em;}
#Main .block-recruit-03 .ttl-style-02 {padding-left: 0;}
#Main .block-recruit-03 .ttl-style-02 small {margin-left: 1em;font-size: 62.5%;color: #888;}

#Main .block-common-form {background-color: #f5f8f9;}
#Main .block-common-form .satori__custom_form {padding: 0.5em;}
/* =====
* LAYOUT :: PC
=================================================================== */
@media only screen and (min-width: 769px) {
  #Main .block-recruit-01 h2 {max-width: 600px;width: 53.19%;}
  #Main .block-recruit-01 .container {height: 30vw;display: flex;flex-direction: column-reverse;align-items: center;justify-content: center;}

  #Main .block-recruit-03 .outline {padding: 0 0 3em;}
  #Main .block-recruit-03 .outline .grid-list {overflow: hidden;}
  #Main .block-recruit-03 .outline .grid-list .item {display: flex;flex-wrap: nowrap;align-items: stretch;width: 100%;}
  #Main .block-recruit-03 .outline .grid-list .item > div:nth-child(1) {padding: 1em;width: 10em;display: flex;align-items: center;justify-content: center;}
  #Main .block-recruit-03 .outline .grid-list .item > div:nth-child(2) {padding: 1em;flex: 1;display: flex;align-items: center;}
  #Main .block-recruit-03 .outline .grid-list .item:nth-child(odd) {position: relative;}
  #Main .block-recruit-03 .outline .grid-list .item:nth-child(odd)::before {content: "";position: absolute;bottom: -1px;left: 0;width: 200%;height: 1px;background-color: #ddd;}
  #Main .block-recruit-03 .outline .grid-list .item.task  > div:nth-child(2) {justify-content: space-between;}
  #Main .block-recruit-03 .outline .grid-list .item.task  > div:nth-child(2) > p {width: calc(50% - 1em);}
  #Main .block-recruit-03 .container {padding: 3em 0 1em;}

  #Main .block-common-form {padding: 1.5em 0 4em;}
}
@media only screen and (min-width: 769px) and (max-width: 1128px) {}
/* =====
* LAYOUT :: SP
=================================================================== */
@media only screen and (max-width: 768px) {
  #Main .block-recruit-01 h2 + p {font-size: 150%;}
  #Main .block-recruit-01 .container {height: 50vw;display: flex;flex-direction: column-reverse;justify-content: center;align-items: center;}

  #Main .block-recruit-02 .container {padding: 3em 0 2em;}

  #Main .block-recruit-03 .outline {margin: 1.5em 0;}
  #Main .block-recruit-03 .outline .grid-list {display: block;}
  #Main .block-recruit-03 .outline .grid-list .item {display: block;padding-bottom: 1em;}
  #Main .block-recruit-03 .outline .grid-list .item:last-child {border-bottom: 0;padding-bottom: 0;}
  #Main .block-recruit-03 .outline .grid-list .item > div {padding: 0.5em 1em;}

  #Main .block-common-form {padding: 1.5em 0 3em;}
}
@media only screen and (max-width: 768px) and (orientation: landscape) {}
@media only screen and (max-width: 640px) {}
@media only screen and (max-width: 480px) {}