.front-top {
  min-height: 50vh;
  width: 100%;
  position: relative;
  overflow: hidden;
  @media screen and (min-width:768px){
    height: calc(55vh + var(--header-height));
  }
  img {
    object-fit: cover;
    object-position: top;
    width: 100%;
    height: 100%;
    z-index: 1;
    position: absolute;
  }
  &:before {
    content: "";
    position: absolute;
    width: 150%;
    height: 100%;
    z-index: 2;
    top: 0;
    background-image: url('../img/top_over.svg');
    background-position: 0 0;
    background-size: cover;
    background-repeat: no-repeat;
    opacity: .75;
    left: -50%;
    @media screen and (min-width:1024px){
      width: 100%;
      left: -1px;
      background-size: contain;
    }
  }
  .catch-copy {
    color: var(--white);
    font-size: calc(4rem + .2vw);
    font-family: "Oooh Baby", cursive;
    font-weight: 400;
    font-style: normal;
    line-height: 1.2;
    padding: 2rem;
    position: relative;
    z-index: 3;
    transform:rotate(-12deg);
    @media screen and (min-width:414px){
      position: absolute;
      top: 25%;
      bottom: 0;
      margin: auto;
      transform:translateY(-25%) rotate(-12deg);
    }
    @media screen and (min-width:768px){
      top: 50%;
      transform:translateY(-50%) rotate(-12deg);
      font-size: calc(5rem + .2vw);
    }
    @media screen and (min-width:1024px){
      top: 40%;
      left: 10%;
      transform:translateY(-40%) rotate(-12deg);
    }
  }
  .copy-inner {
    @media screen and (min-width:414px){
      display: block;
    }
  }
  .line-one {
    position: relative;
    &:before {
      content: "";
      position: absolute;
      width: 40px;
      height: 40px;
      border-radius: 9999px;
      top: 0;
      left: -10px;
      background: radial-gradient(50% 50% at 50% 50%, #F3E97D 0%, rgba(243, 233, 125, 0) 100%);
    }
  }
  .line-two {
    position: relative;
    @media screen and (min-width:768px){
      position: relative;
      left: 50%;
    }
    @media screen and (min-width:1024px){
      left: 75%;
    }
    &:before {
      content: "";
      position: absolute;
      width: 20px;
      height: 20px;
      border-radius: 9999px;
      bottom: 0;
      left: -10px;
      background: radial-gradient(50% 50% at 50% 50%, #F3E97D 0%, rgba(243, 233, 125, 0) 100%);
    }
    &:after {
      content: "";
      position: absolute;
      width: 60px;
      height: 60px;
      border-radius: 9999px;
      top: 0;
      right: 0;
      background: radial-gradient(50% 50% at 50% 50%, #F3E97D 0%, rgba(243, 233, 125, 0) 100%);
      @media screen and (min-width:1024px){
        right: 10%;
      }
    }
  }
}
.top-message {
  background: var(--base-color);
  color: var(--white);
  line-height: 1.8;
  @media screen and (min-width:1024px){
    text-align: center;
  }
  p:not(:last-child) {
    padding-bottom: .5rem;
  }
}
.section-news {
  display: grid;
  grid-template-columns: 80px minmax(0,1fr);
  align-items:center;
  background-color: var(--white-opacity);
  border-radius: 9999px;
  text-align: left;
  width: 90%;
  margin: 0 5%;
  padding: .5rem 2rem;
  @media screen and (min-width:1024px){
    grid-template-columns: 100px minmax(0,1fr);
    width: 100%;
    max-width:960px;
    margin: 0 auto;
  }
  .section-title {
    font-size: 1rem;
    color: var(--base-color);
    padding:0 12px 0 0;
    margin: 0;
  }
  .news-wrapper {
    width: 100%;
    padding-left: 12px;
    border-left: 2px solid var(--base-color);
    transition: height 0.3s ease;
  }
  .slide-inner {
    @media screen and (min-width:1024px){
      padding-right: 3.25rem;
    }
  }
  .swiper-slide {
    height: auto!important;
  }
  .entry-date {
    font-size: .875rem;
    color: var(--black);
    display: block;
    @media screen and (min-width:1024px){
      display: inline-block;
      padding-right: 12px;
    }
  }
  .entry-link,.entry-title {
    display: inline-block;
    transition: color .25s ease;
  }
  .entry-title {
    font-weight: 800;
  }
  .entry-link:hover {
    color: var(--main-color);
  }
  .swiper-button-prev:after,
  .swiper-rtl .swiper-button-next:after,
  .swiper-button-next:after,
  .swiper-rtl .swiper-button-prev:after {
    height: 1.5rem;
    width: calc(1.5rem / 44 * 27);
    font-size:1.5rem;
    @media screen and (max-width:767px){
      display: none;
    }
  }
  .swiper-button-next,
  .swiper-rtl .swiper-button-prev {
    right: 0;
  }
  .swiper-button-prev,
  .swiper-rtl .swiper-button-next {
    left: auto;
    right: calc(3rem / 44 * 27);
  }
}
.front-main {
  margin-top: 4rem;
  .front-main-box {
    position: relative;
    padding: 4rem 0;
    margin-bottom: 1rem;
  }
  .front-main-body {
    padding: 1rem;
    position: relative;
    z-index: 2;
    background: rgba(255,255,255,.5);
    box-shadow: 0 0 .5rem var(--base-color-shadow);
  }
  .bg-text {
    font-family: "Cormorant Garamond",serif;
    font-weight: 500;
    font-style: italic;
    font-size: 8rem;
    white-space: nowrap;
    color: var(--main-color);
    line-height: 1;
    background: var(--bg-text-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    position: absolute;
    top: -1rem;
    display: inline-block;
  }
  .feature-title {
    font-family: 'Noto Sans JP';
    font-weight: 800;
    font-size: 1.5rem;
  }
  .btn-wrapper {
    text-align: right;
  }
  @media screen and (min-width:1024px){
    margin-top: 0;
    .front-main-box {
      margin: 0;
      padding: 4rem 0;
    }
    .front-main-body {
      width: 60%;
      padding: 4rem;
    }
    .bg-text  {
      font-size: 13vw;
      top: 4rem;
      height: 100%;
      br {
        display: none;
      }
    }
    .front-main-box:nth-of-type(odd) .bg-text {
      right: 0;
    }
    .front-main-box:nth-of-type(even) .front-main-body {
      left: 40%;
    }
  }
}

.front-recruit {
  background: var(--base-color);
  text-align: center;
  padding: 4rem 0;
  .section-title {
    color:var(--white);
  }
  .btn-list .list-item{
    margin: 1rem;
  }
  .btn {
    font-size: 1.8rem;
    border: 1px solid var(--diff-color);
    color: var(--diff-color);
    transition:all .25s ease;
    font-weight: 700;
  }
  .btn:before {
    border-right-color: var(--diff-color);
    border-bottom-color: var(--diff-color);
  }
  .btn:hover {
    background-color:var(--diff-color);
    color: var(--base-color);
  }
  .btn:hover:before {
    border-right-color: var(--base-color);
    border-bottom-color: var(--base-color);
  }
  @media screen and (min-width:1024px){
    display: grid;
    grid-template-columns: repeat(2,1fr);
    align-items: center;
    .section-title {
      text-align: right;
      margin: 0;
      padding-right: 4rem;
    }
    .btn-list {
      border-left: 1px solid var(--white);
      padding-left: 4rem;
      text-align: left;
    }
  }
}

.front-contact {
  padding: 4rem 0;
  text-align: center;
  background: 
    linear-gradient(137.04deg, rgba(15, 175, 201, 0) 27.59%, rgba(253, 226, 27, 0.3) 85%),
    linear-gradient(230deg, rgb(15, 175, 201) 0%, #0FA7C9 50%, #0C70E2 100%),
    #0C70E2;
  .section-title {
    color: var(--accent-color);
  }
  .btn-list {
    margin: 0 1rem;
    .list-item {
      margin: 1rem 0;
      width: 100%;
    }
  }
  .btn-entry {
    width: 100%;
    /*font-family: "Monomakh","Noto Sans JP",sans-serif;*/
    font-size: 1.8rem;
    color: var(--white);
    font-weight: 700;
    display: inline-block;
    padding: 2rem;
    border:8px solid var(--white) ;
    border-radius: 9999px;
  }
  .btn-entry .icon {
    fill:var(--white);
    vertical-align: top;
    padding-top: 3px;
    margin-right: .5rem;
    width: 44px;
    height: auto;
  }
  .btn-entry:hover {
    background: var(--white);
    color: var(--main-color);
  }
  .btn-entry:hover .icon {
    fill:var(--main-color);
  }
  @media screen and (min-width:1024px){
    .btn-list {
      margin: 0;
      display: grid;
      grid-template-columns: repeat(2,1fr);
    }
    .btn-list .list-item {
      margin: 0 2rem;
      width: calc(100% - 6rem);
    }
    .btn-list .list-item:nth-child(1) {
      text-align: right;
    }
    .btn-list .list-item:nth-child(2) {
      text-align: left;
    }
    .btn-list .list-item .btn-entry{
      max-width:480px;
      text-align: center;
    }
    .btn-list .btn-entry .icon {
      vertical-align: text-bottom;
      padding: 0;
    }
  }
}