@charset "utf-8";
@media screen and (max-width: 662px) {

  /* header */
  header {
      background: url(../images/tree.png) 68% 130% no-repeat;
      background-size: 265% 170%;
  }
  .head_text {
      width: 90%;
  }
  .head_text .site_titl {
      margin: 0;
      width: 65%;
  }
  .head_text .site_titl a {
      font-size: 16px;
      height: 56px;
      width: 90%;
  }
  .head_text .copy_text {
      font-size: 11px;
      width: 100%;
  }
  #gronav {
      width: 96%;
  }
  #gronav_menu {
      border-bottom: none;
      display: flex;
      flex-wrap: wrap;
      font-size: 14px;
      list-style: none;
      position: static;
      width: 100%;
  }
  #gronav_menu li {
      width: 50%;
  }
  #gronav_menu li:nth-child(even) {
      border-right: none;
  }
  #gronav_menu li a {
      padding: 8%;
  }
  #gronav_menu li a::before {
      left: 12px;
      top: 22px;
  }

  /* main_img */
  #main_img {
      border: 7px solid #54411f;
      margin: 0 auto;
      padding: 0;
      transform: none;
      width: 95%;
  }
  .bx-wrapper .bx-pager, .bx-wrapper .bx-controls-auto {
      text-align: center;
  }
  .bx-wrapper .bx-pager.bx-default-pager a {
      height: 10px;
      width: 10px;
  }

  /* content */
  #content {
      margin: 0 auto;
      width: 95%;
  }
  #content main,
  .side_nav {
      border: none;
      float: none;
      width: 100%;
  }

  /* main */
  main .browser_contents h2 {
      font-size: 100%;
      margin: 0;
  }
  main .browser_contents h2 span {
      font-size: 35px;
  }
  main .browsers h3 a {
      padding: 2%;
  }
  .link {
      padding: 5% 2% 2%;
  }
  .link h2 {
      font-size: 20px;
  }
  .link  img {
      float: none;
      width: 100%;
  }
  .read_More {
      width: 100%;
  }
  .content_article h2 {
      font-size: 100%;
  }
  .content_article img {
      width: 100%;
  }
  .content_article ul li {
      padding-left: 15px;
  }
  .alignleft img,
  .aligncenter img,
  .alignright img {
      width: 50%;
  }

  /* footer */
  .sitemap_content {
      width: 90%;
  }
  .sitemap_content > li {
      margin-right: 5%;
  }
  .copy_right {
      padding-right: 85px;
  }
  small {
      display: block;
      margin: 0 auto;
      width: 90%;
  }

  /* topbtn */
  #topbtn_box {
      right: 0;
      width: 75px;
  }

  /* slicknav */
  .slicknav_menu {
      background: none;
      display: block;
      padding: 0;
  }
  .slicknav_menu > a {
      margin: 0;
      padding: 0;
  }
  .slicknav_menu img {
      display: block;
      height: auto;
      width: 100%;
  }
  .slicknav_menu .slicknav_menutxt {
      background: #54411f;
      color: #fff;
      display: block;
      padding: 15px 10px;
      text-align: center;
      text-shadow: none;
      width: 100%;
  }
  .slicknav_menu .slicknav_icon-bar {
      display: none;
  }
  .slicknav_menu .slicknav_icon {
      display: none;
  }
  .slicknav_btn {
      float: none;
  }
  .slicknav_btn.slicknav_collapsed {
      display: block;
      width: 100%;
  }
  .slicknav_nav .slicknav_row:hover {
      background: none;
      border-radius: 0;
      color: #A5E9E1;
  }
  .slicknav_nav ul li a {
      color: #795b3f;
      display: block;
      font-weight: bold;
      padding: 4%;
  }
  .slicknav_nav .menu h2,
  .slicknav_nav .menu h3 {
      background: #73a431;
      color: #fff;
      font-weight: bold;
  }
  .slicknav_nav .column h2,
  .slicknav_nav .column h3 {
      background: #f69218;
      color: #fff;
      font-weight: bold;
  }
  .slicknav_nav >li li {
      background:  #fff;
  }
  .slicknav_nav .column li a:hover {
      opacity: .7;
  }
  .slicknav_nav .slicknav_arrow {
      display: none;
  }
  .slicknav_nav .slicknav_row {
      margin: 0;
      padding: 0;
  }
  .side_content {
      display: none;
  }

  /* under */
  /* header */
  .sub_Head_Area .head_text .site_titl {
      font-size: 14px;
      height: 45px;
      padding: 1% 15% 1% 5%;
      position: absolute;
      top: 0;
      z-index: 2;
  }
  .sub_Head_Area .head_text .copy_text{
      font-size: 10px;
      line-height: normal;
      padding: 9% 5% 1%;
  }

  /* sub_content */
  #sub_content {
      margin: 0 auto;
      width: 90%;
  }
  #sub_content main {
      float: none;
      width: 100%;
  }
  #sub_content h2 {
      margin-bottom: 10%;
  }

  /* pan_nav */
  #pan_nav {
      margin: 5% 0;
  }

  /* SNS */
  .sns_content {
      flex-wrap: wrap;
  }
  .sns_btn {
      margin: 1% 0;
      width: 49%;
  }

  /* no_page */
  .no_page {
      padding: 10% 0 0;
  }
  .copy_right p {
      font-size: 12px;
  }
}