@charset "utf-8";
/*-- DCP共通 --*/
:root {
  --color-dcp-gray: #fafafa;
  --color-dcp-base: #e2f5fb;
  --color-dcp-blue: #001e60;
}

.dcp-contents {
  max-width: 1140px;
  margin: auto;
}
.dcp-contents img {
  width: 100%;
}
.dcp-contents p {
  font-size: clamp(12px, 0.693rem + 0.24vw, 14px);
  line-height: 1.4;
}

/*-- アコーディオン --*/
.details-dcp {
  width:100%;
}
.details-dcp summary {
  list-style: none;
}
.details-dcp summary::marker {
  content: "";
}
.details-dcp summary::-webkit-details-marker {
  display: none;
}
.details-dcp summary:hover {
  cursor: pointer;
}

.details-dcp .c-button {
  width: 100%;
}
.details-dcp summary .c-button::after {
  transform: rotate(45deg);
  transition: transform 0.3s ease;
}
.details-dcp[open] summary .c-button::after {
  transform: rotate(-135deg);
}
.details-dcp summary .sec-ttl {
  font-size: clamp(16px, 0.943rem + 0.24vw, 18px);
  margin-bottom: 0;
}

.cont-dcp {
  background: var(--color-dcp-gray);
  padding: 2em 1em 1em;
  border-radius: 0 0 1em 1em;
}
@media screen and (max-width:767px) {
  .cont-dcp {
    padding: 1em;
  }
}

/*-- キャッチ --*/
.dcp-catch {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 30px;
  background: var(--color-dcp-base);
  padding: 1em;
  border-radius: 10px;
}
.dcp-catch .dcp-catch__logo {
  width: 30%;
  max-width: 300px;
}
.dcp-catch .dcp-catch__txt {
  font-size: clamp(14px, 0.82rem + 0.45vw, 18px);
  line-height: 1.4;
  font-weight: 600;
  padding-left: 1em;
  border-left: 1px solid var(--color-dcp-blue);
}
@media screen and (max-width:767px) {
  .dcp-catch {
    flex-direction: column;
    gap: 20px;
  }
  .dcp-catch .dcp-catch__logo {
    width: 100%;
    max-width: 200px;
  }
  .dcp-catch .dcp-catch__txt {
    width: 100%;
    line-height: 1.3;
    padding: 0;
    border-left: none;
  }
}

/*-- 特長 --*/
.dcp-feature-list {
  margin-top:clamp(20px, 0.682rem + 2.42vw, 40px);
  display:grid;
  grid-template-columns: repeat(3,1fr);
}
.dcp-feature-list li {
  padding:0 20px;
}
.dcp-feature-list li:not(:first-child) {
  border-left:1px solid var(--color-dcp-blue);
}
.dcp-feature-list-img {
  width:25%;
  margin:auto;
}
.dcp-feature-list-img .card-icon {
  width: 100px;
  height: 100px;
  margin: 0 auto 10px;
  padding: 10px;
  border-radius: 50%;
  background: var(--color-dcp-base);
  display: flex;
  align-items: center;
  justify-content: center;
}
.dcp-feature-list-img .card-icon img {
  width:80%;
  object-fit: contain;
}
.dcp-feature-list-txt {
  width:100%;
}
.dcp-feature-list h3 {
  font-size:clamp(14px, 0.761rem + 0.48vw, 18px);
  color:var(--color-dcp-blue);
  font-weight:700;
  text-align:center;
  margin:10px auto;
}
/* .dcp-feature-list p {
  font-size:clamp(12px, 0.693rem + 0.24vw, 14px);
  line-height:1.4;
} */
.dcp-feature-list p.note {
  font-size:clamp(10px, 0.58rem + 0.23vw, 12px);
  line-height:1.2;
}

.dcp-feature-list + p.note {
  margin-top:20px;
  font-size:clamp(10px, 0.58rem + 0.23vw, 12px);
  line-height:1.2;
  text-align:right;
}

.dcp-feature-list p + p {
  margin-top:5px;
}

@media screen and (max-width: 767px) {
  .dcp-feature-list {
    grid-template-columns: repeat(1,1fr);
  }
  .dcp-feature-list li {
    padding:10px 0;
    display:flex;
    gap:10px;
  }
  .dcp-feature-list li:not(:first-child) {
    border-left:none;
    border-top:1px solid var(--color-dcp-blue);
  }
  .dcp-feature-list li:first-child {
    padding-top:0;
  }
  .dcp-feature-list li:last-child {
    padding-bottom:0;
  }
  .dcp-feature-list h3 {
    text-align:left;
    margin:0 0 5px;
  }
  .dcp-feature-list-img {
    width:30%;
  }
  .dcp-feature-list-img .card-icon {
    width: 80px;
    height: 80px;
    margin: 0 auto;
  }
  .dcp-feature-list-txt {
    width:calc(70% - 20px);
    text-align:left;
  }
}

/*-- 過去開催セミナー・イベント --*/
.dcp-seminar-tag {
  display: inline-block;
  object-fit: contain;
  border-radius: 1em;
  color: #fff;
  padding: 0.2em 0.4em;
  font-size: 12px;
  font-weight: 500;
  line-height: 1;
  margin-bottom: 0.2em;
}
.seminar-tag--game-streaming {
  background-color: #004da1;
}
.seminar-tag--illustrator {
  background-color: #e80000;
}
.seminar-tag--seminar {
  background-color: #8e0ba5;
}
.seminar-tag--video {
  background-color: #16c3cd;
}
.seminar-tag--vtuber {
  background-color: #ff61cd;
}
.seminar-tag--photographer {
  background-color: #2615ff;
}
.seminar-tag--dtm {
  background-color: #ffb600;
}
.seminar-tag--contest {
  background-color: #ff7300;
}
.seminar-tag--other {
  background-color: #999999;
}

.dcp-seminar {
  margin-top: clamp(20px, 0.682rem + 2.42vw, 40px);
}
.dcp-seminar h3 {
  font-size: clamp(14px, 0.761rem + 0.48vw, 18px);
  color: var(--color-dcp-blue);
  font-weight: 700;
  margin: 10px auto 20px;
}
.dcp-seminar .dcp-seminar-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}
.dcp-seminar .dcp-seminar-list li {
  width: 100%;
  border: solid 1px #ececec;
  background-color: #fff;
  -webkit-box-shadow: 3.5px 3.5px 0 0 rgba(72, 72, 72, 0.1);
  box-shadow: 3.5px 3.5px 0 0 rgba(72, 72, 72, 0.1);
}
.dcp-seminar .dcp-seminar-list li:hover {
  cursor:pointer;
  -webkit-animation-duration: 0.6s;
  -webkit-animation-name: flash;
  animation-name: hover-flash;
  animation-duration: 0.6s;
  opacity: 1;
}
.dcp-seminar .dcp-seminar-list .dcp-seminar-list__txt {
  padding: 10px 20px;
}
.dcp-seminar .dcp-seminar-list .dcp-seminar-list__ttl {
  font-size: clamp(12px, 10.59px + 0.38vw, 16px);
  font-weight:700;
  line-height: 1.4;
}
.dcp-icon {
  display: inline-block;
  object-fit: contain;
  border-radius: 1em;
  color: #fff;
  padding: 0.2em 0.4em;
  font-size: 12px;
  font-weight: 500;
  line-height: 1;
  margin-bottom: 0.2em;
}
@media screen and (max-width: 767px) {
  .dcp-seminar .dcp-seminar-list {
    grid-template-columns: repeat(1,1fr);
    gap: 15px;
  }
  .dcp-seminar .dcp-seminar-list li a {
    display: flex;
    flex-direction: row;
    gap: 10px;
  }
  .dcp-seminar .dcp-seminar-list li .dcp-seminar-list__image {
    width: 40%;
  }
  .dcp-seminar .dcp-seminar-list .dcp-seminar-list__txt {
    width: calc(60% - 10px);
    padding: 5px 10px 0 0;
  }
}

/*-- セミナー・イベントリンク --*/
.dcp-seminar-link {
  margin-top: clamp(20px, 0.682rem + 2.42vw, 40px);
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
  background: var(--color-dcp-base);
  padding: 1em;
  border-radius: 1em;
}
.dcp-seminar-link .dcp-seminar-link__ttl {
  font-size: clamp(14px, 0.761rem + 0.48vw, 18px);
  font-weight: 700;
  margin-bottom: 0.5em;
  padding-left: 55px;
  background-image: url(../images/common/ico-user.svg);
  background-size: 50px;
  background-position: left top;
  background-repeat: no-repeat;
}
.dcp-seminar-link .dcp-seminar-link__ttl strong {
  color: var(--color-dcp-blue);
}
.dcp-seminar-link .dcp-more-link {
  width: 48%;
}

@media screen and (max-width: 767px) {
  .dcp-seminar-link {
    flex-direction: column;
    gap: 10px;
  }
  .dcp-seminar-link .dcp-seminar-link__txt,
  .dcp-seminar-link .dcp-more-link {
    width: 100%;
  }
  .dcp-seminar-link .dcp-seminar-link__ttl {
    background-size: 40px;
  }
}

.details-dcp {
  &::details-content {
    transition: height 0.4s, opacity 0.4s, content-visibility 0.4s allow-discrete;
    height: 0;
    opacity: 0;
    overflow: hidden;
  }

  &[open]::details-content {
    opacity: 1;
    height: auto;
  }
}