/*!
 * jquery-drawer v3.2.2
 * Flexible drawer menu using jQuery, iScroll and CSS.
 * http://git.blivesta.com/drawer
 * License : MIT
 * Author : blivesta <design@blivesta.com> (http://blivesta.com/)
 */

/*-----------------
 *製品ページ　共通CSS　drawer部分　v1.1.0　2018/11/13更新
 *infomart.co.jp/seikyu/
 *infomart.co.jp/asp/
 *infomart.co.jp/kikaku/
 *infomart.co.jp/contract/
 *infomart.co.jp/quo/
 *infomart.co.jp/foods/

 *使用JQuery　1.11.3
 *モバイルファースト 360~767px
 *min-width 48em(768px)/min-width 64em(1024px)/min-width 75em(1200px)
-----------------*/

/*!------------------------------------*\
    Base
\*!------------------------------------*/
.drawer-open{overflow:hidden!important}
.drawer-nav{position:fixed;z-index:101;top:0;overflow:hidden;width:16.25rem;height:100%;color:#fff}
.drawer-brand{font-size:1.5rem;font-weight:700;line-height:3.75rem;display:block;padding-right:.75rem;padding-left:.75rem;text-decoration:none;color:#222}
.drawer-navbar .drawer-menu .drawer-menu-subtitle .drawer-brand{font-size:1.1rem;line-height:2.75rem;color:#FFF;padding-left:5px}
.drawer-navbar .drawer-menu .drawer-menu-subtitle ~ li{margin-left:5px}
.drawer-navbar .drawer-menu li.drawer-menu-subtitle{margin-left:0}
.drawer-menu{margin:0;padding:0;list-style:none}

/*-----------------
 *drawerメニュー　文字修正
-----------------*/
.drawer-menu-item{font-size:1em;display:block;padding:1em;text-decoration:none;color:#fff}
/*! overlay */
.drawer-overlay{position:fixed;z-index:100;top:0;left:0;display:none;width:100%;height:100%;background-color:rgba(0,0,0,.2)}
.drawer-open .drawer-overlay{display:block}

/*!------------------------------------*\
    Top
\*!------------------------------------*/

.drawer--top .drawer-nav{top:-100%;left:0;width:100%;height:auto;max-height:100%;-webkit-transition:top .6s cubic-bezier(0.190,1.000,0.220,1.000);transition:top .6s cubic-bezier(0.190,1.000,0.220,1.000)}
.drawer--top.drawer-open .drawer-nav{top:0}
.drawer--top .drawer-hamburger,.drawer--top.drawer-open .drawer-hamburger{right:0}

/*!------------------------------------*\
    Left
\*!------------------------------------*/
.drawer--left .drawer-nav{left:-16.25rem;-webkit-transition:left .6s cubic-bezier(0.190,1.000,0.220,1.000);transition:left .6s cubic-bezier(0.190,1.000,0.220,1.000)}
.drawer--left.drawer-open .drawer-nav,.drawer--left .drawer-hamburger,.drawer--left.drawer-open .drawer-navbar .drawer-hamburger{left:0}
.drawer--left.drawer-open .drawer-hamburger{left:16.25rem}

/*!------------------------------------*\
    Right
\*!------------------------------------*/
.drawer--right .drawer-nav{right:-16.25rem;-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--right.drawer-open .drawer-nav,.drawer--right .drawer-hamburger,.drawer--right.drawer-open .drawer-navbar .drawer-hamburger{right:0}
.drawer--right .drawer-nav{background-color:#333}
.drawer--right.drawer-open .drawer-hamburger{right:16.25rem}

/*!------------------------------------*\
    Hamburger
\*!------------------------------------*/
.drawer-hamburger{position:fixed;z-index:104;top:0;display:block;box-sizing:content-box;width:2rem;padding:0;padding-top:15px;padding-right:.75rem;padding-bottom:30px;padding-left:.75rem;-webkit-transition:all .6s cubic-bezier(0.190,1.000,0.220,1.000);transition:all .6s cubic-bezier(0.190,1.000,0.220,1.000);-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0);border:0;outline:0;background-color:transparent}
.drawer-hamburger:hover{cursor:pointer;background-color:transparent}
.drawer-hamburger-icon{position:relative;display:block;margin-top:10px}
.drawer-hamburger-icon,.drawer-hamburger-icon:before,.drawer-hamburger-icon:after{width:100%;height:2px;-webkit-transition:all .6s cubic-bezier(0.190,1.000,0.220,1.000);transition:all .6s cubic-bezier(0.190,1.000,0.220,1.000);background-color:#222}
.drawer-hamburger-icon:before,.drawer-hamburger-icon:after{position:absolute;top:-10px;left:0;content:' '}
.drawer-hamburger-icon:after{top:10px}
.drawer-open .drawer-hamburger-icon{background-color:transparent}
.drawer-open .drawer-hamburger-icon:before,.drawer-open .drawer-hamburger-icon:after{background-color:#fff;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)}

/*!------------------------------------*\
    accessibility
\*!------------------------------------*/
/*!
 * Only display content to screen readers
 * See: http://a11yproject.com/posts/how-to-hide-content
 */
 .sr-only{position:absolute;overflow:hidden;clip:rect(0,0,0,0);width:1px;height:1px;margin:-1px;padding:0;border:0}

 /*!
 * Use in conjunction with .sr-only to only display content when it's focused.
 * Useful for "Skip to main content" links; see http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G1
 * Credit: HTML5 Boilerplate
 */
 .sr-only-focusable:active,.sr-only-focusable:focus{position:static;overflow:visible;clip:auto;width:auto;height:auto;margin:0}

/*!------------------------------------*\
    Sidebar
\*!------------------------------------*/

.drawer--sidebar{background-color:#fff}
.drawer--sidebar .drawer-contents{background-color:#fff}
@media (min-width: 64em) {
header:not(.header2022) .drawer--sidebar .drawer-hamburger{display:none;visibility:hidden}
.drawer--sidebar .drawer-nav{display:block;-webkit-transform:none;transform:none;position:fixed;width:12.5rem;height:100%}
/*! Left */
.drawer--sidebar.drawer--left .drawer-nav{left:0;border-right:1px solid #ddd}
.drawer--sidebar.drawer--left .drawer-contents{margin-left:12.5rem}
/*! Right */
.drawer--sidebar.drawer--right .drawer-nav{right:0;border-left:1px solid #ddd}
.drawer--sidebar.drawer--right .drawer-contents{margin-right:12.5rem}
/*! container */
.drawer--sidebar .drawer-container{max-width:48rem}
}
@media (min-width: 75em) {
.drawer--sidebar .drawer-nav{width:16.25rem}
.drawer--sidebar.drawer--left .drawer-contents{margin-left:16.25rem}
.drawer--sidebar.drawer--right .drawer-contents{margin-right:16.25rem}
 /*! container */
.drawer--sidebar .drawer-container{max-width:60rem}
}

/*!------------------------------------*\
    Navbar
\*!------------------------------------*/

.drawer-navbar .drawer-navbar-header{border-bottom:1px solid #ddd;background-color:#fff}
.drawer-navbar{z-index:102;top:0;width:100%;background-color:rgba(51,51,51,0.7)}
/*! .drawer-navbar modifier */
.drawer-navbar-header{position:relative;z-index:102;box-sizing:border-box;width:100%;height:3.75rem;padding:0 .75rem;text-align:center}
.drawer-navbar .drawer-brand{line-height:3.75rem;display:inline-block;padding-top:0;padding-bottom:0;text-decoration:none}
.drawer-navbar .drawer-brand:hover{background-color:transparent}
.drawer-navbar .drawer-title{margin:.4em 0 1.5em .5em;color:#999;font-size:2em}
.drawer-navbar .drawer-menu{padding-bottom:0}
@media (min-width: 64em) {
header:not(.header2022) .drawer-navbar{height:40px}
header:not(.header2022) .drawer--right .drawer-nav{background-color:transparent}
header:not(.header2022) .drawer-navbar .drawer-navbar-header{position:relative;display:block;float:left;width:auto;padding:0;border:0}
header:not(.header2022) .drawer-navbar .drawer-menu--right{float:right}
header:not(.header2022) .drawer-navbar .drawer-menu li{float:left}
header:not(.header2022) .drawer-navbar .drawer-menu > li:last-child{float:right}
header:not(.header2022) .drawer-navbar .drawer-menu-item{line-height:2.5em;padding:0 .6em}
header:not(.header2022) .drawer-navbar .drawer-menu-item:hover{color:#ccc}
header:not(.header2022) .drawer-navbar .drawer-hamburger{display:none}
header:not(.header2022) .drawer-navbar .drawer-nav{background-color:transparent;position:relative;left:0;overflow:visible;width:auto;height:2.5em;padding-top:0;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}
header:not(.header2022) .drawer-navbar .drawer-menu{padding:0}
/*! dropdown */
header:not(.header2022) .drawer-navbar .drawer-dropdown-menu{position:absolute}
header:not(.header2022) .drawer-navbar .drawer-dropdown-menu-item{padding-left:.75rem}
header:not(.header2022) .drawer-navbar #login_access{float:right}
header:not(.header2022) span.drawer-menu-item{cursor:pointer}
header:not(.header2022) .drawer-dropdown.open span.drawer-menu-item{color:#333}
}
@media screen and (min-width:75em) {
.drawer-navbar .drawer-menu-item{padding:0 1em}
}

/*!------------------------------------*\
    Dropdown メニュー
\*!------------------------------------*/
.drawer-dropdown-menu{display:none;box-sizing:border-box;width:100%;margin:0;padding:.5em 1.2em;background-color:#333;font-size:1em}
.drawer-dropdown-menu a{color:#fff}
.drawer-dropdown-menu > li{width:100%;list-style:none;list-style-image:url(data:0);padding-bottom:1em}
.drawer-dropdown-menu li:last-child{padding-bottom:0}
.drawer-dropdown-menu > li a{padding:.8em .5em;line-height:1.5em;display:block}
.drawer-dropdown-menu > li ul li{padding:0}
.drawer-dropdown-menu > li ul li a{padding:.6em .5em}
.drawer-dropdown-menu > .btm-line-dot,.drawer-menu-seller > ul .btm-line-dot{border-bottom:1px dashed #999;margin-bottom:1em}
.drawer-menu-seller > ul .btm-line-dot{padding-bottom:1em}
.drawer-dropdown-menu-item{line-height:3.75rem;display:block;padding:0;padding-right:.75rem;padding-left:1.5rem;text-decoration:none;color:#222}
.drawer-dropdown-menu-item:hover{text-decoration:underline;color:#555;background-color:transparent}

/*! open */
.drawer-dropdown.open > .drawer-dropdown-menu{display:block;background-color:#444}

/*! drawer-arrow */
.drawer-dropdown .drawer-arrow{display:inline-block;width:4px;height:4px;margin-top:-.3em;margin-left:.6em;-webkit-transform:rotate(0deg);transform:rotate(0deg);vertical-align:middle;border-top:2px solid #fff;border-right:2px solid #fff;-webkit-transform:rotate(135deg);transform:rotate(135deg)}

/*! open */
.drawer-dropdown.open .drawer-arrow{margin-top:0;-webkit-transform:rotate(-45deg);transform:rotate(-45deg)}
@media screen and (max-width: 64em) {
.drawer-dropdown-menu li.drawer-menu-account > span{padding:.8em .5em;line-height:1.5em;color:#fff;display:block}
}

/* タブレット横サイズ 1024px(16×64em)~ mdサイズ */
@media screen and (min-width:64em){
	.drawer-dropdown.open{background-color:#fff}
.drawer-dropdown.open a{color:#333;position:relative}
.drawer-dropdown.open .drawer-arrow{border-top:2px solid #333;border-right:2px solid #333}
.drawer-dropdown.open > .drawer-dropdown-menu{background-color:#fff;display:flex;left:0;-webkit-border-radius:0 0 16px 16px / 0 0 16px 16px;-moz-border-radius:0 0 16px 16px / 0 0 16px 16px;border-radius:0 0 16px 16px / 0 0 16px 16px;box-shadow:0 8px 8px -8px rgba(51,51,51,0.7)}
.drawer-dropdown-menu > .btm-line-dot,.drawer-menu-seller > ul .btm-line-dot{border-bottom:none;margin-bottom:0}
.drawer-dropdown-menu li.drawer-menu-buyer,.drawer-dropdown-menu li.drawer-menu-seller,.drawer-dropdown-menu li.drawer-menu-account{width:27em;margin-bottom:1em}
.drawer-dropdown-menu li.drawer-menu-alignment{width:27em}
.drawer-dropdown .drawer-menu-account .dropdown-arrow{bottom:42%}
.drawer-dropdown-menu > li{margin-left:2em}
#kikaku .drawer-dropdown-menu > li{margin-left:1em}
.drawer-dropdown-menu li.drawer-menu-buyer > a,.drawer-dropdown-menu li.drawer-menu-seller > a,.drawer-dropdown-menu li.drawer-menu-account > span{width:250px;padding-left:.3em;padding-right:70px;font-size:1.5em;font-weight:700}
.drawer-dropdown-menu li.drawer-menu-account > span{padding:0 0 .3em .3em;width:320px;display:block;position:relative;line-height:1.5em}
.drawer-dropdown .drawer-menu-item:hover .drawer-arrow{border-top:2px solid #ccc;border-right:2px solid #ccc}
.drawer-dropdown-menu > li a{display:block;position:relative;z-index:700}
.drawer-dropdown-menu > li ul li a{width:250px;padding-right:70px;display:block;position:relative;z-index:700}
.drawer-dropdown-menu > li a:after{display:block;content:"";position:absolute;top:50%;left:0;width:100%;height:0;background:#ccc;z-index:-1;transition:all .1s linear}
.drawer-dropdown-menu > li a:hover:after{top:0;height:100%}
.drawer-dropdown-menu > li ul li a:after{display:block;content:"";position:absolute;top:50%;left:0;width:100%;height:0;background:#ccc;z-index:-1;transition:all .1s linear}
.drawer-dropdown-menu > li ul li a:hover:after{top:0;height:100%}

/* 201811改修　メニュー表示パターン追加 */
/* タイトル1つのみ、下層で左右2つ表示 */
.drawer-dropdown-menu.menu-pattern02 > li ul li{margin-right:20%}
.drawer-dropdown-menu.menu-pattern02 > li ul li:nth-child(even){margin-right:0}
.drawer-dropdown-menu.menu-pattern02 > li{margin-bottom:1em;padding-bottom:1em}

/*! dropdown-arrow　矢印 */
.drawer-dropdown .dropdown-arrow,.btm-line-dot .drawer-menu-item-open > .dropdown-arrow{display:inline-block;width:8px;height:8px;position:absolute;right:14px;bottom:37%;border-left:2px solid #333;border-top:2px solid #333;-webkit-transform:rotate(135deg);transform:rotate(135deg)}
.drawer-dropdown ul li ul .dropdown-arrow{width:6px;height:6px;bottom:37%;border-left:1px solid #333;border-top:1px solid #333;display:none}
.drawer-dropdown ul li ul .drawer-menu-alignment .dropdown-arrow{bottom:34px}
/* 他のサービスを見る　表示 */
.drawer-dropdown-menu .service_title{margin-top:1em;padding:.8em .5em;font-size:1.5em;color:#333;font-weight:700;line-height:1.5em;list-style-image:url(data:0)}
header.header2022 .drawer-dropdown-menu .drawer-menu-item-sub .service_title{font-size:1em;margin-left:.5em}
.drawer-dropdown-menu.service-menu > li{margin-bottom:1em;padding-bottom:1em}
.drawer-dropdown-menu.service-menu > li ul li{margin-right:1.5em;float:left}
.drawer-dropdown-menu.service-menu > li ul li a{width:100px}
/* ログインボタン　現在非表示 */
.drawer-navbar .drawer-menu li.login_btn{float: right;}
/*規格書用３カラム*/
#kikaku .drawer-dropdown-menu li.drawer-menu-buyer>a,#kikaku .drawer-dropdown-menu li.drawer-menu-seller>a{width:190px!important}
#kikaku .drawer-dropdown-menu>li ul li a{width:190px!important}
#kikaku .drawer-dropdown-menu.service-menu > li ul li a{width:100px!important}
}

/* タブレット横サイズ 1024px(16×64em)~ mdサイズ */
@media screen and (min-width:64em) {
.drawer-dropdown ul li ul .dropdown-arrow{display:block}
.drawer-navbar .drawer-menu > li:last-child{float:right}
}

/* ノートPC以上のサイズ 1200px(16×75em)~ */
@media screen and (min-width:75em) {
.drawer-dropdown-menu > li{margin-left:3em}
.drawer-dropdown-menu.service-menu > li ul li{margin-right:3.7em}
.drawer-dropdown-menu > li ul li a{padding-right:67px}
#kikaku .drawer-dropdown-menu > li{margin-left:1.5em}
}

/*!------------------------------------*\
    Container
\*!------------------------------------*/
.drawer-container{width:90%;max-width:64em;margin:auto}
@media (min-width: 64em) {
.drawer-container{width:90%}
}
@media (min-width: 75em) {
.drawer-container{width:90%}
}
/*!------------------------------------*\
    add hayabarai
\*!------------------------------------*/

.drawer-dropdown-menu > li ul li a .tx-haya{font-size:small;white-space:nowrap}

/* タブレット横サイズ 1024px(16×64em)~ mdサイズ */
@media screen and (min-width:64em) {
.drawer-dropdown-menu > li ul li a .tx-haya{font-size:small;white-space:nowrap}
}