@charset "utf-8";

/*----------------------
共通
-----------------------*/
:root {
  --section-gap: 60px;
  --color-gray:#f6f6f6;
  --color-blue:#ecf8fd;
  --color-dark-blue:#001e60;
  --box-radius:16px;
}
@media screen and (max-width: 767px){
:root {
  --section-gap: 30px;
  }
}

/*----------------------
KV
-----------------------*/
.kv{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin: 0;
  padding: 0;
  background: url(../images/create-pc/creator-desk-kv-back.webp?$staticlink$) no-repeat 50% 50% / cover;
}

/*----------------------
用途から選ぶ上書き
-----------------------*/
#creator-desktop .p-creator-pc__select-from-list{
  grid-template-columns: repeat(6, 1fr);
}
#creator-desktop .p-creator-pc__select-from-list li:nth-child(1){
  grid-column: 1 / 4;
}
#creator-desktop .p-creator-pc__select-from-list li:nth-child(2){
  grid-column: 4 / 7;
}
#creator-desktop .p-creator-pc__select-from-list li:nth-child(3){
  grid-column: 1 / 3;
}
#creator-desktop .p-creator-pc__select-from-list li:nth-child(4){
  grid-column: 3 / 5;
}
#creator-desktop .p-creator-pc__select-from-list li:nth-child(5){
  grid-column: 5 / 7;
}

@media screen and (max-width: 767px) {
  #creator-desktop .p-creator-pc__select-from-list li:nth-child(1){
    grid-column: 1 / 3;
  }
  #creator-desktop .p-creator-pc__select-from-list li:nth-child(2),
  #creator-desktop .p-creator-pc__select-from-list li:nth-child(4){
    grid-column: 1 / 2;
  }
  #creator-desktop .p-creator-pc__select-from-list li:nth-child(3),
  #creator-desktop .p-creator-pc__select-from-list li:nth-child(5){
    grid-column: 2 / 3;
  }
}

/*----------------------
LINEUP 説明
-----------------------*/
.p-creator-pc__lineup-type-list{
  display:grid;
  gap:20px;
  grid-template-columns: repeat(4, 1fr);
}
.p-creator-pc__lineup-type-list li{
  padding:20px;
  background: #fff;
  border:1px solid #ccc;
  border-radius: 5px;
}
.p-creator-pc__lineup-type-list li h3{
  font-weight:700;
  font-size:clamp(14px, 0.739rem + 0.68vw, 20px);
  letter-spacing: 0.12em;
  padding-bottom:5px;
  margin-bottom:10px;
  text-align:center;
  border-bottom:1px solid #eee;
}
.p-creator-pc__lineup-type-list li p{
  font-size:clamp(10px, 0.58rem + 0.23vw, 12px);
  line-height:1.6;
}
.p-creator-pc__lineup-type-list li .lead-txt{
  font-size:clamp(12px, 0.705rem + 0.23vw, 14px);
  font-weight:700;
  margin-bottom:5px;
  text-align:center;
}


@media screen and (max-width: 767px) {
  .p-creator-pc__lineup-type-list{
    grid-template-columns: repeat(2, 1fr);
    gap:10px;
  }
  .p-creator-pc__lineup-type-list li{
    padding:10px;
  }
}
/*----------------------
コラボレーションから選ぶ
-----------------------*/

/*----------------------
受賞履歴
-----------------------*/
.p-create-pc__award-list-wrap{
  background:#fff;
  border-radius:var(--box-radius);
  padding:20px 40px;
}

.p-create-pc__award-list,
.p-create-pc__award-list li{
  width:100%;
}
.p-create-pc__award-list li:not(:first-child){
  border-top:1px dotted #ccc;
}
.p-create-pc__award-list .award-item{
  padding:20px 0;
  width:100%;
  display:flex;
  gap:30px;
  align-items: center;
}
.p-create-pc__award-list a:hover{ 
  background:var(--color-blue);
  cursor:pointer;
  -webkit-animation-duration: 0.6s;
  -webkit-animation-name: flash;
  animation-name: hover-flash;
  animation-duration: 0.6s;
  opacity: 1;
}

.p-create-pc__award-list .award-item img{
  width:20%;
}
.p-create-pc__award-list .award-item p{
  line-height:1.6;
}

@media screen and (max-width: 767px){
  .p-create-pc__award-list-wrap{
    padding:10px 20px;
  }
  .p-create-pc__award-list .award-item{
    padding:10px 0;
    gap:20px;
  }
  .p-create-pc__award-list .award-item img{
    width:30%;
  }
}