@charset = "utf-8";

img{
    width: 100%;
    height: auto;
}

body{
    line-height: 1.5;
    letter-spacing: 1px;
}

#sidebar #wpzoom_instagram_widget-3{
    display: none;
}

/* ページネーション */
.m-pagenation__body{
    display: flex;
    justify-content: center;
    margin-top: 80px;
}

.m-pagenation__body li {
    border: 1px solid #999;
    margin: 5px;
    width: 40px;
    height: 40px;
    box-sizing: border-box;
    text-align: center;
    line-height: 40px;
    font-size: 16px;
}

.m-pagenation__body li.-current {
    color: #fff;
    background: #4c444d;
}

.m-pagenation__body li a{
    display: block;
}

@media screen and (max-width:480px){
    .m-pagenation__body li{
        font-size: 18px;
    }
}
/* ページネーション */

/* パンクズリスト */
.pankuzu {
	color: #4c444d;
    text-align: left;
	box-sizing: border-box;
	padding: 0 20px;
    margin-bottom: 30px;
	width: 100%;
    font-size: 16px;
}

.pankuzu a{
    color: #4c444d;
}
/* パンクズリスト */

/* カテゴリープルダウン */
#article .category {
    text-align: center;
	box-sizing: border-box;
	padding: 0 20px;
    margin-bottom: 30px;
	width: 100%;
}

#article .category select {
    background: #fff;
    padding: 10px;
    font-size: 18px;
    width: 90%;
    max-width: 500px;
}
/* カテゴリープルダウン */

#main section#article{
    padding: 0;
}

#main #article .flex{
    justify-content: space-between;
	flex-wrap: wrap;
}

#main #article .flex:after{
    content: "";
    display: block;
    width: 32%;
}

.w1200{
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    padding: 0 3.5%;
    box-sizing: border-box;
}

#main.under #fv div p.fv_txt a{
    color: #4c444d;
}

#main.under h2 a{
    color: #fff;
}

#main #article main{
    width: calc(75% - 40px);
    padding: 0 20px;
}

#main #article .side{
	background: #fff;
    width: calc(25% - 40px);
/*    border-left: 1px solid #4c444d;*/
    padding: 0 20px 30px;
    box-shadow: 0px 0px 4px rgb(0 0 0 / 20%);
}

.archive #main #article main,
.blog #main #article main{
    width: calc(100% - 40px);
    padding: 0 20px;
}

.archive #main #article .side,
.blog #main #article .side{
    display: none;
}

#main #sidebar h2{
    background-color: #fff !important;
    padding: 0 !important;
    font-size: 20px !important;
    line-height: 2 !important;
    letter-spacing: 0.5px !important;
    color: #4c444d !important;
    text-align: center !important;
    margin-bottom: 20px !important;
    border-bottom: 1px solid #4c444d !important;
    padding-bottom: 10px !important;
}

#main #sidebar h2::after{
    background: none !important;
    margin-top: 0 !important;
    height: 0 !important;
}

#main #sidebar ul li{
    font-size: 16px;
}

#main #sidebar ul li a{
    display: inline-block;
}

#main .format-standard {
    padding: 18px 20px;
    border: 1px solid #4c444d;
    margin-bottom: 30px;
    width: 32%;
    box-sizing: border-box;
    background: #fff;
}

#main .format-standard .content{
    order: 2;
    width: 100%;
}

#main .format-standard .thumnails{
	display: block;
}

#main .format-standard h1{
    font-size: 19px;
    line-height: 3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
}

#main .format-standard h1 a{
    color: #4c444d;
}

#main .format-standard .postdate{
    font-size: 18px;
    order: 1;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    /* text-align: right; */
}

#main .format-standard .postdate span{
    display: none;
}

#main .format-standard .postdate time{
    order: 1;
    font-size: 14px;
    margin-bottom: 10px;
    color: #4c444d;
    margin-left: auto;
}

#main .format-standard .postdate a{
    order: 2;
    text-align: center;
    margin: 0 auto 10px;
    color: #fff;
    background: #4c444d;
    padding: 18px;
    width: 100%;
    max-width: 250px;
    font-size: 14px;
    letter-spacing: 0.1em;
    line-height: 1.5;
}

#article .chocolat-parent{
	text-align: justify;
	overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
	margin-top: 10px;
	font-size: 15px;
}

#main .pagenav,
#main .categories{
    margin-bottom: 30px;
}

#main .navigation > li ul li{
    border: 1px solid #000;
    display: inline-block;
    width: calc(100% - 22px);
    margin: 10px auto;
    padding: 10px;
    font-size: 18px;
    text-align: center;
}

#main #sidebar ul li ul li{
    line-height: 2.5;
    font-size: 16px;
    color: #4c444d;
}

#main #sidebar ul li ul{
    margin-bottom: 30px;
}

/*
#main .page_item {
    border: 1px solid #000;
    display: inline-block;
    width: calc(100% - 22px);
    margin: 10px auto;
    padding: 10px;
    font-size: 18px;
    text-align: center;
}
*/

.blog #main .format-standard .thumnails img,
.archive #main .format-standard .thumnails img{
	object-fit: cover;
	width: 100%;
	height: 15.652vw;
}

@media screen and (max-width:1025px){
	.blog #main .format-standard .thumnails img,
    .archive #main .format-standard .thumnails img{
		height: 30vw;
	}
}

@media screen and (max-width:480px){
	.blog #main .format-standard .thumnails img,
    .archive #main .format-standard .thumnails img{
		height: 60vw;
	}
    
    #main .format-standard .postdate a{
        padding: 15px 0;
        font-size: 15px;
        letter-spacing: 0.05em;
    }
}

@media screen and (max-width:420px){
    #main .format-standard .postdate a{
        padding: 15px 0;
        font-size: 14px;
        letter-spacing: 0;
    }
}

#main .search-form,
#main .pagenav{
    display: none;
}

#main .blog-top {
    max-width: 300px;
    text-align: center;
    box-sizing: border-box;
    margin: 50px auto 0;
}

#main .blog-top a{
    display: block;
    color: #fff;
    background: #4c444d;
    padding: 20px;
    border-radius: 20px;
    font-size: 25px;
}

#main #content-wrap{
    box-shadow: 0px 0px 4px rgb(0 0 0 / 20%);
    border-radius: 2px;
    background: #fff;
    padding: 30px;
    border: 1px solid #eee;
}

#main #content-wrap h1 {
    text-align: center;
    font-size: 25px;
    line-height: 1.8;
    color: #4c444d;
    margin-bottom: 30px;
}

#main #content-wrap .data_time{
    text-align: right;
    margin-bottom: 30px;
}

#main #content-wrap h3{
    text-align: left;
    font-size: 18px;
    line-height: 2.5;
    color: #4c444d;
}

#main #content-wrap p {
    margin-top: 0;
    text-align: left;
    font-size: 16px;
    line-height: 2.5;
    color: #4c444d;
}

#main #sidebar > li {
    margin-bottom: 30px;
}

#main #sidebar > li:last-child{
    margin-bottom: 0;
}


@media screen and (max-width:1025px){
    #main #article main{
        width: 73%;
        padding: 0;
    }

    #main #article .side{
		width: 25%;
    	box-sizing: border-box;
    }

    #main #article .flex:after{
        width: 48%;
    }

    #main .format-standard {
        padding: 18px 20px;
        margin-bottom: 4%;
        width: 48%;
    }

    #main .format-standard h1{
        font-size: 19px;
    }

    #main .format-standard .postdate{
        font-size: 16px;
    }

    #main .format-standard .postdate time{
        font-size: 16px;
    }

    #main .format-standard .postdate a{
        font-size: 16px;
    }

    #main .navigation > li ul li{
        font-size: 16px;
    }

    #main #sidebar ul li ul li{
        font-size: 15px;
    }

    #main #sidebar h2{
        font-size: 19px;
    }

    #main #sidebar ul:nth-child(2) li:first-child h2::after{
        font-size: 19px !important;
    }

    #main #content-wrap h1 {
        font-size: 25px;
    }
    
    #main #content-wrap h3{
        font-size: 20px;
    }

    #main #content-wrap p {
        font-size: 16px;
    }

    .archive #main #article main,
    .blog #main #article main{
        width: 100%;
        padding: 0;
    }
}

@media screen and (max-width:768px){
    #main #article main{
        width: 100%;
        margin: 0 auto 30px;
    }

    #main #article .side{
        width: 100%;
        margin: 0 auto;
        padding: 30px;
    }

    #main .format-standard .postdate time{
        margin-top: 5px;
    }
}

@media screen and (max-width:480px){
    html{
        font-size: 62.5%;
    }
    
    #main .format-standard .content{
        margin-top: 15px;
    }

    #main #article .flex:after{
        width: 100%;
    }

    #main .format-standard {
        padding: 18px 20px;
        margin-bottom: 10%;
        width: 100%;
    }
    
    #main .format-standard:last-child{
        margin-bottom: 0;
    }

    #main .format-standard h1{
        white-space: pre-wrap;
        font-size: 1.9rem;
        line-height: 2;
    }

    #main .format-standard .postdate{
        font-size: 1.6rem;
        line-height: 1.5;
    }

    #main .format-standard .postdate time{
        font-size: 1.6rem;
        line-height: 1.5;
    }

    #main .format-standard .postdate a{
        font-size: 1.6rem;
        line-height: 1.5;
    }

    #main .navigation > li ul li{
        font-size: 1.6rem;
        line-height: 1.5;
    }

    #main #sidebar ul li ul li{
        font-size: 1.5rem;
        line-height: 1.5;
    }

    #main #sidebar h2{
        font-size: 1.9rem;
        line-height: 2;
    }

    #main #sidebar ul:nth-child(2) li:first-child h2::after{
        font-size: 1.9rem !important;
        line-height: 2 !important;
    }

	#main #content-wrap{
		padding: 18px 20px;
	}

    #main #content-wrap h1 {
        font-size: 2.0rem;
        line-height: 2;
        margin-bottom: 30px;
    }
    
    #main #content-wrap h3{
        font-size: 1.8rem;
        line-height: 1.5;
    }

    #main #content-wrap p {
        font-size: 1.6rem;
        line-height: 1.5;
    }

    #main .blog-top {
        max-width: 250px;
        font-size: 2rem;
    }

    #main .blog-top a{
        padding: 15px;
        font-size: 19px;
    }
}