@charset 'UTF-8';

.brandSiteHeader {
    background-color: #fff;
}

.refresh-area {
    width: 90%;
    max-width: 1000px;
    margin: 10vh auto;
    height: 50vh;
}

.refresh-area p {
    width: 100%;
    margin: 5vh 0;
    text-align: center;
}

.refresh-area a {
    overflow-wrap: break-word;
    word-wrap: break-word;
    color: inherit;
    text-decoration: none;
}


@media screen and (max-width: 833px) {

    .sp2_none {
        display: none;
    }

}

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

    .pc2_none {
        display: none;
    }

}


@media screen and (max-width: 767px) {

    .sp_none {
        display: none;
    }

    .brandSiteHeader .logo {
        width: auto !important;
    }

    .brandSiteHeader {
        height: auto !important;
        position: relative !important;
    }

    .header-spacer {
        height: 5px;
        background-color: #fff;
    }

    .max-area {
        margin: 0 auto 0;
        width: 100%;
    }

    .max-area:before {
        content: "";
        display: block;
        position: fixed;
        top: 0;
        left: 0;
        z-index: -1;
        width: 100%;
        height: 100vh;
        background-image: url("../images/maxbg.webp");
        background-size: cover;
        background-repeat: no-repeat;
        background-position: 50% 100%;
    }

    .bg-area {
        margin: 0 auto;
        width: 100%;
    }

    header {
        width: 100%;
        position: sticky;
        top: 0;
        left: 0;
        z-index: 100;
    }

    .header-logo-area {
        margin: 0 auto 0;
        width: 100%;
        background: #e12014;
        position: relative;
        border-bottom: 2vh solid #e2b841;
    }

    .header-logo-inner {
        width: 96%;
        margin: 0 auto;
        padding: 2% 0;
        display: flex;
        justify-content: space-around;
        align-items: center;
    }

    .logo-area {
        padding-right: 25%;
    }

    input#nav-menu[type="checkbox"] {
        display: none;
    }

    input#nav-menu[type="checkbox"] + label {
        cursor: pointer;
        position: relative;
        display: block;
        background: url("../images/menu.png");
        background-repeat: no-repeat;
        background-size: contain;
        width: 48px;
        height: 48px;
    }

    input#nav-menu[type="checkbox"]:checked + label {
        cursor: pointer;
        position: relative;
        display: block;
        background: url("../images/menu_close.png");
        background-repeat: no-repeat;
        background-size: contain;
        width: 48px;
        height: 48px;
    }

    nav {
        margin: 0 auto;
        width: 100%;
        background: #e2b841;
        position: absolute;
        z-index: 1000;
    }

    .nav {
        display: none;
    }

    .tw_logo {
        display: none;
    }

    .nav ul {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding-bottom: 2vh;
        border-bottom: 2vh solid #e12014;
        box-shadow: 0px 6px 6px -3px rgba(0, 0, 0, 0.2);
        z-index: 1000;
    }

    .nav li {
        padding: 20px 10px 20px;
        width: 90%;
        display: flex;
        justify-content: center;
    }

    .nav li + li {
        border-top: 2px dotted #e12014;
    }

    #navi01,
    #navi02,
    #navi03,
    #navi04,
    #navi05 a {
        width: 90%;
        height: 100%;
        display: block;
    }

    .nav li img {
        margin: 0 auto 0;
    }

    #navi01 img {
        max-width: calc(418px * 0.35);
        /*display: none;*/
    }

    #navi02 img {
        max-width: calc(459px * 0.35);
        /*display: none;*/
    }

    #navi03 img {
        max-width: calc(612px * 0.35);
        /*display: none;*/
    }

    #navi04 img {
        max-width: calc(561px * 0.35);
        /*display: none;*/
    }

    #navi05 img {
        max-width: calc(538px * 0.35);
        display: none;
    }

    #mTW img {
        max-width: calc(400px * 0.15);
        /*display: none;*/
    }

    .contentsWidth {
        margin: 0 auto;
        padding: 0 0 30px;
        width: 94%;
    }

}

@media screen and (min-width: 375px) and (max-width: 767px) {

    .contentsWidth {
        margin: 0 auto;
        padding: 0 0 30px;
        width: 90%;
    }

}


@media print,
screen and (min-width: 768px) {

    .pc_none {
        display: none;
    }

    .fLink {
        transition: all 1s ease-out;
    }

    .fLink:hover {
        opacity: 0.5;
    }

    .header-spacer {
        height: 5px;
        background-color: #fff;
    }

    .max-area {
        margin: 0 auto;
        width: 100%;
    }

    .max-area:before {
        content: "";
        display: block;
        position: fixed;
        top: 0;
        left: 0;
        z-index: -1;
        width: 100%;
        height: 100vh;
        background-image: url("../images/maxbg.webp");
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center center;
    }

    .bg-area {
        margin: 0 auto;
        width: 100%;
    }

    .bg-area:before {
        content: "";
        display: block;
        position: fixed;
        top: 0;
        left: 0;
        z-index: -1;
        width: 100%;
        height: 100vh;
        background-image: url("../images/contentsbg.png");
        background-size: auto;
        background-repeat: no-repeat;
        background-position: bottom center;
    }

    header {
        position: sticky;
        top: 0;
        left: 0;
        z-index: 100;
    }

    .header-logo-area {
        margin: 0 auto 0;
        width: 100%;
        background: #e12014;
    }

    .header-logo-inner {
        margin: 0 auto;
        padding: 15px 15px;
        max-width: 1000px;
        height: 75px;
    }

    .logo-area {
        display: flex;
        justify-content: space-between;
    }

    .amaguri_logo {
        width: 305px;
        height: 45px;
    }

    .tw_logo {
        width: 45px;
        height: 45px;
    }

    .nav-menu {
        display: none;
    }

    nav {
        margin: 0 auto;
        width: 100%;
        background: #e2b841;
    }

    .nav {
        margin: 0 auto;
        padding: 15px 0;
        max-width: 1000px;
        width: 100%;
    }

    .nav ul {
        padding: 0 0 0;
        display: flex;
        justify-content: space-around;
    }

    .nav li {
        background-color: #e2b841;
        color: #e12014;
        text-align: center;
        align-self: center;
    }

    /*.nav li + li {
        border-left: 2px solid #e12014;
        text-decoration: none;
    }*/

    #navi01 {
        /*max-width: calc(418px * 0.35);*/
        padding: 0 2% 0;
        /*border-left: 2px solid #e12014;
        text-decoration: none;*/
        /*display: none;*/
    }

    #navi02 {
        /*max-width: calc(459px * 0.35);*/
        padding: 0 2% 0;
        border-left: 2px solid #e12014;
        text-decoration: none;
        /*display: none;*/
    }

    #navi03 {
        /*max-width: calc(612px * 0.35);*/
        padding: 0 2% 0;
        border-left: 2px solid #e12014;
        text-decoration: none;
        /*display: none;*/
    }

    #navi04 {
        /*max-width: calc(561px * 0.35);*/
        padding: 0 2% 0;
        border-left: 2px solid #e12014;
        text-decoration: none;
        /*display: none;*/
    }

    #navi05 {
        /*max-width: calc(538px * 0.35);*/
        padding: 0 2% 0;
        border-left: 2px solid #e12014;
        text-decoration: none;
        display: none;
    }

    input#nav-menu[type="checkbox"] {
        display: none;
    }

    .contentsWidth {
        margin: 0 auto;
        padding: 0 0 60px;
        width: 100%;
        max-width: 1200px;
    }

}