@charset "UTF-8";
/* DEFAULT */
@media only screen {
  h1, h2, h3, h4, h5, h6 {
    color: #153872;
  }
  .blue-box {
    background-color: #153872;
    padding: 1em 2vw;
  }
  .blue-box * {
    color: #FFFFFF;
  }
  .box {
    padding: 1px 5vw;
  }
  .gray-box {
    background-color: #D0DFEE;
  }
  .grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: 1fr;
    grid-column-gap: 10px;
    grid-row-gap: 10px;
  }
  .ht, .pad {
    padding: 1px 2vw;
  }
  .minus {
    margin-left: -20px;
  }
  .size {
    font-size: 1.2em;
  }
  .thirds {
    margin: 1vw;
    width: 30vw;
  }
  .top {
    margin-top: 20px;
  }
  .white-box {
    background-color: #FFFFFF;
  }
  #a {
    width: 40%;
  }
  #b, #b2 {
    width: 29%;
  }
  #aa {
    display: none;
  }
  #b, #b2 {
    background-color: #D0DFEE;
  }
  #c, #d {
    margin: 16px 0 0 0;
  }
  #bg1 * {
    color: #FFFFFF;
    font-size: 1.1em;
    font-style: italic;
  }
  #e {
    margin: 0 0 20px 0;
  }
  #d, #e {
    display: grid;
    grid-template-columns: 40% 29% 29%;
    grid-template-rows: 1fr;
    grid-column-gap: 10px;
    grid-row-gap: 10px;
  }
  #best {
    padding: 2vw;
  }
  #bg {
    background: url("../images/bg.webp") repeat;
  }
  #bg1 {
    background: url("../images/oxbow.webp") no-repeat 50% 50%;
    background-size: cover;
    height: 26vw;
  }
  #bg2, #bg2a {
    background: #153872;
    padding: 2vw;
  }
  #bg3 {
    background: url("../images/bg3.webp") no-repeat 50% 50%;
    background-size: cover;
    height: 26vw;
  }
  #c {
    display: grid;
    grid-template-columns: 1fr 2fr;
    grid-template-rows: 1fr;
    grid-column-gap: 4px;
    grid-row-gap: 10px;
    padding-bottom: 20px;
  }
  #difference {
    font-size: 1.6em;
    font-style: italic;
    text-align: right;
  }
  #difference-a {
    font-size: 2em;
    font-style: italic;
    text-align: center;
  }
  #index-h1 {
    color: #FFFFFF;
    font-size: 3em;
    font-style: italic;
    line-height: 1em;
    text-align: right;
  }
  #index-h1a {
    color: #FFFFFF;
    font-size: 3em;
    font-style: italic;
    line-height: 1em;
    text-align: center;
  }
  #ox {
    height: auto;
    max-width: 300px;
    width: 20vw;
  }
  #transform {
    height: auto;
    margin: 1px auto;
    max-width: 600px;
    width: 39vw;
  }
}
/* MEGAPIXEL */
@media only screen and (min-width: 1951px) {}
/* DESKTOP */
@media only screen and (max-width: 1950px) {}
/* LAPTOP */
@media only screen and (max-width: 1550px) {}
/* TABLET */
@media only screen and (max-width: 900px) {
  .bars-white {
    margin: 1em;
  }
  #a, #b, #b2, #c, #d, #e {
    display: none;
  }
  #aa, #ba, #da, #ea {
    display: block;
  }
  #oxa {
    height: auto;
    max-width: 800px;
    width: 40vw;
  }
  #transform2 {
    height: auto;
    margin: 10px auto;
    max-width: 600px;
    width: 90%;
  }
}
/* MOBILE */
@media only screen and (max-width: 700px) {
  #bg1 * {
    font-size: 16px;
  }
}