.local-link1 { margin: 40px 0; } .local-link1_item { display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; margin: 0 0 20px; background: #f2f2f2; } .local-link1_item_img { width: 50%; -webkit-flex: 0 0 auto; flex: 0 0 auto; } .local-link1_item_img img { max-width: 100%; } .local-link1_item_text { width: 50%; -webkit-flex: 1 1 auto; flex: 1 1 auto; padding: 0 40px; } .local-link1_item_heading { margin: 15px 0; font-size: 24px; line-height: 1.25; } .local-link1_item_paragraph { margin: 15px 0; } .local-link1_item_pointList { margin: 15px 0; } .local-link1_item_pointList ul { list-style: none; margin: 0; padding: 0; } .local-link1_item_pointList li { margin: 0 0 4px; padding: 0 0 0 2em; } .local-link1_item_pointList li:before { content: url(/~/co.jp/product/printer/img/bg_mod-local1_01.png); vertical-align: middle; display: inline-block; text-indent: -2em; } .local-link1_item_link { margin: 20px 0; } .local-link1_item_link a { display: inline-block; background: #1a1a1a; color: #fff; padding: 0.6em 2em; } .local-link1_item_link a:after { content: ""; display: inline-block; vertical-align: middle; text-decoration: none; width: 6px; height: 6px; border-top: 2px solid #333; border-right: 2px solid #333; -webkit-transform: rotate(45deg); transform: rotate(45deg); margin-top: -.25em; margin-left: 3px; border-color: #fff; } @media screen and (max-width: 640px) { .local-link1_item { display: block; margin-bottom: 40px; } .local-link1_item_img { width: auto; } .local-link1_item_img img { width: 100%; } .local-link1_item_text { width: auto; padding: 20px; } .local-link1_item_link { margin: 20px; } .local-link1_item_link a { display: block; text-align: center; } } .local-link2 { margin: 50px 0; } .local-link2_inner { display: -webkit-flex; display: flex; margin-bottom: -20px; margin-left: -20px; } .local-link2_item { width: calc((100% - 20px * 2) / 2); margin-left: 20px; margin-bottom: 20px; margin-bottom: -20px; width: 33%; } .local-link2_item:last-child { width: 66%; } .local-link2_item_heading { margin: 0 0 -20px; } .local-link2_item_heading h2, .local-link2_item_heading h3, .local-link2_item_heading h4, .local-link2_item_heading h5, .local-link2_item_heading h6 { font-size: 16px; line-height: 1.25; margin: 0; font-weight: normal; } @media screen and (max-width: 640px) { .local-link2 { margin: 40px 0 50px; } .local-link2_inner { display: block; margin: 0; } .local-link2_item { width: 100%; margin: 0 0 -20px; } .local-link2_item:last-child { width: 100%; border-top: solid 1px #d2d4d9; padding-top: 20px; margin: 0 0 0; } } .local-banner { font-size: 16px; line-height: 1.5; margin: 40px 0; } .local-banner ul { list-style: none; margin: 0; padding: 0; display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; margin-left: -20px; margin-bottom: -20px; } .local-banner li { width: calc((100% - 20px * 3) / 3); margin-left: 20px; margin-bottom: 20px; box-sizing: border-box; text-align: left; } .local-banner_img img { max-width: 100%; } .local-banner_heading { margin: 20px 0 0; } .local-banner_heading a { padding-left: 16px; text-indent: -16px; display: inline-block; text-align: left; } .local-banner_heading a:before { content: ""; display: inline-block; vertical-align: middle; text-decoration: none; width: 6px; height: 6px; border-top: 2px solid #333; border-right: 2px solid #333; -webkit-transform: rotate(45deg); transform: rotate(45deg); margin-top: -.25em; margin-right: 8px; } .local-banner_paragraph { font-size: 12px; margin: 10px 0 0; } .local-banner_paragraph a { padding-left: 16px; text-indent: -16px; display: inline-block; text-align: left; } .local-banner_paragraph a:before { content: ""; display: inline-block; vertical-align: middle; text-decoration: none; width: 6px; height: 6px; border-top: 2px solid #333; border-right: 2px solid #333; -webkit-transform: rotate(45deg); transform: rotate(45deg); margin-top: -.25em; margin-right: 8px; } @media screen and (max-width: 640px) { .local-banner { margin: 40px 20px; } .local-banner ul { display: block; margin: 0; } .local-banner li { width: auto; margin: 0 0 20px; font-size: 12px; } } @media print { .local-banner li { width: 337px; } }