@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 10px; }}

#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 1%; }}

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

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

/* ========== adsense：記事トップ ========== */
#ad-top336 { overflow:hidden; width:336px; height:280px; text-align:center; margin:0 auto 30px; }
.sponsor-top { width:336px; height:17px; font-size:11px; text-align:center;
  margin:25px auto 0; border-radius:2px 2px 0 0; }

  @media all and (max-width: 515px) {
    #ad-top336 { width:320px; height:50px; }
    .sponsor-top { width:320px; }}

/* ========== adsense：記事中 ========== */
#ad-mid336 { overflow:hidden; width:336px; height:280px; text-align:center; margin:0 auto 10px; }
.sponsor-mid { width:336px; height:17px; font-size:11px; text-align:center;
  margin:20px auto 0; border-radius:2px 2px 0 0; }

  @media all and (max-width: 515px) {
    #ad-mid336 { width:300px; height:250px; }
    .sponsor-mid { width:300px; }}

/* ========== adsense：記事エンド ========== */
#ad-end336 { overflow:hidden; width:336px; height:280px; text-align:center; margin:0 auto; }
.sponsor-end { width:336px; height:17px; font-size:11px; text-align:center;
  margin:0 auto; border-radius:2px 2px 0 0; }

  @media all and (max-width: 515px) {
    #ad-end336 { width:300px; height:250px; }
    .sponsor-end { width:300px; }}

/* ========== adsense：Ｗレクタングル ========== */
#w-rectangle { overflow:hidden; width:605px; margin:5px auto 35px; }
#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:20px 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; }}

/* ========== Fluct：サイド中 ========== */
#ad-side250 { overflow:hidden; width:250px; height:250px; margin:0 auto 5px; background:#fafafa; text-align:center; }

/* ========== Fluct：Ｗレクタングル ========== */
#fluct-rectangle { overflow:hidden; width:605px; margin:25px auto 20px; }
#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  { width:300px; margin-top:15px; }
    #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; }}

/* ========== サイドバナー広告 ========== */
#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; }}