/* 全体の背景設定 */
body {
  background-image: url('https://www.deri-studio-nude.com/img/velvet.jpg'); /* 官能的なテクスチャ画像 */
  background-size: cover; /* 画像を画面全体にフィット */
  background-repeat: no-repeat; /* 画像の繰り返しを無効化 */
  background-attachment: fixed; /* スクロール時に背景を固定 */
  background-position: center; /* 画像を中央に配置 */
}
.row {
    display: flex; /* Flexboxを使って配置 */
    justify-content: center; /* 子要素を中央揃え */
    align-items: center; /* 垂直方向にも中央揃え */
}

.twitter-container {
            margin: 2rem auto;
            text-align: right; /* デフォルトは右揃え */
            padding-right: 20px; /* 右端に余白を追加 */
            overflow: visible; /* ボタンのスケールによる見切れを防止 */
        }

        .twitter-button-container {
            display: inline-block; /* ボタンを独立させる */
        }

        .twitter-follow-button {
            transform: scale(1.5); /* サイズを1.5倍に拡大 */
            transform-origin: center right; /* 拡大の基準を右端に */
        }

        /* スマホ表示用のメディアクエリ */
        @media (max-width: 768px) {
            .twitter-container {
                text-align: center; /* スマホでは中央揃え */
                padding-right: 0; /* 中央揃えなので右余白をリセット */
            }

            .twitter-follow-button {
                transform-origin: center; /* 中央揃えに合わせて拡大基準を中央に変更 */
            }
        }
/* 右カラムが高さを調整できるようにmin-heightを設定 */
        .h-100 {
            min-height: 100%;
        }
/* ヘッダーのスタイル */

 .contact-info {
            text-align: center;
            padding: 1rem 0;
            font-size: 1rem;
            line-height: 1.5;
            background: linear-gradient(135deg, rgba(255, 255, 255, 0.5), rgba(0, 0, 0, 0.5)) !important; /* 半透明のグラデーション背景 */
            color: #fff; /* 白文字 */
            width: 100%; /* 横幅いっぱい */
            box-sizing: border-box; /* パディングを含めた幅計算 */
        }

        .icon {
            display: inline-block;
            width: 20px;
            height: 20px;
            margin-right: 0.5rem;
            vertical-align: middle;
            border-radius: 50%; /* 丸いアイコン */
            text-align: center;
            line-height: 20px;
            font-size: 14px;
            font-weight: bold;
            color: #fff; /* アイコン内の文字色 */
        }

        .icon-phone {
            background-color: #4CAF50; /* 緑色の背景 */
        }

        .icon-email {
            background-color: #2196F3; /* 青色の背景 */
        }

        .contact-info a {
            text-decoration: none;
            color: #FFD700; /* リンク色を金色に調整 */
            margin: 0 0.5rem;
        }

        .contact-info a:hover {
            text-decoration: underline; /* ホバー時の装飾 */
        }

        .contact-info .text-break,
        .contact-info .contact-item {
            display: block; /* スマホでは改行 */
        }

        @media (min-width: 769px) {
            .contact-info .text-break,
            .contact-info .contact-item {
                display: inline; /* PCでは1行にする */
            }
        }


.site-header {
    background: url('https://www.deri-studio-nude.com/site/ba004.jpg') no-repeat center center; /* 背景画像を中央に配置 */
    background-size: cover; /* ヘッダー全体を覆うように調整 */
    background-color: #000; /* 余白部分の背景色 */
    color: white; /* テキスト色 */
    height: 300px; /* デフォルトの高さ */
    display: flex; /* コンテンツを中央揃え */
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%; /* 横幅を画面いっぱいに固定 */
    box-sizing: border-box; /* paddingやborderを含めて横幅を計算 */
}
/* リンクのスタイル */
.site-info a {
    color: #ffc107; /* リンク色 */
    text-decoration: none; /* 下線を削除 */
}
.site-info a:hover {
    text-decoration: underline; /* ホバー時に下線を追加 */
}

/* レスポンシブ対応 */
@media (max-width: 1200px) {
    .site-header {
        height: auto; /* 高さを自動調整 */
        padding: 20px; /* 内側の余白を追加 */
        background-size: contain; /* 背景を縮尺を保ちながら収める */
    }
}

/* スマホ対応 */
@media (max-width: 768px) {
    .site-header {
        height: auto; /* 高さを自動調整 */
        padding: 0; /* 余計な余白を削除 */
        background-size: cover; /* 背景画像が横幅を超えないように */
        background-position: center; /* 画像の中心を維持 */
        width: 100%; /* 横幅が画面に収まるように */
    }
}

  .site-info a {
    color: #ffc107; /* リンクの色をゴールドに変更 */
    text-decoration: none;
  }
  .site-info a:hover {
    text-decoration: underline;
  }
  .logo-img {
    width: 100px; /* ロゴ画像の幅を調整 */
    height: auto;
  }
.site-logo {
  text-align: right; /* ロゴを左に配置 */
}

.logo-img {
  width: 100%; /* 横幅を親要素に合わせる */
  max-width: 500px; /* 最大幅を指定（調整可能） */
  height: auto; /* 高さは自動調整（画像の比率を保つ） */
}

.section-title {
  font-size: 1rem; /* 普通の大きさ */
  color: #ffffff; /* 白文字 */
}


.site-logo h1 {
  margin: 0;
  font-size: 1.5rem;
}

.site-info p {
  margin: 0;
  font-size: 0.9rem;
}

.site-info a {
  color: #ffcc00;
  text-decoration: none;
}

.site-info a:hover {
  text-decoration: underline;
}




.custom-margin {
    margin: 10px; /* 4方向に10pxのマージン */
  }

   .info_satsueikai-item {
            flex: 1 1 48%; /* 横並び時の幅 */
            padding: 20px;
            background: linear-gradient(to right, rgba(0, 0, 255, 0.1), rgba(0, 0, 255, 0.5)); /* 青のグラデーション */
            border: 0px solid #ddd;
            border-radius: 8px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        }

        .info_satsueikai-item h3 {
            margin: 0 0 10px;
            font-size: 18px;
            color: #333;
        }

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

/* スマホ用（画面幅600px以下の時） */
@media (max-width: 600px) {
    .info_satsueikai-item p {
        font-size: 18px; /* スマホ用フォントサイズ */
    }
}
        /* レスポンシブ対応 */
        @media (max-width: 600px) {
            .info_satsueikai-item {
                flex: 1 1 100%; /* 小さい画面では縦並びに */
            }
        }
.info_banner1, .info_banner2, .info_banner3, .info_banner4, .info_banner5 {
            width: 100%; /* 画面幅に応じて広がる */
            max-width: 728px; /* 最大幅を設定 */
            height: 90px;
            background-color: #000; /* ベースカラー（個別に変更可） */
            background-image: linear-gradient(135deg, rgba(255, 255, 255, 0.05) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.05) 50%, rgba(255, 255, 255, 0.05) 75%, transparent 75%, transparent);
            background-size: 20px 20px; /* 斜線のサイズ */
            border-radius: 15px; /* 角丸の半径 */
            display: flex;
            justify-content: center;
            align-items: center;
            color: white;
            font-size: 24px;
            font-family: Arial, sans-serif;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            margin: 0px auto;
        }

        /* 個別の背景色を設定 */
        .info_banner2 {
            background-color: #c71585;
        }
        .info_banner3 {
            background-color: #191970;
        }
        .info_banner4 {
            background-color: #9acd32;
        }
        .info_banner5 {
            background-color: #333; /* 黒に近い色 */
        }

        /* ホバースタイル */
        .info_banner1:hover, .info_banner2:hover, .info_banner3:hover, .info_banner4:hover, .info_banner5:hover {
            background-color: #111;
            box-shadow: 0 6px 8px rgba(0, 0, 0, 0.2);
            cursor: pointer;
        }

        /* レスポンシブ対応 */
        @media (max-width: 600px) {
            .info_banner1, .info_banner2, .info_banner3, .info_banner4, .info_banner5 {
                height: 70px; /* 高さを小さく */
                font-size: 18px; /* テキストサイズを調整 */
            }
        }

   
.info-column {
    width: 100%; /* 画面幅に応じて広がる */
    max-width: 728px; /* バナーと同じ最大幅 */
    background-color: rgba(0, 0, 0, 0.8); /* highlight-textの背景色を適用 */
    color: white; /* highlight-textの文字色 */
    padding: 20px; /* highlight-textの内側の余白 */
    font-size: 28px; /* highlight-textのフォントサイズ */
    line-height: 1.6; /* highlight-textの行間 */
    border-radius: 15px; /* highlight-textの角丸を適用 */
    word-wrap: break-word; /* highlight-textのテキスト折返し */
    text-align: left; /* highlight-textのテキスト揃え */
    z-index: 10; /* レイヤー優先度 */
    position: relative; /* highlight-textのポジションを継承 */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* 軽い影を追加 */
    box-sizing: border-box; /* パディングとマージンを含むように設定 */
    margin: 0 auto 20px; /* 上マージンをゼロに設定し、下マージンのみ適用 */
}


/* レスポンシブ対応 */
@media (max-width: 600px) {
    .info-column {
        font-size: 14px; /* テキストサイズを調整 */
        padding: 15px; /* 内側の余白を調整 */
    }
}

.phone-link {
  font-weight: bold; /* 太字 */
  color: #ff5722; /* 明るいオレンジ色 */
  text-decoration: none; /* 下線を削除 */
}

.phone-link:hover {
  text-decoration: underline; /* ホバー時に下線を追加 */
  color: #d84315; /* 色を少し濃く */
}

/* 新人情報の見出しスタイル */
.shincyaku {
  position: relative;
  padding: 0.25em 0;
  color: white;  /* 文字色を白に */
  font-size: 1.5rem;  /* 文字サイズを少し小さく設定 */
  margin-left: 15px;  /* 左に少し余白を追加して右に移動したように見せる */
}

.shincyaku:after {
  content: "";
  display: block;
  height: 4px;
  background: -webkit-linear-gradient(to right, rgb(230, 90, 90), transparent);
  background: linear-gradient(to right, rgb(230, 90, 90), transparent);
}

.health-two-column {
      display: flex;
      flex-wrap: wrap; /* レスポンシブ時に折り返し */
      gap: 10px; /* カラム間の余白を10pxに設定 */
      margin: 0 auto; /* 中央揃え */
    }

    .health-column {
      flex: 1 1 calc(50% - 10px); /* 各カラムの幅を50%に設定し、余白分を引く */
      background-color: rgba(0, 0, 0, 0.8); /* highlight-textの背景色を適用 */
      color: white; /* highlight-textの文字色 */
      padding: 20px; /* highlight-textの内側の余白 */
      font-size: 16px; /* highlight-textのフォントサイズ */
      line-height: 1.6; /* highlight-textの行間 */
      border-radius: 5px; /* highlight-textの角丸を適用 */
      word-wrap: break-word; /* highlight-textのテキスト折返し */
      text-align: left; /* highlight-textのテキスト揃え */
      z-index: 10; /* レイヤー優先度 */
      position: relative; /* highlight-textのポジションを継承 */
      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* 軽い影を追加 */
      box-sizing: border-box; /* パディングとマージンを含むように設定 */
    }

    .health-column h2 {
      font-size: 1.5rem; /* 見出しのフォントサイズ */
      margin-bottom: 1rem;
    }

    /* 1カラム表示 */
    .single-column {
      background-color: rgba(0, 0, 0, 0.8);
      color: white;
      padding: 20px;
      font-size: 16px;
      line-height: 1.6;
      border-radius: 5px;
      word-wrap: break-word;
      text-align: left;
      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
      box-sizing: border-box;
      margin-top: 20px; /* 1カラムと2カラムの間の余白 */
    }

    @media (max-width: 768px) {
      .health-column {
        flex: 1 1 100%; /* モバイルでは1カラム表示 */
        margin-bottom: 10px; /* モバイル時に下の余白を追加 */
      }
      .single-column {
        margin-top: 20px;
      }
    }

.zenkoku iframe {
    width: 100%; /* 幅を100%に設定 */
    height: 600px; /* 高さをPCでは600pxに設定 */
    max-width: 100%; /* 親要素の幅を超えないように */
    border: none; /* 枠線を削除 */
  }

  @media (max-width: 768px) { /* スマホやタブレット向けのスタイル */
    .zenkoku iframe {
      height: 300px; /* スマホでは高さを縮小 */
    }
  }</style>
/* 2カラムレイアウト */
.health-two-column-table {
   background: linear-gradient(to right, rgba(0, 0, 255, 0.1), rgba(0, 0, 255, 0.5)); /* 青のグラデーション */
	display: flex;
  flex-wrap: wrap; /* レスポンシブ時に折り返し */
  gap: 20px; /* カラム間の余白 */
}

.table-container {
  flex: 1 1 calc(50% - 10px); /* 各カラムの幅を50%に設定 */
  background: linear-gradient(to right, rgba(0, 0, 255, 0.1), rgba(0, 0, 255, 0.5)); /* 青のグラデーション */
  color: white; /* 文字色を白に */
  padding: 20px;
  font-size: 16px;
  border-radius: 5px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* 影の追加 */
  box-sizing: border-box;
}

table {
  width: 100%; /* テーブルの幅を100%に設定 */
  border-collapse: collapse; /* セルの隙間をなくす */
}

th, td {
  padding: 10px;
  text-align: left;
  border: 1px solid #ddd;
	background: linear-gradient(to right, rgba(0, 0, 255, 0.1), rgba(0, 0, 255, 0.5)); /* 青のグラデーション */
}

th {
 background: linear-gradient(to right, rgba(0, 0, 255, 0.1), rgba(0, 0, 255, 0.5)); /* 青のグラデーション */
  color: white; /* ヘッダー文字色 */
}
.second-row td {
  background: linear-gradient(to right, rgba(0, 0, 255, 0.1), rgba(0, 0, 255, 0.5)); /* 青のグラデーション */
  color: #fffffff; /* テキスト色を設定 */
}
.highlight {
  background: linear-gradient(to right, rgba(0, 0, 255, 0.1), rgba(0, 0, 255, 0.5)); /* 青のグラデーション */
}
td {
  background: linear-gradient(to right, rgba(0, 0, 255, 0.1), rgba(0, 0, 255, 0.5)); /* 青のグラデーション */
  color: white; /* セル文字色 */
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
  .health-two-column-table {
    flex-direction: column; /* モバイル時には縦並び */
  }

  .table-container {
    flex: 1 1 100%; /* モバイル時に1カラム表示 */
    margin-bottom: 20px; /* 下に余白を追加 */
  }
}

.health-two-column-table-midashi {
  position: relative;
  padding: 0.25em 0 0.25em 0.4em;
  color: white;  /* 文字色を白に */
  font-size: 1.5rem;  /* 文字サイズを少し小さく設定 */
  margin-left: 10px;  /* 左に少し余白を追加して右に移動したように見せる */
  text-align: left; /* 左揃えにする */
}

.health-two-column-table-midashi:after {
  content: "";
  display: block;
  height: 4px;
  background: -webkit-linear-gradient(to right, rgb(230, 90, 90), transparent);
  background: linear-gradient(to right, rgb(230, 90, 90), transparent);
  margin-top: 5px;  /* 線とテキストの間にスペースを追加 */
}

.health-table-row {
  margin-bottom: 10px;  /* この行の下に10pxのマージンを追加 */
}
/* メンバーカード */
.member-card {
  border: 2px solid #0000ff !important; /* 青色の枠線 */
  border-radius: 10px; /* カードの角を丸くする */
  padding: 0px; /* 内側の余白をリセット */
  color: #fff !important; /* テキストを白色に固定 */
  text-align: center; /* 中央揃え */
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.5), rgba(0, 0, 0, 0.5)) !important; /* 半透明のグラデーション背景 */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2) !important; /* 軽いシャドウを付ける */
  height: 100%; /* 高さを親要素に合わせる */
}

/* リンクのスタイル */
.member-card a {
  color: #fff !important; /* リンクを白色に固定 */
  text-decoration: none; /* 下線を削除 */
}

.member-card a:hover {
  color: #fff !important; /* ホバー時も白色に固定 */
}

.member-card a:visited {
  color: #fff !important; /* 訪問済みリンクも白色に固定 */
}

/* メンバーサムネイルのスタイル */
.member-thumbnail {
  width: 100%; /* カード内で横幅を最大に調整 */
  max-width: 130px; /* サムネイルの最大幅 */
  height: auto; /* 比率を維持して高さを自動調整 */
  margin: 0 auto 10px; /* サムネイルを中央揃えし、下部に余白を設定 */
  border: 3px solid #0000ff !important; /* 青色の枠線 */
  border-radius: 5px; /* サムネイルの角を丸くする */
  background-color: #0000ff; /* 背景色を青に設定 */
}

/* メンバーカード内のテキスト全体 */
.member-card p {
  margin: 5px 0; /* 上下に少し余白を設定 */
  color: #fff !important; /* テキストの色を白に固定 */
}

/* 最後の段落（身長・カップサイズなど）のスタイル */
.member-card p:last-child {
  font-size: 0.9rem; /* 通常より少し小さめに設定 */
  color: #ccc; /* 薄い灰色で表示 */
  line-height: 1.4; /* 行間を広げて読みやすく */
}


.navbar {
  background-color: #6a5acd; /* 背景色を青色に変更 */
  padding: 10px 0; /* 上下のパディング */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* 軽い影を追加 */
  z-index: 9999; /* 他の要素に隠れないようにする */
}

.navbar-nav .nav-link {
  display: block;
  text-align: center;
  padding: 10px 15px;
  margin: 5px;
  border: 1px solid transparent;
  border-radius: 5px;
  background-color: rgba(255, 255, 255, 0.3); /* 背景色を少し透明に */
  color: #fff !important;
  transition: all 0.3s;
}

.navbar-nav .nav-link:hover {
  background-color: #8b0000 !important; /* ホバー時に色を変更 */
  color: #000 !important; /* 文字色を黒に変更 */
}

.navbar-nav .nav-link.active {
  background-color: #8b0000 !important;
  color: #000 !important;
  border-color: #8b0000 !important; /* アクティブ状態でもゴールドに */
}
#ns-slider1 img {
    border: 3px solid #6a5acd; /* 枠線の太さと色 */
    border-radius: 5px; /* オプション: 角を丸くしたい場合 */
}

/* info-section内の調整 */
.info-section {
    font-size: 20px;
    line-height: 1.2;
    background-color: #6a5acd;
    color: white;
    padding: 10px;
    border-radius: 5px;
    width: 50%; /* 幅をテーブルのセルに合わせる */
    margin-top: -20px; /* 上に20px上げる */
    margin-bottom: 20px; /* 下の余白 */
    box-sizing: border-box;
    text-align: left;
}

/* タイトル部分の強調 */
.info-section strong {
    color: #6a5acd; /* タイトルの色を紫に設定 */
}
 .table-wrapper {
  display: flex;               /* 横並び */
  justify-content: center;     /* 水平方向にセンタリング */
  gap: 20px;                   /* テーブル間のスペース */
  flex-wrap: wrap;             /* 横に並びきらない場合、折り返す */
}


/* iframe-wrapper-top の背景色を設定 */
.iframe-wrapper-top {
    background-color: #0000FF; /* 背景色を青に設定 */
    margin-left: 10px; /* 左に10pxの余白を追加 */
}

/* iframe-wrapper-topのレスポンシブ対応 */
.iframe-wrapper-top {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%; /* アスペクト比16:9を維持 */
    overflow: hidden;
}

.iframe-wrapper-top iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

table.ta1 {
  border-collapse: collapse;   /* セルの枠線を統一 */
  table-layout: fixed;         /* セルの幅を一定にする */
  margin: 0;                   /* 余白なし */
  width: 48%;                  /* デスクトップ時にテーブルの横幅を48%に設定 */
  background-color: #000;      /* テーブルの背景色を黒に設定 */
  overflow: hidden;            /* はみ出しを防ぐ */
}

table.ta1 th, table.ta1 td {
  border: 3px solid #fff;      /* 枠線を白に変更 */
  padding: 10px;
  text-align: center;
  white-space: nowrap;         /* 内容が折り返しにならないように */
  overflow: hidden;            /* セル内でのはみ出し防止 */
  text-overflow: ellipsis;     /* 長い文字列を省略表示 */
  background-color: #000;      /* セルの背景色を黒に設定 */
  color: white;                /* 文字色を白に設定 */
}

/* スマホサイズ（幅768px以下）では縦並びに */
@media (max-width: 768px) {
  .table-wrapper {
    flex-direction: column;    /* テーブルを縦に並べる */
    align-items: center;       /* 水平方向にセンタリング */
  }

  table.ta1 {
    width: 100%;               /* スマホでは横幅100%に設定 */
  }

  table.ta1 th, table.ta1 td {
    white-space: normal;       /* スマホでは折り返しを許可 */
    word-wrap: break-word;     /* 長い単語を途中で折り返し */
  }
}

.highlight-text {
            background-color: rgba(0, 0, 0, 0.8);
            color: white;
            padding: 10px;
            font-size: 16px;
            line-height: 1.6;
            border-radius: 5px;
            word-wrap: break-word;
            text-align: left;
            z-index: 10;
            position: relative;
        }

.table-custom {
    background-color: rgba(0, 0, 0, 0.1); /* 半透明の黒色 */
}
.right-arrow::before {
    content: "➔"; /* 太めの矢印を指定 */
    display: inline-block; /* 矢印をブロックにしてスタイリング */
    width: 30px; /* 円の幅を広く */
    height: 30px; /* 円の高さを広く */
    line-height: 30px; /* 矢印を中央に配置 */
    text-align: center; /* 矢印を中央揃え */
    font-size: 1.8rem; /* 矢印のサイズを指定 */
    color: #ffffff; /* 矢印の色 */
    background-color: #0000ff; /* 円の背景色 */
    border-radius: 50%; /* 円形にする */
    margin-right: 10px; /* 矢印と文字の間の余白 */
}




.right-col1 {
    color: #ffffff; /* 白文字 */
    background: linear-gradient(to right, rgba(0, 0, 255, 0.1), rgba(0, 0, 255, 0.5)); /* 青のグラデーション */
    padding: 20px; /* 内側に余白を追加 */
    border-radius: 8px; /* 角を少し丸める */
    font-size: 1.2rem; /* 文字を少し大きく */
    line-height: 1.5; /* 行間を調整 */
    width: 100%; /* 幅を広げる */
    margin: 0 auto; /* センター寄せ */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); /* 影を追加して浮かせる効果 */
}

.right-col1 h2 {
    font-size: 1.5rem; /* 見出しも少し大きく */
    margin-bottom: 15px; /* 見出し下に余白 */
}

.right-col2 {
    color: #ffffff; /* 白文字 */
   background: linear-gradient(to right, rgba(0, 0, 255, 0.1), rgba(0, 0, 255, 0.5)); /* 青のグラデーション */
    padding: 20px; /* 内側の余白 */
    border-radius: 8px; /* 角を丸くする */
    font-size: 1rem; /* フォントサイズ */
    line-height: 1.6; /* 行間を調整 */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); /* ボックスシャドウを追加 */
}

.right-col2 .right-arrow::before {
    content: "➔"; /* 矢印を指定 */
    display: inline-block; /* インラインブロックでスタイルを適用 */
    width: 25px; /* 円の幅 */
    height: 25px; /* 円の高さ */
    line-height: 25px; /* 矢印を中央に配置 */
    text-align: center; /* 矢印を中央揃え */
    font-size: 1.2rem; /* 矢印のサイズ */
    color: #ffffff; /* 矢印の色 */
    background-color: #0000ff; /* 背景色（青） */
    border-radius: 50%; /* 円形にする */
    margin-right: 10px; /* 矢印とテキストの間に余白 */
}

@media screen and (max-width: 768px) { /* スマホ向け（画面幅768px以下） */
    .right-col2 {
        font-size: 1.2rem; /* フォントサイズを少し大きく */
        line-height: 1.8; /* 行間も調整 */
    }
    .right-col2 .right-arrow::before {
        font-size: 1.4rem; /* 矢印のサイズを少し大きく */
        width: 30px; /* 円の幅を調整 */
        height: 30px; /* 円の高さを調整 */
        line-height: 30px; /* 矢印を中央揃え */
    }
}


/* 左カラムの余白を調整 */
.col-md-6.col-sm-12 {
    margin: 0;  /* マージンをゼロに設定 */
    padding: 0; /* パディングをゼロに設定 */
}

.row {
    margin-left: 0;
    margin-right: 0;
}


.heading03 {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 26px;
    text-align: center;
    font-family: Arial, sans-serif; /* フォントを指定 */
    font-weight: 700; /* 太字に設定 */
    color: #ffffff; /* フォント色を青に設定 */
    text-transform: uppercase; /* 文字を大文字に */
    letter-spacing: 2px; /* 文字間隔を少し広げる */
    padding: 20px 0; /* 上下に余白を加える */
    
    /* グラデーション背景を追加 */
    background: linear-gradient(to right, rgba(0, 0, 255, 0.1), rgba(0, 0, 255, 0.5)); /* 薄めの青いグラデーション */
    width: 100%; /* コンテナ全体に適用 */
    height: auto; /* 高さはコンテンツに合わせる */
}

.heading03::before,
.heading03::after {
	content: '';
	width: 70px;
	height: 3px;
	background-color: #0000FF;
}
.heading03::after {
    content: '';
    width: 70px;
    height: 3px;
    background-color: #0000FF;
    margin-left: 20px; /* 左横ラインと同じ値に設定 */
}

.heading03::before {
    margin-right: 20px;
}

.heading03::after {
    margin-left: 20px;
}

/* スマホ向けのレスポンシブ調整 */
@media (max-width: 767px) {
    .heading03 {
        font-size: 20px; /* スマホではフォントサイズを小さく */
        padding: 15px 0; /* 上下の余白を少し小さく */
    }

    .heading03::before,
    .heading03::after {
        width: 50px; /* 横線の長さを短く */
        height: 2px; /* 横線の太さを少し細く */
        margin-right: 10px; /* 横線の間隔を縮める */
        margin-left: 10px; /* 横線の間隔を縮める */
    }
}

.name {
  background-color: #6a5acd; /* 背景色を青色に変更 */
  font-family: Arial, sans-serif; /* フォントを指定 */
  font-size: 20px; /* フォントサイズ */
  font-weight: 700; /* 太字に設定 */
  color: white; /* フォント色を白に設定 */
  text-align: left; /* 左寄せ */
  letter-spacing: 1px; /* 文字間隔を少し広げる */
  margin: 0 auto; /* 水平方向中央揃え */
  padding: 10px 20px; /* 上下に余白を加え、右側に20px余白 */
  width: 80%; /* 背景を幅80％に設定 */
  display: block; /* 横幅の指定を有効にするためにブロック要素にする */
}




.responsive-container {
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
}


 .responsive-table {
    width: 100%;
    max-width: 100%; /* PC画面で制限なし */
    margin: 0 auto;
    border-collapse: collapse;
}
@media (min-width: 768px) {
    .responsive-table {
        max-width: 800px; /* 必要なら固定幅を設定 */
    }
}


.responsive-table td {
    text-align: center;
    padding: 8px; /* セル内の余白調整 */
}

.container.mt-4 {
    background-color: rgba(0, 0, 0, 0.5);
    border-radius: 10px; /* 角丸 */
    padding-top: 20px;   /* 上部のパディング */
}
.text-white-setsumei {
	color: #fff; /* 文字色を白に設定 */
	background-color: rgba(0, 0, 0, 0.5);  /* セル背景を黒の80%透明に設定 */
	font-family: Arial, sans-serif; /* フォントを指定 */
	line-height: 1.6; /* 行間を設定 */
	padding: 10px; /* 内側の余白を設定 */
	margin: 0px auto 0 auto; /* 上に10pxの余白を設定し、左右中央揃え */
	width: 100%; /* 最大幅を100%に設定 */
	box-sizing: border-box; /* パディングとボーダーを含めてサイズを計算 */
}

.text-white-setsumei2 {
  color: #fff; /* 文字色を白に設定 */
  background-color: rgba(0, 0, 0, 0.5); /* セル背景を黒の80%透明に設定 */
  font-family: Arial, sans-serif; /* フォントを指定 */
  line-height: 2; /* 行間を設定（もう少し空ける） */
  text-align: left; /* 左寄せ */
  padding: 10px 20px 10px 100px; /* 内側の余白を設定 */
  margin: 0 auto; /* 中央揃え */
  width: 100%; /* 最大幅を100%に設定 */
  box-sizing: border-box; /* パディングとボーダーを含めてサイズを計算 */
}
/* スマホ対応（画面幅が768px以下の場合） */
@media (max-width: 768px) {
  .text-white-setsumei2 {
    padding-left: 20px; /* 左余白を小さくする */
    text-align: left; /* 左寄せを維持 */
  }
}
.zenkoku {
  display: flex;
  flex-direction: column; /* 縦方向に並べる */
  align-items: center; /* 水平方向に中央揃え */
	 background-color: rgba(0, 0, 0, 0.5); /* セル背景を黒の80%透明に設定 */
}

.zenkoku-img {
  max-width: 90%; /* 画像の横幅を制限 */
  height: auto; /* アスペクト比を維持 */
  margin: 0 auto; /* 画像を中央揃え */
  border: 2px solid #ccc; /* 枠線（オプション） */
  border-radius: 8px; /* 角を丸くする（オプション） */
	 background-color: rgba(0, 0, 0, 0.5); /* セル背景を黒の80%透明に設定 */
}

.play-guide-title {
  text-align: center; /* 中央揃え */
  padding: 10px 0; /* 上下に10pxの余白 */
  font-family: Arial, sans-serif; /* フォントを指定 */
  font-size: 1.5rem; /* 適切なサイズ */
  box-sizing: border-box; /* パディングとボーダーを含めてサイズを計算 */
  margin: 0; /* 余白を削除してテーブルに隙間を作らない */
  color: #fff; /* 文字色 */
  background: linear-gradient(to right, rgba(0, 0, 255, 0.1), rgba(0, 0, 255, 0.5)); /* 青のグラデーション */
  border-radius: 5px; /* タイトル背景に角丸を追加 */
  width: 100%; /* タイトルの幅をコンテナ全体に広げる */
}



.play-guide {
  font-size: 14px; /* フォントサイズ */
  font-family: Arial, sans-serif; /* フォント */
  font-weight: 700; /* 太字 */
  color: #ffffff; /* フォント色 */
  letter-spacing: 1px; /* 文字間隔 */
  padding: 10px 5%; /* 上下10px、左右5%の余白を設定 */
  background: linear-gradient(to right, rgba(0, 0, 255, 0.1), rgba(0, 0, 255, 0.5)); /* 背景のグラデーション */
  box-sizing: border-box; /* paddingを含む幅の計算 */
  margin: 0 auto; /* 左右中央揃え */
  text-align: center; /* テキストを中央揃え */
}

.play-guide table {
  width: 100%; /* テーブルが親要素内で広がる */
  border-collapse: collapse; /* セルの境界線を統一 */
}

.play-guide td {
  padding: 10px;
  border: 1px solid #ddd;
  background-color: #f9f9f9; /* デフォルトの背景色 */
  background-image: url('https://www.deri-studio-nude.com/site/table-back.png'); /* 背景画像を設定 */
  background-size: cover; /* 画像をセル全体に拡張 */
  background-repeat: no-repeat; /* 画像の繰り返しを防止 */
}

.play-guide .wide {
  width: 40%; /* 特定セルの幅を広げる */
}

.play-guide td:not(.wide) {
  width: 5%; /* 他のセルの幅を狭く設定 */
}

/* 特定列のスタイル */
.play-guide td:nth-child(2), 
.play-guide td:nth-child(4) {
  background-color: #000000; /* 黒背景 */
  color: #ffffff; /* 白文字 */
}

.play-guide h2 {
  font-size: 24px;
  margin: 0;
  text-align: center;
}

		/* サムネイルの親コンテナ */
.thumbnail-gallery {
    display: grid;
    grid-template-columns: repeat(5, minmax(130px, 1fr)); /* PC: 5列表示で幅を固定 */
    gap: 10px; /* 各サムネイル間の間隔 */
    justify-content: center; /* ギャラリー全体を中央揃え */
    padding: 20px; /* ギャラリー全体の余白 */
    max-width: 800px; /* ギャラリーの最大幅を制限 */
    margin: 0 auto; /* 中央寄せ */
}

/* サムネイル画像 */
.thumbnail-gallery a img {
    width: 130px; /* 固定幅 */
    height: 195px; /* 固定高さ */
    object-fit: cover; /* 枠内に画像を収める */
    border: 2px solid #6a5acd; /* 枠線をスレートブルーで設定 */
    border-radius: 5px; /* 角丸 */
}

/* モバイル (幅768px以下): 2列表示 */
@media screen and (max-width: 768px) {
    .thumbnail-gallery {
        grid-template-columns: repeat(2, 1fr); /* モバイル: 2列表示 */
        max-width: 100%; /* モバイルでは幅制限を解除 */
        padding: 10px; /* モバイルで余白を調整 */
    }
    .thumbnail-gallery a img {
        width: 100%; /* 画像をコンテナ幅に合わせる */
        height: auto; /* 高さ自動調整 */
    }
}




/* トップに戻るボタン */
.scroll-to-top {
  position: fixed;
  bottom: 20px; /* ボトムからの距離 */
  right: 20px; /* 右からの距離 */
  background-color: #6a5acd; /* ボタンの背景色 */
  color: white; /* ボタンの文字色 */
  border-radius: 50%; /* 丸いボタン */
  width: 50px; /* ボタンの幅 */
  height: 50px; /* ボタンの高さ */
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 24px; /* アイコンのサイズ */
  text-decoration: none; /* アンダーラインを削除 */
  opacity: 0.7; /* 少し透明にする */
  transition: opacity 0.3s ease; /* ホバー時の透明度変更 */
}

.scroll-to-top:hover {
  opacity: 1; /* ホバー時は透明度100% */
}
.back-to-girls {
  margin: 20px 0;
  font-size: 16px;
  text-align: center; /* ボタン内テキストを中央揃え */
  display: inline-block; /* ボタンのようなインラインブロックにする */
  padding: 10px 20px; /* 内側の余白でボタンサイズ調整 */
  border-radius: 5px; /* ボタンの角を丸くする */
  background: linear-gradient(to right, rgba(0, 0, 255, 0.1), rgba(0, 0, 255, 0.5)); /* 薄い青いグラデーション */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* ボタンにわずかな影を付ける */
}

.back-to-girls a {
  color: #007bff; /* リンクの文字色 */
  text-decoration: none; /* 下線を消す */
  font-weight: bold; /* 文字を強調 */
}

.back-to-girls:hover {
  background: linear-gradient(to right, rgba(0, 0, 255, 0.3), rgba(0, 0, 255, 0.7)); /* ホバー時のグラデーション濃度を変更 */
  box-shadow: 0 6px 8px rgba(0, 0, 0, 0.2); /* ホバー時の影を強調 */
}

.back-to-girls a:hover {
  text-decoration: underline; /* ホバー時に下線を追加 */
}

/*出勤表半透明　*/
.semi-transparent {
    background: linear-gradient(to right, rgba(0, 0, 255, 0.1), rgba(0, 0, 255, 0.5)); /* 薄めの青いグラデーション */
    border-radius: 10px; /* 角を丸くする（任意） */
    padding: 5px ; /* 内側の余白を設定（任意） */
  }

.container-gradient {
  background: linear-gradient(to right, rgba(0, 0, 255, 0.1), rgba(0, 0, 255, 0.5)); /* 薄めの青いグラデーション */
}

/* フッター */
footer {
  background-color: #6a5acd; /* 背景色を#6a5acd（スレートブルー）に変更 */
  color: white; /* 文字色を白に */
  padding: 20px 0; /* 上下のパディング */
  text-align: center; /* テキストを中央揃え */
}
footer {
    width: 100%;
    border-radius: 0; /* containerの角丸が影響しないように */
    margin-top: 10px;  /* フッターの位置調整 */
}