@charset "UTF-8";

/* tab
----------------------------------------------- */
.tab {margin: 0 auto 4vw;display:-webkit-box;display:-moz-box;display:box;display:-webkit-flex;display:flex;flex-wrap:wrap;align-items:center;justify-content: center;}
.tab li {position: relative;background: #fff;color:#342d34;text-align: center;width: 49%;margin-bottom: 2%;border-radius: 8px 8px 0 0;font-feature-settings: "palt";letter-spacing: .05em;display: table;min-height: 14vw;}
.tab li.current {background: var(--gold);}
.tab li.current a { color:#fff;}
.tab li.current:after {content: "\f107";font-family: icon;color: #fff;position: absolute;top: 70%;left: 50%;-moz-transform: translateX(-50%);-ms-transform: translateX(-50%);-webkit-transform: translateX(-50%);transform: translateX(-50%);}
.tab li a {padding: 2.4vw 2vw 4vw;font-size: 3.4vw;line-height: 1.2;display: table-cell;vertical-align: middle;}
.tab li span {font-weight: 400;font-size: 3vw;display: block;}
.tab li:after {content: "\f107";font-family: icon;color:#342d34;position: absolute;top: 60%;left: 50%;top: 70%;left: 50%;-moz-transform: translateX(-50%);-ms-transform: translateX(-50%);-webkit-transform: translateX(-50%);transform: translateX(-50%);}
.tab li:hover { opacity: 0.8;}
.tab li.current:hover a { color:#000;}
.tab li.current:hover:after { color:#000;}

.price_midashi{text-align: center;margin: 0 auto 4vw;font-size: 6vw;color: var(--gold);line-height: 1.4; font-family: var(--mincho);font-weight: 600;}
.intro{margin: 0 auto 6vw;}

.price-wrap{margin: 10vw auto;}
.price {margin-bottom:15vw;}
.price .subtit{background:var(--black);color:#fff;font-weight:bold;padding:2% 4%;margin-bottom:0;line-height: 1.4;}
.price .subtit span{font-size:80%;display: block; line-height: 1.4;margin-top:2%;}
.price .listitem >li{margin-bottom: 5vw;} 
.price .items li{padding: 0 3%;line-height: 2.4;text-align: right;}
.price .items li:nth-last-child(1){border:none;}
.price .items span{font-size:88%;}
.price .items b{font-size:130%;display: inline-block;margin: 0 0.5vw;}
.price .items .monitor{background: #fff1f1;color: #e72e2e;line-height: 1.4;padding: 2% 3%;}
.price .items .set{background: #fff2f1;color: #e72e2e;line-height: 1.4;padding: 2% 3%;border-bottom: 1px dashed #ccc;}



/* ============================================= 
pc
================================================*/
@media screen and (min-width: 736px) { 

/* tab
----------------------------------------------- */
.tab {margin: 0 auto 30px;}
.tab:after {content: "";width:49.5%; }
.tab li {margin-bottom: 12px;width: 23%;min-height: 73px;margin: 5px 0.5%;}
.tab li a {padding: 12px 10px 20px;font-size: 18px;line-height: 1.3;}
.tab li span {font-size: 13px;}
.tab li:after {content: "\f107";font-family: icon;color:#342d34;position: absolute;top: 70%;}
.tab li.current:after {top: 60%;}


.price_midashi{font-size: 30px;margin: 0 auto 20px;}
.intro{margin: 0 auto 60px;}
.intro p{text-align: center;}

.price-wrap{margin: 80px auto;}
.price {margin-bottom: 60px;}
.price .subtit{padding:10px 20px;}
.price .items li{padding: 0 20px;}

}

@media screen and (min-width: 1000px) {

.price-wrap{margin: 80px auto;}
.price .listitem >li{display: -webkit-box;display: -webkit-flex;display: flex;-webkit-flex-wrap: wrap;flex-wrap: wrap;-webkit-justify-content: space-between;justify-content: space-between;align-items: center;margin-bottom: 7px;border: 1px solid #ccc;background: #555;background: linear-gradient(90deg, #555 0%, #555 25%, #FFFFFF 25%, #FFFFFF 50%, #FFFFFF 50%, #fff2f1 50%, #fff2f1 75%, #FFF2F1 75%, #FFF2F1 100%);}
.price .subtit{width:25%;background: no-repeat;text-align: left;}
.price .listitem .items{width:75%;display: -webkit-box;display: -webkit-flex;display: flex;-webkit-flex-wrap: wrap;flex-wrap: wrap;-webkit-justify-content: end;justify-content: end;background: #fff;}
.price .listitem .items li{width: calc(100%/3);background: #fff;border: none;line-height: 1.4;padding: 17px 10px;text-align: center;border-right: 1px solid #ccc;}
.price .listitem .items li:nth-last-child(1){border:none;}
.price .items b{margin:0;}
.price .listitem .items i{display:block;background: #e6e6e6;width: 80%;margin: 0 auto;border-radius: 30px;}
.price .listitem .items li.set{background: #fff2f1;}
.price .listitem .items li.monitor{background:#fff1f1;}
.price .listitem .items li.set i{background: #e73031;color:#fff;}
.price .listitem .items li.set i.w100{width: 100%;}
.price .listitem .items li.set i span{font-size: 80%;}
.price .listitem .items li.monitor i{background:#e73030;color:#fff;}

}