/* ヘッダーメニュー（SWELL）の各項目にロゴを付ける。全ページで読み込む。
   メニュー項目の CSS クラスに ew-nav-icon と ew-nav-<名前> を設定して使う。 */

.c-gnav > .menu-item.ew-nav-icon > a .ttl,
.c-spnav > .menu-item.ew-nav-icon > a {
    display: flex;
    align-items: center;
    gap: .45em;
}

.c-gnav > .menu-item.ew-nav-icon > a .ttl::before,
.c-spnav > .menu-item.ew-nav-icon > a::before {
    position: static;
    display: inline-block;
    flex: none;
    width: 1.35em;
    height: 1.35em;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    content: '';
    transform: none;
}

.c-spnav .ew-nav-icon > a,
.c-spnav .ew-nav-icon > a:hover {
    padding-left: 1em;
}

.ew-nav-sota > a .ttl::before,
.c-spnav .ew-nav-sota > a::before {
    background-image: url('../images/nav/sota.png');
}

/* そうた先生の顔アイコンは丸い絵なので、ほかのロゴより少し大きくする */
.c-gnav > .menu-item.ew-nav-sota > a .ttl::before,
.c-spnav > .menu-item.ew-nav-sota > a::before {
    width: 1.8em;
    height: 1.8em;
}

.ew-nav-studylink > a .ttl::before,
.c-spnav .ew-nav-studylink > a::before {
    background-image: url('../images/nav/studylink.png');
}

.ew-nav-youtube > a .ttl::before,
.c-spnav .ew-nav-youtube > a::before {
    background-image: url('../images/nav/youtube.svg');
}

.ew-nav-instagram > a .ttl::before,
.c-spnav .ew-nav-instagram > a::before {
    background-image: url('../images/nav/instagram.svg');
}

.ew-nav-tiktok > a .ttl::before,
.c-spnav .ew-nav-tiktok > a::before {
    background-image: url('../images/nav/tiktok.svg');
}

.ew-nav-yahoo > a .ttl::before,
.c-spnav .ew-nav-yahoo > a::before {
    background-image: url('../images/nav/yahoo.svg');
}