@charset "UTF-8";
/* CSS Document */



/*PC*/
@media print, screen and (min-width: 768px) {


/* index
--------------------------------------------*/
#column { position: relative; }
#column .section_wrap { width: 80%; margin: 0 auto 160px; }

#column .section_wrap .column_list { position: relative; display: flex; flex-wrap: wrap; justify-content: space-between; z-index: 1; }
#column .section_wrap .column_list::after { content: ''; width: 31%; display: block; }
#column .section_wrap .column_list li { width: 31%; position: relative; overflow: hidden; background-image: linear-gradient(0deg, rgba(55,55,55, 1), rgba(0, 0, 0, 1)); padding: 20px 15px; box-sizing: border-box; }
#column .section_wrap .column_list li:nth-child(n+4) { margin-top: 50px; }
#column .section_wrap .column_list li .img { overflow: hidden; margin: 0 0 10px; }
#column .section_wrap .column_list li .img img {
width: 100%;
-o-object-fit: cover;
object-fit: cover;
-webkit-transition: all 0.6s ease 0s;
transition: all 0.6s ease 0s;
}

#column .section_wrap .column_list li .txt_box { position: relative; color: #FFF; margin-bottom: 80px; }
#column .section_wrap .column_list li .txt_box time { font-size: .8rem; border-bottom: 1px solid rgba(255,255,255,.2); }
#column .section_wrap .column_list li .txt_box h3 { margin: 5px 0 10px; }
#column .section_wrap .column_list li .txt_box p { font-size: .8rem; }
#column .section_wrap .column_list li .txt_box .tag { display: flex; flex-wrap: wrap; margin-top: 20px; }
#column .section_wrap .column_list li .txt_box .tag p a { font-size: .7rem; background: #fff; padding: 0px 8px; margin-right: 10px; color: rgba(55,55,55, 1); }
#column .section_wrap .column_list li a.columview { position: absolute; bottom: 20px; left: 0; right: 0; width: 80%; margin: auto; text-align: center; padding: 10px 0; background: #fff; }
#column .section_wrap .column_list li a.columview:hover { opacity: 0.8; }


#column .section_wrap .pagination {
border: none;
padding: 0;
margin-top: 80px;
display: flex;
justify-content: center;
flex-wrap: wrap;
filter: drop-shadow(0px 1px 3px #ccc);
transition: 0.3s;
border-radius: 0px;
overflow: hidden;
}
#column .section_wrap .pagination li a {
display: flex;
border-radius: 0;
padding: 15px 18px 13px;
background: #FFF;
line-height: 1;
border-right: solid 1px #eee;
}
#column .section_wrap .pagination li { margin: 0; }
#column .section_wrap .pagination li.active a { background: #000; color: #fff; }



/* detail
--------------------------------------------*/

#column_detail { position: relative; }
#column_detail .section_wrap { width: 1050px; margin: 0 auto 160px; }

#column_detail .section_wrap time { color: rgba(138,107,28,1); }
#column_detail .section_wrap h3 { font-size: 2.2rem; font-weight: 600; font-family: 'Noto Serif JP', serif; margin-bottom: 50px; }

/*#column_detail .section_wrap .tag { display: flex; flex-wrap: wrap; margin: 10px 0 50px; }
#column_detail .section_wrap .tag p a { font-size: .8rem; background: rgba(55,55,55, 1); padding: 2px 8px; margin-right: 10px; color: #fff; }*/

#column_detail .section_wrap .box { margin: 100px auto 0; padding: 40px; box-sizing: border-box; background: #f2efe9; }
#column_detail .section_wrap .box h4 { font-size: 1.8rem; margin: 0 0 30px; }
#column_detail .section_wrap .box p { font-size: 0.9rem; line-height: 2.2; letter-spacing: 2px; }
#column_detail .section_wrap .box .img { margin: 50px 0 0; }

#column_detail .button { margin: 60px auto 0; }


}








/*sp*/
@media only screen and (max-width: 767px) {


/* index
--------------------------------------------*/
#column { position: relative; margin: 0px 5% 60px; }

#column .section_wrap .column_list { position: relative; display: flex; flex-wrap: wrap; justify-content: space-between; }
#column .section_wrap .column_list li { width: 48%; position: relative; overflow: hidden; margin-top: 30px; display: block; background-image: linear-gradient(0deg, rgba(55,55,55, 1), rgba(0, 0, 0, 1)); padding: 20px 15px; box-sizing: border-box; }
#column .section_wrap .column_list li .img { overflow: hidden; margin: 0 0 10px; }
#column .section_wrap .column_list li .img img { width: 100%; -o-object-fit: cover; object-fit: cover; }

#column .section_wrap .column_list li .txt_box { position: relative; color: #FFF; margin-bottom: 70px; }
#column .section_wrap .column_list li .txt_box time { font-size: .8rem; border-bottom: 1px solid rgba(255,255,255,.2); }
#column .section_wrap .column_list li .txt_box h3 { margin: 5px 0 10px; }
#column .section_wrap .column_list li .txt_box p {  }
#column .section_wrap .column_list li .txt_box .tag { display: flex; flex-wrap: wrap; margin-top: 20px; }
#column .section_wrap .column_list li .txt_box .tag p a { font-size: .7rem; background: #fff; padding: 0px 8px; margin: 0 10px 5px 0; color: rgba(55,55,55, 1); }
#column .section_wrap .column_list li a.columview { position: absolute; bottom: 20px; left: 0; right: 0; width: 90%; margin: auto; text-align: center; padding: 10px 0; background: #fff; }


#column .section_wrap .pagination {
border: none;
padding: 0;
margin-top: 50px;
display: flex;
justify-content: center;
flex-wrap: wrap;
filter: drop-shadow(0px 1px 3px #ccc);
transition: 0.3s;
border-radius: 0px;
overflow: hidden;
}
#column .section_wrap .pagination li a {
display: flex;
border-radius: 0;
padding: 12px 15px 10px;
background: #FFF;
line-height: 1;
border-right: solid 1px #eee;
}
#column .section_wrap .pagination li { margin: 0; }
#column .section_wrap .pagination li.active a { background: #000; color: #fff; }



/* detail
--------------------------------------------*/

#column_detail { position: relative; margin: 0px 5% 60px; }

#column_detail .section_wrap time { color: rgba(138,107,28,1); }
#column_detail .section_wrap h3 { font-size: 1.4rem; font-weight: 600; font-family: 'Noto Serif JP', serif; margin-bottom: 30px; }
/*#column_detail .section_wrap .tag { display: flex; flex-wrap: wrap; margin: 10px 0 20px; }
#column_detail .section_wrap .tag p a { font-size: .8rem; background: rgba(55,55,55, 1); padding: 2px 8px; margin-right: 10px; color: #fff; }*/

#column_detail .section_wrap .box { margin: 60px auto 0; padding: 30px; box-sizing: border-box; background: #f2efe9; }
#column_detail .section_wrap .box h4 { font-size: 1.2rem; margin: 0 0 30px; }
#column_detail .section_wrap .box p { line-height: 2.2; letter-spacing: 2px; }
#column_detail .section_wrap .box .img { margin: 40px 0 0; }

#column_detail .button { margin: 60px auto 0; }


}