@charset "UTF-8";
/* CSS Document */

@media only screen and (max-width: 600px) {
	/* -------------------------------------------------
layout
----------------------------------------------------*/

/* ===== header ===== */
    .utility { display: none;}
    
    header {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        padding: 12px 5%;
    }
    
    .logo-main {  margin: 0;}
    
    .logo-main .link-index { width: 235px;}


/* ===== main visual ===== */
    #mv-wrap {
        height: 86.7vw;
        margin-top: 55px;
        background: url("../images/mv_img_sp.jpg") no-repeat center center / cover;
    }
        
    .mv-catch:nth-of-type(1) { display: none;}
    
    .mv-catch.for-sp {
        font-size: 5.4rem;
        text-align: center;
    }


/* ===== global nav ===== */
    #g-nav-wrap { display: none;}
    
    .h-menu {
        position: fixed;
        top: 0;
        right: 0;
        z-index: 9999;
        width: 55px;
        height: 55px;
        background-color: #004ea2;
    }

    .h-menu .menu-trigger,
    .h-menu .menu-trigger span {
        display: inline-block;
        border-radius: 4px;
        box-sizing: border-box;
        transition: all .4s;
    }

    .h-menu .menu-trigger {
        position: relative;
        width: 55px;
        height: 55px;
    }
    
    .h-menu .menu-trigger span {
        position: absolute;
        left: 13px;
        width: 30px;
        height: 2px;
        background-color: #fff;
        border-radius: 4px;
    }

    .h-menu .menu-trigger span:nth-of-type(1) {
        top: 19px;
    }

    .h-menu .menu-trigger span:nth-of-type(2) {
        top: 26px;
    }

    .h-menu .menu-trigger span:nth-of-type(3) {
        top: 33px;
    }
    
    .h-menu .menu-trigger.active span:nth-of-type(1) { transform: translateY(6px) rotate(-45deg);}

    .h-menu .menu-trigger.active span:nth-of-type(2) { opacity: 0;}

    .h-menu .menu-trigger.active span:nth-of-type(3) { transform: translateY(-8px) rotate(45deg);}
    
    #g-nav-wrap-sp {
        position: fixed;
        top: 55px;
        left: 0;
        z-index: 9999;
        display: none;
        width: 100%;
        height: calc(100vh - 55px);
        background-color: rgba(255, 255, 255, 0.9);
    }
    
    .g-nav-sp-in {
        height: 100%;
        padding: 32px 4%;
        padding-block-end: 100px;
        -webkit-padding-block-end: 100px;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch; 
    }
    
    .g-nav-sp {
        width: 100%;
        margin-bottom: 32px;
        border-top: 1px solid #ccc;
    }
    
    .g-nav-sp li { border-bottom: 1px solid #ccc;}
    
    .g-nav-sp li a {
        position: relative;
        display: block;
        padding: 16px 8px;
        font-size: 1.5rem;
        font-weight: 500;
    }   
    
    .g-nav-sp li a::after {
        content: "";
        position: absolute;
        top: 50%;
        right: 8px;
        width: 6px;
        height: 6px;
        border-top: 2px solid #35241e;
        border-right: 2px solid #35241e;
        transform: translateY(-50%) rotate(45deg);
    }
    
    .btn-area-sp {
        display: flex;
		justify-content: center;
		margin-bottom: 50px;
    }
    
    .btn-area-sp .btn-box {
        display: block;
        width: 80px;
        margin: 0 10px;
        text-align: center;
    }
    
    .btn-area-sp .btn-box--line {
			position: relative;
    }
    .btn-area-sp .btn-box--line {
			position: relative;
    }
		.nav-line-txt {
			position: absolute;
			right: 2vw;
			bottom: -35px;
			width: 310px;
		}
		.nav-line-txt img {
			width: 100%;
		}
    
    .btn-link {
        width: 48px;
        margin-bottom: 8px;
    }
    
	.btn-box p { font-size: 1.1rem;}
	
	.lang-area--sp ul {
		justify-content: center;
	}

	.lang-area li a {
		font-size: 1.3rem;
	}


/* ===== footer ===== */
    footer { padding: 10% 4% 24px;}
    
    .link-area { flex-wrap: wrap;}
    
    .link-area p {
        width: 84%;
        max-width: 334px;
        margin: 0 6px 12px;
    }
    
    .link-btn { font-size: 1.6rem;}
    
    #f-nav-wrap { display: none;}
    
    .f-bot {
		flex-direction: column;
		text-align: center;
	}
    
    .f-logo .link-index { width: 212px;}
    
    .com-info {
        margin-bottom: 40px;
        text-align: center;
    }
    
    .com-info * {
		display: block;
		margin-right: 0;
        font-size: 1.2rem;
        line-height: 1.5;
    }
    
    .f-bot-r { position: inherit;}
    
	.btn-insta,
	.btn-line,
	.btn-line-qr { display: none;}
    
    .copy { text-align: center;}
	
	.f-bot-sns {
		justify-content: center;
	}

/*pageTop*/


/* ====================================
index.html
====================================== */
    .sec-01 { padding: 10% 4% 12%;}
    
    .sec-01 .main-txt {
        margin-bottom: 60px;
        font-size: 1.4rem;
    }
    
    .m-p-ttl {
        margin-bottom: 13px;
        font-size: 2.0rem;
    }
    
    .m-p-txt {
        font-size: 1.4rem;
        line-height: 1.5;
    }
    
    .m-p-slide-wrap { padding: 0 4.5%;}
    
    .m-p-area {
        width: 100%;
        margin: auto;
    }
    
    .m-p-box { margin-right: 0px;}
    
    .link-m-p {
        width: 84%;
        max-width: 334px;
        font-size: 1.6rem;
    }
    
    .c-nav-l,
    .c-nav-r { width: 100%;}
    
    .c-nav,
    .c-nav-txt { font-size: 1.4rem;}
    
    .c-nav { padding: 8px;}
    
    
    
    .sec-03 {
        flex-wrap: wrap;
        padding: 10% 4%;
    }
    
    .sec-03-l,
    .sec-03-r { width: 100%;}
    
    .sec-03-l {
        position: relative;
        padding: 0;
        margin-bottom: 20px;
        border-right: none;
        border-bottom: 1px solid #000;
    }
    
    .sec-03-ttl { margin-bottom: 20px;}
    
    .sec-03-l p {
        position: absolute;
        top: 0;
        right: 0;
    }
    
    .sec-03-r { padding: 0;}

		
		.news-lists li:not(:nth-last-of-type(1)) {
			margin-bottom: 50px;
		}
    
    .news-lists li a {
			flex-direction: column;
		}
	
		.news-item-figure {
			width: 100%;
			max-width: 500px;
			margin: 0 auto 20px;
		}

		.news-item-des {
			width: 100%;
			padding-left: 0;
		}
    
    
    




/* -------------------------------------------------
sub-layout
----------------------------------------------------*/
	#page-ttl-wrap { margin-top: 55px;}
	
	.page-ttl-box {
		bottom: -60px;
		width: 147px;
		height: 147px;
		padding-top: 36px;
	}
	
	.page-ttl { font-size: 2.0rem;}
	
	.wrapper { padding: 24.7% 0 20%;}
	





/* ====================================
会社概要
====================================== */
	.page-ttl-txt {
		bottom: inherit;
		top: 12px;
		color: #000;
	}
	
	.com-sec-01 { margin-bottom: 60px;}
	
	.com-main-txt { font-size: 2.0rem;}
	
	.com-main-txt .sp-block { display: block;}
	
	.greeting {
		flex-wrap: wrap;
		margin: 0 4%;
	}
	
	.president { width: 83.333%;}
	.gree-area { width: 100%;}
	
	.president { order: 2;}
	
	.gree-area {
		order: 1;
		margin-bottom: 32px;
	}
	
	.gree-area p { font-size: 1.4rem;}
	
	.gree-area p:nth-last-of-type(2) { margin-bottom: 36px;}
	
	
	
	.mov-area {
		width: 92%;
		margin: 0 auto 60px;
	}
	
	.mov-area video {
		width: 100%;
		height: 52vw;
	}
	
	
	
	.com-sec-02 { margin: 0 4%;}
	
	.com-tbl {
		width: 100%;
		margin: 0;
	}
	
	.com-tbl-l { margin-bottom: 40px;}
	
	.com-tbl-l dt { width: 25%;}
	.com-tbl-r dt { width: 30%;}
	
	.com-tbl-l dd { width: 75%;}
	.com-tbl-r dd { width: 70%;}





/* ====================================
企業コンセプト
====================================== */
	.page-ttl-cnp { background-image: url("../images/cnp_ttl_bg_sp.jpg");}
	
	.page-ttl-cnp .page-ttl { letter-spacing: 0;}
	
	
	
	.cnp-sec-01 { margin: 0 4% 56px;}
	
	.cnp-main-txt { width: 296px;}
	
	.cnp-sub-txt { font-size: 1.7rem;}
	
	.cnp-txt {
		width: 100%;
		font-size: 1.4rem;
	}
	
	.s-p-sec-ttl { font-size: 1.7rem;}
	
	.s-p-logo { width: 192px;}
	
	.s-p-area { padding: 0 4%;}
	
	.s-p-des,
	.s-p-img { width: 100%;}
	
	.s-p-des { padding: 10%;}
	
	.s-p-in { width: auto;}
	
	.s-p-ttl { font-size: 2.0rem;}
	
	.sky-logo { width: 110px;}
	
	.s-p-in p { font-size: 1.4rem;}
	
	.even .s-p-des { order: 1;}
	
	.even .s-p-img { order: 2;}





/* ====================================
食品卸事業
====================================== */
	.wrapper.mft-wrap { padding: 0 0 20%;}
	
	.mft-upside {
		padding: 24.6% 4% 13.6%;
		margin-bottom: 32px;
	}
	
	.mft-sec-01 { margin-bottom: 56px;}
	
	.mft-main-en { font-size: 4.8rem;}
	
	.mft-main-jp {
		font-size: 1.7rem;
		letter-spacing: 0.08em;
	}
	
	.mft-txt {
		width: 100%;
		font-size: 1.4rem;
	}
	
	
	
	.mft-sec-02 .mft-sec-ttl {
		margin-bottom: 32px;
		font-size: 2.3rem;
	}
	
	.biz-box {
		width: 100%;
		margin-bottom: 24px;
	}
	
	.biz-des-ttl {
		font-size: 2.0rem;
		letter-spacing: 0.08em;
	}
	
	.biz-des p { font-size: 1.4rem;}
	
	.link-item {
		width: 100%;
		font-size: 2.0rem;
	}
	
	
	
	.mft-sec-03 { padding: 0 4%;}
	
	.mft-sec-03 .mft-sec-ttl { margin-bottom: 44px;}	
	.mft-sec-ttl { font-size: 2.3rem;}
	
	.voice-area:nth-last-of-type(1) { margin-bottom: 48px;}
	
	.voice-r { width: 100%;}
	
	.voice-area {
        padding: 5% 6%;
        border-radius: 20px;
    }
	
	.v-ttl {
		font-size: 2.0rem;
		line-height: 1.5;
	}
	
	.v-txt { font-size: 1.4rem;}
	
	.cus-genre { display: none;}





/* ====================================
食品卸事業
====================================== */
	.wls-wrap { padding: 24.7% 0 0;}
	
	.wls-sec-01 { padding: 0 4%;}
	
	.wls-sec-02 { padding: 40px 4% 0;}
	
	.wls-main-en {
		font-size: 4.8rem;
		line-height: 1.3;
	}
	
	.wls-main-jp { font-size: 1.7rem;}
	
	.wls-txt {
		width: 100%;
		font-size: 1.4rem;
	}
	
	.wls-sec-02 .biz-wrap { padding-bottom: 11%}
	
	.wls-sec-ttl {
		margin-bottom: 32px;
		font-size: 2.3rem;
		line-height: 1.3;
	}
	
	.wls-sec-ttl .sp-block { display: block;}
	
	.wls-cat { font-size: 1.4rem;}
	
	.wls-cat::after { border-width: 30px 20px 0 0;}





/* ====================================
リクルート情報
====================================== */
	.page-ttl-rec .page-ttl { font-size: 1.8rem;}
	
	.rec-sec-01 { padding: 0 4% 50px;}
	
	.rec-main-en {
		font-size: 4.8rem;
		line-height: 1.3;
	}
	
	.rec-main-jp { font-size: 1.7rem;}
	
	.rec-txt {
		width: 100%;
		font-size: 1.4rem;
	}
	
	.link-entry {
		width: 100%;
		max-width: 394px;
		font-size: 2.0rem;
	}
	
	.rec-sec-02 { padding: 50px 4% 42px;}
	
	.rec-sec-02 .rec-sec-ttl {
		margin-bottom: 32px;
		font-size: 2.3rem;
	}
	
	.dep-box {
		width: 100%;
		margin-bottom: 30px
	}
	
	.dep-ttl { font-size: 3.2rem;}
	
	.dep-des p { font-size: 1.4rem;}
	
	
	
	.staff-voice-wrap .rec-sec-ttl {
		margin-bottom: 0;
		font-size: 4.2rem;
	}
	
	.s-v-conts { padding: 48px 4%;}
	
	.stf-conts-l,
	.stf-conts-r { width: 100%;}
	
	.stf-conts-l { order: 2;}
	
	.stf-conts-r {
		order: 1;
		margin-bottom: 32px;
	}
	
	.stf-ttl { font-size: 2.0rem;}
	
	
	
	.rec-list-wrap .rec-sec-ttl {
		margin-bottom: 60px;
		font-size: 4.2rem;
	}
	
	.rec-conts-wrap { padding: 0 4%;}
	
	.rec-conts-ttl {
		padding: 0;
		margin-bottom: 43px;
		font-size: 1.7rem;
		line-height: 47px;
	}
	
	.rec-img-area { margin-bottom: 30px;}
	
	.rec-img-area p {
		width: 100%;
		margin-bottom: 12px;
	}
	
	.rec-list-tbl { margin-bottom: 64px;}
	
	.rec-list-tbl dt,
	.rec-list-tbl dd {
		width: 100%;
		padding: 16px 4%;
		font-size: 1.4rem;
	}
	
	
	
	.rec-list-wrap { margin-bottom: 11%;}
	
	.rec-list-conts { margin-bottom: 90px;}
	
	.rec-abt-ttl {
		padding: 27px 0 12px;
		font-size: 2.2rem;
	}
	
	.rec-abt-des-wrap { padding: 5%;}
	
	.rec-abt-head {
		margin-bottom: 16px;
		font-size: 2.4rem;
	}
	
	.rec-abt-des p { font-size: 1.4rem;}
	
	.rec-abt-des p:not(:nth-last-of-type(1)) { margin-bottom: 20px;}





	/* ====================================
	商品紹介
	====================================== */
	.pdc-main-txt {
		font-size: 4.8rem;
	}

	.pdc-sec-02 {
		padding: 60px 4% 80px;
	}

	.pdc-item {
		margin: 0 0 30px;
		padding: 4%;
	}

	.pdc-item-left {
		width: 100%;
		max-width: inherit;
		margin: 0 0 24px;
	}

	.pdc-figure {
		margin: 0 0 10px;
		height: 67vw;
	}

	.tab-area li {
		width: 48%;
	}

	.pdc-item-right {
		width: 100%;
	}

	.pdc-item-head .category {
		display: block;
		margin: 0 0 12px 0;
	}

	.item-name {
		width: 100%;
		font-size: 2.0rem;
	}





	/* ====================================
	お問合せ
	====================================== */
	.contact-wrap {
		width: 92%;
	}





	/* ====================================
	お知らせ
	====================================== */
	.page-ttl-news {
		background-image: url("../images/cnp_ttl_bg_sp.jpg");
	}
	
	.news-wrap {
		width: 90%;
		max-width: 500px;
		margin: auto;
	}
	
	.news-body,
	.sidebar {
		width: 100%;
	}
	
	.news-body {
		margin-bottom: 50px;
	}
	
	.sidebar {
		padding: 0;
	}
	
	.news-row {
		margin-bottom: 40px;
	}
	
	.news-figure {
		width: 100%;
		height: auto;
	}
	
	.news-des {
		width: 100%;
		padding: 30px 20px;
	}
	
	.news-header {
		font-size: 1.8rem;
	}
	
	.post-body-cont p {
		font-size: 1.4rem;
	}
	
	.post-body-cont img {
		max-width: 100%;
		height: auto;
	}
	
	.side-block-ttl {
		font-size: 1.6rem;
	}
	
	/* pager */
	.page-numbers {
		width: 40px;
		height: 40px;
		padding-top: 12px;
		font-size: 13px;
	}



}