@charset "UTF-8";
/* --------------------------------------------------
  shared/css/shimzDream.css
--------------------------------------------------- */
/* ------------- common -------------- */
.dreamline {
  background: rgba(10, 22, 48, 0.7); }

.dream-list-movie span {
  padding-left: 40px;
  background: url(/topics/dream/content02/images/movie.png) no-repeat left center; }

.dream-list-pdf span {
  padding-left: 35px;
  background: url(/topics/dream/content02/images/pdf.png) no-repeat left center; }

.dream-list a {
  color: #3868aa;
  background: -webkit-linear-gradient(top, #fefefe 0%, #e5e5e5 50%, #cccccc 100%);
  background: linear-gradient(to bottom, #fefefe 0%, #e5e5e5 50%, #cccccc 100%);
  border: 1px solid #73869b;
  font-size: 1.4rem;
  letter-spacing: -0.01em;
  height: 100%;
  min-height: 60px;
  line-height: 1.6;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  padding: 0 14px 0 18px; }
  .dream-list a span {
    display: block; }
    .dream-list a span:after {
      margin-left: 8px;
      display: inline-block;
      font-style: normal;
      font-variant: normal;
      font-weight: normal;
      line-height: 1;
      font-family: glyphs;
      text-rendering: auto;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      content: "";
      font-size: 1.0rem; }
  .dream-list a:hover {
    opacity: 0.8;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)"; }

.dream-list a {
  color: #3868aa;
  background: -webkit-linear-gradient(top, #fefefe 0%, #e5e5e5 50%, #cccccc 100%);
  background: linear-gradient(to bottom, #fefefe 0%, #e5e5e5 50%, #cccccc 100%);
  border: 1px solid #73869b;
  font-size: 1.4rem;
  letter-spacing: -0.01em;
  height: 100%;
  min-height: 60px;
  line-height: 1.6;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  padding: 0 14px 0 18px; }
  .dream-list a span, .dream-list a p {
    display: block; }
    .dream-list a span:after, .dream-list a p:after {
      margin-left: 8px;
      display: inline-block;
      font-style: normal;
      font-variant: normal;
      font-weight: normal;
      line-height: 1;
      font-family: glyphs;
      text-rendering: auto;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      content: "";
      font-size: 1.0rem; }
  .dream-list a:hover {
    opacity: 0.8;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)"; }

.dream-thumb > div ul.dream-list-thumb {
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  padding-top: 10px;
  padding-bottom: 10px;
  align-items: center;
  justify-content: center; }
  .dream-thumb > div ul.dream-list-thumb li .thumb-img img {
    max-width: 280px; }
  .dream-thumb > div ul.dream-list-thumb li .thumb-text p {
    color: #3868aa;
    background: -webkit-linear-gradient(top, #fefefe 0%, #e5e5e5 50%, #cccccc 100%);
    background: linear-gradient(to bottom, #fefefe 0%, #e5e5e5 50%, #cccccc 100%);
    border: 1px solid #73869b;
    font-size: 1.4rem;
    letter-spacing: -0.01em;
    height: 100%;
    min-height: 60px;
    line-height: 1.6;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    display: table;
    width: 100%;
    align-items: center;
    padding: 0 14px 0 18px; }
    .dream-thumb > div ul.dream-list-thumb li .thumb-text p span {
      display: block;
      margin: 0 auto;
      display: table-cell;
      vertical-align: middle; }
      .dream-thumb > div ul.dream-list-thumb li .thumb-text p span:after {
        margin-left: 8px;
        display: inline-block;
        font-style: normal;
        font-variant: normal;
        font-weight: normal;
        line-height: 1;
        font-family: glyphs;
        text-rendering: auto;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        content: "";
        font-size: 1.0rem; }
  .dream-thumb > div ul.dream-list-thumb li:hover {
    opacity: 0.8;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)"; }

/* ------------- 深海未来都市構想 OCEAN SPIRAL -------------- */
.dream-borderBox {
  border: 1px solid rgba(255, 255, 255, 0.4);
  background: #171f36;
  padding: 30px !important; }

ul.list-ocean li {
  font-size: 1.4rem;
  color: #cccccc;
  margin-top: 5px; }
  ul.list-ocean li:before {
    background-color: #cccccc; }

.deepOcean {
  border: 1px solid rgba(255, 255, 255, 0.4);
  background: #171f36;
  padding: 40px; }
  .deepOcean h3 {
    font-size: 2.4rem;
    color: #ffffff;
    text-align: center;
    line-height: 1.6; }
  .deepOcean dl.list-def dt {
    color: #ffffff;
    font-size: 1.6rem; }
  .deepOcean dl.list-def dd {
    color: #cccccc;
    font-size: 1.6rem; }
  .deepOcean dl.list-def > dt:before, .deepOcean dl.list-def > dt:after {
    border-top: 1px solid rgba(255, 255, 255, 0.4); }
  .deepOcean dl.list-def > dd:before, .deepOcean dl.list-def > dd:after {
    border-top: 1px solid rgba(255, 255, 255, 0.4); }

.ocean-box01 {
  border: 1px solid rgba(255, 255, 255, 0.4);
  background: #171f36;
  padding: 30px; }
  .ocean-box01 h4 {
    font-weight: bold;
    color: #ffffff; }
  .ocean-box01 p {
    font-size: 1.4rem; }

.ocean-box02-wrap {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex; }
  .ocean-box02-wrap > div {
    -webkit-flex-basis: 50%;
    -ms-flex-preferred-size: 50%;
    flex-basis: 50%; }

.ocean-box02-card {
  border: 1px solid rgba(255, 255, 255, 0.4);
  background: #171f36;
  padding: 35px 30px;
  -webkit-align-self: flex-start;
  -ms-flex-item-align: start;
  align-self: flex-start; }
  .ocean-box02-card h4 {
    font-size: 1.6rem;
    font-weight: bold;
    color: #ffffff;
    margin-bottom: 10px; }
  .ocean-box02-card p {
    font-size: 1.4rem;
    color: #cccccc; }

.ocean-box02-listWrap {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex; }
  .ocean-box02-listWrap span {
    font-size: 1.4rem;
    color: #cccccc;
    margin-right: 5px; }

.ocean-box02-imgBox {
  -webkit-align-self: flex-end;
  -ms-flex-item-align: end;
  align-self: flex-end; }

.ocean-box03-item--border {
  border-right: 1px solid rgba(255, 255, 255, 0.4);
  border-bottom: 1px solid rgba(255, 255, 255, 0.4);
  background: #171f36;
  padding: 20px 30px 30px; }

.ocean-box03-item--earth {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center; }
  .ocean-box03-item--earth img {
    display: block;
    margin: auto;
    padding: 0 20px; }

.ocean-box03-list li {
  font-size: 1.4rem;
  color: #cccccc;
  width: 100%;
  padding: 14px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.4);
  text-align: center; }
  .ocean-box03-list li:nth-child(2), .ocean-box03-list li:nth-child(3) {
    position: relative; }
  .ocean-box03-list li:nth-child(2):before, .ocean-box03-list li:nth-child(2):after {
    content: "";
    position: absolute;
    display: block;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%); }
  .ocean-box03-list li:nth-child(3):before, .ocean-box03-list li:nth-child(3):after {
    content: "";
    position: absolute;
    display: block;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%); }
  .ocean-box03-list li:nth-child(2):before, .ocean-box03-list li:nth-child(3):before {
    background: #66b3df;
    width: 17px;
    height: 17px;
    border-radius: 50%;
    bottom: -9px; }
  .ocean-box03-list li:nth-child(2):after, .ocean-box03-list li:nth-child(3):after {
    width: 0;
    height: 0;
    border: 3px solid transparent;
    border-top: 5px solid #ffffff;
    bottom: -7px; }
  .ocean-box03-list li:last-child {
    border-bottom: none; }
  .ocean-box03-list li strong {
    color: #ffffff;
    font-size: 1.6rem;
    font-weight: bold; }

.ocean-box03-card {
  background: #66b3df;
  padding: 10px 10px 20px; }
  .ocean-box03-card p.ocean-box03-card-txt1 {
    color: #333333;
    font-size: 1.4rem;
    text-align: center; }
  .ocean-box03-card span {
    color: #ffffff;
    text-align: center;
    display: block;
    font-size: 1.4rem; }
  .ocean-box03-card p.ocean-box03-card-txt2 {
    color: #ffffff;
    font-weight: bold;
    text-align: center;
    margin-top: 5px; }

.ocean-list01 li {
  font-size: 1.6rem;
  font-weight: bold;
  color: #ffffff; }
  .ocean-list01 li span {
    font-size: 1.4rem;
    color: #cccccc;
    display: inline-block;
    font-weight: normal;
    margin-left: 20px; }

.ocean-list02 li {
  font-size: 1.6rem;
  font-weight: bold;
  color: #ffffff; }
  .ocean-list02 li span {
    font-size: 1.4rem;
    color: #cccccc;
    display: block;
    font-weight: normal;
    margin-left: 16px; }

/* ------------- シミズドリーム 月太陽発電 LUNA RING -------------- */
.runa-box2 h3 {
  color: #ffffff;
  font-weight: bold;
  font-size: 1.6rem; }
.runa-box2 p.green, .runa-box2 p.blue, .runa-box2 p.yellow {
  font-size: 1.4rem;
  color: #333333;
  padding: 5px 10px 4px 10px;
  margin-top: 10px; }
.runa-box2 p.green {
  background: #90c460; }
.runa-box2 p.blue {
  background: #66b3df; }
.runa-box2 p.yellow {
  background: #f1d045; }
.runa-box2 p.small {
  font-size: 1.2rem;
  margin-top: 10px;
  line-height: 1.6; }

.runa-box3-txtBox-ttl p {
  font-weight: bold;
  font-size: 1.6rem;
  color: #ffffff;
  position: relative;
  padding-left: 20px; }
  .runa-box3-txtBox-ttl p:before {
    content: "";
    position: absolute;
    top: 10px;
    left: 0;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: block; }
  .runa-box3-txtBox-ttl p span {
    display: block;
    font-size: 1.2rem; }

.runa-box3-txtBox-ttl--red p:before {
  background: #dd6e3d; }

.runa-box3-txtBox-ttl--yellow p:before {
  background: #f9ec43; }

.runa-box3-txtBox-ttl--green p:before {
  background: #4cb1a2; }

.runa-box3-txtBox-txt p {
  font-size: 1.4rem; }

.dream-table {
  width: 100%;
  border-collapse: collapse; }
  .dream-table td, .dream-table th {
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-collapse: collapse; }
  .dream-table .dream-table-ttl td {
    font-size: 1.6rem;
    font-weight: bold;
    color: #ffffff;
    padding: 15px 10px; }
  .dream-table td {
    text-align: center;
    font-size: 1.4rem;
    color: #cccccc;
    padding: 10px; }

.runa-box5-txtBox h3 {
  font-size: 1.6rem;
  color: #ffffff;
  font-weight: bold;
  margin-bottom: 10px; }
.runa-box5-txtBox p {
  font-size: 1.4rem; }
  .runa-box5-txtBox p strong {
    color: #ffffff; }

/* ------------- 環境アイランド GREEN FLOAT -------------- */
.dream-card {
  background: #003f7c;
  padding: 18px; }

.dream-card-nowrap {
  padding: 0; }

.dream-card-inner {
  padding: 18px; }

.dream-card-ttl {
  font-size: 1.6rem;
  font-weight: bold;
  color: #ffffff; }

.dream-card-ttl--number {
  text-indent: -1.4em;
  margin-left: 1.4em; }

.dream-card-txt {
  font-size: 1.4rem !important;
  color: #ffffff; }

.dream-card-list > li {
  font-size: 1.4rem !important;
  color: #ffffff;
  text-indent: -1em;
  margin-left: 1em; }

.green-ttl01 {
  font-size: 2.4rem;
  color: #ffffff;
  text-align: center;
  line-height: 1.4; }

.green-ttl01-green {
  color: #90c460; }

.green-ttl01-blue {
  color: #66b3df; }

.green-ttl01-small {
  font-size: 1.6rem;
  color: #cccccc;
  display: block; }

.green-border {
  width: 100%;
  height: 1px;
  background: rgba(255, 255, 255, 0.4);
  display: block;
  position: relative;
  margin-bottom: 15px; }
  .green-border:after {
    content: "";
    position: absolute;
    bottom: -15px;
    left: 50%;
    margin: 0 0 0 -25px;
    width: 0;
    height: 0;
    border-right: 25px solid transparent;
    border-top: 15px solid rgba(255, 255, 255, 0.4);
    border-left: 25px solid transparent; }

.green-box01-greenTtl {
  background: #90c460;
  padding: 15px 20px; }

.green-box01-blueTtl {
  background: #66b3df;
  padding: 15px 20px; }

.green-box01-plus {
  color: #ffffff;
  text-align: center;
  font-size: 2.2rem; }

.green-box01 h3 {
  color: #ffffff;
  font-size: 2.4rem; }
  .green-box01 h3 span {
    font-size: 1.4rem;
    padding-left: 10px; }
.green-box01 p {
  text-align: center;
  font-size: 1.4rem; }
  .green-box01 p strong {
    font-size: 1.8rem; }
.green-box01 ul li {
  color: #cccccc; }

.green-figcaption01 {
  display: block; }

.green-figcaption01-blue {
  color: #0068b6; }

.green-figcaption01-orange {
  color: #f29600; }

.green-figcaption01-red {
  color: #e50012; }

.green-figcaption01-pink {
  color: #e75297; }

.green-figcaption01-purple {
  color: #835ea2; }

.greenStep-item-arrow {
  position: relative;
  margin-bottom: 30px; }
  .greenStep-item-arrow:after {
    content: "";
    position: absolute;
    bottom: -16px;
    left: 50%;
    margin: 0 0 0 -25px;
    width: 0;
    height: 0;
    border-right: 25px solid transparent;
    border-top: 15px solid rgba(255, 255, 255, 0.4);
    border-left: 25px solid transparent; }

.greenStep-txt h4 {
  font-size: 1.6rem;
  font-weight: bold;
  color: #ffffff;
  margin-bottom: 10px; }
.greenStep-txt p {
  color: #cccccc;
  font-size: 1.4rem; }

/* ------------- 宇宙ホテル -------------- */
.wrapper--space {
  background: #020418; }

@media (max-width: 767px) {
  /* ------------- common -------------- */
  .dream-title {
    background: #081129;
    height: 50px;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center; }
    .dream-title h1 {
      font-size: 1.6rem;
      color: #cccccc;
      padding: 0 30px; }

  .dreamline {
    background: #081129; }

  .dream-list {
    padding: 12px 0; }

  .dream-list-pdf span {
    padding-left: 40px; }

  .dreamContainer {
    width: 100%;
    font-size: 1.6rem;
    line-height: 2; }

  .dreamSection-sp {
    padding: 0 25px; }

  .dreamBlue-sp {
    background: #00508f;
    padding: 18px; }

  .dream-title-lv1 {
    font-size: 2.4rem;
    line-height: 1.6; }

  .dream-title-lv2 {
    font-size: 2.2rem;
    font-weight: bold;
    line-height: 1.6; }

  .dream-title-lv3 {
    font-size: 1.6rem;
    font-weight: bold; }

  .dream-title-lv1--icon {
    color: #ffffff;
    text-align: center; }
    .dream-title-lv1--icon span {
      display: block;
      font-size: 1.4rem; }

  .dream-txt-lv1 {
    font-size: 1.6rem;
    line-height: 2; }

  .dream-txt-lv2 {
    color: #ffffff;
    font-size: 1.4rem;
    line-height: 2; }

  .dream-txt-white-sp {
    color: #ffffff; }

  .dream-figure .dream-figure {
    margin-top: 0;
    color: #ffffff;
    font-size: 1.6rem;
    font-weight: bold;
    background: #00508f;
    padding: 15px 18px; }

  .dreamLayout-item img {
    display: block;
    margin: auto; }
  .dreamLayout-item:nth-child(n+2) {
    margin-top: 20px; }

  /* ------------- 深海未来都市構想 OCEAN SPIRAL -------------- */
  .dream-borderBox {
    background: #00508f;
    padding: 18px !important; }

  ul.list-ocean li {
    color: #ffffff; }
    ul.list-ocean li:before {
      background-color: #ffffff; }

  .deepOcean {
    background: #00508f;
    padding: 18px; }
    .deepOcean p {
      color: #ffffff;
      font-size: 1.4rem; }
    .deepOcean h3 {
      font-size: 2.2rem;
      font-weight: bold;
      line-height: 1.6; }
    .deepOcean dl.list-def {
      background: #003f7c;
      padding: 18px; }
    .deepOcean dl.list-def--break-sp > dt:first-child, .deepOcean dl.list-def--break-sp > dd:first-child {
      border-top: none;
      padding-top: 0; }
    .deepOcean dl.list-def--break-sp > dt:last-child, .deepOcean dl.list-def--break-sp > dd:last-child {
      border-bottom: none;
      padding-bottom: 0; }
    .deepOcean dl.list-def--break-sp > dt {
      border-bottom: none;
      padding-bottom: 0;
      font-size: 1.4rem; }
    .deepOcean dl.list-def--break-sp > dd {
      border-bottom: 1px solid #00508f;
      font-size: 1.4rem;
      padding-top: 10px;
      padding-left: 18px;
      color: #ffffff; }

  .ocean-box01 {
    background: #00508f;
    padding: 18px; }
    .ocean-box01 h4 {
      font-size: 1.6rem; }
    .ocean-box01 p {
      font-size: 1.4rem;
      color: #ffffff; }

  .ocean-box02-wrap {
    display: block; }

  .ocean-box02-card {
    background: #00508f;
    padding: 18px; }
    .ocean-box02-card p {
      color: #ffffff; }

  .ocean-box02 p.ocean-box02-caption {
    background: #00508f;
    color: #ffffff;
    font-size: 1.6rem;
    font-weight: bold;
    padding: 20px 18px; }

  .ocean-box03-item--border {
    background: #00508f;
    padding: 0 18px 18px;
    border-bottom: none; }
    .ocean-box03-item--border img {
      width: 50%;
      margin: auto;
      display: block; }

  .ocean-box03-list li {
    color: #ffffff; }

  .ocean-bordernone {
    border: none; }

  .ocean-box04 {
    background: #00508f;
    padding-top: 30px; }
    .ocean-box04 .dreamBox-title {
      color: #ffffff;
      text-align: center; }
    .ocean-box04 .deepOcean h3 {
      font-size: 1.4rem;
      font-weight: normal;
      text-align: left; }
    .ocean-box04 p.ocean-box04-txt01 {
      padding: 0 18px;
      color: #ffffff;
      font-size: 1.4rem; }

  .deepOcean02 {
    background: -webkit-linear-gradient(#0089d2, #000842);
    background: linear-gradient(#0089d2, #000842);
    padding: 25px; }

  .deepOcean02-box {
    background: rgba(0, 80, 143, 0.3);
    padding: 18px;
    margin-top: 20px; }

  .deepOcean02 h4 {
    font-size: 1.6rem;
    font-weight: bold;
    color: #ffffff;
    text-align: center; }
  .deepOcean02 p {
    font-size: 1.6rem;
    font-weight: bold;
    color: #ffffff;
    margin-bottom: 10px;
    line-height: 1.6; }
  .deepOcean02 ul li {
    color: #ffffff;
    font-size: 1.4rem;
    padding-left: 28px;
    margin-top: 5px;
    position: relative;
    line-height: 1.6; }
    .deepOcean02 ul li:before {
      content: "●";
      position: absolute;
      left: 10px;
      top: 0; }
    .deepOcean02 ul li:first-child {
      margin-top: 0; }

  .ocean-list01 li span {
    display: block;
    color: #ffffff; }

  .ocean-list02 li span {
    color: #ffffff; }

  .ocean-bluemark .dream-figure {
    text-align: left;
    font-weight: normal; }
    .ocean-bluemark .dream-figure span {
      font-size: 1.4rem;
      display: block; }
    .ocean-bluemark .dream-figure strong {
      font-size: 1.6rem; }
    .ocean-bluemark .dream-figure:before {
      content: "■";
      color: #0089c6; }

  .ocean-title-sp {
    color: #ffffff;
    text-align: center; }

  /* ------------- シミズドリーム 月太陽発電 LUNA RING -------------- */
  .runa-txt01 {
    color: #ffffff;
    font-size: 1.4rem; }

  .runa-box1 .runa-box1-frame {
    background: rgba(255, 255, 255, 0.7);
    padding: 24px 18px 18px; }
    .runa-box1 .runa-box1-frame h3 {
      background: #00508f;
      color: #ffffff;
      font-size: 1.4rem;
      text-align: center;
      padding: 10px;
      font-weight: bold; }
  .runa-box1 ul li {
    color: #00508f;
    font-size: 1.4rem; }

  .runa-box1-img {
    margin: auto;
    display: block;
    max-width: 30px !important; }

  .runa-box2 {
    background: #00508f;
    padding: 18px; }
    .runa-box2 > div {
      background: #003f7c;
      padding: 18px; }
    .runa-box2 p.small {
      color: #ffffff; }

  .runa-box3-imgBox {
    padding: 30px 0;
    background-image: url(/topics/dream/content02/images/img_index_15.jpg);
    background-repeat: repeat; }
    .runa-box3-imgBox img {
      margin: auto;
      display: block; }

  .runa-box3-txtBox {
    background: #00508f;
    padding: 18px; }
    .runa-box3-txtBox img {
      display: block;
      margin: auto; }

  .runa-box3-txtBox-inner {
    background: #003f7c;
    padding: 18px; }

  .runa-box3-txtBox-txt p {
    color: #cccccc;
    margin-top: 10px; }

  .dream-table {
    background: #00508f; }
    .dream-table td {
      color: #ffffff; }

  .runa-box5 img {
    max-width: 100%;
    width: 100%; }

  .runa-box5-txtBox {
    background: #00508f;
    padding: 18px; }

  .runa-box5-txtBox-inner {
    background: #003f7c;
    padding: 18px; }

  .runa-box5-txtBox h4 {
    color: #ffffff;
    font-weight: bold;
    font-size: 1.6rem;
    margin-bottom: 20px; }
  .runa-box5-txtBox p {
    color: #ffffff; }

  /* ------------- 環境アイランド GREEN FLOAT -------------- */
  .dreamDarkBlue-sp {
    background: #003f7c;
    padding: 18px; }

  .dream-card-wrap {
    background: #00508f;
    padding: 18px; }

  .dream-card:not(:first-child) {
    margin-top: 18px; }

  .green-ttl01 {
    font-size: 2.2rem;
    font-weight: bold; }

  .green-ttl01-small {
    font-size: 1.4rem;
    font-weight: normal;
    color: #ffffff;
    text-align: left;
    margin-top: 10px; }

  .green-border {
    height: 0; }
    .green-border:after {
      border-top: 15px solid #ffffff; }

  .green-box01-plus {
    display: block;
    font-weight: bold; }

  .green-box01 ul li {
    color: #ffffff; }

  .green-figcaption01 {
    font-size: 0.8rem;
    color: #cccccc;
    font-weight: normal; }

  .greenStep {
    background: #00508f;
    padding: 18px; }

  .greenStep-item-arrow:after {
    border-top: 15px solid #cccccc; }

  .greenStep-txt {
    background: #003f7c;
    padding: 18px; }
    .greenStep-txt p {
      color: #ffffff; }

  ul.dream-list-green {
    display: block; } }
@media (min-width: 768px) {
  /* ------------- common -------------- */
  .dream-title {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    width: 100%;
    height: 260px;
    background-image: url(/topics/dream/content02/images/img_index_01.jpg);
    background-size: cover;
    background-position: top center; }
    .dream-title h1 {
      font-size: 2.8rem;
      color: #ffffff;
      letter-spacing: 0.1em;
      text-shadow: 0 0 15px #3165c8, 0 0 15px #3165c8, 0 0 20px #3165c8; }

  .dream-title--ocean {
    background-image: url(/topics/dream/content01/images/img_index_01.jpg); }

  .wrapper--dream {
    padding-bottom: 70px;
    background-color: #020418;
    background-image: url(/topics/dream/content02/images/img_index_02.jpg);
    background-position: top center;
    background-repeat: no-repeat;
    background-size: contain; }

  .wrapper--ocean {
    padding-bottom: 70px;
    background-color: #050218;
    background-image: url(/topics/dream/content01/images/img_index_03.jpg);
    background-position: top center;
    background-repeat: no-repeat;
    background-size: contain; }

  .dream-list {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: end;
    -webkit-justify-content: flex-end;
    -ms-flex-pack: end;
    justify-content: flex-end;
    -webkit-box-align: stretch;
    -webkit-align-items: stretch;
    -ms-flex-align: stretch;
    align-items: stretch;
    padding-bottom: 10px; }
    .dream-list li {
      margin-top: 10px; }

  .dream-list-thumb {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: end;
    -webkit-justify-content: flex-end;
    -ms-flex-pack: end;
    justify-content: flex-end;
    -webkit-box-align: stretch;
    -webkit-align-items: stretch;
    -ms-flex-align: stretch;
    align-items: stretch;
    padding-bottom: 10px; }

  .dreamWrapper {
    padding: 0 40px; }

  .dreamContainer {
    max-width: 940px;
    width: 100%;
    font-size: 1.6rem;
    color: #cccccc;
    line-height: 2;
    margin: 0 auto; }

  .dreamBorder01 {
    border: 1px solid rgba(255, 255, 255, 0.4);
    background: rgba(10, 22, 48, 0.7);
    border-radius: 5px; }

  .dreamSection {
    padding: 50px; }

  .dream-title-lv1 {
    font-size: 2.4rem;
    line-height: 1.5;
    color: #ffffff;
    text-shadow: 0 0 15px #3165c8, 0 0 15px #3165c8, 0 0 20px #3165c8;
    text-align: center; }

  .dream-title-lv1--icon {
    position: relative; }
    .dream-title-lv1--icon img {
      position: relative;
      top: -70px;
      left: -170px; }
    .dream-title-lv1--icon span {
      display: block; }

  .dream-title-lv2 {
    font-size: 2.4rem;
    line-height: 1.5;
    color: #ffffff;
    text-align: center; }

  .dream-title-lv3 {
    font-size: 2.0rem;
    font-weight: bold;
    color: #ffffff;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    text-align: left; }
    .dream-title-lv3:after {
      border-top: 1px solid rgba(255, 255, 255, 0.4);
      content: "";
      display: inline;
      -webkit-box-flex: 1;
      -webkit-flex-grow: 1;
      -ms-flex-positive: 1;
      flex-grow: 1;
      margin-left: 1em; }

  .dream-txt-lv1 {
    color: #cccccc;
    font-size: 1.6rem;
    line-height: 2; }

  .dream-figure .dream-figure {
    color: #cccccc;
    font-size: 1.4rem;
    font-weight: bold;
    text-align: left;
    margin-top: 20px; }

  .dream-figure--2col .dream-figure {
    text-align: right; }

  .dreamLayout-2col {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex; }
    .dreamLayout-2col .dreamLayout-item {
      -webkit-flex-basis: 50%;
      -ms-flex-preferred-size: 50%;
      flex-basis: 50%; }
      .dreamLayout-2col .dreamLayout-item img {
        display: block;
        margin: auto;
        max-width: 100%; }
      .dreamLayout-2col .dreamLayout-item:nth-child(odd) p {
        padding-right: 20px; }

  /* ------------- 深海未来都市構想 OCEAN SPIRAL -------------- */
  .ocean-col2 {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex; }

  .ocean-col2-item {
    -webkit-flex-basis: 50%;
    -ms-flex-preferred-size: 50%;
    flex-basis: 50%; }

  .ocean-box02 p.ocean-box02-caption {
    margin-top: 20px;
    margin-left: 50%;
    font-size: 1.4rem;
    font-weight: bold; }

  .ocean-box03 {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    border-top: 1px solid rgba(255, 255, 255, 0.4);
    border-left: 1px solid rgba(255, 255, 255, 0.4); }

  .ocean-box03-item {
    -webkit-flex-basis: 33.33%;
    -ms-flex-preferred-size: 33.33%;
    flex-basis: 33.33%;
    max-width: 33.33%; }

  .ocean-bluemark .dream-figure span {
    display: block; }
  .ocean-bluemark .dream-figure:before {
    content: "■";
    color: #0089c6; }

  /* -------------  月太陽発電 LUNA RING-------------- */
  .runa-txt01 {
    margin-top: -60px; }

  .runa-box1 > div {
    padding: 0; }
    .runa-box1 > div img {
      display: block;
      margin: 20px auto 0; }
  .runa-box1 h3 {
    color: #ffffff;
    font-weight: bold;
    font-size: 1.6rem; }
  .runa-box1 ul li {
    color: #cccccc;
    font-size: 1.6rem; }

  .runa-box2 > div {
    padding: 0 10px; }
    .runa-box2 > div:nth-child(n+2) {
      border-left: 1px solid rgba(255, 255, 255, 0.4); }

  .runa-box3 {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex; }

  .runa-box3-imgBox {
    padding-right: 50px; }

  .runa-box3-txtBox {
    border-top: 1px solid rgba(255, 255, 255, 0.4);
    width: 100%; }

  .runa-box3-txtBox-inner {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    border-bottom: 1px solid rgba(255, 255, 255, 0.4); }

  .runa-box3-txtBox-ttl {
    -webkit-flex-basis: 50%;
    -ms-flex-preferred-size: 50%;
    flex-basis: 50%;
    max-width: 50%; }

  .runa-box3-txtBox-txt {
    padding-left: 10px;
    -webkit-flex-basis: 50%;
    -ms-flex-preferred-size: 50%;
    flex-basis: 50%;
    max-width: 50%; }

  .runa-img-border {
    border-top: 1px solid rgba(255, 255, 255, 0.4);
    border-left: 1px solid rgba(255, 255, 255, 0.4);
    border-right: 1px solid rgba(255, 255, 255, 0.4); }

  .dream-table {
    border: 1px solid rgba(255, 255, 255, 0.4);
    background: rgba(83, 89, 106, 0.2); }

  .runa-box5 {
    border-top: 1px solid rgba(255, 255, 255, 0.4);
    border-left: 1px solid rgba(255, 255, 255, 0.4);
    border-right: 1px solid rgba(255, 255, 255, 0.4); }
    .runa-box5 > div {
      border-bottom: 1px solid rgba(255, 255, 255, 0.4);
      background: #171f36; }
      .runa-box5 > div:not(:nth-child(3n + 1)) {
        border-left: 1px solid rgba(255, 255, 255, 0.4); }

  .runa-box5-txtBox {
    padding: 20px 20px; }
    .runa-box5-txtBox p {
      color: #cccccc; }

  /* ------------- 環境アイランド GREEN FLOAT -------------- */
  .dream-list-wrap {
    max-width: 1390px;
    padding: 0; }

  .dreamBorder02 {
    border: 1px solid rgba(255, 255, 255, 0.4);
    background: #171f36; }

  .dreamSection--narrow {
    padding: 30px; }

  .dream-txt-lv2 {
    color: #ffffff;
    font-size: 1.6rem;
    line-height: 2; }

  .dream-card-wrap {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    border-top: 1px solid rgba(255, 255, 255, 0.4);
    border-left: 1px solid rgba(255, 255, 255, 0.4); }

  .dream-card {
    border-right: 1px solid rgba(255, 255, 255, 0.4);
    border-bottom: 1px solid rgba(255, 255, 255, 0.4);
    padding: 30px;
    background: #171f36; }
    .dream-card img {
      max-width: 100%; }

  .dream-card-inner {
    padding: 30px; }

  .dream-card-inner--narrow {
    padding: 25px; }

  .dream-card-txt, .dream-card-list > li {
    color: #cccccc; }

  .dream-card--2col .dream-card {
    -webkit-flex-basis: 50%;
    -ms-flex-preferred-size: 50%;
    flex-basis: 50%;
    max-width: 50%; }

  .dream-card--3col .dream-card {
    -webkit-flex-basis: 33.33%;
    -ms-flex-preferred-size: 33.33%;
    flex-basis: 33.33%;
    max-width: 33.33%; }

  .green-box01 {
    margin: 0 20px;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex; }
    .green-box01 .green-box01-green, .green-box01 .green-box01-blue {
      width: 100%; }

  .green-box01-plus {
    min-width: 50px;
    margin-top: 10%; }

  .green-box01 p {
    color: #333333; }
  .green-box01 ul {
    margin: 20px; }

  .greenStep-item {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    border: 1px solid rgba(255, 255, 255, 0.4);
    background: #171f36;
    padding: 20px 20px 20px 30px; }

  .greenStep-txt {
    -webkit-flex-basis: 50%;
    -ms-flex-preferred-size: 50%;
    flex-basis: 50%;
    -webkit-box-ordinal-group: 2;
    -webkit-order: 1;
    -ms-flex-order: 1;
    order: 1;
    padding-right: 20px; }

  .greenStep-img {
    -webkit-flex-basis: 50%;
    -ms-flex-preferred-size: 50%;
    flex-basis: 50%;
    -webkit-box-ordinal-group: 3;
    -webkit-order: 2;
    -ms-flex-order: 2;
    order: 2; }

  /* ------------- 宇宙ホテル -------------- */
  .space-img01 {
    max-width: 940px;
    margin: auto;
    display: block;
    border-radius: 5px;
    border: 1px solid rgba(255, 255, 255, 0.4); } }
@media (min-width: 768px) and (max-width: 991px) {
  /* ------------- 環境アイランド GREEN FLOAT -------------- */
  .dreamLayout-2col-tb {
    display: block; }
    .dreamLayout-2col-tb .dreamLayout-item:nth-child(1) {
      margin-bottom: 20px; } }
@media (max-width: 767px) {
  /* ------------- 環境アイランド GREEN FLOAT -------------- */
  .thumb-greenfloat.dream-thumb > div ul.dream-list-thumb {
    flex-wrap: wrap;
    justify-content: space-between; }
    .thumb-greenfloat.dream-thumb > div ul.dream-list-thumb li {
      width: 50%; }
      .thumb-greenfloat.dream-thumb > div ul.dream-list-thumb li a .thumb-img img {
        max-width: 100%; } }