@charset "utf-8"; /* * ========================================================================== * * [home] * * ========================================================================== */ /*PC*/ @media only screen and (min-width: 769px) { .st-megaMenu { z-index: 10000002; } #common_head { height: auto !important; } .kv_area { width: 100%; height: 0; padding-top: 50.4%; background-size: cover !important; background-position: center top; position: relative; z-index: 10000001; } .kv_area .inner { width: 100%; height: 226px; position: absolute; top: 0; left: 0; background-color: rgba(255,255,255,0.5); } .pro_bt { max-width: 930px; margin: 18px auto 0 auto; padding: 0 10px; display: flex; justify-content: space-between; } .pro_bt .left { max-width: 298px; float: left; border: 1px solid #000; margin: 17px 15px 0 0; } .pro_bt .left p { border-top: 2px dotted #898989; padding: 0; margin: 0; } .pro_bt .right { float: right; position: relative; border: 1px solid #000; margin: 17px 0 0 0; } .pro_bt .right span { position: absolute; top: -16px; left: 80px; } #lead_area { max-width: 1050px; margin: 0 auto; padding: 0 10px; text-align: center; } #lead_area h2 { font-size: 33px; margin: 100px 0 0 0; font-weight: bold; letter-spacing: 0.2em; line-height: 1.7; } #lead_area p { font-size: 20px; line-height: 2; margin: 40px 0 0 0; letter-spacing: 0.1em; } #cont01 { width: 100%; /*border-left: 20px solid #fff; border-right: 20px solid #fff;*/ margin: 120px auto 0 auto; } #cont01 .box01, #cont01 .box02, #cont01 .box03, #cont01 .box04, #cont01 .box05, #cont01 .box06, #cont01 .box07 { width: 100%; height: 500px; margin: 0 0 20px 0; } #cont01 .box06 { margin: 0; } #cont01 .box01 { background: url(/-/media/cojp/product/labelwriter/special/cube/img/content/home/cont_bg01.jpg) no-repeat center center; background-size: cover; } #cont01 .box02 { background: url(/-/media/cojp/product/labelwriter/special/cube/img/content/home/cont_bg02.jpg) no-repeat center center; background-size: cover; } #cont01 .box03 { background: url(/-/media/cojp/product/labelwriter/special/cube/img/content/home/cont_bg03.jpg) no-repeat center center; background-size: cover; } #cont01 .box04 { background: url(/-/media/cojp/product/labelwriter/special/cube/img/content/home/cont_bg04.jpg) no-repeat center bottom; background-size: cover; } #cont01 .box05 { background: url(/-/media/cojp/product/labelwriter/special/cube/img/content/home/cont_bg05.jpg) no-repeat center bottom; background-size: cover; } #cont01 .box06 { background: url(/-/media/cojp/product/labelwriter/special/cube/img/content/home/cont_bg06.jpg) no-repeat center center; background-size: cover; } #cont01 .box07 { background: url(/-/media/cojp/product/labelwriter/special/cube/img/content/home/cont_bg07.jpg) no-repeat center center; background-size: cover; } #cont01 .bnr { width: 100%; height: 100%; background: url(/-/media/cojp/product/labelwriter/special/cube/img/content/home/cont_bg.png); } #cont01 .bnr h3 { text-align: center; padding: 125px 0 0 0; } #cont01 .box02 .bnr h3 { padding: 70px 0 0 0; } #cont01 .box07 .bnr h3 { padding: 70px 0 0 0; } #cont01 .box04 .bnr h3 { padding: 70px 0 0 0; } #cont01 .box05 .bnr h3 { padding: 70px 0 0 0; } #cont01 .bnr p.txt { text-align: center; padding: 35px 0; color: #fff; font-size: 20px; letter-spacing: 0.1em; line-height: 1.7; } #cont01 .bnr .txt_box { color: #fff; text-align: center; margin: 40px 0 0 0; display: flex; justify-content: center; } #cont01 .box01 .bnr .txt_box .inn { border: 1px solid #fff; background-color: rgba(0,0,0,0.2); background-image: url(/-/media/cojp/product/labelwriter/special/cube/img/content/home/ico01.png) , url(/-/media/cojp/product/labelwriter/special/cube/img/content/home/ico02.png); background-repeat: no-repeat, no-repeat; background-position: left 20px center, right 20px center; display: inline-block; padding: 0 140px 30px 140px; } #cont01 .box07 .bnr .txt_box .inn { border: 1px solid #fff; background-color: rgba(0,0,0,0.2); background-image: url(/-/media/cojp/product/labelwriter/special/cube/img/content/home/ico03.png) , url(/-/media/cojp/product/labelwriter/special/cube/img/content/home/ico04.png); background-repeat: no-repeat, no-repeat; background-position: left 20px center, right 20px center; display: inline-block; padding: 0 140px 30px 140px; margin-right: 10px; } #cont01 .box04 .bnr .txt_box .inn { border: 1px solid #fff; background-color: rgba(0,0,0,0.2); background-image: url(/-/media/cojp/product/labelwriter/special/cube/img/content/home/ico05.png) , url(/-/media/cojp/product/labelwriter/special/cube/img/content/home/ico06.png); background-repeat: no-repeat, no-repeat; background-position: left center, right bottom; display: inline-block; padding: 0 180px 30px 180px; } #cont01 .box05 .bnr .txt_box .inn { border: 1px solid #fff; background-color: rgba(0,0,0,0.2); background-image: url(/-/media/cojp/product/labelwriter/special/cube/img/content/home/ico07.png) , url(/-/media/cojp/product/labelwriter/special/cube/img/content/home/ico08.png); background-repeat: no-repeat, no-repeat; background-position: left 20px center, right 20px center; display: inline-block; padding: 0 140px 30px 140px; position: relative; } #cont01 .box05 .ico09 { position: absolute; top: -20px; left: 100px; } #cont01 .bnr p.bt { text-align: center; border: 1px solid #fff; width: 170px; height: 48px; margin: 0 auto; } #cont01 .bnr p.bt a { width: 170px; height: 48px; display: inline-block; } #cont01 .bnr p.bt img { padding: 15px 0 0 0; width: 88px; } #cont01 .bnr p.bt a:hover { width: 170px; height: 48px; display: inline-block; background-color: rgba(255,255,255,0.5); } #cont01 .box03 .bnr .btbox { max-width: 1065px; margin: 0 auto; } #cont01 .box03 .bnr .btbox li { width: 333px; float: left; margin: 0 33px 0 0; } #cont01 .box03 .bnr .btbox li.last { width: 333px; float: left !important; margin: 0 !important; } } /*タブレット*/ @media only screen and (min-width: 769px) and (max-width: 1110px) { .kv_area .inner { height: 130px; } .pro_bt .left img, .pro_bt .right img { width: 100%; } .pro_bt .right span { top: -20px; left: 60px; } #cont01 .box03 .bnr .btbox li, #cont01 .box03 .bnr .btbox li.last { width: 31%; margin: 0 10px; } #cont01 .box03 .bnr .btbox li img { width: 100%; } #cont01 .bnr .txt_box { padding: 0 5px; } #cont01 .box07 .bnr .txt_box .inn { padding: 0 95px 30px 95px; } #cont01 .bnr p.txt { padding: 35px 10px; font-size: 16px; min-width: 140px; margin: auto; } } /*スマホ*/ @media only screen and (max-width: 768px) { #common_head { width: 100%; height: auto !important; } #common_head h1 { position: absolute; } .kv_area { width: 100%; height: 0; padding-top: 50.4%; background-size: cover !important; background-position: center top; position: relative; z-index: 10000001; } .kv_area .inner { width: 100%; height: 80px; position: absolute; top: 0; left: 0; background-color: rgba(255,255,255,0.5); } .pro_bt { width: 70% !important; margin: 35px auto 0 auto; text-align: center; } .pro_bt .left { margin: 0 0 30px 0; border: 1px solid #000; box-sizing: border-box; } .pro_bt .right { margin: 0 0 0 0; border: 1px solid #000; box-sizing: border-box; position: relative; } .pro_bt .right span { position: absolute; top: -17px; left: 30%; } .pro_bt img { width: 100%; } .pro_bt span img { width: 70%; } .pro_bt .left p { padding: 0; margin: 0; } #lead_area { width: 90%; margin: 0 auto; } #lead_area h2 { font-size: 25px; line-height: 1.8; margin: 50px 0 0 0; font-weight: bold; letter-spacing: 0.1em; } #lead_area p { font-size: 18px; line-height: 1.7; margin: 30px 0 0 0; letter-spacing: 0.1em; } #cont01 { width: 100%; margin: 50px auto 0 auto; } #cont01 .box01, #cont01 .box02, #cont01 .box03, #cont01 .box04, #cont01 .box05, #cont01 .box06, #cont01 .box07 { width: 90%; height: auto; margin: 0 auto 30px auto; } #cont01 .box01 { background: url(/-/media/cojp/product/labelwriter/special/cube/img/content/home/cont_bg01.jpg) no-repeat center center; background-size: cover; } #cont01 .box02 { background: url(/-/media/cojp/product/labelwriter/special/cube/img/content/home/cont_bg02.jpg) no-repeat center center; background-size: cover; } #cont01 .box03 { background: url(/-/media/cojp/product/labelwriter/special/cube/img/content/home/cont_bg03.jpg) no-repeat center center; background-size: cover; } #cont01 .box04 { background: url(/-/media/cojp/product/labelwriter/special/cube/img/content/home/cont_bg04.jpg) no-repeat center bottom; background-size: cover; } #cont01 .box05 { background: url(/-/media/cojp/product/labelwriter/special/cube/img/content/home/cont_bg05.jpg) no-repeat center bottom; background-size: cover; } #cont01 .box06 { background: url(/-/media/cojp/product/labelwriter/special/cube/img/content/home/cont_bg06.jpg) no-repeat center center; background-size: cover; } #cont01 .box07 { background: url(/-/media/cojp/product/labelwriter/special/cube/img/content/home/cont_bg07.jpg) no-repeat center center; background-size: cover; } #cont01 .bnr { width: 100%; height: 100%; background: url(/-/media/cojp/product/labelwriter/special/cube/img/content/home/cont_bg.png); padding: 20px 0; } #cont01 .bnr h3 { text-align: center; } #cont01 .bnr h3 img { height: 45px; } #cont01 .box01 .bnr h3 { padding: 20px 0 0 0; } #cont01 .box02 .bnr h3 { padding: 20px 0 0 0; } #cont01 .box03 .bnr h3 { padding: 20px 0 0 0; } #cont01 .box07 .bnr h3 { padding: 20px 0 0 0; } #cont01 .box04 .bnr h3 { padding: 20px 0 0 0; } #cont01 .box05 .bnr h3 { padding: 20px 0 0 0; } #cont01 .box06 .bnr h3 { padding: 20px 0 0 0; } #cont01 .bnr p.txt { text-align: center; padding: 20px 0; color: #fff; font-size: 16px; letter-spacing: 0.1em; line-height: 1.7; width: 90%; margin: 0 auto; } #cont01 .bnr p.bt { text-align: center; margin: 0 auto; font-size: 18px; } #cont01 .bnr p.bt a { display: inline-block; padding: 20px 50px; border: 1px solid #fff; } #cont01 .bnr p.bt img { width: 70%; } #cont01 .box03 .bnr .btbox { width: 100%; margin: 0 auto; } #cont01 .box03 .bnr .btbox li { margin: 0 auto 20px; text-align: center; } #cont01 .box03 .bnr .btbox li img{ width: 90%; } } .bnr-box{ margin: 40px auto; text-align: center; max-width: 930px; } .bnr-box img{ width: 100%; } @media only screen and (max-width: 768px) { .sp_parts .bnr-box img{ width: 100%; padding: 0 20px; box-sizing: border-box; } }