@charset "utf-8";

/* common  */
#op_228 {
    background: #000;
    color: #ffffff;
    font-family: 'Noto Serif JP', serif;
    font-weight: normal;
    /* font-size: 100%; */
    font-size: 1vw;
    line-height: 2.4;
    letter-spacing: 0.2rem;
}
section {
    background: #000;
    width: 96%;
    margin: 0 auto;
}
aside {
    background: #000;
}
.note { font-size: 85.7%;} /* or 78.6% */
h1, h2, h3, h4, h5, h6 { font-weight: normal; }
ul, li { list-style: none;}
.buru {
    display: inline-block;
    animation: hurueru .1s  infinite;
}
@keyframes hurueru {
    0% {transform: translate(0px, 0px) rotateZ(0deg)}
    25% {transform: translate(1px, 2px) rotateZ(1deg)}
    50% {transform: translate(0px, 2px) rotateZ(0deg)}
    75% {transform: translate(2px, 0px) rotateZ(-1deg)}
    100% {transform: translate(0px, 0px) rotateZ(0deg)}
}
.buru_txt {
    display: block;
    animation: hurueru .1s  infinite;
}
@keyframes hurueru {
    0% {transform: translate(0px, 0px) rotateZ(0deg)}
    25% {transform: translate(2px, 1px) rotateZ(1deg)}
    50% {transform: translate(0px, 4px) rotateZ(0deg)}
    75% {transform: translate(4px, 0px) rotateZ(-1deg)}
    100% {transform: translate(0px, 0px) rotateZ(0deg)}
}
/* mv */
.mv_bg {
    /* background-repeat: no-repeat; */
    /* background-size: cover; */
    /* position: relative; */
    padding: 0 0 11.6%;
}
.mv_headline {
    margin: 0 auto;
    max-width: 100%;
}

/* intro */
.attention {
    padding-left: 6.4%;
    background-image: url("../img/ic_attention.png");
    background-repeat: no-repeat;
    background-size: 8%;
    background-position: left center;
    display: block;
    width: 36%;
    margin: 0 auto;
}
.attention span {
    color: #ffed00;
}
.intro_bg {
    background-image:
        url("../img/intro_signboard.gif"),
        url("../img/intro_facade.gif");
    background-position: left 4% top 98%, left 80% top 32%;
    background-size: 24%,64%;
    background-repeat: no-repeat, no-repeat;
    position: relative;
    width: 72%;
    margin: 0 auto;
    padding: 0 0 52%;
}
.intro_headline {
    margin: 0 auto;
    max-width: 50%;
    position: absolute;
    top: 32%;
    left: -1.6%;
}
.intro_txt_01 {
    position: absolute;
    top: 24%;
    left: 0;
    z-index: 1;
}
.intro_txt_02 {
    position: absolute;
    top: 67%;
    left: 33%;
    font-size: 1.0vw;
}

/* f1 */
#f1 {
    position: relative;
    padding: 0 0 16%;
}
.f1_bg {
    background-image: url("../img/f1_bg_main-street.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    padding: 24% 0;
}
.f1_headline {
    margin: 0 auto;
    max-width: 32%;
    position: absolute;
    top: 36%;
    left: 36%;
}
.ic_f1 {
    max-width: 28%;
    position: absolute;
    top: -8%;
    right: 10%;
}
.f1_txt_01 {
    text-align: center;
    margin: 3.2% auto;
}
.f1_list {
    width: 60%;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
}
.f1_list li {
    width: 30%;
    height: 50%;
    overflow: hidden;
}
.f1_list li a {
    text-decoration: none;
    display: block;
    height: 172px;
    color: #fff;
    text-align: center;
    line-height: 1.8;
}
.f1_list li p {
    text-align: center;
    color: #fff;
    line-height: 1.8;
    font-size: 1vw;
    margin: 0 auto;
    padding: 2%;
    display: block;
}
.btn_f1_list-01 {
    background-image: url("../img/f1_list_darts.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-color: rgba(0,0,0,0.7);
    background-blend-mode: color;
    padding: 4.2em 0 0;
}
.btn_f1_list-02 {
    background-image: url("../img/f1_list_mirai.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-color: rgba(0,0,0,0.7);
    background-blend-mode: color;
    padding: 3.6em 0 0;
}
.btn_f1_list-03 {
    background-image: url("../img/f1_list_lenapoli.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-color: rgba(0,0,0,0.7);
    background-blend-mode: color;
    padding: 3.0em 0 0;
}
    .btn_f1_list-01:hover,
    .btn_f1_list-02:hover,
    .btn_f1_list-03:hover {
        background-color: rgba(0,0,0,0);
        transform: scale(1.2);
        transition-duration: 0.3s;
        }
.f1_txt_02 {
    text-align: center;
    margin: 5.6% 0;
}
.f1_bg_cyberpunk {
    background-image: url("../img/f1_bg_cyberpunk.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    padding: 8% 0;
}
.f1_headline2 {
    margin: 0% auto 0;
    max-width: 50%;
    text-align: center;
    font-size: 1.6vw;
}
.f1_headline2 img {
    margin: 2.4% auto;
}

/* f2 */
.f2_bg {
    background-image: url("../img/f2_stairs.jpg"),/* ドリンクましん */ url("../img/f2_passage.jpg");
    background-position: left 7.2% top 88%, left 94% top;
    background-repeat: no-repeat, no-repeat;
    background-size: 20%,72%;
    position: relative;
    margin: 0 auto;
    padding: 48% 0 0;
    width: 78%;
}
.f2_headline {
    max-width: 48%;
    position: absolute;
    top: 18%;
    left: 4%;
    margin: 0;
    padding: 0;
}
.ic_f2 {
    max-width: 28%;
    position: absolute;
    top: -16%;
    left: 4%;
}
.f2_txt_01 {
    max-width: 46%;
    position: absolute;
    top: 30%;
    left: 5.6%;
}
.f2_txt_02 {
    max-width: 70%;
    position: absolute;
    top: 82%;
    left: 30%;
}
.f2_bg_02 {
    position: relative;
    width: 64%;
    /* height: 1160px; */
    margin: 8% auto 0;
    padding: 80% 0 0;
}
.f2_txt_03 {
    position: absolute;
    max-width: 60%;
    left: 5.6%;
    top: 0%;
    z-index: 1;
}
.f2_txt_04 {
    max-width: 22%;
    position: absolute;
    top: 50%;
    left: 6%;
}
.f2_img_03 {
    max-width: 22%;
    position: absolute;
    top: 12.8%;
    left: 5.6%;
}
.f2_img_04 {
    max-width: 100%;
    position: absolute;
    top: -1.2%;
    left: 30%;
}
.f2_img_05 {
    max-width: 100%;
    position: absolute;
    top: 40%;
    left: 30%;
}

/* f3 */
#f3 {
    padding: 0 0 12%;
}
.f3_bg {
    background-image: url("../img/f3_bg_passage.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    /* height: 610px; */
    padding: 20% 0;
}
.ic_f3 {
    max-width: 28%;
    position: absolute;
    top: 0%;
    left: 36%;
    /* width: 28%; */
}
.f3_txt_01 {
    width: 29%;
    position: absolute;
    top: 48%;
    left: 38%;
}





/* outro */
#outro {
    padding: 0 0 6%;
}
.outro_bg {
    background-image: url("../img/outro_bg_passage.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    padding: 8.0% 0;
}
.outro_headline {
    margin: 0 auto;
    max-width: 60%;
    /* padding: 140px 0 0; */
}
.outro_txt_01 {
    text-align: center;
    margin: 0.8% auto 0;
}
.outro_list {
    width: 48%;
    margin: 4.0% auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    padding: 0;
}
.outro_list li {
    width: 48%;
    text-align: center;
}
.outro_list a {
    color: #fff;
    font-size: 1.0vw;
    text-decoration: none;
    display: block;
    background: rgb(0,79,167);
    background: linear-gradient(113deg, rgba(0,79,167,1) 16%, rgba(131,34,137,1) 83%);
    border-radius: 2px;
    padding: 0.8em;
}
.outro_list a:hover {
    text-decoration: none;
}


/* room */
#room {
    font-family: 'Oswald', sans-serif;
    letter-spacing: 0.10em;
    padding: 6.4% 5%;
    margin: 0 auto;
    background-image: url("../img/bg_room.jpg");
    background-color: rgba(0,0,0,0.5);
    background-blend-mode: overlay;
    background-size: cover;
    }
.room_headline {
    text-align: center;
    font-size: 490.5%;
    padding-bottom: 1.6%;
    margin: 0 auto;
    color: #fff;
    letter-spacing: 0.4rem;
}
.room_list {
	width: 100%;
	margin: 0 auto;
	display: flex;
	justify-content: space-between;
	list-style: none;
	padding: 0;
}
.room_list_item {
	position: relative;
	width: 31.2%;
	margin-bottom: 4%;
	margin-top: 2.8%;
	background: #000;
	padding-bottom: 4.8%;
}
.room_list_item img {
    border-radius: 4px;
}
.room_list_box {
	padding: 0 1.6em 0;
}
.room_list_item_ttl {
	font-size: 1vw;
	color: #edf0f9;
}
.room_list_item_room-num {
	font-size: 85.7%;
	font-weight: bold;
	font-family: arial;
	color: #a5acd8;
}
.room_list_item_txt {
	font-size: 0.64vw;
	line-height: 1.83;
	color: #edf0f9;
}
.room_list_facility {
	list-style: none;
    display: flex;
    flex-wrap: wrap;
    padding: 0;
}
.room_list_facility li {
    margin: 0 1.6% 0 0;
    padding: 0.4% 2.4%;
    letter-spacing: 0;
    font-size: 78.6%;
    text-align: center;
    color: #a5acff;
    background: #1a1a1a;
}
.room_list_btn a {
	display: block;
	background: #832289;
	margin: 30% 0 0;
	padding: 4% 0 0 0;
	width: 16%;
	height: 14%;
	border-radius: 50%;
	position: absolute;
	top: 24%;
	right: 2%;
	font-size: 0.72vw;
	text-decoration: none;
	text-align: center;
	letter-spacing: 0.1em;
	color: #fff;
	transition: all 0.3s;
}
.room_list_btn a:hover {
	color: #832289;
	background: #fff;
}
#room .swiper-pagination-bullet {
    background: #fff;
}


/* pickup */
#pickup {
    /* background-image: url("../img/pickup_bg_main-street.jpg"); */
    background-repeat: no-repeat;
    background-size: cover;
    background-color: rgba(0,0,0,0.7);
    background-blend-mode: color;
    font-family: 'Oswald', sans-serif;
    letter-spacing: 0.2em;
    padding: 6.4% 12%;
    margin: 0 auto;
    }
.pickup_headline {
    text-align: center;
    font-size: 490.5%;
    padding-bottom: 1.6%;
    margin: 0 auto;
    color: #fff;
    letter-spacing: 0.4rem;
}
.pickup_list {
    width: 100%;
    margin: 4% auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    list-style: none;
    padding: 0;
}
.pickup_list_item {
	width: 31.2%;
}
.pickup_list_item_sizeL {
    width: 100%;
    padding: 0 1.2%;
    margin: 0 auto 2.4em;
}


/* recruit */
#recruit {
    position: relative;
    background-image: url("../img/bg_recruit.png");
    background-repeat: no-repeat;
    background-size: cover;
    background-blend-mode: color;
    font-family: 'Oswald', sans-serif;
    letter-spacing: 0.2em;
    padding: 38% 12%;
    margin: 0 auto;
}
.recruit_headline {
    text-align: center;
    font-size: 9vw;
    padding-bottom: 1.6%;
    margin: 0 auto;
    color: #fff;
    letter-spacing: 0.4rem;
}
.recruit_text {
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
}
.btn_recruit {
    color: #fff;
    font-family: "Times New Roman", "YuMincho", "Hiragino Mincho ProN", "Yu Mincho", "MS PMincho", serif;
    border: 1px solid #000;
   background: linear-gradient(
    113deg
    , rgba(0,79,167,1) 16%, rgba(131,34,137,1) 83%);
    display: block;
    text-align: center;
    margin: 0 auto;
    padding: 0.8em;
    font-size: 1.5em;
}
.btn_recruit:link, .btn_recruit:visited, .btn_recruit:hover, .btn_recruit:active, .btn_recruit:focus {
    color: #fff;
}


/* ここまで */





/* ==============================================================
 Less than TABLET
================================================================= */
@media screen and (max-width: 1024px) {
    /* common  */
    #op_228 {
        font-size: 3.2vw;
    }
    .note {
        font-size: 2.4vw;
    }
    .pcNone { display:block !important; }
	.spNone { display:none !important; }


    /* intro */
    .attention {
        padding-left: 3.6%;
        width: 74%;
        margin: 0 auto 12%;
        text-align: center;
    }
    .attention span {
        color: #ffed00;
    }
    .intro_bg {
        background-image:none;
        position: relative;
        width: 86%;
        margin: 0 auto;
        padding: 0 0 52%;
    }
    .intro_headline {
        margin: 0 auto 4%;
        max-width: 100%;
        position: static;
        /* top: 46.0%; */
        /* left: -1.6%; */
    }
    .intro_txt_01 {
        position: static;
        top: 32%;
        left: 0;
        /* z-index: 1; */
        /* font-size: 1.0vw; */
    }
    .intro_txt_02 {
        position: static;
        /* top: 67%; */
        /* left: 33%; */
        font-size: 3.6vw;
        background-image: url("../img/intro_signboard.gif");
        background-repeat: no-repeat;
        background-position: right -40% top 10%;
        background-size: 72%;
        margin: 8% 0 0;
        padding-right: 32%;
    }

    /* f1 */
    .f1_bg {
        background-image: url("../img/f1_bg_main-street_sp.jpg");
        padding: 24% 0 66%;
    }
    .f1_headline {
        max-width: 80%;
        position: static;
    }
    .ic_f1 {
        max-width: 48%;
        top: -16%;
        right: 0;
    }
    .f1_txt_01 {
        text-align: left;
        margin: 6.4% auto;
        width: 86%;
    }
    .f1_list {
        width: 86%;
        padding: 0;
    }
    .f1_list li a {
        height: auto;
    }
    .f1_list li p {
        font-size: 2.4vw;
    }
    .btn_f1_list-01 {
        background-image: url("../img/f1_list_darts_sp.jpg");
        background-size: cover;
        padding: 2.8em 0 7.4em;
    }
    .btn_f1_list-02 {
        background-image: url("../img/f1_list_mirai_sp.jpg");
        background-size: cover;
        padding: 2.8em 0 7.4em;
    }
    .btn_f1_list-03 {
        background-image: url("../img/f1_list_lenapoli_sp.jpg");
        padding: 2.8em 0 4.8em;
    }
    .f1_bg_cyberpunk {
        background-size: cover;
        background-position: center;
        padding: 16% 0;
    }
    .f1_headline2 {
        max-width: 86%;
        font-size: 3.6vw;
    }
    .f1_headline2 img {
        max-width: 80%;
    }

    /* f2 */
    .f2_bg {
        background-image: url("../img/f2_stairs.jpg"),/* ドリンクましん */ url("../img/f2_passage.jpg");
        background-position: right 0% top 22%, left 48% top 78%;
        background-repeat: no-repeat, no-repeat;
        background-size: 62%,120%;
        position: relative;
        margin: 0 auto;
        padding: 240% 0 0;
        width: 100%;
    }
    .f2_headline {
        max-width: 78%;
        position: absolute;
        top: 18%;
        left: 2%;
        margin: 0;
        padding: 0;
    }
    .ic_f2 {
        max-width: 48%;
        position: absolute;
        top: 4%;
        left: 3%;
    }
    .f2_txt_01 {
        max-width: 46%;
        position: absolute;
        top: 24%;
        left: 5.6%;
    }
    .f2_txt_02 {
        max-width: 90%;
        position: absolute;
        top: 88%;
        left: 5.6%;
    }
    .f2_bg_02 {
        position: relative;
        width: 100%;
        /* height: 1160px; */
        margin: 20% auto 0;
        padding: 280% 0 0;
    }
    .f2_txt_03 {
        position: absolute;
        max-width: 58%;
        left: 5.6%;
        top: 29.6%;
        z-index: 1;
    }
    .f2_txt_04 {
        max-width: 90%;
        position: absolute;
        top: 78%;
        left: 6%;
    }
    .f2_img_03 {
        max-width: 42%;
        position: absolute;
        top: 30%;
        left: unset;
        right: 6.4%;
    }
    .f2_img_04 {
        width: 100%;
        position: absolute;
        top: 0%;
        left: 0;
    }
    .f2_img_05 {
        width: 100%;
        position: absolute;
        top: 52%;
        left: 0;
    }


    /* f3 */
    #f3 {
        padding: 0 0 20%;
    }
    .f3_bg {
        background-image: url("../img/f3_bg_passage_sp.jpg");
        background-size: contain;
        padding: 60% 0 0;
    }
    .ic_f3 {
        max-width: 48%;
        text-align: right;
        top: -18%;
        left: unset;
        right: 0;
    }
    .f3_txt_01 {
        width: 86%;
        position: static;
        margin: 0 auto;
    }
    /* outro */
    #outro {
        padding: 0 0 20%;
    }
    .outro_bg {
        background-position: center;
        padding: 12% 0;
    }
    .outro_headline {
        max-width: 80%;
    }
    .outro_list {
        width: 64%;
        margin: 8% auto;
    }
    .outro_list li {
        width: 100%;
        margin: 4% auto;
    }
    .outro_list a {
        font-size: 2.8vw;
    }


    /* room */
    #room {
        background-size: contain;
        padding: 20% 0;
    }
    .room_headline {
        font-size: 9.6vw;
        margin: 0 auto 4%;
    }
    .room_list_item_ttl {
        font-size: 3.6vw;
        margin: 6.4% 0 5.6%;
    }
    .room_list_item_ttl {
        font-size: 3.6vw;
        margin: 6.4% 0 5.6%;
    }
    .room_list_item_txt {
        font-size: 2.8vw;
        line-height: 2.0;
    }
    .room_list_facility {
        margin: 5.6% 0;
    }
    .room_list_facility li {
        font-size: 2.8vw;
    }
    .room_list_btn {
        width: 20%;
        height: 16%;
        top: 46%;
        right: 2%;
        font-size: 2.4vw;
    }
    .room_list_btn a {
        font-size: 2.4vw;
    }
    .swiper-container-horizontal>.swiper-pagination-bullets,
    .swiper-pagination-custom, .swiper-pagination-fraction {
        bottom: -10px !important;
    }
    /* pickup */
    #pickup {
        padding: 20% 12%;
    }
    .pickup_headline {
        font-size: 9.6vw;
    }
    .pickup_list_item {
        width: 100%;
        margin: 1.6% auto;
    }
    .pickup_list_item img {
        border-radius: 2px;
    }
    .pickup_list_item_sizeL {
        margin: 0 auto 0.4em;
    }
    /* recruit */
    #recruit {
        background-image: url("../img/bg_recruit_sp.png");
    }
    .recruit_headline {
        font-size: 10vw;
    }
    .btn_recruit{
        font-size: 2vw;
    }
}
/* ==============================================================
 Less than SP-LANDSCAPE
================================================================= */
@media screen and (max-width:568px) {
}
/* ==============================================================
 SP-LANDSCAPE
================================================================= */
@media screen and (min-width:480px) and (max-width:767px) {
}
/* ==============================================================
 SP-PORTRAIT
================================================================= */
@media screen and (min-width:0px) and (max-width:479px) {
}
/* ==============================================================
 Less than SP-PORTRAIT
================================================================= */
@media screen and (max-width:479px) {
}

/* ==============================================================
 Less than SP-PORTRAIT / iPhone5
================================================================= */
@media screen and (max-width:320px) {
}