@charset "utf-8";

@media (prefers-color-scheme: light) {
    :root {
        --h1-back: url(/image/yokohama-daytime.png);
    }
}

@media (prefers-color-scheme: dark) {
    :root {
        --h1-back: url(/image/yokohama-evening.png);
    }
}

header h1 {
    position: relative;
    font-family: 'Allura', cursive;
    font-size: clamp(3rem, 9vw - 1rem, 8rem);
    text-align: center;
    padding: 76px 0;
}

header h1 a, header h1 a:hover, header h1 a:active, header h1 a:visited {
    position: absolute;
    color: var(--secondary-text-color);
    text-decoration: none;
    font: 300 2.8rem 'Material Symbols Outlined';
    top: 10px;
    right: 10px;
}


/* ----ナビゲーションの設定 最初---- */
nav {
    position: relative;
    background-color: var(--background-color);
    width: 100vw;
}

nav ul {
    margin-block: 0 0;
    margin-inline: 0 0;
    padding-block: 0 0;
    padding-inline: 0 0;
    margin: 8px 0;
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    overflow-x: scroll;
    list-style: none;

    /*スクロールバーを消去*/
    -ms-overflow-style: none;
    scrollbar-width: none;
}

/*スクロールバーを消去*/
nav ul::-webkit-scrollbar {
    display: none;
}

.l_scrollable::before {
    pointer-events: none;
    opacity: 1;
    position: absolute;
    height: calc(100% + 16px);
    top: -8px;
    padding-top: 8px;
    left: 0;
    aspect-ratio: 1.3;
    color: var(--secondary-text-color);
    font: 700 clamp(1.5rem, 1vw + 1rem, 2.222rem) 'Material Symbols Outlined';
    content: '\e5e0';
    -webkit-text-stroke: 1px var(--area-color);
    text-align: center;
    background: var(--wk-left-gradient);
    background: var(--left-gradient);
}

.r_scrollable::after {
    pointer-events: none;
    opacity: 1;
    position: absolute;
    height: calc(100% + 16px);
    top: -8px;
    padding-top: 8px;
    right: 0;
    aspect-ratio: 1.3;
    color: var(--secondary-text-color);
    font: 700 clamp(1.5rem, 1vw + 1rem, 2.222rem) 'Material Symbols Outlined';
    content: '\e5e1';
    -webkit-text-stroke: 1px var(--area-color);
    text-align: center;
    background: var(--wk-right-gradient);
    background: var(--right-gradient);
}

nav li {
    font-size: clamp(1.5rem, 1vw + 1rem, 2.222rem);
    flex: 1 0 6em;
    text-align: center;
    border-right: 2px solid var(--secondary-text-color);
    cursor: pointer;
    text-decoration-line: underline;
    text-decoration-style: solid;
    text-decoration-color: var(--background-color);
    text-decoration-thickness: 4px;
    text-decoration-skip-ink: none;
    text-underline-offset: 5px;
    -webkit-transition-duration: 1s;
    transition-duration: 1s;
}

nav li:last-child {
    border: none;
}
/* ----ナビゲーションの設定 最後---- */


/* ----カルーセルの設定 最初---- */
.whole_wrapper {
    width: 100vw;
    display: flex;
    flex-wrap: nowrap;
    align-items: flex-start;
    overflow: hidden;
}

.inside_article {
    width: 100vw;
    flex: 0 0 100vw;
}
/* ----カルーセルの設定 最後---- */


/* ----各内容の設定---- */
main h1 {
    height: 400px;
    width: 100vw;
    padding: 40px 0 0 40px;
    background-image: var(--h1-back);
    background-repeat: repeat-x;
    background-size: auto 1000px;
    background-position: center bottom;

}

article {
    display: flex;
    flex-flow: column nowrap;
    align-items: center;
}

section {
    width: 100vw;
    margin: 0;
    padding: 120px 10vw;
}

.fade_in {
    animation-name: fadeIn;
    -webkit-animation-name: fadeIn;
    -webkit-animation-duration: 600ms;
    animation-duration: 600ms;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    opacity: 0;
}

@-webkit-keyframes fadeIn {
    from {
        opacity: 0;
        -webkit-transform: translateY(200px);
    }
    to {
        opacity: 1;
        -webkit-transform: translateY(0);
    }
}
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(200px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

section h2 {
    margin-bottom: 20px;
    opacity: 0;
}

section h3 {
    margin-bottom: 16px;
    opacity: 0;
}

section p {
    margin-bottom: 48px;
    opacity: 0;
}

section:nth-child(even) {
    background-color: var(--area-color);
}

section:nth-child(odd) {
    background-color: var(--background-color);
}

.img_wrapper {
    display: flex;
    flex-wrap: wrap;
    opacity: 0;
}

.aspect-16-9 {
    width: min(480px,100%);
    aspect-ratio: 16 / 9;
    flex: 1 1 min(480px,100%);
    margin: 5px;
}

.aspect-18-39 {
    width: min(200px, 100%);
    aspect-ratio: 18 / 39;
    flex: 0 1 min(200px, 100%);
    margin: 5px;
}

.googleplay_badge {
    width: min(60%, 240px);
}

iframe {
    opacity: 0;
}

section:nth-child(odd) img {
    border: 8px solid var(--background-color);
}

section:nth-child(even) img {
    border: 8px solid var(--area-color);
}


/* ----フッター設定---- */

footer {
    padding: 3px 0;
}

footer svg {
    display: inline-block;
    height: 1.5rem;
    margin: 0 12px;
    fill: var(--primary-text-color);
}