@charset "UTF-8";
@import url("grid.css");



img {
	max-width:100%;
	height: auto;/*高さ自動*/
}


header {
  background-color: #ffffff;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}
.inner {
  align-items: center;
  justify-content: space-between;
  display: flex;
  margin-inline: auto;
  max-width: 960px;
  padding: 7px 0;
}
.title {
  width: 600px;
  margin: 0 auto;    /* 中央寄せ */
}

.title img {
  height: auto;
  width: 100%;
  max-width: 600px;
}


p {
 color: #000000;
 font-size: 1.1rem;
 line-height: 1.8;
 margin-bottom: 1lh;
}


p span {
  font-weight: bold;
}


h1 {
    font-size: 2.0rem;
}

.heading03::before,
.heading03::after {
	content: '';
	width: 70px;
	height: 3px;
	background-color: #003aee;
}

.heading03::before {
	margin-right: 20px;
}
.heading03::after {
	margin-left: 20px;
}


h2 {
    font-size: 1.8rem;
    margin-top: 30px; /* 前の要素との間隔（余白） */
    margin-bottom: 30px;
    border-bottom: 2px solid #7794d5;
    padding-bottom: 3px;
}
.img-responsive{
  padding:0 !important;
}
.img-responsive img{
  width:100%;
  max-width:600px;
  height:auto;
  box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.4);
  border-radius: 3px; 
  text-align:center;
}

.heading03 {
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 26px;
	text-align: center;
	color: #f5f5f5;
        text-shadow: 0 0 10px #003aee,
                     0 0 10px #003aee,
                     0 0 10px #003aee,
                     0 0 10px #003aee,
                     0 0 10px #003aee;
}

.accordion-img {
  max-width: 100%;  /* 親要素に合わせる */
  height: auto;     /* 比率維持 */
  display: block;   /* 下の隙間を消す */
  margin-top: 10px; /* テキストとの余白 */
}

/* 開いた時だけ中身を見せる（基本の挙動） */
.content {
  overflow: hidden;
  transition: all 0.3s;
}


/* フッターのスタイル */
.footer {
  box-shadow: 0px -5px 10px -5px rgba(0, 0, 0, 0.2);
  background-color: #21211f; /* フッターの背景色 */
  padding: 20px;
  text-align: center; /* フォールバック */
  
  /* 中央寄せの処理 (Flexbox) */
  display: flex;
  justify-content: center; /* 水平中央 */
  align-items: center;     /* 垂直中央 */
}

/* 画像ボタンのスタイル */
.image-button {
  display: inline-block;
  transition: transform 0.2s; /* ホバー時のアニメーション */
}

/* 画像自体のスタイル */
.image-button img {
  width: 180px; /* 画像の幅 */
  height: auto;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);  
}

/* ホバー時のシャドー変化（ふわっと浮くような演出） */
.image-button:hover {
  transform: translateY(-2px); /* 少し上に浮かす */
}