@charset "UTF-8";

/* ========================================
   Yogibo BUSINESS
======================================== */

:root {

  /* --------------------
     Colors
  -------------------- */

  --ybiz-color-dark: #3E484E;
  --ybiz-color-gray: #616B71;
  --ybiz-color-blue: #58B5CA;
  --ybiz-color-orange: #FCA85A;
  --ybiz-color-border: #E5E8EA;
  --ybiz-color-light: #F5F6F6;


  /* --------------------
     Layout
  -------------------- */

  --ybiz-content-width: 1200px;

  --ybiz-gutter-pc: 40px;
  --ybiz-gutter-tab: 32px;
  --ybiz-gutter-sp: 20px;


  /* --------------------
     Spacing
  -------------------- */

  --ybiz-space-xs: 8px;
  --ybiz-space-sm: 12px;
  --ybiz-space-md: 20px;
  --ybiz-space-lg: 32px;
  --ybiz-space-xl: 48px;
  --ybiz-space-2xl: 64px;


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

  --ybiz-section-space-pc: 64px;
  --ybiz-section-space-tab: 56px;
  --ybiz-section-space-sp: 48px;


  /* --------------------
     Grid
  -------------------- */

  --ybiz-grid-gap: 20px;
  --ybiz-grid-gap-large: 32px;
}


/* ========================================
   Elementor Layout Normalization
======================================== */

/*
 * ElementorのBoxed幅を解除。
 * ページ内の横幅管理は .ybiz-container 側で行う。
 */

.ybiz-hero,
.ybiz-for-business,
.ybiz-services,
.ybiz-news,
.ybiz-about,
.ybiz-contact {
  --padding-left: 0px;
  --padding-right: 0px;

  padding-left: 0 !important;
  padding-right: 0 !important;
}


.ybiz-hero > .e-con-inner,
.ybiz-for-business > .e-con-inner,
.ybiz-services > .e-con-inner,
.ybiz-news > .e-con-inner,
.ybiz-about > .e-con-inner,
.ybiz-contact > .e-con-inner {
  width: 100% !important;
  max-width: none !important;

  --content-width: 100%;
}


/* --------------------
   Elementor内部の重複左右paddingを解除
-------------------- */

.ybiz-section-heading,

.ybiz-for-business__layout,
.ybiz-for-business__intro,
.ybiz-for-business__grid,

.ybiz-services__grid,

.ybiz-news__header,

.ybiz-about__layout,
.ybiz-about__visual,
.ybiz-about__gallery,
.ybiz-about__image,
.ybiz-about__content,
.ybiz-about__features,
.ybiz-feature-item,
.ybiz-feature-item__content,

.ybiz-contact__inner,
.ybiz-contact__benefits,
.ybiz-contact__benefit {
  --padding-left: 0px;
  --padding-right: 0px;

  padding-left: 0 !important;
  padding-right: 0 !important;
}


/* ========================================
   Common Container
======================================== */

.ybiz-container {
  width: calc(100% - 80px);
  max-width: var(--ybiz-content-width);

  margin-left: auto;
  margin-right: auto;

  --padding-left: 0px;
  --padding-right: 0px;

  padding-left: 0 !important;
  padding-right: 0 !important;
}


@media (max-width: 1024px) {

  .ybiz-container {
    width: calc(100% - 64px);
  }
}


@media (max-width: 767px) {

  .ybiz-container {
    width: calc(100% - 40px);
  }
}


/* ========================================
   Common Section Heading
======================================== */

.ybiz-section-heading {
  display: flex;
  flex-direction: column;
  gap: 20px;
}


.ybiz-section-heading__label,
.ybiz-section-heading__title,
.ybiz-section-heading__lead {
  margin: 0;
}


/* Label */

.ybiz-section-heading__label .elementor-heading-title {
  color: var(--ybiz-color-blue);

  font-size: 12px !important;
  line-height: 1.35 !important;
  font-weight: 700 !important;
  letter-spacing: 0.3em !important;
}


/* H2 */

.ybiz-section-heading__title .elementor-heading-title {
  font-size: 36px !important;
  line-height: 1.4 !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
}


/* Lead */

.ybiz-section-heading__lead {
  font-size: 16px;
  line-height: 1.7;
  font-weight: 400;
}


/* ========================================
   Common Typography - Cards
======================================== */

.ybiz-purpose-card__title .elementor-heading-title,
.ybiz-service-card__title .elementor-heading-title,
.ybiz-feature-item__title .elementor-heading-title {
  font-size: 18px !important;
  line-height: 1.5 !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
}


.ybiz-purpose-card__text,
.ybiz-service-card__text,
.ybiz-feature-item__text {
  font-size: 14px;
  line-height: 1.65;
  font-weight: 400;
}


/* ========================================
   HERO
======================================== */

.ybiz-hero {
  position: relative;
  width: 100%;
  overflow: hidden;

  --padding-top: 0px;
  --padding-right: 0px;
  --padding-bottom: 0px;
  --padding-left: 0px;

  padding: 0 !important;

  margin-top: 0 !important;
  margin-bottom: 0 !important;
}


.ybiz-hero > .e-con-inner {
  width: 100% !important;
  max-width: none !important;

  --content-width: 100%;

  padding: 0 !important;
  margin: 0 !important;
}


/* --------------------
   Slider
-------------------- */

.ybiz-hero__slider,
.ybiz-hero__track,
.ybiz-hero__slide {
  width: 100% !important;
  max-width: none !important;

  --padding-top: 0px;
  --padding-right: 0px;
  --padding-bottom: 0px;
  --padding-left: 0px;

  padding: 0 !important;
  margin: 0 !important;
}


.ybiz-hero__slider {
  position: relative;
  overflow: hidden;
}


.ybiz-hero__track {
  position: relative;
}


/* --------------------
   Slide
-------------------- */

.ybiz-hero__slide {
  position: absolute;
  inset: 0;

  height: 640px;

  opacity: 0;
  visibility: hidden;
  pointer-events: none;

  background-size: cover;
  background-position: center;

  transition:
    opacity 0.45s ease,
    visibility 0.45s ease;
}


.ybiz-hero__slide.is-active {
  position: relative;

  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}


/* Background Overlay */

.ybiz-hero__slide::before {
  content: "";

  position: absolute;
  inset: 0;
  z-index: 0;

  background:
    linear-gradient(
      to right,
      rgba(52, 65, 71, 0.74) 0%,
      rgba(52, 65, 71, 0.58) 32%,
      rgba(52, 65, 71, 0.32) 55%,
      rgba(52, 65, 71, 0.08) 78%,
      rgba(52, 65, 71, 0) 100%
    );

  pointer-events: none;
}


/* --------------------
   Inner
-------------------- */

.ybiz-hero__slide-inner {
  position: relative;
  z-index: 1;

  width: calc(100% - 80px);
  max-width: 1216px;
  height: 100%;

  margin-left: auto;
  margin-right: auto;

  --padding-left: 0px;
  --padding-right: 0px;

  padding-left: 0 !important;
  padding-right: 0 !important;

  --flex-direction: row;
  --justify-content: flex-start;
  --align-items: center;

  display: flex !important;
  flex-direction: row !important;
  justify-content: flex-start !important;
  align-items: center !important;
}


/* --------------------
   Content
-------------------- */

.ybiz-hero__content {
  width: 100%;
  max-width: 576px;

  --padding-left: 0px;
  --padding-right: 0px;

  padding-left: 0 !important;
  padding-right: 0 !important;
}


.ybiz-hero__label,
.ybiz-hero__title,
.ybiz-hero__text,
.ybiz-hero__cta {
  margin: 0;
}


.ybiz-hero__label {
  margin-bottom: 16px;

  width: fit-content !important;
  align-self: flex-start;

  --container-widget-width: auto !important;
  --container-widget-flex-grow: 0 !important;

  padding-bottom: 6px;

  border-bottom: 2px solid #7AC8D8;

  color: #7AC8D8;

  font-size: 12px;
  line-height: 1.4;
  font-weight: 700;
}


/* HERO Title */

.ybiz-hero__title {
  margin-bottom: 16px;
  color: #FFFFFF;
}


.ybiz-hero__title .elementor-heading-title {
  color: #ffffff !important;
  font-size: 52px !important;
  line-height: 1.25 !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.18);
}


/* HERO Text */

.ybiz-hero__text {
  margin-bottom: 32px;

  color: rgba(255, 255, 255, 0.82);

  font-size: 16px;
  line-height: 1.7;
  font-weight: 400;
}


/* --------------------
   CTA
-------------------- */

.ybiz-hero__cta .elementor-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;

  min-height: 52px;
  padding: 14px 28px;

  border: 0;
  border-radius: 9999px;

  background: var(--ybiz-color-orange);
  color: var(--ybiz-color-dark);

  font-size: 16px;
  line-height: 1.5;
  font-weight: 700;

  transition:
    transform 0.2s ease,
    filter 0.2s ease;
}


.ybiz-hero__cta .elementor-button:hover {
  filter: brightness(0.95);
  transform: translateY(-1px);
}


/* --------------------
   Navigation
-------------------- */

.ybiz-hero__prev,
.ybiz-hero__next {
  position: absolute;
  top: 50%;
  z-index: 5;

  width: 40px;
  height: 40px;

  transform: translateY(-50%);

  cursor: pointer;
}


.ybiz-hero__prev {
  left: 16px;
}


.ybiz-hero__next {
  right: 16px;
}


.ybiz-hero__prev .elementor-icon,
.ybiz-hero__next .elementor-icon {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 40px;
  height: 40px;
  padding: 0;

  border: 0;
  border-radius: 50%;

  background: rgba(255, 255, 255, 0.20);
  color: #FFFFFF;

  font-size: 22px;
  line-height: 1;
}


.ybiz-hero__prev .elementor-icon svg,
.ybiz-hero__next .elementor-icon svg {
  width: 20px;
  height: 20px;

  fill: currentColor;
}


/* --------------------
   Pagination
-------------------- */

.ybiz-hero__pagination {
  --flex-direction: row;

  position: absolute;
  left: 50%;
  bottom: 24px;
  z-index: 5;

  display: flex;
  flex-direction: row !important;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  gap: 8px;

  width: auto;

  transform: translateX(-50%);
}


.ybiz-hero__dot {
  width: 8px;
  height: 8px;

  padding: 0;
  border: 0;
  border-radius: 50%;

  background: rgba(255, 255, 255, 0.50);

  cursor: pointer;

  transition:
    transform 0.25s ease,
    background-color 0.25s ease;
}


.ybiz-hero__dot.is-active {
  background: var(--ybiz-color-orange);
  transform: scale(1.3);
}


/* ========================================
   FOR BUSINESS
======================================== */

.ybiz-for-business {
  margin-top: 0 !important;

  padding-top: var(--ybiz-section-space-pc);
  padding-bottom: var(--ybiz-section-space-pc);

  background: var(--ybiz-color-dark);
  color: #FFFFFF;
}


/* --------------------
   Layout
-------------------- */

.ybiz-for-business__layout {
  display: grid;
  grid-template-columns:
    minmax(0, 1fr)
    minmax(0, 1fr);

  gap: 64px;
  align-items: start;
}


.ybiz-for-business__intro {
  min-width: 0;
}


/* Section Heading */

.ybiz-for-business
.ybiz-section-heading__title
.elementor-heading-title {
  color: #FFFFFF;
}


.ybiz-for-business .ybiz-section-heading__lead {
  color: rgba(255, 255, 255, 0.82);
}


/* --------------------
   Check List
-------------------- */

.ybiz-for-business .ybiz-check-list {
  margin-top: 32px;
}


.ybiz-for-business
.ybiz-check-list
.elementor-icon-list-items {
  display: flex;
  flex-direction: column;
  gap: 16px;
}


.ybiz-for-business
.ybiz-check-list
.elementor-icon-list-item {
  margin: 0;
}


.ybiz-for-business
.ybiz-check-list
.elementor-icon-list-text {
  color: #FFFFFF;
}


/* --------------------
   Purpose Grid
-------------------- */

.ybiz-for-business__grid {
  display: grid;
  grid-template-columns:
    repeat(2, minmax(0, 1fr));

  gap: 20px;
}


/* --------------------
   Purpose Card
-------------------- */

.ybiz-purpose-card {
  min-width: 0;
  padding: 24px;
  --align-items: center;
  --gap: 12px;
  align-items: center !important;
  gap: 12px !important;
  text-align: center;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  transition:
    background-color 0.2s ease,
    transform 0.2s ease;
}


.ybiz-purpose-card__title .elementor-heading-title {
  margin: 0;
  color: #FFFFFF;
  text-align: center;

}


.ybiz-purpose-card__text {
  margin: 0;
  color: rgba(255, 255, 255, 0.72);
  text-align: center;
}


@media (hover: hover) {

  .ybiz-purpose-card:hover {
    background: rgba(255, 255, 255, 0.12);
    transform: translateY(-2px);
  }
}


/* ========================================
   SERVICES
======================================== */

.ybiz-services {
  padding-top: var(--ybiz-section-space-pc);
  padding-bottom: var(--ybiz-section-space-pc);

  background: rgba(222, 240, 244, 0.6);
}


/* --------------------
   Grid
-------------------- */

.ybiz-services__grid {
  display: grid;
  grid-template-columns:
    repeat(3, minmax(0, 1fr));

  gap: 32px 20px;
}


/* --------------------
   Card
-------------------- */

.ybiz-service-card {
  display: flex;
  flex-direction: column;

  min-width: 0;

  --padding-top: 0px;
  --padding-right: 0px;
  --padding-bottom: 0px;
  --padding-left: 0px;

  padding: 0 !important;

  overflow: hidden;

  background: #FFFFFF;

  border: 1px solid var(--ybiz-color-border);
  border-radius: 12px;

  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease,
    border-color 0.2s ease;
}


/* --------------------
   Image
-------------------- */

.ybiz-service-card__image {
  overflow: hidden;

  /* 画像読込前から高さを確保 */
  aspect-ratio: 16 / 10;
}


.ybiz-service-card__image .elementor-widget-container {
  width: 100%;
  height: 100%;
}


/* 画像にリンクを設定した場合にも対応 */
.ybiz-service-card__image .elementor-widget-container > a {
  display: block;
  width: 100%;
  height: 100%;
}


.ybiz-service-card__image img {
  display: block;

  width: 100%;
  height: 100%;

  object-fit: cover;

  transition: transform 0.35s ease;
}


/* --------------------
   Body
-------------------- */

.ybiz-service-card__body {
  display: flex;
  flex-direction: column;
  flex: 1;

  min-width: 0;

  padding: 24px;
}


.ybiz-service-card__title,
.ybiz-service-card__text,
.ybiz-service-card__link {
  margin: 0;
}


.ybiz-service-card__title .elementor-heading-title {
  color: var(--ybiz-color-dark);
}


.ybiz-service-card__text {
  color: var(--ybiz-color-gray);
}


.ybiz-service-card__text p {
  margin: 0;
}


/* --------------------
   Text Link
-------------------- */

.ybiz-service-card__link {
  margin-top: 16px;
  padding-top: 0;
}


.ybiz-service-card__link .elementor-button {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;

  min-height: 0;
  padding: 0;

  border: 0;
  border-radius: 0;

  background: transparent;
  color: var(--ybiz-color-blue);

  font-size: 14px;
  line-height: 1.5;
  font-weight: 700;

  box-shadow: none;
}


.ybiz-service-card__link .elementor-button-icon {
  transition: transform 0.2s ease;
}


@media (hover: hover) {

  .ybiz-service-card:hover {
    transform: translateY(-3px);

    border-color: #B9C0C4;

    box-shadow:
      0 8px 24px rgba(62, 72, 78, 0.10);
  }


  .ybiz-service-card:hover
  .ybiz-service-card__image img {
    transform: scale(1.025);
  }


  .ybiz-service-card__link
  .elementor-button:hover {
    background: transparent;
    color: var(--ybiz-color-dark);
  }


  .ybiz-service-card__link
  .elementor-button:hover
  .elementor-button-icon {
    transform: translateX(3px);
  }
}


/* ========================================
   NEWS & CASE STUDY
======================================== */

.ybiz-news {
  padding-top: var(--ybiz-section-space-pc);
  padding-bottom: var(--ybiz-section-space-pc);

  background: var(--ybiz-color-light);
}

/* Elementorコンテナ由来の縦gapを解除し、
   NEWS内の余白は個別指定で管理 */
.ybiz-news .ybiz-container {
  --gap: 0px;
  gap: 0 !important;
}

/* --------------------
   Header
-------------------- */

.ybiz-news__header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;

  gap: 32px;

  margin-bottom: 20px;
}


.ybiz-news
.ybiz-section-heading__title
.elementor-heading-title {
  color: var(--ybiz-color-dark);
}


/* --------------------
   View All
-------------------- */

.ybiz-news__more {
  width: 100%;
  margin-top: 32px;
  text-align: center;
}

.ybiz-news__more .elementor-widget-container {
  display: flex;
  justify-content: center;
}

.ybiz-news__more .elementor-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;

  min-height: 48px;

  /* 左右余白を広めに */
  padding: 12px 56px;

  border: 1px solid var(--ybiz-color-dark);
  border-radius: 9999px;

  background: transparent;
  color: var(--ybiz-color-dark);

  font-size: 14px;
  line-height: 1.5;
  font-weight: 700;

  box-shadow: none;

  transition:
    background-color 0.2s ease,
    color 0.2s ease,
    transform 0.2s ease;
}


@media (hover: hover) {

  .ybiz-news__more .elementor-button:hover {
    background: var(--ybiz-color-dark);
    color: #FFFFFF;

    transform: translateY(-1px);
  }
}


/* --------------------
   Grid
-------------------- */

.ybiz-news__grid {
  display: grid;
  grid-template-columns:
    repeat(2, minmax(0, 1fr));

  gap: 20px;
}


/* --------------------
   Card
-------------------- */

.ybiz-news-card {
  display: flex;
  flex-direction: column;

  min-width: 0;

  padding: 28px;

  background: #FFFFFF;

  border: 1px solid var(--ybiz-color-border);
  border-radius: 12px;

  transition:
    transform 0.2s ease,
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}


/* Meta */

.ybiz-news-card__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 16px;

  margin-bottom: 20px;
}


.ybiz-news-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}


.ybiz-news-card__tag {
  display: inline-flex;
  align-items: center;

  padding: 4px 10px;

  border-radius: 9999px;

  background: rgba(88, 181, 202, 0.12);
  color: var(--ybiz-color-dark);

  font-weight: 700;
  line-height: 1.4;
}


.ybiz-news-card__date {
  flex-shrink: 0;
  color: var(--ybiz-color-gray);
}


/* Title */

.ybiz-news-card__title {
  margin: 0 0 16px;
}


.ybiz-news-card__title a {
  color: var(--ybiz-color-dark);
  text-decoration: none;

  line-height: 1.4;

  transition: color 0.2s ease;
}


/* Excerpt */

.ybiz-news-card__excerpt {
  margin: 0 0 24px;

  color: var(--ybiz-color-gray);
  line-height: 1.7;
}


/* Link */

.ybiz-news-card__link {
  display: inline-flex;
  align-items: center;

  gap: 8px;

  margin-top: auto;

  color: var(--ybiz-color-blue);

  font-weight: 700;
  text-decoration: none;

  transition: color 0.2s ease;
}


.ybiz-news-card__link span {
  display: none;
}

.ybiz-news-card__link::after {
  content: "›";

  font-size: 1.6em;
  font-weight: 700;
  line-height: 0.8;

  transition: transform 0.2s ease;
}


@media (hover: hover) {

  .ybiz-news-card:hover {
    transform: translateY(-2px);

    border-color: #B9C0C4;

    box-shadow:
      0 8px 24px rgba(62, 72, 78, 0.08);
  }


  .ybiz-news-card__title a:hover,
  .ybiz-news-card__link:hover {
    color: var(--ybiz-color-dark);
  }


  .ybiz-news-card__link:hover::after {
    transform: translateX(3px);
  }
}


/* ========================================
   ABOUT YOGIBO
======================================== */

.ybiz-about {
  padding-top: var(--ybiz-section-space-pc);
  padding-bottom: var(--ybiz-section-space-pc);

  background: #FFFFFF;
}


/* --------------------
   Layout
-------------------- */

.ybiz-about__layout {
  display: grid;
  grid-template-columns:
    minmax(0, 1fr)
    minmax(0, 1fr);

  gap: 64px;
  align-items: center;
}


.ybiz-about__visual,
.ybiz-about__content {
  min-width: 0;
}


.ybiz-about
.ybiz-section-heading__title
.elementor-heading-title {
  color: var(--ybiz-color-dark);
}

/* ABOUT内だけ見出し間隔を少し詰める */
.ybiz-about .ybiz-section-heading {
  gap: 12px;
}

/* --------------------
   Gallery
-------------------- */

.ybiz-about__gallery {
  display: grid;
  grid-template-columns:
    repeat(2, minmax(0, 1fr));

  gap: 12px;

  overflow: hidden;

  border-radius: 16px;
}


.ybiz-about__image {
  overflow: hidden;
}


.ybiz-about__image img {
  display: block;

  width: 100%;
  height: 100%;

  aspect-ratio: 4 / 3;
  object-fit: cover;

  transition: transform 0.35s ease;
}


/* --------------------
   Description
-------------------- */

.ybiz-about__text {
  margin-top: 12px;

  color: var(--ybiz-color-gray);
  line-height: 1.8;
}


.ybiz-about__text p {
  margin: 0;
}


/* --------------------
   Feature Grid
-------------------- */

.ybiz-about__features {
  display: grid;
  grid-template-columns:
    repeat(2, minmax(0, 1fr));

  gap: 20px 24px;

  margin-top: 20px;
}


/* --------------------
   Feature Item
-------------------- */

.ybiz-feature-item {
  --flex-direction: row;
  --flex-wrap: nowrap;

  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: flex-start !important;

  gap: 12px;

  min-width: 0;

  padding-bottom: 0;

  border-bottom: 0;
}


/* PC：上段2項目のみ区切り */

.ybiz-feature-item:nth-child(-n + 2) {
  padding-bottom: 20px;

  border-bottom:
    1px solid var(--ybiz-color-border);
}


/* --------------------
   Feature Icon
-------------------- */

.ybiz-feature-item__icon {
  flex: 0 0 auto !important;

  width: auto !important;
  max-width: none !important;

  --container-widget-width: auto !important;
  --container-widget-flex-grow: 0 !important;
}


.ybiz-feature-item__icon .elementor-icon {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 32px !important;
  height: 32px !important;

  padding: 0 !important;

  color: var(--ybiz-color-blue);

  font-size: 32px !important;
  line-height: 1 !important;

  box-sizing: border-box;
}


.ybiz-feature-item__icon .elementor-icon svg {
  display: block;

  width: 32px !important;
  height: 32px !important;
}


/* --------------------
   Feature Content
-------------------- */

.ybiz-feature-item__content {
  flex: 1 1 0 !important;

  width: auto !important;
  min-width: 0;

  --container-widget-width: auto !important;
  --container-widget-flex-grow: 1 !important;

  /* Elementor由来の上下余白を解除 */
  --padding-top: 0px;
  --padding-bottom: 0px;

  padding-top: 0 !important;
  padding-bottom: 0 !important;
}


.ybiz-feature-item__title {
  margin: 0 0 6px;
}


.ybiz-feature-item__title .elementor-heading-title {
  margin: 0;
  color: var(--ybiz-color-dark);
}


.ybiz-feature-item__text {
  color: var(--ybiz-color-gray);
}


.ybiz-feature-item__text p {
  margin: 0;
}


@media (hover: hover) {

  .ybiz-about__image:hover img {
    transform: scale(1.025);
  }
}


/* ========================================
   CONTACT
======================================== */

.ybiz-contact {
  padding-top: 96px;
  padding-bottom: 96px;

  background:
    linear-gradient(
      to bottom,
      rgba(84, 102, 109, 0.58),
      rgba(70, 86, 93, 0.68)
    ),
    url("https://yogibo.inc/business/wp-content/uploads/sites/2/2024/08/image17.webp")
    center / cover no-repeat;
  color: #FFFFFF;
}


.ybiz-contact__inner {
  display: flex;
  flex-direction: column;
  align-items: center;

  text-align: center;
}


/* --------------------
   Heading
-------------------- */

.ybiz-contact .ybiz-section-heading {
  align-items: center;
  text-align: center;
}


.ybiz-contact
.ybiz-section-heading__title
.elementor-heading-title {
  color: #FFFFFF;
}


.ybiz-contact .ybiz-section-heading__lead {
  color: rgba(255, 255, 255, 0.82);
}


.ybiz-contact
.ybiz-section-heading__lead p {
  margin: 0;
}


/* --------------------
   CTA
-------------------- */

.ybiz-contact__cta {
  width: 100%;

  margin-top: 48px;

  text-align: center;
}


.ybiz-contact__cta
.elementor-widget-container {
  display: flex;
  justify-content: center;
}


.ybiz-contact__cta .elementor-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  gap: 10px;

  min-height: 56px;

  padding: 16px 36px;

  border: 0;
  border-radius: 9999px;

  background: var(--ybiz-color-orange);
  color: var(--ybiz-color-dark);

  font-weight: 700;

  box-shadow: none;

  transition:
    transform 0.2s ease,
    background-color 0.2s ease,
    box-shadow 0.2s ease;
}


.ybiz-contact__cta
.elementor-button-icon {
  transition: transform 0.2s ease;
}


/* --------------------
   Benefits
-------------------- */

.ybiz-contact__benefits {
  display: grid;
  grid-template-columns: repeat(3, auto);

  justify-content: center;

  gap: 32px;

  margin-top: 32px;
}


.ybiz-contact__benefit {
  display: flex;
  align-items: center;

  gap: 8px;

  min-width: 0;

  color: #FFFFFF;
}


.ybiz-contact__benefit-icon {
  flex: 0 0 auto;
}


.ybiz-contact__benefit-icon .elementor-icon {
  display: flex;
  align-items: center;
  justify-content: center;

  color: var(--ybiz-color-blue);
}


.ybiz-contact__benefit-text {
  color: rgba(255, 255, 255, 0.88);
}


.ybiz-contact__benefit-text p {
  margin: 0;
}


@media (hover: hover) {

  .ybiz-contact__cta .elementor-button:hover {
    background: var(--ybiz-color-orange);
    color: var(--ybiz-color-dark);

    transform: translateY(-2px);

    box-shadow:
      0 8px 20px rgba(0, 0, 0, 0.16);
  }


  .ybiz-contact__cta
  .elementor-button:hover
  .elementor-button-icon {
    transform: translateX(3px);
  }
}


/* ========================================
   Tablet
   <= 1024px
======================================== */

@media (max-width: 1024px) {

  /* --------------------
     Common Typography
  -------------------- */

  .ybiz-hero__title .elementor-heading-title {
    font-size: 36px !important;
    line-height: 1.25 !important;
  }


  .ybiz-hero__text {
    font-size: 15px;
    line-height: 1.7;
  }


  .ybiz-section-heading__title
  .elementor-heading-title {
    font-size: 28px !important;
    line-height: 1.4 !important;
  }


  .ybiz-section-heading__lead {
    font-size: 15px;
    line-height: 1.7;
  }


  .ybiz-purpose-card__title
  .elementor-heading-title,
  .ybiz-service-card__title
  .elementor-heading-title,
  .ybiz-feature-item__title
  .elementor-heading-title {
    font-size: 16px !important;
    line-height: 1.5 !important;
  }


  /* --------------------
     HERO
  -------------------- */

  .ybiz-hero__slide {
    height: 560px;
  }


  .ybiz-hero__slide-inner {
    width: calc(100% - 48px);
  }

  /* Tablet以下では矢印を下部へ配置 */
  .ybiz-hero__prev,
  .ybiz-hero__next {
    top: auto;
    bottom: 16px;
    transform: none;
  }

  .ybiz-hero__slide::before {
    background:
      linear-gradient(
        to right,
        rgba(52, 65, 71, 0.72) 0%,
        rgba(52, 65, 71, 0.56) 50%,
        rgba(52, 65, 71, 0.24) 82%,
        rgba(52, 65, 71, 0.08) 100%
      );
  }


  /* --------------------
     FOR BUSINESS
  -------------------- */

  .ybiz-for-business {
    padding-top: var(--ybiz-section-space-tab);
    padding-bottom: var(--ybiz-section-space-tab);
  }


  .ybiz-for-business__layout {
    grid-template-columns: 1fr;
    gap: 48px;
  }


  /* --------------------
     SERVICES
  -------------------- */

  .ybiz-services {
    padding-top: var(--ybiz-section-space-tab);
    padding-bottom: var(--ybiz-section-space-tab);
  }


  .ybiz-services__grid {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }


  /* --------------------
     NEWS
  -------------------- */

  .ybiz-news {
    padding-top: var(--ybiz-section-space-tab);
    padding-bottom: var(--ybiz-section-space-tab);
  }


  .ybiz-news__grid {
    grid-template-columns: 1fr;
  }


  /* --------------------
     ABOUT
  -------------------- */

  .ybiz-about {
    padding-top: var(--ybiz-section-space-tab);
    padding-bottom: var(--ybiz-section-space-tab);
  }


  .ybiz-about__layout {
    grid-template-columns: 1fr;
    gap: 40px;
  }


  .ybiz-about__features {
    grid-template-columns: 1fr;
    gap: 12px;
  }


  .ybiz-feature-item {
    --flex-direction: row !important;

    flex-direction: row !important;
    flex-wrap: nowrap !important;

    padding-bottom: 12px;

    border-bottom:
      1px solid var(--ybiz-color-border);
  }


  .ybiz-feature-item:last-child {
    padding-bottom: 0;
    border-bottom: 0;
  }


  .ybiz-feature-item__icon .elementor-icon,
  .ybiz-feature-item__icon .elementor-icon svg {
    width: 28px !important;
    height: 28px !important;
  }


  .ybiz-feature-item__icon .elementor-icon {
    font-size: 28px !important;
  }


  /* --------------------
     CONTACT
  -------------------- */

  .ybiz-contact {
    padding-top: 72px;
    padding-bottom: 72px;
  }
}


/* ========================================
   Mobile
   <= 767px
======================================== */

@media (max-width: 767px) {

  /* --------------------
     Common Typography
  -------------------- */

  .ybiz-hero__title .elementor-heading-title {
    font-size: 30px !important;
    line-height: 1.3 !important;
  }


  .ybiz-hero__text {
    font-size: 14px;
    line-height: 1.7;
  }


  .ybiz-section-heading__title
  .elementor-heading-title {
    font-size: 24px !important;
    line-height: 1.4 !important;
  }


  .ybiz-section-heading__lead {
    font-size: 14px;
    line-height: 1.7;
  }


  .ybiz-purpose-card__title
  .elementor-heading-title,
  .ybiz-service-card__title
  .elementor-heading-title,
  .ybiz-feature-item__title
  .elementor-heading-title {
    font-size: 16px !important;
    line-height: 1.5 !important;
  }


  .ybiz-purpose-card__text,
  .ybiz-service-card__text,
  .ybiz-feature-item__text {
    font-size: 14px;
    line-height: 1.65;
  }


  /* --------------------
     HERO
  -------------------- */

  .ybiz-hero__slide {
    height: 480px;
  }


  .ybiz-hero__slide-inner {
    width: calc(100% - 32px);
  }


  .ybiz-hero__content {
    max-width: none;
  }

  .ybiz-hero__slide::before {
    background:
      linear-gradient(
        to right,
        rgba(52, 65, 71, 0.68) 0%,
        rgba(52, 65, 71, 0.54) 60%,
        rgba(52, 65, 71, 0.28) 100%
      );
  }

  /* --------------------
     FOR BUSINESS
  -------------------- */

  .ybiz-for-business {
    padding-top: var(--ybiz-section-space-sp);
    padding-bottom: var(--ybiz-section-space-sp);
  }


  .ybiz-for-business__layout {
    gap: 32px;
  }


  .ybiz-for-business__grid {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));

    gap: 12px;
  }


  .ybiz-purpose-card {
    padding: 16px;
  }

  /* アイコンの占有スペースは維持し、見た目だけ小さくする */
  .ybiz-purpose-card__icon .elementor-icon {
    transform: scale(0.8);
    transform-origin: center;
  }


  /* --------------------
     SERVICES
  -------------------- */

  .ybiz-services {
    padding-top: var(--ybiz-section-space-sp);
    padding-bottom: var(--ybiz-section-space-sp);
  }


  /*
   * 600〜767pxでは2列。
   * 599px以下のみ1列へ変更する。
   */
  .ybiz-services__grid {
    grid-template-columns:
      repeat(2, minmax(0, 1fr)) !important;

    gap: 24px 16px;
  }


  .ybiz-service-card__body {
    padding: 20px;
  }


  .ybiz-service-card__link
  .elementor-button {
    font-size: 13px;
    line-height: 1.5;
  }


  .ybiz-service-card__image{
    aspect-ratio: 1.85 / 1;
  }


  /* --------------------
     NEWS
  -------------------- */

  .ybiz-news {
    padding-top: var(--ybiz-section-space-sp);
    padding-bottom: var(--ybiz-section-space-sp);
  }


  .ybiz-news__header {
    margin-bottom: 16px;
  }


  .ybiz-news__more {
    margin-top: 24px;
  }


  .ybiz-news__grid {
    gap: 16px;
  }


  .ybiz-news-card {
    padding: 20px;
  }


  .ybiz-news-card__meta {
    gap: 12px;
    margin-bottom: 16px;
  }


  .ybiz-news-card__excerpt {
    display: -webkit-box;

    overflow: hidden;

    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;

    margin-bottom: 20px;
  }


  /* --------------------
     ABOUT
  -------------------- */

  .ybiz-about {
    padding-top: var(--ybiz-section-space-sp);
    padding-bottom: var(--ybiz-section-space-sp);
  }


  .ybiz-about__layout {
    gap: 24px;
  }


  .ybiz-about__gallery {
    gap: 8px;
    border-radius: 12px;
  }


  .ybiz-about__features {
    gap: 12px;
    margin-top: 16px;
  }


  .ybiz-feature-item {
    --flex-direction: row !important;

    flex-direction: row !important;
    flex-wrap: nowrap !important;

    gap: 10px;

    padding-bottom: 12px;
  }


  .ybiz-feature-item:last-child {
    padding-bottom: 0;
  }


  .ybiz-feature-item__icon .elementor-icon {
    width: 24px !important;
    height: 24px !important;

    padding: 0 !important;

    font-size: 24px !important;
    line-height: 1 !important;
  }


  .ybiz-feature-item__icon .elementor-icon svg {
    width: 24px !important;
    height: 24px !important;
  }


  /* --------------------
     CONTACT
  -------------------- */

  .ybiz-contact {
    padding-top: 64px;
    padding-bottom: 64px;
  }


  .ybiz-contact__cta {
    width: 100%;

    margin-top: 32px;
  }


  .ybiz-contact__cta .elementor-button {
    width: 100%;
  }


  .ybiz-contact__benefits {
    grid-template-columns:
      repeat(3, minmax(0, 1fr));

    gap: 12px;

    width: 100%;

    margin-top: 24px;
  }

  .ybiz-contact__benefit {
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;

    gap: 6px;

    text-align: center;
  }

  .ybiz-contact__benefit-text {
    font-size: 13px;
    line-height: 1.5;
  }

}


/* ========================================
   SERVICES - Small Mobile
   <= 599px
======================================== */

@media (max-width: 599px) {

  .ybiz-services__grid {
    grid-template-columns: 1fr !important;
    gap: 24px;
  }
}

/* ========================================
   Scroll Animation
======================================== */

/*
 * JavaScriptが正常に動いている場合のみ
 * 初期状態を非表示にする。
 */

.ybiz-motion-ready .ybiz-reveal {
  opacity: 0;

  transform: translateY(20px);

  transition:
    opacity 0.7s ease,
    transform 0.7s ease;

  transition-delay:
    var(--ybiz-reveal-delay, 0ms);
}


/* 表示状態 */

.ybiz-motion-ready
.ybiz-reveal.is-visible {
  opacity: 1;

  transform: translateY(0);
}


/* --------------------
   左から少し入る
-------------------- */

.ybiz-motion-ready
.ybiz-reveal--left {
  opacity: 0;

  transform: translateX(-24px);

  transition:
    opacity 0.7s ease,
    transform 0.7s ease;

  transition-delay:
    var(--ybiz-reveal-delay, 0ms);
}


.ybiz-motion-ready
.ybiz-reveal--left.is-visible {
  opacity: 1;

  transform: translateX(0);
}


/* --------------------
   画像
-------------------- */

.ybiz-motion-ready
.ybiz-reveal--image {
  opacity: 0;

  transform:
    translateY(16px)
    scale(0.985);

  transition:
    opacity 0.8s ease,
    transform 0.8s ease;

  transition-delay:
    var(--ybiz-reveal-delay, 0ms);
}


.ybiz-motion-ready
.ybiz-reveal--image.is-visible {
  opacity: 1;

  transform:
    translateY(0)
    scale(1);
}


/* --------------------
   Reduced Motion
-------------------- */

@media (prefers-reduced-motion: reduce) {

  .ybiz-motion-ready .ybiz-reveal,
  .ybiz-motion-ready .ybiz-reveal--left,
  .ybiz-motion-ready .ybiz-reveal--image {
    opacity: 1 !important;

    transform: none !important;

    transition: none !important;
  }
}

/* ========================================
   Existing CTA Block
======================================== */

#cta {
  display: none !important;
}