@charset "utf-8";

/* CSS Document */


/*
color
#FF2B2B アクセントカラー
#000000 メインカラー
#353535 ~ #0B0B0B ベースカラー

デスクトップファーストのレイアウト
~ 1300px => PC
1300px ~ 1025px => small PC or iPad Pro
1024px ~ 769px => iPad
768px ~ 481px => smartphone landscape
480px ~ => smartphone portrait

@media(max-width:1300px) {
}
@media(max-width:1024px) {
}
@media(max-width:768px) {
}
@media(max-width:480px) {
}
*/


/******************************************　すべて　*************************************************/

body {
    width: 100%;
    height: 100%;
}

.container-pagesize1 {
    width: 100%;
    /*height: 1410px;*/
    height: 100%;
    /*background-image: url('../images/smartphone-bg1.png');*/
    background: linear-gradient(80deg, #353535, #0B0B0B);
    background-size: 100% 100%;
    margin: 0 auto;
    position: relative;
    box-sizing: border-box;
    scroll-behavior: smooth;
    overflow: scroll;
}

.container-pagesize1::-webkit-scrollbar {
    width: 0px !important;
    height: 0px !important;
}

.PC-contents {
    display: none !important;
}

.mouse-noevent {
    pointer-events: none;
}

@media(min-width:480px) {
    .hide480 {
        display: none !important;
    }
}

@media(min-width:768px) {
    .hide768 {
        display: none !important;
    }
}

@media(min-width:1024px) {
    .hide1024 {
        display: none !important;
    }
}

@media(min-width:1300px) {
    .hide1300 {
        display: none !important;
    }
}

@media(min-width:1400px) {
    .hide1400 {
        display: none !important;
    }
}

@media(min-width:1600px) {
    .hide1600 {
        display: none !important;
    }
}

.show480,
.show768,
.show1024,
.show1300,
.show1400,
.show1600 {
    display: initial;
}

@media(max-width:480px) {
    .show480 {
        display: none !important;
    }
}

@media(max-width:768px) {
    .show768 {
        display: none !important;
    }
}

@media(max-width:1024px) {
    .show1024 {
        display: none !important;
    }
}

@media(max-width:1300px) {
    .show1300 {
        display: none !important;
    }
}

@media(max-width:1400px) {
    .show1400 {
        display: none !important;
    }
}

@media(max-width:1600px) {
    .show1600 {
        display: none !important;
    }
}


/* media width */

@media(max-width:480px) {
    .widthmax480 {
        width: 100% !important;
    }
}

@media(max-width:768px) {
    .widthmax768 {
        width: 100% !important;
    }
}

@media(max-width:1024px) {
    .widthmax1024 {
        width: 100% !important;
    }
}

@media(max-width:1300px) {
    .widthmax1300 {
        width: 100% !important;
    }
}


/* keyframes text-show-1 */

.animated[data-animate=text-show-1] {
    color: transparent;
    overflow-x: hidden;
    overflow-y: visible;
    position: relative;
}

.animated[data-animate=text-show-1]::before {
    content: "";
    width: 100%;
    height: 100%;
    background: #fff;
    position: absolute;
    top: 0;
    left: -100%;
}

@keyframes text-show-1 {
    10%,
    50% {
        color: transparent;
    }
    51%,
    100% {
        color: #fff;
    }
}

@keyframes text-show-1b {
    40%,
    60% {
        left: 0%;
    }
    100% {
        left: 100%;
    }
}

.animated[data-animate=text-show-1].text-show-1 {
    -webkit-animation: text-show-1 .9s 0s 1 normal forwards;
    animation: title-show1 .9s 0s 1 normal forwards;
}

.animated[data-animate=text-show-1].text-show-1::before {
    -webkit-animation: text-show-1b .9s 0s 1 normal forwards;
    animation: title-show2 .9s 0s 1 normal forwards;
}


/* keyframes slide-fadein-rl */

.animated[data-animate=slide-fadein-rl] {
    opacity: 0;
    -webkit-transform: translate(70px, 0px);
    transform: translate(70px, 0px);
}

.animated[data-animate=slide-fadein-rl].slide-fadein-rl {
    opacity: 1;
    -webkit-transform: translate(0px, 0px);
    transform: translate(0px, 0px);
    -webkit-transition: .5s cubic-bezier(0, .6, .09, .66);
    transition: .5s cubic-bezier(0, .6, .09, .66);
}


/* keyframes slide-fadein-lr */

.animated[data-animate=slide-fadein-lr] {
    opacity: 0;
    -webkit-transform: translate(-70px, 0px);
    transform: translate(-70px, 0px);
}

.animated[data-animate=slide-fadein-lr].slide-fadein-lr {
    opacity: 1;
    -webkit-transform: translate(0px, 0px);
    transform: translate(0px, 0px);
    -webkit-transition: .5s cubic-bezier(0, .6, .09, .66);
    transition: .5s cubic-bezier(0, .6, .09, .66);
}


/* keyframes slide-fadein-bt */

.animated[data-animate=slide-fadein-bt] {
    opacity: 0;
    -webkit-transform: translate(0px, 70px);
    transform: translate(0px, 70px);
}

.animated[data-animate=slide-fadein-bt].slide-fadein-bt {
    opacity: 1;
    -webkit-transform: translate(0px, 0px);
    transform: translate(0px, 0px);
    -webkit-transition: .5s cubic-bezier(0, .6, .09, .66);
    transition: .5s cubic-bezier(0, .6, .09, .66);
}


/* keyframes slide-fadein-tb */

.animated[data-animate=slide-fadein-tb] {
    opacity: 0;
    -webkit-transform: translate(0px, -70px);
    transform: translate(0px, -70px);
}

.animated[data-animate=slide-fadein-tb].slide-fadein-tb {
    opacity: 1;
    -webkit-transform: translate(0px, 0px);
    transform: translate(0px, 0px);
    -webkit-transition: .5s cubic-bezier(0, .6, .09, .66);
    transition: .5s cubic-bezier(0, .6, .09, .66);
}


/* keyframes slide-out-lr */

.animated[data-animate=slide-out-lr] {
    -webkit-transform: translate(0px, 0px);
    transform: translate(0px, 0px);
}

.animated[data-animate=slide-out-lr].slide-out-lr {
    -webkit-transform: translate(100%, 0px);
    transform: translate(100%, 0px);
    -webkit-transition: .7s cubic-bezier(0, .6, .09, .66);
    transition: .7s cubic-bezier(0, .6, .09, .66);
}


/******************************************* トップページ ********************************************/

.top-container {
    width: 100%;
    height: auto;
    color: #fff;
    overflow: hidden;
}

.top-container::-webkit-scrollbar {
    width: 0px !important;
    height: 0px !important;
}

.top-header1 {
    width: 100%;
    height: 70px;
    position: fixed;
    top: 0;
    left: 0;
    background: #000;
    z-index: 100;
    box-sizing: border-box;
    padding: 0px 15px;
}

.top-header1 .link1 {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 15px;
    margin: auto 0;
    line-height: 65px;
}

.top-header1 a {
    line-height: 0px;
}

.top-header1 a+a {
    padding: 10px 5px;
}

.top-header1 .hamburger {
    width: 40px;
    height: 18px;
    position: relative;
    padding: 0px;
}

.top-header1 .hamburger span {
    width: 100%;
    height: 4px;
    background: #fff;
    position: absolute;
    left: 0px;
    transition: all .4s;
}

.top-header1 .hamburger span:nth-of-type(1) {
    top: 0px;
}

.top-header1 .hamburger span:nth-of-type(2) {
    bottom: 0px;
}

@keyframes hamburger-s1 {
    0% {
        top: 0px;
        transform: rotate(0deg);
    }
    50% {
        top: 7px;
        transform: rotate(0deg);
    }
    100% {
        top: 7px;
        transform: rotate(45deg);
    }
}

@keyframes hamburger-s1b {
    0% {
        top: 7px;
        transform: rotate(45deg);
    }
    50% {
        top: 7px;
        transform: rotate(0deg);
    }
    100% {
        top: 0px;
        transform: rotate(0deg);
    }
}

@keyframes hamburger-s2 {
    0% {
        bottom: 0px;
        transform: rotate(0deg);
    }
    50% {
        bottom: 7px;
        transform: rotate(0deg);
    }
    100% {
        bottom: 7px;
        transform: rotate(-45deg);
    }
}

@keyframes hamburger-s2b {
    0% {
        bottom: 7px;
        transform: rotate(-45deg);
    }
    50% {
        bottom: 7px;
        transform: rotate(0deg);
    }
    100% {
        bottom: 0px;
        transform: rotate(0deg);
    }
}

.top-header1 .hamburger.deactive span:nth-child(1) {
    animation: hamburger-s1b .4s 0s 1 ease forwards;
}

.top-header1 .hamburger.active span:nth-child(1) {
    animation: hamburger-s1 .4s 0s 1 ease forwards;
}

.top-header1 .hamburger.deactive span:nth-child(2) {
    animation: hamburger-s2b .4s 0s 1 ease forwards;
}

.top-header1 .hamburger.active span:nth-child(2) {
    animation: hamburger-s2 .4s 0s 1 ease forwards;
}

.top-header1 .hamburger-menu {
    position: fixed;
    z-index: 150;
    width: 100%;
    height: 0%;
    background: #000;
    top: 67px;
    left: 0px;
    overflow: hidden;
    -webkit-transition: .8s cubic-bezier(.26, .53, .22, .91);
    transition: .8s cubic-bezier(.26, .53, .22, .91);
}

.top-header1 .hamburger-menu.show {
    height: calc(100% - 67px);
}

.top-header1 .hamburger-menu a {
    width: 100%;
    height: 50px;
    overflow: hidden;
    position: relative;
}

.top-header1 .hamburger-menu span {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 105%;
    left: 0px;
    overflow: hidden;
    -webkit-transition: none;
    transition: none;
}

.top-header1 .hamburger-menu.show a span {
    top: 0%;
    -webkit-transition: .6s .2s cubic-bezier(.26, .53, .22, .91);
    transition: .6s .2s cubic-bezier(.26, .53, .22, .91);
}

.top-header1 .hamburger-menu.show a:nth-child(2) span {
    -webkit-transition: .6s .3s cubic-bezier(.26, .53, .22, .91);
    transition: .6s .3s cubic-bezier(.26, .53, .22, .91);
}

.top-header1 .hamburger-menu.show a:nth-of-type(3) span {
    -webkit-transition: .6s .4s cubic-bezier(.26, .53, .22, .91);
    transition: .6s .4s cubic-bezier(.26, .53, .22, .91);
}

.top-header1 .hamburger-menu.show a:nth-of-type(4) span {
    -webkit-transition: .6s .5s cubic-bezier(.26, .53, .22, .91);
    transition: .6s .5s cubic-bezier(.26, .53, .22, .91);
}

.top-header1 .hamburger-menu.show a:nth-of-type(5) span {
    -webkit-transition: .6s .6s cubic-bezier(.26, .53, .22, .91);
    transition: .6s .6s cubic-bezier(.26, .53, .22, .91);
}

.top-header1 .hamburger-menu.show a:nth-of-type(6) span {
    -webkit-transition: .6s .7s cubic-bezier(.26, .53, .22, .91);
    transition: .6s .7s cubic-bezier(.26, .53, .22, .91);
}

.top-msg-reserved {
    position: fixed;
    top: 70px;
    background: #ff2b2b;
    width: 100%;
    padding: 0px 0px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    left: 0;
    z-index: 40;
    white-space: nowrap;
    overflow-y: scroll;
}

.top-msg-reserved span {
    padding: 10px 3px;
    display: inline-block;
}

.top-header2 {
    width: 100%;
    height: 70px;
    position: fixed;
    bottom: 0;
    left: 0;
    background: #000;
    z-index: 100;
}

@media (max-width:480px) {
    .top-header2 {
        justify-content: flex-start;
    }
}

.top-header2 .link1 {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 15px;
    margin: auto 0;
    line-height: 55px;
    background: none;
    border: none;
}

.top-header2 .modal-login-con {
    width: 95%;
    max-width: 500px;
    background: #000;
    padding: 40px 20px 40px 20px;
    -webkit-box-shadow: 0px 0px 5px 0px #fff;
    box-shadow: 0px 0px 5px 0px #fff;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

.top-header2 .QRcode-modal {
    width: 100%;
    max-width: 250px;
    height: auto;
    max-height: 300px;
    background: #000;
    padding: 10px;
    box-sizing: border-box;
    position: absolute;
    bottom: -300px;
    right: 10px;
    opacity: 0;
    -webkit-transition: .5s;
    transition: .5s;
}

.top-header2 .QRcode-modal.show {
    bottom: 80px;
    opacity: 1;
}

.top-header2 .QRcode-modal img {
    width: 230px;
    height: 230px;
}

.top-header2 .link2 {
    margin: 0px 30px 0px;
}

@media (max-width:480px) {
    .top-header2 .link2 {
        margin: 0px 15px;
    }
}

.top-header2 .userinfo-modal .sec1 {
    width: 65%;
}

.top-header2 .userinfo-modal .sec2 {
    width: 35%;
}

.top-header2 .userinfo-modal .clientdata-row {
    width: 100%;
}

.top-header2 .userinfo-modal .clientdata-row .div1 {
    width: 30%;
}

.top-header2 .userinfo-modal .clientdata-row .div2 {
    width: 70%;
}

.top-header2 .userinfo-modal .clientdata-row .div2.point {
    width: 100px;
}

.top-header2 .userinfo-modal .sec2 .div1 {
    width: 100%;
    padding: 20px 0px 5px 0px;
}

.top-header2 .userinfo-modal .sec2 .comed-history {
    width: 100%;
    max-height: 200px;
    overflow-y: scroll;
}

@media (max-width:768px) {
    .top-header2 .userinfo-modal .clientdata-row .div1 {
        width: 100%;
        padding: 20px 0px 5px 0px;
    }
    .top-header2 .userinfo-modal .clientdata-row:nth-child(1) .div1 {
        padding: 0px 0px 5px 0px;
    }
    .top-header2 .userinfo-modal .clientdata-row .div2 {
        width: 100%;
    }
    .top-header2 .userinfo-modal .clientdata-row .div2.password {
        justify-content: center !important;
    }
    .top-header2 .userinfo-modal .clientdata-row .div2.point {
        width: 100%;
    }
    .top-header2 .userinfo-modal .sec2 .comed-history {
        width: 100%;
        max-height: none;
        overflow-y: unset;
    }
}

.top-MAIN-sec {
    width: 100%;
    height: 100vh;
    position: relative;
    overflow: hidden;
}

.top-MAIN-sec .loading {
    position: fixed;
    z-index: 1500;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #000;
    overflow: hidden;
    opacity: 1;
    -webkit-transition: opacity 2s 3.9s cubic-bezier(.43, .33, .4, .79), height 0s 5s;
    transition: opacity 2s 3.9s cubic-bezier(.43, .33, .4, .79), height 0s 5s;
}

.top-MAIN-sec.show .loading {
    opacity: 0;
    height: 0%;
}

@keyframes top-loading-span {
    0%,
    20% {
        filter: blur(2px);
        opacity: 0;
    }
    40%,
    60% {
        filter: blur(0);
        opacity: 1;
    }
    75% {
        filter: blur(6px);
        opacity: 0;
    }
}

.top-MAIN-sec .loading span {
    width: 200px;
    height: 220px;
    background: #ffb0b0;
    opacity: 0;
    filter: blur(1px);
}

.top-MAIN-sec.show .loading span {
    -webkit-animation: top-loading-span 5s 0.2s cubic-bezier(.02, .37, .16, .82) forwards;
    animation: top-loading-span 5s 0.2s cubic-bezier(.02, .37, .16, .82) forwards;
}


/* .top-MAIN-sec .title-set {
    opacity: 0;
    -webkit-transform: scale(3);
    transform: scale(3);
    filter: -webkit-blur(7px);
    filter: blur(7px);
    -webkit-transition: transform 3.8s 5s cubic-bezier(.34, .45, .11, 1), filter 3.3s .3s ease, opacity 3.1s 5.5s ease;
    transition: transform 3.8s 5s cubic-bezier(.34, .45, .11, 1), filter 3.3s .3s ease, opacity 3.1s 5.5s ease;
}

.top-MAIN-sec.show .title-set {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
    filter: -webkit-blur(0px);
    filter: blur(0px);
} */

.top-MAIN-sec .title {
    line-height: 127px;
    color: #fff;
}

@media (max-width: 1024px) {
    .top-MAIN-sec .title {
        line-height: 95px;
    }
}

@media (max-width: 768px) {
    .top-MAIN-sec .title {
        line-height: 81px;
    }
}

@media (max-width: 480px) {
    .top-MAIN-sec .title {
        line-height: 62px;
    }
}

@keyframes icon-scroll {
    0%,
    10% {
        height: 0px;
        bottom: 170px;
    }
    30%,
    70% {
        height: 100px;
        bottom: 70px;
    }
    90%,
    100% {
        height: 0px;
        bottom: 70px;
    }
}

.top-MAIN-sec.show .icon-scroll::before {
    content: '';
    width: 0;
    opacity: .7;
    border-right: solid 1px #ffffff;
    border-left: solid 1px #ffffff;
    position: absolute;
    left: 30px;
    -webkit-animation: icon-scroll 7s 8s infinite;
    animation: icon-scroll 7s 8s infinite;
}

@keyframes icon-scroll2 {
    0%,
    35% {
        opacity: 0;
        left: -65px;
    }
    45%,
    60% {
        opacity: .7;
        left: 45px;
    }
    75%,
    100% {
        opacity: 0;
        left: 80px;
    }
}

.top-MAIN-sec .icon-scroll2 {
    color: #fff;
    position: absolute;
    bottom: 90px;
    left: -65px;
    opacity: 0;
}

.top-MAIN-sec.show .icon-scroll2 {
    -webkit-animation: icon-scroll2 7s 8s infinite;
    animation: icon-scroll2 7s 8s infinite;
}

.top-NEWS-sec {
    width: 100%;
    max-width: 1300px;
    margin: 80px auto 0px;
    padding-top: 70px;
    height: auto;
    min-height: 500px;
    background: transparent;
    box-sizing: border-box;
}

@media (max-width:768px) {
    .top-NEWS-sec {
        margin: 30px auto 0px;
        min-height: 300px;
    }
    .top-NEWS-sec .main-label:nth-of-type(1) {
        text-align: center;
    }
}

.top-NEWS-sec .main-label {
    width: 33.33%;
    padding: 0px 30px;
}

.top-NEWS-sec .main-content {
    width: 66.66%;
    padding: 20px 0px;
}

.top-NEWS-sec .content-link {
    border-bottom: solid 1px #bfbfbf;
    margin: 10px 30px 30px 30px;
    position: relative;
    box-sizing: unset;
}

.top-NEWS-sec .content-link::before {
    content: '';
    font-size: 0;
    border-top: solid 1px transparent;
    border-bottom: solid 1px transparent;
    border-left: solid 5px #e62f2f;
    opacity: 0;
    position: absolute;
    top: 50%;
    left: -40px;
    -webkit-transition: .3s cubic-bezier(0, .76, .08, .73);
    transition: .3s cubic-bezier(0, .76, .08, .73);
}

.top-NEWS-sec .content-link:hover::before {
    opacity: 1;
    border-top: solid 3px transparent;
    border-bottom: solid 3px transparent;
    border-left: solid 15px #e62f2f;
    left: -30px;
}

.top-NEWS-sec .content-link::after {
    content: '';
    font-size: 0;
    width: 0%;
    border-bottom: solid 1px #e62f2f;
    position: absolute;
    bottom: -1px;
    left: 0;
    -webkit-transition: .4s cubic-bezier(0, .6, .09, .66);
    transition: .4s cubic-bezier(0, .6, .09, .66);
}

.top-NEWS-sec .content-link:hover::after {
    width: 100%;
}

.top-NEWS-sec .top-message-none {
    text-align: left;
}

@media (max-width:768px) {
    .top-NEWS-sec .top-message-none {
        text-align: center;
    }
}

.top-RESERVATIONSTATUS-sec {
    width: 100%;
    height: auto;
    padding-top: 40px;
}

.top-RESERVATIONSTATUS-sec .main-label {
    width: 100%;
    padding: 30px 0px;
    text-align: center;
}

.top-RESERVATIONSTATUS-sec>.main-content-1 {
    width: 70%;
    height: 240px;
}

.top-RESERVATIONSTATUS-sec>.main-content-2 {
    width: 100%;
    height: auto;
    position: relative;
    padding-bottom: 50px;
    /*background: linear-gradient(360deg, rgb(115, 115, 115), transparent);*/
}

.calendar-con {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
}

.calendar-con .days-header {
    width: 100%;
}

.calendar-con .days-header div {
    width: -webkit-calc(100% / 7);
    width: calc(100% / 7);
    text-align: center;
}

.calendar-con .days-con {
    width: -webkit-calc(100% / 7);
    width: calc(100% / 7);
    padding: 2px;
}

.calendar-con .days-con .days {
    width: 100%;
    padding: 20px 0px 25px;
    background: #000;
    text-align: center;
    position: relative;
    transition: .3s;
    cursor: pointer;
}

.calendar-con .days-con .days span {
    position: absolute;
    bottom: 0px;
    right: 0px;
    left: 0px;
    margin: 0px auto;
}

.calendar-con .days-con .days.today:before {
    content: '';
    position: absolute;
    top: 0px;
    left: 0px;
    width: 0;
    height: 0;
    border: solid 15px transparent;
    border-top: solid 15px #fff;
    border-left: solid 15px #fff;
}

@media (max-width:1024px) {
    .calendar-con .days-con .days.today:before {
        border: solid 12px transparent;
        border-top: solid 12px #fff;
        border-left: solid 12px #fff;
    }
}

@media (max-width:768px) {
    .calendar-con .days-con .days.today:before {
        border: solid 9px transparent;
        border-top: solid 9px #fff;
        border-left: solid 9px #fff;
    }
}

.calendar-con .days-con .days.gray-1 {
    color: rgba(255, 255, 255, 0.27);
}

.calendar-con .days-con .days.gray-2 {
    color: rgba(255, 255, 255, 0.479);
}

.calendar-con .days-con .days:hover {
    background: #2f2f2f;
}

.calendar-con .days-con .days:active {
    transition: none;
    background: #737373;
}

@media (max-width:1024px) {
    .calendar-con .days-con .days:hover {
        background: #000;
    }
    .calendar-con .days-con .days:active {
        transition: none;
        background: #737373;
    }
}

@media (max-width:768px) {
    .calendar-con .days-con .days {
        padding: 13px 0px 17px;
    }
}

.detaildays-con {
    width: 95%;
    max-width: 1300px;
    height: calc(95% - 140px);
    position: fixed;
    top: 0px;
    right: 0px;
    bottom: 0px;
    left: 0px;
    margin: auto;
    background: #000;
    padding: 20px 20px 20px 10px;
    -webkit-box-shadow: 0px 0px 5px 0px #fff;
    box-shadow: 0px 0px 5px 0px #fff;
}

.top-RESERVE-sec .detaildays-con {
    height: calc(95% - 70px);
    top: 70px;
}

@media (max-width:480px) {
    .detaildays-con {
        width: 100%;
        height: calc(100% - 140px);
        padding: 0px;
    }
    .top-RESERVE-sec .detaildays-con {
        width: 100%;
        height: calc(100% - 70px);
        padding: 0px;
    }
}

.detaildays-con .big-label {
    width: 15%;
}

.detaildays {
    width: 85%;
    height: 100%;
    padding: 0px 0px 0px 0px;
    overflow-x: scroll;
    overflow-y: scroll;
    scroll-behavior: smooth;
}

.detaildays-wrapper {
    display: flex;
    width: 2626px;
}

@media (max-width:480px) {
    .detaildays-wrapper {
        width: 1581px;
    }
}

.detaildays .times-column {
    width: auto;
    /*height: 1330px;*/
    height: 585px;
    margin: 0px 0px 0px 0px;
    /*background: linear-gradient(90deg, #858585, #858585);*/
    box-sizing: border-box;
    position: -webkit-sticky;
    position: sticky;
    left: 0px;
    z-index: 40;
    color: #232323;
}

@media (max-width:480px) {
    .detaildays .times-column {
        height: 575px;
    }
}

.detaildays .times-column .header {
    padding: 10px;
    height: 160px;
    text-align: center;
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    left: 0;
    background-color: #000;
    z-index: 50;
}

@media (max-width:480px) {
    .detaildays .times-column .header {
        height: 120px;
    }
}

.detaildays .times-column .times span {
    width: 84px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 3px;
    margin: 1px 0px 1px 0px;
    border: solid 1px rgba(66, 66, 66, 0.41)
}

@media (max-width:480px) {
    .detaildays .times-column .times span {
        width: 54px;
        height: 34px;
    }
}

.detaildays .times-column .times span.hovering {
    background: #424242 !important;
    color: #fff;
}

.detaildays .times-column .times span:nth-child(2n+1) {
    background: rgb(250, 250, 250);
}

.detaildays .times-column .times span:nth-child(4n+1) {
    background: rgb(160, 160, 160);
}

.detaildays .times-column .times span:nth-child(2n) {
    display: none;
}

.detaildays .day-column {
    width: auto;
    /*height: 1330px;*/
    height: 585px;
    margin: 0px 0px 0px 0px;
    background: transparent;
    border-right: solid 1px rgb(202, 202, 202);
    box-sizing: border-box;
    position: relative;
}

@media (max-width:480px) {
    .detaildays .day-column {
        height: 575px;
    }
}

.detaildays .day-column .header {
    padding: 10px;
    height: 160px;
    text-align: center;
    background: #000;
    color: #efefef;
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    border-right: solid 1px rgb(202, 202, 202);
    z-index: 39;
}

.detaildays .day-column .header .close {
    width: 100%;
    height: 200px;
    position: absolute;
    top: 100%;
    left: 0px;
    -ms-writing-mode: tb-rl;
    writing-mode: vertical-rl;
    display: flex;
    align-items: center;
    margin-top: 70px;
}

@media (max-width:480px) {
    .detaildays .day-column .header {
        height: 120px;
    }
}

.detaildays .day-column.hovering .header {
    background: #777777;
}

.detaildays .day-column .days {
    border-right: solid 1px rgb(202, 202, 202);
}

.detaildays .day-column .days span {
    width: 80px;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0px 0px;
    color: #464646;
    cursor: pointer;
}

@media (max-width:480px) {
    .detaildays .day-column .days span {
        width: 50px;
        height: 35px;
    }
}

.detaildays .day-column .days span:nth-child(2n+1) {
    background: rgb(0, 0, 0);
    color: #fff;
}

.detaildays .day-column .days span:nth-child(4n+1) {
    background: #3c3c3c;
    color: #fff;
}

.detaildays .day-column .days span:nth-child(2n) {
    display: none;
}

.detaildays .day-column .days span.hovering {
    background: #e62f2f;
    color: #fff;
}

.detaildays .day-column .days span.hovering:active {
    background: #e59999;
    color: #fff;
}

.detaildays .day-column .days span.close {
    background: #000 !important;
    color: #000 !important;
    user-select: none;
    pointer-events: none;
}

.detaildays .day-column .days span.users-reserve {
    background: #ed462f;
}

.detaildays .day-column .days span.users-reserve::before {
    content: '予約';
}

.top-RESERVATIONSTATUS-sec .book-btnset {
    position: relative;
    width: 100%;
    padding: 170px 0px 250px;
}

@media (max-width:768px) {
    .top-RESERVATIONSTATUS-sec .book-btnset {
        padding: 20px 0px 90px;
    }
}

.top-RESERVATIONSTATUS-sec .btn-book-con {
    width: 100%;
    height: 200px;
    margin: 0 auto;
    cursor: pointer;
    overflow: hidden;
    display: flex;
    border: none;
    position: relative;
    background: transparent;
    -webkit-transition: .3s cubic-bezier(0, .6, .09, .66);
    transition: .3s cubic-bezier(0, .6, .09, .66);
}

@media (max-width:768px) {
    .top-RESERVATIONSTATUS-sec .btn-book-con {
        height: 170px;
    }
}

@media (max-width:480px) {
    .top-RESERVATIONSTATUS-sec .btn-book-con {
        height: 130px;
    }
}

.top-RESERVATIONSTATUS-sec .btn-book {
    width: 100%;
    max-width: 1100px;
    height: 100%;
    margin: 0 auto;
    cursor: pointer;
    display: flex;
    color: #FF2B2B;
    border: none;
    background: transparent;
    padding: 25px;
    -webkit-transition: .3s cubic-bezier(0, .6, .09, .66);
    transition: .3s cubic-bezier(0, .6, .09, .66);
}

@media (max-width:480px) {
    .top-RESERVATIONSTATUS-sec .btn-book {
        font-size: 40px;
        padding: 25px;
    }
}

.top-RESERVATIONSTATUS-sec .btn-book-con .btn-book::before {
    content: "";
    position: absolute;
    top: 0px;
    left: -100%;
    width: 100%;
    height: 100%;
    background: #FF2B2B;
    -webkit-transition: .3s cubic-bezier(0, .6, .09, .66);
    transition: .3s cubic-bezier(0, .6, .09, .66);
}

.top-RESERVATIONSTATUS-sec .btn-book-con:hover .btn-book::before {
    content: "";
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    background: #FF2B2B;
}

.top-RESERVATIONSTATUS-sec .btn-book span {
    z-index: 5;
    -webkit-transition: .4s cubic-bezier(0, .46, .19, .68);
    transition: .4s cubic-bezier(0, .46, .19, .68);
}

.top-RESERVATIONSTATUS-sec .btn-book:hover span {
    color: #fff;
}

.top-ABOUT-sec {
    width: 100%;
    height: auto;
    display: flex;
    align-items: flex-start;
    margin-bottom: 200px;
    padding-top: 40px;
}

@media (max-width:768px) {
    .top-ABOUT-sec {
        margin-bottom: 110px;
    }
}

@media (max-width:480px) {
    .top-ABOUT-sec {
        margin-bottom: 90px;
    }
}

.top-ABOUT-sec .main-label {
    width: 100%;
    padding: 30px 0px 80px;
    text-align: center;
}

@media (max-width:768px) {
    .top-ABOUT-sec .main-label {
        padding: 30px 0px 30px;
    }
}

.top-ABOUT-sec .main-content-1 {
    width: 100%;
    height: auto;
    position: relative;
}

@media (max-width:480px) {
    .top-ABOUT-sec .main-content-1 {
        flex-flow: column;
    }
}

.top-ABOUT-sec .main-content-1 p,
.top-ABOUT-sec .main-content-1 img {
    width: 50%;
    max-width: 650px;
    height: auto;
    padding: 0;
    margin: 0;
    display: flex;
    flex-flow: column;
}

@media (max-width:480px) {
    .top-ABOUT-sec .main-content-1 p,
    .top-ABOUT-sec .main-content-1 img {
        margin-bottom: 20px;
    }
}

.top-MENU-sec {
    width: 100%;
    height: auto;
    margin-bottom: 200px;
    padding-top: 40px;
}

@media (max-width:768px) {
    .top-MENU-sec {
        margin-bottom: 110px;
    }
}

@media (max-width:480px) {
    .top-MENU-sec {
        margin-bottom: 90px;
    }
}

.top-MENU-sec .main-label {
    width: 100%;
    padding: 30px 0px 80px;
    text-align: center;
}

@media (max-width:768px) {
    .top-MENU-sec .main-label {
        padding: 30px 0px 50px;
    }
}

.top-MENU-sec .main-content {
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
}

.top-MENU-sec .div-menu {
    width: 33.33%;
    max-width: 1100px;
    margin: 0px;
    padding: 3px;
    box-sizing: border-box;
}

.top-MENU-sec .div-menu p {
    width: 100%;
    height: auto;
    min-height: 150px;
    margin: 0;
    background: #000;
    position: relative;
    padding: 10px 10px 30px 10px;
    box-sizing: border-box;
}

@media (max-width:480px) {
    .top-MENU-sec .div-menu {
        width: 100%;
    }
    .top-MENU-sec .div-menu p {
        min-height: 60px;
    }
}

.top-MENU-sec .div-menu .price {
    position: absolute;
    bottom: 0;
    right: 0;
    padding: 5px 7px;
}

.top-STAFF-sec {
    width: 100%;
    height: auto;
    margin-bottom: 200px;
    padding-top: 40px;
}

@media (max-width:768px) {
    .top-STAFF-sec {
        margin-bottom: 110px;
    }
}

@media (max-width:480px) {
    .top-STAFF-sec {
        margin-bottom: 90px;
    }
}

.top-STAFF-sec .main-label {
    width: 100%;
    padding: 30px 0px 80px;
    text-align: center;
}

@media (max-width:768px) {
    .top-STAFF-sec .main-label {
        padding: 30px 0px 50px;
    }
}

.top-STAFF-sec .main-content {
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
}

@media (max-width:480px) {
    .top-STAFF-sec .main-content {
        flex-flow: column;
    }
}

.top-STAFF-sec .main-content .name1 {
    line-height: 80px;
}

@media (max-width:768px) {
    .top-STAFF-sec .main-content .name1 {
        line-height: 48px;
    }
}

@media (max-width:480px) {
    .top-STAFF-sec .main-content .name1 {
        line-height: 34px;
    }
}

.top-STAFF-sec .main-content img,
.top-STAFF-sec .main-content p {
    width: 50%;
    max-width: 600px;
    text-align: center;
}

@media (max-width:480px) {
    .top-STAFF-sec .main-content img {
        width: 80%;
    }
    .top-STAFF-sec .main-content p {
        width: 100%;
        padding: 20px 0px;
    }
}

.top-ACCESS-sec {
    width: 100%;
    height: auto;
    margin-bottom: 100px;
    padding-top: 40px;
}

@media (max-width:768px) {
    .top-ACCESS-sec {
        margin-bottom: 20px;
    }
}

.top-ACCESS-sec .main-label {
    width: 100%;
    padding: 30px 0px 10px;
    text-align: center;
}

.top-ACCESS-sec .main-content-1 {
    width: 100%;
    max-width: 1100px;
    padding: 0 0 100px;
    margin: 0 auto;
}

@media (max-width:768px) {
    .top-ACCESS-sec .main-content-1 {
        padding: 0px 0px 50px;
    }
}

.top-ACCESS-sec .main-content-2 {
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
}

.access-maps {
    border: 0;
    height: 500px;
    width: 100%;
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    filter: grayscale(100%);
}

#google-map {
    width: 100%;
    height: 500px;
}

.top-FOOTER-sec {
    width: 100%;
    height: auto;
    position: relative;
    overflow: hidden;
    margin-bottom: 70px;
}

.top-FOOTER-sec .main-content {
    max-width: 1100px;
    width: 100%;
    margin: 0 auto;
    height: 100%;
    position: relative;
    color: #fff;
}

.top-FOOTER-sec .main-content .label {
    width: 100%;
    padding: 60px 0px;
}

@media (max-width:480px) {
    .top-FOOTER-sec .main-content .label {
        padding: 20px 0px;
    }
}

.top-FOOTER-sec .main-content .sitemap-con a {
    width: auto;
}

@media (max-width:480px) {
    .top-FOOTER-sec .main-content .sitemap-con {
        flex-flow: wrap;
    }
    .top-FOOTER-sec .main-content .sitemap-con a {
        width: 30%;
    }
}

.top-FOOTER-sec .share-btns {
    padding: 0px 0px 0px;
    width: 100%;
    box-sizing: border-box;
}

.top-FOOTER-sec .main-content .copyright {
    padding: 150px 0px 30px 0px;
}

@media (max-width:768px) {
    .top-FOOTER-sec .main-content .copyright {
        padding: 100px 0px 50px 0px;
    }
}

.top-FOOTER-sec .image {
    width: 100%;
    -webkit-filter: grayscale(1);
    filter: grayscale(1);
    padding: 160px 20px;
    box-sizing: border-box;
    background: center / cover url('../../barber2/images/store-image3.png') no-repeat;
}


/******************************************* 予約ページ ********************************************/

.top-RESERVE-sec {
    width: 100%;
    height: auto;
    align-items: flex-start;
}

.top-RESERVE-sec .main-label {
    padding: 70px 20px 0px 20px;
    width: 100%;
}

.top-RESERVE-sec .main-label span {
    padding-right: 15px;
}

.top-RESERVE-sec>.main-content-1,
.top-RESERVE-sec>.main-content-2,
.top-RESERVE-sec>.main-content-3 {
    width: 100%;
    max-width: 1024px;
    height: auto;
    margin: 0 auto 50px auto;
    overflow: hidden;
}

.top-RESERVE-sec .menu {
    height: auto;
    width: 100%;
    padding: 4px 4px 0px 4px;
    box-sizing: border-box;
    opacity: 0;
    -webkit-transform: translate(70px, 0px);
    transform: translate(70px, 0px);
}

.top-RESERVE-sec .menu.show {
    opacity: 1;
    -webkit-transform: translate(0px, 0px);
    transform: translate(0px, 0px);
    -webkit-transition: .5s cubic-bezier(0, .6, .09, .66);
    transition: .5s cubic-bezier(0, .6, .09, .66);
}

.top-RESERVE-sec .menu input[type=checkbox] {
    display: none;
}

.top-RESERVE-sec .menu input[type=checkbox]+label {
    width: 100%;
    height: 100%;
    padding: 10px 10px 30px 10px;
    background: #000;
    display: flex;
    box-sizing: border-box;
    flex-flow: column;
    cursor: pointer;
    -webkit-transition: .3s cubic-bezier(0, .6, .09, .66);
    transition: .3s cubic-bezier(0, .6, .09, .66);
    position: relative;
    overflow: hidden;
}

.top-RESERVE-sec .menu input[type=checkbox]+label:hover {
    background: rgba(255, 255, 255, 0.18);
}

.top-RESERVE-sec .menu input[type=checkbox]+label:hover {
    background: rgba(255, 255, 255, 0.18);
}

@media (max-width: 1024px) {
    .top-RESERVE-sec .menu input[type=checkbox]+label:hover {
        background: #000;
    }
}

.top-RESERVE-sec .menu input[type=checkbox]+label i {
    font-style: normal;
    display: flex;
    flex-flow: column;
    z-index: 6;
}

.top-RESERVE-sec .menu input[type=checkbox]+label .price {
    position: absolute;
    bottom: 5px;
    right: 10px;
    z-index: 6;
}

.top-RESERVE-sec .menu input[type=checkbox]+label span {
    padding: 0px 0px 5px 0px;
}

.top-RESERVE-sec .menu input[type=checkbox]+label span::before {
    font-family: 'Font Awesome 5 Free';
    content: '\f0c8';
    margin: 0px 10px 0px 5px;
}

.top-RESERVE-sec .menu input[type=checkbox]+label .bg-1 {
    width: 0;
    height: 0;
    position: absolute;
    top: 35px;
    left: 20px;
    border-radius: 50%;
    background: #fff;
    opacity: .6;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    cursor: pointer;
    z-index: 5;
}

.top-RESERVE-sec .menu input[type=checkbox]:checked+label .bg-1 {
    width: 2200px;
    height: 2200px;
    opacity: .5;
    -webkit-transition: .4s cubic-bezier(.18, .06, .69, .2);
    transition: .4s cubic-bezier(.18, .06, .69, .2);
}

.top-RESERVE-sec .menu input[type=checkbox]:checked+label span::before {
    font-family: 'Font Awesome 5 Free';
    content: '\f14a';
}

.top-RESERVE-sec .form-datarowlabel {
    padding: 30px 0px 0px 20px;
}

.top-RESERVE-sec .form-datarow {
    display: flex;
    flex-flow: wrap;
    padding: 10px 10px;
}

.top-RESERVE-sec .pwd-des {
    width: 180px;
    height: 140px;
    /* border-radius: 50%; */
    /* -webkit-box-shadow: 1px 1px 10px -4px;
    box-shadow: 1px 1px 10px -4px;*/
    margin: 7px 7px;
}

@media (max-width:480px) {
    .top-RESERVE-sec .pwd-des {
        width: 100%;
        height: 60px;
        flex-flow: row;
    }
}

.top-RESERVE-sec .pwd-des span {
    width: 170px;
    margin-top: 10px;
    text-align: center;
    line-height: 24px;
    font-weight: normal;
}

.confirmreserve-con {
    width: 95%;
    max-width: 1300px;
    height: calc(95% - 70px);
    position: fixed;
    top: 70px;
    right: 0px;
    bottom: 0px;
    left: 0px;
    margin: auto;
    background: #000;
    padding: 70px 20px 100px 10px;
    -webkit-box-shadow: 0px 0px 5px 0px #fff;
    box-shadow: 0px 0px 5px 0px #fff;
}

.confirmreserve-con .title {
    padding: 10px;
    width: 50%;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    margin: 10px auto;
    background: #000;
}

.confirmreserve-con .div-1 {
    width: 50%;
    padding: 20px 20px 0px 20px;
}

.confirmreserve-con .div-2 {
    width: 50%;
    padding: 20px;
}

.confirmreserve-con .div-3 {
    width: 100%;
    height: 100px;
    padding: 20px 20px;
}

.top-THANKS-sec {
    margin-top: 80px;
}

.top-THANKS-sec .addhome-sec {
    width: 100%;
    max-width: 1000px;
    margin: 0px auto;
    padding: 10px;
}

.top-THANKS-sec .os-btns {
    margin: 6px 0px;
    width: 100%;
    height: auto;
    position: relative;
}

.top-THANKS-sec .os-btns .btn-cover {
    color: #fff;
    position: absolute;
    top: 0px;
    z-index: 9;
    width: 50%;
    height: 100%;
    border-bottom: solid 3px #fff;
    -webkit-transition: .3s cubic-bezier(.03, .53, .45, .98);
    transition: .3s cubic-bezier(.03, .53, .45, .98);
}

.top-THANKS-sec .os-btns .btn-cover.ios {
    left: 0%;
}

.top-THANKS-sec .os-btns .btn-cover.android {
    left: 50%;
}

.top-THANKS-sec .os-btns .btn {
    width: 50%;
    color: rgb(255 255 255 / 50%);
    cursor: pointer;
    z-index: 10;
    text-align: center;
    padding: 10px 0px;
    -webkit-transition: .3s cubic-bezier(.03, .53, .45, .98), color 0s;
    transition: .3s cubic-bezier(.03, .53, .45, .98), color 0s;
}

.top-THANKS-sec .os-btns .btn:hover {
    background: rgb(255 255 255 / 8%);
}

@media(max-width:1024px) {
    .top-THANKS-sec .os-btns .btn:hover {
        background: none;
    }
    .top-THANKS-sec .os-btns .btn:active {
        background: rgb(255 255 255 / 8%);
    }
}

.top-THANKS-sec .os-btns .btn.choiced {
    color: #fff;
    background: rgb(255 255 255 / 8%);
}


/* ################### */


/******************************************* btn css ********************************************/


/* btn type 1 */

.btn-type-1 {
    cursor: pointer;
    border: none;
    padding: 15px 130px;
    margin: 80px 200px 0px 0px;
    position: relative;
    background: transparent;
    color: #424242;
    -webkit-tap-highlight-color: transparent;
    -webkit-transition: .6s ease-in;
    transition: .6s ease-in;
}

.btn-type-1::before {
    content: '　';
    box-sizing: border-box;
    position: absolute;
    top: 7px;
    left: -7px;
    width: 100%;
    height: 100%;
    border: solid 2px #424242;
    -webkit-transition: .5s ease;
    transition: .5s ease;
}

.btn-type-1::after {
    content: '　';
    box-sizing: border-box;
    position: absolute;
    bottom: 7px;
    right: -7px;
    width: 100%;
    height: 100%;
    border: solid 2px #424242;
    -webkit-transition: .5s ease;
    transition: .5s ease;
}

.btn-type-1:hover {
    background: #424242;
    color: #fff;
}

.btn-type-1:hover::before {
    top: 0px;
    left: 0px;
}

.btn-type-1:hover::after {
    bottom: 0px;
    right: 0px;
}


/* btn type 2 */

.btn-type-2 {
    width: auto;
    height: auto;
    padding: 20px 20px;
    margin: 0 20px;
    display: flex;
    background: #424242;
    color: #f1f1f1;
    border: none;
    position: relative;
    overflow: hidden;
    -webkit-tap-highlight-color: transparent;
    -webkit-transition: .3s cubic-bezier(.03, .53, .45, .98);
    transition: .3s cubic-bezier(.03, .53, .45, .98);
}

@media (max-width:768px) {
    .btn-type-2 {
        padding: 10px;
    }
}

.btn-type-2:hover {
    background: #b3b1b1;
    color: #615d5d;
    cursor: pointer;
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
}

@media (max-width:1024px) {
    .btn-type-2:hover {
        background: #424242;
        color: #f1f1f1;
        -webkit-transform: scale(1);
        transform: scale(1);
    }
    .btn-type-2:active {
        background: #b3b1b1;
        color: #615d5d;
        cursor: pointer;
        -webkit-transform: scale(1.1);
        transform: scale(1.1);
    }
}

.btn-type-2 .slide-left,
.btn-type-2 .slide-right {
    width: 35px;
    height: 30px;
    position: relative;
    overflow: hidden;
}

.btn-type-2 .slide-left:before,
.btn-type-2 .slide-right:before {
    position: absolute;
    top: 0px;
    right: 0px;
    bottom: 0px;
    left: 0px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    z-index: 1;
}

@keyframes btn-type-2l {
    50% {
        -webkit-transform: translate(-50px, 0px);
        transform: translate(-50px, 0px);
    }
    51% {
        -webkit-transform: translate(50px, 0px);
        transform: translate(50px, 0px);
    }
    100% {
        -webkit-transform: translate(0px, 0px);
        transform: translate(0px, 0px);
    }
}

@keyframes btn-type-2r {
    50% {
        -webkit-transform: translate(50px, 0px);
        transform: translate(50px, 0px);
    }
    51% {
        -webkit-transform: translate(-50px, 0px);
        transform: translate(-50px, 0px);
    }
    100% {
        -webkit-transform: translate(0px, 0px);
        transform: translate(0px, 0px);
    }
}

.btn-type-2:hover .slide-left:before {
    -webkit-animation: btn-type-2l .2s 0s ease-in-out forwards;
    animation: btn-type-2l .2s 0s ease-in-out forwards;
}

.btn-type-2:hover .slide-right:before {
    -webkit-animation: btn-type-2r .2s 0s ease-in-out forwards;
    animation: btn-type-2r .2s 0s ease-in-out forwards;
}

@media (max-width:1024px) {
    .btn-type-2:hover .slide-left:before,
    .btn-type-2:hover .slide-right:before {
        -webkit-animation: none;
        animation: none;
    }
}


/* btn type 3 */

.btn-type-3 {
    width: 50%;
    height: 100px;
    padding: 30px;
    cursor: pointer;
    background: #e62f2f;
    color: #fff;
    position: relative;
    border: none;
    opacity: 1;
    overflow: hidden;
    -webkit-transition: .3s cubic-bezier(.03, .53, .45, .98);
    transition: .3s cubic-bezier(.03, .53, .45, .98);
}

.btn-type-3:hover {
    background: #fff;
    color: #e62f2f;
}

.btn-type-3:active {
    opacity: .5;
}

@media (max-width:1024px) {
    .btn-type-3:hover {
        background: #e62f2f;
        color: #fff;
    }
    .btn-type-3:active {
        background: #fff;
        color: #e62f2f;
    }
}

.btn-type-3 span {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 3;
    position: absolute;
    top: 0px;
    left: 0px;
    -webkit-transition: .3s cubic-bezier(.03, .53, .45, .98);
    transition: .3s cubic-bezier(.03, .53, .45, .98);
}


/*
.btn-type-3::before {
    content: "";
    width: 120%;
    height: 60%;
    position: absolute;
    top: 50%;
    left: 50%;
    background: rgb(255, 233, 233);
    opacity: 0;
    z-index: 1;
    -webkit-transition: .3s cubic-bezier(.03, .53, .45, .98);
    transition: .3s cubic-bezier(.03, .53, .45, .98);
    -webkit-transform: translate(-50%, -50%) rotate(30deg);
    transform: translate(-50%, -50%) rotate(30deg);
}

.btn-type-3:hover::before {
    height: 120%;
    opacity: 1;
    -webkit-transform: translate(-50%, -50%) rotate(0deg);
    transform: translate(-50%, -50%) rotate(0deg);
}

.btn-type-3:active::before {
    background: #fff;
}
@media (max-width:1024px) {
    .btn-type-3:hover::before {
        height: 60%;
        opacity: 0;
        -webkit-transform: translate(-50%, -50%) rotate(30deg);
        transform: translate(-50%, -50%) rotate(30deg);
    }
    .btn-type-3:active::before {
        height: 120%;
        opacity: 1;
        background: rgb(255, 233, 233);
        -webkit-transform: translate(-50%, -50%) rotate(0deg);
        transform: translate(-50%, -50%) rotate(0deg);
    }
}
*/


/* btn type 4 */

.btn-type-4 {
    background-color: transparent;
    border: none;
    -webkit-tap-highlight-color: transparent;
    padding: 20px 10px;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
}

@media (max-width:480px) {
    .btn-type-4 {
        padding: 0px;
    }
}


/* btn type 5 */

.btn-type-5 {
    width: 50%;
    height: 100px;
    padding: 30px;
    cursor: pointer;
    background: #2b2b2b;
    color: #fff;
    position: relative;
    border: none;
    opacity: 1;
    overflow: hidden;
    -webkit-transition: .3s cubic-bezier(.03, .53, .45, .98);
    transition: .3s cubic-bezier(.03, .53, .45, .98);
}

.btn-type-5:hover {
    background: #fff;
    color: #2b2b2b;
}

.btn-type-5:active {
    opacity: .5;
}

@media (max-width:1024px) {
    .btn-type-5:hover {
        background: #2b2b2b;
        color: #fff;
    }
    .btn-type-5:active {
        background: #fff;
        color: #2b2b2b;
    }
}

.btn-type-5 span {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 3;
    position: absolute;
    top: 0px;
    left: 0px;
    -webkit-transition: .3s cubic-bezier(.03, .53, .45, .98);
    transition: .3s cubic-bezier(.03, .53, .45, .98);
}


/******************************************* text decoration ********************************************/

.text-deco.essencial::after {
    content: '※必須';
    color: #ff2929;
    margin-left: 2px;
}

.text-deco.optional::after {
    content: '（任意）';
    color: #757575;
    margin-left: 2px;
}