@charset "UTF-8";

    /* HTMLページ全体（body）の見た目やレイアウトの基本設定	*/
    body {										/* 読みやすくて中央に整った、最大幅1000pxのシンプルなページデザイン																		*/
      font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
															/* フォントの指定。左から順に「優先順位」があり、使えるフォントがあればそれが適用される。							*/
															/* 　																→ 環境に応じて見やすいフォントを自動で選ぶ設定										*/
															/* 　・Helvetica Neue → 英語向けのきれいなフォント																							　　	*/
															/* 　・Arial → よく使われる標準フォント																													　　*/
															/* 　・Hiragino Kaku Gothic ProN や Hiragino Sans → Macの日本語フォント											　　		*/
															/* 　・Meiryo → Windowsの日本語フォント																													　　*/
															/* 　・sans-serif → 最後の保険（ゴシック体）																											　　*/
      line-height: 1.6;				/* 行と行の間の高さ（行間）を指定。1.6は「文字サイズの1.6倍 → 行間を広くして読みやすくしている。			*/
      color: #333;						/* 文字の色を指定。#333は「やや薄い黒（ダークグレー）」→ 真っ黒より目に優しい色。										*/
      max-width: 1000px; 			/* コンテンツの最大幅を1000pxに制限 → 大きい画面でも横に広がりすぎないようにするため。								*/
      margin: 0 auto;					/* 外側の余白（上下・左右）を指定。0：上下の余白なし、auto：左右を自動調整 → 横方向に中央寄せされる。*/
		  padding: 20px;					/* 内側の余白（コンテンツと端の距離）四方向すべて20px → 文字が端にくっつかず、見やすくなる。					*/
    }

    /* ページ上部の見出し・タイトル部分などに対する指定。下線を消し、要素を整列 */
    header {									/* headerの中に少し余白を持たせつつ、下の要素としっかり間隔を空ける。																	*/
      margin-bottom: 30px;		/* 要素の外側の下の余白を30pxに設定 → headerの下にあるコンテンツ（本文など）との間にスペースを作る。	*/
															/*																		 見た目に「区切り」ができる。																		*/
      padding-bottom: 10px;		/* 要素の内側の下の余白を10pxに設定 → headerの中のコンテンツ（タイトルやナビなど）と、								*/
															/*																		 headerの下端との間に余白を作る。																*/
    }

		/* クラス名 org-name を持つ要素に摘要される → class = "org-name"	*/
    .org-name {								/* 少し小さくて薄い色の、補足情報テキスト																															*/
      font-size: 0.9em;				/* 文字サイズを「親要素の0.9倍」に設定、少し小さめの文字になる → メインのタイトルより控えめに見せる。*/
      color: #666; 						/* 文字色をグレーに設定（#666）、#333よりさらに薄い → 主張しすぎない「補助情報」っぽい見た目。				*/
      margin-bottom: 10px;		/* 下に10pxの余白　→ 次の要素との間に少しスペースを作る。																						*/
    }

    /* ヘッダー内の要素を横並びにしてきれいに整列する → ロゴと見出しを横一列に並べる */
    .header-main {						/* ヘッダーの中身を横並びにしつつ、きれいに中央揃えして、レスポンシブ対応もする												*/
      display: flex;					/* 子要素を「横並び」にする指定 （通常は縦に並ぶ要素を、横一列に並べる）															*/
      align-items: center;		/* 縦方向（上下・垂直方向）の位置を中央に揃える（高さが違う要素でも、真ん中でピタッと揃う）　　　　　 */
      gap: 20px;							/* 要素間の余白 → 要素同士の間隔を20px空ける（marginを個別に設定しなくても、均等な余白ができる）			*/
      flex-wrap: wrap;				/* 画面が狭い時に（横に並びきらない場合）次の業に折り返す　　　　　　　　　　　　　　　　　　　　　　 */
		}

		/* .header-main の中にある <a> タグに対する指定	*/
    .header-main a {
      text-decoration: none;	/* リンクの下線を消す */
      display: flex;					/* リンク要素をFlexboxレイアウトにする 　　　→ 中に入っている要素(画像や文字)を横並び・縦中央などに	*/
															/* 																				　　　しやすくなる																					*/
      align-items: center;		/* Flexboxで並べた要素を縦方向の中央に揃える → 画像と文字の高さが違っても、中央位置を合わせて				*/
															/*																							見た目を整えられる																		*/
    }

		/* header-mainの中にある画像(img)への指定 */
    .header-main img {
      display: block;																/* 画像をブロック要素として表示する 																						*/
      border: none;																	/* 画像の枠線を表示しない 																											*/
    }

		/* サイトタイトルのデザイン設定 */
    .site-title {
      font-size: 1.8em;															/* 文字サイズを親要素の1.8倍に設定 																							*/
      font-weight: bold;														/* 文字を太字にする 																														*/
      /*color: #0066CC;*/														/* 文字色を青色（#0066CC）に設定 																								*/	
      color: #000000;																/* 文字色を黒色（#000000）に設定 																								*/
      margin: 0;																		/* 要素の外側の余白をすべて0にする 																							*/
      line-height: 1.2;															/* 行の高さを文字サイズの1.2倍に設定 																						*/
    }

    /* メイン画像の表示設定 */
    .main-visual {
      width: 100%;																	/* 横幅を親要素いっぱいに表示																										*/
      height: auto;																	/* 縦横比を維持して高さを自動調整																								*/
      border-radius: 8px;														/* 角を少し丸くする																															*/
      margin-bottom: 30px;													/* 画像の下に30pxの余白を設ける																									*/
    }

    /* Englishの位置調整 */
    .lang-link {
      text-decoration: none;												/* リンクの下線を消す 																													*/
      color: #0066CC;																/* リンク文字を青色にする 																											*/
      font-size: 0.85em;														/* 文字サイズを親要素の85%にする 																								*/
      margin-left: 400px;														/* 左側に400pxの余白を設ける → 必要に応じて数値を変更して左寄せ具合を調整 			*/
      white-space: nowrap;													/* 改行を禁止して1行で表示する																									*/
    }

    /* 紹介文セクションの設定（紹介文エリア全体の下余白） */
    .intro-section { 
      margin-bottom: 40px; 													/* セクションの下に40pxの余白を設ける 																					*/
    }
    
		/* 紹介文内の段落設定（各段落の余白）	*/
    .intro-text p {
      margin-bottom: 1.5em;		/* 各段落の下に1.5文字分の余白を設ける																																*/
															/* em は文字サイズを基準にした相対単位 → 例えば font-size:16px なら 1.5em = 24px											*/
    }

		/* ユニットグリッドを3列に固定する設定。カードの最小幅を調整する（3列を維持するため） */
		.unit-grid { 
	    display: grid; 																/* グリッドレイアウト（表のようなレイアウト）を使用															*/
	    grid-template-columns: repeat(3, 1fr); 				/* 3列を均等な幅で作成 																													*/
	    gap: 20px;           													/* 各要素（マス）の間隔を20pxに設定																							*/
	    margin-top: 30px;															/* グリッド全体の上側に30pxの余白を作る																					*/
		}

		/* ユニットカードを横並びの設定に */
		.unit-card { 
	    display: flex;       													/* 子要素を横並びにする	 																												*/
	    align-items: center; 													/* 子要素を上下中央に揃える（垂直方向を中央に揃える） 													*/
	    gap: 15px;           													/* 子要素同士の間隔（画像と文字の間の距離）を15pxにする 												*/
	    border: 1px solid #ddd; 											/* 薄いグレーの枠線を付ける 																										*/
	    padding: 15px; 																/* 内側に15pxの余白を設ける 																										*/
	    border-radius: 5px; 													/* 角を5px丸くする 																															*/
	    text-align: left;    													/* テキストを左寄せにする 																											*/
	    background: #f9f9f9; 													/* 薄いグレーの背景色を設定 																										*/
	    transition: transform 0.2s, box-shadow 0.2s; 	/* アニメーションを滑らかにする 																								*/
	    cursor: pointer; 															/* マウスカーソルを指マークにする 																							*/
		}

		/* 画像のサイズ固定（横並びで崩れないようにする） */
		.unit-card img {
			width: 150px;																	/* 横幅を150pxに固定 																														*/
	    height: 150px;																/* 高さを150pxに固定 																														*/
	    margin-bottom: 0;    													/* 下側の余白をなくす 																													*/
	    flex-shrink: 0;      													/* Flexレイアウト時に画像が縮まないようにする（潰れないように固定） 						*/
	    object-fit: contain;													/* 縦横比を維持したまま枠内に収める	 																						*/
			display: block;																/* ブロック要素として表示する 																									*/
		}

		/* ユニット名の表示設定（文字部分の調整） */
		.unit-name { 
			font-weight: bold; 														/* 文字を太字にする 																														*/
	    font-size: 0.95em; 														/* 文字サイズを親要素の95%にする 																								*/
	    color: #004687;																/* 濃い青色の文字にする 																												*/
			line-height: 1.3;															/* 行間を文字サイズの1.3倍にする 																								*/
		}

    /* フッターの設定 */
    footer { 
      margin-top: 50px; 														/* 上側に50pxの余白を設ける 																										*/
      padding-top: 20px; 														/* 内側上部に20pxの余白を設ける 																								*/
      border-top: 1px solid #eee; 									/* 上部に薄いグレーの区切り線を表示 																						*/
      font-size: 0.8em; 														/* 文字サイズを少し小さくする 																									*/
      text-align: right; 														/* テキストを右揃えにする 																											*/
    }

		/* 区切り線の設定 */
    hr {
      border: none;																	/* デフォルトの枠線を消す 																											*/
      border-top: 1px solid #eee;										/* 上側に薄いグレーの横線を表示 																								*/
      margin: 40px 0;																/* 上下に40pxの余白を設ける 																										*/
    }