:root {
    --font-size-main-content-sp-title: calc(100vw * 14 / 375);
    --font-size-main-content-pc-title: calc(100vw * 32 / 1920);
    --main-content-left: calc(100vw * 60 / 375);
}

* {
    box-sizing: border-box;
    margin: 0;
}

body {
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;

    font-family: "dnp-shuei-mgothic-std", sans-serif;
    font-weight: 600;
    font-style: normal;
    font-size: 14px;
}

img {
    display: block;
    max-width: 100%;
}

/* Web Font */

.wf-loading {
    opacity: 0;
    overflow: hidden;
}

.wf-active {
    animation: fade 120ms;
    animation-fill-mode: forwards;
}

@keyframes fade {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* Content */

#content {
    display: flex;
    flex-direction: column;
}

/* Header */

header {
    width: 100%;
    background-position: center;
    background-size: cover;
}

section.flex_image {
    width: 100%;
    display: flex;
    flex-direction: column;
}

/* Products section */

section.products {
    position: relative;
}

section.products .item, section.products .item img {
    width: 100%;
}

@media only screen and (max-width: 800px) {
    section.products {
        margin-top: 24px;
    }

    section.products .content {
        position: absolute;
        top: calc(100vw * 148 / 375 - 24px);
        left: var(--main-content-left);
        font-size: var(--font-size-main-content-sp-title);
    }

    section.products h2 {
        font-size: var(--font-size-main-content-sp-title);
        margin-top: calc(100vw * 38 / 375 - 24px);
    }

    section.products .content .logo {
        margin-top: calc(100vw * 20 / 375);
        width: calc(100vw * 224 / 375);
    }

    section.products .images {
        display: flex;
        flex-direction: column;
        padding: 0 24px;
    }

    section.products .item .blank {
        display: block;
    }
}

@media only screen and (min-width: 800px) {
    section.products {
        margin-top: 64px;
    }

    section.products .content {
        position: absolute;
        top: calc(100vw * 40 / 1920);
        left: calc(100vw * 160 / 1920);
        font-size: calc(100vw * 32 / 1920);
    }

    section.products .content .logo {
        margin-top: calc(100vw * 72 / 1920);
        width: calc(100vw * 512 / 1920);
    }

    section.products h2 {
        font-size: var(--font-size-main-content-pc-title);
        margin-top: calc(100vw * 80 / 1920);
    }

    section.products .images {
        padding: 0 64px;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        align-content: center;
    }

    section.products .item {
        width: 50%;
        overflow: clip;
    }

    section.products .item img {
        transition: 200ms ease-out;
    }

    section.products .item img:hover {
        scale: 1.04;
    }

    section.products .item .blank {
        display: none;
    }
}
]

/* Designs section */

section.designs {
    position: relative;
}

section.designs .item, section.designs .item img {
    width: 100%;
}

section.designs h2 {
    color: #fff;
    text-shadow: 0 2px 20px rgba(70, 70, 70, 0.4);
}

@media only screen and (max-width: 800px) {
    section.designs {
        position: relative;
        margin-top: 24px;
        margin-bottom: 24px;
    }

    section.designs .content {
        position: absolute;
        top: calc(100vw * 220 / 375 - 24px);
        left: var(--main-content-left);
    }

    section.designs h2 {
        font-size: calc(100vw * 14 / 375);
    }

    section.designs .images {
        display: flex;
        flex-direction: column;
        padding: 0 24px;
    }
}

@media only screen and (min-width: 800px) {
    section.designs {
        position: relative;
        margin-top: 64px;
        margin-bottom: 64px;
    }

    section.designs .content {
        position: absolute;
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 10;
        pointer-events: none;
    }

    section.designs h2 {
        font-size: var(--font-size-main-content-pc-title);
    }

    section.designs .images {
        padding: 0 64px;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        align-content: center;
    }

    section.designs .item {
        width: 50%;
        overflow: clip;
    }

    section.designs .item img {
        transition: 200ms ease-out;
    }

    section.designs .item img:hover {
        scale: 1.04;
    }
}


/* Tegaki section */

section.feature-tegaki {
    padding: 24px 24px 0 24px;
    background-color: #FEFEF2;
    display: flex;
    flex-direction: column;
    align-items: center;
}

@media only screen and (max-width: 800px) {
    section.feature-tegaki {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-top: 16px;
    }

    section.feature-tegaki h2 {
        font-size: calc(min(100vw * 14 / 375, 18px));
    }

    section.feature-tegaki .logo {
        z-index: 10;
        margin-top: 12px;
    }

    section.feature-tegaki .feature {
        display: flex;
        flex-direction: column;
        margin-top: -74px;
    }

    section.feature-tegaki .feature img {
        width: 100%;
    }

    section.feature-tegaki .layout-generator {
        border-radius: 10px;
    }

    section.feature-tegaki .easy-making {
        border-radius: 2px;
        margin-top: 16px;
    }
}

@media only screen and (min-width: 800px) {
    section.feature-tegaki {
        padding: calc(min(100vw, 1448px) * 132 / 1920) 24px 48px 24px;
        position: relative;
        align-items: flex-start;
    }

    section.feature-tegaki h2 {
        position: absolute;
        font-size: calc(min(100vw, 1448px) * 32 / 1920);;
        top: calc(min(100vw, 1448px) * 64 / 1920);
        margin-left: calc(max((100vw - 1448px) / 2, 0px) + min(100vw, 1448px) * 172 / 1920 + 16px);
    }

    section.feature-tegaki .logo {
        position: absolute;
        top: calc(min(100vw, 1448px) * 140 / 1920);
        width: calc(min(100vw, 1448px) * 685 / 1920);
        margin-left: calc(max((100vw - 1448px) / 2, 0px) + min(100vw, 1448px) * 112 / 1920 + 16px);
    }

    section.feature-tegaki .content {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    section.feature-tegaki .feature {
        display: flex;
        margin-top: 16px;
        width: 100%;
        max-width: 1400px;
    }

    section.feature-tegaki .feature img {
        width: 100%;
        margin: 16px;
    }

    section.feature-tegaki .feature .layout-generator {
        width: calc(40% - 16px * 2);
        border-radius: 14px;
    }

    section.feature-tegaki .feature .easy-making {
        width: calc(60% - 16px * 2);
        border-radius: 14px;
    }
}

/* Service section */

@media only screen and (max-width: 800px) {
    section.service .content {
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    section.service .message {
        width: 100%;
        position: relative;
    }

    section.service .message p {
        position: absolute;
        top: calc(100vw * 54 / 375);
        left: calc(100vw * 48 / 375);
        font-size: calc(max(12px, 100vw * 12 / 375));
        line-height: 1.8;
    }

    section.service .message img {
        width: 100%;
    }

    section.service .image.sp {
        display: block;
    }

    section.service .image.pc {
        display: none;
    }

    section.service .app-summary {
        position: absolute;
        top: calc(100vw * (54 + 110 + 16 + 8) / 375);
        left: 0;
        width: 100%;
        display: flex;
        flex-direction: column;
    }

    section.service .logo {
        margin-left: calc(100vw * (48 - 16) / 375);
        width: calc(100vw * 180 / 375);
        height: calc(100vw * 76 / 375);
    }

    section.service .store-links {
        margin-top: calc(100vw * 24 / 375);
        display: flex;
        align-items: center;
        justify-content: center;
    }

    section.service .store-links a {
        margin: 8px;
    }

    section.service .qr {
        display: none;
    }
}

@media only screen and (max-width: 320px) {
    section.service .message p {
        font-size: calc(100vw * 14 / 375);
    }
}

@media only screen and (min-width: 800px) {
    section.service {
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 48px 24px;
    }

    section.service .content {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        max-width: 1400px;
    }

    section.service .message {
        width: 60%;
        padding: 16px;
        position: relative;
    }

    section.service .message img {
        width: 100%;
    }

    section.service .message p {
        position: absolute;
        top: calc(min((100vw - 24px * 2) * 0.6, 808px) * 104 / 800);
        left: calc(min((100vw - 24px * 2) * 0.6, 808px) * 128 / 800);
        font-size: calc(min((100vw - 24px * 2) * 0.6, 808px) * 26 / 800);
        line-height: 2;
    }

    section.service .image.sp {
        display: none;
    }

    section.service .image.pc {
        display: block;
    }

    section.service .app-summary {
        width: 40%;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    section.service .store-links {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    section.service .store-links a {
        margin: 16px;
    }

    section.service .qr {
        margin-top: 64px;
        display: block;
        width: 96px;
        height: 96px;
    }
}

/* Action */

.action {
    position: sticky;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 104px;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 999;
}

.action a {
    background-color: #CAFED6;
    padding: 12px 32px;
    text-decoration: none;
    border-radius: 8px;
    box-shadow: 0 4px 12px #7272721c;
}

.action-background {
    background-color: #FEFEF2;
    height: 104px;
    margin-top: -104px;
}

@media only screen and (min-width: 800px) {
    .action {
        height: 120px;
    }

    .action a {
        padding: 24px 40px;
        transition: 200ms ease-out;
    }

    .action a:hover {
        scale: 1.08;
    }

    .action img {
        width: 200px;
    }

    .action-background {
        height: 120px;
        margin-top: -120px;
        padding-bottom: 176px;
    }
}

.store-badges {
    display: flex;
    align-items: center;
    justify-content: center;
}

.store-badges a {
    display: block;
    width: 30%;
}

.store-badges a img {
    width: 100%;
}

.store-badges .spacer {
    width: 28px;
    object-fit: contain;
}

.app-logo {
    display: flex;
    align-items: center;
    justify-content: center;
}

.app-logo a {
    display: block;
    width: 48%;
}

.app-logo a img {
    width: 100%;
}


/* Footer */

footer {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 40px 16px 32px 16px;
}

footer .name, .email {
    font-size: 12px;
}

footer .address {
    font-size: 11px;
}

footer .email {
    color: #000;
}