@charset "UTF-8";
@media screen and (min-width: 1025px) {
  /* ここに1025px以上の範囲のスタイルを記述 */

  /*標準設定*/
  body {
    margin: 0;
    color: #373737;
    background: #fff;
  }

  h2 {
    margin-bottom: 6%;
  }

  /*-------*/

  /*-----ヘッダー----*/
  header {
    background: #fff;
    box-shadow: 5px 5px 5px 5px rgba(55, 55, 55, 0.3);
  }

  .header {
    width: 100%;
    height: 85px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    margin: 0;
    top: 0;
    position: sticky;
    z-index: 999;
  }

  .logo {
    margin-left: 10%;
    width: 30%;
  }

  .hamburger-menu {
    display: none;
  }

  .header-nav {
    display: block;
  }

  .header_menu {
    display: flex;
    list-style-type: none;
    padding: 0 120px;
    margin: 0;
    font-size: 20px;
  }

  .header-nav li {
    list-style-type: none;
    float: left;
    text-align: center;
    width: 140px;
    font-size: 18px;
  }

  .header_link {
    text-decoration: none;
    color: #373737;
  }

  .header_link:hover {
    color: #ed6c00;
  }

  /*---------------*/

  /*ムービー埋込*/
  video {
    position: fixed;
    z-index: -1;
    /*top: 0;*/
    left: 0;
    width: 100%;
    height: auto;
    max-width: 100%;
    /*min-height: 100%;*/
  }

  .bg-movie {
    overflow: hidden;
    max-width: 100%;
    height: auto;
  }

  .moviearea {
    position: absolute;
    z-index: -1;
  }

  /*---------*/

  /*スクロールダウン全体の場所*/
  .scrolldown4 {
    /*描画位置※位置は適宜調整してください*/
    position: absolute;
    z-index: 0;
    bottom: 50%;
    left: 5%;
    /*矢印の動き1秒かけて永遠にループ*/
    animation: arrowmove 1s ease-in-out infinite;
  }

  /*下からの距離が変化して全体が下→上→下に動く*/
  @keyframes arrowmove {
    0% {
      bottom: 8%;
    }

    50% {
      bottom: 10%;
    }

    100% {
      bottom: 8%;
    }
  }

  /*Scrollテキストの描写*/
  .scrolldown4 span {
    /*描画位置*/
    position: absolute;
    left: -20px;
    bottom: 10px;
    /*テキストの形状*/
    color: #fff;
    font-size: 0.7rem;
    letter-spacing: 0.05em;
    /*縦書き設定*/
    -ms-writing-mode: tb-rl;
    -webkit-writing-mode: vertical-rl;
    writing-mode: vertical-rl;
  }

  /* 矢印の描写 */
  .scrolldown4:before {
    content: "";
    /*描画位置*/
    position: absolute;
    bottom: 0;
    right: -6px;
    /*矢印の形状*/
    width: 1.5px;
    height: 20px;
    background: #fff;
    transform: skewX(-31deg);
  }

  .scrolldown4:after {
    content: "";
    /*描画位置*/
    position: absolute;
    bottom: 0;
    right: 0;
    /*矢印の形状*/
    width: 1.5px;
    height: 50px;
    background: #fff;
  }

  /*---TOPページコンテンツ---*/
  main {
    margin-top: 45%;
    text-align: center;
    font-size: 16px;
  }

  .service-item {
    text-align: left !important;
    margin-left: 15%;
  }

  .bg-gray {
    padding: 7% 0;
    background: #727071;
    color: #fff;
  }

  .bg-white {
    padding: 7% 0;
    background: #fff;
    color: #373737;
  }

  .bg-orange {
    padding: 7% 0;
    background: #ed6c00;
    color: #fff;
  }

  .vision_img>img {
    width: 50%;
    margin-top: 3%;
  }

  /*----ホバーエフェクト（斜め下にシャッター）----*/
  .service_content {
    text-align: center;
    margin: 10% 10%;
  }

  .hover_service {
    text-decoration: none;
  }

  .hover_service>img {
    width: 60%;
  }

  .service_content_text {
    margin: 3% 5%;
  }

  .hover_service {
    color: #373737;
    font-size: 16px;
    font-weight: bold;
    background: transparent;
    width: 300px;
    height: 300px;
    text-align: center;
    border-radius: 10px;
    box-shadow: 6px 6px 10px 0px rgba(60, 60, 60, 0.4);
    border: 1.5px solid #373737;
    position: relative;
    z-index: 1;
    display: block;
    overflow: hidden;
    transition: .3s;
  }

  .hover_service::before {
    content: "";
    width: 100%;
    position: absolute;
    top: 0;
    right: -300px;
    z-index: -1;
    border-right: 300px solid transparent;
    border-top: 300px solid #ed6c00;
    transform: translateX(-100%);
    transition: transform ease .6s;
  }

  .hover_service:hover {
    color: #fff;
  }

  .hover_service:hover::before {
    transform: translateX(0);
  }

  .content_flex {
    display: flex;
    justify-content: space-around;
  }

  .service_content {
    margin: 16% 0 8% 0;
  }

  .service_content_text {
    font-size: 15px !important;
  }

  .slide_left {
    opacity: 0;
    visibility: hidden;
    transform: translateY(50px);
    transition: opacity 1s, visibility 1s, transform 1s;
  }

  .slide_right {
    opacity: 0;
    visibility: hidden;
    transform: translateY(50px);
    transition: opacity 1s, visibility 1s, transform 1s;
  }

  .scroll {
    opacity: 1;
    visibility: visible;
    transform: translateY(0px);
  }

  /*------------------------------------------*/

  /*---会社概要ページコンテンツ---*/
  .COPY {
    margin-top: 0;
  }

  .catch-copy {
    font-size: 22px;
    font-weight: bold;
  }

  .vision {
    display: block;
    margin: 0 10%;
  }

  .mb {
    display: none;
  }

  .greeting {
    display: flex;
    text-align: left;
    margin: 5% 15%;
    align-items: center;
  }

  .greeting_img {
    width: 35%;
  }

  .greeting_img>img {
    width: 100%;
  }

  .greeting_text {
    margin-left: 5%;
    width: 70%;
  }

  .greeting_text>p {
    margin: 0 10%;
  }

  .greeting_text>h3 {
    margin-left: 10%;
  }

  .traditional-sign {
    text-align: right;
    margin-right: 10%;
  }

  /*----------------------------*/

  /*---アクセス---*/
  .bg-orange_access {
    padding: 5% 0 13% 0;
    background: #ed6c00;
    color: #fff;
  }

  .access_flex {
    display: flex;
  }

  .table_company {
    margin: 0 5% 0 5%;
    text-align: left;
    width: 50%;
  }

  .table_company th,
  .table_company td {
    width: 100%;
    padding-bottom: 2%;
  }

  .table_company th {
    width: 30%;
    font-weight: bold;
  }

  .table_company td {
    width: 80%;
  }

  .map {
    margin-right: 5%;
    width: 50%;
  }

  /*-------------*/

  /*------サービス一覧ページ-------*/
  .service-content_flex {
    display: flex;
    margin: 0 10%;
  }

  .service_img>img {
    width: 60%;
  }

  .service_text_left {
    margin: 10% 0 0 3%;
    width: 50%;
    text-align: left;
  }

  .service_text_right {
    margin-left: 0 0 10% 3%;
    width: 50%;
    text-align: left;
  }

  .desktop_none {
    display: none;
  }

  #ITEM-CONTENT {
    margin-top: 0;
  }

  .item-flex {
    display: flex;
    margin: 0 10% 0 14%;
  }

  .item-box {
    width: 100%;
    text-align: center;
  }

  .item-box>h4 {
    width: 250px;
  }

  .hover_item>img {
    width: 250px;
    height: 250px;
    border-radius: 10px;
    transition: 0.3s;
  }

  .hover_item {
    width: 250px;
    height: 250px;
    overflow: hidden;
  }

  .hover_item>img:hover {
    transform: scale(1.2);
  }

  .security {
    display: flex;
    margin: 0 10%;
  }

  .security>img {
    width: 35%;
    margin-left: 5%;
  }

  .security>p {
    text-align: left;
    margin: 5% 0 0 10%;
  }

  .security>p>span {
    font-size: 23px;
    font-weight: 900;
  }

  .OA_text>a {
    text-decoration: none;
    color: #ed6c00;
    font-weight: 600;
  }

  /*詳細設定*/
  .OA_text {
    margin-top: 0;
  }

  .WEB_text {
    margin-top: 22%;
  }

  .CONSULT_text {
    margin-top: 10%;
  }

  /*-------------*/

  /*お問い合わせボタン*/
  .contact-btn-area {
    width: 100%;
    padding: 7% 0 5% 0;
    background: #fff;
  }

  section {
    max-width: 300px;
    margin: 0 auto;
    font-weight: bold;
  }

  a.contact-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 50px;
    box-sizing: border-box;
    background: repeating-linear-gradient(45deg, #ffffff, #ffffff 3px, #e7e7e7 3px, #e7e7e7 30px);
    color: #373737;
    font-size: 14px;
    letter-spacing: 0.1em;
    text-decoration: none;
    position: relative;
  }

  a.contact-btn span {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 50px;
    background: #fff;
    border: 1px solid #373737;
    box-sizing: border-box;
    position: absolute;
    top: -6px;
    left: -6px;
    transition-duration: 0.2s;
  }

  a.contact-btn:hover span {
    left: -1px;
    top: -1px;
  }

  /*----------------*/

  /*フッター*/
  footer {
    padding: 5% 0;
    background: #727071;
    text-align: center;
  }

  #footer {
    display: flex;
  }

  .footer_logo {
    margin-left: 25%;
  }

  .footer-nav {
    margin: 0;
    text-align: center;
  }

  .footer_menu {
    display: flex;
    list-style-type: none;
    padding: 0 120px;
    margin: 18px 0 0 0;
    font-size: 20px;
  }

  .footer_menu-item {
    margin: 0 7px;
    width: 140px;
    text-align: center;
    font-size: 18px;
  }

  .footer_link {
    text-decoration: none;
    color: #373737;
  }

  .footer_link:hover {
    color: #fff;
  }

  /*-------*/
}