/*
color: #5E7437;
color: rgba(255, 255, 255, 0.7);
background-color: #E9E4DD;
color: rgba(233, 228, 221, 0.7);
ミラーの青31,89,137 
ミラーの青1F5989
*/


/*--------------------------------------------------------------
## Menus
--------------------------------------------------------------*/
.menu-header-container {
	margin: 0;
	padding: 0;
	
}
.main-navigation > div ul {
	  display: none;
}
.menu-toggle {
	display: block;
	border: 0;
	background: transparent;
	outline: none;
	padding: 0; 
}

 .menu-toggle i {
	 vertical-align: middle;
	 color: rgba(51,51,51,1);
	 font-size: 1.3rem;
	 line-height: 60px;
	 padding: 0 0.5rem;
}


#mobile-navigation {
	left: 0;
	position: absolute;
	text-align: left;
	top: 60px;
	width: 100%;
	height: 100vh;
	display:none;
	z-index: 10; 
	padding: 30px;
	background: rgba(51,51,51,.8);}

@media screen and (min-width : 768px) {
/* ここにPAD用のCSSを記述*/
#mobile-navigation {
	top: 80px;
}
 .menu-toggle i {
	 line-height: 80px;
}
}
@media screen and (min-width : 1000px) {
/* ここにPC用のCSSを記述*/
#mobile-navigation {
	top: 80px;
}
 .menu-toggle i {
	 line-height: 80px;
}
}



  #mobile-navigation ul {
    list-style: none;
    margin: 0;
    padding: 0; }
    #mobile-navigation ul li {
                                background: rgba(51,51,51,0);
                                border-bottom: 1px solid #ebebeb;
                                line-height: 42px;
                                padding: 0;
                                position: relative;
                                width: 100%; }
                                #mobile-navigation ul li a {
                                  color: #FFF;
                                  display: block;
                                  font-size: 12.8px;
                                  font-size: 0.8rem;
                                  letter-spacing: .1em;
                                  line-height: normal;
                                  padding: 14px 0 12px 0px;
                                  text-transform: uppercase;
                                  width: 100%; }
                                  #mobile-navigation ul li a.has-dropdown-button:not([href]) {
                                    cursor: pointer;
}
                                #mobile-navigation ul li.menu-item-has-children > a {
                                  max-width: 100%;
                                  padding-right: 48px; }
                                #mobile-navigation ul li .dropdown-toggle {
                                  background: transparent;
                                  border: 0;
                                  box-shadow: none;
                                  content: "Open";
                                  height: 30px;
                                  padding: 6px;
                                  position: absolute;
                                  right: 5px;
                                  top: 6px;
                                  outline: none;
                                  width: 42px; }
                                  #mobile-navigation ul li .dropdown-toggle .svg-icon-submenu {
                                    height: 10px;
                                    width: 10px; }
                                    #mobile-navigation ul li .dropdown-toggle .svg-icon-submenu path {
                                                                fill: #FFF; }
    #mobile-navigation ul ul {
                                border-top: 1px solid #ebebeb;
                                display: none;
                                margin: 0;
                                padding: 0; }
                                #mobile-navigation ul ul li {
		  background: rgba(255,255,255,0);
		  border-bottom: 1px solid #aaa;}
                                  #mobile-navigation ul ul li:last-of-type {
			border: 0; }
                                  #mobile-navigation ul ul li a {
			text-transform: uppercase;
			width: 100%;
			color:#999;}
                                  #mobile-navigation ul ul li ul {
			display: none; }

#mobile-navigation ul ul li a {
  padding-left: 20px;
color: #FFF;}

#mobile-navigation ul ul ul li a {
  padding-left: 40px; }

#mobile-navigation ul ul ul ul li a {
  padding-left: 60px; }

#mobile-navigation ul ul ul ul ul li a {
  padding-left: 80px; }

#mobile-navigation ul ul ul ul ul ul li a {
  padding-left: 100px; }


	.main-navigation .menu-toggle { display: block; }
	.main-navigation { float:right; }
	.main-navigation > div, .main-navigation > div ul, .main-navigation .shopping-cart { display: none; }



/*--------------------------------------------------------------
## Social and Search Icons
--------------------------------------------------------------*/
.social-search {
	float: right;
	padding: 0; 
	}
  .social-search .search-toggle {
    background: transparent;
    border: none;
    outline: none;
    padding: 0; }
    .social-search .search-toggle .open {
                                display: block; }
    .social-search .search-toggle .close {
                                display: none; }
     
    .social-search .search-toggle.close-search .open {
                                display: none; }
    .social-search .search-toggle.close-search .close {
                                display: block; }

  .social-search .search-toggle i {
    color: rgba(51,51,51,1);
	  font-size: 1.3rem;
	  line-height: 60px;
	  padding: 0 0.5rem;
	  width: 32px;
}

  .social-search .widget {
    display: inline-block;
}

  .social-search .widget a{
    padding: 0 0.5rem;
}
  .social-search .widget a i{
	color: rgba(51,51,51,1);
	  font-size: 1.3rem;
	  line-height: 60px;
}
 @media (min-width: 768px) {
	  .social-search .widget a i,.social-search .search-toggle i {
	  line-height: 80px;
}
}

.social-search .widget a:hover i{
	color: rgba(51,51,51,0.8);
}




/*--------------------------------------------------------------
## Site Masthead
--------------------------------------------------------------*/
.animateIn{
  -webkit-transform: translateY(0px);
                                    transform: translateY(0px);
}

.animateOut{
  -webkit-transform: translateY(-100%);
                                    transform: translateY(-100%);
}
#masthead {
  z-index: 101;
  transition: all 300ms ease-in-out;
  position: fixed;
  width: 100%;
}

.top-bar {
	padding: 0 16px;
	width: 100%;
	text-transform: uppercase;
	justify-content: space-around;
	background: rgba(255,255,255, 1);
	transition: all 300ms ease-in-out;
	z-index: 11111;
	opacity: 1;
}
 .top-bar::after {
                                clear: both;
                                content: "";
                                display: table; }


/*タイトル*/
.site-title {
	display: block;
	text-indent: -99999px;
	float:left;
	width:120px;
	margin: 8px 16px 8px 0;
                                 }
.site-title a {
    display:block;
	background-image: url(images/logo.svg);
	background-repeat: no-repeat;
	background-size: contain;
	background-position: left center;
	margin: 0;
	height: 42px;
}

@media screen and (min-width : 768px) {
/* ここにPAD用のCSSを記述*/
.site-title {
	width:140px;
	margin: 16px 16px 16px 16px;
}
.site-title a{
	height: 48px;
}
}
@media screen and (min-width : 1000px) {
/* ここにPC用のCSSを記述*/
.site-title {
	width:172px;
	margin: 14px 16px 14px 16px;
}
.site-title a{
	height: 52px;
}
}



#masthead button {
	background: none;
	cursor: pointer;
	cursor: hand;
	opacity: 1;
 }
#masthead button:hover {
	opacity: 0.8;
 }

/*--------------------------------------------------------------
## Full Screen Search
--------------------------------------------------------------*/

#fullscreen-search {
  background: rgba(255,255,255,1);
  display: none;
  left: 0;
  position: fixed;
  z-index: 10; }
  #fullscreen-search .container {
    left: 50%;
    max-width: 658px;
    position: absolute;
    top: 139px;
    transform: translate(-50%, -50%); }
  #fullscreen-search h3 {
    color: rgba(102, 102, 102, 1);
    font-size: 17.0656px;
    font-size: 1.0666rem;
    font-weight: 400;
    letter-spacing: .2em;
    text-align: center;
    text-transform: uppercase; }


#fullscreen-search form {
    position: relative; }
    #fullscreen-search form input[type="search"] {
                                background: transparent;
                                border: 0;
                                color: rgba(102, 102, 102, 1);
                                display: inline-block;
                                font-size: 32px;
                                max-width: 493px;
                                outline: none; }

                                @media (max-width: 768px) {
                                  #fullscreen-search form input[type="search"] {
                                    font-size: 20px;
                                    max-width: 100%;
                                    padding-left: 0; } }

    #fullscreen-search form button[type="submit"] {
                                border: none;
                                display: inline-block;
                                outline: none;
                                padding: 0;
                                position: absolute;
                                right: 0;
                                top: 24px; }


                                @media (max-width: 768px) {
                                  #fullscreen-search form button[type="submit"] {
                                    top: 12px;
		  height: 31px;
                                  padding: 3px;
                                  width: 32px;} }

                                #fullscreen-search form button[type="submit"] i {
                                  fill: #666;
                                  height: 31px;
                                  padding: 3px;
                                  width: 32px;
		font-size: 28px;
		font-size: 1.75rem;
	  line-height: 1;}

                                  @media (max-width: 768px) {
                                    #fullscreen-search form button[type="submit"] i {
                                                                height: 24px; } }

                                  @media (max-width: 480px) {
                                    #fullscreen-search form button[type="submit"] i {
                                                                 } }

                                  #fullscreen-search form button[type="submit"] i:last-child {
                                    display: none; }
                                    #fullscreen-search form button[type="submit"] i:last-child {
                                                                -webkit-animation: spin 2s linear infinite;
                                                                -moz-animation: spin 2s linear infinite;
                                                                animation: spin 2s linear infinite;
                                                                -webkit-transform-origin: 50% 50%;
                                                                -moz-transform-origin: 50% 50%;
                                                                -ms-transform-origin: 50% 50%;
                                                                -o-transform-origin: 50% 50%;
                                                                transform-origin: 50% 50%; }

@-webkit-keyframes spin {
  from {
    -webkit-transform: rotate(0deg); }
  to {
    -webkit-transform: rotate(360deg); } }

@-moz-keyframes spin {
  from {
    -moz-transform: rotate(0deg); }
  to {
    -moz-transform: rotate(360deg); } }

@keyframes spin {
  from {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg); }
  to {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg); } }