@charset "UTF-8";
/*! destyle.css v4.0.1 | MIT License | https://github.com/nicolas-cusan/destyle.css */
/* Reset box-model and set borders */
/* ============================================ */
*,
::before,
::after {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  border-style: solid;
  border-width: 0;
  min-width: 0;
}

/* Document */
/* ============================================ */
/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 * 3. Remove gray overlay on links for iOS.
 */
html {
  line-height: 1.15; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
  -webkit-tap-highlight-color: transparent; /* 3*/
}

/* Sections */
/* ============================================ */
/**
 * Remove the margin in all browsers.
 */
body {
  margin: 0;
}

/**
 * Render the `main` element consistently in IE.
 */
main {
  display: block;
}

/* Vertical rhythm */
/* ============================================ */
p,
table,
blockquote,
address,
pre,
iframe,
form,
figure,
dl {
  margin: 0;
}

/* Headings */
/* ============================================ */
h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-weight: inherit;
  margin: 0;
}

/* Lists (enumeration) */
/* ============================================ */
ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Lists (definition) */
/* ============================================ */
dt {
  font-weight: bold;
}

dd {
  margin-left: 0;
}

/* Grouping content */
/* ============================================ */
/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */
hr {
  -webkit-box-sizing: content-box;
          box-sizing: content-box; /* 1 */
  height: 0; /* 1 */
  overflow: visible; /* 2 */
  border-top-width: 1px;
  margin: 0;
  clear: both;
  color: inherit;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
pre {
  font-family: monospace, monospace; /* 1 */
  font-size: inherit; /* 2 */
}

address {
  font-style: inherit;
}

/* Text-level semantics */
/* ============================================ */
/**
 * Remove the gray background on active links in IE 10.
 */
a {
  background-color: transparent;
  text-decoration: none;
  color: inherit;
}

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

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */
b,
strong {
  font-weight: bolder;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
code,
kbd,
samp {
  font-family: monospace, monospace; /* 1 */
  font-size: inherit; /* 2 */
}

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

/**
 * 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: -0.25em;
}

sup {
  top: -0.5em;
}

/* Replaced content */
/* ============================================ */
/**
 * Prevent vertical alignment issues.
 */
svg,
img,
embed,
object,
iframe {
  vertical-align: bottom;
}

/* Forms */
/* ============================================ */
/**
 * Reset form fields to make them styleable.
 * 1. Make form elements stylable across systems iOS especially.
 * 2. Inherit text-transform from parent.
 */
button,
input,
optgroup,
select,
textarea {
  -webkit-appearance: none; /* 1 */
  -moz-appearance: none;
       appearance: none;
  vertical-align: middle;
  color: inherit;
  font: inherit;
  background: transparent;
  padding: 0;
  margin: 0;
  border-radius: 0;
  text-align: inherit;
  text-transform: inherit; /* 2 */
}

/**
 * Correct cursors for clickable elements.
 */
button,
[type=button],
[type=reset],
[type=submit] {
  cursor: pointer;
}

button:disabled,
[type=button]:disabled,
[type=reset]:disabled,
[type=submit]:disabled {
  cursor: default;
}

/**
 * Improve outlines for Firefox and unify style with input elements & buttons.
 */
:-moz-focusring {
  outline: auto;
}

select:disabled {
  opacity: inherit;
}

/**
 * Remove padding
 */
option {
  padding: 0;
}

/**
 * Reset to invisible
 */
fieldset {
  margin: 0;
  padding: 0;
  min-width: 0;
}

legend {
  padding: 0;
}

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

/**
 * Remove the default vertical scrollbar in IE 10+.
 */
textarea {
  overflow: auto;
}

/**
 * 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;
}

/**
 * Correct the outline style in Safari.
 */
[type=search] {
  outline-offset: -2px; /* 1 */
}

/**
 * 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. Fix font inheritance.
 */
::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}

/**
 * Fix appearance for Firefox
 */
[type=number] {
  -moz-appearance: textfield;
}

/**
 * Clickable labels
 */
label[for] {
  cursor: pointer;
}

/* Interactive */
/* ============================================ */
/*
 * Add the correct display in Edge, IE 10+, and Firefox.
 */
details {
  display: block;
}

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

/*
 * Remove outline for editable content.
 */
[contenteditable]:focus {
  outline: auto;
}

/* Tables */
/* ============================================ */
/**
1. Correct table border color inheritance in all Chrome and Safari.
*/
table {
  border-color: inherit; /* 1 */
  border-collapse: collapse;
}

caption {
  text-align: left;
}

td,
th {
  vertical-align: middle;
  padding: 0;
}

th {
  text-align: left;
  font-weight: bold;
}

@font-face {
  font-family: "Inter";
  src: url(/fonts/Inter-Regular.otf) format(OpenType);
  font-weight: 400;
  font-display: swap;
  font-style: normal;
}
@font-face {
  font-family: "Inter";
  src: url(/fonts/Inter-Medium.otf) format(OpenType);
  font-weight: 500;
  font-display: swap;
  font-style: normal;
}
@font-face {
  font-family: "Inter";
  src: url(/fonts/Inter-SemiBold.otf) format(OpenType);
  font-weight: 600;
  font-display: swap;
  font-style: normal;
}
:root {
  --c-blue01: #3241DE;
  --c-black01: #464646;
  --c-white01: #ffffff;
  --c-white02: #f9f9f9;
  --c-gray01: #f1f1f1;
  --c-gray02: #d9d9d9;
  --c-gray03: #8d8d8d;
  --tran-opacity: opacity .7s ease;
  --tran-all: all .3s ease;
  --header-height: 95.63px;
  --side-padding: 146px;
}
@media (min-width: 1441px) {
  :root {
    --header-height: 118.17px;
  }
}
@media (max-width: 767px) {
  :root {
    --header-height: 67.89px;
    --side-padding: 50px;
  }
}
@media (max-width: 430px) {
  :root {
    --header-height: 74px;
    --side-padding: 25px;
  }
}

/* ------------------------------------------------
  common
------------------------------------------------ */
.main-inner {
  position: relative;
  padding-top: var(--header-height);
  padding-inline: 10.6881405564vw;
}
@media (min-width: 1441px) {
  .main-inner {
    padding-inline: 10.1318528799vw;
  }
}
@media (max-width: 767px) {
  .main-inner {
    padding-inline: var(--side-padding);
  }
}
@media (max-width: 430px) {
  .main-inner {
    padding-inline: var(--side-padding);
  }
}

.main-second {
  position: relative;
}

.side-line-l {
  display: inline-block;
  position: absolute;
  top: 0;
  left: 10.6881405564vw;
  width: 1px;
  height: 100%;
  background-color: var(--c-blue01);
  z-index: 10;
}
@media (min-width: 1441px) {
  .side-line-l {
    left: 10.1318528799vw;
  }
}
@media (max-width: 767px) {
  .side-line-l {
    left: var(--side-padding);
  }
}

.side-line-r {
  display: inline-block;
  position: absolute;
  top: 0;
  right: 0;
  width: 1px;
  height: 200%;
  background-color: var(--c-blue01);
  z-index: 20;
}

.sec-title {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  gap: 1.4641288433vw;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  color: var(--c-blue01);
  font-size: 2.635431918vw;
  font-weight: 700;
  letter-spacing: 0.05rem;
  line-height: 0.889;
  margin-bottom: 50px;
}
@media (min-width: 1441px) {
  .sec-title {
    gap: 1.387925052vw;
    font-size: 2.4982650937vw;
  }
}
@media (max-width: 767px) {
  .sec-title {
    gap: 3.6505867014vw;
    font-size: 7.0404172099vw;
    margin-bottom: 5.7366362451vw;
  }
}
@media (max-width: 430px) {
  .sec-title {
    gap: 3.7333333333vw;
    font-size: 7.2vw;
    margin-bottom: 5.8666666667vw;
  }
}

.sec-subtitle {
  color: var(--c-blue01);
  font-size: 1.0248901903vw;
  font-weight: 400;
  letter-spacing: 0.05rem;
  line-height: 1.428;
}
@media (min-width: 1441px) {
  .sec-subtitle {
    font-size: 0.9715475364vw;
  }
}
@media (max-width: 767px) {
  .sec-subtitle {
    font-size: 3.1290743155vw;
  }
}
@media (max-width: 430px) {
  .sec-subtitle {
    font-size: 3.2vw;
  }
}

/* ------------------------------------------------
  mv
------------------------------------------------ */
.mv-wrap {
  position: relative;
  width: 100%;
  height: calc(100svh - var(--header-height));
  margin-bottom: 80px;
}
@media (max-width: 767px) {
  .mv-wrap {
    height: auto;
    margin-top: 60px;
    margin-bottom: 50px;
  }
}
@media (max-width: 430px) {
  .mv-wrap {
    margin-top: 30px;
    margin-bottom: 25px;
  }
}

.mv-inner {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 9.5168374817vw;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  position: relative;
  width: 100%;
  height: 100%;
  margin-left: 5.4172767204vw;
}
@media (min-width: 1441px) {
  .mv-inner {
    gap: 9.0215128383vw;
    margin-left: 5.1353226926vw;
  }
}
@media (max-width: 767px) {
  .mv-inner {
    -webkit-box-orient: vertical;
    -webkit-box-direction: reverse;
    -webkit-flex-direction: column-reverse;
        -ms-flex-direction: column-reverse;
            flex-direction: column-reverse;
    -webkit-box-pack: end;
    -webkit-justify-content: flex-end;
        -ms-flex-pack: end;
            justify-content: flex-end;
    gap: 5.2151238592vw;
    -webkit-box-align: start;
    -webkit-align-items: flex-start;
        -ms-flex-align: start;
            align-items: flex-start;
    padding-bottom: 39.3741851369vw;
  }
}
@media (max-width: 430px) {
  .mv-inner {
    gap: 5.3333333333vw;
    padding-bottom: 40.2666666667vw;
  }
}
.mv-inner::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: -30svw;
  width: 150svw;
  height: 1px;
  background-color: var(--c-blue01);
}

.mv-copy {
  color: var(--c-black01);
  font-size: 2.4158125915vw;
  font-weight: 500;
  line-height: 2.138;
}
@media (min-width: 1441px) {
  .mv-copy {
    font-size: 2.2900763359vw;
  }
}
@media (max-width: 767px) {
  .mv-copy {
    font-size: 3.9113428944vw;
  }
}
@media (max-width: 430px) {
  .mv-copy {
    font-size: 4vw;
  }
}

.mv {
  max-width: 42.3133235725vw;
}
@media (min-width: 1441px) {
  .mv {
    max-width: 40.1110340042vw;
  }
}
@media (max-width: 767px) {
  .mv {
    max-width: 100%;
    padding-right: var(--side-padding);
  }
}
.mv img {
  width: 100%;
}

.scroll {
  position: absolute;
  bottom: 4.5387994143vw;
  left: 1.8301610542vw;
  color: var(--c-blue01);
  font-size: 1.2445095168vw;
  letter-spacing: 0.05rem;
  -webkit-writing-mode: vertical-lr;
      -ms-writing-mode: tb-lr;
          writing-mode: vertical-lr;
}
@media (min-width: 1441px) {
  .scroll {
    bottom: 4.3025676613vw;
    left: 1.7349063151vw;
    font-size: 1.1797362942vw;
  }
}
@media (max-width: 767px) {
  .scroll {
    font-size: 3.6505867014vw;
    bottom: 7.8226857888vw;
    left: calc((var(--side-padding)) - 7px);
    line-height: 0.8;
  }
}
@media (max-width: 430px) {
  .scroll {
    font-size: 3.7333333333vw;
    bottom: 8vw;
  }
}

/* ------------------------------------------------
  concept
------------------------------------------------ */
.concept {
  position: relative;
  padding-bottom: 5.8565153734vw;
  padding-inline: 5.4172767204vw;
}
@media (min-width: 1441px) {
  .concept {
    padding-bottom: 5.5517002082vw;
    padding-inline: 5.1353226926vw;
  }
}
@media (max-width: 767px) {
  .concept {
    padding-bottom: 18.2529335072vw;
    padding-inline: var(--side-padding);
  }
}
.concept::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100svw;
  height: 1px;
  background-color: var(--c-blue01);
}

.concept-inner {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: start;
  -webkit-justify-content: flex-start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  gap: 9.1508052709vw;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
}
@media (min-width: 1441px) {
  .concept-inner {
    gap: 8.6745315753vw;
  }
}
@media (max-width: 767px) {
  .concept-inner {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: 4.6936114733vw;
    -webkit-box-align: start;
    -webkit-align-items: flex-start;
        -ms-flex-align: start;
            align-items: flex-start;
  }
}

.concept-img-wrap {
  max-width: 21.9619326501vw;
}
@media (min-width: 1441px) {
  .concept-img-wrap {
    max-width: 20.8188757807vw;
  }
}
@media (max-width: 767px) {
  .concept-img-wrap {
    max-width: 55.2803129074vw;
  }
}

.concept-img {
  width: 100%;
}

.concept-copy {
  color: var(--c-black01);
  font-size: 2.196193265vw;
  letter-spacing: 0.1rem;
  line-height: 1.866;
}
@media (min-width: 1441px) {
  .concept-copy {
    font-size: 2.0818875781vw;
  }
}
@media (max-width: 767px) {
  .concept-copy {
    font-size: 3.6505867014vw;
  }
}

/* ------------------------------------------------
  works
------------------------------------------------ */
.works {
  position: relative;
  padding-block: 5.8565153734vw 7.3206442167vw;
  padding-inline: 5.4172767204vw;
}
@media (min-width: 1441px) {
  .works {
    padding-block: 5.5517002082vw 6.9396252602vw;
    padding-inline: 5.1353226926vw;
  }
}
@media (max-width: 767px) {
  .works {
    padding-block: 6.518904824vw 9.1264667536vw;
    padding-inline: var(--side-padding);
  }
}
.works::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100svw;
  height: 1px;
  background-color: var(--c-blue01);
}

.works-ct {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: start;
  -webkit-justify-content: flex-start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  gap: 3.6603221083vw;
  -webkit-box-align: stretch;
  -webkit-align-items: stretch;
      -ms-flex-align: stretch;
          align-items: stretch;
}
@media (min-width: 1441px) {
  .works-ct {
    gap: 3.4698126301vw;
  }
}
@media (max-width: 767px) {
  .works-ct {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: 13.037809648vw;
    -webkit-box-align: center;
    -webkit-align-items: center;
        -ms-flex-align: center;
            align-items: center;
  }
}
@media (max-width: 430px) {
  .works-ct {
    gap: 13.3333333333vw;
  }
}

.works-ct__item {
  width: calc((100% - 5.4904831625vw) / 3);
}
@media (min-width: 1441px) {
  .works-ct__item {
    width: calc((100% - 5.2047189452vw) / 3);
  }
}
@media (max-width: 767px) {
  .works-ct__item {
    max-width: 68.0573663625vw;
    width: 100%;
  }
}

.works-ct__img-wrap {
  width: 100%;
  border: 1px solid var(--c-white02);
  margin-bottom: 1.4641288433vw;
}
@media (min-width: 1441px) {
  .works-ct__img-wrap {
    margin-bottom: 1.387925052vw;
  }
}
@media (max-width: 767px) {
  .works-ct__img-wrap {
    margin-bottom: 3.9113428944vw;
  }
}

.works-ct-img {
  width: 100%;
}

.works-modal__button-wrap {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: start;
  -webkit-justify-content: flex-start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  max-width: 12.0790629575vw;
  width: 100%;
  margin-left: auto;
}
@media (min-width: 1441px) {
  .works-modal__button-wrap {
    max-width: 11.4503816794vw;
  }
}
@media (max-width: 767px) {
  .works-modal__button-wrap {
    max-width: 31.8122555411vw;
  }
}

.link-button {
  display: inline-block;
  position: relative;
  color: var(--c-white01);
  font-size: 1.0248901903vw;
  font-weight: 400;
  letter-spacing: 0.05rem;
  line-height: 1;
  width: 100%;
  background-color: var(--c-blue01);
  border-radius: 100vmax;
  padding-block: 0.878477306vw;
  padding-left: 1.9765739385vw;
  overflow: hidden;
  -webkit-transition: var(--tran-all);
  transition: var(--tran-all);
}
@media (min-width: 1441px) {
  .link-button {
    font-size: 0.9715475364vw;
    padding-block: 0.8327550312vw;
    padding-left: 1.8736988203vw;
  }
}
@media (max-width: 767px) {
  .link-button {
    font-size: 3.1290743155vw;
    padding-block: 1.8252933507vw;
    padding-left: 2.6075619296vw;
  }
}
@media (max-width: 430px) {
  .link-button {
    font-size: 3.2vw;
    padding-block: 1.8666666667vw;
    padding-left: 2.6666666667vw;
  }
}
.link-button--contact {
  padding-left: 1.4641288433vw;
}
@media (min-width: 1441px) {
  .link-button--contact {
    padding-left: 1.387925052vw;
  }
}
@media (max-width: 767px) {
  .link-button--contact {
    font-size: 2.3468057366vw;
    padding-block: 2.0860495437vw;
    padding-left: 4.1825293351vw;
  }
}
@media (max-width: 430px) {
  .link-button--contact {
    font-size: 2.4vw;
    padding-block: 2.1333333333vw;
    padding-left: 4.2773333333vw;
  }
}
.link-button::before {
  content: "";
  position: absolute;
  top: 50%;
  right: 4px;
  width: 2.0497803807vw;
  height: 2.0497803807vw;
  background-color: var(--c-white01);
  border-radius: 100vmax;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
}
@media (min-width: 1441px) {
  .link-button::before {
    width: 1.9430950729vw;
    height: 1.9430950729vw;
  }
}
@media (max-width: 767px) {
  .link-button::before {
    width: 5.6166883963vw;
    height: 5.6166883963vw;
  }
}
.link-button::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 0.8052708638vw;
  max-width: 1.1376281113vw;
  width: 100%;
  height: 100%;
  aspect-ratio: 15.54/8;
  background: url(/img/icon-arrow.svg) no-repeat;
  background-position: center;
  background-size: contain;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
}
@media (min-width: 1441px) {
  .link-button::after {
    right: 0.7633587786vw;
    max-width: 1.0784177654vw;
  }
}
@media (max-width: 767px) {
  .link-button::after {
    right: 1.629726206vw;
    max-width: 3.0117340287vw;
  }
}
@media (max-width: 430px) {
  .link-button::after {
    right: 2.1333333333vw;
  }
}
.link-button .link-button__label {
  display: inline-block;
  will-change: transform, opacity;
}
.link-button:hover .link-button__label, .link-button:focus-visible .link-button__label {
  -webkit-animation: labelLoop 0.55s ease both;
          animation: labelLoop 0.55s ease both;
}
.link-button:hover::after, .link-button:focus-visible::after {
  -webkit-animation: arrowLoop 0.55s ease both;
          animation: arrowLoop 0.55s ease both;
}
.link-button::after {
  will-change: transform, opacity;
  -webkit-transform: translate3d(0, -50%, 0);
          transform: translate3d(0, -50%, 0);
}

/* 「view more」：上に消える → 下から戻る */
@-webkit-keyframes labelLoop {
  0% {
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
    opacity: 1;
  }
  45% {
    -webkit-transform: translate3d(0, -140%, 0);
            transform: translate3d(0, -140%, 0);
    opacity: 0;
  }
  46% {
    -webkit-transform: translate3d(0, 140%, 0);
            transform: translate3d(0, 140%, 0);
    opacity: 0;
  }
  100% {
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}
@keyframes labelLoop {
  0% {
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
    opacity: 1;
  }
  45% {
    -webkit-transform: translate3d(0, -140%, 0);
            transform: translate3d(0, -140%, 0);
    opacity: 0;
  }
  46% {
    -webkit-transform: translate3d(0, 140%, 0);
            transform: translate3d(0, 140%, 0);
    opacity: 0;
  }
  100% {
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}
/* 矢印：右へ移動して消える → 左から入って元位置へ */
@-webkit-keyframes arrowLoop {
  0% {
    -webkit-transform: translate3d(0, -50%, 0);
            transform: translate3d(0, -50%, 0);
    opacity: 1;
  }
  45% {
    -webkit-transform: translate3d(12px, -50%, 0);
            transform: translate3d(12px, -50%, 0);
    opacity: 0;
  }
  46% {
    -webkit-transform: translate3d(-12px, -50%, 0);
            transform: translate3d(-12px, -50%, 0);
    opacity: 0;
  }
  100% {
    -webkit-transform: translate3d(0, -50%, 0);
            transform: translate3d(0, -50%, 0);
    opacity: 1;
  }
}
@keyframes arrowLoop {
  0% {
    -webkit-transform: translate3d(0, -50%, 0);
            transform: translate3d(0, -50%, 0);
    opacity: 1;
  }
  45% {
    -webkit-transform: translate3d(12px, -50%, 0);
            transform: translate3d(12px, -50%, 0);
    opacity: 0;
  }
  46% {
    -webkit-transform: translate3d(-12px, -50%, 0);
            transform: translate3d(-12px, -50%, 0);
    opacity: 0;
  }
  100% {
    -webkit-transform: translate3d(0, -50%, 0);
            transform: translate3d(0, -50%, 0);
    opacity: 1;
  }
}
.js-works-modal {
  display: none;
  position: fixed;
  inset: 0;
  width: 100%;
  min-height: 100svh;
  height: 100%;
  padding: 8.78477306vw 4.39238653vw;
  z-index: 5000;
  overflow-y: auto;
}
@media (min-width: 1441px) {
  .js-works-modal {
    padding: 8.3275503123vw 4.1637751561vw;
  }
}
@media (max-width: 767px) {
  .js-works-modal {
    padding-inline: var(--side-padding);
  }
}

.works-modal__inner {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  position: relative;
  max-width: 70.6442166911vw;
  width: 100%;
  margin: auto;
}
@media (min-width: 1441px) {
  .works-modal__inner {
    max-width: 66.9673837613vw;
  }
}
@media (max-width: 767px) {
  .works-modal__inner {
    max-width: 100%;
  }
}

.works-modal__ct {
  position: relative;
  width: 100%;
  background-color: var(--c-white01);
  padding-block: 4.7584187408vw 0;
  z-index: 100;
  overflow: hidden;
}
@media (min-width: 1441px) {
  .works-modal__ct {
    padding-block: 4.5107564192vw 0;
  }
}

.works-modal-title {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: nowrap;
      -ms-flex-wrap: nowrap;
          flex-wrap: nowrap;
  -webkit-box-pack: start;
  -webkit-justify-content: flex-start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  gap: 15px;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  position: relative;
  color: var(--c-blue01);
  font-size: 1.9765739385vw;
  font-weight: 600;
  letter-spacing: 0.02rem;
  line-height: 1.185;
  white-space: nowrap;
  padding-left: 5.1244509517vw;
}
@media (min-width: 1441px) {
  .works-modal-title {
    font-size: 1.8736988203vw;
    padding-left: 4.8577376822vw;
  }
}
@media (max-width: 767px) {
  .works-modal-title {
    font-size: 3.1290743155vw;
  }
}
@media (max-width: 430px) {
  .works-modal-title {
    font-size: 4vw;
  }
}
.works-modal-title::after {
  content: "";
  display: block;
  width: 100%;
  height: 1px;
  background-color: var(--c-blue01);
}

.works-modal-close-button {
  display: block;
  position: relative;
  width: 4.7584187408vw;
  height: 4.7584187408vw;
  background-color: var(--c-gray01);
  margin-left: auto;
  cursor: pointer;
  z-index: 20;
}
@media (min-width: 1441px) {
  .works-modal-close-button {
    width: 4.5107564192vw;
    height: 4.5107564192vw;
  }
}
@media (max-width: 767px) {
  .works-modal-close-button {
    width: 8.4745762712vw;
    height: 8.4745762712vw;
  }
}
@media (max-width: 430px) {
  .works-modal-close-button {
    width: 17.3333333333vw;
    height: 17.3333333333vw;
  }
}
.works-modal-close-button span {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 4.0263543192vw;
  height: 1px;
  background-color: var(--c-blue01);
}
@media (min-width: 1441px) {
  .works-modal-close-button span {
    width: 3.8167938931vw;
  }
}
@media (max-width: 767px) {
  .works-modal-close-button span {
    width: 7.1707953064vw;
  }
}
@media (max-width: 430px) {
  .works-modal-close-button span {
    width: 14.6666666667vw;
  }
}
.works-modal-close-button span:nth-of-type(1) {
  -webkit-transform: translate(-50%, -50%) rotate(45deg);
          transform: translate(-50%, -50%) rotate(45deg);
}
.works-modal-close-button span:nth-of-type(2) {
  -webkit-transform: translate(-50%, -50%) rotate(-45deg);
          transform: translate(-50%, -50%) rotate(-45deg);
}

.works-modal__main {
  position: relative;
  background-color: var(--c-white01);
  padding-inline: 5.1244509517vw;
  z-index: 20;
}
@media (min-width: 1441px) {
  .works-modal__main {
    padding-inline: 4.8577376822vw;
  }
}
@media (max-width: 767px) {
  .works-modal__main {
    padding-bottom: 10.4302477184vw;
    padding-inline: 9.1264667536vw;
  }
}
@media (max-width: 430px) {
  .works-modal__main {
    padding-bottom: 21.3333333333vw;
    padding-inline: 5.3333333333vw;
  }
}
.works-modal__main::after {
  content: "";
  position: absolute;
  top: -1.1713030747vw;
  right: 5.1244509517vw;
  width: 1px;
  height: 102%;
  background-color: var(--c-blue01);
  z-index: 20;
}
@media (min-width: 1441px) {
  .works-modal__main::after {
    top: -1.1103400416vw;
    right: 4.8577376822vw;
  }
}
@media (max-width: 767px) {
  .works-modal__main::after {
    display: none;
  }
}

.works-modal__main-ct {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: nowrap;
      -ms-flex-wrap: nowrap;
          flex-wrap: nowrap;
  -webkit-box-pack: start;
  -webkit-justify-content: flex-start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  gap: 3.6603221083vw;
  -webkit-box-align: stretch;
  -webkit-align-items: stretch;
      -ms-flex-align: stretch;
          align-items: stretch;
  padding-top: 2.196193265vw;
}
@media (min-width: 1441px) {
  .works-modal__main-ct {
    gap: 3.4698126301vw;
    padding-top: 2.0818875781vw;
  }
}
@media (max-width: 767px) {
  .works-modal__main-ct {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: 3.9113428944vw;
    padding-top: 3.9113428944vw;
  }
}
@media (max-width: 430px) {
  .works-modal__main-ct {
    gap: 8vw;
    padding-top: 8vw;
  }
}

.works-modal__img {
  -webkit-flex-shrink: 0;
      -ms-flex-negative: 0;
          flex-shrink: 0;
  max-width: 29.1361639824vw;
  margin-bottom: 10.6149341142vw;
}
@media (min-width: 1441px) {
  .works-modal__img {
    max-width: 27.6197085357vw;
    margin-bottom: 10.0624566273vw;
  }
}
@media (max-width: 767px) {
  .works-modal__img {
    max-width: 100%;
    max-height: 52.1512385919vw;
    margin-bottom: 0;
    overflow-y: auto;
  }
}
.works-modal__img img {
  width: 100%;
  height: auto;
}
@media (max-width: 767px) {
  .works-modal__img img {
    height: 100%;
  }
}

.works-modal__detail {
  max-width: 24.5973645681vw;
  margin-right: 3.2210834553vw;
}
@media (min-width: 1441px) {
  .works-modal__detail {
    max-width: 23.3171408744vw;
    margin-right: 3.0534351145vw;
  }
}
@media (max-width: 767px) {
  .works-modal__detail {
    max-width: 100%;
    margin-right: 0;
  }
}

.works-modal__detail-item {
  margin-bottom: 2.5622254758vw;
}
@media (min-width: 1441px) {
  .works-modal__detail-item {
    margin-bottom: 2.4288688411vw;
  }
}
@media (max-width: 767px) {
  .works-modal__detail-item {
    margin-bottom: 4.5632333768vw;
  }
}
@media (max-width: 430px) {
  .works-modal__detail-item {
    margin-bottom: 0.0933333333;
  }
}

.works-modal__detail-title {
  display: inline-block;
  color: var(--c-white01);
  font-size: 1.0980966325vw;
  font-weight: 500;
  letter-spacing: 0.02rem;
  line-height: 1.333;
  background-color: var(--c-blue01);
  border-radius: 4px 4px 0 4px;
  margin-bottom: 1.0980966325vw;
  padding-block: 3px;
  padding-inline: 7px 12px;
}
@media (min-width: 1441px) {
  .works-modal__detail-title {
    font-size: 1.040943789vw;
    margin-bottom: 1.040943789vw;
  }
}
@media (max-width: 767px) {
  .works-modal__detail-title {
    font-size: 1.9556714472vw;
    margin-bottom: 1.9556714472vw;
  }
}
@media (max-width: 430px) {
  .works-modal__detail-title {
    font-size: 4vw;
    margin-bottom: 4vw;
  }
}

.works-modal__list-item {
  position: relative;
  color: var(--c-black01);
  font-size: 1.0980966325vw;
  font-weight: 500;
  letter-spacing: 0.02rem;
  line-height: 1.5;
  margin-left: 0.75em;
  padding-left: 0.8em;
}
@media (min-width: 1441px) {
  .works-modal__list-item {
    font-size: 1.0980966325vw;
  }
}
@media (max-width: 767px) {
  .works-modal__list-item {
    font-size: 1.9556714472vw;
  }
}
@media (max-width: 430px) {
  .works-modal__list-item {
    font-size: 4vw;
  }
}
.works-modal__list-item::before {
  content: "";
  position: absolute;
  top: 0.5em;
  left: 0;
  width: 0.5124450952vw;
  height: 0.5124450952vw;
  background-color: var(--c-blue01);
  border-radius: 100vmax;
}
@media (min-width: 1441px) {
  .works-modal__list-item::before {
    width: 0.4857737682vw;
    height: 0.4857737682vw;
  }
}
@media (max-width: 767px) {
  .works-modal__list-item::before {
    width: 0.9126466754vw;
    height: 0.9126466754vw;
  }
}
@media (max-width: 430px) {
  .works-modal__list-item::before {
    width: 1.8666666667vw;
    height: 1.8666666667vw;
  }
}

.works-modal-text {
  color: var(--c-black01);
  font-size: 1.0980966325vw;
  font-weight: 500;
  letter-spacing: 0.02rem;
  line-height: 1.5;
  margin-left: 0.75em;
}
@media (min-width: 1441px) {
  .works-modal-text {
    font-size: 1.040943789vw;
  }
}
@media (max-width: 767px) {
  .works-modal-text {
    font-size: 1.9556714472vw;
  }
}
@media (max-width: 430px) {
  .works-modal-text {
    font-size: 4vw;
  }
}
.works-modal-text--date {
  margin-bottom: 1.8301610542vw;
}
@media (min-width: 1441px) {
  .works-modal-text--date {
    font-size: 1.040943789vw;
    margin-bottom: 1.7349063151vw;
  }
}
@media (max-width: 767px) {
  .works-modal-text--date {
    font-size: 1.9556714472vw;
    margin-bottom: 3.259452412vw;
  }
}
@media (max-width: 430px) {
  .works-modal-text--date {
    font-size: 4vw;
    margin-bottom: 6.6666666667vw;
  }
}

.works-modal-link {
  position: relative;
  color: #464646;
  border-bottom: 1px solid var(--c-blue01);
  padding-bottom: 0.2em;
  -webkit-transition: var(--tran-opacity);
  transition: var(--tran-opacity);
}
.works-modal-link:focus, .works-modal-link:hover {
  opacity: 0.8;
}

.works-modal__desc {
  margin-left: 0.75em;
  margin-bottom: 1.8301610542vw;
}
@media (min-width: 1441px) {
  .works-modal__desc {
    margin-bottom: 1.7349063151vw;
  }
}
@media (max-width: 767px) {
  .works-modal__desc {
    margin-bottom: 3.259452412vw;
  }
}
@media (max-width: 430px) {
  .works-modal__desc {
    margin-bottom: 6.6666666667vw;
  }
}
.works-modal__desc dt {
  position: relative;
  color: var(--c-black01);
  font-size: 1.0980966325vw;
  font-weight: 500;
  letter-spacing: 0.02rem;
  line-height: 1.5;
  padding-left: 0.8em;
}
@media (min-width: 1441px) {
  .works-modal__desc dt {
    font-size: 1.0980966325vw;
  }
}
@media (max-width: 767px) {
  .works-modal__desc dt {
    font-size: 1.9556714472vw;
  }
}
@media (max-width: 430px) {
  .works-modal__desc dt {
    font-size: 4vw;
  }
}
.works-modal__desc dt::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 0.5124450952vw;
  height: 0.5124450952vw;
  background-color: var(--c-blue01);
  border-radius: 100vmax;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
}
@media (min-width: 1441px) {
  .works-modal__desc dt::before {
    width: 0.4857737682vw;
    height: 0.4857737682vw;
  }
}
@media (max-width: 767px) {
  .works-modal__desc dt::before {
    width: 0.9126466754vw;
    height: 0.9126466754vw;
  }
}
@media (max-width: 430px) {
  .works-modal__desc dt::before {
    width: 1.8666666667vw;
    height: 1.8666666667vw;
  }
}
.works-modal__desc dd {
  color: var(--c-black01);
  font-size: 1.0980966325vw;
  font-weight: 500;
  letter-spacing: 0.02rem;
  line-height: 1.5;
  padding-left: 0.8em;
}
@media (min-width: 1441px) {
  .works-modal__desc dd {
    font-size: 1.040943789vw;
  }
}
@media (max-width: 767px) {
  .works-modal__desc dd {
    font-size: 1.9556714472vw;
  }
}
@media (max-width: 430px) {
  .works-modal__desc dd {
    font-size: 4vw;
  }
}

.works-modal-close-button-wrap {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: start;
  -webkit-justify-content: flex-start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  max-width: 9.224011713vw;
  width: 100%;
  margin-top: 6.7349926794vw;
}
@media (min-width: 1441px) {
  .works-modal-close-button-wrap {
    max-width: 8.7439278279vw;
    margin-top: 6.3844552394vw;
  }
}
@media (max-width: 767px) {
  .works-modal-close-button-wrap {
    max-width: 27.6401564537vw;
    margin-top: 11.9947848761vw;
  }
}
@media (max-width: 430px) {
  .works-modal-close-button-wrap {
    max-width: 26.6666666667vw;
    margin-top: 20.8vw;
  }
}

.works-modal-bg {
  display: block;
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(141, 141, 141, 0.75);
  margin: auto;
  z-index: 10;
}

/* ------------------------------------------------
  about
------------------------------------------------ */
.about {
  position: relative;
  padding-block: 5.8565153734vw 7.3206442167vw;
  padding-inline: 5.4172767204vw;
}
@media (min-width: 1441px) {
  .about {
    padding-block: 5.5517002082vw 6.9396252602vw;
    padding-inline: 5.1353226926vw;
  }
}
@media (max-width: 767px) {
  .about {
    padding-inline: var(--side-padding);
  }
}
.about::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: -10.6881405564vw;
  width: calc(100% + 10.6881405564vw);
  height: 1px;
  background-color: var(--c-blue01);
}
@media (min-width: 1441px) {
  .about::after {
    left: -10.1318528799vw;
    width: calc(100% + 10.1318528799vw);
  }
}

.about-first {
  margin-bottom: 8.78477306vw;
}
@media (min-width: 1441px) {
  .about-first {
    margin-bottom: 8.3275503123vw;
  }
}

.about-first__ct {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: start;
  -webkit-justify-content: flex-start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  gap: 9.2972181552vw;
  -webkit-box-align: stretch;
  -webkit-align-items: stretch;
      -ms-flex-align: stretch;
          align-items: stretch;
}
@media (min-width: 1441px) {
  .about-first__ct {
    gap: 8.8133240805vw;
  }
}
@media (max-width: 767px) {
  .about-first__ct {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: 6.518904824vw;
  }
}

.about-first__img {
  -webkit-flex-shrink: 0;
      -ms-flex-negative: 0;
          flex-shrink: 0;
  max-width: 23.0600292826vw;
}
@media (min-width: 1441px) {
  .about-first__img {
    max-width: 21.8598195697vw;
  }
}
@media (max-width: 767px) {
  .about-first__img {
    max-width: 55.3455019557vw;
  }
}
.about-first__img img {
  width: 100%;
}

.about-first__desc {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: start;
  -webkit-justify-content: flex-start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  gap: 2.7086383602vw;
  -webkit-box-align: stretch;
  -webkit-align-items: stretch;
      -ms-flex-align: stretch;
          align-items: stretch;
  margin-bottom: 20px;
}
@media (min-width: 1441px) {
  .about-first__desc {
    gap: 2.5676613463vw;
  }
}
@media (max-width: 767px) {
  .about-first__desc {
    display: block;
    margin-bottom: 6.518904824vw;
  }
}
@media (max-width: 430px) {
  .about-first__desc {
    margin-bottom: 6.6666666667vw;
  }
}
.about-first__desc dt {
  display: inline-block;
  -webkit-flex-shrink: 0;
      -ms-flex-negative: 0;
          flex-shrink: 0;
  color: var(--c-white01);
  font-size: 1.0980966325vw;
  font-weight: 500;
  letter-spacing: 0.1rem;
  line-height: 1.33;
  height: 100%;
  background-color: var(--c-blue01);
  border-radius: 4px 4px 0px 4px;
  padding-block: 3px 2px;
  padding-inline: 7px 12px;
}
@media (min-width: 1441px) {
  .about-first__desc dt {
    font-size: 1.040943789vw;
  }
}
@media (max-width: 767px) {
  .about-first__desc dt {
    font-size: 3.6505867014vw;
    border-radius: 8px 8px 0 8px;
    margin-bottom: 2.6075619296vw;
    padding-block: 0.5215123859vw 0.6258148631vw;
    padding-inline: 1.8252933507vw 3.6505867014vw;
  }
}
@media (max-width: 430px) {
  .about-first__desc dt {
    font-size: 3.7333333333vw;
    border-radius: 4px 4px 0px 4px;
    margin-bottom: 2.6666666667vw;
    padding-block: 0.5333333333vw 0.64vw;
    padding-inline: 1.8666666667vw 3.7333333333vw;
  }
}
.about-first__desc dd {
  color: var(--c-black01);
  font-size: 1.1713030747vw;
  font-weight: 500;
  letter-spacing: 0.02rem;
  line-height: 1.625;
}
@media (min-width: 1441px) {
  .about-first__desc dd {
    font-size: 1.1103400416vw;
  }
}
@media (max-width: 767px) {
  .about-first__desc dd {
    font-size: 3.3898305085vw;
  }
}
@media (max-width: 430px) {
  .about-first__desc dd {
    font-size: 3.4666666667vw;
  }
}

.about-skill {
  position: relative;
  max-width: 65.8857979502vw;
  width: 100%;
  background-color: var(--c-white02);
  border-radius: 10px 10px 0 10px;
  margin: 0 auto;
  padding-block: 5.710102489vw 6.9546120059vw;
  padding-inline: 4.2459736457vw;
}
@media (min-width: 1441px) {
  .about-skill {
    max-width: 62.4566273421vw;
    padding-block: 5.412907703vw 6.5926439972vw;
    padding-inline: 4.0249826509vw;
  }
}
@media (max-width: 767px) {
  .about-skill {
    max-width: 100%;
    border-radius: 20px 20px 0 20px;
    padding-block: 10.1694915254vw 12.3859191656vw;
    padding-inline: 7.5619295958vw;
  }
}
@media (max-width: 430px) {
  .about-skill {
    border-radius: 10px 10px 0 10px;
    padding-block: 10.4vw 12.6666666667vw;
    padding-inline: 5.6vw;
  }
}

.about-skill-title {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: nowrap;
      -ms-flex-wrap: nowrap;
          flex-wrap: nowrap;
  -webkit-box-pack: start;
  -webkit-justify-content: flex-start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  gap: 1.0980966325vw;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  position: absolute;
  top: -0.5em;
  color: var(--c-blue01);
  font-size: 2.3426061493vw;
  font-weight: 600;
  letter-spacing: 0.02rem;
}
@media (min-width: 1441px) {
  .about-skill-title {
    gap: 1.040943789vw;
    font-size: 2.2206800833vw;
  }
}
@media (max-width: 767px) {
  .about-skill-title {
    gap: 5.2151238592vw;
    font-size: 7.3011734029vw;
  }
}
@media (max-width: 430px) {
  .about-skill-title {
    gap: 5.3333333333vw;
    font-size: 7.4666666667vw;
  }
}

.about-skill-subtitle {
  font-size: 1.0248901903vw;
}
@media (min-width: 1441px) {
  .about-skill-subtitle {
    font-size: 0.9715475364vw;
  }
}
@media (max-width: 767px) {
  .about-skill-subtitle {
    font-size: 3.1290743155vw;
  }
}
@media (max-width: 430px) {
  .about-skill-subtitle {
    font-size: 3.2vw;
  }
}

.about-skill__desc {
  margin-bottom: 40px;
}
@media (max-width: 767px) {
  .about-skill__desc {
    margin-bottom: 6.518904824vw;
  }
}
@media (max-width: 430px) {
  .about-skill__desc {
    margin-bottom: 6.6666666667vw;
  }
}
.about-skill__desc dt {
  position: relative;
  color: var(--c-blue01);
  font-size: 1.6105417277vw;
  letter-spacing: 0.02rem;
  margin-bottom: 15px;
  padding-left: 1.25rem;
}
@media (min-width: 1441px) {
  .about-skill__desc dt {
    font-size: 1.5267175573vw;
  }
}
@media (max-width: 767px) {
  .about-skill__desc dt {
    font-size: 4.4328552803vw;
    margin-bottom: 2.6075619296vw;
    margin-left: 0.5rem;
    padding-left: 2rem;
  }
}
@media (max-width: 430px) {
  .about-skill__desc dt {
    font-size: 4.5333333333vw;
    margin-bottom: 2.6666666667vw;
    margin-left: 0.25rem;
    padding-left: 1rem;
  }
}
.about-skill__desc dt::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 0.7320644217vw;
  height: 0.7320644217vw;
  background-color: var(--c-gray02);
  border-radius: 100vmax;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
}
@media (min-width: 1441px) {
  .about-skill__desc dt::before {
    width: 0.693962526vw;
    height: 0.693962526vw;
  }
}
@media (max-width: 767px) {
  .about-skill__desc dt::before {
    width: 2.0860495437vw;
    height: 2.0860495437vw;
  }
}
@media (max-width: 430px) {
  .about-skill__desc dt::before {
    width: 2.1333333333vw;
    height: 2.1333333333vw;
  }
}
.about-skill__desc dd {
  color: var(--c-black01);
  font-size: 1.1713030747vw;
  font-weight: 500;
  letter-spacing: 0.05rem;
  line-height: 1.75;
  padding-left: 1.25rem;
}
@media (min-width: 1441px) {
  .about-skill__desc dd {
    font-size: 1.1103400416vw;
  }
}
@media (max-width: 767px) {
  .about-skill__desc dd {
    font-size: 3.3898305085vw;
    margin-left: 0.5rem;
    padding-left: 2rem;
  }
}
@media (max-width: 430px) {
  .about-skill__desc dd {
    font-size: 3.4666666667vw;
    margin-left: 0.25rem;
    padding-left: 1rem;
  }
}

/* ------------------------------------------------
  contact
------------------------------------------------ */
.contact {
  position: relative;
  background-color: var(--c-white01);
  padding-block: 5.8565153734vw 10.980966325vw;
  padding-inline: 5.4172767204vw;
  z-index: 15;
}
@media (min-width: 1441px) {
  .contact {
    padding-block: 5.5517002082vw 10.4094378904vw;
    padding-inline: 5.1353226926vw;
  }
}
@media (max-width: 767px) {
  .contact {
    padding-block: 8.6049543677vw 28.1616688396vw;
    padding-inline: var(--side-padding);
  }
}
@media (max-width: 430px) {
  .contact {
    padding-block: 8.8vw 28.8vw;
  }
}
.contact::before {
  content: "";
  position: absolute;
  top: 0;
  left: -1px;
  width: 3px;
  height: 100%;
  background-color: var(--c-white01);
}

.contact-ct {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: start;
  -webkit-justify-content: flex-start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  row-gap: 0.7320644217vw;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  max-width: 43.9238653001vw;
  width: 100%;
  background-color: var(--c-white02);
  border-radius: 30px 30px 0 30px;
  margin: 0 auto;
  padding-block: 3.513909224vw 4.5387994143vw;
  padding-inline: 1.4641288433vw;
}
@media (min-width: 1441px) {
  .contact-ct {
    row-gap: 0.693962526vw;
    max-width: 41.6377515614vw;
    padding-block: 3.3310201249vw 4.3025676613vw;
    padding-inline: 1.387925052vw;
  }
}
@media (max-width: 767px) {
  .contact-ct {
    row-gap: 4.3963494133vw;
    max-width: 100%;
    padding-block: 8.6049543677vw 11.4263363755vw;
    padding-inline: 14.6023468057vw;
  }
}
@media (max-width: 430px) {
  .contact-ct {
    row-gap: 4.496vw;
    max-width: 100%;
    padding-block: 8.8vw 11.6853333333vw;
    padding-inline: 14.9333333333vw;
  }
}

.contact-title {
  color: var(--c-blue01);
  font-size: 3.513909224vw;
  font-weight: 600;
  letter-spacing: 0.05rem;
  line-height: 1.3;
}
@media (min-width: 1441px) {
  .contact-title {
    font-size: 3.3310201249vw;
  }
}
@media (max-width: 767px) {
  .contact-title {
    font-size: 9.3872229465vw;
  }
}
@media (max-width: 430px) {
  .contact-title {
    font-size: 9.6vw;
  }
}

.contact-link-wrap {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: start;
  -webkit-justify-content: flex-start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  max-width: 14.6412884334vw;
  width: 100%;
  margin: 0 auto;
}
@media (min-width: 1441px) {
  .contact-link-wrap {
    max-width: 13.8792505205vw;
  }
}
@media (max-width: 767px) {
  .contact-link-wrap {
    max-width: 32.073011734vw;
  }
}
@media (max-width: 430px) {
  .contact-link-wrap {
    max-width: 33.6vw;
  }
}/*# sourceMappingURL=contents.css.map */