@media screen and (max-width: 767px) {
  /* ========== header ========== */
  /* Trigger */
  #trigger {
    position: fixed;
    top: 0;
    right: 0;
    width: 48px;
    height: 48px;
    /*background-color: #0f0992;*/
    cursor: pointer;
    z-index: 30;
  }
  .trigger,
  .trigger .bar {
    display: inline-block;
    transition: all .4s;
    box-sizing: border-box;
  }
  .trigger .bar {
    position: absolute;
    left: 7.5px;
    width: 17px;
    height: 1px;
    background-color: #666;
    border-radius: 4px;
  }
  .trigger .bar:nth-of-type(1) {
    top: 20px;
    left: 15.5px;
  }
  .trigger .bar:nth-of-type(2) {
    bottom: 20px;
    left: 15.5px;
  }
  .trigger.active .bar:nth-of-type(1) {
    -webkit-transform: translateY(0) rotate(-45deg);
    transform: translateY(5px) rotate(-45deg);
  }
  .trigger.active .bar:nth-of-type(2) {
    -webkit-transform: translateY(-10px) rotate(45deg);
    transform: translateY(-2px) rotate(45deg);
  }

  /* SP Navi */
  .navi__sp {
    position: fixed;
    width: 100%;
    height: 100%;
    background: rgba(109, 154, 170, .4);
    -webkit-transition: all .5s;
    transition: all .5s;
    visibility: hidden;
    opacity: 0;
  }
  body.open main, body.open h1, body.open footer {
    -webkit-filter: blur(10px);
    -moz-filter: blur(10px);
    -o-filter: blur(10px);
    -ms-filter: blur(10px);
    filter: blur(10px);
  }
  body.open header {
   background-color: transparent;
  }

  .navi__sp .gh-lists { padding: 48px; }
  .navi__sp li { opacity: 0; }

  .navi__sp .gh-list {
    width: 100%;
    height: 48px;
    line-height: 48px;
  }

  .navi__sp li .gh-list__link { display: block; }
  .open .navi__sp li { opacity: 1; }
  .open .navi__sp .gh-list { text-align: center; }
  .gh-lists__bottom { margin-top: 20px; }

  .open .navi__sp li:nth-child(1) {
    -webkit-transition: opacity 1s ease .3s;
    transition: opacity 1s ease .3s;
  }
  .open .navi__sp li:nth-child(2) {
    -webkit-transition: opacity 1s ease .4s;
    transition: opacity 1s ease .4s;
  }
  .open .navi__sp li:nth-child(3) {
    -webkit-transition: opacity 1s ease .5s;
    transition: opacity 1s ease .5s;
  }
  .open .navi__sp li:nth-child(4) {
    -webkit-transition: opacity 1s ease .6s;
    transition: opacity 1s ease .6s;
  }
  .open .navi__sp li:nth-child(5) {
    -webkit-transition: opacity 1s ease .7s;
    transition: opacity 1s ease .7s;
  }
  .open .navi__sp li:nth-child(6) {
    -webkit-transition: opacity 1s ease .8s;
    transition: opacity 1s ease .8s;
  }
  .open .navi__sp li:nth-child(7) {
    -webkit-transition: opacity 1s ease .9s;
    transition: opacity 1s ease .9s;
  }
  .open .navi__sp li:nth-child(8) {
    -webkit-transition: opacity 1s ease 1s;
    transition: opacity 1s ease 1s;
  }

  .gh-lists__bottom_inner .other:last-child { margin-left: 0; }

  /* Click Open
  --------------------------------------- */
  .open .navi__sp {
    -webkit-transition: all .5s;
    transition: all .5s;
    visibility: visible;
    overflow-y: scroll;
    opacity: 1;
    z-index: 20;
  }

  /* ========== common ========== */
  main {
    margin-top: 50px;
    padding: 0 20px 20px 20px;
  }

  /* ========== typography ========== */
  p.p_style01 {
    font-size: 1.2rem;
  }
  p.p_style03 {
    font-size: 1rem;
  }
  /* ========== font size ========== */

  /* ========== layout ========== */

  /* ========== padding / margin ========== */

  /* ========== header ========== */
  header {
    padding: 0;
    height: 50px;
  }
  h1 a {
    width: 110px;
    height: 28px;
    top:  12px;
    left: 50%;
    margin-left: -55px;
  }
  nav li {
   display: block;
  }
  nav li a {
    padding: 0.85em;
    display: block;
    color: #FFF;
  }
  nav li.instagram a {
    padding: 10px 0 0 0;
  }
  div.wrap_nav {
    position: relative;
    top: 50%;
    -webkit-transform: translateY(-50%); /* Safari用 */
    transform: translateY(-50%);
  }
  ul.nav_other {
    position: relative;
    right: 0px;
    top: 20px;
  }
  /* ========== footer ========== */
  footer {
    right: 7px;
  }

  /* ========== top ========== */
  p.copy_top {
    font-size: 1.9rem;
  }
  div.headline h2 {
    font-size: 1.8rem;
  }
  div.headline h3 {
    font-size: 3.2rem;
  }
  /* ========== Work / Snapshot / Puppet ========== */
  main.photo img {
    width: 50%;
  }
}


@media only screen and (max-width: 460px) {
   ul.torso_list li {
     float: left;
     width: 48%;
   }
   ul.torso_list li.double {
     width: 98%
   }
 }
@media only screen and (max-width: 700px) {
  dl.style01 dt {
    width: 100%;
    float: none;
  }
  dl.style01 dd {
    width: 100%;
    float: none;
  }
}