@charset "utf-8";
/* ------------------------------
　えんてつ住まいナビ　一覧
------------------------------ */
/*-- メイン画像 --*/
.mainimgTop:not(.blogListMain) {
    height: auto;
    background-color: transparent;
}
.mainimgTop.blogListMain{
    background: url("../img/blog/blog_main.jpg") no-repeat center 0 / cover;
}
.mainimgTop:not(.blogListMain) h1 {
    padding: 60px 0 10px;
    background-color: none;
    font-size: 3.0rem;
}
.mainimgTop.blogListMain h1{
    background: rgba(255,255,255,.85);
    padding: 50px 55px;
}
.mainimgTop h1 p{
    font-size: 3.0rem;
    padding: 0 30px;
}
.mainimgTop h1 p:first-child{
    padding-bottom: 20px;
    border-bottom: 1px solid #5C5C5C;
}
.mainimgTop h1 p:last-child{
    font-size: 1.5rem;
    padding-top: 20px;
}
/*↓↓↓20201218 titleタグ変更↓↓↓*/

.mainimgTop:not(.blogListMain) .title_img {
    padding: 60px 0 10px;
    background-color: transparent;
	font-size: 3.0rem;
	font-family: "游明朝" , "Yu Mincho" , "游明朝体" , "YuMincho" , "ヒラギノ明朝 Pro W3" , "Hiragino Mincho Pro" , "HiraMinProN-W3" , "HGS明朝E" , "ＭＳ Ｐ明朝" , "MS PMincho" , serif;
    line-height: 1.2;
}

h1.blog_tilte {
	font-family: 游明朝, "Yu Mincho", 游明朝体, YuMincho, "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", HiraMinProN-W3, HGS明朝E, "ＭＳ Ｐ明朝", "MS PMincho", serif;
    font-size: 2.4rem;
    font-weight: bold;
    line-height: 1.4;
    padding-bottom: 17px;
    margin-bottom: 30px;
    position: relative;
	border-bottom: 1px solid rgb(0, 51, 102);
	background : none;
	text-align:left;
}

h1.blog_tilte:before {
    content: '';
    position: absolute;
    bottom: -3px;
    left: 0;
    width: 50px;
    height: 3px;
    background: #003366;
}

/*↑↑↑20201218 titleタグ変更↑↑↑*/

/*-- MAIN　一覧 --*/
.main .blogList{
    border-bottom:  1px dotted #C9CACB;
    margin-bottom: 20px;
}
.main .blogList li{
    margin-bottom: 70px;
}

.main .blogList li img{
    margin-bottom: 20px;
}
.main .date{
    display: inline-block;
    margin-right: 10px;
    margin-bottom: 15px;
    font-size: 1.4rem;
    font-weight: bold;
    color: #656261;
}
.main .category{
    display: inline-block;
    margin-bottom: 15px;
    font-size: 1.4rem;
    font-weight: bold;
    color: #656261;
}
.main .category span{
    padding: 0 15px;
    border-right: 1px solid #656261;
}
.main .category span:first-child{
    padding-left: 0;
}
.main .category span:last-child{
    padding-right: 0;
    border-right: none;
}
.main .blogList li .textBox .title{
    font-weight: bold;
    font-size: 2.0rem;
    line-height: 1.5;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom:  1px dotted #C9CACB;
}
.main .blogList li .textBox .text{
    margin-bottom: 20px;
}
/* 前次 */
.articleNavi{
    display: flex;
    justify-content:space-between;
}

.articleNavi li.prev{
    text-align: right;
}
.articleNavi li.next a,
.articleNavi li.prev a{
    position: relative;
    font-weight: bold;
    color: #656261;
}
.articleNavi li.next a:hover ,
.articleNavi li.prev a:hover {
	color: #CC4B1F;
}
.articleNavi li.next a{
    padding-left: 20px;
}
.articleNavi li.prev a{
    padding-right: 20px;
}
.articleNavi li.next a::before,
.articleNavi li.prev a::before,
.articleNavi li.next a::after,
.articleNavi li.prev a::after{
    content: "";
    display: block;
    position: absolute;
    margin: auto;
}
.articleNavi li.next a::before,
.articleNavi li.prev a::before{
    width: 16px;
    height: 16px;
    border-radius: 100%;
    background-color: #CC4B1F;
    top: 0;
    bottom: 0;
}
.articleNavi li.next a::before{
    left: 0;
}
.articleNavi li.prev a::before{
    right: 0;
}
.articleNavi li.prev a::after{
    width: 4px;
    height: 4px;
    border-top: 2px solid #fff;
    border-right: 2px solid #fff;
    transform: rotate(45deg);
    top: 0;
    bottom:0;
	right: 6px;
}
.articleNavi li.next a::after{
    width: 4px;
    height: 4px;
    border-bottom: 2px solid #fff;
    border-left: 2px solid #fff;
    transform: rotate(45deg);
    top: 0;
    bottom:0;
	left: 6px;
}
/*-- サイド --*/
.side .sideBox{
    text-align: left;
    margin-bottom: 20px;
}
.side .sideBox .sideTitle{
    font-size: 1.8rem;
    font-weight: bold;
    color: #fff;
    background-color: #036;
    padding: 10px 15px;
}

/*-- タグ --*/
.side .sideBox .tagList {
    padding-left: 15px;
}
.side .sideBox .tagList li a{
    position: relative;
    display: block;
    color: #000;
    padding-left: 10px;
}
.side .sideBox .tagList li a:before {
    content: "";
    position: absolute;
    top: 8px;
    left: 0;
    border: 4px solid transparent;
    border-left: 4px solid #CC4B1F;
  }
  
.side .sideBox .tagList li a:hover{
    color: #D66F4C;
}

/*-- 人気の記事 --*/
.side .sideBox .articleList {
    padding-left: 15px;
}
.side .sideBox .articleList li{
    margin-bottom: 30px;
}
.side .sideBox .articleList li a{
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    color: #000;
    padding-left: 10px;
}
.side .sideBox .articleList li a:before {
    content: "";
    position: absolute;
    top: 8px;
    left: 0;
    border: 4px solid transparent;
    border-left: 4px solid #CC4B1F;
}
.side .sideBox .articleList li a:hover{
    color: #D66F4C;
}
.side .sideBox .articleList li a .textBox{
    width: 55%;
	max-height: 72px
}
.side .sideBox .articleList li a .imgBox{
    width: 40%;
}
/*-- アーカイブ --*/
.side .sideBox .archiveList li{
    position: relative;
}
.side .sideBox .archiveList > li{
    border-bottom: 1px dotted #A9ACAD;
}

.side .sideBox .archiveList li a.link_year {
    position: relative;
    display: block;
    width: 100%;
    padding: 13px 0 13px 40px;
    background-color: #F3F3F3;
    font-weight: bold;
    color: #656261;
}
.side .sideBox .archiveList li a.link_year:hover{
    color: #D66F4C;
}
.monthList{
    display: none;
}
.side .sideBox .archiveList li .monthList > li{
    border-top: 1px dotted #A9ACAD;
}
.side .sideBox .archiveList li a.btn_opener_year.on + .monthList{
    display: block;
}
.side .sideBox .archiveList li .monthList li a.link_month{
    position: relative;
    display: block;
    padding: 13px 0 13px 60px;
    font-weight: bold;
    color: #656261;
}
.side .sideBox .archiveList li .monthList li a.link_month:hover{
    color: #D66F4C;
}
.side .sideBox .archiveList li .monthList li ul{
    margin-left: 60px;
}
.side .sideBox .archiveList li .monthList li ul li{
    margin-bottom: 10px;
}
.side .sideBox .archiveList li .monthList li ul li a{
    display: block;
    padding-left: 10px;
    color: #3F3B3A;
}
.side .sideBox .archiveList li .monthList li ul li a::before{
    content: "";
    position: absolute;
    top: 8px;
    left: 0;
    border: 4px solid transparent;
    border-left: 4px solid #CC4B1F;
}
/*-- アーカイブ アイコン --*/
.side .sideBox .archiveList li a.link_year::before,
.side .sideBox .archiveList li .monthList li a.link_month::before,
.side .sideBox .archiveList li a.link_year::after,
.side .sideBox .archiveList li .monthList li a.link_month::after{
    content: "";
    display: block;
    position: absolute;
    margin: auto;
}
.side .sideBox .archiveList li a.link_year::before,
.side .sideBox .archiveList li .monthList li a.link_month::before{
    width: 16px;
    height: 16px;
    border-radius: 100%;
    background-color: #CC4B1F;
    top: 0;
    bottom: 0;
}
.side .sideBox .archiveList li a.link_year::before{
    left: 20px;
}
.side .sideBox .archiveList li .monthList li a.link_month::before{
    left: 40px;
}
.side .sideBox .archiveList li a.link_year::after,
.side .sideBox .archiveList li .monthList li a.link_month::after{
    width: 4px;
    height: 4px;
    border-top: 2px solid #fff;
    border-right: 2px solid #fff;
    transform: rotate(45deg);
    top: 0;
    bottom:0;
}
.side .sideBox .archiveList li a.link_year::after{
    left: 24px;
}
.side .sideBox .archiveList li .monthList li a.link_month::after{
    left: 44px;
}
/*-- アーカイブ プラスマイナス --*/
.side .sideBox .archiveList li a.btn_opener_year,
.side .sideBox .archiveList li .monthList li a.btn_opener_month{
    position: absolute;
    right: 0;
    top: 0;
    width: 50px;
    height: 50px;
}
.side .sideBox .archiveList li a.btn_opener_year::before,
.side .sideBox .archiveList li a.btn_opener_year:not(.on)::after,
.side .sideBox .archiveList li .monthList li a.btn_opener_month::before,
.side .sideBox .archiveList li .monthList li a.btn_opener_month:not(.on)::after{
    content: "";
    display: block;
    position: absolute;
    right: 0;
    left: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    background-color: #CC4B1F;
}
.side .sideBox .archiveList li a.btn_opener_year::before,
.side .sideBox .archiveList li .monthList li a.btn_opener_month::before{
    width: 10px;
    height: 2px;
}
.side .sideBox .archiveList li a.btn_opener_year:not(.on)::after,
.side .sideBox .archiveList li .monthList li a.btn_opener_month:not(.on)::after{
    width: 2px;
    height: 10px;
}
.main .blogList li .title {
	max-height: 71px;
}
.main .blogList li .text {
	max-height: 48px;
}

#same_content_list .title {
	max-height: 59px;
}
@media screen and (min-width:768px){
	.articleNavi li.next{
		min-width: 110px;
	}
	.articleNavi li.prev{
		min-width: 95px;
	}
	
    /*-- メイン画像 --*/
    .mainimgTop.blogListMain{
        height: 560px;
    }

    .sidecon .side{
        top: 60px;
    }

    .main .blogList li{
        width: 48%;
        float: left;
    }
    .main .blogList li:nth-child(odd){
        margin-right: 2%;
    }
	.main .blogList li:nth-child(2n+1) {
		clear: both;
	}    
}
@media screen and (max-width:767px){
    .contentsTop,
    .contentsPage{
        margin: 0;
        padding-top: 0;
    }
    .mainimgTop.blogListMain h1{
        padding: 20px;
    }
    .mainimgTop:not(.blogListMain) h1 {
        padding: 60px 0 40px;
        font-size: 2.2rem;
	}
	
	.mainimgTop:not(.blogListMain) .title_img {
        padding: 60px 0 40px;
        font-size: 2.2rem;
	}
	
    .mainimgTop h1 p{
        font-size: 2.2rem;
    }
    .mainimgTop h1 p:first-child{
        padding-bottom: 10px;
    }
    .mainimgTop h1 p:last-child{
        padding-top: 10px;
    }
    .side01{
        margin-bottom: 40px;
    }
    .side .sideBox:last-child{
        margin-bottom: 0;
    }
    .side .sideBox  .tagList,
    .side .sideBox .articleList{
        padding: 0 5%;
    }
    .side .sideBox  .tagList{
        margin-bottom: 20px;
    }
    .side .sideBox .archiveList li a.link_year{
        padding-left: calc(5% + 20px);
    }
    .side .sideBox .archiveList li a.link_year::before{
        left: 5%;
    }
    .side .sideBox .archiveList li a.link_year::after{
        left: calc(5% + 4px);
    }
    .side .sideBox .archiveList li .monthList li a.link_month{
        padding-left: calc(5% + 40px);
    }
    .side .sideBox .archiveList li .monthList li a.link_month::before{
        left: calc(5% + 20px);
    }
    .side .sideBox .archiveList li .monthList li a.link_month::after{
        left: calc(5% + 24px);
    }
    .side .sideBox .archiveList li .monthList li ul{
        margin-left: calc(5% + 40px);
        margin-right: 5%;
    }
    .main{
        margin: 0 5% 20px;
    }
    /* 前次 */
    .articleNavi{
        flex-wrap: wrap;
        justify-content: center;
    }
    .articleNavi .next{
        order: 1;
        width: 50%;
    }
    .articleNavi .prev{
        order: 2;
        width: 50%;
    }
    .articleNavi .btn{
        margin-top: 20px;
        order: 3;
    }
}

/* ------------------------------
　えんてつ住まいナビ　ブログ記事
------------------------------ */
.contentsPage .main .date,
.contentsPage .main .category{
    margin-bottom: 0;
}
.contentsPage .main .cms_block{
    margin-bottom: 40px;
}
.contentsPage .articleNavi{
    padding-top: 40px;
    border-top: 1px dotted #C9CACB ;
    align-items: baseline;
}

#content_list, #box_control, #latest_list > ul, #category_list > ul , #populer_list > ul, #same_content_list {
    opacity: 0;
}

#box_control {
	margin-bottom: 60px;
}

.contentsPage .main .listBox > ul > li {
	float: left;
	width: 280px;
}
.contentsPage .main .listBox > ul > li:nth-child(2) {
	margin: 0 30px;
}

.contentsPage .main .listBox > ul > li a {
	text-decoration: none;
	display: block;
	color: #000;
}
.contentsPage .main .listBox .category_list {
	color: #656261;
}

.contentsPage .main ul .title {
	font-weight: bold;
	font-size: 1.6rem;
	line-height: 1.5;
	margin-bottom: 20px;
	padding-bottom: 10px;
	border-bottom: 1px dotted #C9CACB;
}
.contentsPage .main ul.category_list li {
	display: inline-block;
}

.contentsPage .main ul.category_list li + li::before {
    display: inline-block;
    content: "｜";

}

.listBox {
	margin-top: 120px;
}
.listBox h2 {
    font-family: "Yu Gothic",YuGothic,"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","メイリオ",Meiryo,"ＭＳ Ｐゴシック","MS PGothic",sans-serif;
    font-size: 2rem;
    line-height: 1.2;
    text-align: center;
    border-bottom: 0;
	color: #656261;
	margin-bottom: 15px;
}

.listBox h2::before {
    content: "";
    border-bottom: solid 1px #A9ACAD;
    margin-bottom: 40px;
    width: 33%;
    display: block;
    z-index: 0;
	height: 3px;
	background: none;
	position: absolute;
	left: 0;
	top: 10px;
}

.listBox h2::after {
    content: "";
    border-bottom: solid 1px #A9ACAD;
    margin-bottom: 40px;
    width: 33%;
    display: block;
	position: absolute;
	right: 0;
	top: 10px;
}
@media screen and (max-width:767px){
	.contentsPage .main .listBox > ul > li {
		float: none;
		width: 100%;
		margin-bottom: 40px;
	}
	.contentsPage .main .listBox > ul > li:nth-child(2) {
		margin: 0;
		margin-bottom: 40px;
	}
	.listBox h2::before {
		width: 11%;
	}

	.listBox h2::after {
		width: 11%;
	}
}

.sideBoxOuter.on {
	display: block;
}

/* ------------------------------
　静岡県西部エリアガイド
------------------------------ */
.mainimgTop.blogListMain.areaGuide{
    background: url("../img/areaguide/areaguide_main.jpg") no-repeat center 0 / cover;
}
.area_bnr {
    margin-top: 80px;
    margin-bottom: 40px;
}
.area_bnr ul li {
    display: block;
    margin: auto;
}
@media print,screen and (min-width:768px) {
    .area_bnr ul {
        display: flex;
        justify-content: space-between;
    }
    .area_bnr ul li {
        width: 432px;
    }
}
@media screen and (max-width:767px) {
    .area_bnr ul li {
        width: 100%;
    }
    .area_bnr ul li:not(:last-child) {
        margin-bottom: 20px;
    }
}
/* ------------------------------
　ブログ　テーブル
------------------------------ */
@media print,screen and (min-width:768px) {
    .contents .main  table {
        width: 100% !important;
    }
    .contents .main table tbody > tr > th:first-child {
        width: 22%;
    }
    /*scroll*/
    .scroll {
		overflow: visible !important;
	}
}
@media screen and (max-width:767px) {
    .contents .main .cms_text:not(.scroll) table {
        width: 100% !important;
    }
    .contents .main .cms_text:not(.scroll) table tbody > tr > th,
    .contents .main .cms_text:not(.scroll) table tbody > tr > td {
        display: block;
        width: 100%;
    }
    /*scroll*/
    /*.contents .main .scroll table {
		width: 770px !important;
	}*/
    .contents .main .scroll table tbody > tr > th {
        min-width: 200px;
    }
    .contents .main .scroll table tbody > tr > td {
        min-width: 250px;
    }
}