/**$txt:#333;
$txt2: #3e5059;**/
.bg01 {
  background-color: #f0eae3; }

.local-nav {
  padding: 4rem 0; }
  .local-nav nav ul {
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    align-items: stretch;
    align-content: flex-start; }
    .local-nav nav ul li {
      width: 48%;
      max-width: 360px;
      margin-right: 4%; }
      .local-nav nav ul li:nth-of-type(2n), .local-nav nav ul li:last-of-type {
        margin-right: 0; }
      .local-nav nav ul li a {
        display: block;
        width: 100%;
        position: relative; }
        .local-nav nav ul li a .overlay {
          display: block;
          width: 100%;
          height: 100%;
          background-color: #fff;
          position: absolute;
          left: 0;
          top: 0;
          transition: all .3s; }
        .local-nav nav ul li a .lay1 {
          mix-blend-mode: overlay; }
        .local-nav nav ul li a .lay2 {
          mix-blend-mode: color; }
        .local-nav nav ul li a .lay3 {
          mix-blend-mode: screen;
          opacity: 0.6; }
        .local-nav nav ul li a .title {
          display: block;
          width: 100%;
          height: 100%;
          position: absolute;
          left: 50%;
          top: 50%;
          transform: translate(-50%, -50%);
          transition: filter .1s; }
        .local-nav nav ul li a[href$="oji01"] .lay1 {
          background-color: #4f7a7e;
          opacity: 0.5; }
        .local-nav nav ul li a[href$="oji01"] .lay2 {
          opacity: 0.8; }
        .local-nav nav ul li a[href$="oji02"] .lay1 {
          background-color: #969696;
          opacity: 0.6; }
        .local-nav nav ul li a[href$="oji02"] .lay2 {
          opacity: 0.9; }
        .local-nav nav ul li a:hover .lay3, .local-nav nav ul li a.current .lay3 {
          mix-blend-mode: multiply; }
        .local-nav nav ul li a:hover .title, .local-nav nav ul li a.current .title {
          filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(7500%) hue-rotate(174deg) brightness(102%) contrast(96%); }
        .local-nav nav ul li a:hover[href$="oji01"] .overlay, .local-nav nav ul li a.current[href$="oji01"] .overlay {
          background-color: #4f7a7e !important; }
        .local-nav nav ul li a:hover[href$="oji01"] .lay2, .local-nav nav ul li a.current[href$="oji01"] .lay2 {
          opacity: 0.7; }
        .local-nav nav ul li a:hover[href$="oji01"] .lay3, .local-nav nav ul li a.current[href$="oji01"] .lay3 {
          opacity: 0.85; }
        .local-nav nav ul li a:hover[href$="oji02"] .overlay, .local-nav nav ul li a.current[href$="oji02"] .overlay {
          background-color: #0a3e64 !important; }
        .local-nav nav ul li a:hover[href$="oji02"] .lay1, .local-nav nav ul li a.current[href$="oji02"] .lay1 {
          opacity: 0.64; }
        .local-nav nav ul li a:hover[href$="oji02"] .lay2, .local-nav nav ul li a.current[href$="oji02"] .lay2 {
          opacity: 0.3; }
        .local-nav nav ul li a:hover[href$="oji02"] .lay3, .local-nav nav ul li a.current[href$="oji02"] .lay3 {
          background-color: #4b669a !important;
          opacity: 0.9; }
  @media screen and (max-width: 600px) {
    .local-nav {
      padding-top: 40px; } }

.conts-wrap .inner {
  padding: 0 0 64px; }

.conts-head {
  padding: 56px 0 40px !important;
  color: #12475d;
  text-align: left;
  line-height: 1.28; }
  .conts-head img {
    width: 100%;
    height: auto;
    line-height: 1; }
  .conts-head .en {
    width: 64%;
    max-width: 560px;
    margin-bottom: 2.4rem; }
  .conts-head .copy {
    font-size: clamp(18px, 2vw, 2.4rem);
    letter-spacing: 0.15em; }
  @media screen and (max-width: 600px) {
    .conts-head {
      padding: 24px 0 !important; }
      .conts-head .en {
        width: 100%;
        margin-bottom: 20px; } }

.copy-body {
  font-size: 10px;
  padding-bottom: 9em;
  padding-top: 1em;
  position: relative; }
  .copy-body:before {
    width: 2px;
    content: "";
    background: linear-gradient(to bottom, #cfc1a6, #fff, #cfc1a6);
    position: absolute;
    top: 0;
    bottom: 0; }
  .copy-body .copy-l {
    position: absolute;
    top: 0;
    font-size: 4.2em;
    line-height: 1;
    color: #12475d;
    writing-mode: vertical-rl;
    font-feature-settings: normal; }
    .copy-body .copy-l .tatechuyoko {
      text-combine-upright: all; }
  .copy-body .copy-m {
    font-size: 2.8em;
    color: #000;
    margin-top: 0.5em; }
  .copy-body .lead {
    font-size: 1.8em;
    margin-top: 1em;
    color: #000; }
  .copy-body .copy-under-en {
    position: absolute;
    width: 48%;
    max-width: 300px;
    border-bottom: 2px solid #cfc1a6;
    font-family: "minion-pro", "times-new-roman", "Times New Roman", "YuMincho", "Hiragino Mincho ProN", "Yu Mincho", "MS PMincho", serif;
    -webkit-font-smoothing: antialiased;
    font-weight: 400;
    font-feature-settings: 'palt';
    color: #94acb6;
    bottom: 3em;
    display: flex;
    padding-bottom: 1em;
    box-sizing: border-box;
    font-size: 1.4em; }
  .copy-body .note {
    margin-top: 12px; }
  .copy-body.right-copy {
    padding-right: 14em; }
    .copy-body.right-copy .copy-l {
      right: 0; }
    .copy-body.right-copy .copy-m,
    .copy-body.right-copy .lead,
    .copy-body.right-copy .note {
      text-align: right; }
    .copy-body.right-copy .copy-under-en {
      right: 0;
      padding-right: 4.5em;
      writing-mode: vertical-rl; }
    .copy-body.right-copy:before {
      right: 5.5em; }
  .copy-body.left-copy {
    padding-left: 14em; }
    .copy-body.left-copy .copy-l {
      left: 0; }
    .copy-body.left-copy .copy-under-en {
      left: 0;
      padding-left: 4.5em;
      writing-mode: vertical-lr; }
    .copy-body.left-copy:before {
      left: 5.5em; }
  @media screen and (max-width: 600px) {
    .copy-body {
      font-size: 8px; }
      .copy-body .copy-m {
        font-size: 2.4em; }
      .copy-body .lead {
        font-size: 1.7em; }
      .copy-body.right-copy {
        padding-right: 10em; }
      .copy-body.left-copy {
        padding-left: 10em; } }

.cont-container {
  margin-top: 5rem;
  display: grid;
  grid-template-columns: 56% 40%;
  gap: 0 4%;
  align-items: flex-start; }
  .cont-container:has(.right-copy):not(.solo-clm) {
    grid-template-columns: 40% 56%; }
    .cont-container:has(.right-copy):not(.solo-clm) .copy-body {
      order: 2; }
    .cont-container:has(.right-copy):not(.solo-clm) .image {
      order: 1; }
  .cont-container.solo-clm {
    grid-template-columns: 1fr; }
  @media screen and (max-width: 600px) {
    .cont-container {
      grid-template-columns: 1fr; }
      .cont-container .image {
        margin-top: 24px; }
      .cont-container:has(.right-copy):not(.solo-clm) {
        grid-template-columns: 1fr; }
        .cont-container:has(.right-copy):not(.solo-clm) .copy-body {
          order: 1; }
        .cont-container:has(.right-copy):not(.solo-clm) .image {
          order: 2; } }

.fig {
  width: 88%;
  max-width: 512px;
  margin: auto; }
  .fig figcaption {
    padding-left: 20px;
    font-size: clamp(14px, 1vw, 0.9375rem);
    text-align: left;
    line-height: 1.28;
    margin-bottom: 12px;
    position: relative; }
    .fig figcaption::before {
      content: "";
      width: 13px;
      aspect-ratio: 1/1;
      background-color: #4f7a7e;
      position: absolute;
      top: 0.15em;
      left: 0; }

.main-master .page-name {
  color: #fff;
  text-shadow: 0 0 15px black, 0 0 15px black, 0 0 15px black; }

.lead.center {
  text-align: center; }

.intro-list {
  padding-top: 4rem;
  display: flex;
  justify-content: space-between;
  width: 100%;
  margin: auto;
  font-size: 10px; }
  .intro-list li {
    width: calc(88% / 3);
    box-sizing: border-box; }
    .intro-list li .lead {
      font-size: 1.7em;
      margin-top: 1.5em; }
  @media screen and (max-width: 600px) {
    .intro-list {
      display: block;
      width: 100%; }
      .intro-list li {
        width: 100%; }
        .intro-list li + li {
          margin-top: 4em; }
        .intro-list li .img {
          width: 88%;
          margin: auto;
          margin-top: 0em; }
        .intro-list li .lead {
          width: 88%;
          margin: auto;
          margin-top: 1em; } }

.intro-obi {
  background: linear-gradient(to right, #12475d, #000);
  text-align: center;
  padding: 16px;
  display: flex;
  align-items: center;
  justify-content: center; }
  .intro-obi.gold {
    background: linear-gradient(to right, #cfc082, #897935); }
  .intro-obi h3 {
    color: #fff;
    font-size: 30px;
    line-height: 1.28;
    text-align: center; }
  @media screen and (max-width: 600px) {
    .intro-obi h3 {
      font-size: 20px !important; } }

.junction .arrow {
  width: 100%;
  max-width: 1100px;
  margin: 16px auto;
  text-align: center;
  line-height: 1;
  font-size: 0; }
  .junction .arrow p {
    width: 16%;
    max-width: 96px;
    text-align: center;
    line-height: 1;
    font-size: 0;
    margin: auto; }
@media screen and (max-width: 600px) {
  .junction .arrow p {
    max-width: 56px; } }

#Hachioji01, #Hachioji02 {
  overflow-x: hidden; }

#Hachioji01 {
  padding-bottom: 4rem; }
  @media screen and (max-width: 600px) {
    #Hachioji01 {
      padding-bottom: 40px; } }

#StFront01 .image {
  background-color: #fff;
  padding: 0 1.2rem; }
  #StFront01 .image .fig .img {
    padding: 1.2rem 0 0;
    margin-bottom: 1.2rem; }
    #StFront01 .image .fig .img .cap {
      background: none; }
    #StFront01 .image .fig .img + .img {
      border-top: thin solid #c0a250; }
@media screen and (max-width: 600px) {
  #StFront01 .fig .img {
    line-height: 0; }
    #StFront01 .fig .img .cap {
      width: 100%;
      position: static;
      text-align: right;
      margin-top: -2px;
      padding: 0; } }

.shop-list {
  padding: 56px 0; }
  .shop-list > ul {
    max-width: 960px;
    margin: auto; }
    .shop-list > ul > li {
      overflow-x: hidden;
      display: flex;
      flex-flow: row wrap;
      justify-content: space-between;
      align-items: flex-start;
      align-content: flex-start; }
      .shop-list > ul > li + li {
        margin-top: 56px; }
      .shop-list > ul > li .shop-image {
        width: calc((626/1100)*100%); }
      .shop-list > ul > li .shop-text {
        width: calc((434/1100)*100%); }
        .shop-list > ul > li .shop-text .shop-name {
          font-size: clamp(16px, 1.4vw, 1.125rem);
          color: #0a3e64;
          text-align: center;
          line-height: 1.28;
          padding: 24px 16px 16px; }
        .shop-list > ul > li .shop-text .lead {
          font-size: clamp(14px, 1vw, 0.875rem); }
      .shop-list > ul > li:nth-of-type(2n) {
        flex-direction: row-reverse; }
  @media screen and (max-width: 600px) {
    .shop-list {
      padding-bottom: 0; }
      .shop-list > ul > li {
        margin-inline: calc(50% - 50vw);
        width: 100vw; }
        .shop-list > ul > li + li {
          margin-top: 40px; }
        .shop-list > ul > li .shop-image {
          width: 100%;
          padding-right: 12%; }
        .shop-list > ul > li .shop-text {
          width: 100%;
          padding: 0 12%; }
          .shop-list > ul > li .shop-text .shop-name {
            padding: 12px 16px 6px; }
        .shop-list > ul > li:nth-of-type(2n) .shop-image {
          padding-right: 0;
          padding-left: 12%; } }

.about-corecity {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
  align-items: flex-start;
  align-content: flex-start;
  max-width: 960px;
  margin: 1.5rem auto 0; }
  .about-corecity .obi {
    width: 100%;
    background-color: #006373;
    padding: 8px 16px;
    margin-bottom: 24px; }
    .about-corecity .obi p {
      font-size: clamp(18px, 1.4vw, 1.25rem);
      text-align: center;
      color: #fff;
      line-height: 1.2; }
  .about-corecity .city-image {
    width: calc((400/960)*100%); }
  .about-corecity .city-text {
    width: calc((520/960)*100%); }
    .about-corecity .city-text .note {
      text-align: right;
      margin-top: 0.4em; }
  @media screen and (max-width: 600px) {
    .about-corecity .obi {
      margin-bottom: 12px; }
    .about-corecity .city-image {
      width: 80%;
      margin: 0 auto 16px; }
    .about-corecity .city-text {
      width: 100%; } }

.child-mv {
  margin-top: 2rem;
  margin-bottom: 4rem;
  margin-inline: calc(50% - 50vw);
  width: 100vw; }

.child-fig {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
  align-items: center;
  align-content: flex-start;
  margin-top: 4em; }
  .child-fig .fig {
    width: 47%; }
  @media screen and (max-width: 600px) {
    .child-fig .fig {
      width: 100%; }
      .child-fig .fig + .fig {
        margin-top: 24px; } }

@media screen and (max-width: 600px) {
  #Academic01 .image .img {
    width: 80%;
    margin-left: auto;
    margin-right: auto; } }

.redevelop-mv {
  margin-top: 2rem;
  margin-bottom: 2rem;
  margin-inline: calc(50% - 50vw);
  width: 100vw; }

.redevelop-list > ul {
  display: flex;
  flex-wrap: wrap;
  padding-top: 1em; }
  .redevelop-list > ul > li {
    width: 47%;
    margin-right: 6%;
    margin-bottom: 3em; }
    .redevelop-list > ul > li:nth-child(2n) {
      margin-right: 0; }
    .redevelop-list > ul > li .deve-ttl {
      text-align: left;
      font-size: 1.4em;
      color: #0a3e64;
      margin-top: 0.8em; }
    .redevelop-list > ul > li .lead {
      font-size: 1.1em;
      margin-top: 0.4em; }
@media screen and (max-width: 834px) {
  .redevelop-list {
    margin-inline: calc(50% - 50vw);
    width: 100vw; }
    .redevelop-list > ul {
      display: block; }
      .redevelop-list > ul > li {
        width: 85%;
        margin-right: 0%; }
        .redevelop-list > ul > li:nth-child(1), .redevelop-list > ul > li:nth-child(3) {
          margin-right: 15%; }
          .redevelop-list > ul > li:nth-child(1) .copy, .redevelop-list > ul > li:nth-child(3) .copy {
            padding-left: 10%; }
        .redevelop-list > ul > li:nth-child(2), .redevelop-list > ul > li:nth-child(4) {
          margin-left: 15%; }
          .redevelop-list > ul > li:nth-child(2) .copy, .redevelop-list > ul > li:nth-child(4) .copy {
            padding-right: 10%; } }

.note.right {
  text-align: right; }

.midashi.rede-midashi {
  color: #0a3e64;
  font-size: 2.8em;
  margin-top: 1em; }

.soto-icon {
  margin: auto;
  margin-top: 3em;
  margin-bottom: 3em;
  max-width: 150px;
  width: 50%; }
  .soto-icon img {
    width: 100%;
    height: auto; }

.redevelop-map .img .cap {
  background: none;
  right: auto;
  left: 10%;
  bottom: 2.25rem; }

.img.rede_photo04 .cap.cap2 {
  right: 51%; }

.page-head.shien {
  padding-top: 2rem; }

.cont-top-btn {
  font-size: 10px;
  padding: 2em 0 6em; }
  .cont-top-btn a {
    display: block;
    border: 3px solid #006165;
    background: #fff;
    position: relative;
    overflow: hidden;
    width: 90%;
    height: 5.5em;
    max-width: 36em;
    margin: auto;
    box-shadow: 0 0 1.5em rgba(0, 0, 0, 0.4);
    transition: 0.5s; }
    .cont-top-btn a .b-txt {
      position: absolute;
      top: 50%;
      left: 50%;
      color: #006165;
      font-size: 2em;
      transform: translate(-50%, -50%);
      display: flex;
      align-items: center;
      white-space: nowrap;
      line-height: 1; }
      .cont-top-btn a .b-txt .arrow {
        display: block;
        height: 1px;
        width: 1.6em;
        margin-left: 0.5em;
        position: relative;
        background: #006165;
        transition: transform 0.5s; }
        .cont-top-btn a .b-txt .arrow:after {
          content: "";
          width: 0.6em;
          background: #006165;
          height: 1px;
          position: absolute;
          transform: translate(10%, -300%) rotate(35deg);
          top: 0;
          right: 0; }
    .cont-top-btn a:hover {
      background: #006165;
      box-shadow: 0 0 2em rgba(0, 0, 0, 0); }
      .cont-top-btn a:hover .b-txt {
        color: #fff; }
        .cont-top-btn a:hover .b-txt .arrow {
          background: #fff;
          transform: translateX(60%); }
          .cont-top-btn a:hover .b-txt .arrow:after {
            background: #fff; }
  @media screen and (max-width: 600px) {
    .cont-top-btn {
      font-size: 8px; }
      .cont-top-btn a {
        background: #006165; }
        .cont-top-btn a .b-txt {
          color: #fff; }
          .cont-top-btn a .b-txt .arrow {
            background: #fff; }
            .cont-top-btn a .b-txt .arrow:after {
              background: #fff; } }

@media screen and (max-width: 768px) {
  .copy-body .lead {
    text-align: left !important; }
    .copy-body .lead .aw {
      display: inline !important; }
    .copy-body .lead br {
      display: none !important; } }