@charset "utf-8";

/*PCメインメニュー::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/
.mainbtn{
	display: inline-block;
	box-sizing: border-box;
	/* width: 114px; */
	width: 80px;
	height: 36px;
	/* line-height: 36px; */
	line-height: 36px;
	font-size: 16px;
	color:  rgba(255,255,255,1);
	background: #009ee0;
	/* box-shadow: #a0b6e0 0 5px 6px -4px inset; */
	transition: .2s;
}
.mainbtn:hover{
	box-shadow: none;
	text-shadow: 0 0 2px #ffffffaa;
	color: #fff;
	background: #efedb3;
}

/*トップ　ボタン::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/
.square-btn-g,
.square-btn-r{
	width: 150px;
	height: 80px;
	margin: 4px 6px 6px 4px;
	border-radius: 1px;
	display: table-cell;
	box-shadow: #aaa 0 0 4px, #aaa 2px 2px 4px;
	color: #fff;
	text-align: center;
	vertical-align: middle;
	cursor: pointer;
}
.square-btn-r{ background: #F66049;	line-height: 1.3;}
.square-btn-g{ background: #97D8BD; line-height: 1.2;}

.mini-red{
	margin-top: 3px;
	display: inline-block;
	width:50px;
	height:26px;
	line-height: 26px;
	box-sizing: border-box;
	border-radius: 4px;
	background: linear-gradient(180deg,#fff ,#fc5454 4px);
	box-shadow: #333 0 -2px 3px 0 inset;
	font-size: 14px;
	content: "";
}
.mini-red::before{	transform: scaleX(3)}
.mini-red::after{	content: "▶";}
.square-btn-g:hover .mini-red{
	background: linear-gradient(0deg,#fff ,#fc5454 4px);
	box-shadow: #333 0 2px 2px 0 inset;
}

.square-btn-r:hover{ box-shadow: none; text-shadow: #9b2424 1px 2px 0;}
.square-btn-g:hover{ box-shadow: none;}


.squarebox{ width:160px;height:80px; padding-left: 4px; display: inline-block;}
.squarebox a:link, .squarebox a:visited{color: #fff;}

.postbtn{
	display: inline-block;
	vertical-align: middle;
	font-weight: bold;
	font-size: 16px;
	color: #fff;
	padding: .8em 1em;
	border-radius: 0.6em;
	margin: auto;
	z-index: 0;
	background:linear-gradient(180deg, #6495ed 0%, #AAC8FF 50%, #6699FF 50%, #235bc8 100%);
	transition: .2s;
}
.postbtn:hover{
	opacity:0.7;
}
.postbtn span{font-size: 20px;vertical-align: -4px;}

/*::::::::::　ユーザー事例用　:::::::::::*/
.btncover{
  display: inline-block;
  width: 28%;
  margin: 30px 3px 20px;
  text-align: center;
}

.button09 a {
  display: flex;
  box-sizing: border-box;
  justify-content: space-between;
  align-items: center;
  position: relative;
  margin: 0 auto;
  padding: 1em 2em 20px;
  width: 100%;
  color:#bb3e3e;
  font-size: 15px;
  font-weight: 700;
  background-color: #009ee0;
  transition: 0.3s;
}

.button09 a::before {
  content: '';
  position: absolute;
  top: -5px;
  left: -5px;
  width: calc(100% - 4px);
  height: calc(100% - 4px);
  border: 2px solid #009ee0;
  transition: 0.2s;
}

.button09 a::after {
  content: '';
  width: 5px;
  height: 5px;
  border-top: 3px solid #6699ff;
  border-right: 3px solid #6699ff;
  transform: rotate(45deg);
  transition: 0.2s;
}

.button09 a:hover::before {
  top: 0;
  left: 0;
  border: 5px double #fff;
  width: calc(100% - 10px);
  height: calc(100% - 10px);
}
.button09 a:hover::after {
  border-top: 2px solid #fff;
  border-right: 2px solid #fff;
  transform: translate(15px, 0px) rotate(45deg);
}
.button09 a:hover {
  text-decoration: none;
  background-color: #160796;
  color: #fff;
  padding: 1em 2em;
}



@media (max-width:789px){
    .btncover{
      display: block;
      width: 80%;
      margin: 20px auto;
    }
}
/*::::::::::　/ユーザー事例用　:::::::::::*/