@charset "utf-8";

@import url(common.css);

/* 全体の背景色とフォント（明朝体）の設定 */
body {
  background-color: #f5f7f8; /* ほんのり温かみのある背景色 */
  color: #333333;            /* 目に優しい文字色 */
  line-height: 1.7;          /* 読みやすい行間 */
  margin: 0;
  padding: 0;

  /* ★ここを body の中に入れます */
  font-family: "Times New Roman", "Yu Mincho", "YuMincho", "Hiragino Mincho ProN", "MS PMincho", serif;
}
/* ロゴ（ヘッダー）の中央寄せ */
#top {
  text-align: center;
  padding: 20px 0;
}

#top img {
  display: inline-block;
}

/* ナビゲーションの横並び・中央寄せ */
nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  justify-content: center;
  gap: 20px;
}

nav a {
  text-decoration: none;
  color: #333;
  font-weight: bold;
}

/* スライドショー全体のサイズ調整 */
.slideshow-container {
  max-width: 800px;
  position: relative;
  margin: 20px auto;
}

/* 初期状態では画像を非表示にする */
.mySlides {
  display: none;
}

/* 画像のレスポンシブ対応 */
.mySlides img {
  width: 100%;
  height: auto;
  display: block;
}

/* 左右の矢印ボタンのスタイル */
.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: auto;
  padding: 16px;
  color: white;
  font-weight: bold;
  font-size: 24px; /* 矢印を見えやすく少し大きくしました */
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
  background-color: rgba(0,0,0,0.3); /* 薄い黒背景 */
  text-decoration: none;
}

/* 右のボタンは右端に配置 */
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

/* ホバー（マウスを乗せたとき）の色の変化 */
.prev:hover, .next:hover {
  background-color: rgba(0,0,0,0.8);
}

/* ドットボタンのスタイル */
.dot {
  cursor: pointer;
  height: 15px;
  width: 15px;
  margin: 0 5px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

/* 現在表示されているドット、またはホバー時の色 */
.active, .dot:hover {
  background-color: #717171;
}

/* ふわっと切り替わるアニメーション効果 */
.fade {
  animation-name: fade;
  animation-duration: 1.5s;
}

@keyframes fade {
  from { opacity: .4 } 
  to { opacity: 1 }
}

/* 画像を切らずに、縦長画像の高さを抑える */
.mySlides img {
  max-width: 100%;
  max-height: 600px; /* ★縦長画像がこれ以上大きくならないように制限します */
  width: auto;
  height: auto;
  margin: 0 auto; /* 中央寄せ */
  display: block;
}

/* 最新情報（section）をカード風にする */
section {
  background-color: #ffffff; /* カードの背景を真っ白にする */
  max-width: 800px;          /* スライドショーと同じ横幅にする */
  margin: 30px auto;         /* 上下に余白を作り、中央寄せにする */
  padding: 30px;             /* カードの内側にゆったりとした余白を作る */
  border-radius: 12px;       /* 角を丸くして優しい印象にする */
  
  /* 下方向へ向かって、ほんのり柔らかい影をつけて浮き立たせる */
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05); 
}

/* 最新情報のタイトル（h2）のデザイン */
section h2 {
  font-size: 20px;
  margin-top: 0;
  margin-bottom: 20px;
  border-bottom: 2px solid #f4f0ea; /* タイトルの下に薄い区切り線を入れる */
  padding-bottom: 10px;
  color: #555555;
}

/* リスト（ul）の調整 */
section ul {
  list-style: none; /* 箇条書きのドットを消す */
  padding: 0;
  margin: 0;
}

/* リストの各項目（li）の間隔と区切り線 */
section li {
  padding: 12px 0;
  border-bottom: 1px dashed #eee; /* 項目ごとに薄い点線を入れる */
  display: flex;                 /* 日付と本文を横並びにする */
  gap: 15px;                     /* 日付と本文の間の隙間 */
}

/* 最後の項目の下線だけ消す */
section li:last-child {
  border-bottom: none;
}

/* 日付（time）を少し薄い色にしてメリハリをつける */
section time {
  color: #888888;
  font-size: 14px;
  min-width: 110px; /* 日付の幅を揃えてきれいに縦に並べる */
}

/* プロフィールの見出し（h1）を中央に寄せる */
article h1 {
  text-align: center;
  margin-top: 40px;     /* 上に少し余裕を持たせる余白 */
  margin-bottom: 20px;  /* カードとの間の余白 */
  color: #333333;       /* 文字の色（お好みで調整） */
}

/* プロフィール全体（article）の横幅をスライドショーや最新情報と揃える */
article {
  max-width: 800px;
  margin: 0 auto;    /* 画面の真ん中に寄せる */
  padding: 0 20px;   /* スマホで見ても端がくっつかないようにするお守り */
}

/* スキルカードの中の文字の行間をもう少し広げて、ゆったり読ませる */
.profile_text p {
  margin: 12px 0;    /* 上下のすき間を少しだけ広げました */
}

/* フッター全体の設定 */
footer {
  text-align: center;
  padding: 40px 0 60px 0; /* 上下にゆったりとした余白を作る */
  margin-top: 50px;       /* 上のカードとの間に隙間を作る */
  border-top: 1px solid #e8e2da; /* ほんのり薄い区切り線を入れる */
}

/* コピーライトの文字デザイン */
#copyright {
  font-size: 13px;        /* 文字を少し小さくして上品にする */
  color: #999999;         /* 存在感を抑えた薄いグレーにする */
  letter-spacing: 0.05em; /* 文字の間隔をほんの少し広げて洗練された印象に */
}

/* お問合せ案内の枠 */
.contact-guide {
  text-align: center;
  margin: 50px 0;
  padding: 20px;
}

.contact-guide p {
  font-size: 15px;
  color: #666666;
  margin-bottom: 20px;
}

footer {
  background-color: #ffffff; /* フッターもヘッダーとお揃いの白背景にして引き締める */
  padding: 60px 0 40px 0;    /* ゆったりとした広めの余白 */
  margin-top: 80px;          /* 上のコンテンツとの間をしっかり空ける */
  border-top: 1px solid #e8e2da; /* 上部の区切り線 */
}

.footer-container {
  max-width: 800px;
  margin: 0 auto;
  text-align: center;
}

/* トップへ戻るボタン */
.to-top {
  margin-bottom: 30px;
}

.to-top a {
  font-size: 13px;
  color: #888888;
  text-decoration: none;
  letter-spacing: 0.1em;
  font-weight: bold;
  transition: color 0.3s ease;
}

.to-top a:hover {
  color: #5e5043; /* マウスを乗せるとブラウンに */
}

/* フッターメニュー（リンク） */
.footer-nav {
  list-style: none;
  padding: 0;
  margin: 0 0 30px 0; /* ★エラーの原因だった「opacity」を削除して正しく直しました */
  display: flex;
  justify-content: center;
  gap: 30px;
}

.footer-nav a {
  text-decoration: none;
  color: #666666;
  font-size: 14px;
  transition: color 0.3s ease;
}

.footer-nav a:hover {
  color: #5e5043;
  text-decoration: underline; /* マウスを乗せると下線を表示 */
}

/* コピーライト（文字を少し綺麗に修正） */
#copyright {
  font-size: 12px;
  color: #aaaaaa;
  margin: 0;
  letter-spacing: 0.08em;
}