@charset "utf-8"; 
/* CSS Document */
/*
Theme Name: a-train
Theme URI: http://wordpress.org/themes/a-train
Author: the WordPress team
Author URI: http://wordpress.org/
Description: The 2013 theme for WordPress takes us back to the blog, featuring a full range of post formats, each displayed beautifully in their own unique way. Design details abound, starting with a vibrant color scheme and matching header images, beautiful typography and icons, and a flexible layout that looks great on any device, big or small.
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: black, brown, orange, tan, white, yellow, light, one-column, two-columns, right-sidebar, flexible-width, custom-header, custom-menu, editor-style, featured-images, microformats, post-formats, rtl-language-support, sticky-post, translation-ready
Text Domain: a-train
This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.
*/
/***************
common
***************/
html {font-size: 62.5%;}
/*** フェードインアニメーションを作って ***/
@keyframes fadeIn { 0% { opacity: 0; }100% { opacity: 1; }}
body {color: #000000; margin: 0px; padding: 0px; text-align: center; font-size: 1.6rem;font-family:'メイリオ', 'Meiryo', sans-serif; font-weight: 400; font-style: normal; animation: fadeIn 2s forwards;overflow-x:hidden;display:none; }
p {margin: 0; padding: 1rem 0; line-height: 180%; text-align: left;ffont-family:'メイリオ', 'Meiryo', sans-serif; font-weight: 400; font-style: normal;font-size: 1.8rem;}
img { height: auto; border: none; vertical-align: bottom; width: 100%;}
.forpc{display: block;}
.forsp{display:none;}
.bana-box img{}
a {text-decoration: none; color: inherit; transition: all .2s;}
#container{padding:20px 0 40px 0;}
.forpc{display: block;} .forsp{display: none;}

/*動画レスポンシブ*/
.youtube {position: relative; width: 100%; max-width: 800px; }
.youtube iframe {aspect-ratio: 16 / 9; width: 100%; height: auto;}
.nico {position: relative; width: 100%; max-width: 800px; }
.nico iframe {aspect-ratio: 16 / 9; width: 100%; height: auto;}
.pv {position: relative; width: 100%; max-width: 800px; }
.pv iframe {aspect-ratio: 16 / 9; width: 100%; height: auto;}

/*レイアウト*/
.img_right {float: right;}
.clear {clear: both;}
.forpc {display: block;}
.forsp {display: none;}
.site-main {margin:0 auto; width: 100%; background:url("img/bk.jpg")}
.wrap{max-width: 1420px; margin: 0 auto; width: 90%; min-width: 200px;}

/*テキストスタイル*/
.txt-w {color: #fff;}
.txt-c {text-align: center;}
.txt-l {text-align: left;}
.txt-r {text-align: right;}
.bold{font-weight: 900;}
/*フォントカラー*/
.red{color:#940002;}
.bl{color:#192F6B;}
.or{color:#FB4600;}
.pu{color:#7731A0;}
.pi{color:#D44784;}
.line{text-decoration: underline;}

/*TOPボタン*/
#page_top {  position: fixed;  bottom: 1rem; right: 1rem;z-index: 110;}
#page_top a { background-color:rgba(0,0,0,0.84); color: #fff; text-align: center; text-decoration: none; padding: 2rem 2rem 1rem 2rem; display: block}
#page_top a:hover { background-color: #666; text-decoration: none;}
.arrow2{ width: 15px; height: 15px; border: 0.1rem solid; border-color: #fff #fff transparent transparent; transform: rotate(-45deg);}

/*見出しスタイル*/
h1 {position: relative; color: #fff; text-align: center;ont-family:'メイリオ', 'Meiryo', sans-serif;font-weight: 900;font-style: normal; font-size: 3rem; line-height: 150%; padding:2rem 0 0 0; margin: 0 0 2rem 0;z-index: 100;}
h1::before { background-color: #fff; /* 線の色 */ bottom: -0.5rem; /* 線の位置 */ content: ""; height: 2px; /* 線の高さ */ left: 50%; /* 線の中央寄せ */ position: absolute; transform: translateX(-50%); /* 線の中央寄せ */ width: 50px; /* 線の長さ */}
h2 {position: relative;color: #fff; text-align: center;ont-family:'メイリオ', 'Meiryo', sans-serif;font-weight: 900;font-style: normal; font-size: 3rem; line-height: 150%; padding:2rem 0 0 0; margin: 0 0 2rem 0;z-index: 100;}
h2::before { background-color: #fff; /* 線の色 */ bottom: -0.5rem; /* 線の位置 */ content: ""; height: 2px; /* 線の高さ */ left: 50%; /* 線の中央寄せ */ position: absolute; transform: translateX(-50%); /* 線の中央寄せ */ width: 50px; /* 線の長さ */}
h2.bk {position: relative;color: #000; text-align: center;ont-family:'メイリオ', 'Meiryo', sans-serif;font-weight: 900;font-style: normal; font-size: 3rem; line-height: 150%; padding:2rem 0 0 0; margin: 0 0 2rem 0;z-index: 100;}
h2.bk::before { background-color: #000; /* 線の色 */ bottom: -0.5rem; /* 線の位置 */ content: ""; height: 2px; /* 線の高さ */ left: 50%; /* 線の中央寄せ */ position: absolute; transform: translateX(-50%); /* 線の中央寄せ */ width: 50px; /* 線の長さ */}
h2.sub-main {color: #fff; text-align: left;ont-family:'メイリオ', 'Meiryo', sans-serif;font-weight: 900;font-style: normal; font-size: 3rem; line-height: 150%; padding:1rem 0; margin: 0;z-index: 100;}
h2.sub-main::before {width: 0;}

.top-hl{  border-top: 1rem solid #c21500;
  border-image: linear-gradient(to right,  rgba(246,221,98,1) 0%,rgba(205,172,18,1) 50%,rgba(246,221,98,1) 100%);
  border-image-slice: 1;position: relative; background: linear-gradient(to bottom,  rgba(165,22,59,1) 0%,rgba(119,7,36,1) 100%);}
.hl-inner{position: relative;display: flex;align-items: center; justify-content: center;background-image:url("../images/bk-hl.svg"); background-repeat: repeat-x; background-position: bottom center;z-index: 10;padding-bottom: 5rem;}
.top-hl-icon{font-family: "source-han-sans-japanese", sans-serif; font-weight: 700;
font-style: normal;display: block; margin: 0 auto;text-align: center; font-size: 2rem; letter-spacing: 0.1rem;}
.top-hl-icon_bk{color: #000; font-family: "source-han-sans-japanese", sans-serif; font-weight: 700;
font-style: normal;display: block; margin: 0 auto;text-align: center; font-size: 2rem; letter-spacing: 0.1rem;}
img.icon_bk{filter: brightness(0);width: 5rem; display: block; margin: 0 auto;}
.top-hl-icon img{width: 5rem; display: block; margin: 0 auto;}

/*ボタンスタイル*/
.more-btn{background:#304686; border-radius: 0.5rem;display: block; text-align: center; transition: all .2s;}
.more-btn:hover{opacity: 0.5;}
.more-btn img{width: 2rem; margin-right: 0.5rem;}
.more-btn a{display: flex;padding:2rem 0;justify-content: center; align-items: center; color: #fff;font-weight: 900; text-decoration: none; font-size: 2rem;}

/********
ヘッダー
***************/
header{display: flex; width: 95%; padding:1rem  2rem;justify-content: space-between; align-items: center; margin: 0 auto; }
#header {display: none;}
.logo{width: 100%; max-width: 15rem;margin-right: 5rem;}
.news-box{ display: flex; align-items: center; justify-content: flex-start; width: 80%;height: 4rem;
    overflow: hidden;}
.news-icon{width: 80%; width: 8rem; padding:0 1rem 0 2rem;height: 4rem; fill:#304686;}
news-label{margin-left: 0;padding-left: 0.5rem; font-size: 1.5rem;}
.news-title{text-align: left; font-weight: 900;padding-left: 0;}
.site-info{font-size: 1.4rem;display: flex; width: 20%;}
.site-info a{margin: 0 0 0 2rem ; color: #000;}
.news-label{margin-left: 0; border-left: solid thin #000;padding:1rem 1rem 1rem 0.5rem;}

/*==================================================
ニュースティッカーのためのcss
===================================*/
/*ニュース1行の周りの余白*/
.slider a{ display: block; background:#fff; color: #000; padding: 8px 0 6px 0;}

/*日付*/
.slider span {display:inline-block; font-size:1rem; margin-left:10px; color:#777;}
.bx-viewport{ width: 100%; overflow: hidden; position: relative; height: 60px; margin: 0; padding: 8px 0 6px 0;}
.slider li{list-style-type:none; width: 100%!important;}
.bx-wrapper{ height: 5rem; margin: 0; box-shadow: none;}
/***************
メインスライド
***************/
ul.slide-items{background:#000;}
.slide-items img{width: 100%;}
.slick-dotted.slick-slider{padding: 0; margin: 0;}
.slick-prev:hover,
.slick-prev:focus,
.slick-next:hover,
.slick-next:focus {background:rgba(0,0,0,0.80);/*デフォルトがtransparentなので消えないように*/}
.slick-slide:not(.slick-center) { -webkit-filter: opacity(70%); -moz-filter: opacity(70%); -o-filter: opacity(70%); -ms-filter: opacity(70%); filter: opacity(70%); transition: 0.2s linear;}
.slick-prev{font-size: 0;left: 8rem;z-index: 100; background:rgba(0,0,0,0.80); width: 5rem; height: 5rem;}
.slick-next{font-size: 0;right: 8rem;z-index: 100; background:rgba(0,0,0,0.80); width: 5rem; height: 5rem;}
.slick-next:before{  display: inline-block; width: 18px; height: 18px; margin: 0 0 0 -1rem; border-top: 4px solid #fff; border-right: 4px solid #fff; transform: rotate(45deg); font-size: 0}
.slick-prev:before{ display: inline-block; width: 18px; height: 18px; margin: 1rem 0 1rem 1rem; border-left: 4px solid #fff; border-bottom: 4px solid #fff; transform: rotate(45deg); font-size: 0;}

/***************
サブページトップ
***************/
.sub-top, .sub-top_flat{padding:8rem 0; background: url("../images/bk-hl.svg"), rgba(126,0,33,1); display: flex; align-items: center; justify-content: center;}
.sub-txt{display: flex; justify-content: center;}
.sub-txt img{width: 5rem; display: block; margin: 0 auto 1rem auto;}
.sub-icon{color: #fff; font-weight: 900; text-align: center; border-right: solid thin #fff;padding-right: 1rem; margin-right: 1rem;display: flex; justify-content: center; align-items: center;}
.sub-icon div{font-weight: 900; letter-spacing: 0.5rem;}
.sub-icon div img{margin: 0 auto 1rem auto;filter: brightness(200%);}
.sub-main p{font-weight: 900; padding: 0;}

/***************
トップナビゲーション
***************/
.front-nav {display: flex; justify-content: space-between; align-items: center; padding:0 10px; color: #fff; background:#000;}
/*JSを使いfixedクラスが付与された際の設定*/
.fixed{position: fixed;/*fixedを設定して固定*/z-index: 999;/*最前面へ*/top:0;/*位置指定*/left:0;/*位置指定*/}
ul.menu {margin:0 auto;text-align:center; padding: 0; display: flex; align-items: center;height: 8rem; overflow: hidden;}
ul.menu a{color: #fff; display: flex; justify-content: center; align-items: center; padding:0 4rem;transition: .2s cubic-bezier(0.45, 0, 0.55, 1); }
ul.menu a img{width: 4rem; margin-right: 0.5rem; padding:2rem 0;} .nav-about img{width: 5rem; margin-right: 0.5rem; padding:2rem 0;}.nav-about {font-weight: 900;}
ul.menu li{list-style: none; display: inline-block; margin: 0;}
ul.menu li a.current{background:#D6C971;color: #000!important; font-weight: 900; padding:0 4rem;}
ul.menu li a.current img{filter: brightness(0)}
ul.menu li a:hover{background:#D6C971;color: #000!important; font-weight: 900; transition: .2s cubic-bezier(0.45, 0, 0.55, 1);}
ul.menu li a:hover img{filter: brightness(0);transition: .2s cubic-bezier(0.45, 0, 0.55, 1)}


/***************
front
***************/
.main{position: relative;z-index: 1;}
.bana-box{max-width: 1420px; width: 90%; margin: -4rem auto 0 auto;position: relative;z-index: 100; background:#fff;}
.bana-box img{transition: all .2s;}
.bana-box img:hover{opacity: 0.5;}


/*--section-about--*/
.top-atrain{margin: 4rem 0;}
.about-box{display: flex; justify-content: space-between; margin: -3rem 0 0 0; z-index: 100;position: relative;}
.about-txt{width: 50%; margin: 10rem 0 0 2rem;}

/*--section-top-movie--*/
#modal-video { cursor: pointer; display: flex; justify-content: center; align-items: center; position: fixed; z-index: 100; top: 0; left: 0; width: 100vw; height: 100vh; background-color: rgba(0,0,0,0.7); transition: .5s;}
.close { filter: opacity(0); visibility: hidden;}
.open { filter: opacity(1); visibility: visible;}
#modal-video iframe { width: 64vw; height: 36vw;}

.top-movie{background:#7E0021; padding: 6rem;}
.top-movie-list{display: flex; justify-content: space-between; margin: 6rem auto 2rem auto;}
.new-movie{height: 41.5rem; overflow-y: scroll; overflow-x: hidden; margin-bottom: 1rem;}
.top-movie-side{width: 100%; max-width: 60rem; margin:0 0 0 2rem;}
.top-movie-info{display: flex; margin: 0 0 2rem 0; position: relative;}
.top-youtube{width: 40%;}
.top-playbox{display: block; width: 100%;}
.top-playbox iframe{aspect-ratio: 16 / 9; width: 100%;}
.top-movieinfo{display: flex; justify-content: space-between; border-bottom: solid thin #fff;margin-top:1rem;}
.top-author{background:#fff; color: #000; padding: 1rem; font-size: 1.2rem;}
.top-movie-title{width: 60%; color: #fff; font-weight: 900; text-align: left; padding:1rem;}
.art-dink_ch{background:#fff;font-size: 1.8rem; display: flex; justify-content: space-between; align-items: center; text-align: left; font-weight: 900;}
.art-dink_ch a{display: flex;  font-size: 1.8rem; align-items: center; color: #000; padding: 1rem; justify-content: space-between;width: 100%;}
.ch-btn{background:#FF0000;margin: 0; color: #fff; padding:1rem 0.5rem; font-weight: 900; text-align: center; width: 60%; line-height: 150%;}
.ch-txt{display: flex; justify-content: flex-start;align-items: center; width: 100%;text-align: center;}
.ch-txt span{ font-weight: 900; display: block; padding-left: 1rem; text-align: left; line-height: 150%;}
.ch-icon{width: 5rem; margin-right:1rem;}
.js-modal-video-open{position: absolute; width: 100%; height: 100%; z-index: 99; cursor: pointer;}
/*--section-special--*/
.top-special{background:#DFDFDF; padding:4rem 0;}

/*--section-product--*/
.top-series{background:#DFDFDF; padding-bottom: 4rem}
.top-product{margin-top:-4rem; position: relative; z-index: 100;}
.top-product-list{display: flex; list-style: none;  max-width: 1420px;  margin:0 auto; justify-content: space-between; flex-wrap: wrap;}
.top-product-list li{display: flex; margin: 0 0 4rem 0; padding:0; width: 32%;position: relative;}
.top-product-list li a {text-decoration: none; color: inherit; transition: all .2s;}
.top-product-list li a:hover{opacity: 0.5;}
.about-top-series{display: flex; justify-content: center; align-items: center;}
.top-title-info{padding:1rem;}
.top-title{width: 50%;}
.soft-title{font-weight: 900;font-size: 2.6rem; text-align: left;}
.release-date{font-size: 1.2rem; padding-right: 0.1rem; margin-right: 0.1rem; text-align: left; margin-bottom: 0.5rem;}
.top-product-pic{width: 50%; margin: 10px 0;}
.top-product-pic img{width: 100%; height: 250px; object-fit: contain;}

/*--section-shop--*/
.top-shop{padding:4rem 0 4rem 0;}
.shop-linkbox{display: flex; justify-content: center; align-items: center; margin:6rem auto 0 auto;}
.dl-btn_top{background:#304686; padding:0; width: 100%; max-width: 400px;  border-radius: 0.5rem; margin: 0 4rem 0 0;} .dl-btn_top a{display: flex; justify-content: space-between ;color: #fff;font-weight: 900; align-items: center; padding:0 0 0 2rem; text-align: left; line-height: 150%; transition: all .2s;}
.dl-btn_top:hover{opacity: 0.5;}
.dl-icon{background:#000000;padding: 2rem; border-radius: 0 0.5rem 0.5rem 0;}
.dl-icon #icon-dl{width: 4rem; padding:1.7rem 1.2rem; }
.pack-btn_top{background:#016A6D; width: 46%; max-width: 400px;  border-radius: 0.5rem; margin:0 0 0 4rem;} .pack-btn_top a{display: block; color: #fff;font-weight: 900;padding:1rem;  transition: all .2s;}
.pack-btn_top:hover{opacity: 0.5;}
.pack-btn_top a img{width: 98%; margin: 0 auto;}

/*--section-sns--*/
.sns{background:url("../images/bk-sns.png"); padding:4rem 0;}
.sns-box{display: flex; justify-content: center; align-items: center;}
.sns-icon{background:#fff; border-radius: 0.5rem;padding:1rem;box-shadow: 0px 0px 16px -6px rgba(0,0,0,0.6); margin: 2rem;transition: all .2s;}
.sns-icon:hover{opacity: 0.5;}
.sns-acount{width: 500px; margin: 0 auto;}
.x-time{height: 300px; overflow-y: scroll; border-radius: 0; width: 100%; max-width: 600px; margin: 0 0 0 2rem}
.st0{fill:#000;}
/***************
sub-page
***************/
.sub-body{background:#DFDFDF; padding:0 0 6rem 0;}

/*--category--*/
h3.cat-title{font-weight: 900; font-size: 3rem; position: relative; margin-bottom: 2rem;}
h3.cat-title::before { background-color: #000; /* 線の色 */ bottom: -1rem; /* 線の位置 */ content: ""; height: 2px; /* 線の高さ */ left: 50%; /* 線の中央寄せ */ position: absolute; transform: translateX(-50%); /* 線の中央寄せ */ width: 100px; /* 線の長さ */}
.cat-box{position: relative; z-index: 100; background:#fff; border-radius: 0.5rem; max-width: 1420px; margin: -40px  auto 40px auto;padding:3rem 0 0 0;border-bottom: solid 0.5rem rgba(118,0,1,1.00);}
.cat-title{font-weight: 900;} .cat-icon{width: 2rem;}
.list-title{padding:0 0.5rem 0 0; font-weight: 900;display: flex; align-items: center; justify-content: flex-start; font-size: 2rem; width: 100%; max-width: 1420px; margin: 2rem auto 0 auto;padding-left:3rem;} .list-title svg{margin-right: 0.5rem;}
.cat-seach{display: flex; flex-wrap: wrap; padding-left: 20px;}
label input {display: none; /* デフォルトのinputは非表示にする */}
label {display: block; width: 32%;border-radius: 0.5rem;max-width:445px;border:solid 1px #CCC;cursor:pointer; margin: 5px; }
label span{display: block; list-style:none;text-align:center;width: 100%;padding:20px 0;}
label input:checked + span { color: #FFF; background: #000;   border-radius: 5px; }
.p-filter__button{margin: 20px 0;}
.p-filter__button-item--submit{background:rgba(118,0,1,1.00); border-radius: 5px; padding:20px; border: none; color: #fff; width: 300px;cursor:pointer; }
.p-filter__button-item--clear{background:#DFDFDF; border-radius: 5px; padding:20px; border: none; color: #000; width: 200px;cursor:pointer; }
/* タブ---------------------------------------------------------------*/
.tab-group{background:#fff;display: flex; flex-wrap: wrap;max-width: 1420px;margin: 0 auto 20px auto;padding: 0 0 0 30px;justify-content: flex-start;align-items: center;}
.tab{flex-grow: 1;list-style:none;border:solid 1px #CCC;text-align:center;cursor:pointer;max-width:445px; width: 25%;margin: 0.5rem;border-radius: 0.5rem;}
.tab a{display: block; width: 100%;padding:2rem 0;}
.tab a.current{color:#FFF;transition: all 0.2s ease-out; background:#000;}


/***************
about
***************/
#about{	background: rgba(126,0,33,0.80); z-index: -1;/*最背面に設定*/  top: 0; right:0; left:0; bottom:0; overflow: hidden; padding:5rem 0 10rem 0;}
.about-main{border-right: solid thin #fff; text-align: center;letter-spacing: 0.5rem;display: flex; align-items: center; margin-right: 2rem; padding-right: 2rem;}
.about-main img{width: 5rem; display: block; margin: 0 auto 1rem auto;}
.about-main div{font-weight: 900;text-align: center;}
.about-main-txt{display: flex; color: #fff; align-items: stretch; justify-content: center;}
#video-area{position: relative;}
#video { /*天地中央配置*/ position: absolute;  z-index: -1; top: 50%; left: 50%; transform: translate(-50%, -50%); min-height: 100%; min-width: 100%;
}
h3.play-hl{position: relative;font-size: 3rem; font-weight: bold; line-height: 150%; margin: 2rem 0; }
.h-title{color:#D6C971; letter-spacing: 0.5rem}
.r-title{color:#304686; letter-spacing: 0.5rem}
h3.play-hl::before { background-color: #000; /* 線の色 */ bottom: -1rem; /* 線の位置 */ content: ""; height: 2px; /* 線の高さ */ left: 50%; /* 線の中央寄せ */ position: absolute; transform: translateX(-50%); /* 線の中央寄せ */ width: 50px; /* 線の長さ */}
.style-pic{display: flex; justify-content: center; align-items: center;}
.style-pic img{width: 300px; margin: 1rem;}
.playstyle{background:#DFDFDF;}
.playstyle-box{display: flex;}
.hakoniwa{ position: relative; z-index: 100; background:#fff; border-radius: 0 2rem 2rem 0; border-top: solid 1rem #D6C971; width: 40%; margin: -4rem auto 0 0;
box-shadow: 5px 5px 0px 5px rgba(0,0,0,0.2); padding:6rem;}
.recomend_hakoniwa{border:solid 0.5rem #D6C971; position: relative; margin-top:6rem; padding:6rem 1rem; border-radius: 0.5rem;}
.recomend_real{border:solid 0.5rem #304686; position: relative; margin-top:6rem; padding:6rem 1rem; border-radius: 0.5rem;}
.recomend-label{position: absolute; width: 200px; top:-4rem; left: -0.5rem;}
.recomend-box{display: flex; align-items: center;}
.recomend-box img{width: 200px;}
.reco-title{font-weight: 900; font-size: 3rem; text-align: left; line-height: 150%;}
.real{ position: relative; z-index: 100; background:#fff; border-radius: 2rem 0rem 0rem 2rem; border-top: solid 1rem #304686; width: 40%; margin: -4rem 0 0 auto;
box-shadow: 5px 5px 0px 5px rgba(0,0,0,0.2); padding:6rem;}
.reco-btn_h{ background:#D6C971; border-radius: 0.5rem;width: 90%; margin: 4rem auto 0 auto; max-width: 300px;transition: all .2s;box-shadow: 2px 2px 0px 2px rgba(0,0,0,0.2);} 
.reco-btn_h a{display: block; text-align: center; font-weight: 900; padding:2rem 0; color: #000;}
.reco-btn_h:hover{opacity: 0.5;}
.reco-btn_r{ background:#304686; border-radius: 0.5rem;width: 90%; margin: 4rem auto 0 auto; max-width: 300px;box-shadow: 2px 2px 0px 2px rgba(0,0,0,0.2);transition: all .2s;} .reco-btn_r a{display: block; text-align: center; font-weight: 900; padding:2rem 0; color: #fff;transition: all .2s;}
.reco-btn_r:hover{opacity: 0.5;}

.playstile-last-txt{font-weight: 900; font-size: 3rem; line-height: 150%;padding: 6rem 0}
.reco-plat-form_ps{background:#0071BF;  color: #fff; padding:0 0.5rem; font-weight: 900;display: inline-block; margin:0 0.25rem; font-size: 1.4rem;}
.reco-plat{display: flex; justify-content: flex-start;}
.reco-plat-form_win{background:#00445D;  color: #fff; padding:0 0.5rem; font-weight: 900;display: inline-block; font-size: 1.4rem;  margin:0 0.25rem;}
.reco-plat-form_st{background:#0B0055;  color: #fff; padding:0 0.5rem; font-weight: 900;display: inline-block; font-size: 1.4rem;  margin:0 0.25rem;}
.reco-plat-form_sw{background:#C11F1F;  color: #fff; padding:0 0.5rem; font-weight: 900;display: inline-block; font-size: 1.4rem;  margin:0 0.25rem;}

/***************
product
***************/
/*アコーディオン全体*/
.product-list{display: flex; list-style: none;  max-width: 1420px;  margin:0 auto; justify-content: space-between; flex-wrap: wrap;padding: 0;}
.product-list li{margin: 0 0 4rem 0; padding:0; width: 48%; }
.ps{background:#fff; border:solid #0071BF; width: 100%; box-sizing: border-box;}
.ps h3{background:#0071BF;  color: #fff; padding:1rem 0; font-weight: 900; margin: 0;}
.win{background:#fff; border:solid #00445D; width: 100%; box-sizing: border-box;}
.win h3{background:#00445D;  color: #fff; padding:1rem 0; font-weight: 900; margin: 0;}
.steam{background:#fff; border:solid #0B0055; width: 100%; box-sizing: border-box;}
.steam h3{background:#0B0055;  color: #fff; padding:1rem 0; font-weight: 900;  margin: 0;}
.switch{background:#fff; border:solid #C11F1F; width: 100%; box-sizing: border-box;}
.switch h3{background:#C11F1F;  color: #fff; padding:1rem 0; font-weight: 900; margin: 0;}
.mobile{background:#fff; border:solid #5B3196; width: 100%; box-sizing: border-box;}
.mobile h3{background:#5B3196;  color: #fff; padding:1rem 0; font-weight: 900; margin: 0;}
.ds3{background:#fff; border:solid #D06217; width: 100%; box-sizing: border-box;}
.ds3 h3{background:#D06217;  color: #fff; padding:1rem 0; font-weight: 900; margin: 0;}
.pc9800{background:#fff; border:solid #464646; width: 100%; box-sizing: border-box;}
.pc9800 h3{background: #464646;  color: #fff; padding:1rem 0; font-weight: 900; margin: 0;}
.xbox{background:#fff; border:solid #177040;; width: 100%;box-sizing: border-box; }
.xbox h3{background:#177040;  color: #fff; padding:1rem 0; font-weight: 900; margin: 0;}

.about-series{display: block; flex-wrap: wrap; align-items: flex-start;	}
.about-series:after{content: ""; display: block; clear: both;}
.about-series:befor{content: ""; display: block; clear: both;}
.series-pack{width: 250px; float: left; max-width: 300px; margin:0 1rem 0 0;}
.series-pack img{height: 300px; object-fit: contain; }
.series-title{font-weight: 900; font-size: 2.6rem; text-align: left; padding-left: 1rem; line-height: 120%; height: 10rem;}
.soft-txt{font-weight: 400; font-size:1.8rem; text-align: left; padding-left: 0; width: 60%; display: inline-block; height: 24rem; line-height: 150%;}
.day{font-size: 1.2rem;}
.btn-box{float: none; display: flex; flex-wrap: wrap; justify-content: space-between; margin: 1rem auto 0 auto; height: 10rem; transition: all .2s;}
.official-btn{display: flex; align-items: center; justify-content: center; background:#7E0021;  width: 46%; border-radius: 0.5rem; margin-bottom:1rem;height: 5rem;} 
.official-btn a{display: flex; color: #fff;font-weight: 900; justify-content: center; align-items: center; width: 100%; padding:1rem 0;} .official-btn a img{width: 2rem; margin-left: 1rem;}
.pack-btn{display: flex;background:#016A6D; padding:0; justify-content: center; align-items: center;width: 46%; border-radius: 0.5rem; margin-bottom:1rem;height: 5rem;}
.pack-btn a{display: flex; color: #fff;font-weight: 900; justify-content: center; align-items: center; width: 100%; padding:1rem 0;} .pack-btn a img{width: 10rem; margin-left: 1rem;}
.dl-btn{background:#304686; padding:0; width: 46%; border-radius: 0.5rem; margin-bottom:1rem; height: 5rem; display: flex; align-items: center;}
.dl-btn a{display: block; color: #fff;font-weight: 900; text-align: center; width: 100%; padding:1rem 0;} .dl-btn a img{width: 2rem; margin-left: 1rem;}
.title-info{padding:1rem;}
.accordion-area li{ margin: 0;}
.accordion-area section { border: 1px solid #ccc;}
/*アコーディオンタイトル*/
.open-btn {position: relative;/*+マークの位置基準とするためrelative指定*/ width: 25%; margin: 30px auto; font-weight: 900;cursor : pointer;}
.open-btn_end{position: relative;/*+マークの位置基準とするためrelative指定*/ width: 25%; margin: 30px auto; font-weight: 900; height: 15px;}
.open-btn:hover{opacity: 0.5;}
/*アイコンの＋と×*/
.open-btn::before,
.open-btn::after{ position: absolute; content:''; width: 15px; height: 2px; background-color: #333;}
.open-btn::before{ top:48%; left: 0px; transform: rotate(25deg);}
.open-btn::after{   top:48%; left: 13px; transform: rotate(-25deg);}
/*　closeというクラスがついたら形状変化　*/
.open-btn.close_btn::before{ transform: rotate(-25deg);}
.open-btn.close_btn::after{ transform: rotate(25deg);}
/*アコーディオンで現れるエリア*/
.box{ display: none;/*はじめは非表示*/ margin:1rem; padding: 1rem;}


/***************
movie
***************/
.movie-list{display: flex; list-style: none;  max-width: 1420px;  margin:0 auto; justify-content: flex-start; flex-wrap: wrap; padding: 0;}
.movie-list li{display: block; margin: 0 1.5rem 3rem 1.5rem; padding: 0; width: 44.33rem;}
.movie-box{background:#fff;}
.movie-author{background:#000; color:#fff; text-align: left;display: flex;padding:1rem 0 1rem 1rem; font-weight: 900;}
.author{border-right: solid thin #fff; padding-right: 1rem; margin-right: 1rem; font-weight: 900;}
h3.movie-title{font-weight: 900; text-align: left; padding:1rem; height: 6rem; line-height: 2rem;}
.movie-tag{text-align: left; padding: 1.5rem 0 0 1rem; font-size: 1rem; height: 2rem;}
.tag_style{color:#9B880A; border: solid thin; padding:0.5rem 1rem; margin-right: 1rem; font-weight: 900;}
.tag_product{color:#7E0021; border: solid thin; padding:0.5rem; margin-right: 1rem; font-weight: 900;}
.guide-btn{background:#016A6D; width: 8rem; position: fixed; z-index:1000; height: 30rem; right: 0; border-radius: 0.5rem 0 0 0.5rem;box-shadow: 3px 3px 0px 3px rgba(0,0,0,0.6);
border-left: solid 0.5rem #00A597; border-top: solid 0.5rem #00A597; border-bottom: solid 0.5rem #00A597; padding-left: 1rem;display: flex;}
.guide-btn a{ color: #fff;-ms-writing-mode: tb-rl; writing-mode: vertical-rl; line-height: 200%; letter-spacing: 0.2rem; text-align: center;display: flex; justify-content: center; height: 100%; width:100%; font-weight: 900;font-size: 2rem; align-items: center;}
img.guide-icon{width: 4rem!important; margin: 1rem;filter: brightness(0) invert(1);}

/***************
special
***************/
.special-list{display: flex; list-style: none;  max-width: 1420px;  margin:0 auto; justify-content: flex-start; flex-wrap: wrap; padding:4rem 0 0 0;}
.special-list li{display: block; margin: 0 1.5rem 3rem 1.5rem; padding:0; width: 44rem;}
.contest{background:#fff;border-top: solid 0.5rem #005400;position: relative;border-bottom: solid 0.5rem #005400; transition: all .2s}
.contest:hover{opacity: 0.5;}
.contest .tag{background:#005400; color:#fff;font-weight: 900; position: absolute; padding:1rem;}
.pr{background:#fff;border-top: solid 0.5rem #262F87;position: relative;border-bottom: solid 0.5rem #262F87;transition: all .2s;}
.pr:hover{opacity: 0.5;}
.pr .tag{background:#262F87; color:#fff; font-weight: 900; position: absolute; padding:1rem;}
.column{background:#fff;border-top: solid 0.5rem #CE0505;position: relative;border-bottom: solid 0.5rem #CE0505;transition: all .2s;}
.column:hover{opacity: 0.5;}
.column .tag{background:#CE0505; color:#fff; font-weight: 900; position: absolute; padding:1rem;}
h3.special-title{font-weight: 900; text-align: left; padding:1rem 1rem 4rem 1rem;  height: 3rem;}
.special-tagbox{text-align: left; padding:2rem 1rem 1rem 1rem; font-size: 1rem;}
.special-pic{height: 25rem;}
.special-pic img{object-fit: contain; width: 100%; height: 25rem;}
.tag-style{color:#9B880A; border: solid thin; padding:0.2rem 1rem; margin-right: 1rem; font-weight: 900;}
.tag-style:empty{display: none;}
.tag-product{color:#7E0021; border: solid thin; padding:0.5rem; margin-right: 1rem; font-weight: 900;}


/***************
contact
***************/
.contact-box{position: relative; z-index: 100; background:#fff; border-radius: 0.5rem; border-top: solid 0.5rem #D6C971;  max-width: 1420px; margin: -4rem  auto 0 auto;padding:3rem 0;}
table.contact {border-collapse: collapse; margin: 4rem auto;max-width: 1000px; width: 100%;}
table.contact th{ text-align: left; padding:1rem 0;  align-items: center; font-weight: 900; line-height: 150%; vertical-align: top;}
table.contact tr:last-child th{padding-top:3rem;}
table.contact tr:last-child td{padding-top:0;}
table.contact td{text-align: left;padding:1rem 0 1rem 2rem; width:68%;}
table.contact td.form-submit p{text-align: center!important}
.must{background:#D6C971; padding:0.5rem; border-radius: 0.5rem; color: #fff; font-weight: 900; margin-right: 1rem;}
.txt-input{height: 4rem; width: 100%;}
.txt-box{height: 20rem;  width: 100%; margin-top:2rem;}
.form-btn{background:#304686;border-radius: 0.5rem; padding:2rem 0; width: 300px;margin: 4rem auto 0 auto; color: #fff; border: none; font-size: 2rem;}
.form-label{display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: center; font-weight: 900;}
.grecaptcha-badge{top:50%; z-index: 100;}
/*フッター*/
footer{background:#000; padding:4rem 0; color: #fff; font-size: 1.6rem;}
footer a {transition: all .2s;}footer a:hover {opacity: 0.5;}
.artdink-copy{display: flex; justify-content: center; align-items: center;}
.artdink-copy img{width: 3rem; margin: 0 1rem }
.artdink-copy .c_logo{width: 10rem;}
.artdink-cr{margin-top:2rem;}



@media (max-width:720px) {
body {font-size: 1.4rem;line-height: 150%;text-align: justify;}
.forpc, .nonebr {display: none !important;}
.forsp {display: block;}


#pageTop {bottom: 21%; right: 2%;}
img {width: 100%; margin: 0 auto;}
figure{margin:0;}
p {margin: 0; padding: 1rem 0; line-height: 180%; text-align: justify;ffont-family:'メイリオ', 'Meiryo', sans-serif;
font-weight: 400;
font-style: normal;font-size: 1.4rem;}
.content-area{padding:20px 0 0 0;}
#container{padding:20px 0 40px 0;}
.wrap{max-width: 1000px; margin: 0 auto; width: 90%; min-width: 200px;}
	
/*テキストスタイル*/
.text-sub {font-size: 2rem;}
.initial {color: #ff6600;}
.initial-b {color: #000000;}
.txt-w {color: #fff;}
.txt-c {text-align: center;}
.txt-l {text-align: left;}
.txt-r {text-align: right;}


/*見出しスタイル*/
h1 {position: relative; color: #fff; text-align: center;ont-family:'メイリオ', 'Meiryo', sans-serif;font-weight: 900;font-style: normal; font-size: 2rem; line-height: 150%; padding:2rem 0 0 0; margin: 0 0 2rem 0;z-index: 100;}
h1::before {background-color: #fff; /* 線の色 */bottom: -0.5rem; /* 線の位置 */ content: ""; height: 2px; /* 線の高さ */left: 50%; /* 線の中央寄せ */ position: absolute; transform: translateX(-50%); /* 線の中央寄せ */ width: 50px; /* 線の長さ */}
h2 {position: relative;color: #fff; text-align: center;ont-family:'メイリオ', 'Meiryo', sans-serif;font-weight: 900;font-style: normal; font-size: 2rem; line-height: 150%; padding:2rem 0 0 0; margin: 0 0 2rem 0;z-index: 100;}
h2::before { background-color: #fff; /* 線の色 */ bottom: -0.5rem; /* 線の位置 */ content: ""; height: 2px; /* 線の高さ */ left: 50%; /* 線の中央寄せ */ position: absolute; transform: translateX(-50%); /* 線の中央寄せ */ width: 50px; /* 線の長さ */}
h2.bk {position: relative;color: #000; text-align: center;ont-family:'メイリオ', 'Meiryo', sans-serif;font-weight: 900;font-style: normal; font-size: 2rem; line-height: 150%; padding:2rem 0 0 0; margin: 0 0 2rem 0;z-index: 100;}
h2.bk::before { background-color: #000; /* 線の色 */ bottom: -0.5rem; /* 線の位置 */ content: ""; height: 2px; /* 線の高さ */ left: 50%; /* 線の中央寄せ */  position: absolute; transform: translateX(-50%); /* 線の中央寄せ */ width: 50px; /* 線の長さ */}
h2.sub-main {color: #fff; text-align: left;ont-family:'メイリオ', 'Meiryo', sans-serif;font-weight: 900;font-style: normal; font-size: 2rem; line-height: 150%; padding:1rem 0; margin: 0;z-index: 100;}
h2.sub-main::before {width: 0;}

.top-hl{  border-top: 0.5rem solid #c21500; border-image: linear-gradient(to right,  rgba(246,221,98,1) 0%,rgba(205,172,18,1) 50%,rgba(246,221,98,1) 100%); border-image-slice: 1;position: relative; background: linear-gradient(to bottom,  rgba(165,22,59,1) 0%,rgba(119,7,36,1) 100%);}
.hl-inner{position: relative;display: flex;align-items: center; justify-content: center;background-image:url("../images/bk-hl.svg"); background-repeat: repeat-x; background-position: bottom center;z-index: 10;padding-bottom: 5rem;}
.top-hl-icon{font-family: "source-han-sans-japanese", sans-serif; font-weight: 700;
font-style: normal;display: block; margin: 0 auto;text-align: center; font-size:1rem; letter-spacing: 0.1rem;}
.top-hl-icon_bk{color: #000; font-family: "source-han-sans-japanese", sans-serif; font-weight: 700;
font-style: normal;display: block; margin: 0 auto;text-align: center; font-size: 1rem; letter-spacing: 0.1rem;}
img.icon_bk{filter: brightness(0);width: 3rem; display: block; margin: 0 auto;}
.top-hl-icon img{width: 3rem; display: block; margin: 0 auto;}

/*ボタンスタイル*/
.more-btn{background:#304686; border-radius: 0.5rem; display: flex; justify-content: center;}
.more-btn img{width: 2rem; margin-right: 0.5rem;}
.more-btn a{display: block;padding:2rem 0;justify-content: space-between; align-items: center; color: #fff;font-weight: 900; text-decoration: none; font-size: 1.6rem; width: 100%; text-align: center;}

/***************
ヘッダー
***************/
header{display: flex; width: 100%; padding:0 0 ;justify-content: center; align-items: center; margin: 0 auto; max-width: 1920px;flex-wrap: wrap;}
.logo{width: 100%; max-width: 11rem;margin: 1rem auto;}
.news-box{width: 100%; max-width: 1000px; display: flex; align-items: center; justify-content: flex-start; background:#304686;color: #fff; padding:0.5rem 0;}
.news-icon{width: 80%; width: 5rem; padding:0 1rem 0 0.5rem;height: 2rem;padding-right: 1rem;  fill:#fff;}
.news-label{margin-left: 0;padding-left: 1rem; font-size: 1.2rem; border-left: solid thin #fff; width: 20%;}
.news-title{width: 100%;text-align: left; font-weight: 900; max-width: 800px;padding-left: 0; overflow: hidden;}
.site-info{font-size: 1.4rem;width: auto;display: none}
.site-info a{margin: 0 0 0 2rem ;}
/*==================================================
ニュースティッカーのためのcss
===================================*/
/*ニュース1行の周りの余白*/
.slider a{ display: block;  background:#304686; color: #fff; padding: 8px 0 6px 0;}
/*日付*/
.slider span { display:inline-block; font-size:1rem; margin-left:10px; color:#fff;}
.bx-viewport{ width: 100%; overflow: hidden; position: relative; height: 60px; margin: 0; padding: 8px 0 6px 0;}
li { list-style-type:none;}
.bx-wrapper{height: 5rem; margin: 0; box-shadow: none;background: #304686; border: none;}

/***************
サブページトップ
***************/
.sub-top{padding:4rem 0 8rem; background: url("../images/bk-hl.svg"), rgba(126,0,33,1); display: flex; align-items: center; justify-content: center;}
.sub-top_flat{padding:4rem 0; background: url("../images/bk-hl.svg"), rgba(126,0,33,1); display: flex; align-items: center; justify-content: center;}
.sub-txt{display: flex; justify-content: center; width: 90%; margin: 0 auto;}
.sub-txt img{width: 5rem; display: block; margin: 0 auto 1rem auto;}
.sub-icon{color: #fff; font-weight: 900; text-align: center; border-right: solid thin #fff;padding-right: 1rem; margin-right: 1rem;display: flex; justify-content: center; align-items: center; font-size: 1rem; letter-spacing: 0;}
.sub-icon div{font-weight: 900; letter-spacing: 0; text-align: center;}
.sub-icon div img{margin: 0 auto 1rem auto;filter: brightness(200%); width: 3rem;}
.sub-main p{font-weight: 900; padding: 0;}

/***************
トップナビゲーション
***************/
.front-nav {display: none; }
nav ul{display: flex; flex-wrap: wrap!important;}
.nav-about img{width: 5rem; margin-right:0; padding: 0;}
.humberger { display: block; height: 5.2rem; margin-left: auto; right: 0; position: fixed; z-index: 200; top:0; width: 6rem;  border: none;  background-color: #000;}
.humberger p{color: #fff; font-size: 1rem;margin-top:2.2rem; text-align: center;}
.humberger.-active .humberger__line { background-color: transparent;}
.humberger.-active .humberger__line::before { top: 0; transform: rotate(45deg);}
.humberger.-active .humberger__line::after { top: 0; transform: rotate(-45deg);}
.humberger__line { display: block; height: 2px; position: absolute; top: 2rem; left: 50%; transform: translateX(-50%); width: 24px; background-color: #fff; transition: 0.4s;}
.humberger__line:before,
.humberger__line:after { content: ""; display: block; height: 100%; position: absolute; width: 100%; background-color: #fff; transition: inherit;}
.humberger__line:before { top: -6px;}
.humberger__line:after { top: 6px;}
.humberger__text { position: absolute; bottom: 8px; left: 50%; transform: translateX(-50%); width: 100%;}
.header__nav-area { position: fixed; top: 5.2rem; right: -100%;  z-index: 200; height: 100vh; width: 300px; visibility: hidden; padding-top: 0; background: #000; transition: 0.4s; overflow-y: auto;}
.header__nav-area.-active { right: 0; visibility: visible;}
.global-navigation { padding-bottom: 120px;}
global-navigation__list{ display: flex; flex-wrap:wrap;}
.global-navigation__list > li {width: 100%; border-bottom: 1px solid #e7e9ee;display: flex; justify-content: flex-start;}
.global-navigation__list > li + li {}
.global-navigation__list > li a{color:#fff;display: block; padding:2rem 1rem; width: 100%;}
.global-navigation__list > li a img{width: 3rem; margin-right: 0.5rem;}
.global-navigation__link {display: block; align-items: center; justify-content: space-between; color: #fff; transition: color 0.4s;}
.global-navigation__link.-accordion { position: relative; background: none; border: none; -webkit-appearance: none; -moz-appearance: none; appearance: none; width: 100%; padding: 0;}
.global-navigation__link.-accordion::after {content: ''; display: block; height: 12px; position: absolute; top: 50%; right: 15px; width: 2px; background-color: #fff; transform: translateY(-50%); transition: transform 0.4s;}
.global-navigation__link.-accordion::before { content: ''; display: block; height: 2px; position: absolute; top: 50%; right: 10px; width: 12px; background-color: #fff; transform: translateY(-50%);}
.global-navigation__link.-active::after { transform: translateY(-50%) rotate(-90deg);}
.global-navigation__list .current{background:#D6C971;color: #000!important; font-weight: 900;}
.global-navigation__list .current img{filter: brightness(0)}	
.accordion { height: 0; overflow: hidden; visibility: hidden; transition: 0.4s;}
.accordion.-active { height: auto; padding-top: 0; visibility: visible;}
.accordion__list li {font-size: 0.75rem;}
.accordion__list li + li { margin-top: 0;}
.accordion__link { color: #172e59;}


/***************
メインスライド
***************/
ul.slide-items{background:#000;}
ul.slide-items li{z-index: 100;}
.slide-items img{width: 100%;}
.slick-dotted.slick-slider{padding: 0; margin: 0;}
.slick-slide:not(.slick-center) {
    -webkit-filter: opacity(70%);
    -moz-filter: opacity(70%);
    -o-filter: opacity(70%);
    -ms-filter: opacity(70%);
    filter: opacity(70%);
	transition: 0.2s linear;}
.slick-prev{font-size: 0;left: 1rem;z-index: 200; width: 3rem; height: 3rem; position: absolute;}
.slick-next{font-size: 0;right: 1rem;z-index: 200; width: 3rem; height: 3rem; position: absolute;}
.slick-next:before{display: inline-block; width: 1.2rem; height: 1.2rem; margin:0 1rem 0 0; border-top: 0.2rem solid #fff; border-right: 0.2rem solid #fff; transform: rotate(45deg); font-size: 0}
.slick-prev:before{display: inline-block; width: 1.2rem; height: 1.2rem; margin:0 0 0 1rem; border-left: 0.2rem solid #fff; border-bottom: 0.2rem solid #fff; transform: rotate(45deg); font-size: 0;}	
	
/***************
front
***************/
.main{position: relative;z-index: 1;}
.bana-box{max-width: 1420px; width: 100%; margin: -4rem auto 0 auto;position: relative; background: none;}
.bana-box img{transition: all .2s;}
.bana-box img:hover{opacity: 0.5;}

/*--section-about--*/
.top-atrain{margin: 4rem 0;}
.about-box{display: flex; justify-content: space-between; margin: -5rem 0 0 0; z-index: 100;position: relative; flex-wrap:wrap;}
.about-txt{width: 100%; margin: 1rem 0 1rem 0;}

/*--section-top-movie--*/
.top-movie{background:#7E0021; padding: 2rem 0 4rem 0;}
.top-movie-list{display: flex; justify-content: space-between; margin: 3rem auto 2rem auto; flex-wrap: wrap;}
.new-movie{height: 21rem; overflow-y: scroll; overflow-x: hidden; margin-bottom: 1rem;}
.top-movie-side{width: 100%; max-width: 60rem; margin:2rem 0 0 0;}
#movie{margin: 0 auto;}
#thumbnail { width: 160px;}
#thumbnail li {list-style: none; margin: 0 0 1rem 0;}
#thumbnail li img { width: 100%;  height: auto;}
.art-dink_ch{background:#fff;font-size: 1.8rem; display: flex; justify-content: space-between; align-items: center; text-align: justify; font-weight: 900;}
.art-dink_ch a{display: flex; flex-wrap: wrap; font-size: 1.8rem; align-items: center; color: #000; padding: 1rem; justify-content: space-between;width: 100%;}
.ch-btn{background:#FF0000;margin: 0; color: #fff; padding:1rem 0.5rem; font-weight: 900; text-align: center; width: 100%; line-height: 150%;}
.ch-txt{display: flex; justify-content: flex-start;align-items: center; width: 100%;text-align: center;}
.ch-txt span{ font-weight: 900; display: block; padding-left: 1rem; text-align: left; line-height: 150%;}
.ch-icon{width: 5rem; margin-right:1rem;}
/*--section-special--*/
.top-special{background:#DFDFDF; padding:2rem 0 4rem 0;}

/*--section-product--*/
.top-series{background:#DFDFDF; padding: 2rem 0 4rem 0;}
.top-product{margin-top:-4rem; position: relative; z-index: 100; padding:0 0 2rem 0}
.top-product-list{display: flex; list-style: none;  max-width: 1420px;  margin:0 auto; justify-content: space-between; flex-wrap: wrap;}
.top-product-list li{display: block; margin: 0 0 2rem 0; padding:0; width: 100%;}
.top-product-list li:last-child{display: block; margin: 0; padding:0; width: 100%;}
.about-top-series{display: flex; justify-content: center; align-items: center;}
.top-title-info{padding:1rem;display: flex; flex-wrap: wrap;}
.top-title{width: 50%;}
.soft-title{font-weight: 900;font-size: 1.8rem;}
.release-date{ font-size: 1.2rem; padding-right: 0.5rem; margin-right: 0.5rem;}
.top-product-pic{width: 90%; margin: 2rem auto;text-align: center;}
.top-product-pic img{width: 100%; height: 25rem; object-fit: contain;}

/*--section-shop--*/
.top-shop{padding:2rem 0 4rem 0;}
.shop-linkbox{display: flex; justify-content: center; align-items: center; margin:2rem auto 0 auto; flex-wrap: wrap;}
.dl-btn_top{background:#304686; padding:0; width: 100%; max-width: 400px;  border-radius: 0.5rem; margin:1rem auto;} .dl-btn_top a{display: flex; justify-content: space-between ;color: #fff;font-weight: 900; align-items: center; padding:0 0 0 2rem; font-size: 1.6rem;}
.dl-icon{background:#000000;padding: 2rem 1rem 1rem 1rem; border-radius: 0 0.5rem 0.5rem 0;}
.dl-icon #icon-dl{width: 3rem; padding:1rem; }
.pack-btn_top{background:#016A6D; width: 100%; max-width: 400px;  border-radius: 0.5rem; margin:1rem auto;} .pack-btn_top a{display: block; color: #fff;font-weight: 900;padding:1rem;text-align: center; font-size: 1.6rem; } 
.pack-btn_top a img{width: 98%; margin: 0 auto;}

/*--section-sns--*/
.sns{background:url("../images/bk-sns.png"); padding:2rem 0 4rem 0;}
.sns-box{display: flex; justify-content: center; align-items: center;
flex-wrap: wrap; margin-bottom: 2rem;}
.sns-icon{background:#fff; border-radius: 0.5rem;padding:1rem;box-shadow: 0px 0px 16px -6px rgba(0,0,0,0.6); margin: 0.5rem;transition: all .2s;}
.sns-icon:hover{opacity: 0.5;}
.sns-acount{width: 500px; margin: 0 auto;}
.x-time{height: 300px; overflow-y: scroll; border-radius: 0; width: 100%; max-width: 600px; margin: 0 auto;}
.st0{fill:#000;}

/***************
sub-page
***************/
.sub-body{background:#DFDFDF; padding:0 0 6rem 0;}


/*--category--*/
h3.cat-title{font-weight: 900; font-size: 2rem; position: relative; margin-bottom: 2rem; text-align: center;}
h3.cat-title::before { background-color: #000; /* 線の色 */ bottom: -1rem; /* 線の位置 */ content: ""; height: 2px; /* 線の高さ */ left: 50%; /* 線の中央寄せ */ position: absolute; transform: translateX(-50%); /* 線の中央寄せ */ width: 100px; /* 線の長さ */}
.cat-box{position: relative; z-index: 80; background:#fff; border-radius: 1rem 1rem 0 0; max-width: 1420px;margin: -40px auto 30px auto;width: 90%; padding: 3rem 0 1rem 0;border-bottom: solid 0.5rem rgba(118,0,1,1.00);}
.cat-title{font-weight: 900;} .cat-icon{width: 2rem;}
.cat-list{text-align:center; padding-left: 0; margin: 0 auto;}
.cat-seach{display: flex; flex-wrap: wrap; padding-left: 10px;}
input[type="checkbox"] {  margin: 0; padding: 0; background: none; border: none; border-radius: 0; outline: none;-webkit-appearance: none; -moz-appearance: none; appearance: none;}
.cat-seach{display: flex; flex-wrap: wrap; padding-left: 20px;}
label input {display: none; /* デフォルトのinputは非表示にする */}
label {display: block; width: 90%;border-radius: 0.5rem;max-width:445px;border:solid 1px #CCC;cursor:pointer; margin: 5px; }
label span{display: block; list-style:none;text-align:center;width: 100%;padding:20px 0;}
label input:checked + span { color: #FFF; background: #000;  border-radius: 5px;  }
.p-filter__button{margin: 20px 0; text-align: center;}
.p-filter__button-item--submit{background:rgba(118,0,1,1.00); border-radius: 5px; padding:20px; border: none; color: #fff; width: 80%; margin-bottom: 10px;cursor:pointer; }
.p-filter__button-item--clear{background:#DFDFDF; border-radius: 5px; padding:20px; border: none; color: #000;  width: 80%;cursor:pointer; }		
/* タブ---------------------------------------------------------------*/
.tab-group{background:#fff;display: flex; flex-wrap: wrap;max-width: 1420px;width: 90%;margin: 0 auto;padding: 0 0 2rem 0;justify-content: flex-start;align-items: center;}
.tab{flex-grow: 1;padding:0;list-style:none;border:solid 1px #CCC;text-align:center;cursor:pointer;max-width:25rem; width: 100%;margin: 0.5rem auto;border-radius: 5px;}
.tab a{display: block; width: 100%;padding:2rem 0;border-radius: 5px;}
.panel{display:none;}
.tab a.current{color:#FFF;transition: all 0.2s ease-out; background:#000;}

/***************
about
***************/
#about{	background: rgba(126,0,33,0.80); z-index: -1;/*最背面に設定*/  top: 0; right:0; left:0; bottom:0; overflow: hidden; padding:4rem 0 6rem 0;}
.about-main{border-right: none; text-align: center;letter-spacing: 0.5rem;display: flex; align-items: center; flex-wrap: wrap; justify-content: center; font-weight: 900; padding-right:0; margin:2rem 0 0 0;}
.about-main img{width: 3rem; display: block; margin: 0 auto 1rem auto;}
.abont-main div{font-weight: 900;text-align: center;}
.about-main-txt{display: flex; color: #fff; align-items: stretch; justify-content: center; flex-wrap: wrap;}
.about-main-txt div{width: 90%; margin: 0 auto;}
.about-main-txt div p{font-size: 1.4rem;text-align: justify;}
#video-area{position: relative;}
#video { /*天地中央配置*/ position: absolute;  z-index: -1; top: 0; left: 50%; transform: translate(-50%, -80%); min-height: 100%; min-width: 100%;
}
h3.play-hl{position: relative;font-size: 2rem; font-weight: bold; line-height: 150%; margin: 0 0 2rem 0; text-align: center;}
.h-title{color:#D6C971; letter-spacing: 0.5rem}
.r-title{color:#304686; letter-spacing: 0.5rem}
h3.play-hl::before { background-color: #000; /* 線の色 */ bottom: -1rem; /* 線の位置 */ content: ""; height: 2px; /* 線の高さ */ left: 50%; /* 線の中央寄せ */ position: absolute; transform: translateX(-50%); /* 線の中央寄せ */ width: 50px; /* 線の長さ */}
.style-pic{display: flex; justify-content: center; align-items: center; flex-wrap: wrap;}
.style-pic img{width: 300px; margin: 1rem;}
.playstyle{background:#DFDFDF;}
.playstyle-box{display: flex; flex-wrap: wrap;}
.hakoniwa{ position: relative; z-index: 100; background:#fff; border-radius:1rem; border-top: solid 1rem #D6C971; width: 90%; margin: -4rem auto 0 auto;
box-shadow: 2px 2px 0px 2px rgba(0,0,0,0.2); padding:2rem 1rem;}
.recomend_hakoniwa{border:solid 0.5rem #D6C971; position: relative; margin-top:6rem; padding:6rem 0 0 0; border-radius: 0.5rem;}
.recomend_real{border:solid 0.5rem #304686; position: relative; margin-top:6rem; padding:6rem 0 0 0; border-radius: 0.5rem;}
.recomend-label{position: absolute; width: 200px; top:-4rem; left: -0.5rem;}
.recomend-box{display: flex; align-items: center; flex-wrap: wrap;}
.recomend-box img{width: 200px;}
.reco-title{font-weight: 900; font-size: 2rem; text-align: left; line-height: 150%; padding:0 1rem; width: 100%;}
.real{position: relative; z-index: 100; background:#fff; border-radius:1rem; border-top: solid 1rem #304686; width: 90%; margin: 4rem auto 0 auto;
box-shadow: 2px 2px 0px 2px rgba(0,0,0,0.2); padding:2rem 1rem;	}
.reco-btn_h{ background:#D6C971;border-radius: 0.5rem;width: 95%; margin: 2rem auto 2rem auto; max-width: 100%;box-shadow: 2px 2px 0px 2px rgba(0,0,0,0.2);} .reco-btn_h a{display: block; text-align: center; font-weight: 900; padding:2rem 0;}
.reco-btn_r{ background:#304686; border-radius: 0.5rem;width: 95%; margin: 2rem auto 2rem auto; max-width: 100%;box-shadow: 2px 2px 0px 2px rgba(0,0,0,0.2);} .reco-btn_h a{display: block; text-align: center; font-weight: 900; padding:2rem 0;}
.playstile-last-txt{font-weight: 900; font-size: 2rem; line-height: 150%;padding: 2rem 1rem 4rem 1rem; text-align: center;}
.reco-plat{display: flex; justify-content: flex-start; margin: 0 0 1rem 0; flex-wrap: wrap;}
.reco-plat-form_ps{background:#0071BF;  color: #fff; padding:1rem 0; font-weight: 900; font-size: 1.4rem; margin:1rem 0 0 0;display: block; text-align: center; width: 100%;}
.reco-plat-form_win{background:#00445D;  color: #fff; padding:1rem 2rem; font-weight: 900; font-size: 1.4rem; margin:1rem 0 0 0;display: block; text-align: center; width: 100%;}
.reco-plat-form_st{background:#0B0055; color: #fff; padding:1rem 2rem; font-weight: 900; font-size: 1.4rem; margin:1rem 0 0 0;display: block; text-align: center; width: 100%;}
.reco-plat-form_sw{background:#C11F1F;  color: #fff; padding:1rem 2rem; font-weight: 900; font-size: 1.4rem; margin:1rem 0 0 0;display: block; text-align: center; width: 100%;}

/***************
product
***************/
/*アコーディオン全体*/
.product-list{display: flex; list-style: none;  max-width: 1420px;  margin:0 auto; justify-content: space-between; flex-wrap: wrap;}
.product-list li{display: block; margin: 0 auto 2rem auto; padding:0; width: 90%;}
.product-list li:last-child{ margin: 0 auto; }
.ps{background:#fff; border:solid #0071BF; width: 100%;}
.ps h3{background:#0071BF;  color: #fff; padding:1rem 0; font-weight: 900; text-align: center;}
.win{background:#fff; border:solid #00445D; width: 100%;}
.win h3{background:#00445D;  color: #fff; padding:1rem 0; font-weight: 900;text-align: center;}
.steam{background:#fff;  color: #000; padding:0; font-weight: 900; text-align: center;}
.steam h3{background:#0B0055;  color: #fff; padding:1rem 0; font-weight: 900; text-align: center;}
.switch{background:#fff; border:solid #C11F1F; width: 100%;}
.switch h3{background:#C11F1F;  color: #fff; padding:1rem 0; font-weight: 900;text-align: center;}	
.mobile{background:#fff; border:solid #5B3196; width: 100%;}
.mobile h3{background:#5B3196;  color: #fff; padding:1rem 0; font-weight: 900;text-align: center;}
.ds3{background:#fff; border:solid #D06217; width: 100%;}
.ds3 h3{background:#D06217;  color: #fff; padding:1rem 0; font-weight: 900;text-align: center;}
.pc9800{background:#fff; border:solid #464646; width: 100%;}
.pc9800 h3{background:#464646;  color: #fff; padding:1rem 0; font-weight: 900;text-align: center;}
.xbox{background:#fff; border:solid #177040; width: 100%;}
.xbox h3{background:#177040;  color: #fff; padding:1rem 0; font-weight: 900;text-align: center;}
	
.about-series{display: flex; flex-wrap: wrap; align-items: center;	}
.about-series:after{content: ""; display: block; clear: both;}
.about-series:befor{content: ""; display: block; clear: both;}
.series-pack{width: 40%; float: left; max-width: 300px; min-width: 100px; margin:0 1rem 0 0;}
.series-pack img{height: auto; object-fit: contain;}
.series-title{font-weight: 900; font-size: 2rem; text-align: left; padding-left: 1rem; width: 50%;}
.series-title:after{content: ""; display: block; clear: both;}
.series-title:befor{content: ""; display: block; clear: both;}
.soft-txt{font-weight: 400; font-size: 1.6rem; text-align: left; padding-left: 0; width: 100%; display: inline; height: auto; line-height: 150%; padding:10px 0;}
.day{font-size: 1.2rem;}
.btn-box{display: flex; flex-wrap: wrap; justify-content: space-between; margin: 1rem auto 0 auto; height: auto;}
.official-btn{background:#7E0021; padding:0 ; width: 100%; border-radius: 0.5rem; margin-bottom: 1rem;} 
.official-btn a{display: block; color: #fff;font-weight: 900; text-align: center; padding:1rem 0;} .official-btn a img{width: 2rem; margin-left: 1rem;}
.pack-btn{ display: flex; align-items: center; justify-content: center; background:#016A6D;width: 100%; border-radius: 0.5rem;}
.pack-btn a{ display: block; color: #fff;font-weight: 900;  text-align: center;  width: 100%;  padding:1rem 0;} .pack-btn a img{width: 10rem; margin-left: 1rem;}
.dl-btn{background:#304686; padding:1rem; width: 100%; border-radius: 0.5rem; margin-top:1rem;}
.dl-btn a{display: block; color: #fff;font-weight: 900; text-align: center;  padding:1rem 0;} .dl-btn a img{width: 2rem; margin-left: 1rem;}
.title-info{padding:1rem;}
.accordion-area li{ margin: 0;}
.accordion-area section { border: 1px solid #ccc;}
/*アコーディオンタイトル*/
.open-btn { position: relative;/*+マークの位置基準とするためrelative指定*/ cursor: pointer; font-size:1.2rem;padding:0 ; transition: all .5s ease;width: 100%; margin: 20px auto; font-weight: 900; text-align: center;}
.open-btn_end { position: relative;/*+マークの位置基準とするためrelative指定*/ cursor: pointer; font-size:1.2rem;padding:0 ; transition: all .5s ease;width: 100%; margin: 20px auto; font-weight: 900; text-align: center;}
/*アイコンの＋と×*/
.open-btn::before,
.open-btn::after{ position: absolute; content:''; width: 15px; height: 2px; background-color: #333;}
.open-btn::before{ top:48%; left: 20rem; transform: rotate(25deg);}
.open-btn::after{   top:48%; left: 21.3rem; transform: rotate(-25deg);}
/*　closeというクラスがついたら形状変化　*/
.open-btn.close::before{ transform: rotate(-25deg);}
.open-btn.close::after{ transform: rotate(25deg);}
/*アコーディオンで現れるエリア*/
.box{ display: none;/*はじめは非表示*/ margin:1rem; padding: 1rem;}


/***************
movie
***************/
.movie-list{display: flex; list-style: none;  max-width: 1420px;  margin:0 auto; justify-content: space-between; flex-wrap: wrap;}
.movie-list li{display: block; margin: 0 auto 2rem auto; padding:0; width: 90%;}
.movie-box{background:#fff;}
.movie-author{background:#000; color:#fff; text-align: left;display: flex;padding:1rem 0 1rem 1rem; font-weight: 900;}
.author{border-right: solid thin #fff; padding-right: 1rem; margin-right: 1rem; font-weight: 900;}
h3.movie-title{font-weight: 900; text-align: left; padding:0 1rem 2rem 1rem; height: auto;}
.movie-tag{text-align: left; padding:1rem; font-size: 1rem; height: auto;}
.tag_style{color:#9B880A; border: solid thin; padding:0.5rem; margin-right: 1rem; font-weight: 900;}
.tag-product{color:#7E0021; border: solid thin; padding:0.5rem; margin-right: 1rem; font-weight: 900;}
.guide-btn{background: #016A6D; position: fixed;  z-index: 90; height: auto; width: 95%;  right: 0;  left: 0; margin: auto; top: auto; bottom: 1rem;  border-radius: 1rem; display: flex; align-items: center; justify-content: center; box-shadow: none; border-left: solid 0.1rem #fff;}
.guide-btn a{ color: #fff;-ms-writing-mode: horizontal-tb; writing-mode: horizontal-tb;line-height: 200%; letter-spacing: 0.2rem; text-align: center;display: flex; justify-content: center; padding:1rem 0; align-items: center; font-weight: 900; font-size: 2rem;}
.guide-btn svg{widows: 2rem;}

/***************
special
***************/
.special-list{display: flex; list-style: none;  max-width: 1420px;  margin:0 auto; justify-content: space-between; flex-wrap: wrap; padding:4rem 0 2rem 0;}
.special-list li{display: block; margin: 0 auto 2rem auto; padding:0; width: 100%;}
.special-list li:last-child{ margin: 0 auto;}
.contest-box{background:#fff;border-top: solid 0.5rem #005400;position: relative;border-bottom: solid 0.5rem #005400;}
.contest-tag{background:#005400; color:#fff;font-weight: 900; position: absolute; padding:1rem;}

h3.special-title{font-weight: 900; text-align: left; padding:1rem 1rem 4rem 1rem;}
.special-tagbox{text-align: left; padding:2rem 1rem 1rem 1rem; font-size: 1rem;}
.tag_style{color:#9B880A; border: solid thin; padding:0.5rem; margin-right: 1rem; font-weight: 900;}
.tag-product{color:#7E0021; border: solid thin; padding:0.5rem; margin-right: 1rem; font-weight: 900;}
.special-pic{height: auto; text-align: center;}
.special-pic img { width: 90%; height: auto; margin: 0 auto;}	
.single-sp-title-bk{background:#DFDFDF; padding:1rem 0}
h1.single-sp-title {position: relative;color: #000; text-align: center;ont-family:'メイリオ', 'Meiryo', sans-serif;font-weight: 900;font-style: normal; font-size: 2rem; line-height: 150%; padding:2rem 0 0 0; margin: 0 0 3rem 0;z-index: 100;}
h1.single-sp-title::before { background-color: #000; /* 線の色 */ bottom: -0.5rem; /* 線の位置 */ content: ""; height: 2px; /* 線の高さ */ left: 50%; /* 線の中央寄せ */ position: absolute; transform: translateX(-50%); /* 線の中央寄せ */ width: 50px; /* 線の長さ */}
	

/***************
contact
***************/
.contact-box{position: relative; z-index: 100; background:#fff; border-radius: 0.5rem; border-top: solid 0.5rem #D6C971;  max-width: 1420px; margin: -4rem  auto 0 auto; width: 90%; padding: 2rem 1rem 2rem 1rem;}
table.contact {border-collapse: collapse; margin: 4rem auto 0 auto;max-width: 1000px; width: 100%;}
table.contact th{ text-align: left; padding:2rem 0 1rem 0; display: flex;justify-content: flex-start; align-items: center; width: 100%; font-weight: 900; line-height: 150%;}
table.contact td{text-align: left;padding:0 0 0 0; width:96%; display: block;}
table.contact td.form-submit p{text-align: center!important}
.must{background:#D6C971; padding:0.5rem; border-radius: 0.5rem; color: #fff; font-weight: 900; margin-right: 1rem;}
.txt-input{height: 4rem; width: 100%;}
.txt-box{height: 20rem;  width: 100%; margin-top:0rem;}
.form-btn{background:#304686;border-radius: 0.5rem; padding:2rem 0; width: 300px;margin: 2rem auto 0 auto; color: #fff; border: none; font-size: 2rem; text-align: center; }
.form-last{text-align: center;}


/*フッター*/
footer{background:#000; padding:2rem 0; color: #fff; font-size: 1.4rem; text-align: center;}
.artdink-copy{display: flex; justify-content: center; align-items: center;}
.artdink-copy img{width: 3rem; margin: 0 1rem }
.artdink-copy .c_logo{width: 8rem;}
.artdink-cr{margin-top:1rem;}

}