/* chapter section --------------------------------------------------------*/

/* @group @variables */

/* 白背景・白背景+区切り線・黒背景の時にはクラスを変更（ラジオボタン）
背景色と文字色と区切り線色を変更したらクラスを追加してCSSに書き込む（CSS Variable） */
[class*="o-chapter"] {
--chapter-grid-template-columns: repeat(1, 1fr);
--chapter-gap: 3rem;
--chapter-x-padding-bottom: var(--chapter-spacing-bottom);
/*--chapter-background-color: inherit;*//* CSSに書き込む */
/*--chapter-text-color: inherit;*//* CSSに書き込む */
/*---chapter-separater-color: ;*//* CSSに書き込む */
}

/* @end @variables */

/* @group @variables */

[class*="o-chapter-proto"] {
--chapter-x-padding-top: var(--chapter-spacing-top);
}

/* @end @variables */

/* @group @variables */

[class*="o-chapter-primero"] {
--chapter-x-padding-bottom: 0;
}

/* @end @variables */

/* @group @variables */

[class*="o-chapter-primo"] {
--chapter-x-padding-top: var(--chapter-spacing-top);
--chapter-x-padding-bottom: 0;
}

/* @end @variables */

/* @chapter --------------------------------------------------------*/

/* @group @variables */

[class*="o-chapter-separator-primary"] {
--chapter-separater-width: inset 0 -1px 0;
--chapter-separater-color: var(--color-gainsboro);
}

/* @end @variables */

/* @group @variables */

[class*="o-chapter-separator-proto"] {
--chapter-separater-width: inset 0 -1px 0;
--chapter-separater-color: var(--color-white);
}

/* @end @variables */

/* @chapter --------------------------------------------------------*/

/* @group @variables */

/* グラデーションサンプル。クラスを作る */
[class*="o-chapter-premier"] {
/*--chapter-background-color: inherit;*//* CSSに書き込む */
--chapter-background-image: linear-gradient(19deg, #a8fadd 0%, #d6edf3 100%);
}

/* @end @variables */

/* @chapter --------------------------------------------------------*/

/* @group @variables */

/* 白背景 */
[class*="o-chapter"],
[class*="o-chapter-theme-primary"],
[class*="o-chapter-theme-secondary"] {
--chapter-background-color: var(--color-white);
--chapter-text-color: var(--color-text);

--headline-separater-color: var(--color-dimgray);
--heading-2-color: var(--color-black);
--heading-3-color: var(--color-black);
--chapter-heading-3-color: var(--color-dimgray);

--section-header-border-image-color: var(--color-brand);
--section-header-border-color: var(--color-very-light-gray);
--sezione-link-background-color: var(--color-white);
--sezione-link-color: var(--color-text);
}

/* @end @variables */

/* @group @variables */

/* 白背景 / 黒ボタン */
[class*="o-chapter"],
[class*="o-chapter-theme-primary"] {
--btn-background-color: var(--color-very-dark-gray);
--btn-action-background-color: var(--color-white);
--btn-active-background-color: var(--color-white-active);
--btn-disabled-background-color: var(--color-white-disabled);

--btn-border-color: var(--color-very-dark-gray);
--btn-border-action-color: var(--color-very-dark-gray);
--btn-border-active-color: var(--color-very-dark-gray-active);
--btn-border-active-color: var(--color-very-dark-gray-disabled);

--btn-text-color: var(--color-white);
--btn-action-text-color: var(--color-very-dark-gray);
--btn-active-text-color: var(--color-very-dark-gray-active);
--btn-disabled-text-color: var(---color-very-dark-gray-disabled);
}

/* @end @variables */

/* @group @variables */

/* 白背景 / 黒枠ボタン */
[class*="o-chapter-theme-secondary"] {
--btn-background-color: var(--color-white);
--btn-action-background-color: var(--color-very-dark-gray);
--btn-active-background-color: var(--color-very-dark-gray-active);
--btn-disabled-background-color: var(--color-very-dark-gray-disabled);

--btn-border-color: var(--color-very-dark-gray);
--btn-border-action-color: var(--color-white);
--btn-border-active-color: var(--color-white-active);
--btn-border-active-color: var(--color-white-disabled);

--btn-text-color: var(--color-very-dark-gray);
--btn-action-text-color: var(--color-white);
--btn-active-text-color: var(--color-white-active);
--btn-disabled-text-color: var(--color-white-disabled);
}

/* @end @variables */

/* @chapter --------------------------------------------------------*/

/* @group @variables */

/* 白背景 */
[class*="o-chapter-theme-premier"],
[class*="o-chapter-theme-deuxieme"] {
--chapter-background-color: var(--color-white);
--chapter-text-color: var(--color-text);

--headline-separater-color: var(--color-dimgray);
--heading-2-color: var(--color-black);
--heading-3-color: var(--chapter-heading-3-color);
--chapter-heading-3-color: var(--color-dimgray);

--section-header-border-image-color: var(--color-brand);
--section-header-border-color: var(--color-very-light-gray);
--sezione-link-background-color: var(--color-white);
--sezione-link-color: var(--color-text);
}

/* @end @variables */

/* @group @variables */

/* 白背景 / ブランド色ボタン */
[class*="o-chapter-theme-premier"] {
--btn-background-color: var(--color-brand);
--btn-action-background-color: var(--color-white);
--btn-active-background-color: var(--color-white-active);
--btn-disabled-background-color: var(--color-white-disabled);

--btn-border-color: var(--color-brand);
--btn-border-action-color: var(--color-brand);
--btn-border-active-color: var(--color-brand-active);
--btn-border-active-color: var(--color-brand-disabled);

--btn-text-color: var(--color-white);
--btn-action-text-color: var(--color-brand-text);
--btn-active-text-color: var(--color-brand-active);
--btn-disabled-text-color: var(---color-brand-disabled);
}

/* @end @variables */

/* @group @variables */

/* 白背景 / ブランド色枠ボタン */
[class*="o-chapter-theme-deuxieme"] {
--btn-background-color: var(--color-white);
--btn-action-background-color: var(--color-brand);
--btn-active-background-color: var(--color-brand-active);
--btn-disabled-background-color: var(--color-brand-disabled);

--btn-border-color: var(--color-brand);
--btn-border-action-color: var(--color-white);
--btn-border-active-color: var(--color-white-active);
--btn-border-active-color: var(--color-white-disabled);

--btn-text-color: var(--color-brand-text);
--btn-action-text-color: var(--color-white);
--btn-active-text-color: var(--color-white-active);
--btn-disabled-text-color: var(--color-white-disabled);
}

/* @end @variables */

/* @chapter --------------------------------------------------------*/

/* @group @variables */

/* 黒背景 */
[class*="o-chapter-theme-proto"],
[class*="o-chapter-theme-deutero"] {
--chapter-background-color: var(--color-very-dark-gray);
--chapter-text-color: var(--color-white);

--headline-separater-color: currentColor;
--heading-2-color: inherit;
--heading-3-color: inherit;
--chapter-heading-3-color: inherit;

--section-header-border-image-color: var(--color-brand);
--sezione-link-background-color: var(--color-dimgray);
--sezione-link-color: var(--color-white);
}

/* @end @variables */

/* @group @variables */

/* 黒背景 / 白ボタン */
[class*="o-chapter-theme-proto"] {
--btn-background-color: var(--color-white);
--btn-action-background-color: transparent;
--btn-active-background-color: transparent;
--btn-disabled-background-color: var(--color-white-disabled);

--btn-border-color: transparent;
--btn-border-action-color: var(--color-white);
--btn-border-active-color: var(--color-white-active);
--btn-border-active-color: transparent;

--btn-text-color: var(--color-very-dark-gray);
--btn-action-text-color: var(--color-white);
--btn-active-text-color: var(--color-white);
--btn-disabled-text-color: var(--color-very-dark-gray-disabled);
}

/* @end @variables */

/* @group @variables */

/* 黒背景 / 白枠ボタン */
[class*="o-chapter-theme-deutero"] {
--btn-background-color: transparent;
--btn-action-background-color: var(--color-white);
--btn-active-background-color: var(--color-white-active);
--btn-disabled-background-color: var(--color-white-disabled);

--btn-border-color: var(--color-white);
--btn-border-action-color: transparent;
--btn-border-active-color: transparent;
--btn-border-active-color: var(--color-white-disabled);

--btn-text-color: var(--color-white);
--btn-action-text-color: var(--color-very-dark-gray);
--btn-active-text-color: var(--color-very-dark-gray-active);
--btn-disabled-text-color: var(--color-very-dark-gray-disabled);
}

/* @end @variables */

/* @chapter --------------------------------------------------------*/

/* @group @variables */

/* ブランド色背景 */
[class*="o-chapter-theme-primero"],
[class*="o-chapter-theme-segundo"] {
--chapter-background-color: var(--color-brand);
--chapter-text-color: var(--color-white);

--headline-separater-color: currentColor;
--heading-2-color: inherit;
--heading-3-color: inherit;
--chapter-heading-3-color: inherit;

--section-header-border-image-color: var(--color-white);
--sezione-link-background-color: var(--color-dimgray);
--sezione-link-color: var(--color-white);
}

/* @end @variables */

/* @group @variables */

/* ブランド色背景 / 白ボタン */
[class*="o-chapter-theme-primero"] {

--btn-background-color: var(--color-white);
--btn-action-background-color: transparent;
--btn-active-background-color: transparent;
--btn-disabled-background-color: var(--color-white-disabled);

--btn-border-color: transparent;
--btn-border-action-color: var(--color-white);
--btn-border-active-color: var(--color-white-active);
--btn-border-active-color: transparent;

--btn-text-color: var(--color-brand-text);
--btn-action-text-color: var(--color-white);
--btn-active-text-color: var(--color-white);
--btn-disabled-text-color: var(--color-brand-disabled);
}

/* @end @variables */

/* @group @variables */

/* ブランド色背景 / 白枠ボタン */
[class*="o-chapter-theme-segundo"] {
--btn-background-color: transparent;
--btn-action-background-color: var(--color-white);
--btn-active-background-color: var(--color-white-active);
--btn-disabled-background-color: var(--color-white-disabled);

--btn-border-color: var(--color-white);
--btn-border-action-color: transparent;
--btn-border-active-color: transparent;
--btn-border-active-color: var(--color-white-disabled);

--btn-text-color: var(--color-white);
--btn-action-text-color: var(--color-brand);
--btn-active-text-color: var(--color-brand-active);
--btn-disabled-text-color: var(--color-very-dark-gray-disabled);
}

/* @end @variables */

/* @chapter --------------------------------------------------------*/

/* @group @o-chapter */

[class*="o-chapter"] {
position: relative;
overflow: hidden;
z-index: 3;
display: grid;
align-content: var(--chapter-grid-align-content);
grid-template-columns: var(--chapter-grid-template-columns);
/*grid-template-rows: var(--chapter-grid-template-rows);*/
gap: var(--chapter-gap);
min-height: var(--chapter-min-height);
padding-top: var(--chapter-x-padding-top);
padding-bottom: var(--chapter-x-padding-bottom);
box-shadow: var(--chapter-separater-width) var(--chapter-separater-color);
background-color: var(--chapter-background-color);
background-image: var(--chapter-background-image);
background-repeat: var(--chapter-background-repeat);
background-size: var(--chapter-background-size);
background-position: var(--chapter-background-position);
color: var(--chapter-text-color);
}

/* @end @o-chapter */

/* layout section with media --------------------------------------------------------*/

/* @group @variables */

/* 画像の位置変更でクラス変更 */
[class*="a-chapter-media"] {
--object-fit: cover;
--object-position: var(--object-position-novenary);
}

[class*="a-chapter-media-primary"] img {
--object-position: var(--object-position-primary);
}

[class*="a-chapter-media-secondary"] img {
--object-position: var(--object-position-secondary);
}

[class*="a-chapter-media-tertiary"] img {
--object-position: var(--object-position-tertiary);
}

[class*="a-chapter-media-quaternary"] img {
--object-position: var(--object-position-quaternary);
}

[class*="a-chapter-media-quinary"] img {
--object-position: var(--object-position-quinary);
}

[class*="a-chapter-media-senary"] img {
--object-position: var(--object-position-senary);
}

[class*="a-chapter-media-septenary"] img {
--object-position: var(--object-position-septenary);
}

[class*="a-chapter-media-octonary"] img {
--object-position: var(--object-position-octonary);
}

[class*="a-chapter-media-novenary"] img {
--object-position: var(--object-position-novenary);
}

[class*="a-chapter-overlay-primary"]:before {
--chapter-overlay: hsla(0, 0%, 100%, .75);/* CSSに書き込む */
}

[class*="a-chapter-overlay-secondary"]:before {
--chapter-overlay: hsla(0, 0%, 0%, .75);/* CSSに書き込む */
}

/* [class*="a-chapter-overlay-primary"]:before {
--chapter-overlay: ;
} *//* CSSに書き込む */

/* @end @variables */

/* @group @o-chapter */

[class*="a-chapter-media"] {
position: absolute;
overflow: hidden;
top: 0;
right: ;
bottom: 0;
left: 0;
}

[class*="a-chapter-media"] {
z-index: -3;
}

[class*="a-chapter-media"],
[class*="a-chapter-media"] img {
width: 100%;
height: 100%;
object-fit: var(--object-fit);
object-position: var(--object-position);
}

[class*="a-chapter-media"] img {
position: relative;
z-index: -1;
}

[class*="a-chapter-overlay"]:before {
content: '';
position: absolute;
overflow: hidden;
z-index: 2;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: var(--chapter-overlay);
}

/* @end @o-chapter */

/* @chapter-padding --------------------------------------------------------*/

/* chapter-header / chapter-intro / chapter-body / chapter-footer それぞれに指定 */

/* @group @variables */

/* 横幅選択（ラジオボタンでクラス変更） */
[class*="m-chapter-padding"] {
--chapter-padding-right: var(--body-x-padding-right);
--chapter-padding-left: var(--body-x-padding-left);
}

[class*="m-chapter-padding-secondary"] {
--chapter-padding-right: var(--body-x-padding-secondary-right);
--chapter-padding-left: var(--body-x-padding-secondary-left);
}

[class*="m-chapter-padding-tertiary"] {
--chapter-padding-right: var(--body-x-padding-tertiary-right);
--chapter-padding-left: var(--body-x-padding-tertiary-left);
}

[class*="m-chapter-padding-quaternary"] {
--chapter-padding-right: var(--body-x-padding-quaternary-right);
--chapter-padding-left: var(--body-x-padding-quaternary-left);
}

[class*="m-chapter-padding-proto"] {
--chapter-display: table;
--chapter-width: fit-content;
--chapter-push: auto;
--chapter-padding-right: var(--body-x-padding-right);
--chapter-padding-left: var(--body-x-padding-left);
}

[class*="m-chapter-padding-primero"] {
--chapter-padding-right: var(--body-x-padding-primero-right);
--chapter-padding-left: var(--body-x-padding-primero-left);
}

[class*="m-chapter-padding-segundo"] {
--chapter-padding-right: var(--body-x-padding-segundo-right);
--chapter-padding-left: var(--body-x-padding-segundo-left);
}

/* @end @variables */

/* @group @m-chapter-padding */

[class*="m-chapter-padding"] {
display: var(--chapter-display);
width: var(--chapter-width);
margin-right: var(--chapter-push);
margin-left: var(--chapter-push);
padding-right: var(--chapter-padding-right);
padding-left: var(--chapter-padding-left);
}

/* @end @m-chapter-padding */



/* @chapter-intro --------------------------------------------------------*/

/* @group @variables */

/* WysiWygエディタ
<p><ul><ol><strong><em><a>だけ利用 */
[class*="m-chapter-intro"] {
--text-block-margin-bottom: 0;
--chapter-intro-gap: .75rem;
}

[class*="m-chapter-intro-primary"] {
--chapter-word-break: keep-all;
}

[class*="m-chapter-intro-secondary"] {
--chapter-intro-text-position: center;
--chapter-word-break: keep-all;
}

[class*="m-chapter-intro-deutero"] {
--chapter-intro-text-position: var(--text-align-deutero);
--chapter-word-break: keep-all;
--content-block-gap-primary:1.5rem;
}

/* @end @variables */

/* @group @m-chapter-intro */

[class*="m-chapter-intro"] {
display: grid;
align-content: start;
grid-template-columns: repeat(1, 1fr);
gap: var(--chapter-intro-gap);
text-align: var(--chapter-intro-text-position);
word-break: var(--chapter-word-brea);
}

/* @end @m-chapter-intro */

/* @chapter-nav --------------------------------------------------------*/

/* @group @variables */

/* **今回実装なし
カラム数（ラジオボタンでクラス変更・モバイルは1カラムまたは2カラム / タブレット以上は2〜5カラム）

ずっと2カラム [class*="m-chapter-nav-secondary"]
モバイル2カラム / タブレット3以上カラム [class*="m-chapter-nav-quatrieme"]
モバイル2カラム / タブレット4以上カラム [class*="m-chapter-nav-cinquieme"]
モバイル2カラム / タブレット5以上カラム [class*="m-chapter-nav-sixieme"]
タブレット以上2カラム [class*="m-chapter-nav-deutero"]
タブレット以上3カラム [class*="m-chapter-nav-trito"]
タブレット以上4カラム [class*="m-chapter-nav-tetarto"]
タブレット以上5カラム [class*="m-chapter-nav-pempto"]
 */
[class*="m-chapter-nav"] {
--chapter-nav-columns: repeat(1, 1fr);
/*--chapter-nav-rows: ;*/
--chapter-nav-gap: 1px;
--chapter-link-background-color: var();
--chapter-link-color: var();
--chapter-link-action-background-color: var();
--chapter-link-action-color: var();
--chapter-link-active-background-color: var();
--chapter-active-link-color: var();
}

[class*="m-chapter-nav-secondary"],
[class*="m-chapter-nav-quatrieme"],
[class*="m-chapter-nav-cinquieme"],
[class*="m-chapter-nav-sixieme"]  {
--chapter-nav-columns: repeat(2, 1fr);
}

@media all and (min-width: 48em) {

[class*="m-chapter-nav-deutero"] {
--chapter-nav-columns: repeat(2, 1fr);
}

[class*="m-chapter-nav-trito"],
[class*="m-chapter-nav-quatrieme"] {
--chapter-nav-columns: repeat(3, 1fr);
}

[class*="m-chapter-nav-tetarto"],
[class*="m-chapter-nav-cinquieme"] {
--chapter-nav-columns: repeat(4, 1fr);
}

[class*="m-chapter-nav-pempto"],
[class*="m-chapter-nav-sixieme"] {
--chapter-nav-columns: repeat(5, 1fr);
}

}

/* @end @variables */

/* @group @m-chapter-nav */

[class*="m-chapter-nav"] {
display: grid;
grid-template-columns: var(--chapter-nav-columns);
grid-template-rows: var(--chapter-nav-rows);
gap: var(--chapter-nav-gap);
}



[class*="m-chapter-nav"] li {
display: contents;
}

[class*="m-chapter-nav"] a {
display: grid;
justify-content: center;
align-items: center;
background-color: var(--chapter-link-background-color);
padding: var(--chapter-link-padding);
color: var(--chapter-link-color);
text-align: center;
}

[class*="m-chapter-nav"] a:hover,
[class*="m-chapter-nav"] a:focus {
background-color: var(--chapter-link-action-background-color);
color: var(--chapter-link-action-color);
}


[class*="m-chapter-nav"] a:active {
background-color: var(--chapter-link-active-background-color);
color: var(--chapter-active-link-color);
}
/* @end @m-chapter-nav */

/* @chapter-body --------------------------------------------------------*/

/* 間隔指定（ラジオボタンでクラス変更）
Gudenburgモジュールをドラッグ&ドロップできるようにする */

/* @group @variables */

[class*="m-chapter-body"] {
--chapter-body-gap: 3.75rem;
}

[class*="m-chapter-body-secondary"] {
--text-block-margin-bottom: 0;
--chapter-body-gap: .75rem;
}

[class*="m-chapter-body-tertiary"] {
--text-block-margin-bottom: 0;
--chapter-body-gap: 1.125rem;
}

[class*="m-chapter-body-quaternary"] {
--text-block-margin-bottom: 0;
--chapter-body-gap: 1.5rem;
}

[class*="m-chapter-body-senary"] {
--chapter-body-gap: 2.25rem;
}

[class*="m-chapter-body-octonary"] {
--chapter-body-gap: 3rem;
}

[class*="m-chapter-body-decenary"] {
--chapter-body-gap: 3.75rem;
}

/* @end @variables */

/* @group @m-chapter-body */

[class*="m-chapter-body"] {
display: grid;
align-self: start;
align-content: start;
grid-template-columns: repeat(1, 1fr);
gap: var(--chapter-body-gap);
}

/* @end @m-chapter-body */

/* @m-chapter-gallery --------------------------------------------------------*/

/* @group @variables */

[class*="m-chapter-gallery"] {
--chapter-padding-right: var(--body-x-padding-segundo-right);
--chapter-padding-left: var(--body-x-padding-segundo-left);
--grid-columns: repeat(2, 1fr);
--chapter-chapter-gallery-margin: 1.5rem auto 0;
--grid-gap: 2px;
}

@media all and (min-width:48em) {

[class*="m-chapter-gallery"] {
--grid-columns: repeat(4, 1fr);
}

}
/* @end @variables */

/* @group @m-chapter-padding */

[class*="m-chapter-gallery"] {
display: grid;
grid-template-columns: var(--grid-columns);
gap: var(--grid-gap);
margin: var(--chapter-chapter-gallery-margin);
padding-right: var(--chapter-padding-right);
padding-left: var(--chapter-padding-left);
}

/* @end @m-chapter-gallery */

/* content theme --------------------------------------------------------*/

/* @group @variables */

.m-contenido-theme-primary {
--contenido-padding: .75rem;
--chapter-background-color: var(--color-white);
}

.m-contenido-theme-proto {
--contenido-padding: .75rem;
--chapter-background-color: var(--color-whitesmoke-background-color);
}

/* @end @variables */

/* @group @m-contenido-theme */

[class*="m-contenido-theme"] {
padding: var(--contenido-padding);
background-color: var(--chapter-background-color);
}

/* @end @m-contenido-theme */

/* offscree --------------------------------------------------------*/

/* @group @variables */

.a-offscreen-primary {
--offscreen-position: absolute;
--offscreen-left: -999em;
}

.a-offscreen-proto {
--offscreen-position: fixed;
--offscreen-left: -999em;
}

@media all and (min-width:48em) {

.a-offscreen-tertiary {
--offscreen-position: absolute;
--offscreen-left: -999em;
}

}

@media all and (max-width:47.9375em) {

.a-offscreen-trito {
--offscreen-position: absolute;
--offscreen-left: -999em;
}

}

/* @end @variables */

/* @group @a-offscreen */

[class*="a-offscreen"] {
position: var(--offscreen-position);
left: var(--offscreen-left);
}

/* @end @a-offscreen */

/* hidden --------------------------------------------------------*/

/* @group @a-hidden */

[class*="a-hidden"] {
position: absolute;
z-index: -2;
width: 0;
height: 0;
visibility: hidden;
}

/* @end @a-hidden */

/* hide --------------------------------------------------------*/

/* @group @a-hide */

[class*="a-hide"] {
display: none;
}

/* @end @a-hide */