@charset "utf-8";

/* reset */
html,body,div,h1,h2,h3,h4,h5,h6,a,img,p,span,strong,u,address,small,del,pre,code,dl,dt,dd,ol,ul,li,
blockquote,table,caption,tbody,tfoot,thead,tr,th,td,fieldset,form,label,legend,details,output,
header,footer,nav,article,section,aside
{ border:0; outline:0; margin:0; padding:0; background:transparent;
  vertical-align:baseline; font-style:normal; font-weight:normal; font-size:100%; }

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

html { overflow-y:scroll; }

input,textarea { margin:0; padding:0; }
input,select { vertical-align:middle; }

ol,ul { list-style:none; }
table { border-collapse:collapse; border-spacing:0; }

h1,h2,h3,h4,h5,h6,.headline { font-weight:bold; }

/* default */
body { color:#443e35; background:#e9e7e7; text-align:center;
  font:15px/1.7 'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,Osaka,'ＭＳ Ｐゴシック','MS PGothic',sans-serif; }

img { max-width:100%; height:auto; }
a:link,a:visited,a:active,a:hover { color:#06c; }

p      { padding:10px; text-align:left; }
strong { color:#e92537; }

blockquote { margin:0 10px; padding:10px; background:#f3f2f2; position:relative; z-index:1; }
blockquote:before{ content:"“"; font-size:150px; line-height:1em; color:#fff;
font-family:"ＭＳ Ｐゴシック",sans-serif; position:absolute; left:0; top:0; z-index:-1; }

.blockquote { margin:0 10px; padding:10px; background:#f3f2f2; position:relative; z-index:1; }
.blockquote:before{ content:"“"; font-size:150px; line-height:1em; color:#fff;
font-family:"ＭＳ Ｐゴシック",sans-serif; position:absolute; left:0; top:0; z-index:-1; }

/* useful */
* {
  -webkit-box-sizing:border-box;
  -moz-box-sizing:border-box;
  -o-box-sizing:border-box;
  -ms-box-sizing:border-box;
  box-sizing:border-box; }

/* contents-main ： 記事用SNSボタン */
#topic-end   { overflow:hidden; margin:25px 20px; background:#f0f0f0; clear:both; }
#topic-end p { padding:15px 0; font-size:12px; text-align:center; }
#topic-sns   { margin:0 2% 15px; width:96%; overflow:hidden; }
  @media all and (max-width: 660px) {
    #topic-end { margin:25px 5px; }}

#topic-sns-button { width:100%; margin:5px 0; overflow:hidden; }
#button-fb a,
#button-tw a,
#button-hatena a { display:block; width:100%; height:50px; margin:0 0 15px; padding:5px 0; float:left; }
#button-fb a     { background:#375693 url(../img/footer-img.png?2017-09) no-repeat center -100px; }
#button-tw a     { background:#55c1e1 url(../img/footer-img.png?2017-09) no-repeat center -170px; }
#button-hatena a { background:#008fde url(../img/footer-img.png?2017-09) no-repeat center -240px; }
#button-fb a:hover,
#button-tw a:hover,
#button-hatena a:hover { opacity:0.7; }
@media screen and (min-width:520px) {
  #button-fb a,
  #button-tw a,
  #button-hatena a { width:32.5%; }
  #button-fb a,
  #button-hatena a { margin:0; }
  #button-tw a     { margin:0 0.4%; }}

/* ========== like-box ========== */
#like-box { overflow:hidden; clear:both; margin:0 20px 25px; padding:15px 0 0; background:#eceff8; }
#like-box-mini { overflow:hidden; width:500px; margin:30px auto 0; }
  @media all and (max-width: 630px) {
    #like-box      { margin:0 5px 25px; }
    #like-box-mini { width:100%; margin:20px auto 0; }}

/* ========== bbs ========== */
#bbs   { margin:50px 20px 10px; clear:both; }
#bbs p { padding:25px 15px; font-size:16px; background:#fee5fa; }
#disqus_thread { margin:30px 0 0; }
  @media all and (max-width: 630px) {
    #bbs   { margin:0 5px 10px; clear:both; }
    #disqus_thread { margin:30px 0 0; }}

/* ========== adsense：レクタングル大　記事トップ ========== */
#ad-top336 { overflow:hidden; width:336px; height:282px; text-align:center; margin:0 auto 30px; }
.sponsor-top { width:336px; height:17px; font-size:9px; text-align:center; color:#999999;
  margin:25px auto 0; border-radius:2px 2px 0 0; }

/* ========== adsense：インフィード広告 ========== */
.ad-infeed { margin:10px 20px 15px; background:#fafafa; }
.ad-infeed-in { width:96.6%; margin:25px 1.7% 25px; padding::15px 0 15px; }

/* ========== adsense：ネイティブ広告 ========== */
.ad-native { margin:10px 20px 22px; background:#fafafa; border:1px solid #d4cfd2; border-radius:2px; }
.ad-native-in { width:96.6%; margin:25px 1.7% 25px; padding::15px 0 15px; }

/* ========== adsense：横長レスポンシブ ========== */
.adsense-responsive { margin:35px 20px 45px; }
.adsense-responsive-in { width:100%; overflow:hidden; }

  @media all and (max-width: 450px) {
    .sponsor-responsive { margin:30px auto 5px; }
    .adsense-responsive { width:340px; margin:5px auto 55px; }}

/* ========== adsense：サイド縦長レスポンシブ250px ========== */
#ad-responsive-250 { overflow:hidden; width:250px; height:250px; max-height:601px; margin:0 auto 5px; background:#e9e7e7; text-align:center; }
    @media all and (max-width: 850px) {
    #ad-responsive-250 { width:96%; height:auto; margin:20px 1.9% 40px; }}

/* ========== adsense：Ｗレクタングル ========== */
#w-rectangle { overflow:hidden; width:605px; margin:5px auto 45px; }
#rectangle-left  { width:300px; height:250px; float:left; }
#rectangle-right { width:300px; height:250px; float:right; }
.sponsor-w { width:605px; height:17px; font-size:11px; text-align:center;
  margin:35px auto 5px; background:#efeded url(../img/icon-img.png) repeat-x 0 -115px; }

  @media all and (min-width: 851px) and (max-width: 965px){
    #w-rectangle     { width:505px; }
    #rectangle-left  { width:250px; }
    #rectangle-right { width:250px; }
    .sponsor-w       { width:505px; }}

  @media all and (min-width: 771px) and (max-width: 850px){
    #w-rectangle     { width:677px; }
    #rectangle-left  { width:336px; height:280px; }
    #rectangle-right { width:336px; height:280px; }
    .sponsor-w       { width:677px; }}

  @media all and (min-width: 696px) and (max-width: 770px){
    #w-rectangle     { width:605px; }
    #rectangle-left  { width:300px; }
    #rectangle-right { width:300px; }
    .sponsor-w       { width:605px; }}

  @media all and (min-width: 571px) and (max-width: 695px){
    #w-rectangle     { width:505px; }
    #rectangle-left  { width:250px; }
    #rectangle-right { width:250px; }
    .sponsor-w       { width:505px; }}

    @media all and (max-width: 570px) {
    #w-rectangle     { width:300px; }
    #rectangle-left  { display:none; }
    #rectangle-right { width:300px; height:250px; }
    .sponsor-w       { width:300px; margin:0 auto 0; }}

/* ========== FourM：動画インストリーム広告 ========== */
#fourm-instream { overflow:hidden; width:650px; padding:25px auto 50px; }

  @media all and (min-width: 851px) and (max-width: 965px){
    #fourm-instream     { width:600px; }}

  @media all and (min-width: 696px) and (max-width: 850px){
    #fourm-instream     { width:650px; }}

  @media all and (min-width: 571px) and (max-width: 695px){
    #fourm-instream     { width:310px; }}

    @media all and (max-width: 570px) {
    #fourm-instream     { width:310px; padding:5px auto 35px; }}

/* ========== FourM：Ｗレクタングル ========== */
#fourm-rectangle { width:615px; margin:30px auto 30px; }

  @media all and (min-width: 851px) and (max-width: 965px){
    #fourm-rectangle     { width:615px; }}

  @media all and (min-width: 696px) and (max-width: 850px){
    #fourm-rectangle     { width:615px; }}

  @media all and (min-width: 571px) and (max-width: 695px){
    #fourm-rectangle     { width:300px; }}

    @media all and (max-width: 570px) {
    #fourm-rectangle     { width:300px; }}

/* ========== Fluct：Ｗレクタングル ========== */
#fluct-rectangle { overflow:hidden; width:610px; margin:40px auto 40px; }
#fluct-rectangle-left  { width:300px; height:250px; float:left; }
#fluct-rectangle-right { width:300px; height:250px; float:right; }

  @media all and (min-width: 851px) and (max-width: 965px){
    #fluct-rectangle     { width:300px; }
    #fluct-rectangle-left  { width:300px; margin-top:15px; }
    #fluct-rectangle-right { width:300px; }}

  @media all and (min-width: 696px) and (max-width: 850px){
    #fluct-rectangle     { width:605px; }
    #fluct-rectangle-left  { width:300px; }
    #fluct-rectangle-right { width:300px; }}

  @media all and (min-width: 571px) and (max-width: 695px){
    #fluct-rectangle     { width:300px; }
    #fluct-rectangle-left  { display:none; }
    #fluct-rectangle-right { width:300px; }}

    @media all and (max-width: 570px) {
    #fluct-rectangle     { width:300px; }
    #fluct-rectangle-left  { display:none; }
    #fluct-rectangle-right { width:300px; }}

/* ========== ジーニー：Ｗレクタングル ========== */
#geniee-rectangle { overflow:hidden; width:610px; margin:35px auto 35px; }
#geniee-rectangle-left  { width:300px; height:250px; float:left; }
#geniee-rectangle-right { width:300px; height:250px; float:right; }

  @media all and (min-width: 851px) and (max-width: 965px){
    #geniee-rectangle     { width:300px; }
    #geniee-rectangle-left  { width:300px; margin-top:15px; }
    #geniee-rectangle-right { width:300px; }}

  @media all and (min-width: 696px) and (max-width: 850px){
    #geniee-rectangle     { width:605px; }
    #geniee-rectangle-left  { width:300px; }
    #geniee-rectangle-right { width:300px; }}

  @media all and (min-width: 571px) and (max-width: 695px){
    #geniee-rectangle     { width:300px; }
    #geniee-rectangle-left  { width:300px; margin-top:15px; }
    #geniee-rectangle-right { width:300px; }}

    @media all and (max-width: 570px) {
    #geniee-rectangle       { width:300px; }
    #geniee-rectangle-left  { display:none; }
    #geniee-rectangle-right { width:300px; }}

/* ========== サイドバナー広告 ========== */
#side-ad { margin:0 0 5px; }
#side-ad a:hover { opacity:0.7; }

#banner { margin:6px 0; padding:6px 0 0; background:#fafafa; border-radius:2px;
  overflow:hidden; box-shadow:0 0 3px #cecece; border:solid 1px #dfdfdf\9; } /* IE8以下 */
#banner-sns li a { display:block; width:250px; height:60px; margin:0 5px 7px; }
#banner-sns img  { width:250px; height:60px; }
#banner-gakkou a { background:#a2cf4d url(../img/banner-img2.png) no-repeat center 0px; }
#banner-daz  a   { background:#0cbd91 url(../img/banner-img2.png) no-repeat center -60px; }
#banner-fb a     { background:#3b5998 url(../img/banner-img2.png) no-repeat center -120px; }
#banner-tw a     { background:#32ccfe url(../img/banner-img2.png) no-repeat center -180px; }
#banner-gakuhi a { background:#8c8c8c url(../img/banner-img2.png) no-repeat center -240px; }

  /* ========== アフィリエイト広告 ========== */
  .wrap-250px   { width:250px; margin:0 5px 7px; overflow:hidden; }
  .left-120px   { width:120px; height:120px; margin-left:1px; float:left; }
  .right-120px  { width:120px; height:120px; margin-right:1px; float:right; }
  .left-60px    { width:120px; height:60px; margin-left:1px; float:left; }
  .right-60px   { width:120px; height:60px; margin-right:1px; float:right; }
  /* URL隠しマスク */
  span.mask { width:100%; height:100%; display:block; position:absolute; top:0; left:0; z-index:1000; }
  @media all and (min-width: 621px) and (max-width: 850px){
    #banner          { margin:6px 5px; }
    #banner ul       { width:auto; margin:6px 0 10px; overflow:hidden; }
    #banner-sns li a { width:46%; margin:0 2% 6px; float:left; }
    #banner-sns img  { width:100%; }
    .wrap-250px   { width:250px; margin:0 5px 7px; float:left; }
    .left-120px   { width:120px; height:120px; margin:0 0 5px 5px; float:left; }
    .right-120px  { width:120px; height:120px; margin:0 5px 5px 0; float:right; }}

  @media all and (min-width: 481px) and (max-width: 620px){
    #banner          { margin:6px 5px; }
    #banner ul       { width:auto; margin:6px 10px 7px; }
    #banner-sns li a { width:100%; margin:0 0 6px; float:none; }
    #banner-sns img  { width:100%; }
    .wrap-250px   { width:120px; margin:0 10px 7px; float:left; }
    .left-120px   { width:120px; height:120px; margin:0; }
    .right-120px  { width:120px; height:120px; margin:0; }}

    @media all and (max-width: 480px) {
    #banner ul       { width:auto; margin:6px 10px 7px; }
    #banner-sns li a { width:100%; margin:0 0 6px; float:none; }
    #banner-sns img  { width:100%; }
    .wrap-250px   { width:260px; margin:0 auto 7px; }
    .left-120px   { width:120px; height:120px; margin:0 5px; float:left; }
    .right-120px  { width:120px; height:120px; margin:0 5px; float:left; }}

    @media all and (min-width: 361px) and (max-width: 480px){
      #banner { margin:6px 5px; }}

    @media all and (max-width: 360px) {
      #banner { margin:6px 0; }}

/* ====================================== Javascript CANVAS ゲーム ====================================== */

/* Ｔ－ＲＥＸ恐竜ゲーム */
#game-wrap { width:100%; margin-top:65px; padding:0 0 100px; background:#70b92c; }

#game-label { width:215px; height:130px display:block; float:right; }
#game-label img { margin:0; }
#game-title { width:420px; margin:0 auto; }
#game-title img { margin:0 80px -30px 0; }
    @media (max-width: 650px) {
      #game-label { width:170px; }
      #game-title { width:280px; padding-right:53px; }
      #game-title img { margin:0 53px -20px 0; }}

#tRex-wrap { max-width:600px; margin:0 auto; color:#fff; }
#tRex-play { box-shadow: -2px 2px 10px #004e00; }
#tRex-memo { max-width:370px; margin:0 auto 65px; color:#fcf3e5; }
#bosoboso1 { display:block; text-align:center; padding:3px 2px; font-size:12px; background:#529b0f; border-radius:4px; }
#bosoboso2 { display:block; text-align:right; margin:3px auto; font-size:10px; color:#111; }
    @media (max-width: 650px) {
      #tRex-play { border:solid 1px #333; }
      #bosoboso1 { border-radius:0px; }
      #bosoboso2 { padding-right:7px; }}

#tRex-wrap ul { margin-bottom:32px; }
#tRex-wrap li { padding:3px 0 3px 15px; font-size:16px; }
#tRex-wrap ul li:first-child { font-weight:bold; font-size:22px; padding:10px 0 7px; }
    @media (max-width: 650px) {
      #tRex-wrap ul { margin-left:10px; }
      #tRex-wrap li { padding:2px 13px 2px 3px; font-size:14px; }
      #tRex-wrap ul li:first-child { font-size:19px; padding:8px 0 5px; }}

/* Copyright 2013 The Chromium Authors. 無断複写・転載を禁じます。*/
/* このソースコードはライセンスファイルに記載されている BSD形式ライセンスに従います。*/

#tRex-play { margin:60px auto 30px; max-width:600px; padding-top:18px; width:100%; position:relative; background:#fff; border-radius:5px; }
    @media (max-width: 650px) { 
      #tRex-play { border-radius:0px; }}
    @media (max-width: 240px) { 
      #tRex-play { overflow:inherit; padding:0 8px; }}

#tRex-sozai { display:none;}

.tRex-runner-container { height:150px; max-width:600px; overflow:hidden; position:absolute; top:5px; width:44px; position:relative; position:relative;}
    @media (max-height: 320px) and (orientation: landscape) {
      .tRex-runner-container { top:10px; }}

.tRex-runner-canvas { height:150px; max-width:600px; opacity:1; overflow:hidden; position:absolute; top:0; z-index:2; position:relative; }
.tRex-controller { background:rgba(247,247,247, .1); height:-webkit-calc(100% + 18px); height:-moz-calc(100% + 18px); height:calc(100% + 18px); left:0; position:absolute; top:0; width:100vw; z-index:1;}

    @media (max-width: 420px) {
      .snackbar { left:0; bottom:0; width:100%; border-radius:0; }}