*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: "Noto Sans JP", sans-serif;
  color: var(--color-text);
  background: var(--color-black);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

html {
  scroll-behavior: smooth;
}

hr {
  height: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

/* ---------- 共通セクションヘッダー ---------- */
#locator_template_c2 .inner,
main#contents,
main.inner {
  max-width: 100%;
  padding: 90px 0 0 0;
}

:root {
  --color-white: #ffffff;
  --color-black: #000000;
  --color-gray-700: #2a2a2a;
  --color-gray-500: #555555;
  --color-gray-300: #999999;
  --color-gray-200: #cccccc;
  --color-gray-100: #e8e8e8;
  --color-gray-50: #f4f4f4;
  --color-text: #bababa;

  --transition-smooth: all 0.3s ease;
  --header-height: 80px;
  --max-width: 1680px;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);

  /* font-size設定 */
  --f64: clamp(2.25rem, 4.5vw, 4rem);
  --f52: clamp(1.875rem, 3.5vw, 3.25rem);
  --f44: clamp(1.625rem, 3vw, 2.75rem);
  --f36: clamp(1.25rem, 2.5vw, 2.25rem);
  --f30: clamp(1.09rem, 2.0vw, 1.875rem);
  --f24: clamp(0.9375rem, 1.5vw, 1.5rem);
}

.left_15 {
  margin-left: 15px;
}

@media screen and (min-width: 768px) {
  .sp-only {
    display: none;
  }

  .sp-br {
    display: none;
  }
}

@media screen and (max-width: 767px) {
  .pc-only {
    display: none;
  }

  .sp-br {
    display: inline;
  }

  .pc-br {
    display: none;
  }
}

/* =====　ファーストビューセクション　======　*/
.hero-section {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  display: flex;
  align-items: center;
  max-height: 720px;
}

.background-video {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
  top: 0;
  left: 0;
  z-index: -1;
}

.hero-content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  max-width: var(--max-width);
  padding: 0 clamp(24px, 8vw, 150px);
  overflow-x: hidden;
  gap: 0;
}

.hero-title {
  font-size: var(--f52);
  font-weight: 500;
  text-align: left;
  text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.65);
  line-height: 1.5;
  letter-spacing: 0.05em;
}

.hero-title span {
  display: none;
}

.service_logo {
  margin: clamp(24px, 3vw, 40px) 0 clamp(24px, 3vw, 40px) 0;
  color: var(--color-white);
  max-width: 800px;
}

.hero-subtitle {
  font-size: var(--f36);
  font-weight: 500;
  text-align: left;
  text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.65);
  line-height: 1.4;
}

/* ボタンの仕様 */
.hero-buttons {
  display: flex;
  gap: 20px;
  margin: clamp(28px, 4vw, 48px) 0 0 0;
  flex-wrap: wrap;
}

.upg-btn {
  display: inline-flex;
  align-items: center;
  background: var(--color-white);
  color: var(--color-black);
  padding: 16px 32px;
  font-size: var(--f34);
  border: none !important;
  border-radius: 2px;
  cursor: pointer;
  text-decoration: none !important;
  user-select: none;
  transition: all 0.3s;
}

.upg-btn__icon {
  display: flex;
  align-items: center;
}

.arrow {
  display: flex;
  align-items: center;
}

.arrow__tip {
  transition: transform 200ms ease;
  display: block;
}

.upg-btn:hover {
  background: #ececec;
}

.upg-btn:hover .arrow__tip {
  transform: translateX(3px);
  transition: all 0.3s;
}

/*スクロールデザイン*/
@import url('https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@300;400&display=swap');

.scroll_down {
  position: absolute;
  bottom: 50px;
  right: 50%;
  animation: arrowmove 1s ease-in-out infinite;
}

.scroll_down a {
  position: absolute;
  left: -24px;
  bottom: 30px;
  color: #000;
  font-size: 14px;
  font-family: 'Josefin Sans', sans-serif;
  letter-spacing: .2em;
  text-transform: uppercase;
  width: 24px;
  height: 24px;
  text-decoration: none;
}

.text {
  display: block;
  margin-top: 70px;
  margin-left: -14px;
  font-size: 12px;
  color: #ffffff;
  text-transform: uppercase;
  white-space: nowrap;
  letter-spacing: 2px;
}

.scroll_arrow_down {
  position: absolute;
  width: 28px;
  height: 5px;
  opacity: 0;
  transform: scale3d(0.5, 0.5, 0.5);
  animation: move 3s ease-out infinite;
}

.scroll_arrow_down:first-child {
  animation: move 3s ease-out 1s infinite;
}

.scroll_arrow_down:nth-child(2) {
  animation: move 3s ease-out 2s infinite;
}

.scroll_arrow_down:before,
.scroll_arrow_down:after {
  content: ' ';
  position: absolute;
  top: 0;
  height: 100%;
  width: 51%;
  background: #ffffff;
}

.scroll_arrow_down:before {
  left: 0;
  transform: skew(0deg, 30deg);
}

.scroll_arrow_down:after {
  right: 0;
  width: 50%;
  transform: skew(0deg, -30deg);
}

@keyframes move {
  25% {
    opacity: 1;
  }

  33% {
    opacity: 1;
    transform: translateY(30px);
  }

  67% {
    opacity: 1;
    transform: translateY(40px);
  }

  100% {
    opacity: 0;
    transform: translateY(55px) scale3d(0.5, 0.5, 0.5);
  }
}

/* ================================================================
  タイトル仕様
   ================================================================ */
.title-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  width: 100%;
  text-align: center;
}

.title-container h2 {
  color: var(--color-white);
  font-size: var(--f64);
  font-weight: 300;
  letter-spacing: 0.03em;
}

.title-container .casestudy-title {
  color: #333;
  font-size: var(--f64);
  font-weight: 500;
}

.title-container .casestudy-subtitle {
  color: #777777;
  font-size: var(--f36);
  font-weight: 300;
}

.title-container P {
  font-size: var(--f36);
  font-weight: 300;
  letter-spacing: 0.03em;
}


/* ================================================================
  UpGuardの4つのメイン機能
   ================================================================ */
.main-features {
  background: var(--color-black);
  position: relative;
  padding: 150px 0;
  width: 100%;
  overflow-x: hidden;
}

.main-features__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 80px;
  max-width: var(--max-width);
  padding: 0 40px;
  margin: 0 auto;
}

.features-contents {
  display: flex;
  flex-direction: column;
  gap: 80px;
}

.features-contents hr {
  border-top: 1px solid #777777;
}

.sticker {
  display: flex;
  align-items: center;
  gap: 18px;
}

.features {
  display: flex;
  gap: 80px;
}

.features-mark {
  margin: 0;
}

.features-logo {
  font-size: var(--f36);
}

.features-container {
  display: flex;
  flex-direction: column;
  gap: 18px;
  width: 60%;
  /*align-items: stretch;*/
}

.features-container h3 {
  color: var(--color-white);
  font-size: var(--f52);
  font-weight: 300;
}

.features-container p {
  font-size: var(--f30);
  font-weight: 200;
}

.features-container ul {
  list-style: none;
  bottom: 0;
  padding: 50px;
}

.features-container li {
  color: #ffffff;
  font-size: var(--f30);
  font-weight: 200;
  padding-left: 28px;
  position: relative;
  display: flex;
  align-items: center;
}

.features-container li::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0px;
  transform: translateY(-75%) rotate(45deg);
  width: 0.5em;
  height: 1em;
  border-bottom: 3px solid #ffffff;
  border-right: 3px solid #ffffff;
}

.features-container li+li {
  margin: 1em 0px 0px;
}

.features-summary {
  margin-top: auto;
}

.features-image {
  display: flex;
  width: 40%;
  align-items: stretch;
}

.features-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/*　UpGuardの特長とメリット　セクション*/
.strengths-section {
  background: #000000;
  padding: 150px 0px;
  background-image: url('/dcms_media/image/upg_strengthsbg.jpg');
  background-repeat: no-repeat;
  background-size: cover;
}

.strengths-section__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 80px;
  max-width: var(--max-width);
  padding: 0 40px;
  margin: 0 auto;
}

.strengths-container {
  margin: 0 auto;
  padding: 0 20px;
  align-items: center;
}

.strengths-label {
  font-family: "Roboto", sans-serif;
  font-size: var(--f24);
  font-weight: 700;
  color: var(--color-primary);
  text-align: center;
  letter-spacing: 0.5px;
}

.strengths-cards {
  display: flex;
  max-width: var(--max-width);
  margin: 0 auto;
  flex-wrap: wrap;
  justify-content: space-between;
}

.strength-card {
  flex: 1;
  padding: 0px 20px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  transition: var(--transition-smooth);
  box-sizing: border-box;
}

.strength-card h3 {
  color: var(--color-white);
  font-size: var(--f44);
  font-weight: 300;
  text-align: center;
  line-height: 1.5;
  margin: 15px;
}

.strength-card p {
  font-size: var(--f30);
  color: var(--color-text);
  line-height: 1.5;
}

.strength-card span {
  font-weight: 500;
  color: var(--color-white);
}

.strength-list ul {
  list-style: none;
}

.strength-list li {
  font-size: var(--f30);
  padding-left: 28px;
  position: relative;
  display: flex;
  align-items: center;
  line-height: 1.5;
}

.strength-list li::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0px;
  transform: translateY(-75%) rotate(45deg);
  width: 0.5em;
  height: 1em;
  border-bottom: 3px solid #bababa;
  border-right: 3px solid #bababa;
}

.strength-list li+li {
  margin: 1em 0px 0px;
}

/*　世界中で信頼されるUpGuard | お客さまの声　セクション */
.customer-section {
  background: #ededed;
  color: #222222;
  padding: 150px 0px;
}

.customer-section__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 80px;
  max-width: var(--max-width);
  padding: 0 40px;
  margin: 0 auto;
}

.customer-content {
  display: flex;
  flex-direction: column;
  gap: 80px;
}

.customer-content hr {
  border-top: 1px solid #777777;
}

.casestudy-container {
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.customer-container h3 {
  color: #333;
  font-size: var(--f52);
  font-weight: 300;
}

.voice {
  color: #333333;
  font-size: var(--f36);
  font-weight: 300;
}

.voice span {
  color: #222222;
  font-size: var(--f36);
  font-weight: 600;
}

.quote-2 {
  position: relative;
  padding: 2.5em 2.5em 2em 3em;
  color: #333333;
}

.quote-2::before,
.quote-2::after {
  display: inline-block;
  position: absolute;
  width: 4em;
  height: 4em;
  content: '';
}

.quote-2::before {
  top: 0;
  left: 0;
  border-top: 3px solid #333333;
  border-left: 3px solid #333333;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4.58341 17.3211C3.55316 16.2274 3 15 3 13.0103C3 9.51086 5.45651 6.37366 9.03059 4.82318L9.92328 6.20079C6.58804 8.00539 5.93618 10.346 5.67564 11.822C6.21263 11.5443 6.91558 11.4466 7.60471 11.5105C9.40908 11.6778 10.8312 13.159 10.8312 15C10.8312 16.933 9.26416 18.5 7.33116 18.5C6.2581 18.5 5.23196 18.0095 4.58341 17.3211ZM14.5834 17.3211C13.5532 16.2274 13 15 13 13.0103C13 9.51086 15.4565 6.37366 19.0306 4.82318L19.9233 6.20079C16.588 8.00539 15.9362 10.346 15.6756 11.822C16.2126 11.5443 16.9156 11.4466 17.6047 11.5105C19.4091 11.6778 20.8312 13.159 20.8312 15C20.8312 16.933 19.2642 18.5 17.3312 18.5C16.2581 18.5 15.232 18.0095 14.5834 17.3211Z' fill='%23000000'%3E%3C/path%3E%3C/svg%3E");
  background-position: top 35% left 35%;
  background-size: 2em;
  background-repeat: no-repeat;
}

.quote-2::after {
  bottom: 0;
  right: 0;
  border-bottom: 3px solid #333333;
  border-right: 3px solid #333333;
}

.quote-2 p {
  margin-top: 0;
}

.casestudy-explanation {
  display: flex;
  align-items: top;
}

.side-left {
  width: 60%;
}

.issue {
  display: flex;
  align-items: stretch;
  margin-top: 80px;
}

.issue-label {
  width: 15%;
  font-size: var(--f36);
  text-align: center;
  padding: 30px 0px;
  color: #ffffff;
  background-color: #333;
}

.issue-text,
.impact-text {
  width: 85%;
  font-size: var(--f30);
  padding: 30px;
  background-color: #ffffff;
  color: #333;
}

.arrow_down {
  color: #333;
  font-size: var(--f64);
  font-weight: 300;
  text-align: center;
}

.impact {
  display: flex;
  align-items: stretch;
  margin-top: 40px;
}

.impact-label {
  width: 15%;
  font-size: var(--f36);
  text-align: center;
  padding: 30px 0px;
  color: #ffffff;
  background-color: #333;
}

.side-right {
  margin: 0px 0px 0px 40px;
  width: 40%;
}

.profile {
  font-size: var(--f30);
  margin-top: 30px;
  border: 0.5px solid #333;
}

.profile-label {
  margin: 10px;
  padding: 5px;
  font-size: var(--f24);
  background-color: #333;
  color: #ffffff;
  text-align: center;
}

.profile-text {
  margin: 10px;
  font-size: var(--f30);
}

/*　都市背景　*/
.hr_bg_style {
  width: 100% !important;
  object-fit: cover;
}

/*　UpGuardリンクボタン　*/
.upguard_link {
  text-align: center;
}

.upguard_link p {
  margin-bottom: 20px;
  font-size: 24px;
  font-weight: 300;
}

.upguard_link_btn a {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 380px;
  margin: 0 auto;
  padding: .9em 2em;
  border: none;
  background-color: #000000;
  color: #ffffff;
  font-weight: 300;
  font-size: 24px;
  transition: all 0.3s;
}

.upguard_link_btn a:hover {
  opacity: 0.7;
}

.upguard_link_btn a::after {
  width: 1.25em;
  height: 1.25em;
  margin-left: 8px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M10 6V8H5V19H16V14H18V20C18 20.5523 17.5523 21 17 21H4C3.44772 21 3 20.5523 3 20V7C3 6.44772 3.44772 6 4 6H10ZM21 3V11H19L18.9999 6.413L11.2071 14.2071L9.79289 12.7929L17.5849 5H13V3H21Z' fill='%23fff'%3E%3C/path%3E%3C/svg%3E");
  content: '';
}


/*　お問い合わせセクション*/
.contact-section {
  padding: 150px 0px;
  min-height: 100vh;
  background: url('/dcms_media/image/upg_contact.jpg') center center / cover no-repeat;
}

.contact-section__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 80px;
  max-width: var(--max-width);
  padding: 0 40px;
  margin: 0 auto;
}

.title-container .contact-title {
  color: #222222;
  font-size: var(--f64);
  font-weight: 500;
}

.contact-form {
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  border-radius: 4px;
  padding: 44px 52px;
  box-shadow: 0 4px 32px rgba(0, 0, 0, .12);
  width: 80%;
}