.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; } h3{ margin: 0; } p{ margin: 0; } ul{ margin: 0; padding: 0; } em{ font-style: normal; } /*--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; padding-bottom: 50px; position: relative; } .mod-pageMenu-btn{ width: calc(50% - 8.5px); max-width: 516px; height: 90px; box-sizing: border-box; border: solid 2px #39a68d; 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: #39a68d; font-weight: bold; position: relative; } .mod-pageMenu-btn a span{ display: flex; align-items: center; padding-left: 25px; } .mod-pageMenu-btn span:after{ content: ""; display: inline-block; vertical-align: middle; text-decoration: none; width: 6px; height: 6px; border-top: 2px solid #39a68d; border-right: 2px solid #39a68d; -webkit-transform: rotate(45deg); transform: rotate(45deg); margin-left: 15px; } .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/labelprinter/img/top-20220201/icon/pageMenu-btn01p.png); } .mod-pageMenu-btn.btn02 a:before{ background-image: url(/-/media/cojp/product/labelprinter/img/top-20220201/icon/pageMenu-btn02p.png); } @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: 15px 0 22px; margin-left: 10px; margin-top: 10px; border: solid 3px #39a68d; } .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{ margin-left: 0; padding-left: 0; } .mod-pageMenu-btn span:after{ position: absolute; top: 0; bottom: 0; right: 15px; 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; justify-content: center; list-style-type: none; flex-wrap: wrap; padding: 0; margin-top: -20px; margin-left: -20px; margin-bottom: 0; padding-bottom: 50px; position: relative; } .mod-sectionMenu:after{ content:''; display: block; width: calc(100% - 20px); height: 1px; background-color: #d9d9d9; position: absolute; bottom: 0; left: 20px; } .mod-sectionMenu-btn{ height: 62px; box-sizing: border-box; border: solid 2px #39a68d; margin-left: 20px; margin-top: 20px; position: relative; line-height: 1.1; } .u-3column .mod-sectionMenu-btn{ width: 336px; } .u-4column .mod-sectionMenu-btn{ width: 247px; } .u-5column .mod-sectionMenu-btn{ width: 194px; } .mod-sectionMenu-btn:after{ content: ""; display: inline-block; vertical-align: middle; text-decoration: none; width: 6px; height: 6px; border-top: 2px solid #39a68d; border-right: 2px solid #39a68d; -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.u-reverse a span{ margin-top: 5px; } .mod-sectionMenu-btn a{ width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; text-align: left; color: #39a68d; 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.u-reverse a span{ margin-top: 0px; } .mod-sectionMenu-btn{ height: auto; padding: 15px 0; margin-left: 10px; margin-top: 10px; text-align: left; } .u-3column .mod-sectionMenu-btn{ width: calc(50% - 10px); } .u-4column .mod-sectionMenu-btn{ width: calc(50% - 10px); } .u-5column .mod-sectionMenu-btn{ width: calc(50% - 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; display: block; text-align: left; } .mod-sectionMenu-btn a span{ display: block; } } .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 a span{ padding-left: 54px; } .mod-sectionMenu-btn.btn01 a span:before{ background-image: url(/-/media/cojp/product/labelprinter/img/top-20220201/icon/icon01p.png); width: 45px; height: 29px; left: 0; } .mod-sectionMenu-btn.btn02 a span:before{ background-image: url(/-/media/cojp/product/labelprinter/img/top-20220201/icon/icon02p.png); width: 45px; height: 29px; left: 0; } .mod-sectionMenu-btn.btn03 a span:before{ background-image: url(/-/media/cojp/product/labelprinter/img/top-20220201/icon/icon03p.png); width: 45px; height: 29px; left: 0; } @media only screen and (max-width: 640px) { .mod-sectionMenu-btn a span{ margin-left: 15px; padding-left: 0; } .mod-sectionMenu-btn a span:before{ left: 0px; } .mod-sectionMenu-btn.btn01 a span{ margin-left: 0; padding-left: 45px; } .mod-sectionMenu-btn.btn01 a span:before{ width: 36px; height: 23px; left: 5px; } .mod-sectionMenu-btn.btn02 a span{ margin-left: 0px; padding-left: 60px; } .mod-sectionMenu-btn.btn02 a span:before{ background-image: url(/-/media/cojp/product/labelprinter/img/top-20220201/icon/icon02p.png); width: 33px; height: 22px; left: 16px; } .mod-sectionMenu-btn.btn03 a span{ margin-left: 0px; padding-left: 60px; } .mod-sectionMenu-btn.btn03 a span:before{ background-image: url(/-/media/cojp/product/labelprinter/img/top-20220201/icon/icon03p.png); width: 35px; height: 23px; left: 16px; } .mod-sectionMenu-btn.btn04 a span:before{ width: 35px; height: 23px; left: 16px; } } @media only screen and (max-width: 360px) { .mod-sectionMenu .mod-sectionMenu-btn a span br{ display: none; } } /*------------------------------------------------------------------------------------*/ .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: #39a68d; } .mod-bgGray-heading{ background-color: #f2f2f2; font-size: 18px; font-weight: bold; border-left: 5px solid #39a68d; padding: 15px 15px 10px 25px; } .mod-green-heading{ padding-bottom: 7px; border-bottom: 1px solid #39a68d; } .mod-green-heading span{ font-size: 16px; font-weight: bold; display: block; border-left: solid 5px #39a68d; padding-left: 18px; } .mod-green-heading span em{ font-size: 12px; border-radius: 3px; color: #ffffff; background-color: #39a68d; padding: 4px 8px; margin-right: 10px; letter-spacing: 0; } .mod-iconHeading { background-color: #f2f2f2; font-size: 16px; line-height: 1.3; font-weight: bold; border-left: 5px solid #39a68d; padding: 15px 15px 15px 20px; } .mod-iconHeading span { position: relative; padding-left: 46px; 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-green-heading{ padding-bottom: 4px; } .mod-iconHeading { font-size: 16px; padding: 10px 12px 8px 17px; } .mod-iconHeading span { padding-left: 46px; } } #contents01.mod-iconHeading span:before { background-image: url(/-/media/cojp/product/labelprinter/img/top-20220201/icon/icon01p.png); width: 40px; height: 26px; } #contents02.mod-iconHeading span:before { background-image: url(/-/media/cojp/product/labelprinter/img/top-20220201/icon/icon02p.png); width: 40px; height: 26px; } #contents03.mod-iconHeading span:before { background-image: url(/-/media/cojp/product/labelprinter/img/top-20220201/icon/icon03p.png); width: 40px; height: 26px; } /*-#contents04.mod-iconHeading span:before { background-image: url("/~/co.jp/product/labelprinter/img/icon/icon04"); width: 40px; height: 26px; }---*/ @media screen and (max-width: 640px){ #contents01.mod-iconHeading span:before { left: -4px; } #contents02.mod-iconHeading span:before { left: -7px; } #contents03.mod-iconHeading span:before { left: -7px; } #contents03.mod-iconHeading span{ padding-left: 42px; } #contents04.mod-iconHeading span:before { width: 18px; height: 22px; } #contents05.mod-iconHeading span:before { width: 18px; height: 22px; } #contents06.mod-iconHeading span:before { width: 18px; height: 22px; } #contents07.mod-iconHeading span:before { width: 18px; height: 22px; } #contents08.mod-iconHeading span:before { width: 18px; height: 22px; } #contents09.mod-iconHeading span:before { width: 18px; height: 22px; } #contents10.mod-iconHeading span:before { width: 18px; height: 22px; } } .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; padding-bottom: 55px; border-bottom: solid 1px #d9d9d9; } .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 8px; } .mod-productLineUp2_item{ position: relative; padding-bottom: 60px; } .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: 15px; } .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: 25px; } .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: 15px; } .mod-productLineUp2_item:first-child:after { content: none; } .mod-productLineUp2_desc { margin-top: 10px; } .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_text{ width: calc(50% - 10px); margin-left: 10px; } .mod-productLineUp2_list_feature2 ul li{ line-height: 1.4; } } @media screen and (max-width: 900px){ .mod-productLineUp2.u-3column .mod-productLineUp2_text{ width: 100%; } } .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 #39a68d; border-right: 2px solid #39a68d; } .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; } .mod-bannerList{ margin: 30px 0 0; padding-bottom: 35px; border-bottom: solid 1px #d9d9d9; } @media screen and (max-width: 640px){ .mod-bannerList{ border-bottom: none; } .mod-headingLv1_main{ font-size: 28px; font-weight: bold; } .mod-headingLv1_inner{ padding-top: 50px; padding-bottom: 20px; } } .mod-productLineUp3_icon{ margin-left: 0; } @media screen and (max-width: 640px){ .mod-productLineUp3_icon{ margin-top: 0px; } } .mod-bannerList p a:before{ border-top: 2px solid #39a68d; border-right: 2px solid #39a68d; } #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-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: initial; } .mod-bannerList div{ margin-bottom: 12px; } .mod-bannerList li{ margin-bottom: 12px; } .mod-bannerList-grid4.mod-bannerList ul li._sp_u-1column{ width: 100%; margin-left: 0; text-align: center; } .mod-bannerList-grid4.mod-bannerList ul li._sp_u-1column .mod-bannerList-image{ width: calc(50% - 20px); margin: 0 auto 12px; padding-left: 20px; } .mod-bannerList-grid4.mod-bannerList ul li._sp_u-1column p a{ margin-left: 20px; } .mod-bannerList li p a{ padding-left: 15px; text-indent: -15px; font-size: 14px; line-height: 1.7; } .mod-bannerList p a:before{ margin-right: 7px; } } /*--contentsLink----------------------------------------------------------------------------------*/ .mod-contentsLink{ display: flex; justify-content: center; margin-left: -20px; } .mod-contentsLink_item{ width: calc(50% - 20px); margin-left: 20px; padding: 23px 0 30px; } .mod-contentsLink_item--label{ background-color: #f4eee1; } .mod-contentsLink_item--mw{ background-color: #e3e8ef; } .mod-contentsLink .mod-blackBtn{ max-width: 324px; margin: 0 auto; } .mod-contentsLink_item-image{ margin-top: 20px; } .mod-contentsLink_item-document{ padding-top: 32px; position: relative; margin: 0 30px; } .mod-contentsLink_item-heading{ font-size: 18px; font-weight: 700; position: absolute; top: -15px; left: 0; } .mod-contentsLink_item-text{ font-size: 14px; } .mod-contentsLink_item--label .mod-contentsLink_item-heading{ background-color: #dccfb2; padding: 2px 10px; } .mod-contentsLink_item--mw .mod-contentsLink_item-heading{ background-color: #456295; color: #fff; font-weight: 700; padding: 2px 10px; } @media screen and (max-width: 930px){ .mod-contentsLink{ display: block; margin-left: 0px; margin-top: -30px; } .mod-contentsLink_item{ width: 100%; margin: 30px auto 0; padding: 15px 0 20px; max-width: 516px; } } @media screen and (max-width: 640px){ .mod-contentsLink_item{ margin: 0 auto 0; padding: 20px 0 20px; } .mod-contentsLink_item + .mod-contentsLink_item{ margin-top: 25px; } .mod-contentsLink_item-document{ margin: 0 20px; letter-spacing: 0.02em; padding-top: 30px; } .mod-contentsLink_item-image{ margin-top: 25px; } .mod-contentsLink .mod-blackBtn{ width: 88.73%; margin: 0 auto; padding: 5px; } .mod-contentsLink_item--mw .mod-contentsLink_item-heading{ top: -10px; } .mod-contentsLink_item .mod-contentsLink_item-heading{ background: none; padding: 0; } .mod-contentsLink_item .mod-contentsLink_item-heading span{ font-size: 16px; padding: 5px 5px; line-height: 1.4; display: inline; } .mod-contentsLink_item--label .mod-contentsLink_item-heading span{ background-color: #dccfb2; } .mod-contentsLink_item--label .mod-contentsLink_item-document{ padding-top: 55px; } .mod-contentsLink_item--mw .mod-contentsLink_item-heading span{ background-color: #456295; } } /*--typeList----------------------------------------------------------------------------------*/ .mod-typeList{ display: flex; justify-content: space-between; position: relative; margin-left: -20px; padding-bottom: 30px; } .mod-typeList:after{ content:''; background-color: #d9d9d9; width: calc(100% - 20px); height: 1px; position: absolute; left: 20px; bottom: 0; } .mod-typeList_item{ width: calc(33.34% - 20px); max-width: 336px; margin-left: 20px; } .mod-typeList_item-image{ margin-top: 10px; } .mod-typeList_item-heading{ display: flex; align-items: center; background-color: #f2f2f2; } .mod-typeList_document{ margin-top: 30px; } .mod-typeList_item-heading.u-2line .heading-num{ padding: 11px 11px; } .mod-typeList_item-heading.u-2line .heading-text{ padding: 11px 24px 6px; } .mod-typeList_item-heading .heading-num{ font-size: 30px; background-color: #39a68d; color: #fff; font-weight: 700; height: 100%; display: flex; align-items: center; text-align: center; padding: 2px 11px; } .mod-typeList_item-heading .heading-text{ font-size: 18px; background-color: #f2f2f2; padding: 13px 24px 13px; } .mod-typeList_document-heading{ color: #fff; font-size: 16px; font-weight: 700; padding: 0 8px; background-color: #39a68d; margin: 0; } .mod-typeList_document-text{ margin: 0; } .mod-typeList_document-image{ margin: 15px 0 0; padding: 0; } .mod-typeList_data{ margin: 10px 0 0; padding: 0; } .mod-typeList_data-item{ display: flex; height: 96px; border-bottom: #d9d9d9 1px solid; } .mod-typeList_data-item + .mod-typeList_data-item{ margin-top: 15px; } .mod-typeList_data-heading{ background-color: #d7ede8; width: 80px; height: 80px; display: block; text-align: center; margin: 0; margin-right: 20px; display: flex; justify-content: center; align-items: center; } .mod-typeList_data-heading span{ display: block; line-height: 1; } .mod-typeList_data-text{ font-size: 14px; width: calc(100% - 90px); margin: 0; line-height: 1.5; } .js-accordion-btn{ display: none; } .mod-typeList_box{ border: solid 1px #d9d9d9; margin: 0; margin-top: 15px; padding: 4px 10px; } @media screen and (max-width: 1010px){ .mod-typeList{ flex-wrap: wrap; justify-content: center; } .mod-typeList_item{ width: calc(50% - 20px); max-width: auto; margin-bottom: 20px; padding-bottom: 15px; height: auto; } } @media screen and (max-width: 690px){ .mod-typeList{ display: block; margin-left: 0; padding-bottom: 0; } .mod-typeList:after{ content:none; } .mod-typeList:after{ width: 100%; } .mod-typeList_item{ width: 100%; max-width: 100%; margin-left: 0; } .mod-typeList_item:last-child{ margin-bottom: 0; padding-bottom: 0; } .mod-typeList_item-image{ margin-top: 10px; } .mod-typeList_document{ margin-top: 20px; } .mod-typeList_document-image{ margin: 0; } .mod-typeList_item-heading .heading-text{ padding: 13px 24px 13px 30px; } .mod-typeList_document-text{ position: relative; letter-spacing: 0.02em; } .mod-typeList_document-text:before{ content: ""; width: 100%; height: 100%; display: block; background: linear-gradient(rgba(255,255,255,0) 0, #fff 80%); /* 徐々に透明にする */ position: absolute; top: 0; left: 0; transition: .4s; } .mod-typeList_data-heading{ margin-right: 10px; } .js-accordion-btn{ display: block; width: 49px; height: 49px; margin: -25px auto 0; position: relative; transition: all .3s; } .js-accordion-btn a{ display: block; width: 49px; height: 49px; position: absolute; top: 0; right: 50%; transform: translateX(50%); margin: auto; z-index: 100; } .js-accordion{ height: 0; overflow: hidden; line-height: 0; opacity: 0; transition-duration: 0.4s; } .mod-typeList_item.is-open{ padding-bottom: 70px; position: relative; } .mod-typeList_item.is-open .js-accordion{ line-height: 1.7; height: auto; opacity: 1; } .mod-typeList_item.is-open .mod-typeList_document-text:before{ background: none; } .mod-typeList_item.is-open .js-accordion-btn{ position: absolute; width: 100%; bottom: 0; margin: 0 auto; } .mod-typeList_item.is-open .js-accordion-btn a{ position: relative; display: block; margin: 0 auto; transform: translateX(0) rotate(180deg); right: 0; } } .mod-typeList_document-text.equal-height{ height: 65px; } @media screen and (max-width: 640px){ .equal-height{ height: auto!important; } } .mod-typeList + .mod-blackBtn{ max-width: 324px; margin: 0px auto; } /*--------------------------------------------------*/ /* table */ /*--------------------------------------------------*/ .mod-grayHeading{ background-color: #666666; color: #fff; font-size: 18px; font-weight: 700; text-align: center; padding: 3px; } .mod-table { width: 100%; border-collapse: collapse; table-layout: fixed; } .mod-table + .mod-table { margin-top: 30px; } .mod-table__th, .mod-table__td { padding: 10px 10px; vertical-align: top; border: solid 1px #d9d9d9; text-align: center; vertical-align: middle; } .mod-table__th { color: #456295; background-color: #d7ede8; text-align: center; } .mod-table__head .mod-table__th { font-size: 18px; background-color: #999999; color: #FFF; font-weight: 700; padding: 4px 10px; } .mod-table__td { background-color: #FFF; text-align: left; padding-left: 50px; } .mod-table__td.mod-table__td--links{ box-sizing: border-box; padding-left: 10.5%; } .mod-table__td a{ color: #39a68d; font-size: 16px; font-weight: 700; line-height: 1.5; } .mod-table__td a + a{ margin-left: 25px; } .mod-table__td a span{ position: relative; padding-left: 20px; display: block; } .mod-table__td a span:before{ content: ''; width: 6px; height: 6px; border: 0px; border-top: solid 2px #39a68d; border-right: solid 2px #39a68d; -ms-transform: rotate(135deg); -webkit-transform: rotate(135deg); transform: rotate(135deg); position: absolute; top: 50%; left: 0; margin-top: -6px; } .mod-table__td a { display: inline-block; } .mod-table__td a span{ } @media only screen and (max-width: 640px) { .mod-table__th, .mod-table__td { padding: 16px 8px; line-height: 1.16666; } .mod-table__head .mod-table__th { font-size: 16px; text-align: center; padding: 8px 10px; } .mod-table__th img{ width: 64%; height: auto; margin: 0 auto; } .mod-table__td{ text-align: left; } .mod-table__td.mod-table__td--links{ padding-left: 14%; } .mod-table__td.mod-table__td--links a+ a{ margin-top: 10px; } .mod-table__td a{ font-size: 12px; display: block; } .mod-table__td a span{ display: block; padding-left: 15px; } .mod-table__td a + a{ margin-left: 0px; } .mod-table__td { background-color: #FFF; font-size: 12px; } .mod-table colgroup col:first-child{ width: 20%!important; } .mod-table colgroup col:nth-child(2){ width: 30%!important; } .mod-table colgroup col:nth-child(3){ width: 50%!important; } } /*--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: 21px 0 16px; font-size: 18px; font-weight: 700; text-align: center; } .mod-linkList_btn--green{ background-color: #d7ede8; color: #39a68d; border-top: 3px solid #39a68d; } .mod-linkList_btn--green{ border-top: none; border-bottom: 3px solid #39a68d; } .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: -10px; padding-bottom: 25px; } .mod-linkList_btn{ width: calc(50% - 10px); margin-left: 10px; padding: 16px 0 18px; font-size: 12px; } .mod-linkList_btn.mod-linkList_btn--gray{ padding: 0; } .mod-linkList_btn.mod-linkList_btn--gray a{ padding: 18px 0 18px; display: flex; align-items: center; justify-content: center; } .mod-linkList_btn.mod-linkList_btn--gray a span{ padding-right: 0; } .mod-linkList_btn.mod-linkList_btn--gray a span:before{ right: -15px; } } /*--------------------------------------------*/ .mod-productLineUp2 .mod-productLineUp2_list .u-emphasis{ border: solid 1px #d2d4d9; background-color: #fff; padding: 6px 10px; font-size: 12px; text-align: left; } .mod-productLineUp2_list_feature2 li{ line-height: 1.5; } .mod-productLineUp2_heading a{ color: #39a68d; text-decoration: underline; } .mod-productLineUp2_heading a:before{ border-top: 2px solid #39a68d; border-right: 2px solid #39a68d; } @media only screen and (max-width: 640px) { .mod-productLineUp2 .mod-productLineUp2_list .u-emphasis{ border: solid 1px #d2d4d9; background: #f2f2f2; padding: 1px 8px; } .mod-productLineUp2_heading a{ letter-spacing: 0.05em; } } /*------------------------------------------------------------------------------------*/ .mod-article{ display: flex; justify-content: space-between; padding: 40px 0 40px 15px; } .mod-article_img{ width: 50%; margin-right: 25px; } .mod-article_document{ width: 49%; } .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; } } /*------------------------------------------------------------------------------------*/ @media only screen and (max-width: 640px) { #relation.mod-sectionHeading{ padding: 10px 0px 10px 15px; } #special{ padding: 5px 18px 7px; } } .mod-borderWrap{ border-top: solid 1px #d9d9d9; } .mod-productLineUp2_text span.label{ display: inline-block; font-size: 12px; color: #39a68d; border: solid 1px #39a68d; padding: 0 5px; text-indent: 0; margin-bottom: 3px; border-radius: 3px; }