/* Box sizing rules */
*,
*::before,
*::after {
  box-sizing: border-box; }

/* Remove default padding */
ul,
ol {
  padding: 0; }

/* Remove default margin */
body,
h1,
h2,
h3,
h4,
h5,
p,
ul,
ol,
figure,
blockquote,
dl,
dd {
  margin: 0; }

/* Set core root defaults */
html {
  scroll-padding-top: 60px; }

/* Set core body defaults */
body {
  min-height: 100vh;
  line-height: 1.6; }

/* Remove list styles on ul, ol elements with a class attribute */
ul,
ol {
  list-style: none; }

/* A elements that don't have a class get default styles */
a:not([class]) {
  text-decoration-skip-ink: auto; }

/* Make images easier to work with */
img {
  max-width: 100%;
  height: auto;
  vertical-align: top; }

/* Inherit fonts for inputs and buttons */
input,
button,
textarea,
select {
  font: inherit; }

/* Blur images when they have no alt attribute */
img:not([alt]) {
  filter: blur(10px); }

a,
area,
button,
[role="button"],
input:not([type="range"]),
label,
select,
summary,
textarea {
  -ms-touch-action: manipulation;
  touch-action: manipulation; }

a {
  color: inherit;
  text-decoration: none; }

.container {
  width: 100%;
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 40px; }
  @media screen and (max-width: 1024px) {
    .container {
      padding: 0 20px; } }
  @media screen and (max-width: 480px) {
    .container {
      padding: 0 10px; } }

.btn {
  position: relative;
  display: inline-block;
  border: 1px solid #2977a7;
  background-color: #2977a7;
  background: linear-gradient(to right, #4093b9 0%, #5089b4 46%, #2977a7 100%);
  height: 100%;
  padding: 10px 80px 10px 20px;
  font-size: 1.25rem;
  color: #fff;
  line-height: 1.2;
  overflow: hidden;
  z-index: 2;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12); }
  @media screen and (max-width: 1024px) {
    .btn {
      font-size: 1rem; } }
  @media screen and (max-width: 768px) {
    .btn {
      font-size: 0.875rem; } }
  .btn::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    transform: translateX(-101%);
    transition: transform 0.5s ease;
    z-index: -1;
    background-color: #fff; }
  .btn::after {
    content: "";
    position: absolute;
    bottom: 0;
    right: 10px;
    background-color: #fff;
    clip-path: polygon(0 76%, 91% 76%, 69% 62%, 71% 60%, 100% 79%, 0 79%);
    clip-path: path();
    width: 60px;
    height: 60px; }
  .btn:hover {
    color: #2977a7; }
    .btn:hover::before {
      transform: translateX(0); }
    .btn:hover::after {
      background-color: #2977a7; }

.wrapper {
  display: grid;
  grid-template-rows: auto 1fr auto auto;
  min-height: 100svh; }

body {
  font-family: "Roboto", "Noto Sans JP", sans-serif;
  color: #222;
  line-height: 1.8; }
  @media screen and (max-width: 480px) {
    body {
      font-size: 0.875rem; } }

.header {
  position: sticky;
  top: 0;
  left: 0;
  z-index: 1000;
  background-color: #fff;
  width: 100%; }
  @media screen and (max-width: 768px) {
    .header {
      height: 50px; } }
  .header__container {
    display: flex;
    justify-content: space-between;
    width: 100%;
    max-width: 1320px;
    margin: 0 auto;
    padding: 5px 20px; }
    @media screen and (max-width: 768px) {
      .header__container {
        padding: 1px 10px; } }
  .header-logo {
    padding: 4px 0; }
    .header-logo a {
      display: flex;
      align-items: center; }
    .header-logo img {
      margin-right: 10px; }
  .header-nav {
    display: flex;
    align-items: center;
    gap: 10px; }
  .header-contact {
    line-height: 1; }
    @media screen and (max-width: 768px) {
      .header-contact {
        display: none; } }
    .header-contact a {
      position: relative;
      display: inline-block;
      border: 1px solid #2977a7;
      background-color: #2977a7;
      background: linear-gradient(to right, #4093b9 0%, #5089b4 46%, #2977a7 100%);
      height: 100%;
      padding: 8px 30px;
      color: #fff;
      overflow: hidden;
      z-index: 2;
      box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12); }
      @media screen and (max-width: 1024px) {
        .header-contact a {
          font-size: 0.875rem; } }
      .header-contact a::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        transform: translateX(-101%);
        transition: transform 0.5s ease;
        z-index: -1;
        background-color: #fff; }
      .header-contact a:hover {
        color: #4267b2; }
        .header-contact a:hover::before {
          transform: translateX(0); }

@media screen and (max-width: 768px) {
  .nav-pc {
    display: none; } }
.nav-pc ul {
  display: flex;
  line-height: 1; }
.nav-pc li {
  padding: 0 10px; }
  @media screen and (max-width: 1024px) {
    .nav-pc li {
      padding: 0 5px; } }
.nav-pc a {
  position: relative;
  display: block;
  padding: 0 5px; }
  @media screen and (max-width: 1024px) {
    .nav-pc a {
      font-size: 0.875rem; } }
  .nav-pc a::before {
    content: "";
    position: absolute;
    left: 0;
    bottom: -6px;
    width: 0;
    height: 1px;
    background-color: #4267b2;
    transition: width 0.3s ease 0s; }
  .nav-pc a:hover {
    color: #4267b2; }
    .nav-pc a:hover::before {
      width: 100%; }
.nav-sp {
  display: none;
  position: fixed;
  top: 0;
  right: 0;
  z-index: 1001; }
  @media screen and (max-width: 768px) {
    .nav-sp {
      display: block; } }
  .nav-sp__btn {
    float: right;
    position: relative;
    background: #f6f6f8;
    width: 50px;
    height: 50px;
    z-index: 102; }
    .nav-sp__btn span {
      position: absolute;
      left: 14px;
      display: block;
      height: 2px;
      width: 22px;
      border-radius: 5px;
      background: #222;
      transition: transform 0.3s;
      cursor: pointer; }
      .nav-sp__btn span:nth-child(1) {
        top: 14px; }
      .nav-sp__btn span:nth-child(2) {
        top: 24px; }
      .nav-sp__btn span:nth-child(3) {
        bottom: 14px; }
    .nav-sp__btn.active span:nth-child(1) {
      transform: translatey(10px) rotate(-45deg); }
    .nav-sp__btn.active span:nth-child(2) {
      display: none; }
    .nav-sp__btn.active span:nth-child(3) {
      transform: translatey(-10px) rotate(45deg); }
  .nav-sp__menu {
    display: none;
    position: fixed;
    top: 50px;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #f6f6f8;
    padding: 10px;
    z-index: 101;
    overflow-y: auto; }
    .nav-sp__menu .logo {
      padding: 16px; }
      .nav-sp__menu .logo img {
        max-width: 120px; }
    .nav-sp__menu li {
      border-bottom: 1px solid #222; }
      .nav-sp__menu li a {
        position: relative;
        display: block;
        padding: 15px 20px; }
        .nav-sp__menu li a::after {
          position: absolute;
          top: 50%;
          right: 20px;
          transform: translateY(-50%);
          font-size: 24px;
          color: #5c5b5b; }

.breadcrumb {
  background-color: #e6e6e6; }
  .breadcrumb ol {
    display: flex;
    width: 100%;
    max-width: 1320px;
    margin: 0 auto;
    padding: 0 20px; }
    @media screen and (max-width: 480px) {
      .breadcrumb ol {
        padding: 0 10px; } }
  .breadcrumb li {
    position: relative;
    padding: 5px 20px 5px 0;
    font-size: 0.875rem;
    line-height: 1.2; }
    .breadcrumb li::after {
      content: ">";
      position: absolute;
      top: 50%;
      right: 5px;
      transform: translateY(-50%); }
    .breadcrumb li:last-child::after {
      display: none; }
  .breadcrumb a {
    color: #4267b2;
    text-decoration: underline; }
    .breadcrumb a:hover {
      text-decoration: none; }

.section-sub-hero {
  position: relative;
  z-index: 0;
  background-color: #f6f6f8;
  padding: 40px 0; }
  .section-sub-hero::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    opacity: 0.4; }
  .section-sub-hero h1 {
    position: relative;
    z-index: 2;
    font-size: 1.125rem;
    font-weight: normal;
    color: #fff;
    line-height: 1.4; }
    @media screen and (max-width: 480px) {
      .section-sub-hero h1 {
        font-size: 1rem; } }
    .section-sub-hero h1 span {
      font-size: 3rem;
      font-weight: bold;
      letter-spacing: 0.01em; }
      @media screen and (max-width: 480px) {
        .section-sub-hero h1 span {
          font-size: 2.25rem; } }
.section-title {
  font-size: 1.125rem;
  font-weight: normal;
  line-height: 1.4; }
  @media screen and (max-width: 480px) {
    .section-title {
      font-size: 1rem; } }
  .section-title span {
    font-size: 3rem;
    font-weight: bold;
    letter-spacing: 0.01em; }
    @media screen and (max-width: 480px) {
      .section-title span {
        font-size: 2.25rem; } }
.section-recruit {
  position: relative;
  background-color: #d5eaf7;
  padding: 60px 0;
  overflow: hidden; }
  @media screen and (max-width: 480px) {
    .section-recruit {
      padding: 30px 0; } }
  .section-recruit .box {
    display: flex;
    align-items: center;
    flex-wrap: wrap; }
    .section-recruit .box-img {
      width: 50%; }
      @media screen and (max-width: 768px) {
        .section-recruit .box-img {
          width: 100%; } }
      .section-recruit .box-img img {
        width: 100%; }
    .section-recruit .box-txt {
      width: 50%;
      padding-left: 40px; }
      @media screen and (max-width: 768px) {
        .section-recruit .box-txt {
          width: 100%;
          margin-top: 20px;
          padding-left: 0; } }
      .section-recruit .box-txt .txt01 {
        margin-top: 40px; }
        @media screen and (max-width: 480px) {
          .section-recruit .box-txt .txt01 {
            margin-top: 20px; } }
      .section-recruit .box-txt .link {
        margin-top: 40px; }
        @media screen and (max-width: 480px) {
          .section-recruit .box-txt .link {
            margin-top: 20px; } }
.section-interview {
  position: relative;
  background-color: #f6f6f8;
  opacity: 0.8;
  background-image: linear-gradient(#f6f6f8 2px, transparent 2px), linear-gradient(to right, #f6f6f8 2px, #fff 2px);
  background-size: 150px 150px;
  padding: 60px 0 120px;
  overflow: hidden; }
  @media screen and (max-width: 1024px) {
    .section-interview {
      padding-bottom: 100px; } }
  @media screen and (max-width: 480px) {
    .section-interview {
      padding-top: 30px;
      padding-bottom: 60px; } }
  .section-interview::before {
    content: "INTERVIEW";
    position: absolute;
    bottom: -22px;
    right: 0;
    font-size: 140px;
    font-weight: bold;
    color: #f5f5f5;
    line-height: 1; }
    @media screen and (max-width: 1024px) {
      .section-interview::before {
        bottom: -16px;
        font-size: 100px; } }
    @media screen and (max-width: 480px) {
      .section-interview::before {
        bottom: -10px;
        font-size: 60px; } }
  .section-interview .box {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    margin-top: 20px; }
    @media screen and (max-width: 768px) {
      .section-interview .box {
        flex-wrap: wrap;
        gap: 0; } }
    .section-interview .box-col {
      display: block;
      position: relative;
      padding-bottom: 30px; }
      @media screen and (max-width: 768px) {
        .section-interview .box-col {
          width: 48%;
          padding-bottom: 50px; } }
      .section-interview .box-col:hover .box-img img {
        transform: scale(1.2); }
    .section-interview .box-img {
      overflow: hidden; }
      .section-interview .box-img img {
        width: 100%;
        transition: transform 0.3s ease; }
    .section-interview .box-txt {
      position: absolute;
      bottom: 0;
      left: 20px;
      right: 20px;
      font-size: 1.25rem;
      color: #fff;
      line-height: 1.2; }
      @media screen and (max-width: 1024px) {
        .section-interview .box-txt {
          left: 10px;
          right: 10px;
          font-size: 0.875rem; } }
      @media screen and (max-width: 768px) {
        .section-interview .box-txt {
          bottom: 10px; } }
      @media screen and (max-width: 480px) {
        .section-interview .box-txt {
          bottom: 15px;
          left: 5px;
          right: 5px;
          font-size: 0.75rem; } }
      .section-interview .box-txt span {
        display: inline-block;
        background-color: #4267b2;
        padding: 10px 20px;
        box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12); }
        @media screen and (max-width: 1024px) {
          .section-interview .box-txt span {
            padding: 10px; } }
        @media screen and (max-width: 480px) {
          .section-interview .box-txt span {
            padding: 5px; } }
    .section-interview .box .txt02 {
      margin-top: 10px; }
      @media screen and (max-width: 1024px) {
        .section-interview .box .txt02 {
          margin-top: 5px; } }
.section-contact {
  background-color: #2b78a8;
  background: linear-gradient(to right, #4093b9 0%, #5089b4 46%, #2b78a8 100%);
  padding: 60px 0; }
  @media screen and (max-width: 480px) {
    .section-contact {
      padding-top: 30px; } }
  .section-contact h2 {
    color: #fff;
    text-align: center; }
  .section-contact__box {
    margin-top: 40px; }
    @media screen and (max-width: 480px) {
      .section-contact__box {
        margin-top: 20px; } }
    .section-contact__box .txt01 {
      color: #fff;
      text-align: center; }
      .section-contact__box .txt01 .sm {
        display: none; }
        @media screen and (max-width: 480px) {
          .section-contact__box .txt01 .sm {
            display: block; } }
    .section-contact__box .box {
      gap: 20px 40px;
      grid-template-columns: 1fr 1fr;
      width: 100%;
      max-width: 400px;
      margin: 30px auto 0; }
      @media screen and (max-width: 1024px) {
        .section-contact__box .box {
          gap: 20px; } }
      @media screen and (max-width: 480px) {
        .section-contact__box .box {
          grid-template-columns: 1fr; } }
      .section-contact__box .box-tel {
        background-color: #fff;
        padding: 20px 40px;
        box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
        text-align: center; }
        @media screen and (max-width: 1024px) {
          .section-contact__box .box-tel {
            padding: 20px 30px; } }
        @media screen and (max-width: 768px) {
          .section-contact__box .box-tel {
            padding: 20px 10px; } }
        .section-contact__box .box-tel .tel {
          line-height: 1; }
          .section-contact__box .box-tel .tel a {
            font-size: 2.25rem;
            font-weight: bold; }
        .section-contact__box .box-tel .ex {
          margin-top: 5px;
          line-height: 1.2; }
      .section-contact__box .box-form a {
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: #fff;
        height: 100%;
        padding: 20px 40px;
        font-size: 1.125rem;
        font-weight: bold;
        box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
        line-height: 1.2;
        letter-spacing: -0.02em; }
        @media screen and (max-width: 1024px) {
          .section-contact__box .box-form a {
            padding: 20px 30px; } }
        @media screen and (max-width: 768px) {
          .section-contact__box .box-form a {
            padding: 20px 10px; } }
        .section-contact__box .box-form a::after {
          content: "";
          position: absolute;
          bottom: 0;
          right: 10px;
          background-color: #222;
          clip-path: polygon(0 76%, 91% 76%, 69% 62%, 71% 60%, 100% 79%, 0 79%);
          clip-path: path();
          width: 60px;
          height: 60px;
          transition: transform 0.3s ease; }
        .section-contact__box .box-form a:hover::after {
          transform: translateX(20px); }
      .section-contact__box .box-form br {
        display: none; }
        @media screen and (max-width: 768px) {
          .section-contact__box .box-form br {
            display: block; } }

.footer {
  background-color: #555;
  color: #fff;
  padding: 60px 0 10px; }
  .footer__container {
    display: flex;
    width: 100%;
    max-width: 1320px;
    margin: 0 auto;
    padding: 0 20px; }
    @media screen and (max-width: 768px) {
      .footer__container {
        display: block; } }
  .footer__left {
    flex: 0 0 500px; }
    @media screen and (max-width: 1024px) {
      .footer__left {
        flex-basis: 360px; } }
    @media screen and (max-width: 768px) {
      .footer__left {
        flex-basis: 100%; } }
    .footer__left .address {
      margin-top: 10px;
      font-size: 0.875rem;
      line-height: 1.4; }
  @media screen and (max-width: 768px) {
    .footer__right {
      margin-top: 40px; } }
  .footer-logo a {
    display: flex;
    align-items: center; }
    .footer-logo a img {
      margin-right: 10px; }
  .footer-nav ul {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 30px; }
    @media screen and (max-width: 768px) {
      .footer-nav ul {
        gap: 30px 0; } }
  @media screen and (max-width: 768px) {
    .footer-nav li {
      width: 50%;
      padding-right: 10px;
      line-height: 1.2; } }
  .footer-nav a {
    position: relative;
    font-size: 0.875rem; }
    .footer-nav a::before {
      content: "";
      position: absolute;
      left: 0;
      bottom: -6px;
      width: 0;
      height: 1px;
      background-color: #fff;
      transition: width 0.3s ease 0s; }
      @media screen and (max-width: 768px) {
        .footer-nav a::before {
          content: "-";
          position: relative;
          bottom: 0;
          background-color: transparent;
          margin-right: 5px; } }
    .footer-nav a:hover::before {
      width: 100%; }

.copyright {
  margin-top: 40px;
  text-align: center;
  font-size: 0.75rem; }