body, div, h1, h2, h3, p, ul, ol, li, form, fieldset, input, textarea {
    margin: 0;
    padding: 0;
    width: 100%;
    overflow-x: hidden;
    font-family: 'Noto Sans JP', sans-serif; /* 全体にフォントを適用 */
}

/* リンクの基本スタイル */
a {
    text-decoration: none;
    color: #2EA135;
}

/* ヘッダー要素のスタイリング */
h1, h2, h3, h4, h5 {
    font-weight: normal;
    margin: 0;
    padding: 0;
}

h1 { font-size: 3em; }
h2 { 
    font-size: 2em; 
    font-weight: 900 !important; /* 太くしてインパクトを出す */
}
.main-title { font-weight: 900 !important; } 
h3 { font-size: 1.3em; } 
h4 { font-size: 16px; }
.title { font-weight: 800; }
h5 { 
	font-size: 0.8em; 
	margin-top: 10px
}
p {
    font-weight: 300 !important;
}

#pagepiling {
    max-width: 100%;
    margin: 0 auto;
    overflow-x: hidden;
    text-align: center;
    margin: 0 auto; /* 中央揃え */
    background-color: #ffffff; /* 背景色を指定 */
}

.section {
    padding: 20px 0; /* セクション間のスペースを調整 */
    background-color: #ffffff; /* セクションの背景色を統一 */
    width: 90%;
	margin: auto;
}

#section1 { background-color: #fffdc4; }
#section2 { background-color: #efe4ff; }
#section3 { background-color: #effdef; }
#section4 { background-color: #FFF; }

.img-obake-walk {
	width: 35%;
    margin: 10px auto;
}

.intro1, .intro2, .intro3, .intro4 {
    margin: 20px auto; /* イントロ部分にマージンを追加 */
	width: 100%;
}

.img-obake-walk img{
    width: 120px !important; /* 画像を固定サイズに設定 */
    height: 120px !important;
    display: block !important;
	margin: 0 auto !important;
}
/*.img-obake-walk img {
	width: 120px;
	height: 120px;
}*/
#image-grid-wrapper {
    width: 100%; /* 幅を100%に設定 */
    max-width: 400px; /* 最大幅を設定 */
    margin: 0 auto; /* 中央揃え */
    padding: 0 15px; /* 左右にパディングを追加 */
    box-sizing: border-box; /* パディングを幅に含める */
}

.image-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px; /* 画像間のスペースを調整 */
}

.image-grid img {
    width: calc(50% - 5px); /* 2列レイアウトを維持 */
    max-width: 150px; 
    height: 150px; 
    object-fit: contain;
}
.intro4 {
	width: 380px;
    margin: 0 auto;
}
#links-box {
    width: 100%;
    max-width: 380px;
    margin: 0 auto;
    padding: 0 15px;
    box-sizing: border-box;
  }
  
  .links {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    margin: 10px auto;
  }
  
  .shop-img {
    max-width: 100%;
    height: auto;
    margin-bottom: 5px;
  }
  
  .links a {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    color: black; /* LINEスタンプの文字色を黒に変更 */
    font-size: 10px;
    width: 100%; /* 幅を100%に設定 */
    text-align: center; /* テキストを中央揃え */
  }
  .links a img {
    margin-bottom: 5px;
  }
.links img{
    width: calc(50% - 5px); /* 画像の幅を50% - 5pxに設定して2列配置を維持 */
    max-width: 150px; 
/*    height: 150px; */
    object-fit: contain;
	margin: 10px 15px;
}
.links2 {
    display: flex;
	flex-wrap: wrap;
    justify-content:center;
	align-items: center;
    gap: 15px !important;
	margin: 10px auto;
}
.links2 img {
    width: calc(50% - 0px); /* 画像の幅を50% - 5pxに設定して2列配置を維持 */
    max-width: 80px; 
    object-fit: contain;
	margin: 0 20px;
}
.img-to {
    width: 80% !important; 
	max-width: 350px;
    display: block; 
	height: auto;
    margin: 10px auto; 
}
.img-to2 {
    width: 80% !important; 
	max-width: 350px; 
	height: auto;
    display: block; 
    margin: 10px auto; 
}

.intro1 p, .intro2 p, .intro3 p {
    margin-top: 20px; 
    font-size: 0.9em;
}
.intro2 h4 {
    margin-top: 30px;
}
.intro3 h4 {
    margin-top: 60px;
}
.intro3 h4 + h4 {
    margin-top: 10px;
}

.container + .container {
    margin-top: 30px auto !important; /* 追加の段落に上部マージンを追加 */
}

footer {
    text-align: center;
    padding: 20px 0;
    margin-top: 50px;
    background-color: #eff0f1; /* フッターの背景色 */
    font-size: 12px; 
	width: 100%;
}
@media (max-width: 400px) {
    #image-grid-wrapper {
        padding: 0 10px; 
		｝
}
@media (max-width: 768px) {
        body {
          margin: 0;
          padding: 0;
          width: 100%;
          overflow-x: hidden;
        }
      
        #links-box {
          width: 100%;
          max-width: 380px;
          margin: 0 auto;
          padding: 0 15px;
          box-sizing: border-box;
        }
      
        .links {
          display: flex;
          flex-direction: column;
          align-items: center;
          gap: 20px;
          margin: 10px auto;
        }
      
        .links a {
          display: flex;
          flex-direction: column;
          align-items: center;
          text-decoration: none;
          color: inherit;
          font-size: 10px; /* LINEスタンプのテキストサイズをさらに小さく */
        }
      
        .shop-img {
          max-width: 100%;
          height: auto;
          margin-bottom: 5px;
        }
      
        #image-grid-wrapper {
          width: 100%;
          max-width: 400px;
          margin: 0 auto;
          padding: 0 15px;
          box-sizing: border-box;
        }
      
        .image-grid {
          display: flex;
          flex-wrap: wrap;
          justify-content: center;
          gap: 10px;
        }
      
        .image-grid img {
          width: calc(50% - 5px);
          max-width: 150px;
          height: auto;
          object-fit: contain;
        }
}
@media screen and (-webkit-min-device-pixel-ratio:0) {
    .links {
      width: 100%;
    }
    
    .links a {
      width: 100%;
      box-sizing: border-box;
    }
  }
/*
@media (max-width: 420px) {
    #pagepiling {
        width: 420px;
    }

    body {
        overflow-x: hidden; 
    }
    .section {
        margin: 0 auto;
    }
}
*/