@charset "UTF-8"; .dummy img, header img { margin: 0 auto; vertical-align: bottom; } header { background-color: #f2f2f2; } #mfe-footer-container { background-color: #bbb; } #g-station img { vertical-align: bottom; } #g-station ul { margin: 0; padding: 0; } #g-station li { list-style-type: none; } #g-station .g-wrap { width: 1100px; margin: 0 auto; } #g-station .relative { position: relative; } #g-station .g-center { text-align: center; margin: 0 auto; } #g-station .square-btn { display: block; width: 330px; background-color: #163661; border: solid 1px #4c8ad3; color: #fff; font-size: 18px; text-align: center; padding: 16px; position: relative; } #g-station .square-btn2 { width: 330px; margin: 30px auto 80px auto; } #g-station .square-btn-top { left: 380px; top: -85px; } #g-station .square-btn::after { content: ''; display: block; width: 11px; height: 11px; border-top: solid 1px #fff; border-right: solid 1px #fff; -webkit-transform: rotate(45deg); transform: rotate(45deg); position: absolute; top: 26px; right: 20px; } #g-station .square-btn2::after { transform: rotate(45deg)translate(0, -50%); top: 50%; } #g-station .square-btn:hover { background-color: #d98500; border-color: #fff09e; box-shadow: 0px 0px 3.6px 1.4px rgba(255, 207, 130, .25); transition: .5s; } #g-station { position: relative; } #g-station #g-sidebar { position: absolute; top: 0; bottom: 0; width: 240px; background-color: rgb(0, 0, 0, .5); border-right: solid 1px #22272d; z-index: 10; } #g-station #g-sidebar h1 { margin: 30px 10px 30px 30px; } #g-station #g-sidebar .gmenu { margin-bottom: 80px; } #g-station #g-sidebar .gmenu>li>a { display: block; padding: 10px 0 6px 30px; } #g-station #g-head { background: url('//static.lenovo.com/jp/Campaign-page/2020-Gaming-doujou-redesign/legion-portal/background/bg_top_head.png') 0 -200px; padding: 20px 0; } #g-station #g-series { background: url('//static.lenovo.com/jp/Campaign-page/2020-Gaming-doujou-redesign/legion-portal/background/leginavi_kv7-new.jpg') top left; background-size: 100% auto; background-color: #05121b; padding: 0 0 60px 280px; position: relative; background-repeat: no-repeat; } #g-station #g-series .legion-series { top: -20px; width: 1100px; position: relative; margin-bottom: 30px; } #g-station #g-series .legion-series h2 { margin-bottom: 20px; } #g-station #g-series .product-visual { width: 1250px; margin-left: -75px; max-width: none; } @media(max-width:1500px) { #g-station #g-series .product-visual { width: 1100px; margin-left: 0; } } #g-station #g-series .legion-series .square-btn { } #g-station .square-btn2 { width: 360px; } #g-station #g-series .legion-series .lineup { width: 100%; margin-bottom: 10px; } #g-station #g-series .legion-series .lineup-ttl { margin-bottom: 10px; } #g-station #g-series .mark-box { width: 170px; margin-top: 10px; margin-bottom: 5px; height: 23px; display: flex; } #g-station #g-series .mark-box.new-mark::before { content: "NEW"; display: inline-block; color: #fff; background-color: #e2231a; font-size: 12px; padding: 1px 5px; margin-right: 10px; } #g-station #g-series .mark-box.web-mark::after { content: "WEB限定モデル"; color: #fff; background-color: #dc143c; display: inline-block; font-size: 12px; padding: 1px 10px; } #g-station #g-series .legion-series .desktop { width: 80%; margin: 35px auto 0 auto; } #g-station #g-series .legion-series .notebook { padding-top: 50px; } #g-station #g-series .legion-series .lineup-img { display: flex; flex-wrap: wrap; } #g-station #g-series .legion-series .lineup-img li { display: flex; width: 20%; border: solid 1px #4c89da; border-left: none; padding: 10px 10px 20px 10px; align-items: center; background-color: rgb(0, 0, 0, .3); flex-direction: column; } #g-station #g-series .legion-series .desktop .lineup-img li { width: 25%; } #g-station #g-series .legion-series .lineup-img li.lineup-dummy { opacity: 0; } #g-station #g-series .legion-series .lineup-img li:nth-of-type(1), #g-station #g-series .legion-series .lineup-img li:nth-of-type(6), #g-station #g-series .legion-series .lineup-img li:nth-of-type(12) { border-left: solid 1px #4c89da; } #g-series .lineup-img .lineup-btn { display: block; border: 1px solid #4a688b; width: 85%; background-color: #112b4e; color: #fff; margin: 20px 0 0 0; padding: 5px 10px; font-size: 14px; } #g-series .lineup-img .product-btn::before, #g-series .lineup-img .review-btn::before { content: ''; display: inline-block; width: 16px; height: 16px; margin-right: 5px; vertical-align: sub; background-image: url(//static.lenovo.com/jp/Campaign-page/2020-Gaming-doujou-redesign/legion-portal/top/white-arrow.png); background-size: cover; } #g-series .lineup-img .review-btn::before { transform: rotate(90deg); } #g-series .lineup-img .lineup-btn:hover { background-color: rgba(17, 80, 128, .95); transition: background-color .2s; } #g-series .lineup-img .review-btn-box { display: block; color: #fff; position: relative; margin: 8px 0 0px 0; } #g-series .lineup-img .review-btn-box .review-btn { display: block; color: #fff; width: 100%; height: 100%; cursor: pointer; } #g-series .lineup-img .review-btn-box .review-slider { display: block; position: absolute; top: 36px; width: 350px; left: -90px; z-index: 3; visibility: hidden; opacity: 0; transition: all .2s; } #g-series .lineup-img .review-btn-box .review-slider a { padding: 15px; background-color: rgba(17, 80, 128, .95); border-left: 1px solid #000; border-right: 1px solid #000; } #g-series .lineup-img .review-btn-box .review-slider a p { color: #fff; margin-bottom: 0; font-size: 12px; } #g-series .lineup-img .review-btn-box .review-slider a p::before { content: ''; display: inline-block; width: 20px; height: 20px; vertical-align: sub; background-image: url(//static.lenovo.com/jp/Campaign-page/2020-Gaming-doujou-redesign/legion-portal/top/white-arrow.png); background-size: cover; } #g-series .lineup-img .review-btn-box .review-slider::before { content: ""; display: block; width: 0; height: 0px; border-right: 10px solid transparent; border-bottom: 17px solid rgba(17, 80, 128, .95); border-left: 10px solid transparent; margin: 0 auto -1px auto; } #g-series .lineup-img .review-btn-box:hover .review-slider { visibility: visible; opacity: 1; } #g-series .review-slider .slick-arrow { position: absolute; top: 50%; z-index: 5; width: 11.5%; border-radius: 50%; box-shadow: #000 0px 0px 10px; } #g-series .review-slider .prev { left: 0px; transform: translate(0, -50%); } #g-series .review-slider .next { right: 0px; transform: translate(0, -50%); } #g-station #g-series .other-series { display: flex; margin-bottom: 40px; } #g-station #g-series .other-series div { flex: 1; } #g-station #g-series .other-series div ul { margin-top: 20px; margin-bottom: 35px; display: flex; } #g-station #g-series .other-series div ul li { flex: 1; position: relative; } #g-station #g-series .other-series2 ul { display: flex; } #g-station #g-series .other-series2 li { width: 25%; margin-top: 20px; margin-bottom: 35px; position: relative; } #g-station #g-series .mark-box2 { position: absolute; display: flex; height: 18px; left: 105px; top: -5px; } #g-station #g-series .mark-box2.new-mark::before { content: "NEW"; display: inline-block; color: #fff; background-color: #e2231a; font-size: 12px; padding: 0px 5px; line-height: 1.5; margin-right: 5px; } #g-station #g-series .mark-box2.web-mark::after { content: "WEB限定モデル"; color: #fff; background-color: #dc143c; display: inline-block; font-size: 12px; padding: 0px 10px; line-height: 1.5; } #g-station #g-series .ultimate-support { width: 100%; max-width: 650px; margin: 0 auto; } #g-station #g-series .ultimate-support img { max-width: 100%; } #g-station #g-stories { background: url('//static.lenovo.com/jp/Campaign-page/2020-Gaming-doujou-redesign/legion-portal/background/bg_top_stories.jpg') top left; background-size: cover; padding: 80px 0 50px 280px; } #g-station #g-stories h2 { margin-bottom: 40px; } #g-station #g-stories li a { display: block; color: #fff; font-size: 18px; margin-bottom: 10px; position: relative; padding-left: 26px; } #g-station #g-stories li a::before { content: ''; display: block; width: 11px; height: 11px; border-top: solid 2px #fff; border-right: solid 2px #fff; -webkit-transform: rotate(45deg); transform: rotate(45deg); position: absolute; top: 8px; left: 0; } #g-station #g-camp { background: url('//static.lenovo.com/jp/Campaign-page/2020-Gaming-doujou-redesign/legion-portal/background/bg_top_camp.png') top left; background-size: cover; padding: 80px 0 50px 280px; } #g-station #g-camp h2 { margin-bottom: 20px; } #g-station #g-camp ul { display: flex; flex-wrap: wrap; justify-content: space-between; margin-bottom: 20px; } #g-station #g-camp ul li { width: 548px; margin-bottom: 8px; } #g-station #g-doujou { background: url('//static.lenovo.com/jp/Campaign-page/2020-Gaming-doujou-redesign/legion-portal/background/bg_top_doujou.png') top left; background-size: cover; padding: 80px 0 50px 280px; } #g-station #g-doujou h2 { margin-bottom: 20px; } #g-station #g-doujou #g-category { position: absolute; top: 10px; right: 0; font-size: 16px; width: 200px; height: 24px; } #g-station #g-doujou .articles { display: flex; flex-wrap: wrap; justify-content: space-between; margin-bottom: 20px; } #g-station #g-doujou .article { width: 354px; background-color: rgba(0, 0, 0, .5); margin-bottom: 10px; padding: 10px; position: relative; } #g-station #g-doujou .article img { margin-bottom: 10px; } #g-station #g-doujou .ttl { font-size: 18px; color: #fff; min-height: 120px; } #g-station #g-doujou .date { font-size: 14px; color: #fff; margin-bottom: 10px; } #g-station #g-doujou .tag { width: fit-content; width: -moz-fit-content; font-size: 12px; color: #5881cd; border: solid 1px #5881cd; padding: 0 10px; margin-bottom: 20px; } #g-station #g-doujou .article a { position: absolute; top: 0; left: 0; right: 0; bottom: 0; } #g-station .office { margin: 30px 0; } #g-station .copyright { color: #fff; font-size: 12px; } @media (min-width: 770px) { #g-station .sp, .dummy .sp { display: none; } #g-station .head-top { margin-left: 280px; width: calc(100% - 290px); } #g-station .head-top .id-portal { float: left; width: 440px; margin: 20px 0 30px; } #g-station .head-top .windows { float: right; margin: 0 40px 20px 0; width: 380px; } #g-station #g-head .slides .slick-dots { display: flex; justify-content: flex-start; font-size: 0; margin-left: calc(50% - 550px); } #g-station #g-head .slides .slick-dots li { margin: 20px 5px; } #g-station #g-head .slides .slick-dots button { -webkit-appearance: none; -moz-appearance: none; appearance: none; background-color: #fff; color: #fff; border: none; padding: 0; margin: 0; width: 16px; height: 16px; } #g-station #g-head .slides .slick-dots .slick-active button { background-color: #2a4168; color: #2a4168; } #g-station #g-sidebar .gmenu>li:hover { background-color: #3b5696; transition: .5s; } #g-station #g-sidebar .gmenu .submenu { display: none; } #g-station #g-sidebar .gmenu li:hover .stories { display: block; position: absolute; top: 60px; left: 239px; width: 800px; background: url('//static.lenovo.com/jp/Campaign-page/2020-Gaming-doujou-redesign/legion-portal/background/bg_menu_stories.png'); background-size: cover; padding: 50px; } #g-station #g-sidebar .gmenu li:hover .campaign { display: flex; flex-wrap: wrap; justify-content: space-between; position: absolute; top: 80px; left: 239px; width: 800px; background: url('//static.lenovo.com/jp/Campaign-page/2020-Gaming-doujou-redesign/legion-portal/background/bg_menu_cp.png'); background-size: cover; padding: 50px; } #g-station #g-sidebar .gmenu .campaign li { width: 49%; margin-bottom: 20px; } #g-station #g-sidebar .gmenu .campaign .ttl { width: 100%; } #g-station #g-sidebar .gmenu li:hover .doujou { display: block; position: absolute; top: 120px; left: 239px; width: 800px; background: url('//static.lenovo.com/jp/Campaign-page/2020-Gaming-doujou-redesign/legion-portal/background/bg_menu_doujou.png'); background-size: cover; padding: 50px; } #g-station #g-sidebar .gmenu .submenu .ttl { color: #fff; font-size: 20px; margin-bottom: 30px; } #g-station #g-sidebar .gmenu .submenu .links { display: flex; justify-content: space-between; } #g-station #g-sidebar .gmenu .submenu .links ul { width: 194px; } #g-station #g-sidebar .gmenu .submenu .cat-ttl { background-color: #405e9d; color: #fff; text-align: center; margin-bottom: 10px; } #g-station #g-sidebar .gmenu .submenu .links li:not(.cat-ttl) { font-size: 14px; margin-bottom: 4px; } #g-station #g-sidebar .gmenu .submenu li a { color: #fff; } #g-station #g-sidebar .gmenu .submenu .links li a:visited { color: #ccc; } #g-station.thisisdoujou #g-sidebar .gmenu .thisisdoujou { background-color: #3b5696; } #g-station #g-sidebar h2 { margin: 0 0 10px 30px; } #g-station #g-sidebar h3 { margin: 0 0 10px 30px; } #g-station #g-sidebar .items { margin: 0 10px 20px 10px; display: flex; flex-wrap: wrap; } #g-station #g-sidebar .items li { width: 50%; display: flex; align-items: center; justify-content: flex-end; flex-direction: column; margin-bottom: 10px; } #g-sidebar .items li.new-mark::before { transform: translate(-20px, 0); content: "NEW"; display: inline-block; color: #fff; background-color: #e2231a; font-size: 10px; padding: 1px 5px; } #g-station #g-sidebar .banner { margin: 0 0 20px 30px; } #g-station #g-sidebar .banner li { margin-bottom: 10px; } #g-station #g-sidebar .banner li a:hover { opacity: .7; } #g-station .clickable { position: absolute; } #g-station .clickable a { position: absolute; display: block; } #g-station .clickable .l-500pi a { width: 300px; height: 150px; left: 360px; top: 120px; } #g-station .clickable .l-500i a { width: 310px; height: 200px; top: 284px; left: 100px; } #g-station .clickable .l-750i a { width: 300px; height: 230px; left: 440px; top: 280px; } #g-station .clickable .l-t550i a { width: 250px; height: 450px; top: 70px; left: 740px; } } @media (max-width: 769px) { #g-station .pc, .dummy .pc, #g-station .hide { display: none; } #g-station img { max-width: 100%; } #g-station .g-wrap { width: 95vw; margin: 0 auto; } #g-station .relative { position: relative; } #g-station .g-center { text-align: center; margin: 0 auto; } #g-station .square-btn { width: 60vw; top: 20px; left: 0; } #g-station .square-btn2 { width: 85vw; font-size: 16px; } #g-station { position: relative; } #g-station #g-sidebar { position: absolute; width: 80vw; background-color: rgba(0, 42, 89, .94); margin-left: -80vw; } #g-station #g-sidebar-open { position: fixed; margin-left: 80vw; top: 60vh; z-index: 10; width: 15vw; cursor: pointer; opacity: .8; } .sidebar-close { display: none; } #g-station #g-sidebar h1 { margin: 30px 30px 0; } #g-station #g-sidebar h1 img { width: 100%; } #g-station #g-sidebar .gmenu { margin-bottom: 20px; } #g-station #g-sidebar .gmenu>li>a { display: block; padding: 20px 30px; position: relative; } #g-station #g-sidebar .gmenu>li.active { background-color: #3b5696; } #g-station #g-sidebar .gmenu .submenu { display: none; } #g-station #g-sidebar .gmenu li .stories { width: 100%; background: none; background-color: #0c2947; padding: 20px 20px 10px; } #g-station #g-sidebar .gmenu li .stories li { margin-bottom: 30px; } #g-station #g-sidebar .gmenu li .campaign { width: 100%; background: none; background-color: #0c2947; padding: 20px 20px 10px; } #g-station #g-sidebar .gmenu .campaign li { width: 100%; margin-bottom: 20px; } #g-station #g-sidebar .gmenu .campaign .ttl { width: 100%; } #g-station #g-sidebar .gmenu li .doujou { width: 100%; background: none; background-color: #0c2947; padding: 20px 20px 10px; } #g-station #g-sidebar .gmenu .submenu .links { display: block; } #g-station #g-sidebar .gmenu .submenu .links ul { width: 100%; } #g-station #g-sidebar .gmenu .submenu .cat-ttl { background-color: #405e9d; color: #fff; text-align: center; margin-bottom: 10px; } #g-station #g-sidebar .gmenu .submenu .links li:not(.cat-ttl) { font-size: 14px; margin-bottom: 4px; } #g-station #g-sidebar .gmenu .submenu li a { color: #fff; } #g-station #g-sidebar .gmenu .submenu .links li a:visited { color: #ccc; } #g-station #g-sidebar h2 { margin: 0 0 10px 30px; } #g-station #g-sidebar h3 { margin: 0 0 10px 30px; } #g-station #g-sidebar .items { margin: 0 30px 20px 30px; display: flex; flex-wrap: wrap; } #g-station #g-sidebar .items li { width: 50%; display: flex; align-items: center; justify-content: flex-end; flex-direction: column; margin-bottom: 10px; } #g-sidebar .items li.new-mark::before { transform: translate(-7vw, 0); content: "NEW"; display: inline-block; color: #fff; background-color: #e2231a; font-size: 2vw; padding: .3vw .7vw; } #g-station #g-sidebar .banner { margin: 0 0 20px 30px; } #g-station #g-sidebar .banner li { margin-bottom: 10px; } #g-station #g-sidebar .banner li a:hover { opacity: .7; } #g-station #g-head { background: url('//static.lenovo.com/jp/Campaign-page/2020-Gaming-doujou-redesign/legion-portal/background/bg_top_head.png') 0 -50px; background-size: 220%; background-repeat: no-repeat; position: relative; padding: 20px 0; } #g-station #g-head .id-portal { width: 18vw; margin-left: 2.5vw; float: left; } #g-station #g-head .windows { width: 70vw; margin: 0 0 0 5vw; } #g-station #g-head .slides { position: relative; margin: 20px auto 40px; width: 95vw; } #g-station #g-head .slides .prev { position: absolute; width: 8vw; top: 30vw; left: 3px; z-index: 5 } #g-station #g-head .slides .next { position: absolute; width: 8vw; top: 30vw; right: 3px; } #g-station #g-head .slides .slick-dots { display: flex; justify-content: center; font-size: 0; } #g-station #g-head .slides .slick-dots li { margin: 3vw 1vw; } #g-station #g-head .slides .slick-dots button { -webkit-appearance: none; -moz-appearance: none; appearance: none; background-color: #fff; color: #fff; border: none; padding: 0; margin: 0; width: 3vw; height: 3vw; } #g-station #g-head .slides .slick-dots .slick-active button { background-color: #2a4168; color: #2a4168; } #g-station #g-head .head-intel { width: 60vw; position: absolute; right: 2.5vw; bottom: 5vw; } #g-station #g-series { padding: 0 0 10px; background-repeat: no-repeat; background-color: #07111b; } #g-station #g-series .legion-series { position: absolute; top: 10px; width: 95vw; position: relative; margin-bottom: 30px; } #g-station #g-series .legion-series h2 { } #g-station #g-series .legion-series h2 img { width: 80vw; } #g-station #g-series .product-visual { margin: 60px auto 0 auto  !important; width: 93%; display: block; } #g-station #g-series .legion-series .square-btn { margin: 0 auto; } #g-station #g-series .legion-series .lineup { display: block; margin: 20px auto; } #g-station #g-series .legion-series .lineup-ttl { margin-bottom: 10px; } #g-station #g-series .lineup li.new-mark::before { transform: translate(-25vw, 1vw); font-size: 2.5vw; padding: .5vw 1.5vw; } #g-station #g-series .legion-series .desktop { margin-bottom: 20px; width: 100%; } #g-station #g-series .legion-series .notebook { margin-bottom: 20px; } #g-station #g-series .legion-series .lineup-img { display: flex; flex-wrap: wrap; background-color: rgb(0, 0, 0, .3); border-right: none; height: auto; } #g-station #g-series .legion-series .lineup-img li { width: 50%; padding: 10px 7% 20px 7%; display: flex; align-items: flex-end; } #g-station #g-series .mark-box { width: 100%; } #g-station #g-series .legion-series .desktop .lineup-img li { width: 50%; } #g-station #g-series .legion-series .lineup-img li:nth-of-type(2n+1) { border-left: solid 1px #4c89da; } #g-station #g-series .legion-series .lineup-img li:nth-of-type(6) { border-left: none; } #g-station #g-series .legion-series .lineup-img li.lineup-dummy { display: none; } #g-series .lineup-img .lineup-btn { margin: 15px 0 0 0; width: 100%; padding: 3px 3px; font-size: 12px; } #g-series #review-btn-bg { position: fixed; top: 0; left: 0; width: 100%; height: 100vh; background-color: rgba(0, 0, 0, .75); z-index: 499; opacity: 0; visibility: hidden; } #g-series .lineup-img .review-btn-box { margin: 8px 0 0px 0; } #g-series .lineup-img .review-btn-box .review-slider { position: fixed; top: 50%; width: 90vw; left: 50%; transform: translate(-50%, -50%); z-index: 500; } #g-series .lineup-img .review-btn-box .review-slider a { padding: 3vw; } #g-series .lineup-img .review-btn-box .review-slider a p { font-size: 13px; margin-top: 10px; } #g-series .lineup-img .review-btn-box:hover .review-slider { visibility: hidden; opacity: 0; } #g-series .lineup-img .review-btn-box .review-slider::before { display: none; } #g-series .lineup-img .review-btn-box .review-slider::after { position: absolute; content: ""; display: block; width: 30vw; height: 9vw; background-image: url(//static.lenovo.com/jp/Campaign-page/2020-Gaming-doujou-redesign/legion-portal/modal-close-btn.png); background-size: 100% 100%; right: 0; top: -15vw; pointer-events: none; } #g-series .active-slide { opacity: 1  !important; visibility: visible  !important; } #g-station #g-series .other-series { display: block; margin-bottom: 40px; } #g-station #g-series .other-series div { flex: 1; margin-bottom: 20px; } #g-station #g-series .other-series div ul { margin-top: 20px; display: flex; } #g-station #g-series .other-series div ul li { flex: 1; padding: 0 4px; } #g-station #g-series .other-series2 ul { flex-wrap: wrap; margin-top: 20px; } #g-station #g-series .other-series2 li { width: 50%; padding: 0 4px; } #g-station #g-stories { padding: 20px 0; } #g-station #g-stories h2 { margin-bottom: 40px; } #g-station #g-stories li { margin-bottom: 30px; } #g-station #g-stories li a { font-size: 14px; } #g-station #g-stories li a::before { content: ''; display: block; width: 6px; height: 6px; border-top: solid 2px #fff; border-right: solid 2px #fff; -webkit-transform: rotate(45deg); transform: rotate(45deg); position: absolute; top: 8px; left: 0; } #g-station #g-camp { background: url('//static.lenovo.com/jp/Campaign-page/2020-Gaming-doujou-redesign/legion-portal/background/bg_top_camp.png') top left; background-size: cover; padding: 20px 0; } #g-station #g-camp h2 { margin-bottom: 20px; } #g-station #g-camp ul { display: flex; flex-wrap: wrap; justify-content: space-between; margin-bottom: 20px; } #g-station #g-camp ul li { width: 548px; margin-bottom: 8px; } #g-station #g-doujou { background: url('//static.lenovo.com/jp/Campaign-page/2020-Gaming-doujou-redesign/legion-portal/background/bg_top_doujou.png') top left; background-size: cover; padding: 20px 0; } #g-station #g-doujou h2 { margin-bottom: 40px; } #g-station #g-doujou #g-category { position: absolute; top: 45px; right: 0; left: 0; font-size: 16px; width: 200px; height: 24px; } #g-station #g-doujou .articles { display: flex; flex-wrap: wrap; justify-content: space-between; margin-bottom: 20px; } #g-station #g-doujou .article { width: 49%; background-color: rgba(0, 0, 0, .5); margin-bottom: 10px; padding: 10px; position: relative; } #g-station #g-doujou .article img { margin-bottom: 10px; } #g-station #g-doujou .ttl { font-size: 15px; color: #fff; min-height: 120px; } #g-station #g-doujou .date { font-size: 14px; color: #fff; margin-bottom: 10px; } #g-station #g-doujou .tag { width: fit-content; width: -moz-fit-content; font-size: 12px; color: #5881cd; border: solid 1px #5881cd; padding: 0 10px; margin-bottom: 20px; } #g-station #g-doujou .article a { position: absolute; top: 0; left: 0; right: 0; bottom: 0; } #g-station .office { margin: 30px 0; } } @media(max-width:580px) { #g-station #g-series .mark-box { margin-top: 3%; margin-bottom: 3%; height: 4.5vw; } #g-station #g-series .mark-box.new-mark::before { font-size: 2.5vw; padding: .2vw 1vw; margin-right: 3%; } #g-station #g-series .mark-box.web-mark::after { font-size: 2.5vw; padding: .2vw 1.5vw; } #g-station #g-series .mark-box2 { height: 3.2vw; left: 45%; top: -0.5vw; } #g-station #g-series .mark-box2.new-mark::before { font-size: 2vw; padding: .2vw 1vw; margin-right: 3%; } #g-station #g-series .mark-box2.web-mark::after { font-size: 2vw; padding: .2vw 1vw; white-space: nowrap; } } @media (min-width: 1480px) { #g-station #g-head .slides { position: relative; width: calc(100% + 200px); margin: 20px auto 60px; overflow: hidden; } #g-station #g-head .slides .slick-center { width: 1100px; height: 445px; -webkit-transition: .3s ease-in-out; transition: .3s ease-in-out; transform: scale(1); } #g-station #g-head .slides li img { width: 1100px; min-height: 445px; border: solid 1px #4872ab; box-shadow: 0 0 5px 0 #4872ab; margin: 0; } #g-station #g-head .slick-slide:not(.slick-center) { -webkit-transition: .3s ease-in-out; transition: .3s ease-in-out; transform: scale(.90); background-color: #000; } #g-station #g-head .slick-slide:not(.slick-center) img { opacity: .2; margin: auto; } #g-station #g-head .slides .prev { position: absolute; top: 198px; left: calc(50% - 600px); z-index: 5 } #g-station #g-head .slides .next { position: absolute; top: 198px; left: calc(50% + 550px); } } @media (min-width: 1290px) and (max-width: 1479px) { #g-station .head-top:not(.sp) { display: inline-block; } #g-station #g-head .slides { position: relative; width: calc(100% - 280px); width: auto; margin: 0 30px 0 260px; height: auto; } #g-station #g-head .slick-list { width: 100%; height: auto; } #g-station #g-head .slides li img { width: auto; height: auto; } #g-station #g-head .slick-slide:not(.slick-center) { transform: none; } #g-station #g-head .slick-slide:not(.slick-center) img { opacity: 1; } #g-station #g-head .slides .slick-dots { margin-left: 0; } #g-station #g-head .slides .prev { position: absolute; top: calc(50% - 55px); left: 0; z-index: 5 } #g-station #g-head .slides .next { position: absolute; top: calc(50% - 55px); right: 0; } } @media (min-width: 1280px) and (max-width: 1289px) { #g-station .head-top:not(.sp) { display: inline-block; } #g-station #g-head .slides { position: relative; width: calc(100% - 280px); width: auto; margin: 0 30px 0 260px; height: auto; } #g-station #g-head .slick-list { width: 100%; height: auto; } #g-station #g-head .slides li img { width: auto; height: auto; } #g-station #g-head .slick-slide:not(.slick-center) { transform: none; } #g-station #g-head .slick-slide:not(.slick-center) img { opacity: 1; } #g-station #g-head .slides .slick-dots { margin-left: 0; } #g-station #g-head .slides .prev { position: absolute; top: calc(50% - 55px); left: 0; z-index: 5 } #g-station #g-head .slides .next { position: absolute; top: calc(50% - 55px); right: 0; } } @media (min-width: 770px) and (max-width: 1279px) { #g-station .head-top:not(.sp) { display: inline-block; } #g-station #g-head .slides { position: relative; width: calc(100% - 280px); width: auto; margin: 0 30px 0 260px; height: auto; } #g-station #g-head .slick-list { width: 100%; height: auto; } #g-station #g-head .slides li img { width: auto; height: auto; } #g-station #g-head .slick-slide:not(.slick-center) { transform: none; } #g-station #g-head .slick-slide:not(.slick-center) img { opacity: 1; } #g-station #g-head .slides .slick-dots { margin-left: 0; } #g-station #g-head .slides .prev { position: absolute; top: calc(50% - 55px); left: 0; z-index: 5 } #g-station #g-head .slides .next { position: absolute; top: calc(50% - 55px); right: 0; } }