/*! HTML5 Boilerplate v9.0.1 | MIT License | https://html5boilerplate.com/ */

/* main.css 3.0.0 | MIT License | https://github.com/h5bp/main.css#readme */
/*
 * What follows is the result of much research on cross-browser styling.
 * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
 * Kroc Camen, and the H5BP dev community and team.
 */

/* ==========================================================================
   Base styles: opinionated defaults
   ========================================================================== */

html {
    color: #222;
    font-size: 1em;
    line-height: 1.4;
    --12px: 0.750rem;
    --13px: 0.8125rem;
    --14px: 0.875rem;
    --15px: 0.9375rem;
    --16px: 1rem;
    --17px: 1.0625rem;
    --18px: 1.125rem;
    --19px: 1.1875rem;
    --20px: 1.25rem;
    --21px: 1.3125rem;
    --24px: 1.5rem;
    --26px: 1.625rem;
    --28px: 1.75rem;
    --32px: 2rem;
    --36px: 2.25rem;
    --38px: 2.375rem;
    --39px: 2.4375rem;
    --40px: 2.5rem;
}

/*
 * Remove text-shadow in selection highlight:
 * https://twitter.com/miketaylr/status/12228805301
 *
 * Customize the background color to match your design.
 */

::-moz-selection {
    background: #b3d4fc;
    text-shadow: none;
}

::selection {
    background: #b3d4fc;
    text-shadow: none;
}

/*
 * A better looking default horizontal rule
 */

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
}

/*
 * Remove the gap between audio, canvas, iframes,
 * images, videos and the bottom of their containers:
 * https://github.com/h5bp/html5-boilerplate/issues/440
 */

audio,
canvas,
iframe,
img,
svg,
video {
    vertical-align: middle;
}

/*
 * Remove default fieldset styles.
 */

fieldset {
    border: 0;
    margin: 0;
    padding: 0;
}

/*
 * Allow only vertical resizing of textareas.
 */

textarea {
    resize: vertical;
}

/* ==========================================================================
   Author's custom styles
   ========================================================================== */

/* ==========================================================================
   Helper classes
   ========================================================================== */

/*
 * Hide visually and from screen readers
 */

.hidden,
[hidden] {
    display: none !important;
}

/*
 * Hide only visually, but have it available for screen readers:
 * https://snook.ca/archives/html_and_css/hiding-content-for-accessibility
 *
 * 1. For long content, line feeds are not interpreted as spaces and small width
 *    causes content to wrap 1 word per line:
 *    https://medium.com/@jessebeach/beware-smushed-off-screen-accessible-text-5952a4c2cbfe
 */

.visually-hidden {
    border: 0;
    clip: rect(0, 0, 0, 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    white-space: nowrap;
    width: 1px;
    /* 1 */
}

/*
 * Extends the .visually-hidden class to allow the element
 * to be focusable when navigated to via the keyboard:
 * https://www.drupal.org/node/897638
 */

.visually-hidden.focusable:active,
.visually-hidden.focusable:focus {
    clip: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    white-space: inherit;
    width: auto;
}

/*
 * Hide visually and from screen readers, but maintain layout
 */

.invisible {
    visibility: hidden;
}

/*
 * Clearfix: contain floats
 *
 * The use of `table` rather than `block` is only necessary if using
 * `::before` to contain the top-margins of child elements.
 */

.clearfix::before,
.clearfix::after {
    content: "";
    display: table;
}

.clearfix::after {
    clear: both;
}

/* ==========================================================================
   EXAMPLE Media Queries for Responsive Design.
   These examples override the primary ('mobile first') styles.
   Modify as content requires.
   ========================================================================== */
html {
    background-color: #fee394;
}

body {
    font-family: "Kiwi Maru", serif;
    font-weight: 400;
    font-style: normal;
    background-color: #f9eaac;
}

h1 {
    font-size: var(--21px);
}

h2 {
    font-size: var(--20px);
}

h3 {
    font-size: var(--18px);
}

nav {
    background-color: #fee28f;
}

nav ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
}

nav ul li {
    list-style: none;
    margin: 1em 0.5em;
}

nav ul li img {
    filter: drop-shadow(2px 4px 6px #ff9d0500);
    transition: 0.3s;
}

nav ul li a:hover img {
    filter: drop-shadow(2px 4px 6px #ff9d05ff);
    transition: 0.3s;
}

.nav-news {
    width: 20%;
}

.nav-overview {
    width: 35%;
}

.nav-howtoplay {
    width: 16%;
}

.nav-character {
    width: 30%;
}

.nav-spec {
    width: 20%;
}

.nav-comingsoon {
    width: 35%;
    opacity: 0.5;
}

.mainvisual {
    position: relative;
}

.daryie {
    position: absolute;
    top: 54vw;
    left: 50vw;
    width: 25vw;
}

.fadeinout {
    animation-name: fade;
    animation-duration: 6s;
    animation-iteration-count: infinite;
}

@keyframes fade {
    0% {
        opacity: 0;
    }

    67% {
        opacity: 0;
    }

    70% {
        opacity: 1;
    }

    97% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

.maincontent {
    background: #F9EAAC url(../img/BG_sp.png) top center / contain repeat-y;
    overflow: hidden;
}

#catchcopy img {
    width: 63%;
    margin: 20px auto;
}

#news {
    background: url(../img/news_bg.png) top center / cover no-repeat;
    width: 78vw;
    margin: 0 auto;
    aspect-ratio: 773 / 685;
    height: auto;
    color: #FFF;
}

#news h2 {
    font-size: clamp(1.25rem, -0.195rem + 6.163vi, 3.75rem);
    line-height: 1.4em;
    text-align: center;
    padding-top: 8.5vw;
    padding-bottom: 3.5vw;
}

#news h3 {
    font-size: clamp(1.125rem, 0.331rem + 3.39vi, 2.5rem);

}

.entry_shell {
    overflow-y: scroll;
    height: 40vw;
    width: 94%;
    margin: 3%;
}

.entry {
    border-bottom: 1px dotted #fff;
    padding-top: 1em;
    padding-bottom: 1em;
}
.entry:first-child {
    padding-top: 0;
}
.entry a {
    text-decoration: underline;
    color: #fff;
    font-weight: bold;
    text-underline-offset: 3px;
    transition: 0.3s;
}

.entry a:hover {
    opacity:0.7;
    transition: 0.3s;
}

.entry time {
    font-size: clamp(0.625rem, 0.264rem + 1.541vi, 1.25rem);
    float: right;
    padding-right: 10px;
}

.entry time+p {
    clear: both;
    font-size: clamp(0.875rem, 0.225rem + 2.773vi, 2rem);
}

#vehicle {
    margin-top: 20px;
    position: relative;
    background-color: #ffffff85;
    border-radius: 70px 70px 20px 20px;
}

.c-in {
    background: url(../img/vehicle_bg.png) top center / contain no-repeat;
    aspect-ratio: 748 / 481;
}

.vehicle_anime {
    float: left;
    width: 54%;
}

.animegif {
    width: 100%;
}

.vehicle_logo,
.vehicle_txt {
    width: 46%;
    float: left;
}

#howtoplay {
    margin-top: 20px;
    position: relative;
    background-color: #ffffff85;
    border-radius: 20px;
}

#overview {
    width: 85vw;
    margin: 20px auto 0;
    text-align:center;
}

#overview h2 {
    margin-bottom: 1rem;
    text-align: center;
    font-size: clamp(1.25rem, 0.528rem + 3.082vi, 2.5rem);
}

#overview h2 span {
    white-space: pre;
    letter-spacing: -3px;
    font-size: clamp(1rem, 0.278rem + 3.082vi, 2.25rem);
}

#overview p {
    font-size: var(--14px);
    margin-bottom: 1em;
}
#character {
    width: 78vw;
    margin: 20px auto 0;
    font-size: var(--12px);
}

#character .plate-w {
    display: flex;
    justify-content: space-around;
}

#character .plate-w div {
    width: 31%;
    text-align: center;
}

#character .plate-w div img {
    padding-bottom: 1.5rem;
    padding-top: 1rem;
    margin: 0 auto;
}

#character h3 {
    font-size: clamp(0.75rem, 0.533rem + 0.924vi, 1.125rem);
    margin-bottom: 0.5rem;
    color: #f38e00;
}

#character h3+p {
    text-align: left;
    font-size: clamp(0.75rem, 0.533rem + 0.924vi, 1.125rem);
    color: #5d5d5d;
}

.plate {
    background: #fec48880;
    padding: 1em 0.4em;
}

.plate-w {
    background: #ffffff85;
    padding: 1em;
}

#spec {
    width: 78vw;
    margin: 20px auto;
    font-size: var(--12px);
    font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
}

#spec dl {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    font-weight: bold;
}

#spec dt {
    width: 34%;
    margin-bottom: 10px;
    border-right: 2px #ff9d07 solid;
}

#spec dd {
    width: 66%;
    padding-left: 1em;
    margin-bottom: 10px;
}


footer {
    background-color: #e97132;
    color: #fff;
    font-size: var(--12px);
    padding-bottom: 1em;
    text-align: center;
    text-shadow: 0 -1px #b5680b;
    font-family: "Helvetica Neue",
        Arial,
        "Hiragino Kaku Gothic ProN",
        "Hiragino Sans",
        Meiryo,
        sans-serif;
}

footer a {
    display: block;
    width: 8em;
    background-color: #ff9d05;
    text-shadow: 0 -1px 0px #ffa71e, 0 1px 0px #bf7400;
    color: #FFFFFF;
    text-align: center;
    padding: 5px 5px;
    font-weight: bold;
    font-size: var(--14px);
    margin: 1em auto 0;
    transition: opacity 0.6s;
}

footer a:hover {
    opacity: 0.6;
    transition: opacity 0.6s;
}

/* swiper */
.swiper,
.swiper2 {
    width: 100%;
    height: 100%;
    padding-bottom: 50px !important;
}

.swiper-controller {}

.swiper-pagination {
    margin-right: auto;
}

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

.swiper-button-next,
.swiper-button-prev {
    top: inherit !important;
    bottom: 0;
}

.swiper-button-prev,
.swiper-rtl .swiper-button-next {
    right: var(--swiper-navigation-sides-offset, 45px) !important;
    left: auto !important;
}

.swiper-button-next,
.swiper-rtl .swiper-button-prev {
    right: var(--swiper-navigation-sides-offset, 10px);
    left: auto;
}

.swiper-button-prev {
    background: url(../img/prevbtn.png);
    background-size: contain;
    background-repeat: no-repeat;
    width: 32px;
    height: 40px;
}

.swiper-button-next {
    background: url(../img/nextbtn.png);
    background-size: contain;
    background-repeat: no-repeat;
    width: 32px;
    height: 40px;
}

.swiper-pagination-bullet {
    background-color: #ff3131 !important;
}

@media only screen and (min-width: 751px) {

    /* tablet Medium(751px) and up*/
    .daryie {
        position: absolute;
        top: 20vw;
        left: 49vw;
        width: 15vw;
    }

    /* swiper */
    .swiper {
        padding-bottom: 70px !important;
    }

    .swiper-button-prev,
    .swiper-rtl .swiper-button-next {
        right: var(--swiper-navigation-sides-offset, 60px) !important;
        left: auto;
    }

    .swiper-button-prev,
    .swiper-button-next {
        width: 44px !important;
        height: 55px !important;
    }

    .swiper-button-next,
    .swiper-button-prev {
        top: inherit !important;
        bottom: 10px;
    }

    .swiper-pagination {
        margin-bottom: 15px;
    }
    #overview p {
        font-size: var(--21px);
        margin: 1em;
    }
    #overview .sp{
        display:none;
    }
}

@media screen and (min-width: 64em) {

    /* PC Large(1024px) and up */
    html {
        scroll-padding-top: 94px;
    }
    body {
        background: url(../img/BG_pc.png);
    }

    .daryie {
        position: absolute;
        top: 20vw;
        left: 49vw;
        width: 15vw;
    }

    nav {
        width: 100%;
        padding: 10px 0;
        position: sticky;
        top: 0;
        left: 0;
        z-index: 10;
    }

    nav ul {
        max-width: 1200px;
        margin: 0 auto;
    }

    nav ul li img {
        width: 100%;
    }

    .nav-news {
        width: 10%;
    }

    .nav-overview {
        width: 17.5%;
    }

    .nav-howtoplay {
        width: 8%;
    }

    .nav-character {
        width: 15%;
    }

    .nav-spec {
        width: 10%;
    }

    .nav-comingsoon {
        width: 17.5%;
    }

    #catchcopy img {
        width: 90%;
        margin: 40px auto;
    }

    .maincontent {
        background: url(../img/BG_maincontent_pc.png) top center / contain repeat-y;
        background-color: transparent;
        overflow: hidden;
        width: 1000px;
        margin: 0 auto;
    }

    #news {
        background: url(../img/news_bg.png) top center / contain no-repeat;
        width: 500px;
        margin: 20px auto;
    }

    #news h2 {
        font-size: var(--40px);
        padding-top: 54px;
        padding-bottom: 1.5vw;
    }

    .entry_shell {
        height: 265px;
        width: 92%;
        margin: 5px auto;
    }

    #news h3 {
        font-size: var(--28px);
    }

    .entry time {
        font-size: var(--12px);
    }

    .entry time+p {
        font-size: var(--18px);
    }

    #vehicle {
        width: 750px;
        margin: 20px auto;
    }

    #overview {
        width: 750px;
        margin: 20px auto;
        text-align: center;
    }

    #overview p {
        font-size: var(--24px);
        margin: 1em;
    }

    /* swiper */
    .swiper {
        height: 560px;
    }

    .swiper2 {
        height: 530px;
    }

    .swiper,
    .swiper2 {
        width: 750px;
        margin-left: auto;
        margin-right: auto;
        position: relative;
        overflow: hidden;
        list-style: none;
        padding: 0;
        z-index: 1;
        display: block;
        padding-bottom: 50px !important;
    }

    #howtoplay {
        width: 750px;
        margin: 20px auto;
    }

    #character {
        width: 750px;
    }

    #spec {
        width: 750px;
    }
    .howtoplayimg a:hover {
    cursor: zoom-in;
}
}

@media print,
(-webkit-min-device-pixel-ratio: 1.25),
(min-resolution: 1.25dppx),
(min-resolution: 120dpi) {
    /* Style adjustments for high resolution devices */
}

/* ==========================================================================
   Print styles.
   Inlined to avoid the additional HTTP request:
   https://www.phpied.com/delay-loading-your-print-css/
   ========================================================================== */

@media print {

    *,
    *::before,
    *::after {
        background: #fff !important;
        color: #000 !important;
        /* Black prints faster */
        box-shadow: none !important;
        text-shadow: none !important;
    }

    a,
    a:visited {
        text-decoration: underline;
    }

    a[href]::after {
        content: " ("attr(href) ")";
    }

    abbr[title]::after {
        content: " ("attr(title) ")";
    }

    /*
   * Don't show links that are fragment identifiers,
   * or use the `javascript:` pseudo protocol
   */
    a[href^="#"]::after,
    a[href^="javascript:"]::after {
        content: "";
    }

    pre {
        white-space: pre-wrap !important;
    }

    pre,
    blockquote {
        border: 1px solid #999;
        page-break-inside: avoid;
    }

    tr,
    img {
        page-break-inside: avoid;
    }

    p,
    h2,
    h3 {
        orphans: 3;
        widows: 3;
    }

    h2,
    h3 {
        page-break-after: avoid;
    }
}