@charset "utf-8";

/* ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■

【PC】ウィンドウ幅が769px以上の場合に適用するCSS

■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ */
@media print, screen and ( min-width:769px ) {














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

セールタイトル色変え

★　★　★　★　★　★　★　★　★　★　★　★　★　★　★　★　★　★　★　★　★　★　★　★　★　★　★　★　★　★　★　★ */
.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;
}


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

新規追加ページ

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


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

既存CSS削除

================================================================================== */
body .pane-contents .container {
display: block;
width: 100%;
}




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

common

================================================================================== */
#blog .inner {
min-width: 1000px;
max-width: 1200px;
margin: 0 auto;
width: calc(100% - 50px);
}
#blog .inner_mini {
min-width: 800px;
max-width: 900px;
margin: 0 auto;
width: calc(100% - 50px);
}

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

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

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

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

.font_e {
font-family: 'Yantramanav', sans-serif;
}

#blog .sp {
display: none;
}



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

【共通】タイトル

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


/* title_01
======================================== */
.title_01 {
text-align: center;
line-height: 1.3;
position: relative;
}
.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 20px;
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: 20px 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 35px;
}
#blog [class*="icon_"]:before {
position: absolute;
left: 0;
top: 55%;
transform: translateY(-50%);
display: inline-block;
line-height: 0;
}

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

#blog .category_area ul {
display: flex;
flex-wrap: wrap;
gap: 13px 1%;
margin: 50px 0;
}
#blog .category_area li {
width: 19.2%;
}
#blog .category_area a {
background: var(--main-color);
color: #fff;
display: block;
text-align: center;
padding: 15px 0;
border-radius: 5px;
position: relative;
transition: 0.5s;
overflow: hidden;
}
#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: 50px 0;
}
#blog .banner_area .slick-slide {
margin: 0 15px;
}
#blog .banner_area .img {
border-radius: 10px;
overflow: hidden;
}
#blog .banner_area .img img {
width: 100%;
height: 190px;
}

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



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

ranking_area

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

#blog .ranking_area ul {
display: flex;
margin: 50px 0;
}
#blog .ranking_area li a {
border-right: 1px solid var(--boder-color);
padding: 60px 25px 15px 25px;
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:first-child a {
border-left: 1px solid var(--boder-color);
}

#blog .ranking_area .img {
border-radius: 10px;
}
#blog .ranking_area .img img {}

#blog .ranking_area li .font_e {
position: absolute;
left: 20px;
top: 0;
font-weight: bold;
font-size: 1.7em;
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: 2em;
}
#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: 2em;
}
#blog .ranking_area li:nth-child(2) .font_e:before {
background: #ABABAB;
}

#blog .ranking_area li:nth-child(3) .font_e {
color: #CBB89F;
font-size: 2em;
}
#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: 5em;
line-height: 1;
font-weight: bold;
color: #fff;
padding: 60px 0 50px;
margin: 130px 0 80px;
}
#blog .sale_list .sale_title span {
font-size: 0.7em;
}

#blog .sale_list ul {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-gap: 80px 40px;
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: 15px 0 10px;
}

#blog .sale_list li span .large {
margin: 0 5px;
}
#blog .sale_list li .price {
color: #FF4E2A;
font-size: 1.1em;
margin: 0 0 -15px 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 {
position: relative;
padding: 0 0 70px 0;
}

#blog .sale_list li .btn_area {
display: block;
position: absolute;
width: 100%;
bottom: 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;
display: inline-block;
line-height: 17px;
height: 60px;
width: 60px;
padding: 15px 0;
border-radius: 50%;
font-weight: bold;
letter-spacing: 1px;
position: absolute;
left: 10px;
top: 10px;
font-size: 1.2em;
}
#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: 40px 0;
}
#blog .off_link ul {
display: flex;
gap:30px;
}
#blog .off_link li {
    width: 100%;
}
#blog .off_link a {
    background: #040000;
    /* background: #FF4E2A; */
    padding: 12px 0;
    color: #fff;
    display: block;
    text-align: center;
    font-size: 3em;
    font-weight: bold;
    border-radius: 5px;
    line-height: 1;
    letter-spacing: 3px;
    position: relative;
    overflow: hidden;
    text-decoration: none;
}
#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: 8px;
height: 8px;
border: solid #fff;
border-width: 0 1px 1px 0;
transform: rotate(45deg) translateY(-50%);
position: absolute;
right: 7%;
top: 50%;
z-index: 1;
}



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

mv

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

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

#blog .mv .text {
width: 60%;
margin: 50px auto;
text-align: center;
}
#blog .mv .text .red_line {
color: #FF4E2A;
border: 1px solid #FF4E2A;
border-radius: 5px;
padding: 15px 20px;
margin: 30px 0 0 0;
font-size: 0.9em;
}



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

共通　画像拡大

================================================================================== */
.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);
}



}
/* ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■

【PC】ウィンドウ幅が769px以上の場合に適用するCSS

■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ */