@charset "utf-8"; @import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&family=Mona+Sans:ital,wght@0,200..900;1,200..900&family=Noto+Sans+JP:wght@100..900&display=swap'); .font-noto { font-family: "Noto Sans JP", serif; } .font-lato { font-family: "Lato", serif; } .font-mona-sans { font-family: "Mona Sans", serif; } * { margin: 0; padding: 0; } *, ::before, ::after { border-style: solid; box-sizing: border-box; border-width: 0; } html { scroll-behavior: smooth; } body { min-height: 100vh; line-height: 1.5; text-rendering: optimizeSpeed; font-weight: 400; color: #242424; } .main_content ul{ list-style: none; } .main_content ol { list-style: none; } .main_content a { color: inherit; background-color: transparent; text-decoration: none; text-decoration-skip-ink: auto; } .main_content table { border-collapse: collapse; } html { font-size: 1.4134275618vw; } @media screen and (max-width: 750px) { html { font-size: 16px; } } @media (min-width: 1132px) { html { font-size: 16px; } } @media screen and (max-width: 375px) { html { font-size: 4.2666666667vw; } } a, button { cursor: pointer; transition: all .3s; } .flex_center { display: flex; justify-content: center; align-items: center; } .innerbox_1200 { max-width: calc(1200px + 2rem); margin: 0 auto; padding: 0 1rem; } .innerbox_1100 { max-width: calc(1100px + 2rem); margin: 0 auto; padding: 0 1rem; } .innerbox_1024 { max-width: calc(1024px + 2rem); margin: 0 auto; padding: 0 1rem; } .innerbox_960 { max-width: calc(960px + 2rem); margin: 0 auto; padding: 0 1rem; } .innerbox_768 { max-width: calc(768px + 2rem); margin: 0 auto; padding: 0 1rem; } .innerbox_640 { max-width: calc(640px + 2rem); margin: 0 auto; padding: 0 1rem; } .innerbox_520 { max-width: calc(520px + 2rem); margin: 0 auto; padding: 0 1rem; } .innerbox_480 { max-width: calc(480px + 2rem); margin: auto; padding: 0 1rem; } .innerbox_375 { max-width: calc(375px + 2rem); margin: 0 auto; padding: 0 1rem; } body { overflow-x: hidden; } #scidpad{ font-family: "Noto Sans JP", serif; } .mn_title{ color:#e1251b; font-size:2.5rem; border-bottom:2px solid #e1251b; display:inline-block; padding-left:5rem; } .mn_title .ld{ font-size:1.6rem; } @media screen and (max-width: 750px) { .mn_title{ color:#e1251b; font-size:1.7rem; padding-left:2rem; margin-left:-1rem; } .mn_title .ld{ font-size:1rem; } } .btn.flex_center { position: relative; color: #fff; background: linear-gradient(90deg, rgba(238,131,125,1) 0%, rgba(225,37,27,1) 100%); border-radius: 2.625rem; font-size: 1.25rem; font-weight: 700; transition: all .3s; box-shadow: 3px 3px 6px 0px rgba(0, 0, 0, .2); padding-right:1em; } @media screen and (max-width: 750px) { .btn.flex_center { font-size: .9rem; } } .btn.flex_center img.arrow { position: absolute; width: 3rem; height: 3rem; right: .5rem; top: 50%; transform: translateY(-50%); -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transition: all .3s; } @media screen and (max-width: 750px) { .btn.flex_center img.arrow { width: 2.25rem; height: 2.25rem; right: .35rem; } } .btn.flex_center:hover { background-color: #242424; opacity: 1; } @media screen and (max-width: 750px) { .btn.flex_center:hover { color: #fff; background-color: #242424; } } .btn.flex_center:hover img.arrow { right: .2rem; } @media screen and (max-width: 750px) { .btn.flex_center:hover img.arrow { right: .1rem; } } .buy_btn { width: 22.5rem; height: 4rem; margin: 0 auto 0; } @media screen and (max-width: 750px) { .buy_btn { width: 15.625rem; height: 3rem; } } .top_button_wrapper { flex-direction: column; align-items: center; width: 46.875rem; height: 10rem; border: 2px solid #242424; box-shadow: 5px 5px 0 #242424; border-radius: 1.25rem; margin: 0 auto; background-color: #fff; } @media screen and (max-width: 750px) { .top_button_wrapper { width: 90%; margin:0 auto; height: 8rem; border: 1px solid #242424; box-shadow: 3px 3px 0 #242424; border-radius: .625rem; } } .top_button_wrapper .red_text { font-size: 2rem; color: #d9000a; margin-bottom: .625rem; } @media screen and (max-width: 750px) { .top_button_wrapper .red_text { font-size: 1.5rem; } } @media screen and (max-width: 750px) { .top_button_wrapper .flex_center { flex-direction: column; } } .top_button_wrapper .flex_center .tbwrapper_text { font-size:1.6rem; font-family: "Mona Sans", serif; width: 16.3525rem; margin-right: 1rem; } .top_button_wrapper .flex_center .tbwrapper_text .sml{ font-size:1rem; } @media screen and (max-width: 750px) { .top_button_wrapper .flex_center .tbwrapper_text { font-size:1.4rem; margin:0 auto; text-align:center; } .top_button_wrapper .flex_center .tbwrapper_text .sml{ font-size:.8rem; } } .top_button_wrapper .flex_center .tbwrapper_btn { width: 22.5rem; height: 4rem; } @media screen and (max-width: 750px) { .top_button_wrapper .flex_center .tbwrapper_btn { width: 16.5rem; height: 3rem; margin-top: 1vw; } } #side_banner { display: none; position: fixed; right: 0; line-height: 1; z-index: 10; } @media screen and (min-width: 750px) { #side_banner { top: 50%; transform: translateY(-50%); } } @media screen and (max-width: 750px) { #side_banner { bottom: 75px; } .StickyTeaser { display: none  !important; } } #side_banner a { display: block; } #side_banner a:hover { transition: .3s ease all; opacity: .7; } #side_banner a img { height: auto; } @media screen and (min-width: 750px) { #side_banner a img { width: 184px; } } @media screen and (max-width: 750px) { #side_banner a img { width: 130px; } } #side_banner_bt_label { width: 30px; height: 30px; border-radius: 100%; background-color: #fff; position: absolute; display: flex; justify-content: center; align-items: center; line-height: 1; top: -10px; left: -10px; } #side_banner_bt_label_img .sidetxt{ color:#fff; font-size:15px; writing-mode: vertical-rl; -ms-writing-mode: tb-rl; position:absolute; top:1.35rem; left:.8rem; } @media screen and (max-width: 750px) { #side_banner_bt_label_img .sidetxt{ font-size:.65rem; top:1.4rem; left:.5rem; } } #side_banner_bt_label_img .lnktxt{ background:#e1251b; border-radius:1.25rem; padding:.5rem .8rem .5rem .8rem; color:#fff; font-size:clamp(0.7rem, 0vw, .8rem); position:absolute; bottom: .8rem; right: .8rem; letter-spacing:-0.08rem; } #side_banner_bt_label_img .lnktxt:after{ content:''; background-size:100% auto; width:.8rem; height:.8rem; display:block; position:absolute; top:50%; right:.3rem; transform: translateY(-50%); -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transition: all .3s; } @media screen and (max-width: 750px) { #side_banner_bt_label_img .lnktxt{ padding:.5rem 1rem .5rem .5rem; font-size:clamp(0.5rem, 1vw, .6rem); bottom:.5rem; right:2vw; } #side_banner_bt_label_img .lnktxt:after{ width:.5rem; height:.5rem; } } #side_banner_bt_label:hover { cursor: pointer; } #side_banner_bt_label img { line-height: 1; width: 50%; height: auto; } #side_banner_bt:checked~#side_banner_bt_label_img, #side_banner_bt:checked~#side_banner_bt_label { display: none  !important; } section#main_header { margin-bottom: .8125rem; box-shadow: 0px 3px 10px 0px rgba(0, 0, 0, .4); } section#main_header .innerbox_1100 { display: flex; justify-content: space-between; align-items: center; } @media screen and (max-width: 750px) { section#main_header .innerbox_1100 { flex-wrap: wrap; padding-bottom:.5rem; } } section#main_header .main_header__left { display: flex; align-items: center; margin-top: -0.5rem; } @media screen and (max-width: 750px) { section#main_header .main_header__left { justify-content: center; width: 100%; } } section#main_header .main_header__left .logo_image { width: 14.375rem; height: auto; aspect-ratio: 230/93; } @media screen and (max-width: 750px) { section#main_header .main_header__left .logo_image { width: 9.5625rem; margin-left: -1.25rem; } } section#main_header .main_header__left .logo_text { width: 20rem; height: auto; aspect-ratio: 1447/138; margin-top: .25rem; } @media screen and (max-width: 750px) { section#main_header .main_header__left .logo_text { width: 12.6875rem; font-size:.6rem; } } section#main_header .main_header__right { display: flex; align-items: center; } @media screen and (max-width: 750px) { section#main_header .main_header__right { justify-content: center; width: 100%; } } section#main_header .main_header__right .logo_text { width: 16rem; height: auto; font-size:.8rem; } @media screen and (max-width: 750px) { section#main_header .main_header__right .logo_text { width: 11.4375rem; margin-top: .125rem; margin-left: .8125rem; font-size:.6rem; } } section#main_header .main_header__right .logo_image { width: 8.175rem; height: auto; aspect-ratio: 143/110; padding: 1rem 0 .875rem .875rem; margin-left: 1.5625rem; } @media screen and (max-width: 750px) { section#main_header .main_header__right .logo_image { width: 5.1875rem; padding: 0; margin-left: 1.875rem; aspect-ratio: 81.93/49.58; } } section#kv { position: relative; z-index: 400; } .slideshow-container { } .fade { animation-name: fade; animation-duration: .5s; } @keyframes fade { from {opacity: .9} to {opacity: 1} } section#kv .kv-pc { width: 100%; } section#kv .txt { position:absolute; top:30%; left:5%; } @media screen and (max-width: 760px) { section#kv .txt { position:absolute; top:5%; left:5vw; } } section#kv .txt .lead{ font-size:clamp(2.5rem, 4vw, 7rem); color:#fff; display:inline-block; line-height:1.2; font-weight:900; letter-spacing:.4rem; } @media screen and (max-width: 760px) { section#kv .txt .lead{ font-size:clamp(1rem, 6vw, 4rem); letter-spacing:0; } } section#kv .txt .lead.usesp{ display:none; } section#kv .txt .lead.usepc{ display:block; } @media screen and (max-width: 760px) { section#kv .txt .lead.usesp{ display:block; } section#kv .txt .lead.usepc{ display:none; } } section#kv .txt .lead .ld{ background:rgba(225, 37, 27, .8); color:#fff; padding:.5rem .3rem; margin:.5rem 0; display:inline-block; } @media screen and (max-width: 760px) { section#kv .txt .lead .ld{ background:rgba(225, 37, 27, 1); margin:1vw 0; } } section#kv .txt .hash{ font-size:clamp(0.8rem, 2.2vw, 3rem); font-weight:600; padding-top:2rem; line-height:1.8; } @media screen and (max-width: 760px) { section#kv .txt .hash{ padding-top:2vw; } } section#kv .kv-tl{ font-size:clamp(1.7rem, 6vw, 11rem); font-weight:300; position:absolute; bottom:0; left:3%; } section#kv .kv-tl .sml{ font-size:clamp(0.9rem, 3vw, 2rem); font-weight:300; } section#overview { overflow: hidden; } section#overview .overview_inner { position: relative; padding-top: 3.5rem; padding-bottom: 6.5625rem; } @media screen and (max-width: 750px) { section#overview .overview_inner { padding-top: 2rem; padding-bottom: 3rem; } } section#overview .overview_inner .campaign_banner_wrapper { width: 40.875rem; margin: 2rem auto 0; } @media screen and (max-width: 750px) { section#overview .overview_inner .campaign_banner_wrapper { width: 100%; margin-top: 1rem; } } section#overview .overview_inner .campaign_banner_wrapper .btn { background-color: unset; position: relative; } section#overview .overview_inner .campaign_banner_wrapper .btn .arrow { position: absolute; width: 2.5rem; height: 2.5rem; right: 1rem; top: 50%; transform: translateY(-50%) rotate(90deg); -webkit-transform: translateY(-50%) rotate(90deg); -ms-transform: translateY(-50%) rotate(90deg); transition: all .3s; } @media screen and (max-width: 750px) { section#overview .overview_inner .campaign_banner_wrapper .btn .arrow { width: 1.75rem; height: 1.75rem; right: .5rem; } } section#overview .overview_inner .campaign_banner_wrapper .btn:hover { opacity: 1; } section#overview .overview_inner .campaign_banner_wrapper .btn:hover .arrow { top: calc(50% + .5rem); } @media screen and (max-width: 750px) { section#overview .overview_inner .campaign_banner_wrapper .btn:hover .arrow { top: 50%; } } section#overview .overview_inner .overview_images_wrapper .left_ovimg { width: 40rem; height: auto; aspect-ratio: 1293 / 1523; position: absolute; left: -7rem; top: 23rem; border-radius:0 1.25rem 1.25rem 0; } @media screen and (max-width: 750px) { section#overview .overview_inner .overview_images_wrapper .left_ovimg { width: 80%; height: auto; aspect-ratio: 617 / 380; position: relative; left:-1rem; top: 2rem; } } section#overview .overview_inner .overview_lead_area { width:38rem; margin-top: 12rem; margin-left:30rem; } @media screen and (max-width: 750px) { section#overview .overview_inner .overview_lead_area { margin: 3rem auto 0 auto; width:100%; } } section#overview .overview_inner .overview_lead_area .text .co { font-size: 3rem; line-height: 1.2; font-weight: 900; display: block; text-align:right; margin-top:.8rem; } @media screen and (max-width: 750px) { section#overview .overview_inner .overview_lead_area .text .co { font-size: 1.8rem; line-height: 1.2; margin-top: .5rem; } } section#overview .overview_inner .overview_lead_area .text .co1 { font-size:1.6rem; padding-right:1rem; font-weight:700; } @media screen and (max-width: 750px) { section#overview .overview_inner .overview_lead_area .text .co1 { letter-spacing: 0; font-size:.92rem; } } section#overview .overview_inner .overview_lead_area .text .co2 { letter-spacing: .04em; } @media screen and (max-width: 750px) { section#overview .overview_inner .overview_lead_area .text .co2 { letter-spacing: 0; } } section#overview .overview_inner .overview_lead_area .text .co3 { letter-spacing: 0; font-family: "Mona Sans", serif; font-size:1.2rem; font-weight:normal; padding-right:2rem; } @media screen and (max-width: 750px) { section#overview .overview_inner .overview_lead_area .text .co3 { letter-spacing: 0; font-size:.8rem; padding-right:1rem; } } section#overview .overview_inner .overview_txt_area { width:50rem; margin-top: 5rem; margin-left:28rem; background: linear-gradient(124deg, rgba(238,131,125,1) 0%, rgba(225,37,27,1) 100%); border-radius:1rem; padding:4rem 12rem 4rem 2rem; position:relative; z-index:-1; } section#overview .overview_inner .overview_txt_area .usesp{ display:none; } @media screen and (max-width: 750px) { section#overview .overview_inner .overview_txt_area { width:100%; margin-top: 2rem; margin-left:1rem; background: linear-gradient(124deg, rgba(238,131,125,1) 0%, rgba(225,37,27,1) 100%); border-radius:1rem 0 0 1rem; padding:2rem 1rem 2rem 0; position:relative; z-index:-1; } section#overview .overview_inner .overview_txt_area .usesp{ display:block; } } section#overview .overview_inner .overview_txt_area:after { content:''; display:block; width:8rem; height:6rem; background: linear-gradient(124deg, rgba(255,255,255,1) 0%, rgba(225,225,225,1) 100%); border-radius:.5rem; position:absolute; bottom:-2rem; left:-7rem; } @media screen and (max-width: 750px) { section#overview .overview_inner .overview_txt_area:after { content:''; display:block; width:6rem; height:5rem; background: linear-gradient(124deg, rgba(255,255,255,1) 0%, rgba(225,225,225,1) 100%); border-radius:.5rem; position:absolute; bottom:-2rem; left:-1rem; } } section#overview .overview_inner .overview_txt_area .text{ color:#fff; text-align:right; font-weight:400; font-size:1.2rem; line-height:2; } @media screen and (max-width: 750px) { section#overview .overview_inner .overview_txt_area .text{ font-size:.85rem; line-height:2; } } section#point { padding-top: 3rem; padding-bottom: 0; } section#point .innerbox_1100{ padding:0; } @media screen and (max-width: 750px) { section#point { padding-top: 2rem; padding-bottom:0; } } section#point .point_inner .point_title{ border-bottom:2px solid #e1251b; display:inline-block; color:#e1251b; position:relative; padding-left:15rem; } @media screen and (max-width: 750px) { section#point .point_inner .point_title{ padding-left:8rem; } } section#point .point_inner .point_title .lbl{ background: linear-gradient(124deg, rgba(238,131,125,1) 0%, rgba(225,37,27,1) 100%); color:#fff; font-size:1.2rem; line-height:1; text-align:center; display:inline-block; padding:.3rem .7rem .7rem .7rem; font-weight:800; box-shadow: 2px 2px 6px 0px rgba(0, 0, 0, .6); position:absolute; bottom:0; left:3rem; transform:rotate(-7deg); } @media screen and (max-width: 750px) { section#point .point_inner .point_title .lbl{ font-size:.7rem; bottom:0; left:1rem; } } section#point .point_inner .point_title .lbl .sbg{ font-size:3.7rem; font-family: "Mona Sans", serif; font-weight:700; } @media screen and (max-width: 750px) { section#point .point_inner .point_title .lbl .sbg{ font-size:2.2rem; } } section#point .point_inner .point_title .nml{ font-size:3.2rem; line-height:1; font-weight:900; } @media screen and (max-width: 750px) { section#point .point_inner .point_title .nml{ font-size:2.3rem; } } section#point .point_inner .point_title .nml .sbg{ font-size:6.5rem; font-weight:700; font-family: "Mona Sans", serif; } @media screen and (max-width: 750px) { section#point .point_inner .point_title .nml .sbg{ font-size:4rem; } } section#point .point_inner .point_title .ld{ font-size:.69rem; line-height:1; color:#000; position:absolute; bottom:4.2rem; right:0; border-bottom:1px solid #000; padding-bottom:.2rem; } section#point .point_inner .point_title .ld:after{ content:''; background:url(images/point_title_bd.png) no-repeat center top; background-size:100% auto; width:.6rem; height:.6rem; position:absolute; bottom:-0.6rem; right:50%; } @media screen and (max-width: 750px) { section#point .point_inner .point_title .ld{ font-size:.6rem; bottom:2.8rem; } } @media screen and (max-width: 750px) { section#point .point_inner .point_title { width: 22rem; } } section#point .point_contents_wrapper { margin-top: 2rem; background-color: #f7f7f7; padding-top:3rem; } @media screen and (max-width: 750px) { section#point .point_contents_wrapper { padding-top:2rem; } } section#point .point_contents_wrapper .pnav { display: flex; justify-content: space-between; width: 90%; margin:0 auto; } @media screen and (max-width: 750px) { section#point .point_contents_wrapper .pnav { display: flex; justify-content: center; flex-wrap: wrap; width: 100%; margin:0 auto; } } section#point .point_contents_wrapper .pnav .pnav_item { width: calc((100% - 1.5rem) / 5); padding:0 .8rem; position:relative; } @media screen and (max-width: 750px) { section#point .point_contents_wrapper .pnav .pnav_item { width: calc((100% - 1rem) / 3); padding:0 .5rem; position:relative; } } section#point .point_contents_wrapper .pnav .pnav_item a { display: block; color: #000; padding: .5rem 0 .8125rem; text-align: center; } @media screen and (max-width: 750px) { section#point .point_contents_wrapper .pnav .pnav_item a { padding: .5rem 0; } } section#point .point_contents_wrapper .pnav .pnav_item a:hover img { opacity:.5; } section#point .point_contents_wrapper .pnav .pnav_item a span { font-weight: 700; } section#point .point_contents_wrapper .pnav .pnav_item a .num { color:#e1251b; font-size:3rem; font-family: "Mona Sans", serif; font-style:italic; position:absolute; top:-0.5rem; left:1rem; } @media screen and (max-width: 750px) { section#point .point_contents_wrapper .pnav .pnav_item a .num { font-size:1.8rem; left:.5rem; } } section#point .point_contents_wrapper .pnav .pnav_item a .size_22 { font-size: 1.375rem; } @media screen and (max-width: 750px) { section#point .point_contents_wrapper .pnav .pnav_item a .size_22 { font-size: .8rem; } } section#point .point_contents_wrapper .pointblock { position:relative; padding:2rem 2rem; } @media screen and (max-width: 750px) { section#point .point_contents_wrapper .pointblock { padding:3rem 1rem; } } section#point .point_contents_wrapper .pointblock .lead { position:relative; } section#point .point_contents_wrapper .pointblock .lead .point_area_inner{ width: 50rem; border: 2px solid #242424; box-shadow: 5px 5px 0 #242424; border-radius: 1.25rem; margin: 0 0 0 auto; background-color: #fff; padding:2rem; position:relative; } @media screen and (max-width: 750px) { section#point .point_contents_wrapper .pointblock .lead .point_area_inner{ width: 90%; border: 1px solid #242424; box-shadow: 3px 3px 0 #242424; background-color: #fff; padding:1rem; } } section#point .point_contents_wrapper .pointblock .lead .point_area_inner:after{ content:''; background:url(images/point_fk_left.png) no-repeat center top; background-size:100% auto; width:3rem; height:3rem; position:absolute; top:5rem; left:-3rem; } @media screen and (max-width: 750px) { section#point .point_contents_wrapper .pointblock .lead .point_area_inner:after{ content:''; background:url(images/point_fk_left.png) no-repeat center top; background-size:100% auto; width:1.2rem; height:1.2rem; position:absolute; top:-1.2rem; left:15%; transform:scale(-1, 1) rotate(90deg); } } section#point .point_contents_wrapper .pointblock .lead .ilst{ width:16rem; position:absolute; top:0; left:-2rem; } @media screen and (max-width: 750px) { section#point .point_contents_wrapper .pointblock .lead .ilst{ width:9rem; position:absolute; top:-3.5rem; left:-3rem; } } section#point .point_contents_wrapper .pointblock .lead .point_area_inner dl dt{ color:#000; font-size:1.4rem; font-weight:bold; display:inline-block; letter-spacing:-0.1rem; line-height:1.4; border-bottom:2px solid #000; } section#point .point_contents_wrapper .pointblock .lead .point_area_inner dl dt .usesp{ display:none; } @media screen and (max-width: 750px) { section#point .point_contents_wrapper .pointblock .lead .point_area_inner dl dt{ font-size:.9rem; border-bottom:0; margin-left:15%; } section#point .point_contents_wrapper .pointblock .lead .point_area_inner dl dt .usesp{ display:block; } } section#point .point_contents_wrapper .pointblock .lead .point_area_inner dl dt .sbg{ color:#e1251b; font-size:2.1rem; } @media screen and (max-width: 750px) { section#point .point_contents_wrapper .pointblock .lead .point_area_inner dl dt .nml{ border-bottom:1px solid #000; } section#point .point_contents_wrapper .pointblock .lead .point_area_inner dl dt .sbg{ font-size:1.45rem; border-bottom:1px solid #000; } } section#point .point_contents_wrapper .pointblock .lead .point_area_inner dl dd{ display:flex; padding-top:1rem; } @media screen and (max-width: 750px) { section#point .point_contents_wrapper .pointblock .lead .point_area_inner dl dd{ display:block; padding-top:1rem; } } section#point .point_contents_wrapper .pointblock .lead .point_area_inner dl dd .leadimg{ width:70%; } @media screen and (max-width: 750px) { section#point .point_contents_wrapper .pointblock .lead .point_area_inner dl dd .leadimg{ width:100%; } } section#point .point_contents_wrapper .pointblock .lead .point_area_inner dl dd .leadimg .pq{ color:#898989; font-size:.8rem; } @media screen and (max-width: 750px) { section#point .point_contents_wrapper .pointblock .lead .point_area_inner dl dd .leadimg .pq{ font-size:.5rem; } } section#point .point_contents_wrapper .pointblock .lead .point_area_inner dl dd .circletxt{ width:11rem; height:11rem; background:#000; border-radius:50%; color:#fff; font-size:.8rem; font-weight:600; display:flex; justify-content: center; align-items: center; text-align:center; margin:0 0 0 auto; position:relative; } section#point .point_contents_wrapper .pointblock .lead .point_area_inner dl dd .circletxt .usepc{ display:block; } section#point .point_contents_wrapper .pointblock .lead .point_area_inner dl dd .circletxt .usesp{ display:none; } @media screen and (max-width: 750px) { section#point .point_contents_wrapper .pointblock .lead .point_area_inner dl dd .circletxt{ width:100%; height:auto; border-radius:2.5rem; font-size:.75rem; margin:1rem auto; padding:.3rem .5rem; } section#point .point_contents_wrapper .pointblock .lead .point_area_inner dl dd .circletxt .usepc{ display:none; } section#point .point_contents_wrapper .pointblock .lead .point_area_inner dl dd .circletxt .usesp{ display:block; } } section#point .point_contents_wrapper .pointblock .lead .point_area_inner dl dd .circletxt:before{ content:''; background:url(images/point_lead_arow.png) no-repeat center center; background-size:100% auto; width:2rem; height:5rem; position:absolute; right:10rem; top:50%; transform: translateY(-50%); -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); } @media screen and (max-width: 750px) { section#point .point_contents_wrapper .pointblock .lead .point_area_inner dl dd .circletxt:before{ width:1rem; height:2rem; right:0; left:50%; top:-1.2rem; transform:rotate(90deg) translate(0 , 50%); } } section#point .point_contents_wrapper .pointblock .ans { position:relative; } section#point .point_contents_wrapper .pointblock .ans .point_area_inner{ width: 50rem; border: 2px solid #242424; box-shadow: 5px 5px 0 #242424; border-radius: 1.25rem; margin: 0 auto 0 0; background-color: #fff; padding:3rem; position:relative; margin-top:-2rem; } @media screen and (max-width: 750px) { section#point .point_contents_wrapper .pointblock .ans .point_area_inner{ width: 90%; border: 1px solid #242424; box-shadow: 3px 3px 0 #242424; margin: 0 auto 0 .5rem; padding:1rem; margin-top:-1rem; } } section#point .point_contents_wrapper .pointblock .ans .point_area_inner:after{ content:''; background:url(images/point_fk_right.png) no-repeat center top; background-size:100% auto; width:3rem; height:3rem; position:absolute; top:5rem; right:-3rem; } @media screen and (max-width: 750px) { section#point .point_contents_wrapper .pointblock .ans .point_area_inner:after{ width:1.5rem; height:1.5rem; top:auto; bottom:-1.5rem; right:5rem; transform:scale(-1, 1) rotate(90deg); } } section#point .point_contents_wrapper .pointblock .ans .point_area_inner .p-left{ display:flex; } section#point .point_contents_wrapper .pointblock .ans .point_area_inner .p-right{ display:flex; flex-direction: row-reverse; margin-top:2rem; } @media screen and (max-width: 750px) { section#point .point_contents_wrapper .pointblock .ans .point_area_inner .p-left{ display:block; } section#point .point_contents_wrapper .pointblock .ans .point_area_inner .p-right{ display:block; margin-top:2rem; } } section#point .point_contents_wrapper .pointblock .ans .ilst.lng{ width:10rem; position:absolute; top:4rem; right:3rem; } section#point .point_contents_wrapper .pointblock .ans .ilst.sht{ width:12rem; position:absolute; top:4rem; right:3rem; } section#point .point_contents_wrapper .pointblock .ans .ilst.sht2{ width:12rem; position:absolute; top:4rem; right:3rem; } @media screen and (max-width: 750px) { section#point .point_contents_wrapper .pointblock .ans .ilst.lng{ width:6rem; position:absolute; top:auto; bottom:-5rem; right:-1rem; } section#point .point_contents_wrapper .pointblock .ans .ilst.sht{ width:9rem; position:absolute; top:auto; bottom:-4rem; right:-3rem; } section#point .point_contents_wrapper .pointblock .ans .ilst.sht2{ width:11rem; position:absolute; top:auto; bottom:-4rem; right:-2rem; } } section#point .point_contents_wrapper .pointblock .ans .point_area_inner .p-left dl{ width:calc(60% + 2rem); padding-right:2rem; } section#point .point_contents_wrapper .pointblock .ans .point_area_inner .p-right dl{ width:calc(60% + 2rem); padding-left:2rem; } @media screen and (max-width: 750px) { section#point .point_contents_wrapper .pointblock .ans .point_area_inner .p-left dl{ width:100%; padding-right:0; } section#point .point_contents_wrapper .pointblock .ans .point_area_inner .p-right dl{ width:100%; padding-left:0; } } section#point .point_contents_wrapper .pointblock .ans .point_area_inner dl dt{ color:#e1251b; font-size:2.1rem; font-weight:bold; display:inline-block; letter-spacing:-0.1rem; line-height:1.4; } section#point .point_contents_wrapper .pointblock .ans .point_area_inner dl dt .pnum{ color:#e1251b; font-family: "Mona Sans", serif; letter-spacing:0; font-size:2.3rem; font-style:italic; padding-right:.3rem; } section#point .point_contents_wrapper .pointblock .ans .point_area_inner dl dt .usepc{ display:block; } section#point .point_contents_wrapper .pointblock .ans .point_area_inner dl dt .usesp{ display:none; } @media screen and (max-width: 750px) { section#point .point_contents_wrapper .pointblock .ans .point_area_inner dl dt{ font-size:1.5rem; } section#point .point_contents_wrapper .pointblock .ans .point_area_inner dl dt .pnum{ font-size:1.6rem; } section#point .point_contents_wrapper .pointblock .ans .point_area_inner dl dt .usepc{ display:none; } section#point .point_contents_wrapper .pointblock .ans .point_area_inner dl dt .usesp{ display:block; } } section#point .point_contents_wrapper .pointblock .ans .point_area_inner dl dt span.p-line{ border-bottom:1.5px solid #000; display:block; } @media screen and (max-width: 750px) { section#point .point_contents_wrapper .pointblock .ans .point_area_inner dl dt span.p-line{ border-bottom:1px solid #000; } } section#point .point_contents_wrapper .pointblock .ans .point_area_inner dl dd{ font-size:1rem; padding-top:1rem; } section#point .point_contents_wrapper .pointblock .ans .point_area_inner dl dd .bl{ font-size:1.3rem; font-weight:bold; padding-bottom:1rem; display:block; } @media screen and (max-width: 750px) { section#point .point_contents_wrapper .pointblock .ans .point_area_inner dl dd{ font-size:.7rem; padding-top:.5rem; padding-bottom:.5rem; } section#point .point_contents_wrapper .pointblock .ans .point_area_inner dl dd .bl{ font-size:.9rem; padding-bottom:.5rem; } } section#point .point_contents_wrapper .pointblock .ans .point_area_inner .ans-img{ width:calc(40% - 2rem); } section#point .point_contents_wrapper .pointblock .ans .point_area_inner .ans-img img{ box-shadow: 5px 5px 0px 0px rgba(225, 37, 27, 1); } @media screen and (max-width: 750px) { section#point .point_contents_wrapper .pointblock .ans .point_area_inner .ans-img{ width:100%; } section#point .point_contents_wrapper .pointblock .ans .point_area_inner .ans-img img{ box-shadow: 3px 3px 0px 0px rgba(225, 37, 27, 1); } } section#point .point_contents_wrapper .point_ans { width:80%; margin:3rem auto; display:flex; } @media screen and (max-width: 750px) { section#point .point_contents_wrapper .point_ans { width:90%; margin:3rem auto; display:block; } } section#point .point_contents_wrapper .point_ans .point_ans_txt_area{ width:60%; text-align:center; font-size:1.5rem; font-weight:bold; } @media screen and (max-width: 750px) { section#point .point_contents_wrapper .point_ans .point_ans_txt_area{ width:100%; text-align:center; font-size:1rem; font-weight:bold; } } section#point .point_contents_wrapper .point_ans .point_ans_txt_area .point_ans_arrow{ width:3rem; margin:1rem auto 0 auto; } @media screen and (max-width: 750px) { section#point .point_contents_wrapper .point_ans .point_ans_txt_area .point_ans_arrow{ width:2rem; } } section#point .point_contents_wrapper .point_ans .point_ans_txt_area .txt_arrow{ font-weight:normal } section#point .point_contents_wrapper .point_ans .point_ans_txt_area .co1{ font-size:2.3rem; line-height:1.2; margin-top:1rem; } @media screen and (max-width: 750px) { section#point .point_contents_wrapper .point_ans .point_ans_txt_area .co1{ font-size:1.4rem; } } section#point .point_contents_wrapper .point_ans .point_ans_txt_area .co1 .cred{ color:#e1251b; } section#point .point_contents_wrapper .point_ans .point_ans_txt_area .co2{ font-size:2.5rem; background: linear-gradient(180deg, rgba(238,131,125,1) 0%, rgba(225,37,27,1) 50%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; border-bottom:3px solid #e1251b; display:inline-block; line-height:1.2; } @media screen and (max-width: 750px) { section#point .point_contents_wrapper .point_ans .point_ans_txt_area .co2{ font-size:1.5rem; border-bottom:2px solid #e1251b; line-height:1.4; } } section#point .point_contents_wrapper .point_ans .point_ans_img{ width:40%; position:relative; top:-2rem; } @media screen and (max-width: 750px) { section#point .point_contents_wrapper .point_ans .point_ans_img{ width:70%; position:relative; top:0; margin:0 auto; padding:1rem 0; } } section#campaign { padding: 0 1rem 2rem; } section#campaign h3{ font-size:2rem; text-align:center; font-weight:500; } @media screen and (max-width: 750px) { section#campaign h3{ font-size:1rem; } } section#campaign .top_button_wrapper { height: 9rem; margin-top: 2rem; } @media screen and (max-width: 750px) { section#campaign .top_button_wrapper { height: 8rem; margin-top: 1rem; } } section#lineup { padding: 7rem 0 4rem 0; } section#lineup h3{ text-align:center; padding-bottom:1rem; } section#lineup h3 .ld{ font-size:1.4rem; font-weight:600; border-bottom:2px solid #000; padding:0 .5rem; display:inline-block; position:relative; margin-bottom:.5rem; } @media screen and (max-width: 750px) { section#lineup h3 .ld{ font-size:1.1rem; border-bottom:1px solid #000; padding:0 .2rem; } } section#lineup h3 .ld:after{ content:''; background:url(images/lineup_tx_arow.png) no-repeat center top; background-size:100% auto; width:1rem; height:1rem; position:absolute; bottom:-1rem; left:50%; transform: translateX(-50%); } @media screen and (max-width: 750px) { section#lineup h3 .ld:after{ width:.8rem; height:.8rem; bottom:-0.8rem; } } section#lineup h3 .nml{ font-size:2.3rem; font-weight:800; } @media screen and (max-width: 750px) { section#lineup h3 .nml{ font-size:1.5rem; } } section#lineup h3 .nml .cred{ background: linear-gradient(180deg, rgba(238,131,125,1) 0%, rgba(225,37,27,1) 80%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } @media screen and (max-width: 750px) { section#lineup h3 .nml .cred{ display:block; } } section#lineup .lineup_pclist{ width:90%; margin:0 auto; } @media screen and (max-width: 750px) { section#lineup .lineup_pclist{ width:100%; flex-wrap: wrap; } } section#lineup .lineup_pclist li{ text-align:center; width:calc(100% / 4 + 1rem); padding:0 .5rem; } @media screen and (max-width: 750px) { section#lineup .lineup_pclist li{ text-align:center; width:calc(100% / 2.3 + 1rem); padding:.5rem; } } section#lineup .lineup_pclist li .lineup_list{ background:#ebebeb; padding:1rem; border-radius:1rem 1rem 0 0; } section#lineup .lineup_pclist li .lineup_list .pcimg{ width:10rem; margin:0 auto; } @media screen and (max-width: 750px) { section#lineup .lineup_pclist li .lineup_list .pcimg{ width:100%; margin:0 auto; } } section#lineup .lineup_pclist li .lineup_list .lineup_txt{ font-size:1rem; } @media screen and (max-width: 750px) { section#lineup .lineup_pclist li .lineup_list .lineup_txt{ font-size:.7rem; } } section#lineup .lineup_pclist li a.lineup_link{ background:#000; color:#fff; display:block; padding:1rem; border-radius:0 0 1rem 1rem; position:relative; transition: all .3s; } section#lineup .lineup_pclist li a.lineup_link:after{ content:''; background-size:100% auto; width:1rem; height:1rem; display:block; position:absolute; top:50%; right:1.5rem; transform: translateY(-50%); -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transition: all .3s; } section#lineup .lineup_pclist li a.lineup_link:hover:after{ right:1rem; } @media screen and (max-width: 750px) { section#lineup .lineup_pclist li a.lineup_link{ padding:.5rem; font-size:.8rem; } section#lineup .lineup_pclist li a.lineup_link:after{ width:.8rem; height:.8rem; right:.8rem; } section#lineup .lineup_pclist li a.lineup_link:hover:after{ right:.5rem; } } section#lineup .other_lineup{ width:30rem; margin:2rem auto; } section#lineup .other_lineup a{ text-align:center; padding:.5rem 0; } @media screen and (max-width: 750px) { section#lineup .other_lineup{ width:90%; } } section#voice { position: relative; padding: 6.79375rem 0 3rem; } @media screen and (max-width: 750px) { section#voice { padding: 1rem 0; } } section#voice .voice_title { width: 38.52rem; margin: 0 auto 0 0; } section#voice .voice_title .middle_add_text { font-size: 2.1875rem; line-height: 1.4; font-weight: 700; text-align: center; margin-bottom: 1.875rem; } @media screen and (max-width: 750px) { section#voice .voice_title .middle_add_text { font-size: 1.125rem; margin-bottom: 1.25rem; } } section#voice .voice_title .title_image { width: 35.52rem; margin: 0 auto; } @media screen and (max-width: 750px) { section#voice .voice_title .title_image { width: 21.375rem; } } section#voice .voice_inner { position: relative; overflow-x: auto; margin-top: 2.875rem; padding-top: 2rem; padding-bottom: 2rem; background: linear-gradient(180deg, rgba(238,131,125,1) 0%, rgba(225,37,27,1) 100%); } section#voice .voice_inner .under { color:#fff; font-size:3.5rem; text-align:center; padding:5rem 0; } @media screen and (max-width: 750px) { section#voice .voice_inner .under { font-size:2rem; padding:2rem 0; } } section#useful{ padding: 0 0 6rem 0; position:relative; } @media screen and (max-width: 750px) { section#useful{ padding:3rem 0; } } section#useful h4{ font-size:2rem; text-align:center; padding-bottom:2rem; } section#useful h4 .usesp{ display:none; } section#useful h4 .subtl{ font-size:1.5rem; display:block; font-weight:normal; } @media screen and (max-width: 750px) { section#useful h4{ font-size:1.1rem; text-align:center; padding-bottom:1rem; } section#useful h4 .usesp{ display:block; } section#useful h4 .subtl{ font-size:.8rem; padding-top:.3rem; } } .box_2{ display: flex; } @media screen and (max-width: 750px) { .box_2{ display: block; } } .box_left, .box_right{ flex: 1; } section#useful .contens_video { width: 80%; margin: 0 auto; max-width: 600px; position:relative; } section#useful .contens_video .video { position: relative; width: 100%; padding-top: 56.25%; overflow: hidden; height: 0; } section#useful .video iframe { position: absolute; top: 0; right: 0; width: 100%; height: 100%; } section#useful .useful_func{ width:70%; margin: 0 auto; align-items: flex-start; } section#useful .useful_func li{ text-align:center; width:calc(100% / 4 + 2rem); padding:0 1rem; } @media screen and (max-width: 750px) { section#useful .useful_func{ width:100%; margin:2rem auto; } section#useful .useful_func.flex_center{ display:block; } section#useful .useful_func li{ text-align:center; width:100%; padding:.5rem 0; display:flex; align-items: center; } } @media screen and (max-width: 750px) { section#useful .useful_func li .ic{ width:calc(30% - 1rem); } section#useful .useful_func li .useful_txt{ width:70%; text-align:left; padding-left:1rem; } } section#useful .useful_func li .useful_txt dt{ font-size:1.2rem; font-weight:bold; padding:.5rem 0; } section#useful .useful_func li .useful_txt dt .usepc{ display:block; } section#useful .useful_func li .useful_txt dt.spc{ padding-bottom:2.3rem; } section#useful .useful_func li .useful_txt dd{ text-align:left; } @media screen and (max-width: 750px) { section#useful .useful_func li .useful_txt dt{ font-size:1rem; font-weight:bold; padding:.2rem 0; } section#useful .useful_func li .useful_txt dt .usepc{ display:none; } section#useful .useful_func li .useful_txt dt.spc{ padding-bottom:.2rem; } section#useful .useful_func li .useful_txt dd{ font-size:.8rem; } } section#useful .bgblock01{ width:20rem; height:18rem; background: linear-gradient(124deg, rgba(238,131,125,1) 0%, rgba(225,37,27,1) 100%); border-radius:.5rem; position:absolute; top:5rem; left:-2rem; z-index:-1; } @media screen and (max-width: 750px) { section#useful .bgblock01{ width:8rem; height:10rem; } } section#useful .bgblock02{ width:28rem; height:23rem; background: linear-gradient(124deg, rgba(255,255,255,1) 0%, rgba(225,225,225,1) 100%); border-radius:.5rem; position:absolute; bottom:0; right:-1rem; z-index:-1; } @media screen and (max-width: 750px) { section#useful .bgblock02{ width:10rem; height:8rem; } } section#peripheral { position: relative; padding:2rem 0; } section#peripheral .peripheral_inner{ margin:3rem auto; position:relative; } @media screen and (max-width: 750px) { section#peripheral .peripheral_inner{ margin:2rem auto; } } section#peripheral .peripheral_inner:after{ content:''; width:60%; height:40rem; background: linear-gradient(124deg, rgba(238,131,125,1) 0%, rgba(225,37,27,1) 100%); background-size:100% auto; background-repeat:no-repeat; background-position:right center; border-radius:2rem; position:absolute; top:2rem; right:5rem; z-index:-1; } @media screen and (max-width: 1200px) { section#peripheral .peripheral_inner:after{ width: 80%; height: 49rem; right: -1rem; } } @media screen and (max-width: 750px) { section#peripheral .peripheral_inner:after{ height: 0; } } section#peripheral .peripheral_inner .periph_list{ width:70%; margin:2rem auto; display:flex; flex-wrap: wrap; align-items: flex-start; } @media screen and (max-width: 1200px) { section#peripheral .peripheral_inner .periph_list{ width:100%; } } @media screen and (max-width: 750px) { section#peripheral .peripheral_inner .periph_list{ width:80%; margin:2rem auto; display:block; } } section#peripheral .peripheral_inner .periph_list li{ width:calc(100% / 2 - 3rem); border: 1px solid #242424; box-shadow: 3px 3px 0 #242424; border-radius: 1.25rem; margin:0 1.5rem; background-color: #fff; } @media screen and (max-width: 750px) { section#peripheral .peripheral_inner .periph_list li{ width:100%; margin:1.5rem auto; } } section#peripheral .peripheral_inner .periph_list li:nth-child(2){ margin-top:3rem; } section#peripheral .peripheral_inner .periph_list li:nth-child(4){ margin-top:3rem; } @media screen and (max-width: 750px) { section#peripheral .peripheral_inner .periph_list li:nth-child(2){ margin-top:0; } section#peripheral .peripheral_inner .periph_list li:nth-child(4){ margin-top:0; } } section#peripheral .peripheral_inner .periph_list li .periph_img{ width:80%; margin:0 auto; } section#peripheral .peripheral_inner .periph_list li .periph_txt_wrapper{ background: linear-gradient(128deg, rgba(225,225,225,1) 0%, rgba(255,255,255,1) 100%); padding:1.8rem; border-radius:0 0 1.25rem 1.25rem; position:relative; height: 20rem; } section#peripheral .peripheral_inner .periph_list li .periph_txt_wrapper .periph_num{ color:#fff; font-size:6rem; font-family: "Mona Sans", serif; font-weight:600; letter-spacing:-0.05rem; line-height:1; position:absolute; top:-1rem; left:0; } @media screen and (max-width: 750px) { section#peripheral .peripheral_inner .periph_list li .periph_txt_wrapper { height: 16rem; } section#peripheral .peripheral_inner .periph_list li .periph_txt_wrapper .periph_num{ font-size:5rem; } } section#peripheral .peripheral_inner .periph_list li .periph_txt_wrapper .periph_txt{ font-size:1.35rem; font-weight:bold; position:relative; } @media screen and (max-width: 750px) { section#peripheral .peripheral_inner .periph_list li .periph_txt_wrapper .periph_txt{ font-size:1.1rem; } } section#peripheral .peripheral_inner .periph_list li .periph_txt_wrapper .periph_txt .sml{ font-size:1rem; } @media screen and (max-width: 750px) { section#peripheral .peripheral_inner .periph_list li .periph_txt_wrapper .periph_txt .sml{ font-size:.7rem; } } section#peripheral .peripheral_inner .periph_list li .periph_txt_wrapper .periph_sub_txt{ padding:1rem 0; } @media screen and (max-width: 750px) { section#peripheral .peripheral_inner .periph_list li .periph_txt_wrapper .periph_sub_txt{ padding:.5rem 0 1rem 0; font-size:.75rem; } } section#peripheral .peripheral_inner .periph_list li .periph_txt_wrapper .periph_link a{ background:#000; color:#fff; display:block; padding:1rem; border-radius:2.625rem; position:relative; transition: all .3s; text-align:center; font-size:1.4rem; font-weight:bold; width:18rem; margin:0 auto; } @media screen and (max-width: 750px) { section#peripheral .peripheral_inner .periph_list li .periph_txt_wrapper .periph_link a{ padding:.8rem; font-size:1.1rem; width:95%; } } section#peripheral .peripheral_inner .periph_list li .periph_txt_wrapper .periph_link a:after{ content:''; background-size:100% auto; width:1rem; height:1rem; display:block; position:absolute; top:50%; right:1.5rem; transform: translateY(-50%); -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transition: all .3s; } section#peripheral .peripheral_inner .periph_list li .periph_txt_wrapper .periph_link a:hover:after{ right:1rem; } section#peripheral .periph_set,section#peripheral .periph_store{ width:55rem; margin:2rem auto; text-align:center; } @media screen and (max-width: 750px) { section#peripheral .periph_set,section#peripheral .periph_store{ width:90%; } } section#peripheral .periph_set .lead,section#peripheral .periph_store .lead{ font-size:1.6rem; font-weight:bold; position:relative; display:inline-block; } @media screen and (max-width: 750px) { section#peripheral .periph_set .lead,section#peripheral .periph_store .lead{ font-size:1.1rem; } } section#peripheral .periph_set .lead:before,section#peripheral .periph_store .lead:before{ position: absolute; left: -1rem; top: .3rem; content: ""; width: 2px; height: 70%; background: #000; border-radius: 3px; transform: rotate(-25deg); } section#peripheral .periph_set .lead:after,section#peripheral .periph_store .lead:after{ position: absolute; right: -1rem; top: .3rem; content: ""; width: 2px; height: 70%; background: #000; border-radius: 3px; transform: rotate(25deg); } section#peripheral .periph_set .btn,section#peripheral .periph_store .btn{ padding:1.25rem 0; width:90%; margin:0 auto; } @media screen and (max-width: 750px) { section#peripheral .periph_set .btn,section#peripheral .periph_store .btn{ padding:.8rem 0; margin-top:.3rem; } } section#specification { background-color: #f7f7f7; padding-top: 4.0625rem; padding-bottom: 4.5625rem; } @media screen and (max-width: 750px) { section#specification { padding: 2.625rem 1rem 3.5rem; margin-bottom: 0; } } section#specification .specification_inner { max-width: 950px; margin: 0 auto 0; } section#specification .specification_inner .specification_title { font-size: 1.75rem; font-weight: 700; text-align: center; } @media screen and (max-width: 750px) { section#specification .specification_inner .specification_title { font-size: 1.5rem; } } section#specification .specification_inner .specification_table { width: 100%; margin-top: 2.5rem; } @media screen and (max-width: 750px) { section#specification .specification_inner .specification_table { margin-top: 2.125rem; } } section#specification .specification_inner .specification_table tr.line { border-top: 1px solid #d5d5d5; } section#specification .specification_inner .specification_table tr.line th.table_title, section#specification .specification_inner .specification_table tr.line td.table_text { font-size: 1.125rem; line-height: 2; padding: 1.09375rem 2rem; text-align: left; vertical-align: middle; } @media screen and (max-width: 750px) { section#specification .specification_inner .specification_table tr.line th.table_title, section#specification .specification_inner .specification_table tr.line td.table_text { display: block; padding: 0; text-align: center; } } section#specification .specification_inner .specification_table tr.line th.table_title { width: 25rem; font-weight: 700; } @media screen and (max-width: 750px) { section#specification .specification_inner .specification_table tr.line th.table_title { font-size: 1.125rem; width: 100%; padding-top: .75rem; } } section#specification .specification_inner .specification_table tr.line td.table_text { font-weight: 400; padding-left: 0; } @media screen and (max-width: 750px) { section#specification .specification_inner .specification_table tr.line td.table_text { font-size: 1rem; padding-top: .1875rem; padding-bottom: .625rem; width: 100%; } } section#specification .specification_inner .top_button_wrapper { margin-top: 3.5rem; } @media screen and (max-width: 750px) { section#specification .specification_inner .top_button_wrapper { margin-top: 1.5rem; } } .office2024{ max-width: 1200px; margin: 40px auto; } .office2024 img{ display: block; margin: 0 auto; } .office2024 h2{ text-align: center; font-weight: bold; font-size: 48px; margin: 20px 0; } .office2024-sp{ display: none !important; } @media screen and (max-width: 750px) { .office2024 h2 { font-size: 30px; margin: 20px 30px} .office2024-sp{ display: block !important; } .office2024-pc{ display: none !important; } } .tableBoxMain { font-size: 16px; max-width: 1920px; } .tableBoxMain * { font-family: 'Noto Sans JP'; } .tableBoxMain button:hover { cursor: pointer; } .product-card-background .product-card-banner-sp { display: none; } .product-card-content .product-card-point { width: 55px; } .product-card-content .product-card-good { width: 47px; } .product-card-content .product-card-hero-img { width: 80%; } .tableBoxMainBanner { max-width: 1920px; } .tableBoxMainBanner img.sp { display: none; } .tableBoxMainBanner .tbb_text { top: 46%; left: 10%; } .tableBoxMainBanner .tbb_text p { text-align: left; letter-spacing: 0px; color: #fff; } .tableBoxMainBanner .tbb_text .tbb_h1 { font: normal normal bold 3em/1em 'Noto Sans JP'; margin: 0; } .tableBoxMainBanner .tbb_text .tbb_date { font: normal normal bold 2em/2em 'Noto Sans JP'; display: block; } .tableBoxMainBanner .thnikpad_33_logo { width: 15em; height: auto; min-height: auto; display: block; } .black_part { position: relative; background-color: transparent; overflow: hidden; margin-top: -80px; z-index: 60; color: #fff; } .black_part::before { content: ' '; position: absolute; left: 50%; width: 110%; height: 110px; background-color: #0a0a0c; border-top-left-radius: 50% 100%; border-top-right-radius: 50% 100%; transform: scaleX(1.5); z-index: 10; transform: translateX(-50%) rotateY(180deg); outline: 1px solid #0a0a0c; } .black_part .thinkpad_33_history { margin-bottom: -5px; text-align: center; } .black_part .thinkpad_33_history img { z-index: 67; width: 19em; height: auto; position: relative; margin: 0 auto; margin-top: 1.5em; vertical-align: bottom; } .history_line { background: #0a0a0c 0% 0% no-repeat padding-box; padding-top: 3em; } .history_line_mobile { display: none; } .history_line .history_line_time { max-width: 1200px; margin: 0 auto; height: 330px; box-sizing: border-box; padding-left: 4em; } .history_line .history_line_time .item { width: 17%; position: relative; height: 300px; float: left; margin-left: -1em; } .history_line .history_line_time .item p { color: #fff; } .history_line .history_line_time .item .year { text-align: center; font: normal normal bold 32px/57px 'Gotham'; letter-spacing: 0; padding-right: .5em; } .history_line .history_line_time .item .bar { width: 100%; } .history_line .history_line_time .item .prod { width: 8.5em; height: 8.5em; background: #fff 0% 0% no-repeat padding-box; border-radius: 50%; text-align: center; position: absolute; left: 1.5em; top: 5em; } .history_line .history_line_time .item:first-child .prod { left: 1.6em; } .history_line .history_line_time .item .prod img { width: 90%; margin-top: 1.5em; transition: transform .5s ease; z-index: 100; position: relative; } .history_line .history_line_time .item .desc { text-align: center; font: normal normal bold 15px/20px 'Noto Sans JP'; letter-spacing: 0px; color: #fff; width: 100%; padding: 4em 2em 0; box-sizing: border-box; } .history_line .history_line_time .item.reverse .desc { padding-top: 0; position: absolute; top: 2em; } .history_line .history_line_time .item.reverse .prod { top: 5.3em; } .history_line .history_line_time .item.reverse .bar { position: absolute; bottom: 4.5em; } .history_line .history_line_time .item.reverse:last-child .prod { left: 1.8em; } .history_line .history_line_time .item.reverse .year { position: absolute; bottom: -0.2em; left: 1.9em; } .history_line .history_line_time .item:nth-child(5) .desc, .history_line .history_line_time .item:last-child .desc { padding-left: 0; padding-right: 0; } .history_line .history_line_time .item:last-child .desc { width: 115%; left: -0.6em; } .history_line .history_line_time .item:nth-child(2) .prod img { width: 83%; margin-top: .9em; } .history_line .history_line_time .item:nth-child(3) .prod img { margin-left: .4em; } .history_line .history_line_time .item:nth-child(4) .prod img, .history_line .history_line_time .item:nth-child(5) .prod img { width: 105%; margin-top: .8em; margin-left: -0.2em; } .history_line .history_line_time .item:last-child .prod img { width: 118%; margin-top: .6em; margin-left: -1em; } .history_line .history_line_time .item:hover { cursor: pointer; } .history_line .history_line_time .item:hover .prod img { transform: scale(1.2); } .history_line .history_line_time .item:hover .prod { background-color: #f4d8d4; } .history_line .history_line_time .item:nth-child(2):hover .prod { background-color: #f4d8d3; } .history_line .history_line_time .item:nth-child(3):hover .prod { background-color: #f8c0b1; } .history_line .history_line_time .item:nth-child(4):hover .prod { background-color: #f88e77; } .history_line .history_line_time .item:nth-child(5):hover .prod { background-color: #d54840; } .history_line .history_line_time .item:nth-child(6):hover .prod { background-color: #e851ab; } .history_line .history_line_time .item:hover .year, .history_line .history_line_time .item:hover .desc { color: #f4d8d4; } .history_line .history_line_time .item:nth-child(2):hover .year, .history_line .history_line_time .item:nth-child(2):hover .desc { color: #f4d8d3; } .history_line .history_line_time .item:nth-child(3):hover .year, .history_line .history_line_time .item:nth-child(3):hover .desc { color: #f8c0b1; } .history_line .history_line_time .item:nth-child(4):hover .year, .history_line .history_line_time .item:nth-child(4):hover .desc { color: #f88e77; } .history_line .history_line_time .item:nth-child(5):hover .year, .history_line .history_line_time .item:nth-child(5):hover .desc { color: #d54840; } .history_line .history_line_time .item:nth-child(6):hover .year, .history_line .history_line_time .item:nth-child(6):hover .desc { color: #e851ab; } .history_desc { background: #0a0a0c 0% 0% no-repeat padding-box; text-align: center; list-style: none; color: #fff; padding-bottom: 2em; margin-top: -1px; } .history_desc li { font: normal normal normal 1.3em/1.5em 'Noto Sans JP'; letter-spacing: 0px; } .history_desc li button { color: #fff; border: 0; width: 14em; height: 2em; background: transparent linear-gradient(180deg, #b8252e 0%, #5c1317 100%) 0% 0% no-repeat padding-box; border-radius: 1em; margin-top: 1em; font: normal normal bold 1em/2em 'Noto Sans JP'; } .sale_category { background: #0a0a0c 0% 0% no-repeat padding-box; margin-top: -1px; } .sale_category .sale { display: inline-block; width: 48%; height: 400px; box-shadow: 0px 1px 1px #000; border: 5px solid #000; } .sale_category .sale_category_left { border-left: 0; background: transparent url('https://p4-ofp.static.pub/ShareResource/JPResource/JP-Images/content-page/thinkpad-bd33/sale-left-bg-pc.png') 3% 4% no-repeat padding-box; border-radius: 0px 100px 100px 0px; } .sale_category .sale_category_right { border-right: 0; background: transparent url('https://p2-ofp.static.pub/ShareResource/JPResource/JP-Images/content-page/thinkpad-bd33/sale-right-bg-pc.png') 2% 22% no-repeat padding-box; border-radius: 100px 0px 0px 100px; } .sale_category .sale .circle { width: 228px; height: 228px; background: transparent url('https://p2-ofp.static.pub/ShareResource/JPResource/JP-Images/content-page/thinkpad-bd33/sale-01-bg.png') 0% 0% no-repeat padding-box; background-size: contain; position: relative; transition: transform .5s ease; cursor: pointer; } .sale_category .sale .circle:hover { transform: scale(1.1); } .sale_category .sale_category_right .circle { background-image: url('https://p4-ofp.static.pub/ShareResource/JPResource/JP-Images/content-page/thinkpad-bd33/sale-02-bg.png'); } .sale_category .sale .circle p { position: absolute; width: 70%; text-align: center; font: normal normal bold 1.2em/1.5em 'Noto Sans JP'; letter-spacing: 0px; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%); } .sale_category .sale .out_box { display: flex; flex-direction: column; align-items: center; padding: 1em 1em 1em 0; width: 60%; box-sizing: border-box; } .sale_category .sale .sale_desc { list-style: none; text-align: center; font: normal normal bold 1em/1.5em 'Noto Sans JP'; letter-spacing: 0px; color: #fff; margin-top: 1em; } .sale_category .sale .out_box button { background: transparent linear-gradient(180deg, #b8252e 0%, #5c1317 100%) 0% 0% no-repeat padding-box; border-radius: 1.5em; height: 2.5em; width: 10em; text-align: center; font: normal normal bold .8em/2.5em 'Noto Sans JP'; letter-spacing: 0px; color: #fff; border: 0; margin-top: 1em; } .black_part .quality { background: #0a0a0c 0% 0% no-repeat padding-box; margin-top: -1px; padding-top: 3em; } .black_part .quality_logo img { width: 19em; height: auto; margin: 0 auto; display: block; } .black_part .quality_desc { text-align: center; font: normal normal normal 1.6em/3em 'Noto Sans JP'; letter-spacing: -1.04px; color: #fff; } .black_part .quality_video { max-width: 1200px; margin: 0 auto; height: 450px; } .black_part .quality_video .left_video { width: 68%; display: inline-block; position: relative; height: 100%; margin-bottom: 20px; } .black_part .quality_video .left_video .video_item { position: absolute; top: 0; left: 0; width: 100%; transition: opacity .5s ease; opacity: 0; } .black_part .quality_video .left_video .video_item:first-child { position: relative; } .black_part .quality_video .left_video .video_item.video_active { opacity: 1; } .black_part .quality_video .left_video .video_item video { width: 100%; border-radius: 18px; } .black_part .quality_video .right_nav { width: 30%; display: flex; flex-direction: column; align-items: flex-start; padding: 0px; height: 385px; overflow: hidden; border-radius: 10px; background: #1e1e1e 0% 0% no-repeat padding-box; } .black_part .quality_video .right_nav .nav_item { padding: 0 1.5em; box-sizing: border-box; border-top-left-radius: 10px; border-top-right-radius: 10px; transition: transform .5s ease; } .black_part .quality_video .right_nav .nav_item:nth-child(2) { background: #b8252e 0% 0% no-repeat padding-box; } .black_part .quality_video .right_nav .nav_item:nth-child(3) { transform: translateY(-8px); background: #871c23 0% 0% no-repeat padding-box; } .black_part .quality_video .right_nav .nav_item .item_top { width: 100%; display: flex; cursor: pointer; padding: 1.1em 0; } .quality_video .right_nav .nav_item .item_top .item_icon { position: relative; width: 3em; } .quality_video .right_nav .nav_item .item_top .item_icon img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; transition: opacity .5s ease; } .black_part .quality_video .right_nav .nav_item .item_top .item_icon img:first-child { opacity: 0; } .black_part .quality_video .right_nav .nav_item .item_top .item_icon img:last-child { opacity: 1; } .black_part .quality_video .right_nav .nav_item.active_item .item_top .item_icon img:first-child { opacity: 1; } .black_part .quality_video .right_nav .nav_item.active_item .item_top .item_icon img:last-child { opacity: 0; } .quality_video .right_nav .nav_item .item_top .vertical_line { background-color: transparent; background: transparent 0% 0% no-repeat padding-box; height: 3em; width: 2px; margin: 0 1em 0 .4em; transition: background-color .5s ease; } .quality_video .right_nav .nav_item .item_top .vertical_line.red { background-color: #b8252e; } .quality_video .right_nav .nav_item:nth-child(2) .item_top .vertical_line.white, .quality_video .right_nav .nav_item:nth-child(3) .item_top .vertical_line.white { background-color: #fff; } .quality_video .right_nav .nav_item .item_top .item_title { padding-right: 3em; line-height: 3em; } .quality_video .right_nav .nav_item:first-child .item_top .item_title { line-height: 1.5em; } .quality_video .right_nav .nav_item .item_desc { text-align: left; font: normal normal normal 12px/22px 'Noto Sans JP'; letter-spacing: -0.48px; color: #fff; height: 0; transition: all .5s ease; padding-bottom: 0; } .black_part .quality_video .right_nav .nav_item.active_item .item_desc { height: 145px; padding-bottom: 1em; } .story { background: transparent url('https://p4-ofp.static.pub/ShareResource/JPResource/JP-Images/content-page/thinkpad-bd33/content-story-bg-pc.png') 0% 10% no-repeat padding-box; height: 700px; margin-top: -1px; padding-top: 3em; } .story .story_logo img { width: 19em; height: auto; margin: 0 auto; display: block; } .story .story_desc { text-align: center; font: normal normal normal 1.6em/3em 'Noto Sans JP'; letter-spacing: -1.04px; color: #fff; } .story .story_img { display: flex; max-width: 1200px; margin: 0 auto; align-items: center; } .story .story_img .item_img { flex: 2; display: flex; justify-content: space-between; } .story .story_img .item_img .img { width: 45%; position: relative; } .story .story_img .item_img .img img { width: 100%; height: auto; vertical-align: bottom; } .story .story_img .item_img .img .hover_shadow { position: absolute; top: 0; left: 0; width: 100%; height: 100%; transition: opacity .5s ease; background-color: #000; opacity: 0; text-align: center; padding: 25% 10%; box-sizing: border-box; font: normal normal bold 1.2em/1.5em 'Noto Sans JP'; letter-spacing: -0.76px; color: #fff; cursor: pointer; } .story .story_img .item_img .img:hover .hover_shadow { opacity: .7; } .story .story_img .item_img .line { width: 2px; height: auto; background: #fff 0% 0% no-repeat padding-box; } .story .story_img .item_text { flex: 1; text-align: center; font: normal normal normal 1.6em/1.5em 'Noto Sans JP'; letter-spacing: -1.04px; color: #fff; padding: 0 20px; } .story_popup { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0, 0, 0, .7); display: flex; justify-content: center; align-items: center; z-index: 1000; width: 100%; height: 100%; opacity: 0; visibility: hidden; transition: opacity .3s cubic-bezier(0.33,0,0.2,1), visibility .3s cubic-bezier(0.33,0,0.2,1); } .popup_box { background-color: white; width: 1200px; padding: 108px 120px; max-height: 90vh; overflow-y: auto; border-radius: 10px; position: relative; box-shadow: 0 5px 15px rgba(0, 0, 0, .3); box-sizing: border-box; transform: translateY(20px); color: #000; box-sizing: border-box; opacity: 0; transition: transform .3s cubic-bezier(0.33,0,0.2,1), opacity .3s cubic-bezier(0.33,0,0.2,1); } .popup-close { position: absolute; width: 48px; height: 48px; background: #171717 url(https://p3-ofp.static.pub/ShareResource/tablets/tablets-brand/close-icon.svg) no-repeat; background-size: 22px 22px; border-radius: 50px; top: 50px; right: 80px; cursor: pointer; background-position: center; } .story_popup .popup_box .popup_content { display: none; } .story_popup .popup_box .popup_content .popup_btn { background: transparent linear-gradient(180deg, #b8252e 0%, #5e1418 100%) 0% 0% no-repeat padding-box; border-radius: 29px; color: #fff; border: 0; width: max-content; padding: 10px 30px; font: normal normal bold 16px/16px 'Noto Sans JP'; letter-spacing: 0px; text-align: center; text-decoration: none; display: block; margin-top: 20px; } .hero_model { background: #0a0a0c 0% 0% no-repeat padding-box; padding-top: 3em; padding-bottom: 10em; margin-top: -1px; } .hero_model .hero_model_logo img { width: 19em; height: auto; margin: 0 auto; display: block; } .hero_model .hero_model_desc { text-align: center; font: normal normal normal 1.6em/3em 'Noto Sans JP'; letter-spacing: -1.04px; color: #fff; } .hero_model .hero_model_img { max-width: 1200px; display: flex; margin: 0 auto; margin-top: 1em; } .hero_model .hero_model_img .item_img { border-radius: 20px; position: relative; flex: 1; transition: top .5s ease; top: 0; } .hero_model .hero_model_img .item_img:nth-child(2) { margin: 0 1em; } .hero_model .hero_model_img .item_img img { width: 100%; } .hero_model .hero_model_img .item_img .hero_model_shadow { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #000; opacity: 0; text-align: left; padding: 25% 10%; box-sizing: border-box; font: normal normal bold 1.2em/1.5em 'Noto Sans JP'; letter-spacing: -0.76px; color: #fff; transition: all .5s ease; cursor: pointer; padding-top: 45%; } .hero_model .hero_model_img .item_img:hover { top: -10px; } .hero_model .hero_model_img .item_img:hover .hero_model_shadow { opacity: .7; padding-top: 25%; } .white_curve { position: relative; background-color: transparent; overflow: hidden; margin-top: -63px; z-index: 60; height: 80px; } .white_curve::before { content: ""; position: absolute; left: 50%; width: 110%; height: 110px; background-color: #fff; border-top-left-radius: 50% 100%; border-top-right-radius: 50% 100%; transform: scaleX(1.5); z-index: 1; transform: translateX(-50%) rotateY(180deg); } .category_01_title { max-width: 1200px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; } .category_01_title .category_logo img { width: 450px; margin-right: 50px; } .category_01_title p { font: normal normal 900 33px/43px 'Noto Sans JP'; letter-spacing: 0px; color: #000; margin: 10px 0; padding-left: 30px; } .category_01_title p span { color: #e1251b; font-size: 44px; line-height: 43px; } .category_01_title p span:last-child { color: #000; } .category_01_title .btn1 { background: transparent linear-gradient(180deg, #b8252e 0%, #5e1418 100%) 0% 0% no-repeat padding-box; border-radius: 29px; color: #fff; border: 0; width: 766px; height: 57px; font: normal normal bold 21px / 57px 'Noto Sans JP'; letter-spacing: 0px; text-align: center; text-decoration: none; } .add-content { margin-top: 40px; } .product-card-background { padding-bottom: 0; } .table-product { margin-top: 30px; } .product-card-slogan-long { width: 540px; } .product-card-series-title { font-size: 31px; } .tableBoxMainPopUpAllWrap-aura { display: none; } .premium-hero-container.has-offers { margin-bottom: 0; padding-bottom: 0; } .product-card-1-update { margin-top: 20px; } .pc { display: block; } .sp { display: none; } .product-card-final-price em { font-style: normal  !important; } .tableBoxMainPopUpAllWrap-oc .bottom-link p { background-color: #871c23; } .product-card-content { position: relative; } .product-card-content-add { font-size: 16px; position: absolute; right: 0; bottom: -10px; } .product-card-slogan { border-radius: 20px; } .product-card-detail-background { background: #eaeef5 0% 0% no-repeat padding-box; border-radius: 15px; } .product-card-spec-txt { width: 68%; } .product-card-spec-background { background: #c9d0f0 0% 0% no-repeat padding-box; } .product-card-price-name { width: 40%; } .product-card-price-line { width: 45%; } .product-card-price-number { width: 15%; } .product-card-final-price span { color: #b8252e; } .product-card-cto-button { margin-top: 15px; height: auto; border-radius: 8px; position: relative; padding: 15px 45px; } .product-card-cto-button::after { content: '▶'; position: absolute; width: 23px; height: 23px; top: 15px; right: 10px; } .product-card-content .product-card:last-child .product-card-detail-background { background-color: #fdf1f1; } .product-card-content .product-card:last-child .product-card-spec-background { background-color: #f3dcdc; } .product-card-spec-button { padding: 3px 12px 3px; display: flex; align-items: center; text-align: left; } .product-card-3 { margin-top: 15px; } .product-card-discounts { color: #000; font-size: 32px; position: relative; } .product-card-discounts::before { content: ''; position: absolute; top: 50%; left: 0; background-color: #000; width: 100%; height: 2px; } .product-card-discounts-price { margin-top: 0; } .product-card-discounts-price span { font-size: 30px; } .product-card-spec-txt { text-align: right; } .black_curve { margin-top: 70px; } .black_curve::before { background-color: #0a0a0c; } .category_02_title { max-width: 1920px; margin-top: -15px; background-color: #0a0a0c; position: relative; z-index: 100; outline: 1px solid #0a0a0c; } .category_02_title p, .category_02_title p span:last-child { color: #fff; } .category_02_title .game_img { max-width: 1200px; margin: 30px auto; } .category_02_title .game_img img { width: 100%; } .product_list .mn_title { text-align: left; font: normal normal bold 42px/27px 'Noto Sans JP'; letter-spacing: -0.84px; color: #e1251b; line-height: 1.2em; padding-bottom: .5em; padding-left: 3rem; position: relative; padding-right: 1em; } .product_list .mn_title span { font: normal normal bold 34px/27px 'Noto Sans JP'; color: #fff; } .product_list .mn_title::after { content: ''; position: absolute; right: 5px; top: 50%; transform: translateY(-50%); width: 0; height: 0; border-left: 12px solid transparent; border-right: 12px solid transparent; border-top: 15px solid white; } .product_list .peripheral_inner ul { list-style: none; } .product_list .peripheral_inner ul li img { width: 100%; } section#peripheral .peripheral_inner:after { background: transparent linear-gradient(142deg, #a8222a 0%, #541115 100%) 0% 0% no-repeat padding-box; } section#peripheral .peripheral_inner .periph_list li { box-shadow: 6px 6px 0px #aaa; border: 2px solid #707070; } section#peripheral .peripheral_inner .periph_list li .periph_txt_wrapper .periph_link a { text-decoration: none; } .lenovo_pro_video { width: 1040px; margin: 0 auto; padding-bottom: 50px; margin-top: 30px; } .lenovo_pro_video .lenovo_pro_logo { text-align: center; } .lenovo_pro_video .lenovo_pro_logo img { width: 300px; margin-bottom: 15px; } .lenovo_pro_video iframe { width: 100%; height: 585px; border-radius: 15px; } @media screen and (max-width: 1200px) { .tableBoxMain { overflow: hidden; } .product-card-slogan-long { width: 90%; font-size: 16px; } .product-card-spec { width: 85%; } .product-card-series-title { font-size: 26px; } .tableBoxMainBanner .tbb_text .tbb_h1 { font-size: 2.2em; line-height: 1.2em; } .tableBoxMainBanner .tbb_text .tbb_date { font-size: 1.4em; margin: 5px 0; } .black_part { margin-top: -35px; } .black_part::before { width: 150%; height: 120px; } .black_part .thinkpad_33_history { margin-top: 1em; } .black_part .thinkpad_33_history img { width: 250px; } .history_line { display: none; } .history_line_mobile { display: block; } .history_line_mobile { background: #0a0a0c 0% 0% no-repeat padding-box; padding-top: 2em; width: 100%; text-align: center; } .history_line_mobile img { width: 80%; margin: 0 auto; } .history_desc { padding: 2em 1em; } .sale_category .sale .out_box { width: 100%; padding: .5em; } .black_part .quality_logo img { width: 250px; } .black_part .quality_video .left_video { width: 60%; } .black_part .quality_video .left_video .video_item video { height: 385px; } .black_part .quality_video .right_nav { width: 38%; } .story{ padding: 3em 1em 0; } .story .story_logo img { width: 250px; } .popup_box { width: 90%; } .hero_model { padding: 3em 1em 8em; } .white_curve { margin-top: -35px; } .white_curve::before { width: 150%; height: 120px; } .category_01_title p { font-size: 30px; padding-left: 15px; } .category_01_title p span { font-size: 42px; } .category_01_title .btn1 { width: 730px; } .product-card-background { padding-bottom: 40px; } .product-card-1 { display: flex; } .product-card-content .product-card-point { width: 70px; } .product-card-background .product-card-banner-pc { display: none; } .product-card-background .product-card-banner-sp { display: block; } .category_02_title { padding: 0 1em; } .category_02_title p { text-align: center; } .lenovo_pro_video { width: 100%; } .lenovo_pro_video .lenovo_pro_logo img { width: 250px } } @media screen and (max-width: 1024px) { .sale_category .sale .circle:hover { transform: scale(1); } .black_part .quality_video { height: auto; padding: 1em; padding-bottom: 3em; } .black_part .quality_video .left_video { width: 100%; display: block; } .black_part .quality_video .right_nav { width: 100%; float: none; height: 330px; } .quality_video .right_nav .nav_item .item_top .item_title { padding-right: 0; } .black_part .quality_video .right_nav .nav_item.active_item .item_desc { height: 90px; } .story { height: 620px; } .story .story_img .item_img .img .hover_shadow { opacity: unset; background: rgba(0, 0, 0, .5); font-size: 16px; align-items: center; display: flex; justify-content: center; } .story .story_img .item_img .img:hover .hover_shadow { opacity: unset; } .hero_model .hero_model_img .item_img .hero_model_shadow { opacity: unset; background: rgba(0, 0, 0, .5); font-size: 16px; align-items: center; display: flex; padding: 0 10%; justify-content: center; } .hero_model .hero_model_img .item_img:hover { top: 0; } .hero_model .hero_model_img .item_img:hover .hero_model_shadow { opacity: .7; padding-top: 0; } } @media screen and (max-width: 768px) { .product-card-1-update { margin-top: 0px; } .sp { display: block  !important; } .pc { display: none  !important; } .product-card-final-price span { font-size: 22px; } .product-card-4 { align-items: center; } .product-card-final-price { font-size: 16px; } } @media screen and (max-width: 768px) { .tableBoxMainBanner .tbb_text { left: 50%; transform: translateX(-50%); width: 293px; top: 45%; } .tableBoxMainBanner .tbb_text .tbb_date { width: 100%; margin: .5em 0; } .tableBoxMainBanner .thnikpad_33_logo { width: 10em; margin-left: 2px; } .black_part { margin-top: -30px; } .black_part::before { width: 150%; height: 120px; } .black_part .thinkpad_33_history { margin-top: 1em; } .black_part .thinkpad_33_history img { width: 200px; } .history_line_mobile img { width: 90%; } .history_desc { width: 100%; } .history_desc li { font-size: 14px; } .history_desc li button { width: 100%; height: 3em; line-height: 3em; border-radius: 2em; } .sale_category { height: 530px; } .sale_category .sale { display: block; width: 70%; height: 260px; } .sale_category .sale_category_left { border-radius: 0px 60px 60px 0px; background: transparent url(https://p4-ofp.static.pub/ShareResource/JPResource/JP-Images/content-page/thinkpad-bd33/sale-left-bg-sp.png) 3% 4% no-repeat padding-box; } .sale_category .sale .circle { width: 140px; height: 140px; } .sale_category .sale .circle p { font-size: 14px; width: 90%; } .sale_category .sale .sale_desc { font-size: 12px; font-weight: 400; margin-top: .6em; } .sale_category .sale .out_box button { border-radius: 1em; height: 2.1em; line-height: 2.1em; font-size: 12px; width: 10em; font-weight: 400; margin-top: .6em; } .sale_category .sale_category_right { margin-top: 15px; border-radius: 60px 0px 0px 60px; background: transparent url(https://p2-ofp.static.pub/ShareResource/JPResource/JP-Images/content-page/thinkpad-bd33/sale-right-bg-sp.png) 3% 15% no-repeat padding-box; } .sale_category .sale_category_right .sale_desc { margin-top: 0; } .black_part .quality_logo img { width: 200px; } .black_part .quality_desc { font-size: 1em; line-height: 1.5em; margin: 1em 0; } .black_part .quality_video .right_nav { height: 385px; } .black_part .quality_video .right_nav .nav_item.active_item .item_desc { height: 145px; } .story { padding: 2em 1em 0; height: 700px; background: transparent url('https://p4-ofp.static.pub/ShareResource/JPResource/JP-Images/content-page/thinkpad-bd33/content-story-bg-sp.png') 0% 10% no-repeat padding-box; } .story .story_logo img { width: 200px; } .story .story_desc { font-size: 1em; line-height: 1.5em; margin: 1em 0; } .story .story_btn { text-align: center; width: 100%; font: normal normal bold 1em/2em 'Noto Sans JP'; color: #000; border: 0; height: 3em; line-height: 3em; background: #fff 0% 0% no-repeat padding-box; border: 1px solid #707070; border-radius: 2em; margin-bottom: 1em; } .story .story_img { margin-top: 15px; } .story .story_img .item_img .img .hover_shadow { font-size: 14px; } .popup_box { padding: 50px; width: 95%; } .popup-close { top: 10px; right: 20px; } .hero_model { padding-bottom: 8em; margin-top: -1px; } .hero_model .hero_model_logo img { width: 200px; } .hero_model .hero_model_desc { font-size: 1em; line-height: 1.5em; margin: 1em 0; } .hero_model .hero_model_img { display: block; padding: 0 1em; } .hero_model .hero_model_img .item_img { display: flex; justify-content: space-between; align-items: center; } .hero_model .hero_model_img .item_img img { width: 60%; } .hero_model .hero_model_img .mobile_text { width: 35%; font-size: 14px; } .hero_model .hero_model_img .item_img:nth-child(2) { margin: 1em 0; } .white_curve { height: 63px; } .white_curve::before { width: 150%; } .category_01_title { padding: 0 1em; margin-top: -10px; position: relative; z-index: 100; } .category_01_title .category_logo img { width: 100%; } .category_01_title p { padding-left: 0; font-size: 1.5em; } .category_01_title p span { font-size: 1.5em; } .category_01_title .btn1 { width: 100%; height: 3em; line-height: 3em; font-size: 1em; } .product-card-background { padding: 0 1em; } .product-card-h2 h2 { font-family: 'Noto Sans JP'; line-height: 1.3; } .product-card-title { text-align: center; } .product-card-1 { display: block; } .product-card-spec { width: 100%; } .product-card-slogan-long { width: 100%; margin-left: 0; } .product-card-spec-txt { width: 60%; } .product-card-spec-background { padding: 10px; } .product-card-price-message { align-items: end; } .product-card-price-name { width: 35%; } .product-card-price-line { width: 45%; } .product-card-discounts { font-size: 24px; margin-left: 0; } .product-card-discounts-price { margin-right: 0; font-size: 16px; } .product-card-discounts-price span { font-size: 22px; } .product-card-final-price { margin-left: 0; } .product-card-4 a { width: 80%; } .product-card-cto-button { width: 100%; padding: 1em .5em; font-size: 14px; margin-top: 0; } .product-card-cto-button::after { top: 14px; right: 10px; } section#peripheral { padding: 0; width: 100%; } .product_list .mn_title { display: block; width: 90%; box-sizing: border-box; font-size: 1.5em; padding-left: .5em; line-height: 1.5em; letter-spacing: 0; margin: 0 auto; } .product_list .mn_title span { font: normal normal bold 16px / 1.5em 'Noto Sans JP'; } section#peripheral .peripheral_inner:before { background: transparent linear-gradient(142deg, #a8222a 0%, #541115 100%) 0% 0% no-repeat padding-box; } .lenovo_pro_video .lenovo_pro_logo img { width: 200px } .lenovo_pro_video iframe { height: 450px; } } @media screen and (max-width: 650px) { .story { height: 620px; } } @media screen and (max-width: 500px) { .story { height: 520px; } .story .story_img .item_img .img .hover_shadow { font-size: 12px; } .black_part .quality_video .left_video .video_item video { height: 220px; } } @media screen and (max-width: 400px) { .black_part .quality_video .right_nav .nav_item { padding: 0 .5em; } } @media screen and (max-width: 380px) { .tableBoxMainBanner .tbb_text { top: 30%; } .sale_category .sale { width: 80%; } .sale_category .sale .out_box { padding: 1em 0; } .sale_category .sale .circle { width: 120px; height: 120px; } .product_list .mn_title { height: auto; padding-bottom: 10px; line-height: 0; padding-left: 0; } .black_part .quality_video .right_nav { height: 395px; } .black_part .quality_video .right_nav .nav_item.active_item .item_desc { height: 160px; } .product-card-cto-button::after { display: none; } }