@charset "UTF-8";
/* ========================================
   GLOBAL: VARIABLES & BASE STYLE
======================================== */
:root {
  --color-text: #252525;
  --color-orange: #f04f22;
  --color-blue: #0091d6;
  --color-bg: #fff;
}

/* body {
  color: var(--color-text);
  line-height: 1.6;
} */
.roboto {
  font-family: "Roboto Condensed", sans-serif;
  font-optical-sizing: auto;
}

a {
  color: inherit;
  text-decoration: none;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

br.sp-only {
  display: none;
}

/* ========================================
   RESPONSIVE: ≤750px (SP)
======================================== */
@media (width <= 750px) {
  br.sp-only {
    display: inline;
  }
  /* 背景スクロールを止める用 */
  body.is-menu-open {
    overflow: hidden;
  }
}
/* ========================================
   HEADER & GLOBAL NAVIGATION
======================================== */
.site-header {
  position: absolute;
  inset: 0 0 auto;
  z-index: 100;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  gap: 32px;
  -webkit-box-align: start;
  -webkit-align-items: flex-start;
      -ms-flex-align: start;
          align-items: flex-start;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
      -ms-flex-pack: justify;
          justify-content: space-between;
  padding: 24px 30px 20px 33px;
}
@media screen and (max-width: 910px) {
  .site-header {
    padding: 15px 19px 16px 18px;
  }
}
.site-header_lower {
  position: relative;
  padding: 24px 30px 20px 33px;
  background-color: #fff;
}
@media screen and (max-width: 910px) {
  .site-header_lower {
    padding: 15px 19px 14px 12px;
  }
}

.header-logo {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  width: 240px;
}
@media screen and (max-width: 910px) {
  .header-logo {
    width: 190px;
  }
}
.header-logo_lower {
  width: 197px;
}
@media screen and (max-width: 910px) {
  .header-logo_lower {
    width: 150px;
  }
}
.header-logo img {
  width: 100%;
}

.global-nav {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  gap: 32px;
  -webkit-box-align: start;
  -webkit-align-items: flex-start;
      -ms-flex-align: start;
          align-items: flex-start;
}
@media screen and (max-width: 970px) {
  .global-nav {
    gap: 20px;
  }
}
@media screen and (max-width: 910px) {
  .global-nav {
    display: none;
  }
}

.global-nav__link {
  position: relative;
  padding: 12px 0 16px;
  font-size: 16px;
  font-weight: 500;
  color: #fff;
  letter-spacing: 0.06em;
}
.global-nav__link_lower {
  color: #252525;
}
.global-nav__link::after {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 1px;
  content: "";
  background: currentcolor; /* 文字色と同じ色で線を引く */
  -webkit-transition: width 0.2s ease;
  transition: width 0.2s ease;
}
.global-nav__link:hover::after, .global-nav__link:focus-visible::after {
  width: 100%;
}

.global-nav__link--cta {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 132px;
  height: 40px;
  padding: 0 24px;
  font-weight: 500;
  color: #f7f8fa;
  letter-spacing: 0.06em;
  background-color: #f04f22;
  border-radius: 999px;
  -webkit-transition: -webkit-transform 0.2s ease, -webkit-box-shadow 0.2s ease;
  transition: -webkit-transform 0.2s ease, -webkit-box-shadow 0.2s ease;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  transition: transform 0.2s ease, box-shadow 0.2s ease, -webkit-transform 0.2s ease, -webkit-box-shadow 0.2s ease;
}
.global-nav__link--cta_lower {
  color: #fff;
}

/* ========================================
   SP HAMBURGER OVERLAY MENU
======================================== */
.hamburger {
  display: none;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 32px;
  height: 18px;
  padding: 0;
  margin: 3px 0 0;
  cursor: pointer;
  background: transparent;
  border: none;
}
@media screen and (max-width: 910px) {
  .hamburger {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    margin: 5px 0 0;
  }
}
.hamburger__line {
  position: relative;
  display: block;
  width: 100%;
  height: 2px;
  background-color: #fff;
}
.hamburger__line::before, .hamburger__line::after {
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  content: "";
  background-color: #fff;
}
.hamburger__line_lower {
  background-color: #252525;
}
.hamburger__line_lower::before, .hamburger__line_lower::after {
  background-color: #252525;
}
.hamburger__line::before {
  top: -8px;
}
.hamburger__line::after {
  top: 8px;
}

/* PC ではハンバーガーメニュー（sp-menu）は非表示にしておく */
.sp-menu {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: none;
  pointer-events: none;
  background-color: rgba(37, 37, 37, 0.502);
  opacity: 0;
  -webkit-transition: opacity 0.3s ease;
  transition: opacity 0.3s ease;
  /* 開いているとき */
  /* 白いメニューパネル（上からスライドイン） */
  /* 閉じるボタン（×） */
  /* メニューリスト */
  /* ハンバーガーメニュー内の「お問い合わせ」ボタン（可変幅） */
}
@media screen and (max-width: 910px) {
  .sp-menu {
    display: block;
  }
}
.sp-menu.is-open {
  pointer-events: auto;
  opacity: 1;
}
.sp-menu.is-open .sp-menu__panel {
  -webkit-transform: translateY(0);
          transform: translateY(0);
}
.sp-menu__panel {
  position: absolute;
  inset: 0 0 auto;
  width: 100%;
  max-width: none;
  padding: 15px 37px 82px 12px;
  margin: 0;
  background: #fff;
  -webkit-transition: -webkit-transform 0.3s ease;
  transition: -webkit-transform 0.3s ease;
  transition: transform 0.3s ease;
  transition: transform 0.3s ease, -webkit-transform 0.3s ease;
  -webkit-transform: translateY(-100%);
          transform: translateY(-100%);
}
.sp-menu__logo {
  display: block;
  width: 150px;
}
.sp-menu__logo img {
  width: 100%;
}
.sp-menu__close {
  position: absolute;
  top: 24px;
  right: 17px;
  /* ボタン枠自体は 29×18 */
  width: 29px;
  height: 18px;
  padding: 0;
  cursor: pointer;
  background: transparent;
  border: none;
  /* 中のバッテン（長方形の対角線っぽい角度） */
  /* 右上→左下（片方の対角線） */
  /* 左上→右下（もう片方の対角線） */
}
.sp-menu__close::before, .sp-menu__close::after {
  position: absolute;
  top: 50%;
  left: 50%;
  /* 長方形(29×18)の対角線 ≒ 34px */
  width: 34px;
  height: 2px;
  content: "";
  background-color: #252525;
  -webkit-transform-origin: center;
          transform-origin: center;
}
.sp-menu__close::before {
  -webkit-transform: translate(-50%, -50%) rotate(32deg);
          transform: translate(-50%, -50%) rotate(32deg);
}
.sp-menu__close::after {
  -webkit-transform: translate(-50%, -50%) rotate(-32deg);
          transform: translate(-50%, -50%) rotate(-32deg);
}
.sp-menu__list {
  padding: 61px 0 0 25px;
  margin: 0;
  list-style: none;
  /* 1: サービス  上113 / 下25 → 合計 24 + 113 = 137px くらい */
  /* 3: 実績  上24 / 下23 */
  /* 5: 会社概要  上24 / 下23 */
}
.sp-menu__list li {
  border-bottom: 1px solid #f0f0f0;
}
.sp-menu__list a {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
      -ms-flex-pack: justify;
          justify-content: space-between;
  padding: 24px 0;
  font-size: 16px;
  font-weight: 500;
  color: #252525;
}
.sp-menu__list a::after {
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 auto;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto; /* 文字との間隔を保つ用（なくても可） */
  width: 16px; /* 画像の見せたいサイズに調整 */
  height: 10px;
  content: "";
  background-image: url("../img/common/menu_arrow.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  border: none;
  -webkit-transform: none;
          transform: none;
}
.sp-menu__list li:nth-child(1) a {
  padding-bottom: 25px;
}
.sp-menu__list li:nth-child(3) a {
  padding-bottom: 23px;
}
.sp-menu__list li:nth-child(5) a {
  padding-bottom: 23px;
}
.sp-menu__cta {
  position: relative;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: auto;
  height: 48px;
  padding: 0 20px;
  margin: 45px 0 0 19px;
  text-decoration: none;
  background-image: -webkit-linear-gradient(141deg, #f04f22 0%, #f06b22 100%);
  background-image: linear-gradient(-51deg, #f04f22 0%, #f06b22 100%);
  border-radius: 24px;
  /* 「お問い合わせ」テキスト */
}
.sp-menu__cta span {
  display: block;
  font-size: 16px;
  font-weight: 500;
  color: #fff;
  text-indent: 0.05em;
  letter-spacing: 0.05em;
}
.sp-menu__cta::after {
  position: absolute;
  top: 50%;
  right: 11px;
  z-index: 1;
  display: block;
  width: 29px;
  height: 29px;
  content: "";
  background: #fff;
  border-radius: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
}
.sp-menu__cta::before {
  position: absolute;
  top: 50%;
  right: 19px;
  z-index: 2;
  display: block;
  width: 11px;
  height: 7px;
  content: "";
  background-image: url("../img/common/menu_arrow.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
}

.site-footer {
  position: relative;
  padding: 77px 0 55px;
  background-color: #111; /* 画像なし時のベース色 */
  background-image: url("../img/common/buillding_footer_top.png");
  background-repeat: no-repeat;
  background-position: center bottom;
  background-size: cover;
  /* 右側：ナビ */
  /* プライバシーポリシー */
}
@media screen and (width <= 750px) {
  .site-footer {
    padding: 53px 0 43px;
    background-image: url("../img/common/buillding_footer_top_sp.png");
  }
}
.site-footer::before {
  position: absolute;
  inset: 0;
  z-index: 1;
  content: "";
  background-color: rgba(27, 27, 27, 0.902);
}
.site-footer__inner {
  position: relative;
  z-index: 2;
  max-width: 1286px;
  padding: 0 20px;
  margin: 0 auto;
}
.site-footer__top {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
  gap: 40px;
  -webkit-box-align: start;
  -webkit-align-items: flex-start;
      -ms-flex-align: start;
          align-items: flex-start;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
      -ms-flex-pack: justify;
          justify-content: space-between;
}
@media screen and (width <= 750px) {
  .site-footer__top {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: 51px;
  }
}
.site-footer__company {
  display: block;
  margin: 0 0 19px;
  font-size: 16px;
  line-height: 1.3;
  color: #fff;
}
@media screen and (width <= 750px) {
  .site-footer__company {
    margin: 0 0 12px;
    font-size: 15px;
    line-height: 1.68;
  }
}
.site-footer__postal, .site-footer__address {
  font-size: 16px;
  line-height: 28.8px;
  color: #fff;
}
@media screen and (width <= 750px) {
  .site-footer__postal, .site-footer__address {
    font-size: 12px;
    line-height: 1.8;
  }
}
.site-footer__nav {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
  gap: 37px;
  font-size: 16px;
}
@media screen and (width <= 750px) {
  .site-footer__nav {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, auto));
    gap: 5px 92px;
    margin: 0;
    font-size: 15px;
  }
}
.site-footer__nav li {
  display: block;
}
.site-footer__nav a {
  position: relative;
  display: inline-block;
  padding: 2px 0 14px;
  color: #fff;
  /* ナビのホバーで下線 */
}
@media screen and (width <= 750px) {
  .site-footer__nav a {
    padding: 8px 0;
  }
}
.site-footer__nav a::after {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 1px;
  content: "";
  background: #fff;
  -webkit-transition: width 0.2s ease;
  transition: width 0.2s ease;
}
.site-footer__nav a:hover::after {
  width: 100%;
}
.site-footer__bottom {
  margin-top: 205px;
}
@media screen and (width <= 750px) {
  .site-footer__bottom {
    margin-top: 73px;
  }
}
.site-footer__privacy a {
  position: relative;
  padding: 0 0 6px;
  font-size: 12px;
  color: #fff;
  text-decoration: none;
}
.site-footer__privacy a::after {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 1px;
  content: "";
  background: #fff;
  -webkit-transition: width 0.2s ease;
  transition: width 0.2s ease;
}
.site-footer__privacy a:hover::after {
  width: 100%;
}
.site-footer__copy {
  padding: 18px 0 0;
  font-size: 12px;
  line-height: 22px;
  color: #fff;
  letter-spacing: 0.04em;
}
@media screen and (width <= 750px) {
  .site-footer__copy {
    padding: 6px 0 0;
  }
}

.contact-section {
  padding: 80px 20px;
  text-align: center;
  background-color: #f5f5f5;
  background-image: url("../img/common/cloud_footer_top.png");
  background-repeat: no-repeat;
  background-position: left top;
  background-size: cover;
}
@media screen and (width <= 750px) {
  .contact-section {
    padding: 53px 19px 32px;
    background-image: url("../img/common/cloud_footer_top_sp.png");
  }
}
.contact-section__pill {
  position: relative;
  display: block;
  max-width: 1248px;
  padding: 24px 20px 27px;
  margin: 0 auto;
  color: #fff;
  text-align: center;
  background-image: -webkit-linear-gradient(141deg, #f04f22 0%, #f06b22 100%);
  background-image: linear-gradient(-51deg, #f04f22 0%, #f06b22 100%);
  border-radius: 999px;
}
@media screen and (width <= 750px) {
  .contact-section__pill {
    padding: 14px 20px 19px;
  }
}
.contact-section__pill::after {
  position: absolute;
  top: 50%;
  right: 48px;
  z-index: 1;
  width: 56px;
  height: 56px;
  content: "";
  background-color: #fff;
  border-radius: 50%;
  -webkit-transition: -webkit-transform 0.2s ease, -webkit-box-shadow 0.2s ease;
  transition: -webkit-transform 0.2s ease, -webkit-box-shadow 0.2s ease;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  transition: transform 0.2s ease, box-shadow 0.2s ease, -webkit-transform 0.2s ease, -webkit-box-shadow 0.2s ease;
  -webkit-transform: translateY(-50%) scale(1);
          transform: translateY(-50%) scale(1);
}
@media screen and (width <= 750px) {
  .contact-section__pill::after {
    right: 24px;
    width: 33px;
    height: 33px;
  }
}
.contact-section__pill:hover::after {
  -webkit-transform: translateY(-50%) scale(1.43);
          transform: translateY(-50%) scale(1.43);
}
@media screen and (width <= 750px) {
  .contact-section__pill:hover::after {
    -webkit-transform: translateY(-50%) scale(1.45);
            transform: translateY(-50%) scale(1.45);
  }
}
.contact-section__pic {
  position: absolute;
  top: 50%;
  right: 48px;
  z-index: 2;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 56px;
  height: 56px;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
}
@media screen and (width <= 750px) {
  .contact-section__pic {
    right: 24px;
    width: 33px;
    height: 33px;
  }
}
.contact-section__arrow {
  display: block;
  width: 18px;
}
@media screen and (width <= 750px) {
  .contact-section__arrow {
    width: 11px;
  }
}
.contact-section__label {
  font-size: 18px;
  line-height: 1.5;
  color: #fff;
  text-indent: 0.05em;
  letter-spacing: 0.05em;
}
@media screen and (width <= 750px) {
  .contact-section__label {
    font-size: 14px;
  }
}
.contact-section__title {
  padding: 5px 0 0;
  font-size: 28px;
  font-weight: 700;
  line-height: 1;
  color: #fff;
}
@media screen and (width <= 750px) {
  .contact-section__title {
    padding: 4px 0 0;
    font-size: 22px;
  }
}
.contact-section__text {
  padding: 25px 0 0;
  font-size: 16px;
  font-weight: 500;
  line-height: 1;
}
@media screen and (width <= 750px) {
  .contact-section__text {
    display: none;
  }
}
.contact-section__sptext {
  display: none;
}
@media screen and (width <= 750px) {
  .contact-section__sptext {
    display: block;
    padding: 20px 0 0;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.4;
    text-indent: 0.04em;
    letter-spacing: 0.04em;
  }
}