@charset "UTF-8";
/* CSS Document */
/* Get Inspired Articles */

.article_block { padding:0 10px; padding-bottom:72px; position:relative; }

.article_block table { font-size:16px; line-height:1.6em; }
.article_block table th { font-weight:normal; white-space:nowrap; vertical-align:top; padding-right:4px; }

.deco_divider { position:relative; }
.deco_divider::after { content:""; width:40px; height:2px; background-color:#d1d2d2; position:absolute; left:50%; margin-left:-20px; top:100%; }

.article_title { font-size:40px; color:#ee3124; text-align:center; font-weight:bold; letter-spacing:.19em; position:relative; padding-bottom:36px; margin-top:80px; margin-bottom:36px; }
.article_title_sub { font-size:24px; text-align:center; font-weight:bold; position:relative; margin-top:80px; margin-bottom:36px; }

.article_timestamp { padding:0 15%; text-align:center; font-size:14px; margin-bottom:2rem; color:lightgray; }

.nav_main_section .nm_main .article_desc { font-size:16px; padding:0 15%; text-align:left; margin-bottom:40px; }

.article_hero { width:100%; margin-bottom:20%; }
.article_hero img { width:100%; }
.article_hero .desktop { aspect-ratio:2460/1080; }
.article_hero .mobile { aspect-ratio:1/1; }
.article_hero.tiny { margin-bottom:10%; }

.article_hdr { font-size:18px; color:#262626; margin-left:74px; margin-bottom:48px; font-weight:bold; max-width:40%; }
.nav_main_section .nm_main .article_hdr strong { font-size:40px; color:#262626; line-height:1.525em; line-height:1.3em; display:inline-block; margin-bottom:.2em; }


.article_box { display:flex; width:100%; align-items:flex-start; margin-bottom:10%; transform:translateZ(0); }

.article_image { flex:1; position:relative; }
.article_image .main { width:100%; }
.article_image .main img { width:100%; }
.article_image .sub { position:absolute; width:74.23%; left:86.63%; top:-36.76%; }
.article_image .sub img { width:100%; }

.article_wrapper { flex: 0 0 42%; position:relative; }
.article_contents { padding:60% 14% 0 18%; display:flex; flex-direction:column; }

.article_product { width:65.28%; margin:0 auto 36px; }
.article_product img { width:100%; }
.article_wordings h4 { font-size:24px; color:#262626; font-weight:bold; padding-bottom:18px; margin-bottom:18px; }
.article_wordings .deco_divider::after { left:0; margin-left:0; }
.nav_main_section .nm_main .article_wordings p { font-size:16px; }
/* .article_wordings a { font-weight:bold; } */
.article_wordings .common_btn { width:100%; }

.article_crate { display:flex; justify-content:center; align-items:center; }
.article_crate.vertical { flex-direction:column; }

.article_box.state_1b { align-items:center; margin-bottom:10%; margin-top:15%; }
.state_1b .article_contents { padding:5% 18% 5% 14%; }
.state_1b .article_product { order:0; width:90%; }
.state_1b .article_product img { aspect-ratio:337/281; }
.state_1b .article_wordings { order:1; margin-bottom:0; }
.state_1b .article_image .main img { aspect-ratio:718/699; }

.article_box.state_2 { align-items:center; margin-bottom:10%; }
.state_2 .article_contents { padding:0 18% 0 14%; }
.state_2 .article_product { order:1; margin-bottom:0; }
.state_2 .article_wordings { order:0; margin-bottom:36px; }

.article_box.state_3 { align-items:flex-end; margin-bottom:30%; }
.state_3 .article_image .sub { top:89.55%; }
.state_3 .article_contents { padding-top:0; padding-bottom:35%; }

.article_box.state_4 { align-items:center; margin-bottom:10%; }
.state_4 .article_contents { padding-top:0; padding-bottom:0; }

.article_box.flip .article_product { order:0; margin-bottom:36px; width:90%; }
.article_box.flip .article_product img { aspect-ratio:337/281; }
.article_box.flip .article_wordings { order:1; margin-bottom:0; }
.article_box.flip .article_image .main img { aspect-ratio:359/252; }

.article_box.state_lineup { align-items:unset; margin-bottom:0; background-color:#e5e5e5; width:calc(100% + 28px + 28px); margin-left:-28px; }
.state_lineup .article_image .main { padding-bottom:unset; background-size:85%; /*background-position:center 10%;*/ background-position:center center; background-repeat:no-repeat; width:100%; height:100%; min-height:350px; }
.state_lineup .article_wrapper { display:flex; align-items:center; }
.state_lineup .article_contents { padding-top:36px; padding-bottom:36px; padding:36px 18%; }
.state_lineup .lineup_list { margin-bottom:18px; }

.article_box.state_lineup.comparison { flex-direction:column; }
.state_lineup.comparison .article_wrapper { flex-direction:column; }
.state_lineup.comparison .article_image .main { min-height:unset; }
.state_lineup.comparison .article_image .main img { aspect-ratio:642/193; }

.state_lineup .article_comparison { padding:0 4%; width:100%; }
.state_lineup .comparison_table_wrapper { background-color:white; width:100%; padding:28px 28px; }
.state_lineup .comparison_table { width:100%; }
.state_lineup .comparison_table strong { color:#262626; }
.state_lineup .comparison_table th, .state_lineup .comparison_table td { text-align:center; padding:18px 8px; }
.state_lineup .comparison_table thead { font-size:22px; font-weight:bold; color:#262626; }
.state_lineup .comparison_table tbody th { text-align:left; }
.state_lineup .comparison_table tbody td { font-size:22px; width:max-content; }
.state_lineup .comparison_table tbody td strong { font-size:32px; }
.state_lineup .comparison_table .rowheader, .state_lineup .comparison_table .mobileheader { font-size:22px; font-weight:bold; color:#262626; }
.state_lineup .comparison_table .rowheader > * { padding-top:3%; }
.state_lineup .comparison_table .mobileheader { display:none; }
.state_lineup .comparison_table .mobileheader > * { padding-top:5%; padding-bottom:0; }
.state_lineup .comparison_table .divider { border-bottom:1px solid lightgray; }
.state_lineup .comparison_table .common_btn { float:none; display:inline-block; vertical-align:middle; padding-left:20px; padding-right:20px; }
.state_lineup .comparison_table .common_btn br { display:none; }




@media screen and (max-width: 1215px) {
    .state_lineup .article_image .main { background-position:center; }
}
@media screen and (max-width: 959px) {
    .article_hdr { margin-left:48px; }

    .article_contents { padding:60% 10% 0 12%; display:flex; flex-direction:column; }

    .state_2 .article_contents { padding:0 12% 0 10%; }

    .state_lineup .comparison_table thead { font-size:18px; }
    .state_lineup .comparison_table tbody td strong { font-size:28px; }
    .state_lineup .comparison_table .rowheader { font-size:18px; }
}
@media screen and (max-width: 767px) {
    .article_block { padding-bottom:0; }

    .article_title { font-size:28px; letter-spacing:0; padding-bottom:18px; margin-top:28px; margin-bottom:18px; }
    .article_timestamp { font-size:13px; }
    .nav_main_section .nm_main .article_desc { padding:0; margin-bottom:28px; }

    .article_hero { margin-bottom:56px; }

    .article_hdr { font-size:18px; margin-left:0; margin-bottom:50%; text-align:center; max-width:unset; }
    .nav_main_section .nm_main .article_hdr strong { font-size:36px; }

    .article_box { flex-direction:column; margin-bottom:20%; }
    .article_image { width:78%; }
    .article_image .sub { width:82%; left:47.64%; top:-54.06%; }

    .article_contents { padding:5% 0 0 0; }
    .article_product { width:100%; max-width:250px; margin-bottom:18px; }
    .article_wordings .common_btn { width:auto; padding:12px 18px; }
    .article_wordings h4 { padding-bottom:18px; margin-bottom:18px; }

    .state_1b .article_image { order:0; width:100%; }
    .state_1b .article_contents { padding:5% 0 0; }

    .article_box.state_2 { align-items:center; margin-bottom:20%; }
    .state_2 .article_image { order:0; width:100%; }
    .state_2 .article_wrapper { order:1; }
    .state_2 .article_contents { padding:5% 0 0; }
    .state_2 .article_product { order:0; margin-bottom:18px; }
    .state_2 .article_wordings { order:1; margin-bottom:0; }

    .article_box.state_3 { align-items:flex-start; margin-bottom:20%; }
    .state_3 .article_image { margin-bottom:30%; }
    .state_3 .article_image .sub { top:76.04%; }
    .state_3 .article_contents { padding-bottom:0; }

    .article_box.state_4 { margin-bottom:20%; }
    .state_4 .article_image { width:100%; }
    .state_4 .article_contents { padding:5% 0 0; }

    .article_box.state_lineup { background-color:transparent; width:calc(100% + 28px + 28px); margin-left:-28px; width:100%; margin-left:0; margin-bottom:0 !important; }
    .state_lineup .article_image { background-color:#e5e5e5; width:calc(100% + 28px + 28px); margin-left:-28px; }
    .state_lineup .article_image .main { min-height:unset; padding-bottom:80%; background-size:90%; /*background-position:left 10% center;*/ background-position:center center; }
    .state_lineup .article_wordings h4 { text-align:center; }
    .state_lineup .article_wordings .deco_divider::after { left:50%; margin-left:-20px; }
    .state_lineup .article_contents { width:100%; }
    .state_lineup .common_btn { width:100%; }

    .state_lineup.comparison .article_contents { padding-left:0; padding-right:0; }
    .state_lineup.comparison .article_image .main { padding-bottom:0; }
    .state_lineup.comparison .article_image .main img { min-height:250px; object-fit:cover; }
    .state_lineup .article_comparison { width:calc(100% + 28px + 28px); }
    .state_lineup .comparison_table_wrapper { padding:8px 18px; border:1px solid lightgray; }
    .state_lineup .comparison_table th, .state_lineup .comparison_table td { padding-bottom:8px; }
    .state_lineup .comparison_table thead { font-size:18px; }
    .state_lineup .comparison_table thead th { display:none; }
    .state_lineup .comparison_table tbody td { font-size:14px; line-height:1.3em; }
    .state_lineup .comparison_table tbody td strong { font-size:22px; }
    .state_lineup .comparison_table tfoot th { display:none; }
    
    .state_lineup .comparison_table .rowheader { display:none; }
    .state_lineup .comparison_table .mobileheader { display:table-row; font-size:14px; }
    .state_lineup .comparison_table .contents th { display:none; }
    .state_lineup .comparison_table .contents.divider td, .state_lineup .comparison_table .contents.divider th { padding-bottom:18px; }

    .state_lineup .comparison_table .common_btn { padding-left:4px; padding-right:4px; line-height:1.3em; }
    
}
@media screen and (max-width: 479px) {
    .article_box { margin-bottom:40% !important; }
    .article_product { max-width:200px; }

    .state_lineup .comparison_table_wrapper { padding:8px; }
    .state_lineup .comparison_table thead { font-size:14px; }

    .state_lineup .comparison_table .common_btn br { display:block; line-height:0; }
}