@import url('https://fonts.googleapis.com/css2?family=Kosugi+Maru&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Dela+Gothic+One&display=swap');


.kosugi-maru-regular {
  font-family: "Kosugi Maru", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.dela-gothic-one-regular {
  font-family: "Dela Gothic One", sans-serif;
  font-weight: 400;
  font-style: normal;
}



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


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

/* サイト全体の背景 */
body {
  background-color: #ffffff;
  background: linear-gradient(45deg, #000000 25%, transparent 25%, transparent 75%, #000000 75%),
              linear-gradient(45deg, #000000 25%, transparent 25%, transparent 75%, #000000 75%);
  background-size: 40px 40px;
  background-position: 0 0, 20px 20px;
  font-family: "Kosugi Maru", sans-serif;
  margin: 0;
  padding: 0;
  font-size: clamp(15px, 1vw + 0.6rem, 17px);  
}

/* コンテンツ部分（白背景の箱） */
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 6px #000000 inset,  
                0 0 0 8px #ffffff inset,  
                0 0 0 10px #000000 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;           /* ← 黒帯をスッキリ見せる */
  font-family: "Dela Gothic One", sans-serif;
}

/* 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タグ（ボタン） */
.header1,.header3,.header5{
  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 #CC0808 inset,  
              0 0 0 4px #ffffff inset,   
              0 0 0 6px #CC0808 inset,  
              0 0 0 7px #ffffff inset;
  border-radius: 14px;
  white-space: nowrap;
  background-color: #CC0808;          
  transition: background-color 0.2s ease;
  font-family: "Dela Gothic One", sans-serif;
}

.header2,.header4{
  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 #55A9DC inset,  
              0 0 0 4px #ffffff inset,   
              0 0 0 6px #55A9DC inset,  
              0 0 0 7px #ffffff inset;
  border-radius: 14px;
  white-space: nowrap;
  background-color: #55A9DC;          
  transition: background-color 0.2s ease;
  font-family: "Dela Gothic One", sans-serif;
}


/* コンテンツがヘッダーに隠れないように */
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;   }
}

.star-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で下に張り付く */
  font-family: "Dela Gothic One", sans-serif;
}

/* 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;
}

.novel-list a,
.novel-list a:visited,
.novel-list a:hover,
.novel-list a:active {
  color: inherit;
}



/* 見出しタグ */
h1.h1TOP,
h1.h1MAIN,
h1.h1LINKS,
h1.h1ABOUT,
h1.h1ASK  {
   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 #CC0808 inset,  
              0 0 0 4px #ffffff inset,   
              0 0 0 6px #CC0808 inset,  
              0 0 0 7px #ffffff inset;
  border-radius: 12px;
  white-space: normal;
  word-break: break-word;
  background-color: #CC0808; 
}

h1.h1BLOG,
h1.h1SHOP,
h1.h1SITEMAP,
h1.h1PRIVACYPOLICY  {
   display: inline-block;
  padding: clamp(8px, 0.8vw + 6px, 12px);
  color: #fff;
  font-size: clamp(18px, 1vw + 0.8rem, 18px);
  text-align: center;

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


h2 {
  position: relative;
  margin: 20px 0;
  padding: 5px 0 5px 40px;
  color: #8CA8A4;/*鈍い色*/
  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: #8CA8A4;
  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: #8CA8A4 !important;
}

h4 {
  position: relative;
  margin: 12px 0;
  color: #8CA8A4;
  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 #8CA8A4; 
  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: 10px 18px;   /* ← 余白を広めに変更 */
  list-style: none;
  background-color: #ffffff;
  box-shadow: 0 0 0 4px #000000 inset,  
              0 0 0 6px #ffffff inset,  
              0 0 0 8px #000000 inset; 
  border-radius: 10px;
  display: inline-block;
  font-family: "Dela Gothic One", sans-serif;
}


.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%, #CC0808 60%); 
}

.highlighted-blue {
 background: linear-gradient(transparent 75%, #55A9DC 60%); 
}


.bold {
  font-weight: bold;
}