/*========= LoadingのためのCSS ===============*/

/* Loading背景画面設定　*/
#splash {
  /*fixedで全面に固定*/
position: fixed;
width: 100%;
height: 100%;
z-index: 999;
background:#FFFFFF;
text-align: center;
color:#fff;
}

/* Loading画像中央配置　*/
#splash_logo {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

/* Loading アイコンの大きさ設定　*/
#splash_logo svg{
width:350px;
text-align:center;
}
#target{
text-align: center;
margin: 20px 0;
font-size: 1.5rem;
letter-spacing: .5em;
  word-break : break-all;
  color: #ffffff;
  
}
#choose  {
  padding: 8%;
  text-align: center;
}
#button {
padding: 8%;
text-align: center;
display: none;
}

.fontsize{
 display: none;
}
/*========= タイピング ===============*/

.TextTyping span {
display: none;
color: #333;
}

/*文字列後ろの線の設定*/
.TextTyping::after {
content: "|";
animation: typinganime .8s ease infinite;
}

@keyframes typinganime{
from{opacity:0}
to{opacity:1}
}



/*========= SVG操作手書き風にするためのCSS ===============*/

#mask .st0{
  fill:none;
  stroke:#fff;
  stroke-width:90;/*線の太さを指定する*/
  stroke-linecap:round;
  stroke-linejoin:round;
  stroke-miterlimit:10;
  stroke-dasharray: 1500; /* 線の間隔を指定する */
  stroke-dashoffset:1500; /* 線の位置を指定する */
}

/*========= 画面遷移のためのCSS ===============*/

/*画面遷移アニメーション*/
#splashbg{
display: none;
}
/*bodyにappearクラスがついたら出現*/
body.appear #splashbg{
display: block;
content: "";
position:fixed;
z-index: 999;
width: 100%;
height: 100vh;
top: 0;
left: 0;
transform: scaleX(0);
background-color: #BAD3FF;/*伸びる背景色の設定*/
animation-name:PageAnime;
animation-duration:1.2s;
animation-timing-function:ease-in-out;
animation-fill-mode:forwards;
}
@keyframes PageAnime{
0% {
transform-origin:left;
transform:scaleX(0);
}
50% {
transform-origin:left;
transform:scaleX(1);
}
50.001% {
transform-origin:right;
}
100% {
transform-origin:right;
transform:scaleX(0);
}
}

/*画面遷移の後現れるコンテンツ設定*/
#container_top{
  opacity: 0;/*はじめは透過0に*/
  background-color: #f4f4f4;
}
/*bodyにappearクラスがついたら出現*/
body.appear #container_top{
animation-name:PageAnimeAppear;
animation-duration:1s;
animation-delay: 0.8s;
animation-fill-mode:forwards;
opacity: 0;
}

@keyframes PageAnimeAppear{
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
/*========= レイアウトのためのCSS ===============*/

#splash_affter{
 position: fixed;
width: 100%;
height: 100%;
z-index: 999;
}


h1{
font-size:1.2rem;
}

h2{
font-size:1.2rem;
text-align: center;
margin: 0 0 30px 0;
}

p{
margin-top:20px;  
}

small{
color:#fff;
display: block;
text-align: center;
}

#header{
background:#333;
color:#fff;
text-align: center;
padding: 20px;
}

#footer{
background:#333;
padding:20px;
}

#main{
  width: 100%;
  height: 100vh;
  position: relative;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  /*
  text-align: center;
  font-size: 26px;
  letter-spacing: 3px;

  fixedで全面に固定*/
}

div {
display: block;
}
@media screen and (max-width: 499px) {
  /*　画面サイズ 499pxまで適用　*/
  .size {
    font-size: 12px;
    width: 100%;
    padding-top: 5%;
}
}
@media screen and (min-width: 500px) and (max-width: 999px) {
  /*　画面サイズ 500pxから999pxまで適用　*/
  .size{
      font-size: 14px;
      width: 80%;
  }
}

@media screen and (min-width:1000px) {
  /*　画面サイズ 1000px以上から適用　*/
  .size{
    font-size: 18px;
    width: 60%;
  }
}

#title_h1 {
  letter-spacing: 2px;
  color: #696969;
  min-width: 260px;
  height: auto;
  top: 50%;
  position: sticky;
  margin: auto;
}


a.btn_26 {
display: block;
text-align: center;
vertical-align: middle;
text-decoration: none;
width: 120px;
margin: auto;
padding: 1rem 4rem;
border-radius: 100vw;
color: #fff;
background: #27acd9;
  margin: 30px 30px 0 0;
}
a.btn_26:hover {
background-position: right center;
background-size: 200% auto;
-webkit-animation: pulse 2s infinite;
animation: shad26 1.5s infinite;
color: #fff;
}
@keyframes shad26 {
0% {box-shadow: 0 0 0 0 #27acd9;}
70% {box-shadow: 0 0 0 10px rgb(39 172 217 / 0%);}
100% {box-shadow: 0 0 0 0 rgb(39 172 217 / 0%);}
}

/*ラジオボタン　CSS*/
@keyframes fade {
  0%, 50% {
      opacity: 0;
      transform: scale(0);
  }
}
@keyframes work-animation {
  0% {
      top: -4vw;
  }
  50% {
      top: 4vw;
  }
  100% {
      top: -4vw;
  }
}
@keyframes checked-radio-3 {
  0% {
      top: -10vw;
      transform: scale(0);
  }
  100% {
      top: 0;
      transform: scale(1);
  }
}
@keyframes unchecked-radio-3 {
  0% {
      bottom: 0;
      transform: scale(1);
  }
  100% {
      bottom: -10vw;
      transform: scale(0);
  }
}
@keyframes checked-radio-4 {
  0% {
      transform: rotate(0) translateY(-4.8vw) scale(.2);
  }
  83% {
      transform: rotate(360deg) translateY(-2.5vw) scale(1);
      transform-origin: 2vw;
  }
  88% {
      transform: translateY(.6vw) scale(1);
  }
  93% {
      transform: translateY(-.9vw) scale(1);
  }
  100% {
      transform: translateY(0) scale(1);
  }
}
@keyframes unchecked-radio-4 {
  25% {
      top: -6.5vw;
  }
  50% {
      top: 9vw;
  }
  75% {
      top: -10vw;
  }
  100% {
      top: -10vw;
      transform: scale(0);
  }
}

*, *:before, *:after {
  margin: auto;
  padding: 0;
  outline: 0;
  /*
  overflow: hidden;
  */
  box-sizing: border-box;
}

html, body { background: white; }
main, .container_top, label, label:before, label:after {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

label {
  display: inline-block;
  width: 10vw;
  height: 10vw;
  border-radius: 50%;
  transition: all .2s ease-in-out;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-duration: 1.6s;
  animation-name: work-animation;
}


.radio:checked + label {
  animation-play-state: paused;
}

label:before {
  content: "";
  position: absolute;
  width: 5vw;
  height: 5vw;
  background: white;
  border-radius: 50%;
  box-shadow: rgba(0, 0, 0, 0.117647) 0 0 .8vw 0, rgba(0, 0, 0, 0.239216) 0 .8vw .8vw 0;
  transition: all .2s;
}
label:hover:before {
  box-shadow: rgba(0, 0, 0, 0.0784314) 0 0 1vw 0, rgba(0, 0, 0, 0.239216) 0 1vw 1vw 0;
}

label:after {
  content: "";
  position: absolute;
  width: 10vw;
  height: 10vw;
  background: rgba(255, 255, 255, .5);
  border-radius: 50%;
  transform: scale(0);
}
.radio:checked + label:after {
  background: transparent;
  transition: all .5s;
  transform: scale(1);
}

/**** BLUE Radio button code ****/
#radio-1 + label {
left: -60vw;
background: #4285F4;
animation-delay: 0s;
}
#radio-1 + label:before {
transform: scale(0);
}
#radio-1:checked + label:before {
transform: scale(1);
transition: all .4s;
}
/**** RED radio button code ****/
#radio-2 + label {
left: -20vw;
background: #EA4335;
border-color: #EA4335!important;
animation-delay: .2s;
}
#radio-2:checked + label {
background: white;
border: 1vw solid;
box-shadow: inset rgba(0, 0, 0, 0.117647) 0 0 .6vw 0, inset rgba(0, 0, 0, 0.239216) 0 .6vw .8vw 0;
transition: all .2s;
}
#radio-2:checked + label:before {
width: 5vw;
height: 5vw;
background: #EA4335;
transition: all .4s;
}
/* for IE */
#radio-2:not(:checked) + label:before {
width: 8vw;
height: 8vw;
background: #EA4335;
box-shadow: none;
}
/**** YELLOW radio button code ****/
#radio-3 + label {
left: 20vw;
background: #FBBC05;
animation-delay: .4s;
}
#radio-3 + label:before {
/* background: #E91E63; */
transform: scale(0);
animation-name: unchecked-radio-3;
animation-duration: .2s;
animation-timing-function: ease-in-out;
}
#radio-3:checked + label:before {
animation-name: checked-radio-3;
animation-duration: .4s;
animation-timing-function: ease-in-out;
animation-fill-mode: both;
}

/**** GREEN radio button code ****/
#radio-4 + label {
left: 60vw;
background: #34A853;
animation-delay: .6s;
}
#radio-4 + label:before {
/* background: #8BC34A; */
animation: unchecked-radio-4 .5s both;
}
#radio-4:checked + label:before {
animation-name: checked-radio-4;
animation-duration: .6s;
animation-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1);
animation-fill-mode: both;
}
[type="radio"] {
display: none;
}

.card{
overflow: hidden;
border-radius: 8px;
border-left: solid 1px #ddd;
border-right: solid 1px #ddd;
border-bottom: solid 5px #888;
width: 60%;
height: 70%;
}
/**** border-radius: 100% 70% 35% 65% / 100% 50% 50% 50%;  ****/
.title_card{
  overflow: hidden;
  border-radius: 30% 70% 35% 65% / 50% 50% 50% 50%;
  border-left: solid 1px #ddd;
  border-right: solid 1px #ddd;
  border-bottom: solid 5px #888;
  width: 20%;
  height: 50%;
}
#test{
    height: 100vh;
    width: 100%;
    top: 35vh;
    z-index: 10;
    text-align: center;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}
#about{
  width: 100%;
  height: 60vh;
}

#conteiner{
  text-align: center;
  letter-spacing: 3px;
  background:#FFFFFF;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
#about_h2 {
padding-bottom: 5%;
}
.about{
  text-align: center;
  padding-top: 3%;
}
.about_img {
  padding-left: 20%;
  text-align: center;
}
#concept{
  width: 100%;
  height: 50vh;
  padding: 5%;
}
#fluid {
  background:#fff100;/*背景色*/
  animation: fluidrotate 30s ease 0s infinite;/*アニメーションの設定*/
  position: relative;
  z-index: 10;
  margin: auto;
}
@media screen and (max-width: 499px) {
  /*　画面サイズ 499pxまで適用　*/
  #fluid{
    width: 30vh;/*横幅*/
    height: 15vh;/*縦幅*/
}
}
@media screen and (min-width: 500px) and (max-width: 999px) {
  /*　画面サイズ 500pxから999pxまで適用　*/
  #fluid{
    width:35vh;/*横幅*/
    height: 20vh;/*縦幅*/
  }
}

@media screen and (min-width:1000px) {
  /*　画面サイズ 1000px以上から適用　*/
  #fluid{
    width:40vh;/*横幅*/
    height: 25vh;/*縦幅*/
  }
}


@keyframes fluidrotate {  
    
0%, 100% {
    border-radius: 63% 37% 54% 46%/55% 48% 52% 45%;
}
14% {
    border-radius: 40% 60% 54% 46%/49% 60% 40% 51%;
}
28% {
    border-radius: 54% 46% 38% 62%/49% 70% 30% 51%;
}
42% {
    border-radius: 61% 39% 55% 45%/61% 38% 62% 39%;
}
56% {
    border-radius: 61% 39% 67% 33%/70% 50% 50% 30%;
}
70% {
    border-radius: 50% 50% 34% 66%/56% 68% 32% 44%;
}
84% {
    border-radius: 46% 54% 50% 50%/35% 61% 39% 65%;
}
    
}
.about_fluid {
  width:40vh;/*横幅*/
  height: 25vh;/*縦幅*/
  background:#fff100;/*背景色*/
  animation: fluidrotate 30s ease 0s infinite;/*アニメーションの設定*/
  position: relative;
  z-index: 10;
}
@media screen and (max-width: 499px) {
  /*　画面サイズ 499pxまで適用　*/
  #concept_teiner {
    width: 100%;
    padding-top: 30%;
}
}
@media screen and (min-width: 500px) and (max-width: 999px) {
  /*　画面サイズ 500pxから999pxまで適用　*/
  #concept_teiner{
    width: 100%;
    padding-top: 20%;
  }
}

@media screen and (min-width:1000px) {
  /*　画面サイズ 1000px以上から適用　*/
  #concept_teiner{
    padding-top: 15%;
  }
}
    
#concept_teiner{
  text-align: center;
  position: absolute;
  z-index: 100;
  left: 50%;
  transform: translate(-50%, -50%);
}

.span_color{
  font-size: 25px;
  min-width: 260px;
  position: relative;
}
@media screen and (max-width: 499px) {
  /*　画面サイズ 499pxまで適用　*/
  .span_color {
  top: 40%;
  padding-bottom: 2%;
}
}
@media screen and (min-width: 500px) and (max-width: 999px) {
  /*　画面サイズ 500pxから999pxまで適用　*/
  .span_color {
  top: 40%;
  padding-bottom: 2%;
  }
}

@media screen and (min-width:1000px) {
  /*　画面サイズ 1000px以上から適用　*/
  .span_color {
  top: 45%;
  padding-bottom: 2%;
  }
}

span{
  color: #4285F4;
}

/*背景色が伸びて出現 共通*/
.bgextend{
  animation-name:bgextendAnimeBase;
  animation-duration:1s;
  animation-fill-mode:forwards;
  position: relative;
  overflow: hidden;/*　はみ出た色要素を隠す　*/
  opacity:0;
}

@keyframes bgextendAnimeBase{
  from {
    opacity:0;
  }

  to {
    opacity:1;  
}
}

/*中の要素*/
.bgappear{
  animation-name:bgextendAnimeSecond;
  animation-duration:1s;
  animation-delay: 0.6s;
  animation-fill-mode:forwards;
  opacity: 0;
}

@keyframes bgextendAnimeSecond{
  0% {
  opacity: 0;
  }
  100% {
  opacity: 1;
}
}

/*--------- 左から --------*/
.bgLRextend::before{
  animation-name:bgLRextendAnime;
  animation-duration:1s;
  animation-fill-mode:forwards;
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #666;/*伸びる背景色の設定*/
}
@keyframes bgLRextendAnime{
  0% {
    transform-origin:left;
    transform:scaleX(0);
  }
  50% {
    transform-origin:left;
    transform:scaleX(1);
  }
  50.001% {
    transform-origin:right;
  }
  100% {
    transform-origin:right;
    transform:scaleX(0);
  }
}
/* その場で */
.fadeIn{
  animation-name:fadeInAnime;
  animation-duration:3s;
  animation-fill-mode:forwards;
  }
  
  @keyframes fadeInAnime{
    from {
      opacity: 0;
    }
  
    to {
      opacity: 1;
    }
  }
.fadeUpTrigger{
    width: 30%;
    opacity: 0;
}
.fadeInTrigger{
  opacity: 0;
}

.about_h2{
  text-align: center;
}
.about_container_top{
  text-align: center;
  padding-top: 15%;
  position: absolute;
  z-index: 100;
  left: 50%;
  transform: translate(-50%, -50%);
}
#container_top p{
  color: #000000;
}
span{
  text-align: left;
}