@charset "utf-8";
/* CSS Document */

/* プレビュでスクロールバー表示を防ぐ */
body{
    overflow-y: hidden;
}

.wrapper {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

/*　---- .fixed-grid01 2ブロック6表示　ここから ---- */
.fixed-grid01 .thirdBlock {
    display: none;
}

.fixed-grid01 .firstBlock,
.fixed-grid01 .secondBlock {
    width: 49vw;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}

.fixed-grid01 .big .imgWrapper{
    width: calc(49vw - 2px);
    height: calc(49vw - 2px);
}

.fixed-grid01 .big img {
    width: calc(49vw - 2px);
    height: calc(49vw - 2px);
    object-fit: cover;
    vertical-align: bottom;
}

.fixed-grid01 .small .imgWrapper{
    width: calc(23.5vw - 2px);
    height: calc(23.5vw - 2px);
}

.fixed-grid01 .small img {
    width: calc(23.5vw - 2px);
    height: calc(23.5vw - 2px);
    object-fit: cover;
    vertical-align: bottom;
}

/*間隔の調整*/
.fixed-grid01 .firstBlock {
    margin-right: 1vw;
}

.fixed-grid01 .secondBlock {
    margin-left: 1vw;
}

.fixed-grid01 .firstBlock li:first-child,
.fixed-grid01 .secondBlock li.small {
    margin-bottom: 2vw;
}

.fixed-grid01 li.small.mgr {
    margin-right: 2vw;
}


/* スマホ表示の処理 */

/* flex解除 */
.fixed-grid01#sp .wrapper {
    display: block;
}

.fixed-grid01#sp .firstBlock,
.fixed-grid01#sp .secondBlock {
    width: 100%;
}

/* .secondBlockの順番入れ替え */

.fixed-grid01#sp .secondBlock .big {
    order: -1;
}

/* 隙間の調整 */

.fixed-grid01#sp .firstBlock {
    margin-right: 0;
    margin-bottom: 2vw;
}

.fixed-grid01#sp .secondBlock {
    margin-left: 0;
    margin-right: 0;
    margin-bottom: 2vw;
}

.fixed-grid01#sp .secondBlock li.small {
    margin-top: 2vw;
    margin-bottom: 0;
}

.fixed-grid01#sp .big .imgWrapper,
.fixed-grid01#sp .big img {
    width: calc(100vw - 2px);
    height: calc(100vw - 2px);
}


.fixed-grid01#sp .small .imgWrapper,
.fixed-grid01#sp .small img {
    width: calc(49vw - 2px);
    height: calc(49vw - 2px);
}

/*　---- .fixed-grid01 2ブロック6表示　ここまで ---- */

/*　---- .fixed-grid02 3ブロック9表示　ここから ---- */

.fixed-grid02 .firstBlock,
.fixed-grid02 .secondBlock,
.fixed-grid02 .thirdBlock {
    width: 32vw;
    display: flex;
    flex-wrap: wrap;
}

.fixed-grid02 .big .imgWrapper {
    width: calc(32vw - 2px);
    height: calc(32vw - 2px);
}

.fixed-grid02 .big img {
    width: calc(32vw - 2px);
    height: calc(32vw - 2px);
    object-fit: cover;
    vertical-align: bottom;
}

.fixed-grid02 .small .imgWrapper {
    width: calc(15vw - 2px);
    height: calc(15vw - 2px);
}

.fixed-grid02 .small img {
    width: calc(15vw - 2px);
    height: calc(15vw - 2px);
    object-fit: cover;
    vertical-align: bottom;
}

/*間隔の調整*/
.fixed-grid02 .firstBlock {
    margin-right: 1vw;
}

.fixed-grid02 .secondBlock {
    margin-left: 1vw;
    margin-right: 1vw;
}

.fixed-grid02 .thirdBlock {
    margin-left: 1vw;
}

.fixed-grid02 .firstBlock li:first-child,
.fixed-grid02 .secondBlock li.small,
.fixed-grid02 .thirdBlock li:first-child {
    margin-bottom: 2vw;
}

.fixed-grid02 li.small.mgr {
    margin-right: 2vw;
}

/* スマホ表示の処理 */

/* flex解除 */
.fixed-grid02#sp .wrapper {
    display: block;
}

.fixed-grid02#sp .firstBlock,
.fixed-grid02#sp .secondBlock,
.fixed-grid02#sp .thirdBlock {
    width: 100%;
}

/* .secondBlockの順番入れ替え */

.fixed-grid02#sp .secondBlock .big {
    order: -1;
}

/* 隙間の調整 */

.fixed-grid02#sp .firstBlock {
    margin-right: 0;
    margin-bottom: 2vw;
}

.fixed-grid02#sp .secondBlock {
    margin-left: 0;
    margin-right: 0;
    margin-bottom: 2vw;
}

.fixed-grid02#sp .secondBlock li.small {
    margin-top: 2vw;
    margin-bottom: 0;
}

.fixed-grid02#sp .thirdBlock {
    margin-left: 0;
}

.fixed-grid02#sp .big .imgWrapper,
.fixed-grid02#sp .big img {
    width: calc(100vw - 2px);
    height: calc(100vw - 2px);
}

.fixed-grid02#sp .small .imgWrapper,
.fixed-grid02#sp .small img {
    width: calc(49vw - 2px);
    height: calc(49vw - 2px);
}


/*　---- .fixed-grid02 3ブロック9表示　ここまで ---- */