body{
	min-width:1100px;
	background: #FFFFFF url("../images/bghome_content.jpg") no-repeat center center fixed;
	background-size:cover;
	margin: 0;
	padding: 0;
}

ul{
	list-style:none;
	padding: 0px;
}





.mainvisual{
	min-height:900px;
	background:transparent url("../images/mv.png") no-repeat center center;
}


.header{
	display: flex;
}

.ad_logo{
	margin: 18px ;
}

.pf{
	margin-left: auto;
}

.pf_logo{
	float: right;
}


.lang{
	margin-left: auto;
	display: flex;
	align-items: center;
	text-align: center;
	position: relative;
}

.lang-menu{
	margin: 3px;
	width: 78px;
	height: 33px;
	border: 1px solid white;
	background-color: white;
	color:black;
}

	.lang-menu:hover{
		background-color: gray;
		color:white;
	}

	.lang-menu.current{
		background-color: #F15A25;
		color:white;
	}

.menu{
	font-size: 14px;
	margin: auto;
	display: inline-block;
 	vertical-align: middle;
}



.logoarea{
	display: flex;
	justify-content: center;
	margin: 150px;
}



/*==================================================
info
===================================*/


div.infoarea{
	width: 100%;
	background: linear-gradient(to right,#22B573 36%,#006837 );
	text-align: center;
	border-bottom: 3px solid white;
	border-top: 3px solid white;
	margin-bottom: 150px;
}

div.info{
	margin: 30px auto;
	width:  940px;
}

h2{
	margin:5px;
	text-align: center;
}


/*==================================================
movie
===================================*/

.moviearea{
	margin: 100px 0px;
	text-align: center;
	font-weight:bold;
}

ul.movie-list{
	width: 90%;
	display:flex;
	margin: 0 auto;
	justify-content:space-between;
}

li.movie{
	margin: 0 auto;
	width:400px;
	border: 5px solid #FFFFFF;
	box-shadow: 0px 0px 8px rgba(0,0,0,0.5),0px 0px 8px rgba(0,0,0,0.5);
}

iframe{
	width: 100%;
	aspect-ratio:16/9;
}

p.movie{
	text-shadow:
    1px 1px 0 #FFFFFF,
    -1px 1px 0 #FFFFFF,
    -1px -1px 0 #FFFFFF,
    1px -1px 0 #FFFFFF;
}


/*==================================================
s2editon
===================================*/

.s2editionarea{
	width: 1000px;
	margin: 150px auto 200px auto;
	background: linear-gradient(to right,#ffc881 46%,#ffa78c );
	border-color:#FFFFFF;
	box-shadow: 0px 0px 8px rgba(0,0,0,0.5),0px 0px 8px rgba(0,0,0,0.5);
	border-radius:10px;
	text-align: center;
	padding: 0px 0px 20px 0px;
}

h1.s2edition{
	margin:0px 0px 30px 0px;
	background-color: #E60012;
	padding: 20px 0px;
	color: white;
	border-radius:10px 10px 0px 0px;
	font-size: 45px;
}

h2.s2edition{
	margin: 30px 200px;
	background-color: #005BAD;
	padding: 10px;
	color: white;
	font-size: 34px;
}

p.s2edition{
	font-size: 24px;
	margin: 0 30px;
}

img.s2edition{
	  width: 800px;
      height: auto;
	  display: inline-block;
	  margin:15px 10px 0px 10px;
}

img.s2console{
	  width: 1000px;
      height: auto;
	  display: inline-block;
	  margin:0;

}


/*==================================================
contents
===================================*/

.frame{
	width: 1000px;
	margin: 150px auto 200px auto;
	background-color:#DFEDE7;
	border-color:#FFFFFF;
	box-shadow: 0px 0px 8px rgba(0,0,0,0.5),0px 0px 8px rgba(0,0,0,0.5);
	border-radius:10px;
	text-align: center;
	padding: 20px 0px;
}

h1.contents{
	margin: 30px 0;
	background-color: #F7931E;
	border-bottom: 3px solid white;
	border-top: 3px solid white;
	padding: 10px;
	color: white;
	font-size: 45px;
}

p.contents{
	font-size: 24px;
	margin: 0 30px;
}



/*==================================================
Product
===================================*/

.productarea{
	width: 100%;
	background: linear-gradient(to right,#22B573 36%,#006837 );
	border-top: 3px solid white;
	margin-bottom: 0px;
	padding-bottom: 30px;
}

div.product{
	margin: 30px auto;
	width:  1000px;
}

.platform{
	border-radius:10px;
	padding: 20px 20px;
	margin: 50px 0px;
	color: white;
	text-align: left;
}

.st{
	background-color: #000f58;
}

.sw{
	background-color: #ed1b24;
}

.sw2{
	background: linear-gradient(to right, #e20d18 46%,#fa463f 66%,#ed1b24);
}

h3{
	margin-top: 0px;
}

p.product{
	display: flex;
	justify-content: flex-end;
}

.purchase{
	display: inline-block;
	background-color: #ed1b24;
	width: 174px;
	text-align: center;
	vertical-align: middle;
  text-decoration: none;
  color: white;
  border: 3px solid white;
  padding: 10px;
}

.purchase:hover{
	background-color: #000f58;
}


table{
	width: 100%;
	font-size: 20px;
}

td{
	padding: 0px 10px;
	vertical-align:top;
}

td.bold{
	font-weight:bold;
	width: 240px;
}

td.right{
	width: 500px;
}

/*==================================================
footer
===================================*/

.footer{
	width: 100%;
	background: #F7931E;
	margin: 0px;
	padding: 20px 0 10px 0;
}

.copy{
	margin: 20px auto;
	width: 1000px;
	text-align: right;
	font-size: 12px;
}




/*==================================================
スライダーのためのcss
===================================*/
.slider {
  /*横幅94%で左右に余白を持たせて中央寄せ*/
  width: 94%;
  margin: 60px auto; }
  @media screen and (max-width: 1000px) {
    .slider {
      font-size: 9px; } }

.slider img {
  width: 650px;
  /*スライダー内の画像を60vwにしてレスポンシブ化*/
  height: auto;
  box-shadow: 0 3px 4px rgba(0, 0, 0, 0.32);
  /*影*/ }
  @media screen and (max-width: 1000px) {
    .slider img {
      width: 60vw; } }

/*カーソルを合わせた時画像を薄くする*/
.slider img:hover{
	opacity: 0.8;
}


.slider .slick-slide {
  transform: scale(0.8);
  /*左右の画像のサイズを80%に*/
  transition: all .5s;
  /*拡大や透過のアニメーションを0.5秒で行う*/
  opacity: 0.5;
  /*透過50%*/ }

.slider .slick-slide.slick-center {
  transform: scale(1);
  /*中央の画像のサイズだけ等倍に*/
  opacity: 1;
  /*透過なし*/ }

/*矢印の設定*/
/*戻る、次へ矢印の位置*/
.slick-prev,
.slick-next {
  position: absolute;
  /*絶対配置にする*/
  top: 42%;
  cursor: pointer;
  /*マウスカーソルを指マークに*/
  outline: none;
  /*クリックをしたら出てくる枠線を消す*/
  border-top: 3px solid #666;
  /*矢印の色*/
  border-right: 3px solid #666;
  /*矢印の色*/
  height: 15px;
  width: 15px; }

.slick-prev {
  /*戻る矢印の位置と形状*/
  left: -1.5%;
  transform: rotate(-135deg); }

.slick-next {
  /*次へ矢印の位置と形状*/
  right: -1.5%;
  transform: rotate(45deg); }

/*ドットナビゲーションの設定*/
.slick-dots {
  text-align: center;
  margin: 20px 0 0 0; }

.slick-dots li {
  display: inline-block;
  margin: 0 5px; }

.slick-dots button {
  color: transparent;
  outline: none;
  width: 8px;
  /*ドットボタンのサイズ*/
  height: 16px;
  /*ドットボタンのサイズ*/
  display: block;
  background: #ccc;
  /*ドットボタンの色*/ }

.slick-dots .slick-active button {
  background: #333;
  /*ドットボタンの現在地表示の色*/ }