@charset "utf-8";

/*
 * "Comfortaa" is lisenced under the SIL Open Font License 1.1
 * http://fonts.googleapis.com
 * https://www.google.com/fonts/attribution
 * http://scripts.sil.org/OFL
 */

:root {
  --main-pink: 				#e84c88;
	--main-pink-light:	#fadeea;
  --sub-mint: 				#00a8a5;
  --sub-mint-light: 	#cbe8eb;
  --light-bg: 				#fdf7f9;

  --header-h: 140px;           /* 固定ヘッダーの高さに合わせて調整 */
  scroll-behavior: smooth;     /* なめらかスクロール（任意） */
}

/* ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

全体の設定

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */
body {
  color: #a9a9a9;
	color: #888;
  font-family: 'ヒラギノ角ゴ Pro', 'Hiragino Kaku Gothic Pro', 'メイリオ', 'Meiryo',
    'Noto Sans Japanese', Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
  font-size: 16px;
  line-height: 1.6;
	padding-top: 140px;
}

/* iPhoneなどで見出しが明朝体になるのを防止 */
h1, h2, h3, h4, h5, h6 {
  font-family: 'ヒラギノ角ゴ ProN W6', 'Hiragino Kaku Gothic ProN', 
               'メイリオ', Meiryo, 'Noto Sans JP', 'Noto Sans Japanese',
               sans-serif !important;
  font-weight: 600;
}

a {
  color: #555;
  text-decoration: none;
}

a:hover {
  opacity: 0.8;
  text-decoration: none;
}

.bg-darkgray {
  background-color: #a9a9a9;
}

.container,
.container-fulid {
  overflow: hidden;
}

/* 見出しを太字に */
h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: bold !important;
}

/* 英字タイトルをWEBフォントに */
header a,
.display-4,
.display-3,
.lead,
.circle-badges {
  font-family: 'Comfortaa', cursive;
}

/* パンくずリスト */
.breadcrumb {
  background: transparent;
}

.breadcrumb li + li:before {
  content: '≫' !important;
}

/* ヘッダー営業時間 */
.top-stitch {
  padding: .5rem 0;
  color: #565656;
  background-color: #a9a9a9;
  box-shadow: 0px 0px 0px 10px #a9a9a9;
  border-bottom: dashed 2px #fff;
  border-left: dashed 2px #fff;
  border-right: dashed 2px #fff;
  margin-bottom: 10px;
  color: #fff;
  text-align: center;
  font-weight: bold;
}

.top-stitch p {
  margin: 0;
  padding: 0;
}

/* ヘッダーSNS */
#header-sns {
	position:absolute;
	top: 15px;
	right: 10px;
	text-align: right;
  z-index: 9999;
}

/* ヘッダー店名 */
.logo-font {
	font-size:1.1rem;
  font-family: 'Libre Baskerville', serif;
  font-weight: 700;
  letter-spacing: 0;
}
/* ヘッダーロゴイメージ */
.logo-font img {
	height: 30px;
	width: auto;
}

/* 見出しやセクションIDを持つ要素に適用 */
section[id], div[id], h1[id], h2[id], h3[id] {
  scroll-margin-top: var(--header-h);
}

/* -------------------------------------------
   ナビバー（下線アニメを ::before に統一）
--------------------------------------------*/
.nav-link {
  position: relative;
  display: inline-block;
  color: #333;
  text-decoration: none;
  transition: color .3s ease;
}

/* 下線のベース（幅は100%だが scaleX(0) で非表示。チラつき防止） */
.nav-link::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;               /* ← rightも指定して中央揃えの歪み防止 */
  bottom: 0;
  height: 2px;
  background-color: var(--main-pink);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .28s ease;
  will-change: transform;
  pointer-events: none;
}

/* ホバーで線を伸ばす */
.nav-link:hover {
  color: var(--main-pink) !important;
}
.nav-link:hover::before {
  transform: scaleX(1);
}

/* アクティブ時も線を表示 */
.nav-link.active,
.nav-link[aria-current="page"] {
  color: var(--main-pink) !important;
}
.nav-link.active::before,
.nav-link[aria-current="page"]::before {
  transform: scaleX(1);
}

/* ▼ Bootstrapのキャレットは .dropdown-toggle::after を使うので、
   こちらの下線は ::before なので一切衝突しません。追加の特別対応は不要。 */

/* 念のため：ドロップダウン展開中も下線を維持したい場合 */
.navbar .dropdown.show > .nav-link::before,
.navbar .dropdown .nav-link[aria-expanded="true"]::before {
  transform: scaleX(1);
}

/* ▼ ドロップダウンメニュー内のアクティブ項目の色調整 */
.dropdown-item.active,
.dropdown-item:active {
  background-color: var(--main-pink) !important; /* ブランドピンク */
  color: #fff !important; /* 白文字でコントラストを確保 */
}

/* ホバー時も同系色で統一感を出す */
.dropdown-item:hover,
.dropdown-item:focus {
  background-color: var(--main-pink-light) !important; /* ピンクの淡いトーン */
  color: #333 !important;
}

/* ▼ 子メニューがアクティブなとき、親MENU（MENU）も色を反映 */
.nav-item.dropdown.show > .nav-link,
.nav-item.dropdown .nav-link.active {
  color: var(--main-pink) !important;
}


/* ロゴマーク */
.logo-mark {
  left: 5%;
  top: -50px;
	top: 10%;
  z-index: 999;
  border-radius: 50%;
  height: 240px;
  width: 240px;
	display: flex;
  justify-content: center; /* 横中央 */
  align-items: center;     /* 縦中央 */
	background-color: #FFF;
}

/* ロゴマークの中身 */
.logo-mark img {
	max-width: 100%;
	max-height: 100%;
}

/* トップメッセージ全体 */
#top-message {
  position: absolute;
  left: 10%;
  bottom: 10%;
  color: #fff;
  background: rgba(0, 0, 0, 0.4); /* 背景に半透明の黒を追加 */
  padding: 20px;
  border-radius: 8px;
  max-width: 70%;
  z-index: 2; /* オーバーレイより前に出す */
}

/* テキストスタイル */
#top-message h1 {
  font-weight: 700;
  text-shadow: 2px 2px 6px rgba(0, 0, 0, 0.5); /* 写真上で文字をくっきり見せる */
}

#top-message p {
  font-size: 1.1rem;
  line-height: 1.8;
  text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.4);
	margin-bottom: 0;
}

/* 背景画像に全体オーバーレイ（文字より後ろ） */
.top-image::before {
  content: "";
  position: absolute;
  inset: 0;
  /* background: rgba(0, 0, 0, 0.25); */
  z-index: 1;
}

/* ギザギザ線 */
.zigzag {
  position: relative;
  margin: 5% 0;
  padding: 0;
  background-color: #a9a9a9;
	background-color: #fadeea;
}

.zigzag::before,
.zigzag::after {
  position: absolute;
  width: 100%;
  height: 60px;
  content: "";
}

.zigzag::before {
  top: -60px;
  background: linear-gradient(45deg, #a9a9a9 30px, transparent 0), linear-gradient(315deg, #a9a9a9 30px, transparent 0);
  background: linear-gradient(45deg, var(--main-pink-light) 30px, transparent 0), linear-gradient(315deg, var(--main-pink-light) 30px, transparent 0);
  background-size: 60px 60px;
}

.zigzag::after {
  bottom: -60px;
  background: linear-gradient(135deg, #a9a9a9 30px, transparent 0), linear-gradient(225deg, #a9a9a9 30px, transparent 0);
  background: linear-gradient(135deg, var(--main-pink-light) 30px, transparent 0), linear-gradient(225deg, var(--main-pink-light) 30px, transparent 0);
  background-size: 60px 60px;
}

/* 薄い背景のギザギザ線 */
.light-zigzag {
  position: relative;
  margin: 5% 0 0;
  padding: 0;
  background-color: #f8f9fa;
}

.light-zigzag::before,
.light-zigzag::after {
  position: absolute;
  width: 100%;
  height: 60px;
  content: "";
}

.light-zigzag::before {
  top: -60px;
  background: linear-gradient(45deg, #f8f9fa 30px, transparent 0), linear-gradient(315deg, #f8f9fa 30px, transparent 0);
  background-size: 60px 60px;
}

.light-zigzag::after {
  bottom: -60px;
  background: linear-gradient(135deg, #f8f9fa 30px, transparent 0), linear-gradient(225deg, #f8f9fa 30px, transparent 0);
  background-size: 60px 60px;
}

/* ギザギザ線なし */
.zigzag-none:after {
  content: none !important;
}

/* コピーライトのギザギザ線 */
.zigzag-copy {
  position: relative;
  padding-top: 5%;
  background-color: #a9a9a9;
}

.zigzag-copy::before {
  position: absolute;
  width: 100%;
  height: 60px;
  content: "";
  top: -60px;
  background: linear-gradient(45deg, #a9a9a9 30px, transparent 0), linear-gradient(315deg, #a9a9a9 30px, transparent 0);
  background-size: 60px 60px;
}

/* 薄い緑のギザギザ線 */
.zigzag-sub-mint-light {
  position: relative;
  margin: 5% 0 0;
  padding: 0;
  background-color: var(--sub-mint-light);
}

.zigzag-sub-mint-light::before,
.zigzag-sub-mint-light::after {
  position: absolute;
  width: 100%;
  height: 60px;
  content: "";
}

.zigzag-sub-mint-light::before {
  top: -60px;
  background: linear-gradient(45deg, var(--sub-mint-light) 30px, transparent 0), linear-gradient(315deg, var(--sub-mint-light) 30px, transparent 0);
  background-size: 60px 60px;
}

.zigzag-sub-mint-light::after {
  bottom: -60px;
  background: linear-gradient(135deg, var(--sub-mint-light) 30px, transparent 0), linear-gradient(225deg, var(--sub-mint-light) 30px, transparent 0);
  background-size: 60px 60px;
}

/* ------------------------------
地図サイズ
--------------------------------- */
iframe {
  display: block;
  width: 100%;
  height: 400px;
}

/* アクセス情報 */
.grid-dl {
  display: grid;
  grid-template-columns: 5em 1fr;
  row-gap: 0.75em;
}
.grid-dl dt {
  font-weight: bold;
}
.grid-dl dd {
  margin: 0;
}


/* ------------------------------
フッター
--------------------------------- */
.stitch {
  padding: 1rem !important;
  margin: 2em 0 !important;
  color: #565656;
  background-color: #a9a9a9;
  box-shadow: 0px 0px 0px 10px #a9a9a9;
  border: dashed 2px #fff;
  border-radius: 8px;
}

.stitch p {
  margin-bottom: .5rem;
}

.footer-info {
  display: grid;
  grid-template-columns: 5em 1fr; /* dt=5em, dd=残り幅 */
  row-gap: 0.5em;
	margin: 0 auto;
}

.footer-info dt {
  font-weight: bold;
}

.footer-info dd {
  margin: 0;
}

/* フッターロゴ */
#footer-logo {
  max-width: 310px;
  height: auto;
}

/* ------------------------------
	トップへ戻るボタン
--------------------------------- */
.page-top-btn {
  position: fixed;
  right: 30px;
  bottom: 30px;
  width: 50px;
  height: 50px;
  border: none;
  border-radius: 50%;
  background: rgba(232, 76, 136, 0.9); /* メインカラー #e84c88 */
  color: #fff;
  font-size: 1.2rem;
  box-shadow: 0 4px 10px rgba(0,0,0,0.3);
  opacity: 0;
  visibility: hidden;
  transition: all 0.4s ease;
  z-index: 999;
  cursor: pointer;
}

.page-top-btn:hover {
  background: #00a8a5; /* キャラクターカラーに連動 */
}

.page-top-btn.show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.page-top-btn.hide {
  opacity: 0;
  visibility: hidden;
  transform: translateY(20px);
}

/* モバイルでは非表示 */
@media (max-width: 767px) {
  .page-top-btn {
    display: none;
  }
}

/* ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

	トップページ

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */

/* トップ画像 */
.top-image {
  background-image: url("../img/gelato-image.jpg");
  background-size: cover;
  background-position: center center;
  height: 550px;
  box-shadow: 0px 5px 6px 0px #e2e2e2;
  border-radius: 0;
}

/* ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

	メニューページ

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */

/* サンプルトップ画像 */
.main-image {
  background-image: url("../img/gelato-image.jpg");
  background-size: cover;
  background-position: center center;
  height: 350px;
  box-shadow: 0px 5px 6px 0px #e2e2e2;
  border-radius: 0;
}

/* ジェラート価格 */
.gelato-price-wrap {
	background: #fff9e3;
	border-radius: 10px;
	padding: 1.5em 1em 0.5em;
	margin-bottom: 1em;
}

/* メニューの英語表記 */
.menu-sub-title {
	color: #aaa;
	font-size: 1rem;
	text-align: center;
	margin-bottom: 1rem;
}
/* 丸バッジ（ひと言コメント） */
.circle-badges {
  position: absolute;
  top: -30px;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background-color: #e7bc72;
  text-align: center;
  line-height: 120px;
  color: #fff;
  font-size: 1.2rem;
  z-index: 999;
  box-shadow: 0 6px 18px rgba(160,160,160,.5);
}
.circle-badges.pos-right {
	right:0;
}

/* ピンク：艶やかなグラデーション */
.circle-badges.main-pink {
  color: #fff;
  background: linear-gradient(135deg, #f9a3c3 0%, #e84c88 45%, #c13b6e 100%);
}

/* ミント：深みのあるターコイズ系グラデーション */
.circle-badges.sub-mint {
  color: #ffffff;
  background: linear-gradient(135deg, #4de4dd 0%, #00a8a5 45%, #007874 100%);
}

/* チョコ：濃厚でマットなブラウングラデーション */
.circle-badges.choco {
  color: #f7e8d0;
  background: linear-gradient(135deg, #7a5436 0%, #5a3d2b 50%, #3a2414 100%);
}

/* 抹茶：自然な深みと渋みを感じるグラデーション */
.circle-badges.matcha {
  color: #f6f5e9;
  background: linear-gradient(135deg, #9ccf8d 0%, #3b7a3f 45%, #2b5129 100%);
}

/* バニラ：やさしいクリームトーンのグラデーション */
.circle-badges.vanilla {
  color: #4a3b1b;
  background: linear-gradient(135deg, #fff9e3 0%, #f6e7b3 45%, #e5d28d 100%);
}

/* ラムレーズン：芳醇な香り漂う大人のワインブラウン */
.circle-badges.rumraisin {
  color: #f6edf2;
  background: linear-gradient(135deg, #b77ba0 0%, #7b3c65 45%, #4a1f3a 100%);
}

/* ゴールド：高級感ある金属グラデーション */
.circle-badges.gold {
  color: #2b1c07;
  background: linear-gradient(135deg, #f9e19a 0%, #f3c24e 45%, #e2a72c 100%);
}

/* スカイブルー：透明感ある爽やかなグラデーション */
.circle-badges.skyblue {
  color: #ffffff;
  background: linear-gradient(135deg, #b7e3ff 0%, #66b8ff 45%, #2b7de8 100%);
}

/* 左ナビ（ブロック全体ホバー） */
.menu-side .list-group-item {
  border: 1px solid #eee;
  border-left: 4px solid transparent;
  transition:
    background-color .25s ease,
    color .25s ease,
    border-left-color .25s ease,
    box-shadow .25s ease;
}
.menu-side .list-group-item:hover {
  background-color: #f8f9fa;     /* 淡いグレー */
  color: #333;
  border-left-color: #e84c88;    /* ブランドカラーで強調 */
  text-decoration: none;
  box-shadow: 0 2px 10px rgba(0,0,0,.06);
}
.menu-side .list-group-item.active {
  background-color: #e84c88;
  border-color: #e84c88;
  color: #fff;
}
.menu-side .list-group-item.active small {
  color: #fff;
  opacity: .9;
}
.menu-side .list-group-item h4 {
  margin: 0 0 .25rem;
  font-size: 1.1rem; /* BS3でも見やすく */
}
.menu-side .list-group-item small {
  color: inherit;
  opacity: .7;
}
.menu-side .list-group-item-text {
  margin-bottom: 0;
  opacity: .85;
}

/* 左ナビをスクロール固定 */
.menu-side-wrap {
  position: -webkit-sticky; /* Safari対応 */
  position: sticky;
  top: 150px; /* 固定開始位置（ナビバー分の余白） */
  z-index: 10;
}

/* スクロール固定用の見た目補正 */
.menu-side {
  background: #fff;
  border: 1px solid #eee;
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
  padding: 10px;
}

/* ホバー演出 */
.menu-side .list-group-item {
  border: 1px solid #eee;
  border-left: 4px solid transparent;
  transition: background-color .25s ease, border-left-color .25s ease;
}
.menu-side .list-group-item:hover {
  background-color: #f9f9f9;
  border-left-color: #e84c88;
  text-decoration: none;
}
.menu-side .list-group-item.active {
  background-color: #e84c88;
  border-color: #e84c88;
  color: #fff;
}
.menu-side .list-group-item.active small {
  color: #fff;
  opacity: .9;
}

/* 親にoverflowが付いているとstickyが死ぬ → 明示的に可視に */
.container-fulid, .container-fluid, .row { overflow: visible; }

/* 左ナビをstickyに */
@media (min-width: 992px) { /* PCのみ */
  .menu-side-outer { position: -webkit-sticky; position: sticky; top: 153px; z-index: 10; }
  .menu-side { background: #fff; border: 1px solid #eee; border-radius: 4px; padding: 10px; }
}

/*--------------------------------------------------
		商品リスト
--------------------------------------------------*/
#menu-list h3 {
	text-align: center !important;
	margin-bottom: 0.5em;
}

/* その他の商品リスト（ジェラート） */
.gelato-card {
  background: #fff;
  border: 1px solid #dee2e6;
  border-radius: .5rem;
  padding: 1rem;
  margin-bottom: 1em;
  box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.gelato-card h4 {
  font-size: 1.1rem;
  margin-bottom: .5rem;
  font-weight: 600;
}

.gelato-card .desc {
  font-size: .9rem;
  color: #555;
  margin-bottom: .5rem;
  line-height: 1.5;
}

.gelato-card .price {
  font-weight: bold;
  font-size: .9rem;
  color: #444;
	margin-bottom: 0;
	text-align: right;
}

.gelato-card .price span {
  display: inline-block;
  margin-right: .5rem;
}

/* 価格 */
#menu-list .price {
  font-weight: bold;
  color: #444;
	margin-bottom: 0;
	text-align: right;
}

/* ========== corner badge (右上コーナーリボン) ========== */
/* 画像の親に付与 */
.badge-wrap {
  position: relative;
  display: inline-block;   /* 必要に応じて block でもOK */
  overflow: hidden;        /* はみ出し隠し（演出の切れ目を整える） */
  border-radius: .5rem;    /* 任意：角丸の画像と相性良い */
}

/* ベース：右上に固定・45度回転させた帯を乗せる */
.corner-badge {
  --badge-bg: #e84c88;     /* 既定：メインカラー */
  --badge-shadow: rgba(0,0,0,.18);
  --badge-text: #fff;

  position: absolute;
  top: 10px;
  right: -42px;            /* 帯の中心が角に来るように調整 */
  z-index: 2;
  transform: rotate(45deg);
  background: var(--badge-bg);
  color: var(--badge-text);
  font-weight: 700;
  font-size: 12px;
  line-height: 1;
  letter-spacing: .04em;
  text-transform: none;
  padding: 8px 54px;       /* 斜め帯の幅感（文言長に合わせて調整） */
  box-shadow: 0 6px 16px var(--badge-shadow);
  pointer-events: none;    /* 画像のクリックを邪魔しない */
}

/* 端の“折り返し”っぽい影を演出（お好みで） */
.corner-badge::before,
.corner-badge::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid rgba(255,255,255,.18);
  mix-blend-mode: overlay;
  pointer-events: none;
}

/* スマホで少し小さめに */
@media (max-width: 575.98px) {
  .corner-badge {
    right: -38px;
    padding: 6px 46px;
    font-size: 11px;
  }
}

/* ========= カラーバリエーション ========= */
.corner-badge--pink  { --badge-bg: #e84c88; } /* メイン */
.corner-badge--mint  { --badge-bg: #00a8a5; } /* キャラ色 */
.corner-badge--choco { --badge-bg: #5a3d2b; } /* 濃厚系チョコ */
.corner-badge--gold  {
  /* ゴールド風グラデーション */
  --badge-text: #2b1c07;
  background: linear-gradient(135deg, #f9e19a 0%, #f3c24e 45%, #e2a72c 100%);
  box-shadow: 0 6px 18px rgba(160,120,20,.35);
}

/* アウトライン版（写真を強く隠したくない時） */
.corner-badge--outline {
  background: transparent;
  color: var(--badge-bg);
  border: 2px solid var(--badge-bg);
  box-shadow: none;
}

/* 立体感を強める（薄い縁と内側の光沢） */
.corner-badge--bevel {
  box-shadow:
    0 6px 16px rgba(0,0,0,.18),
    inset 0 1px 0 rgba(255,255,255,.35),
    inset 0 -1px 0 rgba(0,0,0,.08);
}

/* 角のチップ風“しっぽ”を追加（好みで） */
.corner-badge.chip::after {
  content: "";
  position: absolute;
  right: -2px; bottom: -2px;
  width: 10px; height: 10px;
  background: rgba(0,0,0,.12);
  transform: rotate(45deg);
  filter: blur(1px);
  border-radius: 1px;
  pointer-events: none;
}

/* 文字を少し詰めるユーティリティ */
.badge-tight { letter-spacing: .02em; }

/* 角バッジを少しだけアニメ表示（ふわっと） */
.badge-fadein {
  animation: badgeFade .35s ease-out both;
}
@keyframes badgeFade {
  from { opacity: 0; transform: rotate(45deg) translateY(-6px); }
  to   { opacity: 1; transform: rotate(45deg) translateY(0); }
}




/* ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

CONTACTページ

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */

/* 入力フォーム */
input[type]:focus {
  outline: 0;
  box-shadow: none;
  border: 2px solid orange;
}

/* ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

メディアクエリ

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */

/* 中デバイス（タブレット, 992px 未満）
============================================== */
@media screen and (max-width: 991.98px) {

  .logo-mark {
    top: 5%;
    left: 5%;
  }

  #top-message {
    left: 5%;
	  max-width: 80%;
  }

  .zigzag {
    margin: 10% 0;
  }

  .light-zigzag {
    margin: 10% 0 0;
  }
}

/* END */

/* 小デバイス（横向きモバイル, 768px 未満）
============================================== */
@media screen and (max-width: 767.98px) {

	.navbar {
		justify-content: start;
	}

  /* ロゴマークを小さく設定 */
  .logo-mark {
    height: 140px;
    width: 140px;
  }

  .logo-mark img {
    width: 50%;
  }

  .lead {
    font-size: 1rem;
  }

  /* バッジの基本：左寄せ */
  .position-relative > .circle-badges {
    position: absolute;
    z-index: 2;          /* 画像より前に出す */
    top: -10px;
    left: 10px;          /* ← デフォルトは左 */
    right: auto;
    width: 100px;
    height: 100px;
    line-height: 100px;
    font-size: 1rem;
  }

  /* .pos-right が付いたら右寄せに切替 */
  .position-relative > .circle-badges.pos-right {
    left: auto;          /* ← 左を無効化 */
    right: 10px;         /* ← 右へ配置 */
  }
}

/* END */

/* 極小デバイス（縦向きモバイル, 576px 未満）
	============================================== */
@media screen and (max-width: 575.98px) {

	body {
		padding-top: 55px;
	}

	/* ヘッダーSNS */
	#header-sns {
		top: 13px;
	}

	/* ヘッダーロゴイメージ */
	.logo-font img {
		height: 28px;
	}

  .display-3,
  .display-4 {
    font-size: 2rem;
  }

  .logo-mark {
    left: 5%;
   /*  top: -10px; */

  }

  .logo-mark img {
    top: 25%;
    left: 25%;
  }

  .zigzag,
  .light-zigzag {
    margin: 15% 0;
  }

  .stitch img {
    width: 100%;
  }
}

/* END */