@charset "UTF-8";
/*--------------------*
Moonコラム（PC）
*--------------------*/
/* JSON 読み込み前は欄ごと隠す（JS が読み込み後に外す） */
#main_bdy_left #mn-column.is_loading{
  display: none;
}
#main_bdy_left #mn-column{
  width: 710px;
  margin: 0 auto 32px;
}
#main_bdy_left #mn-column .mn-column_hdr{
  margin: 33px auto 12px;
  padding: 8.5px 0 8.5px 44px;
  font-family: maru-maru-gothic-bsr-stdn, sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 14px;
  color: #1F2121;
  text-align: left;
  background: url("https://630hso4ag2.user-space.cdn.idcfcloud.net/image/moon/keywords_moon.svg") no-repeat 20px 50%,#DAE2E2;
  border-radius: 8px 8px 0 0;
}
#main_bdy_left #mn-column .mn-column_bdy > input{
  display: none;
}

/* カテゴリ切替ボタン */
#main_bdy_left #mn-column .mn-column_navi{
  display: flex;
  justify-content: space-between;
  width: 350px;
  margin: 20px auto 12px;
  padding: 0;
  list-style: none;
}
#main_bdy_left #mn-column .mn-column_navi li{
  flex: 1 1 0%;
  min-width: 0;
  margin: 0;
}
#main_bdy_left #mn-column .mn-column_navi li + li{
  margin-left: 8px;
}
#main_bdy_left #mn-column .mn-column_navi label{
  display: block;
  padding: 10px 16px;
  font-size: 13px;
  line-height: 1;
  font-weight: 400;
  color: #1F2121;
  background-color: #fff;
  border-radius: 16px;
  text-align: center;
  cursor: pointer;
}
#main_bdy_left #mn-column .mn-column_navi label:hover{
  opacity: 0.7;
}
#main_bdy_left #mn-column #mn-column_cat_all:checked ~ .mn-column_navi label[for="mn-column_cat_all"],
#main_bdy_left #mn-column #mn-column_cat_love:checked ~ .mn-column_navi label[for="mn-column_cat_love"],
#main_bdy_left #mn-column #mn-column_cat_marriage:checked ~ .mn-column_navi label[for="mn-column_cat_marriage"],
#main_bdy_left #mn-column #mn-column_cat_work:checked ~ .mn-column_navi label[for="mn-column_cat_work"],
#main_bdy_left #mn-column #mn-column_cat_money:checked ~ .mn-column_navi label[for="mn-column_cat_money"]{
  color: #fff;
  background-color: #4B93B1;
  opacity: 1;
}

/* リスト枠 */
#main_bdy_left #mn-column .mn-column_box{
  box-sizing: border-box;
  width: calc(100% - 13px);
  margin: 0 auto;
  padding: 20px 24px;
  background-color: #fff;
  border-radius: 8px;
}
#main_bdy_left #mn-column .mn-column_list{
  margin: 0;
  padding: 0;
  list-style: none;
}
#main_bdy_left #mn-column .mn-column_list li{
  margin: 0 0 16px;
}
#main_bdy_left #mn-column .mn-column_list li:last-child{
  margin-bottom: 0;
}
#main_bdy_left #mn-column .mn-column_list li a{
  display: flex;
  font-size: 14px;
  line-height: 1.6;
  font-weight: 700;
  color: #4B93B1;
  text-decoration: none;
}
#main_bdy_left #mn-column .mn-column_list li a:hover{
  opacity: 0.7;
}
#main_bdy_left #mn-column .mn-column_list li a::before{
  content: "\30FB";
  flex: none;
}
/* タイトル：2行で省略。
   既定（JSなし／収まる場合）：-webkit-line-clamp で2行クランプ。バッジは本文の直後にインラインで続く。
   溢れる場合は JS（mn-column.js）が .is_over を付けてバッジを先頭に移し、右端バッジ＋「…」の表示に切り替える */
#main_bdy_left #mn-column .mn-column_ttl{
  flex: 1 1 auto;
  min-width: 0;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

/* カテゴリ名バッジ（本文の直後に続く） */
#main_bdy_left #mn-column .mn-column_badge{
  display: inline-block;
  box-sizing: border-box;
  width: 38px;
  margin-left: 6px;
  padding: 0 7px;
  font-size: 10px;
  line-height: 16px;
  font-weight: 700;
  color: #fff;
  background-color: #EE6B62;
  border-radius: 9px;
  text-align: center;
  vertical-align: middle;
  white-space: nowrap;
}

/* ---- 溢れている（.is_over）とき ---- */
#main_bdy_left #mn-column .mn-column_ttl.is_over{
  display: block;
  max-height: 3.2em;
}
/* 1行目の右端に置く幅0の float。固定バッジを2行目から始める土台で、「…」もここに描く */
#main_bdy_left #mn-column .mn-column_ttl.is_over::before{
  content: "\2026";
  float: right;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  width: 0;
  height: 1.6em;
  line-height: 0;
  transform: translate(-41px, 0.8em);
}
/* バッジ：JS が .is_over と同時に .mn-column_ttl の先頭へ移動させる。2行目の右端に float。margin-left に「…」の分を含める */
#main_bdy_left #mn-column .mn-column_ttl.is_over .mn-column_badge{
  float: right;
  clear: both;
  margin: 3px 0 0 20px;
}

/* 表示件数制御（「全て」かつ未展開のとき11件目以降を隠す・上限20件） */
#main_bdy_left #mn-column #mn-column_cat_all:checked ~ #mn-column_more:not(:checked) ~ .mn-column_box .mn-column_list li:nth-child(n+11){
  display: none;
}
#main_bdy_left #mn-column .mn-column_list li:nth-child(n+21){
  display: none;
}

/* カテゴリ絞り込み */
#main_bdy_left #mn-column #mn-column_cat_love:checked ~ .mn-column_box .mn-column_list li:not(.cat_love),
#main_bdy_left #mn-column #mn-column_cat_marriage:checked ~ .mn-column_box .mn-column_list li:not(.cat_marriage),
#main_bdy_left #mn-column #mn-column_cat_work:checked ~ .mn-column_box .mn-column_list li:not(.cat_work),
#main_bdy_left #mn-column #mn-column_cat_money:checked ~ .mn-column_box .mn-column_list li:not(.cat_money){
  display: none;
}

/* もっと見る／閉じる */
#main_bdy_left #mn-column .mn-column_more_wrap{
  margin: 16px 0 0;
  text-align: center;
}
#main_bdy_left #mn-column .mn-column_more_btn{
  display: inline-block;
  font-family: maru-maru-gothic-bsr-stdn, sans-serif;
  font-style: normal;
  padding: 10px 20px 10px 22px;
  font-size: 13px;
  line-height: 1.3;
  font-weight: 400;
  color: #1F2121;
  background-color: #fff;
  border: 1px solid #1F2121;
  border-radius: 20px;
  cursor: pointer;
}
#main_bdy_left #mn-column .mn-column_more_btn:hover{
  opacity: 0.7;
}
#main_bdy_left #mn-column .mn-column_more_btn::after{
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-left: 8px;
  border-right: 1.5px solid #1F2121;
  border-bottom: 1.5px solid #1F2121;
  transform: rotate(45deg);
  vertical-align: 2px;
}
#main_bdy_left #mn-column .mn-column_more_btn .close{
  display: none;
}
#main_bdy_left #mn-column #mn-column_more:checked ~ .mn-column_box .mn-column_more_btn .open{
  display: none;
}
#main_bdy_left #mn-column #mn-column_more:checked ~ .mn-column_box .mn-column_more_btn .close{
  display: inline;
}
#main_bdy_left #mn-column #mn-column_more:checked ~ .mn-column_box .mn-column_more_btn::after{
  transform: rotate(-135deg);
  vertical-align: -2px;
}
/* 10件以下ならボタン非表示・カテゴリ絞り込み中も非表示 */
#main_bdy_left #mn-column .mn-column_list:not(:has(li:nth-child(11))) + .mn-column_more_wrap,
#main_bdy_left #mn-column .mn-column_cat:checked:not(#mn-column_cat_all) ~ .mn-column_box .mn-column_more_wrap{
  display: none;
}