@charset "UTF-8";
/*
 * common.css
 * 本ファイルは、CMS管理です。
 * 
 */

/** * Layout Main */.l-main { z-index: 1; position: relative; width: 900px;}.l-aside { z-index: 1; position: relative; width: 360px;}@media (min-width: 769px) and (max-width: 1300px) { .l-main { width: 64%; } .l-aside { width: 32%; }}@media (max-width: 768px) { .l-main, .l-aside { width: 100%; } .l-main { margin-bottom: 40px; }}.l-main button,.l-main a,.l-aside a { display: inline-block; -webkit-transition: opacity 0.3s ease-in; transition: opacity 0.3s ease-in;}.l-main button:hover,.l-main a:hover,.l-aside a:hover { opacity: 0.7;}.new { padding: 0 0.4em; font-size: 0.875rem; font-weight: 500; color: #fff; background-color: #e6371d; text-align: center; position: absolute; top: 0; right: 0;}.l-aside .andmore { font-size: 1rem; font-weight: 700; text-align: center;}.l-aside .andmore a { position: relative;}.l-aside .andmore a::after { content: ""; width: 8px; height: 8px; border: 0; border-top: solid 2px #333; border-right: solid 2px #333; transform: rotate(45deg); position: absolute; top: calc(50% - 4px); right: -20px;}/* tag_color */.p-genre_tag,a .p-genre_tag {/* margin-bottom: 10px; font-size: 0.875rem; *//* No.25 */ margin-bottom: 4px; font-size: 0.75rem; font-weight: 500;}.p-genre_tag { padding: 0 1em; border-radius: 20px; display: inline-flex;}a .p-genre_tag { color: #333; background-color: #fff; border: 1px solid #333;}/*.p-genre_tag,.p-genre a { */.p-genre_tag {/* margin-right: 10px; *//* No.25 */ margin-right: 4px;}a .p-genre_tag:last-child,.p-genre_tag:last-child,.p-genre a:last-child,a .p-genre_tag:only-child,.p-genre_tag:only-child,.p-genre a:only-child { margin-right: 0;}/* 注目タグ（tags） */.tag_other,a .tag_other { color: #9f1807; background-color: #fff; border: 1px solid #9f1807;}@media (max-width: 768px) { .p-genre_tag, a .p-genre_tag { margin-bottom: 4px;/* font-size: 3.73vw; *//* No.25 - 10/14*3.73 font-size: 2.66vw; *//* No.25 - 12/14*3.73 */ font-size: 3.2vw; }/* .p-genre_tag, .p-genre a { */ .p-genre_tag { margin-right: 4px; }}/** * Main 900px : content *//* SNS */.l-main .content_sns { margin-bottom: 80px;}.l-main .content_sns:last-of-type { margin-top: 40px;}.l-main .content_sns + .content_img { margin-top: -50px;}.l-main .content_sns > ul { display: flex; justify-content: flex-end; align-items: center;}.l-main .content_sns > ul > li img { height: auto; width: 100%; cursor: pointer;}@media (min-width: 769px) { .l-main .content_sns > ul > li { height: 36px; margin: 0 0 0 16px; width: 36px; }}@media (max-width: 768px) { .l-main .content_sns > ul > li { height: 9.6vw; /* margin: 0 2.1333333333vw; */ margin: 0 0 0 4.26vw; width: 9.6vw; } .l-main .content_sns:last-of-type { margin-top: 40px; margin-bottom: 0; }}.l-main .content_body,.l-main .content_body_more { position: relative;}/*-- サンプル記事H2相当 --*/.l-main .content_body h2.leading_sample,.l-main .content_body_more h2.leading_sample { margin-top: 40px; margin-bottom: 20px; font-size: 1.5rem; font-weight: 700;}.l-main .content_body h1,.l-main .content_body_more h1 {font-size: 2rem;}.l-main .content_body h2,.l-main .content_body_more h2 {font-size: 1.5rem;}.l-main .content_body h3,.l-main .content_body_more h3,.l-main .content_body h4,.l-main .content_body_more h4,.l-main .content_body h5,.l-main .content_body_more h5,.l-main .content_body h6,.l-main .content_body_more h6 {font-size: 1.17rem;}/*.l-main .content_body h4,.l-main .content_body_more h4 {font-size: 1rem;}.l-main .content_body h5,.l-main .content_body_more h5 {font-size: 0.83rem;}.l-main .content_body h6,.l-main .content_body_more h6 {font-size: 0.67rem;}*/.l-main .content_body h1, .l-main .content_body_more h1,.l-main .content_body h2, .l-main .content_body_more h2,.l-main .content_body h3, .l-main .content_body_more h3,.l-main .content_body h4, .l-main .content_body_more h4,.l-main .content_body h5, .l-main .content_body_more h5,.l-main .content_body h6, .l-main .content_body_more h6 {font-weight: 700;}.l-main .content_body p,.l-main .content_body_more p { margin-bottom: 35px; font-size: 1.0625rem; line-height: 2.1;}.mt-image-none { margin:0 auto !important; }.mt-image-left { margin-right: auto; }.mt-image-center { margin:0 auto !important; }.mt-image-right { margin-left: auto; }.l-main .content_body p:has(> .mt-image-none) + p.author_left,.l-main .content_body p:has(> .mt-image-left) + p.author_left,.l-main .content_body p:has(> .mt-image-center) + p.author_left,.l-main .content_body p:has(> .mt-image-right) + p.author_left,.l-main .content_body_more p:has(> .mt-image-none) + p.author_left,.l-main .content_body_more p:has(> .mt-image-left) + p.author_left,.l-main .content_body_more p:has(> .mt-image-center) + p.author_left,.l-main .content_body_more p:has(> .mt-image-right) + p.author_left,.l-main .content_body p:has(> .mt-image-none) + p.author_right,.l-main .content_body p:has(> .mt-image-left) + p.author_right,.l-main .content_body p:has(> .mt-image-center) + p.author_right,.l-main .content_body p:has(> .mt-image-right) + p.author_right,.l-main .content_body_more p:has(> .mt-image-none) + p.author_right,.l-main .content_body_more p:has(> .mt-image-left) + p.author_right,.l-main .content_body_more p:has(> .mt-image-center) + p.author_right,.l-main .content_body_more p:has(> .mt-image-right) + p.author_right,.l-main .content_body p:has(> .mt-image-none) + p.copyright,.l-main .content_body p:has(> .mt-image-left) + p.copyright,.l-main .content_body p:has(> .mt-image-center) + p.copyright,.l-main .content_body p:has(> .mt-image-right) + p.copyright,.l-main .content_body_more p:has(> .mt-image-none) + p.copyright,.l-main .content_body_more p:has(> .mt-image-left) + p.copyright,.l-main .content_body_more p:has(> .mt-image-center) + p.copyright,.l-main .content_body_more p:has(> .mt-image-right) + p.copyright { margin-top: -35px;}/*-- エディタ周り --*/.l-main .content_body:after,.l-main .content_body_more:after,.l-main .content_body p:after,.l-main .content_body_more p:after { content: ""; display: block; clear: both;}.l-main .content_body strong, .l-main .content_body_more strong {font-weight: 700;}.l-main .content_body em, .l-main .content_body_more em {font-style: italic;}.l-main .content_body blockquote { display: block; margin: 1em 40px;}.l-main .content_body ul { padding-left: 2em;}/*.l-main .content_body ul li { list-style: outside disc;}*/.l-main .content_body ol { padding-left: 2em;}.l-main .content_body ol li { list-style: outside decimal;}/*.l-main .content_body a { color: #0000ff;}*/.l-main .content_body hr { clear: both; display: block; border: none; border-top: #9a9a9a 1px solid; border-bottom: #eeeeee 1px solid;}.l-main .content_body pre { display: block; font-family: Consolas, Monaco, monospace;}/*-- エディタ周り ここまで --*/.l-main .content_body p + img,.l-main .content_body img + img,.l-main .content_body_more p + img,.l-main .content_body_more img + img { margin-top: 20px;}.l-main .content_img p.copyright,.l-main .content_body p.author_left,.l-main .content_body p.author_right,.l-main .content_body p.copyright,.l-main .content_body_more p.author_left,.l-main .content_body_more p.author_right,.l-main .content_body_more p.copyright { padding: 0.2em 0; font-size: 0.875rem;}.l-main .content_img p.copyright,.l-main .content_body p.author_right,.l-main .content_body p.copyright,.l-main .content_body_more p.author_right,.l-main .content_body_more p.copyright { text-align: right;}@media (max-width: 768px) {.l-main .content_body h1, .l-main .content_body_more h1,.l-main .content_body h2, .l-main .content_body_more h2,.l-main .content_body h3, .l-main .content_body_more h3,.l-main .content_body h4, .l-main .content_body_more h4,.l-main .content_body h5, .l-main .content_body_more h5,.l-main .content_body h6, .l-main .content_body_more h6, .l-main .content_body p, .l-main .content_body_more p { margin-left: 5%; margin-right: 5%; width: 90%; } .l-main .content_body h2, .l-main .content_body_more h2 { margin-top: 40px; margin-bottom: 20px; font-size: 5.06vw; } .l-main .content_body p, .l-main .content_body_more p { font-size: 4.26vw; }.l-main .content_img p.copyright,.l-main .content_body p.author_left,.l-main .content_body p.author_right,.l-main .content_body p.copyright,.l-main .content_body_more p.author_left,.l-main .content_body_more p.author_right,.l-main .content_body_more p.copyright { padding: 0.2em 0; font-size: 0.875rem; }}.slider .l-aside_link,.content_relate .l-aside_link,.content_broad_info .l-aside_link,.content_prod_info .l-aside_link,.top_arrival .l-aside_link,.category_list .l-aside_link,.l-main .content_arrival .l-aside_link,.l-main .content_column .l-aside_link,.l-aside_ranking .l-aside_link { position: absolute; top: 0; right: 0; bottom: 0; left: 0;}.slider .l-aside_link,.content_relate .l-aside_link,.content_broad_info .l-aside_link,.content_prod_info .l-aside_link,.top_arrival .l-aside_link,.category_list .l-aside_link,.l-main .content_arrival .l-aside_link,.l-main .content_column .l-aside_link,.l-aside_ranking .l-aside_link { opacity: 0; z-index: 10;}.slider .l-aside_link:hover,.content_relate .l-aside_link:hover,.content_broad_info .l-aside_link:hover,.content_prod_info .l-aside_link:hover,.top_arrival .l-aside_link:hover,.category_list .l-aside_link:hover,.l-main .content_arrival .l-aside_link:hover,.l-main .content_column .l-aside_link:hover,.l-aside_ranking .l-aside_link:hover { opacity: 0.3; background-color: #fff;}.slider .tags a,.content_relate .tags a,.content_broad_info .tags a,.content_prod_info .tags a,.top_arrival .tags a,.top_ranking .tags a,.top_interview .tags a,.top_column .tags a,.category_list .tags a,.l-main .content_arrival .tags a,.l-main .content_column .tags a,.l-aside_ranking .tags a { position: relative; z-index: 20;}@media (max-width: 768px) {.slider .l-aside_link,.content_relate .l-aside_link,.content_broad_info .l-aside_link,.content_prod_info .l-aside_link,.top_arrival .l-aside_link,.category_list .l-aside_link,.l-main .content_arrival .l-aside_link,.l-main .content_column .l-aside_link,.l-aside_ranking .l-aside_link { opacity: 1; z-index: 10;}/*.slider .l-aside_link:hover { opacity: 1; background-color: unset;}*/.slider .l-aside_link:hover,.content_relate .l-aside_link:hover,.content_broad_info .l-aside_link:hover,.content_prod_info .l-aside_link:hover,.top_arrival .l-aside_link:hover,.category_list .l-aside_link:hover,.l-main .content_arrival .l-aside_link:hover,.l-main .content_column .l-aside_link:hover,.l-aside_ranking .l-aside_link:hover { opacity: 1; background-color: unset;/* background-color: rgba(255 255 255 0) !important;*/}}/** * rgba(255 255 255 0.5) * Block - Font * *//* expertsは別設定 */.l-main .content_body p.content_title { margin-bottom: 40px; font-size: 2.125rem; font-weight: 700; text-align: center; color: #e6371d; line-height: 1.25;/* No.21 */ font-size: 1.625rem;}.l-main .andmore,.l-main .content_body .andmore { margin: 0 auto; width: 230px; height: 50px; font-size: 1.125rem; font-weight: 700; text-align: center; background: #fff; border: 2px solid #333; border-radius: 25px; transition: all 0.3s ease; cursor: pointer;}.l-main .andmore a,.l-main .content_body .andmore a { width: 100%; height: 100%; position: relative; display: flex; justify-content: center; align-items: center;}.l-main .andmore a::after,.l-main .content_body .andmore a::after { content: ""; width: 8px; height: 8px; border: 0; border-top: solid 2px #333; border-right: solid 2px #333; transform: rotate(45deg); position: absolute; top: calc(50% - 4px); right: 20px;}.l-main .content_body .andmore.arrow_bottom { position: relative; display: flex; justify-content: center; align-items: center; color: #333333;}.l-main .content_body .andmore.arrow_bottom::after { content: ""; width: 8px; height: 8px; border: 0; border-top: solid 2px #333; border-right: solid 2px #333; transform: rotate(135deg); position: absolute; top: calc(50% - 8px); right: 20px;}.ttl { margin-bottom: 20px; padding: 10px 0; font-size: 2.125rem; font-weight: 700; text-align: center; color: #e6371d;/* No.21 */ font-size: 1.625rem;}.p-title { font-size: 0.875rem; font-weight: 700;}.p-date,.p-text { font-size: 0.75rem; line-height: 1.5;}.p-date { color: #999;}.writer_list { margin-top: 10px; padding-right: 20px; font-size: 1rem; font-weight: 700; text-align: right;}.writer_list a { position: relative;}.writer_list a::after { content: ""; width: 8px; height: 8px; border: 0; border-top: solid 2px #333; border-right: solid 2px #333; transform: rotate(45deg); position: absolute; top: calc(50% - 4px); right: -15px;}@media (min-width: 769px) and (max-width: 1300px) { .l-main .andmore, .l-main .content_body .andmore { width: 61.3%; height: 50px; }}@media (max-width: 768px) {.l-main .content_body p.content_title { margin-left: 5%; margin-right: 5%; width: 90%; margin-bottom: 20px; font-size: 6.8vw;/* No.21 */ font-size: 4.4vw; } .l-main .andmore, .l-main .content_body .andmore { width: 61.3%; height: 50px; font-size: 4.8vw; } .l-aside .andmore { font-size: 4.26vw; } .ttl { margin-bottom: 20px; padding: 5px 0; font-size: 6.8vw; display: flex; justify-content: center; align-items: center; flex-wrap: wrap; flex-direction: column;/* No.21 */ font-size: 4.4vw; } .ttl span { font-size: 5.86vw;/* No.21 */ font-size: 3.8vw; } .p-title { font-size: 4.26vw; } .p-date, .p-text { font-size: 3.2vw; } .p-genre, .p-genre a {/* font-size: 3.73vw; *//* No.25 - 10/14*3.73 font-size: 2.66vw; *//* No.25 - 12/14*3.73 */ font-size: 3.2vw; } .writer_list { font-size: 4.26vw; }}/** * * WEB PAGE - STATEMENT * *//* 記事ランキング - top_ranking 流用*/.l-main .content_ranking { margin-bottom: 90px;}.l-main .content_ranking .ttl { line-height: 1.5;}/*.l-main .content_ranking + .content_ranking { margin-top: 80px;}*/@media (min-width: 769px) and (max-width: 1300px) { .l-main .content_ranking { margin: 0 2% 45px; padding: 0; width: 96%; }}@media (max-width: 768px) { .l-main .content_ranking { margin: 0 5% 45px; width: 90%; }/* No.21 .l-main .content_ranking .ttl { font-size: 6.8vw; } */}.l-main .content_ranking .content_wrap { margin-bottom: 20px; display: flex; justify-content: flex-start; align-items: stretch; flex-wrap: wrap;}.l-main .content_ranking .card { margin-right: auto; margin-bottom: 30px; padding: 20px; width: 400px; width: calc(48.88% - 40px); background-color: #fff; border: 1px solid #333; position: relative;}.l-main .content_ranking .card:nth-child(2n) { margin-right: 0;}/*.l-main .content_ranking .card:nth-child(n + 5) { margin-bottom: 0;} */.l-main .content_ranking .num { width: 54px; aspect-ratio: 1 / 1; position: absolute; top: -10px; left: -10px;}.l-main .content_ranking .card_inf { margin-left: 45px; margin-bottom: 5px; display: flex; justify-content: space-between; align-items: flex-start; flex-direction: row;}.l-main .content_ranking .card_prg a { display: flex; justify-content: space-between; align-items: flex-start; flex-direction: row;}.l-main .content_ranking .p-date { margin-top: 5px; text-align: right;}.l-main .content_ranking .p-title { width: 190px;}.l-main .content_ranking .p-title_ph { position: relative; width: 190px; aspect-ratio: 4 / 3; background-color: #333; display: flex; justify-content: center; align-items: center;}.l-main .content_ranking .p-title_ph img { width: 100%; aspect-ratio: 4 / 3; object-fit: contain;}@media (min-width: 769px) and (max-width: 1300px) { .l-main .content_ranking .card { margin-left: 10px; margin-right: auto; margin-bottom: 30px; padding: 10px 2%; width: calc(44% - 10px); } .l-main .content_ranking .card:nth-child(2n) { margin-right: 0; } .l-main .content_ranking .card:nth-child(n + 5) { margin-bottom: 0; } .l-main .content_ranking .num { width: 18%; aspect-ratio: 1 / 1; } .l-main .content_ranking .card_inf { margin-left: 10%; margin-bottom: 10px; display: flex; justify-content: space-between; align-items: flex-start; flex-direction: row; } .l-main .content_ranking .p-title_ph { width: 43.44%; } .l-main .content_ranking .p-title { width: 53.11%; }}@media (max-width: 768px) { .l-main .content_ranking .content_wrap { margin-bottom: 20px; display: flex; justify-content: center; align-items: flex-start; flex-wrap: wrap; } .l-main .content_ranking .card { margin-right: 0; margin-bottom: 30px; padding: 15px; width: calc(100% - 30px); } .l-main .content_ranking .card:nth-child(3) { margin-bottom: 0; } .l-main .content_ranking .card:nth-child(n + 4) { display: none; } .l-main .content_ranking .num { width: 18%; aspect-ratio: 1 / 1; } .l-main .content_ranking .p-title_ph { width: 43.44%; } .l-main .content_ranking .p-title { width: 53.11%; } .l-main .content_ranking .p-date { font-size: 3.2vw; } .l-main .content_ranking .p-genre_tag {/* font-size: 3.73vw; *//* No.25 - 10/14*3.73 font-size: 2.66vw; *//* No.25 - 12/14*3.73 */ font-size: 3.2vw; }}/* 新着記事 */.l-main .content_arrival { margin-top: 80px; padding: 20px; background-color: #fff; border: 2px solid #333; border-radius: 20px;}.l-main .content_arrival .content_wrap { margin-bottom: 20px; display: flex; justify-content: flex-start; align-items: stretch; flex-wrap: wrap;}.l-main .content_arrival .card { margin-right: 26px; margin-bottom: 30px; width: 325px; position: relative;}.l-main .content_arrival .card:nth-child(2n) { margin-right: 0;}.l-main .content_arrival .card:nth-child(n + 5) { margin-bottom: 0;}.l-main .content_arrival .card_prg { position: relative; display: flex; justify-content: space-between; align-items: flex-start; flex-direction: row;}.l-main .content_arrival .card_prg_ph { position: relative; width: 160px;}.l-main .content_arrival .card_prg_ph img { width: 100%;}.l-main .content_arrival .card_prg_inf { width: calc(100% - 170px);}@media (min-width: 769px) and (max-width: 1300px) { .l-main .content_arrival .card { margin-right: 4%; margin-bottom: 30px; width: 48%; position: relative; }}@media (max-width: 768px) { .l-main .content_arrival { margin-top: 40px; margin-left: 5%; margin-right: 5%; width: calc(90% - 20px); padding: 10px; background-color: #fff; border: 2px solid #333; border-radius: 20px; display: flex; justify-content: center; flex-direction: column; } .l-main .content_arrival .card { margin-right: 0; margin-bottom: 20px; width: 100%; position: relative; }}/* 連載コラム - top_column 流用 */.l-main .content_column { margin-top: 80px; /* padding: 20px; background-color: #fff; border: 2px solid #333; border-radius: 20px; display: flex; justify-content: center; flex-direction: column;*/ padding: 30px 30px 40px; width: calc(100% - 60px); background-color: #fff; border: 1px solid #333;}.l-main .content_column .content_wrap { margin-bottom: 20px; display: flex; justify-content: flex-start; align-items: stretch; flex-wrap: wrap;}.l-main .content_column .card { margin-right: auto; margin-bottom: 20px; width: 48.21%; display: block;}.l-main .content_column .card:nth-child(2n) { margin-right: 0;}.l-main .content_column .card_inf { margin-bottom: 5px; display: flex; justify-content: space-between; align-items: flex-start; flex-direction: row;}.l-main .content_column .card_prg a { position: relative; display: flex; justify-content: space-between; align-items: flex-start; flex-direction: row;}.l-main .content_column .p-date { margin-top: 5px;}.l-main .content_column .p-title_ph { position: relative; width: 190px; aspect-ratio: 4 / 3; background-color: #333; display: flex; justify-content: center; align-items: center;}.l-main .content_column .p-title_ph img { width: 100%; aspect-ratio: 4 / 3; object-fit: contain;}.l-main .content_column .p-date { margin-top: 5px;}.l-main .content_column .p-title_ph { width: 190px; position: relative;}.l-main .content_column .card_prg_inf { width: 195px;}.l-main .content_column .p-text { margin-bottom: 10px; font-weight: 700;}.l-main .content_column .p-title { font-weight: 400;}@media (min-width: 769px) and (max-width: 1300px) { .l-main .content_column { margin: 0 2% 45px; padding: 15px; width: calc(96% - 30px); } .l-main .content_column .content_wrap { margin-bottom: 20px; display: flex; justify-content: center; align-items: flex-start; flex-wrap: wrap; } .l-main .content_column .card { margin-right: 0; margin-bottom: 15px; padding: 0 0 15px; width: 100%; border-bottom: 1px solid #ddd; } .l-main .content_column .card:nth-child(n + 4) { display: none; } .l-main .content_column .p-title_ph { width: 43.58%; } .l-main .content_column .card_prg_inf { width: 53.72%; }}@media (max-width: 768px) { .l-main .content_column { margin: 0 5% 45px; padding: 0; width: 90%; border: none; } .l-main .content_column .content_wrap { margin-bottom: 20px; display: flex; justify-content: center; align-items: flex-start; flex-wrap: wrap; } .l-main .content_column .card { margin-right: 0; margin-bottom: 15px; padding: 0 0 15px; width: 100%; border-bottom: 1px solid #ddd; } .l-main .content_column .card:nth-child(n + 4) { display: none; } .l-main .content_column .p-title_ph { width: 43.58%; } .l-main .content_column .card_prg_inf { width: 53.72%; } .l-main .content_column .p-text { margin-bottom: 10px; font-size: 4.26vw; } .l-main .content_column .p-date { font-size: 3.2vw; } .l-main .content_column .p-genre_tag {/* font-size: 3.73vw; *//* No.25 - 10/14*3.73 font-size: 2.66vw; *//* No.25 - 12/14*3.73 */ font-size: 3.2vw; }}/** * 連載コラム */.page_author .l-main .column-image { margin-bottom: 40px; width: 100%;}.page_author .l-main .main-box { margin-bottom: 60px;}.page_author .l-main .content_body p { margin-bottom: 0;}.page_author .l-main .content_body .content_lead { margin-bottom: 40px; font-size: 1.125rem; font-weight: 700;}.page_author .l-main .card_prg { margin-bottom: 0;}@media (min-width: 769px) and (max-width: 1300px) { .page_author .l-main .main-box { margin: 0 2% 45px; padding: 0; width: 96%; }}@media (max-width: 768px) { .page_author .l-main .main-box { margin: 0 5% 45px; width: 90%; } .page_author .content_lead { margin-bottom: 20px; font-size: 4.8vw; }}/** * Side : base */.l-aside_body { width: 100%;}.l-aside_body .card { position: relative;}/** * Side : serialization */.l-aside_serialization .ttl { padding: 0; font-size: 1.5rem; color: #333;}.l-aside_serialization .l-aside_body { width: 100%; text-align: center;}.l-aside_serialization .l-aside_body a { display: block;}.l-aside_serialization .l-aside_body a + a { margin-top: 20px;}@media (max-width: 768px) { .l-aside_serialization .ttl { font-size: 5.86vw; }}/** * Side : text */.l-aside .p-date { text-align: right;}@media (max-width: 768px) { .l-aside .p-date { text-align: right; }}/** * Search Result */.content-nav { font-size: 1rem; font-weight: 700; text-align: center;}.hidden { display: none;}/** * Side 360px * index_side → common.css へ統合に */.l-aside_top { margin-bottom: 40px; padding: 20px; background-color: #f1f1f1; border-top: 4px solid #ee5d44; display: flex; justify-content: center; align-items: center; flex-direction: column;}.l-aside_top:nth-child(3) { padding-bottom: 0;}.l-aside_serialization { margin-bottom: 40px;}.l-aside_top .ttl { font-size: 1.5rem; color: #333;}.l-aside_top .card { margin-bottom: 20px; padding: 10px; background: #fff; display: block;}.l-aside_top .card_inf { margin-bottom: 5px; display: flex; justify-content: space-between; align-items: flex-start; flex-direction: row;}.l-aside_top .card_prg a { display: flex; justify-content: space-between; align-items: flex-start; flex-direction: row;}.l-aside_top .p-date { margin-top: 5px;}.l-aside_top .p-title_ph { position: relative; width: 46.66%; aspect-ratio: 4 / 3; background-color: #333; display: flex; justify-content: center; align-items: center;}.l-aside_top .p-title_ph img { width: 100%; aspect-ratio: 4 / 3; object-fit: contain;}.l-aside_top .p-title { width: 150px; width: 50%;}.l-aside_top.ranking .card_inf { margin-left: 20px;}.l-aside_top.ranking .num { width: 30px; aspect-ratio: 1 / 1; position: absolute; top: -5px; left: -5px;}.l-aside_top.ranking .card_prg_inf { width: 150px; width: 50%;}.l-aside_top.ranking .card_prg_inf .p-title { width: auto;}.l-aside_top.ranking .card_prg_inf .p-text { margin-top: 10px;}@media (min-width: 769px) and (max-width: 1300px) { /* .l-aside_top .p-title_ph { width: 43.58%; } .l-aside_top .p-title { width: 53.72%; }*/}@media (max-width: 768px) { .l-aside_top .ttl { font-size: 5.86vw; } /* .l-aside_top .card:nth-child(n + 4) { display: none; } .l-aside_top .p-title_ph { width: 43.58%; } .l-aside_top .p-title { width: 53.72%; }*/ .l-aside_top.ranking .num { width: 54px; aspect-ratio: 1 / 1; position: absolute; top: -10px; left: -10px; } .l-aside_top.ranking .card_inf { margin-left: 45px; } .l-aside_serialization { margin: 0 2%; padding: 0; width: 96%; }}