@charset "utf-8";

/* ======================================================
    reset
========================================================*/
* { box-sizing:border-box; padding:0; margin:0; }
*::before,
*::after { box-sizing:border-box; }

h1,h2,h3,h4,h5,h6 { font-weight:normal; line-height:1; }

ul{ list-style:none; }
img{ vertical-align:bottom; }


/* ======================================================
    common
========================================================*/
body {
  position: relative;
  font-family:
      "ヒラギノ角ゴ ProN W3",
      Hiragino Kaku Gothic ProN, 
      Arial, 
      "メイリオ", 
      Meiryo, 
    sans-serif;
    font-size:.9em;
    font-weight:500;
    line-height:1.8em;
    background-color: #ccc;
    background-image: linear-gradient(45deg, #eee 25%, transparent 25%, transparent 74%, #eee 75%),
                      linear-gradient(45deg, #eee 25%, transparent 25%, transparent 74%, #eee 75%);
    background-size: 82px 82px;
    background-position: 0 0, 41px 41px;
    z-index: 1;
}

body::after {
    display: block;
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: linear-gradient(-35deg, rgba(153, 229, 255, 0.8), rgba(255, 199, 139, 0.8) 50%, rgba(0, 174, 231, 0.8));
    z-index: 2;
}

#container { position: relative; background-color:#FFF; box-shadow:2px 5px 3px 3px rgba(87, 87, 87, 0.6); z-index:3; }
#container #contents { padding:0; }

a { color:#dd6323; text-decoration:none; transition:.2s; }
a:hover { text-decoration:underline; }


/* ======================================================
    module
========================================================*/
.inrWidth { width:680px; margin:0 auto; }

/* column */
.wrapCol.col2 { overflow:hidden; }
.wrapCol.col2 > .colL { float:left; }
.wrapCol.col2 > .colR { float:right; }

/* section title */
.secTitle { margin-bottom:40px; font-size:180%; font-weight:bold; }
.secTitle::after { display:block; content:""; width:1em; height:1px; font-size:55%; margin:25px auto 0; background-color:#555; }
.secTitle.white::after {  background-color:#ccc; }


.caution { font-size:115%; font-weight:bold; color:#dd3535; }

.txtBold { font-weight:bold; }

.d-block { display:block; }
.d-inline-block { display:inline-block; }

.align-left { text-align:left !important; }
.align-center { text-align:center; }

/* ======================================================
    header
========================================================*/
#header > .inner { padding:10px 20px; }
#header a:hover { opacity: 1; }

#logo { width:130px; }
#logo img { width:100%; }

#nav { margin-top:30px; }
#nav ul { overflow:hidden; }
#nav ul li { float:left; margin-right:20px; font-size:115%; font-weight:bold; }

/* ======================================================
    mainvisual
========================================================*/
#mainvisual { width:680px; margin:0 auto; }
#mainvisual img { width:100%; }


/* ======================================================
    sale
========================================================*/
#sale { text-align:center; }
#sale > .inner { padding:60px 20px; }

#sale .saleBtn { display:inline-block; font-size:115%; }
#sale .saleBtn a { padding:15px 60px; border:solid 3px #cc4974; border-radius:5px; background-color:#cc4974; color:#FFF; }
#sale .saleBtn a:hover { text-decoration:none; font-weight:bold; background-color:transparent; color:#cc4974; }

#sale .saleBtn .cap { display:block; margin-top:20px; font-size:85%; }

#sale .comingsoon { display: inline-block; padding:10px 20px; border:solid 2px #dd6323; border-radius: 5px; font-size:165%; font-weight:bold; color:#dd6323; }
#sale .saleBnrWrap { width:500px; padding:40px; border:solid 5px #dd6323; border-radius:10px; margin:0 auto; }
#sale .saleBnrWrap .read { margin-bottom:20px; font-size:135%; font-weight:bold; }

/* ======================================================
    story
========================================================*/
#story { position:relative; padding:100px 20px; text-align:center; background:url(../img/bg-story.png) no-repeat left center; color:#FFF; }
#story::after { content:""; position:absolute; top:0; right:0; bottom:0; left:0; background-color:rgba(13, 24, 23, 0.8); }
#story .read { position:relative; line-height:2.4em; z-index:3000; }
#story p + p { margin-top:30px; }

/* ======================================================
    character
========================================================*/
#character { text-align:center;}
#character > .inner { padding:60px 40px; }

#character .charaSelectWrap ul { display: flex; flex-wrap: wrap; }
#character .charaSelectWrap ul li { width:50%; border: solid 1px #FFF; text-shadow: 1px 1px 3px rgba(13, 24, 23, 0.8); }
#character .charaSelectWrap ul li img { width:100%; }
#character .charaSelectWrap ul li dl { position:relative; }
#character .charaSelectWrap ul li dd { position:absolute; top:50%; left:20px; font-size:125%; font-weight:bold; color:#FFF; transform:translateY(-50%); }
#character .charaSelectWrap ul li dd.right { right:20px; left:auto; }

#character .charaWrap { margin-top:60px; }
#character .charaWrap img { width:100%; }
#character .charaWrap ul li + li { margin-top:60px; }
#character .charaWrap ul li dl { overflow:hidden; }
#character .charaWrap ul li dl .right { float:right; }
#character .charaWrap ul li dl .left { float:left; }
#character .charaWrap ul li dl dt { width:30%; }
#character .charaWrap ul li dl dd { width:70%; }
#character .charaWrap ul li dl dd .detail { margin-top:60px; }
#character .charaWrap ul li dl dd .detail .name { font-size:165%; font-weight:bold; }
#character .charaWrap ul li dl dd .detail .name .sub { display: block; font-size:55%; font-weight:normal; }
#character .charaWrap ul li dl dd .detail .read { font-size:115%; margin-top:40px; text-align:left; line-height:2em; }
#character .charaWrap .charaImage { width:90%; }
#character .charaWrap .charaImage img { width:100%; }

#character .charaWrap #chara-a dt { width:20%; }
#character .charaWrap #chara-a dd { width:80%; }
#character .charaWrap #chara-player dt { width:40%; }
#character .charaWrap #chara-player dd { width:55%; }

/* ======================================================
    character
========================================================*/
#system { text-align:center; background-color:#f9f9f9; }
#system > .inner { padding:80px 40px 180px; }

#system .listSystem { max-width:420px; margin:0 auto; }
#system .listSystem ul li + li { padding-top: 30px; border-top:solid 1px #ddd; margin-top:30px; }
#system .listSystem dl dt { margin-bottom:5px; font-weight:bold; }
#system .listSystem .note-box { margin-top:10px; }

/* ======================================================
    footer
========================================================*/
#footer { text-align: center; background-color:#dd6323; color:#FFF; }
#footer > .inner { padding:10px 0; }
#footer .txtCopyright { color:#FFF; }
#footer .redirectBtn { display:inline-block; margin:30px auto; }
#footer .redirectBtn a { display:block; padding:10px 30px; border:solid 1px #FFF; border-radius:3px; line-height:1em; }
#footer .redirectBtn a:hover { background-color:#FFF; color:#dd6323; text-decoration:none; opacity:1; }