@charset "shift_jis";
body {
	font-family: "メイリオ",Meiryo,"MS UI Gothic","ヒラギノ丸ゴ ProN","Hiragino Maru Gothic ProN",sans-serif; 
    color: #333333;
    font-size: 1rem;
    background-color: #ffffff;
	margin: 0; /* 規定値を解除 */
}

p {
	margin: 0; /* 規定値を解除 */
}

/* 全体の領域とボタン領域の広さ */
#header-logo, #header-menu, #ad-header, #header-breadcrumb, #main, #footer, #footer-breadcrumb, #footer-search, #footer-menu {
	width: 1075px; /* article:728px, side-bar:300px, 空間:47px */
	margin-left: auto;
	margin-right: auto;
}

#main {
	display: table; /* Adsenseの固定表示のためfloatが使えないのでtableで2カラム */
}

#article, #sidebar {
	display: table-cell; /* Adsenseの固定表示のためfloatが使えないのでtableで2カラム */
	vertical-align: top; /* 中身をエリア内で上詰めに */
}

#article {
	width: 728px;
	padding-right: 47px; /* 2カラムの間の空間 */
}

#sidebar {
	width: 300px;
}

#header-menu ul, #footer-menu ul, #date, #sns2 ul {
	width: 100%; /* 親要素でそれぞれ必要な幅は確保しているので、100%で大丈夫 */
}

#sns1 ul {
	width: 500px;
}

@media screen and (max-width: 1279px) {
	#header-logo, #header-menu, #ad-header, #header-breadcrumb, #main, #footer, #footer-breadcrumb, #footer-search, #footer-menu {width: 935px;}
	#sidebar {width: 160px;}
} /* メディア指定 1279px 終了 */

@media screen and (max-width: 959px) {
	#header-logo, #header-breadcrumb, #main, #footer-search, #footer-breadcrumb {margin-left: 1rem; margin-right: 1rem; width: calc( 100% - 1rem - 1rem );}
	#ad-header, #header-menu, #footer-menu, #footer {width: 100%;}
	#main {display: block;} /* 2カラムのtableを解除 */
	#article, #sidebar {width: 100%; display: block;} /* 2カラムのtableを解除。widthは親要素のmainで左右のmarginをとっているので、100%で大丈夫 */
	#article {padding-right: 0;} /* 1カラムになった分、空間用のpadding-rightを解除 */
} /* メディア指定 959px 終了 */

@media screen and (max-width: 767px) {
	#sns1 ul {width: 100%;} /* 親要素のmainで左右のmarginをとっているので、100%で大丈夫 */
} /* メディア指定 767px 終了 */



/* クリアフィックス */
#main:after, #mail-magazine:after, #side-column:after {
    content: "";
    display: block;
    clear: both;
}

/* グラデーション */
#header-menu li, .bg-bcu {
	background: #fbc313; /* Old browsers */
	background: -moz-linear-gradient(top,  #fbc313 0%, #fddb69 46%, #ffebb2 100%);
	background: -webkit-linear-gradient(top,  #fbc313 0%,#fddb69 46%,#ffebb2 100%);
	background: linear-gradient(to bottom,  #fbc313 0%,#fddb69 46%,#ffebb2 100%);
}

/* 角丸 */
#branch-list, .sidebar-title {
	border-radius: 0.3125rem;
}

/* 罫線で囲む */
#branch-list {
	border-width: 1px;
	border-style: solid;
	box-sizing: border-box;
}

/* 小さい文字 */
.new, .mini, .ad-text, .ad-txt, .sidebar-title {
    font-size: 0.8125rem;
}

/* リンク */
a:link {
    color: #0076e1;
}

a:visited {
    color: #00a7df;
}

a:hover {
    color: #bc144f;
    background-color: #eeeeee;
}

/* 箇条書きと段落番号の解除 */
#header-menu ul, #header-breadcrumb ol, #footer-menu ul, #footer-breadcrumb ol, #sns1 ul, #sns2 ul, #branch-list ul, #side-menu ul, ul#side-sns  {
	list-style-type: none;
	margin-top: 0; /* ulに付く規定値のmarginとpaddingを解除 */
	margin-bottom: 0;
	padding-left: 0;
}

/* ボタンのtable */
#header-logo, #header-menu ul, #footer-menu ul, #sns-area1, #sns1 ul, #sns2 ul {
	display: table; /* sns-area1とsns ulは二重のtableになっている */
}

#logo, #header-search, #header-menu li, #footer-menu li, #sns1, #date, #sns1 li, #sns2 li  {
	display: table-cell;
}

#header-menu ul, #footer-menu ul, #sns1 ul, #sns2 ul {
	table-layout: fixed;
}

#header-menu a, #footer-menu a, #sns1 a, #sns2 a {
	display: block;
	text-align: center;
}

/* text-decorationの解除 */
#header-menu a, #header-breadcrumb a, #footer-menu a, #footer-breadcrumb a, #sns1 a, #sns2 a, #branch-list a, #side-menu a, #side-sns a, .pagetop a {
	text-decoration: none;
}

/* メニューや目次 */
#side-menu li, #branch-list li {
    border-bottom: 1px dashed #c0c0c0;
}
#branch-list li:first-child {
	border-top: 1px dashed #c0c0c0;
}
#side-menu a, #branch-list a {
    display: block;
	color: #333333;
}

/* 文字の色（白） */
#footer-menu a, .sidebar-title, #side-sns a {
	color: #ffffff;
}

/* リンク色（グレー） */
#header-menu a, #header-breadcrumb a, #footer-breadcrumb a {
	color: #666666;
}

a img {
	border: none; /* リンクの画像に設定されてしまうborderを解除 */
}

/* その他 全ページ共通 */
.ranking2 {
    font-weight: bold;
}

.red, .new {
    color: #ff9900;
    font-weight: bold;
}

.center {
    text-align: center;
}

.right {
	text-align: right;
}

.mb0 {
    margin-bottom: 0 !important;
}

.mb8 {
    margin-bottom: 0.5rem !important;
}

.mb16 {
    margin-bottom: 1rem !important;
}

.mb32 {
    margin-bottom: 2rem !important;
}

.mb56 {
    margin-bottom: 3.5rem !important;
}


.mt0 {
    margin-top: 0 !important;
}

.mt16 {
    margin-top: 1rem !important;
}

.mt32 {
    margin-top: 2rem !important;
}

.mt56 {
    margin-top: 3.5rem !important;
}

.mt64 {
    margin-top: 4rem !important;
}

.mt112 {
    margin-top: 7rem !important;
}


/* ヘッダーとフッター共通 */
#header-menu li, #footer-menu li {
	border-right: 2px solid #ffffff;
}

#header-menu li:last-child, #footer-menu li:last-child {
	border: none;
}

#header-menu a, #footer-menu a {
	padding: 0.5rem 0.2rem;
}

#header-breadcrumb li, #footer-breadcrumb li {
	font-size: 0.75rem;
	display: inline;
}

#header-breadcrumb li:after, #footer-breadcrumb li:after {
    content: "\00bb";
    margin-left: 1rem;
    margin-right: 1rem;
}

#header-breadcrumb li:last-child:after, #footer-breadcrumb li:last-child:after {
    content: "";
}


/* ヘッダー */
#header-logo {
	margin-top: 0.5rem;
}

#logo img {
	width: 288px;
	height: auto;
}

#header-search {
	width: 550px;
	vertical-align: middle;
}

#header-menu {
	margin-top: 1rem;
}

#header-menu a {
	font-size: 1.1rem;
	font-weight: bold;
}

#header-breadcrumb {
	margin-top: 1rem;
}


/* フッター */
#footer {
	margin-top: 1rem;
}

#footer-search {
	margin-top: 1rem;
}

#footer-menu {
	margin-top: 2rem;
}

#footer-menu li {
	background-color: #454648;
}

#footer-menu a {
	font-size: 0.75rem;
}

#footer:after {
	content: "\00a9 2007-2019, チーム Be Cool Users";
	font-size: 0.75rem;
    display: block;
    text-align: right;
    margin-top: 1rem;
	margin-bottom: 1rem;
}



/* メイン */
#main {
	margin-top: 2rem;
}

#article p, .sidebar-title + p {
	line-height: 1.75rem;
}

hr {
	border: none;
    border-top: 1px dashed #a7a7a7;
	margin-top: 3.5rem;
}


/* 記事 */
#sns-area1 {
	margin-top: 1rem;
}

#sns2 {
	margin-top: 3rem;
}

#sns1 a, #sns2 a {
	color: #ffffff;
	font-size: 1.1rem;
	padding: 0.1rem 0.5rem;
}

.facebook {
	background-color: #3B5998;
}

.twitter {
	background-color: #55acee;
}

.line {
	background-color: #00b900;
	font-family: 'Franklin Gothic Medium', "sans-serif";
	letter-spacing: 1px;
}


.hatena {
	background-color: #008fde;
	font-family: 'Franklin Gothic Medium', "sans-serif";
}

.pocket {
	background-color: #ee4056;
}

.youtube {
	background-color: #ff0000;
}

#date {
	font-size: 0.875rem;
	text-align: right;
}

#branch-list {
	font-size: 0.9rem;
	padding: 0.5rem 1rem 1rem;
	margin-top: 3rem;
}

#article #branch-list p {
	font-weight: bold;
	margin-top: 0;
	margin-bottom: 0.3rem;
}

#branch-list a {
	padding: 0.3rem 1rem;
}

.pagetop {
	text-align: right;
}

.pagetop a {
	color: #333333;
	font-size: 0.875rem;
	margin-left: 3rem; /* 「ページ上部へ」の左側に空間 */
}

.pagetop a:first-child {
	margin-left: 0; /* 「目次へ」の左側の空間を削除 */
}

.pagetop i {
	margin-right: 0.3rem;
}


/* サイドバー */
.sidebar-title {
	font-weight: bold;
	padding: 0.3rem 0.5rem;
	margin-bottom: 1rem;
}

#mail-magazine, #side-menu {
	margin-top: 3rem;
}

#mail-magazine img {
	float: right;
}

#side-menu i {
    margin-right: 1rem;
    color: #c0c0c0;
}

#side-menu a {
    padding: 0.5rem;
}

ul#side-sns {
	margin-top: 2rem;
}

#side-sns a {
	display: block;
	padding: 0.5rem;
	text-align: center;
}


/* リンク追記 */
#header-menu a:hover, #header-breadcrumb a:hover, #footer-breadcrumb a:hover, #footer-menu a:hover, #side-menu a:hover, #side-sns a:hover, .pagetop a:hover {
    color: #bc144f;
    text-decoration: underline;
}


@media screen and (max-width: 1279px) {
	.sidebar-title + p { font-size: 0.8125rem; line-height: 1.3125rem;}
} /* メディア指定 1279px 終了 */

@media screen and (max-width: 959px) {
	#header-search {width: 400px;}
	#side-menu {float: left; width: 60%;}
	#mail-magazine {float: right; width: 35%;}
	#side-menu ul {display: table; width: 100%; table-layout: fixed;}
	.side-menu-row {display: table-row;}
	#side-menu li { display: table-cell;}
} /* メディア指定 959px 終了 */

@media screen and (max-width: 767px) {
	#header-logo, #logo, #header-search, #sns1, #date { display: block;} /* displayのtableとtable-cellの解除 */
	#logo {text-align: center;}
	#header-search {width: 100%; margin-top: 1rem;}
	#header-menu a, #footer-menu a {font-size: 0.625rem; word-wrap: break-word;}
	#date {margin-top: 1rem;}
	#mail-magazine, #side-menu {float: none; width: 100%;}
} /* メディア指定 767px 終了 */



/* Adsense */
.ad-text, .ad-txt {
	font-weight: bold;
	margin: 0;
}

#article p.ad-text, #article p.ad-txt {
	margin-top: 0;
	margin-bottom: 0;
}

#ad-header {
	display: block;
	margin-top: 1.5rem;
	margin-bottom: 2rem;
	text-align: center;
}

#related-content {
	margin-top: 4rem;
}

#ad-side-middle {
	margin-top: 3.625rem;
	position: -webkit-sticky; /* Safari */
	position: sticky; /* 広告ユニットの固定表示 */
	top: 100px;
}

@media screen and (max-width: 1279px) {
	#ad-side-middle { position: static;} /* 固定表示を解除 */
} /* メディア指定 959px 終了 */

@media screen and (max-width: 374px) {
	#ad-side-middle { margin-top: 0;} /* 広告コード側でnoneにしているので、ad-side-middleエリアは表示したまま、エリアのマージンを調整、「スポンサーリンク」の文字だけを非表示に。 */
	#ad-side-middle p.ad-text  { display: none;}
} /* メディア指定 374px 終了 */