@charset "UTF-8";

.mainCt{
 max-width: 840px;
}


.btn01{
 max-width: 500px;
 margin: auto;
}

.btn02{
 max-width: 500px;
 margin: auto;
}

.scLine{
 margin-right: auto;
 margin-left: auto;
 max-width: 500px;
}


.cautionTxt{
 margin-left: auto;
 max-width: 500px;
 margin-right: auto;
}

.product-imgPattern .cautionTxt{
 margin-left: inherit;
 max-width: inherit;
 margin-right: inherit;
}



.product-imgPattern .chargelink{
 text-decoration: none;
}

.product-imgPattern .chargelink01{
 position: inherit;
 bottom: inherit;
 width: 100%;
 margin-top: auto; /* ボタンを最下部に配置 */
}

.product-imgPattern .chargePieces{
 font-size: 1.2rem;
 margin-bottom: .3rem;
}


.product-imgPattern .chargeBtn{
 margin: 20px auto 0;
 line-height: 1.4;
}




.chargeItemList{
 flex-wrap: wrap;
 gap: 10px;
 }

.chargeItemList li:nth-child(even) {
 margin-left: inherit;
}

.chargeItem{
 display: flex;
 flex-wrap: wrap;
 flex-direction: column;
}

@media screen and (max-width: 350px) {
 .chargeItem{
  width: 100%;
 }
}



.itemImg{
 background-color: #fff;
 text-align: center;
 padding: 1.2rem 0;
}

.chargeItemList02 .itemImg{
 padding: 1.5rem;
}

.itemImg img{
 max-width: 250px;
}

.chargeBtnTxt01{
 margin-left: 2px;
}


@media screen and (max-width: 767px) {
 .product-imgPattern .chargeBtnTxt01,
 .product-imgPattern .chargeBtnTxt02{
  line-height: 12px;
 }
}


.tagBox span:first-child{
 margin-right: 5px;
}

.chargeGiftTit{
 display: block;
 font-size: 0.95rem;
 position: relative;
 font-weight: bold;
 color:#2d4c89;
}

.bonusGiftTit{
 display: block;
 font-size: 1.05rem;
 position: relative;
 font-weight: bold;
}

@media screen and (max-width: 413px) {
 .bonusGiftTit{
 font-size: 1.0rem;
 }
}

@media screen and (max-width: 386px) {
 .bonusGiftTit{
 font-size: .88rem;
 }
}

@media screen and (max-width: 350px) {
 .bonusGiftTit{
 font-size: 1.1rem;
 }
}


.bonusGiftDetailBox{
 color:#e67713;
}



.chargeGiftTit:before{
 background-image: url(/img/layout/web_icon.svg);
 content: '';
 display: inline-block;
 background-repeat: no-repeat;
 background-size: contain;
 width: 17px;
 height: 17px;
 margin-right: 4px;
 vertical-align: middle;
}

/*.bonusGiftTit:before{
 background-image: url(/img/layout/coin_icon.svg);
 content: '';
 display: inline-block;
 background-repeat: no-repeat;
 background-size: contain;
 width: 16px;
 height: 16px;
 margin-right: 4px;
 vertical-align: middle;
}*/




.list2Item .chargePieces,
.list4Item .chargePieces{
 margin-bottom: .1rem;
}


.chargePriceDetailBox{
 margin-bottom: .7rem;
}

.chargeItemDetail {
 display: flex;
 flex-direction: column;
 flex-grow: 1; /* テキスト量に応じて伸縮 */
 padding: 15px 10px;
}

.chargePriceDetail{
 color: #2d4c89;
 font-size: .85rem;
 font-weight: normal;
}

.chargeItemList.list4Item li{
 width: calc(25% - 8px);
}


.product-imgPattern .list4Item .chargeBtn {
 padding: .4rem;
}

@media screen and (max-width: 900px) {
 .chargeItemList.list4Item li{
  width: calc(50% - 5px);
 }
 .product-imgPattern .list4Item .chargeBtn {
  padding: .5rem .6rem .3rem;
 }
}



@media screen and (max-width: 349px) {
 .chargeItemList.list4Item li{
  width: 100%;
 }
 .chargePriceDetail {
  font-size: .9rem;
 }
}


.titlink{
 color:#e67713;
}

.titlink:hover{
 color:#e67713;
 opacity: .7;
}

.privilege-temp .campaignLinkInner{
 font-size: 1.1rem;
 color:#e67713;
 font-weight: bold;
 margin-bottom: 0;
 margin-right: 13px;
}

 button.accordion-header  {
 outline: none;
}

.privilege-temp .campaignCaution{
 display: block;
 width: 100%;
 color:#333;
 background: #eee;
 padding: 1rem;
 font-weight: bold;
}

.privilege-temp .campaignCaution img {
 margin-right: 4px;
 vertical-align: top;
}


.giftTit{
 position: relative;
 display: block;
 padding: 0 20px;
 font-size: 20px;
 font-weight: bold;
 text-align: center;
 margin-bottom: 35px;
 margin-top: 50px;
 color: #212121;
}

.product-imgPattern .txt04 {
 margin-bottom: 0;
}

.giftTit:before,
.giftTit:after {
 content: '';
 position: absolute;
 top: 50%;
 display: inline-block;
 width: calc(50% - 200px);
 height: 1px;
 background-color: #bbb;
}

.giftTit01.giftTit:before,
.giftTit01.giftTit:after {
 width: calc(50% - 106px);
}

.giftTit02.giftTit:before,
.giftTit02.giftTit:after {
 width: calc(50% - 116px);
}

.giftTit03.giftTit:before,
.giftTit03.giftTit:after {
 width: calc(50% - 76px);
}

.giftTit01 img{
 width: 19px;
 display: inline-block;
 vertical-align: middle;
 margin-right: 7px;
 margin-bottom: .2rem;
}

.giftTit02 img{
 width: 15px;
 display: inline-block;
 vertical-align: middle;
 margin-right: 6px;
}

.giftTit03 img{
 width: 20px;
 display: inline-block;
 vertical-align: middle;
 margin-right: 7px;
 margin-bottom: 3px;
}

.giftTit:before {
 left:0;
}
.giftTit:after {
 right: 0;
}

.modal-dialog {
 padding: 4%;
 margin: auto;
}

#payment_confirm_modal .modal-body{
 padding: 1rem;
}

#payment_send_button{
 margin-top: 1rem;
}

.modalTxt {
 border-bottom:none;
 padding: 0;
}

.modal-header .close{
 position: absolute;
 right: 15px;
 top: 15px;
}

.modal-title{
 margin: auto;
 font-size: 1.4rem;
}

.modal-header{
 justify-content: center;
 border-bottom: none;
}

.modal-footer{
 justify-content: center;
 border-top:none;
}

.modal-content {
 padding: 1rem 0;
}

.modalTxt{
 font-size: 1.1rem;
}

.modal-body {
 background-color: #fff
}

.giftBox{
 padding: 25px 20px;
 font-size: .9rem;
}

.giftBoxTit{
 font-size: 1.15rem;
 font-weight: bold;
 line-height: 24px;
 margin-bottom: .7rem;
 text-align: center;
}

@media screen and (max-width: 767px) {
 .giftBox{
  padding: 15px 10px;
 }
 .giftBoxTit{
  text-align: left;
 }
}

.btnBox{
 margin-top: 1.5rem;
 max-width: 500px;
 margin-left: auto;
 margin-right: auto;
}

.btn-secondary,
.btn-primary{
 font-size: 1.1rem;
 font-weight: bold;
 padding: .5rem 1.5rem;
 border-radius: 30px;
 width: 100%;
}


.btn-primary{
 background-color: #2a87db;
}

.btn-primary:hover {
 opacity: .7;
 background-color: #2a87db;
}

@media screen and (max-width: 767px) {
.btn-secondary,
.btn-primary{
 border-radius: 6px;
 }
}

.product-imgPattern .chargelist li.doneItem{
 -webkit-filter: grayscale(1); /* Webkit */
 filter: gray; /* IE6-9 */
 filter: grayscale(1); /* W3C */
 cursor: default;
}

form,
.mainCtInner{
 max-width: 500px;
 margin-left: auto;
 margin-right: auto;
}