@charset "utf-8";



/* トップタイトル

-------------------- */

#PageTitle {

    margin-top: 5em;  /*defaultは90px*/

    height: 8em;  /*defaultは200px*/

    background: url(../img/page/bg_sub_title.png) no-repeat;

    background-position: center;

    background-size: cover;

    text-align: center;

}

#PageTitle h1 {

    padding-top: 2em; /*defaultは60px*/

    font-size: 2em; /*defaultは200px*/

    font-weight: bold;

    color: white;

}





/* レイアウト

-------------------- */

.contents {

    margin-bottom: 50px;

}

#Main {

}

#Side {

    margin-top: 100px;

}

#Side #Banner {

    margin: 30px 0 60px;

    text-align: center;

}

#Side #Banner .banner {

    display: inline-block;

}

/* 右サイド */

#MainLeft {

    float: left;

    width: 824px;

}

#SideLeft {

    float: left;

    width: 300px;

}

/* 左サイド */

#MainRight {

    float: right;

    width: 824px;

}

#SideRight {

    float: right;

    width: 300px;

}



#SideLeft #Banner,

#SideRight #Banner {

    text-align: center;

}

#SideLeft #Banner .banner,

#SideRight #Banner .banner {

    margin: 20px 0;

}







/* 汎用スタイル

-------------------- */

/* 見出し */

.main h2 {

	margin-bottom: 30px;

    padding-bottom: 15px;

    background: url(../img/common/bg_headline.png) left bottom no-repeat;

	font-family: "Century Gothic", "ヒラギノ明朝 Pro W3","Hiragino Mincho Pro","HGS明朝E","ＭＳ Ｐ明朝",serif;

	font-size: 30px;

    line-height: 1.3;

}

.main h3 {

	margin: 40px 0 30px;

    padding-bottom: 15px;

    border-bottom: 1px dotted #999;

    font-size: 24px;

}

.main h3 a {

	text-decoration: none;

    color: #333;

}

.main h3 a:hover {

	text-decoration: underline;

    color: #888;

}

.main h4 {

	margin: 30px 0 20px;

    font-size: 18px;

    font-weight: bold;

}



/* 文章 */

.main p {

    margin-bottom: 30px;

}

#Recipe img {

    border: 1px solid #ccc;

    box-shadow: 8px 8px 0px 0px rgba(0,0,0,0.1);

}



/* サイドバー

-------------------- */

.side h2 {

    margin-bottom: 10px;

    padding: 8px;

    text-align: center;

    color: #fff;

    background: #666666;

    font-family: "oswald";

    font-size: 14px;

    letter-spacing: 2px;

}

.bs-widget {

    margin-bottom: 30px;

}

.bs-widget li a {

    display: block;

    padding: 13px 10px 12px 20px;

    border-bottom: 1px solid #CCCCCC;

    background: url(../img/common/icn_arrow02.png) 10px 18px no-repeat;

    text-decoration: none;

    color: #333;

}

.bs-widget li a:hover {

    background-color: #e8e8e8;

}

.bs-widget table tr:first-child {

    background: #666666;

    color: #fff;

}

.bs-widget table tr:first-child a {

    color: #fff;

}

.bs-widget table th,

.bs-widget table td {

    padding: 3px;

    border: 1px solid #ddd;

    text-align: center;

}

.bs-widget table th {

    background: #e8e8e8;

}

.bs-widget table td {



}





/* 検索窓 */

.search-box {

    margin-bottom: 30px;

}

.search-box input#SearchIndexQ {

    width: 200px;

    margin-right: 10px;

}





/* ブログスタイル

-------------------- */

.blog h2 {

    font-size: 20px;

}

.blog h2 a {

    text-decoration: none;

    color: #333;

}

.blog h2 a:hover {

    position: relative;

    bottom: -1px;

    color: #666;

}

.blog h3 {

    padding-bottom: 10px;

    font-size: 20px;

}

.blog .post {

    margin-bottom: 80px;

}

.blog .more {

    text-align: right;

}

.blog .more a {

    display: inline-block;

    width: 130px;

    margin: 10px 0;

    padding: 10px 10px 10px 20px;

    background: #000 url(../img/common/icn_arrow01.png) 10px center no-repeat;

    color: #fff;

    font-size: 14px;

    text-align: center;

    text-decoration: none;

    letter-spacing: 2px;

}

.blog .more a:hover {

    color: #fff;

    opacity: 0.7;

    text-decoration: none;

}

.blog .meta {

    margin-bottom: 15px;

    padding: 15px;

    border: 1px dashed #ccc;

}

.blog .bs-blog-tag a {

    display: inline-block;

    margin-right: 2px;

    padding: 2px 15px;

    background: #000;

    color: #fff;

    font-size: 12px;

    text-decoration: none;

}

.blog .eye-catch {

    margin-bottom: 30px;

}



/* コメントスタイル */

#BlogCommentList {

    margin-bottom: 50px;

}

img.auth-captcha-image {

	margin-bottom: 6px;

}

.auth-captcha {

	margin: 20px 0;

	text-align: center;

}

.submit {

	text-align: center;

}



/* ボタンスタイル */

.bs-button, .bs-button-small {

	font-size:15px;

	font-weight:normal;

	-moz-border-radius:6px;

	-webkit-border-radius:6px;

	border-radius:6px;

	border:1px solid #dcdcdc;

	padding:5px 15px;

	text-decoration:none;

	background:-moz-linear-gradient( center top, #f9f9f9 7%, #e9e9e9 98% );

	background:-ms-linear-gradient( top, #f9f9f9 7%, #e9e9e9 98% );

	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f9f9f9', endColorstr='#e9e9e9');

	background:-webkit-gradient( linear, left top, left bottom, color-stop(7%, #f9f9f9), color-stop(98%, #e9e9e9) );

	background-color:#f9f9f9;

	color:#666666;

	display:inline-block;

	text-shadow:1px 1px 0px #ffffff;

 	-webkit-box-shadow:inset 1px 1px 0px 0px #ffffff;

 	-moz-box-shadow:inset 1px 1px 0px 0px #ffffff;

 	box-shadow:inset 1px 1px 0px 0px #ffffff;

    cursor: pointer;

}

.button:hover {

	background:-moz-linear-gradient( center top, #e9e9e9 7%, #f9f9f9 98% );

	background:-ms-linear-gradient( top, #e9e9e9 7%, #f9f9f9 98% );

	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#e9e9e9', endColorstr='#f9f9f9');

	background:-webkit-gradient( linear, left top, left bottom, color-stop(7%, #e9e9e9), color-stop(98%, #f9f9f9) );

	background-color:#e9e9e9;

}

.button:active {

	position:relative;

	top:1px;

}





/* baser system style

-------------------- */

	/* contents-navi */

#contents-navi {

	margin: 50px 0 20px;

	text-align: center;

}

#contents-navi a {

	color: #333;

}



	/* pagination */

.pagination {

	margin: 60px 0;

	text-align: center;

	font-size: 12px; font-size: 1.2rem;

}

.pagination span.disabled,

.pagination span.prev a,

.pagination span.next a {

	margin: 0 20px;

	color: #333;

}

.pagination span.current,

.pagination span.number a {

	margin: 0 4px;

	padding: 7px 10px;

	background: #dedede;

	color: #fff;

	text-decoration: none !important;

}

.pagination span.current,

.pagination span.number a:hover {

	background: #666;

}

.pagination a:active {

	background: #666;

}



/* ContactForm

-------------------- */

.form-s {

    width: 20%;

}

.form-m {

    width: 50%;

}

.form-l {

    width: 90%;

}



.mail-before-attachment {

}

.mail-after-attachment {

}

.mail-description small {

}



.bs-mail-form-submit {

	margin: 30px 0;

	text-align: center;

}

.bs-mail-form-submit input.button {

	font-size: 15px;

	cursor: pointer;

}

.auth-captcha {

	margin: 30px 0;

	text-align: center;

}

.mail-description {

	margin-bottom: 10px;

}

#flashMessage {

	margin-bottom: 10px;

}

.alert-message {

    color: #c00;

}





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

	.form-contact table {

		box-sizing: border-box;

	}

	.form-contact tr {

		display: block;

		margin-bottom: 1.5em;

	}

	.form-contact th {

		padding: 5px 10px;

		background: #999;

		color: #fff;

	}

	.form-contact th,

	.form-contact td {

		display: list-item;

		width: auto;

		border: none;

	}

	.form-contact td textarea {

		width: 100%;

	}

}





/* 実績

-------------------- */

.works-index .eye-catch,

.works-archives .eye-catch {

   float: left;

    margin-right: 20px;

}

.works .post {

    position: relative;

}

.works .category {

    position: absolute;

    top: 2px;

    right: 0;

    display: inline-block;

}

.works .category a {

    display: inline-block;

    padding: 2px 15px;

    border: 1px solid #000;

    text-decoration: none;

    color: #000;

}

.works .bs-blog-tag {

    margin: -20px 0 20px;

}

.works-single .eye-catch {

    width: 280px;

}



/* ブログ

-------------------- */

.topics-index .eye-catch,

.topics-archives .eye-catch {

   float: left;

    margin-right: 20px;

}

.topics-single .eye-catch {

    width: 280px;

}