@charset "utf-8";
/* CSS Document */

/* 言語切り替えリンクのスタイル */
.language-switcher {
    text-align: right; /* ヘッダー右側に配置 */
    margin-top: 10px; /* ヘッダー内の間隔調整 */
    margin-right: 20px; /* ヘッダーの右端に揃える */
    font-size: 0.9em; /* フォントサイズをやや小さめに */
}

.language-switcher a {
    color: white; /* リンクの文字色 */
    text-decoration: none; /* アンダーラインを削除 */
    margin: 0 5px; /* リンク間の間隔 */
    font-weight: bold; /* 強調表示 */
}

.language-switcher a:hover {
    text-decoration: underline; /* ホバー時のアンダーライン追加 */
    color: #FFCC00; /* ホバー時のリンク色（黄色） */
}

body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: white;
}

header {
    width: 100%; /* Ensure the header spans the full width */
    background-color: #0013E9;
    color: white;
    padding: 10px 0;
    text-align: center;
    position: fixed;
    top: 0;
    z-index: 1000;
}

header a {
    color: white;
    text-decoration: none;
    margin: 0 15px;
}

header a:hover {
    text-decoration: underline;
}

.hero {
    position: relative;
    text-align: center;
    margin-top: 60px; /* Add margin to avoid overlap with fixed header */
}

.hero img, .hero video {
    width: 100%;
    height: auto;
}

.hero-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    font-size: 3em;
    font-weight: bold;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

.content {
    padding: 20px;
    max-width: 1200px;
    margin: 0 auto;
    clear: both;
    margin-top: 20px; /* Add some margin to avoid content getting too close to header */
}

/* ...rest of your CSS remains the same... */


.content section {
    margin-bottom: 20px;
}

.content2 {
    padding: 20px;
    max-width: 1200px; /* 一般的な最大幅 */
    margin: 0 auto; /* 中央寄せ */
    clear: both; /* 追加 */
}

.content2 section {
    margin-bottom: 20px;
}

footer {
    width: 100%; /* Ensure the footer spans the full width */
    background-color: #0013E9;
    color: white;
    padding: 10px 0;
    text-align: center;
    margin-top: 0px; /* Add space above the footer */
    bottom: 0; /* Stick the footer to the bottom */
    z-index: 1000; /* Ensure it stays above other content */
	margin 0;
	padding-left: 0;
}

footer nav {
    margin-bottom: 0px;
}

footer a {
    color: white;
    text-decoration: none;
    margin: 0 0px;
}

footer a:hover {
    text-decoration: underline;
}

footer .lang {
    margin-top: 10px;
}

/* メディアクエリでレスポンシブ対応 */
@media (max-width: 1200px) {
    .hero img,
    .hero video,
    .content {
        max-width: 80%;	/* 100% */
    }
}

@media (max-width: 768px) {	/* 768px */
    .hero-text {
        font-size: 2em;
    }
}

/* About Us Styles */
.about-us-container {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    align-items: center;
}

.about-us-text {
    flex: 1;
    min-width: 300px;
		color: Black;
    font-size: 16px;
}

.about-us-image {
    flex: 1;
    min-width: 300px;
}

.about-us-image img {
    width: 100%;
    height: auto;
    border-radius: 10px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

/* Additional Styles for Achievements and Initiatives */
.achievements-and-initiatives-container {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    align-items: center;
}

.achievements-and-initiatives-text {
    flex: 1;
    min-width: 200px;
			color: Black;
    font-size: 18px;

}

.achievements-and-initiatives-image {
    flex: 1;
    min-width: 100px;
}

.achievements-and-initiatives-image img {
    width: 100%;
    height: auto;
    border-radius: 10px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

header {
    display: block; /* もしくは flex, grid など統一する */
    width: 100%;
}

/* Additional Styles for vision-and-mission */
.vision-and-mission-container {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    align-items: center;
}

.vision-and-mission-text {
    flex: 1;
    min-width: 300px;
	color: Black;
    font-size: 16px;

}

.vision-and-mission-image {
    flex: 1;
    min-width: 100px;
}

.vision-and-mission-image img {
    width: 100%;
    height: auto;
    border-radius: 10px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

/* 拠点マップ */
.InWIT-map-container {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    align-items: center;
}

.InWIT-map-text {
    flex: 1;
    min-width: 300px;
	color: Black;
    font-size: 16px;
}

.InWIT-map-image {
    flex: 1;
    min-width: 250px;
}

.InWIT-map-image img {
    width: 100%;
    height: auto;
    border-radius: 10px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);

	border: none; /* 枠を削除 */
    outline: none; /* フォーカス時のアウトラインを削除 */
    box-shadow: none; /* シャドウがある場合も削除 */
}

/* Additional Styles for our-services */
.our-services-container {
    display: flex;
    flex-wrap: wrap;
    gap: 1px;
    align-items: center;
	margin-left 0px;
}

.our-services-text {
    flex: 1;
    min-width: 380px;
	color: Black;
    font-size: 16px;
	padding-right: 20px;
}

.our-services-image {
    flex: 1;
    min-width: 80px;
}

.our-services-image img {
    width: 80%;
    height: auto;
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

/* Additional Styles for Our members */
.our-members-container {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin-bottom: 10px;
    gap: 10px; /* 要素間の最小限の間隔 */
}

.our-members-text {
    flex: 1;
    min-width: 150px;
    color: Black;
    font-size: 18px;
    margin-left: 40px; /* 余白をなくす */
	padding-right:20px;
}

.our-members-image {
    flex: 0 0 auto; /* 画像サイズを固定 */
    min-width: 100px;
    margin-left: 40px; /* 画像を右に寄せるためにマージンを追加 */
}

.our-members-image img {
    width: 200px; /* 必要に応じてサイズを調整 */
    height: 200px; /* 必要に応じてサイズを調整 */
    border-radius: 50%;
    object-fit: cover; /* 画像を中央に表示し、アスペクト比を保ちながらサイズを調整 */
    margin: 0; /* 余白をなくす */
}

/* Additional Styles for vision-and-mission */
.impact-container {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    align-items: center;
}

.impact-text {
    flex: 1;
    min-width: 300px;
	color: Black;
    font-size: 16px;
		padding-right:20px;

}
.impact2-text {
    flex: 1;
    min-width: 300px;
	color: blue;
    font-size: 52px;
	padding-right:20px;
}
.impact3-text {
    flex: 1;
    min-width: 300px;
	color: blue;
    font-size: 18px;
	padding-right:20px;
}

.impact-image {
    flex: 1;
    min-width: 100px;
}

.impact-image img {
    width: 100%;
    height: auto;
    border-radius: 10px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.impact rounded-box {
  width: 1024px; /* 幅を指定 */
  padding: 20px; /* 内側の余白を指定 */
  background-color: black; /* 背景色を白に設定 */
  border: black;
  border-radius: 15px; /* 角を丸くする */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* ボックスに影をつける（オプション） */
  margin: 20px auto; /* 中央に配置するための余白 */
}


/* Additional Styles for Strategy and Solution */
.st-and-so-container {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    align-items: center;
}

.st-and-so-text {
	    flex: 0;
    min-width: 300px;
		color: Black;
    font-size: 18px;
		padding-right:20px;

}

.st-and-so-image {
    flex: 0;
    min-width: 80px;
}

.st-and-so-image img {
    width: 70%;
    height: auto;
    border-radius: 10px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
	
    border: none; /* 枠を削除 */
    outline: none; /* フォーカス時のアウトラインを削除 */
    box-shadow: none; /* シャドウがある場合も削除 */
}

}

/* Additional Styles for company */
.company-container {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    align-items: center;
}

.company-text {
	    flex: 1;
    min-width: 300px;
		color: Black;
    font-size: 18px;
		padding-right:20px;

}

.company-image {
    flex: 1;
    min-width: 100px;
}

.company-image img {
    width: 100%;
    height: auto;
    border-radius: 10px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

/* Additional Styles for contact */
.contact-container {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    align-items: center;
}

.contact-text {
	    flex: 1;
    min-width: 300px;
		color: Black;
    font-size: 18px;
	padding-right:20px;

}

.contact-image {
    flex: 1;
    min-width: 100px;
}

.contact-image img {
    width: 100%;
    height: auto;
    border-radius: 10px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

/* テーブルをレスポンシブにするためのスタイル */
.table-responsive {
    width: 100%;
    overflow-x: auto; /* 横スクロールを有効にする */
    -webkit-overflow-scrolling: touch; /* スムーズなスクロールをモバイルで実現 */
}

table {
    width: 100%;
    border-collapse: collapse; /* ボーダーを重ねて表示 */
    margin-bottom: 20px; /* テーブル下部に余白 */
}

th, td {
    padding: 10px;
    text-align: left; /* テキストを左揃え */
    border-bottom: 1px solid #ddd; /* ボーダーの色 */
}

th {
    background-color: #f4f4f4; /* ヘッダー背景色 */
}

@media (max-width: 768px) {
    table {
        font-size: 14px; /* 小さな画面用にフォントサイズを調整 */
    }
}

/* Additional Styles for Achievements and Initiatives 
#achievements-and-initiatives {
    margin-bottom: 20px;
    padding: 20px;
    background-color: #f4f4f4;
    border-radius: 10px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

#achievements-and-initiatives h2 {
    /* color: #0013E9; */  /*

}
#achievements-and-initiatives p {
    margin-top: 10px;
    font-size: 1.1em;
}

*/