@charset "UTF-8";
/********************************************************************************

parts-config.css for kakuyasu

********************************************************************************/

/*============================================================
 CSS変数 for parts-btn　※サイトデザインに従い適宜設定
*============================================================*/
/* 標準ボタン設定　※設定必須
---------------------------------------- */
.parts-btn {
	--width: fit-content;				/* ボタン幅 */
	--min-width: 280px;					/* ボタン幅min */
	--border-radius: 4px;				/* ボタン角丸 */
	--padding: 13px 46px;				/* ボタン余白　border2px分を引くこと */
	--font-size: 18px;					/* ラベルサイズ */
	--line-height: 29px;				/* ラベル高さ　pxで指定すること */
	--color: #fff;					   /* ラベル色　 */
	--background: #0AC4DD;            /* ボタン背景色 */
	--border-color: #0AC4DD;          /* ボタン線色 */
	/* --hover-color: #fff; */
	--hover-color: inherit;			  /* ホバー時　ラベル色 */
	--hover-background: rgba(0, 0, 0, 0.1);	  /* ホバー時　ボタン背景色 */
	--hover-border-color: rgba(0, 0, 0, 0.1);	  /* ホバー時　ボタン線色 */

	--sp-width: fit-content;			/* スマホ時　ボタン幅*/
	--sp-padding: 11px 0;				/* スマホ時　ボタン余白　border2px分をプラスすること */
}

/* フォーム用ボタン設定
---------------------------------------- */
.parts-btn[data-name="form"] {
	--width: 200px;
	--max-width: 200px;
	--min-width: unset;

	--sp-width: 40%;
}
/* フォーム用ボタン設定　(白+線)
---------------------------------------- */
.parts-btn[data-name="form-border"] {
	--width: 200px;
	--max-width: 200px;
	--min-width: unset;

	/* --color: #1591EB;
	--background: #fff;
	--border-color: #1591EB;
	--hover-color: #1591EB;
	--hover-background: #f7f7f7;
	--hover-border-color: #1591EB; */

	--sp-width: 40%;
}


/*============================================================
 CSS変数 for parts-boxes　※サイトデザインに従い適宜設定
*============================================================*/
/* オプション設定
---------------------------------------- */
/* 簡易テーブル */
.parts-boxes[data-type="table"] {
	/* --col-half-margin: 24px;
	--row-margin-bottom: 24px;
	--label-font-size: 12px;
	--label-line-height: 140%;
	--label-padding: 8px;
	--label-margin-bottom: 8px;
	--label-background-color: #E6F0FD;
	--data-padding: 0 8px; */
}

/* モバイル時flexbox解除
---------------------------------------- */
/* タブレットのブレイクポイントで解除し、アイテム横幅100%(デフォルト) */
.parts-boxes[data-break="tablet"] {
	/* --break-width: 100%; */
}
/* スマホのブレイクポイントで解除し、アイテム横幅100%(デフォルト) */
.parts-boxes[data-break="sp"] {
	/* --break-width: 100%; */
}

/*============================================================
 CSS変数 for parts-tabs　※サイトデザインに従い適宜設定
*============================================================*/
/* 標準タイプ　共通設定　
---------------------------------------- */
.parts-tabs:not([data-type]) {
	/* --tabs-main-color: #1356AF;
	--tabs-sub-color: #fff; */

	/*--tab-font-size: 16px;
	--tab-line-height: 160%;
	--tab-width: 196px;
	--tab-padding: 16px 0;
	--tab-margin: 12px;
	--content-padding: 24px 16px;
	--content-background-color: #fff; */
}

/* 標準タイプ　横タブ設定
---------------------------------------- */
/* スマホのブレイクポイントでタブを横スクロール */
.parts-tabs:not([data-type])[data-break="sp-tab-scroll"] {
	/* --sp-scroll-width: 720px; */
}
/* スマホのブレイクポイントでタブ幅均等 */
.parts-tabs:not([data-type])[data-break="sp-tab-even"] {
	--sp-tab-cnt: 3;
}

/* 標準タイプ　縦タブ設定
---------------------------------------- */
.parts-tabs:not([data-type])[data-mpde="vertical"] {
	/* --tab-width: 200px;
	--tab-height: 120px; */
	/* --tab-padding: 24px 16px; */
}

/* borderタイプ　共通設定　
---------------------------------------- */
.parts-tabs[data-type="border"] {
	/* --tab-count: 3;
	--tabs-notactive-color: #666666;
	--tabs-active-color: initial;
	--tab-font-size: 20px;
	--tab-line-height: 180%;
	--tab-padding: 0 0 16px 0;
	--tabs-noactive-border-color: transparent;
	--tabs-active-border-color: #7B868C;
	--content-padding: 20px 0 0 0;
	--content-background-color: #fff;

	--tablet-tab-font-size: 16px;
	--tablet-tab-line-height: 180%;
	--tablet-tab-padding: 0 0 8px 0;
	--tablet-content-padding: 32px 0 0 0;
	--tablet-scroll-width: calc(200px * var(--tab-count)); */
}

/*============================================================
 CSS変数 for parts-list　※サイトデザインに従い適宜設定
*============================================================*/
/* 共通設定　
---------------------------------------- */
.parts-list {
	--border-radius: 6px;
	--background-color: #F1EFE9;
	--padding: 24px 16px;
}

/* オプション設定　リンクリスト
---------------------------------------- */
.parts-list[data-type^="link"] {
	/* --li-border-bottom: solid 1px #d3d3d3;
	--text-decoration: underline; */
}
.parts-list[data-type="link-block"] {
	/* --li-padding: 16px;
	--hover-background-color: unset; */
}
.parts-list[data-type="link-inline"] {
	/* --li-padding-bottom: 16px;
	--li-margin-bottom: 16px; */
}

/* オプション設定　マークあり
---------------------------------------- */
/* 共通 */
.parts-list[data-type^="mark"] {
	--li-margin-bottom: 24px;
	--li-mark-width: 16px;
	--li-mark-margin-right: 8px;
	--li-mark-color: #7B868C;
}
/* ドット */
.parts-list[data-type="mark-dot"] {
	/* --dot-width: 8px;
	--dot-margin-top: 8px; */
}
/* アイコン共通 */
.parts-list[data-type^="mark-icon"] {
	--icon-width: 16px;
}
/* アイコン　ファイル */
.parts-list[data-type="mark-icon-file"] {
	--icon-image: url(../images/parts/icon-list-file.svg);
}

/* アイコン　サイト内リンク */
.parts-list[data-type="mark-icon-inner-link"] {
	--icon-image: url(../images/parts/icon-list-inner-link.svg);
}
/* アイコン　外部リンク */
.parts-list[data-type="mark-icon-ext-link"] {
	--icon-image: url(../images/parts/icon-list-ext-link.svg);
}
/* 連番 */
.parts-list[data-type="mark-num"] {
	/* --num-font-size: 16px;
	--num-line-height: 160%; */
}

/*============================================================
 CSS変数 for parts-table　※サイトデザインに従い適宜設定
*============================================================*/
/* 基本
---------------------------------------- */
dl.parts-table {
	/* --row-border-bottom: solid 1px #EFEFEF;
	--row-padding: 16px 0;
	--dt-width: 120px;
	--dt-margin-right: 8px;
	--font-size: 16px;
	--line-height: 180%; */
	--row-border-bottom: solid 1px #C4C4C4;
	--row-first-padding: 0 0 16px 0;
	--row-padding: 16px 0;
	--dt-width: 80px;
	--col-margin: 24px;
	--font-size: 16px;
	--line-height: 160%;

	--sp-font-size: 16px;
}

/*============================================================
 CSS変数 for parts-accordions　※サイトデザインに従い適宜設定
*============================================================*/
.parts-accordions {
    --icon-size: 56px;

	--border-bottom: unset;
    --border-radius: 20px;
    --margin-bottom: 24px;
    --border-radius: 20px;
    --box-shadow: 1px 1px 16px rgba(0, 0, 0, 0.1);

	--sw-padding: 24px;
    --sw-inner-padding: calc((var(--icon-size) - var(--sw-line-height)) / 2) 40px calc((var(--icon-size) - var(--sw-line-height)) / 2) calc((var(--icon-size)) + 16px);
    --sw-font-family: 'Noto Sans JP';
	--sw-font-size: 20px;
	--sw-line-height: 32px;
    --sw-color: #1591EB; 
    --sw-text-align: left;
	--sw-letter-spacing: unset;
	--sw-before-width: var(--icon-size);
	--sw-before-height: var(--icon-size);
	--sw-before-background-size: var(--icon-size) auto;
	--sw-after-width: 24px;
	--sw-after-height: var(--icon-size);
	--sw-after-background-size: 24px auto;
    --content-border-margin: 24px;
    --content-border-top: solid 2px #E7E7E7;
	--content-padding: 24px;
	--content-inner-padding: 0 0 calc((var(--icon-size) - var(--content-line-height)) / 2) calc((var(--icon-size)) + 16px);
	--content-inner-padding-single: calc((var(--icon-size) - var(--content-line-height)) / 2) 0 calc((var(--icon-size) - var(--content-line-height)) / 2) calc((var(--icon-size)) + 16px);
    --content-font-size: 16px;
	--content-line-height: 26px;
	--content-before-width: var(--icon-size);
	--content-before-height: var(--icon-size);
	--content-before-background-size: var(--icon-size) auto;

    --sp-icon-size: 32px;

	--sp-sw-font-size: 16px;
	--sp-sw-line-height: 26px;
	--sp-sw-padding: 16px;

    --sp-sw-inner-padding: calc((var(--sp-icon-size) - var(--sp-sw-line-height)) / 2) 40px calc((var(--sp-icon-size) - var(--sp-sw-line-height)) / 2) calc((var(--sp-icon-size)) + 16px);
    --sp-sw-before-width: var(--sp-icon-size);
	--sp-sw-before-height: var(--sp-icon-size);
	--sp-sw-before-background-size: var(--sp-icon-size) auto;
	--sp-sw-after-height: var(--sp-icon-size);

    --sp-content-font-size: 16px;
	--sp-content-line-height: 26px;
	--sp-content-padding: 16px;

    --sp-content-inner-padding: 0 0 calc((var(--sp-icon-size) - var(--sp-content-line-height)) / 2) calc((var(--sp-icon-size)) + 16px);
	--sp-content-inner-padding-single: calc((var(--sp-icon-size) - var(--sp-content-line-height)) / 2) 0 calc((var(--sp-icon-size) - var(--sp-content-line-height)) / 2) calc((var(--sp-icon-size)) + 16px);
	--sp-content-before-width: var(--sp-icon-size);
	--sp-content-before-height: var(--sp-icon-size);
	--sp-content-before-background-size: var(--sp-icon-size) auto;
}

/* .parts-accordions {
	--border-bottom: solid 2px #ccc;
	--border-radius: 0;
	--margin-bottom:  0;
	--sw-padding: 36px 84px 36px 96px;
	--sw-font-family: 'Noto Sans JP';
	--sw-font-size: 20px;
	--sw-line-height: 140%;
	--sw-color: inherit;
	--sw-text-align: left;
	--sw-before-width: 27px;
	--sw-before-height: 40px;
	--sw-before-background-size: 27px auto;
	--sw-after-width: 26px;
	--sw-after-height: 26px;
	--sw-after-background-size: 26px auto;
	--content-padding: 0 96px 56px 84px;
	--content-font-size: 16px;

	--sp-sw-padding: 32px 56px 32px 32px;
	--sp-sw-font-size: 18px;
	--sp-sw-before-left: 0;
	--sp-sw-before-top: 24px;
	--sp-sw-after-right: 16px;
	--sp-sw-after-top: 32px;
	--sp-content-padding: 0 32px 32px 32px;
	--sp-content-font-size: 16px;
} */

/*============================================================
 CSS変数 for pars-panels-h　※サイトデザインに従い適宜設定
*============================================================*/
/* 基本
---------------------------------------- */
.pars-panels-h {
	/* --panel-count: 2;

	--height: 600px;
	--animation-width: 1s;
	--animation-opacity: 1.5s;
	--animation-visibility: 1.5s;

	--sw-width: 128px;
	--sw-inner-padding: 10px 16px;

	--content-inner-padding: 24px 36px; */
}

/*============================================================
 CSS変数 for parts-img　※サイトデザインに従い適宜設定
*============================================================*/
/* 単独画像
---------------------------------------- */
.parts-img[data-type="block"] {
	/* --text-align: center;
	--margin: 16px 0 32px 0; */
}

/* 画像フィルター
---------------------------------------- */
/* 基本(明るさ) ※ホバー時 */
.parts-img[data-filter="filter01"] {
	/* --filter: unset;
	--hover-filter-transition: filter 0.3s;
	--hover-filter: brightness(110%) opacity(80%); */
}
/* ぼかし */
.parts-img[data-filter="filter02"][data-filter-adjust="blur"] {
	--filter: blur(5px);
	--hover-filter: var(--filter);
}
/* コントラスト */
.parts-img[data-filter="filter03"] {
	--filter: contrast(160%);
	--hover-filter: var(--filter);
}
/* グレースケール */
.parts-img[data-filter="filter04"] {
	--filter: grayscale(70%);
	--hover-filter: var(--filter);
}
/* 色相回転 */
.parts-img[data-filter="filter05"] {
	--filter: hue-rotate(180deg);
	--hover-filter: var(--filter);
}
/* 反転 */
.parts-img[data-filter="filter06"] {
	--filter: invert(100%);
	--hover-filter: var(--filter);
}
/* 透過度 */
.parts-img[data-filter="filter07"] {
	--filter: opacity(70%);
	--hover-filter: var(--filter);
}
/* 彩度 */
.parts-img[data-filter="filter08"] {
	--filter: saturate(40%);
	--hover-filter: var(--filter);
}
/* セピア */
.parts-img[data-filter="filter09"] {
	--filter: sepia(70%);
	--hover-filter: var(--filter);
}
/* ドロップシャドウ */
.parts-img[data-filter="filter10"] {
	--filter: drop-shadow(4px 4px 8px rgba(0, 0, 0, 0.6));
	--hover-filter: var(--filter);
}


/*============================================================
 CSS変数 for parts-text　※サイトデザインに従い適宜設定
*============================================================*/
/* 行数制限(省略文字「...」付)
---------------------------------------- */
/* 1行　※デフォルト */
.parts-text[data-type="clamp"] {
	/* --webkit-line-clamp: 2; */
	/* --sp-webkit-line-clamp: var(--webkit-line-clamp) */
}
/* 2行 */
.parts-text[data-type="clamp-1"] {
	--webkit-line-clamp: 1;
	--sp-webkit-line-clamp: 2;
}
/* 3行 */
.parts-text[data-type="clamp-3"] {
	--webkit-line-clamp: 3;
	--sp-webkit-line-clamp: 2;
}

/*============================================================
 CSS変数 for parts-modal　※サイトデザインに従い適宜設定
*============================================================*/
.parts-modal {
	/* --padding: 0;
	--background-color: transparent;
	--content-max-width: 100%;
	--content-background-color: #000000e6;
	--content-padding: 32px 24px;
	--close-top: 0;
	--close-right: 0;
	--close-size: 64px;
	--close-background-color: : transparent;
	--close-background-size: 20px auto;
	--close-border-radius: 0; 

	--sp-padding: 0;
	--sp-content-padding: 32px 24px; */
}