@charset "UTF-8";
:root { --color-gray: #929292; --color-gray-second: #c4c4c4; --color-gray-third: #707070; --color-gray-fourth: #d8d5d5; --color-gray-fifth: #e3e3e3; --color-gray-sixth: #F6F6F6; --color-black: #000000; --color-black-second: #0d0d0d; --color-black-third: #262421; --color-white: #ffffff; --color-brown: #684117; --color-red: #ff0000; --font-noto-sans-jp: "Noto Sans JP", sans-serif; --font-noto-serif-jp: "Noto Serif JP", serif; --font-saira: "Saira Semi Condensed", sans-serif; --font-libre-baskerville: "Libre Baskerville", serif; }

:root { --color-gray: #929292; --color-gray-second: #c4c4c4; --color-gray-third: #707070; --color-gray-fourth: #d8d5d5; --color-gray-fifth: #e3e3e3; --color-gray-sixth: #F6F6F6; --color-black: #000000; --color-black-second: #0d0d0d; --color-black-third: #262421; --color-white: #ffffff; --color-brown: #684117; --color-red: #ff0000; --font-noto-sans-jp: "Noto Sans JP", sans-serif; --font-noto-serif-jp: "Noto Serif JP", serif; --font-saira: "Saira Semi Condensed", sans-serif; --font-libre-baskerville: "Libre Baskerville", serif; }

/*====================================================================================
  [0. Variable]
  各種パーツのカスタマイズ用変数
  色やサイズの変更はここの数値を変えて行うこと
====================================================================================*/
:root { /* ----------------------------------------------- /* Base settings -------------------------------------------------- */ --leading-trim: calc((1em - 1lh) / 2); /* ----------------------------------------------- Common Color ・プライマリカラー => テキストをホバーした時やリンクの色など ・ボーダーセパレートカラー => コンテンツごとを区切るボーダーの色 -------------------------------------------------- */ --color-theme-primary: #425b97; /* プライマリカラー */ --border-color-separete: #bbb; /* ボーダーセパレートカラー */ --stroke-color-arrow: #999; /* 矢印のカラー */ /* ----------------------------------------------- /* Layout -------------------------------------------------- */ /* l-strongblog */ --layout-strongblog-column-gap: 90px; /* メインコンテンツとサイドコンテンツとの横の余白 */ --layout-side-width: 22.222222%; /* サイドコンテンツの横幅 */ /* ----------------------------------------------- /* Project -------------------------------------------------- */ /* p-strongblog-card */ --card-column-gap: 3rem; /* 画像とコンテンツとの横の余白 */ --card-image-width: 20rem; /* 画像の横幅 */ --card-image-height: 15rem; /* 画像の縦幅 */ /* p-strongblog-side */ --border-color-side-title: inherit; /* サイドカラムのタイトルのボーダーカラー */ /* p-strongblog-article */ --border-color-title-article-head: currentColor; /* 詳細ページの記事タイトルのボーダーカラー */ --background-color-title-article-h2: #e2e2e2; /* 詳細ページのh2タイトルの背景色 */ --border-color-title-article-h3: #555; /* 詳細ページのh3タイトルの背景色 */ --border-color-article-end: #777; /* 詳細ページにある記事のボーダーボトムのカラー */ /* p-strongblog-recommend */ --border-color-recommend-title: currentColor; /* 詳細ページにあるおすすめ記事タイトルのボーダーカラー*/ /* ----------------------------------------------- /* Component -------------------------------------------------- */ /* c-strongblog-date */ --date-font-family: "Roboto"; /* 日付のフォント 指定したフォントが無い時はデフォルトのフォントで表示される */ --date-color: #555; /* 日付のカラー */ /* c-strongblog-label */ --label-color: currentColor; /* ラベルのカラー */ --label-border-color: #777; /* ラベルのボーダーカラー */ --label-background-color: transparent; /* ラベルの背景色 */ /* c-strongblog-pagination */ --font-family-pagination: "Roboto"; /* ページネーションのフォントファミリー　指定したフォントが無いときはデフォルトのフォントで表示される */ /* c-strongblog-select */ --color-select: currentColor; /* セレクトボックスのテキストのカラー */ --border-color-select: inherit; /* セレクトボックスのボーダーカラー */ /* c-strongblog-button */ --color-article-button: #fff; /* ボタンのテキストカラー */ --background-color-article-button: #575757; /* ボタンの背景色 */ /* ----------------------------------------------- /* Other Settings -------------------------------------------------- */ }

/*====================================================================================
  [1. Layout]
====================================================================================*/
/* l-strongblog */
.l-strongblog-container { container-type: inline-size; container-name: strongblog-container; }

.l-strongblog { display: grid; grid-column-gap: var(--layout-strongblog-column-gap); grid-template-columns: auto var(--layout-side-width); }

@container strongblog-container (max-width: 849px) { .l-strongblog { grid-template-columns: 1fr; } }

.l-strongblog-article { display: grid; grid-template-columns: 1fr; }

.l-strongblog-side .c-strongblog-select { display: none; margin-top: 2rem; }

@container strongblog-container (max-width: 849px) { .l-strongblog-side { order: -1; margin-bottom: 4.8rem; }
  .l-strongblog-side .c-strongblog-menu { display: none; }
  .l-strongblog-side .c-strongblog-select { display: block; } }

/*====================================================================================
  [2. Project]
====================================================================================*/
/* p-strongblog-card */
.p-strongblog-card { display: flex; grid-column-gap: var(--card-column-gap); border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: var(--border-color-separete); padding-top: 3rem; padding-bottom: 3rem; }

.p-strongblog-card:first-child { padding-top: 0; }

.p-strongblog-card .c-strongblog-tag { grid-area: area-strongblogCardTag; }

@media (any-hover: hover) { .p-strongblog-card:hover .p-strongblog-card__media { opacity: 0.9; }
  .p-strongblog-card:hover .p-strongblog-card__title a { text-decoration: underline; } }

@container strongblog-container (max-width: 849px) { .p-strongblog-card { flex-direction: column; padding-top: 2rem; padding-bottom: 2rem; } }

.p-strongblog-card__media { width: var(--card-image-width); height: var(--card-image-height); overflow: hidden; display: block; flex-shrink: 0; }

.p-strongblog-card__media img { width: 100%; height: 100%; object-fit: cover; }

@container strongblog-container (max-width: 849px) { .p-strongblog-card__media { width: auto; height: auto; aspect-ratio: 1.91 / 1; } }

.p-strongblog-card__body .c-strongblog-tag { margin-top: calc(2rem + var(--leading-trim)); }

.p-strongblog-card__title { margin-top: calc(2rem + var(--leading-trim)); font-size: 25px; line-height: 1.52; letter-spacing: 0.02em; font-weight: bold; }

.p-strongblog-card__title a { color: inherit; text-decoration: none; }

@container strongblog-container (max-width: 849px) { .p-strongblog-card__title { font-size: 20px; line-height: 1.5; margin-top: calc(1.2rem + var(--leading-trim)); } }

/* p-strongblog-info */
.p-strongblog-info { display: flex; align-items: baseline; margin-top: 0.4rem; grid-row-gap: 1.2rem; grid-column-gap: 1.2rem; }

@container strongblog-container (max-width: 849px) { .p-strongblog-info { margin-top: 0.8rem; grid-column-gap: 0.8rem; } }

.p-strongblog-info__category { display: flex; flex-wrap: wrap; grid-column-gap: 0.4rem; grid-row-gap: 0.6rem; }

/* p-strongblog-side */
.p-strongblog-side__title { font-size: 1.8rem; font-weight: 700; padding-bottom: 2rem; border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: var(--border-color-side-title); }

/* p-strongblog-article */
.p-strongblog-article .c-strongblog-sns { margin-top: 2.8rem; }

.p-strongblog-article .c-strongblog-button { margin-top: 8rem; }

.p-strongblog-article__title { font-size: 2.8rem; font-weight: 700; line-height: 1.7; margin-top: 2.7rem; margin-bottom: 3.5rem; padding-bottom: 2.6rem; border-bottom-width: 2px; border-bottom-style: solid; border-bottom-color: var(--border-color-title-article-head); }

@container strongblog-container (max-width: 849px) { .p-strongblog-article__title { font-size: 2.4rem; padding-bottom: 1.6rem; } }

.p-strongblog-article__footer { border-top-width: 1px; border-top-style: solid; border-top-color: var(--border-color-article-footer); padding-top: 2.8rem; }

.p-strongblog-article__body { border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: var(--border-color-article-end); }

.p-strongblog-article__body .c-strongblog-tag { margin-bottom: 3rem; }

/* -----------------------------------------------
/* p-strongblog-article
/* 詳細ページにある管理画面入力コンテンツのタグの設定はここで調整すること
-------------------------------------------------- */
.p-strongblog-article__content { padding-bottom: 7.2rem; }

.p-strongblog-article__content p { margin-top: 1em; margin-bottom: 1em; }

.p-strongblog-article__content p { line-height: 2; }

.p-strongblog-article__content img { margin-top: 4rem; margin-bottom: 4rem; }

/* back_officeのtinymceエディターに対応するためスコープを外してる */
h2.strong-blog-h2 { font-size: 2.4rem; line-height: 1.66666; font-weight: 700; margin-top: 4.6rem; margin-bottom: 2.6rem; padding-top: 0.8rem; padding-right: 2rem; padding-bottom: 0.7rem; padding-left: 2rem; background-color: var(--background-color-title-article-h2); }

@container strongblog-container (max-width: 849px) { h2.strong-blog-h2 { font-size: 2rem; } }

h3.strong-blog-h3 { font-size: 2.2rem; font-weight: 700; margin-top: 5.3rem; margin-bottom: 2.4rem; padding-left: 1.8rem; position: relative; border-left-width: 0.4rem; border-left-style: solid; border-left-color: var(--border-color-title-article-h3); }

@container strongblog-container (max-width: 849px) { h3.strong-blog-h3 { font-size: 1.8rem; } }

/*-------------------------------------------------- */
/* p-strongblog-recommend */
.p-strongblog-recommend { margin-top: 10rem; }

.p-strongblog-recommend__title { border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: var(--border-color-recommend-title); margin-bottom: 3rem; padding-bottom: 3rem; font-size: 25px; line-height: 1.28; letter-spacing: 0.02em; font-weight: bold; }

@container strongblog-container (max-width: 849px) { .p-strongblog-recommend__title { font-size: 20px; line-height: 1.3; padding-bottom: 2rem; } }

/*====================================================================================
  [3. Component]
====================================================================================*/
/* c-strongblog-date */
.c-strongblog-date { font-family: var(--date-font-family); color: var(--date-color); display: flex; align-items: center; flex-shrink: 0; font-size: 18px; line-height: 1.77778; }

.c-strongblog-date::after { content: ""; width: 1px; height: 2rem; background-color: var(--border-color-separete); display: inline-block; margin-right: 0.3rem; margin-left: 1.5rem; }

@container strongblog-container (max-width: 849px) { .c-strongblog-date { font-size: 12px; line-height: 1.66667; }
  .c-strongblog-date::after { height: 1.4rem; margin-left: 0.8rem; } }

/* c-strongblog-label */
.c-strongblog-label { color: var(--label-color); text-decoration: none; border-width: 1px; border-color: var(--label-border-color); border-style: solid; border-radius: 100px; background-color: var(--label-background-color); padding-top: 0.1rem; padding-right: 1rem; padding-bottom: 0.2rem; padding-left: 1rem; font-size: 18px; line-height: 1.77778; }

@media (any-hover: hover) { .c-strongblog-label:hover { background-color: var(--label-border-color); color: #fff; } }

@container strongblog-container (max-width: 849px) { .c-strongblog-label { padding-right: 0.6rem; padding-left: 0.6rem; font-size: 12px; line-height: 1.66667; } }

/* c-strongblog-tag */
.c-strongblog-tag { display: flex; flex-wrap: wrap; grid-column-gap: 2.5rem; }

@container strongblog-container (max-width: 849px) { .c-strongblog-tag { grid-column-gap: 1.2rem; } }

.c-strongblog-tag__link { font-size: 18px; line-height: 1.77778; color: var(--color-theme-primary); text-decoration: none; }

@media (any-hover: hover) { .c-strongblog-tag__link:hover { text-decoration: underline; } }

@container strongblog-container (max-width: 849px) { .c-strongblog-tag__link { font-size: 12px; line-height: 1.66667; } }

/* c-strongblog-menu */
.c-strongblog-menu__item { border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: var(--border-color-separete); }

.c-strongblog-menu__link { text-decoration: none; color: inherit; padding-top: 2rem; padding-right: 2rem; padding-bottom: 2rem; display: flex; align-items: center; position: relative; }

.c-strongblog-menu__link svg { position: absolute; top: 0; right: 0; bottom: 0; margin: auto; stroke: var(--stroke-color-arrow); }

@media (any-hover: hover) { .c-strongblog-menu__link:hover { text-decoration: underline; } }

/* c-strongblog-pagination */
.c-strongblog-pagination { margin-top: 5rem; margin-bottom: 5rem; }

@container strongblog-container (max-width: 849px) { .c-strongblog-pagination { margin-top: 3rem; } }

.c-strongblog-pagination__list { display: flex; flex-wrap: wrap; justify-content: center; grid-column-gap: 0.8rem; }

@container strongblog-container (max-width: 849px) { .c-strongblog-pagination__list { grid-column-gap: 0.6rem; } }

.c-strongblog-pagination__item { border-width: 1px; border-style: solid; border-color: currentColor; border-radius: 50%; background-color: transparent; }

.c-strongblog-pagination__item.-current { background-color: currentColor; }

.c-strongblog-pagination__item.-next { border: 0; text-decoration: none !important; width: 2rem; }

.c-strongblog-pagination__item.-next .c-strongblog-pagination__link { width: 100%; border: 0; text-decoration: none !important; }

.c-strongblog-pagination__item.-prev { border: 0; text-decoration: none !important; width: 2rem; }

.c-strongblog-pagination__item.-prev .c-strongblog-pagination__link { border: 0; width: 100%; text-decoration: none !important; }

@container strongblog-container (max-width: 849px) { .c-strongblog-pagination__item.-next { width: 20px; }
  .c-strongblog-pagination__item.-next .c-strongblog-pagination__link { width: 20px; }
  .c-strongblog-pagination__item.-next svg { width: 12px; }
  .c-strongblog-pagination__item.-prev { width: 20px; }
  .c-strongblog-pagination__item.-prev .c-strongblog-pagination__link { width: 20px; }
  .c-strongblog-pagination__item.-prev svg { width: 12px; } }

@media (any-hover: hover) { .c-strongblog-pagination__item:hover { background-color: currentColor; }
  .c-strongblog-pagination__item:hover.-next { background: none; }
  .c-strongblog-pagination__item:hover.-next .c-strongblog-pagination__link { background: none; }
  .c-strongblog-pagination__item:hover.-prev { background: none; }
  .c-strongblog-pagination__item:hover.-prev .c-strongblog-pagination__link { background: none; } }

.c-strongblog-pagination__link { display: flex; align-items: center; justify-content: center; width: 4rem; height: 4rem; font-size: 1.6rem; font-family: var(--font-family-pagination); font-weight: 500; color: currentColor; text-decoration: none !important; }

.c-strongblog-pagination__link svg { stroke: currentColor; width: 1.3rem; }

.c-strongblog-pagination__link.-current { color: #fff; }

.c-strongblog-pagination__link.-current svg { stroke: #fff; }

@media (any-hover: hover) { .c-strongblog-pagination__link:hover { color: #fff; }
  .c-strongblog-pagination__link:hover svg { stroke: #fff; } }

@container strongblog-container (max-width: 849px) { .c-strongblog-pagination__link { width: 32px; height: 32px; font-size: 15px; } }

/* c-strongblog-select */
.c-strongblog-select select { font-size: 18px; line-height: 1.77778; color: var(--color-select); width: 100%; height: 5rem; border-radius: 4px; padding-left: 1.2rem; border-color: var(--border-color-select); }

@container strongblog-container (max-width: 849px) { .c-strongblog-select select { background-size: 30px 9px; font-size: 16px; line-height: 1.75; height: 4rem; } }

/* c-strongblog-sns */
.c-strongblog-sns { display: flex; justify-content: center; grid-column-gap: 2rem; }

/* c-strongblog-button */
.c-strongblog-button { display: flex; justify-content: center; }

.c-strongblog-button__link { position: relative; text-align: center; color: var(--color-article-button); font-weight: 500; text-decoration: none; padding-top: 1.3rem; padding-right: 4.9rem; padding-bottom: 1.3rem; border-radius: 10rem; background-color: var(--background-color-article-button); display: inline-flex; align-items: center; }

.c-strongblog-button__link svg { stroke: currentColor; margin-right: 2.4rem; margin-left: 2rem; }

@media (any-hover: hover) { .c-strongblog-button__link:hover { background-color: var(--color-theme-primary); } }

/*# sourceMappingURL=maps/TMPL_strongblog.css.map */