@charset "utf-8";
/* CSS Document */

/* ----------------------------------------------
   グローバルスタイル (ベースリセット)
---------------------------------------------- */

@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&family=Nunito:wght@400;700&display=swap");

/* グローバル変数 */
:root {
  --primary-color: linear-gradient(
    220deg,
    #018dcf,
    color-mix(in srgb, #018dcf 70%, white),
    #018dcf
  );
  --secondary-color: #000000;

  --primary-font-color: #000000;
  --secondary-font-color: #ffffff;

  --background-color: #ffffff;
  --background-grad-color: linear-gradient(to bottom, #d8f1fc, #0077be);

  --footer-font-color: #000000;
  --footer-bgcolor: #eeeeee;
  --footer-grd-bgcolor: linear-gradient(to bottom, #d8f1fc, #0077be);

  --base-color-insta: #f8e9ee;
  --base-color-line: #eefaf2;
  --base-color-reserve: #f8f4e9;
  --base-color-tel: #f3e9f8;
  --base-color-x: #ededed;

  --font-color-insta: #018dcf;
  --font-color-line: #3ac53a;
  --font-color-reserve: #ccc5b2;
  --font-color-tel: #cbaeda;
  --font-color-x: #989898;

  --f-color: #027fc9; /* ナビグラデーション カラー1 */
  --s-color: #018dcf; /* ナビグラデーション カラー2 */
}

ul {
  list-style: none;
}

/*===============================

   認証ページ

================================*/

.index {
  background-image: url("../x_imgs/common/back-header1.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: top center;
  position: fixed;
  top: 0;
  left: 0;
  z-index: -1;
  width: 100%;
  height: 100vh;
  overflow-y: auto;
  overflow-x: hidden;
}

img.index-logo {
  width: 80%;
  max-width: 600px;
  display: block;
  margin: 20px auto;
}

h2.index-page {
  margin: 0px auto;
  width: 98%;
  padding-top: 10px;
  font-size: 1rem;
  text-align: center;
  font-weight: bold;
  line-height: 2;
  color: black; /* 文字色 */
  text-shadow: -1px -1px 0 white, /* 左上 */ 1px -1px 0 white,
    /* 右上 */ -1px 1px 0 white, /* 左下 */ 1px 1px 0 white; /* 右下 */
}

.image-container {
  display: inline-block;
  position: relative;
}

.image-container img {
  display: block;
  transition: opacity 0.3s ease; /* 切り替え時のアニメーション */
}

.image-container img.hover-image {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
}

.image-container:hover img.default-image {
  opacity: 0;
}

.image-container:hover img.hover-image {
  opacity: 1;
}

/* 相互リンクバナー・ウィジェット用コンテナ */
.index_banner {
  width: 92%;
  max-width: 600px;
  display: block;
  margin: 3px auto; /* ご要望どおり 3px に */
  text-align: center;

  box-sizing: border-box;
  overflow: hidden; /* 中身が大きくても外には絶対はみ出さない */
}

/* 直下の子要素（img, iframe, table など）をコンテナ幅内に制限 */
.index_banner > * {
  display: block;
  max-width: 100% !important; /* テーブル系ウィジェットでも 98% から出さない */
  box-sizing: border-box;
}

/* 画像はコンテナ幅内で完全に収まる（等倍〜縮小のみ） */
.index_banner img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 0 auto;
}

.enter-leave {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  max-width: 600px;
  margin: 30px auto 0px auto;
}

.enter_leave__left,
.enter_leave__right {
  box-sizing: border-box;
  width: 50%;
  margin: 0;
  padding: 0;
  vertical-align: top; /* 上詰め */
}

.enter_leave__left img,
.enter_leave__right img {
  width: 100%;
}

a.leave {
  width: 80%;
  max-width: 300px;
  font-size: 1.4rem;
  display: block;
  margin: 35px auto;
  text-decoration: none;
  background: linear-gradient(to bottom, white, gray);
  color: #fff;
  padding: 8px;
  text-align: center;
  border-radius: 30px;
  border: 3px #eee solid;
  transition: background 2s ease; /* 背景の変更をゆっくり */
}

a.leave:hover {
  color: #000;
}

.concept {
  width: 95%;
  max-width: 600px;
  margin: 20px auto 0px auto;
  font-size: 0.6rem;
  text-align: center;
}

.concept h3 {
  color: var(--primary-color);
}

/* スマホ向けレイアウト */
@media screen and (max-width: 768px) {
  .index {
    background-image: url(../x_imgs/index/background-sp-0401.jpg);
    background-position: center center;
    background-size: cover; /* 背景画像を要素全体にフィットさせる */
    background-repeat: no-repeat; /* 背景画像の繰り返しを防ぐ */
  }

  h2.index-page {
    font-size: 0.8rem;
  }

  .enter_leave__left,
  .enter_leave__right {
    width: 80%;
    margin: 0 auto;
    padding: 0;
  }
}

/*===============================

パーツ

================================*/

a.btn_new {
  display: block;
  width: 95%;
  max-width: 600px;

  background: #66b93e;
  background-image: linear-gradient(
      45deg,
      rgba(255, 255, 255, 0.15) 25%,
      transparent 25%,
      transparent 75%,
      rgba(255, 255, 255, 0.15) 75%
    ),
    linear-gradient(
      -45deg,
      rgba(255, 255, 255, 0.15) 25%,
      transparent 25%,
      transparent 75%,
      rgba(255, 255, 255, 0.15) 75%
    );
  background-size: 20px 20px;

  color: #fff;
  text-decoration: none;
  font-size: 1.4rem;
  font-weight: bold;
  text-align: center;
  border: 2px #eee solid;
  margin: 30px auto 10px auto;
  padding: 10px;
  box-sizing: border-box;
  border-radius: 25px;
  box-shadow: 0 6px 10px rgba(0, 0, 0, 0.1);
}

a.btn_ranking {
  display: block;
  width: 95%;
  max-width: 600px;

  background: #ff3399;
  background-image: linear-gradient(
      45deg,
      rgba(255, 255, 255, 0.15) 25%,
      transparent 25%,
      transparent 75%,
      rgba(255, 255, 255, 0.15) 75%
    ),
    linear-gradient(
      -45deg,
      rgba(255, 255, 255, 0.15) 25%,
      transparent 25%,
      transparent 75%,
      rgba(255, 255, 255, 0.15) 75%
    );
  background-size: 20px 20px;

  color: #fff;
  text-decoration: none;
  font-size: 1.4rem;
  font-weight: bold;
  text-align: center;
  border: 2px #eee solid;
  margin: 30px auto 10px auto;
  padding: 10px;
  box-sizing: border-box;
  border-radius: 25px;
  box-shadow: 0 6px 10px rgba(0, 0, 0, 0.1);
}

/*===============================

見出し

================================*/

.img-tits {
  display: block;
  margin: 5px auto 20px auto;
  width: 80%;
  max-width: 300px;
}

.tits {
  margin: 20px auto;
  width: 98%;
  max-width: 500px;
  padding: 15px;
  text-align: center;
  border: 3px #000 solid;
  box-sizing: border-box;
}

.tits h2 {
  display: inline-block;
  font-size: 1rem;
  font-weight: bold;
}

.tit {
  width: 500px;
  margin: 40px auto;
}
.tit .heading {
  margin: 10px 0;
  font-size: 2rem;
  font-family: variex, sans-serif;
  font-weight: 300;
  font-style: normal;
}
.tit .wrapper {
  padding: 5px;
  text-align: center;
  border: 3px solid;
  border-top: none;
  width: 500px;
}
.tit .wrapper .caption {
  -ms-transform: translate(0, -50%);
  -webkit-transform: translate(0, -50%);
  transform: translate(0, -50%);
  overflow: hidden;
  margin: -5px -8px 0 -8px;
  position: absolute;
  width: 500px;
  font-size: 1rem;
  font-weight: bold;
}

.tit .wrapper .caption h2 {
  display: inline-block;
  font-size: 1rem;
  font-weight: bold;
}

.tit .wrapper .caption:before,
.tit .wrapper .caption:after {
  content: "";
  position: absolute;
  width: 100%;
  margin-top: -2px;
  border-top: 3px solid;
  top: 50%;
}
.tit .wrapper .caption:before {
  -ms-transform: translate(-100%, 0);
  -webkit-transform: translate(-100%, 0);
  transform: translate(-100%, 0);
  margin-left: -30px;
}
.tit .wrapper .caption:after {
  margin-left: 30px;
}
.tit-sub {
  width: 1150px;
  margin: auto;
  margin-top: 50px;
  padding: 5px 10px;
  box-shadow: 1px 1px 1px 1px rgba(170, 170, 170, 0.1);
}
.tit-sub .image {
  display: table-cell;
  vertical-align: middle;
}
.tit-sub .image img {
  width: 50px;
}
.tit-sub .text {
  display: table-cell;
  vertical-align: middle;
}
.tit-sub .text span {
  padding-left: 10px;
  font-size: 1.4rem;
  font-weight: bold;
}
.tit-other {
  width: 500px;
  margin: auto;
}
.tit-other .heading {
  margin: 10px 0;
  font-size: 1.8rem;
  font-weight: bold;
}
.tit-other .wrapper {
  padding: 5px;
  text-align: center;
  border: 3px solid;
  border-top: none;
  width: 500px;
}
.tit-other .wrapper .caption {
  -ms-transform: translate(0, -50%);
  -webkit-transform: translate(0, -50%);
  transform: translate(0, -50%);
  overflow: hidden;
  margin: -5px -8px 0 -8px;
  position: absolute;
  width: 516px;
  font-size: 1.4rem;
  font-family: variex, sans-serif;
  font-weight: 300;
  font-style: normal;
}
.tit-other .wrapper .caption:before,
.tit-other .wrapper .caption:after {
  content: "";
  position: absolute;
  width: 100%;
  margin-top: -2px;
  border-top: 3px solid;
  top: 50%;
}
.tit-other .wrapper .caption:before {
  -ms-transform: translate(-100%, 0);
  -webkit-transform: translate(-100%, 0);
  transform: translate(-100%, 0);
  margin-left: -30px;
}
.tit-other .wrapper .caption:after {
  margin-left: 30px;
}
@media screen and (max-width: 599px) {
  .tit {
    width: 316px;
    margin: 20px auto;
  }
  .tit .heading {
    margin: 10px 0;
    font-size: 1.6rem;
    font-family: variex, sans-serif;
    font-weight: 300;
    font-style: normal;
  }
  .tit .wrapper {
    padding: 5px;
    text-align: center;
    border: 3px solid;
    border-top: none;
    width: 300px;
  }
  .tit .wrapper .caption {
    -ms-transform: translate(0, -50%);
    -webkit-transform: translate(0, -50%);
    transform: translate(0, -50%);
    overflow: hidden;
    margin: -5px -8px 0 -8px;
    position: absolute;
    width: 300px;
    font-size: 0.9rem;
    font-weight: bold;
  }
  .tit .wrapper .caption:before,
  .tit .wrapper .caption:after {
    content: "";
    position: absolute;
    width: 100%;
    margin-top: -2px;
    border-top: 3px solid;
    top: 50%;
  }
  .tit .wrapper .caption:before {
    -ms-transform: translate(-100%, 0);
    -webkit-transform: translate(-100%, 0);
    transform: translate(-100%, 0);
    margin-left: -10px;
  }
  .tit .wrapper .caption:after {
    margin-left: 10px;
  }
  .tit-sub {
    width: 100%;
    margin-top: 10px;
    padding: 0px;
    box-shadow: 1px 1px 1px 1px rgba(170, 170, 170, 0.1);
  }
  .tit-sub .image {
    display: table-cell;
    vertical-align: middle;
  }
  .tit-sub .image img {
    width: 50px;
  }
  .tit-sub .text {
    display: table-cell;
    vertical-align: middle;
  }
  .tit-sub .text span {
    padding-left: 10px;
    font-size: 1.4rem;
    font-weight: bold;
  }
  .tit-other {
    width: 316px;
    margin: auto;
  }
  .tit-other .heading {
    margin: 10px 0;
    font-size: 1.4rem;
    font-weight: bold;
  }
  .tit-other .wrapper {
    padding: 5px;
    text-align: center;
    border: 3px solid;
    border-top: none;
    width: 300px;
  }
  .tit-other .wrapper .caption {
    -ms-transform: translate(0, -50%);
    -webkit-transform: translate(0, -50%);
    transform: translate(0, -50%);
    overflow: hidden;
    margin: -5px -8px 0 -8px;
    position: absolute;
    width: 316px;
    font-size: 0.9rem;
    font-weight: bold;
  }
  .tit-other .wrapper .caption:before,
  .tit-other .wrapper .caption:after {
    content: "";
    position: absolute;
    width: 100%;
    margin-top: -2px;
    border-top: 3px solid;
    top: 50%;
  }
  .tit-other .wrapper .caption:before {
    -ms-transform: translate(-100%, 0);
    -webkit-transform: translate(-100%, 0);
    transform: translate(-100%, 0);
    margin-left: -10px;
  }
  .tit-other .wrapper .caption:after {
    margin-left: 10px;
  }
}

/*===============================

料金システム

================================*/
.system {
  padding: 100px 0;
  background: #fff;
}
.credit {
  width: 400px;
  margin: auto;
  padding-top: 50px;
}
.play-bg {
  padding: 150px 0 100px 0;
}

.option-bg {
  padding: 150px 0 100px 0;
  background: #ffd7ed;
}
.option {
  width: auto;
  margin: auto;
  padding: 50px 10px;
}
.option span {
  display: block;
  padding: 5px;
  margin: 6px 3px;
  background: #000;
  color: #fff;
  border-radius: 8px;
}
.option video {
  display: block;
  width: 200px;
  height: 200px;
  border-radius: 200px;
  object-fit: cover;
  margin: 0 0 10px;
}
.option img {
  width: 200px;
  border-radius: 200px;
  margin: 0 0 10px;
}
.option ul {
  text-align: center;
  padding: 0;
  margin: 0;
  list-style: none;
}
.option li {
  display: inline-block;
  text-align: center;
  padding: 7px;
  vertical-align: top;
  border: none;
  font-size: 1.2rem;
  font-weight: bold;
}
.option-price {
  width: 320px;
  margin: auto;
  margin-bottom: -25px;
  padding-top: 50px;
  text-align: center;
}
.option-price h2 {
  position: relative;
  display: inline-block;
  padding: 0 55px;
  font-size: 1.5rem;
}
.option-price h2:before,
.option-price h2:after {
  content: "";
  position: absolute;
  top: 50%;
  display: inline-block;
  width: 45px;
  height: 1px;
  background-color: black;
}
.option-price h2:before {
  left: 0;
}
.option-price h2:after {
  right: 0;
}
.option-list {
  display: flex;
  justify-content: center;
}
.option-list .inner {
  display: table-cell;
}
.area {
  width: 1200px;
  margin: auto;
  padding: 0;
}
.area ul {
  display: flex;
  flex-wrap: wrap;
}
.area li {
  width: 48%;
  margin: auto;
}
.area .text {
  padding: 20px 10px;
  text-align: center;
  line-height: 2;
}
.area .text a {
  display: block;
  width: 240px;
  margin: auto;
  margin-top: 10px;
  margin-bottom: 10px;
  padding: 10px;
  border-radius: 5px;
  background: rgb(205, 0, 0);
  background: linear-gradient(
    0deg,
    rgba(205, 0, 0, 1) 0%,
    rgba(241, 51, 16, 1) 100%
  );
  color: #ff0;
  font-weight: bold;
  font-size: 1.6rem;
}
.area .text a small {
  display: block;
  margin-top: -15px;
  color: #fff;
  font-size: 0.9rem;
  text-decoration: none;
}
.area .box {
  display: flex;
  flex-wrap: wrap;
  padding-top: 50px;
}
.area .left {
  width: 520px;
}
.area .left img {
  width: 500px;
}
.area .right {
  width: 680px;
  padding-top: 20px;
}
.area-01 {
  width: 98%;
  margin: auto;
  margin-bottom: 15px;
  background: -moz-linear-gradient(top left, #ff87ff, #ff00ff);
  background: -webkit-linear-gradient(top left, #ff87ff, #ff00ff);
  background: linear-gradient(to bottom right, #ff87ff, #ff00ff);
  border-radius: 50px 3px;
  box-shadow: 1px 2px 5px #ccc;
}
.area-01 .inner {
  padding: 25px;
  font-weight: 600;
  line-height: 1.8;
}
.area-01 strong {
  display: block;
  color: #ff0;
  font-size: 1.3rem;
  font-weight: bold;
}
.area-01 span {
  font-size: 1.1rem;
}
.area-02 {
  margin-bottom: 15px;
  background: -moz-linear-gradient(top left, #79ffff, #00ffff);
  background: -webkit-linear-gradient(top left, #79ffff, #00ffff);
  background: linear-gradient(to bottom right, #79ffff, #00ffff);
  border-radius: 50px 3px;
  box-shadow: 1px 2px 5px #ccc;
}
.area-02 p {
  padding: 25px;
  font-weight: 600;
  line-height: 1.8;
}
.area-02 span {
  font-size: 1.1rem;
}
.area-03 {
  margin-bottom: 15px;
  background: -moz-linear-gradient(top left, #ffff8e, #ff0);
  background: -webkit-linear-gradient(top left, #ffff8e, #ff0);
  background: linear-gradient(to bottom right, #ffff8e, #ff0);
  border-radius: 50px 3px;
  box-shadow: 1px 2px 5px #ccc;
}
.area-03 p {
  padding: 25px;
  font-weight: 600;
  line-height: 1.8;
}
.area-03 span {
  font-size: 1.1rem;
}
.area-04 {
  margin-bottom: 15px;
  background: -moz-linear-gradient(top left, #83ff83, #00ff00);
  background: -webkit-linear-gradient(top left, #83ff83, #00ff00);
  background: linear-gradient(to bottom right, #83ff83, #00ff00);
  border-radius: 50px 3px;
  box-shadow: 1px 2px 5px #ccc;
}
.area-04 p {
  padding: 25px;
  font-weight: 600;
  line-height: 1.8;
}
.area-04 span {
  font-size: 1.1rem;
}
.area-05 {
  margin-bottom: 15px;
  background: rgb(195, 122, 47);
  background: linear-gradient(
    0deg,
    rgba(195, 122, 47, 1) 0%,
    rgba(228, 176, 58, 1) 100%
  );
  border-radius: 50px 3px;
  box-shadow: 1px 2px 5px #ccc;
}
.area-05 p {
  padding: 25px;
  font-weight: 600;
  line-height: 1.8;
}
.area-05 span {
  font-size: 1.1rem;
}
.area-06 {
  margin-bottom: 15px;
  background: rgb(255, 255, 255);
  background: linear-gradient(
    0deg,
    rgba(240, 240, 240, 1) 0%,
    rgba(255, 255, 255, 1) 100%
  );
  border-radius: 50px 3px;
  box-shadow: 1px 2px 5px #ccc;
}
.area-06 p {
  padding: 25px;
  font-weight: 600;
  line-height: 1.8;
}
.area-06 span {
  font-size: 1.1rem;
}

@media screen and (max-width: 599px) {
  .system {
    padding: 50px 0 0;
    background: #fff;
  }
  .credit {
    width: auto;
    margin: auto;
    margin-top: -5px;
    padding: 0 10px;
  }
  .play-bg {
    padding: 50px 0;
  }
  .option-bg {
    padding: 50px 0;
    background: #ffd7ed;
  }
  .option {
    width: auto;
    margin: auto;
    padding: 20px 0 10px;
  }
  .option video {
    display: block;
    width: 110px;
    height: 110px;
    border-radius: 110px;
    object-fit: cover;
    margin: auto;
  }
  .option img {
    width: 110px;
    border-radius: 110px;
    margin: auto;
  }
  .option ul {
    display: flex;
    flex-wrap: wrap;
    text-align: center;
  }
  .option li {
    width: calc(100% / 3);
    margin: auto;
    padding: 0 0 5px;
    vertical-align: top;
    border: none;
    font-size: 0.9rem;
    font-weight: bold;
    text-align: center;
  }
  .option span {
    display: block;
    padding: 5px;
    margin: 6px 3px;
    background: #000;
    color: #fff;
    border-radius: 8px;
  }
  .option-price {
    width: 320px;
    margin: auto;
    margin-bottom: -15px;
    padding-top: 20px;
    text-align: center;
  }
  .option-price h2 {
    position: relative;
    display: inline-block;
    padding: 0 55px;
    font-size: 1.5rem;
  }
  .option-price h2:before,
  .option-price h2:after {
    content: "";
    position: absolute;
    top: 50%;
    display: inline-block;
    width: 45px;
    height: 1px;
    background-color: black;
  }
  .option-price h2:before {
    left: 0;
  }
  .option-price h2:after {
    right: 0;
  }
  .option-list {
    display: block;
    justify-content: center;
  }
  .option-list .inner {
    display: block;
  }
  .price {
    width: 100%;
    margin-top: 13px;
    background: #fff;
  }
  .price .image {
    width: 100%;
  }
  .area {
    width: 100%;
    margin: auto;
    padding: 40px 0;
  }
  .area .box {
    display: flex;
    padding-top: 10px;
  }
  .area .left {
    width: 95%;
    margin: auto;
    margin-top: -20px;
  }
  .area .left img {
    width: 100%;
  }
  .area .right {
    width: 98%;
    margin: auto;
    padding-top: 0px;
  }
  .area-01 {
    margin-bottom: 15px;
    background: -moz-linear-gradient(top left, #ff87ff, #ff00ff);
    background: -webkit-linear-gradient(top left, #ff87ff, #ff00ff);
    background: linear-gradient(to bottom right, #ff87ff, #ff00ff);
    border-radius: 20px 3px;
    box-shadow: 1px 2px 5px #ccc;
  }
  .area-01 .inner {
    padding: 10px 10px;
    font-weight: 600;
    font-size: 0.9rem;
    line-height: 1.5;
  }
  .area-01 strong {
    display: block;
    margin-bottom: 10px;
    color: #ff0;
    font-size: 1rem;
    font-weight: bold;
    line-height: 1.2;
  }
  .area-01 span {
    font-size: 1rem;
  }
  .area-02 {
    margin-bottom: 15px;
    background: -moz-linear-gradient(top left, #79ffff, #00ffff);
    background: -webkit-linear-gradient(top left, #79ffff, #00ffff);
    background: linear-gradient(to bottom right, #79ffff, #00ffff);
    border-radius: 20px 3px;
    box-shadow: 1px 2px 5px #ccc;
  }
  .area-02 p {
    padding: 10px 10px;
    font-weight: 600;
    font-size: 0.8rem;
    line-height: 1.8;
  }
  .area-02 span {
    font-size: 1rem;
  }
  .area-03 {
    margin-bottom: 15px;
    background: -moz-linear-gradient(top left, #ffff8e, #ff0);
    background: -webkit-linear-gradient(top left, #ffff8e, #ff0);
    background: linear-gradient(to bottom right, #ffff8e, #ff0);
    border-radius: 20px 3px;
    box-shadow: 1px 2px 5px #ccc;
  }
  .area-03 p {
    padding: 10px 10px;
    font-weight: 600;
    font-size: 0.8rem;
    line-height: 1.8;
  }
  .area-03 span {
    font-size: 1rem;
  }
  .area-04 {
    margin-bottom: 15px;
    background: -moz-linear-gradient(top left, #83ff83, #00ff00);
    background: -webkit-linear-gradient(top left, #83ff83, #00ff00);
    background: linear-gradient(to bottom right, #83ff83, #00ff00);
    border-radius: 20px 3px;
    box-shadow: 1px 2px 5px #ccc;
  }
  .area-04 p {
    padding: 10px 10px;
    font-weight: 600;
    font-size: 0.8rem;
    line-height: 1.8;
  }
  .area-04 span {
    font-size: 1rem;
  }
  .area-05 {
    margin-bottom: 15px;
    background: rgb(195, 122, 47);
    background: linear-gradient(
      0deg,
      rgba(195, 122, 47, 1) 0%,
      rgba(228, 176, 58, 1) 100%
    );
    border-radius: 20px 3px;
    box-shadow: 1px 2px 5px #ccc;
  }
  .area-05 p {
    padding: 10px 10px;
    font-weight: 600;
    font-size: 0.8rem;
    line-height: 1.8;
  }
  .area-05 span {
    font-size: 1rem;
  }
  .area-06 {
    margin-bottom: 15px;
    background: rgb(255, 255, 255);
    background: linear-gradient(
      0deg,
      rgba(240, 240, 240, 1) 0%,
      rgba(255, 255, 255, 1) 100%
    );
    border-radius: 20px 3px;
    box-shadow: 1px 2px 5px #ccc;
  }
  .area-06 p {
    padding: 10px 10px;
    font-weight: 600;
    font-size: 0.8rem;
    line-height: 1.8;
  }
  .area-06 span {
    font-size: 1rem;
  }
}

.opm {
  padding: 10px 0;
  background: #fff;
}
.opm ul {
  display: flex;
  flex-wrap: wrap;
}
.opm li {
  width: calc(100% / 3);
}
.opm .text {
  padding: 10px;
  font-weight: bold;
  text-align: center;
  line-height: 2;
}
.opm .text span {
  color: #f00;
  font-size: 1.2rem;
}
.opm .image {
  width: 95%;
  max-width: 1200px;
  margin: 0px auto;
  display: block;
}
.opm .point {
  width: 95%;

  margin: auto;
  padding: 10px;
}
.opm .example {
  width: 95%;
  margin: 0px auto;
  padding: 20px 0;
}
.opm .point .box {
  position: relative;
  margin: 10px;
}
.opm .point .box_inner {
  padding: 20px;
  font-size: 1.2rem;
  line-height: 1.5;
}
.opm .point .box_inner img {
  float: left;
  width: 60px;
  margin-top: 10px;
}
.opm .point .box:before,
.opm .point .box:after {
  content: "";
  width: 4em;
  height: 4em;
  position: absolute;
}
.opm .point .box::before {
  border-top: 2px solid #7584e2;
  border-left: 2px solid #7584e2;
}
.opm .point .box::after {
  border-bottom: 2px solid #7584e2;
  border-right: 2px solid #7584e2;
  right: 0;
  bottom: 0;
}
.opm .point .box h3 {
  margin-top: -10px;
  font-size: 1.6rem;
}
.opm .point .box h3:first-letter {
  font-size: 2.2em;
  color: #7584e2;
}
.opm .point .box span {
  background: linear-gradient(transparent 60%, #ff0 60%);
}
.opm_guide {
  width: 95%;
  max-width: 1200px;
  margin: auto;
}
.opm_guide .box {
  position: relative;
  margin: 2em 0;
  padding: 0.5em 1em;
  border: solid 3px #fd7abc;
  border-radius: 8px;
}
.opm_guide .box .title {
  position: absolute;
  display: inline-block;
  top: -13px;
  left: 10px;
  padding: 0 10px;
  line-height: 1;
  font-size: 2rem;
  background: #fff;
  color: #fd7abc;
  font-family: vdl-logomaru, sans-serif;
  font-weight: 400;
  font-style: normal;
}
.opm_guide .box p {
  padding: 30px 7px 10px;
  font-size: 1.1rem;
  font-weight: bold;
  line-height: 2;
}
.opm_tel {
  width: 400px;
  margin: auto;
  padding-bottom: 20px;
  font-size: 1.2rem;
  font-weight: bold;
}
.opm_tel i {
  font-size: 1.5rem;
}
@media screen and (max-width: 599px) {
  .opm {
    padding: 0;
  }
  .opm ul {
    padding-bottom: 20px;
  }
  .opm li {
    width: calc(100% / 1);
  }
  .opm .text {
    padding: 10px;
    font-size: 0.9rem;
    font-weight: bold;
    text-align: center;
    line-height: 1.5;
  }
  .opm .image {
    width: 100%;
  }
  .opm .point {
    width: auto;
    margin: auto;
    padding: 10px;
  }
  .opm .example {
    width: auto;
    margin: auto;
    padding: 10px;
  }
  .opm .point .box {
    position: relative;
    margin: 10px 10px 0 10px;
  }
  .opm .point .box_inner {
    padding: 15px 10px;
    font-size: 1rem;
    line-height: 1.4;
  }
  .opm_guide {
    width: auto;
    margin: auto;
    margin-top: 40px;
    padding: 0 10px;
  }
  .opm_guide .box {
    position: relative;
    margin: 1em 0;
    padding: 0.5em 1em;
    border: solid 3px #fd7abc;
    border-radius: 8px;
  }
  .opm_guide .box .title {
    position: absolute;
    display: inline-block;
    top: -13px;
    left: 10px;
    padding: 0 12px;
    line-height: 1;
    font-size: 1.5rem;
    background: #fff;
    color: #fd7abc;
    font-family: vdl-logomaru, sans-serif;
    font-weight: 400;
    font-style: normal;
  }
  .opm_guide .box p {
    padding: 20px 7px 10px;
    font-size: 0.8rem;
    font-weight: bold;
    line-height: 1.8;
  }
  .opm_tel {
    width: 300px;
    margin: auto;
    padding-bottom: 20px;
    font-size: 1rem;
    font-weight: bold;
  }
  .opm_tel i {
    font-size: 1.3rem;
  }
}

*
  ----------------------------------------------
  女性一覧
  パターンA
  ----------------------------------------------
  */
  .staff-wrapper {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0px; /* 左右に均等な余白 */
  box-sizing: border-box;
}

.staff-list {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px; /* 子要素間のスペースを均等に */
  justify-content: flex-start;
  width: 100%;
  max-width: 1160px;
  box-sizing: border-box;
  font-size: 0.9rem;
}

.staff-list li {
  flex: 1 0 calc(20% - 6px); /* スペースを調整 */
  max-width: calc(20% - 6px);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  border: 1px solid #ccc;
  color: #fff;
  overflow: hidden;
  padding: 0px;
  /*
	background: #ff3399;
	background-image: 
	  linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 75%, rgba(255, 255, 255, 0.15) 75%),
	  linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 75%, rgba(255, 255, 255, 0.15) 75%);
	background-size: 20px 20px;
*/

  background-image: url("../x_imgs/common/waku-base.png");
  background-size: cover; /* 要素全体にフィット */
  background-position: center; /* 画像の中央を表示 */
  background-repeat: no-repeat; /* 繰り返しなし */

  transition: transform 0.3s ease;
  box-sizing: border-box;
  border-radius: 6px;
  box-shadow: 0 6px 10px rgba(0, 0, 0, 0.1);
  position: relative;
}

.staff-list li.new {
  background-image: url("../x_imgs/common/waku-new.jpg");
  background-size: cover; /* 要素全体にフィット */
  background-position: center; /* 画像の中央を表示 */
  background-repeat: no-repeat; /* 繰り返しなし */
  /*
	background: #66b93e;
	background-image: 
	  linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 75%, rgba(255, 255, 255, 0.15) 75%),
	  linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 75%, rgba(255, 255, 255, 0.15) 75%);
	background-size: 20px 20px;
*/
}

/* ===========================
   SPのみ：ランキング1位を中央50%
   =========================== */
@media screen and (max-width: 768px) {
  .staff-list {
    justify-content: center;
  }

  .staff-list li.rank-top {
    flex: 0 0 75%;
    max-width: 75%;
  }
}

.staff-list li a {
  text-decoration: none;
}

.staff-list li .images {
  position: relative;
  width: 100%;
  height: auto;
  margin: -12px auto 0 auto;
}

.staff-list li .images img {
  width: 100%;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
}

/* 小さな画像の共通スタイル（imgタグ用に変更） */
.staff-list li .images img.staff-badge {
  position: absolute;
  width: 45px; /* 小さな画像のサイズ */
  height: auto;
}

/* 新人マークの場合 */
.staff-list li .images img.staff-badge.newface {
  width: 45px !important;
  margin-left: 5px;
  transform: rotate(-10deg); /* ← 左に10度傾ける */
}

/* ランキングの場合 */
.staff-list li .images img.staff-badge.ranker {
  width: 80px !important;
  transform: rotate(-10deg); /* ← 左に10度傾ける */
}

/* 左上に配置 */
.staff-list li .images img.staff-badge.top-left {
  top: 4px;
  left: 2px;
  width: 70px;
  height: auto;
}

/* 右上に配置 */
.staff-list li .images img.staff-badge.top-right {
  top: 2px;
  right: 2px;
  width: 60px;
  height: auto;
  transform: rotate(10deg);
}

/* 右下エリアをアイコン用のコンテナにする */
.staff-list li .images .staff-badge-container {
  position: absolute;
  bottom: 3px;
  right: 3px;
  display: flex; /* 横並びにする */
  gap: 3px; /* アイコン間の隙間 */
}

/* 右下に配置される小さなアイコン */
.staff-list li .images .staff-badge-container img.staff-badge {
  position: static; /* 親の.flexの影響を受けるため static にする */
}

/* 左下エリアをアイコン用のコンテナにする */
.staff-list li .images .staff-badge-container-left {
  position: absolute;
  bottom: 3px;
  left: 3px;
  display: flex; /* 横並び */
  gap: 3px; /* アイコン間の隙間 */
}

/* 左下アイコン共通：位置は static のままでOK */
.staff-list li .images .staff-badge-container-left img.staff-badge {
  position: static;
}

.staff-list li .top {
  color: #ff0;
  font-weight: bold;
  padding: 6px 0;
}

.staff-list li .bottom {
  width: 100%;
  font-size: 0.8rem;
}

.staff-list li .centers {
  width: 100%;
  font-size: 0.8rem;
  text-align: center;
}

.staff-list li .centers p {
  width: 46%;
  margin: 0.5%;
  border: 1px #fff solid;
  display: inline-block;
  padding: 3px;
}

p.t1 {
  background: #e83db0;
  display: inline-block;
}
p.t2 {
  background: #1cccdf;
  display: inline-block;
}
p.t3 {
  background: #fbbe3e;
  display: inline-block;
}
p.t4 {
  background: #9dd310;
  display: inline-block;
}
p.t5 {
  background: #9d56a4;
  display: inline-block;
}
p.t6 {
  background: #fe9cb0;
  display: inline-block;
}
p.t7 {
  background: #bea57c;
  display: inline-block;
}
p.t8 {
  background: #9000d4;
  display: inline-block;
}
p.t9 {
  background: #27dc9d;
  display: inline-block;
}
p.t10 {
  background: #0f0f0f;
  display: inline-block;
}
p.t11 {
  background: #dcdfde;
  color: #000;
  display: inline-block;
}

.prof_top p {
  width: 46%;
  margin: 0.5%;
  border: 1px #fff solid;
  display: inline-block;
  padding: 3px;
}

.prof_img {
  width: 100%;
  margin: 5px auto -5px auto;
}

.prof_img img {
  width: 150px;
  display: block;
  margin: 0px auto;
}

.staff-list li .bottom p.catch {
  width: 100%;
  display: block;
  margin: 5px 0;
  padding: 5px 0 0 0;
  background: #fff;
  color: #008ff0;
  font-weight: bold;
}

.staff-list li .bottom p.name {
  width: 100%;
  margin: 0;
  padding: 2px 0 1px 0;
}

.staff-list li .bottom p.name2 {
  width: 100%;
  margin: 0;
  padding: 2px 0 1px 0;
}

.staff-list li .bottom p.size {
  width: 100%;
  margin: 0;
  padding: 2px 0 3px 0;
  font-weight: bold;
}

.staff-list li .bottom p.time {
  width: 100%;
  margin: -5px 0 0 0;
  padding: 6px 0 8px 0;
  color: #7effff;
  font-weight: bold;
  background: #000;
  font-size: 1rem;
}

.staff-list li.new .bottom p.catch {
  color: #67a259;
}

.staff-list li.new .bottom p.time {
  color: #eefbeb;
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
  .staff-list li {
    flex: 1 0 calc(50% - 4px); /* スペースを調整 */
    max-width: calc(50% - 4px);
    box-sizing: border-box;
  }
}

/*===============================

プロフィール

================================*/

.prof-name {
  margin: 0px auto 0px auto;
  color: #fff;
}

.prof-container.photos {
  /*
	background: #ff3399;
	background-image: 
	  linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 75%, rgba(255, 255, 255, 0.15) 75%),
	  linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 75%, rgba(255, 255, 255, 0.15) 75%);
	background-size: 20px 20px;
*/

  background-image: url("../x_imgs/common/back-header4.jpg");
  background-size: cover; /* 要素全体にフィット */
  background-position: center; /* 画像の中央を表示 */
  background-repeat: no-repeat; /* 繰り返しなし */

  border: 2px #eee solid;
  margin: 5px auto 20px auto;
  padding: 10px 20px 20px 0px;
  box-sizing: border-box;
  border-radius: 6px;
  box-shadow: 0 6px 10px rgba(0, 0, 0, 0.1);
}

.prof__right-block {
  background: linear-gradient(80deg, #fefaf4 0%, #e1eff7 100%);
  background-size: 100% auto;
  margin-top: 20px;
  border-radius: 6px;
  box-shadow: 0 6px 10px rgba(0, 0, 0, 0.1);
}

.prof__one-block {
  border-radius: 6px;
  background: linear-gradient(80deg, #e1eff7 0%, #fefaf4 100%);
  background-size: 100% auto;
  border: 1px #eee solid;
  box-shadow: 0 6px 10px rgba(0, 0, 0, 0.1);
  margin-bottom: 15px;
}

@media screen and (max-width: 768px) {
  .prof-container.photos {
    width: 97%;
    padding: 0px 0px 15px 0px;
  }

  .prof__right-block {
    display: block;
    width: 96% !important;
    margin: 0px auto;
    margin-bottom: 6px !important;
  }
  .prof__one-block {
    margin-bottom: 14px;
  }
}

/* =========================================================
 * 濃い背景・写真背景でも読める万能白文字
 * どの要素にも class="w-font" で適用可能
 * ========================================================= */
.w-font {
  color: #ffffff !important;
  text-shadow: 0 0 8px rgba(0, 0, 0, 0.6),
    /* 後ろに黒ぼかし → 背景に埋もれない */ 0 2px 5px rgba(0, 0, 0, 0.5),
    /* 下方向の影 → 文字が立体に見える */ 0 0 3px rgba(255, 255, 255, 0.8); /* 白反射光 → 明るい部分でもクッキリ */
}