@charset "UTF-8;"

/* =========================================
   TOP ONLY
========================================= */

/* TOPはメニューを画像の上に重ねる（共通ナビを上書き） */
.header{
  position: relative;
}

/* ハンバーガーを右上に重ねる */
.hamburger{
  position: absolute;
  top: 20px;
  right: 20px;
  z-index: 2000;
}






/* 境界線はTOPでは不要 */
#menu li + li{
  border-left: none;
}





/* ヘッダー画像がはみ出さない */
.header_2 h1 img{
  width: 100%;
  height: auto;
  display: block;
}

/* ふわっとした装飾（使ってなければ害なし） */
.circle-bg{
  position:absolute;
  inset:0;
  pointer-events:none;
}

/* =========================================
   TOP：お知らせ（news.html と統一 + 少し今っぽく）
========================================= */

/* TOPのNEWSをカード化（TOPだけ） */
.news{
  width: 100%;
  background: #fff;
  border: 1px solid #eaeaea;
  border-radius: 18px;
  padding: 40px 40px 28px;
  margin: 30px 0 0;
  box-shadow: 0 12px 28px rgba(0,0,0,.05);
}

/* 「お知らせ」見出し（news.html の雰囲気へ寄せる） */
.oshirase_title{
  display: inline-block;
  position: relative;
  font-family: 'M PLUS Rounded 1c', sans-serif;
  font-size: 32px;
  letter-spacing: .15em;
  font-weight: 600;
  margin: 0 0 26px;
  line-height: 1.2;
  padding-left: 0;
}

/* 以前の縦線装飾は外して統一感優先（必要なら復活OK） */
.oshirase_title::before,
.oshirase_title::after{
  content: none;
}

/* 一覧全体 */
.oshirase{
  margin: 0;
  padding: 0;
  width: 100%;
}

/* 各行：news.html と同じ */
.oshirase li{
  padding: 24px 0;
  border-bottom: 1px solid #eaeaea;
  display: flex;
  gap: 30px;
  align-items: center;
  flex-wrap: wrap;
  line-height: 1.7;
}

.oshirase li:last-child{
  border-bottom: none;
}

/* 日付：news.html と同じ（common.css の上書きにもなる） */
.icon_day{
  font-weight: 600;
  color: #666;
  min-width: 120px;
  letter-spacing: .05em;
  background: none;
  padding: 0;
  border-radius: 0;
}

/* リンク：news.html と同じ */
.oshirase a{
  color: #222;
  text-decoration: none;
  transition: .3s;
}

.oshirase a:hover{
  opacity: .5;
  text-decoration: none;
}



/* 一覧を見る：離れ防止 + クリックしやすく（TOPだけ少しボタン風に） */
.news-more{
  position: static !important;
  text-align: right;
  margin-top: 20px;
}

.news-more a{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  text-decoration: none;
  color: #333;
  border-bottom: 1px solid #333;
  padding-bottom: 2px;
  transition: .3s;
}

.news-more a:hover{
  opacity: .6;
}

/* =========================================
   RESPONSIVE
========================================= */

@media screen and (max-width: 768px){
  #menu ul{
    justify-content: center;
    gap: 18px;
    padding: 14px 14px;
  }

  .news{
    padding: 28px 20px 18px;
    border-radius: 16px;
  }

  .oshirase_title{
    font-size: 26px;
    margin-bottom: 18px;
  }
}

/* 480px以下は日付の後で改行して見やすく */
@media screen and (max-width: 480px){
  .br-sp{
    display: inline;
  }

  .oshirase li{
    padding: 18px 0;
    gap: 12px;
  }

  .icon_day{
    min-width: auto;
    font-size: 14px;
  }

  .news-more{
    text-align: left;
  }
}

/* =========================================
   TOP：ヘッダーとお知らせの隙間を詰める
========================================= */

/* common.css の margin-bottom:20px を無効化 */
.header{
  margin-bottom: 0 !important;
}

/* common.css の padding-top:20px をTOPだけ消す */
.content{
  padding-top: 0 !important;
}

/* 波（SVG）の高さ調整 */
.header svg{
  display: block;
  height: 70px; /* 50〜90で好みに調整 */
}


/* ▼NEWSとバナーの間に余白をつくる */ 
/*.news{ margin-bottom: 50px; }*/


body{
    background: :pink !importamt;
}



/* TOPだけ：メニューをヘッダー画像の上に重ねる */
.header{
  position: relative;
}
#menu{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1500;
}



/* ===== Top Ameblo Banner ===== */

.top-ameblo-banner{
    width: 50%;
  display:block;
  margin: 50px 0 10px;
  padding: 20px;
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(45,191,104,.15), #ffffff);
  border: 1px solid rgba(0,0,0,.08);
  box-shadow: 0 18px 40px rgba(0,0,0,.08);
  text-decoration:none;
  transition: transform .2s ease, box-shadow .2s ease;
}

.top-ameblo-banner:hover{
  transform: translateY(-3px);
  box-shadow: 0 22px 50px rgba(0,0,0,.12);
}

.top-ameblo-inner{
  display:flex;
  flex-direction:column;
  gap:8px;
}

.top-ameblo-label{
  font-size:15px;
  letter-spacing:.18em;
  color: rgba(0,0,0,.55);
}

.top-ameblo-title{
  font-size:18px;
  font-weight:800;
  letter-spacing:.05em;
  color:#222;
}

.top-ameblo-cta{
  font-size:14px;
  font-weight:700;
  color: rgba(0,0,0,.7);
}


/* バナーとフッターの間に余白をつくる */ 
.top-ameblo-banner{ margin-bottom: 80px; }

/* ================================
   改行コントロール（最終版）
================================ */

/* PCでは改行しない */
.br-sp { display: none; }

/* スマホだけ改行（flexでも効く） */
@media (max-width: 768px){
  .br-sp{
    display: block;
    flex-basis: 100%;
    width: 100%;
    height: 0;
  }

  /* お知らせの行がflexなら折り返し許可 */
  .news-list li{
    flex-wrap: wrap;
  }
}