@charset "UTF-8";
/* CSS Document */

/************************************
front-page
************************************/

/* ---------------------------------
Hero Section
--------------------------------- */
.hero-section {
  position: relative;
  height: 100vh;
  overflow: hidden;
}

.hero-section::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.4); /* 濃さ調整 */
  z-index: 1;
}
.hero-section__bg video {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

/* scroll */
.hero-section__scroll {
  position: absolute;
  bottom: 6%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  color: #fff;
  font-size: 1.2rem;
  opacity: 0.8;
  animation: fadein 2s ease-in-out;
}

.scroll-arrow {
  width: 1px;
  height: 50px;
  background: #fff;
  margin-top: 8px;
  animation: scrollDown 3.0s infinite;
}

@keyframes scrollDown {
  0% { transform: translateY(0); opacity: 1; }
  50% { transform: translateY(10px); opacity: 0.6; }
  100% { transform: translateY(0); opacity: 1; }
}
/* /scroll */

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

/* title */
.hero-section__content {
  position: absolute;
  z-index: 2;
  color: #fff;
  padding: 5% 8%;
  bottom: 0;
  right: 0;
}

.hero-section__title {
  font-size: clamp(3rem, 6vw, 8rem);
  font-weight: 800;
  line-height: 1.1;
}

.hero-section__sub {
  font-size: 1.4rem;
  margin-top: 2rem;
}
/* /title */
/* ---------------------------------
/Hero Section
--------------------------------- */


/* ---------------------------------
Vision Section
--------------------------------- */
.vision-section {
  padding: 6rem 10% 4rem;
  text-align: left;
  position: relative;
}
@media (min-width: 900px){
.vision-section {
  max-width: 1600px;
  margin: 12rem auto;
}
}

.vision-section__inner {
    margin: 0 auto;
    display: flex;
    gap: 4rem;
    align-items: flex-start;
    flex-wrap: wrap;
    flex-direction: column;
}
@media (min-width: 900px){
.vision-section__inner {
  flex-direction: row;
}
}

.vision-section__title-area {
  flex: 1;
  border-left: 1px solid var(--color-main);
  padding-left: 3rem;
}
@media (min-width: 900px) {
.vision-section__title-area {
  flex: 1;
  border-left: 1px solid var(--color-main);
  padding-left: 6rem;
}
}

.vision-section__label {
  display: block;
  font-size: 1.6rem;
  margin-bottom: 1rem;
}

.vision-section__title {
  line-height: 1.4;
  margin-bottom: 1rem;
}

.vision-section__x {
  margin: 0 0.3em;
}

.vision-section__subtitle {
  font-size: 1.6rem;
  color: #444;
}

.section-description {
  margin-top: 6rem;
}

.vision-section__content {
  flex: 2;
  font-size: 1.6rem;
  line-height: 2;
}

.vision-section__content p {
  margin-bottom: 1.6rem;
}

.vision-section__button {
  margin-top: 6rem;
  text-align: right;
}
@media (min-width: 900px) {
.vision-section__button {
  margin-top: 8rem;
}
}
/* ---------------------------------
/Vision Section
--------------------------------- */


/* ---------------------------------
Service Section
--------------------------------- */
.service-section {
max-width: 1600px;
margin: 12rem auto 0;
}
.section-heading span {
  display: block;
}
@media (min-width: 900px) {
.section-heading span {
  display: inline;
}
}

.section-title {
  text-align: center;
  margin-bottom: 6rem;
  position: relative;
}

.section-label {
  font-size: 1.4rem;
  margin-bottom: 1rem;
}

.section-divider {
  display: block;
  width: 1px;
  height: 80px;
  background: var(--color-main);
  margin: 2rem auto 0;
}


@media (min-width: 900px) {
.service-item.service-item--reverse {
    display: flex;
    position: relative;
    align-items: flex-start;
    margin-bottom: 9.5rem;
    padding-bottom: 3.0rem;
    overflow: hidden;
}
.service-item.service-item--reverse2 {
    display: flex;
    flex-direction: row-reverse;
    position: relative;
    align-items: flex-start;
    margin-bottom: 9.5rem;
    padding-bottom: 3.0rem;
    overflow: hidden;
}
}

.service-item__content,
.service-item__content2 {
  position: relative;
  padding: 0 10% 8rem;
}
@media (min-width: 900px) {
.service-item__content {
  position: static;
  width: 62.8%;
  margin: 20vw 0 0 -10%;
  padding: 7.2vw 7% 10px;
  background-color: var( --color-white);
  z-index: 10;
}
.service-item__content2 {
  position: static;
  width: 62.8%;
  margin: 20vw -10% 0 0; /* ← marginの左右を反転 */
  padding: 7.2vw 7% 10px;
  background-color: var( --color-white);
  z-index: 10;
}
}

.service-item__content::before {
    content: "";
    position: absolute;
    top: -40px;
    left: 0;
    width: 84%;
    height: 42px;
    background-color: var( --color-white);
}
.service-item__content2::before
 {
    content: "";
    position: absolute;
    top: -40px;
    right: 0;
    width: 84%;
    height: 42px;
    background-color: #FFF;
 }
@media (min-width: 900px) {
.service-item__content::before,
.service-item__content2::before {
  display: none;
}
}

.service-item__number {
    font-size: 6rem;
    line-height:  6rem;
    padding-bottom: 3rem;
    color: var(--color-white);
    -webkit-text-stroke: 1px var(--color-main);
    text-stroke: 1px var(--color-main);
}

@media (min-width: 900px){
.h3-wrap {
    display: flex;
    gap: 1.2rem;
    align-items: flex-end;
}
}

.service-item__title {
  padding-bottom: 1rem;
}

.service-item__text {
    margin-bottom: 6.0rem;
}
.service-section__button {
    text-align: right;
}
/* ---------------------------------
/Service Section
--------------------------------- */


/* ---------------------------------
Works Section
--------------------------------- */
section.section.section--works {
    position: relative;
}

.works-bg {
    background: #f9f9f9;
    padding: 8rem 10%;
    position: relative;
    z-index: 2;
}
@media (min-width: 900px){
.works-bg {
    margin: 8rem 0 8rem 18%;
    padding: 8vw 6vw 30vw;
}
}
.section-description p {
    padding-left: 6rem;
}

/* ---------------------------------
/Works Section
--------------------------------- */



/* ---------------------------------
Flow Section
--------------------------------- */
section.section.section--flow {
    margin: 12rem 10%;
}

.stepbar {
    padding-top: 1rem;
}

.stepbar .stepbarwrap {
  margin: 2em 0;
  position: relative;
}

.stepbar .stepbarwrap .steptitle {
  display: inline-flex;
  align-items: center;
}

.stepbar .stepbarwrap .steptitle .stepcircle {
  display: inline-block;
  width: 3em;
  height: 3em;
  border-radius: 50%;
  background-color: var(--color-main);
  color: var(--color-white);
  text-align: center;
  line-height: 3em; 
  font-size: 0.9em;
  font-weight: bold;
}

.stepbar .stepbarwrap .steptitle .stepcircle span {
  display: inline-block;
  line-height: 1; 
  vertical-align: middle;
}

.stepbar .stepbarwrap .steptitle .title {
  margin: 0.5em;
  font-weight: bold;
  font-size: 1.5rem!important;
}
.title span {
  display: block;
}
@media (min-width: 900px) {
  .title span {
  display: block;
}
}

.stepbar .stepbarwrap .steptxt {
  padding-left: 3.5em;
}

.stepbar .stepbarwrap .steptxt .txt {
  font-size: 0.9em;
}

/* ステップ間の縦ライン */
.stepbar .stepbarwrap .stepline {
  width: 1px;
  height: calc(100% - 2em);
  background-color: #000;
  position: absolute;
  top: 3em;
  left: 1.5em;
  z-index: -1;
}

/* 最後のステップだけラインを非表示にする */
.stepbarwrap:last-child .stepline {
  display: none;
}

/* ---------------------------------
/Flow Section
--------------------------------- */

/************************************
/front-page
************************************/