/* カスタマイズカラー
---------------------------------------------------------- */

/*
tmplコード適用変数名一覧
背景色：base
文字色1：base_text1
文字色2：base_text2
規約背景色：sub
規約文字色：sub_text
差し色背景色：accent
差し色文字色：accent_text
応募ボタン背景色：post_button
応募ボタン文字色：post_text
*/
/* 背景色 : 色 白*/
/* 文字色1 : テキスト1 黒*/
/* 文字色2 : テキスト2 ネイビー*/
/* 規約背景色 : 色 グレー*/
/* 規約文字色 : テキスト ダークグレー*/
/* 差し色背景色 : 色 イエロー*/
/* 差し色文字色 : テキスト 黒*/
/* 応募ボタン : 色 オレンジ*/
/* 応募ボタン : テキスト 白*/

/* ベース : 色 白*/
/* 全体の背景色 */
body {
  background: #ffffff;
}
body#apply {
background-color: #fff;
}
.header {
  background-color: #ffffff;
}
.footer {
  background: #ffffff;
  border-top: 2px solid #ffffff66;
}

/* 応募したい・投票したいのタブの色 */
.user__section03-link ul li.active,
.user__section03-link ul li.active.off + li.on {
  background: #ffffff;
}
/* 応募したい・投票したいのブロックの色 */
.user__section03 .tabbox{
    background: #ffffff;
}

/* //絞り込み検索のボタン背景色*/
.post__searchbox .search_select .sort_btn a {
  background: #ffffff;
}


/*応募規約 見出し背景*/
.background4 {
  background: #ffffff;
}
/* 絞り込み背景色 */
.custom-options {
  background:  #ffffff;
}

/* 吹き出し */
@media screen and (min-width: 751px) {
  .search_moreinfo::after {
    border-bottom: 15px solid #ffffff;
  }
}
.post__catebox .category > li {
  background:  #ffffff;
}

/* 応募フォーム 応募規約チェックマーク */
#apply .checkmark {
  background-color:  #ffffff;
}
#apply .checked_bg {
  background:  #ffffff;
  border: 2px solid #C4C9D6;
}
#apply .agree .checked_bg {
  background: #78787878;
}
/* 応募フォーム 応募規約枠線 */
#apply .checkmark,
#apply .agree .checked_bg  {
  border: 2px solid #78787878;
}
/* 絞り込みの背景色 */
.search_moreinfo .modal {
  background-color: #ffffff;
  box-shadow:
    0px 0px 24.1px rgba(0, 0, 0, 0.082),
    0px 0px 50px rgba(0, 0, 0, 0.16);
    border: 1px solid #333;
}
/* detail 一覧に戻るボタン文字色 */
.post .btn_list a {
  color: #fff;
}

.custom-select-trigger {
  background-color: #fff;
}
.custom-select-trigger:after {
  border-color: #333 transparent transparent transparent;
}




/* ベース : テキスト1 黒*/

body,
.user__section03-link ul li.active a,
.user__section03-link ul li.active.off + li.on a,
#header .navi li a {
  color:  #333333;
}
{
  color:  #333333;
}


.custom-select.opened .custom-select-trigger:after {
  border-color: transparent transparent #333333 transparent;
}
.search_moreinfo dl dt {
  color:  #333333;
}







/* ベース : テキスト2 ネイビー*/







/* サブ : 色 グレー*/
/*応募規約背景*/
.background5 {
  background:  #eeeeee;
}
/* apply */
.form__bg {
  background:  #eeeeee;
}
/* スマートフォンでの閲覧時の背景（要設定） */
@media screen and (max-width: 750px) {
  .form__bg {
    background: #fff;
  }
}






/* サブ : テキスト ダークグレー*/
/* form 文字色 */
#apply .form_btl th {
  color:  #6f737d;
}

/* 絞り込み文字色 */
.custom-option ,
.custom-select-trigger {
  color:  #6f737d;
}
.custom-option {
  border-bottom: 2px solid #6f737d;
}






/* アクセント : 色 イエロー*/

.ttl_background,
.btn_color,
.background2,
.user__period,
.pagers li a:hover,
.pagers li .active,
.search_moreinfo .chbx input:checked+span,
.slick-dots li.slick-active button {
    background: #fcc632;
}
.user__section h2 span::after, .user__section h2 span::before, .user__introduction h2 span::after, .user__introduction h2 span::before {
  border-top: 2px solid #fcc632;
  border-bottom: 2px solid #fcc632;
}
.user__price .box_btns p a span svg,
.user__section03-link ul li.active a span svg,
.user__section03-link ul li.active.off + li.on a span svg,
.user__section03 .step__list li .icon svg,
.user__section03 .step__list li .link svg {
  fill:   #fcc632;
}
.user__section03 .step__list li {
  border: 3px solid #fcc632;
}
.user__section03 .step__list li:not(:last-child)::after {
  border-top: 20px solid #fcc632;
}
.search_moreinfo .chbx input:checked+span {
  border: 2px solid #fcc632;
}

/* 応募したい・投票したいのブロックの色 */
.user__section03 .tabbox{
    border-top: 1px solid #fcc632;
}
.user__section03-link .fl_item li.active,.user__section03-link .fl_item li.active.off + li.on{
    border: 1px solid #fcc632;
    border-bottom: none;
}

@media screen and (max-width: 750px) {
  .user__section03-link ul li a.active span svg,
  .user__section03-link ul li a:hover span svg {
    fill:   #fcc632;
  }
}
.user__section03 .step__list li > div {
    border-left: 3px solid  #fcc632;
}
@media screen and (max-width: 750px) {
  .user__section03 .step__list li > div {
      border-left: none;
  }
}

#apply .input_style .checkmark:after,
#apply .form .step_list li.current span,
  #apply .form .step_list li.current::after,
  #apply .form .step_list li.active::after ,
  #apply .form .step_list li.active span::after {
    background: #fcc632;
}



/* アクセントの枠色に合わせた背景 */
.user__section03 .step__list li {
  background:  #fcc63230;
}
/* アクセントの枠色に合わせた見出し */
 .user__section.background2 h2 > span::after,
 .user__section.background2 h2 > span::before
 {
  content: "";
  filter: invert(100%) grayscale(100%) contrast(1000);
}



/* アクセント : テキスト 黒*/

.accent ,
.btn_color,
.theme__ttl,
.search_moreinfo .chbx input:checked+span {
  color:  #333333 !important;
}

.txt_color,
.ttl_txt_color,
.btn_txt_color,
.pagers li a:hover,
.pagers li .active,
.search_moreinfo dl dd,
#modal {
  color: #333333  !important;
}
.search_moreinfo .chbx label span{
  color: #333333  !important;
}




/* 応募ボタン : 色 オレンジ*/

/*応募ボタン*/
.cv_btn_color,
.header #btn_apply,
#header .navi li.btn_apply a,
.user__btn a {
  background:   #ec5e00;
  color:   #fff;
}

/* 応募するボタンの文字/アイコン色 */
.header .navi li:last-child a svg {
  fill: #fff;
}



/* 応募ボタン : テキスト 白*/

/* 住所検索 ボタン */
#apply .zipcode_btn {
  color: #fff;
}


/* sp中央下応募ボタンの＋マーク */
.header #btn_apply::after,
.header #btn_apply::before {
  background: #fff;
}

/* 応募期間 テキスト */
.user__period .fl_item .ttl {
  color: #fff;
}

/*応募テキスト*/
.user__btn a {
  color: #fff;
}

.user__btn a svg {
  fill: #fff;
}



/* 別途設定できる色 */
/* winners キャンペーン受賞者背景 */
.user__section05 .announcement.grandprix {
  background:  #fcc63230;
}

.user__section05 .announcement.second {
  background: #ECEEE3;
}

.user__section05 .announcement.third {
  background: #F9E4D2;
}
/* index 賞品の色 */
/* 金 */
.user__section02-list li.color_yellow .ttl,
.user__section02-list li.color_yellow .num_people {
  color: #A7A10B;
}
.user__section02-list li.color_yellow .num_people {
  border: 2px solid #A7A10B;
}
/* 銀 */
.user__section02-list li.color_gray .ttl,
.user__section02-list li.color_gray .num_people {
  color: #717171;
}
.user__section02-list li.color_gray .num_people {
  border: 2px solid #717171;
}
/* 銅 */
.user__section02-list li.color_brown .ttl,
.user__section02-list li.color_brown .num_people {
  color: #9E5E3C;
}
.user__section02-list li.color_brown .num_people {
  border: 2px solid #9E5E3C;
}



/*  */
.post__catebox .category>li .box_txt .ttl {
  color: #333;
}
.user__period .fl_item .ttl {
  background: #333333;
  color: #ffffff;

}

.post .btn_list a {
  background: #aaa;

}

#apply .zipcode_btn {
  background: #17262D;

}
.post__cateDetail .post_imgs .judge svg{
    fill:#fcc632;
}
.post__cateDetail .post_imgs .judge{
    color:#fcc632;
}

.select::after {
  border-top: 8px solid #17262D;
}

.user .list_steps li:after {
  border-top: 16px solid #17262d;
}




/*  _base.scss: 9 body #333 */

/*検索バー 背景*/
.post__searchbox .search_select {
  background: #78787878;
}

/* 絞り込みの背景色に合わせたボーダーカラー */
.search_moreinfo dl dt:nth-child(n+2) {
    border-top: 2px solid #78787878;
}

/*検索バー キーワード入力欄*/
.search_btn input {
  color: #9e9e9f;
}

::-webkit-input-placeholder,
::-moz-placeholder,
:-ms-input-placeholder,
:-moz-placeholder,
::placeholder {
  color: #8C919E;
  letter-spacing: .025rem;
}


/*検索ボタン*/
@media screen and (min-width: 751px) {
  .post__searchbox .search_btn .search_submit {
    background: #17262D;
  }

  .post__searchbox .search_btn .search_submit svg {
    fill: #fff;
  }
}


/*検索バー 絞り込み検索*/
.post__searchbox .search_select .sort_btn a,
.post__catebox .search_result {
  color: #898C94;
}
/*作品タグ*/
.post__catebox .category>li .box_txt .tag_list li {
  color: #898C94;
}
/*そのほか*/
#apply .form_btl td .row .txt,
.post_preview .user_box .img i,
.post_preview .user_box .txt span,
#apply .input_style {
  color: #898C94;
}

#apply span.any {
  background: #898C94;
  color: #fff;
}

input,
button,
select,
.select,
.search_moreinfo .chbx label span {
  border: 2px solid #E8E8E8;
}




/*  _base.scss: 147 a a:hover #333 */



/*
  変更不可カラー
*/

/* index 非アクティブのタブ */
.user__section03-link ul li,
user__section03-link ul li.active:hover {
  background: #00000020;
}

/* FORM チェックボックスの背景色 */
#apply .input_style:hover input~.checkmark {
  background-color:  #fff;
}


/* winners 本キャンペーンは終了しました */
.user__period_end {
  background: #C10000;
  color: #fff;
}


/* detail 投票するボタン */

.vote .heart_icon {
  fill: #fff;
}

.voted .heart_icon svg {
  fill: #fa2e2f;
}

.post_imgs .vote {
  background: #fff;
  color: #AEB8CC;
  -webkit-box-shadow: 0px 5px 10px 5px rgba(183, 183, 183, 0.3);
  -moz-box-shadow: 0px 5px 10px 5px rgba(183, 183, 183, 0.3);
  box-shadow: 0px 5px 10px 5px rgba(183, 183, 183, 0.3);
}

.post_imgs .vote.voted{
  background: #f82021;
  color: #fff;
}
.post_imgs .vote.voted a {
  color: #fff;
}
.post_imgs .vote svg .path2 {
  fill: #D0D5DF;
}

.post_imgs .vote.voted .heart_icon .path1,
.post_imgs .vote.voted svg .path2 {
  fill: #fff;
  stroke: #fff;
}


/* post ソート切り替え時暗転 */
.overlay::after {
  background: rgba(0, 0, 0, 0.8);
}

/* datailのタグの背景 */
.background1 {
  background: #EFEFEF;
}


/* popup */
.blocker {
  background-color: rgba(0, 0, 0, 0.9);
}

#modal {
  background: #fff;
}

#modal .modal_btns {
  border-top: 1px solid #c4c9d6;
}

#modal .modal_btns .btn_no {
  border-right: 1px solid #c4c9d6;
  color: #8a98ba;
}

#modal .modal_btns .btn_yes {
  color: #ef0101;
}

/* slick  */
.slick-dots li button {
  background: #6A6A6A;
}



/* header */
@media screen and (min-width: 751px) {
.header #header::after {
  background: #78787878;
  opacity: 1;
}
}

/* sp homeと投稿一覧の非アクティブタブ/アイコン文字色 */
#list_links a {
  color: #aaabae;
}
#list_links a span svg {
  fill: #AAABAE;
}

/* sp homeと投稿一覧の非アクティブタブ/アイコン文字色 */
#user #list_links .active_home a,
#post #list_links .active_post a {
  color: #3A3C3D;
}
#user #list_links .active_home a svg,
#post #list_links .active_post a svg {
  fill: #3A3C3D;
}


/* top */

.user__btn a {
  border-radius: 50px;
}

/* トップ ― 非アクティブのタブの文字色 */
.user__section03-link ul li a,
user__section03-link ul l　i a:hover {
  color: #fff;
}
.user__section03-link ul li a span svg {
  fill: #fff;
}

/*注意事項*/
.user__section04 .precautions_box {
  background: #fffffff4;
}

@media screen and (max-width: 750px) {
  .user__section04 .precautions_box {
    background: #fff;
  }
}

/* 受賞者発表 */
.user__section05 .announcement h3 span {
  background: #fff;
  border-color: #333333;
}



/* post */


.pagers li a {
  color: #8c919e;
}

.modal__vote {
  display: none;
  overflow: hidden;
  opacity: 0;
  z-index: -1;
}

.modal__vote.show {
  display: block;
  opacity: 1;
  z-index: 99;
  -webkit-transition: all 0.2s ease 0s;
  transition: all 0.2s ease 0s;
}

.modal__vote.show .modal {
  display: inline-block;
  -webkit-transition: all 0.5s ease 0s;
  transition: all 0.35s ease 0s;
}

.post_preview .user_box .img {
  background: #F1F2F5;
}


.post_preview dl dt {
  /* opacity: 0.5; */
  background: #78787878;
  color: #6F737D;
}

.post__cateDetail .post_imgs .link_back {
  color: #fff;
}

.search_moreinfo .chbx label span {
  background-color: #fff;
}




/* 応募フォームの入力欄 */
#apply .form_btl td input[type="text"],
#apply .form_btl td input[type="password"],
#apply .form_btl td input[type="tel"],
#apply .form_btl td textarea,
#apply .form_btl td .select,
.select {
  background: #fff;
}
#apply .input_style input:checked~.checked_bg {
  border-color: #FCC632;
}

/* アラート文字 */
#apply .red_txt {
  color: #EF0101;
}

/* 必須 アイコン */
#apply span.ex {
  background: #EF0101;
}

/* apply 入力可能文字数 > 0の表示 */
#apply .char_box .char_num {
  color: #D0D2DB;
}

/* apply 入力可能文字数 = 0の表示 */
#apply .char_box .end {
  color: #EF0101;
}

#apply ::-webkit-input-placeholder,
#apply ::-webkit-textarea-placeholder,
#apply :-ms-input-placeholder,
#apply :-ms-textarea-placeholder,
#apply ::placeholder {
  color: #8C919E;
}

#apply .form .step_list li {
  color: #D8D8D8;
}


#apply .form .step_list li::before {
  background: #fff;
}

#apply .form .step_list li span:after {
  border: 2px solid #DFDFDF;
}

#apply .form .step_list li svg path {
  fill: #fff;
}

/* form 上部のプログレスバーみたいなやつ */
#apply .form .step_list li.current::after,
#apply .form .step_list li.active::after {
  opacity: 0.3;
}

#apply .form .step_list li.active span::after {
  opacity: 0.6;
}




/* Arrow */



#apply .input_style input:checked~.checked_bg {
  background: rgba(252, 198, 50, 0.2);
}

#apply .gray_btn {
  background: #9B9EA5;
  color: #fff;
}

#apply .gray_btn:hover {
  color: #fff;
}

#apply .btn_box .link {
  color: #6F737D;
}



#apply .post_photo .photo span {
  background: #fff;
}


#apply .form_ttl {
  background: rgba(227, 229, 236, 0.5);
}

#apply .form_ttl a {
  background: #fff;
  border: 3px solid #E8E8E8;
}

#apply #preview_contents {
  background: #25262E;
  color: #fff;
}

#apply #preview_contents .preview_ttl {
  color: #fff;
}

#apply .form .step_list li.current,
#apply .input_style input:checked~.checked_bg,
#apply .upload,
#modal {
  color: #17262D;
}
#apply .form_btl td input[type="text"],
#apply .form_btl td input[type="password"],
#apply .form_btl td input[type="tel"],
#apply .form_btl td textarea,
#apply .form_btl td .select,
.select {
  color: #333;
}

#apply .form_btl td input[type="text"],
#apply .form_btl td input[type="password"],
#apply .form_btl td input[type="tel"],
#apply .form_btl td textarea,
#apply .form_btl td .select,
#apply .post_photo .delete_btn {
  border: 2px solid #E8E8E8;
}
#apply .form_btl td input[type="text"]::placeholder,
#apply .form_btl td input[type="password"]::placeholder,
#apply .form_btl td input[type="tel"]::placeholder,
#apply .form_btl td textarea::placeholder {
  color: #999;
}