@import url("https://fonts.googleapis.com/css2?family=Yomogi&family=Zen+Kurenaido&display=swap");

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

   KENNET  HEADER

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

.header {

  --ken-blue: #075da8;

  --ken-blue-dark: #064a89;

  --ken-blue-deep: #053c70;

  --ken-sky: #eaf6fd;

  --ken-sky-light: #f5fbfe;

  --ken-bg: #f7fbfd;

  --ken-text: #143955;

  --ken-text-soft: #617b90;

  --ken-border: #dceaf3;

  --ken-handover: #e89132;

  --ken-building: #42905f;

  --ken-leak: #176aab;

  --ken-life: #a4425d;

  --ken-handwritten: "Noto Sans JP" "Shippori Mincho", "Yu Mincho", "YuMincho", cursive;

  --ken-note-font: "Noto Sans JP" "Shippori Mincho", "Yu Mincho", "YuMincho", cursive;

  position: sticky;

  top: 0;

  z-index: 9999;

  width: 100%;

  background: #fff;

  font-family:

    "Noto Sans JP",

    "Yu Gothic",

    "YuGothic",

    "Hiragino Kaku Gothic ProN",

    sans-serif;

  color: var(--ken-text);

  box-shadow:

    0 1px 0 rgba(5, 71, 120, 0.06);

  transition:

    box-shadow 0.3s ease;

}

.header *,

.header *::before,

.header *::after {

  box-sizing: border-box;

}

.header a {

  color: inherit;

  text-decoration: none;

}

.header button {

  font-family: inherit;

}

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

   UTILITY

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

.header__utility {

  height: 50px;

  background:

    linear-gradient(

      90deg,

      #f8fcfe 0%,

      #eef8fd 48%,

      #f9fcfe 100%

    );

  border-bottom: 1px solid #e7f1f6;

  overflow: hidden;

  transition:

    height 0.3s ease,

    opacity 0.3s ease;

}

.header__utility-inner {

  width: min(1560px, calc(100% - 80px));

  height: 100%;

  margin: 0 auto;

  display: flex;

  align-items: center;

  justify-content: space-between;

}

.header__utility-left,

.header__utility-right {

  display: flex;

  align-items: center;

}

.header__utility-left {

  gap: 24px;

}

.header__utility-right {

  gap: 18px;

}

.header__utility-message {

  margin: 0;

  color: #53758e;

  font-size: 11px;

  font-weight: 700;

  letter-spacing: 0.05em;

  white-space: nowrap;

}

.header__utility-en {

  color: var(--ken-blue);

  font-size: 10px;

  font-weight: 800;

  letter-spacing: 0.19em;

  white-space: nowrap;

}

.header__utility-divider {

  width: 1px;

  height: 19px;

  flex: 0 0 auto;

  background: #ccdde8;

}

.header__phone {

  display: flex;

  align-items: center;

  gap: 8px;

  color: var(--ken-blue-dark);

  font-size: 17px;

  font-weight: 800;

  letter-spacing: 0.04em;

  white-space: nowrap;

}

.header__phone-icon {

  width: 19px;

  height: 19px;

  display: flex;

}

.header__phone-icon svg {

  width: 100%;

  height: 100%;

  fill: currentColor;

}

.header__hours {

  color: #7c93a5;

  font-size: 10px;

  white-space: nowrap;

}

.header__utility-link {

  display: flex;

  align-items: center;

  gap: 6px;

  color: #527189;

  font-size: 11px;

  font-weight: 700;

  white-space: nowrap;

  transition:

    color 0.2s ease;

}

.header__utility-link:hover {

  color: var(--ken-blue);

}

.header__utility-link-icon {

  color: var(--ken-blue);

  font-size: 14px;

}

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

   MAIN

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

.header__main {

  position: relative;

  background: #fff;

  border-bottom: 1px solid #dceaf2;

}

.header__main-inner {

  position: relative;

  z-index: 20;

  width: min(1560px, calc(100% - 80px));

  min-height: 108px;

  margin: 0 auto;

  display: flex;

  align-items: center;

  transition:

    min-height 0.3s ease;

}

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

   BRAND

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

.header__brand {

  flex: 0 0 auto;

  display: flex;

  align-items: center;

}

.header__logo {

  display: block;

  width: auto;

  height: 50px;

  max-width: 290px;

  object-fit: contain;

  transition:

    height 0.3s ease;

}

.header__brand-divider {

  width: 1px;

  height: 46px;

  margin: 0 20px;

  background: #cbd9e2;

}

.header__brand-copy {

  min-width: 145px;

  display: flex;

  flex-direction: column;

  gap: 4px;

  color: #7990a2;

  font-size: 8px;

  font-weight: 800;

  line-height: 1.35;

  letter-spacing: 0.17em;

  white-space: nowrap;

}

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

   NAV

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

.nav {

  height: 108px;

  margin-left: auto;

  display: flex;

  align-items: stretch;

  transition:

    height 0.3s ease;

}

.nav__item {

  position: relative;

  display: flex;

  align-items: stretch;

}

.nav__link {

  position: relative;

  min-width: 105px;

  height: 100%;

  padding: 0 17px;

  border: 0;

  background: transparent;

  display: flex;

  align-items: center;

  justify-content: center;

  gap: 11px;

  color: var(--ken-text);

  font-size: 13px;

  font-weight: 800;

  white-space: nowrap;

  cursor: pointer;

}

.nav__link::after {

  content: "";

  position: absolute;

  left: 50%;

  bottom: 0;

  width: 0;

  height: 4px;

  border-radius:

    4px 4px 0 0;

  background: var(--ken-blue);

  transform:

    translateX(-50%);

  transition:

    width 0.25s ease;

}

.nav__link:hover {

  color: var(--ken-blue);

}

.nav__link:hover::after,

.header.is-mega-open

.nav__service-trigger::after {

  width: calc(100% - 32px);

}

.nav__chevron {

  width: 7px;

  height: 7px;

  margin-top: -4px;

  border-right: 1.5px solid var(--ken-blue);

  border-bottom: 1.5px solid var(--ken-blue);

  transform: rotate(45deg);

  transition:

    transform 0.25s ease;

}

.header.is-mega-open

.nav__chevron {

  margin-top: 4px;

  transform:

    rotate(225deg);

}

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

   CONTACT

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

.header__contact {

  position: relative;

  min-width: 190px;

  min-height: 68px;

  margin-left: 65px;

  padding: 0 22px;

  display: flex;

  align-items: center;

  justify-content: center;

  gap: 10px;

  color: #fff !important;

  border-radius: 20px;

  background:

    linear-gradient(

      135deg,

      #1685ce 0%,

      #086bb7 48%,

      #07549a 100%

    );

  box-shadow:

    0 9px 20px rgba(3, 89, 160, 0.2);

  transition:

    transform 0.25s ease,

    box-shadow 0.25s ease;

}

.header__contact:hover {

  transform: translateY(-2px);

  box-shadow:

    0 13px 26px rgba(3, 89, 160, 0.26);

}

.header__contact-icon {

  width: 22px;

  height: 22px;

  display: flex;

}

.header__contact-icon svg {

  width: 100%;

  height: 100%;

  fill: none;

  stroke: currentColor;

  stroke-width: 1.7;

}

.header__contact > span:nth-child(2) {

  font-size: 14px;

  font-weight: 800;

}

.header__contact-arrow {

  font-size: 14px;

}

.header__contact-note {

  position: absolute;

  top: 14px;

  right: -148px;

  width: 132px;

  display: flex;

  align-items: center;

  justify-content: center;

  color: #176da9;

  text-align: center;

  transform:

    rotate(-6deg);

}

.header__contact-note > span {

  position: relative;

  display: block;

  padding: 10px 6px;

  font-family:

    var(--ken-note-font);

  font-size: 13px;

  font-weight: bold;

  line-height: 1.7;

  letter-spacing: 0.02em;

}

.header__contact-note::before,

.header__contact-note::after {

  content: "";

  position: absolute;

  border: 2px solid transparent;

  pointer-events: none;

}

.header__contact-note::before {

  top: -6px;

  left: -10px;

  width: 58px;

  height: 42px;

  border-top-color: #9cc7e4;

  border-left-color: #9cc7e4;

  border-radius: 30px 0 0 0;

  transform: rotate(-16deg);

}

.header__contact-note::after {

  right: -9px;

  bottom: -5px;

  width: 56px;

  height: 34px;

  border-right-color: #9cc7e4;

  border-bottom-color: #9cc7e4;

  border-radius: 0 0 28px 0;

  transform: rotate(-10deg);

}

.header__contact-note > span::before,

.header__contact-note > span::after {

  content: "";

  position: absolute;

  width: 8px;

  height: 8px;

  border-radius: 50%;

  background: #c9e5f6;

}

.header__contact-note > span::before {

  top: 0;

  right: 6px;

}

.header__contact-note > span::after {

  bottom: 2px;

  left: 8px;

  width: 6px;

  height: 6px;

}

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

   MEGA

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

.mega {

  position: absolute;

  top: 100%;

  left: 50%;

  width:

    min(1940px, calc(100vw - 40px));

  padding: 30px;

  visibility: hidden;

  opacity: 0;

  background:

    linear-gradient(

      135deg,

      #f8fcfe 0%,

      #ffffff 55%,

      #f3f9fd 100%

    );

  border:

    1px solid #e0edf4;

  border-radius:

    0 0 22px 22px;

  box-shadow:

    0 22px 55px

    rgba(12, 68, 105, 0.16);

  transform:

    translate(-50%, 10px);

  pointer-events: none;

  transition:

    opacity 0.25s ease,

    visibility 0.25s ease,

    transform 0.3s ease;

}

.header.is-mega-open

.mega {

  visibility: visible;

  opacity: 1;

  transform:

    translate(-50%, 0);

  pointer-events: auto;

}

.mega__inner {

  display: grid;

  grid-template-columns:

    minmax(230px, 0.75fr)

    minmax(720px, 2.5fr)

    minmax(235px, 0.82fr)

    minmax(245px, 0.8fr);

  gap: 26px;

}

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

   MEGA INTRO

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

.mega__intro {

  position: relative;

  min-height: 400px;

  padding: 10px 18px 5px;

}

.mega__eyebrow {

  display: block;

  margin-bottom: 25px;

  color: var(--ken-blue);

  font-size: 9px;

  font-weight: 900;

  letter-spacing: 0.25em;

}

.mega__catch {

  margin: 0 0 24px;

  color: #184f79;

  font-family:

    var(--ken-handwritten);

  font-size: 23px;

  font-weight: bold;

  line-height: 1.72;

  letter-spacing: 0.05em;

  text-shadow:

    0 1px 0 rgba(255, 255, 255, 0.78);

  transform:

    rotate(-4deg);

}

.mega__catch span {

  color: #0d5d9b;

}

.mega__lead {

  max-width: 205px;

  margin: 0;

  color: #526f86;

  font-size: 11px;

  font-weight: 600;

  line-height: 2;

}

.mega__illustration {

  position: relative;

  max-width: 236px;

  height: 172px;

  display: flex;

  align-items: flex-end;

  opacity: 1;

}

.mega__illustration-image {

  width: 100%;

  height: 100%;

  display: block;

  object-fit: contain;

  object-position: left bottom;

}

.mega__all {

  position: absolute;

  left: 15px;

  bottom: 0;

  min-width: 190px;

  min-height: 46px;

  padding: 0 18px;

  display: flex;

  align-items: center;

  justify-content: space-between;

  background: #fff;

  border:

    1px solid #acd4eb;

  border-radius: 30px;

  color: #155f96 !important;

  font-size: 11px;

  font-weight: 800;

  transition:

    background 0.2s ease,

    border-color 0.2s ease;

}

.mega__all:hover {

  background: #edf8fd;

  border-color: #6eb3dc;

}

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

   MAIN SERVICES

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

.mega__services-heading {

  min-height: 40px;

  margin-bottom: 18px;

  display: flex;

  align-items: center;

  gap: 28px;

}

.mega__services-heading h2 {

  margin: 0;

  color: #135486;

  font-size: 16px;

  font-weight: 900;

}

.mega__services-heading p {

  margin: 0;

  color: #6e8598;

  font-size: 11px;

  font-weight: 600;

}

.mega__service-grid {

  display: grid;

  grid-template-columns:

    repeat(4, minmax(0, 1fr));

  gap: 16px;

}

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

   CARD

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

.service-card {

  position: relative;

  min-height: 330px;

  overflow: hidden;

  background: #fff;

  border:

    1px solid #e3edf3;

  border-radius: 10px;

  box-shadow:

    0 7px 20px

    rgba(25, 84, 122, 0.06);

  transition:

    transform 0.25s ease,

    box-shadow 0.25s ease;

}

.service-card:hover {

  transform:

    translateY(-4px);

  box-shadow:

    0 14px 28px

    rgba(25, 84, 122, 0.14);

}

.service-card__image {

  height: 145px;

  overflow: hidden;

}

.service-card__image img {

  width: 100%;

  height: 100%;

  display: block;

  object-fit: cover;

  transition:

    transform 0.5s ease;

}

.service-card:hover

.service-card__image img {

  transform:

    scale(1.04);

}

.service-card__icon {

  position: absolute;

  top: 120px;

  left: 16px;

  width: 47px;

  height: 47px;

  display: flex;

  align-items: center;

  justify-content: center;

  border:

    4px solid #fff;

  border-radius: 50%;

  color: #fff;

  box-shadow:

    0 4px 12px

    rgba(10, 71, 110, 0.12);

}

.service-card__icon svg {

  width: 25px;

  height: 25px;

  fill: none;

  stroke: currentColor;

  stroke-width: 1.8;

  stroke-linecap: round;

  stroke-linejoin: round;

}

.service-card__body {

  padding:

    38px 16px 30px;

}

.service-card__body h3 {

  margin:

    0 0 13px;

  font-size: 13px;

  font-weight: 900;

  line-height: 1.55;

}

.service-card__body p {

  margin: 0;

  color: #677f91;

  font-size: 12px;

  font-weight: 600;

  line-height: 1.8;

}

.service-card__arrow {

  position: absolute;

  right: 17px;

  bottom: 14px;

  font-size: 18px;

  transition:

    transform 0.2s ease;

}

.service-card:hover

.service-card__arrow {

  transform:

    translateX(4px);

}

/* SERVICE COLORS */

.service-card--handover

.service-card__icon {

  background:

    var(--ken-handover);

}

.service-card--handover

.service-card__body h3,

.service-card--handover

.service-card__arrow {

  color:

    var(--ken-handover);

}

.service-card--building

.service-card__icon {

  background:

    var(--ken-building);

}

.service-card--building

.service-card__body h3,

.service-card--building

.service-card__arrow {

  color:

    var(--ken-building);

}

.service-card--leak

.service-card__icon {

  background:

    var(--ken-leak);

}

.service-card--leak

.service-card__body h3,

.service-card--leak

.service-card__arrow {

  color:

    var(--ken-leak);

}

.service-card--life

.service-card__icon {

  background:

    var(--ken-life);

}

.service-card--life

.service-card__body h3,

.service-card--life

.service-card__arrow {

  color:

    var(--ken-life);

}

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

   OTHER SERVICES

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

.mega__other {

  padding-left: 22px;

  border-left:

    1px solid #e1ecf2;

}

.mega__other h2 {

  margin:

    6px 0 20px;

  color: #14568a;

  font-size: 15px;

  font-weight: 900;

}

/* 添付イメージのように、5項目をひとつの白いパネルとしてまとめる */

.mega__other-list {

  overflow: hidden;

  background:

    rgba(255, 255, 255, 0.96);

  border:

    1px solid #e3edf3;

  border-radius: 10px;

  box-shadow:

    0 6px 18px

    rgba(21, 79, 116, 0.05);

}

.mega__other-list a {

  min-height: 48px;

  padding: 0 14px;

  display: flex;

  align-items: center;

  justify-content: space-between;

  border-bottom:

    1px solid #e0eaf0;

  color: #315b79;

  font-size: 11px;

  font-weight: 800;

  transition:

    background 0.2s ease,

    padding 0.2s ease,

    color 0.2s ease;

}

.mega__other-list a:last-child {

  border-bottom: 0;

}

.mega__other-list a:hover {

  padding-left: 18px;

  background:

    #f3fafe;

  color:

    var(--ken-blue);

}

/* CONSULT */

.mega__consult {

  min-height: 100px;

  margin-top: 22px;

  padding: 16px 15px;

  display: flex;

  align-items: flex-start;

  gap: 12px;

  background:

    linear-gradient(

      135deg,

      #f4fbff 0%,

      #edf8fd 100%

    );

  border:

    1px solid #d9edf8;

  border-radius: 12px;

  box-shadow:

    0 6px 18px

    rgba(16, 93, 142, 0.04);

  transition:

    transform 0.2s ease,

    box-shadow 0.2s ease;

}

.mega__consult:hover {

  transform:

    translateY(-2px);

  box-shadow:

    0 10px 22px

    rgba(16, 93, 142, 0.09);

}

.mega__consult-icon {

  width: 30px;

  height: 30px;

  flex: 0 0 30px;

  display: flex;

  align-items: center;

  justify-content: center;

  color:

    var(--ken-blue);

}

.mega__consult-icon svg {

  width: 100%;

  height: 100%;

  fill: none;

  stroke: currentColor;

  stroke-width: 2;

  stroke-linecap: round;

  stroke-linejoin: round;

}

.mega__consult-copy {

  min-width: 0;

  display: flex;

  flex-direction: column;

  gap: 5px;

}

.mega__consult-copy strong {

  color:

    #185b89;

  font-size: 10px;

  font-weight: 900;

  line-height: 1.55;

}

.mega__consult-copy small {

  color:

    #7590a2;

  font-size: 9px;

  line-height: 1.55;

}

.mega__consult-copy b {

  margin-top: 5px;

  color:

    var(--ken-blue);

  font-size: 10px;

}

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

   PERSONAL PANEL

   添付イメージ右端のレイアウトへ寄せる

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

.mega__personal {

  position: relative;

  min-height: 460px;

  /* メガメニュー本体の30px paddingを右端だけ打ち消し、

     添付イメージのように上下・右端へぴったり接続 */

  margin:

    -30px -30px -30px 0;

  overflow: hidden;

  border-radius:

    0 12px 21px 0;

  background:

    #f4f8f6;

}

.mega__personal-image {

  position: absolute;

  inset:

    0 0 0 0;

  overflow: hidden;

}

.mega__personal-image::after {

  content: "";

  position: absolute;

  inset: 0;

  background:

    linear-gradient(

      180deg,

      rgba(255, 255, 255, 0.02) 0%,

      rgba(255, 255, 255, 0.00) 48%,

      rgba(245, 250, 252, 0.10) 66%,

      rgba(255, 255, 255, 0.42) 100%

    );

  pointer-events: none;

}

.mega__personal-image img {

  width: 100%;

  height: 100%;

  display: block;

  object-fit: cover;

  object-position: center center;

}

.mega__personal-message {

  position: absolute;

  z-index: 2;

  top: 20px;

  left: 50%;

  width: 178px;

  height: 178px;

  padding:

    22px 20px 31px;

  display: flex;

  align-items: center;

  justify-content: center;

  border-radius: 50%;

  background:

    rgba(255, 253, 247, 0.96);

  box-shadow:

    0 7px 22px

    rgba(29, 82, 109, 0.08);

  color:

    #205b85;

  font-family:

    var(--ken-handwritten);

  font-size: 15px;

  font-weight: bold;

  line-height: 1.88;

  text-align: center;

  letter-spacing: 0.03em;

  transform:

    translateX(-50%)

    rotate(-3deg);

}

.mega__personal-message > span {

  display: block;

}

.mega__personal-house {

  position: absolute;

  right: 22px;

  bottom: 18px;

  width: 27px;

  height: 27px;

  fill: none;

  stroke: currentColor;

  stroke-width: 1.8;

  stroke-linecap: round;

  stroke-linejoin: round;

}

.mega__personal-list {

  position: absolute;

  z-index: 3;

  right: 0;

  bottom: 0;

  left: 0;

  margin: 0;

  padding:

    10px 16px 13px;

  list-style: none;

  background:

    rgba(255, 255, 255, 0.96);

  border-radius:

    28px 28px 0 0;

  box-shadow:

    0 -7px 22px

    rgba(35, 85, 113, 0.06);

  backdrop-filter:

    blur(2px);

}

.mega__personal-list li {

  position: relative;

  min-height: 39px;

  padding-left: 25px;

  display: flex;

  align-items: center;

  border-bottom:

    1px solid #e3ebed;

  color:

    #315d78;

  font-size: 10px;

  font-weight: 800;

  line-height: 1.45;

}

.mega__personal-list li:last-child {

  border-bottom: 0;

}

.mega__personal-list li::before {

  content: "✓";

  position: absolute;

  left: 4px;

  color:

    var(--ken-blue);

  font-size: 13px;

  font-weight: 900;

}

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

   SCROLLED

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

@media (min-width: 1180px) {

  .header.is-scrolled {

    box-shadow:

      0 7px 25px

      rgba(21, 73, 108, 0.1);

  }

  .header.is-scrolled

  .header__utility {

    height: 0;

    opacity: 0;

  }

  .header.is-scrolled

  .header__main-inner {

    min-height: 78px;

  }

  .header.is-scrolled

  .nav {

    height: 78px;
    padding-right: 20px;

  }

  .header.is-scrolled

  .header__logo {

    height: 41px;

  }

  .header.is-scrolled

  .header__contact {

    min-height: 54px;

    border-radius: 17px;

  }

  .header.is-scrolled

  .header__contact-note {

    display: none;

  }

}

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

   MOBILE TOGGLE

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

.mobile-toggle {

  display: none;

  width: 46px;

  height: 46px;

  margin-left: 9px;

  padding: 0;

  border:

    1px solid #d6e7f1;

  border-radius: 12px;

  background: #f7fbfe;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  gap: 5px;

}

.mobile-toggle span {

  width: 18px;

  height: 1.5px;

  background:

    var(--ken-blue);

  transition:

    transform 0.25s ease,

    opacity 0.25s ease;

}

.header.is-mobile-open

.mobile-toggle span:nth-child(1) {

  transform:

    translateY(6.5px)

    rotate(45deg);

}

.header.is-mobile-open

.mobile-toggle span:nth-child(2) {

  opacity: 0;

}

.header.is-mobile-open

.mobile-toggle span:nth-child(3) {

  transform:

    translateY(-6.5px)

    rotate(-45deg);

}

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

   MOBILE MENU BASE

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

.mobile-menu {

  display: none;

}

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

   TABLET / MOBILE

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

@media (max-width: 1179px) {

  .header__utility {

    display: none;

  }

  .header__main-inner {

    width:

      calc(100% - 32px);

    min-height: 72px;

  }

  .header__logo {

    height: 40px;

    max-width: 230px;

  }

  .header__brand-divider,

  .header__brand-copy,

  .nav,

  .header__contact-note {

    display: none;

  }

  .header__contact {

    min-width: 120px;

    min-height: 46px;

    margin-left: auto;

    padding: 0 14px;

    border-radius: 14px;

  }

  .header__contact > span:nth-child(2) {

    font-size: 11px;

  }

  .header__contact-icon {

    width: 17px;

    height: 17px;

  }

  .mobile-toggle {

    display: flex;

  }

  .mega {

    display: none;

  }

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

     MOBILE MENU

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

  .mobile-menu {

    position: absolute;

    top: 100%;

    left: 0;

    width: 100%;

    max-height:

      calc(100vh - 72px);

    display: block;

    overflow-y: auto;

    visibility: hidden;

    opacity: 0;

    background:

      #fff;

    border-top:

      1px solid #e1edf4;

    box-shadow:

      0 22px 40px

      rgba(13, 63, 98, 0.15);

    transform:

      translateY(-8px);

    pointer-events: none;

    transition:

      opacity 0.25s ease,

      visibility 0.25s ease,

      transform 0.25s ease;

  }

  .header.is-mobile-open

  .mobile-menu {

    visibility: visible;

    opacity: 1;

    transform:

      translateY(0);

    pointer-events: auto;

  }

  .mobile-menu__inner {

    width:

      min(700px, calc(100% - 32px));

    margin: 0 auto;

    padding:

      12px 0 30px;

  }

  .mobile-menu__inner

  > a:not(.mobile-menu__contact),

  .mobile-menu__service-trigger {

    width: 100%;

    min-height: 60px;

    padding:

      0 5px;

    border: 0;

    border-bottom:

      1px solid #e2edf3;

    background:

      transparent;

    display: flex;

    align-items: center;

    justify-content: space-between;

    color:

      var(--ken-text);

    font-size: 13px;

    font-weight: 800;

    text-align: left;

  }

  .mobile-menu__service-trigger {

    cursor: pointer;

  }

  .mobile-menu__plus {

    position: relative;

    width: 15px;

    height: 15px;

  }

  .mobile-menu__plus::before,

  .mobile-menu__plus::after {

    content: "";

    position: absolute;

    top: 50%;

    left: 50%;

    background:

      var(--ken-blue);

    transform:

      translate(-50%, -50%);

  }

  .mobile-menu__plus::before {

    width: 15px;

    height: 1px;

  }

  .mobile-menu__plus::after {

    width: 1px;

    height: 15px;

    transition:

      opacity 0.2s ease;

  }

  .mobile-menu__group.is-open

  .mobile-menu__plus::after {

    opacity: 0;

  }

  .mobile-menu__service-panel {

    max-height: 0;

    overflow: hidden;

    background:

      #f3f9fd;

    border-radius:

      0 0 12px 12px;

    transition:

      max-height 0.35s ease;

  }

  .mobile-menu__group.is-open

  .mobile-menu__service-panel {

    max-height: 650px;

  }

  .mobile-menu__service-panel a {

    min-height: 48px;

    padding:

      0 15px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    border-bottom:

      1px solid #dcecf4;

    color:

      #42677f;

    font-size: 11px;

    font-weight: 700;

  }

  .mobile-menu__service-panel a:hover {

    background:

      #eaf6fc;

    color:

      var(--ken-blue);

  }

  .mobile-menu__contact {

    min-height: 58px;

    margin-top: 20px;

    padding: 0 20px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    color: #fff !important;

    border-radius: 14px;

    background:

      linear-gradient(

        135deg,

        #1480c6,

        #075aa2

      );

    font-size: 13px;

    font-weight: 800;

  }

  .mobile-menu__utility {

    margin-top: 10px;

    display: grid;

    grid-template-columns:

      1fr 1fr;

    gap: 8px;

  }

  .mobile-menu__utility a {

    min-height: 48px;

    display: flex;

    align-items: center;

    justify-content: center;

    background:

      #f4f9fc;

    border:

      1px solid #dae9f2;

    border-radius: 10px;

    color:

      #42677f;

    font-size: 11px;

    font-weight: 800;

  }

}

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

   SMALL MOBILE

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

@media (max-width: 600px) {

  .header__main-inner {

    width:

      calc(100% - 22px);

  }

  .header__logo {

    height: 34px;

    max-width: 175px;

  }

  .header__contact {

    min-width: 45px;

    width: 45px;

    height: 45px;

    padding: 0;

    border-radius: 50%;

  }

  .header__contact > span:nth-child(2),

  .header__contact-arrow {

    display: none;

  }

  .header__contact-icon {

    width: 20px;

    height: 20px;

  }

  .mobile-toggle {

    width: 45px;

    height: 45px;

  }

}

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

   ACCESSIBILITY

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

.header a:focus-visible,

.header button:focus-visible {

  outline:

    2px solid var(--ken-blue);

  outline-offset:

    3px;

}

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

  .header *,

  .header *::before,

  .header *::after {

    transition-duration:

      0.01ms !important;

    animation-duration:

      0.01ms !important;

  }

}

/* =========================================================
   2026-10 MOBILE/PC HEADER CTA COMPLETE UPDATE
   PC: 求人情報 → 事業者様へ
   MOBILE: 電話 → 事業者様へ → ハンバーガー
========================================================= */

/* PC utility buttons (common) */
.header .header__utility-link {
  min-height: 34px;
  padding: 0 13px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid transparent;
  border-radius: 9px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.025em;
  line-height: 1.2;
  white-space: nowrap;
  transition: background 0.25s ease, border-color 0.25s ease,
              box-shadow 0.25s ease, transform 0.25s ease;
}

.header .header__utility-link-icon {
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: inherit;
}

.header .header__utility-link-icon svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.header__utility-link-arrow {
  margin-left: 3px;
  font-size: 12px;
  line-height: 1;
  transition: transform 0.25s ease;
}

.header__utility-link:hover .header__utility-link-arrow {
  transform: translate(2px, -2px);
}

/* 求人情報：淡いブルー */
.header .header__utility-link--recruit {
  color: #175d96;
  background: #eaf3fa;
  border-color: #b7d4e8;
  box-shadow: 0 2px 5px rgba(7, 93, 168, 0.04);
}

.header .header__utility-link--recruit:hover {
  color: #07549a;
  background: #dcecf8;
  border-color: #8bbbdc;
  box-shadow: 0 4px 10px rgba(7, 93, 168, 0.12);
  transform: translateY(-2px);
}

/* 事業者様へ：オレンジ */
.header .header__utility-link--business {
  color: #fff;
  background: #e98127;
  border-color: #e98127;
  box-shadow: 0 3px 9px rgba(233, 129, 39, 0.17);
}

.header .header__utility-link--business:hover {
  color: #fff;
  background: #d97019;
  border-color: #d97019;
  box-shadow: 0 5px 13px rgba(217, 112, 25, 0.25);
  transform: translateY(-2px);
}

/* 画面幅の狭いPCでは英語表記を省略してボタンの収まりを確保 */
@media (min-width: 1180px) and (max-width: 1370px) {
  .header__utility-left > .header__utility-divider,
  .header__utility-en {
    display: none;
  }
  .header__utility-right { gap: 12px; }
}

/* PCでは追加したスマホ用リンクを表示しない */
.header__mobile-phone,
.header__mobile-business {
  display: none;
}

/* 1179px以下では既存のメールボタンを電話 + 事業者ページに変更 */
@media (max-width: 1179px) {
  .header .header__contact { display: none; }

  .header__mobile-phone {
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    margin-left: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #bfdbea;
    border-radius: 12px;
    background: #eaf4fb;
    color: #075da8 !important;
    transition: background 0.25s ease, transform 0.25s ease;
  }

  .header__mobile-phone svg {
    width: 20px;
    height: 20px;
    fill: currentColor;
  }

  .header__mobile-phone:hover {
    background: #d8ebf8;
    transform: translateY(-2px);
  }

  .header__mobile-business {
    min-width: 105px;
    height: 44px;
    flex: 0 0 auto;
    margin-left: 8px;
    padding: 0 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: #e98127;
    box-shadow: 0 3px 9px rgba(233, 129, 39, 0.18);
    color: #fff !important;
    font-size: 11px;
    font-weight: 800;
    white-space: nowrap;
    transition: background 0.25s ease, transform 0.25s ease,
                box-shadow 0.25s ease;
  }

  .header__mobile-business:hover {
    background: #d97019;
    box-shadow: 0 5px 13px rgba(217, 112, 25, 0.25);
    transform: translateY(-2px);
  }

  .header__mobile-business-short { display: none; }
  .mobile-toggle { margin-left: 8px; flex-shrink: 0; }
}

/* 400px前後でもロゴと3つの操作ボタンが横に収まるよう調整 */
@media (max-width: 480px) {
  .header__logo {
    height: 32px;
    max-width: 140px;
  }
  .header__mobile-business {
    min-width: 95px;
    padding: 0 9px;
  }
}

@media (max-width: 400px) {
  .header__mobile-business {
    min-width: 68px;
    height: 43px;
    margin-left: 6px;
    padding: 0 8px;
    font-size: 10px;
  }
  .header__mobile-business-full { display: none; }
  .header__mobile-business-short { display: inline; }
  .header__mobile-phone {
    width: 42px;
    height: 42px;
    flex-basis: 42px;
  }
  .header__mobile-phone svg { width: 19px; height: 19px; }
  .mobile-toggle { width: 43px; height: 43px; margin-left: 6px; }
}

@media (max-width: 360px) {
  .header__logo { height: 29px; max-width: 120px; }
  .header__mobile-business { min-width: 64px; padding: 0 7px; }
  .header__mobile-phone {
    width: 40px;
    height: 40px;
    flex-basis: 40px;
  }
  .mobile-toggle { width: 42px; height: 42px; }
}

.header .header__utility-link:focus-visible,
.header .header__mobile-business:focus-visible,
.header .header__mobile-phone:focus-visible {
  outline: 2px solid #075da8;
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .header .header__utility-link,
  .header__utility-link-arrow,
  .header__mobile-phone,
  .header__mobile-business {
    transition: none;
  }
}



/* =========================================================
   PC SCROLLED HEADER CTA
   スクロール時：事業者様へ → お問い合わせ（右側）
   通常時・スマホ時のレイアウトは維持
========================================================= */

/* 通常時は表示しない：PCのみスクロール時に表示 */
.header__scrolled-business {
  display: none;
}

@media (min-width: 1180px) {
  .header.is-scrolled
  .header__scrolled-business {
    min-width: 184px;
    min-height: 54px;
    padding: 0 18px;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border: 1px solid #e98127;
    border-radius: 17px;
    background: linear-gradient(135deg, #f39b3a 0%, #e98127 55%, #d97019 100%);
    box-shadow: 0 7px 17px rgba(233, 129, 39, 0.20);
    color: #fff !important;
    font-size: 13px;
    font-weight: 800;
    white-space: nowrap;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
  }

  .header.is-scrolled
  .header__scrolled-business:hover {
    transform: translateY(-2px);
    box-shadow: 0 11px 22px rgba(217, 112, 25, 0.28);
  }

  .header__scrolled-business-icon {
    width: 19px;
    height: 19px;
    flex: 0 0 19px;
    display: flex;
  }

  .header__scrolled-business-icon svg {
    width: 100%;
    height: 100%;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  .header__scrolled-business-arrow {
    font-size: 13px;
  }

  /* お問い合わせを右へ。右側に余白のある大画面では、
     元の手書きメッセージの位置も使って配置する */
  .header.is-scrolled
  .header__contact {
    margin-left: 12px;
    margin-right: calc(-1 * clamp(0px, (100vw - 1590px) / 2, 165px));
    flex: 0 0 auto;
  }
}

/* 中型PCではナビを少し詰め、2つのCTAを並べる */
@media (min-width: 1180px) and (max-width: 1550px) {
  .header.is-scrolled .header__brand-divider,
  .header.is-scrolled .header__brand-copy {
    display: none;
  }

  .header.is-scrolled .header__logo {
    max-width: 185px;
  }

  .header.is-scrolled .nav__link {
    min-width: 80px;
    padding: 0 9px;
    font-size: 12px;
  }

  .header.is-scrolled .header__scrolled-business {
    min-width: 155px;
    padding: 0 12px;
    gap: 7px;
    font-size: 12px;
  }

  .header.is-scrolled .header__contact {
    min-width: 160px;
    padding: 0 13px;
    gap: 7px;
  }

  .header.is-scrolled .header__contact > span:nth-child(2) {
    font-size: 12px;
  }
}

@media (min-width: 1180px) and (max-width: 1320px) {
  .header.is-scrolled .header__logo {
    max-width: 165px;
  }

  .header.is-scrolled .nav__link {
    min-width: 72px;
    padding: 0 7px;
    font-size: 11px;
  }

  .header.is-scrolled .header__scrolled-business {
    min-width: 148px;
    padding: 0 10px;
  }

  .header.is-scrolled .header__contact {
    min-width: 148px;
    padding: 0 10px;
  }
}

/* キーボード操作 */
.header .header__scrolled-business:focus-visible {
  outline: 2px solid #075da8;
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .header__scrolled-business {
    transition: none !important;
  }
}