@charset "UTF-8";

/*base.css*/
/*-------------------------------------------------------

基本デザイン・ブロックパーツ定義用スタイルシート

-------------------------------------------------------*/
/*-------------------------------------------------------
reset
-------------------------------------------------------*/

/*-------------------------------------------------------
ベース（全ページ共通）
-------------------------------------------------------*/
@media screen and (min-width:375px) and (max-width:767px){
body{font-size: 16px; } }
@media screen and (max-width:374px){
body{font-size: calc(13px + 3 * (100vw - 320px)/54); } }

/*
フッター
-------------------------------------------------------*/
@media screen and (max-width:767px){
    footer{padding-top:0;} }/*※margin-top:4vw;分の余白を.frame-topのpaddingに移行*/

@media screen and (max-width:767px){
    .footer-nav-list{ 
        display: block; }
    .footer-nav-item { border-bottom: 2px solid #E3E4E9; }
    .footer-nav-item a{
        display: block;
        padding: 1em 0;
        text-align: center; }
    .frame-footer-address{ text-align: center;} }

@media screen and (max-width:767px){
    .mod-footer-banner{
        grid-template-rows:repeat(2, 1fr);}
    .banner .grid-item{
        height: auto; } }

@media screen and (max-width:767px){
    .footer-nav-item + .footer-nav-item{ margin-left: 0;}}

@media screen and (max-width:767px){
    .mod-footer-siteid{
        margin-left:4vw;
        margin-right:4vw; } }

@media screen and (max-width:767px){
    .mod-footer-address{ 
        display: inline-block;
        text-align: left; } }

@media screen and (max-width:767px){
    .footer-address{ font-size: 0.85em;} }

@media screen and (max-width:767px){
    .footer-address:first-child{ margin-right: 0;}}

@media screen and (max-width:767px){
    .footer-address-label{
        width: 5em;
        font-size: 0.85em;}
    .footer-address:first-child{ margin-bottom: 1em;}}

/*
ナビゲーション 現在位置ボーター表示
-------------------------------------------------------*/

@media screen and (max-width:767px){
    .nav-main-list li.nav-current a{ 
      border-bottom-style:none;
      border-left-style:solid;
      border-right-style:solid; }}

/*-------------------------------------------------------
下層ページテンプレート
-------------------------------------------------------*/
/*
レイアウト設定・全幅レイアウト・2段組レイアウト
-------------------------------------------------------*/
@media screen and (max-width:767px){
    .frame-main{ padding: 0;} }

@media screen and (max-width:767px){
    .frame-2col{
        grid-template-columns: 1fr;
        gap: 0;/*※採用に関するお問い合わせとローカルナビの間に余白不要のため変更*/ } }

@media screen and (max-width:767px){
    .mod-content{/*※コンテンツ内に全幅要素を配置するために変更*/
        padding-right: 3vw;
        padding-left: 3vw;
        position: relative;
        overflow: hidden; } }

@media screen and (max-width:767px){
    .frame-2col-side{
        background-color: #F4F5F8;
        padding: 6vw 4vw;
        border-top: 6px solid #E4E5EB;
        grid-column: auto;/*採用情報レイアウトのため追加*/
        grid-row: auto;/*採用情報レイアウトのため追加*/ } }

/*
2段組レイアウト - サイドエリア（ローカルナビゲーション）*/
/*レイアウト設定*/
@media screen and (max-width:767px) {
    .frame-2col-side > ol {
      display: grid;
      border-top: none;
      grid-template-columns: 1fr;
      gap: 10px; } }

/*ローカルナビ共通設定*/
@media screen and (max-width:767px) {
    .frame-2col-side > ol li {
      border-top: 1px solid #EFF1F3;
      border-bottom: 1px solid #EFF1F3;
      border-right: 1px solid #EFF1F3; }
    .frame-2col-side > ol ol li a, 
    .frame-2col-side > ol ol li strong {
      background-color: #fff; }}

/*
文字
-------------------------------------------------------*/

/*
英字フチ文字*/
@media screen and (max-width:767px){
    .border-txt-en{
        font-size: 14vw;} }

/*
文字改行
-------------------------------------------------------*/

/*PCのみ改行*/
@media screen and (max-width:767px){
    .br-pc{ display: none; } }

/*SPのみ改行*/
@media screen and (max-width:767px){
    .br-sp{ display: inline; } }

/*
リンク
-------------------------------------------------------*/

/*
ナビゲーション*/
@media screen and (max-width:767px){
    .footer-nav-item a{ text-decoration: none;}}

/*
リンクボタン*/
@media screen and (max-width:767px){
    .link-btn a:not(.link-btn-inline){
      display: block;
      padding: 0.4em 2em 0.4em 0.4em;
      width: 100%;
      box-sizing: border-box; }}

@media screen and (max-width:767px){
.link-btn a[href^="http"]{
    padding: 0.4em 2em 0.4em 0.4em; }}

/*表（dlタグ）
-------------------------------------------------------*/

/*
共通設定*/
@media screen and (max-width:767px){
    .table-type01,
    .table-type02,
    .table-type03{
    display: block;
    border-right: none;} }

@media screen and (max-width:767px){
    .table dl{
      display: block;
      width: 100%;} }

@media screen and (max-width:767px){
.table dt,
.table dd{ 
    display: block;
    width: 100%;
    min-width: auto; } }

/*
table-branch --- 支店ページ用 */

/*
リスト
-------------------------------------------------------*/

@media screen and (max-width:767px){
    .mod-content ul:not(.news-list) li{
      margin-left: 0.9em;}}

/*-------------------------------------------------------
ブロックパーツ
-------------------------------------------------------*/

/* .parts-detail
文章と写真の横並び
（SPは写真→文章の縦並びで統一）*/
@media screen and (max-width:767px){
    .parts-detail{ flex-direction:column-reverse; }}

@media screen and (max-width:767px){
    .parts-detail-reverse{ flex-direction: column-reverse;}}

@media screen and (max-width:767px){
    .parts-detail div{ width: 100%;}
    .parts-detail > div + div{ max-width: initial; }
    .parts-detail > div + div img{ width: 100%; /*width値を無視して画面幅に合わせる*/}
    .parts-detail .link-btn:has(a){ margin-bottom: 0.5em; }}

/* .parts-message
背景付き本文*/
@media screen and (max-width:767px){
    .parts-message .txt-align-r:has(.president-name + img){
      text-align: center;}}

/* .frame-card
カード型レイアウト */
@media screen and (max-width:767px){
    .frame-card{ grid-template-columns: minmax(0, 1fr); }}

/* 
Q&A*/
@media screen and (max-width:767px){
    .qa dt{
      margin-bottom: 0.6em;}}

@media screen and (max-width:767px){
    .qa dt + dd{
        padding-top: min(0.3vw, 5px);}}

@media screen and (max-width:767px){
    .qa dt::before{
        font-size: 30px;}}

@media screen and (max-width:767px){
    .qa dt + dd::before{
        font-size: 31px;}}

/* 
支店・営業所パーツ*/
/*余白*/
@media screen and (max-width:767px){
    .mod-content .mod-desc + .mod-department{ margin-top: 1em;}}

@media screen and (max-width:767px){
    .mod-content div.mod-department + div.mod-department{ margin-top: 1.3em;}}


/*-------------------------------------------------------
下層ページ共通スタイル
-------------------------------------------------------*/
/*
背景
-------------------------------------------------------*/

@media screen and (max-width:767px){
    .bg-border-gray{ border-width:0.8em;} }

/*
テンプレート - トップページ
-------------------------------------------------------*/

@media screen and (max-width:767px){
    .frame-top{ 
      margin-bottom: 9vw;/*footerのmargin-top分の4vwを移行*/ }}

@media screen and (max-width:767px){
    .frame-top-leadtxt{ margin:2em 1em 3em; }
    .frame-top-slider + .frame-top-leadtxt{ margin:0 1em 3em; }}

@media screen and (max-width:767px){
    .mod-top-leadtxt{ 
        padding: 4vw 6vw 4.5vw;}}

@media screen and (max-width:767px){
    .mod-top-leadtxt *{ 
        text-align: left;}}

@media screen and (max-width:767px){
    .mod-top-leadtxt h1 strong {
        font-size: 1.3em; }}

@media screen and (max-width:767px){
    .mod-top-company h1{ margin-top: 0.4em;}}

/*地図配置調整*/
@media screen and (max-width:767px){
    .frame-top-company{
      margin-top: 2em;
      padding-top: 0; }
    .frame-top-company .top-company-pic{
        position: relative;
        bottom: auto;
        right: auto;
        width: auto; } }

@media screen and (max-width:767px){
    .frame-top-company::before{
        bottom: auto;
        top: 40vw;
        height: clamp(500px, 25vw, 400px); }}

@media screen and (max-width:767px){
    .frame-top-company .border-txt-en{
        bottom: auto;
        top:calc(40vw - 0.5em);}}

@media screen and (max-width:767px){
    .frame-top-branch::before{
        right: -4vw;
        width: 50%; }}

@media screen and (max-width:767px){
    .frame-top-branch{
        margin: 0 4vw 3em;
        padding-bottom: 2em; }}

@media screen and (max-width:767px){
    .mod-top-branch{
        margin-bottom: 1em;}}

@media screen and (max-width:767px){
    .mod-gridimgblk{
        padding:4vw;
        grid-template-columns: 1fr;
        grid-template-rows: 1fr;}}

@media screen and (max-width:767px){
    .gridimgblk-pic{ 
        grid-column:auto;
        grid-row:auto;
        margin-bottom: 2vw;}}

@media screen and (max-width:767px){
    .top-branch-pic{
        width: auto;
        padding-right:0;
        background:none;
        text-align: center;}
    .top-branch-pic img{
        border: 1px solid #E0E0E4;}}

@media screen and (max-width:767px){
    .frame-top-companymenu-twogrid,
    .mod-top-branch,
    .frame-top-companymenu-onegrid{
        max-width:460px;}}

@media screen and (max-width:767px){
    .frame-top-companymenu-twogrid{
        grid-template-columns:auto;
        grid-column-gap: 0;
        grid-row-gap: 0px;
        display: block;}}

@media screen and (max-width:767px){
    .mod-top-companymenu{
        padding:2vw 3vw;
        margin-bottom:1em;}}

@media screen and (max-width:767px){
    .frame-top-recruit{ 
        margin: 2em auto 3em;
        padding-top: 2em;
        padding-bottom: 5.5em; }}

@media screen and (max-width:767px){   
    .mod-top-recruit{
        text-align: center; }}

@media screen and (max-width:767px){
    .top-recruit-pic{
        width:300px;
        top: inherit;
        bottom: -86px;
        left: 50%;
        transform: translateX(-50%);} }

@media screen and (max-width:767px){
    .top-recruit{
        text-align: center;
        padding: 2.5em 6vw 8em; }}

@media screen and (max-width:767px){
    .top-recruit h1{ margin-bottom: 0.5em;}}

@media screen and (max-width:767px){
    .copytxt-recruit{ 
        font-size: 2.4em;}}

@media screen and (max-width:767px){
    .frame-top-news{
        margin-top:2em;
        margin-top:3em; } }

@media screen and (max-width:767px){
    .frame-top-news .bg-dark{
        padding: 4vw 4vw 5vw;}}

@media screen and (max-width:767px){
    .mod-top-news{
        display: block; }
        .mod-top-news h1{ margin-bottom: 0.5em; }}

/*
メインビジュアル*/

@media screen and (max-width:767px){
.frame-top-mainvis{
    padding-bottom: 2.5rem;}  }

@media screen and (max-width:767px){
    .mod-top-mainvis{
        padding-top: 0;} }

/*メインビジュアル ページネーション*/
@media screen and (max-width:767px){
.top-mainvis-pagination.swiper-pagination-bullets{
    bottom: 1.4rem; } }

@media screen and (max-width:767px){
.top-mainvis-pagination .swiper-pagination-bullet {
    display: block;
    width: 100%;
    max-width: 60px;
    margin: 0 1%!important;
    height: 3px; } }

/*
バナースライダー 基本設定*/
@media screen and (max-width:767px){
    .mod-top-slider{
        position: relative;
        top: auto;
        left: auto;
        width: auto;
        height: auto;
        transform: none;
        margin: 0 12vw;/*※バナーの存在感を下げる修正*/ } }

/*バナースライダー ページ送りボタン*/
@media screen and (max-width:767px){
    .top-slider-prev,
    .top-slider-next{/*※バナーの存在感を下げる修正*/
      font-size: 1.3em;
      width: calc(16px + 3vw);
      height: calc(16px + 3vw);
      top: calc(50% - 8px - 1.5vw - 1.1rem - 5px); } }

@media screen and (max-width:767px){
.top-slider-prev{
    left: calc(12vw - 13px - 1.5vw);/*※バナーの存在感を下げる修正*/
    right: auto;
    margin-right: 0; } }

@media screen and (max-width:767px){
    .top-slider-next{
        left: auto;
        right: calc(12vw - 13px - 1.5vw);/*※バナーの存在感を下げる修正*/
        margin-left: 0; } }

/*バナースライダー ページネーション*/      
@media screen and (max-width:767px){
.top-slider-pagination.swiper-pagination-bullets{
    display: flex;
    padding: 0.8rem 1.7rem 1.5rem;
    width: 100vw!important;
    margin-left: calc(50% - 50vw);
    box-sizing: border-box;
    margin-top: 0; } }

@media screen and (max-width:767px){
    .top-slider-pagination .swiper-pagination-bullet {
        display: block;
        width: 6px;/*※バナーの存在感を下げる修正*/
        height: 6px;/*※バナーの存在感を下げる修正*/
        margin: 0 1.5%!important; } }

/*
テンプレート - お知らせ
-------------------------------------------------------*/

/*
お知らせ一覧*/

/*トップ用*/
@media screen and (max-width:767px){
    .news-list-top .news-item:first-child{ padding-top: 0.5em;}}

@media screen and (max-width:767px){
    .news-list li{
        padding: 1em 0;}}

@media screen and (max-width:767px){
    .news-list li > a{
        display: block;
        padding: 0;
        padding-bottom: 0.3em;
        width:auto;}}

@media screen and (max-width:767px){
    .news-list .news-title a{
        display: block;
        padding: 0;}}

@media screen and (max-width:767px){
    .news-title-clamp{
        -webkit-line-clamp: 2;} }

/*
テンプレート - 採用情報
-------------------------------------------------------*/

/*
採用情報に関するお問い合わせ*/
@media screen and (max-width:767px){
    .frame-2col-main + .frame-recruit-contact{
      margin-top: 0; } }

@media screen and (max-width:767px){
.frame-recruit-contact{
    grid-column: auto;
    margin: 0;
    width: auto;
    padding: 3em 3vw; } }
@media screen and (max-width:719px){
    .frame-recruit-contact{
        padding: 2em 3vw 12em; } }

@media screen and (max-width:767px){
    .mod-recruit-contact{
        max-width: 444px;
        padding: 1.5em 3em; } }
@media screen and (max-width:719px){
    .mod-recruit-contact{
        padding: 2em 5vw; } }

@media screen and (max-width:767px){
    .recruit-contact-title{
        font-size: 1.6em;
        margin-bottom: 0.5em;
        width: calc(100% + 10vw);
        margin-left: -5vw;
        letter-spacing: 0.02em; } }

@media screen and (max-width:767px){
    .recruit-contact-tel{
        font-size: 1.8em;
        border: 3px solid #DE4756;
        border-radius: 0.3em;
        padding: 0; } }

@media screen and (max-width:767px){
    .recruit-contact-tel::before{
        display: none; } }

@media screen and (max-width:767px){
    .recruit-contact-tel a{
        color: #DE4756;
        display: block;
        padding: 0.05em 0.4em 0.08em; } }

@media screen and (max-width:767px){
    .recruit-contact-tel a::before{
        font: var(--fa-font-solid);
        content: "\f095";
        font-size: 0.85em;
        margin-right: 0.2em; } }

@media screen and (max-width:767px){
    .recruit-contact-detail{
        font-size: 1em; } }

/*採用に関するお問い合わせ > 採用エントリー .frame-recruit-contact .nav-sub-item*/
@media screen and (max-width:767px){
    .frame-recruit-contact .nav-sub-item{
      font-size: 1.1em; } }

@media screen and (max-width:767px){
    .frame-recruit-contact .nav-sub-item a{
        padding: 0.4em 0;}
    .frame-recruit-contact .nav-sub-item.icon-entry a::before{
        position: initial;}}

@media screen and (max-width:767px){
    .recruit-contact-img{
        bottom: -2.4em;
        height: min(calc(160px + 40 * (100vw - 320px)/54) , 200px); } }
@media screen and (max-width:719px){
    .recruit-contact-img{
        bottom: -11.4em; } }

@media screen and (max-width:767px){
    .recruit-contact-img-left{
        left: -7.5em; } }
@media screen and (max-width:719px){
    .recruit-contact-img-left{
        left: auto;
        right: 50%;
        margin-right: 4.5%; } }

@media screen and (max-width:767px){
    .recruit-contact-img-right{
        right: -7.7em; } }
@media screen and (max-width:719px){
.recruit-contact-img-right{
    left: 50%;
    right: auto;
    margin-left: -4.5%; } }

/*
テンプレート - 採用情報トップページ
-------------------------------------------------------*/

@media screen and (max-width:767px){
    .frame-recruit-mainvis{
      overflow: hidden;
      margin: 0 calc(50% - 50vw);
      padding-top:2.7em;
      padding-bottom: 4em;
      box-sizing: border-box;
      width: 100vw;} }

@media screen and (max-width:767px){
.frame-recruit-mainvis::before{
    top: 0;
    right: auto;
    left: 50%;
    margin-left: 10%;
    width: calc(323px - 10%); } }

@media screen and (max-width:767px){
    .frame-recruit-mainvis::after{
        left: auto;
        right: 50%;
        width: 323px;
        height: calc(20% + 13vw); } }

@media screen and (max-width:767px){
    .mod-recruit-mainvis{
        max-width: 542px;
        padding: 1.5em 1em;} }

@media screen and (max-width:767px){
.recruit-mainvis-title{
    font-size: 1.9em;
    padding: 0 1.9em; }}

@media screen and (max-width:767px){
    .recruit-mainvis-read{
        display: inline-block;
        font-size: 0.9em; } }

@media screen and (max-width:767px){
    .mod-content .recruit-mainvis-read p,
    .mod-content .recruit-mainvis-read p + p{
        margin-top: 1.1em;
        line-height: 1.7;
        letter-spacing: 0.03em; } }

@media screen and (max-width:767px){
    .mod-content .recruit-mainvis-read p:last-child{
        margin-right: 0.6em;
        margin-left: 0.6em; } }

/*採用メインビジュアル用画像*/
@media screen and (max-width:767px){
    .recruit-mainvis-img{
      width: 8em;} }

/*採用メインビジュアル用画像 上段*/
@media screen and (max-width:767px){
    .recruit-mainvis-img-parts,
    .recruit-mainvis-img-sales{
      top: -3.4em; } }

/*採用メインビジュアル用画像 部品*/
@media screen and (max-width:767px){
    .recruit-mainvis-img-parts{
      left: -3.2em; } }

/*採用メインビジュアル用画像 営業*/
@media screen and (max-width:767px){
    .recruit-mainvis-img-sales{
      right: -3.7em; } }

/*採用メインビジュアル用画像 下段*/
@media screen and (max-width:767px){
    .recruit-mainvis-img-service,
    .recruit-mainvis-img-office{
      bottom: -4.5em; } }

/*採用メインビジュアル用画像 整備*/
@media screen and (max-width:767px){
    .recruit-mainvis-img-service{
      left: -3em; } }

/*採用メインビジュアル用画像 事務*/
@media screen and (max-width:767px){
    .recruit-mainvis-img-office{
      right: -3.1em; } }

/*
テンプレート - 支店・営業所
-------------------------------------------------------*/

@media screen and (max-width:767px){
    .frame-branch-detail{ 
      gap: 1vw; } }

@media screen and (max-width:767px){
    .mod-content div.frame-branch-detail + div.iframe-wrap,
    div.mod-branch-detail > div.iframe-wrap{
        margin-top: 2vw; }}