@charset "utf-8"; /* * ========================================================================== * * [home] * * ========================================================================== */ /*PC*/ @media only screen and (min-width: 769px) { body { font-family: 'Noto Sans JP', sans-serif !important; } .sp { display: none } /* メインコンテンツ */ h1 { font-size: 2em; margin: 0.67em 0; text-align: left; font-weight: bold; padding: 0 !important; } #common_head { height: auto; margin-bottom: 80px; } .slick-arrow { display: none !important; } .mod-categoryTopHeroImg_imgChanger .slick-dots li { width: 16px; height: 16px; margin: 5px; } .mod-categoryTopHeroImg_imgChanger .slick-dots li button { background-color: #fff; width: 16px; height: 16px; border-radius: 50%; box-shadow: none; } .mod-categoryTopHeroImg_imgChanger .slick-dots li.slick-active button { background-color: #6E4A1F; } .mod-categoryTopHeroImg_imgChanger .slick-dots li button span { display: none; } .mod-categoryTopHeroImg_imgChanger .slick-dots { bottom: -40px; } .slick-dots li { width: 16px; height: 16px; margin: 5px; } .slick-dots li button { width: 16px; height: 16px; background-color: #fff; border: solid 1px #6E4A1F; box-shadow: none; } .slick-dots li.slick-active button { background: #6E4A1F !important; } .slick-dots li button:before { color: #6E4A1F; height: 16px; width: 16px; } .slick-slide img.sp{ display: none; } .hsm-leaf.pc { text-align: center; display: block; } .hsm-text1 { font-family: ten-mincho, serif; font-size: 30px; color: #6E4A1F; text-align: center; margin-bottom: 120px; } .hsm-content img { max-width: 100%; } .hsm-product { background-color: #F2F0ED; margin: 0 calc(50% - 50vw) 55px; width: 100vw; padding-bottom: 35px; } .hsm-inner { max-width: 1052px; padding: 0 10px; margin: 0 auto 35px; } .flexbox { display: -ms-flexbox; display: -webkit-box; display: -webkit-flex; display: flex; -ms-flex-pack: justify; -webkit-box-pack: justify; -webkit-justify-content: space-between; justify-content: space-between; -ms-flex-wrap: wrap; -webkit-flex-wrap: wrap; flex-wrap: wrap; } .hsm-general { width: 49.4%; margin-top: -80px; background-color: #fff; padding-bottom: 30px; } .hsm-embroidery { width: 49.4%; margin-top: -80px; background-color: #fff; padding-bottom: 30px; } .hsm-general-title { background-color: #F6F5F2; padding: 20px 30px 30px; width: 285px; margin: -70px auto 20px; position: relative; z-index: 1; } .hsm-product h2 { font-family: ten-mincho, serif; font-size: 32px; color: #6E4A1F; text-align: center; margin-bottom: 15px; line-height: 1.3; } .hsm-product-cont1 { padding: 0 40px 32px; background-image: url(/-/media/cojp/product/hsm/img/top2023/line1); background-repeat: no-repeat; background-position: bottom center; -webkit-background-size: 83% auto; background-size: 83% auto; margin-bottom: 24px; } .hsm-product-cont2 { padding: 0 40px; } .hsm-product-text1 { background-color: #EE7800; color: #fff; font-size: 20px; text-align: center; display: inline-block; border-radius: 20px; padding: 0 25px; margin-bottom: 15px; } .hsm-product-text4 { background-color: #009D37; color: #fff; font-size: 20px; text-align: center; display: inline-block; border-radius: 20px; padding: 0 25px; margin-bottom: 15px; } .hsm-product-text2 { font-size: 18px; color: #6E4A1F; margin-bottom: 20px; } .hsm-product-box1 { margin-bottom: 15px; } .hsm-product-box2 { width: 59%; } .hsm-img2 { width: 35%; } .hsm-img2 img { max-width: 100%; } .hsm-product-text3 { background-image: url(/-/media/cojp/product/hsm/img/top2023/hsm-icon1); background-repeat: no-repeat; background-position: 0 -2px; -webkit-background-size: 28px auto; background-size: 28px auto; padding-left: 35px; font-weight: bold; border-bottom: solid 1px #E6E6E6; padding-bottom: 10px; margin-bottom: 15px; } .hsm-product li { margin-bottom: 10px; text-indent: -1.5em; padding-left: 1.5em; } .hsm-general li:before { content: "●"; font-size: 8px; color: #EE7800; position: relative; top: -2px; margin-right: 10px; } .hsm-embroidery li:before { content: "●"; font-size: 8px; color: #009D37; position: relative; top: -2px; margin-right: 10px; } .hsm-product-btn1 a { background-color: #736A63; color: #fff; display: block; text-align: center; font-size: 16px; border-radius: 5px; padding: 6px 30px 5px; background-image: url(/-/media/cojp/product/hsm/img/top2023/arrow1); background-repeat: no-repeat; background-position: 95% 50%; -webkit-background-size: 6.5px auto; background-size: 6.5px auto; } .hsm-embroidery .hsm-product-cont2 .hsm-product-box1 { margin-bottom: 40px; } .hsm-professional { width: 400px; width: calc(49% - 120px); background-image: url(/-/media/cojp/product/hsm/img/top2023/hsm-img7); background-size: cover; padding: 45px 60px 32px; } .hsm-accessory { width: 400px; width: calc(49% - 120px); background-image: url(/-/media/cojp/product/hsm/img/top2023/hsm-img8); background-size: cover; padding: 45px 60px 32px; } .hsm-professional .hsm-general-title, .hsm-accessory .hsm-general-title { margin: 0 auto 20px; width: 340px; width: calc(100% - 60px); } .hsm-accessory h2 { letter-spacing: -0.05em; } /* ボタンエリア */ .hsm-button { margin-bottom: 100px; } .hsm-button a { background-color: #F2F0ED; display: block; border-radius: 10px; color: #6E4A1F; background-image: url(/-/media/cojp/product/hsm/img/top2023/arrow2); background-repeat: no-repeat; background-position: 94% 50%; -webkit-background-size: 20px auto; background-size: 20px auto; display: flex; justify-content: center; align-items: center; height: 70px; } .hsm-button a img { width: 12px; } .hsm-button1 { width: 23.5%; } .hsm-button2 { width: 23.5%; } .hsm-button3 { width: 49%; } .hsm-button3_span1 { color: #333; margin: 0 7% 0 -10%; } /* ミシン選びでお困りの方へ */ .hsm-trouble-box1 { align-items: center; position: relative; margin-bottom: 80px; } .hsm-trouble h2, .hsm-information h2 { text-align: center; font-family: ten-mincho, serif; font-size: 30px; color: #6E4A1F; padding-bottom: 15px; margin-bottom: 30px; background-image: url(/-/media/cojp/product/hsm/img/top2023/line3); background-repeat: no-repeat; background-position: bottom center; -webkit-background-size: 279px auto; background-size: 279px auto; } .hsm-trouble-img1 { width: 22%; } .hsm-trouble-box2 { width: 53%; padding-top: 40px; } .hsm-trouble-img2 { width: 18%; } .hsm-trouble h3 { text-align: center; background-image: url(/-/media/cojp/product/hsm/img/top2023/hsm-bg1); background-repeat: no-repeat; background-position: top center; -webkit-background-size: 388px auto; background-size: 388px auto; -webkit-background-size: auto 100%; background-size: auto 100%; font-size: 20px; color: #6E4A1F; padding: 14px 0 23px; margin-bottom: 50px; } .hsm-trouble-img3 { position: absolute; right: 19%; top: 0; } .hsm-trouble-img4 { position: absolute; right: 0%; bottom: 10%; } .hsm-machinelist { margin-bottom: 20px; } .hsm-machinelist li { width: 32%; margin-bottom: 40px; } .hsm-machinelist li a { display: block; margin-bottom: 10px; } .hsm-machinelist li a span { background-color: #6E4A1F; display: block; color: #fff; font-size: 12px; padding: 5px 20px 5px 10px; background-image: url(/-/media/cojp/product/hsm/img/top2023/hsm-icon3); background-repeat: no-repeat; background-position: 95% 50%; -webkit-background-size: 12px auto; background-size: 12px auto; margin-top: -1px; } .hsm-machinelist li p { font-size: 12px; } .hsm-trouble-box3 { background-color: #F2F0ED; border-radius: 10px; max-width: 620px; margin: 0 auto 90px; text-align: center; padding: 30px 0; background-image: url(/-/media/cojp/product/hsm/img/top2023/hsm-bg2); background-repeat: no-repeat; background-position: 10% 90%; } .hsm-trouble-text1 { margin-bottom: 20px; } .hsm-trouble-btn1 a { width: 285px; background-color: #fff; display: block; border-radius: 10px; color: #6E4A1F; background-image: url(/-/media/cojp/product/hsm/img/top2023/arrow2); background-repeat: no-repeat; background-position: 94% 50%; -webkit-background-size: 20px auto; background-size: 20px auto; display: flex; justify-content: center; align-items: center; height: 50px; margin: 0 auto; } .hsm-trouble-btn1 a img { width: 12px; } /* 家庭用ミシン関連情報 */ .hsm-information { margin-bottom: 100px; } .hsm-information h3 { text-align: center; color: #6E4A1F; font-size: 24px; font-family: ten-mincho, serif; margin-bottom: 30px; } .hsm-information h3 img { margin-right: 15px; position: relative; top: 5px; } .hsm-information h3:nth-child(2) img { width: 30px; } .hsm-information h3:nth-child(4) img { width: 33px; top: 8px; } .hsm-information h3:nth-child(6) img { width: 38px; } .local-banner_heading a { color: #6E4A1F; } .local-banner_heading .mod-inIcon { width: 12px !important; height: auto; margin: 0 0 0 10px; position: relative; top: -2px; } .mod-bannerList div { margin-bottom: 13px; } .mod-bannerList-grid4 p { font-size: 12px } } /*タブレット*/ @media only screen and (min-width: 769px) and (max-width: 1110px) { .hsm-product h2 { font-size: 3vw; } .hsm-professional, .hsm-accessory { width: calc(49% - 60px); padding: 45px 30px 32px; } .hsm-button1 { width: 49%; margin-bottom: 20px; } .hsm-button2 { width: 49%; margin-bottom: 20px; } .hsm-button3 { width: 100%; } .hsm-button3 a { background-position: 97% 50%; } .hsm-trouble-img3 { width: 8vw; right: 15vw } } /*スマホ*/ @media only screen and (max-width: 768px) { html { font-size: 26.7vw; } body { font-size: 0.14rem; font-family: 'Noto Sans JP', sans-serif; } .sp { display: block; } .pc { display: none; } .st-contents { padding: 0 0.15rem; } /* SP:メインコンテンツ */ .mod-headingLv4 { margin: 0; } #common_head h1 { position: relative; margin: 0 0 0.4rem; } h1 { font-size: 2em; margin: 0.67em 0; text-align: left; font-weight: bold; padding: 0 !important; } #common_head { height: auto; margin: 0 0 0.75rem; } .mod-categoryTopHeroImg { display: block; margin: 0 -0.15rem; } .slick-arrow { display: none !important; } .mod-categoryTopHeroImg_imgChanger .slick-dots li { width: 0.16rem; height: 0.16rem; margin: 0.05rem; } .mod-categoryTopHeroImg_imgChanger .slick-dots li button { background-color: #fff; width: 0.16rem; height: 0.16rem; border-radius: 50%; box-shadow: none; } .mod-categoryTopHeroImg_imgChanger .slick-dots li.slick-active button { background-color: #6E4A1F; } .mod-categoryTopHeroImg_imgChanger .slick-dots li button span { display: none; } .mod-categoryTopHeroImg_imgChanger .slick-dots { bottom: -0.4rem; } .slick-dots li { width: 0.16rem; height: 0.16rem; margin: 0.05rem; } .slick-dots li button { width: 0.16rem; height: 0.16rem; background-color: #fff; border: solid 1px #6E4A1F; box-shadow: none; } .slick-dots li.slick-active button { background: #6E4A1F !important; } .slick-dots li button:before { color: #6E4A1F; width: 0.16rem; height: 0.16rem; } .slick-slide img.sp{ display: block; width: 100%; } .slick-slide img.pc{ display: none; } .hsm-leaf.sp { margin: 0 calc(50% - 50vw); width: 100vw; display: block; } .hsm-text1 { font-family: ten-mincho, serif; font-size: 0.3rem; color: #6E4A1F; text-align: center; margin-bottom: 0.25rem; line-height: 1.4; } .hsm-content img { max-width: 100%; } .hsm-product { margin: 0 calc(50% - 50vw) 0.3rem; width: 100vw; } .flexbox { display: -ms-flexbox; display: -webkit-box; display: -webkit-flex; display: flex; -ms-flex-pack: justify; -webkit-box-pack: justify; -webkit-justify-content: space-between; justify-content: space-between; -ms-flex-wrap: wrap; -webkit-flex-wrap: wrap; flex-wrap: wrap; } .hsm-general { width: 100%; background-color: #fff; padding-bottom: 0.4rem; } .hsm-embroidery { width: 100%; background-color: #fff; padding-bottom: 0.4rem; } .hsm-general-title { background-color: #F6F5F2; padding: 0.2rem 0.15rem 0.3rem; margin: 0 auto; position: relative; z-index: 1; } .hsm-product h2 { font-family: ten-mincho, serif; font-size: 0.24rem; color: #6E4A1F; text-align: center; margin-bottom: 0.15rem; line-height: 1.3; } .hsm-product-cont1 { padding: 0.2rem 0.15rem 0.3rem; background-image: url(/-/media/cojp/product/hsm/img/top2023/line2); background-repeat: no-repeat; background-position: bottom center; -webkit-background-size: 3.45rem auto; background-size: 3.45rem auto; margin-bottom: 0.3rem; } .hsm-product-cont2 { padding: 0 0.15rem; } .hsm-product-text1 { background-color: #EE7800; color: #fff; font-size: 0.2rem; text-align: center; display: inline-block; border-radius: 0.20rem; padding: 0 0.25rem; margin-bottom: 0.15rem; } .hsm-product-text4 { background-color: #009D37; color: #fff; font-size: 0.20rem; text-align: center; display: inline-block; border-radius: 0.20rem; padding: 0 0.25rem; margin-bottom: 0.15rem; } .hsm-product-text2 { font-size: 0.2rem; color: #6E4A1F; margin-bottom: 0.1rem; } .hsm-product-box1 { margin-bottom: 0.15rem; } .hsm-product-box2 { width: 47%; } .hsm-img2 { width: 46.2%; } .hsm-img2 img { max-width: 100%; } .hsm-product-text3 { background-image: url(/-/media/cojp/product/hsm/img/top2023/hsm-icon1); background-repeat: no-repeat; background-position: 1.08rem 0; -webkit-background-size: 0.28rem auto; background-size: 0.28rem auto; font-weight: bold; border-bottom: solid 0.01rem #E6E6E6; padding-bottom: 0.10rem; margin-bottom: 0.15rem; text-align: center; padding-left: 0.2rem; } .hsm-product li { margin-bottom: 0.10rem; text-indent: -1.5em; padding-left: 1.5em; line-height: 1.5; } .hsm-general li:before { content: "●"; font-size: 0.08rem; color: #EE7800; position: relative; top: -0.02rem; margin-right: 0.10rem; } .hsm-embroidery li:before { content: "●"; font-size: 0.08rem; color: #009D37; position: relative; top: -0.02rem; margin-right: 0.10rem; } .hsm-product-btn1 a { background-color: #736A63; color: #fff; display: block; text-align: center; font-size: 0.14rem; border-radius: 0.05rem; padding: 0.03rem 0.30rem 0.05rem; background-image: url(/-/media/cojp/product/hsm/img/top2023/arrow3); background-repeat: no-repeat; background-position: 95% 50%; -webkit-background-size: 0.2rem auto; background-size: 0.2rem auto; } .hsm-professional .hsm-product-btn1, .hsm-accessory .hsm-product-btn1 { background-color: #F6F5F2; padding: 0 0.15rem 0.35rem; } /* ボタンエリア */ .hsm-button { margin-bottom: 0.2rem; } .hsm-button li { width: 100%; margin-bottom: 0.2rem; } .hsm-button a { background-color: #F2F0ED; display: block; border-radius: 0.05rem; color: #6E4A1F; background-image: url(/-/media/cojp/product/hsm/img/top2023/arrow2); background-repeat: no-repeat; background-position: 94% 50%; -webkit-background-size: 0.20rem auto; background-size: 0.20rem auto; display: flex; justify-content: center; align-items: center; height: 0.70rem; width: 100%; } .hsm-button a img{ width: 0.12rem; } .hsm-button3_span1 { color: #333; margin-bottom: 0.1rem; } /* ミシン選びでお困りの方へ */ .hsm-trouble-box1 { align-items: center; position: relative; margin-bottom: 0.6rem; } .hsm-trouble h2, .hsm-information h2 { text-align: center; font-family: ten-mincho, serif; font-size: 0.24rem; color: #6E4A1F; padding-bottom: 0.13rem; margin-bottom: 0.30rem; background-image: url(/-/media/cojp/product/hsm/img/top2023/line3); background-repeat: no-repeat; background-position: bottom center; -webkit-background-size: 1.5rem auto; background-size: 1.5rem auto; line-height: 1; } .hsm-trouble h3 { text-align: center; background-image: url(/-/media/cojp/product/hsm/img/top2023/hsm-bg1); background-repeat: no-repeat; background-position: top center; -webkit-background-size: 100% 100%; background-size: 100% 100%; font-size: 0.18rem; color: #6E4A1F; padding: 0.10rem 0 0.17rem; margin-bottom: 0.27rem; } .hsm-trouble-box2 { order: 1; } .hsm-trouble-img1 { order: 2; width: 45%; } .hsm-trouble-img1 img { width: 100%; } .hsm-trouble-img2 { order: 3; width: 48%; } .hsm-trouble-img2 img { width: 100%; } .hsm-trouble-img3 { position: absolute; width: 0.6rem; right: -2vw; bottom: 32vw; } .hsm-trouble-img4 { position: absolute; width: 0.36rem; right: 0; bottom: 0; } .hsm-machinelist { margin-bottom: 0.20rem; } .hsm-machinelist li { width: 100%; margin-bottom: 0.2rem; } .hsm-machinelist li a { display: block; margin-bottom: 0.10rem; } .hsm-machinelist li a span { background-color: #6E4A1F; display: block; color: #fff; font-size: 0.12rem; padding: 0.05rem 0.20rem 0.05rem 0.10rem; background-image: url(/-/media/cojp/product/hsm/img/top2023/hsm-icon3); background-repeat: no-repeat; background-position: 95% 50%; -webkit-background-size: 0.12rem auto; background-size: 0.12rem auto; margin-top: -1px; } .hsm-machinelist li p { font-size: 0.12rem; } .hsm-trouble-box3 { background-color: #F2F0ED; margin: 0 calc(50% - 50vw) 0.45rem; width: 100vw; text-align: center; padding: 0.25rem 0 0.38rem; background-image: url(/-/media/cojp/product/hsm/img/top2023/hsm-bg2_sp); background-repeat: no-repeat; -webkit-background-size: 60% auto; background-size: 60% auto; background-position: 10% 93%; position: relative; } .hsm-trouble-text1 { margin-bottom: 0.15rem; } .hsm-trouble-btn1 a { width: 2.85rem; background-color: #fff; display: block; border-radius: 0.10rem; color: #6E4A1F; background-image: url(/-/media/cojp/product/hsm/img/top2023/arrow2); background-repeat: no-repeat; background-position: 94% 50%; -webkit-background-size: 0.20rem auto; background-size: 0.20rem auto; display: flex; justify-content: center; align-items: center; height: 0.50rem; margin: 0 auto; } .hsm-trouble-btn1 a img { width: 0.12rem; } .hsm-trouble-img5 { position: absolute; bottom: 0.1rem; right: 0.05rem; width: 0.53rem; } /* 家庭用ミシン関連情報 */ .hsm-information { margin-bottom: 1rem; } .hsm-information h3 { text-align: center; color: #6E4A1F; font-size: 0.24rem; font-family: ten-mincho, serif; margin-bottom: 0.30rem; } .hsm-information h3 img { margin-right: 0.15rem; position: relative; top: 0.05rem; } .hsm-information h3:nth-child(2) img { width: 0.3rem; } .hsm-information h3:nth-child(4) img { width: 0.33rem; top: 0.08rem; } .hsm-information h3:nth-child(6) img { width: 0.38rem; } .local-banner_heading a { color: #6E4A1F; font-size: 0.14rem; } .local-banner_heading .mod-inIcon { width: 0.12rem !important; height: auto; margin: 0 0 0 0.10rem; position: relative; top: -0.02rem; } .mod-bannerList div { margin-bottom: 0.13rem; } .mod-bannerList-grid4 p { font-size: 0.12rem } }