body {
  margin: 0;
  padding: 0;
  background-color: #fff;
  color: #555;
  text-align: center;
  font: normal 14px Sans-serif;
  line-height: 150%;
}

th, td {
  color: #555;
  vertical-align: top;
  font-weight: normal;
  font: normal 14px Sans-serif;
  line-height: 150%;
}

img {
  border: none;
}

form {
  margin: 0;
}

a {
  cursor: pointer;
}

a:link {
  color: #486B97;
  text-decoration: none;
}

a:visited, a:active {
  color: #5B8190;
  text-decoration: none;
}

a:hover {
  color: #946349;
  text-decoration: underline;
}

@media only screen and (max-width: 767px) {
  .wrap {
    width: 320px;
    margin: auto;
  }
  .wrap h1 {
    margin: 0 0 10px 0;
    border-bottom: 2px dotted #999;
    padding: 20px 10px 6px 10px;
    font-size: 16px;
    line-height: 150%;
    text-align: left;
  }
  .wrap h2 {
    margin: 0 0 10px 0;
    background-color: #333;
    color: #fff;
    padding: 8px 10px 6px 10px;
    font-size: 14px;
    line-height: 150%;
  }
}

@media only screen and (min-width: 768px) {
  .wrap {
    width: 1080px;
    margin: auto;
  }
  .wrap h1 {
    margin: 0 0 10px 0;
    border-bottom: 2px dotted #999;
    padding: 20px 10px 6px 10px;
    font-size: 16px;
    line-height: 150%;
    text-align: left;
  }
  .wrap h2 {
    margin: 0 0 10px 0;
    background-color: #333;
    color: #fff;
    padding: 8px 10px 6px 10px;
    font-size: 14px;
    line-height: 150%;
  }
}

.row12grid .center {
  text-align: center;
}

.row12grid .inner {
  margin: 0 0 20px 10px;
}

.row12grid .margin-bottom {
  margin: 0 0 30px 0;
}

.row12grid p {
  margin: 15px 0 0 0;
}

.row12grid p:first-child {
  margin: 0 0 0 0;
}

@media only screen and (max-width: 767px) {
  .row12grid .grid1,
  .row12grid .grid2,
  .row12grid .grid3,
  .row12grid .grid4,
  .row12grid .grid5,
  .row12grid .grid6,
  .row12grid .grid7,
  .row12grid .grid8,
  .row12grid .grid9,
  .row12grid .grid10,
  .row12grid .grid11,
  .row12grid .grid12 {
    display: block;
    margin: 0 0 20px 0;
  }
  .row12grid .grid1 img,
  .row12grid .grid2 img,
  .row12grid .grid3 img,
  .row12grid .grid4 img,
  .row12grid .grid5 img,
  .row12grid .grid6 img,
  .row12grid .grid7 img,
  .row12grid .grid8 img,
  .row12grid .grid9 img,
  .row12grid .grid10 img,
  .row12grid .grid11 img,
  .row12grid .grid12 img {
    max-width: 300px;
  }
}

@media only screen and (min-width: 768px) {
  .row12grid {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: row;
    flex-direction: row;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-justify-content: space-between;
    justify-content: space-between;
  }
  .row12grid .grid1 {
    width: 8.333%;
  }
  .row12grid .grid1 img {
    max-width: 80px;
  }
  .row12grid .grid2 {
    width: 16.666%;
  }
  .row12grid .grid2 img {
    max-width: 160px;
  }
  .row12grid .grid3 {
    width: 24.999%;
  }
  .row12grid .grid3 img {
    max-width: 240px;
  }
  .row12grid .grid4 {
    width: 33.332%;
  }
  .row12grid .grid4 img {
    max-width: 320px;
  }
  .row12grid .grid5 {
    width: 41.665%;
  }
  .row12grid .grid5 img {
    max-width: 400px;
  }
  .row12grid .grid6 {
    width: 49.998%;
  }
  .row12grid .grid6 img {
    max-width: 480px;
  }
  .row12grid .grid7 {
    width: 58.331%;
  }
  .row12grid .grid7 img {
    max-width: 560px;
  }
  .row12grid .grid8 {
    width: 66.664%;
  }
  .row12grid .grid8 img {
    max-width: 640px;
  }
  .row12grid .grid9 {
    width: 74.997%;
  }
  .row12grid .grid9 img {
    max-width: 720px;
  }
  .row12grid .grid10 {
    width: 83.33%;
  }
  .row12grid .grid10 img {
    max-width: 800px;
  }
  .row12grid .grid11 {
    width: 91.663%;
  }
  .row12grid .grid11 img {
    max-width: 880px;
  }
  .row12grid .grid12 {
    width: 99.996%;
  }
  .row12grid .grid12 img {
    max-width: 960px;
  }
}

.row12space .center {
  text-align: center;
}

.row12space .inner {
  margin: 0 0 20px 10px;
}

.row12space .margin-bottom {
  margin: 0 0 30px 0;
}

.row12space p {
  margin: 15px 0 0 0;
}

.row12space p:first-child {
  margin: 0 0 0 0;
}

@media only screen and (max-width: 767px) {
  .row12space .grid1,
  .row12space .grid2,
  .row12space .grid3,
  .row12space .grid4,
  .row12space .grid5,
  .row12space .grid6,
  .row12space .grid7,
  .row12space .grid8,
  .row12space .grid9,
  .row12space .grid10,
  .row12space .grid11,
  .row12space .grid12 {
    display: block;
    margin: 0 0 20px 0;
  }
  .row12space .grid1 img,
  .row12space .grid2 img,
  .row12space .grid3 img,
  .row12space .grid4 img,
  .row12space .grid5 img,
  .row12space .grid6 img,
  .row12space .grid7 img,
  .row12space .grid8 img,
  .row12space .grid9 img,
  .row12space .grid10 img,
  .row12space .grid11 img,
  .row12space .grid12 img {
    max-width: 300px;
  }
}

@media only screen and (min-width: 768px) {
  .row12space {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: row;
    flex-direction: row;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-justify-content: space-between;
    justify-content: space-between;
  }
  .row12space img {
    width: 100%;
  }
  .row12space .grid1 {
    width: 8%;
  }
  .row12space .grid1 img {
    max-width: 80px;
  }
  .row12space .grid2 {
    width: 16%;
  }
  .row12space .grid2 img {
    max-width: 160px;
  }
  .row12space .grid3 {
    width: 24%;
  }
  .row12space .grid3 img {
    max-width: 240px;
  }
  .row12space .grid4 {
    width: 32%;
  }
  .row12space .grid4 img {
    max-width: 320px;
  }
  .row12space .grid5 {
    width: 40%;
  }
  .row12space .grid5 img {
    max-width: 400px;
  }
  .row12space .grid6 {
    width: 48%;
  }
  .row12space .grid6 img {
    max-width: 480px;
  }
  .row12space .grid7 {
    width: 56%;
  }
  .row12space .grid7 img {
    max-width: 560px;
  }
  .row12space .grid8 {
    width: 64%;
  }
  .row12space .grid8 img {
    max-width: 640px;
  }
  .row12space .grid9 {
    width: 72%;
  }
  .row12space .grid9 img {
    max-width: 720px;
  }
  .row12space .grid10 {
    width: 80%;
  }
  .row12space .grid10 img {
    max-width: 800px;
  }
  .row12space .grid11 {
    width: 88%;
  }
  .row12space .grid11 img {
    max-width: 880px;
  }
  .row12space .grid12 {
    width: 96%;
  }
  .row12space .grid12 img {
    max-width: 960px;
  }
}

@media only screen and (max-width: 767px) {
  .nomobile {
    display: none;
  }
}

@media only screen and (min-width: 768px) {
  .nopc {
    display: none;
  }
}

.tvscreen {
  margin: 0;
  padding: 0;
  position: relative;
}

.tvscreen .screen {
  width: 100%;
  margin: 0;
  padding: 0;
  display: block;
  position: relative;
  z-index: 2;
}

.tvscreen .nowplaying {
  z-index: 1;
  position: absolute;
  top: 65px;
  right: 0;
  left: 0;
  margin-left: auto;
  margin-right: auto;
  width: 940px;
}

.tvscreen .nowplaying img {
  width: auto;
  position: relative;
}

@media only screen and (max-width: 767px) {
  .tvscreen .nowplaying {
    top: 10px;
    width: 100%;
  }
  .tvscreen .nowplaying img {
    width: 100%;
  }
}

.tvbuttons {
  margin: 0;
  padding: 0 10px;
  padding-top: 10px;
  text-align: left;
  position: relative;
}

.tvbuttons img {
  margin: 0;
  padding: 0;
}

@media only screen and (max-width: 767px) {
  .tvbuttons img {
    width: 47%;
  }
}

.tvbuttons p {
  margin: 0;
  padding: 0;
  padding-top: 5px;
}

@media only screen and (min-width: 768px) {
  .tvbuttons p {
    margin-left: 250px;
    margin-right: 250px;
  }
}

@media only screen and (max-width: 767px) {
  .tvbuttons {
    text-align: center;
  }
}

.channelup, .powerswitch {
  outline: none;
}

#channelupbutt {
  pointer-events: none;
  position: absolute;
  background-color: yellow;
  height: 20px;
  width: 20px;
  left: 134px;
  top: 49px;
  border-radius: 50%;
  opacity: 0;
}

@media only screen and (max-width: 767px) {
  #channelupbutt {
    left: 92px;
    top: 34px;
  }
}

#powerswitchbutt {
  pointer-events: none;
  position: absolute;
  background-color: green;
  height: 20px;
  width: 20px;
  left: 187px;
  top: 49px;
  border-radius: 50%;
  opacity: 0.5;
}

@media only screen and (max-width: 767px) {
  #powerswitchbutt {
    left: 129px;
    top: 34px;
  }
}

.languagechoice {
  position: absolute;
  top: 45px;
  right: 45px;
  z-index: 5;
}

.languagechoice a {
  color: #FFF;
}

@media only screen and (max-width: 767px) {
  .languagechoice {
    top: 10px;
    right: 12px;
  }
}

@media only screen and (min-width: 768px) {
  .explanationholder .map {
    width: 50%;
    float: right;
  }
}

@media only screen and (max-width: 767px) {
  .explanationholder .map {
    width: 100%;
  }
}

.explanationholder .leftside {
  width: 49%;
  float: left;
}

.explanationholder .leftside .kamimonoholder, .explanationholder .leftside .omakeholder {
  display: inline-block;
  border: solid 2px #A8B9C0;
  margin: 5px 0px;
  position: relative;
  padding: 5px;
}

@media only screen and (max-width: 767px) {
  .explanationholder .leftside .kamimonoholder, .explanationholder .leftside .omakeholder {
    width: 90%;
    margin: 10px 0 0 0;
  }
}

.explanationholder .leftside .kamimonoholder div, .explanationholder .leftside .omakeholder div {
  width: 70%;
  float: right;
}

.explanationholder .leftside .kamimonoholder p, .explanationholder .leftside .omakeholder p {
  margin: 0;
  display: block;
}

.explanationholder .leftside .kamimonoholder .lead, .explanationholder .leftside .omakeholder .lead {
  font-size: 20px;
  font-weight: 900;
  margin-top: 10px;
  margin-bottom: 5px;
}

.explanationholder .leftside .kamimonoholder .auclink, .explanationholder .leftside .omakeholder .auclink {
  margin: 5px 0;
}

.explanationholder .leftside .kamimonoholder .auclink a, .explanationholder .leftside .omakeholder .auclink a {
  display: inline-block;
  background-color: #4e77a4;
  color: #fff;
  padding: 5px 10px;
}

.explanationholder .leftside .kamimonoholder img, .explanationholder .leftside .omakeholder img {
  height: 75px;
  float: left;
  margin-top: 10px;
}

.explanationholder .leftside .kamimonoholder img:nth-child(2), .explanationholder .leftside .omakeholder img:nth-child(2) {
  position: absolute;
  left: 60px;
}

@media only screen and (max-width: 767px) {
  .explanationholder .leftside .kamimonoholder img:nth-child(2), .explanationholder .leftside .omakeholder img:nth-child(2) {
    left: 0;
    bottom: 10px;
  }
}

@media only screen and (max-width: 767px) {
  .explanationholder .leftside {
    width: 100%;
  }
}

.opentoujitsu {
  position: absolute;
  right: -600px;
}

@media only screen and (max-width: 767px) {
  .opentoujitsu {
    position: static;
    width: 95%;
  }
}

.instagramarea {
  background-color: #ECECEB;
  text-align: left;
  padding-top: 10px;
}

@media only screen and (max-width: 767px) {
  .instagramarea {
    margin-top: 10px;
  }
}

.instagramarea .instagramheader {
  position: relative;
  text-align: center;
  min-height: 30px;
}

.instagramarea .instagramheader span {
  font-family: 'American Typewriter', Courier, 'Courier New', monospace;
  font-size: 18px;
}

@media only screen and (min-width: 768px) {
  .instagramarea .instagramheader {
    display: table;
    text-align: left;
  }
  .instagramarea .instagramheader span {
    vertical-align: middle;
    display: table-cell;
    padding-left: 10px;
    padding-right: 10px;
  }
  .instagramarea .instagramheader br {
    display: none;
  }
}

.instagramarea blockquote {
  height: 400px !important;
}

#instamax-header, #instamax-select {
  display: none !important;
}

#instamax-load-more-div {
  display: none;
}

#instamax {
  background-color: #ECECEB;
  border: none;
}

#instamax-photo-list-div {
  background-color: #ECECEB;
}

#instamax-tabs {
  display: none;
}

#tiles li {
  background-color: #FFFFFF;
  padding-top: 10px;
}

#tiles li img {
  width: 90%;
  margin: auto;
  padding-bottom: 20px;
}

#tiles li p {
  position: relative;
  overflow: visible;
}

@media only screen and (min-width: 768px) {
  #tiles li::before {
    text-align: center;
    padding-left: 10px;
    content: url(../img/konpeito_instagram_avatar_name.jpg);
  }
}

@media only screen and (min-width: 768px) {
  .english #instamax-photo-list-div #tiles li::before {
    content: url(../img/konpeito_instagram_avatar_name.jpg);
  }
}

span.instamax-photo-list-title {
  display: block;
  display: -webkit-box;
  max-width: 100%;
  height: 41px;
  margin: 0 auto;
  font-size: 14px;
  line-height: 1;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media only screen and (max-width: 767px) {
  span.instamax-photo-list-title {
    height: 29px;
    font-size: 10px;
  }
}

.instamax-definition, .instamax-duration {
  background-color: #FFFFFF !important;
  color: #555555;
  bottom: 75px;
}

.instamax-definition .fa-heart, .instamax-duration .fa-heart {
  color: red;
}

.instamax-definition .fa-comment, .instamax-duration .fa-comment {
  color: blue;
}

@media only screen and (max-width: 767px) {
  .instamax-definition, .instamax-duration {
    bottom: 55px;
  }
}

.tempstagram {
  margin-left: 5px;
}

@media only screen and (min-width: 768px) {
  .tempstagram {
    margin-top: 5px;
    padding-left: 10px;
  }
}

.tempstagram .item {
  display: inline-block;
  width: 262px;
  height: 391px;
  background-image: url("../img/tempstagram_blank.jpg");
  position: relative;
}

@media only screen and (max-width: 767px) {
  .tempstagram .item {
    width: 49%;
    background-size: contain;
    background-repeat: no-repeat;
    height: 230px;
  }
}

.tempstagram .item img {
  position: absolute;
  top: 70px;
  left: 21px;
}

@media only screen and (max-width: 767px) {
  .tempstagram .item img {
    width: 80%;
    left: 15px;
    top: 40px;
  }
}

.tempstagram .item div {
  color: #648ee9;
  font-weight: 700;
  position: absolute;
  top: 320px;
  left: 21px;
  width: 220px;
  text-align: center;
  /* hide text if it more than N lines  */
  overflow: hidden;
  /* use this value to count block height */
  line-height: 1.2em;
  /* max-height = line-height (1.2) * lines max number (3) */
  max-height: 3.6em;
}

@media only screen and (max-width: 767px) {
  .tempstagram .item div {
    width: 80%;
    left: 15px;
    top: 185px;
    font-size: 10px;
  }
}

.topics {
  text-align: left;
}