/* ====== 全体設定 ====== */
body {
    background-color: #EEEEEE;
    background-image: 
        repeating-linear-gradient(to bottom, #DEDEDE, #DEDEDE 1px, transparent 0, transparent 30px),
        repeating-linear-gradient(to right, #DEDEDE, #DEDEDE 1px, transparent 0, transparent 30px);
    font-family: 'meiryo', sans-serif;
    font-weight: bold;
    color: #575757;
    /* bodyのデフォルトマージン/パディングを確実に0にする */
    padding: 0 !important;
    margin: 0 !important;
    /* padding-top: 50px; の競合を防ぐために明示的に top だけ残す */
    
    overflow-x: hidden; /* 横スクロール禁止 */
}

/* ====== フォント読み込み ====== */
@font-face {
  font-family: 'NikkyouSans';
  src: url('../fonts/NikkyouSans-mLKax.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'meiryo';
  font-weight: bold;
  font-style: normal;
}

/* ====== テキスト調整 ====== */
.aboutText p {
    text-align: center;
    margin: 0;
    padding: 0;
    line-height: 1.2;
}

.highlight {
    color: #3D9EBF;
}

/* ====== 左右柱画像 ====== */
/* 個別指定 */
.left1-img { 
    width: 160px; 
    height: auto; 
    position: absolute; 
    bottom: 260px; 
    left: 0; 
    z-index: 100;
     }

.left2-img { 
    width: 180px; 
    height: auto; 
    position: absolute; 
     bottom: -40px;
    left: 0; 
    z-index: 100;
     }

.right1-img { 
    width: 180px; 
    height: auto; 
    position: absolute; 
    bottom: 360px; 
    right: 0; 
    z-index: 100;
     }

.right2-img { 
    width: 140px; 
    height: auto; 
    position: absolute; 
    bottom: 0; 
    right: 0; 
    z-index: 100;
     }

/* ====== ふわっと表示上 ====== */
.load-fade {
  opacity: 0;
  visibility: hidden;
  transition: all 0.9s;
}
.load-fade.is-show {
  opacity: 1;
  visibility: visible;
}

/* ====== ふわっと表示下 ====== */
.scroll-up {
  opacity: 0; 
  visibility: hidden;
  transform: translateY(10px);
  transition: all 0.7s;
}
.scroll-up.is-show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0px);
}


/* ====== メイン画像トップ5枚配置 ====== */
.mainImage {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin: 20px auto;
    max-width: 1000px;
    width: 100%;
}
.image-column img {
	width: 100%;
    max-width: 180px;
    height: auto;
    border-radius: 6px;
    transition: transform 0.3s;
    object-fit: contain;
}
.image-column img:hover {
    transform: scale(1.05);
}

/* ====== About / News 共通 ====== */
.aboutSection, 
.newsSection {
    text-align: center;
}
.aboutSection {
    padding-bottom: 30px;
    background-color: #D1D1D1;
}
.aboutSection > * {
    position: relative;
    z-index: 1;
}

/* ======About====== */
.aboutSection ul { list-style: none; padding: 0; margin: 0; text-align: center; }
.aboutSection li { display: inline-block; text-align: center; }
.aboutSection h4, .aboutSection p { margin: 5px; }
.aicon img { width: 100px; margin: 0 auto; }

/* ======NEWS====== */
.newsSection h2 { margin: 70px 0 20px 0; }
.newsSection table {
    margin: 0 auto;
    width: 30%;
    border-top: 1px solid #575757;
    border-collapse: collapse;
}
.newsSection th, .newsSection td {
    font-family: 'meiryo', sans-serif;
    font-weight: bold;
    font-size: 14px;
    border-bottom: 1px solid #575757;
    padding: 15px 0;
}
.newsSection td { width: 90%; }
.newsSection th { width: 10%; }

/* ======SeeMore====== */
.Seemore { 
    width: 100px; margin: 20px auto 0;
}

.Seemore a {
    background: #575757;
    color: #EEEEEE;
    display: block;
    text-align: center;
    letter-spacing: 1px;
    font-size: 12px;
    padding: 13px 0;
    text-decoration: none;
    border-radius: 4px;
    font-family: 'NikkyouSans', sans-serif;
}

.Seemore:hover{
  transform: scale(1.05);
}


/* ======Twitterアイコン====== */
.Twitter img { 
    width: 30px; 
    height: auto; 
    margin: 25px auto 0;
}

/* ======見出し====== */
h2 {
    text-align: center;
    font-size: 20px;
    letter-spacing: 1px;
    font-family: 'NikkyouSans', sans-serif;
    display: inline-block;
    border-bottom: 2px solid #575757;
    padding-bottom: 2px;
    color: #575757;
}

/* ======ドットグラデ背景====== */
/* 親要素（div）は幅100%で、はみ出しを隠す役割を持たせる */
.dot-gradient {
    width: 100%;
    height: auto;
    display: block;
    /* 親要素で万が一のはみ出しを隠すための設定 */
    overflow: hidden; 
    padding: 0;
    margin: 0;
}

/* 追記/修正: 画像自体が親要素の幅を超えないようにする */
.dot-gradient img {
    /* 画像の幅を親要素に合わせる */
    width: 100%; 
    height: auto;
    display: block; 
    /* padding/borderが幅に影響しないようにする */
    box-sizing: border-box; 
}


/* 注意：このセレクタはHTMLのクラス名と一致していないため無効です */
/* HTMLのimgにはクラス名がないため、削除してください */
.dot-gradient.png { /* 削除推奨 */
    /* ... */
}


/* ======コピーライト====== */
.copyright { text-align: center; font-size: 11px; margin: 20px 0; }


/* ====== スマホ対応 ====== */
@media screen and (max-width: 600px) {

.aboutText p{
    font-size: 12px;       /* 小さめフォント */
}

  /* Aboutセクション調整 */
  .aboutSection {
    padding: 20px 10px;    /* 横の余白を少し確保 */
  }

  .aboutSection h4{
    font-size: 13px;       
}

  .aboutSection p{
    font-size: 11px;       
}
/*メイン画像トップ5枚配置調整*/
.mainImage {
 gap: 6px;
 width: 97%;
}

  /* NEWSテーブル調整 */
.newsSection table {
    width: 70%;     
}

 /* NEWSの位置や文字の大きさ調整 */
  .newsSection h2 { margin-top: 50px; }
  .newsSection  { margin-bottom: 30px; }

  .newsSection th,
  .newsSection td {
      font-size: 11px;
  }

  /* SeeMoreボタン調整 */
  .Seemore {
    width: 80px;           /* 横幅を少し小さく */
    margin-top: 15px;
  }

  .Seemore a {
    padding: 10px 0;       /* 縦のパディング調整 */
    font-size: 10px;       /* 小さめフォント */
  }

  /* Twitterアイコン調整 */
  .Twitter img {
    width: 25px;
    margin-top: 20px;
  }

/* dot-gradient背景 */
.dot-gradient {
  width: 100%;
  height: auto;
  display: block;
  overflow: hidden; /* スマホでもはみ出しを隠す */
}

/* 追記: スマホでも画像幅を100%に */
.dot-gradient img {
    width: 100%; 
    height: auto;
    box-sizing: border-box;
}

  /* 見出しh2のサイズ調整 */
  h2 {
    font-size: 18px;       /* 小さめにして画面に収める */
  }
}

@media screen and (max-width: 1300px) {

/* 左右柱画像を非表示にする */
    .left1-img,
    .left2-img,
    .right1-img,
    .right2-img {
        display: none !important; /* 強制的に非表示に */
    }
}