@charset "UTF-8";
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
l,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
margin: 0;
padding: 0;
}
h1,
h2,
h3,
h4,
h5,
h6,
table,
input,
textarea,
select,
option,
button {
font-size: 100%;
}
blockquote,
q {
quotes: none;
}
blockquote:before,
blockquote:after,
q:before,
q:after {
content: '';
content: none;
}
article,
aside,
details,
figcaption,
figure,
footer,
header,
menu,
nav,
section,
main {
display: block;
}
input,
textarea {
margin: 0;
padding: 0;
}
ol,
ul {
list-style: none;
margin: 0;
padding: 0;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
caption,
th {
text-align: left;
}
:focus {
outline: 0;
}
img,
a img {
border: none;
}
a {
outline: 0;
cursor: pointer;
text-decoration: none;
}
a:hover {
text-decoration: none;
}
h1,h2,h3,h4{
font-weight:300;
}
.sp{
display: block;
}
.pc{
display: none;
}
 body {
color: #444;
font-family: 'Avenir','Helvetica Neue','Helvetica','Arial','Hiragino Sans','ヒラギノ角ゴシック',YuGothic,'Yu Gothic','メイリオ', Meiryo,'ＭＳ Ｐゴシック','MS PGothic';
font-size: 1em;
margin: 0;
background: #FFF;
}
body, a, a:hover {
color: #444;
}  header{
width:100%;
position: fixed;
z-index: 999;
}
.head_color{
background:  rgba(0,0,0,0.7);
transition:0.8s;
}
.header{
display: flex;
padding: 10px 0;
width:90%;
margin: 0 auto;
max-width:1000px;
}
.header img{
display: block;
height:30px;
margin-top: 1px;
}
.nav-button{
display: block;
cursor: pointer;
margin-left: auto;
}
.nav-wrap{
position: fixed;
left: 0;
top: 0;
display: none;
z-index: 10;
background-color: rgba(0,0,0,0.7);
width: 100%;
height: 100%;
}
.nav-wrap .nav{
height: 100%;
position: relative;  }
.nav li{
display: block;
margin: 2em;
}
.nav li a{
color: #FFF;
font-size: 1em;
}
.nav-wrap.open {
display: block;
}
.nav-wrap.close {
display: none;
}
.nav-button,
.nav-button span {
display: inline-block;
transition: all 0.4s;
box-sizing: border-box;
}
.nav-button {
z-index: 20;
position: relative;
width: 35px;
height: 30px;
margin-top:2px;
}
.nav-button span {
position: absolute;
left: 0;
width: 100%;
height: 2px;
background-color: #fff;
transition:0.8s;
}
.nav-button span:nth-of-type(1) {
top: 0;
}
.nav-button span:nth-of-type(2) {
top: 14px;
}
.nav-button span:nth-of-type(3) {
bottom: 0;
}
.nav-button.active span:nth-of-type(1) {
-webkit-transform: translateY(14px) rotate(-225deg);
transform: translateY(14px) rotate(-225deg);
}
.nav-button.active span:nth-of-type(2) {
opacity: 0;
}
.nav-button.active span:nth-of-type(3) {
-webkit-transform: translateY(-14px) rotate(225deg);
transform: translateY(-14px) rotate(225deg);
} .btn-partial-line {
position: relative;
display: inline-block;
padding: 0.25em 2em 0.5em;
text-decoration: none;
border-bottom: solid 1px #FFF;
border-left: solid 1px #FFF;
color: #FFF;
transition: .4s;
}
.simple_square_btn2 {
display: block;
position: relative;
width: 160px;
padding: 0.8em;
text-align: center;
text-decoration: none;
color: #FFF;
background: #169a3d;
border:1px solid #169a3d;
margin: 0 auto;
} footer{
width:100%;
background: #000;
padding: 30px 0 0;
}   
.footer{
width:80%;
max-width: 1000px;
margin: 0 auto;
color: #FFF;
}
.footer_logo a{
display: block;
padding: 15px 0;
border-bottom: 1px solid #FFF;
}
.footer_logo a img{
display: block;
width:160px;
}
.footer ul{
padding: 10px 0 50px;
}
.footer ul li a{
color: #FFF;
}
.under_list{
width:80%;
max-width: 1000px;
margin: 0 auto;
}
.under_list a{
display: block;
color: #aaa;
text-align: left;
font-size: 0.7em;
}
.copyright{
color: #aaa;
background: #222;
text-align: center;
font-size: 0.7em;
margin-top: 20px;
padding: 10px;
}  @media only screen and (min-width:900px) { header{
padding: 0;
}
.header{
max-width: 1000px;
min-width: 910px;
padding: 0;
height: 50px;
}
.logo img{
padding-top: 8px;
}
.nav-button{
display: none;
}
.nav-wrap{
display: flex;
height: 100%;
position: static;
background: none;
}
.nav-wrap .nav{
height: 100%;
width:90%;
min-width:410px;
margin-left: auto;
}
.nav-wrap ul{
display: flex;
margin-left: auto;
}
.nav li{
width:auto;
margin: 0;
text-align: center;
}
.nav a{
height: 100%;
line-height: 2.9;
display: block;
padding: 0 10px;
line-height: 3.3;
}
.nav a:hover{
color:#169a3d;
transition:.4s;
}
.nav li:first-child{
margin-left: auto;
} .footer ul{
display: flex;
flex-wrap: wrap;
height: 200px;
}
.footer ul li{
width:auto;
}
.footer ul li a{
display: block;
width: auto;
padding: 5px 10px;
}
.footer ul li a:hover,.under_list a:hover{
transition: 0.3s;
color: #169a3d;
} .btn-partial-line:hover {
padding-left: 2.5em;
padding-right: 1.5em;
color: #FF7121;
border-bottom: solid 1px #FF7121;
border-left: solid 1px #FF7121;
}
.simple_square_btn2:hover {
background: #FF7121;
border:solid 1px #FF7121;
color: #fff;
cursor: pointer;
text-decoration: none;
transition: .4s;
}
}  .fadein {
opacity : 0;
transform : translate(0, 50px);
transition : all 1500ms;
}
.fadein-l {
opacity : 0.0;
transform : translate( -50px,0);
transition : all 1500ms;
}
.fadein-r {
opacity : 0.0;
transform : translate( 50px,0);
transition : all 1500ms;
}
.scroll-in {
opacity : 1;
transform : translate(0, 0);
}  .mvarea,
.cb-slideshow,
.cb-slideshow:after { 
width: 100%;
height: 100vh;
top: 0px;
left: 0px;
z-index: 0; 
background: rgba(0,0,0,0.8);
}
.cb-slideshow li span { 
width: 100%;
height: 100vh;
position: absolute;
top: 0px;
left: 0px;
color: transparent;
background-size: cover;
background-position: center;
background-repeat: none;
opacity: 0;
z-index: 0;
-webkit-backface-visibility: hidden;
-webkit-animation: imageAnimation 24s linear infinite 0s;
-moz-animation: imageAnimation 24s linear infinite 0s;
-o-animation: imageAnimation 24s linear infinite 0s;
-ms-animation: imageAnimation 24s linear infinite 0s;
animation: imageAnimation 24s linear infinite 0s; 
margin:0;
}
.cb-slideshow li div { 
z-index: 2;
position: absolute;
width: 100%;
height:100%;
text-align: center;
opacity: 0;
color: #fff;
-webkit-animation: titleAnimation 24s linear infinite 0s;
-moz-animation: titleAnimation 24s linear infinite 0s;
-o-animation: titleAnimation 24s linear infinite 0s;
-ms-animation: titleAnimation 24s linear infinite 0s;
animation: titleAnimation 24s linear infinite 0s; 
}
.cb-slideshow li div .top_box{
position: absolute;
top: 50%;
left:50%;
-webkit-transform: translate(-50%,-50%);
-moz-transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
-o-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
color:#FFFFFF;
max-width:500px;
width:75%;
height: auto;
}
.cb-slideshow li div .top_box h1{
text-align: center;
font-size:1.6em;
font-family:"ＭＳ Ｐ明朝", "MS PMincho","ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "serif";
margin-bottom: 30px;
}
.cb-slideshow li div .top_box p{
font-size:0.8em;
}
.cb-slideshow li:nth-child(1) span { 
background: url(//tokushou-metal.co.jp/d/wp-content/themes/tokusyo/image/top/topimage.jpg);
background-size: cover;
background-position: center;
}
.cb-slideshow li:nth-child(2) span {
background-image: url(//tokushou-metal.co.jp/d/wp-content/themes/tokusyo/image/top/topimage_2.jpg);
background-size: cover;
background-position: center;
-webkit-animation-delay: 8s;
-moz-animation-delay: 8s;
-o-animation-delay: 8s;
-ms-animation-delay: 8s;
animation-delay: 8s; 
}
.cb-slideshow li:nth-child(3) span { 
background-image: url(//tokushou-metal.co.jp/d/wp-content/themes/tokusyo/image/top/topimage_3.jpg);
background-size: cover;
background-position: center;
-webkit-animation-delay: 16s;
-moz-animation-delay: 16s;
-o-animation-delay: 16s;
-ms-animation-delay: 16s;
animation-delay: 16s; 
}
.cb-slideshow li:nth-child(2) div { 
-webkit-animation-delay: 8s;
-moz-animation-delay: 8s;
-o-animation-delay: 8s;
-ms-animation-delay: 8s;
animation-delay: 8s; 
}
.cb-slideshow li:nth-child(3) div { 
-webkit-animation-delay: 16s;
-moz-animation-delay: 16s;
-o-animation-delay: 16s;
-ms-animation-delay: 16s;
animation-delay: 16s; 
} @-webkit-keyframes imageAnimation { 
0% { opacity: 0;
-webkit-animation-timing-function: ease-in; }
8% { opacity: 1;
-webkit-animation-timing-function: ease-out; }
17% { opacity: 1 }
35% { opacity: 0 }
100% { opacity: 0 }
}
@-moz-keyframes imageAnimation { 
0% { opacity: 0;
-moz-animation-timing-function: ease-in; }
8% { opacity: 1;
-moz-animation-timing-function: ease-out; }
17% { opacity: 1 }
35% { opacity: 0 }
100% { opacity: 0 }
}
@-o-keyframes imageAnimation { 
0% { opacity: 0;
-o-animation-timing-function: ease-in; }
8% { opacity: 1;
-o-animation-timing-function: ease-out; }
17% { opacity: 1 }
35% { opacity: 0 }
100% { opacity: 0 }
}
@-ms-keyframes imageAnimation { 
0% { opacity: 0;
-ms-animation-timing-function: ease-in; }
8% { opacity: 1;
-ms-animation-timing-function: ease-out; }
17% { opacity: 1 }
35% { opacity: 0 }
100% { opacity: 0 }
}
@keyframes imageAnimation { 
0% { opacity: 0;
animation-timing-function: ease-in; }
8% { opacity: 1;
animation-timing-function: ease-out; }
17% { opacity: 1 }
35% { opacity: 0 }
100% { opacity: 0 }
} @-webkit-keyframes titleAnimation { 
0% { opacity: 0 }
20% { opacity: 1 }
50% { opacity: 1 }
80% { opacity: 0 }
100% { opacity: 0 }
}
@-moz-keyframes titleAnimation { 
0% { opacity: 0 }
20% { opacity: 1 }
50% { opacity: 1 }
80% { opacity: 0 }
100% { opacity: 0 }
}
@-o-keyframes titleAnimation { 
0% { opacity: 0 }
8% { opacity: 1 }
17% { opacity: 1 }
19% { opacity: 0 }
100% { opacity: 0 }
}
@-ms-keyframes titleAnimation { 
0% { opacity: 0 }
20% { opacity: 1 }
50% { opacity: 1 }
80% { opacity: 0 }
100% { opacity: 0 }
}
@keyframes titleAnimation { 
0% { opacity: 0 }
20% { opacity: 1 }
50% { opacity: 1 }
80% { opacity: 0 }
100% { opacity: 0 }
} .firstblock{
background-color:rgba(77,179,125,1.00);
width:100%;
height:500px;
position: relative;
text-align: center;
}
.firstblock_in{
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%,-50%);
-moz-transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
-o-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
color:#FFFFFF;
max-width:500px;
width:80%;
height:auto;
}
.firstblock_text{
color:#FFF;
width:100%;
text-align: left;
height:auto;
font-size: 0.9em;
}
.firstblock img{
width:140px;
margin:10px auto;
}
.secondblock{
background:url(//tokushou-metal.co.jp/d/wp-content/themes/tokusyo/image/top/copper_wire.jpeg);
background-size:cover;
width:100%;
height:500px;
position: relative;
text-align: center;
}
.secondblock::before{ background-color:rgba(6,143,77,0.70); position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
content: ' ';
height:auto;
}
.secondblock_in h3::before{
background-color: #FFFFFF; }
.secondblock_in{
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%,-50%);
-moz-transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
-o-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
color:#FFFFFF;
max-width:500px;
width:80%;
height:auto;
}
.secondblock_text{
color:#FFF;
width:100%;
text-align: left;
height:auto;
margin:50px auto 50px;
font-size: 0.9em;
}
.btnfirst{
display: block;
width:200px;
height:50px;
background-color:rgba(0,0,0,.00);
}
.thirdblock{
width:100%;
height: auto;
padding: 40px 0 60px;
}
.list_area{
width:100%;
height: auto;
padding: 20px 0 40px;
}
.thirdblock h3,.list_area h3,.delivary_area h3{
text-align: center;
color:#137E33 ;
margin:0 0 50px;
}
.thirdblock h3:before,.list_area h3:before,.delivary_area h3:before{
background-color:#137E33; }
.thirdblock_box{
text-align: center;
}
.thirdblock_box h4{
margin-bottom: 20px;
}
.thirdblock_box img{
width:40%;
margin-bottom: 20px;
max-width:200px;
}
.thirdblock_box p{
text-align: left;
margin: 0 auto 50px auto;
width:70%;
font-size: 0.9em;
}
.recruitblock{
background:url(//tokushou-metal.co.jp/d/wp-content/themes/tokusyo/image/top/recruit.jpg);
background-size:cover;
background-position:center;
width:100%;
height:400px;
position: relative;
text-align: center;
}
.recruitblock::before{ background-color:rgba(0,0,0,0.5); position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
content: ' ';
height:auto;
}
.recruitblock_in h3::before{
background-color: #FFFFFF; width:50px;
}
.recruitblock_in{
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%,-50%);
-moz-transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
-o-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
color:#FFFFFF;
max-width:500px;
width:80%;
height:auto;
}
.recruitblock_text{
color:#FFF;
width:100%;
text-align: left;
height:auto;
margin:30px auto;
}
.onlineshopblock{
background:url(//tokushou-metal.co.jp/d/wp-content/themes/tokusyo/image/top/onlineshop.jpg);
background-size:cover;
background-position:center;
width:100%;
height:400px;
position: relative;
text-align: center;
}
.onlineshopblock::before{ background-color:rgba(0,0,0,0.5); position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
content: ' ';
height:auto;
}
.onlineshopblock_in h3::before{
background-color: #FFFFFF; width:50px;
}
.onlineshopblock_in{
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%,-50%);
-moz-transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
-o-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
color:#FFFFFF;
max-width:500px;
width:80%;
height:auto;
}
.onlineshopblock_text{
color:#FFF;
width:100%;
text-align: left;
height:auto;
margin:30px auto;
} .newsblock{
width:100%;
margin:80px auto 80px auto;
}
.newsblock_box{
width:80%;
margin:0px auto 40px auto;
}
.newsblock_box span{
font-size:0.5em;
margin-left:10px;
font-weight:200;
}
.newsblock_box h2{
margin:0 0 20px 0;
width:300px;
font-size:1.7em;
text-align: left;
} @media only screen and (max-width: 335px){
.newsblock_box h2{
width: max-content;
}
}
.news_li{
margin-bottom: 20px;
}
.li_title{
background-color:rgba(149,225,75,1.00);
width:70%;
color:#FFF;
text-align: center;
font-size:1.1em;
margin-bottom:10px;
}
.li_text{
width:100%;
position:relative;
font-size:0.9em;
}
.li_text a{
display:block;
line-height: 3;
word-wrap:break-word;
border-bottom:1px solid #333;
}
.li_text a::after{
position: absolute;
content: '';
width: 6px;
height: 6px;
border-top: solid 1px #333;
border-right: solid 1px #333;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
top: 50%;
right: 10px;
margin-top: -3px;
}
.arrow01{
width:10px;
height:10px;
border-top:solid 3px #169A3D;
border-right:solid 3px #169A3D;
-webkit-transform:rotate(40deg);
transform:rotate(45deg);
} .accsessblock{
background:url(//tokushou-metal.co.jp/d/wp-content/themes/tokusyo/image/top/tokusyo_facility.png);
width:90%;
height:400px;
background-position: center;
background-size:cover;
position: relative;
text-align: center;
margin:0 auto 0px auto;
}
.accsessblock::before{ background-color:rgba(15,106,41,0.60); position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
content: ' ';
height:auto;
}
.accsessblock_in h3::before{
background-color: #FFFFFF; width:50px;
}
.accsessblock_in{
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%,-50%);
-moz-transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
-o-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
color:#FFFFFF;
max-width:500px;
width:80%;
height:auto;
}
.accsessblock_text{
color:#FFF;
width:100%;
text-align: center;
height:auto;
margin:50px auto 40px;
}
.map{
margin:0 auto 50px auto;
width:90%;
background-color: #000;
height:400px;
}
.map iframe{
margin:0 auto 50px auto;
width:100%;
background-color: #000;
height:400px;
border: none;
} .service{
background:url(//tokushou-metal.co.jp/d/wp-content/themes/tokusyo/image/buy/service_top.jpg);
background-size:cover;
width:100%;
height:70vh;
background-position: center;
position:relative;
}
.service1{
background:url(//tokushou-metal.co.jp/d/wp-content/themes/tokusyo/image/buy/estimate.jpeg);
background-size:cover;
width:100%;
background-position: center;
position:relative;
}
.servicetitle{
background-color: #FFFFFF;
color:#000;
width:70%;
font-size:1.6em;
padding:7px;
}
.service_text{
background-color: #FFF;
color:#000;
margin-top:30px;
height:auto;
}
.service_text p{
width:80%;
height:80%;
padding-bottom:50px;
margin:auto;
position:relative;
top:30px;
}
.service2{
background:url(//tokushou-metal.co.jp/d/wp-content/themes/tokusyo/image/buy/shake_hand.jpeg);
background-size:cover;
width:100%;
background-position: center;
position:relative;
height:500px;
}
.service3{
margin-bottom:50px;
}
.service_img{
background:url(//tokushou-metal.co.jp/d/wp-content/themes/tokusyo/image/buy/);
} .normaltitle{
text-align: center;
font-size: 2em;
}
.bordertitle{
font-size:1.4em;
position: relative;
}
.bordertitle:before{
content: '';
position: absolute;
left: 50%;
bottom: -10px; display: inline-block;
width: 70px; height: 1px; -moz-transform: translateX(-50%);
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translate(-50%); }
.bordertitle2{
font-size:1.6em;
position: relative;
}
.bordertitle2:before{
content: '';
position: absolute;
left: 50%;
bottom: -10px; display: inline-block;
width: 100px; height: 1px; -moz-transform: translateX(-50%);
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translate(-50%); }
.bordertitle2{
color:#000;
}
.thirdblock h4{
font-size:1.3em;
}
.twolines_title{
text-align: center;
padding: 40px 0;
}
.twolines_title h2{
font-size: 1.2em;
font-family:"ＭＳ Ｐ明朝", "MS PMincho","ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "serif";
}
.twolines_title h3{
font-size: 1em;
}
.twolines_title p{
color: #169a3d;
font-size: 0.8em;
margin-top: 5px;
} .purchase{
background: url(//tokushou-metal.co.jp/d/wp-content/themes/tokusyo/image/purchase/sub_parchase.jpg);
}
.service{
background: url(//tokushou-metal.co.jp/d/wp-content/themes/tokusyo/image/service/service_top.jpg)
}
.recruit{
background: url(//tokushou-metal.co.jp/d/wp-content/themes/tokusyo/image/recruit/mv_recruit.jpg);
}
.company{
background: url(//tokushou-metal.co.jp/d/wp-content/themes/tokusyo/image/company/sub_company.jpg);
}
.sub_mainvisual{
height: 400px;
width:100%;
background-size: cover;
background-position: center;
position: relative;
}
.sub_mainvisual::before{ background-color:rgba(0,0,0,0.5); position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
content: ' ';
height:auto;
}
.in_submv{
position: absolute;
width:70%;
height: auto;
top: 120px;
bottom: auto;
left: 0;
right: 0;
margin: auto;
color: #FFF;
}
.in_submv h1{
font-size: 1.4em;
text-align: center;
margin-bottom: 20px;
font-family: "ＭＳ Ｐ明朝", "MS PMincho","ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "serif";
}
.in_submv p{
font-size: 0.9em;
}
.sub_mainvisual a {
position: absolute;
bottom: 0px;
left: 50%;
right: 50%;
z-index: 2;
display: inline-block;
-webkit-transform: translate(0, -50%);
transform: translate(0, -50%);
text-decoration: none;
}
.sub_mainvisual a {
padding-top: 70px;
}
.sub_mainvisual a span {
position: absolute;
top: 0;
left: 50%;
width: 24px;
height: 24px;
margin-left: -12px;
border-left: 1px solid #fff;
border-bottom: 1px solid #fff;
-webkit-transform: rotateZ(-45deg);
transform: rotateZ(-45deg);
-webkit-animation: sdb 1.5s infinite;
animation: sdb 1.5s infinite;
box-sizing: border-box;
}
@-webkit-keyframes sdb {
0% {
-webkit-transform: rotateY(0) rotateZ(-45deg) translate(0, 0);
opacity: 0;
}
50% {
opacity: 1;
}
100% {
-webkit-transform: rotateY(720deg) rotateZ(-45deg) translate(-20px, 20px);
opacity: 0;
}
}
@keyframes sdb {
0% {
transform: rotateY(0) rotateZ(-45deg) translate(0, 0);
opacity: 0;
}
50% {
opacity: 1;
}
100% {
transform: rotateY(720deg) rotateZ(-45deg) translate(-20px, 20px);
opacity: 0;
}
}  .high_price{
background: url(//tokushou-metal.co.jp/d/wp-content/themes/tokusyo/image/service/estimate.jpg);
}
.sameday{
background: url(//tokushou-metal.co.jp/d/wp-content/themes/tokusyo/image/service/shakehands.jpg);
}
.human_price{
background: url(//tokushou-metal.co.jp/d/wp-content/themes/tokusyo/image/recruit/human_property.jpg);
}
.shakehands{
background: url(//tokushou-metal.co.jp/d/wp-content/themes/tokusyo/image/recruit/shake_hands.jpg);
}
.longwork{
background: url(//tokushou-metal.co.jp/d/wp-content/themes/tokusyo/image/recruit/long_work.jpg);
}
.cardtitle_box{
width:100%;
height: 250px;
background-size: cover;
background-position: center;
position: relative;
} .in_cardtitle_box{
height: auto;
width:80%;
max-width: 450px;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%,-50%);
-moz-transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
-o-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
}
.in_cardtitle_box h2{
font-size: 1.2em;
background: #FFF;
text-align: center;
width:160px;
padding: 5px 0;
margin-bottom: 10px;
}
.in_cardtitle_box p{
font-size: 0.9em;
background: #FFF;
padding: 10px;
} .human_price{
width:90%;
margin: 50px auto;
}
.in_cardtitle_box_2{
height: 65px;
position: absolute;
bottom: 30px;
left: auto;
right: 0;
}
.in_cardtitle_box_2 p{
padding: 5px;
background: #FFF;
font-size: 0.8em;
margin: 0 0 10px auto;
text-align: center;
font-family:"ＭＳ Ｐ明朝", "MS PMincho","ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "serif";
}
.in_cardtitle_box_2 p:first-child{
width: 230px;
}
.in_cardtitle_box_2 p:nth-child(2){
width: 190px;
} .green_cover{
width:100%;
height: 100%;
background-color:rgba(6,143,77,0.70);
}
.in_cardtitle_box_3{
height: auto;
width:80%;
max-width: 450px;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%,-50%);
-moz-transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
-o-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
}
.in_cardtitle_box_3 h3{
font-size: 1.2em;
text-align: center;
margin-bottom: 10px;
color: #FFF;
}
.in_cardtitle_box_3 p{
font-size: 0.9em;
color: #FFF;
} .card_linetitle{
width:80%;
margin: 0 auto 50px;
}
.card_linetitle img{
display: block;
width:100%;
height: 200px;
object-fit: cover;
}
.card_linetitle h4{
position: relative;
font-size: 1em;
width: auto;
padding: 15px 0 15px 30px;
}
.card_linetitle h4:before{
position: absolute;
content: '';
width: 15px;
height: 1px;
top:0;
right: auto;
bottom: 0;
left:5px;
margin: auto;
}
.white h4:before{
background: #FFF;
}
.black h4:before{
background: #169a3d;
}
.card_linetitle p{
font-size: 0.8em;
}
.white p,.white h4,.white ul{
color: #FFF;
}
.white ul li,.black ul li{
width:auto;
margin-left: 27px;
list-style: square;
line-height: 1.4;
font-size: 0.8em;
}
.black p,.black h4.black ul{
color: #333;
} .double_mp{
padding: 30px 0;
}
.flex_double{
width:100%;
height: auto;
padding: 20px 0;
}
.side_textbox{
width:80%;
margin: 0 auto;
}
.side_textbox h3{
font-size:1.2em;
position: relative;
margin-bottom: 30px;
}
.side_textbox h3:before{
background: #333;
content: '';
display: block;
position: absolute;
left: 20px;
bottom: -10px; display: inline-block;
width: 40px; height: 1px; -moz-transform: translateX(-50%);
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translate(-50%); }
.side_textbox p{
font-size: 0.9em;
}
.flex_double img{
height: 180px;
max-width:90%;
object-fit: contain;
display: block;
margin: 0 auto;
} .bg_green{
background: #169a3d;
padding: 50px 0;
}
.bg_gray{
background: #fafafa;
padding: 50px 0;
}
.bg_green h3,.bg_gray h3{
text-align: center;
color:#FFF ;
margin:0 0 50px;
}
.bg_green h3{
color: #FFF;
}
.bg_gray h3{
color: #169a3d;
}
.bg_green h3:before{
background: #FFF;
}
.bg_gray h3:before{
background: #169a3d;
}
.in_flow_block{
width:70%;
margin: 0 auto 80px;
color: #FFF;
position: relative;
}
.in_flow_block:first-child::after,.in_flow_block:nth-child(2)::after{
position: absolute;
content: '';
width: 0;
height: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-top: 10px solid #FFF;
bottom: -50px;
right: 0;
left:0;
margin: auto;
}
.in_flow_block:last-child{
margin-bottom: 30px;
}
.in_flow_block h4{
font-size: 1.2em;
text-align: center;
margin-bottom: 10px;
}
.in_flow_block p{
font-size: 0.9em;
}
.in_flow_block img{
display: block;
width:150px;
height: 150px;
object-fit: cover;
border-radius: 50%;
margin: 15px auto;
} .recruit_text{
width:80%;
max-width:600px;
margin: 0 auto;
font-size: 0.8em;
padding: 40px 0;
}
.onlineshop_text{
width:80%;
max-width:600px;
margin: 0 auto;
font-size: 0.8em;
padding: 40px 0;
} .flex_list_border{
width:80%;
margin: 0 auto 50px;
}
.flex_list_border ul{
width:100%;
}
.flex_list_border ul li{
padding: 10px;
border-bottom: 1px solid #ccc;
}
.flex_list_border .left{
font-size: 1em;
margin-bottom: 5px;
}
.flex_list_border .right{
font-size: 0.8em;
} .greeting_text{
width:80%;
max-width: 800px;
margin: 0 auto 50px;
font-size: 0.8em;
}
.tp50{
padding-top:50px;
}
.tm50{
margin-top: 50px;
}
.partition{
background: url(//tokushou-metal.co.jp/d/wp-content/themes/tokusyo/image/company/parallax_area.jpg);
background-size: cover;
background-position: center;
height: 150px;
position: relative;
}
.partition::before{ background-color:rgba(0,0,0,0.5); position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
content: ' ';
height:auto;
}
.partition img{
width: 250px;
position: absolute;
top:0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
} .layer_block{
width:100%;
margin-bottom: 100px;
position: relative;
}
.layer_block img{
width:90%;
height: 250px;
display: block;
object-fit: cover;
margin: 0 auto 15px;
}
.in_layerblock{
width: 90%;
margin: 0 auto;
background: #efefef;
padding: 20px 0;
}
.in_layerblock h3{
font-family: "ＭＳ Ｐ明朝", "MS PMincho","ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "serif";
font-size: 1.1em;
position: relative;
width:80%;
margin: 0 auto 15px;
z-index: 1;
}
.in_layerblock h3:before{
content: '';
position: absolute;
left: -15px;
top: -5px;
width: 35px;
height: 35px;
background: #FFF;
z-index: -1;
}
.in_layerblock p{
width: 80%;
margin: 0 auto;
font-size: 0.9em;
} .change_list{
width: 100%;
}
.change_list ul{
width:100%;
margin: 0 auto;
}
.change_list ul li{
border-bottom: 1px solid #ccc;
padding: 5px 0;
}
.change_list ul li a:hover{
color:#169a3d;
transition: .4s;
}
.change_list ul li a:before{
content: "";
position: absolute;
top: 7px;
left: -25px;
width: 10px;
height: 10px;
border-top: 1px solid #169a3d;
border-right: 1px solid #169a3d;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
.change_list ul li a{
width: 200px;
display: block;
margin: 0 auto;
position: relative;
}
#nonmetal,#special,#others{
padding:70px 0 0 0;
}
.under_line{
position:relative;
color:#169a3d;
}
.under_line:after{
position:absolute;
left:0;
right:0;
bottom:-6px;
margin:auto;
content: '';
width:200px;
height:1px;
background:  #169a3d;
} .item_list{
width:90%;
max-width: 1000px;
margin: 40px auto 20px;
display: flex;
flex-wrap: wrap;
}
.in_itembox,.in_itembox_2{
width:50%;
margin-bottom: 20px;
}
.in_itembox_2{
position: relative;
}
.in_itembox_2 .absolute_img{
position: absolute;
top:0;
left: 0;
right: 0;
bottom: 0;
}
.in_itembox img,.in_itembox_2 img{
display: block;
width:100px;
height: 100px;
object-fit: cover;
margin: 0 auto;
margin-bottom: 15px;
}
.in_itembox img{
border-radius: 50%;
}
.in_itembox p{
text-align: center;
font-size: 0.9em;
}
.in_itembox_2 p{
background: #efefef;
color: #000;
text-align: center;
font-size: 0.7em;
width: 90%;
max-width: 115px;
padding: 5px 2.5%;
margin: 5px auto;
} .delivary_area p{
width:80%;
margin: 0 auto;
font-size: 0.8em;
}
.delivary_area .in_delivary_area{
width:80%;
margin: 20px auto;
}
.delivary_area .in_delivary_area img{
width:200px;
height: 200px;
display: block;
margin: 0 auto 20px;
border: 1px solid #169a3d;
}
.delivary_area .in_delivary_area h4{
color:#169a3d;
font-size: 1em;
margin-bottom: 10px;
}
.delivary_area .in_delivary_area ul{
background: #FFF;
display: flex;
margin-bottom: 20px;
padding: 5px;
}
.delivary_area .in_delivary_area ul li{
padding: 0 5px;
margin: 0 auto;
font-size: 0.8em;
} .privacy{
width:80%;
max-width: 1200px;
margin: 0px auto ;
padding:50px 0px 100px;
}
.privacy p,.privacy ul{
text-align: left;
font-size: 0.8em;
padding: 0px 0 20px;
}
.privacy ul li{
width:95%;
list-style: square;
margin-left: 5%;
}
.privacy h3{
text-align: left;
width:100%;
border-bottom: 1px solid #ccc;
margin: 5px 0;
}
@media only screen and (min-width:600px) { .cb-slideshow li div .top_box{
width:70%;
position:absolute;
left:300px;
max-width:800px;
}
.cb-slideshow li div .top_box h1{
text-align: left;
font-size:2.5em;
}
.cb-slideshow li div .top_box p{
text-align:left;
}
.title_box{
width:80%;
margin-top:15px;
position:absolute;
left:300px;
}
.title h1{
text-align: left;
font-size:2.0em;
}
.title p{
font-size:1em;
}
.flex_box{
display:flex;
}
.firstblock_in{
position: absolute;
top: 50%;
width:80%;
height:400px;
}
.firstblock_text{
}
.firstblock_in img{
margin-bottom:20px;	
}
.secondblock_in{
position: absolute;
top: 50%;
width:80%;
height:400px;
text-align: left;
}
.secondblock_in p{
width:100%;	
}
.second_btn_abs{
position: absolute;
bottom: 50px;
}
.secondblock_text{
height:auto;
}
.thirdblock{
padding:100px 0;
}
.thirdblock_box{
display:flex;
width:90%;
max-width: 1000px;
margin: 0 auto;
}
.thirdblock_box1{
width:100%;
}
.thirdblock_box2{
width:100%;
}
.thirdblock h3:before,.list_area h3:before,.bg_green h3:before,.bg_gray h3:before,.delivary_area h3:before{
position:absolute;
left:50%;
}
.iconbox{
width:100%;
}
.iconbox img{
width:120px;
height: 120px;
}
.iconbox p{
width:80%;
} .twolines_title{
text-align: center;
padding: 40px 0;
}
.twolines_title h2{
font-size: 1.5em;
}
.twolines_title h3{
font-size: 1.2em;
}
.twolines_title p{
color: #169a3d;
font-size: 1em;
margin-top: 5px;
} .recruitblock{
text-align: left;
}
.recruitblock_in{
left: 30%;
max-width: 250px;
}
.recruitblock_in h3:before{
position: absolute;
left: 30px;
}
.onlineshopblock{
text-align: left;
} .onlineshopblock_in{
transform: translate(0,-50%);
left: auto !important; right: 15%;
max-width: 250px;
}
.onlineshopblock_in h3:before{
position: absolute;
left: 30px;
}
.message{
padding: 50px 0;
} .news_li{
display:flex;
border-bottom: 1px solid #333;
padding: 10px 0;
}
.news_li .li_title{
line-height: 1.5;
display: block;
width:30%;
margin: auto;
}
.li_text{
width:60%;
margin: auto;
border-bottom: 0px;
line-height:1.5;
}
.news_li a{
display:block;
border-bottom: 0px;
}
.newsblock_box{
width:80%;
max-width: 700px;
}
.newsblock_box h2{
margin-left: 18px;
font-size: 2em;
}
.li_text a:hover{
transition: 0.3s;
color:#169a3d;
}
.li_text a:hover::after{
border-top: solid 1px #169a3d;
border-right: solid 1px #169a3d;
} .accsessblock_in{
width:300px;
text-align: left;
}
.accsessblock_in h3:before{
content: '';
position: absolute;
left: 23px;
}
.accsessblock{
margin:0;	
width:100%;
}
.accsessblock_text{
text-align: left;
}
.map{
width:100%;
background-color: #A89798;
height:400px;
margin:0;
}  .bordertitle{
font-size:1.6em;
text-align:left;
margin: 0 auto;
}
.bordertitle:before{
content: '';
position: absolute;
left: 50px;
}
.btnfirst{
display: block;
width:200px;
height:50px;
background-color:rgba(0,0,0,.00);
} .sub_mainvisual{
height: 500px;
background-size: cover;
background-position: center;
}
.sub_mainvisual::before{ background-color:rgba(0,0,0,0.5); position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
content: ' ';
height:auto;
}
.in_submv{
position: absolute;
width:60%;
top: 65%;
left: 10%;
right: auto;
color: #FFF;
}
.in_submv h1{
font-size: 2em;
font-family:"ＭＳ Ｐ明朝", "MS PMincho","ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "serif";
text-align: left;
margin-bottom: 20px;
}
.in_submv p{
font-size: 0.9em;
}
.sub_mainvisual a{
display: none;
} .cardtitle_box{
width:50%;
height: 300px;
} .human_price{
width:70%;
max-width: 700px;
}
.in_cardtitle_box_2{
height: 65px;
bottom: 50px;
}
.in_cardtitle_box_2 p{
padding: 5px;
background: #FFF;
font-size: 1.2em;
margin: 0 0 10px auto;
text-align: center;
}
.in_cardtitle_box_2 p:first-child{
width: 350px;
}
.in_cardtitle_box_2 p:nth-child(2){
width: 300px;
} .double_mp{
padding: 50px 0;
}
.flex_wrap{
flex-wrap: wrap;
}
.flex_double{
width:90%;
max-width: 1000px;
display: flex;
margin: 0 auto;
}
.flex_reverse{
flex-direction: row-reverse;
}
.side_textbox{
width:50%;
padding-top: 15px;
}
.flex_double img{
width:35%;
height: 150px;
object-fit: contain;
} .flow_block h3:before{
left: 50%;
}
.in_flow_block{
width:28%;
margin: 0 auto 50px;
}
.in_flow_block:first-child::after,.in_flow_block:nth-child(2)::after{
position: absolute;
content: '';
width: 0;
height: 0;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
border-left: 10px solid #FFF;
top: 0;
bottom: 0;
right: -40px;
left:auto;
margin: auto;
}
.tri_wid_max{
max-width: 1200px;
margin: 0 auto;
} .card_linetitle{
width:40%;
margin: 0 auto 50px;
}
.card_linetitle img{
display: block;
width:100%;
height: 300px;
object-fit: cover;
}
.card_linetitle h4{
position: relative;
font-size: 1.2em;
}
.black h4:before{
background: #169a3d;
}
.card_linetitle p{
font-size: 0.9em;
width: 85%;
margin: 0 auto;
}
.white p,.white h4,.white ul{
color: #FFF;
}
.white ul li,.black ul li{
font-size: 1em;
} .flex_list_border{
width:80%;
max-width:800px;
margin: 0 auto 50px;
}
.flex_list_border ul{
width:100%;
}
.flex_list_border ul li{
font-size: 0.8em;
padding: 10px 40px;
border-bottom: 1px solid #ccc;
display: flex;
}
.flex_list_border .left{
width:30%;
margin-bottom: 0;
font-size: 1.1em;
}
.flex_list_border .right{
width:70%;
font-size: 1.1em;
} .layer_block{
width:80%;
max-width: 1200px;
height: 300px;
margin: 0 auto;
position: relative;
}
.layer_block img{
width:52.5%;
height: 250px;
margin: auto;
position: absolute;
top:0;
bottom:0;
}
.row_left img{
left: 0;
}
.row_right img{
right: 0;
}
.in_layerblock{
width: 52.5%;
height: auto;
margin: auto;
background: #efefef;
padding: 50px 0;
position: absolute;
top: 50%;
-webkit-transform: translate(-50%,-50%);
-moz-transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
-o-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
}
.row_left .in_layerblock{
right: -25%;
}
.row_right .in_layerblock{
left: 25%;
}
.in_layerblock h3{
font-family: "ＭＳ Ｐ明朝", "MS PMincho","ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "serif";
font-size: 1.1em;
position: relative;
width:80%;
margin: 0 auto 15px;
z-index: 1;
}
.in_layerblock h3:before{
content: '';
position: absolute;
left: -15px;
top: -5px;
width: 35px;
height: 35px;
background: #FFF;
z-index: -1;
}
.in_layerblock p{
width: 80%;
margin: 0 auto;
font-size: 0.9em;
} .change_list{
width: 100%;
border-bottom: 1px solid #ccc;
}
.change_list ul{
width:80%;
display: flex;
margin: 0 auto;
}
.change_list ul li{
width: 25%;
border-bottom: none;
}
.change_list ul li a:before{
display: none;
}
.change_list ul li a{
width: 100%;
text-align: center;
margin: 0 auto;
} .in_itembox,.in_itembox_2{
width:25%;
margin-bottom: 25px;
}
.in_itembox img,.in_itembox_2 img{
width:150px;
height: 150px;
} .delivary_area p{
max-width: 600px;
}
.in_delivary_area{
width:80%;
max-width: 800px;
height: 400px;
margin: 0 auto;
position: relative;
}
.delivary_area .in_delivary_area img{
width:40%;
height: 300px;
object-fit: cover;
position: absolute;
top:50px;
bottom:auto;
left: 5%;
right: auto;
margin: auto;
}
.areaname{
width: 40%;
height: auto;
margin: auto;
position: absolute;
top: 50%;
right: -15%;
-webkit-transform: translate(-50%,-50%);
-moz-transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
-o-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
} .m50{
margin:50px auto;
}
.tp50{
padding-top:0px;
}
}
@media only screen and (min-width:850px) { .cb-slideshow li div .top_box{
width:auto;
position:absolute;
left:40%;
}
.cb-slideshow li div .top_box h1{
font-size:3.5em;	
}
.cb-slideshow li div .top_box p{
font-size:1.1em;
}
.firstblock_in{
position: absolute;
top: 55%;
width:70%;
}
.secondblock_in{
position: absolute;
top: 54%;
width:70%;
}
.thirdblock_box1{
display:flex;
}
.thirdblock_box2{
display:flex;
}
.recruitblock_in{
max-width: 350px;
}
.onlineshopblock_in{
max-width: 350px;
}
}
@media only screen and (min-width:1500px) { .cb-slideshow li div .top_box{
width:auto;
position:absolute;
left:30%;
}
} #page_area{
width:100%;
background:#FFF;
}
#page_area .page_mv{
position: relative;
display: block;
width:100%;
height: 200px;
background-size: cover;
background-position: center;
}
#page_area .page_mv_cover{
background:rgba(0,0,0,0.7);
height:100%;
width:100%;
position: absolute;
}
#page_area .page_mv img{
position: absolute;
display: block;
object-fit: cover;
top:0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
width:100%;
height: 100%;
}
#page_area .page_mv h1{
position: absolute;
top: 90px;
color: #FFF;
font-size: 1.5em;
font-family: 'Yu Mincho Light','YuMincho','Yu Mincho','游明朝体','ヒラギノ明朝 ProN','Hiragino Mincho ProN',sans-serif;
width:100%;
text-align: center;
}
#page_area .in_page_area{
width:80%;
padding: 20px 0 50px;
margin: 0px auto;
}
#page_area .in_page_area h2{
font-size: 1.3em;
padding: 20px 0;
text-align: center;
}
#page_area .in_page_area h3{
font-size: 1.2em;
padding: 20px 0;
text-align: left;
}
#page_area .in_page_area h4{
font-size: 1.1em;
padding: 20px 0;
text-align: left;
}
#page_area .in_page_area p{
font-size: 1em;
margin: 10px 0 20px;
}
#page_area .in_page_area ul{
list-style: none;
width:100%;
margin: 15px auto;
}
#page_area .in_page_area ul li{
width:85%;
padding: 10px 7.5% 10px;
word-wrap: break-word;
}
#page_area .in_page_area ul li:nth-child(odd){
background: #e6ecf6;
}
#page_area .in_page_area ul li:nth-child(even){
background: #fafafa;
margin-bottom:25px;
}
#page_area .in_page_area .faq li{
position: relative;
}
#page_area .in_page_area .faq li:nth-child(odd):before{
background:url(//tokushou-metal.co.jp/d/wp-content/themes/tokusyo/image/faq/q_icon.jpg);
}
#page_area .in_page_area .faq li:nth-child(even):before{
background: url(//tokushou-metal.co.jp/d/wp-content/themes/tokusyo/image/faq/a_icon.jpg);
}
#page_area .in_page_area .faq li:nth-child(odd):before,#page_area .in_page_area .faq li:nth-child(even):before{
content: '';
width: 30px;
height: 30px;
background-size: cover;
position: absolute;
left:-15px;
top:-10px;
}
@media only screen and (min-width:650px) {
#page_area .page_mv h1{
top: 75px;
font-size: 3em;
}
#page_area .in_page_area{
max-width: 1000px;
}
#page_area .in_page_area h2{
font-size: 2em;
padding: 20px 0;
}
#page_area .in_page_area h3{
font-size: 1.7em;
padding: 20px 0;
text-align: left;
}
#page_area .in_page_area h4{
font-size: 1.4em;
padding: 20px 0;
text-align: left;
}
#page_area .in_page_area p{
font-size: 1.2em;
margin: 10px 0 20px;
}
#page_area .in_page_area ul li{
width:90%;
padding: 15px 5%;
}
#page_area .in_page_area ul li:nth-child(odd){
background: #efefef;
}
#page_area .in_page_area ul li:nth-child(even){
background: #fafafa;
}
#page_area .in_page_area .faq{
width:100%;
}
#page_area .in_page_area .faq li{
position: relative;
}
#page_area .in_page_area .faq li:nth-child(odd):before{
background:url(//tokushou-metal.co.jp/d/wp-content/themes/tokusyo/image/faq/q_icon.jpg);
}
#page_area .in_page_area .faq li:nth-child(even):before{
background: url(//tokushou-metal.co.jp/d/wp-content/themes/tokusyo/image/faq/a_icon.jpg);
}
#page_area .in_page_area .faq li:nth-child(odd):before,#page_area .in_page_area .faq li:nth-child(even):before{
content: '';
width: 35px;
height: 35px;
background-size: cover;
position: absolute;
left:-17px;
top:-15px;
}
} #blog_area{
width:100%;
background:#FFF;
padding-bottom:50px;
}
#blog_area .blog_mv{
position: relative;
display: block;
width:100%;
height: 300px;
background: url(//tokushou-metal.co.jp/d/wp-content/themes/tokusyo/image/top/topimage.jpg);
background-size: cover;
background-position: center;
}
#blog_area .blog_mv_cover{
background:rgba(0,0,0,0.2);
height:100%;
width:100%;
position: absolute;
}
#blog_area .blog_mv img{
position: absolute;
display: block;
object-fit: cover;
top:0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
width:150px;
height: 150px;
}
#blog_area .blog_mv h1{
position: absolute;
top: 140px;
left: 15%;
color: #FFF;
font-size: 1.4em;
font-family: 'Yu Mincho Light','YuMincho','Yu Mincho','游明朝体','ヒラギノ明朝 ProN','Hiragino Mincho ProN',sans-serif;
width:70%;
}
#blog_area .blog_mv p{
position: absolute;
bottom: 160px;
left: 15%;
color: #FFF;
font-size:1.2em;
font-family: 'Yu Mincho Light','YuMincho','Yu Mincho','游明朝体','ヒラギノ明朝 ProN','Hiragino Mincho ProN',sans-serif;
}
#blog_area .blog_flex{
width:85%;
margin: 30px auto;
background: #fcfcfc;
}
#blog_area img{
width:100%;
}
#blog_area .in_blog_left{
width:85%;
padding: 30px 0;
margin: 0 auto;
word-break: break-all;
}
#blog_area .in_blog_right{
width:100%;
}
#blog_area .in_blog_left h2{
font-size: 1.6em;
margin-bottom: 20px;
font-family: 'Yu Mincho Light','YuMincho','Yu Mincho','游明朝体','ヒラギノ明朝 ProN','Hiragino Mincho ProN',sans-serif;
}
#blog_area .in_blog_left h3 {
font-size: 1.4em;
margin: 20px 0;
font-family: 'Yu Mincho Light','YuMincho','Yu Mincho','游明朝体','ヒラギノ明朝 ProN','Hiragino Mincho ProN',sans-serif;
}
#blog_area .in_blog_left h4{
font-size: 1.2em;
margin: 20px 0;
font-family: 'Yu Mincho Light','YuMincho','Yu Mincho','游明朝体','ヒラギノ明朝 ProN','Hiragino Mincho ProN',sans-serif;
}
#blog_area .in_blog_left p{
width:100%;
font-size: 0.9em;
margin-bottom:15px;
}
#blog_area .in_blog_left p a{
color:#3fa9f5;
}
#blog_area .in_blog_left ul,#blog_area .in_blog_left ol,.in_blog_right ul{
padding: 0.5em 1em 0.5em 2.3em;
position: relative;
background: #f8f8f8;
width:auto;
}
#blog_area .in_blog_left ul li,#blog_area .in_blog_left ol li,#blog_area .in_blog_right ul li{
line-height: 1.5;
padding: 0.5em 0;
list-style-type: none!important;
}
#blog_area .in_blog_left ul li:before,#blog_area .in_blog_left ol li:before,#blog_area .in_blog_right ul li:before{
font-family: "Font Awesome 5 Free";
content: "\f105";
font-weight: 900;
position: absolute;
left : 1em; color: gray; display:block;
}
#blog_area .in_blog_right{
background: #fff;
padding: 30px 0;
max-height:1000px;
}
#blog_area .widget{
width:100%;
margin: 0 auto;
}
#blog_area .widget_archive,#blog_area .widget_categories{
padding: 10px 0;
}
#blog_area .widget h2{
font-size: 1.1em;
position: relative;
color: white;
padding:5px 5%;
background-color: #169a3d;
width:75%;
margin: 0 auto;
}
#blog_area .widget ul{
width:75%;
padding: 5px 5%;
margin: 0 auto;
}
#blog_area .widget ul li{
padding-left: 1.3em;
}
#blog_area .widget ul li a{
display:block;
color:#333;
} .news_area{
width:100%;
background: #0A318E;
background-size: cover;
padding: 50px 0;
}
.blog_card_area{
width:85%;
max-width: 1000px;
margin: 0 auto;
display: flex;
flex-wrap: wrap;
}
.blog_card{
width:45%;
min-width: 250px;
height: 200px;
position: relative;
display: block;
margin: 0 auto 50px;
}
.blog_card img{
width:100%;
height: 100%;
object-fit: cover;
position: absolute;
}
.blog_card .b_cover{
background: rgba(0,0,0,0.6);
width: 100%;
height: 100%;
position: absolute;
}
.blog_card .in_blogcard{
position: absolute;
width:80%;
height: auto;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%);
color: #FFF;
}
.blog_card .date{
font-size: 0.9em;
}
.blog_card h3{
font-size: 1em;
padding: 5px 0;
}
.blog_card .disc{
font-size: 0.8em;
}
.to_list{
width:100%;
height: 50px;
position: relative;
}
.to_list .container{
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
}
.mv_archive{
width: 100%;
height: 200px;
position: relative;
padding-top: 15px;
}
.in_mv_archive{
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%,-50%);
-moz-transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
-o-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
width:80%;
max-width: 400px;
height:auto; 
color: #FFF;
}
.in_mv_archive h1{
font-size: 1.4em;
text-align: center;
}
.in_mv_archive p{
font-size: 0.9em;
}
.in_mv_archive .date{
text-align: center;
margin: 0px auto 5px;
}
.in_mv_archive .left_disc{
text-align: left;
}
@media only screen and (min-width:650px) {
#blog_area .blog_mv h1{
position: absolute;
top:180px;
left: 10%;
color: #FFF;
font-size: 2em;
}
#blog_area .blog_mv img{
width:250px;
height: 250px;
}
.in_mv_archive{
padding-top: 40px;
}
.blog_card{
width:42%;
margin: 30px auto 50px 4%;
}
.blog_card:hover .b_cover{
background: rgba(0,0,0,0.3);
transition: 0.3s;
}
.to_list{
margin: 30px auto 0;
}
.to_list a{
width:130px;
font-size: 1em;
}
.in_mv_archive h1{
font-size: 2em;
}
.in_mv_archive p{
font-size: 1.1em;
}
.in_mv_archive .date{
margin: 0 auto 10px;
}
}
@media only screen and (min-width:800px) {
#blog_area .blog_mv{
height: 550px;
}
#blog_area .blog_mv h1{
left: 15%;
top:280px;
color: #FFF;
font-size: 2em;
}
#blog_area .blog_mv img{
width:300px;
height: 300px;
}
#blog_area .blog_mv p{
bottom: 280px;
left: 15%;
color: #FFF;
font-size: 1.4em;
}
#blog_area .blog_flex{
display: flex;
max-width:1200px;
}
#blog_area .in_blog_left{
width:60%;
margin: 0 auto 0;
}
#blog_area .in_blog_right{
width:30%;
margin: 30px auto;
}
#blog_area .widget{
width:80%;
}
#blog_area .in_blog_left h2{
font-size:1.5em;
}
#blog_area .in_blog_left h3{
font-size:1.3em;
}
#blog_area .in_blog_left h4{
font-size:1.3em;
}
#blog_area .in_blog_left p{
font-size:1em;
}
} @media only screen and (min-width:1000px) {
.onlineshopblock_in{
right: 10%;
max-width: 350px;
}
.recruitblock_in{
max-width: 350px;
}
}
@media only screen and (min-width:1440px) {
.onlineshopblock_in{
right: 15%;
max-width: 400px;
}
.recruitblock_in{
max-width: 400px;
}
}
@media only screen and (min-width:1600px) {
.onlineshopblock_in{
right: 15%;
}
}
@media only screen and (min-width:1800px) {
.onlineshopblock_in{
right: 20%;
}
}
@media only screen and (min-width:2100px) {
.onlineshopblock_in{
right: 20%;
}
}
@media only screen and (min-width:2400px) {
.onlineshopblock_in{
right: 25%;
}
} form{
width: 100%;
padding:50px 0;
}
.inquiry{
margin: 0 auto;
max-width: 1000px;
}
.inquiry tr{
width: 100%;
}
.cflex{
display: flex;
color: #333;
justify-content: flex-end;
-webkit-align-items: flex-end;
color: #333;
padding-right: 25px;
}
.hissu{
width: 50px;
background: #BA2934;
color: #FFF;
text-align: center;
margin-left: 10px;
padding-top:2px;
}
.inquiry th{
width: 25%;
padding: 15px 0 15px 30px;
font-size: 16px;
font-weight: 200;
}
.inquiry td{
width: 70%;
max-width: 100px;
}
.inquiry input{
width: 90%;
font-size: 16px;
line-height: 1;
padding: 7px 0 5px 15px;
border:solid 1px #888;
-webkit-appearance : none;
-webkit-tap-highlight-color : rgba(0,0,0,0);
} 
#select select {
width: 70%;
padding: 5px;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
border: 1px solid #999;
background: #FFF;
background: url(//tokushou-metal.co.jp/d/wp-content/themes/tokusyo/image/arrow01.png) right 100% no-repeat;
background-size: 20px, 100%;
}
#radio input{
width:10px;
height:10px;
padding:3px;
color: #aaa;
border-radius:5px;
}
#radio input:checked{
background:#00c1f1;
}
.mwform-radio-field-text{
font-size: 16px;
line-height: 1;
}
.inquiry textarea{
width: 90%;
height: 100px;
font-size: 16px;
padding: 15px 0 8px 15px;
border:solid 1px #888;
-webkit-appearance : none;
-webkit-tap-highlight-color : rgba(0,0,0,0);
}
.inquiry textarea::placeholder{
font-weight:200;
}
.inquiry input:focus,.inquiry textarea:focus {
border:solid 1px #8d785a;
}
.form_text{
font-size: 12px;
line-height: 1.3;
padding: 8px 0px;
}
.entry_btn{
text-align: center; }
.entry_btn input{
background: #169a3d;
color: #fff;
border: none;
padding: 10px 30px;
-webkit-appearance : none;
-webkit-tap-highlight-color : rgba(0,0,0,0);
margin-top:20px;
margin-bottom:50px;
}
.entry_btn input:hover{
cursor: pointer;
background: #26aa4d;
transition:0.3s;
}
.ctext{
color: #333;
font-size: 16px;
padding: 80px 0 20px;
text-align:left;
}
.ctext p{
width: 80%;
max-width: 700px;
margin: 0 auto;
}
.chkbox-area{
max-width: 390px;
padding-top: 10px;
width: 80%;
margin: auto;
text-align:left;
}
@media screen and (min-width: 1000px) {
.chkbox-area{
padding-top: 30px;
padding-bottom: 10px;
max-width: 430px;
}
}
@media only screen and (min-width:320px) and (max-width:1000px) { form{
width: 100%;
}
.inquiry{
margin: 0 auto;
max-width: 500px;
}
.inquiry tr{
width: 100%;
}
.cflex{
display: flex;
color: #333;
}
.hissu{
width: 50px;
background: #BA2934;
color: #FFF;
text-align: center;
margin-left: 10px;
}
.inquiry th{
width: 25%;
padding: 15px 0 15px 30px;
font-size: 16px;
}
.inquiry td{
width: 70%;
max-width: 100px;
}
.inquiry input{
width: 90%;
font-size: 16px;
line-height: 1;
padding: 7px 0 5px 15px;
border:solid 1px #888;
-webkit-appearance : none;
-webkit-tap-highlight-color : rgba(0,0,0,0);
}
#radio input{
width:10px;
height:10px;
padding:3px;
border-radius:3px;
}
#radio input:checked{
background:#00c1f1;
}
.mwform-radio-field-text{
font-size: 16px;
line-height: 1;
}
.inquiry textarea{
width: 90%;
height: 100px;
font-size: 16px;
padding: 5px 0 8px 15px;
border:solid 1px #888;
-webkit-appearance : none;
-webkit-tap-highlight-color : rgba(0,0,0,0);
}
.inquiry textarea::placeholder{
font-weight:200;
}
.inquiry input:focus,.inquiry textarea:focus {
border:solid 1px #8d785a;
}
.form_text{
font-size: 12px;
line-height: 1.3;
padding-top: 8px;
}
.entry_btn{
text-align: center; }
.entry_btn input{
background: #c2953e;
color: #fff;
border: none;
padding: 10px 30px;
-webkit-appearance : none;
-webkit-tap-highlight-color : rgba(0,0,0,0);
}
.entry_btn input:hover{
cursor: pointer;
background: #d2a54e;
transition:0.3s;
}
.ctext{
color: #888;
font-size: 16px;
padding: 20px 0 0;
}
.ctext p{
width: 80%;
max-width: 700px;
margin: 0 auto;
text-align:left;
}
.inquiry{
width: 100%;
margin: 0 auto;	
}
.inquiry tr{
width: 95%;
padding-right: 15px;
display: block;
padding: 0;
margin: 0;
}
.inquiry tr th{
width: 80%;
padding: 0 0 5px;
margin: 0 auto;
font-size: 16px;
color: #aaa;
display: flex;
}
.inquiry tr td{
width: 80%;
max-width: 360px;
display: block;
padding: 0 10px 15px;
margin: 0 auto;
}
.inquiry input{
width: 100%;
font-size: 15px;
line-height: 1;
padding: 7px 0 5px 5px;
border:solid 1.5px #ccc;
}
.inquiry textarea{
width: 90%;
height: 100px;
font-size: 15px;
padding: 5px 0 8px 15px;
border:solid 1.5px #ccc;
}
.inquiry input:focus,.inquiry textarea:focus {
border:solid 1px #8d785a;
}
.entry_btn{
text-align: center; }
.entry_btn input{
background: #7D8230;
color: #fff;
border: none;
padding: 10px 30px;
}
}
.ec_btn {
position: fixed;
top: auto;
bottom: 100px;
left: auto;
right: 10px;
width: 70px;
height: 70px;  background: rgba(255, 255, 255, 0.6);
text-align: center;
z-index: 10;
border: 1px solid rgb(22, 154, 61);
border-radius: 50%;
}
.ec_btn img {
object-fit: contain;
padding-top: 10px;
padding-right: 2px;
width: 35px;
}
.ec_btn p {
color: #333;
font-size: 14px;
position: absolute;
top: auto;
bottom: 5px;
left: 0;
right: 0;
margin: auto;
width: 70px;
height: 20px;
z-index: 11;
text-align: center;
}
.tel_btn {
position: fixed;
top: auto;
bottom: 20px;
left: auto;
right: 10px;
width: 70px;
height: 70px;  background: rgba(255, 255, 255, 0.6);
text-align: center;
z-index: 10;
border: 1px solid rgb(22, 154, 61);
border-radius: 50%;
}
.tel_btn img {
-o-object-fit: cover;
object-fit: cover;
padding-top: 5px;
width: 45px;
height: 45px;
}
.tel_btn p {
color: #333;
font-size: 14px;
position: absolute;
top: auto;
bottom: 5px;
left: 0;
right: 0;
margin: auto;
width: 70px;
height: 20px;
z-index: 11;
text-align: center;
}
.tel_btn .fa-phone {
color: #169a3d;
}
.ec_banner{
display: none;
}
.contact_banner{
display: none;
}
@media screen and (min-width: 1024px) {
.ec_btn {
display: none;
}
.tel_btn {
display: none;
}
.icon-area{
width: 100%;
text-align: center;
}
.icon-area img{
width: 30px
}
.ec_banner{
display: block;
position: fixed;
border-radius: 50%;
bottom: 160px;
right: 5%;
width: 120px;
height: 120px;
background: linear-gradient(to bottom, #000, rgba(255, 255, 255, 0.1));
background: #fff;
border: 1px solid #137E33;
z-index:5;
}
.ec_banner p{
color: #137E33;
font-size: 9px;
font-weight: 600;
text-align: center;
}
.ec_banner .ectitle{
color: #137E33;
font-size: 12px;
font-weight: 700;
text-align: center;
margin-bottom: 5px;
}
.ec_banner_inner{
padding: 20px 0px 10px 0px;
}
.contact_banner{
display: block;
position: fixed;
border-radius: 50%;
bottom: 20px;
right: 5%;
width: 120px;
height: 120px;
background: linear-gradient(to bottom, #000, rgba(255, 255, 255, 0.1));
background: #fff;
border: 1px solid #137E33;
}
.contact_banner i{
color: #137E33;
text-align: center;
font-size: 25px;
margin-bottom: 7px;
}
.contact_banner p{
color: #137E33;
font-size: 9px;
font-weight: 700;
text-align: center;
}
.contact_banner .tel-num{
color: #137E33;
font-size: 14px;
font-weight: 700;
text-align: center;
margin-bottom: 5px;
}
.contact_banner_inner{
padding: 20px 0px 10px 0px;
}
}
@media screen and (min-width: 1440px) {
.icon-area{
width: 100%;
text-align: center;
font-size: 30px;
}
.icon-area img{
width: 40px
}
.ec_banner{
display: block;
position: fixed;
border-radius: 50%;
bottom: 215px;
right: 5%;
width: 165px;
height: 165px;
background: linear-gradient(to bottom, #000, rgba(255, 255, 255, 0.1));
background: #fff;
border: 3px solid #137E33;
}
.ec_banner p{
color: #137E33;
font-size: 11px;
font-weight: 600;
text-align: center;
}
.ec_banner .ectitle{
color: #137E33;
font-size: 16px;
font-weight: 700;
text-align: center;
margin-bottom: 5px;
}
.ec_banner_inner{
padding: 30px 10px 40px 10px;
}
.contact_banner{
display: block;
position: fixed;
border-radius: 50%;
bottom: 20px;
right: 5%;
width: 165px;
height: 165px;
background: linear-gradient(to bottom, #000, rgba(255, 255, 255, 0.1));
background: #fff;
border: 3px solid #137E33;
}
.contact_banner i{
color: #137E33;
text-align: center;
font-size: 35px;
margin-bottom: 7px;
}
.contact_banner p{
color: #137E33;
font-size: 11px;
font-weight: 600;
text-align: center;
}
.contact_banner .tel-num{
color: #137E33;
font-size: 20px;
font-weight: 700;
text-align: center;
margin-bottom: 5px;
}
.contact_banner_inner{
padding: 30px 15px 40px 15px;
}
}