section.main{
    position: relative;
}
section.spot{
    padding: 0;
}
.rally{
    max-width: 100%;
    width: 100%;
    
/*    max-width: 1100px;
    width: 90%;*/
    margin: 0 auto;
    padding: 50px 0 0;
}
.rally img{
    width: 100%;
    height: auto;
    vertical-align: top;
}
.rally p{
    color: #fff;
}

/** 背景 **/
#particles-js {
  position: absolute;
  width: 100%;
  height:100%;
  background-image: linear-gradient(-20deg, #020E34 0%,#000033 100%);  
  z-index: -1;
}
canvas { 
  position: absolute;
  top: 0;
}

/** kv **/
.rally__kv{
    /*width: 90%;*/
    width: 100%;
    /*margin: 150px auto;*/    
}

/** 参加方法 **/
.participate__title{
    width: 100%;
    margin-bottom: 50px;    
}
.d-title{
    width: fit-content;
    margin: 0 auto;
}
.d-title img {
    width: fit-content;
}
.d-title + div{
    margin-top: 30px;
}

.participate > section{
    margin-top: 100px;
}


.how{
    background: rgba(80,86,105, .7);
    width: 75%;
    margin: 0 auto;
}
.how__list{
    padding: 50px;
}
.how__item{
    display: grid;
    grid-template-columns: 55px 170px 1fr;
    gap: 20px;
}
.how__item:not(:last-child):after{
    content: url("/images/article/pokemon/stamprally/how_triangle.png");
    grid-column-start: 1;
    grid-column-end: 4;
    width: fit-content;
    margin: 0 auto;
}
.how__item p{
    /*text-shadow: 2px 3px 3px rgba(0, 0, 0, 0.4);*/
  font-size: 20px;
  font-weight: 700;
  display: flex;
  height: 100%;
  align-items: center;
    
}
.how__item img{
    width: fit-content;
}
.h-item__image{
    width: fit-content;
    margin: auto;
}
.h-item__image.h-item__image--code{
    width: 117px;
    height: 117px;
}
.h-item__image.h-item__image--code img{
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.h-item__image .caption{
        font-size: .8em;
    margin-top: 3px;
}


/** スポット **/
.spot__attention{
    font-size: 1.4em;
    /*font-family: serif;*/
}
.spot__map{
    margin-top: 50px;
}
.spot__list {
    counter-reset: listnum; /* カウンターをリセット */
}
.spot__list .sopt__item{
    counter-increment: listnum; /* counter-resetと同じ文字列 */
}

/** マップ **/
.spot-id{
    position: relative;
    top: -50px;
}

.spot__list .sopt__item > p{    
    color: #fff;   
    font-size: 1.5em;
    font-weight: 500;
    font-family: serif;
}
.spot__list .sopt__item > p:nth-of-type(1):before{
    content: counter(listnum)".";    
}
.spot__list .sopt__item > p:nth-of-type(2){    
    text-indent: 1em;
}
/*.spot__list .sopt__item > .detail-list .detail__item{
    display: flex;
}*/
.spot__list .sopt__item > .detail-list .detail__item:nth-of-type(1):before{
/*     content: url("/images/article/pokemon/stamprally/icon_drop.png");
     margin-right: 10px;*/
/*     background: url("/images/article/pokemon/stamprally/icon_drop.png");
     background-repeat: no-repeat;*/
     /*position: absolute;*/
     /*background-size: contain;*/
}


.detail-list{
    margin: 20px 0 0 1em;
}
.detail__item{
    display: flex;
}
.detail__item:not(:first-child){
    margin-top: 10px;
}
.detail__item > p:first-of-type{
    width: 115px;
    min-width: 115px;
    display: flex;
    justify-content: space-between;
    margin-left: 5px;
}
.detail__item > *:first-child{
    width: 20px;
}
.detail__item > *:last-child{
    margin-left: 40px;
}

.detail__item > a > p{
    text-decoration: underline;
}

/*.spot__list .sopt__item > .detail-list > li:nth-of-type(1) p:before{
    content:  "水辺ポイント";    
}
.spot__list .sopt__item > .detail-list > li:nth-of-type(2) p:before{
    content: "開催期間";
}
.spot__list .sopt__item > .detail-list > li:nth-of-type(3) p:before{
    content: "☆開催場所";    
}
.spot__list .sopt__item > .detail-list > li:nth-of-type(4) p:before{
    content: "☆詳細";    
}*/
.spot__list .sopt__item:not(:first-child){
    margin-top: 50px;
}

/** 商品 **/
.product__text > p:first-child{
    font-size: 1.5em;
    
}
.product__text > div{
    margin-top: 10px;
    display: flex;
}
.product__text > div >p:first-child{
    white-space: nowrap;
}
.product__attention{
    font-size: .8em;
    width: 50%;
}
.product__attention p{
    width: fit-content;
    margin: 0 auto;
    
}
/*.product__text > p:nth-of-type(2){
    margin-top: 10px;
}*/
.product__image{
/*    margin-top: 20px;
    width: 100%;*/
    width: 50%;
    margin: 20px 0 0 0;
}

.product__item--b{
    margin-top: 50px;
}
/** comming soon **/
/*.product__image{
    text-align: center;
    font-size: 2em;
    
}*/


/** QA **/

.qa__list{
    counter-reset: qlist; /* カウンターをリセット */
}
.qa__item{
    counter-increment: qlist; /* counter-resetと同じ文字列 */
}
.qa__item:not(:first-child){
    margin-top: 30px;
}

.quest,
.ans{
    display: flex;
}
.qa .quest p,
.qa .ans p
{
    /*line-height: 3em;*/
    display: flex;
}
.qa .quest:before,
.qa .ans:before{
    color: #fff;
    /*width: 35px;*/
    /*font-size: 3em;*/ 
    margin-right: 20px;
}
.qa .quest:before{
    content: "Q"counter(qlist);
}
.qa .ans:before{
    content: "A"counter(qlist);
}
.qa .qa__item > div:not(:first-child){
    margin-top: 20px;    
}

.ans__sub1{
    margin-top: 20px;
}
.ans__sub2{
    margin-left: 2em;
}
.ans__sub1 > li:nth-of-type(2) > p:last-child{
    margin-left: 2em;
}
.ans__sub1 > li:not(:first-child){
    margin-top: 20px;
}


/** 注意事項 **/
.environment__txt > p:before{
    content: url("/images/article/pokemon/stamprally/icon_star-sm.png");
    margin-right: 10px;
}
.environment__txt--sub{
    margin-left: 2em;
}


.s-footer{
    background: rgb(197,65,145);
    background: linear-gradient(90deg, rgba(197,65,145,1) 0%, rgba(23,78,191,1) 100%);
    text-align: center;
    padding: 50px 0;
    color: #fff;
    margin-top: 100px;
}
.s-footer_txt{
    /*font-size: .8em;*/
    width: 90%;
    margin: 0 auto;
}

section.p-footer{
    margin-top: 0;
}


/** シャドウアップ **/
.shadow__item{
    width: fit-content;
    margin: 30px auto 0;
}
.shadow__schedule{
    display: flex;
    width: fit-content;
    margin: 0 auto;
}
.shadow__schedule > div{
    width: 20px;
}
.shadow__schedule > div img{
    width: 100%;
    height: auto;
    vertical-align: top;
}
.shadow__attention{
    margin-top: 20px;
}


/** Sp tb **/
@media screen and (max-width: 1000px){
    .m-kv {
        height: auto;
    }
    
    .rally__kv{
        /*width: 95%;*/
        margin: 50px auto 0;
    }
    .participate > section{
        margin-top: 50px;
    }
    
    
    .how__item{
        grid-template-columns: 1fr 1fr;
    }
    .h-item__txt {
        grid-column-start: 1;
        grid-column-end: 4;
    }
    .h-item__txt a p{
        text-decoration: underline;
    }
    .how{
        width: 90%;
    }
    .how__list{
        padding: 50px 30px;
    }
    
    .h-item__image img{
        width: 100%;
    }
    
    
    /** caption  **/
    .h-item__image{
        position: relative;
    }
    .h-item__image .caption {
        font-size: .8em;
        margin-top: 3px;
        position: absolute;
        height: fit-content;
        white-space: nowrap;
        text-align: center;
        left: -1em;
    }
    .how__item:first-child:after{
        margin-top: 20px;       
    }
    /** caption end **/
    
    .how__item:not(:first-child){
        margin-top: 20px;
    }
    
    
    .d-title img {
        max-width: 90%;
        display: flex;
        margin: 0 auto;
    }
    .d-title.d-title_1 img{
        max-width: 58%;        
    }
    .d-title.d-title_2 img{
        max-width: 55%;        
    }
    .d-title.d-title_4 img,
    .d-title.d-title_5 img
    {
        max-width: 70%;
    }
    
    .spot__list .sopt__item > p{
        font-size: 1em;
    }
    .qa .quest p:before, .qa .ans p:before{
        font-size: 2em;
    }
    .s-footer{
        margin-top: 50px;
    }
    .s-footer_txt{
        font-size: .8em;
    }
    
    .detail__item{
        display: grid;
        grid-template-columns: 20px 1fr;
        gap:10px;
    }
    .detail__item *:last-child{
        grid-column-start: 1;
        grid-column-end: 3;
        
    }
    
    
    .detail__item > p:first-of-type{
        display: block;
        width: 100%;
        /*background: rgba(255, 255, 255, 0.3);*/
        padding: 0;
        margin-left: 0;
    }
    
    .detail-list{
        margin-left: 0;
    }
    
    .product__image{
        width: 100%;
    }
    
    .product__attention{
        width: 100%;
    }
    
}