main{
    background-color: #33b1e8;
     
  }
  
  
  nav{
    /*navの外側のheaderなどに横幅を指定する場合は削除してください*/
    
    background-color: #7defd9;;
    opacity: 70%;
    
    
  }
  nav {
   
    height: 5200px;
    background-color: #7defd9;
    opacity: 70%;
  }
    
    
    nav ul{
      list-style: none;
      text-align:center;
      padding: 20px;
    }
  
    nav ul li
    {
      padding-top:100px;
    }
    
    
   
    
    
    
    
    @media screen and (max-width:768px){
      nav{
        background:#333;
        color: #fff;
      }
      
      nav li.has-child ul,
      nav li.has-child ul ul{
        position: relative;
      left:0;
      top:0;
      width:100%;
      visibility:visible;/*JSで制御するため一旦表示*/
      opacity:1;/*JSで制御するため一旦表示*/
      display: none;/*JSのslidetoggleで表示させるため非表示に*/
      transition:none;/*JSで制御するためCSSのアニメーションを切る*/
    }
    
    nav ul li a{
      border-bottom:1px solid #ccc;
      color: #fff;
    }
    
    /*矢印の向き*/
    nav ul li.has-child::before,
    nav ul ul li.has-child::before{
        transform: rotate(135deg);
      left:20px;
    }
        
    nav ul li.has-child.active::before{
        transform: rotate(-45deg);
    }
      
    }
  
  
    body {
        display: flex;
        height: 2100px;
    }
   
    nav {
      width: 30%; /* ナビゲーションの幅を設定 */
    }
    
    .content {
      text-align: center;
      flex: 1; /* コンテンツが残りのスペースを占めるようにする */
      background-image: linear-gradient(to right top,#c7af3f,#FFFFFF);
      height: 5200px;
      
      main{
        background-color: #33b1e8;
         
      }
      
      
      nav{
        /*navの外側のheaderなどに横幅を指定する場合は削除してください*/
        
        background-color: #7defd9;;
        opacity: 70%;
        
        
      }
      nav {
       
       
        background-color: #7defd9;
        opacity: 70%;
      }
        
        
        nav ul{
          list-style: none;
          text-align:center;
          padding: 20px;
        }
      
        nav ul li
        {
          padding-top:100px;
        }
        
        .content{
          height: 1200px;
        }
       
        
        
        
        
        @media screen and (max-width:768px){
          nav{
            background:#333;
            color: #fff;
          }
          
          nav li.has-child ul,
          nav li.has-child ul ul{
            position: relative;
          left:0;
          top:0;
          width:100%;
          visibility:visible;/*JSで制御するため一旦表示*/
          opacity:1;/*JSで制御するため一旦表示*/
          display: none;/*JSのslidetoggleで表示させるため非表示に*/
          transition:none;/*JSで制御するためCSSのアニメーションを切る*/
        }
        
        nav ul li a{
          border-bottom:1px solid #ccc;
          color: #fff;
        }
        
        /*矢印の向き*/
        nav ul li.has-child::before,
        nav ul ul li.has-child::before{
            transform: rotate(135deg);
          left:20px;
        }
            
        nav ul li.has-child.active::before{
            transform: rotate(-45deg);
        }
          
        }
      
      
        body {
            display: flex;
            height: 3500px;
        }
       
        nav {
          width: 30%; /* ナビゲーションの幅を設定 */
        }
        
        .content {
          text-align: center;
          flex: 1; /* コンテンツが残りのスペースを占めるようにする */
          background-image: linear-gradient(to right top,#c7af3f,#FFFFFF);
          height: 2100px;
        }
        
        
        .photo2 {
          margin-top: 100px; /* 例: 適切なマージンに調整 */
        }
        
        .photo3 {
          margin-top:300px; /* 例: 適切なマージンに調整 */
        }
        
        
        /*アコーディオン全体*/
      .accordion-area{
        list-style: none;
        width: 96%;
        max-width: 900px;
        margin:0 auto;
      }
      
      .accordion-area li{
        margin: 10px 0;
      }
      
      .accordion-area section {
      border: 1px solid #ccc;
      }
      
      /*アコーディオンタイトル*/
      .title {
        position: relative;/*+マークの位置基準とするためrelative指定*/
        cursor: pointer;
        font-size:1rem;
        font-weight: normal;
        padding: 3% 3% 3% 50px;
        transition: all .5s ease;
      }
      
      /*アイコンの＋と×*/
      .title::before,
      .title::after{
        position: absolute;
        content:'';
        width: 15px;
       
        background-color: #333;
        
      }
      .title::before{
        top:48%;
        left: 15px;
        transform: rotate(0deg);
        
      }
      .title::after{    
        top:48%;
        left: 15px;
        transform: rotate(90deg);
      
      }
      
      /*　closeというクラスがついたら形状変化　*/
      
      .title.close::before{
      transform: rotate(45deg);
      }
      
      .title.close::after{
      transform: rotate(-45deg);
      }
      
      /*アコーディオンで現れるエリア*/
      .box {
        display: none;/*はじめは非表示*/
        background: #f3f3f3;
      margin:0 3% 3% 3%;
        padding: 3%;
      }
      
      .title{
        font-size: 30px;
      }
      
      @media screen and (max-width:768px){
        main{
          background-color: #33b1e8;
           
        }
        
        
        nav{
          width:20%;/*navの外側のheaderなどに横幅を指定する場合は削除してください*/
         
          background-color: #7defd9;;
          opacity: 70%;
          
        }
          
          
          
          nav ul{
            list-style: none;
            text-align:center;
            padding: 20px;
          }
        
          nav ul li
          {
            padding-top:20px;
          }
          
          
        }
          
          
          
        
      
         
    }
    
    
    .photo2 {
      margin-top: 100px; /* 例: 適切なマージンに調整 */
    }
    
    .photo3 {
      margin-top:300px; /* 例: 適切なマージンに調整 */
    }
    
    
    /*アコーディオン全体*/
  .accordion-area{
    list-style: none;
    width: 96%;
    max-width: 900px;
    margin:0 auto;
  }
  
  .accordion-area li{
    margin: 10px 0;
  }
  
  .accordion-area section {
  border: 1px solid #ccc;
  }
  
  /*アコーディオンタイトル*/
  .title {
    position: relative;/*+マークの位置基準とするためrelative指定*/
    cursor: pointer;
    font-size:1rem;
    font-weight: normal;
    padding: 3% 3% 3% 50px;
    transition: all .5s ease;
  }
  
  /*アイコンの＋と×*/
  .title::before,
  .title::after{
    position: absolute;
    content:'';
    width: 15px;
   
    background-color: #333;
    
  }
  .title::before{
    top:48%;
    left: 15px;
    transform: rotate(0deg);
    
  }
  .title::after{    
    top:48%;
    left: 15px;
    transform: rotate(90deg);
  
  }
  
  /*　closeというクラスがついたら形状変化　*/
  
  .title.close::before{
  transform: rotate(45deg);
  }
  
  .title.close::after{
  transform: rotate(-45deg);
  }
  
  /*アコーディオンで現れるエリア*/
  .box {
    display: none;/*はじめは非表示*/
    background: #f3f3f3;
  margin:0 3% 3% 3%;
    padding: 3%;
  }
  
  .title{
    font-size: 30px;
  }
  
  @media screen and (max-width:768px){
    main{
      background-color: #33b1e8;
       
    }
    
    
    nav{
      width:20%;/*navの外側のheaderなどに横幅を指定する場合は削除してください*/
     
      background-color: #7defd9;;
      opacity: 70%;
      
    }
      
      
      
      nav ul{
        list-style: none;
        text-align:center;
        padding: 20px;
      }
    
      nav ul li
      {
        padding-top:20px;
      }
      
      
    }