@charset "UTF-8";

body{
	margin:0 auto;
	padding:0;
	max-width: 1280px;
	color:#464646;
	font-family:Arial, Helvetica, "sans-serif";
	font-size: 18px;
}


/* ==================== ナビゲーション ==================== */
.navi {
    display: flex;
    justify-content: space-between; /* ロゴとメニューを左右に分ける */
    align-items: center;
    width: 100%; /* ビューポート全体の幅に広げる */
    max-width: 1200px; /* 固定幅 */
    margin: 0 auto; /* 中央寄せ */
    padding: 10px 20px;
    box-sizing: border-box; /* パディングを含む幅計算 */
    background: #FFFFFF;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.logo {
    margin-right: auto; /* ロゴを左寄せ */
}

.logo img {
    width: 100px; /* ロゴ画像の幅を固定 */
    height: auto;
}

.navi ul {
    display: flex; /* 横並び */
    justify-content: flex-end; /* 右寄せ */
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 50px; /* メニュー間の間隔 */
}

.navi ul li {
    flex: none; /* 均等幅を解除して自然な間隔に */
    text-align: center; /* メニュー項目を中央揃え */
}

.navi ul li a {
    display: block;
    color: gray;
    text-decoration: none;
    font-size: 16px; /* フォントサイズ固定 */
    transition: color 0.3s;
    white-space: nowrap; /* テキストを1行に固定 */
    overflow: hidden; /* はみ出す部分を隠す */
    text-overflow: ellipsis; /* 長すぎる場合に省略記号を表示 */
}

.navi ul li a:hover {
    color: black;
}


/* ==================== メディアクエリ ==================== */
@media (max-width: 768px) {
    .navi {
        flex-direction: row; /* 横並びを維持 */
    }

    .navi ul {
        flex-wrap: nowrap; /* 折り返しを防止 */
    }

    .navi ul li {
        flex: 1; /* 各項目を均等に配置 */
    }
}




/*====================スマホ用====================*/
@media screen and  (max-width:599px) { 
#mainpc{
    display: none;
	}
	p{
	 font-size:18px;
	}
}

/*====================PC用====================*/
@media screen and  (min-width:599px) {
	#mainsp{
    display: none;
  }
}