@charset "utf8";

/* 共通ヘッダー用 */

* {
  margin: 0;
  padding: 0;
}

img {
  width: 100%;
  height: auto;
  vertical-align: top;
}

a {
  text-decoration: none;
  color: #333333;
}

section {
  width: 100%;
}

picture {
  display: block;
}

.block-picture {
  display: block;
}

body {
  font-family: "Noto Serif JP", serif;
  font-weight: 400;
  font-style: normal;
  color: #333333;
}

main {
  overflow-x: hidden;
  overflow-y: hidden;
}

@media screen and (max-width: 767px) {
  ._pc {
    display: none;
  }
  body {
    background-image: url('../images/front-page/sp/bg.jpg?2412271815');
    background-repeat: repeat-y;
    background-size: 100%;
  }
}

@media screen and (min-width: 768px) {
  ._sp {
    display: none;
  }
  body {
    background-image: url('../images/front-page/pc/bg.jpg?2412271815');
    background-repeat: repeat-y;
    background-size: 100%;
  }
}

.spacer-40 {
  margin-bottom: calc(120vw / 19.2);
}
@media screen and (max-width: 767px) {
  .spacer-40 {
    margin-bottom: calc(40vw / 3.6);
  }  
}

.spacer-20 {
  margin-bottom: calc(80vw / 19.2);
}
@media screen and (max-width: 767px) {
  .spacer-20 {
    margin-bottom: calc(20vw / 3.6);
  }  
}

._clear {
  display: none;
}

/*---------------------------
header
---------------------------*/
.header__wrapper {
  /*position: fixed;*/
  position: static; /* 初期値 */
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  background-color: #ffffff;
  z-index: 9998;
}

.header__logo {
  width: 8%;
  margin: 10px 0 10px 20px;
}
@media screen and (max-width: 767px) {
  .header__logo {
    width: 30%;
  }
}

.header__btn {
  width: 14%;
  margin: 10px 20px 10px auto;
}
@media screen and (max-width: 767px) {
  .header__btn {
    display: none;
  }  
}