/* --------------------------------------------------------*/

/* @group @variables */

/* 
カラム数を指定する
[class*="m-repeat-grid-proto"] タブレット2カラム
[class*="m-repeat-grid-deutero"] タブレット2カラム / デスクトップ3カラム
[class*="m-repeat-grid-trito"] タブレット2カラム / デスクトップ4カラム
[class*="m-repeat-grid-primero"] タブレット3カラム
[class*="m-repeat-grid-segundo"] タブレット3カラム / デスクトップ4カラム
[class*="m-repeat-grid-premier"] タブレット4カラム

プラスボタンで個数が増減
画像サイズも全て同じ（クラスで変更）
 */

[class*="m-sektion-theme"] {
--text-block-margin-bottom: 0;
--section-grid-columns: .375rem 1fr .375rem;
--section-grid-rows: auto auto auto .75rem;
--section-align-self: start;
--section-gap: .75rem;
--section-body-grid-column: 2;
--section-body-grid-row: 3;
--section-header-grid-column: 2;
--section-header-grid-row: 2;
--section-media-grid-column: 1 / 5;
--section-media-grid-row: 1;
--section-border-radius: .75rem;
--section-background-color: var(--color-white);
--section-text-color: var(--color-text);
}

[class*="m-sektion-theme-primary"] {
--section-grid-rows: auto auto 1fr 0;
--section-align-self: stretch;
--section-footer-grid-column: 1 / 5;
--section-footer-grid-row: 4;
}


/* @end @variables */

/* @group @m-sektion-theme */

[class*="m-sektion-theme"] {
overflow: hidden;
display: grid;
grid-template-columns: var(--section-grid-columns);
grid-template-rows: var(--section-grid-rows);
gap: var(--section-gap);
/*align-self: var(--section-align-self);*/
border-radius: var(--section-border-radius);
background-color: var(--section-background-color);
color: var(--section-text-color);
}

[class*="m-sektion-body"] {
grid-column: var(--section-body-grid-column);
grid-row: var(--section-body-grid-row);
}

[class*="m-sektion-header"] {
grid-column: var(--section-header-grid-column);
grid-row: var(--section-header-grid-row);
}

[class*="m-sektion-footer"] {
grid-column: var(--section-footer-grid-column);
grid-row: var(--section-footer-grid-row);
}

[class*="a-sektion-media"] {
grid-column: var(--section-media-grid-column);
grid-row: var(--section-media-grid-row);
}

/* @end @m-sektion-theme */

/* @section-media --------------------------------------------------------*/

/* @group @variables */

/* 画像の位置変更でクラス変更（個別指定ではない） */
[class*="a-sektion-media"] {
--object-fit: cover;
--object-position: var(--object-position-novenary);
}

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

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

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

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

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

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

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

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

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

/* @end @variables */

/* @group @a-sektion-media */

[class*="a-sektion-media"] {
position: relative;
overflow: hidden;
margin-bottom: .375rem;
}

[class*="a-sektion-media"],
[class*="a-sektion-media"] img {
object-fit: var(--object-fit);
object-position: var(--object-position);
}

/* @end @a-sektion-media */

/* @section-header --------------------------------------------------------*/

/* @group @variables */

/* テキストのみ・<a><strng>>em>
（今回実装なし）テーマ選択でクラス変更
 */
[class*="m-sektion-header"] {
--heading-3-margin-bottom: 0;
--heading-3-font-size: 1.5rem;
--heading-3-line-height: 1.4;
--heading-3-font-weight: var(--text-font-weight-bold);
/*--heading-3-color: var(--color-black);*/
}

/* @end @variables */


/* @group @m-sektion-header */

[class*="m-sektion-header"] {
box-sizing: border-box;
position: relative;
}

/* @end @m-sektion-header */

/* @section-body --------------------------------------------------------*/

/* @group @variables */

[class*="m-sektion-body"] {
--section-body-gap: .75rem;
--text-block-font-size: .875rem;
--text-block-line-height: 1.714285714;
}

/* @end @variables */

/* @group @m-sektion-theme */

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

/* @end @m-sektion-theme */

/* @section-footer --------------------------------------------------------*/

/* @group @m-chapter-footer */

[class*="m-sektion-footer"] {
display: grid;
width: 100%;
margin-top: auto;
}

/* @end @m-chapter-footer */