@charset "utf-8";

#switch-button-pc {
  clear: both;
  width: 80%;
  background: #333;
  color: #fff;
  font-weight: bold;
  text-align: center;
  border-radius: 10px;
  display: block;
  padding: 25px 0;
  margin: 0 auto 20px auto;
  font-size: 35px;
}
#switch-button-sp {
  clear: both;
  width: 80%;
  max-width: 400px;
  background: #333;
  color: #fff;
  font-weight: bold;
  text-align: center;
  border-radius: 5px;
  display: block;
  padding: 12px 0 10px 0;
  margin: 0 auto 20px auto;
}
#switch-button-pc:hover,
#switch-button-sp:hover,
#switch-button-pc:active,
#switch-button-sp:active {
  text-decoration: none;
  background: #444;
}
footer ul {
  margin-left: -20px;
}

/* for iPad */
@media screen and (min-width: 768px) {
  html,
  body {
    min-width: 960px;
  }
}

@media screen and (max-width: 767px) {
  html,
  body {
    min-width: auto;
  }
  body {
    padding: 15px;
  }
  header {
    width: 100%;
    height: auto;
    border: 0;
    margin-bottom: 20px;
  }
  header h1 {
    position: static;
    margin-top: -2px;
    margin-left: 15px;
  }
  header h1 a {
    background-size: 100%;
    padding-top: 64px;
    width: 130px;
  }
  header ul {
    position: static;
    margin: 10px 0 10px 50px;
  }
  header ul li {
    margin-bottom: 5px;
  }
  header ul li:nth-child(odd) {
    width: 45%;
    margin-right: 35px;
  }
  header ul li:nth-child(even) {
    width: 38%;
    margin-right: 0;
  }
  .h-menu-user {
    width: auto;
  }
  #container {
    border: 0;
    box-sizing: border-box;
    width: 100%;
    margin: 0;
    padding: 0 0 50px 0;
    background: none;
  }
  #content {
    width: 100%;
    box-sizing: border-box;
    margin: 0;
  }
  #content::after {
    display: none;
  }
  .section-box01,
  .section-box02 {
    margin: 0 15px;
    padding: 0;
  }
  .section-box03 {
    padding: 20px 20px;
  }
  .tagline {
    width: 290px;
    background-position: 0 -85px;
    background-size: 143.5%;
    margin-bottom: -25px;
  }
  .twilog-sample {
    box-sizing: border-box;
    margin: 0 auto 35px auto;
    width: 280px;
    height: 216px;
  }
  .twilog-sample img {
    width: 264px;
    height: 200px;
  }
  .social-buttons {
    width: 295px;
    margin: 0 auto;
  }
  .bt-twitter {
    width: 80px;
  }
  .bt-hatena {
      width: 120px;
  }
  .home-features {
    position: static;
    width: 100%;
  }
  .home-features .list-buttons li {
    float: none;
    margin: 0;
  }
  .bt-register {
    margin: 0 auto;
  }
  .list-check {
    width: auto;
    margin-left: 15px;
  }
  #home-search {
    text-align: center;
  }
  #home-search p {
    float: none;
  }
  #home-search .tx-attention02 {
    width: auto;
    margin-right: 0;
  }
  #home-search form {
    width: 100%;
  }
  #home-search form span {
    display: none;
  }
  #home-search .input01 {
    width: 150px;
    padding-left: 10px;
  }
  #home-search .submit01 {
    -webkit-appearance: none;
  }
  #home-search .tx-attention03 {
    margin: 15px 0 0 0;
  }
  #home-search .tx-attention03 br {
    display: none;
  }
  #home-search .tx-attention03::after {
    display: none;
  }
  .box-user,
  .box-new-user {
    margin: 0 0 20px 15px;
    float: none;
    width: auto;
  }
  .round-image {
    margin: 0 auto;
  }
  .round-image li {
    margin: 0 8px 12px 8px;
  }
  .title01 {
    width: 100%;
    box-sizing: border-box;
    margin-bottom: 15px;
    padding: 0 15px;
  }
  footer {
    border: 0;
    padding: 0;
  }
  footer ul {
    padding: 60px 10px 10px 10px;
    margin: 0 0 5px 0;
  }
  footer li {
    line-height: 2;
    white-space: nowrap;
  }
  footer p small {
    display: block;
    width: 80%;
    margin: 0 auto;
  }
  .pagetop {
    right: 10px;
  }
  .tx-attention01 {
    line-height: 1.5;
  }
  .bt-register02 a,.bt-register02 input {
    width: 100%;
  }
  #about-icon .date-list {
    margin-left: -85px;
  }
  .list01 a+span {
    display: block;
    padding: 5px 0 0 0;
  }
}

@media screen and (max-width: 375px) {
  body {
    padding: 10px;
  }
  header ul li:nth-child(odd) {
    width: 55%;
    margin-right: 10px;
  }
  header ul li:nth-child(even) {
    width: 35%;
    margin-right: 10px;
  }
  .list-check {
    margin-left: 5px;
    font-size: 120%;
  }
  .box-user,
  .box-new-user {
    margin: 0 0 20px 0;
  }
}

@media screen and (max-width: 360px) {
  .round-image a,
  .round-image img {
    width: 69px;
    height: 69px;
  }
  .round-image-small a,
  .round-image-small img {
    width: 35px;
    height: 35px;
  }
}

@media screen and (max-width: 320px) {
  body {
    padding: 10px 5px 5px 5px;
  }
  header ul {
    margin: 10px 0 10px 45px;
    font-size: 95%;
  }
  header ul li:nth-child(odd) {
    width: 60%;
    margin-right: 0;
  }
  header ul li:nth-child(even) {
    width: 35%;
    margin-right: 0;
  }
  .list-check {
    font-size: 110%;
  }
  .section-box02 {
    margin: 0 5px;
  }
  .round-image a,
  .round-image img {
    width: 58px;
    height: 58px;
  }
  .round-image-small a,
  .round-image-small img {
    width: 29px;
    height: 29px;
  }
}