.mod-freeWide{ margin-right: calc((100vw - 1052px) / -2); margin-left: calc((100vw - 1052px) / -2); } .mod-freeWide_inner{ max-width: 1052px; padding: 0 10px; margin: 0 auto; } @media screen and (max-width: 1072px){ .mod-freeWide { margin-right: -10px!important; margin-left: -10px!important; } } #mainVisual .mod-freeWide_inner{ padding: 0; width: 100%; } .mainVisual-image{ margin: 0; width: 100%; } .mainVisual-image img{ width: 100%; } figure{ margin: 0; } ul{ list-style: none; margin: 0; padding: 0; } h3{ margin: 0; } p{ margin: 0; } /*--mod-pageMenu----------------------------------------------------------------------------------*/ .mod-pageMenu{ display: flex; list-style-type: none; justify-content: space-between; padding: 0; margin-top: -20px; margin-left: -20px; margin-bottom: 0; position: relative; } .mod-pageMenu-btn{ width: calc(50% - 8.5px); max-width: 516px; height: 90px; box-sizing: border-box; border: solid 2px #456295; margin-left: 20px; margin-top: 20px; position: relative; } .mod-pageMenu-btn a{ font-size: 16px; font-weight: bold; line-height: 1.1; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; text-align: center; color: #456295; font-weight: bold; position: relative; } .mod-pageMenu-btn a span{ display: flex; align-items: center; padding-left: 20px; } .mod-pageMenu-btn span:after{ content: ""; display: inline-block; vertical-align: middle; text-decoration: none; width: 6px; height: 6px; border-top: 2px solid #456295; border-right: 2px solid #456295; -webkit-transform: rotate(45deg); transform: rotate(45deg); margin-left: 20px; } .mod-pageMenu-btn a:before{ content:''; display: inline-block; background-size: 100% 100%; background-repeat: no-repeat; width: 45px; height: 45px; position: absolute; top: 0; bottom: 0; left: 10px; margin: auto; } .mod-pageMenu-btn.btn01 a:before{ background-image: url("/-/media/cojp/product/mwprinter/img/top-202202/icon/pageMenu-btn01"); } .mod-pageMenu-btn.btn02 a:before{ background-image: url("/-/media/cojp/product/mwprinter/img/top-202202/icon/pageMenu-btn02"); } @media only screen and (max-width: 640px) { .mod-pageMenu{ justify-content: center; margin-top: -10px; margin-left: -10px; padding-bottom: 30px; } .mod-pageMenu:after{ content:none; } .mod-pageMenu-btn{ width: calc(50% - 10px); height: auto; padding: 18px 0 20px; margin-left: 10px; margin-top: 10px; border: solid 3px #456295; } .mod-pageMenu-btn:after{ width: 5px; height: 5px; bottom: 5px; } .mod-pageMenu-btn a{ font-size: 12px; line-height: 1.1; } .mod-pageMenu-btn a:before{ width: 30px; height: 30px; left: 5px; } .mod-pageMenu-btn a span{ padding-left: 0px; position: static; } .mod-pageMenu-btn span:after{ margin-left: 0; position: absolute; top: 0; right: 13px; bottom: 0; margin: auto; } } @media only screen and (max-width: 360px) { .mod-pageMenu-btn a{ font-size: 11px; } .mod-pageMenu-btn a:before{ width: 20px; height: 20px; left: 5px; } } /*--mod-sectionMenu---------------------------------------------------------*/ .mod-sectionMenu{ display: flex; list-style-type: none; flex-wrap: wrap; justify-content: space-between; padding: 0; margin-top: -20px; margin-bottom: 0; position: relative; } .mod-sectionMenu.u-border_bottom{ border-bottom: solid 1px #d9d9d9; } .mod-sectionMenu-btn{ max-width: 516px; width: calc(50% - 8.5px); height: 60px; box-sizing: border-box; border: solid 2px #456295; margin-top: 20px; position: relative; line-height: 1.1; } .mod-sectionMenu-btn:after{ content: ""; display: inline-block; vertical-align: middle; text-decoration: none; width: 6px; height: 6px; border-top: 2px solid #456295; border-right: 2px solid #456295; -webkit-transform: rotate(135deg); transform: rotate(135deg); position: absolute; right: 0; left: 0; bottom: 6px; margin: auto; } .mod-sectionMenu-btn.u-reverse:after{ -webkit-transform: rotate(-45deg); transform: rotate(-45deg); position: absolute; right: 0; left: 0; bottom: initial; top: 8px; margin: auto; } .mod-sectionMenu-btn a{ width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; text-align: center; color: #456295; font-weight: bold; } @media only screen and (max-width: 640px) { .mod-sectionMenu{ margin-top: -10px; margin-left: -10px; padding-bottom: 30px; justify-content: center; } .mod-sectionMenu:after{ width: calc(100% - 10px); left: 10px; } .mod-sectionMenu-btn{ width: calc(50% - 10px); height: auto; padding: 23px 0; margin-left: 10px; margin-top: 10px; } .mod-sectionMenu-btn:after{ width: 5px; height: 5px; bottom: 5px; } .mod-sectionMenu-btn.u-reverse:after{ top: 6px; } .mod-sectionMenu-btn a{ font-size: 12px; } } .mod-sectionMenu-btn a span{ position: relative; } .mod-sectionMenu-btn a span:before{ content:''; display: inline-block; background-size: 100% 100%; background-repeat: no-repeat; position: absolute; top: 0; bottom: 0; left: -45px; margin: auto; } @media only screen and (max-width: 360px) { .mod-sectionMenu-btn a{ font-size: 11px; } .mod-sectionMenu-btn a span{ font-size: 11px; margin-left: 20px; } } .mod-sectionMenu-btn.btn01 a span{ padding-left: 30px; } .mod-sectionMenu-btn.btn01 a span:before{ background-image: url("/-/media/cojp/product/mwprinter/img/top-202202/icon/icon01"); width: 18px; height: 21px; left: 0; } .mod-sectionMenu-btn.btn02 a span{ padding-left: 38px; } .mod-sectionMenu-btn.btn02 a span:before{ background-image: url("/-/media/cojp/product/mwprinter/img/top-202202/icon/icon02"); width: 26px; height: 18px; left: 0; } @media only screen and (max-width: 640px) { .mod-sectionMenu-btn.btn01 a span{ margin-left: 0; } .mod-sectionMenu-btn.btn01 a span:before{ width: 20px; height: 23px; } .mod-sectionMenu-btn.btn02 a span{ margin-left: 0; } .mod-sectionMenu-btn.btn02 a span:before{ background-image: url("/-/media/cojp/product/mwprinter/img/top-202202/icon/icon02"); width: 29px; height: 21px; left: 0; } } /*------------------------------------------------------------------------------------*/ .mod-blackBtn { background-color: #1a1a1a; box-sizing: border-box; display: block; text-align: center; padding: 8px; } .mod-blackBtn span { font-size: 14px; color: #ffffff; } .mod-blackBtn span:after { content: ""; display: inline-block; vertical-align: middle; text-decoration: none; width: 6px; height: 6px; border-top: 2px solid #fff; border-right: 2px solid #fff; -webkit-transform: rotate(45deg); transform: rotate(45deg); margin-top: -0.25em; margin-left: 8px; } /*------------------------------------------------------------------------------------*/ .mod-sectionHeading { color: #ffffff; font-size: 24px; line-height: 1.3; font-weight: bold; padding: 14px 20px; background-color: #456295; } .mod-bgGray-heading{ background-color: #f2f2f2; font-size: 18px; font-weight: bold; border-left: 5px solid #456295; padding: 15px 15px 10px 25px; } .mod-blue-heading{ padding-bottom: 7px; border-bottom: 1px solid #456295; } .mod-blue-heading span{ font-size: 16px; font-weight: bold; display: block; border-left: solid 5px #456295; padding-left: 15px; } .mod-iconHeading { background-color: #f2f2f2; font-size: 16px; line-height: 1.3; font-weight: bold; border-left: 5px solid #456295; padding: 14px 15px 14px 20px; } .mod-iconHeading span { position: relative; padding-left: 27px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .mod-iconHeading span:before{ content: ''; display: inline-block; background-size: 100% 100%; background-repeat: no-repeat; position: absolute; top: 50%; left: 0; transform: translateY(-50%); display: flex; align-items: center; } @media screen and (max-width: 640px){ .mod-sectionHeading { font-size: 20px; font-weight: bold; padding: 10px 18px; } .mod-bgGray-heading{ font-size: 16px; padding: 8px 10px 8px 12px; } .mod-iconHeading { font-size: 16px; padding: 10px 12px 9px 9px; } .mod-iconHeading span { padding-left: 30px; } } #contents01.mod-iconHeading span:before { background-image: url("/-/media/cojp/product/mwprinter/img/top-202202/icon/icon01"); width: 20px; height: 23px; } #contents02.mod-iconHeading span{ padding-left: 35px; } #contents02.mod-iconHeading span:before { background-image: url("/-/media/cojp/product/mwprinter/img/top-202202/icon/icon02"); width: 29px; height: 21px; } @media screen and (max-width: 640px){ #contents01.mod-iconHeading span:before { width: 18px; height: 21px; left: 0; } #contents02.mod-iconHeading span:before { width: 26px; height: 18px; } } .mod-borderHeading{ padding: 10px 0; border-top: solid 1px #d9d9d9; border-bottom: solid 1px #d9d9d9; } .mod-borderHeading span{ display: block; font-size: 20px; font-weight: bold; line-height: 1.5; font-weight: bold; margin: 0; padding-left: 14px; border-left: solid 5px #666666; } .mod-linkList{ margin: 28px 0 auto; } @media screen and (max-width: 640px){ .mod-borderHeading span{ font-size: 16px; padding-left: 20px; } .mod-linkList{ margin-top: 10px; } } /*------------------------------------------------------------------------------------*/ .mod-productDocument { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .mod-productDocument_img { max-width: 525px; margin: 0 28px 0 0; } .mod-productDocument_text { max-width: 498px; margin: 0; line-height: 1.72; } @media screen and (max-width: 640px){ .mod-productDocument { display: block; padding-bottom: 30px; } .mod-productDocument_img { max-width: 100%; margin-right: 0; } .mod-productDocument_text { max-width: 100%; margin-top: 15px; line-height: 1.714; } } /*--mod-productLineUp2-----------------------------------------------------*/ .mod-productLineUp2 { margin-bottom: 0; border-bottom: solid 1px #d9d9d9; margin-top: 30px; padding-bottom: 30px; } .mod-productLineUp2 + .mod-iconHeading { margin-top: 50px; } .mod-productLineUp2_heading { font-weight: bold; margin: 0 0 10px; } .mod-productLineUp2_item{ position: relative; padding-bottom: 62px; } .mod-productLineUp2_item:first-child { position: relative; } .mod-productLineUp2_item:first-child:after { content: ""; display: inline-block; width: 1px; height: 100%; background-color: #d9d9d9; position: absolute; top: 0; right: -22px; } .mod-productLineUp2_desc { margin-top: 10px; } .mod-productLineUp2_btn { width: 240px; margin: 0 auto 0; background-color: #1a1a1a; display: block; text-align: center; padding: 8px 0; position: absolute; right: 0; left: 0; bottom: 0; margin: auto; } .mod-productLineUp2_btn span { font-size: 14px; color: #ffffff; } .mod-productLineUp2_btn span:after { content: ""; display: inline-block; vertical-align: middle; text-decoration: none; width: 6px; height: 6px; border-top: 2px solid #fff; border-right: 2px solid #fff; -webkit-transform: rotate(45deg); transform: rotate(45deg); margin-top: -0.25em; margin-left: 8px; } @media screen and (max-width: 640px){ .mod-productLineUp2 { padding-bottom: 0px; border-bottom: none; margin-top: 20px; } .mod-productLineUp2 + .mod-productLineUp2 { margin-top: 30px; } .mod-productLineUp2 + .mod-iconHeading { margin-top: 30px; } .mod-productLineUp2_item{ border-bottom: solid 1px #d9d9d9; padding-bottom: 30px; margin-bottom: 30px; } .mod-productLineUp2_item:first-child:after { content: none; } .mod-productLineUp2_img{ width: 50%; } .mod-productLineUp2_text{ width: calc(50% - 10px); margin-left: 10px; } .mod-productLineUp2_heading{ line-height: 1.2; font-size: 17px; padding-left: 12px; text-indent: -12px; } .mod-productLineUp2_desc { margin-top: 10px; } .mod-productLineUp2_list_feature2 li{ line-height: 1.5; } .mod-productLineUp2_btn { width: 225px; margin: 10px auto 0; background-color: #1a1a1a; display: block; text-align: center; padding: 8px; position: static; } .mod-productLineUp2_btn span { font-size: 14px; color: #ffffff; } .mod-productLineUp2_btn span:after { content: ""; display: inline-block; vertical-align: middle; text-decoration: none; width: 6px; height: 6px; border-top: 2px solid #fff; border-right: 2px solid #fff; -webkit-transform: rotate(45deg); transform: rotate(45deg); margin-top: -0.25em; margin-left: 8px; } } .mod-productLineUp2.u-3column .mod-productLineUp2_inner{ margin-left: -30px; } .mod-productLineUp2.u-3column .mod-productLineUp2_item{ width: calc((100% - 30px * 3) / 3); margin-left: 30px; padding: 0; margin-bottom: 35px; } .mod-productLineUp2.u-3column .mod-productLineUp2_item .mod-productLineUp2_heading{ font-size: 14px; } .mod-productLineUp2.u-3column + .mod-productLineUp2{ margin-top: 25px; } .mod-productLineUp2.u-3column .mod-productLineUp2_text{ width: 80%; } .mod-productLineUp2.u-3column .mod-productLineUp2_item:first-child:after { right: -11px; } .mod-productLineUp2.u-3column .mod-productLineUp2_item:nth-child(2){ position: relative; } .mod-productLineUp2.u-3column .mod-productLineUp2_item:nth-child(2):after { content: ""; display: inline-block; width: 1px; height: 100%; background-color: #d9d9d9; position: absolute; top: 0; right: -11px; } .mod-productLineUp2.u-3column .mod-productLineUp2_img{ width: 55%; } .mod-productLineUp2.u-3column .mod-productLineUp2_text{ margin-left: 0; } .mod-productLineUp2.u-3column .mod-productLineUp2_heading a{ color: #456295; text-decoration: underline; } .mod-productLineUp2.u-3column .mod-productLineUp2_heading a:before{ border-top: 2px solid #456295; border-right: 2px solid #456295; } @media screen and (max-width: 900px){ .mod-productLineUp2.u-3column .mod-productLineUp2_text{ width: 100%; } } @media screen and (max-width: 640px){ .mod-productLineUp2.u-3column{ border-bottom: none; margin-bottom: 0; } .mod-productLineUp2.u-3column .mod-productLineUp2_inner{ margin-left: -30px; } .mod-productLineUp2.u-3column .mod-productLineUp2_item{ width: calc((100% - 30px * 1) / 1); margin-left: 30px; border-bottom: solid 1px #d9d9d9; padding-bottom: 10px; } .mod-productLineUp2.u-3column .mod-productLineUp2_grid{ justify-content: space-between; } .mod-productLineUp2.u-3column .mod-productLineUp2_img{ width: 48%; } .mod-productLineUp2.u-3column .mod-productLineUp2_box{ width: 48%; } .mod-productLineUp2.u-3column .mod-productLineUp2_text{ width: 100%; } .mod-productLineUp2.u-3column .mod-productLineUp2_item:nth-child(2):after { content: none; } .mod-productLineUp2.u-3column .mod-productLineUp2_item:nth-child(2):after { content: none; } } .mod-productLineUp2_data{ font-size: 12px; margin: 5px 0 0; } .mod-productLineUp2_data span{ font-size: 10px; } /*------------------------------------------------------------------------------------*/ .mod-headingLv1{ margin-bottom: 50px; } @media screen and (max-width: 640px){ .mod-headingLv1{ margin-bottom: 0; } } .mod-media7013{ border-bottom: solid 1px #d9d9d9; padding-bottom: 50px; } .mod-media7013_text a:before{ border-top: 2px solid #456295; border-right: 2px solid #456295; } .mod-bannerList.u-border_bottom{ border-bottom: solid 1px #d9d9d9; } .mod-bannerList-grid4 ul{ justify-content: space-around; } .mod-bannerList-grid4 li{ width: auto; text-align: center; } .mod-bannerList-grid4 p{ text-align: center; } .mod-media7013 li{ margin-bottom: 35px; } @media screen and (max-width: 640px){ .mod-bannerList-grid4 ul{ display: flex; justify-content: center; } .mod-bannerList-grid4 ul li{ width: calc(50% - 20px); } .mod-media7013_img{ width: 49%; } .mod-media7013 li{ margin-bottom: 20px; } .mod-media7013_text{ padding-left: 0; } .mod-media7013_text a{ padding: 0; text-indent: 0; font-size: 14px; position: relative; padding-left: 16px; } .mod-media7013_text a:before{ margin-top: 0.5em; margin-right: 0; position: absolute; top: 0; left: 0; } } /*-------------------------------------*/ #contents05 + .mod-productDocument{ padding-bottom: 35px; } #contents06 + .mod-productDocument{ padding-bottom: 35px; } #contents07 + .mod-productDocument{ padding-bottom: 35px; } @media screen and (max-width: 640px){ .mod-headingLv1_main{ font-size: 28px; font-weight: bold; } .mod-headingLv1_inner{ padding-top: 45px; padding-bottom: 25px; } } .mod-productLineUp3_icon{ margin-left: 0; } @media screen and (max-width: 640px){ .mod-productLineUp3_icon{ margin-top: 0px; } } .mod-bannerList div{ margin-bottom: 15px; } .mod-bannerList li p a{ line-height: 1.714; } .mod-bannerList p a:before{ border-top: 2px solid #456295; border-right: 2px solid #456295; } #contents07 + .mod-productDocument .mod-productDocument_text{ margin-left: 15px; } @media screen and (max-width: 640px){ #contents07 + .mod-productDocument .mod-productDocument_text{ margin-left: 0; } } .mod-productLineUp2_btn{ box-shadow: 0px 3px 0px 0px #9d9d9c; } .mod-blackBtn{ box-shadow: 0px 3px 0px 0px #9d9d9c; } /*------------------------------------------------------------------------------------*/ .mod-article{ display: flex; justify-content: space-between; padding: 40px 0; } .mod-article_img{ width: 47.5%; margin-right: 25px; } .mod-article_document{ width: 50%; } .mod-article_heading{ font-size: 16px; } @media only screen and (max-width: 640px) { .mod-article{ display: block; padding: 20px 0; } .mod-article_img{ width: 100%; margin-right: 0; } .mod-article_document{ width: 100%; margin-top: 10px; } .mod-blackBtn{ margin: 15px auto 0; } } /*------------------------------------------------------------------------------------*/ .mod-bannerList-grid4 ul.u-3column { justify-content: flex-start; } .mod-bannerList-grid4 ul.u-3column li{ width: 33.333%; max-width: 336px; } .mod-bannerList-grid4 ul.u-3column .mod-bannerList-image img{ width: 100%; } @media only screen and (max-width: 640px) { .mod-bannerList-grid4 ul.u-3column{ justify-content: center; } .mod-bannerList-grid4 ul.u-3column li{ width: calc(50% - 20px); max-width: auto; } .mod-bannerList div{ margin-bottom: 10px; } .mod-bannerList li p a{ padding-left: 11px; text-indent: -11px; font-size: 14px; line-height: 1.4; letter-spacing: -0.05em; } .mod-bannerList p a:before{ margin-right: 2px; } } /*------------------------------------------------------------------------------------*/ .mod-pointList{ display: flex; margin-left: -20px; justify-content: center; } .mod-pointList_item{ width: calc(33.34% - 20px); max-width: 336px; margin-left: 20px; margin-top: 20px; background-color: #fff; } .mod-pointList_item-heading{ text-align: center; border-left: 5px solid #158bb4; padding: 9px 0; line-height: 1.1111; } .mod-pointList_item-heading .name{ color: #158bb4; font-size: 18px; font-weight: 700; } .mod-pointList_item--orange .mod-pointList_item-heading{ border-left: 5px solid #e5732c; } .mod-pointList_item--orange .mod-pointList_item-heading .name{ color: #e5732c; } .mod-pointList_item--green .mod-pointList_item-heading{ border-left: 5px solid #19a972; } .mod-pointList_item--green .mod-pointList_item-heading .name{ color: #19a972; } .mod-pointList_item-heading .text{ font-size: 14px; } .mod-pointList_item-list{ padding: 20px 15px; } .mod-pointList_item-list li + li{ margin-top: 13px; } .mod-pointList_item-list-num{ background-color: #dceef4; font-weight: 700; color: #158bb4; font-size: 14px; line-height: 1.1; padding: 0 4px; } .mod-pointList_item--orange .mod-pointList_item-list-num{ background-color: #fbeae0; color: #e5732c; } .mod-pointList_item--green .mod-pointList_item-list-num{ background-color: #ddf2ea; color: #19a972; } .mod-pointList_item-list-num span{ font-size: 18px; } .mod-pointList_item-list-text{ font-size: 14px; line-height: 1.57; margin-top: 5px; } .mod-pointList_item-list-text.equal-height{ height: 66px; } @media only screen and (max-width: 990px) { .mod-pointList{ flex-wrap: wrap; } .mod-pointList_item{ width: calc(50% - 20px); } } @media only screen and (max-width: 640px) { .mod-pointList{ display: block; margin-left: 0; } .mod-pointList_item{ width: 100%; max-width: 100%; margin-left: 0; margin: 20px auto 0; } .mod-pointList_item-list{ padding: 20px 20px 20px; } .mod-pointList_item + .mod-pointList_item{ margin-top: 30px; } .mod-pointList_item-heading{ padding: 8px 0; } } /*--typeList------------------------------*/ .mod-typeList{ display: flex; margin-left: -20px; } .mod-typeList_item{ width: calc(50% - 20px); margin-left: 20px; background-color: #fff; } .mod-typeList_item-document{ padding: 30px 25px 25px; position: relative; } .mod-typeList_item-heading{ position: absolute; top: -15px; left: 25px; } .mod-typeList_item-heading span{ color: #fff; font-size: 18px; font-weight: 700; background-color: #456295; padding: 5px 8px; } .mod-typeList_item-text{ font-size: 14px; } @media only screen and (max-width: 640px) { .mod-typeList{ margin-left: -10px; } .mod-typeList_item{ width: calc(50% - 10px); margin-left: 10px; } .mod-typeList_item-document{ padding: 20px 8px 10px; position: relative; } .mod-typeList_item-heading{ left: 10px; top: -10px; } .mod-typeList_item-text{ line-height: 1.6; } .mod-typeList_item-heading span{ font-size: 16px; padding: 6px 8px; } } /*--------------------------------------------------*/ /* table */ /*--------------------------------------------------*/ .mod-table { width: 100%; border-collapse: collapse; table-layout: fixed; } .mod-table + .mod-table { margin-top: 30px; } .mod-table__th, .mod-table__td { padding: 6px 10px; vertical-align: top; border: solid 1px #d9d9d9; text-align: center; vertical-align: middle; } .mod-table__th { color: #456295; background-color: #e3e8ef; font-size: 16px; font-weight: 700; } .mod-table__head .mod-table__th { font-size: 18px; background-color: #666666; color: #FFF; font-weight: 700; } .mod-table__td { background-color: #FFF; font-size: 16px; } @media only screen and (max-width: 640px) { .mod-table__th, .mod-table__td { padding: 8px 0px; line-height: 1.16666; } .mod-table__th { font-size: 12px; } .mod-table__head .mod-table__th { font-size: 12px; } .mod-table__td { background-color: #FFF; font-size: 12px; } colgroup col{ width: 26.2%!important; } colgroup col:first-child{ width: 21.4%!important; } } .mod-table__icon { display: inline-block; background: #c51324; color: #fff; font-size: 12px; line-height: 1; text-indent: 0; padding: 4px 10px 2px; margin-left: 5px; border-radius: 3px; } .mod-table__icon.icon-blue { background-color: #158bb4; } .mod-table__icon.icon-orange { background-color: #e5732c; } .mod-table__icon.icon-green { background-color: #19a972; } @media only screen and (max-width: 640px) { .mod-table__icon { margin-left: 0; margin-top: 5px; } } /*--------------------------*/ .mod-productLineUp2_heading a{ color: #456295; text-decoration: underline; } .mod-productLineUp2_heading a:before{ border-top: 2px solid #456295; border-right: 2px solid #456295; } @media only screen and (max-width: 640px) { .mod-productLineUp2 .mod-productLineUp2_list .u-emphasis{ border: solid 1px #d2d4d9; background: #f2f2f2; padding: 1px 8px; } } .mod-productLineUp3_icon.icon-blue{ background-color: #158bb4; } .mod-productLineUp3_icon.icon-orange{ background-color: #e5732c; } .mod-productLineUp3_icon.icon-green{ background-color: #19a972; } /*--linkList------------------------------------------------*/ .mod-linkLst{ display: flex; margin-left: -20px; padding-bottom: 30px; position: relative; } .mod-linkLst:after{ content:''; background-color: #d9d9d9; width: calc( 100% - 20px); height: 1px; position: absolute; left: 20px; bottom: 0; } .mod-linkList_btn{ width: calc(50% - 20px); margin-left: 20px; padding: 18px 0; font-size: 18px; font-weight: 700; text-align: center; } .mod-linkList_btn--green{ background-color: #e3e8ef; color: #456295; border-top: 3px solid #456295; } .mod-linkList_btn--green.u-reverse{ border-top: none; border-bottom: 3px solid #456295; } .mod-linkList_btn--gray{ color: #333333; background-color: #d9d9d9; } .mod-linkList_btn a{ display: block; } .mod-linkList_btn--gray a span{ padding-right: 30px; position: relative; } .mod-linkList_btn--gray a span:before{ content: ''; width: 6px; height: 6px; border: 0px; border-top: solid 2px #333333; border-right: solid 2px #333333; -ms-transform: rotate(45deg); -webkit-transform: rotate(45deg); transform: rotate(45deg); position: absolute; top: 50%; right: 0; margin-top: -4px; transition: all .3s; } .mod-linkList_btn--gray a:hover span:before{ right: -5px; } @media only screen and (max-width: 640px) { .mod-linkLst{ margin-left: -15px; padding-bottom: 25px; } .mod-linkList_btn{ width: calc(50% - 15px); margin-left: 15px; font-size: 12px; } } /*--------------------------------------------*/ .mod-note-list{ margin: 0; padding: 0; } .mod-note-list li{ font-size: 12px; line-height: 1.416; margin: 0; display: block; } .mod-note-list--num li{ padding-left: 2em; text-indent: -2em; } #point .mod-blackBtn{ max-width: 400px; margin: 0 auto; } .mod-article--mw{ padding-left: 15px; } .mod-article--mw .mod-article_img{ width: 51%; } .mod-article--mw .mod-article_document { width: 49%; } @media only screen and (max-width: 640px) { .mod-article--mw{ padding-left: 0; } .mod-article--mw .mod-article_img{ width: 100%; } .mod-article--mw .mod-article_document { width: 100%; } } @media only screen and (max-width: 640px) { #product-lineup.mod-sectionHeading{ padding: 6px 18px; } .equal-height{ height: auto!important; } } .mod-productLineUp2_text .mod-productLineUp3_label{ display: inline-block; border-radius: 3px; margin-left: 5px; font-size: 11px; color: #456295; border: solid 1px #456295; padding: 0 5px; text-indent: 0; position: relative; top: -0.2em; } @media only screen and (max-width: 640px) { .mod-productLineUp2_text .mod-productLineUp3_label{ margin-left: 0; top: 0; margin-bottom: 10px; } }