@charset "UTF-8";

:root {
    /* 1行の高さを定義（ここを基準にすべてが決まります） */
    --line-height-unit: calc(var(--font-size-Text-R) * 2);
    --line-color: #e0eaf1;
    /* 罫線の色 */
    --margin-line-color: #ffadb9;
    /* 左側の赤い線の色 */
}

body {
    margin: 0;
    padding: 0;
    /* 1. 全体に罫線を引く */
    background-image: linear-gradient(var(--line-color) 1px, transparent 1px);
    /* 横線は設定した1行の高さ、縦線は左から80pxの位置に配置 */
    background-size: 100% var(--line-height-unit), 100% 100%;
    background-position: 0 0, 80px 0;
    background-attachment: local;
    /* スクロールしても線がついてくるようにする */

    /* 2. 基本のフォント設定 */
    font-family: "Zen Kaku Gothic New", sans-serif;
    line-height: var(--line-height-unit);
    /* すべての要素の基本行高 */
    font-size: var(--font-size-Text-R);
}

/* すべての要素の余白を「1行の高さ」の倍数にする */
h2,
h3,
p,
section,
div {
    margin-top: 0;
    margin-bottom: var(--line-height-unit);
    /* 下方向の余白を必ず1行分空ける */
}

.p-q-and-a__header {
    margin-top: calc(var(--line-height-unit) * 4);
    margin-bottom: calc(var(--line-height-unit) * 2);
}

.p-q-and-a__title::before {
    content: "Q&A";
    font-size: var(--font-size-Heading-L);
    white-space: nowrap;
    font-family: "Rock Salt", cursive;
    font-weight: 400;
    font-style: normal;
    color: var(--color-NUMATA-Green);
    display: block;
    position: absolute;
    top: -1.5em;
    left: -2em;
    rotate: -16deg;
}

/* 画像が入る場合も、高さが「行の倍数」になるようにする */
img {
    display: block;
    height: auto;
    /* 画像の下に隙間ができてズレるのを防ぐ（必要に応じて調整） */
}

/* メインコンテンツを左の縦線の右側に寄せる */
.l-inner {
    max-width: 1000px;
    margin: 0 auto;
}

.c-page-header__title {
    line-height: calc(var(--line-height-unit) * 2);
}

.c-page-header__sub-title {
    line-height: calc(var(--line-height-unit) * 2);
    margin-bottom: var(--line-height-unit);
}

.c-page-header__lead {
    line-height: var(--line-height-unit);
    margin-bottom: calc(var(--line-height-unit) * 2);
    /* 2行分使う */
}

.p-q-and-a__item {
    margin-bottom: calc(var(--line-height-unit) * 3);
}

.p-q-and-a__items .p-q-and-a__item:nth-child(even) {
    translate: 4svw 0;
}


.p-q-and-a__question-wrapper {
    display: flex;
    margin-bottom: calc(var(--line-height-unit) * .65);
}

.p-q-and-a__item:nth-child(odd) .p-q-and-a__question-wrapper {
    color: var(--color-NUMATA-Orange);
}

.p-q-and-a__item:nth-child(even) .p-q-and-a__question-wrapper {
    color: var(--color-NUMATA-Green);
}

.p-q-and-a__item .c-q-and-a-item__q-label {
    display: block;
    white-space: nowrap;
    font-family: "Rock Salt", cursive;
    font-weight: 400;
    font-style: normal;
    font-size: var(--font-size-Text-S);
    color: var(--color-White);
    text-align: center;
    margin-right: 2em;
}

.c-q-and-a-item__q-label::before {
    content: "";
    display: inline-block;
    position: absolute;
    z-index: -10;
    width: 5em;
    height: 5em;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: 50% 50%;
    transform: translate(-20%, -35%);
}

.p-q-and-a__item:nth-child(odd) .c-q-and-a-item__q-label::before {
    background-image: url(../../images/about/bg-book-orange.svg);
}

.p-q-and-a__item:nth-child(even) .c-q-and-a-item__q-label::before {
    background-image: url(../../images/about/bg-book-green.svg);
}

.p-q-and-a__question {
    display: block;
}

.p-q-and-a__answer {
    line-height: calc(var(--line-height-unit) * 1);
    margin-left: 4em;
    max-width: 50em;
}