.u-box-section {
padding: 0 20px;
}
.u-box-section:after {
clear: both;
content: "";
display: block;
}
@media print, screen and (min-width: 768px) {
.u-box-section {
padding: 0;
}
}
.u-mainv {
position: relative;
}
@media print, screen and (min-width: 768px) {
.u-mainv {
max-width: 1000px;
margin: 100px auto 0;
padding: 0 30px;
box-sizing: content-box;
}
}
.u-mainv .mainv-logo {
position: absolute;
margin: 0;
z-index: 1;
}
@media print, screen and (min-width: 768px) {
.u-mainv .mainv-logo {
height: 100%;
text-align: center;
position: absolute;
top: auto;
left: 0;
right: 0;
margin: auto;
}
}
.u-mainv .mainv-img {
position: relative;
}
@media print, screen and (min-width: 768px) {
.u-mainv .mainv-img {
margin-top: 58px;
text-align: center;
}
}
.u-mainv .mainv-img > img {
width: 100%;
}
@media print, screen and (min-width: 768px) {
.u-mainv .mainv-img > img {
width: auto;
}
}
.u-mainv .mainv-img .anim-2 img, .u-mainv .mainv-img .anim-3 img, .u-mainv .mainv-img .anim-4 img, .u-mainv .mainv-img .anim-5 img {
position: absolute;
top: 0;
left: 0;
right: 0;
margin: auto;
}
.u-mainv .mainv-campaign {
margin: 0;
}
.u-mainv .mainv-campaign > a {
display: block;
position: absolute;
bottom: 20vw;
right: 2vw;
z-index: 1;
-webkit-animation: campaign_anime 1.5s ease 0s infinite alternate;
animation: campaign_anime 1.5s ease 0s infinite alternate;
}
@media print, screen and (min-width: 768px) {
.u-mainv .mainv-campaign > a {
bottom: 85px;
right: 130px;
}
}
.u-mainv .mainv-campaign > a img {
width: 32vw;
-webkit-filter: none;
filter: none;
}
@media print, screen and (min-width: 768px) {
.u-mainv .mainv-campaign > a img {
width: 170px;
}
}
.u-mainv .mainv-campaign > a img.campaign-off {
opacity: 1;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
transition: all 0s;
}
.u-mainv .mainv-campaign > a img.campaign-on {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
opacity: 0;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
transition: all .2s ease-out;
}
[data-whatinput="keyboard"] .u-mainv .mainv-campaign > a:focus img.campaign-off {
opacity: 0;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
transition: all .2s .1s;
}
[data-whatinput="keyboard"] .u-mainv .mainv-campaign > a:focus img.campaign-on {
opacity: 1;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
}
@media print, screen and (min-width: 1025px) {
.u-mainv .mainv-campaign > a:hover img.campaign-off {
opacity: 0;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
transition: all .2s .1s;
}
.u-mainv .mainv-campaign > a:hover img.campaign-on {
opacity: 1;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
}
}
@-webkit-keyframes campaign_anime {
0% {
-webkit-transform: rotate(5deg);
transform: rotate(5deg);
}
100% {
-webkit-transform: rotate(-5deg);
transform: rotate(-5deg);
}
}
@keyframes campaign_anime {
0% {
-webkit-transform: rotate(5deg);
transform: rotate(5deg);
}
100% {
-webkit-transform: rotate(-5deg);
transform: rotate(-5deg);
}
}
@-webkit-keyframes brightness {
0% {
filter: url('data:image/svg+xml;charset=utf-8,#filter');
-webkit-filter: brightness(100%) drop-shadow(0px 0px 5px #fff) drop-shadow(0px 0px 5px #fff);
filter: brightness(100%) drop-shadow(0px 0px 5px #fff) drop-shadow(0px 0px 5px #fff);
}
40% {
filter: url('data:image/svg+xml;charset=utf-8,#filter');
-webkit-filter: brightness(140%) drop-shadow(0px 0px 5px #fff) drop-shadow(0px 0px 5px #fff);
filter: brightness(140%) drop-shadow(0px 0px 5px #fff) drop-shadow(0px 0px 5px #fff);
}
80% {
filter: url('data:image/svg+xml;charset=utf-8,#filter');
-webkit-filter: brightness(120%) drop-shadow(0px 0px 5px #fff) drop-shadow(0px 0px 5px #fff);
filter: brightness(120%) drop-shadow(0px 0px 5px #fff) drop-shadow(0px 0px 5px #fff);
}
100% {
filter: url('data:image/svg+xml;charset=utf-8,#filter');
-webkit-filter: brightness(120%) drop-shadow(0px 0px 5px #fff) drop-shadow(0px 0px 5px #fff);
filter: brightness(120%) drop-shadow(0px 0px 5px #fff) drop-shadow(0px 0px 5px #fff);
}
}
@keyframes brightness {
0% {
filter: url('data:image/svg+xml;charset=utf-8,#filter');
-webkit-filter: brightness(100%) drop-shadow(0px 0px 5px #fff) drop-shadow(0px 0px 5px #fff);
filter: brightness(100%) drop-shadow(0px 0px 5px #fff) drop-shadow(0px 0px 5px #fff);
}
40% {
filter: url('data:image/svg+xml;charset=utf-8,#filter');
-webkit-filter: brightness(140%) drop-shadow(0px 0px 5px #fff) drop-shadow(0px 0px 5px #fff);
filter: brightness(140%) drop-shadow(0px 0px 5px #fff) drop-shadow(0px 0px 5px #fff);
}
80% {
filter: url('data:image/svg+xml;charset=utf-8,#filter');
-webkit-filter: brightness(120%) drop-shadow(0px 0px 5px #fff) drop-shadow(0px 0px 5px #fff);
filter: brightness(120%) drop-shadow(0px 0px 5px #fff) drop-shadow(0px 0px 5px #fff);
}
100% {
filter: url('data:image/svg+xml;charset=utf-8,#filter');
-webkit-filter: brightness(120%) drop-shadow(0px 0px 5px #fff) drop-shadow(0px 0px 5px #fff);
filter: brightness(120%) drop-shadow(0px 0px 5px #fff) drop-shadow(0px 0px 5px #fff);
}
}
.u-registbtn {
display: block;
margin-top: 16px;
}
.u-registbtn > a {
transition: all .2s ease-out;
}
[data-whatinput="keyboard"] .u-registbtn > a:focus img {
-webkit-animation-name: brightness;
animation-name: brightness;
-webkit-animation-duration: .5s;
animation-duration: .5s;
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
-webkit-animation-iteration-count: 1;
animation-iteration-count: 1;
-webkit-animation-direction: alternate;
animation-direction: alternate;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
opacity: .75\0;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=NaN)";
}
@media print, screen and (min-width: 1025px) {
.u-registbtn > a:hover img {
-webkit-animation-name: brightness;
animation-name: brightness;
-webkit-animation-duration: .5s;
animation-duration: .5s;
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
-webkit-animation-iteration-count: 1;
animation-iteration-count: 1;
-webkit-animation-direction: alternate;
animation-direction: alternate;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
opacity: .75\0;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=NaN)";
}
}
#u-regist {
margin-top: 42px;
float: left;
}
@media print, screen and (min-width: 768px) {
#u-regist {
margin-top: 160px;
float: none;
}
}
#u-regist .regist-inner {
margin-top: 22px;
}
@media print, screen and (min-width: 768px) {
#u-regist .regist-inner {
max-width: 1000px;
margin: 72px auto 0;
padding: 0 30px;
box-sizing: content-box;
}
}
#u-regist .regist-inner[data-anim] {
opacity: 0;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
transition: all .5s ease-out;
-webkit-transform: translateY(10px);
transform: translateY(10px);
}
#u-regist .regist-inner[data-anim="on"] {
opacity: 1;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
-webkit-transform: translateY(0px);
transform: translateY(0px);
float: left;
}
#u-regist .regist-inner .regist-list {
list-style: none;
margin: 0;
padding: 0;
}
@media print, screen and (min-width: 768px) {
#u-regist .regist-inner[data-anim="on"] {
float: none;
}
#u-regist .regist-inner .regist-list {
margin: 0 -20px;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
}
@media print {
#u-regist .regist-inner .regist-list {
display: block;
letter-spacing: -.40em;
}
}
@media print, screen and (min-width: 768px) {
#u-regist .regist-inner .regist-list .list-item {
width: calc(100% / 2);
width: calc((100% / 2 ) - 0.1px) \0;
padding: 0 20px;
}
}
@media print {
#u-regist .regist-inner .regist-list .list-item {
width: 50%;
display: inline-block;
padding: 0 20px;
box-sizing: border-box;
vertical-align: top;
letter-spacing: normal;
}
}
#u-regist .regist-inner .regist-list .list-item + .list-item {
margin-top: 20px;
}
@media print, screen and (min-width: 768px) {
#u-regist .regist-inner .regist-list .list-item + .list-item {
margin-top: 0;
}
}
@media print, screen and (min-width: 768px) {
#u-regist .regist-inner .regist-list .list-item:nth-child(n+3) {
margin-top: 40px;
}
}
#u-regist .regist-inner .regist-list .list-item .item-inner {
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
box-shadow: 1px 3px 0px 1px rgba(0, 0, 0, 0.2);
background-color: #fff;
height: 60px;
border-radius: 30px;
padding: 0 18px 0 45px;
position: relative;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
overflow: hidden;
}
@media print, screen and (min-width: 768px) {
#u-regist .regist-inner .regist-list .list-item .item-inner {
height: 100px;
border-radius: 50px;
padding: 0 24px 0 81px;
}
}
#u-regist .regist-inner .regist-list .list-item .item-inner .item-img {
border-radius: 50%;
width: 30px;
height: 30px;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
position: absolute;
top: 0;
bottom: 0;
left: 15px;
margin: auto;
}
@media print, screen and (min-width: 768px) {
#u-regist .regist-inner .regist-list .list-item .item-inner .item-img {
width: 60px;
height: 60px;
left: 21px;
border-radius: 50%;
}
}
#u-regist .regist-inner .regist-list .list-item .item-inner .item-img:before {
content: '';
border-radius: 50%;
display: block;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
transition: all .5s ease-out;
}
#u-regist .regist-inner .regist-list .list-item .item-inner .item-img > img {
position: relative;
}
#u-regist .regist-inner .regist-list .list-item .item-inner .item-txt {
position: relative;
}
@media print, screen and (min-width: 768px) {
#u-regist .regist-inner .regist-list .list-item .item-inner .item-txt {
position: absolute;
left: 86px;
right: 29px;
top: 0;
bottom: 0;
}
}
@media print, screen and (min-width: 768px) {
#u-regist .regist-inner .regist-list .list-item .item-inner .item-txt > img {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
}
#u-regist .regist-inner .regist-list .list-item .item-inner .item-txt > img.txt-off {
transition: all .2s ease-out .0s;
}
#u-regist .regist-inner .regist-list .list-item .item-inner .item-txt > img.txt-on {
opacity: 0;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
transition: all .2s ease-out;
}
[data-whatinput="keyboard"] #u-regist .regist-inner .regist-list .list-item .item-inner:focus .item-img:before {
top: -520px;
bottom: -520px;
left: -520px;
right: -520px;
}
[data-whatinput="keyboard"] #u-regist .regist-inner .regist-list .list-item .item-inner:focus .item-txt > img.txt-off {
opacity: 0;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
}
[data-whatinput="keyboard"] #u-regist .regist-inner .regist-list .list-item .item-inner:focus .item-txt > img.txt-on {
opacity: 1;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
transition: all .2s ease-out .3s;
}
@media print, screen and (min-width: 1025px) {
#u-regist .regist-inner .regist-list .list-item .item-inner:hover .item-img:before {
top: -520px;
bottom: -520px;
left: -520px;
right: -520px;
}
#u-regist .regist-inner .regist-list .list-item .item-inner:hover .item-txt > img.txt-off {
opacity: 0;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
}
#u-regist .regist-inner .regist-list .list-item .item-inner:hover .item-txt > img.txt-on {
opacity: 1;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
transition: all .2s ease-out .3s;
}
}
#u-regist .regist-inner .regist-list .list-item.item-twitter .item-inner .item-img:before {
background-color: #1da1f2;
}
#u-regist .regist-inner .regist-list .list-item.item-twitter .item-inner .item-img > img {
width: 18.5px;
}
@media print, screen and (min-width: 768px) {
#u-regist .regist-inner .regist-list .list-item.item-twitter .item-inner .item-img > img {
width: 36px;
}
}
#u-regist .regist-inner .regist-list .list-item.item-twitter .item-inner .item-txt > img {
width: 74%;
height: 74%;
margin-left: 10%;
}
@media print, screen and (min-width: 768px) {
#u-regist .regist-inner .regist-list .list-item.item-twitter .item-inner .item-txt > img {
height: auto;
}
}
#u-regist .regist-inner .regist-list .list-item.item-instagram .item-inner .item-img:before {
background-color: #DD3077;
}
#u-regist .regist-inner .regist-list .list-item.item-instagram .item-inner .item-img > img {
width: 20px;
}
@media print, screen and (min-width: 768px) {
#u-regist .regist-inner .regist-list .list-item.item-instagram .item-inner .item-img > img {
width: 36px;
}
}
#u-regist .regist-inner .regist-list .list-item.item-instagram .item-inner .item-txt > img {
width: 80%;
height: 80%;
margin-left: 10%;
}
@media print, screen and (min-width: 768px) {
#u-regist .regist-inner .regist-list .list-item.item-instagram .item-inner .item-txt > img {
height: auto;
}
}
#u-regist .regist-inner .regist-list .list-item.item-mail .item-inner .item-img:before {
background-color: #dc6035;
}
#u-regist .regist-inner .regist-list .list-item.item-mail .item-inner .item-img > img {
width: 19.5px;
}
@media print, screen and (min-width: 768px) {
#u-regist .regist-inner .regist-list .list-item.item-mail .item-inner .item-img > img {
width: 39px;
}
}
#u-regist .regist-inner .regist-list .list-item.item-mail .item-inner .item-txt > img {
width: 80%;
height: 80%;
margin-left: 10%;
}
@media print, screen and (min-width: 768px) {
#u-regist .regist-inner .regist-list .list-item.item-mail .item-inner .item-txt > img {
height: auto;
}
}
#u-regist .regist-inner .regist-list .list-item.item-facebook .item-inner .item-img:before {
background-color: #1877F2;
}
#u-regist .regist-inner .regist-list .list-item.item-facebook .item-inner .item-img > img {
width: 20px;
}
@media print, screen and (min-width: 768px) {
#u-regist .regist-inner .regist-list .list-item.item-facebook .item-inner .item-img > img {
width: 40px;
}
}
#u-regist .regist-inner .regist-list .list-item.item-facebook .item-inner .item-txt > img {
width: 80%;
height: 80%;
margin-left: 10%;
}
@media print, screen and (min-width: 768px) {
#u-regist .regist-inner .regist-list .list-item.item-facebook .item-inner .item-txt > img {
height: auto;
}
}
#u-regist .regist-inner .regist-list .list-item.item-discord .item-inner .item-img:before {
background-color: #8c9eff;
}
#u-regist .regist-inner .regist-list .list-item.item-discord .item-inner .item-img > img {
width: 16px;
}
@media print, screen and (min-width: 768px) {
#u-regist .regist-inner .regist-list .list-item.item-discord .item-inner .item-img > img {
width: 34px;
}
}
#u-regist .regist-inner .regist-list .list-item.item-discord .item-inner .item-txt > img {
width: 74%;
height: 74%;
margin-left: 10%;
}
@media print, screen and (min-width: 768px) {
#u-regist .regist-inner .regist-list .list-item.item-discord .item-inner .item-txt > img {
height: auto;
}
}
#u-regist .regist-inner .regist-list .list-item.item-youtube .item-inner .item-img:before {
background-color: #ff0000;
}
#u-regist .regist-inner .regist-list .list-item.item-youtube .item-inner .item-img > img {
width: 40px;
}
@media print, screen and (min-width: 768px) {
#u-regist .regist-inner .regist-list .list-item.item-youtube .item-inner .item-img > img {
width: 60px;
}
}
#u-regist .regist-inner .regist-list .list-item.item-youtube .item-inner .item-txt > img {
width: 80%;
height: 80%;
margin-left: 10%;
}
@media print, screen and (min-width: 768px) {
#u-regist .regist-inner .regist-list .list-item.item-youtube .item-inner .item-txt > img {
height: auto;
}
}
.u-txt-youtube {
position: relative;
margin-top: 20px;
}
@media print, screen and (min-width: 768px) {
.u-txt-youtube {
width: 720px;
margin: 30px auto 0;
}
}
.u-txt-youtube .youtube-ttl {
font-size: 18px;
font-size: 1.8rem;
color: #49bcbd;
line-height: 1.5;
font-weight: bold;
text-align: center;
text-shadow: #fff 2px 0px 1px, #fff -2px 0px 1px, #fff 0px -2px 1px, #fff 0px 2px 1px, #fff 2px 2px 1px, #fff -2px 2px 1px, #fff 2px -2px 1px, #fff -2px -2px 1px, #fff 1px 2px 1px, #fff -1px 2px 1px, #fff 1px -2px 1px, #fff -1px -2px 1px, #fff 2px 1px 1px, #fff -2px 1px 1px, #fff 2px -1px 1px, #fff -2px -1px 1px, #fff 1px 1px 1px, #fff -1px 1px 1px, #fff 1px -1px 1px, #fff -1px -1px 1px;
}
@media print, screen and (min-width: 768px) {
.u-txt-youtube .youtube-ttl {
font-size: 2.4rem;
}
}
.u-txt-youtube .youtube-ttl ruby > rt {
text-align: center;
-webkit-transform: translateY(0.4em);
transform: translateY(0.4em);
-webkit-transform: translateY(0) \0;
transform: translateY(0) \0;
}
.u-txt-youtube .youtube-ttl ruby > rt.ruby-abjust {
margin-left: -1em;
}
.u-txt-youtube .youtube-desc {
font-size: 14px;
font-size: 1.4rem;
color: #fff;
margin-top: 10px;
text-align: center;
}
@media print, screen and (min-width: 768px) {
.u-txt-youtube .youtube-desc {
font-size: 1.6rem;
}
}
#u-movie {
margin-top: -3.5333vw;
}
@media print, screen and (min-width: 768px) {
#u-movie {
margin-top: 40px;
}
}
#u-campaign {
margin-top: 42px;
float: left;
}
@media print, screen and (min-width: 768px) {
#u-campaign {
margin-top: 160px;
float: none;
}
}
#u-news {
margin-top: 40px;
float: left;
}
@media print, screen and (min-width: 768px) {
#u-news {
margin-top: 160px;
float: none;
}
}
#u-news .news-btn {
text-align: center;
margin-top: 30px;
}
@media print, screen and (min-width: 768px) {
#u-news .news-btn {
margin-top: 40px;
}
}
@media print, screen and (min-width: 768px) {
#u-news .news-btn .u-btn-simple {
max-width: 300px;
width: 100%;
}
}
.u-btn-simple {
display: inline-block;
box-shadow: 1px 3px 0px 1px rgba(0, 0, 0, 0.2);
background-color: #fff;
border-radius: 30px;
padding: 11px 15px 11px 15px;
position: relative;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
font-size: 16px;
font-weight: bold;
position: relative;
line-height: 1.5;
overflow: hidden;
transition: all .2s ease-out;
}
@media print, screen and (min-width: 768px) {
.u-btn-simple {
padding: 21px 30px 20px 30px;
border-radius: 33px;
}
}
.u-btn-simple:before {
content: '';
width: 0%;
height: 100%;
position: absolute;
top: 0;
bottom: 0;
right: 0;
margin: auto;
transition: width .3s ease;
background: #3b6ea1;
z-index: 2;
}
.u-btn-simple:after {
content: '';
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-color: #fff;
z-index: 1;
}
.u-btn-simple > span {
position: relative;
transition: all .3s ease-out;
color: #3b6ea1;
font-size: 18px;
display: inline-block;
padding: 0 37.5px 0 37.5px;
z-index: 10;
}
@media print, screen and (min-width: 768px) {
.u-btn-simple > span {
padding: 0px 35px 0px 35px;
}
}
.u-btn-simple > span:after {
content: '';
background: url(../../svg/i_arrow.svg?c=3b6ea1) center no-repeat;
background-size: 100% auto;
width: 10px;
height: 15px;
display: block;
position: absolute;
top: 0;
bottom: 0;
right: 0;
margin: auto;
z-index: 1;
transition: all .3s ease-out;
}
@media print, screen and (min-width: 768px) {
.u-btn-simple > span:after {
width: 14px;
height: 21px;
right: 0;
}
}
[data-whatinput="keyboard"] .u-btn-simple:focus {
background-color: transparent;
text-decoration: none;
}
[data-whatinput="keyboard"] .u-btn-simple:focus:before {
width: 100%;
left: 0;
right: auto;
}
[data-whatinput="keyboard"] .u-btn-simple:focus:after {
opacity: 0;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
transition: all .0s ease-out .3s;
}
[data-whatinput="keyboard"] .u-btn-simple:focus > span {
color: #fff;
transition: all .3s ease-out .3s;
}
[data-whatinput="keyboard"] .u-btn-simple:focus > span:after {
background-image: url(../../svg/i_arrow.svg?c=fff);
transition: all .3s ease-out .3s;
}
@media print, screen and (min-width: 1025px) {
.u-btn-simple:hover {
background-color: transparent;
text-decoration: none;
}
.u-btn-simple:hover:before {
width: 100%;
left: 0;
right: auto;
}
.u-btn-simple:hover:after {
opacity: 0;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
transition: all .0s ease-out .3s;
}
.u-btn-simple:hover > span {
color: #fff;
transition: all .3s ease-out .3s;
}
.u-btn-simple:hover > span:after {
background-image: url(../../svg/i_arrow.svg?c=fff);
transition: all .3s ease-out .3s;
}
}
.u-box-twitter {
background-color: #ffffff;
position: relative;
margin: 40px 0px 0;
padding: 2px 2px 14px;
border-radius: 6px;
overflow: hidden;
}
@media print, screen and (min-width: 768px) {
.u-box-twitter {
padding-right: 14px;
}
}
@media screen and (max-width: 767px) {
.u-box-twitter iframe {
width: 740px !important;
}
}
.u-box-twitter:before {
content: '';
border: solid 2px #1da1f2;
border-radius: 4px;
position: absolute;
top: 2px;
bottom: 2px;
left: 2px;
right: 2px;
}
.u-box-twitter .twitter-head {
background-color: #1da1f2;
border-radius: 6px 6px 0 0;
padding: 8px 13px 7px 8px;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
}
@media print, screen and (min-width: 768px) {
.u-box-twitter .twitter-head {
padding: 11px 15px 12px 15px;
margin-right: -12px;
margin-bottom: 10px;
}
}
.u-box-twitter .twitter-head .head-ttl {
color: #fff;
margin: 0;
line-height: 1.25;
position: relative;
padding-top: 3px;
padding-left: 21px;
font-size: 10px;
min-height: 17px;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
align-item: center;
}
@media print, screen and (min-width: 768px) {
.u-box-twitter .twitter-head .head-ttl {
font-size: 14px;
padding-left: 28px;
}
}
.u-box-twitter .twitter-head .head-ttl:before {
content: '';
width: 15px;
height: 12.5px;
background: url(../../svg/i_twitter.svg) center no-repeat;
background-size: 100% auto;
display: block;
position: absolute;
top: 0;
bottom: 0;
left: 0;
margin: auto;
}
@media print, screen and (min-width: 768px) {
.u-box-twitter .twitter-head .head-ttl:before {
width: 20px;
height: 18.5px;
}
}
.u-box-twitter .twitter-head .head-follow {
margin: 0;
line-height: 1.25;
padding-left: 16px;
position: relative;
}
@media print, screen and (min-width: 768px) {
.u-box-twitter .twitter-head .head-follow {
padding-left: 20px;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
}
}
.u-box-twitter .twitter-head .head-follow:before {
content: '';
background-color: #fff;
height: 10px;
width: 1px;
top: 0;
bottom: 0;
left: 0;
margin: auto;
display: block;
position: absolute;
}
@media print, screen and (min-width: 768px) {
.u-box-twitter .twitter-head .head-follow:before {
height: 15px;
}
}
.u-box-twitter .twitter-head .head-follow > a {
color: #fff;
font-size: 10px;
}
@media print, screen and (min-width: 768px) {
.u-box-twitter .twitter-head .head-follow > a {
font-size: 14px;
}
}
.u-box-twitter .twitter-inner {
position: relative;
z-index: 1;
overflow-y: auto;
height: 240px;
padding: 12px 1px 0;
}
@media print, screen and (min-width: 768px) {
.u-box-twitter .twitter-inner {
height: 281px;
}
}
@media print, screen and (min-width: 768px) {
.u-box-col2pc {
margin: 0 -20px;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
max-width: 1040px;
margin: 69px auto 0;
padding: 0 10px;
box-sizing: content-box;
}
}
@media print {
.u-box-col2pc {
display: block;
letter-spacing: -.40em;
}
}
@media print, screen and (min-width: 768px) {
.u-box-col2pc .col2pc-item {
width: calc(100% / 2);
width: calc((100% / 2 ) - 0.1px) \0;
padding: 0 20px;
}
}
@media print {
.u-box-col2pc .col2pc-item {
width: 50%;
display: inline-block;
padding: 0 20px;
box-sizing: border-box;
vertical-align: top;
letter-spacing: normal;
}
}
.u-box-col2pc .col2pc-item[data-anim] {
opacity: 0;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
transition: all .5s ease-out;
-webkit-transform: translateY(10px);
transform: translateY(10px);
}
.u-box-col2pc .col2pc-item[data-anim="on"] {
opacity: 1;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
-webkit-transform: translateY(0px);
transform: translateY(0px);
}
@media print, screen and (min-width: 768px) {
.u-box-col2pc .col2pc-item > *:first-child {
margin-top: 0 !important;
}
}
.u-box-anim {
transition: all .5s ease-out;
opacity: 0;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
display: block;
}
.ready .u-box-anim {
opacity: 1;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
}
.u-box-anim.anim-1 {
transition: all 1.5s ease-out .0s;
}
.u-box-anim.anim-2 {
transition: all .2s ease-out 1.45s;
}
.u-box-anim.anim-3 {
transition: all .2s ease-out 1.6s;
}
.u-box-anim.anim-4 {
transition: all .2s ease-out 1.75s;
}
.u-box-anim.anim-5 {
transition: all .2s ease-out 1.9s;
}
.u-box-anim.anim-6 {
transition: all .2s ease-out 2.05s;
}
.u-box-anim.anim-7 {
transition: all .2s ease-out 2.2s;
}
.u-box-movie {
position: relative;
width: 100%;
margin-top: 22px;
}
@media print, screen and (min-width: 768px) {
.u-box-movie {
max-width: 600px;
margin: 72px auto 0;
padding: 0 30px;
box-sizing: content-box;
}
}
.u-box-movie .movie-inner {
border: solid 2px #ae7a1d;
background: #fff;
padding: 8px 7px 5px;
}
@media print, screen and (min-width: 768px) {
.u-box-movie .movie-inner {
padding: 10px 13px 6px;
}
}
.u-box-movie .movie-inner .movie-ttl {
color: #ae7a1d;
font-size: 14px;
margin-top: 6px;
margin-bottom: 0;
line-height: 1.3;
}
@media print, screen and (min-width: 768px) {
.u-box-movie .movie-inner .movie-ttl {
margin-top: 10px;
font-size: 18px;
}
}
.list-item-res-all{
width:100%;
margin-bottom:50px;
float:left;
}
.list-item-res{
width: 50%;
float:left;
}
.list-item-res img{
margin: 0 auto;
display: block;
cursor: pointer;
}
/*.list-item-res img:hover{
transform: translateY(-8px);
transition-duration: 0.5s;
}*/
.list-app figure {
width:250px;
height:92px;
margin: 0 auto;
padding: 0;
overflow: hidden;
position: relative;
-moz-border-radius:16px;
-webkit-border-radius:16px;
border-radius:16px;
}
.list-goo figure {
width:310px;
height:92px;
margin: 0 auto;
padding: 0;
overflow: hidden;
position: relative;
-moz-border-radius:16px;
-webkit-border-radius:16px;
border-radius:16px;
}
figure::before {
content: "";
background-image: -webkit-linear-gradient(
130deg,
rgba(255,255,255,0) 20%,
rgba(255,255,255,0.5) 50%, /*�����x�����Č�������܂�*/
rgba(255,255,255,0) 80%
);
background-image: linear-gradient(
130deg,
rgba(255,255,255,0) 20%,
rgba(255,255,255,0.5) 50%,
rgba(255,255,255,0) 80%
);
width: 200%;
height: 200%;
position: absolute; /*�{�^���̍�������ɂ͂ݏo�����Ĕz�u*/
top: -100%;
left: -200%;
-webkit-transition: all 0.5s;
transition: all 0.5s;
}
figure:hover::before {
-webkit-animation: shine .75s;
animation: shine .75s;
top: 0%;
}
@-webkit-keyframes shine {
100% {
left: 125%;
}
}
@keyframes shine {
100% {
left: 125%;
}
}
@media print, screen and (max-width: 480px) {
.list-item-res-all{
width:100%;
margin-bottom:20px;
float:left;
}
.list-item-res{
width:100%;
}
.list-item-res figure{
margin-bottom:10px;
}
.list-app figure, .list-goo figure{
height:auto;
}
.list-app figure, .list-goo figure {
width: 70%;
height:auto;
-moz-border-radius: 0;
-webkit-border-radius: 0;
border-radius: 0;
}
}
.mainv-wrap {
height: 100%;
display: flex;
align-items: flex-end;
justify-content: center;
}
.mainv-desc {
margin-top: 16px;
}
.mainv-store {
display: flex;
justify-content: space-around;
}
@media print, screen and (max-width: 480px) {
.mainv-wrap {
position: absolute;
bottom: 16px;
padding: 0 20px;
margin: 0 auto;
}
.mainv-store > * + * {
margin-left: 8px;
}
}
.mainv-registmail {
position: fixed;
top: 50px;
right: 0;
z-index: 10000;
width: 102px;
}
@media print, screen and (min-width: 768px) {
.mainv-registmail {
top: 100px;
right: 0;
width: auto;
}
}
.item-inner figure {
overflow: hidden;
position: relative;
-moz-border-radius: 16px;
-webkit-border-radius: 16px;
border-radius: 16px;
}
.item-inner figure::before {
content: "";
background-image: -webkit-linear-gradient(130deg, rgba(255,255,255,0) 20%, rgba(255,255,255,0.5) 50%,rgba(255,255,255,0) 80% );
background-image: linear-gradient(130deg, rgba(255,255,255,0) 20%, rgba(255,255,255,0.5) 50%, rgba(255,255,255,0) 80% );
width: 200%;
height: 200%;
position: absolute;
top: -100%;
left: -200%;
-webkit-transition: all 0.5s;
transition: all 0.5s;
}
.item-inner:hover figure::before {
-webkit-animation: shine .75s;
animation: shine .75s;
top: 0%;
}