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

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

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

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

/*  NAV
========================================== */
#side-menu-out nav {
	/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#d78797+15,e4b2b9+33,83c3eb+79,83c3eb+100 */
background: linear-gradient(-150deg,  #d78797 15%,#e4b2b9 33%,#83c3eb 79%,#83c3eb 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */

/*  コメントアウト中*/
	background-size: 120% 120%;
  グラデーションアニメーション設定 
	animation: bggradient 3s ease infinite;     
  /*background-color: #ec8c2a;*/  
  position: fixed;
  z-index: 10000;
  top: 0;
  right: 0;
  height: 100%;
  max-width: 600px;
  width: 100%;
  overflow-y: auto;
  -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 nav.show {
  -webkit-transform: translateX(0px);
  -moz-transform: translateX(0px);
  -ms-transform: translateX(0px);
  -o-transform: translateX(0px);
  transform: translateX(0px);
}
#side-menu-out nav.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 nav.show ul.main li:nth-child(1) {
  transition-delay: 0.15s;
}
#side-menu-out nav.show ul.main li:nth-child(2) {
  transition-delay: 0.3s;
}
#side-menu-out nav.show ul.main li:nth-child(3) {
  transition-delay: 0.45s;
}
#side-menu-out nav.show ul.main li:nth-child(4) {
  transition-delay: 0.6s;
}
#side-menu-out nav.show ul.main li:nth-child(5) {
  transition-delay: 0.75s;
}
#side-menu-out nav.show ul.main li:nth-child(6) {
  transition-delay: 0.9s;
}
#side-menu-out nav.show ul.main li:nth-child(7) {
  transition-delay: 1.05s;
}
#side-menu-out nav.show ul.main li:nth-child(8) {
  transition-delay: 1.2s;
}
#side-menu-out nav.show ul.main li:nth-child(9) {
  transition-delay: 1.35s;
}
#side-menu-out nav.show .about, nav.show .social, nav.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 nav {
  padding: 120px 10px 70px 60px;
}

#side-menu-out nav ul.main {
  list-style-type: none;
}
#side-menu-out nav 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 nav ul.main li:last-of-type {
  margin-bottom: 0px;
}
#side-menu-out nav ul.main li a {
  color: #1d4294;
  /*
  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 nav ul.main li a span {
  color: #b7ac7f;
}

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

#side-menu-out nav .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 nav .about p {
  color: #ffffff;
  font-family: "Spectral", serif;
  font-size: 1.05rem;
  letter-spacing: 0.5px;
  line-height: 170%;
}
*/
#side-menu-out nav .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 nav .social:after {
  content: "";
  width: 230px;
  height: 2px;
  background-color: #b7ac7f;
  position: absolute;
  bottom: 0;
  left: 0;
}
#side-menu-out nav .social a {
  display: inline-block;
  width: 30px;
  height: 30px;
  margin-right: 25px;
}
#side-menu-out nav .social a:last-of-type {
  margin-right: 0px;
}

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

#side-menu-out nav .social a svg {
  width: 100%;
  height: 100%;
}
#side-menu-out nav .social a svg path, nav .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 nav 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 nav ul.sub li {
  margin-bottom: 10px;
}
#side-menu-out nav ul.sub li:last-of-type {
  margin-bottom: 0px;
}
#side-menu-out nav 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 nav 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: 600px) {
    #side-menu-out nav {
      padding: 120px 20px 20px 20px;
    }    
}

@media screen and (max-width: 480px) {
    #side-menu-out nav {
        padding-top: 100px;
    }    
    
  #side-menu-out nav ul.main li a {
      font-size: 1.2em;
      padding-top: 5px;
      padding-bottom: 5px;
  }
    
  #side-menu-out nav .about {
      margin-top: 20px;
  }
    
  #tbsp-sns-text br {
      display: inline;
  }
    
    #side-menu-out nav.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;
}