@charset "UTF-8";
/* media-queries.css */
@media screen and (min-width: 1680px) {
  /* 1680px以上 */ }
@media screen and (max-width: 1281px) {
  /* 1280px以下 */ }
@media screen and (max-width: 961px) {
  /* 960px以下 */ }
@media screen and (max-width: 820px) {
  /* 820px以下 */
  #header {
    flex-wrap: wrap;
    justify-content: center; }
    #header .titleBox {
      justify-content: flex-start;
      width: 100%; }
      #header .titleBox h1 {
        margin-right: 0.5em; }
    #header .nav {
      background: rgba(0, 0, 0, 0.9);
      display: flex;
      justify-content: center;
      position: fixed;
      top: 0;
      right: -100vw;
      width: 75%;
      height: 100vh;
      transition: all .25s; }
      #header .nav.is-active {
        right: 0; }
      #header .nav .inner {
        display: flex;
        align-content: center;
        flex-wrap: wrap;
        justify-content: center; }
        #header .nav .inner form {
          margin-bottom: 1em;
          width: 80%; }
          #header .nav .inner form input {
            background: #FFF;
            box-sizing: border-box;
            padding: 1em;
            width: 100%; }
      #header .nav ul {
        align-content: center;
        flex-wrap: wrap;
        width: 80%; }
        #header .nav ul li {
          border-bottom: 1px solid #FFF;
          text-align: center;
          width: 100%; }
          #header .nav ul li:first-child {
            border-top: 1px solid #FFF; }
          #header .nav ul li a {
            color: #FFF;
            display: block;
            padding: 1.5em 0; }

  .menu-btn {
    display: block; }

  .recommendArea {
    margin-bottom: 80px; }
    .recommendArea ul.list {
      flex-wrap: wrap; }
      .recommendArea ul.list li {
        width: 47.5%;
        margin-bottom: 40px; }

  #top-page #wrapper,
  .search #wrapper,
  .archive #wrapper {
    flex-wrap: wrap; }
    #top-page #wrapper #mainArea,
    #top-page #wrapper #sidebar,
    .search #wrapper #mainArea,
    .search #wrapper #sidebar,
    .archive #wrapper #mainArea,
    .archive #wrapper #sidebar {
      width: 100%; }
    #top-page #wrapper #mainArea,
    .search #wrapper #mainArea,
    .archive #wrapper #mainArea {
      margin-bottom: 120px; }
      #top-page #wrapper #mainArea .listArea ul li .post a .inner .txtBox,
      .search #wrapper #mainArea .listArea ul li .post a .inner .txtBox,
      .archive #wrapper #mainArea .listArea ul li .post a .inner .txtBox {
        padding: 0 1em; }

  #page #wrapper,
  #single-page #wrapper {
    padding-left: 0;
    padding-right: 0; }

  .tab {
    display: block; }

  .tab-none {
    display: none; } }
@media screen and (max-width: 481px) {
  /* 480px以下 */
  #header {
    transition: all 0.8s; }
    #header.UpMove {
      opacity: 0;
      top: -120px; }
      #header.UpMove.is-active {
        opacity: 1; }
    #header.DownMove {
      opacity: 1;
      top: 0; }
    #header .titleBox {
      flex-wrap: wrap; }
      #header .titleBox .desc {
        font-size: 11px;
        padding: 0 0.25em; }
    #header .nav {
      width: 100%; }
      #header .nav ul {
        width: 80%; }

  .recommendArea {
    margin-bottom: 40px; }
    .recommendArea h2 {
      display: block;
      font-size: 24px;
      line-height: 1.2em; }
      .recommendArea h2 span {
        display: block;
        font-weight: 400; }
    .recommendArea ul.list li a figure {
      border-radius: 10px; }
    .recommendArea ul.list li h3 {
      font-size: 14px;
      line-height: 1.4em; }
    .recommendArea ul.list li .date {
      font-size: 12px; }

  #top-page #wrapper,
  .search #wrapper,
  .archive #wrapper {
    padding-top: 40px;
    padding-bottom: 80px; }
    #top-page #wrapper #mainArea,
    .search #wrapper #mainArea,
    .archive #wrapper #mainArea {
      margin-bottom: 0; }
      #top-page #wrapper #mainArea .listArea h2,
      .search #wrapper #mainArea .listArea h2,
      .archive #wrapper #mainArea .listArea h2 {
        display: block;
        font-size: 24px;
        line-height: 1.2em; }
        #top-page #wrapper #mainArea .listArea h2 span,
        .search #wrapper #mainArea .listArea h2 span,
        .archive #wrapper #mainArea .listArea h2 span {
          display: block;
          font-weight: 400; }
      #top-page #wrapper #mainArea .listArea ul li .post a .inner,
      .search #wrapper #mainArea .listArea ul li .post a .inner,
      .archive #wrapper #mainArea .listArea ul li .post a .inner {
        flex-wrap: wrap; }
        #top-page #wrapper #mainArea .listArea ul li .post a .inner .imgBox,
        #top-page #wrapper #mainArea .listArea ul li .post a .inner .txtBox,
        .search #wrapper #mainArea .listArea ul li .post a .inner .imgBox,
        .search #wrapper #mainArea .listArea ul li .post a .inner .txtBox,
        .archive #wrapper #mainArea .listArea ul li .post a .inner .imgBox,
        .archive #wrapper #mainArea .listArea ul li .post a .inner .txtBox {
          width: 100%; }
        #top-page #wrapper #mainArea .listArea ul li .post a .inner .imgBox,
        .search #wrapper #mainArea .listArea ul li .post a .inner .imgBox,
        .archive #wrapper #mainArea .listArea ul li .post a .inner .imgBox {
          margin-bottom: 1em; }
        #top-page #wrapper #mainArea .listArea ul li .post a .inner .txtBox,
        .search #wrapper #mainArea .listArea ul li .post a .inner .txtBox,
        .archive #wrapper #mainArea .listArea ul li .post a .inner .txtBox {
          padding: 0; }
          #top-page #wrapper #mainArea .listArea ul li .post a .inner .txtBox h3,
          .search #wrapper #mainArea .listArea ul li .post a .inner .txtBox h3,
          .archive #wrapper #mainArea .listArea ul li .post a .inner .txtBox h3 {
            line-height: 1.5em; }
          #top-page #wrapper #mainArea .listArea ul li .post a .inner .txtBox p,
          .search #wrapper #mainArea .listArea ul li .post a .inner .txtBox p,
          .archive #wrapper #mainArea .listArea ul li .post a .inner .txtBox p {
            font-size: 14px; }
          #top-page #wrapper #mainArea .listArea ul li .post a .inner .txtBox .date,
          .search #wrapper #mainArea .listArea ul li .post a .inner .txtBox .date,
          .archive #wrapper #mainArea .listArea ul li .post a .inner .txtBox .date {
            font-size: 13px; }
      #top-page #wrapper #mainArea .listArea .pagination,
      .search #wrapper #mainArea .listArea .pagination,
      .archive #wrapper #mainArea .listArea .pagination {
        margin-top: 40px; }

  #page #wrapper,
  #single-page #wrapper {
    padding-top: 40px;
    padding-bottom: 80px; }
    #page #wrapper .inner .titleBox .title,
    #single-page #wrapper .inner .titleBox .title {
      font-size: 24px;
      margin-bottom: 12px; }
    #page #wrapper .inner .titleBox .date,
    #single-page #wrapper .inner .titleBox .date {
      font-size: 13px; }
    #page #wrapper .inner .titleBox .listBox ul li a,
    #single-page #wrapper .inner .titleBox .listBox ul li a {
      padding: 0.35em 1em 0.3em; }
    #page #wrapper .inner .titleBox ul,
    #single-page #wrapper .inner .titleBox ul {
      margin-bottom: 0; }
      #page #wrapper .inner .titleBox ul li,
      #single-page #wrapper .inner .titleBox ul li {
        font-size: 12px; }
    #page #wrapper .inner h1,
    #single-page #wrapper .inner h1 {
      font-size: 200%; }
    #page #wrapper .inner h2,
    #single-page #wrapper .inner h2 {
      font-size: 150%; }
    #page #wrapper .inner h3,
    #single-page #wrapper .inner h3 {
      font-size: 120%; }
    #page #wrapper .inner h4,
    #single-page #wrapper .inner h4 {
      font-size: 112%; }
    #page #wrapper .inner h5,
    #single-page #wrapper .inner h5 {
      font-size: 108%; }
    #page #wrapper .inner h6,
    #single-page #wrapper .inner h6 {
      font-size: 100%; }
    #page #wrapper .inner .wpcf7,
    #single-page #wrapper .inner .wpcf7 {
      font-size: 14px; }
      #page #wrapper .inner .wpcf7 input[type=submit], #page #wrapper .inner .wpcf7 textarea[type=submit],
      #single-page #wrapper .inner .wpcf7 input[type=submit],
      #single-page #wrapper .inner .wpcf7 textarea[type=submit] {
        width: 80%; }
  #page .navigation,
  #single-page .navigation {
    margin-bottom: 80px; }
    #page .navigation ul,
    #single-page .navigation ul {
      flex-wrap: wrap;
      margin: 0; }
      #page .navigation ul li,
      #single-page .navigation ul li {
        border-right: none;
        padding: 1em 10% 1em 5%;
        width: 100%; }
        #page .navigation ul li.prev,
        #single-page .navigation ul li.prev {
          text-align: left;
          border-right: none;
          border-bottom: 1px solid rgba(49, 49, 47, 0.25); }
          #page .navigation ul li.prev::after,
          #single-page .navigation ul li.prev::after {
            transform: rotate(45deg);
            left: auto;
            right: 5%; }
        #page .navigation ul li.next::after,
        #single-page .navigation ul li.next::after {
          right: 5%; }
        #page .navigation ul li:last-child,
        #single-page .navigation ul li:last-child {
          border-bottom: none; }
        #page .navigation ul li a,
        #single-page .navigation ul li a {
          padding: 0.5em 0; }

  .pc {
    display: none; }

  .tab {
    display: none; }

  .smp {
    display: block; } }