@charset "utf-8";

@media only screen and (min-width: 0px) and (max-width: 1200px) {

html {
    font-size: 0.8333333333333334vw;
}
#header ul.tab {
    right: 0;
}

}


@media only screen and (min-width: 0px) and (max-width: 750px) {

html {
    font-size: 1.3333333333333335vw;
}
body {
    padding-top: 12.2rem;
}
.pc {
    display: none;
}
.sp {
    display: block;
}

/* ────────────────────── *
 *                                              *
 * ヘッダー                                     *
 *                                              *
 * ────────────────────── */

#header {
    background: #fff;
    padding: 3.0rem;
    position: fixed;
    top: 0;
}
#header .logo {
    width: 46.0rem;
}
#header ul.tab {
    display: none;
}
#header p#btn-menu {
    font-size: 0;
    background: #fff;
    display: block;
    width: 12.2rem;
    height: 12.2rem;
    position: absolute;
    right: 0;
    top: 0;
    z-index: 10;
}
#header p#btn-menu a {
    outline: none;
}
#header p#btn-menu .menu-trigger,
#header p#btn-menu .menu-trigger span {
    display: inline-block;
    transition: transform 0.5s;
    box-sizing: border-box;
}
#header p#btn-menu .menu-trigger {
    width: 100%;
    height: 100%;
    position: relative;
}
#header p#btn-menu .menu-trigger.active {
    background: #595757;
}
#header p#btn-menu .menu-trigger span {
    background: #000;
    width: 5.4rem;
    height: 0.4rem;
    position: absolute;
    left: 3.4rem;
}
#header p#btn-menu .menu-trigger span:nth-of-type(1) {
    top: 3.8rem;
}
#header p#btn-menu .menu-trigger span:nth-of-type(2) {
    top: 5.9rem;
}
#header p#btn-menu .menu-trigger span:nth-of-type(3) {
    top: 8.0rem;
}
#header p#btn-menu .menu-trigger.active span:nth-of-type(1) {
    background: #fff;
    transform: translateY(2.05rem) rotate(-315deg);
}
#header p#btn-menu .menu-trigger.active span:nth-of-type(2) {
    opacity: 0;
}
#header p#btn-menu .menu-trigger.active span:nth-of-type(3) {
    background: #fff;
    transform: translateY(-2.05rem) rotate(315deg);
}
p#btn-member {
    width: 20.0rem;
    position: absolute;
    right: 2.5rem;
    top: auto;
    bottom: 2.5rem;
}
p#btn-member img {
    width: 100%;
}

/* ────────────────────── *
 *                                              *
 * グロナビ                                     *
 *                                              *
 * ────────────────────── */

#gnavi {
    color: #fff;
    width: 100%;
    height: calc(100vh - 12.2rem);
    padding-left: 4.5rem;
    box-sizing: border-box;
    position: fixed;
    left: 0;
    top: 12.2rem;
    z-index: 1002;
    opacity: 0;
    visibility: hidden;
    transition: all .5s;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}
#gnavi.open {
    opacity: 1;
    visibility: visible;
}
#gnavi:before {
    content: "";
    background: rgba(25, 33, 40, 0.9);
    mix-blend-mode: multiply;
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    z-index: -1;
}
#gnavi ul {
    width: 52.0rem;
}
#gnavi ul li {
    margin-bottom: 5.0rem;
    position: relative;
    white-space: nowrap;
}
#gnavi ul li:last-child {
    margin-bottom: 0;
}
#gnavi ul li.disabled {
    opacity: 0.5;
}
#gnavi ul li a {
    color: #fff;
    display: block;
}
#gnavi ul li.current a {
    color: #00a7e3;
}
#gnavi ul li.current:before {
    content: "";
    background-image: url('data:image/svg+xml;charset=utf8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%3Csvg%20version%3D%221.1%22%20id%3D%22%E3%83%AC%E3%82%A4%E3%83%A4%E3%83%BC_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20x%3D%220px%22%20y%3D%220px%22%20viewBox%3D%220%200%2032%2032%22%20style%3D%22enable-background%3Anew%200%200%2032%2032%3B%22%20xml%3Aspace%3D%22preserve%22%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%20.st0%7Bfill%3Anone%3B%7D%20.st1%7Bfill%3A%2300A6E3%3B%7D%3C%2Fstyle%3E%3Cpolygon%20class%3D%22st0%22%20points%3D%220%2C6.7%200%2C25.3%2012.6%2C16%20%22%2F%3E%3Cpolygon%20class%3D%22st1%22%20points%3D%2212.6%2C16%200%2C25.3%200%2C29.4%2018.1%2C16%200%2C2.6%200%2C6.7%20%22%2F%3E%3C%2Fsvg%3E');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    width: 3.8rem;
    height: 3.8rem;
    position: absolute;
    left: -4.5rem;
    top: 0;
}
#gnavi ul li .en {
    font-family: "Cinzel", serif;
    font-size: 4.0rem;
}
#gnavi ul li .ja {
    font-size: 2.4rem;
    display: block;
    padding-top: 1.0rem;
}

/* ────────────────────── *
 *                                              *
 * タブ分け                                     *
 *                                              *
 * ────────────────────── */

ul.tab {
    font-size: 1.5rem;
    color: #fff;
    width: 100%;
    display: none;
}

/* ────────────────────── *
 *                                              *
 * フッター                                     *
 *                                              *
 * ────────────────────── */

#footer {
    padding: 4.0rem 0 2.0rem;
}
#footer .inner {
    width: 70.0rem;
    display: block;
}
#footer .inner p.logo {
    width: 41.4rem;
    margin: 0 auto 3.5rem;
}
#footer .inner p.logo img {
    width: 100%;
}
#footer .inner #external {
    text-align: center;
    width: 100%;
}
#footer .inner #external ul {
    font-size: 2.4rem;
    margin-bottom: 3.0rem;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}
#footer .inner #external ul li {
    margin-left: 4.0rem;
}
#footer .inner #external ul li a {
    padding-right: 2.5rem;
}
#footer .inner #external ul li a:after {
    width: 2.0rem;
    height: 2.0rem;
}
#footer .inner #external small#copyright {
    font-size: 2.4rem;
    transform: scale(0.75);
}

}