body {
  font-family: "Noto Sans JP", sans-serif;
  font-family: "Oswald", sans-serif;
  color: black;
}
body.is-fixed{overflow: hidden;}
.button{display: flex;align-items: center;padding: 6px 10px 6px 30px;
width: 160px;margin: 0 auto;
}

.button__icon{display: flex;
  align-items: center;
  width: 24px;}

.button__icon-path{fill: white;}

.button--bg{background-color: white;}

.button--bg.button__text{color:#4a4a4a;}


.button--border{border: 1px solid white;}

.button--border.button__text{color: white;}

.button__icon-path-contact{fill:#4a4a4a;}

.button__text{margin-left: 10px;
  font-size:16px;
  letter-spacing:0.08em;
color:rgb(211, 211, 211);
}

.button.is-checked{background:url(../img/bg_menu-close.png)center center no-repeat;
background-size:100% auto;}

.header {
  background-color: #4a4a4a;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 999;}

.header__nav-item+.header__nav-item{
margin-top: 24px;
}

.header-container{position: relative;}

.header-logo{display: inline-block;
  padding: 14px 24px;
font-size: 20px;
color: white;
}

.header_menu_button{border: none;
position: absolute;
top: 24px;
right: 24px;
width: 30px;
height: 36px;
overflow: hidden;
color: transparent;
background:url(../img/bg_menu.png) center center no-repeat;
background-size: 100% auto;
}

.header__contents {
  display: none;
  height: calc(100vh - 88px);
  border-top: 1px solid #fff;
  padding-top: 60px;
}

/* fv */
.fv{ position: relative;}

.fv__contents{
  position: absolute;
bottom:26px;
left: 0;
width:100%;
height: 209px;
background:url(../img/sp/bg_fv.png) 
center center no-repeat;
background-size: 100% auto;
padding: 32px;
}

.fv__heading-main{
display: block;
letter-spacing: 0.1em;
font-size: 40px;
}

.fv__heading-sub{
display: block;
margin-top: 12px;
font-size: 14px;
}

.fv__heading-sub1{display: block;
font-size: 14px;}

/* section */
.section{padding: 48px 0 ;}
.section__inner{padding: 0 32px;}
.section__head{flex-direction: column;
display: flex;margin-bottom: 32px;}
.section__head-main{font-size: 40px;
letter-spacing: 0.1em;}
.section__head-sub{font-size: 11px;}
.section__contents{margin-top: 40px;}
.section__lead-text{font-size: 16px;line-height: 1.6;}

/*service */
.service__item + .service__item {margin-top: 40px;}
.service__item-img{text-align: center;margin-bottom:14px ;}
.service__item-name{font-size: 14px;font-weight: bold;
text-align: center;margin-bottom: 10px;}
.service__item-text{font-size: 14px;line-height: 1.6;}

/* works */
.works {background-color: #fafafa;}
.works__item-img{margin-bottom: 12px;}
.works__item-name{font-size: 16px;font-weight: bold;margin-bottom: 6px;}
.works__item-link{text-decoration: underline;font-size: 14px;}
.works__item + .works__item{margin-top: 40px;}
.works__item-img img {
  -webkit-box-shadow: 0 4px 15px 0 rgba(0, 0, 0, 0.15);
          box-shadow: 0 4px 15px 0 rgba(0, 0, 0, 0.15);
}

/* about */
.about__text{font-size: 16px;line-height: 1.6;}
.about__text+.about__text{margin-top: 1em;}

/* flow */
.flow__item+.flow__item{margin-top: 46px;}
.flow__list{margin-top: 64px;}
.flow__item{position: relative;border: solid 1px #808080;
padding: 46px 16px 24px;}
.flow__item-num{position:absolute;top:-24px;left:50%;
transform: translateX(-50%);font-size: 24px;background-color: #4a4a4a;
color: #fff;width:48px;height:48px;display: flex;
align-items: center;justify-content: center;}
.flow__item-img{margin-bottom: 24px;text-align: center;}
.flow__item-name{font-size: 16px;font-weight: bold;text-align: center;margin-bottom: 10px;}
.flow__item-text{font-size: 14px;line-height: 1.6;}

/* message */
.message__img{margin-bottom: 32px;}

/* button */
.page-bottom{color: #fff;}
.page-bottom__item--contact{background-color: #6f6f6f;}
.page-bottom__item{padding: 40px;}
.section__head--center{text-align: center;}
.button--border{border: solid 1px #fff;}
.button--border.button__text{color: #fff;}
.page-bottom__item--twitter{background-color: #4a4a4a;}

/* footer */
.footer{text-align: center;padding: 10px;
 font-family: "Noto Sans JP", sans-serif;
  font-family: "Oswald", sans-serif;}

/* pc */
@media screen and (min-width: 768px) {
.warpper{display: flex;}
.header{position: relative;flex-basis: 20.8%;padding: 50px 20px;}
.header_menu_button{display: none;}
.header__contents{display: block;border: none;}
.main{flex-basis: 79.2%;}
.header-logo {font-size: 30px;letter-spacing: 0.12em;line-height: 1;}
.header-container {width: 160px;margin: 0 auto;position: sticky;top: 50px;}
.button{transition: background 0.3s, color 0.3s,opacity 0.3s;}
.button:hover{background-color: #fff;}
.button:hover .button__icon-path{fill:#4a4a4a}
.button:hover .button__text {color: #4a4a4a;}
.button--bg{color:#4a4a4a;}
.button--bg:hover{opacity: 0.7;}

.fv__contents{
background:url(../img/sp/bg_fv.png)center center no-repeat;
background-size: 100% auto;
bottom:100px;left:0;max-width: 627px;height: 174px;padding-top: 24px;padding-left: 96px;}
.section__inner {max-width: 944px;margin: 0 auto;}
.section__head{margin-top: 24px;}
.section__head-main{font-size: 60px;}
  .service__list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8%;
  }
  .service__item + .service__item {
    margin-top: 0;
  }
  .works__list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8%;
  }
  .works__item + .works__item {
    margin-top: 0;
  }
.about__container{display: flex;
  flex-direction: row-reverse;
gap: 40px;}
.flow__list {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
  }
  .flow__item + .flow__item {
    margin-top: 0;
  }
.message__container {
display: flex;
  flex-direction: row-reverse;
gap: 40px;
}
.page-bottom {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
  }
  .page-bottom__item {
    padding: 54px 10px;
  }
  .about
}
/* tb */
@media screen and (min-width: 768px) and (max-width: 1024px)
{ .flow__list {
    grid-template-columns: repeat(2, 1fr);
    gap: 40px 16px;
  }
  .section__head-main {
    font-size: 54px;
  }
  .fv__contents{bottom:50%;transform:translateY(50%) ;}
  .message__img{padding-top: 50px;}
  .about__img{padding-top: 50px;}
}