@charset "UTF-8";
* {
  font-family: "Noto Sans JP", sans-serif;
  font-optical-sizing: auto;
  font-weight: normal;
  font-style: normal;
  text-align: justify;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  color: #1A1A1A;
  list-style-type: none;
  text-decoration: none; }
  * img {
    pointer-events: none; }

.sp {
  display: none; }

.pc {
  display: block; }

#toTopButton {
  position: fixed;
  bottom: 50px;
  right: 50px;
  display: none;
  width: 60px;
  height: 60px;
  background-color: transparent;
  /* 背景を透明に */
  border: none;
  border-radius: 50%;
  /* 正円にする */
  cursor: pointer;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  background-image: url("img/arrow-up.png");
  /* 画像を設定 */
  background-size: cover;
  /* 画像をボタン全体にフィット */
  background-position: center;
  transition: transform 0.3s, box-shadow 0.3s;
  z-index: 999; }

#toTopButton:hover {
  transform: scale(1.1);
  /* ホバー時に少し拡大 */
  box-shadow: 0 6px 8px rgba(0, 0, 0, 0.2); }

header {
  position: relative;
  height: 100px; }
  header .logo {
    z-index: 500;
    position: fixed;
    top: 0;
    left: 0; }
    header .logo img {
      width: 370px; }
  header #navi {
    position: fixed;
    z-index: 200;
    background-color: rgba(255, 255, 255, 0.7);
    height: 80px;
    width: 100%;
    top: 0px;
    right: 0px; }
    header #navi ul {
      display: flex;
      justify-content: space-between;
      align-items: center;
      width: 950px;
      position: absolute;
      top: 12px;
      right: 50px; }
      header #navi ul li:nth-of-type(even) a {
        color: #2f74b3; }
      header #navi ul li a {
        font-size: 17px;
        color: #01327e;
        text-align: center;
        display: inline-block;
        font-weight: bold; }

.logoSp {
  display: none; }

.slidePC {
  display: block;
  position: relative; }
  .slidePC .border01 {
    background-image: url("img/border01.png");
    background-position: center right;
    width: 100%;
    background-size: cover;
    height: 180px;
    position: absolute;
    top: -50px;
    left: 0;
    z-index: 100; }
  .slidePC .swiperHero {
    width: 100%;
    height: 1200px;
    position: relative;
    z-index: 1; }
    .slidePC .swiperHero a {
      font-size: 20px;
      -ms-writing-mode: tb-rl;
      writing-mode: vertical-rl;
      text-orientation: upright;
      -webkit-text-orientation: upright;
      position: absolute;
      left: 50px;
      bottom: 50px;
      background-color: white;
      padding: 10px;
      display: block;
      transition: all 0.5s 0s ease;
      z-index: 999; }
      .slidePC .swiperHero a:hover {
        color: white; }

.slideSP {
  display: none; }

.swiper-slide {
  padding-top: 0px;
  /* 画像位置の調整用 */
  background-size: cover;
  background-position: 50% 50%;
  background-repeat: no-repeat; }

.caption-container {
  display: none;
  position: absolute;
  bottom: 150px;
  /* 下から50px */
  left: 50%;
  /* 左右中央 */
  transform: translateX(-50%);
  background-color: #488ace;
  /* 半透明の背景 */
  color: white;
  /* テキストカラー */
  padding: 10px 20px;
  /* 余白 */
  border-radius: 5px;
  /* 角丸 */
  font-size: 16px;
  /* フォントサイズ */
  text-align: center;
  /* テキスト中央揃え */
  z-index: 10;
  /* 背景より前に表示 */
  font-weight: bold; }
  .caption-container p {
    color: white; }

.border02 {
  background-image: url("img/border02.png");
  background-position: center right;
  width: 100%;
  background-size: cover;
  height: 180px;
  z-index: 100;
  position: absolute;
  top: 1120px;
  left: 0; }

#section01 {
  background: #2f74b3;
  padding: 100px 0; }
  #section01 .intro {
    width: 1000px;
    display: block;
    margin: 0 auto 50px auto; }
    #section01 .intro h1 {
      width: 400px;
      display: inline-block;
      font-size: 28px;
      color: white;
      vertical-align: top;
      font-weight: bold; }
    #section01 .intro p {
      width: 540px;
      display: inline-block;
      margin-left: 55px;
      color: white;
      font-size: 16px;
      line-height: 1.8;
      vertical-align: top; }
  #section01 .images {
    width: 1000px;
    display: block;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    overflow: visible; }
    #section01 .images div {
      position: relative;
      vertical-align: top;
      width: 480px; }
      #section01 .images div .image {
        width: 100%;
        height: 300px;
        background: #C8C8C8;
        border-radius: 10px; }
      #section01 .images div .flame01 {
        position: absolute;
        width: 200px;
        top: -130px;
        left: 0; }
      #section01 .images div .flame02 {
        position: absolute;
        width: 200px;
        bottom: -30px;
        right: -40px; }
      #section01 .images div .title01 {
        position: absolute;
        z-index: 1;
        color: #01327E;
        left: 54px;
        top: -70px;
        text-align: center; }
      #section01 .images div .title02 {
        position: absolute;
        z-index: 1;
        color: #01327E;
        right: 13px;
        bottom: 24px;
        text-align: center; }
  #section01 .bottomImage {
    width: 1000px;
    display: block;
    margin: 50px auto 0 auto; }
    #section01 .bottomImage div {
      position: relative; }
      #section01 .bottomImage div .image {
        width: 100%;
        height: 300px;
        border-radius: 10px;
        background: #C8C8C8; }
      #section01 .bottomImage div .flame03 {
        position: absolute;
        width: 200px;
        bottom: -66px;
        left: -17px; }
      #section01 .bottomImage div .title03 {
        position: absolute;
        z-index: 1;
        color: #01327E;
        left: 39px;
        bottom: -23px;
        text-align: center; }

.border03 {
  background-image: url("img/border03.png");
  background-position: center center;
  width: 100%;
  background-size: cover;
  height: 180px;
  z-index: 100; }

#section02 {
  padding: 100px 0; }
  #section02 .imageRight {
    width: 1001px;
    margin: 0 auto; }
    #section02 .imageRight .left {
      display: inline-block;
      width: 500px;
      position: relative;
      vertical-align: top; }
      #section02 .imageRight .left h1 {
        width: 400px;
        font-size: 28px;
        color: #1A1A1A;
        font-weight: bold; }
      #section02 .imageRight .left .flame04 {
        position: absolute;
        left: -20px;
        top: 200px;
        width: 300px; }
      #section02 .imageRight .left .image {
        width: 280px;
        position: absolute;
        top: 100px;
        right: 20px; }
      #section02 .imageRight .left .position {
        position: absolute;
        left: 40px;
        top: 280px;
        font-size: 16px; }
      #section02 .imageRight .left .name {
        position: absolute;
        left: 85px;
        top: 305px;
        font-size: 23px; }
    #section02 .imageRight .right {
      display: inline-block;
      width: 480px;
      vertical-align: top; }
      #section02 .imageRight .right p {
        font-size: 16px;
        line-height: 1.8; }
  #section02 .imageLeft {
    width: 1001px;
    margin: 100px auto 0 auto;
    display: flex;
    justify-content: space-between; }
    #section02 .imageLeft .left {
      display: inline-block;
      width: 500px;
      position: relative; }
      #section02 .imageLeft .left h1 {
        width: 400px;
        font-size: 28px;
        color: #1A1A1A;
        font-weight: bold;
        position: absolute;
        top: 0;
        right: 0; }
      #section02 .imageLeft .left .flame04 {
        position: absolute;
        right: 20px;
        top: 200px;
        width: 300px; }
      #section02 .imageLeft .left .image {
        width: 280px;
        position: absolute;
        top: 100px;
        left: -20px; }
      #section02 .imageLeft .left .position {
        position: absolute;
        right: 50px;
        top: 280px;
        font-size: 16px; }
      #section02 .imageLeft .left .name {
        position: absolute;
        right: 50px;
        top: 305px;
        font-size: 23px; }
    #section02 .imageLeft .right {
      display: inline-block;
      width: 480px; }
      #section02 .imageLeft .right p {
        font-size: 16px;
        line-height: 1.8; }

.border04 {
  background-image: url("img/border04.png");
  background-position: center center;
  width: 100%;
  background-size: cover;
  height: 180px;
  z-index: 100; }

#section03 {
  padding: 0 0 100px 0;
  background: #7CBDF2; }
  #section03 > div {
    width: 1000px;
    border-radius: 20px;
    background: white;
    position: relative;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    padding: 50px; }
    #section03 > div .title {
      position: absolute;
      width: 350px;
      right: -20px;
      top: -175px;
      z-index: 1; }
    #section03 > div .left {
      width: 480px; }
      #section03 > div .left img {
        width: 250px;
        display: block;
        margin: 0 auto; }
    #section03 > div .right {
      width: 400px;
      z-index: 3; }
      #section03 > div .right h1 {
        width: 400px;
        padding: 10px 0;
        background: #FEF6BD;
        border-radius: 50px;
        display: block;
        font-weight: bold;
        font-size: 28px;
        text-align: center;
        margin-bottom: 30px;
        z-index: 3;
        letter-spacing: 0.2em; }
      #section03 > div .right p {
        padding-left: 20px; }
      #section03 > div .right .position {
        font-size: 18px; }
      #section03 > div .right .name {
        font-size: 23px;
        margin-bottom: 30px; }
      #section03 > div .right .ex {
        font-size: 16px;
        line-height: 1.8; }

.border05 {
  background-image: url("img/border05.png");
  background-position: center center;
  width: 100%;
  background-size: cover;
  height: 180px;
  z-index: 100; }

#section04 {
  padding: 100px 0 100px 0; }
  #section04 > div {
    width: 1000px;
    display: block;
    margin: 0 auto;
    position: relative; }
    #section04 > div .title {
      width: 370px;
      position: absolute;
      left: -60px;
      top: -260px; }
    #section04 > div ul {
      width: 1000px;
      display: flex;
      margin: 0 auto;
      justify-content: space-between;
      flex-wrap: wrap; }
      #section04 > div ul li {
        width: 315px;
        padding: 30px;
        background: #EDEDED;
        position: relative;
        border-radius: 0 20px 20px 20px;
        margin-bottom: 65px; }
        #section04 > div ul li .head {
          padding: 10px 30px 0 30px;
          background: #EDEDED;
          border-radius: 10px 10px 0 0;
          display: table;
          position: absolute;
          top: -38px;
          left: 0;
          color: #01327E; }
          #section04 > div ul li .head .year {
            font-size: 14px;
            display: inline-block;
            vertical-align: bottom;
            margin-right: 10px; }
          #section04 > div ul li .head .month {
            font-size: 16px;
            display: inline-block;
            vertical-align: bottom; }
            #section04 > div ul li .head .month span {
              font-size: 22px;
              vertical-align: bottom;
              display: inline-block;
              margin-bottom: -3px;
              margin-right: 3px; }
        #section04 > div ul li .body .swiper01 {
          width: 100%;
          height: 150px;
          margin-bottom: 20px; }
          #section04 > div ul li .body .swiper01 img {
            width: 100%;
            border-radius: 10px; }
        #section04 > div ul li .body dl dt {
          color: #01327E;
          font-size: 20px;
          text-align: center;
          padding-bottom: 10px;
          border-bottom: dashed thin black;
          margin-bottom: 10px; }
          #section04 > div ul li .body dl dt span.narrow {
            transform: scale(0.7, 1);
            transform-origin: left;
            display: block;
            width: 142%;
            text-align: center;
            color: #01327E; }
        #section04 > div ul li .body dl dd {
          font-size: 16px;
          line-height: 1.5; }

.border06 {
  background-image: url("img/border06.png");
  background-position: center center;
  width: 100%;
  background-size: cover;
  height: 180px;
  z-index: 100; }

/*	> div {
		
		background: white;
		width: 1000px;
		border-radius: 20px;
		padding: 50px;
		display: block;
		margin:  0 auto;
		position: relative;
		

        
        .image {
            
            width: 100%;
            display: block;
            margin: 0 auto;
        }
		
				h1 {
				
				width: 400px;
				padding: 10px 0;
				background: #FEF6BD;
				border-radius: 50px;
				display: block;
				font-weight: bold;
				font-size: 28px;
				text-align: center;
				margin-bottom: 30px;
				z-index: 3;
					letter-spacing: 0.2ex;
				
			}
		
		.intro {
			
			width: 100%;
			position: relative;
			margin-bottom: 30px;
			
			h2 {
				
				font-weight: bold;
				font-size: 28px;
				color: #01327E;
				margin-bottom: 30px;
				
			}
			
			p {
				
				font-size: 16px;
				line-height: 1.8;
				width: 60%;
				
			}
			
			img {
				
				width: 280px;
				height: auto;
				background: #D4D4D4;
				position: absolute;
				top: 100px;
				right: 0;
                
			}
		}
        
        .info {
            
            color: #01327e;
            border: solid 3px #01327e;
            border-radius: 5px;
            padding: 5px 10px;
            text-align: center;
            display: block;
            margin: 50px auto 0 auto;
            font-size: 30px;
            width: 300px;
            font-weight: bold;
            
        }
		
		ul {
			
			li {
				
				border: 2px solid #488ACE;
				box-shadow: 5px 5px 0 #488ACE;
				border-radius: 130px;
				padding: 20px 70px;
				height: 250px;
				margin-bottom: 35px;
				
				img {
					
					width: 300px;
					height: 207px;
					background: #D4D4D4;
					display: inline-block;
					border-radius: 20px;
					vertical-align: top;
					margin-right: 20px;
					
				}
				
				dl {
					
					display: inline-block;
					vertical-align: top;
					width: 430px;
					
					dt {
						
						font-weight: bold;
						font-size: 22px;
						padding-top: 20px;
						margin-bottom: 20px;
						color: #2F74B3;
						
					}
					
					dd {
						
						font-size: 16px;
						line-height: 1.8;
						
					}
				}
				
			}
		}
		
	}*/
.border07 {
  background-image: url("img/border07.png");
  background-position: center center;
  width: 100%;
  background-size: cover;
  height: 180px;
  z-index: 100; }

#section06 {
  padding: 150px 0 100px 0; }
  #section06 > div {
    width: 1000px;
    display: block;
    margin: 0 auto;
    position: relative;
    box-shadow: 0px 0px 15px -5px #777777;
    border-radius: 10px;
    padding: 30px; }
    #section06 > div .title {
      width: 370px;
      position: absolute;
      left: -50px;
      top: -180px; }
    #section06 > div p {
      width: 600px;
      text-decoration: underline dashed #2f74b3;
      text-underline-offset: 5px;
      font-size: 18px;
      line-height: 2;
      position: absolute;
      top: 50px;
      right: 50px;
      display: block; }
      #section06 > div p span {
        text-decoration: none; }
    #section06 > div .attention {
      position: static;
      text-decoration: none;
      text-align: center;
      font-size: 14px;
      top: auto;
      right: auto;
      width: auto;
      margin-top: 30px;
      color: red; }
    #section06 > div ul {
      display: flex;
      justify-content: space-between;
      margin-top: 320px; }
      #section06 > div ul li {
        position: relative; }
        #section06 > div ul li .subTitle {
          position: absolute;
          width: 170px;
          top: -50px;
          left: -20px; }
        #section06 > div ul li > div {
          width: 420px;
          height: 280px;
          background: #2F74B3;
          box-shadow: 5px 5px 7px -2px #777777;
          padding: 15px;
          border-radius: 10px;
          box-sizing: content-box; }
          #section06 > div ul li > div img {
            width: 100%;
            height: auto;
            background: white;
            border-radius: 5px; }
          #section06 > div ul li > div iframe {
            width: 420px;
            height: 280px; }
    #section06 > div .pdf {
      display: flex;
      justify-content: space-between;
      margin-top: 30px;
      width: 100%; }
      #section06 > div .pdf a {
        display: block;
        background-color: #ffd765;
        border-radius: 30px;
        padding: 15px 0 15px 20px;
        font-size: 18px;
        font-weight: bold;
        width: 30%;
        text-align: center;
        transition: 0.3s all; }
        #section06 > div .pdf a:hover {
          background-color: #2f6fa7;
          color: white; }

.border08 {
  background-image: url("img/border08.png");
  background-position: top left;
  width: 100%;
  background-size: cover;
  height: 180px;
  z-index: 100; }

#section07 {
  padding: 100px 0;
  background: #7CBDF2; }
  #section07 > div {
    width: 1000px;
    margin: 0 auto;
    position: relative;
    background-color: white;
    padding: 50px;
    border-radius: 20px; }
    #section07 > div .title {
      width: 370px;
      position: absolute;
      right: -25px;
      top: -155px; }
    #section07 > div > div {
      margin-top: 30px; }
      #section07 > div > div iframe {
        width: 900px;
        height: 600px; }
      #section07 > div > div > p {
        width: 600px;
        display: block;
        margin: 10px auto 0 auto; }
      #section07 > div > div ul {
        display: flex;
        justify-content: space-between;
        margin-top: 55px; }
        #section07 > div > div ul li iframe {
          width: 420px;
          height: 280px; }
        #section07 > div > div ul li p {
          width: 420px; }
        #section07 > div > div ul img {
          width: 440px; }

.border09 {
  background-image: url("img/border09.png");
  background-position: center center;
  width: 100%;
  background-size: cover;
  height: 180px;
  z-index: 100; }

#section08 {
  padding: 300px 0 0 0; }
  #section08 > div {
    width: 1000px;
    position: relative;
    margin: 0 auto; }
    #section08 > div .title {
      width: 510px;
      position: absolute;
      left: -25px;
      top: -255px; }
    #section08 > div ul li {
      display: flex;
      justify-content: space-between;
      margin-bottom: 60px; }
      #section08 > div ul li .swiper02 {
        width: 500px;
        height: 350px;
        margin-bottom: 20px;
        position: relative; }
        #section08 > div ul li .swiper02 img {
          width: 500px;
          border-radius: 10px; }
        #section08 > div ul li .swiper02 .copyright {
          text-align: right;
          font-size: 14px;
          position: absolute;
          right: 0;
          bottom: 30px; }
      #section08 > div ul li dl {
        position: relative;
        width: 450px; }
        #section08 > div ul li dl .topics {
          height: 20px;
          position: absolute;
          top: -23px;
          right: 10px; }
        #section08 > div ul li dl .topicsLeft {
          height: 20px;
          position: absolute;
          top: -23px;
          left: 10px; }
        #section08 > div ul li dl p {
          position: absolute;
          right: 0;
          top: -20px; }
        #section08 > div ul li dl dt {
          width: 100%;
          background: #488ace;
          padding: 8px 0 10px 0;
          border-radius: 30px;
          text-align: center;
          font-size: 23px;
          color: white;
          font-weight: bold;
          margin-bottom: 20px;
          letter-spacing: 0.2em; }
        #section08 > div ul li dl dd {
          line-break: normal; }
    #section08 > div ul .topics03 {
      position: relative; }
      #section08 > div ul .topics03 .title {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        background: #488ace;
        padding: 8px 0 10px 0;
        border-radius: 30px;
        text-align: center;
        font-size: 23px;
        color: white;
        font-weight: bold;
        margin-bottom: 20px;
        letter-spacing: 0.2em; }
      #section08 > div ul .topics03 .topics {
        height: 20px;
        position: absolute;
        top: -23px;
        right: 10px; }
      #section08 > div ul .topics03 .swiper02, #section08 > div ul .topics03 dl {
        margin-top: 80px; }
    #section08 > div li.sp {
      display: none; }

.border10 {
  background-image: url("img/border10.png");
  background-position: center center;
  width: 100%;
  background-size: cover;
  height: 180px;
  z-index: 100; }

#section09 {
  padding: 150px 0 0 0;
  background: #488ace;
  height: 6450px; }
  #section09 > div {
    width: 1000px;
    margin: 0 auto;
    position: relative; }
    #section09 > div .title {
      width: 370px;
      position: absolute;
      right: 0px;
      top: -255px; }
    #section09 > div h1 {
      margin-bottom: 20px;
      width: 300px;
      display: block;
      margin-left: 50px; }
      #section09 > div h1 img {
        width: 100%;
        display: block; }
    #section09 > div .tap {
      width: 170px;
      position: absolute;
      top: -55px;
      left: -163px; }
    #section09 > div .water {
      width: 30px;
      height: 5350px;
      background: #4ec4ee;
      position: absolute;
      top: 90px;
      left: -30px; }
    #section09 > div .waterworks li {
      position: relative;
      margin-bottom: 30px; }
      #section09 > div .waterworks li .line {
        width: 70px;
        height: 2px;
        background: white;
        position: absolute;
        top: 16px;
        left: 0; }
      #section09 > div .waterworks li > div {
        padding-left: 75px; }
        #section09 > div .waterworks li > div h2 {
          font-family: "kaisotai", sans-serif;
          font-weight: 600;
          font-style: normal;
          font-size: 35px;
          margin-bottom: 5px;
          line-height: 1; }
          #section09 > div .waterworks li > div h2 span {
            font-family: "kaisotai", sans-serif;
            font-weight: 600;
            font-style: normal;
            font-size: 25px;
            margin-left: -10px; }
        #section09 > div .waterworks li > div p {
          font-size: 16px;
          width: 400px;
          color: white; }
    #section09 > div .sewage {
      position: absolute;
      left: calc(50% + 100px);
      top: 100px;
      padding-top: 220px; }
      #section09 > div .sewage .tap {
        width: 210px;
        position: absolute;
        top: 0px;
        left: 0px; }
      #section09 > div .sewage .titleSewage {
        position: absolute;
        top: 130px;
        left: 200px;
        width: 300px; }
      #section09 > div .sewage .water {
        width: 29px;
        height: 5900px;
        background: #9D9E9E;
        position: absolute;
        top: 221px;
        left: 6px; }
      #section09 > div .sewage li {
        position: relative;
        margin-bottom: 30px; }
        #section09 > div .sewage li .line {
          width: 70px;
          height: 3px;
          background: white;
          position: absolute;
          top: 16px;
          left: 35px; }
        #section09 > div .sewage li > div {
          padding-left: 110px; }
          #section09 > div .sewage li > div h2 {
            font-family: "kaisotai", sans-serif;
            font-weight: 600;
            font-style: normal;
            font-size: 35px;
            margin-bottom: 5px;
            line-height: 1; }
            #section09 > div .sewage li > div h2 span {
              font-family: "kaisotai", sans-serif;
              font-weight: 600;
              font-style: normal;
              font-size: 25px;
              margin-left: -10px; }
          #section09 > div .sewage li > div p {
            font-size: 16px;
            color: white; }
    #section09 > div h3 {
      font-size: 35px;
      text-align: center;
      color: white;
      margin-top: 800px;
      font-weight: bold; }

.border11 {
  background-image: url("img/border11.png");
  background-position: center center;
  width: 100%;
  background-size: cover;
  height: 180px;
  z-index: 100; }

#section10 {
  padding: 150px 0 100px 0; }
  #section10 > div {
    width: 1000px;
    margin: 0 auto;
    position: relative; }
    #section10 > div .title {
      width: 370px;
      position: absolute;
      left: -10px;
      top: -305px; }
    #section10 > div .intro {
      display: flex;
      justify-content: space-between;
      margin-bottom: 70px; }
      #section10 > div .intro h1 {
        display: inline-block;
        font-size: 28px;
        font-weight: bold;
        color: #2f74b3; }
      #section10 > div .intro p {
        font-size: 16px;
        width: 640px;
        line-height: 1.8; }
    #section10 > div .vision {
      margin-bottom: 50px; }
      #section10 > div .vision img {
        width: 1000px; }
      #section10 > div .vision > div {
        display: flex;
        justify-content: space-between;
        margin-top: 50px; }
        #section10 > div .vision > div h1 {
          font-weight: bold;
          font-size: 28px;
          letter-spacing: 0.2em;
          color: #2f74b3; }
        #section10 > div .vision > div p {
          width: 700px;
          font-size: 16px;
          line-height: 1.8; }
    #section10 > div ul {
      margin-top: 100px; }
      #section10 > div ul li {
        width: 100%;
        padding: 30px 40px;
        background: #e0effc;
        position: relative;
        margin-bottom: 70px;
        border-radius: 50px; }
        #section10 > div ul li h2 {
          background: #2f74b3;
          font-weight: bold;
          font-size: 30px;
          width: 400px;
          padding: 8px 0 10px 0;
          border-radius: 30px;
          color: white;
          text-align: center;
          position: absolute;
          top: -30px;
          left: 50px; }
        #section10 > div ul li div {
          display: flex;
          justify-content: space-between; }
          #section10 > div ul li div p {
            font-size: 16px;
            line-height: 1.8;
            width: 600px;
            padding-top: 20px; }
          #section10 > div ul li div img {
            width: 290px;
            background: #E5E5E5;
            display: block;
            border-radius: 20px;
            height: 201px; }
    #section10 > div ul:nth-of-type(2) {
      display: flex;
      justify-content: space-between; }
      #section10 > div ul:nth-of-type(2) li {
        width: 48%; }

.border12 {
  background-image: url("img/border12.png");
  background-position: center center;
  width: 100%;
  background-size: cover;
  height: 180px;
  z-index: 100; }

#section11 {
  padding: 150px 0 100px 0;
  background: #7CBDF2; }
  #section11 .mapPC {
    position: relative;
    margin: 0 auto;
    display: table;
    background-image: url("img/mapBack.jpg");
    background-repeat: no-repeat;
    width: 960px;
    height: 1000px;
    background-size: contain; }
    #section11 .mapPC .title {
      width: 370px;
      position: absolute;
      right: 0px;
      top: -200px; }
    #section11 .mapPC a img {
      height: 100px;
      position: absolute;
      pointer-events: auto; }
      #section11 .mapPC a img:hover {
        opacity: 0.5; }
    #section11 .mapPC a .map01 {
      top: 146px;
      left: 474px; }
    #section11 .mapPC a .map02 {
      top: 258px;
      left: 515px; }
    #section11 .mapPC a .map03 {
      top: 392px;
      left: 587px; }
    #section11 .mapPC a .map04 {
      top: 460px;
      left: 352px; }
    #section11 .mapPC a .map05 {
      top: 520px;
      left: 353px;
      height: 140px; }
    #section11 .mapPC a .map06 {
      top: 450px;
      left: 682px; }
  #section11 .mapSP {
    display: none; }
  #section11 p {
    font-size: 16px;
    display: block;
    width: 500px;
    margin: 50px auto 0 auto;
    line-height: 1.8;
    text-align: justify; }

.border13 {
  background-image: url("img/border13.png");
  background-position: center center;
  width: 100%;
  background-size: cover;
  height: 180px;
  z-index: 100; }

#section12 {
  padding: 100px 0; }
  #section12 ul {
    display: table;
    margin: 0 auto; }
    #section12 ul li {
      width: 750px;
      padding: 30px;
      /* drop-shadow */
      box-shadow: 0px 0px 15px -5px #777777;
      border-radius: 30px;
      margin-bottom: 30px; }
      #section12 ul li .title {
        font-size: 31px;
        text-align: center;
        padding: 5px 0 8px 0;
        background-color: #6c578d;
        font-weight: bold;
        color: white;
        border-radius: 30px;
        margin-bottom: 25px; }
      #section12 ul li > div {
        display: flex;
        justify-content: space-between;
        /*                img {
                            
                            width: 330px;
                            height: 230px;
                            background: #C9C9C9;
                            border-radius: 10px;
                            
                        }*/ }
        #section12 ul li > div .swiper02 {
          width: 330px;
          height: 230px;
          margin-bottom: 20px; }
          #section12 ul li > div .swiper02 img {
            width: 340px;
            height: auto;
            border-radius: 10px; }
        #section12 ul li > div .ex {
          width: 330px;
          line-height: 1.8;
          padding-right: 10px; }

footer {
  background: #2f74b3;
  padding: 70px 0; }
  footer div {
    width: 1000px;
    margin: 0 auto;
    position: relative; }
    footer div > img {
      width: 470px;
      display: block;
      margin-bottom: 70px; }
    footer div dl dt {
      font-size: 23px;
      font-weight: bold;
      color: white;
      margin-bottom: 10px; }
    footer div dl dd {
      font-size: 16px;
      line-height: 2;
      color: white; }
      footer div dl dd span {
        color: white; }
        footer div dl dd span a {
          color: white; }
          footer div dl dd span a:hover {
            text-decoration: underline; }
    footer div p {
      text-align: center;
      display: block;
      margin: 0 auto 0 0;
      font-size: 12px;
      color: white; }
    footer div a {
      display: block;
      width: 200px;
      position: absolute;
      transition: 0.3s all; }
      footer div a:hover {
        opacity: 0.7; }
      footer div a img {
        width: 100%;
        height: auto; }
    footer div .banner01 {
      right: 0;
      bottom: 100px; }
    footer div .banner02 {
      right: 0;
      bottom: 20px; }

@media (min-width: 768px) and (max-width: 1100px) {
  header {
    position: relative;
    height: 100px; }
    header .logo {
      z-index: 500;
      position: fixed;
      top: 0;
      left: 0; }
      header .logo img {
        width: 200px; }
    header #navi {
      position: fixed;
      z-index: 200;
      background-color: rgba(255, 255, 255, 0.7);
      height: 80px;
      width: 100%;
      top: 0px;
      right: 0px; }
      header #navi ul {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 750px;
        position: absolute;
        top: 12px;
        right: 50px; }
        header #navi ul li:nth-of-type(even) a {
          color: #2f74b3; }
        header #navi ul li a {
          font-size: 14px;
          color: #01327e;
          text-align: center;
          display: inline-block;
          font-weight: bold; } }
@media (max-width: 768px) {
  .sp {
    display: block; }

  .pc {
    display: none; }

  #toTopButton {
    display: none; }

  header {
    display: none; }

  .logoSp {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1000; }
    .logoSp img {
      width: 60%; }

  .slidePC {
    display: none; }

  .slideSP {
    display: block; }
    .slideSP .swiper-container {
      overflow: hidden !important; }
    .slideSP .swiperHero {
      width: 100%;
      height: 100vh;
      position: relative;
      z-index: 1; }
      .slideSP .swiperHero a {
        font-size: 20px;
        -ms-writing-mode: tb-rl;
        writing-mode: vertical-rl;
        text-orientation: upright;
        -webkit-text-orientation: upright;
        position: absolute;
        left: 50px;
        bottom: 50px;
        background-color: white;
        padding: 10px;
        display: block;
        transition: all 0.5s 0s ease;
        z-index: 999; }
        .slideSP .swiperHero a:hover {
          color: white; }

  #section01 {
    background: #2F74B3;
    padding: 100px 0; }
    #section01 .intro {
      width: 90%;
      display: block;
      margin: 0 auto 50px auto; }
      #section01 .intro h1 {
        width: auto;
        display: block;
        font-size: 25px;
        color: white;
        text-align: center;
        font-weight: bold;
        margin-bottom: 30px; }
      #section01 .intro p {
        width: 100%;
        display: block;
        margin-left: 0;
        color: white;
        font-size: 15px;
        line-height: 1.8;
        vertical-align: top; }
    #section01 .images {
      width: 90%;
      display: block;
      margin: 0 auto;
      display: block; }
      #section01 .images > div {
        position: relative;
        width: 100%;
        margin-bottom: 20px; }
        #section01 .images > div .image {
          width: 100%;
          height: auto;
          background: #C8C8C8;
          border-radius: 10px; }
        #section01 .images > div .flame01 {
          position: absolute;
          width: 100px;
          top: -30px;
          left: -10px; }
        #section01 .images > div .flame02 {
          position: absolute;
          width: 100px;
          bottom: -14px;
          right: -10px; }
        #section01 .images > div .title01 {
          position: absolute;
          z-index: 1;
          color: #01327E;
          left: 4px;
          top: -5px;
          text-align: center;
          font-size: 13px; }
        #section01 .images > div .title02 {
          position: absolute;
          z-index: 1;
          color: #01327E;
          right: 2px;
          bottom: 7px;
          text-align: center;
          font-size: 13px; }
    #section01 .bottomImage {
      width: 90%;
      display: block;
      margin: 20px auto 0 auto; }
      #section01 .bottomImage div {
        position: relative; }
        #section01 .bottomImage div .image {
          width: 100%;
          height: auto;
          border-radius: 10px;
          background: #C8C8C8; }
        #section01 .bottomImage div .flame03 {
          position: absolute;
          width: 100px;
          bottom: -10px;
          left: -10px; }
        #section01 .bottomImage div .title03 {
          position: absolute;
          z-index: 1;
          color: #01327E;
          left: 2px;
          bottom: 4px;
          text-align: center;
          font-size: 13px; }

  .border03 {
    background-image: url("img/border03.png");
    background-position: center center;
    width: 100%;
    background-size: cover;
    background-repeat: no-repeat;
    height: 30px;
    z-index: 100; }

  #section02 {
    padding: 100px 0;
    overflow: hidden; }
    #section02 .imageRight {
      width: 90%;
      margin: 0 auto;
      display: block; }
      #section02 .imageRight .left {
        display: block;
        width: 100%;
        position: relative;
        margin: 0 auto;
        padding-top: 200px;
        position: relative; }
        #section02 .imageRight .left h1 {
          width: auto;
          font-size: 28px;
          color: #1A1A1A;
          font-weight: bold;
          position: relative;
          top: -180px;
          left: 0;
          text-align: center; }
        #section02 .imageRight .left .flame04 {
          position: absolute;
          left: calc(50% - 265px);
          bottom: 0;
          width: 300px; }
        #section02 .imageRight .left .image {
          width: 280px;
          position: absolute;
          bottom: 0;
          right: calc(50% - 240px); }
        #section02 .imageRight .left .position {
          position: absolute;
          left: calc(50% - 140px);
          bottom: 110px;
          font-size: 16px; }
        #section02 .imageRight .left .name {
          position: absolute;
          left: calc( 50% - 140px);
          bottom: 75px;
          font-size: 23px; }
      #section02 .imageRight .right {
        display: block;
        width: 100%;
        margin-top: 210px;
        height: auto; }
        #section02 .imageRight .right p {
          font-size: 16px;
          line-height: 1.8;
          height: auto;
          display: block; }
    #section02 .imageLeft {
      width: 90%;
      margin: 100px auto 0 auto;
      display: block; }
      #section02 .imageLeft .left {
        display: block;
        width: 100%;
        position: relative; }
        #section02 .imageLeft .left h1 {
          width: auto;
          font-size: 28px;
          color: #1A1A1A;
          font-weight: bold;
          position: static;
          top: auto;
          right: auto;
          text-align: center; }
        #section02 .imageLeft .left .flame04 {
          position: absolute;
          right: calc(50% - 265px);
          bottom: 0;
          width: 300px; }
        #section02 .imageLeft .left .image {
          width: 280px;
          position: absolute;
          bottom: 0;
          left: calc(50% - 240px); }
        #section02 .imageLeft .left .position {
          position: absolute;
          right: calc(50% - 160px);
          bottom: auto;
          font-size: 11px;
          top: 285px; }
        #section02 .imageLeft .left .name {
          position: absolute;
          right: calc( 50% - 140px);
          bottom: 75px;
          font-size: 23px; }
      #section02 .imageLeft .right {
        display: block;
        width: 100%;
        margin-top: 400px; }
        #section02 .imageLeft .right p {
          font-size: 16px;
          line-height: 1.8; }

  .border04 {
    background-image: url("img/border04.png");
    background-position: center center;
    width: 100%;
    background-size: cover;
    height: 30px;
    z-index: 100; }

  #section03 {
    padding: 100px 0;
    background: #7CBDF2; }
    #section03 > div {
      width: 90%;
      border-radius: 20px;
      background: white;
      position: relative;
      margin: 0 auto;
      display: block;
      padding: 10px 10px 20px 10px; }
      #section03 > div .title {
        position: absolute;
        width: 300px;
        right: calc(50% - 150px);
        top: -175px;
        z-index: 1; }
      #section03 > div .left {
        width: 100%; }
        #section03 > div .left img {
          width: 70%;
          display: block;
          margin: 0 auto;
          padding-top: 50px; }
      #section03 > div .right {
        width: 100%;
        z-index: 3; }
        #section03 > div .right h1 {
          width: auto;
          padding: 10px 0;
          background: #FEF6BD;
          border-radius: 50px;
          display: block;
          font-weight: bold;
          font-size: 23px;
          text-align: center;
          margin-bottom: 30px;
          margin-top: 30px;
          z-index: 3;
          letter-spacing: 0.1em; }
        #section03 > div .right p {
          padding: 0 10px; }
        #section03 > div .right .position {
          font-size: 15px;
          font-weight: bold; }
        #section03 > div .right .name {
          font-size: 20px;
          margin-bottom: 30px;
          font-weight: bold; }
          #section03 > div .right .name span {
            font-size: 15px;
            font-weight: bold; }
        #section03 > div .right .ex {
          font-size: 16px;
          line-height: 1.8; }

  .border05 {
    background-image: url("img/border05.png");
    background-position: center center;
    width: 100%;
    background-size: cover;
    height: 30px;
    z-index: 100; }

  #section04 {
    padding: 200px 0 100px 0; }
    #section04 > div {
      width: 90%;
      display: block;
      margin: 0 auto;
      position: relative; }
      #section04 > div .title {
        width: 300px;
        position: absolute;
        left: calc(50% - 150px);
        top: -280px; }
      #section04 > div ul {
        width: 100%;
        display: block;
        margin: 30px auto 0 auto; }
        #section04 > div ul li {
          width: 100%;
          padding: 30px;
          background: #EDEDED;
          position: relative;
          border-radius: 0 20px 20px 20px;
          margin-bottom: 65px; }
          #section04 > div ul li .head {
            padding: 10px 30px 0 30px;
            background: #EDEDED;
            border-radius: 10px 10px 0 0;
            display: table;
            position: absolute;
            top: -38px;
            left: 0;
            color: #01327E; }
            #section04 > div ul li .head .year {
              font-size: 14px;
              display: inline-block;
              vertical-align: bottom;
              margin-right: 10px; }
            #section04 > div ul li .head .month {
              font-size: 16px;
              display: inline-block;
              vertical-align: bottom; }
              #section04 > div ul li .head .month span {
                font-size: 22px;
                vertical-align: bottom;
                display: inline-block;
                margin-bottom: -3px;
                margin-right: 3px; }
          #section04 > div ul li .body .swiper01 {
            width: 100%;
            height: 150px;
            margin-bottom: 50px; }
            #section04 > div ul li .body .swiper01 img {
              width: 100%;
              border-radius: 10px; }
          #section04 > div ul li .body dl dt {
            color: #01327E;
            font-size: 20px;
            text-align: center;
            padding-bottom: 10px;
            border-bottom: dashed thin black;
            margin-bottom: 10px; }
            #section04 > div ul li .body dl dt span.narrow {
              transform: scale(0.7, 1);
              transform-origin: left;
              display: block;
              width: 142%;
              text-align: center;
              color: #01327E; }
          #section04 > div ul li .body dl dd {
            font-size: 15px;
            line-height: 1.5; }

  .border06 {
    background-image: url("img/border06.png");
    background-position: center center;
    width: 100%;
    background-size: cover;
    height: 30px;
    z-index: 100; }

  #section05 {
    background: #2F74B3;
    padding: 200px 0 100px 0; }
    #section05 > div {
      /*background: white;
      width: 90%;
      border-radius: 20px;
      padding: 80px 20px 20px 20px;
      display: block;
      margin:  0 auto;
      position: relative;*/
      		/*		h1 {
      				
      				width: auto;
      				padding: 10px 0;
      				background: #FEF6BD;
      				border-radius: 50px;
      				display: block;
      				font-weight: bold;
      				font-size: 25px;
      				text-align: center;
      				margin-bottom: 30px;
      				z-index: 3;
      					letter-spacing: 0.1ex;
      				
      			}
      		
      		.intro {
      			
      			width: 100%;
      			position: relative;
      			margin-bottom: 30px;
      			
      			h2 {
      				
      				font-weight: bold;
      				font-size: 25px;
      				color: #01327E;
      				margin-bottom: 30px;
                      text-align: center;
      				
      			}
      			
      			p {
      				
      				font-size: 15px;
      				line-height: 1.8;
      				width: 100%;
      				
      			}
      			
      			img {
      				
      				width: 100%;
      				height: auto;
      				background: #D4D4D4;
      				position: relative;
                      display: block;
                      margin: 20px auto 0 auto;
                      top: 0;
      
      			}
      		}
      		
      		ul {
      			
      			li {
      				
      				border: 2px solid #488ACE;
      				box-shadow: 5px 5px 0 #488ACE;
      				border-radius: 30px;
      				padding: 20px;
      				height: auto;
      				margin-bottom: 35px;
      				
      				img {
      					
      					width: 100%;
      					height: auto;
      					background: #D4D4D4;
      					display: block;
      					border-radius: 20px;
      					margin: 0 auto;
      					
      				}
      				
      				dl {
      					
      					display: block;
      					width: 100%;
      					
      					dt {
      						
      						font-weight: bold;
      						font-size: 22px;
      						padding-top: 20px;
      						margin-bottom: 10px;
      						color: #2F74B3;
      						
      					}
      					
      					dd {
      						
      						font-size: 15px;
      						line-height: 1.8;
                              
      						
      					}
      				}
      				
      			}
      		}*/ }

  .border08 {
    background-image: url("img/border08.png");
    background-position: top left;
    width: 100%;
    background-size: cover;
    height: 30px;
    z-index: 100; }

  .border07 {
    background-image: url("img/border07.png");
    background-position: center center;
    width: 100%;
    background-size: cover;
    height: 30px;
    z-index: 100; }

  #section06 {
    padding: 200px 0 100px 0; }
    #section06 > div {
      width: 90%;
      display: block;
      margin: 0 auto;
      position: relative;
      box-shadow: 0px 0px 15px -5px #777777;
      border-radius: 10px;
      padding: 20px; }
      #section06 > div .title {
        width: 300px;
        position: absolute;
        right: calc(50% - 150px);
        top: -155px;
        left: auto; }
      #section06 > div p {
        width: 100%;
        text-decoration: underline dashed #2f74b3;
        text-underline-offset: 5px;
        font-size: 18px;
        line-height: 2;
        position: relative;
        display: block;
        top: 130px;
        right: auto; }
      #section06 > div .attention {
        position: static;
        text-decoration: none;
        text-align: center;
        font-size: 12px;
        top: auto;
        right: auto;
        width: auto;
        margin-top: 30px;
        color: red; }
      #section06 > div ul {
        display: block;
        margin-top: 200px; }
        #section06 > div ul li {
          position: relative;
          margin-bottom: 70px; }
          #section06 > div ul li .subTitle {
            position: absolute;
            width: 170px;
            top: -50px;
            left: -20px; }
          #section06 > div ul li > div {
            width: 100%;
            height: auto;
            background: #D7D7D7;
            box-sizing: border-box; }
            #section06 > div ul li > div iframe {
              width: 100%;
              height: auto; }
        #section06 > div ul li:nth-of-type(2) .subTitle {
          position: absolute;
          width: 170px;
          top: -100px;
          left: -20px; }
      #section06 > div .pdf {
        display: flex;
        justify-content: space-between;
        margin-top: 30px;
        width: 100%; }
        #section06 > div .pdf a {
          display: block;
          background-color: #ffd765;
          border-radius: 20px;
          padding: 15px 0 15px 0px;
          font-size: 18px;
          font-weight: bold;
          width: 31%;
          text-align: center; }

  #section07 {
    padding: 100px 0;
    background: #7CBDF2; }
    #section07 > div {
      width: 90%;
      border-radius: 20px;
      background: white;
      padding: 20px;
      display: block;
      margin: 0 auto; }
      #section07 > div .title {
        width: 300px;
        position: absolute;
        left: calc(50% - 150px);
        top: -155px; }
      #section07 > div .intro {
        margin-top: 60px; }
      #section07 > div > div {
        margin-top: 30px; }
        #section07 > div > div iframe {
          width: 100%;
          height: auto;
          aspect-ratio: 16 / 9; }
        #section07 > div > div > p {
          width: 100%;
          margin-top: 0; }
        #section07 > div > div ul {
          display: block;
          margin-top: 35px; }
          #section07 > div > div ul li {
            margin-bottom: 30px; }
            #section07 > div > div ul li iframe {
              width: 100%;
              height: auto;
              aspect-ratio: 16 / 9; }
            #section07 > div > div ul li p {
              width: 100%; }
          #section07 > div > div ul img {
            width: 100%;
            height: auto; }

  /*#section07 {
  	
  	padding: 100px 0;
  	background: #7CBDF2;
  	
  	> div {
  		
  		width: 90%;
  		border-radius: 20px;
  		background: white;
  		padding: 20px;
  		display: block;
  		margin:  0 auto;
  		
  		.title {
  			
  			width: 300px;
  			position: absolute;
  			left: calc(50% - 150px);
  			top: -155px;
  			
  		}
  		
  		div {
  			
  			img {
  			
  			width: 100%;
  			height: auto;
  				margin-top: 50px;
  			
  		}
  			
  			
  		}
  		
  		
  		
  	}
  }*/
  .border09 {
    background-image: url("img/border09.png");
    background-position: center center;
    width: 100%;
    background-size: cover;
    height: 30px;
    z-index: 100; }

  #section08 {
    padding: 200px 0 100px 0; }
    #section08 > div {
      width: 90%;
      position: relative;
      margin: 0 auto; }
      #section08 > div .title {
        width: 300px;
        position: absolute;
        left: calc(50% - 150px);
        top: -255px; }
      #section08 > div ul li {
        display: block;
        margin-bottom: 80px; }
        #section08 > div ul li .swiper02 {
          width: 100%;
          height: auto;
          margin-bottom: 20px;
          position: relative; }
          #section08 > div ul li .swiper02 img {
            width: 100%;
            height: auto;
            border-radius: 10px; }
          #section08 > div ul li .swiper02 .copyright {
            text-align: right;
            font-size: 14px;
            position: absolute;
            right: 0;
            bottom: -20px; }
        #section08 > div ul li dl {
          position: relative;
          width: 100%;
          margin-top: 35px; }
          #section08 > div ul li dl .topics {
            height: 20px;
            position: absolute;
            top: -23px;
            left: 10px; }
          #section08 > div ul li dl .topicsLeft {
            height: 20px;
            position: absolute;
            top: -23px;
            left: 10px; }
          #section08 > div ul li dl p {
            position: absolute;
            right: 0;
            top: -20px; }
          #section08 > div ul li dl dt {
            width: 100%;
            background: #488ace;
            padding: 8px 0 10px 0;
            border-radius: 30px;
            text-align: center;
            font-size: 23px;
            color: white;
            font-weight: bold;
            margin-bottom: 20px;
            letter-spacing: 0.2em; }
          #section08 > div ul li dl dd {
            font-size: 15px;
            line-height: 1.8; }
      #section08 > div ul .topics03 {
        position: relative;
        display: none;
              /*  .title {
                    
                    position: absolute;
                    top: 250px;
                    left: calc(50% - 175px);
							width: 100%;
                            background: #488ace;
                            padding: 8px 0 10px 0;
                            border-radius: 30px;
                            text-align: center;
                            font-size: 23px;
                            color: white;
                            font-weight: bold;
                            margin-bottom: 20px;
                            letter-spacing: 0.2em;
						}*/ }
        #section08 > div ul .topics03 .title {
          position: absolute;
          top: 250px;
          left: auto;
          width: 100%;
          background: #488ace;
          padding: 8px 0 10px 0;
          border-radius: 30px;
          text-align: center;
          font-size: 20px;
          color: white;
          font-weight: bold;
          margin-bottom: 20px;
          letter-spacing: 0.2em; }
        #section08 > div ul .topics03 .topics {
          height: 20px;
          position: absolute;
          top: 223px;
          left: 10px; }
        #section08 > div ul .topics03 dl {
          margin-top: 175px; }
      #section08 > div ul li.pc {
        display: none; }
      #section08 > div ul li.sp {
        display: block; }

  .border10 {
    background-image: url("img/border10.png");
    background-position: center center;
    width: 100%;
    background-size: cover;
    height: 30px;
    z-index: 100; }

  #section09 {
    padding: 150px 0 100px 0;
    background: #488ace;
    height: auto; }
    #section09 > div {
      width: 100%;
      margin: 0 auto;
      position: relative; }
      #section09 > div .title {
        width: 300px;
        position: absolute;
        right: calc(50% - 150px);
        top: -205px; }
      #section09 > div h1 {
        font-weight: bold;
        text-align: center;
        padding-top: 70px;
        display: block;
        margin: 0 auto 120px auto; }
      #section09 > div .tap {
        width: 80px;
        position: absolute;
        top: 160px;
        left: 0px; }
      #section09 > div .waterworks {
        margin-top: 150px;
        width: auto;
        display: block;
        margin: 0 auto;
        position: relative; }
        #section09 > div .waterworks .water {
          width: 10px;
          /*height: 5130px;*/
          background: #4ec4ee;
          position: absolute;
          top: 228px;
          left: 65px; }
        #section09 > div .waterworks li {
          position: relative;
          margin-bottom: 30px; }
          #section09 > div .waterworks li .line {
            width: 20px;
            height: 2px;
            background: white;
            position: absolute;
            top: -10px;
            left: 75px; }
          #section09 > div .waterworks li div {
            position: relative;
            top: -24px;
            left: 25px;
            width: calc(100% - 50px); }
            #section09 > div .waterworks li div h2 {
              font-family: "kaisotai", sans-serif;
              font-weight: 600;
              font-style: normal;
              font-size: 30px;
              margin-bottom: 5px;
              line-height: 1; }
              #section09 > div .waterworks li div h2 span {
                font-family: "kaisotai", sans-serif;
                font-weight: 600;
                font-style: normal;
                font-size: 20px;
                margin-left: -10px; }
            #section09 > div .waterworks li div p {
              font-size: 14px;
              line-height: 1.5;
              width: 100%; }
      #section09 > div .sewage {
        margin-top: 150px;
        position: relative;
        top: auto;
        left: auto;
        width: 100%;
        margin: 50px auto 0 auto; }
        #section09 > div .sewage .titleSewage {
          width: 300px;
          top: 0;
          left: calc(50% - 150px);
          position: absolute; }
        #section09 > div .sewage .tap {
          width: 80px;
          position: absolute;
          top: 100px;
          left: 60px; }
        #section09 > div .sewage .water {
          width: 10px;
          height: 5400px;
          background: #9D9E9E;
          position: absolute;
          top: 184px;
          left: 63px; }
        #section09 > div .sewage li {
          position: relative;
          margin-bottom: 30px;
          padding-left: 75px; }
          #section09 > div .sewage li .line {
            width: 20px;
            height: 2px;
            background: white;
            position: absolute;
            top: -10px;
            left: 73px; }
          #section09 > div .sewage li div {
            position: relative;
            top: -24px;
            left: auto;
            width: 90%;
            padding-left: 15px; }
            #section09 > div .sewage li div h2 {
              font-family: "kaisotai", sans-serif;
              font-weight: 600;
              font-style: normal;
              font-size: 30px;
              margin-bottom: 5px;
              line-height: 1; }
              #section09 > div .sewage li div h2 span {
                font-family: "kaisotai", sans-serif;
                font-weight: 600;
                font-style: normal;
                font-size: 20px;
                margin-left: -10px; }
            #section09 > div .sewage li div p {
              font-size: 14px;
              line-height: 1.5;
              width: auto; }

  .border11 {
    background-image: url("img/border11.png");
    background-position: center center;
    width: 100%;
    background-size: cover;
    height: 30px;
    z-index: 100; }

  #section10 {
    padding: 250px 0 100px 0; }
    #section10 > div {
      width: 90%;
      margin: 0 auto;
      position: relative; }
      #section10 > div .title {
        width: 300px;
        position: absolute;
        left: calc(50% - 150px);
        top: -305px; }
      #section10 > div .intro {
        display: block;
        margin-bottom: 70px; }
        #section10 > div .intro h1 {
          display: block;
          font-size: 25px;
          font-weight: bold;
          color: #2f74b3;
          width: 100%;
          text-align: center;
          margin-bottom: 20px; }
        #section10 > div .intro p {
          font-size: 15px;
          width: 100%;
          line-height: 1.8; }
      #section10 > div .vision {
        margin-bottom: 50px; }
        #section10 > div .vision img {
          width: 100%; }
        #section10 > div .vision > div {
          display: block;
          margin-top: 50px; }
          #section10 > div .vision > div h1 {
            font-weight: bold;
            font-size: 25px;
            letter-spacing: 0.2em;
            color: #2f74b3;
            width: 100%;
            text-align: center;
            margin-bottom: 20px; }
          #section10 > div .vision > div p {
            width: 100%;
            font-size: 15px;
            line-height: 1.8; }
      #section10 > div ul {
        margin-top: 70px; }
        #section10 > div ul li {
          width: 100%;
          padding: 30px 20px;
          background: #e0effc;
          position: relative;
          margin-bottom: 70px;
          border-radius: 15px; }
          #section10 > div ul li h2 {
            background: #2f74b3;
            font-weight: bold;
            font-size: 25px;
            width: 100%;
            padding: 8px 0 10px 0;
            border-radius: 30px;
            color: white;
            text-align: center;
            position: static;
            display: block;
            margin: -55px auto 0 auto; }
          #section10 > div ul li .resize {
            font-size: 23px; }
          #section10 > div ul li div {
            display: block; }
            #section10 > div ul li div p {
              font-size: 15px;
              line-height: 1.8;
              width: 100%;
              padding-top: 20px;
              margin-bottom: 20px; }
            #section10 > div ul li div img {
              width: 100%;
              background: #E5E5E5;
              display: block;
              height: 200px;
              border-radius: 20px; }
      #section10 > div ul:nth-of-type(2) {
        display: block; }
        #section10 > div ul:nth-of-type(2) li {
          width: 100%; }

  .border12 {
    background-image: url("img/border12.png");
    background-position: center center;
    width: 100%;
    background-size: cover;
    height: 30px;
    z-index: 100; }

  #section11 {
    padding: 200px 0 100px 0;
    background: #7CBDF2; }
    #section11 .mapPC {
      display: none; }
    #section11 .mapSP {
      position: relative;
      margin: 0 auto;
      display: table;
      width: 90%; }
      #section11 .mapSP .title {
        width: 300px;
        position: absolute;
        left: calc(50% - 150px);
        top: -270px; }
      #section11 .mapSP img {
        width: 100%;
        border-radius: 10px; }
    #section11 p {
      font-size: 16px;
      display: block;
      width: 80%;
      margin: 50px auto 0 auto;
      line-height: 1.8;
      text-align: justify; }

  .border13 {
    background-image: url("img/border13.png");
    background-position: center center;
    width: 100%;
    background-size: cover;
    height: 30px;
    z-index: 100; }

  #section12 ul {
    display: block;
    margin: 0 auto;
    width: 90%; }
    #section12 ul li {
      width: 100%;
      padding: 20px;
      /* drop-shadow */
      box-shadow: 0px 0px 15px -5px #777777;
      border-radius: 30px;
      margin-bottom: 30px; }
      #section12 ul li .title {
        font-size: 25px;
        text-align: center;
        padding: 5px 0 8px 0;
        background-color: #6c578d;
        font-weight: bold;
        color: white;
        border-radius: 30px;
        margin-bottom: 25px; }
      #section12 ul li > div {
        display: block; }
        #section12 ul li > div .swiper02 {
          width: 100%; }
          #section12 ul li > div .swiper02 img {
            width: 100%;
            height: auto;
            background: #C9C9C9;
            border-radius: 10px; }
        #section12 ul li > div .ex {
          width: 100%;
          line-height: 1.8; }

  footer {
    background: #2f74b3;
    padding: 70px 0; }
    footer div {
      width: 90%;
      margin: 0 auto; }
      footer div > img {
        width: 100%;
        display: block;
        margin-bottom: 70px; }
      footer div dl {
        margin-bottom: 30px; }
        footer div dl dt {
          font-size: 23px;
          font-weight: bold;
          color: white;
          margin-bottom: 10px; }
        footer div dl dd {
          font-size: 15px;
          line-height: 2;
          color: white; }
          footer div dl dd span {
            font-size: 12px;
            color: white; }
      footer div p {
        text-align: left;
        display: block;
        margin: 70px auto 0 auto;
        font-size: 10px;
        color: white; }
      footer div a {
        display: block;
        width: 200px;
        position: static;
        margin-bottom: 10px; }
        footer div a img {
          width: 100%;
          height: auto; }
      footer div .banner01 {
        right: auto;
        bottom: auto; }
      footer div .banner02 {
        right: auto;
        bottom: auto; } }