@charset "Shift_JIS"; /* html5doctor.com Reset Stylesheet v1.6.1 Last Updated: 2010-09-17 Author: Richard Clark - http://richclarkdesign.com Twitter: @rich_clark */ #mainContents { line-height: 1; } #mainContents div, #mainContents span, #mainContents object, #mainContents iframe, #mainContents h1, #mainContents h2, #mainContents h3, #mainContents h4, #mainContents h5, #mainContents h6, #mainContents p, #mainContents blockquote, #mainContents pre, #mainContents abbr, #mainContents address, #mainContents cite, #mainContents code, #mainContents del, #mainContents dfn, #mainContents em, #mainContents img, #mainContents ins, #mainContents kbd, #mainContents q, #mainContents samp, #mainContents small, #mainContents strong, #mainContents sub, #mainContents sup, #mainContents var, #mainContents b, #mainContents i, #mainContents dl, #mainContents dt, #mainContents dd, #mainContents ol, #mainContents ul, #mainContents li, #mainContents fieldset, #mainContents form, #mainContents label, #mainContents legend, #mainContents table, #mainContents caption, #mainContents tbody, #mainContents tfoot, #mainContents thead, #mainContents tr, #mainContents th, #mainContents td, #mainContents article, #mainContents aside, #mainContents canvas, #mainContents details, #mainContents figcaption, #mainContents figure, #mainContents footer, #mainContents header, #mainContents hgroup, #mainContents menu, #mainContents nav, #mainContents section, #mainContents summary, #mainContents time, #mainContents mark, #mainContents audio, #mainContents video { font-size: 100%; margin: 0; padding: 0; list-style: none; vertical-align: baseline; border: 0; outline: 0; background: transparent; } #mainContents article, #mainContents aside, #mainContents details, #mainContents figcaption, #mainContents figure, #mainContents footer, #mainContents header, #mainContents hgroup, #mainContents menu, #mainContents nav, #mainContents section { display: block; } #mainContents nav ul { list-style: none; } #mainContents blockquote, #mainContents q { quotes: none; } #mainContents blockquote:before, #mainContents blockquote:after, #mainContents q:before, #mainContents q:after { content: ''; content: none; } #mainContents a { font-size: 100%; margin: 0; padding: 0; vertical-align: baseline; text-decoration: none; background: transparent; } #mainContents ins { text-decoration: none; color: #000; background-color: #ff9; } #mainContents mark { font-weight: bold; font-style: italic; color: #000; background-color: #ff9; } #mainContents del { text-decoration: line-through; } #mainContents abbr[title], #mainContents dfn[title] { cursor: help; border-bottom: 1px dotted; } #mainContents table { border-spacing: 0; border-collapse: collapse; } #mainContents hr { display: block; height: 1px; margin: 1em 0; padding: 0; border: 0; border-top: 1px solid #ccc; } #mainContents input, #mainContents select { vertical-align: middle; } #mainContents img, #mainContents video { font-size: 0; line-height: 0; } @media screen and (max-width: 767px) { .u-is-pc { display: none !important; } } @media screen and (min-width: 768px) { .u-is-sp { display: none !important; } } /* Magnific Popup CSS */ .mfp-bg { position: fixed; z-index: 1042; top: 0; left: 0; overflow: hidden; width: 100%; height: 100%; opacity: .8; background: #0b0b0b; } .mfp-wrap { position: fixed; z-index: 1043; top: 0; left: 0; width: 100%; height: 100%; outline: none !important; -webkit-backface-visibility: hidden; } .mfp-container { position: absolute; top: 0; left: 0; -webkit-box-sizing: border-box; box-sizing: border-box; width: 100%; height: 100%; padding: 0 8px; text-align: center; } .mfp-container:before { display: inline-block; height: 100%; content: ''; vertical-align: middle; } .mfp-align-top .mfp-container:before { display: none; } .mfp-content { position: relative; z-index: 1045; display: inline-block; margin: 0 auto; text-align: left; vertical-align: middle; } .mfp-inline-holder .mfp-content, .mfp-ajax-holder .mfp-content { width: 100%; cursor: auto; } .mfp-ajax-cur { cursor: progress; } .mfp-zoom-out-cur, .mfp-zoom-out-cur .mfp-image-holder .mfp-close { cursor: -webkit-zoom-out; cursor: zoom-out; } .mfp-zoom { cursor: pointer; cursor: -webkit-zoom-in; cursor: zoom-in; } .mfp-auto-cursor .mfp-content { cursor: auto; } .mfp-close, .mfp-arrow, .mfp-preloader, .mfp-counter { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .mfp-loading.mfp-figure { display: none; } .mfp-hide { display: none !important; } .mfp-preloader { position: absolute; z-index: 1044; top: 50%; right: 8px; left: 8px; width: auto; margin-top: -.8em; text-align: center; color: #ccc; } .mfp-preloader a { color: #ccc; } .mfp-preloader a:hover { color: #fff; } .mfp-s-ready .mfp-preloader { display: none; } .mfp-s-error .mfp-content { display: none; } button.mfp-close, button.mfp-arrow { z-index: 1046; display: block; overflow: visible; padding: 0; cursor: pointer; border: 0; outline: none; background: transparent; -webkit-box-shadow: none; box-shadow: none; -webkit-appearance: none; -ms-touch-action: manipulation; touch-action: manipulation; } button::-moz-focus-inner { padding: 0; border: 0; } .mfp-close { font-family: Arial, Baskerville, monospace; font-size: 28px; font-style: normal; line-height: 44px; position: absolute; top: 0; right: 0; width: 44px; height: 44px; padding: 0 0 18px 10px; text-align: center; text-decoration: none; opacity: .65; color: #fff; } .mfp-close:hover, .mfp-close:focus { opacity: 1; } .mfp-close:active { top: 1px; } .mfp-close-btn-in .mfp-close { color: #333; } .mfp-image-holder .mfp-close, .mfp-iframe-holder .mfp-close { right: -6px; width: 100%; padding-right: 6px; text-align: right; color: #fff; } .mfp-counter { font-size: 12px; line-height: 18px; position: absolute; top: 0; right: 0; white-space: nowrap; color: #ccc; } .mfp-arrow { position: absolute; top: 50%; width: 90px; height: 110px; margin: 0; margin-top: -55px; padding: 0; opacity: .65; -webkit-tap-highlight-color: transparent; } .mfp-arrow:active { margin-top: -54px; } .mfp-arrow:hover, .mfp-arrow:focus { opacity: 1; } .mfp-arrow:before, .mfp-arrow:after { position: absolute; top: 0; left: 0; display: block; width: 0; height: 0; margin-top: 35px; margin-left: 35px; content: ''; border: medium inset transparent; } .mfp-arrow:after { top: 8px; border-top-width: 13px; border-bottom-width: 13px; } .mfp-arrow:before { opacity: .7; border-top-width: 21px; border-bottom-width: 21px; } .mfp-arrow-left { left: 0; } .mfp-arrow-left:after { margin-left: 31px; border-right: 17px solid #fff; } .mfp-arrow-left:before { margin-left: 25px; border-right: 27px solid #3f3f3f; } .mfp-arrow-right { right: 0; } .mfp-arrow-right:after { margin-left: 39px; border-left: 17px solid #fff; } .mfp-arrow-right:before { border-left: 27px solid #3f3f3f; } .mfp-iframe-holder { padding-top: 40px; padding-bottom: 40px; } .mfp-iframe-holder .mfp-content { line-height: 0; width: 100%; max-width: 900px; } .mfp-iframe-holder .mfp-close { top: -40px; } .mfp-iframe-scaler { overflow: hidden; width: 100%; height: 0; padding-top: 56.25%; } .mfp-iframe-scaler iframe { position: absolute; top: 0; left: 0; display: block; width: 100%; height: 100%; background: #000; -webkit-box-shadow: 0 0 8px rgba(0, 0, 0, .6); box-shadow: 0 0 8px rgba(0, 0, 0, .6); } /* Main image in popup */ img.mfp-img { line-height: 0; display: block; -webkit-box-sizing: border-box; box-sizing: border-box; width: auto; max-width: 100%; height: auto; margin: 0 auto; padding: 40px 0 40px; } /* The shadow behind the image */ .mfp-figure { line-height: 0; } .mfp-figure:after { position: absolute; z-index: -1; top: 40px; right: 0; bottom: 40px; left: 0; display: block; width: auto; height: auto; content: ''; background: #444; -webkit-box-shadow: 0 0 8px rgba(0, 0, 0, .6); box-shadow: 0 0 8px rgba(0, 0, 0, .6); } .mfp-figure small { font-size: 12px; line-height: 14px; display: block; color: #bdbdbd; } .mfp-figure figure { margin: 0; } .mfp-bottom-bar { position: absolute; top: 100%; left: 0; width: 100%; margin-top: -36px; cursor: auto; } .mfp-title { line-height: 18px; padding-right: 36px; text-align: left; word-wrap: break-word; color: #f3f3f3; } .mfp-image-holder .mfp-content { max-width: 100%; } .mfp-gallery .mfp-image-holder .mfp-figure { cursor: pointer; } @media screen and (max-width: 800px) and (orientation: landscape), screen and (max-height: 300px) { /** * Remove all paddings around the image on small screen */ .mfp-img-mobile .mfp-image-holder { padding-right: 0; padding-left: 0; } .mfp-img-mobile img.mfp-img { padding: 0; } .mfp-img-mobile .mfp-figure:after { top: 0; bottom: 0; } .mfp-img-mobile .mfp-figure small { display: inline; margin-left: 5px; } .mfp-img-mobile .mfp-bottom-bar { position: fixed; top: auto; bottom: 0; -webkit-box-sizing: border-box; box-sizing: border-box; margin: 0; padding: 3px 5px; background: rgba(0, 0, 0, .6); } .mfp-img-mobile .mfp-bottom-bar:empty { padding: 0; } .mfp-img-mobile .mfp-counter { top: 3px; right: 5px; } .mfp-img-mobile .mfp-close { line-height: 35px; position: fixed; top: 0; right: 0; width: 35px; height: 35px; padding: 0; text-align: center; background: rgba(0, 0, 0, .6); } } @media all and (max-width: 900px) { .mfp-arrow { -webkit-transform: scale(.75); transform: scale(.75); } .mfp-arrow-left { -webkit-transform-origin: 0; transform-origin: 0; } .mfp-arrow-right { -webkit-transform-origin: 100%; transform-origin: 100%; } .mfp-container { padding-right: 6px; padding-left: 6px; } } /** * Swiper 5.4.5 * Most modern mobile touch slider and framework with hardware accelerated transitions * http://swiperjs.com * * Copyright 2014-2020 Vladimir Kharlampidi * * Released under the MIT License * * Released on: June 16, 2020 */ @font-face { font-family: 'swiper-icons'; font-weight: 400; font-style: normal; src: url('data:application/font-woff;charset=utf-8;base64, d09GRgABAAAAAAZgABAAAAAADAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAAGRAAAABoAAAAci6qHkUdERUYAAAWgAAAAIwAAACQAYABXR1BPUwAABhQAAAAuAAAANuAY7+xHU1VCAAAFxAAAAFAAAABm2fPczU9TLzIAAAHcAAAASgAAAGBP9V5RY21hcAAAAkQAAACIAAABYt6F0cBjdnQgAAACzAAAAAQAAAAEABEBRGdhc3AAAAWYAAAACAAAAAj//wADZ2x5ZgAAAywAAADMAAAD2MHtryVoZWFkAAABbAAAADAAAAA2E2+eoWhoZWEAAAGcAAAAHwAAACQC9gDzaG10eAAAAigAAAAZAAAArgJkABFsb2NhAAAC0AAAAFoAAABaFQAUGG1heHAAAAG8AAAAHwAAACAAcABAbmFtZQAAA/gAAAE5AAACXvFdBwlwb3N0AAAFNAAAAGIAAACE5s74hXjaY2BkYGAAYpf5Hu/j+W2+MnAzMYDAzaX6QjD6/4//Bxj5GA8AuRwMYGkAPywL13jaY2BkYGA88P8Agx4j+/8fQDYfA1AEBWgDAIB2BOoAeNpjYGRgYNBh4GdgYgABEMnIABJzYNADCQAACWgAsQB42mNgYfzCOIGBlYGB0YcxjYGBwR1Kf2WQZGhhYGBiYGVmgAFGBiQQkOaawtDAoMBQxXjg/wEGPcYDDA4wNUA2CCgwsAAAO4EL6gAAeNpj2M0gyAACqxgGNWBkZ2D4/wMA+xkDdgAAAHjaY2BgYGaAYBkGRgYQiAHyGMF8FgYHIM3DwMHABGQrMOgyWDLEM1T9/w8UBfEMgLzE////P/5//f/V/xv+r4eaAAeMbAxwIUYmIMHEgKYAYjUcsDAwsLKxc3BycfPw8jEQA/gZBASFhEVExcQlJKWkZWTl5BUUlZRVVNXUNTQZBgMAAMR+E+gAEQFEAAAAKgAqACoANAA+AEgAUgBcAGYAcAB6AIQAjgCYAKIArAC2AMAAygDUAN4A6ADyAPwBBgEQARoBJAEuATgBQgFMAVYBYAFqAXQBfgGIAZIBnAGmAbIBzgHsAAB42u2NMQ6CUAyGW568x9AneYYgm4MJbhKFaExIOAVX8ApewSt4Bic4AfeAid3VOBixDxfPYEza5O+Xfi04YADggiUIULCuEJK8VhO4bSvpdnktHI5QCYtdi2sl8ZnXaHlqUrNKzdKcT8cjlq+rwZSvIVczNiezsfnP/uznmfPFBNODM2K7MTQ45YEAZqGP81AmGGcF3iPqOop0r1SPTaTbVkfUe4HXj97wYE+yNwWYxwWu4v1ugWHgo3S1XdZEVqWM7ET0cfnLGxWfkgR42o2PvWrDMBSFj/IHLaF0zKjRgdiVMwScNRAoWUoH78Y2icB/yIY09An6AH2Bdu/UB+yxopYshQiEvnvu0dURgDt8QeC8PDw7Fpji3fEA4z/PEJ6YOB5hKh4dj3EvXhxPqH/SKUY3rJ7srZ4FZnh1PMAtPhwP6fl2PMJMPDgeQ4rY8YT6Gzao0eAEA409DuggmTnFnOcSCiEiLMgxCiTI6Cq5DZUd3Qmp10vO0LaLTd2cjN4fOumlc7lUYbSQcZFkutRG7g6JKZKy0RmdLY680CDnEJ+UMkpFFe1RN7nxdVpXrC4aTtnaurOnYercZg2YVmLN/d/gczfEimrE/fs/bOuq29Zmn8tloORaXgZgGa78yO9/cnXm2BpaGvq25Dv9S4E9+5SIc9PqupJKhYFSSl47+Qcr1mYNAAAAeNptw0cKwkAAAMDZJA8Q7OUJvkLsPfZ6zFVERPy8qHh2YER+3i/BP83vIBLLySsoKimrqKqpa2hp6+jq6RsYGhmbmJqZSy0sraxtbO3sHRydnEMU4uR6yx7JJXveP7WrDycAAAAAAAH//wACeNpjYGRgYOABYhkgZgJCZgZNBkYGLQZtIJsFLMYAAAw3ALgAeNolizEKgDAQBCchRbC2sFER0YD6qVQiBCv/H9ezGI6Z5XBAw8CBK/m5iQQVauVbXLnOrMZv2oLdKFa8Pjuru2hJzGabmOSLzNMzvutpB3N42mNgZGBg4GKQYzBhYMxJLMlj4GBgAYow/P/PAJJhLM6sSoWKfWCAAwDAjgbRAAB42mNgYGBkAIIbCZo5IPrmUn0hGA0AO8EFTQAA') format('woff'); } :root { --swiper-theme-color: #007aff; } .swiper-container { position: relative; /* Fix of Webkit flickering */ z-index: 1; overflow: hidden; margin-right: auto; margin-left: auto; padding: 0; list-style: none; } .swiper-container.zoom { overflow: visible; } .swiper-container-vertical > .swiper-wrapper { -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; } .swiper-wrapper { position: relative; z-index: 1; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-sizing: content-box; box-sizing: content-box; width: 100%; height: 100%; -webkit-transition-property: -webkit-transform; transition-property: -webkit-transform; transition-property: transform; transition-property: transform, -webkit-transform; } .swiper-container-android .swiper-slide, .swiper-wrapper { -webkit-transform: translate3d(0px, 0, 0); transform: translate3d(0px, 0, 0); } .swiper-container-multirow > .swiper-wrapper { -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; } .swiper-container-multirow-column > .swiper-wrapper { -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; } .swiper-container-free-mode > .swiper-wrapper { margin: 0 auto; -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out; } .swiper-slide { position: relative; width: 100%; height: 100%; -webkit-transition-property: -webkit-transform; transition-property: -webkit-transform; transition-property: transform; transition-property: transform, -webkit-transform; -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0; } .swiper-slide-invisible-blank { visibility: hidden; } /* Auto Height */ .swiper-container-autoheight, .swiper-container-autoheight .swiper-slide { height: auto; } .swiper-container-autoheight .swiper-wrapper { -webkit-transition-property: height, -webkit-transform; transition-property: height, -webkit-transform; transition-property: transform, height; transition-property: transform, height, -webkit-transform; -webkit-box-align: start; -webkit-align-items: flex-start; -ms-flex-align: start; align-items: flex-start; } /* 3D Effects */ .swiper-container-3d { -webkit-perspective: 1200px; perspective: 1200px; } .swiper-container-3d .swiper-wrapper, .swiper-container-3d .swiper-slide, .swiper-container-3d .swiper-slide-shadow-left, .swiper-container-3d .swiper-slide-shadow-right, .swiper-container-3d .swiper-slide-shadow-top, .swiper-container-3d .swiper-slide-shadow-bottom, .swiper-container-3d .swiper-cube-shadow { -webkit-transform-style: preserve-3d; transform-style: preserve-3d; } .swiper-container-3d .swiper-slide-shadow-left, .swiper-container-3d .swiper-slide-shadow-right, .swiper-container-3d .swiper-slide-shadow-top, .swiper-container-3d .swiper-slide-shadow-bottom { position: absolute; z-index: 10; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; } .swiper-container-3d .swiper-slide-shadow-left { background-image: -webkit-gradient(linear, right top, left top, from(rgba(0, 0, 0, .5)), to(rgba(0, 0, 0, 0))); background-image: -webkit-linear-gradient(right, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0)); background-image: linear-gradient(to left, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0)); } .swiper-container-3d .swiper-slide-shadow-right { background-image: -webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, .5)), to(rgba(0, 0, 0, 0))); background-image: -webkit-linear-gradient(left, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0)); background-image: linear-gradient(to right, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0)); } .swiper-container-3d .swiper-slide-shadow-top { background-image: -webkit-gradient(linear, left bottom, left top, from(rgba(0, 0, 0, .5)), to(rgba(0, 0, 0, 0))); background-image: -webkit-linear-gradient(bottom, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0)); background-image: linear-gradient(to top, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0)); } .swiper-container-3d .swiper-slide-shadow-bottom { background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, .5)), to(rgba(0, 0, 0, 0))); background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0)); background-image: linear-gradient(to bottom, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0)); } /* CSS Mode */ .swiper-container-css-mode > .swiper-wrapper { overflow: auto; scrollbar-width: none; /* For Firefox */ -ms-overflow-style: none; /* For Internet Explorer and Edge */ } .swiper-container-css-mode > .swiper-wrapper::-webkit-scrollbar { display: none; } .swiper-container-css-mode > .swiper-wrapper > .swiper-slide { scroll-snap-align: start start; } .swiper-container-horizontal.swiper-container-css-mode > .swiper-wrapper { -webkit-scroll-snap-type: x mandatory; -ms-scroll-snap-type: x mandatory; scroll-snap-type: x mandatory; } .swiper-container-vertical.swiper-container-css-mode > .swiper-wrapper { -webkit-scroll-snap-type: y mandatory; -ms-scroll-snap-type: y mandatory; scroll-snap-type: y mandatory; } :root { --swiper-navigation-size: 44px; /* --swiper-navigation-color: var(--swiper-theme-color); */ } .swiper-button-prev, .swiper-button-next { position: absolute; z-index: 10; top: 50%; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; width: calc(var(--swiper-navigation-size) / 44 * 27); height: var(--swiper-navigation-size); margin-top: calc(-1 * var(--swiper-navigation-size) / 2); cursor: pointer; color: var(--swiper-navigation-color, var(--swiper-theme-color)); -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; } .swiper-button-prev.swiper-button-disabled, .swiper-button-next.swiper-button-disabled { cursor: auto; pointer-events: none; opacity: .35; } .swiper-button-prev:after, .swiper-button-next:after { font-family: swiper-icons; font-size: var(--swiper-navigation-size); font-variant: initial; line-height: 1; letter-spacing: 0; text-transform: none !important; text-transform: none; } .swiper-button-prev, .swiper-container-rtl .swiper-button-next { right: auto; left: 10px; } .swiper-button-prev:after, .swiper-container-rtl .swiper-button-next:after { content: 'prev'; } .swiper-button-next, .swiper-container-rtl .swiper-button-prev { right: 10px; left: auto; } .swiper-button-next:after, .swiper-container-rtl .swiper-button-prev:after { content: 'next'; } .swiper-button-prev.swiper-button-white, .swiper-button-next.swiper-button-white { --swiper-navigation-color: #fff; } .swiper-button-prev.swiper-button-black, .swiper-button-next.swiper-button-black { --swiper-navigation-color: #000; } .swiper-button-lock { display: none; } :root { /* --swiper-pagination-color: var(--swiper-theme-color); */ } .swiper-pagination { position: absolute; z-index: 10; -webkit-transition: 300ms opacity; transition: 300ms opacity; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); text-align: center; } .swiper-pagination.swiper-pagination-hidden { opacity: 0; } /* Common Styles */ .swiper-pagination-fraction, .swiper-pagination-custom, .swiper-container-horizontal > .swiper-pagination-bullets { bottom: 10px; left: 0; width: 100%; } /* Bullets */ .swiper-pagination-bullets-dynamic { font-size: 0; overflow: hidden; } .swiper-pagination-bullets-dynamic .swiper-pagination-bullet { position: relative; -webkit-transform: scale(.33); transform: scale(.33); } .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active { -webkit-transform: scale(1); transform: scale(1); } .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-main { -webkit-transform: scale(1); transform: scale(1); } .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev { -webkit-transform: scale(.66); transform: scale(.66); } .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev-prev { -webkit-transform: scale(.33); transform: scale(.33); } .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next { -webkit-transform: scale(.66); transform: scale(.66); } .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next-next { -webkit-transform: scale(.33); transform: scale(.33); } .swiper-pagination-bullet { display: inline-block; width: 8px; height: 8px; opacity: .2; border-radius: 100%; background: #000; } button.swiper-pagination-bullet { margin: 0; padding: 0; border: none; -webkit-box-shadow: none; box-shadow: none; -webkit-appearance: none; -moz-appearance: none; appearance: none; } .swiper-pagination-clickable .swiper-pagination-bullet { cursor: pointer; } .swiper-pagination-bullet-active { opacity: 1; background: var(--swiper-pagination-color, var(--swiper-theme-color)); } .swiper-container-vertical > .swiper-pagination-bullets { top: 50%; right: 10px; -webkit-transform: translate3d(0px, -50%, 0); transform: translate3d(0px, -50%, 0); } .swiper-container-vertical > .swiper-pagination-bullets .swiper-pagination-bullet { display: block; margin: 6px 0; } .swiper-container-vertical > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic { top: 50%; width: 8px; -webkit-transform: translateY(-50%); transform: translateY(-50%); } .swiper-container-vertical > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet { display: inline-block; -webkit-transition: 200ms top, 200ms -webkit-transform; transition: 200ms top, 200ms -webkit-transform; transition: 200ms transform, 200ms top; transition: 200ms transform, 200ms top, 200ms -webkit-transform; } .swiper-container-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet { margin: 0 4px; } .swiper-container-horizontal > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic { left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); white-space: nowrap; } .swiper-container-horizontal > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet { -webkit-transition: 200ms left, 200ms -webkit-transform; transition: 200ms left, 200ms -webkit-transform; transition: 200ms transform, 200ms left; transition: 200ms transform, 200ms left, 200ms -webkit-transform; } .swiper-container-horizontal.swiper-container-rtl > .swiper-pagination-bullets-dynamic .swiper-pagination-bullet { -webkit-transition: 200ms right, 200ms -webkit-transform; transition: 200ms right, 200ms -webkit-transform; transition: 200ms transform, 200ms right; transition: 200ms transform, 200ms right, 200ms -webkit-transform; } /* Progress */ .swiper-pagination-progressbar { position: absolute; background: rgba(0, 0, 0, .25); } .swiper-pagination-progressbar .swiper-pagination-progressbar-fill { position: absolute; top: 0; left: 0; width: 100%; height: 100%; -webkit-transform: scale(0); transform: scale(0); -webkit-transform-origin: left top; transform-origin: left top; background: var(--swiper-pagination-color, var(--swiper-theme-color)); } .swiper-container-rtl .swiper-pagination-progressbar .swiper-pagination-progressbar-fill { -webkit-transform-origin: right top; transform-origin: right top; } .swiper-container-horizontal > .swiper-pagination-progressbar, .swiper-container-vertical > .swiper-pagination-progressbar.swiper-pagination-progressbar-opposite { top: 0; left: 0; width: 100%; height: 4px; } .swiper-container-vertical > .swiper-pagination-progressbar, .swiper-container-horizontal > .swiper-pagination-progressbar.swiper-pagination-progressbar-opposite { top: 0; left: 0; width: 4px; height: 100%; } .swiper-pagination-white { --swiper-pagination-color: #fff; } .swiper-pagination-black { --swiper-pagination-color: #000; } .swiper-pagination-lock { display: none; } /* Scrollbar */ .swiper-scrollbar { position: relative; border-radius: 10px; background: rgba(0, 0, 0, .1); -ms-touch-action: none; } .swiper-container-horizontal > .swiper-scrollbar { position: absolute; z-index: 50; bottom: 3px; left: 1%; width: 98%; height: 5px; } .swiper-container-vertical > .swiper-scrollbar { position: absolute; z-index: 50; top: 1%; right: 3px; width: 5px; height: 98%; } .swiper-scrollbar-drag { position: relative; top: 0; left: 0; width: 100%; height: 100%; border-radius: 10px; background: rgba(0, 0, 0, .5); } .swiper-scrollbar-cursor-drag { cursor: move; } .swiper-scrollbar-lock { display: none; } .swiper-zoom-container { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; width: 100%; height: 100%; text-align: center; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; } .swiper-zoom-container > img, .swiper-zoom-container > svg, .swiper-zoom-container > canvas { max-width: 100%; max-height: 100%; -o-object-fit: contain; object-fit: contain; } .swiper-slide-zoomed { cursor: move; } /* Preloader */ :root { /* --swiper-preloader-color: var(--swiper-theme-color); */ } .swiper-lazy-preloader { position: absolute; z-index: 10; top: 50%; left: 50%; -webkit-box-sizing: border-box; box-sizing: border-box; width: 42px; height: 42px; margin-top: -21px; margin-left: -21px; -webkit-transform-origin: 50%; transform-origin: 50%; -webkit-animation: swiper-preloader-spin 1s infinite linear; animation: swiper-preloader-spin 1s infinite linear; border: 4px solid var(--swiper-preloader-color, var(--swiper-theme-color)); border-top-color: transparent; border-radius: 50%; } .swiper-lazy-preloader-white { --swiper-preloader-color: #fff; } .swiper-lazy-preloader-black { --swiper-preloader-color: #000; } @-webkit-keyframes swiper-preloader-spin { 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes swiper-preloader-spin { 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } /* a11y */ .swiper-container .swiper-notification { position: absolute; z-index: -1000; top: 0; left: 0; pointer-events: none; opacity: 0; } .swiper-container-fade.swiper-container-free-mode .swiper-slide { -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out; } .swiper-container-fade .swiper-slide { -webkit-transition-property: opacity; transition-property: opacity; pointer-events: none; } .swiper-container-fade .swiper-slide .swiper-slide { pointer-events: none; } .swiper-container-fade .swiper-slide-active, .swiper-container-fade .swiper-slide-active .swiper-slide-active { pointer-events: auto; } .swiper-container-cube { overflow: visible; } .swiper-container-cube .swiper-slide { z-index: 1; visibility: hidden; width: 100%; height: 100%; -webkit-transform-origin: 0 0; transform-origin: 0 0; pointer-events: none; -webkit-backface-visibility: hidden; backface-visibility: hidden; } .swiper-container-cube .swiper-slide .swiper-slide { pointer-events: none; } .swiper-container-cube.swiper-container-rtl .swiper-slide { -webkit-transform-origin: 100% 0; transform-origin: 100% 0; } .swiper-container-cube .swiper-slide-active, .swiper-container-cube .swiper-slide-active .swiper-slide-active { pointer-events: auto; } .swiper-container-cube .swiper-slide-active, .swiper-container-cube .swiper-slide-next, .swiper-container-cube .swiper-slide-prev, .swiper-container-cube .swiper-slide-next + .swiper-slide { visibility: visible; pointer-events: auto; } .swiper-container-cube .swiper-slide-shadow-top, .swiper-container-cube .swiper-slide-shadow-bottom, .swiper-container-cube .swiper-slide-shadow-left, .swiper-container-cube .swiper-slide-shadow-right { z-index: 0; -webkit-backface-visibility: hidden; backface-visibility: hidden; } .swiper-container-cube .swiper-cube-shadow { position: absolute; z-index: 0; bottom: 0; left: 0; width: 100%; height: 100%; opacity: .6; background: #000; -webkit-filter: blur(50px); filter: blur(50px); } .swiper-container-flip { overflow: visible; } .swiper-container-flip .swiper-slide { z-index: 1; pointer-events: none; -webkit-backface-visibility: hidden; backface-visibility: hidden; } .swiper-container-flip .swiper-slide .swiper-slide { pointer-events: none; } .swiper-container-flip .swiper-slide-active, .swiper-container-flip .swiper-slide-active .swiper-slide-active { pointer-events: auto; } .swiper-container-flip .swiper-slide-shadow-top, .swiper-container-flip .swiper-slide-shadow-bottom, .swiper-container-flip .swiper-slide-shadow-left, .swiper-container-flip .swiper-slide-shadow-right { z-index: 0; -webkit-backface-visibility: hidden; backface-visibility: hidden; } /* overlay at start */ .mfp-fade.mfp-bg { -webkit-transition: all .15s ease-out; transition: all .15s ease-out; opacity: 0; } /* overlay animate in */ .mfp-fade.mfp-bg.mfp-ready { opacity: .8; } /* overlay animate out */ .mfp-fade.mfp-bg.mfp-removing { opacity: 0; } /* content at start */ .mfp-fade.mfp-wrap .mfp-content { -webkit-transition: all .15s ease-out; transition: all .15s ease-out; opacity: 0; } /* content animate it */ .mfp-fade.mfp-wrap.mfp-ready .mfp-content { opacity: 1; } /* content animate out */ .mfp-fade.mfp-wrap.mfp-removing .mfp-content { opacity: 0; } .mfp-bg { opacity: .7; background: #3e140b; } .mfp-wrap .mfp-iframe-scaler iframe { -webkit-box-shadow: none; box-shadow: none; } .mfp-wrap button.mfp-close { font-size: 0; opacity: 1; background: url('../img/ico_modal_01.svg') no-repeat center center; background-size: contain; } @media screen and (min-width: 768px) { .mfp-wrap button.mfp-close { width: 96px; height: 96px; -webkit-transition: opacity .3s; transition: opacity .3s; background-size: 30px; } .mfp-wrap button.mfp-close:hover { opacity: .7; } } @media screen and (max-width: 767px) { .mfp-wrap button.mfp-close { width: 16vw; height: 16vw; background-size: 6.4vw; } } @media screen and (min-width: 768px) { .cl-modal__youtube .mfp-iframe-holder .mfp-content { max-width: 1020px; } } @media screen and (max-width: 767px) { .cl-modal__youtube .mfp-container { padding-right: 0; padding-left: 0; } } .cl-modal__youtube--new { z-index: 99991; background: rgba(0, 0, 0, .8); } @media screen and (max-width: 767px) { .cl-modal__youtube--new { top: 0 !important; } } .cl-modal__youtube--new .mfp-content { overflow: hidden; border-radius: 15px; } @media screen and (max-width: 767px) { .cl-modal__youtube--new .mfp-content { max-width: 90%; } } .cl-modal__youtube--vertical .mfp-iframe-scaler { padding-top: 177.7777%; } @media screen and (min-width: 768px) { .cl-modal__youtube--vertical .mfp-iframe-holder .mfp-content { max-width: 360px; } } @media screen and (max-width: 767px) { .cl-modal__youtube--vertical .mfp-container { padding-right: 10.66667vw; padding-left: 10.66667vw; } } .cl-modal__finish .mfp-content { background: #fff; } .cl-modal__finish .mfp-content img { width: 100%; height: auto; vertical-align: bottom; } .cl-modal__finish .cl-finish__hdg { margin: 0 auto; } .cl-modal__finish .cl-finish__txt { font-family: 'Noto Serif JP', serif, '游ゴシック体', YuGothic, '游ゴシック', 'Yu Gothic', 'メイリオ', 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', sans-serif; margin: 0; text-align: center; letter-spacing: .04em; color: #411900; } .cl-modal__finish .cl-finish__img { position: relative; z-index: -1; } @media screen and (min-width: 768px) { .cl-modal__finish .mfp-content { max-width: 800px; border-radius: 20px; } .cl-modal__finish .cl-finish__hdg { width: 318px; padding: 40px 0 20px; } .cl-modal__finish .cl-finish__txt { font-size: 14px; line-height: 1.78571; } .cl-modal__finish .cl-finish__txt ~ .cl-finish__txt { padding: 25px 0; } .cl-modal__finish .cl-finish__img { margin-top: -68px; } } @media screen and (max-width: 767px) { .cl-modal__finish .mfp-container { padding-right: 5.33333vw; padding-left: 5.33333vw; } .cl-modal__finish .mfp-content { border-radius: 5.33333vw; } .cl-modal__finish .cl-finish__hdg { width: 68vw; padding: 8vw 0 4.8vw; } .cl-modal__finish .cl-finish__txt { font-size: 3.2vw; line-height: 1.66667; } .cl-modal__finish .cl-finish__txt ~ .cl-finish__txt { padding: 6.13333vw 0; } .cl-modal__finish .cl-finish__img { margin-top: -13.33333vw; } } .cl-modal__lyrics { overflow: hidden !important; background: rgba(222, 181, 43, .7); } .cl-modal__lyrics .mfp-figure { margin-bottom: -190px; } .cl-modal__lyrics .mfp-figure:after { background: transparent; -webkit-box-shadow: none; box-shadow: none; } .cl-modal__lyrics.mfp-wrap button.mfp-close { background: url('../img/statement/ico-close-black.svg') no-repeat center center; background-size: 45px; } .cl-modal__lyrics__sp { position: fixed; bottom: 0; width: 100%; height: 500px; background: url('../img/statement/bg-lyrics_sp.png') no-repeat top center; background-size: contain; } @media screen and (max-width: 1023px) and (orientation: landscape) { .cl-modal__lyrics__sp { bottom: -140px; } } .cl-modal__lyrics__sp-content { overflow-y: scroll; width: 315px; height: 312px; margin-bottom: 190px; padding-top: 10px; margin-inline: auto; } @media screen and (max-width: 320px) { .cl-modal__lyrics__sp-content { width: 90%; height: 275px; } } @media screen and (max-width: 290px) { .cl-modal__lyrics__sp-content { height: 240px; } } @media screen and (max-width: 320px) { .cl-modal__lyrics__sp-content img { width: 100%; } } @media screen and (min-width: 768px) { .cl-modal__lyrics .mfp-iframe-holder .mfp-content { max-width: 1020px; } } @media screen and (max-width: 767px) { .cl-modal__lyrics .mfp-container { padding-right: 0; padding-left: 0; } } .mfp-zoom-out-cur { overflow: hidden !important; } #mainContents { font-family: 'Noto Serif JP', serif, '游ゴシック体', YuGothic, '游ゴシック', 'Yu Gothic', 'メイリオ', 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', sans-serif; position: relative; overflow: hidden; color: #000; background: #fff; } @media screen and (min-width: 768px) { #mainContents { width: 100%; min-width: 1080px; margin-right: auto; margin-left: auto; } } #mainContents *, #mainContents *::before, #mainContents *::after { -webkit-box-sizing: border-box; box-sizing: border-box; } #mainContents a { display: inline-block; color: inherit; } #mainContents img { width: 100%; height: auto; vertical-align: bottom; } #mainContents em { font-style: normal; } #mainContents strong { font-weight: normal; } @media screen and (min-width: 768px) { #mainContents .cl-hover { -webkit-transition: opacity .3s; transition: opacity .3s; } #mainContents .cl-hover:hover { opacity: .7; } } #mainContents .cl-anchor { position: relative; } #mainContents .cl-anchor a { position: absolute; top: 0; left: 0; } #mainContents .cl-button { position: relative; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; margin: 0 auto; border-radius: 50vw; background: #fff; -webkit-box-shadow: 0 2px 8px 0 rgba(0, 0, 0, .08); box-shadow: 0 2px 8px 0 rgba(0, 0, 0, .08); -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; } #mainContents .cl-button::after { position: absolute; top: 50%; right: 1.2em; width: .55em; height: .55em; content: ''; -webkit-transform: translateY(-50%) rotate(45deg); transform: translateY(-50%) rotate(45deg); border: solid #cd0d18; border-width: 1px 1px 0 0; } #mainContents .cl-button.is-red { color: #fff; background: #d4000f; } #mainContents .cl-button.is-red::after { border-width: 2px 2px 0 0; border-color: #fff; } #mainContents .cl-button:hover { color: #fff; background: #d4000f; } #mainContents .cl-button:hover::after { border: solid #fff; border-width: 1px 1px 0 0; } @media screen and (min-width: 768px) { #mainContents .cl-button { font-size: 18px; width: 320px; height: 60px; } #mainContents .cl-button.is-red { font-size: 27px; width: 480px; height: 90px; } } @media screen and (max-width: 767px) { #mainContents .cl-button { font-size: 3.73333vw; width: 100%; height: 10.66667vw; } #mainContents .cl-button.is-red { font-size: 4.26667vw; height: 12.26667vw; } } #mainContents .cl-mask img { display: block; } #mainContents .cl-mask__top img { -webkit-transform: translateY(-1px); transform: translateY(-1px); } #mainContents .cl-mask__bottom img { -webkit-transform: translateY(1px); transform: translateY(1px); } #mainContents [data-animate='fade-in'] { -webkit-transition: opacity 1s, -webkit-transform 1s; transition: opacity 1s, -webkit-transform 1s; transition: opacity 1s, transform 1s; transition: opacity 1s, transform 1s, -webkit-transform 1s; -webkit-transform: translateY(50px); transform: translateY(50px); opacity: 0; rotate: .0001deg; } #mainContents [data-animate='fade-in'].is-animated { -webkit-transform: translateY(0); transform: translateY(0); opacity: 1; } #mainContents [data-animate='scale-y'] { -webkit-transition: -webkit-transform 1s; transition: -webkit-transform 1s; transition: transform 1s; transition: transform 1s, -webkit-transform 1s; -webkit-transform: scaleY(0); transform: scaleY(0); -webkit-transform-origin: top left; transform-origin: top left; rotate: .0001deg; } #mainContents [data-animate='scale-y'].is-animated { -webkit-transform: scaleY(1); transform: scaleY(1); } #mainContents .cl-loading { position: absolute; z-index: 9999; top: 0; right: 0; bottom: 0; left: 0; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; height: calc(100vh - 128px); background: url('../img/bg_loading_pc.png') no-repeat center/cover; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; } @media screen and (max-width: 767px) { #mainContents .cl-loading { height: calc(100vh - 53px); background-image: url('../img/bg_loading_sp.png'); } } #mainContents .cl-loading__logo { width: 100%; -webkit-animation: opening-logo 1s cubic-bezier(.215, .61, .355, 1) forwards; animation: opening-logo 1s cubic-bezier(.215, .61, .355, 1) forwards; -webkit-animation-delay: 0s; animation-delay: 0s; } @media screen and (min-width: 768px) { #mainContents .cl-loading__logo { max-width: 998px; } } @media screen and (max-width: 767px) { #mainContents .cl-loading__logo { max-width: 65.86667vw; } } @-webkit-keyframes opening-logo { 0% { -webkit-transform: translateY(50px); transform: translateY(50px); opacity: 0; } 100% { -webkit-transform: translateY(0); transform: translateY(0); opacity: 1; } } @keyframes opening-logo { 0% { -webkit-transform: translateY(50px); transform: translateY(50px); opacity: 0; } 100% { -webkit-transform: translateY(0); transform: translateY(0); opacity: 1; } } #mainContents .cl-visual__inner { position: relative; } @media screen and (min-width: 768px) { #mainContents .cl-visual__inner { aspect-ratio: 2880/1328; } } @media screen and (max-width: 767px) { #mainContents .cl-visual__inner { aspect-ratio: 750/1220; } } #mainContents .cl-visual__btn { position: fixed; z-index: 99; right: 20px; bottom: -230px; max-width: 230px; -webkit-transition: .8s; transition: .8s; /* > a { background: url("../img/bg-ads-sticky.png") no-repeat center center; background-size: contain; border-radius: 50%; overflow: hidden; box-shadow: 0 10px 8px -3px #c2c2c2; &:hover { background: #fff; } } */ } @media screen and (min-width: 768px) { #mainContents .cl-visual__btn { width: 220px; } } @media screen and (max-width: 767px) { #mainContents .cl-visual__btn { right: 10px; bottom: -180px; width: 120px; } } #mainContents .cl-visual__btn.is-show { bottom: 100px; } @media screen and (max-width: 767px) { #mainContents .cl-visual__btn.is-show { bottom: 160px; } } @media screen and (min-width: 768px) { #mainContents .cl-nav { background-color: #ffde00; } } @media screen and (min-width: 768px) { #mainContents .cl-nav__list { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; width: 1110px; height: 85px; margin: 0 auto; padding: 18px 0; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-column-gap: 120px; -moz-column-gap: 120px; column-gap: 120px; } #mainContents .cl-nav__list.is-sticky { position: fixed; z-index: 100; top: 30px; left: 50%; width: 1170px; margin-left: -585px; -webkit-transition: .3s; transition: .3s; -webkit-transform: translateY(-145px); transform: translateY(-145px); opacity: 0; border-radius: 50vw; background: #ffde00; -webkit-box-shadow: 0 3px 6px 0 rgba(0, 0, 0, .16); box-shadow: 0 3px 6px 0 rgba(0, 0, 0, .16); } #mainContents .cl-nav__list.is-show { -webkit-transform: translateY(0); transform: translateY(0); opacity: 1; } #mainContents .cl-nav__list li { position: relative; } #mainContents .cl-nav__list li ~ li::before { position: absolute; top: 0; left: -60px; width: 1px; height: 100%; content: ''; background-color: #fff; } #mainContents .cl-nav__list a { font-size: 17px; position: relative; display: block; height: 53px; -webkit-transition: color .2s; transition: color .2s; letter-spacing: .04em; background-image: url('../img/ico_arrow_02.svg'), url('../img/ico_arrow_02-hover.svg'); background-repeat: no-repeat, no-repeat; background-position: center 36px; background-size: 17px, 0; } #mainContents .cl-nav__list a:hover { color: #d4000f; background-size: 0, 17px; } } @media screen and (max-width: 767px) { #mainContents .cl-nav__list.is-sticky { display: none; } } @media screen and (max-width: 767px) { #mainContents .cl-nav__menu { position: absolute; z-index: 2; top: 0; left: 0; overflow: hidden; width: 100%; height: 50px; -webkit-transition: height 1s; transition: height 1s; } #mainContents .cl-nav__menu.nav-open { z-index: 100; height: 450px; -webkit-box-shadow: -2px 0 16px 0 rgba(0, 0, 0, .16); box-shadow: -2px 0 16px 0 rgba(0, 0, 0, .16); } #mainContents .cl-nav__menu.is-fixed { position: fixed; } #mainContents .cl-nav__menu.is-fixed ul { max-height: 100vh; } #mainContents .cl-nav__menu a { display: block; padding: 2.66667vw 0; letter-spacing: .01em; } #mainContents .cl-nav__menu ul { overflow-y: auto; width: 100%; height: 200vh; max-height: calc(100vh - 52px); padding: 18.13333vw 5.33333vw; padding-right: 30%; -webkit-transition: -webkit-transform 1s; transition: -webkit-transform 1s; transition: transform 1s; transition: transform 1s, -webkit-transform 1s; -webkit-transform: translateY(-100%); transform: translateY(-100%); background: #fff; -webkit-box-shadow: -2px 0 16px 0 rgba(0, 0, 0, .16); box-shadow: -2px 0 16px 0 rgba(0, 0, 0, .16); -webkit-overflow-scrolling: touch; } #mainContents .cl-nav__menu ul li { font-size: 4.26667vw; margin-bottom: 5.6vw; letter-spacing: .08em; border-bottom: 1px solid #fae043; -webkit-border-image: -webkit-gradient(linear, left top, right top, from(#deb52b), color-stop(50%, #fae043), to(#ca9625)); -webkit-border-image: -webkit-linear-gradient(left, #deb52b 0%, #fae043 50%, #ca9625 100%); -o-border-image: linear-gradient(to right, #deb52b 0%, #fae043 50%, #ca9625 100%); border-image: -webkit-gradient(linear, left top, right top, from(#deb52b), color-stop(50%, #fae043), to(#ca9625)); border-image: linear-gradient(to right, #deb52b 0%, #fae043 50%, #ca9625 100%); border-image-slice: 1; } } #mainContents .cl-nav__trigger { cursor: pointer; } @media screen and (min-width: 768px) { #mainContents .cl-nav__trigger { display: none; } } @media screen and (max-width: 767px) { #mainContents .cl-nav__trigger { position: absolute; z-index: 4; top: 10px; left: 10px; width: 36px; height: 36px; background-image: url('../img/btn_nav_01-close.svg'), url('../img/btn_nav_01.svg'); background-repeat: no-repeat, no-repeat; background-size: 0, 100%; } #mainContents .cl-nav__trigger.is-open { background-size: 100%, 0; } #mainContents .cl-nav__trigger.is-open + ul { -webkit-transform: translateY(0); transform: translateY(0); } } #mainContents .cl-share { background-color: #fcf9f0; background-repeat: no-repeat; background-position: top center; background-size: 100%; } @media screen and (min-width: 768px) { #mainContents .cl-share { padding-top: 17.15278vw; padding-bottom: 9.51389vw; background-image: url('../img/bg_tvcm_pc.png'); } } @media screen and (max-width: 767px) { #mainContents .cl-share { padding-top: 20.8vw; padding-bottom: 20.83333vw; background-image: url('../img/bg_tvcm_sp.png'); } } @media screen and (min-width: 768px) { #mainContents .cl-share .cl-anchor a { top: -50px; } } #mainContents .cl-share__hdg { background: url('../img/tvcm/tvcm_art.svg') no-repeat center center; background-size: contain; } #mainContents .cl-share__hdg span { display: block; margin: 0 auto; } @media screen and (min-width: 768px) { #mainContents .cl-share__hdg { padding-top: 100px; padding-bottom: 90px; } #mainContents .cl-share__hdg span { width: 404px; } #mainContents .cl-share__hdg span ~ span { width: 636px; margin: 40px auto 0; } } @media screen and (max-width: 767px) { #mainContents .cl-share__hdg { padding-top: 10.66667vw; padding-bottom: 8vw; background-position: bottom center; } #mainContents .cl-share__hdg span { width: 53.86667vw; } #mainContents .cl-share__hdg span ~ span { width: 60.53333vw; margin: 8vw auto 0; } } @media screen and (min-width: 768px) { #mainContents .cl-share__slide { padding: 95px 0 37px; } } @media screen and (max-width: 767px) { #mainContents .cl-share__slide { margin-top: -8vw; padding: 0 0 10.66667vw; } } #mainContents .cl-share__card { position: relative; } #mainContents .cl-share__card::after, #mainContents .cl-share__card a::after { position: absolute; pointer-events: none; } #mainContents .cl-share__card.cl-new::after { width: 1em; height: 1em; content: ''; -webkit-transition: -webkit-transform .3s; transition: -webkit-transform .3s; transition: transform .3s; transition: transform .3s, -webkit-transform .3s; border-radius: 50vw; background: url('../img/ico_new_01.svg') no-repeat center center; background-size: contain; -webkit-box-shadow: 0 2px 8px 0 rgba(0, 0, 0, .16); box-shadow: 0 2px 8px 0 rgba(0, 0, 0, .16); } #mainContents .cl-share__card a::after { top: 0; left: 0; width: 100%; height: 100%; content: ''; -webkit-transition: -webkit-transform .3s; transition: -webkit-transform .3s; transition: transform .3s; transition: transform .3s, -webkit-transform .3s; background: url('../img/ico_play_01.svg') no-repeat center center; background-size: 1em; } #mainContents .cl-share__card a.is-white::after { background-image: url('../img/ico_play_02.svg'); } #mainContents .cl-share__card::before { position: absolute; z-index: 1; top: 0; left: 0; width: 100%; height: 100%; content: ''; cursor: pointer; } @media screen and (max-width: 767px) { #mainContents .cl-share__card { padding: 11.2vw 0 0; } } #mainContents .cl-share__card { position: relative; } #mainContents .cl-share__card:only-child { margin-inline: auto; } #mainContents .cl-share__card::after, #mainContents .cl-share__card a::after { position: absolute; pointer-events: none; } #mainContents .cl-share__card.cl-new::after { width: 1em; height: 1em; content: ''; -webkit-transition: -webkit-transform .3s; transition: -webkit-transform .3s; transition: transform .3s; transition: transform .3s, -webkit-transform .3s; border-radius: 50vw; background: url('../img/ico_new_01.svg') no-repeat center center; background-size: contain; -webkit-box-shadow: 0 2px 8px 0 rgba(0, 0, 0, .16); box-shadow: 0 2px 8px 0 rgba(0, 0, 0, .16); } #mainContents .cl-share__card a::after { top: 0; left: 0; width: 100%; height: 100%; content: ''; -webkit-transition: -webkit-transform .3s; transition: -webkit-transform .3s; transition: transform .3s; transition: transform .3s, -webkit-transform .3s; background: url('../img/ico_play_01.svg') no-repeat center center; background-size: 1em; } #mainContents .cl-share__card a.play-new::after { display: none; } #mainContents .cl-share__card a.play-new .icon-play:before { position: absolute; z-index: 5; top: 50%; left: 50%; display: -webkit-inline-box; display: -webkit-inline-flex; display: -ms-inline-flexbox; display: inline-flex; width: 110px; height: 110px; margin-top: -55px; margin-left: -55px; content: ''; -webkit-animation: rotate-animation 10s infinite linear; animation: rotate-animation 10s infinite linear; background: url('../img/icons/icon-play-rotate.svg') no-repeat center center; background-size: 100%; } @media screen and (max-width: 767px) { #mainContents .cl-share__card a.play-new .icon-play:before { width: 80px; height: 80px; margin-top: -40px; margin-left: -40px; background: url('../img/icons/icon-play-rotate_sp.svg') no-repeat center center; } } #mainContents .cl-share__card a.play-new .icon-play:after { position: absolute; z-index: 5; top: 50%; left: 50%; display: -webkit-inline-box; display: -webkit-inline-flex; display: -ms-inline-flexbox; display: inline-flex; width: 15px; height: 11px; content: ''; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); background: url('../img/icons/icon-play-olygon.svg') no-repeat center center; background-size: 100%; } @media screen and (max-width: 767px) { #mainContents .cl-share__card a.play-new .icon-play:after { width: 18px; height: 12px; } } #mainContents .cl-share__card a.is-white::after { background-image: url('../img/ico_play_02.svg'); } #mainContents .cl-share__card::before { position: absolute; z-index: 1; top: 0; left: 0; width: 100%; height: 100%; content: ''; cursor: pointer; } #mainContents .cl-share__card.cl-coming a::after { display: none; } #mainContents .cl-share__card.swiper-slide-active::before { display: none; } #mainContents .cl-share__card.swiper-slide-active.cl-coming { pointer-events: none; } @media screen and (min-width: 768px) { #mainContents .cl-share__card { width: 480px; margin: 0 110px; } #mainContents .cl-share__card::after { font-size: 80px; top: -37px; right: -40px; } #mainContents .cl-share__card a::after { font-size: 80px; } #mainContents .cl-share__card a:hover::after { -webkit-transform: scale(1.2); transform: scale(1.2); } #mainContents .cl-share__card:hover .cl-share__body .scale { -webkit-transform: scale(1.1); transform: scale(1.1); } #mainContents .cl-share__card.swiper-slide-active::after { -webkit-transform: translate(25%, -18%); transform: translate(25%, -18%); } #mainContents .cl-share__card.swiper-slide-active .cl-share__body { -webkit-transform: scale(1.7083); transform: scale(1.7083); } #mainContents .cl-share__card.swiper-slide-active .cl-share__foot { -webkit-transform: translateY(97px); transform: translateY(97px); } #mainContents .cl-share__card.swiper-slide-active:hover .cl-share__body .scale { -webkit-transform: scale(1.1); transform: scale(1.1); } } @media screen and (max-width: 767px) { #mainContents .cl-share__card { width: 64vw; margin: 0 5.33333vw; } #mainContents .cl-share__card::after { font-size: 12.26667vw; top: -2.13333vw; right: -6.4vw; } #mainContents .cl-share__card a::after { font-size: 16vw; } #mainContents .cl-share__card.swiper-slide-active::after { -webkit-transform: translate(23%, -38%); transform: translate(23%, -38%); } #mainContents .cl-share__card.swiper-slide-active .cl-share__body { -webkit-transform: scale(1.1666); transform: scale(1.1666); } #mainContents .cl-share__card.swiper-slide-active .cl-share__foot { -webkit-transform: translateY(3.46667vw); transform: translateY(3.46667vw); } } #mainContents .cl-share__foot { position: absolute; left: 0; width: 100%; -webkit-transition: -webkit-transform .3s; transition: -webkit-transform .3s; transition: transform .3s; transition: transform .3s, -webkit-transform .3s; text-align: center; text-indent: -.5em; } @media screen and (min-width: 768px) { #mainContents .cl-share__foot { font-size: 20px; line-height: 1.52381; top: calc(100% + 25px); } } @media screen and (max-width: 767px) { #mainContents .cl-share__foot { font-size: 4.26667vw; line-height: 1.5; top: calc(100% + 5.33333vw); } } #mainContents .cl-share__body { overflow: hidden; -webkit-transition: -webkit-transform .3s; transition: -webkit-transform .3s; transition: transform .3s; transition: transform .3s, -webkit-transform .3s; } #mainContents .cl-share__body .scale { -webkit-transition: -webkit-transform .3s; transition: -webkit-transform .3s; transition: transform .3s; transition: transform .3s, -webkit-transform .3s; } @media screen and (min-width: 768px) { #mainContents .cl-share__body { width: 480px; border-radius: 17px; } } @media screen and (max-width: 767px) { #mainContents .cl-share__body { width: 64vw; border-radius: 2.13333vw; } } #mainContents .cl-share__pagination { font-size: 0; text-align: center; } #mainContents .cl-share__pagination span { opacity: 1; border-radius: 50vw; background: rgba(0, 0, 0, .05); } #mainContents .cl-share__pagination span.swiper-pagination-bullet-active { background: #d4000f; } @media screen and (min-width: 768px) { #mainContents .cl-share__pagination { margin-top: 182px; } #mainContents .cl-share__pagination span { width: 12px; height: 12px; margin: 0 5px; } } @media screen and (max-width: 767px) { #mainContents .cl-share__pagination { margin-top: 27.73333vw; } #mainContents .cl-share__pagination span { width: 3.2vw; height: 3.2vw; margin: 0 1.33333vw; } } #mainContents .cl-share__button-prev, #mainContents .cl-share__button-next { top: 198px; width: 67px; height: 67px; } @media screen and (max-width: 767px) { #mainContents .cl-share__button-prev, #mainContents .cl-share__button-next { display: none; } } #mainContents .cl-share__button-prev::after, #mainContents .cl-share__button-next::after { width: 67px; height: 67px; margin: auto; content: ''; background-repeat: no-repeat; background-size: contain; } #mainContents .cl-share__button-prev { left: 36px; } #mainContents .cl-share__button-prev::after { background-image: url('../img/icons/icon-arrow-left.svg'); } #mainContents .cl-share__button-next { right: 36px; } #mainContents .cl-share__button-next::after { background-image: url('../img/icons/icon-arrow-right.svg'); } #mainContents .cl-share__bottom { margin-top: 30px; } @media screen and (max-width: 767px) { #mainContents .cl-share__bottom { width: 110.66667vw; margin-top: -31.73333vw; margin-left: -5.24267vw; } } #mainContents .cl-movie { background-repeat: no-repeat; background-position: bottom center; background-size: cover; } @media screen and (min-width: 768px) { #mainContents .cl-movie { padding-bottom: 18.88889vw; background-image: url('../img/bg_movie_pc.png'); } } @media screen and (max-width: 767px) { #mainContents .cl-movie { padding-bottom: 24vw; background-image: url('../img/bg_movie_sp.png'); } } #mainContents .cl-movie .reverse { -webkit-transform: scaleX(-1); transform: scaleX(-1); } @media screen and (min-width: 768px) { #mainContents .cl-movie .cl-anchor a { top: -145px; } } @media screen and (max-width: 767px) { #mainContents .cl-movie .cl-anchor { margin-top: 0; } } @media screen and (min-width: 768px) { #mainContents .cl-movie .cl-movie__inner { padding-top: 5.27778vw; } } @media screen and (max-width: 767px) { #mainContents .cl-movie .cl-mask__top { width: 110.66667vw; margin-top: -31.2vw; margin-left: -5.33333vw; } } #mainContents .cl-movie__hdg { padding: 65px 0; background: url('../img/txt-movie-00.svg') no-repeat center center; background-size: 95%; } @media screen and (max-width: 767px) { #mainContents .cl-movie__hdg { margin-top: 5.86667vw; padding: 10.13333vw 0 0; background-position: center center; background-size: 100%; } } #mainContents .cl-movie__hdg span { display: block; margin: 0 auto; } @media screen and (min-width: 768px) { #mainContents .cl-movie__hdg span { width: 598px; margin-bottom: 25px; } } @media screen and (max-width: 767px) { #mainContents .cl-movie__hdg span { width: 55.2vw; } } #mainContents .cl-movie__txt { text-align: center; letter-spacing: .08em; } @media screen and (min-width: 768px) { #mainContents .cl-movie__txt { font-size: 16px; line-height: 1.5; } } @media screen and (max-width: 767px) { #mainContents .cl-movie__txt { font-size: 4.26667vw; line-height: 1.75; letter-spacing: 0; } } @media screen and (min-width: 768px) { #mainContents .cl-movie__slide { padding-top: 105px; } } @media screen and (max-width: 767px) { #mainContents .cl-movie__slide { padding-top: 16vw; } } #mainContents .cl-movie__card { position: relative; } #mainContents .cl-movie__card::after, #mainContents .cl-movie__card a::after { position: absolute; pointer-events: none; } #mainContents .cl-movie__card.cl-new::after { width: 1em; height: 1em; content: ''; -webkit-transition: -webkit-transform .3s; transition: -webkit-transform .3s; transition: transform .3s; transition: transform .3s, -webkit-transform .3s; border-radius: 50vw; background: url('../img/ico_new_01.svg') no-repeat center center; background-size: contain; -webkit-box-shadow: 0 2px 8px 0 rgba(0, 0, 0, .16); box-shadow: 0 2px 8px 0 rgba(0, 0, 0, .16); } #mainContents .cl-movie__card a::after { top: 0; left: 0; width: 100%; height: 100%; content: ''; -webkit-transition: -webkit-transform .3s; transition: -webkit-transform .3s; transition: transform .3s; transition: transform .3s, -webkit-transform .3s; background: url('../img/ico_play_01.svg') no-repeat center center; background-size: 1em; } #mainContents .cl-movie__card a.play-new::after { display: none; } #mainContents .cl-movie__card a.play-new .icon-play:before { position: absolute; z-index: 5; top: 50%; left: 50%; display: -webkit-inline-box; display: -webkit-inline-flex; display: -ms-inline-flexbox; display: inline-flex; width: 160px; height: 160px; margin-top: -80px; margin-left: -80px; content: ''; -webkit-animation: rotate-animation 10s infinite linear; animation: rotate-animation 10s infinite linear; background: url('../img/icons/icon-play-rotate.svg') no-repeat center center; background-size: 100%; } @media screen and (max-width: 767px) { #mainContents .cl-movie__card a.play-new .icon-play:before { width: 80px; height: 80px; margin-top: -40px; margin-left: -40px; background: url('../img/icons/icon-play-rotate_sp.svg') no-repeat center center; } } #mainContents .cl-movie__card a.play-new .icon-play:after { position: absolute; z-index: 5; top: 50%; left: 50%; display: -webkit-inline-box; display: -webkit-inline-flex; display: -ms-inline-flexbox; display: inline-flex; width: 24px; height: 18px; content: ''; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); background: url('../img/icons/icon-play-olygon.svg') no-repeat center center; background-size: 100%; } @media screen and (max-width: 767px) { #mainContents .cl-movie__card a.play-new .icon-play:after { width: 18px; height: 12px; } } #mainContents .cl-movie__card::before { position: absolute; z-index: 1; top: 0; left: 0; width: 100%; height: 100%; content: ''; cursor: pointer; } #mainContents .cl-movie__card.cl-coming a::after { display: none; } #mainContents .cl-movie__card.swiper-slide-active::before { display: none; } #mainContents .cl-movie__card.swiper-slide-active.cl-coming { pointer-events: none; } @media screen and (min-width: 768px) { #mainContents .cl-movie__card { width: 280px; margin: 0 45px; } #mainContents .cl-movie__card::after { /* right: -40px; */ font-size: 80px; top: -37px; right: -20px; } #mainContents .cl-movie__card a::after { font-size: 80px; } #mainContents .cl-movie__card a:hover::after { -webkit-transform: scale(1.2); transform: scale(1.2); } #mainContents .cl-movie__card:hover .cl-movie__body .scale { -webkit-transform: scale(1.1); transform: scale(1.1); } #mainContents .cl-movie__card.swiper-slide-active::after { -webkit-transform: translate(25%, -18%); transform: translate(25%, -18%); } #mainContents .cl-movie__card.swiper-slide-active .cl-movie__body { -webkit-transform: scale(1.1428); transform: scale(1.1428); } #mainContents .cl-movie__card.swiper-slide-active .cl-movie__head { bottom: calc(100% + 45px); } #mainContents .cl-movie__card.swiper-slide-active:hover .cl-movie__body .scale { -webkit-transform: scale(1.1); transform: scale(1.1); } } @media screen and (max-width: 767px) { #mainContents .cl-movie__card { width: 48vw; margin: 0 6.66667vw; } #mainContents .cl-movie__card::after { font-size: 12.26667vw; top: -2.13333vw; right: -6.4vw; } #mainContents .cl-movie__card a::after { font-size: 16vw; } #mainContents .cl-movie__card.swiper-slide-active::after { -webkit-transform: translate(23%, -38%); transform: translate(23%, -38%); } #mainContents .cl-movie__card.swiper-slide-active .cl-movie__body { -webkit-transform: scale(1.1111); transform: scale(1.1111); } } @media screen and (min-width: 768px) { #mainContents .cl-movie__card.f-w { width: auto; max-height: 497px; } } @media screen and (max-width: 767px) { #mainContents .cl-movie__card.f-w { width: auto; margin-top: 80px; } } #mainContents .cl-movie__head { position: absolute; left: 0; width: 100%; -webkit-transition: -webkit-transform .3s; transition: -webkit-transform .3s; transition: transform .3s; transition: transform .3s, -webkit-transform .3s; text-align: center; text-indent: -.5em; } @media screen and (min-width: 768px) { #mainContents .cl-movie__head { font-size: 20px; line-height: 1.52381; bottom: calc(100% + 32px); } #mainContents .cl-movie__head--long { font-size: 19px; line-height: 1.3; bottom: calc(100% + 45px); white-space: nowrap; } } @media screen and (max-width: 767px) { #mainContents .cl-movie__head { font-size: 3.46667vw; line-height: 1.5; bottom: calc(100% + 9.33333vw); } #mainContents .cl-movie__head--long { font-size: 3.2vw; line-height: 1.3; bottom: calc(100% + 8vw); white-space: nowrap; } } #mainContents .cl-movie__body { overflow: hidden; -webkit-transition: -webkit-transform .3s; transition: -webkit-transform .3s; transition: transform .3s; transition: transform .3s, -webkit-transform .3s; } #mainContents .cl-movie__body .scale { -webkit-transition: -webkit-transform .3s; transition: -webkit-transform .3s; transition: transform .3s; transition: transform .3s, -webkit-transform .3s; } @media screen and (min-width: 768px) { #mainContents .cl-movie__body { width: 280px; border-radius: 30px; } } @media screen and (max-width: 767px) { #mainContents .cl-movie__body { width: 48vw; border-radius: 5.33333vw; } } @media screen and (min-width: 768px) { #mainContents .cl-movie__body.f-w { width: auto; max-height: 497px; } #mainContents .cl-movie__body.f-w img { width: auto; height: 100%; max-height: 497px; } } @media screen and (max-width: 767px) { #mainContents .cl-movie__body.f-w { width: auto; max-height: 155px; } #mainContents .cl-movie__body.f-w img { width: auto; height: 100%; max-height: 155px; } } #mainContents .cl-movie__pagination { font-size: 0; text-align: center; } #mainContents .cl-movie__pagination span { opacity: 1; border-radius: 50vw; background: rgba(0, 0, 0, .05); } #mainContents .cl-movie__pagination span.swiper-pagination-bullet-active { background: #d4000f; } @media screen and (min-width: 768px) { #mainContents .cl-movie__pagination { margin-top: 64px; } #mainContents .cl-movie__pagination span { width: 12px; height: 12px; margin: 0 5px; } } @media screen and (max-width: 767px) { #mainContents .cl-movie__pagination { margin-top: 15.46667vw; } #mainContents .cl-movie__pagination span { width: 3.2vw; height: 3.2vw; margin: 0 1.33333vw; } } #mainContents .cl-movie__button-prev, #mainContents .cl-movie__button-next { width: 67px; height: 67px; } @media screen and (max-width: 767px) { #mainContents .cl-movie__button-prev, #mainContents .cl-movie__button-next { display: none; } } #mainContents .cl-movie__button-prev::after, #mainContents .cl-movie__button-next::after { width: 67px; height: 67px; margin: auto; content: ''; background-repeat: no-repeat; background-size: contain; } #mainContents .cl-movie__button-prev { left: 36px; } #mainContents .cl-movie__button-prev::after { background-image: url('../img/icons/icon-arrow-left.svg'); } #mainContents .cl-movie__button-next { right: 36px; } #mainContents .cl-movie__button-next::after { background-image: url('../img/icons/icon-arrow-right.svg'); } #mainContents .cl-enyoy__inner { background: #fcf9f0; } #mainContents .cl-enyoy .cl-finish__hdg { margin-bottom: 30px; } #mainContents .cl-enyoy .cl-share__inner { margin-bottom: 60px; } #mainContents .cl-enyoy__title { margin-top: -1px; margin-bottom: -5.55556vw; padding: 40px 0 170px; background: url('../img/enyoy/enyoy-tt-bg.svg') no-repeat bottom center; background-size: 105%; } #mainContents .cl-enyoy__title > span { width: 598px; } @media screen and (max-width: 767px) { #mainContents .cl-enyoy__title { padding-bottom: 55px; background: url('../img/enyoy/enyoy-tt-bg.svg') no-repeat center 34%; background-size: 100%; } } #mainContents .cl-dance { background-repeat: no-repeat; background-position: center center; background-size: cover; } @media screen and (min-width: 768px) { #mainContents .cl-dance .cl-anchor a { top: -145px; } } #mainContents .cl-dance__inner { background: #fcf9f0; } @media screen and (min-width: 768px) { #mainContents .cl-dance__inner { padding: 100px 0 26.38889vw; background-position: center -50px; background-size: 1185px; } } @media screen and (max-width: 767px) { #mainContents .cl-dance__inner { padding: 9.06667vw 0 21.33333vw; background-position: center 30.66667vw; background-size: 100%; } } #mainContents .cl-dance__hdg span { display: block; } @media screen and (min-width: 768px) { #mainContents .cl-dance__hdg span { width: 706px; margin: -70px auto -40px; } } @media screen and (max-width: 767px) { #mainContents .cl-dance__hdg { overflow: hidden; } #mainContents .cl-dance__hdg span { width: calc(100% + 26.66667vw); margin: -1.33333vw 0 -4vw -13.33333vw; text-align: center; } #mainContents .cl-dance__hdg img { width: 109.86667vw; } } #mainContents .cl-dance__txt { text-align: center; color: #f52281; } @media screen and (min-width: 768px) { #mainContents .cl-dance__txt { font-size: 16px; line-height: 1.5; } } @media screen and (max-width: 767px) { #mainContents .cl-dance__txt { font-size: 4.26667vw; line-height: 1.75; } } @media screen and (min-width: 768px) { #mainContents .cl-dance__slide { padding-top: 165px; } #mainContents .cl-dance__slide .swiper-wrapper { -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; } } @media screen and (max-width: 767px) { #mainContents .cl-dance__slide { padding-top: 38.66667vw; } } #mainContents .cl-dance__card { position: relative; } #mainContents .cl-dance__card::after, #mainContents .cl-dance__card a::after { position: absolute; pointer-events: none; } #mainContents .cl-dance__card.cl-new::after { width: 1em; height: 1em; content: ''; -webkit-transition: -webkit-transform .3s; transition: -webkit-transform .3s; transition: transform .3s; transition: transform .3s, -webkit-transform .3s; border-radius: 50vw; background: url('../img/ico_new_01.svg') no-repeat center center; background-size: contain; -webkit-box-shadow: 0 2px 8px 0 rgba(0, 0, 0, .16); box-shadow: 0 2px 8px 0 rgba(0, 0, 0, .16); } #mainContents .cl-dance__card a::after { top: 0; left: 0; width: 100%; height: 100%; content: ''; -webkit-transition: -webkit-transform .3s; transition: -webkit-transform .3s; transition: transform .3s; transition: transform .3s, -webkit-transform .3s; background: url('../img/ico_play_01.svg') no-repeat center center; background-size: 1em; } #mainContents .cl-dance__card a.play-new::after { display: none; } #mainContents .cl-dance__card a.play-new .icon-play:before { position: absolute; z-index: 5; top: 50%; left: 50%; display: -webkit-inline-box; display: -webkit-inline-flex; display: -ms-inline-flexbox; display: inline-flex; width: 160px; height: 160px; margin-top: -80px; margin-left: -80px; content: ''; -webkit-animation: rotate-animation 10s infinite linear; animation: rotate-animation 10s infinite linear; background: url('../img/icons/icon-play-rotate.svg') no-repeat center center; background-size: 100%; } @media screen and (max-width: 767px) { #mainContents .cl-dance__card a.play-new .icon-play:before { width: 80px; height: 80px; margin-top: -40px; margin-left: -40px; background: url('../img/icons/icon-play-rotate_sp.svg') no-repeat center center; } } #mainContents .cl-dance__card a.play-new .icon-play:after { position: absolute; z-index: 5; top: 50%; left: 50%; display: -webkit-inline-box; display: -webkit-inline-flex; display: -ms-inline-flexbox; display: inline-flex; width: 24px; height: 18px; content: ''; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); background: url('../img/icons/icon-play-olygon.svg') no-repeat center center; background-size: 100%; } @media screen and (max-width: 767px) { #mainContents .cl-dance__card a.play-new .icon-play:after { width: 18px; height: 12px; } } #mainContents .cl-dance__card a.is-white::after { background-image: url('../img/ico_play_02.svg'); } #mainContents .cl-dance__card::before { position: absolute; z-index: 1; top: 0; left: 0; width: 100%; height: 100%; content: ''; cursor: pointer; } #mainContents .cl-dance__card.cl-coming a::after { display: none; } #mainContents .cl-dance__card.swiper-slide-active::before { display: none; } #mainContents .cl-dance__card.swiper-slide-active.cl-coming { pointer-events: none; } @media screen and (min-width: 768px) { #mainContents .cl-dance__card { width: 280px; margin: 0 35px; } #mainContents .cl-dance__card::after { font-size: 80px; top: -37px; right: -40px; } #mainContents .cl-dance__card::before { display: none; } #mainContents .cl-dance__card a::after { font-size: 80px; } #mainContents .cl-dance__card a:hover::after { -webkit-transform: scale(1.2); transform: scale(1.2); } #mainContents .cl-dance__card:hover .cl-dance__body .scale { -webkit-transform: scale(1.1); transform: scale(1.1); } #mainContents .cl-dance__card.swiper-slide-active::after { -webkit-transform: translate(25%, -18%); transform: translate(25%, -18%); } #mainContents .cl-dance__card.swiper-slide-active .cl-dance__body .scale { -webkit-transform: scale(1.1428); transform: scale(1.1428); } #mainContents .cl-dance__card.swiper-slide-active:hover .cl-dance__body .scale { -webkit-transform: scale(1.1); transform: scale(1.1); } } @media screen and (max-width: 767px) { #mainContents .cl-dance__card { width: 48vw; margin: 0 6.66667vw; } #mainContents .cl-dance__card::after { font-size: 12.26667vw; top: -2.13333vw; right: -6.4vw; } #mainContents .cl-dance__card a::after { font-size: 16vw; } #mainContents .cl-dance__card.swiper-slide-active::after { -webkit-transform: translate(23%, -38%); transform: translate(23%, -38%); } #mainContents .cl-dance__card.swiper-slide-active .cl-dance__body { -webkit-transform: scale(1.1111); transform: scale(1.1111); } } #mainContents .cl-dance__head { position: absolute; left: 0; width: 100%; -webkit-transition: -webkit-transform .3s; transition: -webkit-transform .3s; transition: transform .3s; transition: transform .3s, -webkit-transform .3s; text-align: center; white-space: nowrap; text-indent: -.5em; color: #f52281; } @media screen and (min-width: 768px) { #mainContents .cl-dance__head { font-size: 20px; line-height: 1.52381; bottom: calc(100% + 15px); } #mainContents .cl-dance__head--long { font-size: 19px; line-height: 1.3; bottom: calc(100% + 45px); white-space: nowrap; } } @media screen and (max-width: 767px) { #mainContents .cl-dance__head { font-size: 3.46667vw; line-height: 1.5; bottom: calc(100% + 9.33333vw); } #mainContents .cl-dance__head--long { font-size: 3.2vw; line-height: 1.3; bottom: calc(100% + 8vw); white-space: nowrap; } } #mainContents .cl-dance__body { overflow: hidden; -webkit-transition: -webkit-transform .3s; transition: -webkit-transform .3s; transition: transform .3s; transition: transform .3s, -webkit-transform .3s; } #mainContents .cl-dance__body .scale { -webkit-transition: -webkit-transform .3s; transition: -webkit-transform .3s; transition: transform .3s; transition: transform .3s, -webkit-transform .3s; } @media screen and (min-width: 768px) { #mainContents .cl-dance__body { width: 280px; border-radius: 30px; } } @media screen and (max-width: 767px) { #mainContents .cl-dance__body { width: 48vw; border-radius: 5.33333vw; } } #mainContents .cl-dance__pagination { font-size: 0; text-align: center; } #mainContents .cl-dance__pagination span { opacity: 1; border-radius: 50vw; background: rgba(0, 0, 0, .05); } #mainContents .cl-dance__pagination span.swiper-pagination-bullet-active { background: #d4000f; } @media screen and (min-width: 768px) { #mainContents .cl-dance__pagination { display: none; margin-top: 64px; } #mainContents .cl-dance__pagination span { width: 12px; height: 12px; margin: 0 5px; } } @media screen and (max-width: 767px) { #mainContents .cl-dance__pagination { margin-top: 15.46667vw; } #mainContents .cl-dance__pagination span { width: 3.2vw; height: 3.2vw; margin: 0 1.33333vw; } } #mainContents .cl-finish { position: relative; background-image: url('../img/txt_finish_00.svg'); background-repeat: no-repeat; } @media screen and (min-width: 768px) { #mainContents .cl-finish { margin-top: 35px; background-position: center top; background-size: 903px; } } @media screen and (max-width: 767px) { #mainContents .cl-finish { z-index: 1; background-position: center 130.66667vw; background-size: 57.6vw; } } @media screen and (min-width: 768px) { #mainContents .cl-finish .cl-anchor a { top: -55px; } } @media screen and (min-width: 768px) { #mainContents .cl-finish__inner { width: 966px; margin: 0 auto; padding: 120px 0 76px; } } @media screen and (max-width: 767px) { #mainContents .cl-finish__inner { padding: 16vw 8vw 26.66667vw; } } #mainContents .cl-finish__hdg span { display: block; margin: 0 auto; } @media screen and (min-width: 768px) { #mainContents .cl-finish__hdg span { width: 800px; } #mainContents .cl-finish__hdg span ~ span { width: 467px; margin: 25px auto 20px; } } @media screen and (max-width: 767px) { #mainContents .cl-finish__hdg span { margin-inline: auto; } #mainContents .cl-finish__hdg span:nth-child(2) { width: calc(199/335 * 100%); margin-top: 4vw; margin-bottom: 4vw; } } #mainContents .cl-finish__sub { margin-inline: auto; } @media screen and (min-width: 768px) { #mainContents .cl-finish__sub { width: 420px; } } @media screen and (max-width: 767px) { #mainContents .cl-finish__sub { width: calc(280/335 * 100%); } } @media screen and (min-width: 768px) { #mainContents .cl-finish__wrap { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; width: 818px; margin: 90px auto 0; -webkit-box-pack: justify; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; } } @media screen and (max-width: 767px) { #mainContents .cl-finish__wrap { margin-top: 10.93333vw; } } @media screen and (min-width: 768px) { #mainContents .cl-finish__img { width: 240px; } } @media screen and (max-width: 767px) { #mainContents .cl-finish__img { width: 44.26667vw; margin: 0 auto 11.2vw; } } @media screen and (min-width: 768px) { #mainContents .cl-finish__txt p { font-size: 18px; line-height: 1.77778; } #mainContents .cl-finish__txt p ~ p { margin-top: 32px; } } @media screen and (max-width: 767px) { #mainContents .cl-finish__txt h2 { margin: 10.93333vw 0 8vw; } #mainContents .cl-finish__txt p { font-size: 4.26667vw; line-height: 1.875; } #mainContents .cl-finish__txt p ~ p { margin-top: 8vw; } } #mainContents .cl-finish__ttl01 { width: 593px; margin: 79px auto; } @media screen and (max-width: 767px) { #mainContents .cl-finish__ttl01 { width: 100%; margin: 17.6vw auto 8vw; } } #mainContents .cl-finish__ttl02 { width: 271px; margin: 0 auto; } @media screen and (max-width: 767px) { #mainContents .cl-finish__ttl02 { width: 34.66667vw; } } #mainContents .cl-finish__box { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; width: 800px; margin: 41px auto 0; text-align: center; } @media screen and (max-width: 767px) { #mainContents .cl-finish__box { display: block; width: 100%; margin-top: 10.66667vw; } } #mainContents .cl-finish__box .box-item { width: 50%; } @media screen and (max-width: 767px) { #mainContents .cl-finish__box .box-item { width: 100%; } #mainContents .cl-finish__box .box-item + .box-item { margin-top: 17.33333vw; } } #mainContents .cl-finish__box .box-item__img { display: inline-block; } #mainContents .cl-finish__box .box-item__img.img01 { width: 353px; } @media screen and (max-width: 767px) { #mainContents .cl-finish__box .box-item__img.img01 { width: 100%; } } #mainContents .cl-finish__box .box-item__img.img02 { width: 195px; margin-top: 10px; } @media screen and (max-width: 767px) { #mainContents .cl-finish__box .box-item__img.img02 { width: 46.13333vw; margin-top: 0; } } #mainContents .cl-finish__box .box-item__ttl { display: inline-block; } #mainContents .cl-finish__box .box-item__ttl.ttl01 { width: 379px; margin: 40px 0 22px; } @media screen and (max-width: 767px) { #mainContents .cl-finish__box .box-item__ttl.ttl01 { width: 100%; margin: 10.66667vw 0 7.73333vw; } } #mainContents .cl-finish__box .box-item__ttl.ttl02 { width: 287px; margin: 49px 0 24px; } @media screen and (max-width: 767px) { #mainContents .cl-finish__box .box-item__ttl.ttl02 { width: 61.33333vw; margin: 9.6vw 0 8vw; } } #mainContents .cl-finish__box .box-item__copy { font-size: 18px; line-height: 1.77777778; } #mainContents .cl-finish__box .box-item__copy p ~ p { margin-top: 12px; } #mainContents .cl-finish__box .box-item__copy .txt-note { font-size: 12px; } @media screen and (max-width: 767px) { #mainContents .cl-finish__box .box-item__copy { font-size: 4.26667vw; line-height: 1.875; } #mainContents .cl-finish__box .box-item__copy p ~ p { margin-top: 2.4vw; } #mainContents .cl-finish__box .box-item__copy .txt-note { font-size: 3.2vw; } } #mainContents .cl-detail { background: #fcf9f0; } @media screen and (min-width: 768px) { #mainContents .cl-detail { margin-top: 77px; padding: 80px 0 60px; border-radius: 32px; } } @media screen and (max-width: 767px) { #mainContents .cl-detail { overflow: hidden; margin-top: 9.33333vw; padding: 9.33333vw 0; border-radius: 8.53333vw; } } #mainContents .cl-detail__hdg { margin: 0 auto; } @media screen and (min-width: 768px) { #mainContents .cl-detail__hdg { width: 584px; margin-bottom: 35px; } } @media screen and (max-width: 767px) { #mainContents .cl-detail__hdg { width: 69.33333vw; margin-bottom: 12.26667vw; } } #mainContents .cl-detail__img { margin: 0 auto; } @media screen and (min-width: 768px) { #mainContents .cl-detail__img { width: 592px; } } @media screen and (max-width: 767px) { #mainContents .cl-detail__img { -webkit-transform: scale(1.14); transform: scale(1.14); } } #mainContents .cl-detail__txt { text-align: center; } @media screen and (min-width: 768px) { #mainContents .cl-detail__txt { font-size: 16px; line-height: 1.5; } } @media screen and (max-width: 767px) { #mainContents .cl-detail__txt { font-size: 3.46667vw; line-height: 1.84615; margin-top: 2.66667vw; } } #mainContents .cl-lineup { position: relative; background-color: #fcf9f0; background-repeat: no-repeat; background-position: center top; background-size: cover; } @media screen and (min-width: 768px) { #mainContents .cl-lineup { padding-top: 17.29167vw; padding-bottom: 15.97222vw; background-image: url('../img/bg_lineup_02_pc.png'); } } @media screen and (max-width: 767px) { #mainContents .cl-lineup { padding-top: 40.26667vw; padding-bottom: 36.8vw; background-image: url('../img/bg_lineup_02_sp.png'); } } @media screen and (min-width: 768px) { #mainContents .cl-lineup .cl-anchor a { top: -130px; } } @media screen and (max-width: 767px) { #mainContents .cl-lineup__inner { padding: 0 8vw 9vw; } } #mainContents .cl-lineup .cl-mask__bottom { position: absolute; bottom: 0; } @media screen and (min-width: 768px) { #mainContents .cl-lineup__hdg { width: 403px; margin: 60px auto; } } @media screen and (max-width: 767px) { #mainContents .cl-lineup__hdg { width: 64.53333vw; margin: 0 auto 17.33333vw; } } #mainContents .cl-lineup__list { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: end; -webkit-align-items: flex-end; -ms-flex-align: end; align-items: flex-end; } #mainContents .cl-lineup__list li { text-align: center; letter-spacing: .06em; } #mainContents .cl-lineup__list img { display: block; } @media screen and (min-width: 768px) { #mainContents .cl-lineup__list { margin-bottom: 65px; } #mainContents .cl-lineup__list li { font-size: 20px; width: 140px; } #mainContents .cl-lineup__list li ~ li { margin-left: 140px; } #mainContents .cl-lineup__list img { margin-bottom: 28px; } } @media screen and (max-width: 767px) { #mainContents .cl-lineup__list { margin-bottom: 16vw; } #mainContents .cl-lineup__list li { font-size: 4.26667vw; width: 33.3333%; } #mainContents .cl-lineup__list img { width: 18.66667vw; margin: 0 auto 4.8vw; } } @media screen and (max-width: 767px) { #mainContents .cl-lineup__btn { width: 73.33333vw; margin: 0 auto; } } #mainContents .cl-campaign { background: #fcf9f0; } @media screen and (min-width: 768px) { #mainContents .cl-campaign .cl-anchor a { top: -80px; } } @media screen and (min-width: 768px) { #mainContents .cl-campaign__inner { width: 800px; margin: 0 auto; padding: 113px 0 100px; } } @media screen and (max-width: 767px) { #mainContents .cl-campaign__inner { padding: 13.33333vw 8vw 21.33333vw; } } #mainContents .cl-campaign__hdg { margin: 0 auto; } @media screen and (min-width: 768px) { #mainContents .cl-campaign__hdg { width: 332px; margin-bottom: 60px; } } @media screen and (max-width: 767px) { #mainContents .cl-campaign__hdg { width: 52.26667vw; margin-bottom: 16vw; } } #mainContents .cl-campaign__list li { overflow: hidden; background: #fff; } @media screen and (min-width: 768px) { #mainContents .cl-campaign__list li ~ li { margin-top: 60px; } } @media screen and (max-width: 767px) { #mainContents .cl-campaign__list li ~ li { margin-top: 13.33333vw; } } @media screen and (min-width: 768px) { #mainContents .cl-campaign__txt { font-size: 14px; line-height: 1.74; margin: 24px 0 22px; text-align: center; } #mainContents .cl-campaign__txt strong { font-size: 26px; } } @media screen and (max-width: 767px) { #mainContents .cl-campaign__txt { font-size: 3.73333vw; line-height: 1.78571; padding: 4.26667vw 5.33333vw 5.86667vw; } #mainContents .cl-campaign__txt strong { font-size: 5.86667vw; line-height: 2; } } @media screen and (min-width: 768px) { #mainContents .cl-campaign__btn { padding-bottom: 30px; } } @media screen and (max-width: 767px) { #mainContents .cl-campaign__btn { padding: 0 5.33333vw 8vw; } } #mainContents .cl-campaign__movie { position: relative; -webkit-transition: scale .3s; transition: scale .3s; } #mainContents .cl-campaign__movie:hover { scale: 1.1; } #mainContents .cl-campaign__movie .icon-play:before { position: absolute; z-index: 5; top: 50%; left: 50%; display: -webkit-inline-box; display: -webkit-inline-flex; display: -ms-inline-flexbox; display: inline-flex; width: 110px; height: 110px; margin-top: -55px; margin-left: -55px; content: ''; -webkit-animation: rotate-animation 10s infinite linear; animation: rotate-animation 10s infinite linear; background: url('../img/icons/icon-play-rotate.svg') no-repeat center center; background-size: 100%; } @media screen and (min-width: 768px) { #mainContents .cl-campaign__movie .icon-play:before { scale: 1.7083; } } @media screen and (max-width: 767px) { #mainContents .cl-campaign__movie .icon-play:before { width: 80px; height: 80px; margin-top: -40px; margin-left: -40px; background: url('../img/icons/icon-play-rotate_sp.svg') no-repeat center center; } } #mainContents .cl-campaign__movie .icon-play:after { position: absolute; z-index: 5; top: 50%; left: 50%; display: -webkit-inline-box; display: -webkit-inline-flex; display: -ms-inline-flexbox; display: inline-flex; content: ''; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); background: url('../img/icons/icon-play-olygon.svg') no-repeat center center; background-size: 100%; } @media screen and (min-width: 768px) { #mainContents .cl-campaign__movie .icon-play:after { width: 26px; height: 19px; } } @media screen and (max-width: 767px) { #mainContents .cl-campaign__movie .icon-play:after { width: 18px; height: 12px; } } #mainContents .cl-banner { background: #fff; } #mainContents .cl-banner .cl-mask__top { background-color: #fcf9f0; } #mainContents .cl-banner .cl-mask__top img { margin-top: 1px; margin-bottom: -1px; } @media screen and (min-width: 768px) { #mainContents .cl-banner__inner { width: 480px; margin: 0 auto; padding: 83px 0 100px; } } @media screen and (max-width: 767px) { #mainContents .cl-banner__inner { padding: 16vw 8vw calc(21.33333vw - 68px); } } #mainContents .cl-statement { position: relative; z-index: 1; } #mainContents .cl-statement__inner { position: relative; z-index: 10; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; width: 100%; max-width: 1440px; margin: 0 auto; } @media screen and (max-width: 767px) { #mainContents .cl-statement__inner { z-index: 35; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; padding: 0 0 0 8vw; } } #mainContents .cl-statement__hdg { position: relative; max-width: 720px; } @media screen and (max-width: 767px) { #mainContents .cl-statement__hdg { max-width: 100%; } } @media screen and (max-width: 767px) { #mainContents .cl-statement__hdg .w-sp { max-width: 110%; } } #mainContents .cl-statement__hdg .cl-lyrics { position: absolute; top: 102px; right: 10px; width: 193px; cursor: pointer; -webkit-transition: -webkit-transform 1s; transition: -webkit-transform 1s; transition: transform 1s; transition: transform 1s, -webkit-transform 1s; pointer-events: unset !important; } #mainContents .cl-statement__hdg .cl-lyrics .rotate { -webkit-animation: rotate-animation 10s infinite linear; animation: rotate-animation 10s infinite linear; } #mainContents .cl-statement__hdg .cl-lyrics .fixed { position: absolute; top: 0; right: 0; width: 193px; } @media screen and (max-width: 767px) { #mainContents .cl-statement__hdg .cl-lyrics .fixed { width: 113px; } } #mainContents .cl-statement__hdg .cl-lyrics:hover { -webkit-transform: scale(1.1); transform: scale(1.1); } @media screen and (max-width: 767px) { #mainContents .cl-statement__hdg .cl-lyrics { top: unset; right: 40px; bottom: 165px; width: 113px; } } #mainContents .cl-statement__img { max-width: 698px; margin-top: 102px; } @media screen and (max-width: 767px) { #mainContents .cl-statement__img { position: relative; top: auto; right: 14.13333vw; width: 118.4vw; max-width: 118.4vw; margin-top: 5.6vw; } } #mainContents .cl-statement__bottom { margin-top: -248px; margin-bottom: -100px; } @media screen and (max-width: 767px) { #mainContents .cl-statement__bottom { width: 133.6vw; margin-top: -12.53333vw; margin-left: -16.8vw; } } #mainContents .cl-statement__video { position: relative; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; overflow: hidden; margin-top: -11.11111vw; padding: unset; } @media screen and (max-width: 767px) { #mainContents .cl-statement__video { margin-top: 2.66667vw; } } #mainContents .cl-statement__video a .icon-play:before { position: absolute; z-index: 5; top: 50%; left: 50%; display: -webkit-inline-box; display: -webkit-inline-flex; display: -ms-inline-flexbox; display: inline-flex; width: 190px; height: 190px; margin-top: -95px; margin-left: -95px; content: ''; -webkit-animation: rotate-animation 10s infinite linear; animation: rotate-animation 10s infinite linear; background: url('../img/icons/icon-play-rotate.svg') no-repeat center center; background-size: 100%; } @media screen and (max-width: 767px) { #mainContents .cl-statement__video a .icon-play:before { width: 80px; height: 80px; margin-top: -40px; margin-left: -40px; background: url('../img/icons/icon-play-rotate_sp.svg') no-repeat center center; } } #mainContents .cl-statement__video a .icon-play:after { position: absolute; z-index: 5; top: 50%; left: 50%; display: -webkit-inline-box; display: -webkit-inline-flex; display: -ms-inline-flexbox; display: inline-flex; width: 30px; height: 20px; content: ''; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); background: url('../img/icons/icon-play-olygon.svg') no-repeat center center; background-size: 100%; } @media screen and (max-width: 767px) { #mainContents .cl-statement__video a .icon-play:after { width: 18px; height: 12px; } } #mainContents .cl-statement__video__top { position: absolute; z-index: 5; top: 0; left: 0; width: 100%; } @media screen and (max-width: 767px) { #mainContents .cl-statement__video__top img { margin-top: -1px; } } #mainContents .cl-statement__video__bottom { position: absolute; bottom: -1px; left: 0; width: 100%; } #mainContents .cl-statement__video .new { width: 100%; -webkit-transition: all 1s ease-in-out; transition: all 1s ease-in-out; } #mainContents .cl-statement__video .new:hover { -webkit-transform: scale(1.1); transform: scale(1.1); } @-webkit-keyframes rotate-animation { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 50% { -webkit-transform: rotate(180deg); transform: rotate(180deg); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes rotate-animation { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 50% { -webkit-transform: rotate(180deg); transform: rotate(180deg); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @media screen and (min-width: 768px) { #mainContents .cl-tvcm__inner { width: 820px; margin: 0 auto; padding: 0 0 80px; } } @media screen and (max-width: 767px) { #mainContents .cl-tvcm__inner { padding: 8vw 8vw 23.46667vw; } } #mainContents .cl-tvcm__card { position: relative; } #mainContents .cl-tvcm__card::after, #mainContents .cl-tvcm__card a::after { position: absolute; pointer-events: none; } #mainContents .cl-tvcm__card a::after { top: 0; left: 0; width: 100%; height: 100%; content: ''; -webkit-transition: -webkit-transform .3s; transition: -webkit-transform .3s; transition: transform .3s; transition: transform .3s, -webkit-transform .3s; background: url('../img/ico_play_01.svg') no-repeat center center; background-size: 1em; } #mainContents .cl-tvcm__card a.play-new::after { display: none; } #mainContents .cl-tvcm__card a.play-new .icon-play:before { position: absolute; z-index: 5; top: 50%; left: 50%; display: -webkit-inline-box; display: -webkit-inline-flex; display: -ms-inline-flexbox; display: inline-flex; width: 182px; height: 182px; margin-top: -91px; margin-left: -91px; content: ''; -webkit-animation: rotate-animation 10s infinite linear; animation: rotate-animation 10s infinite linear; background: url('../img/icons/icon-play-rotate.svg') no-repeat center center; background-size: 100%; } @media screen and (max-width: 767px) { #mainContents .cl-tvcm__card a.play-new .icon-play:before { width: 90px; height: 90px; margin-top: -45px; margin-left: -45px; background: url('../img/icons/icon-play-rotate_sp.svg') no-repeat center center; } } #mainContents .cl-tvcm__card a.play-new .icon-play:after { position: absolute; z-index: 5; top: 50%; left: 50%; display: -webkit-inline-box; display: -webkit-inline-flex; display: -ms-inline-flexbox; display: inline-flex; width: 27px; height: 20px; content: ''; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); background: url('../img/icons/icon-play-olygon.svg') no-repeat center center; background-size: 100%; } @media screen and (max-width: 767px) { #mainContents .cl-tvcm__card a.play-new .icon-play:after { width: 18px; height: 12px; } } @media screen and (min-width: 768px) { #mainContents .cl-tvcm__card { width: 820px; } #mainContents .cl-tvcm__card::after { font-size: 80px; top: -37px; right: -40px; } #mainContents .cl-tvcm__card a::after { font-size: 80px; } #mainContents .cl-tvcm__card a:hover::after { -webkit-transform: scale(1.2); transform: scale(1.2); } #mainContents .cl-tvcm__card:hover .cl-tvcm__body .scale { -webkit-transform: scale(1.1); transform: scale(1.1); } } @media screen and (max-width: 767px) { #mainContents .cl-tvcm__card { width: 81.6vw; margin: 0 auto; } #mainContents .cl-tvcm__card::after { font-size: 12.26667vw; top: -2.13333vw; right: -6.4vw; } #mainContents .cl-tvcm__card a::after { font-size: 16vw; } } #mainContents .cl-tvcm__foot { position: absolute; left: 0; width: 100%; -webkit-transition: -webkit-transform .3s; transition: -webkit-transform .3s; transition: transform .3s; transition: transform .3s, -webkit-transform .3s; text-align: center; text-indent: -.5em; } @media screen and (min-width: 768px) { #mainContents .cl-tvcm__foot { font-size: 20px; line-height: 1.52381; top: calc(100% + 25px); } } @media screen and (max-width: 767px) { #mainContents .cl-tvcm__foot { font-size: 4.26667vw; line-height: 1.5; top: calc(100% + 5.33333vw); } } #mainContents .cl-tvcm__body { overflow: hidden; -webkit-transition: -webkit-transform .3s; transition: -webkit-transform .3s; transition: transform .3s; transition: transform .3s, -webkit-transform .3s; } #mainContents .cl-tvcm__body .scale { -webkit-transition: -webkit-transform .3s; transition: -webkit-transform .3s; transition: transform .3s; transition: transform .3s, -webkit-transform .3s; } @media screen and (min-width: 768px) { #mainContents .cl-tvcm__body { width: 100%; border-radius: 17px; } } @media screen and (max-width: 767px) { #mainContents .cl-tvcm__body { width: 81.6vw; border-radius: 2.13333vw; } } @media print { .no-print { background-image: none !important; } .no-print *::before, .no-print *::after { background-image: none !important; } img.no-print { visibility: hidden !important; } } #mainContents .cl-jokkikan__inner .cl-jokkikan__hdg{ margin: 3rem 0 auto; text-align: center; } @media screen and (min-width: 768px) { #mainContents .cl-jokkikan__inner .cl-jokkikan__hdg{ margin: 60px auto; } } @media screen and (min-width: 768px) { #mainContents .cl-jokkikan__inner .cl-jokkikan__hdg a{ max-width: 680px; } } @media screen and (max-width: 767px) { #mainContents .cl-jokkikan__inner .cl-jokkikan__hdg a{ width: 80%; } }