@charset "utf-8";
/* =================================================
	content common
================================================= */
.article_content {
    width: 100%;
    overflow: hidden;
    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;
}
.article_content img {
    max-width: 100%;
    vertical-align: bottom;
}
.article_content .d_pc {
  display: none !important;
}
.article_content .sp_inner {
    padding-left: 6.667vw;
    padding-right: 6.667vw;
}
/* btn */
.article_content .btn_a a {
    display: block;
    margin-left: auto;
    margin-right: auto;
    padding: 15px;
    width: 69.333vw;
    max-width: 100%;
    text-align: center;
    color: #fff;
    line-height: 1.3;
    font-size: 4.267vw;
    border-radius: 30px;
    position: relative;
    background: url("../images/common/ic_link01.webp")  no-repeat 92% 50% / 15px #000;
}
.article_content .btn_b a {
    display: block;
    margin-left: auto;
    margin-right: auto;
    padding: 15px;
    width: 69.333vw;
    max-width: 100%;
    text-align: center;
    line-height: 1.3;
    font-size: 4.267vw;
    background: #fff;
    border-radius: 30px;
    border: 1px solid #000;
}
.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: 86.4vw;
    max-width: 100%;
    text-align: center;
    line-height: 1.3;
    font-size: 4.267vw;
    border-radius: 30px;
    border: 1px solid #000;
    position: relative;
}
.article_content .btn_c a span {
    padding-right: 20px;
    background: url("../images/common/ic_link02.webp")  no-repeat 100% 50% / 15px;
}
.article_content .btn_d a {
    display: block;
    margin-left: auto;
    margin-right: auto;
    padding: 12px;
    width: 69.333vw;
    max-width: 100%;
    text-align: center;
    line-height: 1.3;
    font-size: 4.267vw;
    border-radius: 30px;
    position: relative;
    background: url("../images/common/ic_link04.webp")  no-repeat right 7.467vw top 50% / 4.8vw #f2f2f2;
}
.article_content .btn_e a {
    display: block;
    margin-left: auto;
    margin-right: auto;
    padding: 13px;
    width: 69.333vw;
    max-width: 100%;
    text-align: center;
    line-height: 1.3;
    font-size: 4.267vw;
    color: #fff;
    border-radius: 30px;
    position: relative;
    background: url("../images/common/ic_link01.webp")  no-repeat right 4.8vw top 50% / 3.733vw #000000;
}
.article_content .btn_f a {
    display: block;
    margin-left: auto;
    margin-right: auto;
    padding: 13px;
    width: 69.333vw;
    max-width: 100%;
    text-align: center;
    line-height: 1.3;
    font-size: 4.267vw;
    background: #fff;
    border-radius: 30px;
    border: 1px solid #000;
}
.article_content .btn_f a span {
    padding-right: 20px;
    background: url("../images/common/ic_window01.webp")  no-repeat 100% 60% / 13px;
}
/* list */
.article_content .list_dot li {
    list-style: disc;
    margin-left: 1.5em;
    line-height: 1.4;
}
/* 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 .fsize3vw {    font-size: 3vw;}
.article_content .fsize35vw {    font-size: 3.5vw;}
.article_content .fsize4vw {    font-size: 4.2vw;}
.article_content .fsize45vw {    font-size: 4.5vw;}
.article_content .fsize5vw {    font-size: 5vw;}
.article_content .fsize55vw {    font-size: 5.5vw;}
.article_content .fsize6vw {    font-size: 6vw;}

/* 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_mv h1 {
    display: block;
    padding-top: 100vw;
    width: 100%;
    height: 0;
    background: url("../images/article/mv_sp.webp") no-repeat 0 0 / cover;
    overflow: hidden;
}
/* article_navi
===================================== */
.article_navi {
    padding: 6.667vw;
}
.article_navi .article_navi_list_cont {
    position: relative;
    padding: 3.2vw 4.8vw;
    border-radius: 1.867vw;
    display: block;
    margin-bottom: 2.667vw;
}
.article_navi .article_navi_list_cont::after {
    content: '';
    display: inline-block;
    vertical-align: middle;
    color: #fff;
    line-height: 1;
    width: 2vw;
    height: 2vw;
    border: 0.6vw solid currentColor;
    border-left: 0;
    border-bottom: 0;
    transform: translateY(-25%) rotate(135deg);
    position: absolute;
    top: calc(50% - 1vw);
    right: 4.8vw;
}
.article_navi .article_navi_list .article_navi_list_cont.article_navi_list_cont_yellow {
    background: rgba(255,211,0,1);
}
.article_navi .article_navi_list .article_navi_list_cont.article_navi_list_cont_yellow::after {
    color: #000;
}
.article_navi .article_navi_list .article_navi_list_cont.article_navi_list_cont_purple {
    background: rgba(61,168,111,1);
    color: #fff;
}
.article_navi .article_navi_list .article_navi_list_cont.article_navi_list_cont_pink {
    background: rgba(232,124,30,1);
    color: #fff;
}
.article_navi .article_navi_list_cont .article_navi_ttl {
    font-weight: bold;
    font-size: 4.267vw;
    margin-bottom: 0!important;
}
/* article_cont
===================================== */
.article_cont .article_cont_img {
    padding: 6.667vw;
}
#article_cont01 .article_cont_img {
    background: #ffdd00;
}
#article_cont02 .article_cont_img {
    background: #3da86f;
}
#article_cont03 .article_cont_img {
    background: #e87c1e;
}
.article_cont .article_cont_ttl {
    text-align: center;
}
.article_cont .article_cont_txt {
    padding-top: 6.667vw;
    padding-bottom: 8vw;
}
#article_cont01 .article_cont_txt {
    background: rgba(255,221,0,0.3);
}
#article_cont02 .article_cont_txt {
    background: #d8eee2;
}
#article_cont03 .article_cont_txt {
    background: #fae5d2;
}
.article_illust {
    margin: 9.333vw auto 16vw;
    width: 92.8vw;
}
/* article_cont_sub
===================================== */
.article_cont_sub .article_cont_sub_txt {
    padding-top: 9.333vw;
    padding-bottom: 8vw;
    background: #ccc;
}
.article_cont_sub_txt_article {
    position: relative;
    padding-left: 15.2vw;
    margin-bottom: 20px;
}
.article_cont_sub_txt_article::before {
    display: block;
    content: '';
    width: 11.467vw;
    height: 9.333vw;
    background: url("../images/common/ic_article.webp") no-repeat 0 0 / contain;
    position: absolute;
    top: calc(50% - 6vw);
    left: 0;
}
.article_cont_sub_txt_article span {
    font-size: 3.8vw;
    color: #fff;
    background: #000;
    line-height: 1;
    padding: 1vw 3vw;
    border-radius: 20px;
}
/* recommend_goods
===================================== */
.article_content #recommend_goods {
    position: relative;
    padding: 24vw 6.667vw 6.667vw;
    background: #ffdd00;
}
.article_content #recommend_goods::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 82.667vw;
    height: 16.8vw;
    background: url("../images/common/recommend_ttl.webp") no-repeat 0 0 / contain;
}
.article_content #recommend_goods .recommend_ttl {
    margin-bottom: 6vw;
    text-align: center;
}
.article_content #recommend_goods .recommend_cont {
    background: #fff;
    border-radius: 4.255vw;
    padding: 5.3vw;
    margin-bottom: 5vw;
}
.article_content #recommend_goods .recommend_cont .recommend_cont_img {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 5vw;
}
.article_content #recommend_goods .recommend_cont .recommend_cont_img .recommend_cont_img_s {
    width: 33.217%;
}
.article_content #recommend_goods .recommend_cont .recommend_cont_img .recommend_cont_txt_item_ttl {
    width: 62.937%;
    letter-spacing: 0;
}
.article_content #recommend_goods .recommend_cont .recommend_cont_btn {
    border: 1px solid #cccccc;
    padding: 2.2vw 3vw;
    margin-bottom: 3vw;
}
.article_content #recommend_goods .recommend_cont .recommend_cont_txt_item .recommend_cont_txt_item_catch {
    letter-spacing: 0.02em;
    font-weight: 500;
}
.article_content #recommend_goods .recommend_cont .recommend_cont_txt_item .recommend_cont_txt_item_ttl {
    padding-bottom: 3vw;
    border-bottom: 1px solid #cccccc;
    margin-bottom: 1vw;
    letter-spacing: 0.02em;
}
.article_content #recommend_goods .recommend_cont_txt_list {
    margin-top: 4vw;
    padding: 3vw 2vw;
    border-radius: 3vw;
    background: #ffef80;
}
.article_content #recommend_goods .recommend_cont_txt_list .list_dot li {
    font-weight: 400;
    margin-bottom: 10px;
}
.article_content #recommend_goods .recommend_cont .recommend_cont_txt{
    display:none;
}

.article_content #recommend_goods .recommend_cont .recommend_cont_btn{
    position:relative;
    cursor:pointer;
    display:flex;
    justify-content:space-between;
    align-items:center;
}
.article_content #recommend_goods .recommend_cont .recommend_cont_btn::after{
    content:"";
    position:absolute;
    top:50%;
    right:3vw;
    width:6vw;
    height:6vw;
    margin-top:-3vw;
    border-radius:50%;
    background:#000;
}
.article_content #recommend_goods .recommend_cont .recommend_cont_btn::before{
    content:"";
    position:absolute;
    top:50%;
    right:6vw;
    width:3.4vw;
    height:3.4vw;
    margin-top:-1.7vw;
    margin-right:-1.7vw;
    z-index:1;
    background:
        linear-gradient(#fff,#fff) center/100% 1px no-repeat,
        linear-gradient(#fff,#fff) center/1px 100% no-repeat;
    transition:.2s;
}
.article_content #recommend_goods .recommend_cont .recommend_cont_btn.is_open::before{
    background:
        linear-gradient(#fff,#fff) center/100% 1px no-repeat;
}