@charset "UTF-8";



/* ▼ スマホ（～md未満）だけ適用 */
@media (max-width: 767.98px) {

body, p { font-size:1.0rem;line-height: 1.2rem !important; }
/* 横スクロール防止 - 全体制御 */
html, body {
  overflow-x: hidden !important;
  max-width: 100vw !important;
  width: 100% !important;
}
/* すべてのコンテナの幅を制限 */
.container-fluid,
.container,
.row {
  max-width: 100% !important;
  overflow-x: hidden !important;
}

/* 半円背景の幅を100%に調整 */
.half {
  width: 100% !important;
  left: 0 !important;
  border-top-left-radius: 0 !important;
  border-top-right-radius: 0 !important;
}

header .container-fluid {
	height: 70vh;
	width: 100%;
	background: url(../img/image-top2.jpg);
	background-size: cover;
	background-position: 50% 50%;
}
.mni{display:none;}
  /* mod-gnav を固定。inlineの bottom:0 を打ち消して上固定に */
  .mod-gnav {
    position: fixed !important;
    top: 0 !important;
    bottom: auto !important;
    left: 0; 
    right: 0;
    z-index: 1030;
    width: 100% !important;
    max-width: 100vw !important;
    overflow-x: hidden !important;
  }

  /* ヒーローに被らないように本文に上余白（高さは実寸に合わせ調整） */
  body { padding-top: 60px; }

  /* 中央ロゴ（ヒーロー内）はスマホでは非表示（上で d-none 付けてるが保険） */
  .mod-gnav .logo { display: none !important; }

  /* モバイルの左ロゴサイズと左寄せ */
  .navbar-brand {
    margin-right: auto !important;
    margin-left: 0 !important;
    max-width: calc(100vw - 100px) !important;
    flex-shrink: 1 !important;
    justify-content: flex-start !important;
    text-align: left !important;
  }
  
  .navbar-brand .navbar-logo { 
    height: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    max-height: 38px !important;
    object-fit: contain !important;
    display: block !important;
  }
  
  /* ナビバー全体 - 左右配置を明確に */
  .navbar {
    flex-wrap: wrap !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding-left: 15px !important;
    padding-right: 15px !important;
  }
  
  /* ハンバーガーボタンを右寄せ */
  .navbar-toggler {
    margin-left: auto !important;
    margin-right: 0 !important;
    flex-shrink: 0 !important;
  }
  
  /* メニューコンテナ - 必ず次の行に */
  .navbar-collapse {
    flex-basis: 100% !important;
    flex-grow: 1 !important;
  }
  
  /* メニューリスト - 縦並び */
  .navbar-nav {
    flex-direction: column !important;
  }
  
  /* ナビゲーション全体の幅制御 */
  .mod-gnav .container,
  .mod-gnav nav,
  .mod-gnav .navbar {
    max-width: 100% !important;
    padding-left: 15px !important;
    padding-right: 15px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  
  /* ナビの背景部分も幅制御 */
  .mod-gnav .bg-info,
  .mod-gnav .position-relative {
    max-width: 100vw !important;
    overflow-x: hidden !important;
  }

  /* 長い日本語のメニューも折り返せるように */
  .navbar .nav-link {
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  /* グリッドの「縮まない問題」保険（スマホ時だけでOK） */
  .row > [class*="col"] { min-width: 0; }
  
  /* rowの負のマージンを打ち消し */
  .row {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  
  /* colのpaddingを維持 */
  [class*="col-"] {
    padding-left: 15px !important;
    padding-right: 15px !important;
  }
}

/* ── スマホ時だけヘッダを薄くする（PCは現状維持） ── */
@media (max-width: 767.98px) {

  /* ヘッダ内の半円背景を消す */
  header .half { display: none !important; }
  
  /* sec0の半円もフラットに */
  #sec0 .half { 
    display: none !important;
  }
  
  /* sec0の背景色を確保 */
  #sec0 {
    background: #ffff99;
  }
  /* 中央ロゴの入っているブロックも消す（高さ稼ぎをカット） */
  header .position-relative.text-center.bg-info { display: none !important; }

  /* その上の余計な上パディング（pt-5）をゼロに */
  .mod-gnav .position-relative.pt-5 { padding-top: 0 !important; }

  /* ナビの上下パディングを詰める（py-3 → 約8pxずつ） */
  .mod-gnav .bg-info.py-3 {
    padding-top: .5rem !important;
    padding-bottom: .5rem !important;
  }

  /* ロゴも少しだけ小さめに（必要に応じて調整） */
  .navbar-brand .navbar-logo { height: 30px; width: auto; }

  /* 固定ヘッダぶんの本文余白を小さく（56〜64px目安） */
  body { padding-top: 60px; }
}

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

/* 横スクロール防止 - タブレット用 */
html, body {
  overflow-x: hidden !important;
  max-width: 100vw !important;
  position: relative !important;
}

/* すべての要素の幅を制限 */
* {
  max-width: 100vw !important;
}

.container-fluid,
.container,
.row,
section {
  overflow-x: hidden !important;
}

/* 半円背景をタブレットでもフラットに */
.half {
  width: 100% !important;
  left: 0 !important;
  border-top-left-radius: 0 !important;
  border-top-right-radius: 0 !important;
}

h2 { font-size: 1.2rem !important; }
.logo { width: 75%; }
.balloon, .balloon-s {
	width: 120px;
	height: 120px;
	top: -60px;
	left: 4px;
	font-size: 14px;
}
}/* END */

/* 極小デバイス（縦向きモバイル, 576px 以上）
============================================== */
@media screen and (min-width: 768px) {

/* iPad等のタブレットでも横スクロール防止 */
html, body {
  overflow-x: hidden !important;
  max-width: 100vw !important;
}

.catch-copy {
	margin: 0 10px;
	font-weight: bold;
	text-align: center;
	color: #ff33ff;
   font-size: 4.0rem;
	padding-top: 20px;
  line-height: calc(1em + 10px); /* 影の上下 5px×2 を想定して余白を足す */
	
	text-shadow: 3px 0px 2px #fff, 0px 3px 2px #fff, -1px 0px 2px #fff, 0px -1px 2px #fff;
}    
#Navbar ul li {
	background-color: #ffffcc;
	border-radius: 50%;
	display: table;
	margin-right: 5px;
}
#Navbar ul li:last-child { margin-right: 0; }
#Navbar ul li a {
	text-align: center;
	font-weight: bold;
	width: 100px;
	height: 100px;
	margin: 0 auto;
	display: table-cell;
	vertical-align: middle;
	line-height: 1.36rem;
    font-size: 1.0rem; /* ← 追加（お好みで0.8rem～1.1remなど）*/
}
}/* END */

/* 極小デバイス（縦向きモバイル, 576px 未満）
============================================== */
@media screen and (max-width: 767.98px) {
#Navbar ul li a {
	font-weight: bold;
	color: #fff !important;
    font-size: 1.0rem; /* ← 追加（お好みで0.8rem～1.1remなど）*/
}
.h2, .h1, .h3, .h4 , .h5{
   font-size: 1.0rem;}
.catch-copy {
    margin: 0 10px;
    font-weight: bold;
    text-align: center;
	color: #ff33ff;
   font-size: 2.0rem;
	padding-top: 70px;
  line-height: calc(1em + 10px); /* 影の上下 5px×2 を想定して余白を足す */
	
	text-shadow: 3px 0px 2px #fff, 0px 3px 2px #fff, -1px 0px 2px #fff, 0px -1px 2px #fff;
    font-size: 2.5rem !important;
}
}/* END */