@charset "UTF-8";

/* ■==■==■==■==■==■==■==■==■==■==■==■==■==■==■==■==■==■==■==■==■==■==■==■==■==■==■==■==■==■==■==■==■ */
/* 全体共通部分 */
/* ■==■==■==■==■==■==■==■==■==■==■==■==■==■==■==■==■==■==■==■==■==■==■==■==■==■==■==■==■==■==■==■==■ */
*{
    font-family: sans-serif;
}

html {
    scroll-padding-top: 118px; /* 固定ヘッダの高さ（60px）+ パンくずリストの高さ（48px）+ 上の余白(10px)  */
}

section{
    width:90vw;
    margin:0 auto;
}

.wrapper{
    width:90vw;
    margin:0 auto;
}

p{
    color:#666;
}

.mt_10{
    margin-top: 10px;
}

.mt_20{
    margin-top: 20px;
}

.mt_30{
    margin-top: 30px;
}

.mb_10{
    margin-bottom: 10px;
}

.mb_20{
    margin-bottom: 20px;
}

.mb_30{
    margin-bottom: 30px;
}

.ta_r{
    text-align: right;
}

.spacing{
    height: 20vh;
}

/* ■==■==■==■==■==■==■==■==■==■==■==■==■==■==■==■==■==■==■==■==■==■==■==■==■==■==■==■==■==■==■==■==■ */
/* スマホ用＋デスクトップ用レイアウト */
/* ■==■==■==■==■==■==■==■==■==■==■==■==■==■==■==■==■==■==■==■==■==■==■==■==■==■==■==■==■==■==■==■==■ */

/* --------------------------------------------------- */
/* ヘッダー共通部分 */
/* --------------------------------------------------- */

/* ■ 全体・共通部分
/* --------------------------------------------------- */
header{
    background-color: #1a2b5f;
    position: fixed; /*← fixedで固定 */
    width: 100%;
    z-index: 90;
    height:60px;    /* スマホ用は高さ60px デスクトップ用は下記で別途設定 */
}

/* ■ 左側のコンテンツエリア
/* --------------------------------------------------- */
/* セクション */
#official_logo_section{
    background-color: #1a2b5f;
    padding-top:15px;
    width:auto;
    text-align: left;
    height:60px;
}

/* ロゴイメージ */
.official_logo{
    width:240px;
}

/* ■ 右側のコンテンツエリア
/* --------------------------------------------------- */
/* セクション */
#nav_section{
    display: none;      /* スマホ版は非表示 */
}

/* お問い合わせ */
#head_contact_us{
    display: none;
}

/* ナビゲーションメニュー */
#head_nav{
    display: none;
}

#head_nav a {
    position: relative; /*アンダーラインの位置を決めるための基準 */
}

#head_nav a::after {
    position: absolute;
    left: 0;
    content: '';
    width: 100%;
    height: 2px;
    background: #d2be3e;
    bottom: -3px;               /*アンダーラインがaタグの下端から現れる*/
    transform: scale(0, 1);     /*アンダーラインの縮尺比率。ホバー前はx方向に0*/
    transform-origin: left top; /*変形（アンダーラインの伸長）の原点がaタグ（各メニュー）の左端*/
    transition: transform 0.3s; /*変形の時間*/
}

#head_nav a:hover::after {
    transform: scale(1, 1);     /*ホバー後、x軸方向に1（相対値）伸長*/
}

/* ハンバーガーメニュー */
.hamburger {
    position: fixed;
    top: 5px;
    right: 10px;
    z-index: 100;     /* 重ね順 */
    width: 48px;
    height: 48px;
    border: 1px solid #fff;
    background: #1a2b5f;
    border-radius: 5px;
    /* background: transparent; */    
    cursor: pointer;
}

.hamburger__line {
    position: absolute;
    left: 11px;
    width: 26px;
    height: 2px;
    background-color: #fff;
    transition: all .4s;
}

.hamburger__line:nth-of-type(1) {
    top: 14px;
}
.hamburger__line:nth-of-type(2) {
    top: 23px;
}
.hamburger__line:nth-of-type(3) {
    top: 32px;
}

/* ハンバーガーメニューオープン時 */
.hamburger.active .hamburger__line:nth-of-type(1) {
    transform: translateY(9px) rotate(-45deg);
}
.hamburger.active .hamburger__line:nth-of-type(2) {
    opacity: 0;
}
.hamburger.active .hamburger__line:nth-of-type(3) {
    transform: translateY(-9px) rotate(45deg);
}

.hum_nav {
    position: fixed;
    top: 0;
    left: 0;
    width: 300px;
    height: 100vh;
    background-color: #1a2b5f;
    box-shadow: 2px 0 4px rgba(0,0,0,.1);
    transform: translateX(-100%);
    transition: transform .4s;
    z-index: 90;
}

.hum_nav.active {
    transform: translateX(0);
}

.hum_nav__list {
    margin: 0;
    padding: 100px 0 0;
    list-style: none;
}

.hum_nav__item {
    padding: 0 20px;
}

.hum_nav__link {
    display: block;
    padding: 15px 0;
    color: #fff;
    text-decoration: none;
    border-bottom: 1px solid #eee;
}

/* --------------------------------------------------- */
/* メイン全体共通部分 */
/* --------------------------------------------------- */

/* ■ 全体
/* --------------------------------------------------- */
main{
    padding-top:60px;   /* ヘッダーが固定なので、ヘッダーの高さ分だけ調整する */
}

/* ■ 見出し
/* --------------------------------------------------- */
/* h2見出し */
.heading2{
    border-bottom:3px solid #1a2b5f;
    border-left:1em solid #1a2b5f;
    background-color: #E9F1FF;
    text-align: center;
    padding:1em 0;
    white-space: nowrap;
    margin: 0 auto 30px;
    color:#333;
    font-size:1.4em;
}

.heading2_eng{
    font-size: 0.7em;
}

/* h3見出し */
.heading3{
    color:#1a2b5f;
    font-size:1.2em;
    line-height: 2.0em;
    border-bottom: 1px solid #333;
}

/* h4見出し */
.heading4{
    color:#1a2b5f;
    line-height: 2.4em;
    font-size:1.2em;
}

/* ■ パンくずリスト
/* --------------------------------------------------- */
#fixedbar{
    position:absolute;
    height:48px;
    width:100%;
    color:#1a2b5f;
    border-bottom:1px solid #1a2b5f;
    background-color: #fff;
    white-space: nowrap;
}
 
#fixedbar.fixed{
    position:fixed;
    top:60px;
    z-index:30;
}
 
.fixedbarReserved{
    height:60px; /*fixedbar の高さと合わせる*/
}

/* パンくずリスト全体 */
.breadcrumb {
    margin: 0 auto;
    line-height: 48px;
    padding: 0;
    list-style: none;
    width:90vw;
    font-size:1em;
}

.breadcrumb li {
    display: inline;/*横に並ぶように*/
    list-style: none;
}

.breadcrumb li:after {/* >を表示*/
    content: ' > ';
    padding: 0 0.2em;
    color: #999;
}

.breadcrumb li:last-child:after {
    content: '';
}

.breadcrumb li a {
    text-decoration: none;
    color: #333;/*色*/
}

.breadcrumb li a:hover {
    text-decoration: underline;
}

@media (max-width:400px){
    .breadcrumb{
        font-size:0.8em;
    }
}

/* --------------------------------------------------- */
/* TOPページのメイン全体 */
/* --------------------------------------------------- */

/* ■ スライドショーエリア
/* --------------------------------------------------- */
/* ◆ エリア全体 */

/* スマホ・タブレット表示の場合 */
.slideshow_area {
    position: relative;
    width: 100%;
    height: 60vh;
    overflow: hidden;
    background-color: #0a132f;
}

/* デスク表示の場合 */
@media (min-width:1080px){
    .slideshow_area {
        position: relative;
        width: 100%;
        height: calc(100vh - 110px);
        overflow: hidden;
    }
}


/* ◆ 画像エリア（アニメーション設定含む）       */
/* ------------------------------------------ */
/* ■ スライドショーエリア */
/* --------------------------------------------------- */

/* 画像共通箇所 */
.slide {
    position: absolute;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 1.5s ease-in-out, visibility 0s linear 1.5s; /* ← フェード遅延を防ぐ */
}


/* 通常時の画像表示 */
.slide_img_file_01{
    background-image: url('../img/slide_japan_map_s.png');
}

.slide_img_file_02{
    background-image: url('../img/slide_track02_s.jpg');
}

.slide_img_file_03{
    background-image: url('../img/slide_warehouse_s.jpg');
}



/* .slide_img_file_04{
    background-image: url('../img/slide_warehouse_d.jpg');
} */

.slide.active {
  opacity: 1;
  visibility: visible;
  transition: opacity 1.5s ease-in-out;
}

/* ウィンドウ幅448px以下の画像表示 */
@media (min-width:448px){

    .slide_img_file_01{
        background-image: url('../img/slide_japan_map_d.png');
    }

    .slide_img_file_02{
        background-image: url('../img/slide_track02_d.jpg');
    }

    .slide_img_file_03{
        background-image: url('../img/slide_warehouse_d.jpg');
    }



    /* .slide_img_file_04{
        background-image: url('../img/slide_warehouse_d.jpg');
    } */

}

/* ウィンドウ幅1080px以上の画像表示 */
@media (min-width:1080px){

    /* 画像エリア（デスクトップ用） */
    .slide {
        position: absolute;
        right:0%;
        width: 60%;
        height: 100%;
        background-size: auto 100% ; /* ← 画像を縮小表示 */
        background-position: center;
        opacity: 0;
        animation: fadeSlide 12s infinite;
    }
}




/* ◆ テキストエリア（アニメーション設定含む）       */
/* --------------------------------------------- */

/* テキスト共通箇所（最低ウィンドウ幅） */
.slideshow_text_area {
    background: linear-gradient(90deg, rgba(10,19,47,0.5),rgba(10,19,47,0.5));
    padding:30px 5vw;
    position: relative;
    width: 100vw;
    height:100%;
    margin:0 auto;
    z-index: 1;
    text-shadow: 0 0 15px rgba(0,0,0,0.6);
    text-align: left;
    top: 50%;
    transform: translateY(-50%);
}

.slideshow_caption_tag_text{
    display: inline-block;
    padding:1.2em;
    border: 1px solid #fff;
    border-radius: 30px;
    font-size: 0.75em;
    color:#fff;
    min-width: 205px;
}

.slideshow_caption_main_text{
    margin-top:20px;
    margin-bottom:20px;
    color:#fff;
    font-size: 1.5em;
    font-weight: bold;
    min-width: 600px;
}

.slideshow_caption_sub_text{
    min-width: 600px;
    color:#fff;
    font-size: 0.75em;
    line-height: 1.8em;
}

.sm-break { display: block; }   /* テキストを改行する */

/* ウィンドウ幅700px以上～1079px以下のテキストエリア */
@media (min-width:700px){
    .slideshow_text_area {
        background: linear-gradient(90deg, rgba(10,19,47,0.5),rgba(10,19,47,0.5));
        padding:30px 5vw;
        position: relative;
        width: 50vw;
        min-width:350px;
        height:100%;
        margin: 0; /* 左寄せに変更 */
        z-index: 1;
        text-shadow: 0 0 15px rgba(0,0,0,0.6);
        text-align: left;
        top: 50%;
        transform: translateY(-50%);
    }

    .slideshow_caption_tag_text{
        display: inline-block;
        padding:1.2em;
        border: 1px solid #fff;
        border-radius: 30px;
        font-size: clamp(0.75em, 1.2vw, 0.9em);
        color:#fff;
    }

    .slideshow_caption_main_text{
        margin-top:1em;
        margin-bottom:1em;
        color:#fff;
        font-size: clamp(1.5em, 2.5vw, 2.5em);
        font-weight: bold;
    }

    .slideshow_caption_sub_text{
        min-width: 600px;
        color:#fff;
        font-size: 1.6vw;
        line-height: 1.75em;
    }

}


/* ウィンドウ幅1080px以上のテキストエリア */
@media (min-width:1080px){
    .slideshow_text_area {
        /* background-color: rgba(10, 19, 47, 0.1); */
        background-color: rgba(230, 230, 230, 0.1);
        -ms-backdrop-filter: blur(2px);
        backdrop-filter: blur(2px);
        min-width: 900px;
        height:510px;
        margin-top:40px;
        margin-left:5vw;
        padding:50px 5vw 0px 5vw;
        top: 10%;
        transform: translateY(-10%);
    }

    .slideshow_caption_tag_text{
        display: inline-block;
        padding:1.3em 2.6em;
        border: 1px solid #fff;
        border-radius: 34px;
        font-size: 0.9em;
        text-shadow: 3px 3px 2px rgba(0, 0, 0, 0.8);
    }

    .slideshow_caption_main_text{
        margin-top:2vh;
        margin-bottom:2vh;
        font-size: 2.5em;
        text-shadow: 3px 3px 2px rgba(0, 0, 0, 0.8);
    }

    .slideshow_caption_sub_text{
        font-size: 1.1em;
        line-height: 2.4em;
        color:#fff;
        font-weight: bold;
        text-shadow: 3px 3px 2px rgba(0, 0, 0, 0.8);
    }

    .sm-break { display: inline; /* テキストを改行しない */ }
}


/* ■ サービス　■ 強み
/* --------------------------------------------------- */
.overview{
    height: auto;
    width: 90vw;
    padding:30px;
    /* flex: 1;
    aspect-ratio: 1 / 1; */
    border:1px solid #aaa;
    border-radius: 8px;
}

.overview_title {
    display: flex;
    align-items: center;       /* 画像と文字を縦中央揃え */
    gap: 20px;                 /* 画像とテキストの間に隙間 */
    margin-bottom: 30px;
}

.overview_title_img {
    width: 60px;
    height: 60px;
    object-fit: cover;
}

.overview_title_text {
    font-size: 1.4em;
    margin: 0;
    color:#333;
}

.overview_description{
    font-size: 1em;
    color: #666;
    margin: 0;
}

/* ■ 拠点・車両
/* --------------------------------------------------- */

/*================ 全体 ================*/
.bases_and_vehicles_container {
    display: grid;
    gap: 20px;
    width: 90vw;
}

@media (min-width: 1080px) {        /* 1080px以上で横並びにして「拠点」「車両」の比率を2:1に指定 */
  .bases_and_vehicles_container {
    width:80vw;
    grid-template-columns: 2fr 1fr;
  }
}

/*================ 拠点セクション ================*/
/* 各拠点を全て囲ったコンテナー */
.base_container{
    display: grid;
    gap: 20px;
}

/* 540px以上で横並びにして「拠点」内にある拠点の比率を1:1に指定 */
@media (min-width: 540px) {
    .base_container {
        grid-template-columns: 1fr 1fr;
    }
}

/*================ 各拠点 ================*/
/* 各拠点のコンテナー */
.base_inside_container{
  border: 1px solid #aaa;
  text-align: center;
  box-sizing: border-box;
  padding-bottom:20px;
  border-radius: 8px;
}

/* 各拠点の画像（未使用） */
.base_inside_img{
  width: 100%;
  object-fit: cover;
  height: auto;
  display: block;
  aspect-ratio: 4 / 3;
}

/* 英語テキスト */
.base_inside_eng_text{
    font-size:0.8em;
    color:#666;
    line-height: 2.8em;
}

/* 各拠点の名前 */
.base_inside_name{
    font-size:1.4em;
    font-weight: bold;
    color:#333;
    line-height: 0.7em;
}

/* 各拠点の補足 */
.base_inside_supplement_text{
    font-size:1em;
    font-weight: bold;
    color:#333;
    line-height: 2em;
    margin-bottom:15px;
}

/* 各拠点の住所 */
.base_inside_address{
    font-size:0.8em;
    line-height: 1.2em;
    color:#666;
}

/* googleマップボタン */
.google_map_button{
    width:120px;
    background-color: #1a2b5f;
    color:#fff;
    padding:5px;
    border-radius: 5px;
    text-decoration: none;
    text-align: center;
    display: inline-block;
    margin-top:20px;
}

/*================ 車両セクション ================*/

/* 車両を囲ったコンテナー */
.vehicles_container{
    height: 100%;
}

/* 車両テーブル */
.vehicles_table{
    border:1px dotted #333;
    border-radius: 8px;
    width: 100%;
}

.vehicles_table td.vehicles_name{
    background-color: #f6f6f6;
    padding-left:20px;
    width:70%;
    font-size:1em;
    line-height: 4.06em;
    border-bottom:1px dotted #333;
}

.vehicles_table td.vehicles_nunber_of_units{
    padding-left:20px;
    border-bottom:1px dotted #333;
    width:30%;
}

.vehicles_table td.vehicles_total{
    background-color: #f6f6f6;
    padding-left:20px;
    width:70%;
    font-size: 1.0em;
    font-weight: bold;
    line-height: 4.06em;
}

.vehicles_table td.vehicles_total_units{
    font-weight: bold;
    padding-left:20px;
    width:30%;
}



/* ■ 安全・法令遵守
/* --------------------------------------------------- */
/* 安全項目を全て囲ったコンテナー */
.safety_laws_container{
  gap: 20px;
  display: grid;
  justify-content: center; /* コンテナ中央に配置 */
  grid-template-columns: 100%;
  max-width: 90vw;
  margin: 0 auto;
}

/* 安全項目のコンテナー */
.safety_laws_inside_container{
  text-align: left;
  box-sizing: border-box;
  padding-bottom:20px;
}

/* 安全項目のタイトルネーム */
h4.safety_laws_item_name {
    position: relative;
    color: #333;
    font-weight: bold;
    font-size: 0.7em;
    line-height: 1.4;
    margin-left: 1.8em; /* アイコン分のスペース */
}

@media (min-width: 420px) {
    h4.safety_laws_item_name {
        font-size: 1.1em;
    }
}

h4.safety_laws_item_name::before {
    content: '';
    position: absolute;
    top: 50%;
    left: -1.8em; /* テキストとの距離を相対指定 */
    transform: translateY(-50%);
    width: 1em;   /* テキストサイズに比例して拡大縮小 */
    height: 1em;  /* 同上 */
    background-image: url('../img/safety_icon_no_frame.png');
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
}

/* 安全項目のイメージ画像 */
.safety_laws_item_image{
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 3; /* ←ブラウザが比率を自動で維持 */
    overflow: hidden;
}

.safety_laws_item_image img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* トリミングして比率にフィット */
  display: block;
}

@media (min-width: 900px) {
    /* 安全項目を全て囲ったコンテナー */
    .safety_laws_container {
        gap: 10px;
        max-width: 90vw;
        grid-template-columns: repeat(2, 1fr);
    }

    .safety_laws_item_name{
        font-size:1em;
    }
}

/* ■ 会社概要
/* --------------------------------------------------- */
/* テーブルスタイル */
.table_style{
    margin:0 auto;
}

.table_style tr{
    height: 3em;
}

.table_style td:nth-of-type(1){
    font-size:1em;
    font-weight: bold;
    width:25vw;
    border-bottom:1px dotted #333;
    color:#1a2b5f;
}

.table_style td:nth-of-type(2){
    font-size:1em;
    width:65vw;
    border-bottom:1px dotted #333;
    color:#666;
}

/* ■ プライバシーポリシー
/* --------------------------------------------------- */
.privacy_policy_main_text{
    line-height: 2.4em;
    color:#666;
}
.privacy_policy_list{
    line-height: 2.4em;
    list-style-position:inside;
}

.privacy_policy_list li{
    color:#666;
    text-indent: -1em;
    padding-left: 1em;
}

.privacy_policy_text{
    line-height: 2.4em;
    color:#666;
    padding-left: 1em;
}

/* ■ 404エラー
/* --------------------------------------------------- */
.not_found_main_text{
    line-height: 2.4em;
    color:#666;
}

.search_by_page_section{
    margin-top:20px;
    padding:20px 0 20px 20px;
    background-color: #E9F1FF;
}

.search_by_page_section p{
    font-size:0.8em;
    line-height: 2em;
    letter-spacing: 0.2em;
}

.search_by_page_section p a{
    text-decoration: none;
    color:#666;
}

.search_by_page_section p a:hover{
    color:#999;
}

/* ■ お問い合わせ
/* --------------------------------------------------- */
/* ====== コンテナ全体 ====== */
.contact_container {
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
  justify-content: space-between;
  width: 100%;
  max-width: 80vw; /* デフォルトは80vw */
  margin: 0 auto;
  padding: 20px 0; /* 上下余白のみ */
}

/* 1079px以下 → 最大幅90vwに変更 */
@media (max-width: 1079px) {
  .contact_container {
    max-width: 90vw;
  }
}

/* ====== 各営業所ブロック ====== */
.contact_inside_container {
  background: #f6f6f6;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

/* ====== カラム指定 ====== */

/* --- 960px以上：3カラム --- */
@media (min-width: 960px) {
  .contact_inside_container {
    flex: 1 1 calc(33% - 30px);
  }
}

/* --- 650～9599px：2カラム --- */
@media (min-width: 649px) and (max-width: 959px) {
  .contact_container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
  }

  .contact_inside_container {
    flex: 1 1 calc(50% - 30px);
  }

  /* 1つ目だけ全幅にする */
  .contact_inside_container:nth-child(1) {
    flex: 1 1 100%;
  }
}

/* --- 639px以下：1カラム --- */
@media (max-width: 649px) {
  .contact_inside_container {
    flex: 1 1 100%;
  }
}

/* ====== 見出し ====== */
.heading3_base {
  font-size: 1.2rem;
  font-weight: bold;
  color: #333;
  margin-bottom: 15px;
  border-bottom: 2px solid #ddd;
  padding-bottom: 5px;
}

/* ====== TEL／FAX共通フレーム ====== */
.tel_frame {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-bottom: 12px;
}

/* ====== アイコン部分 ====== */
.tel_icon img,
.fax_icon img {
  width: 28px;
  height: auto;
  display: block;
}

/* ====== テキスト部分 ====== */
.tel_info,
.fax_info {
  line-height: 1.4;
}

.tel_num,
.fax_num {
  font-size: 1.1rem;
  font-weight: bold;
  color: #1a2b5f;
}

.tel_hours,
.fax_hours {
  font-size: 0.9rem;
  color: #666;
}


/* ====== Mail ====== */
/* Mail */
.mail_frame{
    margin-top:30px;
    border:1px solid #1a2b5f;
    width:90vw;
    text-align: center;
}

.mail_button{
    display: block;
    color:#1a2b5f;
    font-size: 1.1em;
    padding:20px 0;
    transition: all 0.2s ease;
}

.mail_button:hover{
    background-color: #1a2b5f;
    color:#ffffff;
    font-size: 1.1em;
    padding:20px 0;
    cursor: pointer;
}

.mail_button::before{
    content:'';
    background-image:url('../img/mail_icon.png');
    display: inline-block;
    width: 50px;
    height: 30px;
    background-size: contain;
    vertical-align: middle;
    transition: all 0.2s ease;
}

.mail_button:hover::before{
    background-image:url('../img/mail_icon_h.png');
}










/* --------------------------------------------------- */
/* フッターコンテンツ部分 */
/* --------------------------------------------------- */

/* ■ 全体・共通部分
/* --------------------------------------------------- */
/* 全体 */
footer{
    background-color: #1a2b5f;
    padding-top:20px;
}

/* 各コンテンツの区切り線 */
.separator_line{
    border-bottom:1px dotted #999;
    margin-top:20px;
    margin-bottom:20px;
}

/* 見出し */
span.footer_contents_heading_title{
    display: block;
    color:#fff;
    font-weight: bold;
    font-size:1.2em;
}

/* ナビゲーション */
ul.footer_contents_nav li{
    list-style: none;
    text-align: center;
}

ul.footer_contents_nav li a{
    color:#ccc;
    text-decoration: none;
    line-height: 3.0em;
}

ul.footer_contents_nav a {
    position: relative; /*アンダーラインの位置を決めるための基準 */
    font-size: .8em;
}

ul.footer_contents_nav a::after {
    position: absolute;
    left: 0;
    content: '';
    width: 100%;
    height: 2px;
    background: #d2be3e;
    bottom: -3px;               /*アンダーラインがaタグの下端から現れる*/
    transform: scale(0, 1);     /*アンダーラインの縮尺比率。ホバー前はx方向に0*/
    transform-origin: left top; /*変形（アンダーラインの伸長）の原点がaタグ（各メニュー）の左端*/
    transition: transform 0.3s; /*変形の時間*/
}

ul.footer_contents_nav a:hover::after {
    transform: scale(1, 1);     /*ホバー後、x軸方向に1（相対値）伸長*/
}

/* ■ 上部（左側）のコンテンツエリア 
/* --------------------------------------------------- */
/* コンテンツエリア */
.footer_contents_left_area{
    text-align: center;
}

/* 社名 */
a.footer_contents_company_name{
    display:block;
    color:#fff;
    text-decoration: none;
    font-weight: bold;
    font-size:1.2em
}

/* 拠点 */
span.footer_contents_base{
    display:inline-block;
    color:#ccc;
    font-size:0.65em;
    line-height: 3.0em;
}

/* ■ 中央のコンテンツエリア 
/* --------------------------------------------------- */
/* コンテンツエリア */
.footer_contents_center_area{
    text-align: center;
}


/* ■ 下側（右側）のコンテンツエリア 
/* --------------------------------------------------- */
/* コンテンツエリア */
.footer_contents_right_area{
    text-align: center;
}

/* ■ 著作権表記
/* --------------------------------------------------- */
.copyright{
    margin-top:20px;
    padding:20px 0px 20px 0;
    line-height: 30px;
    text-align: center;
    background-color: #0a132f;
}

.copyright span{
    color:#fff;
    font-size:.6em;
}


/* ■==■==■==■==■==■==■==■==■==■==■==■==■==■==■==■==■==■==■==■==■==■==■==■==■==■==■==■==■==■==■==■==■ */
/* デスクトップ専用レイアウト */
/* ■==■==■==■==■==■==■==■==■==■==■==■==■==■==■==■==■==■==■==■==■==■==■==■==■==■==■==■==■==■==■==■==■ */

@media (min-width:1080px){

    /* ----------------------------------------------- */
    /* 全体共通部分（デスクトップ） */
    /* ----------------------------------------------- */
    section{
        width:80vw;
    }

    .wrapper{
        margin:0 auto;
        width:80vw;
    }

    .two_column{
        display:flex;
        justify-content:space-between;
    }

    .three_column{
        display:flex;
        justify-content:space-between;
        align-items: flex-start;
        align-items: stretch;
    }

    html {
        scroll-padding-top: 168px; /* 固定ヘッダの高さ(110px) + パンくずリストの高さ（48px） +上の余白（10px）分 */
    }

    /* ----------------------------------------------- */
    /* ヘッダー共通部分（デスクトップ） */
    /* ----------------------------------------------- */
    /* ■ 全体・共通部分
    /* --------------------------------------------------- */
    header{
        background-color: #1a2b5f;
        height:110px;
    }

    /* ■ 左側のコンテンツエリア
    /* --------------------------------------------------- */
    /* セクション */
    #official_logo_section{
        width:340px;
        height:110px;
    }

    /* 企業ロゴ */
    .official_logo{
        width:340px;
    }

    /* 会社名 */
    .official_name{
        display:block;
        padding-top:5px;
        font-size: 1.0em;
        letter-spacing: 0.2em;
        color:white;
    }

    /* ■ 右側のコンテンツエリア
    /* --------------------------------------------------- */
    /* セクション */
    #nav_section{
        display: block;
        height:60px;
    }

    /* お問い合わせ */
    #head_contact_us{
        display: block;
        margin:15px 0;
        text-align: right;
    }

    .border_btn01 {
        display: inline-block;
        width: 100%;
        max-width: 250px; /* ボタン幅 */
        color: #FFF; /* 文字色 */
        border: 2px solid #FFF; /* 線幅・種類・色 */
        padding: 0.3em 2em;
        font-weight: bold; /* 文字の太さ */
        text-decoration: none;
        text-align: center;
        transition: 0.3s;
    }

    /* マウスオーバーした際のデザイン */
    .border_btn01:hover {
        color: #1a2b5f; /* 文字色 */
        border:2px solid #FFF;
        background: #d2be3e; /* 背景色 */
    }

    /* ナビゲーションメニュー */
    #head_nav{
        display: flex;
        justify-content: center;
        list-style: none;
        gap:2.5em;
        font-size:1em;  
    }

    #head_nav a{
        align-content: center;
        color:#fff;
        text-decoration: none;
    }

    /* ハンバーガーメニュー */
    .hamburger {
        display:none;
    }

    /* --------------------------------------------------- */
    /* メイン全体共通部分（デスクトップ） */
    /* --------------------------------------------------- */

    /* ■ 全体
    * --------------------------------------------------- */
    main{
        padding-top:110px;  /* ヘッダーが固定なので、ヘッダーの高さ分だけ調整する */
    }

    /* ■ パンくずリスト
    /* --------------------------------------------------- */    
    /* 画面上部_固定表示用 */
    #fixedbar.fixed{
        top:110px;
    }
    
    .fixedbarReserved{
        height:110px; /*fixedbar の高さと合わせる*/

    }

    /* パンくずリスト全体 */
    .breadcrumb {
        width:80vw;
    }

    /* ■ 見出し
    /* --------------------------------------------------- */
    /* h2見出し */
   .heading2{
        border-bottom:5px solid #1a2b5f;
        border-left:1.4em solid #1a2b5f;
        padding: 1.4em 0;
        margin: 0px auto 30px;
        font-size:1.4em;
    }

    /* --------------------------------------------------- */
    /* TOPページのメイン全体（デスクトップ） */
    /* --------------------------------------------------- */

    /* ■ サービス ■ 強み
    /* --------------------------------------------------- */
    .overview{
        width:80vw;
    }


    /* ■ 拠点・車両
    /* --------------------------------------------------- */

    /* ■ 安全・法令遵守
    /* --------------------------------------------------- */



    /* ■ 会社概要
    /* --------------------------------------------------- */
    /* テーブルスタイル */
    .table_style{
        margin:0 auto;
    }

    .table_style tr{
        height: 3em;
    }

    .table_style td:nth-of-type(1){
        font-size:1em;
        width:20vw;
    }

    .table_style td:nth-of-type(2){
        font-size:1em;
        width:60vw;
    }

    
    /* ■ お問い合わせ
    /* --------------------------------------------------- */
    /* メールでのお問い合わせボタン */
    .mail_frame{
        width:80vw;
    }

    /* --------------------------------------------------- */
    /* フッターコンテンツ部分（デスクトップ版） */
    /* --------------------------------------------------- */

    /* ■ 全体・共通部分
    /* --------------------------------------------------- */
    /* 各コンテンツの区切り線 */
    .separator_line{
        border-left:1px dotted #999;
        border-bottom:0;
        margin-top:0;
        margin-bottom:0;
    }

 
    /* ■ 左側のコンテンツエリア 
    /* --------------------------------------------------- */
    /* コンテンツエリア */
    .footer_contents_left_area{
        width:auto;
        padding-bottom:0;
        border-bottom:0px;
        margin:0;
    }
 
    /* ■ 中央のコンテンツエリア 
    /* --------------------------------------------------- */
    /* コンテンツエリア */
    .footer_contents_center_area{
        width:auto;
        padding-bottom:0;
        border-bottom:0px;
        margin:0;
    }
 
    /* ■ 右側のコンテンツエリア 
    /* --------------------------------------------------- */
    /* コンテンツエリア */
    .footer_contents_right_area{
        width:auto;
        padding-bottom:0;
        margin:0;
    }

    /* ■ 著作権表記 
    /* --------------------------------------------------- */
    /* 特になし */
}


/* ■==■==■==■==■==■==■==■==■==■==■==■==■==■==■==■==■==■==■==■==■==■==■==■==■==■==■==■==■==■==■==■==■ */
/* その他・調整用
/* ■==■==■==■==■==■==■==■==■==■==■==■==■==■==■==■==■==■==■==■==■==■==■==■==■==■==■==■==■==■==■==■==■ */

/* ----------------------------------------------- */
/* ヘッダー共通部分（ロゴサイズ調整） */
/* ----------------------------------------------- */
@media (min-width:375px){
    /* 企業ロゴ */
    .official_logo{
        width:280px;
    }
}

@media (min-width:400px){
    /* 企業ロゴ */
    .official_logo{
        width:300px;
    }
}

@media (min-width:1380px){
    
    /* ---------- 左カラム ---------- */
    /* セクション */
    #official_logo_section{
        width:590px;
        height:110px;
    }

    /* 企業ロゴ */
    .official_logo{
        padding-top:10px;
        width:590px;
    }
}

/* ----------------------------------------------- */
/* スライドショー（最小幅の対応 写真を縦画像にする） */
/* ----------------------------------------------- */