@charset "utf-8";
/* CSS Document */

/*PC*/
@media print, screen and (min-width: 768px) {
/*.hed_tit::before {
    position: absolute;
    content: 'job';
    font-size: 26rem;
	text-transform: uppercase;
    line-height: 1;
    top: 0px;
    left: 50%;
    color: #005993;
	opacity: 0.1;
    z-index: -1;
    font-family: 'Francois One', sans-serif;
    font-weight: 500;
}*/
#hedImg { padding: 100px 0px; background: url("../images/work/hed_img.jpg") center center; text-align: center; background-size: cover; }
.hed_tit::before {
content: 'About Work';
}
/*------------*/
.jbHedTxt {
text-align: center;
margin-bottom: 60px;
}
.comFlex_sb-txt2 > h5 {
font-family: 'Nunito', sans-serif;
/*text-transform: uppercase;*/
font-size: 3rem;
color: #005993;
margin-bottom: 15px;
}
.jbBox {
padding: 0 5%;
}
.jbBox .comBox {
width: 90%;
}
.jbBox .comBox:nth-child(even) {
margin-left: auto;
margin-right: 0;
}
.jbBox .comBox .comFlex_sb-txt2 {
position: relative;
}
.jbBox .comBox:nth-child(1)  .comFlex_sb-txt2::before {
    /*position: absolute;
    content: 'business';
    font-size: 15rem;
	text-transform: uppercase;
    line-height: 1;
    top: -50px;
    left: 0;
    color: #005993;
	opacity: 0.05;
    z-index: -1;
    font-family: 'Francois One', sans-serif;
    font-weight: 500;*/
}
.jbBox .comBox:nth-child(2)  .comFlex_sb-txt2::before {
    /*position: absolute;
    content: 'quality control';
    font-size: 15rem;
	text-transform: uppercase;
    line-height: 1;
    top: -50px;
    left: 0;
    color: #005993;
	opacity: 0.05;
    z-index: -1;
    font-family: 'Francois One', sans-serif;
    font-weight: 500;*/
}
.jbBox .comBox:nth-child(3)  .comFlex_sb-txt2::before {
    /*position: absolute;
    content: 'production';
    font-size: 15rem;
	text-transform: uppercase;
    line-height: 1;
    top: -50px;
    left: 0;
    color: #005993;
	opacity: 0.05;
    z-index: -1;
    font-family: 'Francois One', sans-serif;
    font-weight: 500;*/
}

.jbBox .comFlex_sb-img2 {
-ms-flex-preferred-size: 42%;
flex-basis: 42%;
}
.jbBox .comFlex_sb-txt2 {
-ms-flex-preferred-size: 53%;
flex-basis: 53%;
}
.jbList {
margin-top: 40px;
}
.jbList li {
padding: 40px;
background: #f0f8fd;
}
.jbList li:nth-child(n+2) {
margin-top: 30px;
}
.jbList li .comFlex_sb-img2 {
-ms-flex-preferred-size: 30%;
flex-basis: 30%;
min-width: 30%;
box-sizing: border-box;
}
.jbList li .comFlex_sb-txt2 {
-ms-flex-preferred-size: 65%;
flex-basis: 65%;
min-width: 65%;
box-sizing: border-box;
}
.jbList li h5 {
color: #005993;
font-size: 1.8rem;
margin-bottom: 10px;
}
.jbList li p {
font-size: 1.5rem;
}

.jnTalk {
margin-top: 30px;
border: #005993 1px solid;
box-shadow: 4px 4px 0 #005993;
padding: 30px;
}
.jnTalk h6 {
/*color: #005993;*/
margin-bottom: 10px;
}
.jnTalk ul {
display:-webkit-box;
display:-ms-flexbox;
display:flex;
}
.jnTalk li {
background: #005993;
margin-right: 20px;
transform:skewX(-15deg);
-webkit-transition: 0.3s ease-in-out;
-moz-transition: 0.3s ease-in-out;
-o-transition: 0.3s ease-in-out;
transition: 0.3s ease-in-out;
}
.jnTalk li a {
display: block;
color: #fff;
padding: 10px 40px;
transform:skewX(15deg);
position: relative;
}
.jnTalk li a::before{
position: absolute;
content: "";
vertical-align: middle;
top: 50%;
right: 20px;
margin-top: -2px;
width: 4px;
height: 4px;
border-top: 1px solid #fff;
border-right: 1px solid #fff;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
.jnTalk li:hover {
background: #222;
}

/*------------*/
.dot_bg {
position: relative;
}
.dot_bg::before {
display: block;
content: "";
position: absolute;
background-size: 14px 14px;
margin: 0 auto;
background-color: #005993;
/*background-color: transparent;
background-image: radial-gradient(#005993 4%, transparent 14%),radial-gradient(#005993 4%, transparent 14%);
background-position: 5px 5px, 12px 12px;
background-repeat: repeat;*/
z-index: -1;
top: -50px;
left: -140px;
width: 200%;
height: 320px;
opacity: 0.07;
}
.f_rv .dot_bg::before {
right: -140px;
left: auto;
}

}




/*----------------------------------------------------*/



/*sp*/
@media only screen and (max-width: 767px) {
#hedImg { padding: 50px 0px; background: url("../images/work/hed_img.jpg") center center; text-align: center; background-size: cover; }
.hed_tit::before {
content: 'About Work';
}
/*------------*/
.jbHedTxt {
margin-bottom: 40px;
}
.comFlex_sb-txt2 > h5 {
font-family: 'Nunito', sans-serif;
/*font-family: 'Francois One', sans-serif;
text-transform: uppercase;*/
font-size: 2.4rem;
color: #005993;
margin-bottom: 15px;
}
.jbBox {
padding: 0 2%;
}
.jbBox .comBox {
width: 100%;
margin: auto;
}
/*.jbBox .comBox:nth-child(even) {
margin-left: auto;
margin-right: 0;
}*/
.jbBox .comBox .comFlex_sb-txt2 {
position: relative;
}
/*.jbBox .comBox:nth-child(1)  .comFlex_sb-txt2::before {
    position: absolute;
    content: 'business';
    font-size: 15rem;
	text-transform: uppercase;
    line-height: 1;
    top: -50px;
    left: 0;
    color: #005993;
	opacity: 0.05;
    z-index: -1;
    font-family: 'Francois One', sans-serif;
    font-weight: 500;
}
.jbBox .comBox:nth-child(2)  .comFlex_sb-txt2::before {
    position: absolute;
    content: 'quality control';
    font-size: 15rem;
	text-transform: uppercase;
    line-height: 1;
    top: -50px;
    left: 0;
    color: #005993;
	opacity: 0.05;
    z-index: -1;
    font-family: 'Francois One', sans-serif;
    font-weight: 500;
}
.jbBox .comBox:nth-child(3)  .comFlex_sb-txt2::before {
    position: absolute;
    content: 'production';
    font-size: 15rem;
	text-transform: uppercase;
    line-height: 1;
    top: -50px;
    left: 0;
    color: #005993;
	opacity: 0.05;
    z-index: -1;
    font-family: 'Francois One', sans-serif;
    font-weight: 500;
}
.jbBox .comBox:nth-child(4)  .comFlex_sb-txt2::before {
    position: absolute;
    content: 'Product Development Division';
    font-size: 15rem;
	text-transform: uppercase;
    line-height: 1;
    top: -50px;
    left: 0;
    color: #005993;
	opacity: 0.05;
    z-index: -1;
    font-family: 'Francois One', sans-serif;
    font-weight: 500;
}
.jbBox .comBox:nth-child(5)  .comFlex_sb-txt2::before {
    position: absolute;
    content: 'Tuna Division';
    font-size: 15rem;
	text-transform: uppercase;
    line-height: 1;
    top: -50px;
    left: 0;
    color: #005993;
	opacity: 0.05;
    z-index: -1;
    font-family: 'Francois One', sans-serif;
    font-weight: 500;
}*/
.jbBox .comFlex_sb-img2 {
-ms-flex-preferred-size: 100%;
flex-basis: 100%;
}
.jbBox .comFlex_sb-txt2 {
-ms-flex-preferred-size: 100%;
flex-basis: 100%;
}
.jbList {
margin-top: 30px;
}
.jbList li {
padding: 20px;
background: #f0f8fd;
}
.jbList li:nth-child(n+2) {
margin-top: 20px;
}
.jbList li .comFlex_sb-img2 {
-ms-flex-preferred-size: 100%;
flex-basis: 100%;
min-width: 100%;
box-sizing: border-box;
}
.jbList li .comFlex_sb-txt2 {
-ms-flex-preferred-size: 100%;
flex-basis: 100%;
min-width: 100%;
box-sizing: border-box;
}
.jbList li h5 {
color: #005993;
font-size: 1.8rem;
margin-bottom: 10px;
}
.jbList li p {
font-size: 1.5rem;
}

.jnTalk {
margin-top: 30px;
border: #005993 1px solid;
box-shadow: 4px 4px 0 #005993;
padding: 20px;
}
.jnTalk h6 {
/*color: #005993;*/
margin-bottom: 10px;
}
.jnTalk ul {
display:-webkit-box;
display:-ms-flexbox;
display:flex;
  	-ms-flex-wrap: wrap;
  	flex-wrap: wrap;
}
.jnTalk li {
	-ms-flex-preferred-size: 100%;
	flex-basis: 100%;
background: #005993;
transform:skewX(-15deg);
-webkit-transition: 0.3s ease-in-out;
-moz-transition: 0.3s ease-in-out;
-o-transition: 0.3s ease-in-out;
transition: 0.3s ease-in-out;
}
.jnTalk li:nth-child(n+2) {
margin-top: 15px;
}
.jnTalk li a {
display: block;
color: #fff;
padding: 10px 40px;
transform:skewX(15deg);
position: relative;
}
.jnTalk li a::before{
position: absolute;
content: "";
vertical-align: middle;
top: 50%;
right: 20px;
margin-top: -2px;
width: 4px;
height: 4px;
border-top: 1px solid #fff;
border-right: 1px solid #fff;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
.jnTalk li:hover {
background: #222;
}


/*------------*/
.dot_bg {
position: relative;
}
.dot_bg::before {
display: block;
content: "";
position: absolute;
background-size: 14px 14px;
margin: 0 auto;
background-color: #005993;
/*background-color: transparent;
background-image: radial-gradient(#005993 4%, transparent 14%),radial-gradient(#005993 4%, transparent 14%);
background-position: 5px 5px, 12px 12px;
background-repeat: repeat;*/
z-index: -1;
top: -50px;
left: -140px;
width: 200%;
height: 320px;
opacity: 0.07;
}
.f_rv .dot_bg::before {
right: -140px;
left: auto;
}




}