@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Jost:ital,wght@0,100..900;1,100..900&family=Noto+Sans+JP:wght@100..900&family=Noto+Serif+JP:wght@200..900&display=swap');


/* コーポレートサイト CSS
-------------------------------*/

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{
    margin:0;
    padding:0;
}

summary {
  list-style: none;
}
/* Safari向けの指定（念のため入れておくと安心です） */
summary::-webkit-details-marker {
  display: none;
}

table{
    border-collapse:collapse;
    border-spacing:0;
}
fieldset,img{
    border:0;
}
address,caption,cite,code,dfn,em,strong,th,var{
    font-style:normal;
    font-weight:normal;
}
ul,ol,li{
    list-style:none;
}
caption,th{
    text-align:left;
}
h1,h2,h3,h4,h5,h6{
    font-size:100%;
    font-weight:normal;
}
q:before,q:after{
    content:'';
}
abbr,acronym {border:0;font-variant:normal;}
sup {vertical-align:text-top;}
sub {vertical-align:text-bottom;}
hr {display:none;}
input,textarea,select{
    font-family:inherit;
    font-size:inherit;
    font-weight:inherit;
    font-size:100%;
}
*,
*::before,
*::after {
    box-sizing: border-box;
}

img{
    max-width:100%;
    height:auto;
    vertical-align: bottom;
    margin:0;
    padding:0;
}

.clearfix:after {
    content: ""; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden;
}
html {scroll-behavior: smooth;}

a {
  outline:none;
  color: #2e2e2e;
  -webkit-transition: 0.5s;
  -moz-transition: 0.5s;
  -o-transition: 0.5s;
  transition: 0.5s;
  text-decoration: none;
}

a:hover {
  text-decoration: none;
  filter: alpha(opacity=80);
  -moz-opacity:0.80;
  opacity:0.80;
}

/* PCで電話リンクしない */
@media(min-width: 768px){
  a[href^="tel:"]{
    pointer-events: none;
  }
}

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



/* Basic setting
-------------------------------*/

body {
	font-family: 'Noto Sans JP', "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
	font-size: 16px;
	line-height: 1.8;
    font-weight: 500;
	color: #000;
	-webkit-text-size-adjust: 100%;
}
#wrapper{
	margin:0 auto;
	padding:0;
	width:100%;
	overflow:hidden;
}
.w1650{
    width: 90%;
    max-width: 1650px;
    margin: auto;
}





/* ヘッダー
-------------------------------*/
#header2{
    width: 100%;
    position: fixed;
    z-index: 90;
    /* min-height: 90px; */
    height: 90px;
    background-color: rgba(255,255,255,0.5);
    display: flex;
    justify-content: center;
    align-items: center;
/*    border-bottom: solid 1px #ccc;*/
}
#header2 .innerbox {
    width: 98%;
    max-width: 1860px;
    margin: auto;
    align-items: center;
    padding-right: 40px;
    height: 100%;
}

.h_search{
    position: absolute;
    top: 20px;
    right: 35px;
    z-index: 25;
    text-align: right;
}
#top_search{
    display: none;
}
.top_search{
    display: inline-block;
    padding: 13px 0;
    cursor: pointer;
}
.top_search_box{
    background: #fff;
    width: 100%;
    padding: 20px;
    display: none;
    position: fixed;
    left: 0;
    top: 90px;
}

#top_search:checked+label+.top_search_box{
    display: block;
}
.top_search_box ._in{
    width: 100%;
    max-width: 1000px;
    margin: auto;
}
.top_search_box .screen-reader-text{
    display: none;
}
.top_search_box .search-field{
    width: calc(100% - 60px);
    padding: 10px;
    border: solid 1px #999;
    border-radius: 5px;
}

.top_search_box input[type="submit"].search-submit{
    width: 42px;
    padding: 10px 0;
    border: solid 1px #999;
    border-radius: 5px;
    font-size: 14px;
    text-align: center;
    margin-left: 5px;
}

@media (max-width: 1030px) and (min-width: 911px) {
    #header .inner{
        padding-right: 30px;
    }
}

@media screen and (max-width:910px){
    .h_search{
        top: 18px;
        right: 75px;
    }
}
@media screen and (max-width:640px){
    .h_search{
        display: none;
    }
}


/* リクルートサイト　SNSアイコンありの場合 */
#header2 .innerbox {
    padding-right: 180px;
}
 .h_search {
    right: 150px;
}
 .h_sns{
    display: block;
    position: absolute;
    top: 20px;
    right: 15px;
    z-index: 25;
    text-align: right;
}
 .h_sns a{
    display: inline-block;
    margin-left: 15px;
}
@media (max-width: 1030px) and (min-width: 911px) {
    #header2 .innerbox {
        padding-right: 140px;
    }
     .h_search {
        right: 130px;
    }
     .h_sns{
        top: 25px;
    }
     .h_sns a{
        width: 35px;
        margin-left: 10px;
    }

}
@media screen and (max-width:910px){

     .h_search {
        right: 210px;
    }
     .h_sns{
        right: 80px;
    }

}
@media screen and (max-width:500px){
    #header2 .innerbox{
        padding-right: 0;
    }
     .h_sns{
        top: 100px;
        right: 10px;
    }

}



/* フッター
-------------------------------*/
#footer2{
    width: 100%;
    background-color: #f2f2f2;
    border-top: solid 3px #e10000;
    padding-top: 40px;
    padding-bottom: 40px;
}
.f_info dd{
    margin-top: 10px;
    margin-left: 60px;
    font-size: 15px;
    line-height: 1.6;
}
.f_nav{
    width: calc(100% - 400px);
    max-width: 640px;
}
.f_nav ul{
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content:flex-start;
    font-size: 16px;
    line-height: 1.5;
}
.f_nav ul li:not(:last-child){
    flex-grow: 1;
}

.f_nav ul li a{
    display: block;
    color: #000;
    font-weight: 500;
    margin-bottom: 10px;
}
#footer2 .copy{
	text-align:left;
	font-size:13px;
	margin-top:40px;
}

/*  ページトップへ */
#pageTop{
	position:fixed;
	bottom:50px;
	right:20px;
}

@media screen and (max-width:910px){
    .f_info{
        width: 100%;
        text-align: center;
    }
    .f_info dd{
        margin-left: 0;
    }
    .f_nav{
        display: none;
    }
    #footer2 .copy{
        text-align:center;
    }

}

@media screen and (max-width:640px){
    #footer2{
        padding-bottom: 20px;
    }
    #footer2 .copy{
        font-size:11px;
    }
    #pageTop img{
        width:50px;
        height:auto;
    }
}




/* コーポレートサイト　トップページ
-------------------------------*/
.co-top_img{
    width: 100%;
    /* height: 100vh; */
    overflow: hidden;
    position: relative;
}
.co-top_movie{
    position:relative;
    z-index: -1;
}
.co-top_movie video{
    width: 100%;
    /* height: 100vh; */
    object-fit: cover;
    object-position: center;
    vertical-align: bottom;
}
.rec-top_img .co-top_movie video{
    animation: slide-horizontal 30s linear infinite alternate;
}
@keyframes slide-horizontal {
  0% {
    object-position: 0% 50%;   /* 左端を表示 */
  }
  100% {
    object-position: 100% 50%; /* 右端を表示 */
  }
}
.co-top_txt{
    position: absolute;
    left: 6vw;
    top: 15vw;
    font-size: 5.2vw;
    line-height: 1.4;
    font-weight: 600;
    color: #fff;
    text-shadow: 0 0 15px #999;
}

@media screen and (min-width: 911px) and (max-width: 1920px) and (max-height: 1080px) {
    
    
    body.page-slug-corporate{
        background-color: #f2f2f2;
    }
    .co-top_img{
        width: 100%;
        height: auto;
       aspect-ratio:16 / 9;
        /* aspect-ratio:16 / 9.5; */
    }
    .co-top_movie video{
        width: 100%;
        height: auto;
          aspect-ratio:16 / 9;
        /* aspect-ratio:16 / 9.5; */
    }
}

@media screen and (max-width:910px){
    .co-top_movie video{
    height: 100vh;
}

    .co-top_txt{
        top: 50%;
        transform: translateY(-50%);
        font-size: 8vw;
        line-height: 1.6;
    }   
}
@media screen and (max-width:640px){

}



.co-top-biz-menu{
    position: absolute;
    right: 8.8vw;
    top: 6vw;
    width: 20vw;
    z-index: 50;
}
.co-top-biz-menu .ttl{
    text-align: center;
    margin-bottom: 1.5vw;
    color: #e10000;
}
.co-top-biz-menu .ttl .en{
    font-size: 4.16vw;
    line-height: 1;
    font-family: "Jost", sans-serif;
    font-weight: 600;

}
.co-top-biz-menu .ttl .ja{
    font-size: 15px;
    font-weight: 500;
}
.biz_list{
    width: 100%;
}
.biz_list li{
    position: relative;
    background-image: url(../img/co-top/bg_red.png);
    background-size: cover;
    background-position: left top;
    background-repeat: no-repeat;
}
.biz_list li:not(:last-child){
    margin-bottom: 0.78vw;
}
.biz_list li a.bg{
    position: relative;
    width: 100%;
    height: 5.2vw;
/*    aspect-ratio: 256 / 70;
    max-height: 8.75vh;*/
    color: #fff;
    font-size: 1.4vw;
    font-weight: 500;
    padding-left: 7vw;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    background-position: 1.8vw center;
    background-repeat: no-repeat;
    background-image: url(../img/co-top/bg01.png);
    background-size: 3.4vw auto;
}
.biz_list li a.bg:after{
    position: absolute;
    right: 1vw;
    bottom: 1vw;
    z-index: 2;
    width: 1.25vw;
    aspect-ratio: 1 / 1;
    background: url(../img/co-top/more.png) center center no-repeat;
    background-size: 100% auto;
    content: "";
}
.biz_list li.bm02 a.bg {
    background-image: url(../img/co-top/bg02.png);
}
.biz_list li.bm03 a.bg {
    background-image: url(../img/co-top/bg03.png);
}
.biz_list li.bm04 a.bg {
    background-image: url(../img/co-top/bg04.png);
}
.biz_list li.bm05 a.bg {
    background-image: url(../img/co-top/bg05.png);
}
.biz_list li.bm06 a.bg {
    background-image: url(../img/co-top/bg06.png);
}
.biz_list li a.bg:hover{
    cursor: pointer;
}
.biz_list li .bm_sub.is-active{
    visibility: visible;
    opacity: 1;
    height: auto;
}
.biz_list li .bm_sub{
    visibility: hidden;
    opacity: 0;
    height: 0;
    transition: 0.3s;
    background: url(../img/co-top/bg_bm_sub.png) left top no-repeat;
    color: #fff;
    position: absolute;
    top: 2vw;
    right: 18.5vw;
    width: 44vw;
    z-index: 10;
}
.biz_list li.bm04 .bm_sub{
    top: -1vw;
}
.biz_list li.bm06 .bm_sub{
    top: -3vw;
}
.biz_list li .bm_sub ._in{
    width: 100%;
    padding: 40px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
.biz_list li .bm_sub .bm_ttl{
    width: 7.2vw;
    font-size: 1.8vw;
    font-weight: 600;
    padding-right: 2em;
}
.biz_list li .bm_sub .bm_sec{
    width: calc(100% - 7.2vw);
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    /* font-size: 0.9vw; */
    font-size: 14px;
}
.biz_list li .bm_sub .bm_sec .bm_sec_chi{
    /* width: 33%; */
    width: 50%;
    padding-right: 1em;
}
.biz_list li .bm_sub .bm_sec a{
    display: inline-block;
    margin-bottom: 10px;
    color: #fff;
    width: 13vw;
}
.biz_list li .bm_sub .bm_sec a:hover{
    text-decoration: underline;
}
.biz_list li.bm01 .bm_sub .bm_ttl,
.biz_list li.bm02 .bm_sub .bm_ttl{
    width: 10.8vw;
}
.biz_list li.bm01 .bm_sub .bm_sec,
.biz_list li.bm02 .bm_sub .bm_sec{
    width: calc(100% - 10.8vw);
}
.biz_list li.bm02 .bm_sub .bm_sec .bm_sec_chi.ld1{
    width: 40%;
}
.biz_list li.bm02 .bm_sub .bm_sec .bm_sec_chi.ld2{
    width: 40%;
    padding-right: 0;
}

.biz_list li.bm05 .bm_sub .bm_ttl{
    width: 10.8vw;
}
.biz_list li.bm05 .bm_sub .bm_sec{
    width: calc(100% - 10.8vw);
}
.biz_list li .bm_sub .bm_sec_wide{
    width: 100%;
    margin-top: 2vw;
}
.biz_list li .bm_sub .bm_sec_wide a:nth-child(2){
    margin-left: 1vw;
}
.biz_list li .bm_sub .bm_sec_wide a{
    width: calc(50% - 1vw);
}

@media screen and (min-width:1921px){
    .biz_list li .bm_sub{
        background-size: cover;
    }
}
@media screen and (max-width:1920px){
    .co-top-biz-menu {
        top: calc(90px + 4vw);
    }
}
@media screen and (max-width:1200px){
    .co-top-biz-menu {
        top: calc(90px + 2vw);
    }
}
@media screen and (max-width:910px){
    .co-top-biz-menu{
        display: none;

        position: absolute;
        right: 5%;;
        top: auto;
        bottom: 80px;
        width: 90%;
    }
    
    .biz_list {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }
    .biz_list li{
        width: 47%;
    }
    .biz_list li a.bg {
        height: 10vw;
        font-size: 2.5vw;
        padding-left: 14vw;
        background-position: center center;
        background-size: cover;
    }
    .biz_list li .bm_sub{
        background-image: none;
        background-color: #808080;
        top: 100%;
        right: auto;
        left: 0;
        width: 100%;
    }
    .biz_list li .bm_sub ._in{
        padding: 20px;
    }
    
    
}
@media screen and (max-width:640px){
    .co-top-biz-menu{
        display: none;

        position: absolute;
        right: 5%;;
        top: auto;
        bottom: 40px;
    }
    .biz_list{
        width: 100%;
        max-width: 320px;
        margin-left: auto;
        margin-right: auto;
    }
    
    .biz_list li{
        width: 100%;
        margin-bottom: 10px;
    }
    .biz_list li a.bg {
        height: 50px;
        font-size: 15px;
        padding-left: 100px;
        background-position: center center;
        background-size: cover;
    }
}



.banner_area_sp{
    display: none;

    width: 100%;
    border-top: solid 3px #e10000;
    padding: 50px 0;
    background-color: #f2f2f2;
}
.banner_area_sp .bnr_sp{
    width: 90%;
    max-width: 520px;
    margin: auto;
}
.banner_area_sp .bnr_sp li{
    width: 48%;
    margin-bottom: 20px;
}
@media screen and (max-width:910px){
    .banner_area_sp{
        display: block;
    }

}
@media screen and (max-width:640px){
    .banner_area_sp{
        padding-top: 40px;
        padding-bottom: 20px;
    }
}








/* pageタイトル
-------------------------------*/
main.co-cont{
    padding-bottom: 180px;
    overflow: hidden;
}
.page_name{
    width: 100%;
    /* height: 629px; */
    height: 460px;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    /* background-image: url(../img/page_ttl/page_company.jpg); */
    display: flex;
    justify-content: center;
    align-items:flex-end;
    margin-bottom: 200px;
    position: relative;
    background-color: #e9e9e9;
}
/* 
.page_name.bg_port_of_tsuruga{
   background-image: url(../img/page_ttl/page_port_of_tsuruga.jpg);
    background-image: none;
}

.page_name.bg_comp_policy{
    background-image: url(../img/page_ttl/page_comp_policy.jpg);
    background-position: right center;
}
.page_name.bg_comp_office{
    background-image: url(../img/page_ttl/page_comp_office.jpg);
}


.page_name.bg_business{
    background-image: url(../img/page_ttl/page_corporate.jpg);
}
.page_name.bg_biz_cat01{
    background-image: url(../img/page_ttl/page_biz_cat01.jpg);
}
.page_name.bg_biz_cat02{
    background-image: url(../img/page_ttl/page_biz_cat02.jpg);
}
.page_name.bg_biz_cat03,
.page_name.bg_biz_freight_transportation,
.page_name.bg_biz_safety_activity_trans,
.page_name.bg_biz_cat03_faq{
    background-image: url(../img/page_ttl/page_biz_cat03.jpg);
}
.page_name.bg_biz_cat04,
.page_name.bg_biz_bus{
    background-image: url(../img/page_ttl/page_biz_cat04.jpg);
}
.page_name.bg_biz_cat05{
    background-image: url(../img/page_ttl/page_biz_cat05.jpg);
}
.page_name.bg_biz_security{
    background-image: url(../img/page_ttl/page_biz_security.jpg);
}
.page_name.bg_biz_customs_brokerage{
    background-image: url(../img/page_ttl/page_biz_customs_brokerage.jpg);
}
.page_name.bg_biz_warehousing{
    background-image: url(../img/page_ttl/page_biz_warehousing.jpg);
}
.page_name.bg_biz_transportation{
    background-image: url(../img/page_ttl/page_biz_transportation.jpg);
}
.page_name.bg_biz_insurance_agent{
    background-image: url(../img/page_ttl/page_biz_insurance_agent.jpg);
}
.page_name.bg_biz_container{
    background-image: url(../img/page_ttl/page_biz_container.jpg);
}
.page_name.bg_biz_bulk{
    background-image: url(../img/page_ttl/page_biz_bulk.jpg);
}
.page_name.bg_biz_roro{
    background-image: url(../img/page_ttl/page_biz_roro.jpg);
}
.page_name.bg_biz_schedule{
    background-image: url(../img/page_ttl/page_biz_schedule.jpg);
}
.page_name.bg_biz_port_agent{
    background-image: url(../img/page_ttl/page_biz_port_agent.jpg);
}

.page_name.bg_biz_taxi,
.page_name.bg_biz_taxi_kanko{
   background-image: url(../img/page_ttl/page_biz_taxi.jpg);
    background-image: none;
}
.page_name.bg_biz_safety_activity_bus{
    background-image: url(../img/page_ttl/page_biz_safety_activity_bus.jpg);
}
.page_name.bg_biz_contact{
    background-image: url(../img/page_ttl/page_biz_contact.jpg);
}

.page_name.bg_biz_tours,
.page_name.bg_kairiku-tour{
    background-image: url(../img/page_ttl/page_biz_tours.jpg);
}
.page_name.bg_biz_shop_information{
    background-image: url(../img/page_ttl/page_biz_shop_information.jpg);
}


.page_name.bg_news{
    background-image: url(../img/page_ttl/page_news.jpg);
}
.page_name.bg_news_cont{
    background-image: url(../img/page_ttl/page_news_cont.jpg);
}
.page_name.bg_news_rec {
    background-image: url(../img/page_ttl/page_recruit.jpg);
} */


.bg_movie{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 5;
}
.bg_movie video{
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.page_name ._in{
    width: 100%;
    max-width: 1600px;
    position: relative;
    z-index: 10;
}
.page_name ._in .txt{
    width: 620px;
    /* 
    height: 240px;
    background-color: #fff;
    border-top-right-radius: 50px;
    padding-top: 80px;
    padding-left: 20px; */
    height: 120px;
    background-color: #fff;
    border-top-right-radius: 50px;
    padding-top: 40px;
    padding-left: 20px;
}
.page_name ._in .txt:before{
    position: absolute;
    left: -160px;
    top: 0;
    width: 160px;
    height: 240px;
    background-color: #fff;
    content: "";
}
.page_name ._in .txt .en{
    padding-left: 38px;
    background: url(../img/page_ttl/bar.png) left center no-repeat;
    
}
.page_name ._in .txt .ja{
    color: #e10000;
    font-size: 50px;
    line-height: 1.3;
    letter-spacing: 0.1em;
    font-weight: 500;
}
.page_name ._in .txt .ja.beta{
    letter-spacing: 0;
}
.pan_nav{
    margin-top: 35px;
    font-size: 14px;
    line-height: 1.5;
}
.pan_nav span{
    display: inline-block;
}
.pan_nav span:last-child{
    color: #e10000;
}

@media screen and (max-width:1600px){
    .page_name{
        /* height: 39vw; */
        height: 30vw;
        margin-bottom: 10vw;
    }
    .page_name ._in .txt{
        width: 38vw;
        height: 8vw;
        padding-top: 3.1vw;
    }
    .page_name ._in .txt .ja{
        font-size: 3.1vw;
    }
    .pan_nav{
    margin-top: 4%;
}
}

@media screen and (max-width:910px){
    main.co-cont{
        padding-bottom: 100px;
    }
    .page_name{
        /* height: 330px; */
        height: 280px;
        margin-bottom: 100px;
    }
    .page_name ._in{
        width: 90%;
        margin-bottom: -80px;
        
    }
    .page_name ._in .txt{
        width: 100%;
        height: auto;
        border-radius: 20px 20px 0 0;
        padding-top: 20px;
        padding-left: 20px;
        padding-right: 20px;
        text-align: center;
    }
    .page_name ._in .txt:before{
        display: none;
    }
    .page_name ._in .txt .en{
        display: inline-block;
        padding-left: 38px;
        background: url(../img/page_ttl/bar.png) left center no-repeat;
    }
    .page_name ._in .txt .ja{
        font-size: 30px;
        letter-spacing: 0.07em;
    }
    .pan_nav{
        margin-top: 40px;
        text-align: left;
    }
    
}
@media screen and (max-width:640px){
    main.co-cont{
        padding-bottom: 70px;
    }
    .page_name{
        height: 250px;
        margin-bottom: 70px;
    }
    .page_name ._in{
        margin-bottom: -30px;

    }
    .page_name ._in .txt .en{
        padding-left: 0;
        background: none;
    }
    .page_name ._in .txt .ja{
        font-size: 21px;
        letter-spacing: 0.07em;
    }

    .pan_nav{
        display: none;
    }

}


/*　リクルートサイトのヘッダー */
.page_name_rec{
    width: 100%;
    height: 685px;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    background-image: url(../img/page_ttl/page_recruit.jpg);
    display: flex;
    justify-content: center;
    align-items:center;
    padding-top: 100px;
    margin-bottom: 150px;
    overflow: hidden;
    position: relative;
}
.page_name_rec ._in{
    width: 100%;
    max-width: 1920px;
    position: relative;
    z-index: 5;
}
.page_name_rec ._in .txt{
    width: 35%;
    height: 290px;
    background-color: #e10000;
    border-radius: 0 50px 50px 0;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}
.page_name_rec ._in .txt .ja{
    font-size: 45px;
    color: #fff;
    font-weight: 500;
}
.page_name_rec ._in .txt .ja span{
    font-size: 20px;
}
.page_name_rec ._in .txt .ja span.int{
    font-size: 30px;
}

@media screen and (max-width:1600px){

    .page_name_rec{
        height: 42.8vw;
        margin-bottom: 9vw;
    }
    .page_name_rec ._in .txt{
        height: 18.1vw;
        border-radius: 0 3.1vw 3.1vw 0;
    }
    .page_name_rec ._in .txt .ja{
        font-size: 2.8vw;
    }
    .page_name_rec ._in .txt .ja span{
        font-size: 1.25vw;
    }　
    .page_name_rec ._in .txt .ja span.int{
        font-size: 1.875;
    }

}
@media screen and (max-width:910px){
    .page_name_rec{
        height: 330px;
        margin-bottom: 100px;
    }
    .page_name_rec ._in .txt{
        width: 60%;
        max-width: 400px;
        height: 110px;
        border-radius: 0 30px 30px 0;
    }
    .page_name_rec ._in .txt .ja{
        font-size: 22px;
    }
    .page_name_rec ._in .txt .ja span{
        font-size: 15px;
    }
    .page_name_rec ._in .txt .ja span.int{
        font-size: 18px;
    }

}
@media screen and (max-width:640px){
    .page_name_rec{
        height: 250px;
        margin-bottom: 70px;
    }

    .page_name_rec ._in .txt{
        height: 70px;
        border-radius: 0 20px 20px 0;
    }
    .page_name_rec ._in .txt .ja{
        font-size: 20px;
    }
}


/*　部門別　**/
.page_name_rec.bg_divi{
    width: 100%;
    max-width: 1920px;
    margin-left: auto;
    margin-right: auto;
    height: 790px;
    background-size: auto;
    background-position: 42vw center;
    background-repeat: no-repeat;
    background-image: url(../img/page_ttl/rec_cat01.png);
/*    border-bottom: solid 1px #eee;*/
}
.page_name_rec.bg_divi.cat02{
    background-image: url(../img/page_ttl/rec_cat02.png);
}
.page_name_rec.bg_divi.cat03{
    background-image: url(../img/page_ttl/rec_cat03.png);
}
.page_name_rec.bg_divi.cat04{
    background-image: url(../img/page_ttl/rec_cat04.png);
}
.page_name_rec.bg_divi.cat05{
    background-image: url(../img/page_ttl/rec_cat05.png);
}
@media screen and (max-width:1600px){
    .page_name_rec.bg_divi{
        height: 49.3vw;
        background-size: 55vw auto;
        background-position: 38vw center;
    }
    .page_name_rec ._in .txt .ja  span{
        font-size: 1.25vw;
    }
}
@media screen and (max-width:910px){
    .page_name_rec.bg_divi{
        display: block;
        padding-top: 120px;
        height: 550px;
        background-size: 600px auto;
        background-position: bottom center;
    }
    .page_name_rec ._in .txt .ja  span{
        font-size: 16px;
    }
}
@media screen and (max-width:640px){
    .page_name_rec.bg_divi{
        padding-top: 100px;
        height: 95vw;
        background-size: 90% auto;
    }
}










.w1320{
    width: 90%;
    max-width: 1320px;
    margin: auto;
}
.w1200{
    width: 90%;
    max-width: 1200px;
    margin: auto;
}



/* 敦賀港情報
-------------------------------*/

.pot_cont {
    padding-bottom: 150px;
}
.pot_ttl{
    margin-bottom: 45px;
}
.pot_ttl .en{
    font-family: "Jost", sans-serif;
    font-weight: 400;
    font-size: 15px;
    padding-left: 35px;
    position: relative;
}
.pot_ttl .en:before{
    position: absolute;
    left: 0;
    top: 50%;
    width: 25px;
    height: 2px;
    background-color: #e10000;
    content: "";
}
.pot_ttl .ja{
    font-size: 45px;
    line-height: 1.4;
    font-weight: 500;
    letter-spacing: 0.07em;
    color: #e10000;
}
@media screen and (max-width:910px){
    .pot_cont {
        padding-bottom: 100px;
    }
    .pot_ttl{
        margin-bottom: 35px;
    }
    .pot_ttl .ja{
        font-size: 35px;
    }
}
@media screen and (max-width:640px){
    .pot_cont {
        padding-bottom: 80px;
    }
    .pot_ttl{
        margin-bottom: 25px;
    }
    .pot_ttl .ja{
        font-size: 25px;
    }
}


.pot_txt{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-bottom: 100px;
}
.pot_txt .txt1{
    width: 40%;
    color: #e10000;
    font-size: 45px;
    line-height: 1.4;
    font-weight: 500;
}

.pot_txt .txt2{
    width: 58%;
    line-height: 2.5;
}
@media screen and (max-width:910px){
    .pot_txt{
        margin-bottom: 60px;
    }
    .pot_txt .txt1{
        width: 100%;
        font-size: 35px;
        margin-bottom: 30px;
    }
    .pot_txt .txt2{
        width: 100%;
        line-height: 1.8;
    }
}
@media screen and (max-width:640px){
    .pot_txt{
        margin-bottom: 30px;
    }
    .pot_txt .txt1{
        font-size: 25px;
        margin-bottom: 20px;
    }

}

.pot02{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    
}
.pot02 .txt{
    width: 50%;
}
.pot02 .img{
    width: 45%;
}
.pot_kyori{
    width: 100%;
    max-width: 630px;
    border: solid 1px #ccc;
    margin-top: 50px;
}
.pot_kyori dt{
    width: 100%;
    background-color: #e10000;
    color: #fff;
    font-size: 25px;
    font-weight: 500;
    padding: 15px;
    text-align: center;
}
.pot_kyori dt span{
    font-size: 18px;
    padding-left: 1em;
}
.pot_kyori dd{
    border-top: solid 1px #ccc;
    width: 100%;
    padding: 15px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    font-size: 23px;
    line-height: 1.3;
    letter-spacing: 0.07em;
}

.pot_kyori dd span.dot{
    flex-grow: 1;
    height: 1px;
    border-bottom: dotted 2px #000;
    margin-left: 10px;
    margin-right: 10px;
}

@media (min-width:911px) and (max-width:1280px){

    .pot_kyori{
        margin-top: 3.7vw;
    }
    .pot_kyori dt{
        font-size: 1.8vw;
        padding: 1.1vw;
    }
    .pot_kyori dt span{
        font-size: 1.3vw;
    }
    .pot_kyori dd{
        padding: 1.1vw;
        font-size: 1.7vw;
    }
    .pot_kyori dd span.dot{
        margin-left: .75vw;
        margin-right: 0.75vw;
    }
}
@media screen and (max-width:910px){
    .pot02 .txt{
        width: 100%;
        margin-bottom: 30px;
    }
    .pot02 .img{
        width: 100%;
    }
    .pot_kyori{
        max-width: 450px;
        margin-top: 30px;
    }
    .pot_kyori dt{
        font-size: 20px;
        padding: 10px 15px;
    }
    .pot_kyori dt span{
        font-size: 15px;
    }
    .pot_kyori dd{
        font-size: 16px;
    }
}
@media screen and (max-width:640px){
    .pot_kyori {
        margin-top: 20px;
    }
    .pot_kyori dt{
        font-size: 16px;
        padding: 10px;
    }
    .pot_kyori dt span{
        font-size: 13px;
    }
    .pot_kyori dd{
        font-size: 15px;
    }
}
@media screen and (max-width:480px){
    .pot_kyori dd span:nth-child(1){
        display: block;
        width: 100%;
        padding-bottom: 3px;
    }
    .pot_kyori dd span.dot{
        margin-left: 30px;
    }
}





.pot_soko_map{
    width: 100%;
    position: relative;
}
.pot_soko_map .soko_list{
    position: absolute;
    left: 50px;
    top: 50px;
    z-index: 5;
    background: url(../img/port_of_tsuruga/pot_img04.png) left top no-repeat;
    color: #fff;
    font-size: 18px;
    line-height: 2;
    font-weight: 500;
    padding: 50px;
}
.pot_soko_map .soko_list .cap  {
    font-size: 35px;
    margin-bottom: 10px;
}
.pot_soko_map .soko_list li a{
    color: #fff;
    text-decoration: none;
}
.pot_soko_map .soko_list li a:hover{
    color: #fff;
    text-decoration: underline;
}
@media (min-width:911px) and (max-width:1467px){
    .pot_soko_map .soko_list{
        left: 3.4vw;
        top: 3.4vw;
        font-size: 1.2vw;
        padding: 3.4vw;
    }
    .pot_soko_map .soko_list .cap  {
        font-size: 2.3vw;
        margin-bottom: 0.68vw;
    }

}
@media screen and (max-width:910px){
    .pot_soko_map .soko_list{
        position: static;
        width: 100%;
        margin-bottom: 20px;
        font-size: 16px;
        line-height: 1.8;
        padding: 40px;
    }
    .pot_soko_map .soko_list .cap  {
        font-size: 20px;
        margin-bottom: 8px;
    }
    .pot_soko_map .soko_list ul{
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }
    .pot_soko_map .soko_list li{
        width: 48%;
    }

    .pot_soko_map .img img{
        width: 100%;
        height: 93vw;
        object-fit: cover;
        object-position: 70%;
        border-radius: 20px;
    }
}
@media screen and (max-width:640px){
    .pot_soko_map .soko_list{
        background-image: none;
        background-color: #e10000;
        font-size: 15px;
        line-height: 1.6;
        padding: 20px;
    }
    .pot_soko_map .soko_list .cap  {
        font-size: 18px;
    }
}
@media screen and (max-width:480px){
    .pot_soko_map .soko_list li{
        width: 100%;
    }

}



/* 敦賀港マップ 　ピン */
.pot_soko_map .img{
    position: relative;
}
.pot_soko_map .map_pt a{
    position: absolute;
    z-index: 3;
    width: 26px;
    height: 32px;
/*    background-color: rgba(0,0,0,0.5);*/
}

.pot_soko_map .map_pt.pt01 a{
    left: 646px;
    top: 436px;
}
.pot_soko_map .map_pt.pt02 a{
    left: 546px;
    top: 648px;
}
.pot_soko_map .map_pt.pt03 a{
    left: 657px;
    top: 491px;
}
.pot_soko_map .map_pt.pt04 a{
    left: 625px;
    top: 637px;
}
.pot_soko_map .map_pt.pt05 a{
    left: 611px;
    top: 500px;
}
.pot_soko_map .map_pt.pt06 a{
    left: 687px;
    top: 520px;
}
.pot_soko_map .map_pt.pt07 a{
    left: 631px;
    top: 521px;
}
.pot_soko_map .map_pt.pt08 a{
    left: 613px;
    top: 571px;
}
.pot_soko_map .map_pt.pt09 a{
    left: 741px;
    top: 729px;
}
.pot_soko_map .map_pt.pt10 a{
    left: 725px;
    top: 431px;
}
.pot_soko_map .map_pt.pt11 a{
    left: 771px;
    top: 526px;
}

@media screen and (max-width:1480px){
    .pot_soko_map .map_pt a{
        width: 1.82vw;
        height: 2.16vw;
    }
    .pot_soko_map .map_pt.pt01 a{
        left: 43.649vw;
        top: 29.459vw;
    }
    .pot_soko_map .map_pt.pt02 a{
        left: 36.89vw;
        top: 43.78vw;
    }
    .pot_soko_map .map_pt.pt03 a{
        left: 44.39vw;
        top: 33.18vw;
    }
    .pot_soko_map .map_pt.pt04 a{
        left: 42.23vw;
        top: 43.04vw;
    }
    .pot_soko_map .map_pt.pt05 a{
        left: 41.28vw;
        top: 33.78vw;
    }
    .pot_soko_map .map_pt.pt06 a{
        left: 46.42vw;
        top: 35.14vw;
    }
    .pot_soko_map .map_pt.pt07 a{
        left: 42.64vw;
        top: 35.20vw;
    }
    .pot_soko_map .map_pt.pt08 a{
        left: 41.42vw;
        top: 38.58vw;
    }
    .pot_soko_map .map_pt.pt09 a{
        left: 50.07vw;
        top: 49.26vw;
    }
    .pot_soko_map .map_pt.pt10 a{
        left: 48.99vw;
        top: 29.12vw;
    }
    .pot_soko_map .map_pt.pt11 a{
        left: 52.09vw;
        top: 35.54vw;
    }

}
@media screen and (max-width:910px){
    .pot_soko_map .map_pt a{
        width: 2.85vw;
        height: 3.52vw;
    }
    .pot_soko_map .map_pt.pt01 a{
        left: 30.0vw;
        top: 50.00vw;
    }
    .pot_soko_map .map_pt.pt02 a{
        left: 18.5vw;
        top: 74.29vw;
    }
    .pot_soko_map .map_pt.pt03 a{
        left: 31.21vw;
        top: 56.26vw;
    }
    .pot_soko_map .map_pt.pt04 a{
        left: 27.58vw;
        top: 72.97vw;
    }
    .pot_soko_map .map_pt.pt05 a{
        left: 25.93vw;
        top: 57.36vw;
    }
    .pot_soko_map .map_pt.pt06 a{
        left: 34.51vw;
        top: 59.23vw;
    }
    .pot_soko_map .map_pt.pt07 a{
        left: 28.35vw;
        top: 59.34vw;
    }
    .pot_soko_map .map_pt.pt08 a{
        left: 26.37vw;
        top: 65.38vw;
    }
    .pot_soko_map .map_pt.pt09 a{
        left: 40.99vw;
        top: 83.41vw;
    }
    .pot_soko_map .map_pt.pt10 a{
        left: 38.9vw;
        top: 49.45vw;
    }
    .pot_soko_map .map_pt.pt11 a{
        left: 44.29vw;
        top: 60.44vw;
    }
}






.pot_faci_table{
    width: 100%;
    max-width: 1200px;
    margin: auto;
    border: solid 1px #e10000;
    font-size: 14px;
    line-height: 1.4;
}
.pot_faci_table tr:not(:last-child){
    border-bottom: solid 1px #ffe1dc;
}
.pot_faci_table thead{
    border-bottom: solid 1px #e10000;
    background-color: #ffe1dc;
}

.pot_faci_table td{
    text-align: center;
    padding: 20px 5px;
    border-right: solid 1px #e10000;
}
.pot_faci_table td:last-child{
    border-right: none;
}
.pot_faci_table tbody td:nth-child(5),
.pot_faci_table tbody td:nth-child(6){
    color: #e10000;
}
@media screen and (max-width:910px){
    .pot_faci_table td{
        padding: 12px 3px;
    }
}
@media screen and (max-width:640px){
    .pot_faci_box{
        width: 100%;
        overflow: auto;
    }
    .pot_faci_table{
        width: 750px;
        font-size: 13px;
    }
    .pot_faci_table td{
        padding: 8px 3px;
    }
    
}




/* サイドの「お問い合わせはコチラ」バナー */
.follow-banner {
    position: fixed;
    top: 50%;
    right: -15px;
    transform: translateY(-50%);
    z-index: 100;
    width: 100px;
    height: 450px;
    background: url(../img/recruit/btn_toi_side.png) left top no-repeat;
    background-size: auto 100%;
    transition: 0.3s;
}
.follow-banner:hover{
    right: 0;
}
.follow-banner a{
    display: block;
    width: 100%;
    height: 350px;
}
.follow-banner .close-btn {
    position: absolute;
    bottom: 30px;
    left: 25px;
    width: 45px;
    height: 45px;
    background: url(../img/recruit/btn_close.png) center center/cover no-repeat;
    text-align: center;
    font-size: 20px;
    color: transparent;
    cursor: pointer;
}
/* チェックボックス本体は隠す */
.side-banner-switch {
    display: none;
}
/* チェックが入ったら、隣にあるバナーを消す */
.side-banner-switch:checked + .follow-banner {
    display: none;
}
@media screen and (max-width:1400px){
    .follow-banner {
        right: -1vw;
        width: 7vw;
        height: 32vw;
    }
    .follow-banner a{
        height: 25vw;
    }
    .follow-banner .close-btn {
        bottom: 2.1vw;
        left: 1.7vw;
        width: 3.2vw;
        height: 3.2vw;
    }
}
@media screen and (max-width:910px){
    .side-banner-wrap{
        display: none;
    }
}





































@media screen and (max-width:910px){

}
@media screen and (max-width:640px){

}




@media screen and (max-width:910px){

}
@media screen and (max-width:640px){

}




@media screen and (max-width:910px){

}
@media screen and (max-width:640px){

}










































/* layout */
.dis-ilb{
    display: inline-block;
}
.clear { clear: both; }
.ar { text-align: right; }
.ac { text-align: center; }
.strong{font-weight:bold;}

/* プリントの表示設定 */
@media print{
    body {
        zoom: 0.68;
        -webkit-print-color-adjust: exact;
    }

    #wrapper{
        width:1110px;
        margin:auto;
    }



}