@charset "UTF-8";
/* -------------------
   変数上書き（年度用カラー・フォント・見出し）
   -------------------
:root {}*/

/*　ヘッダー　*/
.header {
  border-bottom: 8px solid var(--primary-color);
}
/* ==================================================
　トップページ
================================================== */
/*--------------------------
　メインビジュアル　
--------------------------*/
.section-hero {
  position: relative;
  padding: 0;
  width: 100%;
  min-height: 400px;
  background: url("../images/r8/r8_mainbg.jpg") no-repeat center/cover;
}
.section-hero .inner {  
  width: 1150px;
  text-align: center;
  position: relative;
  padding: 70px 0 120px 0;
}
/*　タイトルグループ　*/
.section-hero .title-group {
  display: inline-block;
  margin: 0 auto;
  padding: 32px;
  background: rgba(255, 255, 255, 0.6);
}
.mv-icon {
  display: inline-block;
  background-color: #ba2ea5;
  color: #fff;
  font-family: var(--font-serif);
  font-weight: 800;
  font-size: clamp(16px, 2vw, 21px);
  padding: 0.2em 1em;
  border-radius: 1em;
  margin-bottom: 10px;
}
.mv-title {
  font-family: var(--font-serif);
  font-weight: 900;
  color: #ba2ea5;
  font-size: 3rem; /* 48px */
  line-height: 1.25;
  margin: 0;
}
.mv-subtitle {
  font-weight: 600;
  font-size: clamp(14px, 2vw, 18px);
  margin-top: 15px;
}
/*　キャッチコピー画像　*/
.mv-catch {
  display: block;
  width: 550px;
  max-width: 80%;
  margin: 45px auto 0;
}
/* 画像4枚横並び */
.illust-group {
  width: 1150px;
  max-width: 90%;
  margin: -50px auto 0; /* 上に食い込ませる */
  display: flex;
  justify-content: space-between;
  gap: 3%;
  z-index: 2;
  position: relative;
}
.illust-group .illust {
  flex: 0 1 25%;
}
.illust-group .illust img{
  width: 100%;
  box-shadow: 0 4px 10px rgba(0,0,0,0.2);
}
/* 日時 */
.section-schedule {
  padding: 20px 0 40px;
}
.section-schedule .inner {
  max-width: 80%;
  display: flex;
  justify-content: space-around;
  align-items: baseline;
  font-size: 1.1rem;
}
.section-schedule .event-date {
  font-weight: 600;
  font-size: 1.4em;
}
.section-schedule .event-location {
  font-size: 1.2em;
}
.section-schedule .big {
  font-size: 1.5em;
}

/* -- タブレット用 （～1199px） -- */
@media (max-width: 1199px) {
  /* タイトルグループ */
  .mv-title {
    font-size: 2.6rem;
  }
  /*　日時　*/
  .section-schedule .inner {
    flex-direction: column;
    align-items: center;
    gap: 10px;
    text-align: center;
    font-size: 1em;
  }
  .section-schedule .event-date {
    font-size: 1.2em;
  }
  .section-schedule .event-location {
    font-size: 1.1em;
  }
}
/* -- スマホ用（〜767px）-- */
@media (max-width: 767px) {
  .section-hero {
    min-height: 300px;
  }
  .section-hero .inner {  
    padding: 60px 0 60px 0;
  }
  /* タイトルグループ */
  .section-hero .title-group {
    padding: 20px 10px;
  }
  .mv-title {
    font-size: 2rem; /* 32px */
  }
  /*　キャッチコピー画像　*/
  .mv-catch {
    margin: 30px auto 0;
  }
  /* 画像4枚横並び */
  .illust-group {
    margin: -20px auto 0; /* 上に食い込ませる */
    gap: 2%;
  }
}

/*--------------------------
　新着情報　
--------------------------*/
.section-top-news {
  background: linear-gradient(135deg, #fcf5e3, #ebe1f5);
}
.section-top-news .inner {
  background: rgba(255, 255, 255, 0.4);
  padding: 40px;
  border-radius: 20px;
  width: 1150px;
}
.topics-list {
  margin: 2rem 0;
}
.post-list li {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;  /* タイトル折り返し対応 */
  padding: 1.5rem 0;
  border-bottom: 1px solid rgba(0,0,0,0.1);
}
.post-list li:last-child {
  border-bottom: none;
}
.post-list .post-date {
  flex: 0 0 auto;
  margin-right: 60px;
  margin-left: 40px;
}
.post-list .post-title {
  flex: 1;
  text-align: left;
  margin-right: 40px;
}

/* -- タブレット用 （～1199px） -- */
@media (max-width: 1199px) {
  .post-list .post-date {
    margin-right: 30px;
    margin-left: 0;
  }
  .post-list .post-title {
    margin-right: 0;
  }  
}
/* -- スマホ用（〜767px）-- */
@media (max-width: 767px) {
  .section-top-news .inner {
    padding: 30px;
  }
  .topics-list {
    font-size: 0.9375em;/* 15px */
  }
  .post-list li {
    flex-direction: column;
    gap: 10px;
  }
  .post-list .post-date {
    margin-right: 0;
    margin-left: 0;
  }
  .post-list .post-title {
    margin-right: 0;
  }
}

/*--------------------------
　イメージ画像
--------------------------*/
.top-sakura-img {
  width: 100%;
  padding-top: 33%;
  background: url("../images/r8/img_sakura.jpg") no-repeat center/cover;
}
/*--------------------------
　参加者募集
--------------------------*/
.top-enty-group {
  display: flex;
  gap: 5%;
  margin: 3rem auto;
}
.top-enty-group .top-enty {
  flex: 1 1 30%;
}
.top-enty-group .top-enty img {
  width: 100%;
}
.top-enty-group .top-enty h3 {
  margin-bottom: 0.5em;
}
/* -- タブレット用 （～1199px） -- */
@media (max-width: 1199px) {
  .top-enty-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 50px;
    margin: 3rem auto;
  }
  .top-enty-group .top-enty {
    width: 650px;
    max-width: 90%;
  }
}
/* -- スマホ用（〜767px）-- */
@media (max-width: 767px) {
  .top-enty-group .top-enty p {
    font-size: 0.9375em;/* 15px */
  }
}

/*--------------------------
　市長からお祝いメッセージ
--------------------------*/
.mayor-message {
  width: 100%;
  padding-bottom: 0;
  background-image: 
    url('../images/r8/txt_message.png'), 
    url('../images/r8/img_tubaki.png'), 
    linear-gradient(135deg, #f4e9ff, #d0e9e9);
  background-repeat: no-repeat, no-repeat, no-repeat;

 /* 装飾画像の位置 */
  background-position:
    left 70% top 35px,
    left 30% top -20px,
    center;

  /* 装飾画像サイズ */
  background-size:
    280px auto,
    440px auto,
    cover;
}
.mayor-message .inner {
  display: flex; 
  align-items: flex-end; 
  justify-content: space-between;
}
.mayor-message .photo {
  flex: 0 1 50%;
  max-width: 500px;
}
.mayor-message .photo img{
  display: block;
  width: 100%;
}
.mayor-message .message-group {
  flex: 1;
  padding-top: 30px;
  padding-bottom: 80px;
}
.mayor-message .message-group h2 {
  color: #ba2ea5;
  font-size: 24px;
  margin-bottom: 1.3em;
}
.mayor-message .message-group .message-txt {
  line-height: 2;
}
.mayor-message .message-group .mayor-sign {
  display: block;
  margin-top: 15px;
}

/* -- タブレット用 （～1199px） -- */
@media (max-width: 1199px) {
  .mayor-message {
    background-image: 
      url('../images/r8/txt_message.png'), 
      url('../images/r8/img_tubaki.png'), 
      linear-gradient(135deg, #f4e9ff, #d0e9e9);
    background-repeat: no-repeat, no-repeat, no-repeat;

  /* 装飾画像の位置 */
    background-position:
      left 80% top 35px,
      left 20% bottom 0,
      center;

    /* 装飾画像サイズ */
    background-size:
      280px auto,
      440px auto,
      cover;
  }
  .mayor-message .photo {
    flex: 0 1 45%;
  }
}
/* -- スマホ用（〜767px）-- */
@media (max-width: 767px) {
  .mayor-message {
    background-image: 
      url('../images/r8/txt_message.png'), 
      url('../images/r8/img_tubaki.png'), 
      linear-gradient(135deg, #f4e9ff, #d0e9e9);
    background-repeat: no-repeat, no-repeat, no-repeat;

  /* 装飾画像の位置 */
    background-position:
      left 80% top 35px,
      left -5% bottom -5%,
      center;

    /* 装飾画像サイズ */
    background-size:
      280px auto,
      400px auto,
      cover;
  }
  .mayor-message .inner {
    flex-direction: column-reverse;
    align-items: flex-end; 
    justify-content: flex-end;
  }
  .mayor-message .message-group {
    padding-top: 30px;
    padding: 30px 20px 0;
    padding-bottom: 0;
  }
  .mayor-message .message-group .message-txt {
    font-size: 0.9375em;/* 15px */
  }
  .mayor-message .photo {
    max-width: 340px;
  }
}

/* ==================================================
　下層ページ
================================================== */
/*--------------------------
　見出し
--------------------------*/
.page-header {
  height: 300px;
  background-image: linear-gradient(135deg, #faeac2, #dbc6f0);
}