@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{
  text-align: center;
}
.special-news li{
  padding: 0 0 0.5em 0;
}
.event-schedule{
  max-width: var(--width-box);
  margin: 3rem auto 0;
}
.event-schedule h2{
  font-size:calc( var(--fs)*2.5);
  text-align: center;
  color: #fff;
  background: linear-gradient(to bottom,hsl(0deg 80% 45%), hsl(0deg 80% 37%));
  padding: 0.5rem 0 0.2rem;
}
.event-schedule dl{
  background-color:#F2F6FF;
}
.event-item{
  font-size: calc(var(--fs)*1.8);
  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: #F35607;
}
.event-item dd i{
  color: #F35607;
  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.8rem calc(var(--rs)*3) 0.5rem;
}
.menu-item:hover{
  color: #999999;
  text-decoration: none;
}
@media (max-width: 835px){
  .menu-sec ul{
    flex-wrap: wrap;
  }
  .menu-sec li{
    flex: 1 1 50%;
      border-right: none;
  }
}

/*==============================*/

.cont-sec{
  width: 100%;
  max-width: none;
  margin: 0 auto;
  padding: 2rem 2vw 7rem;
  overflow: hidden;
}
.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.5) 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.4);
}
.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: 2rem 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{
      height: 5rem;
      margin-top: -5rem;
      display: block;
  }
@media (max-width: 835px){
  #content-title,#schedule,#award,#rule{
      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(to bottom,hsl(0deg 80% 45%), hsl(0deg 80% 37%));
  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: #F35607;
    font-size: calc(var(--fs) * 1.8);
    text-indent: 1rem;
    font-weight: bold;
    border-left: 1rem solid #F35607;
    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: #F35607;
    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 0px rgba(0, 0, 0, 0.08);
}
.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.8rem;
    left: -7rem;
    /* z-index: -2; */
    border: 5.1rem solid #aa1313;
    border-left-color: transparent;
}
.ribbon9:after {/*右側のリボン端*/
  content: '';
  position: absolute;
  width: 1rem;
  bottom: -9.8rem;
  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: none;
  border-bottom: solid 1.9rem transparent;
  border-right: solid 3.1rem #6D150F;/*左の折り返し部分*/
}
.ribbon9 hgroup:after {
  position: absolute;
  content: '';
  top: 100%;
  right: 0;
  border: none;
  border-bottom: solid 1.9rem transparent;
  border-left: solid 3.1rem #6D150F;/*右の折り返し部分*/
}
.ribbon9-w h4{
  font-size: calc(var(--fs) * 2.8);
}
.ribbon9-w:before {/*左側のリボン端*/
  content: '';
    position: absolute;
    width: 1rem;
    bottom: -2.8rem;
    left: -2.8rem;
    /* z-index: -2; */
    border: 30px solid #aa1313;
    border-left-color: transparent;
}
.ribbon9-w hgroup:before {
  position: absolute;
  content: '';
  top: 100%;
  left: 0;
  border: none;
  border-bottom: solid 1.2rem transparent;
  border-right: solid 3.1rem #6D150F;/*左の折り返し部分*/
}
.ribbon9-w hgroup:after {
  position: absolute;
  content: '';
  top: 100%;
  right: 0;
  border: none;
  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;/*山形に切り抜き*/
}

.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 > p{
  width: 7em;
  color: #F35607;
  font-weight: bold;
  text-align: center;
  border: solid 2px #F35607;
  padding: 0.2em 0.6em 0.1em;
  margin: 0 0 1.5rem 0;
}
.award-box ul:not(:first-of-type){
  font-size: calc(var(--fs) * 2.5);
}
.award-inner{
  display: flex;
  justify-content: space-between;
  padding: 0 0 1rem 0.3em;
}
.award-inner li:nth-of-type(1){
  font-weight: bold;
}
/*.award-box:not(:last-of-type) dt{
  text-indent: -0.5em;
}*/
.border-line{
  flex: auto;
}
.award-box hr{
    border: none;
    border-top: 2px dotted #aaa;
  margin: 1.5rem 2rem;
}
.award-join{
  font-size: calc(var(--fs) * 2.1);
}
.award-text{
  color: #F35607;
  font-size: calc(var(--fs)*2.5);
  font-weight: bold;
  text-align: center;
  padding: 0 calc(var(--rs) * 3) 3rem;
}
.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;
}
.award-notice{
  font-size: calc(var(--fs)*2);
  font-weight: bold;
  text-align: center;
  margin-top: 2rem;
}

.award-notice{
  font-size: calc(var(--fs)*1.8);
  font-weight: bold;
  text-align: center;
  margin-top: 2rem;
}

@media(max-width: 768px){
  .award-s-title{
    font-size: calc(var(--fs) * 2);
  }
  .ribbon9 hgroup p {
    font-size: calc(var(--fs) * 2.2);
  }
  .ribbon9 h4{
  font-size: calc(var(--fs) * 3.1);
}
  .ribbon9:before,.ribbon9:after,.ribbon9 hgroup:before,.ribbon9 hgroup:after{
    content: none;
  }
  .ribbon9-sp{
    display: flex;
    flex-direction: column;
  }
  .ribbon9-sp span:nth-of-type(1){
  padding: 0 0 0 0;
}
  .ribbon9 hgroup > p{
    padding: 0 0 0.4em 0;
  }
  .ribbon9-w h4{
    font-size: calc(var(--fs) * 2.5);
  }
  .award-cont{
  padding: calc(var(--rs) * 18) calc(var(--rs) * 3) 1.2rem;
}
  .award-box{
    font-size: calc(var(--fs) * 2);
      padding: 0 0 calc(2rem - 0.2em) 0;
  }
  .award-box ul:not(:first-of-type){
  font-size: calc(var(--fs) * 1.6);
}
 .award-box hr{
   margin: 1rem;
  }
  .award-text{
  font-size: calc(var(--fs)*1.5);
  padding: 0 calc(var(--rs) * 3) 2rem;
}
  .award-text br{
    display: none;
  }
  .award-join{
  font-size: calc(var(--fs) * 1.5);
}
  .ribbon9-w-notice{
    padding: calc(var(--rs) * 8) calc(var(--rs) * 3) 1.2rem;
  }
}
/*==============================*/
.cont-title-r h2{
  color: #fff;
}
.cont-title-r .side-line{
  background-color: #fff;
}
.rule-box{
  padding: 0 0 3rem 0;
}
.rule-s-title{
  color: #eb9936;
  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-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{
  color: #fff;
  font-size: calc(var(--fs)*1.8);
  font-weight: bold;
  text-align: center;
}

/*============================*/
.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;
}