@font-face {
    font-family:'smart'; /* フォントファミリー名 */
    src: url('font/01tti.ttf') format('truetype'); /* フォントファイルの場所 */
 font-weight: normal; /* フォントのウェイト（通常） */
    font-style: normal; /* フォントのスタイル（通常） */
    /* 追加のフォント形式を指定する場合 */
    /* src: url('フォントのファイルパス') format('フォントの形式'); */
}




body {
    font-family: 'smart',Arial, sans-serif;
    text-align: center;
    margin: 0;
    padding: 0;
    background-color: white;

}

/*header部分*/

#header-title{
    width:30%;
    height:100%;
    float:left;
    text-align:left;
}

#header-title img{
    padding-left:1vw;
    padding-top:1ve;
    width:50vw;
}

#menu{
    padding-top:5vw;
}

#menu ul {
    font-family="smart";
    font-size:1.6vw;
    list-style: none;
    padding: 10px 20px;
    margin: 0;
    float:right;
}

#menu ul li {
    display: inline-block;
}

#menu ul li:not(:last-child) {
    margin-right: 1vw; /* 各項目の間隔 */
}

#menu ul li a {
    text-decoration: none;
    color: #333; /* リンクの色 */
    background-color: transparent; /* リンクの背景色（デフォルト状態） */
    padding: 1vw 0.5vw; /* 上下に5px、左右に10pxの余白 */
}

#menu ul li a:hover {
     color: white;
     background-color: lightgray; /* ホバー時のリンクの背景色 */
     padding: 1vw 0.5vw; /* 上下に5px、左右に10pxの余白 */
}

/* 縦棒のスタイル */
#menu ul li:not(:last-child)::after {
    content: "|"; /* 縦棒の文字列 */
    margin-left: 0.3vw; /* 縦棒と次の項目の間隔 */
    color: silver; /* 縦棒の色 */
}





.container {
    display: flex;
    justify-content: left;
    align-items: center;
}

.image {
    display: block;
    max-width: 100%;
    height: auto;
}


@media only screen and (max-width: 800px) {
#header-title{
    width:100%;
    height:100%;
    text-align:center;
}

    #header-title .container {
        justify-content: center; /* スマホサイズで中央揃え */
    }


    #menu {
        width: 100%;
    }

    #menu ul {
        justify-content: space-around;
        font-size:3vw;
        width:100%;
        padding-left:0;
        padding-right:0;
        padding-top:1.5vw;
        padding-bottom:2vw;

    }

#menu ul li a {
    padding: 1vw 0.5vw; /* 上下に5px、左右に10pxの余白 */
}

#menu ul li a:hover {
     padding: 1vw 0.5vw; /* 上下に5px、左右に10pxの余白 */
}

#menu ul li:not(:last-child)::after {
    margin-left: 0.2vw; /* 縦棒と次の項目の間隔 */
}





}