@charset "utf-8";
/* 中型デバイス（タブレット）用のスタイル */
@media screen and (min-width: 768px) and (max-width: 1199px) {

  /* ここにスタイルを記述 */
  /* header {
        background-color: rgba(255, 255, 255, 0.8); 
    }  */
  .main_block {
    margin-bottom: 100px;
  }

  .navbar {
    display: none;
    /* ナビゲーションバーを表示 */
  }

  .hamburger-menu {
    display: flex;
    /* ハンバーガーメニューを表示 */
    margin-right: 10px;
    margin-top: 15px;
  }

  svg#defro-icon {
    width: 45px;
  }

  .slide-wrapper {
    gap: 5px;
    height: 1950px;
    animation: slide-flow 40s infinite linear 1s both;
  }

  .slide-container {
    height: 35vh;
    top: 0;
    right: 0;
    width: 650px;
    height: 100vh;
  }

  .slide {
    width: 100%;
    /* 幅を100%に設定 */
    height: auto;
    /*高さを自動に設定*/
    object-fit: cover;
    /* 画像をトリミングしてフィットさせる */
  }

  .svg-container {
    right: 7%;
    bottom: 0;
    width: 20%;
  }

  .text-container {
    height: 160px;
    overflow: hidden;
  }

  .text-container1 {
    height: 160px;
    overflow: hidden;
  }

  .top-section,
  #works {
    width: 100%;
    /* 小さい画面では幅を100%に設定 */
  }

  #about {
    max-width: 100%;
    /* 小さい画面では幅を100%に */
    margin-bottom: 50px;
  }

  .about-image {
    width: 100%;
  }

  .about-content {
    width: 100%;
    padding: 10px;
  }

  .about-content h3 {
    font-size: 1.5rem;
    margin: 5px;
  }

  h3.boss {
    font-size: 2rem;
    /* 小さい画面でのフォントサイズ */
  }

  .about-image img {
    max-width: 100%;
    /* 小さい画面では幅を100%に */
  }

  .career-content {
    text-align: center;
    /* 小さい画面では左揃えに */
  }

  #access {
    margin-bottom: 80px;
  }

  .access-container {
    gap: 20px;
    padding: 0 20px;
  }

  .access-map.box.smoothTrigger {
    width: 100%;
  }

  .access-map iframe {
    /* height: 300px; スマートフォンなどの小さい画面では高さを調整 */
    width: 100%;
  }

  .company-info-list {
    width: 100%;
    /* 小さい画面ではリストの幅を100%に */
    padding-right: 0;
  }

  .form-group div {
    flex-direction: column;
    align-items: flex-start;
    /* 左揃えにする */
  }

  .title {
    top: 35%;
    left: 2%;
  }

  .title .outline-text {
    color: #0196f9;
    font-size: 4.5rem;
    /* より小さい画面に適したフォントサイズ */
    -webkit-text-stroke: 0;
    /* アウトラインを非表示にする */
  }

  .title .outline-text-c {
    color: #0196f9;
    font-size: 2rem;
    /* より小さい画面に適したフォントサイズ */
    -webkit-text-stroke: 0;
    /* アウトラインを非表示にする */
  }

  .about-content .subtitle {
    margin: 5px;
    font-size: 18px;
  }

  /* .about-content p {
      font-size: 20px;  
    } */
  /* フッターのスタイル */
  @keyframes slideInText1 {
    0% {
      left: -100%;
    }

    100% {
      left: 0;
      /* テキスト1の最終位置を右に50ピクセル移動 */
    }
  }

  @keyframes slideInText2 {
    0% {
      left: -100%;
    }

    100% {
      left: 10px;
      /* テキスト2の最終位置を右に30ピクセル移動 */
      top: 10px;
    }
  }

  @keyframes slideInText3 {
    0% {
      right: -100%;
    }

    100% {
      right: 0;
      /* テキスト1の最終位置を右に50ピクセル移動 */
    }
  }

  @keyframes slideInText4 {
    0% {
      right: -100%;
    }

    100% {
      right: 10px;
      /* テキスト2の最終位置を右に30ピクセル移動 */
      top: 10px;
    }
  }
}

/* レスポンシブデザイン：画面サイズが576pxから767pxの場合 */
@media screen and (min-width: 576px) and (max-width: 767px) {

  /* header {
       background: none;
    }  */
  .main_block {
    margin-bottom: 50px;
  }

  .navbar {
    display: none;
    /* ナビゲーションバーを表示 */
  }

  .hamburger-menu {
    display: flex;
    /* ハンバーガーメニューを表示 */
    margin-right: 10px;
    margin-top: 15px;
  }

  svg#defro-icon {
    width: 45px;
  }

  .title h1 {
    font-size: 2.5em;
    /* フォントサイズを小さくする */
    /* padding-left: 20px; */
  }

  .slide-wrapper {
    gap: 5px;
    height: 1950px;
    animation: slide-flow 40s infinite linear 1s both;
  }

  .slide-container {
    width: 100%;
    /* 幅を100%に設定 */
    height: 50vh;
    /* 高さをビューポートの50%に設定 */
  }

  .slide {
    width: 100%;
    /* 幅を100%に設定 */
    height: auto;
    /*高さを自動に設定*/
    object-fit: cover;
    /* 画像をトリミングしてフィットさせる */
  }

  .svg-container {
    right: 0;
    width: 25%;
  }

  .text-container {
    width: 100%;
    height: 130px;
    overflow: hidden;
  }

  .text1,
  .text3 {
    font-size: 5rem;
  }

  .text2,
  .text4 {
    font-size: 5rem;
  }

  .text-container1 {
    width: 100%;
    height: 130px;
    overflow: hidden;
  }

  /* .l {
      margin-bottom: 50px;
    } */
  /* .r {
      margin-bottom: 50px;
    } */
  .top-section,
  #works {
    width: 100%;
    /* 小さい画面では幅を100%に設定 */
  }

  #about {
    max-width: 100%;
    /* 小さい画面では幅を100%に */
    margin-bottom: 50px;
  }

  .about-container {
    flex-direction: column;
    margin-top: 30px;
  }

  .about-content,
  .about-image {
    width: 100%;
  }

  .about-content {
    padding-right: 0;
    margin-bottom: 20px;
  }

  .about-content h3 {
    font-size: 1em;
    margin: 5px;
  }

  h3.boss {
    font-size: 1.4em;
    /* 小さい画面でのフォントサイズ */
  }

  .about-image img {
    max-width: 90%;
    /* 小さい画面では幅を100%に */
  }

  .career-content {
    text-align: left;
    /* 小さい画面では左揃えに */
  }

  #access {
    margin-bottom: 50px;
  }

  .access-container {
    flex-direction: column;
    gap: 20px;
    margin-top: 20px;
  }

  .access-map.box.smoothTrigger {
    width: 100%;
  }

  .access-map iframe {
    /* height: 300px; スマートフォンなどの小さい画面では高さを調整 */
    width: 100%;
  }

  .company-info-list {
    width: 100%;
    /* 小さい画面ではリストの幅を100%に */
    padding: 0 20px;
    margin-top: 10px;
  }

  .form-group div {
    flex-direction: column;
    align-items: flex-start;
    /* 左揃えにする */
  }

  .footer-menu {
    /* flex-direction: column; */
    gap: 20px;
  }
  footer p {
    /* text-align: left; */
    padding-left: 40px;
  }

  .title {
    top: 40%;
    left: 10%;
  }

  .title .outline-text {
    color: #0196f9;
    font-size: 5rem;
    /* より小さい画面に適したフォントサイズ */
    -webkit-text-stroke: 0;
    /* アウトラインを非表示にする */
  }

  .title .outline-text-c {
    color: #0196f9;
    font-size: 2rem;
    /* より小さい画面に適したフォントサイズ */
    -webkit-text-stroke: 0;
    /* アウトラインを非表示にする */
  }

  .about-content .subtitle {
    margin: 5px;
    font-size: 17px;
  }

  .about-content p {
    font-size: 16px;
  }

  /* フッターのスタイル */
  footer {
    margin-top: 40px;
    text-align: left;
  }

  .footer-menu {
    list-style: none;
    gap: 30px;
    flex-direction: column;
    align-items: start;
    padding-left: 40px;
    gap: 16px;
    margin: 0;
  }


  @keyframes slideInText1 {
    0% {
      left: -100%;
    }

    100% {
      left: 0;
      /* テキスト1の最終位置を右に50ピクセル移動 */
    }
  }

  @keyframes slideInText2 {
    0% {
      left: -100%;
    }

    100% {
      left: 10px;
      /* テキスト2の最終位置を右に30ピクセル移動 */
      top: 10px;
    }
  }

  @keyframes slideInText3 {
    0% {
      right: -100%;
    }

    100% {
      right: 0;
      /* テキスト1の最終位置を右に50ピクセル移動 */
    }
  }

  @keyframes slideInText4 {
    0% {
      right: -100%;
    }

    100% {
      right: 10px;
      /* テキスト2の最終位置を右に30ピクセル移動 */
      top: 10px;
    }
  }
}

/* レスポンシブデザイン：画面サイズが575px以下の場合 */
@media screen and (max-width: 575px) {
  #splash-logo {
    font-size: 16px;
  }

  /* header {
      background: none;
    }  */
  .header-logo {
    margin: 10px 15px;
  }

  .main_block {
    margin-bottom: -20px;
  }

  .hamburger-nav li a {
    font-size: 16px;
  }

  .navbar {
    display: none;
    /* ナビゲーションバーを表示 */
  }

  /* .hamburger-menu {
      display: flex;
      margin-right: 10px;
      margin-top: 5px;
    } */
  svg#defro-icon {
    width: 40px;
  }

  .title h1 {
    font-size: 2.5em;
    /* フォントサイズを小さくする */
    /* padding-left: 20px; */
  }

  .slide-wrapper {
    gap: 1px;
    height: 1950px;
    /* animation: slide-flow 40s infinite linear 1s both; */
  }

  .slide-container {
    width: 100%;
    /* 幅を100%に設定 */
    height: 40vh;
    /* 高さをビューポートの50%に設定 */
  }

  .slide {
    width: 100%;
    /* 幅を100%に設定 */
    height: auto;
    /*高さを自動に設定*/
    object-fit: cover;
    /* 画像をトリミングしてフィットさせる */
  }

  .svg-container {
    right: 13%;
    top: 50%;
    width: 0%;
  }

  .grid-container {
    /* margin-bottom: 0; */
    gap: 10px;
    margin-top: 0;
  }

  .text-container {
    width: 100%;
    height: 90px;
    overflow: hidden;
  }

  .text1,
  .text3 {
    font-size: 3rem;
  }

  .text2,
  .text4 {
    font-size: 3rem;
  }

  .text-container1 {
    width: 100%;
    height: 90px;
    overflow: hidden;
    margin-bottom: 50px;
  }

  .l {
    margin-bottom: 0;
  }

  /* .r {
      margin-bottom: 10px;
    } */
  .top-section,
  #works {
    width: 100%;
    /* 小さい画面では幅を100%に設定 */
  }

  #about {
    max-width: 100%;
    /* 小さい画面では幅を100%に */
    margin-bottom: 15px;
  }

  .about-container {
    flex-direction: column;
    margin-top: 40px;
  }

  .about-content,
  .about-image {
    width: 100%;
  }
  .about-image {
    margin-left: 0px;
  }

  .about-content {
    padding-right: 0;
    margin-bottom: 20px;
  }

  .about-content h3 {
    font-size: 1em;
    margin: 5px;
  }

  h3.boss {
    font-size: 1.4em;
    /* 小さい画面でのフォントサイズ */
  }

  .career-content {
    text-align: left;
    /* 小さい画面では左揃えに */
    margin-top: 30px;
  }

  #access {
    margin-bottom: 50px;
  }

  .access-container {
    flex-direction: column;
    gap: 40px;
    margin-top: 30px;
  }

  .access-map.box.smoothTrigger {
    width: 100%;
  }

  .access-map iframe {
    /* height: 300px; スマートフォンなどの小さい画面では高さを調整 */
    width: 100%;
  }

  .company-info-list {
    width: 100%;
    /* 小さい画面ではリストの幅を100%に */
    padding: 0 20px;
  }

  #contact h3 {
    font-size: 16px;
    /* タイトルのフォントサイズ */
  }

  .form-group div {
    flex-direction: column;
    align-items: flex-start;
    /* 左揃えにする */
  }

  /* フッターのスタイル */
  footer {
    text-align: left;
  }
  .footer-menu {
    flex-direction: column;
    align-items: start;
    gap: 16px;
    margin: 0;
    padding-left: 40px;
  }

  .footer-menu li {
    font-size: 1rem;
  }

  footer p {
    margin-top: 15px;
    margin-bottom: 0;
    padding-left: 40px;
  }

  .title {
    display: flex;
    flex-direction: column;
    /* text-align: center; */
    position: absolute;
    top: 40%;
    /* left: 15%; */
  }

  .title .outline-text {
    color: #0196f9;
    font-size: 2rem;
    /* より小さい画面に適したフォントサイズ */
    -webkit-text-stroke: 0;
    /* アウトラインを非表示にする */
  }

  .title .outline-text-c {
    color: #0196f9;
    font-size: 1.5rem;
    /* より小さい画面に適したフォントサイズ */
    -webkit-text-stroke: 0;
    /* アウトラインを非表示にする */
  }

  .about-content .subtitle {
    margin: 5px;
    font-size: 17px;
  }

  .about-content p {
    font-size: 16px;
  }

  @keyframes slideInText1 {
    0% {
      left: -100%;
    }

    100% {
      left: 0;
      /* テキスト1の最終位置を右に50ピクセル移動 */
    }
  }

  @keyframes slideInText2 {
    0% {
      left: -100%;
    }

    100% {
      left: 10px;
      /* テキスト2の最終位置を右に30ピクセル移動 */
      top: 10px;
    }
  }

  @keyframes slideInText3 {
    0% {
      right: -100%;
    }

    100% {
      right: 0;
      /* テキスト1の最終位置を右に50ピクセル移動 */
    }
  }

  @keyframes slideInText4 {
    0% {
      right: -100%;
    }

    100% {
      right: 10px;
      /* テキスト2の最終位置を右に30ピクセル移動 */
      top: 10px;
    }
  }
}

#policy dd {
  font-size: 0.8rem;
  /* テキストのフォントサイズを小さくする */
  color: #0196f9;
}

#policy dt {
  font-size: 0.8rem;
  /* テキストのフォントサイズを小さくする */
  color: #0196f9;
}

@media (max-width: 768px) {
  .content-container {
    flex-direction: column;
    /* スマートフォンでは縦方向のスタック */
  }

  /* コンタクトのスタイル */
  #contact {
    margin-top: 0;
  }

  .contact-container {
    margin-bottom: 30px;
  }

  .breadcrumb-container {
    position: relative;
    /* スマートフォンでは固定位置を解除 */
    flex-basis: auto;
    /* 幅を自動調整 */
    top: 100px;
  }

  #policy {
    width: 100%;
    /* 画面幅に合わせる */
    padding: 10px;
    /* スマートフォン用のパディング */
    flex-basis: auto;
  }

  div#policy h1,
  h2 {
    font-size: 1.25rem;
    /* タイトルのフォントサイズを小さくする */
  }

  .breadcrumb {
    .breadcrumb-item a {
      font-size: 1.2rem;
      /* フォントサイズを小さくする */
    }

    .breadcrumb-item+.breadcrumb-item::before {
      padding: 0 5px;
      /* スマートフォンでは間隔を狭くする */
    }
  }
}

@media (min-width: 640px) {
  .c-form__item {
    flex-wrap: nowrap;
  }

  .c-form__label {
    width: 40%;
  }

  .c-form__input {
    width: 55%;
  }
}