@charset "UTF-8"; @keyframes spriteBackground { 0% { background-position: 0 0; } 100% { background-position: 0 100%; } } * { padding: 0; margin: 0; border: none; } html, body { width: 100%; height: 100%; } h1, h2, h3, h4, h5, h6 { font-size: 100%; } html { font-size: 62.5%; } body { font-family: "Yu Gothic", YuGothic, Meiryo, "メイリオ", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "ＭＳ Ｐゴシック", "MS PGothic", Osaka, sans-serif; font-size: 12px; font-size: 1.2rem; text-size-adjust: 100%; -webkit-text-size-adjust: 100%; -moz-text-size-adjust: 100%; -ms-text-size-adjust: 100%; } body { background: #ffffff; } li { list-style: none; } img { vertical-align: bottom; } a { display: block; text-decoration: none; } button { display: block; -webkit-appearance: none; appearance: none; padding: 0; border: none; outline: none; background-color: transparent; cursor: pointer; } #c_firstPage, #c_topPage { width: 100%; height: 100vh; min-height: 610px; padding: 40px 0 30px; } body { min-width: 960px; } #wrap { width: 100%; min-width: 960px; min-height: 610px; position: absolute; top: 0; left: 0; } #c_firstPage { box-sizing: border-box; position: relative; } #c_firstPage div.container { width: 100%; height: 100%; position: relative; } #wrap.top { overflow: hidden; } #c_topPage { overflow: hidden; box-sizing: border-box; position: absolute; top: 0; left: -100%; background-image: url(../img/common/texture.png), -webkit-linear-gradient(225deg, #ffda2a 10%, #ff9e33 50%, #ff626e 100%); background-image: url(../img/common/texture.png), linear-gradient(225deg, #ffda2a 10%, #ff9e33 50%, #ff626e 100%); background-size: 250px 250px, auto auto; } #wrap.play #c_topPage { position: relative; left: 0; } #wrap.main { padding-bottom: 30px; } main { display: none; width: 100%; position: relative; } main article { display: none; width: 100%; height: 100%; } main div.gameContainer { background: rgba(80, 25, 40, 0.5); } #wrap.play main, #wrap.main main article { display: block; } body.lock { overflow-y: scroll; } body.lock #wrap.play.main { height: 100%; min-height: 846px; overflow: hidden; position: fixed; z-index: 10200; } @keyframes loading { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } #c_loading { width: 456px; position: absolute; top: 50%; left: 50%; margin: -111px 0 0 -228px; text-align: center; } #c_loading.hidden { display: none; } #c_loading img { width: 122px; height: 122px; margin-bottom: 38px; animation: loading 1.4s linear infinite; } #c_loading p { width: 456px; height: 61px; overflow: hidden; background: no-repeat 50% 0; text-align: left; text-indent: 456px; white-space: nowrap; } #c_loading p.sound { background-image: url(../img/top/pc/loading_sound_text.png); } #c_loading div { width: 74px; height: 24px; position: absolute; top: 50px; left: 191px; line-height: 0; text-indent: 1px; text-align: center; } #c_loading div span { display: inline-block; height: 24px; overflow: hidden; margin-right: 1px; background: url(../img/common/loading_num.png) no-repeat; text-indent: 20px; white-space: nowrap; } #c_loading div span.num_0 { width: 18px; background-position: 0px 0; } #c_loading div span.num_1 { width: 10px; background-position: -20px 0; } #c_loading div span.num_2 { width: 18px; background-position: -32px 0; } #c_loading div span.num_3 { width: 18px; background-position: -52px 0; } #c_loading div span.num_4 { width: 18px; background-position: -72px 0; } #c_loading div span.num_5 { width: 16px; background-position: -92px 0; } #c_loading div span.num_6 { width: 18px; background-position: -110px 0; } #c_loading div span.num_7 { width: 20px; background-position: -130px 0; } #c_loading div span.num_8 { width: 18px; background-position: -152px 0; } #c_loading div span.num_9 { width: 18px; background-position: -172px 0; } #c_loading div span.unit { width: 12px; background-position: -192px 0; } #c_switch { width: 100px; height: 100px; position: absolute; top: 46px; right: 0; } #c_switch a { width: 100px; height: 100px; overflow: hidden; background: url(../img/common/logo_switch.png) no-repeat 50% 50% #e60012; background-size: 76px auto; text-indent: 100%; white-space: nowrap; } body.lock #c_switch { display: none; } footer { width: 100%; min-width: 960px; height: 30px; overflow: hidden; position: absolute; bottom: 0; background: #e80002; font-size: 1.3rem; line-height: 1; } footer a { display: inline-block; padding-left: 12px; margin: 0 20px 0 10px; background: url(../img/common/pc/footer_arrow.png) no-repeat 0 50%; color: #ffffff; line-height: 2.3076923; } @media (-webkit-min-device-pixel-ratio: 2) { footer a { background-image: url(../img/common/sp/footer_arrow.svg); background-size: 8px 12px; } } footer a:hover { opacity: 0.8; } footer p { width: 128px; height: 30px; overflow: hidden; position: absolute; top: 0; right: 0; background: url(../img/common/pc/footer_copyright.png) no-repeat 0 50%; text-indent: 128px; white-space: nowrap; } @media (-webkit-min-device-pixel-ratio: 2) { footer p { background-image: url(../img/common/tb/footer_copyright.png); background-size: 117px 12px; } } #c_mute { width: 48px; height: 25px; padding: 0 11px 0 40px; border-radius: 0 13px 13px 0; overflow: hidden; position: fixed; top: 50px; left: 0; background: url(../img/common/pc/sound_button.png) no-repeat 11px 0 #ff3c28; transition: left 0.2s cubic-bezier(0.215, 0.61, 0.355, 1); } #c_mute.off { background-position: 11px -25px; } #c_mute.hidden { left: -99px; } #c_mute button { width: 24px; height: 25px; overflow: hidden; background: url(../img/common/pc/sound_button.png) no-repeat 0 0; text-indent: 24px; white-space: nowrap; } #c_mute button.on { background-position: -29px -25px; } #c_mute button.off { background-position: -53px 0; margin-left: 24px; } #c_mute button.on:hover { background-position: -29px 0; } #c_mute button.off:hover { background-position: -53px -25px; } #c_mute.on button.on, #c_mute.off button.off { display: none; } #c_sound { display: none; width: 100%; height: 231px; position: absolute; top: 50%; left: 0; margin-top: -115.5px; text-align: center; } #c_sound.view { display: block; } #c_sound p { width: 474px; height: 62px; overflow: hidden; margin: 0 auto 39px; background: url(../img/top/tb/sound_text.png) no-repeat 0 0; background-size: 474px 62px; text-align: left; text-indent: 474px; white-space: nowrap; } #c_sound button { display: inline-block; width: 130px; height: 130px; border-radius: 65px; overflow: hidden; margin: 0 25px; background: url(../img/top/tb/sound_button.png) no-repeat 0 50%; background-size: 260px 90px; text-indent: 130px; white-space: nowrap; } #c_sound button.on { background-color: #ff3c28; } #c_sound button.off { background-position: -130px 50%; background-color: #dcdcdc; } #c_playmode { width: 100%; padding: 14px 0; overflow: hidden; position: relative; background: #ffffff; } #c_playmode h2 { width: 128px; height: 57px; border-radius: 5px 0 0 5px; overflow: hidden; float: left; margin-left: 10px; background: url(../img/common/pc/playmode_title.png) no-repeat 14px 50% #aaaaaa; text-indent: 129px; white-space: nowrap; } @media (-webkit-min-device-pixel-ratio: 2) { #c_playmode h2 { background: url(../img/common/tb/playmode_title.png) no-repeat 14px 50% #aaaaaa; background-size: 102px 30px; } } #c_playmode table { height: 55px; border: 1px solid #aaaaaa; border-spacing: 0; border-radius: 0 5px 5px 0; float: left; margin-right: 9px; vertical-align: middle; line-height: 0; } #c_playmode th, #c_playmode td { width: 130px; height: 27px; } #c_playmode th { border-left: 1px solid #aaaaaa; } #c_playmode td { border: solid #aaaaaa; border-width: 1px 0 0 1px; position: relative; } #c_playmode span { display: inline-block; width: 130px; height: 19px; overflow: hidden; background: no-repeat 50% 0; text-indent: 130px; white-space: nowrap; } #c_playmode th span { background-image: url(../img/common/pc/playmode_icon.png); } @media (-webkit-min-device-pixel-ratio: 2) { #c_playmode th span { background-image: url(../img/common/tb/playmode_icon.png); background-size: 108px 57px; } } #c_playmode th:nth-child(2) span { background-position: 50% -19px; } #c_playmode th:nth-child(3) span { background-position: 50% -38px; } #c_playmode td span { background-image: url(../img/common/pc/playmode_num.png); } @media (-webkit-min-device-pixel-ratio: 2) { #c_playmode td span { background-image: url(../img/common/tb/playmode_num.png); background-size: 18px 19px; } } #c_playmode td span.player_none { width: 130px; height: 27px; background-image: url(../img/common/pc/playmode_slash.png); } @media (-webkit-min-device-pixel-ratio: 2) { #c_playmode td span.player_none { background-size: auto; } } #c_playmode td ul { width: 13px; position: absolute; top: 3px; right: 4px; } #c_playmode td li { width: 13px; height: 11px; overflow: hidden; background: url(../img/common/pc/playmode_note.png) no-repeat 0 0; text-indent: 13px; white-space: nowrap; } @media (-webkit-min-device-pixel-ratio: 2) { #c_playmode td li { background-image: url(../img/common/tb/playmode_note.png); background-size: 13px 21px; } } #c_playmode td li.num_2 { background-position: 0 -11px; } #c_playmode ul.note { width: 335px; overflow: hidden; } #c_playmode ul.note li { width: 335px; height: 19px; background: url(../img/common/pc/playmode_text.png) no-repeat 0 3px; text-indent: 335px; white-space: nowrap; } @media (-webkit-min-device-pixel-ratio: 2) { #c_playmode ul.note li { background-image: url(../img/common/tb/playmode_text.png); background-size: 335px 51px; } } #c_playmode ul.note li:nth-child(2) { background-position: 0 -16px; } #c_playmode ul.note li:nth-child(3) { background-position: 0 -35px; } /*#c_playmode aside.sns { width: 32px; position: absolute; top: 8px; right: 12px; }*/ #c_playmode aside.sns a { width: 32px; height: 32px; border-radius: 2px; overflow: hidden; margin-bottom: 5px; background: url(../img/common/pc/footer_sns.png) no-repeat 0 0; text-indent: 32px; white-space: nowrap; } @media (-webkit-min-device-pixel-ratio: 2) { #c_playmode aside.sns a { background-image: url(../img/common/tb/footer_sns.png); background-size: 66px 64px; } } #c_playmode aside.sns a.facebook { background-position: 100% 0; } #c_playmode aside.sns a.twitter:hover { background-position: 0 100%; } #c_playmode aside.sns a.facebook:hover { background-position: 100% 100%; } #c_visualArea { width: 960px; height: 780px; min-height: 610px; overflow: hidden; position: relative; margin: 0 auto; } #c_visual { width: 100%; height: 100%; position: relative; top: 0; left: 0; } #c_visual img { width: 100%; height: auto; position: absolute; bottom: 0; } #c_visual div.top { width: 100%; height: 70.897%; border-radius: 0 0 28% 0; overflow: hidden; position: absolute; top: 0; left: 0; z-index: 0; } #c_visual div.middle { width: 107.2916666%; height: 17.757%; overflow: hidden; position: absolute; top: 60.1923%; left: -3.64583333%; transform: rotate(-9.6deg); } #c_visual div.player { width: 100%; height: 100%; overflow: hidden; position: absolute; bottom: 0; left: 0; } #c_visual div.bg { width: 100%; height: 100%; overflow: hidden; position: absolute; left: 0; background-size: 250px 250px, auto auto; } #c_visual div.bg.bottom { height: 32.756%; border-radius: 28% 0 0 0; bottom: 0; z-index: 0; } #c_visual div.middle div.bg { background-size: 250px 250px, 194.697% 361.204%; } #c_visual ul { width: 100%; height: 100%; overflow: hidden; position: absolute; top: 0; } #c_visual ul.left { left: 0; } #c_visual ul.right { right: 0; } #c_visual div.top ul.left { width: 56.771%; } #c_visual div.top ul.right { width: 59.375%; height: 94.846%; } #c_visual div.middle ul.left, #c_visual div.middle ul.right { width: 41.262%; } #c_visual div.player ul.left { width: 39.583%; } #c_visual div.player ul.right { width: 46.875%; } #c_visual li { width: 100%; height: 100%; position: absolute; top: 0; } #c_visual ul.left li { left: -100%; } #c_visual ul.right li { right: -100%; } #c_visual.type_1 div.top div.bg, #c_visual.start div.top div.bg { background: url(../img/top/pc/visual_top_bg.jpg) no-repeat 0 0; background-size: 100% auto; } #c_visual.type_1 div.middle div.bg, #c_visual.start div.middle div.bg { background: url(../img/top/pc/visual_middle_bg.jpg) no-repeat 50% 0; background-size: auto 100%; } #c_visual.type_1 div.bottom.bg, #c_visual.start div.bottom.bg { background: url(../img/top/pc/visual_bottom_bg.jpg) no-repeat 0 100%; background-size: 100% auto; } #c_visual.type_1.view ul.left li:nth-child(1), #c_visual.start.view ul.left li:nth-child(1) { left: 0; } #c_visual.type_1.view ul.right li:nth-child(1), #c_visual.start.view ul.right li:nth-child(1) { right: 0; } #c_visual.type_1.view div.middle ul.bg li:nth-child(1), #c_visual.start.view div.middle ul.bg li:nth-child(1) { left: 0; } #c_visual.type_2 div.top div.bg { background-image: url(../img/common/texture.png), -webkit-linear-gradient(270deg, #c8f9ff 10%, #b8cffa 50%, #8796ff 100%); background-image: url(../img/common/texture.png), linear-gradient(270deg, #c8f9ff 10%, #b8cffa 50%, #8796ff 100%); } #c_visual.type_2 div.bottom.bg { background-image: url(../img/common/texture.png), -webkit-linear-gradient(225deg, #c8f9ff 10%, #b8cffa 50%, #8796ff 100%); background-image: url(../img/common/texture.png), linear-gradient(225deg, #c8f9ff 10%, #b8cffa 50%, #8796ff 100%); } #c_visual.type_2 div.middle div.bg { background-image: url(../img/common/texture.png), -webkit-linear-gradient(215.4deg, #9be2ff 10%, #a47eff 50%, #a47eff 100%); background-image: url(../img/common/texture.png), linear-gradient(215.4deg, #9be2ff 10%, #a47eff 50%, #a47eff 100%); } #c_visual.type_2.view ul.left li:nth-child(2) { left: 0; } #c_visual.type_2.view ul.right li:nth-child(2) { right: 0; } #c_visual.type_2.view div.middle ul.bg li:nth-child(2) { left: 0; } #c_visual.type_3 div.top div.bg { background-image: url(../img/common/texture.png), -webkit-linear-gradient(225deg, #ffd4b8 10%, #ffa6aa 50%, #ff78be 100%); background-image: url(../img/common/texture.png), linear-gradient(225deg, #ffd4b8 10%, #ffa6aa 50%, #ff78be 100%); } #c_visual.type_3 div.bottom.bg { background-image: url(../img/common/texture.png), -webkit-linear-gradient(225deg, #ffd4b8 10%, #ffa6aa 50%, #ff78be 100%); background-image: url(../img/common/texture.png), linear-gradient(225deg, #ffd4b8 10%, #ffa6aa 50%, #ff78be 100%); } #c_visual.type_3 div.middle div.bg { background-image: url(../img/common/texture.png), -webkit-linear-gradient(215.4deg, #fff4c6 0%, #ff616d 100%); background-image: url(../img/common/texture.png), linear-gradient(215.4deg, #fff4c6 0%, #ff616d 100%); } #c_visual.type_3.view ul.left li:nth-child(3) { left: 0; } #c_visual.type_3.view ul.right li:nth-child(3) { right: 0; } #c_visual.type_3.view div.middle ul.bg li:nth-child(3) { left: 0; } #c_visual.type_4 div.top div.bg { background-image: url(../img/common/texture.png), -webkit-linear-gradient(225deg, #fffaa5 10%, #fdeb48 50%, #c8fa28 100%); background-image: url(../img/common/texture.png), linear-gradient(225deg, #fffaa5 10%, #fdeb48 50%, #c8fa28 100%); } #c_visual.type_4 div.bottom.bg { background-image: url(../img/common/texture.png), -webkit-linear-gradient(225deg, #fffaa5 10%, #fdeb48 50%, #c8fa28 100%); background-image: url(../img/common/texture.png), linear-gradient(225deg, #fffaa5 10%, #fdeb48 50%, #c8fa28 100%); } #c_visual.type_4 div.middle div.bg { background-image: url(../img/common/texture.png), -webkit-linear-gradient(215.4deg, #ffffdd 0%, #e0ffaf 100%); background-image: url(../img/common/texture.png), linear-gradient(215.4deg, #ffffdd 0%, #e0ffaf 100%); } #c_visual.type_4.view ul.left li:nth-child(4) { left: 0; } #c_visual.type_4.view ul.right li:nth-child(4) { right: 0; } #c_visual.type_4.view div.middle ul.bg li:nth-child(4) { left: 0; } #c_visual.type_5 div.top div.bg { background-image: url(../img/common/texture.png), -webkit-linear-gradient(270deg, #ffda2a 10%, #ff9e33 50%, #ff626e 100%); background-image: url(../img/common/texture.png), linear-gradient(270deg, #ffda2a 10%, #ff9e33 50%, #ff626e 100%); } #c_visual.type_5 div.bottom.bg { background-image: url(../img/common/texture.png), -webkit-linear-gradient(225deg, #ffda2a 10%, #ff9e33 50%, #ff626e 100%); background-image: url(../img/common/texture.png), linear-gradient(225deg, #ffda2a 10%, #ff9e33 50%, #ff626e 100%); } #c_visual.type_5 div.middle div.bg { background-image: url(../img/common/texture.png), -webkit-linear-gradient(215.4deg, #fffd47 10%, #ffce53 50%, #ff887b 100%); background-image: url(../img/common/texture.png), linear-gradient(215.4deg, #fffd47 10%, #ffce53 50%, #ff887b 100%); } #c_visual.type_5.view ul.left li:nth-child(5) { left: 0; } #c_visual.type_5.view ul.right li:nth-child(5) { right: 0; } #c_visual.type_5.view div.middle ul.bg li:nth-child(5) { left: 0; } #c_visual.type_6 div.top div.bg { background-image: url(../img/common/texture.png), -webkit-linear-gradient(225deg, #f0f49a 10%, #aff564 50%, #50d7aa 100%); background-image: url(../img/common/texture.png), linear-gradient(225deg, #f0f49a 10%, #aff564 50%, #50d7aa 100%); } #c_visual.type_6 div.bottom.bg { background-image: url(../img/common/texture.png), -webkit-linear-gradient(225deg, #f0f49a 10%, #aff564 50%, #50d7aa 100%); background-image: url(../img/common/texture.png), linear-gradient(225deg, #f0f49a 10%, #aff564 50%, #50d7aa 100%); } #c_visual.type_6 div.middle div.bg { background-image: url(../img/common/texture.png), -webkit-linear-gradient(215.4deg, #abe59e 10%, #74da88 50%, #5873b7 100%); background-image: url(../img/common/texture.png), linear-gradient(215.4deg, #abe59e 10%, #74da88 50%, #5873b7 100%); } #c_visual.type_6.view ul.left li:nth-child(6) { left: 0; } #c_visual.type_6.view ul.right li:nth-child(6) { right: 0; } #c_visual.type_6.view div.middle ul.bg li:nth-child(6) { left: 0; } #c_visual div.bg { transition: opacity 0.5s 1s cubic-bezier(0.215, 0.61, 0.355, 1); } #c_visual div.middle div.bg { transition: left 0.17s 0.8s cubic-bezier(0.215, 0.61, 0.355, 1); } #c_visual ul.left li { transition: left 0.18s cubic-bezier(0.215, 0.61, 0.355, 1); } #c_visual ul.right li { transition: right 0.18s cubic-bezier(0.215, 0.61, 0.355, 1); } #c_visual div.top ul li { transition-delay: 1.57s; } #c_visual div.middle ul li { transition-delay: 2s; } #c_visual div.player ul li { transition-delay: 2.43s; } #c_visual.start div.bg { transition-delay: 1.0s; } #c_visual.start div.middle div.bg { transition-delay: 0.8s; } #c_visual.hidden ul.left li, #c_visual.hidden ul.right li { transition-duration: 0.2s; transition-delay: 0s; transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } #c_visual.hidden div.bg { transition-duration: 0.1s; transition-delay: 0.35s; } #c_visual.hidden div.middle div.bg { transition-duration: 0.08s; transition-delay: 0.45s; } #c_visual.hidden ul.left li { left: -100%; } #c_visual.hidden ul.right li { right: -100%; } #c_visual.hidden div.top div.bg, #c_visual.hidden div.bottom.bg { opacity: 0; } #c_visual.hidden div.middle div.bg { left: -100%; } @keyframes scaleOneNum { 0% { transform: scale(0); } 3% { transform: scale(0); } 4% { transform: scale(0.8); } 12% { transform: scale(1); } 33% { transform: scale(1); } 33.01% { transform: scale(0); } 91% { transform: scale(0); } 92% { transform: scale(0.8); } 100% { transform: scale(1); } } @keyframes scaleTwoNum { 0% { transform: scale(0); } 19% { transform: scale(0); } 20% { transform: scale(0.8); } 27% { transform: scale(1); } 63% { transform: scale(1); } 63.01% { transform: scale(0); } 91% { transform: scale(0); } 92% { transform: scale(0.8); } 100% { transform: scale(1); } } @keyframes scaleOneBg { 0% { transform: scale(0); } 1% { transform: scale(0); } 10% { transform: scale(1); } 33% { transform: scale(1); } 33.01% { transform: scale(0); } 81% { transform: scale(0); } 88% { transform: scale(1); } 100% { transform: scale(1); } } @keyframes scaleTwoBg { 0% { transform: scale(0); } 15% { transform: scale(0); } 24% { transform: scale(1); } 63% { transform: scale(1); } 63.01% { transform: scale(0); } 81% { transform: scale(0); } 88% { transform: scale(1); } 100% { transform: scale(1); } } @keyframes scaleGo { 0% { transform: scale(1.4); } 25% { transform: scale(1); } 100% { transform: scale(1); } } @keyframes hideGo { 0% { transform: scale(1); } 20% { transform: scale(1.2); } 50% { transform: scale(1.1); } 100% { transform: scale(0); } } @keyframes small { 0% { transform: scale(0.9); } 20% { transform: scale(0.95); } 80% { transform: scale(0.65); } 100% { transform: scale(0.68232); } } @keyframes slideR { 0% { transform: translateX(25%) scaleX(1.3) scaleY(0.7); } 100% { transform: translateX(0) scaleX(1) scaleY(1); } } @keyframes slideL { 0% { transform: translateX(-15.6%) scaleX(1.3) scaleY(0.7); } 100% { transform: translateX(0) scaleX(1) scaleY(1); } } #c_logoArea { width: 100%; height: 100%; min-height: 540px; overflow: hidden; position: absolute; top: 40px; left: 0; } #c_logo { width: 100%; height: 95.5555%; position: relative; top: 2.5926%; } #c_logo h1 { width: 100%; height: 100%; position: relative; top: 0; transform-origin: center 23%; } #c_logo span { display: block; width: 100%; position: absolute; left: 0; text-align: center; } #c_logo span img { width: auto; height: 100%; transform: scale(0); } #c_logo span.one.num { height: 33.1395%; top: 0; } #c_logo span.one.num img { transform-origin: 90% 130%; } #c_logo span.one.bg { height: 38.953%; top: 7.849%; } #c_logo span.one.bg img { transform-origin: 43% 100%; } #c_logo span.two.num { height: 25.968%; top: 41.7635%; } #c_logo span.two.num img { transform-origin: 30% 70%; } #c_logo span.two.bg { height: 35.659%; top: 46.318%; } #c_logo span.two.bg img { transform-origin: 73% 100%; } #c_logo span.switch.en { height: 15.31%; bottom: 7.655%; text-indent: 2%; } #c_logo span.switch.jp { height: 4.651%; bottom: 0; } #c_logo p { width: 100%; height: 12.0155%; overflow: hidden; position: absolute; bottom: 7.461%; left: 0; text-align: center; transform: scale(0); } #c_logo p.hidden { animation: hideGo 0.4s linear forwards; } #c_logo.play h1, #c_logo.replay h1 { animation: small 0.15s 3s cubic-bezier(0.215, 0.61, 0.355, 1) 1 forwards; } #c_logo.play span img, #c_logo.replay span img { animation-duration: 2s; animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275); animation-iteration-count: 1; animation-fill-mode: forwards; } #c_logo.play span.two img, #c_logo.replay span.two img { animation-delay: 0.35s; } #c_logo.play span.switch img, #c_logo.replay span.switch img { animation-duration: 0.1s; animation-delay: 2.6s; } #c_logo.play span.one.num img, #c_logo.replay span.one.num img { animation-name: scaleOneNum; } #c_logo.play span.one.bg img, #c_logo.replay span.one.bg img { animation-name: scaleOneBg; } #c_logo.play span.two.num img, #c_logo.replay span.two.num img { animation-name: scaleTwoNum; } #c_logo.play span.two.bg img, #c_logo.replay span.two.bg img { animation-name: scaleTwoBg; } #c_logo.play span.switch.en img, #c_logo.replay span.switch.en img { animation-name: slideR; } #c_logo.play span.switch.jp img, #c_logo.replay span.switch.jp img { animation-name: slideL; } #c_logo.play p, #c_logo.replay p { animation: scaleGo 0.475s 4.1s cubic-bezier(0.175, 0.885, 0.32, 1.275) infinite forwards; } #c_logo.fin h1 { transform: scale(0.7); } #c_logo.fin span img { transform: scale(0); } #c_logo.fin p { transform: scale(1); } #c_pageToggleButton { display: inline-block; height: 100%; padding: 1px; vertical-align: bottom; } #c_pageToggleButton img { display: inline; width: auto; height: auto; max-width: 100%; max-height: 100%; vertical-align: top; } #c_background { width: 100%; height: 100%; overflow: hidden; position: fixed; top: 0; left: -100%; transition: left 0.5s cubic-bezier(0.215, 0.61, 0.355, 1); } #c_background p { width: 100%; height: 100%; overflow: hidden; background: url(../img/main/background.jpg) no-repeat 50% 50%; background-size: cover; text-indent: 100%; white-space: nowrap; } #wrap.main #c_background { left: 0; } @keyframes movescroll { 0% { transform: translateY(0); } 40% { transform: translateY(6px); } 100% { transform: translateY(0); } } @keyframes showUpdate { 0% { transform: scale(0); } 60% { transform: scale(1.1); } 100% { transform: scale(1); } } #c_title { width: 100%; height: 100vh; min-height: 610px; padding: 40px 0 40px; box-sizing: border-box; position: relative; left: -100%; transition: left 0.5s cubic-bezier(0.215, 0.61, 0.355, 1); } #c_title h1 { width: 100%; height: 66.379%; padding-top: 40px; max-height: 660px; position: relative; } #c_title h1 span { display: block; width: 100%; height: 85.195%; overflow: hidden; position: absolute; bottom: 0; left: 0; text-align: center; } #c_title h1 img { width: auto; height: 100%; } #c_title div.product { width:145px; height: 275px; padding-right: 260px; overflow: hidden; position: absolute; bottom: 70px; left: 30px; line-height: 0; } #c_title div.product span { display: inline-block; } #c_title div.product span.info_package { float: left; margin-right: 10px; } #c_title div.product span.info_icon { margin-bottom: 11px; } #c_title div.product a { display: inline-block; clear: both; } #c_title div.product p { width: 258px; height: 99px; background: url(../img/main/pc/info_information.png) no-repeat 0 0; background-size: 100% 100%; position: absolute; top: 0; right: 0; text-indent: 258px; white-space: nowrap; } #c_title button { width: 140px; height: 98px; padding-top: 6px; box-sizing: content-box; overflow: hidden; position: absolute; bottom: 60px; left: 50%; margin-left: -70px; transform: translateY(-30px); transition: transform 0.475s 1s cubic-bezier(0.215, 0.61, 0.355, 1); } #c_title button span { display: block; width: 86px; height: 70px; overflow: hidden; position: absolute; bottom: 0; left: 27px; background: url(../img/main/title_scroll.png) no-repeat 0 0; text-indent: 86px; white-space: nowrap; } #c_title button.update_0215::after { content: "2.15 UPDATE"; display: block; width: 116px; height: 26px; overflow: hidden; position: absolute; bottom: 72px; left: 12px; background: url(../img/main/title_scroll_up_0301.png) no-repeat 0 0; text-indent: 116px; white-space: nowrap; transform: scale(0); transform-origin: center bottom; } #wrap.main #c_title { left: 0; } #wrap.main #c_title button { transform: translateY(0); animation: movescroll 0.475s 2s cubic-bezier(0.215, 0.61, 0.355, 1) infinite; } #wrap.main #c_title button span { animation: spriteBackground 0.475s 1s steps(14) forwards; } #wrap.main #c_title button.update_0215::after { animation: showUpdate 0.2s 1.65s cubic-bezier(0.215, 0.61, 0.355, 1) 1 forwards; } #c_news { position: relative; top: -40px; background: #ffffff; font-size: 16px; font-size: 1.6rem; line-height: 1.5; } #c_news h2 { width: 124px; height: 100%; overflow: hidden; position: absolute; top: 0; left: 0; background: url(../img/main/pc/news_title.png) no-repeat 50% 50% #9b73c8; text-indent: 124px; white-space: nowrap; } #c_news dl { display: table; padding: 8px 0 8px 124px; } #c_news dt, #c_news dd { display: table-cell; } #c_news dt { width: 112px; font-weight: bold; text-indent: 18px; } #c_news a { display: inline; color: #9b73c8; text-decoration: underline; } #c_news a:hover { text-decoration: none; } @keyframes movie_arrow { 0% { background-position: 0 0; } 20% { background-position: 0 0; } 100% { background-position: 0 100%; } } #c_what { position: relative; margin-top: -40px; background-image: url(../img/common/texture.png), -webkit-linear-gradient(225deg, #ffda2a 10%, #ff9e33 50%, #ff626e 100%); background-image: url(../img/common/texture.png), linear-gradient(225deg, #ffda2a 10%, #ff9e33 50%, #ff626e 100%); background-attachment: fixed, fixed; background-size: 250px 250px, auto auto; } #c_what div.container { width: 570px; min-height: 360px; padding: 47px 10px 50px 380px; position: relative; margin: 0 auto; } #c_what div.container h2 { width: 340px; position: absolute; top: 50%; left: 10px; margin-top: -180px; text-align: center; } #c_what div.container h2 span { display: block; margin-top: 20px; overflow: hidden; text-indent: -13px; } #c_what div.container dl { margin-bottom: 32px; } #c_what div.container dt { width: 570px; height: 40px; overflow: hidden; margin-bottom: 30px; background: url(../img/main/pc/what_subtitle.png) no-repeat 50% 0; text-indent: 570px; white-space: nowrap; } #c_what div.container dd { width: 570px; height: 211px; overflow: hidden; background: url(../img/main/pc/what_text.png) no-repeat 100% 0; text-indent: 570px; white-space: nowrap; } #c_what div.container div.button { width: 570px; position: relative; } #c_what div.container div.button a { width: 40px; height: 40px; padding: 25px 505px 25px 25px; border-radius: 45px; overflow: hidden; background: url(../img/main/pc/what_button.png) no-repeat 0 0; } #c_what div.container div.button a span { display: block; width: 40px; height: 40px; overflow: hidden; background: url(../img/main/pc/what_arrow.png) no-repeat 0 0; text-indent: 40px; white-space: nowrap; } #c_what div.container div.button a:hover { background-position: 0 100%; } #c_what div.container div.button a:hover span { animation: movie_arrow 0.475s steps(10) infinite; } #c_what div.container div.button strong { display: block; width: 83px; height: 30px; border-radius: 15px; overflow: hidden; position: absolute; top: -7px; right: -5px; background: url(../img/main/pc/what_button_new.png) no-repeat 50% 50% #ff3c28; text-indent: 83px; white-space: nowrap; } #c_what div.container div.button strong.update_0215 { width: 97px; background-image: url(../img/main/pc/what_button_up_0301.svg); background-size: 71px 16px; text-indent: 97px; white-space: nowrap; } @keyframes scaleUpdate { 0% { transform: scale(1.2); } 25% { transform: scale(1); } 100% { transform: scale(1); } } #wrap.main #c_what div.container div.button strong.update_0215 { animation: scaleUpdate 0.475s 2s cubic-bezier(0.215, 0.61, 0.355, 1) infinite; } @keyframes thumb_hover { 0% { background-position: 0 0; } 95% { background-position: 0 100%; } 100% { background-position: 0 100%; } } #c_games { padding: 6px 0; } #c_games ul { max-width: 1272px; border: solid transparent; border-width: 0 6px; overflow: hidden; position: relative; margin: 0 auto; } #c_games li { width: 50%; padding: 6px; box-sizing: border-box; float: left; } #c_games li:nth-child(5), #c_games li:nth-child(6) { position: absolute; bottom: 0; } #c_games li:nth-child(5) { left: 0; } #c_games li:nth-child(6) { right: 50%; } #c_games li.half { width: 25%; } #c_games li strong { display: block; width: 62px; height: 62px; overflow: hidden; position: absolute; top: 0; right: 0; background: url(../img/common/icon_new.svg) no-repeat 0 0; background-size: 100% 100%; text-indent: 62px; white-space: nowrap; } #c_games li.half strong { width: 38px; height: 38px; } #c_games section, #c_games div { width: 100%; overflow: hidden; position: relative; background: no-repeat 0 0; background-size: 100% 100%; } #c_games section::after, #c_games div::after { content: ""; width: 100%; height: 100%; position: absolute; transition: left 0.3s cubic-bezier(0.215, 0.61, 0.355, 1), top 0.28s cubic-bezier(0.215, 0.61, 0.355, 1), background-color 0s 0.3s linear; } #c_games img { width: 100%; height: auto; } #c_games a { width: 100%; height: 100%; box-sizing: border-box; border: 0 solid; overflow: hidden; position: absolute; top: 0; left: 0; text-indent: 100%; white-space: nowrap; transition: border-width 0.2s 0.21s cubic-bezier(0.215, 0.61, 0.355, 1); } #c_games section::before { display: block; width: 126px; height: 24px; border: 2px solid #ffffff; border-radius: 14px; overflow: hidden; position: absolute; bottom: 10px; left: 12px; background: url(../img/main/games_category.png) no-repeat rgba(0, 0, 0, 0.5); background-size: 252px 16px; text-indent: 126px; white-space: nowrap; } #c_games section.ftof::before { content: "対面ゲーム"; background-position: 0 50%; } #c_games section.sense::before { content: "新感覚ゲーム"; background-position: 100% 50%; } #c_games li.half section::before { width: 102px; height: 19px; border-width: 1px; border-radius: 12px; bottom: 6px; left: 6px; background-size: 204px 13px; } #c_games h3 { width: 100%; height: 100%; position: absolute; top: 0; left: 0; background: no-repeat 0 0; background-size: 100% 2000%; transition: left 0.3s cubic-bezier(0.215, 0.61, 0.355, 1), top 0.28s cubic-bezier(0.215, 0.61, 0.355, 1); } #c_games h3::after { content: ""; width: 100%; height: 100%; position: absolute; top: 0; left: 0; background: url(../img/main/pc/games_playbutton.png) no-repeat 50% 89.604%; background-size: 33.333% auto; } #c_games h3 span { display: block; width: 100%; height: 17.664%; overflow: hidden; position: absolute; top: 26.781%; left: 0; background: no-repeat 50% 0; background-size: auto 100%; text-indent: 100%; white-space: nowrap; } #c_games li.half h3::after { background-position: 50% 124.2424%; background-size: 48.366% auto; } #c_games li.half h3::after span { height: 23.2558%; top: 15.6977%; } #c_games li:hover a { border-width: 10px; } #c_games li:hover h3 { left: 0 !important; top: 0 !important; animation: thumb_hover 1.2s 0.3s steps(19, end) infinite; } #c_games.open section::after, #c_games.open div::after { left: 0 !important; top: 0 !important; transition-delay: 0s; transition-duration: 0.35s, 0.35s, 0s; } #c_games li.game_1 section::after, #c_games li.game_1 h3, #c_games li.game_2 section::after, #c_games li.game_2 h3, #c_games li.game_10 section::after, #c_games li.game_10 h3 { top: -100%; left: 0; } #c_games li.game_3 section::after, #c_games li.game_3 h3, #c_games li.game_4 section::after, #c_games li.game_4 h3, #c_games li.game_7 section::after, #c_games li.game_7 h3, #c_games li.game_11 section::after, #c_games li.game_11 h3, #c_games li.game_15 section::after, #c_games li.game_15 h3, #c_games li.game_16 section::after, #c_games li.game_16 h3 { top: 100%; left: 0; } #c_games li.game_6 section::after, #c_games li.game_6 h3, #c_games li.game_8 section::after, #c_games li.game_8 h3, #c_games li.game_12 section::after, #c_games li.game_12 h3, #c_games li.game_14 section::after, #c_games li.game_14 h3, #c_games li.game_17 section::after, #c_games li.game_17 h3 { top: 0; left: -100%; } #c_games li.game_5 section::after, #c_games li.game_5 h3, #c_games li.game_9 section::after, #c_games li.game_9 h3, #c_games li.game_13 section::after, #c_games li.game_13 h3, #c_games li.game_18 section::after, #c_games li.game_18 h3 { top: 0; left: 100%; } #c_games li.game_3 a { border-color: #ffd728; } #c_games.open.eatingcontest section::after, #c_games.open.eatingcontest div::after, #c_modal.eatingcontest { background-color: #ffd728; } #c_games li.game_1 a { border-color: #ff8228; } #c_games.open.quickdraw section::after, #c_games.open.quickdraw div::after, #c_modal.quickdraw { background-color: #ff8228; } #c_games li.game_13 a { border-color: #ff787d; } #c_games.open.runway section::after, #c_games.open.runway div::after, #c_modal.runway { background-color: #ff787d; } #c_games li.game_15 a { border-color: #ffbbbe; } #c_games.open.baby section::after, #c_games.open.baby div::after, #c_modal.baby { background-color: #ffbbbe; } #c_games li.game_9 a { border-color: #8caaf0; } #c_games.open.swordfight section::after, #c_games.open.swordfight div::after, #c_modal.swordfight { background-color: #8caaf0; } #c_games li.game_12 a, #c_games li.game_18 a { border-color: #8cebff; } #c_games.open.shaver section::after, #c_games.open.shaver div::after, #c_games.open.beachflag section::after, #c_games.open.beachflag div::after, #c_modal.shaver, #c_modal.beachflag { background-color: #8cebff; } #c_games li.game_11 a, #c_games li.game_14 a { border-color: #82e1d2; } #c_games.open.telephone section::after, #c_games.open.telephone div::after, #c_games.open.soda section::after, #c_games.open.soda div::after, #c_modal.telephone, #c_modal.soda { background-color: #82e1d2; } #c_games li.game_4 a, #c_games li.game_16 a, #c_games li.game_17 a { border-color: #cdaa82; } #c_games.open.countball section::after, #c_games.open.countball div::after, #c_games.open.joyconrotation section::after, #c_games.open.joyconrotation div::after, #c_games.open.liardice section::after, #c_games.open.liardice div::after, #c_modal.countball, #c_modal.joyconrotation, #c_modal.liardice { background-color: #cdaa82; } #c_games li.game_7 a { border-color: #a5a5a5; } #c_games.open.safecracker section::after, #c_games.open.safecracker div::after, #c_modal.safecracker { background-color: #a5a5a5; } #c_games li.game_5 a, #c_games li.andmore a { border-color: #87c3f0; } #c_games.open.shiraha section::after, #c_games.open.shiraha div::after, #c_games.open.andmore section::after, #c_games.open.andmore div::after, #c_modal.shiraha, #c_modal.andmore { background-color: #87c3f0; } #c_games li.game_8 a { border-color: #ffe128; } #c_games.open.copydance section::after, #c_games.open.copydance div::after, #c_modal.copydance { background-color: #ffe128; } #c_games li.game_2 a, #c_games li.game_6 a { border-color: #82dc5a; } #c_games.open.milk section::after, #c_games.open.milk div::after, #c_games.open.pingpong section::after, #c_games.open.pingpong div::after, #c_modal.milk, #c_modal.pingpong { background-color: #82dc5a; } #c_games li.game_10 a { border-color: #9b73c8; } #c_games.open.wizard section::after, #c_games.open.wizard div::after, #c_modal.wizard { background-color: #9b73c8; } #c_games li.game_1 h3 { background-image: url(../img/main/pc/game/thumb_1.jpg); } #c_games li.game_1 h3 span { background-image: url(../img/main/pc/game/title_1.png); } #c_games li.game_1.half h3 { background-image: url(../img/main/pc/game/thumb_half_1.jpg); } #c_games li.game_1.half h3 span { background-image: url(../img/main/pc/game/title_half_1.png); } #c_games li.game_2 h3 { background-image: url(../img/main/pc/game/thumb_2.jpg); } #c_games li.game_2 h3 span { background-image: url(../img/main/pc/game/title_2.png); } #c_games li.game_2.half h3 { background-image: url(../img/main/pc/game/thumb_half_2.jpg); } #c_games li.game_2.half h3 span { background-image: url(../img/main/pc/game/title_half_2.png); } #c_games li.game_3 h3 { background-image: url(../img/main/pc/game/thumb_3.jpg); } #c_games li.game_3 h3 span { background-image: url(../img/main/pc/game/title_3.png); } #c_games li.game_3.half h3 { background-image: url(../img/main/pc/game/thumb_half_3.jpg); } #c_games li.game_3.half h3 span { background-image: url(../img/main/pc/game/title_half_3.png); } #c_games li.game_4 h3 { background-image: url(../img/main/pc/game/thumb_4.jpg); } #c_games li.game_4 h3 span { background-image: url(../img/main/pc/game/title_4.png); } #c_games li.game_4.half h3 { background-image: url(../img/main/pc/game/thumb_half_4.jpg); } #c_games li.game_4.half h3 span { background-image: url(../img/main/pc/game/title_half_4.png); } #c_games li.game_5 h3 { background-image: url(../img/main/pc/game/thumb_5.jpg); } #c_games li.game_5 h3 span { background-image: url(../img/main/pc/game/title_5.png); } #c_games li.game_5.half h3 { background-image: url(../img/main/pc/game/thumb_half_5.jpg); } #c_games li.game_5.half h3 span { background-image: url(../img/main/pc/game/title_half_5.png); } #c_games li.game_6 h3 { background-image: url(../img/main/pc/game/thumb_6.jpg); } #c_games li.game_6 h3 span { background-image: url(../img/main/pc/game/title_6.png); } #c_games li.game_6.half h3 { background-image: url(../img/main/pc/game/thumb_half_6.jpg); } #c_games li.game_6.half h3 span { background-image: url(../img/main/pc/game/title_half_6.png); } #c_games li.game_7 h3 { background-image: url(../img/main/pc/game/thumb_7.jpg); } #c_games li.game_7 h3 span { background-image: url(../img/main/pc/game/title_7.png); } #c_games li.game_7.half h3 { background-image: url(../img/main/pc/game/thumb_half_7.jpg); } #c_games li.game_7.half h3 span { background-image: url(../img/main/pc/game/title_half_7.png); } #c_games li.game_8 h3 { background-image: url(../img/main/pc/game/thumb_8.jpg); } #c_games li.game_8 h3 span { background-image: url(../img/main/pc/game/title_8.png); } #c_games li.game_8.half h3 { background-image: url(../img/main/pc/game/thumb_half_8.jpg); } #c_games li.game_8.half h3 span { background-image: url(../img/main/pc/game/title_half_8.png); } #c_games li.game_9 h3 { background-image: url(../img/main/pc/game/thumb_9.jpg); } #c_games li.game_9 h3 span { background-image: url(../img/main/pc/game/title_9.png); } #c_games li.game_9.half h3 { background-image: url(../img/main/pc/game/thumb_half_9.jpg); } #c_games li.game_9.half h3 span { background-image: url(../img/main/pc/game/title_half_9.png); } #c_games li.game_10 h3 { background-image: url(../img/main/pc/game/thumb_10.jpg); } #c_games li.game_10 h3 span { background-image: url(../img/main/pc/game/title_10.png); } #c_games li.game_10.half h3 { background-image: url(../img/main/pc/game/thumb_half_10.jpg); } #c_games li.game_10.half h3 span { background-image: url(../img/main/pc/game/title_half_10.png); } #c_games li.game_11 h3 { background-image: url(../img/main/pc/game/thumb_11.jpg); } #c_games li.game_11 h3 span { background-image: url(../img/main/pc/game/title_11.png); } #c_games li.game_11.half h3 { background-image: url(../img/main/pc/game/thumb_half_11.jpg); } #c_games li.game_11.half h3 span { background-image: url(../img/main/pc/game/title_half_11.png); } #c_games li.game_12 h3 { background-image: url(../img/main/pc/game/thumb_12.jpg); } #c_games li.game_12 h3 span { background-image: url(../img/main/pc/game/title_12.png); } #c_games li.game_12.half h3 { background-image: url(../img/main/pc/game/thumb_half_12.jpg); } #c_games li.game_12.half h3 span { background-image: url(../img/main/pc/game/title_half_12.png); } #c_games li.game_13 h3 { background-image: url(../img/main/pc/game/thumb_13.jpg); } #c_games li.game_13 h3 span { background-image: url(../img/main/pc/game/title_13.png); } #c_games li.game_13.half h3 { background-image: url(../img/main/pc/game/thumb_half_13.jpg); } #c_games li.game_13.half h3 span { background-image: url(../img/main/pc/game/title_half_13.png); } #c_games li.game_14 h3 { background-image: url(../img/main/pc/game/thumb_14.jpg); } #c_games li.game_14 h3 span { background-image: url(../img/main/pc/game/title_14.png); } #c_games li.game_14.half h3 { background-image: url(../img/main/pc/game/thumb_half_14.jpg); } #c_games li.game_14.half h3 span { background-image: url(../img/main/pc/game/title_half_14.png); } #c_games li.game_15 h3 { background-image: url(../img/main/pc/game/thumb_15.jpg); } #c_games li.game_15 h3 span { background-image: url(../img/main/pc/game/title_15.png); } #c_games li.game_15.half h3 { background-image: url(../img/main/pc/game/thumb_half_15.jpg); } #c_games li.game_15.half h3 span { background-image: url(../img/main/pc/game/title_half_15.png); } #c_games li.game_16 h3 { background-image: url(../img/main/pc/game/thumb_16.jpg); } #c_games li.game_16 h3 span { background-image: url(../img/main/pc/game/title_16.png); } #c_games li.game_16.half h3 { background-image: url(../img/main/pc/game/thumb_half_16.jpg); } #c_games li.game_16.half h3 span { background-image: url(../img/main/pc/game/title_half_16.png); } #c_games li.game_17 h3 { background-image: url(../img/main/pc/game/thumb_17.jpg); } #c_games li.game_17 h3 span { background-image: url(../img/main/pc/game/title_17.png); } #c_games li.game_17.half h3 { background-image: url(../img/main/pc/game/thumb_half_17.jpg); } #c_games li.game_17.half h3 span { background-image: url(../img/main/pc/game/title_half_17.png); } #c_games li.game_18 h3 { background-image: url(../img/main/pc/game/thumb_18.jpg); } #c_games li.game_18 h3 span { background-image: url(../img/main/pc/game/title_18.png); } #c_games li.game_18.half h3 { background-image: url(../img/main/pc/game/thumb_half_18.jpg); } #c_games li.game_18.half h3 span { background-image: url(../img/main/pc/game/title_half_18.png); } #c_games li.andmore { width: 100%; } #c_games li.andmore div::after { top: -100%; left: 0; } #c_games li.andmore a { transition-delay: 0s; } #c_games li.joycon div::after { top: 100%; left: 0; } @keyframes modalarrow_andmore { 0% { background-position: -52px 0, 0 0; } 100% { background-position: -52px 0, 0 100%; } } @keyframes modalclose_andmore { 0% { background-position: -80px 0, 0 0; } 100% { background-position: -80px 0, 0 100%; } } @keyframes modalarrow_yellow { 0% { background-position: -52px 0, 0px 0; } 100% { background-position: -52px 0, 0px 100%; } } @keyframes modalclose_yellow { 0% { background-position: -80px 0, 0px 0; } 100% { background-position: -80px 0, 0px 100%; } } @keyframes modalarrow_orange { 0% { background-position: -52px 0, -52px 0; } 100% { background-position: -52px 0, -52px 100%; } } @keyframes modalclose_orange { 0% { background-position: -80px 0, -80px 0; } 100% { background-position: -80px 0, -80px 100%; } } @keyframes modalarrow_pink { 0% { background-position: -52px 0, -104px 0; } 100% { background-position: -52px 0, -104px 100%; } } @keyframes modalclose_pink { 0% { background-position: -80px 0, -160px 0; } 100% { background-position: -80px 0, -160px 100%; } } @keyframes modalarrow_halfpink { 0% { background-position: -52px 0, -156px 0; } 100% { background-position: -52px 0, -156px 100%; } } @keyframes modalclose_halfpink { 0% { background-position: -80px 0, -240px 0; } 100% { background-position: -80px 0, -240px 100%; } } @keyframes modalarrow_purple { 0% { background-position: -52px 0, -208px 0; } 100% { background-position: -52px 0, -208px 100%; } } @keyframes modalclose_purple { 0% { background-position: -80px 0, -320px 0; } 100% { background-position: -80px 0, -320px 100%; } } @keyframes modalarrow_blue { 0% { background-position: -52px 0, -260px 0; } 100% { background-position: -52px 0, -260px 100%; } } @keyframes modalclose_blue { 0% { background-position: -80px 0, -400px 0; } 100% { background-position: -80px 0, -400px 100%; } } @keyframes modalarrow_skyblue { 0% { background-position: -52px 0, -312px 0; } 100% { background-position: -52px 0, -312px 100%; } } @keyframes modalclose_skyblue { 0% { background-position: -80px 0, -480px 0; } 100% { background-position: -80px 0, -480px 100%; } } @keyframes modalarrow_mossgreen { 0% { background-position: -52px 0, -364px 0; } 100% { background-position: -52px 0, -364px 100%; } } @keyframes modalclose_mossgreen { 0% { background-position: -80px 0, -560px 0; } 100% { background-position: -80px 0, -560px 100%; } } @keyframes modalarrow_lightgreen { 0% { background-position: -52px 0, -416px 0; } 100% { background-position: -52px 0, -416px 100%; } } @keyframes modalclose_lightgreen { 0% { background-position: -80px 0, -640px 0; } 100% { background-position: -80px 0, -640px 100%; } } @keyframes modalarrow_brown { 0% { background-position: -52px 0, -468px 0; } 100% { background-position: -52px 0, -468px 100%; } } @keyframes modalclose_brown { 0% { background-position: -80px 0, -720px 0; } 100% { background-position: -80px 0, -720px 100%; } } @keyframes modalarrow_gray { 0% { background-position: -52px 0, -520px 0; } 100% { background-position: -52px 0, -520px 100%; } } @keyframes modalclose_gray { 0% { background-position: -80px 0, -800px 0; } 100% { background-position: -80px 0, -800px 100%; } } @keyframes modalarrow_chanbarablue { 0% { background-position: -52px 0, -572px 0; } 100% { background-position: -52px 0, -572px 100%; } } @keyframes modalclose_chanbarablue { 0% { background-position: -80px 0, -880px 0; } 100% { background-position: -80px 0, -880px 100%; } } @keyframes modalarrow_dancingyellow { 0% { background-position: -52px 0, -624px 0; } 100% { background-position: -52px 0, -624px 100%; } } @keyframes modalclose_dancingyellow { 0% { background-position: -80px 0, -960px 0; } 100% { background-position: -80px 0, -960px 100%; } } @keyframes modalarrow_tablegreen { 0% { background-position: -52px 0, -676px 0; } 100% { background-position: -52px 0, -676px 100%; } } @keyframes modalclose_tablegreen { 0% { background-position: -80px 0, -1040px 0; } 100% { background-position: -80px 0, -1040px 100%; } } @keyframes modalarrow_magicalpurple { 0% { background-position: -52px 0, -728px 0; } 100% { background-position: -52px 0, -728px 100%; } } @keyframes modalclose_magicalpurple { 0% { background-position: -80px 0, -1120px 0; } 100% { background-position: -80px 0, -1120px 100%; } } @keyframes modalarrow_milkypink { 0% { background-position: -52px 0, -780px 0; } 100% { background-position: -52px 0, -780px 100%; } } @keyframes modalclose_milkypink { 0% { background-position: -80px 0, -1200px 0; } 100% { background-position: -80px 0, -1200px 100%; } } @keyframes prev_move { 0% { transform: scaleX(-1) translateX(0); } 25% { transform: scaleX(-1) translateX(5px); } 100% { transform: scaleX(-1) translateX(0); } } @keyframes next_move { 0% { transform: translateX(0); } 25% { transform: translateX(5px); } 100% { transform: translateX(0); } } #c_modal { width: 100%; height: 100%; min-width: 960px; min-height: 846px; position: fixed; top: 0; left: -100%; z-index: 10200; transition: left 0s 0s cubic-bezier(0.215, 0.61, 0.355, 1); } @media (max-width: 960px) { #c_modal { left: -960px; } } #c_modal div.modalArea { width: 100%; height: 100%; overflow: hidden; opacity: 0; background-size: 250px 250px, auto auto; transition: opacity 0s 0s cubic-bezier(0.215, 0.61, 0.355, 1); } #c_modal div.container { width: 100%; max-width: 1280px; height: 100%; position: relative; margin: 0 auto; } #c_modal.open { left: 0; transition-duration: 0.4s; transition-delay: 0.2s; } #c_modal.open div.modalArea { opacity: 1; transition-duration: 0.5s; transition-delay: 0.85s; } #c_modal a, #c_modal button { overflow: hidden; position: absolute; text-indent: 80px; white-space: nowrap; } #c_modal a.prev, #c_modal a.next, #c_modal button.prev, #c_modal button.next { width: 52px; height: 92px; top: 50%; margin-top: -46px; background: url(../img/main/pc/modal_arrow.svg) no-repeat 0 0, url(../img/main/pc/modal_arrow.png) no-repeat 52px 0; background-size: 52px 92px, auto auto; } #c_modal a.prev, #c_modal button.prev { transform: scaleX(-1); } #c_modal a.close, #c_modal button.close { width: 80px; height: 80px; top: 0; right: 0; background: url(../img/main/sp/modal_close.svg) no-repeat 0 0, url(../img/main/pc/modal_close.png) no-repeat 80px 0; background-size: 80px 80px, auto auto; } #c_modal button.prev { left: 10px; transition: left 0.3s 0s cubic-bezier(0.215, 0.61, 0.355, 1); } #c_modal button.next { right: 10px; transition: right 0.3s 0s cubic-bezier(0.215, 0.61, 0.355, 1); } #c_modal button.close { top: -80px; transition: top 0.2s 0s cubic-bezier(0.215, 0.61, 0.355, 1); } #c_modal a.prev { left: -92px; animation: prev_move 0.475s infinite; } #c_modal a.next { right: -92px; animation: next_move 0.475s infinite; } #c_modal.open a.prev:hover, #c_modal.open a.next:hover, #c_modal.open button.prev:hover, #c_modal.open button.next:hover { animation-duration: 0.475s, 0.45s; animation-delay: 0s, 0s; animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1), steps(13); animation-iteration-count: infinite, 1; animation-fill-mode: forwards, forwards; } #c_modal.open a.close:hover, #c_modal.open button.close:hover { animation-duration: 0.45s; animation-timing-function: steps(10); animation-iteration-count: 1; animation-fill-mode: forwards; } #c_modal.open button { transition-delay: 1.35s; } #c_modal.open button.prev { left: -92px; animation: prev_move 0.475s 1.55s infinite; } #c_modal.open button.next { right: -92px; animation: next_move 0.475s 1.55s infinite; } #c_modal.open button.close { top: 0; } #c_youtube { width: 100%; padding: 160px 112px 272px; height: 100%; box-sizing: border-box; overflow: hidden; text-align: center; position: relative; } #c_youtube div.videoArea { display: inline-block; height: 100%; max-width: 100%; max-height: 100%; position: relative; } #c_youtube div.videoArea img { display: inline; width: auto; height: auto; max-width: 100%; max-height: 100%; } #c_youtube section.video { width: 100%; padding-top: 56.25%; position: absolute; top: 50%; left: 0; margin-top: -28.125%; } #c_youtube section.video div.text { width: 950px; position: absolute; left: 50%; top: 100%; margin: 30px 0 0 -475px; } #c_youtube h3 { width: 956px; height: 80px; overflow: hidden; position: absolute; top: -120px; left: 50%; margin-left: -478px; } #c_youtube h3 span { display: block; height: 80px; border-radius: 40px; margin: 0 auto; background: url(../img/main/modal_title.png) no-repeat; text-indent: 100%; white-space: nowrap; } #c_youtube p { width: 950px; overflow: hidden; margin: 0 auto 19px; background: url(../img/main/pc/modal_caption.png) no-repeat; text-indent: 950px; white-space: nowrap; } #c_youtube dl { height: 68px; padding-right: 31px; border: 4px solid #ffffff; border-radius: 38px; position: relative; margin: 0 auto; background: rgba(0, 0, 0, 0.15); } #c_youtube dl.ftof { width: 750px; padding-left: 151px; } #c_youtube dl.sense { width: 762px; padding-left: 139px; } #c_youtube dt { height: 76px; border-radius: 38px; overflow: hidden; position: absolute; top: -4px; left: -4px; background: url(../img/main/pc/modal_point_title.png) no-repeat 0 0; text-indent: 130px; white-space: nowrap; } #c_youtube dl.ftof dt { width: 130px; background-position: 100% 0; } #c_youtube dl.sense dt { width: 118px; } #c_youtube dd { width: 100%; height: 68px; overflow: hidden; background: url(../img/main/pc/modal_point.png) no-repeat 50% 0; text-indent: 762px; white-space: nowrap; } #c_youtubeIframe { width: 100%; height: 100%; overflow: hidden; position: absolute; top: 0; right: 0; background: url(../img/main/pc/js_off.png) no-repeat 50% 50% #000000; text-align: left; text-indent: 100%; white-space: nowrap; } #c_games.open.eatingcontest section::after, #c_games.open.eatingcontest div::after, #c_modal.eatingcontest { background-color: #ffd728; } #c_modal.soda a.prev:hover, #c_modal.soda button.prev:hover { animation-name: prev_move, modalarrow_yellow; } #c_modal.runway a.next:hover, #c_modal.runway button.next:hover { animation-name: next_move, modalarrow_yellow; } #c_modal.safecracker a.close:hover, #c_modal.safecracker button.close:hover { animation-name: modalclose_yellow; } #c_games.open.quickdraw section::after, #c_games.open.quickdraw div::after, #c_modal.quickdraw { background-color: #ff8228; } #c_modal.milk a.prev:hover, #c_modal.milk button.prev:hover { animation-name: prev_move, modalarrow_orange; } #c_modal.shiraha a.next:hover, #c_modal.shiraha button.next:hover { animation-name: next_move, modalarrow_orange; } #c_modal.swordfight a.close:hover, #c_modal.swordfight button.close:hover, #c_modal.wizard a.close:hover, #c_modal.wizard button.close:hover { animation-name: modalclose_orange; } #c_games.open.runway section::after, #c_games.open.runway div::after, #c_modal.runway { background-color: #ff787d; } #c_modal.eatingcontest a.prev:hover, #c_modal.eatingcontest button.prev:hover { animation-name: prev_move, modalarrow_pink; } #c_modal.milk a.next:hover, #c_modal.milk button.next:hover { animation-name: next_move, modalarrow_pink; } #c_modal.runway a.close:hover, #c_modal.runway button.close:hover, #c_modal.baby a.close:hover, #c_modal.baby button.close:hover { animation-name: modalclose_pink; } #c_games.open.baby section::after, #c_games.open.baby div::after, #c_modal.baby { background-color: #ffbbbe; } #c_modal.safecracker a.prev:hover, #c_modal.safecracker button.prev:hover { animation-name: prev_move, modalarrow_halfpink; } #c_modal.liardice a.next:hover, #c_modal.liardice button.next:hover { animation-name: next_move, modalarrow_halfpink; } #c_modal.soda a.close:hover, #c_modal.soda button.close:hover, #c_modal.liardice a.close:hover, #c_modal.liardice button.close:hover { animation-name: modalclose_purple; } #c_games.open.swordfight section::after, #c_games.open.swordfight div::after, #c_modal.swordfight { background-color: #8caaf0; } #c_modal.wizard a.prev:hover, #c_modal.wizard button.prev:hover { animation-name: prev_move, modalarrow_blue; } #c_modal.telephone a.next:hover, #c_modal.telephone button.next:hover { animation-name: next_move, modalarrow_blue; } #c_games.open.shaver section::after, #c_games.open.shaver div::after, #c_games.open.beachflag section::after, #c_games.open.beachflag div::after, #c_modal.shaver, #c_modal.beachflag { background-color: #8cebff; } #c_modal.telephone a.prev:hover, #c_modal.telephone button.prev:hover, #c_modal.shaver a.prev:hover, #c_modal.shaver button.prev:hover { animation-name: prev_move, modalarrow_skyblue; } #c_modal.countball a.next:hover, #c_modal.countball button.next:hover, #c_modal.beachflag a.next:hover, #c_modal.beachflag button.next:hover { animation-name: next_move, modalarrow_skyblue; } #c_games.open.telephone section::after, #c_games.open.telephone div::after, #c_games.open.soda section::after, #c_games.open.soda div::after, #c_modal.telephone, #c_modal.soda { background-color: #82e1d2; } #c_modal.countball a.prev:hover, #c_modal.countball button.prev:hover, #c_modal.swordfight a.prev:hover, #c_modal.swordfight button.prev:hover { animation-name: prev_move, modalarrow_mossgreen; } #c_modal.eatingcontest a.next:hover, #c_modal.eatingcontest button.next:hover, #c_modal.shaver a.next:hover, #c_modal.shaver button.next:hover { animation-name: next_move, modalarrow_mossgreen; } #c_modal.beachflag a.close:hover, #c_modal.beachflag button.close:hover { animation-name: modalclose_mossgreen; } #c_modal.eatingcontest a.close:hover, #c_modal.eatingcontest button.close:hover, #c_modal.countball a.close:hover, #c_modal.countball button.close:hover { animation-name: modalclose_lightgreen; } #c_games.open.countball section::after, #c_games.open.countball div::after, #c_games.open.joyconrotation section::after, #c_games.open.joyconrotation div::after, #c_games.open.liardice section::after, #c_games.open.liardice div::after, #c_modal.countball, #c_modal.joyconrotation, #c_modal.liardice { background-color: #cdaa82; } #c_modal.shiraha a.prev:hover, #c_modal.shiraha button.prev:hover, #c_modal.baby a.prev:hover, #c_modal.baby button.prev:hover, #c_modal.beachflag a.prev:hover, #c_modal.beachflag button.prev:hover { animation-name: prev_move, modalarrow_brown; } #c_modal.pingpong a.next:hover, #c_modal.pingpong button.next:hover, #c_modal.wizard a.next:hover, #c_modal.wizard button.next:hover, #c_modal.soda a.next:hover, #c_modal.soda button.next:hover { animation-name: next_move, modalarrow_brown; } #c_modal.milk a.close:hover, #c_modal.milk button.close:hover, #c_modal.telephone a.close:hover, #c_modal.telephone button.close:hover { animation-name: modalclose_brown; } #c_games.open.safecracker section::after, #c_games.open.safecracker div::after, #c_modal.safecracker { background-color: #a5a5a5; } #c_modal.copydance a.prev:hover, #c_modal.copydance button.prev:hover { animation-name: prev_move, modalarrow_gray; } #c_modal.baby a.next:hover, #c_modal.baby button.next:hover { animation-name: next_move, modalarrow_gray; } #c_modal.shaver a.close:hover, #c_modal.shaver button.close:hover, #c_modal.joyconrotation a.close:hover, #c_modal.joyconrotation button.close:hover { animation-name: modalclose_gray; } #c_games.open.shiraha section::after, #c_games.open.shiraha div::after, #c_games.open.andmore section::after, #c_games.open.andmore div::after, #c_modal.shiraha, #c_modal.andmore { background-color: #87c3f0; } #c_modal.quickdraw a.prev:hover, #c_modal.quickdraw button.prev:hover, #c_modal.pingpong a.prev:hover, #c_modal.pingpong button.prev:hover { animation-name: prev_move, modalarrow_chanbarablue; } #c_modal.copydance a.next:hover, #c_modal.copydance button.next:hover, #c_modal.joyconrotation a.next:hover, #c_modal.joyconrotation button.next:hover { animation-name: next_move, modalarrow_chanbarablue; } #c_modal.copydance a.close:hover, #c_modal.copydance button.close:hover { animation-name: modalclose_chanbarablue; } #c_games.open.copydance section::after, #c_games.open.copydance div::after, #c_modal.copydance { background-color: #ffe128; } #c_modal.andmore a.prev:hover, #c_modal.andmore button.prev:hover { animation-name: prev_move, modalarrow_dancingyellow; } #c_modal.safecracker a.next:hover, #c_modal.safecracker button.next:hover { animation-name: next_move, modalarrow_dancingyellow; } #c_modal.shiraha a.close:hover, #c_modal.shiraha button.close:hover, #c_modal.andmore a.close:hover, #c_modal.andmore button.close:hover { animation-name: modalclose_dancingyellow; } #c_games.open.milk section::after, #c_games.open.milk div::after, #c_games.open.pingpong section::after, #c_games.open.pingpong div::after, #c_modal.milk, #c_modal.pingpong { background-color: #82dc5a; } #c_modal.runway a.prev:hover, #c_modal.runway button.prev:hover, #c_modal.joyconrotation a.prev:hover, #c_modal.joyconrotation button.prev:hover { animation-name: prev_move, modalarrow_tablegreen; } #c_modal.quickdraw a.next:hover, #c_modal.quickdraw button.next:hover, #c_modal.andmore a.next:hover, #c_modal.andmore button.next:hover { animation-name: next_move, modalarrow_tablegreen; } #c_games.open.wizard section::after, #c_games.open.wizard div::after, #c_modal.wizard { background-color: #9b73c8; } #c_modal.liardice a.prev:hover, #c_modal.liardice button.prev:hover { animation-name: prev_move, modalarrow_magicalpurple; } #c_modal.swordfight a.next:hover, #c_modal.swordfight button.next:hover { animation-name: next_move, modalarrow_magicalpurple; } #c_modal.quickdraw a.close:hover, #c_modal.quickdraw button.close:hover { animation-name: modalclose_magicalpurple; } #c_modal.pingpong a.close:hover, #c_modal.pingpong button.close:hover { animation-name: modalclose_milkypink; } #c_modal.eatingcontest div.modalArea, #c_modal.copydance div.modalArea { background-image: url(../img/common/texture.png), -webkit-linear-gradient(225deg, #f3f38a 10%, #ffdf28 50%, #b7d028 100%); background-image: url(../img/common/texture.png), linear-gradient(225deg, #f3f38a 10%, #ffdf28 50%, #b7d028 100%); } #c_modal.eatingcontest dt, #c_modal.copydance dt { background-color: #b7d028; } #c_modal.quickdraw div.modalArea { background-image: url(../img/common/texture.png), -webkit-linear-gradient(225deg, #f8d55a 10%, #ff8028 50%, #ff5a46 100%); background-image: url(../img/common/texture.png), linear-gradient(225deg, #f8d55a 10%, #ff8028 50%, #ff5a46 100%); } #c_modal.quickdraw dt { background-color: #fd752c; } #c_modal.runway div.modalArea { background-image: url(../img/common/texture.png), -webkit-linear-gradient(225deg, #ffb9bc 10%, #ff787d 50%, #da3c3c 100%); background-image: url(../img/common/texture.png), linear-gradient(225deg, #ffb9bc 10%, #ff787d 50%, #da3c3c 100%); } #c_modal.runway dt { background-color: #f26165; } #c_modal.wizard div.modalArea { background-image: url(../img/common/texture.png), -webkit-linear-gradient(225deg, #d0b4df 10%, #a36ec1 50%, #5f28bc 100%); background-image: url(../img/common/texture.png), linear-gradient(225deg, #d0b4df 10%, #a36ec1 50%, #5f28bc 100%); } #c_modal.wizard dt { background-color: #8954bc; } #c_modal.shiraha div.modalArea, #c_modal.swordfight div.modalArea { background-image: url(../img/common/texture.png), -webkit-linear-gradient(225deg, #c3d3f5 10%, #8aa8ee 50%, #5064ee 100%); background-image: url(../img/common/texture.png), linear-gradient(225deg, #c3d3f5 10%, #8aa8ee 50%, #5064ee 100%); } #c_modal.shiraha dt, #c_modal.swordfight dt { background-color: #748fec; } #c_modal.shaver div.modalArea, #c_modal.beachflag div.modalArea { background-image: url(../img/common/texture.png), -webkit-linear-gradient(225deg, #bceeff 10%, #8ad5f3 50%, #32a8c6 100%); background-image: url(../img/common/texture.png), linear-gradient(225deg, #bceeff 10%, #8ad5f3 50%, #32a8c6 100%); } #c_modal.shaver dt, #c_modal.beachflag dt { background-color: #53b8d7; } #c_modal.telephone div.modalArea, #c_modal.soda div.modalArea { background-image: url(../img/common/texture.png), -webkit-linear-gradient(225deg, #bceed0 10%, #80dfc6 50%, #329eb2 100%); background-image: url(../img/common/texture.png), linear-gradient(225deg, #bceed0 10%, #80dfc6 50%, #329eb2 100%); } #c_modal.telephone dt, #c_modal.soda dt { background-color: #66cabf; } #c_modal.milk div.modalArea, #c_modal.pingpong div.modalArea { background-image: url(../img/common/texture.png), -webkit-linear-gradient(225deg, #eef298 10%, #a3df46 50%, #3cc68a 100%); background-image: url(../img/common/texture.png), linear-gradient(225deg, #eef298 10%, #a3df46 50%, #3cc68a 100%); } #c_modal.milk dt, #c_modal.pingpong dt { background-color: #81d657; } #c_modal.countball div.modalArea, #c_modal.joyconrotation div.modalArea, #c_modal.liardice div.modalArea { background-image: url(../img/common/texture.png), -webkit-linear-gradient(225deg, #dfd5a8 10%, #d09e64 50%, #a35f46 100%); background-image: url(../img/common/texture.png), linear-gradient(225deg, #dfd5a8 10%, #d09e64 50%, #a35f46 100%); } #c_modal.countball dt, #c_modal.joyconrotation dt, #c_modal.liardice dt { background-color: #c08657; } #c_modal.safecracker div.modalArea { background-image: url(../img/common/texture.png), -webkit-linear-gradient(225deg, #d5e4da 10%, #a1a1a1 50%, #6e7378 100%); background-image: url(../img/common/texture.png), linear-gradient(225deg, #d5e4da 10%, #a1a1a1 50%, #6e7378 100%); } #c_modal.safecracker dt { background-color: #8e8e90; } #c_modal.baby div.modalArea { background-image: url(../img/common/texture.png), -webkit-linear-gradient(225deg, #ffdcdd 10%, #ffbbbe 50%, #ec9d9d 100%); background-image: url(../img/common/texture.png), linear-gradient(225deg, #ffdcdd 10%, #ffbbbe 50%, #ec9d9d 100%); } #c_modal.baby dt { background-color: #ff787d; } #c_modal.quickdraw h3 span { width: 284px; background-position: 50% -80px; } #c_modal.quickdraw p { height: 64px; background-position: 50% -92px; } #c_modal.quickdraw dl { width: 474px; } #c_modal.quickdraw dd { background-position: 50% 0px; } #c_modal.milk h3 span { width: 226px; background-position: 50% -160px; } #c_modal.milk p { height: 64px; background-position: 50% -156px; } #c_modal.milk dl { width: 714px; } #c_modal.milk dd { background-position: 50% -68px; } #c_modal.eatingcontest h3 span { width: 484px; background-position: 50% -240px; } #c_modal.eatingcontest p { height: 92px; background-position: 50% -220px; margin-bottom: 34px; } #c_modal.eatingcontest dl { width: 530px; } #c_modal.eatingcontest dd { background-position: 50% -136px; } #c_modal.countball h3 span { width: 430px; background-position: 50% -320px; } #c_modal.countball p { height: 64px; background-position: 50% -312px; } #c_modal.countball dl { width: 588px; } #c_modal.countball dd { background-position: 50% -204px; } #c_modal.shiraha h3 span { width: 384px; background-position: 50% -400px; } #c_modal.shiraha p { height: 64px; background-position: 50% -376px; } #c_modal.shiraha dl { width: 540px; } #c_modal.shiraha dd { background-position: 50% -272px; } #c_modal.pingpong h3 span { width: 280px; background-position: 50% -480px; } #c_modal.pingpong p { height: 64px; background-position: 50% -440px; } #c_modal.pingpong dl { width: 690px; } #c_modal.pingpong dd { background-position: 50% -340px; } #c_modal.safecracker h3 span { width: 282px; background-position: 50% -560px; } #c_modal.safecracker p { height: 64px; background-position: 50% -504px; } #c_modal.safecracker dl { width: 676px; } #c_modal.safecracker dd { background-position: 50% -408px; } #c_modal.copydance h3 span { width: 376px; background-position: 50% -640px; } #c_modal.copydance p { height: 64px; background-position: 50% -568px; } #c_modal.copydance dl { width: 608px; } #c_modal.copydance dd { background-position: 50% -476px; } #c_modal.swordfight h3 span { width: 408px; background-position: 50% -720px; } #c_modal.swordfight p { height: 64px; background-position: 50% -632px; } #c_modal.swordfight dl { width: 522px; } #c_modal.swordfight dd { background-position: 50% -544px; } #c_modal.wizard h3 span { width: 300px; background-position: 50% -800px; } #c_modal.wizard p { height: 64px; background-position: 50% -696px; } #c_modal.wizard dl { width: 456px; } #c_modal.wizard dd { background-position: 50% -612px; } #c_modal.telephone h3 span { width: 240px; background-position: 50% -880px; } #c_modal.telephone p { height: 64px; background-position: 50% -760px; } #c_modal.telephone dl { width: 630px; } #c_modal.telephone dd { background-position: 50% -680px; } #c_modal.shaver h3 span { width: 280px; background-position: 50% -960px; } #c_modal.shaver p { height: 64px; background-position: 50% -824px; } #c_modal.shaver dl { width: 740px; } #c_modal.shaver dd { background-position: 50% -748px; } #c_modal.runway h3 span { width: 432px; background-position: 50% -1040px; } #c_modal.runway p { height: 64px; background-position: 50% -888px; } #c_modal.runway dl { width: 476px; } #c_modal.runway dd { background-position: 50% -816px; } #c_modal.soda h3 span { width: 232px; background-position: 50% -1120px; } #c_modal.soda p { height: 64px; background-position: 50% -952px; } #c_modal.soda dl { width: 734px; } #c_modal.soda dd { background-position: 50% -884px; } #c_modal.baby h3 span { width: 280px; background-position: 50% -1200px; } #c_modal.baby p { height: 92px; background-position: 50% -1016px; margin-bottom: 34px; } #c_modal.baby dl { width: 496px; } #c_modal.baby dd { background-position: 50% -952px; } #c_modal.joyconrotation h3 span { width: 424px; background-position: 50% -1280px; } #c_modal.joyconrotation p { height: 64px; background-position: 50% -1108px; } #c_modal.joyconrotation dl { width: 680px; } #c_modal.joyconrotation dd { background-position: 50% -1020px; } #c_modal.liardice h3 span { width: 430px; background-position: 50% -1360px; } #c_modal.liardice p { height: 64px; background-position: 50% -1172px; } #c_modal.liardice dl { width: 656px; } #c_modal.liardice dd { background-position: 50% -1088px; } #c_modal.beachflag h3 span { width: 432px; background-position: 50% -1440px; } #c_modal.beachflag p { height: 64px; background-position: 50% -1236px; } #c_modal.beachflag dl { width: 560px; } #c_modal.beachflag dd { background-position: 50% -1156px; } #c_modal.andmore h3 span { width: 360px; background-position: 50% 0; } #c_modal.andmore p { height: 92px; background-position: 50% 0; } #c_modal.andmore #c_youtubeIframe { background: url(../img/main/movie_thumb_0.jpg) no-repeat 0 0; background-size: 100% 100%; } #c_youtubeIframe { background-size: 100% 100%; } #c_modal.quickdraw #c_youtubeIframe { background-image: url(../img/main/movie_thumb_1.jpg); } #c_modal.milk #c_youtubeIframe { background-image: url(../img/main/movie_thumb_2.jpg); } #c_modal.eatingcontest #c_youtubeIframe { background-image: url(../img/main/movie_thumb_3.jpg); } #c_modal.countball #c_youtubeIframe { background-image: url(../img/main/movie_thumb_4.jpg); } #c_modal.shiraha #c_youtubeIframe { background-image: url(../img/main/movie_thumb_5.jpg); } #c_modal.pingpong #c_youtubeIframe { background-image: url(../img/main/movie_thumb_6.jpg); } #c_modal.safecracker #c_youtubeIframe { background-image: url(../img/main/movie_thumb_7.jpg); } #c_modal.copydance #c_youtubeIframe { background-image: url(../img/main/movie_thumb_8.jpg); } #c_modal.swordfight #c_youtubeIframe { background-image: url(../img/main/movie_thumb_9.jpg); } #c_modal.wizard #c_youtubeIframe { background-image: url(../img/main/movie_thumb_10.jpg); } #c_modal.telephone #c_youtubeIframe { background-image: url(../img/main/movie_thumb_11.jpg); } #c_modal.shaver #c_youtubeIframe { background-image: url(../img/main/movie_thumb_12.jpg); } #c_modal.runway #c_youtubeIframe { background-image: url(../img/main/movie_thumb_13.jpg); } #c_modal.soda #c_youtubeIframe { background-image: url(../img/main/movie_thumb_14.jpg); } #c_modal.baby #c_youtubeIframe { background-image: url(../img/main/movie_thumb_15.jpg); } #c_modal.joyconrotation #c_youtubeIframe { background-image: url(../img/main/movie_thumb_16.jpg); } #c_modal.liardice #c_youtubeIframe { background-image: url(../img/main/movie_thumb_17.jpg); } #c_modal.beachflag #c_youtubeIframe { background-image: url(../img/main/movie_thumb_18.jpg); } #c_modal_thumb { width: 0; height: 0; overflow: hidden; position: fixed; top: 0; left: 100%; z-index: 10201; transition: transform 0.4s 0s cubic-bezier(0.215, 0.61, 0.355, 1), left 0s 0.4s linear; } #c_modal_thumb.change { transition-duration: 0s, 0s; } #c_modal_thumb li { width: 100%; height: 100%; overflow: hidden; position: absolute; top: 100%; left: 0; background: no-repeat 0 0; background-size: 100% 100%; text-indent: 100%; white-space: nowrap; transition: left 0.35s 0s cubic-bezier(0.215, 0.61, 0.355, 1), top 0s 0.35s linear; } #c_modal_thumb.quickdraw, #c_modal_thumb.milk, #c_modal_thumb.eatingcontest, #c_modal_thumb.countball, #c_modal_thumb.shiraha, #c_modal_thumb.pingpong, #c_modal_thumb.safecracker, #c_modal_thumb.copydance, #c_modal_thumb.swordfight, #c_modal_thumb.wizard, #c_modal_thumb.telephone, #c_modal_thumb.shaver, #c_modal_thumb.runway, #c_modal_thumb.soda, #c_modal_thumb.baby, #c_modal_thumb.joyconrotation, #c_modal_thumb.liardice, #c_modal_thumb.beachflag { transition-delay: 0.37s, 0s; } #c_modal_thumb.quickdraw li, #c_modal_thumb.milk li, #c_modal_thumb.eatingcontest li, #c_modal_thumb.countball li, #c_modal_thumb.shiraha li, #c_modal_thumb.pingpong li, #c_modal_thumb.safecracker li, #c_modal_thumb.copydance li, #c_modal_thumb.swordfight li, #c_modal_thumb.wizard li, #c_modal_thumb.telephone li, #c_modal_thumb.shaver li, #c_modal_thumb.runway li, #c_modal_thumb.soda li, #c_modal_thumb.baby li, #c_modal_thumb.joyconrotation li, #c_modal_thumb.liardice li, #c_modal_thumb.beachflag li { transition-delay: 0s, 0.4s; } #c_modal_thumb.quickdraw li:nth-child(1), #c_modal_thumb.milk li:nth-child(2), #c_modal_thumb.eatingcontest li:nth-child(3), #c_modal_thumb.countball li:nth-child(4), #c_modal_thumb.shiraha li:nth-child(5), #c_modal_thumb.pingpong li:nth-child(6), #c_modal_thumb.safecracker li:nth-child(7), #c_modal_thumb.copydance li:nth-child(8), #c_modal_thumb.swordfight li:nth-child(9), #c_modal_thumb.wizard li:nth-child(10), #c_modal_thumb.telephone li:nth-child(11), #c_modal_thumb.shaver li:nth-child(12), #c_modal_thumb.runway li:nth-child(13), #c_modal_thumb.soda li:nth-child(14), #c_modal_thumb.baby li:nth-child(15), #c_modal_thumb.joyconrotation li:nth-child(16), #c_modal_thumb.liardice li:nth-child(17), #c_modal_thumb.beachflag li:nth-child(18), #c_modal_thumb.andmore li:last-child { left: 0; top: 0; transition-delay: 0s, 0s; } #c_modal_thumb.quickdraw li:nth-child(5), #c_modal_thumb.milk li:nth-child(1), #c_modal_thumb.eatingcontest li:nth-child(13), #c_modal_thumb.countball li:nth-child(14), #c_modal_thumb.shiraha li:nth-child(16), #c_modal_thumb.pingpong li:nth-child(19), #c_modal_thumb.safecracker li:nth-child(15), #c_modal_thumb.copydance li:nth-child(7), #c_modal_thumb.swordfight li:last-child, #c_modal_thumb.wizard li:nth-child(9), #c_modal_thumb.telephone li:nth-child(12), #c_modal_thumb.shaver li:nth-child(18), #c_modal_thumb.runway li:nth-child(2), #c_modal_thumb.soda li:nth-child(3), #c_modal_thumb.baby li:nth-child(17), #c_modal_thumb.joyconrotation li:nth-child(6), #c_modal_thumb.liardice li:nth-child(10), #c_modal_thumb.beachflag li:nth-child(4), #c_modal_thumb.andmore li:nth-child(8) { left: -100%; } #c_modal_thumb.quickdraw li:nth-child(2), #c_modal_thumb.milk li:nth-child(13), #c_modal_thumb.eatingcontest li:nth-child(14), #c_modal_thumb.countball li:nth-child(18), #c_modal_thumb.shiraha li:nth-child(1), #c_modal_thumb.pingpong li:nth-child(16), #c_modal_thumb.safecracker li:nth-child(8), #c_modal_thumb.copydance li:last-child, #c_modal_thumb.swordfight li:nth-child(10), #c_modal_thumb.wizard li:nth-child(17), #c_modal_thumb.telephone li:nth-child(9), #c_modal_thumb.shaver li:nth-child(11), #c_modal_thumb.runway li:nth-child(3), #c_modal_thumb.soda li:nth-child(4), #c_modal_thumb.baby li:nth-child(7), #c_modal_thumb.joyconrotation li:nth-child(5), #c_modal_thumb.liardice li:nth-child(15), #c_modal_thumb.beachflag li:nth-child(12), #c_modal_thumb.andmore li:nth-child(6) { left: 100%; } #c_modal_thumb li:nth-child(1) { background-image: url(../img/main/movie_thumb_1.jpg); } #c_modal_thumb li:nth-child(2) { background-image: url(../img/main/movie_thumb_2.jpg); } #c_modal_thumb li:nth-child(3) { background-image: url(../img/main/movie_thumb_3.jpg); } #c_modal_thumb li:nth-child(4) { background-image: url(../img/main/movie_thumb_4.jpg); } #c_modal_thumb li:nth-child(5) { background-image: url(../img/main/movie_thumb_5.jpg); } #c_modal_thumb li:nth-child(6) { background-image: url(../img/main/movie_thumb_6.jpg); } #c_modal_thumb li:nth-child(7) { background-image: url(../img/main/movie_thumb_7.jpg); } #c_modal_thumb li:nth-child(8) { background-image: url(../img/main/movie_thumb_8.jpg); } #c_modal_thumb li:nth-child(9) { background-image: url(../img/main/movie_thumb_9.jpg); } #c_modal_thumb li:nth-child(10) { background-image: url(../img/main/movie_thumb_10.jpg); } #c_modal_thumb li:nth-child(11) { background-image: url(../img/main/movie_thumb_11.jpg); } #c_modal_thumb li:nth-child(12) { background-image: url(../img/main/movie_thumb_12.jpg); } #c_modal_thumb li:nth-child(13) { background-image: url(../img/main/movie_thumb_13.jpg); } #c_modal_thumb li:nth-child(14) { background-image: url(../img/main/movie_thumb_14.jpg); } #c_modal_thumb li:nth-child(15) { background-image: url(../img/main/movie_thumb_15.jpg); } #c_modal_thumb li:nth-child(16) { background-image: url(../img/main/movie_thumb_16.jpg); } #c_modal_thumb li:nth-child(17) { background-image: url(../img/main/movie_thumb_17.jpg); } #c_modal_thumb li:nth-child(18) { background-image: url(../img/main/movie_thumb_18.jpg); } #c_modal_thumb li:last-child { display: none; background-image: url(../img/main/movie_thumb_0.jpg); } #c_modal_thumb.change li:last-child { display: block; } @keyframes modalclose_def { 0% { background-position: -80px 0, -320px 0; } 100% { background-position: -80px 0, -320px 100%; } } #c_productModal { width: 100%; height: 100%; min-width: 960px; min-height: 994px; position: fixed; top: 0; left: -100%; background: rgba(0, 0, 0, 0.8); z-index: 10200; transition: left 0s 0s cubic-bezier(0.215, 0.61, 0.355, 1); } @media (max-width: 960px) { #c_productModal { left: -960px; } } #c_productModal div.container { width: 100%; max-width: 1280px; height: 100%; position: relative; margin: 0 auto; } #c_productModal.open { left: 0; transition-duration: 0.4s; } #c_productModal a.close, #c_productModal button.close { width: 80px; height: 80px; overflow: hidden; position: absolute; top: 0; right: 0; background: url(../img/main/sp/modal_close.svg) no-repeat 0 0, url(../img/main/pc/modal_close.png) no-repeat 80px 0; text-indent: 80px; white-space: nowrap; } #c_productModal a.close:hover, #c_productModal button.close:hover { animation: modalclose_def 0.45s steps(10) 1 forwards; } #c_productModal button.close { top: -80px; transition: top 0.2s 0.4s cubic-bezier(0.215, 0.61, 0.355, 1); } #c_productModal.open button.close { top: 0; } #c_productYoutube { width: 100%; height: 100%; padding: 120px 0 308px; box-sizing: border-box; overflow: hidden; text-align: center; position: relative; } #c_productYoutube section.video { width: 896px; height: 504px; position: absolute; top: 50%; left: 50%; margin: -346px 0 0 -448px; } #c_productYoutube h3 { width: 956px; height: 80px; position: absolute; top: -120px; left: 50%; margin-left: -478px; } #c_productYoutube h3 span { display: block; width: 262px; height: 80px; border-radius: 40px; overflow: hidden; margin: 0 auto; background: url(../img/main/modal_product_title.png) no-repeat 0 0; text-indent: 100%; white-space: nowrap; } #c_productYoutube ul { width: 910px; height: 290px; position: absolute; bottom: -308px; left: 90%; margin-left: -455px; } #c_productYoutube ul li { position: relative; float: left; margin: 12px 7px 0; } #c_productYoutube ul strong { display: block; width: 38px; height: 38px; overflow: hidden; position: absolute; top: 0; right: 0; background: url(../img/common/icon_new.svg) no-repeat 0 0; background-size: 100% 100%; text-indent: 38px; white-space: nowrap; } #c_productYoutube ul button { width: 168px; height: 36px; padding-top: 103px; box-sizing: content-box; overflow: hidden; position: relative; background: url(../img/main/pc/modal_product_thumb.jpg) no-repeat 0 0; } #c_productYoutube ul button::after { content: ""; display: block; width: 168px; height: 95px; border: 0px solid #9b73c8; box-sizing: border-box; position: absolute; top: 0; left: 0; background: rgba(0, 0, 0, 0.6); transition: border-width 0.2s 0s cubic-bezier(0.215, 0.61, 0.355, 1), background-color 0.2s 0s cubic-bezier(0.215, 0.61, 0.355, 1); } #c_productYoutube ul button span { display: block; width: 168px; height: 30px; overflow: hidden; background: url(../img/main/pc/modal_product_thumb_title.png) no-repeat 0 0; text-indent: 168px; white-space: nowrap; } #c_productYoutube ul button:hover::after { border-width: 6px; background-color: transparent; } #c_productYoutube ul button.current { cursor: auto; } #c_productYoutube ul button.current::after { border-width: 0; background-color: transparent; } #c_productYoutube ul li.movie_1 button { background-position: 0px 0; } #c_productYoutube ul li.movie_1 button span { background-position: 0px 0; } #c_productYoutube ul li.movie_1 button:hover span { background-position: 0px -60px; } #c_productYoutube ul li.movie_1 button.current span { background-position: 0px -30px; } #c_productYoutube ul li.movie_2 button { background-position: -168px 0; } #c_productYoutube ul li.movie_2 button span { background-position: -168px 0; } #c_productYoutube ul li.movie_2 button:hover span { background-position: -168px -60px; } #c_productYoutube ul li.movie_2 button.current span { background-position: -168px -30px; } #c_productYoutube ul li.movie_3 button { background-position: -336px 0; } #c_productYoutube ul li.movie_3 button span { background-position: -336px 0; } #c_productYoutube ul li.movie_3 button:hover span { background-position: -336px -60px; } #c_productYoutube ul li.movie_3 button.current span { background-position: -336px -30px; } #c_productYoutube ul li.movie_4 button { background-position: -504px 0; } #c_productYoutube ul li.movie_4 button span { background-position: -504px 0; } #c_productYoutube ul li.movie_4 button:hover span { background-position: -504px -60px; } #c_productYoutube ul li.movie_4 button.current span { background-position: -504px -30px; } #c_productYoutube ul li.movie_5 button { background-position: -672px 0; } #c_productYoutube ul li.movie_5 button span { background-position: -672px 0; } #c_productYoutube ul li.movie_5 button:hover span { background-position: -672px -60px; } #c_productYoutube ul li.movie_5 button.current span { background-position: -672px -30px; } #c_productYoutube ul li.movie_6 button { background-position: -840px 0; } #c_productYoutube ul li.movie_6 button span { background-position: -840px 0; } #c_productYoutube ul li.movie_6 button:hover span { background-position: -840px -60px; } #c_productYoutube ul li.movie_6 button.current span { background-position: -840px -30px; } #c_productYoutube ul li.movie_7 button { background-position: -1008px 0; } #c_productYoutube ul li.movie_7 button span { background-position: -1008px 0; } #c_productYoutube ul li.movie_7 button:hover span { background-position: -1008px -60px; } #c_productYoutube ul li.movie_7 button.current span { background-position: -1008px -30px; } #c_productYoutube ul li.movie_8 button { background-position: -1176px 0; } #c_productYoutube ul li.movie_8 button span { background-position: -1176px 0; } #c_productYoutube ul li.movie_8 button:hover span { background-position: -1176px -60px; } #c_productYoutube ul li.movie_8 button.current span { background-position: -1176px -30px; } #c_productYoutube ul li.movie_9 button { background-position: -1343px 0; } #c_productYoutube ul li.movie_9 button span { background-position: -1356px 0; } #c_productYoutube ul li.movie_9 button:hover span { background-position: -1356px -60px; } #c_productYoutube ul li.movie_9 button.current span { background-position: -1356px -30px; } #c_productIframe { width: 100%; height: 100%; overflow: hidden; position: absolute; top: 0; right: 0; background: #000000; } #c_productIframe div, #c_productIframe p { width: 100%; height: 100%; overflow: hidden; text-align: left; text-indent: 100%; white-space: nowrap; } #c_productIframe p { background: url(../img/main/pc/js_off.png) no-repeat 50% 50%; } #c_teammatch { max-width: 1260px; padding: 0 12px; margin: 38px auto 0; } #c_teammatch section { position: relative; background: #a9c3f9; } #c_teammatch img { width: 45%; height: auto; } #c_teammatch div { width: 55%; height: 100%; padding: 38px 57px; box-sizing: border-box; background-image: -webkit-linear-gradient(135deg, #a9c3f9 0%, #f2bcdf 40%, #efbcb4 100%); background-image: linear-gradient(135deg, #a9c3f9 0%, #f2bcdf 40%, #efbcb4 100%); position: absolute; top: 0; right: 0; } #c_teammatch div h2 { display: none; } #c_teammatch div p { width: 100%; height: 100%; overflow: hidden; background: url(../img/main/pc/teammatch_text.png) no-repeat 50% 50%; background-size: contain; text-indent: 100%; white-space: nowrap; } #c_teammatch div strong { display: block; width: 62px; height: 62px; overflow: hidden; position: absolute; top: 0; right: 0; background: no-repeat 0 0; background-size: 100% 100%; text-indent: 62px; white-space: nowrap; } #c_teammatch div strong.update_0215 { background-image: url(../img/main/pc/update_0215.png); } #c_topics { width: 100%; max-width: 1284px; padding-bottom: 75px; margin: 0 auto; color: #ffffff; } #c_topics h2 { max-width: 1260px; padding: 0 12px; margin: 80px auto 0; } #c_topics h2 span { display: block; width: 100%; height: 22px; overflow: hidden; background: url(../img/main/pc/topics_title.png) no-repeat 50% 0; text-indent: 100%; white-space: nowrap; } #c_topics ul { padding: 0 4px 0 5px; overflow: hidden; font-size: 0; } #c_topics ul li { display: inline-block; width: 20%; padding: 0 8px 0 7px; box-sizing: border-box; position: relative; margin: 30px 0 0; vertical-align: top; } #c_topics ul li.new::after { content: "NEW"; display: block; width: 38px; height: 38px; overflow: hidden; position: absolute; top: 0; right: 8px; background: url(../img/common/icon_new.svg) no-repeat 0 0; background-size: 100% 100%; text-indent: 38px; white-space: nowrap; } #c_topics ul li.new.reverse::after { background-image: url(../img/common/icon_new_reverse.svg); } #c_topics ul a { position: relative; overflow: hidden; margin-bottom: 8px; } #c_topics ul a img { width: 100%; height: auto; } #c_topics ul a::after { content: ""; width: 100%; height: 100%; border: 0 solid #ff3c28; box-sizing: border-box; position: absolute; top: 0; left: 0; transition: border-width 0.2s 0s cubic-bezier(0.215, 0.61, 0.355, 1); } #c_topics ul a:hover::after { border-width: 6px; } #c_topics ul p { font-size: 15px; font-size: 1.5rem; line-height: 1.6; font-weight: bold; } #c_topics ul p.date { font-size: 14px; font-size: 1.4rem; line-height: 1.785; font-weight: normal; } #c_title div.product .playmode_btn{ position: absolute; right: 30px; bottom: 140px; } #c_playmode .c_playmode_inner{ width: 72px; padding: 0 12px; height: 32px; margin: 0 auto 0; position: relative; } #c_playmode .twitter{ position: absolute; top: 0; right: 52px; line-height: 0.01; } #c_playmode .facebook{ position: absolute; top: 0; right: 12px; line-height: 0.01; } #c_title .info_note{ position: absolute; left: 0; bottom: 0; width: 400px; color: #FFF; line-height: 1.5; font-size: 10px; padding-left: 1em; font-weight: bold; text-shadow:1px 1px 0px rgba(102,102,102,0.75); } #c_title .info_note a{ color: #FFF; text-decoration: underline; } #c_title .info_note a:hover{ color: #dcdcdc; } #c_title .info_note::before{ content: "※"; position: absolute; left: 0; top: 0; } /* ---------------------------- eshop バナー ---------------------------- */ /* #wrap.top{ } #c_switch{ z-index: 11; } #c_mute{ z-index: 11; } #c_logoArea{ top: calc(90px + 77px); } #c_switch { top: calc(90px + 46px); right: 0; } #c_mute { top: calc(92px + 50px); left: 0 } #c_logoArea { top: calc(90px + 40px); left: 0; } #c_visualArea { margin: 79px auto 0; } #c_title { padding: 136px 0 40px; } .bnr-eshop-sale{ width: 100%; background: url(/jp/switch/img/campaign/bnr_eshop_bg.png); position: absolute; top: 46px; } .bnr-eshop-sale::before{ content: ""; display: block; width: 100%; height: 2px; background: #FFF; position: absolute; left: 0; bottom: 0; } .bnr-eshop-sale a{ display: block; max-width: 960px; margin: 0 auto; } .bnr-eshop-sale a img{ max-width: 960px; width: 100%; } .no-touchevents .bnr-eshop-sale a{ -webkit-transition: opacity 0.15s linear; transition: opacity 0.15s linear; } .no-touchevents .bnr-eshop-sale a:hover{ opacity: 0.85; } */ /*------catalog-ticket------*/ #c_title div.product .catalog-ticket { position: absolute; bottom: 70px; left: 0; width: 100%; } #c_title div.product .catalog-ticket p { width: auto; height: auto; background: none; text-indent: 0; } #c_title div.product .catalog-ticket p a { display: inline-block; position: relative; padding: 18px 8px 18px 84px; border-radius: 2px; background: #fff; color: #000000; font-size: 12px; font-weight: bold; text-decoration: none; transition: 0.3s; } #c_title div.product .catalog-ticket p a:before { content: ""; display: inline-block; position: absolute; left: 3px; top: 0; bottom: 0; margin: auto; background: url("../img/main/catalog_ticket.png") no-repeat; background-size: contain; width: 70px; height: 48px; opacity: 1; transition: 0.3s; } #c_title div.product .catalog-ticket p a:hover { color: #777; } #c_title div.product .catalog-ticket p a:hover:before { opacity: 0.8; } #c_title div.product .online-note { width: 403px; clear: both; margin: 12px 0 0 2px; } #c_title div.product .online-note__body { padding: 8px 20px; border: #FFF 1px solid; box-sizing: border-box; background: rgba(0, 0, 0, 0.1); border-radius: 2px; } #c_title div.product .online-note__body div { font-size: 12px; line-height: 1.5; font-weight: bold; color: #FFF; text-shadow: 1px 1px 0px rgba(102,102,102,0.75); } #c_title div.product .online-note__body div a{ color: #FFF; transition: color .3s cubic-bezier(0.13, 0.78, 0.38, 0.98); text-decoration: underline; } #c_title div.product .online-note__body div a:hover{ color: #dcdcdc; } /* ---------------------------- SALE BANNER ---------------------------- */ .bnr-eshop-sale + #wrap { top: 150px; } .bnr-eshop-sale + #wrap #c_mute { top: 200px; }