/* styles.css */
/* リンクのリセット */

h1, h2, h3, h4, h5 {
  margin: 0;
  padding: 0;
  font-weight: normal;
  font-size: 100%;
  line-height: 1;
}
/* リンクのリセット */

body {
  font-family: sans-serif;
  height: 100%;
  margin: 0;
}

header {
    align-items: center;
    justify-content: space-between; /* 追加: ヘッダー内の要素を両端に寄せる */
    padding: 15px 0px 10px 15px;
    background-image: linear-gradient(120deg, rgba(0, 0, 0, 0.75) 0%, rgba(0, 0, 0, 0.15) 50%, rgba(0, 0, 0, 0.75) 75%);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 10;
    box-sizing: border-box;
}

/* パソコンで見たときは"pc"のclassがついた画像が表示される */
.pc { display: block !important; }
.sp { display: none !important; }
/* スマートフォンで見たときは"sp"のclassがついた画像が表示される */
@media only screen and (max-width: 660px) {
.pc { display: none !important; }
.sp { display: block !important; }
}


.pc-menu {
    display: flex;
}

.pc-menu img {
    margin-right: 10px;
    cursor: pointer; /* クリック可能な要素であることを示す */
}

.mobile-menu {
    display: none;
}

.menu-items {
    display: none;
}

.hamburger {
    cursor: pointer;
}

.logo {
    float: left; /* ロゴを左側に配置 */
}

.pc-menu {
    float: right; /* PC版のメニューを右側に配置 */
}

.mobile-menu .menu-items a {
    display: block; /* メニュー項目を縦に並べる */
    padding: 10px;
}

nav {
    display: flex;
    justify-content: space-between; /* ロゴとハンバーガーメニューの間にスペースを最大化 */
    align-items: center; /* ロゴとハンバーガーメニューを中央に配置 */
}

.mobile-menu .hamburger {
    position: absolute;
    top: 10px;
    right: 10px;
    cursor: pointer;
}

.mobile-menu .menu-items {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, 20%);
    text-align: center;
    background-color: rgba(35, 162, 189, 0.75);
    padding: 30px 15px 30px 15px;
    border-radius: 5px; /* 丸みを持たせるためのスタイル。必要に応じて調整または削除 */

}

.mobile-menu .menu-items a {
    display: block; /* 各メニュー項目を縦に配置 */
    color: #FFF;
    padding: 5px;
    font-size: 2.5em;
}

/* ハンバーガーアイコンのスタイル */
.mobile-menu .hamburger span {
    font-size: 3em;
    color: #FFF;
    background-color: transparent;
    padding: 0px 15px 0px 15px; 
    border-radius: 0px;
    display: inline-block; 
}

/* メニューが開いた時の ✕ のスタイル */
.mobile-menu .hamburger span.menu-opened {
    color: #FFF;
    background-color: transparent;
}

@keyframes slide {
  0% {
    transform: translateX(-25%);
  }
  100% {
    transform: translateX(25%);
  }
}

.container {
    display: flex;
    flex-wrap: wrap;
}

.image-section {
    position: relative;
    flex: 1;
    min-height: 400px;
}

.image-section img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.overlay-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    font-size: 3.5vw;
    background-color: rgba(0, 0, 0, 0.5);
    padding: 5px 15px 5px 15px;
    border-radius: 0px;
    font-family: 'Noto Serif JP', serif;
    white-space: nowrap;       /* 改行の防止 */
    overflow: hidden;          /* オーバーフローの管理 */
    text-overflow: ellipsis;   /* 省略記号を表示 */
    max-width: 90%; 
}

.text-section {
    font-family: 'Poppins', serif;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #FF8000;
}

.content-wrapper {
    font-size: 5.0vw;
    text-align: center;
}

.sub-text {
    font-size: 5.0vw; /* 必要に応じてサイズを調整してください */
    margin-top: 0px; /* 上のテキストとの間隔を追加 */
    font-family: 'Noto Serif JP', serif; /* 任意のフォントを適用 */
    color: #000000; /* 任意の色を適用 */
}

.more-link {
    display: block; /* この行を変更 */
    margin-top: 50px;
    margin-left: auto;
    margin-right: auto;
    font-size: 1.25vw;
    padding: 10px 5px 8px 5px;
    background-color: #FFFFFF;
    color: #FF8000;
    text-decoration: none;
    border-radius: 0px;
    transition: background-color 0.25s;
    text-align: center; /* ボタンのテキストを中央に揃えるために追加 */
    font-family: 'BIZ UDGothic', sans-serif;
    border: double 5px #FF8000;
    width: 200px; /* あなたの望む幅に設定してください */
}

.more-link:hover {
    color: #FFFFFF;
    background-color: #FF8000;
    border: double 5px #FFFFFF;
}

.product-background-container {
  position: relative;
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  background-color: #333;
  background-size: 100% 100%; /* 横幅100%で表示 */
  background-position: center; /* 中央に配置 */
  padding: 100px 0px 100px 0px;
  overflow-x: hidden;
}

.product-background-container5 {
  position: relative;
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  background-color: #7ED957;
  background-size: 100% 100%; /* 横幅100%で表示 */
  background-position: center; /* 中央に配置 */
  padding: 100px 0px 100px 0px;
  overflow-x: hidden;
}


.product-container {
  display: flex;
  justify-content: space-between;
  width: 100%;
  margin: 0 auto; /* Centers the container if the viewport is wider than 1200px */
  margin: 1% 5% 1% 5%;
  position: relative;
  z-index: 1; /* Make the product-container layer above the canvas */
}

.product-item {
  margin: 2px 5px 2px 5px;
}

.product-item img {
  width: 100%;
  height: auto;
}

.product-background-container2 {
  position: relative;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  background-color: #CCC;
  padding: 10px 0px;
  overflow-x: hidden;
}

.product-container2 {
  display: flex;
  justify-content: space-between;
  width: 100%;
  margin: 0 auto; /* Centers the container */
  position: relative;
  z-index: 1; /* Make the product-container layer above the canvas */
flex-wrap: nowrap;
}

.product-item2 {
  margin: 0px 5px; /* Adjust spacing around items */
  flex-basis: 50%; /* Initially assume two items per row */
}

.product-item2 img {
  width: 80%;
  height: auto;
  margin: 50px 0px 150px 80px; /* 上下のマージンを0に、左右のマージンを10pxに設定 */
  flex-basis: calc(50% - 20px); /* 余白を考慮した幅の計算 */
}


#myBtn {
  display: none;
  position: fixed;
  bottom: 20px;
  right: 30px;
  z-index: 1000;
  border: none;
  outline: none;
  background-color: rgba(35,162,189,0.5);
  color: white;
  cursor: pointer;
  width: 50px;
  height: 50px;
  padding: 0;
  text-align: center;
}

#myBtn span {
  display: block;
  line-height: 50px;
  font-size: 24px;
}

#myBtn:hover {
  background-color: rgba(35,162,189);
}

footer {
    background-color: #000; /* 任意の色を選択できます */
    color: #F6CC5E;
    padding: 20px 0;
    font-family: 'Roboto', sans-serif; /* フォントは任意で選択可能 */
    text-align: center;
}

.footer-content {
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 20px;
}

.company-logo {
    max-width: 240px; /* 必要に応じてロゴのサイズを調整 */
    margin: 0 auto;
    display: block;
}

.footer-links {
    margin: 20px 0;
}

.footer-links a {
    color: #F6CC5E;
    text-decoration: none;
    margin: 0 10px;
    transition: color 0.3s;
}

.footer-links a:hover {
    text-decoration: underline;
}

.copyright {
    font-size: 0.9em;
    margin-top: 10px;
}


.curtain .animation-bg, .curtain .animation-bg02 {
  display: none;
}
body.appear.curtain .animation-bg, body.appear.curtain .animation-bg02 {
  display: block;
}
.curtain .animation-bg, .curtain .animation-bg02 {
  background: linear-gradient(rgba(35, 162, 189, 0.3), rgba(0, 0, 0, 0.9)); 
  content: "";
  position: fixed;
  z-index: 1000;
  width: 100%;
  height: 100vh;
  top: 0;
  transform: scaleX(1);
  animation-duration: 1.2s;
  animation-timing-function: ease-in-out;
  animation-fill-mode: forwards;
}
.curtain .animation-bg {
  left: 50%;
  animation-name: PageAnime-curtain01;
}
.curtain .animation-bg02 {
  right: 50%;
  animation-name: PageAnime-curtain02;
}
/* カーテン左 キーフレーム */
@keyframes PageAnime-curtain01 {
  0% {
    transform-origin: left;
    transform: scaleX(1);
  }
  50% {
    transform-origin: right;
  }
  100% {
    transform-origin: right;
    transform: scaleX(0);
  }
}
/* カーテン右 キーフレーム */
@keyframes PageAnime-curtain02 {
  0% {
    transform-origin: right;
    transform: scaleX(1);
  }
  50% {
    transform-origin: left;
  }
  100% {
    transform-origin: left;
    transform: scaleX(0);
  }
}

@media  (max-width: 1300px) {

.product-background-container{
  position: relative;
  width: 100%;
  height: auto;
  background-color: #333;
  padding: 0px 0px 0px 0px;
}

.product-background-container3{
  position: relative;
  width: 100%;
  height: auto;
  background-color: #333;
  padding: 0px 0px 0px 0px;
}


.product-background-container2{
  position: relative;
  width: 100%;
  height: auto;
  background-color: #CCC;
  padding: 0px 0px 0px 0px;
}


.product-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* 中央に配置 */
  font-family: 'BIZ UDGothic', sans-serif;
  font-size: 3.0vw;
    background-color: rgba(0, 0, 0, 0.5);
    padding: 10px 20px 5px 20px;
    border-radius: 0px;
  color: #FFF; /* テキストの色を白に設定 (必要に応じて変更してください) */
  z-index: 2;
  pointer-events: none; /* クリックをテキストの背後の要素に通過させるため */
}

    .pc-menu {
        display: none;
    }

    .mobile-menu {
        display: block;
    }


    .mobile-menu .menu-items a {
        font-size: 24px;
        line-height: 3; /* この値を調整して、行間を増減させます */
    }

    .close-menu.display-menu {
        display: block;
        position: absolute;
        top: 30px;
        right: 20px;
    }
}


@media (max-width: 768px) {

.overlay-text {
    position: absolute;
    top: 32%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    font-size: 7.5vw;
    background-color: rgba(0, 0, 0, 0.5);
    padding: 5px 15px 5px 15px;
    border-radius: 0px;
    white-space: nowrap;       /* 改行の防止 */
    overflow: hidden;          /* オーバーフローの管理 */
    text-overflow: ellipsis;   /* 省略記号を表示 */
    max-width: 90%; 
}

    .container {
        flex-direction: column;
    }

    .text-section {
        order: 2;
    }
.content-wrapper {
    font-size: 5.5vw;
    padding: 0px 0; /* スマホ画面での余白調整 */
    margin: -70px 0px 10px 0px;
}

.sub-text {
    font-size: 10.5vw; /* 必要に応じてサイズを調整してください */
    margin-top: 5px; /* 上のテキストとの間隔を追加 */
    color: #000000; /* 任意の色を適用 */
}

.more-link {
    font-size: 5.0vw;
    margin: 50px 0px; /* 上下の余白を追加 */
    width: 150px; /* あなたの望む幅に設定してください */
    margin-left: auto;
    margin-right: auto;

}

.product-background-container{
  position: relative;
  width: 100%;
  height: auto;
  background-color: #333;
  padding: 0px 0px 0px 0px;
}

  .product-container {
    flex-direction: column;
    width: 98%;
    margin-top: 0%;
    margin-bottom: 5%;
  }

  .product-item {
    width: 100%;
  margin-left: 0%;
  margin-top: 5%;
  }

.product-item img {
  width: 100%;
  height: auto;
}

.product-background-container2{
  position: relative;
  width: 100%;
  height: auto;
  background-color: #CCC;
  padding: 0px 0px 0px 0px;
}


.product-container2 {
  display: flex;
  justify-content: space-between;
  width: 100%;
  margin: 0 auto; /* Centers the container */
  padding: 0px 0px 50px 0px;
  position: relative;
  z-index: 1; /* Make the product-container layer above the canvas */
flex-wrap: wrap;
}


.product-item2 {
  margin: 0px 5px; /* Adjust spacing around items */
  flex-basis: 100%; /* Initially assume two items per row */
    width: 100%;
}


.product-item2 img {
  width: 92.2%;
  height: auto;
  margin: 30px 0px 0px 18px; /* 上下のマージンを0に、左右のマージンを10pxに設定 */
  flex-basis: calc(0% 0px); /* 余白を考慮した幅の計算 */
}

    .footer-content {
        padding: 0 15px;
    }

    .company-logo {
        max-width: 240px; /* モバイルデバイスのためにロゴのサイズを少し小さく */
    }

    .footer-links {
        margin: 15px 0;
        font-size: 0.9em; /* テキストサイズを少し小さく */
    }

    .copyright {
        font-size: 0.8em; /* テキストサイズを少し小さく */
    }

    .pc-menu {
        display: none;
    }

    .mobile-menu {
        display: block;
    }

    .mobile-menu .menu-items a {
        font-size: 24px;
        line-height: 3; /* この値を調整して、行間を増減させます */
    }

    .close-menu.display-menu {
        display: block;
        position: absolute;
        top: 30px;
        right: 20px;
    }
}