@charset "UTF-8";
:root {
  /*  --font-primary: "Lato", "Noto Sans JP", sans-serif;*/ /* メインフォント */
  /*--color-primary: #4f4c4c;*/ /* 主要なテキスト色 */
  /*--color-background: #fff;*/ /* 背景色 */
  /*--color-main: #73c6c4;*/ /*メインカラー*/
  --spacing-base: 1.8rem; /* ベースのスペーシング */
}

/*--
///////////////////////////////////////////////////////////
/////////////////////////// 基本の全体設定 ////////////////////
/// ///////////////////////////////////////////////////////
--*/
body {
  font-family: var(--font-primary);
  color: var(--color-primary);
  line-height: 1.6; /* 読みやすさを考慮 */
  font-size: 16px;
}
@media (max-width: 800px) {
  body {
    font-size: 14px;
  }
}

h1,
h2,
h3,
h4,
h5,
h6 {
  line-height: 1.4;
  margin-bottom: 0.5em;
}

h1 {
  font-size: 2em;
}

h2 {
  font-size: 1.6em;
}

h3 {
  font-size: 1.4em;
}

p {
  margin: var(--spacing-base) 0;
}

mark {
  background: linear-gradient(transparent 70%, #ffff77 40%);
  font-weight: 700;
  color: var(--color-primary);
}

/* ------------------フロントページ */
.module-Article_Container {
  margin-bottom: 30px;
}

/* ------------------投稿ページ */
.tips_content {
  font-size: 18px;
  line-height: 1.8;
}
@media screen and (max-width: 800px) {
  .tips_content {
    font-size: 16px;
  }
}

.kv_txt h1 {
  margin: 0;
  /*font-size: 2.4rem;*/
}

.single {
  margin-bottom: 50px !important;
}

.module-Article_Item_Cat-single {
  display: flex;
  align-items: center;
}

.module-Article_Item_Cat-single a {
  /* display: block; */
  color: white;
  padding: 5px 20px;
  border-radius: 50px;
  background-color: gray;
}

.content-Tags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px 10px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.content-Tags li {
  border-radius: 50px;
}

.content-Tags a {
  display: block;
}

.content-Tags a::before {
  content: "# ";
}

.wp-block-image {
  /*    margin: 40px 0 !important;*/
}

.wp-block-group {
  margin: 30px 0;
}

section.wp-block-group {
  margin-top: -50px;
  padding-top: 100px;
}

.wp-block-buttons > .wp-block-button {
  margin: var(--spacing-base);
}

.wp-block-button__link {
  background-color: var(--color-main);
}

.is-type-video > .wp-block-embed__wrapper {
  width: 100%;
  aspect-ratio: 16/9;
  margin: 20px 0;
}

.is-type-video > .wp-block-embed__wrapper > iframe {
  width: 100%;
  height: 100%;
}

/*---------------------目次（Talbe of Contents）*/
.toc,
section.toc {
  border: 1px solid #dddddd;
  border-radius: 10px;
  margin: 30px auto;
  padding: 0;
}

.toc h2 {
  border-bottom: 1px dotted #ddd;
  padding: var(--spacing-base) 2rem;
  display: flex;
  align-items: center;
}

.toc h2::before {
  font-family: "Material Symbols Outlined";
  content: "toc";
  color: var(--color-main);
  margin-right: var(--spacing-base);
}

.toc ::marker {
  color: var(--color-main);
}

.toc > div > :is(ul, ol) {
  margin-bottom: var(--spacing-base);
}

/*---------------------おすすめ商品*/
.wp-block-group__inner-container:has(.RecommendList) {
  background-color: #f3f4f5;
  border-radius: 20px;
  padding-top: var(--spacing-base);
}
.wp-block-group__inner-container:has(.RecommendList) h2 {
  margin: 0 16px;
}

.RecommendList {
  flex-wrap: wrap;
  align-items: stretch !important;
  gap: 20px;
  padding: 16px;
  margin: 0;
}
.RecommendList__item {
  flex: 1 1 calc(25% - 20px); /* 4列: 各アイテムの幅を25%にする (隙間調整済み) */
  box-sizing: border-box; /* パディングやボーダーを幅に含める */
}
@media screen and (max-width: 800px) {
  .RecommendList__item {
    flex: 1 1 calc(50% - 16px); /* 2列: 各アイテムの幅を50%にする */
  }
}
.RecommendList__item img {
  border-radius: 10px;
}
.RecommendList__item .RecommendList__item__txt,
.RecommendList__item .RecommendList__item__ttl {
  display: -webkit-box; /* Flexboxの代替で使える */
  -webkit-box-orient: vertical; /* 垂直方向の制限を有効に */
  overflow: hidden; /* はみ出した部分を隠す */
  text-overflow: ellipsis; /* 省略記号を表示 */
  line-clamp: 3; /* 将来的な標準 (対応ブラウザではこれが優先される) */
  -webkit-line-clamp: 3; /* 表示する行数を指定 */
  max-height: 4.2em; /* 1行の高さ(例: 1.5em) × 行数 */
  line-height: 1.4; /* 行間の高さを設定 */
}
.RecommendList__item__ttl {
  font-size: 16px;
}
@media screen and (max-width: 800px) {
  .RecommendList__item__ttl {
    font-size: 14px;
  }
}
.RecommendList__item__txt {
  font-size: 14px;
  margin: 1rem 0;
}
@media screen and (max-width: 800px) {
  .RecommendList__item__txt {
    font-size: 12px;
  }
}

/* ------------------ループ */
.module-Article_Container {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.module-Article_Item {
  width: calc((100% - 40px) / 3);
}

.module-Article_Item a {
  color: #000000;
}

.module-Article_Item_Img {
  position: relative;
}

.module-Article_Item_Img img {
  width: 100%;
  border-radius: 20px;
}

.module-Article_Item_Meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  list-style: none;
  padding: 0;
  margin: 10px 0 5px 0;
}

.module-Article_Item_Cat {
  position: absolute;
  top: 10px;
  left: 10px;
  padding: 5px 10px;
  border-radius: 50px;
  font-weight: 700;
  box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
  background: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: black;
  line-height: 1;
  /* font-size: 10px; */
}

.module-Article_Item_Title {
  margin: 0;
  font-size: 18px !important;
}

@media (max-width: 800px) {
  .module-Article_Container {
    flex-direction: column;
  }
  .module-Article_Item {
    width: 100%;
  }
}
/* ------------------ページネーション */
.pagination {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  flex-grow: 2;
  padding: 0;
}

.nav-links {
  margin: 50px auto 0 auto;
  font-size: 18px;
  border-radius: 3px;
  display: flex;
  align-items: center;
}

.nav-links .current {
  display: inline-block;
  width: 40px;
  height: 40px;
  text-align: center;
  line-height: 40px;
  background-color: #73c6c4;
  color: #ffffff;
  border-radius: 50%;
  padding: 0;
}

.page-numbers {
  padding: 0 10px;
}

.nav-links .prev,
.nav-links .next {
  color: #333333;
  cursor: pointer;
  white-space: nowrap;
}

.nav-links .prev::before,
.nav-links .next::before {
  font-family: "fs-icon" !important;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: block;
  font-size: 1.4em;
  line-height: 1;
}

.nav-links .prev::before {
  content: "\e90b";
}

.nav-links .next::before {
  content: "\e90c";
}

/* ------------------ブロックエディタ */
.has-background {
  border-radius: 20px;
  margin: var(--spacing-base) 0;
}

.has-background p {
  margin: 0;
}

.has-background a {
  color: var(--color-primary);
}

/* ミントアクア */
.has-mintaqua-background-color {
  background-color: #73c6c4;
}

.has-mintaqua-color {
  color: #73c6c4;
}

/* ミントホワイト */
.has-mintwhite-background-color {
  background-color: #e6f5f5;
}

.has-mintwhite-color {
  color: #e6f5f5;
}

/* オレンジ */
.has-orange-background-color {
  background-color: #ef8100;
}

.has-orange-color {
  color: #ef8100;
}

/* ベージュ */
.has-beige-background-color {
  background-color: #f4efd8;
}

.has-beige-color {
  color: #f4efd8;
}

/* ブラウン */
.has-brown-background-color {
  background-color: #745028;
}

.has-brown-color {
  color: #745028;
}

/* ホワイト */
.has-white-background-color {
  background-color: #ffffff;
}

.has-white-color {
  color: #ffffff;
}

/* ライトグレー */
.has-lightgray-background-color {
  background-color: #eee;
}

.has-lightgray-color {
  color: #eee;
}

/* グレー */
.has-gray-background-color {
  background-color: #707070;
}

.has-gray-color {
  color: #707070;
}

/* ブラック */
.has-black-background-color {
  background-color: #000000;
}

.has-black-color {
  color: #000000;
}

.editor-styles-wrapper {
  /*---------------------目次（Talbe of Contents）*/
  /*---------------------おすすめ商品*/
}
.editor-styles-wrapper .toc,
.editor-styles-wrapper section.toc {
  border: 1px solid #dddddd;
  border-radius: 10px;
  margin: 30px auto;
  padding: 0;
}
.editor-styles-wrapper .toc h2 {
  border-bottom: 1px dotted #ddd;
  padding: var(--spacing-base) 2rem;
  display: flex;
  align-items: center;
}
.editor-styles-wrapper .toc h2::before {
  font-family: "Material Symbols Outlined";
  content: "toc";
  color: #73c6c4;
  margin-right: var(--spacing-base);
}
.editor-styles-wrapper .toc ::marker {
  color: var(--color-main);
}
.editor-styles-wrapper .toc > div > :is(ul, ol) {
  margin-bottom: var(--spacing-base);
}
.editor-styles-wrapper .wp-block-group__inner-container:has(.RecommendList) {
  background-color: #f3f4f5;
  border-radius: 20px;
  padding-top: var(--spacing-base);
}
.editor-styles-wrapper .wp-block-group__inner-container:has(.RecommendList) h2 {
  margin: 0 16px;
}
.editor-styles-wrapper .RecommendList {
  flex-wrap: wrap;
  align-items: stretch !important;
  gap: 20px;
  padding: 16px;
  margin: 0;
}
.editor-styles-wrapper .RecommendList__item {
  flex: 1 1 calc(25% - 20px); /* 4列: 各アイテムの幅を25%にする (隙間調整済み) */
  box-sizing: border-box; /* パディングやボーダーを幅に含める */
}
@media screen and (max-width: 800px) {
  .editor-styles-wrapper .RecommendList__item {
    flex: 1 1 calc(50% - 16px); /* 2列: 各アイテムの幅を50%にする */
  }
}
.editor-styles-wrapper .RecommendList__item img {
  border-radius: 10px;
}
.editor-styles-wrapper .RecommendList__item .RecommendList__item__txt,
.editor-styles-wrapper .RecommendList__item .RecommendList__item__ttl {
  display: -webkit-box; /* Flexboxの代替で使える */
  -webkit-box-orient: vertical; /* 垂直方向の制限を有効に */
  overflow: hidden; /* はみ出した部分を隠す */
  text-overflow: ellipsis; /* 省略記号を表示 */
  line-clamp: 3; /* 将来的な標準 (対応ブラウザではこれが優先される) */
  -webkit-line-clamp: 3; /* 表示する行数を指定 */
  max-height: 4.2em; /* 1行の高さ(例: 1.5em) × 行数 */
  line-height: 1.4; /* 行間の高さを設定 */
}
.editor-styles-wrapper .RecommendList__item__ttl {
  font-size: 16px;
}
@media screen and (max-width: 800px) {
  .editor-styles-wrapper .RecommendList__item__ttl {
    font-size: 14px;
  }
}
.editor-styles-wrapper .RecommendList__item__txt {
  font-size: 14px;
  margin: 1rem 0;
}
@media screen and (max-width: 800px) {
  .editor-styles-wrapper .RecommendList__item__txt {
    font-size: 12px;
  }
} /*# sourceMappingURL=theme-styles_20241126.css.map */