/* CSS Document */
/* Scss Document */
body {
  height: 100%;
  overflow: visible; }
  body .container {
    overflow: visible; }
  body header, body nav {
    overflow: hidden; }
  body .pc {
    display: inline-block; }
  body .sp {
    display: none; }
  body header .logo.pc {
    display: block; }
  body header .logo.sp {
    display: none; }
  @media only screen and (max-width: 800px) {
    body .pc {
      display: none; }
    body .sp {
      display: inline-block; }
    body .logo.sp {
      display: block; }
    body .logo.pc {
      display: none; } }
  body .wrap-h1 {
    	/*
        position: sticky;
        top: 0;
    	*/
    background: #FFF;
    z-index: 999; }
    @media only screen and (max-width: 800px) {
      body .wrap-h1 {
        position: static; } }
  body #citysupport .area1 {
    max-width: 1200px;
    overflow-y: visible;
    margin-bottom: 48px;
    width: 90%;
    height: 100%;
    margin: auto;
    padding-top: 40px; }
    @media only screen and (max-width: 800px) {
      body #citysupport .area1 {
        padding-top: 20px; } }
    body #citysupport .area1 h1 {
      font-family: 'EB Garamond', serif;
      text-align: center;
      color: #1b2d58;
      opacity: .7;
      letter-spacing: .2em;
      font-size: 5.5rem;
      border-bottom: 1px solid #1b2d58;
      margin-bottom: 20px; }
      @media only screen and (max-width: 800px) {
        body #citysupport .area1 h1 {
          font-size: 6.5vw;
          margin-bottom: 20px; } }
    body #citysupport .area1 .switch {
      display: -webkit-flex;
      display: -moz-flex;
      display: -ms-flex;
      display: -o-flex;
      display: flex;
      justify-content: space-around;
      max-width: 656px;
      margin: 0 auto 20px; }
      @media only screen and (max-width: 600px) {
        body #citysupport .area1 .switch {
          flex-wrap: wrap;
          row-gap: 1vmax;
          margin-bottom: 40px; } }
      body #citysupport .area1 .switch .switch_button {
        display: inline-block;
        width: 48%;
        max-height: 44px;
        max-width: 312px;
        text-align: center; }
        @media only screen and (max-width: 600px) {
          body #citysupport .area1 .switch .switch_button {
            width: 100%;
            max-width: none; }
            body #citysupport .area1 .switch .switch_button img.sp {
              display: inline-block; } }
        body #citysupport .area1 .switch .switch_button .btn {
          display: inline-block; }
        body #citysupport .area1 .switch .switch_button:first-child a {
          color: #fff; }
        body #citysupport .area1 .switch .switch_button:first-child:hover a {
          color: #c30d23; }
        body #citysupport .area1 .switch .switch_button:last-child a {
          color: #fff; }
        body #citysupport .area1 .switch .switch_button:last-child:hover a {
          color: #00428e; }
  body .contentsWrap {
    width: 90%;
    max-width: 1200px;
    text-align: center;
    margin: 0 auto 48px; }
    body .contentsWrap .bg {
      background-image: url("../images/citysupport/bg.png");
      background-position: center bottom;
      background-size: cover;
      padding: 30px 5%; }
      body .contentsWrap .bg img {
        max-width: 100%;
        margin-bottom: 20px; }
        @media only screen and (max-width: 800px) {
          body .contentsWrap .bg img:first-child {
            width: 80%;
            max-width: 400px;
            margin: 0 auto 20px; } }
      body .contentsWrap .bg .df {
        display: -webkit-flex;
        display: -moz-flex;
        display: -ms-flex;
        display: -o-flex;
        display: flex;
        justify-content: center;
        width: 100%; }
        @media only screen and (max-width: 800px) {
          body .contentsWrap .bg .df {
            flex-direction: column;
            max-width: 470px;
            margin: 0 auto; } }
        body .contentsWrap .bg .df img {
          max-width: 50%; }
          @media only screen and (max-width: 800px) {
            body .contentsWrap .bg .df img {
              width: 100%;
              max-width: 100%; } }
  body #citysupport .area2 {
    width: 100%;
    max-width: 1200px;
    overflow-y: visible;
    margin: 0 auto;
    text-align: center;
    margin-bottom: 48px; }
    body #citysupport .area2 .box > img {
      margin-bottom: 10px; }
      @media only screen and (max-width: 800px) {
        body #citysupport .area2 .box > img {
          margin-bottom: 20px;
          padding: 0 2.5%;
          max-width: 95%; }
          body #citysupport .area2 .box > img.last {
            margin-bottom: 30px; } }
    @media only screen and (max-width: 800px) {
      body #citysupport .area2.senior .box > img {
        margin-bottom: 30px;
        padding: 0 2.5%; } }
    body #citysupport .area2 h2 {
      text-align: center;
      padding: 20px 2.5%;
      background-color: #00a29a;
      margin-bottom: 20px; }
      @media only screen and (max-width: 800px) {
        body #citysupport .area2 h2 {
          padding: 10px 2.5%; }
          body #citysupport .area2 h2 img.sp {
            display: inline-block; } }
      body #citysupport .area2 h2.senior {
        background-color: #93448e; }
    @media only screen and (max-width: 1200px) {
      body #citysupport .area2 .box {
        padding: 0 2.5%; } }
    @media only screen and (max-width: 800px) {
      body #citysupport .area2 .box > img:last-child {
        margin-bottom: 30px; } }
    body #citysupport .area2 .box .df {
      display: -webkit-flex;
      display: -moz-flex;
      display: -ms-flex;
      display: -o-flex;
      display: flex;
      justify-content: center;
      width: 100%; }
      body #citysupport .area2 .box .df.jse {
        justify-content: space-evenly; }
        @media only screen and (min-width: 801px) and (max-width: 1100px) {
          body #citysupport .area2 .box .df.jse img:first-child {
            width: 40%; }
          body #citysupport .area2 .box .df.jse img:last-child {
            width: 60%; } }
      @media only screen and (max-width: 800px) {
        body #citysupport .area2 .box .df {
          flex-direction: column;
          max-width: 453px;
          margin: 0 auto;
          width: 95%; } }
      body #citysupport .area2 .box .df img {
        max-width: 50%; }
        @media only screen and (max-width: 800px) {
          body #citysupport .area2 .box .df img {
            max-width: 100%;
            margin-bottom: 10px; } }