@charset "UTF-8";


/* ABOUT */
.about{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
  -webkit- transform: translateY(-55%) translateX(-50%);
}
.about-kg h1{
  margin: 0 auto 60px;
}
.about-kg p{
  text-align: center;
}
.about-kg .gallery-img{
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
}
.about-kg .gallery-img img{
  display: block;
  width: 48%;
  height: auto;
  margin: 1%;
}

/* CONTACT */
.contact dl,
.contact-check dl{
  display: flex;
  flex-wrap: wrap;
}

.contact dl dt,
.contact-check dl dt{
  width: 20%;
  margin: 0 auto 2rem;
}
.contact dl dd,
.contact-check dl dd{
  width: 80%;
  margin: 0 auto 2rem;
}
.contact dl dd input,
.contact dl dd textarea{
  width: 100%;
  padding: 0.5rem;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
}
p.center{
  text-align: center;
}
dl + p.center + p.center + p{
  text-align: center;
  margin: 0 auto 60px;
}
span.red{
  color: #c0002a;
}
.contact a{
  text-decoration: underline;
}
.contact a:hover{
  color: #343434;
}

.contact p input[type="submit"],
.contact-check p input[type="submit"]{
    color: #fff;
    background-color: #343434;
    border-color: #343434;
    display: inline-block;
    padding: 1rem 60px;
    margin-bottom: 60px;
    font-size: 16px;
    font-weight: 200;
    line-height: 1.8;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    -ms-touch-action: manipulation;
    touch-action: manipulation;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-image: none;
    border: none;
    border-radius: 8px;
}
.contact input::placeholder,
.contact textarea::placeholder{
  font-family: "Montserrat" , "Noto Sans Japanese" , "Helvetica Neue" ,  "Original Yu Gothic", "Yu Gothic", YuGothic, Verdana, Meiryo, "M+ 1p", sans-serif;
  font-weight: 200;
  color: #999;
}


/* -----------------------------------------------------------------
スマホ用メディアクエリ
----------------------------------------------------------------- */
@media screen and (max-width: 768px) {

/* ABOUT */
.about{
  position: relative;
  top:0;
  left:0;
  transform: none;
}
.about-kg h1{
  margin: 60px auto;
}
.about-kg p{
  text-align: left;
}
.about-kg br{
  display: none;
}
.about-kg .gallery-img{
  flex-direction: column;
}

/* contact */
.contact p {
  text-align: left;
}
.contact p.center{
  text-align: center;
}
.contact p br{
  display: none;
}
}/* メディアクエリend */