body {
  font-family: "Helvetica Neue",
  Arial,
  "Hiragino Kaku Gothic ProN",
  "Hiragino Sans",
  Meiryo,
  sans-serif;
  letter-spacing: 0.05em;
  color: #6f6f6f;
}
p {
  line-height: 1.8em;
  font-size: 15px;
}
picture {
 display: block;
 line-height: 0;
}
img {
  width: 100%;
  height: auto;
}
.mt1em{
    display: block;
    margin-top: 1em;
}
.pc{display: block;}
.sp{display: none;}

@media screen and (max-width: 768px){
    .pc{display: none;}
    .sp{display: block;}
    p{font-size: 14px;}
}

/*--------------------------------------------------------------------------
 googlefont
---------------------------------------------------------------------------*/
.noto-serif-display-{
  font-family: "Noto Serif Display", serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
  font-variation-settings:
    "wdth" 100;
}

/*--------------------------------------------------------------------------
 title-box
---------------------------------------------------------------------------*/
.title-box {
  font-size: 55px;
  font-weight: 400;
  line-height: .6;
  text-align: center;
}
.title-box span{
  font-size: 15px;
  font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
}

@media screen and (max-width: 768px) {
  .title-box{font-size: 44px;}
  .title-box span{font-size: 12px;}
}


/*--------------------------------------------------------------------------
 footer
---------------------------------------------------------------------------*/
footer {
  padding: 70px 40px 60px;
  background: #f5f5f5;
  color: #333;
}
footer .logo {width: 140px;}
footer .info {position: relative;}
footer .info ul {margin-top: 25px;}
footer .info ul li {
  display: inline-block;
  font-size: 13px;
}
footer .info ul li::after {
  content: "│";
  display: inline-block;
  padding: 0 15px;
}
footer .info ul li:last-child:after {display: none;}
footer .info .copy {
  font-size: 12px;
  position: absolute;
  top: 0;
  right: 0;
  opacity: 0.4;
}

@media screen and (max-width: 900px) {
  footer {
    padding: 30px 20px 25px;
    text-align: center;
  }
  footer .logo {
    width: 140px;
    margin: 0 auto;
  }
  footer .info ul {margin-top: 15px;}
  footer .info ul li {
    display: inline-block;
    font-size: 11px;
  }
  footer .info ul li::after {
    content: "│";
    display: inline-block;
    padding: 0 5px;
  }
  footer .info .copy {
    margin-top: 20px;
    font-size: 10px;
    text-align: center;
    position: relative;
    top: initial;
    right: initial;
  }
}
@media screen and (max-width: 768px) {
  footer {padding-bottom: 80px;}
}



/*--------------------------------------------------------------------------
 fix-contact
---------------------------------------------------------------------------*/
.fix-contact {display: none;}

@media screen and (max-width: 768px) {
  .fix-contact {
    display: block;
    width: 100%;
    background: #fff;
    position: fixed;
    bottom: 0;
    z-index: 50;
  }
  .fix-contact ul {
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    justify-content: space-between;
    -webkit-flex-wrap: wrap;
    -moz-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    -o-flex-wrap: wrap;
    flex-wrap: wrap;
    /* padding: 0 10px; */
    border-top: 1px solid #e2e2e2;
  }
  .fix-contact ul li {
    flex: 0 1 25%;
    max-width: 25%;
    position: relative;
  }
  .fix-contact ul li:first-child{border-right: 1px solid #ddd;}
/*   .fix-contact ul li:first-child::before{
    content: "";
    width: 1px;
    height: 85%;
    border-right: 1px solid #ddd;
    position: absolute;
    top: 50%;
    right: 0;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
  } */
  .fix-contact ul li a {
    width: 100%;
    padding: 30% 0 15%;
    font-size: 12px;
    font-weight:400;
    text-align: center;
    display: block;
  }
  .fix-contact ul li.gd{background: #bf9a77;}
  .fix-contact ul li.bk{background: #6f6f6f;}
  .fix-contact ul li.gd a,
  .fix-contact ul li.bk a{
    padding: 20% 0 20%;
    color: #fff;
    line-height: 1;
  }
  .fix-contact ul li a span{
    font-size: 9px;
    font-weight: normal;
      line-height: 3;
  }
  .fix-contact ul li a i{
    display: block;
    margin: 0 auto 7px;
  }
  .fix-contact ul li a i img{height: 12px;}
}





/*--------------------------------------------------------------------------
 Aimation
---------------------------------------------------------------------------*/
.fade-in { opacity: 0;}
/* ie11 ハック*/
@media all and (-ms-high-contrast:none){
.fade-in {
 opacity: 1;
}
}

.in {
 -webkit-animation-name: fadeIn;
 animation-name: fadeIn;
 animation-duration: 1s;
 animation-fill-mode: forwards;
 animation-timing-function: ease;
}

@-webkit-keyframes fadeIn {
 from {
  opacity: 0;
 }
 to {
  opacity: 1;
 }
}

@keyframes fadeIn {
 from {
  opacity: 0;
 }
 to {
  opacity: 1;
 }
}

.fade-up {
 opacity: 0;
 transform: translate3d(0,30px,0);
 -webkit-transform: translate3d(0,30px,0);
}
/* ie11 ハック*/
@media all and (-ms-high-contrast:none){
.fade-up {
 opacity: 1;
 transform: translate(0,0);
 -webkit-transform: translate(0,0);
}
}

.up {
 -webkit-animation-name: fadeUp;
 animation-name: fadeUp;
 animation-duration: 1s;
 animation-fill-mode: forwards;
 animation-timing-function: ease;
}

.delay01 { animation-delay: 0.5s;}
.delay02 { animation-delay: 1s;}
.delay03 { animation-delay: 1.5s;}
@media screen and (max-width: 768px) {
 .delay01 { animation-delay: 0s;}
 .delay02 { animation-delay: 0s;}
}
@keyframes fadeUp {
 from {
  opacity: 0;
  transform: translate3d(0,30px,0);
  -webkit-transform: translate3d(0,30px,0);
 }
 to {
  opacity: 1;
  transform: translate3d(0,0,0);
  -webkit-transform: translate3d(0,0,0);
 }
}
@-webkit-keyframes fadeUp {
 from {
  opacity: 0;
  transform: translate3d(0,30px,0);
  -webkit-transform: translate3d(0,30px,0);
 }
 to {
  opacity: 1;
  transform: translate3d(0,0,0);
  -webkit-transform: translate3d(0,0,0);
 }
}