@charset "utf-8";
/* CSS Document */
* {margin:0; padding:0;}
#goods .btn_cart:hover { cursor:pointer; opacity:0.8; }
/* 通常の状態 */
.fv a {
display: inline-block; /* アニメーションを安定させるために推奨 */
transition: opacity 0.3s; /* ふわっと変化させる設定（秒数はお好みで） */
text-decoration: none;
color: #fff;
}
.couponfv a {
display: inline-block; /* アニメーションを安定させるために推奨 */
transition: opacity 0.3s; /* ふわっと変化させる設定（秒数はお好みで） */
text-decoration: none;
color: #fff;
}
/* マウスをのせた時 */
.fv a:hover {
opacity: 0.8;
}
.couponfv a:hover {
opacity: 0.8;
}
.kome {font-size: 10px;color: #ffffff; margin-bottom: 20px;line-height: 1.3;}
#spring .petitprice { overflow: hidden; }
#a01, #b02 {margin-top: -60px;padding-top: 60px;}

/* -------------------------------------------------------------------- 
FV
-------------------------------------------------------------------- */
.fv { position: relative;　width: 100%; }
.fv h1,
.fv p { margin: 0; }
/* 共通 */
.fv .img01,
.fv .img02 { position: absolute; height: auto; }


/* -------------------------------------------------------------------- 
クーポンFV
-------------------------------------------------------------------- */
.couponfv { position: relative;　width: 100%; }
.couponfv h2,
.couponfv p { margin: 0; }
/* 共通 */
.couponfv .img01,
.couponfv .img02,
.couponfv .img03 { position: absolute; height: auto; }


/*===============================================
●SP 画面の横幅が768pxまで
===============================================*/
@media only screen and (max-width: 768px) {
.pc { display: none !important; }
.sp { display: block !important; }
.content_width { width: 100%; margin: 70px auto 0; box-sizing: border-box; -webkit-box-sizing: border-box; overflow:hidden; font-size: 14px; line-height: 1.6em; }
#spring .h1 { margin-bottom: 40px; }
#spring .position1 { }
#spring .position2 { text-align: left; padding: 3% 0 3%;}

/* -------------------------------------------------------------------- 
商品
-------------------------------------------------------------------- */
#goods { overflow: hidden; padding: 0px 20px 20px; margin-bottom: 40px; }
#goods .topics_item1_group { overflow: hidden; margin-bottom: 40px; }
#goods .topics_item1_group_ul_left { margin-bottom: 40px; }
#goods .topics_item1_group_ul_right { }
#goods .syousaibox1 { text-align: center; padding: 20px 40px 30px; background-image: url(/excludes/ozio/cp/26spring/img/common/001_02.jpg); }
#goods .syousaibox2 { text-align: center; padding: 20px 40px 30px; background-image: url(/excludes/ozio/cp/26spring/img/common/002_02.jpg); }
#goods .syousaibox3 { text-align: center; padding: 0px 40px 33px; background: url(/excludes/ozio/cp/26spring/img/common/003_02_02.jpg) no-repeat center/100%; margin-top: -4px; }
#goods .syousaibox4 { text-align: center; padding: 0px 40px 33px; background: url(/excludes/ozio/cp/26spring/img/common/004_02_02.jpg) no-repeat center/100%; margin-top: -4px; }/*カラバリあり*/

/* -------------------------------------------------------------------- 
FV
-------------------------------------------------------------------- */
.fv h1 img { width: 100%; height: auto; display: block; }
.fv .img01 { width: 44vw; }
.fv .img02 { width: 46vw; }
/* 位置（%で調整） */
.fv .img01 { bottom: 7%; left: 5%; }
.fv .img02 { bottom: 7%; right: 5%; }

/* -------------------------------------------------------------------- 
クーポンFV
-------------------------------------------------------------------- */
.couponfv h2 img { width: 100%; height: auto; display: block; margin: 0px auto 40px; }
.couponfv .img01,
.couponfv .img02,
.couponfv .img03 { width: 85vw; }
/* 位置（%で調整） */
.couponfv .img01 { top: 42%; left: 7.5%; }
.couponfv .img02 { top: 60%; left: 7.5%; }
.couponfv .img03 { bottom: 5.5%; left: 7.5%; }
}
/*===============================================
●PC 画面の横幅が640px
===============================================*/
@media only screen and (min-width: 768px) {
.pc { display: block !important; }
.sp { display: none !important; }
#spring { margin: auto; max-width: 1024px; width: 100%;}
.content_width { max-width: 1024px; margin: 100px auto 0; box-sizing: border-box; -webkit-box-sizing: border-box; overflow:hidden; font-size: 14px; line-height: 1.6em; }
#spring .h1 { text-align: center; padding: 40px 0; margin: auto; }
#spring .position1 { }
#spring .position2 { text-align: left; padding: 14px 0;}

/* -------------------------------------------------------------------- 
商品
-------------------------------------------------------------------- */
#goods { overflow: hidden; padding: 0 40px 40px; margin-bottom: 80px; }
#goods .topics_item1_group { overflow: hidden; margin-bottom: 40px; }
#goods .topics_item1_group_ul_left { float: left; margin-right: 18.8px; width: 48%; }
#goods .topics_item1_group_ul_right { float: left; margin-left: 18.8px; width: 48%; }
#goods .syousaibox1 { text-align: center; padding: 20px 40px 30px; background-image: url(/excludes/ozio/cp/26spring/img/common/001_02.jpg); }
#goods .syousaibox2 { text-align: center; padding: 20px 40px 30px; background-image: url(/excludes/ozio/cp/26spring/img/common/002_02.jpg); }
#goods .syousaibox3 { text-align: center; padding: 0px 40px 33px; background: url(/excludes/ozio/cp/26spring/img/common/003_02_02.jpg) no-repeat center/100%; margin-top: -3px; }
#goods .syousaibox4 { text-align: center; padding: 0px 40px 33px; background: url(/excludes/ozio/cp/26spring/img/common/004_02_02.jpg) no-repeat center/100%; margin-top: -3px; }/*カラバリあり*/
/* -------------------------------------------------------------------- 
FV
-------------------------------------------------------------------- */
.fv h1 img { height: auto; display: block; margin: auto; }
/* 位置（%で調整） */
.fv .img01 { bottom: 7%; left: 16%; }
.fv .img02 { bottom: 7%; right: 16%; }

/* -------------------------------------------------------------------- 
クーポンFV
-------------------------------------------------------------------- */
.couponfv h2 img { height: auto; display: block; margin: 0px auto 80px; }
/* 位置（%で調整） */
.couponfv .img01 { top: 40%; left: 19.5%; }
.couponfv .img02 { top: 58.5%; left: 19.5%; }
.couponfv .img03 { bottom: 6.5%; left: 19.5%; }
}

/* -------------------------------------------------------------------- 
メイン
-------------------------------------------------------------------- */
#goodsin {
display: flex;  /* 左右並びを安定化 */
gap: 20px;      /* 商品間スペース */
flex-wrap: wrap; /* モバイル対応 */
}
#goodsin .topics_item1_group_left,
#goodsin .topics_item1_group_right {
flex: 1;        /* 等幅 */
min-width: 300px; /* モバイル最小幅 */
}
#goodsin .syousaibox {
text-align: center;
padding: 20px 40px 35px;
background-repeat: no-repeat;
background-position: center;
background-size: cover;  /* 画像をボックスにフィット */
}
#goodsin .syousaibox1 {
background-image: url(/excludes/ozio/cp/26spring/img/common/001_02.jpg);
}
#goodsin .syousaibox2 {
background-image: url(/excludes/ozio/cp/26spring/img/common/002_02.jpg);
}
/* レスポンシブ */
@media (max-width: 768px) {
#goodsin {
flex-direction: column;
}
#goodsin .syousaibox {
padding: 18px 20px 18px; /* モバイル用パディング縮小 */
}
}