@charset "utf-8";

/* headding */
#headding .headding_text {
    font-weight: bold;
}

/* flow */
#flow .flow_text {
    margin-bottom: calc(28 * 100vw / 750);
}
#flow .flow_images {
    display: block;
    width: min(100%, 500px);
    margin: 0 auto;
}
/* point */
#point .point_list {
    display: flex;
    flex-direction: column;
    gap: calc(24 * 100vw / 750);
}
#point .point_item {
    display: grid;
    grid-template-columns: 35.2% 1fr;
    border: calc(8 * 100vw / 750) solid #d3c196;
    gap: calc(16 * 100vw / 750);
}
#point .point_inner {
    padding-right: calc(16 * 100vw / 750);
    display: flex;
    flex-direction: column;
    justify-content: center;
}
#point .point_title {
    margin-bottom: calc(16 * 100vw / 750);
    font-size: calc(32 * 100vw / 750);
    font-weight: bold;
    color: #ab9892;
}
#point .point_text {
    font-size: calc(26 * 100vw / 750);
}
#main #point .link {
    margin-top: calc(12 * 100vw / 750);
    font-size: calc(24 * 100vw / 750);
}

/* campaign */
#campaign .campaign_list {
    display: flex;
    flex-direction: column;
    gap: calc(24 * 100vw / 750);
    margin-bottom: calc(28 * 100vw / 750);
}
#campaign .campaign_item {
    padding: calc(16 * 100vw / 750);
    display: grid;
    grid-template-columns: 23% 1fr;
    align-items: center;
    gap: calc(16 * 100vw / 750);
    border: calc(8 * 100vw / 750) solid #74c6c3;
    border-radius: calc(12 * 100vw / 750);
}
#campaign .campaign_inner {
    display: flex;
    flex-direction: column;
    justify-content: center;
}
#campaign .campaign_title {
    display: flex;
    flex-direction: column;
    gap: calc(24 * 100vw / 750);
    font-size: calc(32 * 100vw / 750);
    font-weight: bold;
    color: #74c6c3;
}
#campaign .campaign_text {
    font-size: calc(26 * 100vw / 750);
}
#main #campaign .link {
    margin-top: calc(12 * 100vw / 750);
    font-size: calc(24 * 100vw / 750);
}

/* design */
#design .design_list {
    display: flex;
    flex-direction: column;
    gap: calc(40 * 100vw / 750);
}

/* howto */
#howto .howto_list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: calc(32 * 100vw / 750);
}
#howto .howto_item {
    border: calc(5 * 100vw / 750) solid #d3c196;
    border-radius: calc(8 * 100vw / 750);
    box-sizing: border-box;
    padding: calc(16 * 100vw / 750);
    text-align: center;
}
#howto .howto_item:last-child {
    grid-column: 1/3;
}
#howto .howto_title {
    font-size: calc(28 * 100vw / 750);
    font-weight: bold;
    border-bottom: calc(4 * 100vw / 750) solid #d3c196;
    margin-bottom: calc(20 * 100vw / 750);
    padding-bottom: calc(8 * 100vw / 750);
}
#howto .howto_text {
    font-size: calc(28 * 100vw / 750);
    letter-spacing: -.02em;
}
#howto .howto_text span {
    font-size: calc(24 * 100vw / 750);
}


@media screen and (min-width: 920px) {
/* flow */
#flow .flow_text {
    margin-bottom: 24px;
}
/* point */
#point .point_list {
    gap: 20px;
}
#point .point_item {
    border: 4px solid #d3c196;
    gap: 16px;
}
#point .point_inner {
    padding-right: 16px;
}
#point .point_title {
    margin-bottom: 12px;
    font-size: 24px;
}
#point .point_text {
    font-size: 15px;
}
#main #point .link {
    margin-top: 8px;
    font-size: 16px;
}

/* campaign */
#campaign .campaign_list {
    gap: 20px;
    margin-bottom: 22px;
}
#campaign .campaign_item {
    font-size: 24px;

    padding: 12px;
    gap: 16px;
    border: 4px solid #74c6c3;
    border-radius: 8px;
}
#campaign .campaign_title {
    gap: 20px;
    font-size: 24px;
}
#campaign .campaign_text {
    font-size: 15px;
}
#main #campaign .link {
    margin-top: 9.6px;
    font-size: 16px;
}

/* design */
#design .design_list {
    gap: 24px;
}

/* howto */
#howto .howto_list {
    gap: 25.6px;
}
#howto .howto_item {
    border: 4px solid #d3c196;
    border-radius: 6px;
    padding: 12px;
}
#howto .howto_title {
    font-size: 22.4px;
    border-bottom: 3.2px solid #d3c196;
    margin-bottom: 16px;
    padding-bottom: 6px;
}
#howto .howto_text {
    font-size: 22px;
}
#howto .howto_text span {
    font-size: 16px;
}
}