.clearfix:after,input[type=text],input[type=password],input[type=tel],input[type=url],input[type=email],input[type=file],input[type=image],input[type=number],input[type=range],input[type=color],input[type=date],input[type=datetime],input[type=datetime-local],input[type=month],input[type=week],input[type=time],input[type=search],select,textarea{display:block}blockquote,body,button,code,dd,div,dl,dt,fieldset,form,h1,h2,h3,h4,h5,h6,input,legend,li,ol,p,pre,select,td,textarea,th,ul{margin:0;padding:0}a,a:active,a:hover,a:link,a:visited{text-decoration:none;outline:0}li,ul{list-style:none}table{border-collapse:collapse;border-spacing:0}caption,th{text-align:left}h1,h2,h3,h4,h5,h6{font-weight:inherit}.clearfix:after{content:" ";clear:both}*{color:#333;font-size:1.4rem;box-sizing:border-box;letter-spacing:.1rem;line-height:1.6;border-radius:0}html{font-size:10px;background:#FFF;height:100%}body{font-family:Avenir,"Helvetica Neue",Helvetica,Arial,Roboto,"ヒラギノ角ゴ Pro","Hiragino Kaku Gothic Pro","Meiryo UI","メイリオ",Meiryo,"ＭＳ Ｐゴシック","MS PGothic",sans-serif;min-height:100vh;display:flex;display:-webkit-flex;flex-direction:column;-webkit-flex-direction:column}main{}button,input[type=submit],input[type=reset],input[type=search],input[type=button],select,textarea{appearance:none;-moz-appearance:none;-webkit-appearance:none}button,input,select,textarea{font-family:inherit;font-weight:inherit;outline:0;border:1px solid #333;background-color:#FFF}button,input[type=submit],input[type=reset],input[type=file],input[type=color],input[type=button]{cursor:pointer}input[type=file],input[type=image],input[type=color]{border:none;background-color:transparent}select{text-indent:.01px;text-overflow:'';background-image:url(under_arrow.svg);background-position:100% center;background-repeat:no-repeat;padding:0 20px 0 10px}select::-ms-expand{display:none}textarea{overflow:auto;resize:vertical}canvas,iframe,img,svg,video{border:0;max-width:100%;display:block}@media screen and (max-width:480px){*{font-size:1.3rem}input,select,textarea{font-size:1.6rem}input[type=checkbox]:checked{background-color:#3B99FC}input[type=radio]{border-radius:1rem}input[type=radio]:checked{background-color:#3B99FC;border-radius:1rem}}

html {
    height: 100vh;
    overflow: hidden;
    background-color: #000;
}
.wrap {
    position: relative;
    height: 100vh;
    width: 100%;
    background-color: #000;
    display: flex;
    justify-content: center;
    align-items: center;
}

.in_wrap {
    z-index: 60;
    position: relative;
    margin-bottom: 140px;
}
.bl {
  width: 30%; background-color: #000; height: 100%; z-index: 99;
}
.in_wrap h1 {
    width: 400px;
        margin: 0 auto;
        z-index: 70;
        position: relative;
}
.en {
    color: #fff;
    background-color: #000;
    z-index: 60;
    display: block;
    width: 100%;
    text-align: center;
    position: absolute;
    font-size: .8rem;
    letter-spacing: .2rem;
    font-family: serif;
}
.in_wrap img {
    width: 100%;
    height: auto;
}
#uc {
  color: #fff;
  background-color: #000;
  z-index: 90;
  display: block;
  width: 100%;
  text-align: center;
  position: absolute;
  font-size: .8rem;
  letter-spacing: .2rem;
  font-family: serif;
  top: 210px;
  width: 174px;
  margin: 0 auto;
  left: 0;
  right: 0;
  text-align: center;
}

.holder,
.first,
.second,
.third {
  height: 100%;
  width: 100%;
}
.first,
.second,
.third {
  position: absolute;
}
.second,
.third {
  opacity: 0;
}
.holder {
  height: 100%;
  z-index: 1;
  position: absolute;
  top: 0;
  background-color: #ffeb3b;
}
.first {
  animation: first 6s infinite;
  background: linear-gradient(#fff, #fff);
  z-index: 10;
}
  @keyframes first {
	0% {opacity: 1.0;}
	10% {opacity: 0.8;}
	20% {opacity: 0.6;}
	30% {opacity: 0.4;}
	40% {opacity: 0.2;}
	50% {opacity: 0.1;}
	60% {opacity: 0.2;}
	70% {opacity: 0.4;}
	80% {opacity: 0.6;}
	90% {opacity: 0.8;}
	100% {opacity: 1.0;}
  }

.second {
  animation: second 6s infinite; animation-delay: 2s;
  background: linear-gradient(#ffeb3b, #fd0258);
  z-index: 20;
}
  @keyframes second {
	0% {opacity: 0;}
	10% {opacity: 0.2;}
	20% {opacity: 0.4;}
	30% {opacity: 0.6;}
	40% {opacity: 0.8;}
	50% {opacity: 1.0;}
	60% {opacity: 0.8;}
	70% {opacity: 0.6;}
	80% {opacity: 0.4;}
	90% {opacity: 0.2;}
	100% {opacity: 0;}
  }

.third {
  animation: third 6s infinite;
  animation-delay: 8s;
  background: linear-gradient(#04fbe4, #f10202);
  z-index: 30;
}
  @keyframes third {
	0% {opacity: 0;}
	10% {opacity: 0.2;}
	20% {opacity: 0.4;}
	30% {opacity: 0.6;}
	40% {opacity: 0.8;}
	50% {opacity: 1.0;}
	60% {opacity: 0.8;}
	70% {opacity: 0.6;}
	80% {opacity: 0.4;}
	90% {opacity: 0.2;}
	100% {opacity: 0;}
  }

#contact_btn {
    z-index: 60;
    width: 100px;
    display: block;
    text-align: center;
    position: absolute;
    font-size: 1.5rem;
    top: 100px;
    margin: 0 auto;
    left: 0;
    right: 0;
    font-weight: bold;
    cursor: pointer;
    padding-top: 4px;
}
#contact_btn i {
    /* margin-right: 3px; */
    font-size: 2rem;
    color: #868181;
    -webkit-transition: all .2s;
    -o-transition: all .2s;
    transition: all .2s;
}
#contact_btn:hover i {
    color: #fff;
}
.button {
  position: relative;
  border: 2px solid #000;
  color: #fff;
  text-align: center;
  text-decoration: none;
  outline: none;
  transition: all .2s;
}
.button::before,
.button::after {
  position: absolute;
  z-index: 2;
  content: '';
  width: 0;
  height: 0;
  border: 2px solid transparent;
}
.button::before {
  top: -2px;
  left: -2px;
}
.button::after {
  bottom: -2px;
  right: -2px;
}
.button:hover {
  color: #3be5ae;
}
.button:hover::before,
.button:hover::after {
  width: 100%;
  height: 100%;
}
.button:hover::before {
  border-bottom-color: #ffeb3b;
  border-left-color: #645b04;
  transition: height .3s, width .3s .3s;
}
.button:hover::after {
  border-top-color: #fff;
  border-right-color: rgb(175, 174, 174);
  transition: height .3s, width .3s .3s;
}

#detail {
    padding: 10% 5%;;
    opacity: 0;
    overflow: auto;
    /* height: 603px; */
}
#detail > h2 {
    color: #fff;
    font-weight: bold;
}

#detail input,
#detail textarea {
    max-width: 100%;
}

#detail textarea {
    width: 100%;
    resize: vertical;
}

.q_box {
    padding: 10px;
        margin: 20px 0;
        background-color: #fff;
        border-radius: 10px;
}

.q_box h3 {
    background-color: #fff;
    color: #000;
    font-size: 2rem;
    border-left: 3px solid #00bcd4;
    padding-left: 10px;
    margin-bottom: 1rem;
}