@charset "UTF-8";

* {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}

body {
    font-family: "Helvetica Neue", "Arial", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Meiryo", sans-serif;
    font-size: 0.9rem;
    line-height: 1.7;
}

a {
    text-decoration: none;
}

img {
    max-width: 100%;
}

li {
    list-style: none;
}

@font-face {
    font-family: fonts;
    src: url("../fonts/gill-sans-2 2/Gill Sans Bold Italic.otf") format("truetype");
}

/*************************************
        背景画像を固定
  *************************************/

.fixed-class {
    height: 300px;
    background-attachment: fixed;
    background-size: cover;
    background-position: center;
}

/*************************************
　　　　　　各section　title logo
  *************************************/

.sec-title {
    color: #fff;
    filter: drop-shadow(1px 1px 10px #c0c0c0);
    font-size: 4.5rem;
    font-weight: bolder;
    width: 100%;
    text-align: center;
    position: absolute;
    top: 30%;
    font-family: Gill Sans Bold Italic;
}

/*************************************
      各section width幅 設定
  *************************************/

.wrapper {
    width: 85%;
    padding: 90px 16px 150px 16px;
    margin: 0 auto;
    text-align: center;
}

/*************************************
        各サブタイトル　設定
  *************************************/

.title_item {
    font-size: 2.5rem;
    display: inline-block;
    border-bottom: solid 6px #e03131;
    margin-bottom: 70px;
    font-family: Gill Sans Bold Italic;
    font-weight: bolder;
}

  /*************************************
                 header
  *************************************/


header {
    width: 100%;
    min-height: 100vh;
    background-image: url('../img 3/mainvisual.jpg');
    background-size: cover;
    background-position: center;
    position: relative;
    padding: 1.5% 3%;
}

.nav_menu {
    color: #fff;
    font-size: 14.5px;
    font-weight: bold;
}

.nav_menu ul {
    display: flex;
    justify-content: flex-end;
}

.nav_menu li {
    margin-left: 3.2%;
}

.nav_menu li a {
    transition: color 0.3s ease;
    filter: drop-shadow(1px 1px 2px #121212);
}

.nav_menu li a:hover {
    color: red;
}

.header_logo {
    display: flex;
    position: absolute;
    top: 54%;
    left: 50%;
    transform: translate(-50%, -50%);
    filter: drop-shadow(1px 1px 10px #c0c0c0);
}

/*************************************
                  menu
  *************************************/

  .menu {
    margin-top: 3%;
  }

.menu_img {
    background-image: url('../img 3/menu.jpg');
    position: relative;
}

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

.menu_item {
    width: 50%;
    padding: 5%;
}

.menu_item dl {
    display: flex;
    flex-wrap: wrap;
}

.menu_item dt {
    width: 87%;
    text-align: left;
    border-bottom: dotted 1px #000;
    margin-bottom: 25px;
    font-weight: 500;
    letter-spacing: 18px;
    font-size: 15px;
    padding-bottom: 3%;
    padding-left: 10%;
}

.menu_item dd {
    width: 13%;
    text-align: right;
    padding-top: 1%;
}

.menu_item dl.foods {
    margin-bottom: 11.5%;
}

.menu_item:first-child {
    border-right: solid 1px #000;
  }

    /*************************************
              ABOUT
  *************************************/

  .about_img {
    background-image: url('../img 3/about.jpg');
    position: relative;
  }

  .about_item_text {
    width: 90%;
    gap: 30px;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    margin: 0 auto;
  }

  .ppp {
    width: 45%;
    text-align: left;
  }

  /******  red line  :hover  *******/

  .about .btn {
    width: 300px;
    height: 80px;
    line-height: 3.5;
    display: inline-block;
    color: #000;
    padding: 0;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    margin-top: 8%;
  }

  .about .btn span {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 20px;
    letter-spacing: 2px;
  }

  /*
  .btn::before 右の赤線
  .btn::after 下の赤線
  .btn span::before 左の赤線
  .btn span::after 上の赤線
  */
  .about .btn::before,
  .about .btn::after {
    position: absolute;
    content: "";
    right: 0;
    bottom: 0;
    background: #e03131;
    transition: all 0.3s ease;
  }

  .about .btn span::before,
  .about .btn span::after {
    position: absolute;
    content: "";
    left: 0;
    top: 0;
    background: #e03131;
    transition: all 0.3s ease;
  }

  .about .btn::before,
  .about .btn span::before {
    width: 2px;
    height: 50%;
  }

  .about .btn::after,
  .about .btn span::after {
    width: 20%;
    height: 2px;
  }


  /*
  ホバー時の縦の動作
  右の赤線と左の赤線の高さを100%にする
  */
  .about .btn:hover::before,
  .about .btn span:hover::before {
    height: 100%;
  }


  /*
  ホバー時の横の動作
  下の赤線と上の赤線の横幅を100%にする
  */
  .about .btn:hover::after,
  .about .btn span:hover::after {
    width: 100%;
  }

    /*************************************
           location
  *************************************/

.location_img {
    background-image: url('../img 3/location.jpg');
    position: relative;
}

.location_text {
    text-align: left;
    margin: 3% 0 0 3%;
}

.location_text p {
    margin-bottom: 2%;
}

  /*************************************
            footer
  *************************************/

  footer {
    text-align: center;
    font-size: 10px;
    letter-spacing: 2px;
    margin-bottom: 1%;
  }

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

    header {
        top: 42%;
      }
    .header_logo {
        width: 85%;
        height: auto;
    }
      .sec-title {
        font-size: 3rem;
        top: 26%;
      }
      .title_item {
        font-size: 1.5rem;
        margin-bottom :25px;
      }
      .fixed-class {
        height: 150px;
        /* スマホ時は背景をスクロールするように変更 */
        background-attachment: scroll;
      }
      .wrapper {
        padding: 30px 10px 60px 10px;
      }

      .menu_container {
        flex-direction: column;
    }

    .menu_item {
        width: 100%;
        padding: 0;
        margin-top: 8%;
    }
    
    .menu_item dl {
        display: flex;
        flex-wrap: wrap;
    }
    
    .menu_item dt {
        width: 87%;
        text-align: left;
        border-bottom: dotted 1px #000;
        margin-bottom: 10px;
        font-weight: 500;
        letter-spacing: 8px;
        font-size: 15px;
        padding-bottom: 3%;
        padding-left: 10%;
    }
    
    .menu_item dd {
        width: 13%;
        text-align: right;
        padding-top: 1%;
    }
    
    .menu_item dl.foods {
        margin-bottom: 11.5%;
    }
    
    .menu_item:first-child {
        border-right: none;
      }

      .about_item_text {
        width: 95%;
        gap: 30px;
        flex-direction: column;
        justify-content: unset;
        flex-wrap: wrap;
        margin: 0 auto;
        text-align: center;
      }
    
      .ppp {
        width: 100%;
        text-align: center;
      }


      .about .btn.active::before,
.about .btn span.active::before {
  height: 100%;
}

.about .btn.active::after,
.about .btn span.active::after {
  width: 100%;
}

.about .btn {
    width: 200px;
    height: 50px;
    line-height: 3.5;
    margin-top: 15%;
  }

  .about .btn span {
    font-size: 15px;
    letter-spacing: 2px;
  }
  }