@charset "UTF-8";
@import "sections/blog.css";
@import "sections/intro.css";
@import "sections/voice.css";
@import "sections/examples.css";
@import "sections/staff.css";

#intro {
    padding: 6em 0;
}

body#blog {
    padding-top: 0;
}
#blog {
    background: transparent;
}
#blog .blog_page_title {
    width: 100%;
    height: 3em;
    margin-bottom: 0.2em;
    border-top: 2px solid var(--green);
    border-bottom: 2px solid var(--green);
    color: var(--green);
    font-weight: 700;
    font-size: 300%;
    font-style: italic;
    display: flex;
    align-items: center;
    justify-content: center;
}
#blog .category_nav {
    margin-bottom: 1em;
}
@media screen and (min-width: 768px){
    #blog .category_nav {
        margin-bottom: 2em;
    }
}
#blog .category_nav ul {
    grid-gap: 10px;
}
#blog .category_nav a {
    padding: 0.2em 0.5em;
    background-color: var(--orange);
    border-radius: 5px;
    color: #fff;
    display: inline-block;
}
#blog .category_nav a.current {
    background-color: #ee6708;
}
@media screen and (min-width: 768px){
    #blog .category_nav a {
        font-size: 120%;
    }
}
@media screen and (min-width: 992px){
    #blog .category_nav a {
        font-size: 150%;
    }
}
@media screen and (min-width: 1200px){
    #blog .category_nav a {
        padding: 0.2em 1em;
    }
}

#page_blog .blog_wrap,#blog .blog_wrap,
#archive_blog .blog_wrap {
    padding: 0 1rem;
}
#page_blog .blog_wrap .item_wrap,#blog .blog_wrap .item_wrap,
#archive_blog .blog_wrap .item_wrap {
    margin-bottom: 2em;
}
@media screen and (min-width: 768px){
    #page_blog .blog_wrap,
    #archive_blog .blog_wrap {
        padding: 0;
    }
    #page_blog .blog_wrap .item_wrap,
    #archive_blog .blog_wrap .item_wrap {
        margin-bottom: 0;
    }
}


/*------------------------------------------------------
    for Single
-------------------------------------------------------*/
@media screen and (min-width: 768px){
    #blog .plain_page {
        font-size: 135%;
    }
}
#blog .single .post_title {
    padding: 1em;
    background: #314A79;
    color: #fff;
    font-size: 130%;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}
@media screen and (min-width:768px){
    #blog .single .post_title {
        font-size: 150%;
    }
}
@media screen and (min-width:1150px){
    #blog .single .post_title {
        font-size: 150%;
    }
}
#blog .single time {
    font-size: 100%;
    font-weight: 400;
}
#blog .single .btn {
    width: 100%;
    max-width: 500px;
    padding-left: 1.8em;
    padding-right: 0.9em;
}
@media screen and (min-width: 768px){
    #blog .single .btn {
        font-size: 135%;
    }
}
#blog .single .btn::before {
    right: auto;
    left: 0;
    transform: scale(-1,1)
}

h2.wp-block-heading {
    font-size: 130%;
    color: #7fc53b;/*文字色（黒）*/
    padding: 15px;/*文字回りの余白（上下左右）*/
    display: block;
    border-top: 3px solid #7fc53b;/*上線（太さ 実線 色）*/
    border-bottom: 3px solid #7fc53b;/*下線（太さ 実線 色）*/
}

/*H3見出し*/
h3.wp-block-heading {
    font-size: 120%;
    padding: 10px 20px 15px 25px;/*文字回りの余白（上 右 下 左）*/
    display: block;
    position: relative;
}

h3.wp-block-heading:before,
h3.wp-block-heading:after {
    content: "";
    display: block;
    position: absolute;
}

h3.wp-block-heading:before {
    bottom: -5px;
    left: 1px;
    width: 8px;/*左下線の間の幅*/
    height: 20px;/*左下線の高さ*/
    border-left: 2px solid #7fc53b;/*左下左線（太さ 実線 色）*/
    border-right: 2px solid #7fc53b;/*左下右線（太さ 実線 色）*/
    transform: skewX(-15deg);/*左下線の傾き*/
}

h3.wp-block-heading:after {
    left: 15px;
    bottom: 0;
    width: calc(100% - 8px);
    height: 2px;/*下線の太さ（高さ）*/
    background: #7fc53b;/*背景色（黒）*/
}

/*H4見出し*/
h4.wp-block-heading {
    font-size: 110%;
    display: block;
    position: relative;
    padding: 6px 30px;/*文字回りの余白（上下 左右）*/
}

h4.wp-block-heading:before {
    font-family: FontAwesome;
    font-weight: 900;/*矢印の太さ*/
    font-size: 25px;/*矢印のサイズ*/
    color: #7fc53b;/*矢印の色（黒）*/
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    content:"\f054";
    position: absolute;
}

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

    h2.wp-block-heading {
        padding: 10px;
        border-top: 2px solid #7fc53b;
        border-bottom: 2px solid #7fc53b;
    }

    h3.wp-block-heading {
        padding: 10px 20px 10px 15px;
    }

    h3.wp-block-heading:before {
        height: 15px;
        width: 6px;
    }

    h3.wp-block-heading:after {
        left: 15px;
    }

    h4.wp-block-heading {
        padding: 6px 20px;
    }

    h4.wp-block-heading:before {
        font-size: 18px;
    }
}

.recommend_blog {
    margin-top:100px;
    padding-bottom:120px;
    margin-bottom:100px;
}
.pave-column__list {
	margin-top: 56px;
	display: flex;
    gap:24px;
}
#blog .pave-column__list.blog_wrap {
    display: flex;
    gap:45px;
}

@media screen and (max-width: 768px) {
/*
	.pave-column__list {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		column-gap: 5%;
	}
*/
    .recommend_blog {
        padding-bottom:3em;
        margin-top:3em;
        margin-bottom:3em;
    }
}

.pave-column__item {
    width:calc(100%/3 - 48px/3);
	border-radius: 10px;
	box-shadow: 0 0 13px 2px rgba(183, 183, 183, 0.51);
}

@media screen and (max-width: 768px) {
	.pave-column__item {
		width: 100%;
	}
}

.pave-column__item a {
	display: block;
	width: 100%;
	height: 100%;
	background-color: #fff;
	border-radius: 10px;
}

.pave-column__visual {
	width: 100%;
	height: 200px;
}

.pave-column__visual img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 10px 10px 0 0;
}

.pave-column__date {
	width: 100%;
	padding: 0 5.3%;
	font-size: 19px;
	color: #404040;
	line-height: 1.5;
	font-weight: 500;
	text-align: left;
	letter-spacing: 0;
	margin-top: 8px;
}

.pave-column__item-title {
	width: 100%;
	padding: 0 5.3%;
	font-size: 24px;
	letter-spacing: 0.075em;
	line-height: 1.5;
	font-weight: 700;
	color: var(--green);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	margin-top: 13px;
}

.pave-column__link {
	width: 100%;
	height: 57px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	line-height: 1.5;
	font-weight: 400;
	background-color: var(--green);
	border-radius: 0 0 10px 10px;
	margin-top: 15px;
	font-size: 18px;
	padding-left: 14px;
}

.pave-column__link span {
	display: inline-block;
	margin-left: 10px;
	line-height: 1;
	letter-spacing: 0;
}

.pave-column__link span img {
	width: 7px;
	height: 11px;
	object-fit: cover;
}

.pave-column__button {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	max-width: 690px;
	height: 77px;
	margin: 70px auto 0;
	background-color: #fff;
	border-radius: 50px;
	border: 2px solid var(--text);
	font-size: 24px;
	letter-spacing: 0;
	padding-left: 30px;
}

@media screen and (max-width: 768px) {
	.pave-column__button {
		font-size: 18px;
	}
}

.pave-column__button span {
	display: inline-block;
	margin-left: 20px;
	line-height: 1;
	letter-spacing: 0;
}

.pave-column__button span img {
	width: 9px;
	height: 15px;
	object-fit: cover;
}


#pickup {
    padding-bottom:80px;
}
#pickup .text1 {
    font-size:120%;
}
#pickup .text2 {
    line-height: 1.4;
    width:100%;
    margin:auto;
    max-width:700px;
    padding-top:40px;
    border-top:1px solid #ccc
}

#blog #staff {
    padding-top:100px;
}
#blog #staff .section_title {
    padding-top:0;
}
#blog #staff .item {
    background-color: transparent;
     border-radius: 10px; 
box-shadow: none;
}
#blog #staff .item figure {
     width: 100%; 
     padding-top:0;
     border-radius: 0; 
     position: relative; 
     overflow: hidden; 
}
#blog #staff .item figure img {
     width: 100%; 
     height: auto; 
     object-fit:none;
     display: block; 
     position: relative; 
     top: auto; 
     left: auto; 
}

@media screen and (max-width: 768px) {
    #pickup {
    padding-bottom:3em;
}
   #blog #staff {
    padding-top:3em;
} 
}