/*
Theme Name: toolyuko
Theme URI: 
Author:SOEL design
Author URI: www
Description: 有恒精機商会オリジナルテーマ
Version: 1.0
*/


body {font-size: 16px!important;}

a:hover {text-decoration: none!important;}
p,li,dt,dd,th,td {
    font-size: 16px;
    line-height: 2;
}

p {
    margin: 0 auto 1.6em;
}

img {width: 100%;}



/*-------------------------　header　-------------------------*/
#header .header-inner {
    width: auto;
    max-width: 1440px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0 auto 3em;
    padding: 0 3em;
}

#header .header-inner h1.yuko-logo {
    width: 100%;
    display: flex;
    align-items: center;
    flex: 1;
}
#header .header-inner h1.yuko-logo img {width: 100%;}
#header .header-inner h1.yuko-logo a {
    width: 100%;
    flex: 1;
}

#header .header-inner h1.yuko-logo p {
    width: 100%;
    flex: 1;
    font-size: 120%;
    padding: 1em 0 0 1.5em;
}

#header .header-inner .header-contact {
    display: flex;
    flex: 1;
    align-items: center;
    justify-content: space-between;
}

#header .header-inner .header-contact .header-tel {
    width: 100%;
    flex: 1;
    text-align: center;
    line-height: 1.3;
}
#header .header-inner .header-contact .header-tel span {
    font-size: 220%;
    font-weight: bold;
}


#header .header-inner .header-contact .header-mail {
    display: block;
    text-align: center;
    margin: 0 auto;
    padding: 1em 2em;
    width: 240px;
    color: #fff !important;
    font-size: 100%;
    font-weight: 500;
    background-color: #e50000;
    transition: 0.3s;
    border-radius: 60px;
}

#header .header-inner .header-contact .header-mail a {
    display: inline-block;
    font-size: 120%;
    color: #fff !important;
    background: url(/wp-content/uploads/yuko/mail.svg)no-repeat;
    padding: 0 0 0 2.4em;
    line-height: 2.1;
    /*display: block;
    text-align: center;
    margin: 0 auto;
    padding: 1.4em 2em;
    width: 240px;
    color: #fff !important;
    font-size: 100%;
    font-weight: 500;
    background-color: #e50000;
    transition: 0.3s;
    border-radius: 50px;*/
}


/*#header .header-inner .header-contact .header-mail a::before {
    content: url(/wp-content/uploads/yuko/mail.svg);
    display: inline-block;
    position: relative;
    width: 40px;
    height: 60px;
    padding-right: 0.1em;
}
*/










#header > .navi.new > ul {
    width: 100%;
    max-width: 1240px!important;
    display: flex;
    justify-content: space-between;
}

#header > .navi.new > ul li {

}






/*-------------------------　パンくず　-------------------------*/
#breadcrumb {background-color: #f8f8f8;}
#breadcrumb ul {
    width: 100%;
    max-width: 1200px;
    padding: 1em 0;
    margin: 0 auto;
}
#breadcrumb ul li {
    display: inline;
    font-size: .8rem!important;
}
#breadcrumb ul li.breadcrumb-item::before{
    content: "\03e";
    margin: 0 0.5em;
  }
#breadcrumb ul li a {color: #e50000!important;}








.c {text-align: center;}
.br-pc {display: block;}
.br-sp {display: none;}




#yuko {
    background: #f8f8f8;
}


.content-box {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 3em 0 8em;
}



/*　タイトル　*/
h2.ttl01 {
    position: relative;
    display: inline-block;
    padding: 0 1.5em;
    font-size: 200%;
    font-weight: 600;
    letter-spacing: 1.6px;
    color: #e50000;
    margin: 0 auto 2em;
}
h2.ttl01::before {
    content: '';
    position: absolute;
    top: 50%;
    display: inline-block;
    width: 44px;
    height: 2px;
    left:0;
    background-color: #e50000;
    -webkit-transform: rotate(60deg);
    transform: rotate(60deg);
}
h2.ttl01::after {
    content: '';
    position: absolute;
    color: #e50000;
    top: 50%;
    display: inline-block;
    width: 44px;
    height: 2px;
    right: 0;
    background-color: #e50000;
    -webkit-transform: rotate(-60deg);
    transform: rotate(-60deg);
}

h2.ttl02 {
    position: relative;
    padding: 0.8em 1em;
    margin: 0 auto 2em;
    font-size: 140%;
    font-weight: 600;
    color: #fff;
    background-color: #e50000;
}
h2.ttl02::after {
  content: '';
  position: absolute;
  border-left: 20px double #fff;
  height: 100%;
  top: 0;
  right: 50px;
  transform: skew(-20deg);
}

h2.ttl03 {
    display: inline-block;
    position: relative;
    padding: 0.6em 2em;
    margin: 0 auto 1em;
    font-size: 140%;
    color: #fff;
    background-color: #3b3b3b;
    border-radius: 5px;
}

h2.ttl03::after {
    position: absolute;
    content: '';
    top: 100%;
    left: 30px;
    border: 15px solid transparent;
    border-top: 13px solid #3b3b3b;
    width: 0;
    height: 0;
}

h2.ttl04 {
	position: relative;
	padding: 1.8em 0 0.3em;
    margin: 0 auto 1em;
	font-size: 160%;
    font-weight: 600;
    letter-spacing: 1.6px;
	border-bottom: 1px solid #000;
}
h2.ttl04 span {
	position: relative;
	z-index: 2;
}
h2.ttl04::before {
	content: attr(data-en);
	position: absolute;
	top: 0px;
	left: 0;
    font-size: 70%;
    color: #fff;
    padding: 0.3em 0.8em 0.2em;
    background-color: #e50000;
    border-radius: 30px;
	text-transform: uppercase;
	z-index: 1;
}

h2.ttl05 {
    display: inline-block;
    position: relative;
    text-align: center;
    font-size: 200%;
    font-weight: 600;
    letter-spacing: 1.3px;
    margin: 0 auto 1rem;
    padding: 0 0 1.5rem;
    border-bottom: 3px solid #ccc;
}
h2.ttl05::after {
    position: absolute;
    border-bottom: 3px solid #e50000;
    top: 100%;
    left: 0;
    width: 70px;
    content: '';
}

h2.ttl06 {
    position: relative;
    margin: 0 auto 1em;
    font-size: 160%;
    font-weight: 500;
    line-height: 1.3;
    padding: 0 0 0.5em 1.5em;
    border-bottom: 2px dashed #aaa;
}
h2.ttl06::before {
    content: "";
    display: block;
    position: absolute;
    top: 15px;
    left: 0;
    width: 20px;
    height: 3px;
    background-color: #e80000;
    border-radius: 20px;
}



/*　ボタン　*/
.btn1 a {
    display: block;
    text-align: center;
    margin: 0 auto 1.6em;
    padding: 1.4em 2em;
    width: 240px;
    color: #fff!important;
    font-size: 100%;
    font-weight: 500;
    background-color: #e50000;
    transition: 0.3s;
}
.btn2 a {
    display: block;
    text-align: center;
    margin: 0 auto 1.6em;
    padding: 1.4em 2em;
    width: 240px;
    color: #fff!important;
    font-size: 100%;
    font-weight: 500;
    background-color: #e50000;
    transition: 0.3s;
    border-radius: 50px;
}



span.maker-y {
    font-weight: 600;
    background: linear-gradient(transparent 50%, rgba(255, 252, 107, 0.69) 50%);
}







/*-------------------------　TOP　-------------------------*/
.top-content {}


.top-content-box {
    margin: 3em auto;
    padding: 8em 0 0;
}





h2.top-ttl {
    position: relative;
    text-align: center;
    font-size: 300%;
    font-weight: 500;
    letter-spacing: 1.3px;
    margin: 0 auto 1rem;
    padding: 0 0 1.8rem;
}
h2.top-ttl::after {
    position: absolute;
    border-bottom: 2.5px solid #e50000;
    border-radius: 20px;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    width: 70px;
    content: '';
}
h3.top-ttl-sub {
    text-align: center;
    font-size: 18px;
    font-weight: 500;
    letter-spacing: 1.3px;
    margin: 0 auto 1em;
    line-height: 1.4;
}






/*　取り扱い商品　*/
.top-product {}
.top-product-list {
    width: 100%;
    max-width: 920px;
    margin: 2em auto 0;
}
.top-product-list ul {
    display: flex;
    flex-wrap: wrap;
    margin: 0 auto 3em;
}
.top-product-list ul li {
    width: 25%;
    flex-grow: 1;
    border: 1px solid #ccc;
    margin: 0 0.5em 1em;
    background: #f8f8f8;
}
.top-product-list ul li a {color: #000;}
.top-product-pic {
    padding: 1em 0 0.5em;
    text-align: center;
    margin: 0 auto;
    background: #fff;
}
.top-product-pic img {
    width: 100%;
    max-width: 225px;
    height: 170px;
    object-fit: contain;
    min-height: 0;
}
.top-product-txt {
    background: #f8f8f8;
    position: relative;
    height: auto;
    padding: 1em;
}
.top-product-type {
    border-bottom: 2px solid #ccc;
}
.top-product-type p.cat {
    font-size: 12px;
    font-weight: bold;
    color: #B98800;
    line-height: 1.4!important;
    margin-bottom: 0;
}
.top-product-type p.scat {
    font-size: 14px;
    margin-bottom: 0.5em;
}
.top-product-txt h3 {
    padding: 0.5em 0;
    font-size: 130%;
    font-weight: bold;
    line-height: 1.5;
    word-break: break-all;
}
.top-product-txt p.model-num {
    font-size: 12px;
    font-weight: 600!important;
    line-height: 1.4!important;
}
.top-product-txt p.lead {
    font-size: 12px;
    line-height: 1.4!important;
    margin: 1em auto 0;
}






/*　お知らせ　*/
.top-news-box {
    width: 100%;
    max-width: 920px;
    margin: 3em auto;
    border-top: 1px solid #000;
    border-bottom: 1px solid #000;
    padding: 2em 1em;
}

.top-news-box h3{
    font-size: 20px;
    font-weight: bold;
}









/*.top-whats_new {
    width: 960px;
    margin: 3em auto  1em;
}



.top-whats_new .title {
    width: 960px;
    height: 25px;
    margin: 0;
    padding: 0 0 30px 0;
    clear: both;
}

.top-whats_new .title h2 {
    font-size: 1.5em;
    color: #000000;
    margin: 0;
    padding: 0 0 0 12px;
    text-align: left;
    border-left: 3px solid #ff0000;
    letter-spacing: 0.1em;
    font-weight: normal;
}

.top-whats_new div.top-info-box {
    color: #333333;
    width: 960px;
    margin: 0 auto;
    padding: 25px 0;
    text-align: left;
    font-weight: normal;
}
.top-whats_new .top-info-box dt {
    margin: 0;
    padding: 0;
    float: left;
    vertical-align: top;
}
.top-whats_new .top-info-box .date {
    font-size: 1em;
    letter-spacing: 0.15em;
    margin: 0;
    padding: 0 0 0 30px;
}

.top-whats_new .top-info-box dd {
    font-size: 1em;
    text-align: left;
    letter-spacing: 0.15em;
    margin: 0;
    padding: 0 0 0 230px;
    width: 700px;
    vertical-align: top;
}
*/


/*　SNS　*/
.top-content-sns {
    padding: 5em 0;
    background: #f8f8f8;
    margin: 8em auto 0;
}
.top-content-sns-box {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    max-width: 1080px;
    margin: 0 auto;
}

.twitter {
    width: 100%;
    flex: 1;
    padding: 0 1em;
}


.facebook {
    width: 100%;
    flex: 1;
    padding: 0 1em;
}




/*.top-col {
    width: 100%;
    max-width: 1240px;
    display: flex;
    margin: 0 auto;
}
.top-col-l {
    width: 100%;
    flex: 2;
    padding: 0 2em 0 0;
}
.top-col-r {
    width: 100%;
    flex: 1;
    border-left: 1px solid #ccc;
    padding: 3em 0 0 2em;
}

.top-col-r .twitter h2 img {
    width: 100%;
}



.top-col-r .facebook {
    margin: 2em auto 0;
}




.top-whats_new {
    width: 960px;
    margin: 3em auto  1em;
}



.top-whats_new .title {
    width: 960px;
    height: 25px;
    margin: 0;
    padding: 0 0 30px 0;
    clear: both;
}

.top-whats_new .title h2 {
    font-size: 1.5em;
    color: #000000;
    margin: 0;
    padding: 0 0 0 12px;
    text-align: left;
    border-left: 3px solid #ff0000;
    letter-spacing: 0.1em;
    font-weight: normal;
}

.top-whats_new div.top-info-box {
    color: #333333;
    width: 960px;
    margin: 0 auto;
    padding: 25px 0;
    text-align: left;
    font-weight: normal;
}
.top-whats_new .top-info-box dt {
    margin: 0;
    padding: 0;
    float: left;
    vertical-align: top;
}
.top-whats_new .top-info-box .date {
    font-size: 1em;
    letter-spacing: 0.15em;
    margin: 0;
    padding: 0 0 0 30px;
}

.top-whats_new .top-info-box dd {
    font-size: 1em;
    text-align: left;
    letter-spacing: 0.15em;
    margin: 0;
    padding: 0 0 0 230px;
    width: 700px;
    vertical-align: top;
}
*/








/*-------------------------　固定ページ　-------------------------*/
/*　加工事例　*/
.case-content {
    margin: 0 auto 10em;
}

.client-box,
.chance-box {
    width: 100%;
    max-width: 1020px;
    padding: 2em 3em;
    margin: 1em auto 0;
}
.client-box { background-color: #fff;}
.propose-box {
    width: 100%;
    max-width: 1020px;
    padding: 2em 3em;
    margin: 1em auto 3em;
    background-color: #fff;
}
.propose-item {
    display: flex;
}
.propose-txt {
    width: 100%;
    flex: 1;
}
.propose-img {
    width: 100%;
    flex: 1;
    text-align: center;
}
.propose-img img {
    width: 70%;
}


/*　キャンペーン　*/
.campaign-mv img {width: 60%;}
.campaign-content {
    width: 100%;
    max-width: 1020px;
    padding: 2em 3em;
    margin: 1em auto 0;
}
.campaign-box {
    width: 100%;
    max-width: 1020px;
    padding: 2em 3em;
    margin: 2em auto 3em;
    background-color: #fff;
}
.campaign-box h3 {
    font-size: 130%;
    font-weight: 600;
    color: #fff;
    background-color: #e80000;
    padding: 0.5em 1em;
    margin: 0 auto 1em;
}

.campaign-tester {
    display: flex;
    padding: 1em 0;
}
.tester-img {
    width: 100%;
    flex: 1;
}
.tester-img img {width: 100%;}



/*　まんが　*/
#yuko .comics {margin: 0 auto 5em;}

#yuko .comics-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
#yuko .comics-item {
    width: 45%;
    padding: 1em;
    background: #fff;
    border: 1px solid #ccc;
}

#yuko .comics-item .comics-img {
    margin: 0 auto 1em;
}

#yuko .comics-item h2 {
    text-align: center;
    color: #e50000;
    font-weight: 600;
    font-size: 1.4rem;
}



#yuko .comics-thumbnail {
    width: 38%;
    background: #fff;
    padding: 1em;
    border: 1px solid #ccc;
}

#yuko .comics-thumbnail h2 {
    text-align: center;
    color: #e50000;
    font-weight: 600;
    font-size: 1.1rem;
    margin: 0.5em auto 0;
}
















/*-------------------------　共 通　-------------------------*/
#yuko .content-box {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 3em 0 8em;
    box-sizing: border-box;
}


#yuko h2.ttl {
    position: relative;
    font-size: 200%;
    font-weight: 600;
    border-left: 3px solid #e50000;
    line-height: 1.3;
    letter-spacing: 1.3px;
    padding-left: 0.5em;
    margin: 0 auto 1em;
}




#yuko h2.ttl02 {
    position: relative;
    padding: 0.8em 1em;
    margin: 0 auto 2em;
    font-size: 140%;
    font-weight: 600;
    color: #fff;
    background-color: #e50000;
}
#yuko h2.ttl02::after {
  content: '';
  position: absolute;
  border-left: 20px double #fff;
  height: 100%;
  top: 0;
  right: 50px;
  transform: skew(-20deg);
}








#yuko h2.ttl05 {
    display: inline-block;
    position: relative;
    text-align: center;
    font-size: 200%;
    font-weight: 600;
    letter-spacing: 1.3px;
    margin: 0 auto 1rem;
    padding: 0 0 1.5rem;
    border-bottom: 3px solid #ccc;
}
#yuko h2.ttl05::after {
    position: absolute;
    border-bottom: 3px solid #e50000;
    top: 100%;
    left: 0;
    width: 70px;
    content: '';
}




#yuko h3.ttl {
    position: relative;
    font-size: 160%;
    font-weight: 600;
    border-left: 3px solid #e50000;
    line-height: 1.3;
    letter-spacing: 1.3px;
    padding-left: 0.5em;
    margin: 0 auto 1em;
}







/*-------------------------　会社概要　-------------------------*/
#yuko .company {margin: 0 auto 8em;}
#yuko .company-box {padding: 3em 3em 0;}

#yuko .message {
    display: flex;
    padding: 3em 3em 0;
    align-items: center;
}

#yuko .message .message-txt {
    width: 100%;
    flex: 2;
    padding-right: 5em;
}
#yuko .message .message-txt h3 {
    font-size: 200%;
    font-weight: 600;
    line-height: 1.5;
    margin: 0 auto 1em;
}
#yuko .message .message-txt p.ceo { 
    text-align: right;
    line-height: 1.6!important;
}
#yuko .message .message-txt p.ceo span {
    font-size: 160%;
    letter-spacing: 1.3px;
}


#yuko .message .message-img {
    width: 100%;
    flex: 1;
}
#yuko .message .message-img img {width: 100%;}




#yuko .company-box ol {
    background: #fff;
    padding: 5em 10em;
    list-style: decimal;
}
#yuko .company-box ol h3 {
    text-align: center;
    font-size: 200%;
    font-weight: 600;
    margin: 0 auto 1.5em;
}
#yuko .company-box ol p {
    font-size: 125%;
    line-height: 1.8!important;
    text-align: center;
    margin: 0 auto 2em;
}




#yuko .company-box ol li {margin: 0 auto 1em!important;}
#yuko .company table {
    width: 100%;
    table-layout: inherit;
}
#yuko .company table th,
#yuko .company table td {
    border: 1px solid #ccc;
    padding: 1em 1.5em;
}
#yuko .company table th {
    width: 20%;
    text-align: center;
    background: #f3f3f3;
}
#yuko .company table td {
    background: #fff;
}


/*-------------------------　取り扱いメーカー一覧　-------------------------*/
#yuko .maker-logo {
    background: #fff;
    padding: 3em 5em 1em;
    margin: 0 auto 5em;
}
#yuko .maker-logo ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
#yuko .maker-logo ul li {
    width: 30%;
    margin: 0 0 2em;
}
#yuko .maker-logo ul li img {width: 85%;}




#yuko .maker-box {
    background: #fff;
    padding: 3em;
    margin: 0 auto 5em;
}





#yuko .maker-box h3 {
    position: relative;
    font-size: 1.25rem;
    font-weight: 600;
    color: #fff;
    background: #3b3b3b;
    padding: 0.8em 1em;
    margin: 0 auto 1em;
}




#yuko .maker-list ul {
    list-style: square;
    display: flex;
    flex-wrap: wrap;
    margin-left: 2em;
}
/*#yuko .maker-list ul::after {
    content:"";
    display: block;
    width:80%;
    height: 0;
}*/

#yuko .maker-list ul li {
    width: 32.888%;
    margin: 0 0 1em;
}

#yuko .maker-list ul li::marker {
    color: #e50000;
    font-size: 1.1em;
}



#yuko .maker-list ul li a {
    color: #000;
    border-bottom: 1px solid #000;
}
/*#yuko .maker-list ul li a:hover {
    border-bottom: 1px solid #000;
}*/






/*-------------------------　イージーオーダー　-------------------------*/
#easy {
    background: #fff;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0;
    box-sizing: border-box;
}
#easy .content-box {
    margin: 0 auto;
    padding: 0 5em 5em;
}
#easy .mv {
    margin: 0 auto 3em;
}
#easy .ttl01 {
    margin: 0 auto 1em;
}
#easy p span.red-b {
    font-weight: bold;
    font-size: 1.5rem;
    padding: 0 0.3em;
}
#easy p span.red {
    color: #ffff00;
    background: #e50000;
    font-size: 1.5rem;
    font-weight: bold;
    padding: 0.3em 0.8em;
    margin: 0 0.3em;
}

#easy .flex-box {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
}

#easy .flex-box-img {
    width: 50%;
    text-align: right;
}
#easy .flex-box-img img {
    width: 50%;
}
#easy .flex-box-txt {
    width: 50%;
}
#easy .flex-box-txt li {
    line-height: 1.6;
    margin-bottom: 1em;
}
#easy .flex-box-txt li span {
    color: #e50000;
    font-size: 1.5rem;
    font-weight: bold;
}

#easy h2.lp-ttl01 {
    text-align: center;
    color: #fff;
    background: #e50000;
    font-size: 1.5rem;
    font-weight: bold;
    padding: 0.8em 0.8em;
    margin: 0 auto 1em;
}
#easy ol li {
    margin-bottom: 1em;
}
#easy ol li span {
    color: #fff;
    background: #000;
    padding: 0.5em 1em;
    font-weight: bold;
    margin-right: 0.8em;
}

#easy .flow {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
#easy .flow-box {
    width: 23%;
    text-align: center;
}
#easy .flow-box h3 {
    color: #fff;
    background: #000;
    padding: 0.5em;
    margin: 0 auto 1em;
}
#easy .flow-box img {width: 40%;}
#easy .flow-box p {line-height: 1.8;}

#easy .catalog a {
    color: #fff;
    background: #e50000;
    padding: 0.8em 1.5em;
}





#easy .faq-box dt {margin-bottom: 0!important;}
#easy .faq-box dd {
    margin-bottom: 1em!important;
    padding-top: 0!important;
    padding-bottom: 0!important;
}


#easy .contact-box {
    padding: 0 8em!important;
}







/*-------------------------　よくある質問　-------------------------*/
#yuko .faq {}
#yuko .faq-box {margin: 3em auto 0;}
#yuko .faq-box dt {
    font-size: 120%;
    font-weight: 600;
    margin-bottom: 1em;
}

#yuko .faq-box dt::before,
#yuko .faq-box dd::before {
    margin-right: 0.4em;
}

#yuko .faq-box dt::before {
    content: "Q.";
    color: #e50000;
}

#yuko .faq-box dd {
    margin: 0 0 2.5em;
    padding: 1em 1.5em;
    background-color: #fff;
}




/*-------------------------　アクセス　-------------------------*/
#yuko .access {margin: 0 auto 5em;}
#yuko .access h3 {
    font-size: 160%;
    line-height: 1.8;
    margin: 0 auto 1em;
}
#yuko .access-box {
    display: flex;
    padding: 0 5em;
    margin: 0 auto 5em;
}
#yuko .access-box .access-info {
    width: 100%;
    flex: 1;
}
#yuko .access-box .access-img {
    width: 100%;
    flex: 1;
}
#yuko .access-box .access-img img {width: 100%;}

#yuko .access .access-map {
    padding: 0 5em;
    margin: 0 auto;
}
#yuko .access .access-map iframe {
    width: 100%;
    height: 450px;
}
#yuko .access p.access-txt {
    text-align: center;
    margin: 0 auto 3em;
}





/*-------------------------　お問い合わせ　-------------------------*/
#yuko .contact {margin: 0 auto;}
#yuko .contact-box {
    padding: 5em 10em;
    background: #fff;
}
#yuko .contact-box table {
    width: 100%;
    margin: 2em auto;
}
#yuko .contact-box table th,
#yuko .contact-box table td {
    padding: 1em;
    border: 1px solid #ccc;
}
#yuko .contact-box table th p,
#yuko .contact-box table td p {
    margin-bottom: 0;
}
#yuko .contact-box table th {
    width: 30%;
    text-align: left;
    background: #f3f3f3;
}
#yuko .contact-box table th span.may {
    font-size: 12px;
    color: #fff;
    background: #e50000;
    padding: 0.5em 0.8em;
    margin-right: 1em;
    border-radius: 3px;
}
#yuko .contact-box table td input,
#yuko .contact-box table td textarea { border: 1px solid #ccc;}
#yuko .contact-box table td input {
    width: 80%;
    padding: 0.6em 0.5em;
}
#yuko .contact-box table td textarea {width: 100%;}
#yuko .contact-box .txt {
    text-align: center;
    margin: 0 auto 2em;
}
#yuko .contact-box .submit {text-align: center;}
#yuko .contact-box .submit input {
    color: #fff;
    background: #3b3b3b;
    border: none;
    width: 100%;
    max-width: 320px;
    font-size: 16px!important;
    padding: 1.3em;
}
#yuko .contact-box .submit input:hover {background: #e50000;}



/*-------------------------　footer　-------------------------*/
/*　ブランド取り扱い一覧　*/
.footer-brand {
    margin: 0 auto;
    background: #fff;
    padding: 8em 0;
}
.footer-brand-box {
    width: 100%;
    max-width: 920px;
    margin: 0 auto;
}
.footer-brand-box h2 {
    text-align: center;
    font-size: 160%;
    font-weight: 600;
    letter-spacing: 1.3px;
    margin: 0 auto 0.8em;
}
.footer-brand-box ul {
    display: flex;
    flex-wrap: wrap;
    margin: 3em auto 0;
}
.footer-brand-box ul li {
    width: 20%;
    padding: 0 1em 2em;
    flex-grow: 1;
}
.footer-brand-box ul li img {width: 100%;}
.footer-brand-list {
    width: 100%;
    max-width: 920px;
    margin: 0 auto;
    display: flex;
}
.footer-brand-list  ul {
    padding: 0 1em;
    flex-grow: 1;
}
.footer-brand-list  ul li {line-height: 2.1;}
.footer-brand p {text-align: center;}










/*　お問い合わせ　*/
.footer-contact {
    margin: 0 auto;
    background: #3b3b3b;
    padding: 6em 0;
}
.footer-contact h2 {
    color: #fff;
    text-align: center;
    font-size: 300%;
    font-weight: 500;
    letter-spacing: 1.3px;
    line-height: 1.8;
    margin: 0 auto;
}
.footer-contact h3 {
    text-align: center;
    color: #fff;
    font-size: 140%;
    letter-spacing: 1.3px;
}

.footer-contact-box {
    width: 100%;
    max-width: 1080px;
    display: flex;
    margin: 3em auto 0;
}
.footer-contact-info {
    width: 100%;
    flex: 1;
    text-align: center;
    color: #fff;
}
.footer-tel,
.footer-fax {
    font-size: 250%;
    font-weight: 600;
    letter-spacing: 1.1px;
}
.footer-tel::before {
    content: url(/wp-content/uploads/yuko/tel.svg);
    display: inline-block;
    position: relative;
    width: 45px;
    height: 45px;
    top: 10px;
    padding-right: 0.1em;
}
.footer-fax::before {
    content: url(/wp-content/uploads/yuko/fax.svg);
    display: inline-block;
    position: relative;
    width: 50px;
    height: 50px;
    top: 10px;
    padding-right: 0.1em;
}
.footer-contact-info p {
    margin: 0.8em auto 1em;
}
.footer-mail {
    font-size: 160%;
    letter-spacing: 1.1px;
    margin: 0 auto 1em;
}
.footer-mail::before {
    content: url(/wp-content/uploads/yuko/mail.svg);
    display: inline-block;
    position: relative;
    width: 60px;
    height: 60px;
    top: 20px;
    padding-right: 0.1em;
}


/*　footer　*/
.footer-content {margin: 0 auto;}
.footer-info-box {
    width: 100%;
    max-width: 1240px;
    display: flex;
    margin: 0 auto;
    font-size: 14px;
}
.footer-company {
    width: 100%;
    flex: 2;
}
.footer-company-box {
    display: flex;
}
.footer-company-logo {
    width: 100%;
    flex: 1;
    padding: 2em 2em 0 0;
}
.footer-company-logo img {
    width: 100%;
}
.footer-company-txt {
    width: 100%;
    flex: 2;
}
.footer-company-txt ul {
    padding: 2em 0 0;
}
.footer-company-txt ul li {
    line-height: 1.5;
    margin: 0 auto;
}
.footer-subinfo {
    width: 100%;
    max-width: 1240px;
    margin: 1em auto;
}
.footer-subinfo ul {
    display: flex;
}
.footer-subinfo ul li {
    list-style: none;
    padding-right: 1.5em;
}
.footer-subinfo ul li a {
    color: #000;
    font-size: 12px;
}
.footer-subinfo ul li a::before {
    content: '\03e';
    padding-right: 0.3em;
}
.footer-info {
    width: 100%;
    flex: 1;
    border-left: 1px solid #ccc;
    padding: 0 0 0 2em;
}
.footer-info ul {
    padding: 2em 0 0;
}
.footer-info ul.footer-info-item {
    padding: 0;
}
.footer-info ul li {
    line-height: 2.1;
}
.footer-info ul li a {
    color: #000;
}
.footer-copy {
    font-size: 12px;
    color: #fff;
    text-align: center;
    background: #3b3b3b;
    padding: 0.3em 0 0.5em;
}
#page_top {
    position: fixed;
    bottom: 32px;
    right: 32px;
    height: 32px;
    width: 32px;
    z-index: 999999;
}


/*-------------------------　商品掲載　-------------------------*/
#yuko .content-box .list-block {}
#yuko .content-box .list-block ul {
    display: flex;
    flex-wrap: wrap;
    margin: 0 auto 3em;
    justify-content: space-between;
}

#yuko .content-box .list-block ul li {
    width: 32%;
    border: 1px solid #ccc;
    margin: 0 0 1em;
    padding: 1em 1.5em 0;
    background: #fff;
    box-sizing: border-box;
}
#yuko .content-box .list-block ul li a {color: #333;}
#yuko .content-box .list-block .pic {
    text-align: center;
    background: #fff;
}
#yuko .content-box .list-block .pic img {
    display: block;
    width: auto;
    height: 100%;
    max-height: 150px;
    margin: 0 auto;
}

#yuko .content-box .list-block .txt-box {
    background: #fff;
    position: relative;
    padding: 1em 0;
}

#yuko .content-box .list-block .txt-box .hd p.cat {
    color: #B98800;
    font-weight: 600;
    margin-bottom: 0;
}
#yuko .content-box .list-block .txt-box .hd p.scat {
    margin-bottom: 0.5em;
}


#yuko .content-box .list-block .txt-box .hd  {
    border-bottom: 1px solid #ccc;
    margin: 0 auto 0.5em;
}
#yuko .content-box .list-block .txt-box h3 {
    font-size: 130%;
    font-weight: 600;
}
#yuko .content-box .list-block .txt-box p.model-num {
    font-weight: 600;
    margin-bottom: 1em;
}










/*---------------------------------------------------------------------
　ここからスマホ
---------------------------------------------------------------------*/
@media screen and (max-width: 540px) {
    html,
	body {
		overflow-x: hidden;
		overflow-y: scroll;
		-webkit-overflow-scrolling: touch;
	}
    
    #breadcrumb {display: none;}
    #breadcrumb ul {padding: 2em 0 0 1em;}
    /*#breadcrumb ul li {font-size: 12px!important;}*/
    
    
    .br-pc {display: none;}
    .br-sp {display: block;}
    
    
    .btn2 a {padding: 1.4em 1em;}
    
    
    #slideshow_bg {margin-top: 1em;}
    
    
    
    h2.ttl01 {font-size: 130%;}
    h2.ttl01::before,
    h2.ttl01::after {
        width: 30px;
    }
    h2.ttl02 {
        font-size: 130%;
        line-height: 1.4;
        padding: 0.8em 1.5em 0.7em 1em;
    }
    h2.ttl02::after {display: none;}
    h2.ttl03 {
        font-size: 110%;
        padding: 0.4em 1.5em;
    }
    h2.ttl04 {
        font-size: 130%;
        line-height: 1.4;
    }
    h2.ttl05 {
        font-size: 130%;
        line-height: 1.4;
        padding: 0 0 1rem;
    }
    h2.ttl06 {
        font-size: 130%;
        line-height: 1.4;
        padding: 0 0 0.3em 1.5em;
    }
    h2.ttl06::before {top: 13px;}
    
    
    
    
    
    
    /*-------------------------　TOP　-------------------------*/
    .top-content-box {
        margin: 0em auto;
        padding: 3em 0 0;
    }
    
    h2.top-ttl {
        font-size: 200%;
        padding: 0 0 1rem;
        margin: 0 auto 0.8rem;
    }
    h3.top-ttl-sub {font-size: 14px;}
    
    
    /*　取扱商品一覧　*/
    .top-product-list {
        max-width: 100%;
    }
    .top-product-list ul li {
        width: 45%;
        margin: 0 0.2rem 0.4rem;
    }
    .top-product-pic {
        padding: 0.5em 0;
    }
    .top-product-pic img {
        height: 90px;
    }
    .top-product-txt h3 {font-size: 14px;}
    
    
    

    .top-product-txt {height: auto;}
    .top-product-txt p.model-num,
    .top-product-txt p.lead {display: none;}
    
    
    
    
    /*　お知らせ　*/
    .top-news-box {
        width: auto;
        max-width: 100%;
    }
    
    
    
    
    .top-whats_new {
        width: auto;
        padding: 0 1.5em;
        margin: 3em auto;
    }
    .top-whats_new .title {width: auto;}
    .top-whats_new div.top-info-box {
        width: auto;
        padding: 0;
    }
    .top-whats_new .top-info-box .date {
        width: 100%;
        padding: 0 0 0.5em 0;
        border-bottom: 1px solid #ccc;
    }
    
    .top-whats_new .top-info-box dd {
        width: auto;
        padding: 2.7em 0 0;
    }
    
    
    /* SNS */
    .top-content-sns {
        padding: 3em 1.5em;
        margin: 2em auto 0;
    }
    .top-content-sns-box {
        display: block;
        max-width: 100%;
    }
    .twitter {
        width: auto;
        padding: 0;
        margin: 0 auto 3em;
    }
    .facebook {
        width: auto;
        padding: 0;
    }
    
    
    /*　取り扱いブランド　*/
    .footer-brand {padding: 3em 1.5em;}
    .footer-brand-box h2 {
        font-size: 120%;
        letter-spacing: 1.1px;
        margin: 0 auto 0.5em;
    }
    .footer-brand p {text-align: left;}
    .footer-brand-box ul {margin: 2em auto 0;}
    .footer-brand-box ul li {
        width: 40%;
        padding: 0 0.5em 1em;
    }
    .footer-brand-list {
        max-width: 100%;
        flex-wrap: wrap;
    }
    .footer-brand-list ul li {
        width: 100%;
        font-size: 12px;
    }
    .footer-tel a, .footer-fax a{
        color: #fff!important;
    }
    
    
    /*-------------------------　固定ページ　-------------------------*/
    .content-box {
        width: auto;
        max-width: 100%;
        padding: 5em 0 3em;
    }
    
    
    /*　加工事例　*/
    .case-content {
        margin: 0 auto 3em;
    }
    .client-box,
    .chance-box,
    .propose-box {
        width: auto;
        max-width: 100%;
        padding: 1.5em;
    }
    .propose-item {
        display: block;
    }
    .propose-img {
        margin: 1em auto 0;
    }
    .propose-img img {width: 100%;}
    
    
    /*　キャンペーン　*/
    .campaign-mv img {width: 100%;}
    .campaign-content {
        width: auto;
        max-width: 100%;
        padding: 1.5em;
        margin: 0 auto;
    }
    .campaign-box {
        width: auto;
        max-width: 100%;
        margin: 0 auto 2em;
        padding: 1.5em;
    }
    .campaign-box h3 {
        font-size: 100%;
        line-height: 1.4;
        padding: 0.5em 0.8em;
    }
    .campaign-tester {
        display: block;
    }
    .tester-img {padding: 0 0 1em;}
    
    
    
    /*　まんが　*/
    #yuko .comics-list {display: block;}
    #yuko .comics-item {
        width: 100%;
        margin-bottom: 1em;
        box-sizing: border-box;
    }
    #yuko .comics-item h2 {font-size: 1.2rem;}
    
    #yuko .comics-thumbnail {
        width: 100%;
        box-sizing: border-box;
    }
    
    
    
    /*-------------------------　共　通　-------------------------*/
    p,li,dt,dd,th,td {font-size: 14px!important;}                                              
    
    
    
    
    
    
    
    
    
    
    #yuko .content-box {
        width: auto;
        max-width: 100%;
        padding: 4em 1.5em;
    }
    
    
    #yuko h2.ttl {font-size: 130%;}
    
    #yuko h2.ttl02 {
        font-size: 130%;
        line-height: 1.4;
        padding: 0.5em 0 0.5em 1em;
        margin: 0 auto 1em;
    }
    #yuko h2.ttl02::after {right: 12px;}
    #yuko h2.ttl05 {
        font-size: 130%;
        padding-bottom: 0.3em;
    }
    #yuko h2.ttl05::after {width: 20px;}
    
    
    
    /*-------------------------　商品掲載　-------------------------*/
    #yuko .content-box .list-block ul {
        justify-content: space-between;
    }
    #yuko .content-box .list-block ul li {
        width: 100%;
    }
    
    
    
    
    
    
    
    
    /*-------------------------　会社概要　-------------------------*/
    #yuko .company {margin: 0 auto 3em;}
    #yuko .company-box {padding: 0;}
    #yuko .message {
        display: block;
        padding: 0;
    }
    #yuko .message .message-txt {
        padding-right: 0;
        margin: 0 auto 1em;
    }
    #yuko .message .message-img {text-align: center;}
    #yuko .message .message-img img {width: 80%;}
    #yuko .message .message-txt h3 {font-size: 120%;}
    #yuko .message .message-txt p.ceo {
        margin: 0 auto;
        padding-right: 1em;
    }
    #yuko .company-box ol {padding: 3em 1.5em 3em 2.5em;}
    #yuko .company-box ol h3 {font-size: 110%;}
    #yuko .company-box ol p {text-align: left;}
    #yuko .company table th {
        width: 25%;
        line-height:1.6!important;
    }
    
    /*-------------------------　取り扱いメーカー一覧　-------------------------*/
    #yuko .maker-logo {
        padding: 2em 1.5em 0em;
        margin: 0 auto 2em;
    }
    #yuko .maker-logo ul li {
        width: 45%;
        margin: 0 0 1em;
    }
    #yuko .maker-logo ul li img {width: 100%;}
    #yuko .maker-box {
        padding: 1.5em 1.5em 1em;
        margin: 0 auto 2em;
    }
    #yuko .maker-box h3 {
        font-size: 1rem;
        padding: 0.5em 1em;
        margin: 0 auto 1em;
    }
    #yuko .maker-list ul {
        margin-left: 1em;
        display: block;
        margin-bottom: 1.5em;
    }
    #yuko .maker-list ul li {
        width: 100%;
        margin: 0 0 0.5em;
    }

    
    
    
    
    
    
    
    
    
    
    
    /*-------------------------　よくある質問　-------------------------*/
    #yuko .faq-box {margin: 2em auto 0;}
    #yuko .faq-box dt {
        font-size: 100%;
        line-height: 1.8;
    }
    #yuko .faq-box dd {margin: 0 auto 1.5em;}
    
    
    
    /*-------------------------　アクセス　-------------------------*/
    #yuko .access {margin: 0 auto 3em;}
    #yuko .access-box {
        display: block;
        padding: 0;
    }
    #yuko .access h3 {
        font-size: 120%;
        margin: 0 auto 0.5em;
    }
    #yuko .access-box .access-info {margin: 0 auto 1em;}
    #yuko .access-box {margin: 0 auto 1.5em;}
    #yuko .access .access-map {padding: 0;}
    #yuko .access .access-map iframe {height: 320px;}
    #yuko .access p.access-txt {
        text-align: left;
        margin: 0 auto 1.5em;
    }
    

    
    /*-------------------------　お問い合わせ　-------------------------*/
    #yuko .contact-box {padding: 1em 1em 2em;}
    #yuko .contact-box table {
        border-bottom: 1px solid #ccc;
        margin: 1em auto;
    }
    #yuko .contact-box table th,
    #yuko .contact-box table td {
        display: block;
        width: auto;
    }
    #yuko .contact-box table th {

    }
    
    #yuko .contact-box table td {
        border-top: none;
        border-bottom: none;
    }
    
    #yuko .contact-box table td input {width: auto;}
    #yuko .contact-box .txt {margin: 0 auto 1em;}
    #yuko .contact-box .submit input {
        font-size: 15px !important;
        padding: 1em;
    }
    
    
    /*-------------------------　footer　-------------------------*/
    /* お問い合わせ */
    .footer-contact {padding: 3em 0 2em;}
    .footer-contact-box {
        max-width: 100%;
        display: block;
        margin: 1em auto 0;
    }
    .footer-contact h2 {
        font-size: 140%;
        letter-spacing: 1.1px;
    }
    .footer-tel, .footer-fax {font-size: 170%;}
    .footer-contact-info p {margin: 0.5em auto 0;}
    .footer-mail {font-size: 120%;}
    
    
    /* footer */
    .footer-content {
        width: auto;
        padding: 0 1.5em;
    }
    .footer-info-box {
        display: block;
        max-width: 100%;
    }
    .footer-company-box {display: block;}
    .footer-company-logo {
        padding: 2em 0;
        text-align: center;
    }
    .footer-company-logo img {width: 60%;}
    .footer-company-txt ul {
        padding: 1em 0 0;
    }
    .footer-subinfo {
        max-width: 100%;
        margin: 1.5em auto 1em;
    }
    .footer-subinfo ul {
        flex-wrap: wrap;
    }
    .footer-subinfo ul li {
        width: 43%;
        flex-grow: 1;
    }
    .footer-subinfo ul li a {font-size: 11px;}
    .footer-info {display: none;}
    
}



/*投稿系のスタイルCSS*/
section.news-list{
width: 100%;
    max-width: 1200px;
    margin: 0 auto;
}
@media screen and (max-width: 1199px) {
section.news-list{
    width: 100%;
    max-width: none;
    margin: 0 auto;
    padding: 0 1em;
}
}
section.news-list #contents{
    padding: 1em;
    width: auto;
}
section.news-list.whats_new h2 {
    font-size: 1.5em;
    color: #000000;
    margin: 1em 0 1.5em;
    padding: 0 0 0 12px;
    text-align: left;
    border-left: 3px solid #ff0000;
    letter-spacing: 0.1em;
    font-weight: normal;
    }



section.news-list .news-content{
            border-top: 2px solid #e3e3e3;
        margin-bottom: 4em;
}
section.news-list .date{
color: #636363;
    font-size: 14px !important;
    margin-bottom: 1em;
}
section.news-list .news-content h2{
    font-size: 25px;
    border-left: none;
    padding: 0;
}
section.news-list h3{
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 1em;
}
section.news-list .detail{
padding: 1em 0 3em;
}
section.news-list .fl-r{
    float: right;
}
section.news-list .backtolist{
    margin-top: 0.5em;
    font-size: 14px;
    margin-bottom: 4em;
}
section.news-list .backtolist a{
    color: #c9c9c9;
}
section.news-list a{
    color: #e50101;
}
section.news-list a:last-child{
    margin-bottom: 4em;
}
section.news-list .list h3{
    color: #000;
}
section.news-list .list .detail{
    padding: 1em 1em 0.2em;
    border-bottom: 2px solid #e3e3e3;
}
.page-numbers li{
    display: inline-block;
}
.page-numbers{
text-align: center;
    margin: 1em 0 4em;
}

/*---------------------------------------------------------------------
　ここからスマホ
---------------------------------------------------------------------*/
@media screen and (max-width: 540px) {
    section.news-list{
width: auto;
    max-width: 100%;
        margin: 0;
        padding: 0;
    }
section.news-list.whats_new h2 {
    margin-bottom: 1em !important;
    font-size: 20px;
    margin: 70px 0 0 0;
}
    section.news-list #contents {
        margin: 0 auto;
        padding: 0 1em;
        width: auto;
        max-width: 100%;
    }
section.news-list .fl-r {
    float: none;
    display: block;
    text-align: right;
    margin-top: 0.5em;
    margin-bottom: 2em;
}
    section.news-list h3 {
    font-size: 18px;
}
    
    
    #easy .content-box {
        padding: 0 1.5em;
    }
    
    #easy p span.red-b,
    #easy p span.red {
    font-size: 1rem;
    }
    #easy p span.red  {
        padding: 0.1em 0.8em;
    }
    #easy .flex-box {
        display: block;
    }
    
    #easy .flex-box-img,
    #easy .flex-box-txt {
        width: 100%;
        
    }
    
    #easy .flex-box-img {
        text-align: center;
    }
    #easy .flex-box-txt {
        text-align: center;
    }
    #easy .flow {
        display: block;
    }
    #easy .flow-box {
        width: 100%;
    }
    
    #easy .catalog {
        margin: 0 auto 3em;
    }
    #easy h2.lp-ttl01 {
        font-size: 1.25rem;
    }
}