@charset "utf-8";

/* common
---------------------------------------------*/
.explain        { padding: 60px 0 90px; }
.explain .inner { display: table; }
.explain h2,
.explain .lead  { display: table-cell; vertical-align: middle; }

.category-list                   { position: relative; padding: 120px 0 100px; }
.category-list:nth-child(2n)     { background: #f3f9fb; }
.category-list h3                { position: absolute; top: 0; left: 0; width: 100%; padding-top: 35px; margin-bottom: 30px; text-align: center; }
.category-list h3:before         { content: ""; position: absolute; top: 0; left: 50%; width: 300px; height: 4px; margin-left: -150px; background: #215981; }
.category-list:nth-child(2n) + .contact { margin-top: 100px; }
.contact ul > li                 { width: calc((100% - 28px) / 2); margin: 0 auto; background: #fff; font-size: 3rem; font-weight: bold; line-height: 1.25; }
.contact ul > li a               { display: block; position: relative; height: 100%; padding: 50px 60px 50px 30px; background: #00afcc; color: #fff; }
.contact ul > li a:after         { content: ""; position: absolute; top: 50%; right: 30px; width: 28px; height: 28px; margin-top: -14px; background: url("/assets/images/i_ar.png"); background-size: cover; }
.outline:after                   { content: ""; display: block; clear: both; height: 0; }
.outline figure                  { float: left; width: 408px; }
.outline figure img              { width: 100%; }
.outline dl                      { float: right; width: 844px; }
.outline dl .subtitle            { margin: 20px 0 10px; color: #18b6d1; font-size: 2.2rem; font-weight: bold; }
.outline dl .subtitle:first-child{ margin-top: 0; }
.outline dt                      { font-size: 1.6rem; line-height: 1.7; }
.outline dd ul:after             { content: ""; display: block; clear: both; height: 0; }
.outline dd ul li                { display: table; float: left; width: calc((100% - 28px) / 2); margin: 28px 28px 0 0; background: #fff; font-size: 1.8rem; line-height: 1.25; }
.outline dd ul li:nth-of-type(2n){ margin-right: 0; }
.outline dd ul li a              { display: table-cell; position: relative; height: 100%; padding: 20px 60px 20px 20px; background: #00afcc; color: #fff; vertical-align: middle; }
.outline dd ul li a:after        { content: ""; position: absolute; top: 50%; right: 30px; width: 28px; height: 28px; margin-top: -14px; background: url("/assets/images/i_ar.png"); background-size: cover; }

/* video-flow
---------------------------------------------*/
.video-flow .content section { margin-top: 60px; }

.video-flow h2       { position: relative; margin-bottom: 45px; padding-bottom: 5px; border-bottom: 2px solid #ccc; color: #333; font-size: 3rem; font-weight: bold; }
.video-flow h2:after { content: ""; position: absolute; bottom: -2px; left: 0; width: 200px; height: 2px; background: #0a4774; }

.video-flow .flow-list                { margin-bottom: 120px; }
.video-flow .flow-list ol             { counter-reset: item; }
.video-flow .flow-list ol:after       { content: ""; display: block; clear: both; height: 0; }
.video-flow .flow-list ol > li        { position: relative; float: left; width: calc((100% - 84px) / 4); margin: 28px 28px 0 0; padding: 20px 20px 30px; background: #074674; color: #fff; font-size: 1.8rem; }
.video-flow .flow-list ol > li:before { counter-increment: item; content: 'Step.'counter(item); display: block; margin-bottom: 20px; font-family: 'Roboto', sans-serif; font-size: 2.4rem; font-weight: 400; text-align: center; }
.video-flow .flow-list ol > li:after  { content: ""; position: absolute; right: 20px; bottom: 20px; background-repeat: no-repeat; opacity: .3; }
.video-flow .flow-list ol > li:nth-child(1),
.video-flow .flow-list ol > li:nth-child(2),
.video-flow .flow-list ol > li:nth-child(3),
.video-flow .flow-list ol > li:nth-child(4)        { margin-top: 0; }
.video-flow .flow-list ol > li:nth-child(4n)       { margin-right: 0; }
.video-flow .flow-list ol > li:nth-child(1):after  { width: 70px; height: 71px; background-image: url("/assets/images/solution/video/flow/ico01.svg"); }
.video-flow .flow-list ol > li:nth-child(3):after  { width: 66px; height: 80px; background-image: url("/assets/images/solution/video/flow/ico02.svg"); }
.video-flow .flow-list ol > li:nth-child(6):after  { width: 77px; height: 90px; background-image: url("/assets/images/solution/video/flow/ico03.svg"); }
.video-flow .flow-list ol > li:nth-child(8):after  { width: 77px; height: 53px; background-image: url("/assets/images/solution/video/flow/ico04.svg"); }
.video-flow .flow-list ol > li:nth-child(9):after  { width: 85px; height: 64px; background-image: url("/assets/images/solution/video/flow/ico05.svg"); }
.video-flow .flow-list ol > li:nth-child(16):after { width: 72px; height: 69px; background-image: url("/assets/images/solution/video/flow/ico06.svg"); }
.video-flow .flow-list ol > li:nth-child(17):after { width: 66px; height: 66px; background-image: url("/assets/images/solution/video/flow/ico07.svg"); }
.video-flow .flow-list ol > li > ul   { list-style: disc; margin-left: 1.5em; }

/* printer-detail
---------------------------------------------*/
.printer-detail .content section { margin-top: 0; font-size: 1.6rem; line-height: 1.75; }

.printer-detail h2       { position: relative; margin-bottom: 45px; padding-bottom: 5px; border-bottom: 2px solid #ccc; color: #333; font-size: 3rem; font-weight: bold; }
.printer-detail h2:after { content: ""; position: absolute; bottom: -2px; left: 0; width: 200px; height: 2px; background: #0a4774; }

.printer-detail .marker  { color: #18b6d1; margin-right: 5px; font-style: normal; }
.printer-detail .adjust  { margin-top: 100px; }

.printer-detail .box            { margin-bottom: 120px; padding: 50px; border: 6px solid #0a4774; font-size: 1.6rem; line-height: 1.75; }
.printer-detail .box:after      { content: ""; display: block; clear: both; height: 0; }
.printer-detail .box figure     { float: left; width: 150px; }
.printer-detail .box figure img { width: 100%; }
.printer-detail .box dl         { float: right; width: 970px; margin-top: 20px; }
.printer-detail .box dt         { color: #0a4774; font-size: 3rem; line-height: 1.5; }

.printer-detail .content section.detail             { margin-top: 60px; }
.printer-detail .content section.detail:first-child { margin-top: 0; }

.printer-detail .detail-inner { display: table; margin-bottom: 60px; }
.printer-detail .detail h3,
.printer-detail .detail .lead { display: table-cell; vertical-align: middle; }
.printer-detail .detail h3    { padding-right: 60px; }
.printer-detail .detail .lead { padding-left: 60px; }

.printer-detail .point li                 { display: table; }
.printer-detail .point li > div           { display: table-cell; height: 100px; padding-left: 130px; color: #333; font-size: 2rem; font-weight: bold; vertical-align: middle; }
.printer-detail .point li:nth-child(1) div{ background: url("/assets/images/solution/printer/ico01.svg") no-repeat 0 center; background-size: 100px 100px; }
.printer-detail .point li:nth-child(2) div{ background: url("/assets/images/solution/printer/ico02.svg") no-repeat 0 center; background-size: 100px 100px; }
.printer-detail .point li:nth-child(3) div{ background: url("/assets/images/solution/printer/ico03.svg") no-repeat 0 center; background-size: 100px 100px; }
.printer-detail .point li:nth-child(4) div{ background: url("/assets/images/solution/printer/ico04.svg") no-repeat 0 center; background-size: 100px 100px; }

.printer-detail .lineup       { font-size: 1.6rem; line-height: 1.75; }
.printer-detail .lineup figure{ margin-bottom: 30px; text-align: center; }
.printer-detail .lineup h4    { margin-bottom: 10px; color: #18b6d1; font-size: 2rem; font-weight: bold; line-height: 1.5; }
.printer-detail .lineup strong{ font-size: 1.8rem; }

.printer-detail .printerRepair{ margin-top: 20px; }
.printer-detail .printerRepair th,
.printer-detail .printerRepair td{ padding: 5px 50px; border: 1px solid #000; text-align: center; }

/* apl
---------------------------------------------*/
.apl .content            { line-height: 1.8; }
.apl .lpDetailArea2      { padding-top: 0; }
.apl .content h5         { margin-top: 20px; padding: 10px 1em; line-height: 1.5; }
.apl .content .underline { display: inline-block; margin-bottom: 10px; border-bottom: 2px solid #0a4774; }
.apl .content .App ul    { list-style: disc; margin-left: 1.5em; font-size: 1.5rem; }

@media (max-width: 767px) {
/* common
---------------------------------------------*/
.explain       { padding: 0 0 25px; }
.explain .inner,
.explain h2,
.explain .lead { display: block; }

.category-list            { padding: 0 0 50px; }
.category-list h3         { position: relative; margin-bottom: 17px; padding-top: 15px; }
.category-list:nth-child(2n) + .contact { margin-top: 50px; }
.contact ul > li          { width: auto; font-size: 1.5rem; }
.contact ul > li a        { padding: 25px 45px 25px 15px; background-size: 15px; }
.contact ul > li a:after  { right: 15px; }

.outline figure           { margin-bottom: 15px; }
.outline figure img       { width: 100%; }
.outline figure,
.outline dl               { float: none; width: auto; }
.outline dl .subtitle     { margin: 15px 0 0; font-size: 1.8rem; }
.outline dt               { margin-top: 14px; font-size: 1.4rem; line-height: 1.75; }
.outline dd ul li         { width: calc((100% - 14px) / 2); margin: 14px 14px 0 0; font-size: 1.2rem; }
.outline dd ul li a       { padding: 10px 30px 10px 10px; }
.outline dd ul li a:after { right: 10px; width: 14px; height: 14px; margin-top: -7px; }

/* video-flow
---------------------------------------------*/
.video-flow .content section { margin-top: 0; padding-top: 20px; }

.video-flow h2       { margin-bottom: 20px; border-width: 1px; font-size: 2rem; }
.video-flow h2:after { bottom: -1px; width: 130px; height: 1px; }

.video-flow .flow-list                { margin-bottom: 60px; }
.video-flow .flow-list ol > li        { width: calc((100% - 28px) / 2); min-height: 130px; margin: 14px 14px 0 0; padding: 10px 10px 20px; font-size: 1.2rem; }
.video-flow .flow-list ol > li:before { margin-bottom: 10px; font-size: 1.8rem; }
.video-flow .flow-list ol > li:after  { right: 10px; bottom: 10px; }
.video-flow .flow-list ol > li:nth-child(3),
.video-flow .flow-list ol > li:nth-child(4)        { margin-top: 14px; }
.video-flow .flow-list ol > li:nth-child(2n)       { margin-right: 0; }
.video-flow .flow-list ol > li:nth-child(1):after  { width: 35px; height: 35px; }
.video-flow .flow-list ol > li:nth-child(3):after  { width: 33px; height: 40px; }
.video-flow .flow-list ol > li:nth-child(6):after  { width: 39px; height: 45px; }
.video-flow .flow-list ol > li:nth-child(8):after  { width: 39px; height: 27px; }
.video-flow .flow-list ol > li:nth-child(9):after  { width: 43px; height: 32px; }
.video-flow .flow-list ol > li:nth-child(16):after { width: 36px; height: 35px; }
.video-flow .flow-list ol > li:nth-child(17):after { width: 33px; height: 33px; }

/* printer-detail
---------------------------------------------*/
.printer-detail .content section { margin-top: 0; padding-top: 0; font-size: 1.2rem; }

.printer-detail h2       { margin-bottom: 20px; border-width: 1px; font-size: 2rem; }
.printer-detail h2:after { bottom: -1px; width: 130px; height: 1px; }

.printer-detail dl .subtitle { margin-bottom: 15px; }
.printer-detail .adjust      { margin-top: 40px; }

.printer-detail .box            { margin-bottom: 60px; padding: 15px 20px; border-width: 2px; font-size: 1.4rem; }
.printer-detail .box figure     { float: none; width: auto; text-align: center; }
.printer-detail .box figure img { width: 130px; }
.printer-detail .box dl         { float: none; width: auto; margin-top: 10px; }
.printer-detail .box dt         { font-size: 2rem; }

.printer-detail .content section.detail             { margin: 30px 0; }
.printer-detail .content section.detail:first-child { margin-top: 0; }
.printer-detail .detail-inner { margin-bottom: 30px; }
.printer-detail .detail-inner,
.printer-detail .detail h3,
.printer-detail .detail .lead { display: block; }
.printer-detail .detail h3    { padding-right: 0; }
.printer-detail .detail .lead { padding-left: 0; }

.printer-detail .point li > div           { height: 75px; padding-left: 100px; font-size: 1.6rem; }
.printer-detail .point li:nth-child(1) div,
.printer-detail .point li:nth-child(2) div,
.printer-detail .point li:nth-child(3) div,
.printer-detail .point li:nth-child(4) div{ background-size: 75px 75px; }

.printer-detail .lineup       { font-size: 1.2rem; line-height: 1.75; }
.printer-detail .lineup figure{ margin-bottom: 20px; }
.printer-detail .lineup h4,
.printer-detail .lineup strong{ font-size: 1.6rem; }

.printer-detail .printerRepair   { width: 100%; }
.printer-detail .printerRepair th,
.printer-detail .printerRepair td{ padding: 5px; }

/* apl
---------------------------------------------*/
.apl .lpDetailArea2 { padding-right: 0; padding-left: 0; }
}