/* ページ全体の設定 */
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: 16px;
	line-height: 22pt;
	font-weight: bold;
}

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

#header table{
        clear: both;
	width: 100%;
	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: 25px;
    width: auto;
    vertical-align: middle;
}

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


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

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


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

#col1 table{
        font-size: 12px;
        line-height: 24pt;
        font-family: "メイリオ";
        clear: both;
	width: 98%;
	max-width: 640px;
	margin: 0 auto;  
	border-collapse: collapse;
}

#col1 table td {
    padding: 5px;        /* ここでセルの内側に余白を作ります */
    font-size: 10px;
    line-height: 14pt;
    vertical-align: top;  /* 文字の開始位置を上に揃える（お好みで） */
}

/* 一重の囲み（赤・青・黃） */
.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;
}


/* col2 */
#col2 {
    width: 100%;          /* 背景は端から端まで */
    padding: 2% 5%;       /* 上下は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: 14px;
	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: 5px;
    margin: 10px auto;
    border-radius: 4px;
    line-height: 1.6;
    text-align: left;
    font-family: "メイリオ", Meiryo, sans-serif;
    width: 95%;
    box-sizing: border-box;
    font-size: 16px;
}

/* もどるボタンのコンテナ（右寄せ設定） */
.back-controls-container {
    display: flex;
    align-items: center;
    justify-content: flex-end; /* 右寄せ */
    gap: 15px;
    margin: 20px 0;
}

/* もどるボタン本体 */
.custom-back-link {
    text-decoration: none !important;
    display: flex !important;
    align-items: center !important; /* 画像とテキストを垂直中央揃え */
    gap: 8px; /* 画像と文字の間隔 */
    transition: opacity 0.2s;
}

/* ホバー時の挙動 */
.custom-back-link:hover {
    opacity: 0.7;
}

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

/* アイコン画像の設定 */
.custom-back-link img {
    height: 30px;
    width: auto;
    display: block;
}

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

/* 区切り線 (|) */
.back-controls-divider {
    color: #ccc;
}

/* --- スマホ用微調整 (asafas_deib639.css に追加する場合) --- */
@media (max-width: 639px) {
    .back-controls-container {
        justify-content: center; /* スマホでは中央寄せの方が見栄えが良い場合があります */
        gap: 10px;
        flex-wrap: wrap; /* 画面が狭すぎたら折り返す */
    }
    .custom-back-link span {
        font-size: 0.9rem; /* スマホでは文字を少し小さく */
    }
}


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

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

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

/* col3 */
#col3 {
    width: 100%;
    padding: 2% 10%;
    box-sizing: border-box;
    text-align: left;
    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: 15px;
	color: #2e8b57;
	text-decoration : none;
	line-height: 24pt;
	font-weight: bold;
}


#col4 a:hover {
	font-size: 15px;
	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; 
}

/* ニュース全体を包むコンテナ */
.news-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 15px; /* ボックス同士の間隔 */
    justify-content: center;
    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: 8px;
    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.8rem;
    color: #777;
    margin-bottom: 5px;
}

.news-title {
    margin: 0;
    font-size: 0.8px;
    line-height: 1.4;
}

/* 639px以下のメディアクエリ内に記述 */
@media (max-width: 639px) {
    .news-box {
        /* 2列並べるための計算 */
        width: calc((100% - 15px) / 2); 
        padding: 12px; /* スマホでは少し余白をタイトに */
    }
    
    .news-title {
        font-size: 0.8rem; /* 文字を少し小さくして収まりを良くする */
    }
}

/* 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: 15px;
	color: #2e8b57;
	text-decoration : none;
	line-height: 24pt;
	font-weight: bold;
}


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


/* col6 各ニュース記事など */
#col6 {
    width: 100%;
    padding: 2% 10%;
    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;
    flex-direction: column; /* 縦に並べる */
    gap: 30px; /* 画像ごとの間隔 */
    width: 100%;
    margin: 20px 0;
}

.essay-image-item {
    width: 100%;
    text-align: center;
}

.essay-image-item img {
    width: 100%; /* スマホ画面いっぱいに表示 */
    height: auto;
}

/* コンテンツ用ここまで */


/* フッター */
#footer {
        clear: both;
        width: 100%;
	margin: 0px;
        padding : 0px;
	background: linear-gradient(to bottom, #F9EABD 0px, #ffffff 150px);
	background-repeat: no-repeat;
	background-color: #ffffff; /
	margin: 0px;
}

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


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

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

#footer table td {
    padding: 5px;
    font-size: 8px;
    line-height: 12px;
    vertical-align: bottom; 
    font-family: "メイリオ";
}

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