/*
Copyright (c) Burger Menu (@tt0113243) 
Released under the MIT license
http://opensource.org/licenses/mit-license.php
*/

/* 数値など変更している箇所があります */

/*  全体
========================================== */

/* メニュークリック時
.overflow {
  overflow: hidden;
}

/*  .side-menu-inner
========================================== */
#side-menu-out .side-menu-inner {
    /*
	background:linear-gradient(-45deg, #ec8d92,#87c9f8,#ec8d92); /*グラデーションを定義*/
    /*
	background-size: 200% 200%; /*サイズを大きくひきのばす*/
    /*
    background: rgba(255, 255, 255, 0.9);
    */
  /* グラデーションアニメーション設定 
	animation: bggradient 10s ease infinite;     */
  /*background-color: #ec8c2a;*/  
  position: fixed;
  z-index: 10000;
  top: 0;
  right: 0;
  height: 100%;
  max-width: 500px;
  width: 100%;
  overflow-y: auto;
  overscroll-behavior-y: none;
  -webkit-transform: translateX(100%);
  -moz-transform: translateX(100%);
  -ms-transform: translateX(100%);
  -o-transform: translateX(100%);
  transform: translateX(100%);
  -webkit-transition: transform 0.55s cubic-bezier(0.785, 0.135, 0.15, 0.86);
  -moz-transition: transform 0.55s cubic-bezier(0.785, 0.135, 0.15, 0.86);
  -o-transition: transform 0.55s cubic-bezier(0.785, 0.135, 0.15, 0.86);
  transition: transform 0.55s cubic-bezier(0.785, 0.135, 0.15, 0.86);
}
/* アニメーション */
@keyframes bggradient{
	0% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
}
#side-menu-out .side-menu-inner.show {
  -webkit-transform: translateX(0px);
  -moz-transform: translateX(0px);
  -ms-transform: translateX(0px);
  -o-transform: translateX(0px);
  transform: translateX(0px);
}
#side-menu-out .side-menu-inner.show ul.main li {
  -webkit-transform: translateX(0px);
  -moz-transform: translateX(0px);
  -ms-transform: translateX(0px);
  -o-transform: translateX(0px);
  transform: translateX(0px);
  opacity: 1;
    margin-bottom: 10px;
}
#side-menu-out .side-menu-inner.show ul.main li:nth-child(1) {
  transition-delay: 0.15s;
}
#side-menu-out .side-menu-inner.show ul.main li:nth-child(2) {
  transition-delay: 0.3s;
}
#side-menu-out .side-menu-inner.show ul.main li:nth-child(3) {
  transition-delay: 0.45s;
}
#side-menu-out .side-menu-inner.show ul.main li:nth-child(4) {
  transition-delay: 0.6s;
}
#side-menu-out .side-menu-inner.show ul.main li:nth-child(5) {
  transition-delay: 0.75s;
}
#side-menu-out .side-menu-inner.show ul.main li:nth-child(6) {
  transition-delay: 0.9s;
}
#side-menu-out .side-menu-inner.show ul.main li:nth-child(7) {
  transition-delay: 1.05s;
}
#side-menu-out .side-menu-inner.show ul.main li:nth-child(8) {
  transition-delay: 1.2s;
}
#side-menu-out .side-menu-inner.show ul.main li:nth-child(9) {
  transition-delay: 1.35s;
}
#side-menu-out .side-menu-inner.show .about, .side-menu-inner.show .social, .side-menu-inner.show ul.sub {
  -webkit-transform: translateY(0px);
  -moz-transform: translateY(0px);
  -ms-transform: translateY(0px);
  -o-transform: translateY(0px);
  transform: translateY(0px);
  opacity: 1;
  transition-delay: 0.85s;
}

/*
#side-menu-out .side-menu-inner {
  padding: 120px 30px 70px 30px;
}
*/

#side-menu-out .side-menu-inner ul.main {
  list-style-type: none;
}
#side-menu-out .side-menu-inner ul.main li {
  /*
  margin-bottom: 20px;
  */
  -webkit-transform: translateX(40px);
  -moz-transform: translateX(40px);
  -ms-transform: translateX(40px);
  -o-transform: translateX(40px);
  transform: translateX(40px);
  opacity: 0;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
#side-menu-out .side-menu-inner ul.main li:last-of-type {
  margin-bottom: 0px;
}
#side-menu-out .side-menu-inner ul.main li a {
  color: #ffffff;
  /*
  font-family: "Raleway", sans-serif;
  */
  text-decoration: none;
  text-transform: uppercase;
  font-size: 110%;
  display: block;
  letter-spacing: 5px;
  font-weight: 500;
  padding: 10px 0;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
  /* 追記 */
  padding-left: 10px;
  padding-right: 10px;
  /*
  border-bottom: 1px solid white;
    */
  /*
  background: url("../images/common/arrow02.png") no-repeat center right 10px;
  */
  background-size: 7px 12px;
}
#side-menu-out .side-menu-inner ul.main li a span {
  color: #b7ac7f;
}

/*
#side-menu-out .side-menu-inner ul.main li a:hover {
  color: #b7ac7f;
}
*/

#side-menu-out .side-menu-inner .about {
  margin-top: 40px;
  -webkit-transform: translateY(30px);
  -moz-transform: translateY(30px);
  -ms-transform: translateY(30px);
  -o-transform: translateY(30px);
  transform: translateY(30px);
  opacity: 0;
  -webkit-transition: all 0.4s ease;
  -moz-transition: all 0.4s ease;
  -o-transition: all 0.4s ease;
  transition: all 0.4s ease;
}
/*
#side-menu-out .side-menu-inner .about p {
  color: #ffffff;
  font-family: "Spectral", serif;
  font-size: 1.05rem;
  letter-spacing: 0.5px;
  line-height: 170%;
}
*/
#side-menu-out .side-menu-inner .social {
  margin-top: 40px;
  position: relative;
  padding-bottom: 30px;
  -webkit-transform: translateY(30px);
  -moz-transform: translateY(30px);
  -ms-transform: translateY(30px);
  -o-transform: translateY(30px);
  transform: translateY(30px);
  opacity: 0;
  -webkit-transition: all 0.4s ease;
  -moz-transition: all 0.4s ease;
  -o-transition: all 0.4s ease;
  transition: all 0.4s ease;
}
#side-menu-out .side-menu-inner .social:after {
  content: "";
  width: 230px;
  height: 2px;
  background-color: #b7ac7f;
  position: absolute;
  bottom: 0;
  left: 0;
}
#side-menu-out .side-menu-inner .social a {
  display: inline-block;
  width: 30px;
  height: 30px;
  margin-right: 25px;
}
#side-menu-out .side-menu-inner .social a:last-of-type {
  margin-right: 0px;
}

/*
#side-menu-out .side-menu-inner .social a:hover svg path, .side-menu-inner .social a:hover svg circle {
  fill: #b7ac7f;
}
*/

#side-menu-out .side-menu-inner .social a svg {
  width: 100%;
  height: 100%;
}
#side-menu-out .side-menu-inner .social a svg path, .side-menu-inner .social a svg circle {
  fill: #ffffff;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
#side-menu-out .side-menu-inner ul.sub {
  list-style-type: none;
  margin-top: 40px;
  -webkit-transform: translateY(30px);
  -moz-transform: translateY(30px);
  -ms-transform: translateY(30px);
  -o-transform: translateY(30px);
  transform: translateY(30px);
  opacity: 0;
  -webkit-transition: all 0.4s ease;
  -moz-transition: all 0.4s ease;
  -o-transition: all 0.4s ease;
  transition: all 0.4s ease;
}
#side-menu-out .side-menu-inner ul.sub li {
  margin-bottom: 10px;
}
#side-menu-out .side-menu-inner ul.sub li:last-of-type {
  margin-bottom: 0px;
}
#side-menu-out .side-menu-inner ul.sub li a {
  color: #ffffff;
  /*
  font-family: "Raleway", sans-serif;
  */
  letter-spacing: 1px;
  font-size: 0.9rem;
  text-decoration: none;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}

/*
#side-menu-out .side-menu-inner ul.sub li a:hover {
  color: #b7ac7f;
}
*/

/*** オリジナルSNS追加箇所 ***/
#side-menu-out .sns-link-out {
    float: left;
}

#side-menu-out .sns-link-out img {
    max-width: 31px;
}

#tbsp-sns-text {
    color: white;
    line-height: 1.4em;
    margin-bottom: 10px;
}

#tbsp-sns-text br {
    display: none;
}

/*** オリジナル　住所追加部分 ***/
#side-menu-out .top-map-detail-address {
    clear: both;
    color: white;
    padding-top: 20px;
}

#side-menu-out .top-map-detail-address li a {
    color: white;
}

#side-menu-out .top-map-detail-address::before {
    content:"";
    display: block;
    width: 150px;
    border-top: 2px solid white;
    padding-bottom: 20px;
}

.sub-out .top-map-detail-address .top-map-detail-title {
    font-weight: 500;
    text-align: left;
    margin-bottom: 10px;
}

/* アニメーション追加 */
.sub-out {
  -webkit-transform: translateY(40px);
  -moz-transform: translateY(40px);
  -ms-transform: translateY(40px);
  -o-transform: translateY(40px);
  transform: translateY(40px);
    opacity: 0;
}

.show .sub-out {
  -webkit-transform: translateY(0px);
  -moz-transform: translateY(0px);
  -ms-transform: translateY(0px);
  -o-transform: translateY(0px);
  transform: translateY(0px);
  opacity: 1;
    transition: all 1000ms 0s ease;
    transition-delay: 1.2s;
}

/* レスポンシブ追記 */
@media screen and (max-width: 1199px) {
    #side-menu-out .side-menu-inner {
      max-width: 65vw;
    }    
}

@media screen and (max-width: 768px) {
    #side-menu-out .side-menu-inner {
      max-width: 600px;
    }       
}

/*
@media screen and (max-width: 600px) {
    #side-menu-out .side-menu-inner {
      padding: 120px 20px 20px 20px;
    }    
}
*/

@media screen and (max-width: 480px) {
    /*
    #side-menu-out .side-menu-inner {
        padding-top: 100px;
    }
    */
    
  #side-menu-out .side-menu-inner ul.main li a {
      font-size: 1.2em;
      padding-top: 5px;
      padding-bottom: 5px;
  }
    
  #side-menu-out .side-menu-inner .about {
      margin-top: 20px;
  }
    
  #tbsp-sns-text br {
      display: inline;
  }
    
    #side-menu-out .side-menu-inner.show ul.main li {
        margin-bottom: 15px;
    }
}


/*  OVERLAY
========================================== */
.overlay {
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  width: 100%;
  height: 100%;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
  background-color: #000000;
  opacity: 0;
  visibility: hidden;
}
.overlay.show {
  opacity: 0.5;
  visibility: visible;
}