@charset "UTF-8";

/* マウスストーカーここから */

#js-mouse {
    pointer-events: none;
    position: fixed;
    top: -15px;
    left: -15px;
    width: 30px;
    height: 30px;
    background-color: rgba(255,255,255,0.5);
    border-radius: 50%;
    transform: translate(0,0);
    transition: transform 0.3s ease-out;
    z-index: 9999;
    opacity: 0;
    border: 1px solid #999;
}

#js-mouse.js-hover {
    width: 50px;
    height: 50px;
    background-color: rgba(255,255,255,0.5);
}

/* ローディング画面ここから */

#loading {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100vw;
    height: 100vh;
    background-color: black;
    transition: all 3s;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9999;
}
#loading.loaded {
    opacity: 0;
    visibility: hidden;
}
#loading .loader, #loading .loader:before, 
#loading .loader:after {
    background: #ffffff;
    animation: loading 1s infinite ease-in-out;
    width: 1em;
    height: 4em;
}
#loading .loader {
    color: #ffffff;
    text-indent: -9999em;
    margin: 88px auto;
    position: relative;
    font-size: 11px;
    transform: translateZ(0);
    animation-delay: -0.16s;
}
#loading .loader::before, #loading .loader::after {
    position: absolute;
    top: 0;
    content: '';
}
#loading .loader::before {
    left: -1.5em;
    animation-delay: -0.32s;
}
#loading .loader::after {
    left: 1.5em;
}
@-webkit-keyframes loading {
    0%, 80%, 100% {
        box-shadow: 0 0;
        height: 4em;
    }
    40% {
        box-shadow: 0 -2em;
        height: 5em;
    }
}
@keyframes loading {
    0%, 80%, 100% {
        box-shadow: 0 0;
        height: 4em;
    }
    40% {
        box-shadow: 0 -2em;
        height: 5em;
    }
}

.loaded {
    opacity: 0;
    visibility: hidden;
}

/* スクロールCSS */
.fade-in {
    opacity: 0;
    transition-duration: 500ms;
    transition-property: opacity, transform;
}
  
.fade-in-up {
    transform: translate(0, 50px);
}
  
.fade-in-down {
    transform: translate(0, -50px);
}
  
.fade-in-left {
    transform: translate(-50px, 0);
}
  
.fade-in-right {
    transform: translate(50px, 0);
}
  
.scroll-in {
    opacity: 1;
    transform: translate(0, 0);
}
  


/* ヘッダーここから */

/* ロゴ */
.header_logo1 {
    margin-left: -6% !important;
    margin-top: -7% !important;
}
.header_logo2 {
    display: none !important;
}
@media screen and (max-width:1060px) {
    .header_logo1 {
        display: none !important;
    }
    .header_logo2{
        display: block !important;
        width: 200px;
        position: absolute;
        top: 0%;
        left: 10%;
    }
}



/* ヘッダーナビ */
nav.header_navi {
    width: 700px;
    height: 114px;
    margin-top: -130px;
    margin-left: auto;
    margin-right: 50px;
}

ul.header_navilist1 {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: center;
    list-style: none;
    margin-top: -300px;
}

li.header_navilist2 {
    list-style: none;
    margin-left: 20px;
    color: #000;
    font-family: "Source Han Sans JP","源ノ角ゴシック JP"serif;
    font-weight: bold;
    font-size: 20px;
    line-height: 66px;
    text-align: right;
}

/* ヘッダーナビホバー時の動き */
a.mouse_under {
    background: linear-gradient(45deg,#000 50%,transparent 0)right /250% 100% no-repeat,
    linear-gradient(45deg,transparent 50%,#000 0)left /250% 100% no-repeat;
    transition: 0.5s;
}

a.mouse_under:hover {
    background-position: center;
    color: #fff;
}

/* ハンバーガーメニューここから */

/* PC非表示 */
.nav_toggle, .nav {
    display: none;
}

/* 1060px以下のサイズで見た場合のスタイル */

.nav_toggle {
    position: absolute;
    right: 10%;
    top: 7%;
}
@media screen and (max-width: 1060px) {

    .header_navi {
        display: none;
    }
    

    /* ハンバーガーのマーク */
    .nav_toggle {
        display: block;
        /* position: relative; */
        width: 1.75rem;
        height: 1.5rem;
        margin-left: 10px;
        z-index: 2;
    }
    .nav_toggle i {
        display: block;
        width: 100%;
        height: 2px;
        background-color: #333;
        position: absolute;
        transition: transform 0.5s,opacity 0.5s;
    }
    .nav_toggle i:nth-child(1) {
        top: 0;
    }
    .nav_toggle i:nth-child(2) {
        top: 0;
        bottom: 0;
        margin: auto;
    }
    .nav_toggle i:nth-child(3) {
        bottom: 0;
    }

    /* クリックされた後のハンバーガーのマーク */
    .nav_toggle.show i:nth-child(1) {
        transform: translateY(10px) rotate(-45deg);
    }
    .nav_toggle.show i:nth-child(2) {
        opacity: 0;
    }
    .nav_toggle.show i:nth-child(3) {
        transform: translateY(-12px) rotate(45deg);
    }

    /* クリックで表示されるメニュー：クリックされる前 */
    .nav {
        display: flex;
        position: fixed;
        align-items: center;
        justify-content: center;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.5s,visibilty 0.5s;
        background-color: #fff;
        z-index: 1;
    }

    /* クリックで表示されるメニュー：クリックされた後 */
    .nav.show {
        opacity: 1;
        visibility: visible;
    }
}


/* ハンバーガーメニュー表示後のデザインここから */

.nav.show {
    display: block;
    background-color: #EAEAEA;
    width: 375px;

}


.h_nav_title1 {
    font-family: "Source Han Sans JP","源ノ角ゴシック JP"serif;
    font-weight: bold;
    font-size: 15px;
    color: #565555;
    margin-top: 5%;
    margin-left: 5%;
}

.nav_menu_li1 {
    font-family: "Source Han Sans JP","源ノ角ゴシック JP"serif;
    font-weight: bold;
    font-size: 15px;
    margin-left: 5%;
    margin-top: 5%;
}

.h_nav_title2 {
    font-family: "Source Han Sans JP","源ノ角ゴシック JP"serif;
    font-weight: bold;
    font-size: 15px;
    color: #565555;
    margin-top: 5%;
    margin-bottom: 5%;
}

.nav_menu_ul2 {
    margin-left: 5%;
    font-family: "Source Han Sans JP","源ノ角ゴシック JP"serif;
    font-weight: bold;
    font-size: 15px;
    margin-left: 5%;
    margin-top: 5%;
}

.nav_menu_li2 {
    margin-bottom: 24px;
}

.nav_menu_li3{
    margin-bottom: 24px;
}

.h_nav_title3 {
    font-family: "Source Han Sans JP","源ノ角ゴシック JP"serif;
    font-weight: bold;
    font-size: 15px;
    color: #565555;
    margin-top: 5%;
    margin-bottom: 5%;
}

.nav_menu_ul3 {
    width: 329px;
    height: auto;
    margin-left: auto;
    margin-right: auto;
}

/* ホームここから */

/* ヘッダー直下画像 */
.beautyrestaurant_logo {
    width: 100%;
    height: auto;
    margin-top: 400%;
}

.home_topgazou {
    width: 100%;
    height: auto;
}

/* 予約ボタン */
.home_yoyaku {
    width: 20%;
    height: auto;
    display: block;
    margin-left: auto;
    margin-top: -3.12%;
    transition: 0.5s;

}
@media screen and (max-width:375px){
    .home_yoyaku{
        width: 30%;
        margin-top: -5%;
    }
}


.home_yoyaku:hover {
    filter: invert(100%) drop-shadow(5px 5px 10px #666);
    cursor: pointer;
}

.home_top {
    display: flex;
    justify-content: flex-end;
}

/* インフォメーションここから */

.information_title {
    font-size: 40px;
    font-family: "Source Han Sans JP","源ノ角ゴシック JP"serif;
    color: #000;
    font-weight: bold;
    display: block;
    position: relative;
    top: 80px;
    left: 400px;
    width: 50%;
}

@media screen and (max-width:1537px){
    .information_title{
         left: 15%;
    }
}
@media screen and (max-width:1460px){
    .information_title{
        top: 5%;
    }
}
@media screen and (max-width:1060px){
    .information_title{
        font-size: 25px;
        display: block;
        margin-top: 10%;
        margin-left: -12%;
    }
}
@media screen and (max-width:375px){
    .information_title {
        width: 70%;
    }
}


/* タイトルアニメーション */
@-webkit-keyframes ani {
    0% {
      transform: translate3d(0, 0, 0);
      text-shadow: 0em 0em 0 lightblue;
      color: black;
    }
    30% {
      transform: translate3d(0, 0, 0);
      text-shadow: 0em 0em 0 lightblue;
      color: black;
    }
    70% {
      transform: translate3d(0.08em, -0.08em, 0);
      text-shadow: -0.08em 0.08em lightblue;
      color: black;
    }
    100% {
      transform: translate3d(0.08em, -0.08em, 0);
      text-shadow: -0.08em 0.08em lightblue;
      color: black;
    }
}
@keyframes ani {
    0% {
      transform: translate3d(0, 0, 0);
      text-shadow: 0em 0em 0 lightblue;
      color: black;
    }
    30% {
      transform: translate3d(0, 0, 0);
      text-shadow: 0em 0em 0 lightblue;
      color: black;
    }
    70% {
      transform: translate3d(0.08em, -0.08em, 0);
      text-shadow: -0.08em 0.08em lightblue;
      color: black;
    }
    100% {
      transform: translate3d(0.08em, -0.08em, 0);
      text-shadow: -0.08em 0.08em lightblue;
      color: black;
    }
}
.popout span {
    position: relative;
    display: inline-block;
    -webkit-animation: ani 1s infinite alternate cubic-bezier(0.86, 0, 0.07, 1);
            animation: ani 1s infinite alternate cubic-bezier(0.86, 0, 0.07, 1);
}
.popout span:nth-last-child(1n) {
    -webkit-animation-delay: -0.1666666667s;
            animation-delay: -0.1666666667s;
}
.popout span:nth-last-child(2n) {
    -webkit-animation-delay: -0.3333333333s;
            animation-delay: -0.3333333333s;
}
.popout span:nth-last-child(3n) {
    -webkit-animation-delay: -0.5s;
            animation-delay: -0.5s;
}

/* インフォメーションスクロール部分 */
.information_scroll {
    display: flex;
    max-width: 900px;
    margin-left: auto;
    overflow-x: auto;
    justify-content: center;
}    
@media screen and (max-width:1060px){
    .information_scroll{
        overflow-x: hidden;
        margin: 0;
        justify-content: none;
    }
}

@media screen and (max-width:1060px){
    .information_scroll li:last-child{
        display: none;
    }
}


.information_scroll li {
    width: 30%;
    padding: 8px;
    margin: 30px;
    flex-shrink: 0;
    list-style: none;
}
@media screen and (max-width:375px){
    .information_scroll li{
        width: 50%;
        margin: 1%;
    }
}


.information_scroll img {
    width: 300px;
    height: 300px;
    object-fit: cover;
    transition-duration: .5s;
}
@media screen and (max-width:1060px){
    .information_scroll img{
        width: 100%;
        height: auto;
    }
}


.information_scroll img:hover {
    transform: scale(1.1) rotate(9deg);
    transition-duration: .5s;
}

.information_scroll li:nth-child(2) a img:hover {
    transform: scale(1.1) rotate(-9deg);
    transition-duration: .5s;
}


.information_scroll::-webkit-scrollbar {
    height: 5px;
}

/* スクロールバーデザイン */
.information_scroll::-webkit-scrollbar-thumb {
    background: #333;
    border-radius: 6px;
}

.information_scroll::-webkit-scrollbar-track {
    background-color: #c2c1c1;
    box-shadow: 0 0 5px #707070 inset;
}

/* スクロール内文字 */
.information_scroll h3 {
    font-family: "メイリオ","Meiryo"sans-serif;
    font-size: 17px;
    line-height: 34px;
    text-align: center;
    color: #565555;

}
@media screen and (max-width:1060px){
    .information_scroll h3{
        font-size: 10px;
    }
}


.information_scroll p {
    font-family: "Source Han Sans JP","源ノ角ゴシック JP"serif;
    line-height: 21px;
    text-align: center;
    font-weight: bold;
}
@media screen and (max-width:1060px){
    .information_scroll p{
        font-size: 10px;
    }
}


/* インフォメーションリンク */
.information_link {
    font-family: "メイリオ","Meiryo"sans-serif;
    font-size: 20px;
    line-height: 30px;
    display: block;
    margin-left: 500px;
    margin-top: -130px;
    position: relative;
    text-decoration: none;
    color: #333;
}
@media screen and (max-width:1537px){
    .information_link{
        margin-left: 25%;
    }
}
@media screen and (max-width:1460px){
    .information_link{
        display: none;
    }
}


.information_link::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 6.5%;
    transform: translate(-50%,-50%);
    width: 0;
    height: 0;
    background-color: rgba(155, 155, 155, 0.5);
    border-radius: 50%;
    transition: 0.3s;
}
@media screen and (max-width:375px){
    .information_link::after{
        background-color: #fff;
    }
}

.information_link:hover::after {
    width: 40px;
    height: 40px;
}

.i_k {
    display: none;
}
@media screen and (max-width:1060px){
    .i_k{
        display: block;
        width: 90%;
        color: #959595;
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 3%;
    }
}
@media screen and (max-width:465px) {
    .i_k{
        display: none;
    }
}


/* コンセプトここから */

.home_concepttext {
    display: block;
    font-family: "Source Han Sans JP","源ノ角ゴシック JP"serif;
    font-weight: bold;
    font-size: 40px;
    line-height: 58px;
    /* margin-left: 65%;
    margin-top: -35%; */
    position: absolute;
    top: 10%;
    left: 65%;
}
@media screen and (max-width:1537px) {
    .home_concepttext{
        top: 10%;
        left: 60.5%;            
    }
}
@media screen and (max-width:1060px){
    .home_concepttext{
        top: -20%;
        left: 5%;
        font-size: 25px;
    }
}
@media screen and (max-width:835px) {
    .home_concepttext{
        top: -13%;
    }
}
@media screen and (max-width:500px) {
    .home_concepttext{
        top: -15%;
    }
}
@media screen and (max-width:375px){
    .home_concepttext{
        top: -10%;
    }
}


/* コンセプトリンク */
.home_conceptlink {
    display: block;
    font-family: "メイリオ","Meiryo"sans-serif;
    font-size: 20px;
    position: absolute;
    bottom: 10%;
    right: 10%;
    text-emphasis: none;
    color: #333;
}
@media screen and (max-width:1060px){
    .home_conceptlink{
        top: -18.5%;
        right: 10%;
        color: #CCCCCC;
        font-size: 10px;
    }
}
@media screen and (max-width:835px){
    .home_conceptlink{
        top: -11%;
    }
}
@media screen and (max-width:375px){
    .home_conceptlink{
        display: none !important;
    }
}


.home_conceptlink::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 0;
    height: 0;
    background-color: rgba(155, 155, 155, 0.5);
    border-radius: 50%;
    transition: 0.3s; 
}

.concept_image {
    position: relative;
    margin-top: 20%;
}

.home_conceptlink:hover::after {
    width: 40px;
    height: 40px;
}

/* コンセプト画像 */
.home_concept1 {
    width: 40%;
    height: auto;
    /* margin-top: 20%; */
    position: absolute;
    top: -10%;
}
@media screen and (max-width:1060px){
    .home_concept1{
        width: 95%;
        top: -10%;
        left: 0%;
    }
}
@media screen and (max-width:375px){
    .home_concept1{
        top: 5%;
    }
}


.home_concept2 {
    width: 20%;
    height: auto;
    /* margin-left: 60%;
    margin-top: -100%; */
    position: absolute;
    top: 25%;
    right: 20%;
}
@media screen and (max-width:1537px){
    .home_concept2{
        top: 20%;
        right: 22.5%;
    }
}
@media screen and (max-width:1060px){
    .home_concept2{
        width: 95%;
        top: 40%;
        right: 0%;
    }
}
@media screen and (max-width:375px){
    .home_concept2{
        top: 50%;
    }
}


/* コンセプト背景 */
.concept_haikei {
    height: 686px;
    width: auto;
    background-color: #ddeedc;
    margin-top: -4%;
}
@media screen and (max-width:1537px){
    .concept_haikei{
        height: 545px;
    }
}
@media screen and (max-width:1060px){
    .concept_haikei{
        margin-top: 50%;
        height: 2000px;
    }
}
@media screen and (max-width:835px){
    .concept_haikei{
        height: 1600px;
    }
}
@media screen and (max-width:640px) {
    .concept_haikei{
        height: 1300px;
    }
}
@media screen and (max-width:500px) {
    .concept_haikei{
        height: 1000px;
    }
}
@media screen and (max-width:375px){
    .concept_haikei{
        height: 900px;
    }
}


/* スタッフここから */

.home_stafftop {
    font-family: "Source Han Sans JP","源ノ角ゴシック JP"serif;
    font-weight: bold;
    font-size: 40px;
    line-height: 58px;
    display: block;
    margin-left: 5%;
    margin-bottom: 10%;
}
@media screen and (max-width:1060px){
    .home_stafftop{
        font-size: 25px;
    }
}


/* スタッフ背景 */
.staff_haikei {
    background-color: #DDEEDC;
    width: 90%;
    height: auto;
}
@media screen and (max-width:375px) {
    .staff_haikei{
        display: none !important;
    }
}


/* スタッフ画像 */
.staff_gazou ul {
    display: flex;
}

.staff_gazou ul img {
    width: 50%;
    height: auto;
}

.staff_gazou ul li {
    display: block;
    margin-left: 5%;
}

.staffgazou_under {
    margin-top: 5%;
}

.staffgazou_right {
    margin-top: 1%;
    margin-right: 5%;
}

.staffgazou_left {
    margin-top: -5%;
}


/* 画像ホバー時 */
.moji_img a {
    display: block;
    position: relative;
    text-decoration: none;
}

.moji_img a img {
    display: block;
    width: 80%;
}

.moji_img a::before {
    content: '';
    display: block;
    width: 80%;
    height: 100%;
    position: absolute;
    z-index: 2;
    background: #000;
    opacity: 0;
    transition: 0.3s;
}

.moji_img a::after {
    content: "Click Here";
    display: block;
    color: #fff;
    line-height: 48px;
    width: 40%;
    border: 1px solid #fff;
    border-radius: 5px;
    text-align: center;
    position: absolute;
    top: 50%;
    left: 55%;
    margin-top: -1em;
    margin-left: -35%;
    opacity: 0;
    z-index: 3;
    font-weight: bold;
    letter-spacing: 0.2em;
}

.moji_img a:hover::before {
    opacity: 0.5;
}

.moji_img a:hover::after {
    opacity: 1;
    margin-top: -0.5em;
}

/* 携帯用ここから */

/* 背景 */
.staff_haikei1 {
    display: none !important;
}
@media screen and (max-width:375px) {
    .staff_haikei1{
        display: block !important;
        background-color: #DDEEDC;
        width: 90%;
        height: auto;    
    }
}


/* 画像 */
@media screen and (max-width:375px){
    .staff_gazou1 ul{
        display: flex !important;
    }
}    

@media screen and (max-width:375px){
    .staff_gazou1 ul img{
        display: inline !important;
        width: 50%;
        height: auto;
    }
}    

@media screen and (max-width:375px){
    .staff_gazou1 ul li{
        display: block !important;
        margin-left: 5%;
    }
}

@media screen and (max-width:375px){
    .staffgazou_under1{
        margin-top: 5%;
    }
}


.staffgazou_right1 {
    margin-top: 1%;
    margin-right: 5%;
}

.staffgazou_left1 {
    margin-top: -5%;
}

/* ホバー時 */
.moji_img1 a {
    display: block;
    position: relative;
    text-decoration: none;
}

.moji_img1 a img {
    display: block;
    width: 80%;
}

.moji_img1 a::before {
    content: '';
    display: block;
    width: 80%;
    height: 100%;
    position: absolute;
    z-index: 2;
    background: #000;
    opacity: 0;
    transition: 0.3s;
}

.moji_img1 a::after {
    content: "Click Here";
    display: block;
    color: #fff;
    width: 50%;
    border: 1px solid #fff;
    border-radius: 5px;
    text-align: center;
    position: absolute;
    top: 45%;
    left: 50%;
    margin-top: -1em;
    margin-left: -35%;
    opacity: 0;
    z-index: 3;
    font-weight: bold;
}

.moji_img1 a:hover::before {
    opacity: 0.5;
}

.moji_img1 a:hover::after {
    opacity: 1;
    margin-top: -0.5em;
}


/* ヘアーギャラリーここから */

.home_hairgallerytitle {
    font-family: "Source Han Sans JP","源ノ角ゴシック JP"serif;
    font-weight: bold;
    font-size: 40px;
    line-height: 58px;
    text-align: center;
    display: block;
    margin-top: 15%;
    margin-bottom: 10%;
}
@media screen and (max-width:1060px){
    .home_hairgallerytitle{
        font-size: 25px;
    }
}


/* 画像　モノクロ */
.hairgallery_gazou1 {
    font-size: 0; 
    overflow: hidden;   
}

.hairgallery_gazou1 img {
    vertical-align: bottom;
    filter: grayscale(100%);
    transition-duration: 0.5s;
}

.hairgallery_gazou1 img:hover {
    filter: grayscale(0);
    transition-duration: 0.5s;
}

.hairgallery_gazou2 {
    font-size: 0;
    overflow: hidden;
}

.hairgallery_gazou2 img {
    vertical-align: top;
    filter: grayscale(100%);
    transition-duration: 0.5s;
}

.hairgallery_gazou2 img:hover {
    filter: grayscale(0);
    transition-duration: 0.5s;
}

.hairgallery_gazou3 img {
    overflow: hidden;
}


.hairgallery_gazou3 img {
    display: block;
    float: left;
    margin-top: -35%;
    filter: grayscale(100%);
    transition-duration: 0.5s;
}

.hairgallery_gazou3 img:hover {
    filter: grayscale(0);
    transition-duration: 0.5s;
}

.hairgallery_gazou4 {
    margin-left: 20%;
}

/* ヘアギャラリーリンク */
.hairgallery_link {
    font-family: "メイリオ","Meiryo"sans-serif;
    font-size: 20px;
    line-height: 30px;
}
@media screen and (max-width:1060px){
    .hairgallery_link{
        font-size: 15px;
        display: block;
        width: 100%;
        margin-right: 10%;
    }
}


a.hairgallery_link {
    display: block;
    margin-left: 80%;
    margin-top: 10%;
    position: relative;
    text-decoration: none;
    color: #333;
}
@media screen and (max-width:700px) {
    a.hairgallery_link{
        margin-left: 65%;
    }
}
@media screen and (max-width:375px){
    a.hairgallery_link{
        display: none !important;
    }
}


a.hairgallery_link::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 25%;
    transform: translate(-50%,-50%);
    width: 0;
    height: 0;
    background-color: rgba(155, 155, 155, 0.5);
    border-radius: 50%;
    transition: 0.3s;
}
@media screen and (max-width:375px){
    a.hairgallery_link::after{
        background-color: #fff;
    }
}


a.hairgallery_link:hover::after {
    width: 40px;
    height: 40px;
}

/* 店舗紹介ここから */

.store_title {
    font-family: "Source Han Sans JP","源ノ角ゴシック JP"serif;
    font-weight: bold;
    font-size: 40px;
    line-height: 58px;
    text-align: center;
    display: block;
    margin-top: 5%;
    margin-bottom: 5%;
}
@media screen and (max-width:1060px){
    .store_title{
        font-size: 25px;
        margin-top: 20%;
        margin-bottom: 15%;
    }
}


/* 店舗紹介画像 */
.s_pc {
    display: block !important;
}
@media screen and (max-width:1060px){
    .s_pc{
        display: none !important;
    }
}


.s_pho {
    display: none !important;
}
@media screen and (max-width:1060px){
    .s_pho{
        display: block !important;
        margin-left: auto;
        margin-right: auto;
        width: 80%;
    }
}


div.kuuhaku1 {
    height: 100px;
}

/* フッターここから */

/* 背景色 */
.footer {
    color: #ccc;
    background: #000;
    padding: 5%;
}
/* 文字 */
.footer a {
    color: #fff;
    text-decoration: none;
    font-family: "Source Han Sans JP","源ノ角ゴシック JP"serif;
    font-size: 20px;
    line-height: 50px;
}
@media screen and (max-width:1270px) {
    .footer a{
        font-size: 15px;
    }
}


/* フッターホバー時 */
.f_c li a {
    background: linear-gradient(45deg,#fff 50%,transparent 0)right /250% 100% no-repeat,
    linear-gradient(45deg,transparent 50%,#fff 0)left /250% 100% no-repeat;
    transition: 0.5s;
}
@media screen and (max-width:1060px) {
    .f_c li a{
        display: block;
        width: 50%;
    }
}


.f_c li a:hover {
    background-position: center;
    color: #000;
}

@media screen and (max-width:1060px){
    .f_c li:nth-of-type(n+5) a{
        margin-left: 70%;
        
    }
}
@media screen and (max-width:700px){
    .f_c li:nth-of-type(n+5) a{
        margin-left: 50%;
    }
}


.footer .footer_navi {
    display: flex;
}
@media screen and (max-width:1060px){
    .footer .footer_navi{
        display: block;
    }
}

@media screen and (max-width:1060px) {
    .f_c li:nth-child(5) a{
        margin-top: -200px;        
    }
}

@media screen and (max-width:1060px) {
    .f_c :nth-of-type(-n+4){
        margin-left: 5%;
    }
}
@media screen and (max-width:700px){
    .f_c :nth-of-type(-n+4){
        margin-left: 0;
    }
}

@media screen and (max-width:1060px) {
    .s_c li{
        margin-left: 10%;
    }
}
@media screen and (max-width:700px) {
    .s_c li{
        margin-left: 0%;
    }
}

@media screen and (max-width:1060px) {
    .s_c li img{
        display: block;
    }
}
@media screen and (max-width:700px){
    .s_c li img{
        margin-left: -20%;
    }
}


/* 店舗名ホバー時 */
.s_c li a {
    background: linear-gradient(45deg,#fff 50%,transparent 0)right /250% 100% no-repeat,
    linear-gradient(45deg,transparent 50%,#fff 0)left /250% 100% no-repeat;
    transition: 0.5s;
}

.s_c li a:hover {
    background-position: center;
    color: #000;
}

.footer.footer_navi h3 {
    margin: 0 0 10px 0;
    padding: 0;
    border-bottom: 1px solid #fff;
    font-size: 15px;
    line-height: 21px;
    font-family: "Source Han Sans JP","源ノ角ゴシック JP"serif;
}

@media screen and (max-width:1060px) {
    .footer_menu h3{
        margin-left: 10%;
        margin-top: 5%;
    }

}
@media screen and (max-width:700px){
    .footer_menu h3{
        margin-left: 0;
    }
}


.footer.footer_navi p {
    margin: 0;
    padding: 0 0 20px 0;
}

.footer.footer_navi.footer_menu {
    width: 22%;
}

.footer.footer_navi.footer_menu ul {
    margin: 0;
    padding: 0 0 20px 0;
    list-style: none;
}

.footer.footer_navi {
    width: 100%;
    padding: 20px 0 0 0;
}

/* マップ画像 */
.mapbutton {
    position: relative;
}

.mapbutton img {
    position: absolute;
    top: 7px;
    left: 350px;
    cursor:pointer;
}
@media screen and (max-width:1340px){
    .mapbutton img{
        display: none;
    }
}


.footer_menu {
    flex: 1;
}

/* 予約ボタン */
.yoyaku {
    margin-top: 20px;
    cursor: pointer;
    transition: .5s;
}

.yoyaku:hover {
    filter: invert(100);
    border: 3px solid #000;
}


@media screen and (max-width:1060px) {
    .g_c li{
        width: 35%;
        margin-left: auto;
        margin-right: auto;
    }
}
@media screen and (max-width:700px){
    .g_c li{
    margin-left: 0%;
    padding-left: 2%;
    }
}




.footer_logo {
    margin-left: -90px;
}
@media screen and (max-width:1060px) {
    .footer_logo{
        margin-left: 8%;
    }
}


.footer_top1 {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    list-style: none;
    margin-top: -70px;
    margin-bottom: 30px;
}
@media screen and (max-width:1060px) {
    .footer_top1{
        display: block;
    }
}

@media screen and (max-width:1060px) {
    .footer_top1 a img{
        margin-left: 170%;
    }
}
@media screen and (max-width:700px){
    .footer_top1 a img{
        margin-left: 210%;
    }
}


.footer_line {
    margin-bottom: 30px;
}

/* コピーライト */
.copyright {
    display: block;
    margin-left: auto;
    width: 100%;
    height: auto;
    margin-right: 0;
}
@media screen and (max-width:1060px) {
    .copyright{
        margin-right: 5%;
    }
}