body {
  font-family: "Roboto", sans-serif;
  font-weight: 300;
  font-size: 16px;
  line-height: 1.5;
  color: #333333;
  background: #99ffcc;
}

.ja {
  font-family: "Noto Sans JP", sans-serif;
}

img {
  width: 100%;
  height: auto;
}

.content {
  max-width: 1140px;
  padding: 0 20px;
  margin: auto;
}

.header_top {
  position: fixed;
  right: 0;
  top: 0;
  z-index: 100;
}

.header_top a:hover {
  color: #ffb6c1;
}

a {
  transition: 0.5s;
}

.header_top ul {
  background: #008db7;
  color: #ffffff;
  height: 80px;
  align-items: center;
  display: flex;
  font-size: 20px;
}

.header_top ul li:not(:last-child) {
  border-right: 1px solid #ffffff;
}

.header_top ul li a {
  padding: 0 40px;
}

.kv {
  background: url(../img/good-view-short.JPG) center / cover;
  height: 1000px;
  position: relative;
}

.kv h1 {
  /* font-family: "Train One", system-ui;
  font-weight: 400;
  font-style: normal; */
  font-size: 80px;
  text-align: center;
  border: 3px solid #000;
  width: 55%;
  max-width: 1188px;
  margin: 0 50px;
  position: absolute;
  left: 0;
  right: 0;
  top: 124px;
  z-index: 10;
}

.kv h1:before,
.kv h1:after {
  position: absolute;
  content: '';
}

.kv h1:before {
  top: 4px;
  left: 4px;
  width: calc(100% - 8px);
  height: calc(100% - 8px);
  background: #f8f8f8;
}

.kv h1 span {
  position: relative;
  display: block;
  padding: 1rem;
  letter-spacing: .05em;
  color: #fff;
  text-shadow: #000 2px 0, #000 -2px 0, #000 0 -2px, #000 0 2px, #000 2px 2px, #000 -2px 2px, #000 2px -2px, #000 -2px -2px, #000 1px 2px, #000 -1px 2px, #000 1px -2px, #000 -1px -2px, #000 2px 1px, #000 -2px 1px, #000 2px -1px, #000 -2px -1px, 4px 4px 0 #000, 0 4px 0 #000;
}

.kv h1 span:before,
.kv h1 span:after {
  position: absolute;
  left: 10px;
  width: calc(100% - 20px);
  height: 2px;
  content: '';
  background: #000;
}

.kv h1 span:before {
  top: 15px;
}

.kv h1 span:after {
  bottom: 15px;
}

.def_sec {
  padding: 50px 0;
}

.innar_1188 {
  width: 100%;
  max-width: 1188px;
  padding: 0 4%;
  margin: auto;
}

.def_sec h2 {
  font-size: 30px;
  text-align: center;
  position: relative;
  margin-bottom: 60px;
}
.def_sec h2::after {
  content: "";
  display: block;
  width: 120px;
  height: 2px;
  background: #ffb6c1;
  margin: auto;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
}

.list_works {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 60px 0;
}
.list_works li {
  width: 25%;
  padding: 0 1%;
}
.list_works li h3 {
  text-align: center;
  padding-top: 20px;
}

.ABOUT.def_sec {
  background: url(../img/about.jpg) center / cover;
  background-attachment: fixed; /* 今回は簡易的なパララックス、スマホでは変になるのでoffにする */
}

.innar_1188 p{
  font-size: 18px;
  text-align: center;
  padding-bottom: 20px;
}

.innar_1188 h3{
  font-size: 24px;
  text-align: center;
  padding-bottom: 30px;
}
.innar_1188 h4{
  text-align: center;
  padding-bottom: 50px;
}
.long_text{
  font-size: 18px;
  margin: 0 auto;
  max-width: 700px;
}
.c-btn.slide a{
  font-size: 20px;
  text-align: center;
  border: 1px solid #333333;
  display: block;/*inline要素を属性を変える*/
  line-height: 60px;
  width: 300px;
  margin: auto;
  position: relative;
  z-index: 1;
}
.c-btn.slide a::before {
  content: '';
  width: 10px;
  height: 10px;
  display: block;
  position: absolute;
  right: 30px;
  top: 0;
  bottom: 0;
  margin: auto;
  border-top: 1px solid #333333;
  border-right: 1px solid #333333;
  transform: rotate(45deg);
}
.c-btn.slide a::after {
  background: #008db7;
  position: absolute;
  top: 0;
  left: 0;
  content: '';
  width: 100%;
  height: 100%;
  transform: scale(0, 1);
  transition: .4s cubic-bezier(0.37, 0, 0.63, 1);
  z-index: -1;
}
.c-btn.slide a:hover {
  color: #fff;
  letter-spacing: 0.15em;
}
.c-btn.slide a:hover::after {
  transform: scale(1, 1);
}

.tel_mail{
  font-size: 22px;
  text-align: center;
  margin: auto;
}
.tel{
  padding-bottom: 40px;
}
.Contact.def_sec {
  background: url(../img/contact.jpg) center / cover;
  background-attachment: fixed; /* 今回は簡易的なパララックス、スマホでは変になるのでoffにする */
  margin-bottom: 80px;
}

footer{
  border-top: solid 1px #707070;
  font-size: 24px;
  text-align: center;
  margin: auto;
  padding: 40px 0;
}
.list_content {
  padding-top: 40px;
  display: flex;
  gap: 40px;
  /* width: calc((100% - 80px) / 3); */
  justify-content: center;
}
.list_content li:not(:last-child) {
  border-right: 1px solid #333333;
  padding-right: 40px;
}
footer p{
  font-size: 18px;
  padding-top: 40px;
}
footer .list_content a:hover {
  color: #008db7;
}
footer .list_content a:hover::after {
  transform: scale(1, 1);
}

.sp{display: none;}
.pc{display: block;}
@media screen and (max-width: 750px) {
  .sp{display: block;}
  .pc{display: none;}
  .ham-btn{width: 50px; height: 50px; background-color: #000000CB; position: fixed; top: 0; right: 0; z-index: 10000; pointer-events: all;}
  .ham-btn div{width: calc(100% - 20px); height: 100%; margin: 0 auto; position: relative;}
  .ham-btn div span{position: absolute; width: 100%; height: 1px; right: 0; background-color: #FFFFFF; transition: 0.5s;}
  .ham-btn div span:first-of-type{top: 18px;}
  .ham-btn div span:last-of-type{top: 30px; width: 50%;}
  .open .ham-btn div span:first-of-type, .open .ham-btn div span:last-of-type{top: 50%;}
  .header_top{top: 0; width: 210px; height: 100%; pointer-events: none;}
  .open .header_top{pointer-events: all;}
  .header_top ul{width: 100%; height: calc(100% - 50px); position: absolute; flex-direction: column; top: 50px; padding-top: 60px; gap: 40px; right: -100%; transition: 0.5s;}
  .open .header_top ul{right: 0;}
  .list_content{flex-direction: column; margin: auto;}
  .header_top ul li:not(:last-child) {border: none;}
  .open.header_top ul{right: 0;}
  .ham-btn.sp.active div span:first-of-type{transform: translateY(-50%) rotate(45deg);}
  .ham-btn.sp.active div span:last-of-type{transform: translateY(-50%) rotate(-45deg); width: 100%;}
  .header_top.menu.active {display: block;}
  .kv{overflow: hidden;}
  .kv h1{top: 66px; padding: 0 4%; font-size: 40px;}
  .def_sec h2{margin-bottom: 40px;}
  .list_PRODUCT{gap: 40px 0;}
  .list_PRODUCT li{width: 100%;}
  .list_PRODUCT li h3 {font-size: 16px; padding: 20px 0 0;}
  .ABOUT.def_sec {background: url(../img/sp/about.jpg) center / cover;}
  .long_text {width: 100%; font-size: 16px;}
  .add {font-size: 16px;}
  .Contact.def_sec {background: url(../img/sp/contact.jpg); margin-bottom: 40px;}
  .tel {padding-bottom: 20px;}
  .Contact.def_sec p {font-size: 20px;}
  footer .list_content{gap: 20px 0;}
  .list_content li:not(:last-child) {padding: 0; border: none;}
}