@CHARSET "UTF-8";
/******************************************************************************
 * マツミハウジング  エッセイ集用スタイル
 * WEB SITE ver.2017
 * RESPONSIVE
 * PC width min-width:769px
 * SP max-width: 768px(iPhone6+ ヨコイチまで)
******************************************************************************/
@import url(html5-doctor-reset-stylesheet.min.css);
@import url(base.css);

/******************************************************************************
/******************************************************************************
 * contents_page
******************************************************************************/
/** PC ***********************************************************************/
@media screen and (min-width:768px),print{
	body>article {
		background:#FFF;
	}
	body>article a {
		transition: all .3s;
	}
}
/** SMART PHONE **************************************************************/
@media screen and (max-width:767px){
	body>article {
		margin:0;
	}
	body>footer{
		margin-top:0;
	}
}

/******************************************************************************

 *一覧ページ
 
******************************************************************************/
/** PC ***********************************************************************/
@media screen and (min-width:768px),print{
	#column {
		width:960px;
		background: url(img/blog_bg.jpg) no-repeat right top;
		border:#9aaf58 solid 5px;
		background-size:100%;
		margin:50px auto 120px;
		padding:0 20px 30px;
	}
	#column>h2 {
		margin:90px auto 50px;
		text-align:center;
	}
	#column>h2>img {
		width:450px;
	}
	#column>figure {
		text-align:center;
		margin-bottom:30px;
	}
	#column>figure>img {
		width:150px;
		height:auto;
	}
	#column>p{
		text-align:center;
		font-size:17px;
		line-height:1.7;
	}
	#column>p>span{ 
		font-weight:bold; 
		display:block;
		margin:10px 0;
	}
	#column>div{
		margin-top:70px;
		display: -ms-flexbox;
		display: flex;
		-ms-flex-pack: justify;
		justify-content: space-between;
	}
	#column>div>ul{
		width:50%;
		padding-left:20px;
	}
	#column>div>ul>li>a>span{
	    color:#029d23;
	}
	#column>div>ul>li>a{
		color:#333;
		font-size:17px;
		font-weight:bold;
		line-height:2.3;
		position:relative;
		padding-left:25px;
	}
	#column>div>ul>li>a:before {
	    display: block;
	    content: "";
	    position: absolute;
	    top: 50%;
	    left: 2px;
	    width: 16px;
	    height: 16px;
	    margin-top: -8px;
	    border-radius: 50%;
	    -webkit-border-radius: 50%;
	    -moz-border-radius: 50%;
	    background: #aec36a;
	}
	#column>div>ul>li>a:after {
	    display: block;
	    content: "";
	    position: absolute;
	    top: 50%;
	    left: 8px;
	    width: 0;
	    height: 0;
	    margin-top: -5px;
	    border: 5px solid transparent;
	    border-left: 5px solid #fff;
	}
}

/** TABLET & SMART PHONE *****************************************************/
@media screen and (max-width:767px){
	#column {
		padding: 50px 10px 20px;
		background: url(img/blog_bg.jpg) no-repeat right top #FFF;
		background-size:100%;
		border:#9aaf58 solid 5px;
		margin:20px 0 20px;
	}
	#column>h2 {
		text-align:center;
		margin-bottom:26px;
	}
	#column>h2>img{
		width:86%;
		max-width:360px;
	}
	#column>figure {
		text-align:center;
		margin-bottom:30px;
	}
	#column>figure>img {
		width:120px;
		height:auto;
	}
	#column>p{
		text-align:center;
		font-size:17px;
		line-height:1.7;
	}
	#column>p>span{
		font-weight:bold; 
		display:block;
		margin:10px 0;
	}
	#column>div{
		margin-top:40px;
	}
	#column>div>ul.panel_hideContent{
		display:none;
	}
	#column>div>ul>li{
		margin-bottom:20px;
	}
	#column>div>ul>li>a>span{
	    color:#029d23;
	}
	#column>div>ul>li>a{
		color:#333;
		letter-spacing:0;
		position: relative;
		display:block;
		font-size:18px;
		font-weight:bold;
		line-height:1.3;
		padding-left:25px;
	}
	#column>div>ul>li>a:before {
	    display: inline-block;
	    content: "";
	    position: absolute;
	    top: 4px;
	    left: 2px;
	    width: 16px;
	    height: 16px;
	    border-radius: 50%;
	    -webkit-border-radius: 50%;
	    -moz-border-radius: 50%;
	    background: #aec36a;
	}
	#column>div>ul>li>a:after {
	    display: block;
	    content: "";
	    position: absolute;
	    top: 7px;
	    left: 8px;
	    width: 0;
	    height: 0;
	    border: 5px solid transparent;
	    border-left: 5px solid #fff;
	}	
}

/******************************************************************************

 * エッセイ集コンテンツページ
 
******************************************************************************/
/******************************************************************************

 * MainBox
 
******************************************************************************/
/** PC ***********************************************************************/
@media screen and (min-width:768px),print{
	#MainBox{
		width: 900px;
		margin:0 auto 80px;
		background:#FFF3E7 url(../img/column/bg.jpg) top center no-repeat;
		padding: 20px 30px 80px 40px;
		overflow:hidden;
		margin-top: 30px;
	}
	#MainBox>#HeadPhoto{
		margin:70px auto 90px;
		text-align:center;
		padding:0 20px 0 0;
	}
	#MainBox>#HeadPhoto>img{
		width:450px;
	}
}
/** SMART PHONE **************************************************************/
@media screen and (max-width:767px){
	#MainBox{
		background:#FFF3E7 url(../img/column/bg.jpg) top center no-repeat;
		background-size: 100%;
		padding:60px 15px 100px;
	}
	#MainBox>#HeadPhoto{
		text-align:center;
		margin-bottom:36px;
	}
	#MainBox>#HeadPhoto>img{
		width:86%;
		max-width:360px;
	}

	#MainBox>p{
		font-size: 24px;
		font-weight:bold;
		text-align:center;
		padding:15px 0 0 0;
		margin-bottom:30px;
	}
	#MainBox>p>a{
		color:#333;
	}
	#MainBox>h2>a:hover{
		text-decoration: none;
	}
}

/******************************************************************************

 * ArticleBox
 
******************************************************************************/
body>article>#MainBox>#ArticleBox{ color:#333;}
/* 記事の文字などの設定 */
#ArticleBox>div p,#ArticleBox>div h2{
	text-indent: 1.0em;
}
/* hr段落 */
#ArticleBox>div>hr{
	border: none;
}
/** PC ***********************************************************************/
@media screen and (min-width:768px),print{
	#ArticleBox{
		float:left;
		width: 560px;
		margin-top:-175px;
		padding-top:185px;
	}
	#ArticleBox>h1{
		font-size: 28px;
		line-height: 1.3;
		border-bottom: 1px solid #666;
		padding: 0 0 10px 5px;
		letter-spacing:1px;
		margin-bottom:10px;
	}
	#ArticleBox>h1>span.new-house2{letter-spacing:-0.9px;}

	/* 記事の文字などの設定 */
	#ArticleBox>div p,
	#ArticleBox>div h2{
		font-size: 19px;
		line-height:2.0;
		letter-spacing:1px;
	}
	#ArticleBox>div>p>span{
		font-weight:bold;
	}
	#ArticleBox>div>p>span.txt23{
		font-size:23px;
	}
	#ArticleBox>div>hr{
		margin-bottom: 30px;
	}
	/*記事リンクの色設定*/
	#ArticleBox>div>p>a{
		color:#0B308E;
		text-decoration: underline;
	}
	#ArticleBox>div>p>a:hover{
		color:#3769CC;
	}
	/*次、前へ記事を送るメニュー*/
	#ArticleBox>#pageNavi{ margin-top:50px;}
	#pageNavi>ul{
		display: -ms-flexbox;
		display: flex;
		-ms-flex-pack: justify;
		justify-content: space-between;
		width: 100%;
	}
	#pageNavi>ul>li{
		width: 50%;
	}
	#pageNavi>ul>li a{
		font-size: 20px;
		color:#4F8A57;
		text-decoration: none;
		line-height: 1.5;
		letter-spacing:1px;
	}
	#pageNavi>ul>li a:hover{
		color:#3769CC;
	}
	#pageNavi>ul>li.prev{ text-align:left; margin-right:auto; border-right: 1px solid #999; padding-right:10px;}
	#pageNavi>ul>li.next{ text-align:right; margin-left:auto; padding-left:10px;}
}
/** SMART PHONE **************************************************************/
@media screen and (max-width:767px){
	#ArticleBox{
		width:100%;
		margin-top:-112px;
		padding-top:122px;
	}
	#ArticleBox>h1{
		position:relative;
		font-size: 20px;
		line-height: 1.3;
		border-bottom: 1px solid #666;
		padding: 0 0 5px 5px;
		letter-spacing: 1px;
		max-width: 560px;
		margin: 0 auto 5px;
	}

	/*記事の文字などの設定*/
	#ArticleBox>div{
		max-width: 560px;
		margin:10px auto 0;
	}
	#ArticleBox>div p,
	#ArticleBox>div h2{
		font-size: 18px;
		line-height:1.7;
		letter-spacing:1px;
	}
	#ArticleBox>div>p>span{
		font-weight:bold;
	}
	#ArticleBox>div>p>span.txt23{
		font-size:20px;
	}
	#ArticleBox>div>hr{
		margin-bottom: 20px;
	}
	#ArticleBox>div>figure>img{
		width:100%;
		margin:20px 0;
	}
	/*記事リンクの色設定*/
	#ArticleBox>div>p>a{
		color:#0B308E;
		text-decoration: underline;
		display:block;
		width: 100%;
		word-break:break-all;
	}
	#ArticleBox>div>p>a:hover{
		color:#3769CC;
	}
	/*次、前へ記事を送るメニュー*/
	#ArticleBox>#pageNavi{ margin-top:30px;}
	#pageNavi>ul{
		display: -ms-flexbox;
		display: flex;
		-ms-flex-align: center;
		align-items: center;
		-ms-flex-pack: justify;
		justify-content: space-between;
		width: 100%;
	}
	#pageNavi>ul>li{
		width: 45%;
	}
	#pageNavi>ul>li a{
		display: block;
		background:#FFF;
		text-align:center;
		font-size: 20px;
		font-weight:bold;
		color:#4F8A57;
		line-height: 1.5;
		letter-spacing:1px;
		padding-top: 5px;
		height: 44px;
		border: 1px solid #4F8A57;
	}
	#pageNavi>ul>li a:hover{
		text-decoration: none;
	}
	#pageNavi>ul>li a>span,
	#pageNavi>ul>li a>br{ display:none;}
	#pageNavi>ul>li.prev{ text-align:left; margin-right:auto;}
	#pageNavi>ul>li.next{ text-align:right; margin-left:auto;}
}

/******************************************************************************

 * SideMenu
 
******************************************************************************/
	body>article>#MainBox>#SideMenu{ color:#333;}
/** PC ***********************************************************************/
@media screen and (min-width:768px),print{
	#SideMenu{
		float:right;
		width:230px;
		padding-top:26px;
	}
	#SideMenu>div:not(#picture){
		clear:both;
		margin-bottom:50px;
	}
	#SideMenu>div:not(#picture)>ul:not(.panel_hideContent){
		border-top: 1px dashed #CCCCCC;
	}
	#SideMenu>div:not(#picture)>ul>li{
		border-bottom: 1px dashed #CCCCCC;
	}
	#SideMenu>div:not(#picture)>ul>li:not(.on)>a{
		color:#333;
		position: relative;
		display:block;
		font-size:15px;
		font-weight:bold;
		line-height:1.3;
		letter-spacing: 1px;
		padding: 11px 0 10px 29px;
	}
	.panel>h2{
		color:#8fa645;
		font-size:20px;
		margin-bottom:10px;
	}
	/*メニュー*******************************/
	.panel>ul.panel_hideContent{
		display:none;
	}
	.panel>ul>li.on>a{
		color:#8fa645;
		position: relative;
		display:block;
		font-size:15px;
		font-weight:bold;
		line-height:1.3;
		letter-spacing: 1px;
		padding: 11px 0 10px 29px;
	}
	.panel>ul>li.on{
		background:#FFF;
	}
	.panel>ul>li>a:before {
	    display: block;
	    content: "";
	    position: absolute;
	    top: 11px;
	    left: 5px;
	    width: 16px;
	    height: 16px;
	    border-radius: 50%;        /* CSS3草案 */ 
	    -webkit-border-radius: 50%;    /* Safari,Google Chrome用 */ 
	    -moz-border-radius: 50%;   /* Firefox用 */ 
	    background: #aec36a;
	}
	.panel>ul>li>a:after {        /*「after要素」で三角 */
	    display: block;
	    content: "";
	    position: absolute;
	    top: 14px;
	    left: 11px;
	    width: 0;
	    height: 0;
	    border: 5px solid transparent;        /*top right bottom を透明化 */
	    border-left: 5px solid #fff;
	}	
	.panel>ul>li>a:hover{
		background:#FFF;
		cursor:pointer;
		text-decoration:none;
	}
	.panel>p{
		display:table;
		margin:20px auto 0;
		border-radius: 20px;
		background:#4F8A57;
		color:#FFF;
		font-size:15px;
	}
	.panel>p>a{
		display:block;
		color:#FFF;
		padding:8px 40px 8px 30px;
		position:relative;
	}
	.panel>p>a:after{
		display: inline-block;
		content: "";
		position: absolute;
		top: 50%;
		right: 15px;
		width: 7px;
		height: 7px;
		margin: -6px 0 0 0;
		border-top: 2px solid #fff;
		border-right: 2px solid #fff;
		-webkit-transform: rotate(45deg);
				transform: rotate(45deg);
	}
	
	/*松井修三様　写真********************************/
	#picture{
		background:#FFF;
		padding: 10px;
		overflow:hidden;
		max-width: 400px;
		margin-top:50px;
	}
	#picture>div{
		height:auto;
	}
	#picture>div>img{
		width:100%;
		height:auto;
	}
	#picture>ul{
		padding-top: 10px;
	}
	#picture>ul>li{
		padding-left: 5px;
		font-size: 11px;
		line-height:1.4;
		padding-bottom: 10px;
		display:table;
	}
	#picture>ul>li:first-child{
		font-size: 16px;
		font-weight:bold;
	}
	#picture>ul>li>span{
		display: table-cell;
		vertical-align:text-top;
		text-align:left;
	}
	#picture>ul>li>span.detail_left{
		width: 50px;
	}
	#picture>ul>li>span>em{
		display:block;
		font-size:14px;
		margin:8px 0 2px;
		font-weight:bold;
	}
	#picture>ul>li>span>em:first-of-type{margin-top:0;}
}
	
/** SMART PHONE **************************************************************/
@media screen and (max-width:767px){
	#SideMenu{
		margin: 30px auto 150px;
		max-width: 640px;
	}
	#SideMenu>div:not(#picture){
		clear:both;
		margin-bottom:30px;
		background:#FFF;
	}
	#SideMenu .panel_hideContent{
		border-top: 1px dashed #CCCCCC;
	}
	#SideMenu>div:not(#picture)>ul>li{
		border-bottom: 1px dashed #CCCCCC;
		padding:0 10px;
	}
	#SideMenu>div:not(#picture)>ul>li:last-child{
		border-bottom:none;
	}
	#SideMenu>div:not(#picture)>ul>li:not(.on)>a{
		color:#333;
		position: relative;
		display:block;
		font-size:18px;
		font-weight:bold;
		line-height:1.3;
		letter-spacing: 1px;
		padding: 12px 0 12px 26px;
	}

	/*投稿*******************************/
	.panel>ul>li.on>a{
		color:#8fa645;
		position: relative;
		display:block;
		font-size:18px;
		font-weight:bold;
		line-height:1.3;
		letter-spacing: 1px;
		padding: 12px 0 12px 26px;
	}
	.panel>ul>li>a:before {
	    display: block;
	    content: "";
	    position: absolute;
	    top: 15px;
	    left: 2px;
	    width: 16px;
	    height: 16px;
	    border-radius: 50%;        /* CSS3草案 */ 
	    -webkit-border-radius: 50%;    /* Safari,Google Chrome用 */ 
	    -moz-border-radius: 50%;   /* Firefox用 */ 
	    background: #aec36a;
	}
	.panel>ul>li>a:after {        /*「after要素」で三角 */
	    display: block;
	    content: "";
	    position: absolute;
	    top: 18px;
	    left: 8px;
	    width: 0;
	    height: 0;
	    border: 5px solid transparent;        /*top right bottom を透明化 */
	    border-left: 5px solid #fff;
	}	
	.panel>p{
		display:none;
	}

	
	/*松井修三様　写真*/
	#picture{
		background:#FFF;
		padding: 10px;
		overflow:hidden;
		max-width: 400px;
		margin:30px auto 0;
	}
	#picture>div{
		width: 100%;
		max-width:239px;
		height:auto;
		margin:0 auto 15px;
	}
	#picture>div>img{
		width:100%;
		height:auto;
	}
	#picture>ul{
		width:100%;
		vertical-align: middle;
	}
	#picture>ul>li{
		padding-left: 5px;
		font-size: 14px;
		line-height:1.4;
		padding-bottom: 10px;
		display:table;
	}
	#picture>ul>li:first-child{
		font-size:16px;
		font-weight:bold;
	}
	#picture>ul>li>span{
		display: table-cell;
		vertical-align:text-top;
		text-align:left;
	}
	#picture>ul>li>span.detail_left{
		width: 50px;
	}
	#picture>ul>li>span>em{
		display:block;
		font-size:16px;
		margin:8px 0 2px;
		font-weight:bold;
	}
	#picture>ul>li>span>em:first-of-type{margin-top:0;}	
}