/* ---------------------------------------------------- 

メインビジュアル

---------------------------------------------------- */
.main-visual{
  background-color: #28385e;
}

.main-visual::after{
  position: absolute;
  z-index: 1;
  right: 0;
  display: inline-block;
  width: 100px;
  height: auto;
  aspect-ratio: 168/198;
  content: "";
  transform: rotate(180deg);
  background: url(/img/common/bg-leaf_01.png) no-repeat;
  background-size: contain;
}
@media (min-width: 768px){
  .main-visual::after{
    width: 180px;
  }
}

.main-visual__inner{
  position: relative;
  max-width: 1280px;
  height: 300px;
  margin: auto;
} 
@media (min-width: 768px){
  .main-visual__inner{
    height: 480px;
  }
}

.main-visual__header{
  position: absolute;
  top: 43%;
  left: 16px;
  width: 100%;
  min-width: 10rem;
  max-width: 40%;
}
@media (min-width: 768px){
  .main-visual__header{
    left: 140px;
    min-width: 10rem;
    max-width: 20rem;
  }
}

.main-visual__header > img{
  filter: drop-shadow(1px 1px 2px rgba(0, 0, 0,.5));
}
@media (min-width: 768px){
  .main-visual__header > img{
    filter: drop-shadow(4px 4px 3px rgba(0, 0, 0,.5));
  }
}

.main-visual__header > span{
  display: block;
  color: #fff;
  font-size: .875rem;
  font-weight: normal;
}
@media (min-width: 768px){
  .main-visual__header > span{
    width: max-content;
    font-size: 1.5rem;
    line-height: 1;
  }
}

.main-visual__image{
  width: 1280px;
  height: 300px;
  object-fit: cover;
  object-position: left;
}
@media (min-width: 768px){
  .main-visual__image{
    height: 480px;
  }
}



/* ---------------------------------------------------- 

ページ内リンク

---------------------------------------------------- */
.pageLinks{
  margin: 2rem .5rem;
}

.pageLinks__list{
  display: flex;
  flex-direction: column;
  gap: .5rem;
  width: 100%;
  max-width: 30rem;
  margin: auto;
}
@media (min-width: 768px){
  .pageLinks__list{
    display: flex;
    flex-direction: row;
    gap: 2rem;
    width: 100%;
    max-width: 1000px;
    margin: auto;
  }
}

@media (min-width: 768px){
  .pageLinks__item{
    width: 100%;
  }
}

.pageLinks__link{
  position: relative;
  z-index: 2;
  display: grid;
  justify-items: center;
  grid-template-columns: 1fr max-content;
  align-items: center;
  width: 100%;
  min-height: 3.5rem;
  padding: 0 2rem;
  text-decoration: none;
  color: #28385e;
  border: solid 1px #28385e;
  border-radius: 9999px;
  background-color: #fff;
  font-weight: bold;
}@media (min-width: 768px){
  .pageLinks__link{
    font-size: 1.25rem;
  }
}



/* ---------------------------------------------------- 

年間スケジュール

---------------------------------------------------- */
.annualSchedule{
  scroll-margin-top: 50px;
  color: #28385e;
  margin:auto;
}
@media (min-width: 768px){
  .annualSchedule{
    width: 100%;
    max-width: 1096px;
    scroll-margin-top: 80px;
  }
}

.annualSchedule__title{
  position: static;
  display: grid;
  grid-template-columns: max-content auto 1fr;
  align-items: center;
  font-size: 2rem;
}

.annualSchedule__title > span{
  font-size: 1rem;
  margin-top: 0.5rem;
}

.annualSchedule__title::before{
  width: 32px;
  height: auto;
  aspect-ratio: 11/30;
  margin-right: -0.5rem;
  content: "";
  background: url(/img/common/title_bg_mark.svg) no-repeat;
  background-size: contain;
}

.annualSchedule__body{
  margin: 4rem 0 0;
  padding: 1rem 1rem 10rem 1rem;
  background-color: #fff;
}
@media (min-width: 768px){
  .annualSchedule__body{
    margin: 2rem 0 0;
    padding: 0rem 3rem 5rem 3rem;
    background-color: #fff;
  }
}

.annualSchedule__currentYear{
  padding: 0 .5rem;
  margin-bottom: 0.5rem;
  font-size: 1.5rem;
  font-weight: bold;
}
.annualSchedule__currentYear span{
	display: inline-block;
  font-size: 1rem;
  margin:7px 0px 0px 15px;
  vertical-align: top;
}
.annualSchedule__currentYear span a{
  margin:0px 0px 0px 8px;
}

.monthlySchedule:not(:first-of-type){
  margin-top: 3rem;
}
section.monthlySchedule{
	padding-top: 80px;
	margin-top: -80px;
/*	border:3px solid #999;*/
}
header.monthly__header {
  background-color: #28385e;
  padding: 1em 1em !important;
  margin:0px !important;
  line-height:1em;
  display: flex;
}
.monthly__title{
  color: #fff;
  font-size: 1.5rem;
}
.monthly__title > span{
  margin-left: .5rem;
  font-size: 1rem;
}
header.monthly__header > p.to_top{
  margin: 0px 0px 0px auto;
  font-size: 0.8rem;
  color: #fff;
}

.monthly__contents{
  margin: 2rem 0 0 0;
  scroll-margin-top: 50px;
}
@media (min-width: 768px){
  .monthly__contents{
    scroll-margin-top: 80px;
  }
}

.monthly__contents:first-of-type{
  margin: 1rem 0 0 0;
}

.event{
  display: grid;
  padding: 0 .5rem 2rem;
  border-bottom: solid 1px #28385e;
}
@media (min-width: 768px){
  .event{
    grid-template-columns: max-content 1fr 1fr;
    gap: 1rem 0;
  }
}

.monthly__contents:last-of-type .event:last-of-type{
  padding: 0 .5rem 0;
  border: none;
}

.event__date{
  display: flex;
  align-items: end;
  flex-wrap: wrap;
  gap: .5rem 0;
}
@media (min-width: 768px){
  .event__date{
    grid-column: 1/2;
    grid-row: 1 / span 3;
    align-items: start;
    flex-direction: column;
    min-width: 10rem;
  }
}

.event__date > h3{
  display: flex;
  font-size: 1.5rem;
  line-height: 1;
}

.event__date > h3 > span{
  font-size: 2rem;
}

.event__date > h3 > span > span{
  font-size: 1.25rem;
}

.event__date > p{
  font-size: 1.25rem;
}

.event__header{
  margin-top: 1rem;
}
@media (min-width: 768px){
  .event__header{
    grid-column: 2/3;
    grid-row: 1/2;
    margin: 0;
  }
}

.event__header > h3{
  color: #fa7777;
  font-size: 1.5rem;
  font-weight: bold;
  line-height:1.3em;
  margin-bottom:5px;
}

.event__details{
  display: grid;
  grid-template-columns: max-content 1fr;
  grid-template-rows: min-content;
  margin-top: 1rem;
  padding-left:1rem;
  font-weight: bold;
/*  line-height:0.9em;*/
}
@media (min-width: 768px){
  .event__details{
    grid-column: 3/4;
    grid-row: 1/2;
    margin: 0;
  }
}

.event__details > dt{
  grid-column: 1/2;

  justify-self: end;
}

.event__details > dd{
  grid-column: 2/3;
}

.event__option{
  margin: 1rem 1rem 0;
  padding: 1rem;
  border: solid 4px #dfe3e9;
  border-radius: 1rem;
}
@media (min-width: 768px){
  .event__option{
    grid-column: 2/4;
    grid-row: 2/3;
    width: 40rem;
    margin: auto;
  }
}

.event__option > ul{
  display: grid;
  gap: .5rem;
  margin-top: .5rem;
}

.event__place{
  margin-top: 1rem;
  padding: 1rem;
  background-color: #dfe3e9;
}
@media (min-width: 768px){
  .event__place{
    grid-column: 2/3;
    grid-row: 3/4;
    margin: 0;
    padding: 1.5rem;
  }
}

.event__place > ul{
  display: grid;
  gap: .5rem;
  margin-top: .5rem;
}

.event__contact{
  padding: 1rem;
  background-color: #dfe3e9;
}
@media (min-width: 768px){
  .event__contact{
    grid-column: 3/4;
    grid-row: 3/4;
    margin: 0;
    padding: 1.5rem;
  }
}

.event__contact > ul{
  display: grid;
  gap: .5rem;
  margin-top: .5rem;
  padding-left: 1.25rem;
  list-style: disc;
}

.annualSchedule__footer{
  margin: -5rem auto 0 auto;
  padding: 0 1rem;
}

@media (min-width: 768px){
  .annualSchedule__footer{
    grid-column: 1/3;
    grid-row: 4/5;
    margin: 0;
    padding: 0;
  }
}

.annualSchedule__footer__inner{
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  gap: 1rem;
/*  margin: -5rem auto 0 auto;*/
  margin: 0rem auto 0 auto;
  padding: 1.5rem;
  text-align: center;
  border-radius: 1rem;
  background-color: rgba(168, 183, 199, .5);
}

@media (min-width: 768px){
  .annualSchedule__footer__inner{
    flex-direction: row;
    width: 100%;
    max-width: 880px;
    min-height: 160px;
    padding: 32px;
    text-align: left;
  }
}

@media (min-width: 768px){
  .annualSchedule__footer__inner::after{
    display: block;
    flex: 1;
    order: 2;
    content: "";
    border-top: solid 1px;
  }
}

@media (min-width: 768px){
  .annualSchedule__footer__inner > p{
    order: 1;
  }
}

@media (min-width: 768px){
  .annualSchedule__footer__inner > a{
    order: 3;
  }
}


/* ---------------------------------------------------- 

アーカイブ

---------------------------------------------------- */
.archive{
  margin: 4rem 0 0;
  padding: 110px 0 0 0;
}
@media (min-width: 768px){
  .archive{
    width: 100%;
    max-width: 1096px;
    margin: 1rem auto;
  }
}

.archive__header{
  margin: 0 .5rem;
}

.archive__title{
  position: relative;
  display: flex;
  align-items: baseline;
  padding: 0 0 0 1rem;
  font-size: 2rem;
}
.archive__title > span{
  font-size: 1rem;
}

.archive__title::before{
  position: absolute;
  z-index: -1;
  top: -50%;
  left: 0;
  width: 32px;
  height: auto;
  aspect-ratio: 11/30;
  content: "";
  background: url(/img/common/title_bg_mark.svg) no-repeat;
  background-size: contain;
}

.archive__body{
  margin: 2rem 0 0;
}
@media (min-width: 768px){
  .archive__body{
    padding: 3rem;
    background-color: #fafafa;
  }
}

.archive__contents{
  padding: 0 .5rem;
}

.tabs{
  display: grid;
  grid-template-columns: repeat( auto-fill, minmax(128px,1fr) ) ;
  gap: .5rem;
}

.tab-button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-width: 8rem;
  padding: .25rem 1rem;
  color:#2f3131;
  cursor: pointer;
  border: solid 2px #2f3131;
  border-radius: 999px;
  background-color: #fff;
  font-weight: bold;
}

.tab-button:after{
  width: 20px;
  height: 20px;
  content: "";
  background-image: url(/img/common/icn_plus.svg);
  background-repeat: no-repeat;
}

.tab-button.active{
  color: #fff;
  background-color: #2f3131;
}

.tab-button.active::after{
  width: 20px;
  height: 20px;
  content: "";
  background-image: url(/img/common/icn_minus.svg);
  background-repeat: no-repeat;
}

.tab-content{
  display: none;
  margin-top: 2rem;
}
@media (min-width: 768px){
  .tab-content{
    overflow-y: scroll;
    max-height: 880px;
  }
}

.tab-content.active{
  display: block;
}

.monthlyArchive{
  background-color: #fff;
}

.monthlyArchive__header > h3{
  padding: .5rem;
  color: #fff;
  background-color: #2f3131;
}

.monthlyArchive__content{
  display: grid;
  grid-template-columns: 5.5rem 1fr;
  gap: .5rem;
  padding: 1rem 0;
  border-bottom: solid 1px #dfe3e9;
  font-size: .75rem;
}
@media (min-width: 768px){
  .monthlyArchive__content{
    grid-template-columns: 1fr 4fr;
    padding: 1rem;
  }
}

@media (min-width: 768px){
  .monthlyArchive__date{
    display: flex;
    gap: .5rem;
  }
}

@media (min-width: 768px){
  .monthlyArchive__date > p:first-of-type{
    white-space: nowrap;
  }
}

.monthlyArchive__details > h4{
  margin: 0 0 .5rem 0;
  font-size: .875rem;
  font-weight: bold;
}
.monthlyArchive__details > ul > li:not(:first-of-type){
  margin-top: .25rem;
}