@charset "utf-8";

/*-----------------------------------------------------------
全体スタイル
-----------------------------------------------------------*/

body {
    width: 100% !important;
    color: #333;
    font-size: 16px;
    line-height: 1.6;
    overflow: hidden;
}

body:before {
    display: block;
    content: "";
    width: auto;
    height: 5px;
    background: #007c36;
}

.center {
    text-align: center;
}


.point03 {
	color: #F48158;
	font-size: 16px;
	font-weight: bold;
}


/*リンク表示方法*/

a {
    text-decoration: none;
}

a:link {
    color: #4d80b3;
}

a:visited {
    color: #4d66b3;
}

a:active {
    color: #4d4db3;
}

a:hover {
    color: #b34d66;
}

a:hover img {
    opacity: 0.7;
    filter: alpha(opacity=70);
}

header, nav > ul, .inner {
    width: 960px;
    margin: 0 auto;
}


/*-----------------------------------------------------------
PCサイズ
-----------------------------------------------------------*/

.pc {
    display: block;
    text-align: center;
}

.sp {
    display: none;
}

.pc02 {
    display: inline-block;
}

.sp02 {
    display: none;
}

/*-----------------------------------------------------------
header
-----------------------------------------------------------*/



header h1 {
    font-weight: bold;
    font-size: 15px;
    margin: 0 0 0 1px;
}

.hUl01 {
    /* margin: 9px 0 0; */
}

.hUl01 li {
    float: left;
}

.hUl01 a {
    color: #333;
    font-weight: bold;
}

.hUl01 li:first-child {
    width: 617px;
    margin: 9px 0 0;
}

.hUl01 li:first-child + li {
    font-size: 12px;
    width: 76px;
    margin: 10px 0 0 77px;
}

.hUl01 li:first-child + li a {
    background: url(../img/icon01_off.png) center left no-repeat;
    padding: 1px 0 0 28px;
}

.hUl01 li:first-child + li a:hover {
    color: #2D9A00;
    background: url(../img/icon01_on.png) center left no-repeat;
}

.hUl01 li:first-child + li + li {
    font-size: 12px;
    width: 148px;
    margin: 10px 0 0 20px;
}

.hUl01 li:first-child + li + li a {
    background: url(../img/icon01_off.png) center left no-repeat;
    padding: 1px 0 0 28px;
}

.hUl01 li:first-child + li + li a:hover {
    color: #2D9A00;
    background: url(../img/icon01_on.png) center left no-repeat;
}

.hUl02 {
    margin: 14px 0 0;
    display: flex;
    justify-content: space-around;
}

.hUl02 li {
    float: left;
}

.logo {
    /* width: 245px; */
    margin: 20px 0 0;
}

.logo a:hover img {
    opacity: 1;
}

.headerBlog {
    width: 140px;
    margin: 9px 0 0 39px;
    text-align: right;
}

.headerDia {
    /* width: 245px; */
    margin: 12px 0 0;
    text-align: right;
}

.headerTel {
    width: 241px;
    margin: 0 0 0 50px;
    padding: 0 0 0 29px;
    background: url(../img/h_tel_logo.png) left 20px no-repeat;
}

.headerTel li:first-child + li {
    margin: 6px 0 0;
}

/*-----------------------------------------------------------
テーブル共通
-----------------------------------------------------------*/

table {
    border-collapse: separate;
}

th {
    background: #35a304;
    color: #fff;
}

td {
    background: #E7F4CA;
    color: #333;
}


/*-----------------------------------------------------------
 nav
-----------------------------------------------------------*/

nav {
    margin: 16px auto 0px;
    background: #007c36;
}

nav ul {
    font-size: 0;
}

nav li a {
    display: block;
    text-decoration: none;
}

nav ul:after,
nav:after {
    content: '';
    display: block;
    clear: both;
}

nav > ul > li {
    display: inline-block;
    height: 65px;
    }

nav > ul > li > a {
    /* background: #ccc; */
    display: block;
}

nav li a:hover {
    background: #333;
}

nav li ul {
    display: none;
}

nav li:hover ul {
    display: block;
    position: absolute;
    font-size: 12px;
    font-weight: bold;
    z-index: 99999;
    width: 165px;
}

.drop_list li a {
	position: relative;
	width: 370px;
    text-decoration: none;
    color: #fff;
    background: rgba(5, 104, 160, 0.91);
    display: block;
	left: -117px;
    padding: 20px 0;
    border-bottom: 1px solid #fff;
    text-align: center;
}

.drop_list li a:hover {
    background: #2f9c01;
}


/*-----------------------------------------------------------
#slide
-----------------------------------------------------------*/

#modal {
    display: none;
}

/*-----------------------------------------------------------
#cover
-----------------------------------------------------------*/

#cover {
    max-width: 1920px;
    width: 100%;
    margin: 0 auto;
    /* background: #ccc; */
}

#cover .sp {
    display: none !important;
}

#cover li {
    width: 100%;
}

#cover img {
    width: 960px;
    margin: 0 auto;
    display: block;
}

#cover li h2 {
    background-size: cover !important;
}

.cover01 {
        background: url(../img/cover01_bg.jpg) center top;
}

.cover02 {
        background: url(../img/cover02_bg.jpg) center top;
}

.cover03 {
        background: url(../img/cover03_bg.jpg) center top;
}




/*-----------------------------------------------------------
 #main
-----------------------------------------------------------*/

.mainWrap {
    margin: 30px auto 0;
}

#main {
    width: 100%;
    /* float: left; */
}

.boxInner {
    width: 960px;
    margin: 0 auto;
}

.contentBox01 {
    background: url(../img/contents01_bg.png) center top repeat-x;
}

.contentBox01 > div {
    background: url(../img/c1_sugihara.png) 3px bottom no-repeat;
    padding: 0 0 58px;
}

.contentBox01 dl {
    padding: 54px 0 0;
}

.contentBox01 dt {
    float: right;
    width: 381px;
}

.contentBox01 dd {
    float: left;
    width: 532px;
    margin: 5px 0 0 1px;
    line-height: 24.5px;
}

.contentBox01 dd p {
    font-size: 14px;
}


.contentBox01 dd h3:first-child + p {
    margin: 28px 0 0;
}

.contentBox01 dd h3:first-child + p + p {
    margin: 16px 0 0;
}

.contentBox01 dd h3:first-child + p + p + p {
    margin: 13px 0 0;
}

.contentBox01 .nav_02 {
    display:  inline-flex;
    position:  relative;
    top: -51px;
}

.contentBox01 .nav_02 li {
    background: green;
    padding: 13px;
    width:  200px;
    text-align:  center;
    margin-left:  20px;
    box-shadow: 0 0 8px #828282;
}

.contentBox01 .nav_02 li:hover {
  background-color: #0071bc;
}

.contentBox01 .nav_02 li a {
    color: #fff;
}

.contentBox02 {
    background: url(../img/contents02_bg.jpg) center top repeat-x;
}

.contentBox02 li {
    float: left;
    width: 292px;
    margin: 0 0 0 41px;
}

.contentBox02 li:first-child {
    margin: 0 0 0 1px;
}

.contentBox02 ul {
    padding: 70px 0 55px;
}

.contentBox02 li > dl > dt {
    border: solid #fff 1px;
    padding: 4px 4px;
}

.contentBox02 li > dl > dd > dl > dt {
    border-bottom: 2px solid #2D9A00;
    padding: 0 0 8px;
}

.contentBox02 li > dl > dd > dl > dt a {
    background: url(../img/icon02_off.png) left 17px no-repeat;
    padding: 1px 0 0 41px;
    display: block;
}

.contentBox02 li > dl > dd > dl > dt a:hover {
    background: url(../img/icon02_on.png) left 17px no-repeat;
}

.contentBox02 li > dl > dd {
    margin: 21px 0 0;
}

.contentBox02 li > dl > dd > dl > dd {
    font-size: 14px;
    padding: 10px 0 0;
    line-height: 24px;
}

.contentBox03 {
    padding: 0 0 59px;
}

.contentBox03 > div {
    padding: 59px 0 0;
}

.contentBox03 > div > ul > li {
    float: left;
}

.contentBox03 > div > ul > li > h3 {
    padding: 0 0 13px;
}

.contentBox03 > div > ul > li:first-child {
    /* width: 580px; */
    width: 100%;
}

.contentBox03 > div > ul > li:first-child > h3 {
    border-bottom: 1px solid #ccc;
}

.contentBox03 > div > ul > li:first-child + li {
    width: 340px;
    margin: 0 0 0 40px;
}

.contentBox03 > div > ul > li:first-child + li h3:first-child + p + p a {
    background: #036CAD;
    display: block;
    padding: 5px 0 15px;
    text-align: center;
}

.contentBox03 > div > ul > li:first-child + li h3:first-child + p + p a:hover {
    background: #2D9A00;
}

.contentBox03 > div > ul > li:first-child + li h3:first-child + p + p a:hover img {
    opacity: 1;
}

.contentBox03 > div > ul > li:first-child + li h3:first-child + p {
    margin: 3px 0 0;
}

.link_btn{
	width: 100%;
	text-align: center;
	margin: 0 auto;
    position:  relative;
}

.link_btn ul{
	text-align: center;
	margin: 0 auto 50px;
	display:  inline-flex;
}

.link_btn li {
	float: none;
    background: green;
    padding: 13px;
    width:  200px;
	margin: 0 auto 50px;
    text-align:  center;
    box-shadow: 0 0 8px #828282;
}

.link_btn li:hover {
  background-color: #0071bc;
}

.link_btn li a {
    color: #fff;
}


.news li dt {
    float: left;
    font-size: 14px;
    width: 30%;
}

.news li dt span {
    margin: 0 0 0 10px;
}

.news li dt span img {
    max-width: 62px;
}

.news li dd {
    font-size: 14px;
    float: left;
    width: 67%;
    line-height: 28px;
}

.contentBox03 .boxInner .reco {
    width:  340px;
    float:  left;
    margin-left:  39px;
    height: 300px;
}

.contentBox03 .boxInner .reco h2 {
    margin-bottom:  10px;
}

.contentBox03 .boxInner .reco a{
    background: #036CAD;
    display: block;
    padding: 5px 0 15px;
    text-align: center;
}

.contentBox03 .boxInner .reco a:hover {
    background: #2D9A00;
}

.contentBox03 .boxInner .reco a:hover img {
    opacity: 1;
}

.contentBox04 {
    background: url(../img/contents04_bg.jpg) center top repeat-x;
    padding: 0 0 79px;
}

.contentBox04 h3 {
    text-align: center;
}

.contentBox04 h3 img {
    margin: 0 auto;
}

.contentBox04 .boxInner {
    padding: 86px 0 0;
}

.contentBox04 li {
    float: left;
    width: 294px;
    margin: 0 0 0 38px;
}

.contentBox04 li > dl > dt {
    text-align: center;
}

.contentBox04 li > dl > dd > dl > dt {
    text-align: center;
    padding: 68px 0 0;
}

.contentBox04 li > dl > dd > dl > dd {
    font-size: 15px;
    border-top: 1px solid #ccc;
    padding: 17px 0 11px;
    margin: 23px 10px 0;
    line-height: 28px;
}

.contentBox04 li > dl > dd > dl {
    /* border-top: 1px solid #ccc; */
    border-right: 1px solid #ccc;
    border-left: 1px solid #ccc;
    box-shadow: 0px 2px 16px -7px #000000;
    -moz-box-shadow: 0px 2px 16px -7px #000000;
    -webkit-box-shadow: 0px 2px 16px -7px #000000;
    margin: -48px 0 0;
    border-bottom: 5px solid #2D9A00;
}

.contentBox04 li:first-child {
    margin: 0;
}

.contentBox04 ul {
    margin: 69px 0 31px;
}

.contentBox04 li > dl > dd > dl > dd em {
    color: #2D9A00;
    font-weight: bold;
    font-size: 15px;
}

.telBnr {
    border: 5px solid #fff;
    box-shadow: 0px 2px 4px 1px #D8D6D6;
    -moz-box-shadow: 0px 2px 4px 1px #D8D6D6;
    -webkit-box-shadow: 0px 2px 4px 1px #D8D6D6;
    background: url(../img/tel_bnr_bg.jpg) center top no-repeat;
}

.telBnr dt {
    background: #2D9A00;
    padding: 3px 0 9px 18px;
}

.telBnr dl {
    padding: 13px 0 11px 22px;
    width: 460px;
}

.telBnr dd {
    padding: 13px 0 0;
}



/*-----------------------------------------------------------
 footer
-----------------------------------------------------------*/

footer {
    margin: 0 auto;
    padding: 0px 0 0;
    border-top: 1px solid #ccc;
    box-shadow: 0px 2px 4px 1px #D8D6D6;
    -moz-box-shadow: 0px 2px 4px 1px #D8D6D6;
    -webkit-box-shadow: 0px -1px 4px 1px #D8D6D6;
}

footer .logo {
    /* width: 245px; */
    margin: 0 auto;
}

footer .inner {
    padding: 0 0 20px;
    text-align: center;
}

.fUl01 {
    text-align: left;
    margin: 16px 0 0;
}



.fUl01 li {
    display: inline-block;
    margin: 0 15px 0 0;
    line-height: 44px;
}

.fUl01 li a {
    font-size: 13px;
    border-left: 1px solid #fff;
    color: #333;
    background: url(../img/icon01_off.png) 0px 4px no-repeat;
    padding: 0 0 0 30px;
}

.fUl01 li a:hover {
   color: #2D9A00 ;
   background: url(../img/icon01_on.png) 0px 4px no-repeat;
}

.fUl02 {
    margin: 12px 0 0;
    border-top: 1px solid #ccc;
    padding: 13px 0 0;
    display: flex;
    justify-content: space-around;
}

.fUl02 li {
    float: left;
}

.fUl02 .logo {
    /* width: 245px; */
    margin: 21px 0 0;
}

.fUl02 .logo a:hover img {
    opacity: 1;
}

.footerBlog {
    width: 140px;
    margin: 13px 0 0 41px;
    text-align: right;
}

.footerDia {
    /* width: 245px; */
    margin: 18px 0 0;
    text-align: right;
}

.footerTel {
    width: 241px;
    margin: 4px 0 0 110px;
    padding: 0 0 0 29px;
    background: url(../img/h_tel_logo.png) left 20px no-repeat;
}

.footerTel li:first-child + li {
    margin: 6px 0 0;
}



.copyright {
    background: #007c36;
    color: #fff;
}

.copyright small {
    width: 960px;
    margin: 0 auto;
    padding: 9px 0 2px;
    display: block;
    text-align: right;
}


/* 全ページ共通クラス
----------------------------------------------------------- */

/*--- パンくず ---*/

.pankuzu {
    width: 960px;
    margin: 0 auto;
    font-size: 12px;
    padding: 16px 0 0;
}

.pankuzu li {
    margin: 0 0 0 10px;
    display: inline;
}

.pankuzu li:first-child {
    margin: 0;
}

.pankuzu li a {
    margin: 0 10px 0 0;
    color: #35a304;
}

.pankuzu li a:hover {
    color: #0170b8;
}


/*--- ページトップ ---*/
#pageTop {
    position: fixed;
    bottom: 200px;
    right: 25px;
    z-index: 9999;
}


#pageTop a:hover {
    opacity: 1;
}

/* -- お問い合わせ -- */

.contactNoteWrap {
    margin-bottom: 50px;
}

.contactNoteWrap .siteBox {
	padding: 0;
	margin-bottom: 15px;
}

.contactNoteWrap .siteBox > ul > li:before {
	display: none;
}

.contactNoteWrap .siteBox > ul > li li {
	margin: 0;
}

.contactNoteWrap .siteBox > ul > li li:before {
	display: none;
}

.open_p {
    border: 1px solid #ccc;
    background: #eee;
    padding: 5px .6em 1px;
    cursor: pointer;
    margin: 0;
    position: relative;
}

.open_p:before,
.open_p.active:before {
    font-size: 15px;
    position: relative;
    top: 0px;
    margin-right: 2px;
}

.open_p.active::before {
    content: "▼";
}

.open_p::before {
    content: "▶";
}

.info {
    font-size: 13px;
    padding-top: .6em;
}

input {
    vertical-align: middle;
}

.btnBox1 {
    text-align: center;
}

.contact_cf .clearForm,.contact_cf .clearForm2 {
    padding: 10px 5px;
}

.choose_list1 > li {
    width: 200px;
    margin: 0 0 0 10px;
    float: left;
}

.choose_list1 > li:first-child {
    margin: 0;
}

.choose_list1 {
    width: 410px;
    margin: 20px auto;
}

.contact_tb td span {
    margin: 9px 0 0;
    /* display: block; */
}

.clearForm,
.clearForm2,
.toHome {
    width: 200px;
    padding: 15px 5px;
    cursor: pointer;
    outline: 0;
    background: #016fb6;
    color: #fff !important;
    font-size: 100%;
    border: none;
    font-weight: bold;
    transition: .2s;
    -moz-transition: .2s;
    -webkit-transition: .2s;
}

.clearForm:hover,
.clearForm2:hover,
.toHome:hover {
    background: rgba(1, 111, 182, 0.68);
    color: #FFF;
}

.toHome {
    margin: 50px auto 0 !important;
    text-decoration: none;
    display: block;
    text-align: center;
}

#name, #post, #mail, #mail_confirm, textarea, #url, #kana, #tel, #c_name, #c_kana {
    width: 435px;
}

#zip1, #zip2 {
    width: 195px;
}

#city, #pref, #add {
    width: 364px;
    margin: 2px 0 0 10px;
}

#add {
    margin: 2px 0 0 30px;
}

textarea {
    width: 440px;
    padding: 10px 5px;
}

input,
textarea,
button,
select,
option {
    outline: none;
}

input[type="text"] {
    height: 25px;
    padding: 5px;
}

input[type="text"],
textarea,
select,
option {
    border: 1px solid #CCC;
}

textarea[name="msg"] {
    height: 100px;
}

button {
    border: none;
    outline: none;
    background: none;
}

.form_notice1 {
    font-size: 85.714%;
    display: block;
    margin: 5px 0 0;
}

.form_notice2 {
    font-size: 87.5%;
}

.modification_wrap {
    overflow: hidden;
}

.modification {
    width: 221px;
    float: left;
    margin: 0 0 0 246px;
}

.send_bt {
    width: 221px;
    float: right;
    margin: 0 245px 0 0;
}

.error_style {
    color: #e44329;
    display: block;
    margin: 8px 0 0;
}

.contact #contactForm {
    margin: 30px auto 0;
}

.contact_tb {
    margin: 0 auto;
    width: 960px;
    border-collapse: separate;
    border-spacing: 5px;
    border: none;
}

.contact_tb th {
    width: 250px;
    text-align: left;
    position: relative;
    line-height: 1.4;
}

.contact_tb th, .contact_tb td {
    padding: 13px 10px 10px 15px;
    font-size: 15px;
    border-bottom: 1px solid #ccc;
    position: relative;
}

.contact_tb th em {
    background: #e44329;
    color: #FFFFFF;
    padding: 2px 5px;
    margin-left: 5px;
    right: 10px;
    font-size: 85.714%;
}

.corp_required {
    display: none;
}

.contact_tb td .contactFormText {
    display: block;
    margin: 0 0 7px;
    padding: 0 0 0 1.5em;
}

.contactCaution {
    color: #e44329;
    font-weight: bold;
    font-size: 14px;
}

.contactTit01 {
    font-size: 18px;
    font-weight: bold;
    margin: 0 0 15px;
}

/*-- エラーチェック --*/

.formError {
    top: 20px !important;
    left: 40px !important;
}

.zip2formError {
    left: 220px !important;
}

.prefformError, .cityformError, .addformError {
    top: 0 !important;
    left: 80px !important;
}

.zip1 label {
    position: relative;
}

.formErrorContent {
    background: #E44329 !important;
}

.formError .formErrorArrow div {
    background: #E44329 !important;
}


/*-- 送信前ダイアログ --*/

.ui-corner-all.ui-button-text-only:focus {
    color: #737373;
    background: #fff;
    outline: none;
    border-color: #ccc;
}

.ui-corner-all.ui-button-text-only:hover {
    color: #fff;
    background: #036CAD;
    outline: none;
    border-color: #ccc;
    transition: .3s;
}

.ui-widget-header {
    background: #555 !important;
    border-color: #555 !important;
}

.ui-dialog .ui-dialog-content,
.ui-button-text-only .ui-button-text {
    font-family: "メイリオ", Meiryo, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", sans-serif !important;
}

.ui-dialog-titlebar.ui-widget-header.ui-corner-all.ui-helper-clearfix {
    background: #35A304 !important;
}

.ui-dialog.ui-widget.ui-widget-content.ui-corner-all.ui-front.ui-dialog-buttons {
    background: #fff;
}

/*-- 送信後sendflg --*/

.form_sendFlg {
    padding: 20px 3%;
    margin: 0 0 20px;
    text-align: center;
}

.form_sendFlg a {
    background: #0170b8;
    margin: 20px 0 0;
    color: #fff;
    padding: 10px 10%;
    display: inline-block;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    width: 220px;
    border: 0;
    outline: 0;
    padding: 15px 5px;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
}

.form_sendFlg a:hover {
    background: #35a304;
}


/* TOP
----------------------------------------------------------- */

/*-- メインヴィジュアル スライダー --*/

.bx-wrapper {
    position: relative;
}

.bx-controls-direction {
    width: 100%;
    position: absolute;
    top: 50%;
}

.bx-controls-direction a {
    width: 32px;
    height: 32px;
    margin: -16px 0 0;
    position: absolute;
    top: 50%;
    z-index: 9999;
    outline: 0;
    text-indent: -9999px;
}

.bx-prev {
    left: 1% !important;
    background: url(./../img/prev.png) no-repeat 0 0;
    background-size: contain;
}

.bx-next {
    right: 1% !important;
    background: url(./../img/next.png) no-repeat 100% 0;
    background-size: contain;
}


/*-- スクロールバーデザイン --*/

.scroll-pane {
    width: 600px !important;
    max-height: 267px;
    margin: 0 auto;
    overflow-y: auto;
}

.scroll-pane:focus {
    outline: none;
}

.news .scroll-pane {
    width: 100% !important;
}

.jspContainer {
    width: 100% !important;
    overflow: hidden;
    position: relative;
}

.jspPane {
    width: 100% !important;
    position: absolute;
}

.jspVerticalBar {
    width: 20px;
    position: absolute;
    top: 0;
    right: -5px;
}

.jspArrowUp, .jspArrowDown {
    margin : 0;
    padding: 0;
    display: block;
    cursor : pointer;
    background: url(../img/sample/scroll_top.png) no-repeat center;
}

.jspArrowDown {
    background: url(../img/sample/scroll_bottom.png) no-repeat center;
}

.jspTrack {
    height: 350px !important; /*スクロールバーの長さ*/
    background: url(./../img/sample/scroll_bg1.png) repeat-y;
    position: relative;
    background-position: center;
}

.jspDrag {
    width: 4px;
    margin: 0 auto;
    background: #6b6b6b;
    position: relative;
    cursor: pointer;
    border-radius: 8px;
    -moz-border-radius: 8px;
    -webkit-border-radius: 8px;
}

.jspArrow.jspDisabled {
    cursor: default;
}

.jspVerticalBar .jspArrow {
    height: 20px;
}

.jspVerticalBar .jspArrow:focus {
    outline: none;
}


/* 新着情報
----------------------------------------------------------- */

.news li {
    width: 100%;
    margin: 0 0;
}

.news dl {
    /* width: 580px; */
    padding: 30px 0 20px;
    border-bottom: 1px solid #E2E2E2;
}



/*-----------------------------------------------------------
 中ページ
-----------------------------------------------------------*/

/* 中ページカバー
----------------------------------------------------------- */

.article #cover {
    background-size: cover !important;
}


.idea #cover {
    background: url(../img/idea_bg.jpg) no-repeat center top;
}

.guide #cover {
    background: url(../img/guide_bg.jpg) no-repeat center top;
}

.nylon #cover {
    background: url(../img/nylon_bg.jpg) no-repeat center top;
}

.goods #cover {
    background: url(../img/goods_bg.jpg) no-repeat center top;
}

.detail #cover {
    background: url(../img/detail_bg.jpg) no-repeat center top;
}

.contact #cover {
    background: url(../img/contact_bg.jpg) no-repeat center top;
}

.company #cover {
    background: url(../img/company_bg.jpg) no-repeat center top;
}

.offer #cover {
    background: url(../img/offer_bg.jpg) no-repeat center top;
}

.privacy #cover {
    background: url(../img/privacy_bg.jpg) no-repeat center top;
}

.blog #cover {
    background: url(../img/blog_bg.jpg) no-repeat center top;
}

.sitemap #cover {
    background: url(../img/sitemap_bg.jpg) no-repeat center top;
}



.article #main {
    padding: 0;
}

.sub_contentBox01 {
    background: url(../img/contents01_bg.png) center top no-repeat;
    padding: 0 0 79px;
}

.sub_contentBox02 {
    background: url(../img/sub_bg.jpg) center top no-repeat;
    padding: 0 0 79px;
}

.sub_contentBox03 {
    padding: 0 0 79px;
}

.sub_contentBox04 {
    background: url(../img/contents04_bg.jpg) center top no-repeat;
    padding: 0 0 79px;
}

.detail .sub_contentBox04 {
    background: url(../img/sub_bg.jpg) center top repeat;
}

.titH3 {
    text-align: center;
    padding: 30px 0 0;
}

.guidBox {
    text-align: center;
    font-weight: 600;
}

.guidBox .guidLink {
    font-size: 22px;
}

.guidBox .annotation {
    font-size: 18px;
}

.leadTxt {
    margin: 30px auto 0;
    padding: 20px;
    background: #35a304;
    color: #fff;
    font-size: 16px;
    text-align: center;
    box-shadow: 0px 2px 16px -7px #000000;
    -moz-box-shadow: 0px 2px 16px -7px #000000;
    -webkit-box-shadow: 0px 2px 16px -7px #000000;
}

.titTxt01 {
    font-weight: bold;
    font-size: 22px;
    display: inline-block;
    margin-bottom: 10px;
}

.boldTxt {
    font-weight: bold;
}

.txtHead {
    color: red;
    font-size: 25px;
    font-weight: 600;
}

.txtRed {
    color: red;
}


/*---------------- ページャー------------*/



.pager {
    margin: 50px auto 0 !important;
    text-align: center;
    /* padding: 0 38px 22px 0; */
    /* border-bottom: 1px dotted #CDCBCE; */
}

.pager li {
    color: #111;
    background: #fff;
    margin: 0px 0px 0px 6px;
    border: 1px solid #ccc;
    display: inline-block;
    width: 40px;
    font-size: 14px;
}

.pager li em ,
.pager li a {
    color: #111;
    text-decoration: none;
    display: block;
    padding: 4px 0 2px;
}

.pager li a:hover {
    color: #FFF;
    background-color: #2d9a00;
    font-weight: bold;
}

.pager .now {
    color: #fff;
    background: #0070b9;
    font-weight: bold;
}





/* お問い合わせ
----------------------------------------------------------- */

.leadBox01 {
    margin: 30px auto 0;
    padding: 30px 20px;
    border-top: 1px solid #ccc;
    border-right: 1px solid #ccc;
    border-right: 1px solid #ccc;
    border-left: 1px solid #ccc;
    box-shadow: 0px 2px 16px -7px #000000;
    -moz-box-shadow: 0px 2px 16px -7px #000000;
    -webkit-box-shadow: 0px 2px 16px -7px #000000;
    border-bottom: 5px solid #2D9A00;
    font-size: 15px;
    line-height: 28px;
}

.leadBox01 em {
    color: #e44329;
}

.leadText01 {
    font-size: 15px;
    line-height: 28px;
}


/* プライバシーポリシー
----------------------------------------------------------- */

.privacy dl {
    margin: 30px 0 0;
    padding: 20px 20px;
    background-color: #FFF;
    background-color: rgba(255,255,255,0.3);
}

.privacy dt {
    margin: 20px 0 0;
    padding: 0 5px;
    display: inline-block;
    font-weight: bold;
    border-bottom: 2px solid #35a304;
    font-size: 15px;
}

.privacy dt:first-child {
    margin: 0;
}

.privacy dd {
    font-size: 14px;
    margin: 10px 10px 0;
}


/* 会社概要
----------------------------------------------------------- */

.company #main div:first-child + div {
    text-align: center;
}

.company table {
    width: 960px;
    margin: 30px auto 0;
    border-collapse: separate;
    border-spacing: 5px;
    border: none;
}

.company th {
    width: 320px;
    padding: 10px 10px 10px 20px;
    border-bottom: 1px solid #fff;
}

.company td {
    width: 640px;
    padding: 10px 10px 10px 20px;
    border-bottom: 1px solid #fff;
}

.company td.ft {
	width: 220px;
    padding: 10px 10px 10px 20px;
    border-bottom: 1px solid #fff;
}

.company iframe {
    width: 960px;
    height: 200px;
    margin: 30px auto 0;
}

.txtBox {
    background-color: #35a304;
    padding: 10px 10px 10px 20px;
    color: #FFF;
    font-weight: bold;
}

/* 求人募集
----------------------------------------------------------- */

.noOffer {
    margin: 30px auto 0;
    padding: 20px;
    background: #35a304;
    color: #fff;
    font-size: 15px;
    box-shadow: 0px 2px 16px -7px #000000;
    -moz-box-shadow: 0px 2px 16px -7px #000000;
    -webkit-box-shadow: 0px 2px 16px -7px #000000;
}

.offer table {
    width: 960px;
    margin: 30px auto 0;
    border-collapse: separate;
    border-spacing: 5px;
    border: none;
}

.offer th {
    width: 170px;
    padding: 10px 10px 10px 20px;
    border-bottom: 1px solid #fff;
}

.offer td {
    width: 470px;
    padding: 10px 10px 10px 20px;
    border-bottom: 1px solid #fff;
}

.noOffer {
    margin: 30px 0 0;
    font-size: 15px;
    text-align: center;
}


/* 商品一覧（安全・防護・便利グッズ、ガイドバー、ナイロンコードカッター）
----------------------------------------------------------- */

.listUl {
    margin: 30px 0 0;
}

.listUl li {
    width: 22%;
    margin: 0 12px;
    text-align: center;
    display: inline-block;
    vertical-align: top;
    letter-spacing: normal;
    position: relative;
}

.listUl li a {
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 1000;
}

.listUl li a:hover {
    background: rgba(255, 255, 255, 0.3);
}

.listUl .ulBr {
    margin: 0;
}

.listUl dd {
    margin: 5px 0 0;
}

.listUl dd p {
    padding: 10px 0 0;
    font-size: 14px;
}


.listUl dd p:first-child {
    border: none;
    font-size: 17px;
    padding: 10px 0 0;
}

.listUl dd p:first-child {
}

.listUl dd p:first-child + p {
    color: #fff;
    font-weight: bold;
    background: #016fb7;
    display: block;
    padding: 5px 0;
}

.listUl dl {
    border-right: 1px solid #ccc;
    border-left: 1px solid #ccc;
    box-shadow: 0px 2px 16px -7px #000000;
    -moz-box-shadow: 0px 2px 16px -7px #000000;
    -webkit-box-shadow: 0px 2px 16px -7px #000000;
    margin: 30px 0 0;
    /* border-bottom: 5px solid #2D9A00; */
}

.listUl dt {
    padding: 0 5px;
    text-align: center;
    width: 96%;
    height: 240px;
    position: relative;
    margin: 0 auto;
}

.listUl dl img {
    max-width: 98%;
    max-height: 230px;
    width: auto;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    position: absolute;
}

.listUl dl a:hover p:first-child + p  {
    background: #35a304;
}


/* 安全・防護・便利グッズ
----------------------------------------------------------- */

.guideUl01 {
    margin: 30px 0 0;
    padding: 0 15px;
    /* text-align: center; */
    letter-spacing: 21px;
}

.goodsUl01 li {
    /* float: left; */
    width: 212px;
    margin: 0 0 10px 0;
    display: inline-block;
    letter-spacing: normal;
    text-align: center;
}

.goodsUl01 li:first-child {
    margin: 0 0 10px 0;
}

.goodsUl01 li a {
    background: #016fb7;
    padding: 0;
    display: block;
    color: #fff;
    display: table-cell;
    vertical-align: middle;
    width: 10%;
    height: 60px !important;
    border: 3px solid #fff;
    box-shadow: 0px 2px 4px 1px #D8D6D6;
    -moz-box-shadow: 0px 2px 4px 1px #D8D6D6;
    -webkit-box-shadow: 0px 2px 4px 1px #D8D6D6;
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#6db3f2+0,54a3ee+50,3690f0+51,1e69de+100;Blue+Gloss+%233 */
    background: #6db3f2; /* Old browsers */
    background: -moz-linear-gradient(top, #6db3f2 0%, #54a3ee 50%, #3690f0 51%, #1e69de 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top, #6db3f2 0%,#54a3ee 50%,#3690f0 51%,#1e69de 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, #6db3f2 0%,#54a3ee 50%,#3690f0 51%,#1e69de 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6db3f2', endColorstr='#1e69de',GradientType=0 ); /* IE6-9 */
}

.goodsUl01 li a:hover {
    background: rgba(1, 111, 183, 0.77);
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#e4f5fc+0,bfe8f9+50,9fd8ef+51,2ab0ed+100;Blue+Gloss+%235 */
    background: #e4f5fc; /* Old browsers */
    background: -moz-linear-gradient(top, #e4f5fc 0%, #bfe8f9 50%, #9fd8ef 51%, #2ab0ed 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top, #e4f5fc 0%,#bfe8f9 50%,#9fd8ef 51%,#2ab0ed 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, #e4f5fc 0%,#bfe8f9 50%,#9fd8ef 51%,#2ab0ed 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e4f5fc', endColorstr='#2ab0ed',GradientType=0 ); /* IE6-9 */
    color: #016fb7;
    -moz-transition: .5s;
    -webkit-transition: .5s;
    -o-transition: .5s;
    -ms-transition: .5s;
    transition: .5s;
}

.goods .boxInner {
    margin: 50px auto 0;
}

.goods .boxInner h4 {
    font-size: 22px;
    color: #555;
    padding-bottom: 20px;
    padding-left: 20px;
    text-align: left;
    position: relative;
    border-bottom: 1px solid #2d9a00;
}

.goods .boxInner h4:before {
    content: "";
    position: absolute;
    background: url(../img/border_left.png) left center no-repeat;
    width: 5px;
    height: 34px;
    left: 0;
}

.goodsUl01 {
    margin: 30px 0 0;
    padding: 0 15px;
    text-align: center;
    letter-spacing: 21px;
}

.goods .telBnr {
    margin: 30px 0 0;
}


/* ナイロンコードカッター
----------------------------------------------------------- */


.nylonUl01 {
    margin: 30px 0 0;
    padding: 0 15px;
    text-align: center;
    letter-spacing: 21px;
}

.nylonUl01 li {
    /* float: left; */
    width: 212px;
    margin: 0 0 10px 0;
    display: inline-block;
    letter-spacing: normal;
    text-align: center;
}

.nylonUl01 li:first-child {
    margin: 0 0 10px 0;
}

.nylonUl01 li a {
    background: #016fb7;
    padding: 0;
    display: block;
    color: #fff;
    display: table-cell;
    vertical-align: middle;
    width: 10%;
    height: 60px !important;
    border: 3px solid #fff;
    box-shadow: 0px 2px 4px 1px #D8D6D6;
    -moz-box-shadow: 0px 2px 4px 1px #D8D6D6;
    -webkit-box-shadow: 0px 2px 4px 1px #D8D6D6;
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#6db3f2+0,54a3ee+50,3690f0+51,1e69de+100;Blue+Gloss+%233 */
    background: #6db3f2; /* Old browsers */
    background: -moz-linear-gradient(top, #6db3f2 0%, #54a3ee 50%, #3690f0 51%, #1e69de 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top, #6db3f2 0%,#54a3ee 50%,#3690f0 51%,#1e69de 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, #6db3f2 0%,#54a3ee 50%,#3690f0 51%,#1e69de 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6db3f2', endColorstr='#1e69de',GradientType=0 ); /* IE6-9 */
}



.nylonUl01 li a:hover {
    background: rgba(1, 111, 183, 0.77);
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#e4f5fc+0,bfe8f9+50,9fd8ef+51,2ab0ed+100;Blue+Gloss+%235 */
    background: #e4f5fc; /* Old browsers */
    background: -moz-linear-gradient(top, #e4f5fc 0%, #bfe8f9 50%, #9fd8ef 51%, #2ab0ed 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top, #e4f5fc 0%,#bfe8f9 50%,#9fd8ef 51%,#2ab0ed 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, #e4f5fc 0%,#bfe8f9 50%,#9fd8ef 51%,#2ab0ed 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e4f5fc', endColorstr='#2ab0ed',GradientType=0 ); /* IE6-9 */
    color: #016fb7;
    -moz-transition: .5s;
    -webkit-transition: .5s;
    -o-transition: .5s;
    -ms-transition: .5s;
    transition: .5s;
}

.nylon .boxInner {
    margin: 50px auto 0;
}

.nylon .boxInner h4 {
    font-size: 22px;
    color: #555;
    padding-bottom: 20px;
    padding-left: 20px;
    text-align: left;
    position: relative;
    border-bottom: 1px solid #2d9a00;
}

.nylon .boxInner h4:before {
    content: "";
    position: absolute;
    background: url(../img/border_left.png) left center no-repeat;
    width: 5px;
    height: 34px;
    left: 0;
}

.nylon .telBnr {
    margin: 30px 0 0;
}


/* ガイドバー
----------------------------------------------------------- */


.guideUl01 {
    margin: 30px 0 0;
    padding: 0 15px;
    text-align: center;
    letter-spacing: 21px;
}

.guideUl01 li {
    /* float: left; */
    width: 250px;
    margin: 0 0 10px 0;
    display: inline-block;
    letter-spacing: normal;
    text-align: center;
}

.guideUl01 li:first-child {
    margin: 0 0 10px 0;
}

.guideUl01 li a {
    background: #016fb7;
    padding: 0px 4%;
    display: block;
    color: #fff;
    display: table-cell;
    vertical-align: middle;
    font-size: 15px;
    width: 10%;
    height: 60px !important;
    border: 3px solid #fff;
    box-shadow: 0px 2px 4px 1px #D8D6D6;
    -moz-box-shadow: 0px 2px 4px 1px #D8D6D6;
    -webkit-box-shadow: 0px 2px 4px 1px #D8D6D6;
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#6db3f2+0,54a3ee+50,3690f0+51,1e69de+100;Blue+Gloss+%233 */
    background: #6db3f2; /* Old browsers */
    background: -moz-linear-gradient(top, #6db3f2 0%, #54a3ee 50%, #3690f0 51%, #1e69de 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top, #6db3f2 0%,#54a3ee 50%,#3690f0 51%,#1e69de 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, #6db3f2 0%,#54a3ee 50%,#3690f0 51%,#1e69de 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6db3f2', endColorstr='#1e69de',GradientType=0 ); /* IE6-9 */
}

.guideUl01 li a:hover {
    background: rgba(1, 111, 183, 0.77);
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#e4f5fc+0,bfe8f9+50,9fd8ef+51,2ab0ed+100;Blue+Gloss+%235 */
    background: #e4f5fc; /* Old browsers */
    background: -moz-linear-gradient(top, #e4f5fc 0%, #bfe8f9 50%, #9fd8ef 51%, #2ab0ed 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top, #e4f5fc 0%,#bfe8f9 50%,#9fd8ef 51%,#2ab0ed 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, #e4f5fc 0%,#bfe8f9 50%,#9fd8ef 51%,#2ab0ed 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e4f5fc', endColorstr='#2ab0ed',GradientType=0 ); /* IE6-9 */
    color: #016fb7;
    -moz-transition: .5s;
    -webkit-transition: .5s;
    -o-transition: .5s;
    -ms-transition: .5s;
    transition: .5s;
}

.guide .boxInner {
    margin: 50px auto 0;
}

.guide .boxInner h4 {
    font-size: 22px;
    color: #555;
    padding-bottom: 20px;
    padding-left: 20px;
    text-align: left;
    position: relative;
    border-bottom: 1px solid #2d9a00;
}

.guide .boxInner h4:before {
    content: "";
    position: absolute;
    background: url(../img/border_left.png) left center no-repeat;
    width: 5px;
    height: 34px;
    left: 0;
}

.guide .telBnr {
    margin: 30px 0 0;
}




/* 商品詳細（不要な場合は消す）
----------------------------------------------------------- */
.flex-control-thumbs li {
    margin-bottom: 5px;
}

.flex-control-thumbs li:nth-of-type(4n + 1) {
    margin-left: 0;
}

.flex-direction-nav  a {
    height: 50px;
    top: 35%;
}

.flexslider:hover .flex-direction-nav .flex-prev {
    top: 35%;
}

.detailBox {
    margin: 20px auto 0;
}

.detailTxt {
    width: 220px;
    text-align: center;
}

.detailTxt p {
    padding: 12px 0 10px;
    border-top: 1px solid #ccc;
    font-size: 90%;
}

.detailTxt p:first-child {
    border-top: none;
}

.detailBoxWrap h3 {
    font-size: 22px;
    color: #555;
    padding-bottom: 20px;
    padding-left: 20px;
    text-align: left;
    position: relative;
    border-bottom: 1px solid #2d9a00;
}

.detailBoxWrap h3:before {
    content: "";
    position: absolute;
    background: url(../img/border_left.png) left center no-repeat;
    width: 5px;
    height: 34px;
    left: 0;
}

.detailTb{
    float: none;
    width: 100%;
    margin: 0 auto;

}

.detail table {
    border-collapse: separate;
    border-spacing: 5px;
    border: none;
    table-layout: fixed;
}



.detail th {
    width: 140px;
    border-bottom: 1px solid #fff;
    padding:10px;
}

.detail td {
    width: 820px;
    padding: 10px 10px 10px 20px;
    border-bottom: 1px solid #fff;
    font-size: 13px;
}

.detail td iframe {
    width: 100%;
}


.goodsName td {
    font-size: 15px !important;
}

.detailImg {
    width: 100%;
    float: none;
}

.detailImg img {
    width: 300px;
    margin: 0 auto;
    display: block;
}

.detailBnr {
    margin: 25px 0 0;
    text-align: center;
}

.detailBnr  a {
    /* display: block; */
}

.detailBnr img {
}



/*-- flexslider --*/

.flexslider {
    margin: 0;
    border: 0;
}

#carousel {
    width: 480px !important;
    margin: 10px auto 0;
}

#carousel li {
    width: 113px !important;
    margin: 0 6px 0 0 !important;
}

.lb-number {
    display: none !important;
}

.flex-viewport {
    border: 1px solid #35A304;
    box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 8px 0px;
    -webkit-box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 8px 0px;
    -moz-box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 8px 0px;
    -ms-box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 8px 0px;
    height: 350px;
    margin-bottom: 20px;
}

.flexslider .slides > li {
    height: 350px;
    width: 100%;
    position: relative;
    display: block;
    margin:0 0 30px 0;
    /* border: 1px solid #35A304; */
    box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 8px 0px;
    -webkit-box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 8px 0px;
    -moz-box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 8px 0px;
    -ms-box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 8px 0px;
}

.flexslider .slides > li img {
    max-width: 96%;
    max-height: 340px;
    width: auto;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    position: absolute;
}

ol.flex-control-nav.flex-control-thumbs > li img {
    max-width: 96%;
    max-height: 96%;
    width: auto;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    position: absolute;
}

ol.flex-control-nav.flex-control-thumbs >li {
    width: 20%;
    display: inline-block;
.flex-control-thumbs
    img {      max-width: 96%;
    max-height: 166px;
    width: auto;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    position: absolute;
    border: 1px solid #35A304;
    box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 8px 0px;
    -webkit-box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 8px 0px;
    -moz-box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 8px 0px;
    -ms-box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 8px 0px;  }
    border: 1px solid #35A304;
    box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 8px 0px;
    -webkit-box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 8px 0px;
    -moz-box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 8px 0px;
    -ms-box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 8px 0px;
    border: solid 1px #35a304;
    height: 100px;
    position: relative;
}

/* スギハラ貿易の理念
----------------------------------------------------------- */


.ideaUl01 {
    margin: 30px auto 0;
    padding: 0 14px;
}

.ideaUl01 li {
    float: left;
    width: 381px;
    margin: 0 0 0 170px;
}

.ideaUl01 li:first-child {
    margin: 0;
}

.idea #main >div:first-child + div > div >dl {
    margin: 30px 0 30px;
    padding: 0 14px 0;
}

.idea #main >div:first-child + div > div > dl dt {
    float: left;
    width: 381px;
}

.idea #main >div:first-child + div > div > dl dd {
    float: left;
    width: 500px;
    font-size: 14px;
    line-height: 24.5px;
    margin: 0 0 0 50px;
}

.idea #main > div:first-child + div > div > dl dd p:first-child + p {
    margin: 30px 0 0;
}


/* 根切チェーンソー用ガイドバー＆チェーン
----------------------------------------------------------- */

.idea_lk {
    margin: 20px 0 0;
    padding: 0 15px;
    text-align: center;
    letter-spacing: 21px;
}

.idea_lk li {
    width: calc(85% / 2);
	max-width: 250px;
	margin: 0 auto  ;
    display: inline-block;
    letter-spacing: normal;
    text-align: center;
}

.idea_lk li a {
    background: #016fb7;
    padding: 0;
    display: block;
    color: #fff;
    display: table-cell;
    vertical-align: middle;
    width: 10%;
    height: 60px !important;
    border: 3px solid #fff;
    box-shadow: 0px 2px 4px 1px #D8D6D6;
    -moz-box-shadow: 0px 2px 4px 1px #D8D6D6;
    -webkit-box-shadow: 0px 2px 4px 1px #D8D6D6;
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#6db3f2+0,54a3ee+50,3690f0+51,1e69de+100;Blue+Gloss+%233 */
    background: #6db3f2; /* Old browsers */
    background: -moz-linear-gradient(top, #6db3f2 0%, #54a3ee 50%, #3690f0 51%, #1e69de 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top, #6db3f2 0%,#54a3ee 50%,#3690f0 51%,#1e69de 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, #6db3f2 0%,#54a3ee 50%,#3690f0 51%,#1e69de 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6db3f2', endColorstr='#1e69de',GradientType=0 ); /* IE6-9 */
}

.idea_lk li a:hover {
    background: rgba(1, 111, 183, 0.77);
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#e4f5fc+0,bfe8f9+50,9fd8ef+51,2ab0ed+100;Blue+Gloss+%235 */
    background: #e4f5fc; /* Old browsers */
    background: -moz-linear-gradient(top, #e4f5fc 0%, #bfe8f9 50%, #9fd8ef 51%, #2ab0ed 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top, #e4f5fc 0%,#bfe8f9 50%,#9fd8ef 51%,#2ab0ed 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, #e4f5fc 0%,#bfe8f9 50%,#9fd8ef 51%,#2ab0ed 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e4f5fc', endColorstr='#2ab0ed',GradientType=0 ); /* IE6-9 */
    color: #016fb7;
    -moz-transition: .5s;
    -webkit-transition: .5s;
    -o-transition: .5s;
    -ms-transition: .5s;
    transition: .5s;
}

.ideaimg {
	width: 100%;
	max-width: 960px;
}

ul.ideaimg  {
	width: 100%;
	max-width: 960px;
	text-align: center;
	margin: 20px auto;
    display:-webkit-box;
    display:-moz-box;
    display:-ms-flexbox;
    display:-webkit-flex;
    display:-moz-flex;
    display:flex;
    -webkit-box-lines:multiple;
    -moz-box-lines:multiple;
    -webkit-flex-wrap:wrap;
    -moz-flex-wrap:wrap;
    -ms-flex-wrap:wrap;
    flex-wrap:wrap;
}

ul.ideaimg li {
	position: relative;
    margin: 0 2%;
	padding: 0;
    width: calc(87% / 3);
    list-style:none;
}

ul.ideaimg li img {
	text-align: center;
	padding: 2%;
	width: 100%;
	max-height: 270px;
}

/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */
/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */

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

/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */
/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */

ul.ideaimg li {
	position: relative;
    margin: 0 2%;
	padding: 0;
    width: calc(90% /2);
    list-style:none;
}

}


/* サイトマップ
----------------------------------------------------------- */


.siteBox {
    margin: 30px 0 0;
    padding: 0 100px 0;
}

.siteBox > ul {
    float: left;
    width: 300px;
    margin: 0 0 0 160px;
}

.siteBox > ul:first-child {
    margin: 0;
}

.siteBox > ul > li {
    margin: 10px 0 0;
    position: relative;
    font-size: 20px;
    font-weight: bold;
}

.siteBox > ul > li > a {
    color: #204ba3;
}

.siteBox > ul > li:before {
    content: '■';
    color: #35a304;
    margin: 0 5px 0 0;
}

.siteBox > ul > li:first-child {
    margin: 0;
}

.siteBox > ul > li li {
    margin: 5px 0 0 25px;
    font-size: 15px;
    position: relative;
}

.siteBox > ul > li li:before {
    content: "\025B6";
    margin: 0 5px 0 0;
    color: #35a304;
}

.siteBox > ul > li > a:hover {
    color: #35a304;
}

.siteBox > ul > li li a:hover {
    color: #e34327;
}

/* ブログ
----------------------------------------------------------- */

.blogBox {
    margin: 30px 0 0;
}

.blogBox > div {
    float: left;
    width: 700px;
    margin: 0 0 0 50px;
}

.blogBox > div:first-child {
    width: 210px;
    margin: 0;
}

.blog_dl > dt {
    border-bottom: solid 2px #35a304;
    font-size: 18px;
    font-weight: bold;
}

.blog_dl > dd {
    margin: 25px 0 100px;
    font-size: 14px;
}

.blog_dl {
    /* border-top: 1px solid #ccc; */
    border-right: 1px solid #ccc;
    border-left: 1px solid #ccc;
    box-shadow: 0px 2px 16px -7px #000000;
    -moz-box-shadow: 0px 2px 16px -7px #000000;
    -webkit-box-shadow: 0px 2px 16px -7px #000000;
    margin: 0px 0 0;
    padding: 30px 30px;
    background: #fff;
    border-bottom: 5px solid #2D9A00;
}

.blog_date {
    display: block;
}

.blog_category {
    display: block;
}

.blog_dl > dd > p {
    margin: 30px 0 0;
    line-height: 28px;
}

.blogH4 {
    color: #FFF;
    background-color: #016fb7;
    text-align: center;
    padding: 5px 0;
    margin-bottom: 10px;
}

.category {
    border-right: solid 1px #35a304;
    border-left: solid 1px #35a304;
    border-top: solid 1px #35a304;
    margin-bottom: 20px;
}

.category li {
    font-size: 14px;
}

.category li a {
    color: #333;
    text-decoration: none;
    display: block;
    padding: 10px 10px;
    border-bottom: solid 1px #35a304;
}

.category li a:hover {
    background: #35a304;
    color: #fff;
}

.archive {
    border-right: solid 1px #35a304;
    border-left: solid 1px #35a304;
    border-top: solid 1px #35a304;
    margin-bottom: 20px;
}

.archive li {
    font-size: 14px;
}

.archive li a {
    color: #333;
    text-decoration: none;
    display: block;
    padding: 4px 10px;
    border-bottom: solid 1px #35a304;
}

.archive li a:hover {
    background: #35a304;
    color: #fff;
}





/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */
/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */

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

/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */
/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */


/*-----------------------------------------------------------
全体スタイル
-----------------------------------------------------------*/

img {
    width: 100%;
}

header, nav ul, .inner {
    width: 96%;
    margin: 0 auto;
}


/*-----------------------------------------------------------
header
-----------------------------------------------------------*/


header h1 {
    font-weight: bold;
    font-size: 14px;
    margin: 0 0 0 1px;
}

.hUl01 {
    /* margin: 9px 0 0; */
}

.hUl01 li {
    float: left;
}

.hUl01 a {
    color: #333;
    font-weight: bold;
}

.hUl01 li:first-child {
    width: 63%;
    margin: 9px 0 0;
}

.hUl01 li:first-child + li {
    font-size: 12px;
    width: 13%;
    margin: 6px 0 0;
}

.hUl01 li:first-child + li a {
    padding: 1px 0 0 28px;
}



.hUl01 li:first-child + li + li {
    font-size: 12px;
    width: 21%;
    margin: 6px 1% 0;
}

.hUl01 li:first-child + li + li a {
    padding: 1px 0 0 28px;
}



.hUl02 {
    margin: 14px 0 0;
}

.hUl02 li {
    float: left;
}

.logo {
    width: 28%;
    margin: 9px 0 0;
}

.headerBlog {
    width: 17%;
    margin: 9px 2% 0;
}

.headerDia {
    width: 28%;
    margin: 9px 4% 0;
}

.headerTel {
    width: 23%;
    margin: 0 4% 0;
    padding: 2px 0 0 3%;
    background-size: 8%;
}

.logo img {
    max-width: 270px;
}

.headerBlog img {
    max-width: 140px;
}

.headerDia img {
    max-width: 245px;
}

.headerTel img {
    max-width: 241px;
}


/*-----------------------------------------------------------
cover
-----------------------------------------------------------*/


#cover {
    max-width: 960px;
}

#cover img {
    width: 100%;
}

.cover01 {
        background: url(../img/cover01_bg.jpg) center top;
}

.cover02 {
        background: url(../img/cover02_bg.jpg) center top;
}

.cover03 {
        background: url(../img/cover03_bg.jpg) center top;
}


/*-----------------------------------------------------------
#main
-----------------------------------------------------------*/

.mainWrap {
    width: 98%;
}

#main {
    width: 72%;
}

aside {
    width: 26%;
    margin: 0 0 0 2%;
}


/*-----------------------------------------------------------
nav
-----------------------------------------------------------*/
nav {
    margin: 16px auto 0px;
    /* background: #35A304; */
}

nav ul {
    font-size: 0;
}

nav li a {
    display: block;
    text-decoration: none;
}

nav ul:after,
nav:after {
    content: '';
    display: block;
    clear: both;
}

nav > ul > li {
    display: inline-block;
    /* height: 100%; */
    height: auto;
    width: 14%;
}

nav li ul {
    display: none;
}

nav li:hover ul {
    display: block;
    position: absolute;
    font-size: 11px;
    font-weight: bold;
    z-index: 99999;
    width: 16%;
}

.drop_list li a {
    text-decoration: none;
    color: #fff;
    background: rgba(5, 104, 160, 0.91);
    display: block;
    padding: 15px 0;
    border-bottom: 1px solid #fff;
    text-align: center;
}

.drop_list li a:hover {
    background: #2f9c01;
}

nav li a {
    /* background: #ccc; */
    display: block;
}

nav li a:hover {
    background: #333;
}

/*-----------------------------------------------------------
footer
-----------------------------------------------------------*/

.copyright small {
    width: 96%;
}



/* 全ページ共通クラス
----------------------------------------------------------- */

.pankuzu {
    width: 98%;
}


/* トップページ
----------------------------------------------------------- */

.mainWrap {
    margin: 30px auto 0;
}

#main {
    width: 100%;
    /* float: left; */
}

.boxInner {
    width: 96%;
    margin: 0 auto;
}

.contentBox01 {
    background: url(../img/contents01_bg.png) center top repeat-x;
}

.contentBox01 > div {
    background: url(../img/c1_sugihara.png) 3px bottom no-repeat;
    padding: 0 0 58px;
    width: 96%;
    margin: 0 auto;
}

.contentBox01 dl {
    padding: 54px 0 0;
}

.contentBox01 dt {
    float: right;
    width: 38%;
}

.contentBox01 dt img {
    max-width: 381px;
}

.contentBox01 dd {
    float: left;
    width: 53%;
    margin: 5px 0 0 1px;
    line-height: 24.5px;
}

.contentBox01 dd h3 img {
    max-width: 504px;
}

.contentBox01 dd p {
    font-size: 14px;
}


.contentBox01 dd h3:first-child + p {
    margin: 28px 0 0;
}

.contentBox01 dd h3:first-child + p + p {
    margin: 16px 0 0;
}

.contentBox01 dd h3:first-child + p + p + p {
    margin: 13px 0 0;
}

.contentBox01 .nav_02 {
    width:  100%;
    margin-top:  70px;
}

.contentBox01 .nav_02 li {
    background: green;
    padding: 13px;
    width:  200px;
    text-align:  center;
    box-shadow: 0 0 8px #828282;
    margin:  5px;
}

.contentBox01 .nav_02 li:hover {
  background-color: #0071bc;
}

.contentBox01 .nav_02 li a {
    color: #fff;
}


.contentBox02 {
    background: url(../img/contents02_bg.jpg) center top repeat-x;
}

.contentBox02 li {
    float: left;
    width: 29%;
    margin: 0 3%;
}

.contentBox02 li:first-child {
    margin: 0;
}

.contentBox02 ul {
    padding: 70px 0 55px;
}

.contentBox02 li > dl > dt {
    border: solid #fff 1px;
    padding: 4px 4px;
}

.contentBox02 li > dl > dt img {
    max-width: 282px;
}

.contentBox02 li > dl > dd > dl > dt {
    border-bottom: 2px solid #2D9A00;
    padding: 0 0 8px;
}


.contentBox02 li:first-child > dl > dd > dl > dt img {
    max-width: 231px;
}

.contentBox02 li:first-child + li > dl > dd > dl > dt img {
    max-width: 231px;
}

.contentBox02 li:first-child + li + li > dl > dd > dl > dt img {
    max-width: 231px;
}

.contentBox02 li > dl > dd > dl > dt a {
    background: url(../img/icon02_off.png) left 7px no-repeat;
    padding: 1px 0 0 41px;
}

.contentBox02 li > dl > dd > dl > dt a:hover {
    background: url(../img/icon02_on.png) left 7px no-repeat;
}

.contentBox02 li > dl > dd {
    margin: 21px 0 0;
}

.contentBox02 li > dl > dd > dl > dd {
    font-size: 14px;
    padding: 10px 0 0;
    line-height: 24px;
}

.contentBox03 {
    padding: 0 0 59px;
}

.contentBox03 > div {
    padding: 60px 0 0;
}

.contentBox03 > div > ul > li {
    float: left;
}

.contentBox03 > div > ul > li > h3 {
    padding: 0 0 13px;
}

.contentBox03 > div > ul > li:first-child {
    /* width: 58%; */
}

.news h2 img {
    max-width: 108px;
}

.contentBox03 > div > ul > li:first-child > h3 {
    border-bottom: 1px solid #ccc;
}

.contentBox03 > div > ul > li > h3 img {
    max-width: 262px;
}

.contentBox03 > div > ul > li:first-child > h3 img {
    max-width: 108px;
}

.contentBox03 > div > ul > li:first-child + li {
    width: 34%;
    margin: 0 2% 0;
}

.contentBox03 > div > ul > li:first-child + li h3:first-child + p + p a {
    background: #036CAD;
    display: block;
    padding: 5px 0 15px;
    text-align: center;
}

.contentBox03 > div > ul > li:first-child + li h3:first-child + p + p a img {
    max-width: 146px;
}

.contentBox03 > div > ul > li:first-child + li h3:first-child + p + p a:hover {
    background: #2D9A00;
}

.contentBox03 > div > ul > li:first-child + li h3:first-child + p + p a:hover img {
    opacity: 1;
}

.contentBox03 > div > ul > li:first-child + li h3:first-child + p {
    margin: 3px 0 0;
}

.contentBox03 > div > ul > li:first-child + li h3:first-child + p img {
    max-width: 340px;
}

.news dl {
    width: 100%;
}

.scroll-pane {
    width: 100% !important;
}

.news li dt {
    float: none;
    font-size: 14px;
    width: 100%;
}

.news li dd {
    font-size: 14px;
    float: none;
    width: 96%;
    line-height: 28px;
    margin: 10px 0 0;
}

.news li dd img {
    max-width: 66px;
}

.news li dd p {
    padding: 0 1%;
}

.contentBox03 .boxInner .reco {
    width: 100%;
    margin-top:  35px;
    margin-left: inherit;
}

.contentBox03 .boxInner .reco h2 {
    margin-bottom:  10px;
    width:  75%;
}

.contentBox03 .boxInner .reco a{
    background: #036CAD;
    display: block;
    padding: 5px 0 15px;
    text-align: center;
}

.contentBox03 .boxInner .reco a img {
    max-width: 146px;
}

.contentBox03 .boxInner .reco a:hover {
    background: #2D9A00;
}

.contentBox03 .boxInner .reco a:hover img {
    opacity: 1;
}


.contentBox04 {
    background: url(../img/contents04_bg.jpg) center top repeat;
    padding: 0 0 79px;
}

.contentBox04 h3 {
    text-align: center;
    width: 96%;
    margin: 0 auto;
}

.contentBox04 h3 img {
    max-width: 662px;
}

.contentBox04 .boxInner {
    padding: 86px 0 0;
}

.contentBox04 li {
    float: left;
    width: 29%;
    margin: 0 2% 0;
}

.contentBox04 li > dl > dt {
    text-align: center;
}

.contentBox04 li > dl > dt img {
    width: 92px;
}

.contentBox04 li > dl > dd > dl > dt {
    text-align: center;
    padding: 68px 0 0;
}

.contentBox04 li > dl > dd > dl > dt img {
    max-width: 132px;
}

.contentBox04 li > dl > dd > dl > dd {
    font-size: 15px;
    border-top: 1px solid #ccc;
    padding: 17px 0 11px;
    margin: 23px 1% 0;
    line-height: 28px;
}

.contentBox04 li > dl > dd > dl {
    /* border-top: 1px solid #ccc; */
    border-right: 1px solid #ccc;
    border-left: 1px solid #ccc;
    box-shadow: 0px 2px 16px -7px #000000;
    -moz-box-shadow: 0px 2px 16px -7px #000000;
    -webkit-box-shadow: 0px 2px 16px -7px #000000;
    margin: -48px 0 0;
    border-bottom: 5px solid #2D9A00;
}

.contentBox04 li:first-child {
    margin: 0 2% 0;
}

.contentBox04 ul {
    margin: 69px 0 31px;
}

.contentBox04 li > dl > dd > dl > dd em {
    color: #2D9A00;
    font-weight: bold;
    font-size: 15px;
}

.telBnr {
    border: 5px solid #fff;
    box-shadow: 0px 2px 4px 1px #D8D6D6;
    -moz-box-shadow: 0px 2px 4px 1px #D8D6D6;
    -webkit-box-shadow: 0px 2px 4px 1px #D8D6D6;
    background: url(../img/tel_bnr_bg.jpg) center top no-repeat;
}

.telBnr dt {
    background: #2D9A00;
    padding: 3px 2% 9px;
}

.telBnr dt img {
    max-width: 192px;
}

.telBnr dl {
    padding: 13px 2% 11px;
    width: 46%;
}

.telBnr dd {
    padding: 13px 0 0;
}

.telBnr dd img {
    max-width: 454px;
}

.telBnr dd a:hover img {
    opacity: 1;
}

/* フッター
----------------------------------------------------------- */

.fUl02 .logo {
    width: 28%;
}

.fUl02 .logo img {
    max-width: 244px;
}

.footerBlog img {
    max-width: 140px;
}

.footerBlog {
    width: 17%;
    margin: 13px 2% 0;
}

.footerDia {
    width: 28%;
    margin: 13px 3% 0;
}

.footerTel {
    width: 25%;
    margin: 4px 4% 0;
    padding: 0 0 0 3%;
    background-size: 8%;
}

.footerTel li img {
    max-width: 241px;
}

.footerDia img {
    max-width: 245px;
}




/* 中ページ960以下
----------------------------------------------------------- */

.leadTxt {
    padding: 20px 2%;
    font-size: 100%;
}

.privacy dt {
    padding: 0 1%;
}

.privacy dd {
    margin: 10px 2%;
}

.company table {
    width: 100%;
}

.company iframe {
    width: 100%;
}

.listUl li {
    width: 30.3%;
    margin: 0 1%;
}

/* スギハラ貿易の理念
----------------------------------------------------------- */


.idea #main > div:first-child h3 img {
    max-width: 487px;
}

.ideaUl01 li {
    width: 46%;
    margin: 0  0 0 8%;
}

.idea #main > div:first-child + div h3 img {
    max-width: 398px;
}

.idea #main >div:first-child + div > div > dl dt {
    width: 40%;
}

.idea #main >div:first-child + div > div > dl dd {
    width: 50%;
    margin: 0 0 0 10%;
}


/* 安全・防護・便利グッズ
----------------------------------------------------------- */

.goods .titH3 img {
    max-width: 275px;
}

.goods #main > div > div:first-child + div .titH4 img {
    max-width: 174px;
}

.goods #main > div > div:first-child + div + div .titH4 img {
    max-width: 240px;
}

.goodsUl01 {
    padding: 0 1%;
}

.goodsUl01 li {
    width: 48%;
    margin: 20px 0 0 2%;
    float: left;
}

.goodsUl01 li:first-child {
    margin: 20px 0 0 2%;
}

/* ナイロンコードカッター
----------------------------------------------------------- */

.nylon .titH3 img {
    max-width: 374px;
}

.nylon #main > div > div:first-child + div .titH4 img {
    max-width: 394px;
}

.nylon #main > div > div:first-child + div + div .titH4 img {
    max-width: 306px;
}

.nylon #main > div > div:first-child + div + div + div .titH4 img {
    max-width: 460px;
}

.nylon #main > div > div:first-child + div + div + div + div .titH4 img {
    max-width: 432px;
}

.nylonUl01 {
    padding: 0 1%;
}

.nylonUl01 li {
    width: 48%;
    margin: 20px 0 0 2%;
    float: left;
}

.nylonUl01 li:first-child {
    margin: 20px 0 0 2%;
}

/* ガイドバー
----------------------------------------------------------- */

.guide .titH3 img {
    max-width: 298px;
}

.guide #main > div > div:first-child + div .titH4 img {
    max-width: 195px;
}

.guide #main > div > div:first-child + div + div .titH4 img {
    max-width: 261px;
}

.guide #main > div > div:first-child + div + div + div .titH4 img {
    max-width: 327px;
}

.guide #main > div > div:first-child + div + div + div + div .titH4 img {
    max-width: 393px;
}

.guideUl01 {
    padding: 0 1%;
}

.guideUl01 li {
    width: 48%;
    margin: 20px 0 0 2%;
    float: left;
}

.guideUl01 li:first-child {
    margin: 20px 0 0 2%;
}


/* 商品詳細
----------------------------------------------------------- */

.listUl dt {
    height: 230px;
}

.listUl dl img {
    max-height: 200px !important;
}

/* サイトマップ
----------------------------------------------------------- */

.siteBox {
    padding: 0 3% 0;
}

.sitemap .titH3 img {
    max-width: 149px;
}

.siteBox > ul {
    width: 47%;
    margin: 0 0 0 6%;
}

/* 求人募集
----------------------------------------------------------- */

.offer .titH3 img {
    max-width: 100px;
}

.offer table {
    width: 95%;
}


/* 会社概要
----------------------------------------------------------- */

.company #main >div:first-child .titH3 img {
    max-width: 101px;
}

.company #main >div:first-child + div .titH3 img {
    max-width: 174px;
}

/* プライバシーポリシー
----------------------------------------------------------- */

.privacy .titH3 img {
    max-width: 247px;
}

/* ブログ
----------------------------------------------------------- */

.blog .titH3 img {
    max-width: 73px;
}

.blogBox > div:first-child {
    width: 22%;
}

.blogBox > div {
    width: 73%;
    margin: 0 0 0 5%;
}

.blog_dl {
    padding: 30px 5%;
}



/*-- お問い合わせ --*/

.contact .titH3 img {
    max-width: 247px;
}


.clearForm,
.clearForm2 {
    width: 96%;
    padding: 15px 2%;
}

.contact_tb {
    width: 96%;
}

.contact_tb th {
    width: 30%;
    font-size: 80%;
}

.contact_cf .clearForm,.contact_cf .clearForm2 {
    padding: 10px 5px;
}

.choose_list1 > li {
    width: 48%;
    margin: 0 0 0 2%;
}

.choose_list1 > li:first-child {
    margin: 0;
}

.choose_list1 {
    width: 60%;
    margin: 20px auto;
}

#name, #post, #mail, #mail_confirm, textarea, #url, #kana, #tel {
    width: 95%;
}

#zip1, #zip2 {
    width: 40%;
}

#city, #pref, #add {
    width: 95%;
    margin: 2px 0 0;
}

#add {
    margin: 2px 0 0;
}

/*-- エラーチェック --*/

.formError {
    top: 20px !important;
    left: 10% !important;
}

.zip2formError {
    left: 54% !important;
}

.prefformError, .cityformError, .addformError {
    top: 30px !important;
    left: 10% !important;
}


/*-- 商品詳細 --*/

.detailImg {
    width: 100%;
    float: none;
}

.detailTb {
    float: none;
    width: 100%;
    margin: 30px auto 0;
}

.detailTxt {
    width: 29%;
    margin: 0 0 0 1%;
}



.detailBnr img {
    max-width: 470px;
}


/*-- flexslider --*/

.flexslider {
    width: 100%;
    margin: 0;
    border: 0;
}

.flexslider img {
    width: 100%;
}

.flex-direction-nav a {
    top: 35%;
}

.flexslider:hover .flex-direction-nav .flex-prev {
    top: 35%;
}


/* ☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆ */

} /* max-width: 960px ここまで */

/* ☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆ */




/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */
/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */

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

/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */
/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */

.pc {
    display: block;
}

.sp {
    display: none;
}

.contact_tb th {
    font-size: 70%;
}

.news .scroll-pane {
    max-height: 400px;
}

/* ヘッダー
----------------------------------------------------------- */

.headerTel {
    width: 27%;
    background-size: 9%;
}

.hUl01 li:first-child + li + li {
    margin: 6px 0 0;
    width: 24%;
}

header h1 {
    font-size: 11px;
}

.hUl01 li:first-child + li + li a {
    font-size: 11px;
    padding: 1px 0 0 20px;
}

.hUl01 li:first-child + li a {
    font-size: 11px;
    padding: 1px 0 0 20px;
}




.drop_list li a {
    padding: 10px 0;
    font-size: 10px;
    font-weight: normal;
}



.listUl dt {
    height: 191px;
}


/* ☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆ */

} /* max-width: 768px ここまで */

/* ☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆ */




/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */
/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */

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

/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */
/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */

.pc {
    display: none;
}

.sp {
    display: block;
}

.pc02 {
    display: none;
}

.sp02 {
    display: inline-block;
}


/*-- テーブル --*/

table {
    width: 100%;
}

th, td {
    width: 100% !important;
    display: block;
    /*text-align: center;*/
}


/* ヘッダー
----------------------------------------------------------- */
.hUl01 li:first-child {
    width: 100%;
}

.logo {
    width: 55%;
    margin: 0;
}

.telBtn {
    width: 12%;
    margin: 0 0 0 16%;
}

.telBtn img {
    max-width: 31px;
}

.menuBtn {
    width: 15%;
    float: right;
}

#cover .pc {
    display: none !important;
}

#cover .sp {
    display: block !important;
}


/*--- modal ---*/

.telBtn a,
.menuBtn a {
    margin: 0;
    font-size: 370%;
    color: #555;
    text-align: center;
    display: block;
    line-height: 0;
}

#pageslide {
    width: 65%;
    padding: 1%;
    display: none;
    position: absolute;
    top: 0;
    height: 100%;
    z-index: 9999;
    color: #fff;
    background: #33a003;
    border-left: solid 5px #e5e5e6;
    box-shadow: rgba(0, 0, 0, 0.3) -1px 1px 10px 0px;
    -webkit-box-shadow: rgba(0, 0, 0, 0.3) -1px 1px 10px 0px;
    -moz-box-shadow: rgba(0, 0, 0, 0.3) -1px 1px 10px 0px;
    overflow-y: auto;
}

p.btn-close {
    width: 60%;
    margin: 5% auto;
    padding: 6px 2% 3px;
    background: #fbfbfb;
    font-size: 94%;
    text-align: center;
    box-shadow: rgba(0, 0, 0, 0.3) 1px 1px 2px 0;
    -webkit-box-shadow: rgba(0, 0, 0, 0.3) 1px 1px 2px 0;
    -moz-box-shadow: rgba(0, 0, 0, 0.3) 1px 1px 2px 0;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
}

p.btn-close > a {
    text-decoration: none !important;
    color: #4d4d4d;
    display: block;
}

.page_slide_navi {
    width: 96%;
    margin: 0 auto;
}

#slide_navi li a {
    margin: 7px 0 0;
    display: block;
    text-align: center;
    color: #ffffff;
    font-weight: bold;
    line-height: 3;
    text-decoration: none;
    font-size: 90%;
    border-bottom: 1px solid #e2e2e2;
}



/*-- トップページ --*/

.contentBox01 dt {
    float: none;
    width: 100%;
    text-align: center;
}

.contentBox01 dt img {
    width: 50%;
}



.contentBox01 dd {
    float: none;
    width: 100%;
    margin: 30px 0 0 0;
}

.contentBox02 {
    background: url(../img/contents02_bg.jpg) center top repeat;
}

.contentBox02 ul {
    padding: 30px 0;
}

.contentBox02 li {
    float: none;
    width: 100%;
    margin: 40px auto 0;
}

.contentBox02 li > dl > dt {
    text-align: center;
    border: none;
    padding: 0;
}

.contentBox02 li > dl > dt img {
    border: solid #fff 1px;
    padding: 4px 4px;
    width: 50%;
}

.contentBox02 li > dl > dd > dl > dt a {
    background: url(../img/icon02_off.png) left 16px no-repeat;
}

.contentBox02 li > dl > dd > dl > dt a:hover {
    background: url(../img/icon02_on.png) left 16px no-repeat;
}

.contentBox03 > div > ul > li {
    float: none;
}

.news li dt {
    float: none;
    width: 97%;
    text-align: left;
}


.news li dd {
    float: none;
    width: 96%;
}

.news li dd p {
    display: block;
}

.news dl {
    width: 96%;
}


.contentBox03 > div > ul > li:first-child {
    width: 100%;
}

.contentBox03 > div > ul > li:first-child + li {
    width: 100%;
    margin: 60px auto 0;
    text-align: center;
}

.contentBox03 > div > ul > li > h3 {
    text-align: left;
}

.contentBox03 > div > ul > li:first-child + li h3:first-child + p img {
    width: 50%;
}

.contentBox03 > div > ul > li:first-child + li h3:first-child + p + p {
    max-width: 275px;
    margin: 0 auto;
    width: 50%;
}

.contentBox04 li {
    float: none;
    width: 80%;
    margin: 60px auto 0;
}

.contentBox04 li:first-child {
    margin: 0 auto;
}

.telBnr dl {
    width: 57%;
}

.telBnr dt img {
    width: 80%;
}




/*-- ページトップ --*/

#pageTop {
    display: none !important;
}


/* フッター
----------------------------------------------------------- */

.sp nav {
    margin: 20px auto 0;
    background: #007c36;
}

nav ul {
    font-size: 12px;
}

.sp nav li a,
.sp nav li a:link,
.sp nav li a:visited {
    color: #fff;
}


.sp nav li {
    width: 100%;
    float: none;
}

.sp nav li a {
    padding: 3% 0;
    display: block;
    text-align: center;
    text-decoration: none;
    background: initial;
    border-top: 1px solid #aaa;
    /* border-bottom: 1px solid #333; */
    font-weight: bold;
}

.sp nav li a:hover {
    background: initial;
}


/*-- フッターアイコン --*/

.sp footer {
    margin: 0;
    /* padding: 20px 0 0; */
    /* background: #35a304; */
    box-shadow: none;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
}

.sp footer ul:after {
    content: '';
    display: block;
    clear: both;
}

.sp footer li {
    width: 32%;
    margin: 0 0.5%;
    float: left;
}

.sp footer li a {
    padding: 10px 0 5px;
    color: #fff;
    text-decoration: none;
    display: block;
    border: 2px solid #fff;
    text-align: center;
    font-size: 60%;
}

footer ul li:first-child a {
    border: 2px solid #fff;
}

.sp footer li a i {
    margin: 0 0 5px;
    font-size: 540%;
    display: block;
}

.sp .copyright {
    /* margin: 20px auto 0; */
    padding: 10px 2%;
    font-size: 70%;
    color: #fff;
    text-align: center;
}


/* トップページ
----------------------------------------------------------- */

#main, aside {
    float: none;
}

#main {
    width: 100%;
}

aside {
    width: 98%;
    margin: 20px auto 0;
}


/* 中ページ
----------------------------------------------------------- */
.company iframe {
    width: 96%;
    margin: 30px auto 0;
    display: block;
}

.listUl li {
    width: 47%;
}

.contact_tb th {
    font-size: 100%;

}

.choose_list1 {
    width: 80%;
}

#name, #post, #mail, #mail_confirm, textarea, #url, #kana, #tel {
    width: 100%;
}

#zip1, #zip2 {
    width: 40%;
}

#city, #pref, #add {
    width: 100%;
    margin: 2px 0 0;
}

/*-- エラーチェック --*/

.formError {
    top: 20px !important;
    left: 50% !important;
}

.zip1formError {
    left: 10% !important;
}

.zip2formError {
    left: 54% !important;
}

.prefformError, .cityformError, .addformError {
    top: 30px !important;
    left: 50% !important;
}

/*-- 商品詳細--*/

.detailBox > div {
    width: 100%;
    float: none;
}

.detailBox > .detailTxt {
    width: 98%;
    margin: 20px auto 0;
}

.listUl dt {
    height: 214px;
}
.detail td iframe {
   width: 100%;
}

/*-- ガイドバー --*/

.guideUl01 li a {
    font-size: 80%;
}

/*-- ナイロンコードカッター --*/

.nylonUl01 li a {
    font-size: 75%;
}

/*-- 安全・防護・便利グッズ --*/

.goodsUl01 {
    padding: 0 2%;
}

/*-- サイトマップ --*/

.siteBox > ul {
    float: none;
    width: 100%;
    margin: 10px auto 0;
}

/*-- スギハラ貿易の理念 --*/

.ideaUl01 li {
    float: none;
    width: 80%;
    margin: 30px auto 0;
}

.ideaUl01 li:first-child {
    margin: 0 auto;
}

.sub_contentBox01 {
    padding: 0 0 58px;
}

.idea #main >div:first-child + div > div > dl dt {
    float: none;
    width: 70%;
    margin: 0 auto;
}

.idea #main >div:first-child + div > div > dl dd {
    float: none;
    width: 100%;
    margin: 30px auto 0;
}

/*-- ブログ --*/

.blogBox > div {
    float: none;
    width: 100%;
    margin: 60px auto 0;
}

.blogBox > div:first-child {
    width: 100%;
    margin: 0 auto;
}



/* ☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆ */

} /* max-width: 591px ここまで */

/* ☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆ */




/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */
/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */

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

/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */
/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */

.telBtn {
    width: 12%;
    margin: 0 0 0 11%;
}

.menuBtn {
    width: 12%;
    float: right;
    margin: 0 0 0 5%;
}

.telBtn a,
.menuBtn a {
    font-size: 350%;
}

.ui-dialog.ui-widget.ui-widget-content.ui-corner-all.ui-front.ui-dialog-buttons {
    width: 94% !important;
    margin: 0 auto;
    position: absolute;
    left: 0;
    right: 0;
}



/*-- トップページ --*/


.contentBox01 dt img {
    width: 70%;
}

.contentBox02 li > dl > dt img {
    width: 70%;
}

.contentBox03 > div > ul > li:first-child + li h3:first-child + p img {
    width: 70%;
}

.contentBox03 > div > ul > li:first-child + li h3:first-child + p + p {
    max-width: 266px;
    width: 70%;
}

.txtBox02 {
    font-size: 80%;
    margin-bottom: 20px;
}

.txtHead {
    font-size: 20px;
    font-weight: 600;
}



/*-- 中ページ --*/


.listUl dt {
    height: 150px;
}



/* ☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆ */

} /* max-width: 414px ここまで */

/* ☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆ */




/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */
/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */

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

/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */
/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */

.telBtn {
    width: 8%;
}

.telBtn a,
.menuBtn a {
    font-size: 250%;
}


.listUl dt {
    height: 110px;
}


/* ☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆ */

} /* max-width: 320px ここまで */

/* ☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆ */

/*====================================
  margin
  ====================================*/

.mt3{	margin-top:3px;}
.mt5{	margin-top:5px;}
.mt7{	margin-top:7px;}
.mt10{	margin-top:10px;}
.mt15{	margin-top:15px;}
.mt20{	margin-top:20px;}
.mt25{	margin-top:25px;}
.mt30{	margin-top:30px;}
.mt35{	margin-top:35px;}
.mt50{	margin-top:50px;}
.mt70{	margin-top:70px;}
.mt100{	margin-top:100px;}

.mb5{   margin-bottom:5px;}
.mb10{	margin-bottom:10px;}
.mb13{  margin-bottom:13px;}
.mb15{	margin-bottom:15px;}
.mb20{	margin-bottom:20px;}
.mb25{	margin-bottom:25px;}
.mb30{	margin-bottom:30px;}
.mb35{	margin-bottom:35px;}
.mb50{	margin-bottom:50px;}
.mb70{	margin-bottom:70px;}
.mb100{	margin-bottom:100px;}

.ml5{	margin-left:5px;}
.ml10{	margin-left:10px;}
.ml15{	margin-left:15px;}
.ml20{	margin-left:20px;}
.ml25{	margin-left:25px;}
.ml30{	margin-left:30px;}
.ml35{	margin-left:35px;}
.ml40{	margin-left:60px;}
.ml50{	margin-left:50px;}

.mr5{	margin-right:5px;}
.mr10{	margin-right:10px;}
.mr12{	margin-right:12px;}
.mr15{	margin-right:15px;}
.mr20{	margin-right:20px;}
.mr25{	margin-right:25px;}
.mr30{	margin-right:30px;}
.mr35{	margin-right:35px;}
.mr50{	margin-right:50px;}

.mtb10{	margin-top:10px; margin-bottom:10px;}
.mtb20{	margin-top:20px; margin-bottom:20px;}
.mtb30{	margin-top:30px; margin-bottom:30px;}
.mtb40{	margin-top:40px; margin-bottom:40px;}
.mtb50{	margin-top:50px; margin-bottom:50px;}
.mtb100{margin-top:100px;margin-bottom:100px;}

.mlr10{ margin-left:10px; margin-right:10px;}
.mlr20{ margin-left:20px; margin-right:20px;}

/*====================================
  padding
  ====================================*/

.pt5{	padding-top:5px;}
.pt7{	padding-top:7px;}
.pt10{	padding-top:10px;}
.pt15{	padding-top:15px;}
.pt20{	padding-top:20px;}
.pt25{	padding-top:25px;}
.pt30{	padding-top:30px;}
.pt35{	padding-top:35px;}
.pt50{	padding-top:50px;}
.pt70{	padding-top:70px;}
.pt100{	padding-top:100px;}

.pb5{	padding-bottom:5px;}
.pb7{	padding-bottom:7px;}
.pb10{	padding-bottom:10px;}
.pb15{	padding-bottom:15px;}
.pb20{	padding-bottom:20px;}
.pb25{	padding-bottom:25px;}
.pb30{	padding-bottom:30px;}
.pb35{	padding-bottom:35px;}
.pb50{	padding-bottom:50px;}
.pb70{	padding-bottom:70px;}
.pb100{	padding-bottom:100px;}

.pl5{	padding-left:5px;}
.pl10{	padding-left:10px;}
.pl15{	padding-left:15px;}
.pl20{	padding-left:20px;}
.pl25{	padding-left:25px;}
.pl30{	padding-left:30px;}
.pl35{	padding-left:35px;}
.pl50{	padding-left:50px;}
.pl70{	padding-left:70px;}
.pl100{	padding-left:100px;}

.pr5{	padding-right:5px;}
.pr10{	padding-right:10px;}
.pr15{	padding-right:15px;}
.pr20{	padding-right:20px;}
.pr25{	padding-right:25px;}
.pr30{	padding-right:30px;}
.pr35{	padding-right:35px;}
.pr50{	padding-right:50px;}
.pr70{	padding-right:70px;}
.pr100{	padding-right:100px;}