@charset "utf-8";
.sp{
display:none;
}
.pc{
display:block;
}

#blog_archive{
max-width: 1200px;
margin: 0 auto;
padding: 50px 0 150px;
}

.bottom_border_title_en {
text-align: center !important; /* 文字の中央寄せ */
font-size: 2.3em !important;
letter-spacing: 30px !important;
margin-bottom: 50px !important;
padding-top:0px !important;
margin-top: 0px !important;
text-indent: 1.5em;

height:55px;
}
.blue_read_001{
color: #4294b5;
font-weight: 500;
text-align: center;
font-size: 1.5em;

line-height:2em;
margin-bottom:25px!important;
}
.blue_read_001 + p{
font-size:14px;
}


/* カテゴリー */
.category_sort_button{
gap:10px;
}
.category_sort_button .item{

color:#4294b5;
margin:0;
width:auto;
height:auto;
border:0;
}
.category_sort_button .item a{
height:100%;
display:grid;
place-items:center;
line-height:1;
padding:5px 30px;
color:#4294b5;

background:#fff;
border:1px solid #4294b5;
border-radius:9999px;
}

.category_sort_button .item a:hover{
background:#4294b5;
border:1px solid #4294b5;
color:#fff;
border-radius:9999px;
}
.term-flyers .category_sort_button .item:nth-child(1),
.term-pamphlet .category_sort_button .item:nth-child(2),
.term-web_design .category_sort_button .item:nth-child(3),
.term-other .category_sort_button .item:nth-child(4){

border:1px solid #4294b5;
color:#fff;
border-radius:9999px;
}
.term-flyers .category_sort_button .item:nth-child(1) a,
.term-pamphlet .category_sort_button .item:nth-child(2) a,
.term-web_design .category_sort_button .item:nth-child(3) a,
.term-other .category_sort_button .item:nth-child(4) a{
background:#4294b5;
color:#fff;
}

/* 一覧 */
.blog_list{
max-width:950px;
margin:0 auto;
}
.blog_list .item{
max-width:300px;


position: relative;
box-shadow:none;
display: flex;
flex-direction: column;
}

.blog_list .image .c-thumbnail{
background:#f5f3ee;
height:300px;
}
.blog_list .image .c-thumbnail img{
object-fit:contain;
padding:20px;
box-shadow: 0px 0px 4px gray;
}

.blog_list .content {
padding:30px 0 0 0;
flex-grow: 1;
display: flex;
flex-direction: column;
justify-content: flex-start;
}
.blog_list .content h2{
font-size:15px;
text-align:center;
margin-bottom:15px;
}

.post-tags {
display:flex;
flex-wrap:wrap;
gap:8px;
}
.tag-item {
display: inline-block;
padding:4px 10px 2px;
font-size: 12px;
color: #333;
background:#fff;
border:1px solid #898989;
color:#898989;
margin:0;
width:auto;
height:auto;
border-radius:9999px;
}






/* モーダル */
.modal-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.8);
z-index: 9999;
overflow-y: auto;
}

.modal-container {
position: relative;
width:50%;
max-width:400px;
margin: 10vh auto;
background: #fff;
border-radius: 8px;
padding: 40px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
max-height:80vh;
overflow:auto;
}

.modal-close {
position: absolute;
top: 15px;
right: 15px;
width: 40px;
height: 40px;
background: #333;
color: #fff;
border: none;
border-radius: 50%;
font-size: 28px;
line-height: 1;
cursor: pointer;
transition: background 0.3s;
}

.modal-close:hover {
background: #000;
}

.modal-content {
min-height: 200px;
}

.modal-content img {
max-width: 100%;
height: auto;
}

.modal-content .post-title {
/* max-width:calc(100% - 20px); */
font-size: 24px;
font-weight: bold;
margin-bottom: 20px;
line-height: 1.4;
}

.modal-content .post-meta {
display: flex;
gap: 15px;
margin-bottom: 30px;
padding-bottom: 20px;
border-bottom: 1px solid #e0e0e0;
font-size: 14px;
color: #666;
}

.modal-content .post-body {
line-height: 1.8;
font-size: 16px;
}

.modal-content .post-tags {
margin-top: 30px;
padding-top: 20px;
border-top: 1px solid #e0e0e0;
}

@media screen and (max-width: 768px) {
.modal-container {
width:70%;
margin:20px auto;
padding: 30px 20px;
}
.modal-content .post-title{
font-size:20px;
}
}

.modal-content .post-meta{
margin-bottom:20px;
padding-bottom:0;
border-bottom:0;
}
.modal-content .post-tags{
margin-top:0;
padding-top:0;
border-top:0;
margin-bottom:10px;
padding-bottom:10px;
border-bottom: 1px solid #e0e0e0;
}



/*-------------------------------------------------------
1290px以下　必要な場合のみ
-------------------------------------------------------*/
@media screen and (max-width: 1290px){

}



/*-------------------------------------------------------
768px以下
-------------------------------------------------------*/
@media screen and (max-width: 768px){
.sp{
display:block;
}
.pc{
display:none;
}
	
#blog_archive{
max-width: 1200px;
margin: 0 auto;
padding:0;
margin: 40px 20px 40px !important;
}

.bottom_border_title_en {
text-align: center !important;
/* font-size: 1.8em !important; */
font-size:25px !important;
letter-spacing: 18px !important;
margin-bottom: 50px !important;
padding-top: 0px !important;
margin-top: 0px !important;
text-indent: 1em;
}
.blue_read_001{
color: #4294b5;
font-weight: 500;
text-align: center;
/* font-size: 1.5em; */
font-size:21px;

line-height:2em;
margin-bottom:25px!important;
}
.blue_read_001 + p{

}


/* カテゴリー */
.category_sort_button{
gap:10px;
animation
}
.category_sort_button .item{
background:#fff;
border:1px solid #4294b5;
color:#4294b5;
/* margin:0; */
margin:20px 10px 20px 0;
width:auto;
height:auto;
border-radius:9999px;
}
.category_sort_button .item a{
height:100%;
display:grid;
place-items:center;
line-height:1;
padding:5px 30px;
color:#4294b5;
}
.category_sort_button .item a:hover{
background:#4294b5;
border:1px solid #4294b5;
color:#fff;
border-radius:9999px;
}
.term-flyers .category_sort_button .item:nth-child(1),
.term-pamphlet .category_sort_button .item:nth-child(2),
.term-web_design .category_sort_button .item:nth-child(3),
.term-other .category_sort_button .item:nth-child(4){
background:#4294b5;
border:1px solid #4294b5;
color:#fff;
border-radius:9999px;
}
.term-flyers .category_sort_button .item:nth-child(1) a,
.term-pamphlet .category_sort_button .item:nth-child(2) a,
.term-web_design .category_sort_button .item:nth-child(3) a,
.term-other .category_sort_button .item:nth-child(4) a{
color:#fff;
}

/* 一覧 */
.blog_list{
max-width:90%;
margin:0 auto;
}
.blog_list .item{
max-width:100%;


position: relative;
box-shadow:none;
display: flex;
flex-direction: column;

margin-bottom:10%;
}

.blog_list .image .c-thumbnail{
background:#f5f3ee;
height:300px;
}
.blog_list .image .c-thumbnail img{
object-fit:contain;
padding:20px;
}

.blog_list .content {
padding:5% 0 0 0;
flex-grow: 1;
display: flex;
flex-direction: column;
justify-content: flex-start;
}
.blog_list .content h2{
font-size:16px;
text-align:center;
margin-bottom:15px;
}

.post-tags {
display:flex;
flex-wrap:wrap;
gap:8px;
}
.tag-item {
display: inline-block;
padding:4px 10px 2px;
font-size: 12px;
color: #333;
background:#fff;
border:1px solid #898989;
color:#898989;
margin:0;
width:auto;
height:auto;
border-radius:9999px;
}






/* モーダル */
.modal-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.8);
z-index: 9999;
overflow-y: auto;
}

.modal-container {
position: relative;
width:70%;
max-width: 600px;
margin: 50px auto;
background: #fff;
border-radius: 8px;
padding: 40px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.modal-close {
position: absolute;
top: 10px;
right: 10px;
width: 30px;
height: 30px;
background: #333;
color: #fff;
border: none;
border-radius: 50%;
font-size: 28px;
line-height: 1;
cursor: pointer;
transition: background 0.3s;
z-index:1000;
}

.modal-close:hover {
background: #000;
}

.modal-content {
min-height: 200px;
}

.modal-content img {
max-width: 100%;
height: auto;
}

.modal-content .post-title {
font-size: 18px;
font-weight: bold;
margin-bottom: 20px;
line-height: 1.4;
width:calc(100% - 30px);
}

.modal-content .post-meta {
display: flex;
gap: 15px;
margin-bottom: 30px;
padding-bottom: 20px;
border-bottom: 1px solid #e0e0e0;
font-size: 14px;
color: #666;
}

.modal-content .post-body {
line-height: 1.8;
font-size: 16px;
}

.modal-content .post-tags {
margin-top: 30px;
padding-top: 20px;
border-top: 1px solid #e0e0e0;
}

@media screen and (max-width: 768px) {
.modal-container {
margin: 20px auto;
padding: 30px 20px;
}
}

.modal-content .post-meta{
margin-bottom:20px;
padding-bottom:0;
border-bottom:0;
}
.modal-content .post-tags{
margin-top:0;
padding-top:0;
border-top:0;
margin-bottom:10px;
padding-bottom:10px;
border-bottom: 1px solid #e0e0e0;
}


}
}