.product-card-background { background-color: white; padding-top: 20px; padding-bottom: 40px; } .product-card-background-blue { background-color: #eaeef5; } .product-card-background-orange { background-color: #fdf1f1; } .product-card-big-title { width: 43%; margin: 0 auto -30px; } .product-card-h2 { display: flex; justify-content: space-evenly; text-align: center; } .product-card-h2 img { margin-top: 12px; width: 25px; height: 25px; } .product-card-h2 h2 { font-size: 30px; padding-left: 20px; padding-right: 20px; } .product-card-frame { max-width: 1200px; margin: 0 auto; } .product-card-banner { margin: 20px 0 auto; } .product-card-banner-pc { display: block; } .product-card-banner-sp { display: none; } .product-card-banner img { width: 100%; max-width: 1200px; } .product-card-content { display: flex; justify-content: space-between; margin-bottom: 40px; } .product-card { width: 48%; display: block  !important; } .product-card-series-title { margin-left: 5px; display: flex; font-size: 32px; font-weight: bold; } .product-card-series-title-decoration { margin-right: 10px; margin-bottom: 18px; width: 18px; } .product-card-series-title-decoration-blue { border-bottom: 8px solid #294295; } .product-card-series-title-decoration-purple { border-bottom: 8px solid #7a126b; } .product-card-slogan { margin-top: 5px; margin-left: 20px; margin-bottom: 15px; padding-top: 5px; padding-bottom: 5px; width: 260px; color: white; font-size: 18px; font-weight: bold; text-align: center; border-radius: 15px; } .product-card-slogan-blue { background-color: #294e95; } .product-card-slogan-purple { background-color: #7a126b; } .product-card-slogan-middle { width: 320px; } .product-card-slogan-long { width: 520px; } .product-card-detail-background { padding: 15px 15px; background-color: white; border-radius: 10px; } .product-card-detail-background-orange { background-color: #fdf1f1 } .product-card-title { font-size: 18px; font-weight: bold; margin-bottom: 10px; } .product-card-1 { display: flex; min-height: 180px; } .product-card-hero-img-content { width: 38%; position: relative; } .product-card-hero-img { width: 80%; display: block; margin: 15px auto 0; } .product-card-point { height: 55px; width: 55px; position: absolute; top: 5px; left: 15px; } .product-card-spec { width: 60%; padding-right: 40px; } .product-card-spec-message { display: flex; justify-content: space-between; margin-bottom: 3px; position: relative; } .product-card-spec-button { padding: 3px 15px 3px; background-color: #323232; color: white; font-size: 12px; font-weight: bold; text-align: center; border-radius: 10px; } .product-card-spec-txt { font-size: 14px; text-align: left; } .product-card-spec-txt-good { font-weight: bold; } .product-card-good { height: 18px; width: 47px; position: absolute; top: 2px; right: -50px; } .product-card-2 { margin-top: 10px; } .product-card-spec-background { display: none; background-color: #f3f3f3; padding: 10px 25px; } .product-card-spec-background-orange { background-color: #f3dcdcdc; } .product-card-price-message { display: flex; justify-content: space-between; margin-bottom: 3px; } .product-card-price-name { font-size: 14px; font-weight: bold; width: 20%; text-align: left; } .product-card-price-line { width: 60%; margin-bottom: 10px; border-bottom: 1px solid #aba8b1 } .product-card-price-number { font-size: 16px; font-weight: bold; width: 20%; text-align: right; } .product-card-control { margin-top: 10px; margin-bottom: 20px; cursor: pointer; display: flex; justify-content: flex-end; font-size: 20px; font-weight: bold; } .product-card-control img { margin: 8px 10px 0 8px; width: 15px; height: 15px; } .product-card-2-active .product-card-spec-background { display: block; } .product-card-2-active .product-card-control img { transform: rotate(180deg); -ms-transform: rotate(180deg); -moz-transform: rotate(180deg); -webkit-transform: rotate(180deg); -o-transform: rotate(180deg); } .product-card-3 { display: flex; justify-content: space-between; margin-bottom: 10px; } .product-card-discounts { margin-left: 20px; font-size: 24px; font-weight: bold; } .product-card-discounts-price { margin-top: -10px; margin-right: 20px; font-size: 20px; font-weight: bold; } .product-card-discounts-price span { color: #b8252e; font-size: 32px; } .product-card-4 { display: flex; justify-content: space-between; } .product-card-4 a { text-decoration: none; } .product-card-final-price { font-size: 20px; margin-left: 20px; font-weight: bold; } .product-card-final-price span { font-size: 32px; } .product-card-cto-button { margin-top: 10px; margin-right: 20px; height: 60px; padding: 15px 30px; background-color: #871c23; color: white; font-size: 20px; font-weight: bold; text-align: center; border-radius: 10px; } .product-card-long-button { width: 50%; margin: 0 auto; } .product-card-long-button a { text-decoration: none; } .product-card-long-button div { padding-top: 10px; border-radius: 10px; height: 48px; color: white; font-weight: bold; font-size: 20px; text-align: center; margin: 0 auto; background-image: url(https://p2-ofp.static.pub/ShareResource/JPResource/JP-Images/content-page/campaign-index/btn-bg.png); background-repeat: no-repeat; background-size: 100%; } .br-sp { display: none; } .other-cto { text-align: center; padding: 5px 20px; margin: 0 auto; width: 230px; background-color: #294e95; color: white; font-weight: bold; font-size: 20px; border-radius: 10px; margin-top: 20px; margin-bottom: 40px; } .product-card-big-title a { text-decoration: none; } @media screen and (max-width: 1200px) { .br-sp { display: block; } .product-card-big-title { width: 90%; } .product-card-h2 h2 { font-size: 22px; } .product-card-h2 img { margin-top: 16px; } .product-card-banner { margin: 40px auto 10px; } .product-card-banner-sp { display: block; } .product-card-banner-pc { display: none; } .product-card-content { display: block; } .product-card-slogan-long { width: 260px; } .product-card { width: 98%; margin: 0 auto; } .product-card:nth-child(2) { margin-top: 30px; } .product-card-detail-background { padding: 20px 15px; } .product-card-title { font-size: 16px; } .product-card-series-title { font-size: 26px; } .product-card-series-title-decoration { margin-bottom: 13px; } .product-card-1 { display: block; } .product-card-hero-img-content { width: 90%; margin: 0 auto; } .product-card-point { height: 70px; width: 70px; top: -10px; left: 25px; } .product-card-spec { width: 80%; margin: 20px auto 0; } .product-card-price-name { font-size: 12px; width: 35%; } .product-card-price-line { margin-bottom: 7px; width: 45%; } .product-card-price-number { width: 20%; font-size: 14px; } .product-card-control { margin-top: 15px; margin-bottom: 15px; font-size: 18px; } .product-card-control img { margin: 6px 10px 0 5px; } .product-card-3 { margin-bottom: 10px; } .product-card-discounts { margin-left: 8px; font-size: 20px; } .product-card-discounts-price { margin-top: -8px; font-size: 18px; } .product-card-discounts-price span { font-size: 26px; } .product-card-final-price { font-size: 18px; margin-left: 5px; } .product-card-final-price span { font-size: 26px; } .product-card-cto-button { font-size: 18px; padding: 10px 15px; height: 50px; } .product-card-long-button { width: 95%; } .product-card-long-button div { padding-top: 7px; font-size: 16px; } }