@charset "utf-8";

/*===== 全般的なスタイル =====*/
* {
	margin:0; padding:0; 		/*自動生成される余白をゼロにする*/
}

body {
background-image: url(../image/b015.jpg);	/*ページ全体の背景色*/
font-size:100%;		/* フォントサイズを100%にする */
font-family: sans-serif;		/* フォントの種類 */
line-height:1.5;		/* 行の高さを1.5倍にする */
}

img {border:0;} 				/*画像のボーダーを0にする*/

/*==== ヘッダ =====*/

.header {
    display: flex;
    align-items: center;          /* menu height = logo height */
    /*background-color: #fff;*/
}

/*===== ろごサイズ =====*/

.logo {
    width: 250px;
    height: auto;
    margin: 10px;
    flex-shrink: 0;               /* IMPORTANT: prevents shrinking */
}

/*===== メインメニュー =====*/

/* メニュー全体のコンテナ */
.menu-container {
    flex: 1;                      /* take remaining space */
    height: 100%;                 /* match header height */
}

/* リストのスタイルをリセットし、横並びに */
.menu-list {
    display: flex;
    justify-content: center;
    align-items: center;          /* vertical centering */
    list-style: none;
    margin: 0;
    padding: 0;
    height: 100%;
    white-space: nowrap;          /* 🚫 no wrapping */
}

/* メニュー項目のリンク設定 */
.menu-list li a {
    font-size: clamp(15px, 1.8vw, 24px);
    font-weight: bold;
    padding: 0 clamp(10px, 1.5vw, 20px);
    text-decoration: none;
    color: black;
    font-family: Arial, sans-serif;
    line-height: 1;               /* keeps height clean */
}

/* ホバー時の効果 */
.menu-list li a:hover {
    /* background-color: #ccc; */
	color: #ccc;
}

/*===== 文字の指定 =====*/

h1 {
    font-size:40px;			/*文字サイズ*/
    padding:5px 10px;  /*内側の余白*/
    background:rgba(0,0,0,0.8);  /*背景の色指定*/
    text-align:center;
    color: white;       /*文字色指定*/
}

h2 {
    font-size:38px;			/*文字サイズ*/
    padding:5px 10px;  /*内側の余白*/
    background:#660000;  /*背景の色指定*/
    text-align:center;
    color: white;       /*文字色指定*/
}

h3 {
	font-size:35px;			/*文字サイズ*/
	color:black;			/*文字色*/
	text-align:center;
}

h4 {
    font-size:20px;			/*文字サイズ*/
    padding:5px 10px;  /*内側の余白*/
    background:#660000;  /*背景の色指定*/
    text-align:center;
    color: white;       /*文字色指定*/
}

p {
	line-height: 1.7;    		/*行間*/
	font-size:18px;			/*文字サイズ*/
	text-indent:35px;
}

a:hover {
  text-decoration: underline;
}

.centered-list {
    display: inline-block;   /* allows centering */
    text-align: left;        /* proper vertical alignment */
}