@charset "UTF-8";

/*===================================================
コンテンツ枠
===================================================*/
#contentsBox {
	box-sizing: border-box;
	display: table;
	width: 100%;
	max-width: 920px;
	background: url(../images/backugrade.gif) repeat-y 10px 0;
	padding: 0 10px 140px 10px;
	margin: 0 auto;
}

#sideMenu,
#mainBox {
	display: table-cell;
	text-align: left;
	vertical-align: top;
	padding-bottom: 30px;
}

#sideMenu {
	width: 180px;
	padding-right: 10px;
}

#mainBox {
	font-size: 90%;
	line-height: 1.5;
}

@media screen and ( max-width:825px ) {
#contentsBox,
#mainBox {
	display: block;
}

#contentsBox {
	background-image: none;
	padding-bottom: 50px;
}

#mainBox {
	padding-bottom: 0;
}

#sideMenu {
	display: none;
}
}

/*===================================================
サイドメニュー
===================================================*/
#sideMenu li {
	margin-bottom: 5px;
}

#sideMenu li a {
	display: block;
	width: 180px;
	height: 35px;
	text-align: left;
	text-indent: -999em;
	background-image: url(../images/osusume_bt.png);
	background-repeat: no-repeat;
}

#sideMenu li:first-child a {
	background-position: 0 0;
}
#sideMenu li:first-child a:hover {
	background-position: -180px 0;
}

#sideMenu li:nth-child(2) a {
	background-position: 0 -35px;
}
#sideMenu li:nth-child(2) a:hover {
	background-position: -180px -35px;
}

#sideMenu li:nth-child(3) a {
	background-position: 0 -70px;
}
#sideMenu li:nth-child(3) a:hover {
	background-position: -180px -70px;
}

#sideMenu li:nth-child(4) a {
	background-position: 0 -105px;
}
#sideMenu li:nth-child(4) a:hover {
	background-position: -180px -105px;
}

#sideMenu li:nth-child(5) a {
	background-position: 0 -140px;
}
#sideMenu li:nth-child(5) a:hover {
	background-position: -180px -140px;
}

/*===================================================
くらし方録
===================================================*/
/********** メインタイトル **********/
#mainTit {
	position: relative;
	display: block;
	width: 100%;
	height: 75px;
	background: url(../images/mainTit_bg.png) repeat-x center bottom;
	background-size: auto 85px;
	margin-bottom: 15px;
}

#mainTit_r {
    position: absolute;
    right: 10px;
    bottom: 8px;
	height: 85px;
}
#mainTit_r img {
    width: auto;
	height: 85px;
}

#mainTit_l {
    position: absolute;
    top: -5px;
    left: 0;
    height: 75px;
}
#mainTit_l img {
    width: auto;
	height: 85px;
}

@media screen and ( max-width:825px ) {
#mainTit {
	height: 53px;
	background-size: auto 53px;
}

#mainTit_r {
    right: 5px;
    height: 45px;
}
#mainTit_r img {
    height: 45px;
}

#mainTit_l {
    left: -5px;
    height: 53px;
}
#mainTit_l img {
    height: 53px;
}
}

/********** サブタイトル **********/
.subTit {
	font-size: 110%;
	line-height: 1;
	color: #fff;
	font-weight: 500;
    background-color: #007b3a;
	border-radius: 5px;
	padding: 7px;
	margin-bottom: 10px;
}


.subTit2 {
	line-height: 1;
	color: #52ae27;
	font-weight: 500;
	border-bottom: 1px solid #52ae27;
	padding-bottom: 3px;
	margin-bottom: 5px;
}

/********** くらし方録 **********/
#catalogBox,
.bookBox {
	margin-bottom: 15px;
}

#catalogBox dt,
.bookBox dt {
	float: left;
	width: 220px;
}
#catalogBox dt img,
.bookBox dt img {
	box-sizing: border-box;
	width: 100%;
	border: 1px solid #ccc;
}

#catalogBox dd,
.bookBox dd {
	margin-left: 230px;
}

@media screen and ( max-width:825px ) {
#catalogBox dt,
#catalogBox dd,
.bookBox dt,
.bookBox dd {
	float: none;
	width: 100%;
}

#catalogBox dt,
.bookBox dt {
	text-align: center;
	margin-bottom: 10px;
}

#catalogBox dt img,
.bookBox dt img {
	width: 80% !important;
	max-width: 415px;
}

#catalogBox dd,
.bookBox dd {
	margin-left: 0;
}
}

/********** くらし方録リンクボタン **********/
#kurashiDbBt,
.bookDbBt {
	width: 90%;
	margin: 10px auto 20px auto;
}

#kurashiDbBt a,
.bookDbBt a {
	display: block;
	font-size: 100%;
	line-height: 1;
	text-align: center;
	background-color: #ff4b00;
	border-radius: 10px;
	padding: 10px;
}
#kurashiDbBt a,
#kurashiDbBt a:visited,
#kurashiDbBt a:hover,
.bookDbBt a,
.bookDbBt a:visited,
.bookDbBt a:hover {
	color: #fff;
	text-decoration: none;
}
#kurashiDbBt a:hover,
.bookDbBt a:hover {
	-ms-filter: "alpha( opacity=50 )";
	filter: alpha( opacity=50 );
	opacity: 0.5;
}

@media screen and ( max-width:825px ) {
#kurashiDbBt,
.bookDbBt {
	width: 70%;
}
}

/********** 目次 **********/
#catalogBox dd li,
.bookBox dd li {
	position: relative;
	font-size: 90%;
	line-height: 1.3;
	border-bottom: 1px dashed #ccc;
	padding: 5px 5px 5px 20px;
}
#catalogBox dd li:before,
.bookBox dd li:before  {
	position: absolute;
	top: 5px;
	left: 5px;
	content: "●";
	font-size: 90%;
	margin-right: 2px;
}

#catalogBox dd li:nth-child(2n),
.bookBox dd li:nth-child(2n) {
    background-color: #fafafa;
}

/*===================================================
バックナンバー
===================================================*/

/********** リンクボタン **********/
#bnLink {
	width: 80%;
	margin: 0 auto 30px auto;
}

#bnLink a {
	display: block;
	font-size: 100%;
	line-height: 1;
	text-align: center;
	background-color: #52ae27;
	border-radius: 10px;
	padding: 10px;
}
#bnLink a,
#bnLink a:visited,
#bnLink a:hover {
	color: #fff;
	text-decoration: none;
}
#bnLink a:hover {
	-ms-filter: "alpha( opacity=50 )";
	filter: alpha( opacity=50 );
	opacity: 0.5;
}

@media screen and ( max-width:825px ) {
#bnLink {
	width: 70%;
}
}

/********** 一覧 **********/
#bnBox li {
	box-sizing: border-box;
	float: left;
	width: 16.66%;
	font-size: 90%;
	line-height: 1.1;
	text-align: center;
	padding: 0 10px 10px 10px;
}

#bnBox li a,
#bnBox li a:visited,
#bnBox li a:hover {
	text-decoration: none;
}
#bnBox li a:hover {
	-ms-filter: "alpha( opacity=50 )";
	filter: alpha( opacity=50 );
	opacity: 0.5;
}

#bnBox li img {
	box-sizing: border-box;
	display: block;
	width: 100%;
	max-width: 70px;
	border: 1px solid #ccc;
	margin: 0 auto 5px auto;
}

.how {
	font-size: 90%;
}

@media screen and ( min-width:826px ) {
#bnBox li br {
	display: none;
}
}

@media screen and ( max-width:500px ) {
#bnBox li {
	width: 25%;
	padding: 0 5px 10px 5px;
}
}