/*--------------------------------------------------------*/
.products{}a,a:link,a:visited,a:active {
  color: #000;
  text-decoration: none;
}
/*ヘッダーのグローバルメニュー中にある企業情報タグをポイント*/
.global-menu > .menu > ul > li > a > .mail{
  background: linear-gradient(176deg,#bce2e8,#00B7CE);
}
/*--------------------------------------------------------*/
.contact-page{
  max-width: 1000px;
  margin: 30px auto 0;
  text-align: left;
  font-size: 14px;
}
/*--------------------------------------------------------*/
.page-title{}
.page-title > h1{
  font-size: 18px;
  margin-top: 1.5em;
}
/*--------------------------------------------------------*/
.g-form{}
.g-form .pc-only{display: inline;}
.g-form .sp-only{display: none;}

/*--------------------------------------------------------*/
.contact-mail{
  display:grid;
  grid-template-rows:repeat(3,auto);
  grid-template-columns:100px 700px;
  width: 800px;
  height: 66px;
  margin: 2em auto 0 50px;
}
.contact-mail > .mail-btn{
  grid-area:1/1/4/2;
  margin:0 auto;
  width: 90px;
  height: 60px;
  border: 1px solid #009BB0;
  border-bottom-width: 5px;
  box-shadow: 0 2px 2px #00000055;
  border-radius: 5px;
  background: linear-gradient(176deg,#bce2e8,#00B7CE);
  transition: all 0.125s;
}
.contact-mail > .mail-btn:hover{
  border-bottom-width: 2px;
  box-shadow: 0 0 1px #00000044;
  transform: translateY(3px);
}
.contact-mail > .mail-btn:hover > a{text-decoration:none;}

.contact-mail > .mail-btn > a > img{
  filter: invert();
  display: block;
  width: 50px;
  height: 50px;
  margin: 0 auto;
}
.contact-mail > .mail-btn > a > p{
  width: 4em;
  margin: -11.5px auto 0;
  font-size: 1.1em;
  font-weight: bold;
  color: white;
}

.contact-mail > p{margin: 0 0 0 .5em;}
.contact-mail > p:nth-of-type(1){}
.contact-mail > p:nth-of-type(2){padding-left: 1em;}
.contact-mail > p:nth-of-type(3){padding-left: 1em;}

/*--------------------------------------------------------*/
.contact-tel{
  width: 800px;
  margin: 3em auto 0 50px;
}
.contact-tel > p{margin: 0;}
.contact-tel > p:nth-of-type(1){}
.contact-tel > p:nth-of-type(2){padding-left: 1em;}
.contact-tel > p:nth-of-type(3){padding-left: 1em;}
.contact-tel > p:nth-of-type(4){padding-top: 1em;}


/*--以下、スマホにて表示した場合---------------------------------*/
@media only screen and (min-width: 320px) and (max-width: 568px){
  .contact-page{
    max-width: 97%;
    margin:auto 1%;
  }
  /*--------------------------------------------------------*/
  .page-title{}
  /*--------------------------------------------------------*/
  .g-form{}
  .g-form .pc-only{display: none;}
  .g-form .sp-only{display: inline;}
  /*--------------------------------------------------------*/
  .contact-mail{
    display:grid;
    grid-template-rows:repeat(3,auto);
    grid-template-columns:110px auto;
    width: auto;
    height: auto;
    margin: 2em 0 0;
  }
  .contact-mail > .mail-btn{
    width: 105px;
    height: 90px;
    border: 1px solid #009BB0;
    border-bottom-width: 1px;
    box-shadow: 0 0 0 #00000000;
  }
  .contact-mail > .mail-btn:hover{
    border-bottom-width: 1px;
    box-shadow: 0 0 0 #00000000;
    transform: translateY(0);
  }

  .contact-mail > .mail-btn > a > img{
    width: 70px;
    height: 70px;
  }
  .contact-mail > .mail-btn > a > p{
    margin: -10px auto 0;
    font-size: 1.2em;
  }

  .contact-mail > p{
    margin: 0 0 .5em 1em;
    font-size: clamp(12px, 3.3vw, 15px);
  }
  .contact-mail > p:nth-of-type(1){
    padding-left: 1em;
    text-indent: -1em;
  }
  .contact-mail > p:nth-of-type(2){}
  .contact-mail > p:nth-of-type(3){}
  /*--------------------------------------------------------*/
  .contact-tel{
    width: auto;
    margin: 1em 0 0;
  }
  .contact-tel > p{font-size: clamp(12px, 3.3vw, 15px);}
  .contact-tel > p:nth-of-type(1){}
  .contact-tel > p:nth-of-type(2){padding-left: 1em;}
  .contact-tel > p:nth-of-type(3){padding-left: 1em;}
  .contact-tel > p:nth-of-type(4){padding-top: 1em;}
}








/**/