@charset "UTF-8";
/*-----------------------------
base
-----------------------------*/
html {font-size: 62.5%;}
a {text-decoration: none;}
body {
    font-size: 1.6rem;
    font-family: 'Noto Sans JP', sans-serif;
    color: #454444;
}

img {
    max-width: 100%;
    vertical-align: bottom;
}
.special_section {
    width:100%;
    padding: 0px;
    box-sizing: border-box;
}
.section {
    width:100%;
    padding: 60px;
    margin-bottom: 80px;
    box-sizing: border-box;
}
.sec_work, 
.sec_aisatsu, 
.sec_company, 
.sec_contact{

}
.sec_title {
    text-align: center;
    margin: 0 auto 30px;
    font-size: 2.5rem;
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 400;
}
.mincyo_title {
    font-family: 'Noto Serif JP', serif;
    font-weight: 600;
}
.sec_wrapper {
    width: 70%;
    margin: 0 auto;
}
.sec_wrapper_title {
}
.sec_wrapper_text {
    font-family: 'Noto Serif JP', serif;
    font-weight: 500;
}
.sec_wrapper {
}

/*-----------------------------
header_logo
-----------------------------*/
.header {
    width:100%;
    margin: 0 auto;
    padding:10px 20px;

    display: flex;
    justify-content: space-between;
    box-sizing: border-box;
    /* background: pink; */
}


.header_logo{
    width:50%;
    /* background-color: lightblue; */
}
.header_nav{
    width:50%;
    /* background: yellow; */
}
.header_logo > p {/*軽貨物運送事業・第一種貨物利用運送*/
    font-size: 1.4vw;
    /* background: green; */
}
.company_name {/*ロゴとふりがな*/
    display: flex;
    align-items: center;
    /* background: yellow; */
}
.header_logo h1 {/*ロゴ*/
    width: 300px;
    height:auto;
    margin-top: 5px;
    margin-right: 20px;
    /* background: black; */
}
.header_logo img {/*ロゴ画像*/
    width: 100%;
}
.company_name > p {/*ふりがな*/
    font-size: 1.3vw;
    margin-top: 0.5rem;
    white-space: nowrap;
    /* background:blue; */
}
/*-----------------------------
header_nav
-----------------------------*/

.nav_list {
    height: 70px;
    display: flex;
    justify-content:right;
    align-items: center;
    /* background: green; */
}
.nav_list li {
    margin-right: 20px;
    white-space: nowrap;
    /* background: gray; */
}
.nav_list li a:visited {
    color: #454444;
}
.nav_list li a:hover {
    color: #d3503f;
}

/*-----------------------------
kv
-----------------------------*/

.kv {
    width:100%;
    margin: 0 auto;
    height: 600px;
    background-image: url(../img/hero.jpg);
    background-position: center;
    background-size:cover;
    margin-bottom: 80px;

    display: flex;
    justify-content: center; 
    align-items: center; 
}
.kv h2 {
    font-size: 2.8vw;
    font-family: 'Noto Serif JP', serif;
    font-weight: 500;
    color: white;
    letter-spacing: 0.2rem;
    text-shadow: #202020 2px 2px 5px;
    padding: 5px 20px;
    background-color: rgba(0, 0, 0, 0.5);
}

/*-----------------------------
事業内容
-----------------------------*/

.sec_work {
    background-image: url(../img/work_bg.jpg);
    background-position: center;
    background-size: cover;
    color: white;
    /* background: green; */
}
.sec_wrapper_title {
    margin-bottom: 30px;
    font-size: 3rem;
    text-align: center;
    color: white;
    letter-spacing: 1.3;
    /* background-color: blue; */
}
.sec_wrapper_text {
    font-size: 1.7rem;
    margin-bottom: 30px;
    line-height: 2;
    letter-spacing: 1.3;
}
.sec_wrapper_photo{
    display: flex;
    justify-content:space-between;
}
.sec_wrapper_photo div {
    margin-right: 20px;
}
.sec_wrapper_photo div:last-child{
    margin-right:0;
  }


/*-----------------------------
ごあいさつ
-----------------------------*/

.sec_aisatsu{
    width: 80%;
    margin: 0 auto;
}

/*-----------------------------
会社概要
-----------------------------*/
.sec_company {
    background-image: url(../img/company_bg.jpg);
    background-size: cover;
}
.table01 {
    width: 80%;
    line-height: 1.3;
    letter-spacing: 0.3rem;
    margin:0 auto;
}
.table01 tr {
    border-bottom: 1px solid #454444;
  }
.table01 th,
.table01 td {
    padding: 10px;
    border: none;
  }
.table01 th {
    width: 40%;
  }


/*-----------------------------
お問合せ
-----------------------------*/

.tel_small{
    font-size: 4vmin;
}
.sec_contact_tel {
    text-align: center;
    font-size: 7vmin;
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 700;
}
.sec_contact_reception {
    text-align: center;
    font-size: 4vmin;
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 700;
}


/*-----------------------------
フッター
-----------------------------*/

/* footer */
.footer {
    width:100%;
    background-color:#0092E5;
    color: whitesmoke;
    padding: 30px 30px;
    box-sizing: border-box;
}

.footer_wrapper {
    display: flex;
    justify-content: space-between;
    letter-spacing: 0.3rem;
}

.footer_wrapper_info {
    width: 50%;
    /* padding-top: 23%; */
}

.footer_wrapper_info_logo {
    display: flex;
    margin-bottom: 20px;
    align-items: center;
}

.footer_wrapper_info_logo img {
    width: 40px;
    height: auto;
    margin-right: 20px;
}
.footer_company {
    font-weight: 700;
    font-size: 2.5rem;
}
.footer_wrapper_map {
    width: 50%;
    position: relative;
  }


.tel_small {
}

small{
    letter-spacing: 0.3rem;
    color: whitesmoke;
    font-size: 1.2rem;
    background-color: #202020;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 50px;
    padding: 10px;

}
.br-sp {
    display: none;
}
/*  750px以上は非表示  */

/*-----------------------------
メディアクエリ
750px以下
-----------------------------*/

@media screen and (max-width: 750px) {
    
    .section_work {
        background-image: url(../img/hero.jpg);
    }
    .section {
        padding: 20px;
        margin-bottom: 80px;
    }
    .sec_wrapper {
        width: 95%;
    }

    .header {
        height: auto;
        display: flex;
        flex-direction:column;
        box-sizing: border-box;
        /* background: lightgreen; */
    }
    .header_logo {
        margin: 0 auto;
        width: 80%;
        /* background: #d3503f; */
    }
    .header_logo p {/* 軽貨物運送事業・第一種貨物利用運送 */
        font-size: 2vw;
        text-align: center;
     }

    .header_logo img {
        width: 80%;
        text-align: center;
     }
     .header_logo h1 {
        /* width: 500px; */
        /* height: auto; */
        /* background: black; */
        margin-top: 10px;
        /* margin-right: 20px; */
        text-align: center;
    }

    .company_name {
        height: auto;
        display: flex;
        flex-direction: column;
        /* background: yellow; */
    }/* 有限会社オンディーヌ企画 */

    .header_nav {
        width:100%;
        margin-top: 20px;
    }
    
    .nav_list {
        height: auto;
        justify-content:center;
    }
    .nav_list li {
        margin-right: 20px;
    }
    .nav_item a {
        font-size: 3vw;
    }
    .company_name > p {
        font-size:1.5rem ;
    }
    .kv{
    }
    .kv {
        height: 300px;
        padding-top: 70px;
        margin-bottom: 40px;
        align-items: flex-start;
        justify-content: flex-end;
    }
    .kv h2 {
        margin: 0 20px;
        font-size: 5vw;
        text-align: right;
        letter-spacing: 0em;
        padding: 10px 10px 10px 30px;
    }
    .sec_wrapper_photo {
        display: flex;
        flex-direction: column;
        gap: 10px 0;
    }
    .sec_wrapper_photo div {
        margin: 0px;
    }
    .sec_aisatsu {
        width: 100%;
    }
    .table {
        width:100%;
        padding: 0;
        margin: 0;
    }
    .table01 th,
    .table01 td {
        letter-spacing: 0.1em;
        padding: 10px 3px;
        font-size: 1.3rem;
      }
    .footer_wrapper {
        display: flex;
        flex-flow: column;
    }
    .footer_wrapper_info {
        width: 100%;
        margin-bottom: 30px;
    }
    .footer_wrapper_info_logo {
          display: flex;
          margin-bottom: 20px;
          align-items: center;
    }
    .footer_wrapper_info_logo img {
        width: 30px;
        height: auto;
        margin-right: 10px;
        vertical-align: bottom;
    }
    .footer_wrapper_info > p {
        letter-spacing: 0.1em;
        font-size: 1.3rem;
    }
    .footer_wrapper_info_logo > p {

        letter-spacing: 0.1em;
        font-size: 2.2rem;
        letter-spacing: 0em;
        white-space: nowrap;
    }
    .footer_wrapper_map {
        width: 100%;
        height: 400px;
    }
    .br-sp {
        display: block;
    }/*  750px以上で表示  */

}