/* **************#topics************* */

#topics {
	padding: 0;
	margin: 0 auto;
}

@media screen and (max-width: 680px) {
  #topics {
	background-position:top;
	/*width: 100vw;*/
 	/*height: auto;*/
  }
}

#topics {
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
}

/* **************#topics_topics************ */

#topics_topics {
	padding: 5% 0 0 0;
	margin: 0 auto;
	width:100%;
	background: rgba(255,255,255,0.9);
}

@media screen and (max-width: 680px) {
#topics_topics {
	padding: 5% 0 0 0;
	margin: 0 auto ;
	width:100%;
}
}

#topics_topics h1 {
	font-family: 'Yantramanav', sans-serif;
	font-weight: 600;
	font-size: 168%;
	background-image:url(image);
	max-height: 100%;
	text-align: center;
	color: #000000;
	line-height: 1.6em;
	letter-spacing: 2px;
	margin-bottom: 5%;
}

#topics_topics h1 span {
	font-size: 90%;
}

@media screen and (max-width: 640px) {
	#topics_topics h1 {
	font-size: 144%;
	}
}

#topics_topics h2 {
	font-family: 'Yantramanav', sans-serif;
	font-weight: 600;
	font-size: 168%;
	background-image:url(image);
	max-height: 100%;
	text-align: center;
	color: #FFFFFF;
	line-height: 1.6em;
	letter-spacing: 2px;
	margin-bottom: 5%;
}

#topics_topics h2 span {
	font-size: 90%;
}

@media screen and (max-width: 640px) {
	#topics_topics h2 {
	font-size: 144%;
	}
}

#topics_topics h5 {
	font-family: 'Yantramanav', sans-serif;
	font-weight: 400;
	font-size: 114%;
	background-image:url(image);
	max-height: 100%;
	text-align: center;
	color: #000000;
	line-height: 1.6em;
	letter-spacing: 2px;
}

#topics_topics h5 span {
	font-size: 90%;
}

#topics_topics .button {
    background: none repeat scroll 0 0 #fff;
    /*border-radius: 10px;*/
    cursor: pointer;
    display: inline-block;
    line-height: normal;
    padding: 5px 3%;
    text-decoration: none;
	/*background: #0093DB;*/
	background: #E99F00;
	color: #FFFFFF;
	min-width: 20%;
}

@media screen and (max-width: 680px) {
#topics_topics .button {
	padding: 2% 5%;
	}
}

@media screen and (max-width: 640px) {
	#topics_topics h5 {
	font-size: 100%;
	}
}

#topics_topics p {
	font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	font-size: 100%;
	font-weight: normal;
	line-height:1.6em;
	text-align: left;
	background-image:url(image);
	max-height: 100%;
	word-break: break-all;
}

@media screen and (max-width: 680px) {
	#topics_topics p {
	font-size: 85%;
	}
}

#topics_topics .dits {
	-js-display: flex;
	display: flex;
	 flex: 1;
	margin:0 auto;
	align-items: stretch;
	justify-content: stretch;
}

@media screen and (max-width: 680px) {
#topics_topics .dits  {
 -webkit-flex-direction: column; /* Safari */
  flex-direction:         column;
	margin-bottom: 0;
}
}

#topics_topics .dits section {
	width:100%;
	margin: 0;
	padding: 5% 0 5% 0;
	background-position: center center;
}

@media screen and (max-width: 680px) {
	#topics_topics .dits section {
		width:100%;
		margin:0;
		box-sizing: border-box;
	}
	#topics_topics .dits section.sum {
		padding: 60px 0;
	}
}

#topics_topics .tlist {
	text-align:center;
	max-width: 1140px;
	margin: 0 auto;
	padding: 5%;
	box-sizing: border-box;
	background: rgba(0,0,0,0.7);
}

@media screen and (max-width: 680px) {
#topics_topics .tlist {
	width: 90%;
	margin: 0 auto 5% auto;
	padding: 5%;
}
}

#topics_topics .tltbl {
	width: 100%;
	margin: 0 auto ;
	padding: 0;
	border-collapse: collapse;
}

#topics_topics .tltbl th {
	margin:0;
	padding: 0;
	font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	font-size:100%;
	line-height:1.6em;
	vertical-align: middle;
	text-align: left;
	font-weight: normal;
	background-image:url(image);
	max-height: 100%;
	word-break: keep-all;
	border-bottom:1px solid #EFEFEF;
	color: #FFFFFF;
}

#topics_topics .tltbl td {
	margin:0;
	padding: 10px 0 15px 0;
	font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	font-size:100%;
	line-height:1.6em;
	text-align:left;
	vertical-align: middle;
	background-image:url(image);
	max-height: 100%;
	color: #FFFFFF;
}

#topics_topics .tltbl td a:link{
	text-decoration:none;
	color: #FFFFFF;
}

#topics_topics .tltbl td a:visited {
	text-decoration:none;
	color: #FFFFFF;
}

#topics_topics .tltbl td a:hover{
	text-decoration: underline;
	color: #FF6E00;
}

#topics_topics .tltbl td a:active {
	text-decoration:none;
	color: #FFFFFF;
}

#topics_topics .tltbl td span {
	margin-left: 15px;
	padding: 1px 5px;
	color: #000000;
	background-color: #FFFFFF;
	font-size: 70%;
}
@media screen and (max-width: 680px) {
#topics_topics .tltbl td span {
	margin-left: 0;
}
}

#topics_topics .bg_shop {
	background-image: url(img/bg_shop.jpg);
	background-size: cover;
}

#topics_topics .bg_school {
	background-image: url(img/bg_school.jpg);
	background-size: cover;
}

#topics_topics .bg_race {
	background-image: url(img/bg_race.jpg);
	background-size: cover;
}

#topics_topics .bg_event {
	background-image: url(img/bg_event.jpg);
	background-size: cover;
}

/* **************#topics_entry************ */

#topics_entry {
	padding: 5% 0;
	margin: 0 auto;
	width:100%;
	background: rgba(255,255,255,0.9);
}

@media screen and (max-width: 680px) {
#topics_entry {
	padding: 5% 0 0 0;
	margin: 0 auto ;
	width:100%;
}
}

#topics_entry h1 {
	font-family: 'Noto Sans Japanese', serif;
	font-weight: 600;
	font-size: 168%;
	background-image:url(image);
	max-height: 100%;
	text-align: left;
	line-height: 1.6em;
	letter-spacing: 2px;
	margin-bottom: 3%;
	color: #000000;
	border-bottom: 1px solid #000000;
}

#topics_entry h1 span {
	font-size: 95%;
}

@media screen and (max-width: 640px) {
	#topics_entry h1 {
	font-size: 114%;
		text-align: left;
	}
}

#topics_entry h2 {
	font-family: 'Yantramanav', sans-serif;
	font-weight: 600;
	font-size: 168%;
	background-image:url(image);
	max-height: 100%;
	text-align: center;
	color: #000000;
	line-height: 1.6em;
	letter-spacing: 2px;
	margin-bottom: 3%;
}

#topics_entry h2 span {
	font-size: 90%;
}

@media screen and (max-width: 640px) {
	#topics_entry h2 {
	font-size: 144%;
	}
}

#topics_entry h5 {
	font-family: 'Yantramanav', sans-serif;
	font-weight: 400;
	font-size: 114%;
	background-image:url(image);
	max-height: 100%;
	text-align: center;
	color: #000000;
	line-height: 1.6em;
	letter-spacing: 2px;
}

#topics_entry h5 span {
	font-size: 90%;
}

#topics_entry .button {
    background: none repeat scroll 0 0 #fff;
    /*border-radius: 10px;*/
    cursor: pointer;
    display: inline-block;
    line-height: normal;
    padding: 5px 3%;
    text-decoration: none;
	/*background: #0093DB;*/
	background: #E99F00;
	color: #FFFFFF;
	min-width: 20%;
	margin-top: 5%;
}

@media screen and (max-width: 680px) {
#topics_entry .button {
	padding: 2% 5%;
	}
}

@media screen and (max-width: 640px) {
	#topics_entry h5 {
	font-size: 100%;
	}
}

#topics_entry h3 {
	font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	font-size: 128%;
	line-height:1.6em;
	text-align: left;
	background-image:url(image);
	max-height: 100%;
	word-break: break-all;
	margin-bottom: 2%;
}

@media screen and (max-width: 680px) {
	#topics_entry h3 {
	font-size: 100%;
	}
}

#topics_entry h4 {
	font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	font-size: 114%;
	line-height:1.6em;
	text-align: left;
	background-image:url(image);
	max-height: 100%;
	word-break: break-all;
}

@media screen and (max-width: 680px) {
	#topics_entry h4 {
	font-size: 100%;
	}
}

#topics_entry p {
	font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	font-size: 100%;
	font-weight: normal;
	line-height:1.6em;
	text-align: left;
	background-image:url(image);
	max-height: 100%;
	word-break: break-all;
}

@media screen and (max-width: 680px) {
	#topics_entry p {
	font-size: 85%;
	}
}

#topics_entry .ttlt {
	font-family: 'Yantramanav', sans-serif;
	font-weight: 600;
	font-size: 168%;
	background-image:url(image);
	max-height: 100%;
	text-align: center;
	color: #000000;
	line-height: 1.6em;
	letter-spacing: 2px;
	margin-bottom: 3%;
	border-bottom: none;
}

@media screen and (max-width: 640px) {
	#topics_entry .ttlt {
	font-size: 144%;
	margin-bottom: 0;
	}
}

#topics_entry .tico {
	font-size:70%;
	line-height: 1.6em;
	background-color: #333333;
	color: #FFFFFF;
	padding: 0 5px;
	margin-left: 10px;
}

#topics_entry .tico a:link{
	text-decoration:none;
	color: #FFFFFF;
}

#topics_entry .tico a:visited {
	text-decoration:none;
	color: #FFFFFF;
}

#topics_entry .tico a:hover{
	text-decoration:none;
	color: #FFFFFF;
}

#topics_entry .tico a:active {
	text-decoration:none;
	color: #FFFFFF;
}

#topics_entry .dits {
	-js-display: flex;
	display: flex;
	margin:0 auto;
	align-items: stretch;
	justify-content: stretch;
}

@media screen and (max-width: 680px) {
#topics_entry .dits  {
 -webkit-flex-direction: column; /* Safari */
  flex-direction:         column;
	margin-bottom: 0;
}
}

#topics_entry .dits section {
	width:100%;
	margin: 0;
}

@media screen and (max-width: 680px) {
#topics_entry .dits section {
	width:100%;
	margin:0;
}
}

#topics_entry .add {
	text-align:center;
	width: 90%;
	margin: 0 auto;
	padding: 0 5%;
}

@media screen and (max-width: 680px) {
#topics_entry .add {
	width: 90%;
	margin: 0 auto;
	padding: 5% ;
}
}

#topics_entry .entarea {
	flex: 2;
}

#topics_entry .listarea {
	flex: 1;
	background-color: #EFEFEF;
}

@media screen and (max-width: 680px) {
#topics_entry .listarea {
	background-color: #FFFFFF;
}
}

#topics_entry .ttlist {
	text-align:center;
	width: 90%;
	margin: 0 auto;
	padding: 0 5%;
}

@media screen and (max-width: 680px) {
#topics_entry .ttlist {
	width: 90%;
	margin: 0 auto;
	padding: 0 5% 5% 5%;
}
}

#topics_entry .tlist {
	text-align:center;
	width: 90%;
	margin: 0 auto;
	padding: 5%;
}

@media screen and (max-width: 680px) {
#topics_entry .tlist {
	width: 90%;
	margin: 0 auto;
	padding: 5%;
}
}

#topics_entry .tlists {
	text-align:center;
	width: 60%;
	margin: 0 auto;
	padding: 0 5%;
}

@media screen and (max-width: 680px) {
#topics_entry .tlists {
	width: 90%;
	margin: 0 auto;
	padding: 0 5% 5% 5%;
}
}

#topics_entry .tltbl {
	width: 100%;
	margin: 0 auto ;
	padding: 0;
	border-collapse: collapse;
}

#topics_entry .tltbl th {
	margin:0;
	padding: 10px 0;
	font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	font-size:100%;
	line-height:1.6em;
	vertical-align: middle;
	text-align: left;
	font-weight: normal;
	background-image:url(image);
	max-height: 100%;
	word-break: keep-all;
}

#topics_entry .tltbl td {
	margin:0;
	padding: 0 0 10px 0;
	font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	font-size:100%;
	line-height:1.6em;
	text-align:left;
	vertical-align: middle;
	background-image:url(image);
	max-height: 100%;
	border-bottom:1px solid #CCCCCC;
	color: #000000;
}

#topics_entry .tltbl td span {
	font-size:70%;
	line-height: 1.6em;
	background-color: #333333;
	color: #FFFFFF;
	padding: 0 5px;
}

@media screen and (max-width: 640px) {
#topics_entry .tltbl tr{
        display: block;
        /*margin-bottom: 1.2em;*/
		padding:0;
    }
#topics_entry .tltbl th,
#topics_entry .tltbl td{
        display: list-item;
		list-style:none;
        border: none;

    }
#topics_entry .tltbl th{
	padding:3% 0 0 0;
	/*background5: rgba(34,176,199,0.7);*/
	width:100%;
		word-break:keep-all;
}
	
#topics_entry .tltbl td{
	padding:0 0 3% 0;
	font-size: 88%;
	border-bottom:1px solid #CCCCCC;
	}
}

#topics_entry .data {
	text-align:center;
	width: 90%;
	margin: 0 auto;
	padding: 0 5%;
}

@media screen and (max-width: 680px) {
#topics_entry .data {
	width: 90%;
	margin: 0 auto;
	padding: 5% ;
}
}

#topics_entry .entrysns {
	width:100%;
	margin:0 auto 3% auto;
	text-align:center;
	padding:0;
	clear:both;
}

#topics_entry .entrysns ul {
	height:auto;
}
#topics_entry .entrysns ul li {
	font-size:168%;
	display:inline-block;
	text-align:center;
	margin-right:1%;
	border-radius:3px;
	list-style:none;
}

@media screen and (max-width: 680px) {
#topics_entry .entrysns ul li {
	font-size:100%;	
}
}

#topics_entry .fa-twitter-square {
	color: #2795e9;
}

#topics_entry .fa:hover{
	text-decoration: none;
	color: #FF6E00;
}

#topics_entry .fa-facebook-square {
	color: #2d4373;
}

#topics_entry .fa-google-plus-official {
	color: #c23321;
}

#topics_entry .txt {
	width: 100%;
	margin: 0 auto;
	padding: 0 0 5% 0;
	text-align: right;
}

@media screen and (max-width: 680px) {
#topics_entry .txt {
	width: 100%;
	margin: 0 auto;
	padding: 0 0 5% 0;
}
}

#topics_entry .txt a:link{
	text-decoration:none;
	color: #FF6E00;
}

#topics_entry .txt a:visited {
	text-decoration:none;
	color:#000000;
}

#topics_entry .txt a:hover{
	text-decoration: underline;
	color: #FF6E00;
}

#topics_entry .txt a:active {
	text-decoration:none;
	color:#000000;
}

#topics_entry .listpage {
	margin: 0;
	padding: 0 5%;
	font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	font-size:82%;
	line-height:1.6em;
	clear: both;
}

#topics_entry .listpage a:link{
	text-decoration:none;
	color:#000000;
}

#topics_entry .listpage a:visited {
	text-decoration:none;
	color:#000000;
}

#topics_entry .listpage a:hover {
	text-decoration:none;
	color:#FFFFFF;
	opacity: 0.9;
	background-color: #000000;
}

#topics_entry .listpage a:active {
	text-decoration:none;
	color:#000000;
}

#topics_entry .listprev {
	float: left;
	display: inline;
	text-align: left;
	width: 25%;
	padding-top: 5%;
}

@media screen and (max-width: 640px) {
#topics_entry .listprev {
	padding: 5% 0;
}
}

#topics_entry .listpos {
	float: left;
	display: inline;
	text-align: center;	
	width: 50%;
	padding-top: 5%;
}

@media screen and (max-width: 640px) {
#topics_entry .listpos {
	padding: 5% 0;
}
}

#topics_entry .listnext {
	float: left;
	display: inline;
	text-align: right;
	width: 25%;
	padding-top: 5%;
}

@media screen and (max-width: 640px) {
#topics_entry .listnext {
	padding: 5% 0;
}
}