@charset "UTF-8";

/* ===================== 
common 共通設定
======================*/
html {
    font-size: 62.5%;
}

body {
    font-family: 
        "Noto Sans JP",
        /* "Anton", */
        sans-serif;
    font-style: normal;
    font-weight: 500;
    color: #303030;
    background-color: #EEEEEE;
    line-height: 1.6;
}

img { /*画像の拡大縮小*/
    max-width: 100%;
    height: auto;
}

/* 各セクションヘッダー */
.sectionHeader__subCatch {
    text-align: center;
}

.subCatch {
    color: #FEFEFE;
    font-size: 2.4rem;
    font-weight: 700;
    line-height: 1.5; 
    transform: skewX(-16deg);
    display: inline-block;
    /* position: relative; */
    z-index: 0;
    margin-top: 80px;
}
/* ライン */
/* .subCatch::before {
    position: absolute;
    content: '';
    width: 107%;
    height: 100%;
    background: linear-gradient(transparent 80%, #EDCC10 60%);
    z-index: -1;
    transform: skew(-30deg, 0deg);
    filter: drop-shadow(0 4px 4px rgba(0, 0, 0, 0.25));
} */

/* ラインアニメーション前 */
.js-marker {
    display: inline;
    position: relative;
    /* padding: 0 0 0 9px; */
    /* background-image: linear-gradient(transparent 80%, #EDCC10 60%);
    background-repeat: no-repeat;
    background-position: bottom left;
    background-size: 0 90%;
    transition: all 0.7s ease-in-out; */
}

.js-marker::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 0;
    height: 20%;
    background-color: #EDCC10;
    transition: skewX(-10deg);
    transition: width 0.7s ease-in-out;
    z-index: -1;
}

/* アニメーション発動時 */
.js-marker.inview::after {
    /* background-size: 100% 90%; */
    width: 100%;
}

.js-marker--space {
    letter-spacing: -1px;
}

.js-marker,
.subcatchNewline--blue,
.subcatchNewline--white {
    will-change: transform, opacity;
}

.js-marker--pc {
    display: none;
}

@media screen and (min-width: 769px) {
    .js-marker--pc {
        display: inline-block;
    }
    .js-marker--sp,
    .spBr {
        display: none;
    }
}


.sectionHeader__title {
    color:  #FEFEFE;
    display: inline-block;
    text-align: left;
    font-size: 3.2rem;
    font-weight: 900;
    line-height: 1.2;
    margin-top: 15px;
}

.sectionHeader__txt {
    width: auto;
    margin: 0 auto;
    text-align: left;
    /* width: 100%; */
    color: var(--sub-2-font, #FEFEFE);
    font-size: 1.6rem;
    margin-top: 36px;
    display: inline-block;
}

.sectionHeader {
    padding: 0 4.2% 49px;
    background-color: var(--Main, #006);
    text-align: center;
}

.subcatchNewline--blue {
    display: inline-block;
    text-align: left;
    color: var(--Main, #006);
    font-size: 2.4rem;
    font-weight: 700;
    line-height: 1.5;
    transform: skewX(-16deg);
    margin-top: 80px;
}

.subcatchNewline--white {
    display: inline-block;
    text-align: left;
    color: var(--Main, #EEE);
    font-size: 2.4rem;
    font-weight: 700;
    line-height: 1.5;
    transform: skewX(-16deg);
    margin-top: 80px;
}

/* .subcatchNewline {
    position: relative;
    display: inline-block;
} */

/* 2行文章用ライン */
/* .subcatchNewline::before {
    content: '';
    position: absolute;
    left: -6px;
    bottom: 0;
    width: 107%;
    height: 0.3em; 
    background-color: #EDCC10;
    z-index: -1;
    transform: skew(-30deg);
    filter: drop-shadow(0 4px 4px rgba(0, 0, 0, 0.25));
} */

.sectionHeader__title--blue {
    color: #006;
}

.sectionHeader__txt--blue {
    color: #006;
}

.sectionHeader--white {
    background-color: #EEE;
}

.subCatch--blue {
    color: #006;
}

/* pc 共通項目 */
@media screen and (min-width:769px) {
.spBr {
    display: none;
}   
}

/* pc 各セクションヘッター */
@media screen and (min-width:769px){
.sectionHeader {
    padding: 0 9.7% 55px;
}

.subCatch {
    font-size: 3.6rem;
    margin-top: 120px;
}

.sectionHeader__title {
    font-size: 4.2rem;
    line-height: 1.5;
    margin-top: 35px;
}

.sectionHeader__txt {
    margin-top: 54px;
}

/* .subcatchNewline::before {
    display: none;
} */

/* .subcatchNewline--blue::before,
.subcatchNewline--white::before {
    position: absolute;
    content: '';
    width: 107%;
    height: 100%;
    background: linear-gradient(transparent 80%, #EDCC10 60%);
    z-index: -1;
    transform: skew(-30deg, 0deg);ラインの傾斜角度
    filter: drop-shadow(0 4px 4px rgba(0, 0, 0, 0.25));ラインの影
} */

.subcatchNewline--blue,
.subcatchNewline--white {
    font-size: 3.6rem;
    margin-top: 120px;
}
}
/* pc 769px */

/* ===================== 
header
======================*/
.header {
    position: fixed;
    width: 100%;
    height: 70px;
    display: flex;
    align-items: center;
    background-color: #F5F5F5;
    padding: 23px 1.1% 23px;
    box-sizing: border-box;
    box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.2);
    z-index: 5;
}

.header__topic img {
    width: 61px;
    height: 24px;
    margin-right: 3px;
    vertical-align: -5px;
}

.header__topic {
    color: var(--Main, #006);
    font-size: 1.6rem;
    font-weight: 900;
    line-height: 1.5
}

.header__applyBtn {
    display: none; /*spは非表示*/
}

/* nav */
/* menu style */
.nav {
    position: fixed;
    top:0;
    right: -100%; /*初期表示画面外*/
    width: 90%;
    height: 100vh;
    overflow: auto;
    background-color: #F5F5F5;
    transition: right 0.4s ease;
    padding: 0 19.2% 0 8.8%;
    box-sizing: border-box;
    z-index: 10;
}

/* menu open */
.nav.open {
    right: 0;
    min-height: 640px;
}

/* 背景を暗くする */
.overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.5);
    opacity: 0;
    visibility: hidden;
    transition: 0.3s ease;
    z-index: 6;
}

.overlay.open {
    opacity: 1;
    visibility: visible;
}

/* スクロール制御 */
body.fixed {
    overflow: hidden;
}

/* btn style */
.toggle_btn {
    position: fixed;
    top: 0;
    right: 0;
    width: 70px;
    height: 71px;
    background-color: #006;
    cursor: pointer;
    z-index: 20;
    padding: 35px 16px;
    box-sizing: border-box;
    
}

.toggle_btn span {
    display: block;
    height: 3px;
    width: 40px;
    background-color: #F5F5F5;
    margin: 5px 0;
    transition: 0.4s;
}

/* btn text */
.toggle_btn::before {
    content: 'Menu';
    color: transparent;
    font-family: "Anton", "Noto Sans JP", sans-serif;
    font-size: 1.6rem;
    font-weight: 400;
    line-height: 1.8;
    position: absolute;
    top: 6px;
    right: 17px;
    will-change: contents, color, transform;
    /* transform: skewX(-10deg); */
}

/* 表示する */
body.loaded .toggle_btn::before {
    color: var(--Accent, #EDCC10);
}

.toggle_btn.active::before {
    content: 'Close';
}

/* close style */
.toggle_btn.active span:nth-child(1) {
    transform: rotate(45deg) translate(5px,5px);
}

.toggle_btn.active span:nth-child(2) {
    opacity: 0;
}

.toggle_btn.active span:nth-child(3) {
    transform: rotate(-45deg) translate(6px,-6px);
}

.nav__menu {
    list-style-type: none;
    padding: 0;
    margin-top: 70px;
}

.nav__item {
    font-size: 1.6rem;
    font-weight: 500;
    line-height: 1.8;
    padding: 16px 0;
    border-bottom: 1px solid #006;
}

.nav__btn {
    list-style-type: none;
    padding: 0;
    margin-top: 24px;
}

.nav__menuBtn {
    display: block;
    color: var(--Main, #006);
    text-align: center;
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1.8;
    border-radius: 6px;
    background-color: var(--Accent, #EDCC10);
    padding: 11px 0 11px;
    transition: 0.4s;
    position: relative;
    margin-top: 16px;
    max-width: 234px;
}

.nav__menuBtn:hover {
    opacity: 0.6;
}

.nav__menuBtn--question {
    background-color: #EEE;
    border: 2px solid var(--Main, #006);
    /* position: relative; */
}

.nav__menuBtn--apply {
    color: #F5F5F5;
    background-color: #006;
    text-align: center;
}

.nav__menuBtn::after {
    display: block;
    content: '';
    width: 9px;
    height: 12px;
    background-image: url(../images/btn_arrow_menu_blue.svg);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    position: absolute;
    top: 52%;
    right: 17px;
    transform: translateY(-50%);
    pointer-events: none;
}

.nav__menuBtn--question::before {
    display: block;
    content: '';
    width: 18px;
    height: 24px;
    background-image: url(../images/btn_arrow_menu_question.svg);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    position: absolute;
    top: 52%;
    left: 34px;
    transform: translateY(-50%);
    pointer-events: none;
}

.nav__menuBtn--apply::after {
    background-image: url(../images/btn_arrow_menu_white.svg);
}

.nav__menuBtn a,
.nav__menuBtn--question a,
.nav__menuBtn--apply a {
    display: block;
}

.container {
    overflow: hidden;
}

/* header pc */
@media screen and (min-width:769px) {
.header {
    padding: 0;
    height: 82px;
}

.header__content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    height: 82px;
    width: 100%;
}

.header__topic img {
    width: 122px;
    height: 48px;
    margin-right: 12px;
    vertical-align: -11px;
}

.header__topic {
    display: flex;
    align-items: center;
    text-decoration: none;
    font-size: 3.2rem;
    width: fit-content;
}

.header__chandeTxt {
    font-size: 2.8rem;
}

/* menu btn */
.toggle_btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    width: 180px;
    height: 82px;
    padding: 20px 32px;
}

.toggle_btn::before {
    font-size: 2.4rem;
    position: static;
}

.toggle_btn span {
    display: block;
    height: 6px;
    width: 50px;
    background-color: #F5F5F5;
    margin: 5px 0;
    transition: 0.4s;
}

/* span3本を縦にまとめるためのラッパ */
.toggle_btn span:nth-child(1),
.toggle_btn span:nth-child(2),
.toggle_btn span:nth-child(3) {
    display: block;
}

.toggle_btn-inner {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* close style */
.toggle_btn.active span:nth-child(1) {
    transform: rotate(45deg) translate(10px,13px);
}

.toggle_btn.active span:nth-child(3) {
    transform: rotate(-45deg) translate(10px,-13px);
}

/* nav pc */
.nav {
    padding: 0 12.7% 56px 5.6%;
    height: 75%;
    width: 80%;
}

.nav__list {
    max-width: 1800px;
}

.nav__menu {
    margin-top: 8%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px 40px;
}

.nav__item {
    font-weight: 500;
    line-height: 1.5;
    padding: 12px 0;
    border-bottom: 2px solid #006;
}
}
/* pc 769px */

/* メニュー内ボタン */
@media screen and (min-width:861px) {
.nav__btn {
    margin-top: 24px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px 12px;
    max-width: 660px;
}

.nav__menuBtn {
    font-size: 2rem;
    border-radius: 12px;
    padding: 23px 0;
    max-width: 300px;
}

.nav__menuBtn--question {
    border: 4px solid var(--Main, #006);
    padding: 18px 0;
}

.nav__menuBtn::after {
    width: 18px;
    height: 23px;
}

.nav__menuBtn--question::before {
    width: 24px;
    height: 33px;
}

.nav__menuBtn--apply {
    /* display: flex;
    align-items: center;
    justify-content: center; */
    padding: 22px 0;
}
}
/* pc 869px */

/* 応募ボタン */
@media screen and (min-width:1060px) {
.header__applyBtn-wrap {
    width: 100%;
    height: 82px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    position: fixed;
    z-index: 9;
    }

.header__applyBtn {
    display: block;
    color: var(--Main, #006);
    font-family: "Noto Sans JP";
    font-size: 2.4rem;
    font-weight: 900;
    line-height: 1.8;
    border-radius: 8px;
    background-color: var(--Accent, #EDCC10);
    padding: 9px 52px 10px 32px;
    transition: 0.4s;
    position: relative;
    max-width: 400px;
    margin-right: 188px;
    z-index: 9;
}

.header__applyBtn:hover {
    opacity: 0.6;
}


.header__applyBtn::after {
    position: absolute;
    display: block;
    content: '';
    width: 19px;
    height: 24px;
    background-image: url(../images/btn_arrow_header.svg);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    top: 52%;
    right: 17px;
    transform: translateY(-50%);
}    
}
/* pc 1207px */


/* ===================== 
main
======================*/

/* article__header */
.mainImg {
    position: relative;
}

.mainImg__sp {
    width: 100%;
    height: auto;
}

.mainImg .mainImg__pc {
    display: none;
}

/* フェードインアニメ */

.fadeLeft {
    animation-name: fadeLeftAnime;
    animation-duration: 1.6s;
    animation-fill-mode: forwards;
    opacity: 0;
}
@keyframes fadeLeftAnime {
    from {
        opacity: 0;
        transform: translateX(-100px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}
/* animation */

.mainImg__catchCopy {
    color:#F5F5F5;
    text-shadow: 4px 4px 4px rgba(0, 0, 0, 0.28);
    font-size: clamp(4.8rem, 12.8vw, 8rem);
    font-weight: 900;
    line-height: 1.1;
    width: 92.2%;
    background-color: rgba(0, 0, 55, 0.50);
    padding: 8px 0 8px 4.2%;
    position: absolute;
    bottom: 35px;
}

.mainImg__catchCopy .mainImg__changeTxt {
    font-size: clamp(3rem, 10vw, 6rem);
}

.mainImg__changetxtSpace {
    letter-spacing: -12px;
}

/* about */
.section--about {
    padding: 0 4.2%;
}

.mainTopics {
    text-align: center;
}

.mainTopics__txt {
    color: var(--Font, #303030);
    font-size: 1.6rem;
    line-height: 1.8;
    margin-top: 58px;
    text-align: left;
    display: inline-block;
}

.mainTopics__changecolor {
    color: #006;
}

/* slid-1 */
@keyframes slider01 {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(-100%);
    }
}

.slidShow01 {
    display: flex;
    overflow: hidden;
    margin-top: 58px;
}

.slider01 {
    display: flex;
    list-style: none;
    padding: 0;
}

.slider01--left {
    animation: slider01 50s infinite linear 0.5s both;
}

.slider01__item {
    width: 359px;
    height: 260px;
    margin-right: 32px;
}

/* pc main */
@media screen and (min-width:769px) {
.mainImg .mainImg__sp {
    display: none;
}

.mainImg .mainImg__pc {
    display: block;
    width: 100%;
    height: auto;
    margin-top: 82px;
}

.mainImg__catchCopy {
    font-size: 5.56vw;
    width: 46%;
    padding: 24px 0.7% 24px 2.7%;
    bottom: 0;
    white-space: nowrap;
}

.mainImg__catchCopy .mainImg__changeTxt {
    font-size: 5.1vw;
}

.mainImg__changetxtSpace {
    letter-spacing: -24px;
}

/* about */
.section--about {
    padding: 0 15.6%;
}

.mainTopics__txt {
    font-size: 2rem;
    line-height: 2;
    margin-top: 100px;
    font-weight: 700;
    text-align: left
}

.mainTopics__changecolor {
    display: block;
    text-align: center;
    margin-top: 1em;
}


/* slid-1 */
.slidShow01 {
    margin-top: 100px;
}

.slider01__item {
    width: 472px;
    height: 341px;
    margin-right: 56px;
}
}
/* pc 769px */

/* 三喜運輸の取得認証 */
.sectionHeader--authentication {
    margin-top: 50px;
}

.sectionHeader__title--authentication {
    display: block;
    width: fit-content;
    margin: 15px auto 0;
}

.authenticationTopic {
    padding: 24px 4.2% 80px 4.2%;
    background-image: url(../images/authentication_back_sp.jpg);
    background-size: cover;
    background-repeat: no-repeat;
}

.authenticationTopic__item {
    margin-top: 24px;
}

.authenticationTopic__item:first-child {
    margin-top: 0;
}

/* フェードインアニメ */
.authenticationTopic__type,
.works__item,
.interviewModal__InitialDisplay,
.schedule,
.support__accordion,
.numericalData__content,
.numericalData__topic02-percentage,
.numericalData__topic02-base,
.numericalData__topic03All,
.process__item {
    opacity: 0;
}

.fadeUp {
    animation-name: fadeUpAnime;
    animation-duration: 0.7s;
    animation-fill-mode: forwards;
    opacity: 0;
}

@keyframes fadeUpAnime {
    from {
        opacity: 0;
        transform: translateY(70px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.delay-time02 {
    animation-delay: 0.15s;
}

.delay-time03 {
    animation-delay: 0.3s;
}

.delay-time04 {
    animation-delay: 0.45s;
}
/* anime */


.authenticationTopic__type {
    display: flex;
    align-items: center;
    max-width: 500px;
    /* background-color: blue; */
    margin: 0 auto;
}

.authenticationImg {
     width: 48%;
     /* opacity: .75; */
}

.authenticationName {
    color: var(--Main, #006);
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1.8;
    margin-left: 20px;
}

.authenticationTopic__txt {
    color: var(--Main, #006);
    font-size: 1.6rem;
    max-width: 500px;
    margin: 20px auto 0;
}

/* pc 三喜運輸の取得認証 */
@media screen and (min-width:769px) {
.sectionHeader--authentication {
    margin-top: 100px;
}

.sectionHeader__title--authentication {
    margin: 35px auto 0;
}

.authenticationTopic {
    padding: 42px 9.7% 120px;
    background-image: url(../images/authentication_back_pc.jpg);
}

.authenticationTopic__list {
    display: flex;
    justify-content: center;
    padding: 0;
    margin: 0 auto;
}

.authenticationTopic__item {
    margin-top: 0;
    text-align: center;
}

.authenticationTopic__type {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.authenticationImg {
     width: 95%;
}

.authenticationName {
    font-size: 2rem;
    font-weight: 900;
    margin-left: 0;
    margin-top: 8px;
    padding: 0 12px;
    text-align: left;
    display: inline-block;
}

.authenticationTopic__txt {
    font-size: 1.6rem;
    max-width: 848px;
    margin: 42px auto 0;
}
}
/* pc 769px */


/* 三喜運輸の仕事 */
.sectionHeader--whiteWorks {
    padding: 0 4.2%;
}

.sectionHeader__title--works {
    display: block;
    width: fit-content;
    margin: 15px auto 0;
}

.pcBr {
    display: none;
}

.works__list {
    padding: 0 4.2%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 32px;
    margin: 0 auto;
    list-style: none;
}

.works__item {
    max-width: 600px;
    /* margin: 32px auto 0; */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
}

.worksName {
    display: inline-block;
    color:  #006;
    font-size: 2.4rem;
    line-height: 1;
    font-weight: 700;
    transform: skewX(-10deg);
    text-shadow: 
    2px  2px 1px #f5f5f5,
    -2px  2px 1px #f5f5f5,
     2px -2px 1px #f5f5f5,
    -2px -2px 1px #f5f5f5,
     2px  0px 1px #f5f5f5,
     0px  2px 1px #f5f5f5,
    -2px  0px 1px #f5f5f5,
     0px -2px 1px #f5f5f5;  
    border-bottom: 4px solid #F5F5F5;   
    width: 92%;  
    position: absolute;
    top: 20px;
    left: 16px;
    z-index: 1;
}

.works__item:first-child {
    margin-top: 30px;
}

.worksImg {
    width: 100%;
    height: auto;
    display: block;
}

.works__imgWrap {
    position: relative;
    width: 100%;
}

.worksDescription {
    color: #F5F5F5;
    font-size: 1.6rem;
    background-color: rgba(0,0,102,0.7);
    padding: 23px 2.1% 23px 2.1%;
    position: absolute;
    bottom: 0;
    width: 100%;
    box-sizing: border-box;
    min-height: 150px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.worksDescription--work2 {
    display: flex;
    align-items: center;
}


/* pc 三喜運輸の仕事 */
@media screen and (min-width:769px) {
.sectionHeader--whiteWorks {
    padding: 0 9.7% 55px;
}

.sectionHeader__title--works {
    margin: 35px auto 0;
}    

.pcBr {
    display: block;
}

.works__backImg {
    display: block;
    background-image: url(../images/works_back_pc.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 50% -29px;
    max-width: 1930px;
    margin: 0 auto;
}

.works__list {
    flex-direction: row;
    justify-content: center;
    padding: 0 60px 100px;
    gap: 20px;
    max-width: 1280px;
}

.works__item {
    margin: 0;
    /* width: 32%; */
}

.works__item:first-child {
    margin-top: 0;
}

.worksName {
    font-size: 3.2rem;
    line-height: 1;
    top: 16px;
    left: 16px;
}

.worksDescription {
    padding: 23px 4.2% 22px 4.2%;
    width: 100%;
}
}
/* px 769px */


/* 働く先輩社員の声 */
.sectionHeader__title--interview {
    display: block;
    width: fit-content;
    margin: 15px auto 0; 
}

/* モーダル初期表示 */
.interviewModal {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 32px;
    margin: 0 auto;
    list-style: none;
}


.interviewModal__topic {
    max-width: 600px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
}

.interviewModal__topic:first-child {
    margin-top: 0;
}

.interviewModal__InitialDisplay {
    max-width: 706px;
    background-image: linear-gradient(0deg, transparent calc(100% - 1px), #EEEE calc(100% - 1px)),
    linear-gradient(90deg, transparent calc(100% - 1px), #EEEE calc(100% - 1px));
    background-size: 16px 16px;
    background-repeat: repeat;
    background-position: center center;
    background-color: #FFFFFF;
    margin: 0 auto;
    padding: 0 0 32px;
}

.interviewModal__mainImg {
    position: relative;
}

.interviewModal__img {
    display: block;
    width: 88%;
    margin: 0 auto;
}

.interviewModal__workName {
    position: absolute;
    bottom: 8px;
    right: 8.1%;
    color:  #006;
    font-size: 1.6rem;
    font-weight: 900;
    line-height: 1.8;
    background-color: rgba(245, 245, 245, 0.80);
    padding: 0 8px;
}

.interviewModal__subcatch {
    color: #006;
    font-size: 2rem;
    font-weight: 900;
    line-height: 1.8;
    /* width: 287px; */
    width: 79%;
    margin: 11px auto 0;
    transform: skewX(-10deg);
    text-decoration-line: underline;
    text-decoration-style: solid;
    text-decoration-skip-ink: auto;
    text-decoration-color: #EDCC10;
    text-decoration-thickness: 10%; /* 2px */
    text-underline-offset: 20%; /* 4px */
    text-underline-position: from-font;  
}

.interviewModal__subcatch--top {
    margin-left: 11.6%;
}

.interviewModal__openBtn {
    color:  #EDCC10;
    font-family: Anton;
    font-size: 1.6rem;
    font-weight: 400;
    line-height: 1.8;
    background-color: #006;
    border-radius: 4px;
    padding: 4px 6.4%;
    text-align: center;
    width: 47%;
    margin: 25px auto 0;
    cursor: pointer;
}

.interviewModal__openBtn:hover {
    opacity: 0.6;
}

/* モーダル中身 */
.interviewModal__container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: flex-start; 
    justify-content: center; 
    background-color: rgba(0, 0, 0, 0.5);
    overflow-y: auto; /*スクロール用*/
    padding-top: 5vh;
    padding-bottom: 5vh;
    opacity: 0;
    visibility: hidden;
    transition: 0.4s;
    box-sizing: border-box;
    z-index: 9999; 
}

/* アクティブクラス付与時 */
.interviewModal__container.activemodal {
    opacity: 1;
    visibility: visible;
}

/* モーダル表示時にメニューボタン非表示 */
/* .toggle_btn.activemodal {
    visibility: hidden;
} */

.interviewModal__body {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    max-width: 500px;
    width: 90%;
}

.interviewModal__closeBtn {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    top: 0;
    right: 0px;
    width: 40px;
    height: 40px;
    font-size: 40px;
    color: #006;
    background-color: #EDCC10;
    cursor: pointer;
}

.interviewModal__content {
    background-image: linear-gradient(0deg, transparent calc(100% - 1px), #EEEE calc(100% - 1px)),
    linear-gradient(90deg, transparent calc(100% - 1px), #EEEE calc(100% - 1px));
    background-size: 16px 16px;
    background-repeat: repeat;
    background-position: center center;
    background-color: #FFFFFF;
    text-align: left;
    padding: 0 4.2% 44px;
}

.interviewModal__openImg {
    width: 97%;
    margin-top: 10px;
}

.interviewModal__interviewTopic {
    margin: 28px auto 0;
    width: 94%;
}

.interviewTopic__QA {
    margin-top: 16px;
}

.interviewTopic__question {
    color: #002A83;
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.5;
}

.interviewTopic__answer {
    color: #303030;
    font-size: 1.6rem;
    margin-top: 0.5em;
}


/* pc 働く先輩社員の声 */
@media screen and (min-width:769px) {
.sectionHeader--white {
    padding: 0 9.7% 55px;
}

.sectionHeader__title--interview {
    margin: 35px auto 0;
}

/* モーダル初期表示 */
.interviewModal {
    flex-direction: row;
    justify-content: center;
    padding: 0 60px 100px;
    max-width: 1280px;
    margin: 0 auto;
    gap: 20px;
}

.interviewModal__topic {
    margin: 0;
    box-sizing: border-box;
}

.interviewModal__InitialDisplay {
    background-size: 24px 24px;
}

/* モーダル中身 */
.interviewModal__body {
    max-width: 1280px;
    width: 95%;
}

.interviewModal__content {
    display: flex;
    background-size: 24px 24px;
    text-align: left;
    padding: 0 1.8% 44px;
    gap: 24px;
}

.interviewModal__openImg {
    max-width: 463px;
    width: 45%;
    height: fit-content;
}

.interviewModal__interviewTopic {
    margin: 36px auto 0;
    width: 94%;
}
}
/* pc 769px */



/* 業務スケジュール */
.sectionHeader__title--schedule {
    display: block;
    width: fit-content;
    margin: 15px auto 0;
}

.schedule {
    padding-bottom: 80px;
}

.schedule__imgTop {
    text-align: center;
}

.schedule__img {
    margin: 0 auto;
    display: inline-block;
}

.schedule__content {
    position: relative;
}

.schedule__content::before {
    content: '';
    position: absolute;
    background-color: #006;
    top: 0;
    left: 11.5em;
    /* left: 184px; */
    width: 6px;
    height: 100%;
}

.schedule__list {
    padding: 0;
    margin: 0;
    list-style: none;
    max-width: 669px;
}

.schedule__item {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    margin-top: 42px;
}

.schedule__item:first-child {
    margin-top: 60px;
}

.schedule__item::after {
    position: absolute;
    content: '';
    top: 50%;
    left: 11.7em;
    /* left: 187px; */
    transform: translate(-50%,-50%);
    width: 20px;
    height: 20px;
    border: 2px solid #EDCC10;
    background-color: #006;
}

.schedule__time {
    font-family: Anton;
    font-size: 2rem;
    font-weight: 400;
    line-height: 1.8;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    width: 4em;
    height: 2em;
    margin-left: 4.2%;
    margin-right: 1em;
    /* border-radius: 6px; */
    background-color: #006;
    color: #F5F5F5;
    text-align: center;
}

.schedule__time::before {
    content: "";
    position: absolute;
    right: 0;
    top: 50%;
    width: 0.5em;
    height: 0.5em;
    z-index: -1;
    background-color: #006;
    transform: translateX(50%) translateY(-50%) rotate(45deg);
}

.scheduleTitle {
    color: var(--Sub4, #002A83);
    font-size: 2rem;
    font-weight: 900;
    line-height: 1.8;
}

.schedule__topic {
    margin: 0 0 0 5em;
    width: calc(100% - 10em);
}

.scheduleTxt {
    color:#303030;
    font-size: 1.6rem;
    padding-right: 4.2%;
}

/* pc 業務スケジュール */
@media screen and (min-width:769px) {
.sectionHeader__title--schedule {
    margin: 35px auto 0;
}

.schedule {
    display: flex;
    flex-direction: row-reverse;
    padding: 0 60px 120px;
    max-width: 1280px;
    margin: 0 auto;
}

.schedule__list {
    margin-right: 24px;
    max-width: none;
}

.schedule__item:first-child {
    margin-top: 14px;
}

.scheduleTxt {
    padding-right: 0;
} 
}
/* pc 769px */


/* 入社後のサポート */
.section--support {
    background-color: #006;
    padding-bottom: 80px;
}

.sectionHeader--support {
    /* margin-top: 80px; */
    padding: 0 4.2% 14px;
}

.sectionHeader__title--support {
    display: block;
    width: fit-content;
    margin: 15px auto 0;
}

/* アコーディオン中身初期非表示 */
.support__answer {
    display: none;
}

.support__accordion {
    text-align: center;
    /* background-color: #006; */
}

.support__01,
.support__02,
.support__03 {
    display: block;
}

.support__list {
    padding: 0 4.2%;
    margin: 60px auto 0;
    max-width: 800px;
}

.support__question {
    position: relative;
    text-align: center;
    padding: 0 4.2%;
    background-color: #F5F5F5;
    /* margin-top: 58px; */
    padding-top: 23px;
    margin-top: 65px;
    max-width: 800px;
    /* margin-left: auto;
    margin-right: auto; */
}

.support__title {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%,-50%);
    color:  #006;
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.5;
    text-decoration-line: underline;
    text-decoration-style: solid;
    text-decoration-skip-ink: auto;
    text-decoration-color: #006;
    text-decoration-thickness: 10%; /* 2.4px */
    text-underline-offset: 20%; /* 4.8px */
    text-underline-position: from-font;
    background-color: #EDCC10;
    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.25);
    padding: 16px 4.2%;
    display: inline-block;
    /* margin-top: -32px; */
    width: 85%;
}

.support__questionContent {
    display: flex;
    align-items: center;
    margin: 0 auto;
    margin-top: 28px;
    position: relative;
}

.support__question::before,
.support__question::after {
    position: absolute;
    content: '';
    top: 10%;
    right: 6px;
    bottom: 0;
    width: 14px;
    height: 4px;
    margin: auto;
    background-color: #006;
    transform: translateX(-50%);
}

.support__question::after {
    right: 13px;
    width: 14px;
    transform: rotate(-90deg);
    transition: transform 0.3s;
}
/* クリックしたときに＋から-にする */
.support__question.activeaccordion::after {
    transform:rotate(0deg);
}

.questionIcon {
    width: 76px;
    height: 76px;
    margin-left: 4.2%;
    margin-bottom: 26px;   
}

.questionTxt {
    color: #303030;
    font-size: 1.6rem;
    /* width: 60%; */
    text-align: left;
    padding: 0 6.6% 23px 4.5%; 
}

.questionUnderline {
    text-decoration-line: underline;
    text-decoration-style: solid;
    text-decoration-skip-ink: auto;
    text-decoration-color: #EDCC10;
    text-decoration-thickness: 10%;
    text-underline-offset: 20%;
    text-underline-position: from-font;
}

/* アコーディオン中身 */
.support__answer {
    max-width: 800px;
    background-color: #F5F5F5;
    padding: 0 5% 34px 5%;
    text-align: left;
    overflow: hidden;
}

.answerTxt {
    color: #F5F5F5;
    font-size: 1.6rem;
    background-color: #006;
    padding: 33px 6.1% 33px 6.1%;
}

.support__changecolor {
    color: #EDCC10;
    font-size: 2rem;
    font-weight: 900;
}

.support__imgScroll {
    display: block;
    width: 100%;
    max-width: 100%;
    padding-bottom: 20px;
    margin-top: 30px;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
}

.support__imgScroll::-webkit-scrollbar {
    height: 10px;
}

.support__imgScroll::-webkit-scrollbar-thumb {
    background-color: #006;
}

.support__imgScroll::-webkit-scrollbar-track {
    background-color: #BDBDC0;
}

.supportImg__03 {
    width: 964px;
    max-width: none;
    display: block;
    margin: 0 auto;
    
}

.supportImg__04 {
    margin-top: 30px;
}

.supportImg__05 {
    margin-top: 20px;
}


/* pc 入社後のサポート */
@media screen and (min-width:769px) {
.section--support {
    padding-bottom: 120px;
}

.sectionHeader--support {
    padding: 0 9.7% 55px;
}

/* .subcatchNewline {
    letter-spacing: -2px;
} */

.sectionHeader__title--support {
    margin: 35px auto 0;
}

/* アコーディオン初期表示 */
.support__answer {
    display: none;
}

.support__list {
    padding: 0 60px;
    margin: 50px auto 0;
    max-width:1280px; 
}

.support__question {
    padding: 24px 98px 40px;
    margin-top: 92px;
    max-width: none;
}

.support__question--question01 {
    margin-top: 50px;
}

.support__title {
    font-size: 2.4rem;
    box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
    padding: 24px 1.6%;
    width: 44%;
}

.support__questionContent {
    margin-top: 50px;
}

.questionIcon {
    width: 100px;
    height: 100px;
    margin-left: 0;
    margin-bottom: 26px;   
}

.questionTxt {
    padding: 0 4.5% 23px 4.5%; 
}

/* ボタン */
.support__question::before,
.support__question::after {
    top: 8px;
    right: 40px;
    width: 32px;
    height: 8px;
}

.support__question::after {
    right: 56px;
    width: 32px;
}

/* アコーディオン中身 */
.support__answer {
    max-width: 1280px;
    padding: 0 5% 83px 5%;
}

.support__answerInner {
    display: flex;
    flex-direction: row-reverse;
    max-width: 964px;
    margin: 0 auto;
    justify-content: center;
    align-items: stretch;
}

.answerTxt {
    font-size: 2rem;
    padding: 58px 2.2% 57px;
    max-width: 964px;
    margin: 0 auto;
}

.support__changecolor {
    font-size: 2.4rem;
}

.support__img {
    width: 105%;
}

.support__img--answer02 {
    width: 155%;
}

.supportImg {
    display: flex;
    justify-content: center;
    max-width: 964px;
    margin: 70px auto 0;
    gap: 20px;
}

.supportImg__03 {
    margin: 24px auto 0;
}

.supportImg__04 {
    margin-top: 0;
    width: 50%;
}

.supportImg__05 {
    margin-top: 0;
    width: 50%;
}
}
/* pc 769px */


/* 数字で見る三喜運輸-会社設立～年間休日数 */
.sectionHeader__title--numericalData {
    display: block;
    width: fit-content;
    margin: 15px auto 0;
}

.numericalData__backcolor-blue {
    background-image: linear-gradient(#eeeeee, #000066 57%); 
    background-repeat: no-repeat;
    background-position: center bottom;
    background-size: 100%;
    padding: 20px 4.2%;
}

.numericalData__backcolor-img {
    position: relative;
    width: 100%;
    max-width: 600px;
    height: 515px;
    aspect-ratio: 3 / 2;
    background-image: url(../images/numericalData_back_sp.jpg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    margin: 0 auto;
}

.numericalData__topic01 {
    position: absolute;
    right: 5.2%;
    bottom: 0;
    list-style: none;
    padding: 30px 0 30px 0;
}

.numericalData__topic01-Item {
    text-align: center;
    /* background-image: url(../images/numericalData_01.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain; */
    margin-top: 20px;
    display: block;
    padding: 20px;
    background-color: #F5F5F5;
    box-shadow: 10px 10px 0 0 #006;
    
}

.numericalData__topic01-Item:first-child {
    margin-top: 0;
}

.topic01Item__title {
    color: #002A83;
    font-size: 2rem;
    font-weight: 900;
    line-height: 1.8;
    padding-bottom: 1px;
}

.topic01Item__txt {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 0.3em;
    margin-top: -12px;
}

.topic01Item__txtInner {
    color:  #006;
    font-family: Anton;
    font-size: 4rem;
    font-weight: 400;
    line-height: 1.8;
    transform: skewX(-10deg);
}

/* .numericalData__changetxt {
    letter-spacing: -8px;
} */

.topic01Item__changeTxt {
    color:  #006;
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1.8;
    position: relative;
    bottom: 13px;
}

/* tablet～pc 数字で見る三喜運輸-会社設立～年間休日数  */
@media screen and (min-width:769px) {
.numericalData__backcolor-img {
    max-width: 760px;
    height: 337px;
    width: 100%;
    background-image: url(../images/numericalData_back_pc.png);
    background-position: center;
} 

.numericalData__backcolor-blue {
    padding: 0 60px 40px;
    /* グラデ */
    background-image: linear-gradient(#eeeeee, #000066 57%); 
    background-position: center;
    margin: 0 auto;
}
.numericalData__topic01 {
    display: flex;
    justify-content: center;
    align-items: center;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 0;
    gap: 24px;
    max-width: 1160px;
    width: 80%;
}

.numericalData__topic01-Item {
    width: 280px;
    margin-top: 0;
    padding: 20px;
    box-shadow: 16px 16px 0 0 #006;
    
}

.topic01Item__title {
    font-size: 2.4rem;
    padding-bottom: 1px;
    white-space: nowrap;
}

.topic01Item__txt {
    gap: 0.6em;
    margin-top: -12px;
}

.topic01Item__txtInner {
    font-size: 5.6rem;
}

.topic01Item__changeTxt {
    font-size: 2rem;
    bottom: 18px;
}
}
/* tablet～pc 769px  */


/* pc 数字で見る三喜運輸-会社設立～年間休日数 */
@media screen and (min-width:1001px) {
.sectionHeader__title--numericalData {
    margin: 35px auto 0;
}

.numericalData__backcolor-blue {
    padding: 0 60px 40px;
    /* グラデ */
    background-image: linear-gradient(#eeeeee, #000066 57%); 
    background-position: center;
    margin: 0 auto;
}

.numericalData__backcolor-img {
    max-width: 1160px;
    height: 337px;
    width: 100%;
    background-image: url(../images/numericalData_back_pc.png);
    background-position: center;
}

.numericalData__topic01 {
    display: flex;
    justify-content: center;
    align-items: center;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 0;
    gap: 24px;
    max-width: 1160px;
    width: 80%;
}

.numericalData__topic01-Item {
    width: 280px;
    margin-top: 0;
    padding: 20px;
    box-shadow: 16px 16px 0 0 #006;
}

.topic01Item__title {
    font-size: 2.4rem;
    padding-bottom: 1px;
    white-space: nowrap;
}

.topic01Item__txt {
    gap: 0.6em;
    margin-top: -12px;
}

.topic01Item__txtInner {
    font-size: 5.6rem;
}

.topic01Item__changeTxt {
    font-size: 2rem;
    bottom: 18px;
}
}
/* pc 769px */


/* 数字で見る三喜運輸-業務の割合～拠点数 */
.numericalData__topic02-percentage {
    background-color: #F5F5F5;
    padding-bottom: 23px;
    max-width: 600px;
    margin: 20px auto 0;
}

.topic02-percentageTitle,
.topic02-base__title {
    color: #002A83;
    font-size: 2rem;
    font-weight: 900;
    line-height: 1.8;
    text-align: center;
    padding-top: 11px;
}

.topic02-percentage__content {
    display: flex;
    align-items: center;
    gap: 0 24px;
}

.topic02-percentage__piechart {
    width: 52%;
    /* padding: 0 1% 0 2.1%; */
    padding-left: 2.1%;
}

.percentagedataItem__data--driver {
    display: flex;
    align-items: flex-end;
    gap: 0.3em;
}

.topic02-percentage__innner--driver {
    color: #006;
    font-family: Anton;
    font-size: 4rem;
    font-weight: 400;
    line-height: 1.8;
    transform: skewX(-10deg);
}

.topic02-percentage__changeTxt--driver {
    color: #006;
    font-size: 1.6rem;
    font-weight: 900;
    line-height: 1.8;
    position: relative;
    bottom: 13px;
}

.percentagedataItem__work--driver {
    color: #006;
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1.8;
    margin-top: -18px;
}

.percentagedataItem__data {
    margin-top: 7px;
    display: flex;
    align-items: center;
    gap: 0.3em;
}

.topic02-percentage__innner {
    color:  #303030;
    font-family: Anton;
    font-size: 2.4rem;
    font-weight: 400;
    line-height: 1.8;
    display: inline-block;
    transform: skewX(-10deg);
    margin-left: 5.3%;
}

.topic02-percentage__changeTxt {
    color: #303030;
    font-size: 1.6rem;
    font-weight: 900;
    line-height: 1.8;
    position: relative;
    bottom: -3px;
}

.percentagedataItem__work {
    color:  #303030;
    font-size: 1.6rem;
    line-height: 1.8;
    margin-left: 8%;
    margin-top: -10px;
    white-space: nowrap;
}

.numericalData__topic02-base {
    position: relative;
    background-color: #F5F5F5;
    max-width: 600px;
    margin: 20px auto 0;
    
}

.topic02-base__topic {
    position: absolute;
    left: 11.7%;
    /* bottom: 55px; */
    top: 42px;
    display: flex;
    align-items: center;
    flex-direction: column;
}

.topic02-base__numbber {
    display: flex;
    align-items: flex-end;
    gap: 0.3em;
}

.topic02-base__inner {
    color: #006;
    font-family: Anton;
    font-size: 4rem;
    font-weight: 400;
    line-height: 1.8;
    transform: skewX(-10deg);
}

.topic02-base__changeTxt {
    color: #006;
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1.8;
    position: relative;
    bottom: 13px; 
}

.topic02-base__loctionContent {
    display: flex;flex-direction: column;
    border-top: 2px solid #006;
    padding: 11px;
    margin-top: -11px;
    background-color:rgba(245, 245, 245, 0.7);
}

.topic02-base__location {
    color: #303030;
    text-align: center;
    font-size: 1.6rem;
    font-weight: 700;
    
}

.topic02-base__map {
    padding: 0 7.5% 22px;
}

/* tablet～pc 数字で見る三喜運輸-業務の割合～拠点数 */
@media screen and (min-width:769px) {
.numericalData__topic02 {
    display: block;
    max-width: 1160px;
    margin: 0 auto;
    gap: 0px;
}

.numericalData__topic02-percentage,
.numericalData__topic02-base {
    display: block;
    padding-bottom: 23px;
    max-width: 760px;
    margin: 20px auto 0;
    width: 100%;
}

.topic02-percentageTitle,
.topic02-base__title {
    color: #002A83;
    font-size: 2.4rem;
    font-weight: 900;
    line-height: 1.8;
    text-align: center;
    padding-top: 11px;
}

/* 業務の割合 */
.topic02-percentage__piechart {
    max-width: 320px;
    width: 44%;
    padding: 0 1% 0 7.4%;
}

.percentagedataItem {
    display: flex;
    align-items: center;
    gap: 0.5em;
    margin-top: 0;
    margin-left: 30px;
}

.topic02-percentage__innner--driver {
    font-size: 5.6rem;
}

.topic02-percentage__changeTxt--driver {
    font-size: 2rem;
    bottom: 18px;
}

.percentagedataItem__work--driver {
    font-size: 2rem;
    margin-top: 0;
}

.topic02-percentage__innner {
    font-size: 4rem;
    margin-left: 0;
}

.topic02-percentage__changeTxt {
    font-size: 2rem;
    bottom: -8px;
}

.percentagedataItem__data {
    margin-top: 0;
    gap: 0.4em;
}

.percentagedataItem__work {
    font-size: 2rem;
    margin-left: 7%;
    margin-top: 0;
}

.percentagedataItem__work--work03 {
    margin-left: 9%;
}

/* 拠点数 */
.topic02-base__map {
    padding: 0 27.5% 0;
    margin-left: 36px;
    box-sizing: border-box;
}

.topic02-base__inner {
    font-size: 4.2rem;
}
}
/* tablet～pc 769px */

/* pc 数字で見る三喜運輸-業務の割合～拠点数 */
@media screen and (min-width:1001px) {
.numericalData__topic02 {
    display: flex;
    justify-content: center;
    max-width: 1160px;
    margin: 0 auto;
    gap: 20px;
}

.numericalData__topic02-percentage {
    width: 50%;
    padding: 0 26px 26px;
}

.numericalData__topic02-base {
    width: 50%;
    padding: 0 26px 26px;
}

.topic02-percentageTitle,
.topic02-base__title {
    font-size: 2.4rem;
}

.topic02-percentage__content {
    margin-top: 20px;
    gap: 24px;
}

.topic02-percentage__piechart {
    padding: 0;
    width: 41%;
}

.percentagedataItem {
    display: flex;
    align-items: center;
    gap: 0.5em;
    margin-top: -20px;
    margin-left: 0;
}

.percentagedataItem--work02 {
    margin-top: -6px;
}

.percentagedataItem--work03 {
    margin-top: -4px;
}

.percentagedataItem__data--driver {
    gap: 0.6em;
}

.percentagedataItem__data--worker {
    margin-left: 20px;
}

.percentagedataItem__data--clerk {
    margin-left: 23px;
}

.topic02-percentage__innner--driver {
    font-size: 5.6rem;
}

.topic02-percentage__changeTxt--driver {
    font-size: 2rem;
    bottom: 18px;
}

.percentagedataItem__work--driver {
    font-size: 2rem;
    line-height: 1.5;
    margin-top: 0;
}

.percentagedataItem__data {
    margin-top: 0;
    gap: 0.6em;
}

.topic02-percentage__innner {
    font-size: 3.6rem;
    margin-left: 0;
}

.topic02-percentage__changeTxt {
    bottom: -7px;
}

.percentagedataItem__work {
    margin-top: 0;
    margin-left: 7px;
}

.topic02-base__content {
    display: flex;
    justify-content: flex-end;
    transform: none;
    max-width: 554px;
}

.topic02-base__map {
    padding: 0;
    width: 54%;
    margin-right: 26px;
}

.topic02-base__topic {
    top: 58px;
}

.topic02-base__numbber {
    gap: 0.6em;
}

.topic02-base__inner {
    font-size: 5.6rem;
}

.topic02-base__changeTxt {
    font-size: 2rem;
    font-weight: 900;
    bottom: 20px; 
}

.topic02-base__loctionContent {
    margin-top: -18px;
}

.topic02-base__location {
    font-weight: 500;   
}
}
/* pc 769px */


/* 数字で見る三喜運輸-社員数～賞与月 */
.numericalData__topic03All {
    max-width: 600px;
    margin: 0 auto;
    position: relative;
}

.numericalData__topic03 {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 20px;
    margin: 0 auto;
    padding: 20px 0 80px;
    box-sizing: border-box;
}

.numericalData__topic03-Item {
    background-color: #F5F5F5;
    /* text-align: center; */
    flex-basis: calc((100% - 20px) / 2);
    display: flex;              
    flex-direction: column;     
    align-items: center;        
    box-sizing: border-box;
    height: 186px;
    padding: 7px 2.1% 0;
    position: relative;
}

.topic03-Item__title {
    color: #002A83;
    font-size: 2rem;
    font-weight: 900;
    line-height: 1.8;
}

.topic03-Item__txt {
    display: flex;
    align-items: flex-end;
    gap: 0.3em;
    margin-top: -13px;
}

.topic03Item__inner,
.topic03Item__changeTxt--point {
    display: inline-block;
    color: #006;
    font-family: Anton;
    font-size: 6.4rem;
    font-weight: 400;
    line-height: 1.8;
    transform: skewX(-10deg);
}

.topic03Item__inner--space {
    margin-left: 12px;
}

.topic03Item__changeTxt--point {
    margin: 0 -0.3em;
}

.topic03Item__changeTxt {
    color: #006;
    font-size: 1.6rem;
    font-weight: 900;
    line-height: 1.8;
    position: relative;
    bottom: 24px;
}

.numericalData__topic03-Item--topic {
    display: flex;
    flex-direction: column;
    align-items: center;
    background-image: url(../images/icon_numericalData_04.svg);
    background-repeat: no-repeat;
    background-position: center bottom;
    background-size: 56px; 
    padding: 7px 1.1% 0; 
}

.topic03-Item__list {
    display: flex;
    flex-direction: column;
    align-items: center;
    /* justify-content: center;  */
    gap: 4px;
    /* margin-top: 4px; */
    height: 100%;
}

.topic03-Item__item {
    text-align: left;
}

.topic03-Item__txt--overwork {
    padding: 6px 0 0 0;
    display: flex;
    align-items: center;
    gap: 0 0;
}

.topic03Item__changeTxt--work {
    color:  #303030;
    font-size: 1.4rem;
    font-weight: 700;
    line-height: 1.5;
    flex: 1;
    white-space: nowrap;
    /* min-width: 8em; */
}

.topic03Item__changeTxt--overtime {
    display: inline-block;
    color: #006;
    font-family: Anton;
    font-size: 2.4rem;
    font-weight: 400;
    line-height: 1.8;
    transform: skewX(-10deg);
    margin-left: 0.1em;
    /* vertical-align: -0.15em; */
    text-align: right;
    /* width: 3em; */
}

.topic03Item__changeTxt--hour {
    color:#006;
    font-size: 1.4rem;
    font-weight: 700;
    margin-left: 0.2em;
    flex-shrink: 0;
}

.topic03-Item__subTxt {
    color: #303030;
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1.5;
    position: absolute;
    bottom: 9px;
}

.topic03-Item__subTxt--overwork {
    font-size: 1.4rem;
    line-height: 1.2;
    bottom: 4px;
    padding: 0 2.1%;
}

/* アイコン */
.numericalData__topic03-Item--employees {
    background-image: url(../images/icon_numericalData_01.svg);
    background-repeat: no-repeat;
    background-position: center bottom;
    background-size: 84px;  
}

.numericalData__topic03-Item--averageAge {
    background-image: url(../images/icon_numericalData_02.svg);
    background-repeat: no-repeat;
    background-position: center bottom;
    background-size: 62px;  
}

.numericalData__topic03-Item--yearsofService {
    background-image: url(../images/icon_numericalData_03.svg);
    background-repeat: no-repeat;
    background-position: center bottom;
    background-size: 84px; 
}

.numericalData__topic03-Item--raise {
    background-image: url(../images/icon_numericalData_06.svg);
    background-repeat: no-repeat;
    background-position: center bottom -8px;
    background-size: 74px; 
}

.numericalData__topic03-Item--bonus {
    background-image: url(../images/icon_numericalData_05.svg);
    background-repeat: no-repeat;
    background-position: center bottom;
    background-size: 62px; 
}

.topic03-Item__txt--description {
    position: absolute;
    right: 0;
    bottom: 44px;
    color: #F5F5F5;
    font-size: 1.6rem;
}

/* tablet～pc 数字で見る三喜運輸-社員数～賞与月 */
@media screen and (min-width:769px) {
.numericalData__topic03All {
    max-width: 1160px;
    margin: 0 auto;
    width: 100%;
} 

.numericalData__topic03 {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 20px;
    margin: 0 auto;
    max-width: 760px;
    padding: 20px 0 80px;
    box-sizing: border-box;
    width: 100%;
}

.numericalData__topic03-Item {
  flex-basis: calc((100% - 20px) / 2);
  background-color: #f5f5f5;
  height: 186px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.topic03-Item__title {
    font-size: 2.4rem;
}

.topic03Item__inner, 
.topic03Item__changeTxt--point {
    font-size: 6.8rem;
}

.topic03Item__changeTxt {
    font-size: 1.8rem;
    bottom: 26px;
}

.topic03Item__changeTxt--work {
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1.5;
    flex: 1;
    /* min-width: 8em; */
}

.topic03Item__changeTxt--overtime {
    font-size: 2.8rem;
    line-height: 1.8;
}

.topic03Item__changeTxt--hour {
    margin-left: 0;
    margin-top: 0;
}

.topic03-Item__txt {
    gap: 0.8em;
    margin-top: -16px;
}

.topic03-Item__subTxt {
    bottom: 18px;
}

.topic03-Item__subTxt--overwork {
    bottom: 3px;
}

/* アイコン */
.numericalData__topic03-Item--employees {
    background-size: 80px;  
}

.numericalData__topic03-Item--averageAge {
    background-size: 60px;  
}

.numericalData__topic03-Item--yearsofService {
    background-size: 80px; 
}

.numericalData__topic03-Item--topic {
    background-size: 56px;  
}

.numericalData__topic03-Item--raise {
    background-size: 66px; 
}

.numericalData__topic03-Item--bonus {
    background-size: 64px; 
}

.topic03-Item__txt--description {
    max-width: 760px;
}
}
/* tablet～pc 769px */


/* pc 数字で見る三喜運輸-社員数～賞与月 */
@media screen and (min-width:1001px) {
.numericalData__topic03All {
    max-width: 1160px;
} 

.numericalData__topic03 {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 20px;
    margin: 0 auto;
    max-width: 1160px;
    padding: 20px 0 80px;
    box-sizing: border-box;
    width: 100%;
}

.numericalData__topic03-Item {
    flex-basis: calc((100% - 48px) / 3);
    height: 312px;
    padding: 11px 2.1% 0;
    max-width: 1160px;
}

.topic03-Item__title {
    font-size: 2.4rem;
}

.topic03-Item__txt {
    gap: 0.3em;
    margin-top: -12px;
}

.topic03Item__inner,
.topic03Item__changeTxt--point {
    /* font-size: 12.8rem; */
    font-size: clamp(2.4rem, 8.4vw, 12.8rem);
}

.topic03Item__changeTxt {
    font-size: 2.4rem;
    bottom: 22.8%;
}

.topic03Item__changeTxt--changewords {
    margin-right: 2%;
}

.topic03-Item__list {
    gap: 0;
    margin-top: 0;
}

.topic03-Item__item {
    margin-top: 20px;
}

.topic03-Item__txt--overwork {
    /* padding-top: 36px; */
    margin-top: -42px;
    display: flex;
    align-items: center;
    padding: 0.2em;
}

.topic03Item__changeTxt--work {
    /* font-size: 2rem; */
    font-size: clamp(1.4rem, 1.4vw, 2rem);
    font-weight: 900;
    line-height: 1.8;
}

.topic03Item__changeTxt--overtime {
    /* font-size: 6.4rem; */
    font-size: clamp(2rem, 5.5vw, 6.4rem);
    margin-left: 12px;
}

.topic03Item__changeTxt--hour {
    /* font-size: 2rem; */
    font-size: clamp(2rem, 1.4vw, 6.4rem);
    margin-left: 0.3em;
    position: relative;
    bottom: -16px;
}

.pcBr--overwork {
    display: none;
}

.topic03-Item__subTxt {
    font-size: 2rem;
    font-weight: 900;
    line-height: 1.8;
    bottom: 10.9%;
    padding: 0 8.6%;
}

.topic03-Item__subTxt--overwork {
    font-size: clamp(1.4rem, 1.6vw, 2rem);
    bottom: 3px;
}

/* アイコン */
.numericalData__topic03-Item--employees {
    background-size: 140px;  
}

.numericalData__topic03-Item--averageAge {
    background-size: 108px;  
}

.numericalData__topic03-Item--yearsofService {
    background-size: 140px; 
}

.numericalData__topic03-Item--topic {
    background-size: 108px;  
}

.numericalData__topic03-Item--raise {
    background-size: 108px; 
}

.numericalData__topic03-Item--bonus {
    background-size: 108px; 
}
}
/* pc 1001px */


@media screen and (min-width:996px) {
.pcBr--overwork {
    display: block;
}   
}
/* pc 939px */



/* slid-2 */
@keyframes slider02 {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(-100%);
    }
}

.slidShow02 {
    display: flex;
    overflow: hidden;
    margin: 54px 0 54px;
}

.slider02 {
    display: flex;
    list-style: none;
    padding: 0;
}

.slider02--left {
    animation: slider02 50s infinite linear 0.5s both;
}

.slider02__item {
    width: 359px;
    height: 260px;
    margin-right: 16px;
}

/* pc slid-2 */
@media screen and (min-width:769px) {
.slidShow02 {
    margin: 80px 0 80px;
}

.slider02__item {
    width: 472px;
    height: 341px;
    margin-right: 56px;
}
}
/* pc 769px */


/* 採用までの流れ */
.process__content {
    padding: 0 4.2%;
    background-image: url(../images/img_process_back_sp.png);
    background-size: cover;
    background-position: center 98px;
    background-repeat: no-repeat;
}

.sectionHeader--whiteProcesss {
    background-color: #F5F5F5;
}

.sectionHeader__title--process {
    display: block;
    width: fit-content;
    margin: 15px auto 0;    
}

.process {
    text-align: center;
    padding-bottom: 75px;

}

.process__item {
    text-align: center;
    padding-top: 53px;
    width: 275px;
    height: 332px;
    margin: 0 auto;
}

.process__title {
    display: inline-block;
    color:  #006;
    font-size: 2.4rem;
    font-weight: 900;
    line-height: 1.8;
    border-bottom: 2px solid #006;
    padding: 25px 9.6% 9px 9.6%;
}

.process__itemTxt {
    display: inline-block;
    max-width: 375px;
    margin: 0 auto;
    color:  #303030;
    font-size: 1.6rem;
    text-align: left;
    padding: 34px 4.2% 40px;
}

.process__changeColor {
    color: #002A83;
    font-size: 1.6rem;
    font-weight: 900;
    line-height: 1.8;
}

.process__item--apply {
    background-image: url(../images/process_01.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

.process__item--documentScreening {
    background-image: url(../images/process_02.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

.process__item--interview {
    background-image: url(../images/process_03.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

.process__item--recruitment {
    background-image: url(../images/process_04.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover; 
}

.process__txt {
    color: #F5F5F5;
    font-size: 1.6rem;
    text-align: left;
    display: inline-block;
    margin-top: 50px;
}

.process__btnDiscription {
    color: #F5F5F5;
    font-size: 1.6rem;
    /* margin-top: 60px;
    display: inline-block; */
    display: block;
    width: fit-content;
    margin: 60px auto 0;
    position: relative;
}

.process__changeTxt {
    font-weight: 900;
    line-height: 1.8;
}

.process__btnDiscription::before,
.process__btnDiscription::after {
    position: absolute;
    top:4px;
    height: 27px;
    content: '';
    background-color: #F5F5F5;
}

.process__btnDiscription::before {
    border-left: solid 2px;
    left: -11px;
    transform: rotate(-25deg);
}

.process__btnDiscription::after {
    border-right: solid 2px;
    right: -11px;
    transform: rotate(25deg);
}

.process__applyBtn {
    display: inline-block;
    color: #006;
    font-size: 2.4rem;
    font-weight: 900;
    line-height: 1.8;
    text-align: center;
    background-color: #EDCC10;
    padding: 25px 18.3%;
    margin-top: 20px;
    border-radius: 12px;
    box-shadow: 8px 8px 0 0 #006;
    transition: 0.3s;
    position: relative;
}

.process__applyBtn:hover {
    opacity: 0.6;
}

.process__applyBtn::after {
    position: absolute;
    display: block;
    content: '';
    width: 18px;
    height: 23px;
    background-image: url(../images/btn_arrow_footer.svg);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    right: 6.9%;
    top: 52%;
    transform: translateY(-50%);
}

.processmainImg__title {
    color: #006;
    text-align: center;
    text-shadow: 2px 4px 4px rgba(0, 0, 0, 0.25);
    font-family: Anton;
    font-size: 6.4rem;
    font-weight: 400;
    line-height: 1.3;
    transform: skewX(-16deg);
    padding: 117px 0 0 0;
}

.processmainImg__txt {
    color: #006;
    text-align: right;
    font-size: 2.4rem;
    font-weight: 900;
    line-height: 1.2;
    padding: 7px 3.2% 9px 0;
}

.process__mainImg {
    background-image: url(../images/main_footer_sp.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    padding: none;
}

/* pc 採用までの流れ */
@media screen and (min-width:769px) {
.sectionHeader__title--process {
    margin: 35px auto 0;
}

.process__content {
    padding: 0 60px;
    background-image: url(../images/img_process_back_pc.png);
    background-size: cover;
    background-position: center 98px;
    background-repeat: no-repeat;
}

.sectionHeader--whiteProcesss {
    max-width: 1160px;
    margin: 0 auto;
}

.process {
    padding-bottom: 135px;
}

.process__list {
    /* display: flex;
    flex-wrap: wrap; */
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(275px, 1fr));
    justify-content: center;
    /* align-items: center; */
    gap: 20px;
    margin: 44px auto 0;
    max-width: 1160px;
}

.process__item {
    /* margin: 0;
    flex: 1 1 45%;
    max-width: 275px; */
    text-align: center;
    padding-top: 54px;
    height: 332px;
}

.process__item:nth-child(4) {
    justify-self: start;
}

.process__txt {
    margin-top: 40px;
}

.process__btnDiscription::before {
    left: -32px;
}

.process__btnDiscription::after {
    right: -32px;
}

.process__applyBtn {
    font-size: 3.2rem;
    padding: 28px 108px;
    box-shadow: 16px 16px 0 0 #006;
}

.process__applyBtn::after {
    width: 27px;
    height: 35px;
    right: 9.9%;
}
}
/* pc 1001px */


/* tablet～pc フッターメイン */
@media screen and (min-width:769px) {
.processmainImg__title {
    font-size: 9rem;
    padding: 163px 0 0 6%;
}

.processmainImg__txt {
    font-size: 3.2rem;
    padding: 7px 3.6% 24px 0;
}   
}

/* pc フッターメイン */
@media screen and (min-width:1001px) {
.processmainImg__title {
    font-size: 14rem;
    transform: skewX(-16deg);
    padding: 217px 0 0 6%;
}

.processmainImg__txt {
    font-size: 4.4rem;
    padding: 7px 6.6% 28px 0;
}
}
/* pc 1001px */


/* ===================== 
footer
======================*/
.footer__topic {
    padding: 67px 4.2% 80px;
    background-color: #006;
    text-align: center;
}

.footer__menu {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 32px 16px;
    list-style: none;
    /* padding: 67px 4.2% 56px; */
    margin: 0 auto;
    max-width: 650px;
    /* background-color: #006; */
}

.footer__item {
    /* width: calc(50% - 12px); */
    flex: 0 0 45%;
    height: 48px;          /* ← 行の高さを固定 */
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.footer__item a {
    color:  #F5F5F5;
    font-size: 1.6rem;
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    text-align: left;
}

.footer__item img {
    margin-right: 8px;
}

.footer__hr {
    border-width: 2px 0 0 0;
    border-style: solid;
    border-color: #F5F5F5;
    margin: 40px auto 0;
    max-width: 650px;
}

.footer__companyInformationTitle,
.footer__inquiryTitle {
    color: #F5F5F5;
    font-size: 2.4rem;
    font-weight: 700;
    line-height: 1.8;
    display: inline-block;
    margin-top: 40px;
}

.footer__companyInformationBtn {
    max-width: 310px;
    margin: 0 auto;
}

.companyInformationBtn a {
    display: block;
    color: #006;
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.8;
    text-align: center;
    background-color: #EDCC10;
    padding: 14px 0;
    margin: 24px auto 0;
    border-radius: 12px;
    transition: 0.3s;
    position: relative;
    max-width: 650px;
}

.companyInformationBtn a:hover {
    opacity: 0.6;
}

.companyInformationBtn a:focus {
  outline: none;
  opacity: 1;
}

.companyInformationBtn a::after {
    position: absolute;
    display: block;
    content: '';
    width: 14px;
    height: 18px;
    background-image: url(../images/btn_arrow_footer.svg);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    right: 6.9%;
    top: 52%;
    transform: translateY(-50%);
} 

.footer__companyInformation {
    /* background-color:pink; */
    position: relative;
    text-align: center;
    padding-bottom: 60px;
    max-width: 650px;
    margin: 0 auto;
}

.footer__sns {
    position: absolute;
    right: 4.9%;
    display: flex;
    align-items: center;
    margin-top: 26px;
}

.footer__snsTxt {
    color: #F5F5F5;
    font-family: Anton;
    font-size: 1.6rem;
    font-weight: 400;
    line-height: 1.5;
    margin-right: 12px;
}

.footer__snsIcon {
    width: 32px;
    height: 32px;
}

.footer__inquiryBtn {
    max-width: 310px;
    margin: 0 auto;
}

.inquiryBtn {
    display: block;
    color: #006;
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.8;
    text-align: center;
    background-color: #EEEEEE;
    padding: 14px 0;
    margin: 24px auto 0;
    border-radius: 12px;
    transition: 0.3s;
    position: relative;
    max-width: 650px;
}

.inquiryBtn:hover {
    opacity: 0.6;
}

.inquiryBtn::before {
    display: block;
    content: '';
    width: 24px;
    height: 33px;
    background-image: url(../images/btn_arrow_menu_question.svg);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    position: absolute;
    top: 52%;
    left: 34px;
    transform: translateY(-50%);
}

.inquiryBtn::after {
    position: absolute;
    display: block;
    content: '';
    width: 14px;
    height: 18px;
    background-image: url(../images/btn_arrow_footer.svg);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    right: 6.9%;
    top: 52%;
    transform: translateY(-50%);
}

.footer__end {
    background-color: #F5F5F5;
    text-align: center;
    padding-bottom: 24px;
}

.footer__logo {
    width: 92px;
    height: 36px;
    margin-top: 20px;
}

.footer__companyName {
    color: #006;
    font-size: 2.4rem;
    font-weight: 900;
    line-height: 1.5;
    margin-top: 10px;
}

.footer__changeTxt {
    font-size: 1.6rem;
    margin-left: 4px;
}

.copy {
    color: #006;
    font-size: 1.2rem;
    line-height: 1.8;
    margin-top: 24px;
}

/* pc footer */
@media screen and (min-width:1001px) {
.footer__topic {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 16px;
    padding: 64px 5.6% 76px;
    background-color: #006;
    text-align: left;
}

.footer__menu {
    flex: 1;
    display: grid;
    grid-template-columns: repeat(2, 50%);
    row-gap: 48px;
    column-gap: 40px;
    justify-content: flex-start;
    max-width: none;
    padding-right: 20px;
}

.footer__item {
    width: auto;
    height: auto;
}

.footer__item a {
    color: #F5F5F5;
    font-size: 1.6rem;
    display: flex;
    align-items: center;
}

/* 縦線 */
.footer__hr {
    width: 2px;
    height: 286px;
    border-top: none;
    border-left: 2px solid #F5F5F5;
    margin: 0 12px;
}

.footer__companyInformation {
    flex: 1;
    text-align: center;
    position: relative;
    padding-bottom: 0;
    margin: 0;
    max-width: 336px;
}

.footer__companyInformationTitle {
    margin-top: 0;
    text-align: left;
}

.footer__companyInformationBtn {
    margin-top: -15px;
}

.companyInformationBtn a {
    padding: 14px 0;
    margin: 39px auto 0;
}



.companyInformationBtn::after {
    width: 18px;
    height: 23px;
} 

.footer__sns {
    position: absolute;
    justify-content: center;
    margin-top: 16px;
    right: 26px;
}

.inquiry {
    flex: 1;
    text-align: center;
    max-width: 300px;
}

.footer__inquiryTitle {
    margin-top: 0;
}

.footer__end {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 32px 76px;
}

.footer__title {
    display: flex;
    justify-content: center;
    gap: 10px;
    /* align-items: center; */
}

.footer__logo {
    width: 122px;
    height: 48px;
    margin-top: 0;
}

.footer__companyName {
    font-size: 3.2rem;
    margin-top: 0;
}

.footer__changeTxt {
    font-size: 2.8rem;
    margin-left: 28px;
}
}
/* pc 1000px */


/* ページトップに戻る */
#pageTop {
    width: 60px;
    height: 56px;
    position: fixed;
    right: 0;
    bottom: 0;
    background-color: #EDCC10;
    /* opacity: 0.6; */
    z-index: 5;
}

.pagetopBtn {
    position: relative;
    display: block;
    width: 60px;
    height: 56px;
    text-decoration: none;
    /* z-index: 5; */
}

.pagetopBtn::before {
    position: absolute;
    content: '';
    width: 41px;
    height: 26px;
    background-image: url(../images/btn_BacktoTop_footer.svg);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    right: 0;
    bottom: 24px;
    left: 0;
    margin: 0 auto;
    text-align: center;
}

.pagetopBtn::after {
    position: absolute;
    content: 'TOP';
    color: #006;
    font-family: Anton;
    font-size: 1.6rem;
    font-weight: 400;
    line-height: 1.8;
    right: 20px;
    bottom: 0;
    margin: 0 auto;
    text-align: center;
    transform: skewX(-10deg);
}

/* pc ページトップに戻る */
@media screen and (min-width:769px) {
#pageTop {
    width: 60px;
    height: 80px;
    right: 0;
    bottom: -100px;
}

.pagetopBtn {
    width: 60px;
    height: 80px;
}

.pagetopBtn::before {
    width: 48px;
    height: 32px;
    right: 0;
    bottom: 40px;
}

.pagetopBtn::after {
    font-size: 2.4rem;
    right: 15px;
    bottom: 0;
}
}
/* pc 769px */