@charset "UTF-8";

/**********************************
コラムリスト
**********************************/

.column_list{
  width:100%;
  text-align:center;
  padding:0;
}

.column_list .column_item{
  width:90%;
  height:260px;
  margin:5% auto;
  padding:0;
  background-color:#ffffff;
  box-sizing:border-box;
  position:relative;
  display:block;
  /**border-bottom:1px solid #999999;**/
}

.column_list .column_item_ad{
  width:324px;
  margin:6px auto;
  display:block;
}

@media (min-width: 768px) {
.column_list .column_item, .column_list .column_item_ad{
  display:inline-block;
}
}

.column_list .column_tmb {
  width:100%;
  height: 200px;
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
}
.column_list .column_title{
  height:60px;
  width:100%;
  margin-top:6px;
  font-size:1.1em;
  line-height:20px;
  padding:3px;
  box-sizing:border-box;
  color:#555555;
  text-align:left;
      display:block;
  display:-webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}
.column_list .column_intro{
  width:100%;
  height:30px;
  line-height:15px;
  margin-top:12px;
  font-size:12px;
  padding:3px;
  box-sizing:border-box;
  color:#727272;
  text-align:left;
  display:block;
  display:-webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}
.column_list .column_more{
  width:104px;
  height:30px;
  line-height:30px;
  border:1px solid #efc669;
  border-radius:3px;
  position:absolute;
  right:14px;
  bottom:12px;
  font-size:13px;
  color:#4c4c4c;
  text-align:center;
}

/*もっと見る*/
.column_see_more{
	display:block;
	background-color:#fea32c;
	border-radius:0 0 4px 4px;
	width:80%;
	padding:3px;
	margin:0 auto;
	color:#ffffff;
	font-weight:bold;
	text-align:center;
}


/**********************************
関連コラムリスト
**********************************/

.column_related_list{
  background-color:#ffffff;
  width:100%;
  text-align:center;
  padding:0;
}

.column_related_list .column_item{
  width:90%;
  height:100px;
  margin:3% auto;
  padding:0;
  box-sizing:border-box;
  position:relative;
  /**border-bottom:1px solid #999999;**/
}

.column_related_list .column_item_ad{
  width:324px;
  margin:3px auto;
  display:block;
  border-bottom:1px solid #999999;
}

@media (min-width: 768px) {
.column_related_list .column_item, .column_related_list .column_item_ad{
  display:inline-block;
}
}

.column_related_list .column_tmb {
  position:absolute;
  width:40%;
  top:5%;
  left:0;
  height: 90%;
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
}
.column_related_list .column_title{
  position:absolute;
  height:80px;
  width:55%;
  top:6px;
  right:0;
  font-size:1em;
  line-height:1.5em;
  padding:3px 5px;
  box-sizing:border-box;
  color:#555555;
  text-align:left;
  display:block;
  display:-webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}
.column_related_list .column_intro{
  position:absolute;
  width:75%;
  height:30px;
  top:26px;
  right:0;
  line-height:15px;
  margin-top:12px;
  font-size:12px;
  padding:0 5px;
  box-sizing:border-box;
  color:#727272;
  text-align:left;
  display:block;
  display:-webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.column_related_list .column_more{
  position:absolute;
  right:5px;
  bottom:5px;
  width:40%;
  height:30px;
  line-height:30px;
  border:1px solid #999999;
  border-radius:3px;
  font-size:13px;
  color:#999999;
  text-align:center;
}

/*Lサイズ表示*/
.column_related_list .column_item_l{
  position:relative;
  width:324px;
  height:230px;
  margin:6px auto;
  box-sizing:border-box;
  border-bottom:1px solid #999999;
}
.column_related_list .column_item_l .column_tmb{
  width:324px;
  height:170px;
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  display:block;
  position:static;
}
.column_related_list .column_item_l .column_title{
  position:static;
  font-size:12px;
  line-height:16px;
  padding:3px 5px;
  width:100%;
  height:20px;
  box-sizing:border-box;
  color:#313131;
  text-align:left;
  display:block;
  display:-webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

/**********************************
コラムカテゴリ
**********************************/

.column_cate_list{
	width:90%;
	margin:10px auto;
	text-align:center;
	height:30vw;
}

.column_cate_list .column_cate, .column_cate_list .column_cate_now {
	display: inline-block;
	background-color:#ffffff;
	width: 31%;
	margin:0 1%;
	margin-bottom:4px;
	height:36px;
	line-height:30px;
	float: left;
	padding:3px;
	box-sizing:border-box;
	text-align:center;
	border:1px solid #777777;
	text-align:center;
	color:#777777;
	border-radius:4px;
}

.column_cate_list .column_cate_now {
	border:1px solid #ff8000;
	color:#ff8000;
}


.column_cate_list .column_cate:after{
	clear: both;
	content: '';
	display: block;
}

/**********************************
コラム記事
**********************************/

 /* Post */
.column_block {
color:#767676;
padding: 10px;
}

h1.column_header {
  font-size: 1.3em;
  line-height: 1.5em;
  letter-spacing: 0.05em;
  text-align: left;
  padding-bottom: 5px;
  padding-left: 10px;
  margin-bottom: 10px;
  color:#767676;
  border-bottom: 1px solid #767676;
  background-color:#ffffff;
}

.column_chapter_list{
	display:block;
	background-color:#E8E6E6;
	width:100%;
	padding:12px;
	box-sizing:border-box;
	border-radius:8px;
	font-size:0.9em;
}
.column_chapter_list a{
	display:block;
	color:#767676;
	font-size:0.8em;
	margin:6px 0;
}

.column_body h2.chapter_title {
  font-size: 1.1em;
  line-height: 1.3em;
  letter-spacing: 0.05em;
  text-align: left;
  padding-bottom: 5px;
  padding-left: 10px;
  margin:16px 0;
  color:#612e2e;
  border-bottom: 2px solid #930606;
  background-color:#ffffff;
}

.column_body h3 {
  padding: 0.25em 0.5em;
  color: #494949;
  background: transparent;
  border-left: solid 5px #7db4e6;
  margin:10px auto;
}


.column_head {
  background: #fff;
  box-shadow: 1.5px 2.598px 2.4px 0.6px rgba(93, 93, 93, 0.3);
  padding: 0 15px;
  padding-bottom:15px;
  margin-bottom:20px;
}

.column_head .thumb {
  height: 240px;
  margin: 0 -15px 15px -15px;
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
}

.column_head .data {
  color: #fe8aa0;
  margin-bottom: 8px;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  align-items: center;
  -webkit-align-items: center;
  font-size: 0.7em;
}
.column_head .data .name {
  width:65%;
}
.column_head .data .date {
  width:35%;
  text-align:right;
}

.column_head .introduction {
  font-size: 1em;
  line-height: 1.2em;
  padding-bottom:14px;
}

.column_body {
  padding: 20px 10px;
  background-color:#ffffff;
}

.column_body .description, .column_body .article {
  font-size: 0.9em;
  line-height: 1.5em;
  margin-bottom:14px;
}

.column_body .image{
	text-align:center;
}
.column_body .image img{
  max-height: 220px;
  max-width:100%;
  margin:0;
}

.column_sub_img{
  width:100%;
}

fieldset.linked_column{
 	border-radius:4px;
 	border:1px solid orange;
 	width:90%;
 	margin:10px auto;
 }

 fieldset.linked_column legend{
 	background-color:orange;
 	color:white;
 	border-radius:10px;
 	padding:6px;
 	position:relative;
 }

 fieldset.linked_column legend::after{
 content: "";
 position: absolute;
 left: 20px;
 bottom: -18px;
 margin-top: -10px;
 width: 0px;
 height: 0px;
 border-right: 10px solid transparent;
 border-top: 10px solid orange;
 border-left: 10px solid transparent;
 border-bottom: 10px solid transparent;
 z-index: -1;
 }

 span.linked{
 	padding:4px;
 	background-color:orange;
 	font:white;
 }


/*もっと読む機能*/
.first_chapter_text_bg{
	position:relative;
	width:100%;
	height:25em;
    color: #cccccc;
	display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.first_chapter_text_ft{
	position:absolute;
	top:0;
	width:100%;
	height:5em;
	display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    color: #333333;
    -webkit-mask-image: -webkit-gradient(linear, left top, left bottom,
    from(rgba(0,0,0,1)), to(rgba(0,0,0,0)));
}

.first_chapter_contents img{
	width:100%;
}

.first_chapter_text_bg a.read_more{
	position:absolute;
	width:90%;
	left:5%;
	top:20vw;
	background-color:#e64093;
	color:#ffffff;
	padding:3px;
	font-weight:bold;
	text-align:center;
	z-index:2;
	font-size:18px;
}

.first_chapter_text_bg .column_ad{
	position:absolute;
	width:100%;
	height:60vw;
	top:30vw;
	left:0;
	background-color:rgba(255,255,255,0.5);
	text-align:center;
	z-index:2;
}

.column_body .first_article {
  font-size: 0.9em;
  line-height: 1.5em;
  margin-bottom:14px;
  height:5em;
	display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    color: #333333;
    -webkit-mask-image: -webkit-gradient(linear, left top, left bottom,
    from(rgba(0,0,0,1)), to(rgba(0,0,0,0)));
}


/*ページング*/
.paging{
 text-align:center;
 margin-top:4px;
 margin-bottom:10px;
}
.paging span, .paging a{
 display:inline-block;
 padding:6px 10px;
 font-weight:solid;
 border:1px solid orange;
 color:orange;
 text-decoration:none;
}
.paging span.active{
 background-color:orange;
 color:white;
}

.next_preview{
 width:80%;
 margin:10px auto;
 margin-left:7%;
 padding:6px 0 6px 10px;
 border:1px solid #FEA32C;
 box-sizing:border-box;
 position:relative;
 background-color:#FEA32C;
 color:#ffffff;
}


.next_preview::before, .next_preview::after{
  content: '';
  display: block;
  height: calc(100% + 2px);
  width: 120px;
  position: absolute;
  top: -1px;
  -webkit-clip-path: polygon(0 0, 0% 100%, 30px 50%);
          clip-path: polygon(0 0, 0% 100%, 30px 50%);
  background: inherit;
  z-index: 1;
  right: -120px;
  background: #FEA32C;
}