@charset "UTF-8"; :root { --clip: 100%; } img { vertical-align: bottom !important; } /* loading -------------------- */ .l-loading { visibility: visible; z-index: 999; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: #ffcc00; text-align: center; -webkit-clip-path: circle(var(--clip) at 50% 50%); clip-path: circle(var(--clip) at 50% 50%); opacity: 1; } .l-loading_bg { -webkit-animation: rotateLoop 10s linear infinite; animation: rotateLoop 10s linear infinite; } .l-loading_logo_img { position: absolute; top: 50%; left: 50%; width: 8.05271vw; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .l-loading_logo_img_wrapper { visibility: hidden; position: absolute; top: 50%; left: 50%; width: 19.76574vw; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); opacity: 0; } /* kv -------------------- */ .l-kv { overflow: hidden; border-bottom: 3px solid #000; } .l-kv_wrapper { position: relative; background: #ffe900; height: 49.63vw; } .l-kv img { display: block; width: 100%; height: auto; } .l-kv_wrap { transform: scale(0); width: 100%; height: 49.63vw; } .l-kv_wrap::before { content: ""; position: absolute; top: 0; bottom: 0; left: 0; right: 0; width: 100%; height: 49.63vw; background:url("/img/l-kv_pkg_bg_pc.jpg") no-repeat center; background-size: 100vw auto; z-index: 0; } .l-kv_attention { position: absolute; top: -2.9vw; bottom: 0; left: 0; right: 0; width: 100vw; height: auto; margin: 0 auto; z-index: 0; transform:translate3d(0,0,0); } .l-kv_attention_img { position: absolute; top: -2.9vw; bottom: 0; left: 0; right: 0; width: 100vw; height: auto; margin: 0 auto; background: url("/img/l-kv_bg_pc.png") no-repeat center; background-size: 144.14vw auto; } .l-kv_steam { content: ""; position: absolute; top: -2.9vw; bottom: 0; left: 0; right: 0; width: 100vw; height: auto; margin: 0 auto; background-blend-mode: screen; mix-blend-mode: screen; z-index: 1; transform:translate3d(0,0,0); } .l-kv_steam_img { content: ""; position: absolute; top: -2.9vw; bottom: 0; left: 0; right: 0; width: 100vw; height: auto; background:url("/img/l-kv_steam.png") no-repeat center; background-size: 100vw auto; background-blend-mode: screen; mix-blend-mode: screen; margin: 0 auto; opacity: 0; } .l-kv_copy { position: relative; width: 67.789vw; margin: 0 auto; padding: .6% 0 0; z-index: 3; } .l-kv_copy img{ transform: scale(0); } .l-kv_pkg { position: relative; width: 20vw; margin: 2.1% 0 0 3.7%; inset: 0; z-index: 2; } .l-kv_spoon{ position: absolute; right: -11.932vw; bottom: 3.891vw; width: 52.08%; z-index: 2; } .l-kv_txt01, .l-kv_txt02, .l-kv_txt02::before, .l-kv_txt02 img{ position: absolute; opacity: 0; z-index: 2; } .l-kv_txt01 { top: 2.56vw; left: 5.6vw; width: 16.69vw; } .l-kv_txt02 { width: 13.469vw; top: 2.379vw; right: 8.7%; } .l-kv_txt02::before { content: ""; background:url("/img/l-kv_txt02_steam.png") no-repeat center center; background-size: cover; width: 13.469vw; height: 13.469vw; display: block; top: 0; left: 0; } .l-kv_note{ position: absolute; width: 18.74vw; height: auto; bottom: 0; right: 0; z-index: 2; } /* kv animation -------------------- */ .is-aniAact .l-kv_wrap { animation: kv01 .2s forwards; } @keyframes kv01 { 0% { opacity: 0; transform: translateY(100%) scale(0, 0); } 100% { opacity: 1; transform: translateY(0) scale(1, 1); } } .is-aniAact .l-kv_attention_img { animation: kvBg 1.1s linear infinite; } @keyframes kvBg { 0%{transform: scale(1.1) rotate(2deg);} 1%,20%{transform: scale(1);} 21%,50%{transform: scale(1.1) rotate(3deg);} 51%,70%{transform: scale(1.1)} 71%,100%{transform: scale(1.1)} } .is-aniAact .l-kv_steam_01_img { position: absolute; right: 0; animation: kvS01 4s infinite linear; } @keyframes kvS01 { 0% { bottom:-50%; /* filter: blur(5%); */ transform: rotateY(0deg); transform: scale(1, 1.4); opacity:0; } 33% { transform: rotateY(4deg); transform: scale(1, 1.6); opacity: 0.6; } 66% { transform: rotateY(10deg); } 100% { bottom: 0; /* filter: blur(20%); */ transform: rotateY(6deg); /* transform: scale(2, 2); */ opacity: 0; } } .is-aniAact .l-kv_steam_02_img{ position: absolute; left: 0; animation: kvS02 4s infinite linear 2s; opacity: 0; } @keyframes kvS02 { 0% { bottom: -50%; /* filter: blur(5%); */ transform: rotateY(0deg); transform: scale(1, 1); opacity:0; } 33% { transform: rotateY(4deg); transform: scale(1, 1.5); opacity: .6; } 66% { transform: rotateY(2deg); /* transform: scale(1.2, 1.6) */ } 100% { bottom: 0; /* filter: blur(11%); */ transform: rotateY(5deg); /* transform: scale(1.4, 1.8); */ opacity: 0; } } .is-aniAact .l-kv_steam_03_img{ position: absolute; left: 0; animation: kvS03 6s infinite linear 4s; opacity: 0; } @keyframes kvS03 { 0% { bottom: -50%; /* filter: blur(10%); */ transform: rotateY(0deg); transform: scale(1, 1); opacity: 0; } 33% { transform: rotateY(4deg); transform: scale(1, 1.2); opacity: 0.5; } 66% { transform: rotateY(2deg); /* transform: scale(1.2, 1.4) */ } 100% { bottom: 0; /* filter: blur(20%); */ transform: rotateY(5deg); /* transform: scale(1.4, 1.6); */ opacity: 0; } } .is-aniAact .l-kv_txt01 { animation: kvTxt01 .5s forwards; opacity: 1; } @keyframes kvTxt01 { 0% { opacity: 0; transform: scale(.5); } 50% { transform:scale(1.1); } 100% { opacity: 1; transform: scale(1); } } .is-aniAact .l-kv_txt01 img{ animation: kvTxt01Img 1.5s infinite; } @keyframes kvTxt01Img { 0%{ transform: translateY(0); } 25%,30%,75% { transform: translateY(5%) rotate(-3deg) scale(.95); } 45%,50%,90% { transform: translateY(0) rotate(0); } 100%{ transform: translateY(0); } } .is-aniAact .l-kv_txt02 { animation: kvTxt02 5s infinite .5s; opacity: 1; transform-origin: bottom right; } .is-aniAact .l-kv_txt02::before { animation: kvTxt02be 1s infinite; } @keyframes kvTxt02be { 0% ,100%{ transform: translate(0, 0); opacity: 1; } 40% { transform: translate(-2%, -5%); opacity: 1; } 60% { transform: translate(0%, 2%); opacity: 1; } 80% { transform: translate(-2%, -10%); opacity: 1; } } .is-aniAact .l-kv_txt02 img{ animation: kvTxt02Img .5s forwards; } @keyframes kvTxt02Img { 0% { opacity: 0; transform: scale(0, 0); } 100% { opacity: 1; transform: scale(1, 1); } } .is-aniAact .l-kv_copy img{ animation: kvCopyImg .2s forwards .5s; } @keyframes kvCopyImg { 0% { opacity: 0; transform: scale(0, 0); } 100% { opacity: 1; transform: scale(1, 1); } } .is-aniAact .l-kv_pkg { animation: kvPkg 3s infinite ease-in-out alternate; } @keyframes kvPkg { 0% { transform: translate(0, 0) rotate(0deg); } 25% { transform: translate(0, 0) rotate(0deg); } 30% { transform: translate(0, 0) rotate(-3deg); } 35% { transform: translate(0, -5%) rotate(0deg); } 40% { transform: translate(0, -5%) rotate(3deg); } 45% { transform: translate(1px, 0) rotate(-2deg); } 50% { transform: translate(0, -5%) rotate(0deg); } 55% { transform: translate(0, 0) rotate(3deg); } 60% { transform: translate(0, 0) rotate(0deg); } 100% { transform: translate(0, 0) rotate(0deg); } } .is-aniAact .l-kv_spoon{ animation: kvSpoon 2.5s ease-in-out infinite; } @keyframes kvSpoon { 0%{ transform: translate(0); } 50%{ transform: translate(-1%,5%) rotate(-4deg); } 100%{ transform: translate(0); } } @media screen and (max-width: 767px) { .l-kv_wrapper { height: 153.4vw; } .l-kv_wrap { width: 100%; z-index: 0; height: 153.4vw; } .l-kv_wrap::before { content: ""; position: absolute; top: 0; bottom: 0; left: 0; right: 0; width: 100%; height: 153.4vw; background:url("/img/l-kv_pkg_bg_sp.jpg") no-repeat center; background-size: 100% 153.4vw; z-index: 0; } .l-kv_attention_img { background:url("/img/l-kv_bg_sp.png") no-repeat center center; background-size: 200% auto; } .l-kv_steam_img { background-size: 185vw auto; } .l-kv_copy { position: absolute; padding:0; top: 34.4vw; left: 0; right: 0; width: 95.73%; } .l-kv_pkg { width: 29.733%; margin: 0 auto; padding: 3.733vw 0 0; } .l-kv_spoon{ position: absolute; right: -23.6vw; bottom: 40vw; width: 80%; } .l-kv_txt01 { width: 25.06%; top:7.5%; bottom: 0; left: 6.4%; } .l-kv_txt01 img{ transform: rotate(-3deg); } .l-kv_txt02 { width: 24.266%; right: 4.3%; top: 4.8%; bottom: 0; } .l-kv_txt02::before { content: ""; width: 24.266vw; height: 24.266vw; display: block; top: 0; left: 0; } .l-kv_note{ width: 100%; height: auto; } /* kv animation sp -------------------- */ .is-aniAact .l-kv_steam_01_img { position: absolute; right: 0; animation: kvS01 4s infinite linear; opacity: 0 } @keyframes kvS01 { 0% { bottom:-25%; /* filter: blur(5%); */ transform: rotateY(0deg); transform: scale(1, 1.4); opacity:0; } 33% { transform: rotateY(4deg); transform: scale(1, 1.6); opacity: 0.6; } 66% { transform: rotateY(10deg); } 100% { bottom: 0; /* filter: blur(20%); */ transform: rotateY(6deg); /* transform: scale(2, 2); */ opacity: 0; } } .is-aniAact .l-kv_steam_02_img { position: absolute; left: 0; animation: kvS02 4s infinite linear 2s; opacity: 0; } @keyframes kvS02 { 0% { bottom: -25%; /* filter: blur(5%); */ transform: rotateY(0deg); transform: scale(1, 1); opacity:0; } 33% { transform: rotateY(4deg); transform: scale(1, 1.5); opacity: .5; } 66% { transform: rotateY(2deg); /* transform: scale(1.2, 1.6) */ } 100% { bottom: 0; /* filter: blur(11%); */ transform: rotateY(5deg); /* transform: scale(1.4, 1.8); */ opacity: 0; } } .is-aniAact .l-kv_steam_03_img { position: absolute; left: 0; animation: kvS03 6s infinite linear 4s; opacity: 0; } @keyframes kvS03 { 0% { bottom: -25%; /* filter: blur(10%); */ transform: rotateY(0deg); transform: scale(1, 1); opacity: 0; } 33% { transform: rotateY(4deg); transform: scale(1, 1.2); opacity: 0.6; } 66% { transform: rotateY(2deg); /* transform: scale(1.2, 1.4) */ } 100% { bottom: 0; /* filter: blur(20%); */ transform: rotateY(5deg); /* transform: scale(1.4, 1.6); */ opacity: 0; } } .is-aniAact .l-kv_attention_img { animation: kvBg 1.5s infinite; } @keyframes kvBg { 0%{transform: scale(1.1) rotate(2deg);} 1%,20%{transform: scale(1);} 21%,50%{transform: scale(1.1) rotate(5deg);} 51%,70%{transform: scale(1)} 71%,100%{transform: scale(1.1);} } .is-aniAact .l-kv_txt01 img{ animation: kvTxt01Img 1.5s infinite; transform: rotate(-10deg); } @keyframes kvTxt01Img { 0%{ transform: translate(0) rotate(-10deg); } 25%,30%,75% { transform: translateY(10%) scale(.95) rotate(-13deg); } 45%,50%,90% { transform: translate(0) rotate(-10deg); } 100%{ transform: translate(0) rotate(-10deg); } } .is-aniAact .l-kv_txt02 { transform-origin: top right; } } .l-product { position: relative; padding-top: 5.85652vw; overflow: hidden; background: #ffcc00; } .l-product.is-none .l-product_img_wrapper { visibility: hidden; -webkit-transform: translate(-100%, 0); transform: translate(-100%, 0); opacity: 0; } .l-product_wrapper { margin: 0 auto -2.56223vw; } .l-product_ttl { display: block; z-index: 1; position: relative; width: 16.54466vw; margin: 0 auto; } .l-product_ttl_sub { z-index: 1; position: absolute; top: 7.54026vw; right: 4.61201vw; width: 16.10542vw; } .l-product_btn_link { position: relative; bottom: -1.61054vw; margin: 0 auto; } .l-product_slider_wrapper { width: 62.95754vw; margin: 0 0 0 auto; padding-top: 2.92826vw; padding-bottom: 6.58858vw; padding-left: 2.92826vw; overflow-x: hidden; } .l-product_slider_wrapper .swiper { overflow: visible; } .l-product_slider_wrapper .swiper-slide { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; width: 20.4978vw; } .l-product_slider_wrapper .swiper-slide[data-size="small"] .l-product_slider_item_img { -webkit-transform: scale(0.47); transform: scale(0.47); } .l-product_slider_wrapper .swiper-slide[data-size="large"] .l-product_slider_item_img { -webkit-transform: scale(0.6); transform: scale(0.6); } .l-product_slider_wrapper .swiper-slide .l-product_slider_item { position: relative; } .l-product_slider_wrapper .swiper-slide .l-product_slider_item_img { -webkit-backface-visibility: hidden; max-height: 20.4978vw; -webkit-transform: scale(0.5); transform: scale(0.5); backface-visibility: hidden; -webkit-transition: -webkit-transform .5s; transition: -webkit-transform .5s; transition: transform .5s; transition: transform .5s, -webkit-transform .5s; will-change: transform; } .l-product_slider_wrapper .swiper-slide-active { visibility: visible; margin-right: 0 !important; opacity: 1; } .l-product_slider_wrapper .swiper-slide-active.is-none { visibility: hidden; opacity: 0; } .l-product_slider_wrapper .swiper-slide-prev { visibility: hidden; z-index: 1; opacity: 0; } .l-product_slider_wrapper .swiper-wrapper { -webkit-box-align: center; -ms-flex-align: center; align-items: center; height: auto; } .l-product_slider_wrapper .swiper-controller { display: -webkit-box; display: -ms-flexbox; display: flex; position: relative; top: -2.19619vw; left: -16.10542vw; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; width: 37.84773vw; } .l-product_slider_wrapper .swiper-slide-active .l-product_slider_item { z-index: 1; opacity: 1; } .l-product_slider_wrapper .swiper-slide-active .l-product_slider_item_img { -webkit-backface-visibility: hidden; max-height: 20.4978vw; -webkit-transform: scale(var(--slideScale)); transform: scale(var(--slideScale)); backface-visibility: hidden; } .l-product_slider_wrapper .swiper-slide-active[data-size="small"] .l-product_slider_item_img { -webkit-transform: scale(var(--slideScale)); transform: scale(var(--slideScale)); } .l-product_slider_wrapper .swiper-slide-active[data-size="small"] .l-product_btn_link { bottom: -1.31772vw; } .l-product_slider_wrapper .swiper-slide-active[data-size="large"] .l-product_slider_item_img { -webkit-transform: scale(var(--slideScale)); transform: scale(var(--slideScale)); } .l-product_slider_wrapper .swiper-slide-active[data-size="large"] .l-product_btn_link { bottom: -1.24451vw; } .l-product_slider_wrapper .swiper-button-prev { z-index: 1; position: relative; width: 4.39239vw; height: 4.39239vw; cursor: pointer; } .l-product_slider_wrapper .swiper-button-prev img { position: absolute; top: 1.61054vw; left: 1.1713vw; width: 1.75695vw; -webkit-transform: rotate(-90deg); transform: rotate(-90deg); } .l-product_slider_wrapper .swiper-button-prev::before { display: inline-block; visibility: initial; position: absolute; left: 0; width: 4.39239vw; height: 4.39239vw; border: 2px solid #000; border-radius: 50%; background: #fff100; background-repeat: no-repeat; background-size: contain; content: ''; content: ""; } .l-product_slider_wrapper .swiper-button-next { z-index: 1; position: relative; width: 4.39239vw; height: 4.39239vw; cursor: pointer; } .l-product_slider_wrapper .swiper-button-next img { position: absolute; top: 1.61054vw; left: 1.46413vw; width: 1.75695vw; -webkit-transform: rotate(90deg); transform: rotate(90deg); } .l-product_slider_wrapper .swiper-button-next::before { display: inline-block; visibility: initial; position: absolute; left: 0; width: 4.39239vw; height: 4.39239vw; border: 2px solid #000; border-radius: 50%; background: #fff100; background-repeat: no-repeat; background-size: contain; content: ''; content: ""; } .l-product_slider_img { display: block; margin: 0 auto; } .l-product_slider_img_wrapper { width: min(10.981vw, 15rem); margin-right: min(4.392vw, 6rem); } .l-product_slider_content { width: min(10.981vw, 15rem); } .l-product_slider_prev { position: absolute; top: min(11.347vw, 15.5rem); left: max(-2.196vw, -3rem); width: min(4.392vw, 6rem); height: min(4.392vw, 6rem); } .l-product_slider_prev::before { display: block; z-index: 1; position: absolute; top: 0; left: 0; width: min(4.392vw, 6rem); height: min(4.392vw, 6rem); border-radius: 50%; background: #d82a17; content: ""; cursor: pointer; -webkit-transition: background 0.4s, opacity 0.4s, visibility 0.4s; transition: background 0.4s, opacity 0.4s, visibility 0.4s; } .l-product_slider_prev::after { display: inline-block; visibility: initial; z-index: 1; position: absolute; top: min(1.611vw, 2.2rem); left: min(0.878vw, 1.2rem); width: min(2.343vw, 3.2rem); height: min(0.878vw, 1.2rem); -webkit-transform: rotate(180deg); transform: rotate(180deg); background:url(/load/view.php?a=aHR0cHM6Ly93d3cuY3VycnltZXNoaS5jb20vaW1nL2NvbW1vbi9wLWFycm93X2J0bl93aGl0ZV9yaWdodC5zdmc); background-repeat: no-repeat; background-size: contain; content: ''; cursor: pointer; } .l-product_slider_next { position: absolute; top: min(11.347vw, 15.5rem); right: min(13.909vw, 19rem); width: min(4.392vw, 6rem); height: min(4.392vw, 6rem); } .l-product_slider_next::before { display: block; position: absolute; top: 0; right: 0; width: min(4.392vw, 6rem); height: min(4.392vw, 6rem); border-radius: 50%; background: #d82a17; content: ""; cursor: pointer; -webkit-transition: background 0.4s, opacity 0.4s, visibility 0.4s; transition: background 0.4s, opacity 0.4s, visibility 0.4s; } .l-product_slider_next::after { display: inline-block; visibility: initial; position: absolute; top: min(1.83vw, 2.5rem); right: min(1.098vw, 1.5rem); width: min(2.343vw, 3.2rem); height: min(1.171vw, 1.6rem); background:url(/load/view.php?a=aHR0cHM6Ly93d3cuY3VycnltZXNoaS5jb20vaW1nL2NvbW1vbi9wLWFycm93X2J0bl93aGl0ZV9yaWdodC5zdmc); background-repeat: no-repeat; background-size: contain; content: ''; cursor: pointer; } .l-product_btn_link { display: -webkit-box; display: -ms-flexbox; display: flex; visibility: hidden; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; opacity: 0; } .l-product_btn_wrapper { margin-top: min(4.392vw, 6rem); text-align: right; } .l-product_bg { display: inline-block; visibility: initial; z-index: 0; position: absolute; top: -35vw; left: -7%; width: 114vw; background-repeat: no-repeat; background-size: contain; -webkit-animation: rotateLoop 40s linear infinite; animation: rotateLoop 40s linear infinite; content: ''; will-change: transform; } .l-product_img_wrapper { display: inline-block; visibility: visible; visibility: initial; z-index: 0; position: absolute; top: -6.58858vw; left: -16.83748vw; width: 67.93558vw; height: 39.53148vw; background-repeat: no-repeat; background-size: contain; content: ''; opacity: 1; -webkit-transition: opacity 0.4s, visibility 0.4s, -webkit-transform 0.4s; transition: opacity 0.4s, visibility 0.4s, -webkit-transform 0.4s; transition: opacity 0.4s, visibility 0.4s, transform 0.4s; transition: opacity 0.4s, visibility 0.4s, transform 0.4s, -webkit-transform 0.4s; will-change: tramsform, opacity, visibility, background; } .l-product_chara { position: absolute; top: 34.041vw; right: 12.4451vw; width: 15.37335vw; } .l-product_chara_img { -webkit-transform: scale(0) translateY(100%); transform: scale(0) translateY(100%); } .l-product_chara.is-active .l-product_chara_img { -webkit-animation: bound 0.5s cubic-bezier(0.19, 1, 0.22, 1) forwards; animation: bound 0.5s cubic-bezier(0.19, 1, 0.22, 1) forwards; } /* cm line ---------- */ .l-cm_line { position: relative; width: 100%; height: 0; padding-top: 14.3%; overflow: hidden; background: #fff100; border-top: 3px solid #000; border-bottom: 3px solid #000; } .l-cm_line img { display: block; width: 100%; height: auto; vertical-align: top; } .l-cm_line > div { position: absolute; top: 0; width: 18.4%; } .l-cm_line > div:nth-child(1) { z-index: 2; top: -3.2%; left: -3.7%; transform: rotate(-23deg); animation: linePkg01 6s infinite; } .l-cm_line > div:nth-child(2) { z-index: 1; top: -28%; left: 15.2%; transform: rotate(23deg); animation: linePkg02 10s infinite; } .l-cm_line > div:nth-child(3) { z-index: 1; top: -4%; left: 33%; animation: linePkg03 6s infinite; } .l-cm_line > div:nth-child(4) { top: 7%; left: 51.5%; transform: rotate(-18.5deg); animation: linePkg04 6s infinite; } .l-cm_line > div:nth-child(5) { z-index: 1; top: -5%; left: 69%; transform: rotate(48deg); animation: linePkg05 10s infinite; } .l-cm_line > div:nth-child(6) { top: -59%; left: 86.5%; animation: linePkg06 14s infinite; } @keyframes linePkg01 { 0% { top: -3.2%; transform: rotate(-23deg); } 50% { top: 10%; transform: rotate(50deg); } 100% { top: -3.2%; transform: rotate(-23deg); } } @keyframes linePkg02 { 0% { top: -28%; transform: rotate(23deg); } 50% { top: 20%; transform: rotate(0); } 100% { top: -28%; transform: rotate(23deg); } } @keyframes linePkg03 { 0% { top: -4%; } 25% { top: 40%; } 90% { top: -40%; } 100% { top: -4%; } } @keyframes linePkg04 { 0% { top: 7%; transform: rotate(-18.5deg); } 40% { top: -20%; transform: rotate(20deg); } 100% { top: 7%; transform: rotate(-18.5deg); } } @keyframes linePkg05 { 0% { top: -5%; transform: rotate(48deg); } 70% { top: 15%; transform: rotate(-48deg); } 100% { top: -5%; transform: rotate(48deg); } } @keyframes linePkg06 { 0% { top: -59%; transform: scale(1, 1); } 30% { top: -10%; transform: scale(1.2, 1.2); } 100% { top: -59%; transform: scale(1, 1); } } @media screen and (max-width: 767px) { .l-cm_line { padding-top: 26%; } .l-cm_line > div { width: 19%; } .l-cm_line > div:nth-child(1) { top: 28.8%; left: -4.5%; transform: rotate(-23deg); animation: linePkgSp01 6s infinite; } .l-cm_line > div:nth-child(2) { top: 15%; left: 14.2%; transform: rotate(23deg); animation: linePkgSp02 10s infinite; } .l-cm_line > div:nth-child(3) { top: 28%; left: 33%; animation: linePkgSp03 6s infinite; } .l-cm_line > div:nth-child(4) { top: 35%; left: 53%; transform: rotate(-18.5deg); animation: linePkgSp04 6s infinite; } .l-cm_line > div:nth-child(5) { top: 28%; left: 70.5%; transform: rotate(48deg); animation: linePkgSp05 10s infinite; } .l-cm_line > div:nth-child(6) { top: -2%; left: 89.5%; animation: linePkgSp06 14s infinite; } } @keyframes linePkgSp01 { 0% { top: 28.8%; transform: rotate(-23deg); } 50% { top: -10%; transform: rotate(50deg); } 100% { top: 28.8%; transform: rotate(-23deg); } } @keyframes linePkgSp02 { 0% { top: 15%; transform: rotate(23deg); } 25% { top: 20%; transform: rotate(73deg); } 50% { top: 40%; transform: rotate(-20deg); } 100% { top: 15%; transform: rotate(23deg); } } @keyframes linePkgSp03 { 0% { top: 28%; transform: rotate(0); } 50% { top: -10%; transform: rotate(150deg); } 100% { top: 28%; transform: rotate(360deg); } } @keyframes linePkgSp04 { 0% { top: 35%; transform: rotate(-18.5deg); } 40% { top: -20%; transform: rotate(20deg); } 70% { top: 10%; transform: rotate(270deg); } 100% { top: 35%; transform: rotate(-18.5deg); } } @keyframes linePkgSp05 { 0% { top: 28%; transform: rotate(48deg); } 70% { top: 15%; transform: rotate(-48deg); } 100% { top: 28%; transform: rotate(48deg); } } @keyframes linePkgSp06 { 0% { top: -2%; transform: scale(1, 1); } 30% { top: -10%; transform: scale(1.2, 1.2); } 100% { top: -2%; transform: scale(1, 1); } } /* l-campaign ---------- */ .l-campaign { position: relative; padding-top: 5.12445vw; overflow: hidden; border-bottom: 3px solid #000; background: #ffae00; } .l-campaign_wrapper { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; padding-left: 7.54026vw; overflow: hidden; } .l-campaign_left_ttl { z-index: 1; position: relative; width: 21.96193vw; } .l-campaign_left_ttl_img { width: 100%; height: auto; } .l-campaign_left_ttl_chara { z-index: 1; position: relative; left: -0.73206vw; width: 12.4451vw; margin: 1.46413vw auto 0; } .l-campaign_left_ttl_chara_img { width: 100%; height: auto; } .l-campaign_slider_wrapper { position: relative; width: 70.27818vw; margin: 0 0 0 auto; padding-bottom: 5.12445vw; padding-left: 2.92826vw; overflow: hidden; } .l-campaign_slider_wrapper .swiper { overflow: visible; } .l-campaign_slider_wrapper .swiper-slide { width: 38.79941vw; margin-right: 9.51684vw; } .l-campaign_slider_wrapper .swiper-controller { gap: 35.87116vw; display: -webkit-box; display: -ms-flexbox; display: flex; z-index: 1; position: absolute; top: 50%; left: -38.72621vw; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-transform: translateY(-50%); transform: translateY(-50%); } .l-campaign_slider_wrapper .swiper-controller.is-none { display: none; } .l-campaign_slider_wrapper .swiper-slide-active .l-product_slider_item { z-index: 1; opacity: 1; } .l-campaign_slider_wrapper .swiper-slide-active .l-product_slider_item_img { -webkit-backface-visibility: hidden; -webkit-transform: scale(var(--slideScale)) translateZ(0); transform: scale(var(--slideScale)) translateZ(0); backface-visibility: hidden; } .l-campaign_slider_wrapper .swiper-button-prev { z-index: 1; position: relative; width: 4.39239vw; height: 4.39239vw; cursor: pointer; } .l-campaign_slider_wrapper .swiper-button-prev img { position: absolute; top: 1.61054vw; left: 1.1713vw; width: 1.75695vw; -webkit-transform: rotate(-90deg); transform: rotate(-90deg); } .l-campaign_slider_wrapper .swiper-button-prev::before { display: inline-block; visibility: initial; position: absolute; left: 0; width: 4.39239vw; height: 4.39239vw; border: 2px solid #000; border-radius: 50%; background: #fff100; background-repeat: no-repeat; background-size: contain; content: ''; content: ""; } .l-campaign_slider_wrapper .swiper-button-next { z-index: 1; position: relative; width: 4.39239vw; height: 4.39239vw; cursor: pointer; } .l-campaign_slider_wrapper .swiper-button-next img { position: absolute; top: 1.61054vw; left: 1.46413vw; width: 1.75695vw; -webkit-transform: rotate(90deg); transform: rotate(90deg); } .l-campaign_slider_wrapper .swiper-button-next::before { display: inline-block; visibility: initial; position: absolute; left: 0; width: 4.39239vw; height: 4.39239vw; border: 2px solid #000; border-radius: 50%; background: #fff100; background-repeat: no-repeat; background-size: contain; content: ''; content: ""; } .l-campaign_slider_img { display: block; margin: 0 auto; } .l-campaign_slider_img_wrapper { width: min(10.981vw, 15rem); margin-right: min(4.392vw, 6rem); } .l-campaign_slider_item { display: block; position: relative; padding: 1.31772vw 1.31772vw 0 1.31772vw; border: 2px solid #000; border-radius: 1.46413vw; background: #fff; } .l-campaign_slider_item_img { border-radius: 0.73206vw; } .l-campaign_slider_txt { font-size: 1.02489vw; font-weight: 700; letter-spacing: .04em; line-height: 1.5; text-align: left; } .l-campaign_slider_prev { position: absolute; top: min(11.347vw, 15.5rem); left: max(-2.196vw, -3rem); width: min(4.392vw, 6rem); height: min(4.392vw, 6rem); } .l-campaign_slider_prev::before { display: block; z-index: 1; position: absolute; top: 0; left: 0; width: min(4.392vw, 6rem); height: min(4.392vw, 6rem); border-radius: 50%; background: #d82a17; content: ""; cursor: pointer; -webkit-transition: background 0.4s, opacity 0.4s, visibility 0.4s; transition: background 0.4s, opacity 0.4s, visibility 0.4s; } .l-campaign_slider_prev::after { display: inline-block; visibility: initial; z-index: 1; position: absolute; top: min(1.611vw, 2.2rem); left: min(0.878vw, 1.2rem); width: min(2.343vw, 3.2rem); height: min(0.878vw, 1.2rem); -webkit-transform: rotate(180deg); transform: rotate(180deg); background:url(/load/view.php?a=aHR0cHM6Ly93d3cuY3VycnltZXNoaS5jb20vaW1nL2NvbW1vbi9wLWFycm93X2J0bl93aGl0ZV9yaWdodC5zdmc); background-repeat: no-repeat; background-size: contain; content: ''; cursor: pointer; } .l-campaign_slider_next { position: absolute; top: min(11.347vw, 15.5rem); right: min(13.909vw, 19rem); width: min(4.392vw, 6rem); height: min(4.392vw, 6rem); } .l-campaign_slider_next::before { display: block; position: absolute; top: 0; right: 0; width: min(4.392vw, 6rem); height: min(4.392vw, 6rem); border-radius: 50%; background: #d82a17; content: ""; cursor: pointer; -webkit-transition: background 0.4s, opacity 0.4s, visibility 0.4s; transition: background 0.4s, opacity 0.4s, visibility 0.4s; } .l-campaign_slider_next::after { display: inline-block; visibility: initial; position: absolute; top: min(1.83vw, 2.5rem); right: min(1.098vw, 1.5rem); width: min(2.343vw, 3.2rem); height: min(1.171vw, 1.6rem); background:url(/load/view.php?a=aHR0cHM6Ly93d3cuY3VycnltZXNoaS5jb20vaW1nL2NvbW1vbi9wLWFycm93X2J0bl93aGl0ZV9yaWdodC5zdmc); background-repeat: no-repeat; background-size: contain; content: ''; cursor: pointer; } .l-campaign_btn_link { display: -webkit-box; display: -ms-flexbox; display: flex; position: relative; bottom: -1.24451vw; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; margin: 0 auto; cursor: pointer; } .l-campaign_chara_top_img { visibility: hidden; position: absolute; top: 11.347vw; left: 39.23865vw; width: 12.07906vw; height: auto; opacity: 0; } .l-campaign_chara_top_img.is-active { visibility: visible; -webkit-animation: bound 0.5s cubic-bezier(0.19, 1, 0.22, 1) forwards; animation: bound 0.5s cubic-bezier(0.19, 1, 0.22, 1) forwards; opacity: 1; } .l-campaign_chara_bottom { z-index: 1; position: relative; } .l-campaign_chara_bottom_img { visibility: hidden; position: absolute; bottom: -5.12445vw; width: 13.17716vw; height: auto; opacity: 0; } .l-campaign_chara_bottom_img.is-active { visibility: visible; -webkit-animation: bound 0.5s cubic-bezier(0.19, 1, 0.22, 1) forwards; animation: bound 0.5s cubic-bezier(0.19, 1, 0.22, 1) forwards; opacity: 1; } .l-campaign_scroll_slider { display: -webkit-box; display: -ms-flexbox; display: flex; z-index: 0; position: absolute; bottom: -1rem; } .l-campaign_scroll_slider_img { min-width: 75rem; margin-left: -2px; -webkit-animation: loop 20s linear infinite; animation: loop 20s linear infinite; will-change: transform; } .l-kanzen_wrapper { position: relative; } .l-kanzen_top { position: relative; height: 20vw; background: #0f0964; } .l-kanzen_wrapper { position: relative; } .l-kanzen_top::before, .l-kanzen_top::after { content: ''; display: inline-block; visibility: initial; position: absolute; z-index: 2; top: 50%; width: 16.17862vw; height: 16.17862vw; background:url(/load/view.php?a=aHR0cHM6Ly93d3cuY3VycnltZXNoaS5jb20vaW1nL2wta2FuemVuX2l0ZW1fMDIucG5n) no-repeat top left; background-size: contain; -webkit-transform: translateY(-50%); transform: translateY(-50%); } .l-kanzen_top::before { left: 10.98097vw; animation: doki .8s infinite; } .l-kanzen_top::after { right: 8.93119vw; animation: doki .8s infinite .4s; } @keyframes doki { 0% { transform: translateY(-50%) scale(1, 1); } 50% { transform: translateY(-50%) scale(.7, .7); } 100% { transform: translateY(-50%) scale(1, 1); } } .l-kanzen_top_ttl { width: 43vw; margin: 0 auto; padding-top: 2.5vw; } .l-kanzen_bottom { position: relative; padding-top: 15vw; padding-bottom: 1.5vw; overflow: hidden; background: #fef302; } .l-kanzen_bottom_item { display: -webkit-box; display: -ms-flexbox; display: flex; align-items: flex-start; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; width: 49.78038vw; margin: 0 auto 2.19619vw; } .l-kanzen_bottom_item_img { z-index: 2; position: relative; width: 20.4978vw; } .l-kanzen_bottom_btn { display: -webkit-box; display: -ms-flexbox; display: flex; z-index: 1; position: relative; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; width: 22vw; margin: 0 auto; margin-bottom: 1.46413vw; padding: 1em; border-radius: 2.92826vw; background: #0f0964; -webkit-box-shadow: 0 .73206vw 0 0 #bfb700; box-shadow: 0 .53206vw 0 0 #bfb700; color: #fff100; font-size: 1.31772vw; font-weight: 500; letter-spacing: .08em; line-height: 1.33333; text-align: center; } .l-kanzen_bottom_txt { z-index: 2; position: relative; margin-top: 2.19619vw; color: #0f0964; font-size: 1.02489vw; font-weight: 700; } .l-kanzen_bottom_chara { position: absolute; } .l-kanzen_bottom_chara.is-left_top { top: 0; left: 0; } .l-kanzen_bottom_chara_wrapepr { position: absolute; width: 100%; height: 68rem; } .l-kanzen_bottom_chara_main { z-index: 1; position: absolute; top: 21vw; left: 50%; width: 27.08638vw; -webkit-transform: translateX(-50%); transform: translateX(-50%); } .l-kanzen_bottom_chara_img { z-index: 0; position: absolute; will-change: animation, transform; } .l-kanzen_bottom_chara_img.is-left_top { top: -5.12445vw; left: 13.17716vw; width: 18.30161vw; } .l-kanzen_bottom_chara_img.is-left_top.is-active { -webkit-animation: move_left 15s linear infinite; animation: move_left 15s linear infinite; } .l-kanzen_bottom_chara_img.is-left_middle { top: 8.78477vw; left: -10.98097vw; width: 34.041vw; } .l-kanzen_bottom_chara_img.is-left_middle.is-active { -webkit-animation: move_right 20s linear infinite; animation: move_right 20s linear infinite; } .l-kanzen_bottom_chara_img.is-left_bottom { bottom: 3.66032vw; left: 1.46413vw; width: 13.90922vw; -webkit-transform: rotate(90deg); transform: rotate(90deg); } .l-kanzen_bottom_chara_img.is-left_bottom.is-active { -webkit-animation: move_right 10s linear infinite; animation: move_right 10s linear infinite; } .l-kanzen_bottom_chara_img.is-right_top { top: -8.05271vw; right: 13.17716vw; width: 25.62225vw; } .l-kanzen_bottom_chara_img.is-right_top.is-active { -webkit-animation: move_left 25s linear infinite; animation: move_left 25s linear infinite; } .l-kanzen_bottom_chara_img.is-right_middle { top: 10.2489vw; right: -4.39239vw; width: 16.83748vw; } .l-kanzen_bottom_chara_img.is-right_middle.is-active { -webkit-animation: move_left 17s linear infinite; animation: move_left 17s linear infinite; } .l-kanzen_bottom_chara_img.is-right_bottom { right: 11.71303vw; bottom: -2.19619vw; width: 21.22987vw; -webkit-transform: rotate(-12deg); transform: rotate(-12deg); } .l-kanzen_bottom_chara_img.is-right_bottom.is-active { -webkit-animation: move_right 12s linear infinite; animation: move_right 12s linear infinite; } .l-sns { position: relative; padding-top: 13.17716vw; padding-bottom: 16.10542vw; overflow: hidden; } .l-sns_wrapper { width: 50%; margin: 0 auto 0 0; } .l-sns_list_wrapper { display: -webkit-box; display: -ms-flexbox; display: flex; position: absolute; top: 13.17716vw; left: calc(50% + 10.2vw); -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; width: 10.2489vw; -webkit-transform: translateX(-50%); transform: translateX(-50%); } .l-sns_list_link { width: 3.73353vw; padding-top: 0.1rem; cursor: pointer; } @media screen and (min-width: 768px) { .l-sns_list:nth-child(2) .l-sns_list_link { width: 3.2vw; } } .l-sns_bg { display: inline-block; visibility: initial; z-index: 0; position: absolute; top: -44vw; left: -9%; width: 118vw; background: #ffcc00; background-repeat: no-repeat; background-size: contain; -webkit-animation: rotateLoop 40s linear infinite; animation: rotateLoop 40s linear infinite; content: ''; will-change: transform; } .l-sns_chara_img { visibility: hidden; position: absolute; bottom: 0; left: calc(50% - 21.2vw); width: 27.81845vw; -webkit-transform: translateX(-50%); transform: translateX(-50%); opacity: 0; } .l-sns_chara_img.is-active { visibility: visible; -webkit-animation: bound 0.5s cubic-bezier(0.19, 1, 0.22, 1) forwards; animation: bound 0.5s cubic-bezier(0.19, 1, 0.22, 1) forwards; opacity: 1; } .l-pg_top_btn { visibility: hidden; z-index: 9; position: fixed; right: 1.0981vw; bottom: 1.46413vw; width: 6.58858vw; height: 7.32064vw; text-align: center; opacity: 0; -webkit-transition: visibility 0.5s, -webkit-transform 0.5s cubic-bezier(0.19, 1, 0.22, 1); transition: visibility 0.5s, -webkit-transform 0.5s cubic-bezier(0.19, 1, 0.22, 1); transition: transform 0.5s cubic-bezier(0.19, 1, 0.22, 1), visibility 0.5s; transition: transform 0.5s cubic-bezier(0.19, 1, 0.22, 1), visibility 0.5s, -webkit-transform 0.5s cubic-bezier(0.19, 1, 0.22, 1); } .l-pg_top_btn.is-active { visibility: visible; -webkit-animation: bound 0.5s cubic-bezier(0.19, 1, 0.22, 1); animation: bound 0.5s cubic-bezier(0.19, 1, 0.22, 1); opacity: 1; } .l-pg_top_btn_img { z-index: 1; position: relative; width: 5.49048vw; -webkit-transition: -webkit-transform 0.5s cubic-bezier(0.19, 1, 0.22, 1); transition: -webkit-transform 0.5s cubic-bezier(0.19, 1, 0.22, 1); transition: transform 0.5s cubic-bezier(0.19, 1, 0.22, 1); transition: transform 0.5s cubic-bezier(0.19, 1, 0.22, 1), -webkit-transform 0.5s cubic-bezier(0.19, 1, 0.22, 1); } .l-pg_top_btn_link { display: block; display: inline-block; visibility: initial; position: absolute; left: 0; width: 100%; overflow: hidden; background-repeat: no-repeat; background-size: contain; content: ''; } .l-pg_top_btn_link::after { display: inline-block; visibility: initial; position: absolute; bottom: 0; left: 50%; width: 5.85652vw; height: 5.85652vw; -webkit-transform: translateX(-50%); transform: translateX(-50%); border-radius: 50%; background: #000; background-repeat: no-repeat; background-size: contain; content: ''; } .l-pg_top_btn_txt_img { z-index: 1; position: absolute; bottom: 0; left: 50%; width: 3.14788vw; -webkit-transform: translateX(-50%); transform: translateX(-50%); } @media screen and (max-width: 47.9735em) { .l-loading_logo_img { width: 8rem; } .l-loading_logo_img_wrapper { display: block; width: 17rem; } .l-product { padding-top: 4rem; padding-bottom: 3rem; } .l-product.is-none .l-product_img_wrapper { -webkit-transform: translate(-50%, 100%); transform: translate(-50%, 100%); } .l-product_ttl { width: 14.4rem; } .l-product_ttl_sub { top: 5rem; right: 0; width: 8.6rem; } .l-product_btn_link { bottom: -2.6rem; } .l-product_slider_wrapper { position: relative; top: -2.5rem; width: 100%; margin: 0 auto; padding-top: 0; padding-top: 4.4rem; padding-bottom: 7.2rem; padding-left: 0; } .l-product_slider_wrapper .swiper-slide { width: 100%; } .l-product_slider_wrapper .swiper-slide[data-size="small"] .l-product_slider_item_img { -webkit-transform: scale(0.39); transform: scale(0.39); } .l-product_slider_wrapper .swiper-slide[data-size="large"] .l-product_slider_item_img { -webkit-transform: scale(0.48); transform: scale(0.48); } .l-product_slider_wrapper .swiper-slide .l-product_slider_item_img { max-height: 19.3rem; -webkit-transform: scale(0.44); transform: scale(0.44); } .l-product_slider_wrapper .swiper-slide-active { margin-right: 0; } .l-product_slider_wrapper .swiper-slide-prev { visibility: visible; width: 9.2rem; opacity: 1; } .l-product_slider_wrapper .swiper-slide-next { width: 9.2rem; } .l-product_slider_wrapper .swiper-controller { gap: 0; top: -4.5rem; left: 0; width: 100%; } .l-product_slider_wrapper .swiper-slide-active .l-product_slider_item { position: relative; } .l-product_slider_wrapper .swiper-slide-active .l-product_slider_item_img { max-height: 19.3rem; -webkit-transform: scale(var(--slideScale)); transform: scale(var(--slideScale)); } .l-product_slider_wrapper .swiper-slide-active[data-size="small"] .l-product_slider_item_img { -webkit-transform: scale(var(--slideScale)); transform: scale(var(--slideScale)); } .l-product_slider_wrapper .swiper-slide-active[data-size="small"] .l-product_btn_link { bottom: -2rem; } .l-product_slider_wrapper .swiper-slide-active[data-size="large"] .l-product_slider_item_img { -webkit-transform: scale(var(--slideScale)); transform: scale(var(--slideScale)); } .l-product_slider_wrapper .swiper-slide-active[data-size="large"] .l-product_btn_link { bottom: -.2rem; } .l-product_slider_wrapper .swiper-button-prev { position: absolute; top: -3rem; left: -2.2rem; width: 4.5rem; height: 4.5rem; } .l-product_slider_wrapper .swiper-button-prev img { top: 1.8rem; left: 2.3rem; width: 1.3rem; } .l-product_slider_wrapper .swiper-button-prev::before { width: 4.5rem; height: 4.5rem; } .l-product_slider_wrapper .swiper-button-next { position: absolute; top: -3rem; right: -2.2rem; width: 4.5rem; height: 4.5rem; } .l-product_slider_wrapper .swiper-button-next img { top: 1.8rem; left: .9rem; width: 1.3rem; } .l-product_slider_wrapper .swiper-button-next::before { width: 4.5rem; height: 4.5rem; } .l-product_slider_content { width: 16rem; max-width: 16rem; margin-right: 1rem; } .l-product_slider_prev { top: 8.9rem; left: -1.5rem; width: 4.5rem; height: 4.5rem; } .l-product_slider_next { top: 8.9rem; right: 1.5rem; width: 4.5rem; height: 4.5rem; } .l-product_btn_wrapper { margin-top: 4rem; } .l-product_bg { top: -23vw; left: -45%; width: 187vw; } .l-product_img_wrapper { top: auto; bottom: -29rem; left: 50%; width: 38.5rem; height: 50rem; -webkit-transform: translate(-50%, 0); transform: translate(-50%, 0); } .l-product_chara { display: none; } .l-campaign { padding-top: 4rem; } .l-campaign_wrapper { display: block; padding-left: 0; } .l-campaign_left_ttl { width: 20rem; height: 8.3rem; margin: 0 auto; } .l-campaign_left_ttl_chara { position: absolute; top: 2.4rem; left: 1rem; width: 7.7rem; } .l-campaign_slider_wrapper { position: initial; width: 100%; padding-top: 2rem; padding-bottom: 5.5rem; padding-left: 1rem; } .l-campaign_slider_wrapper.is-center { padding-left: 0; } .l-campaign_slider_wrapper.is-center .swiper-slide { margin: auto; } .l-campaign_slider_wrapper .swiper-slide { width: 30.5rem; margin-right: 1.3rem; } .l-campaign_slider_wrapper .swiper-controller { gap: 0; top: 50%; left: 0; width: 100%; -webkit-transform: translateY(-50%); transform: translateY(-50%); } .l-campaign_slider_wrapper .swiper-slide-active .l-product_slider_item { position: relative; } .l-campaign_slider_wrapper .swiper-button-prev { position: absolute; top: -1rem; left: -3.2rem; width: 4.5rem; height: 4.5rem; } .l-campaign_slider_wrapper .swiper-button-prev img { top: 1.8rem; left: 2.3rem; width: 1.3rem; } .l-campaign_slider_wrapper .swiper-button-prev::before { width: 4.5rem; height: 4.5rem; } .l-campaign_slider_wrapper .swiper-button-next { position: absolute; top: -1rem; right: -2.2rem; width: 4.5rem; height: 4.5rem; } .l-campaign_slider_wrapper .swiper-button-next img { top: 1.8rem; left: .9rem; width: 1.3rem; } .l-campaign_slider_wrapper .swiper-button-next::before { width: 4.5rem; height: 4.5rem; } .l-campaign_slider_item { padding: .9rem .9rem 0 .9rem; border-radius: 1rem; } .l-campaign_slider_item_img { border-radius: 1rem; } .l-campaign_slider_txt { font-size: 1.4rem; } .l-campaign_slider_prev { top: 8.9rem; left: -1.5rem; width: 4.5rem; height: 4.5rem; } .l-campaign_slider_next { top: 8.9rem; right: 1.5rem; width: 4.5rem; height: 4.5rem; } .l-campaign_btn_link { bottom: -1.2rem; } .l-campaign_chara_bottom_img { z-index: 1; right: -1.5rem; bottom: -6rem; width: 15rem; } .l-campaign_scroll_slider_img { min-width: 38.3rem; margin-left: -1px; -webkit-animation: loop 20s linear infinite; animation: loop 20s linear infinite; } .l-kanzen_top { height: 18.5rem; } .l-kanzen_top::before, .l-kanzen_top::after { display: none; } .l-kanzen_top_ttl { width: 35.6rem; padding-top: 3rem; } .l-kanzen_bottom { padding-top: 11.2rem; padding-bottom: 1.2rem; } .l-kanzen_bottom_item { width: 100%; margin-bottom: 3.3rem; padding: 0 1.5rem; } .l-kanzen_bottom_item_img { width: 15.5rem; } .l-kanzen_bottom_btn { width: 28rem; border-radius: 4rem; -webkit-box-shadow: 0 .5rem 0 0 #bfb700; box-shadow: 0 .5rem 0 0 #bfb700; font-size: 1.5rem; } .l-kanzen_bottom_txt { margin-top: 2rem; font-size: 1.2rem; } .l-kanzen_bottom_chara_main { top: 17.2rem; width: 24rem; } .l-sns { padding-top: 4rem; padding-bottom: 23.7rem; } .l-sns_list_wrapper { top: 4rem; left: 50%; width: 18.3rem; -webkit-transform: translateX(-50%); transform: translateX(-50%); } .l-sns_list_link { width: 4rem; } .l-sns_bg { top: -46vw; left: -53%; width: 200vw; } .l-sns_chara_img { left: 29%; width: 22.5rem; } .l-pg_top_btn { right: 1rem; bottom: 1rem; width: 5.5rem; height: 8rem; overflow: hidden; } .l-pg_top_btn_img { top: 1rem; width: 7rem; } .l-pg_top_btn_link { width: 5rem; height: 7rem; overflow: visible; } .l-pg_top_btn_link::after { width: 4.7rem; height: 4.7rem; } .l-pg_top_btn_txt_img { bottom: -.4rem; width: 3rem; } } @media (hover: hover) { .l-product_slider_prev:hover::before { background: #222222; } .l-product_slider_next:hover::before { background: #222222; } .l-campaign_slider_prev:hover::before { background: #222222; } .l-campaign_slider_next:hover::before { background: #222222; } .l-pg_top_btn_link:hover .l-pg_top_btn_img { -webkit-transform: translateY(3rem); transform: translateY(3rem); } } @media screen and (max-width: 75em) { .l-product_slider_prev::before { top: 1rem; } .l-product_slider_prev::after { top: clamp(2.1rem, 2.734vw, 2.5rem); } .l-product_slider_next::before { top: 1rem; } .l-product_slider_next::after { top: clamp(2.4rem, 3.125vw, 2.8rem); } .l-campaign_slider_prev::before { top: 1rem; } .l-campaign_slider_prev::after { top: clamp(2.1rem, 2.734vw, 2.5rem); } .l-campaign_slider_next::before { top: 1rem; } .l-campaign_slider_next::after { top: clamp(2.4rem, 3.125vw, 2.8rem); } .l-campaign_chara_top_img { display: none; } } @media screen and (max-width: 75em) and (max-width: 47.9735em) { .l-product_slider_prev::before { top: 0; left: 0; width: 4.5rem; height: 4.5rem; } .l-product_slider_prev::after { top: 1.7rem; left: 0.8rem; width: 2.6rem; height: 0.8rem; -webkit-transform: rotate(180deg); transform: rotate(180deg); } .l-product_slider_next::before { top: 0; right: 0rem; width: 4.5rem; height: 4.5rem; } .l-product_slider_next::after { top: 1.9rem; right: 0.9rem; width: 2.6rem; height: 0.8rem; } .l-campaign_slider_prev::before { top: 0; left: 0; width: 4.5rem; height: 4.5rem; } .l-campaign_slider_prev::after { top: 1.7rem; left: 0.8rem; width: 2.6rem; height: 0.8rem; -webkit-transform: rotate(180deg); transform: rotate(180deg); } .l-campaign_slider_next::before { top: 0; right: 0rem; width: 4.5rem; height: 4.5rem; } .l-campaign_slider_next::after { top: 1.9rem; right: 0.9rem; width: 2.6rem; height: 0.8rem; } .l-campaign_chara_top_img { display: block; top: 2rem; right: 1rem; left: auto; width: 9rem; } } @media screen and (max-width: 47.9735em) and (max-width: 23.375em) { .l-sns_list_link { padding-top: .3rem; } }