@charset "utf-8";
/* CSS Document */
.cate1 .section-europe .text-block .ul .li{
margin-bottom: 15px;
}

.section-europe{
    position: relative;
}
.section-europe .vertical-button{
    position: absolute;
    right: 80px;
    bottom: -20px;
}

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  grid-auto-rows: 1fr;
  gap: 16px;
  width: 90%;
  height: 400px;
  background-color: #f5f5ef;
  padding: 0;
  border-radius: 20px;
  overflow: hidden;
}

.gallery-item {
  border-radius: 16px;
  overflow: hidden;
}

.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* 配置指定 */
.item1 {
  grid-column: 1 / 3;
  grid-row: 1 / 3;
}

.item2 {
  grid-column: 3 / 5;
  grid-row: 1;
}

.item3 {
  grid-column: 3 / 5;
  grid-row: 2;
}

.item4 {
  grid-column: 5 / 8;
  grid-row: 1 / 3;
}



/* 全体のセクション */
.flow-section {
  display: flex;
  flex-direction: column;
  gap: 250px;
}

/* 各ステップの行 */
.flow-step {
  gap: clamp(20px, 5vw, 60px);
  position: relative;
}
.flow-step:nth-of-type(1)::after,.flow-step:nth-of-type(2)::after,
.flow-step:nth-of-type(3)::after {
  content: "";
  position: absolute;
  bottom: -200px;
  left: 50%;
  transform: translateX(-60%);
  width: 500px;
  height: 193px;
  background: url("https://gocoo-horse.jp/system_panel/uploads/images/line.png") no-repeat center;
  background-size: contain;
  pointer-events: none;
  z-index: 15;
  opacity: 0.8;
}
.flow-step:nth-of-type(2)::after {
      transform: translateX(-60%) scaleX(-1);
}


/* 画像エリア */
.flow-img {
  position: relative;
width: clamp(180px, 30vw, 220px);
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  flex-shrink: 0;
}

.flow-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

.flow-text {
max-width: 700px;
}
.flow-text p {
  line-height: 1.8;
}

/* 番号（01,02…）をつけるならここで */
.flow-img::before {
  content: counter(step, decimal-leading-zero);
  counter-increment: step;
  position: absolute;
  top: -16px;
  left: -16px;
  width: 70px;
  height: 70px;
  border: 2px dotted #000;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  font-size: 30px;
  font-family: "Lato", sans-serif;
  z-index: 1;
}

/* カウンター初期化 */
.flow-section {
  counter-reset: step;
}
.flow4 .button-wrap{
    width: 100%;
  gap: 12px;
  margin-top: 16px;
justify-content: center;
}
.tel-box a,.tel-box p{
  color: #000;
}

/* ---------- IEのみ ---------- */
@media all and (-ms-high-contrast: none) {
}
/* ---------- 1280px ~ ---------- */
@media screen and (max-width: 1280px){
}
/* ---------- 1080px ~ ---------- */
@media screen and (max-width: 1080px){
.gallery-grid {
  width: 100%;
}
    .flow-section {
gap: clamp(100px, 8vw, 180px);
}
    
    .flow-step:nth-of-type(1)::after,.flow-step:nth-of-type(2)::after,
.flow-step:nth-of-type(3)::after {
display: none;
}
/* ---------- 768px ~ ---------- */
@media screen and (max-width: 768px){
  .gallery-grid {
    grid-template-columns: 1fr 1fr;
    grid-auto-rows: auto;
    height: auto;
  }

  .gallery-item {
    grid-column: auto !important;
    grid-row: auto !important;
    height: auto;
        aspect-ratio: 40 / 25;
  }

  .gallery-item img {
    height: auto;
  }

    }
/* ---------- 576px ~ ---------- */
@media screen and (max-width: 576px){
.pagetitle2-inner .pagetitle2-en {
  font-size: clamp(18px, 2.5vw, 30px);
}
}
/* ---------- 350px ~ ---------- */
@media screen and (max-width: 350px){
}