@charset "UTF-8";

@import url('site-config.css');

/* ======================================================================

  "Energyflex" Common PC Styles

====================================================================== */
body {
  font-family: "Noto Sans JP", sans-serif;
  background-color: var(--green);
  /* min-width: 1280px; */
}
.l-container {
  position: relative;
  width: 100%;
  overflow: hidden;
}
.inner {
  max-width: 1200px;
  width: calc(660 / 780 * 100%);
  margin: auto;
}
.sp { display: none; }

/*
  Header
====================================================================== */
.l-header {
  position: fixed;
  z-index: 5;
  top: 0;
  right: 0;
  width: 100%;
  height: 90px;
  background-color: var(--green);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px 0 40px;
}
.l-header h1 { width: 240px; }

.btn-unit {
  display: flex;
  align-items: center;
}

/* お問い合わせ
---------------------------------------------------------------------- */
.inq-btn {
  width: 208px;
  height: 64px;
}
.inq-btn a {
  position: relative;
  font-weight: 600;
  font-size: 18px;
  font-size: 1.8rem;
  letter-spacing: .075em;
  text-decoration: none;
  padding: 0 0 0 50px;
  color: var(--black);
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  background-color: var(--yellow);
  border: solid 2px var(--black);
  border-radius: calc( (64 / 2) / 208 * 100vw );
  box-shadow: 3px 3px 0 0 var(--black);
}
.inq-btn a::before {
  content: "";
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 20px;
  width: 12.5px;
  height: 15px;
  display: inline-block;
  background: url(../images/triangle_w.svg) no-repeat 50% 50%;
  background-size: 100%;
}
.inq-btn a:hover { background-color: var(--white); }
.inq-btn a:hover::before { background-image: url(../images/triangle_yellow.svg); }

/* Toggle Menu - Trigger
---------------------------------------------------------------------- */
.menu-trigger {
  width: 64px;
  height: 64px;
  border: solid 2px var(--black);
  border-radius: calc( (64 / 2) / 64 * 100vw );
  box-shadow: 3px 3px 0 0 var(--black);
  margin: 0 0 0 20px;
  display: inline-block;
  background: url(../images/burger_open.png) no-repeat 50% 50% var(--white);
  background-size: cover;
  cursor: pointer;
  transition: all .3s;
}
.menu-trigger:hover { background-color: var(--d-green); }
.menu-trigger.is-toggled {
  background: url(../images/burger_close.png) var(--d-green);
  background-size: cover;
}

/* Toggle Menu - Contents
---------------------------------------------------------------------- */
.toggle-menu {
  position: fixed;
  z-index: 4;
  top: 0;
  right: 0;
  transform: translateX(100%);
  width: 500px;
  height: 100vh;
  background-color: var(--white);
  padding: 90px 0 0 40px;
  transition: all .3s;
}
.toggle-menu.is-show { transform: translateX(0); }
.toggle-menu ul { margin: 95px 0 85px; }
.toggle-menu ul li {
  font-weight: 600;
  font-size: 18px;
  font-size: 1.8rem;
  letter-spacing: .05em;
}
.toggle-menu ul li:not(:last-of-type) { margin: 0 0 40px; }
.toggle-menu ul li a {
  position: relative;
  color: var(--black);
  text-decoration: none;
  padding: 0 0 0 25px;
}
.toggle-menu ul li a::before {
  content: "";
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 0;
  width: 15px;
  height: 18px;
  display: inline-block;
  background: url(../images/triangle_yellow.svg) no-repeat 50% 50%;
  background-size: 100%;
}
.toggle-menu dl dt {
  font-size: 16px;
  font-size: 1.6rem;
  letter-spacing: .075em;
  margin: 0 0 .75em;
}
.toggle-menu dl dd {
  width: 380px;
  height: 100px;
  margin: 0 0 20px;
}
.toggle-menu dl dd:first-of-type figure { width: 225px; }
.toggle-menu dl dd:first-of-type figure figcaption {
  font-size: 15px;
  font-size: 1.5rem;
  letter-spacing: .05em;
  margin: .5em 0 0;
}
.toggle-menu dl dd a {
  width: 100%;
  height: 100%;
  color: var(--black);
  text-decoration: none;
  border: solid 2px var(--black);
  border-radius: 10px;
  box-shadow: 3px 3px 0 0 var(--black);
  background-color: var(--white);
  transition: all .3s;
}
.toggle-menu dl dd:first-of-type a {
  display: grid;
  place-content: center;
  pointer-events: none;
  padding: 5px 0 0;
}
.toggle-menu dl dd:last-of-type a {
  position: relative;
  font-weight: 600;
  font-size: 20px;
  font-size: 2.0rem;
  letter-spacing: .05em;
  display: grid;
  place-content: center;
  padding: 0 0 0 30px;
}
.toggle-menu dl dd:last-of-type a::before {
  content: "";
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 30px;
  width: 17.7px;
  height: 21px;
  display: inline-block;
  background: url(../images/triangle_yellow.svg) no-repeat 50% 50%;
  background-size: 100%;
}
.toggle-menu dl dd:last-of-type a:hover { background-color: var(--yellow); }
.toggle-menu dl dd:last-of-type a:hover::before { background-image: url(../images/triangle_w.svg); }

.overlay {
  display: none;
  position: fixed;
  z-index: 3;
  inset: 0;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 100vh;
  background: rgba(0,0,0,.2);
}

/*
  Contents
====================================================================== */
.l-contents { padding: 90px 0 0; }
.l-contents section { position: relative; }

/* Breadcrumb
---------------------------------------------------------------------- */
.breadcrumb {
  font-size: 15px;
  font-size: 1.5rem;
  letter-spacing: .05em;
}
.breadcrumb a {
  text-decoration: none;
  color: var(--black);
  display: inline-block;
}
.breadcrumb span::before {
  content: "＞";
  transform: scaleX(.65);
  display: inline-block;
  margin: 0 .5em;
}

/* Link Button
---------------------------------------------------------------------- */
.link-btn {
  width: 400px;
  height: 80px;
  margin: auto;
  display: block;
}
.link-btn a {
  position: relative;
  font-weight: 600;
  font-size: 24px;
  font-size: 2.4rem;
  letter-spacing: .05em;
  text-decoration: none;
  padding: 0;
  color: var(--black);
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--yellow);
  background-color: var(--d-green);
  border: solid 2px var(--black);
  border-radius: calc( (80 / 2) / 400 * 100vw );
  box-shadow: 3px 3px 0 0 var(--black);
}
.link-btn a::before {
  content: "";
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 30px;
  width: 18px;
  height: 22px;
  display: inline-block;
  background: url(../images/triangle_yellow.svg) no-repeat 50% 50%;
  background-size: 100%;
}
.link-btn a:hover { background-color: var(--l-green); }

/* Recruitment
---------------------------------------------------------------------- */
.recruitment {
  position: relative;
  width: 100%;
  aspect-ratio: 1920 / 780;
  background-image: url(../images/recruitment_bg.webp);
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-size: cover;
  display: grid;
  padding: 140px 0 150px;
}
.recruitment.half {
  position: relative;
  width: 50%;
  aspect-ratio: 960 / 800;
  background-image: url(../images/recruitment_50_bg.png);
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-size: cover;
  display: grid;
}
.recruitment.wht::after {
  content: "";
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(var(--blk-rgb), .58);
  mix-blend-mode: multiply;
}
.recruitment.wht { color: var(--white); }
.recruitment.blk { color: var(--black); }
.recruitment .inner {
  position: relative;
  z-index: 2;
  height: 100%;
  grid-area: 1 / 1;
  display: grid;
  place-content: center;
  text-align: center;
}
.recruitment h2 {
  font-size: 36px;
  font-size: 3.6rem;
  letter-spacing: .075em;
  line-height: calc(54 / 36);
  margin: 0 0 1em;
}
.recruitment p {
  font-size: 19px;
  font-size: 1.9rem;
  letter-spacing: .05em;
  line-height: calc(38 / 19);
  margin: 0 0 70px;
}

/* Movie
---------------------------------------------------------------------- */
.movie-wrap {
  position: relative;
  width: 100%;
  max-width: 900px;
  margin: auto;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 40px;
}
.movie-wrap iframe {
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: solid 1px #737373;
  background-color: #737373;
  border-radius: 40px;
}

/*
  Footer
====================================================================== */
.l-footer {
  position: relative; 
  z-index: 2;
}

/* Foot Content
---------------------------------------------------------------------- */
.foot-content {
  position: relative;
  width: 100%;
  height: 425px;
  display: flex;
  align-items: flex-start;
  margin: -15px 0 0;
}

.foot-content > div {
  position: relative;
  width: 1200px;
  margin: auto;
  display: grid;
}
.foot-content > div::before {
  content: "";
  position: absolute;
  top: 0;
  left: calc( (100vw - 1200px) / 2 * -1 );
  width: calc( (100vw - 1200px) / 2 );
  height: 100%;
  aspect-ratio: 1920 / 425;
  display: inline-block;
  background: url(../images/foot_contact_bg.png) repeat-x 0 0;
  background-size: contain;
}
.foot-content > div::after {
  content: "";
  position: absolute;
  top: 0;
  right: calc( (100vw - 1200px) / 2 * -1 );
  width: calc( (100vw - 1200px) / 2 );
  height: 100%;
  aspect-ratio: 1920 / 425;
  display: inline-block;
  background: url(../images/foot_contact_bg.png) repeat-x 0 0;
  background-size: contain;
}

.foot-content > div .inner {
  position: relative;
  z-index: 1;
  max-width: 1200px;
  padding: 0 100px;
  grid-area: 1 / 1;
}
.foot-content > div .inner h2 {
  font-size: 30px;
  font-size: 3.0rem;
  letter-spacing: .075em;
  line-height: calc(48 / 30);
  text-align: center;
}
.foot-content > div .inner h2 span { color: #009a3e; }
.foot-content > div .inner ul {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0 55px;
  margin: 25px 0 0;
}
.foot-content > div .inner ul li {
  width: 380px;
  height: 100px;
}
.foot-content > div .inner ul li a {
  width: 100%;
  height: 100%;
  color: var(--black);
  text-decoration: none;
  border: solid 2px var(--black);
  border-radius: 10px;
  box-shadow: 3px 3px 0 0 var(--black);
  background-color: var(--white);
  display: grid;
  place-content: center;
  padding: 5px 0 0;
  transition: all .3s;
}
.foot-content > div .inner ul li:first-of-type a { pointer-events: none; }
.foot-content > div .inner ul li:first-of-type a img { width: 225px; }
.foot-content > div .inner ul li:first-of-type a span {
  font-size: 15px;
  font-size: 1.5rem;
  letter-spacing: .05em;
  line-height: calc(24 / 15);
  display: block;
  margin: .5em 0 0;
}
.foot-content > div .inner ul li:last-of-type a {
  position: relative;
  font-weight: 600;
  font-size: 20px;
  font-size: 2.0rem;
  letter-spacing: .05em;
  display: grid;
  place-content: center;
  padding: 0 0 0 30px;
}
.foot-content > div .inner ul li:last-of-type a::before {
  content: "";
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 30px;
  width: 17.7px;
  height: 21px;
  display: inline-block;
  background: url(../images/triangle_yellow.svg) no-repeat 50% 50%;
  background-size: 100%;
}
.foot-content > div .inner ul li:last-of-type a:hover { background-color: var(--yellow); }
.foot-content > div .inner ul li:last-of-type a:hover::before { background-image: url(../images/triangle_w.svg); }

.foot-content > div figure { grid-area: 1 / 1; }
.foot-content > div figure img {
  width: 100%;
  height: auto;
  object-fit: cover;
}

.foot-content02 {
  background-color: #f5f5f5;
  padding: 70px 0 55px;
  margin: -70px 0 0;
}

.f-contents {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  margin: 0 0 80px;
}
.f-content01 ul li {
  font-weight: 600;
  font-size: 18px;
  font-size: 1.8rem;
  letter-spacing: .05em;
}
.f-content01 ul li:not(:first-of-type) { margin: 30px 0 0; }
.f-content01 ul li a {
  position: relative;
  color: var(--black);
  text-decoration: none;
  padding: 0 0 0 20px;
}
.f-content01 ul li a::before {
  content: "";
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 0;
  width: 12.5px;
  height: 15px;
  display: inline-block;
  background: url(../images/triangle_yellow.svg) no-repeat 50% 50%;
  background-size: 100%;
}
.f-content02 h3 {
  font-weight: 600;
  font-size: 20px;
  font-size: 2.0rem;
  letter-spacing: .05em;
  margin: 0 0 15px;
}
.f-content02 dl {
  font-size: 16px;
  font-size: 1.6rem;
  letter-spacing: .05em;
  line-height: calc(24 / 16);
}
.f-content02 dl:first-of-type { margin: 0 0 45px; }
.fax-num {
  line-height: 1.0;
  margin: .75em 0 1em;
}
.tel-num { width: 260px; }
.copy {
  font-size: 14px;
  font-size: 1.4rem;
  letter-spacing: .05em;
  text-align: center;
}

@media screen and (max-width:1260px) {
  .foot-content { height: auto; }
  .foot-content > div {
    max-width: 100%;
    width: 100%;
    margin: 0;
  }
}

@media screen and (max-width:1200px) {
  .foot-content > div::before,
  .foot-content > div::after { content: none; }
  .foot-content > div .inner { padding: 0; }
  .foot-content > div .inner ul { margin: 15px 0 0; }
}