@import
url('https://fonts.googleapis.com/css?family=Noto+Sans+JP&display=swap');
@import
url('https://fonts.googleapis.com/css?family=Sawarabi+Gothic');
@import
url('https://fonts.googleapis.com/css?family=M+PLUS+1p');
@import
url('https://fonts.googleapis.com/css?family=Sawarabi+Mincho&display=swap');


/* =======================================
パソコンとスマホ　表示・非表示
 ======================================= */
@media(max-width:899px){
.pc{display:none;
}}
@media(min-width:900px){
.mobile{display:none;
}}

/* =======================================
マウスのると画像を半透明にする
 ======================================= */
.a_img:hover{opacity:0.7;/*70％透明*/}
/* =======================================
スクロール固定用
 ======================================= */
 .fixed {
    position: fixed;
    top: 10px;

}





/* =======================================
表
 ======================================= */
.table {
	border-top-width: 1px;
	border-left-width: 1px;
	border-top-style: solid;
	border-left-style: solid;
	border-top-color: #999999;
	border-left-color: #999999;
}


.td {
	line-height: 120%;
	border-right-width: 1px;
	border-bottom-width: 1px;
	border-right-style: solid;
	border-bottom-style: solid;
	border-right-color: #999999;
	border-bottom-color: #999999;
}

.t1 {
	margin-top: 13px;
	margin-bottom: 13px;
	text-align: center;
}

.t2 {
    margin-top: 13px;
    margin-bottom: 13px;
    text-align: center;
    color: #FFF;
    margin-left: 5px;
    margin-right: 5px;
}
.t3 {
    margin-top: 13px;
    margin-bottom: 13px;
    text-align: left;
    margin-left: 7px;
    margin-right: 7px;
}






/*-----------------------*/



button {
    background: none;
    border: 0;
    box-sizing: border-box;
    margin: 1em;
    padding: 1em 2em;
    box-shadow: inset 0 0 0 2px #F0F0F0;
    color: #8D8D8D;
    font-size: inherit;
    font-weight: 700;
    position: relative;
    vertical-align: middle;
}
button::before, button::after {
  box-sizing: inherit;
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
}




.spin {
  width: 318px;
  height: 318px;
  padding: 0;
}
.spin:hover {
  color: #0eb7da;
}
.spin::before, .spin::after {
  top: 0;
  left: 0;
}
.spin::before {
  border: 2px solid transparent;
}
.spin:hover::before {
  border-top-color: #0eb7da;
  border-right-color: #0eb7da;
  border-bottom-color: #0eb7da;
  transition: border-top-color 0.15s linear, border-right-color 0.15s linear 0.1s, border-bottom-color 0.15s linear 0.2s;
}
.spin::after {
  border: 0 solid transparent;
}
.spin:hover::after {
  border-top: 2px solid #0eb7da;
  border-left-width: 2px;
  border-right-width: 2px;
  -webkit-transform: rotate(270deg);
          transform: rotate(270deg);
  transition: border-left-width 0s linear 0.35s, -webkit-transform 0.4s linear 0s;
  transition: transform 0.4s linear 0s, border-left-width 0s linear 0.35s;
  transition: transform 0.4s linear 0s, border-left-width 0s linear 0.35s, -webkit-transform 0.4s linear 0s;
}

.circle {
  border-radius: 100%;
  box-shadow: none;
}
.circle::before, .circle::after {
  border-radius: 100%;
}


.buttons {
  isolation: isolate;
}



.draw {
  transition: color 0.25s;
}
.draw::before, .draw::after {
  border: 2px solid transparent;
  width: 0;
  height: 0;
}
.draw::before {
  top: 0;
  left: 0;
}
.draw::after {
  bottom: 0;
  right: 0;
}
.draw:hover {
  color: #686868;
}
.draw:hover::before, .draw:hover::after {
  width: 100%;
  height: 100%;
}
.draw:hover::before {
  border-top-color: #686868;
  border-right-color: #686868;
  transition: width 0.25s ease-out, height 0.25s ease-out 0.25s;
}
.draw:hover::after {
  border-bottom-color: #686868;
  border-left-color: #686868;
  transition: border-color 0s ease-out 0.5s, width 0.25s ease-out 0.5s, height 0.25s ease-out 0.75s;
}

.meet:hover {
    color: #43B8FF;
}
.meet::after {
  top: 0;
  left: 0;
}
.meet:hover::before {
  border-top-color: #43B8FF;
  border-right-color: #43B8FF;
}
.meet:hover::after {
  border-bottom-color: #43B8FF;
  border-left-color: #43B8FF;
  transition: height 0.25s ease-out, width 0.25s ease-out 0.25s;
}