@media screen and (max-width: 768px){

    /*========= ナビゲーションのためのCSS ===============*/

    #sp_gnav{
        /*position:fixed;にし、z-indexの数値を大きくして前面へ*/
        position:fixed;
        z-index: 999;
        /*ナビのスタート位置と形状*/
        top:0;
        right: -120%;
        width:100%;
        height: 100vh;/*ナビの高さ*/
        background:#999;
        /*動き*/
        transition: all 0.3s;
    }

    /*アクティブクラスがついたら位置を0に*/
    /*#sp_gnav.panelactive{
        right: 0;
    }*/

    /*ナビゲーションの縦スクロール*/
    #sp_gnav.panelactive #g_nav_list{
        /*ナビの数が増えた場合縦スクロール*/
        position: fixed;
        z-index: 999; 
        width: 100%;
        height: 100vh;/*表示する高さ*/
        overflow: auto;
        -webkit-overflow-scrolling: touch;
    }


    /*========= ボタンのためのCSS ===============*/
    .sp_gnav_btn {
        position: absolute;
        z-index: 9999;
        top: 5px;
        right: 5px;
        cursor: pointer;
        /*width: 55px;
        height: 52px;*/
		width: 55px;
        height: 55px;
		border-radius: 50%;
		background: #fff;
    } 
	
	header.header_active2 .sp_gnav_btn {
        box-shadow: 0 2px 10px rgb(21 60 110 / 10%);
    }
	
    .sp_gnav_btn span{
        display: inline-block;
        transition: all .4s;
        position: absolute;
		left: 17px;
        height: 2px;
		background-color: #333;
        width: 21px;
    }
    
    header.header_active .sp_gnav_btn span,
    .drawer_open .sp_gnav_btn span{
        border-bottom-color: #333;
    }
    
    .sp_gnav_btn span:nth-of-type(1) {
        top: 19px; 
    }
    .sp_gnav_btn span:nth-of-type(2) {
        top: 27px;
    }
    .sp_gnav_btn span:nth-of-type(3) {
        top: 35px;
    }
    
    /*×に変化*/
    .sp_gnav_btn.active{
    }
    .sp_gnav_btn.active span:nth-of-type(1) {
		top: 20px;
        left: 18px;
        transform: translateY(6px) rotate(-45deg);
        width: 22px;
    }
    .sp_gnav_btn.active span:nth-of-type(2) {
        opacity: 0;
    }
    .sp_gnav_btn.active span:nth-of-type(3){        
		top: 32px;
        left: 18px;
        transform: translateY(-6px) rotate(45deg);
        width: 22px;
    }
    
	.sp_gnav_btn .menu-txt {
		position: absolute;
        left: 50%;
        transform: translateX(-50%);
        -webkit-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
        top: 35px;
        font-size: 1.0rem;
        color: #333;
        transition-duration: 0.5s;
        width: auto;
        white-space: nowrap;
		text-align: center;
    	display: inline-block;
		font-weight: bold;
    }
    /*    spナビ
    ---------------------*/
    #sp_gnav {
        width:100%;
        height:100%;
        overflow:hidden;
        overflow-y: hidden;
        position:fixed;
        top:0;
        margin:0 auto;
        box-sizing:border-box;
        z-index:150;
        opacity:1.0;
        background: #fff;
    }
    
    #g_nav_list {
        padding: 30px 20px 0;
    }
    
    #sp_gnav .drawer_nav_inner {
        list-style:none;
        text-align: left;
        height: 100vh;
    }
    
    #sp_gnav .drawer_nav_inner li.btm_first {
        margin: 50px 0 0 0;
    }
    
    #sp_gnav .drawer_nav_inner li.btm_first a {
        border-top: 1px solid #e8e4e1
    }
    
    #sp_gnav .drawer_nav_inner > li:last-child {
        padding-bottom: 150px!important;
    }
    
    /*drawer-nav-top ---------------------------------*/
    .drawer_nav_top {
        margin: 60px 0 20px 0;
    }
    
    .drawer_nav_top .nav_top_subttl {
        font-weight: bold;
        font-size: 2.6rem;
        line-height: 1;
        letter-spacing: .03em;
        position: relative;
        padding: 0 0 0 35px;
        margin: 35px 0 5px;
    }
    
    .drawer_nav_top .nav_top_subttl::before{
        content: "";
        background: url("../img/cmn-ttl-wave.svg")center/contain no-repeat;
        width: 30px;
        height: 9px;
        left: 0;
        position: absolute;
        top: 50%;
        -webkit-transform: translateY(-50%);
        transform: translateY(-50%);
    }
    
    .drawer_nav_top .nav_top_list {
        border-top: 1px solid #ddd;
        display: flex;
        flex-direction: column;
        margin: 15px 0 0;
    }
    
    .drawer_nav_top .nav_top_item_ttl {
        align-items: center;
        display: flex;
        flex-grow: 1;
        flex-wrap: wrap;
        position: relative;
        font-size: 1.8rem;
        font-weight: bold;
        padding: 0 25px 0 0;
        line-height: 1.3;
    }
    
   /* .nav_top_list_product_wrap .nav_top_list_product:first-of-type .nav_top_item_ttl .name::before {
        content: "キッチン商品";
    }
    
    .nav_top_list_product_wrap .nav_top_list_product:nth-of-type(2) .nav_top_item_ttl .name::before {
        content: "水回りの商品";
    }
    
    .nav_top_list_product_wrap .nav_top_list_product:nth-of-type(3) .nav_top_item_ttl .name::before {
        content: "その他住宅設備";
    }*/
    
    .drawer_nav_top .drawer_eco .nav_top_item_ttl {
        font-size: 1.6rem;
    }
    
    .drawer_nav_top .nav_top_list .nav_top_txt_small {
        font-size: 1.2rem;
        font-weight: 500;
        width: 100%;
        margin: 0 0 5px;
        display: block;
    }
    
    .drawer_accordion {
        display: none;
    }
    
    .drawer_default_list a::before{
        background: var(--main);
        content: "";
        height: 2px;
        position: absolute;
        top: 48%;
        -webkit-transform: translateY(-50%);
        transform: translateY(-50%);
        width: 12px;
        left: 15px;
    }
    
    /*drawer_menu_ttl---------------------------------------*/
    .drawer_menu_ttl {
        align-items: center;
        display: flex;
        gap: 10px;
    }
    
    .drawer_menu_ttl .plus {
        position: absolute;
        top: 50%;
        -webkit-transform: translateY(-50%);
        transform: translateY(-50%);
        right: 0;
        height: 24px;
        width: 24px;
    }
    
    .drawer_kitchen .drawer_menu_ttl .plus{
        background: var(--main);
    }
    
    .drawer_wetarea .drawer_menu_ttl .plus{
        background: var(--main);
    }
    
    .drawer_eco .drawer_menu_ttl .plus{
        background: var(cate3);
    }
    
    .drawer_menu_ttl .plus span {
        position: relative;
        display: block;
        height: 100%;
        width: 100%;
    }
    
    .drawer_menu_ttl .plus span::after,
    .drawer_menu_ttl .plus span::before {
        background: #fff;
        border-radius: 1px;
        content: "";
        position: absolute;
        transition: all .3s;
    }
    
    .drawer_default .drawer_menu_ttl .plus span::after,
    .drawer_default .drawer_menu_ttl .plus span::before{
        background: var(--main)!important;
    }
    
    .drawer_menu_ttl .plus span::after {
        height: 15px;
        right: 11px;
        top: 5px;
        width: 1px;
    }
    
    .drawer_menu_ttl .plus span::before {
        height: 1px;
        right: 4px;
        width: 15px;
        top: 50%;
        -webkit-transform: translateY(-50%);
        transform: translateY(-50%);
    }
	
	.nav_center_item.is_menu.drawer_default.menu_active .drawer_menu_ttl .plus span::after {
        transform: rotate(90deg);
    }
    
    .nav_top_item.menu_active .plus span::after {
        transform: rotate(90deg);
    }

    /*drawer_accordion_service-------------------------*/
    .drawer_accordion_service {
        background: #f5f5f5;
    }
    
    .drawer_kitchen_list .drawer_accordion_service {
        background: var(--bg-blue);
    }
    
    .drawer_wetarea_list .drawer_accordion_service {
        background: var(--bg-gray);
    }
    
    .drawer_eco_list .drawer_accordion_service {
        background: #F2F7ED;
    }

    .drawer_accordion_service a {
        align-items: center;
        border-bottom: 1px solid #ddd;
        color: #333;
        display: flex;
		height: 50px;
        font-size: 1.5rem;
        padding: 3px 10px 5px 35px;
        position: relative;
        width: 100%;
        line-height: 1.4;
    }
    
    .drawer_accordion_service li:last-child a {
        border-bottom: none;
    }
    
    .drawer_accordion_service a::before {
        content: "";
        height: 2px;
        position: absolute;
        top: 48%;
        -webkit-transform: translateY(-50%);
        transform: translateY(-50%);
        width: 12px;
        left: 15px;
    }
    
    .drawer_kitchen ~ .drawer_accordion a::before {
        background: var(--main);
    }
    
    .drawer_wetarea ~ .drawer_accordion a::before {
        background: var(--main);
    }
    
    .drawer_eco ~ .drawer_accordion a::before {
        background: var(cate3);
    }
    
    /*nav_product_list--------------------------------*/
    .drawer_accordion .nav_product_list {
        display: flex;
        gap: 15px;
        flex-wrap: wrap;
        padding: 25px 0;
    }

    .drawer_accordion .nav_product_list a{
        width: calc( ( 100% - 15px ) / 2 );
        align-items: center;
        display: flex;
        gap:3px;
        font-size: 1.5rem;
        line-height: 1.3;
        color: #333;
        /*background: #fff;*/
        flex-direction: column;
    }
    
    .nav_top_list_product .drawer_default .drawer_menu_ttl .plus span::before,
    .nav_top_list_product .drawer_default .drawer_menu_ttl .plus span::after{
        background: #fff!important;
    }
    
    .nav_top_list_product_wrap .nav_top_list_product:first-of-type .drawer_menu_ttl .plus{
        background: var(--cate1);
    }
    
     .nav_top_list_product_wrap .nav_top_list_product:nth-of-type(2) .drawer_menu_ttl .plus{
        background: var(--cate2);
    }
    
     .nav_top_list_product_wrap .nav_top_list_product:nth-of-type(3) .drawer_menu_ttl .plus{
        background: var(cate3);
    }
    
    .drawer_accordion .nav_product_list .thumb{
        display: block;
        flex-shrink: 0;
        width: 100%;
        height: 85px;
    }
    
    .drawer_accordion .nav_product_list .thumb img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .drawer_nav_top .nav_top_item {
        border-bottom: 1px solid #e3e3e3;
        padding: 15px 0 15px 0;
    }
    
    .drawer_nav_top img {
        aspect-ratio: 1/0.583;
        width: 100px;
    }
    
    .nav_top_list_product .drawer_product_bg {
        width: 100px;
        height: 58.3px;
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
    }
    
    .nav_top_list_product_wrap .nav_top_list_product:nth-of-type(2),
    .nav_top_list_product_wrap .nav_top_list_product:nth-of-type(3){
        border-top: none;
        margin: 0;
    }
    
    .nav_top_list_product_wrap .nav_top_list_product:first-of-type .drawer_product_bg{
        background-image: url(../img/drawer-sp4.jpg);
    }
    
    .nav_top_list_product_wrap .nav_top_list_product:nth-of-type(2) .drawer_product_bg{
        background-image: url(../img/drawer-sp5.jpg);
    }
    
    .nav_top_list_product_wrap .nav_top_list_product:nth-of-type(3) .drawer_product_bg{
        background-image: url(../img/drawer-sp6.jpg);
    }
    
    .drawer_nav_top .nav_top_txt_small {
        font-size: 1.2rem;
        line-height: 1.3;
        padding: 0 20px 0 0;
    }
    
    /*nav_center_list-----------------------------------------*/
    .drawer_nav_center {
        border-top: 1px solid #e3e3e3;
        margin: 0px 0 0;
    }
    
    .drawer_nav_center .nav_center_item {
        border-bottom: 1px solid #e3e3e3;
        padding: 15px 0 15px 0;
    }
    
    .drawer_nav_center .nav_center_item img {
        aspect-ratio: 1/0.583;
        width: 100px;
        margin: 0;
    }
    
    .drawer_nav_center .nav_center_item:not(.is_menu) a::after {
        display: block;
        content: "\f105";
        color: var(--main);
        font-weight: 900;
        font-family: var(--webicon);
        position: absolute;
        top: 50%;
        -webkit-transform: translateY(-50%);
        transform: translateY(-50%);
        right: 5px;
    }
    
    .drawer_nav_center .nav_center_ttl{
        align-items: center;
        display: flex;
        color: #333;
        font-size: 1.6rem;
        font-weight: bold;
        gap: 10px;
        position: relative;
        padding: 0 25px 0 0;
        line-height: 1.3;
    }
    
    .drawer_nav_center .nav_center_item_ttl {
		font-size: 1.6rem;
        line-height: 1.3;
    }
    
    .drawer_nav_center .nav_center_item.seminar-link .nav_center_item_ttl::after{
            content: "\f08e";
		font-family: 'FontAwesome';
		font-size: 1.4rem;
		font-weight: normal;
		color: var(--cmnblack);
		padding: 0 0 0 5px;
    }
    .drawer_nav_center .drawer_accordion {
        background: #F4F6F8;
    }
    
    .drawer_nav_center .drawer_accordion a {
        align-items: center;
        border-bottom: 1px solid #ddd;
		font-size: 1.5rem;
        color: #333;
        display: flex;
        height: 50px;
		font-size: 1.5rem;
        padding: 3px 10px 5px 35px;
        position: relative;
        width: 100%;
    }

    /*drawer_nav_sub--------------------------------------------*/
    .drawer_nav_sub {
        margin: 0 0 10px;
    }
    
    .drawer_nav_sub a {
        color: #333!important;
        border-top: none;
        font-size: 1.4rem;
        position: relative;
        padding: 5px 0 10px 18px;
        display: block;
    }
    
    .drawer_nav_sub a::before {
        content: "";
        background: var(--main);
        height: 2px;
        position: absolute;
        top: 50%;
        -webkit-transform: translateY(-50%);
        transform: translateY(-50%);
        width: 10px;
        left: 0;
    }

    /*** openmove ***/
    .drawer_top #sp_gnav {
        width:100%;
        height:auto;
        max-height:100%;
    }
    
    .drawer_top .drawer_hamburger,
    .drawer_top.drawer_open .drawer_hamburger {
        right:5px;
    }
    
    #sp_gnav{
        right:-120vw;
        -webkit-transition:right .6s cubic-bezier(0.190, 1.000, 0.220, 1.000);
        transition:right.6s cubic-bezier(0.190, 1.000, 0.220, 1.000);
    }
    
    .drawer_open #sp_gnav,
    .drawer_open #sp_gnavbar {
        right:0;
    }

    /*** hamburger ***/
    .drawer_hamburger{
        background: #fff;
        border: 0;
        outline: 0;
        padding: 0;
        position: absolute;
        top: 3px;
        right: 15px;
        z-index: 300;
        display:block;
        width: 35px;
        height: 50px;
    }
    
    .drawer_open .drawer_hamburger {
        background: #fff;
    }
    
    .drawer_hamburger:hover {
        cursor:pointer;
    }
    
    .drawer_hamburger_icon {
        margin:0;
        position:relative;
        display:block;
    }
    
    .drawer_hamburger_icon,
    .drawer_hamburger_icon:before,
    .drawer_hamburger_icon:after {
        width:27px;
        height:3px;
        background:#231815;
        text-align: center;
        margin: 0 auto 0 auto;
        top: 0;
        right: 0;
        -webkit-transition:all .8s cubic-bezier(0.190, 1.000, 0.220, 1.000);
        transition:all .8s cubic-bezier(0.190, 1.000, 0.220, 1.000);
    }

    .drawer_hamburger_icon:before,
    .drawer_hamburger_icon:after {
        position: absolute;
        right: 0;
        content: '';
    }
    
    .drawer_hamburger_icon:before {
        top: -10px;
    }
    
    .drawer_hamburger_icon:after {
        top: 10px;
    }
    
    .drawer_open .drawer_hamburger_icon {
        width:16px;
        text-align: center;
        height: 0;
        border: 0;
        outline: 0;
        right: 0;
        margin:0 auto 0;
        background: transparent;
    }
    .drawer_open .drawer_hamburger_icon:before,
    .drawer_open .drawer_hamburger_icon:after {
        position: absolute;
        top: 0;
    }    
    .drawer_open .drawer_hamburger_icon:before {
        -webkit-transform:rotate(45deg);
        transform:rotate(45deg);
    }
    .drawer_open .drawer_hamburger_icon:after {
        -webkit-transform:rotate(-45deg);
        transform:rotate(-45deg);
    }

}