@charset "utf-8";

/*矢印用webフォント*/
@import url("https://fonts.googleapis.com/css2?family=Dela+Gothic+One&family=Kosugi+Maru&family=Lobster&display=swap");
/* font-family: 'Dela Gothic One', sans-serif;
font-family: 'Kosugi Maru', sans-serif;
font-family: 'Lobster', sans-serif; */

/* Noto Sans Japanese */
@import url("https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@400;700&family=Noto+Sans+JP:wght@400;700&family=M+PLUS+Rounded+1c:wght@400;700&display=swap");
/* // <uniquifier>: Use a unique and descriptive class name
// <weight>: Use a value from 100 to 900 */
/* .noto-sans jp-<uniquifier> {
  font-family: "Noto Sans JP", sans-serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
} */
/* retro 

*/
@import url("https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap");
.retro {
  font-family: sans-serif; /* Press Start 2Pから変更 */
}

@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&display=swap");
/*// <uniquifier>: Use a unique and descriptive class name
// <weight>: Use a value from 100 to 900
*/
.noto-sans-jp {
  font-family: "Noto Sans JP", sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
}

@import url("https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@200..900&display=swap");
/*// <uniquifier>: Use a unique and descriptive class name
// <weight>: Use a value from 200 to 900
*/
.noto-serif-jp {
  font-family: "Noto Serif JP", serif;
  font-optical-sizing: auto;
  font-style: normal;
}

@import url("https://fonts.googleapis.com/css2?family=M+PLUS+Rounded+1c:wght@100;300;400;500;700;800;900&display=swap");
.m-plus-rounded-1c {
  font-family: "M PLUS Rounded 1c", sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
}

@import url("https://fonts.googleapis.com/css2?family=Kosugi+Maru&display=swap");
.kosugi-maru-regular {
  font-family: "Kosugi Maru", sans-serif;
  font-weight: 400;
  font-style: normal;
}


/*リンク*/
a:link,
a:visited,
a:hover,
a:active {
  cursor: pointer;
  text-decoration: none;
}

:root {
  --color-main: #FFABDE;
  --color-gradient: linear-gradient(to right, #f9bc71, #f196b0, #d9a9c6, #a1c1d9);
  --color-cast: #FF326B;
  --color-men: #3279FF;
  --color-shop: #2da96b;
  --color-recruit: #7932FF;
  --color-orange: #ffa31e;
}

.mt10{margin-top: clamp(5px, 10 / 500 * 100vw, 10px) !important;}
.mt20{margin-top: clamp(5px, 20 / 500 * 100vw, 20px) !important;}
.mt30{margin-top: clamp(5px, 30 / 500 * 100vw, 30px) !important;}
.mb10{margin-bottom: clamp(5px, 10 / 500 * 100vw, 10px) !important;}
.mb50{margin-bottom: clamp(5px, 50 / 500 * 100vw, 50px) !important;}
.slider-main {
  opacity: 0;
  transition: opacity 0.3s ease;
}

.slider-main.slick-initialized {
  opacity: 1;
}
.slider-nav {
  opacity: 0;
  transition: opacity 0.3s ease;
}

.slider-nav.slick-initialized {
  opacity: 1;
}
html {
  scroll-behavior: auto !important;
  overscroll-behavior: none;
  
}

body {
  word-wrap: break-word;
  padding: 0;
  margin: 0 auto;
  font-family: "Kosugi Maru", sans-serif;
  color: #686868;
  line-height: 1.25;
  min-height: 100vh;
  width: 100%;
  max-width: 500px;
}

#wrap{
  width: 100%;
  max-width: 500px;
  padding: 0;
  margin: 0 auto;
  background: #fff;
}

.page-wrapper::before {
  /* スムーズなスクロール用 */
  will-change: transform;
  /* iOS上でのちらつき防止 */
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  /* iOS上での慣性スクロール有効化 */
  -webkit-overflow-scrolling: touch;
}

section {
  width: 100%;
  margin: clamp(5px, 10 / 500 * 100vw, 10px) auto;
}

.section_title {
  /*
  border-top: 2px solid transparent;
  border-bottom: 2px solid transparent;
  border-image: linear-gradient(to right, #f9bc71, #f196b0, #d9a9c6, #a1c1d9) 1;
  border-top: solid 2px rgb(226, 226, 226);
  border-bottom: solid 2px rgb(226, 226, 226); */
  margin: clamp(10px, 30 / 500 * 100vw, 30px) auto 0;
  text-align: center;
  font-size: clamp(15px, 36 / 500 * 100vw, 36px);
  font-family: "Noto Sans JP", sans-serif;
  font-weight:bold;
  font-style: normal;
  padding: 20px;
  display: block;
   color: white;
  text-shadow:
    0 0 1px #a64fc8,
    0 0 2px #a64fc8,
    1px 1px 0 #a64fc8,
    -1px 1px 0 #a64fc8,
    1px -1px 0 #a64fc8,
    -1px -1px 0 #a64fc8,
    3px 3px 0px #ff99d6;
}

.section_title.godGuests {
  /* color: var(--color-cast); */
    text-shadow:
    0 0 1px #ff00a8,
    0 0 2px #ff00a8,
    1px 1px 0 #ff00a8,
    -1px 1px 0 #ff00a8,
    1px -1px 0 #ff00a8,
    -1px -1px 0 #ff00a8,
    3px 3px 0px #ed9bdf;
}
.rankTitle {
  font-size: 20px;
  font-weight: 600;
  text-align: center;
  margin: 20px;
}
.rankTitle.cast {
  color: var(--color-cast);
}
.rankTitle.men {
  color: var(--color-men);
}
.rankTitle.shop {
  color: var(--color-shop);
}
.rankTitle.recruit {
  color: var(--color-recruit);
}

.btn_f {
  width: 98%;
  height: clamp(33px, 80 / 500 * 100vw, 80px);
  margin: clamp(12px, 30 / 500 * 100vw, 30px) auto;
  background: var(--color-gradient);
  border-radius: 10px;
}

.btn_f > a {
  width: 100%;
  height: 100%;
  color: #fff;
  font-size: clamp(13px, 28 / 500 * 100vw, 28px);
  display: block;
  position: relative;
  cursor: pointer;
}

.btn_f > a span {
  position: absolute;
  width: 100%;
  top: 50%;
  left: 0;
  text-align: center;
  transform: translateY(-50%);
}

.btn_m {
  width: 90%;
  margin: clamp(1px, 10 / 500 * 100vw, 10px) auto;
  padding: clamp(1px, 10 / 500 * 100vw, 10px);
  background: linear-gradient(to right, #f9bc71, #f196b0, #d9a9c6, #a1c1d9);
  line-height: clamp(1px, 18 / 500 * 100vw, 18px);
  position: relative;
  text-align: center;
  border-radius: clamp(5px, 15 / 500 * 100vw, 15px);
  position: relative;
  color: #fff;
  font-size: clamp(5px, 24 / 500 * 100vw, 24px);
  display: block;
}

.btn_cast {
  width: 90%;
  margin: clamp(1px, 10 / 500 * 100vw, 10px) auto;
  padding: clamp(1px, 10 / 500 * 100vw, 10px);
  background: linear-gradient(to right, #ff6b9f, #ff316a);
  line-height: clamp(1px, 18 / 500 * 100vw, 18px);
  position: relative;
  text-align: center;
  border-radius: clamp(5px, 50 / 500 * 100vw, 50px);
  position: relative;
  color: #fff;
  font-size: clamp(5px, 24 / 500 * 100vw, 24px);
  display: block;
}

.btn_m a,
.btn_cast a {
  width: 100%;
  height: 100%;
  position: relative;
  z-index: 3;
  display: block;
}

.vote-buttons {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 20px 0;
}

.vote-buttons button {
  padding: 10px 20px;
  border-radius: 5px;
  cursor: pointer;
}

.freeVoteBtn {
  background-color: #4CAF50;
  color: white;
}

.paidVoteBtn {
  background-color: #2196F3;
  color: white;
}

.col1 {  color: #992dc1;}
.col2 {  color: #ffffff;}
.col3 {  color: #2dc5fe;}
.col4 {  color: #ffa31e;}
.col5 {  color: #ff00a8;}
.col6 {  color: #0051ff;}
.col7 {  color: #00ff55;}

a.cast_link{ color: #ec98b9;}
a.user_link{ color: #5a71ff;}

.wait {
  font-weight: bold;
  font-size: 40px;
}

.read_more {
  width: 90%;
  margin: 0 auto;
  background: linear-gradient(to right, #f9bc71, #f196b0, #d9a9c6, #a1c1d9);
  line-height: 18px;
  padding: 8px;
  position: relative;
  text-align: center;
  border-radius: clamp(5px, 15 / 500 * 100vw, 15px);
  position: relative;
  color: #fff;
  font-size: clamp(5px, 24 / 500 * 100vw, 24px);
  display: block;
  box-shadow:
  0 0 clamp(1px, 5 / 500 * 100vw, 5px) #fff,
  0 0 clamp(1px, 10 / 500 * 100vw, 10px) #fff,
  0 0 clamp(1px, 15 / 500 * 100vw, 15px) #fff,
  0 0 clamp(5px, 20 / 500 * 100vw, 20px) #fff,
  0 0 clamp(7px, 30 / 500 * 100vw, 30px) #fff
  ;
  border: #FFF solid 5px;
}

.read_more.blue{
  width: 70%;
  margin: clamp(5px, 15 / 500 * 100vw, 15px) auto clamp(5px, 50 / 500 * 100vw, 50px);
  background: #2dc5fe;
}

.read_more.yellow{
  width: 70%;
  background: linear-gradient(to right, #ffb81e, #ffa31e);
}
  

.readMore.w50 {
  width: 50%;
}

/****************
	title
****************/
.search_title{
  width: 100%;
  margin-bottom: clamp(1px, 5 / 500 * 100vw, 5px);;
  text-align: center;
  font-family: "Noto Sans JP", sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
  font-weight: 900;
  font-size: clamp(25px, 40 / 500 * 100vw, 40px);
  color: white;
  text-shadow:
    /* 0 0 2px #a64fc8,
    0 0 4px #a64fc8,
    2px 2px 0 #a64fc8,
    -2px 2px 0 #a64fc8,
    2px -2px 0 #a64fc8,
    -2px -2px 0 #a64fc8,
    4px 4px 0px #ff99d6; */
    0 0 1px #a64fc8,
    0 0 2px #a64fc8,
    1px 1px 0 #a64fc8,
    -1px 1px 0 #a64fc8,
    1px -1px 0 #a64fc8,
    -1px -1px 0 #a64fc8,
    3px 3px 0px #ff99d6;
}

.search_title.fsS{
  font-size: clamp(15px, 30 / 500 * 100vw, 30px);
}

.h3_title{
  display: inline;
  text-align: center;
  font-family: "Noto Sans JP", sans-serif;
  font-optical-sizing: auto;
  font-style: italic;
  font-weight: 900;
  font-size: clamp(5px, 40 / 500 * 100vw, 40px);
}

.h3_col1{
  color: white;
  text-shadow:
    0 0 1px #a64fc8,
    0 0 2px #a64fc8,
    1px 1px 0 #a64fc8,
    -1px 1px 0 #a64fc8,
    1px -1px 0 #a64fc8,
    -1px -1px 0 #a64fc8,
    3px 3px 0px #ff99d6;
    position: relative;
}

.h3_col1::after{
  content: '';
  display: inline-block;
  width: clamp(5px, 30 / 500 * 100vw, 30px);
  height: clamp(5px, 82 / 500 * 100vw, 82px);
  background-image: url(/images2/title_left.png);
  background-repeat: no-repeat;
  background-size: contain;
  position: absolute;
  top: clamp(5px, 15 / 500 * 100vw, 15px);
  left: clamp(-40px, calc(-40 / 500 * 100vw), -15px);
}

.h3_col1::before{
  content: '';
  display: inline-block;
  width: clamp(5px, 30 / 500 * 100vw, 30px);
  height: clamp(5px, 82 / 500 * 100vw, 82px);
  background-image: url(/images2/title_right.png);
  background-repeat: no-repeat;
  background-size: contain;
  position: absolute;
  top: clamp(5px, 15 / 500 * 100vw, 15px);
  right: clamp(-45px, calc(-45 / 500 * 100vw), -15px);
}

.h3_col2{
  color: white;
  text-shadow:
    0 0 1px #2dc5fe,
    0 0 2px #2dc5fe,
    1px 1px 0 #2dc5fe,
    -1px 1px 0 #2dc5fe,
    1px -1px 0 #2dc5fe,
    -1px -1px 0 #2dc5fe,
    3px 3px 0px #aeed9b;
    position: relative;
}

.h3_col2::after{
  content: '';
  display: inline-block;
  width: clamp(5px, 30 / 500 * 100vw, 30px);
  height: clamp(5px, 82 / 500 * 100vw, 82px);
  filter: brightness(0) saturate(100%) invert(68%) sepia(19%) saturate(7078%) hue-rotate(170deg) brightness(107%) contrast(99%);
  background-image: url(/images2/title_left.png);
  background-repeat: no-repeat;
  background-size: contain;
  position: absolute;
  top: clamp(5px, 15 / 500 * 100vw, 15px);
  left: clamp(-40px, calc(-40 / 500 * 100vw), -15px);
}

.h3_col2::before{
  content: '';
  display: inline-block;
  width: clamp(5px, 30 / 500 * 100vw, 30px);
  height: clamp(5px, 82 / 500 * 100vw, 82px);
  filter: brightness(0) saturate(100%) invert(68%) sepia(19%) saturate(7078%) hue-rotate(170deg) brightness(107%) contrast(99%);
  background-image: url(/images2/title_right.png);
  background-repeat: no-repeat;
  background-size: contain;
  position: absolute;
  top: clamp(5px, 15 / 500 * 100vw, 15px);
  right: clamp(-45px, calc(-45 / 500 * 100vw), -15px);
}

.h3_col3{
  color: white;
  text-shadow:
    0 0 1px #ffa31e,
    0 0 2px #ffa31e,
    1px 1px 0 #ffa31e,
    -1px 1px 0 #ffa31e,
    1px -1px 0 #ffa31e,
    -1px -1px 0 #ffa31e,
    3px 3px 0px #ed9bdf;
    position: relative;
}

.h3_col3::after{
  content: '';
  display: inline-block;
  width: clamp(5px, 30 / 500 * 100vw, 30px);
  height: clamp(5px, 82 / 500 * 100vw, 82px);
  filter: brightness(0) saturate(100%) invert(79%) sepia(20%) saturate(7175%) hue-rotate(341deg) brightness(104%) contrast(108%);
  background-image: url(/images2/title_left.png);
  background-repeat: no-repeat;
  background-size: contain;
  position: absolute;
  top: clamp(5px, 15 / 500 * 100vw, 15px);
  left: clamp(-40px, calc(-40 / 500 * 100vw), -15px);
}

.h3_col3::before{
  content: '';
  display: inline-block;
  width: clamp(5px, 30 / 500 * 100vw, 30px);
  height: clamp(5px, 82 / 500 * 100vw, 82px);
  filter: brightness(0) saturate(100%) invert(79%) sepia(20%) saturate(7175%) hue-rotate(341deg) brightness(104%) contrast(108%);
  background-image: url(/images2/title_right.png);
  background-repeat: no-repeat;
  background-size: contain;
  position: absolute;
  top: clamp(5px, 15 / 500 * 100vw, 15px);
  right: clamp(-45px, calc(-45 / 500 * 100vw), -15px);
}

.h3_col4{
  color: white;
  text-shadow:
    0 0 1px #ff00a8,
    0 0 2px #ff00a8,
    1px 1px 0 #ff00a8,
    -1px 1px 0 #ff00a8,
    1px -1px 0 #ff00a8,
    -1px -1px 0 #ff00a8,
    3px 3px 0px #ed9bdf;
    position: relative;
}

.h3_col4::after{
  content: '';
  display: inline-block;
  width: clamp(5px, 30 / 500 * 100vw, 30px);
  height: clamp(5px, 82 / 500 * 100vw, 82px);
  filter: brightness(0) saturate(100%) invert(16%) sepia(81%) saturate(5154%) hue-rotate(313deg) brightness(105%) contrast(113%);
  background-image: url(/images2/title_left.png);
  background-repeat: no-repeat;
  background-size: contain;
  position: absolute;
  top: clamp(5px, 15 / 500 * 100vw, 15px);
  left: clamp(-40px, calc(-40 / 500 * 100vw), -15px);
}

.h3_col4::before{
  content: '';
  display: inline-block;
  width: clamp(5px, 30 / 500 * 100vw, 30px);
  height: clamp(5px, 82 / 500 * 100vw, 82px);
  filter: brightness(0) saturate(100%) invert(16%) sepia(81%) saturate(5154%) hue-rotate(313deg) brightness(105%) contrast(113%);
  background-image: url(/images2/title_right.png);
  background-repeat: no-repeat;
  background-size: contain;
  position: absolute;
  top: clamp(5px, 15 / 500 * 100vw, 15px);
  right: clamp(-45px, calc(-45 / 500 * 100vw), -15px);
}

.sub_title{
  text-align: center;
  font-size: clamp(5px, 20 / 500 * 100vw, 20px);
  font-family: ab-don, sans-serif;
  font-style: normal;
  font-weight: 700;
}
/****************
	pager
****************/
.pager {
  width: 100%;
  margin: 20px auto;
}

.pager ul {
  width: 100%;
  margin: 10px auto;
  display: flex;
  justify-content: center;
}

.pager ul li {
  width: clamp(35px, 40 / 500 * 100vw, 40px);
  height: clamp(35px, 40 / 500 * 100vw, 40px);
  margin: 0 1px;
  text-align: center;
  float: left;
  background: #ffffff;
  border: #e7e7e7 solid 1px;
  font-family: "Kosugi Maru", sans-serif;
  border-radius: 50%;
}

.pager ul li a {
  display: block;
  font-size: clamp(14px, 16 / 500 * 100vw, 16px);
  line-height: clamp(33px, 38 / 500 * 100vw, 38px);
  cursor: pointer;
}

.pager ul li a {
  color: #333;
  text-decoration: none;
}

.pager ul li a.current {
  color: #333;
  background: #e0e0e0;
  border-radius: 50%;
}

/*************
header
*************/

header{
  /* margin-bottom: 10px; */
}

#header-wrapper {
  width: 100%;
  min-height: clamp(5px, 160 / 500 * 100vw, 160px);
  margin: 0 auto;
  padding-top: clamp(5px, 10 / 500 * 100vw, 10px);
  display: flex;
  align-content: center;
  justify-content: center;
  position: relative;
  background: url(/images2/head_bg.png);
  background-size: 100%;
}

#header-wrapper #logo {
  width: clamp(20px, 200 / 500 * 100vw, 200px);
  text-align: center;
  margin: clamp(2px, 20 / 500 * 100vw, 20px) auto 0;
}

#header_inner #logo .img {
  width: 100%;
}

/*************
index-header
*************/
#index-header-wrapper {
  width: 100%;
  min-height: clamp(50px, 800 / 500 * 100vw, 800px);
  margin: 0 auto;
  padding-top: clamp(5px, 10 / 500 * 100vw, 10px);
  background: url(/images2/index_head_bg.webp);
  background-size: 100%;
}

#index-header-wrapper #logo {
  width: clamp(20px, 200 / 500 * 100vw, 200px);
  text-align: center;
  margin: clamp(2px, 20 / 500 * 100vw, 20px) auto 0;
}

#index-header-wrapper #logo .img {
  width: 100%;
}

#index-header-wrapper .index_rank {
  width: clamp(90px, 390 / 500 * 100vw, 390px);
  height: clamp(120px, 620 / 500 * 100vw, 620px);
  margin: clamp(10px, 20 / 500 * 100vw, 20px) auto;
  position: relative;
  font-family: "M PLUS Rounded 1c", sans-serif;
  font-optical-sizing: auto;
  font-style: italic;
}

#index-header-wrapper .index_rank .img_back {
  width: 100%;
  height: clamp(60px, 520 / 500 * 100vw, 520px);
  line-height: 0;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: clamp(8px, 10 / 500 * 100vw, 10px);
  position: absolute;
  top: clamp(10px, 60 / 500 * 100vw, 60px);
  box-shadow:
  0 0 clamp(1px, 5 / 500 * 100vw, 5px) #d985ee,
  0 0 clamp(1px, 10 / 500 * 100vw, 10px) #d985ee,
  0 0 clamp(1px, 15 / 500 * 100vw, 15px) #d985ee,
  0 0 clamp(5px, 20 / 500 * 100vw, 20px) #d985ee,
  0 0 clamp(7px, 30 / 500 * 100vw, 30px) #d985ee,
  0 0 clamp(10px, 40 / 500 * 100vw, 40px) #d985ee,
  0 0 clamp(15px, 50 / 500 * 100vw, 50px) #d985ee
  ;
  mix-blend-mode: color-dodge;
}

#index-header-wrapper .index_rank .img_wrap {
  width: 100%;
  height: clamp(60px, 520 / 500 * 100vw, 520px);
  line-height: 0;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: clamp(8px, 10 / 500 * 100vw, 10px);
  position: absolute;
  top: clamp(10px, 60 / 500 * 100vw, 60px);

}

#index-header-wrapper .index_rank .imgWrap img {
  width: auto;
  height: 100%;   /* 親要素の高さいっぱいに */
  object-fit: cover;  /* 画像比率を保ちながら領域を埋める */  
  mix-blend-mode: color-dodge;
}

#index-header-wrapper .index_rank .img_cover {
  width: 100%;
  height: clamp(60px, 520 / 500 * 100vw, 520px);
  line-height: 0;
  border-radius: clamp(8px, 10 / 500 * 100vw, 10px);
  position: absolute;
  top: clamp(10px, 60 / 500 * 100vw, 60px);
  box-shadow:
  0 0 clamp(1px, 5 / 500 * 100vw, 5px) #fff inset,
  0 0 clamp(1px, 10 / 500 * 100vw, 10px) #fff inset,
  0 0 clamp(1px, 15 / 500 * 100vw, 15px) #fff inset,
  0 0 clamp(5px, 20 / 500 * 100vw, 20px) #fff inset,
  0 0 clamp(7px, 30 / 500 * 100vw, 30px) #fff inset
  ;
  background-image: url(https://kokoniko.g-encekey.com/images2/cover_light.png);
  background-size: 100%;
  background-repeat: no-repeat;
  background-position: center bottom;
  mix-blend-mode: lighten;
}

#index-header-wrapper .index_rank .img_cover a{
  width: 100%;
  height: 100%;
  display: block;
}

#index-header-wrapper .index_rank .top_rank_data {
  text-align: center;
  font-size: clamp(10px, 18 / 500 * 100vw, 18px);
  color: #c175ea;
}

#index-header-wrapper .index_rank .top_rank_name {
  width: clamp(100px, 200 / 500 * 100vw, 200px);
  margin-left: clamp(-100px, calc(-100 / 500 * 100vw), -10px);
  padding: clamp(7px, 14 / 500 * 100vw, 14px);
  text-align: center;
  font-size: clamp(8px, 20 / 500 * 100vw, 20px);
  font-weight: bold;
  color: #c175ea;
  background: #fff;
  border-radius: clamp(8px, 10 / 500 * 100vw, 10px);
  position: absolute;
  top: clamp(15px, 30 / 500 * 100vw, 30px);
  left: 50%;
  box-shadow:
  0 0 5px #fff,
  0 0 10px #fff,
  0 0 15px #fff
  ;
}

#index-header-wrapper .index_rank .girl_data_wrap {
  width: clamp(100px, 300 / 500 * 100vw, 300px);
  min-height: clamp(10px, 70 / 500 * 100vw, 70px);
  margin-left: clamp(-150px, calc(-150 / 500 * 100vw), -15px);
  font-weight: bold;
  background: #fff;
  border-radius: clamp(8px, 10 / 500 * 100vw, 10px);
  position: absolute;
  top: clamp(20px, 550 / 500 * 100vw, 550px);
  left: 50%;
  box-shadow:
  0 0 5px #fff,
  0 0 10px #fff,
  0 0 15px #fff
  ;
  overflow: hidden;
  display: flex;
  align-content : center;
  justify-content: center;
  flex-wrap: wrap;
}

#index-header-wrapper .index_rank .girl_data_wrap .girl_shop_name{
  width: 100%;
  font-size: clamp(8px, 16 / 500 * 100vw, 16px);
  color: #aabed6;
  text-align: center;
  font-style: normal;
}

#index-header-wrapper .index_rank .girl_data_wrap .girl_name{
  width: 100%;
  font-size: clamp(8px, 20 / 500 * 100vw, 20px);
  color: #ec98b9;
  text-align: center;
  font-style: normal;
}

#top_banner {
  width: 100%;
  margin: 0 auto clamp(8px, 50 / 500 * 100vw, 50px);
  text-align: center;
}

/* スライダーを上下中央 */

#top_banner .splide__slide {
  justify-content: center; /* 左右の中央揃え */
}

#top_banner .splide__slide .slide_wrap{
  width: 100%;
  height: clamp(8px, 300 / 500 * 100vw, 300px);
  padding: clamp(8px, 20 / 500 * 100vw, 20px) clamp(8px, 10 / 500 * 100vw, 10px);
  border-radius: clamp(8px, 10 / 500 * 100vw, 10px);
  display: flex;
  align-items: center;
  justify-content: center;
}

#top_banner .splide__slide a.slide_img_link {
  display: flex;
  justify-content: center; /* 左右の中央揃え */
  align-items: center;
    box-shadow:
  0 0 5px #fff,
  0 0 10px #fff,
  0 0 15px #fff;  
  border-radius: clamp(8px, 10 / 500 * 100vw, 10px);
  
  mix-blend-mode: multiply;
}

/* スライドのサイズ調整 */
#top_banner .splide__slide img,
#top_banner .splide__slide video {
    align-self: center; /* 上下の中央揃え */
    max-height: 55vw;
    max-width: 100%;
    width: auto;
    border-radius: clamp(8px, 10 / 500 * 100vw, 10px);
}

#top_banner .splide__slide .bannerTitle {
  width: 100%;
  margin: clamp(-20px, calc(-20 / 500 * 100vw), -20px) 0 clamp(8px, 10 / 500 * 100vw, 10px);
  color: #b432ff;
}

/*************
main
*************/
main {
  padding-bottom: clamp(10px, 80 / 500 * 100vw, 80px);
}

#btn_set {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  gap: 0;
}

#btn_set > div {
  width: calc(50% - 4px);
  margin: 2px;
  background: linear-gradient(to right, #ff9450, #ff6131);
  line-height: clamp(10px, 18 / 500 * 100vw, 18px);
  padding: clamp(1px, 8 / 500 * 100vw, 8px);
  position: relative;
  text-align: center;
  border-radius: clamp(10px, 60 / 500 * 100vw, 60px);
  /* width: 70%; */
  position: relative;
}
#btn_set > div.rem {
  width: calc(50% - 4px);
  margin: 2px;
  background: linear-gradient(to right, #ccc, #333);
  line-height: clamp(10px, 18 / 500 * 100vw, 18px);
  padding: clamp(1px, 8 / 500 * 100vw, 8px);
  position: relative;
  text-align: center;
  border-radius: clamp(10px, 60 / 500 * 100vw, 60px);
  /* width: 70%; */
  position: relative;
}
/* #btn_set > div::after {
  content: "";
  border-radius: clamp(25px, 50 / 500 * 100vw, 50px);
  border: solid clamp(1px, 2 / 500 * 100vw, 2px) #fff;
  position: absolute;
  top: 3px;
  left: 3px;
  width: calc(100% - 6px);
  height: calc(100% - 6px);
} */
#btn_set a {
  width: 100%;
  height: 100%;
  color: #fff;
  display: block;
  position: relative;
  cursor: pointer;
  z-index: 3;
}
#btn_set span {
  color: #fff;
}
#btn_set > div.cast {
  background: linear-gradient(to right, #ff6b9f, #ff316a);
}
#btn_set > div.user {
  background: linear-gradient(to right, #50a6ff, #3178ff);
}
#btn_set > div.shop {
  background: linear-gradient(to right, #32ff98, #0fb160);
}
#btn_set > div.recruit {
  background: linear-gradient(to right, #a150ff, #7831ff);
}
#btn_set > div.reviewWrite {
  background: linear-gradient(to right, #50a6ff, #3178ff);
  margin: 5px auto;
}
#btn_set > div.reviewRequest {
  background: linear-gradient(to right, #32ff98, #0fb160);
  margin: 5px auto;
}
#btn_set > div i {
  padding: 4px;
  background: #fff;
  border-radius: 100%;
  margin-right: 4px;
}
#btn_set > div.cast i {
  color: var(--color-cast);
}
#btn_set > div.user i {
  color: var(--color-men);
}
#btn_set > div.shop i {
  color: var(--color-shop);
}
#btn_set > div.recruit i {
  color: var(--color-recruit);
}
#btn_set .l_btn > a span,
#btn_set .r_btn > a span {
  position: absolute;
  width: 100%;
  top: 50%;
  left: 0;
  text-align: center;
  transform: translateY(-50%);
}

#btn_set .l_btn > a i,
#btn_set .r_btn > a i {
  margin-right: clamp(5px, 10 / 500 * 100vw, 10px);
}

.kyun, .kyun_check {
  width: 100%;
  padding: 0px;
  line-height: 24px;
  font-size: 11px;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
}

.kyun {
  background: #ffaac2;
  cursor: pointer;
}
.kyun_check {
  background: #ccc;
}

.kyun i {
  margin-right: 5px;
  font-size: clamp(14px, 24 / 500 * 100vw, 24px);
  color: #ff5a79;
}

.kyun_check i {
  margin-right: 5px;
  font-size: clamp(14px, 24 / 500 * 100vw, 24px);
  color: #a5a5a5;
}

.content_text_center {
  width: 96%;
  margin: clamp(12px, 30 / 500 * 100vw, 30px) auto;
  font-size: clamp(14px, 20 / 500 * 100vw, 20px);
  text-align: center;
  line-height: 1.5em;
}
/**********
search_box
***********/
.search_box {
  width: 96%;
  margin: auto;
  padding: clamp(1px, 5 / 500 * 100vw, 5px);
  border-top: solid 2px rgb(226, 226, 226);
}
.search_box_title {
  padding: clamp(1px, 5 / 500 * 100vw, 5px) 0;
  font-size: 18px;
  font-weight: bold;
  /* border-bottom: solid 3px rgb(226, 226, 226); */
  margin: clamp(1px, 5 / 500 * 100vw, 5px) 0
}

.search_row {
  margin: clamp(1px, 5 / 500 * 100vw, 5px) 0 clamp(1px, 10 / 500 * 100vw, 10px);
}

.search_row label {
  display: inline-block;
  margin: 1px;
}

.search_row input[type="text"] {
  width: 100%;
  padding: clamp(1px, 8 / 500 * 100vw, 8px);
  border: 1px solid #ddd;
  border-radius: clamp(1px, 5 / 500 * 100vw, 5px);
}
.search_row input[type="number"] {
  width: 100px;
  padding: clamp(1px, 8 / 500 * 100vw, 8px);
  border: 1px solid #ddd;
  border-radius: clamp(1px, 5 / 500 * 100vw, 5px);
}
.searchBtnWrap {
  display: flex;
  justify-content: center;
  border-bottom: solid 2px rgb(226, 226, 226);
  margin-top: clamp(1px, 10 / 500 * 100vw, 10px);
  padding: clamp(1px, 20 / 500 * 100vw, 20px);
}
.searchBtnWrap label {
  display: inline-block;
  margin: clamp(1px, 10 / 500 * 100vw, 10px);
}
.searchBtnWrap input[type="submit"] {
  width: clamp(1px, 100 / 500 * 100vw, 100px);
  padding: clamp(1px, 10 / 500 * 100vw, 10px) clamp(1px, 30 / 500 * 100vw, 30px);
  background: var(--color-orange);
  color: white;
  border: none;
  border-radius: clamp(1px, 5 / 500 * 100vw, 5px);
  cursor: pointer;
  display: block;
  /* margin: 10px auto; */
}
.gps_button {
  padding: 10px 20px;
  background-color: #4CAF50;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.distance {
  font-size: 0.9em;
  color: #666;
  margin-top: 5px;
}
h4 {
  font-weight: bold;
}


/*************
square_list_g3
*************/
#square_list_g3 {
  width: 96%;
  margin: clamp(12px, 30 / 500 * 100vw, 30px) auto;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

#square_list_g3::after {
  content: "";
  display: block;
  width: clamp(70px, 210 / 500 * 100vw, 210px);
}

#square_list_g3 .list_box {
  width: calc(100% / 3);
  /* margin-bottom: clamp(15px, 30 / 500 * 100vw, 30px); */
  /* position: relative; */
  padding: 0;
}

#square_list_g3 .list_box .list_img {
  width: clamp(70px, 210 / 500 * 100vw, 210px);
  height: clamp(70px, 210 / 500 * 100vw, 210px);
  margin: clamp(4px, 8 / 500 * 100vw, 8px) 0;
  border-radius: 10px;
  overflow: hidden;
}

#square_list_g3 .list_box .list_img img,
#square_list_g3 .list_box .list_img video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}



/*************
rectangle_list_g2
*************/
.rectangle_list_g2 {
  width: 90%;
  margin: clamp(14px, 30 / 500 * 100vw, 30px) auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  font-family: "Kosugi Maru", sans-serif;
  font-size: clamp(1px, 14 / 500 * 100vw, 14px);
}

.rectangle_list_g2 .list_box {
  width: clamp(30px, 210 / 500 * 100vw, 210px);
  margin-bottom: clamp(20px, 40 / 500 * 100vw, 40px);
  display: flex;
  flex-direction: column; /* 直下の要素を縦積みに */
  position: relative;
}

.rectangle_list_g2 .list_box .list_rank {
  /* width: clamp(20px, 40 / 500 * 100vw, 40px);
	height: clamp(20px, 40 / 500 * 100vw, 40px); */
  width: clamp(30px, 60 / 500 * 100vw, 60px);
  height: clamp(30px, 60 / 500 * 100vw, 60px);
  font-weight: bold;
  position: absolute;
  /* top: clamp(-25px, calc(-25 / 500 * 100vw), 0px);
  right: clamp(-25px, calc(-25 / 500 * 100vw), 0px); */
  top: clamp(-10px, calc(-10 / 500 * 100vw), 0px);
  right: clamp(-10px, calc(-10 / 500 * 100vw), 0px);
  display: flex;
  justify-content: center;
  align-items: center;
}

.rectangle_list_g2 .list_box .rank1 {
  width: clamp(30px, 60 / 500 * 100vw, 60px);
  height: clamp(30px, 60 / 500 * 100vw, 60px);
  font-size: clamp(20px, 30 / 500 * 100vw, 30px);
  background: url(/images/01.webp);
  background-size: 100% 100%;
  color: #5e4c42;
}

.rectangle_list_g2 .list_box .rank2 {
  width: clamp(30px, 60 / 500 * 100vw, 60px);
  height: clamp(30px, 60 / 500 * 100vw, 60px);
  font-size: clamp(20px, 30 / 500 * 100vw, 30px);
  background: url(/images/02.webp);
  background-size: 100% 100%;
  color: #686868;
}

.rectangle_list_g2 .list_box .rank3 {
  width: clamp(30px, 60 / 500 * 100vw, 60px);
  height: clamp(30px, 60 / 500 * 100vw, 60px);
  font-size: clamp(20px, 30 / 500 * 100vw, 30px);
  background: url(/images/03.webp);
  background-size: 100% 100%;
  color: #5e4c42;
}

.rectangle_list_g2 .list_box .list_img {
  width: clamp(30px, 210 / 500 * 100vw, 210px);
  height: clamp(40px, 280 / 500 * 100vw, 280px);
  margin-bottom: clamp(5px, 10 / 500 * 100vw, 10px);
  border-radius: 10px;
  overflow: hidden;
  line-height: 0;
}

.rectangle_list_g2 .list_box .list_img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.rectangle_list_g2 .list_box .list_shop {
  width: 100%;
  padding: clamp(1px, 5 / 500 * 100vw, 5px);
  margin-bottom: clamp(1px, 5 / 500 * 100vw, 5px);
  text-align: center;
  flex-grow: 1; /* 比率を指定 */
}

.rectangle_list_g2 .list_box .list_shop.cast {  color: #f44ca8;}
.rectangle_list_g2 .list_box .list_shop.user {  color: #4c64f4;}

.rectangle_list_g2 .list_box .list_name {
  width: 100%;
  padding: clamp(1px, 5 / 500 * 100vw, 5px);
  margin-bottom: clamp(5px, 10 / 500 * 100vw, 10px);
  text-align: center;
  flex-grow: 1; /* 比率を指定 */
  border-radius: clamp(5px, 50 / 500 * 100vw, 50px);
}

.rectangle_list_g2 .list_box .list_name.cast {
  background: linear-gradient(to right, #f44ca8, #f44ce1);
}

.rectangle_list_g2 .list_box .list_name.user {
  background: linear-gradient(to right, #654cf4, #4c64f4);
}

.rectangle_list_g2 .list_box .list_name.cast a,
.rectangle_list_g2 .list_box .list_name.user a{
    color: #fff;
}

.rectangle_list_g2 .list_box .list_time {
  text-align: center;
}

.rectangle_list_g2 .list_box .list_date {
  width: 100%;
  padding: clamp(1px, 5 / 500 * 100vw, 5px);
  text-align: center;
  flex-grow: 1; /* 比率を指定 */
  color: #ffa31e;
}

.rectangle_list_g2 .list_box .list_title {
  width: 100%;
  text-align: center;
  flex-grow: 1; /* 比率を指定 */
  border-radius: clamp(5px, 50 / 500 * 100vw, 50px);
  background-color: #ffa31e;
}

.rectangle_list_g2 .list_box .list_title a{
  width: 100%;
  height: 100%;
  padding: clamp(1px, 5 / 500 * 100vw, 5px);
  color: #fff;
  display: block;
}

.rectangle_list_g2 .list_box .list_schedule {
  margin-bottom: clamp(1px, 5 / 500 * 100vw, 5px);
  font-size: clamp(14px, 22 / 500 * 100vw, 22px);
  text-align: center;
}

/*************
horizon_list Fullsize
*************/
.horizon_list_box_f {
  width: clamp(5px, 440 / 500 * 100vw, 440px);
  margin: clamp(10px, 20 / 500 * 100vw, 20px) auto 0;
  padding-bottom: clamp(20px, 40 / 500 * 100vw, 40px);
  text-align: left;
}

.horizon_list_box_f .list_box {
  width: clamp(5px, 440 / 500 * 100vw, 440px);
  margin-bottom: clamp(20px, 40 / 500 * 100vw, 40px);
  display: flex;
  flex-direction: column; /* 直下の要素を縦積みに */
  position: relative;
}

.horizon_list_box_f .list_box .list_rank {
  width: clamp(30px, 60 / 500 * 100vw, 60px);
  height: clamp(30px, 60 / 500 * 100vw, 60px);
  font-weight: bold;
  position: absolute;
  top: 0;
  right: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

.horizon_list_box_f .list_box .rank1 {
  width: clamp(30px, 60 / 500 * 100vw, 60px);
  height: clamp(30px, 60 / 500 * 100vw, 60px);
  font-size: clamp(20px, 30 / 500 * 100vw, 30px);
  background: url(/images/01.webp);
  background-size: 100% 100%;
  color: #5e4c42;
}

.horizon_list_box_f .list_box .rank2 {
  width: clamp(30px, 60 / 500 * 100vw, 60px);
  height: clamp(30px, 60 / 500 * 100vw, 60px);
  font-size: clamp(20px, 30 / 500 * 100vw, 30px);
  background: url(/images/02.webp);
  background-size: 100% 100%;
  color: #686868;
}

.horizon_list_box_f .list_box .rank3 {
  width: clamp(30px, 60 / 500 * 100vw, 60px);
  height: clamp(30px, 60 / 500 * 100vw, 60px);
  font-size: clamp(20px, 30 / 500 * 100vw, 30px);
  background: url(/images/03.webp);
  background-size: 100% 100%;
  color: #5e4c42;
}

.horizon_list_box_f .list_box .horizon_list_img {
  width: clamp(5px, 440 / 500 * 100vw, 440px);
  height: clamp(5px, 268 / 500 * 100vw, 268px);
  margin: 0 auto clamp(5px, 20 / 500 * 100vw, 20px);
  border-radius: clamp(5px, 10 / 500 * 100vw, 10px);
  overflow: hidden;
}

.horizon_list_box_f .list_box .horizon_list_img img {
  width: 100%;
  height: 100%; 
  object-fit: cover;
  overflow: hidden;
  border-radius: clamp(5px, 10 / 500 * 100vw, 10px);
}



.horizon_list_box_f .list_box .horizon_list_name {
  width: clamp(5px, 440 / 500 * 100vw, 440px);
  margin: 0 auto clamp(5px, 20 / 500 * 100vw, 20px);
  text-align: center;
  font-size: clamp(5px, 16 / 500 * 100vw, 16px);
  background: #fff;
  border-radius: clamp(5px, 20 / 500 * 100vw, 20px);
  background:linear-gradient(to right, #41c7ab, #89efda);
}

.horizon_list_box_f .list_box .horizon_list_name.recruit {
  background:linear-gradient(to right, #b260e9, #9422ba);
}

.horizon_list_box_f .list_box .horizon_list_name a{
  width: 100%;
  height: 100%;
  padding: clamp(5px, 5 / 500 * 100vw, 5px);
  color: #fff;
  display: block;
}

.horizon_list_box_f .list_box .horizon_list_data {
  width: clamp(5px, 440 / 500 * 100vw, 440px);
  margin: auto;
}

.horizon_list_box_f .list_box .horizon_list_data .invoice {
  margin: clamp(4px, 8 / 500 * 100vw, 8px) 0;
  padding: clamp(2px, 4 / 500 * 100vw, 4px) clamp(4px, 8 / 500 * 100vw, 8px);
  color: #fff;
  font-size: clamp(12px, 16 / 500 * 100vw, 16px);
  background: #804ee1;
  border-radius: clamp(5px, 20 / 500 * 100vw, 20px);
  display: inline-block;
}

.horizon_list_box_f .list_box .horizon_list_data .horizon_list_t,
.horizon_list_box_f .list_box .horizon_list_data .horizon_list_address,
.horizon_list_box_f .list_box .horizon_list_data .horizon_list_shop,
.horizon_list_box_f .list_box .horizon_list_data .horizon_list_period,
.horizon_list_box_f .list_box .horizon_list_data .horizon_list_free {
  margin-bottom: clamp(4px, 8 / 500 * 100vw, 8px);
  font-size: clamp(14px, 20 / 500 * 100vw, 20px);
}

.horizon_list_box_f .list_box .horizon_list_data .horizon_list_free {
  color: #ff00a8;
}

.horizon_list_box_f .list_box .horizon_list_data .horizon_list_area i,
.horizon_list_box_f .list_box .horizon_list_data .horizon_list_t i,
.horizon_list_box_f .list_box .horizon_list_data .horizon_list_address i,
.horizon_list_box_f .list_box .horizon_list_data .horizon_list_shop i,
.horizon_list_box_f .list_box .horizon_list_data .horizon_list_period i,
.horizon_list_box_f .list_box .horizon_list_data .horizon_list_free i {
  margin-right: clamp(4px, 8 / 500 * 100vw, 8px);
  color: #686868;
}
.recruitConditionList {
  display: flex;
  font-size: 14px;
  margin: 5px;
}
.recruitConditionList li {
  padding: 3px;
}
.recruitConditionList li .label {
  background: var(--color-orange);
  color: #fff;
  border-radius: 3px;
  padding: 0 2px;
  margin-right: 2px;
}

/*************
rating
*************/
.star_box {
  width: 100%;
  text-align: right;
  font-size: clamp(12px, 20 / 500 * 100vw, 20px);
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.star_box .star_box_rating {
  margin-right: 5px;
  position: relative; /* position: abosoluteの基準 */
  display: inline-block; /* 最大星数に応じてdivのwidthを伸縮させるため */
  font-size: clamp(12px, 24 / 500 * 100vw, 24px);
  font-family: "ヒラギノ角ゴ ProN W3", HiraKakuProN-W3, 游ゴシック, "Yu Gothic",
    メイリオ, Meiryo, Verdana, Helvetica, Arial, sans-serif;
  letter-spacing: 0;
}

.star_box .star_box_rating::after {
  content: "★★★★★";
  color: #ccc;
}

.star_box .filled_star {
  position: absolute; /* .filled-starと.empty-starを重ねる */
  top: 0; /* 左上の基準位置に移動させる */
  overflow: hidden; /* widthが足りない時、はみ出た分は表示しない */
  white-space: nowrap; /* widthが足りない時に、折り返さないようにする。 */
  color: #fbad7d;
}

.star_box .filled_star::after {
  content: "★★★★★";
}

/*************
review_box
*************/
.review_box {
  width: 96%;
  margin: clamp(10px, 20 / 500 * 100vw, 20px) auto
    clamp(20px, 40 / 500 * 100vw, 40px);
  text-align: left;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
}

.review_box .review_box_img {
  width: clamp(48px, 100 / 500 * 100vw, 100px);
  height: clamp(48px, 100 / 500 * 100vw, 100px);
  margin-right: clamp(10px, 20 / 500 * 100vw, 20px);
  border-radius: clamp(1px, 10 / 500 * 100vw, 10px);
  overflow: hidden;
  object-fit: cover;
  display: inline-block;
}

.review_box .review_box_img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.review_box .review_box_data {
  width: calc(
    100% - clamp(10px, 20 / 500 * 100vw, 20px) -
      clamp(48px, 100 / 500 * 100vw, 100px)
  );
}

.review_box .review_box_data .review_box_data_inner {
  width: 100%;
  padding: clamp(3px, 5 / 500 * 100vw, 5px);
  border-bottom: #cccccc solid 1px;
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  flex-direction:column;
}

.review_box .review_box_data .review_box_data_inner .review_box_name {
  padding: clamp(1px, 5 / 500 * 100vw, 5px) clamp(1px, 10 / 500 * 100vw, 10px);
  font-size: clamp(1px, 14 / 500 * 100vw, 14px);
  color: #fff;
  border-radius: clamp(1px, 50 / 500 * 100vw, 50px);
}

.review_box .review_box_data .review_box_data_inner .review_box_name.cast { background: linear-gradient(to right, #ff6b9f, #ff316a);}
.review_box .review_box_data .review_box_data_inner .review_box_name.user { background: linear-gradient(to right, #50a6ff, #3178ff);}

.review_box .review_box_data .review_box_data_inner .star_box {
  width: 100%;
  font-size: clamp(15px, 30 / 500 * 100vw, 30px);
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.review_box .review_box_data .review_message {
  width: 100%;
  margin: auto;
  margin-top: clamp(1px, 5 / 500 * 100vw, 5px);
  padding: 10px;
  font-size: clamp(1px, 16 / 500 * 100vw, 16px);
  border-radius: 10px;
  /* box-shadow: inset 0px 0px 10px 0px rgba(100, 100, 100, 0.2); */
}

.review_box .review_box_data .review_message .review_target {
  width: 100%;
  margin: clamp(4px, 10 / 500 * 100vw, 10px) auto 0;
  padding-top: clamp(4px, 10 / 500 * 100vw, 10px);
  display: flex;
  align-items: center;
  border-top: #ccc dashed 1px;
}

.review_box .review_box_data .review_message .review_target .review_target_img {
  width: clamp(25px, 50 / 500 * 100vw, 50px);
  height: clamp(25px, 50 / 500 * 100vw, 50px);
  margin-right: clamp(5px, 10 / 500 * 100vw, 10px);
  border-radius: 5px;
  overflow: hidden;
  object-fit: cover;
  display: inline-block;
}

.review_box
  .review_box_data
  .review_message
  .review_target
  .review_target_img
  img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.review_box .review_box_data .review_message .review_target .target_data {
  line-height: 1.5em;
  font-size: clamp(10px, 14 / 500 * 100vw, 14px);
}

.review_box .review_box_data .review_message .review_target .target_data a.cast { color: #ec98b9;}
.review_box .review_box_data .review_message .review_target .target_data a.user { color: #5a71ff;}

.review_box .review_box_data .review_like {
  width: 100%;
  margin: clamp(4px, 10 / 500 * 100vw, 10px) auto;
  font-size: clamp(18px, 24 / 500 * 100vw, 24px);
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

/*************
awards_box
*************/
#awards_box {
  width: 96%;
  margin: clamp(12px, 30 / 500 * 100vw, 30px) auto;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

#awards_box::after {
  content: "";
  display: block;
  width: clamp(98px, 240 / 500 * 100vw, 240px);
}

#awards_box .awards_inner {
  width: clamp(70px, 210 / 500 * 100vw, 210px);
  margin-bottom: clamp(15px, 30 / 500 * 100vw, 30px);
  position: relative;
}

#awards_box .awards_inner .awards_img {
  width: clamp(70px, 210 / 500 * 100vw, 210px);
  height: clamp(70px, 210 / 500 * 100vw, 210px);
  margin-bottom: clamp(5px, 10 / 500 * 100vw, 10px);
  border-radius: 10px;
  overflow: hidden;
}
#circle_list_g3 .list_box .list_img {
  width: clamp(70px, 210 / 500 * 100vw, 210px);
  height: clamp(70px, 210 / 500 * 100vw, 210px);
  margin-bottom: clamp(5px, 10 / 500 * 100vw, 10px);
  border-radius: 50%;
  overflow: hidden;
}
#awards_box .awards_inner .awards_img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

#awards_box .awards_inner .awards_date {
  width: 100%;
  font-size: clamp(10px, 20 / 500 * 100vw, 20px);
  text-align: center;
  font-weight: bold;
}

#awards_box .awards_inner .awards_name {
  width: 100%;
  font-size: clamp(12px, 24 / 500 * 100vw, 24px);
  text-align: center;
  font-weight: bold;
}

#awards_box .awards_inner .awards_rank {
  width: 100%;
  font-size: clamp(12px, 24 / 500 * 100vw, 24px);
  text-align: right;
  font-weight: bold;
}

.awards_btn {
  width: 98%;
  height: clamp(33px, 80 / 500 * 100vw, 80px);
  margin: clamp(12px, 30 / 500 * 100vw, 30px) auto;
  background: var(--color-gradient);
  border-radius: 10px;
  color: #fff;
  font-size: clamp(15px, 30 / 500 * 100vw, 30px);
  font-weight: bold;
  display: flex;
  justify-content: center;
  align-items: center;
}
.awards_btn .number {
  /* font-family: "Press Start 2P", cursive; */
  color: var(--color-cast);
  font-size: 19px;
  position: relative;
  margin: 0 4px;
  line-height: 0px;
  display: inline-block;
  /* overflow: hidden; */
}

/*************
v_slide 1.5
*************/
.v_slide {
  width: 100%;
  margin: clamp(14px, 30 / 500 * 100vw, 30px) auto;
  font-family: "Kosugi Maru", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.v_slide .splide__list{
  padding: clamp(10px, 40 / 500 * 100vw, 40px) !important;
}

.v_slide .slide_box {
  width: clamp(75px, 300 / 500 * 100vw, 300px) !important;
  margin: 0 clamp(5px, 10 / 500 * 100vw, 10px) !important;
  padding-top: clamp(5px, 20 / 500 * 100vw, 20px) !important;
  position: relative;
}

.v_slide .slide_box .slide_img {
  width: clamp(75px, 270 / 500 * 100vw, 270px);
  height: clamp(75px, 360 / 500 * 100vw, 360px);
  margin: auto;
  margin-bottom: clamp(5px, 10 / 500 * 100vw, 10px);
  border-radius: clamp(5px, 10 / 500 * 100vw, 10px);
  box-shadow:
  0 0 clamp(1px, 5 / 500 * 100vw, 5px) #fff,
  0 0 clamp(1px, 10 / 500 * 100vw, 10px) #fff,
  0 0 clamp(1px, 15 / 500 * 100vw, 15px) #fff,
  0 0 clamp(5px, 20 / 500 * 100vw, 20px) #fff,
  0 0 clamp(7px, 30 / 500 * 100vw, 30px) #fff
  ;
  position: relative;
}

.v_slide .slide_box .slide_img img{
  width: 100%;
  height: 100%;
  object-fit: cover !important;
  border-radius: clamp(5px, 10 / 500 * 100vw, 10px);
  border: #fff solid 3px;
}

.v_slide .slide_box .slide_img .img_cover{
  width: 100%;
  height: 100%;
  box-shadow:
  0 0 clamp(1px, 5 / 500 * 100vw, 5px) #fff inset,
  0 0 clamp(1px, 10 / 500 * 100vw, 10px) #fff inset,
  0 0 clamp(1px, 15 / 500 * 100vw, 15px) #fff inset,
  0 0 clamp(5px, 20 / 500 * 100vw, 20px) #fff inset,
  0 0 clamp(7px, 30 / 500 * 100vw, 30px) #fff inset
  ;
  display: block;
  border-radius: clamp(5px, 10 / 500 * 100vw, 10px);
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
}

.v_slide .slide_box .slide_img .img_rank {
  position: absolute;
  top: clamp(-50px, calc(-50 / 500 * 100vw), -10px);
  left: clamp(5px, 20 / 500 * 100vw, 20px);
  width: 100%; 
  height: auto; 
  z-index: 3;
  pointer-events: none; 
}

.v_slide .slide_box .slide_img .img_rank img {
  width: 100%;
  height: auto; 
  object-fit: contain; 
  border: none;
  pointer-events: none;
}

.v_slide .slide_box .slide_img .img_flash {
  position: absolute;
  top: clamp(-75px, calc(-75 / 500 * 100vw), -10px);
  left:clamp(10px, 67 / 500 * 100vw, 67px);
  width: 100%; 
  height: auto; 
  pointer-events: none; 
  mix-blend-mode:multiply;
  opacity: 1;
  z-index: 99999;
  }

.v_slide .slide_box .slide_img .img_flash img {
  width: 80%;
  height: auto; 
  object-fit: contain; 
  border: none;
  pointer-events: none;
}

.v_slide .slide_box .slide_img .rank_title{
  padding: clamp(5px, 10 / 500 * 100vw, 10px);
  background: #fff;
  font-size: clamp(5px, 24 / 500 * 100vw, 24px);
  box-shadow:
  0 0 clamp(1px, 5 / 500 * 100vw, 5px) #fff,
  0 0 clamp(1px, 10 / 500 * 100vw, 10px) #fff,
  0 0 clamp(1px, 15 / 500 * 100vw, 15px) #fff,
  0 0 clamp(5px, 20 / 500 * 100vw, 20px) #fff
  ;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: clamp(5px, 10 / 500 * 100vw, 10px);
  position: absolute;
  top: clamp(-40px, calc(-40 / 500 * 100vw), -10px);
  left: 0;
  z-index: 3;
}

.v_slide .slide_box .slide_img .cast_text{color: #f44ce1;}
.v_slide .slide_box .slide_img .user_text{color: #4c64f4;}


.v_slide .slide_box .slide_img .rank_num{
  padding: 0 clamp(5px, 10 / 500 * 100vw, 10px);
  background: #fff;
  font-size: clamp(15px, 36 / 500 * 100vw, 36px);
  font-family: "Noto Sans JP", sans-serif;
  font-weight:bold;
  font-style: normal;
   color: white;
  text-shadow:
    0 0 1px #a64fc8,
    0 0 2px #a64fc8,
    1px 1px 0 #a64fc8,
    -1px 1px 0 #a64fc8,
    1px -1px 0 #a64fc8,
    -1px -1px 0 #a64fc8,
    3px 3px 0px #ff99d6;
  box-shadow:
  0 0 clamp(1px, 5 / 500 * 100vw, 5px) #fff,
  0 0 clamp(1px, 10 / 500 * 100vw, 10px) #fff,
  0 0 clamp(1px, 15 / 500 * 100vw, 15px) #fff,
  0 0 clamp(5px, 20 / 500 * 100vw, 20px) #fff
  ;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: clamp(5px, 50 / 500 * 100vw, 50px);
  position: absolute;
  top: clamp(-25px, calc(-25 / 500 * 100vw), -1px);
  right: clamp(1px, 20 / 500 * 100vw, 20px);
  z-index: 3;
}

.v_slide .slide_box .slide_img .rank_num.rank1{
  color: rgb(255, 252, 203);
  text-shadow:
    0 0 1px #c2a60b,
    0 0 2px #c2a60b,
    1px 1px 0 #c2a60b,
    -1px 1px 0 #c2a60b,
    1px -1px 0 #c2a60b,
    -1px -1px 0 #c2a60b,
    3px 3px 0px #ed9bdf;
}
.v_slide .slide_box .slide_img .rank_num.rank2{
        color: rgb(255, 255, 255);
  text-shadow:
    0 0 1px #2dc5fe,
    0 0 2px #2dc5fe,
    1px 1px 0 #2dc5fe,
    -1px 1px 0 #2dc5fe,
    1px -1px 0 #2dc5fe,
    -1px -1px 0 #2dc5fe,
    3px 3px 0px #aeed9b;
}
.v_slide .slide_box .slide_img .rank_num.rank3{
    color: rgb(255, 213, 203);
    text-shadow:
      0 0 1px #ff5e1e,
      0 0 2px #ff5e1e,
      1px 1px 0 #ff5e1e,
      -1px 1px 0 #ff5e1e,
      1px -1px 0 #ff5e1e,
      -1px -1px 0 #ff5e1e,
      3px 3px 0px #dd73cb;
}

.v_slide .slide_box .slide_shop{
  height: clamp(30px, 50 / 500 * 100vw, 50px);
  margin: clamp(5px, 10 / 500 * 100vw, 10px) 0;
  font-size: clamp(12px, 16 / 500 * 100vw, 16px);
  color: #fff;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.v_slide .slide_box .slide_shop a{
  color: #fff;
  text-align: center;
}

.v_slide .slide_box .slide_name {
  width: clamp(75px, 270 / 500 * 100vw, 270px);
  margin: auto;
  margin-bottom: clamp(5px, 10 / 500 * 100vw, 10px);
  padding: clamp(5px, 10 / 500 * 100vw, 10px);
  border-radius: clamp(5px, 10 / 500 * 100vw, 10px);
  background: #fff;
  box-shadow:
  0 0 clamp(1px, 5 / 500 * 100vw, 5px) #fff,
  0 0 clamp(1px, 10 / 500 * 100vw, 10px) #fff,
  0 0 clamp(1px, 15 / 500 * 100vw, 15px) #fff,
  0 0 clamp(5px, 20 / 500 * 100vw, 20px) #fff,
  0 0 clamp(7px, 30 / 500 * 100vw, 30px) #fff
  ;
  font-size: clamp(12px, 20 / 500 * 100vw, 20px);
  text-align: center;
  overflow: hidden;
}

.v_slide .slide_box .slide_name a.cast_link{ color: #ec98b9;}
.v_slide .slide_box .slide_name a.user_link{ color: #5a71ff;}

.v_slide .splide__arrow{
  background: rgba(0, 0, 0, 0) !important;
  opacity: 1 !important;
}


/*************
schedule_slide
*************/
.ciecle_slide2 {
  width: 83%;
  margin: clamp(5px, 10 / 500 * 100vw, 10px) auto;
}

.slide_box_S {
  width: clamp(60px, 110 / 500 * 100vw, 110px) !important;
  margin-right: clamp(5px, 10 / 500 * 100vw, 10px) !important;
  position: relative;
}

.slide_box_S .slide_img_ciecle {
  width: clamp(60px, 130 / 500 * 100vw, 130px);
  height: clamp(60px, 130 / 500 * 100vw, 130px);
  margin: auto;
  margin-bottom: clamp(5px, 10 / 500 * 100vw, 10px);
  border-radius: 50%;
  overflow: hidden;
}

.slide_box_S .slide_img_ciecle img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.slide_box_S .slide_img_rectangle {
  width: clamp(10px, 90 / 500 * 100vw, 90px);
  height: clamp(10px, 120 / 500 * 100vw, 120px);
  margin: auto;
  margin-bottom: clamp(5px, 10 / 500 * 100vw, 10px);
  border-radius: clamp(5px, 10 / 500 * 100vw, 10px);
  overflow: hidden;
}

.slide_box_S .slide_img_rectangle img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.slide_box_S .slide_date {
  margin-bottom: clamp(5px, 10 / 500 * 100vw, 10px);
  font-size: clamp(12px, 20 / 500 * 100vw, 20px);
  text-align: left;
  overflow: hidden;
}

.slide_box_S .slide_time,
.slide_box_S .slide_name {
  font-size: clamp(1px, 14 / 500 * 100vw, 14px);
  text-align: center;
  overflow: hidden;
}


.slide_box_S .slide_name a {
  color: #ec98b9;
}

/*************
縦長テキスト有スライドボックス(店舗TOP出勤/新人)
*************/
.vl_square_slide_g2 {
  margin: clamp(10px, 20 / 500 * 100vw, 20px) 0
    clamp(15px, 30 / 500 * 100vw, 30px);
  text-align: center;
}

/* 表示一枚の場合センター */
.vl_square_slide_g2:not(.is-overflow) .splide__list {
  justify-content: center;
}

/* スライダーを上下中央 */
.vl_square_slide_g2 .splide__slide {
  display: flex;
  justify-content: center; /* 左右の中央揃え */
}
/* スライドのサイズ調整 */
.vl_square_slide_g2 .splide__slide .splide__slide__container {
  align-self: center; /* 上下の中央揃え */
  height: clamp(250px, 500 / 500 * 100vw, 500px);
  max-width: 100%;
  width: auto;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  flex-direction: column; /* 直下の要素を縦積みに */
  position: relative;
}

.vl_square_slide_g2 .splide__slide .splide__slide__container .img_box {
  height: calc(
    clamp(240px, 480 / 500 * 100vw, 480px) -
      clamp(50px, 100 / 500 * 100vw, 100px)
  );
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}

.vl_square_slide_g2 .splide__slide .splide__slide__container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 10px;
}

@media screen and (max-width: 780px) {
  /* スライドのサイズ調整 */
  .vl_square_slide_g2 .splide__slide .splide__slide__container {
    align-self: center; /* 上下の中央揃え */
    height: clamp(470px, 940 / 500 * 100vw, 940px);
    max-width: 100%;
    width: auto;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    flex-direction: column; /* 直下の要素を縦積みに */
    position: relative;
  }

  .vl_square_slide_g2 .splide__slide .splide__slide__container .img_box {
    height: calc(
      clamp(460px, 920 / 500 * 100vw, 920px) -
        clamp(50px, 100 / 500 * 100vw, 100px)
    );
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
  }
}

.vl_square_slide_g2 .entry_date,
.vl_square_slide_g2 .schedule {
  width: 100%;
  font-size: clamp(12px, 20 / 500 * 100vw, 20px);
  text-align: center;
  font-weight: bold;
  display: block;
  /* position: absolute; */
  bottom: clamp(14px, 30 / 500 * 100vw, 30px);
}

.vl_square_slide_g2 .cast_name {
  width: 100%;
  font-size: clamp(13px, 26 / 500 * 100vw, 26px);
  text-align: center;
  font-weight: bold;
  display: block;
  position: absolute;
  bottom: 0;
}

/*************
review_circle_slide_g2(店舗TOP口コミ)
*************/
.review_circle_slide_g2 {
  margin: clamp(10px, 20 / 500 * 100vw, 20px) 0
    clamp(15px, 30 / 500 * 100vw, 30px);
  text-align: center;
}

/* 表示一枚の場合センター */
.review_circle_slide_g2:not(.is-overflow) .splide__list {
  justify-content: center;
}

/* スライダーを上下中央 */
.review_circle_slide_g2 .splide__slide {
  display: flex;
  justify-content: center; /* 左右の中央揃え */
}
/* スライドのサイズ調整 */
.review_circle_slide_g2 .splide__slide .splide__slide__container {
  width: auto;
  max-width: 100%;
  border-radius: 10px;
}

.review_circle_slide_g2 .splide__slide .splide__slide__container .img_box {
  width: calc(
    clamp(195px, 390 / 500 * 100vw, 390px) -
      clamp(50px, 100 / 500 * 100vw, 100px)
  );
  height: calc(
    clamp(195px, 390 / 500 * 100vw, 390px) -
      clamp(50px, 100 / 500 * 100vw, 100px)
  );
  margin-bottom: clamp(10px, 10 / 500 * 100vw, 10px);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}

.review_circle_slide_g2 .splide__slide .splide__slide__container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

@media screen and (max-width: 780px) {
  /* スライドのサイズ調整 */
  .review_circle_slide_g2 .splide__slide .splide__slide__container {
    width: auto;
    max-width: 100%;
    border-radius: 10px;
  }

  .review_circle_slide_g2 .splide__slide .splide__slide__container .img_box {
    width: calc(
      clamp(195px, 390 / 500 * 100vw, 390px) -
        clamp(50px, 100 / 500 * 100vw, 100px)
    );
    height: calc(
      clamp(195px, 390 / 500 * 100vw, 390px) -
        clamp(50px, 100 / 500 * 100vw, 100px)
    );
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
  }
}

.review_circle_slide_g2 .review_data {
  width: calc(
    clamp(195px, 390 / 500 * 100vw, 390px) -
      clamp(50px, 100 / 500 * 100vw, 100px)
  );
  padding: 10px;
  font-size: clamp(14px, 16 / 500 * 100vw, 16px);
  text-align: left;
  border-radius: 10px;
  /* border-top-left-radius: 10px;
	border-top-right-radius: 10px; */
  border: #ccc solid 1px;
  /* border-bottom: none; */
  /* box-shadow: inset 0px 0px 10px 0px rgba(100, 100, 100, 0.2); */
  position: relative;
}


.review_circle_slide_g2 .review_data .cast_name,
.review_circle_slide_g2 .review_data .shop_name {
  margin-bottom: clamp(3px, 6 / 500 * 100vw, 6px);
}

.review_circle_slide_g2 .review_data .review_name {
  color: #844de9;
  margin-bottom: clamp(3px, 6 / 500 * 100vw, 6px);
}

.review_circle_slide_g2 .review_data .star_box,
.review_circle_slide_g2 .review_data .star_box_rating {
  font-size: 20px;
  margin-bottom: clamp(3px, 6 / 500 * 100vw, 6px);
}

.review_circle_slide_g2 .review_data .review_comment {
  margin-bottom: clamp(5px, 10 / 500 * 100vw, 10px);
  display: block;
  overflow-y: scroll;
  max-height: 120px;
  font-size: clamp(12px, 16 / 500 * 100vw, 16px);
  line-height: 1.6;
}

.review_circle_slide_g2 .review_data .review_like {
  width: 100%;
  margin: auto;
  font-size: clamp(18px, 24 / 500 * 100vw, 24px);
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.review_circle_slide_g2 .review_data .like,
.review_circle_slide_g2 .review_data .like_check {
  width: clamp(15px, 20 / 500 * 100vw, 20px); /* 正方形を作る */
  height: clamp(15px, 20 / 500 * 100vw, 20px); /* 正方形を作る */
  margin-right: clamp(5px, 10 / 500 * 100vw, 10px);
  position: relative; /* 基準位置とする */
  display: inline-block;
  cursor: pointer;
}

/******************
スライダー矢印サンプル
******************/
/* 矢印のクリック範囲など */
.splide__arrows .button {
  background-color: transparent; /* ボタンの背景を透明にする */
  height: 50px;
  transition: 0.2s;
  width: 30px;
}
/* 矢印共通のスタイル */
.splide__arrows .button::before {
  background-color: #ff6131;
  content: "";
  height: 50px;
  width: 30px;
}
/* 前の矢印 */
/* 次のスライドが無い場合の矢印 */
.splide__arrows .button:disabled::before {
  background-color: #ccc;
}
/* スライドのサイズ調整 */
.splide__arrows .splide__slide img {
  height: auto;
  width: 100%;
}

/*************
main_text
*************/
.main_text {
  width: 96%;
  margin: clamp(12px, 30 / 500 * 100vw, 30px) auto;
}

.main_text h3 {
  margin: clamp(10px, 20 / 500 * 100vw, 20px) auto;
  font-size: clamp(14px, 30 / 500 * 100vw, 30px);
}

.main_text ol {
  width: 96%;
  margin: clamp(10px, 20 / 500 * 100vw, 20px) auto;
  list-style-type: decimal;
}

.main_text ol li {
  padding: clamp(5px, 10 / 500 * 100vw, 10px) 0;
}

.main_text table {
  width: 96%;
  margin: clamp(12px, 30 / 500 * 100vw, 30px) auto;
}

.main_text table th {
  width: 40%;
  padding: 10px 0;
  text-align: right;
}

.main_text table td {
  width: 60%;
  padding: 10px 0 10px 30px;
  text-align: left;
}

/**************
like
**************/
.like,
.like_check {
  width: clamp(15px, 30 / 500 * 100vw, 30px); /* 正方形を作る */
  height: clamp(15px, 30 / 500 * 100vw, 30px); /* 正方形を作る */
  margin-right: clamp(5px, 10 / 500 * 100vw, 10px);
  position: relative; /* 基準位置とする */
  display: inline-block;
  cursor: pointer;
}

.like::before,
.like::after,
.like_check::before,
.like_check::after {
  content: ""; /* 疑似要素に必須 */
  width: 50%; /* ハートの丸い部分の大きさにかかわる */
  height: 80%; /* ハートの高さにかかわる */
  border-radius: 25px 25px 0 0; /* ハートの半円を生成 */
  display: block; /* ブロック要素にする */
  position: absolute; /* 相対位置に指定 */
  top: 2px;
}

.like::before,
.like::after {
  background: #ccc; /* ハートの色 */
}

.like_check::before,
.like_check::after {
  background: #ff99ff; /* ハートの色 */
}

.like::before,
.like_check::before {
  transform: rotate(-45deg); /* 左に回転 */
  left: 14%; /* 左からの位置を指定 */
}

.like::after,
.like_check::after {
  transform: rotate(45deg); /* 右に回転 */
  right: 14%; /* 右からの位置を指定 */
}

/*************
top
*************/
#index_first{
  width: 100%;
  margin: 0 !important;
  position: relative;
  z-index: 4;
}

#index_first::before{
  content: '';
  display: inline-block;
  width: 100%;
  height: clamp(5px, 130 / 500 * 100vw, 130px);
  background-image: url(/images2/search_bottom.png);
  background-size: cover;
  position: absolute;
  bottom: clamp(-55px, calc(-55 / 500 * 100vw), -10px);
}

.index_search {
  width: clamp(12px, 460 / 500 * 100vw, 460px);
  height: clamp(6px, 230 / 500 * 100vw, 230px);
  margin: clamp(5px, 20 / 500 * 100vw, 20px) auto 0;
  background: linear-gradient(to bottom right, #f9bc71, #f196b0, #d9a9c6, #a1c1d9);
  line-height: 18px;
  padding: 0;
  position: relative;
  text-align: center;
  border-radius: clamp(5px, 15 / 500 * 100vw, 15px);
  position: relative;
  color: #fff;
  display: flex;
  align-content: space-around;
  justify-content: center;
  flex-wrap: wrap;
}

.index_search::after {
  content: "";
  border-radius: clamp(5px, 15 / 500 * 100vw, 15px);
  border: solid clamp(1px, 2 / 500 * 100vw, 2px) #fff;
  position: absolute;
  top: 4px;
  left: 4px;
  width: calc(100% - 8px);
  height: calc(100% - 8px);
}

.index_search .search_item{
  width: 50%;
  height: clamp(6px, 115 / 500 * 100vw, 115px);
  text-align: left;
  position: relative;
}

.index_search .search_item a{
  width: 90%;
  height: clamp(5px, 80 / 500 * 100vw, 80px);
  display: block;
  position: absolute;
  top: clamp(5px, 20 / 500 * 100vw, 20px);
  left: 5%;
  cursor: pointer;
  z-index: 1;
}

.index_search .search_item .item_img{
  width: clamp(5px, 80 / 500 * 100vw, 80px);
  height: clamp(5px, 80 / 500 * 100vw, 80px);
  position: absolute;
  top: clamp(5px, 20 / 500 * 100vw, 20px);
  left: clamp(5px, 20 / 500 * 100vw, 20px);
}

.index_search .search_item .item_name {
    font-family:  sans-serif;
    font-size: clamp(5px, 22 / 500 * 100vw, 22px);
    font-weight: bold;
    font-style: italic;
    color: white;
    text-shadow: 
        1px 1px 0 #ff66aa,
        -1px -1px 0 #ff66aa,
        1px -1px 0 #ff66aa,
        -1px 1px 0 #ff66aa,
        1px 1px 0 white,
        2px 2px 0 white
        /* 3px 3px 0 #ff66aa,
        4px 4px 0 #ff66aa */
        ;
    letter-spacing: 2px;
    position: absolute;
    top: clamp(5px, 50 / 500 * 100vw, 50px);
    left: clamp(5px, 80 / 500 * 100vw, 80px);
  cursor: pointer;
}

#index_second{
	padding-top:clamp(5px, 80 / 500 * 100vw, 80px);
  width: clamp(5px, 500 / 500 * 100vw, 500px);
  min-height: clamp(5px, 500 / 500 * 100vw, 500px);
  margin: 0 !important;
	text-align:center;
	background:url(/images2/second_bg.png) center 0 no-repeat;
	background-attachment:fixed;
	background-size: clamp(5px, 500 / 500 * 100vw, 500px);
  position: relative;
  z-index: 3;
}

#index_second::before{
  content: '';
  display: inline-block;
  width: 100%;
  height: clamp(5px, 300 / 500 * 100vw, 300px);
  background-image: url(/images2/second_bottom.png);
  background-size: cover;
  position: absolute;
  left: 0;
  bottom: clamp(-120px, calc(-120 / 500 * 100vw), -20px);
}

#index_third{
  width: clamp(5px, 500 / 500 * 100vw, 500px);
  min-height: clamp(5px, 500 / 500 * 100vw, 500px);
  margin: 0;
	padding:clamp(5px, 150 / 500 * 100vw, 150px) 0 clamp(5px, 00 / 500 * 100vw, 0px);
  text-align:center;
  background:url(/images2/third_bg.png) center center no-repeat;
  background-attachment:fixed;
  background-size: clamp(5px, 500 / 500 * 100vw, 500px);
  position: relative;
  z-index: 2;
}

#index_third::before{
  content: '';
  display: inline-block;
  width: 100%;
  height: clamp(5px, 230 / 500 * 100vw, 230px);
  background-image: url(/images2/third_bottom.png);
  background-size: cover;
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: -1;
}

.shop_rank{
  width: 100%;
  margin: clamp(5px, 110 / 500 * 100vw, 110px) auto clamp(5px, 40 / 500 * 100vw, 40px);
  font-family: "Kosugi Maru", sans-serif;
}

.shop_rank .shop_rank_img{
  width: clamp(5px, 440 / 500 * 100vw, 440px);
  height: clamp(5px, 268 / 500 * 100vw, 268px);
  margin: 0 auto clamp(5px, 20 / 500 * 100vw, 20px);
  border-radius: clamp(5px, 10 / 500 * 100vw, 10px);
  box-shadow:
  0 0 clamp(1px, 5 / 500 * 100vw, 5px) #fff,
  0 0 clamp(1px, 10 / 500 * 100vw, 10px) #fff,
  0 0 clamp(1px, 15 / 500 * 100vw, 15px) #fff,
  0 0 clamp(5px, 20 / 500 * 100vw, 20px) #fff,
  0 0 clamp(7px, 30 / 500 * 100vw, 30px) #fff
  ;
  position: relative;
}

.shop_rank .shop_rank_img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
  border-radius: clamp(5px, 10 / 500 * 100vw, 10px);
  border: #fff solid 3px;
}

.shop_rank .shop_rank_img .img_cover{
  width: 100%;
  height: 100%;
  box-shadow:
  0 0 clamp(1px, 5 / 500 * 100vw, 5px) #fff inset,
  0 0 clamp(1px, 10 / 500 * 100vw, 10px) #fff inset,
  0 0 clamp(1px, 15 / 500 * 100vw, 15px) #fff inset,
  0 0 clamp(5px, 20 / 500 * 100vw, 20px) #fff inset,
  0 0 clamp(7px, 30 / 500 * 100vw, 30px) #fff inset
  ;
  display: block;
  border-radius: clamp(5px, 10 / 500 * 100vw, 10px);
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
  background-image: url(https://kokoniko.g-encekey.com/images2/cover_light.png);
  background-size: 100%;
  background-repeat: no-repeat;
  background-position: center bottom;
  mix-blend-mode: lighten;
}

.shop_rank .shop_rank_img .img_rank {
  position: absolute;
  top: clamp(-80px, calc(-80 / 500 * 100vw), -10px);
  left: 0;
  width: 100%; 
  height: auto; 
  z-index: 3;
  pointer-events: none; 
}

.shop_rank .shop_rank_img .img_rank img {
  width: 30%;
  height: auto; 
  object-fit: contain; 
  border: none;
  pointer-events: none;
}

.shop_rank .shop_rank_img .img_flash {
  position: absolute;
  top: clamp(-135px, calc(-135 / 500 * 100vw), -10px);
  left:clamp(-30px, calc(-30 / 500 * 100vw), -10px);
  width: 100%; 
  height: auto; 
  z-index: 3;
  pointer-events: none; 
  mix-blend-mode:color-dodge;
  opacity: 1;
}

.shop_rank .shop_rank_img .img_flash img {
  width: 100%;
  height: auto; 
  object-fit: contain; 
  border: none;
  pointer-events: none;
}

.shop_rank .shop_rank_img .rank_title_box{
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: clamp(-25px, calc(-25 / 500 * 100vw), -10px);
  left: 0;
}

.shop_rank .shop_rank_img .rank_title_box .rank_title{
  padding: clamp(5px, 10 / 500 * 100vw, 10px);
  background: #fff;
  font-size: clamp(5px, 24 / 500 * 100vw, 24px);
  box-shadow:
  0 0 clamp(1px, 5 / 500 * 100vw, 5px) #fff,
  0 0 clamp(1px, 10 / 500 * 100vw, 10px) #fff,
  0 0 clamp(1px, 15 / 500 * 100vw, 15px) #fff,
  0 0 clamp(5px, 20 / 500 * 100vw, 20px) #fff
  ;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: clamp(5px, 10 / 500 * 100vw, 10px);
  z-index: 3;
}

.shop_rank .shop_rank_img .rank_title_box .shop_text{color: #76dba8;}
.shop_rank .shop_rank_img .rank_title_box .recruit_text{color: #804ee1;}


.shop_rank .shop_rank_img .rank_num{
  width: clamp(5px, 70 / 500 * 100vw, 70px);
  margin-right: clamp(-35px, calc(-35 / 500 * 100vw), -1px);
  padding: 0 clamp(5px, 10 / 500 * 100vw, 10px);
  background: #fff;
  font-size: clamp(15px, 36 / 500 * 100vw, 36px);
  font-family: "Noto Sans JP", sans-serif;
  font-weight:bold;
  font-style: normal;
   color: white;
  text-shadow:
    0 0 1px #a64fc8,
    0 0 2px #a64fc8,
    1px 1px 0 #a64fc8,
    -1px 1px 0 #a64fc8,
    1px -1px 0 #a64fc8,
    -1px -1px 0 #a64fc8,
    3px 3px 0px #ff99d6;
  box-shadow:
  0 0 clamp(1px, 5 / 500 * 100vw, 5px) #fff,
  0 0 clamp(1px, 10 / 500 * 100vw, 10px) #fff,
  0 0 clamp(1px, 15 / 500 * 100vw, 15px) #fff,
  0 0 clamp(5px, 20 / 500 * 100vw, 20px) #fff
  ;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: clamp(5px, 50 / 500 * 100vw, 50px);
  position: absolute;
  top: clamp(-40px, calc(-40 / 500 * 100vw), -1px);
  right: 50%;
  z-index: 3;
}

.shop_rank .shop_rank_img .rank_num.rank1{
  color: rgb(255, 252, 203);
  text-shadow:
    0 0 1px #c2a60b,
    0 0 2px #c2a60b,
    1px 1px 0 #c2a60b,
    -1px 1px 0 #c2a60b,
    1px -1px 0 #c2a60b,
    -1px -1px 0 #c2a60b,
    3px 3px 0px #ed9bdf;
}
.shop_rank .shop_rank_img .rank_num.rank2{
        color: rgb(255, 255, 255);
  text-shadow:
    0 0 1px #2dc5fe,
    0 0 2px #2dc5fe,
    1px 1px 0 #2dc5fe,
    -1px 1px 0 #2dc5fe,
    1px -1px 0 #2dc5fe,
    -1px -1px 0 #2dc5fe,
    3px 3px 0px #aeed9b;
}
.shop_rank .shop_rank_img .rank_num.rank3{
    color: rgb(255, 213, 203);
    text-shadow:
      0 0 1px #ff5e1e,
      0 0 2px #ff5e1e,
      1px 1px 0 #ff5e1e,
      -1px 1px 0 #ff5e1e,
      1px -1px 0 #ff5e1e,
      -1px -1px 0 #ff5e1e,
      3px 3px 0px #dd73cb;
}

.shop_rank .shop_area{  
  margin: 0 auto clamp(5px, 15 / 500 * 100vw, 15px);
  color: #fff;
  text-align: center;
}

.shop_rank .shop_area.bottom{
  color: #804ee1;
}

.shop_rank .shop_name{
  width: clamp(5px, 400 / 500 * 100vw, 400px);
  margin: 0 auto clamp(5px, 20 / 500 * 100vw, 20px);
  text-align: center;
  background: #fff;
  border-radius: clamp(5px, 20 / 500 * 100vw, 20px);
}

.shop_rank .shop_name a{
  width: 100%;
  height: 100%;
  padding: clamp(5px, 5 / 500 * 100vw, 5px);
  color: #fff;
  display: block;
}

.shop_rank .shop_text{background:linear-gradient(to right, #41c7ab, #89efda);}
.shop_rank .recruit_text{background:linear-gradient(to right, #b260e9, #9422ba);}

#index_fourth{
  width: clamp(5px, 500 / 500 * 100vw, 500px);
  min-height: clamp(5px, 500 / 500 * 100vw, 500px);
  margin: 0;
	padding:clamp(5px, 10 / 500 * 100vw, 10px) 0 clamp(5px, 00 / 500 * 100vw, 0px);
  text-align:center;
}

.event_box{
  width: clamp(5px, 440 / 500 * 100vw, 440px);
  margin: clamp(5px, 40 / 500 * 100vw, 40px) auto 0;
  font-family: "Kosugi Maru", sans-serif;
  border-bottom: #e2e2e2 solid clamp(1px, 3 / 500 * 100vw, 3px);
}

.event_box .event_date{
  width: clamp(5px, 200 / 500 * 100vw, 200px);
  margin: 0 auto clamp(5px, 20 / 500 * 100vw, 20px);
  padding: clamp(5px, 5 / 500 * 100vw, 5px);
  text-align: center;
  color: #fff;
  background: #2dc5fe;
  border-radius: clamp(5px, 20 / 500 * 100vw, 20px);
}

.event_box .event_data{
  width: 100%;
  margin: 0 auto clamp(5px, 20 / 500 * 100vw, 20px);
  padding: 0;
  text-align: center;
  display: flex;
  align-items: flex-start;
  justify-content: center;
}

.event_box .event_data .event_img{
  width: clamp(5px, 220 / 500 * 100vw, 220px);
  padding: 0 clamp(5px, 10 / 500 * 100vw, 10px) 0 0;
  line-height: 0;
  border-radius: 5px;
}

.event_box .event_data .event_img img{
  border-radius: clamp(5px, 10 / 500 * 100vw, 10px);
}

.event_box .event_data .event_text{
  width: clamp(5px, 220 / 500 * 100vw, 220px);
}

.event_box .event_data .event_text .event_area{  
  padding: clamp(2px, 5 / 500 * 100vw, 5px);
  color: #2dc5fe;
  text-align: left;
}

.event_box .event_data .event_text .shop_name{
  width: 100%;
  margin: 0 auto;
  padding: clamp(5px, 5 / 500 * 100vw, 5px);
  text-align: center;
  color: #fff;
  background: #2dc5fe;
  border-radius: clamp(5px, 20 / 500 * 100vw, 20px);
}

.event_box .event_data .event_text .event_title{
  width: 100%;
  margin: 0 auto;
  padding: clamp(5px, 5 / 500 * 100vw, 5px);
  text-align: left;
  color: #2dc5fe;
}

.event_box .event_data .event_text .event_comment{  
  padding: clamp(2px, 5 / 500 * 100vw, 5px);
  text-align: left;
}

#index_fifth{
  width: clamp(5px, 500 / 500 * 100vw, 500px);
  min-height: clamp(5px, 500 / 500 * 100vw, 500px);
  margin: 0;
	padding:clamp(5px, 10 / 500 * 100vw, 10px) 0 clamp(5px, 10 / 500 * 100vw, 10px);
  text-align:center;
}

.board_box{
  width: clamp(5px, 440 / 500 * 100vw, 440px);
  margin: clamp(5px, 40 / 500 * 100vw, 40px) auto 0;
  font-family: "Kosugi Maru", sans-serif;
}

.board_box .board_data{
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.board_box .board_data .board_name{
  max-width: 79%;
  padding: clamp(5px, 5 / 500 * 100vw, 5px) clamp(5px, 10 / 500 * 100vw, 10px);
  text-align: center;
  color: #fff;
  background: #ffa31e;
  border-radius: clamp(5px, 20 / 500 * 100vw, 20px);
}

.board_box .board_data .board_time{
  max-width: 20%;
  color: #b0b0b0;
}

.board_box .board_text{
  margin: clamp(5px, 10 / 500 * 100vw, 10px) auto;
  text-align: left;
}

#index_sixth{
  width: clamp(5px, 500 / 500 * 100vw, 500px);
  min-height: clamp(5px, 800 / 500 * 100vw, 800px);
  margin: 0;
	padding:clamp(5px, 80 / 500 * 100vw, 80px) 0 clamp(5px, 10 / 500 * 100vw, 10px);
  text-align:center;
  background:url(/images2/sixth_bg.png) center bottom no-repeat;
  background-size: clamp(5px, 500 / 500 * 100vw, 500px);
}

.media_banner{
  width: clamp(5px, 440 / 500 * 100vw, 440px);
	margin:clamp(5px, 30 / 500 * 100vw, 30px) auto;
  line-height: 0;
}

.media_banner img{
  border-radius: clamp(5px, 10 / 500 * 100vw, 10px);
}

.index_bottom_menu{
  width: clamp(5px, 440 / 500 * 100vw, 440px);
  margin: auto;
  padding: clamp(5px, 10 / 500 * 100vw, 10px);
  background: rgba(155, 40, 255, .8);
  font-family: "Kosugi Maru", sans-serif;
}

.index_bottom_menu ul{
  width: 100%;
  margin: auto;
  display: flex;
  align-content: center;
  justify-content: center;
  flex-wrap: wrap;
}

.index_bottom_menu li{
  width: 50%;
  margin: auto;
  padding: clamp(5px, 10 / 500 * 100vw, 10px);
  text-align: left;
}

.index_bottom_menu li a{
  color: #fff;
}


/*************
ranking
**************/
.ranking_list{
  width: clamp(5px, 500 / 500 * 100vw, 500px);
  min-height: clamp(5px, 500 / 500 * 100vw, 500px);
  margin: 0;
	padding:0 0 clamp(5px, 50 / 500 * 100vw, 50px);
  text-align:center;
  background:url(/images2/second_bg.png) center center no-repeat;
  background-attachment:fixed;
  background-size: clamp(5px, 500 / 500 * 100vw, 500px);
  position: relative;
  z-index: 2;
}

.ranking_list::before{
  content: '';
  display: inline-block;
  width: 100%;
  height: clamp(5px, 130 / 500 * 100vw, 130px);
  background-image: url(/images2/rank_top.png);
  background-size: cover;
  position: absolute;
  top: clamp(-0px, calc( -0 / 500 * 100vw), 0px);
  left: 0;
  z-index: -1;
}

.ranking_list::after{
  content: '';
  display: inline-block;
  width: 100%;
  height: clamp(5px, 130 / 500 * 100vw, 130px);
  background-image: url(/images2/rank_bottom.png);
  background-size: cover;
  position: absolute;
  left: 0;
  bottom: clamp(-40px, calc( -40 / 500 * 100vw), 0px);
  z-index: -1;
}

.ranking_list2{
  width: clamp(5px, 500 / 500 * 100vw, 500px);
  min-height: clamp(5px, 500 / 500 * 100vw, 500px);
  margin: 0;
	padding:0 0 clamp(5px, 50 / 500 * 100vw, 50px);
  text-align:center;
  background:url(/images2/second_bg.png) center center no-repeat;
  background-attachment:fixed;
  background-size: clamp(5px, 500 / 500 * 100vw, 500px);
  position: relative;
  z-index: 2;
}

.ranking_list2::before{
  content: '';
  display: inline-block;
  width: 100%;
  height: clamp(5px, 130 / 500 * 100vw, 130px);
  background-image: url(/images2/rank_top2.png);
  background-size: cover;
  position: absolute;
  top: clamp(-0px, calc( -0 / 500 * 100vw), 0px);
  left: 0;
  z-index: -1;
}

.ranking_list2::after{
  content: '';
  display: inline-block;
  width: 100%;
  height: clamp(5px, 130 / 500 * 100vw, 130px);
  background-image: url(/images2/rank_bottom2.png);
  background-size: cover;
  position: absolute;
  left: 0;
  bottom: clamp(-40px, calc( -40 / 500 * 100vw), 0px);
  z-index: -1;
}


.shop_ranking_list{
  width: clamp(5px, 500 / 500 * 100vw, 500px);
  min-height: clamp(5px, 500 / 500 * 100vw, 500px);
  margin: 0;
	padding:0 0 0;
  text-align:center;
  background:url(/images2/third_bg.png) center center no-repeat;
  background-attachment:fixed;
  background-size: clamp(5px, 500 / 500 * 100vw, 500px);
  position: relative;
  z-index: 2;
}

.shop_ranking_list::before{
  content: '';
  display: inline-block;
  width: 100%;
  height: clamp(5px, 130 / 500 * 100vw, 130px);
  background-image: url(/images2/rank_top.png);
  background-size: cover;
  position: absolute;
  top: clamp(-0px, calc( -0 / 500 * 100vw), 0px);
  left: 0;
  z-index: -1;
}

.shop_ranking_list::after{
  content: '';
  display: inline-block;
  width: 100%;
  height: clamp(5px, 130 / 500 * 100vw, 130px);
  background-image: url(/images2/rank_bottom.png);
  background-size: cover;
  position: absolute;
  left: 0;
  bottom: clamp(-40px, calc( -40 / 500 * 100vw), 0px);
  z-index: -1;
}

.shop_ranking_list2{
  width: clamp(5px, 500 / 500 * 100vw, 500px);
  min-height: clamp(5px, 500 / 500 * 100vw, 500px);
  margin: 0;
	padding:0 0 0;
  text-align:center;
  background:url(/images2/third_bg.png) center center no-repeat;
  background-attachment:fixed;
  background-size: clamp(5px, 500 / 500 * 100vw, 500px);
  position: relative;
  z-index: 2;
}

.shop_ranking_list2::before{
  content: '';
  display: inline-block;
  width: 100%;
  height: clamp(5px, 130 / 500 * 100vw, 130px);
  background-image: url(/images2/rank_top2.png);
  background-size: cover;
  position: absolute;
  top: clamp(-0px, calc( -0 / 500 * 100vw), 0px);
  left: 0;
  z-index: -1;
}

.shop_ranking_list2::after{
  content: '';
  display: inline-block;
  width: 100%;
  height: clamp(5px, 130 / 500 * 100vw, 130px);
  background-image: url(/images2/rank_bottom2.png);
  background-size: cover;
  position: absolute;
  left: 0;
  bottom: clamp(-40px, calc( -40 / 500 * 100vw), 0px);
  z-index: -1;
}

/*************
cast
*************/
.cast_shop_name {
  margin: clamp(4px, 10 / 500 * 100vw, 10px) 0;
  text-align: center;
  font-size: clamp(14px, 24 / 500 * 100vw, 24px);
  font-weight: bold;
}
.cast_cast_name {
  margin: clamp(4px, 10 / 500 * 100vw, 10px) 0;
  text-align: center;
  font-size: clamp(25px, 30 / 500 * 100vw, 30px);
  font-weight: bold;
  background: color(srgb 1 1 1 / 0.6);
  box-shadow: 0 0 5px #ccc inset;
  border-radius: 5px;
  margin: 5px;
  padding: 5px;
  position: relative;
}
.cast_cast_name .lvLabel {
  /* font-family: "Press Start 2P", cursive; */
  color: var(--color-cast);
}
.cast_cast_rank {
  margin: clamp(4px, 10 / 500 * 100vw, 10px) 0;
  text-align: center;
  font-size: clamp(14px, 30 / 500 * 100vw, 30px);
  font-weight: bold;
}

.cast_cast_rank span {
  margin-left: clamp(9px, 20 / 500 * 100vw, 20px);
  font-size: clamp(19px, 40 / 500 * 100vw, 40px);
  display: inline-block;
}

#slide-main {
  width: 740px;
  margin: clamp(14px, 30 / 500 * 100vw, 30px) auto;
  text-align: center;
}
/* スライダーを上下中央 */
#slide-main .splide__slide {
  display: flex;
  justify-content: center; /* 左右の中央揃え */
  border-radius: 10px;
  overflow: hidden;
}
/* スライドのサイズ調整 */
#slide-main .splide__slide img,
#slide-main .splide__slide video {
  align-self: center; /* 上下の中央揃え */
  max-height: 600px;
  max-width: 100%;
  width: auto;
  border-radius: 10px;
  overflow: hidden;
}

#slide-thumbnail {
  width: 740px;
  margin: 30px auto;
  text-align: center;
}

/* スライダーを上下中央 */
#slide-thumbnail .splide__slide {
  display: flex;
  justify-content: center; /* 左右の中央揃え */
  border-radius: 10px;
  overflow: hidden;
}

/* スライドのサイズ調整 */
#slide-thumbnail .splide__slide img,
#slide-thumbnail .splide__slide video {
  align-self: center; /* 上下の中央揃え */
  max-height: 150px;
  max-width: 100%;
  width: auto;
  border-radius: 10px;
  overflow: hidden;
}
#slide-thumbnail
  .splide__track--nav
  > .splide__list
  > .splide__slide.is-active {
  border: 3px solid #ffa31d;
}
@media screen and (max-width: 780px) {
  #slide-main {
    width: 100%;
    margin: clamp(14px, 30 / 500 * 100vw, 30px) auto;
    text-align: center;
  }

  #slide-main .splide__slide img,
  #slide-main .splide__slide video {
    align-self: center; /* 上下の中央揃え */
    /* max-height: 80vw; */
    max-width: 100%;
    width: auto;
    border-radius: 10px;
  }

  #slide-thumbnail {
    width: 100%;
    margin: 30px auto;
    text-align: center;
  }
}

.slide_center {
  justify-content: center;
}

.main_blur {
  -ms-filter: blur(10px);
  filter: blur(10px);
}

.tmb_blur {
  -ms-filter: blur(6px);
  filter: blur(6px);
}

#cast_cast_schedule {
  width: 100%;
  margin: 10px 0 30px;
  display: flex;
}

#cast_cast_schedule > li {
  width: calc(100% / 7);
}

#cast_cast_schedule > li > .date {
  width: 90%;
  margin: clamp(4px, 10 / 500 * 100vw, 10px) 0;
  font-size: clamp(10px, 14 / 500 * 100vw, 14px);
  text-align: center;
  font-weight: bold;
  color: #ff6b9f;
}

#cast_cast_schedule > li > .time {
  width: 90%;
  margin: auto;
  position: relative;
  border-radius: 50%;
  color: #fff;
  font-weight: bold;
  font-size: clamp(10px, 14 / 500 * 100vw, 14px);
  text-align: center;
}

#cast_cast_schedule > li:nth-child(1) .time {
  background: linear-gradient(to right, #f8a983, #f59f9e);
}
#cast_cast_schedule > li:nth-child(2) .time {
  background: linear-gradient(to right, #f49ea2, #f096b0);
}
#cast_cast_schedule > li:nth-child(3) .time {
  background: linear-gradient(to right, #f096b1, #ec98ba);
}
#cast_cast_schedule > li:nth-child(4) .time {
  background: linear-gradient(to right, #ea9bbb, #e1a2c1);
}
#cast_cast_schedule > li:nth-child(5) .time {
  background: linear-gradient(to right, #e0a3c2, #d4acc7);
}
#cast_cast_schedule > li:nth-child(6) .time {
  background: linear-gradient(to right, #d2adc9, #c2b5cf);
}
#cast_cast_schedule > li:nth-child(7) .time {
  background: linear-gradient(to right, #c0b6d0, #adbdd6);
}

#cast_cast_schedule > li > .time::before {
  content: "";
  display: block;
  padding-bottom: 100%;
}

#cast_cast_schedule > li > .time p {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

#cast_sponsor_rank {
  width: 100%;
  margin: clamp(8px, 20 / 500 * 100vw, 20px) 0;
  display: flex;
  flex-wrap: wrap;
}

#cast_sponsor_rank > li {
  width: 100%;
  margin: clamp(8px, 20 / 500 * 100vw, 20px) 0;
  display: flex;
  align-items: center;
}

#cast_sponsor_rank > li > .rank {
  width: 20%;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

#cast_sponsor_rank > li.rank1 > .rank {
  font-size: clamp(48px, 100 / 500 * 100vw, 100px);
}
#cast_sponsor_rank > li.rank1 > .rank > span {
  font-size: clamp(36px, 75 / 500 * 100vw, 75px);
}
#cast_sponsor_rank > li.rank2 > .rank {
  font-size: clamp(44px, 90 / 500 * 100vw, 90px);
}
#cast_sponsor_rank > li.rank2 > .rank > span {
  font-size: clamp(34px, 70 / 500 * 100vw, 70px);
}
#cast_sponsor_rank > li.rank3 > .rank {
  font-size: clamp(40px, 80 / 500 * 100vw, 80px);
}
#cast_sponsor_rank > li.rank3 > .rank > span {
  font-size: clamp(32px, 65 / 500 * 100vw, 65px);
}

#cast_sponsor_rank > li > .sponsor {
  width: 80%;
  text-align: left;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  font-weight: bold;
}

#cast_sponsor_rank > li > .sponsor .sponsor_box {
  width: 100%;
  display: flex;
  align-items: center;
}

#cast_sponsor_rank > li > .sponsor .sponsor_box .sponsor_img {
  width: clamp(48px, 100 / 500 * 100vw, 100px);
  height: clamp(48px, 100 / 500 * 100vw, 100px);
  margin: 0 clamp(10px, 20 / 500 * 100vw, 20px);
  border-radius: clamp(1px, 10 / 500 * 100vw, 10px);
  overflow: hidden;
  object-fit: cover;
  display: inline-block;
}

#cast_sponsor_rank > li > .sponsor .sponsor_box .sponsor_img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

#cast_sponsor_rank > li > .sponsor .sponsor_box .sponsor_name {
  width: calc(
    100% - clamp(20px, 40 / 500 * 100vw, 40px) -
      clamp(48px, 100 / 500 * 100vw, 100px)
  );
  display: inline;
}

#cast_sponsor_rank > li.rank1 > .sponsor .sponsor_box .sponsor_name {
  font-size: clamp(25px, 50 / 500 * 100vw, 50px);
}
#cast_sponsor_rank > li.rank2 > .sponsor .sponsor_box .sponsor_name {
  font-size: clamp(20px, 40 / 500 * 100vw, 40px);
}
#cast_sponsor_rank > li.rank3 > .sponsor .sponsor_box .sponsor_name {
  font-size: clamp(15px, 30 / 500 * 100vw, 30px);
}

#cast_sponsor_rank > li > .sponsor .sponsor_point {
  /* margin-left: clamp(100px, 200 / 500 * 100vw, 200px); */
  font-size: clamp(14px, 24 / 500 * 100vw, 24px);
  text-align: left;
  margin-left: auto;
  /* font-family: "Press Start 2P", cursive; */
}

#cast_profile_box {
  width: 80%;
  margin: clamp(12px, 30 / 500 * 100vw, 30px) auto;
  font-size: clamp(12px, 24 / 500 * 100vw, 24px);
  line-height: 2em;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

#cast_profile_box > span {
  font-size: clamp(12px, 24 / 500 * 100vw, 24px);
  line-height: 2em;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

#cast_message {
  width: 80%;
  height: 100px;
  margin: auto;
  margin-bottom: clamp(18px, 40 / 500 * 100vw, 40px);
  padding: 10px;
  font-size: clamp(12px, 24 / 500 * 100vw, 24px);
  border-radius: 10px;
  box-shadow: inset 0px 0px 10px 0px rgba(100, 100, 100, 0.2);
}
#btn_set.cast {
  width: 80%;
  margin: auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin-bottom: 20px;
}
#btn_set.cast > div {
  width: calc(50% - 12px);
  margin: 6px;
  text-align: center;
}
.btnWrap {
  width: 90%;
  margin: 30px auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.btnWrap li {
  width: calc(50% - 12px);
  margin: 6px;
  font-size: 14px;
}
.btnWrap .userBlock,.btnWrap .favDel,.btnWrap .oshiDel {
  background: #ccc;
}
.btnWrap .reviewRequest {
  width: 80%;
  background: var(--color-cast);
}
#favo_res {
  background: rgba(0, 0, 0, 0.5);
  color: #ff5a79;
  position: fixed;
  top: 0%;
  left: 0%;
  z-index: 999;
  opacity: 0;
}

.favo_res_view {
  width: 100%;
  height: 100%;
  opacity: 1 !important;
  display: flex;
  justify-content: center;
  align-items: center;
}

#favo_res .bg {
  width: 90%;
  max-width: 400px;
  padding: 50px 10px;
  text-align: center;
  background: #fff;
  border-radius: 10px;
  position: relative;
}

#favo_res .bg::after {
  content: "×";
  color: #fff;
  font-size: 40px !important;
  position: absolute;
  top: -50px;
  right: -0px;
}

/*************
user
*************/
#user_main_box {
  width: clamp(300px, 500 / 500 * 100vw, 500px);
  height: clamp(300px, 500 / 500 * 100vw, 500px);
  margin: clamp(12px, 30 / 500 * 100vw, 30px) auto;
  position: relative;
}

#user_main_box #user_img {
  width: clamp(300px, 500 / 500 * 100vw, 500px);
  height: clamp(300px, 500 / 500 * 100vw, 500px);
  border-radius: 50%;
  overflow: hidden;
}

#user_main_box #user_img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

#user_main_box #user_online_status {
  font-size: 50px;
  color: rgb(0, 255, 42) !important;
  position: absolute;
  top: 0;
  right: 0;
}

#user_name {
  margin: clamp(4px, 10 / 500 * 100vw, 10px) 0;
  text-align: center;
  font-size: clamp(15px, 36 / 500 * 100vw, 36px);
  font-family: "Noto Sans JP", sans-serif;
  font-weight:bold;
  font-style: normal;
  /* background: color(srgb 1 1 1 / 0.6); */
  margin: 0 0 clamp(5px, 20 / 500 * 100vw, 20px);
  /* padding: 5px; */
  position: relative;
  color: white;
  text-shadow:
    0 0 1px #a64fc8,
    0 0 2px #a64fc8,
    1px 1px 0 #a64fc8,
    -1px 1px 0 #a64fc8,
    1px -1px 0 #a64fc8,
    -1px -1px 0 #a64fc8,
    3px 3px 0px #ff99d6;
}
#user_name .lvLabel {
  text-shadow:
    0 0 1px #2dc5fe,
    0 0 2px #2dc5fe,
    1px 1px 0 #2dc5fe,
    -1px 1px 0 #2dc5fe,
    1px -1px 0 #2dc5fe,
    -1px -1px 0 #2dc5fe,
    3px 3px 0px #aeed9b;
}

#user_name .name_box{
  width: 98%;
  margin: 0 auto clamp(5px, 10 / 500 * 100vw, 10px);
  display: flex;
  justify-content: center;
}

#user_name .name_box .name_lv_cast{
  max-width: 30%;
  margin-right: 2%;
 text-shadow:
    0 0 1px #ff00a8,
    0 0 2px #ff00a8,
    1px 1px 0 #ff00a8,
    -1px 1px 0 #ff00a8,
    1px -1px 0 #ff00a8,
    -1px -1px 0 #ff00a8,
    3px 3px 0px #ed9bdf;
    position: relative;
}

#user_name .name_box .name_lv_user{
  max-width: 30%;
  margin-right: 2%;
  text-shadow:
    0 0 1px #2dc5fe,
    0 0 2px #2dc5fe,
    1px 1px 0 #2dc5fe,
    -1px 1px 0 #2dc5fe,
    1px -1px 0 #2dc5fe,
    -1px -1px 0 #2dc5fe,
    3px 3px 0px #aeed9b;
}

#user_name .name_box .name_name{
  max-width: 68%;
}

#userHead {
  width: clamp(5px, 500 / 500 * 100vw, 500px);
  min-height: clamp(5px, 500 / 500 * 100vw, 500px);
  margin: 0;
	padding:clamp(5px, 30 / 500 * 100vw, 30px) 0 clamp(5px, 50 / 500 * 100vw, 50px);
  text-align:center;
  background:url(/images2/second_bg.png) center center no-repeat;
  background-attachment:fixed;
  background-size: clamp(5px, 500 / 500 * 100vw, 500px);
  position: relative;
  z-index: 2;
}

#userHead::before{
  content: '';
  display: inline-block;
  width: 100%;
  height: clamp(5px, 130 / 500 * 100vw, 130px);
  background-image: url(/images2/rank_top.png);
  background-size: cover;
  position: absolute;
  top: clamp(-0px, calc( -0 / 500 * 100vw), 0px);
  left: 0;
  z-index: -1;
}

#userHead::after{
  content: '';
  display: inline-block;
  width: 100%;
  height: clamp(5px, 130 / 500 * 100vw, 130px);
  background-image: url(/images2/rank_bottom.png);
  background-size: cover;
  position: absolute;
  left: 0;
  bottom: clamp(-40px, calc( -40 / 500 * 100vw), 0px);
  z-index: -1;
}

#userHead .userStatus {
  position: absolute;
  top: 94px;
  right: 10px;
  /* width: 100px; */
  background: #fff;
  border-radius: 20px;
  font-size: 12px;
  line-height: 12px;
  padding: 1px 1px 2px 1px;
  box-shadow: 0 0 5px #b1b1b1;
  padding: 3px 6px;
  z-index: 1;
}
#userHead .userStatus span {
  color: #1ed760;
  animation: blink 2s infinite;
}
@keyframes blink {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0.3;
  }
  100% {
    opacity: 1;
  }
}
#userHead .userStatus:empty {
  display: none;
}
#user_data_wrap {
  margin: 10px 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

#user_data_wrap::after {
  content: "";
  display: block;
  width: 50%;
}
#user_data_wrap .user_data {
  margin: auto;
  margin-bottom: clamp(4px, 10 / 500 * 100vw, 10px);
  font-size: clamp(12px, 24 / 500 * 100vw, 24px);
  text-align: center;
  display: table;
  background: #d78000;
  position: relative;
  height: 30px;
  line-height: 30px;
  color: #fff;
}
/* テキストを最前面に */
#user_data_wrap .user_data span {
  position: relative;
  z-index: 1;
  font-weight: bold;
}
#user_data_wrap .user_data .count {
  font-family: sans-serif; /* Press Start 2Pから変更 */
  color: var(--color-cast);
  font-size: 19px;
  position: relative;
  top: 3px;
  margin: 0 4px;
}
.user_favorite_box {
  width: 96%;
  margin: clamp(12px, 30 / 500 * 100vw, 30px) auto;
  text-align: left;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

.user_favorite_box .favorite_box_img {
  width: clamp(10px, 120 / 500 * 100vw, 120px);
  height: clamp(10px, 160 / 500 * 100vw, 160px);
  margin-right: clamp(10px, 20 / 500 * 100vw, 20px);
  border-radius: clamp(1px, 10 / 500 * 100vw, 10px);
  overflow: hidden;
  object-fit: cover;
  display: inline-block;
}

.user_favorite_box .favorite_box_img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.user_favorite_box .favorite_box_data {
  width: calc( 100% - clamp(10px, 20 / 500 * 100vw, 20px) - clamp(10px, 120 / 500 * 100vw, 120px));
  font-weight: bold;
  text-align: center;
  font-size: clamp(1px, 24 / 500 * 100vw, 24px);
}

.user_favorite_box .favorite_box_data .favorite_datecount {
  width: 100%;
}

.user_favorite_box .favorite_box_data .favorite_data {
  width: 100%;
}

.user_favorite_box .favorite_box_data .favorite_data .cast_name {
  width: 100%;
  margin: clamp(1px, 10 / 500 * 100vw, 10px) auto;
  padding: clamp(1px, 5 / 500 * 100vw, 5px) clamp(1px, 10 / 500 * 100vw, 10px);
  /* background: linear-gradient(to right, #ff6b9f, #ff316a); */
  color: #ec98b9;
  font-size: clamp(1px, 20 / 500 * 100vw, 20px);
  font-weight: bold;
  border-radius: clamp(1px, 20 / 500 * 100vw, 20px);
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

.user_favorite_box .favorite_box_data .favorite_data .shop_name {
  font-weight: normal;
}
#userFunc #btn_set {
  display: block;
}
#userFunc .godCertificate {
  background: var(--color-cast);
  color: #fff;
  margin: 5px auto;
}
#userFunc .userBlock {
  background: #ccc;
  margin: 5px auto;
}
#user_profile {
  width: 96%;
  margin: clamp(12px, 30 / 500 * 100vw, 30px) auto;
}

#user_profile > li {
  width: 100%;
  margin: clamp(8px, 20 / 500 * 100vw, 20px) auto;
  font-size: clamp(12px, 20 / 500 * 100vw, 20px);
  display: flex;
}

#user_profile > li .profile_name {
  width: 30%;
  margin-right: clamp(10px, 20 / 500 * 100vw, 20px);
  text-align: right;
  line-height: 20px;
}

#user_profile > li .profile_data {
  width: calc(100% - clamp(10px, 20 / 500 * 100vw, 20px) - 20%);
  text-align: left;
  font-weight: bold;
  font-size: 16px;
}
#user_profile.cast {
  text-align: center;
  font-size: 18px;
}
#user_profile.cast li {
  display: block;
  font-size: 18px;
}
.messageBox {
  padding: 10px;
}
/*castpage*/
.castInfo {
  font-size: clamp(1px, 22 / 500 * 100vw, 22px);
  /* color: #ccc; */
  line-height: clamp(1px, 30 / 500 * 100vw, 30px);
}
/*************
mypage
*************/
#mypage_head {
  width: 100%;
}

#mypage_head .head_inner {
  height: 100%;
  padding: clamp(10px, 20 / 500 * 100vw, 20px);
}

#mypage_head .head_inner .data_box {
  width: 100%;
  margin: auto;
  margin-bottom: 5px;
  font-size: clamp(12px, 20 / 500 * 100vw, 20px);
  display: flex;
  justify-content: space-between;
}

#mypage_head .head_inner .data_box span {
  /* padding: clamp(5px, 10 / 500 * 100vw, 10px); */
  display: inline-block;
}

#mypage_head .data_box > div {
  height: 30px;
  margin: 0 3px;
  margin-bottom: clamp(4px, 10 / 500 * 100vw, 10px);
  font-size: clamp(12px, 24 / 500 * 100vw, 24px);
  text-align: center;
  display: table;
  position: relative;
  height: 40px;
  line-height: 40px;
}
/* テキストを最前面に */
#mypage_head .data_box .plus {
  position: absolute;
  display: inline-block;
  width: 26px;
  height: 26px;
  line-height: 26px;
  font-weight: bold;
  top: 7px;
  right: 4px;
  font-weight: bold;
  font-size: 20px;
  background: var(--color-cast);
  color: #111;
}
#mypage_head .data_box .ticketIco {
  background: #fff;
  color: #7c5aff;
  height: 20px;
  line-height: 20px;
  /* position: absolute; */
  padding: 0 3px;
  border-radius: 3px;
  transform: rotate(-60deg);
  box-shadow: -2px 3px 3px #00000033;
}
#mypage_head .data_box > div .number {
  /* font-family: "Press Start 2P", cursive; */
  color: var(--color-cast);
  font-size: 19px;
  position: relative;
  top: 5px;
  margin: 0 4px;
  line-height: 0px;
  display: inline-block;
  /* overflow: hidden; */
}
.whole {
  width: 100%;
  padding: clamp(5px, 10 / 500 * 100vw, 10px);
  background: rgba(255, 255, 255, 1);
  font-size: clamp(13px, 24 / 500 * 100vw, 24px);
  border-radius: clamp(5px, 10 / 500 * 100vw, 10px);
  box-shadow: inset 0px 0px 10px 0px rgba(100, 100, 100, 0.2);
  text-align: center;
  overflow: hidden;
}
.whole p {
  margin: 0;
  display: inline-block;
  padding-left: 100%;
  white-space: nowrap;
  line-height: 1em;
  animation: whole 20s linear infinite;
}
@keyframes whole {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-100%);
  }
}

#mypage_head .head_inner .banner_box {
  width: 100%;
  margin: auto;
  margin-bottom: clamp(12px, 20 / 500 * 100vw, 20px);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

#mypage_head .head_inner .banner_box::before {
  content: "";
  display: block;
  width: clamp(72px, 160 / 500 * 100vw, 160px);
  order: 1;
}

#mypage_head .head_inner .banner_box::after {
  content: "";
  display: block;
  width: clamp(72px, 160 / 500 * 100vw, 160px);
}

#mypage_head .head_inner .banner_box .banner {
  width: clamp(72px, 160 / 500 * 100vw, 160px);
  height: clamp(54px, 120 / 500 * 100vw, 120px);
  margin-bottom: clamp(12px, 20 / 500 * 100vw, 20px);
}

#mypage_head .head_inner .banner_box .banner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

#mypage_head .head_inner .gift_box {
  width: 100%;
  margin: auto;
  margin-bottom: clamp(12px, 20 / 500 * 100vw, 20px);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

#mypage_head .head_inner .gift_box::before {
  content: "";
  display: block;
  width: clamp(72px, 160 / 500 * 100vw, 160px);
  order: 1;
}

#mypage_head .head_inner .gift_box::after {
  content: "";
  display: block;
  width: clamp(72px, 160 / 500 * 100vw, 160px);
}

#mypage_head .head_inner .gift_box .gift {
  width: clamp(72px, 160 / 500 * 100vw, 160px);
  height: clamp(72px, 160 / 500 * 100vw, 160px);
  margin-bottom: clamp(12px, 20 / 500 * 100vw, 20px);
}

#mypage_head .head_inner .gift_box .gift img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.alert_box {
  width: 98%;
  margin: auto;
  padding: clamp(3px, 5 / 500 * 100vw, 5px) clamp(12px, 20 / 500 * 100vw, 20px);
  background: rgba(255, 255, 255, 0.9);
  border: var(--color-cast) solid 1px;
  border-radius: 5px;
  text-align: center;
  color: var(--color-cast);
}

.alert_box i {
  margin-right: 5px;
  color: var(--color-cast);
}

.kyun_text {
  width: 98%;
  margin: clamp(5px, 10 / 500 * 100vw, 10px) auto;
}
.infoList .infoHead {
  width: auto;
  margin-top: clamp(5px, 10 / 500 * 100vw, 10px);
  padding: clamp(1px, 5 / 500 * 100vw, 5px) clamp(5px, 10 / 500 * 100vw, 10px);
  /* background: linear-gradient(to right, #a150ff, #7831ff);
  color: #fff;
  display: inline;
  border-radius: clamp(5px, 20 / 500 * 100vw, 20px); */
}
.infoList .infoText {
  margin-bottom: clamp(5px, 20 / 500 * 100vw, 20px);
  padding: clamp(5px, 10 / 500 * 100vw, 10px);
  color: #7831ff;
  border-bottom: solid 1px #ccc;
}
.infoList .infoText .infoDetails{
  padding: clamp(5px, 10 / 500 * 100vw, 10px);
  color: #686868;
}

/* mypage new */
#mypage.Men,
#mypage.Cast {
  width: 98%;
  margin: clamp(10px, 20 / 500 * 100vw, 20px) auto;
}
#mypage .myImageWrap {
  width: 60%;
  margin: clamp(10px, 20 / 500 * 100vw, 20px) auto;
  border-radius: 100%;
  overflow: hidden;
  position: relative;
  padding-top: 60%; /* 1:1のアスペクト比を維持 */
}
#mypage .myImageWrap img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
#mypage .head_inner {
  text-align: center;
}
#mypage .pointBox {
  border: solid 1px transparent;
  border-image: var(--color-gradient) 1;
  padding: clamp(10px, 20 / 500 * 100vw, 20px);
  color: var(--color-cast);
  margin: clamp(10px, 20 / 500 * 100vw, 20px) auto;
}
#mypage .voteChicketBuy {
  background: var(--color-cast);
  color: #fff;
  padding: 5px;
  border-radius: 5px;
  margin-top: clamp(1px, 10 / 500 * 100vw, 10px);
}
#mypage .adsWrap {
  width: calc(100% - clamp(10px, 20 / 500 * 100vw, 20px));
  margin: clamp(10px, 20 / 500 * 100vw, 20px) auto;
}
#mypage .adsWrap img {
  width: 100%;
}
#mypage .search_box {
  border: solid 1px transparent;
  border-image: var(--color-gradient) 1;
  padding: clamp(10px, 20 / 500 * 100vw, 20px);
  margin: 0 auto;
  text-align: center;
  font-weight: bold;
  font-size: clamp(10px, 20 / 500 * 100vw, 20px);
}
#mypage .search_box hr {
  margin: clamp(10px, 20 / 500 * 100vw, 20px) auto;
}
#mypage .search_box i {
  color: var(--color-cast);
  margin-right: clamp(10px, 20 / 500 * 100vw, 20px);
}
#mypage .slider {
  margin: 10px auto;
  border-radius: 10px;
  overflow: hidden;
  padding: 0;
  /* box-shadow: 0 0 10px #ccc; */
  padding-bottom: 10px;
}
#mypage .slider_title {
  background: var(--color-gradient);
  color: #fff;
  font-size: clamp(10px, 20 / 500 * 100vw, 20px);
  font-weight: bold;
  margin-bottom: 10px;
  text-align: center;
  padding: 5px;
}
#mypage .infoList {
  text-align: center;
  font-size: 12px;

}
#mypage .infoList > div {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#mypage .readMore {
  text-align: center;
  font-size: 14px;
  line-height: 24px;
  font-weight: bold;
  width: 50%;
  display: block;
  margin: 5px auto;
  background: #f1f1f1;
  color: #333;
  border-radius: 30px;
  font-weight: normal;
  padding: 1px;
}
#mypage .counter {
  text-align: center;
  font-size: 18px;
  font-weight: bold;
  /* width: 50%; */
  display: block;
}

/* 202502 new */
.topList {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  align-items: center;
}
.topList li {
  width: 46%;
  padding: clamp(1px, 5 / 500 * 100vw, 5px);
}
.topList .imgWrap {
  aspect-ratio: 3/4;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  width: 100%;
}
.topList .imgWrap img {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: clamp(1px, 10 / 500 * 100vw, 10px);
}
.topList .imgWrap a {
  display: block;
  width: 100%;
  height: 100%;
}
.topList .imgWrap img {
  object-fit: cover;
  width: 100%;
}
.topList .rankName {
  text-align: center;
  font-size: 20px;
  font-weight: bold;
}
.topList .name {
  padding: clamp(1px, 5 / 500 * 100vw, 5px) 0;
  text-align: center;
  font-size: clamp(1px, 16 / 500 * 100vw, 16px);
  background: linear-gradient(to right, #ff6b9f, #ff316a);
  color: #fff;
  border-radius: clamp(1px, 20 / 500 * 100vw, 20px);
}
.topList .shopName {
  margin: clamp(1px, 5 / 500 * 100vw, 5px) auto;
  text-align: center;
  font-size: clamp(1px, 14 / 500 * 100vw, 14px);
  color: #ff316a;
}
.topList .readMore {
  text-align: center;
  font-size: 14px;
  font-weight: bold;
  width: 50%;
  display: block;
  margin: 5px auto;
  background: #f1f1f1;
  color: #333;
  border-radius: 30px;
  font-weight: normal;
  padding: 1px;
}

.topList.cast .rankCaption {
  background-image: url('/images/caption_1st.png');
  background-size: 100% 100%;
  width: 100px;
  height: 66px;
  position: absolute;
  bottom: -10px;
  left: 0;
  z-index: 2;
}
.topList.cast .rankCaption.no2 {
  background-image: url('/images/caption_2nd.png');
  height: 55px;
  width: 83px;
}
.topList.cast .rankName {
  margin-top: 10px;
}
.topList.men .rankLabel {
  background-image: url('/images/label_1st.png');
  background-size: 100% 100%;
  width: 50px;
  height: 50px;
  position: absolute;
  top: 0;
  left: 0;
}
.topList.shop li {
  width: 100%;
  padding: 15px;
}
.topList.shop .rankBadge {
  background-image: url('/images/badge_1st.png');
  background-size: 100% 100%;
  width: 50px;
  height: 50px;
  position: absolute;
  top: -40px;
  left: 0;
  z-index: 2;
}
.topList.shop .rankName {
  margin-bottom: 10px;
}
.topList.shop .shopName {
  margin: 10px;
}
.topList.shop .imgWrap {
  padding-top: 0;
  aspect-ratio: 16/9;
}

.slide_cover{
  max-height: clamp(1px, 350 / 500 * 100vw, 350px);
  overflow: hidden;
}

#slider_list,
.slider_list {
  width: 100%;
  margin: 0 auto;
}

/* スライダーの各アイテム */
#slider_list .list_box,
.slider_list .list_box {
  margin: 0 clamp(1px, 5 / 500 * 100vw, 5px);
  padding: 0 4px;
}

/* 矢印ボタンのスタイル */
.slick-prev,
.slick-next {
  width: 40px;
  height: 40px;
  background: rgba(255, 255, 255, 0.8);
  border-radius: 50%;
  z-index: 1;
}

.slick-prev {
  left: -20px;
}

.slick-next {
  right: -20px;
}

.slick-prev:hover,
.slick-next:hover {
  background: rgba(255, 255, 255, 1);
}

/* スライダーの枠を調整 */
.slick-list {
  padding: 10px 0;
}

/* 画像のアスペクト比を保持 */
.imgWrap {
  position: relative;
  padding-top: 133.33%;
}
.slider .imgWrap {
  border-radius: 5px;
  overflow: hidden;
}

.shopSlider .imgWrap {
  height: 120px;
  border-radius: 10px;
  overflow: hidden;
}


#slider_list .list_box .infoList,
.slider_list .list_box .infoList{
  margin: clamp(1px, 5 / 500 * 100vw, 5px) auto;
  font-size: clamp(1px, 14 / 500 * 100vw, 14px);
}

.slide_name {
  text-align: center;
  font-size: 14px;
  font-weight: bold;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 30px;
}

.imgWrap img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.imgWrap video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
#userInfoList {
  text-align: center;
  margin: 30px;
  font-weight: bold;
  line-height: 20px;
}
#userInfoList li {
  margin-top: 10px;
}
#userInfoList li span {
  
}
/*************
shop_list
*************/

#shop_list {
  width: 98%;
  margin: clamp(14px, 30 / 500 * 100vw, 30px) auto;
}


/******2block*******/
.horizon_list_box {
  width: 96%;
  margin: clamp(10px, 20 / 500 * 100vw, 20px) auto
    clamp(15px, 30 / 500 * 100vw, 30px);
  text-align: left;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

.horizon_list_box .horizon_list_img {
  width: clamp(130px, 280 / 500 * 100vw, 280px);
  height: clamp(79px, 170 / 500 * 100vw, 170px);
  margin-right: clamp(10px, 20 / 500 * 100vw, 20px);
  border-radius: 10px;
  overflow: hidden;
}

.horizon_list_box .horizon_list_img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
}

.horizon_list_box .horizon_list_data {
  width: calc(
    100% - clamp(10px, 20 / 500 * 100vw, 20px) -
      clamp(130px, 280 / 500 * 100vw, 280px)
  );
}

.horizon_list_box .horizon_list_data .horizon_list_name,
.horizon_list_box .horizon_list_data .horizon_list_title {
  margin-bottom: clamp(4px, 8 / 500 * 100vw, 8px);
  font-size: clamp(1px, 20 / 500 * 100vw, 20px);
}

.horizon_list_box .horizon_list_data .horizon_list_area,
.horizon_list_box .horizon_list_data .horizon_list_tel,
.horizon_list_box .horizon_list_data .horizon_list_time,
.horizon_list_box .horizon_list_data .horizon_list_address,
.horizon_list_box .horizon_list_data .horizon_list_shop,
.horizon_list_box .horizon_list_data .horizon_list_period {
  margin-bottom: clamp(4px, 8 / 500 * 100vw, 8px);
  font-size: clamp(1px, 16 / 500 * 100vw, 16px);
}

.horizon_list_box .horizon_list_data .horizon_list_area i,
.horizon_list_box .horizon_list_data .horizon_list_tel i,
.horizon_list_box .horizon_list_data .horizon_list_time i,
.horizon_list_box .horizon_list_data .horizon_list_address i,
.horizon_list_box .horizon_list_data .horizon_list_shop i,
.horizon_list_box .horizon_list_data .horizon_list_period i {
  margin-right: clamp(4px, 8 / 500 * 100vw, 8px);
}



/*************
date_select
*************/
.date_select {
  width: 100%;
  margin: clamp(10px, 20 / 500 * 100vw, 20px) auto;
  display: flex;
  justify-content: space-around;
}

.date_select a {
  width: 13.5%;
  text-align: center;
  font-size: clamp(1px, 12 / 500 * 100vw, 12px);
  padding: clamp(8px, 15 / 500 * 100vw, 15px) 0;
  color: #fff;
  border-radius: 5px;
}

.date_select a:nth-child(1) {
  background: linear-gradient(to right, #f8a983, #f59f9e);
}
.date_select a:nth-child(2) {
  background: linear-gradient(to right, #f49ea2, #f096b0);
}
.date_select a:nth-child(3) {
  background: linear-gradient(to right, #f096b1, #ec98ba);
}
.date_select a:nth-child(4) {
  background: linear-gradient(to right, #ea9bbb, #e1a2c1);
}
.date_select a:nth-child(5) {
  background: linear-gradient(to right, #e0a3c2, #d4acc7);
}
.date_select a:nth-child(6) {
  background: linear-gradient(to right, #d2adc9, #c2b5cf);
}
.date_select a:nth-child(7) {
  background: linear-gradient(to right, #c0b6d0, #adbdd6);
}

.date_select.event a:nth-child(1),
.date_select.event a:nth-child(2),
.date_select.event a:nth-child(3),
.date_select.event a:nth-child(4),
.date_select.event a:nth-child(5),
.date_select.event a:nth-child(6),
.date_select.event a:nth-child(7) {
  background: #2dc5fe;
}

/*************
shop
*************/

.shop_space {
  width: 98%;
  margin: clamp(10px, 20 / 500 * 100vw, 20px) auto clamp(15px, 30 / 500 * 100vw, 30px);
  text-align: left;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

.shop_space .shop_space_img {
  width: 100%;
  display: block;
  border-radius: 5px 5px 0 0;
  display: flex;
  overflow: hidden;
}

.shop_space .shop_space_img img {
  object-fit: cover;
  object-position: center;
}

.shop_space .shop_space_data {
  width: 100%;
  font-size: clamp(12px, 20 / 500 * 100vw, 20px);
  /* box-shadow: 0 0 10px #ccc inset; */
  border-bottom: solid 2px rgb(226, 226, 226);
  padding: 5px;
  /* border-radius: 0 0 5px 5px; */
  background: #fff;
}

.shop_space .shop_space_data2 {
  width: 100%;
  font-size: clamp(12px, 20 / 500 * 100vw, 20px);
  /* box-shadow: 0 0 10px #ccc inset; */
  border-bottom: solid 2px rgb(226, 226, 226);
  padding: 5px;
  /* border-radius: 5px; */
  border-bottom: solid 2px rgb(226, 226, 226);
  background: #fff;
}

.shop_banner_box {
  width: 98%;
  margin: clamp(10px, 20 / 500 * 100vw, 20px) auto clamp(15px, 30 / 500 * 100vw, 30px);
  text-align: center;
}

.shop_banner_box img {
  width: 100%;
}
.infoList{
  text-align: center;
  font-weight: bold;
}
.entry_date{
  font-size: 12px;
  margin-bottom: clamp(1px, 5 / 500 * 100vw, 5px);
}

.infoList .name a.cast{
  width: 100%;
  padding: clamp(1px, 2 / 500 * 100vw, 2px) clamp(1px, 10 / 500 * 100vw, 10px) ;
  font-size: clamp(1px, 12 / 500 * 100vw, 12px);
  color: #fff;
  background: linear-gradient(to right, #ff6b9f, #ff316a);
  border-radius: clamp(1px, 20 / 500 * 100vw, 20px);
  display: block;
}

/*************
shop_head
*************/
#shop_top {
  width: clamp(5px, 500 / 500 * 100vw, 500px);
  min-height: clamp(5px, 500 / 500 * 100vw, 500px);
  margin: 0;
	padding:clamp(5px, 50 / 500 * 100vw, 50px) 0 clamp(5px, 50 / 500 * 100vw, 50px);
  text-align:center;
  background:url(/images2/third_bg.png) center center no-repeat;
  background-attachment:fixed;
  background-size: clamp(5px, 500 / 500 * 100vw, 500px);
  position: relative;
  z-index: 2;
}

#shop_top::before{
  content: '';
  display: inline-block;
  width: 100%;
  height: clamp(5px, 130 / 500 * 100vw, 130px);
  background-image: url(/images2/rank_top.png);
  background-size: cover;
  position: absolute;
  top: clamp(-15px, calc( -15 / 500 * 100vw), 0px);
  left: 0;
  z-index: -1;
}

#shop_top::after{
  content: '';
  display: inline-block;
  width: 100%;
  height: clamp(5px, 130 / 500 * 100vw, 130px);
  background-image: url(/images2/rank_bottom.png);
  background-size: cover;
  position: absolute;
  left: 0;
  bottom: clamp(-40px, calc( -40 / 500 * 100vw), 0px);
  z-index: -1;
}

#shop_head {
  width: 98%;
  margin: clamp(10px, 20 / 500 * 100vw, 20px) auto
    clamp(15px, 30 / 500 * 100vw, 30px);
  text-align: left;
  display: flex;
  flex-wrap: wrap;
  /* align-items: center; */
}

#shop_head .shop_img {
  width: clamp(130px, 280 / 500 * 100vw, 280px);
  height: clamp(79px, 170 / 500 * 100vw, 170px);
  margin-right: clamp(10px, 20 / 500 * 100vw, 20px);
  border-radius: 10px;
  overflow: hidden;
  display: inline-block;
}

#shop_head .shop_img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

#shop_head .shop_data {
}

#shop_head .shop_data i {
  margin-right: clamp(4px, 8 / 500 * 100vw, 8px);
}

#shop_head .shop_data .name {
  margin-bottom: clamp(5px, 10 / 500 * 100vw, 10px);
  font-size: clamp(14px, 20 / 500 * 100vw, 20px);
}

#shop_head .shop_data .invoice {
  margin-bottom: clamp(5px, 10 / 500 * 100vw, 10px);
  padding: clamp(2px, 4 / 500 * 100vw, 4px) clamp(4px, 8 / 500 * 100vw, 8px);
  color: #fff;
  font-size: clamp(10px, 14 / 500 * 100vw, 14px);
  background: #804ee1;
  border-radius: clamp(5px, 20 / 500 * 100vw, 20px);
  display: inline-block;
}

#shop_head .shop_data .open,
#shop_head .shop_data .tel,
#shop_head .shop_data .address,
#shop_head .shop_data .comment {
  font-size: clamp(12px, 16 / 500 * 100vw, 16px);
  margin-bottom: clamp(5px, 10 / 500 * 100vw, 10px);
}

#shop_head2 {
  width: 96%;
  margin: clamp(10px, 20 / 500 * 100vw, 20px) auto;
  text-align: left;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

#shop_head2 .shop_name {
  width: calc(
    98% - clamp(10px, 20 / 500 * 100vw, 20px) - clamp(110px, 200 / 500 * 100vw, 220px));
  margin-left: clamp(10px, 20 / 500 * 100vw, 20px);
  display: inline-block;
  font-size: clamp(1px, 24 / 500 * 100vw, 24px);
  font-weight: bold;
}

#shop_head2 .shop_btn {
  width: clamp(110px, 200 / 500 * 100vw, 220px);
  overflow: hidden;
  display: flex;
  justify-content: space-between;
}

#shop_head2 .shop_btn .btn {
  width: clamp(35px, 60 / 500 * 100vw, 70px);
  height: clamp(35px, 60 / 500 * 100vw, 70px);
  border-radius: clamp(5px, 10 / 500 * 100vw, 10px);
  font-size: clamp(1px, 15 / 500 * 100vw, 15px);
  /* background: linear-gradient(to right, #a79ceb, #a099ed); */
  background: linear-gradient(to right, #f5aa8e, #f39ea4);
  color: #fff;
  overflow: hidden;
}

#shop_head2 .shop_btn .btn:first-child {
  /* background: linear-gradient(to right, #b1a2e9, #a99eeb); */
  background: linear-gradient(to right, #f9b976, #f6af88);
}

#shop_head2 .shop_btn .btn:last-child {
  /* background: linear-gradient(to right, #a199f0, #9e97ee); */
  background: linear-gradient(to right, #f29aa9, #eb9ab4);
}

#shop_head2 .shop_btn .btn a {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

#shop_head2 .shop_btn .btn span {
  width: 100%;
  display: block;
  text-align: center;
}

#shop_head3 {
  width: 96%;
  margin: clamp(10px, 20 / 500 * 100vw, 20px) auto;
  text-align: left;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

#shop_head3 .shop_name {
  width: 100%;
  margin-bottom: clamp(10px, 20 / 500 * 100vw, 20px);
  display: inline-block;
  font-size: clamp(1px, 24 / 500 * 100vw, 24px);
  font-weight: bold;
  text-align: center;

}

#shop_head3 .shop_btn {
  width: 98%;
  margin: auto;
  overflow: hidden;
  display: flex;
  justify-content: space-between;
}

#shop_head3 .shop_btn .btn {
  width: 32%;
  height: clamp(20px, 40 / 500 * 100vw, 40px);
  border-radius: clamp(5px, 10 / 500 * 100vw, 10px);
  font-size: clamp(1px, 15 / 500 * 100vw, 15px);
  background: linear-gradient(to right, #ef97b1, #daa8c5);
  color: #fff;
  overflow: hidden;
}

#shop_head3 .shop_btn .btn:first-child {
  background: linear-gradient(to right, #f9b976, #f197af);
}

#shop_head3 .shop_btn .btn:last-child {
  background: linear-gradient(to right, #d7a9c6, #a7bed6);
}

#shop_head3 .shop_btn .btn a {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

#shop_head3 .shop_btn .btn span {
  text-align: center;
}

#shop_head4 {
  width: 96%;
  margin: clamp(10px, 20 / 500 * 100vw, 20px) auto;
  text-align: left;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

#shop_head4 .shop_name {
  width: calc(
    98% - clamp(10px, 20 / 500 * 100vw, 20px) - clamp(110px, 200 / 500 * 100vw, 220px));
  margin-right: clamp(10px, 20 / 500 * 100vw, 20px);
  display: inline-block;
  font-size: clamp(1px, 24 / 500 * 100vw, 24px);
  font-weight: bold;
}

#shop_head4 .shop_btn {
  width: clamp(110px, 200 / 500 * 100vw, 220px);
  overflow: hidden;
  display: flex;
  justify-content: space-between;
}

#shop_head4 .shop_btn .btn {
  width: clamp(35px, 60 / 500 * 100vw, 70px);
  height: clamp(35px, 60 / 500 * 100vw, 70px);
  border-radius: clamp(5px, 10 / 500 * 100vw, 10px);
  font-size: clamp(1px, 15 / 500 * 100vw, 15px);
  background: linear-gradient(to right, #d2abc8, #bfb3ce);
  color: #fff;
  overflow: hidden;
}

#shop_head4 .shop_btn .btn:first-child {
  background: linear-gradient(to right, #e1a3bf, #d7aac6);
}

#shop_head4 .shop_btn .btn:last-child {
  background: linear-gradient(to right, #bbb6d0, #a8bdd6);
}

#shop_head4 .shop_btn .btn a {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

#shop_head4 .shop_btn .btn span {
  width: 100%;
  display: block;
  text-align: center;
}

.shop_layout {
  width: 98%;
  margin: auto;
  margin-top: clamp(25px, 50 / 500 * 100vw, 50px);
  padding-bottom: clamp(25px, 50 / 500 * 100vw, 50px);
}

.shop_layout .images {
  width: clamp(20px, 480 / 500 * 100vw, 480px);
  height: clamp(10px, 292 / 500 * 100vw, 292px);
  margin: auto;
  margin-bottom: clamp(5px, 10 / 500 * 100vw, 10px);
  border-radius: 10px;
  overflow: hidden;
}

.shop_layout .images img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.shop_layout .title {
  width: clamp(20px, 480 / 500 * 100vw, 480px);
  margin: auto;
  margin-bottom: clamp(5px, 10 / 500 * 100vw, 10px);
  font-size: clamp(14px, 20 / 500 * 100vw, 20px);
  font-weight: bold;
  text-align: center;
  color: #ff6131;
}

.shop_layout .comment {
  width: clamp(20px, 480 / 500 * 100vw, 480px);
  margin: auto;
  margin-bottom: clamp(10px, 20 / 500 * 100vw, 20px);
  font-size: clamp(12px, 18 / 500 * 100vw, 18px);
}
.shop_data {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  max-width: 600px;
  margin: 0 auto;
  padding: 10px;
  background-color: #f9f9f9;
  border-radius: 10px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.shop_data > div {
  display: flex;
  align-items: center;
}

.shop_data .name {
  font-size: 1.5rem;
  font-weight: bold;
  color: #333;
  margin-bottom: 10px;
}

.shop_data .invoice {
  font-size: 0.9rem;
  color: #666;
  background-color: #e7f3fe;
  padding: 5px 10px;
  border-radius: 5px;
  margin-bottom: 10px;
}


.shop_data .open,
.shop_data .tel,
.shop_data .address {
  color: #555;
}

.shop_data i {
  margin-right: 10px;
  color: #007bff;
}

.shop_data .tel a {
  color: #007bff;
  text-decoration: none;
  transition: color 0.3s ease;
}

.shop_data .tel a:hover {
  color: #0056b3;
  text-decoration: underline;
}

.shop_data .comment {
  font-size: 0.95rem;
  line-height: 1.6;
  color: #333;
  background-color: #f4f4f4;
  padding: 10px;
  border-radius: 8px;
  white-space: pre-line;
}
.lineWrap {
  text-align: center;
}

/*************
shop_event
*************/

/*************
shop_system
*************/
.system_wrap {
  margin: 10px auto;
  overflow: hidden;
  padding: 0;
  /* box-shadow: 0 0 10px #ccc; */
  padding-bottom: 10px;
}
.system_wrap .system_title {
  width: 90%;
  background: var(--color-gradient);
  color: #fff;
  font-size: clamp(10px, 20 / 500 * 100vw, 20px);
  font-weight: bold;
  margin: 10px auto;
  text-align: center;
  padding: 5px;
  border-radius: clamp(1px, 10 / 500 * 100vw, 10px);
}

.system_box {
  width: 98%;
  margin: clamp(10px, 20 / 500 * 100vw, 20px) auto clamp(25px, 50 / 500 * 100vw, 50px);
  padding: clamp(5px, 10 / 500 * 100vw, 10px);
  padding-bottom: clamp(25px, 50 / 500 * 100vw, 50px);
  font-size: clamp(16px, 24 / 500 * 100vw, 24px);
  line-height: 1.8em;
  text-align: center;
}



/*************
shop_recruit
*************/
.recruit_box {
  width: 98%;
  margin: clamp(10px, 20 / 500 * 100vw, 20px) auto;
  padding: clamp(5px, 10 / 500 * 100vw, 10px);
  padding-bottom: clamp(25px, 50 / 500 * 100vw, 50px);
  font-size: clamp(16px, 24 / 500 * 100vw, 24px);
  line-height: 1.8em;
  text-align: left;
}
.treatmentList {
  width: 98%;
  margin: auto;
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
}

.treatmentList li {
  background: #7831ff;
  color: #fff;
  padding: clamp(1px, 5 / 500 * 100vw, 5px);
  border-radius: clamp(25px, 50 / 500 * 100vw, 50px);
  font-size: clamp(1px, 12 / 500 * 100vw, 12px);
}
/*************
shop_schedule_week
*************/
#schedule_top {
  width: 96%;
  margin: clamp(10px, 20 / 500 * 100vw, 20px) auto;
  text-align: left;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

#schedule_top .shop_btn {
  width: 98%;
  margin: auto;
  overflow: hidden;
  display: flex;
  justify-content: space-between;
}

#schedule_top .shop_btn .btn {
  width: 32%;
  height: clamp(20px, 40 / 500 * 100vw, 40px);
  border-radius: clamp(5px, 10 / 500 * 100vw, 10px);
  font-size: clamp(10px, 18 / 500 * 100vw, 18px);
  background: linear-gradient(to right, #f097b1, #daa8c5);
  color: #fff;
  overflow: hidden;
}

#schedule_top .shop_btn .btn:first-child {
  background: linear-gradient(to right, #f9b978, #f196af);
}

#schedule_top .shop_btn .btn:last-child {
  background: linear-gradient(to right, #daa8c5, #a6bed7);
}

#schedule_top .shop_btn .btn a {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

#schedule_top .shop_btn .btn span {
  text-align: center;
}

/*************
shop_schedule_slide
*************/
.schedule_wrap {
  width: 98%;
  margin: 0px auto 5px;
  /* border: #eee solid 1px; */
  display: flex;
}

.schedule_date {
  width: 15%;
  padding: clamp(10px, 20 / 500 * 100vw, 20px) 0;
  background-color: #eee;
  text-align: center;
  font-size: clamp(1px, 14 / 500 * 100vw, 14px);
  display: flex;
  justify-content: center;
  align-items: center;
}

/****************
	board
****************/

.board_list {
  width: 98%;
  margin: clamp(12px, 30 / 500 * 100vw, 30px) auto
    clamp(25px, 50 / 500 * 100vw, 50px);
  font-size: clamp(15px, 30 / 500 * 100vw, 30px);
  font-weight: bold;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}

.board_list > li {
  width: 100%;
  margin: clamp(10px, 15 / 500 * 100vw, 15px) auto;
  padding-left: clamp(25px, 50 / 500 * 100vw, 50px);
  position: relative;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.board_list > li::before {
  content: "";
  display: block;
  width: clamp(17px, 30 / 500 * 100vw, 30px);
  height: clamp(17px, 30 / 500 * 100vw, 30px);
  background-image: url(../images/board_icon.webp);
  background-size: contain;
  background-repeat: no-repeat;
  position: absolute;
  top: clamp(2px, 5 / 500 * 100vw, 5px);
  left: clamp(5px, 10 / 500 * 100vw, 10px);
}

.board_list > li > span {
  min-width: 100%;
  text-align: left;
  font-size: clamp(10px, 20 / 500 * 100vw, 20px);
  font-weight: normal;
}

/****************
	board
****************/
#board_main{
  padding-bottom: clamp(20px, 100 / 500 * 100vw, 100px);
}

.board_mssage_box,
.board_my_mssage_box {
  width: 96%;
  margin: clamp(10px, 20 / 500 * 100vw, 20px) auto clamp(20px, 40 / 500 * 100vw, 40px);
  text-align: left;
  display: flex;
  flex-wrap: wrap;
  align-items: normal;
}

.board_mssage_box .board_mssage_img {
  width: clamp(48px, 100 / 500 * 100vw, 100px);
  height: clamp(48px, 100 / 500 * 100vw, 100px);
  margin-right: clamp(10px, 20 / 500 * 100vw, 20px);
  border-radius: clamp(1px, 10 / 500 * 100vw, 10px);
  overflow: hidden;
  object-fit: cover;
  display: inline-block;
}

.board_my_mssage_box .board_mssage_img {
  width: clamp(48px, 100 / 500 * 100vw, 100px);
  height: clamp(48px, 100 / 500 * 100vw, 100px);
  margin-left: clamp(10px, 20 / 500 * 100vw, 20px);
  margin-right: 0;
  border-radius: clamp(1px, 10 / 500 * 100vw, 10px);
  overflow: hidden;
  object-fit: cover;
  display: inline-block;
  order: 1;
}

.board_mssage_box .board_mssage_img img,
.board_my_mssage_box .board_mssage_img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.board_mssage_box .board_mssage_data,
.board_my_mssage_box .board_mssage_data {
  width: calc(
    100% - clamp(10px, 20 / 500 * 100vw, 20px) -
      clamp(48px, 100 / 500 * 100vw, 100px)
  );
}

.board_mssage_box .board_mssage_data .board_mssage_data_inner,
.board_my_mssage_box .board_mssage_data .board_mssage_data_inner {
  width: 100%;
  padding: clamp(3px, 5 / 500 * 100vw, 5px);
  border-bottom: #cccccc solid 1px;
  display: flex;
  align-items: center;
}

.board_mssage_box
  .board_mssage_data
  .board_mssage_data_inner
  .board_mssage_name,
.board_my_mssage_box
  .board_mssage_data
  .board_mssage_data_inner
  .board_mssage_name {
  width: 60%;
  font-size: clamp(12px, 24 / 500 * 100vw, 24px);
}

.board_mssage_box
  .board_mssage_data
  .board_mssage_data_inner
  .board_mssage_name
  .nice,
.board_my_mssage_box
  .board_mssage_data
  .board_mssage_data_inner
  .board_mssage_name
  .nice {
  margin: 5px 0;
  font-size: clamp(10px, 16 / 500 * 100vw, 16px);
  display: flex;
  align-content: center;
}

.board_mssage_box
  .board_mssage_data
  .board_mssage_data_inner
  .board_mssage_name
  .nice
  .like,
.board_my_mssage_box
  .board_mssage_data
  .board_mssage_data_inner
  .board_mssage_name
  .nice
  .like {
  width: clamp(10px, 20 / 500 * 100vw, 20px); /* 正方形を作る */
  height: clamp(10px, 20 / 500 * 100vw, 20px); /* 正方形を作る */
  margin-right: clamp(5px, 5 / 500 * 100vw, 5px);
  position: relative; /* 基準位置とする */
  display: inline-block;
}

.board_mssage_box
  .board_mssage_data
  .board_mssage_data_inner
  .board_mssage_name
  .nice
  .like::before,
.board_mssage_box
  .board_mssage_data
  .board_mssage_data_inner
  .board_mssage_name
  .nice
  .like::after,
.board_my_mssage_box
  .board_mssage_data
  .board_mssage_data_inner
  .board_mssage_name
  .nice
  .like::before,
.board_my_mssage_box
  .board_mssage_data
  .board_mssage_data_inner
  .board_mssage_name
  .nice
  .like::after {
  content: ""; /* 疑似要素に必須 */
  width: 50%; /* ハートの丸い部分の大きさにかかわる */
  height: 80%; /* ハートの高さにかかわる */
  background: #ff99ff; /* ハートの色 */
  border-radius: 25px 25px 0 0; /* ハートの半円を生成 */
  display: block; /* ブロック要素にする */
  position: absolute; /* 相対位置に指定 */
}

.board_mssage_box
  .board_mssage_data
  .board_mssage_data_inner
  .board_mssage_name
  .nice
  .like::before,
.board_mssage_box
  .board_mssage_data
  .board_mssage_data_inner
  .board_mssage_name
  .nice
  .like_check::before,
.board_my_mssage_box
  .board_mssage_data
  .board_mssage_data_inner
  .board_mssage_name
  .nice
  .like::before,
.board_my_mssage_box
  .board_mssage_data
  .board_mssage_data_inner
  .board_mssage_name
  .nice
  .like_check::before {
  transform: rotate(-45deg); /* 左に回転 */
  left: 14%; /* 左からの位置を指定 */
}

.board_mssage_box
  .board_mssage_data
  .board_mssage_data_inner
  .board_mssage_name
  .nice
  .like::after,
.board_mssage_box
  .board_mssage_data
  .board_mssage_data_inner
  .board_mssage_name
  .nice
  .like_check::after,
.board_my_mssage_box
  .board_mssage_data
  .board_mssage_data_inner
  .board_mssage_name
  .nice
  .like::after,
.board_my_mssage_box
  .board_mssage_data
  .board_mssage_data_inner
  .board_mssage_name
  .nice
  .like_check::after {
  transform: rotate(45deg); /* 右に回転 */
  right: 14%; /* 右からの位置を指定 */
}

.board_mssage_box
  .board_mssage_data
  .board_mssage_data_inner
  .board_mssage_date,
.board_my_mssage_box
  .board_mssage_data
  .board_mssage_data_inner
  .board_mssage_date {
  width: 40%;
  text-align: right;
  font-size: clamp(10px, 16 / 500 * 100vw, 16px);
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.board_mssage_box
  .board_mssage_data
  .board_mssage_data_inner
  .board_mssage_date
  span,
.board_my_mssage_box
  .board_mssage_data
  .board_mssage_data_inner
  .board_mssage_date
  span {
  display: inline-block;
  margin-right: clamp(5px, 10 / 500 * 100vw, 10px);
}

.board_mssage_box
  .board_mssage_data
  .board_mssage_data_inner
  .board_mssage_date
  .like,
.board_mssage_box
  .board_mssage_data
  .board_mssage_data_inner
  .board_mssage_date
  .like_check {
  width: clamp(15px, 30 / 500 * 100vw, 30px); /* 正方形を作る */
  height: clamp(15px, 30 / 500 * 100vw, 30px); /* 正方形を作る */
  position: relative; /* 基準位置とする */
}

.board_mssage_box
  .board_mssage_data
  .board_mssage_data_inner
  .board_mssage_date
  .like::before,
.board_mssage_box
  .board_mssage_data
  .board_mssage_data_inner
  .board_mssage_date
  .like::after,
.board_mssage_box
  .board_mssage_data
  .board_mssage_data_inner
  .board_mssage_date
  .like_check::before,
.board_mssage_box
  .board_mssage_data
  .board_mssage_data_inner
  .board_mssage_date
  .like_check::after {
  content: ""; /* 疑似要素に必須 */
  width: 50%; /* ハートの丸い部分の大きさにかかわる */
  height: 80%; /* ハートの高さにかかわる */
  border-radius: 25px 25px 0 0; /* ハートの半円を生成 */
  display: block; /* ブロック要素にする */
  position: absolute; /* 相対位置に指定 */
}

.board_mssage_box
  .board_mssage_data
  .board_mssage_data_inner
  .board_mssage_date
  .like::before,
.board_mssage_box
  .board_mssage_data
  .board_mssage_data_inner
  .board_mssage_date
  .like::after {
  background: #ccc; /* ハートの色 */
}

.board_mssage_box
  .board_mssage_data
  .board_mssage_data_inner
  .board_mssage_date
  .like_check::before,
.board_mssage_box
  .board_mssage_data
  .board_mssage_data_inner
  .board_mssage_date
  .like_check::after {
  background: #ff99ff; /* ハートの色 */
}

.board_mssage_box
  .board_mssage_data
  .board_mssage_data_inner
  .board_mssage_date
  .like::before,
.board_mssage_box
  .board_mssage_data
  .board_mssage_data_inner
  .board_mssage_date
  .like_check::before {
  transform: rotate(-45deg); /* 左に回転 */
  left: 14%; /* 左からの位置を指定 */
}

.board_mssage_box
  .board_mssage_data
  .board_mssage_data_inner
  .board_mssage_date
  .like::after,
.board_mssage_box
  .board_mssage_data
  .board_mssage_data_inner
  .board_mssage_date
  .like_check::after {
  transform: rotate(45deg); /* 右に回転 */
  right: 14%; /* 右からの位置を指定 */
}

.board_mssage_box .board_mssage_data .review_message,
.board_my_mssage_box .board_mssage_data .review_message {
  width: 100%;
  margin: auto;
  margin-top: clamp(4px, 10 / 500 * 100vw, 10px);
  padding: 10px;
  font-size: clamp(12px, 20 / 500 * 100vw, 20px);
  /* border-radius: 10px;
  box-shadow: inset 0px 0px 10px 0px rgba(100, 100, 100, 0.2); */
}

.board_message_form {
  width: clamp(20px, 480 / 500 * 100vw, 480px);
  margin: 0 5px;
  padding-top: clamp(12px, 30 / 500 * 100vw, 30px);
  display: flex;
  justify-content: space-between;
  position: fixed;
  bottom: 60px;
  /* left: 50%; */
}

.board_message_form .board_message_input {
  width: calc(100% - 45px);
  height: 40px;
  padding: 0 5px;
  border: #ccc solid 1px;
  border-radius: 10px;
}

.board_message_form .board_message_send {
  width: 40px;
  height: 40px;
  padding-left: 8px;
  color: #fff;
  border-radius: 10px;
  font-size: 20px;
  background: linear-gradient(to right, #ff6835, #ff6332);
}
#boardAddForm {
  
}
#boardAddForm input {
  width: 100%;
  margin: auto;
  margin-top: clamp(4px, 10 / 500 * 100vw, 10px);
  padding: 10px;
  font-size: clamp(12px, 20 / 500 * 100vw, 20px);
  border-radius: 10px;
  border: #ccc solid 1px;
  /* box-shadow: inset 0px 0px 10px 0px rgba(100, 100, 100, 0.2); */
}
#boardAddForm textarea {
  width: 100%;
  height: 300px;
  margin: auto;
  margin-top: clamp(4px, 10 / 500 * 100vw, 10px);
  padding: 10px;
  font-size: clamp(12px, 20 / 500 * 100vw, 20px);
  border-radius: 10px;
  border: #ccc solid 1px;
  /* box-shadow: inset 0px 0px 10px 0px rgba(100, 100, 100, 0.2); */
}
#boardAddForm button[type="submit"] {
  width: clamp(4px, 240 / 500 * 100vw, 240px);
  height: clamp(4px, 40 / 500 * 100vw, 40px);
  padding-left: 8px;
  text-align: center;
  color: #fff;
  border-radius: clamp(4px, 10 / 500 * 100vw, 10px);
  font-size: 20px;
  margin: 10px auto;
  display: block;
  background: linear-gradient(to right, #ffd035, #ffae00);
}
/****************
memory
****************/
#input_form {
  width: clamp(10px, 480 / 500 * 100vw, 480px);
  margin: clamp(12px, 30 / 500 * 100vw, 30px) auto;
}

.memory_img {
  width: clamp(300px, 480 / 500 * 100vw, 480px);
  height: clamp(300px, 480 / 500 * 100vw, 480px);
  margin: clamp(12px, 30 / 500 * 100vw, 30px) auto
    clamp(8px, 15 / 500 * 100vw, 15px);
  border-radius: 10px;
  overflow: hidden;
}

.memory_img img,
.memory_img video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.memory_like {
  width: clamp(30px, 480 / 500 * 100vw, 480px);
  margin: clamp(5px, 10 / 500 * 100vw, 10px) auto;
  font-size: clamp(18px, 24 / 500 * 100vw, 24px);
}

.memory_date {
  width: clamp(30px, 480 / 500 * 100vw, 480px);
  margin: auto;
  margin-top: clamp(1px, 5 / 500 * 100vw, 5px);
  padding: clamp(1px, 5 / 500 * 100vw, 5px);
  text-align: center;
  font-size: clamp(18px, 24 / 500 * 100vw, 24px);
  color: #fff;
  background: linear-gradient(to right, #ffd035, #ffae00);
  border-radius: clamp(1px, 50 / 500 * 100vw, 50px);
}

.memory_shop {
  width: clamp(30px, 480 / 500 * 100vw, 480px);
  margin: auto;
  margin-top: clamp(10px, 20 / 500 * 100vw, 20px);
  text-align: left;
  font-size: clamp(18px, 24 / 500 * 100vw, 24px);
}

.memory_like {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.memory_title {
  width: clamp(300px, 480 / 500 * 100vw, 480px);
  margin: auto;
  margin-top: clamp(10px, 20 / 500 * 100vw, 20px);
  text-align: left;
  font-size: clamp(20px, 25 / 500 * 100vw, 25px);
  font-weight: bold;
}

.memory_name {
  margin: auto;
  margin-top: clamp(10px, 20 / 500 * 100vw, 20px);
  padding: clamp(1px, 5 / 500 * 100vw, 5px);
  text-align: center;
  font-size: clamp(20px, 25 / 500 * 100vw, 25px);
  font-weight: bold;
}

.memory_name.cast{ color: #ec98b9;}
.memory_name.user{ color: #5a71ff;}

.memory_text {
  width: clamp(300px, 480 / 500 * 100vw, 480px);
  margin: clamp(10px, 20 / 500 * 100vw, 20px) auto;
  /* padding: clamp(12px, 20 / 500 * 100vw, 20px); */
  font-size: clamp(12px, 20 / 500 * 100vw, 20px);
  /* border-radius: clamp(1px, 10 / 500 * 100vw, 10px);
  box-shadow: inset 0px 0px 10px 0px rgba(100, 100, 100, 0.2); */
}

/****************
form
****************/

.error_message {
  width: 100%;
  margin: clamp(12px, 30 / 500 * 100vw, 30px) 0;
  text-align: center;
  color: #ff6131;
  font-size: clamp(12px, 18 / 500 * 100vw, 18px);
}

.info_message {
  width: 100%;
  margin: clamp(12px, 30 / 500 * 100vw, 30px) 0;
  text-align: center;
  color: #ff6131;
  font-size: clamp(12px, 18 / 500 * 100vw, 18px);
}

#input_form {
  width: clamp(10px, 480 / 500 * 100vw, 480px);
  margin: clamp(12px, 30 / 500 * 100vw, 30px) auto;
}
#input_form > dl {
  display: flex;
  flex-direction: column;
  gap: clamp(12px, 20 / 500 * 100vw, 20px);
}
#input_form > dl > dt {
  font-size: clamp(12px, 24 / 500 * 100vw, 24px);
  font-weight: bold;
}

#input_form > dl > dt .img_del {
  margin-left: clamp(5px, 10 / 500 * 100vw, 10px);
  padding: 3px 5px;
  display: inline-block;
  background-color: #333;
  font-size: clamp(10px, 18 / 500 * 100vw, 18px);
  color: #fff;
  border-radius: 5px;
  text-align: center;
}
.info_box {
  margin: 20px;
}
.info_box .note {
  background: var(--color-main);
  color: #fff;
  border-radius: 5px;
  text-align: center;
  padding: 3px;
}
/****************
	削除モーダル
****************/
/*モーダルを開くボタン*/
.modal-open {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 150px;
  margin: auto;
  cursor: pointer;
}

/*モーダルを閉じるボタンの指定*/
#reserve_list .cancel .modal-open {
  width: 80px;
  padding: 5px;
}

/*モーダル本体の指定 + モーダル外側の背景の指定*/
.modal-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  text-align: center;
  background: rgba(0, 0, 0, 0.5);
  padding: 40px 20px;
  overflow: auto;
  opacity: 0;
  visibility: hidden;
  transition: 0.3s;
  box-sizing: border-box;
  z-index: 5;
}

/*モーダル本体の擬似要素の指定*/
.modal-container:before {
  content: "";
  display: inline-block;
  vertical-align: middle;
  height: 100%;
}
/*モーダル本体に「active」クラス付与した時のスタイル*/
.modal-container.active {
  opacity: 1;
  visibility: visible;
}
/*モーダル枠の指定*/
.modal-body {
  position: relative;
  display: inline-block;
  vertical-align: middle;
  width: clamp(300px, 500 / 500 * 100vw, 500px);
  height: clamp(150px, 250 / 500 * 100vw, 250px);
  background-color: #ffffff;
  border-radius: 5px;
  z-index: 5;
}

/*画像削除ボタン*/
.modal-body .del_btn {
  width: clamp(120px, 200 / 500 * 100vw, 200px);
  height: clamp(30px, 50 / 500 * 100vw, 50px);
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  bottom: clamp(24px, 40 / 500 * 100vw, 40px);
  left: clamp(24px, 40 / 500 * 100vw, 40px);
  color: #fff;
  cursor: pointer;
  background: #ff6131;
  border-radius: 5px;
  z-index: 999;
}

.modal-body .del_btn:hover {
  color: #fff;
}

.modal-body .del_btn a {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/*画像削除いいえボタン*/
.modal-body .del_cancel {
  width: clamp(120px, 200 / 500 * 100vw, 200px);
  height: clamp(30px, 50 / 500 * 100vw, 50px);
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  bottom: clamp(24px, 40 / 500 * 100vw, 40px);
  right: clamp(24px, 40 / 500 * 100vw, 40px);
  color: #fff;
  cursor: pointer;
  background: #333;
  border-radius: 5px;
  z-index: 999;
}

.modal-body .del_cancel:hover {
  color: #fff;
}

/*モーダルを閉じるボタンの指定  */
.modal-close {
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: -50px;
  right: -10px;
  cursor: pointer;
  font-size: 40px !important;
  color: #ffffff !important;
}

/*モーダル内のコンテンツの指定*/
.modal-content {
  text-align: center;
  padding: 20px;
  border: none !important;
  background: none !important;
}

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

/****************
	削除モーダルここまで
****************/

#input_form > dl > dt .req {
  font-size: clamp(10px, 12 / 500 * 100vw, 12px);
  font-weight: normal;
  color: #ff5a79;
}

#input_form > dl > dd {
  width: 100%;
  margin: auto;
  margin-bottom: clamp(14px, 30 / 500 * 100vw, 30px);
  display: flex;
  flex-wrap: wrap;
}

#input_form > dl > dd > .err {
  color: #ff6131;
  margin-top: clamp(4px, 10 / 500 * 100vw, 10px);
  font-size: clamp(10px, 14 / 500 * 100vw, 14px);
}

#input_form > dl > dd .text {
  width: 100%;
  margin: auto;
  margin-top: clamp(4px, 10 / 500 * 100vw, 10px);
  padding: 10px;
  font-size: clamp(12px, 20 / 500 * 100vw, 20px);
}

#input_form > dl > dd > .remarks {
  margin-top: clamp(4px, 5 / 500 * 100vw, 5px);
  font-size: clamp(10px, 14 / 500 * 100vw, 14px);
}

#input_form > dl > dd > .shop_check {
  color: #ff5a79;
  margin-top: clamp(4px, 5 / 500 * 100vw, 5px);
}

#input_form > dl > dd > input[type="text"],
#input_form > dl > dd > input[type="password"],
#input_form > dl > dd > input[type="number"],
#input_form > dl > dd > input[type="date"],
#input_form > dl > dd > input[type="email"],
#input_form > dl > dd > input[type="tel"],
#input_form > dl > dd > select {
  width: 100%;
  margin: auto;
  margin-top: clamp(4px, 10 / 500 * 100vw, 10px);
  padding: 10px;
  font-size: clamp(12px, 20 / 500 * 100vw, 20px);
  border-radius: 10px;
  border: #ccc solid 1px;
  /* box-shadow: inset 0px 0px 10px 0px rgba(100, 100, 100, 0.2); */
}

#input_form > dl > dd > textarea {
  width: 100%;
  height: 300px;
  margin: auto;
  margin-top: clamp(4px, 10 / 500 * 100vw, 10px);
  padding: 10px;
  font-size: clamp(12px, 20 / 500 * 100vw, 20px);
  border-radius: 10px;
  border: #ccc solid 1px;
  /* box-shadow: inset 0px 0px 10px 0px rgba(100, 100, 100, 0.2); */
}

.no-spin::-webkit-inner-spin-button,
.no-spin::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
  -moz-appearance: textfield;
}

#input_form > dl > dd > .radio_box,
#input_form > dl > dd > .check_box {
  padding: 10px 10px 10px 0;
}

#input_form > dl > dd > .radio_box {
  padding: 10px 10px 10px 0;
}

#input_form > dl > dd > .radio_box input[type="radio"],
#input_form > dl > dd > .check_box input[type="checkbox"] {
  display: none;
}

#input_form > dl > dd > .radio_box label,
#input_form > dl > dd > .check_box label {
  cursor: pointer;
  padding-left: 30px;
  position: relative;
}

#input_form > dl > dd > .radio_box label::before,
#input_form > dl > dd > .radio_box label::after,
#input_form > dl > dd > .check_box label::before,
#input_form > dl > dd > .check_box label::after {
  content: "";
  display: block;
  border-radius: 50%;
  position: absolute;
  transform: translateY(-50%);
  top: 50%;
}

#input_form > dl > dd > .radio_box label::before,
#input_form > dl > dd > .check_box label::before {
  background-color: #fff;
  border: 1px solid #ccc;
  height: 20px;
  width: 20px;
  left: 5px;
}

#input_form > dl > dd > .radio_box label::after,
#input_form > dl > dd > .check_box label::after {
  background-color: #ccc;
  opacity: 0;
  height: 16px;
  width: 16px;
  left: 7px;
}

#input_form > dl > dd > .radio_box input:checked + label::after,
#input_form > dl > dd > .check_box input:checked + label::after {
  opacity: 1;
}

#input_form > dl > dd.file_dd {
  width: 100%;
  margin: auto;
  margin-bottom: clamp(14px, 30 / 500 * 100vw, 30px);
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
}

#input_form > dl > dd .circle_img {
  width: clamp(150px, 250 / 500 * 100vw, 250px);
  height: clamp(150px, 250 / 500 * 100vw, 250px);
  margin: auto;
  margin-top: clamp(4px, 10 / 500 * 100vw, 10px);
  border-radius: 50%;
  overflow: hidden;
}

#input_form > dl > dd .square_img {
  width: clamp(200px, 250 / 500 * 100vw, 250px);
  height: clamp(200px, 250 / 500 * 100vw, 250px);
  margin: auto;
  margin-top: clamp(4px, 10 / 500 * 100vw, 10px);
  border-radius: 10px;
  overflow: hidden;
}

#input_form > dl > dd .rectangle_img {
  width: clamp(20px, 210 / 500 * 100vw, 210px);
  height: clamp(20px, 280 / 500 * 100vw, 280px);
  margin: auto;
  margin-top: clamp(4px, 10 / 500 * 100vw, 10px);
  border-radius: 10px;
  overflow: hidden;
}

#input_form > dl > dd .name_box {
  margin: auto;
  margin-top: clamp(4px, 10 / 500 * 100vw, 10px);
  text-align: center;
  font-size: clamp(12px, 20 / 500 * 100vw, 20px);
}

#input_form > dl > dd .circle_img img,
#input_form > dl > dd .square_img img,
#input_form > dl > dd .rectangle_img img {
  width: 100%;
  height: 100%;
  object-position: 50% 50%;
  object-fit: cover;
}

#input_form > dl > dd .circle_img video,
#input_form > dl > dd .square_img video,
#input_form > dl > dd .rectangle_img video {
  width: 100%;
  object-fit: cover;
  height: 100%;
  object-position: 50% 50%;
}

#input_form > dl > dd .file__label {
  width: 200px;
  margin: auto;
  margin-top: clamp(4px, 10 / 500 * 100vw, 10px);
  padding: 0.5em;
  background-color: #707070;
  font-size: 16px;
  line-height: 1.5;
  text-align: center;
  color: #fff;
  cursor: pointer;
  display: block;
  transition: opacity 0.3s ease;
  border-radius: 10px;
}
#input_form span.required {
  background-color: var(--color-orange);
  font-size: 12px;
  font-weight: normal;
  margin-left: 4px;
  color: #fff;
  border-radius: 3px;
  padding: clamp(1px, 3 / 500 * 100vw, 3px) clamp(1px, 5 / 500 * 100vw, 5px);
}
/* .file__label:hover {
opacity: 0.7;
} */

#input_form > dl > dd .file__none {
  font-size: 14px;
  line-height: 1.5;
  text-align: center;
  margin-top: clamp(4px, 10 / 500 * 100vw, 10px);
  word-break: break-all;
}

#input_form > dl > dd input[type="file"] {
  display: none;
}

#input_form > dl > dd input[type="file"].upimg {
  width: clamp(300px, 400 / 500 * 100vw, 400px);
  height: 30px;
  margin: 10px auto;
  color: rgb(31, 41, 55);
  cursor: pointer;
  border: 1px solid rgb(191, 194, 199);
  border-radius: 5px;
  padding-right: 0.5rem;
  display: inline;
}

#input_form > dl > dd input[type="file"].upimg::file-selector-button,
#input_form > dl > dd input[type="file"].upimg::-webkit-file-upload-button {
  height: 30px;
  background-color: rgb(209, 213, 219);
  color: rgb(31, 41, 55);
  border: none;
  cursor: pointer;
  border-right: 1px solid rgb(191, 194, 199);
  padding: 0.25rem 1rem;
  margin-right: 1rem;
}

#input_form > .btn_box {
  width: 100%;
  text-align: center;
}

#input_form > .btn_box .send_btn {
  width: clamp(148px, 360 / 500 * 100vw, 360px);
  height: clamp(33px, 80 / 500 * 100vw, 80px);
  margin: clamp(12px, 30 / 500 * 100vw, 30px) auto;
  text-align: center;
  color: #fff;
  font-size: clamp(13px, 28 / 500 * 100vw, 28px);
  font-weight: bold;
  background: linear-gradient(to right, #f9bc71, #f196b0, #d9a9c6, #a1c1d9);
  border-radius: 10px;
  outline: none;
  border: none;
}

.completion_comment {
  width: 100%;
  margin: clamp(50px, 100 / 500 * 100vw, 100px) auto;
  text-align: center;
  font-size: clamp(13px, 28 / 500 * 100vw, 28px);
}

.agreement_text{
  width: 100%;
}

#agreement{
  width: 100%;
  height: clamp(200px, 300 / 500 * 100vw, 300px);
  margin: auto;
  margin-top: clamp(4px, 10 / 500 * 100vw, 10px);
  padding: 10px;
  font-size: clamp(12px, 20 / 500 * 100vw, 14px);
  border-radius: 10px;
  border: #ccc solid 1px;
  overflow: auto;
}

.agreement_check{
  width: 100%;
  height: clamp(15px, 20 / 500 * 100vw, 20px);
  margin:auto;
  margin-top: clamp(10px, 20 / 500 * 100vw, 20px);
  font-size: clamp(14px, 16 / 500 * 100vw, 16px);
  display: flex;
  align-items: center;
}

/****************
	footer
****************/
footer {
  width: 100%;
  margin: auto;
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 10;
}

#footer-wrapper {
  width: clamp(2px, 500 / 500 * 100vw, 500px);
  height: clamp(2px, 65 / 500 * 100vw, 65px);
  margin: auto;
  background: #fff;
  box-shadow: 0 -10px 5px -5px #ececec;
  border-bottom: clamp(2px, 5 / 500 * 100vw, 5px) solid;
  border-top: clamp(2px, 5 / 500 * 100vw, 5px) solid;
  border-image: linear-gradient(to right, #f9bc71, #f196b0, #d9a9c6, #a1c1d9) 1;
}

.footerMenu {
  display: flex;
  justify-content: right;
  align-items: center;
}
#mainMenu { 
  margin: 0 10px;
}
#mainMenu li {

  width: calc(100% / 5);
}
#mainMenu.logined li {
  border-left: solid 1px #ccc;
  width: calc(100% / 6);
}
#mainMenu li:first-child {
  border-left: none;
}
.footerMenu span {
  display: block;
  font-size: 11px;
  transform: scaleX(0.9);
  font-weight: bold;
  text-align: center;
  margin-top: 5px;
}
.footerMenu .iconWrap {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}
.footerMenu .iconWrap img {
  width: clamp(15px, 60 / 500 * 100vw, 60px);
  height: clamp(15px, 60 / 500 * 100vw, 60px);
  object-fit: contain;
}
#mainMenu {

}
#subMenu {
  position: absolute;
  top: clamp(-260px, calc(-260 / 500 * 100vw), -100px);
  right: -100vw;
  width: calc(100vw - clamp(5px, 40 / 500 * 100vw, 40px));
  flex-wrap: wrap;
  opacity: 0;
  transition: all 0.5s;
}
#subMenu.active {
  opacity: 1;
  right: clamp(1px, 10 / 500 * 100vw, 10px);
  width: calc(100vw - clamp(10px, 20 / 500 * 100vw, 20px));
  background: #fff;
  padding: 4px;
  /* box-shadow: 0px 5px 5px #ccc; */
}
#subMenu li {
  background: #eee;
  color: #ff316a;
  margin: 2px;
  width: calc((100% - 20px) / 5);
  height: clamp(15px, 100 / 500 * 100vw, 100px);
  padding: clamp(1px, 10 / 500 * 100vw, 10px) 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}

#subMenu.cast li {
  color: #ff316a;
}

#subMenu.user li {
  color: #3178ff;
}

#subMenu.cast .iconWrap {
  filter: brightness(0) saturate(100%) invert(38%) sepia(57%) saturate(5004%) hue-rotate(324deg) brightness(100%) contrast(106%);
}

#subMenu.user .iconWrap {
  filter: brightness(0) saturate(100%) invert(36%) sepia(69%) saturate(3769%) hue-rotate(213deg) brightness(107%) contrast(101%);
}

#subMenu li.head {
  width: 100%;
  height:auto;
  padding: 3px;
  text-align: center;
}
#subMenu span {
  font-size: 10px;
}
#menuToggle img{
  transition: all 0.5s;
}
#menuToggle.active img{
  transform: rotate(180deg);
}
#menuEffect {
  position: absolute;
  top: 0;
  left: 0;
  width: clamp(5px, 50 / 500 * 100vw, 50px);
  height: clamp(5px, 50 / 500 * 100vw, 50px);
}
/****************
	nav2
****************/
/* #gNav2{
	width:60px;
	height:60px;
	position:fixed;
	top:0;
	right: 0;
	display: inline;
	z-index:10000;
} */

#gNav2 {
  width: clamp(40px, 97 / 500 * 100vw, 97px);
  height: clamp(40px, 97 / 500 * 100vw, 97px);
  margin-left: calc(390px - 97px);
  position: fixed;
  bottom: 0;
  left: 50%;
  display: inline;
  z-index: 10000;
}

.commonNav {
  display: block;
  position: fixed;
  left: 10px;
  width: calc(100% - 20px);
  height: 300px;
  background: rgba(255, 255, 255, 0.8);
  /* left: -100%; */
  right: 0%;
  top: 100%;
  z-index: 4;
  box-sizing: border-box;
  overflow: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  transition: 0.5s all;
  border: dashed 5px #ff6332;
}

.commonNav .login {
  width: 60%;
  max-width: 500px;
  margin: auto;
  display: flex;
  flex-wrap: wrap;
  align-content: center;
}

.commonNav .logout {
  width: 60%;
  max-width: 500px;
  margin: auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}

.commonNav .login .login_btn,
.commonNav .logout .logout_btn {
  width: 48%;
  height: clamp(40px, 60 / 500 * 100vw, 60px);
  margin: clamp(10px, 20 / 500 * 100vw, 20px) 1%;
  color: #4d4d4d;
  font-weight: bold;
  background: #eee;
  border-radius: 5px;
}

.commonNav .logout .logout_btn {
  width: 48%;
  height: clamp(40px, 60 / 500 * 100vw, 60px);
  margin: clamp(10px, 20 / 500 * 100vw, 20px) 0;
  color: #4d4d4d;
  font-weight: bold;
  background: #eee;
  border-radius: 5px;
}

.commonNav .login .reg_btn {
  width: 48%;
  height: clamp(40px, 60 / 500 * 100vw, 60px);
  margin: clamp(10px, 20 / 500 * 100vw, 20px) 1%;
  color: #fff;
  font-weight: bold;
  background: #ff9f56;
  border-radius: 5px;
}

.commonNav .login .login_btn a,
.commonNav .login .reg_btn a,
.commonNav .logout .logout_btn a {
  width: 100%;
  height: 100%;
  font-size: clamp(15px, 28 / 500 * 100vw, 28px);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.commonNav .login .login_btn i,
.commonNav .login .reg_btn i,
.commonNav .logout .logout_btn i {
  margin-right: 5px;
}

.commonNav ul {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  align-content: center;
  width: 100%;
  /* height: 100%; */
  margin: auto;
}

.commonNav ul li {
  width: 45%;
  /* max-width: 500px; */
  margin: 4px;
  text-align: center;
  /* font-size: clamp(20px, 24 / 500 * 100vw, 24px); */
  /* border-bottom: #4d4d4d solid 1px; */
  border: solid 1px #ccc;
  border-radius: 3px;
}

.commonNav ul li:first-child {
  padding-top: 0px;
}

.commonNav ul li:last-child {
  /* border-bottom: none; */
}

.commonNav ul li a {
  display: block;
  /* padding: 4vw 0; */
  padding: 10px 0;
  color: #4d4d4d !important;
  font-weight: 700;
  font-size: 15px;
  position: relative;
}

.commonNav ul li a:hover {
  color: #4d4d4d !important;
  text-decoration: none;
}
.commonNav #menuLogo {
  width: 50%;
  margin: auto;
  text-align: center;
}
/*開閉ボタン*/
#nav_toggle {
  width: clamp(40px, 97 / 500 * 100vw, 97px);
  height: clamp(40px, 97 / 500 * 100vw, 97px);
  margin-left: calc(390px - 97px);
  /* background:rgba(30,30,30,.8); */
  background: url(../images/menu.webp);
  background-size: cover;
  font-size: 11px;
  cursor: pointer;
  position: fixed;
  bottom: 0;
  left: 50%;
  display: block;
  z-index: 10000;
}
#myMenu {
  background: #fff;
  position: absolute;
  bottom: 0;
  right: 5px;
  box-shadow: 0 0 5px #333;
  border-radius: 3px;
}
#nav_toggle_mypage {
  width: 50px;
  height: 50px;
  background: url(../images/menu.webp);
  background-size: cover;
  background-position: 0 8px;
  font-size: 11px;
  cursor: pointer;
  display: block;
  z-index: 10000;
  letter-spacing: -1px;
  text-align: center;
  color: #ff6732;
  /* background: #fff; */
}
#nav_toggle_mypage > div {
  position: relative;
  top: 4px;
}
#headerLoginStatus {
  position: fixed;
  right: 0;
  top: 0;
  display: flex;
  justify-content: right;
  align-items: center;
  width: calc(100% - 6px);
  margin: 3px;
  font-size: 14px;
  padding: 0px;
  z-index: 9999;
}
#headerLoginStatus li {
  border-radius: 30px;
  box-shadow: 0 0 5px #333;
  background-color: #ffffffba;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(2px);
  border-radius: 30px;
  padding: 0 4px;
  border: 1px solid rgba(255, 255, 255, 0.4);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  margin: 2px;
}
#headerLoginStatus li#registBtn {
  background: linear-gradient(to right, #ff9450, #ff6131);
  color: #fff;
}
#headerLoginStatus li#pointCounter {
  position: relative;
  background: linear-gradient(to right, #ff9450, #ff6131);
  color: #f6ff00;
}
#headerLoginStatus li#pointCounter span {
}
@media screen and (max-width: 780px) {
  #nav_toggle {
    width: clamp(40px, 97 / 500 * 100vw, 97px);
    height: clamp(40px, 97 / 500 * 100vw, 97px);
    margin-left: auto;
    /* background:rgba(30,30,30,.8); */
    background: url(../images/menu.webp);
    background-size: cover;
    font-size: 11px;
    cursor: pointer;
    position: fixed;
    bottom: 0;
    right: 0;
    display: block;
    z-index: 10000;
  }
}
#headerLoginStatus li#pointCounter span.plus {
  position: relative;
  display: inline-block;
  width: 18px;
  height: 18px;
  line-height: 12px;
  font-weight: bold;
  top: 1px;
  right: -2px;
  font-weight: bold;
  font-size: 20px;
  border-radius: 30px;
  background: var(--color-cast);
  color: #111;
}
/*開閉ボタンopen時*/
.open #nav_toggle {
  background: url(../images/close.webp);
  background-size: cover;
}
.myopen #nav_toggle_mypage {
  background: url(../images/close.webp);
  background-size: cover;
  background-position: 0 8px;
}
.open #nav2 {
  display: block !important;
  position: fixed;
  top: calc(100% - 360px);
  background: rgba(255, 255, 255, 1) !important;
  right: 0% !important;
  z-index: 4;
  box-sizing: border-box;
  overflow: hidden;
  overflow-y: auto;
  /* margin: 10px; */
  -webkit-overflow-scrolling: touch;
  transition: 0.5s all;
}

.myopen #navForMy {
  display: block !important;
  position: fixed;
  top: calc(100% - 360px);
  background: rgba(255, 255, 255, 1) !important;
  right: 0% !important;
  z-index: 4;
  box-sizing: border-box;
  overflow: hidden;
  overflow-y: auto;
  /* margin: 10px; */
  -webkit-overflow-scrolling: touch;
  transition: 0.5s all;
}

.hide {
  overflow: hidden;
}

#test_slide_cast {
  width: 98%;
  margin: clamp(14px, 30 / 500 * 100vw, 30px) auto;
  display: grid;
}

#test_slide_cast .test_slide_cast_box {
  width: clamp(75px, 210 / 500 * 100vw, 210px);
  margin-right: clamp(7px, 20 / 500 * 100vw, 20px);
  /* Gridを指定 */
  display: grid;

  /* 3つの行に分割*/
  grid-row: span 3;
}

#test_slide_cast .test_slide_cast_box .test_slide_cast_img {
  width: clamp(75px, 190 / 500 * 100vw, 190px);
  height: clamp(75px, 190 / 500 * 100vw, 190px);
  margin-bottom: clamp(5px, 10 / 500 * 100vw, 10px);
  border-radius: 50%;
  overflow: hidden;
}

#test_slide_cast .test_slide_cast_box .test_slide_cast_img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

#test_slide_cast .test_slide_cast_box .test_slide_cast_shop,
#test_slide_cast .test_slide_cast_box .test_slide_cast_name {
  height: auto;
  margin-bottom: clamp(5px, 10 / 500 * 100vw, 10px);
  font-size: clamp(12px, 20 / 500 * 100vw, 20px);
  text-align: left;
  overflow: hidden;
}

/****
カレンダー用
****/

#calendar_select {
  width: 99%;
  margin: clamp(10px, 20 / 500 * 100vw, 20px) auto;
  padding: 0;
  font-size: 20px;
  background: #fff;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}

#calendar_select span {
  height: clamp(20px, 40 / 500 * 100vw, 40px);
  /* margin: 0 clamp(20px, 40 / 500 * 100vw, 40px); */
  display: flex;
  align-items: center;
  justify-content: center;
}

#calendar_select a {
  width: clamp(20px, 40 / 500 * 100vw, 40px);
  height: clamp(20px, 40 / 500 * 100vw, 40px);
  font-family: "Kosugi Maru", sans-serif;
  color: #fff;
  font-size: clamp(12px, 20 / 500 * 100vw, 20px);
  background: #707070;
  border-radius: clamp(5px, 10 / 500 * 100vw, 10px);
  display: flex;
  align-items: center;
  justify-content: center;
}

#calendar_select a.prev {
  background: linear-gradient(to right, #edc1d9, #e8bfda);
}

#calendar_select a.next {
  background: linear-gradient(to right, #a99dea, #a59bec);
}

#calendar_wrap {
  width: 99%;
  margin: clamp(10px, 20 / 500 * 100vw, 20px) auto;
  padding: 0;
  font-size: 10px;
  background: #fff;
  display: flex;
  flex-wrap: wrap;
}

#calendar_wrap li {
  width: calc(100% / 7);
  min-height: 100px;
  border: #cacaca solid 1px;
  border-right: none;
}

#calendar_wrap li:nth-child(7n) {
  border-right: #cacaca solid 1px;
}

#calendar_wrap li:nth-child(n + 8) {
  border-top: none;
}

#calendar_wrap li .date {
  width: 100%;
  padding: 10px 5px;
  font-weight: bold;
  background-color: #eee;
  text-align: center;
}

#calendar_wrap li .prevM,
#calendar_wrap li .nextM {
  color: #adadad;
}

#calendar_wrap li .sun {
  background-color: #ffd1d9;
}

#calendar_wrap li .sat {
  background-color: #bcefff;
}

/* #calendar_wrap li:nth-child(7n+1) .date{
	background-color: #ffd1d9;
}

#calendar_wrap li:nth-child(7n) .date{
	background-color: #bcefff;
} */

#calendar_wrap li .memory {
  width: 100%;
  padding: clamp(2px, 5 / 500 * 100vw, 5px);
  font-weight: bold;
  text-align: left;
}

#calendar_wrap li .memory a {
  width: 100%;
  margin: clamp(5px, 10 / 500 * 100vw, 10px) auto;
  display: block;
}

#calendar_wrap li .memory a::before {
  content: "・";
}

.message_box {
  text-align: center;
  margin: clamp(5px, 10 / 500 * 100vw, 10px) auto;
  color: #844de9;
  line-height: 1.5em;
  font-weight: bold;
}

.s_check_set {
  width: 100%;
  margin: clamp(5px, 10 / 500 * 100vw, 10px) auto;
}

.s_check_set .s_action {
  padding: 0;
  text-align: center;
}

#check_set {
  display: none;
}

.show {
  display: block !important;
}
.s_check_set .s_action label {
  margin: 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
}

.s_check_set .s_action input[type="checkbox"] {
  width: 20px;
  height: 20px;
  accent-color: #ff316a;
}

.s_check_set .s_action .check {
  margin: clamp(10px, 15 / 500 * 100vw, 15px) auto;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
}

.s_check_set .s_action .check i {
  margin-right: 5px;
}

.s_check_set .s_action .check span {
  padding: 10px 0;
  font-size: 16px;
  font-weight: bold;
  border: none;
  background: none;
  outline: none;
  cursor: pointer;
  display: inline-block;
}

.s_check_set .s_action .check span:focus {
  outline: none;
}

.s_check_set .s_action select {
  width: 80px;
  height: 30px;
  margin-right: 10px;
  text-align: center;
  border: #cacaca solid 1px;
  border-radius: clamp(2px, 5 / 500 * 100vw, 5px);
}

.s_check_set .s_action button {
  padding: 10px 15px;
  color: #333;
  border: none;
  background: none;
  outline: none;
  background-color: #aaa;
}

.s_check_set .s_action button:focus {
  outline: none;
}

#calendar_wrap li .schedule_select {
  width: 100%;
  padding: clamp(2px, 5 / 500 * 100vw, 5px);
  text-align: center;
}

#calendar_wrap li .schedule_select label {
  width: 94%;
  margin: clamp(2px, 5 / 500 * 100vw, 5px) auto;
  padding: clamp(2px, 5 / 500 * 100vw, 5px);
  background-color: #ddd;
  margin-bottom: 5px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

#calendar_wrap li .schedule_select label input[type="checkbox"] {
  border: #cacaca solid 1px;
  border-radius: clamp(2px, 5 / 500 * 100vw, 5px);
  /* accent-color: #E91E63; */
  accent-color: #ff316a;
}

#calendar_wrap li .schedule_select span {
  width: 94%;
  margin: 0 auto;
  margin-top: clamp(2px, 5 / 500 * 100vw, 5px);
  text-align: center;
  display: block;
}

#calendar_wrap li .schedule_select select {
  width: 94%;
  margin: clamp(2px, 5 / 500 * 100vw, 5px) auto
    clamp(5px, 10 / 500 * 100vw, 10px);
  padding: clamp(2px, 5 / 500 * 100vw, 5px);
  text-align: center;
  border: #cacaca solid 1px;
  border-radius: clamp(2px, 5 / 500 * 100vw, 5px);
}

#calendar_wrap li .schedule_select .del_btn {
  width: 94%;
  margin: clamp(2px, 5 / 500 * 100vw, 5px) auto
    clamp(5px, 10 / 500 * 100vw, 10px);
  padding: clamp(2px, 5 / 500 * 100vw, 5px) 0;
  color: #fff;
  background: #333;
  text-align: center;
  border-radius: clamp(2px, 5 / 500 * 100vw, 5px);
  display: flex;
  justify-content: center;
  align-items: center;
}

#calendar_wrap li .schedule_select .del_btn_no {
  width: 94%;
  margin: clamp(2px, 5 / 500 * 100vw, 5px) auto
    clamp(5px, 10 / 500 * 100vw, 10px);
  color: #fff;
  background: #eee;
  text-align: center;
  border-radius: clamp(2px, 5 / 500 * 100vw, 5px);
  display: flex;
  justify-content: center;
  align-items: center;
}

/****
shop_schedule用
****/
#calendar_wrap li .schedule_data {
  width: 100%;
  padding: clamp(2px, 5 / 500 * 100vw, 5px);
  text-align: center;
  font-size: clamp(7px, 10 / 500 * 100vw, 10px);
}

#calendar_wrap li .schedule_data .schedule_cast {
  width: 100%;
  margin: clamp(2px, 5 / 500 * 100vw, 5px) auto
    clamp(5px, 10 / 500 * 100vw, 10px);
  padding-bottom: clamp(5px, 10 / 500 * 100vw, 10px);
  border-bottom: #cacaca dashed 1px;
}

#calendar_wrap li .schedule_data .schedule_cast:last-child {
  border-bottom: none;
}

#calendar_wrap li .schedule_data .schedule_img {
  width: clamp(10px, 60 / 500 * 100vw, 60px);
  height: clamp(10px, 80 / 500 * 100vw, 80px);
  margin: clamp(2px, 5 / 500 * 100vw, 5px) auto;
}

#calendar_wrap li .schedule_data .schedule_img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: clamp(2px, 10 / 500 * 100vw, 10px);
}

#calendar_wrap li .schedule_data .cast_name{
  color: #ec98b9;
}

#calendar_wrap li .schedule_data .time_set {
  line-height: 1em;
  margin: clamp(2px, 5 / 500 * 100vw, 5px) auto;
}

#calendar_wrap li .schedule_data .time_set2 {
  width: 100%;
  height: clamp(25px, 50 / 500 * 100vw, 50px);
  display: flex;
  justify-content: center;
  align-items: center;
  line-height: 1em;
  margin: clamp(2px, 5 / 500 * 100vw, 5px) auto;
}

.schedule_btn_box {
  width: 100%;
  text-align: center;
}

.schedule_btn_box .send_btn {
  width: clamp(148px, 360 / 500 * 100vw, 360px);
  height: clamp(33px, 80 / 500 * 100vw, 80px);
  margin: clamp(12px, 30 / 500 * 100vw, 30px) auto;
  text-align: center;
  color: #fff;
  font-size: clamp(13px, 28 / 500 * 100vw, 28px);
  font-weight: bold;
  background: var(--color-gradient);
  border-radius: 10px;
  outline: none;
  border: none;
}

/*
週リストグラデーション色設定用
.week{
	width: 100%;
	height: clamp(24.5px, 55 / 500 * 100vw, 55px);	
	margin: clamp(10px, 20 / 500 * 100vw, 20px) auto;
	background: linear-gradient(90deg, #f6c6d6, #9b96ef);
	position: relative;
}

.week_cover{
	width: 100%;
	height: 100%;
	background: url(../images/week_cover.webp);
	background-size: contain;
	background-repeat: no-repeat;
	position: absolute;
	top: 0;
	left: 0;
}

.week_innner{
	width: 100%;
	margin: 0 auto;
	display: flex;
	justify-content: space-around;
	position: absolute;
	top: 0;
	left: 0;
}

.week_innner a{
	width: 13.5%;
	text-align: center;
	font-size: clamp(10px, 20 / 500 * 100vw, 20px);
	padding: clamp(8px, 15 / 500 * 100vw, 15px) 0;
	color: #fff;
	border-radius: 5px;
} */
/*modal*/
.modal {
  position: fixed;
  top: 25dvh;
  left: 10dvw;
  width: 80dvw;
  height: 50dvh;
  background: #fff;
  z-index: 9999;
  border: dashed 5px #ff6332;
  box-shadow: 10px 10px 0 #0000003b;
}
.close-modal {
  position: absolute;
  top: 0;
  right: 0;
  width: 40px;
  height: 46px;
  /* background: #ff6332; */
  color: #ff6332;
  text-align: center;
  line-height: 30px;
  font-size: 40px;
  cursor: pointer;
  font-family: sans-serif; /* Press Start 2Pから変更 */
}
/* pointCharge */
#pointNotice {
  font-size: 14px;
  padding: 10px;
}
.pointChargeBox li {
  width: 90%;
  height: 50px;
  margin: 10px auto;
  padding: 10px;
  font-size: 18px;
  border-bottom: solid 1px #ccc;
}
.pointChargeBox li:last-child {
  border-bottom: none;
}
.pointChargeBox li .orderPoint {
  width: 50%;
  float: left;
}
.pointChargeBox li .orderBtn {
  width: 50%;
  float: right;
}
.pointChargeBox .orderBtn input {
  background: var(--color-gradient);
  border: none;
  width: 100%;
  color: #fff;
  border-radius: 100px;
  font-size: 18px;
}
/* settlement */
.pointInfo {
  background: var(--color-gradient);
  text-align: center;
  color: #fff;
  line-height: 35px;
}
.number {
  /* font-family: "Press Start 2P", cursive; */
  /* color: #ffff00; */
  font-size: 24px;
}
.cardData {
  padding: 10px;
}
.cardData input {
  width: 100%;
  height: 40px;
  margin: 10px auto;
  padding: 10px;
  font-size: 18px;
  border: solid 1px #ccc;
}
#sendBtn {
  background: var(--color-gradient);
  text-align: center;
  color: #fff;
  line-height: 35px;
  margin: 20px auto;
  display: block;
  padding: 0 20px;
  border-radius: 100px;
}
#expire_year,
#securitycode {
  width: 70px;
}
#expire_month {
  width: 50px;
}
.cardCaution {
  font-size: 12px;
  padding: 10px;
}
.brandLogo {
  width: 50%;
  margin: 20px auto;
  display: block;
}
/*gift*/

.notice {
  font-size: 14px;
  padding: 10px;
}
.giftList {
  display: flex;
  flex-wrap: wrap;
  margin: 10px;
}
.giftList li {
  width: calc(50% - 10px);
  margin: 5px;
}
.giftList li .giftImg {
}
.giftList li .giftName {
  font-size: 14px;
  padding: 5px;
  font-weight: bold;
  text-align: center;
}
.giftList li .giftPoint {
  background: var(--color-gradient);
  text-align: center;
  color: #fff;
  line-height: 25px;
  display: block;
  margin: 5px 0;
  padding: 0 10px;
  border-radius: 100px;
}
.giftList li .giftPoint .number {
  font-family: sans-serif; /* Press Start 2Pから変更 */
  /* color: #ffff00; */
}
.commonModal {
  display: none;
  position: fixed;
  top: 10dvh;
  left: 10dvw;
  width: 80dvw;
  height: 80dvh;
  background: #fff;
  z-index: 11;
  overflow: auto;
  box-shadow: 0 0 10px #333;
}
.modalClose {
  font-family: sans-serif; /* Press Start 2Pから変更 */
  position: absolute;
  top: 0px;
  right: 0;
  height: 40px;
  width: 40px;
  line-height: 40px;
  font-size: 30px;
  color: #ff6332;
  text-align: center;
}
/* chat */
#chatFrame {
	height: 100%;
}
.chat-container {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	display: flex;
	flex-direction: column;
	height: 100vh;
	background: #f5f5f5;
}

.chat-container .message-list {
	flex: 1;
	overflow-y: auto;
	padding: 10px 20px 10px 10px;
	margin-bottom: 50px;
}

.chat-container .message {
	margin-bottom: 15px;
	display: flex;
	flex-direction: column;
}

.chat-container .message small {
	font-size: 12px;
	opacity: 0.8;
	margin-bottom: 4px;
	display: inline-block;
	float: right;
}

.chat-container .message.mine {
	align-items: flex-end;
}

.chat-container .message-content {
	max-width: 70%;
	border-radius: 5px;
	padding: 3px;
	line-height: 18px;
	font-size: 14px;
}

.chat-container .message:not(.mine) .message-content {
	background: white;
	border: 1px solid #e0e0e0;
}

.chat-container .message.mine .message-content {
	background: #007bff;
	color: white;
}

.chat-container .message-form {
	position: fixed;
	width: calc(100% - 10px);
	bottom: 0;
	left: 0;
	right: 0;
	background: white;
	padding: 5px;
	border-top: 1px solid #e0e0e0;
	display: flex;
	gap: 10px;
	align-items: flex-end;
}

.chat-container .message-input {
	flex: 1;
	min-height: 40px;
	max-height: 120px; /* 最大の高さを制限 */
	padding: 5px;
	border: 1px solid #e0e0e0;
	border-radius: 5px;
	resize: none;
	overflow-y: auto;
	line-height: 1.4;
	font-size: 0.95em;
}

.chat-container .message-form button {
	background: #007bff;
	color: white;
	border: none;
	padding: 10px 20px;
	border-radius: 5px;
	font-size: 0.95em;
	cursor: pointer;
	height: 40px; /* 初期の高さをテキストエリアに合わせる */
}

.chat-container .message-form button:hover {
	background: #0056b3;
}
/*chatlist */
#chatList li {
	background: var(--color-gradient);
	font-weight: bold;
	color: #fff;
  line-height: 25px;
  display: block;
  margin: 5px 0;
  padding: 0 10px;
  border-radius: 100px;
}
#chatList li .time {
	float:right;
	font-size: 10px;
}

/* イベント一覧のスタイル */
.eventList {
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
    padding: 0 15px;
}

.eventList li {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    margin-bottom: 20px;
    overflow: hidden;
    transition: transform 0.2s ease;
}

.eventList li:hover {
    transform: translateY(-2px);
}

/* お気に入り店舗のイベントは特別なスタイル */
.eventList li.favorite-shop {
    border: 2px solid #ffa31d;
    position: relative;
}

.eventHead {
    background: linear-gradient(to right, #ff904d, #ff6131);
    color: #fff;
    padding: 12px 15px;
    position: relative;
}

.favoriteLabel {
    position: absolute;
    top: -10px;
    right: 10px;
    background: #ffa31d;
    color: #fff;
    font-size: 12px;
    padding: 3px 10px;
    border-radius: 12px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.eventDate {
    font-size: 14px;
    display: block;
    margin-bottom: 5px;
}

.shopName {
    font-size: 16px;
    font-weight: bold;
}

.eventContent {
    padding: 15px;
}

.eventTitle {
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 15px;
    color: #333;
}

.eventImage {
    width: 100%;
    margin-bottom: 15px;
    border-radius: 8px;
    overflow: hidden;
}

.eventImage img {
    width: 100%;
    height: auto;
    object-fit: cover;
    aspect-ratio: 16/9;
}

.eventText {
    font-size: 14px;
    line-height: 1.6;
    color: #666;
    white-space: pre-line;
}

/* レスポンシブ対応 */
@media screen and (max-width: 780px) {
    .eventList {
        padding: 0 10px;
    }

    .eventTitle {
        font-size: 16px;
    }

    .eventDate {
        font-size: 12px;
    }

    .shopName {
        font-size: 14px;
    }

    .eventText {
        font-size: 13px;
    }

    .favoriteLabel {
        font-size: 11px;
        padding: 2px 8px;
    }
}

/* お知らせ通知バッジ */
.notification-badge {
  position: absolute;
  top: -5px;
  right: 10px;
  width: 15px;
  height: 15px;
  background: #ff3f31;
  border-radius: 50%;
  font-size: 10px;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: poonpopon 1.2s cubic-bezier(0.36, 0, 0.66, -0.56) infinite;
  transform-origin: 50% 100%;
}

@keyframes poonpopon {
  0%, 100% {
    transform: scale(1);
  }
  25% {
    transform: scale(1.2) translateY(-4px);
  }
  35% {
    transform: scale(1) translateY(0);
  }
  55% {
    transform: scale(1.1) translateY(-2px);
  }
  65% {
    transform: scale(1) translateY(0);
  }
  75% {
    transform: scale(1.05) translateY(-1px);
  }
  85% {
    transform: scale(1) translateY(0);
  }
}

#mainMenu li .iconWrap {
  position: relative;
}

/* 換金申請ページ用のスタイル */
.data_text {
    font-size: 18px;
    font-weight: bold;
    color: #333;
    padding: 10px 0;
}

.history-table {
    width: 100%;
    border-collapse: collapse;
    margin: 10px 0;
}

.history-table th,
.history-table td {
    padding: 12px;
    border: 1px solid #ddd;
    text-align: center;
}

.history-table th {
    background: #f5f5f5;
    font-weight: normal;
}

.history-table .pending {
    color: #ff6b6b;
}

.history-table .completed {
    color: #51cf66;
}

/* 入力フォームのスタイル調整 */
.form_set input[type='number'],
.form_set input[type='text'] {
    width: 100%;
    max-width: 300px;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 16px;
}

.form_set input[readonly] {
    background-color: #f8f9fa;
}

.btn_box .btn {
    background: var(--color-gradient);
    color: #fff;
    border: none;
    padding: 12px 30px;
    border-radius: 4px;
    font-size: 16px;
    cursor: pointer;
    transition: opacity 0.3s;
}

.btn_box .btn:hover {
    opacity: 0.8;
}

.req {
    color: #ff6b6b;
    font-size: 14px;
    margin-left: 8px;
}

.review_text {
  padding: 5px;
  max-height: 100px;
  overflow: scroll;
  border-radius: 8px;
  font-size: 14px;
}

.review_info {
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 10px;
}

.review_date {
    color: #666;
    font-size: 12px;
    text-align: right;
}

.slide_shop a, 
.slide_name a {
    color: #333;
    text-decoration: none;
}

.slide_name a.cast {
  width: 100%;
  margin-top: clamp(1px, 5 / 500 * 100vw, 5px);
  padding: clamp(1px, 2 / 500 * 100vw, 2px) clamp(1px, 10 / 500 * 100vw, 10px) ;
  font-size: clamp(1px, 12 / 500 * 100vw, 12px);
  color: #fff;
  background: linear-gradient(to right, #ff6b9f, #ff316a);
  border-radius: clamp(1px, 20 / 500 * 100vw, 20px);
  display: block;
  line-height: normal;
}


.slide_shop a:hover, 
.slide_name a:hover {
    text-decoration: underline;
}

/* .splide__slide.slide_box {
    background: rgb(170, 40, 40);
    border-radius: 10px;
    padding: 10px;
    margin: 5px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
} */

.slide_review_wrap{
  height: clamp(40px, 250 / 500 * 100vw, 250px);
  overflow: hidden;
}

.sliderReview {
  margin: clamp(5px, 20 / 500 * 100vw, 20px) 0;
  width: 100%;
    border-radius: clamp(1px, 10 / 500 * 100vw, 10px);
  overflow: hidden;
}

.sliderReview .list_box {
    width: 60%; /* 横幅を60%に設定 */
    background: white;
    border-radius: clamp(1px, 10 / 500 * 100vw, 10px);
    padding: clamp(1px, 15 / 500 * 100vw, 15px);
    margin: clamp(1px, 5 / 500 * 100vw, 5px);
}

/* スライダーの設定を上書き */
.sliderReview .slick-list {
    padding: 0 !important; /* スライダーのパディングをリセット */
}

.sliderReview .slick-slide {
    margin: 0 clamp(1px, 5 / 500 * 100vw, 5px); /* スライド間の余白を設定 */
}

.sliderReview .review_container {
    display: flex;
    gap: clamp(1px, 15 / 500 * 100vw, 15px);
}

.sliderReview .reviewer_img {
    flex-shrink: 0;
    width: clamp(10px, 120 / 500 * 100vw, 120px);
    text-align: center;
}

.sliderReview .reviewer_img img {
    width: clamp(10px, 120 / 500 * 100vw, 120px);
    height: clamp(10px, 120 / 500 * 100vw, 120px);
    border-radius: clamp(1px, 10 / 500 * 100vw, 10px);
    object-fit: cover;
    margin-bottom: 10px;
}

.sliderReview .reviewer_img .reviewer_info {
    padding:0;
}

.sliderReview .reviewer_img .reviewer_name {
    font-weight: bold;
    font-size: clamp(10px, 14 / 500 * 100vw, 14px);
    margin-bottom: clamp(1px, 5 / 500 * 100vw, 5px);
}

.sliderReview .reviewer_img .shop_name {
    font-size: clamp(1px, 12 / 500 * 100vw, 12px);
    color: #666;
}

.sliderReview .review_content {
    flex-grow: 1;
    padding: clamp(1px, 5 / 500 * 100vw, 5px);
    border-left: solid 1px #ccc;
    border-bottom: solid 1px #ccc;
    border-radius: clamp(1px, 5 / 500 * 100vw, 5px);
    position: relative;
    /* margin-top: clamp(1px, 20 / 500 * 100vw, 20px); */
}

/* 他のスタイルは変更なし */

.sliderReview .review_button {
    display: inline-block;
    background: var(--color-gradient);
    color: #fff;
    padding: 8px 15px;
    border-radius: 20px;
    text-decoration: none;
    margin-top: 10px;
    text-align: center;
    font-size: 14px;
}

.sliderReview .review_button:hover {
    opacity: 0.8;
}

.sliderReview .review_text {
    color: #666;
    font-style: italic;
    padding: 5px;
    max-height: clamp(1px, 150 / 500 * 100vw, 150px);
    overflow: scroll;
    border-radius: 8px;
    font-size: 14px;
}
.reviewCastJump {
  text-decoration: none;
  color: #333;
  font-size: 14px;
  transition: opacity 0.3s;
  border: solid 1px #ccc;
  border-radius: 30px;
  display: block;
  font-size: 12px;
  line-height: 18px;
  margin: 10px auto 0;
  text-align: center;
}

/* 既存のFlickity関連のスタイルを削除または上書き */
.carousel {
    margin-bottom: 20px;
}

/* メインスライダー */
.slider-main {
  margin:0 auto clamp(10px, 15 / 500 * 100vw, 15px);
  width: 96%;
  height: 70vh; /* 固定の高さを設定 */
  position: relative;
}

.slider-main > div{
  border-radius: clamp(1px, 10 / 500 * 100vw, 10px);
}

.slider-main .slick-slide {
  display: flex !important;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  height: 70vh;
}

.slider-main .slick-slide > div {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.slider-main .slick-slide img,
.slider-main .slick-slide video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center; /* 画像を中央に配置 */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* 完全に中央に配置 */
}

.slider-main .slick-list,
.slider-main .slick-track {
  height: 100%;
}

/* サムネイルスライダー */
.slider-nav {
  margin: 0 auto;
  max-width: 100%;
}

.slider-nav .slick-slide {
  padding: 5px;
  opacity: 1;
  transition: opacity 0.3s ease;
  height: clamp(1px, 100 / 500 * 100vw, 100px);
  overflow: hidden;
}

.slider-nav .slick-current {
  opacity: 1;
}

.slider-nav .slick-slide img,
.slider-nav .slick-slide video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center; /* サムネイル画像も中央に */
  border-radius: 5px;
  cursor: pointer;
}

/* Shop専用スライダー */
.slider-main.shop {
  width: clamp(10px, 480 / 500 * 100vw, 480px);
  height: clamp(10px, 292 / 500 * 100vw, 292px);
  margin:0 auto clamp(10px, 15 / 500 * 100vw, 15px);
  position: relative;
}

.slider-main.shop .slick-slide {
  display: flex !important;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  height: clamp(10px, 292 / 500 * 100vw, 292px);
}

.slider-nav.shop .slick-slide {
  padding: 5px;
  opacity: 1;
  transition: opacity 0.3s ease;
  height: clamp(1px, 100 / 500 * 100vw, 100px);
  overflow: hidden;
}

.slider-main.shop .slick-slide img,
.slider-main.shop .slick-slide video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center; /* 画像を中央に配置 */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* 完全に中央に配置 */
}

.favoriteAdd {
    cursor: pointer;
    transition: opacity 0.3s ease;
}

.favoriteAdd:hover {
    opacity: 0.8;
}