@charset "UTF-8";
/* CSS Document */
/* SmartPhone用設定
------------------------------------------------------------------- */
@media screen and (min-width: 320px) and (max-width: 767px) {
  #wrapper {
    position: relative;
    width: 100%;
    min-width: 100%; }

  .pconly {
    display: none; }

  /* modal menu
  --------------------------------------------------------------------*/
  #modal {
    width: 140px;
    height: auto;
    z-index: 20;
    background: #333;
    padding: 8px 0 20px;
    display: none; }

  #modal ul {
    margin: 10px 0 0;
    border-top: 1px dotted #666; }

  #modal li {
    margin: 0px;
    padding: 15px 0 15px 8px;
    border-bottom: 1px dotted #666;
    color: #666; }

  #modal li a {
    display: block;
    color: #FFF; }

  #modal p a {
    background: #CCC;
    color: #333;
    font-weight: bold;
    padding: 5px 10px;
    border: none;
    text-align: center;
    display: block; }

  #pageslide {
    /* These styles MUST be included. Do not change. */
    display: none;
    position: absolute;
    position: fixed;
    top: 0;
    height: 100%;
    z-index: 9999;
    overflow: scroll;
    /* Specify the width of your pageslide here */
    width: 140px;
    padding: 0 20px;
    /* These styles are optional, and describe how the pageslide will look */
    background-color: #333;
    color: #FFF;
    -webkit-box-shadow: inset 0 0 5px 5px #222;
    -moz-shadow: inset 0 0 5px 5px #222;
    box-shadow: inset 0 0 5px 5px #222; }

  .m_menuBtn {
    display: block;
    position: absolute;
    right: 10px;
    top: 10px;
    width: 40px;
    height: 33px; }

  .mobileTel {
    display: block;
    position: absolute;
    right: 55px;
    top: 10px;
    width: 111px;
    height: 30px; }

  /* header
  --------------------------------------------------------------------*/
  header nav,
  .contactBlock,
  .logo p,
  #pageTop,
  .headerBlock p,
  .subNav,
  .subNavList,
  .sitemapSide,
  #language_tab {
    display: none; }

  header {
    width: 100%;
    min-width: 100%;
    height: 50px;
    position: fixed; }

  .headerBlock {
    width: 100%;
    height: auto;
    padding: 0 0px; }

  .headerBlock h1 {
    width: 120px;
    height: 40px;
    margin: 0 0 0 10px; }

  .headerBlock h1 a {
    width: 120px;
    height: 40px; }

  .headerBlock h1 img {
    height: 30px;
    width: auto; }

  /* footer
  --------------------------------------------------------------------*/
  .footerBlock {
    width: 100%; }

  .adressSide {
    width: 100%;
    text-align: center; }

  .adressSide ul {
    padding: 10px 0 0;
    display: flex;
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    -webkit-justify-content: center;
    justify-content: center; }

  /* other
  --------------------------------------------------------------------*/
  .breadCrumb {
    display: none; }

  .listTtl h2 {
    width: auto;
    height: auto;
    padding: 16px 10px 20px;
    line-height: 1.0em;
    font-size: 182%; }

  .contentsContact {
    background-repeat: no-repeat;
    background-image: url(../../common/images/waku_contact.png);
    background-size: 100% 100%;
    width: auto;
    height: auto;
    margin: 0px 10px 50px;
    padding-bottom: 30px; }

  .contentsContact h2 {
    text-align: center;
    padding: 20px 0 0; }

  .contentsContact p img {
    width: 80%;
    height: auto; }

  .contentsContact p {
    text-align: center;
    padding: 10px 0 0; }

  .contentsContact ul {
    display: block;
    padding: 8px 20px 0px; }

  .contentsContact li {
    width: auto;
    height: auto;
    margin: 5px 5px 0; }

  .contentsContact li a {
    width: 100%;
    height: auto;
    display: block;
    text-align: center;
    padding: 8px 0; }

  .contentsContact h3 {
    font-size: 116%; }

  .chitose_read p {
    text-align: left;
    line-height: 1.5em; }

  .conv_img ul {
    display: block; }

  #kodawarisArea .conv_img li {
    padding: 10px 0 0;
    height: auto; }

  .conv_img li img {
    width: 100%;
    height: auto; }

  #kodawarisArea .cspec_block {
    display: block; }

  #kodawarisArea .cspec_img {
    width: 100%;
    height: auto; }

  #kodawarisArea .cspec_img img {
    width: 100%;
    height: auto; }

  #kodawarisArea .cspec_txt {
    width: 100%;
    height: auto;
    padding: 10px 0 0; }

  .cspec_txt p {
    line-height: 2em; } }
.area_drawer {
  z-index: 89900;
  position: relative;
  /* checkbox */
  /* menu button - label tag */
  /*.menu-btn:hover .bar {
      background: #999;
  }

  .menu-btn:hover .menu-btn__text {
      color: #999;
  }*/
  /* checked */ }
  .area_drawer .drawer-menu {
    box-sizing: border-box;
    position: fixed;
    overflow: scroll;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding: 80px 0;
    background: rgba(255, 255, 255, 0.9);
    -webkit-transition-property: all;
    transition-property: all;
    -webkit-transition-duration: .5s;
    transition-duration: .5s;
    -webkit-transition-delay: 0s;
    transition-delay: 0s;
    -webkit-transform-origin: left center;
    -ms-transform-origin: left center;
    transform-origin: left center;
    -webkit-transform: perspective(500px) rotateY(90deg);
    transform: perspective(500px) rotateY(90deg);
    opacity: 0;
    text-align: center; }
    .area_drawer .drawer-menu h2 {
      color: #000;
      font-size: 2.2rem;
      line-height: 1.4em;
      letter-spacing: 0.1em;
      padding: 2px 0 0 20px;
      position: absolute;
      top: 20px;
      left: 0px; }
    .area_drawer .drawer-menu ul {
      display: inline-block; }
      .area_drawer .drawer-menu ul li {
        text-align: left; }
        .area_drawer .drawer-menu ul li a {
          display: block;
          height: 35px;
          line-height: 35px;
          font-size: 16px;
          font-weight: 500;
          color: #000;
          -webkit-transition: all .8s;
          transition: all .8s; }
  .area_drawer .drawer-menu li {
    text-align: center; }
  .area_drawer .drawer-menu li a {
    display: block;
    height: 50px;
    line-height: 50px;
    font-size: 16px;
    font-weight: 700;
    color: #000;
    -webkit-transition: all .8s;
    transition: all .8s; }
  .area_drawer .drawer-menu li a:hover {
    color: #000; }
  .area_drawer .check {
    display: none; }
  .area_drawer .menu-btn {
    position: fixed;
    top: 10px;
    right: 10px;
    display: none;
    width: 40px;
    height: 30px;
    font-size: 10px;
    text-align: center;
    cursor: pointer;
    z-index: 100000;
    background-color: #FFF;
    border-radius: 4px; }
    @media screen and (min-width: 320px) and (max-width: 767px) {
      .area_drawer .menu-btn {
        display: block; } }
  .area_drawer .bar {
    position: absolute;
    top: 7px;
    left: 5px;
    display: block;
    width: 30px;
    height: 3px;
    background: #9E7884;
    -webkit-transition: all .5s;
    transition: all .5s;
    -webkit-transform-origin: left top;
    -ms-transform-origin: left top;
    transform-origin: left top; }
  .area_drawer .bar.middle {
    top: 14px;
    opacity: 1; }
  .area_drawer .bar.bottom {
    top: 21px;
    -webkit-transform-origin: left bottom;
    -ms-transform-origin: left bottom;
    transform-origin: left bottom; }
  .area_drawer .menu-btn__text {
    position: absolute;
    bottom: -15px;
    left: 0;
    right: 0;
    margin: auto;
    color: #fff;
    -webkit-transition: all .5s;
    transition: all .5s;
    display: block;
    visibility: visible;
    opacity: 1; }
  .area_drawer .close-menu {
    position: fixed;
    top: 0;
    right: 300px;
    width: 100%;
    height: 100vh;
    background: rgba(0, 0, 0, 0);
    cursor: url(https://theorthodoxworks.com/demo/images/cross.svg), auto;
    -webkit-transition-property: all;
    transition-property: all;
    -webkit-transition-duration: .3s;
    transition-duration: .3s;
    -webkit-transition-delay: 0s;
    transition-delay: 0s;
    visibility: hidden;
    opacity: 0; }
  .area_drawer .check:checked ~ .drawer-menu {
    -webkit-transition-delay: .3s;
    transition-delay: .3s;
    -webkit-transform: none;
    -ms-transform: none;
    transform: none;
    opacity: 1;
    z-index: 20000; }
  .area_drawer .check:checked ~ .menu-btn .menu-btn__text {
    visibility: hidden;
    opacity: 0; }
  .area_drawer .check:checked ~ .menu-btn .bar.top {
    width: 29px;
    left: 12px;
    top: 5px;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg); }
  .area_drawer .check:checked ~ .menu-btn .bar.middle {
    opacity: 0; }
  .area_drawer .check:checked ~ .menu-btn .bar.bottom {
    width: 29px;
    top: 25px;
    left: 12px;
    -webkit-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    transform: rotate(-45deg); }
  .area_drawer .check:checked ~ .close-menu {
    -webkit-transition-duration: 1s;
    transition-duration: 1s;
    -webkit-transition-delay: .3s;
    transition-delay: .3s;
    background: rgba(255, 255, 255, 0.9);
    visibility: visible;
    opacity: 1;
    z-index: 30000; }