@charset 'utf-8';

/* -------- 共通設定 -------- */
.txt_center{
  text-align: center;
}

/* タイトル文字 */
.title_txt_setting_jp{
  font-size: 3rem;
  font-family: var(--ZenMaru);
  font-weight: 700;
  color: #8C4F53;
  margin-bottom: 0.7rem;
}

.title_txt_setting_en{
  font-size: 1.4rem;
  font-family: var(--ZenMaru);
  font-weight: 500;
  color: #8C4F53;
}

/* 各月の文字 */
.common_month_txt{
  position: relative;
  font-size: 2.5rem;
  font-family: var(--ZenMaru);
  font-weight: 700;
  color: #8C4F53;
  width: fit-content;
  margin-bottom: 1.7rem;
  padding-top: 0.5rem;
}

.common_month_txt::before{
  display: inline-block;
  position: absolute;
  content: "";
  left: -0.1rem;
  bottom: -0.2rem;
  width: 100%;
  height: 0.3rem;
  border-radius: 1rem;
  background: #E6E6CC;
}

/* 年間行事内、毎月のイベントの領域 */
.common_month_area{
  width: 34.6rem;
}

.common_month_box{
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  /* justify-content: center; */
  align-items: center;
  background-color: #FFFFFF;
  margin-bottom: 2rem;
}

/* 左側の矢印みたいな画像 */
.left_arrow_img{
  position: absolute;
  width: 11.2rem;
  right: -11.2rem;
  object-fit: contain;
}

/* 右側の矢印みたいな画像 */
.right_arrow_img{
  position: absolute;
  width: 10.3rem;
  left: -10.3rem;
  object-fit: contain;
}

/* 各月のイベントコンテナ */
.common_event_container{
  display: flex;
}

/* 右側の月イベント共通配置 */
.may_container,.july_container,.october_container,.december_container,.february_container{
  margin: 0 0 0 auto;
}

/* 星アイコン */
.star_icon{
 width: 2.213rem;
 height: 2.124rem;
 object-fit: cover;
 margin-right: 0.387rem;
}

/* 各月のイベントの文字設定 */
.common_event_txt{
  font-size: 1.5rem;
  font-family: var(--ZenMaru);
  font-weight: 700;
  color: #8C4F53;
}

.any_event_container{
  padding: 0 2rem;
}

/* 年間イベント画像の大きさ */
.common_img_width{
  width: 34.6rem;
  height: 12.7rem;
  object-fit: cover;
  vertical-align: top;
}

/* 年間イベントの説明文設定 */
.common_event_detail{
  width: 35.2rem;
  font-size: 1.6rem;
  font-family: var(--ZenMaru);
  font-weight: 700;
  color: #7D3640;
  line-height: calc(35 / 16);
}

/* 三角の画像の大きさ */
.common_triangle_img{
  width: 7.3rem;
  height: 2.45rem;
}

/* 左側の三角画像 */
.april_triangle_img,.june_event_triangle_img,.summer_triangle_img,.november_triangle_img,.january_triangle_img,.march_triangle_img{
  position: absolute;
  bottom : 0;
  left: 0;
}

/* 右側の三角画像 */
.may_triangle_img,.july_triangle_img,.october_triangle_img,.december_triangle_img,.february_triangle_img{
  position: absolute;
  bottom: 0;
  right: 0;
}

/* ---------共通設定ここまで-------- */

/* ページ全体の背景色 */
.event_bg{
  background-color: #FAFAD8BE;
  padding-bottom: 5rem;
}

/* ページ全体の幅とセンタリング設定 */
.event_screen_setting{
  width: 87.7rem;
  padding-bottom: 10.1rem;
  margin: 0 auto;
}

/* 毎月の行事 */
.monthly_section{
  padding-top: 6rem;
  margin-bottom: 9.8rem;
}

.monthly_event_title{
  margin-bottom: 6.8rem;
}

.monthly_event_main{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.monthly_event_img{
  width: 25.8rem;
  height: 18.8rem;
  object-fit: cover;
  margin-bottom: 2.5rem;
  border-radius: 1.2rem;
}

.monthly_event_detail{
  font-size: 1.6rem;
  font-family: var(--ZenMaru);
  font-weight: 700;
  color: #8C4F53;
}

/* 年間行事 */
.annual_event_container{
  position: relative;
}

/* センターライン */
.annual_event_container::before{
  position: absolute;
  top: 0;
  left: 43.3rem;
  content: "";
  background: radial-gradient(circle farthest-side, #8C4F53, #8C4F53 0.4rem, transparent 0.5rem, transparent);
  background-size: 1.8rem 1.8rem;
  content: '';
  display: block;
  /* 要素が増えた際の飛び出し防止 */
  height: calc(100% - 13rem);
  width: 1.8rem;
}

/* 年間行事タイトル */
.annual_event_title{
  margin-bottom: 6.245rem;
}

/* 4月コンテナ */
.april_event_content{
  padding-bottom: 2.8rem;
}

/* 5月イベント */
.may_container{
  transform: translateY(-10rem);
}

.may_event{
  margin-bottom: 1.8rem;
}

.may_event_content{
  padding-bottom: 2.3rem;
}

.may_event_content_1{
 margin-bottom: 1rem; 
}

.may_event_content_2{
  margin-bottom: 2.3rem;
}

.may_event_img{
  margin-bottom: 0.8rem;
}

.may_event_detail{
  margin: 0 0 0 auto;
  transform: translateY(-10rem);
}

/* 6月 */
.june_container{
  transform: translateY(-15rem);
}

.june_event_content{
  margin-bottom: 2.8rem;
}

/* 7月 */
.july_container{
  transform: translateY(-27rem);
}

.july_event_content{
  margin-bottom: 3rem;
}

/* 8,9月 */
.summer_container{
  transform: translateY(-32rem);
}

.summer_event_content{
  margin-bottom: 2.8rem;
}

/* 10月 */
.october_container{
  transform: translateY(-33rem);
}

.october_event_content{
  margin-bottom: 3rem;
}

.october_event_img{
  margin-bottom: 0.8rem;
}

.october_event_detail{
  margin: 0 0 0 auto;
  transform: translateY(-33rem);
}

/* 11月 */
.november_container,.november_event_detail{
 transform: translateY(-47rem); 
}

.november_event_content{
  margin-bottom: 2.8rem;
}

.november_event_img{
  margin-bottom: 0.8rem; 
}

/* 12月 */
.december_container{
  transform: translateY(-49rem);
}

.december_event{
  margin-bottom: 1.5rem;
}

.december_event_img_1{
  margin-bottom: 1.3rem;
}

.december_event_img_2{
  margin-bottom: 0.8rem;
}

.december_event_content_1{
  margin-bottom: 0.927rem;
}

.december_event_content_2{
  margin-bottom: 2.273rem;
}

.december_event_detail{
  margin: 0 0 0 auto;
  transform: translateY(-49rem);
}

/* 1月 */
.january_container{
  transform: translateY(-43rem);
}

.january_event_content{
  margin-bottom: 2.8rem;
}

/* 2月 */
.february_container{
  transform: translateY(-46rem);
}

.february_event_content_1{
  margin-bottom: 0.927rem;
}

.february_event_content_2{
  margin-bottom: 2.273rem;
}

.february_event_img_sp{
  display: none;
}
/* 3月 */
.march_container{
  margin-top: -43rem;
}

.march_event{
  margin-bottom: 2.7rem;
}

.march_event_content_1{
  margin-bottom: 0.7rem;
}

.march_event_content_2{
  margin-bottom: 1.7rem;
}

.march_event_img{
  margin-bottom: 0.8rem;
}


/* 画像の表示位置調整のためクラスを追加  */

/* 6月の画像 */
.img_june_position_event {
  object-position: 50% 40%;
}
/* 12月の画像 */
.img_december_position_event {
  object-position: 50% 75%;
}
/* 2月の画像 */
.img_february_position_event {
  object-position: 50% 30%;
}
/* 3月の画像 */
.img_march_position_event {
  object-position: 50% 95%;
}
/* 画像の表示位置調整のためクラスを追加ここまで  */


/* メディアクエリ */
@media screen and (max-width: 699.98px) {
  /* 共通設定 */
  .title_txt_setting_jp{
    font-size: 2.5rem;
    margin-bottom: 1rem;
  }
  
  /* ページ全体の幅などの設定 */
  .event_screen_setting{
    width: 33.5rem;
    padding-bottom: 15.66rem;
  }

  /* 年間行事内、毎月のイベントの領域 */
  .common_month_area{
    width: 25rem;
    transform: translateY(0);
  }

  .common_month_box{
    margin-bottom: 0;
  }

  /* 年間イベント画像の大きさ */
  .common_img_width{
    width: 25rem;
    height: 9rem;
    margin-bottom: 3rem;
  }

  /* 左側の矢印みたいな画像 */
  .left_arrow_img{
    width: 8rem;
    left: -8rem;
    transform: rotate(180deg);
  }

  /* 右側の矢印みたいな画像 */
  .right_arrow_img{
    width: 8rem;
    left: -8rem;
  }

  /* 年間イベントの説明文設定 */
  .common_event_detail{
    width: 28.6rem;
    font-size: 1.3rem;
    line-height: calc(25 / 13);
    /* margin-right: 10rem; */
    transform: translateY(0);
    margin: 0 0 3rem auto;
  }

  /* 左側に表示していた月イベントを右側に表示 */
  .april_container,.june_container,.summer_container,.november_container,.january_container,.march_container{
    margin: 0 0 0 auto;
  }

  /* -------- 共通設定ここまで -------- */

  /* 毎月の行事 */
  .monthly_section{
    margin-bottom: 10rem;
  }

  /* 毎月の行事メイン */
  .monthly_event_title{
    margin-bottom: 5.5rem;
  }

  .monthly_event_img{
    width: 33.5rem;
    height: 18.8rem;
    margin-bottom: 1.5rem;
  }

  /* 年間行事 */
  .annual_event_title{
    margin-bottom: 4.2rem;
  }

  .annual_event_container{
    width: 33.5rem;
  }

  /* センターライン */
  .annual_event_container::before{
    left: 0.9rem;
    /* 要素が増えた際の飛び出し防止 */
    height: calc(100% - 0.3rem);
    background: radial-gradient(circle farthest-side, #8C4F53, #8C4F53 0.2rem, transparent 0.3rem, transparent);
    background-size: 1.5rem 1.5rem;
    content: '';
    display: block;
    width: 1.5rem;
  }

  /* 1月 */
  .summer_container,.january_container{
    margin-bottom: 3rem;
  }

  /* 10月イベント説明 */
  .october_event_detail{
    display: none;
  }
  
  /* 11月イベント説明 */
  .november_event_detail{
    margin: 0 0 3rem auto;
  }

  /* 12月イベント画像１枚目 */
  .december_event_img_1{
    margin-bottom: 0;
  }

  /* 2月 */
  .february_event_img_pc{
    display: none;
  }
  
  .february_event_img_sp{
    display: block;
  }

  /* 3月 */
  .march_container{
    padding-bottom: 0;
  }

  /* 3月イベント説明 */
  .march_event_detail{
    margin: 0 0 0 auto;
    transform: translateY(0);
  }
}