@charset "utf-8";

html{
  scroll-behavior: smooth;
}

/*----------------------
共通
-----------------------*/
: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-desktop-kv-bkg-251119.webp) no-repeat 50% 50% / cover;
}

.kv .p-creator-pc-inner {
  width: calc(100% - 30px) ;
}

@media screen and (max-width: 767px) {
  .kv .p-creator-pc-inner {
    width: 100%;
  }
}

/*----------------------
用途から選ぶ上書き
-----------------------*/
#creator-desktop .p-creator-pc__select-from-list{
  grid-template-columns: repeat(3, 1fr);
}

#creator-desktop .p-creator-pc__select-from-list .c-button::after{
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}

@media screen and (max-width: 767px) {
  #creator-desktop .p-creator-pc__select-from-list{
    grid-template-columns: repeat(2, 1fr);
  }
}
/*----------------------
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%;
  }
}

/*----------------------
タイトル
-----------------------*/
.p-create-pc__sub-title {
  font-size: clamp(16px, 0.8214rem + 0.8929vw, 20px);
}

/*--------------------
スタッフレビュー
-------------------*/
#staff-review-content {
  padding-top: 1em !important;
}

#staff-review-content .c-headline__h2 {
  display: none;
}

#staff-review-content .p-creator-pc a {
  text-align: center;
}

/*----------------------
キャンペーン
-----------------------*/
.p-creator-pc__campaign {
  padding: var(--section-gap) 0;
}

.p-creator-pc__campaign .c-section,
.p-creator-pc__campaign .p-rot-banner-wrapeer {
  padding: 0;
}

/*----------------------
FEATURE特集
-----------------------*/
.p-creator-pc__feature {
  padding: var(--section-gap) 0;
}

.p-creator-pc__feature .c-section,
.p-creator-pc__feature .p-rot-banner-wrapeer {
  padding: 0;
}

/*----------------------
通販スタッフおすすめ
-----------------------*/
.pc-reccomend__card-list > ul {
  padding-top: 10px;
}

.pc-reccomend__card .p-creator-pc__recommend-item-title {
  padding-left: 10px;
  font-size: clamp(12px, 0.659rem + 0.45vw, 16px);
  line-height:1.2;
}

@media screen and (max-width: 767px){
  .p-creator-pc__recommend .pc-reccomend__card-list {
    overflow-x: scroll;
    width: 100%;
    max-height: unset;
  }
  .p-creator-pc__recommend .pc-reccomend__card-list > ul {
    grid-template-columns: repeat(4, 1fr);
    width: 600px;
  }
  .p-creator-pc__recommend .pc-reccomend__card-list > ul >li {
    width: 227px;
  }
}

.p-creator-pc__recommend section + section {
  margin-top:var(--section-gap);
}

.p-creator-pc__recommend .lead-txt {
  font-size:clamp(12px, 0.659rem + 0.45vw, 16px);
  line-height:1.2;
  margin-bottom:calc(var(--section-gap) / 2);
}

.p-creator-pc__recommend .more-link{
  width:100%;
  max-width:600px;
  margin:calc(var(--section-gap) / 2) auto 0 auto;
}

.p-creator-pc__recommend .more-link .c-button--primary-white,
.p-creator-pc__recommend .more-link .c-button{
  width:100%;
}


.p-creator-pc__recommend .p-create-pc__sub-title{
  padding-top:0.5em;
  margin-bottom:0.5em;
}

/*-------------------------
エントリー上書き
---------------------------*/
@media screen and (max-width: 767px) {
  .entry-box .entry-box__point,
  .entry-box .entry-box__link {
    font-size: 0.7em !important;
  }
  .entry-box .entry-box__point .point {
    font-size: 1rem !important;
  }
}