.container {
    display: flex;
    height: 100%;
    /* ビューポートの高さ */

}

.zen-maru-gothic-regular {
    font-family: "Zen Maru Gothic", serif;
    font-weight: bold;
    font-style: normal;
}

.noto-sans-jp {
    font-family: "Noto Sans JP", serif;
    font-optical-sizing: auto;
    font-weight: weight;
    font-style: normal;
}

.material-icons {
    font-variation-settings: 'FILL' 0,
    'wght' 400,
    'GRAD' 0,
    'opsz' 24;
    padding: 16px;
}

.left,
.right {
    width: calc((100% - 480px) / 2);
    background-color: var(--main-color);
    padding: 0 20px;
    position: fixed;
    top: 0;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

/** 左側 */
.left {
    left: 0;
    /* 左側に固定 */
    background-image: url('../image/background-left.png');
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    flex-direction: column;
    align-items: center;
}

.alkoo-logo {
    width: 180px;
}

.alkoo-logo:hover {
    cursor: pointer;
}

.alkoo-logo#header-logo {
    padding: 20px;
}

.menu-list {
    font-family: "Zen Maru Gothic", serif;
    color: #ffffff;
    font-size: 18px;
    margin-top: 20px;
    font-weight: 500;
    text-align: center;
}

/* 基本スタイル */
.menu-list li {
    position: relative; /* アンダーラインを配置するために必要 */
    margin-top: 20px;
    margin-bottom: 20px;
    cursor: pointer;
}

.menu-list li::after {
    content: "";
    position: absolute;
    bottom: -2px; /* 文字の真下に配置 */
    left: 0;
    width: 0; /* 初期状態では幅0 */
    height: 2px; /* アンダーラインの太さ */
    background-color: #ffffff; /* アンダーラインの色 */
    transition: width 0.3s ease; /* アニメーションの設定 */
}

/* ホバー時にアンダーラインが左から右に広がる */
.menu-list li:hover::after, .menu-list li.active::after {
    width: 100%; /* ホバー時にアンダーラインが全幅に広がる */
}

/* ホバー時の文字色変更 */
.menu-list li:hover, .menu-list li.active {
    color: #ffffff;
    cursor: pointer;
}

.right {
    background-image: url('../image/background-right.png');
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;

}

.right {
    right: 0;
    /* 右側に固定 */
}

.houjin-button {
    font-size: 16px;
    display: block;
    text-align: center;
    vertical-align: middle;
    text-decoration: none;
    margin: auto;
    margin-top: 24px;
    margin-bottom: 24px;
    padding: 1rem 4rem;
    font-weight: sbold;
    border: 2px solid #fff;
    color: #fff;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    z-index: 1;
    border-radius: 8px;
    font-weight: bold;
    background: rgba(255, 255, 255, 0.2); /* 白の半透明背景 */
}

.houjin-button::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: #fff;
    color: #71D7D3;
    transform: translateX(-100%);
    transition: all .3s;
    z-index: -1;
}

.houjin-button:hover::before {
    transform: translateX(0);
    color: #71D7D3;
}

.houjin-button:hover {
    color: #71D7D3;
}

.nav#houjin {
    justify-content: center;
    text-align: center;
    align-items: center;
}

.download-button#center-houjin-button {
    margin-top: 0px;
}

.navigation {
    display: flex;
    flex-direction: column; /* 子要素を縦に並べる */
    align-items: center; /* 子要素を横方向に中央揃え */
    justify-content: center; /* 子要素を縦方向に中央揃え */
    text-align: center; /* テキストの中央揃え（オプション） */
}

span {
    display: inline-block;
}

.dl-text-right {
    font-family: "Zen Maru Gothic", serif;
    font-size: 18px;
    color: #ffffff;
    font-weight: 500;
}

.center {
    position: relative;
    flex-grow: 1;
    height: 100%;
    max-width: 480px;
    background-color: #ffffff;
    z-index: 2;
}

.sp-header {
    position: fixed;
    background-color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%; /* 横幅を100%に */
    box-shadow: 0px 2px 10px 0px gray;
    z-index: 100;
}

.top-area {
    display: grid;
    place-items: center;
    background-color: #E7FEF2;
}

.top-header {
    position: relative;
}

.top-area {
    position: relative;
}

.top-image-area {
    position: relative;
}

.top-image {
    width: 100%; /* 画像が親要素に合わせてサイズ調整されます */
    height: auto;
}

h1 {
    position: absolute;
    top: 27px; /* 画面の中央に配置 */
    right: 5%;
    color: #1a1a1a; /* 文字色を白にするなど、画像の上で見やすくする */
    font-size: 2.0em; /* 文字サイズ調整 */
    text-align: center;
    z-index: 1; /* 画像より前面に表示されるように */
    white-space: nowrap; /* 改行を防ぐ */
    font-family: "Zen Maru Gothic", serif;
    text-align: right;
    word-wrap: break-word; /* 長い単語が画面を超えないように折り返しを強制 */
    overflow: hidden; /* はみ出したテキストを隠す */
}

.arukou-text {
    color: #F6953D;
}

h3 {
    font-family: "Noto Sans JP", serif;
    text-align: center;
    color: #1a1a1a;
}


.download-button {
    height: 40px;
    width: calc(100% - 24px);
    background-color: #F6953D;
    padding: 8px 10px;
    text-align: center;
    font-family: "Noto Sans JP", serif;
    font-weight: 700;
    border-radius: 50px;
    color: #ffffff;
    margin-top: 20px;
}

.download-button:hover {
    opacity: 0.8;
}

.users-voice-button {
    height: 40px;
    width: calc(100% - 24px);
    padding: 8px 0 8px;
    background-color: #F6953D;
    text-align: center;
    font-family: "Noto Sans JP", serif;
    font-weight: 700;
    border-radius: 40px;
    color: #ffffff;
    margin-top: 20px;
    margin-bottom: 20px;
    margin: auto;
    width: 100%;
}

.users-voice-button:hover {
    opacity: 0.8;
}


.top-text-download {
    padding: 16px;
    display: flex;
    align-items: center;
    flex-flow: column;
    width: 100%;
    margin: auto;
}

.text-animation {
    font-family: "Zen Maru Gothic", serif;
    text-align: center;
}

.text-animation-reverse {
    margin: 12px;
    color: #1a1a1a;
}

.explanation {
    font-family: "Noto Sans JP", serif;
    padding-left: 20px;
    padding-right: 20px;
    padding-bottom: 36px;
    text-align: left;
    color: #1a1a1a;
}

.other-list {
    margin: auto;
    text-align: left;
    display: flex;
    flex-flow: column;
    gap: 8px;

}

.other-list li {
    align-items: center;
    display: flex;
    vertical-align: middle; /* アイコンとテキストを縦方向で中央揃え */
    padding-left: 20px;
    gap: 8px;
    color: #1a1a1a;
}

main {
    padding: 16px;
}

.nav {
    padding-bottom: 24px;
}

.nav#another {
    background-color: #E7FEF2;
    padding: 36px;
}

.nav#premium {
    background-color: #FEFBF1;
    justify-content: center;
    align-items: center;
    text-align: center;
    width: 100%;
    padding: 8px;
}

.alkoo-more-fun {
    font-family: "Zen Maru Gothic", serif;
    font-size: 24px;
    text-align: center;
    margin-top: 24px;
    margin-bottom: 16px;
    font-weight: 700;
    color: #1a1a1a;
}


.alkoo-premium-logo {
    padding: 0 80px 16px;
}

.premium-text {
    font-family: "Noto Sans JP", serif;
    padding-bottom: 16px;
}

.screenshot-premium {
    padding: 0 50px 20px;
}

.button-premium {
    height: 40px;
    width: calc(100% - 24px);
    padding: 8px 0 8px;
    background-color: #E5B943;
    text-align: center;
    font-family: "Noto Sans JP", serif;
    font-weight: 700;
    border-radius: 40px;
    color: #ffffff;
    margin-bottom: 20px;
    /* margin: auto; */
    width: 100%;
}

.button-premium:hover {
    opacity: 0.8;
}

.explanation#premium {
    margin: 20px 0;
    margin-bottom: 0px;
    text-align: center;
}

.screenshot {
    display: flex;
    justify-content: center;
    margin: auto;
    width: auto;
}

.qr-code {
    width: 60%;
    margin: auto;
    padding: 16px 16px;
    border-radius: 24px;
}

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

.users-voice-title {
    font-family: "Zen Maru Gothic", serif;
    font-size: 24px;
    text-align: center;
    margin-top: 24px;
    margin-bottom: 12px;
    font-weight: 700;
    color: #1a1a1a;
}

.users-voice {
    font-weight: 700;
    color: #1a1a1a;
}

.swiper-item {
    background-color: #E7FEF2;
    padding-left: 20px;
    padding-right: 20px;
    border-radius: 8px;
    min-height: 160px;
    height: auto;
    font-size: 16px;
    line-height: 1.5;
    display: flex; /* Flexbox を使用 */
    align-items: center; /* 縦方向に中央揃え */
    justify-content: center; /* 横方向に中央揃え */
    text-align: center; /* テキストを中央揃えに */
}

.swiper {
    padding: 16px;
}

.swiper-pagination {
    margin-bottom: 8px;
}

.dl-area-right {
    position: relative;
    padding-left: 8px;
    max-width: 100%;
    max-height: max-content;
    text-align: center;
    align-items: center;
}

.other-contents {
    padding: 0 16px;
}

.other-contents .nav {
    padding-bottom: 0;
}

.appstore {
    height: 44px;
    cursor: pointer;
}

.playstore {
    height: 44px;
    cursor: pointer;
}

.flex-store {
    display: flex;
    gap: 10px; /* 画像の間隔 */
    flex-wrap: wrap; /* 画面幅が狭い場合に画像を折り返し */
}

.link {
    padding-left: 36px;
    margin: 16px 0;
}

.link-text {
    line-height: 2.4; /* 行間を広げる */
    font-size: 14px;
    color: #007AFF;
}


.link-text:hover {
    color: #469FFF;
}

.fab {
    position: fixed;
    bottom: 120px;
    right: 20px;
    background-color: #ffffff; /* 背景色 */
    border-radius: 50%; /* 丸い形にする */
    padding: 20px;
    display: block;
    cursor: pointer;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* 少し影をつけて浮き上がらせる */
    border: 1px solid #00c965;
    opacity: 0;
    transform: translateY(20px); /* 初期位置を下にずらす */
    transition: opacity 0.5s ease, transform 0.5s ease;
    z-index: 5;
}

.fab.visible {
    opacity: 1;
    transform: translateY(0); /* 元の位置に戻す */
}

.fab img {
    width: 25px; /* 画像のサイズ */
    height: 25px;
}

.copyright {
    background-color: #f4f4f4;
    text-align: center;
    padding: 20px;
}

footer {
    display: flex; /* 初期状態では非表示 */
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 1rem 0.25rem 1rem 1rem;
    background-color: #F4F4F4;
    color: black;
    text-align: left;
    align-items: center;
    box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.1);
    opacity: 0;
    transform: translateY(20px); /* 初期位置を下にずらす */
    transition: opacity 0.5s ease, transform 0.5s ease;
    z-index: 100;
}

footer.visible {
    opacity: 1;
    transform: translateY(0); /* 元の位置に戻す */
}

footer .app-icon {
    width: 2.5rem;
    height: 2.5rem;
    margin-right: 0.5rem;
}

.footer-title {
    font-weight: bold;
    margin-bottom: 0.25rem;
}

.footer-text {
    line-height: 1.5rem;
    font-size: 0.75rem;
}

footer button {
    background-color: #00c965;
    color: white;
    flex: 1;
    margin: 1rem;
    padding: 8px;
    border-radius: 8px;
    text-align: center;
    font-weight: bold;
}

#close-footer {
    margin-bottom: auto;
    overflow: hidden;
    width: 0.5rem;
    height: 0.5rem;
    text-indent: 100%;
    white-space: nowrap;
    cursor: pointer;
}

#close-footer:before {
    content: "";
    display: block;
    position: absolute;
    top: 1.5rem;
    right: 0.5rem;
    width: 1rem;
    height: 2px;
    background-color: #757575;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
}

#close-footer:after {
    content: "";
    display: block;
    position: absolute;
    top: 1.5rem;
    right: 0.5rem;
    width: 1rem;
    height: 2px;
    background-color: #757575;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}

#sp-menu {
    display: flex;
    flex-flow: column;
    align-items: center;
    text-align: center;
    justify-content: center;
    transform: translateY(-100%);
    transition: transform 0.5s ease;
    background: white;
    position: fixed;
    width: 100%;
    height: 100vh;
    top: 0;
    left: 0;
    z-index: 10;
}

#sp-menu.visible {
    transform: translateY(0);
}

article section {
    transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
    transition-duration: 1s;
    transition-property: opacity, transform;
    animation-delay: 2s;
    transform: translate3d(0, 50px, 0);
    opacity: 0;
}

article section.visible {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}

.contents-image :hover {
    opacity: 0.7;
}

.greatkun-area {
    width: 100%;
    position: absolute;
    bottom: 40px;
    left: 0;
}

.greatkun-move {
    display: block;
    position: absolute;
    bottom: 0;
}

.left .greatkun-move {
    animation: move-left 50s linear infinite;
}

.right .greatkun-move {
    animation: move-right 50s linear infinite;
}

@keyframes move-left {
    0% {
        left: -300px; /* 画面左外からスタート */
    }
    45% {
        left: 100%; /* 画面右外に移動 */
    }
    100% {
        left: 100%; /* 画面右外に移動 */
    }
}

@keyframes move-right {
    0% {
        left: -300px;
    }
    50% {
        left: -300px; /* 画面左外からスタート */
    }
    95% {
        left: 100%; /* 画面右外に移動 */
    }
    100% {
        left: 100%; /* 画面右外に移動 */
    }
}

@media (min-width: 481px) {
    footer, #sp-menu, #splash {
        display: none;
        /* PC版では非表示 */
    }

    .sp-header {
        display: none;
    }

    .center {
        margin: 0 calc((100% - 480px) / 2);
    }

    .fab {
        right: calc((100% - 480px) / 2 + 20px);
    }

    .area-name:hover {
        color: var(--black-link-hover);
    }
}

@media (max-width: 480px) {

    .left,
    .right {
        display: none;
        /* スマートフォンでは左右を隠す */
    }

    .menu-list {
        color: #1a1a1a;
    }

    .top-area {
        position: relative;
        margin-top: 76.53px;
    }

    .major-function {
        margin: 1rem 1rem;
        gap: 1rem 0.5rem;
        grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    }

    .center {
        width: 100%;
        /* 中央部分を100%に */
    }

    .copyright {
        padding: 1rem 1rem 6rem;
    }

    .top-area {
        overflow: hidden;
        /* はみ出る部分を隠す */
    }
}


/** QRが見えにくくなるのでブレイクポイント */
@media (max-width: 840px) {
    .left, .right {
        display: none; /* スマートフォンでは左右を隠す */
    }

    .center {
        width: 100%; /* 中央部分を100%に */
        max-width: 840px;
        margin: 0;
    }

    .fab {
        right: 20px;
    }

    #splash {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        background: white;
        z-index: 9999;
        display: flex;
        flex-flow: column;
        justify-content: center;
        align-items: center;
        text-align: center;
        padding: 0 64px 128px;
        transition: opacity 2s ease;
    }

    #splash div {
        display: flex;
        justify-content: center;
    }

    #splash img {
        display: block;
    }

    .splash-logo {
        margin-bottom: 48px;
        width: 75%;
    }

    .splash-gif {
        width: 33%;
    }

    #splash.fade-out {
        opacity: 0;
        pointer-events: none;
    }
}

/** ストアアイコンが見えにくくなるのでブレイクポイント */
@media (max-width: 1200px) {
    .flex-store {
        flex-flow: column;
        align-items: center;
    }

    .appstore, .playstore {
        max-height: none;
    }

}