:root{
    --theme-color:#002C6C;
}

.hero{
    background-image: url("../img/work_flow01.jpg");
}
@media screen and (max-width: 768px) {
    .hero{
        background-image: url("../img/work_flow01_sp.jpg");
    }
}
.work{
    background-image: url("../img/work_flow02b.png");
    background-position: right;
    background-size:contain;
    background-repeat: no-repeat;
}
.work .text {
    font-size: 1.25rem;
    line-height: 2em;
    font-weight: bold;
}

@media screen and (max-width: 1000px) {
    .work{
        background-image: url("../img/work_flow02b_sp.png");
        background-position: bottom;
        background-size:contain;
        background-repeat: no-repeat;
    }
    .work .text {
        font-size: calc((100vw - 5rem)* 0.04);
        margin-bottom: 45vw;
    }
}

.dairy-schedule .catch{
    font-size: 2.75rem;
    font-weight: bold;
}

.dairy-schedule .text{
    font-size: 1.25rem;
    line-height: 1.5em;
}
@media screen and (max-width: 768px) {
    .dairy-schedule .catch{
        font-size: 1.5rem;
        font-weight: bold;
    }
    .dairy-schedule .text{
        font-size: 1rem;
    }
}

.history{
    overflow: hidden;
}

.history-line dl {
    position: relative;
    display: flex;
    padding-bottom: 2rem;
}

.history-line dl.dot-icon::before {
    content: "";
    position: absolute;
    left: 10rem;
    top: 1.35rem;
    width: 16px;
    height: 16px;
    background-color: var(--theme-color);
    border-radius: 50%;
}

.history-line dl::after {
    content: "";
    position: absolute;
    left: calc(6px + 10em);
    top: 2em;
    bottom: -2em;
    background-color: #A5A5A5;
    width: 0.25em;
    z-index: -1;
}

.history-line dt {
    font-family: "Roboto", sans-serif;
    font-size: 3rem;
    width:2.5em;
    color: #ccc;
    font-weight: unset;
}

.history-line dd {
    top: 1rem;
    font-size:1.25rem;
    font-weight: bold;
    position: relative;
    margin-left: 6rem;
}

.history-line dd > div {
    display: flex;
}

.history-image img{width:100%;border-radius: 1.2rem;}

@media screen and (max-width: 768px) {
    .history.column2-flex{
        flex-flow: column-reverse;
    }
    .history-line dt {
        font-size: 2rem;
    }
    .history-line dl.dot-icon::before {
        top: .55rem;
        left: 6.5rem;
    }
    .history-line dd {
        top: 0.4rem;
        font-size: 1rem;
        margin-left: 4rem;
        line-height: 1.5;
    }
    .history-line dl::after {
        top: 1.2em;
        left: calc(6px + 6.5em);
    }
    .history-image{margin-bottom:2rem;}
}

.description{
    background-color: #45628D;
    color:#fff;
    padding:10rem 3rem 6rem 3rem;
}
.description section{
    margin:0;
}
.description .text{
    font-size:1.5rem;
    line-height:1.5rem;
}
.description-slider{
    margin-bottom:3.5rem;
}

.description-slider .swiper-slide {
    border-radius: 1.25rem;
    overflow: hidden;
    height: auto;
}

.description-slider .swiper-slide img {
    width: 100%;
}

.description-slider .swiper-slide .infobox {
    padding: 2rem 2.5rem;
    background-color: #fff;
    color: #000;
    height: 100%;
}

.description-slider .swiper-slide .infobox .number {
    display: inline-block;
    font-size: 0.875rem;
    border: 1px solid #000;
    padding: 0 1rem;
    height: 1.5rem;
    align-content: center;
    margin-bottom: 0.75rem;
}

.description-slider .swiper-slide .infobox .title {
    font-size: 1.75rem;
    font-weight: bold;
    margin-bottom: 0.75rem;
}
.description-slider .swiper-slide .infobox .comment {
    line-height:1.5;
}
.description .border {
    max-width:820px;
    height:.5rem;
    border-radius:1rem;
    background-color:#fff;
    margin:0 auto;
}

@media screen and (max-width: 768px) {
    .description {
        padding: 3rem 1rem 4.5rem 1rem;
    }
    .description .text {
        font-size: 1rem;
    }
    .description-slider {
        margin-bottom: 1.5rem;
    }
    .description-slider .swiper-slide .infobox .title {
        font-size: 1.5rem;
    }
    .description-slider .swiper-slide .infobox .comment {
        font-size: 0.875rem;
    }
    .description-slider .swiper-slide .infobox {
        padding: 1rem 1.5rem;
    }
    .description .border {
        height: .25rem;
    }
}


.divercity .catch{
    font-size: 2.75rem;
    font-weight: bold;
}

.divercity .text{
    font-size:1.5rem;
    line-height:1.5;
}

@media screen and (max-width: 768px) {
    .divercity .catch{
        font-size: 1.5rem;
    }

    .divercity .text{
        font-size:1rem;
    }
}


.concept-swiper{
    background-color: #fff;padding:1.5rem 0;
}
.concept-swiper .swiper-wrapper{
    transition-timing-function: linear;
}
.concept-swiper .swiper-slide img{
    height: auto;
    width: 100%;
}