@charset "utf-8";
/* CSS Document */
/*================================================
 *  common CSS
 ================================================*/
html {
    font-size: 62.5%; /* 16px x 0.625 = 10px(=1rem) */
}

body {
    color: #272727;
    font: normal 500 1.6rem/* 16px*/ / 1.5 'Roboto', 'Noto Sans JP', sans-serif;
    letter-spacing: normal;
    background: #fff;
}

#wrapper {
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    flex-direction: column;
}

#wrapper:before, #wrapper:after{
    content: "";
    display: block;
    height: 0;
    overflow: hidden;
}

img {
    height: auto;
    max-width: 100%;
    vertical-align: bottom;
    image-rendering: -webkit-optimize-contrast;
    
    
    backface-visibility: hidden;
-webkit-backface-visibility: hidden;
}

a {
    color: #272727;
}

a.link-more{
    background: #1399DB;
    border-radius: 100vh;
    color: #ffffff;
    display: block;
    font-weight: 500;
    margin: 0 auto;
    max-width: 240px;
    padding: 16px;
    position: relative;
    text-align: center;
    width: 80%;
}
a.link-more::after{
    content: '';
    display: block;
    border-top: 2px solid #ffffff;
    border-left: 2px solid #ffffff; 
    position: absolute;
    top: calc(50% - 5px);
    right: 20px;
    height: 6px;
    width: 6px;    
    transform: rotate(135deg);
    margin-left: auto;
}

span.in-block{
    display: inline-block
}


.scroll_off {
	overflow:hidden;
}

.l-spacing-15{
    letter-spacing: -0.15em;
}

/* layout
----------------------------------------*/
.flex {
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    -moz-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    -o-flex-wrap: wrap;
    flex-wrap: wrap;
}

/* grid */
.grid {
	display: grid;
    width: 100%;
    grid-template-rows: auto auto;
}

.grid.col-2,.grid.col-3,.grid.col-4,.link-searchrecipe .ctg02.grid.col-5{
    grid-template-columns: 1fr 1fr;
    gap: 20px 20px;
}

@media (min-width:600px){
    .grid.col-3,.grid.col-4{
        grid-template-columns: 1fr 1fr 1fr;
        gap: 20px 20px;
    }
    .link-searchrecipe .ctg02.grid.col-5{
        grid-template-columns: 1fr 1fr 1fr;
        gap: 20px 10px;
    }
}

@media (min-width:1025px){
    .grid.col-4{
        grid-template-columns: 1fr 1fr 1fr 1fr;
        gap: 40px 40px;
    }
    
    .grid.col-5{
        grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
        gap: 40px 40px;
    }
    
    .link-searchrecipe .ctg02.grid.col-5{
        grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
        gap: 20px 10px;
    }
    
    .grid.col-6{
        grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
        gap: 40px 40px;
    }
}

.w10-c {
    max-width: 1000px;
    width: 90%;
    margin-left: auto;
    margin-right: auto;
}
.w12-c {
    max-width: 1200px;
    width: 90%;
    margin-left: auto;
    margin-right: auto;
}

@media (max-width:599px){
    .min-500,.min600-only{
        display: none;
    }
}
@media (min-width:600px){
    .max-499,.sp-only{
        display: none;
    }
    
}


@media (max-width:1024px){
    .hidden-sp-tab{
        display: none;
    }
}

/*================================================
 *  margin
 ================================================*/
.mt-8{
    margin-top: 8px;
}

.mt-16{
    margin-top: 16px;
}

.mb-16{
    margin-bottom: 16px;
}

.mb-24{
    margin-bottom: 24px;
}

.mb-40,.mb-80{
    margin-bottom: 40px;
}

.sec-mb-l{
    margin-bottom: 80px;
}

@media (min-width:1025px){
    
    .mb-80{
        margin-bottom: 80px;
    }
    
    .sec-mb-l{
        margin-bottom: 160px;
    }
}



/*================================================
 *  フォント
 ================================================*/
/* カラー */
.fc-mainblue{
    color: #1399DB;
}
.fc-darkblue{
    color: #3366CC;
}
.fc-black{
    color: #272727;
}

.fc-red{
    color: #D0111B;
}

/* サイズ */
.fs-14{
    font-size: 1.4rem;
}

.fs-24{
    font-size: 2.4rem;
}

.fs-40{
    font-size: 2.4rem;
}

@media (min-width:1025px){
    .fs-40{
        font-size: 4rem;
    }
}

/* 太さ */
.fw-bold{
    font-weight: 700;
}

/*================================================
 *  背景
 ================================================*/
.bg-lightblue{
    background: #EFF9FF;
}

.bg-lightgray{
    background: #EFEFEF
}

.bg-recipe{
    background: #FFF9EC;
}

/*================================================
 *  header
 ================================================*/
header{  
    background: #ffffff;
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.08);
}

header.ly_header {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 99;
}

h1.logo {
    position: absolute;
    top: 0;
    left: 0;
    margin: 10px 0px 20px 24px;
    width: 200px;
    z-index: 1;
}

@media only screen and (min-width: 1025px) {
    header{
        height: 89px;
    }
    
    h1.logo {
        margin-left: 40px;
        margin-right: 20px;
        width: 250px;
        vertical-align: bottom;
    }
}

.g-nav-wrap {
    position: relative;
    width: 100%;
    height: 70px;
    background-color: #ffffff;
}

.g-nav-wrap::before {
    content: 'mobile';
    display: none;
}

@media only screen and (min-width: 1025px) {
    /* メインメニュー */
    .g-nav-wrap {
        position: absolute;
        top: 50px;
        right: 40px;
        width: 100%;
        padding: 0;
        text-align: right;
        background-color: transparent;
    }
    .g-nav-wrap::before {
        content: 'desktop';
    }

}

/*---- ハンバーガーメニュー ----*/
.g-nav-trigger {
    position: absolute;
    top: 0;
    right: 9px;
    height: 50px;
    width: 60px;
    overflow: hidden;
    text-indent: 100%;
    white-space: nowrap;
    color: transparent;
}

p.g-nav-trigger-text{
    font-weight: 500;
    font-size: 1.4rem;
    position: absolute;
    right: 9px;
    bottom: 10px;
    text-align: center;
    width: 60px;
}

.g-nav-trigger span, .g-nav-trigger span::after, .g-nav-trigger span::before {
    position: absolute;
    background-color: #000000;
    height: 3px;
    width: 26px;
}

.g-nav-trigger span {
    left: 50%;
    top: 50%;
    bottom: auto;
    right: auto;
    -webkit-transform: translateX(-50%) translateY(-50%);
    -ms-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
    -webkit-transition: background-color .3s;
    transition: background-color .3s;
}

.g-nav-trigger span::after, .g-nav-trigger span::before {
    content: '';
    left: 0;
    -webkit-transition: -webkit-transform .3s;
    transition: -webkit-transform .3s;
    transition: transform .3s;
    transition: transform .3s, -webkit-transform .3s;
}

.g-nav-trigger span::before {
    -webkit-transform: translateY(-9px);
    -ms-transform: translateY(-9px);
    transform: translateY(-9px);
}

.g-nav-trigger span::after {
    -webkit-transform: translateY(9px);
    -ms-transform: translateY(9px);
    transform: translateY(9px);
}

.g-nav-wrap.nav-open .g-nav-trigger span {
    background-color: transparent;
}

.g-nav-wrap.nav-open .g-nav-trigger span::before {
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}

.g-nav-wrap.nav-open .g-nav-trigger span::after {
    -webkit-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    transform: rotate(-45deg);
}

@media only screen and (min-width: 1025px) {
    .g-nav-trigger,p.g-nav-trigger-text {
        display: none;
    }
}


nav.g-nav-main-pc {
    display: none;
}

@media only screen and (min-width: 1025px) {
    nav.g-nav-main-pc {
        display: inline-block;
    }
    nav.g-nav-main-pc > ul > li {
        display: inline-block;
        float: left;
    }
    nav.g-nav-main-pc > ul > li > a {
        color: #272727;
        display: block;
        font-size: 1.8rem;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        -webkit-transition: opacity .2s;
        transition: opacity .2s;
        transition: all .3s;
    }
    nav.g-nav-main-pc > ul > li:not(:last-child) > a {
        padding-right: 4vw;
    }
    nav.g-nav-main-pc > ul > li > a.ico-arrow-down-blue {
        position: relative;
    }
    nav.g-nav-main-pc > ul > li > a.ico-arrow-down-blue::after {
        content: "";
        display: block;
        background-image: url(../img/ico-arrow-down-blue.svg);
        background-size: contain;
        background-repeat: no-repeat;
        position: absolute;
        top: 5px;
        right: 2vw;
        bottom: 0;
        margin: auto;
        height: 12px;
        width: 12px;
    }
    .g-nav-wrap.is-dropdown-visible nav.g-nav-main-pc > ul > li > a {
        opacity: .6;
    }
    
    .g-nav-wrap.is-dropdown-visible nav.g-nav-main-pc > ul > li.active > a {
        opacity: 1;
    }  
}


@media only screen and (min-width: 1200px) {
    nav.g-nav-main-pc > ul > li:not(:last-child) > a {
        padding-right: 40px;
    }
    
    nav.g-nav-main-pc > ul > li > a.ico-arrow-down-blue::after {
        right: 20px;
    }
}


@media (max-width:1024px) {
    ul.h-top-r {
        display: none;
    }
}

@media (min-width:1025px) {
    ul.h-top-r {
        align-items: center;
        display: -webkit-flex;
        display: -moz-flex;
        display: -ms-flex;
        display: -o-flex;
        display: flex;
        justify-content: flex-end;
        margin-right: 40px;
        padding-top: 10px;
    }
    ul.h-top-r li p {
        font-size: 1vw;
        letter-spacing: 0.05em;
        margin-right: 15px;
    }
    
    li.h-top-sns {
        background: #efefef;
        border-radius: 100vh;
        padding: 4px 20px 6px 20px;
    }
    li.h-top-sns span {
        display: inline-block;
        font-size: 1.2rem;
        font-weight: 700;
        margin-right: 15px;
    }
    li.h-top-sns a {
        position: relative;
        display: inline-block;
        z-index: 1;
    }
    li.h-top-sns img {
        vertical-align: middle;
    }
}

@media (min-width:1200px) {
    ul.h-top-r li p {
        font-size: 1.4rem;
    }
}


/* ドロップダウンメニュー */
.g-nav-dropdown-wrap {
    background-color: #ffffff;
    display: none;
    position: absolute;
    top: 70px;
    left: 0;
    width: 100%;
}

@media (max-width:1024px) {
    .g-nav-dropdown-wrap {
        overflow-y: scroll;
        padding: 20px 40px 150px 40px;
        margin-left: auto;
        margin-right: auto;
        height: 100vh;
    }
}

@media (min-width:1025px) {
    .g-nav-dropdown-wrap {
        background-color: transparent;
        box-shadow: none;
        display: block;
        top: 50px;
        padding: 0;
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
        will-change: transform;
        -webkit-transform: translateY(20px);
        -ms-transform: translateY(20px);
        transform: translateY(20px);
        -webkit-transition: -webkit-transform .3s;
        transition: -webkit-transform .3s;
        transition: transform .3s;
        transition: transform .3s, -webkit-transform .3s;
        width: auto;
    }

    .g-nav-wrap.is-dropdown-visible .g-nav-dropdown-wrap {
        -webkit-transform: translateY(0);
        -ms-transform: translateY(0);
        transform: translateY(0);
    }   
}


.g-nav-wrap.nav-open .g-nav-dropdown-wrap {
    display: block;
}



@media screen and (max-width: 1024px) {
    .g-nav-dropdown-list {
        max-width: 600px;
        margin-left: auto;
        margin-right: auto;
    }
}



@media screen and (min-width: 1025px) {
    .g-nav-dropdown-list {
        position: absolute;
        top: 0;
        left: 20px;
        visibility: hidden;
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
        will-change: transform, width, height;
        -webkit-transition: visibility .3s;
        transition: visibility .3s;
        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.08);
    }
    
    .no-csstransitions .g-nav-dropdown-list {
        display: none;
    }
    
    .g-nav-dropdown-list::before {
        /* 吹き出し▲ */
        content: '';
        position: absolute;
        bottom: 100%;
        left: 50%;
        right: auto;
        -webkit-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
        transform: translateX(-50%);
        height: 0;
        width: 0;
        border: 8px solid transparent;
        border-bottom-color: #ffffff;
        opacity: 0;
        -webkit-transition: opacity .3s;
        transition: opacity .3s;
    }
    
    .g-nav-wrap.is-dropdown-visible .g-nav-dropdown-list {
        visibility: visible;
        -webkit-transition: width .3s, height .3s, -webkit-transform .3s;
        transition: width .3s, height .3s, -webkit-transform .3s;
        transition: transform .3s, width .3s, height .3s;
        transition: transform .3s, width .3s, height .3s, -webkit-transform .3s;
    }
    
    .g-nav-wrap.is-dropdown-visible .g-nav-dropdown-list::before {
        opacity: 1;
    }

    .g-nav-dropdown-list > ul {
        position: relative;
        height: 100%;
        width: 100%;
        overflow: hidden;
        z-index: 1;
    }
}

.g-nav-dropdown-list > ul > li {
    margin-bottom: 20px;
}

@media (max-width:1024px) {
    .g-nav-dropdown-list > ul > li:not(:last-child) {
        border-bottom: solid 1px #aaaaaa;
        padding-bottom: 20px;
    }
 
    .g-nav-dropdown-list > ul > li:not(:first-child) a.label,.g-nav-dropdown-list > ul > li:not(:last-child) a.label{
        margin-bottom: 10px;
    }
    
    .g-nav-wrap .g-nav-dropdown-list > ul > li:first-child a.label::after,
    .g-nav-wrap .g-nav-dropdown-list > ul > li:last-child a.label::after{
        content:  '';
        display: block;
        background: url(../img/ico-arrow-right-blue.svg) no-repeat;
        background-size: contain;
        position: absolute;
        top: 0;    
        right: -20px;
        bottom: 2px;    
        margin: auto;
        height: 12px;
        width: 30px;
    }
    
    li.g-nav-dropdown-inquiry a.label{
        position: relative;
    }
    
    li.g-nav-dropdown-inquiry a.label::after{
        content:  '';
        display: block;
        background: url(../img/ico-arrow-right-blue.svg) no-repeat;
        background-size: contain;
        position: absolute;
        top: 0;    
        right: -20px;
        bottom: 2px;    
        margin: auto;
        height: 12px;
        width: 30px;
    }
}

.g-nav-dropdown-list > ul > li a.label{
    display: block;
    font-size: 1.8rem;
    font-weight: 500;
    position: relative;
}

@media (min-width:1025px){
    .g-nav-dropdown-list > ul > li a.label {
        display: none;
    }
}


@media (min-width:1025px) {
    /*---- ドロップダウンメニュー共通 ----*/ 
    .g-nav-wrap .g-nav-dropdown-contents {
        padding: 40px;
    }
    
    .g-nav-wrap .gallery .g-nav-dropdown-contents ul{
        display: -webkit-flex;
        display: -moz-flex;
        display: -ms-flex;
        display: -o-flex;
        display: flex;
        -webkit-flex-wrap: wrap;
        -moz-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
        -o-flex-wrap: wrap;
        flex-wrap: wrap;
        justify-content: space-between;
    }
    
    .g-nav-wrap .gallery .g-nav-dropdown-contents li:hover{
        opacity: 0.7;
    }
}

/* 各コンテンツレイアウト */

.g-nav-wrap .gallery .g-nav-dropdown-contents ul{
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    -moz-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    -o-flex-wrap: wrap;
    flex-wrap: wrap;
    justify-content: space-between;
}

.g-nav-wrap .gallery .g-nav-dropdown-contents a em {
    display: block;
    font-style:normal;
}

@media only screen and (min-width: 1025px) {
    .g-nav-wrap .dropdown {
        position: absolute;
        left: 0;
        top: 0;
        opacity: 0;
        visibility: hidden;
        width: 100%;
        -webkit-transition: opacity .3s, visibility .3s;
        transition: opacity .3s, visibility .3s;
    }
    
    .g-nav-wrap .dropdown.active {
        opacity: 1;
        visibility: visible;
    }
    
    .g-nav-wrap .dropdown.move-left .g-nav-dropdown-contents {
        -webkit-transform: translateX(-100px);
        -ms-transform: translateX(-100px);
        transform: translateX(-100px);
    }
    
    .g-nav-wrap .dropdown.move-right .g-nav-dropdown-contents {
        -webkit-transform: translateX(100px);
        -ms-transform: translateX(100px);
        transform: translateX(100px);
    }
    
    
    
    .g-nav-dropdown-contents {
        -webkit-transition: -webkit-transform .3s;
        transition: -webkit-transform .3s;
        transition: transform .3s;
        transition: transform .3s, -webkit-transform .3s;
        text-align: left;
    }
    .g-nav-dropdown-contents > ul::after {
        clear: both;
        content: "";
        display: block;
    }

    .g-nav-dropdown-contents > ul > li:nth-of-type(2n) {
        margin-right: 0;
    }
    
        
    .g-nav-wrap .lists .g-nav-dropdown-contents ul.links-list li a:hover{
        color: #1399DB;
    }
    
    .g-nav-wrap .lists .g-nav-dropdown-contents ul.links-list li a img:hover{
        opacity: 0.7;
    }
    
}

@media (min-width:1025px) {
    /*---- 商品紹介 ＆ レシピ ----*/
    .g-nav-wrap .gallery .g-nav-dropdown-contents {
        width: 500px;
    }     
    
}

/*---- 商品紹介 ----*/
.g-nav-products .g-nav-dropdown-contents li:first-child a em{
    margin-bottom: 20px;
    padding-top: 10px;
    width: 100%; 
}
    
.g-nav-products .g-nav-dropdown-contents li:not(:first-child){
    display: block;    
    width:  48%;
    margin-top: 16px;
}

@media (min-width:1025px){
    .g-nav-products .g-nav-dropdown-contents li:not(:first-child){
        width:  25%;
        }
}
 

.g-nav-products .g-nav-dropdown-contents li:not(:first-child) a > img{
    width: 80%;
    margin-right: auto;
    margin-left: auto;
    display: block;
}
    
.g-nav-products .g-nav-dropdown-contents li:not(:first-child) a em{  
    font-size: 1.6rem;
    padding-top: 10px;
    text-align: center;
}
    
    
.g-nav-products .g-nav-dropdown-contents li:not(:first-child) a em > img{
    display: inline-block;
    height: 12px;
    margin-left: 10px;
    padding-bottom: 2px;
    vertical-align:middle;
}
    
.g-nav-products .g-nav-dropdown-contents li .ico-arrow-right-blue{
    position: relative;
}

.g-nav-products .g-nav-dropdown-contents li:first-child .ico-arrow-right-blue::after{
    content:  '';
    display: block;
    background: url(../img/ico-arrow-right-blue.svg) no-repeat;
    background-size: contain;
    position: absolute;
    top: 0;    
    right: -20px;
    bottom: 0;    
    margin: auto;
    height: 12px;
    width: 30px;
}

@media (min-width:1025px){
    .g-nav-products .g-nav-dropdown-contents a em {
        font-size: 1.6rem;
    }
}

 /*---- レシピ ----*/  

.g-nav-recipe .g-nav-dropdown-contents li{
    width: 48%;
}

.g-nav-recipe .g-nav-dropdown-contents li:first-child{
    width: 100%;
}

.g-nav-recipe .g-nav-dropdown-contents li:nth-child(odd){
    margin-left: auto;
}


.g-nav-recipe .g-nav-dropdown-contents li:not(:nth-last-child(-n+2)){
    margin-bottom: 10px;
}

.g-nav-recipe .g-nav-dropdown-contents li a{
    display: block;
    height: 120px;
    position: relative;
}

.g-nav-recipe .g-nav-dropdown-contents li:first-child a{
    height: 160px;
}

.g-nav-recipe .g-nav-dropdown-contents li:first-child a{
    background:  url("../img/g-nav-recipe01.jpg") no-repeat;
    background-position: center;
    background-size: cover; 
}

.g-nav-recipe .g-nav-dropdown-contents li:nth-child(2) a{
    background:  url("../img/g-nav-recipe02.jpg") no-repeat;
    background-position: center;
    background-size: cover;
}


.g-nav-recipe .g-nav-dropdown-contents li:nth-child(3) a{
    background:  url("../img/g-nav-recipe05.jpg") no-repeat;
    background-position: center;
    background-size: cover;
}  
   
.g-nav-recipe .g-nav-dropdown-contents li:nth-child(4) a{
    background:  url("../img/g-nav-recipe03.jpg") no-repeat;
    background-position: center;
    background-size: cover;
} 

.g-nav-recipe .g-nav-dropdown-contents li:nth-child(5) a{
    background:  url("../img/g-nav-recipe04.jpg") no-repeat;
    background-position: center;
    background-size: cover;
}



@media (min-width:600px){
    .g-nav-recipe .g-nav-dropdown-contents li:first-child{
        margin-bottom: 20px;
        width: 100%;
    }
    
    .g-nav-recipe .g-nav-dropdown-contents li:not(:first-child){
        /*padding-right: 10px;*/
        width: 48%;
    }

    .g-nav-recipe .g-nav-dropdown-contents li:last-child{
        padding-right: 0px;
    }
    
    .g-nav-recipe .g-nav-dropdown-contents li:first-child a{
        height: 200px;
    }
    
    .g-nav-recipe .g-nav-dropdown-contents li:not(:first-child) a{
        height: 100px;
    }
    
}

.g-nav-recipe .g-nav-dropdown-contents li a em{
    background-color: rgba(255,255,255,0.7);
    padding: 5px 10px;
    position: absolute;
    bottom: 0;
    width: 100%;
}

.g-nav-recipe .g-nav-dropdown-contents li a em.ico-arrow-right-blue::after{
    content:  '';
    display: block;
    background: url(../img/ico-arrow-right-blue.svg)no-repeat;
    background-size: contain;
    position: absolute;
    top: 0;    
    right: -10px;
    bottom: 0;    
    margin: auto;
    height: 12px;
    width: 30px;
}



/*---- 会社案内＆採用情報 ----*/ 
.g-nav-wrap .links-list a{
    display: block;
}

@media (min-width:1025px){
    .g-nav-wrap .lists .g-nav-dropdown-contents {
        width: 400px;
    }
    
    .g-nav-wrap .links-list a {
        font-size: 1.6rem;
        margin-left: 0;
    }
}

/*---- 会社案内 ----*/ 
.g-nav-dropdown-contents ul.links-list li{
    margin-bottom: 15px;
}

.g-nav-wrap .company .g-nav-dropdown-contents ul.links-list li.flex{   
    align-items: center;
}


.g-nav-wrap .company .g-nav-dropdown-contents ul.links-list li.flex > a{  
    width: 40%;
}

.g-nav-wrap .company .g-nav-dropdown-contents ul.links-list li:first-child > span.flex{
    width: 55%;
    margin-left: auto;
    justify-content: space-around;
    background: #efefef;
    border-radius: 100vh;
    padding: 0px 15px;
}

.g-nav-wrap .company .g-nav-dropdown-contents ul.links-list li:first-child > span.flex p{
    margin-right: 5px;
}

.g-nav-wrap .company .g-nav-dropdown-contents ul.links-list li:first-child > span.flex img{
    vertical-align:middle;
    padding-top:2px;
    width: 18px;
    height: auto;
}

.g-nav-wrap .company .g-nav-dropdown-contents ul.links-list li:first-child > span.flex a{
    font-size: 1.4rem;
    font-weight: 500;
    line-height: 2;
}

.g-nav-dropdown-contents ul.links-list li a img{
    border: solid 1px #efefef;
    margin-bottom: 15px;
}

.g-nav-dropdown-contents ul.links-list li a:last-child img{
    margin-bottom: 0px;
}
.g-nav-dropdown-contents ul.links-list li a.ico-arrow-right-blue{  
    position: relative;
}
    
 .g-nav-dropdown-contents ul.links-list li a.ico-arrow-right-blue::after{
     content:  '';
     display: block;
     background: url(../img/ico-arrow-right-blue.svg)no-repeat;
     background-size: contain;
     position: absolute;
     top: 0;    
     right: -20px;
     bottom: 0;    
     margin: auto;
     height: 12px;
     width: 30px;    
}

@media (min-width:600px){
    .g-nav-dropdown-contents ul.links-list li:last-child{
        display: -webkit-flex;
        display: -moz-flex;
        display: -ms-flex;
        display: -o-flex;
        display: flex;
    }
    
    .g-nav-dropdown-contents ul.links-list li:last-child a:not(:last-child){
        margin-right: 10px;
    }
}


@media (min-width:1025px){
    .g-nav-dropdown-contents ul.links-list li:last-child{
        flex-direction: column;
    }
    .g-nav-dropdown-contents ul.links-list li:last-child a:not(:last-child){
        margin-right: 0px;
    }

    .g-nav-dropdown-contents ul.links-list li a:hover{
        color: #1399DB;
    }
    
    .g-nav-dropdown-contents ul.links-list li a img:hover{
        opacity: 0.7;
    }
}



/*---- 採用情報 ----*/ 



@media (min-width:1025px){
        .g-nav-wrap .bg-layer {
        /* morph dropdown background */
        position: absolute;
        top: 0;
        left: 0;
        height: 1px;
        width: 1px;
        background: #ffffff;
        opacity: 0;
        -webkit-transition: opacity .3s;
        transition: opacity .3s;
        -webkit-transform-origin: top left;
        -ms-transform-origin: top left;
        transform-origin: top left;
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
        will-change: transform;
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
    }
    
    .g-nav-wrap.is-dropdown-visible .bg-layer {
        opacity: 1;
        -webkit-transition: opacity .3s, -webkit-transform .3s;
        transition: opacity .3s, -webkit-transform .3s;
        transition: transform .3s, opacity .3s;
        transition: transform .3s, opacity .3s, -webkit-transform .3s;
    }
}


/*---- 公式SNS ----*/ 
li.g-nav-dropdown-sns span{
    display: inline-block;
    font-size: 1.4rem;
    font-weight: 700;
    margin-right: 15px;
}
li.g-nav-dropdown-sns img{
    vertical-align:middle;
    padding-bottom: 2px;
}
@media (min-width:1025px){
    li.g-nav-dropdown-sns{
        display: none;
    }
}

/*================================================
 *  main
 ================================================*/
main section:last-child{
    margin-bottom: 150px;
}

h2.subtitle{
    font-size: 3rem;
    font-weight: 600;
    margin-bottom: 24px;
    text-align: center;
}

h2.subtitle span{
    font-weight: 600;
}

h2.subtitle span.eng{
    color: #1399DB;
    display: block;
    font-size: 1.4rem;
    font-weight: 600;
    
}

@media (min-width:1025px){
    h2.subtitle{
        font-size: 4rem;
        margin-bottom: 40px;
    }

h2.subtitle span.eng{
    font-size: 1.6rem;
    padding-top: 10px;
    }
}

/*-------- お知らせ --------*/
/*---- タブ ----*/
.news-wrap {
    width: 100%;
}

[value="All"]:checked ~ .news-wrap [data-category] {
  display: block;
}
[value="ctg-products"]:checked ~ .news-wrap .target:not([data-category~="ctg-products"]), 
[value="ctg-company"]:checked ~ .news-wrap .target:not([data-category~="ctg-company"]), 
[value="ctg-press"]:checked ~ .news-wrap .target:not([data-category~="ctg-press"]){
  display: none;
}

/*  ラジオボタンを非表示に */
.news-tab input[type="radio"] {
  position: absolute;
  left: -9999px;
}

/*  以下はラベルのスタイル */
ul.filters {
    align-items: center;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    margin-bottom: 24px;
    width: 100%;
    justify-content: center;
    
}

ul.filters * {
  display: inline-block;
}

ul.filters li{
    width:  calc( 100% /4);
}

ul.filters li > label{
    background: #efefef;
    color: #000000;
    cursor: pointer;
    line-height: normal;
    min-width: 70px;
    min-height: 80px;
    order: -1;
    padding: 30px 0px;
    position: relative;
    text-align: center;
    transition: all 0.2s;
    width: 100%;
    font-size: 1.4rem;
    align-content: center;
    align-items: center;
}

ul.filters li:last-child > label{
    padding: 20px 0px;
}

@media (min-width:600px){
    ul.filters li:last-child > label{
        padding: 20px 0px;
    }
    
    ul.filters li:last-child > label br.max-499{
        display: none;
    }
}
@media (min-width:1025px){
    ul.filters li > label{
        font-size: 1.6rem;
        padding: 24px 0px;
    }
    
    ul.filters li:last-child > label{
        padding: 16px 0px;
    }
}

ul.filters label:hover {
  background: #1399db;
  color: #ffffff;
}


[value="All"]:checked ~ .filters [for="All"], 
[value="ctg-products"]:checked ~ .filters [for="ctg-products"], 
[value="ctg-company"]:checked ~ .filters [for="ctg-company"], 
[value="ctg-press"]:checked ~ .filters [for="ctg-press"]{
    background: #1399db;
    color: #ffffff;
    position: relative;
}

[value="All"]:checked ~ .filters [for="All"]::before, 
[value="ctg-products"]:checked ~ .filters [for="ctg-products"]::before, 
[value="ctg-company"]:checked ~ .filters [for="ctg-company"]::before, 
[value="ctg-press"]:checked ~ .filters [for="ctg-press"]::before{
    position: absolute;
    bottom: -8px;
    left: 50%;
    transform: translateX(-50%);
    width: 18px;
    height: 9px;
    background-color: #1399db;
    content: '';
    clip-path: polygon(0 0, 100% 0, 50% 100%);
}


/*---- お知らせ 中身 ----*/

ul.news-wrap li .news-head p.tag-area{
    color: #ffffff;
    font-size: 1.2rem;
    padding: 5px 0px;
    text-align: center;
    width: 120px;
}
ul.news-wrap li .news-head,ul.news-wrap li p.date{
    margin-right: 15px;
}

ul.news-wrap li .news-head p.tag-company{
    background: #67CDFF;
}

ul.news-wrap li .news-head p.tag-product{
    background: #FF9650
}

ul.news-wrap li .news-head p.tag-press{
    background: #3BC163;
}



 ul.news-wrap > li .news-head{
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex!important;
    -webkit-flex-wrap: wrap;
    -moz-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    -o-flex-wrap: wrap;
    flex-wrap: wrap;
    align-items: center;
}

ul.news-wrap > li .flex{
    width: 100%;
    
}

ul.news-wrap li .flex{
    border-bottom: solid 1px #aaaaaa;
    padding: 15px 0px;
}

ul.news-wrap li .flex .news-head{
        margin-bottom: 10px;
    }

@media (min-width:1025px) {
    ul.news-wrap li .flex .news-head{
        margin-bottom: 0px;
    }
    
    ul.news-wrap li .flex .news-detail{
        flex: 1;
    }
    
}


ul.news-wrap li .flex .news-detail {
    width: 100%;
}


ul.news-wrap li .flex .news-detail a{
    display: block;
    position: relative;
    padding-right: 20px;
}

ul.news-wrap li .flex .news-detail a:hover{
    color: #1399db;
}

ul.news-wrap li .flex .news-detail a:not(:last-child){
    margin-bottom: 15px;
}

ul.news-wrap li .flex .news-detail a.link_page::after{
    position: absolute;
    content:  '';
    display: block;
    background: url(../img/ico-arrow-right-blue.svg) no-repeat;
    background-size: contain;
    position: absolute;
    top: 0;    
    right: -20px;
    bottom: 0;    
    margin: auto;
    height: 12px;
    width: 30px;
}

ul.news-wrap li .flex .news-detail a.link_pdf::after{
    position: absolute;
    content:  '';
    display: block;
    background: url(../img/ico_pdf.svg) no-repeat;
    background-size: contain;
    position: absolute;
    top: 0;    
    right: -10px;
    bottom: 0;    
    margin: auto;
    height: 20px;
    width: 30px;
}



/*-------- 採用リクナビ --------*/
img.rikunabi-link{
    display: block;
    height: 50px!important;
    max-width: 240px!important;
    width: 100%;
    
    backface-visibility: hidden;
-webkit-backface-visibility: hidden;
}



/*

position(top/right/bottom/left含め）
display/overflow
z-index
float
height/width
padding/margin/border
background
color/text/font/line-height
cursor

*/



/*================================================
 *  footer
 ================================================*/
footer{
    z-index: 2;
}
.f-inner-wrap{
    background: #E3F1FA;
}

.f-inner{
    padding-bottom: 50px;
}

.f-logo{
    margin-bottom: 40px;
    max-width: 240px;
    width: 80%;
}

.f-links ul{
    border-bottom: solid 1px #aaaaaa;
    margin-bottom: 20px;
    width:100%;
}

.f-links ul:last-child{
    border-bottom: none;
}

.f-links ul li{
    margin-bottom: 15px;
    padding-left: 15px;
    
}
.f-links ul li:not(:first-child){
    display: none;
}

.f-links ul li.parent{
    position: relative;
    font-weight: 700;
}

.f-links ul li.parent::after{
    content:  '';
    display: block;
    background: url(../img/ico-arrow-right-blue.svg)no-repeat;
    background-size: contain;
    position: absolute;
    top: 0;   
    right: 0;  
    bottom: 0;
    margin: auto;
    height: 12px;
    width: 30px;  
}

.f-links ul li a{
    display: block;
}

.f-links ul li a span{
    display: inline-block;
}

@media (min-width:600px){
    .f-inner-wrap{
        padding-top: 50px;
    }
    
    .f-links ul{
        border-bottom:none;
        width: calc(100% / 3);
    }
    
    .f-links ul li:not(:first-child){
        display:inherit;
    }
    
    .f-links ul li.parent::before{
        content:  '';
        display: block;
        background: url(../img/ico-arrow-right-blue.svg)no-repeat;
        background-size: contain;
        position: absolute;
        top: 0;    
        bottom: 0;
        left: 0;  
        margin: auto;
        height: 12px;
        width: 30px;  
    }
    
    .f-links ul li.parent::after{
        display: none;
    }
    
    .f-links li.h-top-sns{
        background:#ffffff;
        border-radius: 100vh;
        padding: 4px 20px 6px 20px;
        width: 100%;
        text-align: center;
    }
    
    .f-links li.h-top-sns a{
        display: inline-block;
    }
    
    .f-links li.h-top-sns span {
        display: inline-block;
        font-size: 1.4rem;
        font-weight: 700;
        margin-right: 15px;
    }
    
    .f-links li.h-top-sns img {
        vertical-align: middle;
    }
}



@media  (min-width: 1025px) {
    footer a:hover{
        color: #1399DB;
    }
    
    .f-inner-wrap{
        padding-top: 0px;
    }
    
    .f-logo{
        margin-bottom: 40px;
    }
    
    .f-links.flex{
        justify-content: space-between;
    }
    .f-links ul{
        margin-bottom: 0px;
        width: auto;
    }
    
    .f-links ul li{
        margin-bottom: 15px;
    }
}

/* copyright */
address{
    background: #1399DB;
    color: #ffffff;
    padding-top: 20px;
    padding-bottom: 20px;
    font-style: normal;
    text-align: center;
}

address p:first-child{
    font-size: 1.4rem;
    margin-bottom: 10px;
    width: 100%;
}

address p span{
    color: #ffffff;
    display: inline-block;
}

address p span:first-child{
    margin-bottom: 10px;
}

.copyright{
    font-size: 1.4rem;
    width: 100%;
}


@media  (min-width: 1025px) {
    address .flex{
        align-items: flex-end;
        justify-content: space-between;
        text-align: left;
    }
    
    address p:first-child{
        font-size: 1.6rem;
        margin-bottom: 0px;
        width: auto;
    }
    
    address p span{
        margin-left: 10px;
    }
    
    .copyright{
        font-size: 1.6rem;
        width: auto;
    }
}


/*================================================
 *  animation
 ================================================*/
.js-fadein {
    opacity: 0;
    transform: translate(0,0);
    transition: all 1.5s;
}

.js-fadein.js-fadein-left{
    transform: translate(-30px,0);
}

.js-fadein.js-fadein-right{ 
    transform: translate(30px,0);
}   

.js-fadein.js-fadein-up{
    transform: translate(0,-30px);
}
        
.js-fadein.js-fadein-bottom{
    transform: translate(0,30px);
}
        
.js-fadein.js-scrollin{
    opacity: 1 !important;
    transform: translate(0, 0) !important;
}