/*------ここからメイン-----------*/

/*------ここからトップロゴ-----------*/

.slideshow {
  width: 100%;           
  height: 100vh;         /* PCでは画面いっぱいの高さ */
  margin: 0;             
  padding: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  overflow: hidden;
  transition: background-image 0.8s ease-in-out;
}

.top-logo {
  position: relative;
  width :100%;
}
.logo-moji {
  position: absolute;
  inset: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}
.slide-text {
  white-space: nowrap;           /* 折り返し禁止（流すために必須） */
  color: #ffffff;
  font-size: 120px;              /* PCでのサイズ */
  animation: slide-left 8s linear infinite; /* 流れる速度を少しゆったりに（6s → 12s） */
  text-shadow: 0 2px 6px rgba(0,0,0,0.6);
}

/* 左 → 右 */
@keyframes slide-left {
  0% {
    transform: translateX(100%);
  }
  100% {
    transform: translateX(-100%);
  }
}

@media screen and (max-width: 767px) {
  
  .slideshow {
    /* スマホの縦長画面で100vhにすると画像が大きく見切れるため、
       高さを画面の60%〜70%くらいに抑えると背景画像（富士山など）が綺麗に収まりやすいです */
    height: 60vh; 
  }

  .slide-text {
    /* スマホ画面に合わせて文字を現実的なサイズ（24px〜28px）に落とす */
    font-size: 26px; 
    
    /* 文字が小さくなると全体の長さ（移動距離）も短くなるため、
       アニメーションの秒数を調整して心地よい速度（10秒かけて流れるなど）にします */
    animation: slide-left 10s linear infinite; 
    
    /* 文字の影をスマホに合わせて少しシャープに */
    text-shadow: 0 1px 4px rgba(0,0,0,0.7);
  }
}

/*------ここまでトップロゴ-----------*/

/*------ここからアクセス-----------*/
/*------ここからアクセス-----------*/
#access{
  scroll-margin-top: 130px; 
  max-width: 1100px;
  margin: 0 auto;
}
.span1{
  color:#999999;
}
.acc-bo{
  border-top:solid 1px #ccc;
  height:1px;
  width: 100%;
  margin: 5px auto;
}
.h2-acc1{
  display: flex;
  align-items: center; 
  gap: 10px;
}
.map-n{
  width:100px;
}
.acc1{
  margin-left:30px;
  display: flex;
  max-width:1100px;
  gap: 25px;
}
.acc2{
  flex:1;
  margin:15px;
}

/* 電話番号のアイコンの設定 */
.icon-list {
  list-style: none;
  padding-left: 0;
}
.icon-list li {
  position: relative;
  padding-left: 28px; /* アイコン分の余白 */
}
.icon-tel::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.2em;
  width: 16px;
  height: 16px;
  margin-top: 2px;
  background-image: url(denwa1.png);
  background-size: contain;
  background-repeat: no-repeat;
}
.icon-fax::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.2em;
  width: 16px;
  height: 16px;
  margin-top: 2px;
  background-image: url(fax.png);
  background-size: contain;
  background-repeat: no-repeat;
}
/* 電話番号のアイコンここまで */

/* 【修正】PCでのマップの枠 */
#map, #map2 {
  scroll-margin-top: 130px;
  margin-left: 30px;
  max-width: 1000px; /* width: 1000px から max-width に変更 */
  width: 100%;        /* 基本は100%広がるが、最大1000pxで止まるようにする */
}
#map2 {
  margin-bottom: 60px;
}

/* 【修正】Googleマップ（iframe）PC版の設定 */
#map iframe, #map2 iframe {
  width: 100% !important; /* HTML側の width="1000" を強制上書き */
  height: 300px;          /* ★PC版は元の300pxにしっかり固定します */
}

/* ==========================================
   【スマホ用】
   ========================================== */

@media screen and (max-width: 767px) {
  
  /* 住所のブロック（本社・東京・船橋）をスマホでは縦並びに変える */
  .acc1 {
    flex-direction: column; 
    margin-left: 15px;      /* 左の余白をスマホ用に狭める */
    gap: 15px;
  }
  
  .acc2 {
    margin: 0;             /* 各営業所の余白をリセット */
  }

  /* マップの枠のスマホ用リセット */
  #map, #map2 {
    margin-left: 15px;     /* 左の余白を住所と揃える */
    width: calc(100% - 30px); /* 画面幅いっぱいに広げつつ、左右に程よい余白を作る計算 */
  }
  
  #map2 {
    margin-bottom: 40px;   /* 下の余白を少し調整 */
  }

    /* ★スマホのときだけ、高さを自動にして16:9の比率にする設定をここに引っ越します */
  #map iframe, #map2 iframe {
    height: auto;
    aspect-ratio: 16 / 9; 
  }
}
/*------ここまでアクセス-----------*/

/*------ここまでメイン-----------*/