@charset "UTF-8"; /* recruit header --------------------------------------------------------*/ .page_column .recruit-site_header { position: relative; } .renewal_recruit .recruit-site_inner { background: #FFF; } /* コラム一覧:スタイル --------------------------------------------------------*/ .page_column .column_area { width: 1096px; margin: 0 auto; } @media (max-width: 767px) { .page_column .column_area { width: 100%; } } .page_column .column_item { position: relative; border-bottom: 4px dotted #CCC; } .page_column .column_item:first-of-type { border-top: 4px dotted #CCC; } .page_column .column_link { display: flex; padding: 40px; opacity: unset; transition: 0.5s; } @media (max-width: 767px) { .page_column .column_link { display: block; padding: 40px 20px; } } .page_column .column_image-box { width: 300px; height: 200px; } @media (max-width: 767px) { .page_column .column_image-box { width: 100%; height: auto; } } .page_column .column_image-box .column_image { overflow: hidden; border-radius: 12px; } .page_column .column_image-box .column_image img { border-radius: 12px; transition: transform 0.4s ease; } .page_column .column_link:hover .column_image img { border-radius: 12px; transform: scale(1.1); } .page_column .column_content-box { align-content: center; margin-left: 25px; } @media (max-width: 767px) { .page_column .column_content-box { margin-top: 25px; margin-left: 0; } } .page_column .column_meta { margin-bottom: 15px; } .page_column time { color: #666; font-size: 1.4rem; font-weight: 500; line-height: 100%; } .page_column label { margin-left: 20px; padding: 5px 10px; color: #666; font-size: 1.2rem; font-weight: 500; border-radius: 123px; border: 1px solid #666; line-height: 100%; } .page_column .column_title { color: #000; font-size: 1.8rem; font-weight: 500; line-height: 180%; letter-spacing: 0.8px; transition: 0.5s; } .page_column .column_link:hover .column_title { color: #4662A8; } @media (max-width: 767px) { .page_column .column_title { font-size: 1.6rem; } } /* コラムページネーション:スタイル --------------------------------------------------------*/ .page_column .pagination { display: flex; gap: 16px; margin-top: 105px; justify-content: center; } @media (max-width: 767px) { .page_column .pagination { margin-top: 80px; margin-bottom: 180px; } } .page_column .pagination a { display: block; width: 54px; height: 54px; align-content: center; border: 1px solid #4662A8; color: #4662A8; font-size: 14px; border-radius: 4px; text-align: center; text-decoration: none; background: #fff; transition: all 0.3s; } .page_column .btn-back { width: 315px; margin: 100px auto 0; } .page_column .btn-back a { position: relative; display: flex; align-items: center; justify-content: center; color: #4662A8; text-align: center; font-size: 2.2rem; font-weight: 500; border-radius: 12px; border: 1px solid #4662A8; background: #FFF; padding: 20px; transition: .5s; } .page_column .btn-back a::after { content: ""; position: absolute; top: 0; left: 20px; bottom: 0; margin: auto 0; width: 12px; height: 12px; transform: rotate(-45deg); border-top: 1px solid #4662A8; border-left: 1px solid #4662A8; } .page_column .btn-back a:hover { background: #4662A8; color: #FFF; } .page_column .btn-back a:hover::after { border-top: 1px solid #FFF; border-left: 1px solid #FFF; } @media (max-width: 767px) { .page_column .pagination a { width: 42px; height: 42px; } .page_column .btn-back { width: 90%; margin: 60px auto 0; } .page_column .btn-back a { font-size: 1.6rem; padding: 15px; } } .page_column .pagination a:hover { background: #f5f5f5; } .page_column .pagination a.is-current { background: #4662A8; color: #fff; border-color: #4662A8; } .page_column #pagination .pagination-prev, .page_column #pagination .pagination-next { font-size: 2.5rem; border: none; } .page_column #pagination a:hover:not(.is-current):not(.is-disabled) { background: rgba(59, 94, 162, 0.08); } .page_column #pagination a.is-disabled { opacity: 0.3; pointer-events: none; }