@charset "utf-8";
/* CSS Document */

@media (min-width: 1200px) {
  .container {
    max-width: 960px;
  }
}

body {
  word-break: break-all; /* 英語文字が突き抜けないように折り返し設定 */
  margin: 0;
  padding: 0;
  text-align: center;
  font-family: "メイリオ", Meiryo, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif !important;
}

body a:hover {
  color: #0070FF;
  text-decoration: none;
}

/* ロゴ部分 */
header {
  z-index: 2000;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100px;
  transition: .3s;
}

#menu_bx_bg { /* 可変時の背景色調整のためのcss */
  background-color: #FFFFFF;
  width: 100%;
}

#menu_bx {
  max-width: 1050px;
  margin-right: auto;
  margin-left: auto;
  overflow: hidden;
  text-align: center;
}

/* メニューバー部分 */
@media(max-width:480px) {
  #menu_bx img {
    height: 50px;
  }
  #menu_bar {
    text-align: center;
    width: 100%;
    background-color: #0070FF;
    color: #FFF;
  }
  #menu_bar p {
    padding-top: 7px;
    padding-bottom: 7px;
    margin: 0px;
    font-size: 12px;
    color: #FFFFFF;
  }
  #menu_bar p a {
    color: #FFFFFF;
    text-decoration: none;
  }
  .is-animation #menu_bar {
    text-align: center;
    width: 100%;
    background-color: #0070FF;
    color: #FFF;
  }
  .is-animation #menu_bar p {
    padding-top: 7px;
    padding-bottom: 7px;
    margin: 0px;
    font-size: 12px;
    color: #FFFFFF;
  }
  .is-animation #menu_bar p a {
    font-size: 12px;
    color: #FFFFFF;
  }
}

@media(min-width:480px) {
  #menu_bar {
    text-align: center;
    width: 100%;
    background-color: #0070FF;
    color: #FFF;
  }
  #menu_bar p {
    padding-top: 7px;
    padding-bottom: 7px;
    margin: 0px;
    font-size: 18px;
    color: #FFFFFF;
  }
  #menu_bar p a {
    color: #FFFFFF;
    text-decoration: none;
  }
  .is-animation #menu_bar {
    text-align: center;
    width: 100%;
    background-color: #0070FF;
    color: #FFF;
  }
  .is-animation #menu_bar p {
    padding-top: 7px;
    padding-bottom: 7px;
    margin: 0px;
    font-size: 14px;
    color: #FFFFFF;
  }
  .is-animation #menu_bar p a {
    font-size: 14px;
    color: #FFFFFF;
  }
}
/* メニューバー部分終わり */


/* ここから変化後 */
.is-animation #menu_bx {
  max-width: 1050px;
  height: 50px;
  margin-right: auto;
  margin-left: auto;
  overflow: hidden;
  text-align: center;
}
.is-animation #menu_bx img {
  height: 50px;
  margin-left: auto;
  margin-right: auto;
}

.is-animation #menu_bar {
  text-align: center;
  width: 100%;
  background-color: #0070FF;
  color: #FFF;
}
.is-animation #menu_bar p {
  padding-top: 7px;
  padding-bottom: 7px;
  margin: 0px;
  font-size: 14px;
  color: #FFFFFF;
}
.is-animation #menu_bar p a {
  color: #FFFFFF;
}


/* ページのトップ画像 */
.top_img_bx {
  position: relative;
  clear: both;
  text-align: center;
}
.top_img_bx h2 {
  width: 100%;
  position: absolute;
  color: #FFF;
  text-align: center;
  font-weight: 600;
  top: 82%;
  left: 0;
  background-color: rgba(0,0,0,0.3);
  text-shadow: 2px 4px 3px rgba(0,0,0,0.3);
  font-size: x-large;
  padding: 2%;
}
.top_img_bx .img_bx {
  width: 100%;
  height: auto;
  position: relative;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-size: cover;
}
.top_img_bx .img_bx::after {
  padding-top: 60%;
  content: "";
  display: block;
}

/* その他 */
.top_img {
  max-width: 600px;
  margin-right: auto;
  margin-left: auto;
  padding-top: 10px;
  padding-bottom: 10px;
  text-align: center;
}
.top_img img {
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
}
.cnt_img {
  width: 600px;
  margin-right: auto;
  margin-left: auto;
  padding-top: 10px;
  padding-bottom: 10px;
  text-align: center;
}
.cnt_img img {
  max-width: 600px;
}

/* h1タイトル */
.h1_title {
  clear: both;
}
 @media (max-width: 480px) {
	.h1_title h1 {	
		position: relative;
		padding-bottom: 6px;
		font-size: x-large;
		text-align: center;
		font-weight: normal;
		border-left: none;
	}
}
@media (min-width: 480px) {
	.h1_title h1{	
		position: relative;
		padding-bottom: 6px;
		font-size: 30px;
		text-align: center;
		font-weight: normal;
		border-left: none;
	}
}
.h1_title h1:after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 5px;
  background: repeating-linear-gradient(-45deg,
            #000 0.5%,
            #0077FF 0.5%,
            #0077FF 1%,
            #000 1%,
            #000 1.5%);
}

/* 見出し */
.midasi_1 {
  font-size: large;
  font-weight: normal;
  text-align: left;
  padding-bottom: 3px;
  clear: both;
  position: relative;
  width: 100%;
}
.midasi_1::before {
  border-bottom: 1px #4285f4 solid;
  width: 40%;
  position: absolute;
  z-index: 1;
  bottom: 0;
  left: 0;
  content: "";
}
.midasi_1::after {
  border-bottom: 1px #CCCCCC solid;
  width: 100%;
  position: absolute;
  bottom: 0;
  left: 0;
  content: "";
}

/* 五十音順ページのリセットdiv */
.clear_space {
  clear: both;
  width: 100%;
  height: 1px;
}

/* 右側 */
.right_ad_bx {
  max-width: 300px;
  height: 300px;
}
.right_cate_bx {
  max-width: 300px;
}

/* サイドの見出し */
.side_midasi h2 {
  font-size: medium;
  font-weight: normal;
  text-align: left;
  padding-bottom: 3px;
  clear: both;
  position: relative;
}
.side_midasi h2::before {
  border-bottom: 1px #4285f4 solid;
  width: 40%;
  position: absolute;
  z-index: 1;
  bottom: 0;
  left: 0;
  content: "";
}
.side_midasi h2::after {
  border-bottom: 1px #CCCCCC solid;
  width: 100%;
  position: absolute;
  bottom: 0;
  left: 0;
  content: "";
}

/* サイドバーカテゴリ一覧部分(共通) */
.category_adjust_bx {
  position: relative;
}
.category_adjust_bx .category_name_bg_bx {
  position: absolute;
  bottom: 0;
  width: 100%;
  margin: 0; /* 余計な隙間を除く */
  color: white; /* 文字を白に */
  line-height: 1; /* 行高は1に */
  padding-top: 2px; /* 文字周りの余白 */
  padding-bottom: 2px;
}
.category_adjust_bx .category_name_bg_bx p {
  font-size: 10px;
  transform: scale(0.8);
  margin: 0;
  padding: 0;
  text-align: center;
}
.category_padding_adjust .col-4 {
  padding-left: 5px;
  padding-right: 5px;
}

/* フッター */
#footer_bg {
  width: 100%;
  overflow: hidden;
  text-align: center;
  background-color: #0070FF;
  margin-top: 100px;
}
#footer {
  max-width: 1050px;
  margin-left: auto;
  margin-right: auto;
  overflow: hidden;
}
#footer p, #footer a {
  padding-top: 10px;
  color: #FFF;
}

/* ページの上に戻るjquery CSS */
div.tothetopfixed {
  position: fixed;
  right: 10px;
  bottom: 80px;
  z-index: 1500;
}
div.tothetopfixed i {
  padding-top: 6px;
}
div.tothetopfixed a {
  display: block;
  z-index: 999;
  padding: 12px 16px 20px 16px;
  border-radius: 30px;
  width: 50px;
  height: 50px;
  background-color: #0070FF;
  color: #fff;
  font-weight: bold;
  text-decoration: none;
  text-align: center;
  opacity: 0.7;
}

div.tothetopfixed a:hover {
  color: #FFFFFF;
  filter: alpha(opacity=100);
  -moz-opacity: 1;
  opacity: 1.0;
  background-color: #0070FF;
}

/* SNSボタンのアイコンカラー */
/* SNSボタン */
@media(max-width:480px) {
  .btn-social {
    width: 75px;
    color: white;
    font-size: 10px;
  }
  a:hover {
    color: #FFFFFF;
  }
}
@media(min-width:480px) {
  .btn-social {
    width: 100px;
    color: white;
  }
  a:hover {
    color: #FFFFFF;
  }
}

/* Facebook */
.btn-fb {
  background-color: #3B5998;
}

/* Twitter */
.btn-tw {
  background-color: #00aced;
}

/* Google */
.btn-gplus {
  background-color: #dd4b39;
}

/* line */
.btn-line {
  background-color: #00b900;
}

.facebook_color {
  color: #3B5998;
}
.twitter_color {
  color: #55acee;
}
.line_color {
  color: #00b900;
}
.google_color {
  color: #dd4b39;
}

/* リンクカラー */
.link_black a {
  color: #000000;
}