@charset "UTF-8"; /* # ================================================================= # 共通要素 # ================================================================= */ .mod-freeHTML * { box-sizing: border-box; } .mod-freeHTML { -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: 100%; color: #0D0D0D; font-weight: 400; font-weight: 400; font-size: 62.5%; font-family: "Noto Sans JP", sans-serif; letter-spacing: 0; } .mod-freeHTML.act { overflow: hidden; } .mod-freeHTML a, .mod-freeHTML .link { color: #0D0D0D; text-decoration: none; transition: opacity 0.3s; } .mod-freeHTML a.fig, .mod-freeHTML .link.fig { display: inline-block; margin: 0; vertical-align: top; } .mod-freeHTML a.fig picture, .mod-freeHTML .link.fig picture { width: 100%; height: 100%; vertical-align: top; } .mod-freeHTML a.fig img, .mod-freeHTML .link.fig img { width: 100%; height: auto; vertical-align: top; } .mod-freeHTML ul, .mod-freeHTML h1, .mod-freeHTML h2, .mod-freeHTML h3, .mod-freeHTML h4, .mod-freeHTML h5, .mod-freeHTML h6, .mod-freeHTML p { margin: 0; padding: 0; font-weight: inherit; } .mod-freeHTML li { list-style-type: none; } .mod-freeHTML address { font-style: normal; } .mod-freeHTML img { display: block; max-width: 100%; height: auto; } .mod-freeHTML img.w100 { width: 100%; } .mod-freeHTML figure, .mod-freeHTML .fig { margin: 0; vertical-align: top; } .mod-freeHTML figure picture, .mod-freeHTML .fig picture { width: 100%; height: 100%; vertical-align: top; } .mod-freeHTML figure img, .mod-freeHTML .fig img { width: 100%; height: auto; vertical-align: top; } /* foundation */ /* layout */ /*component*/ .mod-freeHTML .c-inner01 { width: 90%; max-width: 1000px; margin: 0 auto; } .mod-freeHTML .c-btn01 { margin: auto; } .mod-freeHTML .c-btn01__link { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: center; width: 100%; height: 100%; border-radius: 100px; color: #fff; } .mod-freeHTML .c-btn01__link--blue { background-color: #0096E5; } .mod-freeHTML .c-btn01__link--orange { background-color: #EA6302; } .mod-freeHTML .c-btn01__link--orange02 { background-color: #FF7300; } .mod-freeHTML .c-btn01__link--pink { background-color: #D31176; } .mod-freeHTML .c-ttl01 { position: relative; width: 100%; padding: clamp(0px, 0.98vw, 15px) 0; overflow: hidden; background-image: linear-gradient(-45deg, transparent clamp(0px, 1.11vw, 17px), #0067B2 clamp(0px, 1.11vw, 17px)); color: #fff; font-weight: 700; font-size: 32px; line-height: 1; text-align: center; } .mod-freeHTML .c-ttl01::before { position: absolute; right: 0; bottom: 0; border-width: 0 0 clamp(0px, 1.56vw, 24px) clamp(0px, 1.56vw, 24px); border-style: solid; border-color: transparent #004898 transparent; content: ""; } .mod-freeHTML .c-ttl01__small { font-weight: 700; font-size: 22px; line-height: 1; } .mod-freeHTML .c-ttl02 { width: 100%; border: 1px solid #0067B2; color: #0067B2; font-weight: 700; font-size: 18px; letter-spacing: 0.06em; text-align: center; } .mod-freeHTML .c-ttl02 span { font-weight: 700; font-size: 26px; } .mod-freeHTML .c-ttl03 { width: -moz-fit-content; width: fit-content; margin: 0 auto; background: linear-gradient(transparent 65%, #FFEB00 35%); color: #0067B2; font-weight: 700; font-size: 32px; line-height: 1.5; text-align: center; } .mod-freeHTML .c-ttl03__small { font-weight: 700; font-size: 20px; } .icoArw01::before { -webkit-mask-image: url(/-/media/cojp/product/printer/special/inkjet-comparison-2025/img/icoArw01); -webkit-mask-size: contain; -webkit-mask-repeat: no-repeat; -webkit-mask-position: center; background-color: #fff; mask-image: url(/-/media/cojp/product/printer/special/inkjet-comparison-2025/img/icoArw01); mask-position: center; mask-repeat: no-repeat; mask-size: contain; } .icoArw02::before { -webkit-mask-image: url(/-/media/cojp/product/printer/special/inkjet-comparison-2025/img/icoArw02); -webkit-mask-size: contain; -webkit-mask-repeat: no-repeat; -webkit-mask-position: center; background-color: #fff; mask-image: url(/-/media/cojp/product/printer/special/inkjet-comparison-2025/img/icoArw02); mask-position: center; mask-repeat: no-repeat; mask-size: contain; } .icoArw01 { position: relative; } .icoArw01::before { position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; content: ""; } .icoArw02 { position: relative; width: clamp(0px, 0.33vw, 5px); height: clamp(0px, 0.52vw, 8px); } .icoArw02::before { position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; content: ""; } .mod-freeHTML .tabs [hidden] { display: none !important; } .mod-freeHTML .tabs__tablist { display: flex; flex-direction: row; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; margin-bottom: clamp(0px, 0.65vw, 10px); } .mod-freeHTML .tabs__tab { -webkit-appearance: none; -moz-appearance: none; appearance: none; position: relative; width: 49%; padding: 0; border: 0; background: none; cursor: pointer; } .mod-freeHTML .tabs__tab .tab-on { display: none; } .mod-freeHTML .tabs__tab .tab-off { display: block; } .mod-freeHTML .tabs__tab[aria-selected=true] .tab-on { display: block; } .mod-freeHTML .tabs__tab[aria-selected=true] .tab-off { display: none; } .mod-freeHTML .tabs__tab:focus-visible { outline: 3px solid #000; outline-offset: 2px; } .mod-freeHTML .tabs__panel { position: relative; padding: clamp(0px, 3.45vw, 53px) 0 clamp(0px, 4.23vw, 65px); border: 4px solid #0096E5; border-radius: clamp(0px, 1.3vw, 20px); background-color: #fff; } .mod-freeHTML .tabs__panel--blue { padding-top: clamp(0px, 9.24vw, 142px); border-color: #0096E5; } .mod-freeHTML .tabs__panel--orange { border-color: #EA6302; } /*project*/ /*utility*/ .mod-freeHTML .sp { display: none !important; } .mod-freeHTML .pc { display: block !important; } /*page*/ .mod-freeHTML .s-mv { margin-bottom: clamp(0px, 4.17vw, 64px); } .mod-freeHTML .s-sublink { margin-bottom: clamp(0px, 5.21vw, 80px); } .mod-freeHTML .s-sublink__list { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: center; margin-bottom: clamp(0px, 4.17vw, 64px); gap: clamp(0px, 1.17vw, 18px); } .mod-freeHTML .s-sublink__list-item { aspect-ratio: 220/80; width: clamp(0px, 14.32vw, 220px); border: 2px solid #fff; border-radius: clamp(0px, 1.3vw, 20px); background-color: #EA5504; box-shadow: 3px 3px 8px rgba(0, 0, 0, 0.15); } .mod-freeHTML .s-sublink__list-link { display: flex; position: relative; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: center; width: 100%; height: 100%; color: #fff; font-weight: 700; font-size: 18px; line-height: 1.22; } .mod-freeHTML .s-sublink__list-link span { padding-bottom: clamp(0px, 0.65vw, 10px); text-align: center; } .mod-freeHTML .s-sublink__list-link .icoArw01 { position: absolute; right: 0; bottom: clamp(0px, 0.52vw, 8px); left: 0; width: clamp(0px, 1.04vw, 16px); height: clamp(0px, 0.65vw, 10px); margin: auto; } .mod-freeHTML .s-sublink__desc { margin-bottom: clamp(0px, 4.17vw, 64px); font-weight: 500; font-size: 18px; line-height: 2; letter-spacing: 0.06em; text-align: center; } .mod-freeHTML .s-model { padding-bottom: clamp(0px, 4.17vw, 64px); } .mod-freeHTML .s-model__ttl { margin-bottom: clamp(0px, 2.6vw, 40px); } .mod-freeHTML .s-model__cont { display: flex; flex-direction: row; flex-wrap: wrap; align-items: stretch; justify-content: space-between; gap: 0 clamp(0px, 2.08vw, 32px); } .mod-freeHTML .s-model__cont-box { width: 48.4%; } .mod-freeHTML .s-model__cont-box_ttl { margin-bottom: clamp(0px, 1.3vw, 20px); } .mod-freeHTML .s-model__cont-list { display: flex; flex-direction: row; flex-wrap: wrap; align-items: stretch; justify-content: space-between; } .mod-freeHTML .s-model__cont-list_item { width: 46.694214876%; } .mod-freeHTML .s-model__cont-list_item .item-img { margin-bottom: clamp(0px, 1.3vw, 20px); } .mod-freeHTML .s-model__cont-list_item:not(:last-child) { position: relative; } .mod-freeHTML .s-model__cont-list_item:not(:last-child)::before { position: absolute; top: 0; right: 0; right: -2em; bottom: 0; left: 0; left: auto; width: 1px; height: 100%; margin: auto; background-color: rgba(0, 103, 178, 0.14); content: ""; } .mod-freeHTML .s-model .c-btn01 { aspect-ratio: 226/41; width: 100%; font-weight: 700; font-size: 14px; } .mod-freeHTML .s-model .c-btn01 .icoArw01 { width: clamp(0px, 0.52vw, 8px); height: clamp(0px, 0.33vw, 5px); margin-left: 0.5em; } .mod-freeHTML .c-wparea { padding: clamp(0px, 4.17vw, 64px) 0; } .mod-freeHTML .c-wparea--orange { background-color: #F18D00; } .mod-freeHTML .c-wparea--yellow { background-color: #FFF8D8; } .mod-freeHTML .s-features__ttl { margin-bottom: clamp(0px, 1.63vw, 25px); } .mod-freeHTML .s-features__desc { margin-bottom: clamp(0px, 2.6vw, 40px); color: #fff; font-weight: 500; font-size: 24px; line-height: 2.17; letter-spacing: 0.06em; text-align: center; } .mod-freeHTML .s-features__list { display: flex; flex-direction: row; flex-wrap: wrap; align-items: stretch; justify-content: space-between; margin-bottom: clamp(0px, 4.1vw, 63px); gap: clamp(0px, 2.08vw, 32px) clamp(0px, 1.95vw, 30px); } .mod-freeHTML .s-features__list--point { justify-content: flex-start; margin-bottom: 0; gap: 0 clamp(0px, 1.69vw, 26px); } .mod-freeHTML .s-features__list_item { width: 48.4%; padding: clamp(0px, 2.6vw, 40px) 0; border: 4px solid #0067B2; border-radius: clamp(0px, 1.3vw, 20px); background-color: #fff; } .mod-freeHTML .s-features__list_item--point { width: 31.5%; } .mod-freeHTML .s-features__list_item .item-ttl { margin-bottom: clamp(0px, 1.3vw, 20px); } .mod-freeHTML .s-features__list_item .item-flex { display: contents; } .mod-freeHTML .s-features__list_item .item-img { aspect-ratio: 376/218; margin: 0 clamp(0px, 3.52vw, 54px) clamp(0px, 1.17vw, 18px); } .mod-freeHTML .s-features__list_item .item-img--compact { position: relative; } .mod-freeHTML .s-features__list_item .item-img--compact::before { position: absolute; top: 0; right: 0; right: auto; bottom: 0; left: 0; left: -4.5em; width: clamp(0px, 13.09vw, 201px); height: clamp(0px, 11.78vw, 181px); margin: auto; background-image: url(/-/media/cojp/product/printer/special/inkjet-comparison-2025/img/feature-img05-sub); background-position: center center; background-size: cover; background-repeat: no-repeat; content: ""; } .mod-freeHTML .s-features__list_item .item-img--adf { aspect-ratio: 263/200; margin-right: clamp(0px, 1.5vw, 23px); margin-left: clamp(0px, 1.5vw, 23px); } .mod-freeHTML .s-features__list_item .item-img--black-only { aspect-ratio: 146/200; width: clamp(0px, 9.51vw, 146px); margin-right: auto; margin-left: auto; } .mod-freeHTML .s-features__list_item .item-img--book-copy { aspect-ratio: 286/179; width: clamp(0px, 18.62vw, 286px); margin-right: auto; margin-bottom: clamp(0px, 2.6vw, 40px); margin-left: auto; } .mod-freeHTML .s-features__list_item .item-desc { margin: 0; padding: 0 clamp(0px, 3.26vw, 50px); font-weight: 500; font-size: 18px; line-height: 1.78; letter-spacing: 0.02em; } .mod-freeHTML .s-features__list_item .item-desc--point { padding: 0 clamp(0px, 1.63vw, 25px); } .mod-freeHTML .s-features__list_item .item-desc_small { margin-top: clamp(0px, 0.46vw, 7px); padding: 0 clamp(0px, 1.63vw, 25px); font-weight: 400; font-size: 12px; line-height: 1.33; } .mod-freeHTML .s-compare__ttl { margin-bottom: clamp(0px, 2.6vw, 40px); } .mod-freeHTML .s-compare .panel_ttl { position: absolute; top: clamp(0px, 3.26vw, 50px); right: 0; left: 0; margin: auto; font-weight: 700; font-size: 46px; letter-spacing: 0.06em; text-align: center; } .mod-freeHTML .s-compare .panel_ttl--blue { color: #0096E5; } .mod-freeHTML .s-compare .panel_ttl--orange { color: #EA6302; } .mod-freeHTML .s-compare .panel_img { position: relative; } .mod-freeHTML .s-compare .panel_img_main { margin: auto; } .mod-freeHTML .s-compare .panel_img_main--normal { width: 89.2%; } .mod-freeHTML .s-compare .panel_img_main--large { width: 89.8%; } .mod-freeHTML .s-compare .panel_img_sub { position: absolute; } .mod-freeHTML .s-compare .panel_img_sub--normal { top: -12em; left: 3em; width: 21%; } .mod-freeHTML .s-compare .panel_img_sub--large { top: 2em; left: -2em; width: 29.5%; } .mod-freeHTML .s-compare .panel_btnblk { margin: clamp(0px, 2.6vw, 40px) auto 0; } .mod-freeHTML .s-compare .panel_btnblk--orange { color: #EA6302; } .mod-freeHTML .s-compare .panel_btnblk--blue { color: #0096E5; } .mod-freeHTML .s-compare .panel_btnblk_ttl { margin: 0; margin-bottom: clamp(0px, 0.2vw, 3px); font-weight: 700; font-size: 20px; letter-spacing: 0.06em; text-align: center; } .mod-freeHTML .s-compare .panel_btnblk_btn { aspect-ratio: 484/60; width: 48.4%; font-weight: 700; font-size: 20px; } .mod-freeHTML .s-compare .panel_btnblk_btn button { position: relative; border: none; outline: none; cursor: pointer; transition: all 0.3s; } .mod-freeHTML .s-compare .panel_btnblk_btn button:hover { opacity: 0.6; } .mod-freeHTML .s-compare .panel_btnblk_btn .icoArw02 { position: absolute; right: 1em; left: auto; } .mod-freeHTML .s-compare .panel_btnblk_desc { margin: 0; margin-top: clamp(0px, 0.78vw, 12px); font-weight: 400; font-size: 12px; text-align: center; } .mod-freeHTML .s-service__ttl_wrap { position: relative; } .mod-freeHTML .s-service__ttl_wrap::after { position: absolute; top: 0; top: -80%; right: 0; right: auto; bottom: 0; bottom: auto; left: 0; left: -7em; width: clamp(0px, 8.98vw, 138px); height: clamp(0px, 8.98vw, 138px); margin: auto; background-image: url(/-/media/cojp/product/printer/special/inkjet-comparison-2025/img/service-icon); background-position: center center; background-size: cover; background-repeat: no-repeat; content: ""; } .mod-freeHTML .s-service__ttl { margin-bottom: clamp(0px, 2.6vw, 40px); } .mod-freeHTML .s-service__list { display: flex; flex-direction: row; flex-wrap: wrap; align-items: stretch; justify-content: space-between; gap: 0 clamp(0px, 2.08vw, 32px); } .mod-freeHTML .s-service__list_item { width: 48.4%; } .mod-freeHTML .s-service__list_item .item-img { position: relative; } .mod-freeHTML .s-service__list_item .item-img::before { position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; content: ""; } .mod-freeHTML .s-service__list_item .item-img--01::before { top: auto; right: auto; bottom: 3em; left: -12em; aspect-ratio: 160/166; width: 33.0578512397%; background-image: url(/-/media/cojp/product/printer/special/inkjet-comparison-2025/img/service-imgico01); background-position: center center; background-size: cover; background-repeat: no-repeat; } .mod-freeHTML .s-service__list_item .item-img--02::before { top: auto; right: -6em; bottom: 3em; left: auto; aspect-ratio: 145/324; width: 29.958677686%; background-image: url(/-/media/cojp/product/printer/special/inkjet-comparison-2025/img/service-imgico02); background-position: center center; background-size: cover; background-repeat: no-repeat; } .mod-freeHTML .s-service__list_item .item-img .c-btn01 { position: absolute; top: auto; right: 0; bottom: 2.7em; left: 0; aspect-ratio: 312/41; width: 64.4628099174%; margin: auto; font-weight: 700; font-size: 14px; letter-spacing: 0.06em; } .mod-freeHTML .s-service__list_item .item-img .c-btn01 a { position: relative; } .mod-freeHTML .s-service__list_item .item-img .c-btn01 .icoArw02 { right: -1em; } .mod-freeHTML .s-service__list_item .item-desc { margin: 0; margin-top: clamp(0px, 1.3vw, 20px); color: #fff; font-weight: 400; font-size: 12px; line-height: 1.33; } .mod-freeHTML .s-lineup__ttl { margin-bottom: clamp(0px, 4.17vw, 64px); } .mod-freeHTML .s-lineup__ttl02 { margin-bottom: clamp(0px, 1.56vw, 24px); } .mod-freeHTML .s-lineup__cont-ttl { margin-bottom: clamp(0px, 1.3vw, 20px); font-weight: 700; font-size: 41px; letter-spacing: 0.06em; text-align: center; } .mod-freeHTML .s-lineup__cont-ttl--blue { color: #0096E5; } .mod-freeHTML .s-lineup__cont-ttl--orange { color: #EA6302; } .mod-freeHTML .s-lineup__cont-ttl span { font-weight: 700; font-size: 54px; } .mod-freeHTML .s-lineup__cont-list { display: flex; flex-direction: row; flex-wrap: wrap; align-items: stretch; justify-content: space-between; margin-bottom: clamp(0px, 2.6vw, 40px); gap: clamp(0px, 1.63vw, 25px) clamp(0px, 2.08vw, 32px); } .mod-freeHTML .s-lineup__cont-list .list-item { width: 48.4%; } .mod-freeHTML .s-lineup__cont-list .list-item__ttl { font-weight: 700; font-size: 25px; letter-spacing: 0.06em; text-align: center; } .mod-freeHTML .s-lineup__cont-list .list-item__box { display: flex; flex-direction: row; flex-wrap: wrap; align-items: stretch; justify-content: space-between; } .mod-freeHTML .s-lineup__cont-list .list-item__img { width: 48.7068965517%; margin: auto 0; } .mod-freeHTML .s-lineup__cont-list .list-item__txt { display: flex; flex-direction: column; flex-wrap: wrap; align-items: stretch; justify-content: space-between; width: 48.7068965517%; } .mod-freeHTML .s-lineup__cont-list .list-item__txt_desc { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: flex-start; margin-top: clamp(0px, 1.11vw, 17px); gap: 0.6em; } .mod-freeHTML .s-lineup__cont-list .list-item__txt_desc span { display: block; padding: 0.05em 0.3em; font-weight: 500; font-size: 13px; } .mod-freeHTML .s-lineup__cont-list .list-item__txt_desc--blue span { background-color: rgba(0, 150, 229, 0.1); color: #0096E5; } .mod-freeHTML .s-lineup__cont-list .list-item__txt_desc--orange span { background-color: rgba(234, 99, 2, 0.1); color: #EA6302; } .mod-freeHTML .s-lineup__cont-list .list-item__txt_btn { position: relative; aspect-ratio: 226/41; width: 100%; margin: auto auto clamp(0px, 1.3vw, 20px); font-weight: 700; font-size: 14px; letter-spacing: 0.06em; } .mod-freeHTML .s-lineup__cont-list .list-item__txt_btn .icoArw02 { position: absolute; right: 1.5em; } .mod-freeHTML .s-bannerbox { padding-bottom: clamp(0px, 8.46vw, 130px); } .mod-freeHTML .s-bannerbox__list { display: flex; flex-direction: row; flex-wrap: wrap; align-items: stretch; justify-content: space-between; gap: clamp(0px, 2.6vw, 40px); } .mod-freeHTML .s-bannerbox__list li { width: 48%; } @media screen and (max-width: 1536px) { body { margin: 0; } } @media screen and (max-width: 1500px) { body { margin: 0; } .mod-freeHTML { font-size: 0.625vw; } } @media screen and (max-width: 1289px) { body { margin: 0; } .mod-freeHTML { font-size: 0.6666666667vw; } .mod-freeHTML .c-inner01 { width: 90%; } .mod-freeHTML .c-ttl01 { font-size: clamp(24px, 2.08vw, 32px); } .mod-freeHTML .c-ttl01__small { font-size: clamp(14px, 1.43vw, 22px); } .mod-freeHTML .c-ttl02 { font-size: clamp(10px, 1.17vw, 18px); } .mod-freeHTML .c-ttl02 span { font-size: clamp(18px, 1.69vw, 26px); } .mod-freeHTML .c-ttl03 { font-size: clamp(22px, 2.08vw, 32px); } .mod-freeHTML .c-ttl03__small { font-size: clamp(18px, 1.3vw, 20px); } .mod-freeHTML .s-sublink__list-link { font-size: clamp(14px, 1.17vw, 18px); } .mod-freeHTML .s-sublink__desc { font-size: clamp(14px, 1.17vw, 18px); } .mod-freeHTML .s-model .c-btn01 { font-size: clamp(12px, 0.91vw, 14px); } .mod-freeHTML .s-features__desc { font-size: clamp(18px, 1.56vw, 24px); } .mod-freeHTML .s-features__list_item .item-desc { font-size: clamp(14px, 1.17vw, 18px); } .mod-freeHTML .s-features__list_item .item-desc_small { font-size: clamp(12px, 0.78vw, 12px); } .mod-freeHTML .s-compare .panel_ttl { font-size: clamp(36px, 2.99vw, 46px); } .mod-freeHTML .s-compare .panel_btnblk_ttl { font-size: clamp(16px, 1.3vw, 20px); } .mod-freeHTML .s-compare .panel_btnblk_btn { font-size: clamp(17px, 1.3vw, 20px); } .mod-freeHTML .s-compare .panel_btnblk_desc { font-size: clamp(12px, 0.78vw, 12px); } .mod-freeHTML .s-service__list_item .item-img .c-btn01 { font-size: clamp(10px, 0.91vw, 14px); } .mod-freeHTML .s-service__list_item .item-desc { font-size: clamp(12px, 0.78vw, 12px); } .mod-freeHTML .s-lineup__cont-ttl { font-size: clamp(26px, 2.67vw, 41px); } .mod-freeHTML .s-lineup__cont-ttl span { font-size: clamp(34px, 3.52vw, 54px); } .mod-freeHTML .s-lineup__cont-list .list-item__ttl { font-size: clamp(20px, 1.63vw, 25px); } .mod-freeHTML .s-lineup__cont-list .list-item__txt_desc span { font-size: clamp(12px, 0.85vw, 13px); } .mod-freeHTML .s-lineup__cont-list .list-item__txt_btn { font-size: clamp(13px, 0.91vw, 14px); } } @media screen and (max-width: 1024px) { body { margin: 0; } } @media screen and (max-width: 896px) { body { margin: 0; } .mod-freeHTML { font-size: 2.6666666667vw; } .mod-freeHTML .c-inner01 { width: 86.6%; } .mod-freeHTML .c-ttl01 { padding: 4.8vw 0; background-image: linear-gradient(-45deg, transparent 4vw, #0067B2 4vw); font-size: 20px; line-height: 1.5; } .mod-freeHTML .c-ttl01::before { border-width: 0 0 5.87vw 5.87vw; } .mod-freeHTML .c-ttl01__small { font-size: 14px; line-height: 1.4; } .mod-freeHTML .c-ttl02 { font-size: 18px; line-height: 1.3; } .mod-freeHTML .c-ttl02 span { font-size: 26px; } .mod-freeHTML .c-ttl03 { font-size: 22px; } .mod-freeHTML .c-ttl03__small { font-size: 18px; } .icoArw02 { width: 1.33vw; height: 2.13vw; } .mod-freeHTML .tabs__tablist { margin-bottom: 4.53vw; } .mod-freeHTML .tabs__tab { width: auto; } .mod-freeHTML .tabs__tab[aria-selected=true].tab-01, .mod-freeHTML .tabs__tab[aria-selected=true].tab-02 { width: 67%; } .mod-freeHTML .tabs__tab[aria-selected=false].tab-01, .mod-freeHTML .tabs__tab[aria-selected=false].tab-02 { width: 30%; } .mod-freeHTML .tabs__panel { padding: 16vw 0 10.67vw; border-width: 2px; border-radius: 2.67vw; } .mod-freeHTML .tabs__panel--blue { padding-top: 21.33vw; } .mod-freeHTML .tabs__panel--orange { padding-top: 4.53vw; } .mod-freeHTML .sp { display: block !important; } .mod-freeHTML .pc { display: none !important; } .mod-freeHTML .s-mv { margin-bottom: 10.67vw; } .mod-freeHTML .s-sublink { margin-bottom: 10.67vw; } .mod-freeHTML .s-sublink__list { margin-bottom: 10.67vw; gap: 2.67vw; } .mod-freeHTML .s-sublink__list-item { aspect-ratio: 157/66; width: 41.87vw; border-radius: 2.67vw; } .mod-freeHTML .s-sublink__list-link { font-size: 15px; line-height: 1.2; } .mod-freeHTML .s-sublink__list-link span { padding-bottom: 2.67vw; } .mod-freeHTML .s-sublink__list-link .icoArw01 { bottom: 1.6vw; width: 3.73vw; height: 2.13vw; } .mod-freeHTML .s-sublink__desc { margin-bottom: 17.07vw; font-size: 16px; line-height: 1.88; text-align: left; } .mod-freeHTML .s-model { padding-bottom: 10.67vw; } .mod-freeHTML .s-model__ttl { margin-bottom: 6.4vw; } .mod-freeHTML .s-model__cont { display: flex; flex-direction: column; flex-wrap: wrap; align-items: stretch; justify-content: flex-start; gap: 6.4vw 0; } .mod-freeHTML .s-model__cont-box { width: 100%; } .mod-freeHTML .s-model__cont-box_ttl { margin-bottom: 3.2vw; } .mod-freeHTML .s-model__cont-list_item { width: 41.87vw; } .mod-freeHTML .s-model__cont-list_item .item-img { margin-bottom: 3.2vw; } .mod-freeHTML .s-model__cont-list_item:not(:last-child)::before { right: -0.6em; } .mod-freeHTML .s-model .c-btn01 { aspect-ratio: 157/36; font-size: 13px; line-height: 1.15; letter-spacing: -0.02em; text-align: center; } .mod-freeHTML .s-model .c-btn01 .icoArw01 { width: 2.13vw; height: 1.33vw; } .mod-freeHTML .c-wparea { padding: 10.67vw 0; } .mod-freeHTML .s-features__ttl { margin-bottom: 4.27vw; } .mod-freeHTML .s-features__desc { margin-bottom: 5.33vw; font-size: 18px; line-height: 1.44; } .mod-freeHTML .s-features__list { display: flex; flex-direction: column; flex-wrap: wrap; align-items: stretch; justify-content: flex-start; margin-bottom: 17.07vw; gap: 3.2vw 0; } .mod-freeHTML .s-features__list--point { margin-bottom: 0; gap: 3.2vw 0; } .mod-freeHTML .s-features__list_item { width: 100%; padding: 5.33vw 0; border-width: 2px; border-radius: 2.67vw; } .mod-freeHTML .s-features__list_item--point { width: 100%; } .mod-freeHTML .s-features__list_item .item-ttl { margin-bottom: 3.47vw; } .mod-freeHTML .s-features__list_item .item-flex { display: flex; flex-direction: row; flex-wrap: wrap; flex-wrap: nowrap; align-items: flex-start; justify-content: space-between; margin: 0 5.33vw; gap: 0 2.13vw; } .mod-freeHTML .s-features__list_item .item-img { aspect-ratio: unset; width: 56.8vw; margin: 0 auto 2.67vw; } .mod-freeHTML .s-features__list_item .item-img--compact::before { left: -6.5em; width: 37.87vw; height: 33.87vw; } .mod-freeHTML .s-features__list_item .item-img--adf { width: 31.2vw; margin: 0; } .mod-freeHTML .s-features__list_item .item-img--black-only { width: 23.47vw; } .mod-freeHTML .s-features__list_item .item-img--book-copy { width: 38.93vw; margin-bottom: 0; } .mod-freeHTML .s-features__list_item .item-desc { padding: 0 4.27vw; font-size: 14px; line-height: 1.43; } .mod-freeHTML .s-features__list_item .item-desc--point { width: 42.67vw; padding: 0; } .mod-freeHTML .s-features__list_item .item-desc_small { margin-top: 1.87vw; padding: 0 4.27vw; } .mod-freeHTML .s-compare__ttl { margin-bottom: 4.27vw; padding: 8vw 0; } .mod-freeHTML .s-compare .panel_ttl { font-size: 25px; } .mod-freeHTML .s-compare .panel_ttl--blue { top: 16vw; } .mod-freeHTML .s-compare .panel_ttl--orange { top: 12vw; line-height: 1; } .mod-freeHTML .s-compare .panel_img_main--normal { width: 81.87vw; margin-right: 0; margin-left: 2.67vw; } .mod-freeHTML .s-compare .panel_img_main--large { width: 81.87vw; margin-right: 0; margin-left: 2.67vw; } .mod-freeHTML .s-compare .panel_img_sub--normal { top: -9em; left: -3.5em; width: 85.6vw; } .mod-freeHTML .s-compare .panel_img_sub--large { top: -2.5em; left: -3em; width: 70.13vw; } .mod-freeHTML .s-compare .panel_btnblk { margin-top: 5.33vw; } .mod-freeHTML .s-compare .panel_btnblk_ttl { margin-bottom: 2.93vw; font-size: 16px; letter-spacing: 0; } .mod-freeHTML .s-compare .panel_btnblk_btn { aspect-ratio: 270/60; width: 72vw; font-size: 17px; } .mod-freeHTML .s-compare .panel_btnblk_desc { margin-top: 2.67vw; font-size: 12px; } .mod-freeHTML .s-service__ttl_wrap::after { top: -35%; left: -2em; width: 17.07vw; height: 17.07vw; } .mod-freeHTML .s-service__ttl { margin-bottom: 4.27vw; } .mod-freeHTML .s-service__list { display: flex; flex-direction: column; flex-wrap: wrap; align-items: stretch; justify-content: flex-start; gap: 6.67vw 0; } .mod-freeHTML .s-service__list_item { width: 100%; } .mod-freeHTML .s-service__list_item .item-img--01::before { top: -2em; bottom: auto; left: -3em; aspect-ratio: 83/86; width: 24vw; } .mod-freeHTML .s-service__list_item .item-img--02::before { z-index: 1; right: -2em; bottom: -1em; aspect-ratio: 67/201; width: 17.87vw; background-image: url(/-/media/cojp/product/printer/special/inkjet-comparison-2025/img/service-imgico02sp); background-position: center center; background-size: cover; background-repeat: no-repeat; } .mod-freeHTML .s-service__list_item .item-img .c-btn01 { bottom: 1.2em; aspect-ratio: 270/41; width: 72vw; font-size: 14px; letter-spacing: 0; } .mod-freeHTML .s-service__list_item .item-img .c-btn01 .icoArw02 { right: -0.5em; } .mod-freeHTML .s-service__list_item .item-desc { margin-top: 2.67vw; font-size: 12px; } .mod-freeHTML .s-lineup__ttl { margin-bottom: 10.67vw; } .mod-freeHTML .s-lineup__ttl02 { margin-bottom: 5.33vw; } .mod-freeHTML .s-lineup__cont-ttl { margin-bottom: 4vw; font-size: 26px; } .mod-freeHTML .s-lineup__cont-ttl span { font-size: 34px; } .mod-freeHTML .s-lineup__cont-list { display: flex; flex-direction: column; flex-wrap: wrap; align-items: stretch; justify-content: flex-start; margin-bottom: 10.67vw; gap: 5.33vw 0; } .mod-freeHTML .s-lineup__cont-list .list-item { width: 100%; } .mod-freeHTML .s-lineup__cont-list .list-item__ttl { margin-bottom: 1.33vw; font-size: 20px; } .mod-freeHTML .s-lineup__cont-list .list-item__img { width: 29.87vw; margin: auto 0; } .mod-freeHTML .s-lineup__cont-list .list-item__txt { justify-content: flex-start; width: calc(100% - 32vw); } .mod-freeHTML .s-lineup__cont-list .list-item__txt_desc { margin-top: 0; gap: 0.5em; } .mod-freeHTML .s-lineup__cont-list .list-item__txt_desc span { font-size: 12px; } .mod-freeHTML .s-lineup__cont-list .list-item__txt_btn { aspect-ratio: 157/36; width: 41.87vw; margin-top: 5.33vw; margin-bottom: 0; margin-left: 0; font-size: 13px; letter-spacing: 0.02em; } .mod-freeHTML .s-bannerbox { padding-bottom: 24vw; } .mod-freeHTML .s-bannerbox__list { display: flex; flex-direction: column; flex-wrap: wrap; align-items: stretch; justify-content: flex-start; gap: 3.2vw 0; } .mod-freeHTML .s-bannerbox__list li { width: 100%; } } @media screen and (max-width: 599px) { body { margin: 0; } } @media screen and (max-width: 374px) { body { margin: 0; } } @media screen and (max-width: 319px) { body { margin: 0; } } @media screen and (min-width: 1921px) { .mod-freeHTML { font-size: 0.5208333333vw; } .mod-freeHTML img { width: 100%; } .mod-freeHTML .c-inner01 { width: clamp(0px, 65.1vw, 1000px) !important; max-width: none; } } @media screen and (min-width: 1501px) { .mod-freeHTML .c-inner01 { width: 1000px; } } @media screen and (max-width: 896px) and (max-width: 896px) { .mod-freeHTML .c-ttl01 { font-size: 5.33vw; } .mod-freeHTML .c-ttl01__small { font-size: 3.73vw; } .mod-freeHTML .c-ttl02 { font-size: 4.8vw; } .mod-freeHTML .c-ttl02 span { font-size: 6.93vw; } .mod-freeHTML .c-ttl03 { font-size: 5.87vw; } .mod-freeHTML .c-ttl03__small { font-size: 4.8vw; } .mod-freeHTML .s-sublink__list-link { font-size: 4vw; } .mod-freeHTML .s-sublink__desc { font-size: 4.27vw; } .mod-freeHTML .s-model .c-btn01 { font-size: 3.47vw; } .mod-freeHTML .s-features__desc { font-size: 4.8vw; } .mod-freeHTML .s-features__list_item .item-desc { font-size: 3.73vw; } .mod-freeHTML .s-compare .panel_ttl { font-size: 6.67vw; } .mod-freeHTML .s-compare .panel_btnblk_ttl { font-size: 4.27vw; } .mod-freeHTML .s-compare .panel_btnblk_btn { font-size: 4.53vw; } .mod-freeHTML .s-compare .panel_btnblk_desc { font-size: 3.2vw; } .mod-freeHTML .s-service__list_item .item-img .c-btn01 { font-size: 3.73vw; } .mod-freeHTML .s-service__list_item .item-desc { font-size: 3.2vw; } .mod-freeHTML .s-lineup__cont-ttl { font-size: 6.93vw; } .mod-freeHTML .s-lineup__cont-ttl span { font-size: 9.07vw; } .mod-freeHTML .s-lineup__cont-list .list-item__ttl { font-size: 5.33vw; } .mod-freeHTML .s-lineup__cont-list .list-item__txt_desc span { font-size: 3.2vw; } .mod-freeHTML .s-lineup__cont-list .list-item__txt_btn { font-size: 3.47vw; } } @media (prefers-reduced-motion: reduce) { .mod-freeHTML * { scroll-behavior: auto !important; } }