/*
 * Tips
 */
#title_view_tips {
  background:url(../img/bg/content_bg_support.jpg) center center no-repeat;
  background-size:cover;
}

/* タグ */
.tips-tag {
  display:inline-block;
  padding:0.15em 0.8em;
  margin:0 0.4em 0.4em 0;
  font-size:0.75rem;
  color:#1a8fc0;
  background-color:#e8f6fc;
  border-radius:999px;
}

/* 一覧: 絞り込みボタン */
.tips-filter-btn {
  display:inline-block;
  padding:0.4em 1.2em;
  margin:0 0.5em 0.5em 0;
  border:1px solid #22AEE6;
  border-radius:999px;
  background-color:#fff;
  color:#22AEE6;
  font-size:0.9rem;
  cursor:pointer;
  transition:background-color 0.2s, color 0.2s;
}

.tips-filter-btn:hover,
.tips-filter-btn.active {
  background-color:#22AEE6;
  color:#fff;
}

.tips-filter-btn:focus {
  outline:none;
}

/* 一覧: カード */
.tips-card {
  display:block;
  height:100%;
  padding:1.2rem 1.4rem;
  background-color:#fff;
  border:1px solid #e3e3e3;
  border-top:3px solid #22AEE6;
  border-radius:4px;
  color:#212529;
  transition:box-shadow 0.2s, transform 0.2s;
}

.tips-card:hover {
  color:#212529;
  text-decoration:none;
  box-shadow:0 4px 14px rgba(0, 0, 0, 0.1);
  transform:translateY(-2px);
}

.tips-card-title {
  font-size:1rem;
  font-weight:bold;
  line-height:1.5;
  margin:0.3rem 0 0.6rem;
}

.tips-card-text {
  font-size:0.85rem;
  color:#555;
  margin-bottom:0;
}

/* 記事 */
#tips .tips-meta {
  margin-bottom:1.5rem;
}

#tips .tips-body {
  line-height:1.9;
  word-break:break-word;
}

#tips .tips-body h2 {
  font-size:1.35rem;
  font-weight:bold;
  margin:2.5rem 0 1rem;
  padding:0.4em 0.6em;
  border-left:5px solid #22AEE6;
  background-color:#f5fbfe;
}

#tips .tips-body h3 {
  font-size:1.15rem;
  font-weight:bold;
  margin:2rem 0 0.8rem;
  padding-bottom:0.3em;
  border-bottom:2px solid #e3e3e3;
}

#tips .tips-body h4,
#tips .tips-body h5,
#tips .tips-body h6 {
  font-size:1rem;
  font-weight:bold;
  margin:1.5rem 0 0.6rem;
}

#tips .tips-body > :first-child {
  margin-top:0;
}

#tips .tips-body p {
  margin-bottom:1.2rem;
}

#tips .tips-body img {
  display:block;
  max-width:100%;
  height:auto;
  margin:0.8rem 0 1.2rem;
  border:1px solid #e3e3e3;
  border-radius:4px;
}

#tips .tips-body ul,
#tips .tips-body ol {
  margin-bottom:1.2rem;
  padding-left:1.6em;
}

#tips .tips-body blockquote {
  margin:0 0 1.2rem;
  padding:0.8rem 1.2rem;
  background-color:#f7f7f7;
  border-left:4px solid #ccc;
}

#tips .tips-body blockquote p:last-child {
  margin-bottom:0;
}

#tips .tips-body pre {
  margin-bottom:1.2rem;
  padding:1rem;
  background-color:#2d2d2d;
  color:#f1f1f1;
  border-radius:4px;
  overflow-x:auto;
  line-height:1.6;
}

#tips .tips-body pre code {
  color:inherit;
  background:none;
  padding:0;
}

#tips .tips-body code {
  color:#c7254e;
  background-color:#f9f2f4;
  padding:0.1em 0.4em;
  border-radius:3px;
}

#tips .tips-body hr {
  margin:2rem 0;
}

/* Q&A形式の記事の冒頭 */
#tips .tips-question {
  margin-bottom:2rem;
  padding:1rem 1.4rem;
  background-color:#fffaeb;
  border:1px solid #fae3a0;
  border-left:5px solid #FABF00;
  border-radius:4px;
}

#tips .tips-question .tips-question-label {
  font-weight:bold;
  color:#b38700;
  margin-bottom:0.4rem;
}

#tips .tips-question p:last-child {
  margin-bottom:0;
}

/* 注意書き */
#tips .tips-body .tips-note {
  padding:0.8rem 1.2rem;
  background-color:#e8f6fc;
  border-left:4px solid #22AEE6;
  border-radius:4px;
}

#tips .tips-video {
  margin:0.8rem 0 1.5rem;
}

#tips .tips-download {
  display:inline-block;
  padding:0.3em 1em;
  border:1px solid #22AEE6;
  border-radius:4px;
}

#tips .tips-download::before {
  content:"\2193  ";
}

#tips .tips-back {
  margin:3rem 0 2rem;
}

#tips .tips-related-title {
  font-size:1rem;
  font-weight:bold;
  padding:0.5em;
  margin-bottom:1rem;
  border-bottom:solid 1px rgb(158, 158, 158);
}