/* Wrapper */
.c-sitewidth{
  box-sizing: border-box;
  width: 50%;
  border: 0px solid;
  float: left;
}
.c-sitewidth-btn{
  box-sizing: border-box;
  width: 30%;
  padding-top: 20px;
  margin: auto;
  clear: both;
}
@media (min-width: 641px){
	.c-sitewidth{
		width: 50%;
		margin: 0 auto;
	}
}
@media (max-width: 640px){
	.c-sitewidth{
		margin: 0 2%;
	}
}


h3{
  width: 100% ;
  height: auto ;
  margin: 30px auto;
  margin-bottom: 10px;
  font-size:2.5em;
  font-weight: bold;
  letter-spacing:0px;
  text-align: center;
  position: relative;
  }
  h3::before {
    position: absolute;
    right: 0;
    bottom: -10px;
    left: 0;
    display: block;
    width: 100px;
    height: 2px;
    margin: 0 auto;
    content: "";
    background: #000;
  }

  .space{
    margin-top: 60px;
    margin-bottom: 30px;
    }
  .space2{
    margin-top: 60px;
   }

   textarea {
    resize: vertical;
    height: 12em;
    }



.required{
  width:auto;
  font-size: 0.6em;
  font-weight: bold;
  color: #fff;
  height:1em;
  background:#e60000;
  border-radius:20px;
  padding: 1px 8px 1px 8px;
  margin-left: 10px;
}
.required-title{
width:auto;
font-size: 0.55em;
color: #fff;
height:1em;
background:#e60000;
border-radius:20px;
padding: 1px 8px 1px 8px;
margin-left: 10px;
}

.Item{
  font-size: 1.7em;
  line-height: 1em;
  text-align: left;
  padding: 25px 0 5px 20px;
}



/* Input-Field */
.c-input1,#name,#company,#email,#tel,#address,#zip,#state,#post,#comment{
	box-sizing: border-box;
  border: 1px solid #dcdddd;
  border-radius: 10px;
  font-size: 1.7em;
	width: 90%;
  padding: .47em .75em;
  margin-left: 20px;
}
.c-input1--error{
	background-color: #F4CCCC;
}

/* Input-Field pulldown */
.c-input-pulldown,#occupation,#position,#office{
	box-sizing: border-box;
  border: 1px solid #dcdddd;
  border-radius: 10px;
  font-size: 1.7em;
	width: 90%;
  padding: .33em .75em;
  margin-left: 20px;
}
.c-input1--pulldown--error{
	background-color: #F4CCCC;
}


/* radio effect */
ul.addul{
  list-style-type: none;
  width: 100%;
  margin: auto;
}

li.addli{
  position: relative;
  padding-left: 35px;
  padding-top: 11px;
  height:38px;
  font-size: 1.8em;
}

#inputcontents label:before {
    content: "";
    width: 15px;
    height: 15px;
    background: #ff8585;
    position: absolute;
    left: 9px;
    top: calc(50% - 13px);
    box-sizing: border-box;
    border-radius: 50%;
}

input[type="radio"] {
  opacity: 0;
  -webkit-appearance: none;
  display: inline-block;
  vertical-align: middle;
  z-index: 100;
  margin: 0;
  padding: 0;
  width: 100%;
  height: 30px;
  position: absolute;
  left: 0;
  top: calc(50% - 15px);
  cursor: pointer;
}

.bullet {
    position: relative;
    width: 24px;
    height: 24px;
    left: 0px;
    top: 3px;
    border: 4px solid #ff0000;
    opacity: 0;
    border-radius: 50%;
}

input[type="radio"]:checked ~ .bullet {
  position:absolute;
  opacity: 1;
  animation-name: explode;
  animation-duration: 0.350s;
}

.line {
  position: absolute;
  width: 10px;
  height: 2px;
  background-color: #ff0000;
  opacity:0;
}

.line.zero {
  left: 11px;
  top: -21px;
  transform: translateY(20px);
  width: 2px;
  height: 10px;
}

.line.one {
  right: -7px;
  top: -11px;
  transform: rotate(-55deg) translate(-9px);
}

.line.two {
  right: -20px;
  top: 11px;
  transform: translate(-9px);
}

.line.three {
  right: -8px;
  top: 35px;
  transform: rotate(55deg) translate(-9px);
}

.line.four {
  left: -8px;
  top: -11px;
  transform: rotate(55deg) translate(9px);
}

.line.five {
  left: -20px;
  top: 11px;
  transform: translate(9px);
}

.line.six {
  left: -8px;
  top: 35px;
  transform: rotate(-55deg) translate(9px);
}

.line.seven {
  left: 11px;
  bottom: -21px;
  transform: translateY(-20px);
  width: 2px;
  height: 10px;
}

input[type="radio"]:checked ~ .bullet .line.zero{
  animation-name:drop-zero;
  animation-delay: 0.100s;
  animation-duration: 0.9s;
  animation-fill-mode: forwards;
}

input[type="radio"]:checked ~ .bullet .line.one{
  animation-name:drop-one;
  animation-delay: 0.100s;
  animation-duration: 0.9s;
  animation-fill-mode: forwards;
}

input[type="radio"]:checked ~ .bullet .line.two{
  animation-name:drop-two;
  animation-delay: 0.100s;
  animation-duration: 0.9s;
  animation-fill-mode: forwards;
}

input[type="radio"]:checked ~ .bullet .line.three{
  animation-name:drop-three;
  animation-delay: 0.100s;
  animation-duration: 0.9s;
  animation-fill-mode: forwards;
}

input[type="radio"]:checked ~ .bullet .line.four{
  animation-name:drop-four;
  animation-delay: 0.100s;
  animation-duration: 0.9s;
  animation-fill-mode: forwards;
}

input[type="radio"]:checked ~ .bullet .line.five{
  animation-name:drop-five;
  animation-delay: 0.100s;
  animation-duration: 0.9s;
  animation-fill-mode: forwards;
}

input[type="radio"]:checked ~ .bullet .line.six{
  animation-name:drop-six;
  animation-delay: 0.100s;
  animation-duration: 0.9s;
  animation-fill-mode: forwards;
}

input[type="radio"]:checked ~ .bullet .line.seven{
  animation-name:drop-seven;
  animation-delay: 0.100s;
  animation-duration: 0.9s;
  animation-fill-mode: forwards;
}

@keyframes explode {
  0%{
    opacity: 0;
    transform: scale(10);
  }
  60%{
    opacity: 1;
    transform: scale(0.5);
  }
  100%{
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes drop-zero {
  0% {
    opacity: 0;
    transform: translateY(20px);
    height: 10px;
  }
  20% {
    opacity:1;
  }
  100% {
    transform: translateY(-2px);
    height: 0px;
    opacity:0;
  }
}

@keyframes drop-one {
  0% {
    opacity: 0;
    transform: rotate(-55deg) translate(-20px);
    width: 10px;
  }
  20% {
    opacity:1;
  }
  100% {
    transform: rotate(-55deg) translate(9px);
    width: 0px;
    opacity:0;
  }
}

@keyframes drop-two {
  0% {
    opacity: 0;
    transform: translate(-20px);
    width: 10px;
  }
  20% {
    opacity:1;
  }
  100% {
    transform: translate(9px);
    width: 0px;
    opacity:0;
  }
}

@keyframes drop-three {
  0% {
    opacity: 0;
    transform: rotate(55deg) translate(-20px);
    width: 10px;
  }
  20% {
    opacity:1;
  }
  100% {
    transform: rotate(55deg) translate(9px);
    width: 0px;
    opacity:0;
  }
}

@keyframes drop-four {
  0% {
    opacity: 0;
    transform: rotate(55deg) translate(20px);
    width: 10px;
  }
  20% {
    opacity:1;
  }
  100% {
    transform: rotate(55deg) translate(-9px);
    width: 0px;
    opacity:0;
  }
}

@keyframes drop-five {
  0% {
    opacity: 0;
    transform: translate(20px);
    width: 10px;
  }
  20% {
    opacity:1;
  }
  100% {
    transform: translate(-9px);
    width: 0px;
    opacity:0;
  }
}

@keyframes drop-six {
  0% {
    opacity: 0;
    transform: rotate(-55deg) translate(20px);
    width: 10px;
  }
  20% {
    opacity:1;
  }
  100% {
    transform: rotate(-55deg) translate(-9px);
    width: 0px;
    opacity:0;
  }
}

@keyframes drop-seven {
0% {
    opacity: 0;
    transform: translateY(-20px);
    height: 10px;
  }
  20% {
    opacity:1;
  }
  100% {
    transform: translateY(2px);
    height: 0px;
    opacity:0;
  }
}



/* Submit */
.c-submit{}
.c-submit__item{}

@media (min-width: 641px){

	.index_search{
		display: none;
	}
	footer nav{
		display: none;
	}

	.c-submit{
		display: flex;
	}
	.c-submit__item{
		flex: 1 1 auto;
	}
	.c-submit__item:not(:first-child){
		margin-left: 2em;
	}
	.c-submit__item:first-child	{ flex: 1 1 60%; }
	.c-submit__item:last-child	{ flex: 1 1 40%; }
}
@media (max-width: 640px){
	footer nav{
		display: none;
	}
	.c-submit__item:not(:first-child){
		margin-top: .5em;
	}
}


@media (min-width: 641px){
	.c-sect2{
    margin: 2.5em 0;
	}
	.c-sect3{
		margin: 1.25em 0;
	}
}
@media (max-width: 640px){
	.c-sect2{
		margin: 1.25em 0;
	}
	.c-sect3{
		margin: .625em 0;
	}
}