@charset "utf-8";
/* CSS Document */

/* 共通 */
h2{font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, "sans-serif";}



/* header */
.head_logo01 a, .head_logo02 a, .foot_logo01 a{opacity: 1; transition: .5s;}
.head_logo01 a:hover, .head_logo02 a:hover, .foot_logo01 a:hover{opacity: 0.6; transition: .5s;}


@media screen and (min-width: 901px) {
  #header_90{display: none;}
  #header_120{max-width: 1200px; min-width: 800px; height: 92px; margin: 0 auto;}
  .head_logo01{float: left; padding-top: 18px;}
  .head_logo02{float: right; padding-top: 24px;}
  .head_nav{float: left; height: 30px; border-left: 1px solid #ccc; margin: 31px 0 0 19px; padding-left: 17px;}
  .head_nav li{float: left; height: 24px; padding-top: 5px;}
  .head_nav a{display: block; height: 17px; text-indent: -9999px;}
  .head_nav01{margin-right: 8px;}
  .head_nav01, .head_nav01 a{width: 160px;}
  .head_nav01 a{background: url("../images/head_nav.gif") 0 0 no-repeat; transition: .2s;}
  .head_nav01 a:hover{background: url("../images/head_nav.gif") 0 -17px no-repeat; transition: .2s;}
  .head_nav02, .head_nav02 a{width: 104px;}
  .head_nav02 a{background: url("../images/head_nav.gif") -168px 0 no-repeat; transition: .2s;}
  .head_nav02 a:hover{background: url("../images/head_nav.gif") -168px -17px no-repeat; transition: .2s;}
}

@media screen and (max-width: 900px) {
  #header_120{display: none;}
  #header_90{width: 100%; position: relative;}
  .head_logo01{float: left; padding: 18px 0;}
  .head_logo01 img{width: 200px;}

  .hamburger-overlay{position: absolute; top: 16px; right: 16px; z-index: 1000; width: 60px; height: 45px; border: none; background: transparent; cursor: pointer;}
  .hamburger-overlay__line{position: absolute; left: 11px; width: 40px; height: 1px; background-color: #333; transition: all .3s;}
  .hamburger-overlay__line:nth-of-type(1){top: 18px;}
  .hamburger-overlay__line:nth-of-type(2){top: 28px;}
  .hamburger-overlay.active .hamburger-overlay__line{background-color: #fff;}
  .hamburger-overlay.active .hamburger-overlay__line:nth-of-type(1){transform: translateY(5px) rotate(-30deg);}
  .hamburger-overlay.active .hamburger-overlay__line:nth-of-type(2){transform: translateY(-5px) rotate(30deg);}

  .nav-overlay{position: fixed; top: 0; left: 0; width: 100%; height: 100vh; background-color: rgba(0, 0, 0, 0.95); visibility: hidden; opacity: 0; transition: all .4s; z-index: 900;}
  .nav-overlay.active{visibility: visible; opacity: 1;}
  .nav-overlay__content{position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; text-align: center;}
  .nav-overlay__list{margin: 0; padding: 0; list-style: none;}
  .nav-overlay__item{opacity: 0; transform: translateY(20px); transition: all .6s;}
  .nav-overlay.active .nav-overlay__item{opacity: 1; transform: translateY(0);}
  .nav-overlay.active .nav-overlay__item:nth-child(1){transition-delay: 0.1s;}
  .nav-overlay.active .nav-overlay__item:nth-child(2){transition-delay: 0.2s;}
  .nav-overlay.active .nav-overlay__item:nth-child(3){transition-delay: 0.3s;}
  .nav-overlay__link{display: inline-block; padding: 20px; color: #fff; font-size: 20px; text-decoration: none; transition: color .3s;}
}




/* footer */
.foot_nav li{float: left; height: 24px; padding-top: 5px;}
.foot_nav a{display: block; height: 19px; text-indent: -9999px;}
.foot_nav01{margin-right: 8px;}
.foot_nav01, .foot_nav01 a{width: 160px;}
.foot_nav01 a{background: url("../images/foot_nav.gif") 0 0 no-repeat; transition: .2s;}
.foot_nav01 a:hover{background: url("../images/foot_nav.gif") 0 -17px no-repeat; transition: .2s;}
.foot_nav02, .foot_nav02 a{width: 104px;}
.foot_nav02 a{background: url("../images/foot_nav.gif") -168px 0 no-repeat; transition: .2s;}
.foot_nav02 a:hover{background: url("../images/foot_nav.gif") -168px -17px no-repeat; transition: .2s;}


@media screen and (min-width: 901px) {
  #footer_90{display: none;}
  #footer_120{width: 100%; height: 184px; background-color: #1f2325;}
  .foot{max-width: 1200px; min-width: 900px; margin: 0 auto;}
  .foot_logo01{float: left; padding-top: 68px;}
  .foot_c{float: right; padding-top: 85px;}
  .foot_nav{float: left; height: 30px; border-left: 1px solid #fff; margin: 77px 0 0 19px; padding-left: 19px;}
}

@media screen and (max-width: 900px) {
  #footer_120{display: none;}
  #footer_90{width: 100%; padding: 30px 0; background-color: #1f2325;}
  .foot_logo01 img{width: 200px;}
  .foot_c{margin-left: 10px;}
  .foot_c img{width: 60%;}
  .foot_nav{height: 30px; margin: 15px 0 30px 10px;}
}




