@charset "UTF-8";

/* ソファイアファクトリー用標準スタイルシート */
/* (C) 2017 Sofaiafactory/HetareRuisu */

/* --------------------------------------------------------------- */
/* ●共通定義 */
/* --------------------------------------------------------------- */

/* body定義 */
body {
  font-size: 18px;
  font-family: "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Meiryo", sans-serif;
  line-height: 1.5em;
  color: #1133aa;
  background-color: #99bbff;
  margin: 0px;
  padding: 0px;
}

/* --------------------------------------------------------------- */
/* link定義 */
a:link {
  color: #6622cc;
  font-weight: bold;
}

a:visited {
  color: #660099;
  font-weight: bold;
}

a:active {
  color: #ff9933;
  font-weight: bold;
}

a:hover {
  color: #ffffff;
  font-weight: bold;
  background-color: #2244ff;
  border-radius: 6px;
}

/* --------------------------------------------------------------- */
/* img定義 */
img {
  border-style: none;
}

a:hover img {
  margin: 0px;
  border: solid 0px 0px 1px 0px #4466ff;
}

/* --------------------------------------------------------------- */
/* メインフレーム定義 */
div.mainframe {
  width: 860px;
  margin: 10px auto;
  padding: 10px 10px 10px 10px;
  border-radius: 8px;
  background-color: #ffffff;
}

/* --------------------------------------------------------------- */
/* タイトルバナー定義 */
div.titleban {
  width: 580px;
}

p.sotitle {
  text-align: left;
  font-weight: bold;
  border-style: solid;
  border-width: 0px 0px 2px 0px;
  border-color: #ff99ff;
}

p.sottlban {
  text-align: left;
  padding: 3px 0px 3px 0px;
  margin: 0px 0px 1px 0px;
  border-width: 0px 0px 0px 0px;
}

/* --------------------------------------------------------------- */
/* カウンター定義 */
div.counter {
  width: 280px;
  text-align: right;
  margin-top: 10px;
}

/* --------------------------------------------------------------- */
/* メニューリスト定義 */
ul.menulist {
  font-size: 24px;
  width: 860px;
  height: 32px;
  text-align: center;
  clear: both;
  margin: 0px 0px 0px 0px;
  padding: 2px 0px 6px 0px;
  border-radius: 6px;
  /* border-top: 3px solid #0000aa; */
  border-bottom: 3px solid #6666ff;
  background-color: #ccddff;
}

.menulist ul,
.menulist li {
  display: inline;
  list-style-type: none;
}

.menulist a {
  font-size: 24px;
  margin: 0px 20px 0px 20px;
  padding: 0px 6px 0px 6px;
}

.menulist a:link,
.menulist a:visited {
  margin: 0px 20px 0px 20px;
  padding: 0px 6px 0px 6px;
  line-height: 1.5em;
  font-weight: bold;
  text-decoration: none;
  color: #443333;
}

.menulist a:hover {
  font-size: 24px;
  margin: 0px 20px 0px 20px;
  padding: 0px 6px 0px 6px;
  line-height: 1.5em;
  font-weight: bold;
  text-decoration: none;
  color: #ffffff;
  background-color: #4466ff;
  border-radius: 6px;
}

li.activemenu {
  font-size: 24px;
  margin: 0px 20px 0px 20px;
  padding: 0px 6px 0px 6px;
  line-height: 1.5em;
  font-weight: bold;
  color: #332222;
  background-color: #99aabb;
  border-radius: 6px;
}

/* --------------------------------------------------------------- */
/* パンくずリスト定義 */
ul.breadcrumbs {
  width: 580px;
  height: 22px;
  clear: both;
  font-weight: bold;
  background-color: #ccddff;
  margin: 2px 0px 20px 260px;
  padding: 2px 10px 6px 10px;
  border-radius: 6px;
}

.breadcrumbs ul,
.breadcrumbs li {
  display: inline;
  list-style-type: none;
}

.breadcrumbs a:link,
.breadcrumbs a:visited {
  padding: 0px 4px 0px 4px;
  line-height: 1.5em;
  font-weight: bold;
  text-decoration: none;
}

.breadcrumbs a:hover {
  padding: 0px 4px 0px 4px;
  line-height: 1.5em;
  font-weight: bold;
  text-decoration: none;
  color: #ffffff;
  background-color: #4466ff;
  border-radius: 6px;
}

li.actbreadcrumbs {
  padding: 0px 4px 0px 4px;
  line-height: 1.5em;
  font-weight: bold;
  color: #332222;
  background-color: #99aabb;
  border-radius: 6px;
}

.breadcrumbs li::after {
  content: '>';
  display: inline-block;
  padding: 0px 4px 0px 4px;
}

.breadcrumbs li:last-child::after {
  display: none;
}

/* --------------------------------------------------------------- */
/* ヘッダーエリア定義 */
header.header-area {
  width: 860px;
  margin: 0px;
  padding: 0px;
}

/* --------------------------------------------------------------- */
/* メインエリア定義 */
main.main-area {
  width: 860px;
  margin: 0px;
  padding: 0px;
}

/* --------------------------------------------------------------- */
/* フッターエリア定義 */
footer.footer-area {
  width: 840px;
  margin: 0px;
  padding: 5px 10px 5px 10px;
  text-align: left;
  clear: both;
  color: #ffffff;
  font-weight: bold;
  border-radius: 6px;
  background-color: #5577ff;
}

/* フッター用link定義 */
footer.footer-area a:link,
footer.footer-area a:visited,
footer.footer-area a:hover {
  color: #ffffff;
}

/* --------------------------------------------------------------- */
/* flexbox定義 */
.flexbox {
  display: flex;
}

/* --------------------------------------------------------------- */
/* clearfix定義 */
.clearfix:after {
  content: "";
  display: block;
  clear: both;
}
 
.clearfix:before {
  content: "";
  display: block;
  clear: both;
}
 
.clearfix {
  display: block;
}


/* --------------------------------------------------------------- */
/* ●トップページ定義 */
/* --------------------------------------------------------------- */

/* Webサイト概要解説エリア定義 */
div.description {
  width: 700px;
  height: 24px;
  text-align: center;
  border-bottom: 2px solid #6666ff;
  margin: 30px 70px 30px 70px;
  padding: 6px 10px 0px 10px;
}

/* --------------------------------------------------------------- */
/* 告知エリア定義 */
div.notice {
  font-size: 20px;
  width: 760px;
  height: 26px;
  font-weight: bold;
  text-align: center;
  color: #aa1111;
  background-color: #ffdddd;
  border-style: solid;
  border-width: 0px 6px 0px 6px;
  border-color: #aa1111;
  margin: 0px 34px 30px 34px;
  padding: 6px 10px 6px 10px;
}

/* --------------------------------------------------------------- */
/* TOPページ左側定義 */
div.topleft {
  width: 220px;
  margin: 10px 0px 40px 0px;
}

/* TOPページ右側定義 */
div.topright {
  width: 640px;
  margin: 10px 0px 40px 0px;
  text-align: left;
}

/* --------------------------------------------------------------- */
/* トップ用タイトル定義 */
.toptitlebar {
  text-align: left;
  font-weight: bold;
  line-height: 1.5em;
  border-style: solid;
  border-width: 0px 0px 2px 0px;
  border-color: #ff99ff;
  padding: 0px 0px 0px 0px;
}

/* --------------------------------------------------------------- */
/* バナー掲載領域定義 */
p.left200cm {
  text-align: left;
  padding: 0px 0px 5px 0px;
  border-width: 0px 0px 0px 0px;
}

p.right468cm {
  border-width: 0px 0px 0px 0px;
  margin: 0px 0px 20px 0px;
  padding: 0px 0px 0px 40px;
}

/* --------------------------------------------------------------- */
/* トップページフッターフリーゲーム作品一覧領域定義 */
div.topfootergame {
  font-size: 16px;
  width: 700px;
  margin: 6px 0px 10px 6px;
  padding: 0px 0px 0px 0px;
}

h1.topfootergame {
  text-align: left;
  font-weight: bold;
  line-height: 1.5em;
  border-style: solid;
  border-width: 0px 0px 2px 0px;
  border-color: #ff99ff;
  margin: 0px 0px 2px 0px;
  padding: 0px 0px 0px 0px;
}

p.topfootergame {
  text-align: left;
  display:inline-block;
  border-width: 0px 0px 0px 0px;
  margin: 0px 0px 0px 20px;
  padding: 0px 0px 0px 0px;
}


/* --------------------------------------------------------------- */
/* ●トップページ以外の共通定義 */
/* --------------------------------------------------------------- */

/* ページ左側定義 */
div.leftpage {
  width: 140px;
  margin: 10px 0px 20px 0px;
}

/* ページ右側定義 */
div.rightpage {
  width: 720px;
  text-align: left;
  margin: 10px 0px 20px 0px;
}

/* --------------------------------------------------------------- */
/* 大タイトル定義 */
.titlebar {
  font-size: 28px;
  font-weight: bold;
  text-align: left;
  margin: 0px 0px 5px 0px;
  padding: 8px 0px 0px 10px;
  border-style: solid;
  border-width: 0px 0px 6px 0px;
  border-color: #ff99ff;
  /* background: linear-gradient(transparent 70%, #ffaaee 70%); */
}

/* --------------------------------------------------------------- */
/* サブタイトル定義 */
.subtitlebar {
  text-align: left;
  font-weight: bold;
  line-height: 1.5em;
  margin: 0px 0px 0px 20px;
  border-style: solid;
  border-width: 0px 0px 2px 0px;
  border-color: #ff99ff;
}

.subcontents {
  margin: 0px 0px 20px 40px;
}

/* --------------------------------------------------------------- */
/* ダウンロードボタン定義 */
p.download {
  position: relative;
  text-align: center;
  width: 88%;
  padding: 30px 10px 30px 10px;
  border: solid 4px #6666ff;
  border-radius: 14px;
}

p.download .dl-title {
  position: absolute;
  display: inline-block;
  top: -18px;
  left: 10px;
  padding: 0 10px;
  line-height: 1.5em;
  font-size: 20px;
  font-weight: bold;
  background: #ffffff;
  color: #1133aa;
}

span.dl-textsize {
  font-size: 26px;
}

span.dl-textsize2 {
  font-size: 22px;
}

span.dl-property {
  display: block;
  margin: 4px 0px 0px 20px;
  padding-left: 6px;
  font-size: 14px;
  text-align: left;
  line-height: 1.3em;
  border-style: solid;
  border-width: 0px 0px 0px 4px;
  border-color: #ff99ff;
}

/* --------------------------------------------------------------- */
/* News & Update Topics定義 */
ul.newsupt {
  width: 100%;
  margin: 0px;
  padding: 0px;
  background-color: #ffffff;
}

.newsupt ul,
.newsupt li {
  display: block;
  margin: 0px;
  padding: 2px 0px 0px 0px;
  list-style-type: none;
  border-bottom: 1px dashed #ff00bb;
}

.newsupt a {
  display: block;
  width: 100%;
  font-weight: normal;
}

.newsupt a:link,
.newsupt a:visited {
  display: block;
  width: 100%;
  margin: 0px;
  padding: 2px 0px 0px 0px;
  color: #1133aa;
  font-weight: bold;
  text-decoration: none;
}

.newsupt a:hover {
  color: #ffffff;
  text-decoration: none;
  background-color: #2244ff;
}

/* --------------------------------------------------------------- */
/* News&Updateの日付 */
div.newsup {
  text-align: left;
  font-weight: bold;
  border-style: solid;
  border-width: 0px 0px 0px 0px;
  border-color: #ff99dd;
}

/* --------------------------------------------------------------- */
/* 更新日定義 */
div.pageupdate {
  width: 280px;
  text-align: right;
  margin-top: 30px;
}

/* --------------------------------------------------------------- */
/* 作品タイトル領域 */
div.itemtitle {
  font-weight: bold;
  background-color: #ddeeff;
  margin: 2px 0px 2px 0px;
}

/* ゲーム紹介領域（下部空白挿入） */
.gameblock {
  padding: 0px 0px 0px 60px;
}

/* 文字赤字強調 */
span.redbold {
  font-weight: bold;
  color: red;
}

p.textright {
  text-align: right;
}

p.special {
  font-weight: bold;
  color: red;
  margin: 0px 0px 0px 20px;
}

/* --------------------------------------------------------------- */
/* Linkページ各バナー配置制御 */
p.link {
  margin: 5px 0px 0px 40px;
}