/*
Theme Name: toolyuko
Theme URI: http://ld.basesite.net/
Author: toolyuko
Author URI: http://ld.basesite.net/
Description: toolyuko作成のWPテーマ
Version: 1.0
*/




a:hover {text-decoration: none!important;}
p {line-height: 2.1!important;}





#header > .navi.new > ul {
    width: 100%;
    max-width: 1240px!important;
}





#breadcrumb {background-color: #f8f8f8;}
#breadcrumb ul {
    width: 100%;
    max-width: 1200px;
    padding: 1em 0;
    margin: 0 auto;
}
#breadcrumb ul li {
    display: inline;
    font-size: 12px;
}
#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;
}
.top-product-list ul li a {color: #000;}
.top-product-pic {
    padding: 1em 0 0.5em;
    text-align: center;
    margin: 0 auto;
}
.top-product-pic img {
    width: auto;
    height: 150px;
    min-height: 0;
}
.top-product-txt {
    background: #f8f8f8;
    position: relative;
    min-height: 200px;
    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;
}
.top-product-type p.scat {font-size: 14px;}
.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-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%;}


/*-------------------------　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/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/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/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 0.5em;
}
.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;
}


/*-------------------------　固定ページ　-------------------------*/




/*---------------------------------------------------------------------
　ここからスマホ
---------------------------------------------------------------------*/
@media screen and (max-width: 540px) {
    html,
	body {
		overflow-x: hidden;
		overflow-y: scroll;
		-webkit-overflow-scrolling: touch;
	}
    
    #breadcrumb {display: none;}
    
    
    .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 {
        right: 0;
    }
    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;}
    
    
    
    #yuko {padding: 1em 0 0;}
    
    
    
    /*-------------------------　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 {min-height: 230px;}
    
    
    
    
    
    
    /*　お知らせ　*/
    .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;}
    
    
    
    
    
    
    /*-------------------------　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;}
    
}