@charset "shift_jis";
/* SpCommonReset
**************************** */
/* h1 and h2 */
#main h1 img,#main div[id^="h2_0"] img {
zoom:1;
display:block;
max-width:750px;
width:100%;
height:auto;
margin:auto;
}
/* wrap */
.monthlyCampaignWrap {
max-width:750px;
width:100%;
margin:0 auto;
-webkit-text-size-adjust:100%;
}
.monthlyCampaignWrap img {
vertical-align: top;
width: 100%;
height: auto;
zoom: 1 !important;
}
.monthlyCampaignWrap a {
display: block;
}


.monthlyCampaignWrap {
text-align: center;
}
.monthlyCampaignWrap .aboutBlock {
padding: 13.33% 0 3%;
background-image: url(../image/monthlyCampaign_sp_bg_001_250901.jpg), url(../image/monthlyCampaign_sp_bg_008_250901.jpg), linear-gradient(90deg, #f8e75b 0%, #f8e75b 50%, #7ddcf4 50%, #7ddcf4 100%);
background-repeat: no-repeat, no-repeat;
background-position: top center, center 48%;
background-size: contain, contain;
}
.monthlyCampaignWrap .aboutBlock .aboutBlockA01 {
width: calc(690 / 750 * 100%);
margin: 0 auto;
padding-bottom: 8%;
background-image: url(../image/monthlyCampaign_sp_bg_003_250901.png), url(../image/monthlyCampaign_sp_bg_002_250901.png);
background-color: #fff;
background-size: contain;
background-repeat: no-repeat, no-repeat;
background-position: top center, bottom center;
border-radius: 10px;
}
.monthlyCampaignWrap .aboutBlockA01Inner,
.monthlyCampaignWrap .aboutBlockA02Inner,
.monthlyCampaignWrap .itemBlockInner,
.monthlyCampaignWrap .rankingBlockInner,
.monthlyCampaignWrap .campaignBlockInner,
.monthlyCampaignWrap .recommendItemBlockA01Inner,
.monthlyCampaignWrap .bannerBlockA01Inner,
.monthlyCampaignWrap .brandBlockA01Inner,
.monthlyCampaignWrap .categoryBlockA01Inner {
position: relative;
}
.monthlyCampaignWrap .h2Img {
width: calc(494 / 750 * 100%);
margin: 0 auto;
position: absolute;
left: 0;
right: 0;
margin-top: -9%;
}
.monthlyCampaignWrap .categoryBlockA01Inner .h2Img {
margin-top: -17%;
}
.monthlyCampaignWrap .aboutBlock .aboutBlockA01 .aboutImg,
.monthlyCampaignWrap .aboutBlock .aboutBlockA02 .textImg {
width: calc( 676 / 750 * 100%);
margin: 0 auto;
padding-top: 10%;
}
.monthlyCampaignWrap .aboutBlock .aboutBlockA01 .column01 .plusImg {
width: calc(40 / 750* 100%);
}
.monthlyCampaignWrap .aboutBlock .aboutBlockA01 .column02 {
width: calc(40 / 750* 100%);
margin: 0 auto;
}
.monthlyCampaignWrap .aboutBlock .aboutBlockA01 .column01,
.monthlyCampaignWrap .aboutBlock .aboutBlockA01 .column03 {
margin: 2.66% 3.66% 1%;
padding: 2.66% 3.66%;
background-color: #fdfae5;
}
.monthlyCampaignWrap .aboutBlock .aboutBlockA01 .column01 {
margin-top: 4%;
}
.monthlyCampaignWrap .aboutBlock .aboutBlockA01 .column03 {
margin-top: 1%;
}
#contents .monthlyCampaignWrap .aboutBlock .aboutBlockA01 .column03 img {
width: calc(635 / 750* 100%);
margin: 0 auto;
}
.monthlyCampaignWrap .aboutBlock .aboutBlockA01 .noteText {
font-size: clamp(14px, 3.33vw, 25px);
margin-top: 2%;
line-height: 1;
}
.monthlyCampaignWrap .aboutBlock .aboutBlockA01 .noteText a,
.monthlyCampaignWrap .aboutBlock .aboutBlockA02 .noteBlock a {
display: inline-block;
color: #002596;
text-decoration: underline;
}
.monthlyCampaignWrap .aboutBlock .aboutBlockA01 .noteText a:hover,
.monthlyCampaignWrap .aboutBlock .aboutBlockA02 .noteBlock a:hover {
opacity: 0.7;
}
.blankIcon::after {
position: relative;
content: "";
display: inline-block;
background-image: url(../image/monthlyCampaign_sp_icon_001_250901.png);
background-size: cover;
background-repeat: no-repeat;
width: 14px;
height: 14px;
top: 2px;
left: 5px;
}

.monthlyCampaignWrap .aboutBlock .aboutBlockA02 {
width: calc(690 / 750 * 100%);
margin: 16% auto 0;
padding-bottom: 3%;
background: url(../image/monthlyCampaign_sp_bg_003_250901.png) no-repeat top center #fff;
background-size: contain;
border-radius: 10px;
}
.monthlyCampaignWrap .aboutBlock .aboutBlockA02 .textImg  {
width: calc( 720 / 750 * 100%);
}
.monthlyCampaignWrap .aboutBlock .aboutBlockA02 .couponImg {
margin: 4% auto 0;
width: calc( 690 / 750 * 100%);
}
.monthlyCampaignWrap .aboutBlock .aboutBlockA02 .noteBlock {
width: calc( 690 / 750 * 100%);
margin: 1.33% auto 0;
text-align: left;
font-size: clamp(14px, 3.73vw, 28px);
line-height: 1.2;
}
.monthlyCampaignWrap .aboutBlock .aboutBlockA02 .itemBlock {
margin-top: 17%;
}
.monthlyCampaignWrap .aboutBlock .aboutBlockA02 .itemBlock .ranking,
.monthlyCampaignWrap .itemBlockA01 .ranking {
margin: 0 auto;
}
.monthlyCampaignWrap .aboutBlock .aboutBlockA02 .itemBlock .categoryCarouselAWrap,
.monthlyCampaignWrap .itemBlockA01 .categoryCarouselAWrap {
margin-top: 0;
}

.monthlyCampaignWrap .itemBlockA01 {
padding: 18% 0 0;
background: url(../image/monthlyCampaign_sp_bg_004_250901.jpg) top center no-repeat, linear-gradient(90deg, #fffdde 0%, #fffdde 50%, #e2fbff 50%, #e2fbff 100%);
background-size: contain;
}
.monthlyCampaignWrap .itemBlockA01 .itemBlockA01Inner {
width: calc( 690 / 750 * 100%);
margin: 1.33% auto 0;
}
.monthlyCampaignWrap .itemBlockA01 .rankingBlock .rankingBlockInner,
.monthlyCampaignWrap .itemBlockA01 .campaignBlock .campaignBlockInner {
margin: 8% auto 0;
padding-bottom: 4%;
background-color: #fff;
border-radius: 10px;
}
.monthlyCampaignWrap .itemBlockA01 .campaignBlock .campaignBlockInner{
padding-bottom: 0;
}
.monthlyCampaignWrap .itemBlockA01 .rankingBlock .ranking {
margin-top: -8%;
}
.monthlyCampaignWrap .itemBlockA01 .campaignBlock {
margin: 18% 0 8%;
padding-bottom: 3%;
}

.bannerWrap {
padding-top: 10%;
padding-bottom: 4%;
}
.titleBlock-h2 {
text-align: center;
font-size: clamp(14px, 4.26vw, 32px);
font-weight: bold;
}
.bannerList {
margin-inline: auto;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
.justify-content-center .bannerList {
justify-content: center !important;
}
.bannerWrap .bannerItem img {
width: 100%;
height: auto;
}
.col2-286_286 .bannerList {
gap: 5.33%;
}
.col2-286_286 .bannerItem {
width: 42%;
margin-bottom: 5%;
}

.monthlyCampaignWrap .recommendItemBlockA01 {
padding: 20% 0 8%;
background: url(../image/monthlyCampaign_sp_bg_005_250901.jpg) top center no-repeat, #ffc7bc;
background-size: contain;
}
.monthlyCampaignWrap .recommendItemBlockA01 .recommendItemBlockA01Inner {
width: calc( 690 / 750 * 100%);
margin: 1.33% auto 0;
padding: 0 4% 8%;
background-color: #fff;
border-radius: 10px;
}
.monthlyCampaignWrap .recommendItemBlockA01 .col1 .itemImg {
width: 80%;
margin: 0 auto;
padding-top: 12%;
}
.monthlyCampaignWrap .recommendItemBlockA01 .col2 {
margin-top: 8%;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
text-align: left;
font-size: clamp(14px, 2.13vw, 16px);
}
.monthlyCampaignWrap .recommendItemBlockA01 .brand, 
.monthlyCampaignWrap .recommendItemBlockA01 .itemName, 
.monthlyCampaignWrap .recommendItemBlockA01 .text {
text-align: left;
line-height: 1.2;
}
.monthlyCampaignWrap .recommendItemBlockA01 .price {
text-align: right;
line-height: 1.2;
}
.monthlyCampaignWrap .recommendItemBlockA01 .col2 .col2_02 {
width: 53.3%;
margin-right: 10.6%;
}
.monthlyCampaignWrap .recommendItemBlockA01 .col1 .brand {
margin-top: 3%;
font-size: clamp(14px, 3.6vw, 27px);
font-weight: bold;
}
.monthlyCampaignWrap .recommendItemBlockA01 .col1 .itemName {
margin-top: 2%;
font-size: clamp(14px, 4vw, 30px);
font-weight: bold;
}
.monthlyCampaignWrap .recommendItemBlockA01 .col1 .text {
margin-top: 2%;
font-size: clamp(14px, 3.2vw, 24px);
}
.monthlyCampaignWrap .recommendItemBlockA01 .col1 .price {
margin: 3%;
padding: 0;
text-align: right;
font-size: clamp(14px, 3.73vw, 28px);
font-weight: bold;
}
.monthlyCampaignWrap .recommendItemBlockA01 .col1 .price .tax {
font-size: clamp(14px, 2.13vw, 16px);
font-weight: initial;
}
.monthlyCampaignWrap .recommendItemBlockA01 .col1 .btn {
width: 80%;
margin: 0 auto;
}
.monthlyCampaignWrap .recommendItemBlockA01 .col2 .col2_item {
width: 48%;
}
.monthlyCampaignWrap .recommendItemBlockA01 .col2 .itemName,
.monthlyCampaignWrap .recommendItemBlockA01 .col2 .price,
.monthlyCampaignWrap .recommendItemBlockA01 .col2 .btn {
margin-top: 4%;
}
.monthlyCampaignWrap .recommendItemBlockA01 .col2 .itemName {
font-size: clamp(14px, 3.73vw, 28px);
}
.monthlyCampaignWrap .recommendItemBlockA01 .col2 .price {
margin: 2.66% 0; 
padding: 0;
text-align: right;
font-size: clamp(14px, 3.73vw, 28px);
}
.monthlyCampaignWrap .recommendItemBlockA01 .col2 .col2_item:nth-of-type(1),
.monthlyCampaignWrap .recommendItemBlockA01 .col2 .col2_item:nth-of-type(2)  {
margin-bottom: 7%;
}


.monthlyCampaignWrap .bannerBlock {
padding: 13.33% 0 8%;
background: url(../image/monthlyCampaign_sp_bg_006_250901.jpg) top center no-repeat, linear-gradient(90deg, #fffdde 0%, #fffdde 50%, #e2fbff 50%, #e2fbff 100%);
background-size: contain;
}
.monthlyCampaignWrap .bannerBlock .bannerBlockA01,
.monthlyCampaignWrap .bannerBlock .brandBlockA01 {
width: calc( 690 / 750 * 100%);
margin: 8% auto 0;
padding-bottom: 5.33%;
background-color: #fff;
border-radius: 10px;
}
.monthlyCampaignWrap .bannerBlock .bannerBlockA01 {
padding-bottom: 0;
}
.monthlyCampaignWrap .bannerBlock .brandBlockA01 {
margin-top: 16%;
}
.col2-brand_340_120 .bannerList {
gap: 3.5%;
margin-bottom: 2.5%;
}
.col2-brand_340_120 .bannerItem {
width: 44%;
margin-bottom: 4%;
}
.monthlyCampaignWrap .bannerBlock .brandBlockA01 .btn {
width: 80%;
margin: 0 auto;
}
.monthlyCampaignWrap .bannerBlock .brandBlockA01 {
padding-bottom: 8%;
}

.monthlyCampaignWrap .categoryBlockA01 {
padding: 26% 0 8%;
background: url(../image/monthlyCampaign_sp_bg_007_250901.jpg) top center no-repeat, #fff;
background-size: contain;
}
.monthlyCampaignWrap .categoryBlockA01 .col2 {
margin-top: 4%;
display: flex;
flex-wrap: wrap;
gap: 1.6%;
}
.monthlyCampaignWrap .categoryBlockA01 .col2 li {
width: 47%;
margin: 2% auto 0;
}

.monthlyCampaignWrap .cautions {
padding: calc(20 / 750 * 100%) calc(20 / 750 * 100%);
background-color: #e4e4ee;
text-align: left;
font-size: clamp(14px, 3.73vw, 28px);
line-height: 1.2;
}
.monthlyCampaignWrap .cautions p {
font-weight: bold;
}
.indent {
text-indent: -1em;
padding-left: 1em;
}

.monthlyCampaignWrap .noteBox {
padding: 4% 3% 8%;
font-size: clamp(14px, 3.73vw, 28px);
text-align: left;
line-height: 1.2;
background-color: #fff;
}


#rankingBlock .pageArea [class^="rank_ttl_"] {
margin-top: 4%;
}
.buttonArea {
margin-top: 4%;
}
