@import url('./common.css');


#priority{

.wrapper{
  .title-hero{
    font-weight: 600;
    line-height: 1.4;
    margin-top: calc(100 / 815 * 100%);
    text-align: center;
    color: var(--white);
    background: 
      url(../img/general/deco-title--lefttop.svg) left top no-repeat,
      url(../img/general/deco-title--righttop.svg) right top no-repeat,
      url(../img/general/deco-title--rightbottom.svg) right bottom no-repeat,
      url(../img/general/deco-title--leftbottom.svg) left bottom no-repeat,
      #CC6252;
    background-size: 10%;
    min-height: 60px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size:clamp(24px, 0.81vw + 20.96px, 32px);
    @media screen and (min-width: 769px) {
      font-size:clamp(32px, 0.81vw + 20.96px, 44px);
    line-height: 1.2;
     min-height: 129px;
    }
    .cap{
      font-size:clamp(16px, 0.81vw + 20.96px, 20px);
     font-weight: 600;
    }
    .small{
      font-size:clamp(28px, 0.81vw + 20.96px, 38px);
      font-weight: 600;
    }
  }
  .imgbox{
    margin-top: calc(50 / 1363 * 100%);
    img{
      width: calc(1159 / 1363 * 100%);
      height: auto;
    }
  }
  .anchor{
    .anchor-list{
      
      display: grid;
      grid-template-columns:repeat(1, 1fr);
      align-items: center;
      padding: calc(40 / 1363 * 100%) 0;
      gap: 2rem;
      @media screen and (min-width: 769px) {
      grid-template-columns:repeat(2, 1fr);
      border-bottom: 1px solid #d7d7d7;
      }
      .anchor-list-item{
        border-bottom: 1px solid #d7d7d7;
        padding-bottom: calc(40 / 1363 * 100%);
        @media screen and (min-width: 769px) {
        border-bottom: none;
        padding-bottom: 0;
        }
        a{
          font-size:clamp(16px, 0.4vw + 14.48px, 18px);
          font-weight: 700;
          position: relative;
          &::after{
            content:"";
            position: absolute;
            right: -20px;
            top: 50%;
            transform: translateY(-50%);
            width: 10px;
            height: 10px;
            background: url(../img/general/icon-arrow.svg) no-repeat center center;
            background-size: 10px 10px;
          }
        }
      }
    }
    }
  .title{
    margin-top: calc(100 / 1363 * 100%);
    .pc{
      @media screen and (min-width: 769px) {
      display: inline-block !important;
      }
    }
    &:after {
                        content: "";
                        display: block;
                        width: 80px;
                        height: 2px;
                        background-color: var(--gold);
                        margin: calc(40 / 1363 * 100%) auto;
                        @media screen and (min-width: 769px) {
                        height: 4px;
                        }
                    }
                    .sub{
                      font-size:clamp(18px, 0.61vw + 17.72px, 24px);
                      font-weight: 700;
                      line-height: 1.4;
                      margin-bottom: calc(20 / 1363 * 100%);
                    }
                  }
  
  .text{
      font-size:clamp(16px, 0.4vw + 14.48px, 18px);
      font-weight: 400;
      line-height: 2;
    margin: 0 auto;
    margin-bottom:calc(80 / 1363 * 100%);
    }
    .title-sub{
      font-size:clamp(18px, 0.81vw + 20.96px, 20px);
      font-weight: 700;
      line-height: 1.4;
        margin-bottom:calc(80 / 1363 * 100%);
        border-top: 6px solid var(--gold-sub);
        border-bottom: 4px solid var(--gold-sub);
        position: relative;
        padding: calc(40 / 1363 * 100%) 0;
        @media screen and (min-width: 769px) {
          font-size:clamp(24px, 0.81vw + 20.96px, 32px);
        line-height: 1.0;
        }
        span{
          font-size:clamp(18px, 0.61vw + 15.72px, 24px);
        }
        &::before{
          content: "";
          display: block;
          width:100%;
          position: absolute;
          top: 0;
          height:  1px;
          background-color: var(--gold-sub);
          margin: calc(10 / 1363 * 100%) auto 0;
        }
    }
    .title-subcolor{
      background-color: #39804a;
      font-size:clamp(17px, 0.61vw + 17.72px, 19px);
      font-weight: 700;
      line-height: 1.4;
      color: var(--white);
      padding: calc(20 / 1363 * 100%) calc(20 / 1363 * 100%);
      text-align: center;
      margin-bottom: calc(40 / 1363 * 100%);
      @media screen and (min-width: 769px) {
  font-size:clamp(20px, 0.61vw + 17.72px, 26px);
      }
      span{
                      font-size: clamp(14px, 0.61vw + 17.72px, 18px);
                      display: block;
                      @media screen and (min-width: 769px) {
                     font-size: clamp(20px, 1.32vw + 19.07px, 24px);
                    }
                    }
                  }
 .about{
      margin-bottom: calc(100 / 1363 * 100%);
      .lead{
        text-align: center;
        font-size:clamp(24px, 0.81vw + 20.96px, 32px);
        margin-bottom: calc(40 / 1363 * 100%);
      }
      .red{
        color: var(--red);
        font-weight: 700;
      }
      .requirement{
        .disc{
          margin-bottom: .5rem;
      }
    
      .notes{
        font-size:clamp(14px, 0.61vw + 17.72px, 15px);
                    margin-bottom: calc(80 / 1363 * 100%);
                    line-height: 2;
      }
    }
      }
      .form{
        .inner{
        border: solid 2px #c49b4b;
         padding:0 0;
        @media screen and (min-width: 769px) {
                border: solid 4px #c49b4b;
        }
        .title{
          margin-top: calc(110 / 1363 * 100%);
          font-size:clamp(22px, 0.81vw + 20.96px, 28px);
          &:after {
            content:none;
          }
        }
        form{
          text-align: left;
            padding-top: calc(50 / 822 * 100%);
          .center{
            text-align: center;
          }
          .topline{
            border-top: solid 3px var(--gold-sub);
            padding-top: calc(50 / 822 * 100%);
          }
          .required{
            color: var(--red);
            display: inline-block;
            margin-left: 5px;
          }
          dl{
            dt{
              font-size:clamp(16px, 0.61vw + 17.72px, 18px);
              font-weight: 700;
              margin-bottom: calc(20 / 822 * 100%);
            }
            dd{
           margin-bottom: calc(30 / 822 * 100%);
              @media screen and (min-width: 769px) {
              padding-left: 2rem;
              margin-bottom: 0;
              }
              small{
                font-size:clamp(14px, 0.47vw + 12.24px, 16px);
              }
              textarea{
           
                @media screen and (min-width: 769px) {
              margin-left: 2rem;
                }
                &#sns_account{
                  margin-left: 0;
                  margin-top: calc(10 / 822 * 100%);
                }
              }
              .wpcf7-list-item{
                margin-left: 0;
                display: block;
             
              }
              .wpcf7-form-control-wrap{
                .wpcf7-textarea,
                &:first-child{
                  margin-bottom:0;
            @media screen and (min-width: 769px) {
              margin-bottom:0;
            }}
            &:last-child{
           margin-bottom:1rem;
            @media screen and (min-width: 769px) {
              margin-bottom:4rem;
            }
            }
              }
            }
          }
          ul{
            @media screen and (min-width: 769px) {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: calc(30 / 822 * 100%);
            }
       
          }
          .hr{
               border-top: solid 1px #e6e6e6;
            padding-top: calc(50 / 822 * 100%);
            width: 100%;
          }
           label{
          margin-bottom: calc(20 / 822 * 100%);
          display: inline-block;
          width: 100%;
        }
        .wpcf7-form-control-wrap{
          display: inline-block;
              margin-bottom:1rem;
                 width: 100%;
            @media screen and (min-width: 769px) {
            margin-bottom:4rem;
            }
        }
          input[type="text"],input[type="email"],input[type="tel"],select{
            width: 100%;
            height: 50px;
            border: 1px solid #bcbcbc;
            padding:1rem;
          }
          textarea{
            width: 100%;
            height: 15rem;
            border: 1px solid #bcbcbc;
          margin-bottom:1rem;
          padding:1rem;
            @media screen and (min-width: 769px) {
            margin-bottom:4rem;
            }
          }
        }
        .privacy{
        max-width: 100%;
        margin: calc(80 / 822 * 100%) auto;
        background-color: #f4f4f4;
        padding: calc(15 / 814 * 100%) calc(5 / 814 * 100%);
        @media screen and (min-width: 769px) {
        max-width:500px;
        }
        p{
          padding: 0 calc(30 / 1363 * 100%);
          @media screen and (min-width: 769px) {
           text-align: center;
           padding: 0;
          }
          a{
            text-decoration: underline;
          }
          br{
            display: none;
            @media screen and (min-width: 769px) {
            display: block;
            }
          }
        }
      }
      }
      }
      .about-end{
        padding-left: calc(30 / 1363 * 100%);
        padding-right: calc(30 / 1363 * 100%);
        @media screen and (min-width: 769px) {
      padding-left: calc(60 / 1363 * 100%);
        padding-right: calc(60 / 1363 * 100%);
        }
      }

.overview{
          text-align: left;
          overflow-x: auto;
          @media screen and (min-width: 769px) {
            overflow-x:initial;
          }
          /* @media screen and (min-width: 769px) {
          display: grid;
          grid-template-columns: 23% 77%;
          } */
          .overview-title{
            font-size:clamp(16px, 0.61vw + 17.72px, 20px);
            margin-bottom: calc(20 / 1363 * 100%);
            padding-right: calc(20 / 1363 * 100%);
            @media screen and (min-width: 769px) {
      
            margin-bottom: 0;
            }
            &::before{
              content: "◆";
              color: var(--gold-sub);
              margin-right: .5rem;
            }

        }
        .title-summary{
          font-size:clamp(17px, 0.81vw + 20.96px, 18px);
          font-weight: 700;
          line-height: 1.4;
          margin-bottom: calc(100 / 1363 * 100%);
          text-align: center;
          background-color: var(--gold-sub);
          color: var(--white);
          padding: calc(15 / 815 * 100%) 0;
          background-color: #cc6252;
          @media screen and (min-width: 769px) {
             padding: calc(20 / 1363 * 100%) 0;
          font-size:clamp(20px, 0.81vw + 20.96px, 26.4px);
          margin-bottom: calc(20 / 1363 * 100%);
          }
        }
        .overview-title-sub{
          font-size:clamp(16px, 0.61vw + 17.72px, 18px);
          font-weight: 700;
          line-height: 1.4;
          margin-bottom: calc(30 / 815 * 100%);
          text-align: center;
          background-color: #808080;
          color: var(--white);
          padding: calc(30 / 815 * 100%) 0;
          @media screen and (min-width: 769px) {
          font-size:clamp(18px, 0.61vw + 17.72px, 22px);
            padding: calc(15 / 815 * 100%) 0;
          }
        }
        .overview-title-list{
          font-size:clamp(16px, 0.61vw + 17.72px, 18px);
          @media screen and (min-width: 769px) {
         font-size:clamp(16px, 0.61vw + 17.72px, 20px);
          }
          &.mt20{
            margin-top: calc(50 / 815 * 100%);
          }
        }
        .text{
          width: 100%;
        }
         .red{
          strong{
            font-size:clamp(18px, 0.61vw + 17.72px, 26px);
      }
    }
   
         .detail{
            width: 100%;
              ul{
          li{
            text-indent: -2rem;
             padding-left: 2rem;
             font-size:clamp(14px, 0.61vw + 17.72px, 15px);
          }
          }
          .detail-item{
            padding:2rem;
            background-color: #F6F0E4;
            margin-top: calc(30 / 822 * 100%);
            p{
              font-size:clamp(14px, 0.61vw + 17.72px, 16px);
            }
          }
         
        }
        .disc{
          padding-left: 2rem;
          @media screen and (min-width: 769px) {
            padding-left: 3rem;
          }
        }
        .table{
          width: 100%;
          border-spacing: 0;
          border-top: solid 4px #c49b4b;
          @media screen and (max-width: 768px) {
            display: block;
            overflow-x: auto;
            -webkit-overflow-scrolling: touch;
            width: 600px;
            min-width: 100%;
          }
          thead{
            text-align: center;
           tr{
            th{
              border-top:solid 4px #c49b4b; 
              border-bottom:solid 1px #c49b4b;
              width: 50%;
              padding: calc(15 / 822 * 100%) 0;
              background-color: #b3463f;
              color: var(--white);
           
            }}
    
          }
          tbody{
            tr{
              &.end{
               color: #969696;
              }
               &.now{
                background-color: #F7E7E5;
                strong{
                  color: var(--red);
                  font-weight: 900;
                }
                td{
                  &:first-child{
                 background: url(../img/general/icon-fan.svg) no-repeat 20px center;
                 background-size: 56px;
                  }
                }
                }
              td{
                border-bottom:solid 1px #c49b4b;
                padding: calc(15 / 822 * 100%) 15px;
                line-height: 1.5;
                &:first-child{
                  padding-left: 90px;
                }
                
              }
            }
          }
        }
      }
       .overview-list{
        text-align: left;
      ul{
        li{
         
          margin-bottom: calc(50 / 815 * 100%);
          line-height: 1.6;
          @media screen and (min-width: 769px) {
      display: grid;
          grid-template-columns: 180px 1fr;
          gap: calc(10 / 1363 * 100%);
            line-height: 1.8;
          }
          h4{
            font-size:clamp(16px, 0.61vw + 17.72px, 17px);
            font-weight: 700;
            line-height: 1.4;
            @media screen and (min-width: 769px) {
          font-size:clamp(16px, 0.61vw + 17.72px, 20px);
            }
            span{
              color: var(--gold-sub);
            }
          }
          .disc{
            margin-left: -1.5rem;
            @media screen and (min-width: 769px) {
              margin-left: -2.5rem;
            }
            li{
              margin-bottom: 0;
              margin-left: 1.8rem;
              list-style: disc;
              display: list-item;
            @media screen and (min-width: 769px) {
              margin-bottom: 0;
            }
            }
          }
        }
        p{
          font-size:clamp(14px, 0.61vw + 17.72px, 16px);
          .red{
            color: var(--red);
            font-weight: 700;
          }
          .under{
            text-decoration: underline;
          }
          @media screen and (min-width: 769px) {
          font-size:clamp(16px, 0.61vw + 17.72px, 18px);
          }
        }
      }
    }

.catch{
  h3{
    font-size:clamp(20px, 0.81vw + 20.96px, 22px);
    font-weight: 700;
    line-height: 1.4;
    margin-bottom: calc(50 / 1363 * 100%);
    @media screen and (min-width: 769px) {
    font-size:clamp(24px, 0.81vw + 20.96px, 32px);
    }
  }
}
.price{
  .price-title{
     font-size:clamp(20px, 0.81vw + 20.96px, 24px);
     font-weight: 700;
    margin-bottom: calc(20 / 1363 * 100%);
    text-align: center;
    color: var(--white);
    background: 
      url(../img/priority/icon-price-tl.svg) left top no-repeat,
      url(../img/priority/icon-price-tr.svg) right top no-repeat,
      url(../img/priority/icon-price-br.svg) right bottom no-repeat,
      url(../img/priority/icon-price-bl.svg) left bottom no-repeat,
      #CC6252;
    background-size: 10%;
    line-height: 45px;
    min-height: 45px;
    display: flex;
    justify-content: center;
    align-items: first baseline;
    @media screen and (min-width: 769px) {
        font-size:clamp(24px, 0.81vw + 20.96px, 32px);
    line-height: 82px;
     min-height: 82px;
        background-size: 5%;
    }
    &.color1{
      background-color: #4480c2;
    }
    &.color2{
      background-color: #008746;
      margin-top: calc(100 / 815 * 100%);
    }
    &.color3{
      background-color: #cc6252;
      margin-top: calc(100 / 815 * 100%);
    }
    &.color4{
      background-color: #c49b4b;
      margin-top: calc(100 / 815 * 100%);
    }
    span{
      font-size:clamp(12px, 0.61vw + 17.72px, 14px);
      @media screen and (min-width: 769px) {
    font-size:clamp(14px, 0.61vw + 17.72px, 16px);
      }
    }
  }
  .price-list{

    margin-bottom: calc(20 / 815 * 100%);
    @media screen and (min-width: 769px) {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: calc(10 / 815 * 100%);
    align-items: stretch;
    }
    &.column1{
  
       @media screen and (min-width: 769px) {
     align-items: center;
       grid-template-columns: 360px 1fr;
       border-bottom: dotted 2px #aaaaaa;
       padding-bottom: calc(10 / 815 * 100%);
       }
    }
    &.column2,
    &.column3,
    &.column4,
    &.column5{
    }
    &.column0{
      align-items: center;
      grid-template-columns: 1fr;
    }
    h5{
      font-size:clamp(18px, 0.61vw + 17.72px, 22px);
      font-weight: 700;
      line-height: 1.4;
      margin-bottom: calc(20 / 815 * 100%);
    }
    .price-img,
    .price-item{
      text-align: center;
      img{
        width: 100%;
        max-width: 260px;
        height: auto;
      }
    }
    .price-text,
    .price-item{
      ul{
        text-align: justify;
        margin: 0 auto;
        display: table;
        li{
          font-size:clamp(14px, 0.61vw + 17.72px, 16px);
          line-height: 1.8;
          text-indent: -1.5rem;
          margin-left: 1.5rem;
        }
      }
    }
    .price-text{
      padding-right: calc(50 / 815 * 100%);
    }
  }
}

    }
}