@import url("https://fonts.googleapis.com/css2?family=Barlow+Semi+Condensed&family=Noto+Sans+JP:wght@300&display=swap");
.loader-container {
  display: none; }

h4 {
  font-family: ltc-bodoni-175, serif;
  font-weight: 400;
  font-style: normal;
  color: #000;
  font-size: 58px;
  line-height: 1.0;
  margin-bottom: 20px;
  font-weight: normal; }

.leadCopy {
  text-align: center;
  margin: 5rem auto; }
  @media screen and (max-width: 768px) {
    .leadCopy {
      text-align: left;
      width: 90%; }
      .leadCopy .text-l {
        font-size: 0.8rem; } }

.locationBox {
  max-width: 900px;
  margin: auto; }
  .locationBox li {
    overflow: hidden;
    position: relative;
    margin-bottom: 0rem;
    /*&:nth-child(even) {
      .pic {
        float: right;
      }
      .txtArea {
        left: 0;
        right: auto;
      }
    }*/ }
    @media screen and (max-width: 768px) {
      .locationBox li {
        margin-bottom: 1rem; } }
    .locationBox li .pic {
      width: 63%; }
      .locationBox li .pic img {
        width: 100%;
        height: auto; }
    .locationBox li .txtArea h5 {
      font-family: 'Barlow Semi Condensed', sans-serif;
      color: #9fa0a0;
      font-size: 58px;
      line-height: 1.0;
      margin-bottom: 20px; }
    .locationBox li .videoArea#video-walk {
      margin-bottom: 5rem;
      background-color: #FFF; }
      .locationBox li .videoArea#video-walk .imgBox {
        cursor: pointer;
        transition: 0.3s ease 0s filter; }
        .locationBox li .videoArea#video-walk .imgBox:hover {
          filter: brightness(1.2); }
        .locationBox li .videoArea#video-walk .imgBox .sp {
          display: none; }
        .locationBox li .videoArea#video-walk .imgBox .pc {
          display: block; }
        @media screen and (max-width: 500px) {
          .locationBox li .videoArea#video-walk .imgBox .sp {
            display: block; }
          .locationBox li .videoArea#video-walk .imgBox .pc {
            display: none; } }
      .locationBox li .videoArea#video-walk .videoBox {
        display: none; }
        .locationBox li .videoArea#video-walk .videoBox video {
          width: 100%;
          height: auto;
          display: block; }
    .locationBox li.location01 {
      margin-bottom: 5rem; }
      .locationBox li.location01 .txtArea {
        width: 100%;
        text-align: center;
        margin-bottom: 5%; }
        .locationBox li.location01 .txtArea .text-l {
          margin-bottom: 5%; }
      .locationBox li.location01 .imgArea .imgBox {
        width: 100%; }
    .locationBox li.location02 .txtArea {
      width: 100%;
      text-align: center;
      margin-bottom: 5%; }
      .locationBox li.location02 .txtArea .text-l {
        margin-bottom: 5%; }
    .locationBox li.location02 .imgArea {
      margin-bottom: 5%; }
      .locationBox li.location02 .imgArea .imgBox {
        width: 100%; }
      .locationBox li.location02 .imgArea .note {
        width: 100%;
        text-align: right; }
    .locationBox li.location02 .imgArea2 {
      max-width: 600px;
      margin: 0 auto 5%; }
      .locationBox li.location02 .imgArea2 .imgBox {
        width: 100%; }
    .locationBox li.location03 {
      margin-bottom: 1rem; }
      .locationBox li.location03 .txtArea {
        width: 100%;
        text-align: center;
        margin-bottom: 2%; }
      .locationBox li.location03 .meritlist {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        -webkit-box-align: stretch;
        -ms-flex-align: stretch;
        align-items: stretch; }
        .locationBox li.location03 .meritlist div, .locationBox li.location03 .meritlist li {
          min-height: 0%; }
        .locationBox li.location03 .meritlist li {
          width: 33.33%;
          border: 1px solid #000000;
          border-width: 0 1px 0 0px;
          box-sizing: border-box; }
          .locationBox li.location03 .meritlist li:first-child {
            border-width: 0 1px 0 1px; }
          .locationBox li.location03 .meritlist li .merit-ttl {
            text-align: center;
            font-family: ltc-bodoni-175, serif;
            font-weight: 400;
            font-style: normal;
            font-feature-settings: "palt";
            font-weight: lighter;
            letter-spacing: 0;
            width: 90%;
            margin: 0 auto 5%;
            display: block;
            border-bottom: 1px solid #000000; }
            .locationBox li.location03 .meritlist li .merit-ttl .size_l {
              font-size: 1.5em; }
          .locationBox li.location03 .meritlist li .merit-txt {
            width: 90%;
            margin: 0 auto 1rem;
            display: block;
            line-height: 1.6; }
          .locationBox li.location03 .meritlist li img {
            width: 90%;
            margin: 0 auto;
            display: block; }
          .locationBox li.location03 .meritlist li .note {
            width: 90%;
            margin: 0 auto;
            display: block; }
    .locationBox li.location04 {
      margin: 0 auto 5rem;
      background-color: #e5e1c2;
      padding: 2% 0 2%; }
      .locationBox li.location04 .txtArea {
        width: 90%;
        margin: 0 auto;
        text-align: center; }
        .locationBox li.location04 .txtArea .text-l {
          margin-bottom: 1%; }
        .locationBox li.location04 .txtArea.txtArea2 {
          width: 94%;
          padding: 2% 3% 0%;
          text-align: left; }
          .locationBox li.location04 .txtArea.txtArea2 .txtArea2-img {
            float: right;
            margin: 0 0 0.5em 1em;
            width: 30%;
            max-width: 200px;
            position: relative; }
            .locationBox li.location04 .txtArea.txtArea2 .txtArea2-img .note {
              position: absolute;
              bottom: 10px;
              right: 10px;
              color: #FFF;
              text-shadow: 0 0 5px #000; }
    .locationBox li.location05 {
      margin-bottom: 3rem; }
      .locationBox li.location05 .txtArea {
        text-align: center;
        margin-bottom: 2rem; }
      .locationBox li.location05 .imgArea .imgBox {
        width: 70%;
        margin: 0 auto; }
  @media screen and (max-width: 768px) {
    .locationBox .leadCopy {
      margin: 2rem auto; }
      .locationBox .leadCopy h4 {
        font-size: 42px; }
    .locationBox li .txtArea .text-m br {
      display: none; }
    .locationBox li .videoArea#video-walk {
      margin-bottom: 3rem; }
    .locationBox li.location01 {
      margin-bottom: 3rem; }
      .locationBox li.location01 .txtArea {
        width: 90%;
        margin-left: 5%;
        text-align: left;
        margin-bottom: 5%; }
        .locationBox li.location01 .txtArea .text-l {
          margin-bottom: 5%; }
      .locationBox li.location01 .imgArea {
        width: 90%;
        margin-left: 5%;
        font-size: 0; }
        .locationBox li.location01 .imgArea .imgBox {
          width: 100%;
          margin-bottom: 2%; }
          .locationBox li.location01 .imgArea .imgBox .note {
            text-align: right; }
    .locationBox li.location02 {
      margin-bottom: 3rem; }
      .locationBox li.location02 .txtArea {
        width: 90%;
        margin-left: 5%;
        text-align: left; }
      .locationBox li.location02 .imgArea {
        width: 100%; }
    .locationBox li.location03 {
      margin-bottom: 0rem; }
      .locationBox li.location03 .txtArea {
        width: 90%;
        margin-left: 5%;
        text-align: left;
        margin-bottom: 5%; }
      .locationBox li.location03 .imgArea {
        width: 100%; }
    .locationBox li.location04 {
      margin-top: 0;
      margin-bottom: 3rem;
      padding: 2% 0 5%;
      /*.txtArea{
        width:80%;
        margin-left: 20%;
        text-align: left;
        margin-bottom: 5%;
      }*/ }
    .locationBox li.location05 .imgArea .imgBox {
      margin-bottom: 5%;
      width: 100%; }
      .locationBox li.location05 .imgArea .imgBox .text-m {
        width: 90%;
        text-align: center; }
      .locationBox li.location05 .imgArea .imgBox .note {
        width: 85%; } }
  @media screen and (max-width: 640px) {
    .locationBox {
      /*li {
        .pic {
          width: 60%;
        }
        .txtArea {
          width: 35%;
          h5 { font-size: 12vw;}
          p.text-m {
            //font-size: 10px;
          }
        }
      }*/ } }

.locationBox2 {
  max-width: 800px;
  margin: 0 auto 5rem; }
  .locationBox2 .categorylist {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    /*@media screen and (max-width:$bp05){
      li{
        width:32%;
        margin-bottom: 2%;
        &:nth-child(5){ width:66%;order: 5;}
      }
    }*/ }
    .locationBox2 .categorylist div, .locationBox2 .categorylist li {
      min-height: 0%; }
    .locationBox2 .categorylist li {
      width: 19%; }
      .locationBox2 .categorylist li a {
        width: 100%;
        display: block;
        padding: 10px 0;
        text-align: center;
        color: #000000;
        background-color: #dcdddd;
        font-family: 'Barlow Semi Condensed', sans-serif;
        font-feature-settings: "palt";
        font-weight: bold;
        letter-spacing: 0;
        transition: 0.3s ease 0s opacity; }
        .locationBox2 .categorylist li a:hover {
          opacity: 0.5; }
      .locationBox2 .categorylist li:nth-child(1) {
        order: 1; }
        .locationBox2 .categorylist li:nth-child(1) a {
          background-color: #f5b8d3; }
      .locationBox2 .categorylist li:nth-child(2) {
        order: 3; }
        .locationBox2 .categorylist li:nth-child(2) a {
          background-color: #dcdddd; }
      .locationBox2 .categorylist li:nth-child(3) {
        order: 4; }
        .locationBox2 .categorylist li:nth-child(3) a {
          background-color: #f9bb00; }
      .locationBox2 .categorylist li:nth-child(4) {
        order: 5; }
        .locationBox2 .categorylist li:nth-child(4) a {
          background-color: #72c0e4; }
      .locationBox2 .categorylist li:nth-child(5) {
        order: 2; }
        .locationBox2 .categorylist li:nth-child(5) a {
          background-color: #a8d182; }
    @media screen and (max-width: 768px) {
      .locationBox2 .categorylist {
        justify-content: flex-start; }
        .locationBox2 .categorylist li {
          width: 32%;
          margin-bottom: 2%;
          margin-right: 1%; }
          .locationBox2 .categorylist li:nth-child(2n) {
            margin-right: 0; } }

.locationBox3 {
  max-width: 800px;
  margin: 0 auto 5rem; }
  .locationBox3 .placelist li {
    /*margin-bottom: 5rem;*/ }
  .locationBox3 .placelist .place-ttl {
    width: 100%;
    background-color: #dcdddd;
    text-align: center; }
    .locationBox3 .placelist .place-ttl p {
      background-color: #FFFFFF;
      display: inline-block;
      padding: 15px 1em;
      margin: -5px 0;
      line-height: 0;
      font-family: 'Barlow Semi Condensed', sans-serif;
      font-feature-settings: "palt";
      font-weight: bold;
      letter-spacing: 0.1em;
      margin: 0 auto; }
  .locationBox3 .placelist .shop .place-ttl {
    background-color: #f5b8d3; }
  .locationBox3 .placelist .park .place-ttl {
    background-color: #a8d182; }
  .locationBox3 .placelist .education .place-ttl {
    background-color: #dcdddd; }
  .locationBox3 .placelist .medical .place-ttl {
    background-color: #f9bb00; }
  .locationBox3 .placelist .culture .place-ttl {
    background-color: #72c0e4; }
  .locationBox3 .placelist .imgArea {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    align-items: flex-start;
    font-size: 0;
    /*padding-top: 1rem;*/ }
    .locationBox3 .placelist .imgArea div, .locationBox3 .placelist .imgArea li {
      min-height: 0%; }
    .locationBox3 .placelist .imgArea .imgBox {
      width: 49.5%;
      margin-bottom: 0.5rem; }
  .locationBox3 .placelist .txtArea {
    padding-top: 0rem; }
    .locationBox3 .placelist .txtArea .underline {
      text-decoration: solid underline #f8b62d 2px;
      text-underline-offset: 3px; }
    .locationBox3 .placelist .txtArea .midashi {
      margin-top: 2rem;
      margin-bottom: 1rem; }
    .locationBox3 .placelist .txtArea .note {
      padding-top: 1rem; }
  .locationBox3 .placelist .tsukuba-data .note {
    text-align: right; }
  .locationBox3 .placelist .tsukuba-data .place-ttl {
    background-color: #d3edfb; }
  .locationBox3 .placelist .tsukuba-data .txtArea {
    margin-bottom: 1rem; }
    .locationBox3 .placelist .tsukuba-data .txtArea .underline {
      text-decoration: solid underline #2ea7e0 2px; }
  .locationBox3 .placelist .tsukuba-data .imgArea {
    font-size: 0;
    padding-top: 1rem; }
    .locationBox3 .placelist .tsukuba-data .imgArea .imgBox {
      width: 46%;
      margin-bottom: 2rem; }
  @media screen and (max-width: 768px) {
    .locationBox3 .placelist .tsukuba-data .imgArea .imgBox {
      width: 90%;
      margin: 0 auto;
      margin-bottom: 2rem; } }

/* ============ life information ============ */
.lifeinfo {
  padding-bottom: 4rem;
  -webkit-box-sizing: border-box;
  box-sizing: border-box; }
  .lifeinfo *, .lifeinfo *:before, .lifeinfo *:after {
    -webkit-box-sizing: border-box;
    box-sizing: border-box; }
  .lifeinfo .leadCopy h4 {
    color: #007f76 !important; }
  .lifeinfo .img {
    position: relative;
    line-height: 0; }
    .lifeinfo .img img {
      width: 100%;
      height: auto; }
    .lifeinfo .img .cap {
      position: absolute;
      font-size: .75rem;
      line-height: 1;
      right: 6px;
      bottom: 6px;
      color: #000; }
    .lifeinfo .img .fff {
      color: #fff; }
  .lifeinfo .lifeinfo-container {
    /*.shopimg-list{
    	width: 100%;
    	@include flex-j-s;
    	li{
    		width: 32%;
    		margin-top: 2rem;
    	}
    }*/ }
    .lifeinfo .lifeinfo-container .tab {
      width: 100%;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -ms-flex-wrap: wrap;
      flex-wrap: wrap;
      -webkit-box-pack: justify;
      -ms-flex-pack: justify;
      justify-content: space-between;
      -webkit-box-align: stretch;
      -ms-flex-align: stretch;
      align-items: stretch; }
      .lifeinfo .lifeinfo-container .tab div, .lifeinfo .lifeinfo-container .tab li {
        min-height: 0%; }
      .lifeinfo .lifeinfo-container .tab li {
        width: 12.5%;
        text-align: center;
        padding: 1rem .5rem;
        color: #fff;
        background: #ccc;
        border-right: solid 1px #fff;
        cursor: pointer;
        transition: .3s;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center; }
        .lifeinfo .lifeinfo-container .tab li:last-child {
          border-right: none; }
        .lifeinfo .lifeinfo-container .tab li div, .lifeinfo .lifeinfo-container .tab li li {
          min-height: 0%; }
        .lifeinfo .lifeinfo-container .tab li .en {
          font-family: 'Barlow Semi Condensed', sans-serif;
          font-size: 1rem;
          line-height: 1.2;
          letter-spacing: .05rem; }
        .lifeinfo .lifeinfo-container .tab li .ja {
          font-family: 'Noto Sans JP', sans-serif;
          font-size: .625rem;
          margin-top: .5rem;
          display: none; }
        .lifeinfo .lifeinfo-container .tab li.tab01:hover, .lifeinfo .lifeinfo-container .tab li.tab01.show {
          background: #E85298; }
        .lifeinfo .lifeinfo-container .tab li.tab02:hover, .lifeinfo .lifeinfo-container .tab li.tab02.show {
          background: #BC9077; }
        .lifeinfo .lifeinfo-container .tab li.tab03:hover, .lifeinfo .lifeinfo-container .tab li.tab03.show {
          background: #898989; }
        .lifeinfo .lifeinfo-container .tab li.tab04:hover, .lifeinfo .lifeinfo-container .tab li.tab04.show {
          background: #601986; }
        .lifeinfo .lifeinfo-container .tab li.tab05:hover, .lifeinfo .lifeinfo-container .tab li.tab05.show {
          background: #65B0D4; }
        .lifeinfo .lifeinfo-container .tab li.tab05 .en {
          font-size: .9rem; }
        .lifeinfo .lifeinfo-container .tab li.tab06:hover, .lifeinfo .lifeinfo-container .tab li.tab06.show {
          background: #E7B000; }
        .lifeinfo .lifeinfo-container .tab li.tab07:hover, .lifeinfo .lifeinfo-container .tab li.tab07.show {
          background: #A40B5D; }
        .lifeinfo .lifeinfo-container .tab li.tab08:hover, .lifeinfo .lifeinfo-container .tab li.tab08.show {
          background: #13AE67; }
    .lifeinfo .lifeinfo-container .map {
      width: 100%;
      margin-top: .5rem;
      line-height: 0;
      position: relative;
      border: solid 1px #604C3F; }
      .lifeinfo .lifeinfo-container .map img {
        width: 100%;
        height: auto; }
      .lifeinfo .lifeinfo-container .map .prot {
        position: absolute;
        top: 0;
        left: 0;
        transition: .3s;
        display: none; }
        .lifeinfo .lifeinfo-container .map .prot.show {
          display: block; }
    .lifeinfo .lifeinfo-container .shoplist {
      width: 100%;
      margin-top: 2rem;
      display: none; }
      .lifeinfo .lifeinfo-container .shoplist li {
        width: 49.5%;
        padding: .5rem;
        border-bottom: dotted 1px #ccc;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center; }
        .lifeinfo .lifeinfo-container .shoplist li div, .lifeinfo .lifeinfo-container .shoplist li li {
          min-height: 0%; }
        .lifeinfo .lifeinfo-container .shoplist li .num {
          width: 1.2rem;
          height: 1.2rem;
          font-size: 1rem;
          text-align: center;
          line-height: 1rem;
          border-radius: 50%;
          display: inline-block;
          margin-right: .5rem;
          color: #fff; }
        .lifeinfo .lifeinfo-container .shoplist li .txt {
          width: 93%;
          display: inline-block;
          display: -webkit-box;
          display: -ms-flexbox;
          display: flex;
          -ms-flex-wrap: wrap;
          flex-wrap: wrap;
          -webkit-box-pack: justify;
          -ms-flex-pack: justify;
          justify-content: space-between;
          -webkit-box-align: stretch;
          -ms-flex-align: stretch;
          align-items: stretch; }
          .lifeinfo .lifeinfo-container .shoplist li .txt div, .lifeinfo .lifeinfo-container .shoplist li .txt li {
            min-height: 0%; }
          .lifeinfo .lifeinfo-container .shoplist li .txt .shopname {
            width: 70%;
            font-size: 1rem; }
            .lifeinfo .lifeinfo-container .shoplist li .txt .shopname .txt-s {
              font-size: .75rem; }
          .lifeinfo .lifeinfo-container .shoplist li .txt .time {
            width: 30%;
            font-size: .75rem;
            text-align: right; }
          .lifeinfo .lifeinfo-container .shoplist li .txt .red {
            color: #D33; }
      .lifeinfo .lifeinfo-container .shoplist.show {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
        -webkit-box-align: stretch;
        -ms-flex-align: stretch;
        align-items: stretch; }
        .lifeinfo .lifeinfo-container .shoplist.show div, .lifeinfo .lifeinfo-container .shoplist.show li {
          min-height: 0%; }
      .lifeinfo .lifeinfo-container .shoplist.shoplist01 li .num {
        background: #E85298; }
      .lifeinfo .lifeinfo-container .shoplist.shoplist02 li .num {
        background: #BC9077; }
      .lifeinfo .lifeinfo-container .shoplist.shoplist03 li .num {
        background: #898989; }
      .lifeinfo .lifeinfo-container .shoplist.shoplist04 li .num {
        background: #601986; }
      .lifeinfo .lifeinfo-container .shoplist.shoplist05 li .num {
        background: #65B0D4; }
      .lifeinfo .lifeinfo-container .shoplist.shoplist06 li .num {
        background: #E7B000; }
      .lifeinfo .lifeinfo-container .shoplist.shoplist07 li .num {
        background: #A40B5D; }
      .lifeinfo .lifeinfo-container .shoplist.shoplist08 li .num {
        background: #13AE67; }
  @media screen and (max-width: 640px) {
    .lifeinfo .lifeinfo-container .tab li {
      width: 25%; }
      .lifeinfo .lifeinfo-container .tab li .en {
        font-size: .9rem; }
      .lifeinfo .lifeinfo-container .tab li:nth-child(4) {
        border-right: none; }
      .lifeinfo .lifeinfo-container .tab li:nth-child(5) .en {
        font-size: .75rem; }
      .lifeinfo .lifeinfo-container .tab li:nth-child(5), .lifeinfo .lifeinfo-container .tab li:nth-child(6), .lifeinfo .lifeinfo-container .tab li:nth-child(7), .lifeinfo .lifeinfo-container .tab li:last-child {
        border-top: solid 1px #fff; }
    .lifeinfo .lifeinfo-container .shoplist li {
      width: 100%; }
      .lifeinfo .lifeinfo-container .shoplist li .num {
        width: 1rem;
        height: 1rem;
        font-size: .9rem; }
      .lifeinfo .lifeinfo-container .shoplist li .txt .shopname {
        font-size: .85rem; }
        .lifeinfo .lifeinfo-container .shoplist li .txt .shopname .txt-s {
          font-size: .685rem; }
      .lifeinfo .lifeinfo-container .shoplist li .txt .time {
        font-size: .685rem; } }

.column-box {
  box-sizing: border-box;
  width: 100%;
  margin: auto auto 5%;
  border: 5px solid #80bbb7;
  border-radius: 20px;
  padding: 0  2.5rem 2rem; }
  .column-box * {
    box-sizing: border-box; }
  .column-box img {
    width: 100%;
    height: auto;
    line-height: 1; }
  .column-box .img-box {
    position: relative; }
    .column-box .img-box .cap {
      font-size: 10px;
      position: absolute;
      bottom: 2px;
      right: 2px; }
      .column-box .img-box .cap.out {
        position: static;
        text-align: right; }
  .column-box h5 {
    color: #00847b;
    text-align: center;
    padding-bottom: 1rem;
    border-bottom: 2px solid #80bbb7;
    margin: 2rem auto;
    position: relative;
    z-index: 2; }
    .column-box h5 .em {
      font-size: 160%;
      position: relative;
      z-index: 2; }
      .column-box h5 .em::before {
        content: "";
        width: 100%;
        height: 0.5rem;
        background-color: #ffdb6e;
        position: absolute;
        bottom: -0.025em;
        left: 50%;
        transform: translateX(-50%);
        z-index: 1;
        opacity: 0.8; }
  .column-box .livable-ranking .table-cap {
    font-size: 13px;
    text-align: left;
    color: #000;
    padding-bottom: 0.8rem; }
  .column-box .livable-ranking table {
    width: 100%;
    border-collapse: collapse; }
    .column-box .livable-ranking table tr th, .column-box .livable-ranking table tr td {
      border-right: 2px solid #e2edec;
      padding: 0.5rem;
      text-align: center;
      vertical-align: middle; }
    .column-box .livable-ranking table tr th {
      color: #fff;
      line-height: 1.2; }
      .column-box .livable-ranking table tr th:first-of-type {
        white-space: nowrap; }
    .column-box .livable-ranking table thead th {
      background-color: #00847b;
      font-size: 0.875rem; }
      .column-box .livable-ranking table thead th:last-of-type {
        border-right: none; }
    .column-box .livable-ranking table tbody th {
      font-size: 1.25rem; }
    .column-box .livable-ranking table tbody td {
      font-size: 1.125rem; }
      .column-box .livable-ranking table tbody td.city {
        font-size: 1.25rem; }
      .column-box .livable-ranking table tbody td:last-of-type {
        border-right: none; }
    .column-box .livable-ranking table tbody tr:nth-of-type(odd) th {
      background-color: #80bbb7; }
    .column-box .livable-ranking table tbody tr:nth-of-type(odd) td {
      background-color: #fff; }
    .column-box .livable-ranking table tbody tr:nth-of-type(even) th {
      background-color: #70a4a0; }
    .column-box .livable-ranking table tbody tr:nth-of-type(even) td {
      background-color: #e1e2e2; }
    .column-box .livable-ranking table #RankTsukuba th {
      background-color: #e8ce7f;
      color: #F44336;
      border-top: 3px solid #D32F2F;
      border-bottom: 3px solid #D32F2F;
      position: relative; }
      .column-box .livable-ranking table #RankTsukuba th::before {
        content: "";
        display: block;
        width: 3px;
        height: 100%;
        background-color: #D32F2F;
        position: absolute;
        top: 0;
        left: 0; }
    .column-box .livable-ranking table #RankTsukuba td {
      background-color: #FFE082;
      color: #E53935;
      font-weight: bold;
      border-top: 3px solid #D32F2F;
      border-bottom: 3px solid #D32F2F; }
      .column-box .livable-ranking table #RankTsukuba td:last-of-type {
        position: relative; }
        .column-box .livable-ranking table #RankTsukuba td:last-of-type::before {
          content: "";
          display: block;
          width: 3px;
          height: 100%;
          background-color: #D32F2F;
          position: absolute;
          top: 0;
          right: 0; }
  .column-box .livable-ranking .source {
    margin-top: 0.25rem;
    text-align: right; }
  .column-box .tsukuba-basic-data {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: stretch;
    -ms-flex-align: stretch;
    align-items: stretch;
    background-color: #ddeae9;
    border-radius: 16px;
    padding: 2rem; }
    .column-box .tsukuba-basic-data div, .column-box .tsukuba-basic-data li {
      min-height: 0%; }
    .column-box .tsukuba-basic-data .head-belt {
      background-color: #00847b;
      color: #fff;
      font-size: 1rem;
      text-align: center;
      letter-spacing: 0.1em;
      line-height: 1.2;
      padding: 0.25rem;
      margin-bottom: 1.25rem; }
    .column-box .tsukuba-basic-data .data-box {
      width: 48%;
      margin-bottom: 1.5rem; }
      .column-box .tsukuba-basic-data .data-box .img-box {
        width: 56%;
        margin: auto; }
      .column-box .tsukuba-basic-data .data-box.w100 {
        width: 100%; }
        .column-box .tsukuba-basic-data .data-box.w100 .img-box {
          width: 80%; }
      .column-box .tsukuba-basic-data .data-box:nth-of-type(2) {
        position: relative; }
        .column-box .tsukuba-basic-data .data-box:nth-of-type(2) .wappen {
          width: 10.75rem;
          position: absolute;
          top: 50%;
          right: -20%;
          transform: translateY(-56%); }
        .column-box .tsukuba-basic-data .data-box:nth-of-type(2) .note {
          text-align: center; }
      .column-box .tsukuba-basic-data .data-box.link {
        margin-bottom: 0; }
        .column-box .tsukuba-basic-data .data-box.link a {
          display: flex;
          align-items: stretch;
          width: 100%;
          height: 4rem; }
          .column-box .tsukuba-basic-data .data-box.link a img {
            width: auto;
            height: 100%; }
          .column-box .tsukuba-basic-data .data-box.link a div {
            height: 100%;
            background-color: #fdd000;
            flex-grow: 1;
            display: flex;
            justify-content: center;
            align-items: center; }
            .column-box .tsukuba-basic-data .data-box.link a div p {
              text-align: center;
              color: #000;
              font-size: 1.25rem;
              line-height: 1.2; }
          .column-box .tsukuba-basic-data .data-box.link a:hover {
            opacity: 0.64; }
  @media screen and (max-width: 768px) {
    .column-box .tsukuba-basic-data .data-box:nth-of-type(2) .wappen {
      width: 48%;
      right: -24%; } }
  @media screen and (max-width: 640px) {
    .column-box {
      padding: 0 1rem 1.5rem; }
      .column-box h5 {
        padding-bottom: 0.25rem;
        margin: 1.25rem auto 1rem; }
      .column-box .livable-ranking .table-scroll {
        overflow-x: scroll; }
      .column-box .livable-ranking table {
        width: 320px;
        white-space: nowrap; }
      .column-box .tsukuba-basic-data {
        padding: 1.25rem 1rem; }
        .column-box .tsukuba-basic-data .data-box {
          width: 100%; }
          .column-box .tsukuba-basic-data .data-box.w100 .img-box {
            width: 100%; }
          .column-box .tsukuba-basic-data .data-box:nth-of-type(2) .wappen {
            width: 42%;
            right: -10%;
            transform: translateY(-62%); }
          .column-box .tsukuba-basic-data .data-box:nth-of-type(3) .img-box .cap {
            position: static;
            margin-top: 2px;
            text-align: right; }
          .column-box .tsukuba-basic-data .data-box.link a div p {
            font-size: 1rem; } }