@charset 'UTF-8';

/*
------------------------------------------------------------------------------------------------------------
全体のCSS設定
------------------------------------------------------------------------------------------------------------
*/


html {
  font-size: 100%;
  scroll-behavior: smooth;
}

body {
  background-color: #fff;
  color: #26374f;
  font-family: Helvetica, Arial, "Yu Gothic", YuGothic, "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.7;
  margin: 0px;
  padding: 0px;
  font-feature-settings: "palt";
  overflow-x: hidden;
}

#container {
  max-width: 1440px;        /* 最大幅 */
  width: 100%;              /* 可変幅 */
  margin: 0 auto;
  padding: 0;
  box-sizing: border-box;
  background-color: #fff;
  border-left: 1px solid #ccc;
  border-right: 1px solid #ccc;
  text-align: center;
  overflow: hidden;

  @media only screen and (max-width: 768px) {
  width: 750px;
  margin: 0 auto;
  padding: 0;
  }

}


p,
ul,
img {
  margin: 0;
  padding: 0;
  vertical-align: bottom;
  max-width: 100%;
}
/* 
.wrapper {
  max-width: 100%;
  margin: 0 auto;
  text-align: center;
} */

a {
  color: #75aa98;
}


/*
------------------------------------------------------------------------------------------------------------
リンク（全般）設定のCSS
------------------------------------------------------------------------------------------------------------
*/


a:hover img {
  position: relative;
  bottom: 3px;
  opacity: 0.9;
}

.bold {
  font-weight: bold;
}

/*
------------------------------------------------------------------------------------------------------------
マージン・パディング
------------------------------------------------------------------------------------------------------------
*/
.mt20 {
  margin-top: 20px;
}

.mt30 {
  margin-top: 30px;
}

.mt40 {
  margin-top: 40px;
}

.mt50 {
  margin-top: 50px;
}

.mt80 {
  margin-top: 80px;
}

.mb20 {
  margin-bottom: 20px;
}

.mb30 {
  margin-bottom: 30px;
}

.mb40 {
  margin-bottom: 40px;
}

.mb50 {
  margin-bottom: 50px;
}

.mb80 {
  margin-bottom: 80px;
}

.pb0 {
  padding-bottom: 0;
}

.pb80 {
  padding-bottom: 80px;
}

.pt80 {
  padding-top: 80px;
}

.center {
  text-align: center;
}

/*
------------------------------------------------------------------------------------------------------------
ヘッダー
------------------------------------------------------------------------------------------------------------
*/

/* -------- ヘッダー全般 -------- */
header {
  width: 100%;
  background-color: #fff;
  box-shadow: 0 0 5px rgb(0 0 0 / 10%);
  z-index: 80;
  display: flex;
  align-items: center;
  /* 垂直中央揃え */
  position: fixed;
  height: 80px;
}

/* -------- ヘッダーPC上の幅 -------- */
.header-container {
  width: 1440px;
  display: flex;
  align-items: center;
}

/* -------- 左上サイトタイトル設定 -------- */
.logo_p {
  font-size: 18px;
  margin-left: 10px;
  line-height: 1.4;
}

/* -------- 左上・企業名 -------- */
.logo_p_small {
  font-size: 20px;
  padding-left: 50px;
}

/* -------- PC表示右上ページ内リンク大枠 -------- */
.header_inner {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  /* 右寄せにする */
  height: 100%;
  margin-left: auto;
  /* header_innerを右端に配置 */
  margin-right: 80px;
}

/* -------- PC表示右上ページ内リンク -------- */
.header_inner ul {
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0;
  height: 100%;
}

.header_inner ul li {
  list-style: none;
  margin-left: 30px;
}

/* -------- PC表示右上ページ内リンク文字設定 -------- */
.header_inner ul a {
  display: flex;
  color: #26374f;
  text-decoration: none;
  align-items: center;
  line-height: 1.4;
  /* 改行の行間 */
}

/* -------- PC表示右上ページ内リンク文字ホバー -------- */
.header_inner ul a:hover {
  color: #03489D;
}

/*
------------------------------------------------------------------------------------------------------------
FV・ファーストビュー
------------------------------------------------------------------------------------------------------------
*/

.fv {
  margin-top: 80px;
}

.cta1-pc {
  background-image: url(../images/cta1-pc-bg.png);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  height: 310px;
  width: 100%;
  max-width: 1440px;
  aspect-ratio: 1440 / 194;  /* ✅ アスペクト比を設定 */
  margin: 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 40px;
  padding: 125px 20px 0 20px;
  box-sizing: border-box;
}



.cta1-sp {
  background-image: url(../images/cta1-sp-bg.png);
  height: 455px;
  width: 750px;
  padding-top: 130px;
  margin: 0 auto;
}

.shiryo-sp {
  padding-top: 70px;
}

/*
------------------------------------------------------------------------------------------------------------
CTA②
------------------------------------------------------------------------------------------------------------
*/

.bg-black {
  height: 55px;
  background-color: #292929;
  display: flex;
  align-items: center;
}

.white-p {
  color: #fff;
  margin: 0 auto;
  font-size: 24px;
}

.cta2-pc {
  background-image: url(../images/cta2-pc-bg.png);
  background-size: cover;              /* 背景画像を画面幅にフィット */
  background-position: center center;  /* 背景位置を中央に */
  background-repeat: no-repeat;
  
  height: 310px;
  width: 100%;                         /* 画面幅に応じて可変 */
  max-width: 1440px;                   /* 最大幅は1440pxに制限 */
  margin: 0 auto;                      /* 中央寄せ */

  padding-top: 150px;
  padding-left: 20px;                  /* スマホ対応も意識して余白追加 */
  padding-right: 20px;

  display: flex;
  justify-content: center;
  gap: 40px;
  box-sizing: border-box;
}


.cta2-sp {
  background-image: url(../images/cta2-sp-bg.png);
  height: 415px;
  width: 750px;
  padding-top: 165px;
  margin: 0 auto;
}

/*
------------------------------------------------------------------------------------------------------------
支柱アルパの紹介
------------------------------------------------------------------------------------------------------------
*/
.arupa-p {
  font-size: 22px;
  padding: 20px 0;
}

.fuan {
  width: 900px;
  margin: 0 auto;
  padding-bottom: 30px;
}

@media only screen and (max-width: 768px) {
  .fuan {
    width: 700px;
    margin: 0 auto;
    padding-bottom: 30px;
  }
}

.kaishou-p {
  font-size: 22px;
  padding-top: 20px;
  text-align: justify;
  text-align-last: left;
}

.dankai {
  color: #03489D;
  text-decoration: underline;
}

.point01-bg {
  background-image: url(../images/point01-bg-pc.png);
  background-size: cover;             /* ← 背景画像を可変に */
  background-position: center center;
  background-repeat: no-repeat;
  height: 360px;
  width: 950px;
  margin: 30px auto 10px;
  padding: 0px 0px ;           /* テキストに合わせて余白を調整 */
  box-sizing: border-box;
  text-align: center;

  @media only screen and (max-width: 768px) {
    background-image: url(../images/point01-bg-sp.png);
    width: 750px;
    height: 418px;
    background-size: auto;
  }
}

.point02-bg {
  background-image: url(../images/point02-bg-pc.png);
  background-size: cover;             /* ← 背景画像を可変に */
  background-position: center center;
  background-repeat: no-repeat;
  height: 334px;
  width: 950px;
  margin: 30px auto 10px;
  padding: 0px 0px ;           /* テキストに合わせて余白を調整 */
  box-sizing: border-box;
  text-align: center;

  @media only screen and (max-width: 768px) {
    background-image: url(../images/point02-bg-sp.png);
    width: 750px;
    height: 366px;
    background-size: auto;
  }
}

.point03-bg {
  background-image: url(../images/point03-bg-pc.png);
  background-size: cover;             /* ← 背景画像を可変に */
  background-position: center center;
  background-repeat: no-repeat;
  height: 372px;
  width: 950px;
  margin: 30px auto 10px;
  padding: 0px 0px ;           /* テキストに合わせて余白を調整 */
  box-sizing: border-box;
  text-align: center;

  @media only screen and (max-width: 768px) {
    background-image: url(../images/point03-bg-sp.png);
    width: 750px;
    height: 435px;
    background-size: auto;
  }
}

.blue-weight {
  color: #03489D;
  font-size: 42px;
  font-weight: 600;
  padding-top: 120px;
  line-height: 1.2;
}

.point-p {
  font-size: 20px;
  padding: 40px 150px 0 150px;
  text-align: justify;
  text-align-last: left;

  @media only screen and (max-width: 768px) {
    font-size: 26px;
    padding: 40px 75px 0 75px;
    line-height: 1.5;
  }

}

.red-point {
  color: #D80404;
  font-weight: 700;
}

/*
------------------------------------------------------------------------------------------------------------
比較表
------------------------------------------------------------------------------------------------------------
*/

.hikaku-p-bg {
  width: 950px;
  margin: 0 auto;
  align-items: center;

  @media only screen and (max-width: 768px) {
    width: 650px;
  }
}

.hikaku-p {
  font-size: 22px;
  padding: 20px 0;
  text-align: justify;
  text-align-last: left;

  @media only screen and (max-width: 768px) {
    font-size: 24px;
  }
}

.hikaku-p-red {
  color: #D80404;
  font-weight: 600;
  font-size: 26px;

  @media only screen and (max-width: 768px) {
    font-size: 28px;
  }
}

/*
------------------------------------------------------------------------------------------------------------
ガッチの信頼性セクション
------------------------------------------------------------------------------------------------------------
*/

.shinrai-p-bg {
  background-image: url(../images/jishin-bg.png);
  width: 700px;
  height: 68px;
  margin: 10px auto 0;
  display: flex;
  align-items: center;
  border: 1px solid#03489D;
}

.shinrai-p-title {
  font-size: 30px;
  font-weight: 600;
  color: #fff;
  text-align: left;
  padding-left: 70px;
}

.shinrai-p-yellow {
  color: #FEFF8C;
}

.shinrai-p-small {
  font-size: 16px;
}

.shinrai-p-detail-bg {
  border: 1px solid#03489D;
  width: 700px;
  margin: 5px auto 10px;
  text-align: left;
}

.shinrai-p-detail {
  font-size: 22px;
  padding: 10px 0 10px 70px;
  line-height: 1.5;

  @media only screen and (max-width: 768px) {
    font-size: 24px;
  }
}

/*
------------------------------------------------------------------------------------------------------------
現場の声セクション
------------------------------------------------------------------------------------------------------------
*/
.genba-p {
  text-align: center;
  font-size: 24px;
  line-height: 1.5;
}

.voice {
  display: flex;
  flex-direction: column; /* ← これを追加 */
  align-items: center;    /* ← 横幅中央揃え */
  gap: 10px;              /* ← 各ブロックの間隔を追加（任意） */
  margin: 0 auto;
}


.voice1 {
  background-image: url(../images/voice1-pc.png);
  width: 975px;
  height: 425px;
  margin: 0 auto;

  @media only screen and (max-width: 768px) {
    background-image: url(../images/voice1-sp.png);
    width: 725px;
    height: 462px;
  }
}

.voice2 {
  background-image: url(../images/voice2-pc.png);
  width: 975px;
  height: 425px;
  margin: 0 auto;

  @media only screen and (max-width: 768px) {
    background-image: url(../images/voice2-sp.png);
    width: 725px;
    height: 462px;
  }
}

.voice3 {
  background-image: url(../images/voice3-pc.png);
  width: 975px;
  height: 425px;
  margin: 0 auto;

  @media only screen and (max-width: 768px) {
    background-image: url(../images/voice3-sp.png);
    width: 725px;
    height: 467px;
  }
}

.voice4 {
  background-image: url(../images/voice4-pc.png);
  width: 975px;
  height: 470px;
  margin: 0 auto;

  @media only screen and (max-width: 768px) {
    background-image: url(../images/voice4-sp.png);
    width: 725px;
    height: 525px;
  }
}

.voice-detail-p {
  color: #626262;
  font-size: 24px;
  line-height: 1.5;
  text-align: justify;
  text-align-last: left;
  padding: 250px 60px 0 60px;
  font-weight: 200;

  @media only screen and (max-width: 768px) {
    padding: 255px 60px 0 60px;
    font-size: 26px;
    line-height: 1.5;
  }
}

.voice-p-weight {
  font-weight: 700;
}

.voice-p-red {
  color: #D80404;
}

/*
------------------------------------------------------------------------------------------------------------
ガッチ開発ストーリー
------------------------------------------------------------------------------------------------------------
*/

.story-p {
  text-align: center;
  font-size: 24px;
  line-height: 1.5;
}

.yellow-line {
  text-decoration-line: underline;
  text-decoration-color: #FEFF8C;
  text-decoration-thickness: 8px; /* 任意：下線の太さを調整 */
}

/*
------------------------------------------------------------------------------------------------------------
CTA/固定ボタン
------------------------------------------------------------------------------------------------------------
*/

/* -------- 右下固定ボタン -------- */

/* -------- 内部リンクボタン -------- */
.sanka-pc {
  background-image: url(../images/oitabmp-btn-bg-pc.png);
  height: 268px;
  width: 100%;
  display: flex;
  /* フレックスボックスを使用 */
  justify-content: center;
  /* 水平方向に中央揃え */
  align-items: center;
  /* 垂直方向に中央揃え */
  padding-top: 10px;
}

.sanka-sp {
  display: none;
}

.movie {
  padding-top: 20px;
}

/*
------------------------------------------------------------------------------------------------------------
フォームの設定
------------------------------------------------------------------------------------------------------------
*/
/* フォーム全体背景 */
.form-section {
  background-color: #E4F6FF;
  padding: 40px 0;
}

/* フォーム本体 */
.form-bg {
  max-width: 800px;
  margin: 0 auto;
  background-color: #E4F6FF;
  padding: 20px 20px 0 20px;
  box-sizing: border-box;
  text-align: left;
}

/* 各ラベル */
.form-label {
  font-size: 24px;
  font-weight: bold;
  margin-top: 20px;
  margin-bottom: 10px;
}

/* 必須表示 */
.required {
  background-color: #e53935;
  color: #fff;
  font-size: 14px;
  padding: 2px 6px;
  margin-left: 8px;
  border-radius: 4px;
  vertical-align: middle;
}

/* 入力欄スタイル */
input[type="text"],
input[type="email"],
input[type="tel"],
textarea {
  background-color: #fff;
  border: 1px solid #e5e3df;
  border-radius: 10px;
  font-size: 24px;
  padding: 10px;
  width: 100%;
  display: block;
  transition: 0.3s ease;
  box-sizing: border-box;
}

/* フォーカス時 */
input:focus,
textarea:focus {
  background-color: #e9f5fb;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  outline: none;
}

/* チェックボックス */
input[type="checkbox"] {
  transform: scale(1.6);
  margin: 0 12px 0 0; /* ラベルとの間隔も少し広げると見やすい */
  cursor: pointer; /* マウスカーソルを指マークに */
}


/* ご希望内容の説明 */
.checkbox-description {
  font-size: 24px;
  line-height: 1.6;
  margin-bottom: 30px;
}

/* 送信ボタン */
input[type="submit"] {
  width: 100%;
  font-size: 40px;
  font-weight: bold;
  padding: 20px;
  background-color: #FF8210;
  color: #fff;
  border-radius: 8px;
  border: none;
  cursor: pointer;
  margin-top: 20px;
}

input[type="submit"]:hover {
  transform: translateY(3pt); /* 3pt下に移動 */
}

/* 姓名入力欄：横並び */
.name-row {
  display: flex;
  flex-direction: row;
  gap: 30px;
  margin-bottom: 20px;
}

.name-box {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.name-box label.name-label {
  font-size: 24px;
  margin-bottom: 4px;
  padding-left: 4px;
}

/* textarea 固定 */
textarea {
  resize: vertical;
  min-height: 160px;
}

/* モバイル対応 */
@media only screen and (max-width: 768px) {
  .form-bg {
    padding: 20px 5%;
  }

  .form-label {
    font-size: 26px;
    padding-left: 5px;
  }

  .required {
    font-size: 12px;
  }

  input[type="text"],
  input[type="email"],
  input[type="tel"],
  textarea {
    font-size: 24px;
    height: 80px;
    width: 100%;
  }

  .name-row {
    flex-direction: row; /* スマホでも横並びを維持 */
    gap: 30px;
    padding-left: 0;
    padding-right: 0;
  }

  .name-label {
    font-size: 20px;
    margin-left: 2px;
  }

  .checkbox-description {
    font-size: 24px;
    padding-left: 5px;
  }
}

/*
------------------------------------------------------------------------------------------------------------
固定ボタンの設定
------------------------------------------------------------------------------------------------------------
*/

/* 固定ボタン親コンテナ */
.fixed-buttons.pc {
  position: fixed;
  right: 0px;
  bottom: 20px;
  display: flex;
  flex-direction: column;
  gap: 50px;
  z-index: 9999;
}


/* 画像のサイズ調整（任意、必要に応じて調整してください） */
.fixed-buttons.pc img {
  display: block;
  max-width: 100%;
  height: auto;
  cursor: pointer;
  user-select: none;
}

/*
------------------------------------------------------------------------------------------------------------
フッターの設定
------------------------------------------------------------------------------------------------------------
*/

footer {
  width: 100%;
  margin: 0 auto;
  text-align: center;
  padding-top: 50px;
  padding-bottom: 50px;
  color: #fff;
  background-color: #26374f;
}

footer a {
  color: #fff;
  text-decoration: none;
}

footer a:hover {
  color: #fdfe65;
}

footer p {
  margin: 10px 0;
}

.copyright {
  color: #fff;
  font-size: 80%;
  text-align: center;
}

/* 区切り線のスタイル */
.separator {
  margin: 0 2px;
  /* 左右に10pxのマージンを追加 */
  color: #fff;
  /* 区切り線の色を白に設定 */
}


/*
------------------------------------------------------------------------------------------------------------
SP/スマホ版設定
------------------------------------------------------------------------------------------------------------
*/


/* パソコンで見たときは"pc"のclassがついた画像が表示される */
.pc {
  display: block !important;
}

.sp {
  display: none !important;
}

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

  .sp {
    display: block !important;
  }
}

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

  /* -------------------------- 全体の設定 -------------------------- */
  body {
    max-width: 100%;
    font-size: 15px;
  }

  img {
    max-width: 100%;
  }

  /* -------------------------- マージンパディング -------------------------- */
  .mb80 {
    margin: 0;
  }

  .pb80 {
    padding-bottom: 2rem;
  }

  .mb20 {
    margin-bottom: 0.5rem;
  }

  .mt30 {
    margin-top: 30px;
  }

  /* .wrapper {
    width: 100%;
    max-width: 100%;
  } */

  /* -------------------------- ヘッダー -------------------------- */
  /* -------- ヘッダー全般 -------- */
  header {
    height: 100px;
  }

  .header-container {
    width: 750px;
    display: flex;
    align-items: center;
  }

  .logo {
    height: 40px;
    align-items: center;
  }

  .logo_p {
    font-size: 18px;
    margin-left: 15px;
    line-height: 1.4;
  }

  .logo_p_small {
    font-size: 26px;
    padding-top: 10px;
  }

  /* -------- 左上サイトタイトル2行目字間広げる -------- */
  .logo_p_wide {
    letter-spacing: 0.1em;
  }

  /* -------------------------- ハンバーガーメニュー -------------------------- */
  /* -------- 表示されるハンバーガー３本メニュー -------- */
  .menu-btn {
    position: fixed;
    top: 50px;
    right: 2rem;
    transform: translateY(-50%);
    display: flex;
    height: 60px;
    width: 60px;
    justify-content: center;
    align-items: center;
    z-index: 90;
  }

  .menu-btn span,
  .menu-btn span:before,
  .menu-btn span:after {
    content: '';
    display: block;
    height: 5px;
    width: 40px;
    border-radius: 2px;
    background-color: #05499C;
    position: absolute;
  }

  .menu-btn span:before {
    bottom: 12px;
  }

  .menu-btn span:after {
    top: 12px;
  }

  /* -------- 開いた時のバツ印 -------- */
  #menu-btn-check:checked~.menu-btn span {
    background-color: rgba(255, 255, 255, 0);
  }

  #menu-btn-check:checked~.menu-btn span::before {
    bottom: 0;
    transform: rotate(45deg);
    background-color: #fff;
  }

  #menu-btn-check:checked~.menu-btn span::after {
    top: 0;
    transform: rotate(-45deg);
    background-color: #fff;
  }

  #menu-btn-check {
    display: none;
  }

  /* -------- 開いた時のメニュー項目リスト ※閉じるボタンなし -------- */
  .menu-content ul {
    padding: 80px 10px;
  }

  /* -------- 開いた時のメニュー各項目の枠 -------- */
  .menu-content ul li {
    border-bottom: solid 1px #e5e3df;
    list-style: none;
    display: block;
    margin-bottom: 5px;
    /* 項目間のマージンを狭める */
  }

  /* -------- 開いた時のメニュー項目の文字 -------- */
  .menu-content ul li a {
    font-size: 22px;
    font-weight: 500;
    display: block;
    width: 100%;
    box-sizing: border-box;
    text-decoration: none;
    padding: 20px 0 20px 0;
    /* 項目間のパディングを狭める */
    position: relative;
    color: #fff;
  }

  /* -------- 開いた時のメニュー項目「>」 -------- */
  .menu-content ul li a::before {
    content: "";
    width: 12px;
    height: 12px;
    border-top: solid 2px #fff;
    border-right: solid 2px #fff;
    transform: rotate(45deg);
    position: absolute;
    right: 2.2rem;
    top: 50%;
    /* 各項目の高さ中央配置 */
    transform: translateY(-50%) rotate(45deg);
  }

  .menu-content {
    width: 65%;
    position: fixed;
    top: 0;
    left: 100%;
    z-index: 80;
    background-color: #05499C;
    transition: all 0.5s;
    opacity: 0.95;
  }

  /* -------- 開いた時のメニュー枠大きさ -------- */
  #menu-btn-check:checked~.menu-content {
    left: 35%;
  }

  /* -------------------------- ファーストビュー -------------------------- */

  .fv {
    margin-top: 100px;
  }

  .loop_wrap {
    display: flex;
    top: 0;
    left: 0;
    width: 200%;
    height: 100%;
    overflow: hidden;
    position: absolute;
    /* 変更 */
    animation: loop 60s infinite linear;
  }

  .loop_wrap img {
    margin-top: 100px;
    width: 100%;
    height: 100%;
    position: relative;
    /* 変更 */
    float: left;
    /* 追加 */
    top: 0;
    opacity: 0.5;
  }

  /* -------------------------- 固定ボタン -------------------------- */
 
  /* -------- 内部リンクボタン -------- */
  .sanka-pc {
    display: none;
  }

  .sanka-sp {
    background-image: url(../images/oitabmp-btn-bg-sp.png);
    height: 300px;
    /* 高さを320pxに設定 */
    width: 100%;
    /* 幅を100%に設定 */
    display: flex;
    justify-content: center;
    /* 水平方向に中央揃え */
    align-items: center;
    /* 垂直方向に中央揃え */
    background-size: 100% auto;
    /* 背景画像の幅を100%、高さを自動調整 */
    background-repeat: no-repeat;
    /* 背景画像を繰り返さない */
    padding-top: 20px;
  }

  .sanka-sp img {
    max-width: 100%;
    /* 画像の最大幅を親要素の80%に設定 */
    height: auto;
    /* 高さを自動調整 */
  }

  /* -------------------------- 動画挿入/Youtube -------------------------- */
  .center {
    text-align: center;
  }

  .youtube {
    width: 682px;
    height: 384px;
    border-radius: 22px;
    box-shadow: 8px 8px 9px rgb(0 0 0 / 5%);
    margin: 20px 0;
  }

  /* -------------------------- フッター -------------------------- */

  footer {
    width: 100%;
    margin: 0 auto;
    text-align: center;
    padding-top: 40px;
    padding-bottom: 50px;
    color: #fff;
    background-color: #26374f;
  }

  footer a {
    color: #fff;
    text-decoration: none;
  }

  footer a:hover {
    color: #fdfe65;
  }

  /* footer p {
  margin: 5px 0;
} */

  .copyright {
    color: #fff;
    font-size: 80%;
    text-align: center;
  }

  /* 区切り線のスタイル */
  .separator {
    /* margin: 0 2px; 左右に10pxのマージンを追加 */
    color: #fff;
    /* 区切り線の色を白に設定 */
  }
}

/* スライダーコンテナ */
.slider-container {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: auto;
  margin-top: 20px; /* スライダーコンテナの上部にスペースを追加 */
}

/* スライダー */
.slider {
  display: flex;
  transition: transform 0.5s ease;
}

/* スライドアイテム */
.slide-item {
  min-width: 100%; /* スライドアイテムを画面幅いっぱいに */
  box-sizing: border-box;
}

/* 画像を大きく表示するためのスタイル */
.slide-item img {
  width: 100%;
  height: auto;
}

/* スライダーのコントロールボタン */
.slider-button {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background-color: rgba(0, 0, 0, 0.5);
  color: white;
  border: none;
  padding: 10px;
  cursor: pointer;
  z-index: 1; /* ボタンが他の要素の上に表示されるように */
  font-size: 24px; /* 矢印を大きく表示 */
  line-height: 1; /* 高さ調整 */
  width: 40px; /* ボタンの幅 */
  height: 40px; /* ボタンの高さ */
  text-align: center; /* 矢印を中央に配置 */
  border-radius: 50%; /* ボタンを丸くする */
  display: flex;
  align-items: center;
  justify-content: center;
}

#prev {
  left: 10px;
  opacity: 0.5;
}

#next {
  right: 10px;
  opacity: 0.5;
}

/* ドットナビゲーション */
.dot-container {
  text-align: center;
  margin-top: 20px;
}

.dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  margin: 0 5px;
  background-color: #bbb;
  border-radius: 50%;
  cursor: pointer;
}

.dot.active {
  background-color: #717171;
}

.underbtn {
  bottom: 20px; /* 要素を画面下部から20px上に配置 */
  right: 0px; /* 要素を画面右端から20px左に配置 */
  opacity: 1; /* 初期状態は不透明 */
  transition: opacity 0.5s ease; /* フェードアウト時のアニメーション */
}

/* 画面最下部までスクロールされたら不透明度を0にしてフェードアウト */
@media screen and (min-height: 600px) {
  body {
    padding-bottom: 0px; /* 要素が画面下部にあるため、コンテンツの最下部に余白を追加 */
  }
  .underbtn {
    position: fixed;
    bottom: 20px;
    right: 0px;
    opacity: 1;
    transition: opacity 0.5s ease;
  }
  /* フェードアウト */
  .underbtn.fade-out {
    opacity: 0;
  }


}

/* スマホ用固定ボタンエリア */
.fixed-bottom-sp {
  display: none; /* 初期は非表示、スマホだけ表示させる */
}

@media screen and (max-width: 768px) {
  .fixed-bottom-sp {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: #05499C;
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: 20px 0;
    z-index: 9999;
  }

  .fixed-bottom-sp a {
    /* color: #fff;
    background-color: #FF8210;
    padding: 18px 20px;
    border-radius: 8px;
    font-size: 24px;
    font-weight: bold; */
    text-decoration: none;
    /* text-align: center; */
    flex: 1;
    margin: 0 5px;
    /* white-space: nowrap; */
    display: block; /* 画像をクリックできるように */
    margin: 0 5px;
  }

  .fixed-bottom-sp a img {
    display: block;
    width: 100%; /* 必要に応じてサイズ調整 */
    height: auto;
  }

  .fixed-bottom-sp a:hover {
    opacity: 0.9;
  }

  body {
    padding-bottom: 70px; /* フッターにかぶらないよう余白確保 */
  }
}