@charset "utf-8";

#maincontents {
  color: #333;
  font-size: .8rem;
}

/*--------お知らせ--------*/
#maincontents h1 {
  width: 100%;
  height: 50px;
  padding: 15px;
  background-color: #eeeeef;
  text-align: center;
  margin: 2.5% 0;
  font-size: 16px;
}

.feature {
  display: flex;
  flex-wrap: wrap;
  margin: 4% 0;
  padding: 0 1%;
}

.s-midasi {
  font-size: .8rem;
  font-weight: bold;
  padding: 4% 4% 0 4%;
}

.article-text {
  text-align: justify;
  padding: 2% 4%;
  font-size: .7rem;
  padding: 2% 4% 4% 4%;
}

/*==========================================
	ピックアップ
==========================================*/
.pickup {
  width: 100%;
}

.main-img, .tokusyu .main-banner {
  width: 100%;
}

/*==========================================
	特集一覧
==========================================*/
.feature-list {
  display: inline-block;
  font-size: .75rem;
  width: calc(100%/2);
  max-width: 214px;
  height: auto;
  vertical-align: top;
  margin-bottom: 3%;
  padding: 1%;
}

.feature a {
  width: 100%;
  height: auto;
  display: inline-block;
}

.feature img {
  width: 100%;
}

/*------------------------
	単発　下から上にフェードイン
------------------------*/
.i-fade {
  animation-name: fadein;
  animation-duration: 2s;
}

@keyframes fadein {
  from {
    opacity: 0;
    transform: translateY(10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/*==========================================
	用途一覧
==========================================*/
.log {
  margin-top: 10%;
}

/*対応タブ一覧　ランキングライブラリ*/
#ranking-towel:checked~#ranking-towel_content,
#ranking-gulmet:checked~#ranking-gulmet_content,
#ranking-catalog:checked~#ranking-catalogt_content {
  display: block;
  animation-name: fadein;
  animation-duration: 1s;
}

/*対応タブ一覧　*/
#catalog:checked~#catalog_content,
#towel:checked~#towel_content,
#other:checked~#other_content,
#aroma:checked~#aroma_content,
#sweet:checked~#sweet_content,
#pearents:checked~#pearents_content,
#jyousi:checked~#jyousi_content,
#friends:checked~#friends_content,
#partner:checked~#partner_content,
#child:checked~#child_content {
  display: block;
  animation-name: fadein;
  animation-duration: 1s;
}

@keyframes fadein {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

/*タブ    選択中の表示    通常*/
.tabs input:checked+.tab_item {
  /* color: #3D3A39; */
  background-color: #FFF;
  border-bottom: #FFF;
}

/*タブ    選択中の表示    ピックアップ*/
.ct-tabs input:checked+.ct-tab_item {
  color: #3D3A39;
  background-color: #FFF;
  border-bottom: #FFF;
}