@charset "UTF-8";
/* CSS Document */

/* =========================================
   #aozoranijimaru セクションのスタイル
========================================= */
#aozoranijimaru {
  max-width: 900px;
  margin: 0 auto;
  font-family: "Hiragino Kaku Gothic ProN", "Meiryo", sans-serif;
  color: #333;
  line-height: 1.6;
}

/* 上部：自己紹介エリア */
#aozoranijimaru .aozora-profile-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 30px;
  margin-bottom: 40px;
}

#aozoranijimaru .aozora-intro-box {
  background-color: #f4eee5; /* 背景のベージュ色 */
  border-radius: 20px;
  padding: 40px 30px;
  flex: 1;
  text-align: center;
}

#aozoranijimaru .aozora-title-area {
  margin-bottom: 25px;
}

/* タイトルの装飾（画像がない場合の代替CSS） */
#aozoranijimaru .aozora-logo-text {
  font-size: 32px;
  font-weight: bold;
  color: #0168B7;
  margin: 0 0 10px 0;
  letter-spacing: 2px;
  /* 画像の縁取りっぽさをテキストシャドウで再現 */
  text-shadow: 
    -2px -2px 0 #fff, 2px -2px 0 #fff, -2px 2px 0 #fff, 2px 2px 0 #fff,
    3px 3px 0 #0168B7;
}

#aozoranijimaru .aozora-badge {
  display: inline-block;
  background-color: #0168B7;
  color: #fff;
  font-size: 14px;
  font-weight: bold;
  padding: 4px 20px;
  border-radius: 20px;
  letter-spacing: 1px;
}

#aozoranijimaru .aozora-intro-text {
  text-align: left;
  font-size: 15px;
  margin: 0;
  line-height: 1.8;
}

#aozoranijimaru .aozora-image-area {
  width: 35%;
  text-align: center;
}

#aozoranijimaru .aozora-main-img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
}

#aozoranijimaru .aozora-copyright {
  font-size: 12px;
  color: #666;
  margin-top: 10px;
}

/* 下部：プロフィール詳細エリア */
#aozoranijimaru .aozora-detail-list {
  margin: 0;
  padding: 0;
}

#aozoranijimaru .aozora-list-row {
  display: flex;
  align-items: stretch;
}

#aozoranijimaru .aozora-list-row dt {
  width: 25%;
  min-width: 140px;
  color: #0168B7;
  font-weight: bold;
  padding: 20px 0;
  border-bottom: 2px solid #0168B7; /* 左側の赤い下線 */
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 0;
}

#aozoranijimaru .aozora-icon {
  width: 18px;
  height: 18px;
  margin-top: 3px;
  flex-shrink: 0;
}

#aozoranijimaru .aozora-list-row dd {
  width: 75%;
  padding: 20px 0 20px 20px;
  border-bottom: 1px solid #dcdcdc; /* 右側のグレーの下線 */
  margin: 0;
  font-weight: 600!important;
}

/* =========================================
   レスポンシブ対応 (スマホ用)
========================================= */
@media screen and (max-width: 768px) {
  #aozoranijimaru {
	  width: 90%;
	  height: auto;
  }
	
  #aozoranijimaru .aozora-profile-top {
    flex-direction: column-reverse; /* スマホでは画像を上にする場合 */
    align-items: center;
  }

  #aozoranijimaru .aozora-intro-box {
    width: 100%;
    padding: 30px 20px;
    box-sizing: border-box;
  }

  #aozoranijimaru .aozora-image-area {
    width: 80%;
    max-width: 300px;
    margin-bottom: 20px;
  }

  #aozoranijimaru .aozora-list-row dt {
    width: 40%; /* スマホ時は少しラベル幅を広げる */
    padding: 15px 0;
  }

  #aozoranijimaru .aozora-list-row dd {
    width: 60%;
    padding: 15px 0 15px 15px;
    font-size: 14px;
  }
}

.mb1{
	display: block;
	margin-bottom: 1rem!important;
}

.mb2{
	display: block;
	margin-bottom: 2rem!important;
}