@charset "UTF-8";

/*ここにLP用のスタイルを記述します*/
/*ページテンプレートで「LP用テンプレート」を選択したときに、このCSSが適用されます*/
/*ページ毎にメインカラーを変更したい場合、固定ページのカスタムCSSに変数を入れてください。*/

p {
	margin-bottom: 1em;
}

/*変数*/
:root {

/*色*/
--main-color: #7C5885;
--red-color: #CC0C39;
--faq-color: #E3E6E6;
--btn-color: #FFCA00;
--text-color: #333333;
--border-color: #E3E6E6;
--gray-color: #F0F2F2;
	--table-color02: #DBCBDF;

/*コンテンツ幅*/
--max-width: 652px;
--max-width-content: 1100px;

/*ボタンサイズ*/
--btn_width: 450px;
--btn_height: clamp(45px, 22.723px + 4.95vw, 55px);
--btn_font-size: clamp(16px, 2.634px + 2.97vw, 22px);

/*見出しサイズ*/
--h2_font-size: clamp(24px, 17.793px + 1.655vw, 36px);
--h2_height: clamp(55px, 41.034px + 3.724vw, 82px);
--h3_font-size: 22px;

/*マージン設定*/
--margin-bottom_L: clamp(73px, -85.168px + 35.149vw, 144px);
--margin-bottom_M: clamp(45px, 26.897px + 4.828vw, 80px);
--margin-bottom_S: 24px;
--margin-bottom_btn: 13px;

/*レスポンシブメディアクリ*/
--media-pc :1000px;
--media-tb: 600px;
}

/*---------------*/
/*--共通設定------*/
/*---------------*/

.content-wrap {
width: 100%;
max-width: var(--max-width-content) !important;
margin: 0 auto var(--margin-bottom_M) !important;
}
.margin-bottom_L {
margin: 0 auto var(--margin-bottom_L) !important;
}
.margin-bottom_M {
margin: 0 auto var(--margin-bottom_M) !important;
}
.margin-bottom_S {
margin: 0 auto var(--margin-bottom_S) !important;
}
.margin-bottom_btn {
	margin-bottom: var(--margin-bottom_btn) !important;
}
.inner-wrap {
width: 90%;
max-width: var(--max-width) !important;
margin: 0 auto;
}
.mainColor {
color: var(--main-color);
}
.textColor {
color: var(--text-color);
}
.redColor {
color: var(--red-color);
}
.sp-display {
display:block;
}
@media screen and (min-width: 1000px) { 
.sp-display {
display:none;
}
}
.pc-display {
display:none;
}
@media screen and (min-width: 1000px) { 
.pc-display {
display:block;
}
}

/*ヘッダーライン*/
#common_header .ch_outer.ccus {
    border-bottom: 3px solid var(--main-color);
}

.color-text {
	color: var(--main-color);
}
@media screen and (min-width: 1000px) { 
.pc-center {
	text-align: center;
}
}
/*---------------*/
/*--申込みボタン--*/
/*---------------*/

.cta_btn--wrap a {
width: 90%;
max-width: var(--btn_width);
height: var(--btn_height);
background-color: var(--btn-color);
border-radius: 30px;
display: flex;
justify-content: center;
align-items: center;
font-size: var(--btn_font-size);
text-decoration: none;
color: var(--text-color);
margin: 0 auto;
border-style: none;
	transition: all 0s;
}
.cta_btn--wrap a:hover {
filter: brightness(80%) !important;
	color: var(--text-color);
	transition: all 0s;
}

/*---------------*/
/*--白ボタン--*/
/*---------------*/
.white_btn--wrap a {
	width: 90%;
    max-width: var(--btn_width);
    height: var(--btn_height);
    background-color: #fff;
    border-radius: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: var(--btn_font-size);
    text-decoration: none;
    color: var(--text-color);
    margin: 0 auto;
    border-style: none;
    font-weight: normal;
	border: 1px solid #898D8D;
	transition: all 0s;
}
.white_btn--wrap a:hover {
filter: brightness(95%) !important;
	color: var(--text-color) !important;
	transition: all 0s;
}
/*-----------------*/
/*--見出しスタイル--*/
/*-----------------*/

.h2 {
	font-size: var(--h2_font-size);
	font-weight: bold;
	text-align: center;
	color: var(--main-color);
	margin-bottom: var(--margin-bottom_S);
}
.h2-sml {
	font-size: clamp(16px, 13.931px + 0.552vw, 20px);
	font-weight: bold;
	text-align: center;
	color: var(--main-color);
}
.h2--style01 {
font-size: clamp(16px, 13.931px + 0.552vw, 20px);
font-weight: bold;
color: var(--main-color);
text-align: center;
position: relative;
margin-bottom: var(--margin-bottom_S);
max-width: var(--wp--style--global--wide-size) !important;
}
.h2--style01-big {
font-size: var(--h2_font-size);
font-weight: bold;
color: var(--main-color);
text-align: center;
position: relative;
margin-bottom: var(--margin-bottom_S);
max-width: var(--wp--style--global--wide-size) !important;
}
.h2--style01::before {
position: absolute;
content: "";
width: 100%;
height: 1px;
background-color: var(--main-color);
top: 50%;
left: 0;
transform: translateY(-50%);
}
.h2--style01-big::before {
position: absolute;
content: "";
width: 100%;
height: 1px;
background-color: var(--main-color);
top: 50%;
left: 0;
transform: translateY(-50%);
}
span.bg-white {
background-color: #fff;
position: relative;
padding: 0 20px;
display: inline-block;
}
.h2--style02 {
font-size: var(--h2_font-size);
color: #fff;
text-align: center;
background-color: var(--main-color);
margin-bottom: var(--margin-bottom_S);
height: auto;
min-height: var(--h2_height);
display: flex;
justify-content: center;
align-items: center;
line-height: 1;
padding: 10px 0;
}
.h2--style02 .h2-bigSize {
font-size: clamp(1.5rem, -0.066rem + 7.83vw, 3.125rem);
color: #fff;
}
.h3 {
font-size: 22px;
}
.h3--style01 {
border: none;
background-color: var(--main-color);
border-radius: 10px 10px 0 0;
color: #fff;
font-weight: bold;
height: 94px;
padding: 0;
font-size: 20px;
display: flex;
align-items: center;
justify-content: center;
	text-align: center;
}
.h4 {
	font-size: 20px;
	margin-bottom: var(--margin-bottom_S);
}

/*-----------------*/
/*--ボックススタイル--*/
/*-----------------*/
.content-inner__box {
border-radius: 10px;
background: #fff;
box-shadow: 0px 6px 9px rgba(0, 0, 0, 0.12);
}
.content-inner__box-content {
	padding: 35px clamp(1.25rem, 0.821rem + 2.15vw, 3.438rem);
}
.content-inner__box ul {
	background-color: var(--gray-color);
    padding: 15px;
    border-radius: 11px;
	font-weight: bold;
	display: grid;
	gap: 5px;
}
[class*=is-style-icon-list-] > li::before {
    color: var(--main-color) !important;
}
.content-inner__box img {
 width: 135px;
	margin: 0 auto;
}

/*---------------*/
/*--表のスタイル--*/
/*---------------*/
.color-bold {
	color: var(--main-color);
	font-weight: bold;
}
.no-th tr {
    border-bottom: 2px solid #fff;
	text-align: center;
}

/*左にth,右にtdのスタイル・色濃いver*/
table.table--style01 th,
table.table--style01 td {
	font-size: 16px;
	padding: 0;
}
table.table--style01 {
	border-bottom: 1px solid var(--main-color);
}
table.table--style01 .title th {
    background-color: var(--main-color);
    color: #fff;
	height: 0;
    padding: 5px 0;
	font-weight: bold;
}

table.table--style01 th {
	width: 75px;
	height: 89px;
	font-weight: normal;
	border-bottom: 2px solid #fff;
	background-color: var(--gray-color);
}
table.table--style01 tr:last-child th {
	border-bottom: 0;
}
table.table--style01 td {
	padding: 10px 20px;
}

/*左にth,右にtdのスタイル・色薄いver*/
table.table--style02 th,
table.table--style02 td {
	font-size: 16px;
	padding: 0;
}
table.table--style02 {
	border-bottom: 1px solid var(--main-color);
}
table.table--style02 .title th {
    background-color: var(--table-color02);
    color: var(--main-color);
	height: 0;
    padding: 5px 0;
	font-weight: bold;
    border-bottom: 2px solid #fff !important;
}
table.table--style02 .sub-title th {
    background-color: var(--gray-color);
    color: var(--main-color);
    height: 0;
    padding: 5px 0;
    font-weight: bold;
	border-bottom: 2px solid #fff !important;
}

table.table--style02 th {
	width: 75px;
	height: 89px;
	font-weight: normal;
	border-bottom: 2px solid #fff;
	background-color: var(--gray-color);
}
table.table--style02 tr:last-child th {
	border-bottom: 0;
}
table.table--style02 td {
	padding: 10px 20px;
}

/*thとtdが縦並びの表*/
table.table--style03 th,
table.table--style03 td {
	font-size: 16px;
}
table.table--style03 th {
    background-color: var(--table-color02);
    height: 38px;
    color: var(--main-color);
}
table.table--style03 td {
    background-color: var(--gray-color);
    padding: 10px 15px;
}

/*給付基礎日額表*/
table.table--style04 th,
table.table--style04 td {
	font-size: 14px;
}
table.table--style04 tr {
	border-bottom: 2px solid #fff;
	text-align: center;
}
.col1 {
  width: 30%;
}
.col2 {
  width: 30%;
}
.col3 {
  width: 40%;
}
table.table--style04 .sub-header th {
    background-color: var(--table-color02);
    color: var(--main-color);
	font-size: 16px;
	font-weight: bold;
	height: 38px;
}
table.table--style04 th {
    background-color: var(--gray-color);
    font-weight: normal;
	padding: 5px 0;
}
table.table--style04 td {
    background-color: var(--gray-color);
	padding: 5px 0;
}


table.border-none {
	border-bottom: 0;
}
table .main-header th {
    background-color: var(--main-color);
    color: #fff;
    height: 38px;
    border-bottom: 3px solid #fff !important;
    font-weight: bold;
}
/*-----------------*/
/*--ここで加入できます--*/
/*-----------------*/
.border-wrap {
    border: 1px solid var(--main-color);
    padding: 10px;
}
.kanyu .sub-title p {
	color: var(--main-color);
}
img.wp-image-3712 {
    border: 1px solid;
	margin-top:1.8em;
}
.kanyu .link {
	width: 70%;
	margin: 0 auto;
}

/*-----------------*/
/*--特徴--*/
/*-----------------*/
.characteristics-wrap {
	margin-bottom: var(--margin-bottom_M) !important;
}
.characteristics-wrap .content-wrap {
	display: flex;
    flex-wrap: wrap;
    row-gap: 1.8em;
	margin-bottom: 0 !important;
}
.characteristics {
    border-radius: 5px;
}
.characteristics {
	background-color: #fff;
    border-radius: 5px !important;
    padding: 60px clamp(20px, 0.821rem + 2.15vw, 30px) clamp(1.25rem, 0.821rem + 2.15vw, 3.438rem);
    position: relative;
	max-width: 350px !important;
	display: grid;
    grid-template-rows: 70px 250px auto;
}
.characteristics .h3 {
	text-align: center;
	color: var(--main-color);
	display: flex;
    align-items: center;
}
.characteristics figure {
	display: flex !important;
    align-items: center;
}
.point {
	width: 101px;
	height: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--main-color);
    color: #fff;
    font-weight: 600;
    line-height: 1.3;
    position: absolute;
    top: 15px;
    left: -10px;
    text-align: center;
}
.point::before {
    position: absolute;
    content: "";
    background-color: var(--text-color);
    width: 10px;
    height: 10px;
    bottom: -10px;
    left: 0;
    clip-path: polygon(0 0, 100% 0, 100% 100%);
}
.characteristics-wrap .text{
	align-items: start;
}



/*-----------------*/
/*--補償内容--*/
/*-----------------*/
img.wp-image-5613 {
    width: 70%;
    margin: 0 auto;
}

.coverage-wrap {
    width: 300px;
    border: 1px solid #E3E6E6;
    border-radius: 10px;
}

p.coverage-ttl {
    font-size: 24px;
    text-align: center;
    color: #333;
    font-weight: bold;
    font-family: 'noto-sans-cjk-jp', sans-serif;
    background-color: #E3E6E6;
    padding: 0px 0 5px 0;
}

span.coverage-ttl_small {
    font-size: 24px;
}

p.coverage-text {
    padding: 20px;
}

.coverage {
    display: grid;
	max-width: 950px !important;
	row-gap: 15px;
}

p.coverage02 {
    font-size: 20px;
    background-color: #E3E6E6;
    color: #333;
    text-align: center;
    font-weight: bold;
    font-family: 'noto-sans-cjk-jp', sans-serif;
    width: 300px;
    border-radius: 10px;
    padding: 10px;
    margin-bottom: 0;
}

.coverage02Wrap {
    display: grid;
    gap: 15px;
    position: relative;
}

.coverageWrap {
    position: relative;
}

img.wp-image-6582 {
    width: 70%;
    margin: 0 auto;
}

@media screen and (min-width: 1000px) {
	.coverage {
    	grid-template-columns: repeat(3, 1fr);
	}
	
    .coverage02Wrap {
        grid-template-columns: repeat(2, 1fr);
        width: 560px;
        padding-bottom: 0px;
    }
}

/*-----------------*/
/*--ご加入の流れ--*/
/*-----------------*/
.flow--wrap {
    display: grid;
    gap: 20px;
    align-items: center;
    grid-template-columns: clamp(6.688rem, 6.172rem + 2.58vw, 9.313rem) 1fr;
}


.flow--wrap figure img {
	width: clamp(6.688rem, 6.172rem + 2.58vw, 9.313rem);
}
p.flow--title {
    margin-bottom: 10px;
    font-size: 22px;
    color: var(--main-color);
    font-weight: bold;
}
figure.arrow--img img {
    width: clamp(3.375rem, 3.019rem + 1.78vw, 5.188rem);
}
p.kanryo--p {
    font-size: 22px;
    font-weight: bold;
    text-align: center;
	margin-bottom: 10px;
}
figure.kanryo--img img {
    width: clamp(6.938rem, 6.545rem + 1.96vw, 8.938rem);
}


/*-----------------*/
/*--豊富な経験と実績のRJC--*/
/*-----------------*/
.relief .box {
    display: grid;
    grid-template-rows: 140px 80px auto;
	max-width: 300px;
}
.relief .h3 {
    display: flex;
    align-items: center;
}


/*-----------------*/
/*--お客様の声--*/
/*-----------------*/
.voice-wrap .title {
    display: grid;
    gap: 15px;
    grid-template-columns: 70px auto;
	align-items: center;
}
.voice-wrap .box-wrap {
    display: flex;
    flex-wrap: wrap;
}
.voice-wrap .box {
    max-width: 350px;
    padding: 20px;
    border: 1px solid var(--main-color);
    border-radius: 3px;
    display: grid;
    grid-auto-rows: 120px 145px auto;
    align-items: center;
}
p.hosyo {
    padding: 10px 20px;
    background-color: var(--gray-color);
    border-radius: 5px;
    font-weight: bold;
    color: var(--main-color);
}
p.hosyo--text {
    align-self: start;
}

/*-----------------*/
/*--よくある質問--*/
/*-----------------*/
.wp-block-cocoon-blocks-toggle-box-1.toggle-wrap.toggle-box.block-box.not-nested-style.cocoon-block-toggle.faq_accordion {
    background-color: #E3E6E6 !important;
    border: none !important;
    border-radius: 10px !important;
}
.faq_accordion label.toggle-button {
    border: none;
    background-color: #E3E6E6;
    color: #333;
    font-weight: bold;
    font-size: clamp(1rem, 0.926rem + 0.37vw, 1.375rem);
    padding: 20px 50px 20px 20px;
    text-align: left;
    display: flex;
    align-items: center;
    position: relative;
    border-radius: 10px;
}
.faq_accordion .toggle-button::before {
    content: "Q" !important;
    display: block;
    font-size: 24px;
    color: #333;
    opacity: 1;
    line-height: 1;
}
.faq_accordion .toggle-checkbox:checked ~ .toggle-button::before {
    content: "Q" !important;
    display: block;
    font-size: 24px;
    color: #333;
    opacity: 1;
}
.faq_accordion .toggle-button::after {
    content: "+" !important;
    display: block;
    color: #333;
    opacity: 1;
    line-height: 1;
    transform: translate(0, -7px);
    font-size: 40px;
    font-weight: normal;
    margin-left: auto;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 20px;
}
.faq_accordion .toggle-checkbox:checked ~ .toggle-button::after {
    content: "" !important;
	position: absolute;
    display: block;
	width: 18px;
	height: 3px;
    background-color: #333;
    opacity: 1;
    line-height: 1;
    transform: translate(0, 0);
	top: 50%;
	right: 20px;
	transform: translatey(-50%);
}
.faq_accordion .toggle-content{
	padding: 0 50px 0px;
	font-size: 16px;
}
.faq_accordion .toggle-checkbox:checked ~ .toggle-content {
    border: none;
	padding: 0 50px 20px;
	font-size: 16px;
}
.toggle-wrap .toggle-content {
    transition: opacity 0.3s ease-in-out !important;
}
.toggle-checkbox:checked ~ .toggle-content {
	transition: opacity 0.3s ease-in-out !important;
}


/*-----------------*/
/*--表--*/
/*-----------------*/

.rouki-table .wp-block-table thead {
    border-bottom: 0px !important;
}
.rouki-table th {
    background-color: var(--main-color);
    border-radius: 0 !important;
    color: #fff !important;
    font-weight: normal;
    border: 1px solid #fff !important;
}
.rouki-table td {: top;
    background-color: #F5F5F5 !important;
    border: 2px solid #fff !important;
    border-radius: 0px !important;
	vertical-align: top;
}

/*-----------------*/
/*--お問い合わせ--*/
/*-----------------*/
.contact--section {
    background-color: var(--main-color) !important;
	padding: 50px 0 !important;
}
.contact--section .inner-wrap {
    background-color: #fff;
    border-radius: 10px;
    padding: 40px 20px;
    text-align: center;
}
h2.contact-h2 {
    margin-bottom: var(--margin-bottom_S);
}
.contact--section_tel {
    border: 1px solid var(--main-color) !important;
    border-radius: 10px;
    padding: 20px;
    max-width: 500px !important;
}
.contact--section .text {
    text-align: left;
}
@media screen and (min-width: 1000px) {
	.contact--section .text {
    text-align: center;
}
}


/*-----------------*/
/*--その他--*/
/*-----------------*/
/*ベスト３*/
span.flex {
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

/*お困りごと*/
.trouble .box-wrap {
    display: flex;
    flex-wrap: wrap;
}

.trouble .box {
    border: 1px solid var(--main-color);
    border-radius: 10px;
    background-color: #fff;
    padding: 20px 10px;
    text-align: left;
    font-weight: normal;
    box-shadow: rgba(0, 0, 0, 0.22) 0px 3px 6px;
    max-width: 350px !important;
    display: grid;
    gap: 10px;
}
.trouble .box figure {
    display: grid;
    align-items: end;
}
.trouble .box figure img {
	height: 120px;
	width: auto;
}
.ranking-title {
    display: grid;
    grid-template-columns: 72px auto;
    align-items: start;
    gap: 5px;
	font-weight: bold;
}
p.ranking {
    font-size: clamp(1rem, 0.926rem + 0.37vw, 1.375rem);
    font-weight: bold;
    color: rgb(255, 255, 255);
    background-color: var(--main-color);
    line-height: 1.5;
    padding: 0px 15px;
    border-radius: 5px;
	margin-bottom: 0;
}
span.rank--number {
    font-size: clamp(24px, 22.592px + 0.376vw, 28px);
}
p.ranking--text {
    font-weight: bold;
    color: var(--main-color);
    font-size: clamp(1.063rem, 1.001rem + 0.31vw, 1.375rem);
    text-align: left;
    width: 100%;
}

.hokenryo p.att {
    padding: 10px 20px;
    border: 1px solid var(--main-color);
    border-radius: 10px;
}


/*-----------------*/
/*--KVテキスト化--*/
/*-----------------*/
/*大阪労基　画像設定*/
.inner-wrap.kv-text_inner.osaka {
    background-image: url(https://www.freelance-hoken.jp/wp-content/uploads/2025/08/マスクグループ-36.png);
}

/*白背景*/
.inner-wrap.kv-text_inner.white {
    background-color: #fff;
}

/*共通設定*/
.kv-text_inner {
    background-size: cover;
    background-repeat: no-repeat;
}
.kouseiroudousyo {
    font-weight: bold;
    background-color: var(--text-color);
    color: #fff;
    width: 160px;
    border-radius: 30px;
    height: 33px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.kouseiroudousyo.main-color {
    background-color: var(--main-color);
	width: 100%;
	max-width: 300px !important;
}
.kv-text_inner ul {
    width: 250px;
}
.kv--gyosyu span {
    background-color: var(--main-color);
    color: #fff;
    display: inline-flex;
    padding: 3px 5px;
    border-radius: 3px;
}
.KV--text-wrap {
	background-color: var(--main-color) !important;
}
.kv--text-sml {
	line-height: 1;
}
/*-----------------*/
/*--特別加入制度とは--*/
/*-----------------*/
.about .system_content h3 {
	margin-bottom: var(--margin-bottom_S);
}
.about img {
	text-align: center;
	margin: 0 auto;
}
.itaku-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px;
	font-size: 14px;
}

/*----------------------------*/
/*    　監修者用のスタイル　  */
/*----------------------------*/

.renew_kansyu .renew_inner {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 0 30px;
    align-items: start;
}
.renew_kansyu .kansyu_item {
    margin: 0 !important;
    border: none;
    border-radius: 10px;
    padding: 0;
    display: grid;
    grid-template-rows: subgrid;
    grid-row: span 6;
    gap: 0;
}
.renew_kansyu .kansyu_item_title {
    text-align: center;
    padding: 10px 0;
    background-color: var(--main-color) !important;
    border-radius: 10px 10px 0 0;
    border: 1px solid var(--main-color);
    margin: 0 !important;
    display: grid;
    grid-template-columns: subgrid;
    line-height: 1em;
	color: #fff;
}
.renew_kansyu  .kansyu_item_body {
    padding: 20px;
    border: 1px solid #ccc;
    border-top: none;
    border-radius: 0 0 10px 10px;
    margin: 0 !important;
    display: grid;
    grid-template-rows: subgrid;
    grid-row: 2 / 7;
}
.kansyu_item_body_titlecard {
    display: grid;
    grid-template-columns: 30% 1fr;
    gap: 0px 15px;
    align-items: center;
    margin: 0 !important;
    grid-template-rows: subgrid;
    grid-row: 2 / 5;
}
.kansyu_item_body .photo {
    display: grid;
    grid-row: 1 / 3;
    margin: 0 !important;
    align-items: center;
}
.kansyu_item_body .role {
    font-size: 11px;
    margin: 5px 0 0 0 !important;
    display: grid;
    grid-template-rows: subgrid;
    grid-row: 3;
    align-items: start;
    padding-top: 5px;
    grid-column: 1 / 3;
    border-top: 1px solid #ddd;
    line-height: 1.4em;
}
.kansyu_item_body .name {
    margin: 0 !important;
    padding: 10px 0 3px 0;
    font-size: 20px;
    line-height: 1em;
    display: grid;
    grid-template-rows: subgrid;
    grid-row: 1;
    align-items: end;
}
.kansyu_item_body .furi {
    margin: 0 !important;
    font-size: 12px;
    display: grid;
    grid-template-rows: subgrid;
    grid-row: 2;
}
.kansyu_item_body .description {
    margin: 0 !important;
    padding-top: 2em;
    font-size: 14px;
    display: grid;
    grid-template-rows: subgrid;
    grid-row: 5;
}

@media screen and (max-width: 1100px) {
 .renew_kansyu {
    overflow-x: scroll;
 }
 .renew_kansyu .renew_inner {
    min-width: 950px;
    gap: 0 15px;
    padding: 0;
 }
}

/*-----------------*/
/*--マガジン--*/
/*-----------------*/
.popular-entry-cards {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px 20px;
    max-width: 1000px !important;
    margin: 0 auto 1.8em;
}
.popular-entry-card {
    display: grid;
    grid-template-areas:
        'img title'
        'img date';
    font-size: clamp(16px, 14.966px + 0.276vw, 18px);
    line-height: 20px;
    column-gap: 15px;
    grid-template-columns: clamp(8.75rem, 6.173rem + 12.88vw, 21.875rem) 1fr;
    text-align: left;
    text-decoration: none;
}
figure.popular-entry-card-thumb {
    grid-area: img;
    height: auto;
    width: 100% !important;
}
.popular-entry-card-content {
    margin-left: 0 !important;
}
@media screen and (max-width: 1024px) {
    .card-thumb img {
        max-width: 350px !important;
    }
}