@charset "UTF-8";

/*!
Theme Name: HA-Homepage Basic
Description: はじめて安心ホームページパック-Basic用カスタマイズ子テーマ（親テーマ：Cocoon）
Theme URI: https://homepage.hajimete-anshin.com/basic
Author:	Power Charge LLC
Template:	cocoon-master
Version:	1.0.1
Tags:	design-typeA
 - Tagsのパラメータでどのデザインタイプにするか判定（存在しないタイプを指定した場合はcommonに自動変換）
 - common,design-typeA,design-typeB,design-typeC,design-typeD,design-typeE
*/

/**
 * 本CSSには共有のCSS処理を記載
 * - 各デザインに依存するフロントページ/個別ページ専用CSSは別途定義しfunctions.phpで読み込み
 * */

/************************************************************************************************************
** カスタムプロパティリスト
** - 基本的に細かなカスタマイズ（文字サイズやカラー等）は、Cocoon設定でなくCSSで一括設定する
**   - Cocoonの標準設定では適用できない箇所への対応＆カスタマイズ箇所への対応を行うため
************************************************************************************************************/
:root{
	
	/** キャッチフレーズエリアの背景色*/
	--custom-catchphrase-background-color: #07384c;
	/** キャッチフレーズの文字色*/
	--custom-catchphrase-text-color: #ffffff;
	/** キャッチフレーズの文字サイズ*/
	--custom-catchphrase-font-size: 12px;
	
	/** ヘッダー（ロゴ等）エリアの背景色*/
	--custom-header-area01-background-color: #fdfdfd;
	
	/** グローバルメニューエリアの背景色*/
	/* ヘッダースタイルが『トップメニュー』の場合、ヘッダーエリアの背景色に合わせないとデザインが歪になる*/
	--custom-global-menu-background-color: #000000;
	/** グローバルメニューオンマウス時の背景色*/
	--custom-global-menu-hover-background-color: #ffffff33;
	/** グローバルメニューの文字サイズ*/
	--custom-global-menu-font-size: 15px;
	/** グローバルメニュー（説明文）の文字サイズ*/
	--custom-global-menu-description-font-size: 14px;
	/** グローバルメニュー の文字色*/
	--custom-global-menu-text-color:#ffffff;
	/** グローバルメニュー（説明文）の文字色*/
	--custom-global-menu-description-text-color:#eae8e1;
	/** グローバルメニューのサブメニュー背景色*/
	--custom-global-submenu-background-color: #000000;
	/** グローバルメニューのサブメニュー文字色*/
	--custom-global-submenu-text-color: #000000;
	
	/** Fixヘッダーメニューの文字色*/
	--custom-fix-menu-text-color:#000000;
	/** Fixヘッダーメニューの文字サイズ*/
	--custom-fix-menu-font-size: 16px;
	/** Fixヘッダーメニュー（説明文）の文字サイズ*/
	--custom-fix-menu-description-font-size: 14px;
	/** Fixヘッダーメニュー（説明文）の文字色*/
	--custom-fix-menu-description-text-color:#afafb0;
	/** Fixヘッダーメニューの横幅*/
	--custom-fix-menu-width:70%;
	
	/** サイト全体の背景色*/
	--custom-main-background-color:#fdfdfd;

	/** フッターエリアの背景色*/
	--custom-footer-background-color: #000000;
	/** フッターエリアの文字色*/
	--custom-footer-text-color: #ffffff;
	/** フッターメニューの文字サイズ*/
	--custom-footer-text-size:16px;
			
	/** 特殊アコーディオンデザイン1用の数値定義*/
	--custom-toggle-design1-background-color:#000;
	--custom-toggle-design1-text-color:#fff;
	
	/* table-sp-vertical-design01用設定値*/
	/** テーブル全体の背景色(デフォルトはページ背景色と同じにセット)*/
	--custom-table-sp-vertical-background-color:var(--custom-main-background-color);
	/** テーブル全体の文字色*/
	--custom-table-sp-vertical-text-color:#000000;
	/** テーブル枠線の色*/
	--custom-table-sp-vertical-border-color:#ccc;		
	/** テーブル1列目の背景色*/
	--custom-table-sp-vertical-td1-background-color:#ededed;
	/** テーブル1列目の文字色*/
	--custom-table-sp-vertical-td1-text-color:#000000;
	
	/* table-sp-vertical-design02用設定値*/
	/** テーブル全体の背景色(デフォルトはページ背景色と同じにセット)*/
	--custom-table-sp-vertical02-background-color:var(--custom-main-background-color);
	/** テーブル全体の文字色*/
	--custom-table-sp-vertical02-text-color:#000000;
	/** テーブル枠線の色*/
	--custom-table-sp-vertical02-border-color:#ccc;
	/** テーブル内波線の色(透過90%)*/
	--custom-table-sp-vertical02-dashborder-color:#ededede6;	
	/** テーブル1列目の背景色*/
	--custom-table-sp-vertical02-td1-background-color:#ededed;
	/** テーブル1列目の文字色*/
	--custom-table-sp-vertical02-td1-text-color:#000000;	
	/** テーブル1列目の見出し波線色*/
	--custom-table-sp-vertical02-td1-border-color:#000000;
	
	
	/* sp-linear-table-headline-tdtr用設定値*/
	/** テーブル全体の背景色(デフォルトはページ背景色と同じにセット)*/
	--custom-table-sp-vertical-headline-tdtr-background-color:var(--custom-main-background-color);
	/** テーブル全体の文字色*/
	--custom-table-sp-vertical-headline-tdtr-text-color:#000000;
	/** テーブル枠線の色*/
	--custom-table-sp-vertical-headline-tdtr-border-color:#ccc;
	/** テーブル1列目の背景色*/
	--custom-table-sp-vertical-headline-tdtr-firsttr-background-color:#ededed;
	/** テーブル1列目の文字色*/
	--custom-table-sp-vertical-headline-tdtr-firsttr-text-color:#000000;
	/** テーブル1行目の背景色*/
	--custom-table-sp-vertical-headline-tdtr-firsttd-background-color:#ededed;
	/** テーブル1行目の文字色*/
	--custom-table-sp-vertical-headline-tdtr-firsttd-text-color:#000000;
	/** SP閲覧時の見出しの色*/
	--custom-table-sp-vertical-headline-tdtr-headline-text-color:#a6a6a6;

	/* table-menu-design01用設定値*/
	/** テーブル全体の背景色(デフォルトはページ背景色と同じにセット)*/
	--custom-table-menu-design01-background-color:var(--custom-main-background-color);
	/** テーブル全体の文字色*/
	--custom-table-menu-design01-text-color:#000000;
	/** テーブル枠線の色*/
	--custom-table-menu-design01-border-color:#ccc;
	/** テーブル内波線の色(透過90%)*/
	--custom-table-menu-design01-dashborder-color:#ededede6;

	/* table-horizontal-scroll用設定値*/
	/** テーブル全体の背景色(デフォルトはページ背景色と同じにセット)*/
	--custom-table-horizontal-scroll-background-color:var(--custom-main-background-color);
	/** テーブル全体の文字色*/
	--custom-table-horizontal-scroll-text-color:#000000;
	/** テーブル枠線の色*/
	--custom-table-horizontal-scroll-border-color:#ccc;

}

/* フルブロック系パーツ用カスタマイズ設定 =========
 * ⬇︎ ⬇︎ ⬇︎ ===========================*/
#container{
	/* はみ出した部分を除去、横スクロールバーへの対応*/
	/* これがないと、横スクロールが発生してしまう*/
	overflow: hidden;
}

/* -- フルワイドブロック - 背景固定画像タイプ --*/
.fullcover-contents,.fullcover-contents .wp-block-cover__background,.fullcover-contents .wp-block-cover__image-background{
	/* 親コンテンツを超えて幅最大化*/
	margin-left: calc(50% - 50vw);
	width:100vw;
	/* コンテンツの最低高さを定義*/
	min-height:50px!important;
}

/* -- 2カラム - 左画像：右テキストタイプ --*/
.fullwide-image-left{
	/* 親コンテンツを超えて幅最大化*/
	margin-left: calc(50% - 50vw);
	width:100vw;
}
.fullwide-image-left-right-colum{
	/* 要素の真ん中配置*/
	display: flex;
	justify-content: center;
	align-items: center;
}
@media screen and (min-width:1024px){
	.fullwide-image-left.column-wrap > div {
	    width: 50%;
	}
}

/* -- 2カラム - 左テキスト：右画像タイプ --*/
.fullwide-image-right{
	/* 親コンテンツを超えて幅最大化*/
	margin-left: calc(50% - 50vw);
	width:100vw;
	display: flex;
}
.fullwide-image-right-left-colum{
	/* 要素の真ん中配置*/
	display: flex;
	justify-content: center;
	align-items: center;
}
@media screen and (min-width:1024px){
	.fullwide-image-right.column-wrap > div {
	    width: 50%;
	}
}
@media screen and (max-width: 1023px){
	/* PC以外の場合、右カラムと左カラムの順番を入れ替える*/
	.fullwide-image-right > .column-right{
		order: 1;
		/** 2カラムは左、右でマージンが調整されているため、逆転させる*/
		margin-bottom:1.8em!important;
	}
	.fullwide-image-right > .column-left{
		order: 2;
		/** 2カラムは左、右でマージンが調整されているため、逆転させる*/
		margin-bottom:0;
	}
}

/* -- 2カラムブロークン - 左画像：右テキストタイプ --*/
.broken-grid-box,.broken-grid-box .wp-block-cover__background,.broken-grid-box .wp-block-cover__image-background{
	/* 親コンテンツを超えて幅最大化*/
	margin-left: calc(50% - 50vw);
	width:100vw;
}
.broken-grid-box.wp-block-cover, .broken-grid-box.wp-block-cover-image {
	/* デフォルトでセットされているパディングを外す*/
	padding: 0em;
}
/* デフォルトでgapがセットされているので、ブロークングリッドの場合は除去*/
	.broken-grid-box .is-layout-flex{	
	gap:0;
}

@media (min-width: 1024px){
	/* PCの時は右にずらす*/
	.broken-grid-left .broken-grid-right-column {
		position:relative;
		left:-6em;
	}
}
@media (max-width:1023px){
	/* PC以外は上にずらす*/
	.broken-grid-left .broken-grid-right-column{
		position:relative;
		top:-4em;
		/* 上にずらしたぶん、下のマージンを処理*/
		margin-bottom:-4em!important;
	}
}

/* -- 2カラム - 左テキスト：右画像タイプ --*/
/* 共通部分は左画像バージョンに入ってる*/
@media (min-width: 1024px){
	/* PCの時は右にずらす*/
	.broken-grid-right .broken-grid-left-column {
		position:relative;
		right:-6em;
	}
}
@media (max-width:1023px){
	/* PC以外は上にずらす*/
	.broken-grid-right .broken-grid-left-column{
		position:relative;
		top:-4em;
		/* 上にずらしたぶん、下のマージンを処理*/
		margin-bottom:-4em!important;
	}
	/* PC以外の場合、右カラムと左カラムの順番を入れ替える*/
	.broken-grid-right > .broken-grid-right-column{
		order: 1;
	}
	.broken-grid-right > .broken-grid-left-column{
		order: 2;
	}
}

/* -- 複数カラム均等配置タイプ --*/
/* JavaScriptによる処理も必要*/
.fullwide-any-parts{
	/* 親コンテンツを超えて幅最大化*/

	margin-left: calc(50% - 50vw);
	width:100vw;
}
.fullwide-any-parts.is-layout-flex{
	/* クラス指定したカラムブロックの場合のみ、隙間を除去*/
	gap:0px;
}


/* -- マップ全幅配置用ブロック --*/
.fullwide-column{
	margin-left: calc(50% - 50vw);
	width:100vw;
	display: flex;
}
body .is-layout-constrained.fullwide-column > :where(:not(.alignleft):not(.alignright):not(.alignfull)) {
        max-width:100%!important;
}



/* テーブル系パーツ用カスタマイズ設定 ===========
 * ⬇︎ ⬇︎ ⬇︎ ===========================*/
/*******************
** [table-sp-vertical-design01]
********************/
.table-sp-vertical-design01 td{
	border: solid 1px var(--custom-table-sp-vertical-border-color)!important;
}
.table-sp-vertical-design01tr td{
	/* 全体の背景色*/
	background-color:var(--custom-table-sp-vertical-background-color);
	/* 全体の文字色*/
	color:var(--custom-table-sp-vertical-text-color);
}
.table-sp-vertical-design01{
	margin: 20px auto;
	border-collapse: collapse;
	border-spacing: 0;
}
.table-sp-vertical-design01 th{
	padding: 10px;
}
.table-sp-vertical-design01 tr td:nth-child(1){
	/* 1列目の背景色*/
	background-color:var(--custom-table-sp-vertical-td1-background-color);
	/* 1列目の文字色*/
	color:var(--custom-table-sp-vertical-td1-text-color);
	font-weight:bold;
	font-size:102%;
	width:20%;
}
@media screen and (max-width: 1023px){
	.table-sp-vertical-design01 {
		width: 80%;
	}
	.table-sp-vertical-design01 th,
	.table-sp-vertical-design01 td {
		border-bottom: none!important;
		display: block;
		width: 100%;
	}
	/** PC以外は1行目の幅を最大に変換*/
	.table-sp-vertical-design01 tr td:nth-child(1){
		width:100%;
	}
	/** スマホ表示の際は最終要素に下線がないとデザインが崩れるので、下線追加*/
	.table-sp-vertical-design01 tr:last-child td:last-child{
		border-bottom: solid 1px var(--custom-table-sp-vertical-border-color)!important;
	}
}


/*******************
** [table-sp-vertical-design02]
********************/
.table-sp-vertical-design02 tr td{
	background-color:var(--custom-table-sp-vertical02-background-color);
}
.table-sp-vertical-design02 td{
	border:none!important;
	border-bottom: 1px dashed var(--custom-table-sp-vertical02-dashborder-color)!important;
}
.table-sp-vertical-design02 tr td:nth-child(1){
	font-weight:bold;
	font-size:102%;
	background-color:var(--custom-table-sp-vertical02-td1-background-color)!important;
	border-bottom-color:var(--custom-table-sp-vertical-headline-tdtr-headline-text-color)!important;
	width:20%;
}
.table-sp-vertical-design02 tr:nth-last-of-type(1) td{
	border-bottom:solid!important;
	border-bottom-width:1.5px!important;
	border-bottom-color:var(--custom-table-sp-vertical02-dashborder-color)!important;
}
.table-sp-vertical-design02 tr:nth-child(1) td{
	border-top:solid!important;
	border-top-width:1.5px!important;
	border-top-color:var(--custom-table-sp-vertical02-dashborder-color)!important;
}

@media screen and (max-width: 1023px){
	.table-sp-vertical-design02 tr td:nth-child(1){
		width:100%;
		border-bottom:none!important;
	}
	.table-sp-vertical-design02 tr td:nth-last-of-type(1){
		border-bottom:none!important;
	}
	.table-sp-vertical-design02 tr:nth-last-of-type(1) td{
		border-bottom: 1px dashed var(--custom-table-sp-vertical02-dashborder-color)!important;
	}
	.table-sp-vertical-design02 tr:nth-child(1) td{
		border-top:none!important;
	}
	.table-sp-vertical-design02 th,
	.table-sp-vertical-design02 td {
		display: block;
		width: 100%;
	}
	.table-sp-vertical-design02 {
		width: 80%;
	}
	.table-sp-vertical-design02 tr:nth-last-of-type(1) td:nth-last-of-type(1){
		border-bottom:solid!important;
		border-bottom-width:1.5px!important;
		border-bottom-color:var(--custom-table-sp-vertical02-dashborder-color)!important;
	}
}


/*******************
** [table-sp-vertical-headline-tdtr]
********************/
.table-sp-vertical-headline-tdtr td{
	/* テーブル全体の枠線色*/
	border: solid 1px var(--custom-table-sp-vertical-headline-tdtr-border-color)!important;
}
.table-sp-vertical-headline-tdtr tr td{
	/* 全体の背景色*/
	background-color:var(--custom-table-sp-vertical-headline-tdtr-background-color);
	/* 全体の文字色*/
	color:var(--custom-table-sp-vertical-tdtr-text-color);
}
.table-sp-vertical-headline-tdtr tr td:nth-child(1){
	/* 1列目の背景色*/
	background-color:var(--custom-table-sp-vertical-headline-tdtr-firsttr-background-color);
	/* 1列目の文字色*/
	color:var(--custom-table-sp-vertical-headline-tdtr-firsttr-text-color);
}
.table-sp-vertical-headline-tdtr tr:nth-child(1) td{
	/* 1行目の背景色*/
	background-color:var(--custom-table-sp-vertical-headline-tdtr-firsttd-background-color);
	/* 1列目の文字色*/
	color:var(--custom-table-sp-vertical-headline-tdtr-firsttd-text-color);
}
.table-sp-vertical-headline-tdtr{
	margin: 20px auto;
	border-collapse: collapse;
	border-spacing: 0;
}
.table-sp-vertical-headline-tdtr th{
	color: #fff;
	padding: 10px;
}
.table-sp-vertical-headline-tdtr tr td:nth-child(1){
	font-weight:bold;
	font-size:102%;
	width:20%;
}
.table-sp-vertical-headline-tdtr tr:nth-child(1) td{
	font-weight:bold;
	font-size:102%;
}
@media screen and (max-width: 640px) {
  .table-sp-vertical-headline-tdtr {
	  width: 80%;
  }
  .table-sp-vertical-headline-tdtr tr:first-child{display:none;}
  .table-sp-vertical-headline-tdtr tr {
	  width: 100%;
  }
  .table-sp-vertical-headline-tdtr td {
	  display: block;
	  text-align: center;
	  width: 100%;
  }
  .table-sp-vertical-headline-tdtr td:first-child {
	  font-weight: bold;
	  text-align: center;
  }
	.table-sp-vertical-headline-tdtr tr td:nth-child(1){
		font-weight:bold;
		font-size:102%;
		width:100%;
	}
	.table-sp-vertical-headline-tdtr th,
	.table-sp-vertical-headline-tdtr td {
		border-bottom: none!important;
	}
	/** スマホ表示の際は最終要素に下線がないとデザインが崩れるので、下線追加*/
	.table-sp-vertical-headline-tdtr tr:last-child td:last-child{
		border-bottom: solid 1px var(--custom-table-sp-vertical-headline-tdtr-border-color)!important;
	}
	.table-sp-vertical-headline-tdtr.sp td:before{
		/* contentの中身（data-nameプロパティ）はJavaScriptでセット*/
		content: attr(data-name);
		font-size: .7rem;
		font-weight:bold;
		color: var(--custom-table-sp-vertical-headline-tdtr-headline-text-color);
		display: block;
		text-align:center;
	}
}


/*******************
** [table-menu-design01]
********************/
.table-menu-design01 tr td{
	background-color:var(--custom-table-menu-design01-background-color);
}
.table-menu-design01 td{
	border:none!important;
	border-bottom: 1px dashed var(--custom-table-menu-design01-dashborder-color)!important;
}
.table-menu-design01 tr td:nth-child(1){
	font-weight:bold;
	font-size:102%;
	width:50%;
}
.table-menu-design01 tr:nth-last-of-type(1) td{
	border-bottom:solid!important;
	border-bottom-width:1.5px!important;
	border-bottom-color:var(--custom-table-menu-design01-dashborder-color)!important;
}
.table-menu-design01 tr:nth-child(1) td{
	border-top:solid!important;
	border-top-width:1.5px!important;
	border-top-color:var(--custom-table-menu-design01-dashborder-color)!important;
}

@media screen and (max-width: 1023px){
	.table-menu-design01 tr td:nth-child(1){
		width:70%;
	}
	.table-menu-design01 tr td:nth-last-child(1){
		width:30%;
		text-align:left;
	}
}

.mobile-header-menu-buttons{
	display:none;
}

/* モバイルスライドインメニュー */
.fa-times {
color: red;/* 閉じるボタンの色 */
font-size: 0.8em;
}
ul.menu-drawer:before {
	content:"MENU";
	background-color: #000057;/* Menu背景色 */
	font-size: 1.2em;
}
.menu-drawer li {
    padding: 0.2em;
}
ul.menu-drawer:before, ul.menu-drawer:after {
    display: block;
    background: whitesmoke;
    color: white;
    padding: 0.5em;
    font-family: sans-serif;
    font-weight: 900;
    text-align: center;
}
ul.menu-drawer:after {
background-color: #fff;
}
.menu-drawer a {
color: #333 !important;/* 文字色 */
font-weight: 900;
}
.menu-drawer a:hover {
background-color: #eff8f9;
}
.menu-drawer a .fas, .menu-drawer a .far,.menu-drawer a .fa,.menu-drawer a .fab {
margin-right: 3px;
}
.sub-menu li {
font-size: 0.8em;
}

/************************************************************************************************************
 * 【特殊アコーディオンデザイン関連カスタマイズ】
 * 特殊アコーディオンデザイン関連はここにまとめる
 * ⬇︎ ⬇︎ ⬇︎
************************************************************************************************************/
/********************
** [custom-toggle-n01]
** - クラス付与で特殊デザイン1を適用する
**   - 背景色/テキストカラーにカスタムプロパティが適用される
**   - アコーディオンに設定されているボーダー（枠線）を除去
**   - PCで見たときとそれ以外で大きく挙動とデザインを変更する
**   - PC
**     - 開閉ボタンを非表示に
**     - アコーディオンタイトルを真ん中配置に
**     - ポインタ処理を停止
**   - SP
**     - 開閉ボタンを活性化
**     - アコーディオンタイトルを左寄せ（開閉ボタンエリアを確保するため）
**     - ポインタ処理を活性化
********************/

.hhap-design-1 .toggle-button  {
	/* スマホはタイトル左寄せ*/
    text-align: left;
    font-weight: bold;
    box-shadow: 0 1px 2px 0px #ddd;
    border: none;
	/* SP用の表示にpaddingを合わせる*/
    padding: 1em 2em 1em 0.5em;
}
.hhap-design-1 .toggle-button::before,
.hhap-design-1 .toggle-checkbox:checked~.toggle-button::before {
	/* デフォルトの開閉ボタンを非表示（これは使わない）*/
    display:none;
}
.hhap-design-1 .toggle-button::after,hhap-design-1 
.toggle-checkbox:checked~.toggle-button::after {
	/* 開閉ボタンを右側に配置*/
    font-family: "Font Awesome 5 Free";
    content: '\f107';
    font-size: 1em;
    position: absolute;
	/* 開閉ボタン用のエリアを確保*/
    right: 0.7em;
    transition: 0.3s;
	/* 開閉ボタンを縦中央に配置*/
	top:calc(50% - 1em);
}
.hhap-design-1 .toggle-checkbox:checked~.toggle-button::after {
	/* 開閉時にアニメーション（上下反転）*/
	transition: 0.3s;
    transform: rotate(180deg) translateY(3px);
}
.hhap-design-1 .toggle-checkbox:checked~.toggle-content {
    margin-top: 10px;
	/* 枠線は除去*/
    border: none;
	/* コンテンツの中身エリア幅はアコーディオン幅と同じに*/
    padding: 0em;
}
/* PCの場合に挙動を変える処理*/
@media screen and (min-width:1024px){
	.hhap-design-1 .toggle-button::after,hhap-design-1 
.toggle-checkbox:checked~.toggle-button::after {
		/* PCの時は開閉ボタンを非表示*/
		display:none;
	}
	.hhap-design-1 .toggle-button:hover {
		/* PCの時はマウスを乗せても色をぼかさない*/
		opacity: 1;
	}
	.hhap-design-1 .toggle-button  {
		/* PCの時はポインタ表示をしない*/
		pointer-events:none;
		/* タイトル中央配置に合わせたpaddingに調整*/
		padding:1em;
		/* タイトルを中央配置に*/
		text-align: center;
	}
}
/** 
 * ⬆︎⬆︎⬆︎
 * [custom-toggle-n01]
 * ここまで
 * */

/* 既存ボタンデザインカスタマイズ ===============
 * ⬇︎ ⬇︎ ⬇︎ ===========================*/
.btn {
	padding: 10px;
	font-size: 14px;
	max-width:80%;
	width:400px;
}
.btn-m {
	padding: 10px;
	font-size: 14px;
	max-width:80%;
	width:600px;
}
.btn-l {
	padding: 10px;
	font-size: 14px;
	max-width:80%;
	width:800px;
}
/** button-hhap クラスを付与することでデザイン適用*/
.button-hhap > .btn:after {
    content: "\f101";
	font-family: 'Font Awesome 5 Free';
    position: absolute;
    right: 1.25em;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    transition: -webkit-transform .25s;
    transition: transform .25s;
    transition: transform .25s,-webkit-transform .25s
}

.button-hhap > .btn:hover:after {
    -webkit-transform: translateX(4px) translateY(-50%);
    transform: translateX(4px) translateY(-50%)
}


/* 既存フォントデザインリセット =================
 * ⬇︎ ⬇︎ ⬇︎ ===========================*/
/* 見出し2 */
.article h2{
	background:none;
	padding: 0;
}
/* 見出し3 */
.article h3{
	border-top:none;
	border-bottom:none;
	border-left:none;
	border-right:none;
	padding: 0;
}
/* 見出し4 */
.article h4{
	border-top:none;
	border-bottom:none;
	padding: 0;
}
/* 見出し5 */
.article h5{
	border-bottom:none;
	padding: 0;
}
/* 見出し6 */
.article h6{
	border-bottom:none;
	padding: 0;
}


/* マージン除去カスタマイズ設定 ===============
 * ⬇︎ ⬇︎ ⬇︎ ===========================*/
/** bottom-0クラスを付与した要素は、要素下の隙間を強制的に0にする*/
.bottom-0{
	margin-bottom: 0!important;
}

/* PC/SP限定表示カスタマイズ ==================
 * ⬇︎ ⬇︎ ⬇︎ ===========================*/
/** */
@media screen and (max-width:1023px){
	.only-pc{
		display:none!important;
	}
}
@media screen and (min-width:1024px){
	.only-sp{
		display:none!important;
	}
}


/* カラーセット ===========================
 * ⬇︎ ⬇︎ ⬇︎ ===========================*/
/** キャッチフレーズへの適用処理*/
.tagline{
	background-color:var(--custom-catchphrase-background-color)!important; 
	font-size:var(--custom-catchphrase-font-size)!important;
	color:var(--custom-catchphrase-text-color)!important;
}

/** ヘッダーへの適用処理*/
.header-in{
	background-color:var(--custom-header-area01-background-color)!important;
}

/** グローバルメニューへの適用処理*/
.navi.cf{
	background-color:var(--custom-global-menu-background-color)!important;
}
.navi.cf .item-label{
	font-size:var(--custom-global-menu-font-size)!important;
	color:var(--custom-global-menu-text-color)!important;	
}
.navi.cf .item-description.sub-caption{
	font-size:var(--custom-global-menu-description-font-size)!important;
	color:var(--custom-global-menu-description-text-color)!important;	
}

/** メインへの適用処理*/
.content.cf, .main, .sidebar{
	background-color:var(--custom-main-background-color)!important;
}

/** Fixヘッダーへの適用処理*/
.header-container.fixed-header .navi.cf{
	/*背景色はヘッダーに合わせる*/
	background-color:var(--custom-main-background-color)!important;
}
.header-container.fixed-header .navi.cf .item-label{
	color:var(--custom-fix-menu-text-color)!important;
}
.header-container.fixed-header .navi.cf .item-description.sub-caption{
	/*文字サイズ（説明文）*/
	font-size:var(--custom-fix-menu-description-font-size)!important;
	/*文字色（説明文）*/
	color:var(--custom-fix-menu-description-text-color)!important;
}