@charset "utf-8";
/* CSS Document */
body::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: url("../special_follow_cp/images/page_bg.png") no-repeat center top / contain;
    z-index: -1;
}
.main-img {
    margin-top: -70px;
}

@media (max-width: 900px) {
.main-img {
margin-top: calc(-0px + (100vw - 900px) * 0.05);
}
}
.howto {
    display: flex;
    max-width: 1080px;
    margin: 10px auto 0px auto;
    border-radius: 5px;
    justify-content: space-between;
    align-items: center;
    background-color: rgba(255,205,223,0.2);
    gap: 15px;
    padding: 20px;
    align-items: stretch;
}
.howto__img {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 58%; /* 最初は40%、縮小しない */
    min-width: 400px; /* 最小幅を設定 */
}
.howto__tweet {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1 1 42%; /* 最初は60%、縮小可能 */
    min-width: 0; /* 縮められるように */
}
.howto .linkBtn {
    position: relative;
    z-index: 10;
}
.howto__tweet p {
    font-size: 26px;
    color: rgba(87,27,155,1.00);
    font-family: 'Cormorant Infant', serif;
    background: rgba(255,255,255,0.5);
    width: 100%;
    height: 400px;
    text-align: center;
    line-height: 400px;
}
.content-box {
    max-width: 1080px;
    margin: 0 auto;
}
.attention {
    display: flex;
    align-items: center;
    gap: 10px;
    text-align: left;
    margin-top: 10px;
}
.attention h3, .attention p {
    margin: 0;
    padding: 5px 10px;
}
.attention h3 {
    min-width: 100px;
    display: flex;
    align-items: center;
}
.attention p {
    font-size: 10px;
    display: flex;
    align-items: center;
}

@media (max-width: 900px) {
.howto {
    flex-direction: column; /* 縦並びにする */
    align-items: flex-start; /* 左揃え */
    width: auto;
    padding: 20px;
    gap: 0;
    flex-direction: column-reverse;
}
.howto__img {
    width: 100%;
    min-width: auto;
}
.howto__tweet {
    width: 100%;
    min-width: auto;
    margin-bottom: 20px;
}
.attention {
    flex-direction: column; /* 縦並びにする */
    align-items: flex-start; /* 左揃え */
    gap: 5px;
    padding-top: 10px;
}
.content-box {
    width: auto;
    margin: 0 auto;
}
.attention h3 {
    min-width: 100px;
}
.attention h3, .attention p {
    margin: 0;
    padding: 0px;
}
}