@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 */
.mileWrap {
max-width:750px;
width:100%;
margin:0 auto;
font-family: "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", Meiryo, "メイリオ", sans-serif;
-webkit-text-size-adjust:100%;
}
.mileWrap img {
vertical-align: top;
width: 100%;
height: auto;
zoom: 1 !important;
}
.mileWrap a{
display: block;
}
.mileWrap .blueTxt {
color: #0099cc;
}
.mileWrap .blueTxt01 {
color: #00226e;
}
.mileWrap .redTxt {
color: #ca201a;
}
.mileWrap .redTxt01 {
color: #d80413;
}
.mileWrap .orangeTxt {
color: #ff7e00;
}

.mileWrap .minusT10 {
margin-top: -10px;
}

.mileWrap .ttl2 {
text-align: center;
}
.mileWrap .ttl2_subText{
text-align: center;
font-size:clamp(20px, 5.714vw, 40px);
color: #ca201a;
font-weight: bold;
}

/* 終了対応 */
.mileWrap .mv.grayOut {
  position: relative;
}
.mileWrap .mv.grayOut::before {
  position: absolute;
  top: 0;
  left: 0;
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background: #000;
  opacity: 0.5;
  z-index: 10;
}
.mileWrap .mv.grayOut::after {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  content: "";
  display: block;
  width: calc((518 / 750) * 100%);
  height: calc((151 / 387) * 100%);
  background: url(../image/mile_sp_end_001_241202.png) no-repeat;
  background-position: center center;
  background-size: cover;
  z-index: 20;
}

/*campaignBlock****************************************************/
.mileWrap .campaignBlock {
background: url('../image/mile_sp_bg_001_221101.png') repeat top;
padding: 10px 0;
}

.mileWrap .campaignBlock .contentBlock1 {
width: calc((335/375)*100%);
padding: 24px 5.333% 24px;
background: #fff;
border-radius: 3px;
color: #333;
margin: 30px auto;
font-size: 17px;
font-weight: bold;
line-height: 1.8;
letter-spacing: 0.014em;
}

.mileWrap .campaignBlock .contentBlock1 .sz24 {
font-size: 24px;
}

.mileWrap .campaignBlock .contentBlock1 .caption {
font-size: 14px;
font-weight: 300;
margin-top: 5px;
line-height: 1.66;
text-indent: -15px;
margin-left: 15px;
}

/*entryBlock****************************************************/
/*.mileWrap .entryBlock {
background: url('../image/mile_sp_bg_002_220701.png') repeat top;
padding: 40px 0;
}

.mileWrap .entryBlock .stepBlock {
max-width: calc((335/375)*100%);
margin: 30px auto 0;
}

.mileWrap .entryBlock .stepBlock .step01 {
position: relative;
}
.mileWrap .entryBlock .stepBlock .step02{
    padding-top: 60px;
}
.mileWrap .entryBlock .stepBlock .step01::after {
content: '';
background: url('../image/mile_sp_arrow_001_220701.png') no-repeat center;
background-size: 100%;
width: 19px;
height: 36px;
position: absolute;
display: block;
bottom: -47px;
left: 50%;
transform: translate(-50%);
}

.mileWrap .entryBlock .stepBlock .step01 .btn_ov {
position: absolute;
width: calc((295/335)*100%);
top: 61.3%;
left: 50%;
transform: translate(-50%);
}*/

/*precautionsBlock****************************************************/
.mileWrap .precautionsBlock {
padding: 10.6% 0 9.4%;
border: 1px solid #c4c4c4;
margin-bottom: 10.67%;
}

.mileWrap .precautionsBlock .listContent {
max-width: calc((335/375)*100%);
font-size: 14px;
margin: 27px auto 0;
}

.mileWrap .precautionsBlock .listContent li {
margin-top: 24px;
}

.mileWrap .precautionsBlock .listContent li:first-child {
margin-top: 0;
}

.mileWrap .precautionsBlock .listContent .title {
font-weight: bold;
/* color: #0099cc; */
color: #00226e;
}

.mileWrap .precautionsBlock .listContent .content {
letter-spacing: -0.007em;
line-height: 1.6;
margin-top: 2px;
word-break: break-all;
}
.mileWrap .precautionsBlock .listContent p:nth-child(n+3) {
margin-block-start: 15px;
}
.mileWrap .precautionsBlock .listContent li:nth-child(3) .content{
margin-top: 4px;
}
.mileWrap .linkTxt {
color: #0b318f;
text-decoration: underline;
display: inline;
}
.mileWrap .indent {
display: inline-block;
text-indent: 1em;
}

/*navBlock****************************************************/
.mileWrap .navBlock{
padding-bottom: 40px;
}
.mileWrap .navBlock .ttl {
margin: 40px auto 20px;
}

.mileWrap .navBlock .listNav {
display: flex;
flex-wrap: wrap;
}

.mileWrap .navBlock .listNav li {
margin-right: 1px;
width: calc((187/375)*100%);
margin-bottom: 1px;
}
.mileWrap .navBlock .listNav li:nth-child(2n) {
margin-right: 0;
}
/*productBlock****************************************************/
.mileWrap .productBlock{
padding: 20px 0 0;
}
.mileWrap .productBlock .listProduct {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
margin: 5.2% 5.3% 5.3%;
}
.mileWrap .productBlock .listProduct li{
width: 47.6%;
margin: 0 0 4.47%;
}
.mileWrap .productBlock .listProduct li img{
width: 100%;
}
.mileWrap .productBlock .listProduct li:nth-last-child(-n+2){
margin: 0;
}
.mileWrap .contentBlock2{
text-align: center;
padding-top: 20px;
}
.mileWrap .contentBlock2 .title{
font-family: "Yu Gothic";
font-weight: bold;
font-size: 17px;
color: #011851;
padding-bottom: 11px;
border-bottom: 1px solid #c4c4c4;
letter-spacing: -0.042em;
}
.mileWrap .contentBlock2 .content{
font-size: 14px;
color: #333;
margin-top: 18px;
}
.mileWrap .shopBlock{
margin-top: 17px;
}
.mileWrap .shopBlock .shop{
width: 100%;
}
.blackfridayWrap .shopBlock .shop a{
display: block;
}
.mileWrap .shopBlock .caption{
font-size: 9px;
font-weight: 300;
margin-top: 6px;
margin-left: 4.8%;
}
.mileWrap .cautionBlock{
margin-top: 35px;
}
.mileWrap .cautionBlock .cautionBlockA01{
background: #e3e5ed;
margin: 3% 0 6% 0;
padding: 2.3% 3% 1.9% 2.2%;
font-weight: bold;
}
.mileWrap .support{
/*padding: 17px 5.3% 73px;*/
text-align: center;
}


/*categoryBlock****************************************************/
#categoryBlock{
margin-bottom: 0;
}
.categoryList {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
margin: 25px 15px 0;
}
.categoryList li {
position: relative;
width: calc(50% - 7px);
margin-bottom: 15px;
border-radius: 2px;
background-color: #0B318F;
}
.categoryList li a {
display: block;
color: #fff;
text-align: center;
}
.categoryList li a:hover {
opacity: .8;
}
.categoryList li .categoryListThum{
background-color: #ffffff;
}
.categoryList li .categoryListTxt {
position: relative;
padding: 55px 0 7px 0;
font-size: 13px;
box-sizing: border-box;
text-align: center;
}
.categoryList li .categoryListTxt svg{
position: absolute;
top: 20px;
bottom: 0;
right: 0;
left: 0;
margin: 0 auto;
width: 37px;
}
.categoryList li .categoryListTxt span {
padding-left: 12px;
background: url(../images_sp/cmn/icon_arrow_left_w.png) no-repeat left center;
background-size: 6px;
}
.categoryList li:nth-of-type(2) .categoryListTxt svg {
top: 12px;
width: 20px;
}
.categoryList li:nth-of-type(3) svg {
position: absolute;
width: 26px;
left: 0;
right: 0;
bottom: 37px;
margin: auto;
}
.categoryList li:nth-of-type(4) .categoryListTxt svg {
top: 16px;
width: 35px;
}
.categoryList li:nth-of-type(5) .categoryListTxt svg {
top: 12px;
width: 27px;
}
.categoryList li:nth-of-type(6) .categoryListTxt svg {
top: 12px;
width: 20px;
}
@media (max-width: 320px) {
.categoryList li .categoryListTxt {
font-size: 12px;
}
}
.categoryList li.categoryListCol2 {
display: flex;
}
.categoryList li.categoryListCol2 a {
width: 50%;
}
.categoryList li.categoryListCol2 a .categoryListTxt {
margin-right: 0;
}
.categoryList li.categoryListCol2 a.categoryListCol2Box2 .categoryListTxt{
margin-left: 0;
}

/* 221205up */
.mileWrap .couponBlock {
background: #fffbc9 url('../image/mile_bg_001_230801.gif') repeat top;
padding: 5.333% 0;
}
.mileWrap .couponBlock .couponBlockInner {
max-width: calc(670 / 750 * 100%);
width: 100%;
margin: 0 auto;
background: #fff;
border-radius: 5px;
text-align: center;
}
.mileWrap .couponBlock .contentBlock01 {
width: calc(590 / 670 * 100%);
margin: 0 auto;
padding: 5.447% 0 6.666%;
color: #333;
}
.mileWrap .couponBlock .contentBlock02 {
padding-block: calc(60 / 670 * 100%);
}
.mileWrap .couponBlock .contentBlock01 .coupon_text {
font-size: min(4.8vw,36px);
font-weight: bold;
line-height: 1.8;
letter-spacing: 0.014em;
}
.mileWrap .couponBlock .bigTxt {
font-size: min(5.6vw,42px);
line-height: 1;
}
.mileWrap .couponBlock .coupon_btn {
margin-top: 8.474%;
}
.mileWrap .couponBlock .coupon_btn.disabled {
position: relative;
z-index: 1;
pointer-events: none;
}
.mileWrap .couponBlock .coupon_btn.disabled::after {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: 2;
content: '';
display: block;
background-color: rgba(0, 0, 0, 0.5);
}
.mileWrap .couponBlock .mile_imgText {
margin-top: 9.874%;
}
.mileWrap .couponBlock .mile_list {
margin: 10.169% 0 8.474%;
font-size: 20px;
line-height: 1.4;
font-weight: bold;
}

.mileWrap .couponBlock .mile_item + .mile_item {
margin-top: 6.779%;
}
.mileWrap .couponBlock .mile_item {
padding: 23px 0 15px;
background-color: #fffe8f;
border-radius: 4px;
box-sizing: border-box;
}
.mileWrap .couponBlock .mile_list .bigTxt {
font-size: 34px;
line-height: 1.2;
}
.mileWrap .couponBlock .caption_list {
text-align: left;
font-size: min(3.73vw,28px);
padding-left:1em;
text-indent:-1em;
line-height: 1.5;
}

/* 230801up */
.mileWrap .couponBlock .contentBlock01Inner {
margin: 0 auto;
}
.mileWrap .couponBlock .caption{
font-size: min(3.73vw,28px);
margin-top: 5%;
}
.mileWrap .couponBlock .contTxtA01{
font-size: min(4vw,30px);
font-weight: bold;
line-height: 2;
margin: 2% 0 3%;
}
.mileWrap .couponBlock .contentBox {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.mileWrap .couponBlock .contentLeft,
.mileWrap .couponBlock .contentRight{
width: 46.61%;
}
.mileWrap .couponBlock .contTxtA02 {
width: 100%;
padding: 7% 10.17% 8% 36.44%;
background: url(../image/mile_sp_img_004_231201.jpg) no-repeat center;
background-size: 100%;
margin-bottom: 6.8%;
font-size: min(3.73vw,28px);
font-weight: bold;
line-height: 1.357;
text-align: left;
}
.mileWrap .couponBlock .normalTxt {
font-size:min(3.2vw,24px);
font-weight: normal;
}
.mileWrap .couponBlock .contImg01 {
padding-bottom: 21.82%;
position:relative;
}
.mileWrap .couponBlock .contImg02 {
padding-bottom: 36.37%;
position:relative;
}
.mileWrap .couponBlock .contImg01:after{
content: "";
position: absolute;
background: url(../image/mile_sp_arrow_001_230801.png) no-repeat center;
background-size: contain;
width: 8.37%;
height: 17.87%;
bottom: 8.83%;
left: calc(50% - 8px);
}
.mileWrap .couponBlock .contImg02:after{
content: "";
position: absolute;
background: url(../image/mile_sp_arrow_002_230801.png) no-repeat center;
background-size: contain;
width: 8.37%;
height: 28.58%;
bottom: 8.83%;
left: calc(50% - 8px);
}
.mileWrap .headingBlockA07 {
margin-top: 11.34%;
}


/* product */
.productTtl {
margin: 0 !important;
margin-block-end: calc(41 / 670 * 100%) !important;
}
.productList {
inline-size: calc(589 / 670 * 100%);
margin-inline: auto;
}
.productItem {
display: grid;
grid-template-columns: calc(246 / 589 * 100%) 1fr;
grid-column-gap: clamp(0.719rem, 3.07vw, 1.438rem);
align-items: center;
}
.productImg {
border-radius: calc(infinity * 1px);
}
.productTxt {
font-size: clamp(0.875rem, 0.625rem + 1.07vw, 1.125rem); /* 14px ~ 18px */
line-height: calc(25 / 18);
color: #000;
text-align: left;
}
.txt-note {
display: inline-block;
margin-block-start: clamp(0.188rem, 0.8vw, 0.375rem); /* 3px ~ 6px */
font-size: clamp(0.875rem, 0.75rem + 0.53vw, 1rem); /* 14px ~ 16px */
line-height: 1.5;
}
.txt-marker {
margin-block-start: clamp(0.188rem, 0.8vw, 0.375rem); /* 3px ~ 6px */
background: linear-gradient(transparent 60%, #fff689 60%);
font-size: clamp(1rem, 0.438rem + 2.4vw, 1.563rem);
font-weight: bold;
line-height: calc(34 / 25);
/* color: #d80413; */
}
.productItem:nth-child(2n) {
grid-template-columns: 1fr calc(246 / 589 * 100%);
}
.productItem:nth-child(2n) .productTxt {
order: 1;
}
.productItem:nth-child(2n) .productImg {
order: 2;
}

.noteBox {
  margin-block:  calc(50 / 750 * 100%);
  padding: 2.3% 3% 1.9% 2.2%;
}
.noteBox .noteText {
  padding-left: 1em;
  text-indent: -1em;
  font-size: 14px;
  line-height: 1.3;
  letter-spacing: 0.3px;
}
.noteText {
  font-size: 14px;
  margin-block: 10px;
}