/*----------------------------------------------------------
 *      Initialize
 *----------------------------------------------------------*/
html {
  width: 100%;
  height: 100%;
  font-family: "Noto Serif JP";
  font-size: 10px; }
  @media only screen and (max-width: 768px) {
    html {
      min-width: 100%;
      font-size: 10px !important; } }

body {
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  background: #fdfdfd;
  color: #555555;
  font-size: 10px;
  font-family: "Noto Serif JP" !important;
  letter-spacing: 0.05em; }
  @media only screen and (max-width: 768px) {
    body {
      min-width: 100%;
      font-size: 10px !important; } }

p {
  margin: 0; }

ul, li {
  margin: 0;
  padding: 0;
  list-style: none; }

h1, h2, h3, h4, h5 {
  margin: 0;
  padding: 0; }

strong {
  font-weight: bold; }

a {
  color: #b28378;
  text-decoration: none;
  transition: all 0.3s; }
  @media only screen and (max-width: 768px) {
    a {
      transition: none; } }
  a:hover {
    color: #333333;
    text-decoration: none; }
  a:focus {
    color: #333333; }

/*----------------------------------------------------------
 *      Common
 *----------------------------------------------------------*/
.contents--wrap {
  width: 1024px;
  min-width: 1024px;
  margin: 0 auto; }
  @media only screen and (max-width: 768px) {
    .contents--wrap {
      width: 100%;
      min-width: 100%; } }

.visible-xs {
  display: none !important; }
  @media only screen and (max-width: 768px) {
    .visible-xs {
      display: block !important; } }

.visible__inline-xs {
  display: none; }
  @media only screen and (max-width: 768px) {
    .visible__inline-xs {
      display: inline; } }

@media only screen and (max-width: 768px) {
  .hidden-xs {
    display: none !important; } }

/*----------------------------------------------------------
 *      Scroll Head
 *----------------------------------------------------------*/
.scroll__head {
  display: block;
  position: fixed;
  top: -100px;
  width: 100%;
  min-width: 1024px;
  height: 100px;
  background: #ffffff;
  z-index: 50; }
  @media only screen and (max-width: 768px) {
    .scroll__head {
      display: block;
      position: fixed;
      top: -100px;
      width: 750px;
      min-width: 750px;
      height: 100px;
      background: #ffffff;
      z-index: 50; } }

.scroll__head--wrap {
  position: relative;
  width: 100%;
  height: 100px; }

/*----------------------------------------------------------
 *      Footer
 *----------------------------------------------------------*/
footer {
  position: relative;
  height: 100vh;
  padding: 0 0 0 0;
  z-index: 3; }
  footer .contents--wrap {
    height: 100%; }

.foot__logo {
  width: 230px;
  height: 73px;
  position: absolute;
  top: calc(50% - 36px);
  left: calc(50% - 115px); }
  .foot__logo img {
    width: 100%;
    height: auto; }
  @media only screen and (max-width: 768px) {
    .foot__logo {
      width: 299px;
      height: 94.9px;
      top: calc(50% - 47px);
      left: calc(50% - 149px); }
      .foot__logo img {
        width: 100%;
        height: auto; } }

.foot__copyright {
  position: absolute;
  bottom: 30px;
  left: calc(50% - 60px);
  font-size: 1.6rem;
  letter-spacing: 0.05em; }
  @media only screen and (max-width: 768px) {
    .foot__copyright {
      bottom: 60px;
      left: calc(50% - 90px);
      font-size: 2.4rem; } }

/*----------------------------------------------------------
 *      MainVisual
 *----------------------------------------------------------*/
.main--area {
  position: relative;
  min-width: 1024px;
  height: 160vh;
  z-index: 3; }
  @media only screen and (max-width: 768px) {
    .main--area {
      min-width: 750px;
      height: calc(var(--vh, 1vh) * 160); } }

.main__logo {
  width: 323.5px;
  height: 374px;
  position: absolute;
  top: calc(50vh - 187px);
  left: calc(50% - 161px); }
  .main__logo img {
    width: 100%;
    height: auto; }
  @media only screen and (min-width: 769px) and (max-width: 1024px) {
    .main__logo {
      width: 258.8px;
      height: 299.2px;
      top: calc(50vh - 149px);
      left: calc(50% - 129px); }
      .main__logo img {
        width: 100%;
        height: auto; } }
  @media only screen and (max-width: 768px) {
    .main__logo {
      width: 291.15px;
      height: 336.6px;
      top: calc((var(--vh, 1vh) * 50) - 168px);
      left: calc(50% - 145px); }
      .main__logo img {
        width: 100%;
        height: auto; } }

/*----------------------------------------------------------
 *      Overlay
 *----------------------------------------------------------*/
.overlay--layer {
  opacity: 0;
  position: fixed;
  width: 100%;
  height: 100%;
  background: #fff362;
  transition: all 0.4s;
  z-index: 1; }

/*----------------------------------------------------------
 *      Title
 *----------------------------------------------------------*/
.contents__title--wrap {
  opacity: 0;
  position: fixed;
  top: calc(50% - 50px);
  left: calc(50% - 464px);
  transition: all 0.2s;
  z-index: 20; }
  @media only screen and (max-width: 768px) {
    .contents__title--wrap {
      left: 35px; } }

.contents__title__about {
  width: 177px;
  height: 76px;
  display: none; }
  .contents__title__about img {
    width: 100%;
    height: auto; }

.contents__title__services {
  width: 118.5px;
  height: 76px;
  display: none; }
  .contents__title__services img {
    width: 100%;
    height: auto; }

.contents__title__works {
  width: 118.5px;
  height: 76px;
  display: none; }
  .contents__title__works img {
    width: 100%;
    height: auto; }

.contents__title__company {
  width: 118.5px;
  height: 76px;
  display: none; }
  .contents__title__company img {
    width: 100%;
    height: auto; }

.contents__title__inquiry {
  width: 147.5px;
  height: 76px;
  display: none; }
  .contents__title__inquiry img {
    width: 100%;
    height: auto; }

/*----------------------------------------------------------
 *      About
 *----------------------------------------------------------*/
.about--area {
  position: relative;
  z-index: 10; }
  .about--area .contents--wrap {
    padding: 0 50px 460px 280px; }
    @media only screen and (max-width: 768px) {
      .about--area .contents--wrap {
        padding: 0 50px 460px 245px; } }

.about__description {
  font-size: 1.8rem;
  font-weight: 500;
  line-height: 2.388; }
  @media only screen and (max-width: 768px) {
    .about__description {
      font-size: 2.4rem; } }

/*----------------------------------------------------------
 *      Services
 *----------------------------------------------------------*/
.services--area {
  position: relative;
  z-index: 10; }
  .services--area .contents--wrap {
    padding: 0 50px 370px 280px; }
    @media only screen and (max-width: 768px) {
      .services--area .contents--wrap {
        padding: 0 50px 370px 245px; } }

.services__title {
  margin: 0 0 9px 0;
  font-size: 1.8rem;
  font-weight: 800; }
  @media only screen and (max-width: 768px) {
    .services__title {
      font-size: 2.4rem; } }

.services__description {
  margin: 0 0 90px 0;
  font-size: 1.8rem;
  font-weight: 500;
  line-height: 1.555; }
  @media only screen and (max-width: 768px) {
    .services__description {
      font-size: 2.4rem; } }

/*----------------------------------------------------------
 *      Works
 *----------------------------------------------------------*/
.works--area {
  position: relative;
  z-index: 10; }
  .works--area .contents--wrap {
    padding: 0 50px 460px 280px; }
    @media only screen and (max-width: 768px) {
      .works--area .contents--wrap {
        padding: 0 50px 460px 245px; } }

.works__list--element {
  width: 100%;
  padding: 40px 0 60px 0;
  border-top: 1px solid #555555; }
  .works__list--element:last-child {
    border-bottom: 1px solid #555555; }

.works__category {
  margin: 0 0 50px 0;
  font-size: 2rem;
  font-weight: 500; }
  @media only screen and (max-width: 768px) {
    .works__category {
      font-size: 2.4rem; } }

.works__image {
  margin: 0 0 16px 0;
  text-align: center; }
  @media only screen and (max-width: 768px) {
    .works__image img {
      width: 100%; } }

/*----------------------------------------------------------
 *      Company
 *----------------------------------------------------------*/
.company--area {
  position: relative;
  z-index: 10; }
  .company--area .contents--wrap {
    padding: 0 50px 182px 280px; }
    @media only screen and (max-width: 768px) {
      .company--area .contents--wrap {
        padding: 0 50px 182px 245px; } }

.company__list--element {
  padding: 40px 0 8px 0;
  border-top: 1px solid #555555;
  font-size: 1.8rem;
  font-weight: 500;
  line-height: 1.555; }
  @media only screen and (max-width: 768px) {
    .company__list--element {
      font-size: 2.2rem; } }
  .company__list--element dt {
    display: block;
    float: left;
    width: 130px;
    margin: 0 0 33px 0; }
  .company__list--element dd {
    display: block;
    margin: 0 0 33px 130px; }

.company__list--element__row {
  border-bottom: 1px solid #555555; }

/*----------------------------------------------------------
 *      Inquiry
 *----------------------------------------------------------*/
.inquiry--area {
  position: relative;
  z-index: 10; }
  .inquiry--area .contents--wrap {
    padding: 0 50px 20vh 280px; }
    @media only screen and (min-width: 769px) and (max-width: 1024px) {
      .inquiry--area .contents--wrap {
        padding: 0 50px 50vh 280px; } }
    @media only screen and (max-width: 768px) {
      .inquiry--area .contents--wrap {
        padding: 0 50px 20vh 245px; } }

.inquery__mail {
  font-size: 1.8rem;
  font-weight: 500; }
  @media only screen and (max-width: 768px) {
    .inquery__mail {
      font-size: 2.4rem; } }

/*----------------------------------------------------------
 *      Dammy
 *----------------------------------------------------------*/
.dammy--area {
  position: relative;
  z-index: 10; }
  .dammy--area .contents--wrap {
    padding: 0 0 1000px 260px; }

.dammy__contents {
  width: 804px;
  height: 5687.5px; }
  .dammy__contents img {
    width: 100%;
    height: auto; }