/* コムネット トップページ用メインビジュアル 修正版 v3
   修正点：
   - 「WEB版レセジョ～ズ近日公開」バッジがタイトルに重ならないよう、
     タイトル周りだけ最小限調整
   - それより下の配置は以前のままを維持
   - ロゴ画像の白背景を除去し、フッター背景に自然になじむよう調整
*/

:root {
  --comnet-purple: #7151d6;
  --comnet-blue: #0b66d8;
  --comnet-orange: #ff8800;
  --comnet-orange-dark: #f06d00;
  --comnet-text: #1b1d2a;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: #f4f7ff;
  font-family: "Yu Gothic", "YuGothic", "Hiragino Kaku Gothic ProN", "Meiryo", sans-serif;
}

.comnet-hero {
  position: relative;
  overflow: hidden;
  width: min(100%, 1536px);
  margin: 0 auto;
  aspect-ratio: 3 / 2;
  background:
    radial-gradient(circle at 2% 35%, rgba(117, 93, 224, .18), transparent 28%),
    radial-gradient(circle at 86% 10%, rgba(58, 123, 255, .13), transparent 26%),
    linear-gradient(140deg, #ffffff 0%, #ffffff 48%, #eef5ff 100%);
  color: var(--comnet-text);
  border: 2px solid rgba(103, 79, 218, .42);
}

.comnet-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(-18deg, rgba(73, 111, 220, .06) 0 2px, transparent 2px 14px),
    radial-gradient(circle at 8% 22%, rgba(255,255,255,.8) 0 3px, transparent 4px);
  opacity: .85;
  pointer-events: none;
}

.comnet-hero::after {
  content: "";
  position: absolute;
  right: -8%;
  bottom: -7%;
  width: 48%;
  height: 22%;
  background:
    radial-gradient(circle at 88% 35%, #d7f1ff 0 5%, transparent 5.2%),
    repeating-linear-gradient(-18deg, rgba(0, 122, 255, .18) 0 3px, transparent 3px 16px);
  border-radius: 50%;
  transform: rotate(-6deg);
  pointer-events: none;
}

.comnet-hero__person {
  position: absolute;
  z-index: 3;
  left: 0;
  bottom: 5.5%;
  width: 36.5%;
  height: 90%;
  overflow: hidden;
}

.comnet-hero__person img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: left bottom;
  display: block;
}

.comnet-hero__badge {
  position: absolute;
  z-index: 6;
  right: 1.8%;
  top: 5.8%;
  width: 13.2%;
  max-width: 205px;
}

.comnet-hero__badge img {
  width: 100%;
  display: block;
  filter: drop-shadow(0 10px 14px rgba(0, 54, 160, .14));
}

.comnet-hero__content {
  position: absolute;
  z-index: 4;
  top: 5.8%;
  left: 37.5%;
  width: 57%;
  text-align: center;
}

.comnet-hero__eyebrow {
  margin: 0;
  padding-right: 15%;
  color: #1d1e2a;
  font-size: clamp(22px, 2.45vw, 38px);
  font-weight: 900;
  line-height: 1.2;
  letter-spacing: .05em;
}

.comnet-hero__title {
  position: relative;
  display: inline-block;
  max-width: 74%;
  margin: .12em 20% .38em 0;
  color: var(--comnet-purple);
  font-family: "Yu Mincho", "YuMincho", "Hiragino Mincho ProN", "Meiryo", serif;
  font-size: clamp(44px, 5.2vw, 80px);
  font-weight: 900;
  line-height: .98;
  letter-spacing: .04em;
  text-shadow: 0 4px 0 rgba(255,255,255,.92);
  white-space: nowrap;
}

.comnet-hero__title::after {
  content: "";
  position: absolute;
  left: 5%;
  right: 0;
  bottom: -.22em;
  height: .12em;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, rgba(113, 81, 214, .85), rgba(11, 102, 216, .7), transparent);
}

.comnet-hero__lead {
  margin: 0 auto 2.4%;
  font-size: clamp(15px, 1.5vw, 23px);
  font-weight: 800;
  line-height: 1.65;
  letter-spacing: .03em;
}

.comnet-hero__lead span {
  color: var(--comnet-purple);
  font-weight: 900;
}

.comnet-hero__tags {
  display: flex;
  justify-content: center;
  gap: 1.1%;
  margin: 0 0 2.6%;
  padding: 0;
  list-style: none;
}

.comnet-hero__tags li {
  display: inline-flex;
  align-items: center;
  gap: .45em;
  min-height: 38px;
  padding: .48em .9em;
  border: 1px solid rgba(47, 95, 198, .2);
  border-radius: 10px;
  background: rgba(255,255,255,.88);
  box-shadow: 0 6px 14px rgba(30, 71, 150, .09);
  color: #192039;
  font-size: clamp(11px, 1.05vw, 16px);
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
}

.comnet-hero__tags span {
  display: grid;
  place-items: center;
  width: 1.55em;
  height: 1.55em;
  border: 2px solid rgba(11, 102, 216, .25);
  border-radius: 50%;
  color: var(--comnet-blue);
  font-size: .85em;
  font-weight: 900;
}

.comnet-services {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5%;
  margin: 3.2% auto 3.4%;
}

.comnet-service-card {
  position: relative;
  min-height: clamp(228px, 21vw, 322px);
  padding: clamp(34px, 3.6vw, 54px) 5% 4.5%;
  border: 1px solid rgba(47, 120, 215, .25);
  border-radius: 14px;
  background: rgba(255,255,255,.9);
  box-shadow: 0 10px 20px rgba(56, 85, 170, .1);
  text-align: center;
}

.comnet-service-card__icon {
  position: absolute;
  top: 0;
  left: 50%;
  display: grid;
  place-items: center;
  width: clamp(54px, 5vw, 76px);
  height: clamp(54px, 5vw, 76px);
  transform: translate(-50%, -50%);
  border: 4px solid #fff;
  border-radius: 50%;
  color: #fff;
  background: linear-gradient(180deg, var(--comnet-purple), var(--comnet-blue));
  box-shadow: 0 7px 13px rgba(0, 79, 180, .2);
  font-size: clamp(17px, 1.55vw, 24px);
  font-weight: 900;
  line-height: 1;
}

.comnet-service-card h2 {
  margin: 0 0 .55em;
  color: var(--comnet-blue);
  font-size: clamp(16px, 1.6vw, 24px);
  font-weight: 900;
  line-height: 1.3;
}

.comnet-service-card h2 strong {
  display: block;
  margin-top: .08em;
  color: #004db9;
  font-family: "Yu Mincho", "YuMincho", "Meiryo", serif;
  font-size: 1.35em;
  line-height: 1;
}

.comnet-service-card--web h2 { color: var(--comnet-purple); }

.comnet-service-card img {
  width: 92%;
  max-height: clamp(92px, 10.5vw, 155px);
  object-fit: contain;
  display: block;
  margin: .15em auto .55em;
}

.comnet-service-card p,
.comnet-service-card ul {
  margin: 0;
  padding: 0;
  color: #173a80;
  font-size: clamp(10px, 1vw, 15px);
  font-weight: 800;
  line-height: 1.42;
}

.comnet-service-card ul {
  list-style: none;
  display: grid;
  gap: .45em;
  margin-top: .2em;
}

.comnet-service-card li {
  padding: .43em .5em;
  border-radius: 9px;
  background: rgba(235, 244, 255, .92);
}

.comnet-hero__actions {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 2.8%;
  width: 92%;
  margin: 0 auto;
}

.comnet-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .7em;
  min-height: clamp(52px, 5vw, 76px);
  padding: .65em 1.35em;
  border-radius: 18px;
  text-decoration: none;
  font-size: clamp(18px, 1.95vw, 30px);
  font-weight: 900;
  line-height: 1;
  letter-spacing: .05em;
}

.comnet-btn--primary {
  color: #fff;
  background: linear-gradient(180deg, #ff970d, var(--comnet-orange-dark));
  box-shadow: inset 0 0 0 3px rgba(255,255,255,.25), 0 8px 18px rgba(240, 109, 0, .22);
}

.comnet-btn--outline {
  color: var(--comnet-orange-dark);
  background: rgba(255,255,255,.86);
  border: 3px solid var(--comnet-orange);
}

.comnet-btn span { font-size: 1.15em; }

.comnet-btn i {
  display: grid;
  place-items: center;
  width: 1.55em;
  height: 1.55em;
  margin-left: .25em;
  border-radius: 50%;
  background: rgba(255,255,255,.92);
  color: var(--comnet-orange);
  font-style: normal;
  font-size: 1.2em;
  line-height: 1;
}

.comnet-btn--outline i { background: transparent; }

.comnet-hero__bottom {
  position: absolute;
  z-index: 7;
  left: 0;
  right: 0;
  bottom: 0;
  min-height: 7.6%;
  display: flex;
  align-items: center;
  gap: 1.5em;
  padding: 0 3.4%;
  color: #fff;
  background: linear-gradient(90deg, #6f5bdc, #679de9 55%, rgba(103, 157, 233, .7));
}

.comnet-brand {
  display: flex;
  align-items: center;
  gap: .85em;
  min-width: fit-content;
}

.comnet-brand__logo {
  width: clamp(62px, 8vw, 116px);
  height: auto;
  display: block;
  background: transparent;
  mix-blend-mode: screen;
  opacity: .98;
}

.comnet-brand strong {
  font-size: clamp(22px, 2.65vw, 40px);
  letter-spacing: .09em;
}

.comnet-hero__bottom > span {
  width: 1px;
  height: 32px;
  background: rgba(255,255,255,.68);
}

.comnet-hero__bottom p {
  margin: 0;
  font-size: clamp(13px, 1.4vw, 22px);
  font-weight: 800;
  letter-spacing: .05em;
}

@media (min-width: 1537px) {
  .comnet-hero { width: 1536px; }
}

@media (max-width: 1200px) {
  .comnet-hero__title {
    max-width: 72%;
    margin-right: 21%;
    font-size: clamp(40px, 5vw, 72px);
  }

  .comnet-hero__badge {
    width: 12.6%;
  }

  .comnet-service-card__icon {
    width: 58px;
    height: 58px;
    font-size: 18px;
  }
}

@media (max-width: 900px) {
  .comnet-hero {
    aspect-ratio: auto;
    padding: 24px 15px 0;
  }

  .comnet-hero__person {
    position: relative;
    left: auto;
    bottom: auto;
    width: min(74%, 340px);
    height: auto;
    margin: 0 auto -6px 0;
  }

  .comnet-hero__person img {
    height: auto;
    object-fit: contain;
  }

  .comnet-hero__badge {
    right: 3%;
    top: 3%;
    width: 26%;
    max-width: none;
  }

  .comnet-hero__content {
    position: relative;
    top: auto;
    left: auto;
    width: 100%;
    padding-bottom: 22px;
  }

  .comnet-hero__eyebrow {
    padding-right: 0;
    font-size: clamp(22px, 6vw, 34px);
  }

  .comnet-hero__title {
    max-width: 100%;
    margin-right: 0;
    white-space: normal;
    font-size: clamp(44px, 13vw, 80px);
  }

  .comnet-hero__lead { font-size: 16px; }

  .comnet-hero__tags {
    flex-wrap: wrap;
    gap: 8px;
  }

  .comnet-hero__tags li { font-size: 13px; }

  .comnet-services {
    grid-template-columns: 1fr;
    gap: 36px;
    margin-top: 40px;
  }

  .comnet-service-card {
    min-height: auto;
    padding: 38px 16px 18px;
  }

  .comnet-service-card__icon {
    width: 58px;
    height: 58px;
  }

  .comnet-service-card img {
    width: 78%;
    max-height: 170px;
  }

  .comnet-service-card p,
  .comnet-service-card ul {
    font-size: 14px;
  }

  .comnet-hero__actions {
    grid-template-columns: 1fr;
    width: 100%;
    gap: 12px;
  }

  .comnet-btn {
    min-height: 58px;
    font-size: 20px;
    border-radius: 14px;
  }

  .comnet-hero__bottom {
    position: relative;
    flex-wrap: wrap;
    gap: 10px 14px;
    margin-inline: -15px;
    padding: 14px 16px 18px;
  }

  .comnet-brand { width: 100%; }

  .comnet-brand__logo {
    width: 88px;
    mix-blend-mode: normal;
  }

  .comnet-brand strong {
    font-size: 26px;
  }

  .comnet-hero__bottom > span { display: none; }

  .comnet-hero__bottom p {
    width: 100%;
    font-size: 14px;
  }
}