@charset "utf-8";

/* ---------------------------------------------------------
  ArticleHeader
----------------------------------------------------------*/
#articleHeader {
  padding: 0 0 0.25rem;
  background: url(../img/bg_sabaku.png) repeat left top;
  border-bottom: solid 1px #fff;
  overflow: hidden;
}
h1 {
  margin: 0.5em;
  line-height: 1.2;
  font-weight: bold;
  font-size: 2.4rem;
  text-align: center;
  color: #496e29;
  text-shadow: 1px 1px 0 #fff;
}
p.desc {
  margin: 0 0.5em 0.5em;
  line-height: 1.4;
  font-weight: bold;
  font-size: 1.6rem;
  text-align: center;
}
div.post {
  clear: both;
  padding: 0 0.5rem 0.5rem;
  font-size: 1.0rem;
  overflow: hidden;
}
div.post div.contributor {
  float: left;
  height: 20px;
  line-height: 20px;
}
  div.post div.contributor a {
    font-weight: bold;
    font-size: 1.2rem;
    text-decoration: underline;
  }
  div.post div.contributor div {
    display: inline;
    padding-right: 0.5rem;
  }
  div.post div.contributor span::after {
    content: ": ";
  }
div.post div.date {
  float: right;
  height: 20px;
  line-height: 20px;
}
  div.post div.date span {
    font-size: 1rem;
  }
  div.post div.date span::before {
    content: ": ";
  }



/* ---------------------------------------------------------
  画像カルーセル(※2021.05.18廃止)
----------------------------------------------------------*/
/* ----------- スライダー */
ul.thumb-item {
  margin: 0;
  width: 100%;
  background-color: #000;
  border-top: solid 1px #f5f6f7;
  border-bottom: solid 1px #f5f6f7;
}
  ul.thumb-item img {
    max-width: 100%;
    height: auto;
    margin: 0 auto;
  }

/* ----------- サムネイル  */
ul.thumb-item-nav {
  margin: 0 0 1.5rem;
  width: 100%;
}
/* スライド画像の横幅可変 */
  ul.thumb-item-nav img {
    max-width: 100%;
    height: auto;
  }

/*左右の矢印の色を変える*/
.slick-prev:before,
.slick-next:before {
    color: #000;
}
/*左右の矢印の位置を変える*/
.slick-next {
    right: 5px !important;
    z-index: 99;
}
.slick-prev {
    left: 5px !important;
    z-index: 100;
}
/*スライド数のドットの色を変える*/
.slick-dots li.slick-active button:before,
.slick-dots li button:before {
    color: #fff;
}


/* ---------------------------------------------------------
  ゲームイメージ表示
----------------------------------------------------------*/
/* ----------- ファーストイメージ */
img.firstImage {
  clear: both;
  margin: 0 0 1.5rem;
  width: 100%;
  height: auto;
  overflow: hidden;
}


/* ----------- イメージリスト */
ul.imageList {
  clear: both;
  margin: 0 0 3.4em;
  width: 100%;
  overflow: hidden;
}
  ul.imageList img {
    display: block;
    width: 100%;
    height: auto;
    margin: 0 auto 1.6em;
    border-top: solid 1px #f5f6f7;
    border-bottom: solid 1px #f5f6f7;
  }
  ul.imageList span {
    display: block;
    width: 100%;
    margin: 0 auto;
    text-align: center;
    padding: 0 0.5em;
    line-height: 1.5;
    font-size: 1.5rem;
    font-weight: bold;
  }



/* ---------------------------------------------------------
  評価得点エリア
----------------------------------------------------------*/
#evaluationBox {
  width: 96%;
  margin: 0 auto;
}

/* レーダーチャート
-------------------------------------------- */
#evaluationBox img.raderChart {
  float: left;
  margin-bottom: 1em;
  max-width: 60%;
  height: auto;
}
#evaluationChart {
  float: left;
  margin-bottom: 1em;
  max-width: 60%;
  height: auto;
}


/* コメント数・投票結果・PageView情報
-------------------------------------------- */
#evaluation {
  float: right;
  margin-bottom: 1em;
  width: 40%;
  text-align: center;
}
/* --- コメント数 */
#evaluation div.comment {
  margin-bottom: 1rem;
}
  #evaluation div.comment span {
    display: block;
    font-size: 2.4rem;
  }
    #evaluation div.comment span.ratingAvg {
      font-size: 1.1rem;
    }
    #evaluation div.comment span.rating {
      display: inline;
      padding: 0 0.2rem;
      font-size: 1.3rem;
    }
    #evaluation div.comment a span.count {
      margin-bottom: 0.25em;
      font-size: 2.6rem;
      text-decoration: underline;
    }

/* --- 総合得点 */
#evaluation div.totalPoint {
  margin-bottom: 1rem;
}
  #evaluation div.totalPoint span.zero {
    display: block;
    margin-bottom: 1rem;
    line-height: 3.6rem;
    font-size: 1.6rem;
  }
  #evaluation div.totalPoint div.score {
    display: block;
    font-size: 1.2rem;
    color: #d81515;
  }
    #evaluation div.totalPoint div.score span.score1 {
      font-size: 3.2rem;
      padding-right: 0.1rem;
      font-weight: bold;
      color: #d81515;
    }
    #evaluation div.totalPoint div.score span.score2 {
      padding-right: 0.3rem;
      font-size: 1.8rem;
      font-weight: bold;
      color: #d81515;
    }

/* --- 平均評価 */
#evaluation div.vote {
  margin-bottom: 1rem;
}
  #evaluation div.vote span {
    display: block;
    font-size: 1.2rem;
  }
  #evaluation div.vote span.zero {
    line-height: 3rem;
    font-size: 1.6rem;
  }
    #evaluation div.vote span.rating {
      display: inline;
      padding-right: 0.3rem;
      font-size: 2.4rem;
    }

/* --- ページビュー */
#evaluation div.view span {
  display: block;
  font-size: 2.2rem;
  line-height: 3.2rem;
}
div.denialView {
  margin-top: 2.0rem;
  margin-bottom: 2.0rem;
  text-align: center;
}
 div.denialView span {
  display: block;
  font-size: 2.2rem;
  line-height: 3.2rem;
}

/* --- 感想のみ */
#impressions {
  width: 100%;
  margin-bottom: 0.5em;
  border-bottom: dashed 1px #7f7f7f;
  padding-bottom: 0.5em;
  overflow: hidden;
}
  #impressions div.comment {
    float: left;
    width: 50%;
    text-align: center;
  }
    #impressions div.comment span {
      display: block;
      font-size: 2.4rem;
    }
  #impressions div.view {
    float: right;
    width: 50%;
    text-align: center;
  }
    #impressions div.view span {
      display: block;
      font-size: 2.2rem;
      line-height: 3.2rem;
    }

/* --- コメントすべて拒否 */
div.denialView {
  margin-bottom: 1em;
  text-align: center;
}
 div.denialView span {
  display: block;
  font-size: 2.2rem;
  line-height: 3.2rem;
}

/* --- コメント・評価を受け付けない */
p.negative {
  margin-bottom: 1em;
  text-align: center;
}

/* --- お気に入り数 */
div.favorite {
  clear: both;
  margin-bottom: 1em;
  width: 100%;
  height: 2em;
  vertical-align: top;
  text-align: center;
}
  div.favorite span.title {
    font-weight: bold;
    font-size: 1.4rem;
  }
  div.favorite span.title::after {
    content: "：";
  }

/* --- お気に入り機能 */
.icon-score {
    background: url(../img/score-icon.gif) no-repeat 0 50%;
    padding-left: 15px;
}
a.scoring {
    white-space: nowrap;
    padding-bottom: 1em;
    background: url(../img/scoring-stars.gif) no-repeat 0 -120px;
    padding-left: 20px;
    text-decoration: none;
    vertical-align: top;
}
a.scoring:active {
  color: #0066cc !important;
}
a.scoring span.scoring-score {
  font-weight: bold;
  font-size: 1.6rem;
}
a.scoring-scorable {
    background-position: 0 0;
    text-decoration: default;
}
a:active.scoring-scorable {
    background-position: 0 -40px;
    text-decoration: underline;
}
a.scoring-pending,
a:active.scoring-pending {
    background: url(../img/scoring-pending.gif) no-repeat;
}
a.scoring-scored,
a:active.scoring-scored {
    background-position: 0 -80px;
}
.scoring-vote, .scoring-score-label {
    display: none;
}

/* --- コメント投稿誘導バナー */
ul.postButton {
  margin-bottom: 1em;
  width: 100%;
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: center;
  justify-content: center;
}
  ul.postButton li {
    width: 50%;
    text-align: center;
  }
    ul.postButton li img {
      max-width: 90%;
      height: auto;
    }

/* --- 応援ボタン */
div.ouenArea {
  clear: both;
  margin: 0 auto 1.5rem;
  width: 100%;
  text-align: center;
}
a.ouen {
  display: inline-block;
  vertical-align: middle
  text-decoration: none;
  color: #fff;
  overflow: hidden;
}
a.ouen:hover span.ouen_moji {/*ホバーで一回転*/
  -webkit-transform: rotateX(360deg);
  -ms-transform: rotateX(360deg);
  transform: rotateX(360deg);
}
a.ouen:hover {
  color: #f7f7f7;
}
button.ouen {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  appearance: none;
  font-family: inherit;
  font-size: inherit;
  display: inline-block;
  height: 25px;
  vertical-align: middle
  text-decoration: none;
  color: #fff;
  overflow: hidden;
}
button.ouen:hover {
  color: #f7f7f7;
}
button.ouen:focus {
  outline: none;
}
button.ouen span.ouen_moji {
  display: inline-block;
  transition: transform 0.5s;
}
button.ouen:hover span.ouen_moji {
  -webkit-transform: rotateX(360deg);
  -ms-transform: rotateX(360deg);
  transform: rotateX(360deg);
}
  span.ouen_btn {
    border-radius: 7px;
    display: inline-block;
    height: 2.4rem;
    width: 7.5em;
    text-align: center;
    font-size: 1.4rem;
    font-weight: bold;
    line-height: 2.4rem;
    vertical-align: middle;
    background: #e4405f;
    border: solid 1px #cd201f;
    overflow: hidden;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.2);
    text-shadow: 0 1px 0 rgba(0,0,0,0.2);
  }
  span.ouen_btn::before {
    font-family: "Font Awesome 5 Free";
    content: "\f2a7";
    font-weight: 900;
    padding-right: .5em;
    font-size: 1.5rem;
  }
  
  span.ouen_btn:active {/*押したとき*/
    border: solid 1px #e4405f;
    box-shadow: none;
    text-shadow: none;
  }
  span.ouen_btn span.ouen_moji {
    display:inline-block;
    transition: .5s;
  }
  span.ouen_btn span.ouen_moji:before {
    content: '応援する！';
  }
  span.ouen_count {
   	position: relative;
  	display: inline-block;
   	margin: 0 0 0 3px;
  	padding: 0 0.5rem;
  	height: 2.4rem;
  	line-height: 2.4rem;
  	min-width: 2em;
   	max-width: 100%;
   	color: #333;
  	font-size: 1.3rem;
  	font-weight: bold;
  	background: #fff;
   	border: solid 1px #e4405f;
   	box-sizing: border-box;
   	border-radius: 3px;
   	text-align: center;
   	vertical-align: middle;
  }
  span.ouen_count:before {
  	content: "";
  	position: absolute;
  	top: 50%;
  	left: -8px;
   	margin-top: -4px;
  	border: 4px solid transparent;
  	border-right: 4px solid #fff;
   	z-index: 2;
  }
  span.ouen_count:after {
  	content: "";
  	position: absolute;
  	top: 50%;
  	left: -12px;
   	margin-top: -6px;
  	border: 6px solid transparent;
  	border-right: 6px solid #e4405f;
   	z-index: 1;
  }
  
  /* 最高応援 */
  a.change {
    pointer-events: none;
  }
  a.change span.ouen_btn {
    background: #aaa;
    border-color: #999;
  }
  a.change span.ouen_btn::before {
    font-family: "Font Awesome 5 Free";
    content: "\f559";
    font-weight: 900;
  }
  a.change span.ouen_moji:before {
    content: 'ありがとう';
  }
  a.change span.ouen_count {
    background: #fff;
    border-color: #999;
  }
  a.change span.ouen_count:after {
  	border-right: 6px solid #999 !important;
  }


/* ---------------------------------------------------------
  記事紹介文エリア
----------------------------------------------------------*/
div.article {
  clear: both;
  margin: 2em 0 1em;
  padding: 0 0.5em;
  line-height: 1.6;
  font-size: 1.6rem;
  overflow: hidden;
}
  div.article p {
    margin-bottom: 1em;
  }


/* ---------------------------------------------------------
  ゲームポイント
----------------------------------------------------------*/
section.point h2 {
  position: relative;
  border-top: solid 2px #80c8d1;
  border-bottom: solid 2px #80c8d1;
  background: #f4f4f4;
  line-height: 1.4;
  padding: 0.4em 0.5em;
  margin: 2em 0 1em;
}
  section.point h2:after {/*タブ*/
    position: absolute;
    font-family: "Font Awesome 5 Free",'Quicksand','Avenir','Arial',sans-serif;
    content: '\f0a7\ POINT';
    font-weight: 900;
    background: #80c8d1;
    color: #fff;
    left: 0px;
    bottom: 100%;
    border-radius: 5px 5px 0 0;
    padding: 5px 7px 3px;
    font-size: 0.7em;
    line-height: 1;
    letter-spacing: 0.05em;
  }
section.point div {
  margin-bottom: 4em;
  margin-left: 0.5em;
  line-height: 1.8;
  border-left: solid 4px #80c8d1;
  padding: 0 1em 0 1.5em;
  font-weight: bold;
  font-size: 1.4rem;
}



/* ---------------------------------------------------------
  ゲーム紹介動画
----------------------------------------------------------*/
section.movieArea {
  margin-bottom: 3em;
	width: 100%;
	overflow: hidden;
}
section.movieArea h2 {
  margin-bottom: 0;
  padding: 0.25rem 0;
  line-height: 2rem;
  text-align: center;
  background-color: #000;
  color: #fff;
}
/* --- youtube */
section.movieArea div.youtube {
	position: relative;
	padding: 30px 0 56.25%;
	height: 0;
	overflow: hidden;
}
div.youtube iframe, div.youtube object, div.youtube embed {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
/* --- niconico */
section.movieArea div.niconico {
	position: relative;
	padding: 30px 0 56.25%;
	height: 0;
	overflow: hidden;
}
div.niconico div {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}


/* ---------------------------------------------------------
  注目してほしい点
----------------------------------------------------------*/
section.focus {
  margin-bottom: 2.0rem;
  line-height: 1.6;
}
section.focus h2 {
  position: relative;
  color: black;
  background: #d0ecff;
  line-height: 1.4;
  padding: 0.25em 0.5em;
  margin: 2em 0 1em;
}
section.focus h2:after {
  position: absolute;
  font-family: "Font Awesome 5 Free",'Quicksand','Avenir','Arial',sans-serif;
  content: '\f00c Check';
  font-weight: 900;
  background: #2196F3;
  color: #fff;
  left: 0px;
  bottom: 100%;
  border-radius: 5px 5px 0 0;
  padding: 3px 7px 1px;
 	font-size: 0.7em;
 	line-height: 1;
 	letter-spacing: 0.05em
}
section.focus div {
  padding: 0 1em 1em;
  font-size: 1.3rem;
}



/* ---------------------------------------------------------
  制作者メッセージ
----------------------------------------------------------*/
section.ask {
  margin-bottom: 3em;
  line-height: 1.6;
}
section.ask h2 {
  margin-bottom: 1em;
  border-bottom: solid 3px skyblue;
  position: relative;
  text-indent: 0.5em;
}
section.ask h2:after {
  position: absolute;
  content: " ";
  display: block;
  border-bottom: solid 3px #ffc778;
  bottom: -3px;
  width: 30%;
}
section.ask div {
  padding: 0 1rem;
  font-size: 1.3rem;
}



/* ---------------------------------------------------------
  更新履歴
----------------------------------------------------------*/
section.log {
  margin-bottom: 2.0rem;
}
section.log h2 {
  line-height: 1.6;
  text-align: center;
  text-indent: -1.5em;
  color: #7b6459;
}
section.log h2:before{
  font-family: "Font Awesome 5 Free";
  padding-right: 0.5em;
  content: "\f2f1";
  font-weight: 900;
  color: #ff938b;
}
section.log div {
  margin: 0 auto;
  width: 98%;
  max-height: 180px;
  background-color: #f7f7f7;
  padding: 1rem;
  border: solid 1px #e5e5e5;
  border-radius: 0.5rem;
  -webkit-border-radius: 0.5rem;
  overflow-y: auto;
  overflow-x: hidden;
  line-height: 1.4;
  font-size: 1rem;
}



/* ---------------------------------------------------------
  Twitter埋め込み
----------------------------------------------------------*/
div#embedTwitter {
  margin: 0 auto 3em;
  width: 90%;
  height: 40vh;
  text-align: center;
  overflow: hidden;
}
  div#embedTwitter span {
    padding-right: 10px;
    font-size: 18px;
    font-weight: bold;
  }
  div#embedTwitter i {
    font-size: 18px;
    font-weight: bold;
    padding-right: 10px;
    color: #55acee;
  }



/* ---------------------------------------------------------
  ゲーム情報エリア
----------------------------------------------------------*/
#articleInfo {
  margin: 2em auto 0;
  background-color: #f7f7dd;
  border-top: solid 1px #e5e5ce;
  border-bottom: solid 1px #e5e5ce;
  padding: 2rem 1rem 0;
  overflow: hidden;
}
section.gameFileInfo {
  width: 100%;
}
  section.gameFileInfo img.icon {
    float: left;
    margin: 0 10px 10px;
    border: solid 1px #e5e5ce;
    vertical-align: top;
    max-width: 120px;
  }
  section.gameFileInfo h2 {
    clear: none;
    background: none;
    position: static;
    margin: 0 0 10px;
    padding: 0;
    line-height: 1.6;
  	text-align: left;
    font-weight: bold;
    font-size: 2.0rem;
    color: #496e29;
    overflow: hidden;
    text-align: left;
  }
  section.gameFileInfo h2 strong {
    font-weight: bold;
  }
section.gameFileInfo dl {
  clear: left;
  margin: 0 2% 10px 4%;
  width: 100%;
  font-size: 1.4rem;
}
  section.gameFileInfo dt {
    clear: left;
    float: left;
    width: 5.5em;
    padding-bottom: 10px;
    font-weight: bold;
  }
  section.gameFileInfo dt.os {
    float: none;
    width: auto;
    font-weight: bold;
    font-size: 1.5rem;
  }
  section.gameFileInfo dd {
    margin-left: 6em;
    padding-bottom: 10px;
  }
  section.gameFileInfo dd.os {
    margin-left: 0;
  }
  section.gameFileInfo dd::before {
    content: " : ";
    vertical-align: top;
  }
  section.gameFileInfo dd.os::before {
    content: "";
  }
  section.gameFileInfo dd span.free {
    font-weight: bold;
    font-size: 1.5rem;
  }
  section.gameFileInfo dd span.experience {
    font-weight: bold;
    font-size: 1.5rem;
    color: #FF8530;
  }
  section.gameFileInfo dd span.agelimit {
    font-weight: bold;
    color: #ff0000;
    font-size: 1.5rem;
  }
  section.gameFileInfo dl dd span.oswin {
    display: inline-block;
    max-width: 90%;
    padding-right: 5px;
    line-height: 22px;
    font-size: 1.5rem;
    color: #00adef;
  }
  section.gameFileInfo dl dd span.oswin::after {
    content:"\A";
    white-space: pre;
  }
    section.gameFileInfo dl dd span.oswin img {
      padding-right: 2px;
      padding-bottom: 3px;
      vertical-align: bottom;
    }
  section.gameFileInfo dl dd span.osmac {
    display: inline-block;
    padding-right: 5px;
    line-height: 22px;
    font-size: 1.5rem;
    color: #636366;
  }
  section.gameFileInfo dl dd span.osmac::before {
    content:"";
    padding-left: 0.95em;
  }
  section.gameFileInfo dl dd span.osmac::after {
    content:"\A";
    white-space: pre;
  }
    section.gameFileInfo dl dd span.osmac img {
      padding-right: 2px;
      padding-bottom: 3px;
      vertical-align: bottom;
    }
  section.gameFileInfo dl dd span.osbrowser {
    display: inline-block;
    line-height: 22px;
    font-size: 1.5rem;
    color: #dc7c1b;
  }
  section.gameFileInfo dl dd span.osbrowser::before {
    content:"";
    padding-left: 0.95em;
  }
    section.gameFileInfo dl dd span.osbrowser img {
      padding-right: 2px;
      padding-bottom: 3px;
      vertical-align: bottom;
    }
/* 制作サイトリンク */
section.gameFileInfo dd a {
  text-decoration: underline;
}
/* ダウンロード回数 */
section.gameFileInfo dd.dl span#downloadCounter {
  font-weight: bold;
  letter-spacing: 0.1em;
  font-size: 1.5rem;
}
section.gameFileInfo dd.dl:after {
  content:" 回";
}
/* プレイ回数 */
section.gameFileInfo dd.pl span#playCounter {
  font-weight: bold;
  letter-spacing: 0.1em;
  font-size: 1.5rem;
}
section.gameFileInfo dd.pl:after {
  content:" 回";
}

/* ---------- スマホではダウンロードできない注意文 */
div.dlAttention {
  margin-bottom: 1rem;
  padding: 1.5rem 2rem;
  background-color: #e50000;
  border: solid 1px #ffffe5;
  border-radius: 1rem;
  -webkit-border-radius: 1rem;
  text-align: left;
}
  div.dlAttention p {
    margin-bottom: 1em;
    line-height: 1.6;
    font-size: 1.2rem;
    font-weight: bold;
    color: #fff;
  }
  div.dlAttention a {
    text-decoration: underline;
    color: #fff;
  }

/* ---------- 野良apkファイルをダウンロードするときの注意文 */
div.apkAttention {
  margin-bottom: 1rem;
  padding: 1.5rem 2rem;
  border: solid 5px #e50000;
  border-radius: 1rem;
  -webkit-border-radius: 1rem;
  text-align: left;
}
  div.apkAttention p {
    margin-bottom: 1em;
    line-height: 1.6;
    font-size: 1.2rem;
    font-weight: bold;
  }
  div.apkAttention a {
    text-decoration: underline;
  }
  div.apkAttention a#apkDownload {
    display: block;
    width: 100%;
    text-align: center;
  }
  div.apkAttention button {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    width: 100%;
    display: block;
    pointer-events: none;
  }
    div.apkAttention button > img {
      pointer-events: auto;
      cursor: pointer;
    }

/* ---------- ブラウザゲームエリア */
div.browserPlay {
  margin-bottom: 1rem;
  padding: 1.5rem 2rem;
  border: solid 5px #f98e49;
  border-radius: 1rem;
  -webkit-border-radius: 1rem;
  text-align: center;
}
  div.browserPlay button {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    width: 100%;
    display: block;
    pointer-events: none;
  }
    div.browserPlay button > img {
      pointer-events: auto;
      cursor: pointer;
    }
  #browserAttention {
    margin-left: 1em;
    font-size: 1.2rem;
    text-align: left;
  }
  #browserAttention li {
    margin-top: 1em;
    list-style-type: disc;
  }

/* ---------- メールで送るボタン */
div.sendMail a {
	display: block;
	width: 90%;
	margin: 0 auto;
	padding: 2% 0;
	background-color: #f9db75;
	text-align: center;
	color: #333;
	font-size: 1.2rem;
	font-weight: bold;
	text-decoration: none;
	border-radius: 0.5rem;
  -webkit-border-radius: 0.5rem;
  -moz-border-radius: 0.5rem;
  box-shadow: 1px 1px 1px rgba(0,0,0,0.3);
}
div.sendMail a:active {
	opacity: 0.8;
}
div.sendMail i {
  display: block;
  margin-bottom: 0.25rem;
  font-size: 1.6rem;
  height: 1.6rem;
}

/* ---------- ダウンロードボタン */
div.detailsLink {
  clear: left;
  margin-bottom: 1rem;
  text-align: center;
  overflow: hidden;
}
  div.detailsLink a img {
    max-width: 80%;
    height: auto;
  }
  div.detailsLink button img {
    max-width: 80%;
    height: auto;
  }

/* ---------- スマホアプリリンク */
div.detailsLink div.appLink {
  margin-bottom: 1em;
}
  div.detailsLink div.appLink img {
    max-width: 70%;
    height: auto;
  }
div.detailsLink ul.appLink {
  width: 100%;
  margin: 0 auto 2em;
  text-align: center;
}
div.detailsLink ul.appLink li {
  display: inline-block;
  width: 49%;
}
div.detailsLink ul.appLink li img {
  max-width: 100%;
  padding: 5% 5% 10%;
  height: auto;
}

/* ---------- ブラウザーボタン */
a.browserBtn {
  display: block;
  margin: 0 auto 1em;
  width: 100%;
  text-align: center;
}
  a.browserBtn img {
    max-width: 60%;
    height: auto;
  }

/* ---------- アフィリエイトリンクボタン */
#affiliate {
  display: block;
  margin: 0 auto;
  width: 264px;
  height: 59px;
  background: url(../img/button_playgame_over.png) no-repeat left top;
  background-size: contain;
}
#affiliate a {
  display: block;
  margin: 0 auto;
  width: 264px;
  height: 59px;
  background: url(../img/button_playgame_aff.png) no-repeat left top;
  background-size: contain;
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
}
  #affiliate a:active {
    background-image: url(../img/button_playgame_action.png);
    background-size: contain;
  }

/* --- リンクバナー */
#linkBrowser {
  margin-bottom: 1em;
}
#linkPC {
  margin-bottom: 1em;
}

/* --- 公開終了ゲームコメント */
div.detailsLink p.noDownload {
  margin: 0 1em;
  border: solid 1px #ccc;
  background-color: #efefef;
  padding: 0.5em 1em;
  font-weight: bold;
  font-size: 1.4rem;
}

/* --- 投げ銭（寄付）ボタン */
#donationLink {
  margin-bottom: 1rem;
  padding: 1.5rem 2rem;
  border: solid 5px #d76060;
  border-radius: 1rem;
  -webkit-border-radius: 1rem;
  text-align: center;
}
  #donationLink h3 {
    margin-bottom: 1em;
    line-height: 1.2;
    font-weight: bold;
    font-size: 1.4rem;
    color: #ff5a00;
  }
    #donationLink h3::before {
      font-family: "Font Awesome 5 Free";
      content: "\f06b";
      font-weight: 900;
      padding-right: .5em;
      font-size: 1.8rem;
      color: #ca0000;
    }
  #donationLink p {
    margin-bottom: 1em;
    line-height: 1.2;
    font-size: 1.2rem;
  }
  #donationCount {
    margin-top: 10px;
    font-size: 13px;
  }
    #donationCount span {
      padding: 0 0.5em;
      font-weight: bold;
      font-size: 15px;
    }
  #donationLink button {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    width: 100%;
    display: block;
    pointer-events: none;
  }
  #donationLink a > img {
    max-width: 60%;
    height: auto;
  }
  #donationLink button > img {
    max-width: 60%;
    height: auto;
    pointer-events: auto;
    cursor: pointer;
  }


/* ---------------------------------------------------------
  関連エリア
----------------------------------------------------------*/
aside#relation {
  margin-bottom: 3rem;
}

/* ---------------------------------------------------------
  ゲームタグ
----------------------------------------------------------*/
div.gameTag {
  margin: 0 2%;
  width: 96%;
  overflow: hidden;
  padding-top: 3em;
  padding-bottom: 2em;
}
div.gameTag h3 {
  position: relative;
  margin: 0 0.5em 0.5em;
  padding-left: 35px;
  line-height: 25px;
  font-size: 1.5rem;
}
div.gameTag h3:before {
  position: absolute;
  font-family: "Font Awesome 5 Free";
  content: "\f02c";
  font-weight: 900;
  background: #3498db;
  color: white;
  font-size: 15px;
  border-radius: 50%;
  left: 0;
  width: 25px;
  height: 25px;
  line-height: 25px;
  text-align: center;
  top: 50%;
  -moz-transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}
div.gameTag h3:after {
  content: '';
  display: block;
  position: absolute;
  left: 20px;
  height: 0;
  width: 0;
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
  border-left: 12px solid #3498db;
  top: 50%;
  -moz-transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}
div.gameTag ul {
    margin-bottom: 3em;
	padding: 0;
	list-style: none;
}
div.gameTag ul li {
	float: left;
	width: 50%;
	border: solid 5px #fff;
	padding: 0;
}
div.gameTag ul li a {
	position: relative;
	display: inline-block;
	width: 100%;
	height: 36px;
	line-height: 36px;
	padding: 0 3em 0 1em;
	background-color: #fff;
	border: 1px solid #aaa;
	border-radius: 3px;
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
	color: #333;
	font-size: 1.3rem;
	text-decoration: none;
	-webkit-transition: .2s;
	transition: .2s;
}
div.gameTag ul li a span {
	position: absolute;
	top: 5px;
	right: 5px;
	z-index: 2;
	width: 26px;
	height: 26px;
	line-height: 26px;
	background-color: #3498db;
	border-radius: 100%;
	color: #fff;
	font-size: 1.2rem;
	text-align: center;
	-webkit-transition: .2s;
	transition: .2s;
}
div.gameTag ul li a:active {
	background-color: #3498db;
	border: 1px solid #3498db;
	color: #fff;
}
div.gameTag ul li a:active span {
	background-color: #fff;
	color: #3498db;
}

/* ---------------------------------------------------------
  雰囲気の近いゲームリスト
----------------------------------------------------------*/
div.recommandGame {
  clear: both;
  margin: 0 2% 2rem;
  width: 96%;
  overflow: hidden;
  padding-top: 3em;
}
div.recommandGame h3 {
  position: relative;
  margin: 0 0.5em 1em;
  padding-left: 35px;
  line-height: 25px;
  font-size: 1.5rem;
}
div.recommandGame h3:before {
  position: absolute;
  font-family: "Font Awesome 5 Free";
  content: "\f75b";
  font-weight: 900;
  background: #ffca2c;
  color: white;
  font-size: 15px;
  border-radius: 50%;
  left: 0;
  width: 25px;
  height: 25px;
  line-height: 25px;
  text-align: center;
  top: 50%;
  -moz-transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}
div.recommandGame h3:after {
  content: '';
  display: block;
  position: absolute;
  left: 20px;
  height: 0;
  width: 0;
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
  border-left: 12px solid #ffca2c;
  top: 50%;
  -moz-transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

div#similar-entries {
  height: 500px;
}
div.recommandGame ul {
  margin: 0 5px 2rem;
}
  div.recommandGame ul li {
    position: relative;
    margin-bottom: 9px;
    width: 100%;
    height: 90px;
    overflow: hidden;
  }
    div.recommandGame ul li a {
      display: inline-block;
      *display: inline;
      *zoom: 1;
      width: 100%;
      text-decoration: none;
      line-height: 1.1;
      font-size: 13px;
    }
      div.recommandGame ul li a img {
        float: left;
        border-radius: 5px;
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        max-width: 90px;
        max-height: 90px;
      }
      div.recommandGame ul li a span {
        position: absolute;
        top: 50%;
        left: 105px;
        font-weight: bold;
        font-size: 15px;
        margin-top: -1em;
      }



/* ---------------------------------------------------------
  レビュー一覧
----------------------------------------------------------*/
#reviewComment {
  clear: both;
  width: 100%;
  padding: 3em 1em;
  background-color: #f7f7f7;
  overflow: hidden;
}
#reviewComment h2 {
  line-height: 1.4;
  font-size: 1.6rem;
}
#reviewComment h2:before{
  font-family: "Font Awesome 5 Free";
  content: "\f075";
  font-weight: 900;
  padding-right: .5em;
  font-size: 1em;
  color: #5ab9ff;
}
  #reviewComment h2 span {
    display: inline-block;
    font-size: 1.2rem;
  }
  #reviewComment h2#reviewList div.reviewCount {
    display: block;
    text-align: center;
  }
ul.comments-content {
	margin: 0;
	padding: 0;
	list-style: none;
}
  ul.comments-content li {
    margin-bottom: 20px;
    border-top: solid 1px #bbb;
    padding-top: 20px;
  }
  ul.comments-content li:first-child {
    border-top: none;
  }
  ul.comments-content li.reply {
    margin-left: 20px;
    border-top: dashed 1px #ccc;
  }
    ul.comments-content li div.user-pic {
      float: left;
    }
    ul.comments-content li div.user-pic img {
      margin-right: 10px;
      margin-bottom: 0.5em;
    }
    ul.comments-content li div.byline {
      margin-left: 45px;
      margin-bottom: 5px;
      line-height: 1.2;
      font-size: 1.3rem;
    }
      ul.comments-content li div.byline a img {
        padding-right: 3px;
        vertical-align: bottom;
      }
      ul.comments-content li div.byline span.separator {
        padding: 0 5px;
      }
    ul.comments-content li div.comment {
      clear: both;
      padding: 0.5em 0.5em 0;
      line-height: 1.6;
      font-size: 1.3rem;
    }
    ul.comments-content li.reply div.comment {
      margin-bottom: 20px;
    }
      ul.comments-content li div.comment p {
        margin-bottom: 1em;
      }

/* --- レビュー評価 */
ul.comments-content ul {
  margin: 0 0 1em;
  padding: 0;
  text-align: center;
}
ul.comments-content ul li {
  display: inline-block;
  margin-bottom: 0;
  border: none;
  padding-top: 0;
  padding-right: 3px;
  vertical-align: bottom;
  font-size: 1.1rem;
}
ul.comments-content ul li.total {
  display: block;
  margin-bottom: 0.5em;
  margin-left: 46px;
  background: url(../img/review_icon_total.png) no-repeat left top;
  background-size: 85px 18px;
  padding-left: 90px;
  text-align: left;
}
ul.comments-content ul li.story {
  background: url(../img/review_icon_story.png) no-repeat left top;
  background-size: 22px 22px;
  padding-left: 28px;
}
ul.comments-content ul li.grafic {
  background: url(../img/review_icon_grafic.png) no-repeat left top;
  background-size: 22px 22px;
  padding-left: 28px;
}
ul.comments-content ul li.music {
  background: url(../img/review_icon_music.png) no-repeat left top;
  background-size: 22px 22px;
  padding-left: 28px;
}
ul.comments-content ul li.system {
  background: url(../img/review_icon_system.png) no-repeat left top;
  background-size: 22px 22px;
  padding-left: 28px;
}
ul.comments-content ul li.original {
  background: url(../img/review_icon_original.png) no-repeat left top;
  background-size: 22px 22px;
  padding-left: 28px;
}
ul.comments-content ul li span.mtCommentRating {
  width: 80px;
  height: 16px;
  background: url(../img/rating-star.png) no-repeat right top;
}
ul.comments-content ul li span.mtCommentRating.star_5 { background-position: 0 0; }
ul.comments-content ul li span.mtCommentRating.star_4 { background-position: -16px 0; }
ul.comments-content ul li span.mtCommentRating.star_3 { background-position: -32px 0; }
ul.comments-content ul li span.mtCommentRating.star_2 { background-position: -48px 0; }
ul.comments-content ul li span.mtCommentRating.star_1 { background-position: -64px 0; }
ul.comments-content ul li span.mtCommentRating.star_4dot5 { background-position: 0 -16px; }
ul.comments-content ul li span.mtCommentRating.star_3dot5 { background-position: -16px -16px; }
ul.comments-content ul li span.mtCommentRating.star_2dot5 { background-position: -32px -16px; }
ul.comments-content ul li span.mtCommentRating.star_1dot5 { background-position: -48px -16px; }
ul.comments-content ul li span.mtCommentRating.star_0dot5 { background-position: -64px -16px; }

ul.comments-content ul li span.num {
  padding-right: 0.1em;
  line-height: 22px;
  font-weight: bold;
  font-size: 1.6rem;
}


/* --- スイッチボタンデザイン */
ul.switch {
  margin: 0;
  padding: 0;
  width: 100%;
  text-align: center;
}
ul.switch li {
  display: inline-block;
  width: 48%;
  position: relative;
  list-style: none;
  overflow: hidden;
}
ul.switch label {
  min-width: 70%;
  max-width: 90%;
  background-color: #fcfcfc;
  border-width: 2px;
  border-style: solid;
  border-color: #ccc;
  position: relative;
  margin: 1em;
  display: inline-block;
  padding: 0.5em 1em;
  transition: all 0.3s ease-in-out;
  text-align: center;
  font-family: comfortaa;
  font-weight: bold;
  line-height: 1.4;
  font-size: 120%;
  color: #aaa;
}
ul.switch label:before, ul.switch label:after {
  content: '';
  display: block;
  position: absolute;
  border-color: #ccc;
  border-style: solid;
  width: 1em;
  height: 1em;
  transition: all 0.3s ease-in-out
}
ul.switch label:before {
  top: -6px;
  left: -6px;
  border-width: 2px 0 0 2px;
  z-index: 5;
}
ul.switch label:after {
  bottom: -6px;
  right: -6px;
  border-width: 0 2px 2px 0;
}
ul.switch input[type=radio] {
  position: absolute;
  opacity: 0;
  width: 100%;
  height: 100%;
  margin: 0;
}
ul.switch input[type=radio]:checked + label {
  color: #fff;
  background-color: #eb1777;
  border-color: #eb1777;
}
ul.switch input[type=radio]:checked + label:before, ul.switch input[type=radio]:checked + label:after {
  width:calc(100% + 12px);
  height:calc(100% + 12px);
  border-color: #eb1777;
}

/* --- 攻略・質問コメントを隠す（初期値） */
ul.comments-content li.chat {
  display: none;
}

/* --- Read More ボタンデザイン */
#buttonPanel {
  width: 100%;
  text-align: center;
  position: relative;
  margin-bottom: 2em;
  overflow: hidden;
}
button#readMore {
  min-width: 50%;
  max-width: 90%;
  background: transparent;
  border-width: 2px;
  border-style: solid;
  border-color: #eb1777;
  position: relative;
  margin: 1em;
  display: inline-block;
  padding: 0.75em 2em;
  transition: all 0.3s ease-in-out;
  text-align: center;
  font-family: comfortaa;
  font-weight: bold;
  font-size: 140%;
  color: #eb1777;
}
button#readMore:before, button#readMore:after {
  content: '';
  display: block;
  position: absolute;
  border-color: #eb1777;
  border-style: solid;
  width: 1em;
  height: 1em;
  transition: all 0.3s ease-in-out;
}
button#readMore:before {
  top: -6px;
  left: -6px;
  border-width: 2px 0 0 2px;
  z-index: 5;
}
button#readMore:after {
  bottom: -6px;
  right: -6px;
  border-width: 0 2px 2px 0;
}
button#readMore:active:before, button#readMore:active:after {
  width: calc(100% + 12px);
  height: calc(100% + 12px);
  border-color: #eb1777;
}
button#readMore:active {
  color: #fff;
  background-color: #eb1777;
  border-color: #eb1777;
  cursor: pointer;
}

/* --- コメントアーカイブスファイルへのリンクデザイン */
div.archivesCommentLink {
  padding-bottom: 1em;
  text-align: center;
  font-size: 1.4rem;
}


/* ---------------------------------------------------------
  コメント投稿エリア
----------------------------------------------------------*/
/* スマホ用 h2 デザインの上書き（中央寄せ・複数行対応・垂直中央アイコン） */
#commentVote {
  padding: 2em 10px;
}
#commentVote h2#reviewVote {
  position: relative;
  margin: 0 0 25px 0;
  /* 左右に40pxの余白を作り、文字がアイコンに被らず、かつ完璧な中央配置になるようにする */
  padding: 0 40px 12px 40px; 
  background: transparent;
  border: none;
  border-bottom: 5px double #38561e; /* 全体を支える下線 */
  border-radius: 0;
  font-size: 13px; /* 「にコメントを投稿する」は控えめなサイズに */
  color: #666;
  text-align: center; /* 複数行になってもすべて中央寄せ */
  line-height: 1.5;
}

/* ゲームタイトル部分（span）をブロック化して1行目を独占させる */
#commentVote h2#reviewVote span {
  display: block; /* これにより「にコメントを〜」が確実に次の行へ押し出される */
  font-size: 16px; /* タイトルは大きく力強く */
  color: #333;
  font-weight: bold;
  margin-bottom: 4px; /* 2行目との隙間 */
  line-height: 1.4;
}

/* ペンアイコンを全体の垂直中央（ど真ん中）に配置 */
#commentVote h2#reviewVote:before {
  font-family: "Font Awesome 5 Free";
  content: "\f303";
  font-weight: 900;
  position: absolute;
  left: 5px; /* 左端に配置 */
  top: 40%; /* 上から50%の位置に基準を置く */
  transform: translateY(-50%); /* 自身の高さの半分だけ上に戻す＝完璧な垂直中央寄せ */
  background: transparent;
  color: #ffa337;
  border: none;
  width: auto;
  height: auto;
  font-size: 24px; /* 少し大きめのアイコンでタイトルを引き立てる */
  line-height: 1;
}

#commentVote p.attention {
  margin-left: 0.5em;
  font-size: 1.3rem;
  color: #d8381c;
}

/* --- 返信チェックボックス */
#comment-form-reply {
  margin-bottom: 1em;
  margin-left: 10px;
}

/* --- 名前入力欄 */
#comment-form-name {
  margin: 0 auto;
  width: 96%;
}
  #comment-form-name label {
    display: inline-block;
    width: 100%;
    margin-bottom: 0.5em;
    text-align: center;
    font-size: 1.5rem;
    font-weight: bold;
  }
  #comment-form-name label:before {
    content: "【";
  }
  #comment-form-name label:after {
    content: "】";
  }
  #comment-form-name input {
    margin-bottom: 2em;
    padding: 0.5em;
    width: 100%;
    font-size: 1.4rem;
  }

/* --- 5 Star */
#comment5starRating {
  margin: 0 auto 1em;
	width: 94%;
}
  #comment5starRating div.starLabel {
    margin-bottom: 0.5em;
    text-align: center;
  }
    #comment5starRating div.starLabel p {
      clear: left;
      margin-left: 30px;
      margin-bottom: 0.5em;
      text-align: left;
      font-size: 1.3rem;
      line-height: 1.2;
    }
  #comment5starRating label {
  	clear: left;
  	display: block;
  	float: left;
  	line-height: 23px;
  	font-weight: bold;
  	color: #16683f;
  	font-size: 1.4rem;
  	white-space: nowrap;
  	text-align: left;
  }
  #comment5starRating label.total {
    background: url(../img/icon_gamepad.png) no-repeat left top;
    background-size: 22px 22px;
    padding-left: 30px;
  }
  #comment5starRating label.story {
    background: url(../img/review_icon_story.png) no-repeat left top;
    background-size: 22px 22px;
    padding-left: 30px;
  }
  #comment5starRating label.grafic {
    background: url(../img/review_icon_grafic.png) no-repeat left top;
    background-size: 22px 22px;
    padding-left: 30px;
  }
  #comment5starRating label.music {
    background: url(../img/review_icon_music.png) no-repeat left top;
    background-size: 22px 22px;
    padding-left: 30px;
  }
  #comment5starRating label.system {
    background: url(../img/review_icon_system.png) no-repeat left top;
    background-size: 22px 22px;
    padding-left: 30px;
  }
  #comment5starRating label.original {
    background: url(../img/review_icon_original.png) no-repeat left top;
    background-size: 22px 22px;
    padding-left: 30px;
  }
  #comment5starRating p {
    margin-bottom: 0.5em;
  	font-size: 1.2rem;
  }

/* --- ★評価（base.cssのオーバーライド） */
div.starLabel span.star-btn {
  margin-bottom: 1.5em;
}

/* --- コメント入力欄 */
#comments-open-text {
  width: 96%;
  margin: 0 auto;
}
  #comments-open-text label {
    display: inline-block;
    width: 100%;
    margin-bottom: 0.5em;
    font-weight: bold;
    font-size: 1.5rem;
    text-align: center;
  }
  #comments-open-text label:before {
    content: "【";
  }
  #comments-open-text label:after {
    content: "】";
  }
  #comment-text {
    margin-bottom: 2em;
    width: 100%;
    padding: 1em;
    font-family: sans-serif;
    font-size: 1.4rem;
  }

/* --- ネタバレの有無 */
#comment-form-netabare {
  margin-bottom: 1em;
  text-align: center;
}
  #comment-form-netabare label {
    display: block;
    margin-bottom: .5em;
    font-size: 1.4rem;
    font-weight: bold;
  }
  #comment-form-netabare label.netabare {
    font-size: 1.3rem;
  }
    #comment-form-netabare label.netabare::before {
      font-family: "Font Awesome 5 Free";
      content: "\f06a";
      font-weight: 900;
      padding-right: .5rem;
      font-size: 1.6rem;
      color: #e67168;
    }

/* --- コメント返信の可否 */
#comment-form-replaycannot {
  margin-bottom: 2em;
  text-align: center;
}
  #comment-form-replaycannot label {
    display: block;
    margin-bottom: .5em;
    font-size: 1.4rem;
    font-weight: bold;
  }
  #comment-form-replaycannot label.replaycannot {
    font-size: 1.3rem;
  }
    #comment-form-replaycannot label.replaycannot::before {
      font-family: "Font Awesome 5 Free";
      content: "\f3e5";
      font-weight: 900;
      padding-right: .5rem;
      font-size: 1.6rem;
      color: #0066cc;
    }

  ul.custom-field-radio-list li {
    display: inline-block;
  }
  ul.custom-field-radio-list input {
  	display: none;
  }
  ul.custom-field-radio-list li label {
    display: block;
  	float: left;
  	cursor: pointer;
  	width: 6em;
  	margin: 0;
  	padding: 10px;
  	background: #bdc3c7;
  	color: #869198;
  	font-size: 16px;
  	text-align: center;
  	line-height: 1;
  	transition: .2s;
  }
  ul.custom-field-radio-list li:first-of-type label {
  	border-radius: 3px 0 0 3px;
  }
  ul.custom-field-radio-list li:last-of-type label {
  	border-radius: 0 3px 3px 0;
  }
  ul.custom-field-radio-list input[type="radio"]:checked + .switch-on {
  	background-color: #e67168;
  	color: #fff;
  }
  ul.custom-field-radio-list input[type="radio"]:checked + .switch-off {
  	background-color: #a1b91d;
  	color: #fff;
  }

/* --- 投稿ボタン */
#comments-open-footer {
  margin-bottom: 1em;
  text-align: center;
}
  #comments-open-footer input[type="submit"] {
    margin-bottom: 1em;
    height: 2em;
    line-height: 1.8em;
    border: 3px solid #a1b91d;
    background-color: #000;
    border-radius: 2rem;
    -webkit-border-radius: 2rem;
    padding: 0 1em;
    cursor: pointer;
    font-weight: bold;
    font-size: 1.8rem;
    color: #fff;
  }
  #comments-open-footer p {
    font-size: 1.3rem;
  }

/* --- サインインをうながすコメント（JS制御） */
#comment-greeting p.jsText {
  margin: 0 0 1em 1em;
  line-height: 1.6;
}
#comment-greeting p.jsComment {
  margin: 0 0 1em 1em;
  line-height: 1.6;
}
#comment-greeting span.event {
  font-weight: bold;
  color: #285919;
}

/* --- 注意事項 */
#comments-open-footer p.notes {
  line-height: 1.4;
  text-indent: -1em;
  padding: 0 1em 0 2em;
  text-align: left;
  font-size: 1rem;
}
  #comments-open-footer p.notes a {
    text-decoration: underline;
  }




/* ---------------------------------------------------------
  サイドバー
----------------------------------------------------------*/
#sidebar {
  background-color: #ffffe5;
}
#sidebar h2 {
  margin: 0;
  padding-top: 2px;
  line-height: 2;
  text-align: center;
  font-size: 1.6rem;
}

/* --- メニューリスト */
#sidebar ul {
  margin: 0 auto;
  padding: 0;
	list-style: none;
	overflow: hidden;
	width: 100%;
}
#sidebar ul li {
	list-style: none;
	overflow: hidden;
	width: 100%;
	margin: 0;
	padding: 0;
}
  #sidebar ul.category li {
    border-bottom: 1px solid #879c18;
  }
  #sidebar ul.ranking li {
    border-bottom: 1px solid #c3800a;
  }
  #sidebar ul.genre li {
    border-bottom: 1px solid #209bb3;
  }
#sidebar ul li:last-child {
	border-bottom: 0px;
}
#sidebar ul li a {
	display: block;
	position: relative;
	z-index: 10;
	height: 40px;
	margin: 0;
	padding: 0px 10px 0px 45px;
	color: #fff;
	font-size: 1.4rem;
	line-height: 40px;
	font-weight: bold;
	text-decoration: none;
}
  #sidebar ul.category li a {
  	background: #a1b91d;
  }
  #sidebar ul.ranking li a {
  	background: #e3950d;
  }
  #sidebar ul.genre li a {
  	background: #22b4d0;
  }
  #sidebar ul.category li a:active {
  	background: #94aa1b;
  }
  #sidebar ul.ranking li a:active {
  	background: #d3890b;
  }
  #sidebar ul.genre li a:active {
  	background: #21a6c0;
  }
#sidebar ul li a:before {
	display: block;
	content: "";
	position: absolute;
	z-index: -1;
	top: 50%;
	left: -50px;
	width: 80px;
	height: 80px;
	margin-top: -40px;
	border-radius: 50%;
}
  #sidebar ul.category li a:before {
    background: #7b8d16;
  }
  #sidebar ul.ranking li a:before {
    background: #b27308;
  }
  #sidebar ul.genre li a:before {
    background: #2090a4;
  }
#sidebar ul li a:after {
	display: block;
	content: "";
	position: absolute;
	z-index: -2;
	top: 0;
	left: 0;
	width: 25px;
	height: 40px;
}
  #sidebar ul.category li a:after {
    background: #7b8d16;
  }
  #sidebar ul.ranking li a:after {
    background: #b27308;
  }
  #sidebar ul.genre li a:after {
    background: #2090a4;
  }
  #sidebar ul li:nth-child(2n) a:before {
  	left: 19px;
  }
  #sidebar ul.category li:nth-child(2n) a:before {
    background: #a1b91d;
  }
  #sidebar ul.ranking li:nth-child(2n) a:before {
    background: #e3950d;
  }
  #sidebar ul.genre li:nth-child(2n) a:before {
    background: #22b4d0;
  }
  #sidebar ul.category li:nth-child(2n) a:active:before {
  	background: #94aa1b;
  }
  #sidebar ul.ranking li:nth-child(2n) a:active:before {
  	background: #d3890b;
  }
  #sidebar ul.genre li:nth-child(2n) a:active:before {
  	background: #21a6c0;
  }



/* ---------------------------------------------------------
  インライン広告
----------------------------------------------------------*/
.adArticleResponsive {
  margin-bottom: 1em;
  text-align: center;
}
.adArticleFooter {
  margin-bottom: 3rem;
  text-align: center;
}
.adRelatedContent {
  width: 96%;
  max-height: 250px;
  margin-bottom: 3rem;
  text-align: center;
}
.adsInstreamVideoMobile {
  width: 100%;
  margin: 2rem auto 3rem;
  text-align: center;
}
#adArticleResponsive {
  margin-bottom: 1em;
  text-align: center;
}
#adArticleFooter {
  margin-bottom: 3rem;
  text-align: center;
}

/* ---------------------------------------------------------
  Google関連コンテンツ広告（おすすめの無料ゲーム）
----------------------------------------------------------*/
div.relatedContent {
  clear: both;
  margin: 0 2% 3em;
  width: 96%;
  padding-top: 3em;
}
div.relatedContent h3 {
  position: relative;
  margin: 0 0.5em 1em;
  padding-left: 35px;
  line-height: 25px;
  font-size: 1.5rem;
}
div.relatedContent h3:before {
  position: absolute;
  font-family: "Font Awesome 5 Free";
  content: "\f129";
  font-weight: 900;
  background: #d81515;
  color: white;
  font-size: 15px;
  border-radius: 50%;
  left: 0;
  width: 25px;
  height: 25px;
  line-height: 25px;
  text-align: center;
  top: 50%;
  -moz-transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}
div.relatedContent h3:after {
  content: '';
  display: block;
  position: absolute;
  left: 20px;
  height: 0;
  width: 0;
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
  border-left: 12px solid #d81515;
  top: 50%;
  -moz-transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

/* ---------------------------------------------------------
  ステマ規制対応
----------------------------------------------------------*/
p.prtext {
  padding: 0.5em
}
p.prtext::before {
  content: "PR";
  margin-right: 0.5em;
  background-color: #496e4e;
  padding: 0 0.25em;
  color: #fff;
}
span.prLink {
  display: block;
  margin: 0 auto 0.2em;
  text-align: center;
  font-size: 14px;
}

/* ---------------------------------------------------------
  Media Query 縦向き固定
----------------------------------------------------------*/
/* 縦向き 359px未満 (iPhone 3/4/5/SE) */
@media screen and (max-width: 359px) and (orientation: portrait) {

}
/* 縦向き 360px以上413px未満 (Android iPhone 7/6) */
@media screen and (min-width: 360px) and (max-width: 413px) and (orientation: portrait) {
  /* 基本ベースレイアウト */
}
/* 縦向き 414px以上768px未満 (iPhone 7/6 Plus 小型タブレット) */
@media screen and (min-width: 414px) and (max-width: 767px) and (orientation: portrait) {

}
/* 縦向き 768px以上 (タブレット) */
@media screen and (min-width: 768px) and (orientation: portrait) {
  div.detailsLink a img {
    max-width: 50%;
    height: auto;
  }
}



/* ---------------------------------------------------------
  過去ログアーカイブへのテキストリンク
----------------------------------------------------------*/
div.archivesCommentLink {
  margin-bottom: 3em;
  text-align: center;
}
div.archivesCommentLink a {
  display: inline-flex;
  align-items: center;
  padding: 10px 30px;
  font-size: 14px;
  font-weight: bold;
  color: #555; /* 真っ黒ではなく濃いグレーでサブ要素感を出す */
  background-color: #ffffff;
  border: 2px solid #b5b5b5; /* 少し濃い目の枠線 */
  border-radius: 4px; /* ピル型をやめ、少しだけ角を丸くした長方形に */
  text-decoration: none;
  transition: all 0.1s ease;
  box-shadow: 0 4px 0 #b5b5b5; /* 下に厚みを持たせて「立体的なボタン」にする */
}
/* 過去ログリンクのアイコン（絵文字からFont Awesomeに変更） */
div.archivesCommentLink a::before {
  font-family: "Font Awesome 5 Free";
  content: "\f02d"; /* 本（ブック）のアイコン */
  font-weight: 900;
  margin-right: 8px;
  font-size: 15px;
  color: #777; /* アイコンの色をテキストに馴染ませる */
}
/* ホバー時（マウスを乗せた時）とクリック時の動き */
div.archivesCommentLink a:hover {
  background-color: #f8f9fa;
  border-color: #888;
  color: #222;
  box-shadow: 0 2px 0 #888; /* 影を減らして押し込まれた感を出す */
  transform: translateY(2px); /* 実際に下に少し動かす */
}


/* ---------------------------------------------------------
  コメント投稿エリア選択式へ変更
----------------------------------------------------------*/
/* 投稿意図選択メッセージ */
#select-intent-message {
  text-align: center;
  margin: 30px 0 20px;
}
#select-intent-message span {
  display: inline-block;
  color: #38561e; /* サイトのアクセントカラーに合わせる */
  font-size: 16px;
  font-weight: bold;
  background: transparent; /* 背景色なし */
  border: none; /* 枠線なし */
  box-shadow: none; /* 影なし */
}
/* テキストの両脇に装飾をつけて「案内」であることを強調 */
#select-intent-message span::before,
#select-intent-message span::after {
  content: "▼";
  color: #38561e;
  margin: 0 8px;
  font-size: 12px;
  vertical-align: middle;
}

/* 投稿意図選択ボタン（カード型） */
ul.intent-buttons {
  display: flex;
  justify-content: space-between;
  margin: 0 0 30px;
  padding: 0;
  list-style: none;
}
ul.intent-buttons li {
  width: 48%;
  box-sizing: border-box;
}
ul.intent-buttons input[type=radio] {
  display: none; /* ラジオボタン本体は隠す */
}
ul.intent-buttons label {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px 10px;
  background: #ffffff;
  border: 2px solid #ddd;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 4px 6px rgba(0,0,0,0.05);
  height: 100%;
  box-sizing: border-box;
}

/* レビューボタンのホバー・アクティブ */
ul.intent-buttons li:first-child label:hover {
  border-color: #eb1777;
  background: #fffafb;
  transform: translateY(-3px); /* 少し浮き上がる */
  box-shadow: 0 6px 12px rgba(235, 23, 119, 0.15);
}
/* 質問ボタンのホバー・アクティブ */
ul.intent-buttons li:last-child label:hover {
  border-color: #0066cc;
  background: #f5f9ff;
  transform: translateY(-3px); /* 少し浮き上がる */
  box-shadow: 0 6px 12px rgba(0, 102, 204, 0.15);
}

/* 画像アイコンのサイズと配置調整（ひとまわり小さく調整） */
ul.intent-buttons .btn-icon {
  width: 32px;
  height: auto;
  margin-bottom: 10px;
  display: inline-block;
  background: none; 
  filter: none;
  font-size: unset;
}
ul.intent-buttons .btn-main {
  font-size: 16px;
  font-weight: bold;
  color: #333;
  margin-bottom: 5px;
  transition: color 0.2s;
}
ul.intent-buttons .btn-sub {
  font-size: 12px;
  color: #777;
}

/* 選択時の状態（JSでフォームが開いた後にボタンがハイライトされる設定） */
ul.intent-buttons input#commentPost-r:checked + label {
  border-color: #eb1777;
  background: #fffafb;
  box-shadow: none;
}
ul.intent-buttons input#commentPost-r:checked + label .btn-main {
  color: #eb1777;
}

ul.intent-buttons input#commentPost-k:checked + label {
  border-color: #0066cc;
  background: #f5f9ff;
  box-shadow: none;
}
ul.intent-buttons input#commentPost-k:checked + label .btn-main {
  color: #0066cc;
}

/* スマホ用の微調整 */
@media screen and (max-width: 600px) {
  ul.intent-buttons .btn-main {
    font-size: 14px;
  }
  ul.intent-buttons .btn-sub {
    font-size: 10px;
  }
}

/* --- スマホ用のレスポンシブ調整（横幅599px以下） --- */
@media screen and (max-width: 599px) {
  
  /* 1. 案内メッセージ：文字サイズと記号の余白を詰めて1行に収める */
  #select-intent-message span {
    font-size: 13px;
  }
  #select-intent-message span::before,
  #select-intent-message span::after {
    margin: 0 4px;
  }

  /* 2. 選択ボタン：横並びをやめて縦に積む（1カラム） */
  ul.intent-buttons {
    flex-direction: column;
    gap: 12px; /* ボタン同士の縦の隙間 */
    margin: 0 10px 30px; /* 左右に少し余白を持たせる */
  }
  ul.intent-buttons li {
    width: 100%; /* 横幅いっぱいに広げる */
  }
  ul.intent-buttons label {
    padding: 15px 10px;
  }
  ul.intent-buttons .btn-main {
    font-size: 15px; /* スマホでも見やすいサイズ */
  }
  ul.intent-buttons .btn-sub {
    font-size: 11px;
  }

  /* 3. 過去ログリンク：左右の余白を減らし、少しコンパクトに */
  div.archivesCommentLink a {
    padding: 10px 15px;
    font-size: 12px;
    width: 90%; /* 画面幅に対して少し余白を残す */
    box-sizing: border-box;
    justify-content: center; /* アイコンと文字を中央揃え */
  }
}