@charset "UTF-8";
:root {
  --font-color: #595757;
  --list-bg-hover: #fafafa;
  --main-color: #14569b;
  --sub-color: #1c95b0;
  --sub-color-light: #e9f5f7;
  --accent-color: #f5a500;
  --base-color: #e8f4f7;
  --green-color: #449b19;
  --green-color-light: rgb(68 155 25 / 20%);
  --error-color: #ea5550;
  --content-width: 1200px;
  --content-width-wide: 1400px;
  --content-innner-width: 980px;
}

html,
body,
div,
span,
object,
iframe,
button,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
abbr,
address,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
samp,
small,
sub,
sup,
var,
b,
i,
a,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
dialog,
figure,
footer,
header,
hgroup,
menu,
nav,
section,
time,
mark,
audio,
video {
  margin: 0;
  padding: 0;
  font-weight: inherit;
  border: 0;
  outline: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent;
  word-break: normal;
  line-break: strict;
  word-wrap: normal;
  word-break: normal;
  line-height: inherit;
}

textarea,
input[type=button],
input[type=text],
input[type=image],
input[type=submit] {
  -webkit-appearance: none;
  word-break: normal;
}

input[type=submit],
input[type=button] {
  border-radius: 0;
  -webkit-box-sizing: content-box;
  -webkit-appearance: button;
  -moz-appearance: button;
  appearance: button;
  border: none;
  box-sizing: border-box;
  cursor: pointer;
}

input[type=submit]::-webkit-search-decoration,
input[type=button]::-webkit-search-decoration {
  display: none;
}

input[type=submit]::focus,
input[type=button]::focus {
  outline-offset: -2px;
}

* {
  outline: none;
}

body {
  font-size: 15px;
  word-break: break-all;
  -webkit-text-size-adjust: none;
}

* html body {
  font-size: small;
  font: x-small;
}

*:first-child + html body {
  font-size: small;
  font: x-small;
}

img {
  border: 0;
  vertical-align: bottom;
}

ul,
dl {
  text-indent: 0;
}

ul li {
  list-style: none;
}

ol li {
  list-style: decimal;
}

ol ul li {
  list-style: none;
}

address,
caption,
cite,
code,
dfn,
em,
var {
  font-style: normal;
  font-weight: normal;
}

sup {
  vertical-align: text-top;
}

sub {
  vertical-align: text-bottom;
}

input,
textarea,
select {
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
}

* html input,
* html textarea,
* html select {
  font-size: 100%;
}

*:first-child + html + input,
*:first-child html + textarea,
*:first-child + html select {
  font-size: 100%;
}

table {
  border-collapse: separate;
  border-spacing: 0;
  font-size: inherit;
  font: 100%;
}

th,
td {
  text-align: left;
  vertical-align: top;
}

caption {
  text-align: left;
}

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

* html pre,
* html code,
* html kbd,
* html samp,
* html tt {
  font-size: 108%;
  line-height: 100%;
}

*:first-child + html pre,
*:first-child html + code,
*:first-child html + kbd,
*:first-child + html + samp,
*:first-child + html tt {
  font-size: 108%;
  line-height: 100%;
}

input,
select,
textarea {
  font-size: 100%;
  font-family: Verdana, Helvetica, sans-serif;
  margin: 0;
}

button {
  margin: 0;
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
  line-height: inherit;
}

figure {
  line-height: 0;
}

*,
*::before,
*::after {
  box-sizing: border-box;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

input,
textarea {
  -webkit-appearance: none;
  border-radius: 0;
}

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

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

html {
  font-family: sans-serif;
  line-height: 1.15;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  -ms-overflow-style: scrollbar;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
article,
aside,
figcaption,
figure,
footer,
header,
hgroup,
main,
nav,
section {
  display: block;
}

[tabindex="-1"]:focus {
  outline: 0 !important;
}

hr {
  box-sizing: content-box;
  height: 0;
  overflow: visible;
}

img {
  height: auto;
  max-width: 100%;
  vertical-align: bottom;
  transition: opacity 0.2s;
}

a {
  transition: opacity 0.2s;
}
a:hover {
  opacity: 0.6;
}

body {
  font-family: "Roboto", "Microsoft YaHei", sans-serif;
  font-size: 15px;
  line-height: 32px;
  letter-spacing: 0.15em;
  color: var(--font-color);
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "Microsoft YaHei", sans-serif;
}

@media screen and (min-width: 769px) {
  .br_sp {
    display: none;
  }
}

@media screen and (max-width: 768px) {
  .br_pc {
    display: none;
  }
}

@media screen and (max-width: 768px) {
  .is-pc {
    display: none !important;
  }
}

@media screen and (min-width: 769px) {
  .is-mobile {
    display: none !important;
  }
}

@media screen and (min-width: 960px) {
  .is-slide-menu {
    display: none;
  }
}

.h-font {
  font-family: "Microsoft YaHei", sans-serif;
  font-weight: 700;
}

.main-color {
  color: var(--main-color);
}

.sub-color {
  color: var(--sub-color);
}

.base-color {
  color: var(--base-color);
}

.ac-color {
  color: var(--accent-color);
}

.green-color {
  color: var(--green-color);
}

.inner-content {
  max-width: var(--content-width-wide);
  margin-inline: auto;
}

.upper-dot {
  background-image: radial-gradient(circle at center, var(--sub-color) 20%, transparent 20%);
  background-position: top right;
  background-repeat: repeat-x;
  background-size: 1.16em 0.4em;
  padding-top: 0.5em;
}

.under-line {
  background: linear-gradient(0deg, rgba(245, 165, 0, 0.5) 0%, rgba(245, 165, 0, 0.5) 50%, rgba(0, 66, 252, 0) 50%, rgba(0, 66, 252, 0) 100%);
}

.page a:hover {
  opacity: 0.6;
  transition: opacity 0.2s;
}

a.page-button {
  display: block;
  color: var(--main-color);
  transition: opacity 0.2s;
  display: flex;
  align-items: center;
  font-weight: 700;
  font-size: 16px;
  justify-content: center;
}
@media screen and (min-width: 769px) {
  a.page-button {
    font-size: 14px;
    justify-content: flex-start;
  }
}
a.page-button:hover {
  opacity: 0.6;
}
a.page-button .button-icon-arrow {
  margin-left: 25px;
}

.button-icon-arrow {
  width: 42px;
  height: 42px;
  border-radius: 100%;
  background-color: var(--main-color);
  display: flex;
  align-items: center;
  justify-content: center;
}
.button-icon-arrow::before {
  content: "";
  border-width: 5px 0 5px 7px;
  border-style: solid;
  border-color: transparent transparent transparent #fff;
  margin-left: 2px;
}
.down .button-icon-arrow {
  transform: rotate(90deg);
}

.main {
  --sep-image-size: 250%;
}
@media screen and (min-width: 769px) {
  .main {
    --sep-image-size: contain;
  }
}

ul.is-style-circle-list li {
  padding-left: 30px;
  text-indent: -30px;
}
ul.is-style-circle-list li::before {
  content: "";
  background-color: #fff;
  border: 2px solid;
  width: 10px;
  height: 10px;
  display: inline-block;
  border-radius: 100%;
  margin-right: 20px;
}

ul.is-style-dot-list li {
  padding-left: 30px;
  text-indent: -30px;
}
ul.is-style-dot-list li::before {
  content: "";
  background-color: var(--font-color);
  width: 10px;
  height: 10px;
  display: inline-block;
  border-radius: 100%;
  margin-right: 20px;
}

.cp_tab {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-top: 110px;
  counter-reset: tab;
}
@media screen and (max-width: 768px) {
  .cp_tab {
    flex-direction: column;
  }
}
.cp_tab *,
.cp_tab *:before,
.cp_tab *:after {
  box-sizing: border-box;
}
.cp_tab > input[type=radio] {
  display: none;
}
.cp_tab > label {
  cursor: pointer;
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  text-align: center;
  font-size: 18px;
  font-weight: 700;
  background-color: #fff;
  color: var(--main-color);
  min-width: 130px;
  width: 100%;
  height: 70px;
  padding-block: 15px;
  padding-inline: 50px;
  margin-top: 20px;
  transition: color 0.3s, background-color 0.3s;
}
@media screen and (min-width: 769px) {
  .cp_tab > label {
    justify-content: center;
    padding: 15px;
    font-size~: 14px;
    height: 100px;
    width: calc((100% - 60px) / 4);
  }
}
.cp_tab > label:hover {
  background-color: var(--main-color);
  color: #fff !important;
}
.cp_tab > label:hover::before {
  transition: color 0.3s;
  color: var(--sub-color);
}
.cp_tab > label::before {
  counter-increment: tab;
  content: counter(tab, decimal-leading-zero);
  display: block;
  letter-spacing: 0.15em;
  font-size: 25px;
  color: #e6e6e6;
  font-weight: 700;
  margin-right: 20px;
}
@media screen and (min-width: 769px) {
  .cp_tab > label::before {
    font-size: 34px;
    margin-right: 0;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: -17px;
  }
}
@media screen and (max-width: 768px) {
  .cp_tab > label:after {
    content: "";
    border-width: 8px 6px 0 6px;
    border-style: solid;
    border-color: var(--main-color) transparent transparent;
    display: block;
    margin-left: auto;
  }
}
.cp_tab .cp_tabpanels {
  margin-top: 20px;
}
.cp_tab .cp_tabpanels .cp_tabpanel {
  background-color: #fff;
  padding-inline: 20px;
  padding-block: 75px 100px;
}
@media screen and (min-width: 481px) {
  .cp_tab .cp_tabpanels .cp_tabpanel {
    padding-inline: 45px;
  }
}
@media screen and (min-width: 769px) {
  .cp_tab .cp_tabpanels .cp_tabpanel {
    padding-inline: 75px;
  }
}
@media screen and (min-width: 769px) {
  .cp_tab .cp_tabpanels .cp_tabpanel {
    display: grid;
    grid-template-rows: 0fr;
    padding-block: 0;
  }
  .cp_tab .cp_tabpanels .cp_tabpanel > div {
    overflow: hidden;
    transition: 0.5s opacity;
    opacity: 0;
  }
}
@media screen and (max-width: 768px) {
  .cp_tab .cp_tabpanels .cp_tabpanel + .cp_tabpanel {
    margin-top: 20px;
  }
}
.cp_tab > label:hover, .cp_tab > input:focus + label {
  color: #0066cc;
}
.cp_tab > input:first-child:checked ~ .cp_tabpanels > .cp_tabpanel:first-child, .cp_tab > input:nth-child(3):checked ~ .cp_tabpanels > .cp_tabpanel:nth-child(2), .cp_tab > input:nth-child(5):checked ~ .cp_tabpanels > .cp_tabpanel:nth-child(3), .cp_tab > input:nth-child(7):checked ~ .cp_tabpanels > .cp_tabpanel:nth-child(4) {
  display: grid;
  grid-template-rows: 1fr;
  padding-block: 75px 100px;
}
.cp_tab > input:first-child:checked ~ .cp_tabpanels > .cp_tabpanel:first-child > div, .cp_tab > input:nth-child(3):checked ~ .cp_tabpanels > .cp_tabpanel:nth-child(2) > div, .cp_tab > input:nth-child(5):checked ~ .cp_tabpanels > .cp_tabpanel:nth-child(3) > div, .cp_tab > input:nth-child(7):checked ~ .cp_tabpanels > .cp_tabpanel:nth-child(4) > div {
  opacity: 1;
}
.cp_tab > input:checked + label {
  background-color: var(--main-color);
  color: #fff;
}
.cp_tab > input:checked + label::before {
  color: var(--sub-color);
}
.cp_tab > input:checked + label::after {
  border-top-color: #fff;
}
@media screen and (min-width: 769px) {
  .cp_tab > input:checked + label::after {
    content: "";
    background-image: url(../images/tab-delta.svg);
    width: 46px;
    height: 42px;
    background-size: contain;
    background-repeat: no-repeat;
    position: absolute;
    bottom: -32px;
    left: 50%;
    transform: translateX(-50%);
  }
}

.media-text {
  display: flex;
}
@media screen and (max-width: 768px) {
  .media-text {
    flex-direction: column;
  }
}

.media-text__media {
  flex-shrink: 0;
}

.titled-box {
  border: 2px solid var(--main-color);
  position: relative;
  padding: 50px 20px 20px;
  margin-top: 80px;
}

.titled-box__title {
  background-color: #fff;
  display: flex;
  margin-inline: auto;
  top: -42px;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  padding-inline: 20px;
  font-size: 17px;
  line-height: 1.58;
  font-weight: 700;
  position: absolute;
  flex-direction: column;
  white-space: nowrap;
}
@media screen and (min-width: 769px) {
  .titled-box__title {
    padding-inline: 30px 95px;
    font-size: 24px;
  }
}

.title-box-udl {
  border: 2px solid var(--main-color);
  border-style: solid none;
  position: relative;
  padding: 50px 20px 20px;
  margin-top: 80px;
}
.title-box-udl .title-box-udl__title {
  background-color: var(--main-color);
  color: #fff;
  display: flex;
  position: absolute;
  font-size: 16px;
  min-height: 40px;
  top: -20px;
  align-items: center;
  justify-content: center;
  padding: 10px 15px;
  min-width: 170px;
  left: 50%;
  transform: translateX(-50%);
  line-height: 1.2;
}
@media screen and (min-width: 769px) {
  .title-box-udl .title-box-udl__title {
    font-size: 18px;
    min-height: 50px;
    top: -25px;
  }
}

.is-style-ornament-w {
  font-weight: 700;
}
.is-style-ornament-w::after, .is-style-ornament-w::before {
  content: "";
  background-image: url(../images/ornament-w-l.svg);
  display: inline-block;
  width: 43px;
  height: 49px;
  background-repeat: no-repeat;
  background-size: contain;
  vertical-align: -15px;
}
.is-style-ornament-w::before {
  margin-right: 30px;
}
.is-style-ornament-w::after {
  margin-left: 30px;
  background-image: url(../images/ornament-w-r.svg);
}

.is-style-ornament {
  font-weight: 700;
}
.is-style-ornament::after, .is-style-ornament::before {
  content: "";
  background-image: url(../images/ornament-l.svg);
  display: inline-block;
  width: 22px;
  height: 25px;
  background-repeat: no-repeat;
  background-size: contain;
}
.is-style-ornament::before {
  margin-right: 8px;
}
.is-style-ornament::after {
  margin-left: 5px;
  background-image: url(../images/ornament-r.svg);
}

.icon-tel::before {
  content: "";
  background-image: url(../images/icon-tel.svg);
  display: inline-block;
  width: 34px;
  height: 37px;
  background-repeat: no-repeat;
  background-size: contain;
}

.icon-mail::before {
  content: "";
  background-image: url(../images/icon-mail.svg);
  display: inline-block;
  width: 39px;
  height: 24.5px;
  background-repeat: no-repeat;
  background-size: contain;
}

.section__bg-text {
  font-size: 30px;
  line-height: 1;
  font-weight: 700;
  text-align: center;
}
@media screen and (min-width: 769px) {
  .section__bg-text {
    font-size: 55px;
  }
}

.section__h2 {
  font-size: 18px;
  text-align: center;
}
@media screen and (min-width: 769px) {
  .section__h2 {
    font-size: 54px;
  }
}

.section__copy {
  font-size: 20px;
  margin-top: 35px;
  line-height: 1.4;
  text-align: center;
}
@media screen and (min-width: 769px) {
  .section__copy {
    font-size: 50px;
    margin-top: 80px;
  }
}

.section__subcopy {
  text-align: center;
  margin-top: 60px;
}
.section__subcopy > div {
  font-size: 16px;
  font-weight: 700;
}
@media screen and (min-width: 769px) {
  .section__subcopy > div {
    font-size: 28px;
  }
}
.section__subcopy > p {
  margin-top: 20px;
  font-size: 14px;
  text-align: center;
  line-height: 1.75;
}
@media screen and (min-width: 769px) {
  .section__subcopy > p {
    font-size: 18px;
  }
}

.embed-wrapper {
  position: relative;
}
.embed-wrapper::before {
  content: "";
  display: block;
  padding-top: 56.25%;
}
.embed-wrapper iframe {
  bottom: 0;
  height: 100%;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  width: 100%;
  max-width: 100%;
}

.table-dot {
  max-width: 780px;
  margin-inline: auto;
}
.table-dot th,
.table-dot td {
  padding: 15px 15px;
  vertical-align: middle;
  height: 90px;
}
@media screen and (max-width: 768px) {
  .table-dot th,
  .table-dot td {
    display: block;
    padding: 2px 0;
    height: auto;
  }
}
.table-dot th {
  color: var(--main-color);
  font-size: 17px;
  text-align: center;
}
@media screen and (max-width: 768px) {
  .table-dot th {
    padding-top: 20px;
    -moz-text-align-last: left;
    text-align-last: left;
  }
}
.table-dot td {
  font-size: 16px;
  font-weight: 400;
  line-height: 1.75;
}
@media screen and (max-width: 768px) {
  .table-dot td {
    padding-bottom: 20px;
  }
}
.table-dot tr {
  background-image: linear-gradient(to right, var(--sub-color), var(--sub-color) 3px, transparent 3px, transparent 8px);
  background-position: bottom right;
  background-repeat: repeat-x;
  background-size: 13px 3px;
}

.size-xl {
  font-size: 50px;
  line-height: 0.9;
}
@media screen and (max-width: 768px) {
  .size-xl {
    font-size: 30px;
    line-height: 1;
  }
}

.size-l {
  font-size: 34px;
}
@media screen and (max-width: 768px) {
  .size-l {
    font-size: 18px;
  }
}

.size-m {
  font-size: 24px;
}

.size-s {
  font-size: 14px;
  line-height: 1.7;
}
@media screen and (max-width: 768px) {
  .size-s {
    font-size: 12px;
  }
}

.block-center {
  max-width: var(--content-innner-width);
  margin-inline: auto;
  width: 100%;
}

.ext-link {
  font-weight: 700;
  color: var(--main-color);
}
.ext-link::after {
  content: url(../images/ext-link-icon.svg);
  width: 20px;
  height: 21px;
  display: inline-block;
  vertical-align: -3px;
  margin-inline: 5px;
}

.media-text-grid {
  display: grid;
  grid-template-areas: "title" "media" "content";
}
@media screen and (min-width: 769px) {
  .media-text-grid {
    grid-template-areas: "media title" "media content";
  }
}
.media-text-grid .media-text-grid__title {
  -ms-grid-row: 1;
  -ms-grid-column: 1;
  grid-area: title;
}
.media-text-grid .media-text-grid__media {
  -ms-grid-row: 2;
  -ms-grid-column: 1;
  grid-area: media;
}
@media screen and (max-width: 768px) {
  .media-text-grid .media-text-grid__media {
    margin-top: 20px;
  }
}
.media-text-grid .media-text-grid__content {
  -ms-grid-row: 3;
  -ms-grid-column: 1;
  grid-area: content;
}
@media screen and (min-width: 769px){
  .media-text-grid .media-text-grid__title {
    -ms-grid-row: 1;
    -ms-grid-column: 2;
  }
  .media-text-grid .media-text-grid__media {
    -ms-grid-row: 1;
    -ms-grid-row-span: 2;
    -ms-grid-column: 1;
  }
  .media-text-grid .media-text-grid__content {
    -ms-grid-row: 2;
    -ms-grid-column: 2;
  }
}

.fadeUp {
  animation-name: fadeUpAnime;
  animation-duration: 0.5s;
  animation-fill-mode: forwards;
  opacity: 0;
}

@keyframes fadeUpAnime {
  from {
    opacity: 0;
    transform: translateY(100px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
/* アニメーションスタートの遅延時間を決めるCSS*/
.site-header__content {
  max-width: var(--content-width-wide);
  margin-inline: auto;
  width: 100%;
}

.footer-content {
  max-width: var(--content-width);
  margin-inline: auto;
  width: 100%;
}

.wrapper_breadcrumb {
  max-width: 1020px;
  padding-inline: 20px;
  margin-block: 15px;
  margin-inline: auto;
  position: relative;
  z-index: 2;
}

.main.main__1col {
  max-width: 1020px;
  padding-inline: 20px;
  margin-inline: auto;
  margin-block: 50px 100px;
}
@media screen and (min-width: 769px) {
  .main.main__1col {
    margin-block: 90px 100px;
  }
}

.main.main__2col {
  display: grid;
  grid-template-columns: 1fr;
  box-sizing: content-box;
  margin-inline: auto;
  grid-gap: 30px;
  gap: 30px;
  max-width: 980px;
  padding-inline: 20px;
  padding-block: 0 50px;
}
@media screen and (min-width: 769px) {
  .main.main__2col {
    padding-block: 40px 90px;
    grid-template-columns: auto 220px;
  }
}
@media screen and (min-width: 960px) {
  .main.main__2col {
    grid-template-columns: 620px auto;
  }
}

.articles {
  margin-bottom: 40px;
}
@media screen and (min-width: 769px) {
  .articles {
    margin-bottom: 80px;
  }
}

@media screen and (min-width: 769px) {
  .sidebar {
    max-width: 275px;
    margin-left: auto;
    width: 100%;
  }
}

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 10;
}

.site-header__content {
  display: grid;
  grid-template-columns: 170px 1fr;
  position: relative;
  align-items: center;
}
@media screen and (min-width: 769px) {
  .site-header__content {
    grid-template-columns: 240px 1fr;
    -moz-column-gap: 20px;
    column-gap: 20px;
    padding-left: 7%;
  }
}

.site-header__logo {
  padding: 10px 20px;
}
@media screen and (min-width: 960px) {
  .site-header__logo {
    padding: 0;
  }
}
.site-header__logo img {
  filter: drop-shadow(0px 0px 1px rgba(255, 255, 255, 0.7));
}

.site-header__discription,
.site-header__recruit {
  display: none;
}

/* スライドメニュー */
@media screen and (max-width: 959px) {
  .site-header__nav {
    background-color: var(--main-color);
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    width: 100vw;
    overflow: scroll;
    display: block;
    opacity: 0;
    visibility: hidden;
    transition: 0.8s opacity ease-out, 0.8s visibility ease-out;
  }
  .site-header__nav.is-open {
    z-index: 2;
    opacity: 1;
    visibility: visible;
  }
  .site-header__nav .slide-menu-logo {
    display: block;
    padding: 10px 20px;
    width: auto;
  }
  .site-header__nav > ul {
    padding: 30px 30px 200px;
  }
  .site-header__nav > ul > li > a::before {
    content: "";
    background-color: var(--sub-color);
    width: 10px;
    height: 10px;
    border-radius: 100%;
    margin-right: 10px;
    display: inline-block;
  }
  .site-header__nav > ul > li + li {
    margin-top: 20px;
  }
  .site-header__nav a {
    color: #fff;
    font-weight: 700;
    display: block;
    width: 100%;
    margin-left: 20px;
    text-indent: -20px;
  }
  .child {
    margin-left: 20px;
    margin-block: 10px;
  }
  .child > li {
    font-size: 14px;
    letter-spacing: 0.15em;
  }
  .child > li > a {
    color: var(--base-color);
    margin-left: 0;
    text-indent: 0;
    line-height: 1.5;
    margin-block: 8px;
  }
  .menu-safty .child, .menu-company .child {
    display: grid;
    grid-template-columns: 50% 50%;
    grid-column-gap: 15px;
    -moz-column-gap: 15px;
    column-gap: 15px;
  }
  .menu-safty .child li:first-child {
    grid-column: 1/3;
  }
  .child-sub {
    display: grid;
    grid-template-columns: 50% 50%;
    margin-left: 20px;
  }
  .child-sub a {
    font-size: 13px;
    letter-spacing: 0.15em;
    color: var(--sub-color);
  }
  .child-sub a::before {
    content: "-";
    margin-right: 5px;
    color: var(--sub-color);
  }
  .slide-menu-recruit {
    background-color: var(--accent-color);
    position: fixed;
    bottom: 0;
    width: 100%;
  }
  .slide-menu-recruit a {
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 60px;
    width: auto;
    font-size: 18px;
    letter-spacing: 0.15em;
  }
  .slide-menu-recruit a::before {
    content: url(../images/slide-menu-icon-logo.svg);
    display: block;
    width: 23px;
    height: 25px;
    margin-right: 16px;
  }
  .slide-menu-recruit a::after {
  /*   content: url(../images/slide-menu-icon-arrow.svg);
    display: block;
    width: 22px;
    height: 25px;
    margin-left: 25px; */
  }
}
/*  PC用ナビメニュー */
@media screen and (min-width: 960px) {
  .site-header__discription {
    color: #fff;
    font-size: 10px;
    text-align: right;
    grid-column: 1/-1;
    grid-row: 1/2;
    padding-right: 200px;
    height: 47px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    letter-spacing: 0.15em;
  }
  .site-header__nav {
    max-width: 720px;
    margin-left: auto;
    margin-right: 140px;
    width: 100%;
    background-color: #fff;
    border-radius: 40px 0 0 40px;
    position: relative;
    transition: border-radius 0.5s ease;
    padding-right: 40px;
    padding-left: 15px;
  }
  .site-header__nav > ul {
    display: flex;
    height: 80px;
    justify-content: flex-start;
    align-items: center;
  }
}
@media screen and (min-width: 960px) and (min-width: 1090px) {
  .site-header__nav > ul {
    justify-content: center;
  }
}
@media screen and (min-width: 960px) {
  .site-header__nav .child {
    display: none;
  }
  .site-header__nav.active {
    border-radius: 40px 40px 0 0;
  }
  .site-header__nav .slide-menu-logo {
    display: none;
  }
  .global-menu-item {
    font-weight: 700;
    height: 100%;
  }
  .global-menu-item > a {
    padding-inline: 10px;
    color: var(--main-color);
    display: flex;
    align-items: center;
    height: 100%;
    transition: 0.2s color ease-in;
    position: relative;
  }
}
@media screen and (min-width: 960px) and (min-width: 1090px) {
  .global-menu-item > a {
    padding-inline: 20px;
  }
}
@media screen and (min-width: 960px) {
  .global-menu-item > a:after {
    content: "";
    width: 5px;
    height: 5px;
    background-color: #fff;
    border-radius: 5px;
    position: absolute;
    bottom: 18px;
    left: calc(50% - 3px);
    transition: 0.2s background-color ease-in;
  }
  .global-menu-item.current > a,
  .global-menu-item > a:hover {
    color: var(--sub-color);
  }
  .global-menu-item.current > a:after,
  .global-menu-item > a:hover:after {
    background-color: var(--sub-color);
  }
  .global-menu-item .child {
    position: absolute;
    left: 0;
    top: 80px;
    background-color: var(--main-color);
    padding-block: 35px;
    padding-inline: 60px;
    border-radius: 0 0 40px 40px;
    height: auto;
    width: 100%;
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    opacity: 0;
    visibility: hidden;
  }
  .global-menu-item .child > li {
    width: 220px;
    opacity: 0;
    transform: translateY(30px);
    transition: 0.8s opacity ease-out, 0.8s transform ease-out;
  }
  .global-menu-item .child a {
    color: #fff;
  }
  .global-menu-item .child a:hover {
    opacity: 0.5;
  }
  .global-menu-item .child.is-open {
    visibility: visible;
    opacity: 1;
  }
  .global-menu-item .child.is-open > li {
    transform: translateY(0);
    opacity: 1;
  }
  .global-menu-item.is-mobile {
    display: none;
  }
  .menu-prodcut .child > li {
    width: 170px;
  }
  .menu-prodcut .child > li:nth-child(2) {
    width: 130px;
  }
  .menu-prodcut .child-sub {
    font-size: 13px;
    padding-left: 15px;
  }
  .menu-prodcut .child-sub a::before {
    content: "-";
    margin-right: 5px;
    color: #fff;
  }
  .site-header__recruit {
    position: absolute;
    right: -20px;
    top: 0;
    background-image: url(../images/menu-recruit-bg.svg);
    background-position: bottom left;
    background-repeat: no-repeat;
    background-size: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    width: 210px;
    height: 180px;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: 0.15em;
    line-height: 25px;
  }
  .site-header__recruit a {
    display: block;
    text-align: center;
    margin-top: -40px;
  }
  .site-header__recruit span {
    display: block;
    font-size: 12px;
  }
  .slide-menu-recruit {
    display: none;
  }
}
/* スライドメニューボタン */
.slide-menu-button {
  position: absolute;
  z-index: 10;
  background-color: var(--main-color);
  padding: 5px 15px;
  border-radius: 0 0 0 10px;
  top: 0;
  right: 0;
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  /*ボタン内側*/
}
@media screen and (min-width: 960px) {
  .slide-menu-button {
    display: none;
  }
}
.slide-menu-button .openbtn1 {
  position: relative; /*ボタン内側の基点となるためrelativeを指定*/
  width: 25px;
  height: 20px;
}
.slide-menu-button .openbtn1 span {
  display: inline-block;
  transition: all 0.4s;
  position: absolute;
  left: 0;
  height: 2px;
  background: #fff;
  width: 100%;
}
.slide-menu-button .openbtn1 span:nth-of-type(1) {
  top: 0;
}
.slide-menu-button .openbtn1 span:nth-of-type(2) {
  top: 9px;
}
.slide-menu-button .openbtn1 span:nth-of-type(3) {
  top: 18px;
}
.slide-menu-button.is-open .openbtn1 span:nth-of-type(1) {
  transform: translateY(9px) rotate(-45deg);
}
.slide-menu-button.is-open .openbtn1 span:nth-of-type(2) {
  opacity: 0; /*真ん中の線は透過*/
}
.slide-menu-button.is-open .openbtn1 span:nth-of-type(3) {
  transform: translateY(-9px) rotate(45deg);
}

body.is-open {
  overflow: hidden;
}

.footer {
  background-color: var(--main-color);
  color: #fff;
  padding-block: 80px;
  padding-inline: 20px;
}

.footer-content {
  display: grid;
  grid-template-columns: 1fr;
  justify-content: space-between;
  grid-gap: 40px;
  gap: 40px;
}
@media screen and (min-width: 769px) {
  .footer-content {
    grid-template-columns: 300px 1fr;
    gap: 40px;
  }
}

.footer-content__logo {
  width: 230px;
  margin-inline: auto;
  display: block;
}
@media screen and (min-width: 769px) {
  .footer-content__logo {
    width: 300px;
  }
}

.footer-content__address {
  margin-top: 30px;
  line-height: 28px;
  font-size: 14px;
  letter-spacing: 0.15em;
}
@media screen and (max-width: 768px) {
  .footer-content__address {
    margin-inline: auto;
    width: -moz-fit-content;
    width: fit-content;
  }
}

a.footer-content__google-map {
  margin-top: 30px;
  display: flex;
  align-items: center;
  margin-inline: auto;
}
@media screen and (min-width: 769px) {
  a.footer-content__google-map {
    margin-left: 0;
  }
}
a.footer-content__google-map img {
  margin-left: 55px;
}

a.footer-content__google-map {
  margin-top: 30px;
  display: flex;
  align-items: center;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.15em;
  max-width: 215px;
  justify-content: space-between;
  white-space: nowrap;
}
a.footer-content__google-map img {
  margin-left: 10px;
}

.footer-content__right {
  margin-left: auto;
  width: 100%;
}
@media screen and (min-width: 769px) {
  .footer-content__right {
    max-width: 620px;
    margin-top: 20px;
  }
}

.footer-content__nav {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  margin-left: auto;
  line-height: 1;
  grid-row-gap: 25px;
  row-gap: 25px;
}
@media screen and (max-width: 768px) {
  .footer-content__nav {
    display: none;
  }
}
@media screen and (min-width: 960px) {
  .footer-content__nav {
    grid-template-columns: 1fr 1fr 1fr 1fr;
  }
}
.footer-content__nav > ul > li {
  font-weight: 700;
}
.footer-content__nav > ul > li > ul {
  font-size: 12px;
  font-weight: 400;
  margin-top: 20px;
  letter-spacing: 0.075em;
}
.footer-content__nav li + li {
  margin-top: 20px;
}

.footer-content__menus {
  margin-top: 40px;
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.075em;
  line-height: 28px;
}
@media screen and (max-width: 768px) {
  .footer-content__menus {
    display: none;
  }
}
.footer-content__menus li:after {
  content: "/";
  margin-inline: 5px;
  display: inline-block;
}

.footer-content__copyright {
  text-align: center;
  margin-top: 40px;
  font-size: 12px;
  letter-spacing: 0.2em;
}
@media screen and (min-width: 769px) {
  .footer-content__copyright {
    margin-top: 0;
    text-align: right;
    margin-left: auto;
    align-self: flex-end;
    line-height: 1;
  }
}

.footer-content__ism {
  display: flex;
  padding-top: 40px;
  display: flex;
  align-items: center;
  border-top: 1px solid;
  flex-wrap: wrap;
  flex-direction: column;
}
@media screen and (min-width: 769px) {
  .footer-content__ism {
    margin-top: 40px;
    flex-direction: row;
  }
}

.footer-content__ism-content {
  margin-top: 20px;
}
@media screen and (min-width: 769px) {
  .footer-content__ism-content {
    margin-top: 0;
    margin-left: 30px;
  }
}
.footer-content__ism-content > p {
  font-size: 11px;
  letter-spacing: 0.15em;
  line-height: 20px;
}
.footer-content__ism-content .footer-content__ism-header {
  font-size: 15px;
  list-style: 28px;
  margin-bottom: 10px;
  font-weight: 700;
}

.hero-header {
  min-height: 250px;
  margin-inline: auto;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 1;
  background-image: url(../images/header-blog.jpg);
}
@media screen and (min-width: 769px) {
  .hero-header {
    min-height: 500px;
  }
}
.hero-header::before {
  content: "";
  width: 100%;
  height: 100%;
  background-color: #595757;
  opacity: 0.3;
  position: absolute;
  top: 0;
  left: 0;
}
.page-use-of-site .hero-header {
  background-image: url(../images/header-use-of-site.jpg);
}
.page-privacy .hero-header {
  background-image: url(../images/header-privacy.jpg);
}
.page-isms .hero-header {
  background-image: url(../images/header-isms.jpg);
}
.page-social-media .hero-header {
  background-image: url(../images/header-social-media.jpg);
}
.page-worker-dispatch-act .hero-header {
  background-image: url(../images/header-worker-dispatch-act.jpg);
}
.error404 .hero-header {
  background-image: url(../images/header-404.jpg);
}
.page-product-service .hero-header {
  background-image: url(../images/header-page-product-service.jpg);
}
.page-anzen .hero-header {
  background-image: url(../images/header-safty.jpg);
}
.page-company .hero-header {
  background-image: url(../images/header-company.jpg);
}
.page-contact .hero-header {
  background-image: url(../images/header-contact.jpg);
}
.page-form .hero-header {
  background-image: url(../images/header-form.jpg);
}
.page-download .hero-header {
  background-image: url(../images/header-download.jpg);
}
.page-recruit .hero-header {
  background-image: url(../images/header-recruit.jpg);
}
.hero-header .hero-header__content {
  z-index: 2;
  padding-top: 52px;
}
.hero-header .hero-header__title {
  font-size: 28px;
  letter-spacing: 0.15em;
  color: #fff;
  text-align: center;
  font-weight: 700;
}
.hero-header .hero-header__title > h1,
.hero-header .hero-header__title span {
  display: block;
  margin-top: 30px;
  font-size: 46px;
  letter-spacing: 0.15em;
  color: var(--main-color);
}

.abstract {
  margin-inline: auto;
  text-align: center;
  margin-bottom: 60px;
}

.page .entry-content * + * {
  margin-top: 10px;
}
.page .entry-content * + h2 {
  margin-top: 30px;
}
.page .entry-content h2 {
  font-size: 18px;
  color: var(--main-color);
  letter-spacing: 0.15em;
  margin-left: 28px;
  text-indent: -28px;
  line-height: 1.5;
}
.page .entry-content h2::before {
  content: "";
  background-color: var(--main-color);
  display: inline-block;
  width: 18px;
  height: 18px;
  border-radius: 100%;
  margin-right: 10px;
}
.page .entry-content ul + p,
.page .entry-content h2 + p {
  margin-left: 28px;
}
.page .entry-content a {
  color: var(--main-color);
  font-weight: 700;
  text-decoration: underline;
}
.page .entry-content p.align-left {
  text-align: left;
}
.page .entry-content p.align-right {
  text-align: right;
}
.page .entry-content p.align-center {
  text-align: center;
}
.page .entry-content p + ol {
  margin-top: 65px;
}
.page .entry-content p + p {
  margin-top: 30px;
}
.page .entry-content ol.circle-number {
  counter-reset: circle-number 0;
}
.page .entry-content ol.circle-number > li {
  list-style: none;
  text-indent: -40px;
  padding-left: 40px;
}
.page .entry-content ol.circle-number > li:before {
  counter-increment: circle-number 1;
  content: counter(circle-number);
  display: inline-flex;
  align-items: center;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0;
  justify-content: center;
  color: #fff;
  background-color: var(--main-color);
  border-radius: 100%;
  width: 30px;
  height: 30px;
  margin-right: 10px;
  text-indent: 0;
  padding-left: 0;
  vertical-align: middle;
  padding-top: 1px;
}
.page .entry-content ol.circle-number > li + li {
  margin-top: 23px;
}
.page .entry-content ol.circle-number.is-indent {
  margin-top: 35px;
  margin-left: 30px;
}
.page .entry-content ol.simple {
  counter-reset: simple-number 0;
  margin-left: 25px;
  margin-top: 5px;
}
.page .entry-content ol.simple > li {
  list-style: none;
  text-indent: -20px;
  margin-left: 0;
}
.page .entry-content ol.simple > li::before {
  counter-increment: simple-number 1;
  content: counter(simple-number) ".";
  font-weight: 700;
  letter-spacing: 0.15em;
  justify-content: center;
  color: var(--main-color);
  margin-right: 3px;
  text-indent: 3px;
  padding-left: 0;
}
.page .entry-content ol.simple > li + li {
  margin-top: 3px;
}
.page .entry-content ul {
  margin-left: 40px;
}
.page .entry-content ul > li {
  text-indent: -20px;
  margin-left: 0;
}
.page .entry-content ul > li::before {
  content: "・";
  color: var(--main-color);
}
.page .entry-content ul > li + li {
  margin-top: 0;
}
.page .entry-content ul.direction-row {
  display: flex;
  flex-wrap: wrap;
  margin-left: 25px;
}
.page .entry-content ul.direction-row > li {
  text-indent: 0;
  width: 50%;
}
@media screen and (min-width: 769px) {
  .page .entry-content ul.direction-row > li {
    width: 25%;
  }
}
.page .entry-content .signature {
  text-align: right;
  margin-top: 70px;
}

/* 404ページ用 */
@media screen and (max-width: 768px) {
  .is-404 .abstract {
    text-align: left;
  }
}
.is-404 a.back-home-button {
  max-width: 400px;
  margin-inline: auto;
  text-decoration: none;
}

ol.breadcrumb {
  flex-wrap: wrap;
  padding-left: 0;
  font-size: 12px;
  letter-spacing: 0.15em;
  line-height: 1.8;
}
ol.breadcrumb li {
  list-style: none;
  display: inline;
}
ol.breadcrumb li:before {
  content: "＞";
  margin-inline: 5px;
}
@media screen and (min-width: 769px) {
  ol.breadcrumb li:before {
    margin-inline: 14px;
  }
}
ol.breadcrumb li:first-child {
  color: var(--main-color);
  font-weight: 700;
}
ol.breadcrumb li:first-child::before {
  content: none;
}
ol.breadcrumb li a {
  font-weight: 700;
  color: var(--main-color);
  transition: color 0.3s ease-in;
}
ol.breadcrumb li a:hover {
  color: var(--sub-color);
}

/*
 *
 *ブログページ用のスタイル
 *
*/
/* アーカイブ系 */
.archive-title {
  text-align: center;
  font-size: 18px;
  line-height: 36px;
  letter-spacing: 0.15em;
  margin-top: 35px;
  margin-bottom: -40px;
}
@media screen and (min-width: 769px) {
  .archive-title {
    font-size: 24px;
    line-height: 63px;
    margin-top: 40px;
    margin-bottom: -90px;
  }
}

.category-buttons {
  display: grid;
  max-width: 800px;
  margin-inline: auto;
  padding-inline: 20px;
  box-sizing: content-box;
  grid-template-columns: 1fr 1fr;
  grid-column-gap: 20px;
  -moz-column-gap: 20px;
  column-gap: 20px;
  grid-row-gap: 15px;
  row-gap: 15px;
  margin-top: 40px;
}
@media screen and (min-width: 769px) {
  .category-buttons {
    margin-top: 70px;
    grid-template-columns: 1fr 1fr 1fr 1fr;
  }
}

.category-buttons__item {
  box-sizing: border-box;
  transition: all 0.3s ease-in;
  border: 2px solid;
  letter-spacing: 0.15em;
}
@media screen and (max-width: 768px) {
  .category-buttons__item {
    font-size: 12.5px;
  }
}
.category-buttons__item.cat-color-blue {
  color: var(--main-color);
  border-color: var(--main-color);
}
.category-buttons__item.cat-color-blue:hover, .category-buttons__item.cat-color-blue.current {
  background-color: var(--main-color);
  color: #fff;
}
.category-buttons__item.cat-color-orange {
  color: var(--accent-color);
  border-color: var(--accent-color);
}
.category-buttons__item.cat-color-orange:hover, .category-buttons__item.cat-color-orange.current {
  background-color: var(--accent-color);
  color: #fff;
}
.category-buttons__item.cat-color-green {
  color: var(--green-color);
  border-color: var(--green-color);
}
.category-buttons__item.cat-color-green:hover, .category-buttons__item.cat-color-green.current {
  background-color: var(--green-color);
  color: #fff;
}
.category-buttons__item:first-child {
  grid-column: 1/3;
}
@media screen and (min-width: 769px) {
  .category-buttons__item:first-child {
    grid-column: 1/2;
    grid-row: 1/3;
  }
}
@media screen and (min-width: 769px) and (min-width: 769px) {
  .category-buttons__item:first-child span,
  .category-buttons__item:first-child a {
    height: 100%;
  }
}
.category-buttons__item span,
.category-buttons__item a {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 50px;
  font-weight: 700;
}
@media screen and (min-width: 769px) {
  .category-buttons__item span,
  .category-buttons__item a {
    height: 60px;
  }
}
.category-buttons__item span:hover,
.category-buttons__item a:hover {
  opacity: 1;
}

.tag-list-container {
  max-width: 1100px;
  width: auto;
  margin-inline: auto;
  margin-top: 40px;
  padding-inline: 20px;
  box-sizing: content-box;
}
@media screen and (min-width: 769px) {
  .tag-list-container {
    margin-top: 85px;
  }
}

.tag-accordion {
  box-sizing: border-box;
  width: 100%;
  padding-inline: 40px;
  padding-block: 40px;
  border: 3px solid var(--main-color);
  display: flex;
  justify-content: center;
  position: relative;
}
@media screen and (min-width: 769px) {
  .tag-accordion {
    padding-inline: 20px;
    padding-block: 50px;
  }
}
.tag-accordion h2 {
  position: absolute;
  top: -21px;
  background-color: var(--main-color);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 30px;
  height: 40px;
  width: 150px;
  left: 50%;
  transform: translateX(-50%);
}
@media screen and (min-width: 769px) {
  .tag-accordion h2 {
    font-size: 18px;
    letter-spacing: 0.15em;
    width: 200px;
  }
}

.tag-list.js-partial-accordion {
  display: grid;
  grid-template-columns: 1fr;
  justify-content: center;
  align-items: center;
  grid-column-gap: 20px;
  -moz-column-gap: 20px;
  column-gap: 20px;
  max-width: 980px;
  width: 100%;
}
@media screen and (min-width: 769px) {
  .tag-list.js-partial-accordion {
    grid-template-columns: 1fr 1fr 1fr 1fr;
  }
}

.tag-list__item {
  transition: all 0.3s ease;
  margin-bottom: 10px;
  opacity: 1;
  visibility: visible;
}
@media screen and (max-width: 768px) {
  .is-close .tag-list__item:nth-child(n+4) {
    opacity: 0;
    visibility: hidden;
    margin-bottom: 0;
  }
  .is-close .tag-list__item:nth-child(n+4) span,
  .is-close .tag-list__item:nth-child(n+4) a {
    min-height: 0;
    padding-block: 0;
    font-size: 0;
  }
}
@media screen and (min-width: 769px) {
  .is-close .tag-list__item:nth-child(n+9) {
    opacity: 0;
    visibility: hidden;
    margin-bottom: 0;
  }
  .is-close .tag-list__item:nth-child(n+9) span,
  .is-close .tag-list__item:nth-child(n+9) a {
    min-height: 0;
    padding-block: 0;
    font-size: 0;
  }
}
.tag-list__item span,
.tag-list__item a {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.15em;
  background-color: var(--base-color);
  color: var(--main-color);
  border-radius: 20px;
  padding-inline: 20px;
  padding-block: 5px;
  line-height: 1.2;
  transition: all 0.3s ease-in;
}
.tag-list__item span::before,
.tag-list__item a::before {
  content: "#";
  margin-right: 5px;
}
.tag-list__item.current * {
  color: var(--base-color);
  background-color: var(--main-color);
}

.more-button {
  position: absolute;
  bottom: -21px;
  background-color: #fff;
  color: var(--main-color);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.15em;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 45px;
  width: 240px;
  left: 50%;
  transform: translateX(-50%);
}
.more-button:hover .more-button__text,
.more-button:hover .more-button__arrow {
  transition: opacity 0.2s;
  opacity: 0.6;
}
.more-button.is-close .more-button__arrow {
  transform: rotate(180deg);
}
.more-button.is-close .more-button__text {
  display: block;
}
.more-button.is-close .more-button__text.do-close {
  display: none;
}
.more-button .more-button__text {
  display: none;
}
.more-button .more-button__text.do-close {
  display: block;
}

.more-button__arrow {
  background-color: var(--main-color);
  width: 45px;
  height: 45px;
  border-radius: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: 30px;
  transition: all 0.3s ease-in;
}
.more-button__arrow::before {
  content: "";
  border-width: 0 5px 7px 5px;
  border-style: solid;
  border-color: transparent transparent #fff transparent;
  margin-bottom: 2px;
}

@media screen and (min-width: 769px) {
  .article-index {
    margin-inline: 20px;
  }
}
.article-index + .article-index {
  border-top: 1px solid var(--main-color);
}
@media screen and (max-width: 768px) {
  .article-index:last-child {
    border-bottom: 1px solid var(--main-color);
  }
}
.article-index .article-wapper {
  display: flex;
  flex-direction: row-reverse;
  justify-content: space-between;
  padding-block: 23px 30px;
  align-items: flex-start;
}
@media screen and (min-width: 769px) {
  .article-index .article-wapper {
    padding-block: 50px;
  }
}
.article-index .post-thumbnail {
  position: relative;
  min-width: 90px;
  width: auto;
  margin-left: 20px;
  margin-top: 7px;
  flex-shrink: 0;
  flex-grow: 0;
}
@media screen and (min-width: 769px) {
  .article-index .post-thumbnail {
    width: 250px;
    margin-top: 0;
    margin-left: 50px;
  }
}
.article-index .post-thumbnail::before {
  content: "";
  display: block;
  padding-top: 67%;
}
.article-index .post-thumbnail img {
  height: 100%;
  width: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -o-object-fit: cover;
  object-fit: cover;
}
.article-index .entry-title {
  font-size: 18px;
  line-height: 32px;
  letter-spacing: 0.15em;
  margin-bottom: 15px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
@media screen and (min-width: 769px) {
  .article-index .entry-title {
    font-size: 36px;
    line-height: 56px;
  }
}
.article-index .entry-meta {
  line-height: 1.3;
}
.article-index .post-category span {
  width: auto;
  font-size: 10px;
  background-color: var(--main-color);
  color: #fff;
  letter-spacing: 0.15em;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  font-weight: 700;
  height: 30px;
  line-height: 1.2;
  padding-inline: 10px;
  white-space: nowrap;
}
@media screen and (min-width: 769px) {
  .article-index .post-category span {
    width: 190px;
    font-size: 12px;
  }
}
.article-index .post-category span.cat-color-orange {
  background-color: var(--accent-color);
}
.article-index .post-category span.cat-color-green {
  background-color: var(--green-color);
}
.article-index span.posted-on {
  color: var(--main-color);
  margin-left: 10px;
  font-size: 12px;
  letter-spacing: 0.15em;
  font-weight: 700;
  white-space: nowrap;
}
@media screen and (min-width: 769px) {
  .article-index span.posted-on {
    margin-left: 20px;
    font-size: 13px;
  }
}

.first-post {
  background-color: var(--base-color);
  max-width: 1400px;
  width: 100vw;
  padding-inline: 20px;
  padding-block: 70px 60px;
  overflow: hidden;
  margin-left: calc(50% - 50vw);
  display: flex;
  justify-content: center;
}
@media screen and (min-width: 769px) {
  .first-post {
    padding-block: 100px;
  }
}
@media screen and (min-width: 1410px) {
  .first-post {
    margin-left: calc(50% - 700px);
  }
}
.first-post .article-index {
  margin-inline: 0;
  max-width: 980px;
  border: none;
  width: 100%;
}
.first-post .article-index .post-thumbnail {
  width: 100%;
  max-width: 400px;
}
@media screen and (max-width: 768px) {
  .first-post .article-index .post-thumbnail {
    margin-left: 0;
    margin-top: 20px;
  }
}
.first-post .article-index .entry-title {
  font-size: 24px;
  line-height: 50px;
  margin-bottom: 5px;
  display: inline;
  color: #fff;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
@media screen and (min-width: 769px) {
  .first-post .article-index .entry-title {
    font-size: 34px;
    line-height: 60px;
    margin-bottom: 25px;
  }
}
.first-post .article-index .entry-title span {
  background-color: var(--main-color);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  padding-inline: 15px;
}
.first-post .article-index span.posted-on {
  color: var(--main-color);
}
.first-post .article-wapper {
  position: relative;
  padding-block: 0;
}
@media screen and (max-width: 768px) {
  .first-post .article-wapper {
    flex-direction: column-reverse;
    width: -moz-fit-content;
    width: fit-content;
    margin-inline: auto;
  }
}
.first-post .article-wapper::after {
  content: "";
  background-image: url(../images/new-post.svg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  position: absolute;
  width: 246px;
  height: 145px;
  right: -30px;
  top: -88px;
}
@media screen and (min-width: 769px) {
  .first-post .article-wapper::after {
    width: 335px;
    height: 115px;
    right: -30px;
    top: -75px;
  }
}
@media screen and (min-width: 1090px) {
  .first-post .article-wapper::after {
    width: 335px;
    height: 115px;
    right: -120px;
    top: -75px;
  }
}
.first-post .post-tag {
  display: flex;
  justify-content: space-between;
  -moz-column-gap: 20px;
  column-gap: 20px;
  margin-top: 25px;
  flex-wrap: wrap;
}
@media screen and (min-width: 769px) {
  .first-post .post-tag {
    margin-top: 30px;
    justify-content: flex-end;
    -moz-column-gap: 0;
    column-gap: 0;
  }
}
.first-post a.tag-items {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--main-color);
  background-color: #fff;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.05em;
  min-width: 150px;
  height: 30px;
  padding-block: 5px;
  padding-inline: 10px;
  border-radius: 50px;
  transition: all 0.3s ease-in;
  margin-bottom: 10px;
}
@media screen and (min-width: 769px) {
  .first-post a.tag-items {
    font-size: 14px;
    letter-spacing: 0.15em;
    width: 100%;
    max-width: 230px;
  }
}
.first-post a.tag-items::before {
  content: "#";
  margin-right: 5px;
}
@media screen and (min-width: 769px) {
  .first-post a.tag-items.tag-items {
    margin-left: 30px;
  }
}

.nav-links {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0;
}
@media screen and (min-width: 769px) {
  .nav-links {
    justify-content: center;
  }
}
.nav-links .page-numbers {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-inline: 5px;
  letter-spacing: 0;
}
.nav-links .page-numbers:not(.dots) {
  width: 45px;
  height: 45px;
  border-radius: 100%;
  background-color: var(--main-color);
  color: #fff;
  transition: all 0.3s ease-in;
}
.nav-links .page-numbers:not(.dots).current, .nav-links .page-numbers:not(.dots):hover {
  background-color: var(--sub-color);
  opacity: 1;
}
.nav-links .page-numbers.dots {
  color: var(--main-color);
  margin-top: -4px;
  font-size: 20px;
}
.nav-links .no-page,
.nav-links .has-page a {
  display: flex;
  align-items: center;
}
.nav-links .no-page {
  opacity: 0.5;
}
.nav-links .prev-icon,
.nav-links .next-icon {
  --icon-color: var(--main-color);
  width: 45px;
  height: 45px;
  border-radius: 100%;
  border: 1px solid var(--main-color);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-inline: 7px;
  transition: all 0.3s ease-in;
}
.nav-links .has-page a:hover .prev-icon,
.nav-links .has-page a:hover .next-icon {
  background-color: var(--sub-color);
  border-color: var(--sub-color);
  --icon-color: #fff;
}
.nav-links .next-icon::before {
  content: "";
  border-width: 5px 0 5px 7px;
  border-style: solid;
  border-color: transparent transparent transparent var(--icon-color);
  margin-left: 2px;
}
.nav-links .prev-icon::before {
  content: "";
  border-width: 5px 7px 5px 0;
  border-style: solid;
  border-color: transparent var(--icon-color) transparent transparent;
  margin-right: 2px;
}
@media screen and (min-width: 769px) {
  .nav-links .prev-text,
  .nav-links .next-text {
    display: none;
  }
}

/* 投稿個別ページ */
.is-single .entry-header {
  padding-bottom: 20px;
  margin-bottom: 30px;
  border-bottom: 3px solid var(--main-color);
}
@media screen and (min-width: 769px) {
  .is-single .entry-header {
    padding-bottom: 30px;
    margin-bottom: 40px;
  }
}
.is-single h1.entry-title {
  font-size: 22px;
  line-height: 40px;
  letter-spacing: 0.1em;
  margin-bottom: 20px;
  color: var(--main-color);
}
@media screen and (min-width: 769px) {
  .is-single h1.entry-title {
    font-size: 34px;
    line-height: 46px;
  }
}
.is-single .post-category span {
  background-color: var(--main-color);
  color: #fff;
  font-size: 10px;
  letter-spacing: 0.05em;
  height: 30px;
  min-width: 120px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
  padding-inline: 15px;
}
@media screen and (min-width: 769px) {
  .is-single .post-category span {
    min-width: 160px;
    font-size: 15px;
    letter-spacing: 0.2em;
    height: 35px;
  }
}
.is-single .post-category span.cat-color-orange {
  background-color: var(--accent-color);
}
.is-single .post-category span.cat-color-green {
  background-color: var(--green-color);
}
.is-single span.posted-on {
  margin-left: 20px;
  font-size: 12px;
  letter-spacing: 0.15em;
  font-weight: 700;
  white-space: nowrap;
  color: var(--main-color);
}
@media screen and (min-width: 769px) {
  .is-single span.posted-on {
    font-size: 14px;
    letter-spacing: 0.12em;
  }
}
.is-single span.post-tag {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 20px;
}
.is-single a.tag-items {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--main-color);
  background-color: var(--base-color);
  font-weight: 700;
  font-size: 13px;
  line-height: 1.2;
  letter-spacing: 0.05em;
  padding-inline: 20px;
  min-height: 28px;
  padding-block: 5px;
  border-radius: 50px;
  max-width: 230px;
  margin-bottom: 10px;
  margin-right: 20px;
}
@media screen and (min-width: 769px) {
  .is-single a.tag-items {
    font-size: 14px;
    letter-spacing: 0.15em;
    width: 100%;
  }
}
.is-single a.tag-items::before {
  content: "#";
  margin-right: 5px;
}
.is-single .post-thumbnail {
  margin-bottom: 50px;
}

.custom-comment {
  display: flex;
  margin-top: 70px;
  align-items: flex-start;
}
@media screen and (max-width: 768px) {
  .custom-comment {
    flex-direction: column;
  }
}

.custom_comment__avatar {
  flex-shrink: 0;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  max-width: 140px;
}
@media screen and (min-width: 769px) {
  .custom_comment__avatar {
    flex-direction: column;
  }
}
.custom_comment__avatar figure {
  width: 100px;
  position: relative;
  border-radius: 100%;
  background-color: #efefef;
}
@media screen and (min-width: 769px) {
  .custom_comment__avatar figure {
    width: 120px;
  }
}
.custom_comment__avatar figure::before {
  content: "";
  display: block;
  padding-top: 100%;
}
.custom_comment__avatar figure img {
  height: 100%;
  width: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -o-object-fit: cover;
  object-fit: cover;
}
.custom_comment__avatar .avatar__meta {
  display: block;
  color: var(--main-color);
  font-weight: 700;
  margin-left: 20px;
}
@media screen and (min-width: 769px) {
  .custom_comment__avatar .avatar__meta {
    margin-left: 0;
    text-align: center;
  }
}
.custom_comment__avatar .avatar__title {
  line-height: 21px;
}
.custom_comment__avatar .avatar__name {
  line-height: 21px;
  margin-top: 0px;
}

.custom-comment__content {
  border: 2px solid var(--main-color);
  position: relative;
  padding-block: 20px;
  padding-inline: 20px;
  border-radius: 6px;
  color: var(--main-color);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.15em;
  line-height: 26px;
  min-height: 127px;
  width: 100%;
  margin-top: 20px;
}
.custom-comment__content::before {
  content: "";
  border-width: 10px 15px 10px 0;
  border-style: solid;
  border-color: transparent var(--main-color) transparent transparent;
  position: absolute;
  left: 50px;
  top: -18px;
  transform: rotate(90deg);
}
.custom-comment__content::after {
  content: "";
  border-width: 10px 15px 10px 0;
  border-style: solid;
  border-color: transparent #fff transparent transparent;
  position: absolute;
  left: 50px;
  top: -14px;
  transform: rotate(90deg);
}
@media screen and (min-width: 769px) {
  .custom-comment__content {
    margin-left: 40px;
    margin-top: 0;
    padding-block: 30px;
    padding-inline: 35px;
    font-size: 18px;
    line-height: 31.5px;
  }
  .custom-comment__content::before {
    left: -15px;
    top: 50px;
    transform: rotate(0deg);
  }
  .custom-comment__content::after {
    transform: rotate(0deg);
    left: -12px;
    top: 50px;
  }
}

a.back-home-button {
  display: flex;
  position: relative;
  justify-content: center;
  align-items: center;
  border: 2px solid;
  border-radius: 10px;
  height: 60px;
  margin-top: 40px;
  font-size: 15px;
  letter-spacing: 0.3em;
  font-weight: 700;
  color: var(--main-color);
}
a.back-home-button .button-icon-arrow {
  width: 42px;
  height: 42px;
  border-radius: 100%;
  background-color: var(--main-color);
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  left: 18px;
  transition: background-color 0.3s ease-in;
}
a.back-home-button .button-icon-arrow::before {
  content: "";
  border-width: 5px 7px 5px 0;
  border-style: solid;
  border-color: transparent #fff transparent transparent;
  margin-right: 2px;
}

.navigation-post {
  display: grid;
  grid-template-columns: 50% 50%;
  margin-top: 45px;
}
.navigation-post .nav-previous {
  border-right: 1px solid;
}
.navigation-post .next-icon,
.navigation-post .prev-icon {
  width: 42px;
  height: 42px;
  border-radius: 100%;
  background-color: var(--main-color);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background-color 0.3s ease-in;
}
.navigation-post .next-icon::before,
.navigation-post .prev-icon::before {
  content: "";
  border-width: 5px 7px 5px 0;
  border-style: solid;
  border-color: transparent #fff transparent transparent;
  margin-right: 2px;
}
.navigation-post .next-icon::before {
  transform: rotate(180deg);
  margin-right: -2px;
}
.navigation-post .nav-post-title {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
@media screen and (max-width: 768px) {
  .navigation-post .nav-post-title {
    display: none;
  }
}
@media screen and (min-width: 769px) {
  .navigation-post .navi-post-title-sp {
    display: none;
  }
}

.nav-next div,
.nav-next a,
.nav-previous div,
.nav-previous a {
  display: grid;
  align-items: center;
  grid-gap: 10px;
  gap: 10px;
  font-size: 14px;
  letter-spacing: 0.1em;
  font-weight: 700;
  line-height: 24px;
  height: 100%;
}
.nav-next div:hover,
.nav-next a:hover,
.nav-previous div:hover,
.nav-previous a:hover {
  opacity: 1;
}
.nav-next.no-page div,
.nav-previous.no-page div {
  pointer-events: none;
  opacity: 0.5;
}

.nav-previous div,
.nav-previous a {
  grid-template-columns: 45px 1fr;
  justify-content: flex-start;
}

.nav-next div,
.nav-next a {
  grid-template-columns: 1fr 45px;
  text-align: right;
}

.sidebar h2 {
  color: var(--main-color);
  display: flex;
  justify-content: space-between;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0.1em;
  border-bottom: 2px solid;
  padding-block: 10px;
}
.sidebar h2:first-child {
  padding-top: 0;
}
.sidebar h2 span {
  font-size: 15px;
  letter-spacing: 0.2em;
  white-space: nowrap;
}
.sidebar .sidebar-content {
  margin-bottom: 50px;
}
.sidebar .latest-post {
  display: grid;
  grid-template-columns: 88px 1fr;
  grid-gap: 15px;
  gap: 15px;
  margin-block: 20px;
  align-items: center;
}
.sidebar .latest-post .post-thumbnail {
  margin-bottom: 0;
  width: 100%;
  position: relative;
}
.sidebar .latest-post .post-thumbnail::before {
  content: "";
  display: block;
  padding-top: 67%;
}
.sidebar .latest-post .post-thumbnail img {
  height: 100%;
  width: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -o-object-fit: cover;
  object-fit: cover;
}
.sidebar .latest-post .entry-title {
  font-size: 14px;
  letter-spacing: 0.1em;
  line-height: 20px;
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.sidebar .latest-post .latest-pot__meta {
  margin-top: 8px;
  line-height: 1;
}
.sidebar .post-category {
  margin-right: 10px;
}
.sidebar .post-category span {
  font-size: 10px;
  letter-spacing: 0.1em;
  height: 18px;
  min-width: 80px;
  width: auto;
  padding-inline: 8px;
}
.sidebar span.posted-on {
  font-size: 10px;
  letter-spacing: 0.2em;
  margin-left: 0;
}
.sidebar .category-list__item {
  border-bottom: 1px dotted var(--font-color);
  color: var(--main-color);
}
.sidebar .category-list__item.cat-color-orange {
  color: var(--accent-color);
}
.sidebar .category-list__item.cat-color-green {
  color: var(--green-color);
}
.sidebar .category-list__item a {
  display: flex;
  justify-content: space-between;
  padding-block: 8px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.1em;
}
.sidebar .category-list__item a span {
  color: var(--font-color);
}
.sidebar .archive-header {
  font-size: 14px;
  letter-spacing: 0.1em;
  font-weight: 700;
  padding-block: 15px 13px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
}
.sidebar .archive-header:after {
  transition: transform 0.3s ease-in;
  content: "";
  border-style: solid;
  border-width: 0 5px 6px 5px;
  border-color: transparent transparent var(--main-color) transparent;
}
.sidebar .archive-header.is-close::after {
  transform: rotate(180deg);
}
.sidebar .archive-list {
  border-bottom: 1px dotted;
  padding-bottom: 15px;
}
.sidebar .js-accordion.is-close + .archive-list {
  border-bottom: 1px dotted;
  padding-bottom: 0;
}
.sidebar .js-accordion.is-close + .archive-list .archive-list__item a {
  height: 0;
  visibility: hidden;
  opacity: 0;
}
.sidebar .archive-list__item a {
  transition: height 0.3s ease-in, opacity 0.3s ease-in, visibility 0.3s ease-in;
  opacity: 1;
  visibility: visible;
  display: flex;
  align-items: center;
  font-size: 14px;
  letter-spacing: 0.1em;
  height: 40px;
  padding-inline: 15px;
}
.sidebar .archive-list__item a:hover {
  opacity: 0.6;
}

.entry-content .no-post-p {
  text-align: center;
  padding-top: 20px;
}

/* 検索フォーム */
.serach-form form {
  display: grid;
  grid-template-columns: 1fr 35px;
}
.no-results .serach-form form {
  grid-template-columns: 1fr 50px;
}

.search-form__input {
  border: 1px solid var(--font-color);
  border-radius: 3px 0 0 3px;
  font-size: 12px;
  letter-spacing: 0.2em;
  padding: 9px 12px;
  width: 100%;
}
.no-results .search-form__input {
  font-size: 20px;
}

.search-form__button {
  background-color: var(--main-color);
  color: #fff;
  border-radius: 0 3px 3px 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.3s ease-in;
  border: 1px solid var(--font-color);
  border-left: none;
}
.no-results .search-form__button {
  margin-top: 0;
}

/* 見つからないページ */
.no-results.not-found .entry-title {
  font-size: 18px;
  line-height: 32px;
  letter-spacing: 0.15em;
  padding-block: 30px;
  text-align: center;
}
@media screen and (min-width: 769px) {
  .no-results.not-found .entry-title {
    padding-block: 40px;
    font-size: 36px;
    line-height: 56px;
  }
}
.no-results.not-found .entry-content {
  max-width: 720px;
  margin: auto;
  padding-inline: 20px;
}
.no-results.not-found .serach-form {
  margin-top: 30px;
}

.home {
  --hero-clip-x: -48%;
  --hero-clip-h: 480px;
  --hero-slider-h: 470px;
}
.home .hero-header {
  background-image: none;
  color: var(--main-color);
  height: 100vh;
  max-height: 680px;
  overflow: hidden;
  position: relative;
}
@media screen and (min-width: 769px) {
  .home .hero-header {
    max-height: 980px;
  }
}
@media screen and (min-width: 960px) {
  .home .hero-header {
    height: calc(100vh + 170px);
  }
}
.home .hero-header::before {
  content: none;
}
.home .hero-header .hero-header__content {
  padding-top: 0;
  padding-inline: 7%;
  width: 100%;
  max-width: var(--content-width-wide);
  height: 100%;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr 170px;
  justify-content: center;
  position: relative;
}
@media screen and (min-width: 769px) {
  .home {
    --hero-clip-x: -50%;
    --hero-clip-h: 740px;
    --hero-slider-h: 730px;
  }
}
@media screen and (min-width: 1200px) {
  .home {
    --hero-clip-x: -50%;
    --hero-clip-h: 1000px;
    --hero-slider-h: 980px;
  }
}
.home .hero-clip-path {
  position: absolute;
  top: 0;
  left: 50%;
  z-index: 2;
  max-width: none;
  transform: translateX(var(--hero-clip-x));
  width: 2000px;
  height: var(--hero-clip-h);
}
.home .hero-header__slider {
  position: absolute;
  top: 0;
  left: 50%;
  height: 100%;
  width: 100%;
  max-width: 1600px;
  max-height: var(--hero-slider-h);
  transform: translateX(var(--hero-clip-x));
}
@keyframes zoomUp {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(1.15);
  }
}
.home .hero-header__slider .swiper-slide-active img,
.home .hero-header__slider .swiper-slide-duplicate-active img,
.home .hero-header__slider .swiper-slide-prev img {
  animation: zoomUp 7s linear 0s normal both;
}
.home .hero-header__slider .swiper-slide img {
  -o-object-fit: cover;
  object-fit: cover;
  height: 100%;
  width: 100%;
}
.home .hero-header__slider .swiper-wrapper {
  height: 99%;
  overflow: hidden;
}
.home .hero-header__copy {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
@media screen and (min-width: 481px) {
  .home .hero-header__copy {
    justify-content: center;
  }
}
.home .hero-header__main-copy {
  font-family: "Microsoft YaHei";
  font-size: 32px;
  line-height: 1.75;
  letter-spacing: 0.15em;
}
.home .hero-header__main-copy span {
  display: block;
}
@media screen and (min-width: 481px) {
  .home .hero-header__main-copy {
    font-size: 50px;
  }
  .home .hero-header__main-copy span {
    display: inline-block;
  }
}
@media screen and (min-width: 960px) {
  .home .hero-header__main-copy {
    font-size: 66px;
  }
}
@media screen and (min-width: 769px) {
  .home .main-copy__suffix {
    color: #fff;
  }
}
.home .border-text-box {
  display: inline-block;
  background-color: #fff;
  width: 210px;
  height: 66px;
  border: 3px solid var(--font-color);
  box-shadow: 3px 3px 0 var(--font-color);
  border-radius: 10px;
  position: relative;
}
@media screen and (min-width: 960px) {
  .home .border-text-box {
    border-width: 5px;
    width: 350px;
    height: 110px;
  }
}
.home .border-text-box img {
  margin-inline: auto;
  margin-block: 15px;
  display: block;
}
@media screen and (max-width: 959px) {
  .home .border-text-box img {
    height: 38px;
    margin-block: 10px;
  }
}
.home .hero-header__animation {
  vertical-align: -20px;
  margin-right: 15px;
  margin-left: -15px;
  overflow: hidden;
  /* アニメーションのクラスを追加 */
  /* アニメーションのキーフレームを定義 */
}
.home .hero-header__animation .slider {
  display: flex;
  flex-direction: column-reverse;
  transform: translateY(-100%);
}
.home .hero-header__animation .slide {
  flex: 0 0 100%;
  width: 100%;
}
.home .hero-header__animation .animate {
  animation: slideAnimation 1.8s forwards ease;
}
@keyframes slideAnimation {
  0% {
    transform: translateY(-100%);
  }
  5% {
    transform: translateY(-60%);
  }
  25%, 35% {
    transform: translateY(-67%);
  }
  45% {
    transform: translateY(-27%);
  }
  65%, 75% {
    transform: translateY(-33%);
  }
  85% {
    transform: translateY(7%);
  }
  100% {
    transform: translateY(0%);
  }
}
.home .hero-header__sub-copy {
  font-family: "Microsoft YaHei";
  font-size: 14px;
  line-height: 1.75;
  letter-spacing: 0.15em;
  margin-top: 10px;
}
@media screen and (min-width: 769px) {
  .home .hero-header__sub-copy {
    font-size: 20px;
  }
}
.home .hedro-header__news {
  border-radius: 10px;
  display: grid;
  grid-template-columns: 1fr;
  height: 90px;
  border: 2px solid;
  align-items: center;
  background-color: #fff;
  margin-top: 70px;
  max-width: var(--content-width);
}
@media screen and (min-width: 769px) {
  .home .hedro-header__news {
    grid-template-columns: 156px 1fr;
  }
}
@media screen and (min-width: 960px) {
  .home .hedro-header__news {
    margin-top: 0;
    height: 70px;
    border-radius: 50px;
  }
}
.home .hero-header__news-header {
  font-weight: 700;
  padding-inline: 35px;
  border-right: 2px solid;
}
@media screen and (max-width: 768px) {
  .home .hero-header__news-header {
    display: none;
  }
}
.home .hero-header__news-content {
  padding-inline: 20px;
  overflow: hidden;
}
@media screen and (min-width: 769px) {
  .home .hero-header__news-content {
    padding-inline: 35px;
  }
}
.home .latest-post-single {
  display: block;
  font-size: 14px;
  line-height: 1.75;
}
@media screen and (min-width: 769px) {
  .home .latest-post-single {
    display: grid;
    grid-template-columns: 125px 1fr;
  }
}
.home .latest-post-single .latest-post_title {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.home .latest-post__meta {
  margin-right: 35px;
  white-space: nowap;
}
.home .section__bg-text {
  font-size: 32px;
}
@media screen and (min-width: 769px) {
  .home .section__bg-text {
    font-size: 60px;
  }
}
@media screen and (min-width: 1200px) {
  .home .section__bg-text {
    font-size: 45px;
  }
}

.brand-identity {
  position: relative;
  padding-block: 60px 150px;
  background-image: url(../images/brand-bg.svg);
  background-repeat: no-repeat;
  background-size: 100vw;
  background-position: left calc(50% + 20vw) bottom 100px;
}
@media screen and (min-width: 769px) {
  .brand-identity {
    padding-block: 20px 200px;
  }
}
@media screen and (min-width: 481px) {
  .brand-identity {
    background-position: left calc(50% + 35vw) bottom 100px;
  }
}
@media screen and (min-width: 960px) {
  .brand-identity {
    background-position: left calc(50% + 492px) bottom 100px;
    background-size: 983px;
  }
}
.brand-identity .brand-identity__bg-text {
  color: var(--base-color);
  line-height: 1;
}
.brand-identity .inner-content {
  display: grid;
  grid-template-columns: 1fr 265px 1fr;
  font-size: 14px;
  line-height: 3;
  text-align: center;
  font-weight: 700;
  letter-spacing: 0.15em;
  position: relative;
  max-width: 100vw;
}
@media screen and (min-width: 769px) {
  .brand-identity .inner-content {
    grid-template-columns: 1fr 550px 1fr;
    font-size: 16px;
    line-height: 3.375;
  }
}
.brand-identity .inner-content p {
  margin-top: 40px;
}
@media screen and (max-width: 768px) {
  .brand-identity .inner-content > div {
    padding-top: 10px;
  }
}
.brand-identity .js-slideIn-wrapper {
  position: sticky;
  top: 70px;
  z-index: 2;
  overflow: hidden;
}
@media screen and (min-width: 769px) {
  .brand-identity .js-slideIn-wrapper {
    top: 100px;
  }
}
.brand-identity .brand-identity__content {
  padding-bottom: 100px;
}
.brand-identity h2 {
  color: var(--main-color);
  font-size: 24px;
  line-height: 1.75;
  letter-spacing: 0.15em;
}
@media screen and (min-width: 769px) {
  .brand-identity h2 {
    margin-top: 30px;
    font-size: 56px;
  }
}
.brand-identity .brand-identity__bg {
  position: absolute;
  left: 50%;
  bottom: 250px;
  z-index: 1;
}
.brand-identity .brand-identity__bg-l,
.brand-identity .brand-identity__bg-r {
  width: 100%;
  max-width: 350px;
  display: block;
  transition: transform 0.5s ease-out;
}
.brand-identity .brand-identity__bg-l.js-slideIn {
  opacity: 0;
  visibility: hidden;
  width: 0;
  transform: translateX(-200px);
}
.brand-identity .brand-identity__bg-l.js-slideIn.is-inview {
  opacity: 1;
  visibility: visible;
  width: 100%;
  transform: translateX(0);
}
.brand-identity .brand-identity__bg-r {
  margin-left: auto;
}
.brand-identity .brand-identity__bg-r.js-slideIn {
  opacity: 0;
  visibility: hidden;
  width: 0;
  transform: translateX(200px);
}
.brand-identity .brand-identity__bg-r.js-slideIn.is-inview {
  opacity: 1;
  visibility: visible;
  width: 100%;
  transform: translateX(0);
}

.mission {
  background-color: var(--base-color);
  overflow: hidden;
  padding-block: 120px 200px;
  padding-inline: 20px;
  background-image: url(../images/sep-brand-identy.svg), url(../images/sep-mission.svg), url(../images/mission-bg@2x.png);
  background-repeat: no-repeat, no-repeat, repeat-x;
  background-position: center top, center bottom -1px, center center;
  background-size: var(--sep-image-size), var(--sep-image-size), contain;
}
@media screen and (min-width: 481px) {
  .mission {
    padding-block: 240px 300px;
  }
}
@media screen and (min-width: 769px) {
  .mission {
    padding-block: 260px 350px;
  }
}

.mission__bg-text {
  width: var(--content-width);
  width: 100%;
  line-height: 1.75;
  color: #fff;
  margin-inline: auto;
}

.mission__content {
  max-width: var(--content-width);
  width: 100%;
  margin-inline: auto;
  display: grid;
  grid-template-columns: 1fr;
  grid-gap: 20px;
  gap: 20px;
  position: relative;
}
@media screen and (min-width: 769px) {
  .mission__content {
    grid-template-columns: 50% 1fr;
    gap: 30px;
    max-width: 880px;
  }
}
@media screen and (min-width: 1200px) {
  .mission__content {
    grid-template-columns: 50% 380px;
    gap: 90px;
    max-width: var(--content-width);
  }
}
.mission__content h2 {
  color: var(--main-color);
  font-size: 24px;
  line-height: 1.83;
  text-align: center;
  font-weight: 700;
  letter-spacing: 0.15em;
}
@media screen and (min-width: 769px) {
  .mission__content h2 {
    font-size: 40px;
    text-align: left;
    line-height: 1.75;
  }
}
@media screen and (min-width: 1200px) {
  .mission__content h2 {
    font-size: 56px;
  }
}
.mission__content .mission__conten-bg {
  position: absolute;
}
@media screen and (max-width: 768px) {
  .mission__content .mission__conten-bg {
    bottom: -50px;
    width: 95px;
    right: -40px;
  }
}
@media screen and (min-width: 769px) {
  .mission__content .mission__conten-bg {
    bottom: -180px;
    right: -150px;
  }
}
@media screen and (min-width: 1200px) {
  .mission__content .mission__conten-bg {
    bottom: 0;
    right: -150px;
  }
}

.mission__content-left .border-text-box {
  width: 94px;
  height: 45px;
  border-width: 3px;
  vertical-align: -13px;
  margin-right: 13px;
  margin-left: 5px;
}
@media screen and (min-width: 769px) {
  .mission__content-left .border-text-box {
    width: 125px;
    height: 75px;
    border-width: 4px;
    vertical-align: -20px;
    margin-right: 15px;
    margin-left: 10px;
  }
}
@media screen and (min-width: 1200px) {
  .mission__content-left .border-text-box {
    width: 230px;
    height: 110px;
    border-width: 5px;
    vertical-align: -30px;
    margin-right: 15px;
    margin-left: 10px;
  }
}
.mission__content-left .border-text-box img {
  margin-block: 8px;
  height: 22px;
}
@media screen and (min-width: 769px) {
  .mission__content-left .border-text-box img {
    margin-block: 12px;
    height: 40px;
  }
}
@media screen and (min-width: 1200px) {
  .mission__content-left .border-text-box img {
    margin-block: 20px;
    height: 60px;
  }
}

.mission__content-right {
  font-size: 14px;
  line-height: 2.4;
  padding-top: 10px;
  letter-spacing: 0.15em;
  font-weight: 700;
}
@media screen and (min-width: 769px) {
  .mission__content-right {
    font-size: 16px;
    line-height: 2.5;
  }
}
.mission__content-right * + * {
  margin-top: 30px;
}

section.product {
  background-color: var(--main-color);
  background-image: url(../images/sep-product.svg), url(../images/product-bg@2x.png);
  background-repeat: no-repeat, repeat-x;
  overflow: hidden;
  background-position: center bottom -1px, center center;
  background-size: var(--sep-image-size), contain;
  color: #fff;
  padding-block: 60px 150px;
}
@media screen and (min-width: 481px) {
  section.product {
    padding-block: 60px 250px;
  }
}
@media screen and (min-width: 769px) {
  section.product {
    padding-block: 0 250px;
  }
}
@media screen and (min-width: 1200px) {
  section.product {
    padding-block: 0 350px;
  }
}
section.product h2 {
  margin-top: 25px;
  font-size: 24px;
  letter-spacing: 0.15em;
  text-align: center;
}
@media screen and (min-width: 769px) {
  section.product h2 {
    margin-top: 0;
    font-size: 64px;
	font-weight:600;
  }
}
section.product .inner-content {
  padding-inline: 20px;
  margin-top: 50px;
}
@media screen and (min-width: 769px) {
  section.product .inner-content {
    margin-top: 70px;
  }
}
section.product .inner-content > .page-button {
  margin-top: 60px;
  margin-inline: auto;
  justify-content: center;
  color: #fff;
}
section.product .inner-content > .page-button .button-icon-arrow {
  margin-left: 80px;
  background-color: #fff;
}
section.product .inner-content > .page-button .button-icon-arrow::before {
  border-left-color: var(--main-color);
}

.product__bg-text {
  line-height: 1.25;
  color: var(--base-color);
  opacity: 0.2;
  padding-inline: 20px;
}
@media screen and (min-width: 769px) {
  .product__bg-text {
    padding-top: 60px;
    padding-bottom: 20px;
  }
}
@media screen and (min-width: 1200px) {
  .product__bg-text {
    font-size: 140px;
    line-height: 1.75;
    line-height: 1.2;
    padding-top: 140px;
    padding-bottom: 50px;
  }
}

.products__safty-contents {
  display: grid;
  grid-template-columns: 50% 50%;
  max-width: 980px;
  margin-inline: auto;
  border-radius: 0 20px 20px 20px;
  background-color: var(--base-color);
  position: relative;
}
@media screen and (max-width: 768px) {
  .products__safty-contents {
    display: flex;
    flex-direction: column-reverse;
  }
}
.products__safty-contents::after {
  content: "";
  width: 100%;
  height: 100%;
  border-width: 3px;
  bottom: -8px;
  right: -8px;
  border-radius: 0 0 28px 0;
  border-style: none solid solid none;
  border-color: var(--accent-color);
  position: absolute;
  z-index: 1;
}
@media screen and (min-width: 769px) {
  .products__safty-contents::after {
    border-width: 5px;
    bottom: -13px;
    right: -13px;
    border-radius: 0 0 33px 0;
  }
}

.safty-contents {
  background-color: #fff;
  color: var(--font-color);
  padding-block: 55px;
  padding-inline: 20px;
  border-radius: 0 0 20px 20px;
  position: relative;
  z-index: 2;
}
@media screen and (min-width: 769px) {
  .safty-contents {
    padding-block: 80px;
    padding-inline: 60px 50px;
    border-radius: 0 0 0 20px;
  }
}
.safty-contents > p {
  font-size: 14px;
  letter-spacing: 0.15em;
  line-height: 30px;
  margin-top: 30px;
}
.safty-contents a.page-button {
  margin-top: 30px;
}
.safty-contents a.page-button .button-icon-arrow {
  margin-left: 80px;
}

.safty-contents__sub-header {
  font-size: 24px;
  font-weight:600;
  color: var(--main-color);
  letter-spacing: 0.15em;
}
@media screen and (max-width: 768px) {
  .safty-contents__sub-header {
    text-align: center;
  }
}

.safty-contents__header {
  font-size: 34px;
  letter-spacing: 0.15em;
  font-weight: 700;
  color: var(--main-color);
  margin-top: 10px;
}
@media screen and (max-width: 768px) {
  .safty-contents__header {
    text-align: center;
    font-size: 24px;
  }
}

.safty-contents__list {
  display: grid;
  grid-gap: 10px;
  gap: 10px;
  margin-top: 30px;
  grid-template-columns: 1fr 1fr 1fr;
}
@media screen and (max-width: 959px) {
  .safty-contents__list {
    grid-template-columns: 1fr;
  }
}
.safty-contents__list li {
  background-color: var(--green-color);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px;
  width: 100%;
  border-radius: 10px;
  line-height: 23px;
  text-align: center;
  font-weight: 700;
}
@media screen and (max-width: 959px) {
  .safty-contents__list li br {
    display: none;
  }
}
@media screen and (min-width: 960px) {
  .safty-contents__list li {
    padding: 10px;
    width: 120px;
    height: 120px;
    border-radius: 100%;
  }
}
.safty-contents__list li span {
  font-size: 0.67em;
  vertical-align: 2px;
}

.safty-figure {
  position: relative;
}
@media screen and (max-width: 768px) {
  .safty-figure {
    height: 320px;
  }
}

.safty__conten-pc {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-width: none;
  z-index: 2;
}
@media screen and (max-width: 1089px) {
  .safty__conten-pc {
    width: 100%;
  }
}
@media screen and (max-width: 768px) {
  .safty__conten-pc {
    height: 100%;
    width: auto;
  }
}
@media screen and (max-width: 480px) {
  .safty__conten-pc {
    width: 100%;
    height: auto;
  }
}

.safty__conten-man {
  position: absolute;
  bottom: 0;
  left: -10px;
  z-index: 2;
}
@media screen and (max-width: 768px) {
  .safty__conten-man {
    left: 50px;
    width: 105px;
  }
}
@media screen and (max-width: 480px) {
  .safty__conten-man {
    left: 20px;
    width: 70px;
  }
}

.safty__conten-woman {
  position: absolute;
  bottom: 0;
  z-index: 2;
  right: -10px;
}
@media screen and (max-width: 768px) {
  .safty__conten-woman {
    right: 25px;
    width: 190px;
  }
}
@media screen and (max-width: 480px) {
  .safty__conten-woman {
    right: 25px;
    width: 118px;
  }
}

.product-bi,
.product-mecha {
  margin-top: 80px;
  position: relative;
  max-width: 980px;
  margin-inline: auto;
  --product-key-color: var(--accent-color);
}
@media screen and (min-width: 769px) {
  .product-bi,
  .product-mecha {
    display: flex;
    flex-wrap: wrap;
  }
}
.product-bi h3,
.product-mecha h3 {
  font-size: 24px;
  letter-spacing: 0.1em;
  text-align: center;
  width: 100%;
}
@media screen and (min-width: 1200px) {
  .product-bi h3,
  .product-mecha h3 {
    text-align: left;
    white-space: nowrap;
    position: absolute;
    top: 0;
    left: -80px;
    writing-mode: vertical-rl;
    font-size: 28px;
    line-height: 30px;
    margin-right: 40px;
    width: auto;
  }
}
.product-bi h3 span,
.product-mecha h3 span {
  font-family: "Roboto", "Microsoft YaHei", sans-serif;
  color: var(--product-key-color);
  font-weight: normal;
  font-size: 14px;
  letter-spacing: 0.15em;
  display: block;
}
.product-bi ul,
.product-mecha ul {
  display: grid;
  grid-template-columns: 1fr;
  margin-top: 30px;
  grid-gap: 20px;
  gap: 20px;
  width: 100%;
}
@media screen and (min-width: 769px) {
  .product-bi ul,
  .product-mecha ul {
    height: 200px;
    grid-template-columns: 1fr 1fr 1fr 1fr;
  }
}
@media screen and (min-width: 1200px) {
  .product-bi ul,
  .product-mecha ul {
    margin-top: 0;
  }
}
.product-bi ul li,
.product-mecha ul li {
  position: relative;
}
.product-bi ul li > a,
.product-mecha ul li > a {
  background-color: #fff;
  border-radius: 0 20px 20px 20px;
  position: relative;
  color: var(--main-color);
  display: flex;
  justify-content: center;
  align-items: flex-start;
  flex-direction: column;
  padding: 25px;
  font-weight: 700;
  font-size: 20px;
  height: 100%;
  position: relative;
  z-index: 2;
}
.product-bi ul li::after,
.product-mecha ul li::after {
  content: "";
  width: 100%;
  height: 100%;
  border-width: 3px;
  border-style: none solid solid none;
  border-color: var(--product-key-color);
  position: absolute;
  bottom: -8px;
  right: -8px;
  border-radius: 0 0 28px 0;
  z-index: 1;
}
.product-bi ul li span:not(.procust-bi-name),
.product-mecha ul li span:not(.procust-bi-name) {
  font-weight: normal;
  color: var(--sub-color);
  font-size: 11px;
  letter-spacing: 0.15em;
  line-height: 1.5em;
}
.product-bi ul li span.procust-bi-name,
.product-mecha ul li span.procust-bi-name {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
}
.product-bi ul li span.procust-bi-name > span,
.product-mecha ul li span.procust-bi-name > span {
  color: var(--main-color);
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.1em;
  white-space: nowrap;
}
.product-bi ul li a > img,
.product-mecha ul li a > img {
  position: absolute;
  top: 30px;
  right: 20px;
}

.product-bi {
  margin-top: 60px;
  --product-key-color: var(--sub-color);
}
@media screen and (min-width: 769px) {
  .product-bi {
    margin-top: 40px;
  }
}
.product-bi h3 {
  left: 0;
  margin-right: 0;
}
@media screen and (min-width: 1200px) {
  .product-bi h3 {
    margin-left: 40px;
    right: -80px;
  }
}

.vision {
  padding-block: 70px 250px;
  background-image: url(../images/vision-bg-sp.jpg);
  background-size: cover;
  color: var(--main-color);
  font-weight: 700;
  background-repeat: no-repeat;
  background-position: center bottom;
}
@media screen and (min-width: 769px) {
  .vision {
    padding-block: 110px 370px;
    background-image: url(../images/vision-bg.png);
    background-size: cover;
  }
}
.vision h2 {
  font-size: 24px;
  line-height: 1.83;
  letter-spacing: 0.15em;
  text-align: center;
}
@media screen and (min-width: 769px) {
  .vision h2 {
    font-size: 56px;
    line-height: 1.75;
  }
}
.vision h2 + p {
  margin-top: 40px;
  font-size:20px;
}
.vision p {
  line-height: 2.4;
  margin-top: 20px;
  max-width: 500px;
  
}
.vision .inner-content {
  padding-inline: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.vision__bg-text {
  text-align: center;
  color: var(--base-color);
  line-height: 1.75;
}

.recruit {
  padding-block: 80px 330px;
  background-color: var(--accent-color);
  overflow: hidden;
  position: relative;
}
@media screen and (min-width: 769px) {
  .recruit {
    padding-block: 80px 400px;
  }
}
.recruit h2 {
  font-size: 24px;
  color: #fff;
  margin-top: 10px;
  letter-spacing: 0.15em;
  text-align: center;
  font-weight: 700;
}
@media screen and (min-width: 769px) {
  .recruit h2 {
    font-size: 44px;
    margin-top: 15px;
  }
}
.recruit .page-button {
  color: var(--accent-color);
  margin-top: 35px;
  justify-content: center;
}
.recruit .page-button .button-icon-arrow {
  background-color: var(--accent-color);
}
@media screen and (min-width: 1200px) {
  .recruit .page-button {
    justify-content: flex-start;
  }
}
.recruit .hero-header__animation {
  vertical-align: -20px;
  height: 45px;
  width: 130px;
  margin-left: 0;
  margin-right: 20px;
}
@media screen and (max-width: 768px) {
  .recruit .hero-header__animation {
    border-width: 3px;
    margin-right: 10px;
    vertical-align: -12px;
  }
}
@media screen and (min-width: 769px) {
  .recruit .hero-header__animation {
    height: 65px;
    width: 200px;
    vertical-align: -15px;
  }
}
@media screen and (min-width: 1200px) {
  .recruit .hero-header__animation {
    height: 90px;
    width: 300px;
    vertical-align: -20px;
  }
}
.recruit .hero-header__animation .slide {
  height: 100%;
}
.recruit .hero-header__animation .slide img {
  margin-block: 6px;
  max-height: 22px;
  display: block;
}
@media screen and (min-width: 769px) {
  .recruit .hero-header__animation .slide img {
    margin-block: 10px;
    max-height: 36px;
    height: 100%;
  }
}
@media screen and (min-width: 1200px) {
  .recruit .hero-header__animation .slide img {
    margin-block: 12px;
    max-height: 52px;
  }
}
.recruit .inner-content {
  margin-top: 20px;
  padding-inline: 20px;
  position: relative;
}
@media screen and (min-width: 769px) {
  .recruit .inner-content {
    margin-top: 75px;
  }
}
.recruit .anime-logo {
  position: absolute;
  z-index: 5;
  transition: all 1.5s ease-in;
  transition: opacity 2.2s cubic-bezier(0.5, 0, 0, 1) 0s, transform 2.2s cubic-bezier(0.5, 0, 0, 1) 0s;
  opacity: 1;
  visibility: visible;
}
.recruit .anime-logo.slide-out {
  opacity: 0;
  visibility: hidden;
}
@media screen and (max-width: 768px) {
  .recruit .l-1 {
    left: 40px;
    top: -12%;
    width: 35px;
  }
  .recruit .l-1.slide-out {
    transform: translate(-30px, -30px);
  }
  .recruit .l-2 {
    left: 0;
    top: 25%;
    width: 65px;
  }
  .recruit .l-2.slide-out {
    transform: translate(-30px, -30px);
  }
  .recruit .l-3 {
    left: 55px;
    bottom: 45%;
    width: 25px;
  }
  .recruit .l-3.slide-out {
    transform: translate(-30px, 65px);
  }
  .recruit .l-4 {
    left: 4px;
    top: 43%;
    width: 55px;
  }
  .recruit .l-4.slide-out {
    transform: translate(-30px, 100px);
  }
  .recruit .l-5 {
    bottom: 37%;
    left: 1px;
    width: 30px;
  }
  .recruit .l-5.slide-out {
    transform: translate(-30px, 85px);
  }
  .recruit .r-1 {
    right: -16px;
    top: 9%;
  }
  .recruit .r-1.slide-out {
    transform: translate(20px, -140px);
  }
  .recruit .r-2 {
    right: -5px;
    top: -30px;
    width: 60px;
  }
  .recruit .r-2.slide-out {
    transform: translate(20px, -40px);
  }
  .recruit .r-3 {
    right: 5px;
    top: 21%;
    width: 60px;
  }
  .recruit .r-3.slide-out {
    transform: translate(20px, -40px);
  }
  .recruit .r-4 {
    right: 0px;
    top: 45%;
    width: 15px;
  }
  .recruit .r-4.slide-out {
    transform: translate(10px, 35px);
  }
  .recruit .r-5 {
    right: 11px;
    top: 50%;
    width: 38px;
  }
  .recruit .r-5.slide-out {
    transform: translate(20px, 50px);
  }
}
@media screen and (min-width: 769px) {
  .recruit .l-1 {
    left: 6vw;
    top: -12%;
  }
  .recruit .l-1.slide-out {
    transform: translate(-100px, -50px);
  }
  .recruit .l-2 {
    left: -7vw;
    top: 28%;
  }
  .recruit .l-2.slide-out {
    transform: translate(-150px, -100px);
  }
  .recruit .l-3 {
    left: 18vw;
    bottom: 25%;
  }
  .recruit .l-3.slide-out {
    transform: translate(-50px, -40px);
  }
  .recruit .l-4 {
    left: -3vw;
    bottom: 23%;
  }
  .recruit .l-4.slide-out {
    transform: translate(-100px, 60px);
  }
  .recruit .l-5 {
    bottom: -6%;
    left: 2.5vw;
  }
  .recruit .l-5.slide-out {
    transform: translate(-100px, 100px);
  }
  .recruit .r-1 {
    right: 0;
    top: -15%;
  }
  .recruit .r-1.slide-out {
    transform: translate(100px, -80px);
  }
  .recruit .r-2 {
    right: 20px;
    top: -8%;
  }
  .recruit .r-2.slide-out {
    transform: translate(100px, -30px);
  }
  .recruit .r-3 {
    right: 10vw;
    top: 28%;
  }
  .recruit .r-3.slide-out {
    transform: translate(100px, 0);
  }
  .recruit .r-4 {
    right: 20vw;
    bottom: 30%;
  }
  .recruit .r-4.slide-out {
    transform: translate(100px, 70px);
  }
  .recruit .r-5 {
    right: 60px;
    bottom: -15%;
  }
  .recruit .r-5.slide-out {
    transform: translate(100px, 80px);
  }
}
@media screen and (min-width: 1300px) {
  .recruit .l-1 {
    left: 95px;
    top: -12%;
  }
  .recruit .l-2 {
    left: -10px;
    top: 8%;
  }
  .recruit .l-3 {
    left: 60px;
    top: 49%;
  }
  .recruit .l-4 {
    left: 65px;
    bottom: 13%;
  }
  .recruit .l-5 {
    left: -35px;
    bottom: -6%;
  }
  .recruit .r-1 {
    right: 0;
    top: -15%;
  }
  .recruit .r-2 {
    right: 40px;
    top: -8%;
  }
  .recruit .r-3 {
    right: -50px;
    top: 50%;
  }
  .recruit .r-4 {
    right: 100px;
    bottom: -4%;
  }
  .recruit .r-5 {
    right: -60px;
    bottom: -15%;
  }
}
.recruit .recruit-sub-title-image {
  display: block;
  margin-inline: auto;
  padding-inline: 20px;
}
@media screen and (min-width: 769px) {
  .recruit .recruit-sub-title-image {
    position: absolute;
    left: 60%;
    top: 150px;
    padding-inline: 0;
  }
}

.recruit__bg-text {
  line-height: 1.2;
  color: #fff;
  opacity: 0.5;
}

.recruit__contents {
  max-width: 1100px;
  margin-inline: auto;
  background-color: #fff;
  position: relative;
  padding-block: 40px;
  padding-inline: 20px;
}
@media screen and (min-width: 769px) {
  .recruit__contents {
    padding-block: 80px;
    padding-inline: 50px;
  }
}
@media screen and (min-width: 1200px) {
  .recruit__contents {
    padding-block: 150px;
    padding-inline: 100px;
  }
}
.recruit__contents > div {
  margin-top: 25px;
}
@media screen and (min-width: 769px) {
  .recruit__contents > div {
    max-width: 52vw;
  }
}
@media screen and (min-width: 1200px) {
  .recruit__contents > div {
    max-width: 620px;
  }
}

.recruit-contents__image {
  margin-top: 25px;
  margin-inline: auto;
  display: block;
}
@media screen and (min-width: 769px) {
  .recruit-contents__image {
    margin-top: 0;
    position: absolute;
    top: 60px;
    right: -14%;
    width: 400px;
  }
}
@media screen and (min-width: 1200px) {
  .recruit-contents__image {
    margin-top: 0;
    top: 65px;
    right: -220px;
    width: 540px;
  }
}

.recruit-contents__text {
  font-size: 14px;
  line-height: 2.29;
}
@media screen and (min-width: 769px) {
  .recruit-contents__text {
    font-size: 16px;
    line-height: 2;
  }
}

.recruit-contents__header {
  font-size: 24px;
  text-align: center;
  line-height: 1.875;
}
@media screen and (min-width: 769px) {
  .recruit-contents__header {
    font-size: 40px;
    text-align: justify;
  }
}
@media screen and (min-width: 1200px) {
  .recruit-contents__header {
    font-size: 56px;
  }
}

.recruit-swiper-wrapper {
  margin-inline: auto;
  padding-inline: 0;
  position: absolute;
  bottom: 100px;
  z-index: 2;
  width: 100vw;
  height: 255px;
  left: 50%;
  transform: translateX(-50%);
}
@media screen and (min-width: 769px) {
  .recruit-swiper-wrapper {
    bottom: 170px;
  }
}
.recruit-swiper-wrapper .swiper-wrapper {
  transition-timing-function: linear;
}
.recruit-swiper-wrapper .swiper-slide {
  /*スライドの幅を指定*/
  width: 375px;
}

.top-latest-posts {
  padding-block: 70px;
}
@media screen and (min-width: 769px) {
  .top-latest-posts {
    padding-block: 140px;
  }
}
.top-latest-posts .inner-content {
  padding-inline: 20px;
}
.top-latest-posts .latest-posts__list a.latest-post {
  display: flex;
  flex-direction: row-reverse;
  justify-content: space-between;
  border-bottom: 1px solid var(--main-color);
  padding-block: 30px;
}
@media screen and (min-width: 769px) {
  .top-latest-posts .latest-posts__list a.latest-post {
    padding-block: 50px;
  }
  .top-latest-posts .latest-posts__list a.latest-post:last-child {
    border-bottom: none;
  }
}
.top-latest-posts .latest-posts__list a.latest-post:first-child {
  padding-top: 0;
}
.top-latest-posts .latest-posts__list .post-thumbnail.index {
  max-width: 90px;
  margin-left: 20px;
  width: 100%;
  position: relative;
  align-self: flex-start;
}
.top-latest-posts .latest-posts__list .post-thumbnail.index::before {
  content: "";
  display: block;
  padding-top: 67%;
}
.top-latest-posts .latest-posts__list .post-thumbnail.index img {
  height: 100%;
  width: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -o-object-fit: cover;
  object-fit: cover;
}
@media screen and (min-width: 769px) {
  .top-latest-posts .latest-posts__list .post-thumbnail.index {
    max-width: 250px;
    margin-left: 50px;
  }
}
.top-latest-posts .latest-posts__list .latest-post__header .entry-title {
  font-family: "Roboto", "Microsoft YaHei", sans-serif;
  font-weight: 700;
  font-size: 18px;
  line-height: 32px;
  letter-spacing: 0.15em;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
@media screen and (min-width: 960px) {
  .top-latest-posts .latest-posts__list .latest-post__header .entry-title {
    font-size: 36px;
    line-height: 56px;
  }
}
.top-latest-posts .latest-posts__list .post-category span {
  font-size: 10px;
  margin-right: 10px;
  width: 140px;
  background-color: var(--main-color);
  color: #fff;
  letter-spacing: 0.15em;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  font-weight: 700;
  height: 30px;
  line-height: 1.2;
  padding-inline: 10px;
  white-space: nowrap;
}
@media screen and (min-width: 960px) {
  .top-latest-posts .latest-posts__list .post-category span {
    width: 190px;
    font-size: 13px;
    margin-right: 20px;
  }
}
.top-latest-posts .latest-posts__list .post-category span.cat-color-orange {
  background-color: var(--accent-color);
}
.top-latest-posts .latest-posts__list .post-category span.cat-color-green {
  background-color: var(--green-color);
}
.top-latest-posts .latest-posts__list span.posted-on {
  color: var(--main-color);
  font-size: 12px;
  letter-spacing: 0.15em;
  font-weight: 700;
  white-space: nowrap;
}
@media screen and (min-width: 960px) {
  .top-latest-posts .latest-posts__list span.posted-on {
    font-size: 13px;
  }
}
.top-latest-posts .latest-posts__list .latest-pot__meta {
  margin-top: 10px;
}

.latest-posts__content {
  display: grid;
  grid-template-columns: 1fr;
  grid-gap: 40px;
  gap: 40px;
  max-width: 1200px;
  margin-inline: auto;
}
@media screen and (min-width: 960px) {
  .latest-posts__content {
    grid-template-columns: 200px 1fr;
    gap: 60px;
  }
}
.latest-posts__content > .page-button {
  justify-content: center;
}
@media screen and (min-width: 960px) {
  .latest-posts__content > .page-button {
    display: none;
  }
}

.latest-posts__header h2 {
  font-size: 32px;
  text-align: center;
  font-weight: 700;
  letter-spacing: 0.15em;
  color: var(--main-color);
  line-height: 1;
  font-family: "Roboto", "Microsoft YaHei", sans-serif;
}
@media screen and (min-width: 960px) {
  .latest-posts__header h2 {
    font-size: 40px;
    text-align: left;
  }
}
.latest-posts__header h2 span {
  display: block;
  font-size: 24px;
  margin-top: 15px;
}
@media screen and (min-width: 960px) {
  .latest-posts__header h2 span {
    margin-top: 25px;
  }
}
.latest-posts__header > .page-button {
  margin-top: 70px;
}
@media screen and (max-width: 959px) {
  .latest-posts__header > .page-button {
    display: none;
  }
}

* {
  letter-spacing: 0.15em;
}

@media screen and (min-width: 769px) {
  .page-product-service .titled-box__title::after {
    content: "";
    background-image: url(../images/box-logo.svg);
    display: inline-block;
    width: 75px;
    height: 81px;
    background-repeat: no-repeat;
    background-size: contain;
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
  }
}
@media screen and (max-width: 768px) {
  .page-product-service .titled-box::after {
    content: "";
    background-image: url(../images/box-logo.svg);
    display: inline-block;
    width: 56px;
    height: 60px;
    background-repeat: no-repeat;
    background-size: contain;
    position: absolute;
    right: -10px;
    bottom: -65px;
    transform: translateY(-50%);
  }
}

section.strong {
  padding-block: 148px 60px;
  position: relative;
  margin-top: -48px;
  overflow: hidden;
}
@media screen and (max-width: 768px) {
  section.strong {
    padding-top: 110px;
  }
}
section.strong::before {
  content: "";
  background-image: url(../images/feature-bg.png);
  width: 1226px;
  height: 553px;
  top: 0px;
  left: -50%;
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  position: absolute;
}
@media screen and (max-width: 480px) {
  section.strong::before {
    left: -100%;
  }
}
@media screen and (min-width: 769px) {
  section.strong::before {
    width: 2500px;
    height: 773px;
    left: 0;
  }
}
section.strong .inner-content {
  padding-inline: 20px;
  position: relative;
}

.page-product-service .hero-header .hero-header__title span {
  color: var(--sub-color);
}
.page-product-service p {
  text-align: justify;
}
.page-product-service .strong__prefix {
  font-size: 24px;
  line-height: 1.25;
  text-align: center;
  font-weight: 700;
  color: var(--main-color);
}
@media screen and (min-width: 769px) {
  .page-product-service .strong__prefix {
    font-size: 34px;
  }
}

.strong__c {
  min-width: 40px;
}

.strong_copy {
  display: grid;
  grid-template-columns: auto auto auto;
  margin-top: 40px;
  align-items: center;
  grid-gap: 15px;
  gap: 15px;
  justify-content: center;
  max-width: var(--content-innner-width);
  margin-inline: auto;
}
@media screen and (min-width: 769px) {
  .strong_copy {
    margin-top: 80px;
    gap: 60px;
  }
}

.strong__l,
.strong__r {
  writing-mode: vertical-rl;
  color: #fff;
  text-align: center;
  font-weight: 700;
  font-size: 12px;
  width: 207px;
  height: 206px;
  line-height: 1.6;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  display: flex;
  align-items: flex-start;
  padding-top: 50px;
  justify-content: center;
  flex-direction: column;
  text-align: left;
}
@media screen and (min-width: 769px) {
  .strong__l,
  .strong__r {
    font-size: 20px;
    width: 372px;
    height: 370px;
    align-items: center;
    padding-top: 0;
  }
}
.strong__l .strong__h,
.strong__r .strong__h {
  font-size: 20px;
  margin-top: 0;
}
@media screen and (min-width: 769px) {
  .strong__l .strong__h,
  .strong__r .strong__h {
    font-size: 48px;
    line-height: 52px;
  }
}

.strong__l {
  background-image: url(../images/feature-bg-l.svg);
}
@media screen and (max-width: 768px) {
  .strong__l {
    padding-left: 35px;
  }
}

.strong__r {
  background-image: url(../images/feature-bg-r.svg);
}
@media screen and (max-width: 768px) {
  .strong__r {
    padding-right: 35px;
  }
}

p.strong-sufix {
  font-size: 24px;
  margin-top: 50px;
  text-align: center;
  font-weight: 700;
  color: var(--main-color);
}
@media screen and (min-width: 769px) {
  p.strong-sufix {
    font-size: 50px;
    margin-top: 75px;
  }
}

.strong_content {
  display: flex;
  margin-top: 100px;
  justify-content: space-between;
  max-width: var(--content-innner-width);
  margin-inline: auto;
}
@media screen and (max-width: 768px) {
  .strong_content {
    flex-direction: column;
    margin-top: 55px;
  }
}
.strong_content div {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}
@media screen and (min-width: 769px) {
  .strong_content div {
    max-width: 370px;
  }
  .strong_content div .strong_content__h3 {
    font-size: 38px;
  }
  .strong_content div .strong_content__h4 {
    font-size: 18px;
  }
}
@media screen and (max-width: 768px) {
  .strong_content div p {
    font-size: 13px;
    line-height: 1.75;
  }
}
.strong_content div .strong_content__h3 {
  font-size: 38px;
  border-style: solid none;
  border-width: 4px;
  padding-block: 15px;
  text-align: center;
  line-height: 1;
}
.strong_content div .strong_content__h4 {
  font-size: 15px;
  line-height: 1.75;
  text-align: center;
  height: 110px;
  display: flex;
  align-items: center;
  justify-content: center;
}
@media screen and (min-width: 769px) {
  .strong_content .flexiblity {
    margin-right: 10px;
  }
}
.strong_content .technology {
  margin-top: 50px;
}
@media screen and (min-width: 769px) {
  .strong_content .technology {
    margin-top: 0;
    margin-left: 10px;
  }
}
.strong_content .technology h3,
.strong_content .technology h4 {
  color: var(--main-color);
}

section.mecha-os {
  background: linear-gradient(90deg, var(--base-color) 0%, var(--base-color) 50%, var(--main-color) 50%, var(--main-color) 100%);
}

.mecha-os__content {
  display: grid;
  margin-inline: auto;
  grid-template-columns: 1fr;
  justify-content: center;
  color: var(--main-color);
  font-weight: 700;
}
@media screen and (min-width: 769px) {
  .mecha-os__content {
    grid-template-columns: minmax(50%, 490px) minmax(50%, 490px);
  }
}
.mecha-os__content .mecha-os__bg-text {
  font-size: 30px;
  text-align: center;
  line-height: 1.1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  color: #fff;
}
@media screen and (min-width: 769px) {
  .mecha-os__content .mecha-os__bg-text {
    height: 90px;
    font-size: 40px;
  }
}
@media screen and (min-width: 1090px) {
  .mecha-os__content .mecha-os__bg-text {
    height: 110px;
    font-size: 50px;
  }
}
.mecha-os__content .mecha-os__h2 {
  font-size: 28px;
  margin-top: 30px;
  font-weight: 700;
  text-align: center;
}
@media screen and (min-width: 769px) {
  .mecha-os__content .mecha-os__h2 {
    margin-top: 60px;
  }
}
.mecha-os__content ul {
  width: -moz-fit-content;
  width: fit-content;
  margin-inline: auto;
  margin-top: 30px;
  font-size: 16px;
}
@media screen and (min-width: 769px) {
  .mecha-os__content ul {
    margin-top: 60px;
    margin-left: 40px;
  }
}
.mecha-os__content ul li {
  margin-block: 10px;
}
.mecha-os__content a.page-button {
  margin-top: 30px;
  justify-content: center;
}
.mecha-os__content .mecha-os__mecha,
.mecha-os__content .mecha-os__os {
  padding-block: 60px;
  padding-inline: 20px;
}
@media screen and (min-width: 769px) {
  .mecha-os__content .mecha-os__mecha,
  .mecha-os__content .mecha-os__os {
    padding-block: 120px;
    padding-inline: 0;
  }
}
.mecha-os__content .mecha-os__mecha {
  background-color: var(--base-color);
}
@media screen and (min-width: 769px) {
  .mecha-os__content .mecha-os__mecha {
    margin-inline: 15px;
  }
}
@media screen and (min-width: 1090px) {
  .mecha-os__content .mecha-os__mecha {
    margin-left: auto;
    margin-right: 60px;
  }
}
.mecha-os__content .mecha-os__os {
  color: #fff;
  background-color: var(--main-color);
}
@media screen and (min-width: 769px) {
  .mecha-os__content .mecha-os__os {
    margin-inline: 15px;
  }
}
@media screen and (min-width: 1090px) {
  .mecha-os__content .mecha-os__os {
    margin-left: 60px;
    margin-right: auto;
  }
}
.mecha-os__content .mecha-os__os .mecha-os__bg-text {
  opacity: 0.2;
}
.mecha-os__content .mecha-os__os a.page-button {
  color: #fff;
}
.mecha-os__content .mecha-os__os .button-icon-arrow {
  background-color: #fff;
}
.mecha-os__content .mecha-os__os .button-icon-arrow::before {
  border-left-color: var(--main-color);
}

section.safty-solution {
  padding-block: 60px 95px;
  color: var(--main-color);
}
section.safty-solution .inner-content {
  padding-inline: 20px;
  text-align: center;
}
section.safty-solution .safty-solution__h2 {
  font-size: 38px;
  line-height: 3.2;
  margin-top: 20px;
}
section.safty-solution ul {
  font-size: 16px;
  font-weight: 700;
  margin-top~: 20px;
}
@media screen and (min-width: 769px) {
  section.safty-solution ul {
    font-size: 18px;
  }
}
section.safty-solution a.page-button {
  margin-top: 40px;
  justify-content: center;
}

.safty-solution__bg-text {
  font-size: 30px;
  line-height: 1.5;
  opacity: 0.2;
  font-weight: 700;
  text-align: center;
}
@media screen and (min-width: 769px) {
  .safty-solution__bg-text {
    font-size: 50px;
  }
}

section.mechatronics {
  background-color: var(--base-color);
  padding-block: 70px 100px;
  position: relative;
  overflow: hidden;
}
@media screen and (min-width: 769px) {
  section.mechatronics {
    padding-block: 110px 300px;
  }
}
section.mechatronics:after {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  bottom: 0;
  border-top: 570px solid transparent;
  border-left: 1980px solid transparent;
  border-right: 1980px solid var(--main-color);
  border-bottom: 570px solid var(--main-color);
}
section.mechatronics .inner-content {
  position: relative;
  z-index: 1;
  padding-inline: 20px;
}
section.mechatronics .mechatronics__bg-text {
  font-size: 30px;
  line-height: 1;
  color: #fff;
  font-weight: 700;
  text-align: center;
}
@media screen and (min-width: 769px) {
  section.mechatronics .mechatronics__bg-text {
    font-size: 90px;
  }
}
@media screen and (min-width: 1090px) {
  section.mechatronics .mechatronics__bg-text {
    font-size: 120px;
  }
}
@media screen and (min-width: 1300px) {
  section.mechatronics .mechatronics__bg-text {
    font-size: 105px;
  }
}
section.mechatronics h2 {
  font-size: 18px;
  line-height: 1.68;
  margin-top: 30px;
  text-align: center;
}
@media screen and (min-width: 769px) {
  section.mechatronics h2 {
    font-size: 34px;
  }
}
section.mechatronics .mechatronics__copy {
  font-size: 20px;
  margin-top: 30px;
  line-height: 1.4;
  text-align: center;
}
@media screen and (min-width: 769px) {
  section.mechatronics .mechatronics__copy {
    font-size: 50px;
    margin-top: 80px;
  }
}
section.mechatronics .mechatronics__subcopy {
  text-align: center;
  margin-top: 40px;
}
@media screen and (min-width: 769px) {
  section.mechatronics .mechatronics__subcopy {
    margin-top: 60px;
  }
}
section.mechatronics .mechatronics__subcopy > div {
  font-size: 16px;
  font-weight: 700;
}
@media screen and (min-width: 769px) {
  section.mechatronics .mechatronics__subcopy > div {
    font-size: 28px;
  }
}
section.mechatronics .mechatronics__subcopy > p {
  margin-top: 10px;
  font-size: 14px;
  text-align: center;
  line-height: 1.75;
}
@media screen and (min-width: 769px) {
  section.mechatronics .mechatronics__subcopy > p {
    margin-top: 20px;
    font-size: 18px;
  }
}
section.mechatronics .media-text {
  margin-top: 80px;
}
@media screen and (max-width: 959px) {
  section.mechatronics .media-text {
    flex-direction: column;
  }
}
section.mechatronics .media-text .media-text__media {
  text-align: center;
}
section.mechatronics .media-text__text {
  padding-top: 40px;
}
@media screen and (min-width: 960px) {
  section.mechatronics .media-text__text {
    padding-top: 0;
    padding-left: 20px;
  }
}
section.mechatronics .media-text__text .mechatronics__content-h4 {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.36;
  position: relative;
}
@media screen and (max-width: 959px) {
  section.mechatronics .media-text__text .mechatronics__content-h4 {
    width: -moz-fit-content;
    width: fit-content;
    margin-inline: auto;
  }
}
@media screen and (min-width: 769px) {
  section.mechatronics .media-text__text .mechatronics__content-h4 {
    font-size: 28px;
  }
}
section.mechatronics .media-text__text .mechatronics__content-h4 .sub-title {
  display: flex;
  align-items: center;
}
section.mechatronics .media-text__text .mechatronics__content-h4 .sub-title > h4 {
  display: inline-block;
  font-size: 14px;
  border-bottom: 2px solid;
  padding-bottom: 8px;
  padding-right: 15px;
  margin-right: 15px;
  flex-shrink: 0;
}
@media screen and (min-width: 769px) {
  section.mechatronics .media-text__text .mechatronics__content-h4 .sub-title > h4 {
    font-size: 18px;
  }
}
@media screen and (max-width: 480px) {
  section.mechatronics .media-text__text .mechatronics__content-h4 .sub-title img {
    width: 50%;
  }
}
section.mechatronics .media-text__content {
  margin-top: 40px;
}
@media screen and (max-width: 768px) {
  section.mechatronics .media-text__content {
    font-size: 14px;
    margin-top: 30px;
  }
}
section.mechatronics .cp_tab {
  max-width: var(--content-innner-width);
  margin-inline: auto;
  margin-top: 40px;
}
@media screen and (min-width: 769px) {
  section.mechatronics .cp_tab {
    margin-top: 110px;
  }
}
section.mechatronics .titled-box {
  margin-top: 50px;
}
@media screen and (min-width: 769px) {
  section.mechatronics .titled-box {
    margin-top: 20px;
  }
}
section.mechatronics .titled-box__title {
  top: -30px;
}
@media screen and (min-width: 769px) {
  section.mechatronics .titled-box__title {
    top: -17px;
  }
}
section.mechatronics .titled-box__title span {
  font-size: 16px;
  display: flex;
  margin-inline: auto;
  align-items: center;
  margin-bottom: 5px;
}
section.mechatronics .title-box__content ul {
  font-size: 14px;
  margin-left: 13px;
}
section.mechatronics .title-box__content ul li {
  list-style: disc;
}
section.mechatronics .title-box-udl table th {
  color: var(--main-color);
  font-weight: 700;
  white-space: nowrap;
  padding: 10px;
}
section.mechatronics .title-box-udl table td {
  padding: 10px;
  font-size: 13px;
  line-height: 1.75;
}
@media screen and (max-width: 768px) {
  section.mechatronics .title-box-udl table th,
  section.mechatronics .title-box-udl table td {
    display: block;
    padding-inline: 0;
  }
  section.mechatronics .title-box-udl table td {
    padding-block: 0 15px;
  }
}
section.mechatronics .title-box__upper-text {
  margin-top: 60px;
  display: flex;
  margin-inline: auto;
  width: -moz-fit-content;
  width: fit-content;
  line-height: 1.75;
  align-items: center;
}
@media screen and (max-width: 480px) {
  section.mechatronics .title-box__upper-text {
    font-size: 13px;
    margin-top: 40px;
  }
  section.mechatronics .title-box__upper-text::before, section.mechatronics .title-box__upper-text::after {
    width: 20px;
    height: 22px;
  }
}

.mechatronics__header {
  display: flex;
}
@media screen and (max-width: 768px) {
  .mechatronics__header {
    flex-direction: column;
    justify-content: center;
  }
}
.mechatronics__header .header__counter {
  font-size: 50px;
  line-height: 1;
  font-weight: 700;
  display: flex;
  align-items: flex-start;
  margin-inline: auto;
}
@media screen and (min-width: 769px) {
  .mechatronics__header .header__counter {
    margin-right: 40px;
    font-size: 108px;
  }
}
.mechatronics__header .header__counter span {
  writing-mode: vertical-lr;
  font-size: 12px;
  font-weight: 400;
  margin-right: 10px;
}
@media screen and (min-width: 769px) {
  .mechatronics__header .header__counter span {
    font-size: 21.6px;
    margin-top: 14px;
  }
}
.mechatronics__header .mechatronics__header-h3 {
  text-align: center;
  margin-top: 50px;
  line-height: 1.36;
}
@media screen and (min-width: 769px) {
  .mechatronics__header .mechatronics__header-h3 {
    text-align: left;
    font-size: 24px;
    margin-top: 0;
  }
}
.mechatronics__header .mechatronics__header-h3 h3 {
  margin-inline: auto;
  font-size: 20px;
  color: #fff;
  line-height: 2.06;
  background-color: var(--main-color);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 140px;
  height: 40px;
  margin-bottom: 20px;
}
@media screen and (min-width: 769px) {
  .mechatronics__header .mechatronics__header-h3 h3 {
    width: 230px;
    height: 70px;
    font-size: 34px;
    margin-left: 0;
    margin-bottom: 20px;
  }
}

section.os {
  background-color: var(--main-color);
  color: #fff;
  padding-block: 0 80px;
}
@media screen and (min-width: 769px) {
  section.os {
    padding-bottom: 100px;
  }
}
@media screen and (min-width: 769px) {
  section.os {
    padding-block: 0 130px;
  }
}
section.os .inner-content {
  padding-inline: 20px;
}
section.os .os__bg-text {
  color: var(--base-color);
  opacity: 0.2;
}
@media screen and (min-width: 769px) {
  section.os .os__bg-text {
    font-size: 75px;
  }
}
@media screen and (min-width: 1090px) {
  section.os .os__bg-text {
    font-size: 120px;
  }
}
@media screen and (min-width: 1300px) {
  section.os .os__bg-text {
    font-size: 105px;
  }
}
section.os h2 {
  line-height: 1.68;
  margin-top: 30px;
  text-align: center;
}
section.os .os__copy {
  font-size: 20px;
  margin-top: 35px;
  line-height: 1.4;
  text-align: center;
  font-weight: 700;
}
@media screen and (min-width: 769px) {
  section.os .os__copy {
    font-size: 50px;
    margin-top: 80px;
  }
}
section.os .os__copy::first-letter {
  color: var(--sub-color);
}
section.os .os__subcopy {
  text-align: center;
  margin-top: 60px;
}
section.os .os__subcopy > div {
  font-size: 16px;
  font-weight: 700;
}
@media screen and (min-width: 769px) {
  section.os .os__subcopy > div {
    font-size: 28px;
  }
}
section.os .os__subcopy > p {
  margin-top: 20px;
  font-size: 14px;
  text-align: center;
  line-height: 1.75;
}
@media screen and (min-width: 769px) {
  section.os .os__subcopy > p {
    font-size: 18px;
  }
}
section.os .os-solution {
  background-color: var(--base-color);
  max-width: var(--content-width);
  margin-top: 70px;
  padding-block: 50px;
  padding-inline: 20px;
}
@media screen and (min-width: 769px) {
  section.os .os-solution {
    padding-block: 100px;
    margin-inline: auto;
  }
}
section.os .os-solution__header {
  font-size: 20px;
  line-height: 1.4;
  text-align: center;
}
@media screen and (min-width: 769px) {
  section.os .os-solution__header {
    font-size: 50px;
  }
}
section.os .os-solution__header::first-letter {
  color: var(--sub-color);
}
section.os .os-solution__content {
  display: grid;
  grid-template-columns: 1fr;
  grid-row-gap: 60px;
  row-gap: 60px;
  max-width: var(--content-innner-width);
  margin-inline: auto;
  margin-block: 70px 0;
}
@media screen and (min-width: 769px) {
  section.os .os-solution__content {
    grid-template-columns: 1fr 1fr;
    row-gap: 110px;
    -moz-column-gap: 40px;
    column-gap: 40px;
  }
}
@media screen and (min-width: 769px) {
  section.os .os-solution__content {
    margin-top: 110px;
  }
}
section.os .os-solution__item {
  background-color: #fff;
  color: var(--font-color);
  position: relative;
  padding-inline: 20px;
  padding-block: 70px 20px;
  line-height: 1.75;
}
@media screen and (min-width: 769px) {
  section.os .os-solution__item {
    padding-inline: 35px;
    padding-block: 100px 40px;
  }
}
section.os .os-solution__item h3 {
  text-align: center;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}
@media screen and (min-width: 769px) {
  section.os .os-solution__item h3 {
    min-height: 84px;
    font-size: 24px;
  }
}
section.os .os-solution__item p {
  font-size: 13px;
  margin-top: 30px;
}
@media screen and (min-width: 769px) {
  section.os .os-solution__item p {
    font-size: 16px;
  }
}
section.os .os-solution__item img {
  margin-top: 20px;
  display: block;
  margin-inline: auto;
}
section.os .os-solution__counter {
  font-size: 42px;
  top: -35px;
  position: absolute;
  left: 50%;
  display: flex;
  align-items: center;
  transform: translateX(-50%);
  font-weight: 700;
}
@media screen and (min-width: 769px) {
  section.os .os-solution__counter {
    font-size: 70px;
    top: -50px;
  }
}
section.os .os-solution__counter span {
  writing-mode: vertical-lr;
  font-size: 12px;
  font-weight: 400;
}
@media screen and (min-width: 769px) {
  section.os .os-solution__counter span {
    font-size: 20px;
  }
}

section.safty-solutions {
  padding-block: 70px;
}
@media screen and (min-width: 769px) {
  section.safty-solutions {
    padding-block: 100px;
  }
}
section.safty-solutions .inner-content {
  padding-inline: 20px;
}
section.safty-solutions .safty-solutions__bg-text {
  line-height: 1;
  margin-inline: -20px;
  color: var(--base-color);
}
@media screen and (min-width: 769px) {
  section.safty-solutions .safty-solutions__bg-text {
    font-size: 120px;
  }
}
@media screen and (min-width: 1300px) {
  section.safty-solutions .safty-solutions__bg-text {
    font-size: 104px;
  }
}
section.safty-solutions h2 {
  line-height: 1.68;
  margin-top: 30px;
}
@media screen and (min-width: 769px) {
  section.safty-solutions .safty-solutions__copy {
    font-size: 40px;
    margin-top: 60px;
  }
}
@media screen and (min-width: 1200px) {
  section.safty-solutions .safty-solutions__copy {
    font-size: 50px;
    margin-top: 80px;
  }
}
section.safty-solutions .safty-solutions__subcopy {
  width: -moz-fit-content;
  width: fit-content;
  margin-inline: auto;
}
@media screen and (max-width: 768px) {
  section.safty-solutions .safty-solutions__subcopy {
    margin-top: 20px;
  }
}
section.safty-solutions .safty-solutions__list {
  margin-top: 50px;
  display: grid;
  grid-template-columns: 1fr;
  grid-gap: 20px;
  gap: 20px;
  max-width: var(--content-innner-width);
  margin-inline: auto;
}
@media screen and (min-width: 769px) {
  section.safty-solutions .safty-solutions__list {
    grid-template-columns: 1fr 1fr 1fr;
  }
}
section.safty-solutions .safty-solutions__list li {
  background-color: var(--base-color);
  padding-block: 40px;
  padding-inline: 20px;
  display: grid;
  grid-template-rows: 220px 1fr;
}
@media screen and (min-width: 769px) {
  section.safty-solutions .safty-solutions__list li {
    padding-block: 50px;
  }
}
section.safty-solutions .safty-solutions__list h3 {
  font-size: 16px;
  line-height: 1.58;
  align-self: center;
  text-align: center;
}
@media screen and (min-width: 769px) {
  section.safty-solutions .safty-solutions__list h3 {
    font-size: 24px;
  }
}
section.safty-solutions .safty-solutions__list h3 span:not(.main-color) {
  display: block;
  font-size: 14px;
  line-height: 1.75;
  color: var(--font-color);
  margin-top: 10px;
}
@media screen and (min-width: 769px) {
  section.safty-solutions .safty-solutions__list h3 span:not(.main-color) {
    font-size: 16px;
  }
}
section.safty-solutions .safty-solutions__list h3 span.main-color {
  display: block;
  font-size: 14px;
}
@media screen and (min-width: 769px) {
  section.safty-solutions .safty-solutions__list h3 span.main-color {
    font-size: 18px;
  }
}
section.safty-solutions .safty-solutions__list p {
  font-size: 13px;
  margin-top: 20px;
  line-height: 1.75;
}
@media screen and (min-width: 769px) {
  section.safty-solutions .safty-solutions__list p {
    font-size: 16px;
    margin-top: 40px;
  }
}
section.safty-solutions .media-text {
  max-width: 850px;
  margin-inline: auto;
  margin-top: 30px;
}
section.safty-solutions .medita-text__figure {
  text-align: center;
}
section.safty-solutions .media-text__text {
  margin-left: 0;
}
@media screen and (min-width: 769px) {
  section.safty-solutions .media-text__text {
    margin-left: 50px;
  }
}
section.safty-solutions .media-text__text h3 {
  font-size: 18px;
  border-bottom: 2px solid;
  padding-block: 5px;
}
section.safty-solutions .media-text__text ul {
  margin-top: 20px;
  margin-left: 15px;
}
@media screen and (max-width: 768px) {
  section.safty-solutions .media-text__text ul {
    font-size: 14px;
  }
}
section.safty-solutions .media-text__text ul li {
  list-style-type: disc;
  line-height: 2;
}
section.safty-solutions .titled-box {
  max-width: var(--content-innner-width);
  margin-inline: auto;
}
@media screen and (max-width: 768px) {
  section.safty-solutions .titled-box {
    padding-top: 30px;
    margin-top: 40px;
  }
}
section.safty-solutions .titled-box__title {
  top: -20px;
}
section.safty-solutions .title-box__content {
  font-size: 14px;
  line-height: 1.75;
}
section.safty-solutions .title-box__content > p {
  text-align: center;
}
section.safty-solutions .safty-box {
  background-color: var(--green-color);
  color: #fff;
  max-width: 640px;
  margin-inline: auto;
  min-height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 100px;
  padding: 30px 25px 20px;
  font-weight: 700;
  font-size: 18px;
  position: relative;
  margin-bottom: 45px;
}
@media screen and (min-width: 769px) {
  section.safty-solutions .safty-box {
    margin-top: 60px;
    padding: 10px 20px;
  }
}
section.safty-solutions .safty-box::before {
  content: "";
  background-image: url(../images/safty-logo.svg);
  width: 64px;
  height: 50px;
  background-size: contain;
  background-repeat: no-repeat;
  margin-right: 20px;
}
@media screen and (max-width: 768px) {
  section.safty-solutions .safty-box::before {
    position: absolute;
    top: -40px;
    left: 50%;
    transform: translateX(-50%);
  }
}
section.safty-solutions .safty-box::after {
  content: "";
  background-image: url(../images/green-delta.svg);
  width: 46px;
  height: 42px;
  background-size: contain;
  background-repeat: no-repeat;
  position: absolute;
  bottom: -32px;
  left: 50%;
  transform: translateX(-50%);
}
section.safty-solutions .safty-box span {
  display: block;
  font-size: 14px;
}
@media screen and (max-width: 768px) {
  section.safty-solutions .safty-box p {
    text-align: center;
  }
}
section.safty-solutions .safty-box img {
  vertical-align: middle;
}
@media screen and (min-width: 769px) {
  section.safty-solutions .safty-box img {
    margin-left: 15px;
  }
}
section.safty-solutions .safty-content {
  font-size: 14px;
  font-weight: 700;
  text-align: center;
  line-height: 1.875;
}
@media screen and (min-width: 769px) {
  section.safty-solutions .safty-content {
    font-size: 16px;
  }
}
section.safty-solutions .page-button {
  color: var(--green-color);
  margin-inline: auto;
  width: -moz-fit-content;
  width: fit-content;
  margin-top: 40px;
}
section.safty-solutions .button-icon-arrow {
  background-color: var(--green-color);
}
@media screen and (max-width: 480px) {
  section.safty-solutions .button-icon-arrow {
    margin-left: 15px;
  }
}

section.cs {
  background-color: var(--main-color);
  color: #fff;
  padding-block: 50px 150px;
  background-image: url(../images/sep-product.svg);
  background-repeat: no-repeat;
  background-position: center bottom -1px;
  background-size: var(--sep-image-size), contain;
}
@media screen and (min-width: 769px) {
  section.cs {
    padding-block: 90px 290px;
  }
}
section.cs .inner-content {
  padding-inline: 20px;
}
@media screen and (max-width: 768px) {
  section.cs .is-style-ornament-w::before, section.cs .is-style-ornament-w::after {
    transform: scale(50%);
  }
  section.cs .is-style-ornament-w::before {
    margin-right: 10px;
  }
  section.cs .is-style-ornament-w::after {
    margin-left: 10px;
  }
}
section.cs p {
  font-size: 16px;
  margin-top: 30px;
  font-weight: 700;
  text-align: center;
  line-height: 1.75;
}
@media screen and (min-width: 769px) {
  section.cs p {
    margin-top: 55px;
    font-size: 24px;
  }
}
section.cs p .upper-dot {
  --sub-color: var(--accent-color);
}

section.contact_info {
  padding-block: 70px;
}
@media screen and (min-width: 769px) {
  section.contact_info {
    padding-block: 120px;
  }
}
section.contact_info .inner-content h2 {
  display: flex;
  justify-content: center;
  line-height: 1.75;
}
section.contact_info .inner-content h2::after, section.contact_info .inner-content h2::before {
  width: 30px;
  height: 34px;
  align-self: flex-end;
  margin-bottom: -10px;
}
@media screen and (min-width: 769px) {
  section.contact_info .inner-content h2::after, section.contact_info .inner-content h2::before {
    width: 43px;
    height: 49px;
  }
}
section.contact_info .inner-content h2::before {
  margin-right: 5px;
}
section.contact_info .inner-content h2::after {
  margin-left: 5px;
}
@media screen and (min-width: 769px) {
  section.contact_info .inner-content h2 {
    font-size: 30px;
  }
  section.contact_info .inner-content h2::before {
    margin-right: 30px;
  }
  section.contact_info .inner-content h2::after {
    margin-left: 30px;
  }
}
section.contact_info .inner-content p {
  text-align: center;
  font-size: 14px;
  line-height: 1.75;
  margin-top: 55px;
}
@media screen and (min-width: 769px) {
  section.contact_info .inner-content p {
    font-size: 18px;
  }
}
section.contact_info .inner-content {
  padding-inline: 20px;
}
section.contact_info .contact-swiper-container {
  position: relative;
  height: 220px;
  margin-top: 50px;
  overflow: hidden;
  max-width: none;
  padding: 0;
}
@media screen and (min-width: 769px) {
  section.contact_info .contact-swiper-container {
    margin-top: 100px;
  }
}
section.contact_info .product-swiper-wrapper {
  margin-top: 100px;
}
section.contact_info .product-swiper-wrapper .swiper-wrapper {
  transition-timing-function: linear !important;
  counter-set: slide;
}
section.contact_info .product-swiper-wrapper .swiper-slide {
  position: relative;
  width: 330px !important;
  height: 230px;
}
section.contact_info .product-swiper-wrapper .swiper-slide .swiper-slide-content {
  background-color: #fff;
}
section.contact_info .product-swiper-wrapper .swiper-slide .swiper-slide-content::after {
  content: url(../images/question.svg);
  width: 54px;
  height: 89px;
  position: absolute;
  top: 10px;
  right: -12px;
}
section.contact_info .product-swiper-wrapper .swiper-slide p {
  background-color: var(--base-color);
  width: 303px;
  height: 197px;
  display: flex;
  align-items: center;
  padding: 30px;
  margin-bottom: 20px;
  padding-right: 65px;
  font-weight: 700;
  line-height: 1.75;
}
section.contact_info .product-swiper-wrapper .swiper-slide img {
  position: absolute;
  bottom: 0;
  right: 0;
}

.responce-dev {
  background-color: var(--main-color);
  margin-inline: auto;
  max-width: 1000px;
  margin-top: 100px;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  padding-block: 40px 60px;
  box-shadow: 5px 5px 0 var(--accent-color);
  padding-inline: 20px;
}
@media screen and (min-width: 769px) {
  .responce-dev {
    padding-block: 50px 100px;
    box-shadow: 10px 10px 0 var(--accent-color);
  }
}
.responce-dev h2 {
  font-size: 18px;
  width: 100%;
  text-align: center;
  margin-bottom: 25px;
}
@media screen and (min-width: 769px) {
  .responce-dev h2 {
    font-size: 24px;
  }
}
.responce-dev h2::before, .responce-dev h2::after {
  width: 28px;
  height: 31px;
  vertical-align: -10px;
}
@media screen and (max-width: 768px) {
  .responce-dev h2::before, .responce-dev h2::after {
    vertical-align: 0;
    transform: scale(0.8) translateY(-9px);
  }
}
.responce-dev h2::before {
  margin-right: 10px;
}
.responce-dev h2::after {
  margin-left: 10px;
}
.responce-dev .button {
  display: flex;
  padding: 8px;
  align-items: center;
  justify-content: center;
  color: var(--main-color);
  background-color: #fff;
  transition: opacity 0.2s;
  width: 100%;
  margin-top: 20px;
  height: 70px;
  font-size: 18px;
  font-weight: 700;
}
@media screen and (min-width: 960px) {
  .responce-dev .button {
    margin-inline: 20px;
    width: calc((100% - 80px) / 2);
    height: 100px;
    font-size: 28px;
  }
}
.responce-dev .button:hover {
  opacity: 0.6;
}
.responce-dev .button.icon-mail::before, .responce-dev .button.icon-tel::before {
  margin-right: 10px;
}
@media screen and (min-width: 769px) {
  .responce-dev .button.icon-mail::before, .responce-dev .button.icon-tel::before {
    margin-right: 20px;
  }
}
.responce-dev .button.icon-tel.disabeled {
  pointer-events: none;
}

* {
  letter-spacing: 0.15em;
}

.page-anzen .hero-header .hero-header__title span {
  color: var(--green-color);
}
.page-anzen .inner-content {
  padding-inline: 20px;
  font-weight: 700;
}
.page-anzen .titled-box::after {
  content: none;
}
.page-anzen .section__bg-text {
  font-size: 45px;
}
@media screen and (min-width: 769px) {
  .page-anzen .section__bg-text {
    font-size: 100px;
  }
}
@media screen and (min-width: 1200px) {
  .page-anzen .section__bg-text {
    font-size: 65px;
  }
}

section.intro .inner-content {
  background-image: url(../images/section-1-man.svg), url(../images/section-1-woman.svg);
  background-repeat: no-repeat, no-repeat;
  padding-block: 50px 150px;
  background-size: 71px, 131px;
  background-position: bottom left 100px, bottom right 55px;
}
@media screen and (min-width: 481px) {
  section.intro .inner-content {
    padding-block: 55px 110px;
    background-size: 120px, 220px;
    background-position: bottom left 50px, bottom right 10px;
  }
}
@media screen and (min-width: 1200px) {
  section.intro .inner-content {
    padding-block: 100px 140px;
    background-size: 195px, 357px;
    background-position: bottom left 100px, bottom right 40px;
  }
}
section.intro p {
  font-weight: 700;
  line-height: 2.4;
}
section.intro .green-back {
  background-color: var(--green-color);
  padding: 15px 15px;
  color: #fff;
  font-size: 27px;
}
@media screen and (min-width: 769px) {
  section.intro .green-back {
    font-size: 35px;
    padding-inline: 30px;
  }
}
@media screen and (min-width: 1200px) {
  section.intro .green-back {
    font-size: 50px;
    padding-inline: 40px;
  }
}
@media screen and (min-width: 769px) {
  section.intro .section__h2 {
    font-size: 30px;
  }
}
@media screen and (min-width: 1200px) {
  section.intro .section__h2 {
    font-size: 34px;
  }
}

section.problems {
  background-color: var(--green-color);
  color: #fff;
  padding-top: 50px;
  text-align: center;
  position: relative;
  overflow: hidden;
  height: 730px;
}
@media screen and (min-width: 769px) {
  section.problems {
    height: 560px;
  }
}
section.problems .inner-content {
  padding-inline: 0;
}
section.problems p {
  font-weight: 700;
  line-height: 54px;
}
@media screen and (max-width: 768px) {
  section.problems p {
    font-size: 24px;
    line-height: 40px;
  }
}
section.problems .ballons {
  display: grid;
  max-width: 1090px;
  margin-inline: auto;
  grid-template-columns: 1fr 1fr;
}
@media screen and (max-width: 1089px) {
  section.problems .ballons {
    margin-block: 10px 0;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    min-width: 700px;
  }
}
@media screen and (max-width: 768px) {
  section.problems .ballons {
    margin-block: 75px 150px;
    min-width: auto;
  }
}
section.problems .ballons li {
  color: var(--font-color);
  font-size: 14px;
  display: flex;
  align-items: center;
  text-align: left;
  line-height: 1.46;
  position: relative;
  background-repeat: no-repeat;
  margin-inline: auto;
}
section.problems .ballons li::after {
  position: absolute;
}
section.problems .ballons li:first-child {
  background-image: url(../images/ballon-1.svg);
  width: 210px;
  height: 160px;
  padding-inline: 35px;
}
@media screen and (max-width: 768px) {
  section.problems .ballons li:first-child {
    grid-row: 1/2;
    grid-column: 1/2;
  }
}
section.problems .ballons li:nth-child(2) {
  background-image: url(../images/ballon-4.svg);
  width: 218px;
  height: 166px;
  padding-inline: 40px 20px;
}
@media screen and (max-width: 768px) {
  section.problems .ballons li:nth-child(2) {
    grid-row: 1/2;
    grid-column: 2/3;
    margin-left: -40px;
    margin-top: -60px;
  }
}
section.problems .ballons li:nth-child(3) {
  background-image: url(../images/ballon-3.svg);
  width: 204px;
  height: 162px;
  padding-inline: 50px 30px;
}
@media screen and (max-width: 768px) {
  section.problems .ballons li:nth-child(3) {
    grid-row: 2/3;
    grid-column: 2/3;
    margin-left: -30px;
    margin-top: -65px;
  }
}
section.problems .ballons li:nth-child(3)::after {
  content: url(../images/ballon-s-2.svg);
  width: 40px;
  height: 78px;
  bottom: -80px;
  right: 40px;
}
@media screen and (max-width: 768px) {
  section.problems .ballons li:nth-child(3)::after {
    content: url(../images/ballon-s-3.svg);
    bottom: -90px;
    right: 105px;
  }
}
section.problems .ballons li:last-child {
  background-image: url(../images/ballon-2.svg);
  width: 198px;
  height: 155px;
  padding-inline: 40px 25px;
}
@media screen and (max-width: 768px) {
  section.problems .ballons li:last-child {
    grid-row: 2/3;
    grid-column: 1/2;
    margin-left: -2px;
    margin-top: 10px;
  }
}
section.problems .ballons li:last-child::after {
  content: url(../images/ballon-s-3.svg);
  width: 40px;
  height: 65px;
  bottom: -65px;
  left: 10px;
}
@media screen and (max-width: 768px) {
  section.problems .ballons li:last-child::after {
    content: url(../images/ballon-s-2.svg);
    bottom: -65px;
    left: 130px;
  }
}
@media screen and (min-width: 1090px) {
  section.problems .ballons {
    grid-template-columns: 1fr 1fr 1fr 1fr;
    margin-top: 40px;
  }
  section.problems .ballons li {
    font-size: 15px;
    line-height: 1.75;
  }
  section.problems .ballons li:first-child {
    background-image: url(../images/ballon-1.svg);
    width: 264px;
    height: 200px;
    padding-inline: 30px;
  }
  section.problems .ballons li:first-child::after {
    content: url(../images/ballon-s-1.svg);
    width: 145px;
    height: 92px;
    bottom: -75px;
    right: -110px;
  }
  section.problems .ballons li:nth-child(2) {
    background-image: url(../images/ballon-2.svg);
    width: 234px;
    height: 182px;
    padding-inline: 40px 20px;
  }
  section.problems .ballons li:nth-child(2)::after {
    content: url(../images/ballon-s-2.svg);
    width: 68px;
    height: 81px;
    bottom: -80px;
    right: 25px;
  }
  section.problems .ballons li:nth-child(3) {
    background-image: url(../images/ballon-3.svg);
    width: 239px;
    height: 190px;
    padding-inline: 50px 30px;
  }
  section.problems .ballons li:nth-child(3)::after {
    content: url(../images/ballon-s-3.svg);
    width: 72px;
    height: 78px;
    bottom: -85px;
    right: 75px;
  }
  section.problems .ballons li:last-child {
    background-image: url(../images/ballon-4.svg);
    width: 260px;
    height: 198px;
    padding-inline: 40px 25px;
  }
  section.problems .ballons li:last-child::after {
    content: url(../images/ballon-s-4.svg);
    width: 139px;
    height: 104px;
    bottom: -95px;
    right: 225px;
    left: auto;
  }
}
section.problems .anzen-problem {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
}
@media screen and (max-width: 768px) {
  section.problems .anzen-problem {
    transform: translateX(-40%);
    width: 90px;
  }
}

section.about {
  padding-block: 60px 0;
}
@media screen and (min-width: 769px) {
  section.about {
    padding-top: 100px;
  }
}
section.about .section__h2 {
  font-weight: 700;
}
section.about .anzen-heading {
  display: block;
  margin-inline: auto;
  margin-top: 40px;
}
@media screen and (min-width: 769px) {
  section.about .anzen-heading {
    margin-top: 50px;
  }
}
section.about .embed-youtube {
  max-width: 900px;
  background-color: #e6e6e6;
  padding: 30px 20px 20px;
  position: relative;
  margin-inline: auto;
  margin-top: 100px;
}
@media screen and (min-width: 769px) {
  section.about .embed-youtube {
    padding: 40px;
  }
}
section.about .embed-youtube__title {
  background-color: var(--accent-color);
  color: #fff;
  font-size: 18px;
  line-height: 1;
  font-weight: 700;
  text-align: center;
  max-width: 390px;
  width: 100%;
  padding: 10px 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  position: absolute;
  top: -45px;
  left: 50%;
  transform: translateX(-50%);
}
section.about .embed-youtube__title span {
  font-size: 14px;
}
@media screen and (min-width: 769px) {
  section.about .embed-youtube__title {
    height: 70px;
  }
}
section.about .about__list {
  display: flex;
  max-width: var(--content-innner-width);
  justify-content: center;
  margin-inline: auto;
  margin-top: 80px;
}
@media screen and (max-width: 959px) {
  section.about .about__list {
    margin-top: 50px;
    flex-direction: column;
    align-items: center;
  }
  section.about .about__list li + li {
    margin-top: 40px;
  }
}
section.about .about__list li {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  width: 260px;
  height: 260px;
  margin-inline: 35px;
  background-color: var(--green-color);
  color: #fff;
  font-size: 24px;
  font-weight: 700;
  border-radius: 100%;
  position: relative;
}
section.about .about__list li::before {
  content: "";
  background-image: url(../images/easy.svg);
  background-repeat: no-repeat;
  width: 95px;
  height: 65px;
  position: absolute;
  left: -10px;
  top: 10px;
}
section.about .about__list li.about__support::before {
  background-image: url(../images/support.svg);
  width: 164px;
  height: 89px;
  top: -20px;
  left: -20px;
}
section.about .about__list li.about__quick::before {
  background-image: url(../images/quick.svg);
  width: 118px;
  height: 85px;
  top: 0;
  left: -10px;
}
section.about .about__content {
  padding-bottom: 170px;
  margin-top: 50px;
  line-height: 1.75;
  text-align: center;
  font-weight: 700;
  max-width: var(--content-innner-width);
  margin-inline: auto;
  background-image: url(../images/section-3-man.png), url(../images/section-3-woman.svg);
  background-repeat: no-repeat, no-repeat;
  background-position: bottom left, bottom right;
  background-size: 160px, 145px;
  max-width: 480px;
}
@media screen and (min-width: 769px) {
  section.about .about__content {
    max-width: 100%;
    background-position: bottom left, bottom right;
    background-size: 287px, 242px;
    font-size: 24px;
    margin-top: 80px;
    padding-bottom: 280px;
  }
}
@media screen and (min-width: 1090px) {
  section.about .about__content {
    background-size: 287px, 242px;
    padding-bottom: 180px;
  }
}

section.what {
  padding-block: 70px 0;
  background-color: var(--green-color);
  color: #fff;
  position: relative;
}
@media screen and (min-width: 769px) {
  section.what {
    padding-block: 100px 0;
  }
}
section.what .section__bg-text {
  opacity: 0.2;
}
section.what h2 {
  margin-top: 25px;
}
section.what .what__copy {
  font-size: 15px;
  margin-top: 50px;
  line-height: 2.33;
  text-align: center;
  font-weight: 700;
}
@media screen and (min-width: 769px) {
  section.what .what__copy {
    margin-top: 70px;
    font-size: 18px;
  }
}
section.what .white-marker {
  font-size: 27px;
  background-color: #fff;
  color: var(--green-color);
  padding-block: 5px;
  padding-inline: 15px 8px;
}
section.what .what__subcopy {
  font-size: 28px;
  margin-inline: auto;
}
@media screen and (max-width: 768px) {
  section.what .what__subcopy {
    font-size: 22px;
    display: flex;
    width: -moz-fit-content;
    width: fit-content;
  }
  section.what .what__subcopy::before {
    margin-right: 15px;
  }
  section.what .what__subcopy::after {
    margin-left: 15px;
  }
}
section.what .what__list {
  display: flex;
  max-width: var(--content-innner-width);
  margin-inline: auto;
  margin-top: 20px;
  position: relative;
  width: -moz-fit-content;
  width: fit-content;
}
@media screen and (max-width: 480px) {
  section.what .what__list {
    margin-left: 0;
  }
}
@media screen and (min-width: 769px) {
  section.what .what__list {
    justify-content: center;
    width: auto;
  }
}
section.what .what__list li {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  width: 105px;
  height: 105px;
  font-size: 24px;
  background-color: #fff;
  color: var(--green-color);
  font-weight: 700;
  border-radius: 100%;
  position: relative;
  line-height: 1.2;
}
@media screen and (min-width: 769px) {
  section.what .what__list li {
    width: 130px;
    height: 130px;
    font-size: 30px;
    margin-inline: 40px;
  }
  section.what .what__list li::after {
    font-size: 30px;
  }
}
section.what .what__list li::after {
  content: "OK!";
  color: var(--accent-color);
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: -15px;
  font-size: 24px;
}
@media screen and (max-width: 768px) {
  section.what .what__list li + li {
    margin-left: 20px;
  }
}
section.what .what__list::after {
  content: "";
  display: block;
  background-image: url(../images/what-woman.svg);
  width: 110px;
  height: 175px;
  right: -100px;
  background-repeat: no-repeat;
  background-size: contain;
  position: absolute;
}
@media screen and (min-width: 769px) {
  section.what .what__list::after {
    width: 190px;
    right: 90px;
  }
}
section.what .titled-box-anzen.titled-box {
  border: none;
  background-color: #fff;
  color: var(--font-color);
  text-align: center;
  max-width: var(--content-innner-width);
  margin-inline: auto;
  font-weight: 400;
}
@media screen and (max-width: 768px) {
  section.what .titled-box-anzen.titled-box {
    margin-top: 160px;
    padding-top: 60px;
  }
  section.what .titled-box-anzen.titled-box p {
    font-size: 14px;
    text-align: justify;
  }
}
section.what .titled-box-anzen__title {
  position: absolute;
  border: 1px solid #fff;
  background-color: var(--green-color);
  color: #fff;
  top: -50px;
  left: 50%;
  transform: translateX(-50%);
  width: 90%;
  padding-block: 25px 5px;
  padding-inline: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
}
@media screen and (min-width: 769px) {
  section.what .titled-box-anzen__title {
    top: -25px;
    font-size: 15px;
    height: 50px;
    white-space: nowrap;
    padding-inline: 50px 30px;
    padding-block: 10px;
    max-width: 550px;
  }
}
section.what .titled-box-anzen__title::before {
  content: url(../images/circle-ornament.svg);
  display: block;
  width: 80px;
  height: 63px;
  position: absolute;
  left: -30px;
}
@media screen and (max-width: 768px) {
  section.what .titled-box-anzen__title::before {
    top: -45px;
    left: 50%;
    transform: translateX(-50%);
  }
}
section.what .heading-anzen {
  margin-top: 60px;
  font-size: 16px;
  background-image: url(../images/sep-line-curve-sp.svg);
  text-align: center;
  background-repeat: no-repeat;
  background-position: bottom center;
  background-size: contain;
  max-width: var(--content-innner-width);
  margin-inline: auto;
  padding-bottom: 35px;
}
@media screen and (min-width: 481px) {
  section.what .heading-anzen {
    padding-bottom: 60px;
  }
}
@media screen and (min-width: 769px) {
  section.what .heading-anzen {
    font-size: 45px;
    background-image: url(../images/sep-line-curve.svg);
    padding-bottom: 110px;
    margin-top: 90px;
  }
}
section.what .heading-anzen img {
  margin-right: 20px;
}
@media screen and (max-width: 768px) {
  section.what .heading-anzen img {
    margin-right: 13px;
    width: 95px;
    vertical-align: middle;
  }
}
section.what .what__titled-box {
  border-color: #fff;
  max-width: 980px;
  margin-inline: auto;
  font-weight: 700;
  text-align: center;
  padding: 45px 20px 28px;
  margin-top: 70px;
}
@media screen and (max-width: 768px) {
  section.what .what__titled-box {
    font-size: 14px;
    text-align: justify;
  }
}
section.what .what__titled-box .titled-box__title {
  color: var(--green-color);
  height: 50px;
  width: 290px;
  padding: 10px;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  top: -25px;
}
section.what .what__titled-box .titled-box__title::after {
  content: none;
}
section.what .safety__large-ornament {
  display: flex;
  margin-inline: auto;
  text-align: center;
  width: -moz-fit-content;
  width: fit-content;
  align-items: flex-end;
  line-height: 1.75;
  margin-top: 60px;
}
@media screen and (min-width: 769px) {
  section.what .safety__large-ornament {
    font-size: 38px;
    margin-top: 90px;
    line-height: 2;
  }
}
section.what .what__list-table {
  margin-top: 70px;
  max-width: var(--content-innner-width);
  margin-inline: auto;
  font-weight: 700;
}
@media screen and (min-width: 769px) {
  section.what .what__list-table {
    margin-top: 90px;
  }
}
section.what .what__list-table th,
section.what .what__list-table td {
  border-bottom: 15px solid var(--green-color);
}
section.what .what__list-table th {
  font-size: 20px;
  padding-inline: 10px;
  text-align: center;
  vertical-align: middle;
}
@media screen and (min-width: 769px) {
  section.what .what__list-table th {
    font-size: 24px;
    width: 160px;
  }
}
section.what .what__list-table th span {
  width: 47px;
  height: 47px;
  font-size: 29px;
  display: flex;
  align-items: center;
  justify-content: center;
  letter-spacing: 0;
  background-image: url(../images/reason-bg.svg);
  text-align: center;
  background-repeat: no-repeat;
  background-size: contain;
}
@media screen and (min-width: 769px) {
  section.what .what__list-table th span {
    display: inline-flex;
    font-size: 34px;
    margin-left: 10px;
    width: 59px;
    height: 59px;
  }
}
section.what .what__list-table td {
  color: var(--green-color);
  background-color: #fff;
  vertical-align: middle;
  padding: 20px 30px;
  line-height: 1.6;
}
@media screen and (min-width: 769px) {
  section.what .what__list-table td {
    font-size: 23px;
  }
}
section.what .what__list-table td span {
  font-size: 1.33em;
}
@media screen and (min-width: 769px) {
  section.what .what__list-table td span {
    font-size: 1.52em;
  }
}
section.what .anzen-tab {
  width: 100%;
  color: var(--green-color);
  max-width: var(--content-innner-width);
  margin-inline: auto;
  position: relative;
}
section.what .anzen-tab.tab-menu {
  margin-top: 60px;
  margin-bottom: -30px;
}
section.what .anzen-tab .tab-nav-arrow {
  cursor: pointer;
  position: absolute;
  display: block;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
}
@media screen and (max-width: 768px) {
  section.what .anzen-tab .tab-nav-arrow {
    top: 20%;
  }
}
section.what .anzen-tab .tab-nav-arrow::before {
  display: block;
  position: absolute;
  z-index: 5;
  width: 30px;
  height: 50px;
}
@media screen and (max-width: 768px) {
  section.what .anzen-tab .tab-nav-arrow::before {
    width: 23px;
    height: 43px;
  }
}
section.what .anzen-tab .tab-nav-arrow.arrow-l {
  left: -15px;
}
@media screen and (min-width: 1200px) {
  section.what .anzen-tab .tab-nav-arrow.arrow-l {
    left: -50px;
  }
}
section.what .anzen-tab .tab-nav-arrow.arrow-l::before {
  content: url(../images/tab-arrow-l.svg);
}
section.what .anzen-tab .tab-nav-arrow.arrow-r {
  right: 7px;
}
@media screen and (min-width: 769px) {
  section.what .anzen-tab .tab-nav-arrow.arrow-r {
    right: 15px;
  }
}
@media screen and (min-width: 1200px) {
  section.what .anzen-tab .tab-nav-arrow.arrow-r {
    right: -20px;
  }
}
section.what .anzen-tab .tab-nav-arrow.arrow-r::before {
  content: url(../images/tab-arrow-r.svg);
}
section.what .tab-menu {
  counter-reset: tab;
  z-index: 5;
}
section.what .tab-menu .menu-item {
  background-color: #fff;
  height: auto;
  aspect-ratio: 1/1;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 15px;
  font-size: 14px;
  position: relative;
  cursor: pointer;
  margin-top: 20px;
  margin-bottom: 30px;
  transition: color 0.3s ease, background-color 0.3s ease;
}
@media screen and (max-width: 768px) {
  section.what .tab-menu .menu-item span {
    display: none;
  }
}
@media screen and (min-width: 769px) {
  section.what .tab-menu .menu-item {
    font-size: 17px;
    line-height: 1.55;
  }
}
@media screen and (min-width: 1090px) {
  section.what .tab-menu .menu-item {
    font-size: 18px;
    line-height: 1.75;
  }
}
section.what .tab-menu .menu-item::before {
  counter-increment: tab;
  content: counter(tab, decimal-leading-zero);
  display: block;
  letter-spacing: 0.15em;
  font-size: 25px;
  color: var(--accent-color);
  font-weight: 700;
  margin-right: 20px;
}
@media screen and (max-width: 768px) {
  section.what .tab-menu .menu-item::before {
    margin-right: 0;
  }
}
@media screen and (min-width: 769px) {
  section.what .tab-menu .menu-item::before {
    font-size: 34px;
    margin-right: 0;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: -23px;
  }
}
section.what .tab-menu .menu-item:after {
  content: "";
  background-image: url(../images/tab-delta.svg);
  background-size: contain;
  background-repeat: no-repeat;
  position: absolute;
  opacity: 0;
  visibility: hidden;
  width: 46px;
  height: 42px;
  bottom: -32px;
  left: 50%;
  transform: translateX(-50%);
}
@media screen and (max-width: 768px) {
  section.what .tab-menu .menu-item:after {
    width: 35px;
    height: 42px;
    bottom: -32px;
  }
}
section.what .tab-menu .menu-item:hover {
  background-color: var(--accent-color);
  color: #fff;
}
section.what .tab-menu .menu-item:hover::before {
  color: #fff;
}
section.what .tab-menu .swiper-slide-thumb-active .menu-item {
  background-color: var(--accent-color);
  color: #fff;
}
section.what .tab-menu .swiper-slide-thumb-active .menu-item::before {
  color: #fff;
}
section.what .tab-menu .swiper-slide-thumb-active .menu-item:after {
  transition: opacity 0.3s ease-in, visibility 0.3s ease-in;
  opacity: 1;
  visibility: visible;
}
section.what .tab-contents .swiper-slide {
  background-color: #fff;
  margin-top: 5px;
  padding-inline: 20px;
  padding-block: 20px 60px;
  width: 100%;
  position: relative;
}
@media screen and (min-width: 769px) {
  section.what .tab-contents .swiper-slide {
    margin-top: 15px;
    padding-block: 40px 100px;
  }
}
section.what .tab-contents .media-text .media-text__media {
  text-align: center;
}
@media screen and (min-width: 769px) {
  section.what .tab-contents .media-text .media-text__media {
    max-width: 50%;
  }
}
@media screen and (min-width: 1200px) {
  section.what .tab-contents .media-text .media-text__media {
    max-width: none;
  }
}
section.what .tab-contents .media-text .media-text__text {
  max-width: 350px;
  padding-top: 35px;
  margin-inline: auto;
}
@media screen and (min-width: 769px) {
  section.what .tab-contents .media-text .media-text__text {
    margin-left: 30px;
  }
}
section.what .tab-contents .media-text h3 {
  font-size: 25px;
  font-family: "Microsoft YaHei", sans-serif;
  line-height: 1.2;
}
@media screen and (min-width: 769px) {
  section.what .tab-contents .media-text h3 {
    font-size: 32px;
  }
}
section.what .tab-contents .media-text h3 span {
  margin-right: 10px;
}
section.what .tab-contents .media-text .media-text__subcopy {
  font-size: 20px;
  margin-top: 20px;
  line-height: 1.75;
}
@media screen and (min-width: 769px) {
  section.what .tab-contents .media-text .media-text__subcopy {
    font-size: 24px;
    margin-top: 30px;
  }
}
section.what .tab-contents .media-text .media-text__content {
  font-weight: 400;
  margin-top: 20px;
  color: var(--font-color);
}
@media screen and (min-width: 769px) {
  section.what .tab-contents .media-text .media-text__content {
    margin-top: 30px;
    font-size: 18px;
    font-weight: 700;
  }
}
section.what .cp_tab {
  color: var(--green-color);
  max-width: var(--content-innner-width);
  margin-inline: auto;
}
@media screen and (max-width: 768px) {
  section.what .cp_tab {
    flex-direction: row;
    margin-top: 60px;
  }
}
section.what .cp_tab > label {
  justify-content: center;
  padding: 15px;
  font-size: 14px;
  height: auto;
  width: calc((100% - 20px) / 5);
  position: relative;
  aspect-ratio: 1/1;
  z-index: 5;
}
@media screen and (max-width: 768px) {
  section.what .cp_tab > label span {
    display: none;
  }
}
@media screen and (min-width: 769px) {
  section.what .cp_tab > label {
    width: calc((100% - 60px) / 5);
    font-size: 18px;
    line-height: 1.75;
  }
}
section.what .cp_tab > label::before {
  display: block;
  letter-spacing: 0.15em;
  font-size: 20px;
  color: var(--accent-color);
  font-weight: 700;
  line-height: 1;
}
@media screen and (max-width: 768px) {
  section.what .cp_tab > label::before {
    margin-right: 0;
  }
}
@media screen and (min-width: 769px) {
  section.what .cp_tab > label::before {
    font-size: 39px;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: -17px;
  }
}
@media screen and (max-width: 768px) {
  section.what .cp_tab > label {
    min-width: auto;
  }
  section.what .cp_tab > label::after {
    content: none;
  }
}
section.what .cp_tab > label:hover, section.what .cp_tab > input:focus + label {
  background-color: var(--accent-color);
  color: #fff;
}
section.what .cp_tab > label:hover::before, section.what .cp_tab > input:focus + label::before {
  color: #fff;
}
section.what .cp_tab > input:checked + label {
  background-color: var(--accent-color);
}
section.what .cp_tab > input:checked + label::before {
  color: #fff;
}
section.what .cp_tab > input:checked + label::after {
  border-top-color: #fff;
}
@media screen and (max-width: 768px) {
  section.what .cp_tab > input:checked + label::after {
    content: "";
    position: absolute;
    background-repeat: no-repeat;
    border: none;
    background-image: url(../images/tab-delta.svg);
    width: 35px !important;
    height: 42px;
    bottom: -32px;
  }
}
section.what .cp_tab > input:checked + label::after {
  background-image: url(../images/tab-delta.svg);
  width: 46px;
  height: 42px;
  bottom: -32px;
}
section.what .cp_tab .cp_tabpanels {
  margin-top: 5px;
  padding-inline: 20px;
  padding-block: 20px 60px;
  width: 100%;
  position: relative;
}
@media screen and (min-width: 769px) {
  section.what .cp_tab .cp_tabpanels {
    margin-top: 15px;
    padding-block: 40px 100px;
  }
}
section.what .cp_tab .media-text .media-text__media {
  text-align: center;
}
@media screen and (min-width: 769px) {
  section.what .cp_tab .media-text .media-text__media {
    max-width: 50%;
  }
}
@media screen and (min-width: 1200px) {
  section.what .cp_tab .media-text .media-text__media {
    max-width: none;
  }
}
section.what .cp_tab .media-text .media-text__text {
  max-width: 350px;
  padding-top: 35px;
  margin-inline: auto;
}
@media screen and (min-width: 769px) {
  section.what .cp_tab .media-text .media-text__text {
    margin-left: 30px;
  }
}
section.what .cp_tab .media-text h3 {
  font-size: 25px;
  font-family: "Microsoft YaHei", sans-serif;
  line-height: 1.2;
}
@media screen and (min-width: 769px) {
  section.what .cp_tab .media-text h3 {
    font-size: 32px;
  }
}
section.what .cp_tab .media-text h3 span {
  margin-right: 10px;
}
section.what .cp_tab .media-text .media-text__subcopy {
  font-size: 20px;
  margin-top: 20px;
  line-height: 1.75;
}
@media screen and (min-width: 769px) {
  section.what .cp_tab .media-text .media-text__subcopy {
    font-size: 24px;
    margin-top: 30px;
  }
}
section.what .cp_tab .media-text .media-text__content {
  font-weight: 400;
  margin-top: 20px;
  color: var(--font-color);
}
@media screen and (min-width: 769px) {
  section.what .cp_tab .media-text .media-text__content {
    margin-top: 30px;
    font-size: 18px;
    font-weight: 700;
  }
}
section.what .cp_tab .tab-nav-arrow {
  position: absolute;
  display: block;
  top: 50%;
  transform: translateY(-50%);
}
@media screen and (max-width: 768px) {
  section.what .cp_tab .tab-nav-arrow {
    top: 20%;
  }
}
section.what .cp_tab .tab-nav-arrow::before {
  display: block;
  position: absolute;
  z-index: 5;
  width: 30px;
  height: 50px;
}
@media screen and (max-width: 768px) {
  section.what .cp_tab .tab-nav-arrow::before {
    width: 23px;
    height: 43px;
  }
}
section.what .cp_tab .tab-nav-arrow.arrow-l {
  left: -15px;
}
@media screen and (min-width: 1200px) {
  section.what .cp_tab .tab-nav-arrow.arrow-l {
    left: -50px;
  }
}
section.what .cp_tab .tab-nav-arrow.arrow-l::before {
  content: url(../images/tab-arrow-l.svg);
}
section.what .cp_tab .tab-nav-arrow.arrow-r {
  right: 15px;
}
@media screen and (min-width: 1200px) {
  section.what .cp_tab .tab-nav-arrow.arrow-r {
    right: -20px;
  }
}
section.what .cp_tab .tab-nav-arrow.arrow-r::before {
  content: url(../images/tab-arrow-r.svg);
}
section.what .conveyor {
  margin-top: 80px;
  overflow: hidden;
  bottom: 0;
}
@media screen and (min-width: 769px) {
  section.what .conveyor {
    margin-top: 150px;
  }
}
section.what .conveyor .conveyor-slider {
  width: 1200px;
}
@media screen and (min-width: 769px) {
  section.what .conveyor .conveyor-slider {
    width: 2130px;
  }
}
@media screen and (min-width: 1921px) {
  section.what .conveyor .conveyor-slider {
    width: 100vw;
  }
}
section.what .conveyor .swiper-wrapper {
  transition-timing-function: linear !important;
}
section.what .conveyor__base {
  background-image: url(../images/conveyor-base.png);
  height: 62px;
  width: 100%;
  background-repeat: repeat-x;
  background-size: contain;
  border-top: 9px solid #fff;
}

section.flow {
  padding-block: 70px;
  position: relative;
}
@media screen and (min-width: 769px) {
  section.flow {
    padding-block: 100px;
  }
}
section.flow::after {
  content: "";
  background-image: url(../images/sep-delta-white.svg);
  height: 87px;
  width: 156px;
  background-repeat: no-repeat;
  background-size: contain;
  position: absolute;
  bottom: -50px;
  left: 50%;
  transform: translateX(-50%);
}
@media screen and (max-width: 768px) {
  section.flow::after {
    bottom: -35px;
  }
}
section.flow .section__bg-text {
  color: var(--green-color);
  opacity: 0.2;
}
section.flow .section__h2 {
  color: var(--green-color);
  margin-top: 15px;
}
@media screen and (min-width: 769px) {
  section.flow .section__h2 {
    margin-top: 30px;
  }
}
section.flow .flow__balloon-geen {
  margin-inline: auto;
  max-width: 480px;
  height: 80px;
  color: #fff;
  background-color: var(--green-color);
  position: relative;
  margin-top: 00px;
  font-size: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
}
@media screen and (max-width: 768px) {
  section.flow .flow__balloon-geen {
    margin-top: 60px;
    font-size: 20px;
  }
}
section.flow .flow__balloon-geen::before {
  content: "";
  background-image: url(../images/ballon-delta-green.svg);
  width: 68px;
  height: 38px;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  position: absolute;
  bottom: -30px;
  left: 50%;
  transform: translateX(-50%);
}
section.flow .flow__balloon-geen img {
  margin-right: 20px;
  vertical-align: middle;
}
@media screen and (max-width: 768px) {
  section.flow .flow__balloon-geen img {
    margin-right: 10px;
    width: 110px;
  }
}
section.flow .flow__balloon-problem {
  background-color: #e6e6e6;
  border-radius: 25px;
  max-width: var(--content-width);
  margin-inline: auto;
  padding-inline: 50px;
  padding-block: 70px 0;
  margin-top: 55px;
  position: relative;
}
@media screen and (max-width: 768px) {
  section.flow .flow__balloon-problem {
    padding-block: 40px 0;
    padding-inline: 20px;
    margin-top: 135px;
  }
}
@media screen and (min-width: 1090px) {
  section.flow .flow__balloon-problem {
    padding-inline: 110px;
  }
}
section.flow .flow__balloon-problem::after {
  content: "";
  background-image: url(../images/ballon-delta-gray.svg);
  width: 77px;
  height: 100px;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  position: absolute;
  top: -99px;
  right: 140px;
}
@media screen and (max-width: 768px) {
  section.flow .flow__balloon-problem::after {
    right: 90px;
  }
}
section.flow .flow__balloon-problem h3 {
  text-align: center;
  font-size: 23px;
}
@media screen and (min-width: 769px) {
  section.flow .flow__balloon-problem h3 {
    font-size: 24px;
  }
}
section.flow .flow__balloon-problem p {
  font-size: 14px;
  line-height: 2.54;
}
section.flow .flow__balloon-problem .media-text {
  margin-top: 15px;
}
section.flow .flow__balloon-problem .media-text__text {
  margin-top: 30px;
  margin-bottom: 30px;
}
@media screen and (min-width: 769px) {
  section.flow .flow__balloon-problem .media-text__text {
    margin-right: 30px;
  }
}
section.flow .flow__balloon-problem .media-text__media {
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
}

.circle-flow-list {
  display: flex;
  margin-top: 40px;
  position: relative;
  justify-content: space-between;
}
@media screen and (max-width: 768px) {
  .circle-flow-list {
    flex-direction: column;
    align-items: center;
  }
}
.circle-flow-list li {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100px;
  height: 100px;
  background-color: #fff;
  border: 3px solid;
  border-radius: 100%;
  flex-shrink: 0;
  text-align: center;
  line-height: 1.75;
  position: relative;
  z-index: 2;
}
@media screen and (max-width: 768px) {
  .circle-flow-list li {
    height: 50px;
    width: 100%;
    max-width: 300px;
    border-radius: 40px;
  }
  .circle-flow-list li + li {
    margin-top: 10px;
  }
}
@media screen and (min-width: 1090px) {
  .circle-flow-list li {
    width: 110px;
    height: 110px;
  }
}
@media screen and (min-width: 1200px) {
  .circle-flow-list li {
    width: 140px;
    height: 140px;
  }
}
.circle-flow-list::after {
  content: "";
  position: absolute;
  z-index: 1;
}
@media screen and (max-width: 768px) {
  .circle-flow-list::after {
    width: 0;
    height: 100%;
    border-left: 4px solid;
    left: 50%;
  }
}
@media screen and (min-width: 769px) {
  .circle-flow-list::after {
    width: 100%;
    height: 0px;
    border-bottom: 4px solid;
    top: 50%;
  }
}
.flow__detail .circle-flow-list {
  color: var(--green-color);
  width: 100%;
  margin-inline: auto;
  align-items: center;
  position: relative;
  margin-top: 100px;
  margin-bottom: -15px;
  max-width: 700px;
}
@media screen and (max-width: 768px) {
  .flow__detail .circle-flow-list {
    margin-top: 0;
  }
  .flow__detail .circle-flow-list li {
    border-radius: 0;
    height: 70px;
  }
  .flow__detail .circle-flow-list li + li {
    margin-top: 20px;
  }
}
@media screen and (min-width: 1090px) {
  .flow__detail .circle-flow-list {
    max-width: 900px;
  }
}
@media screen and (min-width: 1200px) {
  .flow__detail .circle-flow-list {
    max-width: var(--content-innner-width);
  }
}
.flow__detail .circle-flow-list li:nth-child(3),
.flow__detail .circle-flow-list li:nth-child(2) {
  border-style: dashed;
}
@media screen and (max-width: 768px) {
  .flow__detail .circle-flow-list li:nth-child(3),
  .flow__detail .circle-flow-list li:nth-child(2) {
    border-radius: 40px;
  }
  .flow__detail .circle-flow-list li:nth-child(3)::after,
  .flow__detail .circle-flow-list li:nth-child(2)::after {
    content: "";
    color: #fff;
    background-color: var(--green-color);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 100%;
    position: absolute;
    width: 70px;
    height: 70px;
    right: -5px;
  }
}
@media screen and (min-width: 769px) {
  .flow__detail .circle-flow-list li:nth-child(3),
  .flow__detail .circle-flow-list li:nth-child(2) {
    width: 95px;
    height: 95px;
  }
  .flow__detail .circle-flow-list li:nth-child(3)::before,
  .flow__detail .circle-flow-list li:nth-child(2)::before {
    content: url(../images/circle-list-mark.svg);
    width: 83px;
    height: 27px;
    position: absolute;
    top: -40px;
    text-align: center;
  }
  .flow__detail .circle-flow-list li:nth-child(3)::after,
  .flow__detail .circle-flow-list li:nth-child(2)::after {
    content: "";
    color: #fff;
    position: absolute;
    bottom: -35px;
    width: 100%;
    text-align: center;
  }
}

.flow__detail {
  margin-inline: auto;
  position: relative;
}
@media screen and (max-width: 768px) {
  .flow__detail {
    margin-top: 60px;
    display: flex;
    flex-direction: row-reverse;
    align-items: stretch;
    max-width: 400px;
  }
  .flow__detail .flow-detail-big-allow {
    display: none;
  }
  .flow__detail .flow__detail-copy {
    writing-mode: vertical-lr;
    width: 50px;
    margin-right: 10px;
    background-color: var(--green-color);
    color: #fff;
    font-size: 29px;
    margin-inline: 0;
    padding-top: 0;
    z-index: 1;
    letter-spacing: 0.7em;
    line-height: 0.8;
  }
  .flow__detail .flow__detail-copy span {
    text-combine-upright: all;
    font-feature-settings: "palt";
  }
  .flow__detail .flow__detail-copy span.large {
    margin-bottom: 10px;
  }
  .flow__detail .circle-flow-list li:last-child {
    margin-bottom: 20px;
  }
  .flow__detail .circle-flow-list::before {
    content: "";
    border-color: transparent transparent transparent var(--green-color);
    border-style: solid;
    border-width: 0 0 70px 80px;
    position: absolute;
    bottom: -69px;
    left: -60px;
  }
}
@media screen and (max-width: 768px) and (max-width: 768px) {
  .flow__detail .circle-flow-list::after {
    width: 0;
    height: 100%;
    border-left: 50px solid;
    left: -60px;
  }
}
@media screen and (min-width: 769px) {
  .flow__detail::before {
    content: "";
    width: 100%;
    height: 50px;
    background-color: var(--green-color);
    position: absolute;
    bottom: 45%;
  }
  .flow__detail::after {
    content: "";
    border-style: solid;
    border-color: #fff transparent transparent var(--green-color);
    position: absolute;
    bottom: 45%;
    right: 0;
    border-width: 70px 0 0 90px;
  }
}
@media screen and (min-width: 769px) and (min-width: 1200px) {
  .flow__detail::after {
    border-width: 70px 0 0 90px;
  }
}
@media screen and (min-width: 769px) and (min-width: 1300px) {
  .flow__detail::after {
    border-width: 100px 0 0 130px;
  }
}
@media screen and (min-width: 769px) and (min-width: 1410px) {
  .flow__detail::after {
    border-width: 120px 0 0 160px;
  }
}

.flow__detail-copy {
  color: var(--green-color);
  font-size: 26px;
  margin-inline: auto;
  background-image: url(../images/flow-detail-allow.svg);
  background-repeat: no-repeat;
  background-position: top center;
  background-size: contain;
  padding-top: 80px;
  margin-top: 50px;
  max-width: 600px;
  text-align: center;
}
@media screen and (min-width: 1090px) {
  .flow__detail-copy {
    max-width: calc(var(--content-innner-width) - 170px);
  }
}
@media screen and (min-width: 1200px) {
  .flow__detail-copy {
    max-width: calc(var(--content-innner-width) - 140px);
    padding-top: 100px;
    margin-top: 40px;
  }
}
.flow__detail-copy span.large {
  font-size: 36px;
}

.flow-detail-big-allow {
  margin-top: -120px;
}

section.download {
  padding-block: 130px 100px;
  background-color: var(--green-color);
  color: #fff;
}
@media screen and (min-width: 769px) {
  section.download {
    padding-block: 200px 100px;
  }
}
section.download .section__bg-text {
  opacity: 0.2;
  margin-top: 120px;
}
@media screen and (max-width: 768px) {
  section.download .section__bg-text {
    margin-top: 90px;
  }
}
section.download .section__h2 {
  margin-top: 15px;
}
@media screen and (min-width: 769px) {
  section.download .section__h2 {
    margin-top: 40px;
  }
}
section.download .section__h2 + p {
  margin-top: 40px;
  font-size: 14px;
}
@media screen and (min-width: 769px) {
  section.download .section__h2 + p {
    font-size: 15px;
    margin-top: 70px;
    text-align: center;
  }
}
section.download .clipbord-box {
  max-width: var(--content-innner-width);
  margin-inline: auto;
  background-color: #fff;
  color: var(--font-color);
  font-size: 28px;
  padding: 140px 70px;
  position: relative;
}
@media screen and (max-width: 768px) {
  section.download .clipbord-box {
    font-size: 16px;
    padding: 30px 20px;
  }
}
section.download .clipbord-box::before {
  content: "";
  background-image: url(../images/clipbord.svg);
  align-self: flex-start;
  margin-top: 20px;
  top: -60px;
  width: 185px;
  height: 60px;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}
@media screen and (min-width: 769px) {
  section.download .clipbord-box::before {
    width: 384px;
    height: 120px;
    top: -100px;
  }
}
section.download .clipbord-box ul li {
  display: flex;
  align-items: center;
  height: 100px;
  border-bottom: 3px dashed;
  position: relative;
}
@media screen and (max-width: 768px) {
  section.download .clipbord-box ul li {
    border-bottom-width: 2px;
  }
}
section.download .clipbord-box ul li::before {
  flex-shrink: 0;
  content: "";
  background-image: url(../images/check-mark.svg);
  width: 48px;
  height: 41px;
  margin-inline: 20px;
  margin-inline: 10px 15px;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}
@media screen and (max-width: 480px) {
  section.download .clipbord-box ul li::before {
    align-self: flex-start;
    margin-top: 20px;
    width: 25px;
    height: 23px;
  }
}
section.download .clipbord-box .is-style-ornament-w {
  margin-bottom: 50px;
  color: var(--green-color);
  font-size: 48px;
  margin-inline: auto;
  width: -moz-fit-content;
  width: fit-content;
}
@media screen and (max-width: 1089px) {
  section.download .clipbord-box .is-style-ornament-w {
    font-size: 22px;
  }
}
@media screen and (max-width: 768px) {
  section.download .clipbord-box .is-style-ornament-w {
    font-size: 18px;
    display: flex;
    align-items: flex-end;
    text-align: center;
  }
  section.download .clipbord-box .is-style-ornament-w:after {
    margin-left: 10px;
    height: 35px;
  }
  section.download .clipbord-box .is-style-ornament-w::before {
    height: 35px;
    margin-right: 10px;
  }
}
section.download .clipbord-box .is-style-ornament-w::before {
  background-image: url(../images/ornament-green-l.svg);
}
section.download .clipbord-box .is-style-ornament-w::after {
  background-image: url(../images/ornament-green-r.svg);
}
section.download .clipbord-box .ballon-logo {
  margin-top: 40px;
  display: flex;
  max-width: 745px;
  margin-inline: auto;
  align-items: center;
  width: -moz-fit-content;
  width: fit-content;
}
section.download .clipbord-box .ballon-logo .ballon-logo__content {
  display: flex;
  align-items: center;
  padding-inline: 20px;
  padding-block: 20px;
  min-height: 100px;
  border: 3px solid;
  border-radius: 10px;
  font-size: 24px;
  margin-left: 40px;
  position: relative;
}
@media screen and (max-width: 768px) {
  section.download .clipbord-box .ballon-logo .ballon-logo__content {
    padding-block: 10px;
    font-size: 14px;
    line-height: 1.75;
  }
}
section.download .clipbord-box .ballon-logo .ballon-logo__content::before {
  content: url(../images/ballon-delta-outline.svg);
  width: 30px;
  height: 39px;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: -28px;
}
section.download .clipbord-box .contact-buttons {
  display: flex;
  flex-wrap: wrap;
  margin-top: 40px;
  justify-content: center;
}
@media screen and (max-width: 1089px) {
  section.download .clipbord-box .contact-buttons {
    align-items: center;
    flex-direction: column;
  }
}
section.download .clipbord-box .contact-buttons .button {
  display: flex;
  align-items: center;
  justify-content: center;
  padding-block: 15px;
  padding-inline: 30px 20px;
  margin-bottom: 20px;
  font-size: 18px;
  flex: 1;
  width: 100%;
}
@media screen and (min-width: 481px) {
  section.download .clipbord-box .contact-buttons .button {
    font-size: 23px;
  }
}
@media screen and (min-width: 1090px) {
  section.download .clipbord-box .contact-buttons .button {
    max-width: 390px;
    height: 100px;
    margin-inline: 20px;
  }
}
section.download .clipbord-box .contact-buttons .button.icon-tel {
  background-color: var(--green-color);
  color: #fff;
  font-size: 20px;
}
@media screen and (min-width: 481px) {
  section.download .clipbord-box .contact-buttons .button.icon-tel {
    font-size: 32px;
  }
  section.download .clipbord-box .contact-buttons .button.icon-tel::before {
    margin-right: 15px;
  }
}
section.download .clipbord-box .contact-buttons .button.icon-tel::before {
  background-image: url(../images/tel-white.svg);
  margin-right: 10px;
}
section.download .clipbord-box .contact-buttons .button.icon-tel.disabeled {
  pointer-events: none;
}
section.download .clipbord-box .contact-buttons .button.icon-mail {
  border: 3px solid;
  color: var(--green-color);
  padding-inline: 10px;
}
@media screen and (max-width: 768px) {
  section.download .clipbord-box .contact-buttons .button.icon-mail::before {
    width: 30px;
    margin-top: 4px;
  }
}
@media screen and (min-width: 769px) {
  section.download .clipbord-box .contact-buttons .button.icon-mail {
    border-width: 5px;
  }
  section.download .clipbord-box .contact-buttons .button.icon-mail::before {
    margin-right: 15px;
  }
}
section.download .clipbord-box .contact-buttons .button.icon-mail::before {
  background-image: url(../images/mail-green.svg);
  margin-right: 10px;
}
section.download .box-button {
  background-color: #fff;
  color: var(--green-color);
  max-width: 800px;
  display: flex;
  align-items: center;
  position: relative;
  margin-inline: auto;
  width: 100%;
  margin-top: 30px;
  padding: 20px;
  height: 60px;
  font-size: 16px;
  box-shadow: none;
}
@media screen and (min-width: 769px) {
  section.download .box-button {
    height: 100px;
    font-size: 22px;
    padding: 30px;
    justify-content: center;
  }
}
section.download .box-button .button-icon-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 10px;
  background-color: var(--green-color);
}
@media screen and (max-width: 480px) {
  section.download .box-button .button-icon-arrow {
    width: 30px;
    height: 30px;
  }
}
@media screen and (min-width: 769px) {
  section.download .box-button .button-icon-arrow {
    right: 50px;
  }
}
section.download .titled-box {
  max-width: 800px;
  font-size: 22px;
  width: 100%;
  margin-inline: auto;
  border: 2px solid;
  padding: 30px 15px;
  font-size: 13px;
}
@media screen and (min-width: 769px) {
  section.download .titled-box {
    padding: 50px 40px;
  }
}
section.download .titled-box table {
  width: 100%;
}
section.download .titled-box th {
  width: 180px;
  font-size: 16px;
  padding-right: 20px;
}
@media screen and (max-width: 768px) {
  section.download .titled-box th {
    font-size: 14px;
    padding-right: 0;
    line-height: 1.75;
    white-space: nowrap;
  }
}
section.download .titled-box td {
  font-weight: 400;
  padding-left: 20px;
}
@media screen and (max-width: 768px) {
  section.download .titled-box td {
    line-height: 1.75;
    font-size: 14px;
    padding-left: 10px;
  }
}
section.download .titled-box th,
section.download .titled-box td {
  padding-block: 20px;
  border-bottom: 3px dotted;
}
section.download .titled-box tr:last-child th,
section.download .titled-box tr:last-child td {
  border-bottom: none;
}
section.download .titled-box tr:last-child ul {
  -moz-column-count: 2;
  column-count: 2;
}
section.download .titled-box ul {
  margin-left: 15px;
}
section.download .titled-box ul li {
  list-style-type: disc;
}
section.download .titled-box__title {
  background-color: var(--green-color);
  padding-inline: 30px;
  font-size: 16px;
  top: -12px;
}
@media screen and (min-width: 769px) {
  section.download .titled-box__title {
    min-width: 290px;
  }
}
section.download .titled-box__title::after {
  content: none;
}
section.download .notice {
  margin-top: 50px;
  max-width: 800px;
  width: 100%;
  margin-inline: auto;
}
section.download .notice th,
section.download .notice td {
  padding-block: 5px;
  vertical-align: middle;
}
@media screen and (max-width: 768px) {
  section.download .notice th,
  section.download .notice td {
    display: block;
  }
}
section.download .notice th {
  padding-inline: 25px;
  font-size: 18px;
  border-right: 2px solid;
  white-space: nowrap;
}
@media screen and (max-width: 768px) {
  section.download .notice th {
    width: 100%;
    border-bottom: 2px solid;
    border-right: none;
    text-align: center;
  }
}
section.download .notice td {
  padding-inline: 30px 0;
  font-weight: 400;
}
@media screen and (max-width: 768px) {
  section.download .notice td {
    padding-inline: 0;
  }
}
section.download a.problem-url {
  text-align: center;
  font-weight: 400;
  margin-top: 40px;
  display: block;
  text-decoration: underline;
}
section.download .download-buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 60px;
}
section.download .download-buttons .download-button {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: center;
  background-color: #fff;
  color: var(--green-color);
  height: 70px;
  max-width: 310px;
  margin-inline: 20px;
  padding: 20px;
  margin-bottom: 20px;
}
section.download .download-buttons .download-button::after {
  content: "";
  background-image: url(../images/download.svg);
  background-repeat: no-repeat;
  background-size: contain;
  width: 16px;
  height: 17px;
  margin-left: auto;
}
section.download .download-buttons .download-button:last-child {
  padding-left: 55px;
}

section.environment {
  padding-block: 80px;
}
section.environment .section__bg-text {
  color: var(--green-color);
  opacity: 0.2;
}
section.environment .section__h2 {
  color: var(--green-color);
  margin-top: 40px;
}
section.environment table.environment {
  width: 100%;
  max-width: 790px;
  margin-inline: auto;
  margin-top: 70px;
  border-collapse: collapse;
}
section.environment table.environment tr {
  border-bottom: 3px dotted var(--green-color);
}
section.environment table.environment th {
  width: 200px;
  font-size: 16px;
  padding-inline: 10px;
  color: var(--green-color);
}
@media screen and (min-width: 769px) {
  section.environment table.environment th {
    padding-inline: 40px;
  }
}
section.environment table.environment td {
  font-weight: 400;
  padding-left: 20px;
}
section.environment table.environment th,
section.environment table.environment td {
  padding-block: 20px;
}
section.environment .environment__notice {
  margin-top: 50px;
  max-width: 800px;
  width: 100%;
  margin-inline: auto;
}
section.environment .environment__notice th,
section.environment .environment__notice td {
  padding-block: 5px;
  vertical-align: middle;
}
@media screen and (max-width: 768px) {
  section.environment .environment__notice th,
  section.environment .environment__notice td {
    display: block;
  }
}
section.environment .environment__notice th {
  padding-inline: 25px;
  font-size: 18px;
  white-space: nowrap;
  background-color: var(--green-color);
  color: #fff;
  width: 180px;
  text-align: center;
}
@media screen and (max-width: 768px) {
  section.environment .environment__notice th {
    width: 100%;
    padding-bottom: 0;
  }
}
section.environment .environment__notice td {
  padding-block: 20px;
  padding-inline: 30px;
  font-weight: 400;
  border: 5px solid var(--green-color);
  font-size: 14px;
  line-height: 1.75;
}

.fixed-banner.anzen {
  background-color: var(--green-color);
  color: #fff;
  display: block;
  position: fixed;
  bottom: 0;
  width: calc(100vw - 40px);
  margin-inline: 20px;
  border: 2px solid #fff;
  border-bottom: none;
  padding: 20px 10px 10px;
  text-align: center;
  font-size: 14px;
  z-index: 5;
}
@media screen and (min-width: 769px) {
  .fixed-banner.anzen {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
}
.fixed-banner.anzen img {
  margin-right: 10px;
  vertical-align: text-bottom;
}
@media screen and (min-width: 769px) {
  .fixed-banner.anzen img {
    margin-right: 0;
    margin-bottom: 10px;
  }
}
.fixed-banner.anzen span {
  font-size: 24px;
}
.fixed-banner.anzen::before {
  content: url(../images/safty-log-banner.svg);
  width: 56px;
  height: 53px;
  position: absolute;
  top: -30px;
  text-align: center;
  display: block;
  left: 50%;
  transform: translateX(-50%);
}
@media screen and (min-width: 769px) {
  .fixed-banner.anzen::before {
    top: -13px;
  }
}
.fixed-banner.anzen::after {
  content: "";
  border-width: 6px 0 6px 7px;
  border-style: solid;
  border-color: transparent transparent transparent #fff;
  display: inline-block;
}
@media screen and (min-width: 769px) {
  .fixed-banner.anzen {
    width: 156px;
    height: 156px;
    border-radius: 100%;
    border-bottom: solid;
    top: 210px;
    right: 0px;
    z-index: 8;
    line-height: 1.43;
  }
  .fixed-banner.anzen span {
    display: block;
    line-height: 29px;
  }
  .fixed-banner.anzen:after {
    display: block;
    position: absolute;
    bottom: 15px;
    left: 50%;
    transform: translateX(-50%) rotate(90deg);
  }
}

* {
  letter-spacing: 0.15em;
}

.page-company .hero-header .hero-header__title span {
  color: var(--sub-color);
}
.page-company .inner-content {
  padding-inline: 20px;
  font-weight: 700;
}
.page-company .titled-box::after {
  content: none;
}
.page-company .border-text-box {
  display: inline-block;
  background-color: #fff;
  width: 210px;
  height: 66px;
  border: 3px solid var(--font-color);
  box-shadow: 3px 3px 0 var(--font-color);
  border-radius: 10px;
  position: relative;
}
@media screen and (min-width: 769px) {
  .page-company .border-text-box {
    border-width: 5px;
    width: 350px;
    height: 110px;
  }
}
.page-company .border-text-box img {
  margin-inline: auto;
  margin-block: 15px;
  display: block;
}
@media screen and (max-width: 768px) {
  .page-company .border-text-box img {
    height: 38px;
    margin-block: 10px;
  }
}
.page-company .hero-header__sub-copy {
  font-family: "Microsoft YaHei";
  font-size: 14px;
  line-height: 1.75;
  letter-spacing: 0.15em;
  margin-top: 10px;
}
@media screen and (min-width: 769px) {
  .page-company .hero-header__sub-copy {
    font-size: 20px;
  }
}
.page-company .wrapper_breadcrumb {
  color: #fff;
  z-index: 2;
  position: relative;
}
.page-company .wrapper_breadcrumb a {
  color: var(--sub-color);
}
.page-company .section__bg-text {
  opacity: 0.2;
}
@media screen and (max-width: 768px) {
  .page-company .section__bg-text {
    font-size: 60px;
  }
}
.page-company .section__h2 {
  margin-top: 40px;
}
.page-company .titled-box {
  background-color: #fff;
  max-width: var(--content-innner-width);
  padding-block: 90px 100px;
  padding-inline: 5px;
  margin-inline: auto;
  text-align: center;
  border-width: 4px;
}
.page-company .titled-box__title {
  background-color: var(--main-color);
  color: #fff;
  font-size: 25px;
  padding: 5px;
  width: 220px;
  height: 80px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}
@media screen and (max-width: 768px) {
  .page-company .titled-box__title {
    font-size: 20px;
    width: 200px;
    height: 55px;
    top: -28px;
  }
}
.page-company .titled-box__title::after {
  content: none;
}

.about-us {
  margin-top: -52px;
  padding-block: 190px 150px;
  background-color: var(--main-color);
  color: #fff;
}
@media screen and (max-width: 768px) {
  .about-us {
    padding-block: 90px 50px;
  }
}
.about-us .section__subcopy {
  line-height: 2.56;
  margin-top: 25px;
}
@media screen and (min-width: 769px) {
  .about-us .section__subcopy {
    margin-top: 80px;
  }
}
@media screen and (max-width: 768px) {
  .about-us .section__subcopy > div {
    font-size: 15px;
    font-weight: 700;
    line-height: 2;
  }
}
.about-us .upper-dot {
  background-image: radial-gradient(circle at center, #fff 20%, transparent 20%);
  background-size: 18px 0.3em;
}
@media screen and (min-width: 769px) {
  .about-us .upper-dot {
    background-size: 33px 0.3em;
  }
}

.thought {
  background-image: url(../images/vision-bg-sp.jpg);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center bottom;
  padding-block: 40px 250px;
}
@media screen and (min-width: 481px) {
  .thought {
    padding-block: 40px 400px;
  }
}
@media screen and (min-width: 769px) {
  .thought {
    padding-block: 100px 400px;
    background-image: url(../images/vision-bg.png);
    background-size: cover;
  }
}
.thought .inner-content {
  position: relative;
}
.thought .balloon-link {
  color: #fff;
  background-image: url(../images/balloon-link-bg.svg);
  width: 190px;
  height: 206px;
  background-size: contain;
  background-repeat: no-repeat;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  line-height: 1.75;
  padding-left: 10px;
}
@media screen and (max-width: 768px) {
  .thought .balloon-link {
    margin-top: 45px;
    margin-inline: auto;
  }
}
@media screen and (min-width: 769px) {
  .thought .balloon-link {
    position: absolute;
    right: 100px;
    top: -200px;
  }
}
.thought .section__bg-text {
  color: var(--base-color);
  opacity: 1;
}
.thought .section__h2 {
  margin-top: 10px;
}
.thought .catch-copy {
  margin-top: 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
@media screen and (max-width: 768px) {
  .thought .catch-copy {
    text-align: center;
    font-size: 46px;
    line-height: 1.92;
  }
}
@media screen and (min-width: 769px) {
  .thought .catch-copy {
    margin-top: 90px;
    font-size: 66px;
    line-height: 1.75;
  }
}
@media screen and (min-width: 1090px) {
  .thought .catch-copy {
    flex-direction: row;
  }
}
.thought .catch-copy .border-text-box {
  margin-inline: 0;
}
@media screen and (min-width: 769px) {
  .thought .catch-copy .border-text-box {
    margin-inline: -30px 20px;
  }
}
@media screen and (min-width: 769px) {
  .thought p {
    text-align: center;
    margin-top: 55px;
  }
}
.thought .vision__list {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 55px;
  position: relative;
}
.thought .vision__list .vision-slider {
  width: 100%;
  max-width: 400px;
}
@media screen and (min-width: 1090px) {
  .thought .vision__list .vision-slider {
    max-width: 980px;
  }
}
.thought .vision__list .swiper-slide-content {
  flex-grow: 0;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  border-radius: 100%;
  font-weight: 700;
  font-size: 18px;
  line-height: 1.75;
  border: 4px solid var(--main-color);
  background-color: #fff;
  margin-inline: auto;
  width: 310px;
  height: 310px;
  text-align: center;
}
@media screen and (min-width: 1090px) {
  .thought .vision__list .swiper-slide-content {
    margin-inline: 15px;
  }
}
.thought .vision__list .swiper-slide-content h3 {
  line-height: 1.45;
  text-align: center;
  font-size: 25px;
  display: flex;
  align-items: center;
  color: var(--main-color);
}
@media screen and (min-width: 769px) {
  .thought .vision__list .swiper-slide-content h3 {
    font-size: 25px;
    height: 22%;
  }
}
.thought .vision__list .swiper-slide-content h3 span::first-letter {
  color: var(--sub-color) !important;
}
.thought .vision__list .swiper-slide-content p {
  margin-top: 30px;
}
.thought .vision__list .swiper-pagination {
  --swiper-pagination-color: var(--main-color);
  --swiper-pagination-bullet-inactive-color: var(--main-color);
  --swiper-pagination-bullet-inactive-opacity: var(0.3);
  bottom: -30px;
}
.thought .vision__list .swiper-button-next:after {
  content: "";
  border-style: solid;
  border-width: 14px 0 14px 14px;
  border-color: transparent transparent transparent var(--main-color);
  display: block;
  margin-left: 22px;
}
.thought .vision__list .swiper-button-prev:after {
  content: "";
  border-style: solid;
  border-width: 14px 14px 14px 0;
  border-color: transparent var(--main-color) transparent transparent;
  display: block;
  margin-right: 22px;
}

section.value {
  background-color: var(--main-color);
  color: #fff;
  padding-block: 60px 150px;
}
@media screen and (min-width: 769px) {
  section.value {
    padding-top: 100px;
    padding-bottom: 100px;
  }
}
section.value .inner-content {
  padding-inline: 0;
}
section.value .media-text {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 1100px;
  margin-inline: auto;
  width: 100%;
}
@media screen and (min-width: 1090px) {
  section.value .media-text {
    flex-direction: row;
  }
}
section.value .media-text .media-text__figure {
  flex-shrink: 0;
}
@media screen and (min-width: 769px) {
  section.value .media-text .media-text__figure {
    margin-right: 30px;
  }
}
section.value .media-text .catch-copy {
  font-size: 50px;
  line-height: 1.75;
}
@media screen and (max-width: 768px) {
  section.value .media-text .catch-copy {
    font-size: 40px;
    text-align: center;
  }
}
section.value .media-text .catch-copy .border-text-box {
  width: 275px;
  height: 90px;
  vertical-align: -20px;
  margin-right: 15px;
}
@media screen and (max-width: 768px) {
  section.value .media-text .catch-copy .border-text-box {
    width: 228px;
    height: 72px;
  }
}
section.value .media-text .catch-copy .border-text-box img {
  width: 220px;
}
section.value .media-text p {
  margin-top: 50px;
}
@media screen and (max-width: 1089px) {
  section.value .media-text p {
    text-align: center;
    margin-top: 25px;
    margin-inline: 20px;
  }
}
@media screen and (max-width: 768px) {
  section.value .media-text .media-text__text {
    width: 100%;
  }
}
@media screen and (min-width: 1090px) {
  section.value .media-text .media-text__text {
    width: 100%;
  }
}
section.value .media-text .value__list {
  margin-top: 30px;
  max-width: ~710px;
}
@media screen and (max-width: 1089px) {
  section.value .media-text .value__list {
    margin-inline: auto;
  }
}
section.value .media-text .value__list .swiper-slide .value__list-header {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 205px;
  height: 205px;
  background-color: #fff;
  border: 4px solid;
  font-size: 26px;
    font-weight: 600;
  border-radius: 100%;
  color: var(--main-color);
  margin-inline: auto;
  text-align:center;
}
section.value .media-text .value__list .swiper-slide .value__list-header.slide-2 {
  color: var(--sub-color);
}
section.value .media-text .value__list .swiper-slide .value__list-header.slide-3 {
  color: var(--accent-color);
}
section.value .media-text .value__list .swiper-slide .value__list-header.slide-4 {
  color: var(--green-color);
}
section.value .media-text .value__list .swiper-slide + li {
  margin-left: 40px;
}
section.value .media-text .value__list .swiper-slide p {
  margin-top: 15px;
  line-height: 1.75;
  text-align: center;
}
section.value .value__header {
  font-size: 60px;
  line-height: 1.3;
}
@media screen and (max-width: 1089px) {
  section.value .value__header {
    font-size: 51px;
    text-align: center;
    margin-top: 85px;
  }
}
section.value .value__header::first-letter {
  color: var(--sub-color);
}
section.value .value__header > span {
  margin-left: 50px;
  font-size: 16px;
}
@media screen and (max-width: 768px) {
  section.value .value__header > span {
    display: block;
    margin-left: 0;
  }
}
section.value .value__header > span > span {
  font-size: 36px;
  margin-left: 8px;
  margin-right: 5px;
}
section.value .spirit__header {
  text-align: center;
  margin-top: 80px;
  font-weight:700;
  padding-bottom:30px;
}
section.value .spirit-slider {
  margin-top: 60px;
}
section.value .spirit-slider .swiper-wrapper {
  transition-timing-function: linear !important;
  counter-set: slide;
}
section.value .spirit-slider .swiper-slide {
  text-align: center;
  padding-inline: 5px;
  width: 220px !important;
  height: 236px;
  padding-top: 16px;
}
section.value .spirit-slider .swiper-slide .swiper-slide__content {
  background-color: #fff;
  color: var(--font-color);
  display: flex;
  flex-direction: column;
  padding-bottom: 35px;
  width: 100%;
  height: 220px;
  padding-top: 25px;
}
section.value .spirit-slider .swiper-slide .swiper-slide__content::after {
  content: "";
  background-image: url(../images/split-icon.svg);
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  position: absolute;
  width: 72px;
  height: 72px;
  top: -1px;
  right: -10px;
}
section.value .spirit-slider .spirit__slider-counter {
  position: absolute;
  top: 0;
  left: 50%;
  font-size: 34px;
  color: #fff;
  transform: translateX(-50%);
  text-shadow: 1px 1px 0 var(--main-color), 1px -1px 0 var(--main-color), -1px 1px 0 var(--main-color), -1px -1px 0 var(--main-color);
}
section.value .spirit-slider .spirit__slider-header {
  font-size: 19px;
  font-weight: 700;
  height: 60px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
section.value .spirit-slider .spirit__slider-content {
  font-weight: 400;
  line-height: 1.75;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

section.credit {
  position: relative;
  overflow: hidden;
  padding-bottom: 100px;
}
section.credit .credit-sep {
  width: 100%;
  min-height: 230px;
  background-image: url(../images/sep-spirit.svg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  position: relative;
  z-index: 5;
  top: -1px;
  margin-bottom: -40px;
}
@media screen and (max-width: 768px) {
  section.credit .credit-sep {
    min-height: 120px;
  }
}
section.credit .credit__logo {
  display: flex;
  position: relative;
  width: 660px;
  height: 660px;
  border: 4px solid var(--main-color);
  align-items: center;
  justify-content: center;
  border-radius: 100%;
  margin-inline: auto;
  flex-direction: column;
}
@media screen and (max-width: 768px) {
  section.credit .credit__logo {
    margin-left: calc((100% - 920px) / 2);
    margin-top: -130px;
    width: 920px;
    height: 920px;
  }
}
section.credit .credit__logo::before {
  content: "";
  background-color: #fff;
  width: 130px;
  height: 50px;
  position: absolute;
  top: -25px;
  left: 50%;
  transform: translateX(-50%);
}
section.credit .credit__logo .credit-logo__header {
  margin-top: 50px;
  font-size: 28px;
}
@media screen and (max-width: 768px) {
  section.credit .credit__logo .credit-logo__header {
    font-size: 20px;
  }
}
section.credit .credit__logo .credit-logo__header > span {
  color: var(--sub-color);
}
section.credit .credit__logo p {
  font-weight: 400;
  margin-top: 20px;
  font-size: 17px;
  line-height: 1.75;
}
@media screen and (min-width: 769px) {
  section.credit .credit__logo p {
    text-align: center;
  }
}
section.credit .credit__logo .credit__logo-text {
  position: absolute;
  left: -115px;
  top: 60px;
}
@media screen and (max-width: 768px) {
  section.credit .credit__logo .credit__logo-text {
    width: 192px;
    height: 83px;
    top: 155px;
    left: 270px;
  }
}
section.credit .credit__content {
  text-align: center;
  margin-top: 100px;
  margin-bottom: 40px;
}
@media screen and (min-width: 769px) {
  section.credit .credit__content {
    margin-bottom: 100px;
  }
}
section.credit .credit__content h3 {
  font-size: 25px;
  line-height: 1.75;
}
@media screen and (max-width: 768px) {
  section.credit .credit__content h3 {
    font-size: 21px;
  }
}
section.credit .credit__content p {
  font-weight: 700;
  margin-top: 35px;
}
section.credit .credit__content-bg {
  position: relative;
  overflow: hidden;
  margin-top: -40px;
}
@media screen and (min-width: 481px) {
  section.credit .credit__content-bg {
    margin-top: -130px;
  }
}
@media screen and (min-width: 1200px) {
  section.credit .credit__content-bg {
    margin-top: -15vw;
  }
}
@media screen and (min-width: 1921px) {
  section.credit .credit__content-bg {
    margin-top: 40px;
    overflow: visible;
  }
  section.credit .credit__content-bg::after, section.credit .credit__content-bg::before {
    content: "";
    position: absolute;
    width: 675px;
    height: 670px;
    bottom: 0;
    background-size: contain;
    background-repeat: no-repeat;
  }
  section.credit .credit__content-bg::before {
    background-image: url(../images/credit-left.png);
    left: 0;
  }
  section.credit .credit__content-bg::after {
    background-image: url(../images/credit-right.png);
    right: 0;
  }
}
section.credit .credit__content-bg img {
  width: 100%;
}
@media screen and (min-width: 1921px) {
  section.credit .credit__content-bg img {
    width: auto;
  }
}
section.credit .large_text {
  font-size: 43px;
  line-height: 1.75;
  text-align: center;
}
@media screen and (max-width: 768px) {
  section.credit .large_text {
    font-size: 25px;
  }
}
section.credit .large_text + p {
  margin-top: 50px;
  font-size: 18px;
  line-height: 2.2;
  text-align: center;
}
@media screen and (max-width: 768px) {
  section.credit .large_text + p {
    font-size: 16px;
    text-align: left;
  }
}
section.credit .large_text .upper-dot {
  background-image: radial-gradient(circle at center, var(--accent-color) 15%, transparent 15%);
  background-position: top right;
  background-repeat: repeat-x;
  background-size: 50px 0.4em;
  padding-top: 0.5em;
}
@media screen and (max-width: 768px) {
  section.credit .large_text .upper-dot {
    background-size: 29px 0.4em;
  }
}
section.credit a.banner {
  background-image: url(../images/credit-link-bg-2.svg);
  width: 760px;
  height: 275px;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: top center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #fff;
  margin-inline: auto;
  margin-top: 60px;
  background-color: var(--accent-color);
}
@media screen and (max-width: 768px) {
  section.credit a.banner {
    width: 100%;
    min-height: 150px;
    height: auto;
  }
}
section.credit a.banner .banner__text {
  font-size: 60px;
  display: flex;
  line-height: 1;
  align-items: center;
}
@media screen and (max-width: 768px) {
  section.credit a.banner .banner__text {
    font-size: 41px;
  }
}
section.credit a.banner .button-icon-arrow {
  background-color: #fff;
  margin-left: 20px;
}
section.credit a.banner .button-icon-arrow::before {
  border-left-color: var(--accent-color);
}
section.credit a.banner .banner__subtext {
  font-size: 24px;
  margin-top: 15px;
}
@media screen and (max-width: 768px) {
  section.credit a.banner .banner__subtext {
    font-size: 14px;
  }
}

section.service {
  padding-top: 100px;
  padding-bottom: 250px;
  background-color: var(--base-color);
  background-image: url(../images/sep-mission.svg);
  background-repeat: no-repeat;
  background-position: center bottom -1px;
  background-size: var(--sep-image-size);
}
@media screen and (max-width: 768px) {
  section.service {
    padding-top: 60px;
    padding-bottom: 180px;
  }
}
section.service .section__bg-text {
  color: #fff;
  opacity: 1;
}
section.service .sub-copy {
  font-size: 30px;
  text-align: center;
  margin-top: 65px;
  line-height: 1.75;
}
@media screen and (max-width: 768px) {
  section.service .sub-copy {
    font-size: 17px;
  }
}
section.service .main-copy {
  margin-top: 10px;
  text-align: center;
  font-size: 44px;
  line-height: 1.27;
}
@media screen and (max-width: 768px) {
  section.service .main-copy {
    font-size: 30px;
  }
}
section.service .main-copy + p {
  text-align: center;
  font-size: 17px;
  line-height: 1.75;
  margin-top: 40px;
}
@media screen and (max-width: 768px) {
  section.service .main-copy + p {
    font-size: 15px;
  }
}
section.service .titled-box h3 {
  font-size: 33px;
  line-height: 1.7;
}
@media screen and (max-width: 768px) {
  section.service .titled-box h3 {
    font-size: 18px;
  }
}
section.service .titled-box ul {
  margin-top: 55px;
  display: flex;
  flex-direction: column;
}
@media screen and (min-width: 1090px) {
  section.service .titled-box ul {
    flex-direction: row;
  }
}
section.service .titled-box ul li {
  margin-inline: 20px;
  text-align: center;
}
section.service .titled-box ul li + li {
  margin-top: 60px;
}
@media screen and (min-width: 1090px) {
  section.service .titled-box ul li + li {
    margin-top: 0;
  }
}
section.service .titled-box ul li h4 {
  color: var(--sub-color);
  font-size: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
@media screen and (min-width: 769px) {
  section.service .titled-box ul li h4 {
    font-size: 24px;
  }
}
@media screen and (min-width: 1090px) {
  section.service .titled-box ul li h4 {
    height: 65px;
  }
}
section.service .titled-box ul li p {
  margin-top: 30px;
  display: flex;
  background-color: var(--base-color);
  width: 280px;
  height: 280px;
  border-radius: 100%;
  align-items: center;
  line-height: 1.67;
  padding: 40px;
  position: relative;
  margin-inline: auto;
}
@media screen and (max-width: 768px) {
  section.service .titled-box ul li p {
    margin-top: 10px;
    width: 260px;
    height: 260px;
    font-size: 14px;
  }
}
section.service .titled-box ul li p::after {
  content: "";
  background-repeat: no-repeat;
  background-size: contain;
  width: 70px;
  height: 76px;
  position: absolute;
  bottom: -25px;
  left: 50%;
  transform: translateX(-50%);
}
section.service .titled-box ul li:first-child p::after {
  background-image: url(../images/service-security.svg);
}
section.service .titled-box ul li:nth-child(2) p::after {
  background-image: url(../images/service-knowhow.svg);
  width: 118px;
  height: 93px;
  bottom: -25px;
}
section.service .titled-box ul li:last-child p::after {
  background-image: url(../images/service-tech.svg);
  width: 125px;
  height: 95px;
  bottom: -45px;
}
section.service .sub-copy-2 {
  font-size: 27px;
  text-align: center;
  margin-top: 90px;
  line-height: 1.75;
}
@media screen and (max-width: 768px) {
  section.service .sub-copy-2 {
    font-size: 18px;
  }
}
section.service .sub-copy-2 .upper-dot {
  --sub-color: var(--accent-color);
}
section.service .main-copy-2 {
  margin-top: 70px;
  text-align: center;
  font-size: 39px;
  line-height: 1.75;
}
@media screen and (max-width: 768px) {
  section.service .main-copy-2 {
    margin-top: 50px;
    font-size: 27px;
  }
}
section.service .main-copy-2 + p {
  text-align: center;
  font-size: 18px;
  line-height: 1.75;
  margin-top: 90px;
}
@media screen and (max-width: 768px) {
  section.service .main-copy-2 + p {
    margin-top: 60px;
    font-size: 14px;
  }
}
section.service .page-button {
  margin-top: 50px;
  margin-inline: auto;
  width: -moz-fit-content;
  width: fit-content;
}

section.message {
  background-color: var(--main-color);
  color: #fff;
  padding-block: 100px;
}
@media screen and (max-width: 768px) {
  section.message {
    padding-block: 80px;
  }
}
section.message .media-text {
  margin-top: 110px;
  max-width: var(--content-innner-width);
  margin-inline: auto;
}
@media screen and (max-width: 768px) {
  section.message .media-text {
    width: -moz-fit-content;
    width: fit-content;
    margin-top: 70px;
  }
}
section.message .media-text__text h3 {
  font-size: 34px;
  line-height: 2.3;
  color: var(--main-color);
  margin-top: 20px;
  margin-left: -25px;
}
@media screen and (max-width: 768px) {
  section.message .media-text__text h3 {
    font-size: 20px;
    margin-top: -20px;
    margin-left: -10px;
  }
}
section.message .media-text__text h3 span {
  background-color: #fff;
  padding-block: 8px;
  padding-inline: 10px 20px;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
@media screen and (max-width: 768px) {
  section.message .media-text__text h3 span {
    padding-block: 5px;
  }
}
section.message .media-text__text .message__name {
  margin-left: 40px;
  margin-top: 40px;
}
@media screen and (max-width: 768px) {
  section.message .media-text__text .message__name {
    margin-left: 0;
    margin-top: 30px;
  }
}
section.message .media-text__text .company-name {
  font-size: 24px;
  line-height: 1.75;
}
@media screen and (max-width: 768px) {
  section.message .media-text__text .company-name {
    font-size: 16px;
  }
}
section.message .media-text__text .ceo-name {
  font-size: 33px;
  line-height: 1.75;
}
section.message .media-text__text .ceo-name span {
  font-size: 18px;
  margin-right: 10px;
  vertical-align: middle;
}
@media screen and (max-width: 768px) {
  section.message .media-text__text .ceo-name {
    font-size: 25px;
  }
  section.message .media-text__text .ceo-name span {
    font-size: 15px;
  }
}
section.message .messate__content {
  max-width: 790px;
  margin-inline: auto;
  font-weight: 400;
  margin-top: 35px;
}
@media screen and (max-width: 768px) {
  section.message .float-right {
    margin-block: 20px;
    margin-inline: auto;
    display: block;
  }
}
@media screen and (min-width: 769px) {
  section.message .float-right {
    float: right;
    margin-left: 35px;
  }
}

section.overview {
  padding-top: 100px;
}
@media screen and (max-width: 768px) {
  section.overview {
    padding-top: 80px;
  }
}
section.overview .section__bg-text {
  color: var(--base-color);
  opacity: 1;
}
section.overview .table-dot {
  margin-top: 60px;
}
@media screen and (max-width: 768px) {
  section.overview .table-dot {
    margin-top: 30px;
  }
}
@media screen and (min-width: 769px) {
  section.overview .table-dot th {
    padding-inline: 50px;
  }
}
section.overview .footer-content__ism {
  border: none;
  padding-top: 0;
  margin-top: 50px;
  margin-inline: auto;
  width: -moz-fit-content;
  width: fit-content;
}
section.overview .titled-box {
  margin-top: 100px;
  max-width: 800px;
  border-width: 3px;
  border-radius: 5px;
  padding-inline: 20px;
  padding-block: 60px 40px;
}
section.overview .titled-box ul {
  font-weight: 400;
  max-width: 650px;
  margin-inline: auto;
}
@media screen and (min-width: 769px) {
  section.overview .titled-box ul {
    -moz-column-count: 2;
    column-count: 2;
  }
}
section.overview .titled-box ul li {
  text-align: left;
  margin-left: 15px;
  display: flex;
}
@media screen and (min-width: 481px) {
  section.overview .titled-box ul li {
    margin-left: 30px;
  }
}
section.overview .titled-box ul li::before {
  content: "";
  border-radius: 100%;
  background-color: var(--main-color);
  width: 4px;
  height: 4px;
  display: inline-block;
  margin-right: 10px;
  margin-top: 13px;
}
section.overview .history {
  background-color: var(--base-color);
  padding-block: 70px;
  margin-top: 70px;
}
@media screen and (min-width: 769px) {
  section.overview .history {
    padding-block: 100px;
    margin-top: 100px;
  }
}
section.overview .history .titled-box {
  margin-top: 25px;
  border: none;
  border-radius: 0;
  padding-bottom: 55px;
}
section.overview .history .titled-box p {
  font-size: 14px;
  text-align: justify;
  max-width: 680px;
  margin-inline: auto;
  margin-top: 20px;
  font-weight: 400;
}
@media screen and (min-width: 769px) {
  section.overview .history .titled-box p {
    text-align: center;
  }
}
section.overview .history .table-dot {
  margin-top: 45px;
  width: 100%;
  max-width: 700px;
}
@media screen and (min-width: 769px) {
  section.overview .history .table-dot th {
    padding-inline: 20px;
  }
}

section.access {
  padding-bottom: 105px;
  position: relative;
  overflow: hidden;
  position: relative;
  padding-top: 120px;
  background-repeat: no-repeat;
  background-size: 576px;
  background-image: url(../images/access-bg.png);
  background-position: top right;
}
@media screen and (max-width: 768px) {
  section.access {
    padding-top: 260px;
    background-size: 576px;
    background-image: url(../images/access-bg-sp.png);
    background-position: top center;
  }
}
section.access .section__bg-text {
  color: var(--base-color);
  opacity: 1;
  position: relative;
  z-index: 2;
}
@media screen and (max-width: 768px) {
  section.access .section__bg-text {
    font-size: 60px;
  }
}
section.access .media-text {
  max-width: var(--content-innner-width);
  margin-inline: auto;
  margin-top: 50px;
}
@media screen and (max-width: 768px) {
  section.access .media-text {
    flex-direction: column-reverse;
  }
}
section.access .media-text__figure {
  width: 490px;
}
@media screen and (max-width: 768px) {
  section.access .media-text__figure {
    width: 100%;
  }
}
section.access .embed-wrapper::before {
  padding-top: 70%;
}
section.access .meda-text__text {
  align-self: center;
  margin-left: 35px;
  font-size: 18px;
  line-height: 2.5;
}
@media screen and (max-width: 768px) {
  section.access .meda-text__text {
    margin-left: 0;
    font-size: 15px;
    line-height: 2;
    margin-bottom: 15px;
  }
}
section.access .balloon {
  background-color: var(--main-color);
  color: #fff;
  font-size: 16px;
  max-width: 550px;
  min-height: 60px;
  width: 100%;
  margin-inline: auto;
  margin-top: 40px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 5px;
  margin-bottom: 70px;
  padding-block: 15px;
}
@media screen and (max-width: 768px) {
  section.access .balloon {
    text-align: left;
  }
}
section.access .balloon::after {
  content: "";
  background-image: url(../images/balloon-delta.svg);
  background-repeat: no-repeat;
  background-size: contain;
  width: 48px;
  height: 43px;
  margin-left: auto;
  display: block;
  position: absolute;
  bottom: -20px;
  left: 50%;
  transform: translateX(-50%);
}
section.access .route {
  margin-top: 40px;
  display: flex;
  max-width: 840px;
  margin-inline: auto;
  align-items: center;
  color: var(--main-color);
}
@media screen and (max-width: 768px) {
  section.access .route {
    flex-direction: column;
  }
}
section.access .route__route-detail {
  display: grid;
  grid-template-columns: 70px 1fr 48px;
  align-items: center;
  width: 100%;
  max-width: 500px;
}
@media screen and (max-width: 768px) {
  section.access .route__route-detail {
    margin-top: 35px;
  }
}
section.access .route__line {
  background-color: var(--base-color);
  color: var(--main-color);
  font-size: 18px;
  height: 75px;
  width: 320px;
  justify-content: center;
  align-items: center;
  display: flex;
  position: relative;
}
section.access .route__line span {
  font-size: 13px;
  margin-right: 6px;
}
@media screen and (min-width: 769px) {
  section.access .route__line {
    margin-right: 40px;
  }
  section.access .route__line::after {
    content: "";
    display: block;
    height: 100%;
    border-style: solid;
    border-color: transparent transparent transparent var(--base-color);
    border-width: 22.5px 0 22.5px 15px;
    position: absolute;
    right: -15px;
  }
}
section.access .route__station {
  text-align: center;
  position: relative;
}
section.access .route__station span {
  position: absolute;
  top: -27px;
  font-size: 13px;
  display: block;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
}
section.access .route__station .station-name {
  width: 70px;
  height: 70px;
  border-width: 2px;
  border: 2px solid var(--main-color);
  justify-content: center;
  align-items: center;
  display: flex;
  border-radius: 100%;
}
section.access .route__walking {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  background-image: radial-gradient(circle at center, var(--main-color) 35%, transparent 35%);
  background-position: center right;
  background-repeat: repeat-x;
  background-size: 15px 5px;
  margin-inline: 10px;
}
section.access .route__walking img {
  height: 33px;
  margin-bottom: 20px;
  margin-top: -10px;
}
section.access .route__walking > span > span {
  font-size: 13px;
}

.page-download .hero-header .hero-header__title span {
  --main-color: var(--green-color);
}

section.download-page {
  padding-block: 40px 100px;
}
@media screen and (min-width: 769px) {
  section.download-page {
    padding-block: 80px 100px;
  }
}
section.download-page .inner-content {
  padding-inline: 20px;
}
section.download-page .section__h2 {
  color: var(--green-color);
  line-height: 1.46;
}
@media screen and (max-width: 768px) {
  section.download-page .section__h2 {
    font-size: 22px;
  }
}
section.download-page .download-notice {
  margin-top: 35px;
  font-size: 14px;
}
@media screen and (min-width: 769px) {
  section.download-page .download-notice {
    font-size: 15px;
    text-align: center;
  }
}
section.download-page .download-notice.alert {
  color: var(--accent-color);
  font-weight: 700;
  margin-top: 20px;
}
section.download-page .download-size {
  font-size: 13px;
  color: var(--green-color);
  text-align: center;
  margin-top: 10px;
}
section.download-page .box-button {
  background-color: var(--green-color);
  color: #fff;
  max-width: 800px;
  display: flex;
  align-items: center;
  position: relative;
  margin-inline: auto;
  width: 100%;
  margin-top: 30px;
  padding: 20px;
  height: 60px;
  font-size: 16px;
  font-weight: 700;
  justify-content: center;
  box-shadow: none;
}
@media screen and (min-width: 769px) {
  section.download-page .box-button {
    height: 100px;
    font-size: 22px;
    padding: 40px;
  }
}
section.download-page .box-button::after {
  content: "";
  background-image: url(../images/download-icon.svg);
  background-repeat: no-repeat;
  background-size: contain;
  width: 30px;
  height: 32.5px;
  margin-left: auto;
  position: absolute;
  right: 15%;
}
@media screen and (max-width: 768px) {
  section.download-page .box-button::after {
    width: 20px;
    height: 21px;
    right: 8%;
  }
}
section.download-page .titled-box {
  max-width: 800px;
  font-size: 22px;
  width: 100%;
  margin-inline: auto;
  border: 2px solid var(--green-color);
  padding: 30px 15px;
  margin-top: 70px;
  font-size: 13px;
}
section.download-page .titled-box::after {
  content: none;
}
@media screen and (min-width: 769px) {
  section.download-page .titled-box {
    padding: 50px 40px;
  }
}
section.download-page .titled-box table {
  width: 100%;
}
section.download-page .titled-box th {
  width: 140px;
  font-size: 16px;
  padding-right: 20px;
  text-align: left;
  color: var(--green-color);
  font-weight: 700;
}
@media screen and (max-width: 768px) {
  section.download-page .titled-box th {
    font-size: 14px;
    padding-right: 0;
    line-height: 1.75;
    white-space: nowrap;
  }
}
section.download-page .titled-box td {
  font-weight: 400;
  padding-left: 20px;
  font-size: 13px;
}
@media screen and (max-width: 768px) {
  section.download-page .titled-box td {
    line-height: 1.75;
    padding-left: 10px;
  }
}
section.download-page .titled-box tr:last-child {
  background-image: none;
}
section.download-page .titled-box tr:last-child ul {
  -moz-column-count: 2;
  column-count: 2;
}
section.download-page .titled-box ul {
  margin-left: 15px;
}
section.download-page .titled-box ul li {
  list-style-type: disc;
}
section.download-page .titled-box tr {
  --sub-color: var(--green-color);
}
section.download-page .titled-box__title {
  background-color: #fff;
  color: var(--green-color);
  padding-inline: 30px;
  font-size: 16px;
  top: -12px;
}
@media screen and (min-width: 769px) {
  section.download-page .titled-box__title {
    min-width: 290px;
  }
}
section.download-page .titled-box__title::after {
  content: none;
}
section.download-page .page-button {
  width: -moz-fit-content;
  width: fit-content;
  margin-inline: auto;
  --main-color: var(--green-color);
  margin-top: 50px;
}

.page-form .hero-header .hero-header__title span {
  --main-color: var(--green-color);
}

.mw_wp_form {
  max-width: 800px;
  margin-inline: auto;
  margin-top: 50px;
}
.mw_wp_form .form-label {
  display: inline-flex;
  align-items: center;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.3em;
  white-space: nowrap;
  flex-wrap: wrap;
  margin-bottom: 5px;
  color: var(--font-color);
}
.mw_wp_form .form-label.require::after {
  content: "必須";
  color: #fff;
  background-color: var(--accent-color);
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
  display: flex;
  width: 60px;
  height: 20px;
  align-items: center;
  justify-content: center;
  margin-left: 5px;
  margin-right: 5px;
  border-radius: 3px;
  letter-spacing: 0.3em;
  text-indent: 3px;
}
.mw_wp_form input[type=text] {
  width: 100%;
  height: 60px;
  background-color: var(--green-color-light);
  border: none;
  padding: 10px 20px;
  font-size: 17px;
}
.mw_wp_form input[type=radio],
.mw_wp_form input[type=checkbox] {
  -webkit-appearance: checkbox;
  border-radius: 0;
}
.mw_wp_form p.form-example {
  color: var(--green-color);
}
.mw_wp_form .form-wrapper + .form-wrapper {
  margin-top: 20px;
}
@media screen and (min-width: 769px) {
  .mw_wp_form .form-wrapper.col-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-column-gap: 40px;
    -moz-column-gap: 40px;
    column-gap: 40px;
  }
}
.mw_wp_form .form-subscript {
  margin-top: 15px;
  margin-bottom: 5px;
}
.mw_wp_form span.mwform-checkbox-field-text {
  font-size: 15px;
  font-weight: 700;
}
.mw_wp_form p.form-note {
  margin-top: 5px;
  font-size: 13px;
  color: var(--green-color);
  line-height: 1.6;
}
.mw_wp_form .form-wrapper.align-center {
  text-align: center;
  margin-top: 40px;
}
.mw_wp_form .form-wrapper.align-center label {
  margin-bottom: 15px;
}
.mw_wp_form .form-wrapper.align-center .mwform-checkbox-field {
  margin-top: 15px;
  display: inline-block;
}
.mw_wp_form .page-button {
  display: block;
  color: var(--main-color);
  transition: opacity 0.2s;
  display: flex;
  align-items: center;
  font-weight: 700;
  font-size: 16px;
  justify-content: center;
  transition: opacity 0.2s;
  margin-inline: auto;
}
.mw_wp_form .page-button:hover {
  opacity: 0.6;
}
.mw_wp_form .page-button .button-icon-arrow {
  margin-left: 25px;
}
.mw_wp_form .privacy-note a {
  color: var(--green-color);
  text-decoration: underline;
}
.mw_wp_form.mw_wp_form_preview p.privacy-note,
.mw_wp_form.mw_wp_form_preview p.form-note,
.mw_wp_form.mw_wp_form_preview p.form-example {
  display: none;
}
.mw_wp_form.mw_wp_form_preview .form-wrapper {
  font-weight: 700;
  color: var(--green-color);
  margin-top: 30px;
}
.mw_wp_form.mw_wp_form_preview .form-buttons {
  display: flex;
  justify-content: center;
  margin-top: 50px;
}
.mw_wp_form.mw_wp_form_preview .form-buttons::before {
  content: "";
  border: 1px solid var(--font-color);
  order: 2;
}
.mw_wp_form.mw_wp_form_preview .form-buttons .page-button {
  margin-top: 0;
  order: 3;
}
.mw_wp_form.mw_wp_form_preview .form-buttons .page-button.back {
  order: 1;
}
.mw_wp_form.mw_wp_form_preview .page-button.back {
  --main-color: var(--font-color);
}
.mw_wp_form.mw_wp_form_preview .page-button.back .button-icon-arrow {
  transform: rotate(180deg);
  margin-right: 50px;
  margin-left: 0;
}
@media screen and (max-width: 768px) {
  .mw_wp_form.mw_wp_form_preview .page-button.back .button-icon-arrow {
    margin-right: 15px;
  }
}
.mw_wp_form.mw_wp_form_preview .page-button:not(.back) .button-icon-arrow {
  margin-left: 50px;
}
@media screen and (max-width: 768px) {
  .mw_wp_form.mw_wp_form_preview .page-button:not(.back) .button-icon-arrow {
    margin-left: 15px;
  }
}
.mw_wp_form .error {
  order: 3;
  font-size: 14px !important;
  color: #ea5550;
  font-weight: 400;
}

.contact {
  padding-block: 40px 100px;
}
@media screen and (min-width: 769px) {
  .contact {
    padding-block~: 80px 100px;
  }
}
.contact .inner-content {
  padding-inline: 20px;
}
.contact .section__h2 {
  line-height: 1.46;
  margin-top: 100px;
  font-size: 28px;
}
@media screen and (max-width: 768px) {
  .contact .section__h2 {
    font-size: 22px;
    margin-top: 50px;
  }
}
.contact .contact-notice {
  margin-top: 35px;
}
@media screen and (min-width: 769px) {
  .contact .contact-notice {
    text-align: center;
  }
}
.contact .privacy-note a {
  color: var(--sub-color);
  text-decoration: underline;
}
@media screen and (max-width: 768px) {
  .contact .mw_wp_form {
    margin-top: 20px;
  }
}
.contact .mw_wp_form textarea,
.contact .mw_wp_form select,
.contact .mw_wp_form input[type=text] {
  background-color: var(--sub-color-light);
}
.contact .mw_wp_form textarea {
  border: none;
  width: 100%;
  height: 190px;
  padding: 15px;
}
.contact .mw_wp_form input[type=radio] {
  accent-color: var(--main-color);
}
.contact .mw_wp_form:not(.mw_wp_form_preview) .selectbox {
  display: block;
  width: 100%;
  height: 60px;
  background-color: var(--sub-color-light);
  font-size: 17px;
  align-items: center;
  position: relative;
}
.contact .mw_wp_form:not(.mw_wp_form_preview) .selectbox select {
  width: 100%;
  height: 100%;
  border: none;
  padding: 15px 45px 15px 15px;
  -webkit-appearance: none;
  color: var(--main-color);
}
.contact .mw_wp_form:not(.mw_wp_form_preview) .selectbox::after {
  content: "";
  border-style: solid;
  border-color: var(--main-color) transparent transparent transparent;
  border-width: 10px 6px 0 6px;
  flex-shrink: 0;
  position: absolute;
  right: 30px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
}
.contact .mw_wp_form .form-label.require::after {
  background-color: var(--main-color);
}
.contact .mw_wp_form .zip {
  display: flex;
  align-items: center;
}
.contact .mw_wp_form .zip::before {
  margin-right: 15px;
  content: "〒";
}
@media screen and (max-width: 768px) {
  .contact .mw_wp_form .subject-select .mwform-radio-field {
    display: block;
  }
  .contact .mw_wp_form .subject-select .horizontal-item + .horizontal-item {
    margin-left: 0;
  }
}
.contact .mw_wp_form .field-select {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(152px, 1fr));
  grid-column-gap: 10px;
  -moz-column-gap: 10px;
  column-gap: 10px;
  grid-row-gap: 10px;
  row-gap: 10px;
  margin-top: 15px;
}
.contact .mw_wp_form .field-select input[type=radio] {
  display: none;
}
.contact .mw_wp_form .field-select .horizontal-item .mwform-radio-field-text {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
  border: 3px solid var(--main-color);
  height: 120px;
  text-align: center;
  border-radius: 5px;
  cursor: pointer;
  color: var(--sub-color);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.15em;
  padding-top: 15px;
  transition: background-color 0.2s;
}
.contact .mw_wp_form .field-select .horizontal-item .mwform-radio-field-text:hover {
  background-color: var(--base-color);
}
.contact .mw_wp_form .field-select .horizontal-item .mwform-radio-field-text::before {
  content: url(../images/mecha-icon.svg);
  width: 41px;
  height: 45px;
  display: block;
}
.contact .mw_wp_form .field-select .horizontal-item:nth-child(2) .mwform-radio-field-text::before {
  content: url(../images/os-icon.svg);
}
.contact .mw_wp_form .field-select .horizontal-item:nth-child(3) .mwform-radio-field-text {
  letter-spacing: 0;
}
.contact .mw_wp_form .field-select .horizontal-item:nth-child(3) .mwform-radio-field-text::before {
  content: url(../images/safty-icon.svg);
}
.contact .mw_wp_form .field-select .horizontal-item:nth-child(4) .mwform-radio-field-text::before {
  width: 50px;
  height: 39px;
  content: url(../images/anzen-icon.svg);
}
.contact .mw_wp_form .field-select .horizontal-item:nth-child(5) .mwform-radio-field-text::before {
  content: url(../images/other-icon.svg);
}
.contact .mw_wp_form .field-select .horizontal-item + .horizontal-item {
  margin-left: 0;
}
.contact .mw_wp_form .field-select .horizontal-item input[type=radio]:checked + span {
  background-color: var(--base-color);
}
.contact .mw_wp_form .contact-inquiry .form-wrapper {
  margin-top: 40px;
}
.contact .page-button {
  margin-top: 50px;
}
.contact .mw_wp_form_preview {
  margin-top: 0;
}
.contact .mw_wp_form_preview .section__h2 {
  margin-top: 0;
}
.contact .mw_wp_form_preview .tel-box {
  display: none;
}
.contact .mw_wp_form_preview .form-wrapper.align-center {
  text-align: left;
}
.contact .mw_wp_form_preview .form-wrapper {
  color: var(--sub-color);
}
.contact .mw_wp_form_complete {
  max-width: 600px;
  margin-top: 0;
  margin-inline: auto;
}
.contact .mw_wp_form_complete .section__h2 {
  margin-top: 0;
}
.contact .mw_wp_form_complete .contact-notice {
  font-size: 14px;
}
.contact .mw_wp_form_complete p {
  text-align: left;
}
.contact .mw_wp_form_complete .contact-infomtion-box {
  margin-top: 40px;
  color: var(--main-color);
  border-width: 3px;
  border-style: solid none;
  padding-block: 40px;
  font-weight: 700;
  font-size: 14px;
}
.contact .mw_wp_form_complete .contact-infomtion-box .comany-name {
  margin-bottom: 20px;
}
.contact .mw_wp_form_complete .page-button {
  margin-inline: auto;
  width: -moz-fit-content;
  width: fit-content;
}
.contact p.form-example {
  color: var(--sub-color);
}

.tel-box {
  background-color: var(--base-color);
  max-width: 840px;
  margin-inline: auto;
  color: var(--main-color);
  text-align: center;
  border-radius: 15px;
  padding: 20px;
  font-weight: 700;
  margin-top: 30px;
}
@media screen and (max-width: 768px) {
  .tel-box {
    margin-top: 0;
  }
}

.tel-box__copy {
  font-size: 16px;
}
@media screen and (max-width: 480px) {
  .tel-box__copy {
    font-size: 14px;
  }
}

.tel-box__tel {
  font-size: 65px;
  margin-top: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}
@media screen and (max-width: 768px) {
  .tel-box__tel {
    font-size: 40px;
    margin-top: 0;
  }
}
@media screen and (max-width: 480px) {
  .tel-box__tel {
    font-size: 25px;
  }
}
.tel-box__tel::before {
  content: url(../images/tel-icon.svg);
  width: 47px;
  height: 64px;
  margin-right: 30px;
}
@media screen and (max-width: 768px) {
  .tel-box__tel::before {
    margin-right: 15px;
  }
}
@media screen and (max-width: 480px) {
  .tel-box__tel::before {
    width: 25px;
    height: 34px;
  }
}

.tel-box__info {
  font-size: 13px;
  color: var(--font-color);
  font-weight: 400;
  margin-top: 30px;
}
@media screen and (max-width: 768px) {
  .tel-box__info {
    margin-top: 0;
  }
}

.form-sep {
  text-align: center;
  color: var(--main-color);
  font-size: 17px;
  font-weight: 700;
  margin-top: 60px;
  margin-bottom: 40px;
  position: relative;
}
.form-sep::before {
  content: "";
  width: 100%;
  border-bottom: 1px solid;
  top: 50%;
  display: block;
  position: absolute;
  z-index: 1;
}
.form-sep span {
  display: inline-block;
  position: relative;
  background-color: #fff;
  z-index: 2;
  padding-inline: 20px;
}

.page-recruit {
  font-weight: 700;
}
.page-recruit .inner-content {
  padding-inline: 20px;
}
.page-recruit .titled-box::after {
  content: none;
  background-image: none;
}
.page-recruit .page-button {
  margin-inline: auto;
  width: -moz-fit-content;
  width: fit-content;
}
.page-recruit .titled-box__title::after {
  content: none;
}
.page-recruit .site-header__logo {
  text-align: center;
}
@media screen and (max-width: 959px) {
  .page-recruit .site-header__logo {
    padding-block: 0;
  }
  .page-recruit .site-header__logo a {
    display: block;
    width: -moz-fit-content;
    width: fit-content;
  }
}
@media screen and (max-width: 959px) {
  .page-recruit .site-header__logo img {
    width: 100px;
    height: 18px;
  }
}
.page-recruit .site-header__logo span {
  display: block;
  font-weight: 700;
}
@media screen and (max-width: 959px) {
  .page-recruit .site-header__logo span {
    font-size: 10px;
  }
}
@media screen and (min-width: 960px) {
  .page-recruit .site-header__logo span {
    color: #fff;
  }
}
@media screen and (min-width: 769px) {
  .page-recruit .site-header__content {
    padding-left: 0;
  }
}
@media screen and (max-width: 959px) {
  .page-recruit .site-header__content {
    background-color: #fff;
  }
}
@media screen and (min-width: 960px) {
  .page-recruit .site-header__content {
    padding-top: 50px;
    grid-template-columns: 240px 1fr auto;
    -moz-column-gap: 0;
    column-gap: 0;
  }
}
.page-recruit .site-header__nav {
  max-width: none;
}
.page-recruit .site-header__entry {
  background-color: var(--sub-color);
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  width: 100px;
  height: 100%;
  line-height: 19px;
  margin-left: auto;
  margin-right: 60px;
  position: relative;
  z-index: 1;
  font-weight: 700;
  letter-spacing: 0.15em;
}
@media screen and (min-width: 960px) {
  .page-recruit .site-header__entry {
    width: 95px;
    margin-top: -50px;
    height: 130px;
    line-height: 25px;
    margin-right: 0;
  }
}
@media screen and (min-width: 1090px) {
  .page-recruit .site-header__entry {
    width: 160px;
    font-size: 18px;
  }
}
@media screen and (min-width: 1300px) {
  .page-recruit .site-header__entry {
    width: 200px;
  }
}
.page-recruit .site-header__entry span {
  font-size: 0.67em;
}
@media screen and (min-width: 960px) {
  .page-recruit .site-header__nav {
    margin-right: 0;
    padding-right: 5px;
  }
  .page-recruit .site-header__nav > ul {
    justify-content: space-evenly;
  }
}
.page-recruit .global-menu-item img {
  margin-right: 10px;
}
.page-recruit .global-menu-item > a {
  line-height: 1.4;
}
@media screen and (max-width: 959px) {
  .page-recruit .global-menu-item > a br {
    display: none;
  }
}
@media screen and (min-width: 960px) {
  .page-recruit .global-menu-item > a {
    text-align: center;
    padding-inline: 5px;
    letter-spacing: 0;
    font-size: 11px;
  }
}
@media screen and (min-width: 1200px) {
  .page-recruit .global-menu-item > a {
    letter-spacing: 0.06em;
    font-size: 13px;
  }
}
@media screen and (min-width: 1300px) {
  .page-recruit .global-menu-item > a {
    font-size: 15px;
    letter-spacing: 0.15em;
  }
}
.page-recruit .global-menu-item > a:hover::after {
  content: none;
}
@media screen and (max-width: 959px) {
  .page-recruit .global-menu-item.has-icon {
    border-top: 1px solid #fff;
    margin-top: 35px;
    padding-top: 30px;
  }
  .page-recruit .global-menu-item.has-icon img {
    display: none;
  }
  .page-recruit .global-menu-item.has-icon a::before {
    background-image: url(../images/slide-menu-icon.svg);
    background-color: transparent;
    border-radius: 0;
    width: 23px;
    height: 25px;
    vertical-align: -8px;
  }
}
.page-recruit .hero-header {
  overflow: hidden;
}
@media screen and (max-width: 768px) {
  .page-recruit .hero-header {
    height: 100vh;
  }
}
@media screen and (min-width: 769px) {
  .page-recruit .hero-header {
    min-height: 770px;
    height: auto;
  }
}
@media screen and (max-width: 768px) {
  .page-recruit .hero-header {
    align-items: flex-end;
    padding-bottom: 40%;
    justify-content: flex-start;
    padding-inline: 20px;
  }
}
.page-recruit .hero-header .hero-header__title {
  font-size: 66px;
  color: #fff;
  line-height: 1.75;
  text-align: left;
}
@media screen and (max-width: 768px) {
  .page-recruit .hero-header .hero-header__title {
    font-size: 40px;
  }
}
@media screen and (max-width: 480px) {
  .page-recruit .hero-header .hero-header__title {
    font-size: 25px;
  }
}
.page-recruit .hero-header:after {
  content: url(../images/header-logos.svg);
  width: 106px;
  height: 297px;
  position: absolute;
  right: -10px;
  bottom: 20px;
}
@media screen and (min-width: 769px) {
  .page-recruit .hero-header:after {
    width: 225px;
    height: 608px;
    right: 0;
  }
}
@media screen and (min-width: 1410px) {
  .page-recruit .hero-header:after {
    right: calc((100vw - 1400px) / 2);
  }
}
.page-recruit .slide-menu-button {
  border-radius: 0;
  height: 64px;
}
.page-recruit .slide-menu-button:not(.is-open) {
  background-color: #fff;
}
.page-recruit .slide-menu-button:not(.is-open) .openbtn1 span {
  background-color: var(--main-color);
}
.page-recruit .slide-menu-recruit a::before {
  content: none;
}
.page-recruit .slide-menu-recruit a::after {
  margin-left: 30px;
}
.page-recruit .footer {
  padding-top: 70px;
  padding-bottom: 35px;
}
@media screen and (max-width: 768px) {
  .page-recruit .footer {
    padding-bottom: 20px;
  }
}
.page-recruit .footer .footer-content {
  display: block;
}
.page-recruit .footer .footer-content__logo {
  width: 190px;
}
.page-recruit .footer .entry-buttons {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  grid-gap: 40px;
  gap: 40px;
  margin-top: 60px;
}
.page-recruit .footer .box-button {
  box-shadow: 5px 5px 0 var(--accent-color);
  font-size: 18px;
  height: 110px;
  margin-top: 0;
}
@media screen and (max-width: 768px) {
  .page-recruit .footer .box-button {
    box-shadow: 3px 3px 0 var(--accent-color);
    font-size: 13px;
    height: 70px;
  }
  .page-recruit .footer .box-button .button-icon-arrow {
    transform: scale(0.67);
    right: 20px;
  }
}
.page-recruit .footer .instagram {
  margin-top: 70px;
  display: block;
}
.page-recruit .footer .instagram-balloon {
  margin-inline: auto;
  max-width: 730px;
  width: 100%;
  display: flex;
  color: #fff;
  justify-content: space-between;
  flex-wrap: wrap;
}
@media screen and (max-width: 768px) {
  .page-recruit .footer .instagram-balloon {
    flex-direction: column;
    align-items: center;
  }
}
.page-recruit .footer .instagram-balloon img {
  flex-shrink: 0;
  width: 80px;
}
@media screen and (max-width: 768px) {
  .page-recruit .footer .instagram-balloon img {
    width: 30px;
  }
}
.page-recruit .footer .instagram-balloon .instagram-balloon {
  border: 4px solid;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  position: relative;
  max-width: 590px;
  width: 100%;
  margin-left: 25px;
  margin-right: 0;
  font-size: 18px;
}
.page-recruit .footer .instagram-balloon .instagram-balloon::before {
  content: "";
  border-style: solid;
  border-width: 15px 25px 15px 0;
  border-color: transparent #fff transparent transparent;
  position: absolute;
  top: 50%;
  left: -25px;
  transform: translateY(-50%);
}
.page-recruit .footer .instagram-balloon .instagram-balloon::after {
  content: "";
  border-style: solid;
  border-width: 15px 25px 15px 0;
  border-color: transparent var(--main-color) transparent transparent;
  position: absolute;
  top: 50%;
  left: -16px;
  transform: translateY(-50%);
}
@media screen and (max-width: 768px) {
  .page-recruit .footer .instagram-balloon .instagram-balloon {
    width: auto;
    margin-inline: auto;
    font-size: 14px;
    margin-top: 30px;
    text-align: center;
    padding-block: 15px;
    line-height: 1.5;
    order: 3;
  }
  .page-recruit .footer .instagram-balloon .instagram-balloon::after, .page-recruit .footer .instagram-balloon .instagram-balloon::before {
    left: 50%;
    top: -18px;
    transform: translateX(-50%) rotate(90deg);
    border-width: 8px 15px 8px 0;
  }
  .page-recruit .footer .instagram-balloon .instagram-balloon::after {
    top: -11px;
  }
}
.page-recruit .footer .insta-account {
  text-align: center;
  margin-top: 25px;
  width: 100%;
}
@media screen and (max-width: 768px) {
  .page-recruit .footer .insta-account {
    order: 2;
    margin-top: 20px;
  }
}
.page-recruit .footer .footer-content__copyright {
  text-align: center;
  margin-top: 75px;
}
@media screen and (max-width: 768px) {
  .page-recruit .footer .footer-content__copyright {
    margin-top: 45px;
  }
}
.page-recruit .section__bg-text {
  font-size: 45px;
}
@media screen and (min-width: 481px) {
  .page-recruit .section__bg-text {
    font-size: 70px;
  }
}
@media screen and (min-width: 769px) {
  .page-recruit .section__bg-text {
    font-size: 90px;
  }
}
@media screen and (min-width: 1200px) {
  .page-recruit .section__bg-text {
    font-size: 145px;
  }
}
@media screen and (max-width: 768px) {
  .page-recruit .section__h2 {
    font-size: 16px;
  }
}

section.recruit-about {
  background-color: var(--base-color);
  padding-top: 0.1px;
  padding-bottom: 100px;
}
@media screen and (max-width: 768px) {
  section.recruit-about {
    padding-top: 40px;
    padding-bottom: 40px;
  }
}
section.recruit-about .section__bg-text {
  color: #fff;
}
section.recruit-about .section__h2 {
  margin-top: 20px;
}
@media screen and (max-width: 768px) {
  section.recruit-about .section__h2 {
    margin-top: 10px;
  }
}
section.recruit-about .about__maincopy {
  text-align: center;
  font-size: 34px;
  line-height: 1.75;
}
@media screen and (max-width: 768px) {
  section.recruit-about .about__maincopy {
    font-size: 18px;
  }
}
section.recruit-about .about__subcopy {
  text-align: center;
  margin-top: 50px;
  line-height: 1.75;
  margin-inline: auto;
}
@media screen and (max-width: 768px) {
  section.recruit-about .about__subcopy {
    font-size: 13px;
    line-height: 2;
    text-align: left;
    max-width: 280px;
  }
}
section.recruit-about .page-button {
  margin-top: 30px;
}
@media screen and (max-width: 768px) {
  section.recruit-about .page-button {
    margin-top: 20px;
  }
}
section.recruit-about .about__copy-contaner {
  background-image: url(../images/about-bg.svg);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  padding-top: 100px;
  padding-bottom: 145px;
  margin-top: 15px;
}
@media screen and (max-width: 768px) {
  section.recruit-about .about__copy-contaner {
    padding-top: 30px;
    padding-bottom: 35px;
    margin-top: 30px;
    background-position: center top;
    background-size: 210px;
  }
}
section.recruit-about .upper-dot {
  background-image: radial-gradient(circle at center, var(--accent-color) 20%, transparent 20%);
  background-size: 40px 0.4em;
}
@media screen and (max-width: 768px) {
  section.recruit-about .upper-dot.pc {
    background-image: none;
  }
}
section.recruit-about .upper-dot.sp {
  background-size: 21px 0.4em;
}
@media screen and (min-width: 769px) {
  section.recruit-about .upper-dot.sp {
    background-image: none;
  }
}
section.recruit-about .about-image {
  margin-inline: auto;
  display: block;
  margin-top: 30px;
}
@media screen and (min-width: 769px) {
  section.recruit-about .about-image {
    margin-top: -30px;
  }
}
section.recruit-about .about__aichi {
  position: relative;
  max-width: var(--content-innner-width);
  margin-inline: auto;
}
@media screen and (min-width: 769px) {
  section.recruit-about .about__aichi {
    margin-top: -80px;
  }
}
section.recruit-about .aichi-button {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-image: url(../images/about-aichi.svg);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  width: 233px;
  height: 208px;
  margin-left: auto;
  color: #fff;
}
@media screen and (max-width: 768px) {
  section.recruit-about .aichi-button {
    width: 125px;
    height: 112px;
    font-size: 10px;
    margin-right: auto;
    line-height: 1.6;
  }
}
section.recruit-about .aichi-button .button-icon-arrow {
  width: auto;
  height: auto;
  border-radius: 100%;
  background-color: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 15px;
}
@media screen and (max-width: 768px) {
  section.recruit-about .aichi-button .button-icon-arrow {
    margin-left: 2px;
    vertical-align: -1px;
  }
}
section.recruit-about .titled-box {
  border: none;
  background-color: #fff;
  border-radius: 0 38px 38px 38px;
  padding: 45px 20px 45px;
  max-width: var(--content-innner-width);
  margin-inline: auto;
}
@media screen and (max-width: 768px) {
  section.recruit-about .titled-box {
    padding: 40px 20px 30px;
  }
}
section.recruit-about .titled-box ul {
  font-weight: 400;
  max-width: 860px;
  width: 100%;
  margin-inline: auto;
  padding-left: 20px;
}
@media screen and (max-width: 768px) {
  section.recruit-about .titled-box ul {
    font-size: 14px;
  }
}
@media screen and (min-width: 769px) {
  section.recruit-about .titled-box ul {
    -moz-column-count: 3;
    column-count: 3;
    padding-left: 0;
  }
}
section.recruit-about .titled-box ul li {
  list-style: disc;
}
section.recruit-about .titled-box::after {
  content: "";
  width: 97%;
  height: 90%;
  border-width: 3px;
  bottom: -8px;
  right: -8px;
  border-radius: 0 0 28px 0;
  border-style: none solid solid none;
  border-color: var(--accent-color);
  position: absolute;
  z-index: 1;
  background-image: none;
  transform: translateY(0);
}
@media screen and (max-width: 768px) {
  section.recruit-about .titled-box::after {
    content: none;
    border-radius: 0 0 45px 0;
  }
}
section.recruit-about .titled-box__title {
  color: var(--main-color);
  background-color: transparent;
  font-size: 24px;
  top: -20px;
  padding-inline: 20px;
}
@media screen and (max-width: 768px) {
  section.recruit-about .titled-box__title {
    font-size: 18px;
    top: -12px;
  }
}
section.recruit-about .prize {
  background-color: rgba(255, 255, 255, 0.4784313725);
  height: 60px;
  font-size: 14px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 85px;
}
@media screen and (min-width: 769px) {
  section.recruit-about .prize {
    margin-top: 70px;
    height: 95px;
    font-size: 24px;
  }
}
@media screen and (min-width: 769px) {
  section.recruit-about .prize .prize__content {
    margin-inline: 90px;
  }
}
section.recruit-about .prize .prize__title {
  background-image: url(../images/about-ornament.svg);
  background-repeat: no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  text-align: center;
  font-size: 20px;
  width: 200px;
  height: 157px;
}
@media screen and (max-width: 768px) {
  section.recruit-about .prize .prize__title {
    font-size: 10px;
    width: 100px;
    height: 80px;
    position: absolute;
    top: -65px;
    left: 50%;
    transform: translateX(-50%);
    line-height: 1.2;
  }
}

section.recruit-project {
  padding-top: 70px;
  padding-bottom: 40px;
}
@media screen and (min-width: 769px) {
  section.recruit-project {
    padding-top: 120px;
    padding-bottom: 100px;
  }
}
section.recruit-project .section__bg-text {
  color: var(--base-color);
}
section.recruit-project .section__h2 {
  margin-top: 20px;
}
@media screen and (min-width: 769px) {
  section.recruit-project .section__h2 {
    margin-top: 40px;
  }
}
section.recruit-project .embed-youtube {
  max-width: 900px;
  background-color: var(--main-color);
  padding: 20px 20px 20px;
  position: relative;
  margin-inline: auto;
  margin-top: 110px;
}
@media screen and (min-width: 769px) {
  section.recruit-project .embed-youtube {
    padding: 30px;
  }
}
section.recruit-project .embed-youtube__title {
  background-color: var(--main-color);
  color: #fff;
  font-size: 24px;
  line-height: 1;
  font-weight: 700;
  text-align: center;
  position: relative;
  z-index: 5;
  border-radius: 10px 10px 0 0;
  max-width: 390px;
  width: 100%;
  padding: 10px 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  position: absolute;
  top: -45px;
  left: 50%;
  transform: translateX(-50%);
}
@media screen and (max-width: 768px) {
  section.recruit-project .embed-youtube__title {
    font-size: 18px;
    max-width: 260px;
    top: -30px;
  }
}
section.recruit-project .embed-youtube__title .sub-title {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  background-image: url(../images/project-youtube.svg);
  width: 162px;
  height: 175px;
  position: absolute;
  left: -120px;
  padding-bottom: 15px;
}
@media screen and (max-width: 768px) {
  section.recruit-project .embed-youtube__title .sub-title {
    font-size: 12px;
    width: 95px;
    height: 102px;
    left: -65px;
    top: -85px;
  }
}
section.recruit-project .embed-youtube__title .sub-title span {
  font-size: 36px;
}
@media screen and (max-width: 768px) {
  section.recruit-project .embed-youtube__title .sub-title span {
    font-size: 22px;
    letter-spacing: 0.1em;
  }
}
@media screen and (min-width: 769px) {
  section.recruit-project .embed-youtube__title {
    height: 70px;
  }
}
section.recruit-project .project-swiper-wrapper {
  margin-top: 70px;
}
section.recruit-project .swiper-wrapper {
  height: 700px;
}
@media screen and (max-width: 768px) {
  section.recruit-project .swiper-wrapper {
    height: 610px;
  }
}
section.recruit-project .project-slider .swiper-slide {
  transition: 0.7s ease-in;
  max-width: none;
  width: auto;
}
section.recruit-project .project-slider .swiper-slide.swiper-slide-active {
  transition: 0.7s ease-in;
  height: 700px;
}
@media screen and (max-width: 768px) {
  section.recruit-project .project-slider .swiper-slide.swiper-slide-active {
    height: 500px;
  }
}
section.recruit-project .project-slider .swiper-slide.swiper-slide-active .project-slider__title {
  background-color: var(--main-color);
  border-color: var(--main-color);
  color: #fff;
}
section.recruit-project .project-slider .swiper-slide.swiper-slide-active .project-slider__title::after {
  border-top-color: var(--main-color);
}
section.recruit-project .project-slider .swiper-slide.swiper-slide-active img {
  transition: 0.7s ease-in;
  transform: scale(1.6);
  padding-top: 70px;
}
@media screen and (max-width: 768px) {
  section.recruit-project .project-slider .swiper-slide.swiper-slide-active img {
    padding-top: 40px;
  }
}
section.recruit-project .project-slider .swiper-slide.swiper-slide-active p {
  transition: 0.7s ease-in;
  visibility: visible;
  opacity: 1;
  margin-top: 100px;
}
@media screen and (max-width: 768px) {
  section.recruit-project .project-slider .swiper-slide.swiper-slide-active p {
    max-width: 300px;
  }
}
section.recruit-project .project-slider .swiper-slide.green-color .project-slider__title {
  --main-color: var(--green-color);
}
section.recruit-project .project-slider .swiper-slide-content .project-slider__title {
  transition: 0.7s ease-out;
  width: 120px;
  height: 120px;
  border-radius: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--main-color);
  border: 3px solid;
  position: relative;
  margin-inline: auto;
  margin-bottom: 15px;
  line-height: 1.25;
  text-align: center;
}
@media screen and (max-width: 768px) {
  section.recruit-project .project-slider .swiper-slide-content .project-slider__title {
    width: 70px;
    font-size: 9px;
    height: 70px;
    line-height: 1.44;
  }
}
section.recruit-project .project-slider .swiper-slide-content .project-slider__title::after, section.recruit-project .project-slider .swiper-slide-content .project-slider__title::before {
  transition: 0.7s ease-in;
  content: "";
  border-style: solid;
  border-width: 14px 7px 0 7px;
  border-color: var(--main-color) transparent transparent transparent;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: -15px;
}
section.recruit-project .project-slider .swiper-slide-content .project-slider__title::after {
  border-width: 9px 4px 0 4px;
  border-top-color: #fff;
  bottom: -9px;
}
section.recruit-project .project-slider .swiper-slide-content img {
  display: block;
  margin-inline: auto;
  max-width: none;
}
@media screen and (max-width: 768px) {
  section.recruit-project .project-slider .swiper-slide-content img {
    width: 205px;
  }
}
@media screen and (max-width: 480px) {
  section.recruit-project .project-slider .swiper-slide-content img {
    width: 180px;
  }
}
section.recruit-project .project-slider .swiper-slide-content p {
  visibility: hidden;
  opacity: 0;
  font-size: 14px;
  color: var(--main-color);
  line-height: 2;
  text-align: center;
  width: -moz-max-content;
  width: max-content;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}
@media screen and (max-width: 768px) {
  section.recruit-project .project-slider .swiper-slide-content p {
    line-height: 1.5;
  }
}
section.recruit-project .project-slider .swiper-button-next,
section.recruit-project .project-slider .swiper-button-prev {
  --swiper-theme-color: var(--main-color);
  --swiper-navigation-top-offset: 60px;
  --swiper-navigation-sides-offset: calc(50% - 140px);
}
@media screen and (max-width: 768px) {
  section.recruit-project .project-slider .swiper-button-next,
  section.recruit-project .project-slider .swiper-button-prev {
    --swiper-navigation-top-offset: 40px;
  }
}
section.recruit-project .swiper-pagination {
  --swiper-pagination-color: var(--main-color);
  --swiper-pagination-bullet-inactive-color: var(--main-color);
  --swiper-pagination-bullet-inactive-opacity: var(0.3);
}
section.recruit-project .page-button {
  margin-top: 32px;
}

section.people {
  padding-top: 200px;
  padding-bottom: 320px;
  position: relative;
  background-color: var(--main-color);
  color: #fff;
  background-image: url(../images/people-bg.svg);
  overflow: hidden;
}
@media screen and (max-width: 768px) {
  section.people {
    padding-top: 110px;
    background-size: 300px;
    background-position: center top 200px;
    background-size: 420px;
  }
}
@media screen and (min-width: 769px) {
  section.people {
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
  }
}
section.people::before {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  top: -190px;
  border-top: 180px solid #fff;
  border-left: 1980px solid #fff;
  border-right: 1980px solid transparent;
  border-bottom: 180px solid transparent;
}
@media screen and (max-width: 768px) {
  section.people::before {
    top: -300px;
  }
}
section.people::after {
  content: "";
  width: 100%;
  height: 130px;
  position: absolute;
  left: 0;
  bottom: 0;
  background-color: var(--base-color);
  z-index: 1;
}
section.people .section__bg-text {
  color: var(--base-color);
  opacity: 0.2;
}
section.people .section__h2 {
  margin-top: 25px;
}
section.people .recruit-swiper-wrapper {
  bottom: 0;
}
section.people .swiper-wrapper {
  transition-timing-function: linear;
}
section.people .people-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  grid-column-gap: 40px;
  -moz-column-gap: 40px;
  column-gap: 40px;
  max-width: var(--content-innner-width);
  margin-inline: auto;
  margin-top: 65px;
}
@media screen and (max-width: 768px) {
  section.people .people-list {
    row-gap: 30px;
  }
}
section.people .people-list__person {
  max-width: 300px;
  margin-inline: auto;
  color: var(--main-color);
}
@media screen and (max-width: 768px) {
  section.people .people-list__person {
    max-width: 250px;
  }
}
section.people .people-list__person > a {
  display: block;
}
section.people .people-list__person > a:hover {
  opacity: 1;
}
section.people .people-list__person > a:hover img {
  opacity: 0.7;
}
section.people .people-list__person .person__image {
  background-color: #fff;
  margin-bottom: -8px;
}
section.people .people-list__person .person__histroy {
  display: inline-block;
  background-color: var(--accent-color);
  padding-block: 10px;
  padding-inline: 30px;
  position: relative;
  font-size: 16px;
}
@media screen and (max-width: 768px) {
  section.people .people-list__person .person__histroy {
    font-size: 14px;
    padding-block: 0;
    padding-inline: 20px;
  }
}
section.people .people-list__person .person__comment {
  background-color: var(--accent-color);
  padding-block: 10px;
  padding-inline: 30px;
  min-height: 70px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 10px;
  text-align: center;
  font-size: 16px;
  line-height: 1.625;
}
@media screen and (max-width: 768px) {
  section.people .people-list__person .person__comment {
    font-size: 15px;
    padding-inline: 10px;
    min-height: 60px;
  }
}
@media screen and (min-width: 769px) {
  section.people .people-list__person:nth-child(3n+1) {
    margin-block: 80px 0;
  }
  section.people .people-list__person:nth-child(3n+2) {
    margin-block: 40px 40px;
  }
  section.people .people-list__person:nth-child(3n+3) {
    margin-block: 0 80px;
  }
}
section.people .modal-person {
  display: none;
}

section.infographics {
  padding-top: 0.1px;
  padding-bottom: 120px;
  background-color: var(--base-color);
  background-image: url(../images/infographics-bg.png);
  background-repeat: repeat;
}
section.infographics .section__bg-text {
  color: var(--base-color);
  mix-blend-mode: multiply;
}
section.infographics .section__h2 {
  margin-top: 50px;
}
section.infographics .ig__items {
  margin-top: 85px;
  display: grid;
  grid-column-gap: 20px;
  -moz-column-gap: 20px;
  column-gap: 20px;
  grid-row-gap: 40px;
  row-gap: 40px;
  margin-inline: auto;
  max-width: 980px;
}
@media screen and (min-width: 481px) {
  section.infographics .ig__items {
    grid-template-columns: repeat(auto-fit, minmax(310px, 1fr));
  }
}
section.infographics .ig-item {
  opacity: 0;
  font-family: "Microsoft YaHei", sans-serif;
  display: flex;
  align-items: center;
  background-color: #fff;
  padding: 20px 15px 10px;
  text-align: center;
  position: relative;
  font-size: 18px;
}
@media screen and (min-width: 769px) {
  section.infographics .ig-item {
    height: 220px;
    width: 100%;
    flex-direction: column;
    justify-content: space-between;
    padding: 40px 15px 20px;
  }
}
section.infographics .ig-item .is-block {
  display: block;
  margin-block: 3px;
  text-align: center;
}
@media screen and (max-width: 768px) {
  section.infographics .ig-item .is-block {
    text-align: justify;
    margin-inline: auto;
    width: -moz-fit-content;
    width: fit-content;
  }
}
section.infographics .ig-item:last-child, section.infographics .ig-item:nth-last-child(2), section.infographics .ig-item:nth-last-child(3) {
  justify-content: ~center;
  padding-top: 28px;
  min-height: 100px;
}
@media screen and (min-width: 1200px) {
  section.infographics .ig-item:last-child, section.infographics .ig-item:nth-last-child(2), section.infographics .ig-item:nth-last-child(3) {
    height: 210px;
    padding-top: 20px;
  }
}
section.infographics .ig-item:last-child .ig-item__title, section.infographics .ig-item:nth-last-child(2) .ig-item__title, section.infographics .ig-item:nth-last-child(3) .ig-item__title {
  margin-bottom: 20px;
}
section.infographics .ig-item:last-child .ig-item__content, section.infographics .ig-item:nth-last-child(2) .ig-item__content, section.infographics .ig-item:nth-last-child(3) .ig-item__content {
  display: none;
}
section.infographics .ig-item:nth-last-child(3) .ig-item__title {
  margin-bottom: 5px;
}
@media screen and (min-width: 481px) {
  section.infographics .ig-item:nth-child(2n) {
    animation-delay: 0.2s;
  }
}
@media screen and (min-width: 1200px) {
  section.infographics .ig-item:nth-child(2n) {
    animation-delay: unset;
  }
  section.infographics .ig-item:nth-child(3n-1) {
    animation-delay: 0.2s;
  }
  section.infographics .ig-item:nth-child(3n) {
    animation-delay: 0.4s;
  }
}
@media screen and (max-width: 768px) {
  section.infographics .ig-item img {
    max-width: 50px;
    margin-inline: 20px;
  }
}
section.infographics .ig-item__title {
  color: var(--main-color);
  justify-content: space-around;
  font-size: 18px;
}
@media screen and (max-width: 768px) {
  section.infographics .ig-item__title {
    position: absolute;
    top: -15px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 15px;
    white-space: nowrap;
  }
}
@media screen and (max-width: 768px) {
  section.infographics .ig-item__content {
    font-size: 14px;
    width: 100%;
    line-height: 1.75;
    padding-top: 10px;
  }
}
section.infographics .ig-item__content > span {
  display: inline-block;
}
@media screen and (max-width: 768px) {
  section.infographics .ig-item__content > span {
    text-align: justify;
  }
}
section.infographics .ig-item__content span {
  padding-inline: 3px;
}

section.credo .section__bg-text {
  color: var(--base-color);
}
section.credo .section__h2 {
  margin-top: 35px;
}
section.credo .inner-content {
  padding-top: 100px;
  background-image: url(../images/credo-bg.svg), url(../images/credo-bg.svg);
  background-repeat: no-repeat, no-repeat;
  background-size: 480px, 480px;
  background-position: top 15px right -250px, bottom 50% left -250px;
  position: relative;
  z-index: 1;
}
@media screen and (min-width: 481px) {
  section.credo .inner-content {
    background-position: top 15px right -50%, bottom 50% left -50%;
  }
}
@media screen and (min-width: 1410px) {
  section.credo .inner-content {
    background-position: top 15px right 0, bottom 50% left 0;
  }
}
section.credo .titled-box.cred-balloon {
  max-width: var(--content-innner-width);
  margin-inline: auto;
  border-radius: 15px;
  border-width: 3px;
  background-color: rgba(255, 255, 255, 0.9);
  text-align: center;
  padding-block: 60px 50px;
}
@media screen and (max-width: 768px) {
  section.credo .titled-box.cred-balloon {
    padding: 30px 10px 30px;
  }
}
section.credo .titled-box.cred-balloon::before {
  content: "";
  border-style: solid;
  border-width: 27px 23px 0 23px;
  border-color: var(--main-color) transparent transparent transparent;
  position: absolute;
  bottom: -27px;
  left: 50%;
  transform: translateX(-50%);
}
section.credo .titled-box.cred-balloon::after {
  content: "";
  background-image: none;
  border-style: solid;
  border-width: 27px 23px 0 23px;
  border-color: #fff transparent transparent transparent;
  position: absolute;
  bottom: -22px;
  left: 50%;
  transform: translateX(-50%);
  width: auto;
  height: auto;
  right: auto;
}
section.credo .titled-box__title {
  color: var(--sub-color);
  background-color: #fff;
  padding-inline: 30px;
  top: -20px;
  font-size: 34px;
}
@media screen and (max-width: 768px) {
  section.credo .titled-box__title {
    font-size: 18px;
    padding-inline: 0;
  }
}
section.credo .is-style-ornament {
  font-size: 26px;
  margin-top: 70px;
  margin-inline: auto;
  width: -moz-fit-content;
  width: fit-content;
}
@media screen and (max-width: 768px) {
  section.credo .is-style-ornament {
    display: flex;
    align-items: flex-end;
    text-align: center;
    font-size: 14px;
  }
  section.credo .is-style-ornament::after, section.credo .is-style-ornament::before {
    flex-shrink: 0;
  }
}
section.credo .credo-lsit {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  margin-top: 30px;
}
@media screen and (min-width: 769px) {
  section.credo .credo-lsit {
    flex-direction: row;
    margin-top: 40px;
  }
}
section.credo .credo-lsit li {
  background-color: var(--base-color);
  flex-grow: 0;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  border-radius: 100%;
  font-weight: 700;
  font-size: 18px;
  line-height: 1.75;
  margin-inline: auto;
  position: relative;
  text-align: center;
  width: 160px;
  height: 160px;
  margin-bottom: 120px;
}
@media screen and (min-width: 769px) {
  section.credo .credo-lsit li {
    width: 220px;
    height: 220px;
    margin-bottom: 0;
    margin-inline: 15px;
  }
}
@media screen and (min-width: 1090px) {
  section.credo .credo-lsit li {
    width: 310px;
    height: 310px;
  }
}
section.credo .credo-lsit li h3 {
  line-height: 1.45;
  text-align: center;
  font-size: 25px;
  display: flex;
  align-items: center;
  color: var(--main-color);
}
@media screen and (min-width: 769px) {
  section.credo .credo-lsit li h3 {
    font-size: 25px;
    height: 22%;
  }
}
section.credo .credo-lsit li h3 span::first-letter {
  color: var(--sub-color) !important;
}
section.credo .credo-lsit li p {
  margin-top: 25px;
}
@media screen and (max-width: 768px) {
  section.credo .credo-lsit li p {
    position: absolute;
    bottom: -85px;
    width: 100vw;
    font-size: 15px;
    line-height: 2.13;
  }
}
@media screen and (max-width: 1089px) {
  section.credo .credo-lsit li p {
    font-size: 15px;
  }
}
section.credo .credo-lsit li::after {
  content: "";
  width: 50%;
  height: 50%;
  border-width: 4px;
  bottom: -8px;
  right: -8px;
  border-radius: 0 0 100% 0;
  border-style: none solid solid none;
  border-color: var(--accent-color);
  position: absolute;
  z-index: 1;
}
@media screen and (max-width: 768px) {
  section.credo .credo-lsit li::after {
    border-width: 2px;
    bottom: -4px;
    right: -4px;
  }
}
section.credo .titled-box.credo-value {
  background-color: var(--base-color);
  border: none;
  margin-top: 90px;
  padding: 30px 20px 35px;
}
section.credo .titled-box.credo-value .titled-box__title {
  background-color: transparent;
  color: var(--main-color);
  top: -25px;
}
section.credo .titled-box.credo-value .titled-box__title span::first-letter {
  color: var(--sub-color);
}
@media screen and (max-width: 768px) {
  section.credo .titled-box.credo-value .titled-box__title {
    font-size: 25px;
    top: -20px;
  }
}
section.credo .titled-box.credo-value > p {
  text-align: center;
  margin-bottom: 15px;
}
section.credo .titled-box.credo-value > dl {
  max-width: 530px;
  margin-inline: auto;
  display: flex;
  
}
@media screen and (max-width: 768px) {
  section.credo .titled-box.credo-value > dl {
    flex-direction: column;
    text-align: center;
    margin-top: 10px;
  }
}
section.credo .titled-box.credo-value dt {
  color: var(--sub-color);
  font-size: 18px;
}
@media screen and (min-width: 769px) {
  section.credo .titled-box.credo-value dt {
    margin-right: 35px;
  }
}
section.credo .credo-spirit {
  margin-top: 70px;
}
@media screen and (max-width: 768px) {
  section.credo .credo-spirit {
    border: 2px solid var(--main-color);
    padding-inline: 10px;
    position: relative;
    background-color: #fff;
    padding-bottom: 15px;
  }
}
section.credo .credo-spirit__title {
  font-size: 25px;
  text-align: center;
  background-color: #fff;
  font-family: "Microsoft YaHei", sans-serif;
    font-weight: 700
}
section.credo .credo-spirit__title::first-letter {
  color: var(--sub-color);
}
@media screen and (max-width: 768px) {
  section.credo .credo-spirit__title {
    margin-top: -20px;
    width: -moz-fit-content;
    width: fit-content;
    margin-inline: auto;
    padding-inline: 20px;
  }
}
section.credo .spirit-items {
  display: grid;
  grid-template-columns: 1fr;
  grid-column-gap: 40px;
  -moz-column-gap: 40px;
  column-gap: 40px;
  grid-row-gap: 50px;
  row-gap: 50px;
  counter-set: spirit;
  margin-top: 40px;
}
@media screen and (min-width: 769px) {
  section.credo .spirit-items {
    grid-template-columns: 1fr 1fr;
  }
}
@media screen and (min-width: 1200px) {
  section.credo .spirit-items {
    grid-template-columns: 1fr 1fr 1fr;
  }
}
section.credo .spiri-item {
  background-color: var(--base-color);
  height: 170px;
  text-align: center;
  display: flex;
  align-items: center;
  position: relative;
  padding: 5px;
  counter-increment: spirit;
}
section.credo .spirit-item__title {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: -15px;
  font-size: 18px;
  width: 100%;
}
section.credo .spirit-item__title::before {
  content: counter(spirit, decimal-leading-zero);
  color: var(--sub-color);
  margin-right: 5px;
  font-size: 20px;
}
section.credo .spirit-item__content {
  font-weight: 400;
  width: 100%;
  line-height: 1.75;
  font-size:13px;

}
section.credo .credo-card {
  background-color: var(--sub-color);
  margin-top: -76px;
  padding-top: 100px;
  padding-bottom: 55px;
}
@media screen and (min-width: 1200px) {
  section.credo .credo-card {
    padding-top: 65px;
  }
}
section.credo .media-text.balloon {
  flex-direction: column;
}
@media screen and (min-width: 1200px) {
  section.credo .media-text.balloon {
    flex-direction: row-reverse;
  }
}
section.credo .media-text.balloon .media-text__figure {
  position: relative;
  text-align: center;
}
@media screen and (min-width: 1200px) {
  section.credo .media-text.balloon .media-text__figure {
    margin-right: -120px;
  }
}
section.credo .media-text.balloon .media-text__text {
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  align-self: center;
  background-color: #fff;
  border-radius: 10px;
  min-height: 140px;
  border: 3px solid;
  line-height: 1.75;
  margin-inline: 20px;
  margin-top: 20px;
  width: auto;
  padding: 30px 10px;
}
@media screen and (min-width: 1200px) {
  section.credo .media-text.balloon .media-text__text {
    padding: 20px;
    width: 100%;
    margin-inline: 0 24px;
	font-size:16px;
	font-weight:600;
  }
}
section.credo .media-text.balloon .media-text__text::before {
  content: "";
  border-style: solid;
  border-width: 20px 0 20px 30px;
  border-color: transparent transparent transparent var(--main-color);
  position: absolute;
  left: 50%;
  top: -36px;
  transform: translateX(-50%) rotate(-90deg);
}
section.credo .media-text.balloon .media-text__text::after {
  content: "";
  border-style: solid;
  border-width: 20px 0 20px 30px;
  border-color: transparent transparent transparent #fff;
  position: absolute;
  left: 50%;
  top: -30px;
  transform: translateX(-50%) rotate(-90deg);
}
@media screen and (min-width: 1200px) {
  section.credo .media-text.balloon .media-text__text::before {
    right: -30px;
    top: 50%;
    left: auto;
    transform: translateY(-50%);
  }
  section.credo .media-text.balloon .media-text__text::after {
    right: -25px;
    top: 50%;
    left: auto;
    transform: translateY(-50%);
  }
}

section.recruit-message {
  background-color: var(--base-color);
  padding-top: 100px;
  padding-bottom: 50px;
  overflow: hidden;
}
@media screen and (min-width: 769px) {
  section.recruit-message {
    padding-bottom: 330px;
    background-image: url(../images/sep-message.svg);
    background-position: bottom;
    background-repeat: no-repeat;
  }
}
section.recruit-message .section__bg-text {
  color: #fff;
  opacity: 0.5;
}
section.recruit-message .section__h2 {
  margin-top: 40px;
}
section.recruit-message .section__copy {
  text-align: center;
  margin-top: 20px;
  line-height: 2.28;
  font-size: 14px;
}
@media screen and (min-width: 769px) {
  section.recruit-message .section__copy {
    margin-top: 70px;
  }
}
section.recruit-message .section__copy .size-l {
  font-size: 20px;
}
section.recruit-message .section__sub-copy {
  font-size: 18px;
  line-height: 2.333;
  text-align: center;
  margin-top: 20px;
}
section.recruit-message .balloon {
  background-repeat: no-repeat;
  display: flex;
  justify-content: center;
  align-items: center;
  padding-bottom: 10px;
  color: #fff;
  position: absolute;
  left: 0;
  z-index: 2;
  font-size: 16px;
  width: 70px;
  height: 75px;
  top: -100px;
}
@media screen and (min-width: 481px) {
  section.recruit-message .balloon {
    font-size: 20px;
    width: 100px;
    height: 110px;
    top: -55px;
  }
}
@media screen and (min-width: 769px) {
  section.recruit-message .balloon {
    font-size: 28px;
    width: 138px;
    height: 150px;
    top: -100px;
  }
}
@media screen and (min-width: 960px) {
  section.recruit-message .balloon {
    left: -10px;
  }
}
@media screen and (min-width: 1090px) {
  section.recruit-message .balloon {
    left: -50px;
  }
}
@media screen and (min-width: 1200px) {
  section.recruit-message .balloon {
    left: -70px;
  }
}
section.recruit-message h3.is-style-ornament {
  position: absolute;
  top: -20px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 18px;
  padding-inline: 20px;
  white-space: nowrap;
}
@media screen and (min-width: 481px) {
  section.recruit-message h3.is-style-ornament {
    font-size: 25px;
  }
}
@media screen and (min-width: 769px) {
  section.recruit-message h3.is-style-ornament {
    font-size: 30px;
  }
}
section.recruit-message h3.is-style-ornament::before, section.recruit-message h3.is-style-ornament::after {
  vertical-align: middle;
  width: 26px;
  height: 31px;
}
@media screen and (min-width: 769px) {
  section.recruit-message h3.is-style-ornament::before, section.recruit-message h3.is-style-ornament::after {
    width: 33px;
    height: 44px;
  }
}
section.recruit-message h3.is-style-ornament::before {
  margin-right: 10px;
}
@media screen and (min-width: 769px) {
  section.recruit-message h3.is-style-ornament::before {
    margin-right: 20px;
  }
}
section.recruit-message h3.is-style-ornament::after {
  margin-left: 8px;
}
@media screen and (min-width: 769px) {
  section.recruit-message h3.is-style-ornament::after {
    margin-left: 18px;
  }
}
section.recruit-message .honesty {
  border-style: solid none;
  border-width: 3px;
  border-color: var(--main-color);
  margin-top: 130px;
  position: relative;
  padding-block: 70px 60px;
}
@media screen and (min-width: 481px) {
  section.recruit-message .honesty {
    margin-top: 90px;
  }
}
section.recruit-message .honesty .balloon {
  background-image: url(../images/honesty.svg);
}
section.recruit-message .honesty h3 {
  background-color: var(--base-color);
}
section.recruit-message .honesty .statue-list {
  display: flex;
  width: 100%;
  justify-content: space-evenly;
}
@media screen and (max-width: 768px) {
  section.recruit-message .honesty .statue-list {
    align-items: center;
    flex-direction: column;
  }
}
section.recruit-message .honesty .statue-list li {
  flex: 1;
  text-align: center;
  font-size: 14px;
}
@media screen and (min-width: 481px) {
  section.recruit-message .honesty .statue-list li {
    font-size: 16px;
  }
}
@media screen and (min-width: 960px) {
  section.recruit-message .honesty .statue-list li {
    font-size: 18px;
  }
}
section.recruit-message .honesty .statue-list li img {
  width: 210px;
}
section.recruit-message .honesty .statue-list li div {
  margin-top: 40px;
}
@media screen and (max-width: 768px) {
  section.recruit-message .honesty .statue-list li + li {
    margin-top: 40px;
  }
  section.recruit-message .honesty .statue-list li div {
    margin-top: 15px;
  }
}
section.recruit-message .enrichment {
  background-color: #fff;
  position: relative;
  padding: 50px 20px 100px;
  margin-top: 150px;
}
@media screen and (min-width: 481px) {
  section.recruit-message .enrichment {
    padding: 85px 40px 100px;
  }
}
@media screen and (min-width: 769px) {
  section.recruit-message .enrichment {
    padding: 60px 60px 40px;
  }
}
section.recruit-message .enrichment .balloon {
  background-image: url(../images/enrichment.svg);
}
section.recruit-message .enrichment .enrichment__image {
  position: absolute;
  bottom: -100px;
  right: 20px;
  display: block;
}
@media screen and (max-width: 768px) {
  section.recruit-message .enrichment .enrichment__image {
    width: 120px;
    height: 130px;
  }
}
@media screen and (max-width: 959px) {
  section.recruit-message .enrichment .enrichment__image {
    width: 150px;
    height: 180px;
  }
}
@media screen and (min-width: 960px) {
  section.recruit-message .enrichment .enrichment__image {
    right: -120px;
  }
}
@media screen and (min-width: 1200px) {
  section.recruit-message .enrichment .enrichment__image {
    top: -50px;
    right: -120px;
  }
}
section.recruit-message .enrichment .check-list {
  font-size: 14px;
  line-height: 1.5;
}
@media screen and (min-width: 769px) {
  section.recruit-message .enrichment .check-list {
    font-size: 18px;
    line-height: 1.75;
  }
}
section.recruit-message .enrichment .check-list li {
  padding-left: 40px;
  position: relative;
}
section.recruit-message .enrichment .check-list li::before {
  content: "";
  display: block;
  background-image: url(../images/check.svg);
  width: 23px;
  height: 20px;
  position: absolute;
  left: 0;
  top: 3px;
}
section.recruit-message .enrichment .check-list li + li {
  margin-top: 40px;
}
section.recruit-message .realization {
  position: relative;
  margin-top: 200px;
  padding-top: 40px;
}
@media screen and (min-width: 481px) {
  section.recruit-message .realization {
    margin-top: 155px;
    padding-top: 50px;
  }
}
@media screen and (min-width: 1200px) {
  section.recruit-message .realization {
    margin-top: 115px;
  }
}
section.recruit-message .realization .balloon {
  background-image: url(../images/realization.svg);
  top: -100px;
}
@media screen and (min-width: 481px) {
  section.recruit-message .realization .balloon {
    top: -50px;
  }
}
section.recruit-message .realization .realization__list li {
  text-align: center;
  background-color: var(--sub-color);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100px;
  padding: 30px;
  font-size: 15px;
  line-height: 1.56;
}
@media screen and (min-width: 769px) {
  section.recruit-message .realization .realization__list li {
    font-size: 22px;
  }
}
section.recruit-message .realization .realization__list li + li {
  margin-top: 20px;
}
section.recruit-message .foot-copy {
  font-size: 20px;
  margin-top: 60px;
  text-align: center;
  line-height: 2;
}
section.recruit-message .foot-copy .upper-dot {
  --sub-color: var(--main-color);
  background-size: 23px 0.4em;
}
@media screen and (min-width: 769px) {
  section.recruit-message .foot-copy {
    font-size: 28px;
    margin-top: 100px;
  }
  section.recruit-message .foot-copy .upper-dot {
    background-size: 33px 0.4em;
  }
}

section.training {
  background-color: var(--base-color);
  color: var(--main-color);
  font-size: 18px;
  padding-top: 50px;
  padding-bottom: 90px;
}
@media screen and (min-width: 769px) {
  section.training {
    background-color: var(--main-color);
    color: #fff;
    padding-bottom: 100px;
  }
}
section.training .is-style-ornament {
  text-align: center;
}
section.training .is-style-ornament::before, section.training .is-style-ornament::after {
  vertical-align: -15px;
  width: 39px;
  height: 44px;
}
@media screen and (max-width: 768px) {
  section.training .is-style-ornament {
    font-size: 14px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    margin-inline: 20px;
    width: auto;
    line-height: 1.75;
  }
  section.training .is-style-ornament::before, section.training .is-style-ornament::after {
    margin-bottom: -5px;
    width: 25px;
    height: 30px;
  }
}
@media screen and (min-width: 769px) {
  section.training .accent-color-ornament::before {
    background-image: url(../images/ornament-l-accent.svg);
  }
  section.training .accent-color-ornament::after {
    background-image: url(../images/ornament-r-accent.svg);
  }
}
section.training .section__h2 {
  margin-top: 20px;
  font-size: 20px;
}
section.training .section__h2 .under-line {
  padding-inline: 10px 5px;
}
@media screen and (min-width: 769px) {
  section.training .section__h2 {
    font-size: 45px;
  }
  section.training .section__h2 .under-line {
    background: linear-gradient(0deg, rgba(28, 149, 176, 0.5) 0%, rgba(28, 149, 176, 0.5) 50%, rgba(0, 66, 252, 0) 50%, rgba(0, 66, 252, 0) 100%);
    padding-inline: 30px 20px;
  }
}
section.training .titled-box {
  background-color: #fff;
  border: none;
  color: var(--font-color);
  margin-top: 120px;
  padding: 160px 20px 100px;
}
@media screen and (max-width: 768px) {
  section.training .titled-box {
    margin-top: 70px;
    padding: 90px 20px 66px;
  }
}
section.training .titled-box__title {
  background-color: var(--main-color);
  color: #fff;
  font-size: 16px;
  border-radius: 10px;
  padding: 8px 10px 10px;
  width: 130px;
}
@media screen and (min-width: 769px) {
  section.training .titled-box__title {
    border: 5px solid #fff;
    font-size: 28px;
    padding: 15px 10px 10px;
    width: 360px;
  }
}
@media screen and (max-width: 768px) {
  section.training .titled-box__title {
    top: -30px;
  }
}
section.training .titled-box__title span {
  font-size: 11px;
  color: var(--accent-color);
  display: block;
}
section.training .titled-box__title::after {
  content: "";
  background-image: url(../images/tab-delta.svg);
  width: 22px;
  height: 20px;
  bottom: -11px;
  background-size: contain;
  background-repeat: no-repeat;
  position: absolute;
  top: auto;
  left: 50%;
  transform: translateX(-50%);
}
@media screen and (min-width: 769px) {
  section.training .titled-box__title::after {
    width: 33px;
    height: 30px;
    bottom: -20px;
  }
}
@media screen and (max-width: 768px) {
  section.training .internship .titled-box__title {
    width: 180px;
  }
}
section.training .training-list {
  counter-set: training;
  max-width: 750px;
  margin-inline: auto;
}
section.training .training-list li {
  display: flex;
  counter-increment: training;
}
section.training .training-list li::before {
  content: counter(training, decimal-leading-zero);
  color: var(--sub-color);
  order: 1;
  margin-right: 55px;
  margin-top: -20px;
  font-size: 50px;
}
@media screen and (max-width: 768px) {
  section.training .training-list li::before {
    font-size: 20px;
    margin-right: 20px;
  }
}
section.training .training-list li > div {
  position: relative;
  padding-bottom: 60px;
  order: 3;
  padding-left: 55px;
  border-left: 1px solid var(--main-color);
}
section.training .training-list li > div::before {
  content: "";
  border: 3px solid var(--main-color);
  width: 18px;
  height: 18px;
  display: block;
  border-radius: 100%;
  order: 2;
  position: absolute;
  top: -9px;
  left: -9px;
  background-color: #fff;
}
@media screen and (max-width: 768px) {
  section.training .training-list li > div {
    padding-left: 28px;
    padding-bottom: 35px;
  }
}
section.training .training-list li h4 {
  color: var(--main-color);
  font-size: 24px;
  display: flex;
  align-items: center;
  margin-top: -20px;
}
section.training .training-list li h4 span {
  margin-left: 20px;
  font-size: 15px;
}
@media screen and (max-width: 768px) {
  section.training .training-list li h4 {
    font-size: 16px;
  }
  section.training .training-list li h4 span {
    font-size: 10px;
    margin-left: 12px;
  }
}
section.training .training-list li p {
  margin-top: 20px;
  font-size: 15px;
  line-height: 1.75;
}
@media screen and (max-width: 768px) {
  section.training .training-list li p {
    font-size: 14px;
    line-height: 1.71;
    margin-top: 5px;
  }
}
section.training .training-list li:last-child div {
  border-left: none;
  padding-bottom: 0;
}
section.training .internship {
  text-align: center;
  padding-top: 90px;
  padding-bottom: 60px;
}
@media screen and (max-width: 768px) {
  section.training .internship {
    padding: 75px 12px 45px;
  }
}
section.training .internship .is-style-ornament {
  font-size: 24px;
  letter-spacing: 0.35em;
}
@media screen and (max-width: 768px) {
  section.training .internship .is-style-ornament {
    font-size: 14px;
    letter-spacing: 0.15em;
    justify-content: center;
  }
  section.training .internship .is-style-ornament::after, section.training .internship .is-style-ornament::before {
    width: 18px;
    height: 20px;
    margin-bottom: 0;
  }
}
section.training .internship .is-style-ornament::after {
  margin-left: 10px;
}
section.training .internship p {
  font-size: 15px;
  margin-top: 35px;
  line-height: 1.75;
}
section.training .internship p.internship-note {
  font-size: 13px;
  font-weight: 400;
  margin-top: 15px;
}
section.training .internship .ext-link {
  font-size: 16px;
  margin-top: 35px;
  display: block;
}
section.training .internship .ext-link::after {
  margin-left: 15px;
}
@media screen and (max-width: 768px) {
  section.training .internship .ext-link {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    line-height: 1.75;
    margin-top: 30px;
  }
  section.training .internship .ext-link:after {
    margin-left: 25px;
    margin-right: -25px;
  }
}

section.requirements {
  padding-top: 100px;
  padding-bottom: 100px;
}
@media screen and (max-width: 768px) {
  section.requirements {
    padding-top: 50px;
  }
}
section.requirements .section__bg-text {
  color: var(--base-color);
}
@media screen and (max-width: 768px) {
  section.requirements .section__bg-text {
    font-size: 40px;
  }
}
section.requirements .section__h2 {
  margin-top: 45px;
}
@media screen and (max-width: 768px) {
  section.requirements .section__h2 {
    margin-top: 20px;
  }
}
section.requirements .border-box {
  margin-top: 70px;
  border: 2px solid var(--main-color);
  padding-top: 55px;
  padding-bottom: 55px;
}
@media screen and (max-width: 768px) {
  section.requirements .border-box {
    margin-top: 35px;
    padding: 0 15px 45px;
  }
}
section.requirements .table-dot tr:last-child {
  background-image: none;
}
section.requirements .table-dot tr:last-child th {
  vertical-align~: baseline;
}
section.requirements .table-dot img {
  margin-top: 20px;
}
section.requirements .titled-box {
  border: 2px solid var(--main-color);
  margin-top: 90px;
  padding-top: 115px;
  padding-bottom: 110px;
  padding-inline: 20px;
}
@media screen and (max-width: 768px) {
  section.requirements .titled-box {
    padding-top: 50px;
    padding-bottom: 40px;
  }
}
section.requirements .titled-box__title {
  background-color: var(--main-color);
  color: #fff;
  font-size: 28px;
  border-radius: 10px;
  padding: 15px 10px 10px;
  width: 290px;
}
@media screen and (max-width: 768px) {
  section.requirements .titled-box__title {
    font-size: 15px;
    width: 130px;
    padding: 10px;
  }
}
section.requirements .titled-box__title span {
  font-size: 11px;
  color: var(--accent-color);
  display: block;
}
section.requirements .titled-box__title::after {
  content: "";
  background-image: url(../images/tab-delta.svg);
  width: 33px;
  height: 30px;
  background-size: contain;
  background-repeat: no-repeat;
  position: absolute;
  top: auto;
  bottom: -20px;
  left: 50%;
  transform: translateX(-50%);
}
@media screen and (max-width: 768px) {
  section.requirements .titled-box__title::after {
    width: 22px;
    height: 20px;
    bottom: -11px;
  }
}
section.requirements .entry-step {
  display: grid;
  counter-set: flow;
  margin-inline: auto;
  width: 100%;
  grid-template-columns: 1fr;
  grid-row-gap: 50px;
  row-gap: 50px;
}
@media screen and (min-width: 769px) {
  section.requirements .entry-step {
    grid-template-columns: 1fr 1fr 1fr 1fr;
    max-width: 865px;
    row-gap: 40px;
  }
}
section.requirements .entry-step li {
  background-color: var(--base-color);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  line-height: 1.75;
  position: relative;
}
@media screen and (max-width: 768px) {
  section.requirements .entry-step li {
    min-height: 40px;
    border-radius: 100px;
  }
  section.requirements .entry-step li:nth-child(2) {
    min-height: 80px;
    line-height: 1.4;
  }
  section.requirements .entry-step li:nth-child(6), section.requirements .entry-step li:nth-child(3) {
    margin-bottom: 60px;
  }
  section.requirements .entry-step li:nth-child(6)::after, section.requirements .entry-step li:nth-child(3)::after {
    bottom: -90px;
  }
  section.requirements .entry-step li::after {
    content: "";
    border-style: solid;
    border-width: 10px 7px 0 7px;
    border-color: var(--main-color) transparent transparent transparent;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: -30px;
  }
  section.requirements .entry-step li:last-child {
    background-color: var(--main-color);
    color: #fff;
  }
  section.requirements .entry-step li:last-child .step-title::before {
    color: var(--accent-color);
  }
  section.requirements .entry-step li:last-child::after {
    content: none;
  }
}
@media screen and (min-width: 769px) {
  section.requirements .entry-step li {
    height: 130px;
    padding-right: 15px;
  }
  section.requirements .entry-step li::after {
    position: absolute;
    content: "";
    background-image: url(../images/sep-flow.svg);
    width: 30px;
    height: 100%;
    background-repeat: no-repeat;
    background-size: contain;
    right: 0;
    display: block;
  }
  section.requirements .entry-step li:nth-child(4)::after {
    content: "";
    background-image: none;
    border-style: solid;
    border-width: 65px 0 65px 30px;
    border-color: #fff transparent #fff var(--base-color);
  }
  section.requirements .entry-step li:nth-child(5)::before {
    content: "";
    background-image: none;
    border-style: solid;
    border-width: 65px 0 65px 30px;
    border-color: transparent transparent transparent #fff;
    position: absolute;
    left: 0;
  }
  section.requirements .entry-step li:nth-child(6) {
    grid-column: 2/4;
  }
  section.requirements .entry-step li:last-child::after {
    background-image: none;
    background-color: var(--main-color);
    width: 15px;
  }
}
section.requirements .entry-step li .step-title {
  counter-increment: flow;
}
section.requirements .entry-step li .step-title::before {
  font-family: "Microsoft YaHei", sans-serif;
  content: counter(flow, decimal-leading-zero);
  margin-right: 5px;
}
@media screen and (min-width: 769px) {
  section.requirements .entry-step li .step-title::before {
    display: block;
  }
}
section.requirements .entry-step li .step-content-3 {
  position: absolute;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 5;
}
@media screen and (max-width: 768px) {
  section.requirements .entry-step li .step-content-3 {
    bottom: -65px;
  }
  section.requirements .entry-step li .step-content-3::before {
    content: "";
    background-image: url(../images/box-logo.svg);
    background-repeat: no-repeat;
    width: 40px;
    height: 43px;
    display: block;
    margin-right: 8x;
  }
}
@media screen and (min-width: 769px) {
  section.requirements .entry-step li .step-content-3 {
    background-image: url(../images/box-logo.svg);
    background-repeat: no-repeat;
    color: #fff;
    width: 190px;
    height: 205px;
    top: -190px;
    right: -110%;
    padding-bottom: 20px;
    padding-left: 10px;
  }
}
@media screen and (min-width: 1200px) {
  section.requirements .entry-step li .step-content-3 {
    right: -150%;
  }
}
section.requirements .entry-step .step-content-7 {
  font-size: 14px;
  line-height: 1.5;
}
@media screen and (max-width: 768px) {
  section.requirements .entry-step .step-content-7 {
    position: absolute;
    bottom: -65px;
  }
}
@media screen and (min-width: 769px) {
  section.requirements .entry-step .step-content-7 {
    background-color: var(--main-color);
    color: #fff;
    width: 190px;
    height: 74px;
    border-radius: 6px;
    margin-left: 40px;
    padding: 5px;
    display: flex;
    align-items: center;
    position: relative;
  }
  section.requirements .entry-step .step-content-7::before {
    content: "";
    background-image: url(../images/tab-delta.svg);
    width: 33px;
    height: 30px;
    background-size: contain;
    background-repeat: no-repeat;
    position: absolute;
    top: 50%;
    left: -15px;
    transform: translateY(-50%) rotate(90deg);
    z-index: 1;
  }
  section.requirements .entry-step .step-content-7 p {
    position: relative;
    z-index: 2;
  }
}

.entry {
  background-color: var(--accent-color);
  color: #fff;
}
.entry .inner-content {
  position: relative;
}
@media screen and (min-width: 769px) {
  .entry .inner-content {
    padding-top: 75px;
    padding-bottom: 65px;
    background-image: url(../images/footer-bg-l.svg), url(../images/footer-bg-r.svg);
    background-repeat: no-repeat, no-repeat;
    background-size: 215px, 400px;
    background-position: left 0, right 40px;
  }
}
@media screen and (max-width: 768px) {
  .entry .inner-content {
    background-image: url(../images/footer-bg-sp.svg);
    background-repeat: no-repeat;
    background-size: 380px;
    background-position: center;
    padding-top: 90px;
    padding-bottom: 130px;
  }
}
.entry .entry-image {
  position: absolute;
  top: 20px;
  right: 60px;
}
@media screen and (max-width: 768px) {
  .entry .entry-image {
    right: 15px;
    width: 300px;
  }
}
.entry .entry-copy {
  font-size: 35px;
  line-height: 1.75;
  text-align: center;
}
@media screen and (max-width: 768px) {
  .entry .entry-copy {
    font-size: 24px;
  }
}
.entry .entry-note {
  text-align: center;
  margin-top: 15px;
}
@media screen and (max-width: 768px) {
  .entry .entry-note {
    margin-top: 10px;
  }
}
@media screen and (max-width: 768px) {
  .entry .box-button .button-icon-arrow {
    display: none;
  }
}

.box-button {
  margin-top: 35px;
  max-width: 800px;
  height: 120px;
  background-color: #fff;
  color: var(--main-color);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 34px;
  margin-inline: auto;
  width: 100%;
  box-shadow: 5px 5px 0 var(--main-color);
  position: relative;
}
@media screen and (max-width: 768px) {
  .box-button {
    box-shadow: 3px 3px 0 var(--main-color);
    font-size: 25px;
    height: 100px;
    max-width: 300px;
  }
}
.box-button .sub-color {
  font-size: 15px;
  display: block;
}
@media screen and (max-width: 768px) {
  .box-button .sub-color {
    font-size: 10px;
    line-height: 1.2;
  }
}
.box-button .button-icon-arrow {
  position: absolute;
  right: 10%;
}

.modal-aichi {
  display: none;
}

.modal-aichi__content {
  background-color: #fff;
  border-radius: 20px;
  max-width: var(--content-innner-width);
  width: 100%;
  min-height: 340px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  padding: 40px 20px;
}
.modal-aichi__content h2 {
  font-size: 28px;
  text-align: center;
}
.modal-aichi__content h2 span {
  display: block;
  font-family: "Roboto", "Microsoft YaHei", sans-serif;
  font-size: 14px;
}
.modal-aichi__content p {
  color: var(--font-color);
  font-size: 14px;
  line-height: 2.29;
  margin-top: 25px;
}
@media screen and (min-width: 769px) {
  .modal-aichi__content p {
    text-align: center;
  }
}
.modal-aichi__content::after {
  content: url(../images/modal-balloon-delata.svg);
  width: 156px;
  height: 150px;
  position: absolute;
  right: 64px;
  bottom: -100px;
}

.page-recruit .modaal-container {
  background-color: transparent;
}
.page-recruit .modaal-content-container {
  padding: 0;
}
.page-recruit .modaal-close {
  position: absolute;
  right: -15px;
  top: -50px;
  width: 45px;
  height: 45px;
}
.page-recruit .modaal-close:after, .page-recruit .modaal-close:before {
  top: 11px;
  left: 21px;
  width: 2px;
  height: 22px;
  border-radius: 0;
}
.page-recruit .modaal-close:hover, .page-recruit .modaal-close:focus {
  opacity: 0.7;
}
.page-recruit .modaal-close:hover::after, .page-recruit .modaal-close:hover::before, .page-recruit .modaal-close:focus::after, .page-recruit .modaal-close:focus::before {
  background-color: #fff;
}
.page-recruit .modaal-wrapper .modaal-close {
  border: 1px solid #fff;
  background-color: var(--main-color);
  border-radius: 100%;
}

.modal-person__content {
  background-color: #fff;
  color: var(--font-color);
  border-radius: 20px;
  max-width: var(--content-innner-width);
  width: 100%;
  min-height: 340px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  padding: 40px 20px;
}
.modal-person__content::after {
  content: url(../images/modal-balloon-delata.svg);
  width: 156px;
  height: 150px;
  position: absolute;
  right: 64px;
  bottom: -100px;
}
.modal-person__content .person__header {
  background-image: url(../images/header-bg.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  max-width: 910px;
  width: 100%;
  min-height: 300px;
  padding-block: 45px 35px;
  padding-inline: 90px;
  position: relative;
  color: #fff;
}
@media screen and (max-width: 480px) {
  .modal-person__content .person__header {
    padding: 15px 15px 30px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
}
.modal-person__content .person-header__main-copy {
  font-size: 34px;
  line-height: 1.59;
}
@media screen and (max-width: 480px) {
  .modal-person__content .person-header__main-copy {
    font-size: 20px;
    line-height: 1.75;
  }
}
.modal-person__content .person-header__sub-copy {
  font-size: 16px;
  line-height: 1.625;
}
@media screen and (max-width: 480px) {
  .modal-person__content .person-header__sub-copy {
    font-size: 14px;
    line-height: 1.75;
  }
}
.modal-person__content .person-header__image {
  position: absolute;
  right: 80px;
  bottom: 0;
}
@media screen and (max-width: 480px) {
  .modal-person__content .person-header__image {
    width: 137px;
    height: 150px;
    right: 5px;
  }
}
.modal-person__content .media-text__figure {
  flex-shrink: 0;
}
.modal-person__content .career-path-pc,
.modal-person__content .career-path-sp {
  margin-inline: auto;
}
@media screen and (max-width: 480px) {
  .modal-person__content .career-path-pc {
    display: none;
  }
}
.modal-person__content .career-path-sp {
  margin-top: 40px;
}
@media screen and (min-width: 481px) {
  .modal-person__content .career-path-sp {
    display: none;
  }
}
.modal-person__content .titled-box {
  border-width: 3px;
  padding: 15px;
  margin-top: 40px;
  margin-bottom: 20px;
  background-color: #fff;
}
@media screen and (max-width: 480px) {
  .modal-person__content .titled-box {
    padding: 40px 15px 20px;
    margin-top: -20px;
    margin-bottom: 0;
  }
}
.modal-person__content .titled-box::before {
  content: "";
  border-style: solid;
  border-width: 16px 9px 0 9px;
  border-color: var(--main-color) transparent transparent transparent;
  position: absolute;
  bottom: -18px;
  right: 17%;
}
@media screen and (max-width: 480px) {
  .modal-person__content .titled-box::before {
    transform: rotate(180deg);
    top: -18px;
    bottom: auto;
    right: 30%;
  }
}
.modal-person__content .titled-box::after {
  content: "";
  border-style: solid;
  border-width: 16px 9px 0 9px;
  border-color: #fff transparent transparent transparent;
  position: absolute;
  bottom: -12px;
  right: 17%;
}
@media screen and (max-width: 480px) {
  .modal-person__content .titled-box::after {
    width: auto;
    height: auto;
    transform: translateY(0) rotate(180deg);
    top: -12px;
    bottom: auto;
    right: 30%;
  }
}
.modal-person__content .titled-box .media-text-grid h4 {
  font-size: 18px;
  margin-top: 20px;
  justify-self: center;
}
@media screen and (max-width: 480px) {
  .modal-person__content .titled-box .media-text-grid h4 {
    font-size: 16px;
    line-height: 1.75;
    margin-top: 0;
    text-align: center;
  }
}
.modal-person__content .titled-box .media-text-grid p {
  font-size: 14px;
  line-height: 1.75;
  margin-top: 10px;
}
.modal-person__content .titled-box .media-text-grid__media {
  text-align: center;
}
@media screen and (min-width: 481px) {
  .modal-person__content .titled-box .media-text-grid__media {
    margin-right: 40px;
  }
}
.modal-person__content .titled-box__title {
  background-color: var(--main-color);
  color: #fff;
  font-size: 13px;
  padding-inline: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  top: -17px;
}
@media screen and (max-width: 480px) {
  .modal-person__content .titled-box__title {
    position: relative;
    padding-inline: 10px;
    width: -moz-fit-content;
    width: fit-content;
    margin-inline: auto;
    transform: translateX(0);
    left: 0;
  }
}
.modal-person__content .media-text-grid.modal-person {
  margin-top: 30px;
}
@media screen and (min-width: 769px) {
  .modal-person__content .media-text-grid.modal-person {
    grid-template-areas: "title media" "content media";
  }
  .modal-person__content .media-text-grid.modal-person > .media-text-grid__title {
    -ms-grid-row: 1;
    -ms-grid-column: 1;
  }
  .modal-person__content .media-text-grid.modal-person > .media-text-grid__media {
    -ms-grid-row: 1;
    -ms-grid-row-span: 2;
    -ms-grid-column: 2;
  }
  .modal-person__content .media-text-grid.modal-person > .media-text-grid__content {
    -ms-grid-row: 2;
    -ms-grid-column: 1;
  }
}
.modal-person__content .media-text-grid.modal-person .media-text-grid__title {
  text-align: center;
}
.modal-person__content .media-text-grid.modal-person .media-text-grid__media {
  align-self: center;
  text-align: center;
}
@media screen and (min-width: 769px) {
  .modal-person__content .media-text-grid.modal-person .media-text-grid__media {
    margin-left: 30px;
  }
}
.modal-person__content .media-text-grid.modal-person .media-text-grid__content {
  margin-top: 20px;
}
.modal-person__content .media-text-grid.modal-person .media-text-grid__content ul li {
  display: flex;
}
@media screen and (max-width: 768px) {
  .modal-person__content .media-text-grid.modal-person .media-text-grid__content ul li {
    flex-direction: column;
  }
}
.modal-person__content .media-text-grid.modal-person .media-text-grid__content ul li > h5 {
  width: 160px;
  background-color: var(--main-color);
  color: #fff;
  flex-shrink: 0;
  align-self: flex-start;
  text-align: center;
}
@media screen and (max-width: 768px) {
  .modal-person__content .media-text-grid.modal-person .media-text-grid__content ul li > h5 {
    align-self: center;
  }
}
.modal-person__content .media-text-grid.modal-person .media-text-grid__content ul li > div {
  font-size: 14px;
  line-height: 1.75;
}
@media screen and (max-width: 768px) {
  .modal-person__content .media-text-grid.modal-person .media-text-grid__content ul li > div {
    margin-top: 15px;
  }
}
@media screen and (min-width: 769px) {
  .modal-person__content .media-text-grid.modal-person .media-text-grid__content ul li > div {
    margin-left: 20px;
  }
}
.modal-person__content .media-text-grid.modal-person .media-text-grid__content ul li + li {
  margin-top: 20px;
}

.is-single .entry-content > * + * {
  margin-top: 60px;
}
@media screen and (max-width: 768px) {
  .is-single .entry-content > * + * {
    margin-top: 40px;
  }
}
.is-single .entry-content a {
  color: var(--main-color);
  text-decoration: underline;
  transition: 0.2s opacity;
  font-weight: 700;
}
.is-single .entry-content a:hover {
  opacity: 0.6;
}
.is-single .entry-content a[target=_blank]::after {
  content: "";
  background-image: url(../images/icon-ext-link.svg);
  width: 19px;
  height: 19px;
  background-repeat: no-repeat;
  display: inline-block;
  vertical-align: -4px;
  margin-inline: 8px;
}
.is-single .entry-content h2 {
  padding: 10px 15px;
  margin: 50px 0 30px;
  font-weight: 700;
  font-size: 25px;
  letter-spacing: 0.1em;
  line-height: 1.5;
  background: var(--main-color);
  color: #fff;
  text-align: center;
}
@media screen and (max-width: 768px) {
  .is-single .entry-content h2 {
    font-size: 20px;
  }
}
.is-single .entry-content h2.is-style-orange-heading {
  background-color: var(--accent-color);
}
.is-single .entry-content h3,
.is-single .entry-content h3.is-style-ud-border {
  position: relative;
  color: var(--accent-color);
  background-color: transparent;
  border-width: 2px;
  border-style: solid none;
  padding-block: 14px;
  padding-inline: 10px;
  margin: 50px auto 30px;
  font-weight: 700;
  font-size: 25px;
  letter-spacing: 0.1em;
  line-height: 1.5;
  text-align: center;
}
.is-single .entry-content h3::before,
.is-single .entry-content h3.is-style-ud-border::before {
  content: "";
  border-style: solid;
  border-width: 10px 10px 0 10px;
  border-color: var(--accent-color) transparent transparent transparent;
  position: absolute;
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%);
}
.is-single .entry-content h3::after,
.is-single .entry-content h3.is-style-ud-border::after {
  content: "";
  background-image: none;
  border-style: solid;
  border-width: 10px 10px 0 10px;
  border-color: #fff transparent transparent transparent;
  position: absolute;
  bottom: -7px;
  left: 50%;
  transform: translateX(-50%);
  width: auto;
  height: auto;
  right: auto;
}
@media screen and (max-width: 768px) {
  .is-single .entry-content h3,
  .is-single .entry-content h3.is-style-ud-border {
    font-size: 18px;
  }
}
.is-single .entry-content .is-style-speech-bubble {
  position: relative;
  padding: 15px 0;
  font-weight: 700;
  font-size: 25px !important;
  letter-spacing: 0.1em;
  line-height: 1.6 !important;
}
@media screen and (max-width: 768px) {
  .is-single .entry-content .is-style-speech-bubble {
    font-size: 18px !important;
  }
}
.is-single .entry-content .is-style-speech-bubble::before, .is-single .entry-content .is-style-speech-bubble::after {
  content: "";
  background: var(--accent-color);
  width: 40px;
  height: 2px;
  position: absolute;
  left: 0;
}
.is-single .entry-content .is-style-speech-bubble::before {
  top: 0;
  transform: rotate(-20deg);
}
.is-single .entry-content .is-style-speech-bubble::after {
  bottom: 0;
  transform: rotate(20deg);
}
.is-single .entry-content ul {
  padding: 0;
}
.is-single .entry-content ul li {
  position: relative;
  list-style: none;
  line-height: 1.8;
  padding-left: 25px;
  color: var(--main-color);
}
.is-single .entry-content ul li::before {
  content: "";
  background: var(--main-color);
  border-radius: 50%;
  width: 15px;
  height: 15px;
  position: absolute;
  top: 5px;
  left: 0;
}
.is-single .entry-content ol {
  counter-reset: post_ol 0;
  padding: 0;
}
.is-single .entry-content ol li {
  position: relative;
  list-style: none;
  line-height: 1.8;
  padding-left: 25px;
  color: var(--main-color);
}
.is-single .entry-content ol li::before {
  content: counter(post_ol) ".";
  counter-increment: post_ol 1;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1;
  color: var(--main-color);
  position: absolute;
  top: 0.4rem;
  left: 0;
}
.is-single .entry-content ul li + li,
.is-single .entry-content ol li + li {
  margin-top: 15px;
}
.is-single .entry-content span.blue-text {
  color: var(--main-color);
  font-weight: 700;
}
.is-single .entry-content span.orange-text {
  color: var(--accent-color);
  font-weight: 700;
}
.is-single .entry-content span.orange-marker {
  background: linear-gradient(0deg, rgba(245, 165, 0, 0.5) 0%, rgba(245, 165, 0, 0.5) 50%, rgba(0, 66, 252, 0) 50%, rgba(0, 66, 252, 0) 100%);
}

.home .hero-header__sub-copy {
  text-shadow: 0 0 5px rgba(255, 255, 255, 0.7);
}

@media screen and (min-width: 960px) {
  .menu-prodcut .child > li:nth-child(2) {
    width: 170px;
  }
}
@media screen and (max-width: 480px) {
  .safty__conten-man {
    width: 126px;
  }
}
@media screen and (max-width: 769px) {
  .recruit-contents__text p {
    text-align: justify;
  }
}
@media screen and (max-width: 768px) {
  .recruit .l-3 {
    left: 10px;
  }
}
@media screen and (min-width: 1090px) {
  .mecha-os__content .mecha-os__bg-text {
    text-align: center;
  }
  .mecha-os__mecha .mecha-os__bg-text {
    margin-top: 25px;
  }
  .mecha-os__mecha ul {
    margin-top: 95px;
  }
}
section.safty-solutions .safty-solutions__subcopy p {
  text-align: center;
}

section.os .os-solution__item h3 span {
  font-size: 16px;
}

@media screen and (max-width: 769px) {
  section.os .os-solution__item h3 span {
    font-size: 13px;
  }
}
@media screen and (max-width: 769px) {
  .mechatronics__header .mechatronics__header-h3 {
    margin-top: 30px;
  }
}
@media screen and (max-width: 769px) {
  section.mechatronics .media-text {
    margin-top: 40px;
  }
}
@media screen and (max-width: 769px) {
  section.mechatronics .titled-box__title {
    top: inherit;
    position: inherit;
    left: inherit;
    transform: inherit;
    padding-inline: 0px;
    margin-bottom: 20px;
  }
}
@media screen and (max-width: 769px) {
  section.download .titled-box tr:last-child ul {
    -moz-column-count: 1;
    column-count: 1;
  }
}
@media screen and (max-width: 769px) {
  section.flow .flow__balloon-problem h3 {
    font-size: 22px;
  }
}
@media screen and (max-width: 769px) {
  section.download .titled-box th {
    width: 100px;
  }
}
@media screen and (min-width: 1200px) {
  .mission__content {
    grid-template-columns: 50% 410px;
    gap: 70px;
  }
}
.vision p {
  text-align: center;
}

.vision {
  background-size: 100% auto;
}

section.overview .history .table-dot th span {
  font-size: 13px;
  margin-left: 10px;
}

@media screen and (min-width: 769px) {
  section.safty-solutions .safty-solutions__list p {
    font-size: 14px;
  }
}
section.safty-solutions .safty-box {
  padding: 30px 15px 20px;
}

@media screen and (min-width: 769px) {
  section.what .tab-contents .media-text .media-text__content {
    font-size: 16px;
  }
}
@media screen and (min-width: 769px) {
  section.what .tab-contents .media-text .is-style-ornament-w::before {
    margin-right: 30px;
  }
  .is-style-ornament-w::after {
    margin-left: 30px;
  }
}
.is-style-ornament-w::before {
  margin-right: 20px;
}

.is-style-ornament-w::after {
  margin-left: 20px;
}

section.credit .credit__logo p {
  max-width: 380px;
  width: 100%;
  padding: 0 20px;
}

@media screen and (min-width: 769px) {
  section.credit .credit__logo p {
    max-width: 500px;
  }
}
section.service .titled-box ul li p {
  border-radius: 20px;
  padding: 40px 20px 65px;
}

@media screen and (min-width: 769px) {
  section.service .titled-box ul li p {
    border-radius: 100%;
    padding: 40px;
  }
}
section.value .spirit-slider .swiper-slide .swiper-slide__content.num01::after {
  background-image: url(../images/split-icon-1.png);
}

section.value .spirit-slider .swiper-slide .swiper-slide__content.num02::after {
  background-image: url(../images/split-icon-2.png);
}

section.value .spirit-slider .swiper-slide .swiper-slide__content.num03::after {
  background-image: url(../images/split-icon-3.png);
}

section.value .spirit-slider .swiper-slide .swiper-slide__content.num04::after {
  background-image: url(../images/split-icon-4.png);
}

section.value .spirit-slider .swiper-slide .swiper-slide__content.num05::after {
  background-image: url(../images/split-icon-5.png);
}

section.value .spirit-slider .swiper-slide .swiper-slide__content.num06::after {
  background-image: url(../images/split-icon-6.png);
}

section.value .spirit-slider .swiper-slide .swiper-slide__content.num07::after {
  background-image: url(../images/split-icon-7.png);
}

section.value .spirit-slider .swiper-slide .swiper-slide__content.num08::after {
  background-image: url(../images/split-icon-8.png);
}

section.value .spirit-slider .swiper-slide .swiper-slide__content.num09::after {
  background-image: url(../images/split-icon-9.png);
}

section.intro .inner-content {
  background-position: bottom left 80px, bottom right 55px;
}

@media screen and (max-width: 768px) {
  section.problems .anzen-problem {
    width: 180px;
  }
}
.page-recruit .hero-header {
  background-image: url(../images/header-recruit_sp.jpg);
}

@media screen and (min-width: 769px) {
  .page-recruit .hero-header {
    background-image: url(../images/header-recruit.jpg);
  }
}
@media screen and (max-width: 768px) {
  .page-recruit .hero-header {
    height: 70vh;
  }
}
@media screen and (min-width: 1200px) {
  .recruit__contents > div {
    max-width: 535px;
  }
}
.recruit-contents__text p {
  margin-top: 15px;
}

.modal-person__content .person__header {
  padding-inline: 20px;
}

@media screen and (min-width: 1200px) {
  .modal-person__content .person__header {
    padding-inline: 70px;
  }
}
@media screen and (max-width: 480px) {
  .modal-person__content .person__header {
    padding: 30px 20px 30px;
  }
}
.modal-person__content::after {
  bottom: -110px;
}

.mechatronics__header .header__counter {
  margin-inline: inherit;
}

@media screen and (min-width: 769px) {
  .titled-box__title {
    min-width: 480px;
  }
}
section.message .messate__content p {
  margin-top: 15px;
}

section.message .messate__content-2 {
  margin-top: 50px;
}

section.service .titled-box ul li h4 span {
  font-size: 15px;
}

section.service .titled-box ul li p {
  font-size: 14px;
}

section.service .titled-box ul li:nth-child(2) p::after {
  bottom: -55px;
}

section.recruit-project .project-slider .swiper-slide-content p {
  text-align: left;
}

section.recruit-project .project-slider .swiper-slide-content .project-slider__title {
  flex-direction: column;
}

section.recruit-project .project-slider .swiper-slide-content .project-slider__title span {
  display: inline-block;
  font-size: 10px;
}

.category-buttons {
  max-width: 980px;
}

@media screen and (min-width: 769px) {
  section.requirements .entry-step .step-content-7 {
    justify-content: center;
  }
  section.requirements .entry-step .step-content-7 p {
    text-align: center;
    letter-spacing: 0.1rem;
  }
  section.training .titled-box__title,
  section.requirements .titled-box__title {
    min-width: inherit;
  }
}
/*# sourceMappingURL=style.css.map */

@media screen and (max-width: 768px){
  section.infographics .ig-item__content > span{
    text-align: center;
  }
}