/*!
Theme Name: origin
Theme URI: http://underscores.me/
Author: Underscores.me
Author URI: http://underscores.me/
Description: Description
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: origin
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready
This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.
origin is based on Underscores https://underscores.me/, (C) 2012-2017 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.
Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css
*/
html {
  font-size: 62.5%
}

@media screen and (max-width: 1200px) {
  html {
    margin: 0
  }
}

@media screen and (max-width: 960px) {
  html {
    margin: 0
  }
}

@media screen and (max-width: 768px) {
  html {
    font-size: 57.5%;
    margin: 0
  }
}

@media screen and (max-width: 480px) {
  html {
    margin: 0
  }
}

body {
  font-size: 1.6rem;
  line-height: 1.6;
  color: #000;
  font-family: 'Noto Serif JP', serif;
  font-weight: 500
}

main {
  display: block
}

a {
  color: #003296;
  text-decoration: none
}

.screen-reader-text {
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  -webkit-clip-path: inset(50%);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute !important;
  width: 1px;
  word-wrap: normal !important
}

.inner {
  width: 100%;
  max-width: 1080px;
  margin: auto;
  padding: 0;
  box-sizing: border-box
}

@media screen and (max-width: 1200px) {
  .inner {
    padding: 0 2%
  }
}

.flex {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-content: flex-start
}

#masthead {
  margin: 0
}

#masthead .inner {
  position: relative;
  max-width: 1190px;
  margin: auto
}

#masthead .inner .site-branding {
  margin: 1rem 0
}

#masthead .inner .site-branding img {
  max-width: 365px;
  width: 100%;
  height: auto
}

#masthead .inner .contact-area.flex {
  justify-content: space-between;
  align-items: center;
  flex-wrap: nowrap
}

@media screen and (max-width: 768px) {
  #masthead .inner .contact-area.flex {
    flex-wrap: wrap
  }
}

#masthead .inner .contact-area.flex .tel {
  max-width: 80%;
  margin: 1rem 1rem 2rem 0;
  font-size: 1.4rem
}

#masthead .inner .contact-area.flex .tel p {
  text-align: center
}

#masthead .inner .contact-area.flex .tel p .inb {
  display: inline-block
}

#masthead .inner .contact-area.flex .contact-link {
  position: relative;
  display: inline-block;
  height: 70px;
  padding: 1.5em 1.5em 1.5em 80px;
  box-sizing: border-box;
  color: #fff;
  font-size: 1.6rem;
  text-align: center;
  background: #a00000;
  box-sizing: border-box;
  min-width: 200px;
  text-align: center
}

#masthead .inner .contact-area.flex .contact-link::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 20px;
  display: block;
  width: 30px;
  height: 20px;
  margin: auto 0;
  background: url(images/common/icon_mail.svg) no-repeat center;
  background-size: contain
}

#masthead .inner .contact-area.flex .contact-link::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: block;
  width: calc(100% - 10px);
  height: calc(100% - 10px);
  margin: auto;
  box-sizing: border-box;
  transition: all 0.2s ease
}

#masthead .inner .contact-area.flex .contact-link:hover::after {
  border: 2px solid #fff
}

@media screen and (max-width: 480px) {
  #masthead .inner .contact-area.flex .contact-link {
    height: 40px;
    padding-top: 0.5em;
    padding-bottom: 0.5em
  }
}

@media screen and (max-width: 768px) {
  #masthead .inner .contact-area.flex .contact-link {
    position: fixed;
    display: flex;
    align-items: center;
    top: 0;
    right: 0;
    min-width: auto;
    height: 42px;
    margin: 0;
    padding: 0 1em;
    z-index: 999999
  }

  #masthead .inner .contact-area.flex .contact-link::before {
    position: relative;
    left: 0;
    margin-right: 1em
  }
}

@media screen and (max-width: 1020px) {
  #masthead .inner .head-nav-area.flex {
    justify-content: center
  }

  #masthead .inner .head-nav-area.flex .site-branding {
    width: 100%;
    text-align: center
  }

  #masthead .inner .head-nav-area.flex .site-branding img {
    max-width: 50%
  }

  #masthead .inner .head-nav-area.flex .contact-area.flex {
    justify-content: center
  }
}

#site-navigation #primary-menu {
  display: table;
  width: 100%
}

#site-navigation #primary-menu li {
  display: table-cell;
  padding: 1em;
  text-align: center
}

#site-navigation #primary-menu li.current_page_item {
  position: relative
}

#site-navigation #primary-menu li.current_page_item::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  max-width: 65px;
  height: 3px;
  margin: 0 auto;
  background: #a00000
}

#site-navigation #primary-menu li a {
  display: inline-block;
  text-align: center;
  color: #000;
  transition: all 0.2s ease
}

#site-navigation #primary-menu li a:hover {
  color: #a00000
}

@media screen and (max-width: 768px) {
  #site-navigation #primary-menu {
    display: none
  }
}

#main-footer {
  margin-top: 100px
}

@media screen and (max-width: 768px) {
  #main-footer {
    margin-top: 50px
  }
}

#main-footer .inner {
  max-width: 1080px;
  border-top: 1px solid #c8c8c8;
  padding-top: 6rem
}

#main-footer .inner .flex {
  width: 100%;
  max-width: 920px;
  margin: 0 auto;
  align-items: stretch;
  align-content: stretch;
  justify-content: space-between
}

#main-footer .inner .flex .address {
  position: relative;
  top: -2rem;
  width: 44%
}

@media screen and (max-width: 768px) {
  #main-footer .inner .flex .address {
    width: 100%;
    top: 0;
    text-align: center
  }
}

#main-footer .inner .flex .address .f-logo img {
  width: 100%;
  max-width: 400px;
  height: auto
}

#main-footer .inner .flex .address p {
  width: 100%;
  margin-top: 1rem;
  font-size: 1.4rem
}

#main-footer .inner .flex .address p span {
  display: inline-block;
  font-size: 1.4rem
}

#main-footer .inner .flex .address .links {
  width: 100%
}

#main-footer .inner .flex .address .links .contact-link {
  position: relative;
  display: inline-block;
  height: 70px;
  padding: 1.5em 1.5em 1.5em 80px;
  box-sizing: border-box;
  color: #fff;
  font-size: 1.6rem;
  text-align: center;
  background: #a00000;
  margin-top: 1rem;
  padding: 0.5em 1em;
  padding-left: 60px;
  height: auto
}

#main-footer .inner .flex .address .links .contact-link::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 20px;
  display: block;
  width: 30px;
  height: 20px;
  margin: auto 0;
  background: url(images/common/icon_mail.svg) no-repeat center;
  background-size: contain
}

#main-footer .inner .flex .address .links .contact-link::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: block;
  width: calc(100% - 10px);
  height: calc(100% - 10px);
  margin: auto;
  box-sizing: border-box;
  transition: all 0.2s ease
}

#main-footer .inner .flex .address .links .contact-link:hover::after {
  border: 2px solid #fff
}

@media screen and (max-width: 480px) {
  #main-footer .inner .flex .address .links .contact-link {
    height: 40px;
    padding-top: 0.5em;
    padding-bottom: 0.5em
  }
}

#main-footer .inner .flex .address .links .link-calender {
  position: relative;
  display: inline-block;
  height: 70px;
  padding: 1.5em 1.5em 1.5em 78.5px;
  box-sizing: border-box;
  color: #fff;
  font-size: 1.6rem;
  text-align: center;
  background: #a00000;
  margin-top: 1rem;
  padding: 0.5em 1em;
  padding-left: 60px;
  height: auto
}

#main-footer .inner .flex .address .links .link-calender::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 20px;
  display: block;
  width: 28.5px;
  height: 30px;
  margin: auto 0;
  background: url(images/common/icon_cal.svg) no-repeat center;
  background-size: contain
}

@media screen and (max-width: 480px) {
  #main-footer .inner .flex .address .links .link-calender {
    height: 40px;
    padding-top: 0.5em;
    padding-bottom: 0.5em
  }
}

#main-footer .inner .flex .map {
  width: 54%;
  height: 200px
}

#main-footer .inner .flex .map iframe {
  width: 100%;
  height: auto
}

@media screen and (max-width: 768px) {
  #main-footer .inner .flex .map {
    width: 100%;
    margin-top: 2rem
  }
}

#main-footer .f-bottom .copyright {
  max-width: 1080px;
  margin: 0 auto;
  padding: 1em 0;
  border-top: 1px solid #c8c8c8;
  text-align: center;
  font-size: 1.4rem
}

.w1200 {
  max-width: 1200px
}

.w1080 {
  max-width: 1080px
}

.w960 {
  max-width: 960px
}

.w100 {
  max-width: 100%
}

.red {
  color: #a00000
}

img {
  max-width: 100%;
  height: auto
}

#page-ttl {
  margin-bottom: 100px;
  padding: 60px 0;
  background-size: cover
}

@media screen and (max-width: 768px) {
  #page-ttl {
    margin-bottom: 50px
  }
}

#page-ttl h1 {
  text-align: center
}

#page-ttl h1 img {
  max-width: 90%
}

#page-ttl.ptl_advantage {
  background: url(images/advantage/h1_back_advantage.png) no-repeat center
}

#page-ttl.ptl_item {
  background: url(images/item/h1_back_item.png) no-repeat center
}

#page-ttl.ptl_recruit {
  background: url(images/recruit/h1_back_recruit.png) no-repeat center
}

a.link {
  position: relative;
  display: inline-block;
  padding: 3rem 8rem 3rem 6rem;
  box-sizing: border-box;
  border: 2px solid #003296
}

@media screen and (max-width: 768px) {
  a.link {
    padding: 2rem 6rem 2rem 4rem
  }
}

a.link::before {
  content: "";
  position: absolute;
  top: 0;
  right: 2rem;
  bottom: 0;
  display: block;
  margin: auto 0;
  background: url(images/common/icon_arrow01.svg) no-repeat center right;
  background-size: contain;
  width: 16px;
  height: 12px;
  transition: all 0.2s ease
}

a.link:hover {
  transition: all 0.2s ease
}

a.link:hover::before {
  right: 1.5rem
}

body.home h2 {
  margin-bottom: 3rem
}

body.home .s1 {
  margin-top: 100px
}

@media screen and (max-width: 768px) {
  body.home .s1 {
    margin-top: 50px
  }
}

body.home .s1 .inner>p {
  position: relative;
  left: 10%;
  max-width: 90%
}

@media screen and (max-width: 768px) {
  body.home .s1 .inner>p {
    position: static;
    max-width: 100%
  }
}

body.home .s1 .inner .pro-images {
  position: relative;
  margin-top: 3rem
}

body.home .s1 .inner .pro-images p {
  position: absolute;
  top: 2rem;
  right: 10%;
  text-shadow: 0px 0px 6px #fff
}

@media screen and (max-width: 768px) {
  body.home .s1 .inner .pro-images p {
    position: static
  }
}

body.home .s2 {
  margin-top: 100px
}

@media screen and (max-width: 768px) {
  body.home .s2 {
    margin-top: 50px
  }
}

body.home .s2 .inner {
  width: 100%;
  padding: 6rem 0 6rem;
  text-align: center;
  background: url(images/common/back_wave01.png) repeat-x bottom
}

body.home .s2 .inner .owl-carousel {
  text-align: left
}

body.home .s2 .inner .owl-carousel h3 {
  position: relative;
  margin: 0.2em 0;
  padding-bottom: 0.2em;
  font-size: 2rem;
  font-weight: bold;
  color: #fff
}

body.home .s2 .inner .owl-carousel h3::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100px;
  max-width: 100%;
  height: 1px;
  background: #fff
}

body.home .s2 .inner .owl-carousel p {
  font-size: 1.4rem;
  color: #fff
}

body.home .s3 {
  margin-top: 120px
}

@media screen and (max-width: 768px) {
  body.home .s3 {
    margin-top: 80px
  }
}

body.home .s3 .inner .flex {
  flex-wrap: nowrap;
  justify-content: space-between;
  align-content: flex-start;
  align-items: flex-start
}

@media screen and (max-width: 960px) {
  body.home .s3 .inner .flex {
    flex-wrap: wrap;
    justify-content: center
  }
}

body.home .s3 .inner .flex figure {
  margin: 0;
  width: 56%
}

body.home .s3 .inner .flex figure figcaption {
  position: relative
}

body.home .s3 .inner .flex figure figcaption img {
  position: absolute;
  left: 10%;
  top: -6rem;
  max-width: 90%
}

@media screen and (max-width: 768px) {
  body.home .s3 .inner .flex figure figcaption img {
    left: 5%;
    top: -3rem
  }
}

body.home .s3 .inner .flex .text {
  width: 40%;
  margin: -6rem 0 0
}

body.home .s3 .inner .flex .text h3 {
  margin-bottom: 2rem;
  position: relative;
  padding: 3rem 0
}

body.home .s3 .inner .flex .text h3 img {
  position: relative;
  z-index: 10
}

body.home .s3 .inner .flex .text h3::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  display: block;
  width: 80%;
  height: 100%;
  background: url(images/common/wave_title.png) no-repeat right center;
  background-size: contain;
  z-index: 1
}

body.home .s3 .inner .flex .text p {
  font-size: 1.4rem
}

body.home .s3 .inner .flex .text ul {
  margin: 2rem 0
}

body.home .s3 .inner .flex .text ul li {
  position: relative;
  font-size: 1.4rem;
  padding-left: 2em
}

body.home .s3 .inner .flex .text ul li::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  margin: auto 0;
  width: 1em;
  height: 1px;
  background: #000
}

body.home .s3 .inner .flex .text .link {
  margin-top: 5rem
}

@media screen and (max-width: 960px) {
  body.home .s3 .inner .flex figure {
    width: auto
  }
  body.home .s3 .inner .flex .text {
    width: auto;
    margin-top: 0;
    flex-wrap: wrap;
    justify-content: center;
    width: 100%;
    margin: auto;
    max-width: 520px;
  }
  body.home .s3 .inner .flex .text br{
    display: none;
  }

  body.home .s3 .inner .flex .text .link{
    margin: 5rem auto 0;
    display: block;
    max-width: 340px;
  }
}

#content.advantage .s1 .inner {
  max-width: 1140px
}

#content.advantage .s1 .inner .ad-no.flex {
  align-items: flex-end;
  margin-bottom: 10rem
}

@media screen and (max-width: 768px) {
  #content.advantage .s1 .inner .ad-no.flex {
    margin-bottom: 2rem
  }
/* 
  #content.advantage .s1 .inner .ad-no.flex .text {
    width: 100%
  }

  #content.advantage .s1 .inner .ad-no.flex .text .icons {
    width: 7rem
  }

  #content.advantage .s1 .inner .ad-no.flex .text h2 {
    margin-bottom: 0;
    padding-left: 8rem
  }

  #content.advantage .s1 .inner .ad-no.flex .text p {
    margin: 0 auto;
    padding: 0;
    border: none
  } */

  /* #content.advantage .s1 .inner .ad-no.flex>img {
    display: block;
    width: 100%;
    margin: 1rem auto 0
  } */

  #content.advantage .s1 .inner .ad-no.flex:nth-child(even) .text {
    order: 1
  }

  #content.advantage .s1 .inner .ad-no.flex:nth-child(even)>img {
    order: 2
  }
}

#content.advantage .s1 .inner .ad-no.flex .text {
  position: relative;
  width: 54%
}

#content.advantage .s1 .inner .ad-no.flex .text .icons {
  position: absolute;
  top: 0;
  left: 0;
  width: 10rem;
  height: 10rem
}

#content.advantage .s1 .inner .ad-no.flex .text h2 {
  margin-bottom: 2rem;
  position: relative;
  padding: 3rem 0;
  padding-left: 11rem
}

#content.advantage .s1 .inner .ad-no.flex .text h2 img {
  position: relative;
  z-index: 10
}

#content.advantage .s1 .inner .ad-no.flex .text h2::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  display: block;
  width: 80%;
  height: 100%;
  background: url(images/common/wave_title.png) no-repeat right center;
  background-size: contain;
  z-index: 1
}

#content.advantage .s1 .inner .ad-no.flex .text p {
  margin-left: 11rem;
  padding-bottom: 2rem;
  padding-left: 1rem;
  border-bottom: 1px solid #000;
  letter-spacing: -.02em
}

#content.advantage .s1 .inner .ad-no.flex>img {
  width: 44%;
  max-width: 470px;
  height: auto
}



#content.advantage .s1 .inner .ad-no.flex:nth-child(even) .text {
  order: 2
}

#content.advantage .s1 .inner .ad-no.flex:nth-child(even)>img {
  order: 1
}
@media screen and (max-width: 768px) {


  #content.advantage .s1 .inner .ad-no.flex .text {
    width: 100%
  }

  #content.advantage .s1 .inner .ad-no.flex .text .icons {
    width: 7rem
  }

  #content.advantage .s1 .inner .ad-no.flex .text h2 {
    margin-bottom: 0;
    padding-left: 8rem
  }

  #content.advantage .s1 .inner .ad-no.flex .text p {
    margin: 0 auto;
    padding: 0;
    border: none
  }
  #content.advantage .s1 .inner .ad-no.flex>img {
    display: block;
    width: 100%;
    margin: 1rem auto 0
  }
  #content.advantage .s1 .inner .ad-no.flex:nth-child(even) .text {
    order: 1
  }
  
  #content.advantage .s1 .inner .ad-no.flex:nth-child(even)>img {
    order: 2
  }
  
}

#content.item #select {
  padding-bottom: 100px
}

#content.item #select .inner .flex {
  justify-items: center
}

#content.item #select .inner .flex a {
  width: 24%;
  margin-right: 1.3%;
  margin-bottom: 1%;
  padding: 0.4em 0;
  font-size: 2.4rem;
  text-align: center;
  background: #003296;
  color: #fff;
  transition: all 0.2s ease
}

#content.item #select .inner .flex a:nth-child(4n) {
  margin-right: 0
}

#content.item #select .inner .flex a:hover {
  background: #a00000
}

@media screen and (max-width: 768px) {
  #content.item #select .inner .flex a {
    width: 49%;
    margin-right: 2%
  }

  #content.item #select .inner .flex a:nth-child(4n) {
    margin-right: 0
  }

  #content.item #select .inner .flex a:nth-child(2n) {
    margin-right: 0
  }
}

#content.item .s1 .inner .item-wrap {
  margin-bottom: 30px;
  padding-top: 30px;
  border-top: 1px solid #c8c8c8
}

#content.item .s1 .inner .item-wrap:last-child {
  padding-bottom: 30px;
  border-bottom: 1px solid #c8c8c8
}

#content.item .s1 .inner .item-wrap .text.flex {
  align-items: center;
  justify-content: flex-start;
  margin-bottom: 30px
}

@media screen and (max-width: 960px) {
  #content.item .s1 .inner .item-wrap .text.flex .icons {
    width: 7rem;
    height: 7rem
  }

  #content.item .s1 .inner .item-wrap .text.flex p {
    width: 100%;
    margin-top: 1em
  }
}

#content.item .s1 .inner .item-wrap .text.flex .icons {
  margin-right: 3rem
}

#content.item .s1 .inner .item-wrap .text.flex h2 {
  display: inline-block;
  margin-right: 3rem;
  font-size: 4rem;
  font-weight: bold
}

#content.item .s1 .inner .item-wrap .image-wrap.flex {
  justify-content: flex-start
}

#content.item .s1 .inner .item-wrap .image-wrap.flex figure {
  width: 32%;
  margin-right: 2%
}

#content.item .s1 .inner .item-wrap .image-wrap.flex figure:nth-child(3n) {
  margin-right: 0
}

@media screen and (max-width: 768px) {
  #content.item .s1 .inner .item-wrap .image-wrap.flex figure {
    width: 49%;
    margin-right: 2%
  }

  #content.item .s1 .inner .item-wrap .image-wrap.flex figure:nth-child(3n) {
    margin-right: 2%
  }

  #content.item .s1 .inner .item-wrap .image-wrap.flex figure:nth-child(2n) {
    margin-right: 0
  }
}

#content.item .s1 .inner .item-wrap .image-wrap.flex figure figcaption {
  padding-left: 0.5em;
  font-size: 3rem;
  font-weight: bold
}

#content.item .s1 .inner .item-wrap .other {
  margin-top: 1em
}

#content.item .s2 {
  margin-top: 100px
}

@media screen and (max-width: 768px) {
  #content.item .s2 {
    margin-top: 50px
  }

  #content.item .s2 .inner p {
    margin-bottom: 50px
  }
}

#content.item .s2 .inner p {
  margin-bottom: 100px;
  text-align: center
}

#content.item .s2 .inner .tel-area {
  text-align: center
}

#content.item .s2 .inner .tel-area img {
  width: 65%
}

#content.item .s2 .inner .tel-area p {
  margin-top: 0.5em;
  padding-top: 0.5em;
  border-top: 1px solid #000
}

#content.recruit .s1 {
  margin-bottom: 60px
}

#content.recruit .s1 .inner {
  text-align: center
}

#content.recruit .s1 .inner h2 {
  margin-bottom: 40px;
  font-size: 1.6rem;
  font-weight: bold
}

#content.recruit .s2 {
  margin-bottom: 100px
}

@media screen and (max-width: 768px) {
  #content.recruit .s2 {
    margin-bottom: 50px
  }
}

#content.recruit .s2 .inner .text {
  margin-bottom: 30px
}

#content.recruit .s2 .inner .text:nth-child(1) h3::before {
  background: url(images/recruit/sono1.svg) no-repeat center left
}

#content.recruit .s2 .inner .text:nth-child(2) h3::before {
  background: url(images/recruit/sono2.svg) no-repeat center left
}

#content.recruit .s2 .inner .text:nth-child(3) h3::before {
  background: url(images/recruit/sono3.svg) no-repeat center left
}

#content.recruit .s2 .inner .text h3 {
  position: relative;
  margin-bottom: 0.5em;
  text-align: left
}

#content.recruit .s2 .inner .text h3::before {
  content: "";
  position: relative;
  top: 0;
  left: 0;
  display: inline-block;
  width: 55px;
  height: 20px;
  margin-right: 2rem;
  background-size: contain
}

#content.recruit .s3 {
  margin-bottom: 100px
}

@media screen and (max-width: 768px) {
  #content.recruit .s3 {
    margin-bottom: 50px
  }
}

#content.recruit .s3 .inner {
  text-align: center
}

#content.recruit .s3 .inner h2 {
  margin-bottom: 30px
}

#content.recruit .s3 .inner .recruit-tbl {
  text-align: left
}

#content.recruit .s3 .inner .recruit-tbl tr {
  border-bottom: 1px solid #000;
  padding: 10px
}

#content.recruit .s3 .inner .recruit-tbl tr th,
#content.recruit .s3 .inner .recruit-tbl tr td {
  height: 100%;
  padding: 2em 2em;
  vertical-align: middle;
  box-sizing: border-box
}

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

  #content.recruit .s3 .inner .recruit-tbl tr th,
  #content.recruit .s3 .inner .recruit-tbl tr td {
    display: block;
    width: 100%;
    box-sizing: border-box;
    padding: 1em
  }

  #content.recruit .s3 .inner .recruit-tbl tr td {
    padding-top: 0
  }
}

#content.recruit .s3 .inner .recruit-tbl tr th {
  position: relative;
  background: #E6E6E6
}

#content.recruit .s3 .inner .recruit-tbl tr th::before,
#content.recruit .s3 .inner .recruit-tbl tr th::after {
  content: "";
  position: absolute;
  left: 0;
  display: block;
  width: 100%;
  height: 10px;
  z-index: 10;
  background: #fff
}

#content.recruit .s3 .inner .recruit-tbl tr th::before {
  top: 0
}

#content.recruit .s3 .inner .recruit-tbl tr th::after {
  bottom: 0px
}

#content.recruit .s3 .inner .recruit-tbl tr td ul {
  list-style: disc outside;
  padding-left: 1em
}

#content.recruit .s3 .inner .recruit-tbl tr td dl {
  margin-bottom: 0.5em
}

#content.recruit .s3 .inner .recruit-tbl tr td dl dt,
#content.recruit .s3 .inner .recruit-tbl tr td dl dd {
  display: inline-block
}

#content.recruit .s3 .inner .recruit-tbl tr td dl dt {
  width: 100px
}

#content.recruit .s3 .inner .recruit-tbl tr td dl dd {
  width: calc(100% - 120px)
}

#content.recruit .s4 {
  position: relative;
  padding: 100px 0;
  background: linear-gradient(to bottom, #003296 0%, #0078c8 0%)
}

@media screen and (max-width: 768px) {
  #content.recruit .s4 {
    padding: 50px 0
  }
}

#content.recruit .s4::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 10px;
  left: 0;
  display: block;
  width: 100%;
  height: 168px;
  background: url(images/common/back_wave02.png) repeat-x center bottom;
  background-size: contain;
  z-index: 1
}

#content.recruit .s4 .inner {
  position: relative;
  max-width: 1030px;
  z-index: 10
}

#content.recruit .s4 .inner h2 {
  text-align: center
}

#content.recruit .s4 .inner .staff-area.flex {
  justify-content: flex-start
}

#content.recruit .s4 .inner .staff-area.flex .sutaff-wrap {
  width: 32%;
  margin-top: 30px;
  margin-right: 2%;
  background: #fff
}

#content.recruit .s4 .inner .staff-area.flex .sutaff-wrap:nth-child(3n) {
  margin-right: 0
}

@media screen and (max-width: 768px) {
  #content.recruit .s4 .inner .staff-area.flex .sutaff-wrap {
    width: 49%
  }

  #content.recruit .s4 .inner .staff-area.flex .sutaff-wrap:nth-child(3n) {
    margin-right: 2%
  }

  #content.recruit .s4 .inner .staff-area.flex .sutaff-wrap:nth-child(2n) {
    margin-right: 0
  }
}

#content.recruit .s4 .inner .staff-area.flex .sutaff-wrap>img {
  width: 100%;
  height: auto;
  vertical-align: top
}

#content.recruit .s4 .inner .staff-area.flex .sutaff-wrap .text {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-end;
  width: 100%;
  padding: 1em;
  box-sizing: border-box
}

@media screen and (max-width: 768px) {
  #content.recruit .s4 .inner .staff-area.flex .sutaff-wrap .text {
    justify-content: flex-start
  }

  #content.recruit .s4 .inner .staff-area.flex .sutaff-wrap .text .name {
    font-size: 2rem
  }

  #content.recruit .s4 .inner .staff-area.flex .sutaff-wrap .text .kana {
    font-size: 1.4rem
  }
}

#content.recruit .s4 .inner .staff-area.flex .sutaff-wrap .text .name {
  display: inline-block;
  font-size: 3rem
}

#content.recruit .s4 .inner .staff-area.flex .sutaff-wrap .text .kana {
  position: relative;
  bottom: 0.5em;
  display: inline-block;
  text-align: right
}

#content.recruit .s4 .inner .staff-area.flex .sutaff-wrap .text dl {
  display: block;
  width: 100%;
  font-size: 1.5rem
}

#content.recruit .s4 .inner .staff-area.flex .sutaff-wrap .text dl dt {
  margin: 5px 0;
  color: #003296;
  letter-spacing: -.02em
}

#content.recruit .s5 {
  margin-top: 100px
}

@media screen and (max-width: 768px) {
  #content.recruit .s5 {
    margin-top: 50px
  }

  #content.recruit .s5 .inner p {
    margin-bottom: 50px
  }
}

#content.recruit .s5 .inner p {
  margin-bottom: 100px;
  text-align: center
}

#content.recruit .s5 .inner .tel-area {
  text-align: center
}

#content.recruit .s5 .inner .tel-area img {
  width: 65%
}

#content.recruit .s5 .inner .tel-area p {
  margin-top: 0.5em;
  padding-top: 0.5em;
  border-top: 1px solid #000
}