@charset "utf-8";

/* =============================================
  style
============================================= */
.sns-wrap a{
  position: relative;
  box-sizing: border-box;
  display: block;
  height: 100%;
  padding: 30px 20px 20px;
  color: #333;
  text-decoration: none;
  border: 1px solid var(--stus-red);
  border-radius: 15px;
  transition: all 0.2s ease;
}
.sns-wrap a::before{
  position: absolute;
  right: 15px;
  bottom: 15px;
  width: 12px;
  height: 11px;
  content: ' ';
  background: url(/nikken/img/ico-outsite.svg) no-repeat left top;
}
.sns-wrap a:hover{
  opacity: 0.7;
}
.sns-wrap a img{
  width: 140px;
}
.block__header{
  position: relative;
  margin: 50px 0 20px;
  vertical-align: middle;
  text-align: center;
}
.sns-name{
  position: relative;
  z-index: 10;
  display: inline-block;
  padding: 0 20px;
  font-size: 2.5rem;
  vertical-align: middle;
  text-align: center;
  background-color: #fff;
}
.block__header::before{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 15px;
  margin: auto 0;
  content: ' ';
  background: repeating-linear-gradient(-45deg, transparent, transparent 7px, rgb(228 228 228 / 100%) 7px, rgb(228 228 228 / 100%) 10px )
}
.sns-name span{
  position: relative;
  z-index: 100;
  display: inline-block;
  padding: 0 5px 3px;
  font-family: Arial, Helvetica, sans-serif;
  background-color: #fff;
  border-bottom: 2px dotted #ccc;
}
.sns-name img{
  position: relative;
  z-index: 100;
  width: 60px;
  margin-right: 10px;
  margin-left: -5px;
  vertical-align: middle;
  background-color: #fff;
  border-right: 5px solid #fff;
  border-left: 5px solid #fff;
}
.block1 div{
  box-sizing: border-box;
  display: flex;
  flex-direction:column;
  height: 100%;
}
.account-id{
  margin-top: 10px;
  font-size: 1.5rem;
  font-weight: 300;
}
.account-name{
  margin-top: 15px;
  font-size: 1.7rem;
}
p.account-info{
  padding: 0;
  margin: 20px 0;
  font-size: 1.4rem;
  line-height: 1.6;
  text-align: left;
}

/* ===========================================
	MediaQueries
=========================================== */

/* スマホ----------------------------- */
@media screen and (width <= 767px){
  .sns-wrap a{
    margin: 0 0 10px;
  }
}

/* PC----------------------------- */
@media screen and (width >= 768px){
  .sns-wrap{
    margin-top: -50px;
  }
  .sns-wrap{
    display: flex;
    flex-wrap: wrap;
    gap: 25px;
    margin-top: -50px;
  }
  .block2{
    display:flex;
    flex-direction:column;
    width: calc(100% / 3 * 2);
    height: 100%;
    height:auto;
  }
  .block2 > div{
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    justify-content: space-between;
    height: 100%;
  }
  .block2 > div div{
    width: calc(97% / 2);
  }
  .block1{
    flex: 1;
  }
}