.pc {
    display: none;
}

.lp_wrap {
    width: 100%;
    margin: 0 auto;
}

.lp_wrap h1 {
    font-size: 23px;
    font-family: serif;
    line-height: 3rem;
    text-align: center;
    margin: 0 0 30px;
    color: #fff;
}
.lp_wrap h2 {
    font-size: 19px;
    font-family: serif;
    text-align: center;
    color: #fff;
}
.lp_wrap h3 {
    font-size: 16px;
}
.lp_wrap p {
    color: #fff;
    text-align: justify;
}


/* NAV MENU */
.nav_menu {
    width: 100%;
}
.nav_menu .nav_menu_wrap {
    width: 70%;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    text-align: center;
    position: relative;
    z-index: 2;
}
.nav_menu ul {
    width: 20%;
    position: relative;
    filter: brightness(0.7);
    transition: all 0.1s;
}
.nav_menu ul.on {
    filter: brightness(1);
}
.nav_menu ul:hover {
    filter: brightness(1);
    transition: all 0.1s;
}

.nav_menu ul li {
    text-align: center;
}

.nav_menu ul li {
    width: 100%;
    height: 100px;
    position: absolute;
    top: 10px;
    z-index: 2;
}
.nav_menu ul li a img {
    width: 65%;
}
.nav_menu ul li a p {
    margin: 6px 0 0;
    color: #fff;
    font-size: 8px;
    line-height: 120%;
    text-align: center;
}
.nav_menu ul.on li a p{
    text-decoration: underline;
}
.nav_menu ul::after {
    content: '';
    width: 98%;
    height: 100px;
    background: linear-gradient(rgba(255, 255, 255, 0.7) 0%, rgb(255, 255, 255, 0) 60%);
    display: block;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1;
}
.nav_menu ul.on::after {
    content: '';
    width: 98%;
    height: 100px;
    background: linear-gradient(#fafafa, rgb(255, 255, 255, 0) 60%);
    display: block;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1;
}
.nav_menu ul:first-child li:last-child::before {
    content: '';
    width: 16px;
    height: 16px;
    background: url(/sp/tudor_beasts/img/new_tag.png) no-repeat;
    background-size: 100%;
    border-radius: 50%;
    position: absolute;
    top: -7%;
    left: 12%;
    z-index: 2;
}

/* INTRO */
.intro {
    width: 96%;
    margin: 60px auto;
}

/* PRODUCT */
.product {
    width: 100%;
    margin: 0 auto;
    position: relative;
}

.area .coming  {
    padding: 100px 0;
    margin: 0;
    font-size: 20px;
    text-align: center !important;
}


.area {
    width: 100%;
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(7.8px);
    -webkit-backdrop-filter: blur(7.8px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-top: none;
    position: relative;
    display: none;
    opacity: 0;
}
.area h2 {
    color: #fff;
    font-family: sans-serif;
    line-height: 160%;
    margin: 0;
    padding:40px 0 0;
}
.area h2 span {
    font-size: 16px;
    color: #f8b500;
    position: relative;
}
.area h2.new span::before {
    content: '';
    width: 30px;
    height: 30px;
    background: url(/sp/star_wars/img/new.png) no-repeat;
    background-size: 100%;
    display: block;
    position: absolute;
    top: -5px;
    left: -40px;
    z-index: 1;
}
.area p img {
    width: 60%;
    margin: 4% 20%;
}
.area p.txt {
    width: 94%;
    margin: 0 auto 40px;
}

.area ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
.area ul li {
    width: 50%;
    padding: 8% 4%;
    font-size: 12px;
    text-align: center;
    display: flex;
    align-items: flex-end;
    transition: all 0.3s;
    border-bottom:  1px solid rgba(255, 255, 255, 0.5);
}
.area ul li:nth-child(3) a img,
.area ul li:nth-child(5) a img {
    width: 90%;
    margin: 10% 0 0;
}
.area ul li:nth-child(2) a img,
.area ul li:nth-child(6) a img,
.area ul li:nth-child(7) a img,
.area ul li:nth-child(8) a img,
.area ul li:nth-child(9) a img {
    width: 80%;
    margin: 20% 0 0;
}
.area ul li a p {
    text-align: center;
}
.area ul li a b {
    padding: 2px 16px;
    border-radius: 4px;
    color: #fff;
    background-color: #b7861e;
}
.area ul li:nth-child(-n+2) {
    border-top: 1px solid rgba(255, 255, 255, 0.5);
}
.area ul li:nth-child(2n+1) {
    border-right: 1px solid rgba(255, 255, 255, 0.5);
}

/* sold out */
.area ul li.sold-out {
    position: relative;
}
.area ul li.sold-out b {
    font-size: 10px;
    padding: 4px 8px;
    /* font-weight: lighter; */
    color: #fff;
    background-color: #787878;
}
.area ul li.sold-out a {
    opacity: 0.7;
}
.area ul li.sold-out::before {
    content: '';
    width: 100%;
    height: 100%;
    background-color: #00000000;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
}


.area.is-active {
    display: block;
    animation-name: displayAnime;
    animation-duration: 0.5s;
    animation-fill-mode: forwards;
}
@keyframes displayAnime{
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

.tab-wrap .tab {
    font-size: 10px;
    color: #fff;
    border-radius: 4px;
    display: flex;
    justify-content: space-between;
}
.tab-wrap .tab li {
    width: 24.5%;
    text-align: center;
    background: rgba(255, 255, 255, 0.1);
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
    backdrop-filter: blur(7.8px);
    -webkit-backdrop-filter: blur(7.8px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-bottom: none;
}
.tab-wrap .tab li a {
    color: #fff;
}
.tab-wrap .tab li a h3 {
    font-size: 12px;
    margin: 10px 0 4px;
    font-weight: lighter;
}
.tab-wrap .tab li a h3 b {
    font-size: 18px;
}
.tab-wrap .tab li.active {
    background: rgba(255, 255, 255, 0.2);
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
    backdrop-filter: blur(7.8px);
    -webkit-backdrop-filter: blur(7.8px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-bottom: none;
}

.lp_video {
    width: 100%;
}
.lp_video iframe {
    width: 100%;
    height: 240px;
}

/* CONTAINER */
.container {
    width: 100%;
    margin: 0 auto;
    padding: 60px 0 0;
}
.container p {
    margin: 30px 0;
}
.container h2 {
    color: #fff;
    font-family: serif;
    line-height: 130%;
    margin: 60px 0 40px;
}
.container h2 span {
    font-size: 16px;
    position: relative;
}
.container h2 span::before {
    content: '';
    width: 100%;
    height: 100%;
    background: linear-gradient(-45deg, #ff0000 0%, #0062ff 100% );
    mix-blend-mode: multiply;
    display: block;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    opacity: 0.5;
    z-index: 2;
}

.cont_wrap {
    width: 94%;
    margin: 0 auto;
}
/* designer */
.cont_desinger h3 {
    color: #fff;
    font-family: serif;
    line-height: 100%;
    margin: 5px 0 40px;
}
.cont_desinger h3 span {
    font-size: 12px;
}

/* collection */
.collection {
    background-color: #000;
    padding: 1px 3% 40px;
}
.collection ul {
    display: block;
}
.collection ul li {
    width: 100%;
    height: 200px;
    margin: 30px 0;
}
.collection ul li a {
    position: relative;
}
.collection ul li a::before {
    font-size: 12px;
    font-weight: bolder;
    color: #000;
    position: absolute;
    top: 22.5vw;
    left: 16%;
    z-index: 2;
}
.collection ul li:nth-child(1) a::before {
    content: '第1弾';
}
.collection ul li:nth-child(2) a::before {
    content: '第2弾';
}
.collection ul li:nth-child(3) a::before {
    content: '第3弾';
}
.collection ul li:nth-child(4) a::before {
    content: '第4弾';
}
.collection ul li a::after {
    content: '';
    width: 100%;
    height: 222px;
    background: url(/sp/star_wars/img/collection_border.png) no-repeat;
    background-size: 100%;
    display: block;
    position: absolute;
    top: -22vw;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1;
}

.collection ul li a img {
    width: 96%;
    margin: 0 2%;
}
.collection ul li.unrelease {
    position: relative;
}
.collection ul li.unrelease::before {
    content: '';
    width: 100%;
    height: 230px;
    background-color: #00000000;
    display: block;
    position: absolute;
    top: -5px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 3;
}