@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
*/

:root {
	/*▽▽▽-----色定義-----▽▽▽*/
	/* var(●●); */
	--color_pink: #df8288;
	--color_pink_rgb: 223, 130, 136;

	--color_cosmic: #7c3d52;
	--color_cosmic_rgb: 124, 61, 82;

	--color_purple: #946a93;
	--color_purple_rgb: 148, 106, 147;

	--color_white: #fffafa;
	--color_white_rgb: 255, 250, 250;

	--color_black: #3a3729;
	--color_black_rgb: 58, 55, 41;

	--color_darkBrown: #37241a; /* ヘッダーの背景色 */
	--color_darkBrown_rgb: 55, 36, 26;

	--color_lightGray: #94887d;
	--color_lightGray_rgb: 148, 136, 125;

	--color_darkGray: #655d58;
	--color_darkGray_rgb: 101, 93, 88;

	--color_cream: #e3d5c8;
	--color_cream_rgb: 227, 213, 200;

	--color_Lunerica: #243533;
	--color_Lunerica_rgb: 36, 53, 51;

	--color_dullPink: #dbb4b4;

	--color_logo_txt: #d67e84;
	--color_logo_fl: #f0ebe0;

	/*△△△-----色定義-----△△△*/

	--color_main: var(--color_pink);
	--color_main_thin: rgba(var(--color_white_rgb), 0.05);
	--color_main_dark: rgba(var(--color_cosmic_rgb), 1);
	--swl-text_color--black: var(--color_black);
	--swl-text_color--white: var(--color_white);
	--color_text: var(--color_black);
	--color_link: var(--color_purple);
	--color_htag: var(--color_main);
	--color_bg: var(--color_white);

	--border01: solid 1px var(--color_main);
	--border02: double 4px var(--color_main);
	--border03: dashed 2px var(--color_border);
	--border04: solid 4px var(--color_gray);

	--bg-pink_img: url("https://mysweet-bitter.net/img/bgr/bgr_pink3.webp");
}

/* -----コンテンツ後ろの背景----- */

.contents-bg_white {
	background-color: rgba(var(--color_white_rgb), 0.9) !important;
	/* backdrop-filter: blur(5px);  */
}

.contents-bg_black {
	background-color: rgba(var(--color_black_rgb), 0.9) !important;
	/* backdrop-filter: blur(5px);  */
	background-blend-mode: multiply;
}

/* 記事背景 */
#main_content {
	/* 基本背景は透明色 */
	background-color: transparent;
	padding-bottom: 0;
	backdrop-filter: blur(5px);
}

#main_content .create-background {
	/* 基本背景は透明色 */
}

.bg_noise {
	background: url("/img/bg_noise.webp") repeat;
	background-blend-mode: multiply;
}

.bg_moya {
	background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)),
		url("/img/bg_moya.webp") repeat;
	background-size: cover;
}

/* お知らせバー */
.c-infoBar__text {
	font-weight: 700;
	padding: 0;
	z-index: 1;
}

/* リンクボックスの線 */
.swell-block-box-menu.is-style-default .swell-block-box-menu__item {
	border: none;
}



/*----------- ブレークポイントの変更 -----------*/
/* カラムブロックのブレイクポイントを960pxに設定 */
@media (max-width: 959px) {
	/* 959px以下でカラムが縦に積み重なるように設定 */
	.wp-block-columns {
		flex-wrap: wrap !important;
	}
	.wp-block-columns:not(.is-not-stacked-on-mobile) > .wp-block-column {
		flex-basis: 100% !important;
	}
}

@media (min-width: 960px) {
	/* 960px以上でカラムが横並びになるように設定 */
	.wp-block-columns {
		flex-wrap: nowrap !important;
	}
	.wp-block-columns:not(.is-not-stacked-on-mobile) > .wp-block-column {
		/*flex-basis: 0 !important;*/
		flex-grow: 1 !important;
	}
}


/* カラム間のスペース*/
.wp-block-columns {
	　column-gap: 0em !important;
	　row-gap: 0em !important;
	　margin-bottom: 0 !important;
	gap: 0 !important;
}

/* サイドバー間の間 */
#sidebar .c-widget + .c-widget {
	margin-top: 0em;
	padding: 2em;
}

/* Swiperについて */
/* 記事スライダーを非表示　 */
#post_slider .swiper {
	padding-bottom: 0px;
	display: none;
}

/* Swiperの矢印 */
.swiper-button-next,
.swiper-button-prev {
	font-size: 9px !important;
	/* height: 30%;*/
	background: none;
	color: var(--color_white);
}

/* Swiperの丸いやつ */
.swiper-pagination-bullet {
	background: var(--color_white);
}

.swiper-pagination-bullet-active {
	background: var(--color_white);
	opacity: var(--swiper-pagination-bullet-opacity, 1);
}

/* 特定箇所の文字色を変更 */
.css_color-main {
	color: var(--color_main);
}


/* ブロークンカラム */
@media (min-width: 480px) {
	.is-style-broken {
		padding: 0em;
	}
}

@media (min-width: 600px) {
	.is-style-broken {
		padding: 0 1em;
	}
}
@media (min-width: 900px) {
	/* ブロークンカラム */
	.is-style-broken {
		padding: 0 3em;
	}
	.l-fixHeader .c-headLogo {
		/* ロゴ本体 */
		height: 48px;
	}
}

/* ステップナンバーの上の文字 */
.is-style-small .swell-block-step__number .__label {
	font-size: 1em;
	opacity: 0.8;
	padding: 0 2px 0 0;
}
