/*Noto Sans JP*/
.noto-sans {
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 400;
  font-style: normal;
}

/*セリフ体こっちNoto Sans-serif JP*/
.noto-sans-serif{
  font-family: "Noto Serif JP", serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}


/*スクロール時のSVGカラー処理*/

.svg-color{
  transition: .1s;


}

.isActive .svg-color{

    fill :black;
}
/*メニュー開閉時の処理*/
.is-active .svg-color{
  display: none;
}

/*utility*/
.u-sp{
  display: none;
}
.u-pc{
  display: inline-block;

}
.u-bl{
  border-bottom: solid 1px #000;
}

.bg_gray{
  background-color: #F5F5F5;
}

.bg_black{
  background-color: #000;
}

.bg_red{
  background: red;
}
/*layout*/

/*内部の要素を右寄せ*/
.l-containerRight {
  display: flex;
  justify-content: flex-end; /* 右寄せ */
}

.linkBtnLayout{
  margin: 2rem auto 0 auto;
  max-width: 1300px;
  width: 100%;
  display: flex;
  justify-content: center; /* 右寄せ */
}

/*位置調整　ブルワリーこだわり*/
.linkBtnLayout--h100{
  margin-top:6.25rem;
}


/*各セクションタイトル*/
.sectionTitleLayout{
  margin: 0rem auto 80px auto;
  max-width: 1300px;
  width: 100%;
  display: flex;
  justify-content: center; /* 右寄せ */

}





/*overlay*/
.js-addFix{
  max-height: 100vh;
  overflow: hidden;

}

.red{
  background-color: red;
}


/*fullsize-section*/
.full-size{
  width: 100%;
  margin: 0;
}

.section-1300{
  max-width: 1300px;
  margin-left: auto;
  margin-right: auto;
}

.section-1440{
  max-width: 1440px;
  margin-left: auto;
  margin-right: auto;
}
.section-1920{
  max-width: 1920px;
  margin-left: auto;
  margin-right: auto;
}
/*responsive-2column*/
.container {
  display: flex;
  flex-wrap: wrap;
}

.column img{
  max-width: 100%;
}

.container-2clm .column {
  width: 50%; /* PCでは2カラム */
  padding: 1rem;
  display: flex;

}

/*conceptで使用*/



/*foodで使用*/
        .foodContainer{
            display: flex;
            flex-wrap: wrap; /* 要素を折り返すために指定 */
            margin-bottom: 1rem;
            
        }
        .foodContainer__item {
            box-sizing: border-box; /* ボーダーボックスモデルを使用 */
        }
        .foodContainer__item:first-child {
            max-width: 400px; /* 一つ目の入れ物の幅を400pxに設定 */
        }
   

                .foodContainer__item:first-child img{
                    max-width: 100%;
                    height: auto;

                }
        .foodContainer__item:last-child {
            flex: 1; /* 2つ目の入れ物は残りのサイズを占める */
            padding-left: 58px;
            padding-top:2rem;
        }


.foodpictureContainer{

  width: 100%;
  display: flex;

  justify-content: space-between; /* 子要素の間隔を均等にする */

}
.foodpictureContainer__item{

  flex: 1; /* 均等に幅を分配 */
  text-align: center; /* テキストを中央寄せ */

  padding-right: 2rem;
}
.foodpictureContainer__item:last-child{
  padding-right: 0;
}
.foodpictureContainer__item img{
  max-width: 100%;
  width: 100%
}

/*個別ページで使用*/
.foodTableMargin{
	margin-bottom: 5rem;
}

/*accessでは要素を下部配置する*/
.accessSection .column {
  flex-direction: column-reverse; /* 内部の要素を下部に配置 */
}





/*header*/
.header{
  z-index: 999;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  padding-right: 1rem;
  background: #fff;
  padding: 0;
}
.header__inner{  
  padding: 0;
  width: 100%;
  display: flex;
  align-items: flex-start;
  background: transparent;
 justify-content: space-between;
 background: #ffffff;
}


.header__logo{
  margin-top: 0.3rem;
  padding: 0rem 1.5rem;
  margin-right: auto;

  height: auto;

}
.header__logo.isActive{
  width:120px;
}







/*header 機能ナビ*/
.feature-navigation {
  display: flex; /* 横並びを設定 */
  align-items: center; /* 要素全体の縦位置を中央揃え */
  padding: 0;
  background-color: #ffffff;
}

.feature-navigation__item {
  display: flex; /* 要素内のコンテンツを柔軟に配置 */
  align-items: center; /* コンテンツを縦方向で中央揃え */
  font-weight: bold;
  font-size:1rem; /* 適切な文字サイズ */
  text-align: center;
  padding: 0 1.125rem; /* 左右の余白を設定 */
  border-right: 0.0625rem solid #CACACA; /* 罫線を右側に設定 */
}

.feature-navigation__item:nth-child(-n+2) {
  border-right: 0.0625rem solid #CACACA; /* 最初の2つに罫線を設定 */
}

.feature-navigation__item:nth-child(n+3) {
  border-right: none; /* それ以外の要素には罫線を付けない */
}
.feature-navigation__item:last-child{
  padding:0;
}

.feature-navigation__link {
  font-size: 1rem; 

  color: inherit; /* 継承色を適用 */
}

.feature-navigation__text{
  text-decoration: underline; /* 下線を付与 */
  

}

/* グローバルナビのスタイル */
.global-nav {
    background-color: transparent;
    padding: 1.1rem 1rem;
    width: 50%;

}

.global-nav__list {
    display: flex; /* 横並びにする */
    justify-content: space-around; /* 項目を均等配置 */
    align-items: center; /* 項目を中央揃え */
}

.global-nav__item {

    margin: 0;
}
.global-nav__item a{

      color: #fff;
}

.isActive .global-nav__item a{

      color: #000000;
}




.global-nav__link {
    color: #fff;
    text-decoration: none;
    font-size: 1.2rem;
    padding: 8px 15px;
    transition: background-color 0.3s ease;
}

.global-nav__link:hover {
    background-color:rgba(255,255,255,.2);
    border-radius: 4px;
}










/*reserveBtn*/
.reserveBtn{
  border-left: solid 1px #fff;
  min-width: 150px;
  font-size:1rem;
  display: flex;
  line-height: 100%;
  text-align: center;
  }
.reserveBtn a{ 
  background: #757685;
  align-items:center;
    padding: 1.1rem 1.2rem 0.9rem;
    color: #fff;
    text-decoration: none;
    transition: .5s;
}


.reserveBtn a:hover{
  background:#171C61;}

/*hamburgerMenu*/

.hamburgerBtn{

  width: 100%;
  display: flex;
  background: #004471;
  padding: 1rem 0rem 1rem 2rem;
  
  
}
.hamburgerBtn__text{
  z-index: 300;
  font-size:1rem ;
  color: #fff;
}
.hamburgerMenu{
  color:#fff;
}

.hamburgerMenu .footer__inner{
  border-top:solid 1px #fff;
  padding-top: 1rem;
  border-bottom:none;
  padding-bottom: 0;
  background:#434447;/*この背景がないとoverscroll時に透けて見える*/
}





.hamburgerBtn__icon {
  position: relative;
  z-index: 100;
  right: 16px;
  height: 24px;
  width: 36px;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  z-index: 500;
}



.hamburgerBtn__iconBar {
  display: block;
  content: "";
  width: 100%;
  height: 1px;
  background: #fff;
}

.hamburgerBtn__iconBar::before,
.hamburgerBtn__iconBar::after {
  display: block;
  position: absolute;
  content: "";
  width: 100%;
  height: 1px;
  background: #fff;
  transition: 0.3s ease;
}

.hamburgerBtn__iconBar::before {
  top: 0;
}

.hamburgerBtn__iconBar::after {
  bottom: 0;
  width: 80%;
}

.hamburgerBtn__icon.is-active .hamburgerBtn__iconBar {
  height: 0;
}

/* ボタンをクリックしたときにバツに変える */
.hamburgerBtn__icon.is-active .hamburgerBtn__iconBar::before {
  opacity: 1;
  top: 50%;
  transform: rotate(45deg) translateY(-50%);
  transition: 0.3s ease;
}

.hamburgerBtn__icon.is-active .button-bar::after {
  opacity: 1;
  top: 50%;
  width: 100%;
  transform: rotate(-45deg) translateY(-50%);
  transition: 0.3s ease;
}

/*hamburgerMenu innerMenu*/
.hamburgerMenu {
  opacity: 0;
  position: fixed;
  inset: 0;
  transition: 0.3s ease;
  background:#434447;
  z-index: -10;

}

.hamburgerMenu.is-active {
  opacity: 1;
  visibility: visible;
  width: 100%;
  height: 100vh;
  transition: 0.5s ease;
  z-index: 100;
  
}


.overlay {
  position: fixed;
  inset: 0;
  z-index: 31;
  width: 100vw;
  height: 100vh;


}

/*ロゴと会社情報を横並びにする*/
.overlay-infoLayout {
    display: flex;
    justify-content: space-between; /* 子要素を両端に配置 */

}



.overlay__body{
  padding:2rem;
  height:calc(100svh - 300px);
  overflow-y: scroll;
}
.overlay__footer{
  height: 40svh;
  min-height: 300px;
  padding:1rem 2rem;
}

.overlay .verticalNav__list{
  margin:6rem 0 4rem 0;
}
/*
.list {
  display: flex;
  z-index: 500;
  align-items: center;
  justify-content:left;
  height: 100vh;
  height: 100dvh;
  gap: 24px;
  font-size: 20px;
  flex-direction: column;
  list-style-type: none;
  font-size:1.25rem;
}

*/









/*heroheader*/
.heroHeader {
  position: relative;
  background-image: url(../assets/top/mainVisual.png);
  
  background-size: cover;
  background-position: center;
  width: 100%;
  height: 100vh;/*calcレンダリング未対応用*/
  height: calc(100svh); /* 画面の高さいっぱいに表示 */
  display: flex;
  padding:0rem;
  

  flex-direction: column; /* 縦並びにする */
  color:#fff;
  text-align: center;
  align-items: center;
  justify-content: center;




  overflow: hidden;
 }
.heroHeader::after {
  position:absolute;
  content: "";
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,.2);
}

/*slideshow*/
.image {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  opacity: 0;
  background-size: cover;
  background-position: center center;
  
  animation: image-switch-animation 25s infinite;
}

.src1 {
 background-image: url(../assets/top/mainVisual.png);/*一つ目の背景は.heroHeaderにも設定すること*/
}
.src2 {
  background-image: url(../assets/top/mainVisual.png);
}
.src3 {
  background-image: url(../assets/top/mainVisual.png);
}
.src4 {
  background-image: url(../assets/top/mainVisual.png);
}
.src5 {
  background-image: url(../assets/top/mainVisual.png);
}

@keyframes image-switch-animation {
  0%{ opacity: 0;}
  5%{ opacity: 1;}
  25%{ opacity: 1;}
  30%{ opacity: 0;}
  100%{ opacity: 0;}
}
.image:nth-of-type(1) {
  animation-delay: 0s;
}
.image:nth-of-type(2) {
  animation-delay: 5s;
}
.image:nth-of-type(3) {
  animation-delay: 10s;
}
.image:nth-of-type(4) {
  animation-delay: 15s;
}
.image:nth-of-type(5) {
  animation-delay: 20s;
}



.heroHeader__head{

  height: 33.3%;
  width: 100%;
  align-items: top;
  justify-content: center;
}

.heroHeader__body{
  z-index: 10;
  width: 100%;
  height: 4.3%;
  align-items: center;
  justify-content: center;
  display: flex;
  padding:1rem;
}


.heroHeader__imgWrapper{
    min-width: 125px;
    width:8.6vw;
    height: auto;
    aspect-ratio:325/446;
    overflow: hidden;

}

  .heroHeader__logo{
    width:100%
  }

.heroHeader__cta{
  z-index: 10;
  padding:0 0 48px 48px;
  width: 100%;
  height: 65.3%;
  text-align: left;
  display: flex;
  flex-direction: column-reverse; /* 内部の要素を下部に配置 */
}

.heroHeader__copy{
  font-family: "Noto Serif JP", serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-size: 1.875rem;
  line-height: 150%;
  margin-bottom: 2rem;


}



/*アドレス heroheader*/

.heroAddressBlock{
  padding:0.875rem 1.2rem 0.4375rem 1rem;
  background: #fff;
  display: inline-block;

}


/*heroCtaText*/
.heroAddress{
  width: 100%;
  text-align: center;
  font-size:1rem;
  color: #000000;
}
.heroAddress::before {
  content: url('../assets/top/MapPin.svg');
  display: inline-block;
  vertical-align: middle; /* 縦位置を中央に調整 */
  margin-right: 8px; /* アイコンとテキストの間隔調整 */
}



/*reservation heroheader*/


.reservation{
  width: 550px;
  background:#fff;
  border-radius:4px;
  padding:1rem 1.5rem;
  display: flex; /* Flexコンテナを作成 */
  flex-wrap: wrap; /* アイテムが横並びで収まらない場合、折り返す */
  justify-content: center; /* 横軸中央揃え */
  align-items: center; /* 縦軸中央揃え */
 
}

.reservation__left {
  flex: 1; /* 残りの幅を均等に分配 */
  padding-right: 0.625rem; /* 左の入れ物内の余白 */
        }

.reservation__right {
  width: 200px; /* 右の入れ物の固定幅 */
 
}

/*テキストとフォーム*/
.reservation__head{


}

.heroCta__tel{
  font-weight: bold;
  font-size: 2.5rem;
  width: 100%;

  color: #171c61
}
.heroCta__tel span{
  margin-top:.75rem;
  display: block;
  font-size: 1rem;

}


.reservation__btn{
  width: 100%;
  font-family: "Noto Sans JP", sans-serif;
  font-size:1rem;
  font-style: normal;
  display: inline-block;

  background:#757685;
  color: #fff;
  border: none;
  text-align: center;
  padding:0.5rem;
  max-width: 100%;
  transition: .5s;
  text-decoration:none;
  cursor: pointer;
}

.reservation__btn:hover{
    background:#171C61;
}


/*heroCtaText*/
.heroCtaText{

  padding:8px 14px;

 
  width: 100%;
  text-align: center;
  font-size:1rem;
  color: #000000;
}

.heroTel__text{
  margin-top: .7rem;
  display: block;
  font-weight: bold;
  font-size:1rem;
}

/*下層ページのヘッダー*/
.lowerHeroHeader{
  position: relative;

  background-size: cover;
  background-position: center;
  width: 100%;
  min-height: 300px;
  height: 23svh; 
  display: flex;


  flex-direction: column; /* 縦並びにする */
  color:#fff;
  text-align: center;
  align-items: bottom;
  justify-content: center;
border-bottom: solid 1rem #000;

}

.lowerHeroHeader::after {
  position:absolute;
  content: "";
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,.2);
}

.lowerHeroHeader__head{

  height: 60px;
  width: 100%;
  align-items: top;
  justify-content: center;
}

.lowerHeroHeader__body{
  z-index: 10;
  width: 100%;
  height: clac(100% - 60px);
  align-items: bottom;
  justify-content: center;
  display: flex;

}


.lowerHeroHeader__imgWrapper{
  padding-top: 1rem;
     width:120px;
     height: auto;
     aspect-ratio:325/446;
     overflow: hidden;
}

  .lowerHeroHeader__logo{
    width: 100%;
    opacity: .5;
  }















/*horizontal-navi*/
.horizontalNav{
  width: 100%;
  padding:1.5rem 1rem ;  
  text-align: center;
}



.horizontalNav__list{
  display: inline-block;

}

.horizontalNav__list::after{
  content: "";
  display: table;
  clear: left;
}

.horizontalNav__item{
  line-height: 140%;
  float: left;
}

.horizontalNav__item a{
  font-size:1rem;
  color: #000000;
  margin-right: 1.5rem;
  text-decoration: none;
}


.horizontalNav--font-white .horizontalNav__item a{
  color: #fff;

}



.horizontalNav--inFotter .horizontalNav__item a{
  color: #fff;
  margin-right: 1.5rem;
  text-decoration: none;
}
.horizontalNav__item a:hover{
  text-decoration:underline;
}
.horizontalNav__item:last-child a{
  margin-right:0;
}

/*bread-navi*/
.breadNav{
  width: 100%;
  max-width: 1920px;

  padding: 0.5rem 1rem;
}

.breadNav__list{
  width: 100%;
}

.breadNav__list::after{
  content: "";
  display: table;
  clear: left;
}

.breadNav__item{
  float: left;
  margin-bottom: .5rem;
}

.breadNav__item::after{
  margin-right:1rem;
  padding-left: 1rem;
  content: ">";
}


.breadNav__item:last-child::after{
  margin-right: 0;
  content: "";
}

.breadNav__item a{
  color: #000;
 
  text-decoration: none;
}
.breadNav__item:first-child a{
  position: relative;
  padding-left:2rem;
}
.breadNav__item:first-child a::before{
  position: absolute;
  top:calc(50% - 9px);
  left: 0;
  content: url(../assets/cmn/breadIcon.svg);
  width: 14px;
}


.breadNav__item a:hover{
  text-decoration:underline;
}
.breadNav__item:last-child a{
  margin-right:0;
}
.breadNav__item:last-child{
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;

}
/*よくある質問*/
.faqContainer{
  padding: 1rem;
}
/*cta-area*/
.ctaArea{
  padding: 1rem;
  width: 100%

}
.ctaArea__inner{
  padding:3rem 4rem;
  max-width: 1150px;
  box-sizing:border-box;
  margin-left: auto;
  margin-right: auto;
  background: #fff;
  border: solid #cacaca 10px;
}



.ctaArea__body{
  margin-top:3rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content:center;
}

.ctaArea__column{
  width: 50%;
  display: flex;
  flex-direction: column-reverse; /* 内部の要素を下部に配置 */
}
.ctaArea__text{

  font-size: 1rem;
  text-align: left;
  margin-right: .5rem;

}
.ctaArea__button{

  text-align: center;

}
.ctaArea__link{
  display: block;
  margin: .5rem 0;
  font-size:0.75rem;
}

/*CTA*/
.ctaArea__address{

}
.ctaArea__address h2{
  font-size:2.5rem;
  font-weight: bold;
  margin-bottom:1rem;
}
.ctaArea__telephone{

  margin-bottom: 1rem;
  font-weight: bold;
  width: 100%;
  text-align: left;
  font-size:1.5rem;
  color: #171c61
}

.ctaArea__title{
  line-height: 110%;/*背景が削れるのを防ぐため*/
  padding: 0rem 1rem 0rem 3.5rem;
  background-image: url(../assets/cmn/Question.svg);
  background-repeat: no-repeat;
  background-size: 3rem;
  background-position:middle left;


}

.ctaArea__Businesshours{
  display: block;
  font-size:1.5rem;
  margin-top: .7rem;
}

.ctaArea__telephone{ 
  font-weight: bold;
  font-size:2.5rem;
}


/*メニュー展開時のスクロール制御スタイル*/
.js-addCover{
  max-height: 100vh;
  overflow: hidden;
}





/*food*/


.foodMenuAttention{
  font-size: 0.75rem;
  margin-top: .5rem;
  display: none;
}



/*access*/


.access{
  max-width: 520px;

  padding:0rem 2rem;

}


.access__title{
  font-size:2.5rem;
  line-height: 140%;
  margin-bottom: 1rem;
}
.access__text{
  font-size:1rem;
  line-height: 160%;
  margin-bottom:1rem;
}


.access__body{
  line-height: 200%;
  margin-top: 5rem;
}

.access__storeName{
  font-size:1.25rem;
  font-weight: bold;
  line-height: 160%;
}
.access__storeText{
  font-size:1rem;
  line-height: 160%;

}

.access__address{
  margin: .5rem 0;
  font-size: 0.75rem;
  font-style: normal;
}


/*footer*/

.footer{
  padding: 4.75rem;
  background: #434447;
  color: #fff;
  background-image: url(../assets/cmn/bg-footer.png);
}
.footer__inner{
  border-bottom:solid 1px #fff;
  padding-bottom: 1.875rem;

}





.footer__info::after{
  content: "";
  display: table;
  clear: both;
}
.footer__logo{
  float: left;
  margin-right: 2rem;
  width:150px;
  height: auto;
  padding: 0rem;
  background: #fff;

  margin-bottom: 1rem;
  text-align: center;

}

.footer__logo--overlay{
  padding: .5rem;
}





.footer__logo img{
  max-width: 100%;

}


.footer__infoBody{
  float: left;

}

  /*infoBody内の要素のスタイル*/
.infoBody__title{
  margin-bottom: 1rem;
  font-size:1.5rem;
}
.infoBody__title a{
  color:#fff;
  text-decoration: none;
}


.infoBody__text{
  font-size:1rem; 
  margin-bottom: .5rem;
}
.infoBody__address{
  font-size:1rem; 
  font-style: normal;
  margin-bottom: 1rem;

}

.infoBody__line img{
  width:123px;
  height: 28px!important;

}



.verticalNav__item{
  display: flex;
  justify-content: left;
  align-items: center;
  margin-bottom: 1rem;

}

.verticalNav__item:hover.verticalNav__item::before{
 margin-right: .75rem;

}
.verticalNav__item::before{
  margin-right: .5rem;
    content: "";
    width: .5rem;
    height: 1px;
  
    background-color:#fff; /* 線の色を調整 */
    transition:.5s;
}



.verticalNav__list a{
  color: #fff;
  margin-right: 1rem;
  text-decoration: none;
}


.footer__sns{
  width: 100%;
  padding:1rem 0;
}

.footer__sns::after{
  content: "";
  display: table;
  clear: left;
}
.footer__sns__item{
  margin-right: 1rem;
  float: left;
}
.footer__sns__item:last-child{
  margin-right: 0rem;
}




.footer__googleMap{
  margin-bottom:2.8125rem;
  width: 100%;
  
  height: 336px;
}

.googlemap{
  max-width: 1920px;
  width: 100%;
  height: 336px;  filter: grayscale(100%);
   transition: all 0.7s ease;
}







.copyright{
  display: block;
  font-size: 0.875rem;
  padding:1.25rem 0;

}






/*news*/

.newsContainer {
  display: flex; 
  max-width: 1300px; 
  width: 100%;
  margin: 0 auto 260px auto;
  padding:0 1rem 1rem 1rem
}

.newsContainer__item {
  flex: 1; 
  padding: 0 calc((32 / 1440) * 100vw);
  max-width: 33.3%;
}



















/*newsrelease*/
.newsList{
  width: 100%;
  padding: 1rem;
  
}


.newsList__item{
  cursor: pointer;
  display: flex;
  width: 100%;
  font-size: 1rem;

  border-bottom:solid 1px #000;
  transition:.5s;
  margin-bottom: .5rem;
}
.newsList__link{
  color: #000;

}


.newsList__item:hover .newsList__link{
  color: #fff;

}
.newsList__link{
  width: 100%;
  height: 100%;
  margin-bottom: .5rem;
  padding: 2rem 1rem;
  display: inline-block;
  text-decoration: none;
  transition:.5s;
}

/*カテゴリーによってホバーの色をかえる*/

.newsList__link:hover{

  border-radius:.3rem;

}

.bg-blog:hover{
  background: #d261a1;

}
.bg-newsrelease:hover{
  background:#4974c9;

}

.bg-production:hover{

  background: #aacd06;
}

.newsList__time{
    display:inline-block;
    padding-right: 1rem;

}

.newsList__title{
    display:inline;
}


/*news*/

        .procutionContainer {
            display: flex; /* Flexコンテナを作成 */
            max-width: 1300px; /* 親要素の幅を設定 */
            width: 100%;
            margin: 0 auto; /* 親要素を中央揃え */
            padding: 1rem
        }

        .procutionContainer__item {
            flex: 1; /* アイテムを均等に分配 */
            padding: 0 .5rem;
            max-width: 33.3%;
        }


/*fixReservationBtn
.fixReservation{
  position: fixed;
  right: 0;
  top:calc(50% -  100px);

  text-align: right;


}
.fixReservation__btn{
  background: #000;
  padding:1rem 2rem;
  color: #fff;

  text-decoration: none;
}
*/

/*pageTop*/
.pageTop{
    position: fixed;
    bottom: -10rem;
    right: 2rem;
    cursor: pointer;
    transition: .5s;
    padding: .45rem .5rem .5rem .5rem;
    background: rgba(255, 255, 255,.5);
    border-radius: 4px;
    display: flex;
    justify-items: center;
    font-size:.75rem;
    line-height: 100%;
}


.isActive.pageTop{
    position: fixed;
    bottom: 2rem;
}



/*下層ページ*/

.lowerContainer{
  padding: 1rem;
  text-align: left;
  margin: 0 auto;
}
.lowerContainer--80{
  max-width: 800px;
}
.lowerContainer--850{
  max-width: 850px;
}
.lowerContainer--1000{
  max-width: 1000px;
}
.lowerContainer--1140{
  max-width: 1140px;
}
.lowerContainer--1300{
  max-width: 1300px;
}
.lowerContainer--1440{
  max-width: 1140px;
}
.lowerContainer--1920{
  max-width: 1920px;
}





/*お問い合わせ お問い合わせページはフォームのスタイルも含むためこれを使用すること*/
.contactContainer{
  padding: 1rem;
  max-width: 1140px;
  text-align: left;
  margin: 0 auto;
  line-height: 140%;
}


.contactContainer input,.contactContainer textarea{
  width: 100%;
  padding: .5rem;
  margin:0.75rem 0 2rem 0;
}

.contactContainer label{
    width: 100%;
  margin: 1rem 0;
}

.contactContainer input[type="submit"]{
  margin: 1rem auto;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 400;
  font-style: normal;
  display: block;
  line-height: 100%;

  color: #fff;
  border: none;
  text-align: center;
  padding: 1.25rem 5.4rem;
  max-width: 100%;
  transition: .5s;
  text-decoration:none;
  font-size:1rem;
  background: 004471;
  cursor: pointer;
  max-width:300px
}

.contactContainer input[type="submit"]:hover{
   background:#434447;
}

/*各ページの上部に置くコピーに使用*/
.lowerContainer__copyText{
  font-size: 1.25rem;
	line-height: 160%;
	margin-bottom: 5rem;
  width: 100%;
}

.contactContainer p{
  padding: 1rem;

}



/*archive*/
.archiveContainer {
  
    display: flex;
    flex-wrap: wrap; /* 必要に応じて折り返しを設定 */
    padding: 0;
    margin-bottom: 2rem;
}

.archiveContainer__item {
    /* ここにアイテムのスタイルを設定 */
    width: 33.33%; /* 3列に均等に配置 */
    padding: 0 1rem; /* アイテムの間隔を調整 */
    margin-bottom: 2rem;

}



.archiveContainer__item a{
   text-decoration: none;
}
.archiveContainer__item a:hover{
   text-decoration:underline;
   color:#000;
}



/*single*/
.singleTitle{
  font-size:2rem;
  line-height:  160%;
  padding: 0 1rem;
  margin-bottom:1rem;
}
.singleTime{
  display: inline-block;
  font-size:0.85rem;
  text-decoration: none;
  margin-bottom: 25px;
  padding-left: 1rem;
  color: #000;
}

.singleSearviceCategory{
  margin-bottom: .5rem;
}

.singleSearviceCategory__title{
  font-size:1.5rem;
  padding: 1.5rem 1rem;
  margin-bottom: 1rem;
}
.singleSearviceCategory__title::before{
  content:"a";
  margin-right: .5rem;
  width: 15px;
  height: auto;
  background: #000;
}

.singleImg{
  padding: 0 1rem;
  width: 100%;
  height: auto;

}
/*
.singleImg figure{
  width: 100%; 
  aspect-ratio: 16 / 9; 
  overflow: hidden;
  position: relative;
}

.singleImg img{
  width: 100%;
  height: 100%;
  object-fit: cover; 
  object-position: center;
}*/




.singleProductInfo{
    text-align: right;
    padding:0 1rem 2rem 1rem;

  
}
.singleProductName{
  font-size:1.5rem;
  margin-bottom: 1rem;

}
.singleProductUrlLabel{
  margin-right: .5rem;

}






.singleContainer {
  margin: 0 auto;
  width: 100%;
  max-width: 1150px;
  
  padding-top:4.375rem;/*70px*/
  padding-bottom: 3.125rem;/*50px*/
  padding-top:min(4.8vw,4.375rem);
  padding-bottom:min(3.4vw,3.125rem);

  display: flex;
  flex-wrap: wrap; /* 必要に応じて折り返しを設定 */
}

/* サービスカテゴリー */
.service-category {
    /* ブロックのスタイル */
    padding-left: 1rem;
    padding-right: 1rem;

}

/* Element: list */
.service-category__list {
    /* リストのスタイル */
    width: 100%;
    list-style-type: none;
    padding: 0;

}

/* Element: item */
.service-category__item {
    /* リストアイテムのスタイル */
    margin-right: .5rem;
    margin-bottom: 1rem;
    display: inline-block; /* 横並びにする */
}
.service-category__item::last-child{
   margin-right: 0rem;

}
/* Element: link */
.service-category__link {
    /* リンクのスタイル */

    border-radius: 4px;
    font-size:.75rem;
    padding:.2rem .5rem;
    background-color: #ffffff; /* 白い背景 */
    border: 1px solid #cacaca;/* 黒い線 */
    text-decoration: none;
    color:#61584B;
    transition: .5s;
}
.service-category__link:hover{
  color: #fff;
  background: #aacd06;
}





.singleMain {
    /* メインコンテンツのスタイルを設定 */
     width: 100%;
       padding: 2rem;
}

.singleSidebar {
    /* サイドバーのスタイルを設定 */
    width:300px ;
    padding: 0 1rem;
}

/**/
.postNavi{
  border-top: solid 1px #cacaca;
  padding: 2rem 1rem;
  display: flex;
  justify-content: space-between;
}

/*ページネーション*/
.pagination {
  justify-content: center;
  margin: 2rem auto;
  text-align: center;
  display: flex;
    gap: 1.5rem; /* カラム間のスペースを設定 */

}

.pagination a{
  color:#000000;
  transition: .5s;
}
.pagination a:hover{
  color:#171C61;

}


.nav-links .page-numbers {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.nav-links a.page-numbers ,
.nav-links .current,
.nav-links a.prev,
.nav-links a.next,
.nav-links .dots {
    color:#000;
    border:#cacaca solid 1px;
    padding:1rem;
    margin: 0 .5rem;
    transition: .5s;
    text-decoration: none;
}

.nav-links a.page-numbers:hover {
    color: #FFF;
    background-color:#757685;
    border-color:#757685;

}
.nav-links .current {
    background-color:#757685;
    border-color:#757685;
    color: #fff;
    padding:1rem;
}
.nav-links a.prev,
.nav-links a.next {
    border:#cacaca solid 1px;

    position: relative;
}


.nav-links .next::before {
    left: -15px;
}

.nav-links .prev::after {
    right: -15px;
}

.nav-links .dots {
    background: transparent;
    border: none;
}

/*plan*/
.planBtn{
  text-align: center;
  margin: 4rem auto 2rem auto;
}

/*矢印用*/
.margin-arrow{
  width: 100%;
  text-align: center;
  padding-bottom:2rem;
}
/*センター文字*/

.textCenter{
  padding-top: 4rem;
  font-size:2.5rem;
  text-align: center;
  line-height: 150%;
}







/*contactform*/
.wpcf7-form{
  width: 100%;
}

.wpcf7-form input, .wpcf7-form textarea{
  width: 100%;
  padding:.5rem 1rem;
  margin-top: .5rem;
}

.wpcf7-submit{

  display:block;

 max-width: 230px!important;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 400;
  font-style: normal;

  line-height: 100%;
  background:#171C61;
  color: #fff;
  border: none;
  text-align: center;
  padding: 1.25rem 5.4rem!important;
  border-radius: 4px;
  transition: .5s;
  text-decoration:none;
  font-size:1rem;
  margin-left: auto;
  margin-right: auto;
  cursor: pointer;
}
.wpcf7-submit:hover{
  background: #61584B;
}

/*アクセス*/
/*access*/
.accessMap{
  background: #ffffff;
  text-align: left;
  padding: 2.5rem 2.8125rem;
}
.accessMap__title{
  font-size:1.75rem;
  font-weight: bold;
  line-height: 160%;
}
.accessMap__text{
  font-weight: bold;
  line-height: 160%;
  margin-bottom: 2rem;

}




/*サービスページ*/

.service-head{
  margin-bottom: 3rem;
}

.service__copy{
  font-size:1.5rem;
  margin-bottom: 1rem;
}

.service__lead{
  font-size:1rem;
  line-height: 150%;
  margin-bottom: 1rem;
}



/*サービスページの商品情報*/
.service-info {
    display: flex;
    flex-wrap: wrap; /* 1440px以下で1カラムにするために追加 */
    gap: 20px; /* カラム間のスペースを設定 */
    margin-bottom:2rem;
}

.service-info__left,
.service-info__right {
    flex: 1; /* 各カラムを等しく拡張 */

}
.service-info__right{
  text-align: right;
}
.service-info__left {
    display: flex;
    flex-direction: column; /* タイトルと説明文を縦並びにする */

}

.service-info__title,
.service-info__text {
  line-height: 150%;
    margin: 0;
}

.service-info__title{
  font-size:1.5rem;
  margin-top: 1rem;
  margin-bottom: 1rem;
}
.service-info__text{
  line-height: 150%;
  margin-bottom: 3rem;
}


.service-info__title::before{
  content:'a';
  width: 20px;
  height: auto;
  margin-right: .5rem;
  background: #000;
}


/*サービス紐づけ*/
.service-info__title--casestudy{
  padding-top: 1rem;

}


.service-info__sub-title,.service-price__title{
  font-weight: bold;
  font-size:1.2rem;
  line-height: 150%;
  margin-bottom: 1rem;
}

.service-info__img{
  width: 100%;
  margin-bottom: 1rem;

}
.service-info__right{
  text-align: center;
}
.service-info__right img{
  max-width:100%;
  height: auto;
}
.service-info__bana{
  margin: 2rem 0;

}
.service-info__bana img{
  max-width: 100%;
}

/*サービスページの料金情報 ※テーブル自体はmoduleに記述*/
.service-price{
  margin-bottom:4rem;

}

/*事例（ケーススタディ）*/
.casestudy__title{
    font-weight: bold;
  font-size:1.2rem;
  margin-bottom: 1rem;
}


.attention{
  line-height: 180%;
  font-size:.75rem;
}

@media (max-width: 1440px) {
    .service-info {
        flex-direction: column; /* 1440px以下で1カラムにする */
    }
}





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

.hamburgerBtn{
  display: flex;

}

.global-nav{
  display:none;
}
.header__inner{
    justify-content:initial
}
.header__innerSns{
  width: 100%;  
}

.header__logo{
  
}







/*制作実績*/
.procutionContainer__item {
  padding-right:.75rem;
 }
.procutionContainer__item:last-child{
  padding-right: 0;
}

/*foodで使用*/
        .foodContainer{
          padding: 1rem;
        }

.foodMenuAttention{
  display: block;
}

.ctaArea__column{
 width: 100%;
}


.lowerContainer{
  padding: 1rem;

}






.ctaArea__telephone{

margin-bottom:2rem;;
}




/*サービスページの商品情報*/
    .service-info {
        flex-direction: column; /* 1440px以下で1カラムにする */
    }

.service-info__left,service-info__right {

    padding: 1rem;
}





      }





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

  .header__logo{
    padding: 0rem .5rem;
  }


/*各セクションタイトルの位置*/
.sectionTitleLayout{
  margin: 0rem auto 2.5rem auto;
}






/*news*/

.newsContainer {
 
}

.newsContainer__item {
  display: none;
  flex: 1; 
  padding: 0 1rem;
  max-width: 100%;
}
.newsContainer__item:first-child{
  display:block;
}








/*utility*/
.u-sp{
  display: inline-block;
}
.u-pc{
  display:none;

}
.linkBtnLayout{
  margin: 2rem auto 1.5rem auto;
}

.container-2clm .column {
  width: 100%; /* SPでは1カラム */
}




/*hamburgerMenu*/


/*hamburgerMenu innerMenu*/
.hamburgerMenu {
  opacity: 0;
  position: fixed;
  inset: 0;
  transition: 0.3s ease;
  background:#434447;
  z-index: -10;
}

.hamburgerMenu.is-active {
  opacity: 1;
  visibility: visible;
  width: 100%;
  height: 100vh;
  transition: 0.5s ease;
  z-index: 100;
}


.overlay {
  position: fixed;
  inset: 0;
  z-index: 31;
  width: 100vw;
  height: 100vh;

}
.overlay__body{
  padding:1rem;



}


.overlay .verticalNav__list{
  margin:6rem 0 4rem 0;
}

/*overlay__footer footerと同じものを使用しているので注意*/

.overlay__body{

  height:60svh;

}

.overlay__footer{
  display: flex;
  flex-direction: column-reverse; /* 内部の要素を下部に配置 */
  padding:1rem;


}



  /*infoBody内の要素のスタイル*/
.overlay__foote .footer__info{
  margin-top: 0rem;
  margin-bottom: 1rem;
}


.overlay__footer .footer__info::after{
  content: "";
  display: table;
  clear: both;
}
.overlay__footer .footer__logo{
  float: left;
  margin-right: 1rem;
  width: 20vw;
}

.overlay__footer .footer__logo img{
  max-width: 100%;

}







.overlay__footer .overlay__sns{
  padding: 0;
  margin: 0;
}


.overlay__footer .footer__infoBody{
  width: 70vw;
  float: left;

}
.overlay__footer .column{
  padding:1rem 0;
}


.reserveBtn a:hover{
  background:#757685}




/*header*/
.header{
  padding: 0;
  background: transparent;


}

/*ヘッダ―機能ナビの項目をハンバーガーのみ表示*/
.feature-navigation__item{
  

}

.feature-navigation__item:last-child{
  display: inline;
}





/*重なった時の下レイヤーのリンクが踏めないためポジションを固定させている*/
.header__innerSns{
  position: fixed;
  margin-top:.5rem;
  width: 50px;
  right: .5rem;
  top:0;

}
/*headerSNSサイズ調整*/
.header__innerSns svg{
  width: 28px;
  height: 28px;
}

.header__innerSns li{
  margin-right: 0;
  margin-bottom: .7rem;
  display: block;
}




/*heroheader*/
.heroHeader {

  height: calc(100svh + 1rem); /* 画面の高さいっぱいに表示 */

  border-bottom:solid 1rem #000;
 }
.heroHeader__cta{
  padding:0 0.5rem;
  width: 100%;
  margin-bottom: 1rem;
}

.reservation__left {
  padding-right: 0; /* 左の入れ物内の余白 */
        }

.heroHeader__copy{
  font-family: "Noto Serif JP", serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-size: 1.875rem;
  line-height: 150%;
  margin-bottom: 2rem;
}

/*アドレス heroheader*/

.heroAddressBlock{
  padding:0.7rem 1rem 0.4375rem 1rem;
  width: 100%;
}




/*reservation*/

.reservation{
  width: 100%;
  flex-direction: column;
  padding:1rem 1rem;
}
.reservation__left,
.reservation__right{
    width:100%; /* アイテムの幅を余白を含めて計算 */
}


/*テキストとフォーム*/
.reservation__head{
  width: 100%;
  justify-content: space-between; /* アイテムを両端に配置 */
  margin-bottom: 0.875rem;
  text-align: center;

}

.reservation__headLeft{
}
.reservation__input{

   width: 100%;
}

.heroCta__tel{

  font-weight: bold;
  font-size: 2rem;
  width: 100%;

  color: #171c61;
}


.heroCta__tel span{
  margin-top:.75rem;
  display: block;
  font-size: 1rem;
  line-height: 140%;

}

/*hjorizontal-navi*/
.horizontalNav{
  padding: 1.875rem;
  font-size:0.75rem;
}



/*foodで使用*/
        .foodContainer{
            display: flex;
            flex-wrap: wrap; /* 要素を折り返すために指定 */
            flex-direction: column-reverse;/*要素を逆に指定*/
        }
        .foodContainer__item {
            margin: 0px; /* 入れ物同士の余白を58pxにするため、各要素に29pxの余白を指定 */
            padding: 0px;
            box-sizing: border-box; /* ボーダーボックスモデルを使用 */
              width: 100%;
        
        }
        .foodContainer__item:first-child {
            max-width: 100%; /* 一つ目の入れ物の幅を270pxに設定 */
            width: 100%;
        }
   

                .foodContainer__item:first-child img{
                    max-width: 100%;
                    height: auto;

                }
        .foodContainer__item:last-child {
            flex: 1; /* 2つ目の入れ物は残りのサイズを占める */
            padding-left: 0;
            width: 100%;
        }
.foodContainer__wrapper{
  width: 100%;
  overflow: hidden;

}
.foodImg{
  margin-top:1rem;
}

/*food下の写真*/
.foodpictureContainer{
  width: 100%;
  display: flex;
  justify-content: space-between; /* 子要素の間隔を均等にする */

}
.foodpictureContainer__item{
  padding: 0;
  flex-grow: 1;
}
.foodpictureContainer__item:last-child{
  padding-right: 0;
}
.foodpictureContainer__item img{
  max-width: 100%;

}




/*bread-navi*/

.breadNav{
  width: 100%;
  max-width: 1920px;
  padding:.2rem 0.875rem ;
  margin: 0 auto;
}

.breadNav__list{
  width: 100%;
  font-size: .75rem;
}

.breadNav__list::after{
  content: "";
  display: table;
  clear: left;
}

.breadNav__item{

  float: left;
}

.breadNav__item::after{
  margin-right:.5rem;
  padding-left: .5rem;
  content: ">";
}


.breadNav__item:last-child::after{
  margin-right: 0;
  content: "";
}

.breadNav__item a{
  color: #000;
 
  text-decoration: none;
}
.breadNav__item:first-child a{
  position: relative;

}
.breadNav__item:first-child a::before{
  position: absolute;
  top:calc(50% - 10px);
  left: 0;
  content: url(../assets/cmn/breadIcon.svg);
  width: 14px;
}


.breadNav__item a:hover{
  text-decoration:underline;
}
.breadNav__item:last-child a{
  margin-right:0;
  
}


.breadNav__item:last-child{
  width: 15rem;/*ここで文字数制限*/
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;

}



/*access*/
.access{
  
  padding:0rem 0rem;
  max-width: 100%;
}


/*horizontal-navi*/
.horizontalNav{
  padding-bottom: 1rem;
}


.horizontalNav__item{
  float: left;
  margin-bottom: 1rem;
}









/*cta-area*/
.ctaArea{
  padding: .7rem;
}
.ctaArea .m-level2Heading{

  transform: translateX(-2.5rem);/* ctaArea + ctaArea__inner の左余白分*/
}

.ctaArea__inner{
  width:100%;
  padding:1rem ;

}

.ctaArea__title{
  line-height: 120%;/*背景が削れるのを防ぐため*/
  padding: 0rem 1rem 0rem 2.5rem;
  background-image: url(../assets/cmn/Question.svg);
  background-repeat: no-repeat;
  background-size: 2rem;
  background-position:middle left;


}



.ctaArea__address h2{
  font-size:1.5rem;
  font-weight: bold;
  margin-bottom:1rem;
}
.ctaArea__body{
  margin-top: 3rem;
}

.ctaArea__column{
 width: 100%;
}


.ctaArea__text{
line-height: 140%;
}

.ctaArea__button .m-formBtn{
  font-size:1.5rem;
  padding: 1rem;
  width: 100%;
}
.ctaArea__Businesshours{
  display: block;
  line-height: 140%;
  font-size:1.3rem;
  margin-top: .7rem;
}






/*footer*/

.footer{
  padding: 2rem 1rem 1rem 1rem;
  background: #434447;
  color: #fff;

}

.footer .column{
  padding: 0;

}
.footer__inner{

  border-bottom:solid 1px #fff;
  padding-bottom: 1.875rem;
 

}
.footer__info{
  margin-top: 1rem;
  margin-bottom: 2.5rem;
}

.footer__info::after{
  content: "";
  display: table;
  clear: both;
}
.footer__logo{
  float: left;
  margin-right: 1rem;
  width: 20vw;
  padding: .3rem;
}

.footer__logo img{
  max-width: 100%;


}
.footer__sns{
  padding: 1rem 0 0 0;
}
.copyright{
  display: block;
  font-size: 0.875rem;
  padding:1rem 1rem .5rem 0;
  text-align: center;
  line-height: 100%;

}

.footer__infoBody{

  width: 60vw;
  float: left;

}

  /*infoBody内の要素のスタイル*/
.infoBody__title{
  font-size:1.2rem
}
.infoBody__subTitle{
  display: block;
  font-size:0.75rem;
  margin-top: .5rem;
  margin-bottom: 0.75rem;
}

.infoBody__text{
  font-size:0.8rem;
  font-size:0.75rem;
  line-height: 140%;
}
.infoBody__address{
  font-size:0.8rem;
  font-style: normal;
}

/*news*/


.procutionContainer {
  flex-direction: column; /* スマートフォン表示時に縦並びにする */
  width: 100%; /* 親要素の幅を100%に調整 */
}

.procutionContainer__item{
  padding-right:0; /* アイテム内の余白 */
  justify-content: center; 
  align-items: center;
}

.procutionContainer__item{
  display: none;
  max-width: 100%;
}
.procutionContainer__item:first-child{
  display: inline;
}











/*下層ページ*/
/*下層ページのヘッダー*/
.lowerHeroHeader{

  min-height: 240px;

}



/*archive.html*/
    .archiveContainer__item {
      width: calc(50%); /* 2列に均等に配置 */
      padding: .5rem; /* アイテムの間隔を調整 */

    }

/*single*/

.singleTitle{
  font-size:1.5rem;
  max-width: 800px;
  line-height:  160%;
  padding: 0 1rem;
  margin-bottom:1rem;

}






    .singleMain, .singleSidebar {
        width: 100%; /* 1カラムに変更 */
    }




.singleContainer{

  padding-top:3.5rem;/*56px*/
  padding-bottom: 3.125rem;/*50px*/
  padding-top:3.5rem;/*56px*/
  padding-bottom:min(3.4vw,3.125rem);
}


.singleMain {
    /* メインコンテンツのスタイルを設定 */
  
       padding: 0 1rem;
}


/**/
.postNavi{
  border-top: solid 1px #cacaca;
  padding: 2rem 0rem;
  margin-bottom: 3rem;
  font-size:.8rem

}

/**/


.service-info__left,service-info__right {

    padding: 0rem;
}








}








/*SE対応*/
@media screen and (max-width: 330px) {

.reservation__headLeft{
  width: 190px;
}


}




/*特殊デバイス対応（高さ547PX） add240814*/
@media screen and (max-height: 590px) {
.heroHeader__copy{
  font-family: "Noto Serif JP", serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-size: 1.5rem;
  line-height: 130%;
  margin-bottom:1rem;
}
.heroHeader__logo{
  width: 5.3rem;
}  
}



/*SP横向き対応 mod240814*/
@media screen and (max-height: 400px) {
.heroHeader__logo{
  width: 5.3rem;
}  
.heroHeader__copy{
  font-size: 1.5rem;
  margin-bottom:0.5rem;
}



.overlay__body{
  padding:1rem;
  height:50svh;

}
.overlay__footer{
  height:50svh;
  padding:1rem 1rem;



}



}