@charset "UTF-8";

/*＝＝画面の大きさ＝＝*/
/* SP       ～519px
   tab 520px～959px
   PC  960px～      */

/* ＝＝【flower】＝＝ */

.flower {
    margin-bottom: var(--section-gutter);
}

/* ↓ 花画像のうち、最後以外は余白を取る */
.flower .lineup:not(:last-child) {
    padding-bottom: var(--contents-gutter);
}

.flower .lineup .lineup_inner {
    padding: 0 var(--side-gutter);
}

.flower .lineup .lineup_inner p {
    margin-bottom: var(--contents-gutter);
}

.flower .lineup .lineup_img {
    margin-bottom: var(--contents-gutter);
    display: block;
}

/* ↓ topページからflowerページへのリンク位置のズレ修正
　　　ヘッダーをposition:fixedにしているのが原因
　　　.slideboxのmargin-top:100pxと同じ値で調整 */
.flower #season,
.flower #arrangement,
.flower #preserved,
.flower #soap {
    padding-top: 100px;
    margin-top: -100px;
}

/* ＝＝【flower】＝＝PC版 */

@media screen and (min-width:960px) {
    .flower {
        margin-bottom: var(--section-gutter-pc);
    }

    /* ↓ 花画像のうち、最後以外は余白を取る */
    .flower .lineup:not(:last-child) {
        padding-bottom: var(--contents-gutter-pc);
    }

    /* ↓ PC画面では横2列表示にする */
    .flower .lineup .lineup_inner {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(2, 1fr);
        align-items: center;
        column-gap: calc(var(--gutter-base)*10);
    }

    .flower .lineup .caption_title {
        align-self: self-end;
    }

    .flower .lineup p {
        padding: 0 calc(var(--gutter-base)*3) 0;
    }

    /* ↓ PC画面では花画像は左側2マス分の場所に表示 */
    .flower .lineup .lineup_img {
        grid-column: 1/2;
        grid-row: 1/3;
        margin-bottom: 0;
    }
}