.btn-back:hover img{
  content:url(img/modoru2.png);
}
.floating-button{
    margin-top: 30px;
  text-align: center;
}
body {
    font-size: 13px;
  margin: 0;
  font-family: "MS Gothic", sans-serif;
  background: #ffffff;
  color: #000;
  background-image: url("img/stripe.png");
  background-repeat: repeat;     /* ← タイル状に並べる */
  background-position: top left; /* ← 左上から開始 */
}

.container {

  max-width: 900px;
  margin: 0 auto;
  padding: 10px 0;
  text-align: center;
}
.top-img{
    text-align: center;

}
/* タイトルは単独表示 */
.top-img{
  display:block;
  margin:0 auto 10px auto;  /* 下に余白 */

  
}

/* テキスト画像エリア */
.tex-area{
 padding-top: 20px;

  display:flex;
  flex-direction:column;
   /* 画像の縦間隔 */
}

/* 画像共通 */
.tex-area img{
  width:auto;       /* サイズ変更しない */
  max-width:40%;    /* 横に寄せるため */
}

/* 奇数（1,3,5）左寄せ */

.tex-area img:nth-child(odd){
  align-self:flex-start;
  margin-left: 130px;
}

/* 偶数（2,4）右寄せ */
.tex-area img:nth-child(even){
  align-self:flex-end;
  margin-right: 130px;
}
h1{

    padding-top: 10px;
}
.tex{
    border: 3px double;
    margin-top: 30px;
    width: 80%;

}
.char-link{
   margin: 40px;
   
}

/* 2列レイアウト */
.icon-grid{
  display:grid;
  grid-template-columns:repeat(2, 1fr); /* 2列 */
  gap:30px;
  max-width:900px;
  margin:40px auto;
}

/* 既存の icon-box はそのまま使用 */
.icon-box{
  display:flex;
  align-items:center;
  border:3px double #000;

  background:#fff;
}

.icon-img{

  object-fit:cover;
}

.icon-text{
  border-left:3px double #000;
  padding-left: 10px;
  line-height:1.6;

  text-align:left;   /* ← 追加 */
}
.icon-box-special{
  display:flex;
  align-items:center;
}

.icon-box-special .icon-text{
  flex:1;

    border-right:3px double #000;
}

.icon-box-special .icon-img-right{

  object-fit:cover;
}
.char-link a{
  margin-right:30px;
  margin-left: 50px;
}