


.glossaryArea{ width: 1000px; margin:0 auto;}



@media(max-width:750px){

.glossaryArea{ width: auto; margin:0 50px;}

}



.subPageVisual{padding: 0 0 40px;}

.subhd{ font-size:14px; text-align: center; margin-bottom: 40px;}
.subPageVisual h1{ text-align: center; font-size: 40px; margin-bottom: 40px; line-height: 1.5em;}
.svTxt{ text-align: center;}


@media(max-width:750px){

}



.searchForm{ position: relative; margin-bottom: 40px;}

.searchForm input {
    width: 100%;
    padding: 13px 14px 13px 42px;
    border: 1.5px solid #ccc;
    border-radius: 9px;
    color: #000;
    font-size: 15px;
    outline: none;box-sizing: border-box;
}

.searchForm i {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--ink3);
    font-style: normal;
    font-size: 18px;
}

@media(max-width:750px){
.searchForm{ position: relative; margin-bottom: 40px; }

.searchForm input {
    width: 100%;box-sizing: border-box;
    padding: 20px 20px 20px 42px;
    border: 1.5px solid #ccc;
    border-radius: 9px;
    color: #000;
    font-size: 30px;
    outline: none;

}

.searchForm i {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--ink3);
    font-style: normal;
    font-size: 24px;
}



}



.categoryList{}
.categoryList li{ display: inline-block; border: 1px solid #ccc;border-radius:20px; padding: 4px 15px; margin-bottom: 10px; cursor: pointer; font-size: 14px;}
.categoryList li.now{ background:#222; color: #fff;}
.categoryList li:hover{ background:#666; color: #fff;}
.categoryList li span{}



@media(max-width:750px){

.categoryList{}
.categoryList li{ border-radius:20px; padding: 7px 19px;font-size: 24px;}

}




.listHeader{ position: relative;margin-bottom: 50px;}
.listHeader .count{}
.listHeader .text{}
.catChanger{ position: absolute; right: 0; top: 0;width: 250px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    column-gap: 0px;
    row-gap: 0px;
}

@media(max-width:750px){

.catChanger{ position: absolute; right: 0; top: 0;width: 430px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    column-gap: 0px;
    row-gap: 0px;
}
}


.catChanger li{ text-align: center; font-size: 14px; border: 1px solid #222;padding: 10px 0; cursor: pointer;}
.catChanger li.category{ border-radius: 10px 0 0 10px; border-width:1px 0 1px 1px;}
.catChanger li.aiueo{ border-radius: 0 10px 10px  0;}

.catChanger li.now{ color: #fff; background: #444;}


@media(max-width:750px){

.catChanger li{  font-size: 24px;}
.catChanger li.category{ border-radius: 10px 0 0 10px; border-width:1px 0 1px 1px;}
.catChanger li.aiueo{ border-radius: 0 10px 10px  0;}
}




.wlCat{}
.wlCat h2{margin-bottom: 30px; font-weight: normal; text-align: center;}

.wordList{
    width: auto;
    margin: 0 auto 100px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    column-gap: 10px;
    row-gap: 10px;

}
.wordList li{ list-style: none; border: 1px solid #ccc; padding: ;}
.wordList li a{ color: #333; display: block;}
.wordList li a:hover{ background:#fafafa ;}
.wordList li header{border-left: 5px solid #000; padding: 13px 0 10px 15px; position: relative;box-sizing: border-box;}
.wordList li header h3{ font-family:'Times New Roman', Times, serif;letter-spacing: 0.1em; font-size: 18px;}
.wordList li header .kana{ font-size: 14px; color:#666; letter-spacing: 0.1em; font-size: 12px;}
.wordList li header .category{ position: absolute; right: 15px; top: 14px; border:1px solid #333; border-radius: 15px;padding: 4px 10px; font-size: 11px; line-height: 1em;}

.wordList li p{padding: 20px; font-size: 12px; border-top: 1px dashed #ddd;}

.wordList li header .engCatInline{ position: relative;}
.wordList li header .engCatInline .category{ position: relative; top: -5px; border:1px solid #333; border-radius: 15px;padding: 4px 10px; font-size: 11px; line-height: 1em; left: 0px;}

@media(max-width:750px){
.wordList{
    grid-template-columns: repeat(1, 1fr);
    column-gap: 10px;
    row-gap: 10px;
}
.wordList li header h3{ font-size: 27px;}
.wordList li header .kana{ font-size: 24px; }
.wordList li header .category{ font-size: 22px; line-height: 1em;}
.wordList li p{padding: 20px; font-size: 18px; border-top: 1px dashed #ddd;}


}









#wordData{ width: 1000px; margin: 0 auto 20px; border:1px solid #999;}

#wordData header{border-left: 5px solid #000; padding: 30px 30px 25px 35px; position: relative;box-sizing: border-box;}
#wordData header h1{ font-family:'Times New Roman', Times, serif;letter-spacing: 0.1em; font-size: 25px;}
#wordData header .kana{ font-size: 14px; color:#666; letter-spacing: 0.1em; font-size: 12px;}
#wordData header .category{ position: relative; top: -5px; border:1px solid #333; border-radius: 15px;padding: 4px 10px; font-size: 11px; line-height: 1em;}

#wordData p{padding: 0; font-size: 18px;}

.wordBody{padding: 35px;border-top: 1px dashed #ddd;}

.wordImg{ max-width: 600px; margin: 0 auto 50px;}

.glossary .linkBtn a{ width: 500px;  color: #000; padding: 20px 0; text-align: center; display: inline-block;background-color: #dedede;}




@media(max-width:750px){

#wordData{ width: auto; margin: 0 50px 20px; border:1px solid #999;}

#wordData header{border-left: 5px solid #000; padding: 30px 30px 25px 35px; position: relative;box-sizing: border-box;}
#wordData header h1{ font-family:'Times New Roman', Times, serif;letter-spacing: 0.1em; font-size: 35px; margin-bottom: 10px;}
#wordData header .kana{ font-size: 14px; color:#666; letter-spacing: 0.1em; font-size: 24px;}
#wordData header .category{ position: relative; top: -5px; border:1px solid #333; border-radius: 15px;padding: 8px 14px; font-size: 21px; line-height: 1em;}

#wordData p{padding: 0; font-size: 24px;}

.wordBody{padding: 35px;border-top: 1px dashed #ddd;}

.wordImg{ max-width: 600px; margin: 0 auto 50px;}

.glossary .linkBtn a{ width: 500px;  color: #000; padding: 20px 0; text-align: center; display: inline-block;background-color: #dedede;}




}





