@charset "utf-8";

 @media screen and (max-width: 400px) {
	 
.article_btn {
	/*text-align: left;
	padding-left: 18px;*/
}

}


 @media screen and (max-width: 480px) {

body {
	font-size: 18px;
	line-height: 36px;
}

.bana ul {
	display: block;
	justify-content: space-around;
}

.bana ul li {
	margin-top: 20px;
}

.ad-br {
	display: block;
}

.ad-button-txt {

}


/* 記事内ボタン */


.article_btn {
	width: 100%;
}

.article_btn:hover {

 
}

.article_btn:active {

}

.rank-br {
	display: block;
	margin-left: 30px;
	line-height: 18px;
}

.rank-img {
	display: none;
}

.rank-img-sp {
	visibility: visible;
	height: auto;
}

}


 @media screen and (max-width: 768px) {

body {
	background-image: none;
	font-size: 18px;
}

#content p {
	line-height: 32px;
}

#content-wrap,
.top-img-container {
    width: 100%;
    box-sizing: border-box;
    margin: 0 auto;
}

.breadcrumbs {
    width: 100%;
    box-sizing: border-box;
    margin: 0 auto;
    padding: 20px 20px 0px 20px;
}

/*スマホ*/

.visible-pc {
	display: none;
}

.visible-sp {
	visibility: visible;
	height: auto;
}


/*ヘッダー*/

#head-wrap,
#head-wrap-reform {
	height: auto;

}

#head-container,
#head-container-reform {
	width: 100%;
	height: auto;
	padding-top: 5px;
}

#logo {
	width: 100%;
	height: auto;
	float: none;
	padding-bottom: 10px;
	margin-top: 0px;
}

.top-lead,
#menu,
#head-link,
.ikura,
.top-article-head {
	display: none;
}

#head-kk-number {
	margin-right: 7px;
}

.ikkatu-image img,
#reform-img,
#main-img,
.top-img {
	width: 100%;
	height: auto;
}

.lead-h3 {
	margin-top: 10px;
}

.img-smile img,
.ikkatu-image img,
.satei-img img,
#main-img img,
#reform-img p img,
#main-img-sp p img,
#content p img,
#logo img,
.top-img img,
.top-button img,
.top-lead-sp img {
	height: auto;
	width: 100%;
}


.top-button {
	width: 100%;
	height: auto;
	margin-left: 0px;
	margin-top: 20px;
}

.top-lead-txt {
	width: 100%;
	height: auto;
	margin: 20px 0px 20px 0px;
}

.top-lead-sp,
.top-article-head_sp {
	visibility: visible;
	width: 100%;
	height: auto;
	margin-top: 10px;
	margin-bottom: 6px;
}

.top-wrap,
.top-rank-2 {
	width: 100%;
}

.top-rank-wrap,
.top-rank-wrap-2 {
	margin-top: 30px;
}


.top-rank-1-data-wrap {
	width: 100%;
}

.top-rank-1-cap {
	width: 100%;
}

.top-rank-1-cap img,
.top-rank-ad-img img,
.top-rank-2-cap img,
.top-article-head_sp img,
.top-article-img img
.top-article2-img img {
	height: auto;
	width: 100%;
}


.top-rank-1-data-wrap {
	width: 100%;
}

.top-article-container {
	width: 100%;
}


.top-article2-head {
	font-size: 32px;
	font-weight: bold;
	width: auto;
	line-height: 36px;
}

.topcate-container {
	width: 100%;
	padding: 0px;
}

.top-article2-lead {
	font-size: 18px;
	line-height: 24px;
	margin-top: 15px;
}

.top-ranking {
	font-size: 22px;
	font-weight: bold;
	color: #F00;
	text-align: center;
	margin-top: 20px;
}

.ad-btn img,
.satei-img,
#main-img-wrap {
	width: 100%;
	height: auto;
}
/*
#main-img-sp {
	visibility: visible;
	width: 100%;
	height: auto;
}


#main-img img,
.top-lead {
	display: none;
}
*/

.ad-img {
	height: 1px !important;
	width: 1px !important;
}

.top-f1katu {
	display: block;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 10px;
	margin-left: 0px;
}


/*content*/

#top-container,
#content-container,
.top-wrap {
    width: 100%;

    max-width: 1024px;
    margin: 0 auto;
    padding: 0 1px;
    box-sizing: border-box;
	float: none;
	border: none;
}

#content,
.top-wrap {
	width: 100%;
	max-width: 1024px;
	box-sizing: border-box;
	margin-top: 15;
	margin-right: auto;
	margin-bottom: 0;
	margin-left: auto;
	padding-top: 0;
	padding-right: 15px;
	padding-bottom: 0;
	padding-left: 15px;
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
}


#content h1 {
	padding-top: 10px;
	/*margin-top: 20px;*/
	font-size: 24px;
}

.h1-top {
	background-image: url(http://www.commuture.com/images/common/head-top-img.png);
	background-repeat: no-repeat;

	margin: 30px 0px 0px 0px;
	height: 38px;
}



#content h2 {
	font-size: 24px;
	padding-left: 6px;
	padding-bottom: 12px;
}

#content h3 {
	font-size: 20px;
	padding-left: 10px;
}

#content h4 {
	font-size: 18px;
}



#top-container {
	width: 100%;
	max-width: 1024px;
	box-sizing: border-box;
	margin-top: 15;
	margin-right: auto;
	margin-bottom: 0;
	margin-left: auto;
	padding-top: 0;
	padding-right: 15px;
	padding-bottom: 0;
	padding-left: 15px;
}

.rank-container {
	width: 100%;
	float: none;
	margin-bottom: 60px;
}

.rank-detail {
	width: 100%;
	float: none;
	margin-left: 0px;
}

.rank-name {
	text-align: center;
}


.rank-img {
	float: left;
	width: 100%;
	height: auto;
	margin-bottom: 20px;
}

.rank-img img,
.rank-button img {
	height: auto;
	width: 100%;
}

.rank-button {
	width: 100%;
	height: auto;
}

.top-head {
	width: 100%;
}

.top-t,
.top-txt-l,
.top-txt-r {
	width: 100%;
	margin: 20px 0px 0px 0px;
	float: none;
    padding: 20px 15px 0px 15px;
    box-sizing: border-box;
}


.t20 {
	margin-top: 20px !important;
}

.tbl {

	width: 100%;
}

.img-center {
	width: 100%;
	margin-bottom: 10px;
}

.img-center img {
	width: 100%;
	height: auto;
}

/* ad */

.ad-pc {
	display: none;
}

.ikura-sp {
	visibility: visible;
	height: auto;
}


.ad-sp {
	visibility: visible;
	height: auto;
	text-align: center;
	margin-top: 30px;
	margin-bottom: 30px;
}


/* 記事下広告 */



.ad-cap {
	width: 290px;
	margin-bottom: 10px;
}
.ad-cap img {

}


.up-icon {
	padding-top: 0px !important;
}



.ad-table {
	width: 100%;
	margin-left: 0px;

}

.ad-data {

}

.ad-data td,
.ad-data th {

}


.ad-data th {

}


.toc-ad {
	width: 100%;
}

.toc-ad img {
	width: 100%;
}

.ad-souba {
	height: auto;
	width: 100%;
}

.ad-souba-sp img {
	height: auto;
	width: 100%;
	text-align: center;
}

.ad-souba img {
	height: auto;
	width: 100%;
}



/* ランキング */

.rank-screen {
	float: none;
}

.rank-data {
	float: none;
	width: 100%;
	margin-top: 20px;
	margin-left: 0px;
}

.rank-heading {
	padding-top: 30px;
	padding-bottom: 20px;
}

.rank-link {
	padding-top: 30px;
	padding-bottom: 20px;
}


.rank-button {
	width: 100%;
	height: auto;
}

.rank-screen,
.rank-data,
.rank-heading,
.rank-score,
.rank-link,
.rank-txt {
	width: 100%;
	height: auto;
	margin: 0;

}

.rank-screen img,
.rank-score img {
	width: 100%;
	height: auto;
}

.rank_hr {
	margin-top: 20px;
	margin-bottom: 2px;
}

.rank_hr_sp {
	border-width: 1px 0px 0px 0px; /* 太さ */
	border-style: dashed; /* 線種 */
	border-color: gray; /* 線色 */
	height: 1px; /* 高さ */
	margin-bottom: 40px;
	clear: left;
	overflow: hidden;
	visibility: visible;
	margin-right: 10px;
	margin-left: 10px;
	margin-top: 30px;
}

.rank-wrap {
	margin-top: 40px;
	margin-bottom: 40px;
}

.br {
	display: block;
}

/* カテゴリトップ */

.category-container {
  display: flex;
}

.category-thumbnail {
	margin-right: 20px;
}

.category-thumbnail img {

}

.category-text {

}

.category-link a {
	margin-top: 30px;
}

/* リンクカード */

iframe.wp-embedded-content {width:100%;}

.link-card-wrap {
	width: 100%;
	padding: 0px
}

.link-card-container {
	margin: 30px;
}

.link-card-txt {
	width: auto;
}


.link-card-bloginfo-container {
	width: auto;
}

.link-card-foot {

	-webkit-justify-content: flex-start;
	justify-content: flex-start;

}

/*--------------------------------
関連記事
---------------------------------*/

.kanren {
	width: 100%;
	display: flex;
	flex-wrap: wrap;

	margin-top: 20px;
}


.kanren li {
	width: 49%;

}

.kanren-container {
	display: block;
}

.kanren-title {
	font-size: 15px;
	line-height: 22px;
	font-weight: bold;
	padding-right: 0px;
	padding-left: 0px;
	width: auto;
	margin-top: 10px;
}

/*
.kanren li {
	width: 100%;
	border: 1px solid #CCC;
	border-top-style: none !important;
}

.kanren li:nth-child(even) {
	border-left-style: solid !important;
	border-left-width: 1px;
	border-left-color: #CCC;
}

.kanren li:nth-child(1) {
	border-top-style: solid !important;
	border-top-width: 1px;
	border-top-color: #CCC;
}


.kanren li:nth-child(2) {
	border-top-style: none !important;
}
.kanren li:nth-child(3) {
	border-top-style: none !important;
}

.kanren li:nth-child(4) {
	border-top-style: none !important;
}

.kanren li:nth-child(7) {
	border-top-style: none !important;
}

.kanren li:nth-child(8) {
	border-top-style: none !important;
}

*/






.sidebar-head {
	width: 100%;
	margin: 20px 0px 0px 0px;
}








#sidebar {
	width: 100%;
	margin: 0px;
	padding: 0px 20px;
	box-sizing: border-box;
	float: none;
	height: auto;
	background-color: #FFF;
}


.new-container,
.top-cate-container {
	width: 100%;
	max-width: 1024px;
	margin: 0px;
	padding: 0px;
	box-sizing: border-box;
	float: none;
	height: auto;
	background-color: #FFF;
}


.top-link-head,
.top-cate-head,
.new {
	width: 100%;
	height: auto;
	margin: 0;

}


.sidebar-container {
	font-size: 16px;
	line-height: 26px;
	width: 100%;
	max-width: 1024px;
	margin: 0 auto;
	padding: 0px;
	box-sizing: border-box;
	float: none;
}

ul.wpp-list li,
ul.side-articles li {
	background-color: #FFF;	/*background-color: #F9FCF3;*/
}


}