@charset "UTF-8";
/****************************************

	プラグインの代わりにテーマで持つ機能のスタイル
	（リンクカード・投稿のカテゴリータブ・メールフォーム）

*****************************************/

/****************************************
	リンクカード [blogcard]
*****************************************/

.sp-linkcard {
  margin: 2rem 0;
}

.sp-linkcard__link {
  display: flex;
  gap: 1.6rem;
  padding: 1.6rem;
  border: 1px solid #E2E2E2;
  border-radius: 6px;
  background: #fff;
  color: #333333;
  text-decoration: none;
  transition: box-shadow .2s, transform .2s;
}

.sp-linkcard__link:hover {
  box-shadow: 0 4px 14px rgba(0, 0, 0, .1);
  transform: translateY(-1px);
  opacity: 1;
}

.sp-linkcard__img {
  flex: 0 0 160px;
}

.sp-linkcard__img img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border-radius: 4px;
}

.sp-linkcard__body {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.sp-linkcard__title {
  font-weight: 700;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.sp-linkcard__excerpt {
  margin-top: .6rem;
  font-size: .875em;
  color: #666;
  line-height: 1.6;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.sp-linkcard__site {
  margin-top: auto;
  padding-top: .6rem;
  font-size: .75em;
  color: #2497DF;
}

.sp-linkcard--external .sp-linkcard__site::after {
  content: " ↗";
}

@media (max-width: 575px) {
  .sp-linkcard__link {
    gap: 1rem;
    padding: 1rem;
  }

  .sp-linkcard__img {
    flex-basis: 110px;
  }

  .sp-linkcard__excerpt {
    display: none;
  }
}

/****************************************
	投稿のカテゴリータブ
*****************************************/

.post-cat-nav {
  margin-bottom: 3rem;
}

.post-cat-nav__list {
  display: flex;
  flex-wrap: wrap;
  gap: .8rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.post-cat-nav__list--child {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px dashed #D3D1CB;
}

.post-cat-nav__item {
  display: inline-block;
  padding: .6rem 1.6rem;
  border: 1px solid #2497DF;
  border-radius: 999px;
  background: #fff;
  color: #2497DF;
  font-size: .9375em;
  font-weight: 700;
  line-height: 1.4;
  text-decoration: none;
}

.post-cat-nav__list--child .post-cat-nav__item {
  padding: .4rem 1.2rem;
  border-color: #D3D1CB;
  color: #333333;
  font-weight: 400;
}

.post-cat-nav__item:hover,
.post-cat-nav__item.is-current {
  background: #2497DF;
  border-color: #2497DF;
  color: #fff;
  opacity: 1;
}

.post-cat-description {
  margin: -1rem 0 2rem;
}

/****************************************
	メールフォーム（Contact Form 7 と同じクラス名）
*****************************************/

.sp-form-hp {
  position: absolute !important;
  left: -9999px !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.wpcf7 form {
  position: relative;
}

.wpcf7-form-control-wrap {
  position: relative;
}

.wpcf7-not-valid-tip {
  display: block;
  margin-top: .4rem;
  color: #C70000;
  font-size: .875em;
  font-weight: 400;
}

.wpcf7-not-valid,
.wpcf7-form-control[aria-invalid="true"] {
  border-color: #C70000 !important;
}

.wpcf7-response-output:empty {
  display: none;
}

.wpcf7-response-output {
  margin: 2rem 0 0;
  padding: 1rem 1.4rem;
  border: 2px solid #FF8A00;
  background: #fff;
}

.wpcf7 form.sent .wpcf7-response-output {
  border-color: #00B54A;
}

.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.failed .wpcf7-response-output {
  border-color: #C70000;
}

/****************************************
	ハンバーガーメニュー（div から button に変更したため、ボタンの初期スタイルを消す）
*****************************************/

button.nav_btn {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  appearance: none;
}

button.nav_btn:focus-visible {
  outline: 2px solid #2497DF;
  outline-offset: 2px;
}

/****************************************
	本文の表（ブロックエディタの表など）に枠線を付ける
	（クラス付きの表・フォームの表は各自のスタイルを使うので対象外。
	  投稿は Cocoon のスタイルが優先されるよう、詳細度を低くしている）
*****************************************/

:where(.post-sec table:not(.mod-table01, .wpcf7 table, .wpcf7-form table)) {
  width: 100%;
  max-width: 100%;
  margin-bottom: 2rem;
  border-collapse: collapse;
}

:where(.post-sec table:not(.mod-table01, .wpcf7 table, .wpcf7-form table)) :is(th, td) {
  border: 1px solid #ccc;
  padding: 1rem 1.5rem;
  vertical-align: middle;
}

:where(.post-sec table:not(.mod-table01, .wpcf7 table, .wpcf7-form table)) th {
  background-color: #f5f6f7;
  font-weight: 700;
}

:where(.post-sec .wp-block-table) {
  overflow-x: auto;
  margin: 2rem 0;
}

@media (max-width: 767px) {
  :where(.post-sec table:not(.mod-table01, .wpcf7 table, .wpcf7-form table)) :is(th, td) {
    padding: 0.8rem 1rem;
  }
}

/****************************************
	リンク群 [link_group] の初期表示のアイコン
*****************************************/

.linkgroup__img--icon {
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: stretch;
  min-height: 80px;
}

.linkgroup__img--icon img {
  width: 48px;
  height: 48px;
  aspect-ratio: auto;
}