@media screen and (min-width: 1081px){
.deck{

    text-align: center;
    img{
        width: 960px;
        height: 540px;
        margin-top: 30px;
    }
}
.table{

    text-align: center;
    img{
        width: 960px;
        height: 540px;
        margin-top: 30px;
    }
}
body{

    padding-top:140px;
    overflow-x: hidden;
    background-color: aliceblue;
    
}
p{
    line-height: 2.0;
    font-size: 15px; 
    margin-left: 15px;
   
}

}



@media screen and (max-width: 1080px){
    .deck{
    
        text-align: center;
        img{
            width: 640px;
            height: 360px;
            margin-top: 20px;
            
        }
    }
    .table{

        text-align: center;
        img{
            width: 350px;
            height: 200px;
            margin-top: 30px;
        }
        }
        body{

            padding-top:160px;
            background-color:aliceblue;
            
        }
        p{
            line-height: 2.0;
            font-size: 15px; 
            margin-left: 10px;
        
        }
    
   
    
}

@media screen and (max-width: 680px){
    .deck{
    
        text-align: center;
        img{
            width: 320px;
            height: 198px;
        
    }
    .table{

    text-align: center;
    
        img{
            width: 440px;
            height: 300px;
            margin-top: 30px;
        }
        }
        body{

            padding-top:250px;
            background-color:aliceblue;
            
        }
        p{
            line-height: 2.0;
            font-size: 15px; 
            margin-left: 5px;
        
        }
    }
}


.path{
    position: fixed;
    width:100%;
    top: 70px;
    background-color: aliceblue;
    z-index: 20;
    flex-wrap: wrap;

}

.anchors{
    position: fixed;
    width:100%;
    top: 100px;
    background-color: aliceblue;
    z-index: 20;
    flex-wrap: wrap;
}

.sepa{
    margin: 20px auto;
    padding: 0.5px;
    background-color: #e2e3eb;
    border-left: 10px solid #4c9ac0;
    h3{
        font-size: 20px;
        padding-left:10px;
    }

    
}





@media screen and (min-width: 1241px){
h3 {
    scroll-margin-top: 180px; /* 固定ヘッダーの高さに合わせる */
}
.end{
    margin-bottom: 500px;
}
.anchors{
    margin-left: 0%;

}
}

@media screen and (max-width:1240px){
    h3 {
        scroll-margin-top: 180px; /* 固定ヘッダーの高さに合わせる */
    }
    .end{
        margin-bottom: 500px;
    }
    .anchors{
        margin-left: 0%;
    }
}

@media screen and (max-width:620px){
    h3 {
        scroll-margin-top: 200px; /* 固定ヘッダーの高さに合わせる */
    }
    
.end{
    margin-bottom: 1000px;
}
.anchors{
    margin-left: 0%;
}
}





p1{
    color:#36a93b;
    font-size: xx-large;
}

.sr{
    background-image:url(../images/texticon.png);   
    background-repeat:  no-repeat;                /* 画像の繰り返しを指定  */              
    width:auto;                                   /* 横幅のサイズを指定    */
    height:12pX;   
    float: left; 
 
}
hr{
    background-color:crimson;
    width:100%;
    height: 3px;
    border: none;

}

.ban{
    display: flex;
    align-items: flex-start;

}

.top{
    position: fixed;
    background-color: aliceblue;
    width:100%;
    display:flex;  
    top: 0px;
    z-index: 20;
    img{
        position:relative;
        top:15px;
        left:10px;
        width:60px;
        height:50px;
   
      }
}


warn{
    color:rgb(44, 42, 190);
    font-size:20px;
}
.tooltip {
    position: relative;
    cursor: pointer;
    max-width: calc(100vw - 20px); 
    text-decoration: underline;
}



/*.tooltip::after {
    content: attr(data-tooltip);
    visibility: hidden;
    opacity: 0;
    position: absolute;
    
    background-color: #333;
    color: white;
    text-align: left;
    border-radius: 5px;
    padding: 10px;
    font-size: 12px;
    white-space: pre-line;
    min-width: 100px;
    max-width: 300px; /* 最大幅を指定 
    z-index: 1;
    transition: visibility 0.2s, opacity 0.2s;
}*/

.tooltip.show-tooltip::after {
    visibility: visible;
    opacity: 1;
}

.custom-tooltip {
    position: absolute;
    background-color: #333;
    color: white;
    text-align: left;
    border-radius: 5px;
    padding: 10px;
    font-size: 12px;
    white-space: pre-line;
    max-width: 300px;
    z-index: 1000;
    visibility: hidden;
    opacity: 0;
    transition: visibility 0.2s, opacity 0.2s;
}

.elf{

h2{
  position: relative;
  padding: 0.5em;
  background: #31d1a9;
  color: rgb(8, 7, 7);
}

h2::before {
  position: absolute;
  content: '';
  top: 100%;
  left: 0;
  border: none;
  border-bottom: solid 15px transparent;
  border-right: solid 20px rgb(38, 185, 136);
}


}

.roy{

h2{
  position: relative;
  padding: 0.5em;
  background: #dce738;
  color: rgb(8, 7, 7);
}

h2::before {
  position: absolute;
  content: '';
  top: 100%;
  left: 0;
  border: none;
  border-bottom: solid 15px transparent;
  border-right: solid 20px rgb(231, 217, 15);
}
}
.wi{

h2{
  position: relative;
  padding: 0.5em;
  background: #45c7e7;
  color: rgb(8, 7, 7);
}

h2::before {
  position: absolute;
  content: '';
  top: 100%;
  left: 0;
  border: none;
  border-bottom: solid 15px transparent;
  border-right: solid 20px rgb(45, 210, 231);
}
}
.dora{

h2{
  position: relative;
  padding: 0.5em;
  background: #d38342;
  color: rgb(8, 7, 7);
}

h2::before {
  position: absolute;
  content: '';
  top: 100%;
  left: 0;
  border: none;
  border-bottom: solid 15px transparent;
  border-right: solid 20px rgb(231, 144, 45);
}

}

.necro{

h2{
  position: relative;
  padding: 0.5em;
  background: #b971cf;
  color: rgb(8, 7, 7);
}

h2::before {
  position: absolute;
  content: '';
  top: 100%;
  left: 0;
  border: none;
  border-bottom: solid 15px transparent;
  border-right: solid 20px rgb(169, 53, 223);
}

}
.vamp{

h2{
  position: relative;
  padding: 0.5em;
  background: #d84458;
  color: rgb(8, 7, 7);
}

h2::before {
  position: absolute;
  content: '';
  top: 100%;
  left: 0;
  border: none;
  border-bottom: solid 15px transparent;
  border-right: solid 20px rgb(199, 53, 109);
}

}
.bi{

h2{
  position: relative;
  padding: 0.5em;
  background: #e9cd95;
  color: rgb(8, 8, 7);
}

h2::before {
  position: absolute;
  content: '';
  top: 100%;
  left: 0;
  border: none;
  border-bottom: solid 15px transparent;
  border-right: solid 20px rgb(255, 247, 227);
}

}
.ne{

h2{
  position: relative;
  padding: 0.5em;
  background: #7cd0f1;
  color: rgb(8, 7, 7);
}

h2::before {
  position: absolute;
  content: '';
  top: 100%;
  left: 0;
  border: none;
  border-bottom: solid 15px transparent;
  border-right: solid 20px rgba(82, 197, 250, 0.726);
}

}