@charset "utf-8";
/* CSS Document */
main{
  padding-bottom: 0;
  
}
.main-img{
    background: #B1B6CC  url(/event/vpc/assets/image/vpc06/vpc06-bg.jpg) 50% 0% no-repeat;
    line-height: 0;
    text-align: center;
    position: relative;
}
.outline-sec{
  padding-bottom: 5rem;
  
}
.special-news{
  width: fit-content;
  padding: 0 1rem;
  margin: 0 auto;
}
.special-news li{
  text-indent: -1em;
  padding: 0 0 0.5em 1em;
}
.event-schedule{
  max-width: var(--width-box);
  margin: 3rem auto 0;
}
.event-schedule h2{
  font-size:calc( var(--fs)*2.2);
  text-align: center;
  color: #fff;
  background: linear-gradient(180deg, hsl(34.44deg 49.54% 42.75%), hsl(33.55deg 69.92% 26.08%));
  padding: 0.5rem 0 0.2rem;
}
.event-schedule dl{
  background-color:#F2F6FF;
}
.event-item{
  font-size: calc(var(--fs)*1.6);
  padding: 1.4rem calc(var(--rs)*2) 1rem;
}
.event-item:nth-of-type(even){
  background-color: #FCFCFF;
}
.event-item dt{
  min-width: 10em;
  font-weight: bold;
  color: #df1538;
}
.event-item dd i{
  color: #df1538;
  padding: 0 calc(var(--rs)) 0 0;
}
.event-btn{
  text-align: center;
}
.link-btn-s{
  color: #fff;
  background-color: var(--color-link-nml); 
  margin: 2rem 0 0 0;
  padding: 0.8rem calc(var(--rs)*5) 0.6rem;
}
.link-btn-s:hover{
  background-color: var(--color-link-nml-hover);
}
.link-btn-s i{
  padding: 0 0 0 calc(var(--rs));
}
.link-btn-s::after {
  content: "";
  clip-path: polygon(0 0, 100% 0%, 50% 80%);
  width: calc(var(--fs) * 1.4);
  height: calc(var(--fs) * 0.6);
  inset-block: 0;
  inset-inline-end: calc(var(--fs) * 1);
  margin-block: auto;
  background: #fff;
  position: absolute;
}
@media (min-width: 835px){
  .event-item{
  display: flex;
  padding: 1.2rem calc(var(--rs)*1.8) 0.8rem;
}
}

/*開催スケジュール==============================*/
.cont{
  max-width: var(--width-cont);
  margin: 0 auto;
}
.menu-sec{
  width: 100%;
  max-width: none;
  position: sticky;
  top: 0;
  z-index: 999;
  background-color:#040929;
  padding: 0;
}
.menu-sec ul{
  color: #fff;
  display: flex;
  padding: 1rem 0;
}
.menu-sec li{
  position: relative;
  flex: 1;
  text-align: center;
  border-right: 1px solid #999999;
}
.menu-sec li:last-child{
  border-right: none;
}
.menu-item{
  display: block;
  color: #fff;
  padding: 0.4em calc(var(--rs)*1) 0.2em;
}
.menu-item:hover{
  color: #999999;
  text-decoration: none;
}
@media (max-width: 835px){
  .menu-sec ul{
    flex-wrap: wrap;
  }
  .menu-sec li:nth-child(-n+3){
    flex: 1 1 33%;
    border-right: none;
  }
  .menu-sec li:nth-child(n+4){
    flex: 1 1 50%;
    border-right: none;
  }
}

/*エントリー部門==============================*/
.cont-sec{
  width: 100%;
  max-width: none;
  margin: 0 auto;
  padding: 2rem 2vw 7rem;
  overflow: hidden;
  background-image: url(/event/vpc/assets/image/vpc07/bg_ptrn_zarazara01.png);
  background-position: 50% 0;
  background-size: 150px auto;
  background-repeat: repeat

}
.content-title{
  max-width: var(--width-cont);
  display: flex;
  align-items: center;
  justify-content: center;
  gap:2rem;
  margin: 5rem auto 3rem;
}
.side-line{
  flex: 1;
  height: 1px;
  background-color: #333;
}
.content-title h2{
  font-size: calc(var(--fs)*4);
  white-space: nowrap;
}
.entry-text{
  max-width: var(--width-cont);
  font-size: calc(var(--fs)*2);
  text-align: center;
  line-height: 1.8;
  padding: 0 0 1rem;
}
.entry-text b{
  font-size: calc(var(--fs)*2.5);
  color:#CF1717 ;
}
.entry-size{
  text-align: center;
  background-color: #fff;
  border:1px solid #A80C0F;
  padding: 1rem;
  margin: 0 auto 5rem;
}
.entry-size dl{
  display: flex;
  justify-content: center;
  font-size: calc(var(--fs)*2);
  text-align: left;
}
.entry-size-dt{
   font-weight: bold;
}
.notice{
  padding: calc(var(--rs)*0.4) 0 0;
  font-size: calc(var(--fs)*1.52);
}
.content-wrap{
  margin: 0 auto 5rem;
  box-shadow: 4px 4px 8px 0px rgba(0, 0, 0, 0.08);
}
.content-wrap h3{
  color: #fff;
  font-size: calc(var(--fs)*2.5);
  padding: 1rem calc(var(--rs)*1.8) 0.6rem;
  
}
.cont-new{
position: relative;
}
.cont-new::after{
  content: url("/event/vpc/assets/image/vpc06/vpc06-new.png");
  position: absolute;
  margin: -1em 0 0 0.5em;
  transform: rotate(0deg);
}
.content-box{
  display: grid;
  grid-template-columns: 26rem 1fr;
  gap: calc(var(--rs)*2.2);
  background-color: #fff;
  padding: calc(var(--rs)*2.2);
  font-size: calc(var(--fs)*1.5);
}
.notice-txt{
  font-weight: normal;
  font-size: calc(var(--fs)*1.4);
}
.content-inner > p{
  font-size: calc(var(--fs)*1.8);
  font-weight: bold;
}
.content-inner dl{
  padding: 1.8rem 0 0 0;
  margin: 1.8rem 0 0 0;
  border-top: 1px solid #ececec;
}
.content-inner-dt{ 
  font-weight: bold;
  text-indent: -0.5em;
}
.content-inner-dd{
}
.notice-cont{
  margin: 0 auto ;
  width: fit-content;
  text-align: left;
}
.notice-cont dt{
  color: #aa1313;
  font-size: calc(var(--fs)*1.8);
  font-weight: bold;
  text-indent: -0.5em;
}
.notice-cont dd{
  display: inline-block;
}
#content-title,#schedule,#award,#rule,#shop{
  height: 5rem;
  margin-top: -5rem;
  display: block;
}
@media (max-width: 650px){
  #content-title,#schedule,#award,#rule,#shop{
    height: 5rem;
    margin-top: -9rem;
    display: block;
  }
  .entry-size{
    text-align: left;
  }
  .entry-size dl{
    display: block;
  }
  .content-box{
    display: block;
  }
  .content-box > figure{
    padding: 0 0 1rem 0;
  }
  .cont-new::after{
  right: 0;
  margin: -1em 0 0;
  transform: rotate(20deg);
  }
  .content-box img{
    width: 100%;
    max-width: none;
  }
  .notice-cont dd{
    display: block;
  }
}

/*参加スケジュール=============================*/
.schedule-wrap{
  width: 100%;
  margin: 0 auto;
  box-shadow: 4px 4px 8px 0px rgba(0, 0, 0, 0.08);
}
/*.schedule-wrap:nth-of-type(1){
  margin: 5rem auto 0;
}*/
.schedule-wrap caption{
  color: #fff;
  font-size: calc(var(--fs)*2.5);
  font-weight: bold;
  text-align: center;
  background: linear-gradient(180deg, hsl(34.44deg 49.54% 42.75%), hsl(33.55deg 69.92% 26.08%));
  padding: 1.2rem 0 0.8rem;
}
.schedule-inner{
}
.schedule-inner:nth-of-type(2){
  border-top: 1px solid #E3E3E3;
}
.schedule-inner th{
  width: calc(var(--rs)*10);
  text-align: center;
  padding: 1rem 0;
  background-color: #C4C4C4;
  vertical-align: middle;
}
.schedule-inner td{
  padding: 1.5rem calc(var(--rs)*1.4) 1.4rem ;
  background-color: #fff;
}
.schedule-period{
  font-size: calc(var(--fs)*2);
  font-weight: bold;
}
.schedule-inner dl{
  
}
.schedule-inner dt{
    color: #df1538;
    font-size: calc(var(--fs) * 1.8);
    text-indent: 1rem;
    font-weight: bold;
    border-left: 1rem solid #df1538;
    margin: 0 0 0.5rem;
}
.schedule-inner dd{
  padding: 0 0 0 2rem;
}
.tri-arrow{
    display: block;
    text-align: center;
    font-size: calc(var(--fs) * 6);
    color: #df1538;
    padding: 1rem;
}
@media (max-width: 835px){
  .schedule-inner td b{
  font-size: calc(var(--fs)*1.6);
  }
}

/*賞品一覧==============*/
.award-s-title{
  text-align: center;
  font-size: calc(var(--fs)*2.5);
  padding: 0 0 1rem 0;
}
.award-s-title:nth-of-type(2){
  padding: 3rem 0 2rem 0;
}
.award-wrap{
  border: 1rem solid;
  border-image: repeating-linear-gradient(
    40deg,
    #F3EA7B, #936513,
    #F3EA7B, #936513,
    #F3EA7B, #936513,
    #F3EA7B, #936513
  ) 1;
  background: #fff;
  margin: 0 auto 5rem;
  box-shadow: 4px 4px 8px rgba(0,0,0,.08);
}
.award-cont{
  padding: calc(var(--rs) * 7) calc(var(--rs) * 3) 1.5rem;
}
.award-box{
  font-size: calc(var(--fs) * 2.8);
  padding: 0 0 3rem 0;
}
.award-box__title{
  width: 7em;
  color: #df1538;
  font-weight: bold;
  text-align: center;
  border: solid 2px #df1538;
  padding: 0.3em 0.6em 0.1em;
  margin: 0 0 1.5rem 0;
}
/*賞============*/
.award-row{
  display: flex;
  align-items: center;
  padding: 0 0 1rem 0.3em;
  margin: 0;
  font-size: calc(var(--fs) * 2.5); /* 通常 */
}
/* 金賞・優秀賞 */
.award-row--major{
  font-size: calc(var(--fs) * 2.8);
}
/* 参加賞 */
.award-join{
  font-size: calc(var(--fs) * 2.1);
}
/* 左（dt）＋点線 */
.award-row dt{
  flex: 1;
  display: flex;
  align-items: center;
  font-weight: bold;
  white-space: nowrap;
}
.award-row dt::after{
  content: '';
  flex: 1;
  border-bottom: 2px dotted #aaa;
  margin: 0 2rem;
  min-width: 2rem;
  transform: translateY(0.1em);
}
/* 右（dd） */
.award-row dd{
  margin: 0;
  white-space: nowrap;
}
/* 下部テキスト====== */
.award-text{
  color: #df1538;
  font-size: calc(var(--fs)*2.5);
  font-weight: bold;
  text-align: center;
  padding: 0 calc(var(--rs) * 3) 3rem;
}
.award-notice{
  font-size: calc(var(--fs)*1.8);
  font-weight: bold;
  text-align: center;
  margin-top: 2rem;
}
/*リボン=========*/
.ribbon9 {
  top: 2rem;
  margin: 0 -4rem;
  display: inline-block;
  position: relative;
  height: 4.4rem;
  text-align: center;
  box-sizing: border-box;
  width: calc(100% + 8rem);
  z-index: 10;
}
.ribbon9:before {
  content: '';
  position: absolute;
  width: 1rem;
  bottom: -9.6rem;
  left: -7rem;
  border: 5.1rem solid #aa1313;
  border-left-color: transparent;
}
.ribbon9:after {
  content: '';
  position: absolute;
  width: 1rem;
  bottom: -9.6rem;
  right: -7rem;
  z-index: -2;
  border: 5.1rem solid #aa1313;
  border-right-color: transparent;
}
.ribbon9 hgroup {
  width: 100%;
  display: inline-block;
  position: relative;
  padding: 1rem 0 0.6rem;
  color: #FFF;
  font-size: calc(var(--fs) * 2.5);
  font-weight: bold;
  text-shadow: 2px 2px 2px rgba(0,0,0,0.3);
  background: #cf1717;
}
.ribbon9-sp {
  font-size: calc(var(--fs) * 3.6);
  font-weight: bold;
}
.ribbon9-sp span:nth-of-type(1){
  padding: 0 1em 0 0;
}
.ribbon9 hgroup:before {
  position: absolute;
  content: '';
  top: 100%;
  left: 0;
  border-bottom: solid 1.9rem transparent;
  border-right: solid 3.2rem #6D150F;
}
.ribbon9 hgroup:after {
  position: absolute;
  content: '';
  top: 100%;
  right: 0;
  border-bottom: solid 1.9rem transparent;
  border-left: solid 3.2rem #6D150F;
}
/*ribbon9-w*/
.ribbon9-w h4{
  font-size: calc(var(--fs) * 2.8);
}
.ribbon9-w:before {
  content: '';
  position: absolute;
  width: 1rem;
  bottom: -2.8rem;
  left: -2.8rem;
  border: 30px solid #aa1313;
  border-left-color: transparent;
}
.ribbon9-w hgroup:before {
  position: absolute;
  content: '';
  top: 100%;
  left: 0;
  border-bottom: solid 1.2rem transparent;
  border-right: solid 3.2rem #6D150F;
}
.ribbon9-w hgroup:after {
  position: absolute;
  content: '';
  top: 100%;
  right: 0;
  border-bottom: solid 1.2rem transparent;
  border-left: solid 3.1rem #6D150F;
}
.ribbon9-w:after {
  content: '';
  position: absolute;
  width: 1rem;
  bottom: -2.8rem;
  right: -2.8rem;
  z-index: -2;
  border: 30px solid #aa1313;
  border-right-color: transparent;
}
.ribbon9-w-notice{
  font-size: calc(var(--fs) * 1.8);
  padding: calc(var(--rs) * 6) calc(var(--rs) * 3) 1.5rem;
}
.award-wrap > ul{
  font-size: calc(var(--fs) * 1.6);
  padding: 0 calc(var(--rs) * 3) 2rem calc(var(--rs)*3 + 1em);
  text-indent: -1em;
}
/*SP*/
@media(max-width: 768px){
  .ribbon9:before,
  .ribbon9:after,
  .ribbon9 hgroup:before,
  .ribbon9 hgroup:after{
    content: none;
  }
  .ribbon9-sp{
    display: flex;
    flex-direction: column;
    font-size: calc(var(--fs) * 3.1);
  }
  .ribbon9-sp span:nth-of-type(1){
    padding: 0;
  }
  .ribbon9 hgroup p {
    font-size: calc(var(--fs) * 2.2);
  }
  .ribbon9 hgroup > p{
    padding: 0 0 0.4em 0;
  }
  .ribbon9-w h4{
    font-size: calc(var(--fs) * 2.5);
  }
.ribbon9-w-notice{
    padding: calc(var(--rs) * 8) calc(var(--rs) * 3) 1.2rem;
  }
  .award-s-title {
    font-size: calc(var(--fs) * 2);
  }
  .award-cont{
    padding: calc(var(--rs) * 20) calc(var(--rs) * 3) 1.2rem;
  }
  .award-box{
    font-size: calc(var(--fs) * 2);
    padding: 0 0 calc(2rem - 0.2em) 0;
  }
  .award-row{
    font-size: calc(var(--fs) * 1.6);
  }
  .award-row--major{
    font-size: calc(var(--fs) * 1.8);
  }
  .award-join{
    font-size: calc(var(--fs) * 1.5);
  }
  .award-row dt::after{
    margin: 0 0.6em;
  }
  .award-text{
    font-size: calc(var(--fs)*1.5);
    padding: 0 calc(var(--rs) * 3) 2rem;
  }
  .award-text br{
    display: none;
  }
}

/*参加規約==============================*/
.cont-title-r h2{
  color: #fff;
}
.cont-title-r .side-line{
  background-color: #fff;
}
.rule-box{
  padding: 0 0 3rem 0;
  line-height: 1.6;
}
.rule-box:nth-of-type(2){
  padding: 0 0 0.6rem 0;
}
.rule-s-title{
  color: #e4d81d;
  font-size: calc(var(--fs)*1.8);
  font-weight: bold;
  text-indent: -0.5em;
  padding: 0 0 0.5rem;
}
.rule-text{
  color: #fff;
  padding: 0 0 0.6rem 1em;
  text-indent: -1em;
}
.rule-imp{
  text-indent: 0;
  background: rgba(255, 255, 255, 0.08);
  padding: 1em;
  margin: 1em 0;
}
.rule-imp div:not(:last-child){
  margin-bottom: 1.2em;
}
.rule-imp-title{
  color: #fbee24;
}
.rule-s-text{
  display: block;
  padding-top: 0.4em;
}
.rule-inner{
  display: flex;
  gap:1em;
  text-indent: 0;
}
.rule-list{
  margin: 0 0 0 -1em;
}
.rule-mess{
  color: #fff;
  padding: 0 0 3rem 0;
}
.rule-notice {
  background: rgba(255, 255, 255, 0.08);
  display: flex;
  justify-content: center;
  gap: 1.2em;
  padding: 1.2em;
  margin: 0 0 3rem 0;
}
.fa-exc {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 2.2em;
  min-height: 2.2em;
  color: #fff;
  background: #EE2D30;
  font-size: calc(var(--fs) * 2.6);
  margin-right: 0 !important;
}
.rule-notice-text {
  color: #fff;
  font-size: calc(var(--fs) * 1.8);
  font-weight: bold;
}
@media(min-width: 960px){
  .rule-notice {
    align-items: center;
  }
}
/*店舗===============================*/
.shop-cont{
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  padding: 0 0.5rem;
}
.shop-list{
  width: calc(var(--col3) - (var(--rs) * 2.0));
  background: var(--color-white);
  box-shadow: var(--bs-cmn);
  margin: calc(var(--rs) * 1.0);
}
.shop-link{
}
.shop-link:hover{
  text-decoration: none;
}
.shop-img{
  min-height: auto;
  aspect-ratio: 3 / 2;
}
.shop-img:hover{
  opacity: 0.7;
  transition: opacity .2s;
}
.shop-link:hover > .shop-img:not(:hover){
  opacity: 1 !important;
  -moz-opacity: 1 !important;
  filter: none !important; /* filter:alpha(opacity=70) 対策 */
}
.shop-name{
  color: #333;
  font-size: calc(var(--fs) * 1.8);
  font-weight: bold;
  text-align: center;
  text-decoration: none;
  padding: 0.8rem 1rem;
}
.shop-name:hover{
  color: #333;
}
.shop-link::after{
  content: "参加作品を見る";
  display: block;
  padding: 1rem 0 0.8rem;
  margin: 0.4rem 1rem 1.6rem;
  font-size: calc(var(--fs) * 1.4);
  font-weight: bold;
  text-align: center;
  background: #e7eefd;
  color: #051a49;
  border-radius: .5rem;
}
.shop-link:has(.shop-img:hover)::after{
  filter: saturate(200%) hue-rotate(-20deg) opacity(75%) brightness(1.02);
}
.shop-link:hover::after{
  filter: saturate(200%) hue-rotate(-20deg) opacity(75%) brightness(1.02);
}
.shop-text-blog{
  font-size: calc(var(--fs) * 1.4);
  text-align: center;
  padding: 0 1rem;
    margin: 1rem auto;
}
.link-text_blog{
  color: #051a49;
}
.fa-blog::before{
  content: "\f781";
}
.link-text_blog::after{
  content: "";
  width: 0.5em;
  height: 0.5em;
  margin: 0 0 0 1rem;
  border: 0;
  border-top: 0.2em solid #051a49;
  border-right: 0.2em solid #051a49;
  display: inline-block;
  -ms-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  position: relative;
  top: -0.1em;
}
.link-text_blog:hover::after{
  border-top: 0.2em solid var(--color-link-nml-hover);
  border-right: 0.2em solid var(--color-link-nml-hover);
}
/*コピーライト==========================*/
.copy-sec{
  padding: 3rem 2vw;
}
.copy-wrap{
  color: #fff;
  font-size: calc(var(--fs)*1.4);
  text-align: center;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap:0.5em 1em;
}






















