@charset "utf-8";

/* =================================================
	content common
================================================= */
.article_content {
    font-family: "Noto Sans JP", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "游ゴシック体", YuGothic, "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
    line-height: 1.8;
    letter-spacing: 0.08em;
    font-weight: 400;
    margin: 0 auto;
    width: 1338px;
    max-width: 92%;
}
.article_content img {
    max-width: 100%;
    vertical-align: bottom;
}
.article_content .d_sp {
    display: none !important;
}
.article_content .cont_wrap {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}
/* img */
.article_content .corner_a {
    border-radius: 22px;
    overflow: hidden;
}
/* btn */
.article_content .btn_a a {
    display: block;
    margin-left: auto;
    margin-right: auto;
    padding: 15px;
    width: 260px;
    max-width: 100%;
    text-align: center;
    color: #fff;
    line-height: 1.3;
    font-size: 16px;
    background: #000;
    border-radius: 30px;
}
.article_content .btn_a a span {
    padding-right: 20px;
    background: url("../images/common/ic_link01.webp")  no-repeat 100% 50% / 15px;
}
.article_content .btn_b a {
    display: block;
    margin-left: auto;
    margin-right: auto;
    padding: 15px;
    width: 260px;
    max-width: 100%;
    text-align: center;
    line-height: 1.3;
    font-size: 16px;
    background: #fff;
    border-radius: 30px;
}
.article_content .btn_b a span {
    padding-right: 20px;
    background: url("../images/common/ic_window01.webp")  no-repeat 100% 60% / 13px;
}
.article_content .btn_c a {
    display: block;
    margin-left: auto;
    margin-right: auto;
    padding: 15px;
    width: 260px;
    max-width: 100%;
    text-align: center;
    line-height: 1.3;
    font-size: 16px;
    border-radius: 30px;
    border: 1px solid #000;
}
.article_content .btn_c a span {
    padding-right: 20px;
    background: url("../images/common/ic_link02.webp")  no-repeat 100% 50% / 15px;
}
/* list */
.article_content .list_dot li {
    list-style: disc;
    margin-left: 1.5em;
    letter-spacing: 0;
    line-height: 1.5;
}
/* font color */
.article_content .black {  color: #000!important;}
.article_content .sky {  color: #00bcff!important;}
.article_content .white {  color: #fff!important;}

/* font weight */
.article_content .mid_bold {  font-weight: 500;}
.article_content .bold {  font-weight: bold;}

/* font size */
.article_content .fsize10 {    font-size: 10px;}
.article_content .fsize14 {    font-size: 14px;}
.article_content .fsize15 {    font-size: 15px;}
.article_content .fsize16 {    font-size: 16px;}
.article_content .fsize17 {    font-size: 17px;}
.article_content .fsize18 {    font-size: 18px;}
.article_content .fsize19 {    font-size: 19px;}
.article_content .fsize20 {    font-size: 20px;}
.article_content .fsize23 {    font-size: 23px;}
.article_content .fsize24 {    font-size: 24px;}
.article_content .fsize25 {    font-size: 25px;}
.article_content .fsize31 {    font-size: 31px;}

/* line height */
.article_content .lh10 {  line-height: 1;}
.article_content .lh12 {  line-height: 1.2;}
.article_content .lh13 {  line-height: 1.3;}
.article_content .lh14 {  line-height: 1.4;}
.article_content .lh15 {  line-height: 1.5;}
.article_content .lh16 {  line-height: 1.6;}
.article_content .lh18 {  line-height: 1.8;}
.article_content .lh20 {  line-height: 2;}

/* align */
.article_content .align_l {  text-align: left !important;}
.article_content .align_c {  text-align: center !important;}
.article_content .align_r {  text-align: right !important;}

/* padding,margin */
.article_content .pt10 {  padding-top: 10px!important;}
.article_content .pr10 {  padding-right: 10px!important;}
.article_content .pl10 {  padding-left: 10px!important;}
.article_content .pb10 {  padding-bottom: 10px!important;}
.article_content .mb0 {  margin-bottom: 0!important;}
.article_content .mb5 {  margin-bottom: 5px!important;}
.article_content .mb10 {  margin-bottom: 10px!important;}
.article_content .mb15 {  margin-bottom: 15px!important;}
.article_content .mb20 {  margin-bottom: 20px!important;}
.article_content .mb30 {  margin-bottom: 30px!important;}
.article_content .mb40 {  margin-bottom: 40px!important;}
.article_content .mb50 {  margin-bottom: 50px!important;}
.article_content .mb60 {  margin-bottom: 60px!important;}
.article_content .mb70 {  margin-bottom: 70px!important;}
.article_content .mb80 {  margin-bottom: 80px!important;}
.article_content .mb90 {  margin-bottom: 90px!important;}
.article_content .mb100 {  margin-bottom: 100px!important;}
.article_content .mb1em {  margin-bottom: 1em!important;}
.article_content .mt5 {  margin-top: 5px!important;}
.article_content .mt10 {  margin-top: 10px!important;}
.article_content .mt15 {  margin-top: 15px!important;}
.article_content .mt20 {  margin-top: 20px!important;}
.article_content .mt30 {  margin-top: 30px!important;}
.article_content .mr5 {  margin-right: 5px!important;}
.article_content .mr10 {  margin-right: 10px!important;}
.article_content .mr15 {  margin-right: 15px!important;}
.article_content .mr20 {  margin-right: 20px!important;}
.article_content .mr30 {  margin-right: 30px!important;}
.article_content .ml5 {  margin-left: 5px!important;}
.article_content .ml10 {  margin-left: 10px!important;}
.article_content .ml15 {  margin-left: 15px!important;}
.article_content .ml20 {  margin-left: 20px!important;}
.article_content .ml30 {  margin-left: 30px!important;}

/* =================================================
	main
================================================= */
/* article_mv
===================================== */
.article_content .article_mv {
    margin-bottom: 50px;
    position: relative;
    aspect-ratio: 1338 / 482;
    width: 100%;
}
.article_content .article_mv .article_mv_txt {
    position: absolute;
    top: 61.203%;
    left: 6.5%;
    width: 42.003%;
    line-height: 1.4;
}
.article_content .article_mv .article_mv_txt .article_mv_category,
.article_content .article_mv .article_mv_txt .article_mv_ttl_l {
    font-weight: bold;
}
.article_content .article_mv .article_mv_txt .article_mv_category {
    font-size: 22px;
}
.article_content .article_mv .article_mv_txt .article_mv_ttl_l {
    font-size: 39px;
}
.article_content .article_mv .article_mv_txt .article_mv_ttl_s {
    font-size: 21px;
}
.article_content .article_mv h1 {
    width: 68.708%;
    aspect-ratio: 920 / 482;
    background: url("../images/article/mv.webp") no-repeat 0 0 / cover;
    overflow: hidden;
    text-indent: -99999px;
}
.article_content .article_mv .article_mv_nav {
    width: 29.873%;
}
.article_content .article_mv .article_mv_nav .article_mv_nav_cont {
    display: block;
    height: calc(50% - 10px);
    padding: 30px 80px 30px 30px;
    position: relative;
}
.article_content .article_mv .article_mv_nav .article_mv_nav_cont::after {
    display: block;
    content: '';
    position: absolute;
    top: 23px;
    right: 23px;
    width: 45px;
    height: 45px;
    background: url("../images/common/ic_link03.webp") no-repeat 0 0 / contain;
}
.article_content .article_mv .article_mv_nav .article_mv_nav_cont01 {
    background: #fddc01;
    margin-bottom: 20px;
}
.article_content .article_mv .article_mv_nav .article_mv_nav_cont02 {
    background: #cccccc;
}
/* article_what
===================================== */
.article_content #article_what .article_cont_m {
    margin-bottom: 60px;
    flex-direction: row-reverse;
}
.article_content #article_what .article_cont_m .article_cont_txt {
    background: #fff09b;
}
/* article_point
===================================== */
.article_content #article_point .article_cont_sub_txt {
    padding: 40px 50px 30px;
    width: 29.873%;
    background: #cccccc;
}
.article_content #article_point .article_cont {
    margin-bottom: 64px;
}
.article_content #article_point .article_cont .article_cont_txt {
    display: flex;
    justify-content: flex-start;
    align-items: center;
}
.article_content #article_point .article_cont .article_cont_txt .article_cont_txt_inner {
    width: 380px;
    max-width: 100%;
}
.article_content #article_point .article_cont .article_cont_txt .article_cont_txt_num img {
    width: auto;
    height: 30px;
    margin-bottom: 30px;
}
.article_content #article_point #article_cont01 .article_cont_txt {
    background: url("../images/article/point_cont01_img01.webp") no-repeat 50% 0 / cover;
}
.article_content #article_point #article_cont02 {
    flex-direction: row-reverse;
}
.article_content #article_point #article_cont02 .article_cont_txt {
    background: url("../images/article/point_cont02_img01.webp") no-repeat 50% 0 / cover;
}
.article_content #article_point #article_cont03 .article_cont_txt {
    background: url("../images/article/point_cont03_img01.webp") no-repeat 50% 0 / cover;
}
/* article_cont
===================================== */
.article_content .article_cont {
    display: flex;
    justify-content: space-between;
    align-items: stretch;
}
.article_content .article_cont .article_cont_main {
    width: 68.61%;
}
/* article_navi
===================================== */
.article_content .article_navi {
    margin-bottom: 50px;
}
.article_content .article_navi_list .article_navi_list_cont {
    display: block;
    background: #ffdd00;
    border-radius: 40px;
    padding: 14px 90px 14px 70px;
    position: relative;
    width: 830px;
    max-width: 92%;
    margin: 0 auto 20px;
}
.article_content .article_navi_list .article_navi_list_cont::before {
    display: block;
    content: '';
    position: absolute;
    top: calc(50% - 12px);
    right: 48px;
    width: 24px;
    height: 24px;
    background: url("../images/common/ic_link04.webp") no-repeat 0 0 / contain;
}
.article_content .article_navi_list .article_navi_list_cont::after {
    display: block;
    content: '';
    position: absolute;
    top: calc(50% - 23px);
    left: 6px;
    width: 46px;
    height: 46px;
}
.article_content .article_navi_list .article_navi_list_cont01::after {
    background: url("../images/common/point_nav_num01.webp") no-repeat 0 0 / contain;
}
.article_content .article_navi_list .article_navi_list_cont02::after {
    background: url("../images/common/point_nav_num02.webp") no-repeat 0 0 / contain;
}
.article_content .article_navi_list .article_navi_list_cont03::after {
    background: url("../images/common/point_nav_num03.webp") no-repeat 0 0 / contain;
}
/* article_cont
===================================== */
.article_content .article_cont .article_cont_sub {
    width: 29.895%;
}
.article_content .article_cont_img img {
    width:100%;
    height:100%;
    object-fit: cover;
}
/* article_cont_sub
===================================== */
.article_content .article_cont_sub .article_cont_sub_txt {
    padding: 30px 45px;
    background: #ccc;
}
.article_content .article_cont_sub_txt_article {
    position: relative;
    padding-left: 48px;
    margin-bottom: 20px;
}
.article_content .article_cont_sub_txt_article::before {
    display: block;
    content: '';
    width: 35px;
    height: 29px;
    background: url("../images/common/ic_article.webp") no-repeat 0 0 / contain;
    position: absolute;
    top: calc(50% - 15px);
    left: 0;
}
.article_content .article_cont_sub_txt_article span {
    font-size: 12px;
    color: #fff;
    background: #000;
    line-height: 1;
    padding: 4px 14px 6px;
    border-radius: 20px;
}
.article_content .article_cont_txt {
    padding: 60px 45px;
}
.article_content .article_cont_m {
    display: flex;
    justify-content: space-between;
    align-items: stretch;
}
.article_content .article_cont_m .article_cont_img {
    width: 29.895%;
}
.article_content .article_cont_m .article_cont_txt {
    width: 68.61%;
}
/* recommend_goods
===================================== */
.article_content #recommend_goods {
    padding: 65px 3.737% 90px;
    position: relative;
    background: url("../images/common/recommend_ttl.webp") no-repeat 100% 0 / 57.474% #ffdd00;
}
.article_content #recommend_goods .recommend_ttl {
    margin-bottom: 120px;
}
.article_content #recommend_goods .recommend_cont {
    position: relative;
}
.article_content #recommend_goods .recommend_cont_num {
    position: absolute;
}
.article_content #recommend_goods .recommend_cont_wrap {
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    flex-direction: row-reverse;
    margin-bottom: 0;
}
.article_content #recommend_goods .recommend_cont_wrap .recommend_cont_img,
.article_content #recommend_goods .recommend_cont_wrap .recommend_cont_txt {
    width: 49.273%;
}
.article_content #recommend_goods .recommend_cont_txt .recommend_cont_txt_cont {
    padding: 31px 6%;
}
.article_content #recommend_goods .recommend_cont_txt .recommend_cont_txt_item {
    background: #fff;
}
.article_content #recommend_goods .recommend_cont_txt .recommend_cont_txt_item_price {
    line-height: 1.4;
}
.article_content #recommend_goods .recommend_cont_txt .recommend_cont_txt_feature,
.article_content #recommend_goods .recommend_cont_txt .recommend_cont_txt_list {
    margin-top: 18px;
    background: #ffef80;
}
.article_content #recommend_goods .recommend_cont_txt .recommend_cont_txt_item_ttl {
    padding-bottom: 12px;
    margin-bottom: 8px;
    border-bottom: 1px solid #ccc;
    letter-spacing: 0.02em;
}
.article_content #recommend_goods .recommend_cont_txt_intro .list_dot li {
    margin-bottom: 6px;
}
.article_content #recommend_goods .recommend_cont_img .slick-dotted.slick-slider {
    margin-bottom: 0;
}
.article_content #recommend_goods .recommend_cont_img .slick-dots {
    bottom: 30px;
}
.article_content #recommend_goods .recommend_cont_img .slick-dots li,
.article_content #recommend_goods .recommend_cont_img .slick-dots li button,
.article_content #recommend_goods .recommend_cont_img .slick-dots li button:before {
    width: 10px;
    height: 10px;
    padding: 0;
    line-height: 10px;
    border-radius: 5px;
    color: #ccc;
    background: #ccc;
}
.article_content #recommend_goods .recommend_cont_img .slick-dots li.slick-active,
.article_content #recommend_goods .recommend_cont_img .slick-dots li.slick-active button,
.article_content #recommend_goods .recommend_cont_img .slick-dots li.slick-active button:before {
    color: #999;
    background: #999;
}
.article_content #recommend_goods .recommend_cont:not(:last-child) {
    margin-bottom: 130px;
}
.article_content #recommend_goods .recommend_cont_btn {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 0 20px;
    margin-top: 40px;
}
@media (max-width: 1300px) {
    .article_content .article_cont_btn_note {
        font-size: 13px!important;
    }
}
@media (max-width: 1200px) {
    .article_content .article_mv .article_mv_txt .article_mv_category {
        font-size: 1.6vw;
    }
    .article_content .article_mv .article_mv_txt .article_mv_ttl_l {
        font-size: 3vw;
    }
    .article_content .article_mv .article_mv_txt .article_mv_ttl_s {
        font-size: 1.5vw;
    }
    .article_content .article_cont .article_cont_main {
        width: 63.61%;
    }
    .article_content .article_cont .article_cont_sub {
        width: 34.895%;
    }
    .article_content .article_mv {
        display: block;
    }
    .article_content .article_mv h1 {
        width: 100%;
        margin-bottom: 20px;
    }
    .article_content #article_point .article_cont_sub_txt {
        padding: 40px 30px 30px;
    }
    .article_content .article_mv .article_mv_nav {
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: stretch;
    }
    .article_content .article_mv .article_mv_nav .article_mv_nav_cont {
        width: 49%;
        height: auto;
    }
    .article_content .article_mv .article_mv_nav .article_mv_nav_cont01 {
        margin-bottom: 0;
    }
}
@media (max-width: 1024px) {
    .article_content #recommend_goods .recommend_ttl {
        margin-bottom: 60px;
    }
    .article_content #recommend_goods .recommend_cont_txt {
        width: 46%;
    }
    .article_content #recommend_goods .recommend_cont_img {
        width: 52%;
    }
    .article_content #recommend_goods .recommend_cont_txt_item {
        margin-bottom: 20px;
    }
    .article_content #recommend_goods .recommend_cont_btn .btn_a {
        margin-bottom: 10px;
    }
}