@charset "UTF-8";
@import url("//netdna.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.css");

/* --------------------
reset
-------------------- */

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, dialog, figure, footer, header,
hgroup, menu, nav, section,
time, mark, audio, video {
  margin:0;
  padding:0;
  border:0;
  outline:0;
  font-size:100%;
  vertical-align:baseline;
  background:transparent;
}
body {
  line-height:1;
}

article, aside, dialog, figure, footer, header,
hgroup, nav, section {
  display:block;
}

nav ul {
  list-style:none;
}

blockquote, q {
  quotes:none;
}

blockquote:before, blockquote:after,
q:before, q:after {
  content:'';
  content:none;
}

a {
  margin:0;
  padding:0;
  border:0;
  font-size:100%;
  vertical-align:baseline;
  background:transparent;
  text-decoration:none;
  color: #0030BF;
}

ins {
  background-color:#ff9;
  color:#000;
  text-decoration:none;
}

mark {
  background-color:#ff9;
  color:#000;
  font-style:italic;
  font-weight:bold;
}

del {
  text-decoration: line-through;
}

abbr[title], dfn[title] {
  border-bottom:1px dotted #000;
  cursor:help;
}

table {
  border-collapse:collapse;
  border-spacing:0;
}

hr {
  display:block;
  height:1px;
  border:0;
  border-top:1px solid #cccccc;
  margin:1em 0;
  padding:0;
}

input, select {
  vertical-align:middle;
}
*,
*::before,
*::after {
  box-sizing: border-box;
}
.clearfix::after {
  content: "";
  display: block;
  clear: both;
}
/* --------------------
common
-------------------- */
body {
  font-family:"Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", "Meiryo", "メイリオ", "Osaka", "MS PGothic", arial, helvetica, sans-serif;
  color:#333;
  letter-spacing:0.05em;
  word-break: break-all;
}
.container {
  width:1100px;
  margin:0 auto;
}
@font-face {
  font-family: 'sns';
  src:  url('/fonts/sns.eot?iosi21');
  src:  url('/fonts/sns.eot?iosi21#iefix') format('embedded-opentype'),
    url('/fonts/sns.ttf?iosi21') format('truetype'),
    url('/fonts/sns.woff?iosi21') format('woff'),
    url('/fonts/sns.svg?iosi21') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: block;
}
.hide {
  display: none !important;
}
.visible {
  display: block;
}
.disabled-link {
  color: #888;
  cursor: initial;
}
/* --------------------
header
-------------------- */

.header {
  width:100%;
  background:#fff;
  display:block;
  box-shadow:rgba(128, 128, 128, 0.5) 0px 0px 3px 3px;
  -webkit-box-shadow:rgba(128, 128, 128, 0.5) 0px 0px 3px 3px;
  -moz-box-shadow:rgba(128, 128, 128, 0.5) 0px 0px 3px 3px;
  overflow:hidden;
  position: relative;
  height:60px;
}
.header .header-logo-area {
  display:block;
  float:left;
  padding:10px;
}
.header .header-logo {
  width: 170px;
}

/* --------------------
footer
-------------------- */

.footer {
  width:100%;
  background:#efefef;
  padding: 70px 0;
  color:#3d3d3d;
}
.footer .footer-main {
  overflow:hidden;
}
.footer .footer-pages-link {
  display:table;
  float:left;
}
.footer .footer-pages-link li {
  display:table-cell;
  padding:2px 10px 0;
  border-left:1px solid #fff;
}
.footer .footer-pages-link li:first-child {
  padding-left:0px;
  border-left:none;
}
.footer .footer-pages-link li a {
  text-decoration:none;
  color:#3d3d3d;
}
.footer .footer-pages-link li a:hover {
  text-decoration:underline;
}
.footer .snsShare {
  float: right;
}
.footer .copyright {
  display:block;
  text-align: right;
  font-size: .8rem;
}

/* --------------------
error
-------------------- */
.errMsg {
  color:#F33;
}
.flashMsg {
  width: 100%;
  margin: auto;
  overflow: hidden;
  text-align: center;
}
.flashMsg .alert {
  padding-top: 20px;    
}
.flashMsg .alert-danger {
  color:#F33;
}

/*********************
* パンくず
*********************/
.breadcrumb-wrap {
  width:1100px;
  margin: 15px auto;
  overflow:hidden;
}
.breadcrumb-wrap .breadcrumb {
  overflow: hidden;
  font-size: 12px;
  line-height: 22px;
  padding: 0;
  list-style: none;
}
.breadcrumb-wrap .breadcrumb li {
  float: left;
  margin-right: 12px;
}
.breadcrumb-wrap .breadcrumb li a {
  text-decoration: none;
  color: #0030BF;
}
.breadcrumb-wrap .fa {
  display: inline-block;
  font: normal normal normal 14px/1 FontAwesome;
  font-size: inherit;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transform: translate(0, 0);
}
.breadcrumb-wrap .fa-home:before {
  content: "\f015";
}
.breadcrumb-wrap .fa-folder:before {
  content: "\f07b";
}
.breadcrumb-wrap .fa-file-text:before {
  content: "\f15c";
}

/* --------------------
pagination
-------------------- */
.pagination {
  list-style: none;
  display:table;
  margin: 30px auto 0;
  border-spacing: 5px;
}
.pagination li {
  display:table-cell;
}
.pagination li a {
  background: #eee;
  padding: 8px 15px;
  text-decoration: none;
  color: #333;
}
.pagination li.active a {
  background: #666;
  color: #fff;
}
.paginationHelpInline {
  text-align: right;
  margin-top: 30px;
  margin-bottom: 12px;
}
/* --------------------
sns
-------------------- */
.snsShare {
  display: block;
  list-style: none;
  -ms-transform:translate(0,0);
  -webkit-transform:translate(0,0);
  transform:translate(0,0);
  text-align: center;
}
.snsShare li {
  display: inline-block;
}
.snsShare a {
  color:#fff;
  background: #DB6E82;
  border-radius:4px;
  text-align:center;
  text-decoration:none;
  font-family:fontawesome;
  position: relative;
  display: inline-block;
  width:88px;
  height:46px;
  padding-top:14px;
  -o-transition:all .5s;
  -webkit-transition: all .5s;
  -moz-transition: all .5s;
  transition: all .5s;
   -webkit-font-smoothing: antialiased;
  margin-bottom: 2px;
  font-size: 1.3rem;
}
.snsShare a:hover {
  background: #ef92a3;
}
.snsShare a span {
  color:#666;
  position:absolute;
  font-family:sans-serif;
  bottom:0;
  left:-25px;
  right:-25px;
  padding:5px 7px;
  z-index:-1;
  font-size:14px;
  border-radius:2px;
  background:#fff;
  visibility:hidden;
  opacity:0;
  -o-transition:all .5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  -webkit-transition: all .5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  -moz-transition: all .5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  transition: all .5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.snsShare a span:before {
  content:'';
  width: 0; 
  height: 0; 
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 5px solid #fff;
  position:absolute;
  bottom:-5px;
  left:40px;
}
@media screen and (min-width: 1024px){
.snsShare a:hover span {
  bottom:50px;
  visibility:visible;
  opacity:1;
}
}

.snsShare a.twitter:before {
  content:'\f099';
}
.snsShare a.facebook:before {
  content:'\f09a';
}
.snsShare a.hatena:before {
  font-family: 'sns' !important;
  content:"\e900";
}
.snsShare a.pocket:before {
  font-family: 'sns' !important;
  content: "\e902";
}
.snsShare a.line:before {
  font-family: 'sns' !important;
  content: "\e901";
}
.snsShare a.link .fa-link {
  font-size: 16px;
  font-style: normal;
}
.snsShare a.twitter {
  background:#55ACEE;
}
.snsShare a.facebook {
  background:#3C5A99;
}
.snsShare a.hatena {
  background:#3C7DD1;
}
.snsShare a.pocket {
  background:#EE4257;
}
.snsShare a.line {
  background:#00C300;
}
.snsShare a.link {
  background:#999999;
}

/* --------------------
section
-------------------- */
section {
  padding-top: 20px;
  padding-bottom: 20px;
}
section h1 {
  line-height: 1.2;
  padding: 15px 0;
  font-size: 1.6rem;
}
section h2 {
  font-size: 1.5rem;
  margin-bottom: 20px;
}
section h3 {
  font-size: 1.3rem;
  margin-bottom: 20px;
}

/* --------------------
category-list-section
-------------------- */
.category-list-section .category-list {
  list-style: none;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  flex-wrap: wrap;
}
.category-list-section .category-list-item {
  width: 47%;
  border-radius: 6px;
  margin-bottom: 27px;
  text-align: center;
  font-weight: 700;
  font-size: 1.3rem;
  letter-spacing: 6px;
}
.category-list-section .category-list-item.category-item-steam {
  background: #ecc402;
}
.category-list-section .category-list-item.category-item-esports {
  background: #7b2dd1;
}
.category-list-section .category-list-item.category-item-programming {
  background: #1676ee;
}
.category-list-section .category-list-item.category-item-english {
  background: #F44336;
}
.category-list-section .category-list-item a {
  display: block;
  padding: 32px;
  color: #fff;
}

/* --------------------
search-by-keyword-section
-------------------- */
.search-by-keyword-section .search-by-keyword-area {
  margin-top: 7px;
}
.search-by-keyword-section .search-by-keyword {
  width: 87%;
  height: 50px;
  border: 1px solid #ddd;
  border-radius: 6px;
  padding: 0 16px;
}
.search-by-keyword-section .search-by-keyword-btn {
  width: 12%;
  height: 50px;
  border: none;
  background: #1f49bf;
  font-size: 16px;
  letter-spacing: 12px;
  padding-left: 15px;
  color: #fff;
  border-radius: 6px;
  box-shadow: 0px 6px 0px 0px rgba(0,0,0,0.06);
  transition: all 150ms cubic-bezier(.4, 0, .2, 1);
  transform: scale(1);
}
.search-by-keyword-section .search-by-keyword-btn:hover {
  box-shadow: 0px 0px 0px 0px rgba(0,0,0,0.06);
  transform: scale(.98);
}

/* --------------------
main-modal-section
-------------------- */
ins.adsbygoogle { 
  background: transparent !important; 
}
.main-advertisement-setting {
  margin-bottom: 45px;
}