.local-heroImg.is-mouseEnter .slick-prev, .local-heroImg.is-mouseEnter .slick-next { opacity: 1; } .local-heroImg .slick-prev, .local-heroImg .slick-next { width: 64px; height: 64px; border: none; border-radius: 50%; opacity: 0; transition: opacity 0.3s; background: rgba(26, 26, 26, 0.5); } .local-heroImg .slick-prev:before, .local-heroImg .slick-next:before { width: 12px; height: 12px; } .local-heroImg .slick-prev { left: 28px; } .local-heroImg .slick-prev:before { margin-left: 6px; } .local-heroImg .slick-next { right: 28px; } .local-heroImg .slick-next:before { margin-right: 6px; } .local-heroImg .slick-dots { bottom: 40px; height: 4px; } .local-heroImg .slick-dots li { width: 57px; height: 4px; margin: 0 7px; } .local-heroImg .slick-dots li button { width: 100%; height: 100%; position: relative; background: #ccc; border-radius: 3px; box-shadow: 1px 1px 1px -1px rgba(0, 0, 0, 0.7) inset; opacity: 1; } .local-heroImg .slick-dots li button:before { display: block; visibility: hidden; content: ""; width: 0; height: 4px; position: absolute; left: 0; top: 0; border-radius: 3px; background: #333; -webkit-animation-duration: 3s; animation-duration: 3s; -webkit-animation-timing-function: linear; animation-timing-function: linear; -webkit-animation-fill-mode: both; animation-fill-mode: both; opacity: 1; } .local-heroImg .slick-dots li.slick-active button:before { visibility: visible; width: 100%; -webkit-animation-name: local-heroImg_animation; animation-name: local-heroImg_animation; } @-webkit-keyframes local-heroImg_animation { 0% { width: 0; } 100% { width: 100%; } } @keyframes local-heroImg_animation { 0% { width: 0; } 100% { width: 100%; } } .local-heroImg_inner { margin: 0 !important; } .local-heroImg_img { width: 100%; max-width: 100%; } .local-heroImg_img.local-heroImg_img-mobile { display: none; } .local-heroImg_item { display: none; } .local-heroImg_item:first-child { display: block; } .no-js .local-heroImg_item { display: block; margin: 0 0 10px; } .local-heroImg_item a:hover, .local-heroImg_item a:focus { opacity: 1; } @media screen and (max-width: 640px) { .local-heroImg .slick-dots { bottom: 35px; height: 4px; } .local-heroImg .slick-dots li { width: 40px; margin: 0 4px; } .local-heroImg_img { display: none !important; } .local-heroImg_img.local-heroImg_img-mobile { display: block !important; } } @media print { .local-heroImg_img { width: 1072px; } } .local-section { padding: 1px 0; } .local-section_inner { max-width: 1052px; padding: 0 10px; margin: 54px auto; } @media screen and (max-width: 640px) { .local-section_inner { padding: 0 16px; margin: 24px auto 29px; } } .local-section-news { background: #f2f2f2; } .local-section-solution { background: url(/-/media/cojp/home/img/bg_solution_01) 50% 0 no-repeat; background-size: cover; } .local-section-solution .local-section_inner { display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; height: 520px; margin-top: 0; margin-bottom: 0; } @media screen and (max-width: 640px) { .local-section-solution { background: none; } .local-section-solution .local-section_inner { display: block; height: auto; margin-bottom: 29px; } } .local-headingLv2 { margin: 40px 0; display: -webkit-flex; display: flex; } .local-headingLv2 h2, .local-headingLv2 h3, .local-headingLv2 h4, .local-headingLv2 h5, .local-headingLv2 h6 { font-size: 28px; line-height: 30px; margin: 0; font-weight: bold; -webkit-flex: 0 0 auto; flex: 0 0 auto; } .local-headingLv2_link { -webkit-flex: 1 1 auto; flex: 1 1 auto; font-weight: bold; border-left: solid 1px #d2d4d9; margin-left: 20px; padding-left: 20px; } .local-headingLv2_link a { font-size: 14px; line-height: 30px; } .local-headingLv2_link a:before { /* @include maker_arrow; width: 4px; height: 4px; box-sizing: border-box; border: 4px solid transparent; border-left: 4px solid $textColor; margin-top: -.25em; */ 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-headingLv2 { margin: 20px 0; -webkit-justify-content: space-between; justify-content: space-between; } .local-headingLv2 h2, .local-headingLv2 h3, .local-headingLv2 h4, .local-headingLv2 h5, .local-headingLv2 h6 { font-size: 18px; line-height: 18px; } .local-headingLv2_link { border-left: none; padding-left: 0; -webkit-flex: 0 0 auto; flex: 0 0 auto; } .local-headingLv2_link a { font-size: 11px; line-height: 18px; } .local-headingLv2_link a:before { width: 5px; height: 5px; } } .local-headingLv3 { margin: 20px 0; } .local-headingLv3 h2, .local-headingLv3 h3, .local-headingLv3 h4, .local-headingLv3 h5, .local-headingLv3 h6 { font-size: 20px; line-height: 1.4; margin: 0; font-weight: bold; } .local-newsGrid .local-headingLv3 { margin-top: 0; } @media screen and (max-width: 640px) { .local-headingLv3 { margin: 15px 0; } .local-headingLv3 h2, .local-headingLv3 h3, .local-headingLv3 h4, .local-headingLv3 h5, .local-headingLv3 h6 { font-size: 16px; line-height: 1.4; margin: 0; font-weight: bold; } .local-newsGrid .local-headingLv3 { margin-top: 25px; margin-bottom: 10px; } } .local-product { margin: 40px 0; padding-bottom: 1px; } .local-product.local-product-mobile { display: none; } .local-product .slick-list { overflow: visible !important; } .local-product .slick-dots { bottom: -36px; } .local-product .slick-next, .local-product .slick-prev { width: 42px; height: 70px; border: none; border-radius: 3px; background: rgba(0, 0, 0, 0.7); } .local-product .slick-next:before, .local-product .slick-prev:before { opacity: 1; } .local-product .slick-next { right: -82px; } .local-product .slick-prev { left: -82px; } .local-product .slick-disabled { visibility: hidden; } .local-product .slick-dots .slick-active button { background: #333; } .local-product .slick-dots .slick-active button:before { color: #333; } .local-product_inner { margin: 0 -10px 35px !important; } .no-js .local-product_inner:after { content: ""; display: block; clear: both; } .local-product_item { padding: 0 10px; box-sizing: border-box; } .local-product_item a { display: block; position: relative; } .no-js .local-product_item { float: left; margin: 10px 0; } .local-product_img { display: block; max-width: 100%; } .local-product_img.local-product_img-mobile { display: none; } @media screen and (max-width: 640px) { .local-product { display: none; } .local-product.local-product-mobile { display: block; margin: 20px 0; } .local-product-mobile .slick-list { overflow: hidden !important; } .local-product-mobile .slick-dots { bottom: -26px; } .local-product-mobile .local-product_inner { margin: -6px -6px 16px !important; } .local-product-mobile .local-product_group { display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; } .local-product-mobile .local-product_item { width: 50%; overflow: hidden; padding: 6px; } .local-product-mobile .local-product_img { display: none; } .local-product-mobile .local-product_img.local-product_img-mobile { display: block; } } .local-newsGrid_inner { display: -webkit-flex; display: flex; margin-left: -40px; } .local-newsGrid_item { width: calc((100% - 40px * 2) / 2); margin-left: 40px; margin-bottom: 40px; margin-bottom: 0; } @media screen and (max-width: 640px) { .local-newsGrid_inner { display: block; margin: 0; } .local-newsGrid_item { width: 100%; border-top: solid 1px #d2d4d9; margin: 20px 0 0; } } .local-notice { border: 1px solid #ea1e1f; background-color: #fff; padding: 20px 90px; margin: 40px 0; } .local-notice_inner { display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; margin-left: -30px; } .local-notice_item { width: calc((100% - 30px * 2) / 2); margin-left: 30px; margin-bottom: 30px; margin-bottom: 0; } .local-notice_heading { text-align: center; margin-top: 0.25em; } .local-notice_heading h2, .local-notice_heading h3, .local-notice_heading h4, .local-notice_heading h5, .local-notice_heading h6 { font-size: 20px; line-height: 1.4; margin: 0; font-weight: bold; } .local-notice_heading img { max-width: 20px; vertical-align: middle; margin-top: -0.25em; margin-right: 18px; } .local-notice_link a { display: inline-block; padding: 1em 2em 0.9em; border: 1px solid #ddd; min-width: 365px; box-sizing: border-box; text-align: center; font-weight: bold; } .local-notice_link 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-notice { padding: 12px 15px 15px; margin: 24px 0; } .local-notice_inner { -webkit-flex-direction: column; flex-direction: column; margin: 0; } .local-notice_item { width: 100%; margin: 0; } .local-notice_item + .local-notice_item { margin-top: 12px; } .local-notice_heading { text-align: left; } .local-notice_heading h2, .local-notice_heading h3, .local-notice_heading h4, .local-notice_heading h5, .local-notice_heading h6 { font-size: 14px; } .local-notice_heading img { max-width: 15px; margin-right: 8px; margin-left: 3px; } .local-notice_link { font-size: 12px; } .local-notice_link a { width: 100%; min-width: inherit; padding: 0.8em; } } .local-dateList ul { list-style: none; margin: 0; padding: 0; padding: 0 0 20px; border-bottom: dotted 1px #d2d4d9; } .local-dateList li { border-top: dotted 1px #d2d4d9; padding: 20px 0 0; margin-top: 20px; } .local-dateList li:first-child { margin-top: 0; } .local-dateList_date { display: block; padding: 0 0 3px; font-weight: bold; } .local-dateList_description { display: block; margin-left: 1em; } .local-dateList_description a { margin-left: -1em; padding-left: 1em; text-indent: -1em; display: inline-block; } .local-dateList_description 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: 6px; } @media screen and (max-width: 640px) { .local-dateList ul { border-bottom: none; padding-bottom: 0; } .local-dateList li { display: list-item; margin-top: 10px; padding-top: 10px; } .local-dateList_date, .local-dateList_description { display: block; } .local-dateList_date { padding: 0; } .local-dateList_description { font-size: 12px; } } .local-banner { 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; font-size: 16px; line-height: 1.25; font-weight: bold; } .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 { 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: 20px 0; } .local-banner ul { display: block; margin: 0; } .local-banner li { width: auto; margin: 0 0 20px; display: -webkit-flex; display: flex; border-top: dotted 1px #d2d4d9; padding: 20px 0 0; } .local-banner_img { width: 33%; box-sizing: border-box; padding-right: 6px; } .local-banner_text { width: 66%; margin: 0; box-sizing: border-box; padding-left: 6px; } .local-banner_heading { margin-top: 0; font-size: 14px; } .local-banner_paragraph { font-size: 12px; margin-top: 7px; } } @media print { .local-banner li { width: 337px; } } .local-solution { color: #191919; } .local-solution_img { display: none; margin: 0 -16px; } .local-solution_img img { max-width: 100%; } .local-solution_heading { margin: 15px 0; } .local-solution_heading h2, .local-solution_heading h3, .local-solution_heading h4, .local-solution_heading h5, .local-solution_heading h6 { font-size: 36px; line-height: 1.5; margin: 0; font-weight: bold; } .local-solution_paragraph { margin: 15px 0; font-size: 16px; line-height: 1.75; } .local-solution_link { margin: 35px 0; } .local-solution_link a { display: inline-block; padding: 1em 2em; background: #333; color: #fff; border-radius: 3px; } .local-solution_link 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; border-color: #fff; margin-right: 8px; } @media screen and (max-width: 640px) { .local-solution { color: #333; } .local-solution_img { display: block; } .local-solution_heading { margin: 20px 0 10px; } .local-solution_heading h2, .local-solution_heading h3, .local-solution_heading h4, .local-solution_heading h5, .local-solution_heading h6 { font-size: 18px; line-height: 1.5; margin: 0; font-weight: bold; } .local-solution_paragraph { margin: 10px 0 15px; font-size: 12px; line-height: 1.75; } .local-solution_link { margin: 15px 0; } .local-solution_link a { display: block; text-align: center; padding: 1em 2em; font-size: 12px; } }