@charset "UTF-8";

/* ========================================
   共通
======================================== */

#andcouture_lp .wrap {
    width: 100%;
    height: auto;
}

#andcouture_lp .content {
    width: 100%;
    height: auto;
    position: relative;
    top: auto;
    background-color: #DCD5C9;
    flex: 1;
}

/* 通常画像 */
#andcouture_lp .DOWNCOAT {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    margin: 0;
    padding: 0;
}


/* ========================================
   フェードイン
======================================== */

.layout {
    display: flex;
}

.fadein {
    opacity: 0;
    animation: fadeIn 1s ease-in forwards;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* 4枚の画像を2列×2段にする */
.down-menu-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  width: 90%;
  margin: 0 auto;
}

/* 画像リンク */
.down-menu-grid .down-menu-item {
  display: block;
  min-width: 0;
}

/* 画像サイズ */
.down-menu-grid .down-menu-item img {
  display: block;
  width: 100%;
  height: auto;
}

/* ページ内リンクを滑らかにスクロール */
html {
  scroll-behavior: smooth;
}

/* ジャンプ先の位置調整 */
#down01,
#down02,
#down03,
#down04 {
  scroll-margin-top: 80px;
}

/* 右上の画像だけサイズ変更 */
.down-menu-grid .down-menu-item img.down-menu-right-size {
  width: 96% !important;
  max-width: none;
  height: auto;
  margin: 0 auto;
}

/* ========================================
   PC
======================================== */

@media screen and (min-width: 650px) {

    #andcouture_lp .wrap {
        max-width: 500px;
        width: 100%;
        margin: 0 auto;
    }

    #andcouture_lp .content {
        width: 500px;
        position: relative;
        top: auto;
        height: auto;
    }

    #andcouture_lp .DOWNCOAT {
        width: 100%;
        max-width: 500px;
        height: auto;

        margin: 0;
        padding: 0;

        display: block;
    }

    /* ページ内リンクを滑らかにスクロール */
    html {
    scroll-behavior: smooth;
    }

    /* ジャンプ先の位置調整 */
    #down01,
    #down02,
    #down03,
    #down04 {
    scroll-margin-top: 80px;
    }

    /* 4枚の画像を2列×2段にする */
    .down-menu-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
    width: 90%;
    margin: 0 auto;
    }

    /* 画像リンク */
    .down-menu-grid .down-menu-item {
    display: block;
    min-width: 0;
    }

    /* 画像サイズ */
    .down-menu-grid .down-menu-item img {
    display: block;
    width: 100%;
    height: auto;
    }

    /* 右上の画像だけサイズ変更 */
    .down-menu-grid .down-menu-item img.down-menu-right-size {
    width: 96% !important;
    max-width: none;
    height: auto;
    margin: 0 auto;
    }


}