@charset "UTF-8";
/*----------------------------------------------------------
更新日：2025年10月5日

=共通
=スロかつーる_総合トップ


-------------------------------------------------------------*/
/* 共通
-------------------------------------------------------------*/
@import url("https://fonts.googleapis.com/css2?family=Akshar:wght@300..700&family=Germania+One&family=Konkhmer+Sleokchher&family=M+PLUS+1p&family=M+PLUS+Rounded+1c:wght@400;700&family=Radio+Canada+Big:wght@700&family=Chango&display=swap");
#wrap .page-title {
  padding: 0;
}

.akshar {
  font-family: "Akshar", sans-serif;
}

.mplus-rounded-bold {
  font-family: "M PLUS Rounded 1c", sans-serif;
  font-weight: 700;
  font-style: normal;
}

.germania-one {
  font-family: "Germania One", system-ui;
  font-weight: 400;
  font-style: normal;
}

.konkhmer-sleokchher {
  font-family: "Konkhmer Sleokchher", system-ui;
  font-weight: 400;
  font-style: normal;
}

.radio-canada-big-bold {
  font-family: "Radio Canada Big", sans-serif;
  font-optical-sizing: auto;
  font-weight: 700;
  font-style: normal;
}

.chango {
  font-family: "Chango", sans-serif;
  font-weight: 400;
  font-style: normal;
}

/* スロかつーる_総合トップ
-------------------------------------------------------------*/
#keyv {
  overflow: hidden;
}
#keyv #keyv-slider {
  opacity: 0;
}
#keyv #keyv-slider.slick-initialized {
  opacity: 1;
}
#keyv #keyv-slider .slick-dots {
  display: flex;
  justify-content: center;
  position: absolute;
  bottom: 0.6em;
  width: 100%;
}
#keyv #keyv-slider .slick-dots li {
  margin: 0 0.5em;
}
#keyv #keyv-slider .slick-dots li button {
  display: block;
  width: 0.92em;
  height: 0.92em;
  padding: 0;
  background: #BABABA;
  border-radius: 100vw;
  box-shadow: 0 0.2em 0 0 rgba(0, 0, 0, 0.73);
  text-indent: -9999px;
}
#keyv #keyv-slider .slick-dots li.slick-active button {
  background: #F6DF0A;
}

#member {
  position: relative;
  padding: 0.4em 0 0.6em;
}
#member .marker img {
  position: absolute;
  right: 1.6em;
  bottom: 1.9em;
  width: 3em;
  z-index: 1;
}
#member .name {
  display: block;
  position: relative;
}
#member .name dl, #member .name .icon, #member .name .title {
  position: absolute;
}
#member .name dl {
  left: 39%;
  bottom: 22%;
  line-height: 1.3;
  color: #3A3A3A;
}
#member .name dl dt {
  margin-bottom: 0;
  font-size: 1.725em;
  font-weight: bold;
}
#member .name dl dd {
  font-size: 1.14em;
  font-weight: 500;
  color: #FFF5CC;
}
#member .name .icon {
  top: 9%;
  left: 5.5%;
  width: 30%;
}
#member .name .title {
  top: 22%;
  left: 39%;
  width: 53%;
}

#login {
  padding: 0.6em 0;
}
#login .inner {
  position: relative;
}
#login .inner .icon, #login .inner .title, #login .inner .btn {
  position: absolute;
}
#login .inner .icon {
  top: 10%;
  left: 6%;
  width: 29%;
}
#login .inner .title {
  top: 15%;
  left: 40.5%;
  line-height: 1.3;
  font-size: 1.25em;
  font-weight: 700;
}
#login .inner .btn {
  left: 39.5%;
  bottom: 16%;
  width: 10.8em;
  height: 2.2em;
  margin: 0;
  box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
  background: #00C878;
  font-weight: 700;
  color: #FFF;
}

#data-area,
#app-area {
  margin: 0 0.56em 1em;
  padding: 0.825em 0.6em;
  background: #FFF;
  border-radius: 0.5em;
  box-shadow: 0 0.3em 0.5em 0 rgba(16, 42, 97, 0.2);
}
#data-area h2,
#app-area h2 {
  margin-bottom: 0.3em;
  text-align: center;
  font-size: 1.25em;
  font-weight: 700;
  color: #217BF5;
}
#data-area ul,
#app-area ul {
  display: flex;
}
#data-area ul li,
#app-area ul li {
  width: 33.3333%;
  padding: 0 0.214em;
}

.modal.app .modal-main {
  top: 50%;
  left: 50%;
  width: 23.8em;
  padding: 1.5em 0 2em;
  background: #FFF;
  transform: translate(-50%, -50%);
}
.modal.app .modal-main dl {
  text-align: center;
  font-weight: 700;
}
.modal.app .modal-main dl dt {
  margin-bottom: 0.5em;
  font-size: 1.25em;
  font-weight: 700;
  color: #217BF5;
}
.modal.app .modal-main dl dd + dd {
  margin-top: 0.8em;
}
.modal.app .modal-main dl dd a {
  display: block;
  width: 7.68em;
  margin: 0 auto;
  padding: 0.3em 0;
  border: 0.08em solid #A8A8A8;
  border-radius: 0.3em;
  background: #000;
  font-size: 1.25em;
  font-weight: 700;
  color: #FFF;
}
.modal.app .overlay {
  background: rgba(170, 209, 229, 0.7);
}