@charset "utf-8";

/* ----------------------------------------
	front-page.css
---------------------------------------- */

/* オープニング */
#opening-wrapper {
  position: fixed;
  z-index: 9999;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: opacity 0.6s ease;
}

/* ロゴ画像 */
#opening-logo {
  animation: jump 1.4s ease-in-out;
  position: relative;
  display: inline-block;
}

#opening-logo img {
  width: 150px;
  height: auto;
  display: block;
}

/* ロゴ出現アニメーション */
@keyframes jump {
   0% {
    opacity: 0;
    transform: translateY(50px) scaleY(1) scaleX(1);
  }
  20% {
    opacity: 1;
    transform: translateY(-80px) scaleY(1.2) scaleX(0.9); /* ちょっと縦長・横縮み */
  }
  40% {
    transform: translateY(0) scaleY(1) scaleX(1.05); /* 着地のつぶれ */
  }
  60% {
    transform: translateY(-15px) scaleY(1) scaleX(0.95); /* 反動 */
  }
  80% {
    transform: translateY(0) scaleY(1) scaleX(1); /* 戻り始め */
  }
  100% {
    transform: translateY(0) scaleY(1) scaleX(1); /* 元の形に */
  }
}

.shine {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 50%;
  height: 100%;
  background: linear-gradient(120deg, transparent, rgba(255,255,255,0.6), transparent);
  animation: shine-move 0.8s ease-in 1.2s forwards;
  pointer-events: none;
}

@keyframes shine-move {
  to {
    left: 120%;
  }
}

/* 背景非表示 */
#opening-wrapper.hidden {
  opacity: 0;
  pointer-events: none;
}

/* ページ本体初期非表示 */
#main-visual {
  opacity: 0;
  transition: opacity 1s ease;
}

body.loaded #main-visual {
  opacity: 1;
}


/* メインビジュアル */
#main-visual {
  width: 100%;
  overflow: hidden;
}

.main-visual-inner {
  position: relative;
  width: 100%;
  height: 100%;
}

.main-visual-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.map-pin-box-wrapper,
.ikeda-metal-logo-img,
.excavator-img,
.truck-img,
.contact-img,
.electricity-img-1,
.electricity-img-2,
.airship-img {
  position: absolute;
}

/* 会社名 */
h1 {
  position: absolute;
  top: 0.5rem;
  left: 2rem;
}

h1 a {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: nowrap;
}

h1 .logo {
  flex: 1;
}

h1 .logo img {
  display: block;
}

h1 p {
  flex: 15;
  color: #2552a6;
  font-weight: 700;
  font-size: 1.8rem;
}

/* 画面サイズ1440px以下 */
@media screen and (max-width: 1440px) {
  h1 p {
    font-size: 1.6rem;
  }
}

/* 画面サイズ1280px以下 */
@media screen and (max-width: 1280px) {
  h1 p {
    font-size: 1.5rem;
  }
}

/* 画面サイズ1180px以下 */
@media screen and (max-width: 1180px) {
  h1 p {
    font-size: 1.35rem;
  }
}

/* 画面サイズ1024px以下 */
@media screen and (max-width: 1024px) {
  h1 {
    left: 1rem;
  }

  h1 p {
    font-size: 1rem;
  }
}

/* マップピン */
.map-pin-box-wrapper {
  position: absolute;
  transform: translate(-50%, -50%);
  z-index: 4;
}

.map-pin-box-wrapper img {
  width: 7.5vw;
  height: auto;
  display: block;
  transition: transform 0.3s ease;
}

/* マップピン hover */
.map-pin-box-wrapper img:hover {
  transform: scale(1.2);
}

/* 画面サイズ1440px以下 */
@media screen and (max-width: 1440px) {
  .map-pin-box-wrapper img {
    width: 8.5vw;
  }
}

/* 画面サイズ1280px以下 */
@media screen and (max-width: 1280px) {
  .map-pin-box-wrapper img {
    width: 9vw;
  }
}

/* 画面サイズ1180px以下 */
@media screen and (max-width: 1180px) {
  .map-pin-box-wrapper img {
    width: 9.5vw;
  }
}

/* 画面サイズ1024px以下 */
@media screen and (max-width: 1024px) {
  .map-pin-box-wrapper img {
    width: 10vw;
  }
}

/* 画面サイズ767px以下 */
@media screen and (max-width: 767px) {
  .map-pin-box-wrapper img {
    width: 85px;
  }
}

/* マップピン 事業内容 */
.map-pin-business {
  top: 53%;
  left: 23%;
}

/* 画面サイズ767px以下 */
/* @media screen and (max-width: 767px) {
  .map-pin-business {
    left: 35%;
  }
} */

/* マップピン 会社案内 */
.map-pin-company {
  top: 34%;
  left: 57.5%;
}

/* 画面サイズ1440px以下 */
@media screen and (max-width: 1440px) {
  .map-pin-company {
    top: 32%;
  }
}

/* 画面サイズ767px以下 */
/* @media screen and (max-width: 767px) {
  .map-pin-company {
    left: 68.5%;
  }
} */

/* マップピン 許認可・認証 */
.map-pin-license {
  top: 9%;
  left: 54%;
}

/* 画面サイズ767px以下 */
/* @media screen and (max-width: 767px) {
  .map-pin-permit {
    left: 63%;
  }
} */

/* マップピン 営業所案内 */
.map-pin-office {
  top: 34%;
  left: 44%;
}

/* 画面サイズ1440px以下 */
@media screen and (max-width: 1440px) {
  .map-pin-office {
    top: 32%;
  }
}

/* 画面サイズ767px以下 */
/* @media screen and (max-width: 767px) {
  .map-pin-office {
    left: 67%;
  }
} */

/* マップピン 採用情報 */
.map-pin-recruit {
  top: 47%;
  left: 31.3%;
}

/* 画面サイズ1280px以下 */
@media screen and (max-width: 1280px) {
  .map-pin-recruit {
    top: 46%;
  }
}

/* 画面サイズ767px以下 */
/* @media screen and (max-width: 767px) {
  .map-pin-recruit {
    top: 43%;
    left: 43.5%;
  }
} */

/* マップピン SDGs */
.map-pin-sdgs {
  top: 76%;
  left: 34%;
}

/* 画面サイズ767px以下 */
/* @media screen and (max-width: 767px) {
  .map-pin-sdgs {
    top: 77%;
    left: 48.5%;
  }
} */

/* マップピン NEWS */
.map-pin-news {
  top: 54%;
  left: 66%;
}

/* 画面サイズ1440px以下 */
@media screen and (max-width: 1440px) {
  .map-pin-news {
    top: 53%;
  }
}

/* 画面サイズ767px以下 */
/* @media screen and (max-width: 767px) {
  .map-pin-news {
    left: auto;
    right: -13%;
  }
} */

/* 画面サイズ1280px以下 */
@media screen and (max-width: 1280px) {
  .map-pin-news {
    top: 51%;
  }
}

/* マップピン お問い合わせ */
.map-pin-contact {
  top: 26%;
  left: 68.1%;
}

/* 画面サイズ1440px以下 */
@media screen and (max-width: 1440px) {
  .map-pin-contact {
    top: 20%;
    left: 69%;
  }
}

/* 画面サイズ1280px以下 */
/* @media screen and (max-width: 1280px) {
  .map-pin-contact {
    left: auto;
    right: -20%;
  }
} */

/* 画面サイズ767px以下 */
/* @media screen and (max-width: 767px) {
  .map-pin-contact {
    left: 80%;
  }
} */

/* マップピン 池田堂 */
.map-pin-ikedado {
  top: 34.5%;
  left: 79.5%;
}

/* 画面サイズ1440px以下 */
/* @media screen and (max-width: 1440px) {
  .map-pin-ikedado {
    top: 35%;
  }
} */

/* 画面サイズ1280px以下 */
/* @media screen and (max-width: 1280px) {
  .map-pin-ikedado {
    top: 34%;
  }
} */

/* マップピン　買取価格専用サイト */
.map-pin-purchase {
  top: 12%;
  left: 41%;
}

/* 池田金ロゴ */
.ikeda-metal-logo-img {
  position: absolute;
  top: 40%;
  left: 53.13%;
  width: 8.5vw;
  overflow: hidden;
}

/* 光の線を追加 */
.ikeda-metal-logo-img::before {
  content: '';
  position: absolute;
  top: -80%;
  left: -90%;
  width: 150%;
  height: 120%;
  background: linear-gradient(
    145deg,
    rgba(255, 255, 255, 0) 30%,
    rgba(255, 255, 255, 0.6) 50%,
    rgba(255, 255, 255, 0) 70%
  );
  transform: translateX(-150%) rotate(0deg);
  animation: shine 5s ease-in-out infinite;
  pointer-events: none;
}

@keyframes shine {
  0%   { transform: translateX(-200%) translateY(150%) rotate(330deg); }
  20%  { transform: translateX(150%) rotate(330deg); }
  100% { transform: translateX(150%) rotate(330deg); }
}

/* 画面サイズ767px以下 */
@media screen and (max-width: 767px) {
  .ikeda-metal-logo-img {
    width: 9%;
  }
}

/* ショベルカー */
.excavator-img {
  position: absolute;
  top: 15%;
  left: 44%;
  width: 7vw;
  animation: move-diagonal-pause 8s ease-in-out infinite;
}

@keyframes move-diagonal-pause {
  0%   { transform: translate(0, 0); }
  20%  { transform: translate(10%, 10%); }
  50%  { transform: translate(10%, 10%); }
  70%  { transform: translate(0, 0); }
  100% { transform: translate(0, 0); }
}

/* 画面サイズ1440px以下 */
@media screen and (max-width: 1440px) {
  .excavator-img {
    top: 13.5%;
    left: 45%;
  }
}

/* 画面サイズ767px以下 */
@media screen and (max-width: 767px) {
  .excavator-img {
    width: 7%;
  }
}

/* トラック */
.truck-img {
  position: absolute;
  top: 56%;
  left: 18.5%;
  width: 10vw;
  animation: truck-move-once 1s ease-out forwards;
}

@keyframes truck-move-once {
  0%   { transform: translate(0, 0); }
  100% { transform: translate(10px, 10px); }
}

/* 画面サイズ1024px以下 */
@media screen and (max-width: 1024px) {
  .truck-img {
    width: 10%;
  }
}

/* お問い合わせ */
.contact-img {
  position: absolute;
  top: 32%;
  left: 64.3%;
  width: 12vw;
  animation: float-updown 4s ease-in-out infinite;
}

@keyframes float-updown {
  0%   { transform: translateY(0); }
  50%  { transform: translateY(-10px); }
  100% { transform: translateY(0); }
}

/* 画面サイズ1440px以下 */
@media screen and (max-width: 1440px) {
  .contact-img {
    top: 27%;
    width: 8.5vw;
  }
}

/* 画面サイズ1280px以下 */
@media screen and (max-width: 1280px) {
  .contact-img {
    width: 8vw;
  }
}

/* 画面サイズ767px以下 */
@media screen and (max-width: 767px) {
  .contact-img {
    left: 65.2%;
    width: 8%;
  }
}

/* 電気自動車 電気1 */
.electricity-img-1 {
  position: absolute;
  top: 52%;
  left: 91.7%;
  width: 9vw;
  z-index: 3;
  animation: irregular-blink-1 2.5s infinite ease-in-out;
}

@keyframes irregular-blink-1 {
  0%   { opacity: 1; }
  10%  { opacity: 0.2; }
  20%  { opacity: 1; }
  30%  { opacity: 0.5; }
  45%  { opacity: 0.1; }
  55%  { opacity: 1; }
  65%  { opacity: 0.4; }
  80%  { opacity: 0.9; }
  100% { opacity: 1; }
}

/* 画面サイズ1440px以下 */
@media screen and (max-width: 1440px) {
  .electricity-img-1 {
    width: 0.9vw;
  }
}

/* 画面サイズ1280px以下 */
@media screen and (max-width: 1280px) {
  .electricity-img-1 {
    width: 0.8vw;
    top: 51.8%
  }
}

/* 画面サイズ1180px以下 */
@media screen and (max-width: 1180px) {
  .electricity-img-1 {
    top: 51.6%
  }
}

/* 画面サイズ1024px以下 */
@media screen and (max-width: 1024px) {
  .electricity-img-1 {
    top: 51.1%
  }
}

/* 画面サイズ895px以下 */
@media screen and (max-width: 895px) {
  .electricity-img-1 {
    top: 50.6%
  }
}

/* 画面サイズ767px以下 */
@media screen and (max-width: 767px) {
  .electricity-img-1 {
    top: 51.4%;
    width: 0.85%;
  }
}

/* 画面サイズ575px以下 */
@media screen and (max-width: 575px) {
  .electricity-img-1 {
    top: 51.2%;
  }
}

/* 電気自動車 電気2 */
.electricity-img-2 {
  position: absolute;
  top: 59.1%;
  left: 97.5%;
  width: 0.9vw;
  z-index: 3;
  animation: irregular-blink-2 2.5s infinite ease-in-out;
}

@keyframes irregular-blink-2 {
  0%   { opacity: 0.2; }
  10%  { opacity: 1; }
  20%  { opacity: 0.5; }
  30%  { opacity: 0.1; }
  45%  { opacity: 1; }
  55%  { opacity: 0.4; }
  65%  { opacity: 0.9; }
  80%  { opacity: 1; }
  100% { opacity: 0.8; }
}

/* 画面サイズ1440px以下 */
@media screen and (max-width: 1440px) {
  .electricity-img-2 {
    width: 0.9vw;
  }
}

/* 画面サイズ1280px以下 */
@media screen and (max-width: 1280px) {
  .electricity-img-2 {
    top: 58.9%;
    width: 0.8vw;
  }
}

/* 画面サイズ1180px以下 */
@media screen and (max-width: 1180px) {
  .electricity-img-2 {
    top: 58.7%;
  }
}

/* 画面サイズ1024px以下 */
@media screen and (max-width: 1024px) {
  .electricity-img-2 {
    top: 58.1%;
  }
}

/* 画面サイズ895px以下 */
@media screen and (max-width: 895px) {
  .electricity-img-2 {
    top: 57.6%;
  }
}

/* 画面サイズ767px以下 */
@media screen and (max-width: 767px) {
  .electricity-img-2 {
    top: 58.3%;
    width: 0.85%;
  }
}

/* 画面サイズ575px以下 */
@media screen and (max-width: 575px) {
  .electricity-img-2 {
    top: 58.2%;
  }
}

/* ドローン */
.drone-img {
  position: absolute;
  top: 5.56%;
  left: 27.08%;
  width: 5.5vw;
  animation: float-updown 6s ease-in-out infinite;
}

/* 画面サイズ1280px以下 */
@media screen and (max-width: 1440px) {
  .drone-img {
    width: 5vw;
  }
}

/* 画面サイズ1180px以下 */
@media screen and (max-width: 1180px) {
  .drone-img {
    top: 9%;
  }
}

/* 画面サイズ1024px以下 */
@media screen and (max-width: 1024px) {
  .drone-img {
    width: 5%;
  }
}

/* 飛行船 */
.airship-img {
  position: absolute;
  top: 5%;
  left: 88%;
  width: 10vw;
  animation: float-updown-2 4s ease-in-out infinite;
}

@keyframes float-updown-2 {
  0%   { transform: translateY(-5px); }
  50%  { transform: translateY(0); }
  100% { transform: translateY(-5px); }
}

/* 画面サイズ1024px以下 */
@media screen and (max-width: 1024px) {
  .airship-img {
    width: 10%;
  }
}

/* 画面サイズ767px以下 */
/* 横スクロール */
@media screen and (max-width: 767px) {

  /* body全体の横スクロール禁止 */
  html, body {
    overflow-x: hidden;
  }

  /* main-visual */
  #main-visual {
    position: relative;
    width: 100vw;
    height: 70vh;
    overflow: hidden;
    contain: layout paint;
  }

  /* 横スクロール専用ラッパー */
  #main-visual .scroll-container {
    width: 100%;
    height: 100%;
    overflow-x: scroll;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
     /*IE(Internet Explorer)・Microsoft Edgeへの対応*/
    -ms-overflow-style: none;
    /*Firefoxへの対応*/
    scrollbar-width: none;
  }

   /*Google Chrome、Safariへの対応*/
  .contents_box::-webkit-scrollbar{
    display: none;
  }

   /* ★ 16:9を維持させる */
  #main-visual .main-visual-inner {
    position: relative;
    height: 100%;
    aspect-ratio: 16 / 9;      /* ←追加 */
    width: auto;               /* ←16:9になる幅に自動計算される */
    flex-shrink: 0;
  }

  /* メインビジュアル画像 */
  .main-visual-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
  }

  .main-visual-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  /* scroll bar（常時表示） */
  .custom-scrollbar {
    position: absolute;
    bottom: 5px;
    left: 0;
    width: 100%;
    height: 6px;
    background: #e0e0e0;
    border-radius: 3px;
    z-index: 20;
  }

  .custom-scrollbar-thumb {
    height: 6px;
    width: 30%; /* JSで自動調整される */
    background: #bac7cc;
    border-radius: 3px;
  }
}