@charset "utf-8";
body{background-color:#fff;}
.details {width: 1200px;margin: 0 auto;}
img{max-width: 100%;}

.main01 {padding: 40px 0 77px;background-color: #f4f4f4;margin-top: 71px;}
.main01 h1 {font-size: 50px;color: #000;line-height: 1.1em;font-weight: 600;text-align: center;}
.main01 .img-wrap {text-align: center;padding: 10px 0 20px;}
.main01-icons {display: flex;justify-content: center;align-items: center;flex-wrap: wrap;padding-top: 30px;}
.main01-icon {display: flex;align-items: center;font-size: 17px;color: #9d9d9d;line-height: 1em;margin: 0 10px 20px;}
.main01-icon::before {content: "";width: 18px;height: 22px;background: url(../images/buy-jp-new/main01-icons.png) no-repeat left center;margin-right: 5px;}
.main01-icon:nth-child(2):before {width: 19px;background-position-x: -34px;}
.main01-icon:nth-child(3):before {width: 19px;background-position-x: -70px;}
.main01-icon:nth-child(4):before {width: 20px;background-position-x: right;}
.main01-toggle-wrap {display: flex;justify-content: center;align-items: center;padding-top: 38px;height: 33px;}
.main01-left-toggle {font-size: 22px;color: #000;font-weight: 600;padding-right: 35px;border-right: 2px solid #e0e0e0;margin-right: 35px;}
.main01-right-toggle{font-size: 15px;color: #0095ff;font-weight: 600;text-decoration: underline;text-underline-position: under;cursor: pointer;}
.main01-left-win::before,.main01-left-mac::before,
.main01-right-win::before,.main01-right-mac::before {content: "";display: inline-block;vertical-align: middle;width: 25px;height: 25px;background: url(../images/buy-jp-autumn-23/win-mac.png) no-repeat left top;margin: 0 12px 4px 0;}
.main01-left-mac::before {width: 22px;height: 28px;background-position-y: bottom;margin-bottom: 10px;}
.main01-right-win::before {width: 20px;background-position: right bottom;}
.main01-right-mac::before {width: 22px;height: 22px;background-position: right top;}

.main-banner{background: url(../images/buy-jp-anni-24/bg1.jpg) no-repeat center/cover; height: 393px;text-align: center; margin-top: 70px;}
.main-banner .txt{padding:60px 0 0;}
.main-banner .digiarty-timer{font-size: 28px; padding-top:235px; display: flex;justify-content: center;color: #fff;align-items: center;margin: 0;line-height: 1;}
.main-banner .digiarty-timer li{border: 1px solid;width: 52px;padding: 5px 0;font-weight: 700; margin: 0 10px;}
.main-banner .digiarty-timer li::after{display: block;content: attr(data-words);font-size: 15px;line-height: 1.2;}

.main02-title{text-align: center;}
.main02-box{ margin: 0 auto;display: inline-block;background: #fff;border-radius: 8px;position: relative;top: -76px;}
.main02-box h1{font-size: 40px;line-height: 1;padding: 22px 65px 25px;}
.main02-box .sys-box span, .main01-right-win{cursor: pointer;color:#0095ff; text-decoration: underline;text-underline-position:under;}
.main02 {/*border-top: 1px solid #F4871E;*/color: #000;padding-bottom: 45px;}
/*.main02.has-padding {padding-top: 80px;}*/
.main02-toggle {width: 357px;height: 58px;box-sizing: border-box;padding: 7px;background-color: #ffe1ac;border-radius: 29px;margin: -29px auto 50px;position: relative;display: flex;justify-content: space-between;}
.main02-toggle.just-one {width: 177px;}
.main02-left-toggle,.main02-right-toggle {width: 170px;line-height: 44px;border-radius: 22px;font-size: 20px;text-align: center;font-weight: 600;/*! color: #fff; */cursor: pointer;position: relative;}
.main02-left-toggle:not(.active):hover,.main02-right-toggle:not(.active):hover {background-color: rgba(255 255 255 / .3);}
.main02-left-toggle.active,.main02-right-toggle.active {color: #FF4343;background-color: #fff;}
.limit-tag {position: absolute;top: -24px;right: -5px;}
.follow-content1, .follow-content2 {display: flex;justify-content: center;flex-wrap: wrap;}
.follow-card {width: 369px;box-sizing: border-box;border: 1px solid #C7C7C7;border-radius: 9px;position: relative;background-color: #fff;margin: 0 46px 46px 0;}
.follow-content2 .follow-card {margin: 0 50px 46px;}
.follow-content1 .follow-card:last-child,.follow-content1 .follow-card.no-margin {margin-right: 0;}
.follow-card.yellow-bg {background:url(../images/buy-jp-anni-24/buy-bg.png) no-repeat bottom / contain, #FFD2C2;border: solid #FF9C9A;}
.follow-card.large-card {width: 424px;}
.card-top {text-align: center;padding: 38px 10px 0;}
.card-tag {width: 127px;line-height: 40px;font-size: 16px;color: #fff;background-color: #ED5952;font-weight: 600;border-radius: 5px;position: absolute;top: -20px;left: 50%;margin-left: -64px;}
.card-h3 {font-size: 27px;line-height: 1.1em;font-weight: 600;}
.card-title-bottom {font-size: 17px;line-height: 1em;padding: 20px 0 5px;}
.card-top .img-wrap {height: 62px;}
.card-top .img-wrap img {max-height: 100%;}
.product-info {font-size: 17px;color: #676767;line-height: 1.6em;margin: 6px 0;}
.card-select {display: flex;justify-content: center;align-items: center;font-size: 21px;color: #666;line-height: 1em;}
.card-select-button {width: 47px;height: 22px;border: 2px solid #333;border-radius: 13px;margin: 0 12px;cursor: pointer;}
.card-select-button::before {content: "";display: block;width: 18px;height: 18px;background-color: #0280df;border-radius: 50%;margin: 2px;transition: all 0.2s;}
.card-select-button.active::before {margin: 2px 2px 2px auto;}
.card-price {display: flex;flex-direction: column;align-items: center;}
.card-price1 {font-size: 19px;line-height: 1em;margin: 21px 0 14px;}
.follow-content2 .card-price1 {font-size: 21px;color: #666;margin: 0;line-height: 26px;}
.card-price1.line-through {text-decoration: line-through;}
.card-price2 {font-size: 48px;color: #ff5858;line-height: 1em;}
.yellow-bg .card-price2 {color: #ee3131;}
.card-price2 i {font-size: 27px;font-style: normal;}
.card-price3 {font-size: 21px;color: #666;line-height: 1em;margin: 12px 0 25px;}
.card-other-price {font-size: 40px;line-height: 1em;color: #ff5858;display: flex;justify-content: center;align-items: center;margin: 28px 0 20px;}
.card-other-price.other-margin {margin: 5px 0 9px;}
.card-other-price span {font-size: 19px;line-height: 1.3em;color: #ff5858;margin-left: 10px;}
.card-other-price span del {font-size: 13px;color: #989898;display: block;line-height: 1em;}
.buy-button {display: block;width: 205px;line-height: 52px;font-size: 23px;color: #fff;background-color: #FE9940;border-radius: 5px;margin: 0 auto;}
.yellow-bg .buy-button {background-color: #F3522E;}
/* .buy-button:last-child {background-color: #FEA85A;} */
/* .yellow-bg .buy-button:last-child {background-color: #FE8A4C;} */
.buy-button:hover {color: #fff}
.card-p {font-size: 17px;color: #5b5b5b;line-height: 1em;margin: 10px 0 20px;}
.card-bottom {margin: 0 35px 27px;border-top: 1px solid #e8e8e8;padding-top: 5px;}
.yellow-bg .card-bottom {border-color: #F6C4A1;}
.card-bottom li,.card-bottom-title,.card-bottom-gift {font-size: 15px;color: #666;line-height: 1.1em;margin-top: 18px;padding-left: 30px;position: relative;}
.card-bottom li::before {content: "";width: 5px;height: 10px;border-bottom: 2px solid #f99830;border-right: 2px solid #f99830;transform: rotate(45deg);position: absolute;top: 2px;left: 10px;}
.yellow-bg .card-bottom li::before {border-color: HSL(8, 100%, 65.6%);}
.card-bottom-title,.card-bottom-gift {padding-left: 0;}
.cards-info {font-size: 17px;color: #737373;line-height: 1.2em;text-align: center;}
.cards-info a,.buy-infos p a {color: #000;text-decoration: underline;text-underline-position: under;}
.payments {font-size: 17px;color: #333;line-height: 1.3em;text-align: center;margin: 15px 0;}
.payments img {margin-left: 6px;}
.buy-infos li {padding-top: 25px;}
.buy-infos h4 {font-size: 21px;color: #000;line-height: 1em;font-weight: 500;}
.buy-infos p {font-size: 15px;color: #737373;line-height: 1.6em;padding-top: 6px;}
.buy-infos p a {color: #000;}

.main03 {padding: 45px 0 90px;color: #000;}
.main03-h2 {font-size: 36px;line-height: 1em;font-weight: 600;text-align: center;margin-bottom: 70px;}
.table-content {width: 100%;border-radius: 24px;/* overflow: hidden; */}
.table-tr1 {display: none;}
.table-tr1.active {display: block;}
.table-tr2 {display: flex;}
.table-content>.table-tr2:first-child {border-top: none;}
.table-th {font-size: 23px;line-height: 1em;font-weight: 600;text-align: center;padding: 27px 0;box-sizing: border-box;position: relative;}
.table-th:first-child {width: 50%;padding-left: 60px;text-align: left;}
.table-th:nth-child(2) {z-index: 1;}
.table-th:nth-child(2),.table-td:nth-child(2) {width: 25%;border-top: 3px solid #fff;}
.table-th:nth-child(3),.table-td:nth-child(3) {width: 25%;border-left: 4px solid #ffb71c;border-right: 4px solid #ffb71c;}
.table-tag {font-size: 36px;color: #ff7536;font-weight: bold;position: absolute;top: 50%;right: 0;transform: translate(50%,-50%);}
.table-td {width: 50%;box-sizing: border-box;font-size: 15px;color: #737373;line-height: 1.5em;padding: 16px 10px;border-top: 1px solid #fff;}
.table-td:nth-child(2) ,.table-td:nth-child(3) {border-top: none;text-align: center;display: flex;justify-content: center;align-items: center;}
.table-td:not(.colspan2):first-child {padding-left: 33px;}
.table-td.colspan2 {width: 75%;font-size: 19px;color: #1e1e1e;line-height: 1em;padding: 18px 10px 18px 60px;position: relative;cursor: pointer;background-color: #fff7e9;border-radius: 5px;}
.table-td.colspan2::before {content: "";width: 0;height: 0;border-top: 10px solid transparent;border-left: 12px solid #000;border-bottom: 10px solid transparent;position: absolute;top: 50%;left: 30px;margin-top: -5px;transition: all 0.2s;}
.table-td.colspan2.active::before {transform: rotate(90deg);}
.no-icon,.yes-icon {display: flex;justify-content: center;align-items: center;width: 100%;height: 100%;min-height: 24px;position: relative;}
.no-icon::before,.no-icon::after {content: "";width: 5px;height: 26px;background-color: #808080;position: absolute;top: 50%;left: 50%;margin: -13px 0 0 -2px;transform: rotate(45deg);}
.no-icon::after {transform: rotate(-45deg);}
.yes-icon::before {content: "";width: 9px;height: 19px;border-bottom: 4px solid;border-right: 4px solid;position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%) rotate(45deg);color:#ffba15;}
.table-title{position: sticky;top: 70px;background: #fff;z-index: 2;}
.table-title var{font-style: normal;line-height: 54px;display: block;}
.table-title a{color: #ffb71c;font-size: 17px;font-weight: normal;display: inline-block;padding: 0 40px; margin: 15px 0 0; border: 2px solid #ffb71c;border-radius: 25px;line-height: 50px;}
.table-th2{padding-top: 0;}
.table-th3 var{background: #ffb71c;display: block;color: #fff;}
.table-title .table-th3 a{background: #ffb71c; color: #fff;}
.table-title .table-th3{padding: 0;border-top: 3px solid #ffb71c;border-radius: 8px 8px 0 0;}
.table-td-last{width: 25%;border-left: 4px solid #ffb71c;border-right: 4px solid #ffb71c; background: #fff7e9;box-sizing: border-box;}
.table-content .table-td-last-bottom{border-bottom: 4px solid #ffb71c;border-radius: 0 0 8px 8px;}
.table-tr2 .active+.table-td-last-bottom{border-bottom:none;border-radius: 0;}
.table-right-last{border-bottom: 4px solid #ffb71c;border-radius: 0 0 8px 8px;}

.main04 {padding: 60px 0 65px;color: #000;}
.main04 h2 {font-size: 36px;line-height: 1.1em; text-align: center;padding-bottom: 40px;}
.main04 h3 {font-size: 21px;line-height: 1.1em;display: flex;align-items: center;justify-content: space-between;cursor: pointer;color: #000;font-weight: bold;}
.main04 h3::after{content: "";display: inline-block;width: 21px;height: 21px;color: #000;background: linear-gradient(to bottom,currentColor,currentColor) no-repeat center /21px 3px,linear-gradient(to bottom,currentColor,currentColor) no-repeat center/3px 21px;}
.main04 p {font-size: 15px;line-height: 1.7em;color: #737373;margin-top: 10px;}
.main04 .small-font {padding-top: 30px;}
.main04 .small-font p {font-size: 13px;line-height: 1.8em;}
.ques-one {border:2px solid #e1e1e1;padding: 30px;margin-bottom: 25px;}
.ques-one p{display: none;}
.ques-one.focus p{display: block;}
.ques-one.focus h3::after{cursor: pointer;background: linear-gradient(to bottom,currentColor,currentColor) no-repeat center/21px 3px;}

.main05 {padding: 60px 0 65px;background: #f4f2ef url(../images/buy-jp-new/bg4.jpg) no-repeat center/cover;color: #000;}
#ques_box{background: none;}
.main05 h2 {font-size: 36px;line-height: 1.1em;}
.main05 h3 {font-size: 21px;line-height: 1.1em;margin-top: 24px;}
#ques_box h2{text-align: center;padding-bottom: 40px;}
#ques_box h3{display: flex;align-items: center;justify-content: space-between;cursor: pointer;color: #000;font-weight: bold; margin-top: 0;}
#ques_box h3::after{content: "";display: inline-block;width: 21px;height: 21px;color: #000;background: linear-gradient(to bottom,currentColor,currentColor) no-repeat center /21px 3px,linear-gradient(to bottom,currentColor,currentColor) no-repeat center/3px 21px;}
.main05 p {font-size: 15px;line-height: 1.7em;color: #737373;margin-top: 10px;}
.main05 .small-font {padding-top: 30px;}
.main05 .small-font p {font-size: 13px;line-height: 1.8em;}
.ques-one {border:2px solid #e1e1e1;padding: 30px;margin-bottom: 25px;}
.ques-one p{display: none;}
.ques-one.focus p{display: block;}
.ques-one.focus h3::after{cursor: pointer;background: linear-gradient(to bottom,currentColor,currentColor) no-repeat center/21px 3px;}

.sideRight{position: fixed;right: 30px;top: 350px;display:none;z-index: 3;}
.sideRight .close{text-align:right;font-size: 30px; }
.sideRight .close span{cursor: pointer;}

@media (max-width: 979px) {
	.details {width: 96%;}

	.follow-card,.follow-content1 .follow-card:last-child,.follow-content2 .follow-card {margin: 0 20px 46px;}
}

@media (max-width: 767px) {
	.main01 h1 {font-size: 35px;}
	
	.main02-box h1{font-size: 33px;}
	.table-title a{padding: 0 5px;font-size: 13px;line-height: 25px;}
	

	.follow-card,.follow-content1 .follow-card:last-child,.follow-content2 .follow-card {margin: 0 0 46px;}

	.table-th:first-child {padding-left: 30px;}
	.table-td.colspan2 {padding-left: 45px;}
	.table-td.colspan2::before {left: 15px;}
	.table-td:not(.colspan2):first-child {padding-left: 20px;}
	.table-tag {display: none;}
}

@media (max-width: 479px) {
	.main01-left-toggle {padding-right: 10px;margin-right: 10px;}
	
	.table-title a{white-space: nowrap;}
	.table-title a img{display: none;}

	.main02-toggle {width: 330px;}
	.main02-left-toggle, .main02-right-toggle {width: 150px;}
	.follow-card,.follow-card.large-card {width: 100%;}

}