@media screen and (max-width: 768px) {
  .sp {
    display: none;
  }
  html {
    font-size: 100%;
  }
  body {
    -webkit-text-size-adjust: 100%;
    font-size: 1.8rem;
    min-width: 768px;
  }
  /****** header ******/
  nav {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    display: none;
    background: #7ab7bf;
    width: 100%;
    height: 0;
    z-index: 10000;
    padding: 0 0 30px 0;
    -webkit-transition: all 0.4s ease;
    -moz-transition: all 0.4s ease;
    -o-transition: all 0.4s ease;
    transition: all 0.4s ease;
  }
  body.active header nav {
    display: block;
    height: auto;
  }
  body.active {
    display: fixed;
    overflow: hidden;
    width: 100%;
    height: 100vh;
  }

  #header {
    min-width: 768px;
  }
  header h1 {
    width: 300px;
  }
  header h1::after {
    top: -150px;
    width: 350px;
    height: 350px;
    background: #7ab7bf;
    transition: 0.4s;
  }
  body.active header h1 a {
    color: #7ab7bf !important;
  }
  body.active header h1::after {
    background: #ffffff;
  }
  header nav ul.grobalNav {
    margin-left: 290px;
    padding: 25px 0 0 0;
  }
  header nav ul.grobalNav li {
    float: none;
  }
  header nav ul.grobalNav li a {
    display: block;
    padding: 20px;
  }
  header nav ul.grobalNav li a::after {
    content: none;
  }
  body.home header nav ul.grobalNav li.gnavHome a,
  body.about header nav ul.grobalNav li.gnavAbout a,
  body.archives header nav ul.grobalNav li.gnavArchives a,
  body.projects header nav ul.grobalNav li.gnavProjects a,
  body.efforts header nav ul.grobalNav li.gnavEfforts a,
  body.member header nav ul.grobalNav li.gnavMember a {
    color: #ffffff;
  }

  /* Toggle Button */
  #toggle {
    position: absolute;
    right: 20px;
    top: 20px;
    width: 66px;
    height: 66px;
    display: block;
    cursor: pointer;
    z-index: 10002;
  }
  #toggle::before {
    content: '';
    position: absolute;
    height: 8px;
    width: 100%;
    background: #7ab7bf;
    top: 0;
    left: 0;
    -webkit-transition: 0.35s ease-in-out;
    -moz-transition: 0.35s ease-in-out;
    transition: 0.35s ease-in-out;
  }
  #toggle a {
    position: absolute;
    height: 8px;
    width: 100%;
    background: #7ab7bf;
    top: 20px;
    left: 0;
    -webkit-transition: 0.35s ease-in-out;
    -moz-transition: 0.35s ease-in-out;
    transition: 0.35s ease-in-out;
    overflow: hidden;
    text-indent: 100%;
    white-space: nowrap;
  }
  #toggle::after {
    content: '';
    position: absolute;
    height: 8px;
    width: 100%;
    background: #7ab7bf;
    top: 40px;
    left: 0;
    -webkit-transition: 0.35s ease-in-out;
    -moz-transition: 0.35s ease-in-out;
    transition: 0.35s ease-in-out;
  }
  body.active header #toggle::before {
    background: #ffffff;
    top: 11px;
    -webkit-transform: rotate(315deg);
    -moz-transform: rotate(315deg);
    transform: rotate(315deg);
  }
  body.active header #toggle a {
    background: #ffffff;
    width: 0;
    left: 50%;
  }
  body.active header #toggle::after {
    background: #ffffff;
    top: 11px;
    -webkit-transform: rotate(-315deg);
    -moz-transform: rotate(-315deg);
    transform: rotate(-315deg);
  }
  /****** footer ******/
  footer {
    padding: 20px 10px;
    min-width: 748px;
  }
  .footerLink ul {
    width: 748px;
    margin: 10px 0 20px;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: -moz-flex;
    display: flex;
    -webkit-box-lines: multiple;
    -moz-box-lines: multiple;
    -webkit-flex-wrap: wrap;
    -moz-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
  }
  .footerLink li {
    margin-left: 5px;
    margin-right: 5px;
    margin-bottom: 10px;
  }
  .footerLink li + li {
    margin-left: 5px;
  }
  .footerLink li a {
    width: 350px;
    padding: 12px 0;
  }

  /* sitemap */
  footer .sitemap > ul {
    width: 748px;
    margin: 0 auto 25px;
    display: block;
    font-size: 1.8rem;
  }
  footer .sitemap ul li ul {
    font-size: 1.6rem;
  }
  footer .sitemap ul li + li {
    margin-left: 0;
  }
  footer .sitemap ul li ul {
    margin: 5px 0 30px 10px;
  }
  footer .sitemap ul ul li + li {
    margin-left: 0;
  }

  footer .executive_office {
    width: 100%;
    padding-top: 20px;
    font-size: 1.8rem;
  }
  footer .executive_office h3 {
    font-size: 2rem;
  }
  footer .copy {
    width: 748px;
    margin: 20px auto 0;
  }

  .pagetop,
  .pagetop:hover {
    width: 80px;
    height: 80px;
  }

  /****** icon ******/

  .pdf,
  .mainContent a[href$='.pdf'],
  .icon_url,
  .mainContent a[href$='.html'],
  .mainContent a[href$='.htm'],
  .mainContent a[href$='.zip'],
  a.excel {
    padding-right: 35px;
  }
  a.proexcel {
    padding-right: 35px;
  }
  .mainContent a.page-link {
    padding-right: 35px;
  }
  .mainContent a.page-link {
    display: inline-block;
  }
  .pdf::after,
  .mainContent a[href$='.pdf']::after,
  .mainContent a[href$='.zip']::after,
  a.excel::after,
  a.proexcel::after {
    width: 30px;
    height: 30px;
  }
  .mainContent a.page-link::after {
    width: 30px;
    height: 30px;
    bottom: 15px;
  }

  .btn::before {
    width: 30px;
    height: 30px;
    top: 2px;
    bottom: auto;
  }
  .icon_url::after,
  .mainContent a[href$='.html']::after,
  .mainContent a[href$='.htm']::after {
    width: 39px;
    height: 36px;
    top: 0px;
    bottom: auto;
  }

  a[href^='mailto'] {
    padding-left: 40px;
  }
  .mainContent a[href^='mailto']::after,
  footer a[href^='mailto']::after {
    width: 35px;
    height: 35px;
  }
  .btn {
    display: inline-block;
    line-height: 30px;
    position: relative;
    padding-left: 25px;
  }

  /****** contents ******/
  .mainSlider {
    margin-bottom: 40px;
  }
  .mainContent {
    width: 100%;
  }
  .about .mainContent,
  .archives .mainContent,
  .projects .mainContent,
  .efforts .mainContent {
    padding-top: 150px;
  }
  .mainContent#head {
    margin-top: 50px;
  }
  .mainContent section .inner {
    width: 748px;
    max-width: auto;
  }
  /* top */
  .home .mainContent section {
    max-width: auto;
    width: 100%;
  }
  #home01,
  #home03 {
    margin: 0 auto;
    padding-bottom: 50px;
  }
  .inner {
    margin: 0 auto 50px;
    max-width: auto;
    width: 90%;
  }
  #home02 div.merit {
    width: 748px;
  }
  #home02 div.merit img {
    width: 748px;
    height: auto;
  }
  #home02 div.merit .merit01 {
    top: -50px;
    left: 80px;
  }
  #home02 div.merit .merit01-01 {
    top: 85px;
    left: 0px;
    width: 100px;
  }
  #home02 div.merit .merit01-02 {
    top: -3px;
    left: 220px;
    width: 150px;
  }
  #home02 div.merit .merit01-03 {
    top: 135px;
    left: 180px;
  }
  #home02 div.merit .merit01-04 {
    top: 175px;
    left: 110px;
  }
  #home02 div.merit .merit02 {
    top: -50px;
    right: 110px;
  }
  #home02 div.merit .merit02-01 {
    top: -3px;
    left: 530px;
    right: auto;
  }
  #home02 div.merit .merit02-02 {
    top: 95px;
    right: 0px;
  }
  #home02 div.merit .merit02-03 {
    top: 180px;
    left: 580px;
    width: auto;
  }
  #home02 div.merit .merit02-04 {
    top: 125px;
    left: 370px;
  }
  #home02 div.merit .merit03 {
    top: 200px;
    left: 250px;
  }
  #home02 div.merit h3 {
    font-size: 1.6rem;
  }
  #home02 div.merit p {
    font-size: 1rem;
  }
  .mainContent #information ul {
    height: 350px;
  }
  .mainContent #information li span.info-cat {
    display: block;
    width: 140px;
    margin: 0;
  }
  .mainContent #information li dl dd {
    margin-left: 180px;
  }
  /* about */

  /* archives */
  .archives01,
  .archives00 {
    padding: 20px 30px;
    margin: 10px 0;
  }
  div.flame h5 {
    margin: -35px auto 10px;
  }
  div.flame h5 span::after {
    margin-top: -1px;
  }
  .archives00 img {
    width: 100%;
  }
  .archives01 ul li {
    height: 60px;
    font-size: 1.2rem;
  }
  .archives01 ul li p {
    line-height: 60px;
  }
  .yajirushi {
    margin: 0 30px;
  }
  div.two_column {
    display: block !important;
  }
  .archives00 div.two_column .flame + .flame {
    margin-left: 0px;
  }
  /* projects */
  .searchBox {
    margin: 0 auto;
  }
  .projects .searchBox .btn_all,
  .efforts .searchBox .btn_all {
    width: 160px;
  }
  .projects .searchBox .btn_all input[type='reset'] {
    padding: 10px 40px 10px 15px;
  }
  .projects .searchBox .btn_all::after {
    content: '';
    position: absolute;
    top: 5px;
    right: 8px;
    width: 26px;
    height: 26px;
  }
  .efforts .searchBox .btn_all input[type='reset'] {
    padding: 10px 40px 10px 15px;
  }
  .efforts .searchBox .btn_all::after {
    content: '';
    position: absolute;
    top: 5px;
    right: 8px;
    width: 26px;
    height: 26px;
  }
  .projects .searchBox {
    width: 100%;
  }
  .searchBox form,
  .search-box,
  .hanrei {
    width: 100%;
    width: 748px;
  }
  .hanrei ul {
    width: 650px;
    margin: 0;
  }
  .search-box {
    clear: both;
  }

  .mainContent .searchBox dt {
    float: none;
  }
  .mainContent .searchBox dd {
    margin-left: 0px;
  }
  .searchBox ul li {
    margin-left: 4px;
  }
  .searchBox ul li label + input + label {
    margin-left: 0;
  }
  .projects input + label,
  .searchBox li a {
    margin-bottom: 10px;
  }
  .result {
    width: 100%;
    margin: 0 auto;
    padding: 15px 0;
    background: rgba(243, 243, 243, 1);
  }
  .efforts .result .inner.Area {
    display: -webkit-flex;
    display: flex;
  }
  .result h5 + ul li {
    margin-left: 0;
  }
  ul.list {
    width: 748px;
  }
  ul.list li {
    width: 49%;
  }
  .projects .mainContent div.result {
    padding-bottom: 250px;
  }

  /* efforts */
  .excel-box {
    top: 54px;
    left: 36%;
    display: inline-block;
    font-size: 1.5rem;
  }
  h4.openBtn {
    width: 700px;
  }
  .efforts .searchBox ul li {
    margin-left: 5px;
  }
  #second > div > dl:nth-child(2) > dd > ul > li:nth-child(1) a {
    display: inline-block;
  }

  .smabr {
    display: block;
  }

  /* member */
  .btn-block {
    display: block;
    width: 100%;
  }
  .btn-block .btn-blue,
  .btn-block .btn-orange {
    width: 100%;
    margin-top: 16px;
  }
  .video-list ul {
    display: block;
  }
  .video-list li {
    width: 100%;
    margin-left: 0;
    margin-right: 0;
  }

  .area-link-next {
    text-align: center;
  }

  .video-list ul::before,
  .video-list ul::after {
    content: '';
    display: none;
  }

  .board-child {
    margin-left: 0;
  }

  .board-thread {
    width: auto;
  }

  .board-content {
    margin-right: 0;
    padding: 1em;
    width: 71%;
  }

  .human-orange-icon::before,
  .human-blue-icon::before {
    top: 2%;
    left: 4%;
    width: 65px;
    height: 65px;
    background-size: 65px;
  }

  .board-thread,
  .board-content {
    padding: 0.7em;
  }

  .thread-content {
    max-width: 75%;
  }

  .board-info {
    flex-wrap: wrap;
  }
}