body {
  font-family: "Avenir Next";
  margin: 0;
  padding: 0;
  background-image: url("../img/kirakira.gif")
}
html, body {
  height:100%;
}
a {
  text-decoration: none;
}


label {
  display: block;
  text-align: center;
}
.label_out{
  text-align:center;
}
.label_text{
 padding: 0.5em;
 font-size: 3em;
 font-weight: bold;
 color: #black;
}

.cp_iptxt {
	position: relative;
	margin: 40px 3% 10px 3%;
}
.cp_iptxt input[type='text'] {
	font: 15px/24px sans-serif;
	box-sizing: border-box;
	letter-spacing: 1px;
	padding-left: 4em;
}
.cp_iptxt input[type='text']:focus {
	outline: none;
}
.ef {
	position: relative;
	padding: 7px 15px;
	border: 0;
	border: 1px solid #1b2538;
	background: transparent;
}
.ef ~ .focus_bg {
	position: absolute;
	z-index: -1;
	top: 0;
	left: 0;
	width: 0;
	height: 100%;
	transition: 0.4s;
	background-color: transparent;
}
.ef:focus {
	border: 1px solid #da3c41;
}
.ef ~ label {
	position: absolute;
	z-index: -1;
	top: 8px;
	left: -89px;
	width: 100%;
	transition: 0.3s;
	letter-spacing: 0.5px;
	color: #aaaaaa;
}
.ef:focus ~ label, .cp_iptxt.ef ~ label {
	font-size: 15px;
	top: -23px;
  left: -89px;
	transition: 0.3s;
	color: #da3c41;
}


.btn,
button.btn {
  font-size: 1.3rem;
  font-weight: 700;
  line-height: 1.5;
  position: relative;
  display: inline-block;
  padding: 0.3rem 3rem;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  text-align: center;
  vertical-align: middle;
  text-decoration: none;
  letter-spacing: 0.1em;
  color: #212529;
  border-radius: 0.5rem;
  border: 1px;
}
.btn--orange{
  color: #fff;
  background-color: #eb6100;
}
.btn--orange:hover{
  color: #fff;
  background: #f56500;
}


@media screen and (max-width:767px){/*iPhone*/
    #movedani{
      width: 100%;
      position: absolute;
      top: 177px;
      left:172px;
      z-index: 3;
      text-align: center;
    }
    #ugoku {
      display: inline-block;
      width: 290px;
    }
    #movedani_2{
      position: absolute;
      top: 168px;
      right:345px;
      z-index: 3;
      text-align: center;
    }
    #ugoku_2 {
      display: inline-block;
    }
    .animation{
      animation-timing-function: ease-in-out;
      animation-iteration-count: infinite;
      animation-direction: alternate;
      animation-duration: 1.5s;
      width: 4px;
    }
    .keyframe4{
      animation-name: anim_r;
      animation-duration: 4s;
      animation-timing-function: linear;
      animation-direction: normal;
    }
    @keyframes anim_r {
      0% {
        transform: rotate(0deg);
      }
      100% {
        transform: rotate(360deg);
      }
    }

}
@media screen and (min-width: 768px){ /*PC表示*/
  #movedani{
    width: 100%;
    position: absolute;
    top: 168px;
    left:220px;
    z-index: 3;
    text-align: center;
    font-size: 3rem;
    font-weight:900;
  }
  #ugg,#ugg_2{
    background: linear-gradient(to right,#e60000,#f39800,#fff100,#009944,#0068b7,#1d2088,#920783);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-block;
  }
  #ugg_2{

  }
  #ugoku {
    display: inline-block;
    width: 290px;
  }
  #movedani_2{
    position: absolute;
    top: 147px;
    left:300px;
    z-index: 3;
    font-size: 2rem;
    font-weight:900;
    text-align: center;
  }
  #ugoku_2 {
    display: inline-block;
  }
  .animation{
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-duration: 1.5s;
    width: 4px;
  }
  .keyframe4{
    animation-name: anim_r;
    animation-duration: 4s;
    animation-timing-function: linear;
    animation-direction: normal;
  }
  @keyframes anim_r {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(360deg);
    }
  }
}


#second_text{
  margin: 1px ;
}



@media screen and (max-width:767px){/*iPhone*/
#msg, #h1, #subtitle{
  text-align: center;
}
}

#second_text{
  display: none;
}
#title_meros, #meros_2, #honbun{
  display: none;
}
#meros_r{
  color: red;
}
#meros_2 span{
  color: red;
  font-weight: bold;
}
.intro_meros{
  border-top: 1px black solid;
  border-bottom: 1px black solid;
}
.link_meros{
  text-decoration: underline;
}
.link_meros:hover{
  color: red;
}

@media screen and (min-width: 768px){ /*PC表示*/
 #msg{
   text-align: center;
 }
 #h1{
   text-align: center;
 }
 #subtitle{
   text-align: center;
 }
 #meros_1{
   font-size: 0.8rem;
 }
 h3#title_meros{
   font-size: 2rem;
   text-align: center;
 }
} /*PC 表示*/

h3#title_meros{
  font-size: 1.5rem;
  text-align: center;
}





/*tabの形状*/
.tab{
  display: flex;
  flex-wrap: wrap;
  list-style-type: none;
}
.tab li a{
  display: block;
  background: #0aac81;
  border-radius: 10px;
  margin:10px 2px;
  padding:10px 20px;
  color: black;
  font-weight: bold;
}
/*liにactiveクラスがついた時の形状*/
.tab li.active a{
  background: #D93223;
  border-radius: 10px;
  color: #FFF;
}
/*エリアの表示非表示と形状*/
.area {
  display: none;/*はじめは非表示*/
  opacity: 0;/*透過0*/
  background: #fff;
  padding:10px 20px;
  border-radius: 10px;
}

/*areaにis-activeというクラスがついた時の形状*/
.area.is-active {
    display: block;/*表示*/
    animation-name: displayAnime;/*ふわっと表示させるためのアニメーション*/
    animation-duration: 2s;
    animation-fill-mode: forwards;
}

@keyframes displayAnime{
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.wrapper{
  width:100%;
  max-width: 1000px;
  border-radius: 10px;
  margin:30px auto;
  background:#fefefe;
}

.to_home{
  text-align: center;
}
.area h2{
  font-size:1.5rem;
  margin:0 0 20px 10px;
  color: #D93223;
}
.area li{
  color: black;
  padding: 10px;
  border-bottom: 1px solid #ddd;
}
.area p{
  color: black;
  padding: 10px;
}
.area h3{
  color: #D93223;
  padding: 10px;
  font-size: 1rem;
  font-weight: bold;
}

#test_1_outout, .test_2_out{
  display: none;
}

.test_1{
  display:inline-block;
  margin: 10px auto;
  text-align: center;
  font-size: 1rem;
}
.btn-1{
  display: inline-block;
  padding: 1em 1.3em;
  text-decoration: none;
  background: #26A6A6;/*ボタン色*/
  color: white;
  border-radius: 3px;
}
.btn-2{
  display: inline-block;
  padding: 1em 1.3em;
  text-decoration: none;
  background: #26A6A6;/*ボタン色*/
  color: white;
  border-radius: 3px;
}
.btn-3{
  display: inline-block;
  padding: 1em 1.3em;
  text-decoration: none;
  background: #26A6A6;/*ボタン色*/
  color: white;
  border-radius: 3px;
}
.btn-4{
  display: inline-block;
  padding: 1em 1.3em;
  text-decoration: none;
  background: #26A6A6;/*ボタン色*/
  color: white;
  border-radius: 3px;
}
.test_1:hover{
  background-color: #aaaaaa;
}
/*=============始末書のやつ==================*/
.right{
  text-align: right;
}
.left{
  text-align: left;
}
h3.business{
  color: black;
  text-align: center;
  font-size: 2rem;
}
.title_business{
  border-top: 1px black solid;
  border-bottom: 1px black solid;
}

#youyou a {
  text-decoration: underline;
  color: black;
}
#menu a{
  text-decoration: underline;
  color: black;
  font-weight: bold;
  font-size: 0.9rem;
}
#menu li{
  list-style-type: square;
}
#menu{
}
@media screen and (min-width: 768px){
  #menu a{
    text-decoration: underline;
    color: black;
    font-weight: bold;
    font-size: 1.2rem;
  }
  .area h2{
    font-size:2rem;
    margin:0 0 20px 10px;
    color: #D93223;
  }
}