@charset "utf-8";

/*-------------------------------------
css初期化
--------------------------------------*/
* {
	margin: 0;
	padding: 0;
}

body {
    margin: 0 !important;
    padding: 0 !important;
    background-color: #fef9e7; /* 下の薄い黄色に統一しました */
    font-family: "YuMincho", "Yu Mincho", "Hiragino Mincho ProN", "MS PMincho", serif;
    line-height: 1.8;
    letter-spacing: 0.05em;
    font-size: 90%;
    color: #333333;
}

html {
	overflow-y: scroll;
}

a {
	text-decoration: none;
	outline: none;
	color: #333333;
}

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

a:hover img{
	opacity: 0.80;
}

/*-------------------------------------
Container
--------------------------------------*/
div#Container {
	width: 945px;
	padding: 0px 0;
	margin: 0 auto;
	background: #fff;
}

/*-------------------------------------
h1　大見出し（タイトル）
--------------------------------------*/
h1 {
	padding: 10px;
	text-align: center;
	font-size: 200%;
	font-weight: bold;
	color: #504946;
}

/*-------------------------------------
Contents
--------------------------------------*/
div#Contents {
	width: 945px;
	margin: 0 auto;
	padding: 10px 0;
	overflow: hidden;
}

/*-------------------------------------
Nav　グローバルナビゲーション
--------------------------------------*/
nav {
	width: 945px;
	margin: 0 aut;
}

nav ul li {
	list-style: none;
	width: 189px;
	font-size: 1.2em;
	margin: 0 0 20px 0;
	float: left;
}

/*通常時時*/
nav ul li a {
	display: block;
	padding: 15px;
	background: #c2b280;
	text-align: center;
	text-decoration: none;
	color: #fff;
	overflow: hidden;
}

/*マウスをリンクの上に置いた時*/
nav ul li a:hover {
	background: #9e503b;
	text-decoration: none;
	color: #e0f2f1;
}

/*リンクが有効になった時*/
nav ul li.active a {
	background: #6b705c;;
	text-decoration: none;
	color: #b2ebf2;
}

/*-------------------------------------
Main
--------------------------------------*/
div#Main {
	width: 700px;
	margin: 0 auto;
}

/*-------------------------------------
Main_h2　小見出し
--------------------------------------*/
div#Main h2 {
	font-size: 105%;
	font-weight: bold;
	color: #504946;
	padding-bottom: 5px;
}

/*-------------------------------------
Main_TopImg　トップページの画像
--------------------------------------*/
div#Main div#TopImg {
	margin: 5px auto 0 auto;
	text-align: center;
}

/*-------------------------------------
Main_PortImg　課題ページの画像
--------------------------------------*/
div#Main div#PortImg {
	margin: 5px auto 0 auto;
	text-align: center;
}

/*-------------------------------------
Main_p　学校生活での感想 / 課題の感想
--------------------------------------*/
div#Main p {
	color: #504946;
	margin-top: 10px;
}

/*-------------------------------------
Main_table　課題ページの表
--------------------------------------*/
div#Main table {
	width: 80%;
	margin: 10px auto 20px auto;
	border-collapse: collapse;
	border: 0 none;
}

div#Main table tr th {
	width: 25%;
	padding: 5px 10px;
	background: #8b9474;
	border: 1px solid #504946;
	text-align: left;
	vertical-align: top;
	letter-spacing: 0.5em;
	color: #fff;
}

div#Main table tr td {
	width: 75%;
	padding: 5px 10px;
	border: 1px solid #504946;
	text-align: left;
	vertical-align: top;
}

div#Main table tr td ul {
	padding: 0 0 0 8px;
	margin: 0 0 0 8px;
}

div#Main table tr td ol {
	padding: 0 0 0 8px;
	margin: 0 0 0 8px;
}

/*-------------------------------------
pagetop　ページトップへ移動
--------------------------------------*/
p.pagetop{
	text-align: right;
}

/*-------------------------------------
address　コピーライトマーク
--------------------------------------*/
address {
	clear: both;
	text-align: center;
	color: #504946;
}
/* ボタン全体の基本色（渋い抹茶） */
nav ul li a {
    background-color: #c2b280 !important;
    color: #ffffff !important;
}

/* マウスを乗せた時（赤銅色 × 水色文字） */
nav ul li a:hover {
    background-color: #9e503b !important;
    color: #b2ebf2 !important;
}

/* 今いるページ（抹茶 × 水色文字！） */
nav ul li.active a {
    background-color: #6b705c !important;
    color: #b2ebf2 !important;
}
header {
    background-color: #8b9474; /* 渋い抹茶色 */
    padding: 30px 5% 30px 5%;  /* 上 30px、横 5%、下 30px の余白 */
    text-align: left;          /* 中身を左寄せにする */
}

header h1 {
    margin: 30px;                 /* 余計な隙間を消す */
}

header h1 img {
    display: block;            /* ロゴを独立させる */
    margin-bottom: 0px;       /* ロゴとサブタイトルの間の隙間 */
}

header .sub_title {
    margin: 0;
    color: #ffffff;
    font-size: 0.9rem; 
	font-weight: normal;  
	letter-spacing: 0.1em;
	margin-top: 15px;
}

#Main img {
    width: 100%;       /* 親要素の幅いっぱいに広げる */
    max-width: 700px;  /* でも700px以上には大きくしない */
    display: block;
    margin: 20px auto; /* 左右中央に寄せる */
}
.kadai-table {
    width: 100%;
    max-width: 700px;
    margin: 40px auto;
    table-layout: fixed;
    border-collapse: collapse;
}

/* 項目名（左側の緑色の部分）：中央揃え */
.kadai-table th {
    background-color: #8b9474; /* 抹茶色 */
    color: #ffffff;            /* 白抜き文字 */
    width: 30%;
    padding: 15px;
    text-align: center;        /* 横方向を真ん中に */
    vertical-align: middle;    /* 縦方向を真ん中に */
    border: 1px solid #dcdcdc;
}

/* 説明文（右側の部分）：左揃え */
.kadai-table td {
    background-color: #fafaf0; /* 薄いベージュ */
    padding: 15px;
    text-align: left;          /* 文章は左から読みやすく */
    vertical-align: middle;
    border: 1px solid #dcdcdc;
    word-break: break-all;     /* 長い英単語などで表が崩れるのを防ぐ */
}
.kadai01-logo-area { 
    border-bottom: 1px solid #333333; /* 黒に近いグレーの細い線 */
    padding-bottom: 30px;            /* 線と画像・文章の間の余白 */
    margin-bottom: 50px;             /* 線の下の余白 */
    max-width: 700px;                /* 幅を合わせる */
    margin-left: auto;
    margin-right: auto;
}
div#Main table.kadai-table tr th {
    text-align: center !important;
    vertical-align: middle !important;
    background-color: #8b9474 !important;
    color: #ffffff !important;
}

/* ついでに右側の「説明文」も念押し */
div#Main table.kadai-table tr td {
    text-align: left !important;
    vertical-align: middle !important;
}
div#Main img {
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2) !important;
    margin-bottom: 20px !important;
    display: block;
}


/* ロゴ画像の下に線を引く */
#logo-border {
    border-bottom: 1.5px solid #000000 !important;
    padding-bottom: 0px !important;
    margin-bottom: 0px !important;
    display: block !important;
}

#Main h2 {
    font-size: 1.4rem;        /* 少し大きくして存在感を出す */
    margin-bottom: 5px;      /* 下の画像との隙間をギリギリまで詰める */
    text-align: center;
    color: #333;             /* 濃いめの色で引き締める */
    letter-spacing: 0.1em;   
}

.img-caption {
    margin-top: -15px !important; /* 画像にググッと引き寄せる */
    margin-bottom: 60px !important; /* 次の画像との間隔はしっかり空ける */
    text-align: center;
    font-size: 0.95rem;           /* 本文より少しだけ小さく */
    color: #444;                  /* 落ち着いたグレー */
}
div#Main h2 {
    font-size: 1.6rem !important;    /* 105%から大幅アップ！ */
    text-align: center !important;   /* これで真ん中に来ます */
    margin-bottom: 5px !important;  /* 下の画像との隙間を詰める */
    color: #504946 !important;       /* 今の色をキープ */
    margin-top: 40px !important;     /* 上のナビとの間は少し空ける */
}


/* 画像の下のコメントを真ん中にし、画像に近づける */
div#Main p {
    text-align: center !important;
    margin-top: -10px !important;  /* マイナスの数字で画像に近づく！ */
    margin-bottom: 40px !important; /* 次の画像との間は空ける */
    font-size: 0.9rem !important;
}
div#Main h2 {
    /* 1. フォントを「和」の風格漂う明朝体に固定 */
    font-family: "YuMincho", "Yu Mincho", "Hiragino Mincho ProN", "MS PMincho", serif !important;
    
    /* 2. 文字色：ロゴや抹茶色と相性の良い「濃い茶褐色（シャクドウ色に近い色）」 */
    color: #504946 !important; 
    
    /* 3. その他の微調整 */
    font-weight: bold !important;
    font-size: 1.8rem !important;    /* さっきより少しだけ大きく */
    letter-spacing: 0.15em !important; /* 文字の間隔を広げて「ゆとり」を出す */
    border: none !important;          /* もし余計な線が出ていたら消す */
    background: none !important;      /* もし背景色が出ていたら消す */
}



/* 画像の下のコメントを真ん中にし、画像に近づける */
div#Main p {
    text-align: center !important;
    margin-top: -10px !important;  /* マイナスの数字で画像に近づく！ */
    margin-bottom: 40px !important; /* 次の画像との間は空ける */
    font-size: 0.9rem !important;
}

div#Main h2 {
    color: #192f60 !important; /* ←ここで色を指定（紺色案） */
    font-family: "YuMincho", "Yu Mincho", "Hiragino Mincho ProN", serif !important;
    font-size: 1.8rem !important;
    text-align: center !important;
    letter-spacing: 0.15em !important;
    font-weight: bold !important;
    margin-bottom: 5px !important;
}

/* 【コメント】落ち着いたグレーで読みやすく */
div#Main p {
    color: #555555 !important; /* タイトルより少し柔らかい色 */
    text-align: center !important;
    margin-top: -10px !important;
    font-size: 0.95rem !important;
    font-weight: 500 !important;
}

h2.subtitle {
    font-family: "YuMincho", "Yu Mincho", "Hiragino Mincho ProN", "MS PMincho", serif !important;
    font-size: 1.3rem !important;      /* 今のゴシックより少し存在感を出します */
    letter-spacing: 0.18em !important;  /* 文字の間隔を広げて「品」を出します */
    color: #ffffff !important;         /* 背景の緑に映える白 */
    font-weight: normal !important;    /* 明朝体は太すぎない方が綺麗です */
    margin-top: 5px !important;        /* Loop of Lifeとの距離感 */
    text-align: center;
}
/* 1. タイトル「Loop of Life」を下に下げる */
#Header h1 {
    margin-top: 80px !important; 
    margin-left: 40px !important; 
}

/* 2. サブテキスト「34年のキャリア〜」を大きく、品よく */
h2.sub_title {
    font-family: "YuMincho", "Yu Mincho", "Hiragino Mincho ProN", "MS PMincho", serif !important;
    
    /* ↓ここがポイント！ 基準が小さくても、これなら強制的に大きくなります */
    font-size: 1.2rem !important;  
    
    /* ↓渋さを消して「粋」にする、魔法の余白 */
    letter-spacing: 0.15em !important; 
    
    font-weight: normal !important; /* 明朝体は細い方が綺麗です */
    color: #ffffff !important;
    text-align: left;
    margin-left: 40px !important;
}
header {
    /* 1. 全体を上から 80px 押し下げます */
    padding-top: 80px !important; 
    
    /* 2. 全体を左から 40px 離します */
    padding-left: 40px !important; 
    
    /* 3. 中身を左揃えに固定 */
    text-align: left !important; 
}

/* 4. タイトル（Loop of Life）の余計な隙間をリセット */
header h1 {
    margin: 0 0 10px 0 !important; /* 下にだけ少し隙間を作る */
    font-size: 2.2rem !important;
}

/* 5. サブテキストの余計な隙間をリセット */
header h2.sub_title {
    margin: 0 !important; 
    font-family: "YuMincho", "Yu Mincho", "Hiragino Mincho ProN", serif !important;
    font-size: 1.1rem !important;
    letter-spacing: 0.18em !important;
    font-weight: normal !important;
}

#Nav ul li {
    margin: 0 15px !important; /* 左右の余白を増やして、ボタンを離します */
}

/* 2. ボタンの中の文字を大きく、読みやすく、品よく */
#Nav ul li a {
    font-family: "YuMincho", "Yu Mincho", "Hiragino Mincho ProN", serif !important;
    font-size: 1.1rem !important;      /* 文字を一回り大きくします */
    letter-spacing: 0.12em !important;  /* 文字の間隔を少し広げて「ゆとり」を出します */
    padding: 10px 15px !important;    /* ボタン内の余白を広げて、クリックしやすくします */
    font-weight: bold;                 /* 少し太くして存在感を出します */
    display: inline-block;
    transition: 0.3s;                 /* マウスを乗せた時の動きを滑らかに */
}

#Nav ul li a:hover {
    opacity: 0.8;
    text-decoration: underline; 
}