@charset "UTF-8";
/* CSS Document */
//ブレイクポイントを指定------ここから
$xl: 1399px;
$lg: 1199px;
$md: 991px;
$sm: 767px;
$xs: 575px;

@mixin xl {
  @media screen and (max-width: ($xl)) {
    @content;
  }
}
@mixin lg {
  @media screen and (max-width: ($lg)) {
    @content;
  }
}
@mixin md {
  @media screen and (max-width: ($md)) {
    @content;
  }
}
@mixin sm {
  @media screen and (max-width: ($sm)) {
    @content;
  }
}
@mixin xs {
  @media screen and (max-width: ($xs)) {
    @content;
  }
}
//ブレイクポイントを指定------ここまで

//カラー指定
$color-green:#00A395;
$color-red:#D9383A;
$color-black:#333333;

main {
    padding-top: 0;
}
.site-header{
	background: transparent;
	transition: .4s ease;
	h1{
		color: #fff;
		}
	nav.pc-nav{
		ul{
			li{
				a{
					color: #fff;
                    &:hover {
                        color: #333;
                    }
				}
			}
		}
	}
	.drawer__button{
		span{
			background: #fff;
		}
	}
}
.site-header.active{
	background: #fff;
	h1{
		color: $color-black;
		}
	nav.pc-nav{
		ul{
			li{
				a{
					color: $color-black;
                    &:hover {
                        color: $color-green;
                    }
				}
				&:nth-child(3){
					a{
						color: #fff;
					}
				}
				&:nth-child(4){
					a{
						color: #fff;
					}
				}
			}
		}
	}
	.drawer__button{
		span{
			background: $color-black;
		}
		&.active{
			span:nth-child(1){
				background: #fff;
			}
			span:nth-child(3){
				background: #fff;
			}
		}
	}
}



//interview-header ------------------------------------------------------------------------
#interview-header {
    position: relative;
    width: 100%;
    height: 315px;
    background-image: url("../img/interview-header.jpg");
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    @include md {
        height: 285px;
    }
    @include sm {
        height: 250px;
    }
    @include xs {
        height: 230px;
    }
    h1 {
        position: absolute;
        bottom: 0;
        color: #fff;
        font-family: "Montserrat", sans-serif;
        font-size: 82px;
        font-size: 8.2rem;
        font-weight: bold;
        letter-spacing: 0.1em;
        @include md {
            font-size: 70px;
            font-size: 7rem;
        }
        @include sm {
            font-size: 60px;
            font-size: 6rem;
        }
        @include xs {
            font-size: 50px;
            font-size: 5rem;
            margin-bottom: 1rem;
        }
        span {
            font-family: YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif";
            font-size: 20px;
            font-size: 2rem;
            margin-left: 1rem;
            @include xs {
                display: block;
                font-size: 16px;
                font-size: 1.6rem;
            }
        }
    }
}

//interview-contents ------------------------------------------------------------------------
#interview-contents {
  .container {
    position: relative;
  }
  .inner {
    position: relative;
  }
  img {
    max-width: 100%;
    height: auto;
    display: block;
  }
  .interview-side {
    position: absolute;
    top: 0;
    left: -45px;
    width: 34px;
    z-index: 2;
    @include lg {
      left: -40px;
      width: 30px;
    }
    @include md {
      left: -35px;
      width: 25px;
    }
    @include sm {
      left: 0;
      width: 25px;
      transform: rotate(-90deg);
      transform-origin: top left;
    }
  }
  .interview-main {
    position: relative;
    margin-bottom: 11rem;
    height: 385px;
    @include lg {
      height: 340px;
    }
    @include md {
      height: 280px;
      margin-bottom: 10rem;
    }
    @include sm {
      height: 240px;
      margin-bottom: 9rem;
    }
    @include xs {
      height: 210px;
      margin-bottom: 8rem;
    }
    &__img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      @include xs {
        object-position: 90% center;
      }
    }
  }
  .interview-profile {
    position: absolute;
    top: 30%;
    right: 5%;
    padding: 1.5rem 1.5rem 1.5rem 2rem;
    background: #fff;
    border-radius: 5px;
    z-index: 2;
    @include sm {
      top: 25%;
      right: 3%;
      padding: 1rem;
    }
    &__job {
      font-size: 14px;
      font-size: 1.4rem;
      font-weight: 500;
      margin-bottom: 0;
      @include md {
        font-size: 13px;
        font-size: 1.3rem;
      }
      @include xs {
        font-size: 11px;
        font-size: 1.1rem;
      }
    }
    &__name {
      display: inline-block;
      margin: 0;
      padding-bottom: 4px;
      font-size: 20px;
      font-size: 2rem;
      font-weight: 700;
      line-height: 1.4;
      @include md {
        font-size: 18px;
        font-size: 1.8rem;
      }
      @include xs {
        font-size: 15px;
        font-size: 1.5rem;
      }
      span {
        font-size: 13px;
        font-size: 1.3rem;
        font-weight: 500;
        @include md {
          font-size: 12px;
          font-size: 1.2rem;
        }
        @include xs {
          font-size: 10px;
          font-size: 1rem;
        }
      }
    }
    &::after {
        content: "";
        position: absolute;
        top: 50%;
        left: -9px;
        transform: translateY(-50%);
        width: 11px;
        height: 11px;
        background: #fff;
        clip-path: polygon(0 0, 100% 0, 100% 100%);
    }    
  }
  .interview-profile-adjust {
    @include md {
      right: 2%;
    }
    @include sm {
      top: 55%;
    }
    @include xs {
      top: 45%;
    }
  }
  .interview-catch {
    position: absolute;
    left: -24px;
    bottom: -30px;
    margin: 0;
    color: #fff;
    font-size: 24px;
    font-size: 2.4rem;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: 0.08em;
    z-index: 3;
    @include md {
      left: -1.5rem;
      bottom: -25px;
      font-size: 21px;
      font-size: 2.1rem;
    }
    @include sm {
      font-size: 19px;
      font-size: 1.9rem;
    }
    @include xs{
      left: -1rem;
      bottom: -20px;
      font-size: 16px;
      font-size: 1.6rem;
    }
    span {
      display: block;
      width: fit-content;
      padding: 0.5rem 1.5rem;
      background: #000;
      @include xs {
        padding: 0.5rem 1rem;
      }
      & + span {
        padding-top: 0;
      }
    }
  }
  .contents__block {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: start;
    @include sm {
      display: block;
    }
    & + .contents__block {
      margin-top: 8rem;
      @include sm {
        margin-top: 6rem;
      }
    }
    &:nth-child(even) {
        .contents__block-image {
          order: 2;
          padding-right: 0;
          padding-left: 4rem;
          @include sm {
            order: 1;
            padding-right: 0;
            padding-left: 0;
          }
        }
        .contents__block-text {
          order: 1;
          @include sm {
            order: 2;
          }
        }
      }      
  }
  .contents__block-image {
    padding-right: 4rem;
    @include sm {
      width: 100%;
      height: 380px;
      padding-right: 0;
      overflow: hidden;
      margin-bottom: 1.5rem;
    }
    @include xs {
      height: 300px;
    }
    img {
      border-radius: 10px;
      @include sm {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center 20%;
      }
    }
  }
  .contents__block-text {
    dl {
      margin: 0;
    }
    dt {
      position: relative;
      margin: 0 0 18px;
      font-family: YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif";
      font-size: 20px;
      font-size: 2rem;
      font-weight: 700;
      text-align: justify;
      line-height: 1.6;
      padding-left: 4rem;
      letter-spacing: 0.1em;
      @include md {
        font-size: 19px;
        font-size: 1.9rem;
        padding-left: 3rem;
        margin-bottom: 1rem;
        letter-spacing: 0.05em;
      }
      @include sm {
        padding-left: 5rem;
      }
      @include xs {
        padding-left: 3.5rem;
      }
      &::before {
        content: "Q";
        position: absolute;
        top: -3px;
        left: 0;
        font-family: "Montserrat", sans-serif;
        color: #009b8f;
        font-size: 38px;
        font-size: 3.8rem;
        font-style: italic;
        font-weight: 700;
        line-height: 1;
        @include md {
          top: 0;
          left: -0.5rem;
          font-size: 33px;
          font-size: 3.3rem;
        }
        @include sm {
          left: 1rem;
        }
        @include xs {
          top: -0.5px;
          left: 0;
          font-size: 30px;
          font-size: 3rem;
        }
      }
    }
    dd {
      margin: 0;
      font-family: YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif";
      font-weight: 500;
      line-height: 1.6;
      padding-left: 4rem;
      text-align: justify;
      @include md {
        padding-left: 3rem;
      }
      @include sm {
        padding-left: 4.5rem;
      }
      @include xs {
        padding-left: 2.5rem;
      }
      & + dt {
        margin-top: 4.5rem;
        @include md {
          margin-top: 3rem;
        }
      }
    }
  }
}
//interview-footer ------------------------------------------------------------------------
#interview-footer {
    .interview-footer__bg {
        background-image: url("../img/interview-footer.jpg");
        background-size: cover;
        margin-bottom: 6rem;
        .inner {
            position: relative;
            .img-left {
              position: absolute;
              width: 195px;
              left: -5rem;
              bottom: -32%;
              @include lg {
                width: 170px;
                left: -4rem;
                bottom: -35%;
              }
              @include md {
                width: 130px;
                left: -6rem;
                bottom: -32%;
              }
              @include sm {
                display: none;
              }
            }
            .img-left-up {
                position: absolute;
                width: 120px;
                left: -2rem;
                top: 1.5rem;
              @include md {
                width: 100px;
                left: -5rem;
              }
              @include sm {
                display: none;
              }
            }
          .img-text {
            display: none;
            @include sm {
              display: block;
              position: absolute;
              width: 400px;
              top: 2.5rem;
              left: 0;
              right: 0;
              margin: 0 auto;
            }
            @include xs {
              width: 330px;
              top: 2rem;
            }
          }
        }
    }
    .staff-grid {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      width: 83%;
      margin-left: auto;
      gap: 1rem;
      height: 388px;
      align-items: start;
      padding-top: 2rem;
      @include lg {
        width: 85%;
        height: 340px;
      }
      @include md {
        width: 88%;
        height: 270px;
      }
      @include sm {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        width: 100%;
        gap: 0.5rem 2rem;
        height: auto;
        padding: 5rem 2rem 3.5rem;
      }
      @include xs {
        padding: 5rem 0 3.5rem;
      }
    }
    .staff-card {
        position: relative;
        display: block;
        color: #000;
        text-decoration: none;
        &__img {
            display: block;
            width: 100%;
            height: auto;
            transition: 
            transform .6s ease,
            opacity .6s ease;
            backface-visibility: hidden;
            &--default {
               opacity: 1;
               transform: rotateY(0deg);
            }
            &--hover {
                position: absolute;
                inset: 0;
                opacity: 0;
                transform: rotateY(180deg);
            }
        }
        &:hover {
          .staff-card__img {
            &--default {
              opacity: 0;
              transform: rotateY(180deg);
            }
            &--hover {
              opacity: 1;
              transform: rotateY(0deg);
            }
          }
        }
        &__num {
          position: absolute;
          top: 17%;
          right: 2%;
          z-index: 3;
          margin: 0;
          color: #b8e3dc;
          font-family: "Montserrat", sans-serif; 
          font-size: 31px;
          font-size: 3.1rem;
          font-style: italic;
          font-weight: 700;
          line-height: 1;
          @include lg {
            top: 17%;
            right: 0;
            font-size: 28px;
            font-size: 2.8rem;
          }
          @include md {
            top: 20%;
            right: -0.5rem;
            font-size: 26px;
            font-size: 2.6rem;
          }
          @include sm {
            right: 8%;
            font-size: 31px;
            font-size: 3.1rem;
          }
          @include xs {
            right: 0;
            font-size: 26px;
            font-size: 2.6rem;
          }
        }
        &__info {
          position: absolute;
          left: 1rem;
          bottom: 3rem;
          z-index: 4;
        }
        &__job {
          font-size: 8px;
          font-size: 0.8rem;
          font-weight: 500;
          margin-bottom: 0;
          background: #fff;
          width: fit-content;
          padding: 2px 5px 0;
          @include sm {
            font-size: 8px;
          }
          @include xs{
			  padding-bottom: 5px;
          }
        }
        &__name {
          margin: -3px 0 0;
          font-size: 12px;
          font-size: 1.2rem;
          font-weight: 700;
          background: #fff;
          width: fit-content;
          padding: 0 5px 2px 5px;
          @include sm {
            font-size: 12px;
          }
          @include xs {
			  line-height: 1;
			  padding: 2px 5px 2px 5px;
          }
          span {
            display: inline-block;
            font-size: 8px;
            font-size: 0.8rem;
            font-weight: 500;
            @include lg {
              display: block;
            }
            @include md {
              display: block;
              line-height: 1.4;
            }
            @include sm {
              display: inline-block;
              line-height: 1.65;
              font-size: 8px;
            }
            @include xs {
				display: block;
            }
          }
        }
    }
    .link-button {
        margin-bottom: 6rem;
    }
}



.recruit-button{
	background-color: $color-black;
	text-align: center;
	padding: 6rem 0 4rem;
	@include xs {
		padding: 4rem 0 3rem;
	}
	p.white-title{
		position: relative;
		font-size: 30px;
		font-size: 3rem;
		font-weight: 500;
		color: #fff;
		letter-spacing: 2px;
		line-height: 0.8;
		@include lg {
			font-size: 28px;
			font-size: 2.8rem;
		}
		@include sm {
			font-size: 25px;
			font-size: 2.5rem;
		}
		@include xs {
			line-height: 1.5;
		}
		&::after{
			font-family: "Font Awesome 5 Free";
			content: "\f0dd";
			font-weight: 900;
			padding-left : 1rem;
			color: white;
			@include xs {
				content: none;
			}
		}
		&::before{
			font-family: "Font Awesome 5 Free";
			content: "\f0dd";
			font-weight: 900;
			padding-right : 1rem;
			color: white;
			@include xs {
				content: none;
			}
		}
		& + p{
			font-size: 20px;
			font-size: 2rem;
			color: #fff;
			@include lg {
				font-size: 18px;
				font-size: 1.8rem;
			}
			@include sm {
				font-size: 16px;
				font-size: 1.6rem;
			}
		}
	}
}