@charset "UTF-8";

/*==================================================
  色一覧
===================================================*/
:root {
  --main: #9eeb47;
  --main-rgb: 158, 235, 71;
  --sub: #794016;
  --sub-rgb: 121, 64, 22;

  --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: #3cb371;
  --green-rgb: 0, 255, 127;
  --yellow: #ffd300;
  --yellow-rgb: 255, 250, 205;
  --brown: #a52a2a;
  --brown-rgb: 222, 184, 135;
  --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; */
}

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(images/cafe.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%);
}


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

.display_none {
  display: none;
}

.display_block {
  display: block;
}

.visibility_hidden {
  visibility: hidden;
}

.visibility_visible {
  visibility: visible;
}

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

p {
  font-size: 0.9rem;
}

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

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;
}

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

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


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

button {
  border: 1px solid var(--black-f);
  border-radius: 5px;
  background: rgba(255, 255, 255, 0);
  display: block;
  margin: 0px auto 1rem;
  padding: 0px;
  text-align: left;
}


#test-btn {
  position: fixed;
  bottom: 0;
  right: 15px;
  padding: 3px;
  background: rgb(var(--white-rgb), 0.7);
  z-index: 99999;
}


/*==================================================
  ヘッダー
===================================================*/
header {
  position: fixed;
  width: 100vw;
  z-index: 10000;
  box-shadow: 0.1px 0.1px 2.5px var(--black);
        background-color: rgba(var(--black-rgb), 0.5);
}

#title {
  color: #f998a3;
  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;
  padding-top: 6vh;
}

/* Speech-Common */
.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-1
===================================================*/
#section-1 {
  padding: 0vh 0vw 0vh 0vw;
  width: 100vw;
  /* background-color:blue; */
  height: 44vh;
  padding-top: 1rem;
}

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

/* 共通 */
.uma-btn {
  position: relative;
  font-size: 16px;
  color: var(--sub);
  font-weight: 600;
  background-color: var(--white);
  border-radius: 5px;
  width: 87%;
  height: 50px;
  z-index: 700;
}

.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(--main-rgb), 0.2);
}

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

.uma-btn-g:active {
  background-color: rgb(var(--main-rgb), 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);
}

.fa-mobile-alt {
  padding: 0 10px 0 15px;
  color: rgb(var(--yellow-btn));
  font-size: 20px
}

.fa-home {
  padding: 0 3px 0 11px;
  color: rgb(var(--pink-btn), 0.7);
  font-size: 20px
}

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


/*==================================================
  画面遷移
===================================================*/

#white-back {
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  width: 100vw;
  z-index: -10;
  background: rgba(var(--white-rgb), 0);

  /* 子要素のpタグを中央へ*/
  display: flex;
  justify-content: center;
  align-items: center;
}

.my_anime01 {
  animation: my_anime01 3s;
}

@keyframes my_anime01 {
  0% {
    z-index: 100000;
  }

  35% {
    background: rgba(var(--white-rgb), 1);
  }

  70% {
    background: rgba(var(--white-rgb), 1);
  }

  100% {
    background: rgba(var(--white-rgb), 0);
    z-index: 100000;
  }
}

#white-back p {
  position: absolute;
  font-size: 1.3rem;
  opacity: 0;
  text-align: center;
  color: var(--key);
  /* font-weight:600; */
}

.my_anime02 {
  animation: my_anime02 2.7s;
}

@keyframes my_anime02 {
  0% {
    opacity: 0;
  }

  15% {
    opacity: 0;
  }

  85% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

/* 背景のフィルター */
.filter {
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  width: 100vw;
  z-index: -10000;
  background: rgba(var(--key-rgb), 0);
}

.my_anime03 {
  animation: my_anime03 2.7s;
}


@keyframes my_anime03 {
  0% {
    z-index: 100000;
  }

  35% {
    background: rgba(var(--key-rgb), 0);
  }

  50% {
    background: rgba(var(--key-rgb), 0.1);
  }

  65% {
    background: rgba(var(--key-rgb), 0.1);
  }

  100% {
    background: rgba(var(--key-rgb), 0);
    z-index: 100000;
  }
}


/*==================================================
  デスクトップ
===================================================*/

@media (min-width: 600px) {}


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

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


/*==================================================
  スマートフォン（小）
===================================================*/

@media (max-width: 510px) {}