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




/*--====== パンくずリスト ======--*/
/* パンくず全体 */
#pan_box {
  text-align: right; /* 全体を右寄せ */
	background: #01c0ef;
}

.topic-path {
  display: flex;
  gap: 10px;
  list-style: none;
  padding: 0;
  margin: 0;
  position: relative;
  top: 15px;
  left: 2.2%;
}

.topic-path li {
  font-size: 60%;
  letter-spacing: 2px;
  font-weight: bold;
}

.topic-path li a,
.topic-path li.visited {
  display: inline-block;
  padding: 5px 10px;
  border-radius: 15px;
  font-size: 12px;
  text-decoration: none;
  border: 1px solid #ccc;
  background: #f9f9f9;
  transition: all 0.3s ease;
}

/* 通常のリンクボタン */
.topic-path li a {
  color: #333;
}

.topic-path li a:hover {
  background: #ffe680;
  border-color: #f0c040;
}

/* visited風デザイン（固定） */
.topic-path li.visited {
  background: #ffe680;
  color: #555;
  border-color: #f0c040;
}

.topic-path li:not(:last-child)::after {
  content: '➔'; /* 矢印 */
  color: gold;
  margin: 0 0px 0px 8px;
  font-size: 15px;
}
/*--====== ここまでパンくずリスト ======--*/


.mainvisual {
  width: 100%;
  height: 350px;
  background: #01c0ef;
  display: flex;
  justify-content: center;  /* 中央に配置 */
  align-items: center;      /* 縦方向中央 */
  gap: 50px;                /* 要素間の余白を広めに調整 */
  padding: 0 40px;          /* 左右の余白を少し確保 */
  box-sizing: border-box;
}

.mainvisual .photo_01 img,
.mainvisual .photo_02 img {
  max-width: 350px;  /* 画像は固定幅 or 最大幅で統一 */
  width: 100%;
  height: auto;
  display: block;
}

h1.main_title {
  color: #FFF;
  text-shadow: 3px 3px #0981A8;
  font-size: 3rem;
  letter-spacing: 0.3em;
  margin: 0;
  white-space: nowrap;  /* 改行を防ぐ */
}

/* スマホ対応 */
@media (max-width: 600px) {
  .mainvisual {
    flex-direction: column;
    gap: 20px;
    height: auto;
    padding: 20px;
  }

  h1.main_title {
    font-size: 2rem;
    letter-spacing: 0.2em;
  }

  .mainvisual .photo_01 img,
  .mainvisual .photo_02 img {
    max-width: 120px;
  }
}


.content {
	background: #01c0ef;
    display: flex;
    justify-content: center; /* 横方向センター */
	padding-bottom: 180px;
}

.content_box {
  width: 80%;
  height: 500px;
  max-width: 1200px; /* PCで広がりすぎないように制限 */
  margin: 0 auto; /* 中央寄せ */
  background: #FFF;
  border-radius: 30px;
  position: relative;
  top: 20px;
}

/* スマホやタブレットで自動調整 */
@media screen and (max-width: 768px) {
  .content_box {
    width: 95%;
  }
}



p.text{
	text-align: center;
	letter-spacing: 2px;
	font-size: 180%;
	color: #36C;
	padding-top: 230px;
}