@charset "UTF-8";
@media screen and (max-width: 768px) {
  /* ========================================================
  基本設定
  =========================================================*/  
  :root {
    /* カラー */
    --black: #3D414C;
    --red: #FF1616;
    --grey: #B7B2B2;
    --back: #EEF1F4;
    
    /* フォント */
    --font_en: "CrimsonText", serif;
    --font_ja_selif: "ShipporiMincho", serif;
    --font_ja_selif_vert: "ShipporiMincho_vert", serif;
    --font_ja_sans: "NotoSansJP", sans-serif;
  }

  .html {
    font-size: 16px;
  }

  .body {
    width: 100%;
  }


  /* ========================================================
  共通パーツ
  =========================================================*/
  .forPC {
    display: none;
  }
  
  .forSP {
    display: block;
  }

  .forPC-inline {
    display: none;
  }
  
  .forSP-inline {
    display: inline;
  }
  
  .inner {
    width: 100%;
    padding: 0 5.33vw;
  }

  a:hover {
    opacity: 1;
  }


  /* ========================================================
  ヘッダー
  =========================================================*/
  .header {
    padding: 1.25rem;
  }

  .header__logo {
    width: 10.25rem;
    margin-top: 0.5rem;
  }

  .hamburgerBtn {
    width: 3.125rem;
    transition: all 0.5s;
  }

  .hamburgerContent {
    flex-direction: column;
    background: url(../img/genten/hamburger_bg_sp.webp) no-repeat center / cover,
                var(--black);
    padding: 6.25rem 13.33vw 0;
    transform: translate(100%, 0);
  }

  .hamburgerContent.is-active {
    transform: translate(0, 0);
  }

  .hamburgerContent__flex {
    flex-direction: column;
    gap: 0;
  }

  .hamburgerContent__flex > img {
    display: none;
  }

  .hamburgerContent__nav {
    gap: 1.75rem;
  }

  .hamburgerContent__nav a {
    font-size: 1rem;
  }

  .hamburgerContent__txt {
    font-size: 0.9375rem;
    margin-top: 3.75rem;
  }

  .hamburgerContent__txt-note {
    margin-top: 0.75rem;
  }

  .hamburgerContent__wrap:nth-of-type(2) {
    padding-bottom: 10.125rem;
    margin: 40px 0 0;
    position: relative;
  }

  a.contactBtn {
    margin-top: 0;
  }

  a.contactBtn + a.contactBtn {
    margin-top: 1rem;
  }

  .hamburgerContent__wrap:nth-of-type(2) > img {
    position: absolute;
    bottom: 2.125rem;
    left: 50%;
    transform: translateX(-50%);
  }

  .hamburgerContent__wrap:nth-of-type(2) > img {
    width: 4.875rem;
  }


  /* ========================================================
  HOME
  =========================================================*/
  .home__ttl {
    width: 18.75rem;
  }

  /* FV */
  /* .home__fv {
    max-height: 37.5rem;
  } */

  .home__fv-top {
    background-image: url(../img/genten/fv_top_img_sp.webp);
    aspect-ratio: 375 / 146;
  }

  .home__fv-video iframe {
    width: auto !important;
    height: 100vh !important;
    aspect-ratio: 16 / 9;
    left: 50% !important;
    transform: scale(1.2) translateX(-41.8%) translateY(0);
  }

  /* お知らせ */
  .home__news {
    -webkit-mask-image: none;
    mask-image: none;
    padding: 3rem 0 calc(3.75rem + 5rem);
    margin-top: 0;
  }

  .home__news-contents {
    width: 100%;
    margin-top: 0.625rem;
  }

  .home__news-contents-item {
    flex-direction: column;
    gap: 0.75rem;
    padding: 1rem 0;
  }

  .home__news-contents-item-date {
    font-size: 1rem;
    color: #888;
  }

  .home__news-contents-item-ttl {
    font-size: 1rem;
  }

  /* 営業日 */
  .home__hour {
    padding: 0 0 calc(3.75rem + 5rem);
    margin-top: 2.8125rem;
  }

  .home__hour-table {
    width: 100%;
    margin-top: 1.875rem;
  }

  .home__hour-table thead tr th {
    font-size: 0.875rem;
    padding-bottom: 0.5rem;
  }

  .home__hour-table thead tr th:first-child {
    width: 5.375rem;
  }

  .home__hour-table tbody tr th {
    font-size: 0.875rem;
    text-align: left;
    padding: 0.875rem 0 0.5rem;
  }

  .home__hour-table tbody tr td .open,
  .home__hour-table tbody tr td .close {
    width: 0.625rem;
  }

  .home__hour-table tbody tr td .open {
    background-size: 0.5rem auto;
  }

  .home__hour-table tbody tr td .close {
    background-size: 0.625rem auto;
  }

  .home__hour-note {
    font-size: 0.75rem;
    margin-top: 1rem;
  }

  /* おしながき */
  .home__menu {
    background-image: url(../img/genten/bg_sp.webp);
    -webkit-mask-image: url(../img/genten/bg_mask_sp.svg);
    mask-image: url(../img/genten/bg_mask_sp.svg);
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    padding: 5rem 0 calc(3.75rem + 5rem);
    margin-top: -5rem;
  }

  .home__menu-top {
    width: 100%;
  }

  .home__menu-top-wrap:nth-of-type(n) {
    flex-direction: column-reverse;
    align-items: center;
    gap: 1.25rem;
    margin-top: 1.875rem;
  }

  .home__menu-top-wrap + .home__menu-top-wrap {
    margin-top: 3rem;
  }

  .home__menu-top-wrap:nth-of-type(1) > img:nth-of-type(1) {
    margin-left: 0;
  }

  .home__menu-top-wrap > img:nth-of-type(2) {
    width: 100%;
  }

  .moreBtn--open {
    margin-top: 3rem;
  }

  .moreBtn--close {
    margin-top: 3.25rem;
  }

  .moreContent {
    padding: 0;
  }

  .home__menu-note {
    text-align: left;
    margin-top: 3rem;
  }

  .home__menu-list {
    grid-template-columns: 1fr;
    gap: 2rem;
    width: 100%;
    margin-top: 1.625rem;
  }

  .home__menu-under {
    grid-template-columns: 1fr;
    gap: 2.875rem;
    width: 100%;
    margin-top: 3.75rem;
  }

  /* おもてなし */
  .home__service {
    -webkit-mask-image: url(../img/genten/bg_mask_sp.svg);
    mask-image: url(../img/genten/bg_mask_sp.svg);
    padding: 5rem 0 calc(3.75rem + 5rem);
    margin-top: -5rem;
  }

  .home__service-list {
    flex-direction: column;
    align-items: center;
    gap: 3.5rem;
    width: 100%;
    margin-top: 3.25rem;
  }

  .home__service-list-item {
    gap: 1.625rem;
    width: 18.4375rem;
  }

  /* こだわりの素材 */
  .home__materials {
    background-image: url(../img/genten/bg_sp.webp);
    -webkit-mask-image: url(../img/genten/bg_mask_sp.svg);
    mask-image: url(../img/genten/bg_mask_sp.svg);
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    padding: 5rem 0 calc(3.75rem + 5rem);
    margin-top: -5rem;
  }

  .home__materials-container:nth-of-type(n) {
    flex-direction: column;
  }

  .home__materials-container {
    gap: 1.25rem;
    margin-top: 1.875rem;
  }

  .home__materials-container + .home__materials-container {
    margin-top: 2.25rem;
  }

  .home__materials-container > img {
    width: 100%;
  }

  .home__materials-container-wrap {
    width: 100%;
  }

  .home__materials-ttl {
    font-size: 1.875rem;
    margin-top: 0;
  }

  .home__materials-txt {
    margin-top: 1.25rem;
  }

  /* 駐車場 */
  .home__parking {
    -webkit-mask-image: url(../img/genten/bg_mask_sp.svg);
    mask-image: url(../img/genten/bg_mask_sp.svg);
    -webkit-mask-size: 100% auto;
    mask-size: 100% auto;
    padding: 5rem 0 5.625rem;
    margin-top: -5rem;
  }

  .home__parking-content {
    flex-direction: column;
    gap: 2rem;
    margin-top: 2.5rem;
  }

  .home__parking-txt {
    margin-top: 0;
  }

  .home__parking-content > img {
    width: 100%;
  }


  /* ========================================================
  フッター
  =========================================================*/
  .footer__wrap {
    flex-direction: column;
    align-items: flex-start;
    padding: 2.5rem 0 4rem;
  }

  .footer__name {
    align-items: flex-start;
    margin: 0;
  }

  .footer__name > img {
    width: 8.75rem;
  }

  .footer__copy {
    position: absolute;
    bottom: 1.25rem;
    left: 50%;
    transform: translateX(-50%);
  }

  .footer__info {
    display: flex;
    flex-direction: column;
    margin-top: 2.5rem;
  }

  .footer__contact-txt {
    order: 1;
  }

  .footer__info-note {
    order: 2;
    margin-top: 0.75rem;
  }

  .footer__info-address {
    order: 3;
    margin-top: 2.5rem;
  }

  .footer__contact {
    margin: 2.5rem auto 0;
  }


}