@charset "UTF-8";

body {
    font-family: "Noto Sans JP", "ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","メイリオ","Meiryo","Osaka","ＭＳ Ｐゴシック", "MS P Gothic",Verdana,Arial, Helvetica, sans-serif;
    color: #222222;
    margin:0;
}

#body-wrap {
    overflow: hidden;
    //margin-top: -6px;
    background-color: #f2f0eb;
    //font-size:13px;
}

.sp-content {
    display: inline-block !important;
    width: 100%;
}
table {
	margin: 0;
	padding: 0;
	width: 100%;
}
tr,th,td {
	padding:.5em;
	text-align:center;
	border: 1px solid #cccccc;
}
th {
	background-color: #3598db;
	color:#fff;
	font-weight:bold;
}

/*アンカーリンク*/

html {
  scroll-behavior: auto;
}

section {
  scroll-margin-top: 10px;
}

#body-wrap{margin-top: -6px;}


.top_img,.illust_img{
  text-align:center;
}
.top_img img{
  width:100%;
  max-width:800px;
  vertical-align:top;
}

.illust_img{
  padding:.5em;
}

.illust_img img{
  width:100%;
  max-width:750px;
  vertical-align:top;
}



/* menu_oppp */
.menu_oppp {
  display: flex;
  justify-content: space-around;
  background-color: black;
  margin-bottom: .5em;
  border-top: 1px solid #333333;
}
.menu_oppp div {
  flex: 1;
  font-size: 13px;
  padding: 10px 0; /* 高さを確保するためにpaddingを調整 */
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: 3px solid transparent;
  //border-right: 1px solid #ccc;
  position: relative;
  height: 2em; /* 高さを固定 */
}
.menu_oppp div:last-child {
  border-right: none;
}
.menu_oppp div.selected {
  border-bottom: 4px solid #ffc335;
}
.menu_oppp div a {
  color: white;
  text-decoration: none; /* リンクの下線を消す */
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: black; /* 初期背景色を黒に設定 */
  transition: background-color 0.5s; /* 背景色の変化をスムーズにする */
}
.menu_oppp div a:hover {
  background-color: rgba(255, 255, 255, 0.13); /* マウスオーバーで少し白っぽくする */
}
/* menu */



/* button */

.exc_btn_R{display: flex;justify-content: flex-end;margin: .7em .7em .5em 0;}
.exc_btn_R a{text-decoration: none;}

.button-001 {
    display: flex;
    justify-content: center;
    align-items: center;
    margin:0 auto;
    padding: 0.8em 1.1em;
    border: 1px solid #595959;
    border-radius: 24px;
    background-color: #f2f2f2;
    color: #333333;
    font-size: 0.8em;
}

.button-001::after {
	transform: rotate(135deg);
    width: 5px;
    height: 5px;
    margin-left: 10px;
    border-top: 2px solid #595959;
    border-right: 2px solid #595959;
    content: '';
}

.button-002 {
    display: flex;
    justify-content: center;
    align-items: center;
    margin:0 auto;
    padding: 0.8em 1.6em;
    border: 1px solid #6b32c7;
    border-radius: 21px;
    background-color: #6b32c7;
    color: #ffffff;
    font-size: 0.8em;
}

.button-002::after {
	transform: rotate(45deg);
    width: 5px;
    height: 5px;
    margin-left: 10px;
    border-top: 2px solid #ffffff;
    border-right: 2px solid #ffffff;
    content: '';
}

.button-003 {
    display: flex;
    justify-content: center;
    align-items: center;
    margin:0 auto;
    padding: 0.5em 1em;
    //padding: 0.8em 1.6em;
    border: 1px solid #6b32c7;
    border-radius: 21px;
    background-color: #6b32c7;
    color: #ffffff;
    font-size: 0.8em;
	text-decoration: none;
}
/*
.button-003::after {
	background: url(../images/popup.png);
	display: inline-block;
	background-size: contain;
    width: 10px;
    height: 10px;
    margin-left: 10px;
    content: '';
}
*/


.button_list{
  display:flex;
  justify-content: center;
  flex-wrap: wrap;
}
.button_list a{text-decoration: none;}
.button_list button{//flex: 1;}


/* 各ボタンの色を設定 */
.button-diamond {background-color:#ff4ab5;border-color:#ff4ab5;margin:.5em;}
.button-platinum {background-color:#01c0b9;border-color:#01c0b9;margin:.5em;}
.button-gold {background-color: #b29e01;border-color: #b29e01;margin:.5em;}
.button-silver {background-color:#486bff;border-color:#486bff;margin:.5em;}
.button-bronze {background-color:#da3c3d;border-color:#da3c3d;margin:.5em;}

.button-blk {background-color:#2c2c2c;border-color:#2c2c2c;margin:.5em;font-size:.7em;}
.button-blk.single{
  width:16em;
  display: flex;
  justify-content: center;
  align-items: center;
}
.button-blk.single div{flex: 1;}
.button-blk.single div.ico_right{display: contents;}

.css_ico_blank {
  display: inline-block;
  vertical-align: middle;
  color: #fff;
  line-height: 1;
  width: 0.9em;
  height: 0.9em;
  border: 0.1em solid currentColor;
  border-radius: 0.1em;
  //background: #6b32c7;
  box-sizing: content-box;
  position: relative;
  margin-left: .5em;
}

.css_ico_blank > span {
  position: absolute;
  top: -0.2em;
  right: -0.2em;
  width: 45%;
  height: 45%;
  border: 0.1em solid currentColor;
  border-bottom: 0;
  border-left: 0;
  //background: #6b32c7;
  //box-shadow: -0.1em 0.1em 0 0.1em #6b32c7;
  box-sizing: border-box;
}

.css_ico_blank > span::before {
  content: '';
  position: absolute;
  top: -0.05em;
  right: -0.1em;
  width: 0.1em;
  height: 0.9em;
  background: currentColor;
  transform: rotate(45deg);
  transform-origin: top center;
}

/* 各ボタンの色を設定 */
.button-diamond .css_ico_blank,
.button-diamond .css_ico_blank > span {
  background: #ff4ab5; /* ダイヤモンドの色 */
  box-shadow: -0.1em 0.1em 0 0.1em #ff4ab5;
}

.button-platinum .css_ico_blank,
.button-platinum .css_ico_blank > span {
  background: #01c0b9; /* プラチナの色 */
  box-shadow: -0.1em 0.1em 0 0.1em #01c0b9;
}

.button-gold .css_ico_blank,
.button-gold .css_ico_blank > span {
  background: #b29e01; /* ゴールドの色 */
  box-shadow: -0.1em 0.1em 0 0.1em #b29e01;
}

.button-silver .css_ico_blank,
.button-silver .css_ico_blank > span {
  background: #486bff; /* シルバーの色 */
  box-shadow: -0.1em 0.1em 0 0.1em #486bff;
}

.button-bronze .css_ico_blank,
.button-bronze .css_ico_blank > span {
  background: #da3c3d; /* ブロンズの色 */
  box-shadow: -0.1em 0.1em 0 0.1em #da3c3d;
}

.button-blk .css_ico_blank,
.button-blk .css_ico_blank > span {
  background: #2c2c2c;
  box-shadow: -0.1em 0.1em 0 0.1em #2c2c2c;
}


.css_ico_plus {
  display: inline-block;
  vertical-align: middle;
  //color: #333;
  line-height: 1;
  position: relative;
  width: 1em;
  height: 1em;
  border: 0.1em solid currentColor;
  border-radius: 50%;
  box-sizing: content-box;
  margin-left: .5em;
}

.css_ico_plus > span {
  width: 52%;
  height: 0.1em;
  background: currentColor;
  border-radius: 0.1em;
  position: relative;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}

.css_ico_plus > span::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: inherit;
  border-radius: inherit;
  transform: rotate(90deg);
}


.css_ico_chevronR {
  display: inline-block;
  vertical-align: middle;
  color: #333;
  line-height: 1;
  width: 1em;
  height: 1em;
  border: 0.1em solid currentColor;
  border-left: 0;
  border-bottom: 0;
  box-sizing: border-box;
  transform: translateX(-25%) rotate(45deg);
}


/* button */


h2,h3{text-align:center;}

section{
  padding:0 .5em 3em .5em;
  margin:0 auto;
  max-width:800px;
}

/* 主なサービス特典 */
.note_wrap{padding:.5em;}
.note{font-size: .8em;}
.whi_wrap{
  padding:.5em;
  background-color: #fff;
  border-radius: 24px;
  margin:0 .5em 1.5em .5em;
}
.svr_status{
  display: flex;
  justify-content: center;
  align-items: center;
}
.svr_status_L{
  padding:.5em;
}
.svr_status_R{
  padding:.1em .5em;
  color:#f00;
  border:#f00 solid 1px;
  font-size:.8em;
  display: flex;
  justify-content: center;
  align-items: center;
  height:1.5em;
}
.status_panel{
  display: flex;
  justify-content: center;
  align-items: center;
  color:#fff;
  font-size:.7em;
  padding:.3em .5em .25em;
  border-radius: 4px;
  width: 6em;
}
/* 主なサービス特典 */



/* ご留意事項 */
ul.note{padding-left:.5em;}
ul.note li{
  padding-inline-start: 0;
  padding-bottom:.5em;
  //list-style-position: inside;
}

/* ご留意事項 */


/* FAQ */
.faq_wrap a{
  text-decoration: none;
  color:;
}
.faq_bt{
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 1.0em;
  color: #222222;
}
.faq_bt div{margin:.5em;}
.faq_bt div.text{flex: 1;font-size:.8em;}

/* FAQ */



/* 会員規約 */

.terms li{list-style:none;}

/* 会員規約 */



/* modal */

/* モーダルウィンドウの背景 */
.modal {
  display: none; /* 初期状態では非表示 */
  position: fixed; /* 固定位置 */
  z-index: 1; /* 前面に表示 */
  left: 0;
  top: 0;
  width: 100%; /* 全幅 */
  height: 100%; /* 全高 */
  overflow: hidden; /* コンテンツが溢れた場合にスクロールを無効に */
  background-color: rgb(0,0,0); /* 背景色 */
  background-color: rgba(0,0,0,0.4); /* 背景色の透明度 */
  animation: fadeIn 0.3s; /* 表示時のアニメーション */
}

/* モーダルウィンドウのコンテンツ */
.modal-content {
  max-width: 600px;
  background-color: #f2f0eb;
  margin: auto; /* 上下左右中央に配置 */
  padding: 20px;
  border: 1px solid #888;
  width: 80%; /* 幅 */
  max-height: 80vh; /* 画面の高さの80%まで */
  overflow-y: auto; /* 縦方向のスクロールを有効に */
  position: absolute; /* 絶対位置 */
  top: 50%; /* 画面の中央に配置 */
  left: 50%; /* 画面の中央に配置 */
  transform: translate(-50%, -50%); /* 中央に調整 */
  animation: slideIn 0.3s; /* 表示時のアニメーション */
  border-radius: 1em;
  box-shadow: 0 5px 15px rgba(0,0,0,0.3); /* 影を追加 */
  padding-top: 60px; /* 上部に余白を追加して閉じるボタンのスペースを確保 */
}

/* 閉じるボタン */
.close_oppp {
  position: fixed; /* fixedに変更 */
  top: 10px; /* モーダルウィンドウの上に少しはみ出す */
  right: 10px; /* モーダルウィンドウの右に少しはみ出す */
  width: 30px;
  height: 30px;
  background-color: #2c2c2c;
  color: white;
  border-radius: 50%;
  text-align: center;
  line-height: 30px;
  font-size: 24px;
  font-weight: bold;
  cursor: pointer;
  transition: background-color 0.3s ease;
  box-shadow: 0 2px 5px rgba(0,0,0,0.3); /* ボタンに影を追加 */
  z-index: 2; /* モーダルコンテンツより前面に表示 */
}

.close_oppp:hover,
.close_oppp:focus {
  background-color: #ff1c1c;
  text-decoration: none;
}

/* フェードインアニメーション */
@keyframes fadeIn {
  from {opacity: 0;}
  to {opacity: 1;}
}

/* スライドインアニメーション */
@keyframes slideIn {
  from {transform: translate(-50%, -60%);}
  to {transform: translate(-50%, -50%);}
}

/* フェードアウトアニメーション */
@keyframes fadeOut {
  from {opacity: 1;}
  to {opacity: 0;}
}

/* スライドアウトアニメーション */
@keyframes slideOut {
  from {transform: translate(-50%, -50%);}
  to {transform: translate(-50%, -40%);}
}


/* modal */