.container {
  width: 100%;
  max-width: 1200px; /* または必要な最大幅 */
  margin: 0 auto; /* 中央揃え */
}


/* モバイル向け（デフォルト） */
.content {
  width: 100%;
}

/* タブレット縦向き */
@media (min-width: 768px) {
  .content {
    width: 90%;
  }
}

/* タブレット横向き・小型PC */
@media (min-width: 1024px) {
  .content {
    width: 80%;
  }
}

/* 大型画面 */
@media (min-width: 1400px) {
  .content {
    width: 70%;
  }
}



/* メニューが開いたときに表示（クラスを切り替えて制御） */
.nav-menu.active {
  display: block;
}

.divider-line {
    height: 2px;
    background: linear-gradient(to right, #dcdcd5, #e6e6e0, #dcdcd5);
    margin: 0 0 10px 0;
}



.header {
    background-color: #ffcccc;
    min-height: 120px;
    background-image: url('sophiart.files/bg_1.jpg');
    background-size: cover;
    background-position: center;
}

.sidebar {
  border-right: 1px solid #ccc;
  padding-right: 1em;
}

.section-divider {
  height: 1px;
  background-color: #ccc;  /* 控えめなグレー */
  margin: 1em 0;
}

/* PC向けなどではメニューを常に表示 */
@media (min-width: 1025px)  {
  .nav-menu {
    display: block !important;
  }
}

.main-content p {
    font-size: 1.2em;
    line-height: 1.5; /* 行間も少し広げると読みやすくなります */
}

.main-content {
  width: 100%;
  padding: 20px; /* 適宜調整可能 */
  background-color: #fff;
  box-sizing: border-box;
}

.full-width-img {
  width: 100%;
  height: auto;
  display: block;
  max-width: 100%;
}


body {
  background-color: #e6f4ea; /* 外側の薄緑色 */
  margin: 0;
  padding: 0;
font-family: 'Zen Kaku Gothic New', 'Noto Sans JP', sans-serif;


}

.container {
  background-color: #e6f4ea; /* 薄い緑色（やさしい雰囲気） */
  border: 2px solid #c0d6c3; /* ふち（少し濃いめの緑） */
  border-radius: 15px; /* 角を少し丸く */
  padding: 30px; /* 内側の余白 */
  margin: 40px auto; /* 外側の余白＆中央寄せ */
  max-width: 1000px; /* 最大幅（デスクトップで読みやすい） */
  box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.1); /* 軽い影 */
}

.tap-hint {
  text-align: right;
  font-size: 0.85em;
  color: #6ba378; /* やさしい緑色 */
  margin-top: 0.5em;
  opacity: 0.8; /* ほんの少し薄くして控えめに */
}



a {
    color: inherit;         /* リンク文字の色を通常の文字と同じにする */
    text-decoration: none;  /* アンダーラインもなくす */
}
