body{
    margin: 0;
    background-color:#ffffff;
    
    
}
html{
    scroll-behavior:smooth;

}



.header  {
    padding:10px;
    color:rgb(58, 59, 66);
    padding:0px 0px 0px 0px;
    background-color:white;
    
    }

#list-check1:checked~.list-box1 a{
    display:block;
}
#list-check2:checked~.list-box2 a{
    display:block;
}
#list-check3:checked~.list-box3 a{
    display:block;
}#list-check4:checked~.list-box4 a{
    display:block;
}#list-check5:checked~.list-box5 a{
    display:block;
}#list-check6:checked~.list-box6 a{
    display:block;
}

.hamburger-list-box-all a{
    display:none;
}
.hamburger-list-box-all{
    padding-left:10%;
}
.hamburger-check{
    display:block;
    width: 25px;
    height: 22px;
    position:relative;
    display:flex;
   
}
.list-check{
    display:none;
}
.hamburger-list-box1{
    text-decoration:none;
    display:inline-block;
    position:relative;
    top:50px;
    left:10%;
    border: 3px solid rgb(255, 52, 52);;
    margin:10px 0px 10px 0px;
    padding:0px;
    width:125px;
    text-align:center;
    background-color:white;
    font-weight:bold;
    cursor: pointer;
    text-align: center;
    color:rgb(255, 52, 52);;
    border-radius:10px;

}
.hamburger-list-box1:hover{
    background-color:rgb(255, 52, 52);
    color:white;
    transition:0.5s;
    
}

.hamburger-menu-ber {
    text-decoration:none;
    list-style:none;
    color:white;
    padding-left: 1vw;
    
}


   
a{
    word-break: break-all;
}
    

#check{
 display:none;
}

.hamburger-menu{
    position: fixed;
    right: 20px;
    top:7px;
    z-index:10000000000;
    background-color:#cc0000;
    border-radius:20%;
    padding:2vw;
    margin-top:0;
}
@font-face{
    font-family:nikkyou-sans;
    src:url("../nikkyou-sans-font/nikkyou-sans-font.ttf")
}
.logo{
    font-family:nikkyou-sans;
    border:none;
    
}
.logo1{
    border:none;
    color:rgb(255, 52, 52);
    font-family:nikkyou-sans;
    padding-bottom:3px;
    border-bottom:solid rgb(255, 52, 52) 3px;
    border-radius:3%;
    
}
.logo2{
    color:rgb(38, 38, 255);
    font-family:nikkyou-sans;
    padding-bottom:1px;
    border-bottom:solid rgb(38, 38, 255) 3px;

}



.hamburger-menu span{
    display: block;
    height: 3px;
    width: 25px;
    background-color:  #e2e2e2;

    
    
}

.hamburger-menu span,.hamburger-menu span::after,.hamburger-menu span::before{
  display: block;
  height: 3px;
  width: 25px;
  background-color: #ffffff;
  content: "";
  position: absolute;
  position:absolute;
  top:0.5%;
  z-index:111;
  
}
.hamburger-menu span::before {
    top: 8px;
    
  }
  .hamburger-menu span::after {
    top: 16px;
  }

  
nav{
    
        position: fixed;
        top: 50px;
        left: 0;
        z-index: 100;
        width: 90%; /* 画面幅に対して */
        height: 100%; /* 画面の高さに対して */
        background-color: #ffffff;
        transform:translateX(115%);
        transition:2s;
        border-radius:20px;
        border: 3px solid #cc0000;
        padding:0px;
        font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", sans-serif;
        overflow: scroll;
        


        
       

      
}
nav a{
    text-decoration:none;
    display:inline-block;
    position:relative;
    top:50px;
    left:10%;
    border: 3px solid rgb(0, 51, 255);
    margin:10px 0px 10px 0px;
    padding:0px;
    width:125px;
    text-align:center;
    border-radius:10px;
    background-color:white;
    font-weight:bold;

        
}



.hamburger-menu-ber a:hover{
    background-color:rgb(0, 51, 255);
    color:white;
    transition:0.5s;
}
.hamburger-menu-ber li:hover ul{
    display:block;
}


#check:checked~nav{
    transform:translateX(40%);
}
#check:checked ~ #menu-bar > span::before{
    width:0;
    transition:0.5s;

    
}
#check:checked~#menu-bar> span::after{
    transform:rotate(.25turn);
    top: 0px;
}
#check:checked~#menu-bar> span{
    transform:rotate(-0.125turn);
    top: 10px;
}
.text-deco-none{
    text-decoration:none;
}
.site-jyouhou-content{
    border:3px solid black;
    border-radius:10px;
    text-align:center;
    position:relative;
    color:black;
    width:35vw;
    display:inline-block;
    margin-left:5vw;
    background-color:white;
    

    
}
.site-jyouhou-content2{
    border:3px solid black;
    border-radius:10px;
    text-align:center;
    position:relative;
    color:black;
    width:75vw;
    display:inline-block;
    margin-top:5vw;
    margin-left:5vw;
    background-color:white;
    

    
}
.site-jyouhou-title{
    font-size:clamp(17px,4vw,30px);
    white-space:nowrap;

}

.site-jyouhou-text{
    border-top:3px solid black;
    color:black;
    font-size:clamp(12px,4vw,20px);
    
}
.text-deco-none:hover p{
    color:rgb(203, 203, 203);
    border-color:rgb(203, 203, 203);
    transition:0.2s;
}
.text-deco-none:hover div{
    background-color:rgb(93, 93, 93);
    border-color:rgb(203, 203, 203);
    transition:0.2s;
}




.header h1{
    margin: 0;
    font-size:25px;
    padding:10px;
    width: 200px;
    padding:10px;
    color:rgb(58, 59, 66);
}




.header-list li{
    list-style:none;
    
   
}

.menu{  
    margin: 0px;               /* メニューバー外側の余白(ゼロ) */
    padding: 0px 0px 0px 15px; /* メニューバー内側の余白(左に15px) */
    /* バーの背景色(濃い赤色) */
    border-top:6px solid #cc0000;
    position:absolute;

}

.menu li{
   width: 125px;           /* メニュー項目の横幅(125px) */
   display: inline-block;  /* ★1:横並びに配置する */
   list-style-type: none;  /* ★2:リストの先頭記号を消す */
   position: relative; 
   text-align:center;                       /* ★3:サブメニュー表示の基準位置にする */
}
.menu a{

   background-color: #cc0000; /* メニュー項目の背景色(濃い赤色) */
   color: white;              /* メニュー項目の文字色(白色) */
   line-height: 40px;         /* メニュー項目のリンクの高さ(40px) */
   text-align: center;        /* メインメニューの文字列の配置(中央寄せ) */
   text-decoration: none;     /* メニュー項目の装飾(下線を消す) */
   font-weight: bold;         /* 太字にする */
   display: block;            /* ★4:項目内全域をリンク可能にする */
   z-index:0;
   display:none;
   
   
   
}
.menu a:hover{
   background-color: #ffdddd; /* メニュー項目にマウスが載ったときの背景色(淡いピンク) */
   color: #d71212;
   transition:0.5s;
}
.menu ul{
   display:none;      /* ★1:標準では非表示にする */
   margin: 0px;         /* ★2:サブメニュー外側の余白(ゼロ) */
   padding: 0px;        /* ★3:サブメニュー内側の余白(ゼロ) */
   position:absolute;
   left:0%;    
           /* ★4:絶対配置にする */
}
 .menu li:hover ul{
  display:block;
 }
 .menu ul li{
    width:125px;               /* サブメニュー1項目の横幅(135px) */
    border-top: 1px solid pink; /* 項目上側の枠線(ピンク色で1pxの実線) */
 }
.menu{
    z-index:10 !important;
}
.menu-ber{
    text-align:center;
}
.mokuzi-list{
 border:solid black 3px;
 margin:5% 3%;
 

}
.header-img{
height:50px;
position:absolute;

z-index:1000000;
top:0;
}
.page-title{
    text-align:center;
    font-size:clamp(35px,4vw,47px);
    margin:60px 5% 25px 5%;
    

}
.page-title-strong{
    color:black;
}
.mokuzi-title{
    font-weight:bold;
    font-size:clamp(20px,4vw,25px);
    text-align:center;
    padding:0;
    margin:0;
}
.mokuzi-content {
    margin-left:15%;
    
    
}
.mokuzi-content a{
    color:black;
    text-decoration:none;
    font-weight:bold;
}
.mokuzi-content a:hover{
    color:rgb(38, 38, 255);
    transition:0.5s;
}
.mokuzi-content li{
    padding-bottom:3%;
    

}
.gotoback {
    opacity: 0.6;
}
.gotonext {
    opacity: 0.6;
}
.gotop{
    display: block;
    width: 60px;
    height: 60px;
    box-sizing: border-box;
    background-color: #ed0c0c;
    border: 1px solid #ffffff;
    padding-top: 30px;
    text-align: center;
    letter-spacing: -1px;
    font-size: 85%;
    text-decoration: none;
    color: #000000;
    opacity: 0.6;
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 10000;
    border-radius: 50px 50px;
}
.gotop::before{
    content: "";
    display: block;
    border-top: 2px solid #000000;
    border-right: 2px solid #000000;
    width: 25%;
    height: 25%;
    top: 25%;
    left: 0;
    right: 0;
    margin: auto;
    position: absolute;
    transform: rotate(-45deg);
}
.gotop:hover{
    opacity: 1;
}
@media(max-width:750px){
    .gotop{
        width: 40px;
        height: 40px;
        text-indent: -9999px;
        opacity: 1;
        border: none;
        background: none;
        bottom: 10px;
        right: 10px;
    }
    .gotop::before{
        bottom: 0;
    }
}
.maenopejinimodoru {
    margin-left: 30px;
}
.tuginopejinisusumu {
    margin-right: 30px;
}

.main{
    font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", sans-serif;
}
        .main-content{
            margin:0 5vw; 
            border-radius:10px;
            font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", sans-serif;
            
        }
        

        .start{
            font-size:clamp(12px,4vw,20px);
            margin:3vw 5vw;
            
            
            
            
        }
        .hajimeni{
            font-size:clamp(12px,4vw,20px);
            margin-bottom: 0px;
            border-bottom:3px solid #000000;
            margin:3% 5%;
            text-align:center;
            padding-bottom: 5px;  
            
                      
            
        }
        .nennnobannpakunomokuteki {
            font-size:clamp(12px,4vw,20px);
            margin-bottom: 0px;
            border-bottom:3px solid #7a7a7a;
            margin:3% 5%;
            text-align:left;
        }
        
        .image1 {
            
            display:block;
            max-width:100%;
            margin:3% auto;
            width:auto;
            
            

            
        }
   
       
        .arrow-round {
            position: relative;
            display: block;
            width: 50px;
            height: 10px;
            border-radius: 5px;
            background-color: #1E88E5;
          }
          .arrow-round::before {
            content: "";
            position: absolute;
            top: 6px;
            right: -2px;
            display: block;
            width: 25px;
            height: 10px;
            border-radius: 5px;
            background-color: #FDD835;
            transform: rotate(-45deg);
          }
          .arrow-round::after {
            content: "";
            position: absolute;
            bottom: 6px;
            right: -2px;
            display: block;
            width: 25px;
            height: 10px;
            border-radius: 5px;
            background-color: #e53935;
            transform: rotate(45deg);
          }
          
       .name{
        width: 100%;
        height:auto;
        border-bottom:2px solid black;
        padding:2vw 0 1.5vw 0  ;
        
       }

       .hukidasi-bunsyou{
        width: 100%;
        height:auto;
        
        padding:2vw 0 1.5vw 0  ;

       }
       
        .index {
            border-bottom:3px solid #7a7a7a;
            padding-left: 10px;
            margin: 3% 5%;
            font-size:clamp(23px,5vw,30px);
            
        }
        strong{
            color:rgb(38, 38, 255);
        }
        .hukidasi-my {
            display: flex;
            justify-content: center;
            align-items: start;
            gap: 0 22px;
            width:100%;
            justify-content: flex-start;
            margin-bottom:2vw;
        }
        
        .hukidasi-my img {
            max-width: 50px;
            height: auto;
            border: 3px solid #e6edf3;
            border-radius: 50%;
        }
        
        .hukidasi-my p {
            position: relative;
            max-width:60vw;
            margin: 3px 0 0;
            padding: .8em 1em;
            border-radius: 10px;
            background-color: #e0efff;
            color: #333333;
            overflow-wrap:break-word;
        }
        
        .hukidasi-my p::before {
            position: absolute;
            left: -15px;
            width: 15px;
            height: 30px;
            background-color: #e0efff;
            clip-path: polygon(0 50%, 100% 0, 100% 100%);
            content: '';
            
        }

        .hukidasi-aite {
            display: flex;
            justify-content: center;
            align-items: start;
            gap: 0 22px;
            justify-content: flex-end;
            margin-bottom:2vw;
        }
        
        .hukidasi-aite img {
            max-width: 50px;
            height: 100%;
            border: 3px solid #e6edf3;
            border-radius: 50%;
        }
        
        .hukidasi-aite p {
            position: relative;
            max-width: 60vw;;
            margin: 3px 0 0;
            padding: .8em 1em;
            border-radius: 5px;
            background-color: #e0efff;
            color: #333333;
            overflow-wrap:break-word;
        }
        
        .hukidasi-aite p::before {
            position: absolute;
            right: -15px;
            width: 15px;
            height: 30px;
            background-color: #e0efff;
            clip-path: polygon(0 0, 100% 50%, 0 100%);
            content: '';
        }
        

.footer {
   background-color: #717171;
   width:100%;
   font-weight: bold;
   color:rgb(255, 255, 255);
   position:relative;
   margin: 0px;               /* メニューバー外側の余白(ゼロ) */
   scroll-padding-top: 0px 0px 0px 15px; /* メニューバー内側の余白(左に15px) */
   z-index:0;
   font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", sans-serif;

} 
   .footer-list{
    text-align:center;
    margin:0px;
    
}
    

.footer-list li{
    list-style-type:none;
    font-weight: bold;
    display:inline-block;
    width: 200px;
    margin-right:20px;
    
    
    
    
    
    
}

.footer-list a{
    text-decoration:none;
    color:white;
    list-style-type:none;
    font-weight: bold;
    display:block;
    width: 125px;
    line-height: 40px;
    text-align:center;
    padding:0px 50px 0 50px;
    
    
    
}

.ninnsyougazou{
    width:35vw;
    padding-top:2vw;;
    
}

.expo {
    color: #fa2b2b;
}
.test {
    color: #0000fe;
}
.logo4{
    font-family:Nikkyou Sans;
    border:none;
    font-size:25px;
    padding-left:3%;
    padding-top:2%;
}
.logo5{
    font-family:nikkyou-sans;
    border:none;
    font-size:25px;
}
.logo6{
    font-family:nikkyou-sans;
    border:none;
    font-size:25px;
}
.ninnsyoumoji{
    text-decoration:none;
    color:white;
    font-size:13px;
   
}
.sannkama-ku{
    text-align:center;
}
.ninnsyoumoji span{
    content:none;
}
.tyosakukenn{
    text-align:center;
    font-size:10px;
}
.kusui {
    list-style: none;
}
@media (min-width:840px){
    .menu a {
        display:block;
        line-height: 50px;
        border-radius: 3px;
    }
    .logo{
        line-height:25px;
        position:absolute;
        top:0px;
        left:2vw;
        z-index:100000;
        
    
        padding:0 4% 0 0;

    }
    .logo1{
        border-color:white;
        color:white;
    }
    .logo2{
        border-color:white;
        color:white;
    }

    
    .header-img{
        position:absolute;
left:7vw;
z-index:1000000;
    }
    .hamburger-menu{
        display:none;
    }
    .menu{
        background-color:#cc0000;
        position:relative;
        border:none;
        
    }
 
    .mokuzi-list{
        margin:5% 25%;
    }
    .mokuzi-content {
        margin-left:20%;
        
        
    }
    .ninnsyougazou{
        width:19vw;
        padding-top:2vw;
        
    }
    .hukidasi-my img {
        max-width: 70px;
        
    }
    .hukidasi-aite img {
        max-width: 70px;
    } 
    .image1{
        max-width:100%;
        height: 24vw;
        position: inherit;

    }
    .footer-left{
        border-right: 3px solid rgb(255, 255, 255);
        border-left: 3px solid rgb(255, 255, 255);
    }
    .footer-right{
        border-right: 3px solid rgb(255, 255, 255);
    }
}

  
  .quizzes-container {
    width: 400px;
    margin: 50px auto;
  }
  
  .quiz-container {
    border-bottom:1px solid black;
    padding-bottom: 20px;
  }
  
  .btn {
    margin-top: 20px;
    font-family: serif;
    background-color: white;
  }
  
  #score-container {
    border: 1px solid black;
    height: 50px;
  }
  
  .btn-score {
    display: block;
    margin: 20px auto;
    font-family: serif;
    background-color: white;
  }

  

   
.mokuhyou1{
    color: purple;
    margin:0px 0px 0px 0px;
}
.modorubotannnoyajirusiuenohou {
    
    width: 80px;
    height: 16px;
    border-bottom: 2px solid #000;
    border-left: 10px solid #000;
    transform: skew(-45deg);
    margin-bottom: 20px;
    display: flex;
   
  }
  .susumubotannnoyajirusiuenohou {
    
    width: 80px;
    height: 16px;
    border-bottom: 2px solid #000;
    border-right: 10px solid #000;
    transform: skew(45deg);
    display: flex;
    margin-bottom: 20px;
    
  }
  .maenopejinimodoru {
    border: solid 2px rgb(0, 0, 0);
    border-right: 1px;
    color: black;
    

  }
  .tuginopejinisusumu {
    border: solid 2px rgb(0, 0, 0);
    color: black;
  }
  a {
    text-decoration: none;
  }
  .maenopejinimodoru {
    display: flex;
    width: 50%;
  }

  
  .tuginopejinisusumu {
    display: flex;
    width: 50%;
  
  }
  .modorutosusumu {
    display: flex;
  }
.tuginopeijibunntati{
  position: relative;
  margin: 0 auto;
  font-size:80%;

}
  .tuginopeiji{
    margin-top: 20px;
    margin-left: 0 auto;
    height: 50px;
  }
 
  .maenopeiji {
    margin-top: 20px;
    height: 50px;
   
  }
  .tuginopejinisusumu11 {
    border: solid 2px rgb(0, 0, 0);
    color: rgb(0, 0, 0);
    display: flex;
    width: 50%;
    
    margin:0 auto;
  }
  .maenopejinimodoru11 {
    border: solid 2px rgb(0, 0, 0);
    color: black;
    display: flex;
    width: 50%;
  }
  .maenopeijibunntati {
    margin:0 auto;
    font-size:80%;
  }
  .maenopejinimodoru:hover {
    background-color: rgba(77, 77, 77, 0.229);
 }
 .tuginopejinisusumu:hover {
    background-color: rgba(77,77,77,0.229);
 }
 .maenopejinimodoru11:hover {
    background-color: rgba(77, 77, 77, 0.229);
 }
 .tuginopejinisusumu11:hover {
    background-color: rgba(77, 77, 77, 0.229);
 }   
 .modorubotannnoyajirusiuenohou {
    margin-left: 10px;
 }
.gazou1{
    width: 50%;
}