@charset "UTF-8";
/**
 * Modern CSS Reset Tweaks
 * ==================================================
 * A collection of modern CSS reset and normalization styles
 * to ensure consistent behavior across browsers, OS and devices.
 */
/* Ensure consistent font resizing on mobile devices */
html {
  -webkit-text-size-adjust: 100%;
}
html:focus-within {
  scroll-behavior: smooth;
}

/* Basic body setup for layout and text rendering optimization */
body {
  text-size-adjust: 100%;
  position: relative;
  width: 100%;
  min-height: 100vh;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeSpeed;
}

/* Apply box-sizing globally for consistent element sizing */
*,
::after,
::before {
  box-sizing: border-box;
}

/* Style unclassed links for better accessibility */
a:not([class]) {
  text-decoration-skip-ink: auto;
}

/**
 * CSS Reset Tweaks
 * Based on Eric Meyer's CSS Reset v2.0-modified (public domain)
 * URL: http://meyerweb.com/eric/tools/css/reset/
 */
a,
abbr,
acronym,
address,
applet,
article,
aside,
audio,
b,
big,
blockquote,
body,
br,
button,
canvas,
caption,
center,
cite,
code,
col,
colgroup,
data,
datalist,
dd,
del,
details,
dfn,
div,
dl,
dt,
em,
embed,
fieldset,
figcaption,
figure,
footer,
form,
h1,
h2,
h3,
h4,
h5,
h6,
head,
header,
hgroup,
hr,
html,
i,
iframe,
img,
input,
ins,
kbd,
label,
legend,
li,
link,
main,
map,
mark,
menu,
meta,
meter,
nav,
noscript,
object,
ol,
optgroup,
option,
output,
p,
param,
picture,
pre,
progress,
q,
rb,
rp,
rt,
rtc,
ruby,
s,
samp,
script,
section,
select,
small,
source,
span,
strong,
style,
svg,
sub,
summary,
sup,
table,
tbody,
td,
template,
textarea,
tfoot,
th,
thead,
time,
title,
tr,
track,
tt,
u,
ul,
var,
video,
wbr {
  font-size: 100%;
  font: inherit;
  margin: 0;
  padding: 0;
  border: 0;
  vertical-align: baseline;
}

/* Add focus styles to improve accessibility */
:focus {
  outline: 0;
}

/* Normalize HTML5 elements for older browsers */
article,
aside,
details,
embed,
figcaption,
figure,
footer,
header,
hgroup,
main,
menu,
nav,
object,
section {
  display: block;
}

canvas,
iframe {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Remove default list styling */
ol,
ul {
  list-style: none;
}

/* Normalize quote styling */
blockquote,
q {
  quotes: none;
}
blockquote:before, blockquote:after,
q:before,
q:after {
  content: "";
  content: none;
}

/* Reset and normalize form inputs */
input:required,
input {
  box-shadow: none;
}

/* Autofill styling for better compatibility */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 30px white inset;
}

/* Improve appearance of search inputs */
input[type=search]::-webkit-search-cancel-button,
input[type=search]::-webkit-search-decoration,
input[type=search]::-webkit-search-results-button,
input[type=search]::-webkit-search-results-decoration {
  -webkit-appearance: none;
  -moz-appearance: none;
}

input[type=search] {
  -webkit-appearance: none;
  -moz-appearance: none;
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
}

textarea {
  overflow: auto;
  vertical-align: top;
  resize: vertical;
}

input:focus {
  outline: none;
}

video {
  background: #000;
}

/**
 * Prevent modern browsers from displaying `audio` without controls.
 * Remove excess height in iOS 5 devices.
 */
audio:not([controls]) {
  display: none;
  height: 0;
}

/**
 * Address styling not present in IE 7/8/9, Firefox 3, and Safari 4.
 */
[hidden] {
  display: none;
}

/**
 * Improve readability when focused and also mouse hovered in all browsers.
 */
a:active,
a:hover {
  outline: none;
}

/**
 * Make media easier to work with
 */
audio,
img,
picture,
svg,
video {
  max-width: 100%;
  display: inline-block;
  vertical-align: middle;
  height: auto;
}

/**
 * Address Firefox 3+ setting `line-height` on `input` using `!important` in
 * the UA stylesheet.
 */
button,
input {
  line-height: normal;
}

/**
 * Address inconsistent `text-transform` inheritance for `button` and `select`.
 * All other form control elements do not inherit `text-transform` values.
 * Correct `button` style inheritance in Chrome, Safari 5+, and IE 6+.
 * Correct `select` style inheritance in Firefox 4+ and Opera.
 */
button,
select {
  text-transform: none;
}

button,
html input[type=button],
input[type=reset],
input[type=submit] {
  -webkit-appearance: button;
  cursor: pointer;
  border: 0;
  background: transparent;
}

/**
 * Re-set default cursor for disabled elements.
 */
button[disabled],
html input[disabled] {
  cursor: default;
}

/* Additional attribute handling for accessibility */
[disabled],
[disabled=true],
[aria-disabled=true] {
  pointer-events: none;
}

/**
 * Address box sizing set to content-box in IE 8/9.
 */
input[type=checkbox],
input[type=radio] {
  padding: 0;
}

/**
 * 1. Address `appearance` set to `searchfield` in Safari 5 and Chrome.
 * 2. Address `box-sizing` set to `border-box` in Safari 5 and Chrome
 *    (include `-moz` to future-proof).
 */
input[type=search] {
  -webkit-appearance: textfield;
  -moz-box-sizing: content-box;
  -webkit-box-sizing: content-box;
  box-sizing: content-box;
}

/**
 * Remove inner padding and search cancel button in Safari 5 and Chrome
 * on OS X.
 */
input[type=search]::-webkit-search-cancel-button,
input[type=search]::-webkit-search-decoration {
  -webkit-appearance: none;
}

/**
 * Remove inner padding and border in Firefox 3+.
 */
button::-moz-focus-inner,
input::-moz-focus-inner {
  border: 0;
  padding: 0;
}

button {
  border: 0;
  background: transparent;
}

textarea {
  overflow: auto;
  vertical-align: top;
  resize: vertical;
}

/**
 * Remove most spacing between table cells.
 */
table {
  border-collapse: collapse;
  border-spacing: 0;
  text-indent: 0;
}

/**
 * Based on normalize.css v8.0.1
 * github.com/necolas/normalize.css
 */
hr {
  box-sizing: content-box;
  overflow: visible;
  background: #000;
  border: 0;
  height: 1px;
  line-height: 0;
  margin: 0;
  padding: 0;
  page-break-after: always;
  width: 100%;
}

/**
 * Correct the inheritance and scaling of font size in all browsers.
 */
pre {
  font-family: monospace, monospace;
  font-size: 100%;
}

/**
 * Remove the gray background on active links in IE 10.
 */
a {
  background-color: transparent;
}

/**
 * 1. Remove the bottom border in Chrome 57-
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */
abbr[title] {
  border-bottom: none;
  text-decoration: none;
}

code,
kbd,
pre,
samp {
  font-family: monospace, monospace;
}

/**
 * Add the correct font size in all browsers.
 */
small {
  font-size: 75%;
}

/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -5px;
}

sup {
  top: -5px;
}

/**
 * 1. Change the font styles in all browsers.
 * 2. Remove the margin in Firefox and Safari.
 */
button,
input,
optgroup,
select,
textarea {
  font-family: inherit;
  font-size: 100%;
  line-height: 1;
  margin: 0;
  padding: 0;
}

/**
 * Show the overflow in IE and Edge.
 */
button,
input {
  /* 1 */
  overflow: visible;
}

/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 */
button,
select {
  /* 1 */
  text-transform: none;
}

/**
 * Correct the inability to style clickable types in iOS and Safari.
 */
button,
[type=button],
[type=reset],
[type=submit] {
  -webkit-appearance: button;
}

/**
 * Remove the inner border and padding in Firefox.
 */
button::-moz-focus-inner,
[type=button]::-moz-focus-inner,
[type=reset]::-moz-focus-inner,
[type=submit]::-moz-focus-inner {
  border-style: none;
  padding: 0;
  outline: 0;
}

legend {
  color: inherit;
  white-space: normal;
  display: block;
  border: 0;
  max-width: 100%;
  width: 100%;
}

fieldset {
  min-width: 0;
}

body:not(:-moz-handler-blocked) fieldset {
  display: block;
}

/**
 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */
progress {
  vertical-align: baseline;
}

/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */
[type=number]::-webkit-inner-spin-button,
[type=number]::-webkit-outer-spin-button {
  height: auto;
}

/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */
[type=search] {
  -webkit-appearance: textfield;
  /* 1 */
  outline-offset: -2px;
  /* 2 */
}

/**
 * Remove the inner padding in Chrome and Safari on macOS.
 */
[type=search]::-webkit-search-decoration {
  -webkit-appearance: none;
}

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */
::-webkit-file-upload-button {
  -webkit-appearance: button;
  /* 1 */
  font: inherit;
  /* 2 */
}

/* Interactive
   ========================================================================== */
/*
 * Add the correct display in all browsers.
 */
summary {
  display: list-item;
}

/* Misc
   ========================================================================== */
template {
  display: none;
}

html,
body {
  margin: 0px;
  height: 100%;
}

a {
  text-decoration: none;
}

:root {
  --base-width: 1440;
  --min-width: 768px;
  --max-width: 1440px;
}

.about {
  position: relative;
  width: 100%;
  min-width: var(--min-width);
  max-width: var(--max-width);
  margin: 0 auto;
  /* min-height: calc(7106 / var(--base-width) * 100vw) */
  background-color: #ffffff;
  overflow: hidden;
}

.about__body {
  position: relative;
  width: 100%;
  max-width: var(--max-width);
  margin-top: calc(-2 / var(--base-width) * 100vw);
}

.about__overlap {
  position: relative;
  width: 100%;
  margin-left: calc(-184 / var(--base-width) * 100vw);
}

.about__main-article {
  position: relative;
  width: 100%;
  max-width: var(--max-width);
  margin-top: calc(139 / var(--base-width) * 100vw);
  margin-left: calc(184 / var(--base-width) * 100vw);
}

.about__background {
  position: relative;
  width: 100%;
  max-width: var(--max-width);
  /* min-height: calc(1083 / var(--base-width) * 100vw) */
  /* margin-top: calc(1112 / var(--base-width) * 100vw) */
  background-color: #f8f8f8;
}

.about__overlap-wrapper {
  width: 100%;
  max-width: calc(1060 / var(--base-width) * 100vw);
  margin: 0 auto;
  padding: calc(40 / var(--base-width) * 100vw) calc(30 / var(--base-width) * 100vw);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.about__overlap-group {
  position: relative;
  width: 100%;
  max-width: calc(1000 / var(--base-width) * 100vw);
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

.about__heading {
  width: 100%;
  max-width: calc(1000 / var(--base-width) * 100vw);
  min-height: calc(143 / var(--base-width) * 100vw);
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.about__heading-text {
  width: 100%;
  max-width: calc(1019 / var(--base-width) * 100vw);
  margin-top: calc(37 / var(--base-width) * 100vw);
  font-family: "Hiragino Kaku Gothic ProN-W3", Helvetica;
  font-weight: bold;
  color: #2b2b2b;
  font-size: clamp(24px, 36 / var(--base-width) * 100vw, 36px);
  text-align: center;
  letter-spacing: calc(1.8 / var(--base-width) * 100vw);
  line-height: calc(45 / var(--base-width) * 100vw);
  white-space: normal;
  word-break: keep-all;
}

.about__list {
  width: 100%;
  max-width: calc(1000 / var(--base-width) * 100vw);
  /* margin-top: calc(126 / var(--base-width) * 100vw) */
  display: grid;
  grid-template-columns: repeat(2, calc(490 / var(--base-width) * 100vw));
  gap: calc(20 / var(--base-width) * 100vw);
  grid-auto-rows: minmax(calc(250 / var(--base-width) * 100vw), auto);
}

.about__item {
  width: 100%;
  min-height: calc(250 / var(--base-width) * 100vw);
  border-radius: calc(10 / var(--base-width) * 100vw);
  overflow: hidden;
  background-color: #ffffff;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  padding: calc(70 / var(--base-width) * 100vw) calc(20 / var(--base-width) * 100vw) calc(20 / var(--base-width) * 100vw);
}

.about__item-title {
  margin-top: 0;
  font-family: "Hiragino Kaku Gothic ProN-W3", Helvetica;
  font-weight: 400;
  color: #239bc7;
  font-size: clamp(20px, 30 / var(--base-width) * 100vw, 30px);
  text-align: center;
  letter-spacing: 0;
  line-height: calc(50.6 / var(--base-width) * 100vw);
  white-space: normal;
  word-break: keep-all;
}

.about__item--point3 .about__item-header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(5 / var(--base-width) * 100vw);
  margin-top: 0;
}
.about__item--point3 .about__item-title--inline {
  margin-top: 0;
}

.about__item-header-text {
  font-family: "Hiragino Kaku Gothic ProN-W3", Helvetica;
  font-weight: 400;
  color: #239bc7;
  font-size: clamp(10px, 12 / var(--base-width) * 100vw, 12px);
  text-align: center;
  letter-spacing: 0;
  line-height: calc(15 / var(--base-width) * 100vw);
  white-space: nowrap;
}

.about__item-subtitle {
  margin-top: calc(16 / var(--base-width) * 100vw);
  font-family: "Hiragino Kaku Gothic ProN-W3", Helvetica;
  font-weight: 400;
  color: #2b2b2b;
  font-size: clamp(12px, 15 / var(--base-width) * 100vw, 15px);
  text-align: center;
  letter-spacing: 0;
  line-height: calc(25.3 / var(--base-width) * 100vw);
  white-space: normal;
  word-break: keep-all;
  max-width: 100%;
  padding: 0 calc(10 / var(--base-width) * 100vw);
}

.about__item--point2 .about__item-subtitle {
  font-size: clamp(12px, 14.9 / var(--base-width) * 100vw, 14.9px);
}

.about__point-label {
  position: absolute;
  width: calc(109 / var(--base-width) * 100vw);
  height: calc(109 / var(--base-width) * 100vw);
  top: calc(-30 / var(--base-width) * 100vw);
  left: calc(-11 / var(--base-width) * 100vw);
  background-color: #fff001;
  border-radius: calc(32 / var(--base-width) * 100vw);
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.about__point-text {
  font-family: "Hiragino Kaku Gothic ProN-W3", Helvetica;
  font-weight: 400;
  color: #2b2b2b;
  font-size: clamp(11px, 14 / var(--base-width) * 100vw, 14px);
  text-align: center;
  letter-spacing: 0;
  line-height: calc(14 / var(--base-width) * 100vw);
  white-space: nowrap;
}

.about__point-number {
  margin-top: calc(8 / var(--base-width) * 100vw);
  font-family: "Hiragino Kaku Gothic ProN-W3", Helvetica;
  font-weight: 400;
  color: #2b2b2b;
  font-size: clamp(14px, 16.7 / var(--base-width) * 100vw, 16.7px);
  text-align: center;
  letter-spacing: 0;
  line-height: calc(17 / var(--base-width) * 100vw);
  white-space: nowrap;
}

.about__point-number--variant {
  font-size: clamp(14px, 16.6 / var(--base-width) * 100vw, 16.6px);
}

.about__item-image {
  margin-top: auto;
  object-fit: contain;
}

.about__item--point1 .about__item-image {
  width: calc(252 / var(--base-width) * 100vw);
  max-width: 252px;
  height: calc(104 / var(--base-width) * 100vw);
  max-height: 104px;
  margin-bottom: calc(5 / var(--base-width) * 100vw);
}

.about__item-image--large {
  width: calc(357 / var(--base-width) * 100vw);
  max-width: 357px;
  height: calc(142 / var(--base-width) * 100vw);
  max-height: 142px;
  margin-bottom: calc(-17 / var(--base-width) * 100vw);
}

.about__item-image--medium {
  width: calc(276 / var(--base-width) * 100vw);
  max-width: 276px;
  height: calc(124 / var(--base-width) * 100vw);
  max-height: 124px;
  margin-bottom: calc(11 / var(--base-width) * 100vw);
}

.about__item-image--shipping {
  width: calc(236 / var(--base-width) * 100vw);
  max-width: 236px;
  height: calc(115 / var(--base-width) * 100vw);
  max-height: 115px;
  margin-bottom: calc(10 / var(--base-width) * 100vw);
}

.about__item-icon {
  width: calc(142 / var(--base-width) * 100vw);
  max-width: 142px;
  height: calc(119 / var(--base-width) * 100vw);
  max-height: 119px;
  margin-top: auto;
  margin-bottom: calc(6 / var(--base-width) * 100vw);
  background-image: url(../assets/img/1.png);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}

.about__item-image--variety {
  width: calc(214 / var(--base-width) * 100vw);
  max-width: 214px;
  height: calc(132 / var(--base-width) * 100vw);
  max-height: 132px;
  margin-bottom: 0;
}

.about__divider {
  width: calc(937 / var(--base-width) * 100vw);
  max-width: 937px;
  height: calc(8 / var(--base-width) * 100vw);
  max-height: 8px;
  margin: calc(8 / var(--base-width) * 100vw) auto 0;
}

@media (max-width: 767px) {
  :root {
    --mobile-base-width: 375;
  }
  .about {
    min-width: auto;
    width: 100%;
    overflow: hidden;
  }
  .about__body {
    margin-top: 0;
  }
  .about__overlap {
    margin-left: 0;
  }
  .about__main-article {
    margin-top: 20px;
    margin-left: 0;
  }
  .about__background {
    margin-top: 0;
    padding: 20px 0;
  }
  .about__overlap-wrapper {
    padding: 30px 15px;
    max-width: 100%;
  }
  .about__overlap-group {
    max-width: 100%;
  }
  .about__heading {
    min-height: auto;
    margin-bottom: 30px;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .about__heading-text {
    font-size: clamp(28px, 8vw, 36px);
    letter-spacing: 0.5px;
    line-height: 1.3;
    margin-top: 20px;
    padding: 0 20px;
  }
  .about__divider {
    width: 100%;
    height: 6px;
    margin-top: 15px;
  }
  .about__list {
    grid-template-columns: 1fr;
    gap: 20px;
    padding: 0 15px;
    margin-top: 0;
    margin-left: auto;
    margin-right: auto;
  }
  .about__item {
    min-height: 280px;
    padding: 80px 25px 30px;
    border-radius: 15px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  }
  .about__item-title {
    font-size: clamp(26px, 7vw, 32px);
    line-height: 1.3;
    font-weight: 600;
  }
  .about__item--point3 .about__item-header {
    gap: 8px;
    flex-wrap: wrap;
  }
  .about__item-header-text {
    font-size: clamp(14px, 3.5vw, 16px);
    line-height: 1.3;
  }
  .about__item-subtitle {
    font-size: clamp(16px, 4vw, 18px);
    line-height: 1.5;
    margin-top: 12px;
    padding: 0 15px;
  }
  .about__item--point2 .about__item-subtitle {
    font-size: clamp(16px, 4vw, 18px);
  }
  .about__item-subtitle--wide,
  .about__item-subtitle--long,
  .about__item-subtitle--extra-wide {
    font-size: clamp(15px, 3.8vw, 17px);
  }
  .about__point-label {
    width: 85px;
    height: 85px;
    top: -20px;
    left: 10px;
    border-radius: 25px;
  }
  .about__point-text {
    font-size: 13px;
    line-height: 13px;
    font-weight: 600;
  }
  .about__point-number {
    font-size: 16px;
    line-height: 16px;
    margin-top: 5px;
    font-weight: 600;
  }
  .about__point-number--variant {
    font-size: 16px;
  }
  .about__item-image {
    max-width: 75%;
    height: auto;
    margin-bottom: 0;
  }
  .about__item--point1 .about__item-image {
    width: 70%;
    max-width: 220px;
    height: auto;
    margin-bottom: 10px;
  }
  .about__item-image--large {
    width: 85%;
    max-width: 300px;
    height: auto;
    margin-bottom: 0;
  }
  .about__item-image--medium {
    width: 75%;
    max-width: 250px;
    height: auto;
    margin-bottom: 10px;
  }
  .about__item-image--shipping {
    width: 70%;
    max-width: 220px;
    height: auto;
    margin-bottom: 10px;
  }
  .about__item-icon {
    width: 50%;
    max-width: 120px;
    height: auto;
    aspect-ratio: 142/119;
    margin-bottom: 10px;
  }
  .about__item-image--variety {
    width: 65%;
    max-width: 200px;
    height: auto;
    margin-bottom: 10px;
  }
  .about__item-title,
  .about__item-subtitle {
    white-space: normal;
    word-break: keep-all;
    overflow-wrap: break-word;
  }
}
@media (max-width: 360px) {
  .about__heading-text {
    font-size: 26px;
    padding: 0 15px;
  }
  .about__list {
    padding: 0 10px;
  }
  .about__item {
    min-height: 260px;
    padding: 75px 20px 25px;
  }
  .about__item-title {
    font-size: 24px;
  }
  .about__item-subtitle {
    font-size: 15px;
    padding: 0 10px;
  }
  .about__point-label {
    width: 75px;
    height: 75px;
    top: -15px;
    left: 5px;
  }
  .about__point-text {
    font-size: 12px;
  }
  .about__point-number {
    font-size: 14px;
  }
}
:root {
  --base-width: 1440;
  /* デザインカンプ基準幅（単位なし） */
  --min-width: 768px;
  /* 最小サポート幅 */
  --max-width: 1440px;
  /* 最大表示幅 */
}

.banner {
  position: relative;
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  box-sizing: border-box;
  background-color: #ffffff;
  overflow: hidden;
}

.banner__body {
  position: relative;
  width: 100%;
  box-sizing: border-box;
}

.banner__overlap {
  position: relative;
  width: 100%;
  box-sizing: border-box;
}

.banner__main-article {
  position: relative;
  width: 100%;
  box-sizing: border-box;
}

.banner__background {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-color: #f8f8f8;
  z-index: -1;
}

.banner__note {
  display: block;
  width: 100%;
  margin: 0 auto;
  padding: 0 2vw 3vw;
  font-family: "Hiragino Kaku Gothic ProN-W3", Helvetica;
  font-weight: 400;
  color: #2b2b2b;
  font-size: clamp(16px, 4vw, 14 / var(--base-width) * 100vw);
  text-align: center;
  letter-spacing: 0;
  line-height: 1.5;
  word-wrap: break-word;
  /* 長い単語の改行を許可 */
  overflow-wrap: break-word;
  /* モダンブラウザ対応 */
  box-sizing: border-box;
  max-width: 100%;
}

.banner__container {
  position: relative;
  width: 100%;
  min-height: calc(280 / var(--base-width) * 100vw);
  background-color: #37bcee;
  box-sizing: border-box;
}

.banner__container-inner {
  width: 100%;
  min-height: calc(280 / var(--base-width) * 100vw);
  box-sizing: border-box;
}

.banner__container-content {
  position: relative;
  width: 100%;
  min-height: calc(280 / var(--base-width) * 100vw);
  margin: 0 auto;
  /* Flexbox設定 */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  /* レスポンシブパディング - 画面幅の3% */
  padding: 5vw 3vw;
  box-sizing: border-box;
}

.banner__title {
  width: 100%;
  font-family: "Hiragino Kaku Gothic ProN-W6", Helvetica;
  font-weight: 400;
  color: #fff001;
  /* スマホで6vw、タブレットで4vw、デスクトップで元のサイズ */
  font-size: clamp(24px, 6vw, 35 / var(--base-width) * 100vw);
  text-align: center;
  letter-spacing: 0;
  line-height: 1.2;
  margin-bottom: 3vw;
  word-break: keep-all;
}

.banner__main-text {
  width: 100%;
  font-family: "Hiragino Kaku Gothic ProN-W6", Helvetica;
  font-weight: 400;
  color: #ffffff;
  /* スマホで12vw、タブレットで10vw、デスクトップで元のサイズ */
  font-size: clamp(48px, 12vw, 79.5 / var(--base-width) * 100vw);
  text-align: center;
  letter-spacing: 0;
  line-height: 1.1;
  margin-bottom: 4vw;
  word-break: keep-all;
}

.banner__info-box {
  position: relative;
  width: 95%;
  max-width: calc(833 / var(--base-width) * 100vw);
  min-height: auto;
  /* 高さを自動調整に変更 */
  background-color: #ffffff;
  display: flex;
  align-items: center;
  padding: 3vw;
  box-sizing: border-box;
}

.banner__info-text {
  flex: 1;
  font-family: "Hiragino Kaku Gothic ProN-W3", Helvetica;
  font-weight: 400;
  color: #239bc7;
  /* スマホで4vw、タブレットで3vw、デスクトップで元のサイズ */
  font-size: clamp(18px, 4vw, 19.7 / var(--base-width) * 100vw);
  text-align: center;
  letter-spacing: 0;
  line-height: 1.5;
  /* padding-left: 25vw */
  /* 画像のスペース */
  word-break: keep-all;
}

.banner__box-image {
  position: absolute;
  width: 22vw;
  max-width: calc(207 / var(--base-width) * 100vw);
  top: -5vw;
  left: 3vw;
  /* アスペクト比を保持 */
  aspect-ratio: 207/124;
  object-fit: contain;
}

/* デスクトップ固定値化（1441px以上） */
@media (min-width: 1441px) {
  .banner {
    width: var(--max-width);
  }
  .banner__note {
    max-width: 442px;
    padding: 20px 10px;
    font-size: 14px;
  }
  .banner__container {
    min-height: 280px;
  }
  .banner__container-inner {
    min-height: 280px;
  }
  .banner__container-content {
    min-height: 280px;
    padding: 35px 20px;
  }
  .banner__title {
    font-size: 35px;
    margin-bottom: 20px;
  }
  .banner__main-text {
    font-size: 79.5px;
    margin-bottom: 25px;
  }
  .banner__info-box {
    width: 833px;
    min-height: 82px;
    padding: 10px 20px;
  }
  .banner__info-text {
    font-size: 19.7px;
    padding-left: 220px;
  }
  .banner__box-image {
    width: 207px;
    top: -42px;
    left: 22px;
  }
}
/* タブレット最適化（768px - 1024px） */
@media (min-width: 768px) and (max-width: 1024px) {
  .banner__note {
    font-size: clamp(16px, 2.5vw, 18px);
    word-break: normal;
    /* 自動改行 */
    white-space: normal;
    /* 通常の改行 */
  }
  .banner__container-content {
    padding: 4vw;
    min-height: 35vw;
  }
  .banner__title {
    font-size: clamp(28px, 4.5vw, 35px);
    margin-bottom: 2.5vw;
  }
  .banner__main-text {
    font-size: clamp(48px, 8vw, 70px);
    margin-bottom: 3vw;
  }
  .banner__info-box {
    width: 90%;
    min-height: 10vw;
    padding: 2vw 3vw;
  }
  .banner__info-text {
    font-size: clamp(16px, 2.5vw, 20px);
  }
  .banner__box-image {
    width: 16vw;
    max-width: 180px;
    top: -4vw;
    left: 2vw;
  }
}
/* モバイル最適化（768px以下） */
@media (max-width: 767px) {
  .banner {
    width: 100%;
  }
  .banner__note {
    width: 95%;
    /* 少し余白を残す */
    max-width: none;
    /* 最大幅制限を解除 */
    font-size: clamp(14px, 4vw, 18px);
    padding: 3vw 2.5%;
    word-break: normal;
    /* 自動改行 */
    white-space: normal;
    /* 通常の改行 */
  }
  .banner__container {
    min-height: auto;
    width: 100vw;
    /* ビューポート幅100% */
    padding: 0;
    margin-left: calc(-50vw + 50%);
    /* 中央配置の親要素から画面端まで広げる */
    margin-right: calc(-50vw + 50%);
    /* 中央配置の親要素から画面端まで広げる */
  }
  .banner__container-content {
    padding: 0;
    min-height: auto;
    width: 100%;
  }
  .banner__title {
    font-size: clamp(24px, 7vw, 32px);
    margin-bottom: 4vw;
    padding: 5vw 3vw 0;
  }
  .banner__main-text {
    font-size: clamp(48px, 13vw, 64px);
    margin-bottom: 6vw;
    padding: 0 3vw;
  }
  .banner__info-box {
    width: 100vw;
    /* ビューポート幅100% */
    margin-left: calc(-50vw + 50%);
    /* 親要素の中央配置から画面端まで広げる */
    margin-right: calc(-50vw + 50%);
    /* 親要素の中央配置から画面端まで広げる */
    min-height: auto;
    flex-direction: column;
    /* 縦並びに変更 */
    align-items: center;
    /* 上下のパディング */
    border-radius: 0;
    position: relative;
    margin-bottom: 24px;
    max-width: calc(90% - 10 / var(--base-width) * 100vw);
    padding-top: 0px;
  }
  .banner__info-text {
    order: 2;
    /* 画像の下に配置 */
    padding: 0 4vw;
    /* 左右に小さなパディング */
    text-align: center;
    font-size: clamp(14px, 4vw, 20px);
    line-height: 1.5;
    width: 100%;
    margin-top: 15px;
    /* 画像との間隔 */
    word-wrap: break-word;
    /* 長い単語の改行 */
    overflow-wrap: break-word;
    /* 改行対応 */
  }
  .banner__box-image {
    order: 1;
    /* 画像を上に配置 */
    position: relative;
    /* absoluteからrelativeに変更 */
    width: 35vw;
    max-width: 140px;
    top: auto;
    left: auto;
    transform: none;
  }
}
/* 超小型デバイス対応（480px以下） */
@media (max-width: 480px) {
  .banner__note {
    font-size: clamp(13px, 4.5vw, 16px);
    padding: 3vw 2%;
  }
  .banner__container {
    width: 100vw;
    margin-left: calc(-50vw + 50%);
    margin-right: calc(-50vw + 50%);
  }
  .banner__container-content {
    padding: 0;
  }
  .banner__title {
    font-size: clamp(20px, 7.5vw, 26px);
    padding: 4vw 2vw 0;
  }
  .banner__main-text {
    font-size: clamp(40px, 14vw, 52px);
    padding: 0 2vw;
  }
  .banner__info-box {
    width: 100vw;
    margin-left: calc(-50vw + 50%);
    margin-right: calc(-50vw + 50%);
    padding: 15px 0 25px;
  }
  .banner__info-text {
    font-size: clamp(13px, 4.5vw, 18px);
    padding: 0 3vw;
    margin-top: 12px;
  }
  .banner__box-image {
    width: 38vw;
    max-width: 120px;
  }
}
:root {
  --primary-color: #37bcee;
  --text-dark: #2b2b2b;
  --text-light: #ffffff;
  --container-max-width: 1440px;
  --content-max-width: 880px;
}

.footer {
  width: 100%;
  background-color: #ffffff;
}

.footer__container {
  max-width: var(--container-max-width);
  margin: 0 auto;
  padding: 40px 20px;
}

.footer__contact-section {
  background-color: var(--primary-color);
  padding: 20px;
  text-align: center;
  margin-bottom: 40px;
}

.footer__contact-message {
  color: var(--text-light);
  font-family: "Hiragino Kaku Gothic ProN-W3", Helvetica, sans-serif;
  font-size: 18px;
  line-height: 1.7;
  margin-bottom: 20px;
}

.footer__phone-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--text-light);
  margin-bottom: 10px;
}

.footer__phone-icon {
  width: 59px;
  height: auto;
}

.footer__phone-number {
  font-family: "Hiragino Kaku Gothic ProN-W3", Helvetica, sans-serif;
  font-size: 30px;
  font-weight: 400;
  line-height: 1.2;
}

.footer__office-hours {
  color: var(--text-light);
  font-family: "Hiragino Kaku Gothic ProN-W3", Helvetica, sans-serif;
  font-size: 15px;
  line-height: 1.8;
}

.footer__company-info {
  max-width: var(--content-max-width);
  margin: 0 auto;
  text-align: center;
}

.footer__company-text {
  color: var(--text-dark);
  font-family: "Hiragino Kaku Gothic ProN-W3", Helvetica, sans-serif;
  font-size: 12px;
  line-height: 1.6;
  margin-bottom: 20px;
}

.footer__copyright {
  color: var(--text-dark);
  font-family: "Hiragino Kaku Gothic ProN-W3", Helvetica, sans-serif;
  font-size: 12px;
  line-height: 1.7;
}

@media (max-width: 1024px) {
  .footer__container {
    padding: 30px 20px;
  }
  .footer__phone-number {
    font-size: 24px;
  }
  .footer__contact-message {
    font-size: 16px;
  }
}
@media (max-width: 768px) {
  .footer__container {
    padding: 20px 15px;
  }
  .footer__contact-section {
    padding: 15px;
  }
  .footer__phone-number {
    font-size: 20px;
  }
  .footer__contact-message {
    font-size: 14px;
    margin-bottom: 15px;
  }
  .footer__phone-icon {
    width: 40px;
  }
  .footer__office-hours {
    font-size: 14px;
  }
}
/* CSS変数定義 */
:root {
  --base-width: 1440;
  /* デザインカンプ基準幅（単位なし） */
  --min-width: 768px;
  /* 最小サポート幅 */
  --max-width: 1440px;
  /* 最大表示幅 */
}

/* 使用方法:
HTMLではすべての商品アイテムに同じクラス "gallery-component__item" を使用してください。
個別のカラムクラス（__item--col2、__item--col3、__item--col4）は削除してください。

例:
<article class="gallery-component__item">...</article>
<article class="gallery-component__item">...</article>
<article class="gallery-component__item">...</article>
<article class="gallery-component__item">...</article>
<article class="gallery-component__item">...</article> <!-- 5つ目は自動的に2列目へ -->

価格表示について:
価格の数字が増えると左方向に伸びるように設定されています。
例: "3,600" → "36,000" → "360,000" と桁数が増えても、右端の位置は固定され、左に伸びます。

価格ラベルについて:
画面幅が狭くなっても「買取価格」の文字が正しく表示されるよう、最小サイズを保証しています。 */
.gallery-component {
  position: relative;
  width: 100%;
  max-width: var(--max-width);
  background-color: #ffffff;
  overflow: hidden;
  /* 横スクロール防止のため維持 */
  margin: 0 auto;
}

.gallery-component__body {
  position: relative;
  /* absoluteからrelativeに変更 */
  width: 100%;
  margin-top: calc(-2 / var(--base-width) * 100vw);
  /* topをmargin-topに変換 */
}

.gallery-component__overlap {
  position: relative;
  width: calc(1700 / var(--base-width) * 100vw);
  margin-left: calc(-184 / var(--base-width) * 100vw);
  /* leftをmargin-leftに変換 */
}

.gallery-component__main-article {
  position: relative;
  /* absoluteからrelativeに変更 */
  width: calc(1440 / var(--base-width) * 100vw);
  margin-top: calc(139 / var(--base-width) * 100vw);
  margin-left: calc(184 / var(--base-width) * 100vw);
}

.gallery-component__overlap-group {
  position: relative;
  /* absoluteからrelativeに変更 */
  width: 100%;
  margin-top: calc(64 / var(--base-width) * 100vw);
}

.gallery-component__background {
  position: absolute;
  /* 装飾要素のため維持 */
  width: 100%;
  height: calc(1750 / var(--base-width) * 100vw);
  top: 0;
  left: 0;
  background-color: rgba(248, 248, 248, 0.8);
  z-index: 0;
}

.gallery-component__container {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 calc(44 / var(--base-width) * 100vw) calc(19 / var(--base-width) * 100vw) calc(44 / var(--base-width) * 100vw);
  z-index: 1;
  background-color: rgba(248, 248, 248, 0.8);
  /* backgroundより上に配置 */
}

.gallery-component__row {
  position: relative;
  width: calc(1214 / var(--base-width) * 100vw);
  display: grid;
  grid-template-columns: repeat(auto-fill, calc(278 / var(--base-width) * 100vw));
  gap: calc(34 / var(--base-width) * 100vw);
  grid-auto-rows: minmax(calc(390 / var(--base-width) * 100vw), auto);
  padding-top: calc(6 / var(--base-width) * 100vw);
  margin-bottom: calc(80 / var(--base-width) * 100vw);
  /* CTAボタンとの適切な余白 */
}

.gallery-component__item,
.gallery-component__item--col4 {
  position: relative;
  /* absoluteからrelativeに変更 */
  width: calc(278 / var(--base-width) * 100vw);
  min-height: calc(390 / var(--base-width) * 100vw);
  background-color: #ffffff;
}

/* 個別カラムクラスは削除（すべてのアイテムが同じクラスを使用） */
.gallery-component__card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: calc(390 / var(--base-width) * 100vw);
}

.gallery-component__image-wrapper {
  flex: 0 0 auto;
  width: calc(278 / var(--base-width) * 100vw);
  min-height: calc(210 / var(--base-width) * 100vw);
  background-color: #ffffff;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  padding: calc(26 / var(--base-width) * 100vw) calc(21 / var(--base-width) * 100vw) calc(27 / var(--base-width) * 100vw) calc(22 / var(--base-width) * 100vw);
}

.gallery-component__image {
  flex: 0 0 auto;
  width: calc(235 / var(--base-width) * 100vw);
  height: calc(157 / var(--base-width) * 100vw);
  object-fit: contain;
  max-width: 100%;
}

.gallery-component__content {
  flex: 0 0 auto;
  width: calc(278 / var(--base-width) * 100vw);
  min-height: calc(180 / var(--base-width) * 100vw);
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: 1fr auto;
  grid-template-areas: "descriptions descriptions" "price-label price-area";
  background-color: #ffffff;
}

.gallery-component__descriptions {
  position: static;
  grid-area: descriptions;
  width: 100%;
  min-height: calc(115 / var(--base-width) * 100vw);
  background-color: #ffffff;
  display: flex;
  flex-direction: column;
  padding: calc(15 / var(--base-width) * 100vw) calc(15 / var(--base-width) * 100vw) 0 calc(15 / var(--base-width) * 100vw);
}

.gallery-component__brand {
  flex: 0 0 auto;
  max-width: calc(248 / var(--base-width) * 100vw);
  min-height: calc(16 / var(--base-width) * 100vw);
}

.gallery-component__brand-text {
  display: block;
  max-width: calc(88 / var(--base-width) * 100vw);
  margin-top: calc(-1 / var(--base-width) * 100vw);
  font-family: "Hiragino Kaku Gothic Pro-W3", Helvetica;
  font-weight: 400;
  color: #000000;
  font-size: max(12px, 11.6 / var(--base-width) * 100vw);
  /* 最小値保証 */
  letter-spacing: 0;
  line-height: 1.34;
  white-space: normal;
  word-break: keep-all;
}

.gallery-component__category {
  flex: 0 0 auto;
  max-width: calc(146 / var(--base-width) * 100vw);
  margin-top: calc(5 / var(--base-width) * 100vw);
  font-family: "Hiragino Kaku Gothic Pro-W3", Helvetica;
  font-weight: 400;
  color: #000000;
  font-size: max(12px, 12 / var(--base-width) * 100vw);
  letter-spacing: 0;
  line-height: 1.3;
  white-space: normal;
  word-break: keep-all;
}

.gallery-component__product-name {
  flex: 0 0 auto;
  max-width: calc(248 / var(--base-width) * 100vw);
  min-height: calc(42 / var(--base-width) * 100vw);
  margin-top: calc(6.4 / var(--base-width) * 100vw);
}

.gallery-component__product-text {
  display: block;
  max-width: calc(190 / var(--base-width) * 100vw);
  font-family: "Hiragino Kaku Gothic Pro-W3", Helvetica;
  font-weight: 400;
  color: #000000;
  font-size: max(14px, 15.2 / var(--base-width) * 100vw);
  letter-spacing: 0;
  line-height: 1.37;
  word-break: keep-all;
}

.gallery-component__price-area {
  grid-area: price-area;
  display: flex;
  align-items: baseline;
  justify-content: flex-end;
  padding-right: calc(10 / var(--base-width) * 100vw);
  padding-bottom: calc(28 / var(--base-width) * 100vw);
  position: relative;
}

.gallery-component__price-label-wrapper {
  position: static;
  grid-area: price-label;
  width: calc(47 / var(--base-width) * 100vw);
  min-width: 47px;
  height: calc(45 / var(--base-width) * 100vw);
  min-height: 45px;
  margin-left: calc(15 / var(--base-width) * 100vw);
  margin-bottom: calc(28 / var(--base-width) * 100vw);
  align-self: end;
  z-index: 1;
}

.gallery-component__price-label {
  position: relative;
  width: calc(45 / var(--base-width) * 100vw);
  min-width: 45px;
  /* 最小幅を確保 */
  height: calc(45 / var(--base-width) * 100vw);
  min-height: 45px;
  /* 最小高さを確保 */
  background-color: #1ea3d5;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: calc(5 / var(--base-width) * 100vw) calc(8 / var(--base-width) * 100vw) calc(4 / var(--base-width) * 100vw) calc(9 / var(--base-width) * 100vw);
}

.gallery-component__price-label-text {
  flex: 0 0 auto;
  width: auto;
  /* 固定幅から自動幅に変更 */
  min-width: 28px;
  /* 最小幅を確保 */
  font-family: "Roboto", Helvetica;
  font-weight: 700;
  color: #ffffff;
  font-size: max(14px, 14 / var(--base-width) * 100vw);
  letter-spacing: max(-0.5px, -0.56 / var(--base-width) * 100vw);
  /* 最小値を設定 */
  line-height: 1.3;
  text-align: center;
  /* 中央寄せに変更 */
}

.gallery-component__price-value {
  position: static;
  width: auto;
  min-width: calc(97 / var(--base-width) * 100vw);
  font-family: "Roboto", Helvetica;
  font-weight: 700;
  color: #ee0d10;
  font-size: calc(40 / var(--base-width) * 100vw);
  letter-spacing: calc(-1.6 / var(--base-width) * 100vw);
  line-height: 1.3;
  white-space: nowrap;
  text-align: right;
  z-index: 1;
  margin-right: calc(24 / var(--base-width) * 100vw);
}

.gallery-component__currency {
  position: static;
  width: calc(24 / var(--base-width) * 100vw);
  font-family: "Hiragino Kaku Gothic Pro-W3", Helvetica;
  font-weight: 400;
  color: #ee0d10;
  font-size: max(14px, 14 / var(--base-width) * 100vw);
  letter-spacing: 0;
  line-height: 1;
  white-space: nowrap;
  z-index: 1;
  align-self: baseline;
}

.gallery-component__row--second {
  position: relative;
  width: calc(1214 / var(--base-width) * 100vw);
  display: grid;
  grid-template-columns: repeat(auto-fill, calc(278 / var(--base-width) * 100vw));
  gap: calc(34 / var(--base-width) * 100vw);
  grid-auto-rows: minmax(calc(390 / var(--base-width) * 100vw), auto);
  padding-top: calc(6 / var(--base-width) * 100vw);
  margin-bottom: calc(80 / var(--base-width) * 100vw);
}

.gallery-component__row--third {
  position: relative;
  width: calc(1214 / var(--base-width) * 100vw);
  display: grid;
  grid-template-columns: repeat(auto-fill, calc(278 / var(--base-width) * 100vw));
  gap: calc(34 / var(--base-width) * 100vw);
  grid-auto-rows: minmax(calc(390 / var(--base-width) * 100vw), auto);
  padding-top: calc(6 / var(--base-width) * 100vw);
  margin-bottom: calc(80 / var(--base-width) * 100vw);
}

.gallery-component__heading {
  /* position: absolute */
  width: calc(1170 / var(--base-width) * 100vw);
  min-height: calc(186 / var(--base-width) * 100vw);
  top: calc(232 / var(--base-width) * 100vw);
  /* left: 50% */
  /* transform: translateX(-50%) */
  background-image: url(../assets/img/heading-2.png);
  background-size: cover;
  background-position: 50% 50%;
  display: flex;
}

.gallery-component__heading-content {
  position: relative;
  width: calc(986 / var(--base-width) * 100vw);
  min-height: calc(138 / var(--base-width) * 100vw);
  top: calc(77 / var(--base-width) * 100vw);
  left: calc(98 / var(--base-width) * 100vw);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.gallery-component__heading-text {
  flex: 0 0 auto;
  max-width: calc(977 / var(--base-width) * 100vw);
  margin-left: calc(9 / var(--base-width) * 100vw);
  font-family: "Noto Sans CJK JP-Medium", Helvetica;
  font-weight: bold;
  color: #000000;
  font-size: clamp(24px, 36 / var(--base-width) * 100vw, 36px);
  text-align: center;
  letter-spacing: 0;
  line-height: 1.3;
}

.gallery-component__heading-line {
  flex: 0 0 auto;
  width: calc(937 / var(--base-width) * 100vw);
  height: calc(8 / var(--base-width) * 100vw);
  margin-top: calc(23 / var(--base-width) * 100vw);
  background-image: url(../assets/img/1-2.png);
  background-size: 100% 100%;
}

.gallery-component__cta-button {
  position: relative;
  width: calc(420 / var(--base-width) * 100vw);
  min-height: calc(120 / var(--base-width) * 100vw);
  background-color: #ff3f00;
  border-radius: calc(80 / var(--base-width) * 100vw);
  box-shadow: 0px 0px calc(6 / var(--base-width) * 100vw) rgba(52, 52, 52, 0.1607843137);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: calc(23 / var(--base-width) * 100vw) calc(44 / var(--base-width) * 100vw) calc(19 / var(--base-width) * 100vw) calc(44 / var(--base-width) * 100vw);
  text-decoration: none;
  margin-top: calc(100 / var(--base-width) * 100vw);
  margin-bottom: calc(80 / var(--base-width) * 100vw);
  margin-left: auto;
  margin-right: auto;
  /* 下部に配置 */
}

.gallery-component__cta-subtitle {
  flex: 0 0 auto;
  width: calc(180 / var(--base-width) * 100vw);
  font-family: "Hiragino Kaku Gothic ProN-W3", Helvetica;
  font-weight: 400;
  color: #fff001;
  font-size: calc(22 / var(--base-width) * 100vw);
  text-align: center;
  letter-spacing: 0;
  line-height: 1.5;
  white-space: normal;
}

.gallery-component__cta-title {
  flex: 0 0 auto;
  width: calc(182 / var(--base-width) * 100vw);
  margin-top: calc(2 / var(--base-width) * 100vw);
  font-family: "Noto Sans", Helvetica;
  font-weight: 700;
  color: #ffffff;
  font-size: calc(30 / var(--base-width) * 100vw);
  text-align: center;
  letter-spacing: 0;
  line-height: 1.5;
  white-space: normal;
}

.gallery-component__cta-arrow {
  position: absolute;
  /* 装飾要素のため維持 */
  width: calc(12 / var(--base-width) * 100vw);
  height: calc(12 / var(--base-width) * 100vw);
  top: calc(54 / var(--base-width) * 100vw);
  right: calc(32 / var(--base-width) * 100vw);
  border-top-width: calc(3 / var(--base-width) * 100vw);
  border-top-style: solid;
  border-right-width: calc(3 / var(--base-width) * 100vw);
  border-right-style: solid;
  border-color: #ffffff;
  transform: rotate(45deg);
}

/* 行の中のアイテムの継承スタイル */
.gallery-component__row--second .gallery-component__item,
.gallery-component__row--third .gallery-component__item {
  position: relative;
  width: calc(278 / var(--base-width) * 100vw);
  min-height: calc(390 / var(--base-width) * 100vw);
  background-color: #ffffff;
}

/* 未使用要素のCSS */
.gallery-component .img {
  position: absolute;
  width: calc(252 / var(--base-width) * 100vw);
  height: calc(104 / var(--base-width) * 100vw);
  top: calc(141 / var(--base-width) * 100vw);
  left: calc(173 / var(--base-width) * 100vw);
}

/* メディアクエリ: デスクトップ固定値化（1441px以上） */
@media (min-width: 1441px) {
  .gallery-component__container {
    padding: 232px 113px 199px;
  }
  .gallery-component__row,
  .gallery-component__row--second,
  .gallery-component__row--third {
    margin-bottom: 80px;
  }
  .gallery-component__main-article {
    width: 1440px;
    margin-top: 139px;
    margin-left: 184px;
  }
  .gallery-component__heading {
    top: 232px;
  }
  .gallery-component__heading-text {
    font-size: 60px;
    line-height: 78px;
  }
  .gallery-component__price-value {
    font-size: 40px;
    line-height: 52px;
  }
}
/* メディアクエリ: タブレット最適化（1024px以下） */
@media (max-width: 1024px) {
  .gallery-component__row,
  .gallery-component__row--second,
  .gallery-component__row--third {
    grid-template-columns: repeat(auto-fill, minmax(calc(250 / var(--base-width) * 100vw), 1fr));
    column-gap: calc(20 / var(--base-width) * 100vw);
    row-gap: calc(20 / var(--base-width) * 100vw);
    width: 100%;
    margin-bottom: calc(60 / var(--base-width) * 100vw);
  }
  .gallery-component__heading-text {
    font-size: max(36px, 60 / var(--base-width) * 100vw);
  }
  .gallery-component__container {
    padding: calc(200 / var(--base-width) * 100vw) max(20px, 40 / var(--base-width) * 100vw) calc(150 / var(--base-width) * 100vw);
  }
  .gallery-component__content {
    grid-template-columns: auto 1fr;
  }
  .gallery-component__price-area {
    padding-right: calc(8 / var(--base-width) * 100vw);
  }
}
/* メディアクエリ: モバイル最適化（767px以下） */
@media (max-width: 767px) {
  .gallery-component {
    max-width: 100%;
  }
  .gallery-component__body {
    margin-top: 0;
  }
  .gallery-component__overlap {
    width: 100%;
    margin-left: 0;
  }
  .gallery-component__main-article {
    width: 100%;
    margin-top: 0;
    margin-left: 0;
  }
  .gallery-component__overlap-group {
    margin-top: 0;
  }
  .gallery-component__container {
    padding: 40px 16px 60px;
    width: 100%;
  }
  .gallery-component__heading {
    width: 100%;
    min-height: auto;
    padding: 0 16px;
    background-size: contain;
    background-repeat: no-repeat;
    margin-bottom: 40px;
  }
  .gallery-component__heading-content {
    width: 100%;
    top: 0;
    left: 0;
    min-height: auto;
    align-items: center;
  }
  .gallery-component__heading-text {
    font-size: 28px;
    line-height: 1.4;
    text-align: center;
    margin-left: 0;
    max-width: 100%;
  }
  .gallery-component__heading-line {
    width: 100%;
    height: 4px;
    margin-top: 16px;
  }
  .gallery-component__row,
  .gallery-component__row--second,
  .gallery-component__row--third {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding-top: 0;
    margin-bottom: 40px;
  }
  .gallery-component__item,
  .gallery-component__item--col4 {
    width: 100%;
    min-height: auto;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    overflow: hidden;
  }
  .gallery-component__card {
    min-height: auto;
    display: flex;
    flex-direction: column;
  }
  .gallery-component__image-wrapper {
    width: 100%;
    min-height: 200px;
    padding: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #f8f8f8;
  }
  .gallery-component__image {
    width: 100%;
    max-width: 280px;
    height: auto;
    max-height: 160px;
    object-fit: contain;
  }
  /* コンテンツエリアのレイアウト変更 */
  .gallery-component__content {
    width: 100%;
    min-height: auto;
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
    grid-template-areas: "descriptions descriptions" "price-label price-area";
    padding: 0;
    background-color: #ffffff;
  }
  .gallery-component__descriptions {
    grid-area: descriptions;
    width: 100%;
    min-height: auto;
    padding: 20px 20px 16px 20px;
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  .gallery-component__brand {
    max-width: 100%;
    min-height: auto;
  }
  .gallery-component__brand-text {
    font-size: 14px;
    line-height: 1.4;
    max-width: 100%;
    margin-top: 0;
  }
  .gallery-component__category {
    font-size: 14px;
    line-height: 1.4;
    max-width: 100%;
    margin-top: 8px;
  }
  .gallery-component__product-name {
    max-width: 100%;
    min-height: auto;
    margin-top: 8px;
  }
  .gallery-component__product-text {
    font-size: 16px;
    line-height: 1.5;
    max-width: 100%;
    font-weight: 500;
  }
  /* 価格ラベル */
  .gallery-component__price-label-wrapper {
    grid-area: price-label;
    position: static;
    width: 60px;
    min-width: 60px;
    height: 60px;
    min-height: 60px;
    margin: 0 0 20px 20px;
    align-self: center;
  }
  .gallery-component__price-label {
    width: 60px;
    min-width: 60px;
    height: 60px;
    min-height: 60px;
    padding: 8px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .gallery-component__price-label-text {
    font-size: 16px;
    line-height: 1.2;
    letter-spacing: -0.5px;
    font-weight: 700;
    min-width: auto;
    text-align: center;
  }
  /* 価格表示エリア */
  .gallery-component__price-area {
    grid-area: price-area;
    display: flex;
    align-items: baseline;
    padding: 0 20px 20px 16px;
    gap: 2px;
    flex-wrap: wrap-reverse;
    justify-content: flex-end;
    align-content: center;
  }
  .gallery-component__price-value {
    position: static;
    font-size: 36px;
    line-height: 1;
    letter-spacing: -1.5px;
    margin-right: 0;
    min-width: auto;
    font-weight: 700;
    color: #ee0d10;
    white-space: nowrap;
    text-align: left;
  }
  .gallery-component__currency {
    position: static;
    font-size: 18px;
    line-height: 1;
    width: auto;
    font-weight: 700;
    color: #ee0d10;
    white-space: nowrap;
    align-self: baseline;
  }
  /* CTAボタン */
  .gallery-component__cta-button {
    width: calc(100% - 32px);
    max-width: 320px;
    min-height: 80px;
    padding: 20px 32px;
    border-radius: 40px;
    margin: 20px auto 0;
    box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.15);
  }
  .gallery-component__cta-subtitle {
    font-size: 18px;
    line-height: 1.3;
    width: auto;
  }
  .gallery-component__cta-title {
    font-size: 24px;
    line-height: 1.3;
    width: auto;
    margin-top: 4px;
  }
  .gallery-component__cta-arrow {
    width: 10px;
    height: 10px;
    top: 50%;
    transform: translateY(-50%) rotate(45deg);
    right: 24px;
    border-width: 2px;
  }
}
/* 基準値定義 */
:root {
  --base-width: 1440;
  --max-width: 1440px;
}

* {
  box-sizing: border-box;
}

html, body {
  overflow-x: hidden;
  width: 100%;
  margin: 0;
  padding: 0;
}

.header {
  position: relative;
  z-index: 100 !important;
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  background-color: transparent;
}

.header__container {
  width: 100%;
  min-height: calc(82 / var(--base-width) * 100vw);
  background-color: transparent;
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: calc(29 / var(--base-width) * 100vw) calc(78 / var(--base-width) * 100vw) calc(1 / var(--base-width) * 100vw) calc(78 / var(--base-width) * 100vw);
}

.header__logo-wrapper {
  flex: 0 0 auto;
  width: calc(235 / var(--base-width) * 100vw);
  display: flex;
  align-items: center;
}

.header__logo {
  width: 100%;
}

.header__logo-text {
  font-family: "Hiragino Kaku Gothic ProN-W6", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  font-weight: 400;
  color: #41a2c6;
  font-size: calc(31 / var(--base-width) * 100vw);
  line-height: 1.5;
  letter-spacing: 0;
  white-space: nowrap;
}

.hero {
  margin-top: calc(-82 / var(--base-width) * 100vw) !important;
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}

/* デスクトップ（1441px以上） */
@media (min-width: 1441px) {
  .header {
    width: var(--max-width);
  }
  .header__container {
    min-height: 82px;
    padding: 29px 78px 1px 78px;
  }
  .header__logo-wrapper {
    width: 235px;
  }
  .header__logo-text {
    font-size: 31px;
  }
  .hero {
    margin-top: -82px !important;
  }
}
/* タブレット（769px〜1024px） */
@media (min-width: 769px) and (max-width: 1024px) {
  .header {
    height: 76px;
  }
  .header__logo-text {
    font-size: max(24px, 31 / var(--base-width) * 100vw);
  }
  .header__container {
    height: 100%;
    min-height: auto;
    padding: 0 40px;
    display: flex;
    align-items: center;
  }
  .hero {
    margin-top: -76px !important;
  }
}
/* 中間サイズの微調整（1025px〜1440px） */
@media (min-width: 1025px) and (max-width: 1440px) {
  .hero {
    margin-top: calc(-82 / var(--base-width) * 100vw) !important;
  }
}
/* モバイル（768px以下） */
@media (max-width: 768px) {
  .header {
    width: 100%;
    max-width: 100%;
  }
  .header__container {
    min-height: 60px;
    padding: 15px 20px;
  }
  .header__logo-wrapper {
    width: auto;
    max-width: 60%;
  }
  .header__logo-text {
    font-size: 20px;
  }
  .hero {
    margin-top: -60px !important;
  }
}
/* 極小画面（375px以下） */
@media (max-width: 375px) {
  .header__container {
    min-height: 50px;
    padding: 12px 16px;
  }
  .header__logo-wrapper {
    max-width: 70%;
  }
  .header__logo-text {
    font-size: 18px;
  }
  .hero {
    margin-top: -50px !important;
  }
}
:root {
  --base-width: 1440;
  --min-width: 768px;
  --max-width: 1440px;
  --vw-unit: calc(100vw / var(--base-width));
}

.hero {
  position: relative;
  width: 100%;
  min-width: var(--min-width);
  max-width: var(--max-width);
  margin: 0 auto;
  box-sizing: border-box;
  height: auto;
  background-color: #ffffff;
  overflow: hidden;
  display: grid;
  grid-template-columns: [container-start] 1fr [container-end];
  grid-template-rows: [container-start] 1fr [container-end];
}

.hero__body {
  position: relative;
  width: 100vw;
  height: auto;
  margin-top: -0.1388888889vw;
  left: 0;
  display: grid;
  grid-template-columns: [container-start] 1fr [container-end];
  grid-template-rows: [container-start] 1fr [container-end];
}

.hero__overlap {
  position: relative;
  width: 118.0555555556vw;
  height: auto;
  min-height: 47.1527777778vw;
  left: -12.7777777778vw;
  display: grid;
  grid-template-columns: [container-start] 1fr [container-end];
  grid-template-rows: [container-start] 1fr [container-end];
}

.hero__background-image {
  position: absolute;
  width: 118.0555555556vw;
  height: 47.1527777778vw;
  top: 0.1388888889vw;
  left: 0;
}

.hero__content {
  position: relative;
  width: 100vw;
  height: auto;
  margin-top: 9.6527777778vw;
  margin-left: 12.7777777778vw;
  /* padding-bottom: calc(60 / 1440 * 100vw) */
  display: grid;
  grid-template-columns: [container-start] 5vw [content-start] 1fr [container-end];
  grid-template-rows: [container-start] auto [container-end];
}

.hero__cta-button {
  position: absolute;
  width: 29.1666666667vw;
  height: 8.3333333333vw;
  top: 21.1111111111vw;
  left: 5vw;
  background-color: #ff3f00;
  border-radius: 5.5555555556vw;
  box-shadow: 0px 0px 0.4166666667vw rgba(52, 52, 52, 0.1607843137);
  display: grid;
  grid-template-columns: [container-start] 1fr [container-end];
  grid-template-rows: [container-start] 1fr [container-end];
}

.hero__button-label {
  position: absolute;
  width: 12.5vw;
  top: 1.5972222222vw;
  left: 8.3333333333vw;
  font-family: "Hiragino Kaku Gothic ProN-W3", Helvetica;
  font-weight: 400;
  color: #fff001;
  font-size: 1.5277777778vw;
  text-align: center;
  letter-spacing: 0;
  line-height: 1.5;
  white-space: nowrap;
}

.hero__button-text {
  position: absolute;
  width: 12.6388888889vw;
  top: 4.0277777778vw;
  left: 8.2638888889vw;
  font-family: "Noto Sans", Helvetica;
  font-weight: 700;
  color: #ffffff;
  font-size: 2.0833333333vw;
  text-align: center;
  letter-spacing: 0;
  line-height: 1.5;
  white-space: nowrap;
}

.hero__button-arrow {
  position: absolute;
  width: 0.8333333333vw;
  height: 0.8333333333vw;
  top: 3.75vw;
  left: 26.1111111111vw;
  border-top-width: max(1px, 0.2083333333vw);
  border-top-style: solid;
  border-right-width: max(1px, 0.2083333333vw);
  border-right-style: solid;
  border-color: #ffffff;
  transform: rotate(45deg);
}

.hero__text-group {
  position: relative;
  width: 40.8333333333vw;
  height: auto;
  margin-top: -0.8333333333vw;
  margin-left: 5vw;
  margin-bottom: 21.9444444444vw;
  display: grid;
  grid-template-columns: [container-start] 1fr [container-end];
  grid-template-rows: [container-start] 1fr [container-end];
}

.hero__text-container {
  position: relative;
  width: 40.6944444444vw;
  height: auto;
  display: grid;
  grid-template-columns: [container-start] 1fr [container-end];
  grid-template-rows: [container-start] auto [container-end];
}

.hero__heading {
  position: relative;
  width: 35.4861111111vw;
  height: auto;
  top: 0;
  left: 0;
  display: grid;
  grid-template-columns: [container-start] 1fr [container-end];
  grid-template-rows: [container-start] 1fr [container-end];
}

.hero__heading-text {
  position: relative;
  width: 29.1666666667vw;
  margin-top: -0.0694444444vw;
  left: 0;
  font-family: "Inter", Helvetica;
  font-weight: 700;
  color: #151515;
  font-size: 4.1666666667vw;
  letter-spacing: 0;
  line-height: 1.383;
}

.hero__description {
  position: relative;
  width: 40.6944444444vw;
  margin-top: 1.1111111111vw;
  left: 0;
  font-family: "Inter", Helvetica;
  font-weight: 400;
  color: #151515;
  font-size: 1.375vw;
  letter-spacing: 0;
  line-height: 2.02;
}

@media (max-width: 767px) {
  :root {
    --mobile-base-width: 375;
    --mobile-vw-unit: calc(100vw / var(--mobile-base-width));
  }
  .hero {
    min-width: 320px;
    height: auto;
    min-height: auto;
    padding-bottom: 0;
  }
  .hero__body {
    position: relative;
    width: 100%;
    height: auto;
    top: 0;
    margin-top: 0;
  }
  .hero__overlap {
    position: relative;
    width: 100%;
    height: auto;
    min-height: auto;
    left: 0;
    display: flex;
    flex-direction: column;
  }
  .hero__background-image {
    position: relative;
    width: 100%;
    height: auto;
    max-height: 50vh;
    object-fit: cover;
    object-position: center;
    top: 0;
  }
  .hero__content {
    position: relative;
    width: 100%;
    height: auto;
    top: 0;
    left: 0;
    margin: 0;
    padding: 24px 20px;
    display: flex;
    flex-direction: column;
    gap: 32px;
  }
  .hero__text-group {
    position: relative;
    width: 100%;
    height: auto;
    top: 0;
    left: 0;
    margin: 0;
    order: 1;
  }
  .hero__text-container {
    position: relative;
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    gap: 16px;
  }
  .hero__heading {
    position: relative;
    width: 100%;
    height: auto;
    top: 0;
    left: 0;
  }
  .hero__heading-text {
    position: relative;
    width: 100%;
    top: 0;
    left: 0;
    margin-top: 0;
    font-size: clamp(24px, 9.6vw, 36px);
    line-height: 1.2;
  }
  .hero__description {
    position: relative;
    width: 100%;
    top: 0;
    left: 0;
    font-size: clamp(16px, 4.8vw, 18px);
    line-height: 1.6;
    margin-top: 0;
  }
  .hero__cta-button {
    position: relative;
    width: 100%;
    max-width: 320px;
    height: auto;
    min-height: 56px;
    top: 0;
    left: 0;
    order: 2;
    margin: 0 auto;
    padding: 16px 24px;
    border-radius: 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    box-shadow: 0px 2px 8px rgba(52, 52, 52, 0.16);
  }
  .hero__button-label {
    position: relative;
    width: auto;
    top: 0;
    left: 0;
    font-size: clamp(14px, 4.2666666667vw, 16px);
    line-height: 1.4;
  }
  .hero__button-text {
    position: relative;
    width: auto;
    top: 0;
    left: 0;
    font-size: clamp(20px, 6.4vw, 24px);
    line-height: 1.4;
  }
  .hero__button-arrow {
    position: absolute;
    width: 10px;
    height: 10px;
    top: 50%;
    right: 24px;
    left: auto;
    transform: translateY(-50%) rotate(45deg);
    border-top-width: 2px;
    border-right-width: 2px;
  }
}
@media (max-width: 374px) {
  .hero__content {
    padding: 20px 16px;
  }
  .hero__heading-text {
    font-size: 28px;
  }
  .hero__description {
    font-size: 15px;
  }
  .hero__cta-button {
    padding: 14px 20px;
    min-height: 52px;
  }
  .hero__button-label {
    font-size: 14px;
  }
  .hero__button-text {
    font-size: 20px;
  }
}
:root {
  --container-max-width: 1440px;
  --container-padding: clamp(1rem, 4vw, 3rem);
  --news-content-padding: clamp(2rem, 5vw, 4rem);
  --news-item-gap: clamp(1.5rem, 3vw, 2.5rem);
  --news-item-padding-y: clamp(1.25rem, 2vw, 1.625rem);
  --news-date-width: clamp(7.5rem, 15vw, 9.375rem);
  --news-date-margin-right: clamp(1.25rem, 3vw, 2.875rem);
  --news-font-size: clamp(0.875rem, 1.1vw, 1rem);
  --news-line-height: 1.6875;
}

.news {
  position: relative;
  width: 100%;
  max-width: var(--container-max-width);
  margin-inline: auto;
  /* background-color: #ffffff */
  padding: var(--container-padding);
}

.news__body {
  width: 100%;
}

.news__overlap {
  width: 100%;
}

.news__content {
  width: 100%;
  padding-top: var(--news-content-padding);
}

.news__item {
  position: relative;
  width: 100%;
  padding-block: var(--news-item-padding-y);
  margin-bottom: var(--news-item-gap);
  border-bottom: 1px solid #bcbcbc;
  display: flex;
  align-items: flex-start;
  gap: var(--news-date-margin-right);
}
.news__item:last-child {
  margin-bottom: 0;
}

.news__date {
  flex-shrink: 0;
  width: var(--news-date-width);
  margin-top: 0.25rem;
  font-family: "Hiragino Kaku Gothic ProN-W3", Helvetica, sans-serif;
  font-weight: 400;
  color: #2b2b2b;
  font-size: var(--news-font-size);
  letter-spacing: 0;
  line-height: var(--news-line-height);
  white-space: nowrap;
}

.news__text-wrapper {
  flex: 1;
  min-width: 0;
}

.news__text {
  font-family: "Hiragino Kaku Gothic ProN-W3", Helvetica, sans-serif;
  font-weight: 400;
  color: #2b2b2b;
  font-size: var(--news-font-size);
  letter-spacing: 0;
  line-height: var(--news-line-height);
  word-wrap: break-word;
  overflow-wrap: break-word;
}

@media (max-width: 1024px) {
  :root {
    --news-date-width: clamp(6.5rem, 12vw, 8rem);
    --news-date-margin-right: clamp(1rem, 2.5vw, 2rem);
  }
}
@media (max-width: 768px) {
  :root {
    --container-padding: clamp(1rem, 3vw, 2rem);
    --news-content-padding: clamp(1.5rem, 4vw, 3rem);
    --news-item-gap: clamp(1rem, 2.5vw, 2rem);
    --news-item-padding-y: clamp(1rem, 1.5vw, 1.25rem);
  }
  .news__item {
    flex-direction: column;
    gap: 0.625rem;
  }
  .news__date {
    width: auto;
    margin-top: 0;
  }
  .news__text-wrapper {
    width: 100%;
  }
}
@media (max-width: 480px) {
  :root {
    --news-font-size: clamp(0.8125rem, 1vw, 0.875rem);
    --news-line-height: 1.625;
    --container-padding: 1rem;
    --news-content-padding: 1.5rem;
    --news-item-gap: 1rem;
    --news-item-padding-y: 1rem;
  }
}
@media (min-width: 1441px) {
  :root {
    --news-font-size: 1rem;
    --news-date-width: 9.375rem;
    --news-date-margin-right: 2.875rem;
  }
  .news {
    padding-inline: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}
@media (prefers-color-scheme: dark) {
  .news {
    /* background-color: #1a1a1a */
  }
  .news .news__item {
    border-bottom-color: #404040;
  }
  .news .news__date,
  .news .news__text {
    /* color: #e0e0e0 */
  }
}
:root {
  --container-padding: clamp(1rem, 4vw, 3rem);
  --section-padding: clamp(2rem, 5vw, 4rem);
  --color-primary: #436fc0;
  --color-danger: #d90000;
  --color-text: #2b2b2b;
  --color-bg-light: #f8f8f8;
  --color-bg-white: #ffffff;
  --font-primary: "Hiragino Kaku Gothic ProN-W3", Helvetica, sans-serif;
  --font-secondary: "Hiragino Kaku Gothic ProN-W6", Helvetica, sans-serif;
  --font-accent: "Noto Sans JP", Helvetica, sans-serif;
  --space-xs: clamp(0.25rem, 1vw, 0.5rem);
  --space-sm: clamp(0.5rem, 2vw, 1rem);
  --space-md: clamp(1rem, 3vw, 1.5rem);
  --space-lg: clamp(1.5rem, 4vw, 2.5rem);
  --space-xl: clamp(2rem, 5vw, 4rem);
  --content-max-width: 1440px;
  --faq-max-width: 1060px;
  --faq-gap: clamp(1.5rem, 3vw, 2.75rem);
}

.service {
  width: 100%;
  background-color: var(--color-bg-white);
  padding: var(--section-padding) 0;
}

.service__body {
  background-color: var(--color-bg-light);
  max-width: var(--content-max-width);
  margin: 0 auto;
  padding: 0 var(--container-padding);
}

.service__overlap {
  width: 100%;
}

.service__content {
  width: 100%;
}

.service__faq-section {
  padding: var(--space-xl) 0;
}

.service__faq-background {
  padding: var(--space-xl) var(--space-lg);
  border-radius: clamp(0.5rem, 1vw, 1rem);
}

.service__faq-container {
  max-width: var(--faq-max-width);
  margin: 0 auto;
}

.service__faq-wrapper {
  width: 100%;
}

.service__faq-heading {
  font-family: var(--font-primary);
  font-weight: 400;
  color: var(--color-text);
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  text-align: center;
  letter-spacing: 0.05em;
  line-height: 1.25;
  margin: 0 0 var(--space-lg) 0;
}

.service__faq-list {
  display: flex;
  flex-direction: column;
  gap: var(--faq-gap);
}

.service__faq-item {
  position: relative;
  background-color: var(--color-bg-white);
  border-radius: clamp(0.5rem, 1vw, 0.625rem);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  padding: var(--space-md);
  padding-left: calc(clamp(3rem, 8vw, 4rem) + var(--space-md));
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.service__faq-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
}

.service__question-label {
  position: absolute;
  left: var(--space-md);
  top: var(--space-xs);
  width: clamp(3rem, 8vw, 4rem);
  font-family: var(--font-accent);
  font-weight: 700;
  color: var(--color-primary);
  font-size: clamp(1.25rem, 2vw, 1.5rem);
  line-height: 1.8;
  text-align: center;
}

.service__question {
  font-family: var(--font-secondary);
  font-weight: 400;
  color: var(--color-text);
  font-size: clamp(1rem, 1.5vw, 1.125rem);
  line-height: 1.8;
  margin: 0;
  padding-right: var(--space-sm);
  word-break: keep-all;
  overflow-wrap: break-word;
}

.service__answer-label {
  position: absolute;
  left: var(--space-md);
  top: calc(var(--space-xs) + 1.8em + var(--space-sm));
  width: clamp(3rem, 8vw, 4rem);
  font-family: var(--font-primary);
  font-weight: 400;
  color: var(--color-danger);
  font-size: clamp(1.5rem, 2.5vw, 1.75rem);
  line-height: 1.7;
  text-align: center;
}

.service__answer {
  font-family: var(--font-primary);
  font-weight: 400;
  color: var(--color-text);
  font-size: clamp(0.875rem, 1.25vw, 1rem);
  line-height: 1.7;
  margin: var(--space-sm) 0 0 0;
  padding-right: var(--space-sm);
}

@media (max-width: 768px) {
  .service__body {
    padding: 0 var(--space-md);
  }
  .service__faq-heading {
    font-size: clamp(1.25rem, 4vw, 1.75rem);
    margin-bottom: var(--space-md);
  }
  .service__faq-background {
    padding: var(--space-md) var(--space-sm);
    border-radius: 0.5rem;
  }
  .service__faq-item {
    display: block;
    padding: var(--space-md);
  }
  .service__question-label,
  .service__answer-label {
    display: none;
  }
  .service__question {
    padding-right: 0;
    margin-bottom: var(--space-sm);
  }
  .service__question::before {
    content: "Q. ";
    color: var(--color-primary);
    font-weight: 700;
    margin-right: 0.5em;
  }
  .service__answer {
    padding-right: 0;
    margin-top: 0;
  }
  .service__answer::before {
    content: "A. ";
    color: var(--color-danger);
    margin-right: 0.5em;
  }
}
@media (max-width: 480px) {
  .service__body {
    padding: 0 var(--space-md);
  }
  .service__faq-heading {
    font-size: clamp(1.25rem, 4vw, 1.75rem);
    margin-bottom: var(--space-md);
  }
  .service__faq-background {
    padding: var(--space-md) var(--space-sm);
    border-radius: 0.5rem;
  }
  .service__faq-item {
    display: block;
    padding: var(--space-md);
  }
  .service__question-label,
  .service__answer-label {
    display: none;
  }
  .service__question {
    padding-right: 0;
    margin-bottom: var(--space-sm);
  }
  .service__question::before {
    content: "Q. ";
    color: var(--color-primary);
    font-weight: 700;
    margin-right: 0.5em;
  }
  .service__answer {
    padding-right: 0;
    margin-top: 0;
  }
  .service__answer::before {
    content: "A. ";
    color: var(--color-danger);
    margin-right: 0.5em;
  }
}
@media (max-width: 360px) {
  .service__faq-heading {
    font-size: 1.25rem;
  }
  .service__question {
    font-size: 0.9375rem;
  }
  .service__answer {
    font-size: 0.875rem;
  }
}
.timeline-component {
  position: relative;
  width: 100vw;
  height: 48.6111111111vw;
  background-color: #ffffff;
  overflow: hidden;
}

.timeline-component__body {
  position: absolute;
  width: 100vw;
  height: 48.6111111111vw;
  top: 0;
  left: 0;
}

.timeline-component__overlap {
  position: relative;
  width: 118.0555555556vw;
  height: 48.6111111111vw;
  left: -12.7777777778vw;
}

.timeline-component__main-article {
  position: absolute;
  width: 100vw;
  height: 48.6111111111vw;
  top: 3.4722222222vw;
  left: 12.7777777778vw;
}

.timeline-component__container {
  position: absolute;
  width: 73.6111111111vw;
  height: 36.6666666667vw;
  top: 2.5vw;
  left: 13.1944444444vw;
}

.timeline-component__content-wrapper {
  position: absolute;
  width: 69.4444444444vw;
  height: 30.4166666667vw;
  top: -6.875vw;
  left: 2.0833333333vw;
}

.timeline-component__steps-group {
  position: absolute;
  width: 69.4444444444vw;
  height: 30.4166666667vw;
  top: 0;
  left: 0;
}

.timeline-component__heading {
  position: absolute;
  width: 69.4444444444vw;
  height: 6.8055555556vw;
  top: 0;
  left: 0;
}

.timeline-component__heading-text {
  position: absolute;
  width: 26.7361111111vw;
  top: 3.75vw;
  left: 21.3888888889vw;
  font-family: "Hiragino Kaku Gothic ProN-W3", Helvetica;
  font-weight: bold;
  color: #2b2b2b;
  font-size: 2.5vw;
  text-align: center;
  letter-spacing: 0.125vw;
  line-height: 3.125vw;
  white-space: nowrap;
}

.timeline-component__heading-line {
  position: absolute;
  width: 65.0694444444vw;
  height: 0.5555555556vw;
  top: 6.8055555556vw;
  left: 2.0833333333vw;
}

.timeline-component__step-card {
  position: absolute;
  width: 16.3194444444vw;
  height: 21.1805555556vw;
  top: 9.2361111111vw;
  left: 0;
  background-color: #ffffff;
  border-radius: 0.6944444444vw;
  border: 0.1388888889vw solid;
  border-color: #41a2c6;
}

.timeline-component__step-content {
  position: absolute;
  width: 16.0416666667vw;
  height: 17.5vw;
  top: 3.1944444444vw;
  left: 0.1388888889vw;
}

.timeline-component__step-description {
  position: absolute;
  width: 16.0416666667vw;
  height: 10.7638888889vw;
  top: 1.5277777778vw;
  left: 0;
  background-color: #37bcee;
}

.timeline-component__step-title {
  position: absolute;
  width: 13.6111111111vw;
  top: 1.6666666667vw;
  left: 1.25vw;
  font-family: "Hiragino Kaku Gothic ProN-W3", Helvetica;
  font-weight: 400;
  color: #ffffff;
  font-size: 2.0833333333vw;
  text-align: center;
  letter-spacing: 0.15625vw;
  line-height: 2.7777777778vw;
  white-space: nowrap;
}

.timeline-component__step-subtitle {
  position: absolute;
  width: 12.1527777778vw;
  top: 4.8611111111vw;
  left: 1.9444444444vw;
  font-family: "Hiragino Kaku Gothic ProN-W3", Helvetica;
  font-weight: 400;
  color: #2b2b2b;
  font-size: 1.1111111111vw;
  text-align: center;
  letter-spacing: 0.0833333333vw;
  line-height: 1.5277777778vw;
}

.timeline-component__step-number {
  position: absolute;
  width: 2.0138888889vw;
  height: 2.0138888889vw;
  top: 0;
  left: 7.0138888889vw;
  background-color: #239bc7;
}

.timeline-component__step-number-text {
  position: absolute;
  width: 0.7638888889vw;
  height: 1.4583333333vw;
  top: 0.2083333333vw;
  left: 0.625vw;
  font-family: "Hiragino Kaku Gothic ProN-W3", Helvetica;
  font-weight: 400;
  color: #ffffff;
  font-size: 1.3194444444vw;
  text-align: center;
  letter-spacing: 0;
  line-height: 1.3194444444vw;
  white-space: nowrap;
}

.timeline-component__step-icon {
  position: absolute;
  width: 7.8472222222vw;
  height: 7.8472222222vw;
  top: 9.6527777778vw;
  left: 3.9583333333vw;
  overflow: hidden;
}

.timeline-component__step-icon-image {
  position: relative;
  width: 100%;
  height: 100%;
  top: 1.1805555556vw;
  left: 0.4166666667vw;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  max-width: 100%;
}

.timeline-component__step-icon-image1 {
  background-image: url(../assets/img/clip-path-group.png);
}

.timeline-component__step-icon-image2 {
  background-image: url(../assets/img/Group309.svg);
}

.timeline-component__step-icon-image3 {
  background-image: url(../assets/img/アセット7.svg);
}

.timeline-component__step-icon-image4 {
  background-image: url(../assets/img/Group310.svg);
}

.timeline-component__step-label {
  position: absolute;
  width: 2.7777777778vw;
  top: 1.4583333333vw;
  left: 6.8055555556vw;
  font-family: "Hiragino Kaku Gothic ProN-W3", Helvetica;
  font-weight: 400;
  color: #239bc7;
  font-size: 1.0416666667vw;
  letter-spacing: 0;
  line-height: 1.0416666667vw;
  white-space: nowrap;
}

.timeline-component__step-card--second {
  position: absolute;
  left: 17.7083333333vw;
  width: 16.3194444444vw;
  height: 21.1805555556vw;
  top: 9.2361111111vw;
  background-color: #ffffff;
  border-radius: 0.6944444444vw;
  border: 0.1388888889vw solid;
  border-color: #41a2c6;
}

.timeline-component__step-card--second .timeline-component__step-content {
  position: absolute;
  width: 16.0416666667vw;
  height: 17.9861111111vw;
  top: 3.1944444444vw;
  left: 0.1388888889vw;
}

.timeline-component__step-card--second .timeline-component__step-description {
  position: absolute;
  width: 16.0416666667vw;
  height: 10.7638888889vw;
  top: 1.5277777778vw;
  left: 0;
  background-color: #37bcee;
}

.timeline-component__step-card--second .timeline-component__step-title {
  width: 9.0972222222vw;
  top: 1.6666666667vw;
  left: 3.4722222222vw;
  color: #ffffff;
  font-size: 2.0833333333vw;
  letter-spacing: 0.15625vw;
  line-height: 2.7777777778vw;
  position: absolute;
  font-family: "Hiragino Kaku Gothic ProN-W3", Helvetica;
  font-weight: 400;
  text-align: center;
  white-space: nowrap;
}

.timeline-component__step-card--second .timeline-component__step-subtitle {
  position: absolute;
  width: 9.7222222222vw;
  top: 4.8611111111vw;
  left: 3.1944444444vw;
  font-family: "Hiragino Kaku Gothic ProN-W3", Helvetica;
  font-weight: 400;
  color: #2b2b2b;
  font-size: 1.1111111111vw;
  text-align: center;
  letter-spacing: 0.0833333333vw;
  line-height: 1.5277777778vw;
}

.timeline-component__step-card--second .timeline-component__step-number {
  position: absolute;
  width: 2.0138888889vw;
  height: 2.0138888889vw;
  top: 0;
  left: 7.0138888889vw;
  background-color: #239bc7;
}

.timeline-component__step-card--second .timeline-component__step-number-text {
  position: absolute;
  width: 0.7638888889vw;
  height: 1.4583333333vw;
  top: 0.2083333333vw;
  left: 0.625vw;
  font-family: "Hiragino Kaku Gothic ProN-W3", Helvetica;
  font-weight: 400;
  color: #ffffff;
  font-size: 1.3194444444vw;
  text-align: center;
  letter-spacing: 0;
  line-height: 1.3194444444vw;
  white-space: nowrap;
}

.timeline-component__step-card--second .timeline-component__step-label {
  position: absolute;
  width: 2.7777777778vw;
  top: 1.4583333333vw;
  left: 6.8055555556vw;
  font-family: "Hiragino Kaku Gothic ProN-W3", Helvetica;
  font-weight: 400;
  color: #239bc7;
  font-size: 1.0416666667vw;
  letter-spacing: 0;
  line-height: 1.0416666667vw;
  white-space: nowrap;
}

.timeline-component__step-image {
  position: absolute;
  width: 14.3055555556vw;
  height: 5.8333333333vw;
  top: 12.1527777778vw;
  left: 0.9027777778vw;
}

.timeline-component__step-card--third {
  position: absolute;
  left: 35.4166666667vw;
  width: 16.3194444444vw;
  height: 21.1805555556vw;
  top: 9.2361111111vw;
  background-color: #ffffff;
  border-radius: 0.6944444444vw;
  border: 0.1388888889vw solid;
  border-color: #41a2c6;
}

.timeline-component__step-card--third .timeline-component__step-content {
  position: absolute;
  width: 16.0416666667vw;
  height: 12.2916666667vw;
  top: 3.1944444444vw;
  left: 0.1388888889vw;
}

.timeline-component__step-card--third .timeline-component__step-description {
  position: absolute;
  width: 16.0416666667vw;
  height: 10.7638888889vw;
  top: 1.5277777778vw;
  left: 0;
  background-color: #37bcee;
}

.timeline-component__step-card--third .timeline-component__step-title {
  width: 9.0972222222vw;
  top: 1.6666666667vw;
  left: 3.4722222222vw;
  color: #ffffff;
  font-size: 2.0833333333vw;
  letter-spacing: 0.15625vw;
  line-height: 2.7777777778vw;
  position: absolute;
  font-family: "Hiragino Kaku Gothic ProN-W3", Helvetica;
  font-weight: 400;
  text-align: center;
  white-space: nowrap;
}

.timeline-component__step-card--third .timeline-component__step-subtitle {
  position: absolute;
  width: 12.7083333333vw;
  top: 4.8611111111vw;
  left: 1.6666666667vw;
  font-family: "Hiragino Kaku Gothic ProN-W3", Helvetica;
  font-weight: 400;
  color: #2b2b2b;
  font-size: 1.1111111111vw;
  text-align: center;
  letter-spacing: 0.0833333333vw;
  line-height: 1.5277777778vw;
}

.timeline-component__step-card--third .timeline-component__step-number {
  position: absolute;
  width: 2.0138888889vw;
  height: 2.0138888889vw;
  top: 0;
  left: 7.0138888889vw;
  background-color: #239bc7;
}

.timeline-component__step-card--third .timeline-component__step-number-text {
  position: absolute;
  width: 0.7638888889vw;
  height: 1.4583333333vw;
  top: 0.2083333333vw;
  left: 0.625vw;
  font-family: "Hiragino Kaku Gothic ProN-W3", Helvetica;
  font-weight: 400;
  color: #ffffff;
  font-size: 1.3194444444vw;
  text-align: center;
  letter-spacing: 0;
  line-height: 1.3194444444vw;
  white-space: nowrap;
}

.timeline-component__step-card--third .timeline-component__step-label {
  position: absolute;
  width: 2.7777777778vw;
  top: 1.4583333333vw;
  left: 6.8055555556vw;
  font-family: "Hiragino Kaku Gothic ProN-W3", Helvetica;
  font-weight: 400;
  color: #239bc7;
  font-size: 1.0416666667vw;
  letter-spacing: 0;
  line-height: 1.0416666667vw;
  white-space: nowrap;
}

.timeline-component__step-image--bottom {
  position: absolute;
  width: 9.1666666667vw;
  height: 5.4861111111vw;
  top: 15.4861111111vw;
  left: 3.5416666667vw;
}

.timeline-component__step-card--fourth {
  position: absolute;
  left: 53.125vw;
  width: 16.3194444444vw;
  height: 21.1805555556vw;
  top: 9.2361111111vw;
  background-color: #ffffff;
  border-radius: 0.6944444444vw;
  border: 0.1388888889vw solid;
  border-color: #41a2c6;
}

.timeline-component__step-card--fourth .timeline-component__step-content {
  position: absolute;
  width: 16.0416666667vw;
  height: 12.2916666667vw;
  top: 3.1944444444vw;
  left: 0.1388888889vw;
}

.timeline-component__step-card--fourth .timeline-component__step-description {
  position: absolute;
  width: 16.0416666667vw;
  height: 10.7638888889vw;
  top: 1.5277777778vw;
  left: 0;
  background-color: #37bcee;
}

.timeline-component__step-card--fourth .timeline-component__step-title {
  position: absolute;
  width: 12.2222222222vw;
  top: 1.6666666667vw;
  left: 1.9444444444vw;
  font-family: "Hiragino Kaku Gothic ProN-W3", Helvetica;
  font-weight: 400;
  color: #ffffff;
  font-size: 2.0833333333vw;
  text-align: center;
  letter-spacing: 0.15625vw;
  line-height: 2.7777777778vw;
  white-space: nowrap;
}

.timeline-component__step-subtitle--narrow {
  position: absolute;
  width: 8.4722222222vw;
  top: 4.8611111111vw;
  left: 3.8194444444vw;
  font-family: "Hiragino Kaku Gothic ProN-W3", Helvetica;
  font-weight: 400;
  color: #2b2b2b;
  font-size: 1.1111111111vw;
  text-align: center;
  letter-spacing: 0.0833333333vw;
  line-height: 1.5277777778vw;
}

.timeline-component__step-card--fourth .timeline-component__step-number {
  position: absolute;
  width: 2.0138888889vw;
  height: 2.0138888889vw;
  top: 0;
  left: 7.0138888889vw;
  background-color: #239bc7;
}

.timeline-component__step-number-text--small {
  position: absolute;
  width: 0.7638888889vw;
  height: 1.4583333333vw;
  top: 0.2083333333vw;
  left: 0.625vw;
  font-family: "Hiragino Kaku Gothic ProN-W3", Helvetica;
  font-weight: 400;
  color: #ffffff;
  font-size: 1.2152777778vw;
  text-align: center;
  letter-spacing: 0;
  line-height: 1.3194444444vw;
  white-space: nowrap;
}

.timeline-component__step-card--fourth .timeline-component__step-label {
  position: absolute;
  width: 2.7777777778vw;
  top: 1.4583333333vw;
  left: 6.8055555556vw;
  font-family: "Hiragino Kaku Gothic ProN-W3", Helvetica;
  font-weight: 400;
  color: #239bc7;
  font-size: 1.0416666667vw;
  letter-spacing: 0;
  line-height: 1.0416666667vw;
  white-space: nowrap;
}

.timeline-component__step-image--bottom-large {
  position: absolute;
  width: 14.375vw;
  height: 5.3472222222vw;
  top: 15.4861111111vw;
  left: 0.7638888889vw;
}

.timeline-component__arrow {
  position: absolute;
  top: 15.6944444444vw;
  left: 15.9027777778vw;
  width: 1.5277777778vw;
  height: 7.0833333333vw;
}

.timeline-component__arrow--second {
  position: absolute;
  top: 15.3472222222vw;
  left: 33.6111111111vw;
  width: 1.5277777778vw;
  height: 7.0833333333vw;
}

.timeline-component__arrow--third {
  position: absolute;
  top: 15vw;
  left: 51.3194444444vw;
  width: 1.5277777778vw;
  height: 7.0833333333vw;
}

.timeline-component__cta-button {
  position: absolute;
  width: 29.1666666667vw;
  height: 8.3333333333vw;
  top: 28.3333333333vw;
  left: 22.2222222222vw;
  background-color: #ff3f00;
  border-radius: 5.5555555556vw;
  box-shadow: 0px 0px 0.4166666667vw rgba(52, 52, 52, 0.1607843137);
}

.timeline-component__cta-subtitle {
  position: absolute;
  width: 12.5vw;
  top: 1.5972222222vw;
  left: 8.3333333333vw;
  font-family: "Hiragino Kaku Gothic ProN-W3", Helvetica;
  font-weight: 400;
  color: #fff001;
  font-size: 1.5277777778vw;
  text-align: center;
  letter-spacing: 0;
  line-height: 2.2916666667vw;
  white-space: nowrap;
}

.timeline-component__cta-title {
  position: absolute;
  width: 12.6388888889vw;
  top: 4.0277777778vw;
  left: 8.2638888889vw;
  font-family: "Noto Sans", Helvetica;
  font-weight: 700;
  color: #ffffff;
  font-size: 2.0833333333vw;
  text-align: center;
  letter-spacing: 0;
  line-height: 3.125vw;
  white-space: nowrap;
}

.timeline-component__cta-arrow {
  position: absolute;
  width: 0.8333333333vw;
  height: 0.8333333333vw;
  top: 3.75vw;
  left: 26.1111111111vw;
  border-top-width: 0.2083333333vw;
  border-top-style: solid;
  border-right-width: 0.2083333333vw;
  border-right-style: solid;
  border-color: #ffffff;
  transform: rotate(45deg);
}

/* 未使用要素のCSS */
.timeline-component .link {
  position: relative;
  height: 27.0833333333vw;
}

.timeline-component .div {
  position: absolute;
  width: 19.3055555556vw;
  height: 14.5833333333vw;
  top: 0;
  left: 0;
  background-color: #ffffff;
}

.timeline-component .img {
  position: absolute;
  width: 17.5vw;
  height: 7.2222222222vw;
  top: 9.7916666667vw;
  left: 12.0138888889vw;
}

@media (max-width: 767px) {
  .timeline-component {
    width: 100%;
    height: auto;
    overflow: visible;
  }
  .timeline-component__body {
    position: relative;
    width: 100%;
    height: auto;
    top: 0;
  }
  .timeline-component__overlap {
    position: relative;
    width: 100%;
    height: auto;
    left: 0;
  }
  .timeline-component__main-article {
    position: relative;
    width: 100%;
    height: auto;
    top: 0;
    left: 0;
  }
  .timeline-component__container {
    position: relative;
    width: 100%;
    height: auto;
    top: 0;
    left: 0;
    padding: 20px;
    box-sizing: border-box;
  }
  .timeline-component__content-wrapper {
    position: relative;
    width: 100%;
    height: auto;
    top: 0;
    left: 0;
  }
  .timeline-component__steps-group {
    position: relative;
    width: 100%;
    height: auto;
  }
  .timeline-component__heading {
    position: relative;
    width: 100%;
    height: auto;
    /* margin-bottom: 30px */
  }
  .timeline-component__heading-text {
    position: relative;
    width: 100%;
    top: 0;
    left: 0;
    font-size: 28px;
    letter-spacing: 1.4px;
    line-height: 36px;
    margin: 0;
  }
  .timeline-component__heading-line {
    position: relative;
    width: 100%;
    height: 4px;
    top: 0px;
    left: 0;
    margin-top: 0;
  }
  .timeline-component__step-card,
  .timeline-component__step-card--second,
  .timeline-component__step-card--third,
  .timeline-component__step-card--fourth {
    position: relative;
    width: 100%;
    max-width: 350px;
    height: auto;
    margin: 0 auto 25px auto;
    top: 0;
    left: 0;
    box-sizing: border-box;
  }
  .timeline-component__step-card .timeline-component__step-content,
  .timeline-component__step-card--second .timeline-component__step-content,
  .timeline-component__step-card--third .timeline-component__step-content,
  .timeline-component__step-card--fourth .timeline-component__step-content {
    position: relative;
    width: 100%;
    height: auto;
    top: 0;
    left: 0;
    padding: 20px 10px;
    box-sizing: border-box;
  }
  .timeline-component__step-card .timeline-component__step-description,
  .timeline-component__step-card--second .timeline-component__step-description,
  .timeline-component__step-card--third .timeline-component__step-description,
  .timeline-component__step-card--fourth .timeline-component__step-description {
    position: relative;
    width: 100%;
    height: auto;
    top: 0;
    left: 0;
    padding: 20px;
    margin-top: 29px;
    box-sizing: border-box;
  }
  .timeline-component__step-card .timeline-component__step-title,
  .timeline-component__step-card--second .timeline-component__step-title,
  .timeline-component__step-card--third .timeline-component__step-title,
  .timeline-component__step-card--fourth .timeline-component__step-title {
    position: relative;
    width: 100%;
    top: 0;
    left: 0;
    font-size: 26px;
    letter-spacing: 1.95px;
    line-height: 35px;
  }
  .timeline-component__step-card .timeline-component__step-subtitle,
  .timeline-component__step-card--second .timeline-component__step-subtitle,
  .timeline-component__step-card--third .timeline-component__step-subtitle,
  .timeline-component__step-card--fourth .timeline-component__step-subtitle--narrow {
    position: relative;
    width: 100%;
    top: 0;
    left: 0;
    font-size: 14px;
    letter-spacing: 1px;
    line-height: 20px;
    margin-top: 10px;
  }
  .timeline-component__step-card .timeline-component__step-number,
  .timeline-component__step-card--second .timeline-component__step-number,
  .timeline-component__step-card--third .timeline-component__step-number,
  .timeline-component__step-card--fourth .timeline-component__step-number {
    position: absolute;
    width: 29px;
    height: 29px;
    top: 30px;
    left: 50%;
    transform: translateX(-50%);
    background-color: #239bc7;
  }
  .timeline-component__step-card .timeline-component__step-number-text,
  .timeline-component__step-card--second .timeline-component__step-number-text,
  .timeline-component__step-card--third .timeline-component__step-number-text {
    position: absolute;
    width: 11px;
    height: 21px;
    top: 3px;
    left: 9px;
    font-size: 19px;
    line-height: 19px;
  }
  .timeline-component__step-card--fourth .timeline-component__step-number-text--small {
    position: absolute;
    width: 11px;
    height: 21px;
    top: 3px;
    left: 9px;
    font-size: 17.5px;
    line-height: 19px;
  }
  .timeline-component__step-card .timeline-component__step-label,
  .timeline-component__step-card--second .timeline-component__step-label,
  .timeline-component__step-card--third .timeline-component__step-label,
  .timeline-component__step-card--fourth .timeline-component__step-label {
    position: absolute;
    top: 15px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 14px;
    width: auto;
  }
  .timeline-component__step-icon {
    position: relative;
    width: 200px;
    max-width: 100%;
    height: 200px;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    margin-top: 20px;
  }
  .timeline-component__step-icon-image {
    position: relative;
    width: 100%;
    height: 100%;
    top: 10px;
    left: -10px;
  }
  .timeline-component__step-image,
  .timeline-component__step-image--bottom,
  .timeline-component__step-image--bottom-large {
    position: relative;
    width: 70%;
    height: auto;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    margin: 20px 0 10px 0;
  }
  .timeline-component__arrow,
  .timeline-component__arrow--second,
  .timeline-component__arrow--third {
    display: none;
  }
  .timeline-component__cta-button {
    position: relative;
    width: 90%;
    max-width: 320px;
    height: 100px;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    margin: 40px 0 20px 0;
    background-color: #ff3f00;
    border-radius: 50px;
    box-shadow: 0px 0px 6px rgba(52, 52, 52, 0.1607843137);
    display: block;
  }
  .timeline-component__cta-subtitle {
    position: absolute;
    width: 100%;
    top: 20px;
    left: 0;
    font-size: 18px;
    text-align: center;
    letter-spacing: 0;
    line-height: 27px;
  }
  .timeline-component__cta-title {
    position: absolute;
    width: 100%;
    top: 50px;
    left: 0;
    font-size: 26px;
    text-align: center;
    letter-spacing: 0;
    line-height: 38px;
  }
  .timeline-component__cta-arrow {
    position: absolute;
    width: 10px;
    height: 10px;
    top: 45px;
    right: 30px;
    left: auto;
    border-top-width: 2px;
    border-right-width: 2px;
  }
}

/*# sourceMappingURL=style.css.map */