@charset "UTF-8";

body{
	margin: 0;
	padding: 80px 0 0 0;
}
* html body{
	overflow: hidden;
} 
div#headerArea {
	position: fixed !important;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 80px;
	background-color: #000000;
	color: #fff;
	z-index:1000;
}

* html div#contentsArea{
	height: 100%;
	overflow: auto;
}

.clearfix:after {
    content:"";
    display:block;
    clear:both;
}



/* 基本色 */
:root {
	--main-color: #000000;
	--accent-color: #BF6A7A;
	--dark-main-color: #000000;
	--bright-main-color: #ffffff;
	--text-bright-color: #ffffff;
	--text-dark-color: #000000;
	--icon-color: #fff;
	--icon-bk-color: #ddd;
	--gray-color: #ddd;
	--large-width: 1000px;
	--middle-width: 800px;
}


.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	border: 0;
}

.item img {
width:100%;}
 
.fluid2 {
padding:0;}

/* 基本設定： フォントサイズ */
@media (max-width: 599px) {
	:root {
		font-size: 14px;
	}
}

@media (min-width: 600px) and (max-width: 799px) {
	:root {
		font-size: 16px;
	}
}

@media (min-width: 800px) {
	:root {
		font-size: 18px;
	}
}

body {font-size: 16px;}



/* 基本設定： ページ全体 */
body {
	margin: 0;
	font-family: 游ゴシック体, 'Yu Gothic', YuGothic, 'ヒラギノ角ゴシック Pro', 'Hiragino Kaku Gothic Pro', メイリオ, Meiryo, Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
}


/* スライダーの画像切り替え */

/* パソコンで見たときは"pc"のclassがついた画像が表示される */
.pc_only { display: block !important; }
.sp_only { display: none !important; }
 
/* スマートフォンで見たときは"sp"のclassがついた画像が表示される */
@media only screen and (max-width: 750px) {
    .pc_only { display: none !important; }
    .sp_only { display: block !important; }
}



/* 酒場トップ */
.conSaka-ba {
	background-color:var(--bright-main-color);
	color: #000000;
	color: var(--text-dark-color);
	margin-top:50px;
}

.conSaka-ba h2 {
	margin-top: 0;
	padding-left:50px;
	margin-bottom: 30px;
	font-size: 50px;
	font-family: "din-condensed",sans-serif;
	font-style: normal;
	font-weight: 400;
	background:url(../../saka-ba/img/icon_saka-ba.svg) no-repeat 0% 50%;
	background-size:7%;
}

.conSaka-ba  h3 {
	margin-top: 0;
	font-size: 32px;
	font-family: "din-condensed",sans-serif;
	font-style: normal;
	font-weight: 400;
	margin-bottom:20px;
}


span {
	font-size:50%;
}

.conSaka-ba p {
	margin-top: 0;
	margin-bottom: 20px;
	font-size: 16px;
	line-height: 1.8;
	opacity: 0.8;
}

.conSaka-ba img {
		max-width:100%;
		height:auto;
		margin-bottom:20px;
	
	}


@media (min-width: 768px) {
	.conSaka-ba .container {
		/* display: flex; */
		max-width: 1000px;
		max-width: var(--large-width);
		margin-left: auto;
		margin-right: auto;
	}

	.conSaka-ba .photo {
		/* flex: 5; */
	}

	.conSaka-ba .text {
		/* flex:3; */
		padding: 20px;
	}
	
	.conSaka-ba img {
		max-width:70%;
		height:auto;
		padding-left:20px;
	}
	
	.conSaka-ba h2 {
	background-size:4%;
}
}


/* 能トップ */
.conNoh {
	background-color:var(--bright-main-color);
	color: #000000;
	color: var(--text-dark-color);
	/* border-top:20px solid #000000; */
	/* margin-top:100px; */
	/* padding-top: 100px; */
	margin-top:50px;
}

.conNoh h2 {
	margin-top: 0;
	padding-left:50px;
	margin-bottom: 30px;
	font-size: 50px;
	font-family: "din-condensed",sans-serif;
	font-style: normal;
	font-weight: 400;
	background:url(../../noh/img/icon_noh.svg) no-repeat 0% 50%;
	background-size:7%;
}


.conNoh p {
	margin-top: 0;
	margin-bottom: 20px;
	font-size: 16px;
	line-height: 1.8;
	opacity: 0.8;
}

.conNoh img {
		max-width:100%;
		height:auto;
		margin-bottom:20px;
	
	}


@media (min-width: 768px) {
	.conNoh .container {
		/* display: flex; */
		max-width: 1000px;
		max-width: var(--large-width);
		margin-left: auto;
		margin-right: auto;
	}

	.conNoh .photo {
		/* flex: 5; */
	}

	.conNoh .text {
		/* flex:3; */
		padding: 20px;
	}
	
	.conNoh img {
		max-width:70%;
		height:auto;
		padding-left:20px;
	}
	
	.conNoh h2 {
	background-size:4%;
}
}


/* アバウト */
.about {
	background-color:var(--bright-main-color);
	color: #000000;
	color: var(--text-dark-color);
	margin-top:50px;
}

.about .container {
padding:0 15px;
}

.about h2 {
	margin-top: 0;
	margin-bottom: 30px;
	font-size: 50px;
	font-family: "din-condensed",sans-serif;
	font-style: normal;
	font-weight: 400;
	background-size:7%;
}


.about p {
	margin-top: 0;
	margin-bottom: 20px;
	font-size: 16px;
	line-height: 1.8;
	opacity: 0.8;
}

.about .sub_ph {
		max-width:40%;
		height:auto;
		padding-left:20px;
		padding-bottom:10px;
	}
	


.about_tl {
	background-color:var(--bright-main-color);
	color: #000000;
	color: var(--text-dark-color);
	margin-top:50px;
}

.about_tl .container {
padding:0 15px;
}

.about_tl h3 {
	margin-top: 0;
	margin-bottom: 30px;
	font-size: 40px;
	font-family: "din-condensed",sans-serif;
	font-style: normal;
	font-weight: 400;
	background-size:7%;
}





@media (min-width: 768px) {
	.about .container {
		/* display: flex; */
		max-width: 1000px;
		max-width: var(--large-width);
		margin-left: auto;
		margin-right: auto;
	}

	.about .photo {
		/* flex: 5; */
	}

	.about .text {
		/* flex:3; */
		padding: 20px;
	}
	
	.about img {
		max-width:70%;
		height:auto;
		padding-left:20px;
	}
	
	.about h2 {
	background-size:4%;
}



.about_tl .container {
/* display: flex; */
		max-width: 1000px;
		max-width: var(--large-width);
		margin-left: auto;
		margin-right: auto;
}

.about_tl h3 {
	
}


}


/* 各カテゴリー */

.conCate {
	background-color:var(--bright-main-color);
	padding-top:50px;
	/* background:url(../img/bg-stripe.png) top center no-repeat; */
	color: #000000;
	color: var(--text-dark-color);
	margin-top:50px;
	border-top:2px dashed #000000;
}

.conCate  h2 {
	margin-top: 0;
	font-size: 38px;
	font-family: "din-condensed",sans-serif;
	font-style: normal;
	font-weight: 400;
}

.conCate span {
	font-size:50%;
}


.conCate  h3 {
	margin-top: 0;
	font-size: 32px;
	font-family: "din-condensed",sans-serif;
	font-style: normal;
	font-weight: 400;
	margin-bottom:20px;
}

.conCate p {
	margin-top: 0;
	margin-bottom: 20px;
	font-size: 16px;
	line-height: 1.8;
	opacity: 0.8;
}


.conCate .photo {
	min-height: 300px;
	background-image: url(../../saka-ba/img/p_sakaba_tp.jpg);
	background-position: center;
	background-size: cover;
}

.conCate img {
		max-width:100%;
		height:auto;
		margin-bottom:20px;
	
	}
	

@media (min-width: 768px) {
	.conCate .container {
		display: flex;
		max-width: 1000px;
		max-width: var(--large-width);
		margin-left: auto;
		margin-right: auto;
	}

	.conCate .photo {
		flex: 1;
	}

	.conCate .text {
		flex: 1;
		padding: 20px;
	}
	
	.conCate img {
		max-width:50%;
		height:auto;
		padding-left:20px;
	}
}

/*  Author  */

.Author {
	background-color:var(--bright-main-color);
	color: #000000;
	color: var(--text-dark-color);
	margin-bottom:50px;
	
	
}

.Author .container {
	background-color:#f2f2f2;
	padding:20px;
	margin-top:30px;
}



.Author  h3 {
	margin-top: 12px;
	font-size: 20px;
	font-family: "din-condensed",sans-serif;
	font-style: normal;
	font-weight: 400;
	margin-bottom:10px;
	float:left;
	
}

.Author  h3 span {
	background:#000000;
	padding:5px;
	color:#ffffff;
	font-size:90%;
	margin-right:10px;
}

.Author p {
	margin-top: 10px;
	font-size: 14px;
	line-height: 1.8;
	opacity: 0.8;
}


.Author img {
	width:10%;
	height:auto;
	float:left;
	margin-left:20px;
}


@media (min-width: 768px) {
	.Author .container {
		max-width: 940px;
		margin-left: auto;
		margin-right: auto;
		padding:30px;
	}
	
	.Author img {
	width:6%;
	height:auto;
	float:left;
	margin-left:20px;
}

.Author  h3 {
	margin-top: 15px;
}

}




/* 記事一覧C */

.list {
	padding-bottom:50px;
	padding-top:10px;
	background-color:#f2f2f2;
}

.list h3 {
	width:100%;
	text-align:center;
	margin:30px auto;
	font-family: "din-condensed",sans-serif;
	font-style: normal;
	font-weight: 400;
	font-size:32px;
}

#ex-title {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    text-align: center; /* for no-flexbox browsers */
}

#ex-title:before,
#ex-title:after {
    border-top: 1px solid;
    content: "";
    display: inline; /* for IE */
    -webkit-box-flex: 1;
    -webkit-flex-grow: 1;
    -ms-flex: 1;
    flex-grow: 1;
}

#ex-title:before {
    margin-right: 0.5em;
}

#ex-title:after {
    margin-left: 0.5em;
}




.list h4 {
	width:100%;
	text-align:center;
	margin:30px auto;
	font-family: "din-condensed",sans-serif;
	font-style: normal;
	font-weight: 400;
	font-size:28px;
}

.list h4 span {
	font-size:60%;
}

.list .container {
	display: flex;
	margin-left: auto;
    margin-right: auto;
    max-width: var(--large-width);
	flex-wrap: wrap;
	margin: 2px auto;
}

.list article {
	flex: 1 1 250px;
	display: flex;
}

.list a {
	position: relative;
	flex: 1;
	margin: 2px;
	display: block;
	border: solid 1px #ddd;
	border: solid 1px var(--gray-color);
	background-color: #000000;
	color: inherit;
	text-decoration: none;
}

.list a:hover {
	opacity: 0.8;
}

.list .photo {
	min-height: 250px;
	background-position: center;
	background-size: cover;
	opacity: 0.5;
	text-align:center;
}

.list .text {
	position: absolute;
	bottom: 0;
	left: 0;
	margin: 10px;
	color: #fff;
	color: var(--text-bright-color);
}


.list h5 {
	margin: 0;
	font-size: 18px;
	line-height:1.5em;
	/* font-family: "din-condensed",sans-serif; */
}

.list h5 span {
	font-size:80%;
}

.list p {
	margin: 0;
	font-size: 14px;
	opacity: 1;
}


@media (min-width: 768px) {
	.list article {
		flex: 1 1 50%;
	}
}

@media (min-width: 1000px) {
	.list article {
		flex: 1 1 25%;
	}
}


/* トップ用リスト*/

.recent {
	padding-bottom:50px;
	padding-top:10px;
	background-color:#ffffff;
}

.recent h3 {
	width:100%;
	text-align:center;
	margin:30px auto;
	font-family: "din-condensed",sans-serif;
	font-style: normal;
	font-weight: 400;
	font-size:32px;
}



.recent h4 {
	width:100%;
	text-align:center;
	margin:30px auto;
	font-family: "din-condensed",sans-serif;
	font-style: normal;
	font-weight: 400;
	font-size:28px;
}

.recent h4 span {
	font-size:60%;
}

.recent .container {
	display: flex;
	margin-left: auto;
    margin-right: auto;
    max-width: var(--large-width);
	flex-wrap: wrap;
	margin: 2px auto;
}

.recent article {
	flex: 1 1 250px;
	display: flex;
}

.recent a {
	position: relative;
	flex: 1;
	margin: 2px;
	display: block;
	border: solid 1px #ddd;
	border: solid 1px var(--gray-color);
	background-color: #000000;
	color: inherit;
	text-decoration: none;
}

.recent a:hover {
	opacity: 0.8;
}

.recent .photo {
	min-height: 250px;
	background-position: center;
	background-size: cover;
	opacity: 0.5;
	text-align:center;
}

.recent .text {
	position: absolute;
	bottom: 0;
	left: 0;
	margin: 10px;
	color: #fff;
	color: var(--text-bright-color);
}


.recent h5 {
	margin: 0;
	font-size: 18px;
	line-height:1.5em;
	/* font-family: "din-condensed",sans-serif; */
}

.recent h5 span {
	font-size:80%;
}

.recent p {
	margin: 0;
	font-size: 14px;
	opacity: 1;
}


@media (min-width: 768px) {
	.recent article {
		flex: 1 1 50%;
	}
}

@media (min-width: 1000px) {
	.recent article {
		flex: 1 1 33%;
	}
}


/* トップカテゴリ */

span.label_sakaba {
	padding:3px;
	color:#fff;
	background-color:#d9492c;
	font-size:80%;
}


span.label_noh {
	padding:3px;
	color:#fff;
	background-color:#ecc53f;
	font-size:80%;
}


/* トップ用カテゴリ*/

.cate {
	padding-bottom:50px;
	padding-top:10px;
	background-color:#ffffff;
}

.cate h3 {
	width:100%;
	text-align:center;
	margin:30px auto;
	font-family: "din-condensed",sans-serif;
	font-style: normal;
	font-weight: 400;
	font-size:32px;
}



.cate h4 {
	width:100%;
	text-align:center;
	margin:30px auto;
	font-family: "din-condensed",sans-serif;
	font-style: normal;
	font-weight: 400;
	font-size:28px;
}

.cate h4 span {
	font-size:60%;
}

.cate .container {
	display: flex;
	margin-left: auto;
    margin-right: auto;
    max-width: var(--large-width);
	flex-wrap: wrap;
	margin: 2px auto;
}

.cate article {
	flex: 1 1 250px;
	display: flex;
}

.cate a {
	position: relative;
	flex: 1;
	margin: 2px;
	display: block;
	border: solid 1px #ddd;
	border: solid 1px var(--gray-color);
	background-color: #000000;
	color: inherit;
	text-decoration: none;
}

.cate a:hover {
	opacity: 0.8;
}

.cate .photo {
	min-height: 250px;
	background-position: center;
	background-size: cover;
	opacity: 0.5;
	text-align:center;
}

cate .photo_about {
	min-height: 250px;
	background-position: center;
	background-size: cover;
	opacity: 1;
	text-align:center;
}

.cate .text {
	position: absolute;
	bottom: 0;
	left:0;
	margin: 10px;
	color: #fff;
	color: var(--text-bright-color);
}

.cate .top_about {
	position: absolute;
	top: 50%;
left: 50%;
-webkit-transform: translate(-50%,-50%);
-moz-transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
-o-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
	color: #000000;
	font-family: "din-condensed",sans-serif;
	font-size: 30px;
}



.cate h5 {
	margin: 0;
	font-size: 25px;
	line-height:1.5em;
	font-family: "din-condensed",sans-serif;
}

.cate h5 span {
	font-size:80%;
}

.cate p {
	margin: 0;
	font-size: 14px;
	opacity: 1;
}


@media (min-width: 768px) {
	.cate article {
		flex: 1 1 50%;
	}
}

@media (min-width: 1000px) {
	.cate article {
		flex: 1 1 33%;
	}
}



/* フッター */
footer {
	color: #fff;
	color: var(--text-bright-color);
	background-color: #000000;
	background-color: var(--dark-main-color);
	margin-top:70px;
}

footer .container {
	padding: 40px 20px;
}


@media (min-width: 768px) {
	footer .container {
		display: flex;
		flex-wrap: wrap;
		max-width: 1000px;
		max-width: var(--large-width);
		margin-left: auto;
		margin-right: auto;
	}

	.footA {
		flex: 0 0 40%;
	}

	.footB {
		flex: 0 0 60%;
	}

	.footC {
		flex: 0 0 100%;
	}
}


/* フッターA： サイト情報 */
.footA {
	margin-bottom: 30px;
}

.footA h2 {
	margin-top: 0;
	font-family: "din-condensed",sans-serif;
	font-size: 32px;
	/* letter-spacing: 0.2em; */
	font-style: normal;
	font-weight: 300;
	
}

.footA p {
	margin-top: 0;
	margin-bottom: 0;
	font-size: 14px;
}

.footA a {
	color: inherit;
	text-decoration: none;
}


/* フッターB： フッターメニュー */
.footB div {
	margin-bottom: 20px;
}

.footB h3 {
	margin-top: 0;
	margin-bottom: 10px;
	border-bottom: solid 1px currentColor;
	font-size: 14px;
}

.footB ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.footB a {
	display: block;
	padding: 5px;
	color: inherit;
	font-size: 12px;
	text-decoration: none;
}

.footB a:hover {
	background-color: rgba(0,0,0,0.3);
}


@media (min-width: 768px) {
	.footB {
		display: flex;
	}

	.footB div {
		flex: 1;
	}

	.footB div:not(:first-child) {
		margin-left: 40px;
	}
}


/* フッターC： コピーライト */
.footC {
	font-size: 12px;
	text-align: center;
	font-family:  sans-serif;
}

/* フッターD： SNSメニュー */
.sns {
	text-align: center;
}

}
.footD {
	margin-top: 20px;
	width: 100px;
}

.footD ul {
	display: flex;
	margin: 0;
	padding: 0;
	list-style: none;
}

.footD a {
	display: block;
	margin-right: 8px;
	padding: 0;
	color: inherit;
	font-size: 16px;
	text-decoration: none;
	border: solid 1px currentColor;
	width: 2em;
	line-height: 2em;
	border-radius: 50%;
	text-align: center;
}

.footD a:hover {
	background-color: rgba(0,0,0,0.3);
}



/* ヘッダー */
header {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 100;
	width: 100%;
	background-color: rgba(255,255,255,0.9);
}


.nohero header {
	position: static;
	border-bottom: solid 1px #ddd;
	border-bottom: solid 1px var(--gray-color);
}



/* ヘッダーA: サイト名 */
.headA {
	display: inline-block;
	line-height: 70px;
	padding-left: 20px;
	padding-right: 20px;
	background-color: #5D9AB2;
	background-color: var(--main-color);
	color: #fff;
	color: var(--text-bright-color);
	font-family: "din-condensed",sans-serif;
	font-style: normal;
	font-weight: 400;
	font-size: 30px;
	text-decoration: none;
	float:left;
}

p.catch {
	margin-top:30px;
	font-size: 15px;
	font-family: "din-condensed",sans-serif;
	float:left;
}

@media screen and (max-width: 480px){
p.catch {
		display:none;
}}

	



/* ヘッダーB： ナビゲーションメニュー */
.headB ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.headB a {
	display: block;
	padding: 15px;
	color: inherit;
	font-size: 20px;
	font-family: "din-condensed",sans-serif;
	font-style: normal;
	font-weight: 300;
	text-decoration: none;
}



.headB a:hover {
	background-color: rgba(0,0,0,0.3);
}

@media (min-width: 768px) {
	header .container {
		display: flex;
		align-items: center;
		justify-content: space-between;
		max-width: 1000px;
		max-width: var(--large-width);
		margin-left: auto;
		margin-right: auto;
	}

	.headB ul {
		display: flex;
	}
}


/* ヘッダーC： トグルボタン */

@media (max-width: 767px) {
	/* 小さい画面用の設定 */
	header .container-small {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.headC {
		margin-right: 10px;
		padding: 0;
		border: none;
		outline: none;
		background: none;
		font-size: 28px;
		opacity: 0.5;
		cursor: pointer;
	}

	.headC:hover {
		opacity: 0.3;
	}

	.headB {
		display: none;
	}
}

@media (min-width: 768px) {
	/* 大きい画面用の設定 */
	.headC {
		display: none;
	}

	.headB {
		display: block !important;
	}
	
	.headB .lang a {
		font-size:15px;
		display: block !important;
		border:1px #FFFFFF solid;
		margin-left:10px;
		padding:10px;
		margin-top:10px;
	}
	
	.headB .lang_on a {
		color:#000000;
		background-color:#ffffff;
		display: block !important;
	}
}



/* コンテンツページ: 記事 */
.post .container {
	max-width: 800px;
	max-width: var(--middle-width);
	margin-left: auto;
	margin-right: auto;
	padding: 30px 10px;
}

.post h1 {
	padding-left: 0.5rem;
	border-left: solid 0.75rem #BF6A7A;
	border-left: solid 0.75rem var(--accent-color);
	font-size: 2rem;
}

.post p {
	font-size: 1rem;
	line-height: 2;
}

.post img {
	max-width: 100%;
}






/* アレンジ: ヘッダーの色 */
.head-color {
	background-color: #000000;
	background-color: var(--main-color);
	color: #fff;
	color: var(--text-bright-color);
}

.head-color .headA {
	background-color: transparent;
	color: inherit;
}

.head-color .headC {
	color: inherit;
}


/* ----------------------------- 記事ページ ----------------------------- */

#ec_ariticle  {
	margin-bottom:100px;
}

#ec_ariticle .container {
	padding:0 15px;
}

.ec_article_list {
	padding:0 15px;
	padding-bottom:50px;
	padding-top:20px;
}

#ec_ariticle .ec_ariticle_main_ph img {
	width:100%;
	height:auto;
}

#ec_ariticle p {
	margin-bottom:40px;
}

#ec_ariticle p.small {
	font-size: 90%;
}

#ec_ariticle .sub_ph {
		max-width:60%;
		height:auto;
		padding-left:20px;
	}
	

@media (min-width: 768px) {
	#ec_ariticle .container {
		max-width: 1000px;
		max-width: var(--large-width);
		margin-left: auto;
		margin-right: auto;
}

#ec_ariticle .ec_ariticle_main_ph {
	text-align:center;
	/* background-color:#f2f2f2; */
	margin:0;
	padding:0;
	line-height:0;
	margin-bottom:30px;
	margin-top:20px;
}


#ec_ariticle .ec_ariticle_main_ph img {
	width:80%;
	text-align:center;
}

#ec_ariticle .sub_ph {
		max-width:50%;
		height:auto;
		padding-left:20px;
	}

}

/*  記事内Author  */

.ec_Author {
	background-color:var(--bright-main-color);
	color: #000000;
	color: var(--text-dark-color);
	margin-bottom:10px;
	
	
}


.ec_Author  h3 {
	margin-top: 12px;
	font-size: 20px;
	font-family: "din-condensed",sans-serif;
	font-style: normal;
	font-weight: 400;
	margin-bottom:10px;
	float:right;
	
}

.ec_Author  h3 span {
	border:1px solid #000000;
	padding:5px;
	font-size:90%;
	margin-right:10px;
}



.ec_Author img {
	width:10%;
	height:auto;
	float:right;
	margin-left:20px;
}


@media (min-width: 768px) {
	
	
	.ec_Author img {
	width:6%;
	height:auto;
	float:right;
	margin-left:20px;
}

.ec_Author  h3 {
	margin-top: 15px;
}

}

/* コンテンツページ: パンくずリスト */
.bread ol {
	display: flex;
	margin: 0;
	padding: 0;
	list-style: none;
	margin-top:10px;
}

.bread ol li {
	padding: 5px;
	font-size: 0.775rem;
}

.bread a {
	display: block;
	color: inherit;
	text-decoration: none;
}

.bread a::after {
	margin-left: 10px;
	content: '\f054';
	font-family: 'FontAwesome';
	opacity: 0.3;
}

.bread a:hover {
	background-color: rgba(0,0,0,0.3);
}

/* -- タイトル -- */

#ec_ariticle .tl {
	text-align:center;
}

#ec_ariticle .tl h1 {
    font-family: "din-condensed",sans-serif;
    font-size: 32px;
    font-style: normal;
    font-weight: 400;
    margin-bottom: 10px;
    margin-top: 0;
	line-height:1.5em;
}


#ec_ariticle .tl .shoulder {
	font-family: "din-condensed",sans-serif;
	font-size: 120%;
	margin-bottom: 0;
}

#ec_ariticle .tl p.cate {
	margin-bottom:20px;
    font-family: "din-condensed",sans-serif;
    font-size: 25px;
    font-style: normal;
    font-weight: 400;
    margin-top: 30px;
	color:#e3521f;
}



#ec_ariticle .tl p.cate span {
	font-size:90%;
	color:#ffffff;
	background-color:#e3521f;
	padding:3px 10px;
}

@media (min-width: 768px) {
	
	#ec_ariticle .tl h1 {
    font-size: 40px;
}
	#ec_ariticle .tl .shoulder {
	font-family: "din-condensed",sans-serif;
	font-size: 140%;
	margin-bottom: 0;
}

}


/* 誘導 */
#ec_ariticle .yudo {
	margin-top: 40px;
}

#ec_ariticle .yudo .before {
	float:left;
	/* width:20%; */
}	
	
#ec_ariticle .yudo .next {
	float:right;
	/* width:20%; */
	text-align:right;
}	

#ec_ariticle .yudo .next a,
#ec_ariticle .yudo .before a {
	font-family: "din-condensed",sans-serif;
}
	


.button {
	position: relative;
	display: inline-block;
	padding: .9em 4em;
	background-color: #333;
	border: 2px solid #333;
	color: #fff;
	text-align: center;
	text-decoration: none;
	transition: all .3s;
}

.button::after {
	position: absolute;
	top: 50%;
	right: .2em;
	content: '';
	margin-top: -5px;
	border: 7px solid transparent;
	border-top-width: 5px;
	border-bottom-width: 5px;
	border-left-color: #fff;
	transition: all .3s;
}

.button:hover {
	background-color: #fff;
	color: #333;
}

.button:hover::after {
	border-left-color: #333;
}


.button_before {
	position: relative;
	display: inline-block;
	padding: .9em 4em;
	background-color: #333;
	border: 2px solid #333;
	color: #fff;
	text-align: center;
	text-decoration: none;
	transition: all .3s;
}

.button_before::before {
	position: absolute;
	top: 50%;
	left: .2em;
	content: '';
	margin-top: -5px;
	border: 7px solid transparent;
	border-top-width: 5px;
	border-bottom-width: 5px;
	border-right-color: #fff;
	transition: all .3s;
}

.button_before:hover {
	background-color: #fff;
	color: #333;
}

.button_before:hover::before {
	border-right-color: #333;
}


/* sns */