@charset "UTF-8";

/*****************************
  pagecommon
*****************************/
.cmpsecsp{
  background: #fff;
  position: relative;
}
.campaignEnd .cmpsecsp-fv::after{
  content: "";
  aspect-ratio: 15/2;
  background: url(../images/campaign/after.svg) no-repeat center / contain;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 76.53%;
  z-index: 10;
}

/*****************************
cmpsecsp-fv
*****************************/
.cmpsecsp-fv {
  padding: 8vw 0 3.5vw;
}
.cmpsecsp-fv::before{
  content: "";
  background: linear-gradient(#ffff8c,#fff);
  aspect-ratio: 767/450;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}
.cmpsecsp-fv .poke{
  position: absolute;
}
.cmpsecsp-fv .poke1{
  top: -11.4%;
  left: -23.5%;
  width: 77.35%;
}
.cmpsecsp-fv .poke2{
  bottom: 25%;
  bottom: 24%;
  right: 5.22%;
  width: 25.55%;
}
.cmpsecsp-fv .poke3{
  bottom: 25%;
  left: 0%;
  width: 31.68%;
}
.cmpsecsp-fv .ttl{
  margin-left: auto;
  width: 67.4%;
}
.cmpsecsp-fv .date{
  margin-top: 2vw;
}
.cmpsecsp-fv .date p{
  margin: 1vw auto 0;
  width: 77.85%;
}

/*****************************
cmpsecsp-overview
*****************************/
.cmpsecsp-overview{
  background: #ef8337;
  padding: 3.5vw 0 5vw;
}
.cmpsecsp-overview h2{
  margin-bottom: 2.2vw;
  width: 38.65%;
}

/*****************************
cmpsecsp-prize
*****************************/
.cmpsecsp-prize {
  padding: 8.5vw 0 8vw;
}
.cmpsecsp-prize h2{
  margin-bottom: 4.5vw;
  width: 20.77%;
}
.cmpsecsp-prize .ttl-box {
  display: flex;
  align-items: center;
}
.cmpsecsp-prize .ttl-box span {
  font-size: 2vw;
  padding: 0 0 2vw 1.2vw;
}
.cmpsecsp-prize .prizegr {
  margin-top: -3vw;
}
.cmpsecsp-prize .prizegr .prize{
  border: 1px solid #ef8337;
  border-radius: 10px;
  margin-top: 3vw;
  overflow: hidden;
}
.cmpsecsp-prize .prizegr .prize3{
  border-color: #00afff;
}
.cmpsecsp-prize .prizegr .prize1 .course{
  padding: 1vw 0 3.5vw;
}
.cmpsecsp-prize .prizegr .prize2 .course{
  margin-bottom: -.5vw ;
}
.cmpsecsp-prize .prizegr .prize3 .course{
  padding: 1vw 0 2.5vw;
}

.cmpsecsp-prize .prizegr .prize dl{
  margin: 3vw auto 0;
  text-align: center;
  width: 67.26%;
}
.cmpsecsp-prize .prizegr .prize .fimgbox{
  width: 60.16%;
}
.cmpsecsp-prize .prizegr .prize dl dt{
  margin: 0 auto 1vw;
}
.cmpsecsp-prize .prizegr .prize dl dd{
  margin: 0 auto;
}

.cmpsecsp-prize .prizegr .prize1 dl dt{
  width: 76.48%;
}
.cmpsecsp-prize .prizegr .prize1 dl dd{
  width: 80.77%;
}
.cmpsecsp-prize .prizegr .prize2 dl dt{
  width: 65.84%;
}
.cmpsecsp-prize .prizegr .prize2 dl dd{
  width: 88.13%;
}
.cmpsecsp-prize .prizegr .prize3 dl dt{
  width: 53.38%;
}

.cmpsecsp-prize .prizegr .prize .imgbox{
  margin: 2vw auto 0;
}

.cmpsecsp-prize .prizegr .prize2 .imgbox{
  margin: 0 auto;
  width: 86.93%;
}
.cmpsecsp-prize .prizegr .prize3 .imgbox{
  width: 88.03%;
}


.cmpsecsp-prize .prizegr .prize .itemtxt{
  position: absolute;
}
.cmpsecsp-prize .prizegr .prize1 .itemtxt{
  left: 35%;
  bottom: 11%;
  width: 55.57%;
}
.cmpsecsp-prize .prizegr .prize2 .itemtxt{
  left: 32%;
  bottom: 10%;
  width: 66.37%;
}
.cmpsecsp-prize .prizegr .prize3 .itemtxt{
  left: 28.3%;
  bottom: 11%;
  width: 70.70%;
}

.cmpsecsp-prize .prizegr .prize .bar{
  background: #ef8337;
  margin-top: 13vw;
  padding: 1vw 0;
  text-align: center;
}
.cmpsecsp-prize .prizegr .prize2 .bar{
  margin-top: 3vw;
}
.cmpsecsp-prize .prizegr .prize3 .bar{
  background: #00afff;
  margin-top: 3vw;
}
.cmpsecsp-prize .prizegr .prize .bar .num{
  width: 23.52%;
}
.cmpsecsp-prize .prizegr .prize3 .bar .num{
  position: relative;
  width: 30.81%;
  z-index: 1;
}
.cmpsecsp-prize .prizegr .prize3 .bar .attention{
  position: absolute;
  right: 1.5%;
  bottom: 12%;
  width: 17.88%;
}

.cmpsecsp-prize .prizegr .prize .poke{
  position: absolute;
  left: 0;
  bottom: 0;
}
.cmpsecsp-prize .prizegr .prize1 .poke{
  width: 32.18%;
}
.cmpsecsp-prize .prizegr .prize2 .poke{
  width: 36.86%;
}
.cmpsecsp-prize .prizegr .prize3 .poke{
  width: 28.19%;
}

.cmpsecsp-prize h3{
  margin: 5vw auto 0;
  width: 74.82%;
}

/*****************************
cmpsecsp-method
*****************************/
.cmpsecsp-method .content{
  background: #e8ffcc;
  padding: 4.5vw 0 6vw;
}
.cmpsecsp-method .content h2{
  margin-bottom: 3.2vw;
  width: 20.9%;
}
.cmpsecsp-method .step{
  border: 1px solid #2850b4;
  margin-top: 5vw;
  margin: 4vw auto;
  padding: 8vw 2vw 6vw;
  width: 93.87%;
}
.cmpsecsp-method .step p{
  margin: 0 auto 6vw;
}
.cmpsecsp-method .flowgr{
  margin: 0 auto;
  width: 87.59%;
}
.cmpsecsp-method .flowgr .flow .imgbox{
  margin: 0 auto;
}
.cmpsecsp-method .flowgr .flow .txt{
  margin-top: 2vw;
  height: 10vw;
}
.cmpsecsp-method .flowgr .flow1{
  width: 27.48%;
}
.cmpsecsp-method .flowgr .flow2{
  width: 31.02%;
}
.cmpsecsp-method .flowgr .flow2 .imgbox{
  margin-left: 2vw;
  width: 89.8%;
}
.cmpsecsp-method .flowgr .flow3{
  width: 25.96%;
}
.cmpsecsp-method .flowgr .flow3 .imgbox{
  width: 62.72%;
}

.cmpsecsp-method .btn{
  margin: 3vw 2.6% 5vw;
}

.cmpsecsp-method .target{
  background: #fff;
  border: 1px solid #ef8337;
  border-radius: 10px;
  margin: 0 auto;
  padding: 5vw 0;
  width: 94.39%;
}
.cmpsecsp-method .target .ttl{
  margin: 0 auto 3vw;
  width: 90.5%;
}
.cmpsecsp-method .target ul{
  margin: 0 auto;
  width: 94.08%;
}
.cmpsecsp-method .target ul li:not(:last-of-type){
  margin-bottom: 6vw;
}
.cmpsecsp-method .target ul .txt{
  margin-bottom: 2vw;
}
.cmpsecsp-method .target ul li:nth-of-type(1) .txt{
  width: 81.14%;
}
.cmpsecsp-method .target ul li:nth-of-type(2) .txt{
  width: 72.51%;
}
.cmpsecsp-method .target ul li:nth-of-type(2) .item{
  display: block;
  margin: 0 auto;
  width: 73.39%;
}
.cmpsecsp-method .target ul li:nth-of-type(3) .txt{
  width: 92.54%;
}
.cmpsecsp-method .target ul li:nth-of-type(3) .item{
  display: block;
  margin: 0 auto;
  width: 84.06%;
}
.cmpsecsp-method .attention{
  margin-top: 3vw;
}

/*****************************
cmpsecsp-precautions
*****************************/
.cmpsecsp-precautions{
  padding: 5.5vw 0 5vw;
}
.cmpsecsp-precautions .precautions h2{
  margin-bottom: 3.2vw;
  width: 20.9%;
}
.cmpsecsp-precautions .precautions p{
  margin: 2vw 0 4vw;
}

/*****************************
bgsec
*****************************/
.bgsec::before{
  content: "";
  aspect-ratio: 128/41;
  background: #fff;
  position: absolute;
  clip-path: polygon(0 0, 0% 100%, 100% 0);
  right: 0;
  top: 0;
  width: 100%;
}
.bgsec img{
  width: 100%;
}