@charset "utf-8";

/* 【SP】ウィンドウ幅が768px以下の場合に適用するCSS */
@media screen and (max-width: 768px) {



/* ★　★　★　★　★　★　★　★　★　★　★　★　★　★　★　★　★　★　★　★　★　★　★　★　★　★　★　★　★　★　★　★

セールタイトル色変え

★　★　★　★　★　★　★　★　★　★　★　★　★　★　★　★　★　★　★　★　★　★　★　★　★　★　★　★　★　★　★　★ */
.sale_title {
    position: relative;
}
.sale_title:before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    mix-blend-mode: hard-light;
    opacity: 0.9;
}
.sale_title .t {
    position: relative;
}
.sale_title.blue:before {
    background: #2cd8ff;
}
.sale_title.green:before {
    background: #1fd760;
}

/* ==============================
GW
============================== */
.sale_title.gw .t {
    color: #238de3;
}
.sale_title.gw:before {
    background: #fdff6d;
}





/* ★　★　★　★　★　★　★　★　★　★　★　★　★　★　★　★　★　★　★　★　★　★　★　★　★　★　★　★　★　★　★　★

新規追加ページ

★　★　★　★　★　★　★　★　★　★　★　★　★　★　★　★　★　★　★　★　★　★　★　★　★　★　★　★　★　★　★　★ */


/* ==================================================================================

common

================================================================================== */
#blog {
font-size: 15px;
line-height: 1.6;
}
#blog .inner,
#blog .inner_mini {
padding: 0 5%;
}

#blog .sec {
margin: 30px 0;
}

#blog a:hover {
text-decoration: none;
}

#blog .bg {
background: var(--bg-color);
}

#blog img {
width: 100%;
vertical-align: bottom;
object-fit: cover;
}

#blog .img_zoom .img {
overflow: hidden;
}

#blog .pc {
display: none;
}


/* ==================================================================================

【共通】タイトル

================================================================================== */


/* title_01
======================================== */
.title_01 {
text-align: center;
line-height: 1.3;
font-size: 1.2em;
position: relative;
background: no-repeat;
padding: 0;
}
.title_01:before {
content: "";
height: 1px;
width: 100%;
top: 76%;
left: 0;
background: var(--main-color);
position: absolute;
}
.title_01 .box {
background: #fff;
position: relative;
z-index: 1;
padding: 0 5px;
display: inline-block;
}
.title_01 .font_e {
color: var(--main-color);
font-size: 0.4em;
letter-spacing: 1px;
}

.bg .title_01 .box {
background: var(--bg-color);
}



/* ==================================================================================

【共通】ボタン

================================================================================== */
[class*="btn_"] {
position: relative;
height: fit-content;
display: inline-block;
}
[class*="btn_"] .btn:after {
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
transform-origin: left top;
transform: scale(0, 1);
transition: transform 0.3s;
}
[class*="btn_"] .btn:hover:after {
transform-origin: right top;
transform: scale(1, 1);
}

[class*="btn_"] .btn {
padding: 15px 0;
color: #7d7d7d;
/*border-radius: 5px;*/
overflow: hidden;
position: relative;
}
[class*="btn_"] .btn span {
position: relative;
z-index: 1;
}



/* ==================================================================================

hover_line

================================================================================== */
#blog .hover_line {}
#blog .hover_line .hover_line_box:before {
content: "";
width: 100%;
height: 100%;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
border: 1px solid #fff;
z-index: 1;
border-radius: 10px;
transition: all 0.3s;
opacity: 0;
}
#blog .hover_line:hover .hover_line_box:before {
opacity: 0.3;
border: 5px solid #fff;
}
#blog .hover_line .hover_line_box {
position: relative;
display: block;
}



/* ==================================================================================

category_area

================================================================================== */
#blog .category_area {}

/* icon
======================================== */
#blog [class*="icon_"] {
position: relative;
padding: 0 0 0 25px;
}
#blog [class*="icon_"]:before {
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
display: inline-block;
line-height: 0;
}

#blog .category_area .icon_category:before {
content: "";
background: url(/img/bace/icon_category.png) no-repeat scroll left center / cover;
width: 20px;
height: 20px;
}

#blog .category_area ul {
display: flex;
flex-wrap: wrap;
gap: 5px 2%;
margin: 20px 0;
}
#blog .category_area li {
width: 49%;
}
#blog .category_area a {
background: var(--main-color);
color: #fff;
display: block;
text-align: center;
padding: 10px 0;
border-radius: 5px;
position: relative;
transition: 0.5s;
overflow: hidden;
font-size: 0.8em;
}
#blog .category_area a:before {
content: "";
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
background: #74A0D5;
transform-origin: right top;
transform: scale(1, 0);
transition: transform 0.3s;
}
#blog .category_area a:hover:before {
transform-origin: left bottom;
transform: scale(1, 1);
}
#blog .category_area a span {
position: relative;
z-index: 1;
}



/* ==================================================================================

banner_area

================================================================================== */
#blog .banner_area {
padding: 20px 0;
}
#blog .banner_area .slick-slide {
margin: 0 10px;
}
#blog .banner_area .img {
border-radius: 10px;
overflow: hidden;
}
#blog .banner_area .img img {
height: 150px;
}

#blog .banner_area .slick-arrow {
top: 50%;
transform: translateY(-50%);
}
#blog .banner_area .slick-prev {
left: -25px;
}
#blog .banner_area .slick-prev:before {
left: 18px;
}
#blog .banner_area .slick-next {
left: auto;
right: 0px;
}
#blog .banner_area .slick-next:before {
left: 18px;
}



/* ==================================================================================

ranking_area

================================================================================== */
#blog .ranking_area {
margin: 30px 0;
}

#blog .ranking_area ul {
margin: 30px 0;
}
#blog .ranking_area li a {
border-bottom: 1px solid var(--boder-color);
padding: 20px 0;
display: inline-block;
position: relative;
transition: all 800ms cubic-bezier(0.215,0.610,0.355,1.000);
}
#blog .ranking_area li a:hover {
background: var(--hover);
}
#blog .ranking_area li:last-child a {
border-bottom: none;
}

#blog .ranking_area .img {
border-radius: 10px;
overflow: hidden;
text-align: center;
}
#blog .ranking_area .img img {
width: 100%;
height: 100%;
}

#blog .ranking_area li .font_e {
position: absolute;
left: 20px;
top: 30px;
font-weight: bold;
font-size: 2em;
color: var(--main-color-2);
padding: 0 0 3px 0;
}
#blog .ranking_area li .font_e:before {
content: "";
width: 100%;
height: 2px;
background: var(--main-color-2);
position: absolute;
bottom: 0;
left: 0;
}

#blog .ranking_area li:nth-child(1) .font_e {
color: #F5C055;
font-size: 2.5em;
}
#blog .ranking_area li:nth-child(1) .font_e:before {
background: #F5C055;
}

#blog .ranking_area li:nth-child(2) .font_e {
color: #ABABAB;
font-size: 2.5em;
}
#blog .ranking_area li:nth-child(2) .font_e:before {
background: #ABABAB;
}

#blog .ranking_area li:nth-child(3) .font_e {
color: #CBB89F;
color: #CBB89F;
font-size: 2.5em;
}
#blog .ranking_area li:nth-child(3) .font_e:before {
background: #CBB89F;
}

#blog .ranking_area p {
font-size: 0.9em;
margin: 15px 0 5px 0;
transition: all 0.3s linear;
}
#blog .ranking_area p:hover {
color: var(--main-color);
}

#blog .ranking_area .price_box {
font-size: 1.2em;
text-align: right;
display: block;
}
#blog .ranking_area .price_box span {
font-size: 0.7em;
margin: 0 0 0 3px;
}



/* ==================================================================================

sale_list

================================================================================== */
#blog .sale_list {}

#blog .sale_list .sale_title {
background: url(/img/sale_img/sale_title_bg.jpg) no-repeat scroll center center / cover;
letter-spacing: 5px;
    text-align: center;
    font-size: 1.5em;
    line-height: 1.2;
    font-weight: bold;
    padding: 20px 0 15px;
    color: #fff;
    margin: 30px 0;
}
#blog .sale_list .sale_title span {
    font-size: 1.8em;
}

#blog .sale_list ul {
text-align: center;
}

#blog .sale_list li .img {
border-radius: 10px;
border: 1px solid #eee;
}
#blog .sale_list li .img img {}

#blog .sale_list li p {
font-size: 1.1em;
margin: 10px 0 5px;
}

#blog .sale_list li span .large {
margin: 0 5px;
}
#blog .sale_list li .price {
color: #FF4E2A;
font-size: 1.1em;
margin: 0 0 -25px 0;
display: block;
}
#blog .sale_list li .price .large {
font-size: 1.5em;
}

#blog .sale_list li .price_nomal {
font-size: 0.8em;
}
#blog .sale_list li .price_nomal .large {
font-size: 1.3em;
}
#blog .sale_list li .price_nomal .non_line {
position: relative;
}
#blog .sale_list li .price_nomal .non_line:before {
content: "";
position: absolute;
background: #333;
width: 100%;
height: 1px;
left: 0;
top: 50%;
transform: translateY(-50%);
}

#blog .sale_list li {
    padding: 0 0 40px 0;
    position: relative;
}

#blog .sale_list li .btn_area {
display: block;
margin: 15px 0 0 0;
}
#blog .sale_list li .btn_area .btn {
background: #f7a046;
color: #fff;
position: relative;
display: block;
padding: 15px 0;
transition: all 500ms cubic-bezier(0.215,0.610,0.355,1.000);
bottom: 0;
left: 0;
width: 100%;
}
#blog .sale_list li .btn_area .btn:hover {
background: #f7c046;
}
#blog .sale_list li .btn_area .btn:before {
content: "";
width: 23px;
height: 23px;
background: url(/img/sale_img/icon_cart.png) no-repeat scroll center center / cover;
position: absolute;
left: 6%;
top: 50%;
transform: translateY(-50%);
}

#blog .sale_list li .sale_number {
background: #FF4E2A;
    color: #fff;
    line-height: 20px;
    height: 60px;
    width: 60px;
    padding: 10px 5px;
    border-radius: 50%;
    font-weight: bold;
    letter-spacing: 1px;
    position: absolute;
    display: block;
    left: 10px;
    top: 10px;
    font-size: 1.0em;
}
#blog .sale_list li .sale_number .mini {
font-size: 0.8em;
}
#blog .sale_list li .sale_number .off {
font-size: 0.8em;
}



/* ==================================================================================

off_link

================================================================================== */
#blog .off_link {
background: #EDF3FA;
padding: 30px 0;
}
#blog .off_link ul {
    display: block;
}
#blog .off_link li {
    width: 100%;
    padding: 5px;
}

#blog .off_link a {
    background: #040000;
    /* background: #FF4E2A; */
    padding: 10px 0 20px 0;
    color: #fff;
    display: block;
    text-align: center;
    font-size: 2.2em;
    font-weight: bold;
    border-radius: 5px;
    line-height: 0.7;
    letter-spacing: 1px;
    position: relative;
    overflow: hidden;
}
#blog .off_link a:after {
content: "";
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
background: #238de3;
/* background: #E92700; */
transform-origin: right bottom;
transform: scale(1, 0);
transition: transform 0.5s;
}
#blog .off_link a:hover:after {
transform-origin: left top;
transform: scale(1, 1);
}
#blog .off_link a .box {
position: relative;
z-index: 1;
}

#blog .off_link a span {
font-size: 0.7em;
}
#blog .off_link a:before {
content: "";
    width: 6px;
    height: 6px;
    border: solid #fff;
    border-width: 0 1px 1px 0;
    transform: rotate(45deg) translateX(-50%);
    position: absolute;
    left: 50%;
    bottom: 6px;
    z-index: 1;
}



/* ==================================================================================

mv

================================================================================== */
#blog .mv {
margin: 30px 0;
}

#blog .mv .img {
border-radius: 10px;
overflow: hidden;
}
#blog .mv .img img {
width: 100%;
height: 30vh;
object-fit: cover;
}

#blog .mv .text {
margin: 20px 0;
}
#blog .mv .text .red_line {
    color: #FF4E2A;
    border: 1px solid #FF4E2A;
    border-radius: 5px;
    padding: 15px 20px;
    margin: 20px 0 0 0;
}


/* ==================================================================================

mv SALE

================================================================================== */
.sale_page .mv img {
    max-height: 150px;;
}

/* ==================================================================================

共通　画像拡大

================================================================================== */
.img_zoom {overflow:hidden;}
.img_zoom .img {overflow: hidden;}
.img_zoom img {
transition: all 5000ms cubic-bezier(0.215,0.610,0.355,1.000);
z-index:1;
-moz-transform: scale(1.001);
-webkit-transform: scale(1.001);
-ms-transform: scale(1.001);
transform: scale(1.001);
vertical-align: bottom;
}
.img_zoom:hover img {
-moz-transform: scale(1.05);
-webkit-transform: scale(1.05);
-ms-transform: scale(1.05);
transform: scale(1.05) rotate(0.001deg);
}



}
/* 【SP】ウィンドウ幅が768px以下の場合に適用するCSS */