/* @group @variables */
/*
ラジオボタンでクラス切り替え
m-repeter-section-primary → 最初に画像が右寄せ
m-repeter-section-proto → 最初に画像が左寄せ
*/
[class*="m-repeter-section"] {
--repeter-section-gap: 3rem;
}
/* @end @variables */
/* @group @m-repeter-section */
[class*="m-repeter-section"] {
display: grid;
grid-template-columns: repeat(1, 1fr);
gap: var(--repeter-section-gap);
margin-bottom: 0;
}
/* @end @m-repeter-section */
/* --------------------------------------------------------*/
/* @group @variables */
/*
タブレット以上で画像が右か左かを選択（ラジオボタン）
（今回実装なし）右に画像がるときにテキストが右寄せ（ラジオボタン）
*/
[class*="m-section-theme"] {
--section-grid-columns: repeat(1, 1fr);
--section-body-grid-column: 1;
--section-media-grid-column: 1;
--section-gap: 2.25rem;
}
@media all and (min-width:48em) {
[class*="m-section-theme"] {
--section-grid-columns: repeat(2, 1fr);
--section-body-grid-column: 1;
--section-media-grid-column: 2;
}
[class*="m-repeter-section-primary"]>section:nth-of-type(2n),
[class*="m-repeter-section-proto"]>section:nth-of-type(2n+1) {
--section-direction: rtl;
--section-body-direction: ltr;
}
[class*="m-repeter-section-premier"]>section,
[class*="m-repeter-section-primo"]>section {
--section-grid-columns: 3fr 2fr;
}
[class*="m-repeter-section-premier"]>section:nth-of-type(2n+1),
[class*="m-repeter-section-primo"]>section:nth-of-type(2n) {
--section-direction: rtl;
--section-body-direction: ltr;
}
[class*="m-repeter-section-deuxieme"]>section,
[class*="m-repeter-section-secondo"]>section {
--section-grid-columns: 3fr 1fr;
}
[class*="m-repeter-section-deuxieme"]>section:nth-of-type(2n+1),
[class*="m-repeter-section-secondo"]>section:nth-of-type(2n) {
--section-direction: rtl;
--section-body-direction: ltr;
}
}
/* @end @variables */
/* @group @m-section-theme */
[class*="m-section-theme"] {
display: grid;
grid-template-columns: var(--section-grid-columns);
gap: var(--section-gap);
align-items: start;
direction: var(--section-direction);
}
[class*="m-section-body"] {
grid-column: var(--section-body-grid-column);
direction: var(--section-body-direction);
}
[class*="a-section-media"] {
grid-column: var(--section-media-grid-column);
align-self: var(--section-media-align-self);
order: var(--section-media-order);
}
/*
[class*="m-section-header"] {
--section-header-grid-column: var();
--section-header-grid-row: var();
}
[class*="m-section-contents"] {
--section-contents-grid-column: var();
--section-contents-grid-row: var();
}
*/
/* @end @m-section-theme */
/* @section-media --------------------------------------------------------*/
/* @group @variables */
/* 画像の位置変更でクラス変更 */
[class*="a-section-media"] {
--object-fit: cover;
--object-position: var(--object-position-novenary);
}
[class*="a-section-media-primary"] img {
--object-position: var(--object-position-primary);
}
[class*="a-section-media-secondary"] img {
--object-position: var(--object-position-secondary);
}
[class*="a-section-media-tertiary"] img {
--object-position: var(--object-position-tertiary);
}
[class*="a-section-media-quaternary"] img {
--object-position: var(--object-position-quaternary);
}
[class*="a-section-media-quinary"] img {
--object-position: var(--object-position-quinary);
}
[class*="a-section-media-senary"] img {
--object-position: var(--object-position-senary);
}
[class*="a-section-media-septenary"] img {
--object-position: var(--object-position-septenary);
}
[class*="a-section-media-octonary"] img {
--object-position: var(--object-position-octonary);
}
[class*="a-section-media-novenary"] img {
--object-position: var(--object-position-novenary);
}
/* @end @variables */
/* @group @a-section-media */
[class*="a-section-media"] {
position: relative;
overflow: hidden;
}
[class*="a-section-media"],
[class*="a-section-media"] img {
object-fit: var(--object-fit);
object-position: var(--object-position);
}
/* @end @a-section-media */
/* @section-body --------------------------------------------------------*/
/* @group @variables */
[class*="m-section-body"] {
--section-body-gap: 1.125rem;
--section-contents-gap: .75rem;
--text-block-margin-bottom: 0;
}
/* @end @variables */
/* @group @m-section-body */
[class*="m-section-body"] {
display: grid;
grid-template-columns: repeat(1, 1fr);
gap: var(--section-body-gap);
}
/* @end @m-section-body */
/* @sectioncontents --------------------------------------------------------*/
/* @group @variables */
[class*="m-section-contents"] {
--section-contents-gap: .75rem;
}
/* @end @variables */
/* @group @m-section-contents */
/* WysiWygエディタ */
[class*="m-section-contents"] {
display: grid;
grid-template-columns: repeat(1, 1fr);
gap: var(--section-contents-gap);
}
/* @end @m-section-contents */
/* @section-header --------------------------------------------------------*/
/* @group @variables */
/* テキストのみ・>em>
（今回実装なし）テーマ選択でクラス変更
*/
[class*="m-section-header"] {
--section-header-place-items: center start;
--section-header-padding-bottom: calc(1.125rem - var(--section-header-border-bottom-width));
--section-header-border-bottom-width: 2px;
--section-header-border-image-width: 7.5rem;
--heading-3-margin-bottom: 0;
--heading-3-font-size: 1.5rem;
--heading-3-line-height: 1.2;
--heading-3-font-weight: 300;
}
@media all and (max-width:47.9375em) {
[class*="m-section-header"] {
--heading-3-text-align: center;
}
}
@media all and (min-width:48em) {
}
/* @end @variables */
/* @group @variables */
[class*="o-chapter-theme-secondary"] [class*="m-section-header"] {
--section-header-border-color: var(--color-white);
--heading-3-color: var(--color-white);
--heading-3-color: var(--color-white);
}
/* @end @variables */
/* @group @m-section-header */
[class*="m-section-header"] {
box-sizing: border-box;
position: relative;
display: grid;
place-items: var(--section-header-place-items);
grid-template-columns: repeat(1, 1fr);
gap: var(--section-header-gap);
padding-bottom: var(--section-header-padding-bottom);
box-shadow: var(--section-header-separater);
border-style: solid;
border-width: 0 0 var(--section-header-border-bottom-width);
background: transparent;
border-image: linear-gradient(45deg, var(--section-header-border-image-color) 0%, var(--section-header-border-image-color) var(--section-header-border-image-width), transparent var(--section-header-border-image-width), transparent calc(var(--section-header-border-image-width) + 1px), var(--section-header-border-color)calc(var(--section-header-border-image-width) + 1px), var(--section-header-border-color)100%) 1;
}
/* @end @m-section-header */
/* @section-footer --------------------------------------------------------*/
/* @group @variables */
[class*="m-section-footer"] {
--section-footer-columns: repeat(1, 1fr);
--section-footer-gap: 1.5rem;
--section-footer-margin: 0 auto;
}
[class*="m-section-footer-proto"],
[class*="m-section-footer-deutero"] {
--section-footer-max-size: 15rem;
}
@media all and (min-width:48em) {
[class*="m-section-footer-proto"] {
--section-footer-max-size: 15rem;
--section-footer-margin: 0 auto 0 0;
}
[class*="m-section-footer-deutero"] {
--section-footer-max-size: 15rem;
--section-footer-margin: 0 auto 0 0;
}
}
/* @end @variables */
/* @group @m-chapter-footer */
[class*="m-section-footer"] {
display: grid;
justify-content: center;
grid-template-columns: var(--section-footer-columns);
gap: var(--section-footer-gap);
width: 100%;
max-width: var(--section-footer-max-size);
margin: var(--section-footer-margin);
}
/* @end @m-chapter-footer */