/* TOPのみのcss */
.contents{padding-bottom: 0px;}
#category_top .flex_container li:hover a dl dd p{display:none;}

/* 現在のテンプレートに影響出るので、ひとまずcssで3件表示に */
#category_top .latest li:nth-child(n+4){display:none;}

.flex_container{width:100%;}
.flex_container .top_attention{width:calc(100% - 230px - 20px); margin-right:20px;}
.flex_container .side_column_v2{width:230px;}
.flex_container .side_column_v2 ul{width:100%; padding:0; margin:0;}
.flex_container .side_column_v2 ul li{width:calc(100% - 20px)!important; 
box-shadow:none!important; border-radius:0!important;
border:1px solid #ccc; margin:0 0 20px!important; padding:10px;}
.flex_container .side_column_v2 ul li:hover{box-shadow:none!important;}

#category_top h3 span {width: calc(100% - 20px); padding: 10px; background: #0B54A7; color: #FFF; text-align: left;
border-top:0; display: inline-block; margin: 40px auto 10px; font-size: 18px; font-weight: bold;}

.side_column_v2 ul{}
.side_column_v2 ul li h4{width: calc(100% - 10px); padding: 5px; background: #1A50C5; color: #FFF; text-align: center;}
.side_column_v2 ul li.tag_cloud_v2 a{font-size: 0.8em; line-height: 1.8em; position: relative; padding-left: 16px;}
.side_column_v2 ul li.tag_cloud_v2 a:before{content: ""; 
    background-image:url(/blog/2022/06/24/assets/tag_cloud_v2_ico_tag.svg); background-size:10px 10px;
    background-repeat:no-repeat; 
    display: block; width: 12px; height: 12px; position: absolute; left: 2px; top:5px;}

/* tag_cloud_v2_ico_tag.svg */
.tag_cloud_v2{display:flex; flex-wrap:wrap;}
.tag_cloud_v2 a{width: auto!important; border:1px solid #ccc; padding:0 4px; margin:2px;}

@media (max-width: 600px) {
    .blog_contact_column{display: flex; flex-wrap: wrap;}
    .blog_contact_column div{width: calc(100% - 80px); padding:0 40px;}
}


.flex_container{width:100%;}
.flex_container .top_attention{width:calc(100% - 230px - 20px); margin-right:20px;}
.flex_container .side_column_v2{width:230px;}
.flex_container .side_column_v2 ul{width:100%; padding:0; margin:0;}
.flex_container .side_column_v2 ul li{width:calc(100% - 20px)!important; 
box-shadow:none!important; border-radius:0!important;
border:1px solid #ccc; margin:0 0 20px!important; padding:10px;}
.flex_container .side_column_v2 ul li:hover{box-shadow:none!important;}

@media (max-width: 600px) {
     .flex_container .side_column_v2{display: none;}
     .flex_container .top_attention{width: 100%; margin-right: 0;}
}

#category_top h2 {margin-bottom: 2em; display: flex; justify-content: center; align-items: center;}
#category_top h2 img{width:340px; height:auto; margin:auto;}

#category_top h3.category_top_title{}
#category_top h3 span {width: calc(100% - 20px); text-align: left; border-top:0; display: inline-block; margin: 40px auto 10px; font-size: 16px; font-weight: bold;}
#category_top h3 span{margin-top: 0!important; background: #eee; color: #333; position: relative; padding: 10px 0 10px 20px;}
#category_top h3 span i{position: absolute; left: 0; top:20%; width: 7px; height: 60%; background: #242269; display: block; font-style: normal;}

.side_column_v2 ul li h4{background: #eee; border-top: 7px solid #242269; color: #333; font-weight: bold; padding: 5px 0 8px 0; margin-bottom: 5px;}

.flex_container .side_column_v2 ul li{border: none; padding: 0;}

.side_column_v2 ul.past_blog_v2{width: calc(220px - 0px); padding: 0!important; margin: 0!important;}
.side_column_v2 ul.past_blog_v2 li{display: flex; flex-wrap: wrap; justify-content: space-between; margin-right: 0!important; padding: 0!important;}
.side_column_v2 ul.past_blog_v2 li a{display: block; width: 48%!important; text-align: center; margin: 4% 0; border-bottom: 0px solid #ccc;}
.side_column_v2 ul.past_blog_v2 li a:hover{font-weight:bold;}

.side_column_v2 ul.past_blog_v2 li a{position: relative;}
.side_column_v2 ul.past_blog_v2 li a:before{content: ""; position: absolute; left: 0; bottom:-4px;
width: 100%; height: 1px; background: #ccc; transition: all 0.3s ease 0s;}
.side_column_v2 ul.past_blog_v2 li a:hover:before{height: 4px; background: #242269;}

.tag_cloud_v2{display:flex; flex-wrap:wrap;}
.tag_cloud_v2 a{width: auto!important; border:1px solid #ccc; padding:0 4px; margin:2px;}

@media (max-width: 600px) {
.blog_contact_column{display: flex; flex-wrap: wrap;}
.blog_contact_column div{width: calc(100% - 80px); padding:0 40px;}
}

#category_top .ico_rss_link{position: relative; bottom:5px;}
#category_top .ico_rss{width: 16px;}
@media (max-width: 600px) {
    #category_top .ico_rss_link{position: relative; bottom:2px;}
    #category_top .ico_rss{width: 16px;}
}

@media (min-width: 600px) {
	div.topics_list{
	}
	div.topics_list dl{
		overflow: hidden;
		padding-left: 300px;
		position: relative;
		margin-bottom: 20px;
		padding-bottom: 16px; 
		border-bottom: 1px dashed #ccc;
	}
    div.topics_list dl dd.tmb a img{
		object-fit: contain!important;
        width: 280px!important;
        height: auto!important;
	}
}

/* PC SP 表示・非表示 */
@media (min-width: 600px) {
.pc_view{display: block;}
.sp_view{display: none;}
}
@media (max-width: 600px) {
.pc_view{display: none;}
.sp_view{display: block;}
}
#category_top h2{background: #242269;}

.side_column_v2 form input{width:calc(100% - 20px); margin:auto;}

*{margin: 0; padding: 0;}

/* Link */
.modal a{user-select: none; text-decoration:none;}
.modal a:link {color:#000; text-decoration:none;}
.modal a:visited {color:#000; text-decoration:none;}
.modal a:hover {color:#000; text-decoration:underline;}
.modal a:active {color:#000;}

/* モーダル全体(背景＋本体) */
.modal{
  display: none;
  position: fixed;
  top: 0;
  left:0;
  height: 100vh;
  width: 100%;
}
.modal {top:80px; height: 90vh;} /* 20240402 add */

/* モーダル背景 */
.modal-bg{
  position: absolute;
  height: 100vh;
  width: 100%;
  background: rgba(0, 0, 0, 0.8);
}

/* モーダル本体 */
.modal-content{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
    
/* はみ出た部分はスクロールさせる */
/*overflow: scroll; */
  overflow-y: auto;
  height: 60%;
  width: 60%;

   background: rgba(255, 255, 255, 1.0);
  padding: 40px;
  border-radius: 10px;
}

/* モーダルウィンドウ表示中に記事本体を固定 */
body.fixed {
  position: fixed;
  width: 100%;
  height: 100%;
  left: 0;
}

.modal-content{position: relative; display: flex; flex-wrap: wrap; justify-content: flex-start; align-content: flex-start; width: 80%; height: 80%;}
.modal-content .js-modal-close{position: absolute; right: 0.5em; top:0em; font-size: 2em; text-decoration: none;}
.modal-content .js-modal-close+img{width:90%; height: auto; margin:auto;}
.modal-content .js-modal-close+img+a{position: absolute; bottom: 1em; width:auto; left: 1em;}
.modal-content .js-modal-close+img+a+a{position: absolute; bottom: 1em; width: auto; right: 1em;}

.modal-content .js-modal-close+img+a+a+a{position: absolute; bottom: calc(1em - 12px); width: auto; left: calc(50% - 19px);}
.modal-content .js-modal-close+img+a+a+a>img{width:38px; height:auto;}

@media screen and (max-width: 500px) {
    .modal-content{width: 80%; height: 60%;}
    /**/
    .modal-content .js-modal-close+img+p{width:calc(50% - 0em); padding: 0 1em;}
}

.js-modal-open{text-align: right;}
.js-modal-open a{padding: 4px 12px; background: #242269; border: 1px solid #242269; border-radius: 4px; color: #FFF;}
.js-modal-open a:hover{background: #FFF; color:#242269; cursor: pointer;}
.close_btn{margin-top: 10px;}

.side_column_v2 ul li.blog_search{text-align: right;}
.side_column_v2 ul li.blog_search form{width: auto; padding: 10px 10px 10px 0; text-align: center; display: block;}
.side_column_v2 ul li.blog_search form input[type="text"]{width: 100%; margin: auto auto 10px;}
.side_column_v2 ul li.blog_search form input[type="submit"]{width: 60%; margin: auto;}