@charset "utf-8";
/* ------------------------------------------------------------ fv */

body { background: #eeeeee; }

#fv { background: url(../images/product/fv.jpg) center center no-repeat; background-size: cover; padding: 300px 0 250px; }
#fv.fv0 { background: url(../images/product/fv_printing.jpg) center center no-repeat; background-size: cover;  }
#fv.fv1 { background: url(../images/product/fv_pasting.jpg) center center no-repeat; background-size: cover;  }
#fv.fv2 { background: url(../images/product/fv_coating.jpg) center center no-repeat; background-size: cover;  }
#fv.fv3 { background: url(../images/product/fv_development.jpg) center center no-repeat; background-size: cover;  }
#fv.fv4 { background: url(../images/product/fv_outline.jpg) center center no-repeat; background-size: cover;  }
#fv .fv_text { font-size: 18px; letter-spacing: 5px; }
#fv .fv_text span { font-size: 68px; color: #3588df; display: block; font-family: 'Lato', sans-serif; font-weight: 700; line-height: 130%; letter-spacing: 14px;}

/* ------------------------------------------------------------ products */
.outbox { padding: 80px 0 110px; position: relative; margin: 0 auto 170px; }
.outbox:before { background: #fff; width: 80vw; height: 100%; content: ""; position: absolute; left: 0; top: 0; z-index: -1; }
.outbox.second:before { right: 0; left: inherit; }
.outbox .left { float: left; }
.outbox .right { float: right; }
.outbox .text { width: 550px; }
.outbox .text h3 { font-size: 32px; letter-spacing: 3px; }
.outbox .text h4 { font-size: 20px; color: #3588df; font-family: 'Lato', sans-serif; letter-spacing: 5px; padding: 10px 0 40px; }
.outbox .text p { font-size: 16px; line-height: 250%;  }
.outbox .img {  }
.outbox .img img {  }

/* ------------------------------------------------------------ product */

#product h2 { text-align: center; font-size: 18px; color: #969696; }
#product h2 span { font-family: 'Lato', sans-serif; letter-spacing: 5px; font-size: 48px; color: #3588df; display: block; line-height: 130%; }
#product .outer-box { display: table; margin: 60px auto 0; }
#product .outer-box .cell { display: table-cell; text-align: center; }
#product .outer-box .cell img { width: 100%; height: auto; }
#product .link { padding: 30px 0 0; }
#product .double { padding: 15px 0 0; }
#product .link a { font-size: 18px; color: #3588df; display: block; position: relative; width: 400px; margin: 0 auto; }
#product .link a:before { position: absolute; top: 0; bottom: 0; margin: auto 0; right: 20px; display: block; width: 40px; height: 40px; border-top: solid 1px #4e96e3; border-right: solid 1px #4e96e3; -webkit-transform: rotate(45deg); transform: rotate(45deg); content: ''; }
#product .link span { font-family: 'Lato', sans-serif; display: block; font-size: 26px; line-height: 100%; padding: 0 0 5px; letter-spacing: 7px;}

#product .boxes img { width: 100%; height: auto; }
#product .boxes { display: table; padding: 80px 0 100px; margin: 0 auto;}
#product .boxes .box { display: table-cell; text-align: center; }
#product .boxes .box .link a { width: calc(1100px / 3); }

/* ------------------------------------------------------------ list */
.nav { margin: 120px auto 70px; }
.nav ul {  }
.nav ul li { float: left; width: calc(100% / 5); text-align: center; position: relative; }
.nav ul li::before { position: absolute; margin: 0 auto; bottom: 20px; right: 0; left: 0; display: block; width: 10px; height: 10px; border-top: solid 1px #3588df; border-right: solid 1px #3588df; -webkit-transform: rotate(135deg); transform: rotate(135deg); content: ''; z-index: 1; }
.nav ul li a { color: #3588df; background: #fff; padding: 20px 0 35px; display: block; font-size: 22px; }
.nav ul li.on::before { border-top: solid 1px #fff; border-right: solid 1px #fff; }
.nav ul li.on a { color: #fff; background: #3588df; }


#list { background: #fff; padding: 110px 0 0; }
#list .article { display: table; width: 100%; margin: 0 auto 100px; }
#list .image img { width: 100%; height: auto; }
#list .det h4 { font-size: 25px; padding: 0 0 10px; border-bottom: 1px solid #000; }
#list .det h5 { font-size: 20px; padding: 10px 0 0; }
#list .det p { font-size: 16px; padding: 20px 0 0; line-height: 200%; }

#list .article .pdf { display: block; width: 170px; line-height: 40px; background: #e6714e; color: #fff; border-radius: 20px; text-align: center; margin: 30px auto 0; }
#list .pattern1 { display: table; width: 100%; margin: 0 auto 100px; }
#list .pattern1 .image { display: table-cell; width: 356px; }
#list .pattern1 .det { display: table-cell; padding: 0 0 0 50px; vertical-align: top; }

#list .pattern2 .image { display: table-cell; width: 356px; }
#list .pattern2 .image a { display: block; padding: 0 0 20px; }
#list .pattern2 .image a img { padding: 0; }
#list .pattern2 .image img { padding: 0 0 20px; display: block; }
#list .pattern2 .det { display: table-cell; padding: 0 0 0 50px; vertical-align: top; }

#list .pattern3 .image { display: table-cell; width: 356px; }
#list .pattern3 .det { display: table-cell; padding: 0 20px; vertical-align: top; }

#list .pattern4 .image { display: table-cell; width: 356px; }
#list .pattern4 .det { display: table-cell; padding: 0 20px; vertical-align: top; width: 704px; }
#list .pattern4 .reverse { padding: 0 0 30px; }

#list .pattern5 .image { width: 100%; max-width: 800px; margin: 0 auto; }

#list .pattern5 .det { padding: 20px 0 0; }

#list .pattern6 .items { float: left; width: calc(100% / 2 - 40px); margin: 0 0 40px 80px; }
#list .pattern6 .items:nth-of-type(2n + 1) { margin: 0 0 40px 0; clear: both; }
#list .pattern6 .det { padding: 20px 0 0; }


/* ------------------------------------------------------------ back */
.btn_back { padding: 0 0 100px; }
.btn_back a { background: #fff; }

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

/* ------------------------------------------------------------ fv */

#fv { background: url(../images/product/fv.jpg) center center no-repeat; padding: 100px 0 50px; background-size: cover; }
#fv .fv_text { font-size: 16px; text-align: center; }
#fv .fv_text span { font-size: 30px; }

/* ------------------------------------------------------------ products */
.outbox { padding: 40px 0 50px; margin: 0 auto 50px; }
.outbox:before { width: 100vw; height: 100%; }
.outbox .left { float: none; }
.outbox .right { float: none; }
.outbox .text { width: 100%; }
.outbox .text h3 { font-size: 20px; letter-spacing: 3px; }
.outbox .text h4 { font-size: 16px; letter-spacing: 3px; padding: 5px 0 20px; }
.outbox .text p { font-size: 14px; line-height: 200%; padding: 0 0 50px;}
.outbox .img { text-align: center; }
.outbox .img img { width: 80%; height: auto; }
.outbox .inner { width: 92%; }
/* ------------------------------------------------------------ product */
#product .outer-box { display: inherit; margin: 30px auto 0; width: 100%; }
#product .outer-box .cell { display: inherit; padding: 0 0 40px; }
#product .link { padding: 10px 0 0; }
#product .double { padding: 10px 0 0; }
#product .link a { font-size: 16px;  width: 100%; margin: 0 auto; }
#product .link a:before { width: 25px; height: 25px; }
#product .link span { font-size: 20px; padding: 0 0 5px; }

#product .boxes { display: inherit; padding: 0 0 30px; width: 100%;}
#product .boxes .box { display: inherit; padding: 0 0 50px; }
#product .boxes .box img { width: 100%; height: auto; }
#product .boxes .box .link a { width: 100%; }
/* ------------------------------------------------------------ list */
.nav { margin: 50px auto; }
.nav ul li { float: left; width: calc(100% / 2); margin-bottom: 1px;}
.nav ul li::before { width: 8px; height: 8px;}
.nav ul li a { padding: 10px 0 25px; font-size: 16px; }


#list { padding: 50px 0 0; }
#list .article { display: table; margin: 0 auto 50px; }
#list .image { width: 35%; }
#list .det { padding: 0 0 0 18px; }
#list .det h4 { font-size: 18px; padding: 0 0 10px; line-height: 100%; }
#list .det h5 { font-size: 13px; padding: 10px 0 0; line-height: 140%; }
#list .det p { font-size: 13px; padding: 10px 0 0; line-height: 170%; }
#list .inner { width: 92%; }

#list .pattern1 .image { display: table-cell; width: 35%; }
#list .pattern1 .det { padding: 0 0 0 18px; }

#list .pattern2 .image { display: table-cell; width: 35%; }
#list .pattern2 .det { padding: 0 0 0 18px; }

#list .pattern3 { display: flex; flex-direction: row; flex-wrap: wrap; }
#list .pattern3 .image { width: 50%; order: 1; }
#list .pattern3 .det { padding: 20px 0 0; order: 2; }

#list .pattern4 .image { width: 35%; }
#list .pattern4 .det { padding: 0 10px; width: auto; }
#list .pattern4 .reverse { padding: 0 0 30px; }

#list .pattern5 .image { width: 100%; }
#list .pattern5 .det { padding: 20px 0 0; }

#list .pattern6 .items { float: left; width: calc(100% / 2 - 5px); margin: 0 0 40px 10px; }
#list .pattern6 .items .image { width: 100%; }
#list .pattern6 .items:nth-of-type(2n + 1) { margin: 0 0 40px 0; }
#list .pattern6 .det { padding: 20px 0 0; }


/* ------------------------------------------------------------ back */
.btn_back { padding: 0 0 30px; }


}