@charset "UTF-8";
/*
    Template: swell
    Theme Name: SWELL CHILD
    Theme URI: https://swell-theme.com/
    Description: SWELLの子テーマ
    Version: 1.0.0
    Author: LOOS WEB STUDIO
    Author URI: https://loos-web-studio.com/

    License: GNU General Public License
    License URI: http://www.gnu.org/licenses/gpl.html
*/

/*--------------------------------------
 投稿リストブロックのカード型とサムネイル型を4列表示にする
--------------------------------------*/
@media (min-width: 960px) {
  .-col4 .-type-card.-pc-col3 .p-postList__item, .-col4 .-type-thumb.-pc-col3 .p-postList__item{
    width: calc(100% / 4);
  }
}

/*--------------------------------------
「Photo Gallery」サムネイル画像の上下余白無しを3pxに修正する
--------------------------------------*/
.bwg-item{
padding-bottom: 4px;
}

/*--------------------------------------
TOPページスライダーの上部余白を4pxに修正する
--------------------------------------*/
#main_visual{
padding-top: 4px;
}

/*--------------------------------------
パンくずを記事名まで表示させ文字数を制限する　https://vool.jp/swell-breadclumbs-scroll/
--------------------------------------*/
.single .p-breadcrumb__item:last-child > span.p-breadcrumb__text {
  display: block;
}

/* 3点リーダーで省略する */
.p-breadcrumb__list {
  padding-right: 1em;
}
.p-breadcrumb__item:last-of-type {
  overflow-x: hidden;
}
.p-breadcrumb__item:last-of-type .p-breadcrumb__text {
  text-overflow: ellipsis;
	width: 200px; /* 文字数を制限 https://rilaks.jp/blog/ellipsis/*/
	overflow: hidden;
}

/*--------------------------------------
ダークモード　https://sava.cloud/swell-darkmode/
--------------------------------------*/
/* ダークモードトグル */
.mode-wrap #mode-toggle {
  display: none;
}

.mode-wrap #mode-toggle + label {
  font-size: 1rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  height: 2em;
  width: 4em;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  border-radius: calc(2em / 2);
  background-size: auto 8em;
  background-position: bottom;
  background-image: -webkit-gradient(
    linear,
    left top,
    left bottom,
    from(#021037),
    color-stop(19%, #20206a),
    color-stop(66%, #4184b1),
    to(#62e7f7)
  );
  background-image: linear-gradient(
    180deg,
    #021037 0%,
    #20206a 19%,
    #4184b1 66%,
    #62e7f7 100%
  );
  -webkit-transition: 0.2s;
  transition: 0.2s;
  border: 0.125em solid #eef3f6;
  overflow: hidden;
  cursor: pointer;
}

.mode-wrap #mode-toggle + label span {
  background: #fffad8;
  border-radius: 50%;
  height: 2em;
  width: 2em;
  -webkit-transform: translateX(-0.125em) scale(0.65);
  transform: translateX(-0.125em) scale(0.65);
  -webkit-transition: 0.2s;
  transition: 0.2s;
  cursor: pointer;
  -webkit-box-shadow: 0 0 0.25em 0.0625em #fbee8d, 0 0 2em 0 #ffeb3b,
    inset -0.25em -0.25em 0 0 #fbee8e,
    inset -0.3125em -0.3125em 0 0.625em #fff5b2;
  box-shadow: 0 0 0.25em 0.0625em #fbee8d, 0 0 2em 0 #ffeb3b,
    inset -0.25em -0.25em 0 0 #fbee8e,
    inset -0.3125em -0.3125em 0 0.625em #fff5b2;
  margin-top: -0.125em;
}

.mode-wrap #mode-toggle:checked + label {
  background-position: top;
  border-color: #1a242f;
}

.mode-wrap #mode-toggle:checked + label span {
  background: transparent;
  -webkit-transform: translateX(calc(100% - 0.125em)) scale(0.65);
  transform: translateX(calc(100% - 0.125em)) scale(0.65);
  -webkit-box-shadow: inset -0.1875em -0.1875em 0 0 #fbe7ef,
    inset -0.5625em -0.5625em 0 0 #fffff7;
  box-shadow: inset -0.1875em -0.1875em 0 0 #fbe7ef,
    inset -0.5625em -0.5625em 0 0 #fffff7;
}

.darkmode body {
  background: #222;
  color: #f1f1f1;
}

/* ダークモード色指定 */
.darkmode {
--color_main: #07263c; /*テーマ色*/
--color_text: #f9f9f9; /*メイン文字色*/
--color_link: #2f95d8; /*リンク色*/
--color_gray: #333; /*ブロック背景色*/
--color_htag: var(--color_main); /*見出し色*/
--color_bg: #2d2d2d; /*記事背景色*/
--color_header_bg: var(--color_main); /*ヘッダー色*/
--color_header_text: #ffffff; /*ヘッダー背景色*/
--color_footer_bg: var(--color_main); /*フッター背景色*/
--color_footer_text: #ffffff; /*フッター文字色*/
}

body {
  transition: background 0.3s ease-in;
}

/*色調整　メイン画面*/
.darkmode #main_content {
   color:var(--color_text);
   background-color: var(--color_bg);
}

/*色調整　ウィジット*/
.darkmode .-frame-on-sidebar #sidebar .c-widget {
   color:var(--color_text);
   background-color:var(--color_bg);
}

/*色調整　パンくず*/
.darkmode #body_wrap #breadcrumb {
  background: var(--color_bg);
}

/*色調整　モーダル目次*/
.p-indexModal__inner {
  background: var(--color_bg);
  color: var(--color_text);
  opacity: 0.8;
}

/*色調整　吹き出し色*/
.darkmode .c-balloon__text {
  filter: brightness(0.7) saturate(150%) contrast(150%);
}

/*色調整　段落*/
.darkmode p[class*="is-style"] {
  filter: brightness(0.7) saturate(150%) contrast(150%);
}

.darkmode .is-style-crease {
  color: var(--swl-text_color--black);
}

/*色調整　グループ*/
.darkmode .is-style-desktop > .wp-block-group__inner-container,
.darkmode .is-style-browser_mac > .wp-block-group__inner-container {
  background: var(--color_bg);   color: var(--color_text);
}

/*色調整　画像とアイキャッチ*/
.darkmode .post_content .wp-block-image img,
.darkmode .c-postThumb__figure .c-postThumb__img,
.darkmode .p-articleThumb__img {
  filter: brightness(0.8) saturate(120%);
}

/*色調整　目次、トップ戻るボタン*/
.darkmode .c-fixBtn {
  background: #006633;
  color: var(--color_text);
}

/*色調整　シェアボタン*/
.c-shareBtns__btn:not(:hover) .c-shareBtns__icon,
.-fix .c-shareBtns__btn:not(:hover) {
  filter: brightness(0.9);
}

/*色調整　スマホ開閉メニュー*/
.darkmode .p-spMenu__inner::before {
  background: var(--color_bg);
  opacity: 0.9;
}

.darkmode .p-spMenu__body {
  color: var(--color_text);
}

.darkmode .p-spMenu__closeBtn {
  color: var(--color_text);
}

.darkmode .p-spMenu__body::-webkit-scrollbar {
  background: rgba(255, 255, 255, 0.1);
  height: 24px;
  border-radius: 24px;
}


/*--------------------------------------
アーカイブとカテゴリーページトップのarchiveとtaxを非表示にする
--------------------------------------*/
.c-pageTitle__subTitle{
  display: none;
}


/*--------------------------------------
youtub埋め込みのスマホ対応 hhttps://connecre.com/youtube-responsive/
HTML変更必要　<div class="youtube__aspect-ratio">youtubコード</div>
--------------------------------------*/
.youtube__aspect-ratio {
    width: 100%;
    aspect-ratio: 16 / 9;
}
.youtube__aspect-ratio iframe {
    width: 100%;
    height: 100%;
}


/*--------------------------------------
タブスタイル：ふきだしの色を指定　https://nomark.ltt.jp/wordpress/swell-tabblock-color/#index_id3
CSSの上書きができるよう:not(#fakeID)を追加　https://qiita.com/kabechiyo13/items/6ea990258b778d031606
--------------------------------------*/
/*タブスタイル：ふきだし*/
.is-style-balloon:not(#fakeID) .c-tabList__button:hover, .is-style-balloon:not(#fakeID) .c-tabList__button[aria-selected=true] {
background-color: #008000;
}
.is-style-balloon:not(#fakeID) .c-tabList__button, .is-style-balloon:not(#fakeID) .c-tabList__button[aria-selected=true] {
border: 0.5px solid #000000;
}
.is-style-balloon:not .c-tabList__button:before {
border-top: 2px solid #008000;
}

/*--------------------------------------
カード型投稿リストの抜粋を太字にする https://vool.jp/swell-limit-chra-title/
.p-postList__titleを.p-postList__excerptに変更
--------------------------------------*/
/* カード型はここから */
.p-postList.-type-card .p-postList__excerpt {
font-weight: bold;
}
/* カード型ここまで */

/*--------------------------------------
任意のページに記事スライダーを表示　https://hrdyuic.com/swell-article-slider/
--------------------------------------*/

/* 共通 */
.swiper-postListWrap .p-postList {
	flex-wrap: nowrap;
	margin: 0;
}

/* カード型 */
.swiper-postListWrap .-type-card .p-postList__item {
	padding: 0;
}
.swiper-postListWrap .swiper-pagination-bullet {
    background: currentcolor;
    color: inherit;
}

/* サムネイル型 */
.swiper-postListWrap .-type-thumb .p-postList__item {
	padding: 0;
}
.p-postList.-type-thumb + .swiper-pagination.swiper-pagination-clickable.swiper-pagination-bullets.swiper-pagination-horizontal {
	bottom: -4.5px;
}