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


#general{

.wrapper{
  .title{
        margin-top: calc(220 / 1363 * 100%);
                            &:after {
                        content: "";
                        display: block;
                        width: 80px;
                        height: 2px;
                        background-color: var(--gold);
                        margin: calc(70 / 1363 * 100%) auto;
                        @media screen and (min-width: 769px) {
                        height: 4px;
                        }
                    }
                  }
  
  .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(24px, 0.81vw + 20.96px, 32px);
      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) {
        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(20px, 0.61vw + 17.72px, 26px);
      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%);
  
    }
 .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;
      }
      .overview{
          text-align: left;
          @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;
            }

        }
        .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;
        }
        .table{
          width: 100%;
          border-spacing: 0;
          border-top: solid 4px #c49b4b;
          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{
               &:first-child{
                td{
                  &:first-child{
                 background: url(../img/general/icon-fan.svg) no-repeat left center;
                 background-size: 56px;
                  }
                }
                }
              td{
                border-bottom:solid 1px #c49b4b;
                padding: calc(15 / 822 * 100%) 0;
                line-height: 1.5;
                &:first-child{
                  padding-left: 60px;
                }
               
                
              }
            }
          }
        }
      }
      .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 calc(30 / 822 * 100%);
        @media screen and (min-width: 769px) {
                border: solid 4px #c49b4b;
       padding:0 calc(60 / 822 * 100%);
        }
        .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;
            }
          }
        }
      }
      }
      }
    }
}