@charset "utf-8";
/* CSS Document */
/* =======================================
標準レイアウト
======================================= */

#container {
	width: 950px;
	margin: auto!important;
	height: auto;
	zoom: 100%;
}
#container:after {
	content: "";
	display: block;
	clear: both;
	height: 1px;
	overflow: hidden;
}
.contents_detail {
	overflow: hidden;
	text-align: left;
	margin-bottom: 10px;
}
.contents_detail p {
	font-size: 16px;
	line-height: 170%;
	color: #000;
	margin-bottom: 15px;
}
.contents_detail img {
	vertical-align: middle
}
/* メインカット */

#mainimg950 {
	width: 950px
}
/* 導入部分 */

.leadbox {
	background-color: rgb(238, 238, 238);
	border: 1px solid rgb(204, 204, 204);
	color: rgb(0, 0, 0);
	font-size: 14px;
	font-weight: nomal;
	line-height: 155%;
	margin-bottom: 30px;
	padding: 18px;
}
/* =======================================
マージンの定義
======================================= */

.mb10 {
	margin-bottom: 10px
}
.ml20 {
	margin-left: 20px
}
.mr20 {
	margin-right: 20px
}
/* =======================================
リンクボタン
======================================= */


/* =======================================
見出し
======================================= */

.boxmidashi {
border-bottom: 1px solid #333;
margin-bottom: 30px;
font-size: 2.4em;
font-weight: bold;
padding: .5em 0;
border-top: 1px solid #333;
margin-top: 10px;
}
.contents_detail h2.midashi {
border-left: 6px solid #C20000;
color: rgb(0, 0, 0);
font-size: 18px !important;
font-weight: bold;
line-height: 140%;
margin-bottom: 15px;
padding: 5px 10px;
}
/* =======================================
クレジット
======================================= */

#credit {
	font-size: 12px;
	color: #333333;
	margin-bottom: 5px;
	margin-top: 5px;
}
#credit:after {
	content: "";
	display: block;
	clear: both;
	height: 1px;
	overflow: hidden;
}
/*\*/

* html #credit {
	height: 1em;
	overflow: visible;
}
/**/

#credit .left {
	width: 720px;
	float: left;
	text-align: left;
}
#credit .right {
	width: 200px;
	float: right;
	text-align: right;
}
.clear {
	clear: both
}
/* =======================================
ショップ情報枠
======================================= */

.brandbox {
	width: 950px !important;
	padding: 15px 15px 10px 15px;
	text-align: left;
	overflow: hidden;
	margin-bottom: 20px;
	border: 1px solid #000;
	box-sizing: border-box;
	margin-top: -10px;
}
.brandbox01 {
	padding-right: 20px;
	vertical-align: middle;
}
.brandbox01 img {
	width: 100%;
	height: auto;
}
.brandbox02 {
	font-size: 12px;
	line-height: 160%;
	color: #000;
	vertical-align: middle;
}
.brandbox03 {
    -webkit-box-flex: 1; /* Safari,Google Chrome用 */
    -moz-box-flex: 1; /* Firefox用 */
    -ms-flex-grow: 1;
    -webkit-flex-grow: 1;
    flex-grow: 1;
}
.profile_name {
	color: #000;
	font-size: 20px;
	font-weight: bold;
	padding: 0;
	margin: 5px 0 15px;
}
.profile_intro {
font-size: 12px;
color: #333;
line-height: 145%;
margin-bottom: 8px;
}


/* =======================================
キャプション
======================================= */

.photo_cap {
	font-size: 13px !important;
	color: #666 !important;
	line-height: 130% !important;
}
/* =======================================
FLEXBOX の定義
======================================= */

.flexbox {
    display: -webkit-box;
    display: -ms-flex;
    display: -webkit-flex;
    display: flex;
    box-sizing: border-box;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
}
.flexreverse {
    -ms-flex-direction: row-reverse;
    -webkit-flex-direction: row-reverse;
    flex-direction: row-reverse;
    -webkit-box-direction: reverse;
    box-direction: reverse;
}
.vcenter {
	-webkit-align-items: center;
	align-items: center;
}
.flexbetween {
    -webkit-box-pack:justify;
    -ms-flex-pack:justify;
    -webkit-justify-content:space-between;
	justify-content: space-between
}
.flexwrap {
    -webkit-flex-wrap:wrap;
    flex-wrap:wrap;
}

/* =======================================
幅の定義
======================================= */

.w100p {
	width: 100%
}
.w350 {
	width: 350px;
	min-width: 350px;
	max-width: 350px;
}
/* =======================================
記事個別の追加
======================================= */
/* ショップ情報の横幅 (合計 878px) */
.brandbox01{
	width: 160px;
	min-width: 160px;
	text-align: center;
}
.brandbox02{
width: 280px; min-width: 280px;
}
.brandbox03{  }

.w698{ width: 698px; max-width: 698px; }
.w220{ width: 220px; min-width: 220px; }


p.leadintro_cap {
font-size: 16px !important;
line-height: 140% !important;
margin-top: 10px;
color: #C20000;
border-bottom: 1px dotted #999;
padding-bottom: 10px;
}


.brandmidashi {
    text-align: left;
    font-size: 20px;
    font-weight: bold;
    color: #FFF;
    padding: 10px;
    margin: 0px 0px 10px;
    background: #45484d;
    background: -moz-linear-gradient(top,  #45484d 0%, #000000 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#45484d), color-stop(100%,#000000));
    background: -webkit-linear-gradient(top,  #45484d 0%,#000000 100%);
    background: -o-linear-gradient(top,  #45484d 0%,#000000 100%);
    background: -ms-linear-gradient(top,  #45484d 0%,#000000 100%);
    background: linear-gradient(to bottom,  #45484d 0%,#000000 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#45484d', endColorstr='#000000',GradientType=0 );
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
    position: relative;
}






.broslink a {
    border: 1px solid #F90;
    display: block;
    padding: 8px 12px;
    text-align: center;
    font-size: 15px;
    color: #111 !important;
    font-weight: bold;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    background: -webkit-gradient(linear, left top, left bottom, color-stop(1.00, #feae31), color-stop(0.00, #efe457));
    background: -webkit-linear-gradient(top, #efe457 0%, #feae31 100%);
    background: -moz-linear-gradient(top, #efe457 0%, #feae31 100%);
    background: -o-linear-gradient(top, #efe457 0%, #feae31 100%);
    background: -ms-linear-gradient(top, #efe457 0%, #feae31 100%);
    background: linear-gradient(top, #efe457 0%, #feae31 100%);
    text-decoration: none;
}

.capphoto{margin:5px 0;}




.nextlink a{
    border: 5px solid #CCC;
    padding: 16px;
    text-align: center;
    display: block;
    font-size: 18px;
    font-weight: bold;
	text-decoration: none;
}

.nextlink a:hover {
	text-decoration: none !important;
	color: #009 !important;
	background-color: #CCC;
}




.contents_detail .flexitem h2.midashi {
    border-left: 6px solid #666;
    font-size: 20px !important;
    padding: 10px;
    background-color: #EEEEEE;
}




.fblikebox {
    text-align: center;
    background-color: #EEE;
    padding: 10px;
    margin-bottom: 20px;
}

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


.next{
    border: 5px solid #CCC;
    margin-bottom: 20px;
    padding: 17px;
    text-align: center;
    display: block;
}

.next a{
    display: block;
    font-size: 18px;
    font-weight: bold;
}

p.next:hover {
	text-decoration: none !important;
	color: #009 !important;
	background-color: #CCC;
}

.capmidashi{
font-size: 18px;
font-weight: bold;
line-height: 1.3;
margin-bottom: 10px;
}

.flexhalf > div {
    width:49%;
}
.flexhalf > div img {
    width:100%;
	height:auto;
}

/*recommendpost*/
ul.recommendpost { width:100%; overflow:hidden;}
ul.recommendpost  li { padding-bottom:8px;margin-bottom:8px; border-bottom:1px dotted #ccc;}
ul.recommendpost  li a { font-size:18px; font-weight:bold; line-height:150%; text-decoration:underline; display: block;}
ul.recommendpost  li a:hover{ text-decoration:none;}
ul.recommendpost  li a img{ margin-right:10px; vertical-align:middle;}
ul.recommendpost  li a:hover img{filter: alpha(opacity=80);opacity:0.8;background: #ffffff;}