/*ヘッダー*/
.header {
 height: 150px;
 margin: 30px 0 30px 20px;
 padding: 0 0 60px;

 border-bottom: solid 2px #8b0000;
}

@media screen and (max-width: 650px) {
 .header {
  margin: 30px 0 -20px 20px;
 }
}

@media screen and (max-width: 460px) {
 .header {
  margin: 15px 0 -40px 20px;
 }
}



.logo {
 height: 150px;
}

@media screen and (max-width: 650px) {
 .logo {
  height: 120px;
 }
}

.logo img {
 display: flex;
 align-items: center;
 height: 120px;
 padding: 40px 0;
}

.logo img:hover {
 opacity: 0.5;
}

@media screen and (max-width: 650px) {
 .logo img {
  height: 90px;
  padding: 20px 0;
 }
}

@media screen and (max-width: 460px) {
 .logo img {
  height: 60px;
  padding: 20px 0;
 }
}



/*ハンバーガーメニュー*/
#switch {
 width: 100px;
 height: 100px;
 background: url(mittyama_img/humberger_botan01.png) no-repeat;
 background-size: 100% 100%;
 cursor: pointer;
 animation: humbager_animation02 1s;
 margin: 0 10px 0 0;
}

@media screen and (max-width: 650px) {
 #switch {
  width: 80px;
  height: 80px;
  margin: -25px 10px 0 0;
 }
}

@media screen and (max-width: 460px) {
 #switch {
  width: 70px;
  height: 70px;
  margin: -80px 10px 0 0;
 }
}

#switch.on_switch {
 background: url(mittyama_img/humberger_botan02.png) no-repeat;
 background-size: 100% 100%;
 animation: humbager_animation 1s;
}

@keyframes humbager_animation {
 0% {
  transform: rotate(0deg);
 }

 100% {
  transform: rotate(360deg);
 }
}

@keyframes humbager_animation02 {
 0% {
  transform: rotate(0deg);
 }

 100% {
  transform: rotate(-360deg);
 }
}


.humberger_menu button {
 height: 100px;
 background-color: rgba(255, 255, 255, 0);
 border: none;
}

.humberger_menu img {
 height: 80%;

 user-drag: none;
 -webkit-user-drag: none;

}







/*ハンバーガーメニュー 中身*/
.humberger_menu {
 width: 100%;

 margin: 60px 0 0;

 position: absolute;
 top: 0;
 left: 0;
 z-index: 1;

 text-align: right;
}



/*メニュー*/
.humberger {
 color: #fff;
 font-weight: bold;
 overflow: hidden;
 text-align: right;
}

@media screen and (max-width: 460px) {
 .humberger {
  margin: -35px 0 0 0;
 }
}

.humberger span {
 display: block;
 margin-left: 100%;
 transition: 0.8s;
}

.active span {
 margin-left: 0;
}

.humberger_open table {
 margin: 74px 0 0 auto;
 width: 60%;
 background-color: #8b0000;
}


@media screen and (max-width: 90px) {
 .humberger_open table {
  width: 60%;
 }
}

@media screen and (max-width: 650px) {
 .humberger_open table {
  width: 80%;
 }
}

.humberger_open tr a {
 display: block;
 width: 100%;
 height: 100%;
 border-bottom: solid 2px #670101;
}

.humberger_open tr:hover {
 background-color: #5f0101;
}


.humberger_open_text {
 margin: 0;
 padding: 0 20px 0 10px;
}

.humberger_open_text a {
 font-size: 1.8em;
 font-weight: bold;

 color: #fff;
 text-decoration: none;

 padding: 25px 0 3px;
}

@media screen and (max-width: 900px) {
 .humberger_open_text a {
  font-size: 1.5em;
 }
}

@media screen and (max-width: 700px) {
 .humberger_open_text a {
  font-size: 1.3em;
 }
}

</style>< !--タイトル--><div class="main_title">Works</div><style>.main_title {
 font-size: 2em;
 font-weight: bold;
 color: #000;

 text-align: center;

 text-decoration: underline;
 text-decoration-color: #696969;
 text-decoration-thickness: 2px;
 text-underline-offset: 12px;

 margin: 80px 0 50px;
}

.works_komidashi {
 font-size: 1.2em;
 font-weight: bold;
 color: #000;

 text-align: center;

 text-decoration: underline;
 text-decoration-color: #000;
 text-decoration-thickness: 1px;
 text-underline-offset: 8px;

 margin: 0 0 20px;
}

.works_text {
 font-size: 1em;
 margin: 0 auto 20px;

 text-align: center;
}

.works_text a {
 text-decoration: none;
 color: #4682b4;
}

.works_text a:hover {
 text-decoration: none;
 color: #b0c4de;
}






/*フッター*/
    .futter {
      background-color: #cd5c5c;
      width: 100%;
      padding-top: 10px;
      padding-bottom: 100px;
      border-width: 50px;
      margin: 100px 0 0 0;
    }

    .copywrite {
      font-size: 0.6em;
      color: #fff;
      text-align: center;
    }

    .copy_mark {
      font-size: 2em;
      vertical-align: -3px;
    }