@charset "UTF-8";
/*------------------------------------------------------
 共通
-------------------------------------------------------*/
h2.top-title {
  font-family: 'Noto Serif JP', serif;
  font-size: 260%; }
  h2.top-title span {
    display: block;
    font-family: 'Noto Sans JP', sans-serif;
    color: #0C3CAC;
    font-size: 50%;
    font-weight: bold; }
    h2.top-title span:before {
      content: "";
      display: inline-block;
      width: 1em;
      border-top: 2px solid #0C3CAC;
      margin-right: 0.5em;
      vertical-align: middle; }

/*------------------------------------------------------
　メインビジュアル
-------------------------------------------------------*/
#mainvisual {
  max-width: 1920px;
  height: 700px;
  padding: 30px 0;
  position: relative;
  display: flex; }
  @media screen and (max-width: 1024px) {
    #mainvisual {
      height: 580px; } }
  @media screen and (max-width: 768px) {
    #mainvisual {
      padding: 30px 0 0 0; } }
  #mainvisual ul.slide-main {
    border-radius: 30px 0 0 30px;
    width: 65%;
    height: 100%;
    overflow: hidden; }
    #mainvisual ul.slide-main .slick-list {
      height: 100%; }
      #mainvisual ul.slide-main .slick-list .slick-track {
        height: 100%; }
        #mainvisual ul.slide-main .slick-list .slick-track img {
          width: 100%;
          height: 100%;
          object-fit: cover; }
  #mainvisual .catchcopy {
    width: 35%;
    padding: 20px; }
    #mainvisual .catchcopy .inner {
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      background: url("../img/top/slide-logo.png");
      background-size: 60%;
      background-repeat: no-repeat;
      background-position: right 10% top; }
      @media screen and (max-width: 1024px) {
        #mainvisual .catchcopy .inner {
          background-position: right 20% top 20%; } }
      @media screen and (max-width: 768px) {
        #mainvisual .catchcopy .inner {
          background-position: right 20% top 10%;
          background-size: 50%;
          padding: 20% 0; } }
      #mainvisual .catchcopy .inner h2 {
        line-height: 2;
        font-weight: bold;
        font-size: 250%;
        letter-spacing: 0.1em; }
        #mainvisual .catchcopy .inner h2 span {
          color: #0C3CAC;
          font-size: 50%;
          letter-spacing: 0;
          line-height: 1.5; }
        @media screen and (max-width: 1024px) {
          #mainvisual .catchcopy .inner h2 {
            font-size: 160%; } }
        @media screen and (max-width: 768px) {
          #mainvisual .catchcopy .inner h2 {
            font-size: 6vw; } }
  @media screen and (max-width: 768px) {
    #mainvisual {
      height: auto;
      flex-wrap: wrap; }
      #mainvisual ul.slide-main {
        width: 100%;
        order: 1;
        height: 380px;
        margin-left: 15px; }
      #mainvisual .catchcopy {
        width: 100%;
        order: 2;
        padding: 0; } }

@keyframes fadezoom {
  0% {
    transform: scale(1); }
  100% {
    transform: scale(1.2);
    /* 拡大率 */ } }
.add-animation {
  animation: fadezoom 15s 0s forwards; }

/*------------------------------------------------------
　かやぶき屋根からラン
-------------------------------------------------------*/
section.example {
  background: url("../img/top/example_bg.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  color: #fff;
  padding-top: 100px; }
  @media screen and (max-width: 768px) {
    section.example {
      font-size: 85%; } }
  section.example h3 {
    font-weight: bold;
    font-size: 260%; }
    section.example h3 span {
      display: block;
      font-weight: normal;
      font-size: 50%;
      letter-spacing: 0.2em;
      margin-bottom: 0.5em; }
  section.example p {
    line-height: 2;
    margin: 1em 0; }
  section.example .cycle-img .col-md-4 {
    padding: 0 30px; }
    @media screen and (max-width: 768px) {
      section.example .cycle-img .col-md-4 {
        padding: 0 10px; } }
  section.example .cycle-img .cycle {
    width: 100%;
    border-radius: 50%;
    padding-bottom: 100%;
    overflow: hidden;
    position: relative; }
    section.example .cycle-img .cycle img {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      object-fit: cover; }
  section.example .wave-bottom {
    width: 100%;
    vertical-align: bottom;
    position: relative;
    margin-bottom: -2px;
    margin-top: 100px; }

/*------------------------------------------------------
　目立たぬところを丁寧に。
-------------------------------------------------------*/
section.exterior {
  background-image: radial-gradient(at 0 40%, #BFE1FF, transparent 50%), radial-gradient(at 80% 30%, #BFE1FF, transparent 20%);
  padding: 100px 0;
  position: relative; }
  section.exterior p {
    line-height: 2;
    margin: 1em 0; }
  section.exterior .exterior-text {
    width: 50%;
    padding: 10% 10px; }
    @media screen and (max-width: 768px) {
      section.exterior .exterior-text {
        width: 100%;
        font-size: 90%; } }
  section.exterior .exterior_01 {
    position: absolute;
    left: 50%;
    top: 100px;
    width: 24.5%;
    height: 55%;
    object-fit: cover; }
    @media screen and (max-width: 768px) {
      section.exterior .exterior_01 {
        bottom: 5%;
        top: auto;
        /* bottom: 0; */
        height: auto;
        width: 44%;
        left: 5%; } }
  section.exterior .exterior_02 {
    position: absolute;
    right: 0;
    bottom: 100px;
    width: 24.5%;
    height: 55%;
    object-fit: cover; }
    @media screen and (max-width: 768px) {
      section.exterior .exterior_02 {
        right: 5%;
        bottom: 13%;
        width: 44%;
        height: auto; } }
  @media screen and (max-width: 768px) {
    section.exterior {
      padding: 10% 5% 95% 5%; } }

/*------------------------------------------------------
　求人情報・インターンシップ
-------------------------------------------------------*/
section.recruit {
  color: #fff; }
  section.recruit .recruit-bg {
    background: url("../img/top/recruit.jpg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    padding: 100px 10px 350px 10px;
    position: relative; }
    @media screen and (max-width: 768px) {
      section.recruit .recruit-bg {
        padding: 70px 10px 320px 10px;
        font-size: 90%; } }
    section.recruit .recruit-bg:after {
      position: absolute;
      content: "";
      display: inline-block;
      z-index: 0;
      background: rgba(0, 0, 0, 0.5);
      top: 0;
      left: 0;
      width: 100%;
      height: 100%; }
    section.recruit .recruit-bg .catch {
      line-height: 2;
      position: relative;
      z-index: 2; }
  section.recruit .internship {
    background: rgba(12, 60, 172, 0.86);
    position: relative;
    margin-top: -250px;
    padding: 70px 20px; }
    @media screen and (max-width: 768px) {
      section.recruit .internship {
        padding: 30px;
        font-size: 90%; } }