a {
  text-decoration: none;
  }


.wrapper {
  background: rgba(213, 231, 243, 0.349);
  }
html,body {
  min-height: 100vh; 
}
.header{
  max-width: 1366px;
  margin: 0 auto;
  }
.header_inner{
  justify-content: space-around;
  display: flex; 
  align-items: center;
    }

.logo img{
  width: 95px;
  height: 95px;
  padding-top: 15px;
  padding-right: 0px;
  padding-bottom: 10px;
  padding-left: 0px;
    }
.logo:hover{
  opacity: 0.8;
   }

.nav{
  letter-spacing:3px;
  display: flex;
  align-items: center;
    }
li a{
  font-size: 16px;
  color:#333333;
  font-family: 'Noto Sans JP', sans-serif;
  display: block;
  width: 80%;
  text-align: center;
  padding: 5px 30px;
    }
li a:hover{
  opacity: 0.5;
  }
       
.oto{
  text-align:center;
    }
.oto_nav{
  display: block;
  width: 50%;
  text-align: center;
  padding: 15px 60px;
  background-color: #feb644;
  border-radius: 30px;
    }
.oto_nav{ 
  position: relative;
  box-sizing: border-box;
  width: 100%;
  margin-left: 30px;
    }
.oto_nav::after { /* くの字の表示設定 */
  content: "";
  margin: auto;
  position: absolute;
  right:  -75%;
  top: 0;
  bottom: 0px;
  left: 0px;
  width: 10px;    /* くの字を山なりに見た時、左側の長さ */
  height: 10px;   /* くの字を山なりに見た時、右側の長さ */
  border-top: 2px solid #333333;     /* くの字を山なりに見た時、左側の太さと色 */
  border-right: 2px solid #333333;   /* くの字を山なりに見た時、右側の太さと色 */
  transform: rotate(45deg);    /* くの字の向き */
      }
.oto_nav:hover{
  background-color:#feb744e0;
  border-radius: 30px;
    }  
.oto_nav {
  transition: 0.4s;
      }

button{
  display: none;
      }
  @media screen and (min-width:701px) and (max-width:960px) {
    
    #pc_nav{
      display: none;      
      }
  .logo img{
      padding-left: 20px;
          }    
  .header_inner{
      justify-content: space-between
          }

  .js-offcanvas{
      display: block;
      width: 220px;
      position: fixed;
      background-color: rgba(213, 231, 243, 0.5);
      top: 0;
      left: -200px;
      bottom: 0;
      transition: all 0.5s;
      z-index: 3;
      opacity: 0.8;
      padding: 25px;
      }
  
  .js-offcanvas ul{
      list-style: none;
     
       }
  .js-offcanvas .sp_men{
      border-bottom: 1px solid #c4c2c2;
      }
  .js-offcanvas .sp_men .sp_me .sp_il{
      margin: 0 auto;
      }
  .js-offcanvas ul li a{
      display: block;
      color: #3b43ac;
      font-size: 16px;
      font-weight: bold;
      letter-spacing: 0.1em;
      padding: 1rem;
      transition-duration: 0.4s;
      margin: 0 auto;
      }
  .sp_men .sp_me :hover{
      opacity: 0.8;
        }   
  .sp_men{
      font-family: 'Noto Sans JP', sans-serif;
      text-align: left;
      width: 50%;
      text-align: center;
      padding: 5px 35px;
      margin: 0 auto;
        }
  .sp_me{
      font-family: 'Noto Sans JP', sans-serif;
      text-align: left;
      width: 50%;
      text-align: center;
      padding: 5px 35px;
      margin: 0 auto;
      }     
  .sp_a{
      font-family: 'Noto Sans JP', sans-serif;
      display: block;
      width: 50%;
      text-align: center;
      padding: 5px 35px;
      background-color: #feb644;
      border-radius: 30px;
      margin: 0 auto;
      position: relative;
      }
   .sp_a:hover{
      background-color:#feb744e0;
      opacity: 0.7;
      border-radius: 30px;
      } 
  .sp_a::after { /* くの字の表示設定 */
      content: "";
      margin: auto;
      position: absolute;
      top: 22px;
      right:  -80%;
      left: 2px;
      width: 10px;    /* くの字を山なりに見た時、左側の長さ */
      height: 10px;   /* くの字を山なりに見た時、右側の長さ */
      border-top: 2px solid #3b43ac;     /* くの字を山なりに見た時、左側の太さと色 */
      border-right: 2px solid #3b43ac;   /* くの字を山なりに見た時、右側の太さと色 */
      transform: rotate(45deg);    /* くの字の向き */
      }
    .js-hiraku-offcanvas-body-active .js-hiraku-offcanvas-sidebar-right {
        background: #d3def1d5;   }
       

    .js-offcanvas-btn {
      display: block;
      position:  absolute;
      top: 50px;
      right: 50px;
      width: 30px;
      z-index: 3;
      cursor: pointer;
      border: none;
    }
    
    
      }
    aside.js-offcanvas {
        display: none;
      }
    .nav_sp{
        text-align: center;
       }
  @media screen and (min-width:637px) and (max-width:700px) {
    #pc_nav{
      display: none;      
      }
    .logo img{
      padding-left: 20px;
            }    
    .header_inner{
      justify-content: space-between
            } 
         
    .js-offcanvas{
      display: block;
      width: 220px;
      position: fixed;
      background-color: rgba(213, 231, 243, 0.5);
      top: 0;
      left: -200px;
      bottom: 0;
      transition: all 0.5s;
      z-index: 3;
      opacity: 0.8;
      padding: 25px;
      }
    .js-offcanvas ul{
      list-style: none;
     
       }
    .js-offcanvas .sp_men{
      border-bottom: 1px solid #c4c2c2;
      }
    .js-offcanvas ul li a{
      display: block;
      color: #3b43ac;
      font-size: 14px;
      font-weight: bold;
      letter-spacing: 0.1em;
      padding: 1rem;
      transition-duration: 0.4s;
      text-align: center;
      margin: 0 auto;
      }
    .sp_men .sp_me :hover{
      opacity: 0.8;
        }  
    .sp_men{
      font-family: 'Noto Sans JP', sans-serif;
      text-align: left;
      width: 50%;
      text-align: center;
      padding: 5px 35px;
      margin: 0 auto;
        }
    .sp_me{
      font-family: 'Noto Sans JP', sans-serif;
      text-align: left;
      width: 50%;
      text-align: center;
      padding: 5px 35px;
      margin: 0 auto;
      }      
    .sp_a{
      font-family: 'Noto Sans JP', sans-serif;
      display: block;
      width: 60%;
      text-align: center;
      padding: 5px 35px;
      background-color: #feb644;
      border-radius: 30px;
      margin: 0 auto;
      position: relative;
      }
    .sp_a:hover{
      opacity: 0.8;
      border-radius: 30px;
      } 
    .sp_a::after { /* くの字の表示設定 */
      content: "";
      margin: auto;
      position: absolute;
      right:  -80%;
      top: 20px;
      left: 2px;
      width: 10px;    /* くの字を山なりに見た時、左側の長さ */
      height: 10px;   /* くの字を山なりに見た時、右側の長さ */
      border-top: 2px solid #3b43ac;     /* くの字を山なりに見た時、左側の太さと色 */
      border-right: 2px solid #3b43ac;   /* くの字を山なりに見た時、右側の太さと色 */
      transform: rotate(45deg);    /* くの字の向き */
     }
    .js-hiraku-offcanvas-body-active .js-hiraku-offcanvas-sidebar-right {
      background: #d3def1d5;   }
    .js-offcanvas-btn {
        display: block;
        position:  absolute;
        top: 50px;
        right: 50px;
        width: 30px;
        z-index: 3;
        cursor: pointer;
        border: none;
      }
     
      } 
      
  @media screen and (min-width:574px) and (max-width:636px) { 
    #pc_nav{
      display: none;      
        }
    .logo img{
      padding-left: 20px;
                }    
    .header_inner{
      justify-content: space-between
                } 
  
  .js-offcanvas{
      display: block;
      width: 220px;
      position: fixed;
      background-color: rgba(213, 231, 243, 0.5);
      top: 0;
      left: -300px;
      bottom: 0;
      transition: all 0.5s;
      z-index: 3;
      opacity: 0.8;
      padding: 15px;
      }
  .js-offcanvas ul{
      list-style: none;
      margin: 0;
      padding: 0;
      }
  .js-offcanvas .sp_men{
      margin: 0;
      border-bottom: 1px solid #c4c2c2;
      }
  
  .js-offcanvas ul li a{
      display: block;
      color: #3b43ac;
      font-size: 14px;
      font-weight: bold;
      letter-spacing: 0.1em;
      padding: 1rem;
      transition-duration: 0.4s;
      text-align: center;
      margin: 0 auto;
      }
  .sp_a{
      font-family: 'Noto Sans JP', sans-serif;
      display: block;
      width: 70%;
      text-align: center;
      padding: 5px 35px;
      background-color: #feb644;
      border-radius: 30px;
      position: relative;
      }
  .sp_a::after { /* くの字の表示設定 */
      content: "";
      margin: auto;
      position: absolute;
      right:  -80%;
      top: 20px;
      left: 2px;
      width: 8px;    /* くの字を山なりに見た時、左側の長さ */
      height: 8px;   /* くの字を山なりに見た時、右側の長さ */
      border-top: 2px solid #3b43ac;     /* くの字を山なりに見た時、左側の太さと色 */
      border-right: 2px solid #3b43ac;   /* くの字を山なりに見た時、右側の太さと色 */
      transform: rotate(45deg);    /* くの字の向き */
      }


  .js-hiraku-offcanvas-body-active .js-hiraku-offcanvas-sidebar-right {
      background: #d3def1d5;   }
      .js-offcanvas-btn {
        display: block;
        position:  absolute;
        top: 50px;
        right: 50px;
        width: 30px;
        z-index: 3;
        cursor: pointer;
        border: none;
      }
    
      }
  @media screen and (min-width:481px) and (max-width:573px){
    #pc_nav{
      display: none;      
      }
    .logo img{
      padding-left: 20px;
                  }    
    .header_inner{
      justify-content: space-between
                  }   
  .js-offcanvas{
      display: block;
      width: 220px;
      position: fixed;
      background-color: rgba(213, 231, 243, 0.5);
      top: 0;
      left: -300px;
      bottom: 0;
      transition: all 0.5s;
      z-index: 3;
      opacity: 0.8;
      padding: 15px;
      }
    
  .js-offcanvas ul{
      list-style: none;
      margin: 0;
      padding: 0;
      }
  .js-offcanvas .sp_men{
      margin: 0;
      border-bottom: 1px solid #c4c2c2;
      }

  .js-offcanvas ul li a{
      display: block;
      color: #3b43ac;
      font-size: 14px;
      font-weight: bold;
      letter-spacing: 0.1em;
      padding: 1rem;
      transition-duration: 0.2s;
      text-align: center;
      }
  .sp_a{
    font-family: 'Noto Sans JP', sans-serif;
    display: block;
    width: 70%;
    text-align: center;
    padding: 5px 35px;
    background-color: #feb644;
    border-radius: 30px;
      }
  .sp_a::after {
      content: "";
      margin: auto;
      position: absolute;
      right:  -40%;
      top: 521px;
      left: 2px;
      width: 8px;    /* くの字を山なりに見た時、左側の長さ */
      height: 8px;   /* くの字を山なりに見た時、右側の長さ */
      border-top: 2px solid #3b43ac;     /* くの字を山なりに見た時、左側の太さと色 */
      border-right: 2px solid #3b43ac;   /* くの字を山なりに見た時、右側の太さと色 */
      transform: rotate(45deg);    /* くの字の向き */
      }


  .js-hiraku-offcanvas-body-active .js-hiraku-offcanvas-sidebar-right {
      background: #d3def1d5;   }
      .js-offcanvas-btn {
        display: block;
        position:  absolute;
        top: 50px;
        right: 50px;
        width: 30px;
        z-index: 3;
        cursor: pointer;
        border: none;
      }
      }
      @media screen and (max-width:480px) {  
        .logo img{
          width: 90px;
          height: 90px;
          padding-top: 15px;
          padding-right: 0px;
          padding-bottom: 10px;
          padding-left: 25px;
        }
        .logo img{
          position: absolute;
            }
            #pc_nav{
              display: none;      
              }
            .logo img{
              padding-left: 20px;
                          }    
            .header_inner{
              justify-content: space-between
                          }   
          .js-offcanvas{
              display: block;
              width: 220px;
              position: fixed;
              background-color: rgba(213, 231, 243, 0.5);
              top: 0;
              left: -300px;
              bottom: 0;
              transition: all 0.5s;
              z-index: 3;
              opacity: 0.8;
              padding: 15px;
              }
            
          .js-offcanvas ul{
              list-style: none;
              margin: 0;
              padding: 0;
              }
          .js-offcanvas .sp_men{
              margin: 0;
              border-bottom: 1px solid #c4c2c2;
              }
        
          .js-offcanvas ul li a{
              display: block;
              color: #3b43ac;
              font-size: 14px;
              font-weight: bold;
              letter-spacing: 0.1em;
              padding: 1rem;
              transition-duration: 0.2s;
              text-align: center;
              }
          .sp_a{
            font-family: 'Noto Sans JP', sans-serif;
            display: block;
            width: 70%;
            text-align: center;
            padding: 5px 35px;
            background-color: #feb644;
            border-radius: 30px;
              }
          .sp_a::after {
              content: "";
              margin: auto;
              position: absolute;
              right:  -40%;
              top: 220px;
              left: 2px;
              width: 8px;    /* くの字を山なりに見た時、左側の長さ */
              height: 8px;   /* くの字を山なりに見た時、右側の長さ */
              border-top: 2px solid #3b43ac;     /* くの字を山なりに見た時、左側の太さと色 */
              border-right: 2px solid #3b43ac;   /* くの字を山なりに見た時、右側の太さと色 */
              transform: rotate(45deg);    /* くの字の向き */
              }
          .js-hiraku-offcanvas-body-active .js-hiraku-offcanvas-sidebar-right {
              background: #d3def1d5;   }
          .js-offcanvas-btn {
            display: block;
            position:  absolute;
            top: 30px;
            right: 30px;
            width: 30px;
            z-index: 3;
            cursor: pointer;
            border: none;
          }
         
        }  

   .main-visual{
      max-width: 1195px;
      margin: 0 auto;
      position: relative;
    }
   .main-visual img{
      width:100%; 
    }


   .service{
      font-size: 36px;
      font-family:"游明朝";
      font-weight: 500;
      line-height: 2;
      letter-spacing : 3px;
      color: #3b43ac;
      text-shadow: 
      0 0 30px white, 
      0 0 30px white, 
      0 0 30px white, 
      0 0 30px white;
      text-align: center;
      position: absolute;
      bottom: -115px;
      left: 0;
      right: 0;
      margin: 0;
    }
    .logo_sp{
      display: none;     
     }   
  .special{
      font-size: 55px;
      font-family:"游明朝";
      text-shadow:
      0 0 10px white,
      0 0 20px white,
      0 0 30px white,
      0 0 40px white,
      0 0 50px white,
      0 0 60px white;
      }
      .main-visual_sp {
        display: none;  }


  @media screen and (min-width:582px) and (max-width:800px){
    .service{
      font-size: 28px;
      }
    .special{
      font-size: 36px;
      }
        }
  @media screen and (min-width:480px) and (max-width:581px){
    .service{
      font-size: 18px;
      bottom: -200px;
      }
    .special{
      font-size: 28px;
      }
      }
    



      .news{
        max-width: 1077px;
        margin: 0 auto;
        padding: 200px 100px 100px 50px;
        text-align: center
        }
      .news-box{
        margin:0 auto;
        padding:33px 0px 0px 0px;
        letter-spacing : 3px;
        display: flex;
        }
      .news-box h2{
        font-family: 'Noto Sans JP', sans-serif;
        font-weight: 500;
        font-size:40px;
        color:#333333;
        padding: 30px 50px 0px 0px;
        white-space: nowrap;
       }
       .news-box  .wrap{
        /*min-width: 900px;*/
        width: 100%;
       }   
       .fac1:first-of-type{
        border-top:none;
        }
    dl{
        border-top: 1px dotted #ccc;
        width: 100%;
        display: flex;
        padding:35px 0px 35px 0px;
        font-size: 12px;
        }
    dl dt{
        color:#333333;
        margin-right: 50px;
        float: left;
        }
    dl dd{
        font-family: 'Noto Sans JP', sans-serif;
        font-size: 16px;
        color:#333333;
        padding:0px 50px 0px 0px;
        }
       a dl:hover{
        opacity: 0.6;
        }
      .fac:hover{
        opacity: 0.6;
          }
      .fac1:hover{
        opacity: 0.6;
            }
      dl{
        position: relative;
          }
      .fac::after { /* くの字の表示設定 */
        content: "";
        margin: auto;
        position: absolute;
        right: 0;
        top: 0;
        bottom: 0px;
        width: 10px;    /* くの字を山なりに見た時、左側の長さ */
        height: 10px;   /* くの字を山なりに見た時、右側の長さ */
        border-top: 2px solid #3b43ac;     /* くの字を山なりに見た時、左側の太さと色 */
        border-right: 2px solid #3b43ac;   /* くの字を山なりに見た時、右側の太さと色 */
        transform: rotate(45deg);    /* くの字の向き */
        }
      .fac1::after { /* くの字の表示設定 */
        content: "";
        margin: auto;
        position: absolute;
        right: 0;
        top: 0;
        bottom: 0px;
        width: 10px;    /* くの字を山なりに見た時、左側の長さ */
        height: 10px;   /* くの字を山なりに見た時、右側の長さ */
        border-top: 2px solid #3b43ac;     /* くの字を山なりに見た時、左側の太さと色 */
        border-right: 2px solid #3b43ac;   /* くの字を山なりに見た時、右側の太さと色 */
        transform: rotate(45deg);    /* くの字の向き */
      }
      .fac1, .fac{ 
        text-align: left;
        line-height: 1.5;
      }

    @media screen and (max-width:1320px) {      
      .news-box{
        padding:33px 0px 0px 30px;
        }
      .news-box  .wrap{
        min-width: 400px;
        width: 100%;
         }  
      dl{
        padding:35px 20px 35px 0px;
        }
        }
    @media screen and (max-width:1250px) {
      .news-box{
        padding:33px 0px 0px 20px;
        }
      .news-box  .wrap{
        min-width: 300px;
        width: 100%;
           } 
      dl{
        padding:35px 20px 35px 0px;
        }
        }
    @media screen and (max-width:1160px) {
    .news-box h2{
      padding: 30px 100px 0px 0px;
     }
            }
     @media screen and (max-width:1100px) {
      .news-box h2{
        font-size:38px;
        padding: 30px 80px 0px 0px;
               }
          }         
    @media screen and (max-width:1070px) {
      .news-box h2{
        font-size:36px;
        padding: 30px 60px 0px 0px;
          }
      .news-box  .wrap{
        min-width: 600px;
        width: 100%;
          }   
        }
    @media screen and (max-width:1020px) {
      .news-box h2{
        font-size:34px;
        padding: 30px 60px 0px 0px;
          }
      dl{
        padding:35px 20px 35px 0px;
            }
            }   
    @media screen and (max-width:970px) {
      .news-box h2{
        font-size:32px;
        padding: 30px 40px 0px 0px;
          }
      .news-box  .wrap{
        min-width: 500px;
        width: 100%;
        }  
      dl{
        padding:35px 20px 35px 0px;
            }
        }     
    @media screen and (max-width:900px) {
      .news-box h2{
        padding: 30px 30px 0px 0px;
          }
      dl{
        padding:35px 20px 35px 0px;
            } 
        }
    
      @media screen and (max-width:850px) {
        .news-box{
          padding:33px 0px;
          }
        .news-box h2{
          font-size: 30px
              }   
       
          }
      @media screen and (max-width:800px) {
        .news-box h2{
          font-size: 28px
              }   
        dl dd{
          font-size: 14px;
        }
              }     
      @media screen and (max-width:740px) {
        .news{
          padding: 200px 80px 100px 80px;
          text-align: center
          }
        .news-box h2{
          padding: 30px 30px 0px 0px;
                } 
        dl{
          padding:35px 0px 35px 0px;
             }          
        .news-box{           
          display:block; 
        }      
      }
      @media screen and (max-width:630px) {
        .news{
          padding: 200px 30px 120px 30px;
          }    
            }
      @media screen and (max-width:560px) {
      .news-box  .wrap{
          min-width: 400px;
          width: 100%;
          }
      dl dt {
          margin-right: 50px;
              }
                  }


        .cp1 { 
          max-width: 1366px;
          margin: 0 auto;
          display: flex; 
          justify-content: flex-start;
          letter-spacing : 3px;
        }
        .cp1 {
          position: relative;
        }
        .cp1 img {
          width: 100%;
          height: auto;
          }
        .cp1::after {
          width: calc(100% - 268px);
          height: calc(100% - 250px);
          content: "";
          background: #d3def1;
          position: absolute;
          top: 120px;
          left: 0;
          z-index: -1;
        }
        .cp h2{
          font-family: 'Noto Sans JP', sans-serif;
          font-size: 40px;
          padding: 280px 0 0 0;
          font-weight: 500;
          color: #3b43ac;
        }
       .cpp{
          word-break:keep-all;
          }
        .cpp{
          font-family: 'Noto Sans JP', sans-serif;
          font-size: 16px;
          color:#333333;
          padding: 80px 0px 80px 0;
          line-height: 30px
        }
        .btn_arrow:hover{
          opacity: 0.5;
             }
          .btn_arrow{
          transition: 0.4s;
          }
       
       .cpl{
          margin-left: auto;
          padding: 0px 0px 250px 0px;
          }
        .cp1 {
          flex: 1;
          }
        .btn_arrow{
            display: table;
            position: relative;
            font-size: 18px;
            color: #3b43ac;
            text-align: center;
            text-decoration: none;
            box-sizing: border-box;
            font-family: 'Noto Sans JP', sans-serif;
            padding: 20px 80px;
            background: #ffffff;
            border-radius: 40px;
        }
       
        .btn_arrow::after {
            position: absolute;
            top: 50%;
            right: 2em;
            width: 0.6em;
            height: 0.6em;
            transform: translateY(-50%) rotate(45deg);
            border-right: 2px solid currentColor;
            border-top: 2px solid currentColor;
            content: "";
        }
        .cp,.pl1,.w {
          width: 70%;
          padding-left: 10%;

        }
  
 @media screen and (max-width:1280px) {
    .cp1 { 
      max-width: 1280px;
      }
    }
  @media screen and (max-width:1174px) {
   
    .cp h2{
      font-size: 35px;
      padding: 260px 0 0 0;
      }
    .cpp{
      padding: 80px 0px 80px 0;
      }
    }
  @media screen and (max-width:1007px) {  
    .cpl{
        margin-left: auto;
        padding: 0px 0px 250px 0px;
        }  
      }
  @media screen and (max-width:980px) {  
    .btn_arrow {
      font-size: 16px;
       }
      }
  @media screen and (max-width:907px){
      .cp h2{
        padding: 240px 0 0 0;
            }
      .cp, .pl1, .w {
        width: 60%;
        padding-left: 10%;
          }
          }
  @media screen and (max-width:860px){
      .cp h2{
        font-size: 30px;
          }
      .cpp{
        font-size: 14px;
        }
      }
  @media screen and (max-width:825px) { 
    .cp1::after {
      width: calc(100% - 150px);
      height: calc(100% - 200px);
    }
  }
  @media screen and (max-width:816px) { 
    .cp1::after {
      width: calc(100% - 150px);
      height: calc(100% - 150px);
    }
  }


  @media screen and (max-width:789px) { 
    .cp1::after {
        width: calc(100% - 150px);
        height: calc(100% - 220px);
        }  
    .cp,.pl1,.w {
        width: 50%;
        padding-left: 10%;

        }  
  }
  @media screen and (max-width:762px){
    .cp h2{
      padding: 220px 0 0 0;
          }
  }


  @media screen and (max-width:740px) {  
  .cp,.pl1,.w {
    width: 50%;
    padding-left: 5%;
    } 
  }
  @media screen and (max-width:730px) {  
    .cpl{
      margin-left: auto;
      padding: 0px 0px 300px 0px;
      }
      .cp h2{
        font-size: 28px;
        }
      }
    @media screen and (max-width:702px) {
      .cp h2{
        font-size: 26px;
        padding: 240px 0 0 0;
          }
        }
    @media screen and (max-width:693px) {
      .btn_arrow {
        font-size: 14px;
      }
      .btn_arrow{
        width: 90%;
        padding: 20px 50px;
            }   
    }
    @media screen and (max-width:676px) {
      .cp,.pl1,.w {
        padding-left: 5%;
      }
      .cp {
        width: 50%;
        padding-right: 0%;
      }
      .cp1::after {
        width: calc(100% - 100px);
        height: calc(100% - 250px);
        }
      .cp h2{
        font-size: 24px;
        padding: 220px 0 0 0;
          }
      .cpp{
        padding: 60px 0px;
          }       
    }
   
    @media screen and (max-width:640px) {
      .cp h2{
        font-size: 20px;
        padding: 200px 0 0 0;
        }
      .cpp{
          font-size: 12px;
          line-height: 25px
          }
      .cpp{
        display: inline-block;
            }    
      .cp2{
          padding: 20px 45px;
            }
     
        .cp1::after {
          width: calc(100% - 200px);
          height: calc(100% - 340px);
              }        
         }
      @media screen and (max-width:620px) {  
        .btn_arrow{
          width: 100%;
              }
        .cp h2{
          padding: 180px 0 0 0;
              }  
        .cp {
          width: 50%;
          padding-right: 5%;
              }             
      }
      @media screen and (max-width:600px) {  
        .cp h2{
          padding: 170px 0 0 0;
              }  
        .cp1::after {
          width: calc(100% - 140px);
          height: calc(100% - 260px);
              }
      }
      @media screen and (max-width:585px) { 
        .cp1::after {
          width: calc(100% - 120px);
          height: calc(100% - 240px);
        }
        .cpl{
          margin-left: auto;
          padding: 0px 0px 280px 0px;
            }   
        .cp h2{
          padding: 200px 0 0 0;
                  }  
         
      }
      @media screen and (max-width:550px) { 
        .cp1::after {
          width: calc(100% - 100px);
          height: calc(100% - 210px);
        }
       
      }
      @media screen and (max-width:540px) { 
        .cp h2{
          padding: 180px 0 0 0;
              }  
        }
      
      @media screen and (max-width:500px) { 
        .cp h2{
          padding: 170px 0 0 0;
              }   
        .cp1::after {
          width: calc(100% - 100px);
          height: calc(100% - 160px);
              }  
      }


   
   .pl0 { 
      max-width: 1366px;
      margin: 0 auto;
      display: flex; 
      justify-content: flex-start;
      letter-spacing : 3px;
      }
   .pl0 {
      position: relative;
      }
   .pl0::after {
      width: calc(100% - 268px);
      height: calc(100% - 250px);
      content: "";
      background: #d3def165;
      position: absolute;
      top: 120px;
      left: 268px;
      z-index: -1;
      }
    .pl0 {
      overflow: hidden;
    }
    .pl1{
      padding-left: 10%;
      padding-right: 10%;
      } 
    .pl0 {
      flex: 1; 
    }
    .pl2{
      font-family: 'Noto Sans JP', sans-serif;
      font-size: 40px;
      padding: 260px 0 0 0;
      font-weight: 500;
      color: #3b43ac;
      }
    .pl3{
      font-family: 'Noto Sans JP', sans-serif;
      font-size: 16px;
      color:#333333;
      padding: 80px 0px 80px 0;
      line-height: 30px
      }
      .pl3{
        word-break:keep-all;
        }
  
    .pl5{
      padding: 0px 0px 300px 0px;
      text-align: left;
      } 
    .pl5 img {
      width: 100%;
      height: auto;
      }
     
  @media screen and (max-width:1140px) {
     
      .pl2{
          font-size: 35px;
          padding: 240px 0 0 0;
          }
      .pl3{
          padding: 80px 0px;
          }
        }
      @media screen and (max-width:960px) {    
        .pl0::after {
          width: calc(100% - 180px);
          height: calc(100% - 250px);
        }
        .pl5{
          padding: 0px 0px 280px 0px;
          text-align: left;
          }  
      }
      @media screen and (max-width:945px) {
        .pl2{
          padding: 230px 0 0 0;
          }
        .pl3{
          padding: 80px 0px;
          }  
        .pl0::after {
          width: calc(100% - 200px);
          height: calc(100% - 220px);
          }   
       }
    @media screen and (max-width:880px){
      .pl0::after {
        width: calc(100% - 200px);
        height: calc(100% - 150px);
      }   
                }
         
    @media screen and (max-width:860px){
        .pl2{
          font-size: 30px;
              }
        .pl2{
          font-size: 30px;
          padding: 240px 0 0 0;
                }    
            }
        .pl0::after {
          width: calc(100% - 200px);
          height: calc(100% - 200px);
            }      
    @media screen and (max-width:860px){
      .pl3{
        font-size: 14px;
        }

    }
    @media screen and (max-width:820px) {
      .pl0::after {
        top: 150px;
          }
        }
    @media screen and (max-width:745px) {
      .pl1 {
        padding-left: 10%;
        padding-right: 5%;
       }
      }
    @media screen and (max-width:735px) {
      .pl0::after {
        width: calc(100% - 200px);
        height: calc(100% - 240px);
        top: 120px;
        left: 200px;
          }
      .pl5{
        padding: 0px 0px 350px 0px;
        text-align: left;
            }      
    }
    @media screen and (max-width:730px) {  
      .pl2{
        font-size: 28px;
            }
    }
    @media screen and (max-width:717px) {  
      .pl1 {
        padding-left: 5%;
        padding-right: 5%;
    }
    }
    @media screen and (max-width:702px) {  
      .pl2{
        font-size: 26px;
            }
    }
    @media screen and (max-width:685px) {
        .pl0::after {
          width: calc(100% - 200px);
          height: calc(100% - 300px);
          left: 200px;
            }
        .pl2{
          font-size: 28px;
          padding: 220px 0px 60px 0;
        }
        .pl3{
          padding: 20px 30px 60px 0;
          }
        .pl{
          width: 55%;
          padding: 20px 45px;
          }
      }
      @media screen and (max-width:674px) {
        .pl1{
          padding-left: 5%;
          padding-right: 5%;
          }  
        .pl1 {
          width: 50%;
          padding-right: 5%;
          }
        .pl0::after {
          width: calc(100% - 200px);
          height: calc(100% - 300px);
          }
      } 
      @media screen and (max-width:650px) {
        .pl0::after {
          width: calc(100% - 200px);
          height: calc(100% - 280px);
        }
      }
      @media screen and (max-width:640px) {
        .pl2{
          font-size: 20px;
          padding: 200px 0 0 0;
              } 
        .pl3{
          font-size: 12px;
          padding: 50px 0px;
            }
        .pl0::after {
          width: calc(100% - 200px);
          height: calc(100% - 360px);
            }  
      }
      @media screen and (max-width:610px) {
        .pl0::after {
          width: calc(100% - 200px);
          height: calc(100% - 280px);
        }
        .pl5{
          padding: 0px 0px 300px 0px;
          text-align: left;
              }  
      }
      @media screen and (max-width:570px) {
        .pl0::after {
          width: calc(100% - 80px);
          height: calc(100% - 260px);
        }
        .btn_arrow{
          width: 110%;
              }
        .btn_arrow_wt{
          width: 90%;
        }
      }
      @media screen and (max-width:535px) {
        .pl5{
          padding: 0px 0px 350px 0px;
          text-align: left;
              }  
      }


      .wt {
        max-width: 1366px;
        margin: 0 auto;
        display: flex; 
        justify-content: flex-start;
        letter-spacing : 3px;
        }
      .wt {
        position: relative;
        }
      .wt {
        flex: 1; 
        }
      .wt::after {
        width: calc(100% - 268px);
        height: calc(100% - 250px);
        content: "";
        background: #d3def1;
        position: absolute;
        top: 100px;
        left: 0;
        z-index: -1;
        }
      .wh{
        font-family: 'Noto Sans JP', sans-serif;
        font-size: 40px;
        padding: 250px 0 0 0;
        font-weight: 500;
        color: #3b43ac;
        line-height: 50px
        }
      .wp{
        font-family: 'Noto Sans JP', sans-serif;
        font-size: 16px;
        color:#333333;
        padding: 80px 0px;
        line-height: 30px
        }
      .wp{
        word-break:keep-all;
          }
      .wl{ 
        padding: 0px 0px 400px 0px;
        }
      .wl img{
          width:100%; 
        }
 
  @media screen and (max-width:1280px) {
    .wt {
      max-width: 100%;
      }
    .wt::after {
      width: calc(100% - 268px);
      height: calc(100% - 250px);
        }  
      }
  @media screen and (max-width:1215px) {
    .wh{
      font-size: 38px;
      }
  }
  @media screen and (max-width:1195px) {
    .wt::after {
      width: calc(100% - 268px);
      height: calc(100% - 150px);
        } 
    .wh{
      padding: 250px 0 0 0;
          }    
  }
  @media screen and (max-width:1140px) {
   .wh{
      font-size: 35px;
        }
    .wt::after {
      width: calc(100% - 268px);
      height: calc(100% - 200px);
            } 
      }   
  @media screen and (max-width:980px) {
    .wt::after {
      width: calc(100% - 268px);
      height: calc(100% - 180px);
              } 
    .wh{
      font-size: 32px;
        }
      }
  @media screen and (max-width:880px) {
    .wt::after {
      width: calc(100% - 200px);
      height: calc(100% - 150px);
                  } 
          }
  @media screen and (max-width:860px) {
    .wt::after {
      width: calc(100% - 180px);
      height: calc(100% - 200px);
            } 
    .wl{ 
      padding: 0px 0px 480px 0px;
          }
    .wp{
      font-size: 14px;
            }
    .wh{
      font-size: 30px;
        } 
    .wh{
      padding: 220px 0 0 0;
          }        
        }
  @media screen and (max-width:839px) {
    .wh{
      font-size: 28px;
      line-height: 40px;
         }  
        }    
  @media screen and (max-width:800px) {
    .wt::after {
      width: calc(100% - 180px);
      height: calc(100% - 200px);
          } 
           
              }
  @media screen and (max-width:740px) {
    .wt::after {
      width: calc(100% - 150px);
      height: calc(100% - 180px);
                      } 
    .wh{
      font-size: 28px;
                     }          
                  }
  @media screen and (max-width:640px) {
    .wt::after {
      width: calc(100% - 150px);
      height: calc(100% - 300px);
          }    
    .w {
      width: 50%;
      padding-right: 5%;
          }         
    .wh{
      font-size: 20px;
      line-height: 30px;
        }       
    .wp{
      font-size: 12px;
      padding: 50px 0px 50px 0px;
          }     
    .wh{
      padding: 180px 0 0 0;
                }           
            }
  @media screen and (max-width:586px) {
    .wt::after {
      width: calc(100% - 150px);
      height: calc(100% - 250px);
        }    
      }
  @media screen and (max-width:573px) {
    .wt::after {
      width: calc(100% - 150px);
      height: calc(100% - 250px);
            }    
    .wh{
      padding: 170px 0 0 0;
                        }               
          }
  @media screen and (max-width:558px) {
    .wh{
      padding: 160px 0 0 0;
            }               
          }
  @media screen and (max-width:539px) {
    .wh{
      padding: 140px 0 0 0;
            }  
       }
  .aside{
    max-width: 1246px;
    margin: 0 auto;
    justify-content: space-between;
      }
 .aside { 
      display: flex; 
     }
  .aside img {
    width: 100%;
    height: auto;
      }
  .aside .wrap {
    max-width: 400px;
    width: calc(33% - 20px);
    background: #d3def165;
      }
  .text-wrap {
    padding-left: 20px;
    padding-right: 20px;
      }
@media screen and (max-width:1246px) {
  .aside{
    max-width: 1146px;
    margin: 0 auto;
    justify-content: space-between;
      }
}
@media screen and (max-width:1126px) {
  .aside{
    max-width: 1036px;
    margin: 0 auto;
    justify-content: space-between;
      }
}
@media screen and (max-width:1006px) {
  .aside{
    max-width: 926px;
    margin: 0 auto;
    justify-content: space-between;
      }
}
@media screen and (max-width:886px) {
  .aside{
    max-width: 816px;
    margin: 0 auto;
    justify-content: space-between;
      }
}
@media screen and (max-width:766px) {
  .aside{
    max-width: 706px;
    margin: 0 auto;
    justify-content: space-between;
      }
}
@media screen and (max-width:700px) {

  .aside{
    display: block; 
      }
  .aside img {
    width: 100%;
    height: 100%;
    object-fit: cover;
      }    
  .aside .wrap {
      max-width: 100%;
      width: calc(100% - 0px);
      height: calc(100% - 0px);
      background: #d3def165;
      margin: 0 auto;
      }
 
  .text-wrap {
      padding-left: 0px;
      padding-right: 0px;
        }
}


.gallery{
  letter-spacing : 3px;
  line-height: 25px
  }
.gallery h2{
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 24px;
  color: #3b43ac;
  font-weight: 600;
  text-align: center;
  }   
.gallery p {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 14px;
  color:#333333;
  }
.btn_arrow_1 {
  position: relative;
  }

.btn_arrow_1 {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 18px;
  color: #3b43ac;
  text-align: center;
  display: block;
  width: 70%;
  text-align: center;
  padding: 10px 20px;
  background: #ffffff;
  border-radius: 30px;
  top: 0px;
  left:0;
  right:  0;
  margin: auto;
 
  }
.btn_arrow_1::after{ /* くの字の表示設定 */
  content: "";
  margin: auto;
  position: absolute;
  right:  -80%;
  top: 0;
  bottom: 0px;
  left: 0px;
  width: 8px;    /* くの字を山なりに見た時、左側の長さ */
  height: 8px;   /* くの字を山なりに見た時、右側の長さ */
  border-top: 2px solid #3b43ac;     /* くの字を山なりに見た時、左側の太さと色 */
  border-right: 2px solid #3b43ac;   /* くの字を山なりに見た時、右側の太さと色 */
  transform: rotate(45deg);    /* くの字の向き */
  }
  .btn_arrow_1:hover{
  opacity: 0.5;
     }
  .btn_arrow_1{
  transition: 0.4s;
  /*-webkit-transition: 1.5s;
  -moz-transition: 1.5s;
  -o-transition: 1.5s;*/
    }  
p.dan {
  padding: 50px 0px 0px 0px;
  }
.inner{
    padding: 20px 30px 50px 30px;
  } 
.gallery .text-area,
.process .text-area,
.order .text-area {
  margin-top: 50px;
}
  @media screen and (max-width:1120px) {
    .gallery br {display: none;}
  }
 
  @media screen and (max-width:1017px) {
    .gallery h2{
      font-size: 22px;
      }   
  }

  @media screen and (max-width:950px) {
  .btn_arrow_1 {
    font-size: 16px;
    }
  }
  @media screen and (max-width:912px) {
    .gallery{
      letter-spacing : 1px;
      }
      .gallery br {display: none;} 
  }  
 
  @media screen and (max-width:750px) {
  .gallery{
    letter-spacing : 3px;
    line-height: 20px
    }
  .gallery h2{
    font-size: 18px;
    }   
 
  .btn_arrow_1 {
      
      width: 60%;
      padding: 10px 30px;
      
      }  

  }

 @media screen and (max-width:700px) {
  .gallery_to{
      display: flex;  }
  .gallery{
      letter-spacing : 3px;
      line-height: 20px
        }
  .gallery_ma{
      width: 50%;
        }      
  .gallery h2{
      font-size: 22px;
        }   
  .gallery p{
      line-height: 30px
        }
  .gallery br {display: none;}  
          }
  .btn_arrow_1 {
      font-size: 14px;
            }  

@media screen and (max-width:700px) {          
  .inner {
      padding: 50px 30px 50px 30px;
      box-sizing: border-box;
      width: 50%;
            } 
          }     
@media screen and (max-width:640px) { 
  .gallery h2{
    font-size: 20px;
    }  
            }   



  .process{
      letter-spacing : 3px;
      line-height: 25px
      }
  .process_to{
        flex-direction: row-reverse;
      }

  .process h2{
      font-family: 'Noto Sans JP', sans-serif;
      font-size: 24px;
      color: #3b43ac;
      font-weight: 600;
      text-align: center;
      }   
  .process p{
      font-family: 'Noto Sans JP', sans-serif;
      font-size: 14px;
      color:#333333;
      }
  .process {
      position: relative;
      }
    
   
  @media screen and (max-width:1210px) {
      .process br {display: none;}
          }

      @media screen and (max-width:1017px) {
        
        .process{
          letter-spacing : 1px;
          }
        .process h2{
          font-size: 22px;
            } 
      }  
    
      @media screen and (max-width:750px) {
      .process{
        letter-spacing : 3px;
        line-height: 20px
        }
    .process h2{
        font-size: 18px;
        }   
    .process {
        position: relative;
        }
      }
    @media screen and (max-width:700px) {
      .process_to{
            display: flex; 
            flex-direction: row-reverse; 
            }   
      .process_ma{
            width: 50%;
             } 
        .process{
            letter-spacing : 3px;
            line-height: 20px
            }
        .process h2{
            font-size: 22px;
            }   
        .process p{
            line-height: 30px
            }
        .process {
            position: relative;
             }
      .process br {display: none;} 
              }
    @media screen and (max-width:640px) {
      .process h2{
        font-size: 20px;
        line-height:1.5;
        }   
    }


    .order{
      letter-spacing : 3px;
      line-height: 25px
      }
    .order h2{
      font-family: 'Noto Sans JP', sans-serif;
      font-size: 24px;
      color: #3b43ac;
      font-weight: 600;
      text-align: center;
   
      }   
    .order p{
      font-family: 'Noto Sans JP', sans-serif;
      font-size: 14px;
      color:#333333;
      margin-bottom: auto;
      }
  @media screen and (max-width:1210px) {
    .order br {display: none;} 
  }
    @media screen and (max-width:1017px) {
      .order h2{
        font-size: 22px;
        }   
       }
    @media screen and (max-width:912px) {
      .order{
        letter-spacing : 1px;
          }
            }
  @media screen and (max-width:878px) {  
    .order h2{
      font-size: 22px;
      }   
  }
  @media screen and (max-width:825px) {
    .order{
      letter-spacing : 1px;
      }
      .order br {display: none;}
      }

  @media screen and (max-width:750px) {
      .order{
        letter-spacing : 3px;
        line-height: 20px
        }
    .order h2{
        font-size: 18px;
        }   
    .order {
        position: relative;
        }

      }
  @media screen and (max-width:700px) {
     .order_to{
            display: flex;  }
        .order_ma{
            width: 50%;
               }    
        .order{
            letter-spacing : 3px;
            line-height: 20px
            }
        .order h2{
            font-size: 22px;
             }   
        .order p{
            line-height: 30px
            }
        .order {
            position: relative;
            }
      .order br {display: none;} 
        }
  @media screen and (max-width:640px) {
    .order h2{
      font-size: 20px;
      line-height:1.5;
       }  
  }
  @media screen and (max-width:480px) {
        .pc_news{
          display: none; }
             }
       .sp_news{
        display: none;
      } 
    

   .foot{
      max-width: 1366px;
      margin: 0 auto;
      display:flex ;
      }
    .footer {
      position: relative;
      background: #d3def1c5;
      margin-top: 280px;
      margin: 280px auto 0;
      }
     
    .footer:after {
      width: 100%;
      height:  70px;
      content: "";
      background-image: url("../img/footer.png");
      background-repeat: no-repeat;
      background-size: cover;
      position: absolute;
      top: -70px;
      left: 0;
      right: 0;
      margin: 0;
      }
    
    
    .logo_f{
      padding-top: 45px;
      padding-right: 195px;
      padding-bottom: 100px;
      padding-left: 85px;
    }
    .logo_ff:hover{
      opacity: 0.8;
       }   
    .logo_ff{
      width: 115px;
      height: 115px;
    }
    .li_li{
      font-family: 'Noto Sans JP', sans-serif;
      font-size: 16px;
      font-weight: 500;
      letter-spacing : 3px;
      color:#333333;
      line-height: 2;
      padding-top: 70px;
      padding-right: 0px;
      padding-bottom: 100px;
      padding-left: 150px;
      display: flex; 
      list-style-type: none;
    }
    ul {
      list-style:none
    }
    .li1 a{
      text-align: left;
    }
    .li2 a{
      text-align: left;
    }
   
    .sn_f{
      margin-top: 70px;
      margin-right: 0px;
      margin-bottom: 100px;
      margin-left: 150px;
      display: flex;
      justify-content: center;
      }
     .sns_f{ 
      width: 35px;
      height: 35px;
     }
   
    .sns_f:hover{
      opacity: 0.6;
         } 

    .sns_i{ 
      width: 35px;
      height: 35px;}
    .in_link{
      margin-right: 15px;
      margin-left: 25px;
      }  
    .sns_i:hover{
      opacity: 0.6;
         } 

    .sns_m{ 
      width: 35px;
      height: 35px;}
    .ame_link{
      margin-right: 15px;
      margin-left: 10px;
      } 
    
    .sns_m:hover{
      opacity: 0.6;
         } 

    .copy{
      font-family: 'Noto Sans JP', sans-serif;
      font-size: 12px;
      color:#333333;
      text-align:center;
      height:30px;
      line-height:30px;
      } 
      .fa_link,.in_link,.ame_link{
        display: block;
        height: 35px;
        }
  @media screen and (max-width:1280px) {
    .foot{
      max-width: 1280px;
      }
      .li_li{
      padding-left: 100px;
      }
      }
    @media screen and (max-width:1182px) {
      .li_li{
        padding-left: 60px;
        }

    }
    @media screen and (max-width:1156px) {
      .sn_f{ 
        margin-top: 70px;
        margin-right: 0px;
        margin-bottom: 100px;
        margin-left: 120px;
        }
          }
    
    @media screen and (max-width:1107px) {
      .logo_f{
        padding-right: 70px;
        padding-left: 50px;
          }
      .li_li{
        padding-left: 170px;
            }
      .sn_f{ 
        margin-top: 70px;
        margin-right: 0px;
        margin-bottom: 100px;
        margin-left: 110px;
          }
          }
    @media screen and (max-width:1045px) {
      .sn_f{ 
        margin-top: 70px;
        margin-right: 0px;
        margin-bottom: 100px;
        margin-left: 90px;
        }
    }
    @media screen and (max-width:1032px) {
      .li_li{
        padding-left: 150px;
            }
          }
    @media screen and (max-width:1005px) {       
          .sn_f{ 
            margin-top: 70px;
            margin-right: 0px;
            margin-bottom: 100px;
            margin-left: 80px;
            }
          }
    @media screen and (max-width:994px) {
      .li_li{
        padding-left: 130px;
            }
              }  
    @media screen and (max-width:975px) {           
      .sn_f{ 
        margin-top: 70px;
        margin-right: 0px;
        margin-bottom: 100px;
        margin-left: 60px;
        }   

           }
    @media screen and (max-width:953px) {
      .logo_f{
        padding-right: 60px;
          }
      .li_li{
        padding-left: 90px;
                }
          }
    @media screen and (max-width:912px) {
      .foot{
        max-width: 912px;
          }
      .logo_f{
        padding-right: 10px;
        padding-left: 30px;
        }
      .li_li{
        padding-right: 50px;
        padding-left: 120px;
              }
      .sn_f{ 
        margin-top: 70px;
        margin-right: 0px;
        margin-bottom: 100px;
        margin-left: 22px;
            }   
      .footer:after {
        height:  40px;
        top: -40px;
        }
      }

  @media screen and (max-width:875px) {
     .li_li{ 
        padding-right: 40px;
        padding-left: 80px;
                  }  
     .sn_f{ 
        margin-top: 70px;
        margin-right: 0px;
        margin-bottom: 100px;
        margin-left: 20px;
                  }          
            }
  @media screen and (max-width:827px) {
      .sn_f {
        margin-top: 70px;
        margin-right: 0px;
        margin-bottom: 100px;
        margin-left: 15px;
          }
                              }  
  @media screen and (max-width:823px) {
    .li_li{  
        padding-right: 0px;
        }
            }         
 @media screen and (max-width:781px) {
    
    .li_li{
        padding-left: 50px;
      }
  }
  @media screen and (max-width:753px) {
    .foot{
      max-width: 100%;
      }
  .footer {
      margin-top: 180px;
      }
    .logo_f{
      width: 90px;
      height: 90px;
      padding-top: 0px;
      padding-right: 0px;
      padding-bottom: 0px;
      padding-left: 0px;
    }
    .logo_f {  
        text-align: center; /* インライン要素のセンタリングを指定する */
        width: 90px; /* 要素の横幅を指定する */
        margin: 0px auto; /* ブロックレベル要素のセンタリングを指定する */
      }
     
      .li_li {
      font-size: 14px;
      letter-spacing : 3px;
      padding-top: 40px;
      padding-right: 0px;
      padding-bottom: 10px;
      justify-content: center 
      }
  
  .li1{
      padding-top: 10px;
      padding-right: 0px;
      padding-bottom: 10px;
      padding-left: 10px;
  }

  .li2{
      padding-top: 10px;
      padding-right: 20px;
      padding-bottom: 10px;
      padding-left: 0px;
  }

  .sn_f{
      text-align: center;
  }
  .sns_f {
      width: 30px;
      height: 30px;
      }
  .sn_f{ 
      margin-top: 60px;
      margin-right: 0px;
      margin-bottom: 40px;
      margin-left: 45px;
                  }          
  .sns_i{ 
      width: 30px;
      height: 30px;          
      }  
  
  .sns_m{ 
      width: 30px;
      height: 30px;      
      }  
  
  .foot{
      display: flex;
      flex-direction: column;
        }
  .links_f{
      order: 1;
        }
  .lo_f{
      order: 2;
        }                 
  .sn_f{
      order: 3;
        }       
      }
   @media screen and (max-width:518px) {
    li a{
      font-size: 14px;
    }
    
        }
    button {
          background: transparent;
            } 
    .hiraku-open-btn-line{
          display: block;
          position: relative;
          width: 40px;
          height: 3px;
          background-color: #3b43ac;
          border-radius: 4px;
          transition: all 0.5s;
      }
    .hiraku-open-btn-line:before, .hiraku-open-btn-line:after {
          content: "";
          display: block;
          position: absolute;
          background-color:#3b43ac;
          width: 100%;
          height: 3px;
          border-radius: 4px;
          transition: all 0.5s;
      }
    .hiraku-open-btn-line:before {
          top: -10px;
      }
    .hiraku-open-btn-line:after {
          bottom: -10px;
      }
    .js-offcanvas-btn[aria-expanded="true"] .hiraku-open-btn-line:before {
          transform: translate(0px, 10px) rotate(45deg);
      }
    .js-offcanvas-btn[aria-expanded="true"] .hiraku-open-btn-line:after {
          transform: translate(0px, -10px) rotate(-45deg);
      }
    .js-offcanvas-btn[aria-expanded="true"] .hiraku-open-btn-line:before, .js-offcanvas-btn[aria-expanded="true"] .hiraku-open-btn-line:after {
          width: 40px;
      }

    .vid_contents {
      margin-top: 30px;
      text-align: center;
         }
    .taitoru_1{
      /*max-width: 1366px;*/
      margin: auto;
        }
    .taitoru_2{
      padding: 50px 0;
      margin-bottom: 60px;
      text-align: center;
      background-color: #d3def1;
      }
    .taitoru{
      font-family: 'Noto Sans JP', sans-serif;
      font-size: 40px;
      color: #3b43ac;
      font-weight: 500;
      letter-spacing : 6px;
      }

    .saku { 
      max-width: 900px;
      margin: 0 auto;
      display: flex; 
      justify-content: flex-start;
      letter-spacing : 3px;
              }
    .saku_2{
      font-family: 'Noto Sans JP', sans-serif;
      font-size: 34px;
      font-weight: 500;
      color: #3b43ac;
      line-height: 40px;
              }
    .saku_3{
      word-break:keep-all;
                }
    .saku_3{
      font-family: 'Noto Sans JP', sans-serif;
      font-size: 16px;
      color:#333333;
      padding: 80px 60px 80px 0;
      line-height: 30px
              }
    .saku{
      margin-left: auto;
      align-items: stretch
                }
    .saku {
      flex: 1;
                }
    .saku_1 {
      width: 70%;
      padding-left: 10%;
      padding-top: 60px;
            }
    div.vid_contents_1 {
      width: 70%;
      text-align: center;
      margin: auto;
              }
    video.vid_main_1 {
      width: 70%;
      max-width: 920px;
              }
         
  @media screen and (max-width:960px) {  
    .saku_2{
      font-size: 36px;
                }
    .saku_3{
      font-size: 14px;
      padding: 60px 60px 60px 0;
                      }
    .first_1,.saku_1 {
      width: 70%;
      padding-left: 8%;
      padding-top: 100px;  
           }                       
            }
  @media screen and (max-width:860px){
    .saku_2{
      font-size: 32px;
                }
              }
  @media screen and (max-width:790px){
    .saku_2{
      font-size: 29px;
            }
                          }       
  @media screen and (max-width:750px){
            
    .saku { 
      flex-direction: column-reverse
              }
    .saku_3{
      font-size: 14px;
      padding: 30px 60px 80px 0;
      line-height: 25px
    }
    .first_1,.saku_1 {
      width: 80%;
      padding-left: 10%;
      padding-top: 30px; 
              }                                                      
               }    
  @media screen and (max-width:640px){
    .taitoru{
      font-size: 34px;
           }   
                    }
    .first_2 img {
      width: 100%;
      height: auto;
      margin-top: 100px;
                }   
    .first_2 {
      padding: 0px 0px 100px 0px;
                  }                      
    .first_1 {
      width: 70%;
      padding-left: 10%;
      padding-top: 100px;
      margin-top: 60px;
           }                     
    .second { 
      max-width: 900px;
      margin: 0 auto;
      display: flex; 
      justify-content: flex-start;
      letter-spacing : 3px;
              }
    .second {
      position: relative;
      }
    .second {
      overflow: hidden;
              }
    .second {
      flex: 1; 
             }
    .second_1{
      padding: 0px 0px 100px 0px;
      text-align: left;
                   } 
    .second_1 img {
      width: 100%;
      height: auto;
               }                      
    .third{
      text-align: left;
          }              
    .third img {
      width: 100%;
      height: auto;
      padding: 0px 0px 100px 0px;
            }                       
          
    .kinakuru_2 img {
      width: 100%;
      height: auto;
            }
    .kinakuru_1{
      font-family: 'Noto Sans JP', sans-serif;
      font-size: 34px;
      font-weight: 500;
      color: #3b43ac;
      line-height: 40px;
                    }
    .kinakuru_3{
      word-break:keep-all;
                    }
    .kinakuru_3{
      font-family: 'Noto Sans JP', sans-serif;
      font-size: 16px;
      color:#333333;
      padding: 80px 60px 0 0;
      line-height: 30px
                 }         
    .ramumira_2 img {
      width: 100%;
      height: auto;
                }
    .ramumira_1{
      font-family: 'Noto Sans JP', sans-serif;
      font-size: 34px;
      font-weight: 500;
      color: #3b43ac;
      line-height: 40px;
            }
    .ramumira_3{
      word-break:keep-all;
          }
    .ramumira_3{
      font-family: 'Noto Sans JP', sans-serif;
      font-size: 16px;
      color:#333333;
      padding: 80px 60px 0 0;
      line-height: 30px
          }
    .ramumira_4 {
      width: 70%;
      padding-left: 10%;
      padding-top: 100px;
              }  

    .cyumon {
      font-family: 'Noto Sans JP', sans-serif;
      font-size: 34px;
      font-weight: 500;
      color: #3b43ac;
      line-height: 40px;
      border-bottom: solid 5px #87CEFA;
     
                      }
    .cyumon_1 {
      margin: 50px 0 30px 50px;
      margin-right: auto;
          }                
    .otoiawa {
      font-family: 'Noto Sans JP', sans-serif;
      font-size: 24px;
      color:#333333;
      padding: 30px 0 30px 0px;
      line-height: 30px
              }
    .otoi_1{
      font-family: 'Noto Sans JP', sans-serif;
      font-size: 16px;
      padding:0 50px 30px 20px ;
      line-height: 30px;
    }
    .tuika_1 img, .kihon_2 img {
      width: 60%;
      margin: auto;
      display: block;
      margin-bottom: 30px;
      margin-top: 30px;
                  }
                                                                                                         
  @media screen and (max-width:1100px) {  
    .ramumira_4 {
      width: 60%;
      padding-left: 10%;
      padding-top: 100px;
                  }  
                } 
  @media screen and (max-width:1000px) { 
    .otoiawa {
      padding: 30px 0 30px 30px;
                          }
    .otoi_1{
      padding:0 50px 30px 50px ;       
               }      
              }


  @media screen and (max-width:960px) {
    .first_1 {
      width: 70%;
      padding-left: 8%;
      padding-top: 100px;  
                          }    
    .kinakuru_1{
      font-size: 36px;
            }
    .kinakuru_3{
      font-size: 14px;
      padding: 60px 60px 0 0;
            }
    .kimu_1{
      padding: 0px 0px 160px 0px;
      text-align: left;
              }        
    .ramumira_1{
      font-size: 36px;
              }
    .ramumira_3{
      padding: 60px 60px 0 0;
                }   
    .ramumira_4 {
      width: 40%;
      padding-left: 8%;
      padding-top: 100px;
         }  
                    }
  @media screen and (max-width:750px) {
    .first_2 img {
      width: 100%;
      height: auto;
      margin-top: 0px;
             }    
    .first_2 {
      padding: 0px 0px;
                    }
    .first_1 { 
      width: 80%;
      padding-left: 10%;
      padding-top: 30px;
      margin-top: 0px;
                         }  
    .third img {
      padding: 0px 0px 0px 0px;
                  }                            
    .second { 
      max-width: 1366px;
      margin: 0 auto;
      display: flex; 
      flex-direction: column
                }
    .second_1{
      padding: 0px 0px;
      text-align: left;
            }  
    .razu img {
      width: 100%;
      height: auto;
      padding: 0;
            }
    .kinakuru_1{
      font-size: 36px;
          }  
    .kinakuru_3{
      font-size: 14px;
      padding: 30px 60px 0 0;
      line-height: 25px
                        }   
    .ramumira_3{
      font-size: 14px;
      padding: 30px 0 0 0;
      line-height: 25px
                      }  
    .ramumira_4 {
      width: 80%;
      padding-left: 10%;
      padding-top: 30px;
                  }   



    .kihon_2 img {
      margin-left: 0px;
          }   
    .kihon_2   {
      text-align : center;
           }
    .kihon_1 {
      width: 100%;
      padding-left: 25%;
      padding-top: 50px;
               }                                  
    .tuika_1 img {                             
      margin-left: 0px;                  
                }  
    .tuika_1 {                             
      text-align : center;                 
                }  
    .tuika_2 {
      padding: 0 100px 0 100px;
                      }  
    .tuika_1 img, .kihon_2 img {
      width: 90%;
      margin: auto;
      display: block;
      margin-bottom: 50px;
      margin-top: 30px;
                    }                                                                                               
                }

                  .flow {
                    width: 80%;
                    margin:  0 auto;
                       }  
                  .flow > li {
                    position: relative;
                  }
                  .flow > li:not(:last-child) {
                    margin-bottom: 40px;
                  }
               
                  .flow > li dl {
                    width: 55%;
                    padding: 20px 30px 20px 60px;
                    display: -webkit-box;
                    display: -ms-flexbox;
                    display: flex;
                    -webkit-box-align: center;
                    -ms-flex-align: center;
                    align-items: center;
                    border: 2px solid rgb(107,144,219);
                    border-radius: 10px;
                    position: relative;
                    margin: 0 auto;
                  }
                
                  .flow > li:not(:last-child) dl::before,
                  .flow > li:not(:last-child) dl::after {
                    content: "";
                    border: solid transparent;
                    position: absolute;
                    top: 100%;
                    left: 50%;
                    -webkit-transform: translateX(-50%);
                    transform: translateX(-50%);
                  }
                  .flow > li:not(:last-child) dl::before {
                    border-width: 22px;
                    border-top-color: rgb(107,144,219);
                  }
                  .flow > li:not(:last-child) dl::after {
                    border-width: 20px;
                    border-top-color:#ecf2fc;
                  }
                  .flow > li dl dt {
                    font-size: 16px;
                    font-weight: 600;
                    color: rgb(107,144,219);
                    -ms-flex-preferred-size: 20%;
                    flex-basis: 20%;
                    margin-right: 2vw;
                    text-align: center;
                    line-height:20px;
                    flex-shrink: 0;
                  }
                  .flow > li dl dt .icon {
                    font-size: 12px;
                    color: #fff;
                    background: rgb(107,144,219);
                    background: -moz-linear-gradient(left, rgba(107,144,219,1) 0%, rgba(102,213,233,1) 100%);
                    background: -webkit-linear-gradient(left, rgba(107,144,219,1) 0%,rgba(102,213,233,1) 100%);
                    background: linear-gradient(to right, rgba(107,144,219,1) 0%,rgba(102,213,233,1) 100%);
                    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6b90db', endColorstr='#66d5e9',GradientType=1 );
                    padding: 5px 10px;
                    margin-bottom: 10px;
                    display: block;
                    border-radius: 20px;
                    position: relative;
                    z-index: 100;
                  }
  
                .kihon_4 {
                    font-family: 'Noto Sans JP', sans-serif;
                    font-size: 38px;
                    color: #3b43ac;
                    font-weight: 500;
                    letter-spacing: 6px;
                    text-align: center 
                 }
                .kihon_4 {
                  padding: 100px 0 50px;
                  position: relative;
              }
              
                .kihon_4::before {
                  background-color: #3b43ac;
                  border-radius: 5px;
                  bottom: 45px;
                  content: "";
                  height: 3px;
                  left: 50%;
                  position: absolute;
                  transform: translateX(-50%);
                  width: 165px;
                }
                .kihon_5{
                  width: 70%;
                  margin:  0 auto; 
                }
  
                .kihon_6{
                  font-family: 'Noto Sans JP', sans-serif;
                  font-size: 26px;
                  color: #3b43ac;
                  font-weight: 500;
                  letter-spacing: 4px;
                  padding: 1rem 2rem;
                  border-left: 3px solid #3b43ac;
                  background:  rgba(213, 231, 243, 0.5);
                  margin-bottom: 30px;
                  width: 90%;
                  max-width: 1000px;
                        }
                .kihon_7,.kihon_8{
                  font-family: 'Noto Sans JP', sans-serif;
                  font-size: 16px;
                  color: #3b43ac;
                  font-weight: 500;
                  letter-spacing: 4px;
                  padding: 0 30px 30px 30px;
                  }
                 
                 body {
                    font-family: "Open Sans", sans-serif;
                    line-height: 1.5;
                  }
                  
                  table {
                    border-collapse: collapse;
                    margin: 0 auto;
                    padding: 0;
                    width: 65%;
                    table-layout: fixed;
                    color: #3b43ac;
                    max-width: 1000px;
                  }
                  
                  table tr {
                    background-color: rgba(213, 231, 243, 0.349);
                    padding: 100px;
                    border-bottom: 1px dotted rgb(107,144,219)
                  }
                  table tr:last-child{
                     border-bottom: 2px solid rgb(107,144,219);
                  }
                  table th,
                  table td {
                    font-family: 'Noto Sans JP', sans-serif;
                    padding: 1em 20px 1em 1em;
                    letter-spacing: 2px;
                  }
                  tbody th {
                      font-family: 'Noto Sans JP', sans-serif;
                      color: #3b43ac;
                      letter-spacing: 2px;
                      font-size: 18px;
                  }
                  .price{
                    text-align:left;
                  }
                  .price_1{
                    text-align: center;
                  }
                  @media screen and (max-width: 850px) {
                    .flow > li dl {
                    width: 80%;
                    padding: 20px 30px 20px 50px;
                    display: -webkit-box;
                    display: -ms-flexbox;
                    display: flex;
                    -webkit-box-align: center;
                    -ms-flex-align: center;
                    align-items: center;
                    border: 2px solid rgb(107,144,219);
                    border-radius: 10px;
                    position: relative;
                    margin: 0 auto;
                  }
                  table {
                    border-collapse: collapse;
                    margin: 0 auto;
                    padding: 0;
                    width: 100%;
                    table-layout: fixed;
                    color: #3b43ac;
                  }
                  .tuika_1 img, .kihon_2 img {
                    width: 100%;
                    margin: auto;
                    display: block;
                    margin-top: 30px;
                                }
                  
                  .kihon_5{
                    width: 90%;
                    margin:  0 auto; 
                  }
                }
                @media screen and (max-width: 580px) {
                  .flow > li dl dt {
                    font-size: 14px;
                  }
                  .kihon_6{
                    font-size: 22px;
                          }
                }
                dl .oda {
                  font-family: 'Noto Sans JP', sans-serif;
                  font-size: 16px;
                  color:#333333;
                  padding:0px 50px 0px 25px;
                  }


                  .gallery_ga{
                    columns: 4;
                    padding:0 15px;
                    max-width: 1150px;
                    margin: auto;
                    }
                    
                    .gallery_ga li {
                        margin-bottom: 20px;
                    }
                    
                  
                    .gallery_ga img{
                      width:100%;
                      height:auto;
                      vertical-align: bottom;
                    }
                    
                
                    @media only screen and (max-width: 900px) {
                      .gallery_ga{
                      columns:3;
                      } 
                    }
                    
                    @media only screen and (max-width: 768px) {
                      .gallery_ga{
                      columns: 2;
                      } 
                    }
                    
                    .flipLeft{
                    animation-name: flipLeft;
                    animation-duration:0.5s;
                    animation-fill-mode:forwards;
                    perspective-origin: left center;
                    opacity: 0;
                    }
                    
                    @keyframes flipLeft{
                      from {
                       transform: perspective(600px) translate3d(0, 0, 0) rotateY(30deg);
                      opacity: 0;
                      }
                    
                      to {
                      transform: perspective(600px) translate3d(0, 0, 0) rotateY(0deg);
                      opacity: 1;
                      }
                    }
    
                    .Form {
                      margin-top: 80px;
                      margin-left: auto;
                      margin-right: auto;
                      max-width: 720px;
                    }
                    @media screen and (max-width: 480px) {
                      .Form {
                        margin-top: 40px;
                      }
                    }
                    .Form-Item {
                      border-top: 1px solid #ddd;
                      padding-top: 24px;
                      padding-bottom: 24px;
                      width: 100%;
                      display: flex;
                      align-items: center;
                    }
                    @media screen and (max-width: 780px) {
                      .Form-Item {
                        border-top: 1px solid #ddd;
                        padding-top: 24px;
                        padding-bottom: 24px;
                        width: 90%;
                        display: flex;
                        align-items: center;
                        margin-left: 30px;
                      }
                    }

                    @media screen and (max-width: 480px) {
                      .Form-Item {
                        padding-left: 14px;
                        padding-right: 14px;
                        padding-top: 16px;
                        padding-bottom: 16px;
                        flex-wrap: wrap;
                      }
                    }
                    .Form-Item:nth-child(5) {
                      border-bottom: 1px solid #ddd;
                    }
                    .Form-Item-Label {
                      width: 100%;
                      max-width: 248px;
                      letter-spacing: 0.05em;
                      font-weight: bold;
                      font-size: 18px;
                    }
                    @media screen and (max-width: 780px) {
                      .Form-Item-Label {
                        width: 100%;
                        max-width: 248px;
                        letter-spacing: 0.05em;
                        font-weight: bold;
                        font-size: 16px;
                      }

                    } 
                    @media screen and (max-width: 480px) {
                      .Form-Item-Label {
                        max-width: inherit;
                        display: flex;
                        align-items: center;
                        font-size: 15px;
                      }
                    }
                    .Form-Item-Label.isMsg {
                      margin-top: 8px;
                      margin-bottom: auto;
                    }
                    @media screen and (max-width: 480px) {
                      .Form-Item-Label.isMsg {
                        margin-top: 0;
                      }
                    }
                    .Form-Item-Label-Required {
                      border-radius: 6px;
                      margin-right: 8px;
                      padding-top: 8px;
                      padding-bottom: 8px;
                      width: 48px;
                      display: inline-block;
                      text-align: center;
                      background: #d3def1;
                      color: #3b43ac;
                      font-size: 14px;
                    }
                    @media screen and (max-width: 480px) {
                      .Form-Item-Label-Required {
                        border-radius: 4px;
                        padding-top: 4px;
                        padding-bottom: 4px;
                        width: 32px;
                        font-size: 10px;
                      }
                    }
                    .Form-Item-Input {
                      border: 1px solid #ddd;
                      border-radius: 6px;
                      margin-left: 40px;
                      padding-left: 1em;
                      padding-right: 1em;
                      height: 48px;
                      flex: 1;
                      width: 100%;
                      max-width: 410px;
                      background: #eaedf2;
                      font-size: 18px;
                    }
                    @media screen and (max-width: 780px) {
                      .Form-Item-Input {
                        border: 1px solid #ddd;
                        border-radius: 6px;
                        margin-left: 40px;
                        padding-left: 1em;
                        padding-right: 1em;
                        height: 48px;
                        flex: 1;
                        width: 100%;
                        max-width: 410px;
                        background: #eaedf2;
                        font-size: 16px;
                      }
                    }
                    @media screen and (max-width: 600px) {
                      .Form-Item-Input {
                        border: 1px solid #ddd;
                        border-radius: 6px;
                        margin-left: 0;
                        padding-left: 1em;
                        padding-right: 1em;
                        height: 48px;
                        flex: 1;
                        width: 100%;
                        max-width: 410px;
                        background: #eaedf2;
                        font-size: 16px;
                      }
                    }
                    @media screen and (max-width: 480px) {
                      .Form-Item-Input {
                        margin-left: 0;
                        margin-top: 18px;
                        height: 40px;
                        flex: inherit;
                        font-size: 15px;
                      }
                    }
                    .Form-Item-Textarea {
                      border: 1px solid #ddd;
                      border-radius: 6px;
                      margin-left: 40px;
                      padding-left: 1em;
                      padding-right: 1em;
                      height: 216px;
                      flex: 1;
                      width: 100%;
                      max-width: 410px;
                      background: #eaedf2;
                      font-size: 18px;
                    }
                    @media screen and (max-width: 600px) {
                      .Form-Item-Textarea {
                        border: 1px solid #ddd;
                        border-radius: 6px;
                        margin-left: 0;
                        padding-left: 1em;
                        padding-right: 1em;
                        height: 216px;
                        flex: 1;
                        width: 100%;
                        max-width: 410px;
                        background: #eaedf2;
                        font-size: 18px;
                      }
                    }
                    @media screen and (max-width: 480px) {
                      .Form-Item-Textarea {
                        margin-top: 18px;
                        margin-left: 0;
                        height: 200px;
                        flex: inherit;
                        font-size: 15px;
                      }
                    }
                    .Form-Btn {
                      border-radius: 50px;
                      margin-top: 32px;
                      margin-left: auto;
                      margin-right: auto;
                      padding-top: 20px;
                      padding-bottom: 20px;
                      width: 280px;
                      display: block;
                      letter-spacing: 0.05em;
                      background: #d3def1;
                      color: #3b43ac;
                      font-weight: bold;
                      font-size: 20px;
                    }
                    @media screen and (max-width: 480px) {
                      .Form-Btn {
                        margin-top: 24px;
                        padding-top: 8px;
                        padding-bottom: 8px;
                        width: 160px;
                        font-size: 16px;
                      }
                    }      
                    
                    
                    .googleform-wrapper {
                      position: relative;
                      width: 100%;
                      height: 1000px;
                      overflow-y: scroll;
                    }
                    
                    .googleform-wrapper iframe {
                      position: absolute;
                      top: 0;
                      left: 0;
                      width: 100%;
                      height: 100%;
                    }                   


                    .fade-img-box {
                      width: 100%;
                      height: 600px;
                      margin-left: auto;
                      margin-top: 10px;
                      position:relative;
                         }
                     
                     .fade-img-box img {
                      position: absolute;
                      top: 0;
                      left: 0;
                      width: 100%;
                      height: 100%;
                      object-fit:cover;
                     }