.contact-title{
    text-align: center;
    font-family: 'Apricot', sans-serif;
    font-size:64px;
    letter-spacing: 0.2em;
    margin:100px 0 100px 0;
    color: #000;
}

.contact-main {
  width: min(90%, 1200px);
  margin: 60px auto;
}

.box-title{
    font-family: 'dot-gothic-16', sans-serif;
    font-size:32px;
}

.name-group{
    display: grid;
    align-items: center;
    margin-bottom: 20px;

}
.name-input{
    background-color: #fff;
    border: 4px solid #101010;
    box-shadow: 3px 3px 0 #1e1e1e;
    width: 100%;
box-sizing: border-box;
    height:50px;
    align-items: center;
    font-family: 'dot-gothic-16', sans-serif;
    font-size: 20px;
}

.email-group{
    display: grid;
    align-items: center;
    margin-bottom: 20px;
}

.email-input{
    background-color: #fff;
    border: 4px solid #101010;
    box-shadow: 3px 3px 0 #1e1e1e;
    width: 100%;
box-sizing: border-box;
    height:50px;
    align-items: center;
    font-family: 'dot-gothic-16', sans-serif;
    font-size: 20px;
}


.message-group{
    display: grid;
    align-items: center;
    margin-bottom: 20px;
}

.message-input{
    background-color: #fff;
    border: 4px solid #101010;
    box-shadow: 3px 3px 0 #1e1e1e;
  width: 100%;
box-sizing: border-box;
    height:300px;
    align-items: center;
    font-family: 'dot-gothic-16', sans-serif;
    font-size: 20px;
}

.send-btn {
  width: 180px;
  height: 48px;

  font-family: "DotGothic16";
  font-size: 18px;

  color: #000;
  background: #d4d0c8;

  border-top: 2px solid #fff;
  border-left: 2px solid #fff;
  border-right: 2px solid #808080;
  border-bottom: 2px solid #808080;

  cursor: pointer;
  display: block;
  margin: 40px auto;
}

.send-btn:hover {
  background: #e8e8e8;
}

.send-btn:active {
  border-top: 2px solid #808080;
  border-left: 2px solid #808080;
  border-right: 2px solid #fff;
  border-bottom: 2px solid #fff;

  transform: translate(1px,1px);
}


.mobile-view-link{
        display: block;
    text-align: center;
    margin-top: 20px;
    color: #0000ee;
    text-decoration: underline;
    font-size: 15px;
    font-family: "dot-gothic-16", monospace;
}


/* 表示切替：必ずPC用CSSの一番下 */
.mobile-home {
  display: none;
}

body.is-mobile-view .pc-home {
  display: none;
}

body.is-mobile-view .mobile-home {
  display: block;
}

body.is-pc-view .pc-home {
  display: block;
}

body.is-pc-view .mobile-home {
  display: none;
}