.btn-gradient-3d-orange {
  display: inline-block;
  padding: 0.5em 1em;
  text-decoration: none;
  border-radius: 4px;
  color: #ffffff;
  background-image: linear-gradient(0deg, #FFC107 0%, #ff8b5f 100%);
  box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.29);
  border-bottom: solid 3px #c58668;
}

.btn-gradient-3d-orange:active {
  -webkit-transform: translateY(4px);
  transform: translateY(4px);
  box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.2);
  border-bottom: none;
}

.btn-gradient-radius {
  display: inline-block;
  padding: 7px 20px;
  border-radius: 25px;
  text-decoration: none;
  color: #FFF;
  background-image: linear-gradient(45deg, #FFC107 0%, #ff8b5f 100%);
  transition: .4s;
}

.btn-gradient-radius:hover {
  background-image: linear-gradient(45deg, #FFC107 0%, #f76a35 100%);
}

.orangea a{
	color: white;
}
.cardd {
  position: relative;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
      flex-direction: column;
  min-width: 0;
  word-wrap: break-word;
  background-color: #efefef;
  background-clip: border-box;
  border: 1px solid rgba(0, 0, 0, 0.125);
  border-radius: 0.25rem;
  padding:10px 10px 10px 10px;
  margin-bottom: 10px;
}
.portfolio-item{
	padding-bottom: 10px;
}
.menu label {
 	text-align:center;
 	background-color:#fff;
  	color: #000;
  	padding: 10px;
  	display: block;
  	margin: 0px;
}
.menu li {
  padding: 10px;
}
input[type="checkbox"].on-off{
  display: none;
}
input[type="checkbox"].on-off + ul{
  height: 0;
  overflow: hidden;
}
input[type="checkbox"].on-off:checked + ul{
  height:auto;
}

.menulist{
	margin:0px 0px 10px 30px;
}
	
.bar{
	text-align: center;
	font-weight: bold;
	padding-bottom: 10px;
}
.bar2{
	text-align: left;
	padding-bottom: 10px;
}
#pageTop {
  position: fixed;
  bottom: 20px;
  right: 20px;
  opacity: 0.7;
}
 
#pageTop a {
  display: block;
  z-index: 999;
  padding: 7px 0px 0px 0px;
  border-radius: 35px;
  width: 40px;
  height: 40px;
  background-color: #ccc;
  color: #000;
　line-height: 35px;
  font-weight: bold;
  text-decoration: none;
  text-align: center;
}
 
#pageTop a:hover {
  text-decoration: none;
}

#mailCircle {
  position: fixed;
  bottom: 20px;
  left: 20px;
  opacity: 0.7;
}
 
#mailCircle a {
  display: block;
  z-index: 999;
  padding: 7px 0px 0px 0px;
  border-radius: 35px;
  width: 40px;
  height: 40px;
  background-color: #CCCCCC;
  color: #000;
　line-height: 35px;
  font-weight: bold;
  text-decoration: none;
  text-align: center;
}
 
#mailCircle a:hover {
  text-decoration: none;
}

#tellCircle {
  position: fixed;
  bottom: 70px;
  left: 20px;
  opacity: 0.7;
}
 
#tellCircle a {
  display: block;
  z-index: 999;
  padding: 7px 0px 0px 0px;
  border-radius: 35px;
  width: 40px;
  height: 40px;
  background-color: #CCCCCC;
  color: #000;
　line-height: 35px;
  font-weight: bold;
  text-decoration: none;
  text-align: center;
}
 
#tellCircle a:hover {
  text-decoration: none;
}
.youtubePv{
	width: 340px;
}
.br-sp{
		display:none;
	}

@media (max-width: 991px) {
	.br-sp{
		display:block;
	}
}
@media (max-width: 576px) {
	.youtubePv{
		width: 100%;
	}
	.bar h1{
		font-size: 2rem;
	}
	h5{
		font-size: 1rem;
	}
	
	.cardd h3{
		font-size: 1.3rem;
	}
	
	.col-ss-4{
		-ms-flex: 0 0 33.333333%;
      		flex: 0 0 33.333333%;
  		max-width: 33.333333%;
		padding: 0.25rem;
	}
	.col-ss-6{
		-ms-flex: 0 0 50%;
      		flex: 0 0 50%;
  		max-width: 50%;
		padding: 0.5rem;
	}
}