/* common.css - 共通スタイル */

/* リセット */
* { 
  margin: 0; 
  padding: 0; 
  box-sizing: border-box; 
}

html, body { 
  height: 100%; 
  width: 100%; 
}

body { 
  font-family: 'Noto Sans JP', sans-serif;
  background-color: #FFE4E1;
  background-image: url('../uploads/banners/site-background.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  color: #333333;
  font-size: 14px;
}

/* レイアウト */
.app-container { 
  width: 100%; 
  height: 100%; 
  overflow: auto; 
}

.content-wrapper { 
  min-height: 100%; 
  display: flex; 
  flex-direction: column; 
}

/* モーダル */
.modal-visible { 
  display: flex !important; 
}

/* トップバー */
#top-bar {
  background-color: #FF69B4;
  color: #FFFFFF;
}

#admin-mode-btn {
  background-color: #3B82F6;
  color: #FFFFFF;
}

#admin-mode-btn.active {
  background-color: #10B981;
}

/* ヘッダー */
#site-header {
  background-color: rgba(255, 255, 255, 0.95);
  border-bottom: 2px solid #FF69B4;
  backdrop-filter: blur(10px);
}

#corporation-name {
  color: #333333;
}

#site-title {
  color: #FF69B4;
}

#site-title a {
  color: inherit;
  text-decoration: none;
}

/* ナビゲーション */
#main-nav {
  background-color: rgba(255, 255, 255, 0.95);
  display: block !important; /* 強制表示 */
  backdrop-filter: blur(10px);
}

#mobile-nav {
  background-color: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
}

#mobile-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

#mobile-nav li {
  width: 100%;
  text-align: left;
}

/* デスクトップメニュー: 常に表示 */
@media (min-width: 768px) {
  #main-nav {
    display: block !important;
  }
  #mobile-nav {
    display: none !important;
  }
}

/* モバイルメニュー */
@media (max-width: 767px) {
  #main-nav {
    display: none !important;
  }
}

.nav-btn { 
  display: block; 
  width: 100%; 
  text-align: center;
  color: #333333;
  background-color: transparent;
  border: none;
  cursor: pointer;
  transition: all 0.3s;
  position: relative;
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 0.5rem;
  padding-bottom: 1.25rem;
  z-index: 1;
}

/* ナビゲーションタブの丸マーク（文字の下、2px以上離して配置） */
.nav-btn::before {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 0.25rem;
  transform: translateX(-50%);
  width: 8px;
  height: 8px;
  border-radius: 50%;
  opacity: 0.6;
  z-index: 0;
}

.nav-btn > * {
  position: relative;
  z-index: 2;
}

/* 各タブに異なる色の丸マーク */
.nav-btn[data-page="top"]::before { background-color: #FFB7C5; }
.nav-btn[data-page="philosophy"]::before { background-color: #B4E4FF; }
.nav-btn[data-page="daily"]::before { background-color: #C4F1BE; }
.nav-btn[data-page="events"]::before { background-color: #FFD4A3; }
.nav-btn[data-page="gallery"]::before { background-color: #DEB6E5; }
.nav-btn[data-page="menu"]::before { background-color: #FFE5B4; }
.nav-btn[data-page="form"]::before { background-color: #B0E0E6; }
.nav-btn[data-page="temporary"]::before { background-color: #F0E68C; }
.nav-btn[data-page="daredemo"]::before { background-color: #FFE4B5; }
.nav-btn[data-page="reservation"]::before { background-color: #FFC0CB; }
.nav-btn[data-page="recruit"]::before { background-color: #FFB6C1; }
.nav-btn[data-page="access"]::before { background-color: #87CEEB; }
.nav-btn[data-page="nursery"]::before { background-color: #98FB98; }
.nav-btn[data-page="privacy"]::before { background-color: #ADD8E6; }
.nav-btn[data-page="about"]::before { background-color: #98D8C8; }

.nav-btn:hover {
  background-color: #FFE4E1;
}

/* アクティブなタブは丸の色を背景に反映 */
.nav-btn.active-nav { 
  color: #fff !important; 
}

.nav-btn[data-page="top"].active-nav { background-color: #FFB7C5 !important; }
.nav-btn[data-page="philosophy"].active-nav { background-color: #B4E4FF !important; }
.nav-btn[data-page="daily"].active-nav { background-color: #C4F1BE !important; }
.nav-btn[data-page="events"].active-nav { background-color: #FFD4A3 !important; }
.nav-btn[data-page="gallery"].active-nav { background-color: #DEB6E5 !important; }
.nav-btn[data-page="menu"].active-nav { background-color: #FFE5B4 !important; }
.nav-btn[data-page="form"].active-nav { background-color: #B0E0E6 !important; }
.nav-btn[data-page="temporary"].active-nav { background-color: #F0E68C !important; }
.nav-btn[data-page="daredemo"].active-nav { background-color: #FFE4B5 !important; }
.nav-btn[data-page="reservation"].active-nav { background-color: #FFC0CB !important; }
.nav-btn[data-page="recruit"].active-nav { background-color: #FFB6C1 !important; }
.nav-btn[data-page="access"].active-nav { background-color: #87CEEB !important; }
.nav-btn[data-page="nursery"].active-nav { background-color: #98FB98 !important; }
.nav-btn[data-page="privacy"].active-nav { background-color: #ADD8E6 !important; }
.nav-btn[data-page="about"].active-nav { background-color: #98D8C8 !important; }

.nav-btn.active-nav::before {
  opacity: 1;
  width: 10px;
  height: 10px;
}

.mobile-nav-btn {
  color: #333333;
  position: relative;
  padding-left: 1rem !important;
  padding-right: 1rem !important;
  padding-top: 0.5rem !important;
  padding-bottom: 1.25rem !important;
  text-align: left !important;
  display: block;
  width: 100%;
  z-index: 1;
}

/* モバイルナビゲーションの丸マーク（文字の下、2px以上離して配置） */
.mobile-nav-btn::before {
  content: '';
  position: absolute;
  left: 1.5rem;
  bottom: 0.25rem;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  opacity: 0.6;
  z-index: 0;
}

.mobile-nav-btn > * {
  position: relative;
  z-index: 2;
}

/* 各タブに異なる色の丸マーク */
.mobile-nav-btn[data-page="top"]::before { background-color: #FFB7C5; }
.mobile-nav-btn[data-page="philosophy"]::before { background-color: #B4E4FF; }
.mobile-nav-btn[data-page="daily"]::before { background-color: #C4F1BE; }
.mobile-nav-btn[data-page="events"]::before { background-color: #FFD4A3; }
.mobile-nav-btn[data-page="gallery"]::before { background-color: #DEB6E5; }
.mobile-nav-btn[data-page="menu"]::before { background-color: #FFE5B4; }
.mobile-nav-btn[data-page="form"]::before { background-color: #B0E0E6; }
.mobile-nav-btn[data-page="temporary"]::before { background-color: #F0E68C; }
.mobile-nav-btn[data-page="daredemo"]::before { background-color: #FFE4B5; }
.mobile-nav-btn[data-page="reservation"]::before { background-color: #FFC0CB; }
.mobile-nav-btn[data-page="recruit"]::before { background-color: #FFB6C1; }
.mobile-nav-btn[data-page="access"]::before { background-color: #87CEEB; }
.mobile-nav-btn[data-page="nursery"]::before { background-color: #98FB98; }
.mobile-nav-btn[data-page="privacy"]::before { background-color: #ADD8E6; }
.mobile-nav-btn[data-page="about"]::before { background-color: #98D8C8; }

.mobile-nav-btn.active-nav::before {
  opacity: 1;
  width: 10px;
  height: 10px;
}

/* アクティブなタブは丸の色を背景に反映 */
.mobile-nav-btn[data-page="top"].active-nav { background-color: #FFB7C5 !important; color: #fff !important; }
.mobile-nav-btn[data-page="philosophy"].active-nav { background-color: #B4E4FF !important; color: #333 !important; }
.mobile-nav-btn[data-page="daily"].active-nav { background-color: #C4F1BE !important; color: #333 !important; }
.mobile-nav-btn[data-page="events"].active-nav { background-color: #FFD4A3 !important; color: #333 !important; }
.mobile-nav-btn[data-page="gallery"].active-nav { background-color: #DEB6E5 !important; color: #333 !important; }
.mobile-nav-btn[data-page="menu"].active-nav { background-color: #FFE5B4 !important; color: #333 !important; }
.mobile-nav-btn[data-page="form"].active-nav { background-color: #B0E0E6 !important; color: #333 !important; }
.mobile-nav-btn[data-page="temporary"].active-nav { background-color: #F0E68C !important; color: #333 !important; }
.mobile-nav-btn[data-page="daredemo"].active-nav { background-color: #FFE4B5 !important; color: #333 !important; }
.mobile-nav-btn[data-page="reservation"].active-nav { background-color: #FFC0CB !important; color: #333 !important; }
.mobile-nav-btn[data-page="recruit"].active-nav { background-color: #FFB6C1 !important; color: #333 !important; }
.mobile-nav-btn[data-page="access"].active-nav { background-color: #87CEEB !important; color: #333 !important; }
.mobile-nav-btn[data-page="nursery"].active-nav { background-color: #98FB98 !important; color: #333 !important; }
.mobile-nav-btn[data-page="privacy"].active-nav { background-color: #ADD8E6 !important; color: #333 !important; }
.mobile-nav-btn[data-page="about"].active-nav { background-color: #98D8C8 !important; color: #333 !important; }

/* ヒーロー */
.hero-banner { 
  background: linear-gradient(135deg, #FF69B4 0%, #87CEEB 100%); 
}

/* セクションタイトル */
.page-title, 
.section-title { 
  color: #FF69B4 !important; 
  border-bottom-color: #FF69B4 !important; 
}

/* 見出しスタイル統一 */
/* h2: ページタイトル */
h2.page-title {
  font-size: 1.875rem; /* text-3xl */
  font-weight: 700; /* font-bold */
  margin-bottom: 2rem; /* mb-8 */
  padding-bottom: 0.75rem; /* pb-3 */
  border-bottom: 2px solid #FF69B4;
  border-radius: 0.5rem;
  color: #FF69B4 !important;
  background-color: #FFFFFF; /* 白背景 */
  padding: 1rem; /* 内側余白 */
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

/* h3: セクション見出し（大） */
h3.section-heading {
  font-size: 1.5rem; /* text-2xl */
  font-weight: 700; /* font-bold */
  margin-bottom: 1.5rem; /* mb-6 */
  color: #333333;
  background-color: #FFFFFF; /* 白背景 */
  padding: 0.75rem 1rem; /* 内側余白 */
  border-left: 4px solid #FF69B4;
  border-radius: 0.375rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

/* h3: セクション見出し（中） */
h3.section-subheading {
  font-size: 1.25rem; /* text-xl */
  font-weight: 700; /* font-bold */
  margin-bottom: 1rem; /* mb-4 */
  color: #333333;
  background-color: #FFFFFF; /* 白背景 */
  padding: 0.5rem 0.75rem; /* 内側余白 */
  border-left: 3px solid #FF69B4;
  border-radius: 0.375rem;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

/* h3: カード内見出し */
h3.card-title {
  font-size: 1.25rem; /* text-xl */
  font-weight: 700; /* font-bold */
  margin-bottom: 1rem; /* mb-4 */
  color: #FF69B4;
  /* カード内なので背景不要 */
}

/* h4: 小見出し */
h4.small-heading {
  font-size: 1.125rem; /* text-lg */
  font-weight: 600; /* font-semibold */
  margin-bottom: 0.75rem; /* mb-3 */
  color: #333333;
  background-color: #FFFFFF; /* 白背景 */
  padding: 0.5rem; /* 内側余白 */
  border-radius: 0.25rem;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

/* 色付きsmall-headingは背景を透明に */
h4.small-heading.text-pink-600,
h4.small-heading.text-blue-600,
h4.small-heading.text-green-600,
h4.small-heading.text-yellow-600,
h4.small-heading.text-purple-600,
h4.small-heading.text-orange-600 {
  background-color: transparent;
  box-shadow: none;
  padding: 0;
}

/* カード類 */
.content-section, 
.feature-card, 
.schedule-card,
.event-card, 
.form-card, 
.other-events-card { 
  background-color: rgba(255, 255, 255, 0.9); 
  border-color: #E5E7EB;
  border-radius: 12px;
  backdrop-filter: blur(5px);
}

/* ニュース */
.news-item { 
  border-left: 4px solid #FF69B4;
  background-color: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(5px);
}

.news-category { 
  background-color: #FF69B4;
  color: #FFFFFF;
}

/* 保育理念 */
.principle-item { 
  background-color: #FFE4E1; 
  border-left: 4px solid #FF69B4; 
}

.policy-box { 
  background-color: #FFE4E1; 
}

/* スケジュール */
.schedule-header { 
  background-color: #FFE4E1; 
}

.schedule-card {
  background-color: #FFFFFF;
}

.time-row-even { 
  background-color: #FFE4E1; 
}

.time-label { 
  color: #FF69B4 !important;
  font-weight: bold;
}

/* 行事 */
.event-month-title { 
  color: #FF69B4 !important; 
}

.event-bullet { 
  color: #FF69B4; 
}

.event-section-title { 
  color: #FF69B4 !important; 
  border-bottom-color: #E5E7EB; 
}

.event-image-container {
  background: linear-gradient(135deg, #FFE4E1 0%, #FFC0CB 100%);
}

/* フォーム・書類 */
.form-card {
  background-color: #FFFFFF;
}

.form-card-title { 
  color: #FF69B4 !important; 
}

.download-btn { 
  background-color: #FF69B4 !important; 
  color: #fff !important; 
  border: none;
  cursor: pointer;
  transition: all 0.3s;
}

.download-btn:hover {
  background-color: #FF1493 !important;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.about-link-btn { 
  background-color: #FF69B4 !important; 
  color: #fff !important;
  text-decoration: none;
  display: inline-block;
}

/* フッター */
#site-footer { 
  background-color: rgba(255, 255, 255, 0.95); 
  border-top: 4px solid #FF69B4;
  margin-top: auto;
  backdrop-filter: blur(10px);
}

#footer-title { 
  color: #FF69B4 !important; 
}

/* スライドショー */
.slideshow-image { 
  position: absolute; 
  inset: 0; 
  width: 100%; 
  height: 100%; 
  transition: opacity 1s;
  /* 高画質表示設定 */
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
  -ms-interpolation-mode: bicubic;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
  /* 明るさ調整 */
  filter: brightness(1.15) contrast(1.05);
  -webkit-filter: brightness(1.15) contrast(1.05);
}

/* ボタン */
button {
  cursor: pointer;
  transition: all 0.3s;
}

button:hover {
  opacity: 0.9;
}

/* リンク */
a {
  color: inherit;
  text-decoration: none;
}

a:hover {
  opacity: 0.8;
}

/* ギャラリー */
.gallery-item {
  background-color: #FFFFFF;
  border: 1px solid #E5E7EB;
}

/* 献立 */
#menu-list .content-section {
  background-color: #FFFFFF;
}

/* 入力フォーム */
input[type="text"],
input[type="password"],
input[type="email"],
input[type="file"],
textarea,
select {
  border: 1px solid #E5E7EB;
  border-radius: 0.375rem;
  padding: 0.5rem 1rem;
  width: 100%;
  font-family: inherit;
}

input[type="text"]:focus,
input[type="password"]:focus,
input[type="email"]:focus,
textarea:focus,
select:focus {
  outline: none;
  border-color: #FF69B4;
  box-shadow: 0 0 0 3px rgba(255, 105, 180, 0.1);
}

/* ローディング・プレースホルダー */
.loading {
  color: #999;
  text-align: center;
  padding: 2rem;
}

/* レスポンシブ調整 */
@media (max-width: 768px) {
  body {
    font-size: 13px;
  }
  
  .page-title {
    font-size: 1.5rem !important;
  }
  
  .section-title {
    font-size: 1.25rem !important;
  }
}

/* ユーティリティ */
.text-center { text-align: center; }
.hidden { display: none !important; }
.block { display: block; }
.inline-block { display: inline-block; }
.flex { display: flex; }
.grid { display: grid; }

.nav-btn[data-page="access"]::before { background-color: #87CEEB; }
.mobile-nav-btn[data-page="access"]::before { background-color: #87CEEB; }

.nav-btn[data-page="reservation"]::before { background-color: #FFE4B5; }
.mobile-nav-btn[data-page="reservation"]::before { background-color: #FFE4B5; }