:root{
  /* 中央コンテンツの固定幅 */
  --content-w: 560px;
}

*{
  box-sizing: border-box;
  font-feature-settings: "palt";
}

html{
  scrollbar-gutter: stable;
}


html, body{ height: 100%; }

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,p,th,td {
	margin: 0;
	padding: 0;
}

table {
	border-collapse: collapse;
	border-spacing: 0;
}

ul li {
	list-style: none;
}
img {
	border: none;
	vertical-align: bottom;
	max-width: 100%;
}

html{
  scroll-behavior: smooth;
}

a{
  transition: opacity .25s ease, transform .12s ease, box-shadow .12s ease;
  color: #00a39f;
}

a:hover{
  opacity: .7;      /* ← 明度ではなく透明度 */
  filter: none;     /* 念のため（不要なら削除OK） */
}




/* ページ全体でスクロールさせる（中央だけをスクロールさせない） */
body{
  margin: 0;
  overflow-x: hidden;
  overflow-y: auto;
  line-height: 2.3;
  /*font-family: "Shippori Mincho", serif;*/
  font-family: "Noto Sans", "Noto Sans JP", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 1.1rem;
}

@media screen and (max-width:768px) {
body{
  font-size: 1rem;
}
}



/* 3分割：左右は残り幅を均等に（中央は560px固定） */
.layout{
  min-height: 100vh;   /* fallback */
  min-height: 100dvh;  /* mobile対応 */
  display: grid;
  grid-template-columns: 1fr var(--content-w) 1fr;
}

/* 背景1/背景2：常に表示（画面に固定） */
.side{
  position: relative;
  overflow: hidden;
  background: #eee;
}
.side__img{
  position: fixed;
  top: 0;
  bottom: 0;
  width: calc((100% - var(--content-w)) / 2); /* ←ここだけ */
  height: 100vh;
  height: 100dvh;
  object-fit: cover;
  object-position: center bottom;
  pointer-events: none;
  user-select: none;
}


/* 左右それぞれの固定位置を指定 */
.side--left  .side__img{ left: 0; }
.side--right .side__img{ right: 0; }

/* 中央コンテンツ：スクロールはbody */
.content{
  width: var(--content-w);
  background: #fff;
  overflow: visible;
  background: url(../img/back.jpg) repeat-y #FFFFFF;
  background-size: 100%;
}

/* 余白なし */
.content__inner{
  padding: 0;
}

/* 画像がはみ出さないように */
.content__inner img{
  max-width: 100%;
  height: auto;
  display: block;
}

/* スマホ：中央コンテンツのみ表示 */
@media screen and (max-width:768px) {
  .layout{
    grid-template-columns: 1fr;
  }
  .side{
    display: none;
  }
  .content{
    width: 100%;
  }
}


/* =========================
   Hiroshima Wagyu Header/Nav
   hw- 接頭辞で統一
   ========================= */

.hw-frame{
  position: relative;
  --hw-header-h: 84px;
}

/* ヘッダー：追尾しない・背景なし */
.hw-header{
  position: relative;
  top: auto;
  background: transparent;
  margin-bottom: 20px;
}


.hw-header__inner{
  height: var(--hw-header-h);
  padding-top: env(safe-area-inset-top);
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  padding-left: 16px;
  padding-right: 16px;
}

.hw-header__logo{
  justify-self: start;
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}
.hw-header__logoImg{
  height: 40px;
  width: auto;
  display: block;
}


/* メニューボタン（画像）だけ追尾させる */
/* ボタン高さ（計算に使う） */
.hw-frame{
  position: relative;
  --hw-header-h: 84px;
  --hw-menuBtn-h: 36px; /* ←見た目に合わせて微調整OK */
}

/* メニューボタン（文字＋＝） */
.hw-menuBtn{
  position: fixed;
  right: max(16px, calc(50% - (var(--content-w) / 2) + 16px));
  top: calc(env(safe-area-inset-top) + (var(--hw-header-h) - var(--hw-menuBtn-h)) / 2);
  z-index: 350;

  height: var(--hw-menuBtn-h);
  padding: 0 25px;

  display: inline-flex;
  align-items: center;
  gap: 10px;

  background: #000;
  color: #fff;
  border-radius: 15px;

  cursor: pointer;
  user-select: none;
  border: none;
  text-decoration: none;
  }

/* 文字（必要ならフォント指定） */
.hw-menuBtn__text{
  font-size: 17px;
  white-space: nowrap;
  font-weight: 500;
}

/* アイコン（＝：2本線） */
.hw-menuBtn__icon{
  position: relative;
  width: 27px;   /* 18px → 約1.5倍 */
  height: 10px;  /* 2本線の間隔（好みで8〜12pxで調整） */
  display: inline-block;
}

/* ※3本線用の中央線は使わない */
.hw-menuBtn__bar{
  display: none;
}

/* 上下2本線 */
.hw-menuBtn__icon::before,
.hw-menuBtn__icon::after{
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;        /* 細さ 1px */
  background: #fff;
  border-radius: 1px;
  transition: transform .18s ease, top .18s ease, bottom .18s ease;
}
.hw-menuBtn__icon::before{ top: 0; }
.hw-menuBtn__icon::after{ bottom: 0; }

/* =========================
   OPEN時： ＝ → × に切り替え
   ========================= */
.hw-navToggle:checked ~ .hw-header .hw-menuBtn__icon::before{
  top: 50%;
  transform: translateY(-50%) rotate(45deg);
}

.hw-navToggle:checked ~ .hw-header .hw-menuBtn__icon::after{
  bottom: auto;
  top: 50%;
  transform: translateY(-50%) rotate(-45deg);
}

/* スマホ（幅600以下）は右端基準に */
@media screen and (max-width:768px) {
  .hw-menuBtn{
    right: 16px;
  }
}









/* =========================
   Footer Floating Nav（HOME=SVG / 他=文字）
   ========================= */

/* 下のコンテンツが固定メニューに隠れないように */
body{
  padding-bottom: calc(var(--hw-fnav-h, 54px) + env(safe-area-inset-bottom) + 14px);
}

.hw-floatNav{
  --hw-fnav-h: 54px;
  --hw-fnav-bd: 2px;
  --hw-fnav-c: #00a39f;
  --hw-home-w: 74px;

  position: fixed;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  z-index: 9999;

  width: min(100%, var(--content-w, 560px));
  box-sizing: border-box;

  /* grid だと長文で押し広げがちなので flex に */
  display: flex;

  border: var(--hw-fnav-bd) solid var(--hw-fnav-c);
  background: #fff;
}

/* 全体CSSの a:hover brightness をこの中だけ無効化 */
.hw-floatNav a{
  filter: none !important;
  text-decoration: none;
  color: inherit;
}

/* ボタン共通 */
.hw-floatNav__item{
  height: var(--hw-fnav-h);

  display: flex;
  align-items: center;        /* 上下中央 */
  justify-content: center;    /* 左右中央 */

  padding: 0;
  margin: 0;
  box-sizing: border-box;

  background: #fff;

  /* ここが重要：長文でメニュー全体が横に広がるのを止める */
  min-width: 0;

  -webkit-tap-highlight-color: transparent;
}

/* HOME（左） */
.hw-floatNav__item--home{
  flex: 0 0 var(--hw-home-w);
  background: var(--hw-fnav-c);
}

/* 右側のボタン（何個でもOK：2個でも3個でも） */
.hw-floatNav__item--text{
  flex: 1 1 0;
  border-left: var(--hw-fnav-bd) solid var(--hw-fnav-c);

  /* 余白（大きいならここを詰める） */
  padding: 0 10px;
}

/* HOME SVG */
.hw-floatNav__svg{
  display: block;
  max-width: 70%;
  max-height: 78%;
  width: auto;
  height: auto;
}

/* ラベル（打ち文字） */
.hw-floatNav__label{
  display: block;
  min-width: 0;               /* ←重要 */
  text-align: center;

  font-size: 1rem;
  font-weight: 700;
  color: var(--hw-fnav-c);

  /* “下に寄って見える”対策 */
  line-height: 1;

  /* PCは1行 */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;

  transform: translateY(-1px);
}

/* スマホ：右側にWeglot分の“空き”を確保しつつ、余白を詰める */
@media screen and (max-width:768px){

  .hw-floatNav{
    --hw-fnav-h: 46px;
    --hw-home-w: 54px;
    --hw-fnav-bd: 2px;

    /* Weglot分の右空き（被るならここを増やす） */
    --hw-wg-reserve: 120px;

    left: 0;
    right: var(--hw-wg-reserve);  /* ← width:calc より確実 */
    bottom: 0;
    transform: none;
    width: auto;
  }

  /* HOMEのSVGを少し詰める */
  .hw-floatNav__item--home .hw-floatNav__svg{
    max-width: 64%;
    max-height: 78%;
  }

  /* 右ボタンの左右余白をさらに詰める（今の半分くらい） */
  .hw-floatNav__item--text{
    padding: 0 6px;
  }

  /* 2行OKにして途中改行（英語/仏語対策） */
  .hw-floatNav__label{
    font-size: 12px;
    line-height: 1.15;
    white-space: normal;        /* nowrap解除 */
    transform: translateY(0);

    /* 単語が長くてもはみ出さない */
    overflow-wrap: anywhere;
    word-break: break-word;

    /* 2行で止める */
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
  }
}



/* フッターメニューと被るのでWiglotを調整　*/
.wg-default, .wg-default .country-selector {
    right: 10px !important;
}

@media screen and (max-width:768px) {
.wg-drop.country-selector .wgcurrent a {
     padding-right: 25px !important; 
}
}








/* トグル本体（非表示） */
.hw-navToggle{
  position: fixed; /* ← absolute から fixed に */
  left: 0;
  top: 0;

  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}


/* メニュー（オーバーレイ）
   ※画面全体を覆うので、どこをクリックしても閉じる */
.hw-menuOverlay{
  position: fixed;
  inset: 0;
  z-index: 200;

  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .18s ease, visibility .18s ease;
}

/* 背景（ヘッダー下から和紙：中央コンテンツ幅内だけ表示） */
.hw-menuOverlay::before{
  content: "";
  position: absolute;

  left: 0;
  right: 0;
  margin: 0 auto;
  width: 100%;
  max-width: var(--content-w, 560px);
  top: calc(var(--hw-header-h) + env(safe-area-inset-top));
  bottom: 0;
  background: #000;
  transform: translateY(-18px);
  transition: transform .6s ease;
  will-change: transform;
  pointer-events: none;
}


/* 画面全体クリックで閉じる */
.hw-menuOverlay__backdrop{
  position: absolute;
  inset: 0;
  cursor: pointer;
}

/* 中央パネル（中身は560px幅に収める） */
.hw-menuOverlay__panel{
  position: relative;
  z-index: 1;

  width: 100%;
  max-width: var(--content-w, 560px);
  margin-left: auto;
  margin-right: auto;

  padding-top: calc(var(--hw-header-h) + env(safe-area-inset-top) + 50px);
  padding-left: 50px;
  padding-right: 50px;
  padding-bottom: 50px;
  
  transform: translateY(-18px);
  transition: transform .6s ease;
  will-change: transform;
}

/* メニューカード */
.hw-menuList{
  list-style: none;
  margin: 0 0 30px;
  padding: 0;
  display: grid;
  gap: 25px;
  /*font-family: "ten-mincho", serif;*/
  font-family: "Zen Kaku Gothic New", sans-serif;
}
.hw-menuList__item{ margin: 0; padding: 0; }

.hw-menuCard{
  display: block;
  background: #fff;
  color: #111;
  text-decoration: none;
  padding: 18px 16px;
  border-radius: 4px;
  font-size: 1.2rem;
  line-height: 1.4;
}

/* 下部リンク */
.hw-menuLinks{ margin-top: 18px; margin-bottom: 50px; }
.hw-menuLink{
  display: block;
  color: #fff;
  text-decoration: none;
  font-size: 14px;
  line-height: 1.6;
  margin-top: 8px;
  margin-bottom: 15px;
}

/* 下部ロゴ */
.hw-menuBrand{
  margin-top: 26px;
  display: flex;
  justify-content: center;
}
.hw-menuBrand__logo{
  height: 40px;
  width: auto;
  display: block;
  filter: brightness(0) invert(1);
}

/* チェックONでメニュー表示 */
.hw-navToggle:checked ~ .hw-menuOverlay{
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* チェックONで「上からスッ」表示 */
.hw-navToggle:checked ~ .hw-menuOverlay::before{
  transform: translateY(0);
}

.hw-navToggle:checked ~ .hw-menuOverlay .hw-menuOverlay__panel{
  transform: translateY(0);
}




.hw-blurReveal{
  opacity: 0;
  filter: blur(14px);
  transform: translate3d(0,-16px,0); /* 上→下の表示なら - */
  transition: opacity 1.2s ease, filter 1.2s ease, transform 1.2s ease;
  will-change: opacity, filter, transform;
}

.hw-blurReveal.hw-blurReveal--in{
  opacity: 1;
  filter: blur(0);
  transform: translate3d(0,0,0);
}


/* 1文字ずつ表示（対象：data-hw-char の中身） */
.hw-charText{
  display: inline-block;
}

.hw-charText__char{
  display: inline-block;
  opacity: 0;
  transform: translateY(-0.6em); /* 上→下っぽい動き */
  filter: blur(6px);
  will-change: opacity, transform, filter;
}

/* 発火 */
.hw-charText.hw-charText--in .hw-charText__char{
  animation: hw-charDrop .65s cubic-bezier(.2,.8,.2,1) forwards;
  animation-delay: var(--d, 0ms); /* JSで1文字ごとに遅延を入れる */
}

@keyframes hw-charDrop{
  to{
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
}

/* 動きが苦手な人向け */
@media (prefers-reduced-motion: reduce){
  .hw-charText__char{
    opacity: 1;
    transform: none;
    filter: none;
    animation: none !important;
  }
}



.about_txt {
	width: 85%;
	margin: 0 auto;
}

.caution {
	width: 85%;
	margin: 100px auto 30px;
	font-size: 0.95rem;
}

.linkbt {
	background: url(../img/button_back.jpg);
	color: #FFF;
	text-align: center;
	width: 50%;
	margin: 50px auto auto;
	border-radius: 50px;
	height: 60px;
}

.linkbt a {
	padding: 30px 60px;
	color: #FFF;
	text-decoration: none;
}


.hw-redBtn{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60%;
  padding: 20px 0;
  border-radius: 999px;
  text-decoration: none;
  color: #fff;
  line-height: 1;
  background: #e25a8e;
  margin: 50px auto auto;
}


.hw-secTitle{
  position: relative;
}

.hw-secTitle__text{
  margin: 0 auto;
  width: 85%;
  /*font-family: "ten-mincho", serif;*/
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: 600;
  line-height: 1.35;
  font-size: 1.8rem;
}

@media screen and (max-width:768px) {
.hw-secTitle__text{
  font-size: 1.3rem;
}
}

.hw-secTitle::after{
  content: "";
  display: block;
  width: 120px;
  height: 3px;
  background: #000;
  margin-top: 14px;
  margin-bottom: 25px;
}

.hw-box {
	width: 85%;
	margin: 0 auto;
	background: #FFF;
	padding-bottom: 60px;
}


.charatb {
	text-align: center;
	margin: 0 auto;
	font-size: 1.1rem;
	font-weight: 700;
}

.charatb img {
	height: 400px;
	margin-top: 60px;
}

@media screen and (max-width:768px) {
.charatb img {
	height: auto;
}
}

.charatb td {
	padding: 0 10px;
}


/*　トップページ広島和牛とは　*/

/* 吹き出し全体（SVGを背景として敷く） */
.hw-balloonTitle,
.hw-balloonTitle2,
.hw-balloonTitle3,
.hw-balloonTitle4,
.hw-balloonTitle5,
.hw-balloonTitle8{
  width: 90%;
  margin: 0 5%;
}

/* SVG背景＋レイアウト用の器 */
.hw-balloonTitle__inner{
  position: relative;
  width: 100%;
  aspect-ratio: 500 / 223;
  background: url("/assets/img/title_about.svg") center / contain no-repeat;
}

.hw-balloonTitle2 .hw-balloonTitle__inner{
  background: url("/assets/img/title_restaurant.svg") center / contain no-repeat;
}

.hw-balloonTitle3 .hw-balloonTitle__inner{
  aspect-ratio: 500 / 300;
  background: url("/assets/img/fukidashi01.svg") center / contain no-repeat;
}

.hw-balloonTitle4 .hw-balloonTitle__inner{
  background: url("/assets/img/fukidashi02.svg") center / contain no-repeat;
}

.hw-balloonTitle5 .hw-balloonTitle__inner{
  background: url("/assets/img/fukidashi03.svg") center / contain no-repeat;
}

.hw-balloonTitle6 .hw-balloonTitle__inner{
  background: url("/assets/img/fukidashi04.svg") center / contain no-repeat;
  aspect-ratio: 900 / 223;
  margin-bottom: 3%;
}

.hw-balloonTitle7 .hw-balloonTitle__inner{
  background: url("/assets/img/fukidashi05.svg") center / contain no-repeat;
  aspect-ratio: 900 / 223;
  margin-bottom: 3%;
}

.hw-balloonTitle8 .hw-balloonTitle__inner{
  background: url("/assets/img/fukidashi02.svg") center / contain no-repeat;
}


/* 文字：緑(#00a39f)の中に収めて中央揃え */
/* 文字：緑枠の中で少し上に寄せる */
.hw-balloonTitle__text{
  position: absolute;
  left: 11%;
  right: 11%;
  top: 0;
  bottom: 28%;   /* ← 22% → 28%（下側を多めに削って上へ） */
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #fff;
  font-weight: 900;
  line-height: 1.35;
  font-size: clamp(16px, 2.6vw, 24px);
}

.hw-balloonTitle2 .hw-balloonTitle__text,
.hw-balloonTitle5 .hw-balloonTitle__text{
  color: #000;
}

.hw-balloonTitle6 .hw-balloonTitle__text{
  color: #00a39f;
  font-size: 1.2rem;
}

.hw-balloonTitle7 .hw-balloonTitle__text{
  color: #ed6c00;
  font-size: 1.2rem;
}

.hw-balloonTitle3 .hw-balloonTitle__text{
  font-weight: 700;
}

.hw-balloonTitle__text{
  position: absolute;
  left: 11%;
  right: 11%;
  top: 0;
  bottom: 28%;   /* ← 22% → 28%（下側を多めに削って上へ） */
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #fff;
  font-weight: 900;
  line-height: 1.35;
  font-size: clamp(16px, 2.6vw, 24px);
}

/* 右下の顔：もう少し下に */
.hw-balloonTitle__chara{
  position: absolute;
  right: 6%;
  bottom: 0;
  width: clamp(56px, 14vw, 88px);
  height: auto;
  pointer-events: none;
  transform-origin: 50% 100%;
  animation: hw-charaSway 2.4s linear infinite;
}

.hw-balloonTitle6 .hw-balloonTitle__chara{
  right: -5%;
  bottom: 5%;
  width: clamp(75px, 14vw, 75px);
  transform-origin: 50% 100%;
}

.hw-balloonTitle8 .hw-balloonTitle__chara{
  right: 0;
  bottom: 5%;
  width: clamp(80px, 14vw, 80px);
  transform-origin: 50% 100%;
}

@media screen and (max-width:768px) {
.hw-balloonTitle6 .hw-balloonTitle__chara{
  right: -5%;
  bottom: 18%;
  width: clamp(50px, 14vw, 50px);
}
}

/* 左下の顔：もう少し下に */
.hw-balloonTitle2 .hw-balloonTitle__chara,
.hw-balloonTitle5 .hw-balloonTitle__chara{
  left: 2%;
  bottom: 0;
  width: clamp(140px, 14vw, 88px);
}

#contact .hw-balloonTitle5 .hw-balloonTitle__chara{
  left: 2%;
  bottom: 3%;
  width: clamp(120px, 14vw, 120px);
}

.hw-balloonTitle4 .hw-balloonTitle__chara{
  left: 2%;
  bottom: 0;
  width: clamp(50px, 14vw, 80px);
  height: auto;
}

.hw-balloonTitle7 .hw-balloonTitle__chara{
  left: -2%;
  bottom: 0;
  width: clamp(100px, 14vw, 100px);
  height: auto;
}

@media screen and (max-width:768px) {
/* 左下の顔：もう少し下に */
.hw-balloonTitle2 .hw-balloonTitle__chara,
.hw-balloonTitle5 .hw-balloonTitle__chara{
  left: 0;
  width: clamp(100px, 14vw, 88px);
}
.hw-balloonTitle4 .hw-balloonTitle__chara{
  left: 0;
  width: clamp(65px, 14vw, 70px);
}
.hw-balloonTitle7 .hw-balloonTitle__chara{
  left: 0;
  width: clamp(65px, 14vw, 65px);
}
}

/* ゆらゆら（translateなし＝軸は動かない） */
@keyframes hw-charaSway{
  0%   { transform: rotate(-7deg); }
  50%  { transform: rotate( 7deg); }
  100% { transform: rotate(-7deg); }
}

/* 動きが苦手な人向け */
@media (prefers-reduced-motion: reduce){
  .hw-balloonTitle__chara{ animation: none; }
}

.title_about {
	text-align: center;
	color: #00a39f;
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-size: 2.2rem;
  font-weight: 600;
  line-height: 1.1;
  margin-bottom: 1rem;
}

/**/


/* 英語など「日本語以外」のときだけ、brを無効化して1行にする */
html:not(:lang(ja)) .hw-balloonTitle2 .hw-balloonTitle__text > br{
  display: none;
}


.hw-mapLink a{
  display: inline-flex;
  align-items: center;
  gap: 5px;
  text-decoration: none;
  font-size: 1.2rem;
}

.hw-mapLink a::before{
  content: "";
  width: 1.1em;
  height: 1.1em;
  background: currentColor; /* ←リンク文字色と同じになる */
  -webkit-mask: url("/assets/img/plot.svg") center / contain no-repeat;
  mask: url("/assets/img/plot.svg") center / contain no-repeat;
  flex: 0 0 auto;
}



/*　★★★★★★広島和牛とは★★★★★★　*/

.mainimg{
  padding: 0;
  margin: 0;
  min-height: 250px;
  height: clamp(250px, 35vh, 300px);
  display: grid;
  place-items: center;
  line-height: 1.3;
  text-align: center;
}

.mainimg__title{
  color: #fff;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-shadow: 0 2px 18px rgba(0,0,0,.45);
  font-size: 2rem;
}

@media screen and (max-width:768px) {
  .mainimg{
    min-height: 150px;
    height: 24vh;
  }
  
.mainimg__title{
  font-size: 1.5rem;
}
}

#about .mainimg{
  background: url("/about/img/mainimg.jpg") center / cover no-repeat;
}



/* ブロックが左に寄りすぎないように中央寄せの器 */
.hw-kumoTitleWrap{
  width: auto;
  margin:0 auto;
}

/* 見出し本体（短い時：上にくもライン） */
.hw-kumoTitle{
  position: relative;
  display: inline-block;
  max-width: 100%;
  margin: 0;
  padding: 13px 50px 20px 7.5%;
  font-weight: 700;
  line-height: 1.1;
  color: #00a39f;
  font-size: 1.2rem;

  /* くもSVG（階層が変わっても崩れないように絶対パス推奨） */
  background-image: url(/about/img/kumo.svg);
  background-repeat: no-repeat;
  background-position: right top;
  background-size: 300px; /* ラインの高さ（好みで微調整OK） */

  /* 他CSS干渉を潰す */
  background-color: transparent;
  border: 0;
  box-shadow: none;
}

/* もし別CSSが h2::before/after で線を出してても無効化 */
.hw-kumoTitle::before,
.hw-kumoTitle::after{
  content: none !important;
}

/* 文字の背景（薄緑）を消す */
.hw-kumoTitle__label{
  background: transparent !important;
  padding: 0;
  display: inline-block;
}

/* 文字が多い場合（2枚目っぽく：右へ伸ばす＋下ライン） */
.hw-kumoTitleWrap--wide .hw-kumoTitle{
  display: block;
  width: 100%;
  padding-top: 0;
  padding-bottom: 24px;         /* ライン分の余白（下） */
  background-position: right bottom;
  background-size: 100% 22px;
}





/* 左→右に伸びる黒線（3px / 350px） */
.hw-drawLine{
  width: 200px;
  height: 3px;
  position: relative;
  overflow: hidden;
  margin-bottom: 40px;
}

@media screen and (max-width:768px) {
.hw-drawLine{
  width: 33%;
}
}

.hw-drawLine::after{
  content: "";
  position: absolute;
  inset: 0;
  background: #000;

  transform: scaleX(0);
  transform-origin: left center;
}

/* 画面内に入ったらアニメ開始 */
.hw-drawLine.hw-drawLine--in::after{
  /* 最後にゆっくり止まる（追い伸び無し） */
  animation: hw-lineGrow 1.0s cubic-bezier(.22,.61,.36,1) forwards;
}

@keyframes hw-lineGrow{
  to{ transform: scaleX(1); }
}



.hw-story{
  width: 85%;
  margin: 0 auto 80px;
}

.hw-story__head{
  display: flex;
  align-items: flex-start;     /* 上揃え */
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 15px;
}

.hw-story__title{
  margin: 0;
  color: #e25a8e;              /* ピンク（好みで調整） */
  font-weight: 800;
  line-height: 1.4;
  font-size: 1.7rem;
}

@media screen and (max-width:768px) {
.hw-story__title{
  font-size: 1.3rem;
}
}

/* 右上の画像（小さく固定） */
.hw-story__badge{
  width: 70px;                 /* 好みで調整 */
  height: auto;
  flex: 0 0 auto;
  display: block;
}

.aboutol li {
	margin-left: 1em;
}


  .gmap-wrap{
    width: 85vw;           /* 画面幅の85% */
    max-width: 85%;        /* 親要素がある場合でも85%を維持 */
    margin: 0 auto;        /* 中央寄せ */
    position: relative;
    aspect-ratio: 4 / 3;   /* 元の 640x480 (=4:3) を維持 */
    overflow: hidden;
    border-radius: 12px;   /* 任意：角丸 */
  }
  .gmap-wrap iframe{
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
  }
  
  
  
  
  


/*　★★★★★★ハッケンしよう★★★★★★　*/


#restaurant .mainimg{
  background: url("/restaurant/img/mainimg.jpg") center / cover no-repeat;
}

.search {
	width: 85%;
	margin-left: auto;
	margin-right: auto;
	font-size: 1rem;
	line-height: 1.3;
}

.search .koumoku {
	font-weight: bold;
	color: #00a39f;
	margin-bottom: 0.5rem;
}

.search hr {
	margin: 1rem 0;
	border: 1px solid #CCC;
}

/* 85%幅＋2カラム */
.hw-shopGridWrap{
  width: 85%;
  margin: 0 auto;
}

.hw-shopGrid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 32px 28px; /* 行間 / 列間 */
  align-items: stretch; /* 同じ行の中で高さを揃える */
}

/* カード本体 */
.hw-shopCard{
  min-width: 0; /* 文字で横にはみ出す事故防止 */
}

/* リンクをカード全面に（これが重要） */
.hw-shopCard__link{
  height: 100%;
  display: grid;
  grid-template-rows: auto auto auto 1fr; /* 最後(紹介文)だけ余りを吸う */
  align-content: start;

  color: #000;
  text-decoration: none;
}

/* 写真（比率固定＋トリミングOK） */
.hw-shopCard__photo{
  margin: 0 0 12px;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: #e5e5e5;
}
.hw-shopCard__photo img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* 店舗名 */
.hw-shopCard__name{
  margin: 0 0 8px;
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1.35;

  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  /*-webkit-line-clamp: 1; /* 必要なら数字だけ調整 */
}

/* 属性テキスト */
.hw-shopCard__meta{
  margin: 0 0 10px;
  font-size: 0.8rem;
  line-height: 1.6;

  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2; /* 必要なら調整 */
}

/* 紹介文：ここは“固定高さにしない”のがポイント */
.hw-shopCard__desc{
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.7;

  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 5;
}

/* 左寄せ */
.hw-shopCard,
.hw-shopCard *{
  text-align: left;
}



/*　お店詳細　*/

.restaurant-name {
	font-size: 1.5rem;
	font-weight: bold;
	line-height: 1.5;
	margin-bottom: 1rem;
}

.restaurant-main img {
	width: 100%;
	margin-bottom: 30px;
}


/* =========================
   おすすめ：スマホ=横スクロール / PC=2カラム
   （このブロックを丸ごと差し替え）
   ========================= */

/* 横スクロール列（スマホ/タブレット） */
.hw-recoRow{
  --hw-reco-card-w: 60%;

  width: 100%;
  max-width: 100%;
  min-width: 0;                 /* ←中身で親を押し広げない（重要） */
  box-sizing: border-box;

  display: flex;
  gap: 26px;

  align-items: flex-start;      /* ★追加：カードの上ラインを揃える */

  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;

  scroll-snap-type: x mandatory;
  padding: 0 0 10px;            /* スクロールバー/影の逃げ */
  margin-bottom: 80px;
}

/* カード（ブロックごとクリック） */
.hw-recoCard{
  flex: 0 0 var(--hw-reco-card-w);
  scroll-snap-align: start;

  display: flex;                /* ★変更：画像＋キャプションを縦に積む */
  flex-direction: column;

  text-align: left;

  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;

  /* 全体CSSの a:hover { filter: brightness(1.1); } を打ち消したい場合の保険 */
  filter: none;
  opacity: 1;

  transition: opacity .28s ease, transform .18s ease;
}

/* ホバーは“半透明”（brightnessではなく） */
.hw-recoCard:hover{
  filter: none !important;
  opacity: .7;
}

/* 画像エリア（正方形で切り抜き） */
.hw-recoCard__imgWrap{
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: #ddd;
}

.hw-recoCard__imgWrap img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* キャプション：行数差で左右がズレないよう高さを揃える */
.hw-recoCard__cap{
  display: block;
  margin-top: 12px;

  line-height: 1.35;
  min-height: calc(1.35em * 2);  /* ★追加：最低2行分の高さを確保 */

  color: #111;
}


/* =========================
   PC：横スクロールをやめて2カラムで収める
   ========================= */
@media screen and (min-width:769px) {
  .hw-recoRow{
    /* 横スクロール解除して2カラム */
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 26px;

    overflow: visible;
    scroll-snap-type: none;
    padding: 0;                 /* 下padding不要 */
	margin-bottom: 14%;
  }

  .hw-recoCard{
    flex: initial;              /* flex前提解除 */
    scroll-snap-align: unset;
  }
}


/* ===== ポップアップ ===== */
.hw-recoModal{
  position: fixed;
  inset: 0;
  z-index: 9999;

  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .2s ease, visibility .2s ease;
}

.hw-recoModal.is-open{
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.hw-recoModal__backdrop{
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.55);
}

/* ダイアログ */
.hw-recoModal__dialog{
  position: relative;
  z-index: 1;

  width: min(92vw, 560px);
  margin: 8vh auto 0;
  background: #fff;

  padding: 18px 18px 22px;
}

/* 閉じる */
.hw-recoModal__close{
  position: absolute;
  right: 10px;
  top: 6px;

  width: 40px;
  height: 40px;
  border: 0;
  background: transparent;
  cursor: pointer;
  font-size: 28px;
  line-height: 40px;
}

/* 中身 */
.hw-recoModal__figure{ margin: 0; }
.hw-recoModal__img{
  width: 100%;
  height: auto;
  display: block;
}
.hw-recoModal__cap{
  margin-top: 12px;
  font-size: 1.2rem;
  line-height: 1.4;
  color: #111;
}

html.hw-noSmooth{
  scroll-behavior: auto !important;
}


.hw-recoCard{
  min-width: 0;                 /* ★最重要（flexのはみ出し対策） */
  white-space: normal !important; /* button に globalで nowrap が当たってても潰す */
}

/* キャプションはどんな言語でも必ず折り返す */
.hw-recoCard__cap{
  min-width: 0;
  white-space: normal !important;
  overflow-wrap: anywhere;      /* ★NBSP等でも最終的に折る */
  word-break: break-word;
}



.tenpotb {
	width: 85%;
	margin: 0 auto 50px;
	font-size: 0.9rem;
	line-height: 1.5;
}

.tenpotb th {
	background: #efeee8;
	text-align: left;
	white-space: nowrap;
}

.tenpotb td {
	background: #fff;
}

.tenpotb th,
.tenpotb td {
	border: 1px solid #ccc;
	padding: 10px 20px;
}

@media screen and (max-width:768px) {
.tenpotb th,
.tenpotb td {
	padding: 5px 10px;
	display: block;
	width: 100%;
}
}




/* googlemap */

/* Google Map（横幅100%・レスポンシブ） */
.hw-map{
  width: 100%;
  aspect-ratio: 16 / 9;   /* 高さ比率。必要なら 4/3 や 1/1 でもOK */
  position: relative;
  overflow: hidden;
}

.hw-map__iframe{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* 例：スマホは少し縦長にしたい場合（任意） */
@media screen and (max-width:768px) {
  .hw-map{ aspect-ratio: 1 / 0.8; }
}



/* 横幅100%で、隙間20px、2ボタンを均等に伸ばす */
.kensaku-pillRow{
  display: flex;
  width: 100%;
  gap: 20px;             /* ← ボタン同士の隙間は固定20px */
  align-items: center;
  margin-top: 30px;
}

/* 2つのボタンを同じ幅で伸ばす */
.kensaku-pillBtn{
  flex: 1;               /* ← 重要：2つを同じ幅にする */
  border-radius: 9999px;
  border: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  font-size: 1.1rem;

  /* 以前のpaddingが大きいと幅計算が不自然になるので0推奨 */
  padding: 10px;
}

/* 色（そのまま） */
.kensaku-pillBtn--primary{
  background: #E25A8E;
  color: #fff;
}
.kensaku-pillBtn--clear{
  background: #CCCCCC;
  color: #000;
}



/* チェックボックスの並び */
.hw-filterList {
  list-style: none;
  margin: 0 0 16px;
  padding: 0;
  display: flex;
  flex-wrap: wrap;          /* はみ出したら次の行へ */
  gap: 4px 16px;            /* 行・列のすきま */
}

.hw-filterList li {
  margin: 0;
}

.hw-filterList label{
  display: inline-flex;
  align-items: flex-start;
  gap: 6px;

  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* テキスト部分が縮められるように */
.hw-filterList label > span{
  min-width: 0;
}

/* 「この項目は1行全部」にしたいとき用 */
.hw-filterItem--full {
  flex-basis: 100%;         /* ここだけ1行まるごと使う */
}





/*  ページネーション　*/

.hw-filterList {
  list-style: none;
  padding-left: 0;
  margin: 0 0 8px;
}
.hw-filterList li {
  margin-bottom: 4px;
}

.hw-resultSummary {
  margin-top: 16px;
  font-size: 0.85rem;
  color: #555;
}

.hw-pagination {
  display: flex;
  justify-content: center;
  gap: 4px;
  margin-top: 12px;
  flex-wrap: wrap;
  font-size: 0.85rem;
}

.hw-pageLink {
  min-width: 32px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid #ddd;
  background: #fff;
  cursor: pointer;
}
.hw-pageLink.is-active {
  background: #b4503c;
  color: #fff;
  border-color: #b4503c;
}
.hw-pageLink.is-disabled {
  opacity: 0.4;
  cursor: default;
}





/*　★★★★★★キャラクター紹介★★★★★★　*/


#character .mainimg{
  background: url("/character/img/mainimg.jpg") center / 100% no-repeat;
  margin-bottom: 0;
  height: auto;
}

#character .mainimg__title{
  color: #000;
  text-shadow: none;
}

.charactertop {
  background: url("/character/img/back.png") center top / 100% no-repeat;
  font-family: "sicyubi-hyojunkaisho", sans-serif;
font-weight: 400;
font-style: normal;
padding: 260px 10% 0;
font-size: 1.2rem;
}

@media screen and (max-width:768px) {
.charactertop {
padding: 50% 10% 0;
}
}

.charactertop p {
	margin-bottom: 2rem;
}

/* 2枚横並びの外枠（はみ出し防止） */
.hw-imgRowWrap{
  width: 100%;
  max-width: 100%;
  overflow: hidden; /* 念のため */
}

/* 横並び＋中央寄せ */
.hw-imgRow{
  display: flex;
  justify-content: center; /* 左右のセンターに寄せる */
  align-items: center;
  gap: 20px;
  max-width: 70%;
  margin-left: auto;
  margin-right: auto;
}

/* 2枚が「(100% - 20px)/2」以内に収まるようにする */
.hw-imgRow img{
  display: block;
  height: auto;

  /* 2枚＋gap で親幅を超えない */
  max-width: calc((100% - 20px) / 2);
  flex: 0 1 calc((100% - 20px) / 2);
}

.mame {
	background: #00a39f;
	color: #FFF;
	font-weight: bold;
	border-radius: 9999px;
	line-height: 1;
	padding: 10px 20px;
	font-size: 1rem;
	margin-bottom: 15px;
}

.mameli li {
	list-style: disc;
	margin-left: 1rem;
	font-size: 1rem;
	line-height: 1.7;
	margin-bottom: 0.7rem;
}

.mameli li::marker{
  color: #00a39f;   /* 好きな色 */
}




/*　★★★★★★よくある質問・お問い合わせ★★★★★★　*/

#contact .mainimg{
  background: url("/contact/img/mainimg.jpg") center / 100% no-repeat;
  margin-bottom: 0;
  height: auto;
}

#contact .mainimg__title{
  color: #000;
  text-shadow: none;
}

#contact .hw-secTitle__text{
  font-size: 1.6rem;
}

@media screen and (max-width:768px) {
#contact .hw-secTitle__text{
  font-size: 1.1rem;
}
}

:root{
  --hw-qa-pink: #e25a8e; /* 画像に近いピンク */
}

.hw-qaItem{
  padding: 30px 0;
  border-bottom: 1px dashed rgba(0,0,0,.35);
}

/* .box85 内：最後の .hw-qaItem だけ下線なし＋下余白 */
.box85 .hw-qaItem:last-of-type{
  border-bottom: none;
  margin-bottom: 60px; /* 好きな値に */
  padding-bottom: 0;   /* 下線用に入れてた場合の保険 */
}


/* Q/A 行 */
.hw-qaRow{
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.hw-qaRow--a{
  margin-top: 10px;
}

/* Q/A バッジ */
.hw-qaBadge{
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  font-weight: 800;
  line-height: 1;
}

.hw-qaBadge--q{
  background: var(--hw-qa-pink);
  color: #fff;
  border: 2px solid var(--hw-qa-pink);
}

.hw-qaBadge--a{
  background: transparent;
  color: var(--hw-qa-pink);
  border: 2px solid var(--hw-qa-pink);
}

/* テキスト */
.hw-qaQuestion{
  margin: 0;
  color: var(--hw-qa-pink);
  font-weight: 800;
  line-height: 1.25;
}

.hw-qaAnswer{
  margin: 0;
  color: #111;
  line-height: 1.9;
}


.formtb {
	width: 85%;
	margin: 0 auto 20px;
	line-height: 1.5;
}

.formtb th {
	background: #efeee8;
	text-align: left;
	white-space: nowrap;
	padding: 10px 20px;
}

.formtb td {
	background: #fff;
	padding: 20px;
}

.formtb th,
.formtb td {
	border: 1px solid #ccc;
	display: block;
	width: 100%;
}

.formtb input,
.formtb textarea {
	width: 100%;
	padding: 2%;
}

@media screen and (max-width:768px) {
.formtb th,
.formtb td {
	padding: 5px 10px;
}
}










/* footer */

footer {
	background: #000;
	padding: 50px 0 90px;
	color: #FFF;
	text-align: center;
	font-size: 0.8rem;
}

@media screen and (max-width:768px) {
footer {
	padding: 10% 0 20%;
}
}

footer img {
	width: 30%;
	filter: brightness(0) invert(1);
}

footer p {
	margin-bottom: 15px;
}

footer a {
	color: #FFF;
}



/* =========================
   ふわっと表示（.content__inner 内だけ）
   ※JSが .content__inner の p/div/ul/ol/h1..h6 に .hw-reveal を付与する前提
   ========================= */
.hw-reveal{
  opacity: 0;
  transform: translate3d(0,-24px,0);     /* 上→下に出す（上から下） */
  transition: opacity 1.1s ease-out, transform 1.1s ease-out;
  will-change: opacity, transform;
  overflow-anchor: none;                 /* ガクガク防止 */
}

.hw-reveal.hw-reveal--in{
  opacity: 1;
  transform: translate3d(0,0,0);
}

/* 動きが苦手な人向け */
@media (prefers-reduced-motion: reduce){
  .hw-reveal{
    opacity: 1;
    transform: none;
    transition: none;
  }
}



/* box */

.box85 {
	width: 85%;
	margin-left: auto;
	margin-right: auto;
}





/* txt */

.tred {
	color: #ce3729;
}



/* spacer */

.marb10px {
	margin-bottom: 10px !important;
}

.marb20px {
	margin-bottom: 20px !important;
}

.marb30px {
	margin-bottom: 30px !important;
}

.marb40px {
	margin-bottom: 40px !important;
}

.marb50px {
	margin-bottom: 50px !important;
}

.marb60px {
	margin-bottom: 60px !important;
}

.marb70px {
	margin-bottom: 70px !important;
}

.marb80px {
	margin-bottom: 80px !important;
}

.marb90px {
	margin-bottom: 90px !important;
}

.marb100px {
	margin-bottom: 100px !important;
}

.marb150px {
	margin-bottom: 150px !important;
}


@media screen and (max-width:768px) {
.marb10px {
	margin-bottom: 2% !important;
}

.marb20px {
	margin-bottom: 4% !important;
}

.marb30px {
	margin-bottom: 6% !important;
}

.marb40px {
	margin-bottom: 8% !important;
}

.marb50px {
	margin-bottom: 10% !important;
}

.marb60px {
	margin-bottom: 12% !important;
}

.marb70px {
	margin-bottom: 14% !important;
}

.marb80px {
	margin-bottom: 16% !important;
}

.marb90px {
	margin-bottom: 18% !important;
}

.marb100px {
	margin-bottom: 20% !important;
}

.marb150px {
	margin-bottom: 30% !important;
}
}


/* img */

.mw10 {
	max-width: 10% !important;
	margin-left:45%;
	margin-right:45%;
}
.mw20 {
	max-width: 20% !important;
	margin-left:40%;
	margin-right:40%;
}
.mw30 {
	max-width: 30% !important;
	margin-left:35%;
	margin-right:35%;
}
.mw40 {
	max-width: 40% !important;
	margin-left:30%;
	margin-right:30%;
}
.mw50 {
	max-width: 50% !important;
	margin-left:25%;
	margin-right:25%;
}
.mw60 {
	max-width: 60% !important;
	margin-left:20%;
	margin-right:20%;
}
.mw70 {
	max-width: 70% !important;
	margin-left:15%;
	margin-right:15%;
}
.mw80 {
	max-width: 80% !important;
	margin-left:10%;
	margin-right:10%;
}
.mw90 {
	max-width: 90% !important;
	margin-left:5%;
	margin-right:5%;
}