@charset "utf-8";

*{ margin: 0; padding: 0;}
a { text-decoration : none;}
ul, ol { list-style : none;}
img { border-style:none;}
html, *, *:before, *:after { box-sizing: border-box;/*scrollbar-gutter: stable;*/  }
body {-webkit-text-size-adjust: 100%;text-size-adjust: 100%; }

body {
    color:#fff;
	background-color:#000;
	text-align:left;
	font-size:16px;
	line-height: 2.0;
	letter-spacing: 0.08em;
	
	font-family: "Noto Sans JP", sans-serif;
  font-optical-sizing: auto;
  font-weight: 500;
  font-style: normal;
	
	overflow-wrap: anywhere;
	word-break: break-all;
	line-break: strict;
	
	opacity: 0;
	animation: OpenIn 0.5s ease 0.5s;
	animation-fill-mode: forwards;

}
@media screen and (max-width: 480px) {
body {
    font-size: 14px;
	line-height: 1.9;
}
}
@keyframes OpenIn {
    0% {opacity: 0;}
    100% {opacity: 1;}
}
a {
	color:#000;
	transition:0.4s;
}
a:hover {
	color:#f8e133;
	transition:0.4s;
}
a:hover img	{
	opacity: 0.7;
	transition:0.4s;
}
img {
	width: 100%;
	transition:0.4s;
}
@media screen and (min-width: 701px) {
.sp { display: none; }
}
@media screen and (max-width: 700px) {
.pc { display: none; }
}

.btn {
	width: 100%;
	padding: 13px;
	
	display: block;
	font-size: 21px;
	font-weight: 700;
	line-height: 1;
	color: #000;
	text-align: center;
	text-decoration: none;
	outline: none;
	
	position: relative;
	z-index: 2;
	background-color:#f8e133;
	border: 3px solid #f8e133;
	overflow: hidden;
	
}
.btn::before,
.btn::after {
  position: absolute;
  z-index: -1;
  display: block;
  content: '';
	background-color:#fff;
}
.btn,
.btn::before,
.btn::after {
  box-sizing: border-box;
  transition: all 0.5s;
}
.btn:hover {
	color: #000;
}
.btn::after {
	top: 0;
  right: 100%;
  width: 100%;
  height: 100%;
}
.btn:hover::after {
	top: 0;
	right: 0;
}
@media screen and (max-width: 700px) {
.btn {
	font-size: 18px;
	width: 100%;
}
}

.su.act_on {
	animation: SU 1.5s ease;
	animation-fill-mode: forwards;
}
.spacewalk.act_on {
	animation: SW 2.0s ease;
	animation-fill-mode: forwards;
}
.spacewalk2.act_on {
	animation: SW2 2.0s ease;
	animation-fill-mode: forwards;
}
.spacewalk3.act_on {
	animation: SW3 2.0s ease;
	animation-fill-mode: forwards;
}
.spacewalk4.act_on {
	animation: SW4 2.0s ease;
	animation-fill-mode: forwards;
}
@keyframes SU {
    0% {opacity: 0; transform: translate(0px,80px);filter: blur(0px); }
    100% {opacity: 1; transform: translate(0px,0px);filter: blur(0px);}
}
@keyframes SW {
    0% {opacity: 0; transform: translate(-50px,80px) rotate(-10deg);filter: blur(5px);}
    100% {opacity: 1; transform: translate(0px,0px) rotate(0deg);filter: blur(0px);}
}
@keyframes SW2 {
    0% {opacity: 0; transform: translate(80px,-60px) rotate(15deg);filter: blur(5px);}
    100% {opacity: 1; transform: translate(0px,0px) rotate(0deg);filter: blur(0px);}
}
@keyframes SW3 {
    0% {opacity: 0; transform: translate(20px,50px) rotate(5deg);filter: blur(5px);}
    100% {opacity: 1; transform: translate(0px,0px) rotate(0deg);filter: blur(0px);}
}
@keyframes SW4 {
    0% {opacity: 0; transform: translate(-30px,-40px) rotate(-7deg);filter: blur(5px);}
    100% {opacity: 1; transform: translate(0px,0px) rotate(0deg);filter: blur(0px);}
}


h1 {
	width: 100%;
	margin: 0 auto 100px auto;
	background-color: #000;
	text-align: center;
	line-height: 0;
	position: relative;
}
h1 .kvc {
	opacity: 0;
	animation: OpenIn 2.5s ease 1.2s;
	animation-fill-mode: forwards;
}
@media screen and (max-width: 700px) {
h1 {
	margin: 0 auto 50px auto;
}
}

.kvimg1,.kvimg2 {
	position: absolute;
	width: 39.1%;
	height: 100%;
	opacity: 0.8;
	overflow: hidden;
	line-height: 0;
	z-index: 2;
}
.kvimg1 {
	left: 0;
}
.kvimg2 {
	right: 0;
}
@media screen and (max-width: 700px) {
.kvimg1,.kvimg2 {
	position: absolute;
	width: 100%;
	height: 43%;
	overflow: hidden;
	line-height: 0;
	z-index: 2;
}
.kvimg1 {
	top: 0;
}
.kvimg2 {
	bottom: 0;
}
}

.kvimg1 img,.kvimg2 img {
	position: relative;
	animation: KVpic 2.5s ease 0.5s;
	animation-fill-mode: forwards;
	opacity: 0;
}
@keyframes KVpic {
0% { transform: scale(1.15, 1.15);opacity: 0; }
100% { transform: scale(1, 1);opacity: 1; }
}




.intro {
	max-width: 680px;
	width: 90%;
	margin: 0 auto 100px auto;
}
.intro h2 {
	margin-bottom: 60px;
	opacity: 0;
	animation: OpenIn 2.5s ease 1.8s;
	animation-fill-mode: forwards;
}
.intro h3 {
	font-size: 24px;
	font-weight: 500;
	color: #f8e133;
	margin-bottom: 1.5em;
}
.intro p {
	font-size: 18px;
	text-align: justify;
}
@media screen and (max-width: 700px) {
.intro {
	margin: 0 auto 80px auto;
}
.intro h2 {
	margin-bottom: 30px;
}
.intro h3 {
	font-size: 21px;
}
.intro p {
	font-size: 16px;
}
}
@media screen and (max-width: 480px) {
.intro p  {
    font-size: 14px;
	line-height: 1.9;
}
}


.ale {
	text-align: center;
	max-width: 680px;
	width: 90%;
	margin: 0 auto 80px auto;
}
.ale h2 {
	font-size: 32px;
	line-height: 1.1;
	color: #f8e133;
	border-top: solid 1px #666;
	border-bottom: solid 1px #666;
	position: relative;
	padding: 0.85em 0;
	margin-bottom: 85px;
}
.ale h2 span {
	font-size: 18px;
	color: #fff;
}
@media screen and (max-width: 700px) {
.ale h2 {
	font-size: 28px;
	padding: 0.6em 0;
	margin-bottom: 55px;
}
.ale h2 span {
	font-size: 16px;
}
}
@media screen and (max-width: 480px) {
.ale h2 {
	font-size: 24px;
}
.ale h2 span {
	font-size: 14px;
}
}


.ale h2:before {
	content: '';
	width: 100%;
	height: 1px;
	border-bottom: solid 3px #666;
	position: absolute;
	left: 0px;
	bottom: -8px;
}
.ale h2:after {
	content: '';
	width: 100%;
	height: 1px;
	border-top: solid 3px #666;
	position: absolute;
	left: 0px;
	top: -8px;
}

.ale .cans {
	max-width: 560px;
	width: 90%;
	margin: 0 auto 24px auto;
	display: flex;
	justify-content: space-between;
}


.ale .cans div {
	max-width: 220px;
	width: 45%;
}
.ale .cans p {
	margin-bottom: 45px;
}
.frba {
	max-width: 160px;
	width: 80%;
	margin: 0 auto;
	font-family: "din-2014", sans-serif;
	font-weight: 700;
	font-style: normal;
	font-size: 16px;
	border: solid 1px #555;
	outline: solid 3px #555;
	outline-offset: 3px;

}
.onsale1 {
	font-size: 26px;
	font-weight: 700;
}
.onsale2 {
	font-size: 34px;
	line-height: 1.6;
	letter-spacing: 0.11em;
	color: #f8e133;
	font-weight: 700;
	margin-bottom: 0.4em;
}
.onsale2 span {
	margin-left: 0.5em;
}
.onsale3 {
	font-size: 12px;
	color: #ccc;
}
@media screen and (min-width: 701px) {
.onsale2 br ,.onsale3 br {
	display: none;
}
}
@media screen and (max-width: 700px) {
.onsale1 {
	font-size: 18px;
}
.onsale2 {
	font-size: 28px;
}
.onsale2 span {
	margin-left: 0;
}
.onsale3 {
	font-size: 11px;
	letter-spacing: 0.02em;
}
}
@media screen and (max-width: 480px) {
.onsale1 {
	font-size: 14px;
}
.onsale2 {
	font-size: 24px;
}
.onsale3 {
	font-size: 10px;
	letter-spacing: 0.01em;
}
}

.story {
	max-width: 680px;
	width: 90%;
	margin: 0 auto 120px auto;
}
.story h2 {
	font-size: 28px;
	margin-bottom: 1em;
	
	align-items: center;
	display: flex;
	justify-content: center;
}
.story h2::before,
.story h2::after {
  background-color: #fff;
  content: "";
  height: 1px; 
  width: 100%; 
}
.story h2::before {
  margin-right: 1em;
}
.story h2::after {
  margin-left: 1em; 
}
.story h2 div {
	white-space: nowrap;
}
.story h2 span {
	color: #f8e133;
}
.story p {
	font-size: 18px;
	text-align: justify;
}
@media screen and (max-width: 700px) {
.story {
	margin: 0 auto 80px auto;
}
.story h2 {
	font-size: 21px;
}
.story h2::before {
  margin-right: 0.5em;
}
.story h2::after {
  margin-left: 0.5em; 
}
.story p {
	font-size: 16px;
}
}
@media screen and (max-width: 480px) {
.story h2 {
	font-size: 16px;
}
.story p  {
    font-size: 14px;
	line-height: 1.9;
}
}

.about {
	background-color: #FFF;
	color: #000;
	padding: 75px 0;
}
.a_head,.a_foot {
	width: 100%;
	height: 80px;
	background-image:url("../images/about_head.png");
	background-size: 100% 80px;
}
.a_foot {
	background-image:url("../images/about_foot.png");
	margin-bottom: 75px;
}
@media screen and (max-width: 700px) {
.about {
	padding: 50px 0;
}
.a_head,.a_foot {
	height: 50px;
	background-size: 100% 50px;
}
}


.inner_about {
	max-width: 1000px;
	width: 90%;
	margin: 0 auto 80px auto;
	display: flex;
	justify-content: space-between;
}
.inner_about .txt {
	text-align: justify;
	width: 50%;
}
.inner_about .txt p {
	margin-bottom: 40px;
}
.inner_about .pic {
	width: 45%;
	background-image:url("../images/about_pic.webp");
	background-size: cover;
	background-position: center;
}
.inner_about h2 {
	width: 292px;
	margin-bottom: 50px;
}
.inner_about .txt .btn div {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	right: 0;
  background-image:url("../images/about_btn2.webp");
  background-size: cover;
  background-position: right center;
  background-repeat: no-repeat;
	mix-blend-mode: multiply;
}
@media screen and (max-width: 700px) {
.inner_about {
	margin: 0 auto 50px auto;
	display: block;
}
.inner_about .txt {
	width: 100%;
	margin-bottom: 50px;
}
.inner_about .txt p {
	margin-bottom: 40px;
}
.inner_about .pic {
	width: 100%;
	height: 480px;
	margin-bottom: 40px;
}
.inner_about h2 {
	width: 60%;
	margin-bottom: 30px;
}
}





.inner_serika  {
	max-width: 1000px;
	width: 90%;
	margin: 0 auto;
	display: flex;
	align-items: stretch;
	justify-content: space-between;
	border: solid 10px #0099d5;
}
.inner_serika .pic {
	width: 44%;
	display: flex;
	align-items: center;
	background-color: #0099d5;
	padding: 1%;
}
.inner_serika .txt {
	width: 56%;
	padding: 5%;
}
.inner_serika .txt p {
	margin-bottom: 1.5em;
}
.inner_serika .txt .btn {
	font-size: 18px;
	line-height: 1.4;
	color: #FFF;
	background-color:#0099d5;
	border: 3px solid #0099d5;
}
.inner_serika .txt .btn:hover {
	color: #0099d5;
}
@media screen and (min-width: 701px) {
.inner_serika .txt .btn br {
	display: none;
}
}
@media screen and (max-width: 700px) {
.inner_serika {
	display: block;
	border: solid 3px #0099d5;
}
.inner_serika .txt {
	width: 100%;
	margin-bottom: 0;
}
.inner_serika .txt p {
	margin-bottom: 0.3em;
}
.inner_serika .pic {
	width: 100%;
	justify-content: center;
	padding: 0;
}
.inner_serika .pic img {
	width: 50%;
}
.inner_serika .txt .btn {
	font-size: 16px;
}
}



.campaign {
	max-width: 900px;
	width: 90%;
	margin: 0 auto 80px auto;
}
.campaign .cam_ico {
	max-width: 300px;
	width: 50%;
	margin: 0 auto 0 auto;
	position: relative;
}
.campaign .cam_ico .img1 {
	position: absolute;
	z-index: 2;
	opacity: 0;
}
.campaign h2 {
	font-size: 40px;
	text-align: center;
	margin-bottom:90px;
}
.campaign .cam_ico .img1.act_on {
	animation: Camh2 1.0s ease;
	animation-fill-mode: forwards;
}
.campaign .cam_ico .img2.act_on {
	animation: Camh2 1.0s ease 0.3s;
	animation-fill-mode: forwards;
}
@keyframes Camh2 {
0% { transform: scale(0.6, 0.6);opacity: 0; }
100% { transform: scale(1, 1);opacity: 1; }
}



.lineup {
	display: flex;
	justify-content: space-between;
	margin-bottom: 60px;
}
.lineup .pic {
	width: 43%;
	line-height: 0;
	border: solid 1px #555;
	background-size: cover;
	background-position: center;
}
.lp1 {background-image:url("../images/cam_pic1_pc.webp");}
.lp2 {background-image:url("../images/cam_pic2_pc.webp");}
.lp3 {background-image:url("../images/cam_pic3_pc.webp");}

.lineup .txt {
	width: 450px;
	margin-left: 5%;
	text-align: justify;
}
.lineup h3 {
	font-size: 24px;
	line-height: 1.7;
	color: #f8e133;
	margin-bottom: 0.8em;
}
.lineup p {
	margin-bottom: 1.2em;
}
.lineup .txt span {
	font-size: 12px;
}
.lineup .btn {
	margin-top: 10px;
}

@media screen and (max-width: 700px) {
.campaign h2 {
	font-size: 32px;
	margin-bottom: 40px;
}
.lineup {
	display: block;
	margin-bottom: 50px;
}
.lineup .pic {
	width: 100%;
	height: 260px;
	margin-bottom: 20px;
}
.lineup .txt {
	width: 100%;
	margin-left: 0;
}
.lineup h3 {
	font-size: 20px;
	margin-bottom: 0.5em;
}
}
@media screen and (max-width: 480px) {
.lineup h3 {
	font-size: 18px;
}
.lineup h3 br {
	display: none;
}
}




.summer29 {
	max-width: 900px;
	width: 90%;
	margin: 0 auto 80px auto;
}
.summer29 p {
	margin-bottom: 1.2em;
}
@media screen and (max-width: 700px) {
.summer29 img {
	border: solid 1px #555;
}

}

.logo {
	max-width: 275px;
	width: 50%;
	margin: 0 auto 60px auto;
}

.sns {
	max-width: 330px;
	width: 70%;
	margin: 0 auto 100px auto;
	text-align: center;
}
.sns p {
	font-family: "din-2014", sans-serif;
	font-weight: 700;
	font-style: normal;
	font-size: 24px;
	letter-spacing: 0.12em;
	margin-bottom: 1.3em;
}
@media screen and (max-width: 700px) {
.sns p {
	font-size: 21px;
}
}

.sns div {
	display: flex;
	justify-content: space-between;
}
.sns div a {
	width: 38px;
}
.sns div a:hover img	{
	transform: scale(1.2, 1.2);
	opacity: 1;
	transition:0.4s;
}

/*moon*/
.moon {
	max-width: 860px;
	width: 90%;
	margin: 0 auto;
	line-height: 0;
	position: relative;
	z-index: -2;
}

/*copyright*/
.copyright {
	width: 100%;
	font-size: 0.7em;
	text-align: center;
	letter-spacing: 0.06em;
	color: #ccc;
	position: absolute; 
	bottom: 24px;
	z-index: 2;
}
@media screen and (max-width: 640px) {
.copyright {
	font-size: 2.0vw;
}
}

.can_wrap1,.can_wrap2 {
	width: 100%;
	position: fixed;
	z-index: -1;
}
.can_wrap1 {bottom: 10%;}
.can_wrap2 {bottom: 60%;}

.can_star {
	position: relative;
	right: 0;
	width: 24px;
}
.can_wrap1 .can_star {
	animation: CanFly 150s infinite linear;
}
.can_wrap2 .can_star {
	animation: CanFly2 150s infinite linear;
}
.can_star img {
	animation: CanRot 3s infinite linear;
}
@keyframes CanRot {
	0% {transform: rotate(0deg);}
	100% {transform: rotate(-360deg);}
}
@keyframes CanFly {
	0% {transform: translateX(120vw);}
	90% {transform: translateX(120vw);}
	100% {transform: translateX(-100px);}
}
@keyframes CanFly2 {
	0% {transform: translateX(120vw);}
	40% {transform: translateX(120vw);}
	50% {transform: translateX(-100px);}
	100% {transform: translateX(-100px);}
}

.stars {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-image: linear-gradient(0deg, #000, #09101f);
	overflow: hidden;
	z-index: -3;
}
.star {
	position: absolute;
	display: block;
	background-color: #fff;
	border-radius: 50%;
	box-shadow: 0 0 4px 2px rgba(#fff, 0.2);
	opacity: 0;
	animation: twinkle 6s infinite ease-in;
	z-index: -3;
}
@keyframes twinkle {
	0% {opacity: 0;transform:translate(0);}
  50% {opacity: 1;}
  100% {opacity: 0;transform:translate(-65px);}
}