@charset "UTF-8";

/* ページタイトル */

.h2-1 {
    font-family: 'KurobaraGothic', serif;
    /* 黒薔薇フォントを使用 */
    text-shadow:
        3px 3px 10px #ceb3b3,
        -3px 3px 10px #ceb3b3,
        -3px -3px 10px #ceb3b3,
        3px -3px 10px #ceb3b3;
    text-align: center;
    color: #a61919;
    display: flex;
    justify-content: center;
    align-items: center;
    min-width: 80%;
    max-width: 100%;
    /* 文字を重ねるためrelative*/
    position: relative;
    display: flex;
}

.h2-1 .h2-between {
    align-items: center;
    background-image: url("/assets/images/h2_mid.png");
    background-repeat: repeat-x;
    background-size: calc(var(--font-size-xl)*4) calc(var(--font-size-xl)*4);
    background-position: center;
    padding: 0;
    height: calc(var(--font-size-xl)*4);
    flex-grow: 1;
    line-height: calc(var(--font-size-xl)*2);
}

.h2-1 .h2-title1,
.h2-1 .h2-title2 {
    width: 100%;
    position: absolute;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
}

.h2-1 .h2-title1 {
    font-size: var(--font-size-xl);
    top: 30%;
}

.h2-1 .h2-title2 {
    font-size: var(--font-size-s);
    top: 70%;
}

.h2-icon1,
.h2-icon2 {
    display: block;
    position: relative;
    width: calc(var(--font-size-xl)*4);
    height: calc(var(--font-size-xl)*4);
    background-size: calc(var(--font-size-xl)*4) calc(var(--font-size-xl)*4);
    background-repeat: no-repeat;
}

.h2-icon1 {
    background-image: url("/assets/images/h2_1.png");
    background-position: right center;
}

.h2-icon2 {
    background-image: url("/assets/images/h2_2.png");
    background-position: left center;
}

/*リンクの矢印*/
.link-arrow {
    display: inline-block;
    vertical-align: -0.1em;
    width: 1em;
    height: 1em;
    background-size: contain;
    /* 背景画像のサイズを要素に合わせる */
    background-repeat: no-repeat;
    /* 背景画像を繰り返さない */
    background-image: url("/assets/images/link_arrow.png");
}