@charset "UTF-8";

/* Proposal 1 exact: dark navy full visual banner like the proposal board */

body.company-page .page-title,
body.company-page .page-title1,
body.company-page .page-title2,
body.company-page .page-title3,
body.company-page .page-title4,
body.company-page .page-title5,
body.business-page .page-title,
body.business-page .page-title1,
body.business-page .page-title2,
body.business-page .page-title3,
body.business-page .page-title4,
body.business-page .page-title5,
body.map-page .map-page-title{
  position: relative !important;
  width: min(1120px, calc(100% - 32px)) !important;
  max-width: 1120px !important;
  min-height: clamp(190px, 19vw, 245px) !important;
  margin: 34px auto 34px !important;
  padding: clamp(54px, 6vw, 78px) min(13vw, 160px) 42px !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: center !important;
  gap: 12px !important;
  border: none !important;
  border-radius: 30px !important;
  background-color: #06142b !important;
  color: #fff !important;
  text-align: left !important;
  font-family: "Yu Gothic", "Yu Gothic UI", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif !important;
  font-size: inherit !important;
  font-weight: 900 !important;
  letter-spacing: normal !important;
  line-height: 1.1 !important;
  box-shadow:
    0 20px 44px rgba(8, 22, 42, .18),
    inset 0 -1px 0 rgba(255,255,255,.08) !important;
  isolation: isolate !important;
}

body.company-page .page-title::before,
body.company-page .page-title1::before,
body.company-page .page-title2::before,
body.company-page .page-title3::before,
body.company-page .page-title4::before,
body.company-page .page-title5::before,
body.business-page .page-title::before,
body.business-page .page-title1::before,
body.business-page .page-title2::before,
body.business-page .page-title3::before,
body.business-page .page-title4::before,
body.business-page .page-title5::before,
body.map-page .map-page-title::before{
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: -3 !important;
  pointer-events: none !important;
}

body.company-page .page-title::after,
body.company-page .page-title1::after,
body.company-page .page-title2::after,
body.company-page .page-title3::after,
body.company-page .page-title4::after,
body.company-page .page-title5::after,
body.business-page .page-title::after,
body.business-page .page-title1::after,
body.business-page .page-title2::after,
body.business-page .page-title3::after,
body.business-page .page-title4::after,
body.business-page .page-title5::after,
body.map-page .map-page-title::after{
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: -1 !important;
  pointer-events: none !important;
}

.section-hero-label{
  display: block !important;
  color: #d8bf72 !important;
  font-size: .86rem !important;
  font-weight: 900 !important;
  letter-spacing: .34em !important;
  line-height: 1 !important;
  text-shadow: 0 2px 10px rgba(0,0,0,.35) !important;
}
.section-hero-main{
  display: block !important;
  color: #fff !important;
  font-size: clamp(2.45rem, 1.8rem + 2.05vw, 4.25rem) !important;
  font-weight: 900 !important;
  letter-spacing: .10em !important;
  line-height: 1.05 !important;
  text-shadow: 0 4px 20px rgba(0,0,0,.48), 0 0 1px rgba(255,255,255,.65) !important;
}
.section-hero-line{
  display: block !important;
  width: 74px !important;
  height: 2px !important;
  margin: 2px 0 2px !important;
  border-radius: 999px !important;
  background: linear-gradient(90deg, #d4b766 0%, rgba(212,183,102,.15) 100%) !important;
  box-shadow: 0 0 16px rgba(212,183,102,.45) !important;
}
.section-hero-sub{
  display: block !important;
  color: rgba(248, 252, 255, .92) !important;
  font-size: clamp(.92rem, .78rem + .25vw, 1.08rem) !important;
  font-weight: 700 !important;
  letter-spacing: .08em !important;
  line-height: 1.8 !important;
  text-shadow: 0 3px 14px rgba(0,0,0,.45) !important;
}

/* COMPANY */
body.company-page:not(.business-page):not(.map-page) .page-title,
body.company-page:not(.business-page):not(.map-page) .page-title1,
body.company-page:not(.business-page):not(.map-page) .page-title2,
body.company-page:not(.business-page):not(.map-page) .page-title3,
body.company-page:not(.business-page):not(.map-page) .page-title4,
body.company-page:not(.business-page):not(.map-page) .page-title5{
  background:
    linear-gradient(90deg, rgba(3,13,32,.98) 0%, rgba(6,18,42,.94) 40%, rgba(9,23,46,.76) 58%, rgba(4,13,28,.62) 100%),
    url("../images/top/kaisyaan-pic.jpg") right center / auto 132% no-repeat,
    linear-gradient(135deg, #06152d 0%, #0d2345 52%, #123250 100%) !important;
}
body.company-page:not(.business-page):not(.map-page) .page-title::before,
body.company-page:not(.business-page):not(.map-page) .page-title1::before,
body.company-page:not(.business-page):not(.map-page) .page-title2::before,
body.company-page:not(.business-page):not(.map-page) .page-title3::before,
body.company-page:not(.business-page):not(.map-page) .page-title4::before,
body.company-page:not(.business-page):not(.map-page) .page-title5::before{
  background:
    linear-gradient(90deg, rgba(5,16,35,.96) 0 44%, rgba(5,16,35,.30) 72%, transparent 100%),
    radial-gradient(circle at 82% 28%, rgba(148,195,230,.18) 0 13%, transparent 14%),
    linear-gradient(115deg, transparent 0 39%, rgba(255,255,255,.09) 40% 40.6%, transparent 41% 100%),
    linear-gradient(115deg, transparent 0 70%, rgba(205,183,105,.75) 71% 71.8%, transparent 72.2% 100%) !important;
}

/* BUSINESS */
body.business-page .page-title,
body.business-page .page-title1,
body.business-page .page-title2,
body.business-page .page-title3,
body.business-page .page-title4,
body.business-page .page-title5{
  background:
    linear-gradient(90deg, rgba(3,13,30,.98) 0%, rgba(5,18,40,.95) 42%, rgba(8,20,40,.60) 62%, rgba(4,13,28,.55) 100%),
    url("../images/business/kakou-pic.jpg") right center / auto 148% no-repeat,
    linear-gradient(135deg, #061328 0%, #0a2140 52%, #0e3656 100%) !important;
}
body.business-page .page-title::before,
body.business-page .page-title1::before,
body.business-page .page-title2::before,
body.business-page .page-title3::before,
body.business-page .page-title4::before,
body.business-page .page-title5::before{
  background:
    linear-gradient(90deg, rgba(4,13,30,.96) 0 43%, rgba(4,13,30,.28) 72%, transparent 100%),
    radial-gradient(circle at 82% 28%, rgba(82,156,230,.15) 0 13%, transparent 14%),
    linear-gradient(116deg, transparent 0 35%, rgba(80,130,180,.20) 36% 51%, transparent 52% 100%),
    linear-gradient(116deg, transparent 0 58%, rgba(255,255,255,.15) 59% 59.5%, transparent 60% 100%),
    linear-gradient(116deg, transparent 0 72%, rgba(214,185,98,.88) 73% 73.8%, transparent 74.2% 100%),
    linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px) !important;
  background-size: auto, auto, auto, auto, auto, 34px 34px, 34px 34px !important;
}

/* MAP */
body.map-page .map-page-title{
  background:
    linear-gradient(90deg, rgba(3,13,30,.98) 0%, rgba(6,21,39,.94) 42%, rgba(8,29,48,.61) 62%, rgba(4,15,30,.55) 100%),
    url("../images/map/map-pic.jpg") right center / auto 145% no-repeat,
    linear-gradient(135deg, #061427 0%, #0a2b44 52%, #14576a 100%) !important;
}
body.map-page .map-page-title::before{
  background:
    linear-gradient(90deg, rgba(4,15,31,.96) 0 43%, rgba(4,15,31,.28) 72%, transparent 100%),
    radial-gradient(circle at 82% 28%, rgba(120,222,235,.16) 0 13%, transparent 14%),
    radial-gradient(circle at 84% 35%, rgba(212,183,102,.95) 0 4px, transparent 5px),
    linear-gradient(116deg, transparent 0 46%, rgba(82,190,205,.28) 47% 60%, transparent 61% 100%),
    linear-gradient(116deg, transparent 0 70%, rgba(214,185,98,.82) 71% 71.8%, transparent 72.2% 100%),
    linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px) !important;
  background-size: auto, auto, auto, auto, auto, 30px 30px, 30px 30px !important;
}

/* shared premium shine */
body.company-page .page-title::after,
body.company-page .page-title1::after,
body.company-page .page-title2::after,
body.company-page .page-title3::after,
body.company-page .page-title4::after,
body.company-page .page-title5::after,
body.business-page .page-title::after,
body.business-page .page-title1::after,
body.business-page .page-title2::after,
body.business-page .page-title3::after,
body.business-page .page-title4::after,
body.business-page .page-title5::after,
body.map-page .map-page-title::after{
  background:
    linear-gradient(115deg, transparent 0 15%, rgba(255,255,255,.12) 16% 16.3%, transparent 16.8% 100%),
    linear-gradient(115deg, transparent 0 77%, rgba(255,255,255,.12) 78% 92%, transparent 93% 100%),
    radial-gradient(circle at 92% 42%, rgba(255,255,255,.20) 0 2px, transparent 3px),
    radial-gradient(circle at 92% 42%, rgba(212,183,102,.42) 0 15px, transparent 16px),
    linear-gradient(0deg, rgba(255,255,255,.04), rgba(255,255,255,.04)) !important;
}

body.company-page .bunnkatu,
body.business-page .bunnkatu,
body.map-page .map-shell{
  margin-top: 0 !important;
}

@media (max-width: 767px){
  body.company-page .page-title,
  body.company-page .page-title1,
  body.company-page .page-title2,
  body.company-page .page-title3,
  body.company-page .page-title4,
  body.company-page .page-title5,
  body.business-page .page-title,
  body.business-page .page-title1,
  body.business-page .page-title2,
  body.business-page .page-title3,
  body.business-page .page-title4,
  body.business-page .page-title5,
  body.map-page .map-page-title{
    min-height: 156px !important;
    padding: 46px 22px 28px !important;
    margin-bottom: 24px !important;
    background-size: cover !important;
    background-position: center right !important;
  }
  .section-hero-label{font-size: .68rem !important; letter-spacing: .26em !important;}
  .section-hero-main{font-size: clamp(1.8rem, 1.2rem + 3vw, 2.35rem) !important;}
  .section-hero-sub{font-size: .84rem !important; line-height: 1.6 !important;}
}


/* 2026-06-10 exact2: recruit/contact variants + desktop width balance */

/* RECRUITMENT */
body.recruit-page .page-title{
  background:
    linear-gradient(90deg, rgba(3,13,30,.98) 0%, rgba(5,18,40,.95) 42%, rgba(10,28,44,.62) 63%, rgba(5,15,30,.58) 100%),
    url("../images/recruit/saiyou-pic.jpg") right center / auto 145% no-repeat,
    linear-gradient(135deg, #07152b 0%, #102849 52%, #26496a 100%) !important;
}
body.recruit-page .page-title::before{
  background:
    linear-gradient(90deg, rgba(4,13,30,.96) 0 43%, rgba(4,13,30,.30) 72%, transparent 100%),
    radial-gradient(circle at 82% 28%, rgba(130,185,235,.16) 0 13%, transparent 14%),
    linear-gradient(116deg, transparent 0 42%, rgba(100,155,210,.22) 43% 55%, transparent 56% 100%),
    linear-gradient(116deg, transparent 0 70%, rgba(214,185,98,.82) 71% 71.8%, transparent 72.2% 100%),
    linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px) !important;
  background-size: auto, auto, auto, auto, 32px 32px, 32px 32px !important;
}

/* CONTACT */
body.contact-page .page-title{
  background:
    linear-gradient(90deg, rgba(3,13,30,.98) 0%, rgba(6,20,38,.95) 42%, rgba(9,34,48,.62) 63%, rgba(4,16,28,.58) 100%),
    url("../images/contact/otoiawase-pic.jpg") right center / auto 145% no-repeat,
    linear-gradient(135deg, #061427 0%, #0c2b44 52%, #13576a 100%) !important;
}
body.contact-page .page-title::before{
  background:
    linear-gradient(90deg, rgba(4,15,31,.96) 0 43%, rgba(4,15,31,.30) 72%, transparent 100%),
    radial-gradient(circle at 82% 28%, rgba(120,222,235,.16) 0 13%, transparent 14%),
    radial-gradient(circle at 84% 35%, rgba(212,183,102,.95) 0 4px, transparent 5px),
    linear-gradient(116deg, transparent 0 46%, rgba(82,190,205,.28) 47% 60%, transparent 61% 100%),
    linear-gradient(116deg, transparent 0 70%, rgba(214,185,98,.82) 71% 71.8%, transparent 72.2% 100%),
    linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px) !important;
  background-size: auto, auto, auto, auto, auto, 30px 30px, 30px 30px !important;
}

/* デスクトップでは上部ビジュアル帯を横に広げすぎない */
@media (min-width: 768px){
  body.company-page .page-title,
  body.company-page .page-title1,
  body.company-page .page-title2,
  body.company-page .page-title3,
  body.company-page .page-title4,
  body.company-page .page-title5,
  body.business-page .page-title,
  body.business-page .page-title1,
  body.business-page .page-title2,
  body.business-page .page-title3,
  body.business-page .page-title4,
  body.business-page .page-title5,
  body.map-page .map-page-title{
    width: min(1120px, calc(100% - 32px)) !important;
    max-width: 1120px !important;
    border-radius: 30px !important;
  }
}

/* スマホだけは幅いっぱいに近いまま */
@media (max-width: 767px){
  body.company-page .page-title,
  body.company-page .page-title1,
  body.company-page .page-title2,
  body.company-page .page-title3,
  body.company-page .page-title4,
  body.company-page .page-title5,
  body.business-page .page-title,
  body.business-page .page-title1,
  body.business-page .page-title2,
  body.business-page .page-title3,
  body.business-page .page-title4,
  body.business-page .page-title5,
  body.map-page .map-page-title{
    width: calc(100% - 20px) !important;
    max-width: none !important;
    border-radius: 24px !important;
  }
}