#column ul{ margin-top: 30px;} #column ul.column li{ margin-bottom: 30px;} #column ul.column li .thumbnail{ border: 1px solid #D0D0D0; width: 280px; height: 160px; margin: 0 30px 0 0; float: left; overflow: hidden;} #column ul.column p.column_name{ font-size: 20px; line-height: 28px; font-weight: 700; color: #538EB4; margin-bottom: 0.5em;} #column ul.column p.column_title,#column ul.column h2.column_title{ font-size: 20px; line-height: 28px; font-weight: 700; margin-bottom: 0.5em;} #column ul.column_tag{ display: flex; flex-wrap: wrap; margin-top: 0.5em;} #column ul.column_tag li{ margin-right: 0.5em} #column ul.column_tag li a{ font-size: 12px; color: #538EB4; border: 1px solid #538EB4; padding: 2px 1em; display: inline-block; background: none;} #column ul.column_tag li a:hover{ background-color: #538EB4; border-color: #538EB4; color: #FFF;} #column .column_other, #column_detail .column_other{ padding: 60px 0;} #column ul.column_list, #column_detail ul.column_list{ display: flex; margin: 60px 0 30px 0; flex-wrap: wrap;} #column ul.column_list li, #column_detail ul.column_list li{ width: 280px; margin-bottom: 2em; margin-right:26px;} #column ul.column_list li:nth-child(4n), #column_detail ul.column_list li:nth-child(4n){ margin-right:0;} #column ul.column_list li div.thumbnail, #column_detail ul.column_list li div.thumbnail{ height: 160px; overflow: hidden; border: 1px solid #D0D0D0; margin-bottom: 1em; overflow:hidden;} #column ul.column_list li div.thumbnail img, #column_detail ul.column_list li div.thumbnail img{ width: 100%;} #column ul.column_list li p{ font-size: 20px; line-height: 28px; font-weight: 700; text-align: center; color: #538EB4;} #column ul.column_list li p a{ color: #538EB4; padding-bottom: 0px; background: linear-gradient(#538EB4, #538EB4) 0 100%/0 1px no-repeat; transition: background .4s; text-decoration: none;} #column ul.column_list li p a.reverse { background-position: 100% 100%;} #column ul.column_list li p a:hover { background-size: 100% 1px;} #column_detail .column_name{ text-align: center; color: #538EB4; font-weight: 700; font-size: 26px; line-height: 38px; margin: 30px 0;} #column_detail .column_name a{ color: #538EB4; padding-bottom: 0px; background: linear-gradient(#538EB4, #538EB4) 0 100%/0 1px no-repeat; transition: background .4s; text-decoration: none;} #column_detail .column_name a.reverse { background-position: 100% 100%;} #column_detail .column_name a:hover { background-size: 100% 1px;} #column_detail .column_content{ display: flex; justify-content: space-between;} #column_detail .column_main{ width:640px;} #column_detail .column_side{ width: 280px;} #column_detail .column_title{ font-size: 24px; line-height: 32px; font-weight: 700;} #column_detail .column_content img{ border:1px solid #D0D0D0; max-width: 100%; height:auto;} #column_detail .column_content p{ margin: 1em 0;} #column_detail .column_content p a{ color: #538EB4; padding-bottom: 0px; background: linear-gradient(#538EB4, #538EB4) 0 100%/0 1px no-repeat; transition: background .4s; text-decoration: none;} #column_detail .column_content p a.reverse { background-position: 100% 100%;} #column_detail .column_content p a:hover { background-size: 100% 1px;} #column_detail .column_content p.column_date{ margin: 0;} #column_detail .column_side h5,#column_detail .column_side h2{ color: #538EB4; font-weight: 700; border-bottom: 1px solid #D0D0D0; padding: 0 0 0.5em 0; margin: 1em 0;} #column_detail ul.column_backnumber{ margin-bottom: 2em;} #column_detail ul.column_backnumber li{ margin: 1em 0;} #column_detail ul.column_tag{ display: flex; flex-wrap: wrap; margin-top: 0.5em;} #column_detail ul.column_tag li{ margin-right: 0.5em; margin-bottom: 0.5em;} #column_detail ul.column_tag li a{ font-size: 12px; color: #538EB4; border: 1px solid #538EB4; padding: 2px 1em; display: inline-block; background: none;} #column_detail ul.column_tag li a:hover{ background-color: #538EB4; border-color: #538EB4; color: #FFF;} #column_detail .column_other{ padding: 60px 0;} #column_detail .column_other h6,#column_detail .column_other h2{ text-align: center; font-size: 26px; font-weight: 700; margin-bottom: 60px;} #column_detail ul.column_list li p,#column_detail ul.column_list li h3{ font-size: 16px; font-weight: 700; text-align: center; color: #000; text-align:left;} #column_detail ul.column_list li p a,#column_detail ul.column_list li h3 a{ color: #000; padding-bottom: 0px; background: linear-gradient(#000, #000) 0 100%/0 1px no-repeat; transition: background .4s; text-decoration: none;} #column_detail ul.column_list li p a.reverse ,#column_detail ul.column_list li h3 a.reverse { background-position: 100% 100%;} #column_detail ul.column_list li p a:hover,#column_detail ul.column_list li h3 a:hover { background-size: 100% 1px;} #column_detail a.btn_white_center{ width: 320px; text-align: center; background: #fff; font-size: 20px; font-weight: 700; border:3px solid #000; padding: 0.8em 1.5em; display: block; position: relative; transition: .3s; z-index: 2; margin: 0 auto 100px auto;} .column_list .thumbnail a img{object-fit: cover;height: 170px;}@media screen and (max-width: 768px) { #column ul.column li{ margin-bottom: 15px;} #column ul.column li .thumbnail{ border: 1px solid #D0D0D0; width: 140px; height: 80px; margin: 0 0.5em 0.5em 0; float: left; overflow: hidden;} #column ul.column p.column_name{ font-size: 18px; line-height: 24px;} #column ul.column p.column_title,#column ul.column h2.column_title{ clear:both; width: 100%; font-size: 18px; line-height: 24px;} #column ul.column_tag li{ margin-right: 0.5em; margin-bottom: 0.5em;} #column ul.column_tag li a{ font-size: 12px; color: #538EB4; border: 1px solid #538EB4; padding: 2px 1em; display: inline-block; background: none;} #column ul.column_tag li a:hover{ background-color: #538EB4; border-color: #538EB4; color: #FFF;} #column .column_other, #column_detail .column_other{ padding: 30px 0;} #column ul.column_list, #column_detail ul.column_list{ display: block; margin: 30px 0 15px 0;} #column ul.column_list li, #column_detail ul.column_list li{ width: 90%; margin: 0 auto; margin-bottom: 2em;} #column ul.column_list li div.thumbnail, #column_detail ul.column_list li div.thumbnail{ height: auto;} #column_detail .column_name{ text-align: left; font-size: 26px; line-height: 38px; margin: 15px 0;} #column_detail .column_content{ display: block;} #column_detail .column_main{ width:100%;} #column_detail .column_side{ width: 100%; margin-bottom: 30px;} #column_detail .column_other{ padding: 40px 0;} #column_detail .column_other h6,#column_detail .column_other h2{ font-size: 18px; margin-bottom: 30px;} #column_detail ul.column_list{ display: block; margin: 40px 0 ;} #column_detail ul.column_list li{ width: 100%; margin: 0; display: block; clear:both;} #column_detail ul.column_list li div.thumbnail{ width: 140px; height: 80px; margin: 0 0.5em 1em 0; float: left; overflow: hidden;} #column_detail ul.column_list li div.thumbnail img{ width: 100%;} #column_detail ul.column_list li p#column_detail ul.column_list li h3{ font-size: 16px;} #column_detail a.btn_white_center{ width: 80%; margin: 0 auto 50px auto;}}