/*------------------------------
 ▼ スマホ縦：メディアクエリの指定なし

カスタム投稿の共通宇スタイル
 history.css
 -------------------------------*/


/*--- 活動履歴 ---*/

.history h2{
  font-size: 1.6rem;
  font-weight: normal;

}
.history-box1{
  background: rgba(190, 198, 202, 0.5);
  color: #06284d;
    margin: 0 calc(50% - 50vw);
    padding: 0 calc(50vw - 50%);
}

.history-box2{
    margin: 0 calc(50% - 50vw);
    padding: 0 calc(50vw - 50%);
}
.space{
    margin-top: 2rem;
    padding-top: 4rem;
}

.space2{
    margin: 2rem 0;
    padding: 4rem 0;
}
.history-box1 h3,
.history-box2 h3,
.mov-box h3{
    color:  #7aa0c9;
    margin-bottom: 4rem;
    font-size: 3rem;
    font-family: Century;
    font-style: italic;
}

.flex-item{
    width: 100%;
}

.history-txt{
  padding-top:2rem ;
  margin-bottom: 3rem;
}



.history-photo1 img,
.history-photo3 img{
  width: 100%;
  height: auto;
  border-radius: 10px;
  margin-bottom: 6rem;
}

.history-photo2 img{
  width: 100%;
  height: auto;
border-radius: 10px;
}


/*　　開催日時　　*/

.schedule {
  margin-bottom: 2rem;
}


.schedule dl {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  margin: 0 auto;
}

.schedule dl dt {
  width: 24%;
  padding: 1rem 0 0 0.5rem;
background-color: rgba(161, 185, 197, 0.5);
  font-size: 0.9rem;
  border-bottom: #ffffff 0.08rem solid;
  color: #fff;
  font-weight: bold;
}

.schedule  dd {
  width: 62%;
  padding: 1rem;
  background-color: rgba(253, 253, 253, 0.5) ;
  font-size: 0.8rem;
  border-bottom: #ffffff 0.08rem solid;
}

.history-button {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    width: 250px;
    margin: 8rem auto;
    padding: 2em 3em 2em 2em;
    border: 1px solid #2589d0;
    border-radius: 5px;
    background-color: #fff;
    font-size: 1em;
}

.history-button::after {
    position: absolute;
    right: 2em;
    transform: translateY(-50%);
    transform-origin: left;
    width: 2em;
    height: .5em;
    background-color: #2589d0;
    clip-path: polygon(0 100%, 100% 100%, 70% 40%, 70% 90%, 0% 90%);
    content: '';
    transition: transform .3s;
}

.history-button:hover::after {
    transform: translateY(-50%) scaleX(1.4);
}

.history-button a{
        color:  #06284d;
}

/*　　動画リスト　　*/
.mov-box{
  background: rgba(136, 160, 171, 0.54);
    margin: 0 calc(50% - 50vw);
    padding: 0 calc(50vw - 50%);
}


.mov1{
  width: 100%;
  max-width: 400px;
  height: auto;
  border-radius: 10px;
  overflow: hidden;
 margin: 2rem auto;
}

.mov-list{
  width: 100%;
  max-width: 300px;
  height: auto;
  border-radius: 10px;
  overflow: hidden;
 margin: 2rem auto;
}
.mov-wrap{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;  
  padding-bottom: 4rem;

}

 /* ===============================================
 ▼　768px以上（タブレット向け）
  =============================================== */
 @media screen and (min-width: 800px) {

.history-box1 h3,
.history-box2 h3{
    font-size: 4rem;
}



.flexbox{
display: flex;
margin: 0 auto;
  gap: 5vw; /* 行と列の隙間を画面幅の5%に設定 */
}

.space{
    padding-right: 0;
}
.flex-item{
    width: 50%;
}

.flex-item1{
    width: 50%;
}

.flex-item2{
    width: 50%;
}
.history-txt{
align-items: end;
width: 55%;
}

.history-photo1 {
  width: 45%;
}





/*　　開催日時　　*/

.schedule{
    order: 1;
}


    .schedule dl dt {
      width: 23%;
    }
    .history-photo2 {
    order: -1;
}



/*　　動画リスト　　*/

.mov1{
  max-width: 640px;
  margin: 6rem auto 8rem;
}

.mov-wrap{
  margin-bottom: 4rem;
}

.mov-list{
margin: 4rem 0 6rem ;
}

    }
 /*-------------------------------
 ▼　1025px以上　（ｐｃ）
 --------------------------------*/
 @media screen and (min-width:1340px) {




    }