/* CSS for PC @date 2018 @author sarahchan */ /* ------------------------------------------ ------------------------------------------ */.sp {display: none !important;}#widewrapper{width: 100%; position: relative;line-height: 1.5;} #keyVisual {width: 100%; position: relative; margin-bottom: 0;} #keyVisual h1 {text-indent: 0px; margin-bottom: 80px;} #keyVisual h1 img{width: 100%;} #keyVisual .kv{position: absolute; width: 20%; text-align: center; left: 40%; top: 20px;} #keyVisual .kv img{width: 90%; max-width: 370px;} .navi{display: flex; justify-content: center;margin-bottom: 64px;} .navi li{width: 250px;} .navi li:not(:last-of-type){border-right: 1px solid #ccc;} .navi li a,.navi li em{display: flex;justify-content: center; align-items: center; padding: 4px 0;line-height: 1; font-size: 20px; text-align: center;min-height: 40px;} .navi li em, .navi li a.on{font-weight: bold; color: #E6742B !important; border-bottom: 3px solid #E6742B;font-style: normal;} #contentsArea .navi li a{color: #bbb;} #contentsArea .navi li a:not(.on):hover{cursor: default; color: #bbb;opacity: 1;} #contentsArea .navi li a:hover{text-decoration: none;opacity: 0.8;} #contentsArea .navi li a.naviLink{color: #333;} #contentsArea .navi li a.naviLink:hover{opacity: .8;cursor: pointer;color: #333;} .dogSnsBox{width: 995px; height: 260px; margin: 40px auto 80px;background: url(../images/sns_bg.png) no-repeat; display: flex; justify-content: center;align-items: center;flex-direction: column;row-gap: 24px;} .dogSnsBox h3{font-size: 20px;text-align: center;} .dogSnsBox h3 span{display: inline-block; position: relative;padding: 0 8px;z-index: 1;} .dogSnsBox h3 span:after{position: absolute; content: ''; width: 100%; height: 8px; background: #FDD118; left: 0; bottom: 4px;z-index: -1;} .dogSnsBox > div{display: flex;justify-content: center;gap: 24px;} .dogSnsBox > div a{display: flex;flex-direction: column;justify-content: flex-start;align-items: center;row-gap: 4px;} .dogSnsBox > div a img{height: 63px;width: auto;} .dogSnsBox > div a:last-of-type img{width: 40px;height: auto;} .dogSnsBox > div a:last-of-type span{font-size: 12px;color: #1D54A7;} .totalTime{font-size: 20px;color: #333;text-align: center;line-height: 2.5;margin-bottom: 80px;} .totalTime span{background: #E6752B; color: #fff;padding: 8px 10px 8px 12px;line-height: 1; margin-right: 8px;font-weight: bold;display: inline-block;} .ttl {font-family: 'Kosugi Maru', sans-serif; font-size: 28px; text-align: center; letter-spacing: 3px; margin-bottom: 20px;} .ttl span {color: #E6752B; font-size: 36px;}.ttl small{font-size: 20px;font-weight: normal;} .ttl small em{font-style: normal; color: #E6752B; font-size: 28px;} .voteTime p{text-align: center;font-size: 20px;margin-bottom: 96px;} p.time {color: #E6742B; letter-spacing: 2px; margin: 16px 0; overflow: hidden;font-size: 20px;} p.time span {background: #db4040; color: #fff; letter-spacing: 3px; padding: 6px 6px 6px 12px; display: inline-block;} .midashi{margin-bottom: 56px; text-align: center;} .top20 ul{display: flex;justify-content: center; gap: 72px; margin-bottom: 80px;} .top20 ul li{width: 416px;padding-bottom: 198px;} .top20 ul li img{display: block;} .top20 ul li:nth-of-type(1){background: url(https://img.travel.rakuten.co.jp/special/ranking/dog/2025/images/step1_bottom.png) no-repeat center bottom;} .top20 ul li:nth-of-type(2){background: url(https://img.travel.rakuten.co.jp/special/ranking/dog/2025/images/step2_bottom.png) no-repeat center bottom;} .top20 ul li div{background: url(https://img.travel.rakuten.co.jp/special/ranking/dog/2025/images/step_bg.png) repeat-y center top;padding: 0 40px;font-size: 14px;} .top20 ul li div p{margin-bottom: 12px;} .top20 ul li div dt{font-weight: bold;padding-left: 20px;} .top20 ul li div dt.icon_time{background: url(https://img.travel.rakuten.co.jp/special/ranking/dog/2025/images/icon_time.svg) no-repeat left center;} .top20 ul li div dt.icon_access{background: url(https://img.travel.rakuten.co.jp/special/ranking/dog/2025/images/icon_access.svg) no-repeat left center;} .top20 ul li div dt.icon_special{background: url(https://img.travel.rakuten.co.jp/special/ranking/dog/2025/images/icon_special.svg) no-repeat left center;} .top20 ul li div dd{margin-bottom: 12px;padding-left: 20px;} #contents.column1 {width: 100%; padding: 0; background: none;}#contents.column1.over{width: 1260px; margin: 0 auto;} .howtovote {background: #F9EDE3; padding: 56px 24px; margin: 0 auto 80px; box-sizing: border-box;} .howtovote{width:100%;} .howtovote h2 {background: url(https://img.travel.rakuten.co.jp/special/ranking/dog/2025/images/bones.png) repeat-x bottom; padding-bottom: 48px; max-width: 748px; margin: 0 auto;font-size: 22px;} .howtovote h2:nth-of-type(2){margin: 64px auto 40px;} .howtovote h2:nth-of-type(2) + p{text-align: center;font-size: 20px;} .howtovote ul{display: flex; justify-content: center; margin-top: 40px;gap: 56px;} .howtovote ul li{width: 359px; background: #fff;} .howtovote ul li p{padding: 0 16px 20px;font-size: 14px;} .howtovote ul li:nth-child(2){position: relative;} .howtovote ul li:nth-child(2):before{position: absolute;content: ''; width: 20px; height: 100%; left: -36px; top: 0; background: url(https://img.travel.rakuten.co.jp/special/ranking/dog/2025/images/arr.png) center no-repeat;} .howtovote ul li:nth-child(2):after{position: absolute;content: ''; width: 20px; height: 100%; right: -40px; top: 0; background: url(https://img.travel.rakuten.co.jp/special/ranking/dog/2025/images/arr.png) center no-repeat;} .stepTtl{padding-bottom: 54px; background: url(https://img.travel.rakuten.co.jp/special/ranking/dog/2025/images/line.png) center bottom no-repeat; font-size: 36px; color: #E6752B; text-align: center;font-family: 'Kosugi Maru', sans-serif; font-weight: normal; margin-bottom: 40px;} .stepTtl span{font-size: 24px;} #vote {width:100%; margin: 40px auto; max-width: 1260px;} #vote form > p {font-size: 14px; line-height: 150%; margin: 40px auto; width: 1090px;} #vote form > p b {font-size: 30px; display: block; color: #E6752B;line-height: 150%;} #vote .submitbtn {font-size: 24px; font-weight: bold; background: #E6752B; border-radius: 100px; padding: 24px 80px; border: none; color: #fff; text-align: center; width: 272px; margin: 40px auto; display: block; cursor: pointer; border: 2px solid #E6752B;}#vote .submitbtn:focus{outline: none;} #vote .submitbtn:hover {color: #E6752B; background: #fff; border: 2px solid #E6752B;} ul.voteform {display: flex;flex-wrap: wrap;max-width: 1260px;width: 100%; margin: 0 auto 60px;gap: 18px;row-gap: 18px;} ul.voteform li {max-width: 301px; padding: 0; line-height: 160%; position: relative; z-index: 10;flex: 1 0 auto;} ul.voteform li:nth-child(4n){margin-right: 0;} ul.voteform li img + span {font-size: 13px; padding: 0 16px;} ul.voteform li h3 {font-size: 20px; padding: 10px 16px;} ul.voteform li img {width: 100%;} ul.voteform li dl.hotelpr {font-size: 14px; padding: 0 16px;} ul.voteform li dl.hotelpr dt {background: #F9D2BB; padding: 8px 16px; border-radius: 4px; font-weight: bold; display: inline; color: #C55F25;} ul.voteform li dl.hotelpr dd {padding: 16px 0;} ul.voteform li dl.hotelpr dd span {display: block; padding-bottom: 5px;} ul.voteform li dl.hotelpr dd a {color: #1D54BB; text-decoration: underline;} ul.voteform li dl.hotelpr dd a:hover {text-decoration: none;} ul.voteform li label {position: absolute; width: 100%; display: block; height: calc(100% - 120px); top: 0; right: 0; z-index: 5;} ul.voteform li .link{font-size: 13px;margin: 16px;z-index: 11;} ul.voteform li .link span{display: block;} ul.voteform li .link a {color: #1D54BB; text-decoration: underline;} ul.voteform li .link a:hover {text-decoration: none;}ul.voteform li input {opacity: 0; width: 100%; height: 100%; cursor: pointer; margin: 0;z-index: 90;} ul.voteform li .spot {color: #C55F25; font-weight: bold; font-size: 16px; border: 2px solid #C55F25; padding: 12px 25px; border-radius: 100rem; position: absolute; right: 16px; top: 320px; cursor: pointer;font-style: normal; z-index: 100 !important;} ul.voteform .checkedbox .spot{color: #fff;background: #C55F25;} /* ul.voteform .checkedbox{border: 1px solid #C55F25;} */ ul.voteform .checkedbox:after{position: absolute; content: ''; left: 0; right: 0; bottom: 0; top: 299px; background: rgba(230,117,43,.32); z-index: 1;} ul.voteform .checkedbox:before{position: absolute; content: url(https://img.travel.rakuten.co.jp/special/ranking/dog/2025/images/checked.png); left: 88px; bottom: calc((100% - 299px) / 2 - 60px); z-index: 2;} #vote p.stepNote{color: #333; text-align: center; font-size: 20px;} .commentBox{width: 950px; margin: 0 auto 80px; padding-bottom: 42px; background: url(https://img.travel.rakuten.co.jp/special/ranking/dog/2025/images/claw.png) 98% bottom no-repeat;} .commentBox textarea{width: 100%; outline: 4px solid #FFF0E8; border: 1px solid #E6752B; height: 200px; padding: 20px; box-sizing: border-box; line-height: 1.8;} p.over {color: #E6752B; font-weight: bold; text-align: center; font-size: 30px; line-height: 150%;}.closebtn {background: none; font-size: 20px; padding: 10px 80px; border-radius: 100px; display: block; margin: 20px auto; border: 1px solid #000; cursor: pointer;}.closebtn:hover {background: #000; color: #fff;} h2.others {text-align: center; margin: 40px 0; line-height: 150%; font-size: 22px; position: relative;} h2.others:after {display: block; content: ""; border: 50px solid transparent; width: 0; height: 0; right: calc(50% - 50px); position: absolute; border-top-color: #ccc;}.bnr {display: flex; flex-wrap: wrap; justify-content: space-between; margin: 80px 0;}.bnr li {width: 32%; margin-bottom: 10px;}.bnr li a {display: block;}.bnr li a:hover {opacity: 0.8; text-decoration: none !important;}.bnr li a img {width: 100%; display: block;}.bnr li a span {display: block; background: #F7F7F7; font-size: 12px; padding: 8px;} .enterDog{text-align: center; font-size: 24px;color: #333;margin: 56px auto 64px;} .enterDog em{font-weight: bold;color: #E6752B;} p.over {color: #E6752B; font-weight: bold; text-align: center; font-size: 30px; margin: 32px 0; line-height: 150%;}.closebtn {background: none; font-size: 20px; padding: 10px 80px; border-radius: 100px; display: block; margin: 20px auto; border: 1px solid #000; cursor: pointer;}.closebtn:hover {background: #000; color: #fff;} h2.others {text-align: center; margin: 40px 0; line-height: 150%; font-size: 22px; position: relative;} h2.others:after {display: block; content: ""; border: 34px solid transparent; width: 0; height: 0; right: calc(50% - 34px); position: absolute; border-top-color: #ccc; bottom: -100px;} .bnr {display: flex; flex-wrap: wrap; justify-content: space-between; margin: 100px auto 80px; width: 1000px;} .bnr li {width: 32%; margin-bottom: 10px;}.bnr li a {display: block;}.bnr li a:hover {opacity: 0.8; text-decoration: none !important;}.bnr li a img {width: 100%; display: block; aspect-ratio: 300 / 169;} .bnr li a span {display: block; background: #F7F7F7; font-size: 14px; padding: 8px;}#link {width: 911px; margin: 0 auto;} #link p {text-align: center;} #link dl dt {font-size: 24px; text-align: center;margin-bottom: 24px;} #link dl dd {display: flex; justify-content: center; margin-bottom: 80px;gap: 24px;align-items: flex-start;} #link dl dd a {display: block; font-size: 22px; padding: 17px 24px; border: 2px solid #333333; width: 208px; position: relative;}#link dl dd a:after {position: absolute; content: ""; display: block; border-right: 1px solid #333; border-bottom: 1px solid #333; width: 15px; height: 15px; top: 35%; right: 24px; -webkit-transform: rotate(-45deg); transform: rotate(-45deg);}#link dl dd a:hover {background: #000; color: #fff !important; text-decoration: none !important;}#link dl dd a:hover:after {border-color: #fff;} #contents.column1.over ul.voteform li label{display: none;} #contents.column1.over ul.voteform li{padding-bottom: 100px;} #contents.column1.over .overTtl{text-align: center;font-family: 'Kosugi Maru', sans-serif; font-size: 20px; color: #333; margin-bottom: 40px;} #contents.column1.over .howtovote a:hover{text-decoration: none; border-bottom-color: rgba(0,0,0,0);} .rtNavi{position: fixed; right: 26px; bottom: 30px; padding-top: 38px; z-index: 100;} .rtNavi:after{position: absolute; content: ''; width: 100px; height: 41px; background: url(https://img.travel.rakuten.co.jp/special/ranking/dog/2025/images/navidog.png) no-repeat; top: 0; left: 12px;} .rtNavi li a{display: block;border-bottom: 1px solid #E6752B; color: #E6752B !important;font-size: 14px;font-family: 'Kosugi Maru', sans-serif;text-align: center;height: 40px;line-height: 40px;} .rtNavi li a span{display: inline-block;width: 18px; height: 18px; line-height: 18px; color: #fff; background: #E6752B;border-radius: 100rem;text-align: center;margin-right: 4px;} .rtNavi li a, .rtNavi li a img{display: block;} .rtNavi li a:hover{opacity: .8;} .rtNavi2{position: fixed; right: 26px; bottom: 30px; padding-top: 0; margin-top: 38px; z-index: 100; border: 4px solid #E6752B; border-radius: 8px;} .rtNavi2:after{position: absolute; content: ''; width: 100px; height: 41px; background: url(https://img.travel.rakuten.co.jp/special/ranking/dog/2025/images/navidog.png) no-repeat; top: -42px; left: 15px;} .rtNavi2 li {background: #fff;padding: 0 4px;border-radius: 4px;} .rtNavi2 li:nth-last-child(2) a{border: none;} a.red_btn {display: block; background: #E6752B url(../images/arr_white.png) 90% center no-repeat; color: #fff !important;border-radius: 100px;padding: 24px 80px; letter-spacing: 0.4em; font-size: 20px; font-weight: bold; margin: 0 auto; font-family: 'Kosugi Maru', sans-serif; width: 356px; box-sizing: border-box;} a.red_btn:hover{opacity: .8;} .petBnr{display: flex; align-items: center; flex-direction: column; gap: 32px; margin-bottom: 152px;} .petBnr h3{font-size: 20px;} #guide{position: relative;padding: 64px 0 0;width: 1280px;margin: 0 auto 80px;box-sizing: border-box;} #guide:before{position: absolute; content: ''; width: 560px;height: 1px;background: #ccc;left: 50%;top: 0;transform: translateX(-50%);} #guide .txt{text-align: center;margin-bottom: 56px;font-size: 16px;} #guide h2{text-align: center;font-size: 20px;margin-bottom: 32px;color: #333;} .swp{position: relative;padding: 0 30px;} #guide .swiper-container{padding-bottom: 24px;} #guide .swiper-button-next{background:url(https://img.travel.rakuten.co.jp/pet/sem/images/next.png) no-repeat;width:60px;height:59px;right:0;margin-top: -12px; transform: translateY(-50%);} #guide .swiper-button-prev{background:url(https://img.travel.rakuten.co.jp/pet/sem/images/prev.png) no-repeat;width:60px;height:59px;left:0;margin-top: -12px; transform: translateY(-50%);} #petinfo .swiper-slide{width:224px;} #petinfo .swiper-slide a{display:block;border-radius:5px;overflow:hidden;border:1px solid #C3C3C3;} #petinfo .swiper-slide a:hover{text-decoration: none; opacity: .8;} #petinfo .swiper-slide a p.petimg{background-size:cover;height:130px;background-position:center center;} #petinfo .swiper-slide a p{padding:10px;font-size:16px;color:#333;font-weight:bold;} #petinfo .swiper-slide a p b{display:block;min-height:50px;} #petinfo .swiper-slide a p span{display:block;color:#fff;background-color:#FB9215;text-align:center;padding:10px 0;margin-top:15px;} #petRank{margin-bottom: 80px;} #petRank h2{text-align: center;font-size: 20px;margin-bottom: 32px;} #petRank ul{display: flex; justify-content: center;gap: 48px;} #petRank ul li{width: 190px; font-size: 14px; display: flex; flex-direction: column; gap: 16px;align-items: center;} #petRank ul li a:hover{text-decoration: none !important; opacity: .8 !important;} .dogNav{display: flex; justify-content: center; align-items: flex-end; width: 600px; margin: 0 auto 16px;border-bottom: 3px solid #E6742B;gap: 24px;padding: 0 32px;} .dogNav li{border: 2px solid #E6742B;border-radius: 8px 8px 0 0;border-bottom: none; flex: 1 0 auto;text-align: center; color: #333;} .dogNav li.active{background: #E6742B; color: #fff;} .dogNav li:hover{cursor: pointer;opacity: 0.8;} .dogNav li span{padding: 12px 0 12px 44px; font-size: 18px;display: inline-block;font-weight: bold;} .dogNav li.active span{padding: 16px 0 16px 44px;} .dogNav li.largeDog span{background: url(../images/large_dog.svg) no-repeat left center;} .dogNav li.mediumDog span{background: url(../images/medium_dog.svg) no-repeat left center;} .dogNav li.smallDog span{background: url(../images/small_dog.svg) no-repeat left center;} .dogNav li.largeDog.active span{background: url(../images/large_dog_o.svg) no-repeat left center;} .dogNav li.mediumDog.active span{background: url(../images/medium_dog_o.svg) no-repeat left center;} .dogNav li.smallDog.active span{background: url(../images/small_dog_o.svg) no-repeat left center;} .dogNavDown{border-top:3px solid #E6742B; border-bottom: none;align-items: self-start;} .dogNavDown li{border-top: none; border-bottom: 2px solid #E6742B;border-radius: 0 0 8px 8px;} .jdsTab{margin-bottom: 80px;} .checkBtn label{display: flex; justify-content: center; align-items: center;gap: 8px;font-size: 16px;color: #333;} .checkBtn input:hover, .checkBtn label:hover{cursor: pointer;} .checkBtn input{background: #ccc; width: 20px;height: 20px; appearance: none;} .checkBtn input[type="checkbox"]:checked{background: url(../images/check.png) no-repeat;} ul.voteform li .dogMain{border: 1px solid #E5E5E5; position: relative;} ul.voteform li .dogMain:hover{cursor: pointer;} ul.voteform li .dogMain.selected{background: #F9D2BB;} ul.voteform li .dogMain input{position: absolute; background: url(../images/unselected.png);top: 16px;left: 16px;appearance: none;width: 40px;height: 40px;opacity: 1;} ul.voteform li .dogMain input[type="checkbox"]:checked{background: url(../images/selected.png);} ul.voteform li .dogMain h3{font-size: 18px;padding: 0 16px;} ul.voteform li .dogMain .htlName{margin: 0 16px 12px;font-size: 14px;color: #767676;} .dogDetails{position: relative; border: 1px solid #E5E5E5;} .modal-overlay { display: none; position: fixed; z-index: 1000; left: 0; top: 0; width: 100%; height: 100%; overflow: hidden; background-color: rgba(0,0,0,0.4); } .modal-content { background-color: #fefefe; margin: 7% auto; border: 1px solid #888; width: 360px; max-width: 600px; position: relative; max-height: 80%; overflow-y: auto; scrollbar-width: thin; } .close-button { position: absolute;right: 8px; top: 8px; color: #666; font-size: 30px; font-weight: bold; z-index: 10; background: rgba(255,255,255,.5); width: 40px; height: 40px; line-height: 40px; text-align: center; border-radius: 100rem; } .close-button:hover, .close-button:focus { color: black; text-decoration: none; cursor: pointer; opacity: 1; } .dogCheck{position: relative;overflow: hidden;} .dogName{display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; padding: 16px; position: relative;z-index: 10;} #modal-body img + span {font-size: 13px; padding: 0 16px;} #modal-body h3 {font-size: 20px; padding: 8px 0 16px;box-sizing: border-box;} #modal-body img {width: 100%;display: block;} #modal-body dl.hotelpr {font-size: 14px; padding: 0 16px;line-height: 1.5;} #modal-body dl.hotelpr dt {background: #F9D2BB; padding: 8px 16px; border-radius: 4px; font-weight: bold; display: inline-block; color: #C55F25;} #modal-body dl.hotelpr dd {padding: 12px 0;} #modal-body dl.hotelpr dd span {display: block; padding-bottom: 5px;} #modal-body dl.hotelpr dd a {color: #1D54BB; text-decoration: underline;} #modal-body dl.hotelpr dd a:hover {text-decoration: none;} #modal-body .link{font-size: 13px;margin: 0 0 8px;z-index: 11;line-height: 1.5;position: relative;z-index: 2;width: 100%;} #modal-body .link span{display: block;} #modal-body .link a {color: #1D54BB; text-decoration: underline;} #modal-body .link a:hover {text-decoration: none;} #modal-body input {cursor: pointer; margin: 0;z-index: 90; pointer-events: none;display: none;} #modal-body .spot {color: #C55F25; font-weight: bold; font-size: 16px; border: 2px solid #C55F25; padding: 12px 24px; border-radius: 100rem;cursor: pointer;font-style: normal;text-align: center;display: inline-block;margin-bottom: 16px;} #modal-body .checkedbox .spot{color: #fff;background: #C55F25;} #modal-body .checkedbox:after{position: absolute; content: ''; left: 0; right: 0; bottom: 0; top: 0; background: rgba(230,117,43,.32); z-index: 0;} #modal-body .checkedbox:before{position: absolute; content: url(https://img.travel.rakuten.co.jp/special/ranking/dog/2025/images/checked.png); left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 2;} .viewOnly ul.voteform li .dogMain input{display: none;} .viewOnly .dogName label{display: none !important;} .resultsPage #vote h2{text-align: center; font-size: 32px; color: #E6752B; font-family: 'Kosugi Maru', sans-serif;margin-bottom: 32px;} .resultsPage #vote h2 span{padding: 0 64px; background: url(../images/h2_bg_dog1.png) no-repeat left center, url(../images/h2_bg_dog2.png) no-repeat right center;letter-spacing: 4px;} .resultsPage ul.voteform li:hover{cursor: pointer;} .resultsPage ul.voteform li img{border-radius: 10px;} .resultsPage ul.voteform li .dogMain{display: none !important;} .resultsPage ul.voteform li .dogDetails{display: block !important; position: static;border: none;} .resultsPage ul.voteform li{position: relative;padding-top: 48px;} .resultsPage .dogName, .resultsPage .dogCheck{position: static;padding-top: 0;} .resultsPage .dogName .link{margin: 0;} .resultsPage ul.voteform li h3{position: absolute; top: -4px;left: 0; background-image: url(../images/rank.svg); background-repeat: no-repeat; padding: 2px 16px 0 48px;line-height: 42px;height: 42px;} .resultsPage ul.voteform li:nth-of-type(2) h3{background-position: 0 -40px;} .resultsPage ul.voteform li:nth-of-type(3) h3{background-position: 0 -80px;} .resultsPage ul.voteform li:nth-of-type(4) h3{background-position: 0 -120px;} .resultsPage ul.voteform li:nth-of-type(5) h3{background-position: 0 -160px;} .resultsPage ul.voteform li:nth-of-type(6) h3{background-position: 0 -200px;} .resultsPage ul.voteform li:nth-of-type(7) h3{background-position: 0 -240px;} .resultsPage ul.voteform li:nth-of-type(8) h3{background-position: 0 -280px;} .resultsPage ul.voteform li:nth-of-type(9) h3{background-position: 0 -320px;} .resultsPage ul.voteform li:nth-of-type(10) h3{background-position: 0 -360px;} .resultsPage ul.voteform li:nth-of-type(11) h3{background-position: 0 -400px;} .resultsPage ul.voteform li:nth-of-type(12) h3{background-position: 0 -440px;} .resultsPage ul.voteform li:nth-of-type(13) h3{background-position: 0 -480px;} .resultsPage ul.voteform li:nth-of-type(14) h3{background-position: 0 -520px;} .resultsPage ul.voteform li:nth-of-type(15) h3{background-position: 0 -560px;} .resultsPage ul.voteform li:nth-of-type(16) h3{background-position: 0 -600px;} .resultsPage ul.voteform li:nth-of-type(17) h3{background-position: 0 -640px;} .resultsPage ul.voteform li:nth-of-type(18) h3{background-position: 0 -680px;} .resultsPage ul.voteform li:nth-of-type(19) h3{background-position: 0 -720px;} .resultsPage ul.voteform li:nth-of-type(20) h3{background-position: 0 -760px;} .resultsPage ul.voteform li:nth-of-type(n+21){display: none;} .resultsPage .dogCheck{display: flex;flex-direction: column;} .resultsPage .dogCheck .hotelpr{order: 1;} .resultsPage .dogCheck .hotelpr dt{display: none;} .resultsPage .dogCheck .hotelpr dd:first-of-type{font-weight: bold;padding: 0;} .resultsPage .dogCheck .dogName{order: 2;} .rankBox{background-image: url(../images/ribon1.svg), url(../images/ribon2.svg), linear-gradient(to bottom, #fff 0%, #FEEDBB 56%);padding-bottom: 56px;position: relative; background-repeat: no-repeat, no-repeat, no-repeat; background-position: calc(50% - 720px) -60px, calc(50% + 720px) -60px, 0 0; background-size: 400px auto, 370px auto, 100%; margin-bottom: 80px;} .rankBox:after{position: absolute; content: ''; bottom: 0;left: 0;right: 0;height: 40px; background: url(../images/wave.png) repeat-x;} .rankBox h2{text-align: center;font-size: 30px;color: #E6752B;font-family: 'Kosugi Maru', sans-serif;margin-bottom: 32px;} .rankBox h2 span{display: flex;justify-content: center; align-items: center;gap: 40px;letter-spacing: 4px;} .rankBox h2 span:before{content: url(../images/h2_results_bg.png);} .rankBox h2 span:after{content: url(../images/h2_results_bg.png); transform: scale(-1);} /*.resultsPage .rankList{justify-content: center;align-items: flex-end;gap: 32px;flex-wrap: nowrap;width: 96%;}*/ .resultsPage .rankList{justify-content: center;align-items: flex-end;gap: 32px;flex-wrap: nowrap;width: 96%; min-width: 1028px;} .resultsPage ul.voteform.rankList li{max-width: 348px; width: 27%; max-width: none;padding-top: 88px;} .resultsPage ul.voteform.rankList li:first-of-type{order: 2;max-width: 500px;width: 36%;} .resultsPage ul.voteform.rankList li:nth-of-type(2){order: 1;} .resultsPage ul.voteform.rankList li:nth-of-type(3){order: 3;} .resultsPage ul.voteform.rankList li h3{left: 50%; transform: translateX(-50%);} .resultsPage ul.voteform.rankList li:first-of-type h3{transform: translateX(-50%) scale(1.6);} .resultsPage ul.voteform.rankList li .link{position: absolute; top: 60px; left: 0;line-height: 1.5;} .resultsPage ul.voteform.rankList li:nth-of-type(3) .link{height: 40px;top: 42px;} .resultsPage #vote ul.voteform .dogName .link a{text-decoration: underline !important; color: #1D54BB !important;} .resultsPage ul.voteform.rankList li .link span, .resultsPage ul.voteform.rankList li .dogCheck .hotelpr{display: none;} .resultsPage ul.voteform.rankList li .userComment{font-size: 14px;margin-top: -8px;} .palace{padding: 40px;width: 1200px; box-sizing: border-box;border: 2px solid #D38D23;margin: 0 auto 80px;display: flex; justify-content: space-between; gap: 40px;align-items: center;} .palace div:first-of-type{width: 214px;} .palace div:first-of-type img{display: block;margin-bottom: 24px; width: 100%;} .palace div:first-of-type p{font-size: 14px; color: #D38D23;} .palace div:nth-of-type(2){width: 194px;} .palace div:nth-of-type(2) img{width: 100%;display: block;border-radius: 10px;} .palace div:nth-of-type(3){width: 627px;} .palace div:nth-of-type(3) .palaceName{font-size: 26px;margin-bottom: 8px;font-weight: bold;} .palace div:nth-of-type(3) .comment {font-size: 14px;margin-bottom: 12px;} .palace div:nth-of-type(3) .comment em{font-size: 18px;font-weight: bold;font-style: normal;color: #D38D23;display: block;margin-bottom: 8px;} .palace div:nth-of-type(3) .link{font-size: 13px;} .palace div:nth-of-type(3) .link span{display: block;} .palace div:nth-of-type(3) .link a{color: #1D54BB !important; text-decoration: underline !important;} .goVote {position: relative;padding-bottom: 110px;margin-bottom: 110px;} .goVote a{display: block; position: relative; margin: 0 auto; width: 616px; border: 2px solid #333; box-sizing: border-box; font-size: 22px; color: #333; padding: 32px 24px; line-height: 1;text-align: center;} .goVote a:before{position: absolute; content: ''; width: 10px; height: 10px; border-top: 1px solid #333; border-right: 1px solid #333; transform: rotate(45deg); right: 32px; top: 50%; margin-top: -5px;} .goVote:after{position: absolute; content: '';bottom: 0; left: 50%; transform: translateX(-50%); width: 560px; height: 1px; background: #ccc;} .goVote a:hover{text-decoration: none !important; opacity: .8;} body{overflow: hidden;}