@charset "utf-8";

.main-visual, .sub-visual {
    position: relative; /* ポジションを相対的に設定 */
    height: 100vh; /* 高さをビューポートの高さに揃える */
    background-size: cover; /* 背景画像を要素全体にカバー */
    background-position: center center; /* 写真の真ん中を表示 */
    background-repeat: no-repeat; /* 画像の繰り返しを無効に */
    color: #f5f5f5;
    text-align: left;
    width: 100%; /* 幅を100%に設定 */
    margin: 0; /* マージンをリセット */
    padding: 0; /* パディングを取り除く */
}

.main-visual {
    background-image: url("images/main.png");
    margin-top: 56px;
}

.sub-visual {
    background-image: url("images/sub.png");
    height: 100vh; /* 上の写真と同じ高さに設定 */
    margin-top: 0; /* 余白を取り除く */
}

/* 上と下の写真の比率を揃える */
.wrapper {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    gap: 0; /* 写真間の余白を取り除く */
}
.main-goal { /* ミッションの文字 */
    font-size: 50px;
    font-family: serif;
    position: absolute; /* 文字の位置を絶対指定 */
    top: 75%; /* 上から50%の位置に設定 */
    left: 50%; /* 左から50%の位置に設定 */
    transform: translate(-75%, -50%); /* 中央に配置 */
    z-index: 1; /* 文字を画像の上に表示 */
}
.latest_news {
    margin-top: 20px;
	position: relative;
	font-size: 30px;
	text-align: left;
	border-bottom: 5px solid #dddddd;
}
.latest_news::after { /* ニュース文字より下の線 */
	content: '';
	position: absolute;
	bottom: -5px;
	left: 50%;
	transform: translateX(-50%);
	width: 70px;
	height: 5px;
	background-color: #387ccc;
}
ul{
    list-style-type: none; /* リストのマーカーを非表示にする */
    padding: 0;
}
li{
    display: flex;
    padding:15px;
    border-bottom: solid;
    align-items: center; /* 垂直方向に要素を中央揃え */
    margin-bottom: 10px; /* 各リストアイテムの間にスペースを追加 */
}
.day{ /* 日付 */
    width: 100px; /* 固定幅を設定して、他の要素との整列を容易にする */
    text-align: right; /* 日付を右揃えにすることで、間隔を均等に保つ */
    margin-right: 10px; /* 日付とラベルの間にスペースを追加 */
}
.label { /* 青いラベル */
    background-color: blue;
    border-radius: 3px;
    color: #fff;
    padding: 5px 10px;
    margin-right: 10px; /* ラベルとテキストの間にスペースを追加 */
    min-width: 200px; /* 固定幅を設定 */
    height: 60px; /* 固定高さを設定 */
    display: flex;
    justify-content: center; /* 水平方向に中央揃え */
    align-items: center; /* 垂直方向に中央揃え */
    text-align: center; /* テキストの中央揃え */
    line-height: normal; /* 行の高さを標準にする */
    box-sizing: border-box;
}
.text{ /* 内容 */
    flex-grow: 1; /* 残りのスペースをこの要素が占めるようにする */
    margin-left: 5px; /* 左側の余白 */
}

.news-button {
    color: inherit; /* テキストの色 */
    text-decoration: none; /* テキストの下線を消す */
    display: flex;
    align-items: center; /* 子要素を垂直方向に中央揃え */
    width: 100%; /* ボタンを全幅にする */
}

.news-button:hover {
    color: #007bff; /* ホバー時のテキスト色 */
    text-decoration: underline; /* ホバー時に下線を追加する */
}

.menu {
    padding: 0px 0 50px;
    color: #5a5c5f;
}
.menu-card {
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* 上下の要素を均等に配置 */
    align-items: center; /* 中央揃えにする */
    width: 32%; /* カードの幅を設定 */
    margin-top: 35px;
    box-sizing: border-box; /* パディングやボーダーを幅に含む */
    min-height: 300px; /* 必要に応じて最小高さを設定 */
}
.menu-card-inner {
    padding: 20px;
    background-color: #dbe0e4;
    border-radius: 7px;
    box-shadow: 1px 1px 4px #d2d4d6;
    text-align: center;
    margin: 0 20px;
    flex-grow: 1; /* カードの高さを揃える */
    display: flex;
    flex-direction: column; /* 縦に並べる */
    justify-content: space-between; /* 画像とテキストの間のスペースを均等にする */
}
.menu-card-inner p {
    height: 50px; /* 文字の高さを固定 */
    display: flex;
    align-items: center; /* 垂直方向に中央揃え */
    justify-content: center; /* 水平方向に中央揃え */
    margin-top: 10px; /* 画像とテキストの間に余白を設定 */
    font-size: 20px;
    font-weight: bold;
}
.menu-card-inner a {
    text-decoration: none;
}
.menu-card-inner img {
    width: 100%; /* 親要素の幅に合わせる */
    height: 200px;
    max-height: 200px; /* 画像の最大高さを設定して過度に大きくならないようにする */
    object-fit: cover; /* 画像の縦横比を保ちながら、親要素に収める */
    border-radius: 5px; /* 角丸を適用 */
}
.menu-image {
    width: 100%;
    margin-bottom: 20px;
    border-radius: 5px;
}
.menu-title {
    margin-bottom: 8px;
}
.menu-text {
    font-size: 14px;
}
.menu-card-wrapper {
    display: flex;
    flex-wrap: wrap;
}