/*
---------------------------------------------- */
.contact-wrap{
  position: relative;
  overflow: hidden;
  background-color:#f8f8f8;
}
/*コンタクト
---------------------------------------------- */
.contact-box{
  position: relative;
  max-width:550px;
  margin:0 auto;
  font-size:0;
  letter-spacing: -10rem;
  padding:60px 8vw 100px;
  display:block;
}
@media screen and (min-width: 600px) {
.contact-box{
  padding:60px 30px 100px;
}
}
/* 
---------------------------------------------- */
.contact-box-inner{
  position: relative;
  width:calc(100% + 15px);
  margin:0 auto;
  color:#293133;
  text-align:center;
}
/* 
---------------------------------------------- */
.contact-midashi {  
  position: relative;
  margin:0px auto 30px;
  background-repeat: no-repeat;
  background-position: center center;
  background-size:contain;
  background-image: url(../images/contact/contact-entry.svg);
  aspect-ratio:3 /1;
display:none;
}
/*
---------------------------------------------- */
.contact-text {
  position: relative;
  max-width:400px;
  aspect-ratio:3.8 /1;
  cursor: pointer;
  background-repeat: no-repeat;
  background-position: center center;
  background-size:contain;
  margin:0px auto 40px;
}
.contact-text.lazyloaded {
  background-image: url(../images/contact/contact-text.svg);
}
/*
---------------------------------------------- */
.contact-line-box,
.contact-mail-box,
.contact-insta-box,
.contact-tel-box,

a.contact-line-box,
a.contact-mail-box,
a.contact-insta-box,
a.contact-tel-box{
  position: relative;
  display:inline-block;
  vertical-align: top;
  width:calc(50% - 10px);
  aspect-ratio: 1 / 1;
  margin:0 10px 10px 0;
  border-radius:20px;
  background-color:#fff;
  border:1px solid #293133;
}
/*
---------------------------------------------- */
.contact-line,
.contact-insta,
.contact-mail,
.contact-tel {
  position: absolute;
  display:block;
  width:20%;
  aspect-ratio:1 /1;
  top:8%;
  left:8%;
  cursor: pointer;
  background-repeat: no-repeat;
  background-position: center center;
  background-size:contain;
}
.contact-line.lazyloaded {
  background-image: url(../images/contact/line-aicon.svg);
}
.contact-insta.lazyloaded  {
  background-image: url(../images/contact/insta-aicon.svg);
}
.contact-mail.lazyloaded  {
  background-image: url(../images/contact/mail-aicon.svg);
}
.contact-tel.lazyloaded{
  background-image: url(../images/contact/tel-aicon.svg);
}
/*
---------------------------------------------- */
.contact-line-text,
.contact-insta-text,
.contact-mail-text,
.contact-tel-text {
  position: absolute;
  display:block;
  width:70%;
  aspect-ratio:1 /1;
  top:50%;
  left:50%;
  transform: translate(-50%,-50%);
  background-repeat: no-repeat;
  background-position: center center;
  background-size:contain;
}
.contact-line-text.lazyloaded {
  background-image: url(../images/contact/line-text.svg);
}
.contact-insta-text.lazyloaded  {
  background-image: url(../images/contact/insta-text.svg);
}
.contact-mail-text.lazyloaded  {
  background-image: url(../images/contact/mail-text.svg);
}
.contact-tel-text.lazyloaded{
  background-image: url(../images/contact/tel-text.svg);
}
/*会社ボックス
---------------------------------------------- */
.company-box{
  position: relative;
  margin:0 auto;
  padding-top:40px;
}
/* ロゴ
---------------------------------------------------------------*/
.contact-tiptop {
  position: relative;
  max-width: 80%;
  max-width: 300px;
  margin:0 auto 30px;
  aspect-ratio:2.4 / 1;
  background-repeat: no-repeat;
  background-position: center  center;
  background-size: contain;
}

.contact-tiptop.lazyloaded{
 background-image: url(../images/tiptop-logo-black.svg);
}
/* 
---------------------------------------------------------------------------*/
.company-name {
  position: relative;
  display:block;
  max-width: 80%;
  max-width: 300px;
  margin:0 auto 30px;
  aspect-ratio:4.6 / 1;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
}
.company-name.lazyloaded{
  background-image: url(../images/contact/makeendo.svg);
}
/* 
---------------------------------------------------------------------------*/
a.map{
  position: relative;
  display:block;
  margin:0 auto;
  aspect-ratio:1.3 / 1;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
}
a.map.lazyloaded{
  background-image: url(../images/contact/map.svg);
}