/* ページ全体の設定 */
body {	text-align: justify;
	margin: 0px auto;
}

#site-box {
          width : 100%;
          border-top: none;
          border-bottom: none;
          margin : 0px auto 0px auto;
}
/* ページ全体の設定ここまで */




/* Header */
#header {
        clear: both;
        width: 100%;
	margin: 0px;
        padding : 0px;
	background: linear-gradient(to top, #F9EABD, #ffffff);
	margin: 0px;
}

#header a {
	color: #222222;
	text-decoration : none;
	font-size: 22px;
	line-height: 34pt;
	font-weight: bold;
}

#header a:hover {
	color: #666666;
	text-decoration : underline;
}

#header table{
        clear: both;
	width: 95%;
	max-width: 750px; /* PCで見ても広がりすぎないように制限 */
	margin: 0 auto;   /* 中央寄せ */
	border-collapse: collapse;
}

/* Headerここまで */


/* Header2 */
#header2 {
        clear: both;
        width: 100%;
	margin: 0px;
        padding : 0px;
	margin: 0px;
}

#header2 .support-text-box {
    background-color: rgb(242, 232, 216);
    color: #000000;
    padding: 10px;
    margin: 10px auto;
    border-radius: 4px;
    line-height: 1.6;
    text-align: left;
    font-family: "メイリオ", Meiryo, sans-serif;
    width: 90%; /* PCでは少し余裕を持たせる */
    box-sizing: border-box;
    font-size: 16px; /* 基本の大きさ */
}
/* Header2ここまで */


/* header-mini */
#header-mini {
        clear: both;
        width: 100%;
	margin: 0px;
	padding: 10px 0;
	background: linear-gradient(to top, #F9EABD, #ffffff);
}

/* ロゴの設定 */
#header-mini .logo-link {
    line-height: 0;
}

#header-mini .logo-link img {
    height: 40px;
    width: auto;
    vertical-align: middle;
}

/* タイトルテキストの設定 */
#header-mini .title-link {
    text-decoration: none;
    color: #222222;
    font-size: 1rem;
    font-weight: bold;
    line-height: 1.4;
}


/* コンテンツ */
#col1 {
          width : 100%;
	  margin: 0px auto;
          font-size: 12px;
          background-color: #ffffff;
          line-height: 20pt;
          font-family: "メイリオ";
          clear: both;
}

#col1 a {
	color: #222222;
	text-decoration : none;
	font-size: 16px;
	background-color: #ffffff;
	line-height: 24pt;
}


#col1 a:hover {
	background-color:#eeeeee;
	color:#666666;
	text-decoration : underline;
}

#col1 table{
        font-size: 16px;
        line-height: 24pt;
        font-family: "メイリオ";
        clear: both;
	width: 95%;
	max-width: 1100px; /* PCで見ても広がりすぎないように制限 */
	margin: 0 auto;   /* 中央寄せ */
	border-collapse: collapse;
}


/* 一重の囲み（赤・青・黃） */
.hover-border-red:hover {
    outline: 2px solid #E72619;
    outline-offset: -2px;
    border-radius: 10px;
}

.hover-border-blue:hover {
    outline: 2px solid #1B68B3;
    outline-offset: -2px;
    border-radius: 10px;
}

.hover-border-yellow:hover {
    outline: 2px solid #DF9E44;
    outline-offset: -2px;
    border-radius: 10px;
}


/* ニュース全体を包むコンテナ */
.news-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 15px; /* ボックス同士の間隔 */
    justify-content: left;
    margin: 20px auto;
    width: 95%;
    max-width: 1024px;
}

/* ニュースボックス単体の設定 */
.news-box {
    display: block;
    text-decoration: none; /* リンクの下線を消す */
    color: #333;
    background-color: #FFFDE7; /* 淡い黄色 */
    border: 3px solid #FFF9C4; /* 枠線（少し濃いめの黄色） */
    border-radius: 4px;
    padding: 15px;
    box-sizing: border-box;
    transition: all 0.3s ease; /* 色の変化を滑らかに */
    
    /* 3列並べるための計算 (隙間分を引く) */
    width: calc((100% - 30px) / 3); 
}

/* オンマウス（ホバー）時の挙動 */
.news-box:hover {
    background-color: #FFF9C4; /* 濃いめの黄色 */
    border-color: #FBC02D;     /* 枠線も少し強調 */
    transform: translateY(-2px); /* 少し浮き上がる演出（お好みで） */
}

.news-date {
    display: block;
    font-size: 0.85rem;
    color: #777;
    margin-bottom: 5px;
}

.news-title {
    margin: 0;
    font-size: 1rem;
    font-weight: bold;
    line-height: 1.4;
}


/* col2 */
#col2 {
    width: 100%;          /* 背景は端から端まで */
    padding: 2% 10%;       /* 上下は0、左右に15%の内側余白 */
    box-sizing: border-box; /* paddingを含めて100%にするための指定 */
    margin: 50px 0;
    font-size: 16px;
    line-height: 24pt;
    font-family: "メイリオ";
    background: linear-gradient(to bottom, #F9EABD 0px, #ffffff 200px);
    background-repeat: no-repeat;
    background-color: #ffffff; /
    clear: both;
}

#col2 a {
	color: #222222;
	text-decoration : none;
	font-size: 16px;
	background-color: #ffffff;
	line-height: 24pt;
}


#col2 a:hover {
	background-color:#eeeeee;
	color:#666666;
	text-decoration : underline;
}

#col2 .support-text-box {
    background-color: rgb(242, 232, 216);
    color: #000000;
    padding: 10px;
    margin: 10px auto;
    border-radius: 4px;
    line-height: 1.6;
    text-align: left;
    font-family: "メイリオ", Meiryo, sans-serif;
    width: 90%; /* PCでは少し余裕を持たせる */
    box-sizing: border-box;
    font-size: 16px; /* 基本の大きさ */
}


/* Diversityの講義テーブル */
.lecture-table {
    width: 100%;
    max-width: 1050px;
    margin: 20px auto;
    border-collapse: collapse; /* 罫線を1本にまとめるために必須 */
    font-size: 14px;
    line-height: 1.6;
}

.lecture-table th {
    text-align: left;
    padding: 10px;
    border-bottom: 2px solid #F2E8D8; /* 見出しは少し太めに */
    background-color: #fafafa;
}

.lecture-table td {
    padding: 12px;
    border-bottom: 1px solid #F2E8D8; /* ご指定の淡い茶色 */
    vertical-align: top;
}

/* col3 */
#col3 {
    width: 100%;
    padding: 2% 10%;
    box-sizing: border-box;
    margin: 50px 0;
    font-size: 16px;
    line-height: 24pt;
    font-family: "メイリオ";
    /* 背景画像とグラデーションの定義 */
    background-image: url("images/P1_3back.png"), linear-gradient(to bottom, #F9EABD 0px, #ffffff 200px); 
    background-repeat: no-repeat;
    background-color: #ffffff; /
    background-position: center top;
    /* カンマ区切りで個別にサイズを指定 */
    /* 1つ目が画像(80%)、2つ目がグラデーション(100%) */
    background-size: 80% auto, 100% 100%; 
    clear: both;
}


#col3 a {
	font-size: 16px;
	color: #2e8b57;
	text-decoration : none;
	line-height: 24pt;
	font-weight: bold;
}


#col3 a:hover {
	font-size: 16px;
	color: #32cd32;
	text-decoration : underline;
	font-weight: bold;
}

#col3 .support-text-box {
    background-color: rgb(242, 232, 216);
    color: #000000;
    padding: 10px;
    margin: 10px auto;
    border-radius: 4px;
    line-height: 1.6;
    text-align: left;
    font-family: "メイリオ", Meiryo, sans-serif;
    width: 90%; 
    box-sizing: border-box;
    font-size: 16px; 
}


/* col4 */
#col4 {
    width: 100%;
    padding: 2% 10%;
    box-sizing: border-box;
    margin: 50px 0;
    font-size: 16px;
    line-height: 24pt;
    font-family: "メイリオ";
    /* 背景画像とグラデーションの定義 */
    background-image: url("images/P2_4back.png"), linear-gradient(to bottom, #F9EABD 0px, #ffffff 200px); 
    background-repeat: no-repeat;
    background-color: #ffffff; /
    background-position: center top;
    /* カンマ区切りで個別にサイズを指定 */
    /* 1つ目が画像(80%)、2つ目がグラデーション(100%) */
    background-size: 80% auto, 100% 100%; 
    clear: both;
}


#col4 a {
	font-size: 16px;
	color: #2e8b57;
	text-decoration : none;
	line-height: 24pt;
	font-weight: bold;
}


#col4 a:hover {
	font-size: 16px;
	color: #32cd32;
	text-decoration : underline;
	font-weight: bold;
}

#col4 .support-text-box {
    background-color: rgb(242, 232, 216);
    color: #000000;
    padding: 10px;
    margin: 10px auto;
    border-radius: 4px;
    line-height: 1.6;
    text-align: left;
    font-family: "メイリオ", Meiryo, sans-serif;
    width: 90%; 
    box-sizing: border-box;
    font-size: 16px; 
}

/* col5 */
#col5 {
    width: 100%;
    padding: 2% 10%;
    box-sizing: border-box;
    margin: 50px 0;
    font-size: 16px;
    line-height: 24pt;
    font-family: "メイリオ";
    /* 背景画像とグラデーションの定義 */
    background-image: url("images/P3_4back.png"), linear-gradient(to bottom, #F9EABD 0px, #ffffff 200px); 
    background-repeat: no-repeat;
    background-color: #ffffff; /
    background-position: center top;
    /* カンマ区切りで個別にサイズを指定 */
    /* 1つ目が画像(80%)、2つ目がグラデーション(100%) */
    background-size: 80% auto, 100% 100%; 
    clear: both;
}


#col5 a {
	font-size: 16px;
	color: #2e8b57;
	text-decoration : none;
	line-height: 24pt;
	font-weight: bold;
}


#col5 a:hover {
	font-size: 16px;
	color: #32cd32;
	text-decoration : underline;
	font-weight: bold;
}

#col5 .support-text-box {
    background-color: rgb(242, 232, 216);
    color: #000000;
    padding: 10px;
    margin: 20px auto;
    border-radius: 4px;
    line-height: 1.6;
    text-align: left;
    font-family: "メイリオ", Meiryo, sans-serif;
    width: 90%; 
    box-sizing: border-box;
    font-size: 16px; 
}

/* col6 各ニュース記事など */
#col6 {
    width: 100%;
    padding: 2% 15%;
    box-sizing: border-box;
    margin: 10px 0;
    font-size: 16px;
    line-height: 24pt;
    font-family: "メイリオ";
    background-color: #ffffff; /
    clear: both;
}


#col6 a {
	font-size: 16px;
	color: #2e8b57;
	text-decoration : none;
	line-height: 24pt;
	font-weight: bold;
	overflow-wrap: break-word; /* 単語の途中で改行させる */
	word-break: break-all;     /* 長い英単語やURLを強制改行させる */
}


#col6 a:hover {
	font-size: 16px;
	color: #32cd32;
	text-decoration : underline;
	font-weight: bold;
}

.essay-image-container {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    width: 100%;
    margin: 20px 0;
}

.essay-image-item {
    flex: 1; /* 3枚を均等な幅にする */
    text-align: center;
}

.essay-image-item img {
    width: 100%;
    height: auto;
}


/* もどるボタンを包むコンテナ（右寄せの設定） */
.back-controls-container {
    display: flex;
    align-items: center;
    justify-content: flex-end; /* 右寄せ */
    gap: 12px;                 /* ボタン同士の間隔 */
    margin: 30px 0;
    width: 100%;
    /* スマホなどで画面が極端に狭い場合、右側がはみ出さないよう調整 */
    overflow: hidden;
}

/* もどるボタン本体（1行を維持する設定） */
.custom-back-link {
    text-decoration: none !important;
    display: flex !important;
    align-items: center !important;
    gap: 5px;
    transition: opacity 0.2s;
    white-space: nowrap; 
}

.custom-back-link:hover {
    opacity: 0.7;
}

.custom-back-link:hover span {
    text-decoration: underline !important;
}

/* 画像サイズを30pxに固定 */
.custom-back-link img {
    height: 30px;
    width: auto;
    display: block;
    flex-shrink: 0; /* 画面が狭くなっても画像が潰れないように固定 */
}

/* テキストの設定 */
.custom-back-link span {
    color: #222222;
    font-size: 1rem;
    font-weight: bold;
    line-height: 1;
}


/* フッター */
#footer {
        clear: both;
        width: 100%;
	margin: 0px;
        padding : 10px;
	background: linear-gradient(to bottom, #F9EABD 0px, #ffffff 150px);
	background-repeat: no-repeat;
	background-color: #ffffff; /
	max-width: 1200px; /* PCで見ても広がりすぎないように制限 */
	margin: 0px;
}

#footer p {
	font-size: 14px;
	line-height: 24pt;
}

#footer a {
	color: #222222;
	text-decoration :  underline;
	font-size: 14px;
	line-height: 20pt;
}


#footer a:hover {
	background-color:#eeeeee;
	color:#666666;
	text-decoration : underline;
	margin: 0px;
        padding : 0px;
}

#footer table {
    clear: both;
    width: 90%;
    max-width: 1024px;
    margin: 10 auto;
    border-collapse: collapse;
    font-family: "メイリオ";
}

#footer table td {
    padding: 10px;
    font-size: 14px;
    line-height: 22px;
    vertical-align: top; 
    font-family: "メイリオ";
}


/* フッターここまで */