/* contents------------------------------------------------------------------------------------------------------------ */
body {font-family: 'Noto Sans JP',"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;color: #d7d7d7;}
html,body {height: 100%;margin:0;padding:0;}
.maincontents {margin:0;padding:0;margin-top:10px;padding-bottom:100px;}
/*.wrap {height: 100%;margin:0;padding:0;}  右にできる余白を消すためのタグ */
.wrap{
min-height: 100vh;
position: relative;/*←相対位置*/
padding-bottom:0px;/*←footerの高さその都度変更が必要*/
box-sizing: border-box;/*←全て含めてmin-height:100vhに*/background-color:rgba(0, 0, 0, 0.7);
}
/* link----------------------------------------------- */
a:link.rink1,a:visited.rink1 {color:#1f98dd; text-decoration:underline;font-weight:bold;}
a:hover.rink1,a:active.rink1 {color:#c0a993;text-decoration:none;overflow: hidden;outline: none;}
a.btnrink {display: inline-block; padding: 0.0em 1.5em;text-decoration:none;color:#67c5ff;border: solid 2px #67c5ff;border-radius:3px; transition: .4s;margin:2px;width:11.5em;text-indent:0.1em;text-align: center;}
a.btnrink:hover {background: #67c5ff;color: white;}
.button1 {
width:90%;padding:10px;text-align:center;
background:#a10b0b;color:#fff;
text-decoration:none;font-size:150%;font-weight:600;
-webkit-transition:0.8s; transition:0.8s;
border-radius:40px;margin:10px;
}
.button1:hover,.button1:focus,.button1:active {
color:#f9f9b2;
background-color:#ff4272;
-webkit-transition:2s;transition: 2s
}
/* backimg----------------------------------------------- */
#visual {
    padding-top:33.5%;margin-top:-30px;
    width: 100%;
    background:url("images/pctop.jpg") no-repeat;
        background-position-x: 0%;
        background-position-y: 0%;
        background-size: auto auto;
    background-position: center top;
    position: relative;
    background-size:100%;border-bottom: solid 0px #000;
	animation: fadeIn 1.5s ease 0s 1 normal;
    -webkit-animation: fadeIn 1.5s ease 0s 1 normal;
}
/* backimg----------------------------------------------- */
#wrapper{background:url('images/back.jpg') no-repeat;
		background-position:center top;
		background-attachment:fixed; background-size: cover;
		}
#wrapper::before {
  content: "";
  background: url('images/back.jpg')no-repeat center center;
  background-size: cover;
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: -1;}/* */
  
/* animation----------------------------------------------- */
@keyframes fadeIn { 
    0% {opacity: 0} /* 始め */
    100% {opacity: 1} /* 終わり */
}
/*古いブラウザ用*/
@-webkit-keyframes fadeIn {0% {opacity: 0} 100% {opacity: 1}
}
.goodsbox { opacity: 0;
        transform: translateY(50px);
        transition: transform 0.8s ease, opacity 0.5s ease;
      }
.goodsbox.visible,.goodsbox2.visible {
        opacity: 1;
        transform: translateY(0);
      }
.goodsbox2 { opacity: 0;
        transform: translateY(80px);
        transition: transform 1.8s ease, opacity 0.5s ease;
      }
/* commonimg----------------------------------------------- */
.img-responsive,img {display: block;max-width: 100%;height: auto;}
.center-block {display: block;margin-right: auto; margin-left: auto;}
.goods-box {
  width: 100%;
  margin: 0 auto;
  border-radius:5px;
  background-color: #fff;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}
.goods-box_image {width:100%;overflow:hidden;position: relative;}
.goods-box_info {padding:12px 20px;}
.goods-box_image img {height: auto;width: 100%;transition:1s all;}
.goods-box_imageimg:hover{transform:scale(1.2,1.2);transition:1s all;}
.goods-box .bottom-right {
position: absolute;bottom:-15px;right:10px; background:rgba(0, 0, 0, 0.6);
padding:0px 10px;color: aliceblue;font-size:1.5rem;
}
.goods-box .bottom-right:after{content:'+';}

/* swiper----------------------------------------------- */
.swiper{padding:10px!important;}
.swiper-wrapper {border:1px solid #ddd;}
.swiper-button-prev {color:aliceblue !important;opacity: 0.5;}
.swiper-button-next {color:aliceblue !important;opacity: 0.5;}
.swiper-button-next:hover,.swiper-button-prev:hover{color:#4D4B4B !important;transition:1s all;}
.swiper-scrollbar {position:relative!important;height:10px!important;margin-top:10px!important;width:97%!important;}
.swiper-scrollbar-drag {background: rgba(47, 157, 160, 1.7)!important;}
.swiper-pagination{position:relative!important;height:10px!important;}
.swiper-pagination-bullet {background-color:#24272D!important;height:14px!important;width:14px!important;margin-top:15px!important;}

/* lightbox----------------------------------------------- */
.lb-nav a.lb-prev {position: absolute;opacity:0.5;left: -80px;/*  0から-80pxへ変更*/} 
.lb-nav a.lb-next {position: absolute;opacity:0.5;right: -80px;/* 0から-80pxへ変更*/} 
/* box1------------------------------------------------------------- */
.cont-box1{width:100%; max-width:100%;margin: 0 auto;margin-top:0px;color: #d7d7d7;}
.cont-box1 .inner {width:90%; max-width:1080px;margin: 0 auto;padding:0px 15px 20px 15px;}

.cont-box1 h1{margin: 0 auto;font-size:250%;font-weight:800;line-height:1.3;padding:100px 2px 50px 15px;color:#fff;text-align:center;}
.cont-box1 h1 span {font-size:60%;letter-spacing: -0.01em;}
.cont-box1 h1 span:before{content:' \A ';white-space: pre;}
.cont-box1 h2{width:95%; max-width:1080px;margin: 0 auto;font-size:160%;font-weight:800;line-height:1.3;padding:110px 2px 50px 15px;color:#fff;}
.cont-box1 h3{width:95%; max-width:1080px;margin: 0 auto;margin-top:100px;font-size:150%;font-weight:800;line-height:1.3;padding:20px 2px 20px 15px;color:#fecf41;}
.cont-box1 h3 span {font-size:50%;letter-spacing: -0.01em;}
.cont-box1 h3 span:before{content:' \A ';white-space: pre;}
.cont-box1 p{padding-top:10px;padding-left: 0;font-size:100%;font-weight:500;color:#d7d7d7;line-height:1.5;}
.cont-box1 p span{padding-top:10px;padding-left: 0;font-size:110%;font-weight:800;color:#aa3512;line-height:1.5;}
.cont-box1 p span:after{content:' \A ';white-space: pre;}
/* box2------------------------------------------------------------- */
.cont-box2{width:100%; max-width:100%;margin: 0 auto;margin-top:-20px;color:#d7d7d7;}
.cont-box2 .inner {width:100%; max-width:980px;margin: 0 auto;margin-top:20px; padding: 15px 15px 20px 15px;border-radius:10px;background-color:rgba(0, 0, 0, 0.9);}
.cont-box2 h3{width:95%; max-width:1080px;margin: 0 auto;margin-top:100px;
font-size:150%;font-weight:800;line-height:1.3;padding:20px 2px 20px 15px;color:#fecf41;
border-bottom: solid 0px #a4a4a4;background-color:rgba(0, 0, 0, 0.0);}
.line{line-height: 1.3;border-bottom: solid 2px #c7d9df;max-width:1080px;margin: 0 auto;}
/* flexbox------------------------------------------------------------- */
.flexbox{display:flex;flex-wrap: wrap;justify-content: center;align-content:flex-start;width:100%;
max-width:1080px;margin: 0 auto;padding:0px;}
.fb_item1{flex-basis:30%;max-width:30%;margin:2px;padding:5px;}
.fb_item2{flex-basis:65%;max-width:65%;margin:2px;padding:5px;}
.fb_item3{flex-basis:100%;max-width:100%;margin: 5px;padding:5px;}
.fb_item4{flex-basis:50%;max-width:50%;margin:0px;padding:0px;}
.fb_item5{flex-basis:32.5%;max-width:32.5%;margin:0px;padding:0px;}

.screenshot {width:100%;overflow:hidden;position: relative;}
.screenshot img {height: auto;width: 100%;transition:1s all;background:#111;}
.screenshot img:hover{opacity:0.5;transition:0.3s;}

/* txt------------------------------------------------------------- */
.txt1{font-size:1.0rem;font-weight:600;}
.txt2{font-size:1.4rem;font-weight:600;}
.txt3{font-size:80%;font-weight:600;}
.txt4{font-size:70%;font-weight:500;}
.txt5{font-size:90%;line-height:2.0;}
.txt6{font-size:120%;}
.txt6b{font-size:100%;}
.txt7{font-size:95%;font-weight:450;}
.txt8{font-size:130%;font-weight:600;}
.txt9{font-size:140%;font-weight:600;}
.txt10{font-size:150%;font-weight:700;}
.txt11{padding-top:5px;padding-left: 0;color: #fefef2;tline-height:1.3;}
.tw{color:#fff;}
.ty{color:#ffe14b;}
.tpu{color:#63607a;}
.tb{color:#aefbef;}
.tb2{color:#141f4f;}
.tr{color:#d5322e;font-weight:700}
.tr2{color:#ff4b53;}
.tg{color:#333;}
.tg2{color:#b9bbbb;}
.tp{color:#ff86f0;}
.ex{font-size:160%;color:#d5322e;font-weight:700;padding:0 5px 0 5px;}
.ex:after{content:' (税込) \A ';white-space: pre;color:#d5322e;font-size:1.0rem;}
.ex:before{content:'￥';color:#d5322e;font-size:1.0rem;}
.release{font-size:100%;color: #d7d7d7;font-weight:700;padding:0 5px 0 5px;}
.release:before{content:'発売日：';}
.release:after,.brtxt:after{content:' \A ';white-space: pre;}
.maker{font-size:100%;color:#252931;font-weight:700;padding:0 5px 0 5px;}
.maker:before{content:'メーカー：';}
.maker:after{content:' \A ';white-space: pre;}
.genre{font-size:100%;color:#252931;font-weight:700;padding:0 5px 0 5px;}
.genre:before{content:'ジャンル：';}
.genre:after{content:' \A ';white-space: pre;}
.tokuten{font-size:100%;color: #d7d7d7;font-weight:700;padding:0 5px 0 5px;}
.tokuten:before{content:'早期特典：';}
.tokuten:after{content:' \A ';white-space: pre;}
.tokuten{font-size:100%;color: #d7d7d7;font-weight:700;padding:0 5px 0 5px;}
.tokuten2:before{content:'GAMECITY特典：';}
.tokuten2:after{content:' \A ';white-space: pre;}


.fade2 {opacity:1;}  
.fade2:hover {opacity:0.6;}
.but {text-align:right;}
.item1{font-size:220%;font-weight:800;line-height:1.2;padding:0 5px 5px 5px;color:#fff;}
.item1 span:after{content:' \A ';white-space: pre;}
.item1 span{font-size:75%;font-weight:600;}

/* 高さ調整------------------------------------------------------------- */
.boxheight-1{margin-top:10px;}
.boxheight-2{margin-top:20px;margin-bottom:30px;}
.boxheight-3{margin-bottom:30px;}
.boxheight-4{margin-top:100px;}
.boxheight-5{margin-bottom:20px;}

/* dltable--------------------------------------------------------- */
dt,dd {margin: 0;padding: 0;}
.dl_table {width:98%;margin-left:5px;background:rgba(230,230,230,0.0);
    border-top: 0px solid #ddd; /* テーブルの上の線 */
    border-left:0px solid #ddd; /* テーブルの左の線 */
    display: flex; /* 子要素のdtとddを横並びにする */
    flex-wrap: wrap; /* 1つのdtとddで1行になるよう改行させる */
}
.dl_table dt,.dl_table dd {
    border-bottom: 1px solid #ddd; /* 各セルの下の線。テーブルの下の線も補える。 */
    border-right: 0px solid #ddd; /* 各セルの右の線。テーブルの右の線も補える。 */
    box-sizing: border-box; /* widthの計算を楽にするため */
    padding: 10px 15px; /* 各セルに余白を取る */
}
.dl_table dt {font-size:1.0rem;width: 200px;}/* dt横幅を200pxに指定 */
.dl_table dd {font-size:0.9rem;width: calc(100% - 200px);}/* テーブル幅からdtを引いた分の横幅を指定。 */

@media screen and (max-width:750px) {
.dl_table  {width: 100%;border-left: none;display: block;margin-left:-5px;}
.dl_table dt,.dl_table  dd {border-right: none;width: 98%;padding:5px 10px;}
.dl_table dt {border-bottom: 1px solid #ddd;padding-bottom:0px;}
.dl_table dd {border-bottom: none;padding-bottom:20px;}
}

/* dltable--------------------------------------------------------- */
.list_table,.list_table > dt,.list_table > dd {box-sizing: border-box;}
.list_table > dt,.list_table > dd {padding:0.5em;margin: 0px;}
.list_table > dt {}
.list_table > dt.ps4 {background-color:#0a3298;color:#fff;}
.list_table > dt.ps5 {background-color:#000;color:#fff;}
.list_table > dd {background-color: #fff;color:#252931;}
@media screen and (max-width: 639px) {
    .list_table > dd {border: 1px solid #3b3b3b;border-top: none;border-bottom: none;}
    .list_table > dt {text-align: center;border: 1px solid #3b3b3b;border-bottom: none;}
    .list_table > dd > ul {text-align: left;}
	.list_table > dd:last-of-type { border-bottom: 1px solid #3b3b3b;}
}
@media print, (min-width: 639px) {
    .list_table {display: flex;flex-wrap: wrap;border-bottom: 1px solid #3b3b3b;}
    .list_table > dt,.list_table > dd {display: flex;flex-direction: column;justify-content: center;border-top: 1px solid #3b3b3b;}
    .list_table > dt {width: 25%;border-left: 1px solid #3b3b3b;border-right:none;}
    .list_table > dd {width: 75%;border-right: 1px solid #3b3b3b;border-left:none;}
}

/* list */
.inList,.inList2,.inList3{padding-left:0em;}
.inList > li {list-style:none;
	list-style-type:none;border-bottom: dashed 0px #C8C9D1;padding:0.3em;
	line-height:1.5;margin-left:1.4em;text-indent:-1.2em;
  }
.inList > li::before {content: '※';margin-right:5px;}
.inList2 > li {line-height:1.6;margin-left:2.4em;text-indent:-0.0em;margin-bottom:10px;padding-bottom:5px;border-bottom: dashed 1px #C8C9D1;}
.inList3{list-style: none;counter-reset: cnt;padding-left: 0;}
.inList3 > li{line-height:1.4;margin-left:1.4em;text-indent:-1.4em;margin-bottom:20px;font-size:100%;font-weight:800;}
.inList3 > li::before{font-size:100%;font-weight:800;content: counters(cnt, ".") ". "; counter-increment: cnt;}
.inList3 span:after{content:' \A ';white-space: pre;}


/* 購入ボタン------------------------------------------------------------- */
.btn_buy {width:98%; max-width:380px; margin: 0 auto;margin-top:20px;margin-bottom:20px;background-color:#d13d3d;
border-radius:30px;text-align: center;padding:1.8%;font-size:130%;font-weight:800;color:#fff;text-decoration: none;}
.btn_buy:hover{background-color:#963a3a;color:#ffe556;text-decoration: none;}
.btn_buy:visited,.btn_buy2:hover,.btn_buy2{text-decoration: none;}

.btn_buyfin {width:98%; max-width:680px; margin: 0 auto;padding: 5px 20px 5px 5px;margin-top:20px;background-color:#000;
border-radius:30px;text-align: center;padding: 2%;font-size:140%;font-weight:800;}

.button3{display: inline-block;position: relative;
padding: 10px 60px;margin:0px 0px 5px 0px;
text-decoration: none;outline: none;
background:#cd0b0b;color:#fff;font-size:110%;font-weight:600;
box-shadow: 0 5px 5px rgba(55,55,55,0.2);
transition: all 0.9s ease-out;
border:1px solid #fff;
border-radius:40px;
}
.button3::after {content: '';
    border: 0;
    border-top: solid 2px #fff;
    border-right: solid 2px #fff;
    display: inline-block;
    width: 10px;
    height: 10px;
    /* 矢印アイコンの位置を設定 */
    position: absolute;
    top: 50%;
    right: 20px;
    transform: translateY(-50%) rotate(45deg); 
}
.button3:hover,.button1:focus,.button1:active {
color:#f9f9b2;
background-color:#6a0404;
-webkit-transition:1s;transition:1s
}
a.button3:hover{color:#f9f9b2;}
a {text-decoration:none;}
/* table------------------------------------------------------------- */
.kago-table,.kago-table2{width:90%;margin: 0 auto;border-collapse: collapse;margin-bottom:10px;}
.kago-table td:nth-child(2n+1){width: calc(80% - 80px);font-size:110%;font-weight:700;text-align:right;padding:10px 20px 0 0 ;border-bottom: 1px solid #ddd;}/* 奇数td */
.kago-table td:nth-child(2n){width:100px;text-align:right;padding:7px 10px 0 0 ;}/* 偶数td */
.kago-table2 td:nth-child(2n+1){width: calc(80% - 80px);font-size:110%;font-weight:700;text-align:right;padding:10px 20px 0 0 ;}/* 奇数td */
.kago-table2 td:nth-child(2n){width:100px;text-align:right;padding:7px 10px 0 0 ;}/* 偶数td */

/* kago ------------------------------------------------------------- */
label.boxche{padding:7px;border-radius:5px;margin-top:10px;background-color:rgba(20, 170, 200,1.0);color:#fff;width:28.5%;}
.color-checkbox {
  display: block;
  position: relative;
  margin: 0.2em 0;
  padding-left:28px;;
  cursor: pointer;
  user-select: none; /* テキストの選択を防ぐ */
}
.color-checkbox input {display: none;}/* inputは非表示にする */
.checktxt{padding:0px;margin:30px;}
/* □ */
.checkmark-all {
  position: absolute;
  top: 0.38em; /* 上からの位置 */
  left:0.35em;
  height: 25px; /* 大きさ */
  width: 25px; /* 大きさ */
  border: solid 2px #9c9c9c; /* 線 */
  border-radius: 4px;
  box-sizing: border-box;background-color:rgba(255, 255, 255, 0.8);
}
.checkmark{
  position: absolute;
  top:0.1em; /* 上からの位置 */
  left:1.0em;
  height: 25px; /* 大きさ */
  width: 25px; /* 大きさ */
  border: solid 2px #9c9c9c; /* 線 */
  border-radius: 4px;
  box-sizing: border-box;background-color:rgba(255, 255, 255, 100);
}
.checkmark:hover,.checkmark-all:hover{background-color:#d3d3d3;}
/* ✓ */
.checkmark:after,.checkmark-all:after {
  content: "";
  position: absolute;
  left: 6px; /* チェックの位置 */
  top: 2px; /* チェックの位置 */
  width: 6px; /* チェックの大きさ */
  height: 10px; /* チェックの大きさ */
  border: solid #FFF;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
  opacity: 0; /* 透明にしておく */
}
.color-checkbox input:checked + .checkmark {background: #02607e;border-color:#02607e;}/* チェックが入ったときの□ */
.color-checkbox input:checked + .checkmark-all {background: #02607e;border-color: #02607e;}/* チェックが入ったときの□ */
.color-checkbox input:checked + .checkmark:after {opacity: 1;} /* 透明を解除 *//* チェックが入ったときの✓ */
.color-checkbox input:checked + .checkmark-all:after {opacity: 1;} /* 透明を解除 *//* チェックが入ったときの✓ */

/** Custom Select **/
.selectdiv {position:relative;float:left;min-width:120px;margin:-12px 0 0 65px;}
/* IE11 hide native button (thanks Matt!) */
select::-ms-expand {display: none;}
.selectdiv:after {
  content: '<>';
  font: 17px "Consolas", monospace;
  color: #333;
  -webkit-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  transform: rotate(90deg);
  right:5px;
  top: 13px;
  padding: 0 0 5px;
  border-bottom: 1px solid #999;
  position: absolute;
  pointer-events: none;
}
.selectdiv select {outline: none!important;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  display: block;
  width:80%;
  max-width:95px;border-radius:4px;
  height:40px;
  float: right;
  margin: 5px 0px;
  padding: 0px 5px;
  font-size:16px;
  line-height: 1.75;
  color: #333;
  background-color: #ffffff;
  background-image: none;
  border: 1px solid #cccccc;
  -ms-word-break: normal;
  word-break: normal;
}

input[type="submit"] {
  -webkit-appearance: none;
  border-radius:40px;
}
/*改行------------------------------------------------------------- */
@media screen and (min-width: 768px){
.sp-br {display: none; }
}
/* ▼表示領域が639px以上の場合 */
@media screen and (min-width:639px) {
img.grp1simage { display: none; }  /* miniを非表示 */
img.grp1image { display: block; } /* bigを表示 */
}
/* ▼表示領域が640px未満の場合 */
@media screen and (max-width: 639px) {
img.grp1simage{ display: block;} /* miniを表示 */
img.grp1image { display: none;}  /* bigを非表示 */
.keshi {display:none}
#visual {
    padding-top:135.5%;margin-top:-30px;
    width: 100%;
    background:url(images/sptop.jpg) no-repeat;
        background-position-x: 0%;
        background-position-y: 0%;
        background-size: auto auto;
    background-position: center top;
    position: relative;
    background-size: 100%;border-bottom: solid 0px;
}
.cont-box1 h1{margin: 0 auto;font-size:150%;font-weight:700;line-height:1.3;padding:50px 5px 50px 5px;color:#fff;text-align:center;}
.cont-box1 h2{font-size:120%;}
.cont-box2 .inner {width:90%;}
/* flexbox------------------------------------------------------------- */
.fb_item1,.fb_item2,.fb_item3,.fb_item4,.fb_item5{flex-basis:95%;max-width:95%;}
.button3{padding: 10px 10px;font-size:80%;}
/* table------------------------------------------------------------- */
.kago-table td:nth-child(2n+1){font-size:90%;}/* 奇数td */
.kago-table td:nth-child(2n){padding:10px 5px 0 0 ;}/* 偶数td*/
label.boxche{width:52%;margin:5px;padding:6px;}
.selectdiv {margin:-10px 0 0 40px;}
}
@media screen and (max-width: 768px) and (min-width: 640px) {
.fb_item1{flex-basis:30%;max-width:30%;padding:5px;}
.fb_item2{flex-basis:60%;max-width:60;padding:5px;}
.fb_item3{flex-basis:100%;max-width:100%;padding:5px;}
.fb_item4{flex-basis:50%;max-width:50%;margin:0px;padding:0px;}
.fb_item5{flex-basis:48%;max-width:48%;margin:0px;padding:0px;}
.cont-box1 h2{font-size:130%;}
.cont-box1 h3{font-size:160%;}
.cont-box2 .inner {width:90%;}
/* table------------------------------------------------------------- */
.kago-table td:nth-child(2n+1){font-size:90%;}/* 奇数td */
.kago-table td:nth-child(2n){padding:10px 5px 0 0 ;}/* 偶数td*/
label.boxche{width:52%;margin:5px;padding:6px;}
.selectdiv {margin:-10px 0 0 40px;}
.checkmark{left:0.5em;}
.button3{padding: 10px 0px;font-size:100%;}
}
@media screen and (max-width: 1099px) and (min-width: 769px) {
.cont-box2 .inner {width:90%;}
.fb_item1{flex-basis:30%;max-width:30%;padding:5px;}
.fb_item2{flex-basis:65%;max-width:65%;padding:5px;}
.fb_item5{flex-basis:40%;max-width:40%;margin:0px;padding:0px;}
.kago-table2{width:80%;}
}