@charset "utf-8";

/*	┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
	┃　
	┃　■ 初版 1.0.0
	┃　
	┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛*/



/* 
！！！！未検証！！！！
ボタンのbackgroundの基本設定
これは、各ボタンに直接CSSでbackground-imageを指定して、下を指定する
 */

 .btn-bg-image{
	position:relative;
	background-size:cover;
	background-repeat:no-repeart;
	background-position: 50% 50%;
}

	.btn-bg-image:hover {
		text-decoration:none;
		backdrop-filter: blur(4px);
		-webkit-backdrop-filter: blur(4px);
	}



/*	┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
	┃　■ ボタンコンテンツ
	┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛*/

.btn-xs, .btn-group-xs > .btn {
    padding: 0.15rem 0.2rem;
    font-size: 0.74rem;
    border-radius: 0.2rem;
}

/*	┌─────────────────────────────┐
	│　□ button-effect-01
	└─────────────────────────────┘*/

.button-effect-01 {
  position: relative;
  display: block;
  /* padding: .5em 4em; */

  border: 1px solid rgba(0,0,0,0.50);
  color: rgba(0,20,110,1.00);
  text-align: left;
  text-decoration: none;
  outline: none;
  transition: all .3s;
	background-color: rgba(0,0,0,0.10);
	padding: 1.0em 1.0em;
	max-width: 15em;
    margin-left: auto;
    margin-right: auto;
	line-height: 1.0em;
		background-image: url("/eng/assets/images/top/eng-top_link-icon-02.svg");
		background-repeat: no-repeat;
		background-position: 95% 50%;
		background-size: 1em 1em;
}

.button-effect-01 strong {
	font-size:0.7em;
	opacity: 0.5;
}

.button-effect-01::before,
.button-effect-01::after,
.button-effect-01 span::before,
.button-effect-01 span::after {
  position: absolute;
  z-index: 2;
  content: '';
  width: 0;
  height: 0;
  border: 1px solid transparent;
  transition: all .3s;
  visibility: hidden;
  box-sizing: content-box;
}
.button-effect-01::before {
  top: -1px;
  left: -1px;
  border-left-color: rgba(255,255,255,1.00);
}
.button-effect-01::after {
  bottom: -1px;
  right: -1px;
  border-right-color: rgba(255,255,255,1.00);
}
.button-effect-01 span::before {
  bottom: -1px;
  left: -1px;
  border-bottom-color: rgba(255,255,255,1.00);
}
.button-effect-01 span::after {
  top: -1px;
  right: -1px;
  border-top-color: rgba(255,255,255,1.00);
}
.button-effect-01:hover {
  color: rgba(0,20,110,1.00);
}
.button-effect-01:hover::before,
.button-effect-01:hover::after {
  height: 100%;
  visibility: visible;
}
.button-effect-01:hover span::before,
.button-effect-01:hover span::after {
  width: 100%;
  visibility: visible;
}

/*	┌─────────────────────────────┐
	│　□ Bootstrap5 対応
	└─────────────────────────────┘*/

.btn-outline-primary,
.btn-outline-danger {
	background-color: #ffffff;
}

/*	┌─────────────────────────────┐
	│　□ 調整中
	└─────────────────────────────┘*/

.button-m {
	width: 20em;
	margin: 0 2px;
	float: left;
}
/*営業所一覧　ボタン*/
.button-xs {
	width: 10em;
	margin: 0 2px;
	float: left;
}

.button-4{
  border:2px solid #34495e;
  /* float:left; */
  text-align:center;
  cursor:pointer;
  position:relative;
  box-sizing:border-box;
  overflow:hidden;
  /* margin:0 0 40px 50px; */
}
.button-4 a{
  font-family:arial;
  /* font-size:16px; */
  color:#34495e;
  text-decoration:none;
  /* line-height:50px; */
  transition:all .5s ease;
  z-index:2;
  position:relative;
}

.eff-4{
  left:-100%; /* -140px */
  background:#34495e;
  position:absolute;
  transition:all .5s ease;
  z-index:1;
}
.button-4:hover .eff-4{
  left:0;
}
.button-4:hover a{
  color:#fff;
}
.each-margin{
	margin:2rem 0;
}
.eff {
    width: 100%;
}
.button,
.eff {
  height:50px;
  line-height:50px;
}