@charset "utf-8";

:root{
  --color-main:#004da1;
  --color-emp:#ff1326;
  --text-color-black:#222;
  --font-size-m:24px;
  --font-size-ml:30px;
  --font-size-l:36px;
  --margin-size-s:10px;
  --margin-size-m:20px;
  --margin-size-l:50px;
}
@media screen and (max-width: 767px) {
  :root{
    --font-size-m:4.1vw;
    --font-size-ml:5vw;
    --font-size-l:6vw;
  }
}
.dcp-seminar-event-list-calendar {
  margin:auto;
  text-align:center;
  background-color: #fff;f
  color: var(--text-color-black);
}
.dcp-seminar-event-list-calendar em{
  color: var(--color-main);
}
.dcp-seminar-event-list-calendar p{
  line-height:1.7;
}
.dcp-seminar-event-list-calendar img{
  width:100%;
}
.contents-inner {
  margin:auto;
  padding-top:var(--margin-size-l);
  padding-bottom:var(--margin-size-l);
  width:90%;
  max-width:1200px;
  text-align:left;
}

.contents-block {
  padding-top:var(--margin-size-l);
}
@media screen and (max-width: 767px) {
  .contents-inner {
    padding-top:10vw;
    padding-bottom:10vw;
  }
}

/*リード文章
------------------------------------------------------*/
.calendar-apply {
  background-image: url(../images/bg-dcp-calendar.webp);
  background-size:100vw;
  background-repeat: no-repeat;
}

.calendar-apply p{
  text-align:center;
  margin-top: var(--margin-size-m);
  font-size: var(--font-size-m);
}

.calendar-apply p:first-child{
  margin-top:0;
}

.calendar-apply p em{
  font-weight:900;
  font-style:normal;
  color: var(--color-emp);
}

@media screen and (max-width: 767px) {
  .calendar-apply {
    text-align:left;
    background-size:auto 100%;
    background-repeat:no-repeat;  
  }
  .calendar-apply p{
    text-align:left;
  }
}

/*テーマ要項
------------------------------------------------------*/
.calendar-theme {
  background-image: url(../images/bg-calendar.webp);
  background-size:100vw;
  background-repeat: no-repeat;
}

.calendar-theme h2.title-theme{
  font-size: var(--font-size-l);
  font-weight:600;
  margin-bottom:20px;
}

.calendar-theme p{
  text-align:center;
  margin-top: var(--margin-size-m);
  font-size: var(--font-size-ml);
}
.calendar-theme p .hashtag{
  font-weight:900;
  padding-left:0.5em;
  padding-right:0.5em;
}

.calendar-apply p em{
  font-weight:900;
  font-style:normal;
  color: var(--color-emp);
}

@media screen and (max-width: 767px) {
  .calendar-theme {
    background-image: url(../images/bg-calendar-sp.webp);
  }
  .calendar-theme p{
    text-align:left;
  }
}

.calendar-list {
  margin: var(--margin-size-m) auto;
  display:flex;
  flex-wrap:wrap;
  align-items: center;
  gap:10px 2%;
}
.calendar-list li{
  width:6.5%;
  border-radius:5px;
  color:var(--color-main);
  border: 2px solid var(--color-main);
  text-align:center;
  font-weight:700;
}

.calendar-list li a{
  padding:10px;
  display:block;
  background:var(--color-main);
  color:#fff;
  cursor: pointer;
  transition: .2s cubic-bezier(0.45, 0, 0.55, 1);
}
.calendar-list li a:hover{
  color:var(--color-main);
  background:#fff;
  /*background:#7fa6d0;*/
}
.calendar-list li span{
  display:block;
  padding:10px;
}

@media screen and (max-width: 767px) {
  .calendar-list li{
    width:23.5%;
  }
}

/*応募方法
--------------------*/
.calendar-theme h3{
  margin:auto;
  font-size: var(--font-size-l);
  padding:5px;
  border-radius:30px;
  background:var(--color-main);
  color:#fff;
  text-align:center;
  font-weight:700;
  width:60%;
}
@media screen and (max-width: 767px) {
  .calendar-theme h3{
    width:100%;
  }
}
.calendar-terms-block h4,
.calendar-terms-block h5{
  font-size:var(--font-size-m);
  color:var(--color-main);
  font-weight:800;
}
.calendar-terms-block{
  padding:var(--margin-size-l);
  margin-top:var(--margin-size-m);
  background: rgba(255,255,255,0.5);
  border:1px solid var(--color-main);
  height:300px;
  overflow-y: scroll;
  scrollbar-color:white var(--color-main);
}
.calendar-terms-block .contents-inner-block{
  margin-top:var(--margin-size-m);
}
.calendar-terms-block .contents-inner-block:first-child{
  margin-top:0;
}

.calendar-terms-block .contents-inner-block li{
  margin-top:var(--margin-size-m);
  margin-left:var(--margin-size-l);
  list-style-type: disc;
}


@media screen and (max-width: 767px) {
  .calendar-terms-block{
    padding:var(--margin-size-m);
  }
  .calendar-terms-block .contents-inner-block li{
    margin-left:var(--margin-size-m);
  }
}

/*カレンダー一覧
------------------------------------------------------*/
.calendar-detail {
  display:flex;
  flex-wrap: wrap;
  gap:40px 0;
  justify-content: space-between;
}
.calendar-detail h3{
  margin-bottom:20px;
  padding-left:10px;
  border-left:5px solid var(--color-main);
  font-weight:700;
  font-size:var(--font-size-ml);
}
.calendar-detail li{
  width:calc(50% - 20px) ;
} 

.calendar-detail .btnCalendar a{
  display: block;
  background: var(--color-main);
  color:#fff;
  padding:10px;
  border-radius: 10px;
  text-align:center;
  font-weight:700;
}

.btnCalendar-list{
  margin:10px auto;
  display:flex;
  gap:2%;
  flex-wrap:wrap;
}
.btnCalendar-list .btnCalendar{
  width:32%;
}
.creator-name{
  text-align:right;
  font-size:var(--font-size-m);
}
.creator-name a{
  color:var(--color-main);
  text-decoration: underline;
}

@media screen and (max-width: 767px) {
  .calendar-detail {
    display:block;
  }
  .calendar-detail li{
    margin-top:var(--margin-size-m);
    width:100% ;
  }
  .calendar-detail .btnCalendar a{
    padding:5px;
  }
}


.calendar-detail.calendar-back-odd-even:nth-of-type(odd) {
  background:#f0f9fb;
}
.calendar-detail.calendar-back-odd-even:nth-of-type(even) {
  background:#e4f3f7;
}