@charset "UTF-8";

/*==================================================
  カラー
===================================================*/
:root {
  --main: #00acc6;
  --main-rgb: 0,172,198;
  --sub: #f998a3;
  --sub-rgb: 249,152,163;
  --key:#fc74a4;
  --key-rgb:252,116,164;
  --key-d:#fD6094;
    
  --font: #222;
  --back: #fcfcfc;
  --line: #222;
  --line-rgb: 0, 255, 211;
  --tmp: #98fb98;
  --tmp-rgb: 152, 251, 152;

  --pink-: #fc74a4;
  --pink-line: #fD6094;
  --pink-right: #fcbccc;
  --pink-top: #fca4ac;
  --pink-triangle-top: #fc94b4;
  --pink-triangle-bottom: #fc9cb4;
  --pink-triangle-top-rgb: 252, 148, 180;
  --pink-triangle-bottom-rgb: 252, 156, 180;

  --gray--: #645c7c;

  /* ボタンカラー */
  --green-btn: 158, 235, 71;
  --yellow-btn: 252, 212, 60;
  --pink-btn: 252, 116, 172;
  --blue-btn: 105, 204, 229;

  /* 汎用カラー */
  --red: #ec0000;
  --tomato: #FF6347;
  --tomato-rgb: 255, 99, 71;
  --orange: #ff9f67;
  --orange-rgb: 255, 140, 0;
  --orange-d: #FF8C00;
  --pink: #ffb2c1;
  --pink-rgb: 255, 105, 180;
  --purple: #9932cc;
  --purple-rgb: 238, 130, 238;
  --blue: #003ee5;
  --blue-rgb: 100, 149, 237;
  --green: #9eeb47;
  --green-rgb: 158, 235, 71;
  --yellow: #ffd300;
  --yellow-rgb: 255, 250, 205;
  --brown: #794016;
  --brown-rgb: 121, 64, 22;
  --black: #000;
  --black-rgb: 0, 0, 0;
  --black-f: #222;
  --gray: #808080;
  --grey-rgb: 105, 105, 105;
  --gray-p: #a9a9a9;
  --gray-d: #696969;
  --white: #fff;
  --white-rgb: 255, 255, 255;
  --white-d: #f8f8ff;
  --white-d-rgb: 245, 245, 245;
}

/*==================================================
  レイアウト
===================================================*/
html,
body {
  /* overflow-x: hidden */
}

html {
  font-size: 100%;
  scroll-behavior: smooth;
}

body {
  /* 文字 */
  color: var(--font);
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: .04em;
  min-height: 100vh;

  /* 背景 */
  /* background-color: rgb(var(--tmp-rgb), 0.1) */
  /* background-image: url(images/back.jpg);
  background-size: cover;
  background-position: center center; */
}

section {
  padding: 0px 0px 0px 0px;
  max-width: 500px;
  margin: 0rem auto 0rem auto;
}


#screen1 {
  position: fixed;
  z-index: -1;
  top: 0px;
  left: 0px;
  height: 100vh;
  width: 100vw;
  background-image: url(https://famelma.com/eupho-app/images/back/back.jpg);
  /* background-position: cover; */
   background-position: center;
  /* background-size:contain; */
  background-size: auto 100vh;

  background-repeat:no-repeat;

  opacity: 0.8;
  filter: blur(1px);
  filter: brightness(80%);
  filter: contrast(110%);
  filter: saturate(100%);
  filter: sepia(0%);
}


/*==================================================
  共通
===================================================*/
p {
  font-size: 0.9rem;
  
}

img {
  display: block;
  /* max-width: 100%; */
}

h1,
h2 {
  font-size: 1.3rem;
  font-weight: 600;
  letter-spacing: 0.08rem;
}

iframe {
  display: block;
  margin: 1rem auto;
  border-radius: 5px;
  max-width: 100%;
}


a:hover {
  transition: .3s;
  color: var(--sub);
}



/*==================================================
  フォント
===================================================*/

.font1 {
  background-image: linear-gradient(to top right, var(--yellow) 30%, var(--pink2) 70%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}


.font2 {
  color: var(--purple);
  text-shadow: 1px 1px rgba(var(--white-d-rgb), 0.7),
    2px 2px rgba(var(--purple-rgb), 0.7),
    3px 3px rgba(var(--purple-rgb), 0.7),
    4px 4px rgba(var(--purple-rgb), 0.7);
}

.italic {
  font-style: italic;
}



/*==================================================
  ボタン
===================================================*/

button {
  display: block;
  margin: 0px auto;
  background: var(--main);
  border: 1px solid rgb(var(--main-rgb), 0.8);
  color: #FFF;
}


/*==================================================
  表示
===================================================*/

.display_none {
  display: none;
}

.display_block {
  display: block;
}

.visibility_hidden {
  visibility: hidden;
}

.visibility_visible {
  visibility: visible;
}
/*==================================================
  ヘッダー
===================================================*/
header {
  position: fixed;
  width: 100vw;
  z-index: 10000;
  background-color: rgba(var(--white-rgb), 1);
    box-shadow: 0.1px 0.1px 2.5px var(--sub);
}

#title {
  color: var(--key);
  font-weight: 600;
  font-size: 0.78rem;
  height: 4.2vh;
  text-align: center;
  line-height: 4.2vh;
  /* text-shadow: 1px 1px rgba(var(--white-d-rgb), 0.7),
    3px 2px rgba(249, 152, 163, 0.3); */
  font-family: 'Playfair Display', serif;
  font-style: italic;

}


/*==================================================
  SECTION-HOME
===================================================*/
#section-home {
  position: relative;
  width: 100vw;
  min-height: 50vh;
  top: 0vh;
  background-size: cover;
  background-position: center center;
  /* background-color:red; */
  padding-top: 6vh;
}

/*==================================================
  SECTION-ranking_show
===================================================*/
#section-ranking{
  
}

/* リスト全体のスタイル */
#ranking_show {
  position: absolute;
    top: 0;
  left: 0;
    list-style: none; /* デフォルトのバレットを非表示 */
    /* padding-top: 2rem; */
      margin:2.3rem 0;
    left: 50%;
  transform: translateX(-50%);
  width: 96vw;
    max-width: 500px;
    background-color: #ffffff;
    border: 1px solid #ddd;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

/* リスト項目のスタイル */
#ranking_show li {
    padding: 3px 15px;
    border-bottom: 1px solid #ddd;
    display: flex;
    align-items: center;
    gap: 10px;
}

/* 最後の項目のボーダーを消す */
#ranking_show li:last-child {
    border-bottom: none;
}

/* カスタムバレット（アイコン風） */
#ranking_show li::before {
    content: "•"; /* シンプルなバレット */
    color: #3498db; /* 青系の色 */
    font-size: 1.5em;
}

/* ホバー時のスタイル */
#ranking_show li:hover {
    background-color: #f0f8ff; /* 薄い青 */
    cursor: pointer;
    transition: background-color 0.3s;
}


/*==================================================
  POPUP
===================================================*/
#popup {
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  width: 100vw;
  /* z-index: -1000; */
  background: rgba(var(--white-rgb), 0.5);
}

#nickname_form {
  height: 3.5rem;
  width: 97vw;
  border-radius: 5px;
  background: rgba(var(--white-rgb), 1);
  
  position: absolute;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%);

  text-align: center;
      white-space: nowrap; 
  /* word-break: break-all; */
  box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.3);

}
.form-group{
/* width: 90vw; */
      /* display: inline-block;
    white-space: nowrap;  
  background-color:var(--main) */
}

#nickname_form label {
  line-height: 3.5rem;
}

#nameInput {
  padding-bottom: 7px;
}

#insert_button {
  border-radius: 50%;
  height: 90px;
  width: 90px;
  margin-top: 3rem;
  box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.3);

}


/*==================================================
  Speech
===================================================*/
.speech-com {
  display: flex;
}

.speech-com img {
  width: 60px;
  border-radius: 50%;
}

.says-com {
  display: inline-block;
  position: relative;
  border-radius: 10px;
  background: #f5f5f5;

  /* background-color:black;
 color:#f5f5f5;
 opacity:0.83; */

 }

.says-com:before {
  content: "";
  display: inline-block;
  position: absolute;
  background-color: #f5f5f5;
  /* background-color:black; */
}

/* Speech-Left */
.speech-l {
  margin: 1.2rem 0.5rem 1.4rem 0.5rem;
}

.says-l {
  margin: 0px 16px 0px 20px;
  padding: 18px 14px 15px 15px;
}

.says-l:before {
  left: -13px;
  width: 15px;
  height: 20px;
  clip-path: polygon(100% 0%, 0% 50%, 100% 100%);
}

/* Speech-Right */
.speech-r {
  justify-content: flex-end;
  margin: 1.2rem 0.5rem 1.4rem 0.8rem;
  right: 0;
}

.says-r {
  margin: 0px 20px 0px 16px;
  padding: 18px 14px 15px 15px;
}

.says-r:before {
  right: -13px;
  width: 15px;
  height: 20px;
  clip-path: polygon(0% 0%, 0% 100%, 100% 50%);
}

/*==================================================
  アニメーション
===================================================*/

/* 拡大 */
.zoomIn {
  animation-name: zoomInAnime;
  animation-duration: 0.2s;
  animation-fill-mode: forwards;
}

@keyframes zoomInAnime {
  from {
    transform: scale(0.8);
  }

  to {
    transform: scale(1);
  }
}

.uma-btn-animation {
    animation: anime_uma_btn .18s;
    animation-fill-mode: forwards
}

@keyframes anime_uma_btn {
    0% {
        transform: scale(0.3,0.3)
    }

    100% {
        transform: scale(1,1)
    }
}

/*==================================================
  SECTION-button
===================================================*/
#section-button {
  padding: 0vh 0vw 0vh 0vw;
  width: 100vw;
  /* background-color:blue; */
  height: 44vh;
  padding-top: 1rem;
}


/*==================================================
  uma-btn
===================================================*/

/* 共通 */
.uma-btn {
  display: block;
  position: relative;
  font-size: 16px;
  color: var(--brown);
  font-weight: 600;
  background-color: var(--white);
  border-radius: 5px;
  width: 87%;
  height: 50px;
  text-align:left;
    margin: 0px auto 1rem;
}

.uma-btn:before {
  position: absolute;
  content: '';
  top: 0px;
  left: 0px;
  height: 50px;
  width: 100%;
  clip-path: polygon(88% 0%, 97% 0%, 92% 40%);
  z-index: 701;
}

.uma-btn:after {
  position: absolute;
  content: '';
  top: 0px;
  left: 0px;
  height: 50px;
  width: 100%;
  clip-path: polygon(97% 0%, 100% 0%, 100% 100%, 85% 100%);
  z-index: 702;
}

.uma-btn:active {
  transform: scale(0.92, 0.92);
  text-shadow: 2px 2px 0px var(--white);
}


/* 各色 */
.uma-btn-g {
  border: 1px solid rgb(var(--green-btn), 0.8);
}

.uma-btn-g:before {
  background-color: rgb(var(--green-btn), 0.2);
}

.uma-btn-g:after {
  background-image: linear-gradient(135deg, var(--green) 65%, rgb(var(--green-btn), 0.1) 100%);
}

.uma-btn-g:active {
  background-color: rgb(var(--green-btn), 0.4);
}

.uma-btn-y {
  border: 1px solid rgb(var(--yellow-btn), 0.8);
}

.uma-btn-y:before {
  background-color: rgb(var(--yellow-btn), 0.2);
}

.uma-btn-y:after {
  background-image: linear-gradient(135deg, rgb(var(--yellow-btn)) 65%, rgb(var(--yellow-btn), 0.1) 100%);
}

.uma-btn-y:active {
  background-color: rgb(var(--yellow-btn), 0.4);
}

.uma-btn-p {
  border: 1px solid rgb(var(--pink-btn), 0.6);
}

.uma-btn-p:before {
  background-color: rgb(var(--pink-btn), 0.2);
}

.uma-btn-p:after {
  background-image: linear-gradient(135deg, rgb(var(--pink-btn)) 65%, rgb(var(--pink-btn), 0.1) 100%);
}

.uma-btn-p:active {
  background-color: rgb(var(--pink-btn), 0.4);
}

.uma-btn-b {
  border: 1px solid rgb(var(--blue-btn), 0.6);
}

.uma-btn-b:before {
  background-color: rgb(var(--blue-btn), 0.2);
}

.uma-btn-b:after {
  background-image: linear-gradient(135deg, rgb(var(--blue-btn)) 65%, rgb(var(--blue-btn), 0.1) 100%);
}

.uma-btn-b:active {
  background-color: rgb(var(--blue-btn), 0.4);
}

/* ボタンアイコン */

.fa-play {
  padding: 0 8px 0 14px;
}

.uma-btn-g .fa-play {
  color: rgb(var(--green-btn), 0.7);
}

.uma-btn-y .fa-play {
  color: rgb(var(--yellow-btn), 0.7);
}

.uma-btn-p .fa-play {
  color: rgb(var(--pink-btn), 0.7);
}

.uma-btn-b .fa-play {
  color: rgb(var(--blue-btn), 0.7);
}


/* クリック無効 */
.pointer-events-none {
  pointer-events: none;
}


/*==================================================
  デスクトップ
===================================================*/
@media (min-width: 600px) {}

/*==================================================
  タブレット
===================================================*/
@media (max-width: 1024px) {}

/*==================================================
  スマートフォン
===================================================*/
@media (max-width: 599px) {}