@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.04em;
    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 h1 {
    display: block;
    margin-bottom: 50px;
    position: relative;
    aspect-ratio: 1338 / 482;
    width: 100%;
    background: url("../images/article/mv.webp") no-repeat 0 0 / cover;
    overflow: hidden;
    text-indent: -9999px;
}
/* article_navi
===================================== */
.article_content .article_navi {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    margin-bottom: 44px;
    padding: 0 3.737% 44px;
    position: relative;
    aspect-ratio: 1338 / 698;
    width: 100%;
    background: url("../images/article/article_navi_img01.webp") no-repeat 0 0 / cover;
}
.article_content .article_navi .article_navi_list {
    display: flex;
    justify-content: space-between;
    align-items: stretch;
}
.article_content .article_navi .article_navi_list .article_navi_list_cont {
    display: block;
    width: 32.31%;
    padding: 38px 30px 30px;
}
.article_content .article_navi .article_navi_list .article_navi_list_cont.article_navi_list_cont_yellow {
    background: rgba(255,211,0,0.9);
}
.article_content .article_navi .article_navi_list .article_navi_list_cont.article_navi_list_cont_purple {
    background: rgba(121,97,170,0.9);
    color: #fff;
}
.article_content .article_navi .article_navi_list .article_navi_list_cont.article_navi_list_cont_pink {
    background: rgba(242,113,134,0.9);
    color: #fff;
}
/* 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_content .article_cont .article_cont_sub {
    width: 29.895%;
}
.article_content .article_cont_img img {
    width:100%;
    height:100%;
    object-fit: cover;
}
.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: 1.2rem;
    color: #fff;
    background: #000;
    line-height: 1;
    padding: 4px 14px 6px;
    border-radius: 20px;
}
.article_content .article_cont_txt {
    padding: 30px 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%;
    color: #fff;
}
.article_content #article_cont01 {
    margin-bottom: 40px;
}
.article_content #article_cont01 .article_cont_img,
.article_content #article_cont01 .article_cont_sub_txt {
    margin-bottom: 20px;
}
.article_content #article_cont01 .article_cont_txt {
    background: #ffdd00;
}
.article_content #article_cont02 {
    margin-bottom: 40px;
}
.article_content #article_cont02 .article_cont_txt {
    background: #8570b1;
}
.article_content #article_cont03 {
    margin-bottom: 60px;
    flex-direction: row-reverse;
}
.article_content #article_cont03 .article_cont_txt {
    background: #f27186;
}
.article_content .article_illust {
    margin: 0 auto 50px;
    width: 62.182%;
}
/* 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_cont01 .recommend_cont_num {
    width: 122px;
    left: 9px;
    top: -74px;
}
.article_content #recommend_goods .recommend_cont02 .recommend_cont_num {
    width: 141px;
    right: 11px;
    top: -74px;
}
.article_content #recommend_goods .recommend_cont_wrap {
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    margin-bottom: 0;
}
.article_content #recommend_goods .recommend_cont01 .recommend_cont_wrap {
    flex-direction: row-reverse;
}
.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;
}
.article_content #recommend_goods .recommend_cont_txt .recommend_cont_txt_feature_ttl {
    letter-spacing: 0;
}
.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_navi {
        aspect-ratio: 1338 / 900;
    }
    .article_content .article_cont .article_cont_main {
        width: 63.61%;
    }
    .article_content .article_cont .article_cont_sub {
        width: 34.895%;
    }
}
@media (max-width: 1024px) {
    .article_content .article_navi {
        aspect-ratio: 1338 / 1000;
    }
    .article_content .article_navi .article_navi_ttl {
        font-size: 22px;
    }
    .article_content .article_navi .article_navi_txt {
        font-size: 18px;
    }
    .article_content #recommend_goods .recommend_ttl {
        margin-bottom: 120px;
    }
}