@charset "utf-8";

/* *****************
howto-artcle CSS
******************** */

/*
 * カラー
 * #DE5B62 : ベース
 * #b03037 : DIY
 * #337ab7 : インテリア
 * #e97a20 : 暮らし
 * #00ac98 : 収納
 * #5c9b55 : 園芸
 * #9b81bf : ペット
 */

/* ---------------------------------
# link
--------------------------------- */

#howto-article a {
  color: #a20007;
  text-decoration: underline;
}

/* ---------------------------------
## hover
--------------------------------- */

#howto-article a:hover {
  text-decoration: none;
}

/* ---------------------------------
# number
--------------------------------- */
.number {
  counter-reset: number;
}

.number-child {
  counter-reset: number-child;
}

.number-child h3::before {
  content: ''  counter(number-child) '.';
  counter-increment: number-child;
  padding-right: .2273em;
}

/* ---------------------------------
# layout
--------------------------------- */

.howto-article .container {
  max-width: 1000px;
}

.howto-article-inner,
.howto-pickup,
.howto-item,
.howto-description,
.howto-article-tag {
  margin-bottom: 100px;
}

/* ---------------------------------
## category
--------------------------------- */

.find-category {
  background: #fbfbfb;
  border-radius: 4px;
  box-shadow: 0 3px 10px 0 rgba(0, 0, 0, .16);
  margin: -.28571em -.14285em;
  /* padding: 0 1.0714em 0 1.0714em; */
  padding: 20px 40px;
}

.howto-article-category {
  display: inline-block;
  font-size: 1.4rem;
  margin: -.28571em -.14285em;
}

.category-link {
  background-color: rgba(255, 255, 255, .9);
  border-radius: 4px;
  display: inline-block;
  font-size: 1.4rem;
  margin: .28571em .14285em;
  padding: .21428em .71428em;
  transition: all .2s ease;
  white-space: nowrap;
}

.category-link.diy {
  border: 1px solid rgba(176, 48, 55, .2);
  color: rgba(176, 48, 55, 1);
}

.category-link.interior {
  border: 1px solid rgba(51, 122, 183, .2);
  color: rgba(51, 122, 183, 1);
}

.category-link.living {
  border: 1px solid rgba(233, 122, 32, .2);
  color: rgba(233, 122, 32, 1);
}

.category-link.storage {
  border: 1px solid rgba(0, 172, 152, .2);
  color: rgba(0, 172, 152, 1);
}

.category-link.gardening {
  border: 1px solid rgba(73, 181, 59, .2);
  color: rgba(92, 155, 85, 1);
}

/* ---------------------------------
### category Hover
--------------------------------- */

.category-link.diy:hover {
  background: #b03037;
  color: #fff;
}

.category-link.interior:hover {
  background: #337ab7;
  color: #fff;
}

.category-link.living:hover {
  background: rgba(233, 122, 32, 1);
  color: #fff;
}

.category-link.storage:hover {
  background: rgba(0, 172, 152, 1);
  color: #fff;
}

.category-link.gardening:hover {
  background: rgba(92, 155, 85, 1);
  color: #fff;
}


/* ---------------------------------
## tag
--------------------------------- */

.find-tag {
  background: #fbfbfb;
  border-radius: 4px;
  box-shadow: 0 3px 10px 0 rgba(0, 0, 0, .16);
  font-size: 1.4rem;
  margin: -.28571em -.14285em;
  /* padding: 0 1.0714em 0 1.0714em; */
  padding: 20px 40px;
}

.tag-link {
  background-color: rgba(255, 255, 255, .9);
  border: 1px solid rgba(0, 0, 0, .1);
  border-radius: 4px;
  color: #5a5a5a;
  display: inline-block;
  font-size: 1.4rem;
  margin: .28571em .14285em;
  padding: .21428em .71428em;
  transition: all .2s ease;
  white-space: nowrap;
}

.tag-link::before {
  color: #de5b62;
  content: '\f02b';
  font-family: 'Font Awesome 5 Free';
  font-weight: bold;
  margin-right: .35714em;
}

.tag-link:hover {
  color: #b03037;
}

/* ---------------------------------
# pickup
--------------------------------- */

.howto-article-meta {
  margin-bottom: 30px;
}

.howto-article-time {
  display: inline-block;
  font-size: 2rem;
  margin-right: .4em;
  vertical-align: middle;
}

.howto-article-category {
  display: inline-block;
  font-size: 1.4rem;
  margin: -.28571em -.14285em;
}

.howto-pickup-inner {
  background-color: #fbfbfb;
  border-radius: 4px;
  box-shadow: 0 2px 10px rgba(33, 61, 97, .12);
  padding: 60px 30px 30px;
}

.pickup-iframe-container {
  text-align: center;
}

.pickup-text-container {
  background-color: #fbfbfb;
  line-height: 1.5;
  padding: 30px;
  width: 100%;
}

.pickup-heading {
  color: #000;
  color: #5a5a5a;
  font-size: 2.8rem;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-weight: 600;
  padding-bottom: .71428em;
}

.pickup-text {
  font-size: 2rem;
}

/* ---------------------------------
# item
--------------------------------- */

.item-contents {
  margin-bottom: 50px;
}

.item-container img {
  margin-bottom: 20px;
}

.item-container p {
  font-size: 2rem;
  letter-spacing: .05em;
  line-height: 1.5;
  margin-bottom: 1em;
}

/* 767px以下
--------------------------------- */

@media screen and (max-width: 767px) {

  /* ---------------------------------
  # layout
  --------------------------------- */

  .howto-article-inner,
  .howto-pickup,
  .howto-item,
  .howto-description,
  .howto-article-tag {
    margin-bottom: 13.0378%;
  }

  /* ---------------------------------
  ## category
  --------------------------------- */

  .find-category {
    font-size: 1.2rem;
    /* padding: 0; */
    padding: 2.6076% 5.2151%;
  }

  .category-link {
    font-size: 1.2rem;
  }

  /* ---------------------------------
  ## tag
  --------------------------------- */

  .find-tag {
    font-size: 1.2rem;
    /* padding: 0; */
    padding: 2.6076% 5.2151%;
  }

  .tag-link {
    font-size: 1.2rem;
  }

  /* ---------------------------------
  ## iframe
  --------------------------------- */

  .pickup-iframe-container {
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    padding-top: 56.25%;
    position: relative;
    width: 100%;
  }

  .pickup-iframe-container iframe {
    border: none;
    display: block;
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
  }

  /* ---------------------------------
  # pickup
  --------------------------------- */

  .howto-pickup-inner {
    padding: 7.8227% 3.9113% 3.9113%;
  }

  .pickup-text-container {
    padding: 3.9113%;
  }

  .pickup-heading {
    font-size: 2rem;
    padding-bottom: .75em;
  }

  .pickup-text {
    font-size: 1.6rem;
  }

  .howto-article-meta {
    margin-bottom: 20px;
  }

  .howto-article-time {
    font-size: 1.8rem;
  }

  /* ---------------------------------
  # item
  --------------------------------- */

  .item-contents {
    margin-bottom: 6.5189%;
  }

  .item-container img {
    margin-bottom: 18px;
  }

  .item-container p {
    font-size: 1.8rem;
  }
}

/**
 * 画像・キャプションの組み合わせのスタイル
 *
 * ムサシからのインポート（クラシックブロック）
 */
.description-container p:has(img) {
	margin-bottom: 20px;

	@media (width < 768px) {
		margin-bottom: 10px;
	}
}

.description-container p:not(:has(img)) {
	margin-bottom: 40px;

	@media (width < 768px) {
		margin-bottom: 20px;
	}
}

/**
 * 画像・キャプションの組み合わせのスタイル
 *
 * 新規作成記事（ブロックエディター）
 */
.entry-content p + figure {
	margin-top: 50px;
	margin-bottom: 20px;

	@media (width < 768px) {
		margin-top: 40px;
		margin-bottom: 10px;
	}
}