@charset "utf-8"; /* -------（リセットCSS）-----------------------------------------------*/ body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6, pre,form,fieldset,input,textarea,p,blockquote,th,td,header, section, article, footer, article, aside, time ,nav,a,figure{ margin:0; padding:0; } fieldset,img{ border:0; height: auto; } address,caption,cite,code,dfn,em,th,var{ font-style:normal; font-weight:normal; } ol,ul{ list-style:none; } caption,th{ text-align:left; } h1,h2,h3,h4,h5,h6{ font-size:100%; font-weight:normal; } q:before,q:after{ content:''; } abbr,acronym{ border:0; } p{ text-justify:inter-ideograph; margin: 0 0 1em 0; } header, section, article, footer, article, aside, time ,nav { display: block; } figure{ line-height:0;} img { -webkit-touch-callout:none; -webkit-user-select:none; -moz-touch-callout:none; -moz-user-select:none; touch-callout:none; user-select:none; } @charset "utf-8"; *{ box-sizing: border-box;} /* common style */ :root { --sitekey:#f08caa; --siteblack:#646464; --siteyellow:#fac80f; --siteorange:#f09664; --siteblue:#6eb4e6; --fontrobot: 'Roboto Slab','Noto Sans JP',"游ゴシック Medium", "Yu Gothic Medium", "游ゴシック体", YuGothic, sans-serif; } /* =base ------------------------------------------------------------------------------------------*/ body { text-align: center; font-family: 'Noto Sans JP',"游ゴシック Medium", "Yu Gothic Medium", "游ゴシック体", YuGothic, sans-serif; font-weight: 500; font-size: 16px; line-height: 1.5em; /*font-feature-settings : "palt";*/ color: var(--siteblack); background-color: #fff; background-image: url("../images/bg.png"); background-size: 100%; background-attachment: fixed; width: 100%; overflow: hidden; } html {overflow-y:scroll; height:100%;} a {color: var(--sitekey);text-decoration: none; outline:none; transition: 0.2s; cursor: pointer;} a:hover {color: #ff8aad; opacity:0.7; transition: 0.2s;} a:hover img{ transition: 0.2s;} a.active{color: var(--sitekey);} .pc_only{ display:block;} .sp_only{ display:none !important;} main.in{ padding: 80px 0; display: block;} @media only screen and (max-width: 768px){ body { background-image: none; font-feature-settings : "palt"; } body::before { content: ""; position: fixed; top: 0px; left: 0px; background-image: url("../images/bg_sp.png"); background-position: center center; background-size: 100%; background-repeat: no-repeat; width: 100%; height: 100%; z-index: -1; opacity: 0.7; } main.in{ padding: 70px 0 35px;} main.loginmain{ padding-top: 60px;} .pc_only{ display:none;} .sp_only{ display:block !important;} } /* =fade ------------------------------------------------------------------------------------------*/ #js_fade2 {position : fixed;top : 0; left: 0;width: 100%; height : 100%;background-color: #c00;background-image : url( ../images/loader.svg );background-repeat : no-repeat; background-size:80px; background-position : 50% 50%; z-index:100;} /* =header ------------------------------------------------------------------------------------------*/ header{ position: fixed; top: 0; left: 0; width: 100%; z-index: 10;} header .site_tit{ width: 140px; position: relative; z-index: 20; left: 1%; top: 6px;} header .site_tit a {display: block; line-height: 0;} header .site_tit img{ width: 100%;} /* ログイン前メニュー */ .loginhead{ position: fixed; top: 12px; right: 1%;} .loginhead ul{ display: flex;} .loginhead li{ margin-left: 10px; background-color: #fe8aad;border-radius: 5px; padding: 2px; } .loginhead li a{ background-color: #fe8aad; color: #fff; padding: 0.6em 0; width: 12em; display: block; line-height: 1em; letter-spacing: 0.1em; border-radius: 5px; font-weight: 400; font-family: 'Roboto Slab';} .loginhead li.btn a{background-color: #fff; color: #868686;} /* メニューtoggle */ .toggle_nav{ transition: 0.3s;} .nav_trigger { display: block; position: fixed; width: 44px; height: 44px;z-index: 200; background-image: url("../images/menu_btn.png"); background-size: 100%; transition: 0.5s; right: 2%; top: 10px;} .nav-active .nav_trigger{ background-image: url("../images/menu_btn_close.png");transform: rotate(180deg);} .nav_trigger:hover{ cursor: pointer;} /* ログイン後メニュー */ .nav{position:fixed; top:0; left:0; overflow: hidden; padding-top:0; height:0; background-color:#fff; width:100%; transition: 0.5s; background-image: url("../images/bg.png"); background-size: 100%; background-attachment: fixed; } .nav-active .nav{ height:100vh;padding:100px 0 ;overflow-y: scroll; } .nav-active .nav::-webkit-scrollbar {display: none;} .nav-active .nav::-webkit-scrollbar-track {display: none;} .global{ text-align: left; width: 90%;max-width: 1920px; margin: 0 auto; display: flex; justify-content: space-between;font-family: 'Roboto Slab','Noto Sans JP',"游ゴシック Medium", "Yu Gothic Medium", "游ゴシック体", YuGothic, sans-serif; letter-spacing: 0.1em; font-size: 1.7vw; line-height: 1.5em;} .global p{ margin: 0;} .global a{color: var(--siteblack); display: block; padding: 0.2em 0;} /* .global span{ font-size: 0.5em; margin-left: 0.6em; } */ .global .main_menu{width: 60%;max-width: 1000px;} .global .main_menu .top_menu{margin-bottom: 10%;} .global .main_menu .top_menu ul{display: flex;flex-wrap: wrap;gap: clamp(10px,1vw,20px);} .global .main_menu .top_menu li{width: calc((100% - clamp(10px,1vw,20px)*2)/3);} .global .main_menu .top_menu .main_nav a{border: 4px solid #646464; display: flex;justify-content: center;flex-direction: column; align-items: center; text-align: center;background:#fff;height: 100%;color: #646464;padding:10% 4%;font-family: var(--font01);line-height: 1.2em;position: relative;border-radius: 10px;font-size: min(1.35vw,22px);} .global .main_menu .top_menu li:nth-of-type(1) .main_nav a{ border-color: var(--sitekey);} .global .main_menu .top_menu li:nth-of-type(2) .main_nav a{ border-color: var(--siteyellow);} .global .main_menu .top_menu li:nth-of-type(3) .main_nav a{ border-color: var(--siteorange);} .global .main_menu .top_menu li:nth-of-type(4) .main_nav a{ border-color: var(--siteblue);} .global .main_menu .top_menu li:nth-of-type(5) .main_nav a{ border-color: #66cc9a;} .global .main_menu .top_menu li:nth-of-type(6) .main_nav a{ border-color: #9aa4cc;} .global .main_menu .top_menu .main_nav a .icon{margin-bottom: 4%;} .global .main_menu .top_menu .main_nav a .icon img{max-height: 50px;height: 4vw;} .global .main_menu .top_menu .main_nav a:after{content: attr(data-nav-text);font-size: min(.8vw,12px);line-height: 1em;margin-top: .5em;} .global .main_menu .bottom_menu{} .global .main_menu .bottom_menu .sub_nav{display: flex;align-items: center;} .global .main_menu .bottom_menu .sub_nav .nav_text{position: relative;padding-left: min(75px,5.5vw);font-size: min(2vw,24px);line-height: 1.2em;display: flex;flex-direction: column;width: 40%;max-width: 300px;} .global .main_menu .bottom_menu .sub_nav .nav_text .icon{display: inline-block;position: absolute;left: 0;top: 58%;transform: translateY(-50%);} .global .main_menu .bottom_menu .sub_nav .nav_text .icon img{max-height: 50px;height: 4vw;max-width: 50px;object-fit: contain;} .global .main_menu .bottom_menu .sub_nav .nav_text:after{content: attr(data-nav-text);font-size: min(.8vw,12px);line-height: 1em;margin-top: .2em;} .global .main_menu .bottom_menu .sub_nav a.bnr{width: 44%;max-width: 400px;padding: 0;display: flex;align-items: center;} .global .main_menu .bottom_menu .sub_nav a.bnr img{width: 100%;} .global .main_menu .bottom_menu .sub_nav a{} .global .main_menu .bottom_menu li{} .global .main_menu .bottom_menu li:not(:last-of-type){margin-bottom: 1em;} .global .main_menu .bottom_menu{} .global .main_menu{} .global .main_menu{} .global .main_menu{} .global .main_menu{} .global .admin_menu{ text-align: center; font-size: 1.5vw; line-height: 1em;width: 34%;max-width: 500px;} .global .admin_menu span{ display: block; line-height: 1em; padding-top: 0.75em;font-size: 0.5em;} .global .admin_menu li{ margin-bottom: 0.5em;} .global .admin_menu a{ padding: 0.6em 1.5em; } .global .admin_menu .expire{font-size: 1vw; margin-bottom: 1em;} .global .admin_menu .logout{} .global .admin_menu .logout a{background-color: #f2f2f2;color: var(--siteblack); font-size: 15px; letter-spacing: 0; border-radius: 5px; padding: 1em 0; } .global .cs{ font-size:1.4vw; line-height: 1.5em; color: #b5b5b5; background-image: url("../images/menu_lock.svg"); background-repeat: no-repeat; background-position: 0 0.7em;background-size: 0.8em; padding: 0.6em 0 0 1.5em;} .mainte { position: relative;} .mainte .over{background-color: rgba(241,140,170,0.8); position: absolute; color: #fff; font-size: 1.3vw; line-height: 1em; height: 100%; width: 100%; display: flex; align-items: center; justify-content: center;} @media only screen and (max-width: 768px) { header .site_tit{ width: 120px;} .nav_trigger{top: 5px; width: 38px; height: 38px;} .nav-active .nav{ padding-top: 80px;} .nav{ overflow: scroll;} .global{display: block; font-size: 18px; padding-bottom: 150px;} /* .global span{ display: block;font-size: 0.5em; margin-left: 0; line-height: 1.5em; } */ .global a{ padding: 0.5em 0;} .global .cs{ font-size:16px; padding-top: 1em;background-position:left center;} .global .main_menu{ margin-bottom: 25px;width: 100%;} .global .main_menu .top_menu .main_nav a{font-size: 3vw;border-width: 3px;} .global .main_menu .top_menu .main_nav a:before{border-radius: 10px;} .global .main_menu .top_menu .main_nav a:after{font-size: 1.8vw;} .global .main_menu .top_menu .main_nav a .icon img{height: 9vw;} .global .main_menu .top_menu .main_nav a .sp_lh{display: inline-block;transform: translateY(.5em);} .global .main_menu .bottom_menu .sub_nav .nav_text{font-size: 3.4vw;padding-left: 10.4vw;width: 48%;} .global .main_menu .bottom_menu .sub_nav .nav_text:after{font-size: 2vw;} .global .main_menu .bottom_menu .sub_nav .nav_text .icon img{height: auto;width: 8vw; max-width: 50px;text-align: center;} .global .main_menu .bottom_menu .sub_nav a.bnr{width: 49vw;left: 40vw;} .global .main_menu .bottom_menu li:not(:last-of-type){margin-bottom: .7em;} .global .admin_menu{ font-size: 18px; line-height: 1.5em;width: 100%;} .global .admin_menu .expire{ font-size: 12px; line-height: 1.5em;} .global .admin_menu .logout{ margin-top: 10px;} .loginhead{ right: 2%; width: calc(97% - 130px); top: 10px;} .loginhead li{ width: 50%; margin-left: 5px;} .loginhead li a{ padding: 8px 0 7px; width: auto; font-size: 14px; line-height: 1em; font-weight: bold;} } /* =foot -----------------------------------------------------------------------------------------*/ footer{ background-image: url("../images/line.png"); background-repeat: no-repeat; padding: 2vw 0 5vw 0;} footer .foot_bnr img{ width: 100%;} footer .foot_bnr ul{ display: flex; max-width: 1200px; margin: 0 auto 30px; justify-content: center;} footer .foot_bnr li{ width: 200px; margin: 0 5px; line-height: 0;} footer small{ font-size: 12px; line-height: 1.5em;} .foot_nav{ margin-bottom: 30px;} .foot_nav ul{ display: inline-flex;} .foot_nav a{ color: var(--siteblack); font-size: 14px; display: inline-block; padding: 1em 1em;} footer .nocopy{ font-size: 14px; line-height: 1em;} @media only screen and (max-width: 768px){ footer{ position: relative; bottom: inherit; padding:20px 0 130px; right: inherit;} footer .nocopy{ line-height: 1.5em; padding:0 3%;} .foot_nav{ margin-bottom: 20px;} .foot_nav ul{ display: inherit;} .foot_nav a{ color: var(--siteblack); font-size: 14px; display:block; padding: 0.5em 1em;} footer .foot_bnr { margin-bottom: 15px;} footer .foot_bnr ul{ flex-wrap: wrap; justify-content: space-between; width: 94%; margin: 0 auto;} footer .foot_bnr li{ width: 49%; margin: 0; margin-bottom: 10px;} footer .foot_bnr li.big{width: 100%;} footer small{ font-size: 12px; line-height: 1.5em; width: 94%; margin: 0 auto; display: block;} } /********************** pagination *******************************/ #pagination{position: relative; overflow: hidden; display:flex; margin:30px auto 0; justify-content: center;} #pagination a{ color:#868686;} #pagination .page-numbers{ border: 1px solid #ccc; margin-right: 8px; text-decoration: none; height:40px; line-height: 40px; font-size: 14px; width:40px; padding: 0 8px !important; text-align:center;} #pagination .page-numbers:last-child{ margin-right: 0;} #pagination .page-numbers.current{color: var(--siteblack); background:#eaeaea; border:none;} #pagination .page-numbers.dots{ padding:0 12px !important;} #pagination .next.page-numbers,#pagination .prev.page-numbers{ width:75px;} @media only screen and (max-width: 768px){ #pagination .page-numbers{ margin-right: 5px;} } /* =ページトップ ------------------------------------------------------------------------------------------*/ .page_top{text-align: right;margin: 0;position:fixed;right:2%;bottom: 30px;z-index:10;transition: 1.5s;transition: 1.5s;} .page_top a{width: 50px;height:150px;display:block;transition: all 0.4s ease;animation: bound .3s ease infinite alternate} .page_top a img{ max-width: 100%; max-height: 100%;} @keyframes rotate-anime{ 0% {transform: rotate(0);} 100% {transform: rotate(-360deg);} } @keyframes bound{ 0% {transform: translateY(0px);} 100% {transform: translateY(-5px);} } .page_top a:hover{ opacity:1;} @media only screen and (max-width: 768px){ .page_top{right:2%;bottom: 10px;} .page_top a{width: 15px;height:120px;} } /* =見出し ------------------------------------------------------------------------------------------*/ h1{margin:0;} h2{margin:0;} h3{margin:0;} h4{margin:0;} h5{margin:0;} /* =clearfix ------------------------------------------------------------------------------------------*/ .clearfix:after{clear:both;display:block;height:0;line-height:0;visibility:hidden;font-size:0.1em;content:".";} /********************** ローダー *******************************/ .intro_loader{ overflow:hidden; height:100vh;} .loader_bg{ background-color:#fff; width:100%; height:100vh; position:fixed; top:0; left:0; z-index: 1000; } .loader { -webkit-perspective: 500px;perspective: 500px;z-index:10000; position: fixed;width: 100%; height: 100vh;} .loader img{ top:50%; left:50%; position: fixed; opacity:1; animation: anime_loader 2s infinite;animation-fill-mode: both; width:120px; margin-left:-60px; margin-top:-60px;} .intro_on .loader{ animation:none; animation-fill-mode: inherit;} @keyframes anime_loader { 0% { -webkit-transform: rotateY(0) ;} 100% { -webkit-transform: rotateY(360deg) ;} } @media only screen and (max-width: 768px){ .loader img{ width:90px; margin-left:-45px; margin-top:-45px;} .loader_bg{ background-size: 5%;} } /********************** 404 *******************************/ .error_404{ max-width: 470px; width: 94%; margin: 270px auto;} .error_404 .stit{ font-size: 64px; font-weight: 400; letter-spacing: 0.05em; margin-bottom: 34px; line-height: 1em; text-align: center;} .error_404 p{ font-size: 14px; line-height: 1.5em; text-align: left;} @media (max-width: 768px){ .error_404{ margin: 160px auto;} .error_404 .stit{ font-size: 40px; margin-bottom: 24px;} .error_404 p{ font-size: 13px; text-align: left;} } /* = anime ------------------------------------------------------------------------------------------*/ @keyframes fade-in { 0% {display: none;opacity: 0;} 1% { display: block; opacity: 0; } 100% {display: block;opacity: 1;} } .play.fade_up { -webkit-animation-fill-mode:both; -ms-animation-fill-mode:both; animation-fill-mode:both; -webkit-animation-duration:1.5s; -ms-animation-duration:1.5s; animation-duration:1.5s; -webkit-animation-name: fadeInUp; animation-name: fadeInUp; visibility: visible !important; } @-webkit-keyframes fadeInUp { 0% { opacity: 0; -webkit-transform: translateY(100px); } 100% { opacity: 1; -webkit-transform: translateY(0); } } @keyframes fadeInUp { 0% { opacity: 0; -webkit-transform: translateY(100px); -ms-transform: translateY(100px); transform: translateY(100px); } 100% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } } .play.fade_r { -webkit-animation-fill-mode:both; -ms-animation-fill-mode:both; animation-fill-mode:both; -webkit-animation-duration:1.5s; -ms-animation-duration:1.5s; animation-duration:1.5s; -webkit-animation-name: fadeInRight; animation-name: fadeInRight; visibility: visible !important; } @-webkit-keyframes fadeInRight { 0% { opacity: 0; -webkit-transform: translateX(100px); } 100% { opacity: 1; -webkit-transform: translateY(0); } } @keyframes fadeInRight { 0% { opacity: 0; -webkit-transform: translateX(100px); -ms-transform: translateX(100px); transform: translateX(100px); } 100% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } } .play.fade_down { -webkit-animation-fill-mode:both; -ms-animation-fill-mode:both; animation-fill-mode:both; -webkit-animation-duration:1.5s; -ms-animation-duration:1.5s; animation-duration:1.5s; -webkit-animation-name: fadeInDown; animation-name: fadeInDown; visibility: visible !important; } @-webkit-keyframes fadeInDown { 0% { opacity: 0; -webkit-transform: translateY(-50px); } 100% { opacity: 1; -webkit-transform: translateY(0); } } @keyframes fadeInDown { 0% { opacity: 0; -webkit-transform: translateY(-50px); -ms-transform: translateY(-50px); transform: translateY(-50px); } 100% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } } .play.fade_l { -webkit-animation-fill-mode:both; -ms-animation-fill-mode:both; animation-fill-mode:both; -webkit-animation-duration:1.5s; -ms-animation-duration:1.5s; animation-duration:1.5s; -webkit-animation-name: fadeInLeft; animation-name: fadeInLeft; visibility: visible !important; } @-webkit-keyframes fadeInLeft { 0% { opacity: 0; -webkit-transform: translateX(-100px); } 100% { opacity: 1; -webkit-transform: translateY(0); } } @keyframes fadeInLeft { 0% { opacity: 0; -webkit-transform: translateX(-100px); -ms-transform: translateX(-100px); transform: translateX(-100px); } 100% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } } .fadeIn { -webkit-animation-fill-mode:both; -ms-animation-fill-mode:both; animation-fill-mode:both; -webkit-animation-duration:1.5s; -ms-animation-duration:1.5s; animation-duration:1.5s; -webkit-animation-name: fadeI; animation-name: fadeIn; visibility: visible !important; } @-webkit-keyframes fadeIn { 0% { opacity: 0;} 100% { opacity: 1;} } @function random_range($min, $max) { $rand: random(); $random_range: $min + floor($rand * (($max - $min) + 1)); @return $random_range; } .snow { $total: 200; position: absolute; width: 10px; height: 10px; background: white; border-radius: 50%; @for $i from 1 through $total { $random-x: random(1000000) * 0.0001vw; $random-offset: random_range(-100000, 100000) * 0.0001vw; $random-x-end: $random-x + $random-offset; $random-x-end-yoyo: $random-x + ($random-offset / 2); $random-yoyo-time: random_range(30000, 80000) / 100000; $random-yoyo-y: $random-yoyo-time * 100vh; $random-scale: random(10000) * 0.0001; $fall-duration: random_range(10, 30) * 1s; $fall-delay: random(30) * -1s; &:nth-child(#{$i}) { opacity: random(10000) * 0.0001; transform: translate($random-x, -10px) scale($random-scale); animation: fall-#{$i} $fall-duration $fall-delay linear infinite; } @keyframes fall-#{$i} { #{percentage($random-yoyo-time)} { transform: translate($random-x-end, $random-yoyo-y) scale($random-scale); } to { transform: translate($random-x-end-yoyo, 100vh) scale($random-scale); } } } } /** * Swiper 5.3.8 * 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: April 24, 2020 */ @font-face { font-family: 'swiper-icons'; 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"); font-weight: 400; font-style: normal; } :root { --swiper-theme-color: #007aff; } .swiper-container { margin-left: auto; margin-right: auto; position: relative; overflow: hidden; list-style: none; padding: 0; /* Fix of Webkit flickering */ z-index: 1; } .swiper-container-vertical > .swiper-wrapper { flex-direction: column; } .swiper-wrapper { position: relative; width: 100%; height: 100%; z-index: 1; display: flex; transition-property: transform; box-sizing: content-box; } .swiper-container-android .swiper-slide, .swiper-wrapper { transform: translate3d(0px, 0, 0); } .swiper-container-multirow > .swiper-wrapper { flex-wrap: wrap; } .swiper-container-multirow-column > .swiper-wrapper { flex-wrap: wrap; flex-direction: column; } .swiper-container-free-mode > .swiper-wrapper { transition-timing-function: ease-out; margin: 0 auto; } .swiper-slide { flex-shrink: 0; width: 100%; height: 100%; position: relative; transition-property: transform; } .swiper-slide-invisible-blank { visibility: hidden; } /* Auto Height */ .swiper-container-autoheight, .swiper-container-autoheight .swiper-slide { height: auto; } .swiper-container-autoheight .swiper-wrapper { align-items: flex-start; transition-property: transform, height; } /* 3D Effects */ .swiper-container-3d { 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 { 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; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; z-index: 10; } .swiper-container-3d .swiper-slide-shadow-left { background-image: linear-gradient(to left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); } .swiper-container-3d .swiper-slide-shadow-right { background-image: linear-gradient(to right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); } .swiper-container-3d .swiper-slide-shadow-top { background-image: linear-gradient(to top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); } .swiper-container-3d .swiper-slide-shadow-bottom { background-image: linear-gradient(to bottom, rgba(0, 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 { scroll-snap-type: x mandatory; } .swiper-container-vertical.swiper-container-css-mode > .swiper-wrapper { 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; top: 50%; width: calc(var(--swiper-navigation-size) / 44 * 27); height: var(--swiper-navigation-size); margin-top: calc(-1 * var(--swiper-navigation-size) / 2); z-index: 10; cursor: pointer; display: flex; align-items: center; justify-content: center; color: var(--swiper-navigation-color, var(--swiper-theme-color)); } .swiper-button-prev.swiper-button-disabled, .swiper-button-next.swiper-button-disabled { opacity: 0.35; cursor: auto; pointer-events: none; } .swiper-button-prev:after, .swiper-button-next:after { font-family: swiper-icons; font-size: var(--swiper-navigation-size); text-transform: none !important; letter-spacing: 0; text-transform: none; font-variant: initial; line-height: 1; } .swiper-button-prev, .swiper-container-rtl .swiper-button-next { left: 10px; right: auto; } .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: #ffffff; } .swiper-button-prev.swiper-button-black, .swiper-button-next.swiper-button-black { --swiper-navigation-color: #000000; } .swiper-button-lock { display: none; } :root { /* --swiper-pagination-color: var(--swiper-theme-color); */ } .swiper-pagination { position: absolute; text-align: center; transition: 300ms opacity; transform: translate3d(0, 0, 0); z-index: 10; } .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 { overflow: hidden; font-size: 0; } .swiper-pagination-bullets-dynamic .swiper-pagination-bullet { transform: scale(0.33); position: relative; } .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active { transform: scale(1); } .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-main { transform: scale(1); } .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev { transform: scale(0.66); } .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev-prev { transform: scale(0.33); } .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next { transform: scale(0.66); } .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next-next { transform: scale(0.33); } .swiper-pagination-bullet { width: 8px; height: 8px; display: inline-block; border-radius: 100%; background: #000; opacity: 0.2; } button.swiper-pagination-bullet { border: none; margin: 0; padding: 0; 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 { right: 10px; top: 50%; transform: translate3d(0px, -50%, 0); } .swiper-container-vertical > .swiper-pagination-bullets .swiper-pagination-bullet { margin: 6px 0; display: block; } .swiper-container-vertical > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic { top: 50%; transform: translateY(-50%); width: 8px; } .swiper-container-vertical > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet { display: inline-block; transition: 200ms transform, 200ms top; } .swiper-container-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet { margin: 0 4px; } .swiper-container-horizontal > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic { left: 50%; transform: translateX(-50%); white-space: nowrap; } .swiper-container-horizontal > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet { transition: 200ms transform, 200ms left; } .swiper-container-horizontal.swiper-container-rtl > .swiper-pagination-bullets-dynamic .swiper-pagination-bullet { transition: 200ms transform, 200ms right; } /* Progress */ .swiper-pagination-progressbar { background: rgba(0, 0, 0, 0.25); position: absolute; } .swiper-pagination-progressbar .swiper-pagination-progressbar-fill { background: var(--swiper-pagination-color, var(--swiper-theme-color)); position: absolute; left: 0; top: 0; width: 100%; height: 100%; transform: scale(0); transform-origin: left top; } .swiper-container-rtl .swiper-pagination-progressbar .swiper-pagination-progressbar-fill { transform-origin: right top; } .swiper-container-horizontal > .swiper-pagination-progressbar, .swiper-container-vertical > .swiper-pagination-progressbar.swiper-pagination-progressbar-opposite { width: 100%; height: 4px; left: 0; top: 0; } .swiper-container-vertical > .swiper-pagination-progressbar, .swiper-container-horizontal > .swiper-pagination-progressbar.swiper-pagination-progressbar-opposite { width: 4px; height: 100%; left: 0; top: 0; } .swiper-pagination-white { --swiper-pagination-color: #ffffff; } .swiper-pagination-black { --swiper-pagination-color: #000000; } .swiper-pagination-lock { display: none; } /* Scrollbar */ .swiper-scrollbar { border-radius: 10px; position: relative; -ms-touch-action: none; background: rgba(0, 0, 0, 0.1); } .swiper-container-horizontal > .swiper-scrollbar { position: absolute; left: 1%; bottom: 3px; z-index: 50; height: 5px; width: 98%; } .swiper-container-vertical > .swiper-scrollbar { position: absolute; right: 3px; top: 1%; z-index: 50; width: 5px; height: 98%; } .swiper-scrollbar-drag { height: 100%; width: 100%; position: relative; background: rgba(0, 0, 0, 0.5); border-radius: 10px; left: 0; top: 0; } .swiper-scrollbar-cursor-drag { cursor: move; } .swiper-scrollbar-lock { display: none; } .swiper-zoom-container { width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; text-align: center; } .swiper-zoom-container > img, .swiper-zoom-container > svg, .swiper-zoom-container > canvas { max-width: 100%; max-height: 100%; object-fit: contain; } .swiper-slide-zoomed { cursor: move; } /* Preloader */ :root { /* --swiper-preloader-color: var(--swiper-theme-color); */ } .swiper-lazy-preloader { width: 42px; height: 42px; position: absolute; left: 50%; top: 50%; margin-left: -21px; margin-top: -21px; z-index: 10; transform-origin: 50%; animation: swiper-preloader-spin 1s infinite linear; box-sizing: border-box; border: 4px solid var(--swiper-preloader-color, var(--swiper-theme-color)); border-radius: 50%; border-top-color: transparent; } .swiper-lazy-preloader-white { --swiper-preloader-color: #fff; } .swiper-lazy-preloader-black { --swiper-preloader-color: #000; } @keyframes swiper-preloader-spin { 100% { transform: rotate(360deg); } } /* a11y */ .swiper-container .swiper-notification { position: absolute; left: 0; top: 0; pointer-events: none; opacity: 0; z-index: -1000; } .swiper-container-fade.swiper-container-free-mode .swiper-slide { transition-timing-function: ease-out; } .swiper-container-fade .swiper-slide { pointer-events: none; transition-property: opacity; } .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 { pointer-events: none; -webkit-backface-visibility: hidden; backface-visibility: hidden; z-index: 1; visibility: hidden; transform-origin: 0 0; width: 100%; height: 100%; } .swiper-container-cube .swiper-slide .swiper-slide { pointer-events: none; } .swiper-container-cube.swiper-container-rtl .swiper-slide { 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 { pointer-events: auto; visibility: visible; } .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; left: 0; bottom: 0px; width: 100%; height: 100%; background: #000; opacity: 0.6; -webkit-filter: blur(50px); filter: blur(50px); z-index: 0; } .swiper-container-flip { overflow: visible; } .swiper-container-flip .swiper-slide { pointer-events: none; -webkit-backface-visibility: hidden; backface-visibility: hidden; z-index: 1; } .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; } @charset "utf-8"; :root{ --font01: 'Roboto Slab',sans-serif; --keyc01:#e9618d; --color01:#f08caa; --color02:#fac80f; --color03:#f09664; --color04:#6eb4e6; --color05:#66cc9a; --color06:#888888; } .stit{font-family: 'Roboto Slab','Noto Sans JP',"游ゴシック Medium", "Yu Gothic Medium", "游ゴシック体", YuGothic, sans-serif; font-size: 40px; line-height: 1em; margin-bottom: 1em; letter-spacing: 0.05em; text-align: center;} .stit span{ display: block; font-size: 14px; line-height: 1.5em;} .container{ width: 90%; max-width: 1200px; margin: 0 auto; text-align: left;} .alert_box{ padding: 5%;} @media only screen and (max-width: 768px) { .container{ width: 94%;} .container.w100{ width: 100%;} .stit{ font-size: 24px;} .stit span{ font-size: 12px;} } /* =BTN ------------------------------------------------------------------------------------------*/ .btn{ position: relative; display: block;background-image: url("../images/btn_bg.png"); padding: 2px; transition: 0.3s; background-size: contain;} .btn a{ display: block; background-color: #fff; padding: 0.75em 1em; color: #868686; text-align: center;font-family: 'Roboto Slab','Noto Sans JP',"游ゴシック Medium", "Yu Gothic Medium", "游ゴシック体", YuGothic, sans-serif; line-height: 1em;} .btn a:hover{opacity: 1!important;} .btn:hover{opacity:0.7;} .arrow{ position:relative;} .arrow::after { content: ""; position: absolute; top: calc(50% - 3px); right: 4%; width: 4px; height: 4px; border: 1px solid; border-color: transparent #868686 #868686 transparent; transform: rotate(-45deg); transition: 0.3s; } .arrow.wht::after { border-color: transparent #fff #fff transparent;} @media only screen and (max-width: 768px) { .btn a{ font-size: 17px; line-height: 1em; } } /********************************** 　ログイン後 **********************************/ /********************** TOP *******************************/ #top .anchor-clear{padding-top: 50px;margin-top: -50px;} #top .sp_fix_menu{display: none;} @media only screen and (max-width: 768px) { #top{padding-top: 0;} #top .sp_fix_menu{display: block;position: fixed;bottom: 0;width: 100%;z-index: 10;} #top .sp_fix_menu ul{display: flex;width: 96%;margin: 0 auto;gap: 2px;} #top .sp_fix_menu li{width: calc((100% - (2px*4))/5);} #top .sp_fix_menu img{width: 100%;line-height: 0;display: block;} } #top{} #top .container{ } #top .stit{ margin-bottom: 1em;} #top_main{ padding-top: 80px;overflow: hidden; position: relative; width: 100%;} #top_main h1{width: 90%;max-width: 1400px;margin: 0 auto;} #top_main img{ width: 100%;display: block;line-height: 0;} #top_main{--flex-gap:80px;} #top_main .container{display: flex;justify-content: space-between;width: 94%;max-width: 1600px; position: relative;} #top_main .container .chara_wrap{width: 43%;margin-right: 5%;} #top_main .container .menu_wrap{width: 52%;} #top_main .container{} #top_main .chara_wrap{padding-left: 7%;position: relative;} #top_main .chara_wrap{} #top_main .chara_wrap .chara_img{position: relative;height: min(46vw, 775px);} #top_main .chara_wrap .chara_img img{height: 100%;object-fit: cover; object-position: top; overflow: hidden;border-radius: 10px 10px 0 0;} #top_main .chara_wrap .chara_img:before{position: absolute;content: "";background: #ccc;width: 100%;height: 100%;top: 5%;right: -5%;z-index: -1;pointer-events: none;border-radius: 10px;} #top_main .chara_wrap .chara_name{position: absolute;writing-mode: vertical-rl;top:0;left: 0;display: flex;align-items: center;width: 20%; height: 100%;} #top_main .chara_wrap .chara_name .chara_icon{margin-bottom: 3%;width: 100%;background-size: contain; background-repeat: no-repeat; background-position: center;padding-bottom: 15%;} #top_main .chara_wrap .chara_name .chara_icon {animation: anime_loader 3s infinite;animation-fill-mode: both;} #top_main .chara_wrap .chara_name .name{width: 100%; background-size: contain; padding-bottom: 85%; background-repeat: no-repeat; background-position: top;} .chara_101 .chara_name .chara_icon{ background-image: url(../images/logintop/chara_icon/chara_icon_001.png);}.chara_101 .chara_name .name{background-image: url("../images/logintop/chara_name/chara_name_001.png");} .chara_102 .chara_name .chara_icon{ background-image: url(../images/logintop/chara_icon/chara_icon_002.png);}.chara_102 .chara_name .name{background-image: url("../images/logintop/chara_name/chara_name_002.png");} .chara_103 .chara_name .chara_icon{ background-image: url(../images/logintop/chara_icon/chara_icon_003.png);}.chara_103 .chara_name .name{background-image: url("../images/logintop/chara_name/chara_name_003.png");} .chara_104 .chara_name .chara_icon{ background-image: url(../images/logintop/chara_icon/chara_icon_004.png);}.chara_104 .chara_name .name{background-image: url("../images/logintop/chara_name/chara_name_004.png");} .chara_105 .chara_name .chara_icon{ background-image: url(../images/logintop/chara_icon/chara_icon_005.png);}.chara_105 .chara_name .name{background-image: url("../images/logintop/chara_name/chara_name_005.png");} .chara_106 .chara_name .chara_icon{ background-image: url(../images/logintop/chara_icon/chara_icon_006.png);}.chara_106 .chara_name .name{background-image: url("../images/logintop/chara_name/chara_name_006.png");} .chara_201 .chara_name .chara_icon{ background-image: url(../images/logintop/chara_icon/chara_icon_007.png);}.chara_201 .chara_name .name{background-image: url("../images/logintop/chara_name/chara_name_007.png");} .chara_202 .chara_name .chara_icon{ background-image: url(../images/logintop/chara_icon/chara_icon_008.png);}.chara_202 .chara_name .name{background-image: url("../images/logintop/chara_name/chara_name_008.png");} .chara_203 .chara_name .chara_icon{ background-image: url(../images/logintop/chara_icon/chara_icon_009.png);}.chara_203 .chara_name .name{background-image: url("../images/logintop/chara_name/chara_name_009.png");} .chara_204 .chara_name .chara_icon{ background-image: url(../images/logintop/chara_icon/chara_icon_010.png);}.chara_204 .chara_name .name{background-image: url("../images/logintop/chara_name/chara_name_010.png");} .chara_205 .chara_name .chara_icon{ background-image: url(../images/logintop/chara_icon/chara_icon_011.png);}.chara_205 .chara_name .name{background-image: url("../images/logintop/chara_name/chara_name_011.png");} .chara_206 .chara_name .chara_icon{ background-image: url(../images/logintop/chara_icon/chara_icon_012.png);}.chara_206 .chara_name .name{background-image: url("../images/logintop/chara_name/chara_name_012.png");} .chara_301 .chara_name .chara_icon{ background-image: url(../images/logintop/chara_icon/chara_icon_013.png);}.chara_301 .chara_name .name{background-image: url("../images/logintop/chara_name/chara_name_013.png");} .chara_302 .chara_name .chara_icon{ background-image: url(../images/logintop/chara_icon/chara_icon_014.png);}.chara_302 .chara_name .name{background-image: url("../images/logintop/chara_name/chara_name_014.png");} .chara_303 .chara_name .chara_icon{ background-image: url(../images/logintop/chara_icon/chara_icon_015.png);}.chara_303 .chara_name .name{background-image: url("../images/logintop/chara_name/chara_name_015.png");} .chara_304 .chara_name .chara_icon{ background-image: url(../images/logintop/chara_icon/chara_icon_016.png);}.chara_304 .chara_name .name{background-image: url("../images/logintop/chara_name/chara_name_016.png");} .chara_305 .chara_name .chara_icon{ background-image: url(../images/logintop/chara_icon/chara_icon_017.png);}.chara_305 .chara_name .name{background-image: url("../images/logintop/chara_name/chara_name_017.png");} .chara_306 .chara_name .chara_icon{ background-image: url(../images/logintop/chara_icon/chara_icon_018.png);}.chara_306 .chara_name .name{background-image: url("../images/logintop/chara_name/chara_name_018.png");} .chara_401 .chara_name .chara_icon{ background-image: url(../images/logintop/chara_icon/chara_icon_019.png);}.chara_401 .chara_name .name{background-image: url("../images/logintop/chara_name/chara_name_019.png");} .chara_402 .chara_name .chara_icon{ background-image: url(../images/logintop/chara_icon/chara_icon_020.png);}.chara_402 .chara_name .name{background-image: url("../images/logintop/chara_name/chara_name_020.png");} .chara_403 .chara_name .chara_icon{ background-image: url(../images/logintop/chara_icon/chara_icon_021.png);}.chara_403 .chara_name .name{background-image: url("../images/logintop/chara_name/chara_name_021.png");} .chara_404 .chara_name .chara_icon{ background-image: url(../images/logintop/chara_icon/chara_icon_022.png);}.chara_404 .chara_name .name{background-image: url("../images/logintop/chara_name/chara_name_022.png");} .chara_405 .chara_name .chara_icon{ background-image: url(../images/logintop/chara_icon/chara_icon_023.png);}.chara_405 .chara_name .name{background-image: url("../images/logintop/chara_name/chara_name_023.png");} .chara_406 .chara_name .chara_icon{ background-image: url(../images/logintop/chara_icon/chara_icon_024.png);}.chara_406 .chara_name .name{background-image: url("../images/logintop/chara_name/chara_name_024.png");} .chara_501 .chara_name .chara_icon{ background-image: url(../images/logintop/chara_icon/chara_icon_embrem.png);}.chara_501 .chara_name .name{background-image: url("../images/logintop/chara_name/chara_name_025.png");} .chara_502 .chara_name .chara_icon{ background-image: url(../images/logintop/chara_icon/chara_icon_embrem.png);}.chara_502 .chara_name .name{background-image: url("../images/logintop/chara_name/chara_name_026.png");} .chara_503 .chara_name .chara_icon{ background-image: url(../images/logintop/chara_icon/chara_icon_embrem.png);}.chara_503 .chara_name .name{background-image: url("../images/logintop/chara_name/chara_name_027.png");} .chara_601 .chara_name .chara_icon{ background-image: url(../images/logintop/chara_icon/chara_icon_embrem.png);}.chara_601 .chara_name .name{background-image: url("../images/logintop/chara_name/chara_name_028.png");} .chara_602 .chara_name .chara_icon{ background-image: url(../images/logintop/chara_icon/chara_icon_embrem.png);}.chara_602 .chara_name .name{background-image: url("../images/logintop/chara_name/chara_name_029.png");} #top_main .menu_wrap .gacha_slide{position: relative; padding: 7% 12%;overflow: hidden;} #top_main .menu_wrap .gacha_slide:before{position: absolute;content: "";background: url(../images/logintop/memo.png) no-repeat top center; background-size:contain;top: 0;left: 50%;transform: translateX(-50%);width: 100%;height: 190%;} #top_main .menu_wrap .gacha_slide .swiper-pagination{left: 50%;bottom: 5%;z-index: 1;} #top_main .menu_wrap .gacha_slide .swiper-pagination-bullet-active{background: var(--keyc01);} #top_main .menu_wrap .gacha_slide .swiper-pagination-bullet{width: 12px;height: 12px;margin: 0 5px;} /* #top_main .menu_wrap .gacha_slide .swiper-slide{width: 92%!important;margin-right:4%;} */ #top_main .menu_wrap{} .top_bg_line {position: absolute;left: 14%;top: 50%;transform: translate(-50%,-50%)rotate(-38deg);} .top_bg_line .line{width: max(120vw,1600px);background: #ccc;height: 8vw;mix-blend-mode: multiply;} .top_bg_line .line.line01{height: 1.8vw;margin-bottom: 8vw;} .top_bg_line .line.line02{} #top_main .container .chara_wrap{ --chara101:#ff8282; /*佐久間咲也*/ --chara102:#826ee6; /*碓氷真澄*/ --chara103:#00e6b4; /*皆木 綴*/ --chara104:#ff375e; /*茅ヶ崎 至*/ --chara105:#ade601; /*シトロン*/ --chara106:#50d2d2; /*卯木千景*/ --chara201:#ffaa00; /*皇 天馬*/ --chara202:#ffc0df; /*瑠璃川 幸*/ --chara203:#64f0ff; /*向坂 椋*/ --chara204:#ffeb00; /*斑鳩三角*/ --chara205:#00ff96; /*三好一成*/ --chara206:#d2aaf0; /*兵頭九門*/ --chara301:#be8c00; /*摂津万里*/ --chara302:#787878; /*兵頭十座*/ --chara303:#ff4a8e; /*七尾太一*/ --chara304:#782800; /*伏見 臣*/ --chara305:#c8be96; /*古市左京*/ --chara306:#ff5029; /*泉田 莇*/ --chara401:#0032be; /*月岡 紬*/ --chara402:#00c80a; /*高遠 丞*/ --chara403:#001482; /*御影 密*/ --chara404:#d20029; /*有栖川 誉*/ --chara405:#a00096; /*雪白 東*/ --chara406:#004d32; /*ガイ*/ --chara501:#888888; /*裏方*/ --chara601:#b4a057; /*GOD座*/ --chara701:#ff91b2; /*春組*/ --chara702:#ffc800; /*夏組*/ --chara703:#ff9b63; /*秋組*/ --chara704:#6ac1ff; /*冬組*/ --chara801:#ff91b2; /*A3!*/ } @-webkit-keyframes fuwanfuwan { 0% {opacity: 0;transform: translate(-50%, -50%) scale(0);} 40% {opacity: 1;transform: translate(-50%, -50%) scale(1);} 100% {opacity: 0;transform: translate(-50%, -50%) scale(0.9);} } @keyframes fuwanfuwan { 0% {opacity: 0;transform: translate(-50%, -50%) scale(0);} 40% {opacity: 1;transform: translate(-50%, -50%) scale(1);} 100% {opacity: 0;transform: translate(-50%, -50%) scale(0.9);} } @-webkit-keyframes fuwan { 0% {opacity: 0;} 100% {opacity: 1;} } @keyframes fuwan { 0% {opacity: 0;} 100% {opacity: 1;} } @-webkit-keyframes fuwan-out { 0% {opacity: 1;} 100% {opacity: 0;} } @keyframes fuwan-out { 0% {opacity: 1;} 100% {opacity: 0;} } @keyframes scaleInWide { 0%{transform: scale(0.4,1);opacity: 0;} 100%{transform: scale(1,1);opacity: 1;} } @keyframes scaleIn { 0%{transform: scale(0.9);opacity: 0;} 100%{transform: scale(1);opacity: 1;} } @keyframes fadeIn { 0%{opacity: 0;transform: translateY(10%);} 100%{opacity: 1;transform: translateY(0%);} } #top_main .chara_wrap .drop{position: absolute;width: 100%;height: 100%;top: 50%;left: 50%;transform: translate(-50%, -50%);z-index: 2;} #top_main .chara_wrap .drop-bg{position: relative;width: 100%;height: 100%;} #top_main .chara_wrap .drop span{position: absolute;display: block;border: 4px solid #000;border-radius: 50%;width: 100px;height: 100px; animation: fuwanfuwan 1.8s both;animation-delay: 0.7s;top: 50%;left: 50%;transform: translate(-50%, -50%);} #top_main .chara_wrap .drop span:nth-of-type(1){top: 60%;border-color: var(--color01); width: 180px;height: 180px;animation-delay: 0.4s;} #top_main .chara_wrap .drop span:nth-of-type(2){left: 70%;top: 40%; border-color: var(--color02);border-width: 2px;width: 224px;height: 224px;animation-delay: 0.55s;} #top_main .chara_wrap .drop span:nth-of-type(3){left: 32%;top: 46%; border-color: var(--color03);border-width: 2px; width: 168px;height: 168px;animation-delay: 0.6s;} #top_main .chara_wrap .drop span:nth-of-type(4){top: 28%;border-color: var(--color04);border-width: 4px;width: 170px;height: 170px;animation-delay: .5s;} #top_main .chara_wrap .drop span:nth-of-type(5){top: 42%;left: 53%; border-color: var(--color05);border-width: 4px;width: 180px;height: 180px;animation-delay: .75s;} #top_main .chara_wrap .drop span:nth-of-type(6){left: 68%;border-color: var(--color06);border-width: 2px;width: 160px;height: 160px;animation-delay: .65s;} #top_main .chara_wrap .drop span{} #top_main .chara_wrap{} #top_main .container .chara_wrap .top_bg_line .line{animation: scaleInWide .6s both ease;animation-delay: .2s;} #top_main .chara_wrap .chara_img{animation: scaleIn .6s both ease;animation-delay: .3s;} #top_main .chara_wrap .chara_name{animation: fadeIn .6s both ease;animation-delay: .3s;} /* ================================= =================================== */ .chara_wrap.chara_101 .top_bg_line .line,.chara_wrap.chara_101 .chara_img:before{background: var(--chara101)!important;} .chara_wrap.chara_102 .top_bg_line .line,.chara_wrap.chara_102 .chara_img:before{background: var(--chara102)!important;} .chara_wrap.chara_103 .top_bg_line .line,.chara_wrap.chara_103 .chara_img:before{background: var(--chara103)!important;} .chara_wrap.chara_104 .top_bg_line .line,.chara_wrap.chara_104 .chara_img:before{background: var(--chara104)!important;} .chara_wrap.chara_105 .top_bg_line .line,.chara_wrap.chara_105 .chara_img:before{background: var(--chara105)!important;} .chara_wrap.chara_106 .top_bg_line .line,.chara_wrap.chara_106 .chara_img:before{background: var(--chara106)!important;} .chara_wrap.chara_201 .top_bg_line .line,.chara_wrap.chara_201 .chara_img:before{background: var(--chara201)!important;} .chara_wrap.chara_202 .top_bg_line .line,.chara_wrap.chara_202 .chara_img:before{background: var(--chara202)!important;} .chara_wrap.chara_203 .top_bg_line .line,.chara_wrap.chara_203 .chara_img:before{background: var(--chara203)!important;} .chara_wrap.chara_204 .top_bg_line .line,.chara_wrap.chara_204 .chara_img:before{background: var(--chara204)!important;} .chara_wrap.chara_205 .top_bg_line .line,.chara_wrap.chara_205 .chara_img:before{background: var(--chara205)!important;} .chara_wrap.chara_206 .top_bg_line .line,.chara_wrap.chara_206 .chara_img:before{background: var(--chara206)!important;} .chara_wrap.chara_301 .top_bg_line .line,.chara_wrap.chara_301 .chara_img:before{background: var(--chara301)!important;} .chara_wrap.chara_302 .top_bg_line .line,.chara_wrap.chara_302 .chara_img:before{background: var(--chara302)!important;} .chara_wrap.chara_303 .top_bg_line .line,.chara_wrap.chara_303 .chara_img:before{background: var(--chara303)!important;} .chara_wrap.chara_304 .top_bg_line .line,.chara_wrap.chara_304 .chara_img:before{background: var(--chara304)!important;} .chara_wrap.chara_305 .top_bg_line .line,.chara_wrap.chara_305 .chara_img:before{background: var(--chara305)!important;} .chara_wrap.chara_306 .top_bg_line .line,.chara_wrap.chara_306 .chara_img:before{background: var(--chara306)!important;} .chara_wrap.chara_401 .top_bg_line .line,.chara_wrap.chara_401 .chara_img:before{background: var(--chara401)!important;} .chara_wrap.chara_402 .top_bg_line .line,.chara_wrap.chara_402 .chara_img:before{background: var(--chara402)!important;} .chara_wrap.chara_403 .top_bg_line .line,.chara_wrap.chara_403 .chara_img:before{background: var(--chara403)!important;} .chara_wrap.chara_404 .top_bg_line .line,.chara_wrap.chara_404 .chara_img:before{background: var(--chara404)!important;} .chara_wrap.chara_405 .top_bg_line .line,.chara_wrap.chara_405 .chara_img:before{background: var(--chara405)!important;} .chara_wrap.chara_406 .top_bg_line .line,.chara_wrap.chara_406 .chara_img:before{background: var(--chara406)!important;} .chara_wrap.chara_501 .top_bg_line .line,.chara_wrap.chara_501 .chara_img:before{background: var(--chara501)!important;} .chara_wrap.chara_502 .top_bg_line .line,.chara_wrap.chara_502 .chara_img:before{background: var(--chara501)!important;} .chara_wrap.chara_503 .top_bg_line .line,.chara_wrap.chara_503 .chara_img:before{background: var(--chara501)!important;} .chara_wrap.chara_601 .top_bg_line .line,.chara_wrap.chara_601 .chara_img:before{background: var(--chara601)!important;} .chara_wrap.chara_602 .top_bg_line .line,.chara_wrap.chara_602 .chara_img:before{background: var(--chara601)!important;} .chara_wrap.chara_701 .top_bg_line .line,.chara_wrap.chara_701 .chara_img:before{background: var(--chara701)!important;} .chara_wrap.chara_702 .top_bg_line .line,.chara_wrap.chara_702 .chara_img:before{background: var(--chara702)!important;} .chara_wrap.chara_703 .top_bg_line .line,.chara_wrap.chara_703 .chara_img:before{background: var(--chara703)!important;} .chara_wrap.chara_704 .top_bg_line .line,.chara_wrap.chara_704 .chara_img:before{background: var(--chara704)!important;} .chara_wrap.chara_801 .top_bg_line .line,.chara_wrap.chara_801 .chara_img:before{background: var(--chara801)!important;} /* ================================= =================================== */ #top_main .menu_block{margin-bottom: 4%;} #top_main .menu_block .top_menu{--flex-gap:min(1vw,20px);} #top_main .menu_block .top_menu ul{display: flex;gap: var(--flex-gap);flex-wrap: wrap;} #top_main .menu_block .top_menu li{width: calc((100% - var(--flex-gap)*2)/3);} #top_main .menu_block .top_menu .top_nav{height: 100%;position: relative;transition:.2s;} #top_main .menu_block .top_menu .top_nav:before{position: absolute;content: "";display: block; width: 100%; height: 100%;background: #fff; top: 50%;left: 50%;transform: translate(-50%, -50%);transition:.2s;border-radius: 10px;} #top_main .menu_block .top_menu ul:has(.top_nav:hover) .top_nav:not(:hover){opacity: 1; transform: scale(.96); transition:.2s;} #top_main .menu_block .top_menu ul:has(.top_nav:hover) .top_nav:not(:hover) a{opacity: 0.9;} #top_main .menu_block .top_menu .top_nav a{display: flex;justify-content: center;flex-direction: column; align-items: center; text-align: center;background:#ccc;height: 100%;color: #fff;padding:10% 4%;font-family: var(--font01);line-height: 1.2em;position: relative;border-radius: 10px;font-size: min(1.2vw,20px);transition:.2s;} #top_main .menu_block .top_menu .top_nav a:before{position: absolute;content: "";border: 4px solid #ffffff48;width: 100%;height: 100%;border-radius: 14px;pointer-events: none;} #top_main .menu_block .top_menu .top_nav a .icon{margin-bottom: 4%;} #top_main .menu_block .top_menu .top_nav a .icon img{max-height: 50px;height: 3vw;} #top_main .menu_block .top_menu .top_nav a:after{content: attr(data-nav-text);font-size: min(.8vw,12px);line-height: 1em;margin-top: .5em;} #top_main .menu_block .top_menu .top_nav:hover{transform: scale(1.04);opacity: 1;transition:.2s;} #top_main .menu_block .top_menu .top_nav:hover a{opacity: 1;} #top_main .menu_block .top_menu .top_nav.nav01 a{background: var(--color01);} #top_main .menu_block .top_menu .top_nav.nav02 a{background: var(--color02);} #top_main .menu_block .top_menu .top_nav.nav03 a{background: var(--color03);} #top_main .menu_block .top_menu .top_nav.nav04 a{background: var(--color04);} #top_main .menu_block .top_menu .top_nav.nav05 a{background: var(--color05);} #top_main .menu_block .top_menu .top_nav{} #top_main .menu_block .top_menu .top_nav{} #top_main .menu_block .top_menu .innav{height: 45%;} #top_main .menu_block .top_menu .innav a{display: flex;border: 2px solid var(--keyc01);flex-direction: column; height: 100%;justify-content: center;background: #fff;border-radius: 10px;position: relative;font-size: min(1.4vw,22px);line-height: 1.2em;font-family: var(--font01);box-shadow: 1px 4px var(--keyc01);} #top_main .menu_block .top_menu .innav a:hover{transform: scale(1.04);transition:.2s;} #top_main .menu_block .top_menu .innav a:after{content: attr(data-nav-text);font-size: min(.8vw,12px);line-height: 1em;margin-top: .5em;} #top_main .menu_block .top_menu .innav:nth-of-type(1){margin-bottom: 6%;} #top_main .menu_block .top_menu .innav a{padding-left: min(70px,5vw);overflow: hidden;} #top_main .menu_block .top_menu .innav a .icon{position: absolute;left: -10px;bottom: -10px;} #top_main .menu_block .top_menu .innav a .icon img{max-height: 50px;height: 4vw;} #top_main .menu_block .top_menu .innav.on{position: relative;} #top_main .menu_block .top_menu .innav.on:before{position: absolute;content: "";background: url(../images/logintop/icons/icon_notice.svg) no-repeat center; background-size:contain;width: min(2.4vw,39px);height: min(2.4vw,39px);left: min(-.4vw,-10px);top: min(-.4vw,-10px);z-index: 2;pointer-events: none;filter: drop-shadow(0 0 4px #ffffff48);animation: jumpUp 2.8s infinite linear;} #top_main .menu_block .top_menu .innav{} #top_main .menu_block .top_menu{} #top_main .menu_block .top_menu{} #top_main .menu_block{} #top_main .menu_block{} #top_main{} #top_main{} #top_main{} @keyframes jumpUp { 0%{transform: translateY(0)scale(1,1.1);} 5%{transform: translateY(-.3vw)scale(1,1.1);} 10%{transform: translateY(0);scale: (1,1);} 15%{transform: translateY(-.3vw);} 20%{transform: translateY(0);} 100%{transform: translateY(0);} } /* #top .swipe3{ margin-top: -5vw;} */ .content_bnr{ margin-bottom: 50px;} .content_bnr ul{ display: flex; justify-content: space-between; flex-wrap:wrap; } .content_bnr li{ width: 49%; line-height: 0; margin-bottom:1%;} .content_bnr li.big{ width: 100%;margin-bottom: 4%;} .content_bnr li img{ width: 100%;} @media only screen and (max-width: 768px) { #top .stit{ margin-bottom: 0.5em;} #top_main{margin-bottom: 0px;padding-top: 60px;} #top_main h1{margin: 0 auto 20px;} #top_main img{ width: 100%;} #top .swipe3{ margin-top: 0;} .content_bnr ul{ display: inherit ; } .content_bnr li{ width: 100%; margin-bottom: 10px;} #top_main .container{display: block;width: 100%;position: relative;} #top_main .container .chara_wrap{width: 100%;margin-right: 0%;} #top_main .container .menu_wrap{width: 88%;position: absolute;bottom: 0;right: -2%;} #top_main .menu_wrap .gacha_slide{padding: 7% 9% 7% 12%;} #top_main .menu_wrap .gacha_slide .swiper-pagination{transform: translateX(-50%);bottom: 0;} #top_main .menu_wrap .gacha_slide .swiper-pagination-bullet{width: 8px;height: 8px;} #top_main .container{} #top_main .chara_wrap{padding-left: 9%;position: relative;} #top_main .chara_wrap{} #top_main .chara_wrap .chara_img{position: relative;height: auto;width: 105%;} #top_main .chara_wrap .chara_img img{} #top_main .chara_wrap .chara_img:before{display: none;} #top_main .chara_wrap .chara_name{width: 10%;left: 0.2%;} #top_main .chara_wrap .chara_name .name{width: 60%;} #top_main .chara_wrap .chara_name{} #top_main .chara_wrap {} #top_main .menu_wrap{} #top_main .menu_block .top_menu {margin-bottom: 6%;} #top_main .menu_block .top_menu ul{} #top_main .menu_block .top_menu li{margin-right: -2vw;margin-left: auto;width: 38%;} #top_main .menu_block .top_menu li:has(.top_nav){display: none;} #top_main .menu_block .top_menu .innav a{font-size: 4vw;padding: 2.5vw 3vw 2.5vw 8vw;border-radius: 2vw 0 0 2vw;box-shadow: 2px 2px var(--keyc01);} #top_main .menu_block .top_menu .innav a:after{font-size: 2vw;} #top_main .menu_block .top_menu .innav a .icon {left: -3vw;bottom: 1vw;} #top_main .menu_block .top_menu .innav a .icon img{height: 6.5vw;} #top_main .menu_block .top_menu .innav.on:before{ left: -1.3vw;top: -1.3vw;width: 5vw;height: 5vw;} .top_bg_line {left: 24%;} .top_bg_line .line{width: 220vw;} .top_bg_line .line.line01{height: 16vw;margin-bottom: 24vw;} .top_bg_line .line.line02{height: 60vw;} .topbg_wrap{ width: 100vw;height: calc(100% + 90px);overflow: hidden;position: absolute;left: 50%;top: calc(50% - 30px);transform: translate(-50%, -50%);} #top_main .chara_wrap .chara_name .chara_icon{padding-bottom: 7%;} #top_main .chara_wrap .chara_name .name{ padding-bottom: 93%;} .chara_101 .chara_name .name{background-image: url("../images/logintop/chara_name/chara_name_001_sp.png");} .chara_102 .chara_name .name{background-image: url("../images/logintop/chara_name/chara_name_002_sp.png");} .chara_103 .chara_name .name{background-image: url("../images/logintop/chara_name/chara_name_003_sp.png");} .chara_104 .chara_name .name{background-image: url("../images/logintop/chara_name/chara_name_004_sp.png");} .chara_105 .chara_name .name{background-image: url("../images/logintop/chara_name/chara_name_005_sp.png");} .chara_106 .chara_name .name{background-image: url("../images/logintop/chara_name/chara_name_006_sp.png");} .chara_201 .chara_name .name{background-image: url("../images/logintop/chara_name/chara_name_007_sp.png");} .chara_202 .chara_name .name{background-image: url("../images/logintop/chara_name/chara_name_008_sp.png");} .chara_203 .chara_name .name{background-image: url("../images/logintop/chara_name/chara_name_009_sp.png");} .chara_204 .chara_name .name{background-image: url("../images/logintop/chara_name/chara_name_010_sp.png");} .chara_205 .chara_name .name{background-image: url("../images/logintop/chara_name/chara_name_011_sp.png");} .chara_206 .chara_name .name{background-image: url("../images/logintop/chara_name/chara_name_012_sp.png");} .chara_301 .chara_name .name{background-image: url("../images/logintop/chara_name/chara_name_013_sp.png");} .chara_302 .chara_name .name{background-image: url("../images/logintop/chara_name/chara_name_014_sp.png");} .chara_303 .chara_name .name{background-image: url("../images/logintop/chara_name/chara_name_015_sp.png");} .chara_304 .chara_name .name{background-image: url("../images/logintop/chara_name/chara_name_016_sp.png");} .chara_305 .chara_name .name{background-image: url("../images/logintop/chara_name/chara_name_017_sp.png");} .chara_306 .chara_name .name{background-image: url("../images/logintop/chara_name/chara_name_018_sp.png");} .chara_401 .chara_name .name{background-image: url("../images/logintop/chara_name/chara_name_019_sp.png");} .chara_402 .chara_name .name{background-image: url("../images/logintop/chara_name/chara_name_020_sp.png");} .chara_403 .chara_name .name{background-image: url("../images/logintop/chara_name/chara_name_021_sp.png");} .chara_404 .chara_name .name{background-image: url("../images/logintop/chara_name/chara_name_022_sp.png");} .chara_405 .chara_name .name{background-image: url("../images/logintop/chara_name/chara_name_023_sp.png");} .chara_406 .chara_name .name{background-image: url("../images/logintop/chara_name/chara_name_024_sp.png");} .chara_501 .chara_name .name{background-image: url("../images/logintop/chara_name/chara_name_025_sp.png");} .chara_502 .chara_name .name{background-image: url("../images/logintop/chara_name/chara_name_026_sp.png");} .chara_503 .chara_name .name{background-image: url("../images/logintop/chara_name/chara_name_027_sp.png");} .chara_601 .chara_name .name{background-image: url("../images/logintop/chara_name/chara_name_028_sp.png");} .chara_602 .chara_name .name{background-image: url("../images/logintop/chara_name/chara_name_029_sp.png");} } /* gacha */ .top_gacha_list{} .top_gacha_list li{} .top_gacha_list li a{} .top_gacha_list li img{} #gacha{} #gacha .info_box{text-align: center;border: 2px dashed var(--sitekey);border-left: none;border-right: none;margin-bottom: 30px;font-weight: bold;} #gacha .info_box p{margin-bottom: 0;border-bottom: 1px solid #ccc;padding: 1em 0;} #gacha .info_box p:last-child{ border: none;} #gacha .info_box .num_txt{ display: flex; justify-content: center;} #gacha .info_box .num_txt .type{ background-color: var(--sitekey); color: #fff; font-size: 0.8em; font-weight: normal; line-height: 1.5em; padding: 2px 10px; border-radius: 50px; margin-right: 12px;} #gacha .info_box .num_txt .num{ font-size: 2em; line-height: 0.7em; color: var(--sitekey); margin-right: 4px;} #gacha .info_box .period{ letter-spacing: 0.1em;} #gacha .btn_list{ display: flex; flex-wrap: wrap; margin-bottom: 40px;} #gacha .btn_list li{ width: 24%; margin-right: 1.33%; margin-bottom: 1.33%; text-align: center;} #gacha .btn_list li:nth-child(4n){ margin-right:0;} #gacha .btn_list li a{ display: block; color: inherit; border: 1px solid var(--siteblack); background-color: #fff; font-size: 16px; font-weight: bold; padding: 2px 0 5px; border-radius: 50px; box-shadow: 2px 3px 2px 0px #ccc;} #gacha .gacha_in_list{ display: flex; flex-wrap: wrap; margin-bottom:50px; } #gacha .gacha_in_list li{ width: 49%; margin-right:2%; margin-bottom: 2%;} #gacha .gacha_in_list li:nth-child(2n){ margin-right:0;} #gacha .gacha_in_list li a{ display: block; line-height: 0; } #gacha .gacha_in_list li img{ width:100%;} #gacha .gacha_in_list li a:nth-child(2) img{ width:175px;} #gacha .btn a{ padding: 1em;} .gacha_modal{ position: fixed; width: 100%; height: 100vh; top: 0; left: 0; transition: 0.2s; opacity: 0; z-index: -1; visibility: hidden; display: none;} .gacha_modal.active{opacity: 1;z-index: 100;visibility: visible;} .gacha_modal .bg{ width: 100%; height: 100vh; background-color: rgba(0,0,0,0.5); top: 0; left: 0; transition: 0.2s;} .gacha_modal .in_box{position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);max-width: 400px;background-image: url("../images/gacha/bg_modal.png");background-position: center;background-size: 100%;border-radius: 20px;padding: 40px;text-align: center;} .gacha_modal .in_box .type_name{ font-size: 20px; font-weight: bold; margin-bottom: 20px;} .gacha_modal .in_box .num_box{display: flex;justify-content: space-between;align-items: center;padding: 20px 0;border: 1px solid;border-right: none;border-left: none;margin-bottom: 30px;} .gacha_modal .in_box .num_box .type_txt{margin: 0;background-color: var(--siteblack);color: #fff;font-size: 14px;padding: 2px 12px 4px;} .gacha_modal .in_box .num_box .num_txt{margin: 0;font-weight: bold;white-space: nowrap;} .gacha_modal .in_box .num_box .num{ font-size: 2em; line-height: 0.7em;} .gacha_modal .in_box .num_box .num.now{margin-right: 3px;} .gacha_modal .in_box .num_box .num.dec{color: var(--sitekey);padding-left: 18px;margin-right: 4px;position: relative;} .gacha_modal .in_box .num_box .num.dec:before{content: "\025b6";position: absolute;font-size: 10px;color: var(--siteblack);left: 3px;top: 15px;} .gacha_modal .btn_box{ display: flex; justify-content: space-between;} .gacha_modal .btn_box a{ width: 46%; line-height: 0; filter: drop-shadow(2px 4px 0px #ccc);} .gacha_modal .btn_box a:nth-child(2){ filter: drop-shadow(3px 4px 0px var(--sitekey)bf);} .gacha_modal .btn_box a img{ width: 100%;} .gacha_point{ position: fixed; width: 100%; height: 100vh; top: 0; left: 0; transition: 0.2s; opacity: 0; z-index: -1; visibility: hidden;} .gacha_point.active{opacity: 1;z-index: 100;visibility: visible;} .gacha_point .bg{ width: 100%; height: 100vh; background-color: rgba(0,0,0,0.5); top: 0; left: 0; transition: 0.2s;} .gacha_point .in_box{position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);max-width: 400px;background-image: url("../images/gacha/bg_modal.png");background-position: center;background-size: 100%;border-radius: 20px;padding: 40px 20px;text-align: center;} .gacha_point figure{ margin-bottom: 30px;} .gacha_point figure img{ width: 100%;} .gacha_point .num_txt{ display: flex; justify-content: center; font-weight: bold; margin-bottom: 2em;} .gacha_point .num_txt .type{ background-color: var(--sitekey); color: #fff; font-size: 0.8em; font-weight: normal; line-height: 1.5em; padding: 2px 10px; border-radius: 50px; margin-right: 12px;} .gacha_point .num_txt .num{ font-size: 2em; line-height: 0.7em; color: var(--sitekey); margin-right: 4px;} .gacha_point .close{ display: block; line-height: 0;} .gacha_point .close img{ width: 50%;} /* gacha effect */ main.gacha_effect{ background-image: url("../images/gacha/bg_gacharesult.png"); width: 100%; height: 100vh; overflow: hidden; background-position: center; background-size: cover;} #gacha_effect{} #gacha_effect .add_bg{background-image: url("../images/gacha/cardresult_kamihubuki_pc.svg");position: fixed;width: 100%;height: 100vh;z-index: 0;background-repeat: no-repeat;background-size: cover;} #gacha_effect .active{ visibility: visible !important; opacity: 1 !important; transition: 0.4s;} #gacha_effect .container{ position: relative; max-width: 600px; height: 100vh; width: inherit; text-align: center;} #gacha_effect .first{visibility: hidden;opacity: 0;transition: 0.2s;} #gacha_effect .first:hover{ cursor:pointer;} #gacha_effect .first figure{position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);overflow: hidden;} #gacha_effect .first figure .card{width: auto;height: 70vh;max-height: 100%;margin-bottom: 4vh;} #gacha_effect .first figure .touch{margin: 0;width: auto;height: 7vh;} #gacha_effect .second{ position: fixed; top: 0; left: 0; width: 100%; height: 100vh; visibility: hidden; opacity: 0; transition: 0.2s;} #gacha_effect .second .skip{position: absolute;top: 11.4vh;right: 0;z-index: 10;} #gacha_effect .second .skip:hover{ cursor:pointer;} #gacha_effect .second .skip img{width: 34%;} #gacha_effect .second video{width: 100%;height: 80vh;position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);} #gacha_effect .third{position: fixed;top: 50%;left: 50%;transform: translate(-50%,-50%);width: 100%;height: 72vh;visibility: hidden;opacity: 0;transition: 0.4s;display: none;z-index: 10;} #gacha_effect .third figure{position: relative;max-width: 54vh;height: 0;padding-top: 54vh;margin: 0 auto 8vh;} #gacha_effect .third figure div{position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);border: 2px solid #ccc;padding: 4px;} #gacha_effect .third figure div .deco{position: absolute;background-size: contain;background-repeat: no-repeat;width: 50px;height: 50px;z-index: -1;} #gacha_effect .third figure div .deco.top.left{background-image: url("../images/gacha/flame_pink.svg");top: -11px;left: -11px;} #gacha_effect .third figure div .deco.top.right{background-image: url("../images/gacha/flame_yellow.svg");top: -11px;right: -11px;} #gacha_effect .third figure div .deco.bottom.left{background-image: url("../images/gacha/flame_orange.svg");bottom: -11px;left: -11px;} #gacha_effect .third figure div .deco.bottom.right{background-image: url("../images/gacha/flame_blue.svg");bottom: -11px;right: -11px;} #gacha_effect .third figure img.main_img{width: auto;max-width: 48vh;height: auto;max-height: 48vh;} #gacha_effect .third figure img.print{position: absolute;width: 10vh;bottom: -5vh;left:50%;transform: translateX(-50%);} #gacha_effect .third figure img.new{position: absolute;width:16vh;top: -2.2vh;left: -3%; transform: rotate(-10deg);} #gacha_effect .third figure:after{content: "";position: absolute;background-image: url("../images/gacha/txt_bromideget.svg");background-position: center;background-repeat: no-repeat;background-size: contain;width: 140%;height: 140%;top: 50%;left: 50%;transform: translate(-50%,-50%);z-index: -1;animation: circle 60s backwards infinite linear;} #gacha_effect .third ul{ display: flex; justify-content: center; align-items: center;} #gacha_effect .third li{ margin: 0 12px;} #gacha_effect .third li a{display: block;line-height: 0;position: relative; opacity: 1;} #gacha_effect .third li a .now{margin: 0;position: absolute;bottom: -6px;left: 50%;transform: translateX(-50%);background-color: var(--sitekey);color: #fff;font-size: 12px;line-height: 1.5em;padding: 2px 0;width: 7em;border-radius: 50px;white-space: nowrap;} #gacha_effect .third li a .now span{ margin: 0 2px; font-weight: bold;} #gacha_effect .third li a:hover img{ transform: scale(1.05); transition: 0.2s ease; opacity: 1;} #gacha_effect .third li img{ height: 12vh; transition: 0.2s ease;} #gacha_effect .third li.center img{ height: 16vh;} @keyframes circle { 0%{transform: translate(-50%,-50%)rotate(0);} 100%{transform: translate(-50%,-50%)rotate(360deg);} } /* gacha animation */ .reflection { height: 60%;width:30px;position:absolute;top: -30%;left:0;background-color: #fff;opacity:0;transform: rotate(45deg);animation: reflection 3s ease-in-out infinite;} @keyframes reflection { 0% { transform: scale(0) rotate(45deg); opacity: 0; } 80% { transform: scale(0) rotate(45deg); opacity: 0.5; } 81% { transform: scale(4) rotate(45deg); opacity: 1; } 100% { transform: scale(50) rotate(45deg); opacity: 0; } } .bound_anime{ animation: bound .3s ease infinite alternate; } @keyframes bound{ 0% {transform: translateY(0px);} 100% {transform: translateY(-7px);} } /* bromide */ .in.blist .container{ max-width: inherit;} .bromide_list{ display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: center;} .bromide_list li{width: 15.86%;margin:0 0.4% 0.8%;} /*.bromide_list li:nth-child(6n){ margin-right: 0;}*/ .bromide_list li a{ display: block;} .bromide_list li figure{position: relative;height: 0;padding-top: 100%;overflow: hidden;background-color: #f5f5f5; border: 1px solid #d7d7d7; border-radius: 10px;} .bromide_list li figure img{ position: absolute; width: auto; max-width: 100%; height: auto; max-height: 100%; top: 50%; left: 50%; transform: translate(-50%,-50%);} .bromide_list.disable li.unac{ display: none;} .bromide_list li.new { position: relative;} .bromide_list li.new:after{ display: block; content: ""; background-image: url("../images/gacha/icon_new.png"); width: 66px; height:20px; position: absolute; top: -6px; left: -5px; background-size: 100%; background-repeat: no-repeat;} #top_album{ margin-bottom: 140px;} #top_album{} #top_album{} #top_album img{width: 100%;} #top_album .bromide_block figure{position: relative;height: 0;padding-top: 100%;overflow: hidden;background-color: #f5f5f5; border: 1px solid #d7d7d7; border-radius: 10px;} #top_album .bromide_block figure img{position: absolute; width: auto; max-width: 100%; height: auto; max-height: 100%; top: 50%; left: 50%; transform: translate(-50%,-50%);} #top_album .bromide_block{} #top_album .bromide_block{} #top_album .link-more{width: 22%; margin-left: auto; margin-top: 15px; font-size: 14px; } @media only screen and (min-width: 1440px) { .bromide_list li{ width: 11.7%; } } @media only screen and (max-width: 768px) { #top_album{ margin-bottom: 10vw;} #top_album .link-more{width: 100%;} } .collection_list{ display: flex; flex-wrap: wrap; justify-content: flex-start;} .collection_list li{ width: 24%;margin-right: 1.33%;margin-bottom: 2%;} .collection_list li:nth-child(4n){ margin-right: 0;} .collection_list li a{ display: block;} .collection_list li figure{position: relative;height: 0;padding-top: 100%;overflow: hidden;background-color: #f5f5f5; margin-bottom: 6px; border: 1px solid #d7d7d7; border-radius: 10px;} .collection_list li figure img{ position: absolute; width: auto; max-width: 100%; height: auto; max-height: 100%; top: 50%; left: 50%; transform: translate(-50%,-50%);} .collection_list li .stit{ margin: 0; font-size: 14px; line-height: 1.5em; color: var(--siteblack); text-align: left;} .stage_name{ text-align: center; font-size: 30px; font-weight: bold; line-height: 1.5em; letter-spacing: 0.1em; margin-bottom: 40px;} .cat_box{margin-bottom: 60px;padding-top: 20px;border-top: 1px dashed #ccc;} .cat_box .stit{ text-align: left; font-size: 20px; line-height: 1.5em; margin-bottom: 0.4em;} .cat_box .stit span{ display: inline-block; position: relative; top: -2px; font-size: 0.6em; margin-right: 8px;} #bromide{} #bromide .info{ text-align: center; border: 2px dashed var(--sitekey); border-left: none; border-right: none; font-weight: bold; display: flex; justify-content: center; margin-bottom: 20px;} #bromide .info li{ margin: 1em; width: calc(20% - 0.5em);} #bromide .info li a{color: inherit;padding: 0.5em 0;display: block;} #bromide .info li a.active, #bromide .info li a:hover{ background-color: var(--sitekey); color: #fff; border-radius: 50px; opacity: 1;} #bromide .sub_info{background-color: var(--sitekey); font-weight: bold; display: flex; justify-content: flex-start; margin-bottom: 14px; margin-top: -20px;} #bromide .sub_info li{ width: 20%;font-size: 20px; line-height: 1em;font-family: 'Roboto Slab','Noto Sans JP',"游ゴシック Medium", "Yu Gothic Medium", "游ゴシック体", YuGothic, sans-serif;} #bromide .sub_info li a{color: #fff;padding: 0.85em 0;display: block; text-align: center; } #bromide .sub_info li a.active{ background-color: #d2557a;} #bromide .sub_info li a.active:hover{ opacity: 1;} #bromide article{ max-width: 700px; width: 94%; margin: 0 auto;} #bromide article .top{display: flex;align-items: center;justify-content: space-between;margin-bottom: 40px;} #bromide article .top .name{font-size: 24px;font-weight: bold;line-height: 1.5em;margin: 0;margin-right: 20px;} #bromide article .top .name span{display: block;font-size: 0.6em;font-weight: 100;line-height: 1.5em;color: #b8b8b8;letter-spacing: 0.1em;} #bromide article .top .name span.s02{ font-weight: bold; color: inherit;} #bromide article .top .print{ width: 50px; margin: 0;} #bromide article .top .print img{ width: 100%;} #bromide article .main_bromide{ position: relative; height: 0; background-color: #f5f5f5; overflow: hidden; padding-top: 100%; margin-bottom: 40px;} #bromide article .main_bromide img{ position: absolute; width: auto; max-width: 100%; height: auto; max-height: 100%; top: 50%; left: 50%; transform: translate(-50%,-50%);} #bromide article .info_box{ margin-bottom: 60px;} #bromide article .info_box .print{background-image: url("../images/gacha/box_printcord.svg");background-position: center;background-repeat: no-repeat;background-size: contain;display: flex;justify-content: center;align-items: center;padding: 24px 0;margin-bottom: 20px;} #bromide article .info_box .print figure{ line-height: 0; margin-right: 12px;} #bromide article .info_box .print figure img{} #bromide article .info_box .print p{ margin: 0; font-size: 13px; line-height: 1.5em; color: #b8b8b8;} #bromide article .info_box .print p span{ display: flex; color: var(--siteblack); font-size: 1.6em; line-height: 1.5em;} #bromide .col_owned{ text-align: right; margin-bottom: 17px; font-size: 16px; line-height: 1.5em;} #bromide .col_owned label:hover{ cursor: pointer;} #bromide .col_owned input{ margin-right: 5px;} .link_btn{display: block;width: 94%;margin: 0 auto;text-align: center;padding: 20px 0 26px;font-size: 16px;line-height: 1.5em;border-radius: 10px;position: relative; transition: 0.2s;} .link_btn span{ position: relative; top: 6px; margin-right: 10px;} .link_btn:before{content: "";position: absolute;width: calc(100% + 8px);height: calc(100% + 8px);top: -5px;left: -5px;border: 1px solid var(--sitekey);border-radius: 10px;} .link_btn:after{ border: 2px solid; border-color: transparent #fff #fff transparent; content: ""; position: absolute; top: calc(50% - 4px); right: 1.5em; width: 5px; height: 5px; transform: rotate(-45deg); transition: 0.2s;} .link_btn:hover{ color:#fff; transition: 0.2s;} .link_btn:hover:after{ right:1.3em; transition: 0.2s;} #bromide article .link_btn{ max-width: 484px;} .back_btn{ color: var(--siteblack); border: 1px solid var(--siteblack); display: block; width: 12em; text-align: center; font-size: 14px; line-height: 1.5em; padding: 5px 0; border-radius: 50px; margin: 0 auto; position: relative;} .back_btn:before{ content:""; position: absolute; left: 1.4em;transition: 0.2s; border-top: 1px solid var(--siteblack); border-right: 1px solid var(--siteblack); transform: rotate(-135deg); width: 4px; height: 4px; top: calc(50% - 2px);} .back_btn:hover{ color: var(--siteblack); } .back_btn:hover:before{ left: 1.2em; transition: 0.2s;} .pink{ background-color: var(--sitekey); color: #fff;} @media only screen and (max-width: 768px) { #gacha .info_box{ margin-bottom: 20px;} #gacha .info_box p{ padding: 0.8em 0;} #gacha .info_box .period{ font-size: 12px;} #gacha .btn_list{ margin-bottom: 20px;} #gacha .btn_list li{ width: 100%; margin-right:0%; margin-bottom:2%;} #gacha .btn_list li:nth-child(2n){ margin-right:0;} #gacha .btn_list li a{ font-size: 12px; line-height: 1.5em;} #gacha .gacha_in_list li{ width: 100%; margin-bottom: 12px; margin-right: 0;} #gacha .gacha_in_list li a{ margin-bottom: 6px;} #gacha .gacha_in_list li a:nth-child(2) img{ width: 140px;} .gacha_modal .in_box{ width: 90%;} .gacha_point .in_box{ width: 90%;} /* gacha effect */ #gacha_effect .add_bg{background-image: url("../images/gacha/cardresult_kamihubuki_sp.svg"); background-size: 100%;} #gacha_effect .first figure img{ height:auto; width: 80vw;} #gacha_effect .first figure img{ margin-bottom: 10vw;} #gacha_effect .second .skip{ top: 3vw; right: 3vw; text-align: right;} #gacha_effect .second video{ height: 100%; top: 0; left: 0; transform: inherit; position: fixed;} #gacha_effect .third{top: 56%;height: 80vh;} #gacha_effect .third figure{margin: 0 auto 7vh; max-width: 90vw; padding-top: 90vw;} #gacha_effect .third figure:after{width: 150%;height: 150%;} #gacha_effect .third figure img.main_img{ max-width: 90vw; max-height: 90vw;} #gacha_effect .third figure img.print{ width: 20vw; bottom: -9vw;} #gacha_effect .third figure img.new{ width: 28vw; top: -2.5vw; } #gacha_effect .third li{ margin: 0 4px;} #gacha_effect .third li a .now{ font-size: 11px;} /* bromide */ .bromide_list li{ width: 32%; margin: 0 0.665% 1.33%;} /* .bromide_list li:nth-child(6n){ margin-right: 1.33%;}*/ .bromide_list li.new:after{ width: 12vw; height: 4vw; top: -0.7vw; left: -0.5vw;} #bromide .col_owned{ font-size: 14px; margin-bottom: 10px;} .collection_list li{ width: 49%;margin-right: 2%;margin-bottom: 4%;} .collection_list li:nth-child(2n){ margin-right: 0;} .collection_list li .stit{ font-size: 12px;} .stage_name{ font-size: 18px; margin-bottom: 30px;} .cat_box{ margin-bottom: 30px; padding-top: 18px;} .cat_box .stit{ font-size: 16px;} #bromide .info{ margin-bottom: 15px; } #bromide .info li{ margin: 0.5em; width: calc(50% - 0.3em);} #bromide .info li a{ font-size: 13px; padding: 0.3em 0;} #bromide .sub_info{ margin-top: -15px; margin-bottom: 10px;} #bromide .sub_info li{ width: 33.33%; font-size: 16px;} #bromide .sub_info li a{ padding: 0.75em 0;} #bromide article{ width: 100%; max-width: inherit;} #bromide article .top{ margin-bottom: 12px;} #bromide article .top .name{ font-size: 16px;} #bromide article .main_bromide{ margin-bottom: 0px;padding-top: 0;height: auto; } #bromide article .main_bromide img{ position: inherit; width: 100%; height: auto;transform:none; top: 0; left: 0;} #bromide article .info_box{ margin-bottom: 0px;} #bromide article .info_box .print{ margin-bottom: 4px;} #bromide article .info_box .print figure img{ width: 80%;} #bromide article .info_box .print p{ font-size: 11px;} .link_btn{ font-size: 13px; padding: 12px 0 20px;} .back_btn{ font-size: 12px; margin-top: 30px;} /* gacha animation */ .reflection { height: 50%; width:30px;} } /********************** STREAMING *******************************/ #streaming{} #streaming .list{ display: flex; flex-wrap:wrap;} #streaming .list .list_block{ width: 32%; margin-right: 2%;margin-bottom: 3%;} #streaming .list .list_block:nth-child(3n){ margin-right: 0;} #streaming .list .list_block figure img{ width: 100%;} #streaming .list .list_block h2{ font-weight: bold; padding: 0.5em 0 1em;} #streaming .list .list_block ul{ display: flex; flex-wrap: wrap;} #streaming .list .list_block li { width: 33.33%; justify-content: center; align-items: center; padding: 5px; } #streaming .list .list_block li a{ padding: 5px 0; background-color: #f5f5f5; line-height: 1em; display: block; text-align: center; border-radius: 10px;} #streaming .list .list_block li img{ width: 80%;} /* #streaming ul{ display: flex; flex-wrap: wrap; } #streaming li{ width: 32.66%; margin-bottom: 30px; margin-right: 1%; line-height: 0;} #streaming li iframe{ margin-bottom: 10px;} #streaming li p{ line-height: 1.5em; margin-bottom: 5px;} #streaming li:nth-child(3n){ margin-right: 0;} */ @media only screen and (max-width: 768px) { #streaming .list{ display:inherit; } #streaming .list .list_block h2{ padding: 0.5em 0;} #streaming .list .list_block{ width: 100%; margin-right: 0%;margin-bottom: 30px; padding: 0 9%;} } /********************** NEWS *******************************/ .top_2{ display: flex; justify-content: space-between; margin-bottom: 6vw; margin-top: -3vw;} /* タブメニュー */ #news{ width:100%; position: relative; padding-bottom: 50px;} #news{margin-bottom: 5vw;} #news nav { font-family: 'Roboto Slab'; text-align: center; margin-bottom: 0.7em; } #news nav ul { display: flex;} #news nav ul li {opacity: 0.5; width: 100%; margin-right: 2px;} #news.tab nav ul li { cursor: pointer; color: #fff; padding: 0.5em 0;} #news nav ul li a{color: #fff; display: block;padding: 0.5em 0;} #news nav ul li:nth-child(4n+1){ background-color: var(--sitekey);} #news nav ul li:nth-child(4n+2){ background-color: var(--siteyellow);} #news nav ul li:nth-child(4n+3){ background-color: var(--siteorange);} #news nav ul li:nth-child(4n+4){ background-color: var(--siteblue);} #news nav ul li:last-child{margin-right: 0;} #news nav ul li.current-cat { opacity:1;} /* タブ本体 */ #news .contents { display: none; opacity: 0;} #news .contents.list-tab-on { display: block; opacity: 1; animation-duration: 0.7s; animation-name: fade-in; } #news .contents li{ border-bottom: 1px dashed #ccc;} #news .contents li a{ display:block; color: var(--siteblack); padding: 1em 0; font-size: 18px; line-height: 1.6em; background-color: rgba(255,255,255,0.8);} #news .contents li a:hover{ background-color:rgba(200,200,200,0.2);} #news.newspage .contents li a{ padding: 1.5em 0;} #news .contents li span{ display:block; font-family: 'Roboto Slab'; position: relative; margin-bottom: 0.5em;} #news .contents li span:after{display: block;color: #fff; line-height: 1em; padding: 0.2em 0 0.3em ; font-size: 12px; position: absolute; top: 0.4em; left:8em; width:6em; text-align: center;} #news .contents li span.icon_ticket:after{ content: "TICKET"; background-color:var(--siteyellow); } #news .contents li span.icon_goods:after{ content: "GOODS"; background-color:var(--siteorange); } #news .contents li span.icon_special:after{ content: "SPECIAL"; background-color:var(--siteblue); } #news .link-more{ position: absolute; bottom: 0; right: 0; width: 44%;max-width: 350px; font-size: 14px; } @media only screen and (max-width: 768px) { .top_2{ display:block; margin-bottom: 0; margin-top: 0;} .top_2 #news{ width:100%; } .top_2 .link-more{width: 100%; margin-top: 15px; font-size: 14px; position: inherit;} #news{ margin-bottom: 60px; padding-bottom: 60px;} #news nav ul li{ font-size: 14px; line-height: 1em;} #news nav{ margin-bottom: 10px;} #news .contents li a{ padding: 15px 0; } #news .contents li span{ margin-bottom: 5px;} #news.newspage .contents li a{ padding: 15px 0;} } /********************** NEWS DETAIL *******************************/ #news_detail{} #news_detail .news_block{} #news_detail .news_head{ border-bottom: 1px solid #ccc; padding-bottom: 20px; margin-bottom: 20px;} #news_detail .news_head h1{ font-size: 24px; line-height: 1.5em; font-weight: bold; margin-bottom: 1em;} #news_detail .news_head p{ font-family: 'Roboto Slab'; position: relative; margin:0;} #news_detail .news_head p:after{display: block;color: #fff; line-height: 1em; padding: 0.2em 0 0.3em ; font-size: 12px; position: absolute; top: 0.2em; left:7.5em; width:6em; text-align: center;} #news_detail .news_head p.icon_ticket:after{ content: "TICKET"; background-color:var(--siteyellow); } #news_detail .news_head p.icon_goods:after{ content: "GOODS"; background-color:var(--siteorange); } #news_detail .news_head p.icon_special:after{ content: "SPECIAL"; background-color:var(--siteblue); } #news_detail .news_txt{ line-height: 1.8em; margin-bottom: 60px;} #news_detail .news_txt p{ margin-bottom: 1.5em;} #news_detail .news_txt img{ max-width: 100%;} #news_detail .link-more a{ padding: 1em 0;} @media only screen and (max-width: 768px) { #news_detail .news_head h1{ font-size: 20px; line-height: 1.5em; } #news_detail .news_head{ padding-bottom: 10px; margin-bottom: 10px;} #news_detail .news_txt{word-break: break-all; margin-bottom: 30px;} } /********************** TICKET *******************************/ .top_2 #ticket{ width: 48%; position: relative; padding-bottom: 50px;} .top_2 #ticket .cs{ text-align: center; font-family: 'Roboto Slab'; padding: 5em 0; } #ticket{margin-bottom: 5vw;padding: 5vw 0;position: relative;} #ticket .bg{position: absolute;width: 100%;height: 100%;top: 50%;left: 50%;transform: translate(-50%, -50%);background: url("../images/logintop/ticket_bg.png") no-repeat center; background-size:cover;z-index: -1;} #ticket li .icon_members:after{ content: "MEMBERS ONLY"; display: inline-block;color: #fff; line-height: 1em; padding: 0.2em 1em 0.3em ; font-size: 12px; background-color: var(--sitekey); text-align: center; margin-left: 1em; position: relative; top: -0.1em;} #ticket li { margin-bottom: 30px;} #ticket li a{ display:block; transition:0.3s; color: var(--siteblack); border: 4px solid #F08CAA; border-radius: 20px 0 20px 0;overflow: hidden;} #ticket li .date{font-family: 'Roboto Slab'; margin-bottom: 0.5em; color: var(--sitekey);} #ticket li .event_tit{background: var(--keyc01); font-size: 26px;text-align: center;color: #fff;padding: .8em; line-height: 1.5em;border-radius: 16px 0 0 0; font-weight: bold; position: relative;} #ticket li .event_tit span{display: inline-block;position: relative;z-index: 2;} #ticket li .event_tit::before{position: absolute;content: "";background: url(../images/logintop/icons/icon_ticket_heading.svg) no-repeat center; background-size:contain;width: 50px;height: 37px;top: 50%;transform: translateY(-50%);left: 2%;z-index: 0} #ticket li .sales_tit{ margin: 0;color: #646464;font-size: 26px;line-height: 1.4em;font-weight: bold;margin-bottom: .6em;} #ticket li .tk_box{padding: 5%;background: #fff;color: #646464;} #ticket li .tk_box dl:not(:last-of-type){border-bottom: 2px solid #F8C9D8;padding-bottom: 1em;margin-bottom: 1em;} #ticket li .tk_box dl{} #ticket li .tk_box dl dt{border-bottom: 1px dashed #646464;font-weight: bold; padding-bottom: .5em;margin-bottom: 0.5em;font-size: 24px;line-height: 1.5em;} #ticket li .tk_box dl dt{font-weight: bold; font-size: 20px;line-height: 1.5em;} #ticket li .tk_box{} #ticket li .tk_box{} #ticket li{} #ticket li.cs{ text-align: center;font-family: 'Roboto Slab'; padding: 5em 0;} #ticket.ticketpage li a{ padding: 2em;} @media only screen and (max-width: 768px) { #ticket{margin-bottom: 10vw;padding: 10vw 0 5vw;} .top_2 #ticket{ width: 100%;} #ticket li .event_tit{ font-size: 20px;line-height: 1.4em;} #ticket li .sales_tit{font-size: 20px;line-height: 1.4em;} #ticket li a{ font-size: 16px; line-height: 1.5em;} #ticket li .tk_box dl dt{font-size: 18px;line-height: 1.6em;} #ticket li .tk_box dl dd{line-height: 1.6em;} #ticket li .date{ margin-bottom: 7px;} #ticket li .tk_box{} #ticket.ticketpage li a{ padding:15px 10px;} .top_2 #ticket .cs{ padding: 3em 0; } } /********************** TICKET DETAIL *******************************/ #ticket_detail{} #ticket_detail .ticket_block{} #ticket_detail .ticket_head{ margin-bottom: 1em;} #ticket_detail .ticket_head .date{font-family: 'Roboto Slab'; margin-bottom: 0.5em; color: var(--sitekey);} #ticket_detail .ticket_head .event_tit{ font-size: 24px; line-height: 1.5em; margin-bottom: 0.25em; } #ticket_detail .ticket_head .icon_members:after{ content: "MEMBERS ONLY"; display: inline-block;color: #fff; line-height: 1em; padding: 0.2em 1em 0.3em ; font-size: 12px; background-color: var(--sitekey); text-align: center; margin-left: 1em; position: relative; top: -0.1em;} #ticket_detail .ticket_txt{ border: 2px solid #ccc; padding: 1.5em; line-height: 1.8em; margin-bottom: 40px;} #ticket_detail .ticket_txt p{ margin-bottom: 1.5em;} #ticket_detail .ticket_txt img{ max-width: 100%;} #ticket_detail .link-more a{ padding: 1em 0;} @media only screen and (max-width: 768px) { #ticket_detail .ticket_head .event_tit{ font-size: 18px; margin-bottom: 0;} #ticket_detail .ticket_txt{ padding: 10px; word-break: break-all; margin-bottom: 20px;} } /********************** MOVIE *******************************/ #top_movie{ margin-bottom: 5vw; text-align: left;} .movie_container{ padding: 0 3vw;} #top_movie .swiper-container{overflow: visible; width: 100%; } #top_movie .swiper-wrapper{ margin-bottom: 30px;} #top_movie .swiper-slide{ padding-right: 1vw;} #top_movie figure{ line-height: 0; margin-bottom: 10px;} #top_movie a{color: var(--siteblack);} #top_movie .link-more{width: 22%; margin-left: auto; margin-top: 15px; font-size: 14px; } #top_movie .movieicon{ margin-bottom: 5px;} @media only screen and (max-width: 768px) { #top_movie{ margin-bottom: 70px;} #top_movie .swiper-wrapper{ margin-bottom: 10px;} #top_movie .link-more{width: 100%; } #top_movie .swiper-slide{ padding-right: 10px;} } /* タブメニュー */ #movie nav { font-family: 'Roboto Slab','Noto Sans JP',"游ゴシック Medium", "Yu Gothic Medium", "游ゴシック体", YuGothic, sans-serif; text-align: center; margin-bottom: 0.7em; } #movie nav ul { display: flex;} #movie nav ul li{ opacity: 0.5; width: 100%; margin-right: 2px;display: flex; align-items: center; justify-content: center; } #movie nav ul li a { display: block; color: #fff;padding: 0.5em 0; width: 100%; } #movie nav ul li:nth-child(4n+1){ background-color: var(--sitekey);} #movie nav ul li:nth-child(4n+2){ background-color: #23c1d3;} #movie nav ul li:nth-child(4n+3){ background-color: #ff605c;} #movie nav ul li:nth-child(4n+4){ background-color: var(--siteblue);} #movie nav ul li:last-child{margin-right: 0;} #movie nav ul li.current-cat { opacity:1;} /* タブ本体 */ #movie .contents { display: none; opacity: 0;} #movie .contents.list-tab-on { display: block; opacity: 1; animation-duration: 0.7s; animation-name: fade-in; } #movie .contents ul{ display: flex; flex-wrap: wrap; } #movie .contents li{ width: 33%; margin-right: 0.5%;} #movie .contents li:nth-child(3n){ margin-right: 0;} #movie .contents li a{ display:block; transition:0.3s; color: var(--siteblack); padding: 10px 0;} #movie .contents li p{ position: relative; margin: 0.2em 0 0.5em 0;} #movie .contents .movieicon{ margin-top: 10px;} .movieicon{ line-height: 0;} .movieicon .icon{ display: inline-block; margin-bottom: 3px; margin-right: 2px;} .movieicon .icon:after{display: inline-block;color: #fff; line-height: 1em; padding: 0.2em 0 0.3em ; font-size: 10px; width:8em; text-align: center; } .movieicon .icon.comment:after{ content: "コメント動画"; background-color:#ff6fb6; } .movieicon .icon.pv:after{ content: "PV"; background-color:#78d78a; } .movieicon .icon.archive:after{ content: "公演アーカイブ"; background-color:#6A759D; } .movieicon .icon.special:after{ content: "SPECIAL"; background-color:#d5a400;} .movieicon .icon.free:after{ content: "FREE"; background-color:#23c1d3; } .movieicon .icon.paid:after{ content: "PAID"; background-color:#ff605c; } .movieicon .icon.live:after{ content: "LIVE"; background-color:#9973ab; } @media only screen and (max-width: 768px) { #movie .contents li{ width: 100%; margin-right: 0;} #movie .contents li a{ padding: 5px 0;} #movie nav ul li{ line-height: 1em; font-size: 3.5vw;} .movieicon{ line-height: 0;} .movieicon .icon:after{ padding: 0.4em 0 0.5em;} #movie .contents .movieicon{ margin-top: 5px;} } /********************** MOVIE DETAIL *******************************/ #movie_detail{} .movie_block{ display: flex; justify-content: space-between; margin-bottom: 40px;} .movie_block .left{ width: 47%;} .movie_block .youtube_block{ position: relative; width: 100%; margin: 0 auto; padding-top: 56.25%;} .movie_block .youtube_block iframe{ position: absolute; top: 0; right: 0; width: 100%; height: 100%;} /*.movie_block figure img{ width: 100%;}*/ .movie_block .right{ width: 50%;} /* 211106 */ .movie_block .right.onecol{ width:100%;} .movie_block .right.onecol .youtube{ position: relative; width: 100%; padding-top: 56.25%; } .movie_block .right.onecol .youtube iframe{ position: absolute; top: 0; right: 0; width: 100%; height: 100%;} .top_special_movie{ width:100%; max-width:1200px; margin:-4vw auto 10vw; display: flex; justify-content: space-between; flex-wrap: wrap;} .top_special_movie a{ display: block; width: 100%; line-height: 0;} @media only screen and (max-width: 768px) { .top_special_movie{ margin:5vw auto;} .top_special_movie a{ width: 100%; margin-bottom: 10px;} } /* 211106 */ .movie_block .right .tit{ font-weight: bold; font-size: 20px; line-height: 1.5em; margin-bottom: 0.6em;} .movie_block .right .movieicon{ margin-bottom:20px;} .movie_block .links{ margin-bottom: 20px;} .movie_block .links li{ margin-bottom: 10px;} .movie_block .links li a{ background-color: #f08ba9; color: #fff; border-radius: 5px; text-align: center; padding: 1em 0; display: flex; align-items: center; justify-content: center;} .movie_block .links li a:before{content: '';display: inline-block; background-size: contain; height: 1.5em; width: 1.5em; margin-right: 0.7em;} .movie_block .links li .ticket:before{ background-image: url("../images/movie_icon_ticket.png"); } .movie_block .links li .link:before{background-image: url("../images/movie_icon_link.png");} .movie_block .txt{ background-color: #f5f5f5; border-radius: 10px; padding: 1em;} .movie_block .txt img{ max-width: 100%;} #movie_detail .link-more a{ padding: 1em 0;} .movie_block .txt p:last-child{ margin-bottom: 0;} .movie_block blockquote{ border: 1px solid #ccc;} .movie_block blockquote h3:first-of-type{ margin-top: 0;} .thumb_fit{ position: relative; width: 100%; margin: 0 auto; padding-top: 70.5%; /*padding-top: 56.25%;*/ background-color: #eee;} .thumb_fit img{ position: absolute; top: 50%;left: 50%;width: auto!important;height: auto!important;max-width: 100%!important;max-height: 100%!important;transform: translate(-50%,-50%);object-fit: cover;} .m_sub{ display: block; font-size: 0.8em; line-height: 1.5em; padding-top: 0.5em;} /* FREE用テンプレート */ #movie_detail.free .movie_block .txt{ background:none; padding:0;} @media only screen and (max-width: 768px) { .movie_block{ display: inherit;} .movie_block .left{ width: 100%; margin-bottom: 10px;} .movie_block .right{ width: 100%;} .movie_block .right .tit{ font-weight: bold; font-size: 16px; line-height: 1.5em; margin-bottom: 15px;} .movie_block .txt{ padding: 10px;} .movie_block{ margin-bottom: 20px;} } /********************** SCHEDULE *******************************/ .in_program{ max-width: 1200px; width: 100%; margin: 0 auto; overflow: hidden;} .in_program .datetit{ font-family: 'Roboto Slab','Noto Sans JP',"游ゴシック Medium", "Yu Gothic Medium", "游ゴシック体", YuGothic, sans-serif; font-size: 24px; line-height: 1.5em; padding: 6px 0; transition: 0.2s ease-out; text-align: center;position: relative; color: #fff;} .in_program .datetit span{ padding-right: 0.5em;} .in_program .datetit.s12, .in_program .datetit.s01, .in_program .datetit.s02{ background-color: var(--siteblue);} .in_program .datetit.s03, .in_program .datetit.s04, .in_program .datetit.s05{background-color: var(--sitekey);} .in_program .datetit.s06, .in_program .datetit.s07, .in_program .datetit.s08{background-color:var(--siteyellow);} .in_program .datetit.s09, .in_program .datetit.s10, .in_program .datetit.s11{background-color: var(--siteorange); } .in_program .swiper-container{ padding: 0 80px; } .in_program .swiper-slide-active{ padding: 0 10px;} .in_program .swiper-slide{ transition: 0.2s ease-out;} .in_program .swiper-slide-next .datetit, .in_program .swiper-slide-prev .datetit{ font-size: 18px; top: 9px; border-radius: 5px;} .in_program .swiper-slide-next .datetit{ padding-right: calc(100% - 80px);} .in_program .swiper-slide-prev .datetit{ padding-left: calc(100% - 80px);} .in_program .swiper-slide-next .datetit span, .in_program .swiper-slide-prev .datetit span{ display:none;} .in_program .swiper-button-prev, .in_program .swiper-button-next{ width: 80px; height: calc(100% - 57px); top: 57px; background-color: #ddd; border-radius: 7px; transition: 0.2s ease-out; margin-top: inherit; color: #fff;} .in_program .swiper-button-prev{ left: 0;} .in_program .swiper-button-next{ right: 0;} .in_program .swiper-button-prev:after, .in_program .swiper-button-next:after{ font-size: 24px; } /* SCHDULE内 */ .in_program .schedule_block{padding: 1em 3%; height: calc(100vh - 160px); overflow-y: scroll;} .in_program .schedule_block{ display: none;} .in_program .swiper-slide-active .schedule_block{ display: block; } .in_program .schedule_date{ border-bottom: 1px dashed #ccc; padding: 1em 0;} .in_program .schedule_date h3{ font-family: 'Roboto Slab','Noto Sans JP',"游ゴシック Medium", "Yu Gothic Medium", "游ゴシック体", YuGothic, sans-serif; font-size: 20px; line-height: 1.5em; margin-bottom: 0.5em;} .in_program .schedule_date li .content{ display: block;color: var(--siteblack); padding: 0.2em 0 0.2em 80px; position: relative;} .in_program .schedule_date li .content:before{ content: ''; background-image: url("../images/schedule_all.png"); background-size: 100%; background-repeat: no-repeat; width: 70px; height: 16px; display: block; position: absolute; left: 0; top: 8px; } .in_program .schedule_date li .content.spring:before{ background-image: url("../images/schedule_spring.png")} .in_program .schedule_date li .content.summer:before{ background-image: url("../images/schedule_summer.png")} .in_program .schedule_date li .content.autumn:before{ background-image: url("../images/schedule_autumn.png")} .in_program .schedule_date li .content.winter:before{ background-image: url("../images/schedule_winter.png")} .in_program .schedule_date li .content.spsm:before{ background-image: url("../images/schedule_spsm.png")} .in_program .schedule_date li .content.auwn:before{ background-image: url("../images/schedule_auwn.png")} @media only screen and (max-width: 768px){ #schedule .container{ width: 100%;} .in_program{ width: 100%;} .in_program .schedule_block{ padding: 0 3%; height: auto;} .in_program .datetit{ height: 40px; line-height: 40px; padding: 0; font-size: 20px;} .in_program .swiper-container{ padding: 0; width: 100%; margin-bottom: 20px;} .in_program .swiper-slide-active{ padding: 0;} .in_program .swiper-slide-next .datetit, .in_program .swiper-slide-prev .datetit{ height: 40px; line-height: 40px; padding: 0; font-size: 20px; top: 0; } .in_program .swiper-button-prev, .in_program .swiper-button-next{width: 40px; height: 40px; top: 0; border-radius: 0; line-height: 0;outline: none; background-color: #868686; } .in_program .swiper-button-prev:after, .in_program .swiper-button-next:after{font-size: 12px; } } /********************** INSTE *******************************/ #inste{} @keyframes showUp { 0%{opacity: 0;transform: translateY(20px);} 100%{opacity: 1;transform: translateY(0);} } .inste_tab_lists{animation: showUp .6s both;animation-delay: .3s;} .inste_wrap .tile_thumbnail {animation: showUp .6s both;animation-delay: .3s;} .solo.inste_wrap {animation: showUp .6s both;animation-delay: .3s;} .inste_wrap a:hover{opacity: 1;} .inste_wrap ul{ width: 60%; margin: 0 auto;} .inste_wrap.tile_wrap ul{ width: 100%; margin: 0 auto;} .inste_wrap.tile_wrap.solo ul{ width: 100%; margin: 0 auto;} .inste_wrap .inste_block{ background-color: #fff; border-top: 6px solid #e9618d; border-radius: 6px; margin-bottom: 40px; box-shadow: 0px 0px 10px 5px rgba(0, 0, 0, 0.1); padding: 10px;} .inste_wrap .inste_block figure{position: relative;margin-bottom: 12px;} .inste_wrap figure img{ width: 100%;} .inste_wrap .textwrap{padding: 25px 10px 10px;position: relative;} .inste_wrap .inste_block .textwrap p{ margin: 0;} .inste_wrap .eena{font-size: 14px;font-weight: bold;line-height: 1.5em;display: flex;align-items: center;margin-bottom: 0.3em;position: absolute;top: 0;} .inste_wrap .eena:before{content: ""; background-image: url("../images/inste/eena.png"); background-repeat: no-repeat; background-size: contain; height: 1.2em; width: 1.2em; display: inline-block; margin-right: 0.3em;} .inste_wrap .eena:hover{ cursor: pointer;} .inste_wrap .tag{ color: #e9618d; font-size: 12px; line-height: 1.5em; margin-bottom: 0.5em;} .inste_wrap .text{ position: relative;overflow: hidden;display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; } .inste_wrap .readmore{color: #999;font-size: 14px; line-height: 1.7em;} .inste_wrap .readmore:hover{ cursor: pointer;} .inste_wrap .textarea.on .text{-webkit-line-clamp: 99;} .inste_wrap .textarea.on .readmore{ display: none; } .inste_tab_lists{display: flex;justify-content: center;gap: 8px;overflow: hidden;margin-bottom: 30px;} .inste_tab_lists .inste_tab{width: 50px;height: 31px; background: #E4E4E4;position: relative;cursor: pointer;transition:.2s;} .inste_tab_lists .inste_tab:hover{opacity: .8;transition:.2s;} .inste_tab_lists .inste_tab span{background: #646464;display: block;} .inste_tab_lists .inste_tab.solo{border-radius: 30px 0 0 30px;padding: 7px 10px 6px 18px;} .inste_tab_lists .inste_tab.tile{border-radius: 0 30px 30px 0;display: flex;flex-wrap: wrap;gap: 2px;padding: 5px 18px 5px 10px;} .inste_tab_lists .inste_tab.solo span{width: 24px;height: 3px;} .inste_tab_lists .inste_tab.solo span:not(:last-of-type){margin-bottom: 4px;} .inste_tab_lists .inste_tab.solo span{} .inste_tab_lists .inste_tab.tile span{width: 9px;height: 9px;} .inste_tab_lists .inste_tab.active{background: var(--keyc01);pointer-events: none;} .inste_tab_lists .inste_tab.active span{background: #fff;} .inste_tab_lists{} .inste_tab_lists{} #inste .tabcontent{display: none;} #inste .tabcontent.active{display: block;} .inste#pagination{flex-direction: column;} .inste#pagination .page-numbers{display: inline-block;} .inste#pagination .pagination{text-align: center;display: none;} .inste#pagination .pagination.active{display: block;} #inste .pagination{} .inste_wrap.tile_wrap ul{display: flex;flex-wrap: wrap;gap: 2px;} .inste_wrap.tile_wrap li{width: calc((100% - 4px)/3);} .inste_wrap.tile_wrap .tile_thumbnail{aspect-ratio: 1/1;position: relative;overflow: hidden;} .inste_wrap.tile_wrap .tile_thumbnail img{width: 100%;position: absolute;height: 100%;object-fit: cover;top: 0;object-position: 50% 0%;transform: scale(1.1);transition:.2s;} .inste_wrap.tile_wrap .tile_thumbnail:hover img{transform: scale(1.2);transition:.2s;} .inste_wrap.tile_wrap .tile_thumbnail{} .inste_wrap.tile_wrap .modal-box{opacity: 0;transition:none;} .inste_wrap.tile_wrap .modal-box.active{opacity: 1;transition:.3s;} .inste_wrap.tile_wrap .modal-box .modal-inner .modal-content{opacity: 0;transition:.5s;} .inste_wrap.tile_wrap .modal-box.active .modal-inner .modal-content{opacity: 1;transition:.5s;} .inste_wrap.tile_wrap .modal-box:before{opacity: 0;transition:.5s;} .inste_wrap.tile_wrap .modal-box.active:before{opacity: .6;transition:.5s;} .inste_wrap.tile_wrap .modal-box .modal-inner .modal-content { padding: 0;border: none;background: none;max-width: 700px;} .inste_wrap.tile_wrap .modal-box .modal-inner .modal-content .inner-scroll {padding: 0;max-height: calc(100vh - 60px);} .inste_wrap.tile_wrap{} .inste_wrap.tile_wrap.solo .tile_thumbnail{display: none;} .inste_wrap.tile_wrap.solo .modal-box{display: block; position: relative;height: auto;opacity: 1; visibility: visible;pointer-events: all;} .inste_wrap.tile_wrap.solo .modal-box:before{} .inste_wrap.tile_wrap.solo .modal-box .modal-inner .modal-content {opacity: 1;transition:.5s;} .inste_wrap.tile_wrap.solo .modal-box .modal-inner .modal-content .inner-scroll{} .inste_wrap.tile_wrap.solo .modal-box .modal-inner .modal-content .inner-scroll{max-height: initial;overflow: initial;} .inste_wrap.tile_wrap.solo .modal-box{} .inste_wrap.tile_wrap.solo .modal-box{} .inste_wrap.tile_wrap.solo ul{gap: 40px;} .inste_wrap.tile_wrap.solo li{width: 100%;} .inste_wrap.tile_wrap.solo{} .inste_wrap.tile_wrap{} .inste_wrap .date{ color: #999; margin-top: 1.5em; font-size: 12px; line-height: 1.5em;} #top_inste {margin-bottom: 5vw;} #top_inste .inste_wrap { text-align: left; overflow: inherit;} #top_inste .inste_wrap ul{ width: 100%; margin: 0 auto;} #top_inste .inste_wrap li{ padding-right: 1vw;} #top_inste .inste_wrap .inste_block{ margin-bottom: 0px; box-shadow: none; border: 1px solid #ddd;border-top: 6px solid #e9618d; } #top_inste .inste_wrap figure{ position: relative; padding-bottom: 90%; overflow: hidden;} #top_inste .inste_wrap figure img{position: absolute;width: auto;height: auto;max-width: 100%;max-height: 100%;object-fit: cover;left: 50%;top: 50%;transform: translate(-50%,-50%);} #top_inste .link-more{width: 22%; margin-left: auto; margin-top: 15px; font-size: 14px; } #top_inste a{ color: var(--siteblack);} #top_inste .inste_wrap .textwrap{padding-top:0;} @media only screen and (max-width: 768px){ #top_inste{ margin-bottom: 70px;} .inste_wrap ul{ width: 100%;} .inste_wrap .inste_block{ padding: 10px 6px; margin-bottom: 20px;} #top_inste .link-more{width: 100%; } .inste_wrap.tile_wrap .modal-box .modal-inner .modal-content .inner-scroll {padding: 0;max-height: calc(80vh - 60px);} } @media all and (-ms-high-contrast: none) { .inste_wrap .readmore{display: none;} } /********************** CALENDAR *******************************/ #calendar{} .calendar_wrap{ margin: 0 auto; display: flex;} .calendar_wrap img{ width: 100%;} .mockup{width: 32%; position: relative; } .mockup .mockupimg{ position: relative; z-index: 2; } .mockup .calendarimg{ position: absolute;top:2.6%; left: 14.5%;z-index: 1;width: 71%; } .calendar_wrap .c_img{ width: 23.2%;} .calendar_wrap .dl{ padding-left: 4%; width: 44.8%;} .calendar_wrap .dl h2{ font-weight: bold; font-size: 22px; line-height: 1.5em; margin-bottom: 15px; } .calendar_wrap .dl h2:before{content: "";background: linear-gradient(90deg, rgba(230,80,135,1) 0%, rgba(230,80,135,1) 25%, rgba(250,190,0,1) 25%, rgba(250,190,0,1) 50%, rgba(240,130,75,1) 50%, rgba(240,130,75,1) 75%, rgba(30,175,230,1) 75%, rgba(30,175,230,1) 100%); display: block; width: 100%; height: 5px; margin-bottom: 25px;} .calendar_wrap .dl h3{font-family:'Roboto Slab','Noto Sans JP',"游ゴシック Medium", "Yu Gothic Medium", "游ゴシック体", YuGothic, sans-serif; font-size: 36px; line-height: 1.5em; margin-bottom: 1em;} .calendar_wrap .dl .downloadbtn{ display: block; padding: 1em 0; border-radius: 5px; background-color: #fe8aad; color: #fff; text-align: center;} #top_calender{margin-bottom: 8vw;} #top_calender .calender_bnr{max-width: 528px;margin: 0 auto;} #top_calender img{width: 100%;} @media only screen and (max-width: 768px){ .calendar_wrap{ display: inherit; margin-bottom: 30px;} .mockup{width: 94%; position: relative; margin: 0 auto;} .calendar_wrap .c_img{ display: none;} .calendar_wrap .dl{ padding-left: 0; width: 100%;} .calendar_wrap .dl h2:before{ margin-bottom: 15px;} .calendar_wrap .dl h2{ font-size: 16px; margin-bottom: 0; text-align: center;} .calendar_wrap .dl h3{ text-align: center; margin-bottom: 10px;} } /********************** MEMEBERSHIP CARD *******************************/ #membership{} #membership .card{ width: 40vw; margin: 0 auto 3vw; position: relative;} #membership .card img{ width: 100%;} #membership .card .txt{ position: absolute; left: 2vw; bottom: 20%; color: #fff; font-size: 1.2vw; line-height: 1.5em; text-align: left; width: 18vw; transform: translate(0,50%)} #membership .card .txt div{ display: flex; align-items: center;} #membership .card .txt div:before{ font-size: 0.8vw; background-color: #fff; color: #868686; line-height: 1em; width: 5em; padding: 0.2em 0 0.3em; display:block; text-align: center; margin-right: 1em;} #membership .card .name{ margin-bottom: 0.6vw;} #membership .card .logo{ position: absolute; left: 1.7vw; top: 1.7vw; width: 4.7vw;} #membership .card .logo img{ width: 100%;animation: anime_loader 2s infinite;animation-fill-mode: both;} #membership .card .number:before{ content:"会員番号";} #membership .card .date:before{ content: "有効期限";} #membership .member_link{ width: 400px; margin: 0 auto 30px;} #membership .member_link .btn a{ padding: 1em 0;} #membership .member_link.carddesign{ display: flex; flex-wrap:wrap; width: 90%; max-width: 1000px;} #membership .member_link.carddesign .link-more{ width: 49%; margin-right: 1%; margin-bottom: 1%;} #membership .member_link.carddesign .link-more:nth-child(2n){ margin-right: 0;} #membership .card_note{ text-align: center;width: 40vw; margin: 0 auto 3vw;} .card_modal { padding-bottom: 3vw;} .card_modal img{ width: 100%;} .card_modal .member_link{ width: 94%; max-width: 500px; margin: 0 auto; padding: 1em 0;} .card_modal .member_link a{ padding: 1em 0;} @media only screen and (max-width: 768px) { #membership .card{ width: 90vw; margin-bottom: 20px; } #membership .card .name{ margin-bottom: 1vw;} #membership .card .txt{ left: 3vw;font-size: 3.5vw; width: 42vw; } #membership .card .txt div:before{ font-size:2vw; } #membership .member_link{ width: 90%; margin-bottom: 10px; } #membership .card .logo{ left: 4vw; top: 4vw; width:10vw;} #membership .card_note{ width: 90%; margin:0 auto 20px; text-align: left;} #membership .member_link.carddesign{ display: block; margin-bottom: 30px;} #membership .member_link.carddesign .link-more{ width: 100%; margin-right: 0%; margin-bottom:6px;} } /********************** MYPAGE *******************************/ #mypage{} #mypage nav li a{ background-color: #eee; color: var(--siteblack); display: block; text-align: center; padding: 1.2em 0; margin-bottom: 1em; border-radius: 5px; line-height: 1em;} #mypage nav li.logout a{ background-color: #fe8aad; color: #fff;} #mypage .prof{ text-align: center; margin-bottom: 30px; margin: 0 auto 30px; display: flex; align-items: center; width: 100%;} #mypage .prof .name{ width: 60%; } #mypage .prof .name h2{font-size: 30px; line-height: 1em; margin-bottom: 0.5em;} #mypage .prof .name h2 span{ font-size: 0.7em;} #mypage .prof .name .number{ margin: 0; position: relative; font-size: 20px; padding-right: 0.5em; font-feature-settings:normal;} #mypage .prof .name .number span{ font-size: 0.6em; display: inline-flex; align-items: center} #mypage .prof .name .number span:before{ content:''; background-image: url("../images/price_icon2.png"); width: 1em; height: 1em; display: inline-block; background-size: contain; background-repeat: no-repeat; margin-right: 0.5em;} #mypage .prof .name .card_note { font-size: 14px; line-height: 1.5em;} #mypage .prof ul{ width: 50%;} #mypage .prof li{padding-bottom: 0.5em;margin-bottom: 0.5em;border-bottom: 1px dotted #ccc; text-align: left; display: flex;align-items: center;} #mypage .prof li span.koumoku{ background-color: #fe8aad; color: #fff; padding: 0.5em 0; width: 6em; border-radius: 5px; margin-right: 2em; display: block; text-align: center; font-size: 12px; line-height: 1em;} #mypage .prof li .member_name{ display: block;} #mypage .prof li .member_name.m101:before{ content: '佐久間咲也';} #mypage .prof li .member_name.m102:before{ content: '碓氷真澄';} #mypage .prof li .member_name.m103:before{ content: '皆木 綴';} #mypage .prof li .member_name.m104:before{ content: '茅ヶ崎 至';} #mypage .prof li .member_name.m105:before{ content: 'シトロン';} #mypage .prof li .member_name.m106:before{ content: '卯木千景';} #mypage .prof li .member_name.m201:before{ content: '皇 天馬';} #mypage .prof li .member_name.m202:before{ content: '瑠璃川 幸';} #mypage .prof li .member_name.m203:before{ content: '向坂 椋';} #mypage .prof li .member_name.m204:before{ content: '斑鳩三角';} #mypage .prof li .member_name.m205:before{ content: '三好一成';} #mypage .prof li .member_name.m206:before{ content: '兵頭九門';} #mypage .prof li .member_name.m301:before{ content: '摂津万里';} #mypage .prof li .member_name.m302:before{ content: '兵頭十座';} #mypage .prof li .member_name.m303:before{ content: '七尾太一';} #mypage .prof li .member_name.m304:before{ content: '伏見 臣';} #mypage .prof li .member_name.m305:before{ content: '古市左京';} #mypage .prof li .member_name.m306:before{ content: '泉田 莇';} #mypage .prof li .member_name.m401:before{ content: '月岡 紬';} #mypage .prof li .member_name.m402:before{ content: '高遠 丞';} #mypage .prof li .member_name.m403:before{ content: '御影 密';} #mypage .prof li .member_name.m404:before{ content: '有栖川 誉';} #mypage .prof li .member_name.m405:before{ content: '雪白 東';} #mypage .prof li .member_name.m406:before{ content: 'ガイ';} #mypage .prof li .member_name.m501:before{ content: '松川伊助';} #mypage .prof li .member_name.m502:before{ content: '迫田ケン';} #mypage .prof li .member_name.m503:before{ content: '鹿島雄三';} #mypage .prof li .member_name.m601:before{ content: '飛鳥晴翔';} #mypage .prof li .member_name.m602:before{ content: '神木坂レニ';} #mypage .prof li .member_name.m701:before{ content: '春組';} #mypage .prof li .member_name.m702:before{ content: '夏組';} #mypage .prof li .member_name.m703:before{ content: '秋組';} #mypage .prof li .member_name.m704:before{ content: '冬組';} #mypage .prof li .member_name.m801:before{ content: 'MANKAI STAGE『A3!』';} @media only screen and (max-width: 768px) { #mypage nav li a{ margin-bottom: 8px; padding: 20px 0; } #mypage .prof{ margin-bottom: 30px; margin: 0 auto 30px; display: inherit; } #mypage .prof .name{ width:100%; margin-bottom: 10px; } #mypage .prof .name h2{font-size: 28px; margin-bottom: 10px;} #mypage .prof .name h2 span{ font-size: 0.7em;} #mypage .prof ul{ width: 100%;border-top: 1px dotted #ccc;padding-top: 0.5em; } #mypage .prof li span.koumoku{ margin-right: 1.5em;} } /********************** 詳細ページスタイル *******************************/ .detail_style{} .detail_style h2{ font-size: 1.2em; line-height: 1.5em; font-weight: bold; margin: 3em 0 1em; border-bottom: 1px solid #fe8aad; padding-bottom: 1em;} .detail_style h3{ font-weight: bold; margin: 2em 0 0.5em;border-left: 4px solid #fe8aad; padding-left: 0.75em; } /*.detail_style a:before{ content: ">"; padding-right: 0.5em; }*/ .detail_style blockquote{ background-color: #f5f5f5; padding: 1.5em 3%; margin-bottom: 1em;} .detail_style blockquote h2{ margin-top: 0;} /********************************** 　ログイン後 **********************************/ /********************************** 　ログイン前 **********************************/ /********************** JOIN *******************************/ #join .container{ max-width: 840px;} #join h2{margin: 0 auto 30px; font-family:'Roboto Slab','Noto Sans JP',"游ゴシック Medium", "Yu Gothic Medium", "游ゴシック体", YuGothic, sans-serif; font-size: 40px; text-align: center; color: var(--sitekey); line-height: 1em;} #join .lead{ margin-bottom: 60px;} #join .lead figure{ text-align: center; width: 300px; margin: 0 auto 60px;} #join .lead figure img{ width: 100%;} #join .priceblock{ text-align: center; font-size: 22px; line-height: 1em;} #join .priceblock .tit{ margin-bottom: 14px; } #join .priceblock .tit:after{content: ""; font-size: 0; line-height: 0; border-bottom: 1px solid var(--siteblack); display: block; width: 26px;padding-top: 18px; margin: 0 auto;} #join .priceblock .yearprice{ font-size: 2em; line-height: 1em; margin-bottom: 30px;} #join .priceblock .yearprice span{ font-size: 0.5em;} #join .contentlist{margin: 0 auto; border: 5px solid #e2e2e2; border-radius: 10px; padding: 10px 5%;} #join .contentlist h3{ border: 1px solid #fff; border-radius: 10em; text-align: center; line-height: 1em; padding: 0.6em 0; margin: 0 auto 15px; font-weight: bold; font-size: 22px;} #join .contentlist ul{ margin-bottom: 1em;} #join .contentlist li{ padding-bottom: 0.5em; margin-bottom: 0.5em; position: relative; padding-left: 2em; border-bottom: 1px dotted #ccc;} #join .contentlist li:before{ content:''; background-image: url("../images/price_icon2.png"); width: 1em; height: 1em; display: inline-block; background-size: contain; background-repeat: no-repeat; position: absolute; left: 0; top: 0.2em;} #join .contentlist .endtext{ font-weight: bold; font-size: 18px; line-height: 1.5em; text-align: center; margin: 0 0 1em;} #join .flow h2 span{ display: block; font-size: 0.7em; line-height: 1em; margin-bottom: 0.5em;} #join .flow dl{ display: flex; margin-bottom: 20px; border: 1px solid #ccc; padding: 2em;} #join .flow dt{ width: 25%; font-size: 30px;font-family:'Roboto Slab'; line-height: 1em;} #join .flow dd{ width: 75%; font-size: 14px; line-height: 1.5em;} #join .flow dd p{ margin-bottom: 0.5em;} #join .flow dd strong{ display: block; font-size: 24px; line-height: 30px; margin-bottom: 0.5em;} #join .flow dd .price{ font-weight: bold; margin-bottom: 1em;} #join .flow dd .check{ color: var(--sitekey); font-weight: bold;} #join .tourokubtn{ margin: 25px auto; border: 1px solid #fe8aad; padding: 4px;border-radius: 10px; } #join .tourokubtn a{ display: block; background-color: #fe8aad; color: #fff; font-size: 24px; line-height: 1em; padding: 1.2em 0; font-weight: bold; border-radius: 10px; text-align: center;} #join .notice{ text-align: center; color: var(--sitekey); font-weight: bold;} @media only screen and (max-width: 768px){ #join .lead{ margin-bottom: 30px;} #join .lead figure{ width: 50%; margin-bottom: 20px;} #join h2{ font-size: 26px; margin-bottom: 15px;} #join .priceblock{ font-size: 16px;} #join .priceblock .tit{ margin-bottom: 10px;} #join .priceblock .tit:after{ margin-bottom: 10px; padding-top: 10px;} #join .priceblock .yearprice{ margin-bottom: 15px;} #join .contentlist h3{ margin-bottom: 10px; font-size: 18px;} #join .contentlist .endtext{margin-bottom: 10px; font-size: 18px;} #join .flow dl{ display: inherit; padding: 20px; margin-bottom: 10px;} #join .flow dt{ width: 100%; font-size: 20px; margin-bottom: 0.5em;} #join .flow dd{ width: 100%;} #join .flow dd strong{ font-size: 20px;} #join .tourokubtn{ margin: 20px 0;} #join .tourokubtn a{ font-size: 20px;} #join .notice{ text-align: left;} #join .flow h2 span{ font-size:14px; margin-bottom: 10px;} } /********************** LOGIN *******************************/ #login .container{ max-width: 600px; text-align: center;} #login a{ color: var(--siteblack);} #login .login_box{ margin-bottom: 30px;} #login .login_box dl{ margin-bottom: 20px;} #login .login_box dt{ font-size: 16px; margin-bottom: 10px; text-align: left;} #login .login_box dd input{ width: 100%; font-size: 16px; padding: 1em 1.5em; border: none;outline: none; background-color: #f1f1f1;font-family: 'Noto Sans JP',"游ゴシック Medium", "Yu Gothic Medium", "游ゴシック体", YuGothic, sans-serif;} #login .login_box dd input::placeholder{color:#cecece;} #login .login_box .login_btn{ width: 100%; background: #fe8aad; font-size: 16px; font-weight: bold; line-height: 1.5em; padding: 18px 0; cursor: pointer; transition: 0.2s; margin-left: auto; -webkit-appearance: none; color: #fff; letter-spacing: 0.1em; border-radius: 5px; margin-top: 10px; margin-bottom: 40px; border: none; outline: none;} #login .login_box .login_btn:hover{ opacity: 0.8;} #login .login_box .link{ display: inline-block; text-align: center; padding: 5px 3em; margin-bottom: 8px; position: relative;} #login .arrow:hover:after{ right: 3%;} #login .new_member{ width: 70%; margin: 0 auto; border-radius: 5px;} #login .new_member a{display: block; padding: 12px 0; font-size: 18px; line-height: 1.5em; } #login .error_txt{ margin-bottom: 60px;} #login .error_txt p{ color: #fe8aad; font-size: 16px; line-height: 1.5em;} @media only screen and (max-width: 768px){ #login .login_box{margin-bottom: 10px;} #login .login_box dl{ margin-bottom: 10px;} #login .login_box dt{ font-size: 14px; margin-bottom: 5px;} #login .login_box dd input{ padding: 0.75em 1em; } #login .login_box .login_btn{ margin-bottom: 40px; padding: 0.9em 0; margin-top: 10px;} #login .login_box .link{ font-size: 14px;} #login .new_member{ width: 100%;} #login .new_member a{ font-size: 16px; line-height: 1em;} #login .error_txt{ margin-bottom: 36px;} #login .error_txt p{ font-size: 14px;} } /********************** TOP *******************************/ #lp_main { margin-bottom: 5vw;} #lp_main h1{ width: 90%; max-width: 1400px; margin: 0 auto; opacity: 1; transition: 3s;transform: scale(1);} #lp_main img{ width: 100%; margin: 0 auto;} #lp_main .top_txt{ opacity: 1; transition: 3s;transform: translateY(0); margin-top: -7vw;} #lp_main p{ font-size: 18px; line-height: 1.7em; font-weight: bold;} .intro_loader #lp_main h1{ opacity: 0; transform: scale(1.1);} .intro_loader #lp_main .top_txt{ opacity: 0; transform: translateY(-50px);} #lp .tourokubtn{ width: 50%; margin: 0 auto; border: 1px solid #fe8aad; padding: 4px;border-radius: 10px;} #lp .tourokubtn a{ display: block; background-color: #fe8aad; color: #fff; font-size: 24px; line-height: 1em; padding: 1.2em 0; font-weight: bold; border-radius: 10px; } #lp_main .top_txt{ opacity: 1; transition: 3s;transform: translateY(0); } #lp_main h2{ width: 40%; margin: 0 auto; margin-top: -7vw; margin-bottom: 1vw;} @media only screen and (min-width: 1568px) { #lp_main .top_txt{ margin-top: -110px;} } @media only screen and (max-width: 768px) { #lp_main { overflow: hidden;} #lp_main h1 { width: 100%; padding:15vw 0 8vw 0;} #lp_main h2{ width: 130vw; margin-top: 0; margin-bottom: 4vw; margin-left:-15vw; } #lp_main .top_txt{ margin-top: 0; } #lp_main p{ font-size: 16px; line-height: 1.7em; font-weight: bold; text-align: left; width: 90%; margin: 0 auto;} #lp_main p br{ display: none;} #lp .tourokubtn{ width: 90%; margin: 10px auto;} #lp .tourokubtn a{ font-size: 18px; line-height: 1em; padding: 1em 0;} } /********************** CONTENT *******************************/ #lp_content{ margin-bottom: 10vw; } #lp_content .content_block{background-size: 100%; display: flex; align-items: flex-start; font-size: 18px; line-height: 1.7em; background-repeat: no-repeat;} #lp_content .content_block:nth-child(2n){flex-flow: row-reverse; text-align: right;} #lp_content .content_block figure{ width: 24%;} #lp_content .content_block img{ width: 100%;} #lp_content .content_block .text{ padding-left: 4%; width: 60%;} #lp_content .content_block:nth-child(2n) .text{ padding: 0; padding-right: 4%;} #lp_content .content_block:nth-child(2n) p{text-align: left;} #lp_content .content_block h2{ font-size: 40px; line-height: 1.5em; font-weight: 600; margin-bottom: 0.5em; padding-top: 12%;} #lp_content .content_block h2 span{ display: inline-block;} #lp_content .content_block span{ font-size: 0.8em;} #lp_content .content1{ background-image: url("../images/lp/content_bg01.png"); } #lp_content .content1 h2{ color: #f27ca0;} #lp_content .content2{ background-image: url("../images/lp/content_bg02.png"); } #lp_content .content2 h2{ color: #d6ac11;} #lp_content .content3{ background-image: url("../images/lp/content_bg03.png"); } #lp_content .content3 h2{ color: #d9804e;} #lp_content .content4{ background-image: url("../images/lp/content_bg04.png"); } #lp_content .content4 h2{ color: #569dd0;} @media only screen and (max-width: 768px) { #lp_content { overflow:hidden;} #lp_content.container{ width: 100%;background-color: rgba(255,255,255,0.5);} #lp_content .content_block{ position: relative; font-size: 16px; background-size: 150%; background-position: 0 13vw;} #lp_content .content_block:nth-child(2n){text-align: left;} #lp_content .content_block figure{ position: absolute; width: 42vw; left: -5vw;} #lp_content .content_block:nth-child(2n) figure{ left:inherit; right: -5vw;} #lp_content .content_block .text{width: 90%; margin: 0 auto; padding-left: 0;position: relative; z-index: 1;} #lp_content .content_block:nth-child(2n) .text{ padding-right: 0;} #lp_content .content_block h2{ position: absolute; right: 0; font-size: 5.6vw; text-align: right; width: 70%;margin-left: auto;padding-top: 24vw; margin-bottom: 0;} #lp_content .content_block h2 span{ display: none;} #lp_content .content_block .text p{ padding-top: 46vw;} #lp_content .content_block:nth-child(2n) h2{ right: inherit; left: 0; text-align: left;} } /********************** PRICE *******************************/ #lp_price{ background-image: url("../images/price_bg.png"); color: #fff; padding: 5vw 0 8vw;} #lp_price .container{ max-width: 1000px;} #lp_price img{ width: 100%;} #lp_price h2{width: 60%; margin: 0 auto 20px;} #lp_price .priceblock{ text-align: center; font-size: 22px; line-height: 1em;} #lp_price .priceblock .tit{ margin-bottom: 14px; } #lp_price .priceblock .tit:after{content: ""; font-size: 0; line-height: 0; border-bottom: 1px solid #fff; display: block; width: 26px;padding-top: 18px; margin: 0 auto;} #lp_price .priceblock .yearprice{ font-size: 2em; line-height: 1em;} #lp_price .priceblock .yearprice span{ font-size: 0.5em;} #lp_price .contentlist{ width:70%; margin: 0 auto;} #lp_price .contentlist h3{ border: 1px solid #fff; border-radius: 10em; text-align: center; line-height: 1em; padding: 0.6em 0; margin: 0 auto 20px; font-weight: bold;} #lp_price .contentlist ul{ margin-bottom: 2em;} #lp_price .contentlist li{ margin-bottom: 0.5em; position: relative; padding-left: 1.5em;} #lp_price .contentlist li:before{ content:''; background-image: url("../images/lp/price_icon.png"); width: 1em; height: 1em; display: inline-block; background-size: contain; background-repeat: no-repeat; position: absolute; left: 0; top: 0.2em;} #lp_price .contentlist .endtext{ font-weight: bold; font-size: 24px; line-height: 1.5em; margin-bottom: 3vw;} #lp_price .tourokubtn{ width: 100%; border: 1px solid #fff;} #lp_price .tourokubtn a{background-color: #fff; color: #fe8aad; text-align: center;} @media only screen and (max-width: 768px) { #lp_price { padding: 40px 0; background-size: 12%;} #lp_price h2{ width: 100%;} #lp_price .priceblock{ font-size: 20px;} #lp_price .contentlist{ width:100%; } #lp_price .contentlist .endtext{margin-bottom: 40px; font-size: 20px;} } /********************************** 　ログイン前 **********************************/ /********************************** 　共通 **********************************/ .common_pages{ padding-top: 30px;} .common_pages .stit{ font-size: 30px; line-height: 1.5em; margin-bottom: 1.5em;} .common_pages p{ margin-bottom: 1.5em;} .common_pages .txt{ line-height: 1.8em;} .common_pages .block{ margin-bottom: 2em;} .common_pages .lead{ border-bottom: 1px solid #ccc; padding-bottom: 2em; margin-bottom: 2em;} .common_pages .ctit{font-weight: bold; margin-bottom: 1em;} .common_pages ol{ list-style: decimal; padding-left: 4em;} .common_pages li{ margin-bottom: 1em;} @media only screen and (max-width: 768px) { .common_pages{ padding-top: 10px;} .common_pages .stit{ font-size: 18px; margin-bottom: 1em;} .common_pages .lead{ /*margin-bottom: 10px; padding-bottom: 10px;*/} .common_pages .ctit{ margin-bottom: 0.5em;} .common_pages ol{ padding-left: 1.5em;} } /********************** FAQ *******************************/ #faq .faq_block{ margin-bottom: 80px;} #faq .ftit{ font-size: 20px; line-height: 1.5em; margin-bottom: 1.2em; text-align: center;} #faq .faq_block dl { background-color: #f2f2f2; text-align: left; padding: 5px 10px; margin-bottom: 10px;} #faq .faq_block dl:last-child{ margin-bottom: 0;} #faq .faq_block dl:hover { background-color: #eee;} #faq .faq_block dt { background-image: url(../images/faq_q.png); background-repeat: no-repeat; background-position: 10px 10px; background-size: 37px; height: 58px; padding: 10px 54px 10px 67px; line-height: 40px; font-weight: bold; position: relative;} #faq .faq_block dt::after { content: ""; position: absolute; bottom: 0px; width: 7px; height: 7px; border: 1px solid; border-color: transparent transparent #000 #000; transform: rotate(-45deg); right: 2.5%; bottom: 50%; margin-bottom: -7px; transition: all 0.3s ease;} #faq .faq_block dt.active:after {transform: rotate(135deg)} #faq .faq_block dt:hover { cursor: pointer;} #faq .faq_block dd { padding: 5px 10px 15px; display: none; line-height: 1.7em;} #faq .faq_block dd p:last-child{ margin-bottom: 0;} #faq .btn{ width: 60%; margin: 0 auto;} #faq .contact_info{ border: 2px solid #ccc; padding: 1.5em 3em; text-align: center;} #faq .contact_info .form a{ display: block; border: 3px solid #ccc; color: var(--siteblack); padding: 1em 0; border-radius: 5px; margin-bottom: 20px;} #faq .contact_info .tel{ font-size: 20px; line-height: 1.7em;} #faq .contact_info .tel span{ display: block; font-size: 0.7em;} @media only screen and (max-width: 768px){ #faq .faq_block{ margin-bottom: 40px;} #faq .ftit{ font-size: 16px; margin-bottom: 1em;} #faq .faq_block dl { padding: 0; margin-bottom: 5px;} #faq .faq_block dt { background-size: 30px; padding: 15px 28px 10px 50px; min-height: 50px; height: auto; line-height: 1.4em; font-size: 14px;} #faq .faq_block dt::after { width: 4px; height: 4px; margin-bottom: -4px; right: 12px;} #faq .faq_block dd {font-size: 14px;line-height: 1.5em;} #faq .btn{ width: 100%;} #faq .contact_info{ border: 2px solid #ccc; padding:10px; text-align: center;} #faq .contact_info .form a{ margin-bottom: 10px; padding: 10px 0;} #faq .contact_info .tel{ font-size: 16px; line-height: 1.7em;} #faq .contact_info .tel span{ text-align: left;display: block; line-height: 1.7em;} } /********************** MAGAZINE *******************************/ #magazine .contents { display: none; opacity: 0;} #magazine .contents.list-tab-on { display: block; opacity: 1; animation-duration: 0.7s; animation-name: fade-in; } #magazine .contents ul{ display: flex; flex-wrap: wrap; } #magazine .contents li{ width: 32%; margin-right: 2%;} #magazine .contents li:nth-child(3n){ margin-right: 0;} #magazine .contents li a{ display:block; transition:0.3s; color: var(--siteblack); padding: 10px 0;} #magazine .contents li .thumb_fit{ padding-top: 141.25%;} #magazine .contents li p{ position: relative; margin: 0.2em 0 0.5em 0;} #top_magazine{margin-bottom: 5vw;} #top_magazine .magazine_container{padding: 0 3vw;} #top_magazine .swiper-slide{} #top_magazine .swiper-slide img{width: 100%;} #top_magazine .swiper-container{overflow: visible;} #top_magazine .link-more{width: 22%; margin-left: auto; margin-top: 15px; font-size: 14px; } #top_magazine .textwrap{text-align: left;color: #646464;} #top_magazine {} @media only screen and (max-width: 768px){ #magazine .contents li{ width: 100%; margin-right: 0;} #top_magazine{ margin-bottom: 70px;} #top_magazine .link-more{width: 100%;} } /********************** 限定動画 *******************************/ main.in.exclusive{ padding: 0; display: block; width: 100%; height: 100vh; overflow: hidden; background-color: #000; position: relative;} main.in.exclusive .youtube{ position: absolute; width: 100%; padding-top: 45%; top: 50%; transform: translateY(-50%);} main.in.exclusive .youtube iframe{ position: absolute; top: 0; right: 0; width: 100%; height: 100%;} /********************** MODAL *******************************/ .txtmodal{ text-align: left; padding: 5% 8%;} .txtmodal h2{ color:var(--sitekey); font-weight: bold; margin-bottom: 0.75em;background: linear-gradient(transparent 65%, #f0f0f0 35%); line-height: 2em; padding-left: 0.5em;} .txtmodal ul{ list-style: circle; padding-left: 1.5em; margin-bottom: 2em;} .txtmodal li{ margin-bottom: 0.5em;} .txtmodal .note{ font-size: 0.8em; line-height: 1.5em; margin-top: 0.25em; display: block;} /********************** HBD *******************************/ .hbd_box{position: relative;display: block;padding: 5vw;background-image: url("../images/hbd_logo.jpg");background-repeat: no-repeat;background-size: 50%;background-position: center;font-family: 'Roboto Slab', "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック体", YuGothic, sans-serif;} .hbd_box:before, .hbd_box:after{content:"";position: absolute;background-repeat: no-repeat;background-size: 100%;width: 100%;height: 15vw;left: 0;z-index: 0;opacity: 0.4;} .hbd_box:before{background-image: url("../images/hdp_top.png");top: 0;background-position: top;} .hbd_box:after{background-image: url("../images/hdp_bottom.png");bottom: 0;background-position: bottom;} .hbd_box .tit{width: 90%;margin: 0 auto 34px;position: relative;} .hbd_box .tit img{ width: 100%;} .hbd_box .name{ color: #e46b90; font-size: 34px; font-weight: 800; line-height: 1.5em; letter-spacing: 0.02em; margin-bottom: 0.5em;} .hbd_box .name .dear{ display: block; font-size: 0.8em; line-height: 1.3em;} .hbd_box .name .bottom{ display: inline-block; padding-left: 6px; font-size: 0.7em;} .hbd_box .messa{ color: #868686; font-size: 24px; font-weight: bold; line-height: 1.5em; letter-spacing: 0.05em; margin-bottom: 1.4em;} .hbd_box .messa span{position: relative;display: block;font-size: 0.9em;} .hbd_box a{position: relative;background-color: #e46b90;color: #fff;display: block;font-size: 18px;font-weight: bold;line-height: 1.5em;letter-spacing: 0.1em;padding: 7px 0;z-index: 1;} .hbd_box a:after{content: "\025b6"; position: absolute; font-size: 10px; right: 2em; font-family: 'Noto Sans JP',"游ゴシック Medium", "Yu Gothic Medium", "游ゴシック体", YuGothic, sans-serif;} .hbd_box canvas{ height: 100%; width: 100%; position: fixed; top: 0; left: 0; z-index: 0;} .hbd_btn{ position: absolute; z-index: 9; bottom: 5%; left: 47%; width: 44%;background-color: #fff;border-radius: 10px; transform: translate(-100%, 0); max-width: 742px;} .hbd_bnr{/*margin: 0 auto 120px;width: 94%;max-width: 600px;*/ width: 100%; position: relative;display: block;} .hbd_bnr img{ width: 100%;} .hbd_bnr .messa{position: absolute;top: 58%;left: 50%;transform: translateX(-50%);font-size: 20px;font-weight: bold;line-height: 1.5em;width: 100%;font-family: 'Roboto Slab', "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック体", YuGothic, sans-serif;letter-spacing: 0.05em;color: #868686; text-align: center;} .hbd_bnr .messa span{} #hbd_contents{max-width: 600px;margin: 0 auto;} #hbd_contents figure{ margin-bottom: 30px;} #hbd_contents figure img{ width: 100%;} #hbd_contents figure figcaption{ font-size: 12px; font-weight: bold; text-align: center; line-height: 1.5em;} @media only screen and (max-width: 768px){ .hbd_box{ padding: 12vw 5vw; background-size: 100%;} .hbd_box:before, .hbd_box:after{ height: 20vw; opacity: 1;} .hbd_box .tit{ margin: 0 auto 8px;} .hbd_box .name{ font-size: 24px;} .hbd_box .messa{ margin-bottom: 1em;font-size: 20px;} .hbd_box a{ font-size: 16px;} .hbd_box a:after{ font-size: 10px; right: 1em;} .hbd_btn{ position: inherit; bottom: 0; left: 0; width: 94%;margin: 15px auto 30px; transform: none;} .hbd_bnr{ } .hbd_bnr .messa{ font-size: 3.6vw; top: 58%;} #hbd_contents figure{ margin-bottom: 20px;} } .messa .m101:after{ content: '佐久間咲也 ';} .messa .m102:after{ content: '碓氷真澄 ';} .messa .m103:after{ content: '皆木 綴 ';} .messa .m104:after{ content: '茅ヶ崎 至 ';} .messa .m105:after{ content: 'シトロン ';} .messa .m106:after{ content: '卯木千景 ';} .messa .m201:after{ content: '皇 天馬 ';} .messa .m202:after{ content: '瑠璃川 幸 ';} .messa .m203:after{ content: '向坂 椋 ';} .messa .m204:after{ content: '斑鳩三角 ';} .messa .m205:after{ content: '三好一成 ';} .messa .m206:after{ content: '兵頭九門 ';} .messa .m301:after{ content: '摂津万里 ';} .messa .m302:after{ content: '兵頭十座 ';} .messa .m303:after{ content: '七尾太一 ';} .messa .m304:after{ content: '伏見 臣 ';} .messa .m305:after{ content: '古市左京 ';} .messa .m306:after{ content: '泉田 莇 ';} .messa .m401:after{ content: '月岡 紬 ';} .messa .m402:after{ content: '高遠 丞 ';} .messa .m403:after{ content: '御影 密 ';} .messa .m404:after{ content: '有栖川 誉 ';} .messa .m405:after{ content: '雪白 東 ';} .messa .m406:after{ content: 'ガイ ';} .messa .m501:after{ content: '松川伊助 ';} .messa .m502:after{ content: '迫田ケン ';} .messa .m503:after{ content: '鹿島雄三 ';} .messa .m601:after{ content: '飛鳥晴翔 ';} .messa .m602:after{ content: '神木坂レニ ';} .messa .m701:after{ content: 'MANKAI STAGE『A3!』';} .messa .m702:after{ content: 'MANKAI STAGE『A3!』';} .messa .m703:after{ content: 'MANKAI STAGE『A3!』';} .messa .m704:after{ content: 'MANKAI STAGE『A3!』';} .messa .m801:after{ content: 'MANKAI STAGE『A3!』';} /* swiper調整 */ #top_movie .swiper-button-prev, #top_movie .swiper-button-next, #top_inste .swiper-button-prev, #top_inste .swiper-button-next{ width: 3.5vw; height: 100%; transition: 0.15s ease-out; top:0; outline: none; display: none;} #top_movie .swiper-button-prev{ left: -2.5vw;} #top_movie .swiper-button-next{ right:-2.5vw;} #top_movie .swiper-button-prev:after, #top_movie .swiper-button-next:after{ content: ""; background-repeat: no-repeat; background-size: contain; width: 3.5vw; height: 3.5vw;} #top_movie .swiper-button-prev:after{ background-image: url("../images/a_prev.png");} #top_movie .swiper-button-next:after{ background-image: url("../images/a_next.png");} #top_movie .swiper-button-prev.swiper-button-disabled, #top_movie .swiper-button-next.swiper-button-disabled{ opacity:0; transition: 0.15s ease-out;} @media only screen and (max-width: 768px){ #top_movie .swiper-button-prev, #top_movie .swiper-button-next{ width: 8vw;} #top_movie .swiper-button-prev:after, #top_movie .swiper-button-next:after{ width:8vw; height: 8vw;} #top_movie .swiper-button-prev{ left: -3vw;} #top_movie .swiper-button-next{ right:-3vw;} } /**** google form ******/ .gform iframe{ width: 100%; height: 1700px; } @media only screen and (max-width: 768px){ .gform iframe{ width: 100%; height: 500vw;} } /**** address check page ******/ .ad_flow { padding-top: 2em;} .ad_flow ul{ display: flex; flex-wrap: wrap; justify-content: space-between;} .ad_flow li{ width:22%; border: 1px solid #ccc; padding: 1%; background-color: #f5f5f5; } .ad_flow li figure{ line-height: 0; border: 1px solid #ccc;position: relative;} .ad_flow li figure:after{ content: ""; background-image: url("../images/lp/ad_arrow.png"); position: absolute; right: -12.5%; top: 50%; transform: translate(100%,-50%); width: 20px; height: 50px; background-size:100%;} .ad_flow li:last-child figure:after{ display: none;} .ad_flow li img{ width: 100%;} .ad_flow li p{ margin: 1em 0 0; line-height: 1.5em;} @media only screen and (max-width: 768px){ .ad_flow li{ width: 100%; padding: 5%;} .ad_flow li figure{ width: 60%; margin: 0 auto;} .ad_flow li figure:after{ display: none;} .ad_flow li p{ margin: 1em 0 0; } } /*lightbox*/ #colorbox, #cboxOverlay, #cboxWrapper{position:absolute; top:0; left:0; z-index:9999; overflow:visible;} #cboxOverlay{position:fixed; width:100%; height:100%;} #cboxMiddleLeft, #cboxBottomLeft{clear:left;} #cboxContent{position:relative;} #cboxLoadedContent{overflow:auto;} #cboxTitle{margin:0;} #cboxLoadingOverlay, #cboxLoadingGraphic{position:absolute; top:0; left:0; width:100%; height:100%;} #cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{cursor:pointer;} .cboxPhoto{float:left; margin:auto; border:0; display:block; max-width:none;} .cboxIframe{width:100%; height:100%; display:block; border:0;} #colorbox, #cboxContent, #cboxLoadedContent{box-sizing:content-box;} /* User Style: Change the following styles to modify the appearance of ColorBox. They are ordered & tabbed in a way that represents the nesting of the generated HTML. */ #cboxOverlay{background:#000;} #colorbox{outline:none;} /* #cboxContent{margin-bottom:60px; overflow:visible;}*/ #cboxContent{margin-right:60px; overflow:visible; margin-bottom:0;} .cboxIframe{background:#000;} #cboxError{padding:50px; border:1px solid #ccc;} #cboxLoadedContent{background:#fff; border: 8px solid var(--sitekey); border-radius: 8px;} #cboxLoadingGraphic{background:url(../images/loading.gif) no-repeat center center;} #cboxLoadingOverlay{background:#fff;} #cboxTitle{position:absolute; top:-22px; left:0; color:#000;} #cboxCurrent{position:absolute; top:-22px; right:205px; text-indent:-9999px;} #cboxSlideshow, #cboxClose{text-indent:-9999px; width:40px; height:100%; position:absolute; top:0;background:url(../images/controls2.png) no-repeat 0 0;} #cboxClose{background-position:7px 0; right:-50px; border:0; outline:none;} #cboxClose:hover{background-position:-40px 0;} @media screen and (max-width: 768px) { #cboxContent{ margin-right:0; margin-bottom:50px;} #cboxClose{ right:0; top:inherit; bottom:-35px; height: 22px;} #cboxLoadedContent{ border: 4px solid var(--sitekey); border-radius: 5px;} } /* ================================= モーダル =================================== */ .modal_trigger {cursor: pointer;} .modal-box {position: fixed;width: 100%;height: 100vh;height: 100dvh;top: 0;right: 0;z-index: -1;transition: 0.5s ease;overflow: hidden;display: block;opacity: 0;visibility: hidden;background-position: center;pointer-events: none;z-index: 1000;} .modal-box:before {content: "";position: fixed;background: #000;opacity: 0.6;background-size: cover;width: 100%;height: 100vh;height: 100dvh;top: 0;left: 0;z-index: -1;pointer-events: none;} .modal-box .modal-inner {position: relative;width: 100%;height: 100%;display: flex;align-items: center;} .modal-box .modal-inner .modal-bg-close{position: absolute;width: 100%;height: 100%;top: 50%;left: 50%;transform: translate(-50%, -50%);} .modal-box .modal-inner .close {cursor: pointer;position: absolute;right: -60px;width: 50px;top: 20px;height: 40px;} .modal-box .modal-inner .close span {position: relative;width: 100%;height: 100%;display: block;} .modal-box .modal-inner .close span:before {content: "";position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%) rotate(45deg);background: #fff;width: 50px;height: 1px;} .modal-box .modal-inner .close span:after {content: "";position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%) rotate(-45deg);background: #fff;width: 50px;height: 1px;} .modal-box .modal-inner .modal-content {width: 92%;max-width: 1000px;margin: 0 auto;position: relative;padding: 50px;border: 1px solid #535353;text-align: left;background: #000;} .modal-box .modal-inner .modal-content .inner-scroll {overflow-y: scroll;max-height: calc(80vh - 40px);padding: 0 30px;} .modal-box .modal-inner .modal-content .inner-scroll::-webkit-scrollbar {display: none;} .modal-box .modal-inner .modal-content .inner-scroll::-webkit-scrollbar-track {display: none;} .modal-box.active {opacity: 1;visibility: visible;right: 0;pointer-events: all;} .modal-box.active:before{pointer-events: all;} .modal-box.active .modal-inner {pointer-events: all;} @media screen and (max-width: 768px) { .modal-box .modal-inner .modal-content {padding: 30px;} .modal-box .modal-inner .modal-content .inner-scroll {padding: 0;} .modal-box .modal-inner .close {right: 0px;top: -50px;} } /* ================================= モーダル =================================== */ /********************** FC EVENT 2025 teaser *******************************/ body.bg_vivid {background-image: url("../images/fc_event_2025/teaser/bg_pc.webp");} #fc_event_2025_teaser {} #fc_event_2025_teaser .fv { position: relative; display: block center; width: 100%; height: auto; padding-top: min(100lvh , calc(100% * 1080 / 1920)); margin-bottom: 100px; } #fc_event_2025_teaser .fv .wrap_main {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); display: block; width: 80%; max-width: 1400px; height: auto; margin: 0 auto;} #fc_event_2025_teaser .fv .wrap_main .title {display: block; width: 100%; height: auto; margin: 0 auto 6%;} #fc_event_2025_teaser .fv .wrap_main .title img {display: block; width: 100%; height: auto;} #fc_event_2025_teaser .fv .wrap_main .dateplace {display: block; width: 60%; height: auto; margin: 0 auto;} #fc_event_2025_teaser .fv .wrap_main .dateplace img {display: block; width: 100%; height: auto;} @media screen and (max-width: 768px) { body.bg_vivid::before {background-image: url(../images/fc_event_2025/teaser/bg_sp.webp);} #fc_event_2025_teaser .fv { padding-top: min(100lvh , calc(100% * 1920 / 1080)); margin-bottom: 0px; } #fc_event_2025_teaser .fv .wrap_main {width: 80%;} #fc_event_2025_teaser .fv .wrap_main .title {margin-bottom: 13%;} #fc_event_2025_teaser .fv .wrap_main .dateplace { width: 80%;} } .mentecs{ padding: 3vw 0 10vw; text-align: center;} .mentecs h3{ font-weight: bold; font-size: 1.5em; line-height: 1.7em;} @charset "utf-8"; .eena.active{ /* color: #e9618d;*/ transition: 0.2s ease; animation: eena_active .3s; } @keyframes eena_active{ 0%{ transform: scale(1);} 25%{ transform: scale(1.2);} 50%{ transform: scale(0.95);} } .anim_wrap{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .anim_wrap .heart{ color: #eb0808; margin: 0; top: 50%; left: 50%; transform: translate(-50%,-50%); opacity:0; text-align: center; position: absolute; width: 100%; height: 100%; } .anim_wrap .heart img{ width: 50%; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); } .anim_wrap.is-show .heart{ animation: bobble 1.2s; animation-delay: .2s; animation-fill-mode: both; opacity: 1; z-index: 2; } @keyframes bobble { 0% { transform: translate(-50%,-50%) scale(0, 0); color: #ff6464; opacity: 1;} 10% { transform: translate(-50%,-50%) scale(1.3, 1.3); opacity: 1;} 15% { transform: translate(-50%,-50%) scale(1.0, 1.0); opacity: 1;} 50% { transform: translate(-50%,-50%) scale(1.0, 1.0); opacity: 1;} 100% { transform: translate(-50%,-50%) scale(1.0, 1.0); opacity: 0;} } .anim_wrap.is-show .heart span{ position: absolute; font-size: 10px; font-weight: bold; white-space: nowrap; color: #fff; top: 44%; left: 50%; transform: translate(-50%,-50%) rotate(-9deg); } .anim_wrap:after, .anim_wrap:before{ border-radius: 50%; content:""; display: block; top: 50%; left: 50%; transform: translate(-50%,-50%); position: absolute; z-index: 1; width: 100px; height: 100px; } .anim_wrap.is-show:before{ animation: character-defaultAnim-before .3s !important; } .anim_wrap.is-show:after{ animation: character-defaultAnim-after .3s !important; } #contTopics .anim_wrap.is-show:before, #contRanking .anim_wrap.is-show:before, #contCharacter .anim_wrap.is-show:before{ animation: character-defaultAnim-before2 .3s !important; } #contTopics .anim_wrap.is-show:after, #contRanking .anim_wrap.is-show:after, #contCharacter .anim_wrap.is-show:after{ animation: character-defaultAnim-after2 .3s !important; } @keyframes character-defaultAnim-before { 0% { transform: translate(-50%,-50%) scale(0, 0); background-color: #7de8dc; opacity: 1;} 50% {background-color: #7de8dc;} 99% { opacity: 1;} 100% { transform: translate(-50%,-50%) scale(1, 1); background-color: #4dcdd4; opacity: 0;} } @keyframes character-defaultAnim-after { 0% { transform: translate(-50%,-50%) scale(0, 0); background-color: #fff; opacity: 1;} 50% { transform: translate(-50%,-50%) scale(0, 0); background-color: #fff;} 99% { opacity: 1;} 100% { transform: translate(-50%,-50%) scale(1, 1); background-color: #fff; opacity: 0;} } @keyframes character-defaultAnim-before2 { 0% { transform: translate(-50%,-50%) scale(0, 0); background-color: #fff; opacity: 1;} 50% {background-color: #fff;} 99% { opacity: 1;} 100% { transform: translate(-50%,-50%) scale(1, 1); background-color: #fff; opacity: 0;} } @keyframes character-defaultAnim-after2 { 0% { transform: translate(-50%,-50%) scale(0, 0); background-color: #c2eef0; opacity: 1;} 50% { transform: translate(-50%,-50%) scale(0, 0); background-color: #c2eef0;} 99% { opacity: 1;} 100% { transform: translate(-50%,-50%) scale(1, 1); background-color: #c2eef0; opacity: 0;} } .anim_wrap .bobble_particle{ width: 100%; height: 100%; position: absolute; top: 0; left: 0; } .anim_wrap .bobble_particle i{ border-radius: 50%; display: block; width: 30px; height: 30px; position: absolute; top: 48%; left: 50%; transform: translate(-50%,-50%); opacity: 0; } @media only screen and (max-width: 768px){ .anim_wrap .bobble_particle i{ width: 5vw; height: 5vw; } } .anim_wrap.is-show .bobble_particle i{ transition: .2s; opacity: 1; } .anim_wrap.is-show .bobble_particle i:nth-child(1){ animation: bobble_particle_01 1s ease-out .3s; } @keyframes bobble_particle_01 { 0% { transform: rotate(10deg) translate(200px, 0); background-color: #f7cbb2;} 80% { transform: rotate(10deg) translate(20px, 0); } 100% { width: 0; height: 0; background-color: #f7cbb2;} } .anim_wrap.is-show .bobble_particle i:nth-child(2){ animation: bobble_particle_02 1s ease-out .3s; } @keyframes bobble_particle_02 { 0% { transform: rotate(70deg) translate(200px, 0); background-color: #b7daf2;} 80% { transform: rotate(70deg) translate(20px, 0); } 100% { width: 0; height: 0; background-color: #6eb4e6;} } .anim_wrap.is-show .bobble_particle i:nth-child(3){ animation: bobble_particle_03 1s ease-out .3s; } @keyframes bobble_particle_03 { 0% { transform: rotate(130deg) translate(200px, 0); background-color: #fbdf84;} 80% { transform: rotate(130deg) translate(20px, 0); } 100% { width: 0; height: 0; background-color: #fac80f;} } .anim_wrap.is-show .bobble_particle i:nth-child(4){ animation: bobble_particle_04 1s ease-out .3s; } @keyframes bobble_particle_04 { 0% { transform: rotate(190deg) translate(200px, 0); background-color: #f7cbb2;} 80% { transform: rotate(190deg) translate(20px, 0); } 100% { width: 0; height: 0; background-color: #f09664;} } .anim_wrap.is-show .bobble_particle i:nth-child(5){ animation: bobble_particle_05 1s ease-out .3s; } @keyframes bobble_particle_05 { 0% { transform: rotate(250deg) translate(200px, 0); background-color: #b7daf2;} 80% { transform: rotate(250deg) translate(20px, 0); } 100% { width: 0; height: 0; background-color: #6eb4e6;} } .anim_wrap.is-show .bobble_particle i:nth-child(6){ animation: bobble_particle_06 1s ease-out .3s; } @keyframes bobble_particle_06 { 0% { transform: rotate(310deg) translate(200px, 0); background-color: #fbdf84;} 80% { transform: rotate(310deg) translate(20px, 0); } 100% { width: 0; height: 0; background-color: #fac80f;} } .anim_wrap.is-show .bobble_particle2 i:nth-child(1){ animation: bobble_particle2_02 1s ease-out .3s forwards; } @keyframes bobble_particle2_01 { 0% { transform: rotate(20deg) translate(200px, 0); background-color: #f7cbb2;} 40% { transform: rotate(20deg) translate(205px, 0); } 60%,100% { transform: rotate(20deg) translate(205px, 0); width: 0; height: 0; background-color: #f7cbb2;} } .anim_wrap.is-show .bobble_particle2 i:nth-child(2){ animation: bobble_particle2_03 1s ease-out .3s forwards; } @keyframes bobble_particle2_02 { 0% { transform: rotate(80deg) translate(200px, 0); background-color: #b7daf2;} 40% { transform: rotate(80deg) translate(205px, 0); } 60%,100% { transform: rotate(80deg) translate(205px, 0); width: 0; height: 0; background-color: #6eb4e6;} } .anim_wrap.is-show .bobble_particle2 i:nth-child(3){ animation: bobble_particle2_04 1s ease-out .3s forwards; } @keyframes bobble_particle2_03 { 0% { transform: rotate(140deg) translate(200px, 0); background-color: #fbdf84;} 40% { transform: rotate(140deg) translate(205px, 0); } 60%,100% { transform: rotate(140deg) translate(205px, 0); width: 0; height: 0; background-color: #fac80f;} } .anim_wrap.is-show .bobble_particle2 i:nth-child(4){ animation: bobble_particle2_05 1s ease-out .3s forwards; } @keyframes bobble_particle2_04 { 0% { transform: rotate(200deg) translate(200px, 0); background-color: #f7cbb2;} 40% { transform: rotate(200deg) translate(205px, 0); } 60%,100% { transform: rotate(200deg) translate(205px, 0); width: 0; height: 0; background-color: #f09664;} } .anim_wrap.is-show .bobble_particle2 i:nth-child(5){ animation: bobble_particle2_06 1s ease-out .3s forwards; } @keyframes bobble_particle2_05 { 0% { transform: rotate(260deg) translate(200px, 0); background-color: #b7daf2;} 40% { transform: rotate(260deg) translate(205px, 0); } 60%,100% { transform: rotate(260deg) translate(205px, 0); width: 0; height: 0; background-color: #6eb4e6;} } .anim_wrap.is-show .bobble_particle2 i:nth-child(6){ animation: bobble_particle2_01 1s ease-out .3s forwards; } @keyframes bobble_particle2_06 { 0% { transform: rotate(320deg) translate(200px, 0); background-color: #fbdf84;} 40% { transform: rotate(320deg) translate(205px, 0); } 60%,100% { transform: rotate(320deg) translate(205px, 0); width: 0; height: 0; background-color: #fac80f;} } @keyframes bobble_particle_01_sp { 0% { transform: rotate(10deg) translate(25vw, 0); background-color: #f7cbb2;} 80% { transform: rotate(10deg) translate(2vw, 0); } 100% { width: 0; height: 0; background-color: #f7cbb2;} } @keyframes bobble_particle_02_sp { 0% { transform: rotate(70deg) translate(25vw, 0); background-color: #b7daf2;} 80% { transform: rotate(70deg) translate(2vw, 0); } 100% { width: 0; height: 0; background-color: #6eb4e6;} } @keyframes bobble_particle_03_sp { 0% { transform: rotate(130deg) translate(25vw, 0); background-color: #fbdf84;} 80% { transform: rotate(130deg) translate(2vw, 0); } 100% { width: 0; height: 0; background-color: #fac80f;} } @keyframes bobble_particle_04_sp { 0% { transform: rotate(190deg) translate(25vw, 0); background-color: #f7cbb2;} 80% { transform: rotate(190deg) translate(2vw, 0); } 100% { width: 0; height: 0; background-color: #f09664;} } @keyframes bobble_particle_05_sp { 0% { transform: rotate(250deg) translate(25vw, 0); background-color: #b7daf2;} 80% { transform: rotate(250deg) translate(2vw, 0); } 100% { width: 0; height: 0; background-color: #6eb4e6;} } @keyframes bobble_particle_06_sp { 0% { transform: rotate(310deg) translate(25vw, 0); background-color: #fbdf84;} 80% { transform: rotate(310deg) translate(2vw, 0); } 100% { width: 0; height: 0; background-color: #fac80f;} } @keyframes bobble_particle2_01_sp { 0% { transform: rotate(20deg) translate(25vw, 0); background-color: #f7cbb2;} 40% { transform: rotate(20deg) translate(27vw, 0); } 60%,100% { transform: rotate(20deg) translate(27vw, 0); width: 0; height: 0; background-color: #f7cbb2;} } @keyframes bobble_particle2_02_sp { 0% { transform: rotate(80deg) translate(25vw, 0); background-color: #b7daf2;} 40% { transform: rotate(80deg) translate(27vw, 0); } 60%,100% { transform: rotate(80deg) translate(27vw, 0); width: 0; height: 0; background-color: #6eb4e6;} } @keyframes bobble_particle2_03_sp { 0% { transform: rotate(140deg) translate(25vw, 0); background-color: #fbdf84;} 40% { transform: rotate(140deg) translate(27vw, 0); } 60%,100% { transform: rotate(140deg) translate(27vw, 0); width: 0; height: 0; background-color: #fac80f;} } @keyframes bobble_particle2_04_sp { 0% { transform: rotate(200deg) translate(25vw, 0); background-color: #f7cbb2;} 40% { transform: rotate(200deg) translate(27vw, 0); } 60%,100% { transform: rotate(200deg) translate(27vw, 0); width: 0; height: 0; background-color: #f09664;} } @keyframes bobble_particle2_05_sp { 0% { transform: rotate(260deg) translate(25vw, 0); background-color: #b7daf2;} 40% { transform: rotate(260deg) translate(27vw, 0); } 60%,100% { transform: rotate(260deg) translate(27vw, 0); width: 0; height: 0; background-color: #6eb4e6;} } @keyframes bobble_particle2_06_sp { 0% { transform: rotate(320deg) translate(25vw, 0); background-color: #fbdf84;} 40% { transform: rotate(320deg) translate(27vw, 0); } 60%,100% { transform: rotate(320deg) translate(27vw, 0); width: 0; height: 0; background-color: #fac80f;} } @media only screen and (max-width: 768px){ .anim_wrap.is-show .bobble_particle i:nth-child(1){ animation: bobble_particle_01_sp 1s ease-out .3s; } .anim_wrap.is-show .bobble_particle i:nth-child(2){ animation: bobble_particle_02_sp 1s ease-out .3s; } .anim_wrap.is-show .bobble_particle i:nth-child(3){ animation: bobble_particle_03_sp 1s ease-out .3s; } .anim_wrap.is-show .bobble_particle i:nth-child(4){ animation: bobble_particle_04_sp 1s ease-out .3s; } .anim_wrap.is-show .bobble_particle i:nth-child(5){ animation: bobble_particle_05_sp 1s ease-out .3s; } .anim_wrap.is-show .bobble_particle i:nth-child(6){ animation: bobble_particle_06_sp 1s ease-out .3s; } .anim_wrap.is-show .bobble_particle2 i:nth-child(1){ animation: bobble_particle2_02_sp 1s ease-out .3s forwards; } .anim_wrap.is-show .bobble_particle2 i:nth-child(2){ animation: bobble_particle2_03_sp 1s ease-out .3s forwards; } .anim_wrap.is-show .bobble_particle2 i:nth-child(3){ animation: bobble_particle2_04_sp 1s ease-out .3s forwards; } .anim_wrap.is-show .bobble_particle2 i:nth-child(4){ animation: bobble_particle2_05_sp 1s ease-out .3s forwards; } .anim_wrap.is-show .bobble_particle2 i:nth-child(5){ animation: bobble_particle2_06_sp 1s ease-out .3s forwards; } .anim_wrap.is-show .bobble_particle2 i:nth-child(6){ animation: bobble_particle2_01_sp 1s ease-out .3s forwards; } }