@charset "UTF-8";
/*******　特別区とは　*******/
.wards23_index {
  width: 100%;
  overflow-x: hidden; }
  .wards23_index .keyvisual {
    width: 100vw;
    aspect-ratio: 390 / 400;
    background-image: url("../../wards23/img/23wards_kv_sp.jpg");
    background-position: top center;
    background-size: 100% auto;
    background-repeat: no-repeat; }
    @media only screen and (min-width: 769px) {
      .wards23_index .keyvisual {
        width: 100%;
        aspect-ratio: 1920 / 998;
        background-image: url("../../wards23/img/23wards_kv_pc.jpg"); } }
  .wards23_index .keyvisual-inner {
    width: 100vw;
    padding-top: calc(115 / 390 * 100vw); }
    @media only screen and (min-width: 769px) {
      .wards23_index .keyvisual-inner {
        width: 100%;
        padding-top: calc(375 / 1920 * 100vw); } }
  .wards23_index .keyvisual-inner-logo {
    width: calc(330 / 390 * 100vw);
    margin: 0 auto; }
    @media only screen and (min-width: 769px) {
      .wards23_index .keyvisual-inner-logo {
        width: calc(844 / 1920 * 100vw); } }
  .wards23_index .keyvisual-inner-lead {
    width: calc(370 / 390 * 100vw);
    margin: calc(35 / 390 * 100vw) auto 0;
    font-size: calc(13 / 390 * 100vw);
    font-weight: 600;
    line-height: 1.7;
    text-align: center;
    color: #FFF;
    filter: drop-shadow(calc(2 / 390 * 100vw) calc(2 / 390 * 100vw) calc(1 / 390 * 100vw) rgba(0, 0, 0, 0.75)); }
    @media only screen and (min-width: 769px) {
      .wards23_index .keyvisual-inner-lead {
        width: calc(1000 / 1920 * 100vw);
        margin: calc(95 / 1920 * 100vw) auto 0;
        font-size: calc(35 / 1920 * 100vw);
        line-height: 1.65;
        filter: drop-shadow(calc(4 / 1920 * 100vw) calc(4 / 1920 * 100vw) calc(3 / 1920 * 100vw) rgba(0, 0, 0, 0.75)); } }
  .wards23_index .outline {
    width: 100%;
    position: relative;
    padding: calc(47 / 390 * 100vw) 0 calc(40 / 390 * 100vw); }
    @media only screen and (min-width: 769px) {
      .wards23_index .outline {
        margin: calc(0 / 1080 * 100vw) auto 0;
        padding: calc(125 / 1080 * 100vw) 0 calc(120 / 1080 * 100vw); } }
    @media only screen and (min-width: 1080px) {
      .wards23_index .outline {
        margin: 0px auto 0;
        padding: 125px 0 120px; } }
    @media only screen and (min-width: 1981px) {
      .wards23_index .outline {
        margin: 0px auto 0; } }
  .wards23_index .page-title {
    position: absolute;
    background: #FFF;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    width: calc(340 / 390 * 100vw);
    height: calc(62 / 390 * 100vw);
    margin: auto;
    top: calc(-60 / 390 * 100vw);
    left: 0;
    right: 0; }
    @media only screen and (min-width: 769px) {
      .wards23_index .page-title {
        width: calc(960 / 1080 * 100vw);
        height: calc(110 / 1080 * 100vw);
        top: calc(-60 /1080 * 100vw); } }
    @media only screen and (min-width: 1080px) {
      .wards23_index .page-title {
        width: 960px;
        height: 110px;
        top: -60px; } }
  .wards23_index .outline-inner {
    width: calc(300 / 390 * 100vw);
    margin: 0 auto; }
    @media only screen and (min-width: 769px) {
      .wards23_index .outline-inner {
        width: calc(878 / 1080 * 100vw); } }
    @media only screen and (min-width: 1080px) {
      .wards23_index .outline-inner {
        width: 878px; } }
  .wards23_index .outline-inner-text {
    margin: 0 auto 0; }
    @media only screen and (min-width: 769px) {
      .wards23_index .outline-inner-text {
        margin: 0 auto 0; } }
    @media only screen and (min-width: 1080px) {
      .wards23_index .outline-inner-text {
        margin: 0 auto 0; } }
  .wards23_index .block01 {
    width: 100%;
    background-color: #fcf0f3;
    margin: calc(0 / 390 * 100vw) auto 0; }
    @media only screen and (min-width: 769px) {
      .wards23_index .block01 {
        width: 100%;
        margin: calc(0 / 1080 * 100vw) auto 0; } }
    @media only screen and (min-width: 1080px) {
      .wards23_index .block01 {
        margin: 0px auto 0; } }
  .wards23_index .block01-inner {
    width: calc(350 / 390 * 100vw);
    margin: calc(20 / 390 * 100vw) auto 0;
    padding: calc(30 / 390 * 100vw) 0 calc(35 / 390 * 100vw); }
    @media only screen and (min-width: 769px) {
      .wards23_index .block01-inner {
        width: calc(940 / 1080 * 100vw);
        margin: calc(45 / 1080 * 100vw) auto 0;
        padding: calc(65 / 1080 * 100vw) 0;
        display: flex;
        justify-content: space-between;
        align-items: center; } }
    @media only screen and (min-width: 1080px) {
      .wards23_index .block01-inner {
        width: 940px;
        margin: 45px auto 0;
        padding: 65px 0; } }
  .wards23_index .maps {
    background-image: url("../../wards23/img/cmn/map.svg");
    background-repeat: no-repeat;
    width: calc(220 / 390 * 100vw);
    height: calc(215 / 390 * 100vw);
    margin: 0 auto; }
    @media only screen and (min-width: 769px) {
      .wards23_index .maps {
        margin: 0 0 0;
        width: calc(428 / 1080 * 100vw);
        height: calc(417 / 1080 * 100vw); } }
    @media only screen and (min-width: 1080px) {
      .wards23_index .maps {
        width: 428px;
        height: 417px; } }
  .wards23_index .maps div {
    display: none; }
  .wards23_index .maps div.active {
    display: block; }
  .wards23_index .btns {
    width: calc(350 / 390 * 100vw);
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    margin: 0 auto; }
    @media only screen and (min-width: 769px) {
      .wards23_index .btns {
        width: calc(494 / 1080 * 100vw);
        margin: 0 0 0; } }
    @media only screen and (min-width: 1080px) {
      .wards23_index .btns {
        width: 494px; } }
  .wards23_index .btns li {
    width: calc(82 / 390 * 100vw);
    height: calc(31 / 390 * 100vw);
    margin-bottom: calc(7 / 390 * 100vw); }
    @media only screen and (min-width: 769px) {
      .wards23_index .btns li {
        width: calc(118 / 1080 * 100vw);
        height: calc(53 / 1080 * 100vw);
        margin: 0 0 calc(7 / 1080 * 100vw); } }
    @media only screen and (min-width: 1080px) {
      .wards23_index .btns li {
        width: 118px;
        height: 53px;
        margin: 0 0 7px; } }
  .wards23_index .btns li.long {
    width: calc(171 / 390 * 100vw);
    height: calc(31 / 390 * 100vw); }
    @media only screen and (min-width: 769px) {
      .wards23_index .btns li.long {
        width: calc(243 / 1080 * 100vw);
        height: calc(53 / 1080 * 100vw); } }
    @media only screen and (min-width: 1080px) {
      .wards23_index .btns li.long {
        width: 243px;
        height: 53px; } }
  .wards23_index .btns li a {
    position: relative;
    display: block;
    cursor: pointer;
    border: #df6a86 solid 1px;
    background: #FFF;
    width: 100%;
    height: 100%; }
    .wards23_index .btns li a img {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      margin: auto;
      width: auto;
      height: 100%;
      display: block; }
      .wards23_index .btns li a img:nth-of-type(1) {
        opacity: 1; }
      .wards23_index .btns li a img:nth-of-type(2) {
        opacity: 0; }
    .wards23_index .btns li a:hover {
      background: #df6a86;
      opacity: 1; }
      .wards23_index .btns li a:hover img:nth-of-type(1) {
        opacity: 0; }
      .wards23_index .btns li a:hover img:nth-of-type(2) {
        opacity: 1; }
  .wards23_index .notice {
    font-size: calc(12 / 390 * 100vw);
    line-height: 1.5em;
    width: 100% !important;
    height: inherit !important;
    margin: 1em auto; }
    @media only screen and (min-width: 769px) {
      .wards23_index .notice {
        font-size: calc(12 / 1080 * 100vw);
        margin: 0 0 1em; } }
    @media only screen and (min-width: 1080px) {
      .wards23_index .notice {
        font-size: 1.2rem; } }
  .wards23_index .wars_index {
    width: calc(330 / 390 * 100vw);
    margin: calc(20 / 390 * 100vw) auto 0;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap; }
    @media only screen and (min-width: 769px) {
      .wards23_index .wars_index {
        width: calc(864 / 1080 * 100vw);
        margin: calc(45 / 1080 * 100vw) auto 0; } }
    @media only screen and (min-width: 1080px) {
      .wards23_index .wars_index {
        width: 864px;
        margin: 45px auto 0; } }
    .wards23_index .wars_index li {
      width: calc(160 / 390 * 100vw);
      margin-bottom: calc(10 / 390 * 100vw); }
      @media only screen and (min-width: 769px) {
        .wards23_index .wars_index li {
          width: calc(112 / 1080 * 100vw);
          margin: 0 calc(14 / 1080 * 100vw) calc(26 / 1080 * 100vw); } }
      @media only screen and (min-width: 1080px) {
        .wards23_index .wars_index li {
          width: 112px;
          margin: 0 14px 26px; } }
      .wards23_index .wars_index li .bt {
        width: calc(70 / 390 * 100vw);
        height: calc(70 / 390 * 100vw);
        position: relative;
        display: block;
        background: #FFF;
        overflow: hidden; }
        @media only screen and (min-width: 769px) {
          .wards23_index .wars_index li .bt {
            width: calc(116 / 1080 * 100vw);
            height: calc(116 / 1080 * 100vw); } }
        @media only screen and (min-width: 1080px) {
          .wards23_index .wars_index li .bt {
            width: 116px;
            height: 116px; } }
        .wards23_index .wars_index li .bt img {
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          display: block; }
          .wards23_index .wars_index li .bt img:nth-of-type(1) {
            opacity: 1; }
          .wards23_index .wars_index li .bt img:nth-of-type(2) {
            opacity: 0; }
      .wards23_index .wars_index li .bt:hover {
        background: #ba5c73;
        opacity: 1; }
        .wards23_index .wars_index li .bt:hover img:nth-of-type(1) {
          opacity: 0; }
        .wards23_index .wars_index li .bt:hover img:nth-of-type(2) {
          opacity: 1; }
  .wards23_index .wars_index_l {
    width: calc(330 / 390 * 100vw);
    margin: calc(0 / 390 * 100vw) auto 0;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap; }
    @media only screen and (min-width: 769px) {
      .wards23_index .wars_index_l {
        width: calc(864 / 1080 * 100vw);
        margin: calc(0 / 1080 * 100vw) auto 0; } }
    @media only screen and (min-width: 1080px) {
      .wards23_index .wars_index_l {
        width: 864px;
        margin: 0px auto 0; } }
    .wards23_index .wars_index_l li {
      width: 100%;
      margin-bottom: calc(16 / 390 * 100vw); }
      @media only screen and (min-width: 769px) {
        .wards23_index .wars_index_l li {
          width: calc(260 / 1080 * 100vw);
          margin: 0 calc(14 / 1080 * 100vw) calc(26 / 1080 * 100vw); } }
      @media only screen and (min-width: 1080px) {
        .wards23_index .wars_index_l li {
          width: 260px;
          margin: 0 14px 26px; } }
      .wards23_index .wars_index_l li .bt {
        width: 100%;
        height: calc(70 / 390 * 100vw);
        position: relative;
        display: block;
        background: #FFF;
        overflow: hidden; }
        @media only screen and (min-width: 769px) {
          .wards23_index .wars_index_l li .bt {
            height: calc(116 / 1080 * 100vw); } }
        @media only screen and (min-width: 1080px) {
          .wards23_index .wars_index_l li .bt {
            height: 116px; } }
        .wards23_index .wars_index_l li .bt img {
          position: absolute;
          top: 0;
          bottom: 0;
          margin: auto;
          left: 0;
          right: 0;
          width: calc(156 / 390 * 100vw);
          height: auto;
          display: block; }
          @media only screen and (min-width: 769px) {
            .wards23_index .wars_index_l li .bt img {
              width: 100%; } }
          .wards23_index .wars_index_l li .bt img:nth-of-type(1) {
            opacity: 1; }
          .wards23_index .wars_index_l li .bt img:nth-of-type(2) {
            opacity: 0; }
      .wards23_index .wars_index_l li .bt:hover {
        background: #ba5c73;
        opacity: 1; }
        .wards23_index .wars_index_l li .bt:hover img:nth-of-type(1) {
          opacity: 0; }
        .wards23_index .wars_index_l li .bt:hover img:nth-of-type(2) {
          opacity: 1; }
  .wards23_index .block02 {
    width: 100vw;
    margin: 0 auto 0;
    padding: calc(90 / 390 * 100vw) 0 calc(80 / 390 * 100vw); }
    @media only screen and (min-width: 769px) {
      .wards23_index .block02 {
        width: 100%;
        margin: 0 auto 0;
        padding: calc(160 / 1080 * 100vw) 0 calc(105 / 1080 * 100vw); } }
    @media only screen and (min-width: 1080px) {
      .wards23_index .block02 {
        margin: 0 auto 0;
        padding: 160px 0 105px; } }
    .wards23_index .block02 .block02-inner {
      width: 100vw; }
      @media only screen and (min-width: 769px) {
        .wards23_index .block02 .block02-inner {
          width: 100%; } }
      @media only screen and (min-width: 1080px) {
        .wards23_index .block02 .block02-inner {
          width: 100%; } }
    .wards23_index .block02 .link_wrap {
      width: calc(342 / 390 * 100vw);
      margin: calc(20 / 390 * 100vw) auto 0; }
      @media only screen and (min-width: 769px) {
        .wards23_index .block02 .link_wrap {
          display: flex;
          justify-content: space-between;
          width: calc(846 / 1080 * 100vw);
          margin: calc(50 / 1080 * 100vw) auto 0; } }
      @media only screen and (min-width: 1080px) {
        .wards23_index .block02 .link_wrap {
          width: 846px;
          margin: 50px auto 0; } }
      .wards23_index .block02 .link_wrap .link_ph {
        width: 100%;
        margin: calc(30 / 390 * 100vw) auto 0; }
        @media only screen and (min-width: 769px) {
          .wards23_index .block02 .link_wrap .link_ph {
            width: calc(316 / 1080 * 100vw);
            margin: 0; } }
        @media only screen and (min-width: 1080px) {
          .wards23_index .block02 .link_wrap .link_ph {
            width: 316px;
            margin: 0; } }
      .wards23_index .block02 .link_wrap .link_text {
        width: 100%;
        margin: calc(22 / 390 * 100vw) auto 0; }
        @media only screen and (min-width: 769px) {
          .wards23_index .block02 .link_wrap .link_text {
            width: calc(472 / 1080 * 100vw);
            margin: 0; } }
        @media only screen and (min-width: 1080px) {
          .wards23_index .block02 .link_wrap .link_text {
            width: 472px;
            margin: 0; } }
    .wards23_index .block02 .block02-inner-btn {
      margin: calc(22 / 390 * 100vw) auto 0; }
      @media only screen and (min-width: 769px) {
        .wards23_index .block02 .block02-inner-btn {
          margin: calc(20 / 1080 * 100vw) auto 0 0; } }
      @media only screen and (min-width: 1080px) {
        .wards23_index .block02 .block02-inner-btn {
          margin: 20px auto 0 0; } }