@charset "utf-8";
/* CSS Document */
/*================================================
 *  kv
 ================================================*/
#t-kv {
    margin-bottom: 100px;
    position: relative;
}
#t-kv-img {
    background-color: #ffffff;
    position: relative; 
    overflow: hidden;
    min-height: 60vh;
    width: 100%;
}

@media(min-width:1025px) {
    #t-kv-img{
        min-height: 80vh;
    }
}

.kv_copy {
    position: absolute;
    top: 50%;
    left: 0;
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%); 
    text-align: center;
    width: 100%;
}


.kv_copy > picture{
    display: block;
    margin: auto;
    max-width: 500px;
    width: 80%;
}

@media(min-width:1025px) {
    .kv_copy > picture{
        max-width: 640px;
    }
}


/*================================================
 *  トップコンテンツ
 ================================================*/
.t-contents{
    position: relative;
}

.t-contents::after{
    background-color: #1399DB;
    content: "";
    position: absolute;
    bottom: -40px;
    height: 40px;
    width: 100%;
}


@media(min-width:1025px) {
    .t-contents::after{
        bottom: -80px;
        height: 80px;
    }
    
}

.t-contents .flex .image{
    width: 95%;
}

.t-contents .flex .image img{
    object-fit: cover;
    height: 320px;
}

.t-contents .flex .text-area{
    background-color: #1399DB;
    color: #ffffff;
    padding-top: 40px;
    position: relative;
    width: 100%;
}

@media(max-width:1024px) {
    .t-contents .flex .text-area::before{
        background-color: #1399DB;
        content: "";
        position: absolute;
        top: -160px;
        height: 160px;
        width: 100%;
        z-index: -1;
    }
}

.t-contents .flex .text-area .text-area-inner{
    max-width: 720px;
    width: 90%;
    margin: 0 auto;
}

.t-contents h2.subtitle{
    margin-bottom: 16px;
    text-align: left;
}

@media (min-width:600px){
    .t-contents .flex .image img{
        object-fit: cover;
        height: 480px;
    }
    .t-contents h2.subtitle{
        margin-bottom: 24px;
    }
}

.t-contents h2.subtitle span.eng{
    color: #ffffff;
}

.t-contents .flex .text-area .text-area-inner p{
    line-height: 1.8;
    margin-bottom: 24px;
}

@media(min-width:600px) {
    
}

@media(min-width:1025px) {
    .t-contents .flex .image{
        margin-bottom: 0px;
        width: 56%;
    }
    
    .t-contents .flex .image img{
        height: 600px;
    }
    
    .t-contents .flex .text-area{
        width: 44%;
        height: 80%;
        margin-top: auto;
        padding: 80px;
    }
    
    .t-contents .flex .text-area::before{
        background-color: #1399DB;
        content: "";
        position: absolute;
        top: 0;
        left: -130%;
        height: 100%;
        width: 130%;
        z-index: -1;
    }
    
    .t-contents .flex .text-area .text-area-inner{
        width: 100%;
    }
    
    .t-contents .flex .text-area .text-area-inner p{
        margin-bottom: 40px;
    }
}

@media (min-width:1200px){
    .t-contents .flex .text-area{
        padding: 72px 80px; 
    }
    .t-contents .flex .text-area .text-area-inner{
        max-width: 480px;
        margin: auto;
    }
    
}



/* リンクリスト */
.t-contents ul.link-list li{
    border-bottom: solid 1px #ffffff;
    padding-bottom: 8px;
    margin-bottom: 16px;
}


.t-contents ul.link-list li a{
    color: #ffffff;
    display: block;
    position: relative;
}

.t-contents ul.link-list li a::after{
    content: '';
    display: block;
    border-top: 2px solid #fff;
    border-left: 2px solid #fff; 
    position: absolute;
    top: calc(50% - 5px);
    right: 0px;
    height: 6px;
    width: 6px;    
    transform: rotate(135deg);
    margin-left: auto;
}


/*================================================
 *  私たちについて
 ================================================*/
.t-aboutus h3.head-copy{
        font-size: 5.6vw;
        margin-bottom: 16px;
    }
@media (min-width:600px){
    .t-aboutus h3.head-copy{
        font-size: 4vw;
        margin-bottom: 24px;
    }
    
}
@media(min-width:1025px) {
    .t-aboutus h3.head-copy{
        font-size: 1.9vw;
    }
}

@media (min-width:1200px){
    .t-aboutus h3.head-copy{
        font-size: 2.5rem;
    }
}



/*================================================
 *  商品紹介
 ================================================*/
.t-item{
    margin-top: 100px;
    margin-bottom: 80px;
}


@media(min-width:1025px) {
    .t-item{
        margin-top: 200px;
    }

}

.t-item ul.flex{
    justify-content: space-between;
}

.t-item ul.flex li{
    margin: 0 auto 40px auto;
    max-width: 320px;
    width: calc(100% / 2 - 24px);
    /*width: 100%;*/
}

.t-item ul.flex li:last-child{
    margin-bottom: 0;
}

@media (min-width:1025px){
    .t-item ul.flex li{
        width: calc(100% / 4 - 40px);
        max-width: 800px;
        margin-bottom: 0;
    }
}


.t-item ul.flex li a:hover{
    opacity: 0.7;
}

.t-item ul.flex li p{
    max-width: 160px;
    margin: 20px auto auto auto;
    text-align: center;
}

.t-item ul.flex li p > img{
    display: inline-block;
    margin-left: 20px;
    height: 12px;
    vertical-align: middle;
    padding-bottom: 1px;
}


@media (min-width:1025px){
    .t-item{
        margin-bottom: 160px;
    }
    
    .t-item ul.flex li p{
        font-size: 2.4rem;;
    }
}




/*================================================
 *  会社案内
 ================================================*/


@media (min-width:1025px){
    .t-company.t-contents .flex .text-area{
        padding-bottom: 40px;
    }
}






/*================================================
 *  レシピ
 ================================================*/
.t-recipe.t-contents{
}

.t-recipe{  
    background: #FFF9EC;
    overflow: hidden;
    padding: 120px 0 80px 0;
}

.t-recipe .head-title{
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    position: relative;
    max-width: 320px;
    margin: 0 auto;
}


.t-recipe .head-title::before{
    background: url("../img/ico_recipe.png")no-repeat;
    background-size: contain;
    content: "";
    margin: auto;
    position: absolute;
    top: calc(50% - 32px);
    left: 8px;
    bottom:  0;
    height: 40px;
    width: 30px;
}

@media (min-width:600px){
    .t-recipe .head-title{
        max-width: 320px;
    }
    
    .t-recipe .head-title::before{
        
        left: -24px;
        height: 80px;
        width: 50px;
    }
}

@media (min-width:1025px){
    .t-recipe .head-title::before{
        top: calc(50% - 48px);
        left: -74px;
    }
}


.t-recipe .w12-c > p{
    margin-bottom: 50px;
    text-align: center;
}

.slick_wrap{
    margin: 0 auto 50px;
    padding: 0 20px;
    width: 80%;
}

.slick-item{
    padding: 0 5px;
}

.slick-item-img {
    margin-bottom: 10px;
    position: relative;
    width: 100%;
}

.slick-item-img img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.slick-item-img span{
    background: #ffffff;
    border-radius: 100vh;
    color: #aaaaaa;
    font-size: 1.2rem;
    font-weight: 600;
    padding: 2px 10px;
    position: absolute;
    bottom: 5px;
    left: 5px;
}

.slick-item > p{   
    font-size: 1.4rem;
}



@media (min-width: 1025px) {
    .t-recipe{
        padding: 240px 0 240px 0;
    }
    
    .t-recipe .head-title.flex{
        margin-bottom: 50px;
    }
    
    .t-recipe .head-title.flex img{
        height: 80px;
    }

    .t-recipe .head-title.flex h2{
        margin-left: 20px;
    }
    
    .t-recipe .w12-c > p{
        margin-bottom: 100px;
    }
    
    
    .slick_wrap{
        margin: 0 auto 50px;        
        padding: 0 50px;
    }
    
    .slick-item{
        padding: 0 10px;
    }
    
    .slick-item-img {
        margin-bottom: 15px;
    }
    
    .slick-item-img span{
        font-size: 1.4rem;
        padding: 5px 15px;
        bottom: 15px;
        left: 15px;
    }
    
    .slick-item > p{
        font-size: 1.6rem;
    }
    
}


/*================================================
 *  採用情報
 ================================================*/
.t-recruit{
    
}

.t-recruit p:last-child{
    /*※2025/3/14よりページをご覧いただけます。*/
    color: #fff;
}

@media (max-width: 1024px) {
    .t-recruit{
        position: relative;
    }
    .t-recruit::after{
        background: #FFF9EC;
        content: "";
        position: absolute;
        top: 0;
        height: 400px;
        width: 100%;
        z-index: -2;
    }
    .t-recruit.t-contents .flex .text-area{
        padding-bottom: 40px;
    }
}


.t-recruit ul.link-list{
    margin-bottom: 24px;
}

.t-recruit a.link-more{
    background: #ffffff;
    color: #1399DB;
    font-size: 2rem;
    margin: 0;
    max-width: 1000px;
    width: 100%;
}

.t-recruit a.link-more::after{
    border-top: 2px solid #1399DB;
    border-left: 2px solid #1399DB;
}

@media (min-width:1025px){
    .t-recruit{
        margin-top: -100px;
    }
    .t-recruit.t-contents .flex .text-area{
        padding-top: 64px;
        padding-bottom: 0px;
    }
    
    .t-recruit ul.link-list{
        margin-bottom: 40px;
    }
    
    .t-recruit a.link-more{
        font-size: 2.4rem;
        max-width: 1000px;
        width: 100%;
    }
}

/*================================================
 *  お知らせ
 ================================================*/
.t-news{
    margin-bottom: 80px;
    padding: 120px 0 0 0;
}

.news-title{
    width: 100%;
}

.news-title h2.subtitle{
    margin-bottom: 40px;

}


.t-news a.link-more{
    margin: 0;
}

@media (max-width:1024px){
    .news-title > a.link-more{
        display: none;
    }  
    
    .t-news .flex > a.link-more{
        margin: auto;
    }
    
    .news-tab{
        margin-bottom: 20px;
    }

}

@media (min-width:1025px){
    .t-news{
        padding: 240px 0 0 0;
    }

    .t-news .flex > a.link-more{
        display: none;
    }  
}

.news-tab{
    width: 100%;
}

@media (min-width:1025px){
    .t-news{
        margin-bottom: 160px;
    }
    .news-title{
        margin-right: 80px;
        width: 240px;
    }
    .news-title h2.subtitle{
        text-align: left;
    }

    
    .news-tab{
        flex: 1;
    }
}


[value="All"]:checked ~ .news-wrap [data-category]:nth-child(n+6){
    display: none;
}

.target[data-category~="ctg-company"]:nth-child(n+10){
    
}
/*.target[data-category~="ctg-press"]:nth-child(n+11){
    display: none;
}*/




/*================================================
 *  バナー
 ================================================*/
.t-banner ul.flex{
    justify-content: space-between;
}

.t-banner ul.flex li{
    margin-bottom: 16px;
}

@media (min-width:600px){
    .t-banner ul.flex li{
        margin-bottom: 16px;
        width: calc(100% / 2 - 8px);
    } 
}


@media (min-width:1025px){
    .t-banner ul.flex li{
        margin-bottom: 0px;
        width: calc(100% / 3 - 16px);
    }
}