@charset "utf-8";

/* ================================================================
   以下、Builder で選択したパーツのCSS（自動連結）
   ================================================================ */

/* ---- グラデーションボタン（btn-grad1） (btn-grad1) ---- */
/*ボタン（btn-grad1-parts）
---------------------------------------------------------------------------*/
.btn-grad1-parts a {
	text-decoration: none;
	position: relative;
	display: flex;
	justify-content: center;
	padding: 0.5rem 2rem;
	border-radius: 999px;
	color: #fff;	/*文字色。お好みで。*/
	text-shadow: 1px 1px rgba(0,0,0,0.2);	/*テキストの影。右へ1px、下へ1px、0,0,0は黒のことで0.2は色が20%出た状態。*/
	transition: background-position 0.5s ease, transform 0.5s ease;	/*「background-position」と「transform」の変化に0.5秒かける。数値はお好みで。*/
	background: linear-gradient(120deg, var(--primary-color), var(--accent-color)) left center / 200% 200%;/*背景グラデーション。120degは角度。#はグラデに使う色。グラデの表示範囲を左半分に。最後が縦横サイズ。*/
}

/*テキスト量にあったサイズ用*/
.btn-grad1-parts.fit a {
	display: inline-flex;
}

/*テキスト量にあったサイズ用の左右中央用*/
.btn-grad1-parts.c {
	text-align: center;
}

/*grad1（パステル）*/
.btn-grad1-parts.grad1 a {
	background: linear-gradient(120deg, #6cd0a7, #9ba4fd, #f871b4) left center / 200% 200%;/*背景グラデーション。120degは角度。#はグラデに使う色。グラデの表示範囲を左半分に。最後が縦横サイズ。*/
}

/*grad2（ビビット）*/
.btn-grad1-parts.grad2 a {
	background: linear-gradient(120deg, #d80000, #d800c6, #0a00d8) left center / 200% 200%;/*背景グラデーション。120degは角度。#はグラデに使う色。グラデの表示範囲を左半分に。最後が縦横サイズ。*/
}

/*grad3（ビビット）*/
.btn-grad1-parts.grad3 a {
	background: linear-gradient(120deg, #1c12a6, #1480fa, #14d7fa) left center / 200% 200%;/*背景グラデーション。120degは角度。#はグラデに使う色。グラデの表示範囲を左半分に。最後が縦横サイズ。*/
}

/*grad4（ビビット）*/
.btn-grad1-parts.grad4 a {
	background: linear-gradient(120deg, #fac114, #fa5514, #e60178) left center / 200% 200%;/*背景グラデーション。120degは角度。#はグラデに使う色。グラデの表示範囲を左半分に。最後が縦横サイズ。*/
}

/*grad5（パステル）*/
.btn-grad1-parts.grad4 a {
	background: linear-gradient(120deg, #ebbd7b, #eb7b9e, #c07beb) left center / 200% 200%;/*背景グラデーション。120degは角度。#はグラデに使う色。グラデの表示範囲を左半分に。最後が縦横サイズ。*/
}

/*ボタンの上半分の光沢部分を使う場合用*/
.btn-grad1-parts.gloss a::before {
	content: "";
	position: absolute;
	inset: 3px;
	border-radius: inherit;
	background: linear-gradient(rgba(255,255,255,0.5), rgba(255,255,255,0.2) 50%, transparent 50%);/*背景グラデーション*/
}

/*マウスオン時（色の追加をする際は、このブロックより上に入れて下さい。）*/
.btn-grad1-parts a:hover {
	filter: none;
	background-position: right center;	/*グラデの表示範囲を、右半分に。*/
	transform: translateY(-2px);	/*ボタンを2pxだけ浮かす*/
}

/* ---- お知らせアラート用（ui-tools-alert1） (ui-tools-alert1) ---- */
/*アラートボックス（通知・お知らせ）
---------------------------------------------------------------------------*/
/*アラートボックス（共通）*/
.ui-tools-alert1-parts {
	display: flex;
	align-items: flex-start;	/*アイコンとテキストを上揃え*/
	padding: 1rem 1.2rem;	/*ボックス内の余白。上下に1文字分、左右に1.2文字分。*/
	border-radius: 3px;		/*角を少しだけ丸く*/
	border-left: 4px solid;	/*左の線の太さ、線のタイプ。色は別途各タイプで指定。*/
	margin-bottom: 1rem;	/*ボックス同士の余白。1文字分。*/
	line-height: 1.8;	/*行間*/
	font-size: 0.9rem;	/*文字サイズ90%*/
}

/*アイコン共通（Font Awesome疑似要素）*/
.ui-tools-alert1-parts::before {
	font-family: "Font Awesome 6 Free";
	font-weight: 900;
	margin-right: 0.8rem;	/*アイコンとテキストの間*/
	flex-shrink: 0;		/*アイコンが縮まないようにする*/
	font-size: 1.1rem;	/*アイコンサイズ1.1倍*/
	line-height: 1.8;	/*行間。テキストと揃える。*/
}

/*内部テキストのマージンリセット*/
.ui-tools-alert1-parts p {
	margin: 0;
}

/*info（情報）※意味色のため配色はテーマに依存しません*/
.ui-tools-alert1-parts.info-parts {
	background: #e8f4fd;	/*背景色*/
	border-left-color: #2196F3;	/*左線の色*/
	color: #1565C0;	/*文字色*/
}
.ui-tools-alert1-parts.info-parts::before {
	content: "\f05a";	/*circle-info*/
	color: #2196F3;	/*アイコン色*/
}

/*success（成功・完了）*/
.ui-tools-alert1-parts.success-parts {
	background: #e8f5e9;	/*背景色*/
	border-left-color: #4CAF50;	/*左線の色*/
	color: #2E7D32;	/*文字色*/
}
.ui-tools-alert1-parts.success-parts::before {
	content: "\f058";	/*circle-check*/
	color: #4CAF50;	/*アイコン色*/
}

/*warning（注意）*/
.ui-tools-alert1-parts.warning-parts {
	background: #fff8e1;	/*背景色*/
	border-left-color: #FF9800;	/*左線の色*/
	color: #E65100;	/*文字色*/
}
.ui-tools-alert1-parts.warning-parts::before {
	content: "\f071";	/*triangle-exclamation*/
	color: #FF9800;	/*アイコン色*/
}

/*danger（重要・警告）*/
.ui-tools-alert1-parts.danger-parts {
	background: #fde8e8;	/*背景色*/
	border-left-color: #f44336;	/*左線の色*/
	color: #c62828;	/*文字色*/
}
.ui-tools-alert1-parts.danger-parts::before {
	content: "\f06a";	/*circle-exclamation*/
	color: #f44336;	/*アイコン色*/
}

/* ---- sticky風・画像固定（ui-tools-fixed1） (ui-tools-fixed1) ---- */
/*ui-tools-fixed1-parts
---------------------------------------------------------------------------*/
.ui-tools-fixed1-parts {
	--img-rate: 0.3;	/*左画像の幅。30%。お好みで。*/
	--stay-gap: 8vh;	/*画像を滞在させる分の高さ。大きいと滞在時間も長くなりますが、その分、テキスト下に余分なスペースが発生します。*/
}

/*各ブロック*/
.ui-tools-fixed1-parts .list-parts {
	position: relative;
}

/*画像は初期状態では非表示*/
.ui-tools-fixed1-parts .img-parts {
	display: none;
	overflow: hidden;

}

/*画像本体*/
.ui-tools-fixed1-parts .img-parts img {
	display: block;
	width: 100%;
	height: 580px;
	/* height: 100%; */
	object-fit: cover;
	border-radius: 0.7vw;/*左側　画像角丸*/
}

/*テキスト側*/
.ui-tools-fixed1-parts .text-parts {
	position: relative;
	z-index: 1;
	padding: var(--content-space-s) 0;
}

/*装飾テキスト*/
.ui-tools-fixed1-parts .kazari-text {
	display: block;
	text-align: right;
    font-size: 40vw;	/*文字サイズ*/
	margin-top: -0.4em;
	margin-bottom: -0.4em;
	line-height: 1;
	transform-origin: right;
	opacity: 0.1;	/*透明度。色が10%出た状態。*/
	font-family: "Ballet", cursive;
	font-optical-sizing: auto;
	font-weight: 400;
}
	
	/*@container対応ブラウザ向け。コンテナ幅（この場合はmain）が600px以上で画像表示（※600を変更する場合、jsのvar breakpoint = 600;も合わせて変更。）*/
    @container (min-width: 600px) {

        .ui-tools-fixed1-parts .list-parts {
            min-height: 100vh;
            min-height: 100svh;
            padding-bottom: var(--stay-gap);
        }

        .ui-tools-fixed1-parts .img-parts {
            display: block;
            position: absolute;
            top: 0;
            left: 0;
            width: calc(100% * var(--img-rate));
            /* height: 100vh; */
            /* height: 100svh; */
        }

        .ui-tools-fixed1-parts .text-parts {
            margin-left: calc(100% * var(--img-rate));
            /* height: 100vh; */
            /* height: 100svh; */
            padding-left: var(--content-space-s);
        }

    }


/*others-step2（ステップボックス）
---------------------------------------------------------------------------*/
ul.others-step2 {margin: 0;list-style: none;}

/*１ブロックの設定*/
ul.others-step2 li {
	padding: 1rem;	/*ブロック内の余白。１文字分。*/
	box-shadow: 0px 0px 20px rgba(0,0,0,0.1);	/*ボックスの影。右へ0px、下へ0px、ぼかす量は20px、0,0,0は黒の事で0.1は色が10%出た状態。*/
	margin-bottom: 2rem;	/*ブロック同士の余白。２文字分。*/
	position: relative;
	border-radius: 10px;	/*角を丸くする*/
	font-size: 0.9rem;		/*文字サイズ90%*/
}

/*「▼」のマーク*/
ul.others-step2 li::after {
	content: "▼";	/*このテキストを出す*/
	transform: scaleX(2);	/*幅だけ２倍の大きさ*/
	position: absolute;
	left: 50%;	/*左からの配置場所。厳密に中央ではありませんが、テキストが小さいので問題ないかと。*/
	bottom: -1.8rem;	/*下からの配置場所。本来の場所より上に1.8文字分移動。*/
	color: var(--bg-inverse-color);	/*文字色。theme.cssのbg-inverse-colorを読み込みます。*/
	opacity: 0.2;	/*透明度。色が20%出た状態。*/
}

/*最後のステップボックス*/
ul.others-step2 li:last-child::after {
	content: "";	/*「▼」を出さない*/
	margin-bottom: 0;
}

/* ---- 角丸のカラムレイアウト（list-kadomaru1） (list-kadomaru1) ---- */
/*list-kadomaru1-parts（カラムブロック）
---------------------------------------------------------------------------*/
.list-kadomaru1-parts * {margin: 0;padding: 0;}

/*ボックス全体*/
.list-kadomaru1-parts {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));	/*3列*/
	gap: 3rem;		/*ボックス同士の間に空けるスペース。1.5文字分。*/
	font-size: 0.9rem;	/*文字サイズ90%*/
}

	/*@container対応ブラウザでは、コンテナ幅(この場合はmain)が899px以下で2カラム*/
	@container (max-width: 899px) {
		.list-kadomaru1-parts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	}


/*ボックス１個あたり*/
.list-kadomaru1-parts .list-parts {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

/*画像*/
.list-kadomaru1-parts .list-parts figure {
	border-radius: 20px;	/*角を丸くする。お好みで。*/
	overflow: hidden;
}

/*テキストボックス*/
.list-kadomaru1-parts .list-parts .text-parts {
	flex: 1;
}

/*h4見出し*/
.list-kadomaru1-parts h4 {
	text-align: center;	/*テキストをセンタリング*/
}

/*説明だけ小さめにする*/
.list-kadomaru1-parts .list-parts p {
	font-size: 0.9em;	/*文字サイズ*/
	line-height: 1.5;	/*行間*/
}

/*square（正方形）画像*/
.list-kadomaru1-parts.square .list-parts figure {
	width: 100%;
	aspect-ratio: 1 / 1;	/*幅に対して高さを同じにする*/
}
.list-kadomaru1-parts.square .list-parts figure img {
	width: 100%;
	height: 100%;
	object-fit: cover;			/*コンテナいっぱいにカバー、余分な部分はカット*/
	object-position: center;	/*中央部分を表示*/
}


/*.list-kadomaru1-parts用のアイコン
---------------------------------------------------------------------------*/
/*アイコン共通*/
.list-kadomaru1-parts .icon1-parts,
.list-kadomaru1-parts .icon2-parts,
.list-kadomaru1-parts .icon3-parts {
	display: block;
	pointer-events: none;
	font-size: 0.7rem;	/*文字サイズ70%*/
	text-align: center;
	position: absolute;
}

/*list-kadomaru1-parts内のアイコン用の色変数*/
.list-kadomaru1-parts {
	--icon-bg-color: var(--accent-color);			/*icon-bg-colorに、theme.cssのaccent-colorを読み込みます。*/
	--icon-text-color: var(--accent-inverse-color);	/*icon-text-bg-colorに、theme.cssのaccent-inverse-colorを読み込みます。*/
}

/*背景がbg1-accent-partsの場合のみ、アイコン色を変更する*/
.bg1-accent-parts .list-kadomaru1-parts {
	--icon-bg-color: var(--accent-inverse-color);	/*icon-bg-colorに、theme.cssのaccent-inverse-colorを読み込みます。*/
	--icon-text-color: var(--accent-color);			/*icon-text-colorに、theme.cssのaccent-colorを読み込みます。*/
}

/*icon1-parts*/
.list-kadomaru1-parts .icon1-parts {
	left: 5px;	/*ボックスの左からの配置*/
	top: 5px;	/*ボックスの上からの配置*/
	padding: 0 0.5rem;	/*アイコン内の余白。上下は0、左右に0.5文字分。*/
	background: var(--icon-bg-color);	/*背景色。list-kadomaru1-parts内のicon-bg-colorを読み込みます。*/
	color: var(--icon-text-color);		/*文字色。list-kadomaru1-parts内のicon-text-colorを読み込みます。*/
}

/*icon2-parts*/
.list-kadomaru1-parts .icon2-parts {
	overflow: hidden;
	left: -6px;	/*ボックスの左からの配置*/
	top: -6px;	/*ボックスの上からの配置*/
	width: 40px;
	line-height: 40px;
	border-radius: 50%;
	background: var(--icon-bg-color);	/*背景色。list-kadomaru1-parts内のicon-bg-colorを読み込みます。*/
	color: var(--icon-text-color);		/*文字色。list-kadomaru1-parts内のicon-text-colorを読み込みます。*/
}

/*icon3-parts（帯を入れているボックス。背景色をつけてみると、意味がわかって調整しやすいです。）*/
.list-kadomaru1-parts .icon3-parts {
	left: -20px;	/*場所を変えたい場合は、ここを変更。下のtopと合わせる。*/
	top: -20px;		/*場所を変えたい場合は、ここを変更。上のleftと合わせる。*/
	width: 100px;
	height: 100px;
	z-index: 2;
}
/*icon3-parts（帯）*/
.list-kadomaru1-parts .icon3-parts > span {
	position: absolute;
	left: 50%;
	top: 50%;
	width: 160px;	/*帯の幅。ここだけ変更しても変化しないので、上の帯を入れているボックスの方で調整して下さい。*/
	transform: translate(-50%, -50%) rotate(-45deg);
	white-space: nowrap;
	background: var(--icon-bg-color);	/*背景色。list-kadomaru1-parts内のicon-bg-colorを読み込みます。*/
	color: var(--icon-text-color);		/*文字色。list-kadomaru1-parts内のicon-text-colorを読み込みます。*/
}

/* ---- お知らせブロック（news3） (news3) ---- */
/*news（お知らせ）
---------------------------------------------------------------------------*/
dl.news3-parts * {margin: 0;padding: 0;}

/*日付*/
dl.news3-parts dt {
	display: flex;
	padding: 1rem 1rem 0 1rem;	/*日付内の余白。上、右、下、左への順番。*/
}

/*テキストブロック*/
dl.news3-parts dd {
	padding: 0 1rem 1rem 1rem;	/*日付内の余白。上、右、下、左への順番。*/
}

/*奇数行目を背景色を少し濃くする。全体同じ色がよければここの数行は削除。*/
dl.news3-parts dt:nth-of-type(odd),
dl.news3-parts dd:nth-of-type(odd) {
	background: var(--light-color);		/*背景色。theme.cssのlight-colorを読み込みます。*/
	color: var(--light-inverse-color);	/*文字色。theme.cssのlight-inverse-colorを読み込みます。*/
}

	/*画面幅900px以上の追加指定*/
	@media (min-width: 900px){

	dl.news3-parts {
		display: grid;
		grid-template-columns: max-content minmax(0, 1fr);	/*日付幅は最大の文字数幅に自動調整し、右側テキストは残り一杯使う。*/
		align-items: start;
	}

	/*日付*/
	dl.news3-parts dt {
		align-self: stretch;
		padding: 0.5rem 1rem;	/*日付内の余白。上下、左右への順番。*/
	}

	/*テキストブロック*/
	dl.news3-parts dd {
		padding: 0.5rem 1rem;	/*日付内の余白。上下、左右への順番。*/
	}

	}/*追加指定ここまで*/

/* ---- 汎用レイアウト（ui-tools-flex3） (ui-tools-flex3) ---- */
/*ui-tools-flex3-parts（左テキスト、右写真ブロック）
---------------------------------------------------------------------------*/
/*ブロック全体*/
.ui-tools-flex3-parts {
	display: flex;
	align-items: center;
	gap: 5vw;	/*テキストと写真の間にあける余白。画面幅の5%。*/
}

	/*画面幅700px以下の追加指定*/
	@media (max-width:700px) {

	.ui-tools-flex3-parts {
		flex-direction: column;	/*縦積みに*/
	}

	}/*追加指定ここまで*/


/*テキストブロック*/
.ui-tools-flex3-parts .text-parts {
	flex: 1;
}

/*画像ブロック*/
.ui-tools-flex3-parts .image-parts {
	width: 55%;	/*幅。お好みで。*/
	position: relative;
}

	/*画面幅700px以下の追加指定*/
	@media (max-width:700px) {

	/*画像ブロック*/
	.ui-tools-flex3-parts .image-parts {
		width: 80%;	/*幅。お好みで。*/
	}

	}/*追加指定ここまで*/

/*大きな画像の左上だけ角をまるくする*/
.ui-tools-flex3-parts .kadomaru-parts {
	border-radius: 1vw 0 0 0;/*プロフィール箇所右側　画像角丸*/
}

/*小さな丸い写真*/
.ui-tools-flex3-parts .maru-parts {
	width: 30%;	/*大きな画像に対しての幅*/
	position: absolute;
	bottom: -7%;	/*大きな画像に対しての下からの配置指定。マイナスがついているので本来の向きとは逆に。*/
	left: -7%;		/*大きな画像に対しての左からの配置指定。マイナスがついているので本来の向きとは逆に。*/
	border-radius: 50%;	/*円形にする*/
	border: 3px solid #fff;	/*枠線の幅、線種、色。*/
}

/* ---- 見出し・本文セット（title2） (title2) ---- */
/*h2,h3,p
---------------------------------------------------------------------------*/
/*h2*/
main h2.title2-parts {
	color: var(--primary-color);	/*文字色。theme.cssのprimary-colorを読み込みます。*/
}

/*h2内のspan*/
main h2.title2-parts span.small-parts {
	display: block;
	opacity: 0.5;		/*透明度。色を50%出した状態。*/
	font-size: 0.7rem;	/*文字サイズ70%*/
	color: var(--bg-inverse-color);	/*文字色。theme.cssのbg-inverse-colorを読み込みます。*/
	letter-spacing: 0.1em;	/*文字間隔を少しだけ広く*/
}

/*bg1-parts内で使用した場合*/
main .bg1-parts h2.title2-parts {
	color: var(--bg-color);	/*文字色。theme.cssのbg-colorを読み込みます。*/
}
main .bg1-parts h2.title2-parts span.small-parts {
	color: var(--bg-color);	/*文字色。theme.cssのbg-colorを読み込みます。*/
}
/*bg1-primary-parts内で使用した場合*/
main .bg1-primary-parts h2.title2-parts {
	color: var(--primary-invere-color);	/*文字色。theme.cssのprimary-invere-colorを読み込みます。*/
}
main .bg1-primary-parts h2.title2-parts span.small-parts {
	color: var(--primary-invere-color);	/*文字色。theme.cssのprimary-invere-colorを読み込みます。*/
}
/*bg1-light-parts内で使用した場合*/
main .bg1-light-parts h2.title2-parts {
	color: var(--primary-color);	/*文字色。theme.cssのprimary-colorを読み込みます。*/
}
main .bg1-light-parts h2.title2-parts span.small-parts {
	color: var(--primary-color);	/*文字色。theme.cssのprimary-colorを読み込みます。*/
}
/*bg1-accent-parts内で使用した場合*/
main .bg1-accent-parts h2.title2-parts {
	color: var(--accent-invere-color);	/*文字色。theme.cssのaccent-invere-colorを読み込みます。*/
}
main .bg1-accent-parts h2.title2-parts span.small-parts {
	color: var(--accent-invere-color);	/*文字色。theme.cssのaccent-invere-colorを読み込みます。*/
}


/*見出しのテキストのフェードイン設定
---------------------------------------------------------------------------*/
@keyframes fadeIn {
	0% {opacity: 0;transform: scale(0.1) rotate(-30deg);}
	100% {opacity: 1;transform: scale(1) rotate(0deg);}
}

/* 初期状態でテキストを非表示にする */
.fade-in-text-parts {
    visibility: hidden;
}

/* アニメーションを適用するクラス。
animationの行の「0.2s」が文字の出現のなめらかさで、大きいほどなめらかに出てきます。
１文字ずつの出現する際の時差は、jsの「テキストのフェードイン効果」の中にある「0.2」で調整できます。*/
.char {
    display: inline-block;
    opacity: 0;
    animation: fadeIn 0.2s linear both;
}

/* ---- CTAセクション（ui-tools-cta1） (ui-tools-cta1) ---- */
/*CTA（誘導セクション）
---------------------------------------------------------------------------*/
/*ボックス全体*/
.ui-tools-cta1-parts {
	text-align: center;	/*テキストをセンタリング*/
	padding: 1rem 0;	/*上下に1文字分、左右はゼロ*/
}

/*見出し*/
.ui-tools-cta1-parts h3 {
	font-size: 1.5rem;	/*文字サイズ1.5倍*/
	margin-bottom: 0.5rem;	/*下に空けるスペース。0.5文字分。*/
	line-height: 1.6;	/*行間*/
}

	/*画面幅500px以下の追加指定*/
	@media (max-width:500px) {

	/*見出し*/
	.ui-tools-cta1-parts h3 {
		font-size: 1.2rem;	/*文字サイズ1.2倍*/
	}

	}/*追加指定ここまで*/


/*説明テキスト*/
.ui-tools-cta1-parts p {
	margin-bottom: 1rem;	/*下に空けるスペース。1文字分。*/
	font-size: 0.95rem;		/*文字サイズ95%*/
}

/*ボタン*/
.ui-tools-cta1-parts .btn-parts {
	margin-bottom: 0;
}
.ui-tools-cta1-parts .btn-parts a {
	display: inline-block;text-decoration: none;
	text-align: center;		/*テキストをセンタリング*/
	padding: 0.8rem 3rem;	/*左右の余白を広めにとる*/
	border-radius: 3px;		/*角を少しだけ丸くする*/
	font-size: 1rem;
	font-weight: bold;	/*太字*/
}

	/*画面幅500px以下の追加指定*/
	@media (max-width:500px) {

	/*ボタン*/
	.ui-tools-cta1-parts .btn-parts a {
		padding: 0.7rem 2rem;	/*ボタン内の余白。上下に0.7文字分、左右に2文字分。*/
	}

	}/*追加指定ここまで*/


/*デフォルト背景（白背景時）のボタン色*/
.ui-tools-cta1-parts .btn-parts a {
	background: var(--primary-color);	/*背景色。theme.cssのprimary-colorを読み込みます。*/
	color: var(--primary-inverse-color);	/*文字色。theme.cssのprimary-inverse-colorを読み込みます。*/
}

/*primary背景上のボタン色（白ボタンに切替）*/
.bg1-primary-parts .ui-tools-cta1-parts .btn-parts a {
	background: var(--bg-color);
	color: var(--primary-color);
}

/*accent背景上のボタン色（白ボタンに切替）*/
.bg1-accent-parts .ui-tools-cta1-parts .btn-parts a {
	background: var(--bg-color);
	color: var(--accent-color);
}

/*bg1-parts（inverse）背景上のボタン色（白ボタンに切替）*/
.bg1-parts .ui-tools-cta1-parts .btn-parts a {
	background: var(--bg-color);
	color: var(--bg-inverse-color);
}

/*light背景上のボタン色（primaryのまま）*/
.bg1-light-parts .ui-tools-cta1-parts .btn-parts a {
	background: var(--primary-color);
	color: var(--primary-inverse-color);
}

/*Font Awesomeアイコンの余白*/
.ui-tools-cta1-parts .btn-parts a i {
	margin-right: 0.5em;	/*アイコンとテキストの間に空けるスペース。0.5文字分。*/
}

/* ---- フッターブロック（footer1） (footer1) ---- */
/*フッター
---------------------------------------------------------------------------*/
#footer1-parts ul {list-style: none;}
#footer1-parts p {margin: 0;}

/*フッターボックス全体*/
#footer1-parts {
	font-size: 0.8rem;	/*文字サイズ80%*/
    padding: var(--content-space-s);	/*ボックス内の余白。theme.cssのcontent-space-sを読み込みます。*/
    background: var(--primary-color);	/*背景色。theme.cssのprimary-colorを読み込みます。*/
    color: var(--primary-inverse-color);	/*文字色。theme.cssのprimary-inverse-colorを読み込みます。*/
}

/*ロゴの最大幅*/
#footer1-parts .logo {
	max-width: 400px;
}

/*フッター直下のdiv（２つのブロックそれぞれ）*/
#footer1-parts > div {
	display: flex;
	flex-direction: column;	/*縦積み*/
	gap: 1rem;	/*要素間に空けるスペース。１文字分。*/
}

/*2つ目（右側）ブロック*/
#footer1-parts .menu {
    display: flex;	/*フッターメニューを横並びに*/
    gap: 2rem;		/*メニュー（ul）同士の間に空けるスペース。２文字分。*/
    align-items: flex-start;
	padding-top: 2.0rem;	
}

	/*画面幅900px以上の追加指定*/
	@media (min-width: 900px){
	
	/*フッターボックス全体*/
	#footer1-parts {
		display: flex;	/*横並びにする*/
		justify-content: space-between;
		gap: 2rem;	/*左右のボックスの間に空けるスペース。２文字分。*/
	}
	
	/*1つ目（左側）ブロック*/
	#footer1-parts > div:nth-of-type(1) {
		flex: 0 0 30%;	/*幅を30%。お好みで。*/
	}

	}/*追加指定ここまで*/

/*Copyright部分*/
#footer1-parts small {
	display: block;
	text-align: right;	/*右寄せ*/
	margin-top: auto;	/*下に*/
}


/*SNSアイコン
---------------------------------------------------------------------------*/
.sns1-parts {
	list-style: none;
	margin: 0;padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;		/*アイコン同士のマージン的な要素。１文字分。*/
}

.sns1-parts i {
	font-size: 30px;	/*アイコンサイズ*/
}
.sns2-parts {
	list-style: none;
	margin: 0;padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;		/*アイコン同士のマージン的な要素。１文字分。*/
	border: none;
}

.sns2-parts i {
	font-size: 30px;	/*アイコンサイズ*/
}
/* ================================================================
   以下、Builder で選択したパーツのCSS（自動連結）
   ================================================================ */

/* ---- サムネイル横スライド（effects-slideimg1） (effects-slideimg1) ---- */
/*サムネイルスライドショー
---------------------------------------------------------------------------*/
/*スライドショー全体を囲むブロック*/
.effects-slideimg1-parts {
	overflow-x: hidden;
}

/*画像たちを囲むブロック*/
.effects-slideimg1-parts .img-parts {
	display: flex;
	overflow: hidden;
}

/*右から左へ、左から右へ、のアニメーション*/
.effects-slideimg1-parts .rtl-parts, .effects-slideimg1-parts .ltr-parts {
	animation-timing-function: linear;
	animation-iteration-count: infinite;
}

.effects-slideimg1-parts .rtl-parts {animation-name: slide-rtl-parts;}
.effects-slideimg1-parts .ltr-parts {animation-name: slide-ltr-parts;}

@keyframes slide-rtl-parts {
0% {transform: translateX(0);}
100% {transform: translateX(-50%);}
}

@keyframes slide-ltr-parts {
0% {transform: translateX(-50%);}
100% {transform: translateX(0);}
}