/*--------------------------------
HEADER
--------------------------------*/
@media only screen and (max-width:1180px) {
    /* sp global navi */
    .gnav-pc {
        display: none;
    }
    .gnav-sp {
        display: block;
    }
    .gnav-wrap {
        position: fixed;
        top: 0;
        bottom: auto;
        left: 0;
        transform: translate(0,0);
        width: 100%;
        max-width: 100%;
        height: 5rem;
        z-index: 999;
    }
    .gnav-wrap.gnav-wrap_fixed {
        top: 0;
        width: 100%;
    }
    #drawer-list {
        display: block;
        flex-wrap: wrap;
        justify-content: none;
        height: 5.6rem;
        padding: 0;
    }

    /* drawer menu */
    #drawer {
        position: fixed;
        top:0;
        right: -120%;
        width:100%;
        height: 100vh;
        background: rgba(0, 0, 0, .5);
        transition: all 0.2s;
        z-index: 990;
    }
    #drawer.panelactive {
        right: 0;
    }
    #drawer-list {
        position: fixed;
        top:0;
        right: -120%;
        width: 40%;
        min-width: 320px;
        height: 100vh;
        background-color: #fff;
        transition: all 0.4s;
        z-index: 999;
    }

    #drawer.panelactive #drawer-list {
        right: 0;
        overflow: auto;
        -webkit-overflow-scrolling: touch;
    }

    #drawer-list .drawer-headding {
        height: 5rem;
        padding-left: 1rem;
        color: #179745;
        line-height: 5rem;
        border-bottom: solid 1px #179745;
    }

    /* hamburger */
    .hmb {
        position: absolute;
        z-index: 9999; /*ボタンを最前面に*/
        top: 0;
        right: 0;
        cursor: pointer;
        width: 5rem;
        height: 100%;
        transition: all 0.2s;
    }
    .hmb span {
        display: inline-block;
        transition: all .3s;
        position: absolute;
        height: 2px;
        transform: translate(-50%,-50%);
        background-color: #179745;
        width: 1.6rem;
    }
    .hmb span:nth-of-type(1) {
        top: 38%;
        left: 59%;
    }
    .hmb span:nth-of-type(2) {
        top: 50%;
        left: 50%;
    }
    .hmb span:nth-of-type(3) {
        top: 62%;
        left: 41%;
    }
    /* humburger x */
    .hmb.active span {
        background-color: #179745;
    }
    .hmb.active span:nth-of-type(1) {
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%) rotate(-45deg);
        width: 40%;
    }
    .hmb.active span:nth-of-type(2) {
        opacity: 0;
    }
    .hmb.active span:nth-of-type(3){
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%) rotate(45deg);
        width: 40%;
    }
    /* hmb open fixed */
    body.bg-fixed {
        height: 100%;
        overflow: hidden;
    }

    #drawer img {
        position: static;
    }

    /* Override desktop styles */
    .header__navigation .nav-1st {
        padding: 0;
        transition: none;
    }
    .header__navigation li.nav-1st a {
        position: static;
        display: block;
        padding: 0;
        text-decoration: none;
        color: inherit;
    }
    .header__navigation li.nav-1st > a::after {
        content: none;
    }
    .header__navigation li.nav-1st:hover {
        color: inherit;
    }
    /* MEGA MENU */
    .has-panel-wrapper {
        position: static;
        display: block;
    }

    .nav-panel,
    .nav-panel.include-image,
    .nav-panel.no-image {
        position: static;
        top: auto;
        left: auto;
        transform: none;
        width: auto;
        min-width: auto;
        max-width: none;
        background: none;
        z-index: auto;
        opacity: 1;
        visibility: visible;
        pointer-events: none;
    }
    .nav-panel__grid,
    .nav__item-second-sp,
    .nav__item-second-sp a {
        pointer-events: auto !important;
    }
    .nav-panel__title,
    .nav-panel__grid,
    .nav-panel__item,
    .nav-panel__item.text-only,
    .nav-panel__item--nheat,
    .nav-panel__overlay {
        all: unset;
    }
    .nav-panel__text,
    .nav-panel__text span {
        all: unset;
    }
    .has-panel-wrapper.is-open .nav-panel,
    .has-panel-wrapper.is-open .nav-panel__overlay {
        opacity: 1;
        visibility: visible;
        pointer-events: none;
    }


    .nav-panel.text-only {
        all: unset !important;
        width: 100% !important;
    }
    .nav-panel__item.text-only {
        all: unset !important;
        padding: 1rem !important;
    }
    .nav-panel__item.text-only:hover {
        color: inherit !important;
        background: none !important;
        cursor: default !important;
    }    

    

    /* sp styles */
    /* first */
    .nav__item-sp {
        width: 100%;
        margin: 0;
        border-bottom: solid 1px #B0B0B0;
    }
    .nav__item-sp:first-child {
        border-top: solid 1px #B0B0B0;
    }

    .nav__toggle-title-sp {
        position: relative;
        padding: 1rem 2.4rem 1rem 1rem;
        cursor: pointer;
        transition: all 0.3s;
    }

    .nav__toggle-icon-sp {
        position: absolute;
        top: 50%;
        right: 0.5rem;
        transform: translateY(-50%);
        display: block;
        width: 1rem;
        height: 1rem;
        transition: all 0.3s ease;
    }
    .nav__toggle-icon-sp::before,
    .nav__toggle-icon-sp::after {
        content: '';
        position: absolute;
        background-color: #179745;
        transition: 0.3s;
    }

    .nav__toggle-icon-sp::before {
        width: 2px;
        height: 1rem;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
    .nav__toggle-icon-sp::after {
        width: 1rem;
        height: 2px;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    .nav__toggle-title-sp:hover {
        color: #fff;
        background-color: #4CC74B;
    }
    .nav__toggle-title-sp:hover .nav__toggle-icon-sp::before,
    .nav__toggle-title-sp:hover .nav__toggle-icon-sp::after {
        background-color: #fff;
    }

    .nav__item-sp.link a {
        display: block;
        position: relative;
        padding: 1rem !important;
        text-decoration: none;
        transition: all 0.3s;
    }
    .nav__item-sp.link a:hover {
        color: #fff;
        background-color: #4CC74B;
    }
    .nav__item-sp.link {
        position: relative;
    }

    .nav__content-sp {
        display: none;
        background-color: #F1FFF4;
    }

    /* second */
    .nav__item-second-sp {
        width: 100%;
        min-height: 10rem;
        margin: 0;
        background-color: #fff;
        border: solid 1px #179745;
    }
    .nav__item-second-sp .nav-panel__item {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        height: 100% !important;
        padding: 1rem !important;
        box-sizing: border-box;
    }
    .nav-panel__item img {
        display: block;
        margin: 0 auto;
        width: 100px;
        height: auto;
        max-height: 80px;
        object-fit: contain;
        flex-shrink: 0;
    }
    .nav-panel__text {
        position: relative;
        padding: 0 0 .5rem .8rem !important;
        flex: 1;
        font-size: .875rem;
    }
    .nav-panel__text::after {
        content: '';
        position: absolute;
        top: .6rem;
        left: 0;
        transform: translateY(-50%);
        width: .4rem;
        height: 2px;
        background: #000;
    }
    .nav-panel__text span {
        font-size: 1rem;
    }

    /* Nヒートシリーズ */
    .nav-panel__item--nheat {
        color: #000;
    }
    .nav-panel__item--nheat .nav-panel__text,
    .nav-panel__item--nheat .nav-panel__text span {
        color: #000;
    }

    .nav__toggle-title-second-sp {
        position: relative;
        padding: 1rem 2.4rem 1rem 1rem;
        cursor: pointer;
        transition: all 0.3s;
    }

    .nav__item-second-sp.link a {
        display: block;
        position: relative;
        padding: 1rem .6rem !important;
        text-decoration: none;
        transition: all 0.3s;
    }
    .nav__item-second-sp.link a::after {
        content: '→';
        position: absolute;
        top: 50%;
        right: 0.5rem;
        transform: translateY(-50%);
        font-size: 0.9em;
        color: #179745;
    }

    /* selected */
    .nav__toggle-title-sp.selected {
        color: #fff;
        background-color: #4CC74B;
    }
    .nav__toggle-title-sp.selected .nav__toggle-icon-sp {
        transform: translateY(-50%) rotate(90deg);
    }
    .nav__toggle-title-sp.selected .nav__toggle-icon-sp::before {
        background-color: #fff;
    }
    .nav__toggle-title-sp.selected .nav__toggle-icon-sp::after {
        content: normal;
    }

    .nav-panel__grid{
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: .7rem;
        padding: 1.6rem 1.4rem;
        background-color: #F1FFF4;
    }
    .text-only .nav-panel__grid{
        gap: 0;
        padding: 1.6rem 1.4rem;
    }

}

@media only screen and (max-width:480px) {
    #drawer-list {
        width: 100%;
    }
}

@media only screen and (max-width:768px) {
    .header__logo {
        width: 117px;
    }
    .header__logo-50th {
        width: 90px;
    }

    .gnav-wrap {
        height: 4.4rem;
    }
    #drawer-list .drawer-headding {
        height: 4.4rem;
        line-height: 4.4rem;
    }
}

/*--------------------------------
LAYOUT
--------------------------------*/
@media only screen and (max-width:768px) {
    .u-pc {display: none;}
    .u-sp {display: block;}
}

@media only screen and (max-width:768px) {
    .page__inner--wide97 {width: 93%; margin: 0 auto;}
    .page__inner--wide75 {width: 90%; margin: 0 auto;}
    .page__inner--wide70 {width: 90%; margin: 0 auto;}
    .page__inner--wide65 {width: 90%; margin: 0 auto;}
    .page__inner--wide60 {width: 90%; margin: 0 auto;}
    .page__inner--wide55 {width: 90%; margin: 0 auto;}
    .page__inner--wide50 {width: 90%; margin: 0 auto;}
    .page__inner--wide45 {width: 90%; margin: 0 auto;}
    .page__inner--wide40 {width: 90%; margin: 0 auto;}
    .page__inner--wide35 {width: 90%; margin: 0 auto;}
    .page__inner--wide30 {width: 90%; margin: 0 auto;}
}

@media only screen and (max-width:959px) {
    .page__layout--main {
        width: 100%;
    }
    .page__layout--side {
        width: 100%;
        margin-top: 3rem;
    }
}

/* -----------------------
COMMON
-------------------------- */
@media only screen and (max-width:768px) {
    .main {
        padding: 0 0 6rem;
    }
}

/* -----------------------
HEADDING
-------------------------- */
@media only screen and (max-width:768px) {
    .section__copy {
        line-height: 1.4em;
        text-align: center;
    }
}

/* -----------------------
SIDE NAVIGATION
-------------------------- */
@media only screen and (max-width:959px) {
    .side-nav {
        width: 100%;
    }
}

/* -----------------------
TABLE
-------------------------- */
@media only screen and (max-width:768px) {
    /* 縦並び */
    .table-horizontal th,
    .table-horizontal td {
        display: block;
        width: 100%;
    }
    .table-horizontal th {
        border-right: solid 1px #179745;
    }
    .table-horizontal-pc {
        display: none;
    }
    
    /* 横並び */
    .table-vertical th,
    .table-vertical td {
        display: block;
        width: 100%;
    }
    .table-vertical th {
        border-top: solid 1px #179745;
    }
    .table-vertical td {
        border-width: 1px 1px 0 1px;
    }
}

/*--------------------------------
BREADCRUMB
--------------------------------*/
@media only screen and (max-width:960px) {
    .breadcrumb {
        margin: 2rem 0;
    }
}

/*--------------------------------
FOOTER
--------------------------------*/
@media only screen and (max-width:1180px) {
    .footer__navigation--download li {
        width: 30%;
    }
    .footer__navigation--link li {
        width: 30%;
    }
    .footer__navigation-logo {
        min-height: 160px;
    }
    .footer__logo {
        width: calc(267px * .7);
        height: 100%;
    }
    .footer__logo-50th {
        width: calc((267px * .7) * .7);
    }
}
@media only screen and (max-width:768px) {
    .footer__navigation--download li {
        width: calc(50% - 2.2rem);
    }
    .footer__navigation--link li {
        width: calc(50% - 2.2rem);
    }
    .footer__navigation-logo {
        min-height: 140px;
    }
    .footer__logo {
        width: calc(267px * .6);
        height: 100%;
    }
    .footer__logo-50th {
        width: calc((267px * .6) * .7);
    }
}
@media only screen and (max-width:640px) {
    .footer__navigation--download li {
        background-position: left top;
        background-size: auto 26px;
    }
    .footer__navigation-logo {
        min-height: 100px;
    }
    .footer__logo {
        width: calc(267px * .5);
        height: 100%;
    }
    .footer__logo-50th {
        width: calc((267px * .5) * .7);
    }
    .br__footer--download {
        display: none;
    }
}


/*--------------------------------
PRODUCTS LIST
--------------------------------*/
@media only screen and (max-width:640px) {
    .products_list li {
        width: calc((100% - 1.4rem) / 2);
    }
    .products_list li img {
        max-height: 180px;
    }
}

@media only screen and (max-width:420px) {
    .products_list li {
        padding: 0 1rem 3rem;
    }
}

/*--------------------------------
NSPCOM LIST
--------------------------------*/
@media only screen and (max-width:640px) {
    .nspcom__meta--date {
        padding: 0 0 1.4rem !important;
    }
    .nspcom__content {
        flex: 1;
        min-width: 200px;
        margin-bottom: 3.4rem;
    }
}

/*--------------------------------
TOP
--------------------------------*/
@media only screen and (max-width:1180px) {
    /* HERO COPY */
    .hero__copy {
        font-size: clamp(22px, 6.75vw, 88px);
    }
}
@media only screen and (max-width:768px) {
    .hero__content-copy {
        margin-top: -1.2rem;
    }

    /* TOP CONCEPT */
    .section-concept {
        margin-bottom: 8rem;
        padding: 4rem 0 11rem;
    }
    .section-concept .section__copy {
        margin: 3.3rem 0 2.6rem;
    }
}
@media only screen and (max-width:680px) {
    /* PER-ITEM */
    .circle-button--concept,
    .circle-button--products {
        width: 4.6rem;
        height: 4.6rem;
    }

    /* TOP CONCEPT */
    .section-concept {
        margin-bottom: 6rem;
        padding: 3rem 0 8rem;
    }

    /* TOP PRODUCTS */
    .section-products {
        padding: 6rem 0 0;
    }

    .search-form--products {
        margin: 2rem 0 1rem;
    }

    .search__keyword--products {
        width: 100%;
        height: 42px;
        padding: 0;
    }
    .search-button--products {
        width: 66px;
        height: 42px;
    }
    .search-button--products .material-icons {
        font-size: 20px !important;
    }

    .list__products-tag {
        margin-bottom: 2rem;
    }

    .list__products-category {
        width: 100%;
        margin-bottom: 1rem;
    }
    .list__products-category li {
        width: calc(100% / 2);
    }

    .circle-button--products {
        border: none;
        border-radius: 0;
    }
    /* PER-ITEM */
    .circle-button--products {
        width: 100%;
        height: 2.8rem;
    }

    .products_slider {
        margin-top: 2em;
    }
    .products_slider li img {
        height: auto;
        min-height: 80px;
    }
    .section-products .swiper-button-next,
    .section-products .swiper-button-prev {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        bottom: auto;
    }
    .section-products .swiper-button-next {
        right: 3%;
    }
    .section-products .swiper-button-prev {
        left: 3%;
        right: auto;
    }

    /* TOP TOPICS */
    .section-topics {
        padding: 6rem 0 6rem;
    }

    .section__title--topics {
        left: 33%;
        width: 3.4rem;
        height: 3.4rem;
    }
    .list__topics-category {
        width: 80%;
    }
    .list__topics-category li {
        width: calc(100% / 2);
    }
}

/*--------------------------------
SITE MAP
--------------------------------*/
@media only screen and (max-width:768px) {
    .sitemap_list {
        grid-template-columns: repeat(2, 1fr); /* 3カラム */
    }
}
@media only screen and (max-width:640px) {
    .sitemap_list {
        grid-template-columns: repeat(1, 1fr); /* 3カラム */
    }
}

/* -----------------------
UTILITY
-------------------------- */
@media only screen and (max-width:840px) {
    .u-w45sp-start {width: 45%;}
}
@media only screen and (max-width:480px) {
}

@media only screen and (max-width:640px) {
    .u-w23 {width:  48%;}

    .u-w05 {width: 100%;}
    .u-w10 {width: 100%;}
    .u-w15 {width: 100%;}
    .u-w20 {width: 100%;}
    .u-w25 {width: 100%;}
    .u-w30 {width: 100%;}
    .u-w35 {width: 100%;}
    .u-w40 {width: 100%;}
    .u-w45 {width: 100%;}
    .u-w50 {width: 100%;}
    .u-w55 {width: 100%;}
    .u-w60 {width: 100%;}
    .u-w65 {width: 100%;}
    .u-w70 {width: 100%;}
    .u-w75 {width: 100%;}
    .u-w80 {width: 100%;}
    .u-w85 {width: 100%;}
    .u-w90 {width: 100%;}
    .u-w95 {width: 100%;}
    .u-w100 {width: 100%;}

    .u-mt05sp {margin-top: .5rem !important;}
    .u-mt10sp {margin-top: 1.0rem !important;}
    .u-mt15sp {margin-top: 1.5rem !important;}
    .u-mt20sp {margin-top: 2.0rem !important;}
    .u-mt25sp {margin-top: 2.5rem !important;}
    .u-mt30sp {margin-top: 3.0rem !important;}
    .u-mt35sp {margin-top: 3.5rem !important;}
    .u-mt40sp {margin-top: 4.0rem !important;}
    .u-mt45sp {margin-top: 4.5rem !important;}
    .u-mt50sp {margin-top: 5.0rem !important;}
    .u-mt55sp {margin-top: 5.5rem !important;}
    .u-mt60sp {margin-top: 6.0rem !important;}
    .u-mt65sp {margin-top: 6.5rem !important;}
    .u-mt70sp {margin-top: 7.0rem !important;}
    .u-mt75sp {margin-top: 7.5rem !important;}
    .u-mt80sp {margin-top: 8.0rem !important;}
    .u-mt85sp {margin-top: 8.5rem !important;}
    .u-mt90sp {margin-top: 9.0rem !important;}
    .u-mt95sp {margin-top: 9.5rem !important;}
    .u-mt100sp {margin-top: 10.0rem !important;}
    .u-mt105sp {margin-top: 10.5rem !important;}
    .u-mt110sp {margin-top: 11.0rem !important;}
    .u-mt115sp {margin-top: 11.5rem !important;}
    .u-mt120sp {margin-top: 12.0rem !important;}
    .u-mt125sp {margin-top: 12.5rem !important;}
    .u-mt130sp {margin-top: 13.0rem !important;}
    .u-mt135sp {margin-top: 13.5rem !important;}
    .u-mt140sp {margin-top: 14.0rem !important;}
    .u-mt145sp {margin-top: 14.5rem !important;}
    .u-mt150sp {margin-top: 15.0rem !important;}

    .u-mb05sp {margin-bottom: .5rem !important;}
    .u-mb10sp {margin-bottom: 1.0rem !important;}
    .u-mb15sp {margin-bottom: 1.5rem !important;}
    .u-mb20sp {margin-bottom: 2.0rem !important;}
    .u-mb25sp {margin-bottom: 2.5rem !important;}
    .u-mb30sp {margin-bottom: 3.0rem !important;}
    .u-mb35sp {margin-bottom: 3.5rem !important;}
    .u-mb40sp {margin-bottom: 4.0rem !important;}
    .u-mb45sp {margin-bottom: 4.5rem !important;}
    .u-mb50sp {margin-bottom: 5.0rem !important;}
    .u-mb55sp {margin-bottom: 5.5rem !important;}
    .u-mb60sp {margin-bottom: 6.0rem !important;}
    .u-mb65sp {margin-bottom: 6.5rem !important;}
    .u-mb70sp {margin-bottom: 7.0rem !important;}
    .u-mb75sp {margin-bottom: 7.5rem !important;}
    .u-mb80sp {margin-bottom: 8.0rem !important;}
    .u-mb85sp {margin-bottom: 8.5rem !important;}
    .u-mb90sp {margin-bottom: 9.0rem !important;}
    .u-mb95sp {margin-bottom: 9.5rem !important;}
    .u-mb100sp {margin-bottom: 10.0rem !important;}
    .u-mb105sp {margin-bottom: 10.5rem !important;}
    .u-mb110sp {margin-bottom: 11.0rem !important;}
    .u-mb115sp {margin-bottom: 11.5rem !important;}
    .u-mb120sp {margin-bottom: 12.0rem !important;}
    .u-mb125sp {margin-bottom: 12.5rem !important;}
    .u-mb130sp {margin-bottom: 13.0rem !important;}
    .u-mb135sp {margin-bottom: 13.5rem !important;}
    .u-mb140sp {margin-bottom: 14.0rem !important;}
    .u-mb145sp {margin-bottom: 14.5rem !important;}
    .u-mb150sp {margin-bottom: 15.0rem !important;}

    .u-w05sp {width: 5%; margin: 0 auto;}
    .u-w10sp {width: 10%; margin: 0 auto;}
    .u-w15sp {width: 15%; margin: 0 auto;}
    .u-w20sp {width: 20%; margin: 0 auto;}
    .u-w23sp {width: 23%; margin: 0 auto;}
    .u-w25sp {width: 25%; margin: 0 auto;}
    .u-w30sp {width: 30%; margin: 0 auto;}
    .u-w35sp {width: 35%; margin: 0 auto;}
    .u-w40sp {width: 40%; margin: 0 auto;}
    .u-w45sp {width: 45%; margin: 0 auto;}
    .u-w50sp {width: 50%; margin: 0 auto;}
    .u-w55sp {width: 55%; margin: 0 auto;}
    .u-w60sp {width: 60%; margin: 0 auto;}
    .u-w65sp {width: 65%; margin: 0 auto;}
    .u-w70sp {width: 70%; margin: 0 auto;}
    .u-w75sp {width: 75%; margin: 0 auto;}
    .u-w80sp {width: 80%; margin: 0 auto;}
    .u-w85sp {width: 85%; margin: 0 auto;}
    .u-w90sp {width: 90%; margin: 0 auto;}
    .u-w95sp {width: 95%; margin: 0 auto;}
    .u-w100sp {width: 100%; margin: 0 auto;}
}