@charset "UTF-8";

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

  "Energyflex" Common SP Styles

====================================================================== */
body { min-width: initial; }
.pc { display: none; }
.sp { display: inherit; }

/*
  Header
====================================================================== */
.l-header {
  height: calc(120 / 780 * 100vw);
  padding: 0 calc(40 / 780 * 100%);
}
.l-header h1 { width: calc(324 / 780 * 100vw); }

/* お問い合わせ
---------------------------------------------------------------------- */
.inq-btn { display: none; }

/* Toggle Menu - Trigger
---------------------------------------------------------------------- */
.menu-trigger {
  width: calc(77 / 780 * 100vw);
  height: calc(77 / 780 * 100vw);
  background-image: url(../images/burger_open_sp.png);
}
.menu-trigger.is-toggled { background-image: url(../images/burger_close_sp.png); }

/* Toggle Menu - Contents
---------------------------------------------------------------------- */
.toggle-menu {
  transform: translateX(calc(720 / 780 * 100vw));
  width: calc(720 / 780 * 100vw);
  padding: calc(120 / 780 * 100%) calc(60 / 780 * 100%) 0 calc(90 / 780 * 100%);
}
.toggle-menu ul { margin: calc(110 / 780 * 100%) 0; }
.toggle-menu ul li { font-size: calc(30 / 780 * 100vw); }
.toggle-menu ul li:not(:last-of-type) { margin: 0 0 calc(55 / 780 * 100%); }
.toggle-menu ul li a { padding: 0 0 0 calc(50 / 780 * 100%); }
.toggle-menu ul li a::before {
  transform: translateY(-50%) scale(.75);
  transform-origin: 0 50%;
}
.toggle-menu dl dt { font-size: calc(24 / 780 * 100vw); }
.toggle-menu dl dd {
  width: 100%;
  height: calc(145 / 780 * 100vw);
  margin: 0 0 calc(30 / 780 * 100%);
}
.toggle-menu dl dd:first-of-type figure { width: calc(339 / 780 * 100vw); }
.toggle-menu dl dd:first-of-type figure figcaption { font-size: calc(22.5 / 780 * 100vw); }
.toggle-menu dl dd:last-of-type a { font-size: calc(30 / 780 * 100vw); }
.toggle-menu dl dd:last-of-type a::before {
  left: calc(55 / 780 * 100vw);
  transform: translateY(-50%) scale(.75);
  transform-origin: 0 50%;
}

@media screen and (max-width:480px) {
  .toggle-menu dl dt { font-size: calc((24 / 780 * 100vw) * 1.15); }
  .toggle-menu dl dd:first-of-type figure figcaption { font-size: calc((22.5 / 780 * 100vw) * 1.05); }
}

/*
  Footer
====================================================================== */
/*.l-footer { padding: calc(95 / 780 * 100%) 0 calc(155 / 780 * 100%); }*/

/* Foot Content
---------------------------------------------------------------------- */
.foot-content { height: auto; }
.foot-content > div { width: 100%; }
.foot-content > div::before, .foot-content > div::after { content: none; }
.foot-content > div .inner {
  width: 100%;
  padding: 0;
}
.foot-content > div .inner h2 {
  font-size: calc(27 / 780 * 100vw);
  line-height: calc(42 / 27);
}
.foot-content > div .inner ul {
  flex-direction: column;
  gap: calc(25 / 780 * 100vw) 0;
  margin: calc(30 / 780 * 100%) 0 0;
}
.foot-content > div .inner ul li {
  width: calc(542 / 780 * 100vw);
  height: calc(143 / 780 * 100vw);
}
.foot-content > div .inner ul li a { border-radius: 7.5px; }
.foot-content > div .inner ul li:first-of-type { text-align: center; }
.foot-content > div .inner ul li:first-of-type a { pointer-events: auto; }
.foot-content > div .inner ul li:first-of-type a img {
  width: calc(339 / 780 * 100vw);
  margin: auto;
}
.foot-content > div .inner ul li:first-of-type a span {
  font-size: calc(21 / 780 * 100vw);
}
.foot-content > div .inner ul li:last-of-type a { font-size: calc(28 / 780 * 100vw); }
.foot-content > div .inner ul li:last-of-type a::before {
  width: calc(25.5 / 780 * 100vw);
  height: calc(31 / 780 * 100vw);
}
.foot-content > div figure img { aspect-ratio: 820 / 655; }

.f-contents {
  display: block;
  margin: 0;
}
.f-content01 { margin: 0 0 calc(100 / 780 * 100%); }
.f-content01 ul li { font-size: calc(24 / 780 * 100vw); }
.f-content01 ul li:not(:first-of-type) { margin: calc(50 / 780 * 100%) 0 0; }
.f-content01 ul li a { padding: 0 0 0 20px; }
.f-content01 ul li a::before {
  transform: translateY(-50%) scale(.85);
  transform-origin: 0 50%;
}
.f-content02 { margin: 0 0 calc(100 / 780 * 100%); }
.f-content02 h3 {
  font-size: calc(24 / 780 * 100vw);
  margin: 0 0 10px;
}
.f-content02 dl {
  font-size: calc(22 / 780 * 100vw);
  line-height: calc(36 / 22);
}
.f-content02 dl:first-of-type { margin: 0 0 calc(70 / 780 * 100%); }
.fax-num { margin: .5em 0 .75em; }
.tel-num { width: calc(390 / 780 * 100vw); }
.f-content02 dl dd.sp {
  font-size: calc(20 / 780 * 100vw);
  margin: .5em 0 0;
}

@media screen and (max-width:480px) {
  .f-content01 ul li { font-size: calc((24 / 780 * 100vw) * 1.15); }
  .f-content02 h3 { font-size: calc((24 / 780 * 100vw) * 1.15); }
  .f-content02 dl { font-size: calc((22 / 780 * 100vw) * 1.15); }
  .f-content02 dl dd.sp { font-size: calc((20 / 780 * 100vw) * 1.15); }
}

/*
  Footer Fixed Button
====================================================================== */
.fixed-btn {
  position: fixed;
  z-index: 2;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  padding: 0 calc(60 / 780 * 100%);
}
.fixed-btn a {
  position: relative;
  font-size: calc(27 / 780 * 100vw);
  font-weight: 600;
  letter-spacing: .075em;
  text-decoration: none;
  width: 100%;
  height: calc(101 / 780 * 100vw);
  color: var(--black);
  border-top: solid 2px var(--black);
  border-left: solid 2px var(--black);
  border-right: solid 2px var(--black);
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  display: grid;
  place-content: center;
  background-color: var(--yellow);
  transition: all .3s;
}
.fixed-btn a::before {
  content: "";
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 25vw;
  width: 12.5px;
  height: 15px;
  display: inline-block;
  background: url(../images/triangle_w.svg) no-repeat 50% 50%;
  background-size: 100%;
}
.fixed-btn a:hover { background-color: var(--white); }
.fixed-btn a:hover::before { background-image: url(../images/triangle_yellow.svg); }

/*
  Contents
====================================================================== */

/* Breadcrumb
---------------------------------------------------------------------- */
.breadcrumb { font-size: calc(20 / 780 * 100vw); }

@media screen and (max-width:480px) {
  .breadcrumb { font-size: calc((20 / 780 * 100vw) * 1.15); }
}

/* Link Button
---------------------------------------------------------------------- */
.link-btn {
  width: calc(620 / 780 * 100vw);
  height: calc(90 / 780 * 100vw);
}
.link-btn a {
  font-size: calc(28 / 780 * 100vw);
  border-radius: calc( (90 / 2) / 780 * 100vw );
}
.link-btn a::before {
  left: 20px;
  width: calc(18 / 780 * 100vw);
  height: calc(22 / 780 * 100vw);
}

/* Recruitment
---------------------------------------------------------------------- */
.recruitment {
  aspect-ratio: 780 / 910;
  background-image: url(../images/recruitment_bg_sp.png);
  background-position: 50% 0;
  padding: calc(125 / 780 * 100%) 0 calc(95 / 780 * 100%);
}
.recruitment:last-of-type { padding-bottom: calc(155 / 780 * 100%) }
.recruitment.half {
  width: 100%;
  aspect-ratio: 780 / 910;
  background-image: url(../images/recruitment_bg_sp.png);
}
.recruitment .inner {
  width: calc(660 / 780 * 100%);
  margin: auto;
}
.recruitment h2 { font-size: calc(40 / 780 * 100vw); }
.recruitment p {
  font-size: calc(24 / 780 * 100vw);
  letter-spacing: .025em;
  line-height: calc(48 / 24);
  margin: 0 0 calc(65 / 780 * 100%);
}

@media screen and (max-width:480px) {
  .recruitment p { font-size: calc((24 / 780 * 100vw) * 1.15); }
}