@charset "UTF-8";

/*** common setting ***/
header {
	position: relative;
}


.contentWrapper {
	width: 70%;
	margin: 0 auto;
	text-align: center;
	padding: 2rem 0;
}

/** header **/
header a {
	color: #FFF;
	font-family: century-gothic, sans-serif;
	font-style: normal;
	font-weight: 400;
	font-size: 1rem;
}
header nav{
	position: absolute;
	left: 0;
	z-index: 2;
}
header ul {
	display: flex;
	margin: 0;
	padding:20px;
}
header li {
	padding: 0 15px;
	font-family: century-gothic, sans-serif;
	font-style: normal;
	font-weight: 400;
}
header .contentWrapper {
	position: absolute;
	top: 62%;
	left: 50%;
	-ms-transform: translate(-50%,-50%);
	-webkit-transform: translate(-50%,-50%);
	transform: translate(-50%,-50%);
	margin:0;
	z-index: 1;
}

#top p {
	font-family: century-gothic, sans-serif;
	font-style: normal;
	font-size: 1rem;
	line-height: 1.6rem;
}

#about p {
	font-size: 0.9rem;
	font-family: century-gothic, sans-serif, source-han-sans-japanese, sans-serif;
	font-style: normal;
	font-weight: 300;
	line-height: 1.6rem;
	color: #dcdcdc
}
#item h2 {
	color: #696969;
	font-size:  1.35rem;
	font-family: century-gothic, sans-serif;
	font-style: normal;
	font-weight: bold;
}
#item h3 {
	color: #696969;
	font-size:  1rem;
	font-family: century-gothic, sans-serif;
	font-style: normal;
	font-weight: bold;
}



/** swiper **/
.swiper-slide img {
	width: 100%;
}


/** item **/

.container {
	position: relative;
	left: 5%;
	right: 5%;
	display: flex;
	background-color: #fff;
	width: 80%;
	justify-content: space-around;
	align-items: flex-start;
	padding: 5%;
	z-index: 1;
}
.item {
	justify-content: center;
	width: 100%;
	max-width: 500px;
}

.info-product {
	color: #696969;
	font-family: century-gothic, sans-serif;
	font-style: normal;
	font-weight: 300;
	text-align: left;
	padding: 10%;
	line-height: 1.4rem;
}

/** radio accordion **/

.accordion {
  min-width: 300px;
  margin: 0 ;
  padding: 0;
}
.accordion .ac-content {
  margin: 0;
  padding: 0;
}
.ac-content img {
	width: 100%;
}
.accordion input {
  display: none;
}
.accordion label {
  display: block;
  cursor: pointer;
  padding: 0px;
  box-sizing: content-box;
}
.accordion label:hover img{
  opacity: 1;
  -webkit-animation: flash 1.5s;
  animation: flash 1.5s;
}

.accordion .ac-cont {
  transition: 0.2s;
  height: 0;
  overflow: hidden;
  padding: 0;
  box-sizing: content-box;
}
.accordion input:checked + .ac-cont {
  height: auto;
  padding: 10px;
  box-sizing: content-box;
}
.itemName img{
	position: absolute;
	margin-top: -20%;
	margin-left: 0%;
	width: 100%;
	filter: drop-shadow(5px 5px 5px rgba(0,0,0,0.8));
}
.item img{
	max-width: 500px;
}
.item .flex a {
	display: flex;
	margin-top: 15px;
	justify-content: center;
}
.item .flex img {
	width: 80%;
	height: 100%;
}
.accordion #MARVELOUS {
	background-image: url(../img/bg_mar.jpg);
	padding: 30px;
	background-size: cover;
}
.accordion #KILLER {
	background-image: url(../img/../img/bg_kil.jpg);
	padding: 30px;
	background-size: cover;
}
.accordion #HYDRA {
	background-image: url(../img/bg_hyd.jpg);
	padding: 30px;
	background-size: cover;
}
.accordion #WINDMILL {
	background-image: url(../img/bg_win.jpg);
	padding: 30px;
	background-size: cover;
}
#item h2 {
	line-height: 0.5rem;
}
#item h3 {
	line-height: 0.5rem;
}

@-webkit-keyframes flash {
  0% {
    opacity: .4;
  }
  100% {
    opacity: 1;
  }
}
@keyframes flash {
  0% {
    opacity: .4;
  }
  100% {
    opacity: 1;
  }
}

/** plofile **/
#profile figcaption {
	color: #dcdcdc;
	font-family: century-gothic, sans-serif;
	font-style: normal;
	
}
#profile .flexcontent p {
	width: 80%;
	margin: 0 auto;
	text-align: left;
	font-size: 0.95rem;
	line-height: 160%;
	font-family: source-han-sans-japanese, sans-serif;
	font-style: normal;
	font-weight: 300;
}
.flex {
	display: flex;
	justify-content: center;
}
#profile .contentWrapper{
	width: 50%;
	margin: 0 auto;
	text-align: center;
	padding: 2rem 0;
}
#profile .flexcontent {
	flex-basis: 30%;
	flex-grow: 1;
}
#profile figure img {
	width: 100%;
	max-width: 200px;
	max-height: 200px;
}
#profile a {
	font-size: 1rem;
	padding: 1rem;
	text-decoration: underline;
	color: #fff;
}
a:visited {
	color: #E3E3E3;
}

/** footer **/
#footer {
	width: 60%;
	margin: 0 auto 5rem;
	text-align: center;
	font-family: century-gothic, sans-serif;
	font-style: normal;
}


element.style {
    transition-duration: 0ms;
}

body {
      background: #000000;
      color:#ffffff;
      margin: 0;
      padding: 0;
}
	
/* for PC */
@media screen and (max-width: 480px) {

	/* for mobile */
	
	/** common setting **/

	img {
		border: 0;
		max-width: 100%;
		height: auto;
	}
	.flex {
		display: block;
	}
	.contentWrapper {
	width: 90%;
	padding: 1rem;
	}
	
	/** header **/
	
	/** swiper **/
	.swiper-button-next, .swiper-button-prev {
		display: none;
	}
	
	/** header **/
	header .contentWrapper {
	position: absolute;
	top: 54%;
	left: 50%;
	-ms-transform: translate(-50%,-50%);
	-webkit-transform: translate(-50%,-50%);
	transform: translate(-50%,-50%);
	margin:0;
	z-index: 1;
	}
	header p {
		display: none;
	}
	header nav {
		display: none;
	}
	
	/** item **/
	.container {
	display: block;
	}
	
	/** plofile **/
	#profile .flexcontent p {
		width: 80%;
		margin: 0 auto;
		text-align: left;
		font-size: 0.8rem;
		line-height: 160%;
		font-family: source-han-sans-japanese, sans-serif;
		font-style: normal;
		font-weight: 300;
	}
	.flex {
		display: flex;
	}
	#profile .contentWrapper{
		width: 96%;
		margin: 0 auto;
		text-align: center;
		padding: 2rem 0;
	}
	#profile .flexcontent {
		flex-basis: 30%;
		flex-grow: 1;
	}
	#profile figure img {
		width: 100%;
	}
	#profile a {
		font-size: 1rem
	}