@import url('https://fonts.googleapis.com/css2?family=Philosopher:ital,wght@0,400;0,700;1,400;1,700&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Kaisei+Decol:wght@400;700&display=swap');

.philosopher-regular {
  font-family: "Philosopher", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.philosopher-bold {
  font-family: "Philosopher", sans-serif;
  font-weight: 700;
  font-style: normal;
}

.philosopher-regular-italic {
  font-family: "Philosopher", sans-serif;
  font-weight: 400;
  font-style: italic;
}

.philosopher-bold-italic {
  font-family: "Philosopher", sans-serif;
  font-weight: 700;
  font-style: italic;
}


.kaisei-decol-regular {
  font-family: "Kaisei Decol", serif;
  font-weight: 400;
  font-style: normal;
}

.kaisei-decol-bold {
  font-family: "Kaisei Decol", serif;
  font-weight: 700;
  font-style: normal;
}



/* レスポンシブ対応フォントサイズ */
html {
  font-size: clamp(1rem, calc(1rem + 1vw), 1.3rem);
}


/* URL下線なし */
a {
  text-decoration: none;
}

/* サイト全体の背景 */
body {
  background-color: #C0C0C0;   /* 外側のグレー */
  font-family: "Kaisei Decol", serif;
  margin: 0;
  padding: 0;
  font-size: clamp(15px, 1vw + 0.6rem, 17px);  
  font-family: "Philosopher", "Kaisei Decol", serif;
}

/* コンテンツ部分（白背景の箱） */
main {
  background-color: #ffffff;   /* 中の白 */
  width: 95%;                  /* 常に画面幅の90% */
  margin: 0 auto;              /* 中央寄せ */
  padding: 20px;
  box-sizing: border-box;      /* padding込みで幅計算 */
  max-width: 1200px;           /* 広すぎ防止のため上限 */
  box-shadow: 0 0 0 4px #ffffff inset,  
              0 0 0 8px #C0C0C0 inset,   
              0 0 0 10px #ffffff inset,  
              0 0 0 12px #C0C0C0 inset;
  border-radius: 10px;
  margin-bottom: 50px;  /* mainの下に余白を作る */
}


/* header全体を固定 */
.header {
  position: fixed;          
  top: 0;
  left: 0;
  width: 100%;              
  z-index: 1000;            
}

/* タイトル部分（双裏 ─futaura─） */
.header p {
  margin: 0;                  
  padding: 4px 0;             /* ← 黒帯をさらに細め */
  font-size: clamp(14px, 1.5vw, 14px); 
  color: #ffffff;
  background-color: #000000;
  text-align: center;
  line-height: 1.2;           /* ← 黒帯をスッキリ見せる */
}

/* nav部分 */
.header-nav {
  margin: 0;
  padding: 0;
  background-color: transparent; /* ← 後ろは透ける */
}

/* ulをflex化 */
.header ul {
  display: flex;
  justify-content: space-around; 
  align-items: stretch;
  margin: 0;
  padding: 0 5px;   /* ← 黒帯にピッタリくっつける */
  list-style: none;
  flex-wrap: nowrap;  /* ← 常に横並び */
}

/* li */
.header li {
  flex: 1;                      
  text-align: center;
  margin: 0 3px;  /* ← ボタン間のスペース少し広め */
}

/* aタグ（ボタン） */
.header li a {
  display: block;
  padding: clamp(14px, 1.5vw, 14px) ;
  /* ↑ li を大きめに（縦横ともに広め） */

  color: #fff;
  text-decoration: none;
  font-size: clamp(14px, 1vw + 0.6rem, 18px);  
  /* ↑ スマホで小さめ、PCでしっかり大きめ */

  box-shadow: 0 0 0 2px #B1063A inset,  
              0 0 0 4px #ffffff inset,   
              0 0 0 6px #B1063A inset,  
              0 0 0 7px #ffffff inset;
  border-radius: 14px;
  white-space: nowrap;
  background-color: #B1063A;          
  transition: background-color 0.2s ease;
}


/* コンテンツがヘッダーに隠れないように */
body {
  margin: 0;
  padding-top: 80px;  /* ← 黒帯を細くした分だけ調整 */
}


/* ===== スマホ専用調整 ===== */
@media (max-width: 600px) {
  .header li a {
    padding: 18px 12px;         /* ← 縦横の余白を広めに */
    font-size: 12px;            /* ← 小画面でも読みやすいサイズに固定 */
  }
}


/* ===== 月のアニメ ===== */
@keyframes breathingGlow {
  0%   { opacity: 1;   }
  50%  { opacity: 0.6; }
  100% { opacity: 1;   }
}

.moon-glow {
  animation: breathingGlow 6s ease-in-out infinite;
}


/* フッター系（ページ最下部に固定） */
html, body {
  height: 100%;
  margin: 0;
  display: flex;
  flex-direction: column;
}

main {
  flex: 1;   /* 本文を伸縮させて余白を埋める */
}

/* フッター全体 */
.footer {
  background-color: #000000;
  color: #ffffff;
  text-align: center;
  padding: 16px 10px;
  margin-top: auto;   /* ← flexboxで下に張り付く */
}

/* nav部分 */
.footer-nav ul {
  display: flex;
  justify-content: center;    /* 中央寄せ */
  align-items: center;
  flex-wrap: nowrap;          /* 常に横並び（折り返さない） */
  gap: 10px; 
  margin: 0 0 8px 0;
  padding: 0;
  list-style: none;
}

/* li */
.footer-nav li {
  margin: 0 8px;
}

/* aタグ */
.footer-nav li a {
  color: #ffffff;
  text-decoration: none;
  font-size: clamp(11px, 2.4vw, 16px);
  white-space: nowrap;
  display: block;               
}

/* コピーライト */
.footer p {
  margin: 0;
  font-size: clamp(10px, 1.5vw, 12px);
  opacity: 0.7;
}

/* 見出しタグ */
h1 {
   display: inline-block;
  padding: clamp(8px, 0.8vw + 6px, 12px);
  color: #fff;
  font-size: clamp(16px, 1vw + 0.8rem, 18px);
  text-align: center;

  box-shadow: 0 0 0 2px #B1063A inset,  
              0 0 0 4px #ffffff inset,   
              0 0 0 6px #B1063A inset,  
              0 0 0 7px #ffffff inset;
  border-radius: 12px;
  white-space: normal;
  background-color: #B1063A; 
  overflow-wrap: break-word;
}

h2 {
  position: relative;
  margin: 20px 0;
  padding: 5px 0 5px 40px;
  color: #B1063A;
  border-bottom: 2px solid #000000; /* 下線 */
  font-size: clamp(15px, 0.9vw + 0.6rem, 17px);
}

/* 太い縦線 */
h2::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 20px;                 /* 太い方 */
  background: #000000;
}

/* 細い縦線 */
h2::after {
  content: "";
  position: absolute;
  left: 24px;                 /* 太線のすぐ右 */
  top: 0;
  bottom: 0;
  width: 2px;                 /* 細い方 */
  background: #000000;  
}




h3 {
  position: relative;
  margin: 16px 0;
  color: #B1063A;
  font-size: clamp(14px, 0.8vw + 0.5rem, 16px);
}

/* 前の【 */
h3::before {
  content: "【";
  margin-right: 6px; /* 文字との余白 */
  color: #000000;     
}

/* 後ろの 】 */
h3::after {
  content: "】";
  margin-left: 6px;  /* 文字との余白 */
  color: #000000;    
}


h2,
h2 a,
h2 a:link,
h2 a:visited,
h2 a:hover,
h2 a:active,
h3,
h3 a,
h3 a:link,
h3 a:visited,
h3 a:hover,
h3 a:active {
  color: #B1063A !important;
}

h4 {
  position: relative;
  margin: 12px 0;
  color: #B1063A;
  font-size: clamp(13px, 0.7vw + 0.4rem, 15px);
}

/* 前の< */
h4::before {
  content: "<";
  margin-right: 6px; /* 文字との余白 */
  color: #000000;     
}

/* 後ろの > */
h4::after {
  content: ">";
  margin-left: 6px;  /* 文字との余白 */
  color: #000000;    
}


h5 {
  position: relative;
  margin: 12px 0;
  color: #000000;
  border-bottom: 2px double #B1063A; 
  font-size: clamp(12px, 0.6vw + 0.4rem, 14px);
}


h1, h2, h3, h4, h5 {
  margin-bottom: 8px;  
}

p {
  margin-top: 8px;  /* デフォルトのブラウザ余白を少なめに */
  margin-bottom: 12px;
  line-height: 1.6;
}

/* 同盟バナー系 */

.banner-area {
  display: flex;
  flex-wrap: wrap;      /* 横幅が足りなければ折り返し */
  gap: 8px;             /* バナー間の余白 */
  justify-content: flex-start; /* 左詰め */
  align-items: flex-end;  /
  margin-bottom: 20px; 
}

.banner-area img {
  display: block;       /* 余白消し */
  height: auto;
}



/* パンくずリスト */
.breadcrumb {
  margin: 10px 0 20px 20px; 
  padding: 0;
  list-style: none;
}

.breadcrumb li {
  display: inline;/*横に並ぶように*/
}

.breadcrumb li:after {/* >を表示*/
  content: '>';
  padding: 0 0.2em;
  color: #000000; ;
}

.breadcrumb li:last-child:after {
  content: '';
}

.breadcrumb li:first-child a:before {/* >を表示*/
  content: '>';
  padding: 0 0.2em;
  color: #000000; ;
}

.breadcrumb li a {
  text-decoration: none;
  color: inherit;
}

.breadcrumb li a:visited,
.breadcrumb li a:hover,
.breadcrumb li a:active {
  color: inherit;       
}

.breadcrumb li a:hover {
  text-decoration: underline;
}





/* 文章強調系 */
.highlighted {
  background: linear-gradient(transparent 75%, #B1063A 60%); 
}

.highlighted-gray {
 background: linear-gradient(transparent 75%, #C0C0C0 60%); 
}


.bold {
  font-weight: bold;
}