/* 基本設定 */
body {
    font-family: "Helvetica Neue", "Helvetica", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Arial", "Yu Gothic", "Meiryo", sans-serif;
    margin: 0;
    padding: 0;
    text-align: center;
    background-color: #fff;
    color: #000;
}

/* ヘッダーのスタイル */
header {
    display: flex;
    justify-content: space-between; /* 要素を両端に配置 */
    align-items: center;
    padding: 60px 20px 30px 20px;
    max-width: 800px; /* セクション幅を800pxに統一 */
    margin: 0 auto;
}

/* ロゴ画像の高さ */
header a.logo img {
    height: 25px; /* ロゴ画像の高さ */
}

header nav {
    margin-left: auto; /* ナビゲーションメニューを右に寄せる */
}

/* ナビゲーションメニューの文字を小さくする */
header nav a {
    text-decoration: none;
    color: inherit; /* リンクの色を変更しない */
    margin: 0 5px; /* 文字間隔を詰める */
    font-size: 1em; /* フォントサイズを小さくする */
}

/* ハンバーガーメニューのスタイル */
.hamburger {
    display: block; /* 常に表示 */
    font-size: 1.5em; /* サイズを小さく調整 */
    cursor: pointer;
    position: relative; /* 擬似要素の位置を相対的にする */
    margin-left: 20px; /* ハンバーガーメニューと他のメニューとの間隔 */
}
.hamburger-white{
	color: white;
	display: block; /* 常に表示 */
    font-size: 1.5em; /* サイズを小さく調整 */
    cursor: pointer;
    position: relative; /* 擬似要素の位置を相対的にする */
    margin-left: 20px; /* ハンバーガーメニューと他のメニューとの間隔 */
}

/* 区切り"｜"の余白をハンバーガーメニューの間に追加 */
header nav a:last-child {
    margin-right: 20px; /* 右側に余白を追加 */
}

/* ハンバーガーメニューが表示される時、通常のナビゲーションを隠す */
@media (max-width : 800px ){
	header nav {
        display: none; /* 通常のナビゲーションを非表示 */
    }
}

/* メイン画像のスタイル */
.hero-image img {
    width: 100%; /* 800pxに変更 */
    max-width: 800px;
    height: auto;
    max-height: 400px; /* 最大高さを設定 */
    object-fit: cover; /* 画像がエリアにフィット */
}

/* NEWSセクションのスタイル */
.news {
    margin: 0px auto;
    max-width: 800px; /* 800pxに変更 */
    padding: 0 20px;
    text-align: left;
}

.news h2 {
    padding-bottom: 0px;
    font-size: 1.5em;
}

.news ul {
    list-style: none;
    padding: 0;
}

.news ul li {
    margin-bottom: 15px;
    font-size: 0.9em;
    line-height: 0.4; /* 行間を狭くする */
}

/*横線の設定*/
.border-line {
    border-bottom: 1px solid #000; /* 下に1pxの黒い線を設定 */
    width: 100%; /* 親要素の幅いっぱいに設定 */
    margin: 40px 0; /* 上下の余白を設定 */
}
.border-line-gray {
    border-bottom: 1px solid #B1B1B1; /* 下に1pxの白い線を設定 */
    width: 100%; /* 親要素の幅いっぱいに設定 */
    margin: 40px 0; /* 上下の余白を設定 */
}

/* ABOUTセクションのスタイル */
.about {
    margin: 50px auto;
    max-width: 800px; /* 800pxに変更 */
    padding: 0 20px;
	text-align: center; /* セクション全体を中央揃え */
}

.about-header {
    display: flex; /* フレックスボックスを使用して横並びにする */
    justify-content: center; /* 横中央揃え */
}

.about h2 {
	margin-top: 0px;
	margin-bottom: 0px;
    margin-left: 10px; /* 画像との間隔を設定 */
	font-size: 1.5em;
}

.about-logo-image {
    height: auto; /* 高さを設定（h2の高さに合わせる） */
	margin: 3px 0;
	max-height: 20px;
    width: auto; /* アスペクト比を保つ */
}

.about p {
    text-align: center;
    font-size: 0.9em;
    line-height: 1.4; /* 行間を狭くする */
}

.about-link {
    display: inline-block; /* インラインブロックにして、リンクがコンテンツに続く */
    font-size: 0.9em; /* リンクの文字サイズ */
    color: #333; /* リンクの色 */
    text-decoration: none; /* 下線を削除 */
}

/* プロダクトセクションのスタイル */
.products {
    margin: 50px auto;
    max-width: 800px; /* 800pxに変更 */
    padding: 0 20px;
}

.products h2 {
    text-align: left;
    font-size: 1.5em;
    margin-bottom: 20px;
}

.products img {
    width: 100%; /* セクション幅いっぱいに */
    height: auto;
}

.products p {
    text-align: center;
    font-size: 0.9em;
    line-height: 1.4; /* 行間を狭くする */
}

.products-link {
    font-size: 0.9em; /* リンクの文字サイズ */
    color: #333; /* 色 */
    text-decoration: none; /* 下線を削除 */
}

.contact {
    margin: 50px auto; /* 上下のマージンを設定 */
    max-width: 800px; /* セクションの最大幅を設定 */
    text-align: center; /* 中央揃え */
    padding: 0 20px;
}

.contact-box {
    border: 1px solid #000; /* 四角の線を設定 */
    padding: 10px; /* 内側の余白を設定 */
	width: 80%;
	margin: 0 auto;
}

.contact p {
    text-align: center;
    font-size: 0.9em;
    line-height: 1.4; /* 行間を狭くする */
    margin: 10px 0; /* 上下のマージンを設定 */
}

.contact-link {
    font-size: 0.9em; /* リンクの文字サイズ */
    color: #333; /* リンクの色 */
    text-decoration: none; /* 下線を削除 */
}

/* フッターのスタイル */
footer {
    font-size: 1em;
    max-width: 800px; /* 800pxに変更 */
    margin: 0px auto; /* フッター全体を中央揃え */
    padding: 0 20px;
    text-align: center; /* テキストや要素も中央揃え */
}

.footer-links {
    width: 50%; /* テーブルの幅を50%に設定 */
    border-collapse: collapse; /* ボーダーを重ねる */
    margin: 0px auto; /* 上部の余白を追加 */
}

.footer-links td {
    padding: 0 5px; /* 各セルの内側余白を設定 */
    text-align: center; /* テキストを中央揃え */
    color: #000; /* 文字色を設定 */
}

.footer-links a {
    text-decoration: none; /* 下線を削除 */
    color: #333; /* リンクの色 */
}

/* 1行目のスタイル */
.footer-links tr:nth-child(1) td {
    font-size: 1em; /* 文字サイズを設定 */
    line-height: 1.5; /* 行間を設定 */
}

/* 2行目のスタイル */
/* 3行目のスタイル（必要に応じて設定） */
.footer-links tr:nth-child(2) td,
.footer-links tr:nth-child(3) td {
    font-size: 0.9em; /* 文字サイズを設定 */
    line-height: 1.5; /* 行間を設定 */
}
.footer-links tr:nth-child(2) a,
.footer-links tr:nth-child(3) a {
    font-size: 0.9em; /* 文字サイズを設定 */
    color: #B1B1B1; /* 文字色を設定 */
    line-height: 1.5; /* 行間を設定 */
}

.footer-600 {
	display: none;
}

.footer-image {
    width: auto; /* 画像の幅を設定 */
    max-width: 15px; /* 最大幅を設定 */
    height: auto; /* 高さは自動で設定 */
    display: block; /* ブロック要素として表示 */
    margin: 0 auto; /* 中央揃え */
    padding: 0 5px; /* パディングを設定 */
}

/* フッターのスタイル （※文字色を白にしたいとき用） */
.footer-links-gray {
    width: 50%; /* テーブルの幅を50%に設定 */
    border-collapse: collapse; /* ボーダーを重ねる */
    margin: 0px auto; /* 上部の余白を追加 */
}

.footer-links-gray td {
    padding: 0 5px; /* 各セルの内側余白を設定 */
    text-align: center; /* テキストを中央揃え */
    color: #ffffff; /* 文字色を設定 */
}

.footer-links-gray a {
    text-decoration: none; /* 下線を削除 */
    color: #B1B1B1; /* リンクの色 */
}

/* 1行目のスタイル */
.footer-links-gray tr:nth-child(1) td {
    font-size: 1em; /* 文字サイズを設定 */
    line-height: 1.5; /* 行間を設定 */
}

/* 2行目のスタイル */
/* 3行目のスタイル（必要に応じて設定） */
.footer-links-gray tr:nth-child(2) td,
.footer-links-gray tr:nth-child(3) td {
    font-size: 0.9em; /* 文字サイズを設定 */
    line-height: 1.5; /* 行間を設定 */
}
.footer-links-gray tr:nth-child(2) a,
.footer-links-gray tr:nth-child(3) a {
    font-size: 0.9em; /* 文字サイズを設定 */
    color: #B1B1B1; /* 文字色を設定 */
    line-height: 1.5; /* 行間を設定 */
}

/*幅狭くなったらフッター非表示*/
@media (max-width : 600px ){
	.news ul li {
		line-height: 1.2; /* 行間を狭くする */
	}
    .footer-links {
        display: none; /* 通常のナビゲーションを非表示 */
    }
    /* 文字色を灰色にしたいとき用 */
    .footer-links-gray {
        display: none; /* 通常のナビゲーションを非表示 */
    }

	/* 600以下になった時用のやつ */
	.footer-600 {
		display: flex;
		justify-content: flex-start;
	  	text-align: left;
    	width: 70%; /* テーブルの幅設定 */
    	margin: 0px auto;
	}
	.footer-links-600 {
    	margin: -30px auto;
	 	list-style: none;
	  	padding: 0;
	  	justify-content: center;
	  	align-items: center;
	}
	.footer-links-600 li {
		display: flex;
	  	margin: 10px 0;
	}
	.footer-links-600 a {
		margin-right: 20px;
		color: #333; /* リンクの色 */
 		text-decoration: none; /* 下線を削除 */
	}
	.footer-links-sub {
		font-size: 0.9em;
    	color: #B1B1B1!important; /* リンクの色 */		
	}

    /* 文字色を灰色にしたいとき用 */
	.footer-600-gray {
		display: flex;
		justify-content: flex-start;
	  	text-align: left;
    	width: 70%; /* テーブルの幅設定 */
    	margin: 0px auto;
	}
	.footer-links-600-gray {
    	margin: -30px auto;
	 	list-style: none;
	  	padding: 0;
	  	justify-content: center;
	  	align-items: center;
	}
	.footer-links-600-gray li {
		display: flex;
	  	margin: 10px 0;
	}
	.footer-links-600-gray a {
		margin-right: 20px;
		color: #B1B1B1; /* リンクの色 */
 		text-decoration: none; /* 下線を削除 */
	}
	.footer-links-sub-gray {
		font-size: 0.9em;
    	color: #B1B1B1!important; /* リンクの色 */		
	}

    /* そのほかの設定 */
	.footer-image {
    	margin: 0; /* 中央揃え */
    	padding: 0; /* パディングを設定 */
	}
	.footer-link-1 {
		flex: 0 0 90px;
	}
	.footer-link-2 {
		text-align: left;
	}
}

/* オーバーレイのスタイル */
.overlay {
    display: none; /* 初期状態は非表示 */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8); /* 半透明の背景 */
    z-index: 1000; /* ほかの要素の上に表示 */
}

.overlay-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: left;
    color: white;
}

.overlay nav a {
    color: inherit; /* リンクの色を変更しない */
    text-decoration: none; /* 下線を削除 */
    font-size: 1em;
    margin: 0px;
    line-height: 2; /* 行間を設定 */

}

.overlay nav ul {
    list-style: none; /* リストのマーカーを削除 */
    padding: 0; /* パディングを削除 */
    white-space: nowrap; /* 折り返しを防止 */
    overflow-x: auto; /* 横にオーバーフローした場合にスクロールを表示 */
}

.overlay nav ul li {
    margin-bottom: 10px; /* 各リンクの間に余白を追加 */
}

.link-description {
    font-size: 0.8em; /* 説明文のフォントサイズ */
    color: #D2D2D2; /* 説明文の色 */
    margin-left: 5px; /* 説明文とリンクの間隔を設定 */
	display: inline; /* インライン要素として表示 */
}

/*ここからAboutページの設定*/
.about-section {
    margin: 0 auto 50px auto;
    max-width: 800px; /* 800pxに変更 */
    padding: 0 20px;
    text-align: left;
}

.about h2 {
    text-align: left;
    font-size: 1.5em;
    margin-bottom: 20px;
}

.about-content {
    display: block;
    margin: 0 auto;
}

.about-text {
    display: flex;
    justify-content: space-between; /* 左右に要素を配置する */
    max-width: 800px;
	align-items: flex-end; /* 縦中央に揃える */
    margin: 0 auto;
}

.about-logo {
    align-items: center;
    margin: 20px 0; /* ロゴと説明文の間に余白を設定 */
    width: 150px; /* ロゴ画像のサイズを調整 */
	height: auto;
}

.logo-caption {
    font-size: 0.9em; /* キャプションのフォントサイズ */
    color: #000; /* キャプションの色 */
    margin-top: 40px; /* ロゴとの間隔 */
	text-align: left; /* 文字を左寄せ */
}

.about-section p {
    line-height: 1.6; /* 説明文の行間 */
    font-size: 0.9em;
	text-align: left;
}

.about-section a {
    font-size: 0.9em; /* リンクの文字サイズ */
    color: #333; /* リンクの色 */
    text-decoration: none; /* 下線を削除 */
}

.about-image img {
    width: 150px; /* 画像の幅を設定 */
    height: auto; /* 高さはアスペクト比を維持 */
	margin-left: 20px;
    border-radius: 50%; /* 画像を丸くする（100%で完全な円形に） */
}

@media (max-width : 600px ){
    .about-text {
        flex-direction: column; /* 縦に並べる */
		align-items: flex-start; /* 左寄せ */
    }

    .about-image {
		margin-top: -90px;
        margin-left: auto; /* 左の余白をリセット */
    	border-radius: 50%; /* 画像を丸くする（100%で完全な円形に） */
	}
}

.history-section {
    margin: 50px auto;
    max-width: 800px; /* 800pxに変更 */
    padding: 0 20px;
    text-align: left;
}

.history-section h2 {
    text-align: left;
    font-size: 1.5em;
    margin-bottom: 20px;
}

.history-section ul {
    list-style: none;
    padding: 0;
	margin-bottom: 50px;
}

.history-section ul li {
    margin-bottom: 15px;
    font-size: 0.9em;
    line-height: 0.4; /* 行間を狭くする */
}

/*画面幅が狭くなった時の表の改行用*/
.history-br {
	display: none;
}

/*Historyの短い横線の設定*/
.border-line-short {
    border-bottom: 1px solid #B7B7B7; /* 下に1pxの黒い線を設定 */
    width: 8%; /* 親要素の幅いっぱいに設定 */
    margin: 20px 0; /* 上下の余白を設定 */
}

@media (max-width : 600px ){
	.history-section ul li {
		line-height: 1.2;
	}
	
	.history-br {
		display: inline;
		margin: 0px;
	}
}

/* Productsセクションのスタイル */
.products-section {
    margin: 0 auto;
    max-width: 800px; /* 800pxに変更 */
	padding: 0 20px;
    text-align: left;
}
.products-section h2 {
    text-align: left;
    font-size: 1.5em;
    margin-bottom: 20px;
}

.products-section a {
    text-decoration: none;
    color: inherit; /* リンクの色を変更しない */
}

/* 切り替えボタン範囲の設定 */
.products-tabs {
	display: flex;
  	justify-content: flex-start;
  	margin: 20px 0;
}

.products-tabs button {
	margin-right: 10px;
}

/* タブコンテンツの初期状態 */
.products-tab-content {
	display: none;
}

.product-tab-link {
  	font-size: 0.9em;
    border: 1px solid #777; /* 四角の線を設定 */
    padding: 10px 40px; /* 内側の余白を設定 */
	width: 150px;
  	background-color: white;
	margin-right: 20px;	
	color: black;
}
.product-tab-link:hover {
	cursor: pointer;
	color: gray;
}

.product-tab-link.active {
  	background-color: #F0F0F0;
}

/* 特集商品部分のスタイル */
.product-feature {
    display: flex;
	max-width: 80%;
	margin: 0 auto;
    align-items: flex-start;
}

.product-image img {
    width: 200px; /* 必要に応じてサイズを調整 */
    height: auto;
	margin: 20px;
}

.product-details {
    max-width: 100%;
	text-align: left;
	margin-left: 20px;
}

.product-details h2 {
    font-size: 1.3em;
    margin: 0px 0 -20px 0;
}

.product-details p {
    line-height: 1.5; /* 説明文の行間 */
    font-size: 0.9em;
	text-align: left;
    margin: 20px 0;
}

.product-details a:hover {
	color: gray;
}

.gray {
    color: gray;
    font-size: 0.9em;
}

.product-details a {
    text-decoration: none;
    color: inherit; /* リンクの色を変更しない */
    font-size: 1em; /* フォントサイズを小さくする */
}


/* ギャラリー部分のスタイル */
.product-gallery {
	max-width: 720px;
	margin: 0 auto;
    display: flex;
	flex-wrap: wrap;
    margin-top: 20px;
}

.thumbnail {
    width: 200px;  /* サムネイルの幅を固定 */
    height: 200px; /* サムネイルの高さを固定 */
    overflow: hidden; /* 画像がはみ出さないように隠す */
    position: relative;
	margin: 20px 20px;
}
.product-gallery img {
    width: 100%; /* 幅を親要素に合わせる */
    height: 100%; /* 高さを親要素に合わせる */
    object-fit: contain; /* 画像全体が表示されるように縮小し、アスペクト比を維持 */
    object-position: center; /* 画像を中央に配置 */
}
.product-gallery img:hover {
    opacity: 0.7; /* 半透明 */
}

@media (max-width : 800px ){
	.product-gallery {
	    justify-content: center;
	}
}

@media (max-width : 600px ){
	.product-image {
		margin: 0 auto;
	}
	.product-feature  {
        flex-direction: column; /* 縦に並べる */
		align-items: flex-start; /* 左寄せ */
	}
	.product-feature img {
		width: 250px;
		height: auto;
	}
	.product-details {
		margin-left: 0px;
	}
	.product-gallery {
	    justify-content: center;
	}
	.thumbnail {
		width: 250px;
		height: auto;
		margin: 20px 40px;
	}
}

/* プロダクト詳細部分のスタイル */
.product-content {
	max-width: 800px;
	margin: 0 auto;
    display: block;
	text-align: center;
}

.product-content img {
    width: 90%; /* 幅 */
    height: auto; /* 高さ */
	margin: 5px 0px;
}
.product-content img:hover {
    opacity: 0.7; /* 半透明 */
}

/* オーバーレイのスタイル */
.lightbox {
    display: none;  /* 初期状態は非表示 */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);  /* 背景を半透明に */
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

.lightbox-img {
	max-width: 90%;
    max-height: 90%;
	object-fit: contain;
    border-radius: 10px;
    opacity: 1 !important; /* 透明度を常に100%に固定 */
    transition: none; /* ホバー時のアニメーション効果を無効化 */
}

.lightbox-img:hover {
    opacity: 1; /* ホバー時も透明度を変更しない */
}

/* ナビゲーションボタンのスタイル */
.lightbox-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(255, 255, 255, 0.5);
    border: none;
    font-size: 2em;
    cursor: pointer;
    padding: 10px;
    z-index: 1001;
    color: #000;
}

#prev {
    left: 10px;
}

#next {
    right: 10px;
}

/* オーバーレイが表示されている時 */
.lightbox.show {
    display: flex;
}

/*ここからSupportページの設定*/
.support-section {
    margin: 0 auto 50px auto;
    max-width: 800px; /* 800pxに変更 */
    padding: 0 20px;
    text-align: left;
}

.support-section h2 {
    text-align: left;
    font-size: 1.5em;
    margin-bottom: 20px;
}

.support-text {
    display: flex;
    justify-content: space-between; /* 左右に要素を配置する */
    max-width: 800px;
	align-items: center; /* 縦中央に揃える */
    margin: 0 auto;
}

.support-section p {
    line-height: 1.6; /* 説明文の行間 */
    font-size: 0.9em;
	text-align: left;
}

.rule-section {
    margin: 50px auto;
    max-width: 800px; /* 800pxに変更 */
    padding: 0 20px;
    text-align: left;
}

.rule-section h2 {
    text-align: left;
    font-size: 1.5em;
    margin: 0 0 20px 0;
}

.rule-content {
    display: block;
    margin: 0 auto;
}

.rule-text {
    display: flex;
    justify-content: space-between; /* 左右に要素を配置する */
    max-width: 800px;
	align-items: center; /* 縦中央に揃える */
    margin: 0 auto;
}

.rule-section p {
    line-height: 1.6; /* 説明文の行間 */
    font-size: 0.9em;
	text-align: left;
	margin: 0;
}

.rule-image img {
    width: 150px; /* 画像の幅を設定 */
    height: auto; /* 高さはアスペクト比を維持 */
    margin-left: 20px;
    border-radius: 50%; /* 画像を丸くする（100%で完全な円形に） */}

@media (max-width : 600px ){
    .rule-text {
        flex-direction: column; /* 縦に並べる */
		align-items: flex-start; /* 左寄せ */
    }

    .rule-image {
        margin-top: -90px; /* 上に余白を追加 */
        margin-left: auto; /* 左の余白をリセット */
        margin-bottom: 120px; /* 下に余白を追加してborderの上に配置 */
    	border-radius: 50%; /* 画像を丸くする（100%で完全な円形に） */
	}
}

.download-section {
    margin: 50px auto;
    max-width: 800px; /* 800pxに変更 */
    padding: 0 20px;
    text-align: left;
}

.download-section h2 {
    text-align: left;
    font-size: 1.5em;
    margin-bottom: 20px;
}

.download-section ul {
    list-style: none;
    padding: 0;
	margin-bottom: 50px;
}

.download-section li {
	display: flex;
	justify-content: flex-start;
	align-items: center;
    margin-bottom: 0px;
    font-size: 0.9em;
}

.game-title {
	flex: 0 0 150px;
}

.download-link {
	text-align: left;
}

.download-section a {
    font-size: 0.9em; /* リンクの文字サイズ */
    color: #333; /* リンクの色 */
    text-decoration: none; /* 下線を削除 */
	padding: 0 20px;
}
.download-section a:hover {
	color: gray;
}

/*画面幅が狭くなった時の表の改行用*/
.download-br {
	display: none;
}

@media (max-width : 600px ){
	.download-section ul li {
		line-height: 1.5;
	}
	
	.download-section li {
		margin-bottom: 20px;
		display: block;
	}
	.download-br {
		display: inline;
		margin: 0px;
	}
}

.tabs {
	display: flex;
  	justify-content: flex-start;
  	margin: 20px 0;
}

.tabs button {
	margin-right: 10px;
}

.tab-link {
  	font-size: 0.9em;
    border: 1px solid #777; /* 四角の線を設定 */
    padding: 10px 40px; /* 内側の余白を設定 */
	width: 150px;
  	background-color: white;
	margin-right: 20px;
	color: black;
}
.tab-link:hover {
    cursor: pointer;
  	color: gray;
}

.tab-link.active {
  	background-color: #F0F0F0;
}

.tab-content {
  	display: none;
}

.tab-content.active {
  	display: block;
}

.rule-tabs {
	display: flex;
  	justify-content: flex-start;
  	margin: 20px 0;
}

.rule-tabs button {
	margin-right: 10px;
}

.rule-tab-link {
    border: 0px solid #000; /* 四角の線を設定 */
 	/* width: 100px; */
    width: auto;
	color: #333;
  	background-color: white;
	text-align: left;
}
.rule-tab-link:hover {
  	color: gray;
}

.rule-tab-link.active {
	color: #B1B1B1;
}

.faq-cards {
    display: block;
    max-width: 800px;
    margin: 30px 0 60px 0;
}

.faq-cards h2 {
    margin: 10px 0;
    font-size: 0.9em;
}

.faq-card {
    border: 1px solid #B1B1B1;
    padding: 10px;
    margin: 0px 0 20px 0;
}

.faq-card h3 {
    margin: 5px;
    font-size: 0.9em;
}

.faq-card p {
    margin: 5px;
    font-size: 0.9em;
    color: #555;
}

/*ここからContactページの設定*/
.contact-section {
    margin: 0 auto 50px auto;
    max-width: 800px; /* 800pxに変更 */
    padding: 0 20px;
    text-align: left;
}

.contact-section h2 {
    text-align: left;
    font-size: 1.5em;
    margin-bottom: 20px;
}

.contact-text {
    display: block;
    max-width: 800px;
	align-items: center;
    margin: 0 auto;
}

.contact-section p {
    line-height: 1.6; /* 説明文の行間 */
    font-size: 0.9em;
	text-align: left;
}

.contact-section a {
    color: #333; /* リンクの色 */
    text-decoration: none; /* 下線を削除 */
}

.contact-section ul {
    list-style: none;
    padding: 0;
	margin: 40px 0;
}

.contact-section li {
	display: flex;
	justify-content: flex-start;
	align-items: center;
    margin-bottom: 0px;
    font-size: 0.9em;
    color: #333; /* リンクの色 */
}

.contact1 {
	flex: 0 0 100px;
}
.semicolon {
	flex: 0 0 20px;
}