/***** -- var -- *****/
:root {
  /* common */
  --font-family-1st: 'Zen Maru Gothic';
  --text-color: #000;
  --line-height: 1.8;

  --footer-bg-color: #333;
}
@media screen and (max-width: 1120px) {
  :root {
  }
}
@media screen and (max-width: 960px) {
  :root {
  }
}
@media screen and (max-width: 800px) {
  :root {
  }
}
@media screen and (max-width: 640px) {
  :root {
  }
}
@media screen and (max-width: 480px) {
  :root {
  }
}


/***** -- Foundation -- *****/
body {
  background-color: transparent;
  background-image: url(78b4d76bb5-bg.png);
  background-size: 1040px;
  background-position: top center;
  background-repeat: repeat;
}
.l-wrap:last-of-type {
  padding-bottom: calc(var(--wrap-padding) * 1);
}


/***** -- Component -- *****/
[class*="c-btn"] {
  padding: .75em 1.5em;
}
[class*="c-btn"].is-arrow {
  padding-right: 2.5em;
}
[class*="c-btn"].is-arrow::after {
  display: block;
  position: absolute;
  right: 1em;
  top: 50%;
  font-family: 'Material Symbols Outlined';
  font-size: inherit;
  font-weight: bold;
  line-height: 1;
  transform: translate(0,-50%);
  transition: all .2s ease;
  content: '\e5e1';
}


/***** -- Project -- *****/
/* ----- header ----- */
/* header - common */
.l-header {
  position: absolute;
  top: 16px;
  background-color: rgb(255 255 255 / 80%);
  border-bottom: none;
}
.l-header .c-inner {
  width: 100%;
  max-width: 1120px;
  height: auto;
}
.l-header .p-header-logo {
  left: 0;
  top: 8px;
  transform: translate(0, 0);
}
.l-header .p-header-menu {
  display: none;
}
/* header - local */
.l-header .p-header-logo img {
  width: 80px;
}
.l-header .p-header-link {
  padding: calc(var(--base)* 2) calc(var(--base)* 4);
}
.l-header .p-header-link a {
  color: var(--color-surface-on);
  text-align: center;
  font-size: 16px;
  font-weight: 500;
  line-height: 1;
}
.l-header .p-header-link > .c-flex {
  gap: calc(var(--base) * 6);
}
.l-header .p-header-button {
  display: none;
}
/* ----- drawer ----- */
/* drawer - common */
.l-drawer {
  display: none;
}
/* ----- footer ----- */
/* footer - common */
.l-footer {
  padding: calc(var(--base) * 3) 0 calc(var(--base) * 1);
}
/* footer - local */
.p-footer-logo img {
  width: 160px;
}
.p-footer-address p {
  font-size: var(--font-size-xs);
  font-style: normal;
  color: #fff;
  line-height: 1.6;
}
.p-footer-copy {
  margin-top: calc(32* var(--base-vw-coef));
}
.p-footer-copy p {
  font-size: var(--font-size-xxs);
  color: #fff;
  text-align: center;
}
/* ----- fixed ----- */
/* menuButton */
.p-fixed-menuButton {
  display: none;
  z-index: 100;
}
.p-fixed-menuButton > *:nth-child(1) {
  display: block;
}
.p-fixed-menuButton > *:nth-child(2) {
  display: none;
}
html.is-drawer .p-fixed-menuButton > *:nth-child(1) {
  display: none;
}
html.is-drawer .p-fixed-menuButton > *:nth-child(2) {
  display: block;
}
/* contactBanner */
.p-fixed-contactBanner-pc {
  position: fixed;
  right: -190px;
  bottom: -24px;
  z-index: 99;
}
.p-fixed-contactBanner-pc img {
  width: 160px;
}
.p-fixed-contactBanner-pc > a {
  position: absolute;
}
.p-fixed-contactBanner-pc > a:nth-of-type(1) {
  position: absolute;
  left: 49px;
  top: 288px;
}
.p-fixed-contactBanner-pc > a:nth-of-type(2) {
  left: 135px;
  top: 139px;
}
.p-fixed-contactBanner-pc-bg img {
  width: 498px;
  max-width: none;
}
.p-fixed-contactBanner-sp {
  display: none;
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  padding: calc(var(--base) * 2) calc(var(--base) * 1.5);
  background-color: rgb(0 0 0 / 50%);
  z-index: 99;
}
.p-fixed-contactBanner-sp > .c-flex {
  gap: calc(var(--base) * 1.5);
}
.p-fixed-contactBanner-sp > .c-flex > * {
  flex: 1;
}
.p-fixed-contactBanner-sp img {
  width: 100%;
}
@media screen and (max-width: 1279px) {
  /* ----- header ----- */
  /* header - local */
  .l-header .p-header-logo {
    left: 32px;
  }
}
@media screen and (max-width: 1120px) {
  /* ----- header ----- */
  /* header - local */
  .l-header .p-header-logo {
    left: calc(80* var(--base-vw-coef));
  }
  .l-header .p-header-logo img {
    width: calc(80 / 1280 * 100vw);
  }
  .l-header .p-header-link a {
    font-size: calc(16 * var(--base-vw-coef));
  }
  /* ----- footer ----- */
  /* footer - local */
  .p-footer-logo img {
    width: calc(240 / 1280 * 100vw);
  }
  /* ----- fixed ----- */
  /* contactBanner */
  .p-fixed-contactBanner-pc {
    right: calc(-190 * var(--base-vw-coef));
    bottom: calc(-24 * var(--base-vw-coef));
  }
  .p-fixed-contactBanner-pc img {
    width: calc(160 * var(--base-vw-coef));
  }
  .p-fixed-contactBanner-pc-bg img {
    width: calc(498 * var(--base-vw-coef));
  }
  .p-fixed-contactBanner-pc > a:nth-of-type(1) {
    left: calc(49 * var(--base-vw-coef));
    top: calc(288 * var(--base-vw-coef));
  }
  .p-fixed-contactBanner-pc > a:nth-of-type(2) {
    left: calc(135 * var(--base-vw-coef));
    top: calc(139 * var(--base-vw-coef));
  }
}
@media screen and (max-width: 960px) {
  /* ----- header ----- */
  /* header - common */
  .l-header {
    top: 0;
  }
  /* header - local */
  .l-header .p-header-logo {
    left: calc(16* var(--base-vw-coef));
    top: 0;
    padding: calc(8* var(--base-vw-coef)) calc(12* var(--base-vw-coef)) calc(12* var(--base-vw-coef));
    background-color: #fff;
  }
  .l-header .p-header-logo img {
    width: calc(64* var(--base-vw-coef));
  }
  .l-header .p-header-link {
    display: none;
  }
  /* ----- drawer ----- */
  /* drawer - common */
  .l-drawer {
    display: block;
  }
  /* drawer - local */
  .p-drawer-link {
    width: 50%;
    margin-inline: auto;
    padding-top: calc(96* var(--base-vw-coef));
  }
  .p-drawer-link a {
    font-size: calc(18 * var(--base-vw-coef));
    font-weight: 500;
  }
  .p-drawer-link > .c-flex > * {
    width: 100%;
    padding: 1.5em 0;
    text-align: center;
    border-bottom: 1px solid var(--color-surface-container);
  }
  .p-drawer-button [class*="c-btn"] {
    font-size: calc(18* var(--base-vw-coef));
  }
  /* ----- footer ----- */
  /* footer - common */
  .l-footer {
    padding-bottom: calc(var(--base) * 20);
  }
  /* footer - local */
  .p-footer-logo img {
    width: 25vw;
  }
  /* ----- fixed ----- */
  /* menuButton */
  .p-fixed-menuButton {
    display: block;
    position: fixed;
    right: calc(16* var(--base-vw-coef));
    top: calc(16* var(--base-vw-coef));
  }
  .p-fixed-menuButton img {
    width: calc(64* var(--base-vw-coef));
  }
  /* contactBanner */
  .p-fixed-contactBanner-pc {
    display: none;
  }
  .p-fixed-contactBanner-sp {
    display: block;
  }
}
@media screen and (max-width: 800px) {
}
@media screen and (max-width: 640px) {
  /* ----- header ----- */
  .l-header .p-header-logo {
    left: calc(8* var(--base-vw-coef));
    padding: calc(6* var(--base-vw-coef)) calc(12* var(--base-vw-coef)) calc(8* var(--base-vw-coef));
  }
  .l-header .p-header-logo img {
    width: calc(48* var(--base-vw-coef));
  }
  /* ----- drawer ----- */
  /* drawer - local */
  .p-drawer-link {
    width: 75%;
    padding-top: calc(80* var(--base-vw-coef));
  }
  .p-drawer-link a {
    font-size: calc(16 * var(--base-vw-coef));
  }
  .p-drawer-button [class*="c-btn"] {
    font-size: calc(16* var(--base-vw-coef));
  }
  /* ----- footer ----- */
  /* footer - common */
  .l-footer {
    padding-bottom: calc(var(--base) * 15);
  }
  /* footer - local */
  .p-footer-logo img {
    width: 40vw;
  }
  .p-footer-copy {
    margin-top: calc(32* var(--base-vw-coef));
  }
  /* ----- fixed ----- */
  /* menuButton */
  .p-fixed-menuButton {
    right: calc(8* var(--base-vw-coef));
    top: calc(8* var(--base-vw-coef));
  }
  .p-fixed-menuButton img {
    width: calc(48* var(--base-vw-coef));
  }
  /* contactBanner */

}
@media screen and (max-width: 480px) {
}


/***** -- Component -- *****/
/* btn */
[class*="c-btn"] {
  font-weight: 500;
}
.c-btn--1st {
  color: #fff;
  background-color: #ff0000;
  border: 1px solid #ff0000;
}
.c-btn--2nd {
  color: #333;
  background-color: #ededed;
  border: 1px solid #ededed;
}
@media screen and (max-width: 1120px) {
}
@media screen and (max-width: 960px) {
}
@media screen and (max-width: 800px) {
}
@media screen and (max-width: 640px) {
}
@media screen and (max-width: 480px) {
}
