@charset "utf-8"; /* * ========================================================================== * * [pages] * * ========================================================================== */ /*PC*/ @media only screen and (min-width: 769px) { /* ページ共通 */ #main h2 { width: 100%; height: 100%; background: url(/-/media/cojp/product/labelwriter/special/cube/img/global/mesh.png); } #main h2 img { padding: 85px 0 0 0; } #lead_area { width: 1050px; margin: 0 auto; text-align: center; } #lead_area h3 { font-size: 33px; margin: 100px 0 0 0; font-weight: bold; letter-spacing: 0.1em; line-height: 1.7; } #lead_area p { font-size: 20px; line-height: 2; margin: 40px 0 0 0; letter-spacing: 0.1em; } #lead_area2 { width: 1050px; margin: 0 auto; text-align: center; } #lead_area2 h3 { font-size: 33px; margin: 100px 0 0 0; font-weight: bold; letter-spacing: 0.1em; line-height: 1.7; } #lead_area2 p { font-size: 20px; line-height: 2; letter-spacing: 0.1em; } #app_dl { width: 100%; background-color: #F0F0F0; margin: 60px 0 0 0; padding: 60px 0; } #app_dl .tit { text-align: center; font-size: 25px; font-weight: bold; letter-spacing: 0.1em; } #app_dl .tit span { font-size: 18px; } #app_dl .app_flex{ display: flex; justify-content: center; } #app_dl .app_flex > div{ margin: 0 20px; } #app_dl .box01 { width: 440px; margin: 42px auto 0 auto; /*height: 110px;*/ } #app_dl .box01 .left { width: 100px; float: left; } #app_dl .box01 .right { width: 314px; float: right; } #app_dl .box01 img { width: 100px; } #app_dl .box01 .right p.txt01 { font-size: 22px; font-weight: bold; text-align: left; color: #333333; margin: 18px 0 0 0; } #app_dl .box01 .right p.txt02 { font-size: 14px; text-align: left; color: #444444; margin: 10px 0 0 0; line-height: 1.5; } #app_dl .box02 { width: 460px; margin: 55px auto 0 auto; } #app_dl .box02 .txt01 { width: 460px; border-bottom: 1px solid #000000; text-align: center; font-size: 16px; font-weight: bold; padding: 0 0 10px 0; } #app_dl .box02 ul { margin: 25px 0 0 0; } #app_dl .box02 li { width: 225px; float: left; margin: 0 10px 0 0; } #app_dl .box02 li.last { margin: 0; } #app_dl .box02 li img { width: 225px; } #app_dl .box02 li a:hover { filter:alpha(opacity=50); -moz-opacity: 0.5; opacity: 0.5; } /* P-TOUCH CUBEって? PC */ .about #main { width: 100%; height: 250px; background: url(/-/media/cojp/product/labelwriter/special/cube/img/content/pages/about_mainbg.jpg) no-repeat center center; background-size: cover; text-align: center; margin: 0; padding: 0; } .about #cont01 { width: 1000px; margin: 100px auto 0 auto; } .about #cont01 .second { width: 680px; margin: 0 auto; } .about #cont01 .left { width: 320px; border: 1px solid #4D4D4D; float: left; padding: 10px 10px 0 10px; margin: 0 20px 20px 0; box-sizing: border-box; } .about #cont01 .right { width: 320px; border: 1px solid #4D4D4D; float: right; padding: 10px 10px 0 10px; margin: 0 0 20px 0; box-sizing: border-box; } .about #cont01 p.pic { text-align: center; } .about #cont01 img { width: 300px; } .about #cont01 h4 { font-size: 20px; text-align: center; width: 278px; margin: 24px auto 0 auto; border-top: 2px solid #231815; border-bottom: 2px solid #231815; padding: 15px 0; font-weight: bold; } .about #cont01 h4.reg { padding: 14px 0 14px 0; } .about #cont01 h4 sup { font-size: 70%; vertical-align: super; } .about #cont01 p.txt { font-size: 15px; width: 278px; margin: 20px 0 0 0; padding: 0 10px; line-height: 1.7; height: 11em; text-align: justify; } .about #cont01 p.txt span { font-size: 75%; margin: 10px 0 0 0; display: inline-block; } /* PRODUCT PC */ .pro300 #main { width: 100%; height: 250px; background: url(/-/media/cojp/product/labelwriter/special/cube/img/content/pages/product_mainbg300.jpg) no-repeat center center; background-size: cover; text-align: center; margin: 0; padding: 0; } .pro710 #main { width: 100%; height: 250px; background: url(/-/media/cojp/product/labelwriter/special/cube/img/content/pages/product_mainbg710.jpg) no-repeat center center; background-size: cover; text-align: center; margin: 0; padding: 0; } .pro910 #main { width: 100%; height: 250px; background: url(/-/media/cojp/product/labelwriter/special/cube/img/content/pages/product_mainbg910.jpg) no-repeat center center; background-size: cover; text-align: center; margin: 0; padding: 0; } /*--スライダー--*/ .sliderWrapper { width: 800px; height: 667px; margin: 100px auto 0 auto; position: relative; } .sliderWrapper .sliderInner { } .sliderWrapper .sliderInner .contBox { width: 800px; float: left; } .bx-controls { } .bx-controls {} .bx-controls .bx-prev { display: block; text-indent: -99999px; width: 75px; height: 75px; position: absolute; top: 283px; left: 22px; background: url(/-/media/cojp/product/labelwriter/special/cube/img/content/pages/product_slider_prevbt.png) no-repeat center center; -moz-background-size: 58px 58px; -webkit-background-size: 58px 58px; -o-background-size: 58px 58px; -ms-background-size: 58px 58px; } .bx-controls img { width: 58px; } .bx-controls .bx-next { display: block; text-indent: -99999px; width: 75px; height: 75px; position: absolute; top: 283px; right: 22px; background: url(/-/media/cojp/product/labelwriter/special/cube/img/content/pages/product_slider_nextbt.png) no-repeat center center; -moz-background-size: 58px 58px; -webkit-background-size: 58px 58px; -o-background-size: 58px 58px; -ms-background-size: 58px 58px; } .bx-controls .bx-prev:hover, .bx-controls .bx-next:hover { filter:alpha(opacity=50); -moz-opacity: 0.5; opacity: 0.5; } .bx-controls .bx-pager { position: absolute; bottom: 70px; left: 260px; } .pro910 .bx-controls .bx-pager { width: 456px; position: absolute; bottom: 70px; left: 50%; transform: translateX(-50%); -webkit-transform: translateX(-50%); } .bx-controls .bx-pager .bx-pager-item { display: inline-block; width: 86px; height: 5px; padding: 0 0 0 0; margin: 0 5px 0 0; } .bx-controls .bx-pager .bx-pager-item .bx-pager-link { display: block; text-indent: -999999px; width: 86px; height: 5px; background-color: #BEBEBE; } .bx-controls .bx-pager .bx-pager-item .bx-pager-link a:hover, .bx-controls .bx-pager .bx-pager-item .bx-pager-link.active { background-color: #000000; } .product.pro300 #cont02 { margin: 77px auto 0 auto; width: 980px; } .product.pro710 #cont01-2 { margin: 40px auto 0; width: 980px; } .product.pro710 #cont02 { margin: 20px auto 0; width: 980px; } .product.pro910 #cont02 { margin: 20px auto 0; width: 980px; } .product.pro300 #cont02 .left, .product.pro300 #cont02 .right{ height: 485px; } .product #cont02 .left { width: 320px; border: 1px solid #4D4D4D; float: left; padding: 10px 10px 10px 10px; margin: 0 10px 0 0; box-sizing: border-box; height: 550px; } .product #cont02 .right { width: 320px; border: 1px solid #4D4D4D; float: right; padding: 10px 10px 10px 10px; margin: 0; box-sizing: border-box; height: 550px; } .application #cont04 .sceneBox .ttl, #cont01-2 .sceneBox .ttl{ font-weight: bold; font-size: 14px; border-bottom: 1px dotted #000; margin-bottom: 5px; padding-bottom: 2px; } .application #cont04 .sceneBox .ulStyle01, #cont01-2 .sceneBox .ulStyle01{ margin: 0 15px; } .application #cont04 .sceneBox .ulStyle01 li, #cont01-2 .sceneBox .ulStyle01 li{ list-style: disc; text-align: left; font-size: 13px; } .product #cont02 p.pic { text-align: center; } .product #cont02 img { width: 300px; } .product.pro300 #cont02 h4 { font-size: 20px; text-align: center; width: 298px; margin: 24px 0 0 0; border-top: 2px solid #231815; border-bottom: 2px solid #231815; padding: 7px 0; font-weight: bold; line-height: 1.4; } .product.pro300 #cont02 .right h4 { font-size: 20px; text-align: center; width: 298px; margin: 24px 0 0 0; border-top: 2px solid #231815; border-bottom: 2px solid #231815; padding: 7px 0; font-weight: bold; line-height: 1.4; } .product.pro710 #cont02 h4 { font-size: 20px; text-align: center; width: 298px; margin: 24px 0 0 0; border-top: 2px solid #231815; border-bottom: 2px solid #231815; padding: 7px 0; font-weight: bold; line-height: 1.4; max-height: 3em; } .product.pro910 #cont02 h4 { font-size: 20px; text-align: center; width: 298px; margin: 24px 0 0 0; border-top: 2px solid #231815; border-bottom: 2px solid #231815; padding: 20px 0; font-weight: bold; line-height: 1.4; max-height: 3em; } .product.pro710 #cont02 h4.liion { padding: 21px 0; } .product.pro910 #cont02 h4.liion { padding: 6px 0; } .product.pro710 #cont02 .inn, .product.pro910 #cont02 .inn { min-height: 200px; } .product.pro300 #cont02 p.txt { font-size: 15px; width: 280px; margin: 20px auto 10px auto; padding: 0 10px; line-height: 1.7; text-align: justify; } .product.pro710 #cont02 p.txt, .product.pro910 #cont02 p.txt { font-size: 15px; width: 280px; margin: 20px auto 0 auto; padding: 0 10px; line-height: 1.7; text-align: justify; } .product.pro710 #cont02 p.link, .product.pro910 #cont02 p.link { padding: 40px 0 0 0; margin: 0 auto; width: 247px; } .product.pro710 #cont02 p.link img, .product.pro910 #cont02 p.link img { width: 247px; } .product.pro710 #cont02 p.txt span, .product.pro910 #cont02 p.txt span { font-size: 80%; } .product.pro710 #cont02 .bottom_box, .product.pro910 #cont02 .bottom_box { width: 980px; min-height: 420px; border: 1px solid #4D4D4D; float: left; padding: 10px 10px 0 10px; margin: 10px auto 100px auto; box-sizing: border-box; position: relative; } .product.pro710 #cont02 .bottom_box .pic, .product.pro910 #cont02 .bottom_box .pic { width: 505px; padding: 0; margin: 0; float: left; } .product.pro710 #cont02 .bottom_box .pic img, .product.pro910 #cont02 .bottom_box .pic img { width: 505px; } .product.pro710 #cont02 .bottom_box .inn, .product.pro910 #cont02 .bottom_box .inn { width: 356px; float: left; margin: 0 0 0 50px; text-align: center; } .product.pro710 #cont02 .bottom_box .inn h4, .product.pro910 #cont02 .bottom_box .inn h4 { font-size: 20px; text-align: center; width: 298px; margin: 24px 0 0 0; border-top: 2px solid #231815; border-bottom: 2px solid #231815; padding: 7px 0; font-weight: bold; line-height: 1.4; max-height: 3em; width: 356px; } .product.pro710 #cont02 .bottom_box .inn .tit, .product.pro910 #cont02 .bottom_box .inn .tit { font-size: 18px; padding: 20px 0 0 0; margin: 0; font-weight: bold; line-height: 1.7; } .product.pro710 #cont02 .bottom_box .inn .txt, .product.pro910 #cont02 .bottom_box .inn .txt { padding: 10px 0 0 0; margin: 0; text-align: left; width: 100%; } .product.pro710 #cont02 .bottom_box .inn .link02 a, .product.pro910 #cont02 .bottom_box .inn .link02 a { margin: 20px 0 0 0; border: 1px solid #000; background: url(/-/media/cojp/product/labelwriter/special/cube/img/global/btn_arrow.png) no-repeat right 10px center; background-size: 10px auto; display: inline-block; padding: 10px 50px; } .product.pro710 #cont02 .bottom_box .inn .link02 a:hover, .product.pro910 #cont02 .bottom_box .inn .link02 a:hover { text-decoration: none; } .product #cont03 .cont03tit { text-align: center; margin: 100px auto 0 auto; } .product #cont03 h4 { font-size: 24px; font-weight: bold; border-top: 2px solid #231815; border-bottom: 2px solid #231815; padding: 12px 15px; display: inline-block; letter-spacing: 0.1em; text-align: center; } .product #cont03 .box01 { width: 1000px; margin: 40px auto 0 auto; } .product #cont03 .box01 li { width: 490px; float: left; } .product #cont03 .box01 li.last { width: 490px; float: right; } .product #cont03 img { width: 490px; } .product #cont03 .box02 { width: 1000px; margin: 25px auto 0 auto; text-align: center; } .product #cont03 .box02 li { width: 490px; float: left; font-size: 16px; } .product #cont03 .box02 li.last { width: 490px; float: right; } .product #cont03 li span { background-color: #F0F0F0; padding: 10px 30px; text-align: center; display: inline-block; margin: 0 auto; border-radius: 20px; /* CSS3草案 */ -webkit-border-radius: 20px; /* Safari,Google Chrome用 */ -moz-border-radius: 20px; /* Firefox用 */ } .product #cont04 { background-color: #F4EEE1; margin: 100px auto 0 auto; text-align: center; padding: 80px 0; } .product #cont04 h4 { font-size: 24px; font-weight: bold; border-top: 2px solid #231815; border-bottom: 2px solid #231815; padding: 12px 15px; display: inline-block; letter-spacing: 0.1em; text-align: center; } .product #cont04 .box { text-align: left; width: 974px; min-height: 390px; border: 1px solid #4D4D4D; background: #fff url(/-/media/cojp/product/labelwriter/special/cube/img/content/pages/product300_cont04img01.jpg) no-repeat right 15px center; margin: 60px auto 0 auto; padding: 10px 10px 0 10px; box-sizing: border-box; } .product.pro910 #cont04 .box.box-02 { text-align: left; width: 974px; min-height: 390px; border: 1px solid #4D4D4D; background: #fff url(/-/media/cojp/product/labelwriter/special/cube/img/content/pages/product910_cont04img02.jpg) no-repeat right 15px center; margin: 60px auto 0 auto; padding: 10px 10px 0 10px; box-sizing: border-box; } .product.pro910 #cont04 .box { text-align: left; width: 974px; min-height: 390px; border: 1px solid #4D4D4D; background: #fff url(/-/media/cojp/product/labelwriter/special/cube/img/content/pages/product910_cont04img01.jpg) no-repeat right 15px center; margin: 60px auto 0 auto; padding: 10px 10px 0 10px; box-sizing: border-box; } .product #cont04 .box .inn { width: 400px; text-align: center; } .product.pro910 #cont04 .box .inn { width: 430px; text-align: center; } .product #cont04 .box h5 { font-size: 24px; font-weight: bold; letter-spacing: 0.1em; line-height: 1.7; margin: 60px 0 0 0; } .product.pro910 #cont04 .box h5 { font-size: 22px; font-weight: bold; letter-spacing: 0.05em; line-height: 1.7; margin: 80px 0 30px; } .product #cont04 .box p.txt { font-size: 17px; border-top: 2px solid #231815; border-bottom: 2px solid #231815; padding: 12px 80px; display: inline-block; letter-spacing: 0.1em; text-align: center; margin: 20px 0 70px 0; } .product.pro910 #cont04 .box p.link { background: #000; width: 56%; margin: 0 auto; } .product.pro910 #cont04 .box p.link a{ display: block; } .product #cont04 .box p.link a { background: #000 url(/-/media/cojp/product/labelwriter/special/cube/img/global/btn_arroww.png) no-repeat right 20px center; color: #fff; padding: 20px; } .product.pro300 #cont05 { width: 974px; min-height: 390px; border: 1px solid #4D4D4D; margin: 100px auto 0 auto; text-align: center; background: url(/-/media/cojp/product/labelwriter/special/cube/img/content/pages/product300_cont05img01.jpg) no-repeat left 10px center; box-sizing: border-box; } .product.pro710 #cont05 { width: 974px; min-height: 390px; border: 1px solid #4D4D4D; margin: 100px auto 0 auto; text-align: center; background: url(/-/media/cojp/product/labelwriter/special/cube/img/content/pages/product710_cont05img01.jpg) no-repeat left 10px center; box-sizing: border-box; } .product.pro910 #cont05 { width: 974px; min-height: 390px; border: 1px solid #4D4D4D; margin: 100px auto 0 auto; text-align: center; background: url(/-/media/cojp/product/labelwriter/special/cube/img/content/pages/product710_cont05img01.jpg) no-repeat left 10px center; box-sizing: border-box; } .product #cont05 .inn { width: 460px; height: 150px; text-align: center; margin: 0 0 0 500px; } .product #cont05 .tit { font-size: 49px; font-weight: bold; letter-spacing: 0.1em; text-align: center; padding: 100px 0 0 0; } .product #cont05 .txt { font-size: 25px; font-weight: bold; letter-spacing: 0.1em; text-align: center; padding: 40px 0 50px 0; line-height: 1.7; } .product #cont05 p.link a { background: #000 url(/-/media/cojp/product/labelwriter/special/cube/img/global/btn_arroww.png) no-repeat right 20px center; color: #fff; padding: 20px 70px; } .product.pro300 #cont06 { width: 974px; min-height: 390px; border: 1px solid #4D4D4D; margin: 100px auto 0 auto; text-align: center; background: url(/-/media/cojp/product/labelwriter/special/cube/img/content/pages/product300_cont05img02.jpg) no-repeat left 10px center; box-sizing: border-box; } .product.pro710 #cont06 { width: 974px; min-height: 390px; border: 1px solid #4D4D4D; margin: 100px auto 0 auto; text-align: center; background: url(/-/media/cojp/product/labelwriter/special/cube/img/content/pages/product710_cont05img02.jpg) no-repeat left 10px center; box-sizing: border-box; } .product.pro910 #cont06 { width: 974px; min-height: 390px; border: 1px solid #4D4D4D; margin: 100px auto 0 auto; text-align: center; background: url(/-/media/cojp/product/labelwriter/special/cube/img/content/pages/product910_cont05img02.jpg) no-repeat left 10px center; box-sizing: border-box; } .product #cont06 .inn { width: 460px; height: 150px; text-align: center; margin: 0 0 0 500px; } .product #cont06 .tit { font-size: 49px; font-weight: bold; letter-spacing: 0.1em; text-align: center; padding: 100px 0 0 0; } .product #cont06 .txt { font-size: 25px; font-weight: bold; letter-spacing: 0.1em; text-align: center; padding: 40px 0 50px 0; line-height: 1.7; } .product #cont06 p.link a { background: #000 url(/-/media/cojp/product/labelwriter/special/cube/img/global/btn_arroww.png) no-repeat right 20px center; color: #fff; padding: 20px 70px; } .product #cont04 p.link a:hover { text-decoration: none; } .product #cont05 p.link a:hover { text-decoration: none; } .product #cont06 p.link a:hover { text-decoration: none; } /* LABEL PC */ .label #main { width: 100%; height: 250px; background: url(/-/media/cojp/product/labelwriter/special/cube/img/content/pages/label_mainbg.jpg) no-repeat center bottom; background-size: cover; text-align: center; margin: 0; padding: 0; } .label #cont01 { width: 100%; background-color: #F4EEE1; margin: 100px 0 0 0; text-align: center; padding: 55px 0; } .label #cont01 h4 { font-size: 24px; font-weight: bold; border-top: 2px solid #231815; border-bottom: 2px solid #231815; padding: 12px 15px; display: inline-block; letter-spacing: 0.1em; } .label #cont01 .inner { width: 1000px; margin: 42px auto 0 auto; } .label #cont01 .inner img { width: 324px; } .label #cont01 .inner .left { width: 324px; float: left; margin: 0 14px 0 0; } .label #cont01 .inner .right { width: 324px; float: right; } .label #cont01 .inner dl { background-color: #DCCFB2; padding: 33px 0; text-align: left; } .label #cont01 .inner dt { font-size: 20px; font-weight: bold; text-align: center; } .label #cont01 .inner dd { width: 273px; margin: 25px auto 0 auto; text-align: left; font-size: 15px; line-height: 1.5; height: 9em; text-align: justify; } .label #cont02 { width: 100%; margin: 70px 0 0 0; text-align: center; } .label #cont02 h4 { font-size: 24px; font-weight: bold; border-top: 2px solid #231815; border-bottom: 2px solid #231815; padding: 12px 15px; display: inline-block; letter-spacing: 0.1em; } .label #cont02 p.lead { font-size: 18px; line-height: 2; margin: 40px 0 0 0; letter-spacing: 0.1em; } .label #cont02 .label_box { width: 1000px; margin: 30px auto 0 auto; border-top: 2px solid #231F20; text-align: left; } .label #cont02 .label_box.box02, .label #cont02 .label_box.box03 { margin: 60px auto 0 auto; } .label #cont02 .label_boxin { width: 1000px; margin: 0 auto; } .label #cont02 .label_box.box04 { margin: 60px auto 0 auto; float: left; width: 490px; } .label #cont02 .label_box.box05 { margin: 60px auto 0 auto; float: right; width: 490px; } .label #cont02 .label_box.box06 { margin: 60px auto; } .label #cont02 .label_box .tit { border-top: 6px solid #231F20; border-bottom: 2px solid #231F20; margin: 6px 0 0 0; padding: 20px 10px; } .label #cont02 .label_box .tit h5 { font-size: 20px; font-weight: bold; } .label #cont02 .label_box.box03 .tit h5 img { position: relative; top: -60px; right: -10px; } .label #cont02 .label_box.box03 .tit h5 { height: 1.4em; } .label #cont02 .label_box .tit p { margin: 10px 0 0 0; font-size: 14px; } .label #cont02 .label_box.box03 .tit p { margin: 0; } .label #cont02 .label_box .desc { width: 1000px; margin: 20px auto 0 auto; font-size: 14px; line-height: 1.7; } .label #cont02 .label_box .desc .left { width: 490px; min-height: 260px; float: left; position: relative; } .label #cont02 .label_box .desc .right { width: 490px; min-height: 260px; float: right; } .label #cont02 .label_box .desc .inner { width: 220px; min-height: 260px; float: right; } .label #cont02 .label_box .desc dl { margin: 10px 0 0 0; line-height: 1.4; } .label #cont02 .label_box .desc dt { float: left; -moz-text-align-last: justify; text-align-last: justify; min-width: 80px; } .label #cont02 .label_box .desc dt::after { content: ":"; } .label #cont02 .label_box.box01 .left { background: url(/-/media/cojp/product/labelwriter/special/cube/img/content/pages/label_01pic01.jpg) no-repeat left top; } .label #cont02 .label_box.box01 .left .inner { background: url(/-/media/cojp/product/labelwriter/special/cube/img/content/pages/label_01spl01.jpg) no-repeat left bottom; } .label #cont02 .label_box.box01 .right { background: url(/-/media/cojp/product/labelwriter/special/cube/img/content/pages/label_01pic02.jpg) no-repeat left top; } .label #cont02 .label_box.box01 .right .inner { background: url(/-/media/cojp/product/labelwriter/special/cube/img/content/pages/label_01spl02.jpg) no-repeat left bottom; } .label #cont02 .label_box.box02 .left { background: url(/-/media/cojp/product/labelwriter/special/cube/img/content/pages/label_02pic01.jpg) no-repeat left top; } .label #cont02 .label_box.box02 .left .inner { background: url(/-/media/cojp/product/labelwriter/special/cube/img/content/pages/label_02spl01.jpg) no-repeat left bottom; } .label #cont02 .label_box.box02 .right { background: url(/-/media/cojp/product/labelwriter/special/cube/img/content/pages/label_02pic02.jpg) no-repeat left top; } .label #cont02 .label_box.box02 .right .inner { background: url(/-/media/cojp/product/labelwriter/special/cube/img/content/pages/label_02spl02.jpg) no-repeat left bottom; } .label #cont02 .label_box.box03 .left { background: url(/-/media/cojp/product/labelwriter/special/cube/img/content/pages/label_03pic01.jpg) no-repeat left top; } .label #cont02 .label_box.box03 .left .inner { background: url(/-/media/cojp/product/labelwriter/special/cube/img/content/pages/label_03spl01.jpg) no-repeat left bottom; } .label #cont02 .label_box.box03 .right { background: url(/-/media/cojp/product/labelwriter/special/cube/img/content/pages/label_03pic02.jpg) no-repeat left top; } .label #cont02 .label_box.box03 .right .inner { background: url(/-/media/cojp/product/labelwriter/special/cube/img/content/pages/label_03spl02.jpg) no-repeat left bottom; } .label #cont02 .label_box.box04 .left { background: url(/-/media/cojp/product/labelwriter/special/cube/img/content/pages/label_04pic01.jpg) no-repeat left top; } .label #cont02 .label_box.box04 .left .inner { background: url(/-/media/cojp/product/labelwriter/special/cube/img/content/pages/label_04spl01.jpg) no-repeat left bottom; } .label #cont02 .label_box.box05 .left { background: url(/-/media/cojp/product/labelwriter/special/cube/img/content/pages/label_05pic01.jpg) no-repeat left top; } .label #cont02 .label_box.box05 .left .inner { background: url(/-/media/cojp/product/labelwriter/special/cube/img/content/pages/label_05spl01.jpg) no-repeat left bottom; } .label #cont02 .label_box.box06 .left { background: url(/-/media/cojp/product/labelwriter/special/cube/img/content/pages/label_06pic01.jpg) no-repeat left top; } .label #cont02 .label_box.box06 .left .inner { background: url(/-/media/cojp/product/labelwriter/special/cube/img/content/pages/label_06spl01.jpg) no-repeat left bottom; } .label #cont02 .label_box.box06 .right { background: url(/-/media/cojp/product/labelwriter/special/cube/img/content/pages/label_06pic02.jpg) no-repeat left top; } .label #cont02 .label_box.box06 .right .inner { background: url(/-/media/cojp/product/labelwriter/special/cube/img/content/pages/label_06spl02.jpg) no-repeat left bottom; } /* COLUMN PC */ .column #main { width: 100%; height: 250px; background: url(/-/media/cojp/product/labelwriter/special/cube/img/content/pages/column_mainbg.jpg) no-repeat center center; background-size: cover; text-align: center; margin: 0; padding: 0; } .column #cont01 { text-align: center; } .column #cont01 .img01 { text-align: center; } .column #cont01 .img01 img { width: 256px; margin: 80px 0 0 0; } .column #cont01 h4 { font-size: 24px; font-weight: bold; border-top: 2px solid #231815; border-bottom: 2px solid #231815; padding: 12px 15px; display: inline-block; letter-spacing: 0.1em; text-align: center; margin: 105px auto 50px auto; } .column #cont01 .box01 { width: 1000px; margin: 0 auto 20px auto; } .column #cont01 .box01 .left { width: 490px; float: left; border: 1px solid #4D4D4D; padding: 22px 20px 55px 20px; box-sizing: border-box; } .column #cont01 .box01 .right { width: 490px; float: right; border: 1px solid #4D4D4D; padding: 22px 20px 55px 20px; box-sizing: border-box; } .column #cont01 .box01 .head { text-align: left; width: 380px; margin: 0 auto; } .column #cont01 .box01 .head .profile01 { width: 105px; float: left; } .column #cont01 .box01 .head .profile02 { width: 255px; float: right; } .column #cont01 .box01 .head img { width: 105px; } .column #cont01 .box01 .head .profile02 p { font-size: 17px; padding: 22px 0 0 0; } .column #cont01 .box01 .head .profile02 h5 { font-size: 26px; font-weight: bold; padding: 10px 0 0 0; letter-spacing: 0.2em; } .column #cont01 .box01 .head .profile02 h5 span { font-size: 17px; } .column #cont01 .box01 .pic_area { margin: 20px auto 0 auto; width: 450px; height: 319px; } .column #cont01 .box01 .pic_area h6 { background-color: #000; color: #fff; font-size: 14px; line-height: 1.5; padding: 10px 0; } .column #cont01 .box01 .bg01 { width: 450px; height: 319px; background: url(/-/media/cojp/product/labelwriter/special/cube/img/content/pages/column_img01.jpg) no-repeat center top; -moz-background-size: 450px 319px; -webkit-background-size: 450px 319px; -o-background-size: 450px 319px; -ms-background-size: 450px 319px; } .column #cont01 .box01 .bg02 { width: 450px; height: 319px; background: url(/-/media/cojp/product/labelwriter/special/cube/img/content/pages/column_img02.jpg) no-repeat center top; -moz-background-size: 450px 319px; -webkit-background-size: 450px 319px; -o-background-size: 450px 319px; -ms-background-size: 450px 319px; } .column #cont01 .box01 .bg03 { width: 450px; height: 319px; background: url(/-/media/cojp/product/labelwriter/special/cube/img/content/pages/column_img03.jpg) no-repeat center top; -moz-background-size: 450px 319px; -webkit-background-size: 450px 319px; -o-background-size: 450px 319px; -ms-background-size: 450px 319px; } .column #cont01 .box01 .bg04 { width: 450px; height: 319px; background: url(/-/media/cojp/product/labelwriter/special/cube/img/content/pages/column_img04.jpg) no-repeat center top; -moz-background-size: 450px 319px; -webkit-background-size: 450px 319px; -o-background-size: 450px 319px; -ms-background-size: 450px 319px; } .column #cont01 .box01 .tit { width: 400px; margin: 35px auto 0 auto; text-align: left; font-size: 15px; line-height: 1.5; min-height: 10em; text-align: justify; } .column #cont02 { text-align: center; background-color: #F4EEE1; width: 100%; margin: 60px 0 0 0; padding: 50px 0; } .column #cont02 h4 { font-size: 24px; font-weight: bold; border-top: 2px solid #231815; border-bottom: 2px solid #231815; padding: 12px 15px; display: inline-block; letter-spacing: 0.1em; text-align: center; margin: 0 auto 0 auto; } .column #cont02 .box { border: 1px solid #4D4D4D; box-sizing: border-box; width: 1000px; background: #fff url(/-/media/cojp/product/labelwriter/special/cube/img/content/pages/column_cont02img01.jpg) no-repeat left 20px top 20px; margin: 50px auto 0 auto; text-align: left; padding: 20px; min-height: 260px; } .column #cont02 .box p { width: 690px; margin: 0 0 0 240px; } .column #cont02 .box .txt01 { font-size: 24px; font-weight: bold; padding: 30px 0 0 0; } .column #cont02 .box .txt02 { font-size: 12px; padding: 20px 0 0 0; line-height: 1.7; } .column #cont02 .box .link { font-size: 12px; padding: 30px 0 0 0; line-height: 1.7; } /* Instagram PC */ .instagram #main { width: 100%; height: 250px; background: url(/-/media/cojp/product/labelwriter/special/cube/img/content/pages/insta_mainbg.jpg) no-repeat center center; background-size: cover; text-align: center; margin: 0; padding: 0; } .instagram #cont01 { text-align: center; } .instagram #lead_area h3 { line-height: 1.7; } .instagram #cont01 { width: 100%; background-color: #F4EEE1; margin: 100px 0 0 0; text-align: center; padding: 55px 0; } .instagram #cont01 h4 { font-size: 24px; font-weight: bold; border-top: 2px solid #231815; border-bottom: 2px solid #231815; padding: 12px 15px; display: inline-block; letter-spacing: 0.1em; } .instagram #cont01 .inner { width: 1000px; margin: 42px auto 0 auto; } .instagram #cont01 .inner li.area01 { width: 300px; float: left; margin: 0 50px 0 0; } .instagram #cont01 .inner li.area02 { width: 300px; float: left; margin: 0 50px 0 0; } .instagram #cont01 .inner li.area03 { width: 300px; float: left; } .instagram #cont01 .inner img { width: 300px; } .instagram #cont02 { width: 100%; background-color: #fff; margin: 30px 0 0 0; text-align: center; padding: 55px 0; } .instagram #cont02 h4 { font-size: 24px; font-weight: bold; border-top: 2px solid #231815; border-bottom: 2px solid #231815; padding: 12px 15px; display: inline-block; letter-spacing: 0.1em; } .instagram #cont02 .box01 { width: 1000px; /*height: 875px;*/ height: 2380px; position: relative; margin: 40px auto 0 auto; } .instagram #cont02 .box01 .pic07 { width: 328px; height: 474px; padding: 10px; border: 1px solid #4D4D4D; position: absolute; top: 0px; left: 0px; box-sizing: border-box; background-color: #fff; } .instagram #cont02 .box01 .pic08 { width: 328px; height: 474px; padding: 10px; border: 1px solid #4D4D4D; position: absolute; top: 0px; left: 335px; box-sizing: border-box; background-color: #fff; } .instagram #cont02 .box01 .pic09 { width: 328px; height: 474px; padding: 10px; border: 1px solid #4D4D4D; position: absolute; top: 0px; right: 0px; box-sizing: border-box; background-color: #fff; } .instagram #cont02 .box01 .pic10 { width: 328px; height: 445px; padding: 10px; border: 1px solid #4D4D4D; position: absolute; top: 484px; left: 0px; box-sizing: border-box; background-color: #fff; } .instagram #cont02 .box01 .pic11 { width: 328px; height: 474px; padding: 10px; border: 1px solid #4D4D4D; position: absolute; top: 484px; left: 335px; box-sizing: border-box; background-color: #fff; } .instagram #cont02 .box01 .pic12 { width: 328px; height: 474px; padding: 10px; border: 1px solid #4D4D4D; position: absolute; top: 484px; right: 0px; box-sizing: border-box; background-color: #fff; } .instagram #cont02 .box01 .pic13 { width: 328px; height: 549px; padding: 10px; border: 1px solid #4D4D4D; position: absolute; top: 939px; left: 0px; box-sizing: border-box; background-color: #fff; } .instagram #cont02 .box01 .pic14 { width: 328px; height: 474px; padding: 10px; border: 1px solid #4D4D4D; position: absolute; top: 968px; left: 335px; box-sizing: border-box; background-color: #fff; } .instagram #cont02 .box01 .pic15 { width: 328px; height: 474px; padding: 10px; border: 1px solid #4D4D4D; position: absolute; top: 968px; right: 0px; box-sizing: border-box; background-color: #fff; } .instagram #cont02 .box01 .pic01 { width: 328px; height: 474px; padding: 10px; border: 1px solid #4D4D4D; position: absolute; top: 1498px; left: 0px; box-sizing: border-box; background-color: #fff; } .instagram #cont02 .box01 .pic02 { width: 328px; height: 474px; padding: 10px; border: 1px solid #4D4D4D; position: absolute; top: 1452px; left: 335px; box-sizing: border-box; background-color: #fff; } .instagram #cont02 .box01 .pic03 { width: 328px; height: 378px; padding: 10px; border: 1px solid #4D4D4D; position: absolute; top: 1452px; right: 0px; box-sizing: border-box; background-color: #fff; } .instagram #cont02 .box01 .pic04 { width: 328px; height: 398px; padding: 10px; border: 1px solid #4D4D4D; position: absolute; top: 1982px; left: 0px; box-sizing: border-box; background-color: #fff; } .instagram #cont02 .box01 .pic05 { width: 328px; height: 405px; padding: 10px; border: 1px solid #4D4D4D; position: absolute; top: 1936px; left: 335px; box-sizing: border-box; background-color: #fff; } .instagram #cont02 .box01 .pic06 { width: 328px; height: 501px; padding: 10px; border: 1px solid #4D4D4D; position: absolute; top: 1840px; right: 0px; box-sizing: border-box; background-color: #fff; } .instagram #cont02 .box01 .pic01 img, .instagram #cont02 .box01 .pic02 img, .instagram #cont02 .box01 .pic03 img, .instagram #cont02 .box01 .pic04 img, .instagram #cont02 .box01 .pic05 img, .instagram #cont02 .box01 .pic06 img, .instagram #cont02 .box01 .pic07 img, .instagram #cont02 .box01 .pic08 img, .instagram #cont02 .box01 .pic09 img, .instagram #cont02 .box01 .pic10 img, .instagram #cont02 .box01 .pic11 img, .instagram #cont02 .box01 .pic12 img, .instagram #cont02 .box01 .pic13 img, .instagram #cont02 .box01 .pic14 img, .instagram #cont02 .box01 .pic15 img { width: 310px; } .instagram #cont02 .box01 a:hover { filter:alpha(opacity=50); -moz-opacity: 0.5; opacity: 0.5; } /* 活用事例 PC */ .case #main { width: 100%; height: 250px; background: url(/-/media/cojp/product/labelwriter/special/cube/img/content/pages/case_mainbg.jpg) no-repeat center bottom; background-size: cover; text-align: center; margin: 0; padding: 0; } .case #shops { width: 100%; background-color: #F4EEE1; margin: 70px 0 0 0; padding: 60px 0; } .case #shops .box01 { width: 960px; margin: 0 auto; } .case #shops .title_area{ text-align: center; } .case #shops .title_area h4 { font-size: 24px; font-weight: bold; border-top: 2px solid #231815; border-bottom: 2px solid #231815; padding: 12px 15px; display: inline-block; letter-spacing: 0.1em; text-align: center; } .case #shops .shoplist_area { width: 960px; margin: 50px auto 0 auto; } .case #shops .shoplist_area ul { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; } .case #shops .shoplist_area ul li { width: 18%; text-align: center; } .case #shops .shoplist_area ul li a { width: 100%; background-color: #000; display: block; padding: 8% 5% 5% 5%; color: #fff; box-sizing: border-box; } .case #shops .shoplist_area ul li a p:nth-of-type(1) { font-size: 13px; line-height: 1.8em; letter-spacing: 0.1em; font-weight: 500; } .case #shops .shoplist_area ul li a p:nth-of-type(2) { font-size: 19px; line-height: 1.3em; font-weight: 500; } .case #shops .shoplist_area ul li a p:nth-of-type(2)::after { content: "▼"; display: block; font-size: 10px; } .threelead { text-align: left; font-size: 25px; font-weight: 700; letter-spacing: -0.3em; } .case #shops .info_area { width: 960px; margin: 50px auto 0 auto; background-color: #fff; border: 1px solid #4D4D4D; box-sizing: border-box; padding: 10px; } .case #shops .info_area .img01 { width: 395px; float: left; } .case #shops .info_area .right{ width: 506px; float: left; margin:10px 0 0 0; padding: 0 0 0 20px; } .case #shops .info_area .right h5 { border-top: 3px solid #000; border-bottom: 3px solid #000; text-align: center; padding: 15px 0; font-size: 23px; font-weight: bold; line-height: 1.6; } .case #shops .info_area .right h5 .case{ font-size: 16px; } .case #shops .info_area .right h5 .shop_name{ font-size: 17px; } .case #shops .info_area .right h5 .name{ font-size: 26px; } .case #shops .info_area .right .img02 { margin: 10px 0 15px 0; float:left; } .case #shops .info_area .right .img03{ margin: 10px 0 15px 0; float:right; } .case #shops p.link{ margin:10px auto; text-align:center; } .case #shops p.link a { background: #000 url(/-/media/cojp/product/labelwriter/special/cube/img/global/btn_arroww.png) no-repeat right 20px center; color: #fff; padding: 12px 90px; } .case .cont01 { width: 100%; background-color: #FFF; margin: 70px 0 0 0; padding: 60px 0; } .case .cont01 .box01 { width: 960px; margin: 0 auto; } .case .cont01 .box02 { width: 960px; margin: 100px auto 0 auto; } .case .cont01 .box01 .title_area, .case .cont01 .box02 .title_area { width: 960px; margin: 0 auto; border-top: 2px solid #000; } .case .cont01 .box01 .title_area h4, .case .cont01 .box02 .title_area h4 { font-size: 30px; border-top: 6px solid #000; margin: 2px 0 0 0; text-align: center; padding: 30px 0 0 0; font-weight: bold; } .case .cont01 .box01 .title_area p, .case .cont01 .box02 .title_area p { text-align: center; font-size: 24px; font-weight: bold; padding: 30px 0 30px 0; border-bottom: 2px solid #000; } .case .cont01 .box01 .info_area, .case .cont01 .box02 .info_area { width: 960px; margin: 50px auto 0 auto; background-color: #fff; border: 1px solid #4D4D4D; box-sizing: border-box; padding: 10px; } .case .cont01 .box01 .info_area .img01, .case .cont01 .box02 .info_area .img01 { width: 490px; float: left; } .case .cont01 .box01 .info_area .right, .case .cont01 .box02 .info_area .right { width: 360px; float: left; margin: 0 0 0 45px; padding: 20px 0 0 0; } .case .cont01 .box01 .info_area .right h5, .case .cont01 .box02 .info_area .right h5 { border-top: 3px solid #000; border-bottom: 3px solid #000; text-align: center; padding: 20px 0; font-size: 20px; font-weight: bold; line-height: 1.6; } .case .cont01 .box01 .info_area .right .txt, .case .cont01 .box02 .info_area .right .txt { padding: 20px 0; font-size: 14px; line-height: 1.7; } .case .cont01 .box01 .info_area .right .img02, .case .cont01 .box02 .info_area .right .img02 { text-align: center; padding: 20px 0 0 0; } .case .cont01 .tmp_box { width: 960px; margin: 50px auto 0 auto; border-top: 2px solid #000; } .case .cont01 .tmp_box h5 { text-align: center; } .case .cont01 .tmp_box h5 span { position: relative; top: -0.5em; font-size: 20px; font-weight: bold; background-color: #FFF; padding: 0 20px; } .case .cont01 .tmp_box .inn { width: 960px; margin: 40px 0 0 0; } .case .cont01 .tmp_box .inn .left { width: 226px; float: left; margin: 0 18px 0 0; } .case .cont01 .tmp_box .inn .right { width: 226px; float: left; } .case .cont01 .tmp_box .inn dl { margin: 10px 0 0 0; font-size: 14px; line-height: 1.7; } .case .cont01 .tmp_box .inn dt { float: left; min-width: 5em; -moz-text-align-last: justify; text-align-last: justify; } .case .cont01 .tmp_box .inn dd::before { content: ":"; } .case .cont01 .tmp_box .inn img { width: 226px; height: auto; } .case .cont01_2 .tmp_box { width: 960px; margin: 50px auto 0 auto; border-top: 2px solid #000; } .case .cont01_2 .tmp_box h5 { text-align: center; } .case .cont01_2 .tmp_box h5 span { position: relative; top: -0.5em; font-size: 20px; font-weight: bold; background-color: #FFF; padding: 0 20px; } .case .cont01_2 .tmp_box .inn { width: 960px; margin: 40px 0 0 0; } .case .cont01_2 .tmp_box .inn .left { width: 226px; float: left; margin: 0 18px 0 0; } .case .cont01_2 .tmp_box .inn .right { width: 226px; float: left; } .case .cont01_2 .tmp_box .inn dl { margin: 10px 0 0 0; font-size: 14px; line-height: 1.7; } .case .cont01_2 .tmp_box .inn dt { float: left; min-width: 5em; -moz-text-align-last: justify; text-align-last: justify; } .case .cont01_2 .tmp_box .inn dd::before { content: ":"; } .case .cont01_2 .tmp_box .inn img { width: 226px; height: auto; } .case .cont01_3 { width: 100%; background-color: #FFF; margin: 70px 0 0 0; padding: 60px 0; } .case .cont01_3 .box01 { width: 960px; margin: 0 auto; } .case .cont01_3 .box02 { width: 960px; margin: 100px auto 0 auto; } .case .cont01_3 .box01 .title_area, .case .cont01_3 .box02 .title_area { width: 960px; margin: 0 auto; border-top: 2px solid #000; } .case .cont01_3 .box01 .title_area h4, .case .cont01_3 .box02 .title_area h4 { font-size: 30px; border-top: 6px solid #000; margin: 2px 0 0 0; text-align: center; padding: 30px 0 0 0; font-weight: bold; } .case .cont01_3 .box01 .title_area p, .case .cont01_3 .box02 .title_area p { text-align: center; font-size: 24px; font-weight: bold; padding: 30px 0 30px 0; border-bottom: 2px solid #000; } .case .cont01_3 .box01 .info_area, .case .cont01_3 .box02 .info_area { width: 960px; margin: 50px auto 0 auto; background-color: #fff; border: 1px solid #4D4D4D; box-sizing: border-box; padding: 10px; } .case .cont01_3 .box01 .info_area .img01, .case .cont01_3 .box02 .info_area .img01 { width: 490px; float: left; } .case .cont01_3 .box01 .info_area .right, .case .cont01_3 .box02 .info_area .right { width: 360px; float: left; margin: 0 0 0 45px; padding: 20px 0 0 0; } .case .cont01_3 .box01 .info_area .right h5, .case .cont01_3 .box02 .info_area .right h5 { border-top: 3px solid #000; border-bottom: 3px solid #000; text-align: center; padding: 20px 0; font-size: 20px; font-weight: bold; line-height: 1.6; } .case .cont01_3 .box01 .info_area .right .txt, .case .cont01_3 .box02 .info_area .right .txt { padding: 20px 0; font-size: 14px; line-height: 1.7; } .case .cont01_3 .box01 .info_area .right .img02, .case .cont01_3 .box02 .info_area .right .img02 { text-align: center; padding: 20px 0 0 0; } .case .cont01_3 .tmp_box { width: 960px; margin: 50px auto 0 auto; border-top: 2px solid #000; } .case .cont01_3 .tmp_box h5 { text-align: center; } .case .cont01_3 .tmp_box h5 span { position: relative; top: -0.5em; font-size: 20px; font-weight: bold; background-color: #FFF; padding: 0 20px; } .case .cont01_3 .tmp_box .inn { width: 960px; margin: 40px 0 0 0; } .case .cont01_3 .tmp_box .inn .left { width: 226px; float: left; margin: 0 18px 0 0; } .case .cont01_3 .tmp_box .inn .right { width: 226px; float: left; } .case .cont01_3 .tmp_box .inn dl { margin: 10px 0 0 0; font-size: 14px; line-height: 1.7; } .case .cont01_3 .tmp_box .inn dt { float: left; min-width: 5em; -moz-text-align-last: justify; text-align-last: justify; } .case .cont01_3 .tmp_box .inn dd::before { content: ":"; } .case .cont01_3 .tmp_box .inn img { width: 226px; height: auto; } .case .cont01_4 { width: 100%; background-color: #FFF; margin: 70px 0 0 0; padding: 60px 0; } .case .cont01_4 .box01 { width: 960px; margin: 0 auto; } .case .cont01_4 .box02 { width: 960px; margin: 100px auto 0 auto; } .case .cont01_4 .box01 .title_area, .case .cont01_4 .box02 .title_area { width: 960px; margin: 0 auto; border-top: 2px solid #000; } .case .cont01_4 .box01 .title_area h4, .case .cont01_4 .box02 .title_area h4 { font-size: 30px; border-top: 6px solid #000; margin: 2px 0 0 0; text-align: center; padding: 30px 0 0 0; font-weight: bold; } .case .cont01_4 .box01 .title_area p, .case .cont01_4 .box02 .title_area p { text-align: center; font-size: 24px; font-weight: bold; padding: 30px 0 30px 0; border-bottom: 2px solid #000; } .case .cont01_4 .box01 .info_area, .case .cont01_4 .box02 .info_area { width: 960px; margin: 50px auto 0 auto; background-color: #fff; border: 1px solid #4D4D4D; box-sizing: border-box; padding: 10px; } .case .cont01_4 .box01 .info_area .img01, .case .cont01_4 .box02 .info_area .img01 { width: 490px; float: left; } .case .cont01_4 .box01 .info_area .right, .case .cont01_4 .box02 .info_area .right { width: 360px; float: left; margin: 0 0 0 45px; padding: 20px 0 0 0; } .case .cont01_4 .box01 .info_area .right h5, .case .cont01_4 .box02 .info_area .right h5 { border-top: 3px solid #000; border-bottom: 3px solid #000; text-align: center; padding: 20px 0; font-size: 20px; font-weight: bold; line-height: 1.6; } .case .cont01_4 .box01 .info_area .right .txt, .case .cont01_4 .box02 .info_area .right .txt { padding: 20px 0; font-size: 14px; line-height: 1.7; } .case .cont01_4 .box01 .info_area .right .img02, .case .cont01_4 .box02 .info_area .right .img02 { text-align: center; padding: 20px 0 0 0; } .case .cont01_4 .tmp_box { width: 960px; margin: 50px auto 0 auto; border-top: 2px solid #000; } .case .cont01_4 .tmp_box h5 { text-align: center; } .case .cont01_4 .tmp_box h5 span { position: relative; top: -0.5em; font-size: 20px; font-weight: bold; background-color: #FFF; padding: 0 20px; } .case .cont01_4 .tmp_box .inn { width: 960px; margin: 40px 0 0 0; } .case .cont01_4 .tmp_box .inn .left { width: 226px; float: left; margin: 0 18px 0 0; } .case .cont01_4 .tmp_box .inn .right { width: 226px; float: left; } .case .cont01_4 .tmp_box .inn dl { margin: 10px 0 0 0; font-size: 14px; line-height: 1.7; } .case .cont01_4 .tmp_box .inn dt { float: left; min-width: 5em; -moz-text-align-last: justify; text-align-last: justify; } .case .cont01_4 .tmp_box .inn dd::before { content: ":"; } .case .cont01_4 .tmp_box .inn img { width: 226px; height: auto; } /* 活用事例 ショップ紹介 PC */ .shops #main { width: 100%; height: 250px; background: url(/-/media/cojp/product/labelwriter/special/cube/img/content/pages/case_mainbg.jpg) no-repeat center bottom; background-size: cover; text-align: center; margin: 0; padding: 0; } .shops #lead_area .title_area{ width: 1000px; margin: 80px auto 55px auto; border-top: 2px solid #000 } .shops #lead_area .title_area h3{ font-size: 32px; border-top: 6px solid #000; margin: 2px 0 0 0; text-align: center; padding: 10px 0 0 0; font-weight: bold; } .shops #lead_area .title_area span{ font-size: 20px; } .shops #lead_area .title_area p.shop_name{ text-align: center; font-size: 24px; font-weight: bold; padding: 0 0 30px 0; border-bottom: 2px solid #000; margin:0; } .shops #lead_area .prof_box{ margin:10px auto; width:1000px; border: 1px solid #4D4D4D; box-sizing: border-box; padding: 10px; } .shops #lead_area .prof_box .img01{ float:left; width:152px; margin:0; } .shops #lead_area .prof_box .right{ width:785px; float:left; margin-left:30px; text-align:left; } .shops #lead_area .prof_box .right .shop_name{ font-size:14px; margin:0; line-height:1.8; } .shops #lead_area .prof_box .right .name{ margin:0; font-size:36px; line-height:1.5; letter-spacing:0.2em; } .shops #lead_area .prof_box .right .name span{ font-size:30px; } .shops #lead_area .prof_box .right .txt{ font-size:14px; margin:5px 0 0; line-height:1.8; } .shops #lead_area .prof_box .right{ width:785px; float:left; margin-left:30px; text-align:left; } .shops #lead_area2 .title_area{ width: 1000px; margin: 80px auto 55px auto; border-top: 2px solid #000 } .shops #lead_area2 .title_area h3{ font-size: 32px; border-top: 6px solid #000; margin: 2px 0 0 0; text-align: center; padding: 10px 0 0 0; font-weight: bold; } .shops #lead_area2 .title_area span{ font-size: 20px; } .shops #lead_area2 .title_area p.shop_name{ text-align: center; font-size: 24px; font-weight: bold; padding: 0 0 30px 0; border-bottom: 2px solid #000; margin:0; } .shops #lead_area2 .main { width: 54.4%; } .shops #lead_area2 .prof_box{ width:43.9%; text-align:left; border: 1px solid #4D4D4D; box-sizing: border-box; padding: 2%; } .shops #lead_area2 .prof_box .right .shop_name{ font-size:14px; margin:0; line-height:1.8; } .shops #lead_area2 .prof_box .right .name{ margin:0; font-size:36px; line-height:1.5; letter-spacing:0.2em; } .shops #lead_area2 .prof_box .right .name span{ font-size:30px; } .shops #lead_area2 .prof_box .right .txt{ font-size:14px; margin:5px 0 0; line-height:1.8; } .fbox { display: flex; justify-content: space-between; flex-wrap: wrap; align-items: center; box-sizing: border-box; width: 1000px; margin: 0 auto 0 auto; } .shops .cont01{ width: 100%; background-color: #FFF; margin: 70px 0 0 0; padding: 60px 0; } .shops .cont01 .box{ width:1000px; margin:30px auto; } .shops .cont01 .box .left{ float:left; } .shops .cont01 .box .right{ float:right; } .shops .cont01 .box h4{ font-weight:bold; font-size:24px; line-height:1.8em; } .shops .cont01 .box .txt{ margin:10px 0 0 0; font-size:14px; width:470px; line-height:2em; } .shops .cont01 .tmp_box { width: 960px; margin: 50px auto 0 auto; border-top: 2px solid #000; } .shops .cont01 .tmp_box h5 { text-align: center; } .shops .cont01 .tmp_box h5 span { position: relative; top: -0.5em; font-size: 20px; font-weight: bold; background-color: #FFF; padding: 0 20px; } .shops .cont01 .tmp_box .inn { width: 960px; margin: 40px 0 0 0; } .shops .cont01 .tmp_box .inn .left { width: 226px; float: left; margin: 0 18px 0 0; } .shops .cont01 .tmp_box .inn .left_175 { width: 175px; float: left; margin: 0 18px 0 0; } .shops .cont01 .tmp_box .inn .left p:nth-of-type(2), .shops .cont01 .tmp_box .inn .right p:nth-of-type(2){ display: block; margin: 5% 0 0 0; font-size: 13px; line-height: 1.8em; height: 4.5rem; } .shops .cont01 .tmp_box .inn .right { width: 226px; float: left; } .shops .cont01 .tmp_box .inn dl { margin: 10px 0 0 0; font-size: 14px; line-height: 1.7; display: flex; flex-wrap: wrap; width: 100%; } .shops .cont01 .tmp_box .inn dt { min-width: 5em; -moz-text-align-last: justify; text-align-last: justify; width: 3%; } .shops .cont01 .tmp_box .inn dd::before { content: ":"; } .shops .cont01 .tmp_box .inn dd { width: 62%; padding-left: 1em; text-indent: -1em; } .shops .cont01 .tmp_box .inn img { width: 226px; height: auto; } .shops .cont01 .box02 .info_area{ width: 960px; margin: 50px auto 0 auto; background-color: #fff; border: 1px solid #4D4D4D; box-sizing: border-box; padding: 10px; } .shops .cont01 .box02 .info_area .left{ float:left; width:354px; } .shops .cont01 .box02 .info_area .left .img02{ margin-top:10px; } .shops .cont01 .box02 .info_area .right{ width:510px; } .shops .cont01 .box02 .info_area .right h5{ border-top: 3px solid #000; border-bottom: 3px solid #000; text-align: center; padding: 20px 0; font-size: 27px; font-weight: bold; line-height: 1.6; } .shops .cont01 .box02 .info_area .right p.title{ font-size:20px; font-weight:bold; margin-top:30px; line-height:1.5; } .shops .cont01_2 { width: 100%; background-color: #FFF; margin: 10px 0 0 0; padding: 0; } .shops .cont01_2 .box{ width:1000px; margin:85px auto; } .shops .cont01_2 .box .left{ float:left; } .shops .cont01_2 .box .right{ float:right; } .fright { float: right; } .w470 { width: 470px; } .w470 img { width: 100%; } .w348 { width: 348px; } .w348 img { width: 100%; } .shops .cont01_2 .box h4{ font-weight:bold; font-size:24px; line-height:1.8em; } .shops .cont01_2 .box .txt{ margin:10px 0 0 0; font-size:14px; width:470px; line-height:2em; } .shops .cont01_2 .box:nth-of-type(1) .txt{ margin:10px 0 0 0; font-size:14px; width:100%; line-height:2em; } .shops .cont01_2 .box:nth-of-type(1) .fright { width: 413px; padding: 0 0 3% 3%; } .shops .cont01_2 .box:nth-of-type(1) .fright img { width: 100%; } .shops .cont01_2 .tmp_box { width: 960px; margin: 50px auto 0 auto; border-top: 2px solid #000; } .shops .cont01_2 .tmp_box h5 { text-align: center; } .shops .cont01_2 .tmp_box h5 span { position: relative; top: -0.5em; font-size: 20px; font-weight: bold; background-color: #FFF; padding: 0 20px; } .shops .cont01_2 .tmp_box .inn { width: 960px; margin: 40px 0 0 0; } .shops .cont01_2 .tmp_box .inn .left { width: 175px; float: left; margin: 0 18px 0 0; } .shops .cont01_2 .tmp_box .inn .left p:nth-of-type(2), .shops .cont01_2 .tmp_box .inn .right p:nth-of-type(2){ display: block; margin: 5% 0 0 0; font-size: 13px; line-height: 1.8em; height: 4.5rem; } .shops .cont01_2 .tmp_box .inn .left img { width: 100%; } .shops .cont01_2 .tmp_box .inn .right { width: 175px; float: left; } .shops .cont01_2 .tmp_box .inn .right img { width: 100%; } .shops .cont01_2 .tmp_box .inn dl { margin: 10px 0 0 0; font-size: 13px; line-height: 1.7; width: 100%; box-sizing: border-box; } .shops .cont01_2 .tmp_box .inn dt { display: block; } .shops .cont01_2 .tmp_box .inn dd::before { content: ":"; } .shops .cont01_2 .tmp_box .inn dd { display: block; } .shops .cont01_2 .tmp_box .inn img { width: 226px; height: auto; } .shops .cont01_2 .box02 .info_area{ width: 960px; margin: 50px auto 0 auto; background-color: #fff; border: 1px solid #4D4D4D; box-sizing: border-box; padding: 10px; } .shops .cont01_2 .box02 .info_area .left{ float:left; width:354px; } .shops .cont01_2 .box02 .info_area .left .img02{ margin-top:10px; } .shops .cont01_2 .box02 .info_area .right{ width:510px; } .shops .cont01_2 .box02 .info_area .right h5{ border-top: 3px solid #000; border-bottom: 3px solid #000; text-align: center; padding: 20px 0; font-size: 27px; font-weight: bold; line-height: 1.6; } .shops .cont01_2 .box02 .info_area .right p.title{ font-size:20px; font-weight:bold; margin-top:30px; line-height:1.5; } .shops .cont01_3{ width: 100%; background-color: #FFF; margin: 10px 0 0 0; padding: 0; } .shops .cont01_3 .box{ width:1000px; margin:85px auto; } .shops .cont01_3 .box .left{ float:left; } .shops .cont01_3 .box .right{ float:right; } .shops .cont01_3 .box h4{ font-weight:bold; font-size:24px; line-height:1.8em; } .shops .cont01_3 .box .txt{ margin:10px 0 0 0; font-size:14px; width:470px; line-height:2em; } .shops .cont01_3 .tmp_box { width: 960px; margin: 50px auto 0 auto; border-top: 2px solid #000; } .shops .cont01_3 .tmp_box h5 { text-align: center; } .shops .cont01_3 .tmp_box h5 span { position: relative; top: -0.5em; font-size: 20px; font-weight: bold; background-color: #FFF; padding: 0 20px; } .shops .cont01_3 .tmp_box .inn { width: 960px; margin: 40px 0 0 0; } .shops .cont01_3 .tmp_box .inn .left { width: 226px; float: left; margin: 0 18px 0 0; } .shops .cont01_3 .tmp_box .inn .left p:nth-of-type(2), .shops .cont01_3 .tmp_box .inn .right p:nth-of-type(2){ display: block; margin: 5% 0 0 0; font-size: 13px; line-height: 1.8em; height: 4.5rem; } .shops .cont01_3 .tmp_box .inn .right { width: 226px; float: left; } .shops .cont01_3 .tmp_box .inn dl { margin: 10px 0 0 0; font-size: 14px; line-height: 1.7; display: flex; flex-wrap: wrap; width: 100%; } .shops .cont01_3 .tmp_box .inn dt { min-width: 5em; -moz-text-align-last: justify; text-align-last: justify; width: 3%; } .shops .cont01_3 .tmp_box .inn dd::before { content: ":"; } .shops .cont01_3 .tmp_box .inn dd { width: 62%; padding-left: 1em; text-indent: -1em; } .shops .cont01_3 .tmp_box .inn img { width: 226px; height: auto; } .shops .cont01_3 .box02 .info_area{ width: 960px; margin: 50px auto 0 auto; background-color: #fff; border: 1px solid #4D4D4D; box-sizing: border-box; padding: 10px; } .shops .cont01_3 .box02 .info_area .left{ float:left; width:354px; } .shops .cont01_3 .box02 .info_area .left .img02{ margin-top:10px; } .shops .cont01_3 .box02 .info_area .right{ width:510px; } .shops .cont01_3 .box02 .info_area .right h5{ border-top: 3px solid #000; border-bottom: 3px solid #000; text-align: center; padding: 20px 0; font-size: 27px; font-weight: bold; line-height: 1.6; } .shops .cont01_3 .box02 .info_area .right p.title{ font-size:20px; font-weight:bold; margin-top:30px; line-height:1.5; } .shops .cont01_4{ width: 100%; background-color: #FFF; margin: 10px 0 0 0; padding: 0; } .shops .cont01_4 .box{ width:1000px; margin:85px auto; } .shops .cont01_4 .box .left{ float:left; } .shops .cont01_4 .box .right{ float:right; } .shops .cont01_4 .box h4{ font-weight:bold; font-size:24px; line-height:1.8em; } .shops .cont01_4 .box .txt{ margin:10px 0 0 0; font-size:14px; width:470px; line-height:2em; } .shops .cont01_4 .tmp_box { width: 960px; margin: 50px auto 0 auto; border-top: 2px solid #000; } .shops .cont01_4 .tmp_box h5 { text-align: center; } .shops .cont01_4 .tmp_box h5 span { position: relative; top: -0.5em; font-size: 20px; font-weight: bold; background-color: #FFF; padding: 0 20px; } .shops .cont01_4 .tmp_box .inn { width: 960px; margin: 40px 0 20px 0; } .shops .cont01_4 .tmp_box .inn .left { width: 175px; float: left; margin: 0 18px 0 0; } .shops .cont01_4 .tmp_box .inn .left p:nth-of-type(2), .shops .cont01_4 .tmp_box .inn .right p:nth-of-type(2){ display: block; margin: 5% 0 0 0; font-size: 13px; line-height: 1.8em; height: 4.5rem; } .shops .cont01_4 .tmp_box .inn .left img { width: 100%; } .shops .cont01_4 .tmp_box .inn .right { width: 175px; float: left; } .shops .cont01_4 .tmp_box .inn .right img { width: 100%; } .shops .cont01_4 .tmp_box .inn dl { margin: 10px 0 0 0; font-size: 13px; line-height: 1.7; width: 100%; box-sizing: border-box; } .shops .cont01_4 .tmp_box .inn dt { display: block; } .shops .cont01_4 .tmp_box .inn dd::before { content: ":"; } .shops .cont01_4 .tmp_box .inn dd { display: block; } .shops .cont01_4 .tmp_box .inn img { width: 226px; height: auto; } .shops .cont01_4 .box02 .info_area{ width: 960px; margin: 50px auto 0 auto; background-color: #fff; border: 1px solid #4D4D4D; box-sizing: border-box; padding: 10px; } .shops .cont01_4 .box02 .info_area .left{ float:left; width:354px; } .shops .cont01_4 .box02 .info_area .left .img02{ margin-top:10px; } .shops .cont01_4 .box02 .info_area .right{ width:510px; } .shops .cont01_4 .box02 .info_area .right h5{ border-top: 3px solid #000; border-bottom: 3px solid #000; text-align: center; padding: 20px 0; font-size: 22px; font-weight: bold; line-height: 1.6; } .shops .cont01_4 .box02 .info_area .right p.title{ font-size:18px; font-weight:bold; margin-top:30px; line-height:1.5; } .shops .cont02{ width: 100%; background-color: #F4EEE1; margin: 70px 0 0 0; padding: 60px 0; } .shops .cont02 .box01{ width:1000px; margin:0 auto; } .shops .cont02 .box01 .left{ float:left; width:470px; } .shops .cont02 .box01 .left h4{ font-size:26px; font-weight:bold; line-height: 1.8em; } .shops .cont02 .box01 .left .txt{ margin: 10px 0 0 0; font-size: 14px; line-height: 2em; } .shops .cont02 .box01 .img01{ float:right; } .shops .cont02 .shop_area{ width:1000px; background:#fff; border:1px solid #4D4D4D; margin:30px auto; padding:10px; } .shops .cont02 .shop_area .img01{ float:left; } .shops .cont02 .shop_area .right{ float:left; margin-left:30px; } .shops .cont02 .shop_area .right .shop_name{ font-size:22px; font-weight:bold; line-height:1.8em; } .shops .cont02 .shop_area .right .shop_adress{ margin-top:20px; font-size:14px; line-height:1.9em; } .shops .cont02_2{ width: 100%; background-color: #F4EEE1; margin: 70px 0 0 0; padding: 60px 0; } .shops .cont02_2 .box01{ width:1000px; margin:0 auto; } .shops .cont02_2 .box01 .left{ float:left; width:470px; } .shops .cont02_2 .box01 .left h4{ font-size:26px; font-weight:bold; line-height: 1.8em; } .shops .cont02_2 .box01 .left .txt{ margin: 10px 0 0 0; font-size: 14px; line-height: 2em; } .shops .cont02_2 .box01 .img01{ float:right; } .shops .cont02_2 .shop_area{ width:1000px; background:#fff; border:1px solid #4D4D4D; margin:30px auto; padding:10px; } .shops .cont02_2 .shop_area .img01{ float:left; } .shops .cont02_2 .shop_area .right{ float:left; margin-left:30px; } .shops .cont02_2 .shop_area .right .shop_name{ font-size:22px; font-weight:bold; line-height:1.8em; } .shops .cont02_2 .shop_area .right .shop_adress{ margin-top:20px; font-size:14px; line-height:2em; } .sponly { display: none; } /* シェアラベル PC */ .share #main { width: 100%; height: 250px; background: url(/-/media/cojp/product/labelwriter/special/cube/img/content/pages/share_mainbg.jpg) no-repeat center bottom; background-size: cover; text-align: center; margin: 0; padding: 0; } .share #lead_area p.tit { font-size: 24px; } .share #lead_area p { padding: 0; margin: 20px 0 0 0; font-size: 19px; } .share #lead_area span { font-size: 12px; } .share .cont01 { width: 990px; margin: 60px auto 0 auto; } .share .cont01 .left { width: 490px; border: 1px solid #4D4D4D; box-sizing: border-box; float: left; padding: 30px 20px 20px 20px; } .share .cont01 .right { width: 490px; border: 1px solid #4D4D4D; box-sizing: border-box; float: right; padding: 30px 20px 20px 20px; } .share .cont01 .num { text-align: center; } .share .cont01 .inn .copy01 { font-size: 20px; text-align: center; line-height: 1.5; padding: 30px 0 0 0; } .share .cont01 .inn .copy02 { padding: 20px 0; font-size: 15px; line-height: 1.5; height: 3em; } .share .cont01 .inn .pic { padding: 30px 0 0 0; } .share .cont02 { width: 100%; background-color: #F4EEE1; margin: 80px 0 0 0; text-align: center; padding: 80px 0; } .share .cont02 h4 { font-size: 25px; text-align: center; margin: 0 auto 0 auto; border-top: 2px solid #231815; border-bottom: 2px solid #231815; padding: 20px 10px; font-weight: bold; display: inline-block; } .share .cont02 .img { margin: 80px 0 0 0; } .share .cont02 .txt { width: 902px; margin: 0 auto; text-align: left; padding: 30px 0 0 0; } .share .cont03 { width: 980px; margin: 60px auto 0 auto; text-align: center; } .share .cont03 h4 { font-size: 25px; text-align: center; margin: 0 auto 0 auto; border-top: 2px solid #231815; border-bottom: 2px solid #231815; padding: 20px 10px; font-weight: bold; display: inline-block; } .share .cont03 .box { border: 1px solid #4D4D4D; width: 980px; box-sizing: border-box; text-align: left; margin: 70px 0 0 0; padding: 20px; font-size: 15px; line-height: 1.6; } .share .cont03 .box .copy01 { margin: 0 0 30px 0; } .share .cont03 .box02 .left { width: 182px; float: left; } .share .cont03 .box02 .right { width: 740px; height: 233px; float: right; background-color: #F0F0F0; box-sizing: border-box; padding: 30px; } .share .cont03 .box02 .right h5 { font-size: 18px; font-weight: bold; padding: 0 0 20px 0; } .share .cont03 .box02 .right .link { } .sponly { display: none; } .return1 { width: 90%; max-width: 300px; margin: 5% auto 0 auto; display: block; } .return1 a { display: block; box-sizing: border-box; width: 100%; background-color: #000; text-align: center; color: #fff; padding: 5% 0 5% 0; font-size: 15px; } .return1 a p { color: #fff; } .return1 a p::before { content: "◀"; margin-right: 25px; } .gnkout { display: block; width: 980px; margin: 5% auto 0 auto; font-size: 12px; text-align: right; } } /*スマホ*/ @media only screen and (max-width: 768px) { /* ページ共通 */ #common_head { height: 80px; } #main h2 { width: 100%; height: 140px; background: url(/-/media/cojp/product/labelwriter/special/cube/img/global/mesh.png); } #main h2 img { padding: 50px 0 0 0; height: 40px; } #lead_area { width: 90%; margin: 0 auto; } #lead_area h3 { font-size: 25px; line-height: 1.5; margin: 50px 0 0 0; font-weight: bold; letter-spacing: 0.1em; } #lead_area p { font-size: 14px; line-height: 1.7; margin: 25px 0 0 0; letter-spacing: 0.1em; } #lead_area2 { width: 90%; margin: 0 auto; } #lead_area2 h3 { font-size: 25px; line-height: 1.5; margin: 50px 0 0 0; font-weight: bold; letter-spacing: 0.1em; } #lead_area2 p { font-size: 14px; line-height: 1.7; margin: 25px 0 0 0; letter-spacing: 0.1em; } #app_dl { width: 100%; background-color: #F0F0F0; margin: 60px 0 0 0; padding: 50px 0; } #app_dl .tit { width: 90%; text-align: center; font-size: 20px; margin: 0 auto; font-weight: bold; letter-spacing: 0.1em; line-height: 1.7; } #app_dl .tit span { font-size: 24px; } #app_dl .box01 { width: 90%; margin: 25px auto 0 auto; } #app_dl .box01 .left { width: 100%; text-align: center; } #app_dl .box01 .left img { width: 30%; } #app_dl .box01 .right { width: 100%; } #app_dl .box01 .right p.txt01 { font-size: 18px; font-weight: bold; text-align: center; color: #333333; margin: 30px 0 0 0; } #app_dl .box01 .right p.txt02 { font-size: 16px; text-align: center; color: #666666; margin: 20px 0 0 0; line-height: 1.5; } #app_dl .box02 { width: 90%; margin: 40px auto 80px auto; } #app_dl .box02 .txt01 { width: 100%; border-bottom: 1px solid #000000; text-align: center; font-size: 20px; font-weight: bold; padding: 0 0 10px 0; line-height: 1.5; } #app_dl .box02 ul { margin: 25px 0 0 0; width: 100%; display: -webkit-flex; /* Safari */ display: flex; -webkit-justify-content: space-between; /* Safari */ justify-content: space-between; } #app_dl .box02 li { width: 45%; float: left; } #app_dl .box02 li img { width: 100%; } #app_dl .box02 li.last { margin: 0; } /* P-TOUCH CUBEって? スマホ */ .about #main { width: 100%; height: 140px; margin: 0 auto; background: url(/-/media/cojp/product/labelwriter/special/cube/img/content/pages/about_mainbg.jpg) no-repeat center center; background-size: cover; text-align: center; margin: 0; padding: 0; } .about #cont01 { width: 90%; margin: 50px auto 0 auto; } .about #cont01 .left { width: 100%; border: 1px solid #4D4D4D; padding: 20px 20px 60px 20px; margin: 0 0 20px 0; box-sizing: border-box; } .about #cont01 .right { width: 100%; border: 1px solid #4D4D4D; float: right; padding: 20px 20px 60px 20px; margin: 0 0 20px 0; box-sizing: border-box; } .about #cont01 p.pic { text-align: center; } .about #cont01 p.pic img { width: 100%; } .about #cont01 h4 { font-size: 20px; text-align: center; width: 100%; margin: 40px auto 0 auto; border-top: 2px solid #231815; border-bottom: 2px solid #231815; padding: 20px 0; font-weight: bold; } .about #cont01 h4 sup { font-size: 90%; vertical-align: super; } .about #cont01 p.txt { font-size: 17px; width: 100%; margin: 30px auto 0 auto; line-height: 1.7; text-align: justify; } /* APPLICATION スマホ */ .app #main { width: 100%; height: 140px; margin: 0 auto; background: url(/-/media/cojp/product/labelwriter/special/cube/img/content/pages/app_mainbg.jpg) no-repeat center center; background-size: cover; text-align: center; margin: 0; padding: 0; } .app .app_img01 { text-align: center; margin: 50px 0 0 0; } .app .app_img01 img { width: 30%; } .app .app_tit01 { text-align: center; color: #333333; font-size: 20px; font-weight: bold; margin: 25px 0 0 0; } .app #cont01 { width: 100%; background-color: #F4EEE1; text-align: center; padding: 50px 0 50px 0; margin: 80px 0 0 0; } .app #cont01 h4 { font-size: 25px; font-weight: bold; border-top: 2px solid #231815; border-bottom: 2px solid #231815; padding: 20px 20px; display: inline-block; margin: 0 0 55px 0; letter-spacing: 0.1em; } .app #cont01 img { width: 80%; } .app #cont02 { width: 90%; text-align: center; margin: 65px auto; } .app #cont02 h4 { font-size: 25px; font-weight: bold; border-top: 2px solid #231815; border-bottom: 2px solid #231815; padding: 20px 20px; display: inline-block; letter-spacing: 0.1em; } .app #cont02 img { width: 80%; } .app #cont02 p { text-align: center; margin: 80px 0 0 0; } #cont01-2 { width: 90%; } .app #cont03 .cont03_box, #cont01-1 .cont03_box{ width: 90%; min-height: 410px; border: 1px solid #4D4D4D; padding: 10px 10px 30px 10px; margin: 0 auto; box-sizing: border-box; position: relative; display: block !important; } .app #cont03 .cont03_box .pic, #cont01-1 .cont03_box .pic { width: 100%; padding: 0; margin: 0; } .app #cont03 .cont03_box .pic img, #cont01-1 .cont03_box .pic img { width: 100%; } .app #cont03 .cont03_box .inn, #cont01-1 .cont03_box .inn { width: 100%; margin: 0 0 0 0; text-align: center; } .app #cont03 .cont03_box .inn h4, #cont01-1 .cont03_box .inn h4 { font-size: 20px; text-align: center; width: 100%; margin: 24px 0 0 0; border-top: 2px solid #231815; border-bottom: 2px solid #231815; padding: 7px 0; font-weight: bold; line-height: 1.4; max-height: 3em; } .application #cont03 .cont03_box .inn p, #cont01-1 .cont03_box .inn p { padding: 10px 0 0 0 !important; margin: 0; text-align: left !important; width: 100% !important; } .application #cont03 .cont03_box p.ttl, #cont01-1 .cont03_box p.ttl { font-size: 20px !important; padding: 20px 0 0 0; margin: 0; font-weight: bold !important; line-height: 1.7 !important; text-align: center !important; } .app #cont03 .cont03_box .inn .link02 a, #cont01-1 .cont03_box .inn .link02 a { margin: 20px 0 0 0; border: 1px solid #000; background: url(/-/media/cojp/product/labelwriter/special/cube/img/global/btn_arrow.png) no-repeat right 10px center; background-size: 10px auto; display: inline-block; padding: 10px 50px; } .app #cont03 .cont03_box .inn .link02 a:hover, #cont01-1 .cont03_box .inn .link02 a:hover { text-decoration: none; } .app #cont04{ width: 90% !important; margin: 0 auto !important; } .app #cont04 .left{ width: 100% !important; margin-right: 0 !important; } .application #cont04 p.txt{ width: 90% !important; } /* PRODUCT スマホ */ .pro300 #main { width: 100%; height: 140px; background: url(/-/media/cojp/product/labelwriter/special/cube/img/content/pages/product_mainbg300.jpg) no-repeat center center; background-size: cover; text-align: center; margin: 0; padding: 0; } .pro710 #main { width: 100%; height: 140px; background: url(/-/media/cojp/product/labelwriter/special/cube/img/content/pages/product_mainbg710.jpg) no-repeat center center; background-size: cover; text-align: center; margin: 0; padding: 0; } .pro910 #main { width: 100%; height: 140px; background: url(/-/media/cojp/product/labelwriter/special/cube/img/content/pages/product_mainbg910.jpg) no-repeat center center; background-size: cover; text-align: center; margin: 0; padding: 0; } /*--スライダー--*/ .sliderWrapper { width: 90%; height: auto; margin: 40px auto 0 auto; position: relative; } .sliderWrapper img { width: 100%; } .sliderWrapper .sliderInner { } .sliderWrapper .sliderInner .contBox { width: 100%; float: left; } .bx-controls { } .bx-controls {} .bx-controls .bx-prev { display: block; text-indent: -99999px; width: 72px; height: 71px; position: absolute; top: 45%; left: 0px; background: url(/-/media/cojp/product/labelwriter/special/cube/img/content/pages/product_slider_prevbt.png) no-repeat center center; background-size: 40% auto; } .bx-controls .bx-next { display: block; text-indent: -99999px; width: 72px; height: 71px; position: absolute; top: 45%; right: 0px; background: url(/-/media/cojp/product/labelwriter/special/cube/img/content/pages/product_slider_nextbt.png) no-repeat center center; background-size: 40% auto; } .bx-controls .bx-prev:hover, .bx-controls .bx-next:hover { filter:alpha(opacity=50); -moz-opacity: 0.5; opacity: 0.5; } .bx-controls .bx-pager { width: 100%; text-align: center; position: absolute; bottom: 0; } .bx-controls .bx-pager .bx-pager-item { display: inline-block; width: 86px; height: 5px; padding: 0 0 0 0; margin: 0 5px 0 0; } .bx-controls .bx-pager .bx-pager-item .bx-pager-link { display: block; text-indent: -999999px; width: 100%; height: 5px; background-color: #BEBEBE; } .bx-controls .bx-pager .bx-pager-item .bx-pager-link a:hover, .bx-controls .bx-pager .bx-pager-item .bx-pager-link.active { background-color: #000000; } .product #cont02 { margin: 40px auto 0 auto; width: 90%; } .product.pro710 #cont01-2 .left, .product.pro910 #cont01-2 .left{ margin-left: 0; margin-bottom: 20px; } .product.pro710 #cont01-2 .left:last-child, .product.pro910 #cont01-2 .left:last-child{ margin-left: 0; margin-bottom: 0; } .product #cont02 .left, #cont01-2 .left{ width: 100% !important; border: 1px solid #4D4D4D; padding: 20px 20px 60px 20px; margin: 0 0 20px 0; box-sizing: border-box; } .product #cont02 .right { width: 100%; border: 1px solid #4D4D4D; float: right; padding: 20px 20px 60px 20px; margin: 0 0 20px 0; box-sizing: border-box; } .product #cont02 p.pic { text-align: center; } .product #cont02 p.pic img { width: 100%; } .product #cont02 h4 { font-size: 20px; text-align: center; width: 100%; margin: 40px auto 0 auto; border-top: 2px solid #231815; border-bottom: 2px solid #231815; padding: 20px 0; font-weight: bold; line-height: 1.5; } .product #cont02 p.txt { font-size: 17px; width: 100%; margin: 30px auto 0 auto; line-height: 1.7; text-align: justify; } .product.pro710 #cont02 p.link { padding: 40px 0 0 0; margin: 0 auto; width: 247px; } .product.pro710 #cont02 p.link img { width: 247px; } .product.pro710 #cont02 p.txt span { font-size: 80%; } .product.pro710 #cont02 .bottom_box { width: 100%; min-height: 410px; border: 1px solid #4D4D4D; float: left; padding: 10px 10px 30px 10px; margin: 0 auto 100px auto; box-sizing: border-box; position: relative; } .product.pro710 #cont02 .bottom_box .pic { width: 100%; padding: 0; margin: 0; } .product.pro710 #cont02 .bottom_box .pic img { width: 100%; } .product.pro710 #cont02 .bottom_box .inn { width: 100%; margin: 0 0 0 0; text-align: center; } .product.pro710 #cont02 .bottom_box .inn h4 { font-size: 20px; text-align: center; width: 100%; margin: 24px 0 0 0; border-top: 2px solid #231815; border-bottom: 2px solid #231815; padding: 7px 0; font-weight: bold; line-height: 1.4; max-height: 3em; } .product.pro710 #cont02 .bottom_box .inn .tit { font-size: 20px; padding: 20px 0 0 0; margin: 0; font-weight: bold; line-height: 1.7; } .product.pro710 #cont02 .bottom_box .inn .txt { padding: 10px 0 0 0; margin: 0; text-align: left; width: 100%; } .product.pro710 #cont02 .bottom_box .inn .link02 a { margin: 20px 0 0 0; border: 1px solid #000; background: url(/-/media/cojp/product/labelwriter/special/cube/img/global/btn_arrow.png) no-repeat right 10px center; background-size: 10px auto; display: inline-block; padding: 10px 50px; } .product.pro710 #cont02 .bottom_box .inn .link02 a:hover { text-decoration: none; } .product #cont03 .cont03tit { text-align: center; margin: 60px auto 0 auto; } .product #cont03 h4 { font-size: 24px; font-weight: bold; border-top: 2px solid #231815; border-bottom: 2px solid #231815; padding: 12px 15px; display: inline-block; letter-spacing: 0.1em; text-align: center; } .product #cont03 .box01 { width: 90%; margin: 30px auto 0 auto; } .product #cont03 img { width: 100%; } .product #cont03 .box02 { width: 90%; margin: 15px auto 0 auto; text-align: center; } .product #cont03 .box02 li { width: 46%; float: left; font-size: 20px; } .product #cont03 .box02 li.last { width: 46%; float: right; } .product #cont03 .box02 li.clicked span { background-color: #DCCFB2; } .product #cont03 li span { background-color: #F0F0F0; text-align: center; width: 100%; display: inline-block; margin: 0 auto; border-radius: 20px; /* CSS3草案 */ -webkit-border-radius: 20px; /* Safari,Google Chrome用 */ -moz-border-radius: 20px; /* Firefox用 */ } .product #cont03 li span a { width: 100%; padding: 20px 0; display: inline-block; } .product #cont04 { background-color: #F4EEE1; margin: 60px auto 0 auto; text-align: center; padding: 50px 0; } .product #cont04 h4 { font-size: 24px; font-weight: bold; border-top: 2px solid #231815; border-bottom: 2px solid #231815; padding: 12px 15px; display: inline-block; letter-spacing: 0.1em; text-align: center; } .product #cont04 .box { width: 90%; border: 1px solid #4D4D4D; margin: 60px auto 0 auto; padding: 0 0 40px 0; box-sizing: border-box; text-align: center; } .product #cont04 .box .inn { width: 100%; text-align: center; } .product #cont04 .box .img img { width: 100%; } .product #cont04 .box h5 { font-size: 20px; font-weight: bold; letter-spacing: 0.1em; line-height: 1.7; margin: 20px 0 0 0; } .product #cont04 .box p.txt { font-size: 15px; border-top: 2px solid #231815; border-bottom: 2px solid #231815; padding: 12px 80px; display: inline-block; letter-spacing: 0.1em; text-align: center; margin: 20px 0 50px 0; } .product.pro910 #cont04 .box h5{ margin-bottom: 20px; font-size: 18px; } .product #cont04 .box p.link a { background: #000 url(/-/media/cojp/product/labelwriter/special/cube/img/global/btn_arroww.png) no-repeat right 20px center; color: #fff; padding: 20px; } .product.pro910 #cont04 .box p.link { background: #000; width: 56%; margin: 0 auto; } .product.pro910 #cont04 .box p.link a{ display: block; } .product #cont05 { width: 90%; border: 1px solid #4D4D4D; margin: 50px auto 0 auto; text-align: center; box-sizing: border-box; padding: 0 0 50px 0; } .product #cont05 .img { width: 100%; } .product #cont05 .img img { width: 100%; } .product #cont05 .inn { width: 100%; text-align: center; } .product #cont05 .tit { font-size: 22px; font-weight: bold; letter-spacing: 0.1em; text-align: center; padding: 25px 0 0 0; } .product #cont05 .txt { font-size: 15px; letter-spacing: 0.1em; text-align: center; padding: 20px 0 50px 0; line-height: 1.5; } .product #cont05 p.link a { background: #000 url(/-/media/cojp/product/labelwriter/special/cube/img/global/btn_arroww.png) no-repeat right 20px center; color: #fff; padding: 20px 70px; } .product #cont06 { width: 90%; border: 1px solid #4D4D4D; margin: 50px auto 0 auto; text-align: center; box-sizing: border-box; padding: 0 0 50px 0; } .product #cont06 .img { width: 100%; } .product #cont06 .img img { width: 100%; } .product #cont06 .inn { width: 100%; text-align: center; } .product #cont06 .tit { font-size: 22px; font-weight: bold; letter-spacing: 0.1em; text-align: center; padding: 25px 0 0 0; } .product #cont06 .txt { font-size: 15px; letter-spacing: 0.1em; text-align: center; padding: 20px 0 50px 0; line-height: 1.5; } .product #cont06 p.link a { background: #000 url(/-/media/cojp/product/labelwriter/special/cube/img/global/btn_arroww.png) no-repeat right 20px center; color: #fff; padding: 20px 70px; } .product #cont04 p.link a:hover { text-decoration: none; } .product #cont05 p.link a:hover { text-decoration: none; } /* LABEL スマホ */ .label #main { width: 100%; height: 140px; background: url(/-/media/cojp/product/labelwriter/special/cube/img/content/pages/label_mainbg.jpg) no-repeat center center; background-size: cover; text-align: center; margin: 0; padding: 0; } .label #cont01 { width: 100%; background-color: #F4EEE1; margin: 50px 0 0 0; text-align: center; padding: 50px 0; } .label #cont01 h4 { font-size: 25px; font-weight: bold; border-top: 2px solid #231815; border-bottom: 2px solid #231815; padding: 20px 20px; display: inline-block; margin: 0 0 40px 0; letter-spacing: 0.1em; } .label #cont01 .inner { width: 100%; margin: 40px auto 0 auto; } .label #cont01 .inner .left { width: 100%; margin: 0 0 30px 0; } .label #cont01 .inner .right { width: 100%; margin: 0 0 30px 0; } .label #cont01 .inner img { width: 90%; } .label #cont01 .inner dl { width: 90%; margin: 0 auto; background-color: #DCCFB2; padding: 40px 0; text-align: left; } .label #cont01 .inner dt { font-size: 20px; font-weight: bold; text-align: center; } .label #cont01 .inner dd { width: 90%; margin: 20px auto 0 auto; text-align: justify; font-size: 17px; line-height: 1.5; } .label #cont02 { width: 100%; margin: 50px 0 0 0; text-align: center; } .label #cont02 h4 { font-size: 25px; font-weight: bold; border-top: 2px solid #231815; border-bottom: 2px solid #231815; padding: 12px 15px; display: inline-block; letter-spacing: 0.1em; } .label #cont02 p.lead { font-size: 17px; line-height: 2; margin: 30px auto 40px auto; letter-spacing: 0.1em; width: 90%; } .label #cont02 .label_box { width: 90%; margin: 20px auto 0 auto; border-top: 2px solid #231F20; text-align: left; } .label #cont02 .label_boxin { width: 90%; margin: 0 auto; } .label #cont02 .label_box .tit { border-top: 6px solid #231F20; border-bottom: 2px solid #231F20; margin: 6px 0 0 0; padding: 20px 10px; } .label #cont02 .label_box .tit h5 { font-size: 20px; line-height: 1.5; font-weight: bold; } .label #cont02 .label_box.box03 .tit h5 { position: relative; } .label #cont02 .label_box.box03 .tit h5 img { position: absolute; top: -75px; right: 0px; } .label #cont02 .label_box.box03 .tit h5 { height: 1.4em; } .label #cont02 .label_box .tit p { margin: 10px 0 0 0; font-size: 15px; line-height: 1.4; } .label #cont02 .label_box .desc { width: 100%; margin: 20px auto 0 auto; font-size: 14px; line-height: 1.7; } .label #cont02 .label_box .desc .left { width: 100%; } .label #cont02 .label_box .desc .right { width: 100%; margin: 30px 0 30px 0; } .label #cont02 .label_box.box04 .desc .left, .label #cont02 .label_box.box05 .desc .left { margin: 0 0 30px 0; } .label #cont02 .label_box .desc .inner { width: 55%; margin: 0 0 0 45% } .label #cont02 .label_box .desc dl { margin: 10px 0 0 0; line-height: 1.4; } .label #cont02 .label_box .desc dt { float: left; -moz-text-align-last: justify; text-align-last: justify; min-width: 80px; } .label #cont02 .label_box .desc dt::after { content: ":"; } .label #cont02 .label_box .desc .inner img { padding: 20px 0 0 0; } .label #cont02 .label_box.box01 .left { background: url(/-/media/cojp/product/labelwriter/special/cube/img/content/pages/label_01pic01.jpg) no-repeat left top; background-size: 40% auto; } .label #cont02 .label_box.box01 .right { background: url(/-/media/cojp/product/labelwriter/special/cube/img/content/pages/label_01pic02.jpg) no-repeat left top; background-size: 40% auto; } .label #cont02 .label_box.box02 .left { background: url(/-/media/cojp/product/labelwriter/special/cube/img/content/pages/label_02pic01.jpg) no-repeat left top; background-size: 40% auto; } .label #cont02 .label_box.box02 .right { background: url(/-/media/cojp/product/labelwriter/special/cube/img/content/pages/label_02pic02.jpg) no-repeat left top; background-size: 40% auto; } .label #cont02 .label_box.box03 .left { background: url(/-/media/cojp/product/labelwriter/special/cube/img/content/pages/label_03pic01.jpg) no-repeat left top; background-size: 40% auto; } .label #cont02 .label_box.box03 .right { background: url(/-/media/cojp/product/labelwriter/special/cube/img/content/pages/label_03pic02.jpg) no-repeat left top; background-size: 40% auto; } .label #cont02 .label_box.box04 .left { background: url(/-/media/cojp/product/labelwriter/special/cube/img/content/pages/label_04pic01.jpg) no-repeat left top; background-size: 40% auto; } .label #cont02 .label_box.box05 .left { background: url(/-/media/cojp/product/labelwriter/special/cube/img/content/pages/label_05pic01.jpg) no-repeat left top; background-size: 40% auto; } .label #cont02 .label_box.box06 .left { background: url(/-/media/cojp/product/labelwriter/special/cube/img/content/pages/label_06pic01.jpg) no-repeat left top; background-size: 40% auto; } .label #cont02 .label_box.box06 .right { background: url(/-/media/cojp/product/labelwriter/special/cube/img/content/pages/label_06pic02.jpg) no-repeat left top; background-size: 40% auto; } /* COLUMN スマホ */ .column #main { width: 100%; height: 140px; background: url(/-/media/cojp/product/labelwriter/special/cube/img/content/pages/column_mainbg.jpg) no-repeat center center; background-size: cover; text-align: center; margin: 0; padding: 0; } .column #cont01 { text-align: center; } .column #cont01 .img01 { text-align: center; } .column #cont01 .img01 img { margin: 40px 0 0 0; width: 40%; } .column #cont01 h4 { font-size: 25px; font-weight: bold; border-top: 2px solid #231815; border-bottom: 2px solid #231815; padding: 20px 20px; display: inline-block; margin: 128px 0 45px 0; letter-spacing: 0.1em; } .column #cont01 .box01 { width: 90%; margin: 0 auto 0 auto; } .column #cont01 .box01 .left { width: 100%; border: 1px solid #4D4D4D; padding: 20px 10px 30px 10px; margin: 0 0 40px 0; box-sizing: border-box; } .column #cont01 .box01 .right { width: 100%; border: 1px solid #4D4D4D; padding: 20px 10px 30px 10px; margin: 0 0 40px 0; box-sizing: border-box; } .column #cont01 .box01 .head { text-align: left; width: 100%; margin: 0 auto; } .column #cont01 .box01 .head .profile01 { width: 30%; float: left; } .column #cont01 .box01 .head .profile01 img { width: 100%; } .column #cont01 .box01 .head .profile02 { width: 65%; float: right; } .column #cont01 .box01 .head .profile02 p { font-size: 16px; padding: 30px 0 0 0; } .column #cont01 .box01 .head .profile02 h5 { font-size: 24px; font-weight: bold; padding: 10px 0 0 0; letter-spacing: 0.2em; } .column #cont01 .box01 .head .profile02 h5 span { font-size: 17px; } .column #cont01 .box01 .pic_area { margin: 20px auto 0 auto; width: 100%; } .column #cont01 .box01 .pic_area h6 { background-color: #000; color: #fff; font-size: 17px; line-height: 1.5; padding: 10px 10px; } .column #cont01 .box01 .bg01 img, .column #cont01 .box01 .bg02 img, .column #cont01 .box01 .bg03 img, .column #cont01 .box01 .bg04 img { width: 100%; } .column #cont01 .box01 .tit { width: 100%; margin: 24px auto 0 auto; text-align: left; font-size: 16px; line-height: 1.7; text-align: justify; } .column #cont02 { text-align: center; background-color: #F4EEE1; width: 100%; margin: 30px 0 0 0; padding: 50px 0; } .column #cont02 h4 { font-size: 22px; font-weight: bold; border-top: 2px solid #231815; border-bottom: 2px solid #231815; padding: 12px 15px; display: inline-block; letter-spacing: 0.1em; text-align: center; margin: 0 auto 0 auto; } .column #cont02 .box { border: 1px solid #4D4D4D; box-sizing: border-box; width: 90%; background: #fff; margin: 50px auto 0 auto; text-align: left; padding: 20px; min-height: 260px; background-size: 25% auto; } .column #cont02 .box p { width: 100%; margin: 0 auto; text-align: left; } .column #cont02 .box p img { width: 50%; } .column #cont02 .box .txt01 { font-size: 24px; font-weight: bold; padding: 30px 0 0 0; width: 100%; text-align: left; } .column #cont02 .box .txt02 { padding: 20px 0 0 0; line-height: 1.7; text-align: left; font-size: 14px; } .column #cont02 .box .link { font-size: 14px; padding: 20px 0 0 0; line-height: 1.7; text-align: left; } /* Instagram スマホ */ .instagram #main { width: 100%; height: 140px; background: url(/-/media/cojp/product/labelwriter/special/cube/img/content/pages/insta_mainbg.jpg) no-repeat center center; background-size: cover; text-align: center; margin: 0; padding: 0; } .instagram #cont01 { text-align: center; } .instagram #lead_area h3 { line-height: 1.7; letter-spacing: 0; } .instagram #cont01 { width: 100%; background-color: #F4EEE1; margin: 50px 0 0 0; text-align: center; padding: 0 0; } .instagram #cont01 img { width: 80%; } .instagram #cont01 h4 { font-size: 25px; font-weight: bold; border-top: 2px solid #231815; border-bottom: 2px solid #231815; padding: 20px 20px; display: inline-block; margin: 58px 0 35px 0; letter-spacing: 0.1em; } .instagram #cont01 .inner { margin: 42px auto 0 auto; text-align: center; } .instagram #cont01 .inner li.area01 { margin: 0 0 30px 0; } .instagram #cont01 .inner li.area02 { margin: 0 0 50px 0; } .instagram #cont01 .inner li.area03 { padding: 0 0 50px 0; } .instagram #cont02 { width: 100%; background-color: #fff; margin: 30px 0 0 0; text-align: center; padding: 30px 0; } .instagram #cont02 h4 { font-size: 25px; font-weight: bold; border-top: 2px solid #231815; border-bottom: 2px solid #231815; padding: 20px 20px; display: inline-block; margin: 10px 0 25px 0; letter-spacing: 0.1em; } .instagram #cont02 .box01 { width: 100%; margin: 20px auto 0 auto; } .instagram #cont02 .box01 .pic01, .instagram #cont02 .box01 .pic02, .instagram #cont02 .box01 .pic03, .instagram #cont02 .box01 .pic04, .instagram #cont02 .box01 .pic05, .instagram #cont02 .box01 .pic06, .instagram #cont02 .box01 .pic07, .instagram #cont02 .box01 .pic08, .instagram #cont02 .box01 .pic09, .instagram #cont02 .box01 .pic10, .instagram #cont02 .box01 .pic11, .instagram #cont02 .box01 .pic12, .instagram #cont02 .box01 .pic13, .instagram #cont02 .box01 .pic14, .instagram #cont02 .box01 .pic15 { width: 95%; border: 1px solid #4D4D4D; padding: 15px 5px 30px 5px; margin: 0 auto 10px auto; box-sizing: border-box; } .instagram #cont02 .box01 .pic01 img, .instagram #cont02 .box01 .pic02 img, .instagram #cont02 .box01 .pic03 img, .instagram #cont02 .box01 .pic04 img, .instagram #cont02 .box01 .pic05 img, .instagram #cont02 .box01 .pic06 img, .instagram #cont02 .box01 .pic07 img, .instagram #cont02 .box01 .pic08 img, .instagram #cont02 .box01 .pic09 img, .instagram #cont02 .box01 .pic10 img, .instagram #cont02 .box01 .pic11 img, .instagram #cont02 .box01 .pic12 img, .instagram #cont02 .box01 .pic13 img, .instagram #cont02 .box01 .pic14 img, .instagram #cont02 .box01 .pic15 img { width: 95%; } /* 活用事例 スマホ */ .case #main { width: 100%; height: 140px; margin: 0 auto; background: url(/-/media/cojp/product/labelwriter/special/cube/img/content/pages/case_mainbg.jpg) no-repeat center top; background-size: cover; text-align: center; margin: 0; padding: 0; } .case #shops { width: 100%; background-color: #F4EEE1; margin: 60px 0 0 0; padding: 60px 0; } .case #shops .box { width: 90%; margin: 0 auto; } .case #shops .title_area{ text-align: center; } .case #shops .title_area h4 { font-size: 24px; font-weight: bold; border-top: 2px solid #231815; border-bottom: 2px solid #231815; padding: 12px 15px; display: inline-block; letter-spacing: 0.1em; text-align: center; } .case #shops .shoplist_area ul { display: flex; flex-wrap: wrap; box-sizing: border-box; align-items: center; justify-content: space-between; width: 100%; margin: 0 auto 0 auto; } .case #shops .shoplist_area ul li { width: 47%; text-align: center; display: block; margin: 5% 0 0 0; } .case #shops .shoplist_area ul li a { width: 100%; background-color: #000; display: block; padding: 8% 5% 5% 5%; color: #fff; box-sizing: border-box; } .case #shops .shoplist_area ul li a p:nth-of-type(1) { font-size: 11px; line-height: 1.8em; letter-spacing: 0.1em; font-weight: 500; } .case #shops .shoplist_area ul li a p:nth-of-type(2) { font-size: 17px; line-height: 1.3em; font-weight: 500; } .case #shops .shoplist_area ul li a p:nth-of-type(2)::after { content: "▼"; display: block; font-size: 8px; } .threelead { text-align: left; font-size: 25px; font-weight: 700; letter-spacing: -0.3em; } .case #shops .info_area { width: 100%; margin: 50px auto 0 auto; background-color: #fff; border: 1px solid #4D4D4D; box-sizing: border-box; padding: 10px; } .case #shops .info_area .img01 { width: 100%; } .case #shops .info_area .img01 img{ width: 100%; } .case #shops .info_area .right{ width: 100%; margin:10px 0 0 0; padding: 0; } .case #shops .info_area .right h5 { border-top: 3px solid #000; border-bottom: 3px solid #000; text-align: center; padding: 15px 0; font-size: 24px; font-weight: bold; line-height: 1.6; } .case #shops .info_area .right h5 .case{ font-size: 16px; } .case #shops .info_area .right h5 .shop_name{ font-size: 17px; } .case #shops .info_area .right h5 .name{ font-size: 26px; } .case #shops .info_area .right .img02 { margin: 10px 0 20px 0; width:50%; float:left; } .case #shops .info_area .right .img03{ margin: 10px 0 20px 0; width:50%; float:right; } .case #shops .info_area .right .img02 img, .case #shops .info_area .right .img03 img{ width:100%; } .case #shops p.link{ margin:30px auto; text-align:center; } .case #shops p.link a { background: #000 url(/-/media/cojp/product/labelwriter/special/cube/img/global/btn_arroww.png) no-repeat right 20px center; color: #fff; padding: 20px 70px; } .case .cont01 { width: 100%; background-color: #FFF; margin: 60px 0 0 0; padding: 60px 0; } .case .cont01 .box01 { width: 90%; margin: 0 auto; } .case .cont01 .box02 { width: 90%; margin: 50px auto 0 auto; } .case .cont01 .box01 .title_area, .case .cont01 .box02 .title_area { width: 100%; margin: 0 auto; border-top: 2px solid #000; } .case .cont01 .box01 .title_area h4, .case .cont01 .box02 .title_area h4 { font-size: 25px; border-top: 6px solid #000; margin: 2px 0 0 0; text-align: center; padding: 30px 0 0 0; font-weight: bold; line-height: 1.75 } .case .cont01 .box01 .title_area p, .case .cont01 .box02 .title_area p { text-align: center; font-size: 18px; font-weight: bold; padding: 20px 0 30px 0; border-bottom: 2px solid #000; } .case .cont01 .box01 .info_area, .case .cont01 .box02 .info_area { width: 100%; margin: 50px auto 0 auto; background-color: #fff; border: 1px solid #4D4D4D; box-sizing: border-box; padding: 10px 10px 50px 10px; } .case .cont01 .box01 .info_area .img01, .case .cont01 .box02 .info_area .img01 { width: 100%; } .case .cont01 .box01 .info_area .img01 img, .case .cont01 .box02 .info_area .img01 img { width: 100%; } .case .cont01 .box01 .info_area .right, .case .cont01 .box02 .info_area .right { width: 100%; float: left; margin: 0 0 0 0; padding: 20px 0 0 0; } .case .cont01 .box01 .info_area .right h5, .case .cont01 .box02 .info_area .right h5 { border-top: 3px solid #000; border-bottom: 3px solid #000; text-align: center; padding: 20px 0; font-size: 20px; font-weight: bold; line-height: 1.6; } .case .cont01 .box01 .info_area .right .txt, .case .cont01 .box02 .info_area .right .txt { padding: 20px 0; font-size: 14px; line-height: 1.7; } .case .cont01 .box01 .info_area .right .img02, .case .cont01 .box02 .info_area .right .img02 { text-align: center; padding: 10px 0 0 0; } .case .cont01 .box01 .info_area .right .img02 img { width: 40%; } .case .cont01 .box02 .info_area .right .img02 img { width: 80%; } .case .cont01 .tmp_box { width: 100%; margin: 50px auto 0 auto; border-top: 2px solid #000; } .case .cont01 .tmp_box h5 { text-align: center; } .case .cont01 .tmp_box h5 span { position: relative; top: -0.5em; font-size: 20px; font-weight: bold; background-color: #FFF; padding: 0 20px; } .case .cont01 .tmp_box .inn { width: 100%; margin: 20px 0 0 0; } .case .cont01 .tmp_box .inn img { width: 100%; } .case .cont01 .tmp_box .inn .left { width: 100%; margin: 0 0 20px 0; } .case .cont01 .tmp_box .inn .right { width: 100%; margin: 0 0 20px 0; } .case .cont01 .tmp_box .inn dl { margin: 10px 0 0 0; font-size: 14px; line-height: 1.7; } .case .cont01 .tmp_box .inn dt { float: left; min-width: 5em; -moz-text-align-last: justify; text-align-last: justify; } .case .cont01 .tmp_box .inn dd::before { content: ":"; } .case .cont01_2 { width: 100%; background-color: #FFF; margin: 60px 0 0 0; padding: 60px 0; } .case .cont01_2 .box01 { width: 90%; margin: 0 auto; } .case .cont01_2 .box02 { width: 90%; margin: 50px auto 0 auto; } .case .cont01_2 .box01 .title_area, .case .cont01_2 .box02 .title_area { width: 100%; margin: 0 auto; border-top: 2px solid #000; } .case .cont01_2 .box01 .title_area h4, .case .cont01_2 .box02 .title_area h4 { font-size: 25px; border-top: 6px solid #000; margin: 2px 0 0 0; text-align: center; padding: 30px 0 0 0; font-weight: bold; line-height: 1.75 } .case .cont01_2 .box01 .title_area p, .case .cont01_2 .box02 .title_area p { text-align: center; font-size: 18px; font-weight: bold; padding: 20px 0 30px 0; border-bottom: 2px solid #000; } .case .cont01_2 .box01 .info_area, .case .cont01_2 .box02 .info_area { width: 100%; margin: 50px auto 0 auto; background-color: #fff; border: 1px solid #4D4D4D; box-sizing: border-box; padding: 10px 10px 50px 10px; } .case .cont01_2 .box01 .info_area .img01, .case .cont01_2 .box02 .info_area .img01 { width: 100%; } .case .cont01_2 .box01 .info_area .img01 img, .case .cont01_2 .box02 .info_area .img01 img { width: 100%; } .case .cont01_2 .box01 .info_area .right, .case .cont01_2 .box02 .info_area .right { width: 100%; float: left; margin: 0 0 0 0; padding: 20px 0 0 0; } .case .cont01_2 .box01 .info_area .right h5, .case .cont01_2 .box02 .info_area .right h5 { border-top: 3px solid #000; border-bottom: 3px solid #000; text-align: center; padding: 20px 0; font-size: 20px; font-weight: bold; line-height: 1.6; } .case .cont01_2 .box01 .info_area .right .txt, .case .cont01_2 .box02 .info_area .right .txt { padding: 20px 0; font-size: 14px; line-height: 1.7; } .case .cont01_2 .box01 .info_area .right .img02, .case .cont01_2 .box02 .info_area .right .img02 { text-align: center; padding: 10px 0 0 0; } .case .cont01_2 .box01 .info_area .right .img02 img { width: 40%; } .case .cont01_2 .box02 .info_area .right .img02 img { width: 80%; } .case .cont01_2 .tmp_box { width: 100%; margin: 50px auto 0 auto; border-top: 2px solid #000; } .case .cont01_2 .tmp_box h5 { text-align: center; } .case .cont01_2 .tmp_box h5 span { position: relative; top: -0.5em; font-size: 20px; font-weight: bold; background-color: #FFF; padding: 0 20px; } .case .cont01_2 .tmp_box .inn { width: 100%; margin: 20px 0 0 0; } .case .cont01_2 .tmp_box .inn img { width: 100%; } .case .cont01_2 .tmp_box .inn .left { width: 100%; margin: 0 0 20px 0; } .case .cont01_2 .tmp_box .inn .right { width: 100%; margin: 0 0 20px 0; } .case .cont01_2 .tmp_box .inn dl { margin: 10px 0 0 0; font-size: 14px; line-height: 1.7; } .case .cont01_2 .tmp_box .inn dt { float: left; min-width: 5em; -moz-text-align-last: justify; text-align-last: justify; } .case .cont01_2 .tmp_box .inn dd::before { content: ":"; } .case .cont01_3 { width: 100%; background-color: #FFF; margin: 60px 0 0 0; padding: 60px 0; } .case .cont01_3 .box01 { width: 90%; margin: 0 auto; } .case .cont01_3 .box02 { width: 90%; margin: 50px auto 0 auto; } .case .cont01_3 .box01 .title_area, .case .cont01_3 .box02 .title_area { width: 100%; margin: 0 auto; border-top: 2px solid #000; } .case .cont01_3 .box01 .title_area h4, .case .cont01_3 .box02 .title_area h4 { font-size: 25px; border-top: 6px solid #000; margin: 2px 0 0 0; text-align: center; padding: 30px 0 0 0; font-weight: bold; line-height: 1.75 } .case .cont01_3 .box01 .title_area p, .case .cont01_3 .box02 .title_area p { text-align: center; font-size: 18px; font-weight: bold; padding: 20px 0 30px 0; border-bottom: 2px solid #000; } .case .cont01_3 .box01 .info_area, .case .cont01_3 .box02 .info_area { width: 100%; margin: 50px auto 0 auto; background-color: #fff; border: 1px solid #4D4D4D; box-sizing: border-box; padding: 10px 10px 50px 10px; } .case .cont01_3 .box01 .info_area .img01, .case .cont01_3 .box02 .info_area .img01 { width: 100%; } .case .cont01_3 .box01 .info_area .img01 img, .case .cont01_3 .box02 .info_area .img01 img { width: 100%; } .case .cont01_3 .box01 .info_area .right, .case .cont01_3 .box02 .info_area .right { width: 100%; float: left; margin: 0 0 0 0; padding: 20px 0 0 0; } .case .cont01_3 .box01 .info_area .right h5, .case .cont01_3 .box02 .info_area .right h5 { border-top: 3px solid #000; border-bottom: 3px solid #000; text-align: center; padding: 20px 0; font-size: 20px; font-weight: bold; line-height: 1.6; } .case .cont01_3 .box01 .info_area .right .txt, .case .cont01_3 .box02 .info_area .right .txt { padding: 20px 0; font-size: 14px; line-height: 1.7; } .case .cont01_3 .box01 .info_area .right .img02, .case .cont01_3 .box02 .info_area .right .img02 { text-align: center; padding: 10px 0 0 0; } .case .cont01_3 .box01 .info_area .right .img02 img { width: 40%; } .case .cont01_3 .box02 .info_area .right .img02 img { width: 80%; } .case .cont01_3 .tmp_box { width: 100%; margin: 50px auto 0 auto; border-top: 2px solid #000; } .case .cont01_3 .tmp_box h5 { text-align: center; } .case .cont01_3 .tmp_box h5 span { position: relative; top: -0.5em; font-size: 20px; font-weight: bold; background-color: #FFF; padding: 0 20px; } .case .cont01_3 .tmp_box .inn { width: 100%; margin: 20px 0 0 0; } .case .cont01_3 .tmp_box .inn img { width: 100%; } .case .cont01_3 .tmp_box .inn .left { width: 100%; margin: 0 0 20px 0; } .case .cont01_3 .tmp_box .inn .right { width: 100%; margin: 0 0 20px 0; } .case .cont01_3 .tmp_box .inn dl { margin: 10px 0 0 0; font-size: 14px; line-height: 1.7; } .case .cont01_3 .tmp_box .inn dt { float: left; min-width: 5em; -moz-text-align-last: justify; text-align-last: justify; } .case .cont01_3 .tmp_box .inn dd::before { content: ":"; } .case .cont01_4 { width: 100%; background-color: #FFF; margin: 60px 0 0 0; padding: 60px 0; } .case .cont01_4 .box01 { width: 90%; margin: 0 auto; } .case .cont01_4 .box02 { width: 90%; margin: 50px auto 0 auto; } .case .cont01_4 .box01 .title_area, .case .cont01_4 .box02 .title_area { width: 100%; margin: 0 auto; border-top: 2px solid #000; } .case .cont01_4 .box01 .title_area h4, .case .cont01_4 .box02 .title_area h4 { font-size: 25px; border-top: 6px solid #000; margin: 2px 0 0 0; text-align: center; padding: 30px 0 0 0; font-weight: bold; line-height: 1.75 } .case .cont01_4 .box01 .title_area p, .case .cont01_4 .box02 .title_area p { text-align: center; font-size: 18px; font-weight: bold; padding: 20px 0 30px 0; border-bottom: 2px solid #000; } .case .cont01_4 .box01 .info_area, .case .cont01_4 .box02 .info_area { width: 100%; margin: 50px auto 0 auto; background-color: #fff; border: 1px solid #4D4D4D; box-sizing: border-box; padding: 10px 10px 50px 10px; } .case .cont01_4 .box01 .info_area .img01, .case .cont01_4 .box02 .info_area .img01 { width: 100%; } .case .cont01_4 .box01 .info_area .img01 img, .case .cont01_4 .box02 .info_area .img01 img { width: 100%; } .case .cont01_4 .box01 .info_area .right, .case .cont01_4 .box02 .info_area .right { width: 100%; float: left; margin: 0 0 0 0; padding: 20px 0 0 0; } .case .cont01_4 .box01 .info_area .right h5, .case .cont01_4 .box02 .info_area .right h5 { border-top: 3px solid #000; border-bottom: 3px solid #000; text-align: center; padding: 20px 0; font-size: 20px; font-weight: bold; line-height: 1.6; } .case .cont01_4 .box01 .info_area .right .txt, .case .cont01_4 .box02 .info_area .right .txt { padding: 20px 0; font-size: 14px; line-height: 1.7; } .case .cont01_4 .box01 .info_area .right .img02, .case .cont01_4 .box02 .info_area .right .img02 { text-align: center; padding: 10px 0 0 0; } .case .cont01_4 .box01 .info_area .right .img02 img { width: 40%; } .case .cont01_4 .box02 .info_area .right .img02 img { width: 80%; } .case .cont01_4 .tmp_box { width: 100%; margin: 50px auto 0 auto; border-top: 2px solid #000; } .case .cont01_4 .tmp_box h5 { text-align: center; } .case .cont01_4 .tmp_box h5 span { position: relative; top: -0.5em; font-size: 20px; font-weight: bold; background-color: #FFF; padding: 0 20px; } .case .cont01_4 .tmp_box .inn { width: 100%; margin: 20px 0 0 0; } .case .cont01_4 .tmp_box .inn img { width: 100%; } .case .cont01_4 .tmp_box .inn .left { width: 100%; margin: 0 0 20px 0; } .case .cont01_4 .tmp_box .inn .right { width: 100%; margin: 0 0 20px 0; } .case .cont01_4 .tmp_box .inn dl { margin: 10px 0 0 0; font-size: 14px; line-height: 1.7; } .case .cont01_4 .tmp_box .inn dt { float: left; min-width: 5em; -moz-text-align-last: justify; text-align-last: justify; } .case .cont01_4 .tmp_box .inn dd::before { content: ":"; } /* 活用事例 ショップ紹介 SP */ .shops .left, .shops .left{ clear: both; } .shops #lead_area .title_area{ width: 100%; margin: 20% auto 5% auto; border-top: 2px solid #000 } .shops #lead_area .title_area h3{ font-size: 30px; border-top: 6px solid #000; margin: 2px 0 0 0; text-align: center; padding: 10% 0 0 0; font-weight: bold; } .shops #lead_area .title_area span{ font-size: 18px; } .shops #lead_area .title_area p.shop_name{ text-align: center; font-size: 20px; font-weight: bold; padding: 0 0 10% 0; border-bottom: 2px solid #000; margin:0; } .shops #lead_area .main { width: 100%; } .shops #lead_area .main img { width: 100%; } .shops #lead_area .prof_box{ margin:5% auto 0 auto; width:100%; border: 1px solid #4D4D4D; box-sizing: border-box; padding: 10px; } .shops .flexbox { display: flex; flex-wrap: wrap; justify-content: space-between; } .shops #lead_area .prof_box .img01 { width:35%; margin:0; } .shops #lead_area .prof_box .img01 img { width:100%; margin:0; } .shops #lead_area .prof_box .right{ width:60%; text-align:left; } .shops #lead_area .prof_box .right .shop_name{ font-size:13px; margin:5% 0 0 0; line-height:1.8; } .shops #lead_area .prof_box .right .name{ margin:0; font-size:23px; line-height:1.5; letter-spacing:0.1em; } .shops #lead_area .prof_box .right .name span{ font-size:20px; } .shops #lead_area .prof_box .right .txt{ font-size:14px; margin:5px 0 0; line-height:1.8; } .shops #lead_area2 .title_area{ width: 100%; margin: 20% auto 5% auto; border-top: 2px solid #000 } .shops #lead_area2 .title_area h3{ font-size: 30px; border-top: 6px solid #000; margin: 2px 0 0 0; text-align: center; padding: 10% 0 0 0; font-weight: bold; } .shops #lead_area2 .title_area span{ font-size: 18px; } .shops #lead_area2 .title_area p.shop_name{ text-align: center; font-size: 20px; font-weight: bold; padding: 0 0 10% 0; border-bottom: 2px solid #000; margin:0; } .shops #lead_area2 .main { width: 100%; } .shops #lead_area2 .main img { width: 100%; } .shops #lead_area2 .prof_box{ margin:5% auto 0 auto; width:100%; border: 1px solid #4D4D4D; box-sizing: border-box; padding: 10px 10px 20px 10px; } .shops #lead_area2 .prof_box .img01 { width:35%; margin:0; } .shops #lead_area2 .prof_box .img01 img { width:100%; margin:0; } .shops #lead_area2 .prof_box .right{ width:100%; text-align:left; } .shops #lead_area2 .prof_box .right .shop_name{ font-size:13px; margin:5% 0 0 0; line-height:1.8; } .shops #lead_area2 .prof_box .right .name{ margin:0; font-size:23px; line-height:1.5; letter-spacing:0.1em; } .shops #lead_area2 .prof_box .right .name span{ font-size:20px; } .shops #lead_area2 .prof_box .right .txt{ font-size:14px; margin:5px 0 0; line-height:1.8; } .shops .cont01{ width: 90%; background-color: #FFF; margin: 5% auto 0 auto; padding: 0 0 10% 0; } .shops .cont01 .box{ width:100%; margin:30px auto 0px auto; } .shops .cont01 .box01, .shops .cont01 .box02{ width:100%; } .shops .cont01 .box02 img{ width:100%; } .shops .cont01 .box .left{ } .shops .cont01 .box .right{ } .shops .cont01 .box h4{ font-weight:bold; font-size:24px; line-height:1.8em; } .shops .cont01 .box img { width: 100%; } .shops .cont01 .box .txt{ margin:10px 0 20px 0; font-size:14px; width:100%; line-height:2em; } .shops .cont01 .tmp_box { width: 100%; margin: 30% auto 0 auto; border-top: 2px solid #000; } .shops .cont01 .tmp_box img { width: 100%; } .shops .cont01 .tmp_box h5 { text-align: center; background-color: #fff; } .shops .cont01 .tmp_box h5 span { position: relative; top: -1.5em; font-size: 20px; font-weight: bold; background-color: #FFF; padding: 0 20px 0 0; line-height: 1.5em; } .shops .cont01 .tmp_box .inn .left p:nth-of-type(2), .shops .cont01 .tmp_box .inn .right p:nth-of-type(2){ display: block; margin: 5% 0 0 0; font-size: 13px; line-height: 1.8em; height: 4.5rem; } .shops .cont01 .tmp_box .inn { width: 100%; margin: 40px 0 0 0; } .shops .cont01 .tmp_box .inn .left { width: 100%; } .shops .cont01 .tmp_box .inn .right { width: 100%; } .shops .cont01 .tmp_box .inn dl { margin: 10px 0 0 0; font-size: 14px; line-height: 1.7; } .shops .cont01 .tmp_box .inn dt { min-width: 5em; -moz-text-align-last: justify; text-align-last: justify; } .shops .cont01 .tmp_box .inn dd::before { content: ":"; } .shops .cont01 .tmp_box .inn img { width: 100%; height: auto; } .shops .cont01 .box02 .info_area{ width: 100%; margin: 50px auto 0 auto; background-color: #fff; border: 1px solid #4D4D4D; box-sizing: border-box; padding: 10px; } .shops .cont01 .box02 .info_area .left{ width:100%; } .shops .cont01 .box02 .info_area .left img{ width:100%; } .shops .cont01 .box02 .info_area .left .img02{ margin-top:10px; } .shops .cont01 .box02 .info_area .right{ width:100%; } .shops .cont01 .box02 .info_area .right h5{ border-top: 3px solid #000; border-bottom: 3px solid #000; text-align: center; padding: 20px 0; font-size: 27px; font-weight: bold; line-height: 1.6; } .shops .cont01 .box02 .info_area .right p.title{ font-size:20px; font-weight:bold; margin: 30px auto 0 auto; line-height:1.5; width: 90%; } .shops .cont01 .box02 .info_area .right p.txt{ margin: 0 auto 0 auto; width: 90%; } .shops .cont01_2{ width: 90%; background-color: #FFF; margin: 5% auto 0 auto; padding: 0 0 10% 0; } .shops .cont01_2 .box{ width:100%; margin:30px auto 0px auto; } .shops .cont01_2 .box01, .shops .cont01_2 .box02{ width:100%; } .shops .cont01_2 .box02 img{ width:100%; } .shops .cont01_2 .box .left{ } .shops .cont01_2 .box .right{ } .shops .cont01_2 .box h4{ font-weight:bold; font-size:24px; line-height:1.8em; } .shops .cont01_2 .box img { width: 100%; } .shops .cont01_2 .box .txt{ margin:10px 0 20px 0; font-size:14px; width:100%; line-height:2em; } .shops .cont01_2 .tmp_box { width: 100%; margin: 30% auto 0 auto; border-top: 2px solid #000; } .shops .cont01_2 .tmp_box img { width: 100%; } .shops .cont01_2 .tmp_box h5 { text-align: center; background-color: #fff; } .shops .cont01_2 .tmp_box h5 span { position: relative; top: -1.5em; font-size: 20px; font-weight: bold; background-color: #FFF; padding: 0 20px 0 0; line-height: 1.5em; } .shops .cont01_2 .tmp_box .inn .left p:nth-of-type(2), .shops .cont01_2 .tmp_box .inn .right p:nth-of-type(2){ display: block; margin: 5% 0 0 0; font-size: 13px; line-height: 1.8em; height: 4.5rem; } .shops .cont01_2 .tmp_box .inn { width: 100%; margin: 40px 0 0 0; } .shops .cont01_2 .tmp_box .inn .left { width: 100%; } .shops .cont01_2 .tmp_box .inn .right { width: 100%; } .shops .cont01_2 .tmp_box .inn dl { margin: 10px 0 0 0; font-size: 14px; line-height: 1.7; } .shops .cont01_2 .tmp_box .inn dt { min-width: 5em; -moz-text-align-last: justify; text-align-last: justify; } .shops .cont01_2 .tmp_box .inn dd::before { content: ":"; } .shops .cont01_2 .tmp_box .inn img { width: 100%; height: auto; } .shops .cont01_2 .box02 .info_area{ width: 100%; margin: 50px auto 0 auto; background-color: #fff; border: 1px solid #4D4D4D; box-sizing: border-box; padding: 10px; } .shops .cont01_2 .box02 .info_area .left{ width:100%; } .shops .cont01_2 .box02 .info_area .left img{ width:100%; } .shops .cont01_2 .box02 .info_area .left .img02{ margin-top:10px; } .shops .cont01_2 .box02 .info_area .right{ width:100%; } .shops .cont01_2 .box02 .info_area .right h5{ border-top: 3px solid #000; border-bottom: 3px solid #000; text-align: center; padding: 20px 0; font-size: 27px; font-weight: bold; line-height: 1.6; } .shops .cont01_2 .box02 .info_area .right p.title{ font-size:20px; font-weight:bold; margin: 30px auto 0 auto; line-height:1.5; width: 90%; } .shops .cont01_2 .box02 .info_area .right p.txt{ margin: 0 auto 0 auto; width: 90%; } .shops .cont01_3{ width: 90%; background-color: #FFF; margin: 5% auto 0 auto; padding: 0 0 10% 0; } .shops .cont01_3 .box{ width:100%; margin:30px auto 0px auto; } .shops .cont01_3 .box01, .shops .cont01_3 .box02{ width:100%; } .shops .cont01_3 .box02 img{ width:100%; } .shops .cont01_3 .box .left{ } .shops .cont01_3 .box .right{ } .shops .cont01_3 .box h4{ font-weight:bold; font-size:24px; line-height:1.8em; } .shops .cont01_3 .box img { width: 100%; } .shops .cont01_3 .box .txt{ margin:10px 0 20px 0; font-size:14px; width:100%; line-height:2em; } .shops .cont01_3 .tmp_box { width: 100%; margin: 30% auto 0 auto; border-top: 2px solid #000; } .shops .cont01_3 .tmp_box img { width: 100%; } .shops .cont01_3 .tmp_box h5 { text-align: center; background-color: #fff; } .shops .cont01_3 .tmp_box h5 span { position: relative; top: -1.5em; font-size: 20px; font-weight: bold; background-color: #FFF; padding: 0 20px 0 0; line-height: 1.5em; } .shops .cont01_3 .tmp_box .inn .left p:nth-of-type(2), .shops .cont01_3 .tmp_box .inn .right p:nth-of-type(2){ display: block; margin: 5% 0 0 0; font-size: 13px; line-height: 1.8em; height: 4.5rem; } .shops .cont01_3 .tmp_box .inn { width: 100%; margin: 40px 0 0 0; } .shops .cont01_3 .tmp_box .inn .left { width: 100%; } .shops .cont01_3 .tmp_box .inn .right { width: 100%; } .shops .cont01_3 .tmp_box .inn dl { margin: 10px 0 0 0; font-size: 14px; line-height: 1.7; } .shops .cont01_3 .tmp_box .inn dt { min-width: 5em; -moz-text-align-last: justify; text-align-last: justify; } .shops .cont01_3 .tmp_box .inn dd::before { content: ":"; } .shops .cont01_3 .tmp_box .inn img { width: 100%; height: auto; } .shops .cont01_3 .box02 .info_area{ width: 100%; margin: 50px auto 0 auto; background-color: #fff; border: 1px solid #4D4D4D; box-sizing: border-box; padding: 10px; } .shops .cont01_3 .box02 .info_area .left{ width:100%; } .shops .cont01_3 .box02 .info_area .left img{ width:100%; } .shops .cont01_3 .box02 .info_area .left .img02{ margin-top:10px; } .shops .cont01_3 .box02 .info_area .right{ width:100%; } .shops .cont01_3 .box02 .info_area .right h5{ border-top: 3px solid #000; border-bottom: 3px solid #000; text-align: center; padding: 20px 0; font-size: 27px; font-weight: bold; line-height: 1.6; } .shops .cont01_3 .box02 .info_area .right p.title{ font-size:20px; font-weight:bold; margin: 30px auto 0 auto; line-height:1.5; width: 90%; } .shops .cont01_3 .box02 .info_area .right p.txt{ margin: 0 auto 0 auto; width: 90%; } .shops .cont01_4{ width: 90%; background-color: #FFF; margin: 5% auto 0 auto; padding: 0 0 10% 0; } .shops .cont01_4 .box{ width:100%; margin:30px auto 0px auto; } .shops .cont01_4 .box01, .shops .cont01_4 .box02{ width:100%; } .shops .cont01_4 .box02 img{ width:100%; } .shops .cont01_4 .box .left{ } .shops .cont01_4 .box .right{ } .shops .cont01_4 .box h4{ font-weight:bold; font-size:24px; line-height:1.8em; } .shops .cont01_4 .box img { width: 100%; } .shops .cont01_4 .box .txt{ margin:10px 0 20px 0; font-size:14px; width:100%; line-height:2em; } .shops .cont01_4 .tmp_box .inn { width: 100%; margin: 40px 0 0 0; } .shops .cont01_4 .tmp_box .inn .left { width: 100%; } .shops .cont01_4 .tmp_box .inn .right { width: 100%; } .shops .cont01_4 .tmp_box .inn dl { margin: 10px 0 0 0; font-size: 14px; line-height: 1.7; } .shops .cont01_4 .tmp_box .inn dt { min-width: 5em; -moz-text-align-last: justify; text-align-last: justify; } .shops .cont01_4 .tmp_box .inn dd::before { content: ":"; } .shops .cont01_4 .tmp_box .inn img { width: 100%; height: auto; } .shops .cont01_4 .box02 .info_area{ width: 100%; margin: 50px auto 0 auto; background-color: #fff; border: 1px solid #4D4D4D; box-sizing: border-box; padding: 10px; } .shops .cont01_4 .box02 .info_area .left{ width:100%; } .shops .cont01_4 .box02 .info_area .left img{ width:100%; } .shops .cont01_4 .box02 .info_area .left .img02{ margin-top:10px; } .shops .cont01_4 .box02 .info_area .right{ width:100%; } .shops .cont01_4 .box02 .info_area .right h5{ border-top: 3px solid #000; border-bottom: 3px solid #000; text-align: center; padding: 20px 0; font-size: 27px; font-weight: bold; line-height: 1.6; } .shops .cont01_4 .box02 .info_area .right p.title{ font-size:20px; font-weight:bold; margin: 30px auto 0 auto; line-height:1.5; width: 90%; } .shops .cont01_4 .box02 .info_area .right p.txt{ margin: 0 auto 0 auto; width: 90%; } .shops .cont02{ width: 100%; background-color: #F4EEE1; margin: 0; padding: 60px 5%; box-sizing: border-box; } .shops .cont02 img { width: 100%; } .shops .cont02 .box01{ width:100%; margin:0 auto; } .shops .cont02 .box01 .left{ width:100%; } .shops .cont02 .box01 .left h4{ font-size:26px; font-weight:bold; line-height: 1.8em; } .shops .cont02 .box01 .left .txt{ margin: 10px 0 20px 0; font-size: 14px; line-height: 2em; } .shops .cont02 .box01 .img01{ } .shops .cont02 .shop_area{ width:100%; background:#fff; border:1px solid #4D4D4D; margin:30px auto; padding:10px; box-sizing: border-box; } .shops .cont02 .shop_area .img01{ margin: 0 0 5% 0; } .shops .cont02 .shop_area .right{ } .shops .cont02 .shop_area .right .shop_name{ font-size:20px; font-weight:bold; line-height:1.6em; } .shops .cont02 .shop_area .right .shop_adress{ margin-top:20px; font-size:14px; line-height:2em; } .shops .cont02_2{ width: 100%; background-color: #F4EEE1; margin: 0 0 0 0; padding: 60px 5%; box-sizing: border-box; } .shops .cont02_2 img { width: 100%; } .shops .cont02_2 .box01{ width:100%; margin:0 auto; } .shops .cont02_2 .box01 .left{ width:100%; } .shops .cont02_2 .box01 .left h4{ font-size:26px; font-weight:bold; line-height: 1.8em; } .shops .cont02_2 .box01 .left .txt{ margin: 10px 0 20px 0; font-size: 14px; line-height: 2em; } .shops .cont02_2 .box01 .img01{ } .shops .cont02_2 .shop_area{ width:100%; background:#fff; border:1px solid #4D4D4D; margin:30px auto; padding:10px; box-sizing: border-box; } .shops .cont02_2 .shop_area .img01{ margin: 0 0 5% 0; } .shops .cont02_2 .shop_area .right{ } .shops .cont02_2 .shop_area .right .shop_name{ font-size:20px; font-weight:bold; line-height:1.6em; } .shops .cont02_2 .shop_area .right .shop_adress{ margin-top:20px; font-size:14px; line-height:2em; } .pconly { display: none; } /* シェアラベル スマホ */ .share #main { width: 100%; height: 140px; background: url(/-/media/cojp/product/labelwriter/special/cube/img/content/pages/share_mainbg.jpg) no-repeat center bottom; background-size: cover; text-align: center; margin: 0; padding: 0; } .share #lead_area p.tit { font-size: 22px; } .share #lead_area p { padding: 0; margin: 20px 0 0 0; font-size: 18px; } .share #lead_area span { font-size: 12px; } .share .cont01 { width: 90%; margin: 60px auto 0 auto; } .share .cont01 .left { width: 100%; border: 1px solid #4D4D4D; box-sizing: border-box; padding: 30px 10px 20px 10px; margin: 0 0 20px 0; } .share .cont01 .right { width: 100%; border: 1px solid #4D4D4D; box-sizing: border-box; padding: 30px 10px 20px 10px; } .share .cont01 .num { text-align: center; } .share .cont01 .inn .copy01 { font-size: 20px; text-align: center; line-height: 1.5; padding: 30px 0 0 0; } .share .cont01 .inn .copy02 { padding: 20px 0; font-size: 15px; line-height: 1.5; height: 3em; } .share .cont01 .inn .pic { padding: 30px 0 0 0; } .share .cont01 .inn .pic img { width: 100%; } .share .cont02 { width: 100%; background-color: #F4EEE1; margin: 80px 0 0 0; text-align: center; padding: 80px 20px; box-sizing: border-box; } .share .cont02 h4 { font-size: 25px; text-align: center; margin: 0 auto 0 auto; border-top: 2px solid #231815; border-bottom: 2px solid #231815; padding: 20px 10px; font-weight: bold; display: inline-block; } .share .cont02 .img { margin: 80px 0 0 0; } .share .cont02 .img img { width: 80%; } .share .cont02 .txt { width: 100%; margin: 0 auto; text-align: center; padding: 30px 0 0 0; } .share .cont03 { width: 90%; margin: 60px auto 0 auto; text-align: center; } .share .cont03 h4 { font-size: 25px; text-align: center; margin: 0 auto 0 auto; border-top: 2px solid #231815; border-bottom: 2px solid #231815; padding: 20px 10px; font-weight: bold; display: inline-block; } .share .cont03 .box { border: 1px solid #4D4D4D; width: 100%; box-sizing: border-box; text-align: left; margin: 40px 0 0 0; padding: 20px; font-size: 15px; line-height: 1.6; } .share .cont03 .box .copy01 { margin: 0 0 30px 0; } .share .cont03 .box02 .left { width: 100%; text-align: center; } .share .cont03 .box02 .right { width: 100%; background-color: #F0F0F0; box-sizing: border-box; padding: 30px; margin: 20px 0 0 0; } .share .cont03 .box02 .right h5 { font-size: 18px; font-weight: bold; padding: 0 0 20px 0; } .share .cont03 .box02 .right .link { } .return1 { width: 90%; margin: 2% auto 0 auto; display: block; } .return1 a { display: block; box-sizing: border-box; width: 100%; background-color: #000; text-align: center; color: #fff; padding: 5% 0 5% 0; font-size: 15px; } .return1 a p { color: #fff; } .return1 a p::before { content: "▶"; margin-right: 25px; } .gnkout { display: block; width: 90%; margin: 5% auto 0 auto; font-size: 12px; text-align: right; } } .blue_t { color: #7caae4; } .olange_t { color: #e4a67c; } .mint { font-size: 10px; } .flex-box{ display: flex; justify-content: center; } .flex-box > div{ margin: 0 20px; } .application #cont03 , #cont01-1 { max-width: 980px; margin: 20px auto; overflow: hidden; } .pro710 #cont01-1 { max-width: 980px; margin: 20px auto 0; overflow: hidden; } .application #cont03 .cont03_box, #cont01-1 .cont03_box{ border: 1px solid #4d4d4d; padding: 10px; display: flex; justify-content: space-between; } .application #cont03 .cont03_box > div, #cont01-1 .cont03_box > div{ width: 360px; margin: 0 auto; } .application #cont03 .cont03_box h4, #cont01-1 .cont03_box h4 { font-size: 20px; text-align: center; margin: 20px auto; border-top: 2px solid #231815; border-bottom: 2px solid #231815; padding: 15px 0; font-weight: bold; } .application #cont03 .cont03_box .ttl , #cont01-1 .cont03_box .ttl { font-size: 18px; font-weight: bold; text-align: center; line-height: 1.6; margin-bottom: 20px; } .application #cont03 .cont03_box p, #cont01-1 .cont03_box p { font-size: 15px; line-height: 1.6; } .application #cont03 .cont03_box .use_btn, #cont01-1 .cont03_box .use_btn { border: 1px solid #000; width: 210px; margin: 20px auto 0; font-size: 14px; text-align: center; } .application #cont03 .cont03_box .use_btn a, #cont01-1 .cont03_box .use_btn a{ padding: 10px; display: block; } .application #cont03 .cont03_box .use_btn a:after, #cont01-1 .cont03_box .use_btn a:after{ content: "?"; display: inline-block; padding-left: 10px; } .product.pro710 #cont01-2 .left{ min-height: 540px; } .application #cont04, #cont01-2 { max-width: 980px; margin: 40px auto 0; } .application #cont04 .left, #cont01-2 .left { width: 320px; border: 1px solid #4D4D4D; float: left; padding: 10px; margin: 0 10px 0px 0; box-sizing: border-box; } .application #cont04 .left:last-child, #cont01-2 .left:last-child { margin-right: 0; } .application #cont04 p.pic, #cont01-2 p.pic { text-align: center; } .application #cont04 img, #cont01-2 img { width: 300px; } .application #cont04 h4, #cont01-2 h4 { font-size: 20px; text-align: center; width: 278px; margin: 24px auto 0 auto; border-top: 2px solid #231815; border-bottom: 2px solid #231815; padding: 22px 0; font-weight: bold; line-height: 1.4; } .application #cont04 .left:nth-child(2) h4, #cont01-2 .left:nth-child(2) h4 { font-size: 20px; text-align: center; width: 278px; margin: 24px auto 0 auto; border-top: 2px solid #231815; border-bottom: 2px solid #231815; padding: 8px 0; font-weight: bold; line-height: 1.4; } .application #cont04 p.txt, #cont01-2 p.txt { font-size: 15px; width: 278px; margin: 20px 0 0 0; padding: 0 10px; line-height: 1.7; text-align: justify; } .application #cont04 p.txt span, #cont01-2 p.txt span { font-size: 75%; margin: 10px 0 0 0; } .application #cont04 p.tag, #cont01-2 p.tag { border: 1px solid #333; margin: 10px; padding: 2px; display: inline-block; } .application #cont04 .sceneBox, #cont01-2 .sceneBox{ background: #f0f0f0; padding: 10px; margin: 0 10px; } .application #cont04 .sceneBox .ttl, #cont01-2 .sceneBox .ttl{ font-weight: bold; font-size: 14px; border-bottom: 1px dotted #000; margin-bottom: 5px; padding-bottom: 2px; } .application #cont04 .sceneBox .ulStyle01, #cont01-2 .sceneBox .ulStyle01{ margin: 0 15px; } .application #cont04 .sceneBox .ulStyle01 li, #cont01-2 .sceneBox .ulStyle01 li{ list-style: disc; text-align: left; font-size: 13px; } .product #cont02 .right .sceneBox{ background: #f0f0f0; padding: 10px; margin: 0 10px; } .product #cont02 .right .sceneBox .ttl { font-weight: bold; font-size: 14px; border-bottom: 1px dotted #000; margin-bottom: 5px; padding-bottom: 2px; } .product #cont02 .right .sceneBox .ulStyle01{ margin: 0 15px; } .product #cont02 .right .sceneBox .ulStyle01 li{ list-style: disc; text-align: left; font-size: 13px; } /*20210302更新*/ /* APPLICATION PC */ .app #main { width: 100%; height: 250px; background: url(/-/media/cojp/product/labelwriter/special/cube/img/content/pages/app_mainbg.jpg) no-repeat center center; background-size: cover; text-align: center; margin: 0; padding: 0; } .app .app_img01 { text-align: center; margin: 70px 0 0 0; } .app .app_img01 img { width: 120px; } .app .app_tit01 { text-align: center; color: #333333; font-size: 22px; font-weight: bold; margin: 25px 0 100px 0; } .app #cont01 { width: 100%; background-color: #F4EEE1; text-align: center; padding: 60px 0 80px 0; } .app #cont01 h4 { font-size: 24px; font-weight: bold; border-top: 2px solid #231815; border-bottom: 2px solid #231815; padding: 12px 15px; display: inline-block; margin: 0 0 55px 0; letter-spacing: 0.1em; } .app #cont02 { width: 100%; text-align: center; margin: 85px 0 0 0; } .app #cont02 h4 { font-size: 24px; font-weight: bold; border-top: 2px solid #231815; border-bottom: 2px solid #231815; padding: 12px 15px; display: inline-block; letter-spacing: 0.1em; } .app #cont02 p { text-align: center; margin: 80px 0 0 0; } .app .box01{ max-width: 1000px; margin: 0 auto 100px; } .app .link_area{ display: flex; justify-content: space-between; margin: 0px auto; max-width: 1000px; width: 100%; } .app .nav-fixed.m_fixed { position: fixed; top: 0; left: 0; width: 100%; background: rgba(0,0,0,0.4); padding: 10px; box-sizing: border-box; } .app .link_area li{ width: 17%; background: #000; padding: 7px 0; } .app .link_area a{ color: #fff !important; font-weight: bold; border-top: 1px dashed #fff; border-bottom: 1px dashed #fff; padding: 0 20px; text-align: center; font-size: 17px; height: 50px; display: flex; align-items: center; justify-content: center; } .app .link_area a:hover{ opacity: 1; } .app .hd01{ background: #000; padding: 7px 0 !important; display: block !important; } .app .hd01 span{ color: #fff !important; font-weight: bold; border-top: 1px dashed #fff; border-bottom: 1px dashed #fff; padding: 0 20px; text-align: center; font-size: 22px; height: 40px; display: flex; align-items: center; justify-content: center; } .app .hd02{ padding: 7px 0 !important; display: block !important; margin: 60px auto; } .app .hd02 span{ color: #333 !important; font-weight: bold; border-top: 2px dashed #000; border-bottom: 2px dashed #000; padding: 5px 20px; text-align: center; font-size: 22px; height: 40px; display: flex; align-items: center; justify-content: center; } .app .sec01{ margin: 60px auto; } .app .sec01 .tit{ text-align: center; font-size: 25px; font-weight: bold; letter-spacing: 0.1em; margin-top: 40px; } .app .sec01 p{ font-size: 16px; line-height: 1.8; margin: 20px 0 0 0; text-align: center; } .lead_area { margin:0 auto; } .lead_area h3 { font-size: 33px; margin: 40px 0 0 0; font-weight: bold; letter-spacing: 0.1em; line-height: 1.7; text-align: center; } .app .cont01 { max-width: 990px; margin: 60px auto 0 auto; display: flex; justify-content: space-between; } .app .cont01 .left { max-width: 490px; width: 100%; border: 1px solid #4D4D4D; box-sizing: border-box; float: left; padding: 30px 20px 20px 20px; } .app .cont01 .right { max-width: 490px; width: 100%; border: 1px solid #4D4D4D; box-sizing: border-box; float: right; padding: 30px 20px 20px 20px; } .app .cont01 .num { text-align: center; margin: 0; } .app .cont01 .inn .copy01 { font-size: 20px; text-align: center; line-height: 1.5; padding: 30px 0 0 0; margin: 0; } .app .cont01 .inn .copy02 { padding: 20px 0; font-size: 15px; line-height: 1.5; height: 3em; margin: 0; text-align: left; } .app .cont01 .inn .pic { padding: 30px 0 0 0; margin: 0; } .app .cont01 .inn .pic img{ width: 100%; } .app .sec02{ background: #f4eee1; padding: 60px 0; } .app .sec02 .item-list{ display: flex; flex-wrap: wrap; justify-content: space-between; } .app .sec02 .item-list li{ width: 50%; margin-bottom: 60px; } .app .sec02 .item-list li:nth-child(3), .app .sec02 .item-list li:nth-child(4){ margin-bottom: 0; } .app .sec03{ background: #fff; padding: 60px 0 0; } .app .box { border: 1px solid #4D4D4D; max-width: 980px; box-sizing: border-box; text-align: left; margin: 40px 0 0 0; padding: 20px; font-size: 15px; line-height: 1.6; } .app .box .copy01 { margin: 0 0 30px 0; } .app .sec03 .box02{ display: flex; justify-content: space-between; } .app .box02 .left { max-width: 182px; float: left; } .app .box02 .right { max-width: 740px; width: 77%; height: 233px; float: right; background-color: #F0F0F0; box-sizing: border-box; padding: 30px; } .app .box02 .right h5 { font-size: 18px; font-weight: bold; padding: 0 0 20px 0; } .app .box02 .right .link { } .app .fnt14{ font-size: 14px; display: block; margin-top: 10px; } .app .btn_dc{ margin: 70px auto 0 !important; } .app #app_dl{ margin-top: 0; } @media only screen and (max-width: 800px) { .app .sec01 .tit, .lead_area h3{ font-size: 22px; line-height: 1.5; text-align: left; } .app .sec01 p{ text-align: left; } .app .box01{ padding: 0 10px; margin-bottom: 60px; } .app .link_area a{ font-size: 14px; } .app .link_area{ flex-wrap: wrap; } .app .link_area li{ width: 49%; margin-bottom: 10px; } } @media only screen and (max-width: 768px) { .app #main{ height: 140px; } .app .flex-box{ display: block; } .app .flex-box li{ text-align: center; margin-bottom: 20px; } .app .flex-box li img{ width: 100%; } .app .hd02 span{ height: auto; line-height: 1.6; } .app .variable-img img, .app .cont01 .inn .pic img{ width: 100%; } .app .cont01{ display: block; } .app .cont01 .left, .app .cont01 .right{ max-width: 100%; float: none; } .app .cont01 .left{ margin-bottom: 40px; } .app .sec02{ padding: 20px 0; } .app .sec02 .item-list{ display: block; } .app .sec02 .item-list li, .app .sec02 .item-list img{ width: 100%; } .app .sec03 .box02{ display: block; } .app .box02 .left{ float: none; text-align: center; margin: 0 auto 20px; } .app .box02 .right{ width: 100%; height: auto; } .app .link_area.m_fixed{ padding: 10px; margin: 0; left: 0; box-sizing: border-box; } } @media only screen and (max-width: 486px) { .app .link_area a{ height: 30px; font-size: 12px; line-height: 1.2; } .app .link_area li:last-child{ margin-bottom: 0; } .app .link_area li{ } } /*20210311更新*/ /* column PC */ #lead_area{ max-width: 100%; padding: 0 20px; width: 100%; box-sizing: border-box; } .inner2{ max-width: 1000px; width: 100%; margin: 0 auto; } .column-area{ display: flex; flex-wrap: wrap; margin: 40px auto; } .column-area li{ width: 47%; margin: 0 10px 20px; } .column-area li a{ display: flex; align-items: center; border: 1px solid #000000; padding: 2px; } .column-area li a:hover{ text-decoration: none !important; } .column-img{ padding-right: 15px; } .column-txt{ font-weight: bold; width: 100%; margin-right: 10px; } .column-txt p{ font-size: 14px; margin-bottom: 10px; font-weight: normal; } .column-txt p.ttl{ font-size: 20px; font-weight: bold; margin-bottom: 10px; line-height: 1.6; } .more_txt{ border-bottom: 2px dotted #ddd; float: right; margin-bottom: 0 !important; font-weight: bold; } .more_txt:after{ content: ""; background:url("/-/media/cojp/product/labelwriter/special/cube/img/content/pages/columnpage-arrow") no-repeat top center; width: 24px; height: 5px; display: inline-block; padding-left: 15px; } /*COLUMN詳細ページ*/ .column-under #lead_area{ max-width: 1000px; } .column-under #lead_area p{ font-size: 18px; line-break: strict; overflow-wrap: break-word; word-wrap: break-word; word-break: normal; } .mokuji{ background: #e6e6e6; padding: 40px; margin: 40px auto; } .mokuji h4{ font-size: 20px; font-weight: bold; position: relative; } .mokuji h4:before { position: absolute; top: calc(50% - 1px); left: 0; width: 100%; height: 2px; content: ''; background: #000; } .mokuji h4 span { position: relative; padding: 0 10px 0 0; background: #e6e6e6; border: none; display: inline; } .mokuji span{ border-bottom: 2px solid #000; display: block; padding-bottom: 20px; } .mokuji ul { margin-top: 30px; } .mokuji ul li{ margin-bottom: 10px; } .mokuji ul li a{ font-size: 16px; } .mokuji ul li a:before{ content: "\f0da"; font-family: 'FontAwesome'; font-size: 20px; display: inline-block; padding-right: 10px; } .mokuji ul li ul{ margin: 10px; } .column h5{ font-size: 22px; font-weight: bold; margin-bottom: 20px; line-height: 1.6; } .column h5:before{ content: "\f0da"; font-family: 'FontAwesome'; font-size: 20px; display: inline-block; padding-right: 10px; } .number-sub-ttl{ font-size: 18px; font-weight: bold; margin-bottom: 20px; } .column-under section{ margin-bottom: 100px; } .column-under section a{ color: #518cef !important; } .column-under section p{ font-size: 16px; margin-bottom: 20px; line-height: 1.6; line-break: strict; overflow-wrap: break-word; word-wrap: break-word; word-break: normal; } .column-under section figure{ margin: 0 0 40px; } .column-under section figure img{ max-width: 100%; } .column-under section figure.img-auto img{ width: auto; } .column-under section figure.img-auto02 img{ width: 50%; } .column-under section figure figcaption{ font-size: 16px; margin-top: 5px; } .olStyle01 { margin: 10px 0; padding: 0 0 0 20px; } .olStyle01 li { font-size: 16px; list-style: decimal; margin-bottom: 10px; padding: 0; text-align: left; line-height: 1.6; } .ulStyle01 { margin: 0 20px 40px; } .ulStyle01 li { list-style: disc; margin : 0 0 10px; padding : 0; text-align : left; font-size : 16px; } .column .lead{ margin-top: 40px; } .column .lead p{ font-size: 16px; margin-bottom: 20px; line-height: 1.6; } .column .lead a{ text-decoration: underline !important; } .column .lead a:hover{ text-decoration: none !important; } /*COLUMN詳細ページ(コジマジックページ)*/ #lead_area.column14_contents h3{ text-align: center; } #lead_area.column14_contents h3 span{ font-size: 26px; display: inline-block; margin-bottom: 10px; } #lead_area.column14_contents h3 span br, #lead_area.column14_contents .spBr{ display: none; } #lead_area.column14_contents .box{ margin-top: 80px; text-align: center; } #lead_area.column14_contents .box h4{ font-size: 26px; font-weight: bold; padding: 20px 0; border-top: solid 1px #000; border-bottom: solid 1px #000; margin-bottom: 40px; line-height: 1.2; } #lead_area.column14_contents .box .youtube { position: relative; width: 100%; padding-top: 56.25%; margin: 0 auto; } #lead_area.column14_contents .box .youtube iframe { position: absolute; top: 0; right: 0; width: 100%; height: 100%; } #lead_area.column14_contents .box figure{ margin: 0; } #lead_area.column14_contents .box img{ max-width: 100%; height: auto; } @media only screen and (max-width: 768px) { #lead_area.column14_contents h3 span { font-size: 20px; } #lead_area.column14_contents .box{ margin-top: 60px; } #lead_area.column14_contents .box:first-of-type{ margin-top: 40px; } #lead_area.column14_contents .box h4{ font-size: 20px; margin-bottom: 30px; } } @media only screen and (max-width: 640px) { #lead_area.column14_contents h3 span br, #lead_area.column14_contents .spBr{ display: block; } #lead_area.column14_contents .pcBr{ display: none; } .column-under #lead_area.column14_contents p{ font-size: 16px; } } /*インフルエンサー*/ .column .advisor { overflow: hidden; } .column .advisor .left { max-width: 490px; float: left; border: 1px solid #4D4D4D; padding: 22px 20px 55px 20px; box-sizing: border-box; } .column .advisor .right { max-width: 490px; float: right; border: 1px solid #4D4D4D; padding: 22px 20px 55px 20px; box-sizing: border-box; } .column .advisor .head { text-align: left; max-width: 380px; margin: 0 auto; display: flex; } .column .advisor .head .profile01 { max-width: 105px; float: left; } .column .advisor .head .profile02 { max-width: 255px; float: left; margin-left: 10px; } .column .advisor .head img { width: 105px; } .column .advisor .head .profile02 p { font-size: 17px; padding: 0 0 0 0; margin: 0; } .column .advisor .head .profile02 h5 { font-size: 26px; font-weight: bold; padding: 0 0 0 0; letter-spacing: 0.2em; } .column .advisor .head .profile02 h5:before { display: none; } .column .advisor .head .profile02 h5 span { font-size: 17px; } .column #cont01 .box01 .pic_area { margin: 20px auto 0 auto; max-width: 450px; max-height: 319px; } .column .advisor .pic_area h6 { background-color: #000; color: #fff; font-size: 14px; line-height: 1.5; padding: 10px 0; text-align: center; } .column .advisor.columnpage05 .bg01 { max-width: 450px; height: 319px; background: url(/-/media/cojp/product/labelwriter/special/cube/img/content/pages/column_img01.jpg) no-repeat center top; -moz-background-size: 450px 319px; -webkit-background-size: 450px 319px; -o-background-size: 450px 319px; -ms-background-size: 450px 319px; } .column .advisor.columnpage06 .bg02 { max-width: 450px; height: 319px; background: url(/-/media/cojp/product/labelwriter/special/cube/img/content/pages/column_img02.jpg) no-repeat center top; -moz-background-size: 450px 319px; -webkit-background-size: 450px 319px; -o-background-size: 450px 319px; -ms-background-size: 450px 319px; } .column .advisor.columnpage07 .bg03 { max-width: 450px; height: 319px; background: url(/-/media/cojp/product/labelwriter/special/cube/img/content/pages/column_img03.jpg) no-repeat center top; background-size: auto; -moz-background-size: 450px 319px; -webkit-background-size: 450px 319px; -o-background-size: 450px 319px; -ms-background-size: 450px 319px; } .column .advisor.columnpage08 .bg04 { max-width: 450px; height: 319px; background: url(/-/media/cojp/product/labelwriter/special/cube/img/content/pages/column_img04.jpg) no-repeat center top; background-size: auto; -moz-background-size: 450px 319px; -webkit-background-size: 450px 319px; -o-background-size: 450px 319px; -ms-background-size: 450px 319px; } .column .advisor .bg01 img, .column .advisor .bg02 img, .column .advisor .bg03 img, .column .advisor .bg04 img{ max-width: 100%; } .column .advisor .tit { max-width: 400px; margin: 35px auto 0 auto; font-size: 15px; line-height: 1.5; min-height: 10em; text-align: justify; } /*文具王*/ .column #cont02 { text-align: center; background: none; width: 100%; margin: 0 auto; padding: 0; } .column #cont02 h4 { font-size: 24px; font-weight: bold; border-top: 2px solid #231815; border-bottom: 2px solid #231815; padding: 12px 15px; display: inline-block; letter-spacing: 0.1em; text-align: center; margin: 0 auto 0 auto; } .column #cont02 .box { border: 1px solid #4D4D4D; box-sizing: border-box; max-width: 1000px; width: 100%; background: #fff url(/-/media/cojp/product/labelwriter/special/cube/img/content/pages/column_cont02img01.jpg) no-repeat left 20px top 20px; margin: 50px auto 0 auto; text-align: left; padding: 20px; min-height: 260px; } .column #cont02 .box p { max-width: 690px; margin: 0 0 0 240px; } .column #cont02 .box .txt01 { font-size: 24px; font-weight: bold; padding: 30px 0 0 0; } .column #cont02 .box .txt02 { font-size: 12px; padding: 20px 0 0 0; line-height: 1.7; } .column #cont02 .box .link { font-size: 12px; padding: 30px 0 0 0; line-height: 1.7; } @media only screen and (max-width: 800px) { .column-area{ display: block; padding: 0 20px; } .column-area.column-link{ padding: 0; } .column-area li{ width: 100%; box-sizing: border-box; margin: 0 0 20px; } .inner2{ box-sizing: border-box; padding: 0 10px; } .column-under section figure img{ width: 100% !important; } .column .advisor.columnpage05 .bg01, .column .advisor.columnpage06 .bg02, .column .advisor.columnpage07 .bg03, .column .advisor.columnpage08 .bg04{ background: none; height: auto; } .column #cont02 .box{ background: none; } .column #cont02 .box p{ margin: 0; } } @media only screen and (max-width: 478px) { .column-img{ width: 50%; padding-right: 10px; } .column-img img{ max-width: 100%; } .column-txt p{ font-size: 12px; letter-spacing: -1.5px; } .column-txt p.ttl{ font-size: 14px; letter-spacing: -1px; } /* ------------------------- shop一覧 の追加CSS -------------------------*/ .shoplist_2stage { margin-top: 20px; } /* ------------------------- shop06 のCSS -------------------------*/ @media only screen and (max-width: 768px) { .shops .cont01_3 .box02 .info_area .shop06left { float: none; } .shops .cont01_3 .box02 .info_area .shop06right { float: none; } .shops .cont01_3 .box02 .info_area .shop06right .img01 { float: none; } .shops .cont01_3 .box02 .info_area .shop06right .img02 { margin-top: 10px; } } @media only screen and (min-width: 769px) { .shops .cont01_3 .box02 .info_area .shop06left { float: left; margin-left: 25px !important; margin-right: 45px !important; } .shops .cont01_3 .box02 .info_area .shop06right { float: right; } .shops .cont01_3 .box02 .info_area .shop06right .img01 { float: right; width: 354px; } .shops .cont01_3 .box02 .info_area .shop06right .img02 { margin-top: 10px; } } .mt4 { margin-top:4px; } .mt20 { margin-top:20px; } }