/* =========================================================

   KENNET GLOBAL FOOTER

========================================================= */

.footer {

  --ken-footer-blue: #075da8;

  --ken-footer-blue-dark: #064b8c;

  --ken-footer-blue-deep: #043d73;

  --ken-footer-text: #183d5c;

  --ken-footer-text-soft: #627d91;

  --ken-footer-border: #d1e4ef;

  --ken-footer-bg: #eff8fc;

  --ken-footer-bg-light: #f8fcfe;

  --ken-footer-mincho:

    "Shippori Mincho",

    "Yu Mincho",

    "YuMincho",

    "Hiragino Mincho ProN",

    serif;

  position: relative;

  width: 100%;

  overflow: hidden;

  background: #ffffff;

  color: var(--ken-footer-text);

  font-family:

    "Noto Sans JP",

    "Yu Gothic",

    "YuGothic",

    "Hiragino Kaku Gothic ProN",

    sans-serif;

}

.footer *,

.footer *::before,

.footer *::after {

  box-sizing: border-box;

}

.footer a {

  color: inherit;

  text-decoration: none;

}

/* =========================================================

   CTA

========================================================= */

.footer-cta {

  position: relative;

  min-height: 260px;

  overflow: hidden;

  display: flex;

  align-items: center;

  background-image:

    linear-gradient(

      180deg,

      rgba(255,255,255,0.04) 0%,

      rgba(255,255,255,0.02) 55%,

      rgba(238,248,253,0.12) 100%

    ),

    url("https://ken-net.co.jp/cms/wp-content/uploads/2026/09/footer_cta-back.webp");

  background-repeat: no-repeat;

  /*

    街並みをかなり下側へ。

    さらに下げたい場合は 88% → 92% などへ。

  */

  background-position:

    center 88%;

  background-size: cover;

  border-bottom:

    1px solid

    rgba(7, 93, 168, 0.17);

}

.footer-cta__inner {

  position: relative;

  width:

    min(

      1450px,

      calc(100% - 80px)

    );

  min-height: 330px;

  margin: 0 auto;

  display: flex;

  align-items: center;

}

/* =========================================================

   CTA PANEL

========================================================= */

.footer-cta__panel {

  position: relative;

  z-index: 2;

  width:

    min(

      1060px,

      calc(100% - 260px)

    );

  min-height: 138px;

  margin-left: auto;

  margin-right: 185px;

  padding:

    28px 28px 28px 52px;

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 38px;

  background:

    rgba(255,255,255,0.96);

  border:

    1px solid

    rgba(213, 231, 241, 0.90);

  border-radius: 22px;

  box-shadow:

    0 15px 38px

    rgba(21, 82, 121, 0.11);

}

.footer-cta__copy {

  min-width: 0;

  flex: 1 1 auto;

}

.footer-cta__eyebrow {

  display: block;

  margin-bottom: 5px;

  color: #4a98cf;

  font-size: 9px;

  font-weight: 900;

  letter-spacing: 0.20em;

}

.footer-cta__title {

  margin: 0;

  color: #07549a;

  font-size:

    clamp(

      17px,

      1.25vw,

      21px

    );

  font-weight: 900;

  line-height: 1.5;

  letter-spacing: 0;

  white-space: nowrap;

}

.footer-cta__lead {

  margin:

    6px 0 0;

  color: #60788b;

  font-size: 11px;

  font-weight: 600;

  line-height: 1.7;

}

/* =========================================================

   CTA BUTTON

========================================================= */

.footer-cta__button {

  width: 330px;

  min-height: 70px;

  flex: 0 0 330px;

  padding:

    0 24px;

  display: flex;

  align-items: center;

  gap: 14px;

  color:

    #ffffff !important;

  background:

    linear-gradient(

      135deg,

      #1788d1 0%,

      #0870bd 48%,

      #07549a 100%

    );

  border-radius: 50px;

  box-shadow:

    0 10px 22px

    rgba(7, 91, 158, 0.21);

  transition:

    transform 0.25s ease,

    box-shadow 0.25s ease;

}

.footer-cta__button:hover {

  transform:

    translateY(-3px);

  box-shadow:

    0 15px 31px

    rgba(7, 91, 158, 0.28);

}

.footer-cta__button-icon {

  width: 25px;

  height: 25px;

  flex: 0 0 25px;

  display: flex;

}

.footer-cta__button-icon svg {

  width: 100%;

  height: 100%;

  fill: none;

  stroke: currentColor;

  stroke-width: 1.7;

  stroke-linecap: round;

  stroke-linejoin: round;

}

.footer-cta__button-text {

  font-size: 14px;

  font-weight: 900;

  white-space: nowrap;

}

.footer-cta__button-arrow {

  margin-left: auto;

  font-size: 18px;

  transition:

    transform 0.2s ease;

}

.footer-cta__button:hover

.footer-cta__button-arrow {

  transform:

    translateX(4px);

}

/* =========================================================

   CTA RIGHT MINCHO MESSAGE

========================================================= */

.footer-cta__note {

  position: absolute;

  z-index: 3;

  top: 60px;

  right: 5px;

  width: 150px;

  color: #356da4;

  font-family:

    var(--ken-footer-mincho);

  font-size: 13px;

  font-weight: 600;

  line-height: 1.75;

  letter-spacing: 0.10em;

  transform:

    rotate(-5deg);

  pointer-events: none;

}

.footer-cta__note span {

  display: block;

}

.footer-cta__note i {

  position: absolute;

  right: -4px;

  bottom: -13px;

  width: 110px;

  height: 30px;

  border-bottom:

    1px solid

    #548bb8;

  border-radius:

    0 0 50% 50%;

  transform:

    rotate(-7deg);

}

/* =========================================================

   MAIN FOOTER

========================================================= */

.footer-main {

  position: relative;

  overflow: hidden;

  background:

    linear-gradient(

      135deg,

      #f8fcfe 0%,

      #eef8fd 52%,

      #f8fcfe 100%

    );

}

.footer-main__inner {

  position: relative;

  width:

    min(

      1500px,

      calc(100% - 100px)

    );

  min-height: 610px;

  margin: 0 auto;

  padding:

    55px 0 75px;

  display: grid;

  grid-template-columns:

    minmax(350px, 1.35fr)

    minmax(185px, 0.82fr)

    minmax(190px, 0.82fr)

    minmax(220px, 0.95fr)

    minmax(180px, 0.76fr);

  gap: 34px;

}

/* =========================================================

   BRAND

========================================================= */

.footer-brand {

  position: relative;

  z-index: 3;

  padding-right: 42px;

  border-right:

    1px solid

    var(--ken-footer-border);

}

.footer-brand__eyebrow {

  margin:

    0 0 22px;

  display: flex;

  align-items: center;

  gap: 18px;

  color: #486b84;

  font-size: 10px;

  font-weight: 800;

  letter-spacing: 0.10em;

}

.footer-brand__eyebrow i {

  width: 105px;

  height: 1px;

  display: block;

  background:

    #83b3d3;

}

.footer-brand__logo {

  display: inline-block;

  margin-bottom: 16px;

}

.footer-brand__logo img {

  display: block;

  width: auto;

  height: 63px;

  max-width: 100%;

  object-fit: contain;

}

.footer-brand__catch {

  margin:

    0 0 11px;

  color:

    #075da8;

  font-size: 17px;

  font-weight: 900;

  line-height: 1.55;

  letter-spacing: 0.02em;

}

.footer-brand__description {

  max-width: 420px;

  margin: 0;

  color: #506d82;

  font-size: 12px;

  font-weight: 600;

  line-height: 1.95;

}

/* =========================================================

   PHONE

========================================================= */

.footer-brand__phone {

  width: fit-content;

  margin-top: 26px;

  display: flex;

  align-items: center;

  gap: 13px;

  color:

    var(--ken-footer-blue-dark) !important;

}

.footer-brand__phone-icon {

  width: 46px;

  height: 46px;

  flex: 0 0 46px;

  padding: 11px;

  display: flex;

  align-items: center;

  justify-content: center;

  color: #0867ad;

  background:

    #d9eefb;

  border-radius: 50%;

}

.footer-brand__phone-icon svg {

  width: 100%;

  height: 100%;

  fill: currentColor;

}

.footer-brand__phone-content {

  display: flex;

  flex-direction: column;

}

.footer-brand__phone-content strong {

  color:

    var(--ken-footer-blue-dark);

  font-size: 29px;

  font-weight: 900;

  line-height: 1.05;

  letter-spacing: 0.03em;

}

.footer-brand__phone-content small {

  margin-top: 6px;

  color: #536e82;

  font-size: 11px;

  font-weight: 500;

}

/* =========================================================

   SNS

========================================================= */

.footer-social {

  width: 100%;

  max-width: 435px;

  margin-top: 27px;

  padding-top: 17px;

  display: flex;

  align-items: center;

  gap: 15px;

  border-top:

    1px solid

    #acd1e6;

}

.footer-social__label {

  flex: 0 0 auto;

  color: #315b79;

  font-size: 9px;

  font-weight: 900;

  letter-spacing: 0.12em;

  white-space: nowrap;

}

.footer-social__link {

  min-width: 0;

  display: flex;

  align-items: center;

  gap: 7px;

  color:

    #3b6787 !important;

  transition:

    opacity 0.2s ease;

}

.footer-social__link:hover {

  opacity: 0.75;

}

.footer-social__icon {

  width: 27px;

  height: 27px;

  flex: 0 0 27px;

  display: flex;

  align-items: center;

  justify-content: center;

}

.footer-social__icon svg {

  width: 100%;

  height: 100%;

}

.footer-social__copy {

  min-width: 0;

  display: flex;

  flex-direction: column;

  gap: 1px;

}

.footer-social__copy strong {

  color:

    #2674ad;

  font-size: 10px;

  font-weight: 800;

  line-height: 1.3;

}

.footer-social__copy small {

  color:

    #6f8798;

  font-size: 8px;

  font-weight: 600;

  white-space: nowrap;

}

.footer-social__divider {

  width: 1px;

  height: 31px;

  flex: 0 0 1px;

  background:

    #9ec3da;

}

/* INSTAGRAM */

.footer-social__icon--instagram {

  color:

    #d33c83;

}

.footer-social__icon--instagram svg {

  fill: none;

  stroke: currentColor;

  stroke-width: 1.8;

}

.footer-social__dot {

  fill: currentColor;

  stroke: none;

}

/* YOUTUBE */

.footer-social__icon--youtube {

  color:

    #e02828;

}

.footer-social__icon--youtube svg {

  fill: currentColor;

}

.footer-social__icon--youtube path {

  fill: #ffffff;

}

/* =========================================================

   FOOTER NAV

========================================================= */

.footer-nav {

  position: relative;

  z-index: 4;

}

/*

   各ナビの左側縦線

*/

.footer-nav::before {

  content: "";

  position: absolute;

  top: 0;

  left: -17px;

  width: 1px;

  height: 100%;

  background:

    var(--ken-footer-border);

}

/*

   GUIDEとCONTACTの間だけ

   下まで線を伸ばさない

*/

.footer-nav--contact::before {

  height: 285px;

}

.footer-nav__heading {

  margin-bottom: 16px;

}

.footer-nav__heading > span {

  display: block;

  margin-bottom: 7px;

  color:

    #3591d1;

  font-size: 9px;

  font-weight: 900;

  letter-spacing: 0.18em;

}

.footer-nav__heading h2 {

  margin: 0;

  color:

    var(--ken-footer-blue-dark);

  font-size: 17px;

  font-weight: 900;

  line-height: 1.45;

  white-space: nowrap;

}

.footer-nav__list {

  margin: 0;

  padding: 0;

  list-style: none;

}

.footer-nav__list li {

  border-top:

    1px solid

    rgba(157, 193, 215, 0.42);

}

.footer-nav__list li:last-child {

  border-bottom:

    1px solid

    rgba(157, 193, 215, 0.42);

}

.footer-nav__list a {

  min-height: 44px;

  padding:

    0 3px;

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 8px;

  color:

    #365b77 !important;

  font-size: 11px;

  font-weight: 700;

  line-height: 1.5;

  transition:

    color 0.2s ease,

    padding-left 0.2s ease;

}

.footer-nav__list a span:first-child {

  min-width: 0;

}

.footer-nav__list a span:last-child {

  flex: 0 0 auto;

  color:

    #287eb8;

  font-size: 17px;

  transition:

    transform 0.2s ease;

}

.footer-nav__list a:hover {

  padding-left: 7px;

  color:

    var(--ken-footer-blue) !important;

}

.footer-nav__list a:hover

span:last-child {

  transform:

    translateX(3px);

}

/* =========================================================

   RIGHT BOTTOM HOUSE IMAGE

========================================================= */

.footer-main__house {

  position: absolute;

  z-index: 1;

  right: -8px;

  bottom: 0;

  width:

    min(

      520px,

      38vw

    );

  pointer-events: none;

}

.footer-main__house img {

  width: 100%;

  height: auto;

  display: block;

  object-fit: contain;

  object-position:

    right bottom;

}

/* =========================================================

   RIGHT BOTTOM MINCHO MESSAGE

========================================================= */

.footer-message {

  position: absolute;

  z-index: 2;

  right: 40px;

  bottom: 94px;

  width: 450px;

  pointer-events: none;

}

.footer-message__main {

  position: absolute;

  left: 0;

  bottom: 35px;

  margin: 0;

  color: #2f69a5;

  font-family:

    var(--ken-footer-mincho);

  font-size: 18px;

  font-weight: 600;

  line-height: 1.85;

  letter-spacing: 0.08em;

  transform:

    rotate(-4deg);

}

.footer-message__main::after {

  content: "";

  position: absolute;

  left: -4px;

  bottom: -8px;

  width: 180px;

  height: 26px;

  border-bottom:

    1px solid

    #71a4c9;

  border-radius:

    0 0 50% 50%;

  transform:

    rotate(-4deg);

}

.footer-message__sub {

  position: absolute;

  right: 0;

  bottom: 0;

  margin: 0;

  color: #507eaa;

  font-family:

    var(--ken-footer-mincho);

  font-size: 11px;

  font-weight: 600;

  line-height: 1.85;

  letter-spacing: 0.10em;

}

/* =========================================================

   BOTTOM

========================================================= */

.footer-bottom {

  position: relative;

  z-index: 10;

  background:

    linear-gradient(

      90deg,

      #0969af 0%,

      #075da8 48%,

      #0870b9 100%

    );

}

.footer-bottom__inner {

  width:

    min(

      1500px,

      calc(100% - 100px)

    );

  min-height: 72px;

  margin: 0 auto;

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 30px;

}

.footer-bottom__links {

  display: flex;

  align-items: center;

  gap: 18px;

}

.footer-bottom__links a {

  color:

    rgba(255,255,255,0.92) !important;

  font-size: 10px;

  font-weight: 600;

  transition:

    opacity 0.2s ease;

}

.footer-bottom__links a:hover {

  opacity: 0.70;

}

.footer-bottom__links > span {

  width: 1px;

  height: 13px;

  background:

    rgba(255,255,255,0.38);

}

.footer-bottom__copyright {

  margin: 0;

  color:

    rgba(255,255,255,0.90);

  font-size: 10px;

  white-space: nowrap;

}

/* =========================================================

   PC / SP UTILITIES

========================================================= */

.sp-only {

  display: none;

}

/* =========================================================

   RESPONSIVE 1350

========================================================= */

@media (max-width: 1350px) {

  .footer-cta__panel {

    width:

      calc(100% - 200px);

    margin-right: 160px;

  }

  .footer-cta__title {

    font-size: 17px;

  }

  .footer-cta__button {

    width: 290px;

    flex-basis: 290px;

  }

  .footer-main__inner {

    width:

      calc(100% - 60px);

    grid-template-columns:

      minmax(310px, 1.25fr)

      minmax(175px, .82fr)

      minmax(175px, .82fr)

      minmax(205px, .95fr)

      minmax(170px, .75fr);

    gap: 28px;

  }

}

/* =========================================================

   RESPONSIVE 1100

========================================================= */

@media (max-width: 1100px) {

  .footer-cta__inner {

    width:

      calc(100% - 50px);

  }

  .footer-cta__panel {

    width:

      calc(100% - 150px);

    margin-right: 135px;

    padding-left: 32px;

    gap: 25px;

  }

  .footer-cta__title {

    white-space: normal;

  }

  .footer-cta__button {

    width: 250px;

    flex-basis: 250px;

    min-height: 65px;

  }

  .footer-cta__button-text {

    font-size: 12px;

  }

  .footer-main__inner {

    min-height: 760px;

    grid-template-columns:

      repeat(

        4,

        minmax(0, 1fr)

      );

    padding-bottom: 220px;

  }

  .footer-brand {

    grid-column:

      1 / -1;

    padding-right: 0;

    padding-bottom: 35px;

    border-right: 0;

    border-bottom:

      1px solid

      var(--ken-footer-border);

  }

  .footer-nav::before {

    display: none;

  }

  .footer-main__house {

    width: 450px;

  }

}

/* =========================================================

   RESPONSIVE 760

========================================================= */

@media (max-width: 760px) {

  .pc-only {

    display: none;

  }

  .sp-only {

    display: block;

  }

  /* =====================================================

     CTA MOBILE

  ====================================================== */

  .footer-cta {

    min-height: 350px;

    align-items: flex-start;

    background-position:

      center bottom;

    background-size:

      auto 100%;

  }

  .footer-cta__inner {

    width:

      calc(100% - 30px);

    min-height: 350px;

    padding:

      35px 0 70px;

  }

  .footer-cta__panel {

    width: 100%;

    min-height: 0;

    margin: 0;

    padding:

      23px 19px;

    flex-direction: column;

    align-items: stretch;

    gap: 20px;

    border-radius: 17px;

  }

  .footer-cta__title {

    font-size: 17px;

    white-space: normal;

    line-height: 1.65;

  }

  .footer-cta__lead {

    font-size: 10px;

  }

  .footer-cta__button {

    width: 100%;

    min-height: 61px;

    flex-basis: auto;

    padding:

      0 20px;

  }

  .footer-cta__button-text {

    font-size: 13px;

  }

  .footer-cta__note {

    top: auto;

    right: 5px;

    bottom: 17px;

    width: 105px;

    font-size: 9px;

    line-height: 1.7;

  }

  /* =====================================================

     MAIN MOBILE

  ====================================================== */

  .footer-main__inner {

    width:

      calc(100% - 36px);

    min-height: auto;

    padding:

      42px 0 190px;

    display: block;

  }

  .footer-brand {

    margin-bottom: 38px;

    padding-bottom: 32px;

  }

  .footer-brand__eyebrow {

    font-size: 9px;

  }

  .footer-brand__eyebrow i {

    flex: 1;

    max-width: 90px;

  }

  .footer-brand__logo img {

    height: 53px;

  }

  .footer-brand__catch {

    font-size: 15px;

  }

  .footer-brand__description {

    font-size: 11px;

  }

  .footer-brand__phone-content strong {

    font-size: 24px;

  }

  .footer-social {

    flex-wrap: wrap;

    gap: 12px;

  }

  .footer-social__copy small {

    display: none;

  }

  /* =====================================================

     NAV MOBILE

  ====================================================== */

  .footer-nav {

    margin-top: 32px;

    padding-top: 24px;

    border-top:

      1px solid

      var(--ken-footer-border);

  }

  .footer-nav:first-of-type {

    margin-top: 0;

  }

  .footer-nav::before {

    display: none;

  }

  .footer-nav__heading h2 {

    font-size: 16px;

  }

  .footer-nav__list a {

    min-height: 49px;

    font-size: 12px;

  }

  /* =====================================================

     HOUSE / COPY MOBILE

  ====================================================== */

  .footer-main__house {

    right: -20px;

    width:

      min(

        390px,

        100vw

      );

  }

  .footer-message {

    right: 8px;

    bottom: 92px;

    width: 330px;

  }

  .footer-message__main {

    left: 0;

    font-size: 13px;

  }

  .footer-message__main::after {

    width: 125px;

  }

  .footer-message__sub {

    font-size: 8px;

  }

  /* =====================================================

     BOTTOM MOBILE

  ====================================================== */

  .footer-bottom__inner {

    width:

      calc(100% - 36px);

    min-height: 110px;

    padding:

      18px 0;

    flex-direction: column;

    align-items: flex-start;

    justify-content: center;

    gap: 14px;

  }

  .footer-bottom__links {

    gap:

      10px 12px;

    flex-wrap: wrap;

  }

  .footer-bottom__links a {

    font-size: 9px;

  }

  .footer-bottom__copyright {

    font-size: 9px;

  }

}