@charset "UTF-8";

/*!
Theme Name: Cocoon Child
Description: Cocoon専用の子テーマ
Theme URI: https://wp-cocoon.com/
Author: わいひら
Author URI: https://nelog.jp/
Template:   cocoon-master
Version:    1.1.3
*/

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/

/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1023px以下*/
@media screen and (max-width: 1023px){
  /*必要ならばここにコードを書く*/

  


}

/*834px以下*/
@media screen and (max-width: 834px){
  /*必要ならばここにコードを書く*/


 /* .main {
    
    border: 8px solid #542E2E;
    
    
  }
*/

  .h2kuro01 {

    font-size: 18px;
    padding: 12px 10px;
     padding: 0.5em;/*文字周りの余白*/
    
      background: url(https://roggy-uranai.com/wp-content/uploads/2024/03/roggy-uranai-h204-2.jpg);
      -webkit-box-shadow: 0 0 40px rgba(0, 0, 0, 0.2) inset,0 0 4px rgba(0, 0, 0, 0.2) ;
      -moz-box-shadow: 0 0 40px rgba(0, 0, 0, 0.2) inset,0 0 4px rgba(0, 0, 0, 0.2) ;
      box-shadow: 0 0 40px rgba(0, 0, 0, 0.2) inset,0 0 4px rgba(0, 0, 0, 0.2) ;
     
      /*border:  8px 0 8px 0  solid #542E2E;*/
     /* border-top: 8px solid #542E2E;*/
      /*border-bottom: 8px solid #542E2E;*/
  
       /*border-right: 8px solid #542E2E;
      border-left: 8px solid #542E2E;*/
  
     /*margin-left:-35px;*/
     /*margin-right:-35px;*/
     /*max-width: 100;*/*/
     width: auto;
  
    margin-left: -1.0em;
    margin-right: -1.0em;

  }
  
  
  .h2kuro01 span{
  
    display:block;
    border-top:1px dashed #D1D5E5;
    border-bottom:1px dashed #D1D5E5;
    padding:18px 10px 10px 10px;
    background-color: #EFEBE0;
   /* border-radius: 0.3em;*/
    -webkit-box-shadow: 0 0 40px rgba(0, 0, 0, 0.2) inset,0 0 4px rgba(0, 0, 0, 0.2) ;
    -moz-box-shadow: 0 0 40px rgba(0, 0, 0, 0.2) inset,0 0 4px rgba(0, 0, 0, 0.2) ;
    box-shadow: 0 0 40px rgba(0, 0, 0, 0.2) inset,0 0 4px rgba(0, 0, 0, 0.2) ;
  
    /*margin-left:-35px;*/
    /*margin-right:-35px;*/
    /*max-width: 100;*/
    width: auto;
  
  
    }
  
  
  
    .h2kuro02 {
  
      font-size: 18px;
      padding: 12px 10px;
       padding: 0.5em;/*文字周りの余白*/
      
        background: url(https://roggy-uranai.com/wp-content/uploads/2024/04/roggy-uranai-h2h03-2.jpg);
        -webkit-box-shadow: 0 0 40px rgba(0, 0, 0, 0.2) inset,0 0 4px rgba(0, 0, 0, 0.2) ;
        -moz-box-shadow: 0 0 40px rgba(0, 0, 0, 0.2) inset,0 0 4px rgba(0, 0, 0, 0.2) ;
        box-shadow: 0 0 40px rgba(0, 0, 0, 0.2) inset,0 0 4px rgba(0, 0, 0, 0.2) ;
       
        /*border:  8px 0 8px 0  solid #542E2E;*/
       /* border-top: 8px solid #542E2E;*/
        /*border-bottom: 8px solid #542E2E;*/
    
         /*border-right: 8px solid #542E2E;
        border-left: 8px solid #542E2E;*/
    
       
       /*max-width: 100;*/
       width: auto;
    
    }
    
    
    .h2kuro02 span{
    
      display:block;
      border-top:1px dashed #D1D5E5;
      border-bottom:1px dashed #D1D5E5;
      padding:18px 10px 10px 10px;
      background-color: #EFEBE0;
      /*border-radius: 0.3em;*/
      -webkit-box-shadow: 0 0 40px rgba(0, 0, 0, 0.2) inset,0 0 4px rgba(0, 0, 0, 0.2) ;
      -moz-box-shadow: 0 0 40px rgba(0, 0, 0, 0.2) inset,0 0 4px rgba(0, 0, 0, 0.2) ;
      box-shadow: 0 0 40px rgba(0, 0, 0, 0.2) inset,0 0 4px rgba(0, 0, 0, 0.2) ;
    
      
      /*max-width: 100;*/
      width: auto;
    
    
      margin-left: -1.0em;
      margin-right: -1.0em;



      }
  


      .renai01{
        /*ピンク色の背景*/
          background: #F58484;
          padding: 15px;
      
          
          /*max-width: 100;*/
          width: auto;
      
         /* border-right: 8px solid #542E2E;
            border-left: 8px solid #542E2E;*/
        

            margin-left: -1.3em;
            margin-right: -1.3em;

          }
      
      
          .box-renai01 {
            max-width: 550px;
            margin: 0 auto;
            border: 2px solid #DA6C6D;
            background-color: #F5EED3;
            /*border-radius: 3px;*/
            margin-bottom: 30px;
            border-radius: 0.5em;/*角丸*/
      
          }
          
          .box-renai01 span {
            display: flex;
            justify-content: center;
           /* align-items: center;*/
            /*padding: .5em 0;*/
            background-color: #F51432;
            color: #fff;
            font-weight: 600;
            align-items: center;
          }
          
          .box-renai01 p {
            margin: 0;
            padding: 1em 1.5em;
            color: #333;
          }
      
      
      
          .box-renai02 {
      
            font-size: 18px;
            padding: 12px 10px;
            /*color: #fff;*/
            
            padding: 0.5em;/*文字周りの余白*/
            border-radius: 0.5em;/*角丸*/
            /*text-align: center;*/
              background-color: #f7f0cf;
          
              -webkit-box-shadow: 0 0 40px rgba(0, 0, 0, 0.2) inset,0 0 4px rgba(0, 0, 0, 0.2) ;
              -moz-box-shadow: 0 0 40px rgba(0, 0, 0, 0.2) inset,0 0 4px rgba(0, 0, 0, 0.2) ;
              box-shadow: 0 0 40px rgba(0, 0, 0, 0.2) inset,0 0 4px rgba(0, 0, 0, 0.2) ;
          
              border: 3px solid  #7D4D3F;/*線色*/
             
          
          }
          
          
          .box-renai02 span{
          
            display:block;
            border-top:1px dashed #F3E8D7;
            border-bottom:1px dashed #F3E8D7;
            padding:18px 10px 2px 10px;
            background-color: #F5EED3;
            border-radius: 0.3em;/*角丸*/
            /*-webkit-box-shadow: 0 0 40px rgba(0, 0, 0, 0.2) inset,0 0 4px rgba(0, 0, 0, 0.2) ;*/
            /*-moz-box-shadow: 0 0 40px rgba(0, 0, 0, 0.2) inset,0 0 4px rgba(0, 0, 0, 0.2) ;*/
            /*box-shadow: 0 0 40px rgba(0, 0, 0, 0.2) inset,0 0 4px rgba(0, 0, 0, 0.2) ;*/
          
            }



            .mirai01{

              background-color: #a2cec9;
              background-image: repeating-linear-gradient(90deg, transparent, transparent 10px, #94cbc4 10px, #94cbc4 20px);
              padding: 15px;
              margin-left:-36px;
              margin-right:-36px;
              /*max-width: 100;*/
              width: auto;
            
              /*border-right: 8px solid #542E2E;
                border-left: 8px solid #542E2E;*/
            
            
                margin-left: -1.3em;
                margin-right: -1.3em;
            
            }
          
            .mirai03{
            
              background-color: #a2cec9;
              /*background-image: repeating-linear-gradient(90deg, transparent, transparent 10px, #94cbc4 10px, #94cbc4 20px);*/
              padding: 15px;
              margin-left:-36px;
              margin-right:-36px;
              margin-bottom: auto;
              /*max-width: 100;*/
              width: auto;
            
              /*border-right: 8px solid #542E2E;
                border-left: 8px solid #542E2E;*/
            
            
               /* background-color: #f36c6c;
                background-image: repeating-linear-gradient(90deg, transparent, transparent 10px, #f58484 10px, #f58484 20px);
            */
            
            background-size: auto auto;
            background-color: #a2cec9;;
            background-image: repeating-linear-gradient(111deg, transparent, transparent 10px, #94cbc4 10px, #94cbc4 20px );
            
            margin-left: -1.0em;
               margin-right: -1.0em;
            
            }









            .ichi01{
          
              background-color: #514C42;
              /*background-image: repeating-linear-gradient(90deg, transparent, transparent 10px, #94cbc4 10px, #94cbc4 20px);*/
              padding: 15px;
              margin-left:-36px;
              margin-right:-36px;
              margin-bottom: auto;
              /*max-width: 100;*/
              width: auto;
            
              /*border-right: 8px solid #542E2E;
                border-left: 8px solid #542E2E;*/
            
            
                margin-left: -1.0em;
                margin-right: -1.0em;
            
            }
          
          
          .h3kuro01 {
          
            font-size: 18px;
            padding: 12px 10px;
             padding: 0.5em;/*文字周りの余白*/
            
              background: url(https://roggy-uranai.com/wp-content/uploads/2024/03/roggy-uranai-h204-2.jpg);
              -webkit-box-shadow: 0 0 40px rgba(0, 0, 0, 0.2) inset,0 0 4px rgba(0, 0, 0, 0.2) ;
              -moz-box-shadow: 0 0 40px rgba(0, 0, 0, 0.2) inset,0 0 4px rgba(0, 0, 0, 0.2) ;
              box-shadow: 0 0 40px rgba(0, 0, 0, 0.2) inset,0 0 4px rgba(0, 0, 0, 0.2) ;
             
              /*border:  8px 0 8px 0  solid #542E2E;*/
             /* border-top: 8px solid #542E2E;*/
              /*border-bottom: 8px solid #542E2E;*/
          
              /* border-right: 8px solid #542E2E;
              border-left: 8px solid #542E2E;*/
          
             margin-left:-35px;
             margin-right:-35px;
             /*max-width: 100;*/
             width: auto;
          
          
             margin-left: -1.0em;
             margin-right: -1.0em;
          
          }
          
          
          .h3kuro02 {
          
              font-size: 18px;
              padding: 12px 10px;
               padding: 0.5em;/*文字周りの余白*/
              
                background: url(https://roggy-uranai.com/wp-content/uploads/2024/04/roggy-uranai-h2h03-2.jpg);
                -webkit-box-shadow: 0 0 40px rgba(0, 0, 0, 0.2) inset,0 0 4px rgba(0, 0, 0, 0.2) ;
                -moz-box-shadow: 0 0 40px rgba(0, 0, 0, 0.2) inset,0 0 4px rgba(0, 0, 0, 0.2) ;
                box-shadow: 0 0 40px rgba(0, 0, 0, 0.2) inset,0 0 4px rgba(0, 0, 0, 0.2) ;
               
                /*border:  8px 0 8px 0  solid #542E2E;*/
               /* border-top: 8px solid #542E2E;*/
                /*border-bottom: 8px solid #542E2E;*/
            
                 /*border-right: 8px solid #542E2E;
                border-left: 8px solid #542E2E;*/
            
               margin-left:-35px;
               margin-right:-35px;
               /*max-width: 100;*/
               width: auto;
            
          
               margin-left: -1.0em;
               margin-right: -1.0em;
          
            }
          
          
            .ichi03{
          
              background-color: #E6E2D7;
              /*background-image: repeating-linear-gradient(90deg, transparent, transparent 10px, #94cbc4 10px, #94cbc4 20px);*/
              padding: 15px;
              margin-left:-36px;
              margin-right:-36px;
              margin-bottom: auto;
              /*max-width: 100;*/
              width: auto;
            
              /*border-right: 8px solid #542E2E;
                border-left: 8px solid #542E2E;*/
            
                margin-left: -1.0em;
                margin-right: -1.0em;
          
            }
          
          
            .ichi04{
          
              background-color: #f58484;
              /*background-image: repeating-linear-gradient(90deg, transparent, transparent 10px, #94cbc4 10px, #94cbc4 20px);*/
              padding: 15px;
              margin-left:-36px;
              margin-right:-36px;
              margin-bottom: auto;
              /*max-width: 100;*/
              width: auto;
            
              /*border-right: 8px solid #542E2E;
                border-left: 8px solid #542E2E;*/
            
            
               /* background-color: #f36c6c;
                background-image: repeating-linear-gradient(90deg, transparent, transparent 10px, #f58484 10px, #f58484 20px);
            */
            
            
              margin-left: -1.0em;
              margin-right: -1.0em;
            
            }
          
          
          
            .ichi05{
          
              background-color: #DBDBDB;
              /*background-image: repeating-linear-gradient(90deg, transparent, transparent 10px, #94cbc4 10px, #94cbc4 20px);*/
              padding: 15px;
              margin-left:-36px;
              margin-right:-36px;
              margin-bottom: auto;
              /*max-width: 100;*/
              width: auto;
            
              /*border-right: 8px solid #542E2E;
                border-left: 8px solid #542E2E;*/
            
            
                margin-left: -1.0em;
                margin-right: -1.0em;
            
            }
            
            
            
            .ichi06{
            
              background-color: #f58484;
              /*background-image: repeating-linear-gradient(90deg, transparent, transparent 10px, #94cbc4 10px, #94cbc4 20px);*/
              padding: 15px;
              margin-left:-36px;
              margin-right:-36px;
              margin-bottom: auto;
              /*max-width: 100;*/
              width: auto;
            
              /*border-right: 8px solid #542E2E;
                border-left: 8px solid #542E2E;*/
            
            
               /* background-color: #f36c6c;
                background-image: repeating-linear-gradient(90deg, transparent, transparent 10px, #f58484 10px, #f58484 20px);
               */
            
             background-size: auto auto;
             background-color: rgba(245, 132, 132, 1);
             background-image: repeating-linear-gradient(111deg, transparent, transparent 10px, rgba(243, 108, 108, 1) 10px, rgba(243, 108, 108, 1) 20px );
            
             margin-left: -1.0em;
             margin-right: -1.0em;
            
            }
            
          
            .symbol08{
          
              background-color: #f58484;
              /*background-image: repeating-linear-gradient(90deg, transparent, transparent 10px, #94cbc4 10px, #94cbc4 20px);*/
              padding: 15px;
              margin-left:-36px;
              margin-right:-36px;
              margin-bottom: auto;
              /*max-width: 100;*/
              width: auto;
            
              /*border-right: 8px solid #542E2E;
                border-left: 8px solid #542E2E;*/
            
            
               /* background-color: #f36c6c;
                background-image: repeating-linear-gradient(90deg, transparent, transparent 10px, #f58484 10px, #f58484 20px);
            */
            
            background-size: auto auto;
            background-color: rgba(245, 132, 132, 1);
            background-image: repeating-linear-gradient(111deg, transparent, transparent 10px, rgba(243, 108, 108, 1) 10px, rgba(243, 108, 108, 1) 20px );
            
            background-color: rgba(247, 215, 226, 1);
            background-image: repeating-linear-gradient(90deg, transparent, transparent 10px, rgba(255, 249, 251, 1) 10px, rgba(255, 249, 251, 1) 20px );
            
            background: url(https://roggy-uranai.com/wp-content/uploads/2024/06/roggy-uranai-haikei03.png);
          
          
            margin-left: -1.0em;
            margin-right: -1.0em;
          
          
            }


}

/*480px以下*/
@media screen and (max-width: 480px){

  .h2kuro01 {

    font-size: 18px;
    padding: 12px 10px;
     padding: 0.5em;/*文字周りの余白*/
    
      background: url(https://roggy-uranai.com/wp-content/uploads/2024/03/roggy-uranai-h204-2.jpg);
      -webkit-box-shadow: 0 0 40px rgba(0, 0, 0, 0.2) inset,0 0 4px rgba(0, 0, 0, 0.2) ;
      -moz-box-shadow: 0 0 40px rgba(0, 0, 0, 0.2) inset,0 0 4px rgba(0, 0, 0, 0.2) ;
      box-shadow: 0 0 40px rgba(0, 0, 0, 0.2) inset,0 0 4px rgba(0, 0, 0, 0.2) ;
     
      /*border:  8px 0 8px 0  solid #542E2E;*/
     /* border-top: 8px solid #542E2E;*/
      /*border-bottom: 8px solid #542E2E;*/
  
       /*border-right: 8px solid #542E2E;
      border-left: 8px solid #542E2E;*/
  
     /*margin-left:-35px;*/
     /*margin-right:-35px;*/
     /*max-width: 100;*/*/
     width: auto;
  
margin-left: -1.0em;
margin-right: -1.0em;

  }
  
  
  .h2kuro01 span{
  
    display:block;
    border-top:1px dashed #D1D5E5;
    border-bottom:1px dashed #D1D5E5;
    padding:18px 10px 10px 10px;
    background-color: #EFEBE0;
   /* border-radius: 0.3em;*/
    -webkit-box-shadow: 0 0 40px rgba(0, 0, 0, 0.2) inset,0 0 4px rgba(0, 0, 0, 0.2) ;
    -moz-box-shadow: 0 0 40px rgba(0, 0, 0, 0.2) inset,0 0 4px rgba(0, 0, 0, 0.2) ;
    box-shadow: 0 0 40px rgba(0, 0, 0, 0.2) inset,0 0 4px rgba(0, 0, 0, 0.2) ;
  
    /*margin-left:-35px;*/
    /*margin-right:-35px;*/
    /*max-width: 100;*/
    width: auto;
  
  
    }
  
  
  
    .h2kuro02 {
  
      font-size: 18px;
      padding: 12px 10px;
       padding: 0.5em;/*文字周りの余白*/
      
        background: url(https://roggy-uranai.com/wp-content/uploads/2024/04/roggy-uranai-h2h03-2.jpg);
        -webkit-box-shadow: 0 0 40px rgba(0, 0, 0, 0.2) inset,0 0 4px rgba(0, 0, 0, 0.2) ;
        -moz-box-shadow: 0 0 40px rgba(0, 0, 0, 0.2) inset,0 0 4px rgba(0, 0, 0, 0.2) ;
        box-shadow: 0 0 40px rgba(0, 0, 0, 0.2) inset,0 0 4px rgba(0, 0, 0, 0.2) ;
       
        /*border:  8px 0 8px 0  solid #542E2E;*/
       /* border-top: 8px solid #542E2E;*/
        /*border-bottom: 8px solid #542E2E;*/
    
         /*border-right: 8px solid #542E2E;
        border-left: 8px solid #542E2E;*/
    
       
       /*max-width: 100;*/
       width: auto;
    
    }
    
    
    .h2kuro02 span{
    
      display:block;
      border-top:1px dashed #D1D5E5;
      border-bottom:1px dashed #D1D5E5;
      padding:18px 10px 10px 10px;
      background-color: #EFEBE0;
      /*border-radius: 0.3em;*/
      -webkit-box-shadow: 0 0 40px rgba(0, 0, 0, 0.2) inset,0 0 4px rgba(0, 0, 0, 0.2) ;
      -moz-box-shadow: 0 0 40px rgba(0, 0, 0, 0.2) inset,0 0 4px rgba(0, 0, 0, 0.2) ;
      box-shadow: 0 0 40px rgba(0, 0, 0, 0.2) inset,0 0 4px rgba(0, 0, 0, 0.2) ;
    
      
      /*max-width: 100;*/
      width: auto;
    
    
      margin-left: -1.0em;
      margin-right: -1.0em;



      }
  


      .renai01{
        /*ピンク色の背景*/
          background: #F58484;
          padding: 15px;
      
          
          /*max-width: 100;*/
          width: auto;
      
         /* border-right: 8px solid #542E2E;
            border-left: 8px solid #542E2E;*/
        

            margin-left: -1.0em;
            margin-right: -1.0em;

          }
      
      
          .box-renai01 {
            max-width: 550px;
            margin: 0 auto;
            border: 2px solid #DA6C6D;
            background-color: #F5EED3;
            /*border-radius: 3px;*/
            margin-bottom: 30px;
            border-radius: 0.5em;/*角丸*/
      
          }
          
          .box-renai01 span {
            display: flex;
            justify-content: center;
           /* align-items: center;*/
            /*padding: .5em 0;*/
            background-color: #F51432;
            color: #fff;
            font-weight: 600;
            align-items: center;
          }
          
          .box-renai01 p {
            margin: 0;
            padding: 1em 1.5em;
            color: #333;
          }
      
      
      
          .box-renai02 {
      
            font-size: 18px;
            padding: 12px 10px;
            /*color: #fff;*/
            
            padding: 0.5em;/*文字周りの余白*/
            border-radius: 0.5em;/*角丸*/
            /*text-align: center;*/
              background-color: #f7f0cf;
          
              -webkit-box-shadow: 0 0 40px rgba(0, 0, 0, 0.2) inset,0 0 4px rgba(0, 0, 0, 0.2) ;
              -moz-box-shadow: 0 0 40px rgba(0, 0, 0, 0.2) inset,0 0 4px rgba(0, 0, 0, 0.2) ;
              box-shadow: 0 0 40px rgba(0, 0, 0, 0.2) inset,0 0 4px rgba(0, 0, 0, 0.2) ;
          
              border: 3px solid  #7D4D3F;/*線色*/
             
          
          }
          
          
          .box-renai02 span{
          
            display:block;
            border-top:1px dashed #F3E8D7;
            border-bottom:1px dashed #F3E8D7;
            padding:18px 10px 2px 10px;
            background-color: #F5EED3;
            border-radius: 0.3em;/*角丸*/
            /*-webkit-box-shadow: 0 0 40px rgba(0, 0, 0, 0.2) inset,0 0 4px rgba(0, 0, 0, 0.2) ;*/
            /*-moz-box-shadow: 0 0 40px rgba(0, 0, 0, 0.2) inset,0 0 4px rgba(0, 0, 0, 0.2) ;*/
            /*box-shadow: 0 0 40px rgba(0, 0, 0, 0.2) inset,0 0 4px rgba(0, 0, 0, 0.2) ;*/
          
            }



            .mirai01{

              background-color: #a2cec9;
              background-image: repeating-linear-gradient(90deg, transparent, transparent 10px, #94cbc4 10px, #94cbc4 20px);
              padding: 15px;
              margin-left:-36px;
              margin-right:-36px;
              /*max-width: 100;*/
              width: auto;
            
              /*border-right: 8px solid #542E2E;
                border-left: 8px solid #542E2E;*/
            
            
                margin-left: -1.0em;
                margin-right: -1.0em;
            
            }
          
            .ichi01{
          
              background-color: #514C42;
              /*background-image: repeating-linear-gradient(90deg, transparent, transparent 10px, #94cbc4 10px, #94cbc4 20px);*/
              padding: 15px;
              margin-left:-36px;
              margin-right:-36px;
              margin-bottom: auto;
              /*max-width: 100;*/
              width: auto;
            
              /*border-right: 8px solid #542E2E;
                border-left: 8px solid #542E2E;*/
            
            
                margin-left: -1.0em;
                margin-right: -1.0em;
            
            }
          
          
          .h3kuro01 {
          
            font-size: 18px;
            padding: 12px 10px;
             padding: 0.5em;/*文字周りの余白*/
            
              background: url(https://roggy-uranai.com/wp-content/uploads/2024/03/roggy-uranai-h204-2.jpg);
              -webkit-box-shadow: 0 0 40px rgba(0, 0, 0, 0.2) inset,0 0 4px rgba(0, 0, 0, 0.2) ;
              -moz-box-shadow: 0 0 40px rgba(0, 0, 0, 0.2) inset,0 0 4px rgba(0, 0, 0, 0.2) ;
              box-shadow: 0 0 40px rgba(0, 0, 0, 0.2) inset,0 0 4px rgba(0, 0, 0, 0.2) ;
             
              /*border:  8px 0 8px 0  solid #542E2E;*/
             /* border-top: 8px solid #542E2E;*/
              /*border-bottom: 8px solid #542E2E;*/
          
              /* border-right: 8px solid #542E2E;
              border-left: 8px solid #542E2E;*/
          
             margin-left:-35px;
             margin-right:-35px;
             /*max-width: 100;*/
             width: auto;
          
          
             margin-left: -1.0em;
             margin-right: -1.0em;
          
          }
          
          
          .h3kuro02 {
          
              font-size: 18px;
              padding: 12px 10px;
               padding: 0.5em;/*文字周りの余白*/
              
                background: url(https://roggy-uranai.com/wp-content/uploads/2024/04/roggy-uranai-h2h03-2.jpg);
                -webkit-box-shadow: 0 0 40px rgba(0, 0, 0, 0.2) inset,0 0 4px rgba(0, 0, 0, 0.2) ;
                -moz-box-shadow: 0 0 40px rgba(0, 0, 0, 0.2) inset,0 0 4px rgba(0, 0, 0, 0.2) ;
                box-shadow: 0 0 40px rgba(0, 0, 0, 0.2) inset,0 0 4px rgba(0, 0, 0, 0.2) ;
               
                /*border:  8px 0 8px 0  solid #542E2E;*/
               /* border-top: 8px solid #542E2E;*/
                /*border-bottom: 8px solid #542E2E;*/
            
                 /*border-right: 8px solid #542E2E;
                border-left: 8px solid #542E2E;*/
            
               margin-left:-35px;
               margin-right:-35px;
               /*max-width: 100;*/
               width: auto;
            
          
               margin-left: -1.0em;
               margin-right: -1.0em;
          
            }
          
          
            .ichi03{
          
              background-color: #E6E2D7;
              /*background-image: repeating-linear-gradient(90deg, transparent, transparent 10px, #94cbc4 10px, #94cbc4 20px);*/
              padding: 15px;
              margin-left:-36px;
              margin-right:-36px;
              margin-bottom: auto;
              /*max-width: 100;*/
              width: auto;
            
              /*border-right: 8px solid #542E2E;
                border-left: 8px solid #542E2E;*/
            
                margin-left: -1.0em;
                margin-right: -1.0em;
          
            }
          
          
            .ichi04{
          
              background-color: #f58484;
              /*background-image: repeating-linear-gradient(90deg, transparent, transparent 10px, #94cbc4 10px, #94cbc4 20px);*/
              padding: 15px;
              margin-left:-36px;
              margin-right:-36px;
              margin-bottom: auto;
              /*max-width: 100;*/
              width: auto;
            
              /*border-right: 8px solid #542E2E;
                border-left: 8px solid #542E2E;*/
            
            
               /* background-color: #f36c6c;
                background-image: repeating-linear-gradient(90deg, transparent, transparent 10px, #f58484 10px, #f58484 20px);
            */
            
            
            margin-left: -1.0em;
               margin-right: -1.0em;
            
            }
          
          
          
            .ichi05{
          
              background-color: #DBDBDB;
              /*background-image: repeating-linear-gradient(90deg, transparent, transparent 10px, #94cbc4 10px, #94cbc4 20px);*/
              padding: 15px;
              margin-left:-36px;
              margin-right:-36px;
              margin-bottom: auto;
              /*max-width: 100;*/
              width: auto;
            
              /*border-right: 8px solid #542E2E;
                border-left: 8px solid #542E2E;*/
            
            
                margin-left: -1.0em;
                margin-right: -1.0em;
            
            }
            
            
            
            .ichi06{
            
              background-color: #f58484;
              /*background-image: repeating-linear-gradient(90deg, transparent, transparent 10px, #94cbc4 10px, #94cbc4 20px);*/
              padding: 15px;
              margin-left:-36px;
              margin-right:-36px;
              margin-bottom: auto;
              /*max-width: 100;*/
              width: auto;
            
              /*border-right: 8px solid #542E2E;
                border-left: 8px solid #542E2E;*/
            
            
               /* background-color: #f36c6c;
                background-image: repeating-linear-gradient(90deg, transparent, transparent 10px, #f58484 10px, #f58484 20px);
            */
            
            background-size: auto auto;
            background-color: rgba(245, 132, 132, 1);
            background-image: repeating-linear-gradient(111deg, transparent, transparent 10px, rgba(243, 108, 108, 1) 10px, rgba(243, 108, 108, 1) 20px );
            
            margin-left: -1.0em;
               margin-right: -1.0em;
            
            }
            
          
            .symbol08{
          
              background-color: #f58484;
              /*background-image: repeating-linear-gradient(90deg, transparent, transparent 10px, #94cbc4 10px, #94cbc4 20px);*/
              padding: 15px;
              margin-left:-36px;
              margin-right:-36px;
              margin-bottom: auto;
              /*max-width: 100;*/
              width: auto;
            
              /*border-right: 8px solid #542E2E;
                border-left: 8px solid #542E2E;*/
            
            
               /* background-color: #f36c6c;
                background-image: repeating-linear-gradient(90deg, transparent, transparent 10px, #f58484 10px, #f58484 20px);
            */
            
            background-size: auto auto;
            background-color: rgba(245, 132, 132, 1);
            background-image: repeating-linear-gradient(111deg, transparent, transparent 10px, rgba(243, 108, 108, 1) 10px, rgba(243, 108, 108, 1) 20px );
            
            background-color: rgba(247, 215, 226, 1);
          background-image: repeating-linear-gradient(90deg, transparent, transparent 10px, rgba(255, 249, 251, 1) 10px, rgba(255, 249, 251, 1) 20px );
            
          background: url(https://roggy-uranai.com/wp-content/uploads/2024/06/roggy-uranai-haikei03.png);
          
          
          margin-left: -1.0em;
           margin-right: -1.0em;
          
          
            }
          
          
           


  /*必要ならばここにコードを書く*/
}

/************************************
** 追記　カスタマイズ
************************************/

/*ヘッダーのタイトル下に下線を入れたい*/

.header {
  height: 100%;
  flex-shrink: 0;
  border-bottom: 15px double #C3AF66;
  /*box-shadow: 0 15px 25px 0 rgba(0, 0, 0, 0.5);*/
}

.header-in {
  display: flex;
  flex-direction: column;
  justify-content: center;

  
}

.header-container-in.hlt-top-menu {
  display: flex;
  justify-content: space-between;
  align-items: center;
  align-content: center;
}

.site-name-text {
  font-size: 12px;
}

.logo-text {
  padding: 20px 0 20px;
  font-size: 1em;
}


.logo-image {
  padding: 10px 0 0px;
  font-size: inherit;

}


/*メインコンテンツを枠で囲みたい・600pxにしたい*/

/************************************
** 本文部分
************************************/

.main {
  width: 100%;
  max-width: 600px;
  margin: 0 auto; /* 中央寄せ */
  padding: 29px 29px;
  border: 8px solid #542E2E;
  border-radius: var(--cocoon-basic-border-radius);
  position: relative;
  z-index: 0;
  /*box-shadow: 0 25px 45px 0 rgba(0, 0, 0, .5);*/

  background-color: #F8F7F2;
  
}

.no-scrollable-main .main {
  height: 100%;
  margin: 0 auto; /* 中央寄せ */
}


.no-sidebar .content .main {
  margin: 0;
  width: 100%;
  margin: 0 auto; /* 中央寄せ 404で挙動が変だったので*/
  /*border: 8px solid #542E2E; /*  レスポンシブすると枠がずれるため　6-4  */*/
}

/*PC用に背景を入れる*/

body {
  /* フォントの種類 */
  font-family: var(--cocoon-default-font);
  /* フォントのサイズ */
  font-size: var(--cocoon-default-text-size);
  /* フォントの色 */
  color: var(--cocoon-text-color);
  /* カーニングの設定 */
  /* 行間の設定 */
  line-height: 1.8;
  margin: 0;
  overflow-wrap: break-word;
  /*background: url(https://roggy-uranai.com/wp-content/uploads/2024/03/roggy-uranai-background09.jpg) #fff;*/
  /*background: url(https://roggy-uranai.com/wp-content/uploads/2024/03/roggy-uranai-background07.jpg);*/
  background: #EAEAEA;
  text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
  /* コンテンツの高さが画像の高さより大きい時、動かないように固定 */
background-attachment: fixed;
   /*background-size:  cover;/*
  /*background-size: 100% auto;*/
  background-repeat: repeat ;
}


 /* サイドバーの背景を透過させたい */

/************************************
** サイドバーのスタイル
************************************/
.sidebar {
  width: 376px;
  border: 1px solid transparent;
  padding: 19px;
  border-radius: var(--cocoon-basic-border-radius);
  background-color: transparent;
}
.sidebar h2,
.sidebar h3 {
  background-color: transparent;
  padding: 12px;
  margin: 16px 0;
  border-radius: var(--cocoon-badge-border-radius);
}


/************************************
** フッター
************************************/
.footer {
  margin-top: 20px;
  padding: 8px;
  border-top: 5px solid #C3AF66;
  
}

.copyright {
  margin-top: 8px;
}

.footer-widgets,
.footer-widgets-mobile {
  margin: 10px auto;
  display: flex;
}

.footer-mobile, .footer-left,
.footer-center,
.footer-right {
  padding: 10px 16px;
}

.footer-left,
.footer-center,
.footer-right {
  width: 33.33%;
}

.footer-widgets-mobile {
  display: none;
}


/************************************
** 見出しのデザインを変更
************************************/


.article h2 {
  font-size: 24px;
  padding: 25px;
 /* background-color: var(--cocoon-xx-thin-color);*/
 background: none;
  /*border-radius: var(--cocoon-badge-border-radius);*/
  text-align: center;
  margin: 1.2em 0 1.2em;

}



.h2kuro01 {

  font-size: 18px;
  padding: 12px 10px;
   padding: 0.5em;/*文字周りの余白*/
  
    background: url(https://roggy-uranai.com/wp-content/uploads/2024/03/roggy-uranai-h204-2.jpg);
    -webkit-box-shadow: 0 0 40px rgba(0, 0, 0, 0.2) inset,0 0 4px rgba(0, 0, 0, 0.2) ;
    -moz-box-shadow: 0 0 40px rgba(0, 0, 0, 0.2) inset,0 0 4px rgba(0, 0, 0, 0.2) ;
    box-shadow: 0 0 40px rgba(0, 0, 0, 0.2) inset,0 0 4px rgba(0, 0, 0, 0.2) ;
   
    /*border:  8px 0 8px 0  solid #542E2E;*/
   /* border-top: 8px solid #542E2E;*/
    /*border-bottom: 8px solid #542E2E;*/

    /* border-right: 8px solid #542E2E;
    border-left: 8px solid #542E2E;*/

   margin-left:-35px;
   margin-right:-35px;
   /*max-width: 100;*/
   width: auto;


   margin-left: -1.56em;
   margin-right: -1.56em;


}


.h2kuro01 span{

  display:block;
  border-top:1px dashed #D1D5E5;
  border-bottom:1px dashed #D1D5E5;
  padding:18px 10px 10px 10px;
  background-color: #EFEBE0;
 /* border-radius: 0.3em;*/
  -webkit-box-shadow: 0 0 40px rgba(0, 0, 0, 0.2) inset,0 0 4px rgba(0, 0, 0, 0.2) ;
  -moz-box-shadow: 0 0 40px rgba(0, 0, 0, 0.2) inset,0 0 4px rgba(0, 0, 0, 0.2) ;
  box-shadow: 0 0 40px rgba(0, 0, 0, 0.2) inset,0 0 4px rgba(0, 0, 0, 0.2) ;

  margin-left:-35px;
  margin-right:-35px;
  /*max-width: 100;*/
  width: auto;


  }



  .h2kuro02 {

    font-size: 18px;
    padding: 12px 10px;
     padding: 0.5em;/*文字周りの余白*/
    
      background: url(https://roggy-uranai.com/wp-content/uploads/2024/04/roggy-uranai-h2h03-2.jpg);
      -webkit-box-shadow: 0 0 40px rgba(0, 0, 0, 0.2) inset,0 0 4px rgba(0, 0, 0, 0.2) ;
      -moz-box-shadow: 0 0 40px rgba(0, 0, 0, 0.2) inset,0 0 4px rgba(0, 0, 0, 0.2) ;
      box-shadow: 0 0 40px rgba(0, 0, 0, 0.2) inset,0 0 4px rgba(0, 0, 0, 0.2) ;
     
      /*border:  8px 0 8px 0  solid #542E2E;*/
     /* border-top: 8px solid #542E2E;*/
      /*border-bottom: 8px solid #542E2E;*/
  
      /* border-right: 8px solid #542E2E;
      border-left: 8px solid #542E2E;*/
  
     margin-left:-35px;
     margin-right:-35px;
     /*max-width: 100;*/
     width: auto;
  

     margin-left: -1.56em;
     margin-right: -1.56em;


  }
  
  
  .h2kuro02 span{
  
    display:block;
    border-top:1px dashed #D1D5E5;
    border-bottom:1px dashed #D1D5E5;
    padding:18px 10px 10px 10px;
    background-color: #EFEBE0;
    /*border-radius: 0.3em;*/
    -webkit-box-shadow: 0 0 40px rgba(0, 0, 0, 0.2) inset,0 0 4px rgba(0, 0, 0, 0.2) ;
    -moz-box-shadow: 0 0 40px rgba(0, 0, 0, 0.2) inset,0 0 4px rgba(0, 0, 0, 0.2) ;
    box-shadow: 0 0 40px rgba(0, 0, 0, 0.2) inset,0 0 4px rgba(0, 0, 0, 0.2) ;
  
    margin-left:-37px;
    margin-right:-37px;
    /*max-width: 100;*/
    width: auto;
  
  
    }




.ttl_background6 {
  font-weight: bold;
  padding: 0.5em 1em;
  margin-left: 10px;
  margin-right: 10px;
  background-color: #b2d3e4;
  box-shadow: 0 0 0 10px #b2d3e4;
  border-top: 2px dashed #fff;
  border-bottom: 2px dashed #fff;
}





.article h3 {
  /*border-left: 7px solid var(--cocoon-middle-thickness-color);*/
  /*border-right: 1px solid var(--cocoon-thin-color);*/
  /*border-top: 1px solid var(--cocoon-thin-color);*/
  /*border-bottom: 1px solid var(--cocoon-thin-color);*/
  font-size: 22px;
  /*padding: 3px 0px;*/

  color: #59432B;/*文字色*/
  /*border:none;*/
  border: solid 3px #6E5B4A;/*線色*/
 
  background-color: #F8CA96;
  padding: 0.2em;/*文字周りの余白*/

 -webkit-box-shadow: 0 0 40px rgba(0, 0, 0, 0.2) inset,0 0 4px rgba(0, 0, 0, 0.2) ;
  -moz-box-shadow: 0 0 40px rgba(0, 0, 0, 0.2) inset,0 0 4px rgba(0, 0, 0, 0.2) ;
  box-shadow: 0 0 40px rgba(0, 0, 0, 0.2) inset,0 0 4px rgba(0, 0, 0, 0.2) ;
  border-radius: 0.5em;/*角丸*/

  margin: 2.1em 0 0em;

}


.h3retoro {

  font-size: 22px;
  padding: 12px 10px;
  /*color: #fff;*/
  border: solid 3px #F2BFBF;/*線色*/
  padding: 0.5em;/*文字周りの余白*/
  border-radius: 0.5em;/*角丸*/
  text-align: center;
    background-color: #EA9395;

    -webkit-box-shadow: 0 0 40px rgba(0, 0, 0, 0.2) inset,0 0 4px rgba(0, 0, 0, 0.2) ;
    -moz-box-shadow: 0 0 40px rgba(0, 0, 0, 0.2) inset,0 0 4px rgba(0, 0, 0, 0.2) ;
    box-shadow: 0 0 40px rgba(0, 0, 0, 0.2) inset,0 0 4px rgba(0, 0, 0, 0.2) ;

}

.h3retoro span{
  display:block;
  border-top:1px dashed #C9A670;
  border-bottom:1px dashed #C9A670;
  padding:10px 10px 10px 10px;
  background-color: #F9E4C9;
  -webkit-box-shadow: 0 0 40px rgba(0, 0, 0, 0.2) inset,0 0 4px rgba(0, 0, 0, 0.2) ;
  -moz-box-shadow: 0 0 40px rgba(0, 0, 0, 0.2) inset,0 0 4px rgba(0, 0, 0, 0.2) ;
  box-shadow: 0 0 40px rgba(0, 0, 0, 0.2) inset,0 0 4px rgba(0, 0, 0, 0.2) ;

  border-radius: 0.5em;/*角丸*/

}


.h3aka {

  font-size: 22px;
  padding: 12px 20px;
  color: #fff;/*文字色*/
  border: solid 3px #F2BFBF;/*線色*/
  padding: 0.5em;/*文字周りの余白*/
  border-radius: 0.5em;/*角丸*/
  text-align: center;
    background-color: #EA9395;
}

.h3midori {
  font-size: 22px;
  padding: 12px 20px;
  color: #fff;/*文字色*/
  /*border: solid 3px #85C17F;*/
  padding: 0.1em;/*文字周りの余白*/
  border-radius: 0.5em;/*角丸*/
  text-align: center;
    background-color: #73A56D;

   
}

.h3midori span{
  display:block;
  border-top:1px dashed #fff;
  border-bottom:1px dashed #fff;
  padding:10px 10px;
}








/************************************
** 目次を数字ではないものに
************************************/

.toc {
  border: 1px solid var(--cocoon-basic-border-color);
  font-size: 0.9em;
  padding: 1em 1.6em;
  display: table;
  background-color: #FFFDF7;
}


.article .toc-list > li li {
  list-style: none;
}

.toc-list > li li ::before {
  content: '';
  width: 5px;
  height: 5px;
  display: inline-block;
  left: -15px;
  border-radius: 100%;
  background: #cdcdcd;
  position: relative;
  margin-bottom: 2px;
 }

 .toc-list > li li a {
  font-weight: normal;
  font-size: 95%;
  color: #BE8C8C;
  margin-left: -10px;
 }



/************************************
** アイコンフキダシボックス(グリーン)
************************************/
/* 緑　ボックス全体 */
.iconbox-green{
  background: #CEDA9C !important; /* 背景色 */
  border-bottom : solid 3px #A1B06F;/*線色*/
  border-left : solid 3px #A1B06F;/*線色*/
  border-right : solid 3px #A1B06F;/*線色*/
  
  -webkit-box-shadow: 0 0 40px rgba(0, 0, 0, 0.2) inset,0 0 4px rgba(0, 0, 0, 0.2) ;
  -moz-box-shadow: 0 0 40px rgba(0, 0, 0, 0.2) inset,0 0 4px rgba(0, 0, 0, 0.2) ;
  box-shadow: 0 0 40px rgba(0, 0, 0, 0.2) inset,0 0 4px rgba(0, 0, 0, 0.2) ;
  border-radius: 0.5em;/*角丸*/
  

}
/* 緑　ボックスタイトル */
.iconbox-green .box-head-green{
  background: #2fcdb4 !important; /* 背景色 */
}

/* 緑　テキストの背景 */
.box-body{
  background: #ECF5D9 !important; /* 背景色 */
  padding: 1em;/* 余白 */

}


/************************************
** アイコンフキダシボックス(グリーン)
************************************/

.box-green01 {

  font-size: 18px;
  padding: 12px 10px;
  /*color: #fff;*/
  
  padding: 0.5em;/*文字周りの余白*/
  border-radius: 0.5em;/*角丸*/
  /*text-align: center;*/
    background-color: #D2DDA3;

    -webkit-box-shadow: 0 0 40px rgba(0, 0, 0, 0.2) inset,0 0 4px rgba(0, 0, 0, 0.2) ;
    -moz-box-shadow: 0 0 40px rgba(0, 0, 0, 0.2) inset,0 0 4px rgba(0, 0, 0, 0.2) ;
    box-shadow: 0 0 40px rgba(0, 0, 0, 0.2) inset,0 0 4px rgba(0, 0, 0, 0.2) ;

    border: 3px solid  #7B8348;/*線色*/
   

}

.box-green01 span{
  display:block;
  border-top:1px dashed #A2B072;
  border-bottom:1px dashed #A2B072;
  padding:18px 10px 2px 15px;
  background-color: #E9EEDA;
  border-radius: 0.3em;/*角丸*/
  -webkit-box-shadow: 0 0 40px rgba(0, 0, 0, 0.2) inset,0 0 4px rgba(0, 0, 0, 0.2) ;
  -moz-box-shadow: 0 0 40px rgba(0, 0, 0, 0.2) inset,0 0 4px rgba(0, 0, 0, 0.2) ;
  box-shadow: 0 0 40px rgba(0, 0, 0, 0.2) inset,0 0 4px rgba(0, 0, 0, 0.2) ;

  

}

/* 紫　ボックス　*/

.box-murasaki01 {

  font-size: 18px;
  padding: 12px 10px;
  /*color: #fff;*/
  
  padding: 0.5em;/*文字周りの余白*/
  border-radius: 0.5em;/*角丸*/
  /*text-align: center;*/
    background-color: #BBC1E3;

    -webkit-box-shadow: 0 0 40px rgba(0, 0, 0, 0.2) inset,0 0 4px rgba(0, 0, 0, 0.2) ;
    -moz-box-shadow: 0 0 40px rgba(0, 0, 0, 0.2) inset,0 0 4px rgba(0, 0, 0, 0.2) ;
    box-shadow: 0 0 40px rgba(0, 0, 0, 0.2) inset,0 0 4px rgba(0, 0, 0, 0.2) ;

    border: 3px solid  #727BA3;/*線色*/
   

}


.box-murasaki01 span{

  display:block;
  border-top:1px dashed #D1D5E5;
  border-bottom:1px dashed #D1D5E5;
  padding:18px 10px 2px 15px;
  background-color: #EFEBE0;
  border-radius: 0.3em;/*角丸*/
  -webkit-box-shadow: 0 0 40px rgba(0, 0, 0, 0.2) inset,0 0 4px rgba(0, 0, 0, 0.2) ;
  -moz-box-shadow: 0 0 40px rgba(0, 0, 0, 0.2) inset,0 0 4px rgba(0, 0, 0, 0.2) ;
  box-shadow: 0 0 40px rgba(0, 0, 0, 0.2) inset,0 0 4px rgba(0, 0, 0, 0.2) ;

  }

/* 水色　ボックス　*/

.box-ao01 {

  font-size: 18px;
  padding: 12px 10px;
  /*color: #fff;*/
  
  padding: 0.5em;/*文字周りの余白*/
  border-radius: 0.5em;/*角丸*/
  /*text-align: center;*/
    background-color: #A2D0DB;

    -webkit-box-shadow: 0 0 40px rgba(0, 0, 0, 0.2) inset,0 0 4px rgba(0, 0, 0, 0.2) ;
    -moz-box-shadow: 0 0 40px rgba(0, 0, 0, 0.2) inset,0 0 4px rgba(0, 0, 0, 0.2) ;
    box-shadow: 0 0 40px rgba(0, 0, 0, 0.2) inset,0 0 4px rgba(0, 0, 0, 0.2) ;

    border: 3px solid  #477A82;/*線色*/
   

}

.box-ao01 span{
  display:block;
  border-top:1px dashed #72A2AF;
  border-bottom:1px dashed #72A2AF;
  padding:18px 10px 2px 15px;
  background-color: #F7F7F7;
  border-radius: 0.3em;/*角丸*/
  -webkit-box-shadow: 0 0 40px rgba(0, 0, 0, 0.2) inset,0 0 4px rgba(0, 0, 0, 0.2) ;
  -moz-box-shadow: 0 0 40px rgba(0, 0, 0, 0.2) inset,0 0 4px rgba(0, 0, 0, 0.2) ;
  box-shadow: 0 0 40px rgba(0, 0, 0, 0.2) inset,0 0 4px rgba(0, 0, 0, 0.2) ;

  

}



/* 黄色　ボックス　*/

.box-ki01 {

  font-size: 18px;
  padding: 12px 10px;
  /*color: #fff;*/
  
  padding: 0.5em;/*文字周りの余白*/
  border-radius: 0.5em;/*角丸*/
  /*text-align: center;*/
    background-color: #E0CD6D;

    -webkit-box-shadow: 0 0 40px rgba(0, 0, 0, 0.2) inset,0 0 4px rgba(0, 0, 0, 0.2) ;
    -moz-box-shadow: 0 0 40px rgba(0, 0, 0, 0.2) inset,0 0 4px rgba(0, 0, 0, 0.2) ;
    box-shadow: 0 0 40px rgba(0, 0, 0, 0.2) inset,0 0 4px rgba(0, 0, 0, 0.2) ;

    border: 3px solid  #7F7B46;/*線色*/
   

}

.box-ki01 span{
  display:block;
  border-top:1px dashed #ADAD72;
  border-bottom:1px dashed #ADAD72;
  padding:18px 10px 2px 15px;
  background-color: #FCF9E8;
  border-radius: 0.3em;/*角丸*/
  -webkit-box-shadow: 0 0 40px rgba(0, 0, 0, 0.2) inset,0 0 4px rgba(0, 0, 0, 0.2) ;
  -moz-box-shadow: 0 0 40px rgba(0, 0, 0, 0.2) inset,0 0 4px rgba(0, 0, 0, 0.2) ;
  box-shadow: 0 0 40px rgba(0, 0, 0, 0.2) inset,0 0 4px rgba(0, 0, 0, 0.2) ;

  

}


/* 赤色　ボックス　*/

.box-aka01 {

  font-size: 18px;
  padding: 12px 10px;
  /*color: #fff;*/
  
  padding: 0.5em;/*文字周りの余白*/
  border-radius: 0.5em;/*角丸*/
  /*text-align: center;*/
    background-color: #D6A0A2;

    -webkit-box-shadow: 0 0 40px rgba(0, 0, 0, 0.2) inset,0 0 4px rgba(0, 0, 0, 0.2) ;
    -moz-box-shadow: 0 0 40px rgba(0, 0, 0, 0.2) inset,0 0 4px rgba(0, 0, 0, 0.2) ;
    box-shadow: 0 0 40px rgba(0, 0, 0, 0.2) inset,0 0 4px rgba(0, 0, 0, 0.2) ;

    border: 3px solid  #7C454A;/*線色*/
   

}

.box-aka01 span{
  display:block;
  border-top:1px dashed #AA7071;
  border-bottom:1px dashed #AA7071;
  padding:18px 10px 2px 15px;
  background-color: #F2E7E9;
  border-radius: 0.3em;/*角丸*/
  -webkit-box-shadow: 0 0 40px rgba(0, 0, 0, 0.2) inset,0 0 4px rgba(0, 0, 0, 0.2) ;
  -moz-box-shadow: 0 0 40px rgba(0, 0, 0, 0.2) inset,0 0 4px rgba(0, 0, 0, 0.2) ;
  box-shadow: 0 0 40px rgba(0, 0, 0, 0.2) inset,0 0 4px rgba(0, 0, 0, 0.2) ;

  

}





/* シンボル用のボックス　*/

.box-013 {
  max-width: 450px;
  margin: 0 auto;
  border: 2px solid #2589d0;
  border-radius: 3px;
  margin-bottom: 30px;
}

.box-013 span {
  display: flex;
  justify-content: center;
 /* align-items: center;*/
  /*padding: .5em 0;*/
  background-color: #2589d0;
  color: #fff;
  font-weight: 600;
  align-items: center;
}

.box-013 p {
  margin: 0;
  padding: 1em 1.5em;
  color: #333;
}

.box-014 {
  max-width: 400px;
  margin: 0 auto;
  border: 2px solid #2589d0;
  border-radius: 3px;
  margin-bottom: 30px;
}

.box-014 span {
  display: flex;
  justify-content: center;
  align-items: center;
 /* padding: .5em 0;*/
  background-color: #2589d0;
  color: #fff;
  font-weight: 600;
  
}

.box-014 p {
  margin: 0;
  padding: 1em 1.5em;
  color: #333;
}

.heading-17 {
  display: flex;
  justify-content: start;
  align-items: center;
  position: relative;
  padding: .5em .7em;
  overflow: hidden;
  border: 2px solid #2589d0;
  border-radius: 5px;
  color: #333333;
}

.heading-17:before {
  position: absolute;
  top: -50%;
  left: -30px;
  z-index: -1;
  transform: rotate(25deg);
  width: 100px;
  height: 200%;
  background-color: #2589d0;
  content: '';
}

.heading-17 span {
  margin-right: 1.1em;
  color: #fff;
  font-size: 1.1em
}

.moji28{
font-size: 28px;

}
  
/************************************
** 画像が追従するリスト
************************************/

*,
*::before,
*::after {
  box-sizing: border-box;
}

/*body {
  background: #444;
  color: #fff;
  font-family: 'Poppins', sans-serif;
  margin: 0;
}*/

/*p {
  margin: 0 0 13px 0;
}

a {
  color: #fff;
}*/

.center { text-align: center; }

.container {
  width: 90%;
  /*width: 95%;*/
  max-width: 1220px;
  margin: 0 auto;
}

.episode {
  display: grid;
grid-template-columns: 1fr 3fr;
  position: relative;
}

.episode__number {
  font-size: 3vw;
  font-weight: 600;
  padding: 10px 0;
  position: sticky;
  top: 0;
  text-align: center;
  height: calc(10vw + 20px);
  transition: all 0.2s ease-in;
}

.episode__content {
 /* border-top: 2px solid #fff;*/
  display: grid;
  /*grid-template-columns: 1fr 4fr;*/
  grid-gap: 10px;
  padding: 15px 0 0 20px;
}

.episode__content .title {
  font-weight: 600
}

.episode__content .story {
  line-height: 26px;
}

@media (max-width: 600px) {
  .episode__content {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 576px) {
  .episode__content .story {
    font-size: 15px;
  }
}


.symbol01{

background: #ffffff;
padding: 15px;
}


.symbol02{
/*マス目のついた背景画像*/
  background: url(https://roggy-uranai.com/wp-content/uploads/2024/04/roggy-uranai-symbol001.jpg);
  padding: 15px;

  }
  

  .symbol03{
    /*マス目のついた背景画像*/
      background: url(https://roggy-uranai.com/wp-content/uploads/2024/04/roggy-uranai-mirai0bg3.webp);
      padding: 15px;
    width: 100%;
      }


      .symbol04{

        color:  #ffffff;
        padding: 15px;
        
        background-color: #635D5F;

        }


/*.gazou-kage{
  
    filter: drop-shadow(20px 20px 10px rgba(0,0,0,.5));
    margin: 10px;
    width: 100px;
  }
*/
  
  
  .glay{

    
    padding: 15px;
    
    background-color: #EAE9E5;
    border-radius: 0.3em;/*角丸*/
    }

    .glay02{

      
      padding: 15px;
      
      background-color: #FFF2D3;
      border-radius: 0.3em;/*角丸*/
      }


/************************************
** 見出し　恋愛系のパターン
************************************/

.renai01{
  /*ピンク色の背景*/
   /* background: #F58484;*/
    padding: 15px;

    margin-left:-36px;
    margin-right:-36px;
    /*max-width: 100;*/
    width: auto;

    /*border-right: 8px solid #542E2E;
      border-left: 8px solid #542E2E;*/


      background-color: #f36c6c;
      background-image: repeating-linear-gradient(90deg, transparent, transparent 10px, #f58484 10px, #f58484 20px);


      margin-left: -1.56em;
   margin-right: -1.56em;
  
    }


    .box-renai01 {
      max-width: 550px;
      margin: 0 auto;
      border: 2px solid #DA6C6D;
      background-color: #F5EED3;
      /*border-radius: 3px;*/
      margin-bottom: 30px;
      border-radius: 0.5em;/*角丸*/

    }
    
    .box-renai01 span {
      display: flex;
      justify-content: center;
     /* align-items: center;*/
      /*padding: .5em 0;*/
      background-color: #F51432;
      color: #fff;
      font-weight: 600;
      align-items: center;
    }
    
    .box-renai01 p {
      margin: 0;
      padding: 1em 1.5em;
      color: #333;
    }



    .box-renai02 {

      font-size: 18px;
      padding: 12px 10px;
      /*color: #fff;/*文字色*/*/
      
      padding: 0.5em;/*文字周りの余白*/
      border-radius: 0.5em;/*角丸*/
      /*text-align: center;*/
        background-color: #f7f0cf;
    
        -webkit-box-shadow: 0 0 40px rgba(0, 0, 0, 0.2) inset,0 0 4px rgba(0, 0, 0, 0.2) ;
        -moz-box-shadow: 0 0 40px rgba(0, 0, 0, 0.2) inset,0 0 4px rgba(0, 0, 0, 0.2) ;
        box-shadow: 0 0 40px rgba(0, 0, 0, 0.2) inset,0 0 4px rgba(0, 0, 0, 0.2) ;
    
        border: 3px solid  #7D4D3F;/*線色*/
       
    
    }
    
    
    .box-renai02 span{
    
      display:block;
      border-top:1px dashed #F3E8D7;
      border-bottom:1px dashed #F3E8D7;
      padding:18px 10px 2px 10px;
      background-color: #F5EED3;
      border-radius: 0.3em;/*角丸*/
      /*-webkit-box-shadow: 0 0 40px rgba(0, 0, 0, 0.2) inset,0 0 4px rgba(0, 0, 0, 0.2) ;
      -moz-box-shadow: 0 0 40px rgba(0, 0, 0, 0.2) inset,0 0 4px rgba(0, 0, 0, 0.2) ;
      box-shadow: 0 0 40px rgba(0, 0, 0, 0.2) inset,0 0 4px rgba(0, 0, 0, 0.2) ;*/
    
      }




.mirai01{

  background-color: #a2cec9;
  background-image: repeating-linear-gradient(90deg, transparent, transparent 10px, #94cbc4 10px, #94cbc4 20px);
  padding: 15px;
  margin-left:-36px;
  margin-right:-36px;
  /*max-width: 100;*/
  width: auto;

 /* border-right: 8px solid #542E2E;
    border-left: 8px solid #542E2E;*/


    margin-left: -1.56em;
    margin-right: -1.56em;

}

/*下半分のマーカー色（km）*/
.marker-under01 {
  background: linear-gradient(transparent 60%, #FFF38C 60%);
}

.marker-under02 {
  background: linear-gradient(transparent 60%, #FF958C 60%);
}

.marker-under03 {
  background: linear-gradient(transparent 60%, #E5F2FF 65%);
}


/************************************
** 見出し　正位置の囲み
************************************/

:root {
  --yellow: #F1E5C7;
  --dark: #514C42;
  --deg: -86deg;
  --trans: all 0.4s ease 0s;
}


.member {
  margin: 1.5em 0 0.5em;
  padding: 0.45em;
  background: linear-gradient(
      83deg,
      var(--yellow) 0 97%,
      #fff0 calc(97% + 1px) 100%
  );
  position: relative;
  list-style: none;
  display: inline-block;
 /* transform: scale(0.85);*/
  transition: var(--trans);

  filter: drop-shadow(0px 20px 10px #0008);

}

.member:nth-of-type(even) {
 /* text-align: right;*/
  background: linear-gradient(
      -83deg,
      var(--yellow) 0 97%,
      #fff0 calc(97% + 1px) 100%
  );


/*margin-right: 40px;*/


}

.thumb {
  width: 6em;
  height: 6em;
 /* width: 13vmin;
  height: 13vmin;*/
  float: left;
  margin-right: 1.25em;
  background: linear-gradient(
      var(--deg),
      var(--dark) 0 70%,
      var(--yellow) 0% 100%
  );
  transform: rotate(-4deg);
  transition: var(--trans);
  border-radius: 0.25em;
  overflow: hidden;
  margin-left: -2em;
  padding: 0.5em;
}

.member:nth-of-type(even) .thumb {
  --deg: 86deg;
  float: right;
  margin-left: 2em;
  margin-right: -3em;
  transform: rotate(4deg);
}

.thumb img {
  width: 100%;
  height: 100%;
  border-radius: 0.25em;
 /* filter: grayscale(1);*/
  background: var(--dark);
}

.member:hover {
  transform: scale(1);
  transition: var(--trans);
  filter: drop-shadow(0px 20px 10px #0008);
}

.member:hover .thumb {
  padding: 0.1em;
  transition: var(--trans);
  transform: rotate(-1deg);
  --deg: -89deg;
}

.member:nth-of-type(even):hover .thumb {
  --deg: 91deg;
}

.member:hover .thumb img {
  filter: none;
  transition: var(--trans);
}

.description {
  padding-top: 1vmin;
}

.description p {
  padding: 0 2em;
  margin-bottom: 1em;
  margin-top: 0.75em;

}

h4 {
  background: linear-gradient(182deg, #fff0 60%, var(--dark) 0 100%);
  display: inline;
  transform: rotate(-2deg);
  position: absolute;
  margin: 0;
  margin-top: -2.25em;
  left: 9vmin;
  padding: 0.5em 0.75em;
  color: var(--yellow);
  border-radius: 0.25em;
  font-size: 1.35em;
  transform-origin: left bottom;
}

.member:nth-of-type(even) h4 {
  left: inherit;
  right: 9vmin;
  transform: rotate(2deg);
  transform-origin: right bottom;
  background: linear-gradient(-182deg, #fff0 60%, var(--dark) 0 100%);
}

.member:hover h4 {
  transition: var(--trans);
  transform: rotate(0deg);
  background: linear-gradient(180deg, #fff0 59%, var(--dark) 0 100%);
}


.article h4 {
  border-top: 0px solid var(--cocoon-thin-color);
 border-bottom: 0px solid var(--cocoon-thin-color);
font-size: 23px;
/*padding: 0 0;*/

}




.co-funder:after {
  content: "Roggy's Tarot";
  font-size: 0.75em;
  position: absolute;
  top: -1.5em;
  background: var(--yellow);
  right: 4em;
  transform: rotate(3deg);
  padding: 0.35em 0.75em 0.5em;
  border-radius: 0.25em;
  color: var(--dark);
  font-weight: bold;
}

.co-funder:nth-of-type(even):after {
  right: inherit;
  left: 4em;
  transform: rotate(-3deg);
}

.description p a {
  display: inline-block;
  margin: 0.5em 0 0 0;
  background: var(--dark);
  color: var(--yellow);
  padding: 0.1em 0.5em 0.35em;
  border-radius: 0.5em;
  text-decoration: none;
  transition: var(--trans);
}
.description p a:hover {
  transition: var(--trans);
  color: var(--dark);
  background: var(--yellow);
  font-weight: bold;
}

.description p a img {
  float: left;
  width: 22px;
  filter: invert(1);
  border-radius: 0.15em;
  padding: 2px;
  background: #fff;
  margin-right: 2px;
}

.ichi01{

  background-color: #514C42;
  /*background-image: repeating-linear-gradient(90deg, transparent, transparent 10px, #94cbc4 10px, #94cbc4 20px);*/
  padding: 15px;
  margin-left:-36px;
  margin-right:-36px;
  margin-bottom: auto;
  /*max-width: 100;*/
  width: auto;

 /* border-right: 8px solid #542E2E;
    border-left: 8px solid #542E2E;*/


    margin-left: -1.56em;
    margin-right: -1.56em;

}
.yohaku {

  margin-bottom: 45px; 

}


.rei01 {
  /*display: inline-block;*/
  margin: 0.5em 0 20px 20px;
  background: var(--dark);
  color: var(--yellow);
  padding: 0.1em 0.5em 0.35em;
  border-radius: 0.5em;
  text-decoration: none;
  transition: var(--trans);
  text-align: center;
}
/*.rei01:hover {
  transition: var(--trans);
  color: var(--dark);
  background: var(--yellow);
  font-weight: bold;
}*/

.rei04 {
  /*display: inline-block;*/
  margin: 0.5em 0 20px 20px;
  background: var(--dark);
  color: var(--yellow);
  padding: 0.1em 0.5em 0.35em;
  border-radius: 0.5em;
  text-decoration: none;
  transition: var(--trans);
  /*text-align: center;*/
}
/*.rei04:hover {
  transition: var(--trans);
  color: var(--dark);
  background: var(--yellow);
  font-weight: bold;
}*/





/* 　実例　茶色の正位置の補足　　*/

.article h5 {

border-bottom: 0px;


}



.h3kuro01 {

  font-size: 18px;
  padding: 12px 10px;
   padding: 0.5em;/*文字周りの余白*/
  
    background: url(https://roggy-uranai.com/wp-content/uploads/2024/03/roggy-uranai-h204-2.jpg);
    -webkit-box-shadow: 0 0 40px rgba(0, 0, 0, 0.2) inset,0 0 4px rgba(0, 0, 0, 0.2) ;
    -moz-box-shadow: 0 0 40px rgba(0, 0, 0, 0.2) inset,0 0 4px rgba(0, 0, 0, 0.2) ;
    box-shadow: 0 0 40px rgba(0, 0, 0, 0.2) inset,0 0 4px rgba(0, 0, 0, 0.2) ;
   
    /*border:  8px 0 8px 0  solid #542E2E;*/
   /* border-top: 8px solid #542E2E;*/
    /*border-bottom: 8px solid #542E2E;*/

   /*  border-right: 8px solid #542E2E;
    border-left: 8px solid #542E2E;*/

   margin-left:-35px;
   margin-right:-35px;
   /*max-width: 100;*/
   width: auto;


   margin-left: -1.56em;
   margin-right: -1.56em;

}


.h3kuro01 span{

  display:block;
  border-top:1px dashed #D1D5E5;
  border-bottom:1px dashed #D1D5E5;
  padding:18px 10px 10px 10px;
  background-color: #EFEBE0;
 /* border-radius: 0.3em;*/
  -webkit-box-shadow: 0 0 40px rgba(0, 0, 0, 0.2) inset,0 0 4px rgba(0, 0, 0, 0.2) ;
  -moz-box-shadow: 0 0 40px rgba(0, 0, 0, 0.2) inset,0 0 4px rgba(0, 0, 0, 0.2) ;
  box-shadow: 0 0 40px rgba(0, 0, 0, 0.2) inset,0 0 4px rgba(0, 0, 0, 0.2) ;

  margin-left:-35px;
  margin-right:-35px;
  /*max-width: 100;*/
  width: auto;


  }



  .h3kuro02 {

    font-size: 18px;
    padding: 12px 10px;
     padding: 0.5em;/*文字周りの余白*/
    
      background: url(https://roggy-uranai.com/wp-content/uploads/2024/04/roggy-uranai-h2h03-2.jpg);
      -webkit-box-shadow: 0 0 40px rgba(0, 0, 0, 0.2) inset,0 0 4px rgba(0, 0, 0, 0.2) ;
      -moz-box-shadow: 0 0 40px rgba(0, 0, 0, 0.2) inset,0 0 4px rgba(0, 0, 0, 0.2) ;
      box-shadow: 0 0 40px rgba(0, 0, 0, 0.2) inset,0 0 4px rgba(0, 0, 0, 0.2) ;
     
      /*border:  8px 0 8px 0  solid #542E2E;*/
     /* border-top: 8px solid #542E2E;*/
      /*border-bottom: 8px solid #542E2E;*/
  
     /*  border-right: 8px solid #542E2E;
      border-left: 8px solid #542E2E;*/
  
     margin-left:-35px;
     margin-right:-35px;
     /*max-width: 100;*/
     width: auto;
  

     margin-left: -1.56em;
     margin-right: -1.56em;

  }
  
  
  .h3kuro02 span{
  
    display:block;
    border-top:1px dashed #D1D5E5;
    border-bottom:1px dashed #D1D5E5;
    padding:18px 10px 10px 10px;
    background-color: #EFEBE0;
    /*border-radius: 0.3em;*/
    -webkit-box-shadow: 0 0 40px rgba(0, 0, 0, 0.2) inset,0 0 4px rgba(0, 0, 0, 0.2) ;
    -moz-box-shadow: 0 0 40px rgba(0, 0, 0, 0.2) inset,0 0 4px rgba(0, 0, 0, 0.2) ;
    box-shadow: 0 0 40px rgba(0, 0, 0, 0.2) inset,0 0 4px rgba(0, 0, 0, 0.2) ;
  
    margin-left:-37px;
    margin-right:-37px;
    /*max-width: 100;*/
    width: auto;
  
  
    }



    .ichi03{

      background-color: #E6E2D7;
      /*background-image: repeating-linear-gradient(90deg, transparent, transparent 10px, #94cbc4 10px, #94cbc4 20px);*/
      padding: 15px;
      margin-left:-36px;
      margin-right:-36px;
      margin-bottom: auto;
      /*max-width: 100;*/
      width: auto;
    
     /* border-right: 8px solid #542E2E;
        border-left: 8px solid #542E2E;*/
    
        margin-left: -1.56em;
        margin-right: -1.56em;

    }


/************************************
** 見出し　恋愛占いの囲み
************************************/

:root {
  --yellow02: #F5EDD3;
  --dark02: #F58484;
  --pink02: #686868;
  --yellow03: #FCFAF5;
  --yellow04: #F5EDD3;
  --deg: -86deg;
  --trans: all 0.4s ease 0s;
}


.fuchidori {
  color: #F5EDD3;
  -webkit-text-stroke: 1px #A8A292;
  text-stroke: 1px #A8A292;
}



.member02 {
  margin: 1.5em 0 0.5em;
  padding: 0.45em;
  background: linear-gradient(
      83deg,
      var(--yellow02) 0 97%,
      #fff0 calc(97% + 1px) 100%
  );
  position: relative;
  list-style: none;
  display: inline-block;
  /*transform: scale(0.85);*/
  transition: var(--trans);

  filter: drop-shadow(0px 20px 10px #0008);

}

.member02:nth-of-type(even) {
 /* text-align: right;*/
  background: linear-gradient(
      -83deg,
      var(--yellow02) 0 97%,
      #fff0 calc(97% + 1px) 100%
  );

/*margin-right: 40px;*/

}

.thumb02 {
  width: 6em;
  height: 6em;
  float: left;
  margin-right: 1.25em;
  background: linear-gradient(
      var(--deg),
      var(--dark02) 0 70%,
      var(--yellow02) 0% 100%
  );
  transform: rotate(-4deg);
  transition: var(--trans);
  border-radius: 0.25em;
  overflow: hidden;
  margin-left: -2em;
  padding: 0.5em;
}

.member02:nth-of-type(even) .thumb02 {
  --deg: 86deg;
  float: right;
  margin-left: 2em;
  margin-right: -3em;
  transform: rotate(4deg);
}

.thumb02 img {
  width: 100%;
  height: 100%;
  border-radius: 0.25em;
  /*filter: grayscale(1);*/
  background: var(--dark02);
}

.member02:hover {
  transform: scale(1);
  transition: var(--trans);
  filter: drop-shadow(0px 20px 10px #0008);
}

.member02:hover .thumb02 {
  padding: 0.1em;
  transition: var(--trans);
  transform: rotate(-1deg);
  --deg: -89deg;
}

.member02:nth-of-type(even):hover .thumb02 {
  --deg: 91deg;
}

.member02:hover .thumb02 img {
  filter: none;
  transition: var(--trans);
}

.description02 {
  padding-top: 1vmin;
}

.description02 p {
  padding: 0 2em;
  margin-bottom: 1em;
  margin-top: 0.75em;

}

.h402 {
  background: linear-gradient(182deg, #fff0 60%, var(--dark02) 0 100%);
  display: inline;
  transform: rotate(-2deg);
  position: absolute;
  margin: 0;
  margin-top: -2.25em;
  left: 9vmin;
  padding: 0.5em 0.75em;
  color: var(--yellow02);
  border-radius: 0.25em;
  font-size: 1.35em;
  transform-origin: left bottom;
}

.member02:nth-of-type(even) .h402 {
  left: inherit;
  right: 9vmin;
  transform: rotate(2deg);
  transform-origin: right bottom;
  background: linear-gradient(-182deg, #fff0 60%, var(--dark02) 0 100%);
}

.member02:hover .h402 {
  transition: var(--trans);
  transform: rotate(0deg);
  background: linear-gradient(180deg, #fff0 59%, var(--dark02) 0 100%);
}


.article .h402 {
  border-top: 0px solid var(--cocoon-thin-color);
 border-bottom: 0px solid var(--cocoon-thin-color);
font-size: 23px;
/*padding: 0 0;*/

text-shadow: 0.25px 0.25px 0 #ccc, -0.25px -0.25px 0 #000, -0.25px 1px 0 #000, 0.25px -0.25px 0 #000, 0px 0.25px 0 #000c, 0 -0.25px 0 #000, -0.25px 0 0 #000, 0.25px 0 0 #000;


}




.co-funder02:after {
  content: "Roggy's Tarot";
  /**font-size: 0.75em;*/
  font-size: 0.00em;
  position: absolute;
  top: -1.5em;
  background: var(--yellow02);
  right: 4em;
  transform: rotate(3deg);
  padding: 0.35em 0.75em 0.5em;
  border-radius: 0.25em;
  color: var(--dark02);
  font-weight: bold;
}

.co-funder02:nth-of-type(even):after {
  right: inherit;
  left: 4em;
  transform: rotate(-3deg);
}

.description02 p a {
  display: inline-block;
  margin: 0.5em 0 0 0;
  background: var(--dark02);
  color: var(--yellow02);
  padding: 0.1em 0.5em 0.35em;
  border-radius: 0.5em;
  text-decoration: none;
  transition: var(--trans);
}
.description02 p a:hover {
  transition: var(--trans);
  color: var(--dar02);
  background: var(--yellow02);
  font-weight: bold;
}

.description02 p a img {
  float: left;
  width: 22px;
  filter: invert(1);
  border-radius: 0.15em;
  padding: 2px;
  background: #fff;
  margin-right: 2px;
}


.ichi04{

  background-color: #f58484;
  /*background-image: repeating-linear-gradient(90deg, transparent, transparent 10px, #94cbc4 10px, #94cbc4 20px);*/
  padding: 15px;
  margin-left:-36px;
  margin-right:-36px;
  margin-bottom: auto;
  /*max-width: 100;*/
  width: auto;

 /* border-right: 8px solid #542E2E;
    border-left: 8px solid #542E2E;*/


   /* background-color: #f36c6c;
    background-image: repeating-linear-gradient(90deg, transparent, transparent 10px, #f58484 10px, #f58484 20px);
*/


margin-left: -1.56em;
   margin-right: -1.56em;

}


.rei02 {
  /*display: inline-block;*/
  margin: 0.5em 0 20px 20px;
  background: var(--pink02);
  color: var(--yellow02);
  padding: 0.1em 0.5em 0.35em;
  border-radius: 0.5em;
  text-decoration: none;
  transition: var(--trans);
  text-align: center;
}

.ichi05{

  background-color: #DBDBDB;
  /*background-image: repeating-linear-gradient(90deg, transparent, transparent 10px, #94cbc4 10px, #94cbc4 20px);*/
  padding: 15px;
  margin-left:-36px;
  margin-right:-36px;
  margin-bottom: auto;
  /*max-width: 100;*/
  width: auto;

 /* border-right: 8px solid #542E2E;
    border-left: 8px solid #542E2E;*/


    margin-left: -1.56em;
    margin-right: -1.56em;

}



.ichi06{

  background-color: #f58484;
  /*background-image: repeating-linear-gradient(90deg, transparent, transparent 10px, #94cbc4 10px, #94cbc4 20px);*/
  padding: 15px;
  margin-left:-36px;
  margin-right:-36px;
  margin-bottom: auto;
  /*max-width: 100;*/
  width: auto;

  /*border-right: 8px solid #542E2E;
    border-left: 8px solid #542E2E;*/


   /* background-color: #f36c6c;
    background-image: repeating-linear-gradient(90deg, transparent, transparent 10px, #f58484 10px, #f58484 20px);
*/

background-size: auto auto;
background-color: rgba(245, 132, 132, 1);
background-image: repeating-linear-gradient(111deg, transparent, transparent 10px, rgba(243, 108, 108, 1) 10px, rgba(243, 108, 108, 1) 20px );

margin-left: -1.56em;
   margin-right: -1.56em;

}


.kage01{

  filter: drop-shadow(0px 15px 5px rgba(0, 0, 0, 0.452));

}

.symbol05 {
  background: #F1E5C7;
  padding: 15px;
}


.symbol06 {
  background: #fcfaf5;
  padding: 15px;
}


.kage02{

  filter: drop-shadow(0px 20px 10px #0008);

}

.symbol05 {
  margin: 1.5em 0 0.5em;
  padding: 0.65em;
  background: linear-gradient(83deg, var(--yellow02) 0 97%, #fff0 calc(97% + 1px) 100%);
  position: relative;
  list-style: none;
  display: inline-block;
  /* transform: scale(0.85); */
  transition: var(--trans);
  filter: drop-shadow(0px 20px 10px #0008);
  border-radius: 0.5em;
}


.symbol06 {
  margin: 1.5em 0 0.5em;
  padding: 0.65em;
  background: linear-gradient(83deg, var(--yellow03) 0 97%, #fff0 calc(97% + 1px) 100%);
  position: relative;
  list-style: none;
  display: inline-block;
  /* transform: scale(0.85); */
  transition: var(--trans);
  filter: drop-shadow(0px 20px 10px #0008);
  border-radius: 0.5em;
}


/*  月のイメージ　*/


.yohaku02 {

  margin-bottom: 3px; 

}


.symbol07{
  /*マス目のついた背景画像*/
    background: url(https://roggy-uranai.com/wp-content/uploads/2024/04/roggy-uranai-mirai0bg3.webp);
    padding: 15px;
  width: 100%;


  background-size: auto auto;
background-color: rgba(247, 215, 226, 1);
background-image: repeating-linear-gradient(90deg, transparent, transparent 10px, rgba(255, 249, 251, 1) 10px, rgba(255, 249, 251, 1) 20px );




    }



    .symbol08{

      background-color: #f58484;
      /*background-image: repeating-linear-gradient(90deg, transparent, transparent 10px, #94cbc4 10px, #94cbc4 20px);*/
      padding: 15px;
      margin-left:-36px;
      margin-right:-36px;
      margin-bottom: auto;
      /*max-width: 100;*/
      width: auto;
    
      /*border-right: 8px solid #542E2E;
        border-left: 8px solid #542E2E;*/
    
    
       /* background-color: #f36c6c;
        background-image: repeating-linear-gradient(90deg, transparent, transparent 10px, #f58484 10px, #f58484 20px);
    */
    
    background-size: auto auto;
    background-color: rgba(245, 132, 132, 1);
    background-image: repeating-linear-gradient(111deg, transparent, transparent 10px, rgba(243, 108, 108, 1) 10px, rgba(243, 108, 108, 1) 20px );
    
    background-color: rgba(247, 215, 226, 1);
background-image: repeating-linear-gradient(90deg, transparent, transparent 10px, rgba(255, 249, 251, 1) 10px, rgba(255, 249, 251, 1) 20px );
    
background: url(https://roggy-uranai.com/wp-content/uploads/2024/06/roggy-uranai-haikei03.png);


margin-left: -1.56em;
   margin-right: -1.56em;


    }



/************************************
** 見出し　恋愛占いの囲み
************************************/

:root {
  --yellow02: #F5EDD3;
  --dark02: #F58484;
  --dark03: #5E5E5E;
  --pink02: #686868;
  --pink03: #F7D7E2;
  --yellow03: #FCFAF5;
  --yellow04: #F5EDD3;
  --yellow05: #F2F2F2;
  --deg: -86deg;
  --trans: all 0.4s ease 0s;
}



.member03 {
  margin: 1.5em 0 0.5em;
  padding: 0.45em;
  background: linear-gradient(
      83deg,
      var(--yellow05) 0 97%,
      #fff0 calc(97% + 1px) 100%
  );
  position: relative;
  list-style: none;
  display: inline-block;
  /*transform: scale(0.85);*/
  transition: var(--trans);

  filter: drop-shadow(0px 20px 10px #0008);

}

.member03:nth-of-type(even) {
 /* text-align: right;*/
  background: linear-gradient(
      -83deg,
      var(--yellow05) 0 97%,
      #fff0 calc(97% + 1px) 100%
  );

margin-right: 40px;

}

.thumb03 {
  width: 5em;
  height: 5em;
  /*width: 13vmin;
  height: 13vmin;*/
  float: left;
  margin-right: 1.25em;
  background: linear-gradient(
      var(--deg),
      var(--dark03) 0 70%,
      var(--yellow05) 0% 100%
  );
  transform: rotate(-4deg);
  transition: var(--trans);
  border-radius: 0.25em;
  overflow: hidden;
  margin-left: -3em;
  padding: 0.5em;
}


.thumb04 {
  width: 6em;
  height: 6em;
  float: left;
  margin-right: -0.85em;
  background: linear-gradient(var(--deg), var(--dark02) 0 70%, var(--yellow02) 0% 100%);
  transform: rotate(-4deg);
  transition: var(--trans);
  border-radius: 0.25em;
  overflow: hidden;
  margin-left: 1.3em;
  padding: 0.5em;
  float: right;
}


.thumb05 {
  width: 6em;
  height: 6em;
  float: left;
  margin-right: -0.85em;
  background: linear-gradient(var(--deg), var(--dark) 0 70%, var(--yellow) 0% 100%);
  transform: rotate(-4deg);
  transition: var(--trans);
  border-radius: 0.25em;
  overflow: hidden;
  margin-left: 1.3em;
  padding: 0.5em;
  float: right;

}




.member03:nth-of-type(even) .thumb03 {
  --deg: 86deg;
  float: right;
  margin-left: 2em;
  margin-right: -3em;
  transform: rotate(4deg);
}

.thumb03 img {
  width: 100%;
  height: 100%;
  border-radius: 0.25em;
  /*filter: grayscale(1);*/
  background: var(--dark03);
}

.member03:hover {
  transform: scale(1);
  transition: var(--trans);
  filter: drop-shadow(0px 20px 10px #0008);
}

.member03:hover .thumb03 {
  padding: 0.1em;
  transition: var(--trans);
  transform: rotate(-1deg);
  --deg: -89deg;
}

.member03:nth-of-type(even):hover .thumb03 {
  --deg: 91deg;
}

.member03:hover .thumb03 img {
  filter: none;
  transition: var(--trans);
}

.description03 {
  padding-top: 1vmin;
  color: #333333;
}

.description03 p {
  padding: 0 2em;
  margin-bottom: 1em;
  margin-top: 0.75em;

}

.h403 {
  background: linear-gradient(182deg, #fff0 60%, var(--dark03) 0 100%);
  display: inline;
  transform: rotate(-2deg);
  position: absolute;
  margin: 0;
  margin-top: -2.25em;
  left: 9vmin;
  padding: 0.5em 0.75em;
  color: var(--dark02);
  border-radius: 0.25em;
  font-size: 1.35em;
  transform-origin: left bottom;
}

.member03:nth-of-type(even) .h403 {
  left: inherit;
  right: 9vmin;
  transform: rotate(2deg);
  transform-origin: right bottom;
  background: linear-gradient(-182deg, #fff0 60%, var(--dark03) 0 100%);
}

.member03:hover .h403 {
  transition: var(--trans);
  transform: rotate(0deg);
  background: linear-gradient(180deg, #fff0 59%, var(--dark03) 0 100%);
}


.article .h403 {
  border-top: 0px solid var(--cocoon-thin-color);
 border-bottom: 0px solid var(--cocoon-thin-color);
font-size: 23px;
/*padding: 0 0;*/

}




.co-funder03:after {
  content: "Roggy's Tarot";
  font-size: 0.75em;
  position: absolute;
  top: -1.5em;
  background: var(--yellow05);
  right: 4em;
  transform: rotate(3deg);
  padding: 0.35em 0.75em 0.5em;
  border-radius: 0.25em;
  color: var(--dark03);
  font-weight: bold;
}

.co-funder03:nth-of-type(even):after {
  right: inherit;
  left: 4em;
  transform: rotate(-3deg);
}

.description03 p a {
  display: inline-block;
  margin: 0.5em 0 0 0;
  background: var(--dark02);
  color: var(--yellow05);
  padding: 0.1em 0.5em 0.35em;
  border-radius: 0.5em;
  text-decoration: none;
  transition: var(--trans);
}
.description03 p a:hover {
  transition: var(--trans);
  color: var(--dar03);
  background: var(--yellow05);
  font-weight: bold;
}

.description03 p a img {
  float: left;
  width: 22px;
  filter: invert(1);
  border-radius: 0.15em;
  padding: 2px;
  background: #fff;
  margin-right: 2px;
}



.rei03 {
 display: inline-block;
  /*margin: 0.5em 0 20px 20px;*/
  background: var(--pink02);
  color: var(--pink03);
  /*padding: 0.1em 0.5em 0.35em;*/
  border-radius: 0.5em;
  text-decoration: none;
  transition: var(--trans);
  text-align: center;
}


.rei04 {
text-align: left

}

.rei05 {
  display: inline-block;
   /*margin: 0.5em 0 20px 20px;*/
   background: var(--pink02);
   color: var(--pink03);
   /*padding: 0.1em 0.5em 0.35em;*/
   border-radius: 0.5em;
   text-decoration: none;
   transition: var(--trans);
   text-align: center;
 }

 .rei06 {
 
  background-color: #F8F7F2;
  color: #552E2F;
}