@charset "UTF-8";
/*
	* パターンスタイルシート
	* CMSのパターンに関するスタイル
	* ver1
	* Copyright (C) ●●など
	* 更新履歴
		└ 
*/
/* ////////////////////////////////////////////////////////////////////////////////////////////////////
	パターン
//////////////////////////////////////////////////////////////////////////////////////////////////// */
/* ******************************************************************************************
	パターン > 枠線
****************************************************************************************** */
.ptn_flameBorder{
	padding: 1rem;
	border: 6px solid #0047aa;
	color: #0b0b0b;
}
.ptn_flameBorder :last-child{
	margin-bottom: 0;/* st_editor配下の要素のmargin-bottom相殺 */
}
/* ******************************************************************************************
	パターン > フロー図骨格
****************************************************************************************** */
.ptn_flow{
	position: relative;
	padding: 1rem;
}
.ptn_flow :last-child{
	margin-bottom: 0;/* st_editor配下の要素のmargin-bottom相殺 */
}
.ptn_flow + .ptn_flow{
	margin-top: 4rem;
}
.ptn_flow + .ptn_flow::before{
	content: "";
	display: block;
	position: absolute;
	top: calc(0px - 6px - 15px - 2rem + 7.4px);/* 基準値0 - border幅 - 矢印の高さ - margin-topの半分 - 矢印の高さの半分 */
	left: 50%;
	transform: translateX(-50%);
	width: 25px;
	height: 15px;
	clip-path: polygon(100% 0, 0 0, 50% 100%);
	background-color: #0047aa;
}
/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
	パターン > フロー図骨格 > フロー図（枠線）
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
.ptn_flow.ptn_flow__flame{
	border: 6px solid #0047aa;
	color: #0b0b0b;
}
/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
	パターン > フロー図骨格 > フロー図（塗りつぶし）
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
.ptn_flow.ptn_flow__fill{
	background-color: #0047aa;
	color: #fff;
}
/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
	パターン > フロー図（見出し付き枠線）
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
.ptn_flowWrap{
	position: relative;
}
.ptn_flowWrap + .ptn_flowWrap{
	margin-top: 4rem;
}
.ptn_flowWrap + .ptn_flowWrap::before{
	content: "";
	display: block;
	position: absolute;
	top: calc(0px - 6px - 15px - 2rem + 7.4px);/* 基準値0 - border幅 - 矢印の高さ - margin-topの半分 - 矢印の高さの半分 */
	left: 50%;
	transform: translateX(-50%);
	width: 25px;
	height: 15px;
	clip-path: polygon(100% 0, 0 0, 50% 100%);
	background-color: #0047aa;
}
/* 見出しのスタイルリセット */
.st_editor .ptn_flowTitle{
	background-color: #0047aa;
	padding: 10px;
	font-size: var(--fontSize20);
	font-weight: bold;
	border: none;
	color: #fff;
	margin: 0;
	border-radius: initial;
	box-shadow: initial;
	background-image: initial;
}
/* 見出しの疑似要素リセット */
.st_editor .ptn_flowTitle::before{
	content: none;
}
.ptn_flowText{
	background-color: #E3EEFA;
	padding: 20px;
}
/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
	パターン > タイトルと枠線
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
.ptn_titleFlameBorder{
	border: 1px solid #999;
    margin: 0 2px;
    padding: 0 20px 20px 20px;
	margin-top: calc(2em + 14px);/* 確保したい余白 + ネガティブマージン相殺 */
}
.ptn_titleFlameBorder > .wp-block-group__inner-container{
	/* タイトルを線と重ねるためネガティブマージン */
	margin-top: -14px;
}
.ptn_titleFlameBorder_contents > .wp-block-group__inner-container > *:last-child{
	margin-bottom: 0;
}
.ptn_titleFlameBorder .ptn_titleFlameBorder_contents:last-child{
	margin-bottom: 0;
}
.st_editor .ptn_titleFlameBorder_title{
	all: unset;/* 見出しブロックだった場合スタイルリセット */
	background-color: #fff;
	display: inline-block;
	margin-bottom: initial;
	padding: 0 20px;
	font-size: var(--fontSize20);
	width: initial;
	color: #0b0b0b;
}
.st_editor .ptn_titleFlameBorder_title::before{
	content: none;
}
.st_editor .ptn_titleFlameBorder_title::after{
	content: none;
}
.ptn_titleFlameBorder_contents{
	padding: 1rem;
}
/* ======================================================================
	タイトルに背景があった場合
====================================================================== */
/* コンテンツの上余白を調整 */
.ptn_titleFlameBorder:has( > .wp-block-group__inner-container .has-background.ptn_titleFlameBorder_title){
	margin-top: calc(2em + 22px);/* 確保したい余白 + ネガティブマージン相殺 */
}
/* 背景の余白分、移動 */
.ptn_titleFlameBorder > .wp-block-group__inner-container:has(.has-background.ptn_titleFlameBorder_title){
	/* タイトルを線と重ねるためネガティブマージン */
	margin-top: -22px;
}
/* 背景の余白調整 */
.st_editor .has-background.ptn_titleFlameBorder_title{
	padding: 10px 2em;
}

/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
	パターン > 質問と回答
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
/* 通常 */
.st_editor .ptn_faqArea{
	background-color: #0047aa;
}
.st_editor .ptn_faq_question{
	background-color: #E3EEFA;
	/* color: #fff; */
	padding: 1rem 1rem 1rem calc(3rem + 1.8rem);/* 文字列分 + 余白 */
	margin-bottom: 0;
	position: relative;
	font-weight: bold;
	font-size: 20px;
}
.st_editor .ptn_faq_question::before{
	content: '質問：';
	position: absolute;
	top: 1rem;
	left: 1rem;
}
.st_editor .ptn_faq_answerArea{
	padding: 1rem 1rem 1rem calc(3rem + 1rem);/* 文字列分 + 余白 */
	margin-bottom: 0;
	position: relative;
}
.st_editor .ptn_faq_answerArea::before{
	content: '回答：';
	position: absolute;
	top: 1rem;
	left: 1rem;
}
/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
	パターン > 質問と回答（アイコン）
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
.st_editor .ptn_faqIconArea{

}
.st_editor .ptn_faq_questionIcon{
	padding: 1rem 0 1rem calc(40px + 1.3rem);/* アイコン幅分 + 余白 */
	margin-bottom: 0;
	position: relative;
	font-weight: bold;
	font-size: 20px;
	/* margin-bottom: 30px; */
}
.st_editor .ptn_faq_questionIcon::before{
    content: 'Q';
	position: absolute;
	top: 16px;
	left: 0;
    width: 40px;
    height: 40px;
    font-size: 1.5rem;
    background-color: #0047aa;
    border-radius: 50px;
    color: #fff;
    display: flex;
    justify-content: center;
	font-weight: bold;
	align-items: center;
	font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen-Sans, Ubuntu, Cantarell, Helvetica Neue, sans-serif;
	padding-bottom: 4px;
}
.st_editor .ptn_faq_answerAreaIcon{
	padding: 1rem 0 1rem calc(40px + 1rem);/* アイコン幅分 + 余白 */
	margin-bottom: 0;
	position: relative;
}
.st_editor .ptn_faq_answerAreaIcon::before{
    content: 'A';
	position: absolute;
	top: 1rem;
	left: 0;
    width: 40px;
    height: 40px;
    font-size: 1.5rem;
    /* background-color: #ea394c; */
    background-color: #e50012;
    border-radius: 50px;
    color: #fff;
    display: flex;
    justify-content: center;
	align-items: center;
	font-weight: bold;
	font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen-Sans, Ubuntu, Cantarell, Helvetica Neue, sans-serif;
	padding-bottom: 4px;
}
@media screen and (max-width:576px){
	.st_editor .ptn_faq_questionIcon{
		padding: 1rem 0 1rem calc(30px + 0.5rem);/* アイコン幅分 + 余白 */
		font-size: var(--fontSize18);
		margin-bottom: 0;
	}
	.st_editor .ptn_faq_questionIcon::before{
		width: 30px;
		height: 30px;
		font-size: var(--fontSize20);
	}
	.st_editor .ptn_faq_answerAreaIcon{
		padding: 1rem 0 1rem calc(30px + 0.5rem);/* アイコン幅分 + 余白 */
	}
	.st_editor .ptn_faq_answerAreaIcon::before{
		width: 30px;
		height: 30px;
		font-size: var(--fontSize20);
	}
}
/* ******************************************************************************************
	パターン > 電話番号（アイコン付き）
****************************************************************************************** */
.st_editor .ptn_telLink > a{
	position: relative;
	font-weight: bold;
	font-size: var(--fontSize24);
	padding-left: calc(40px + 10px);/* アイコン幅 + 余白 */
}
.st_editor .ptn_telLink > a:before{
	content: '\f879';
    font-family: "Font Awesome 5 Free";
    font-size: 20px;
	background-color: var(--mainColor);
    padding-right: 0.5rem;
    color: #fff;
    font-weight: bold;
    position: absolute;
    left: 0;
    top: calc(50% + 2px);
    transform: translateY(-50%);
	border-radius: 100px;
	width: 40px;
	height: 40px;
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 0;
}