/*--- 線から塗り（共通設定） ---*/

.btn05{
    /*線の基点とするためrelativeを指定*/
    position: relative;
    /*ボタンの形状*/
    display: inline-block;
    color: #383c3c !important;
    padding: 10px 20px;
    background:#bed3ca;
    text-decoration: none;
    outline: none;
    /*アニメーションの指定*/
    transition: all .3s;
    transition-delay: .7s;/*0.7秒遅れてアニメーション*/
}

/*hoverした際の、ボタンの背景とテキスト色の変更*/
.btn05:hover{
	background:#426579;
	color: #fff!important;
}

/*線の設定*/
.btn05 span{
    display: block;
}

/*横線の設定*/
.btn05::before,
.btn05::after{
    content:"";
    /*絶対配置で線の位置を決める*/   
    position: absolute;
    /*線の形状*/   
    width: 0;
    height: 1px;
    background: #333;
    /*アニメーションの指定*/
    transition: all 0.2s linear;
}

/*縦線の設定*/
.btn05 span::before,
.btn05 span::after{
    content:"";
    /*絶対配置で線の位置を決める*/   
    position: absolute;
    /*線の形状*/
    width:1px;
    height:0;
    background: #333;
	    border-radius: 10px;

    /*アニメーションの指定*/
    transition: all 0.2s linear;
}

/*hoverした際、線が縦横100%伸びる*/
.btn05:hover::before,
.btn05:hover::after{
    width: 100%;
}
.btn05:hover span::before,
.btn05:hover span::after{
    height: 100%;
}

/*== 左上と右下から枠線が伸びて塗に */

/*横線が0.2秒送れて出現*/

.bordercircle1::before{
    right: 0;
    top: 0;
    transition-delay: 0.2s;
}
.bordercircle1::after{
    left: 0;
    bottom: 0;
    transition-delay: 0.2s;
}

/*縦線が出現*/
.bordercircle1 span::before{
    left: 0;
    top: 0;
}
.bordercircle1 span::after{
    right: 0;
    bottom: 0;
}


.modal {
  display: none;
  position: fixed;
  z-index: 9999;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.8);
  text-align: center;
}

.modal-image {
  margin-top: 5%;
  max-width: 90%;
  max-height: 80%;
  border-radius: 10px;
}

.close {
  position: absolute;
  top: 20px;
  right: 30px;
  color: white;
  font-size: 40px;
  font-weight: bold;
  cursor: pointer;
}
.close:hover {
  color: #ccc;
}