* {outline: none;}

.page {width: 100%; height: 100vh;}

header {display: flex; position: fixed;
  width: 100%; height: 70px;
  background: #000000;
  font-size: 1.0em; color: #fff; letter-spacing: 0.5em;
  justify-content: center;
  align-items: center;
  -webkit-tap-highlight-color: rgba(0,0,0,0);}

/*●750px以下（SP）
======================================*/
@media screen and (max-width: 750px){
header {font-size: 0.8em; color: #fff; letter-spacing: 0.3em;}
/**/}

header a:link {color: #cdc6bb; text-decoration: none;}
header a:visited {color: #cdc6bb; text-decoration: none;}
header a:hover {color: #ffffff; text-decoration: none;
	-webkit-transition: 0.2s;
	transition: 0.2s;}

#nav-container {position: fixed;
  width: 100%; height: 100vh;
  pointer-events: none;}

#nav-container .bg {position: absolute;
  top: 70px; left: 0;
  width: 100%;
  height: calc(100% - 70px);
  visibility: hidden;
  opacity: 0;
  background: rgba(0,0,0,0.3);
  transition: .3s;}

#nav-container:focus-within .bg {
  visibility: visible;
  opacity: .6;}

#nav-container * {visibility: visible;}

.button {position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  z-index: 1;
  -webkit-appearance: none;
  border: 0;
  background: transparent;
  border-radius: 0;
  width: 30px; height: 70px;
  cursor: pointer;
  pointer-events: auto;
  margin-left: 25px;
  touch-action: manipulation;
  -webkit-tap-highlight-color: rgba(0,0,0,0);}

.icon-bar {display: block;
  width: 100%;
  height: 3px;
  background: #7bb7c0;
  transition: .3s;}

.icon-bar + .icon-bar {margin-top: 5px;}

#nav-container:focus-within .button {
  pointer-events: none;}
#nav-container:focus-within .icon-bar:nth-of-type(1) {
  transform: translate3d(0,8px,0) rotate(45deg);}
#nav-container:focus-within .icon-bar:nth-of-type(2) {
  opacity: 0;}
#nav-container:focus-within .icon-bar:nth-of-type(3) {
  transform: translate3d(0,-8px,0) rotate(-45deg);}


#nav-content {
  margin-top: 70px;
  padding: 0px;
  width: 100%;
  max-width: 240px;
  position: absolute;
  top: 0; left: 0;
  height: calc(100% - 70px);
  background: rgba(0,0,0,0.7);
  pointer-events: auto;
  -webkit-tap-highlight-color: rgba(0,0,0,0);
  transform: translateX(-100%);
  transition: transform .3s;
  will-change: transform;
  contain: paint;}

#nav-content ul {height: 100%;
  text-align: left;
  display: flex;
  flex-direction: column;}

#nav-content li a {display: block;
                                padding: 15px 10px 15px 20px;
                                margin: 10px 0px 0px 25px;
                                text-align: left;
	color: #d5c7a7;
	font-size: 1.0em;
	line-height: 1.6;
	width: 89.5%;
	cursor: pointer;
	background: rgba(219,205,168,0.3);}

#nav-content li a:hover {color: #ffffff;
                                background: #7bb8c0;} /*メニューホバー色*/

.active {display: block;
                                padding: 15px 10px 15px 20px;
                                margin: 10px 0px 0px 25px;
                                text-align: left;
	color: #ffffff;
	font-size: 1.0em;
	line-height: 1.6;
	width: 89.5%;
	cursor: pointer;
	background: #7bb8c0;}

#nav-content li:nth-child(4) a,
#nav-content li:nth-child(5) a,
#nav-content li:nth-child(6) a {
                                padding: 12px 5px 12px 20px;
                                margin: 10px 0px 0px 50px;
	font-size: 0.9em;
	line-height: 1.25;
	width: 79%;}

.active2  {padding: 12px 10px 12px 20px;
                                margin: 10px 0px 0px 50px;
	font-size: 0.9em;
	line-height: 1.25;
                                color: #ffffff;
                                background: #7bb8c0;
	width: 79%;}

#nav-content li:nth-child(7) a {
	background-position: left bottom;
                                background-repeat: no-repeat;
                                }
#nav-content li:nth-child(8) a {/*NEW*/
	background-image:url(../images/new1.png);
	background-position: left bottom;
                                background-repeat: no-repeat;
                                }

.active-new {display: block;
                                padding: 15px 10px 15px 20px;
                                margin: 10px 0px 0px 25px;
	background-image:url(../images/new3.png);
	background-position: left bottom;
                                background-repeat: no-repeat;
                                text-align: left;
	color: #ffffff;
	font-size: 1.0em;
	line-height: 1.6;
	width: 89.5%;
	cursor: pointer;
	}

#nav-content li:nth-child(9) a {
                                padding: 0px;
                                margin: 0px 0px 40px 0px;
	background: rgba(219,205,168,0);}




/*●750px以下（SP）
======================================*/
@media screen and (max-width: 750px){

#nav-content li a {display: block;
                                margin: 7px 0px 0px 25px;
                                padding: 13px 10px 13px 20px;}

.active {display: block;
                                margin: 7px 0px 0px 25px;
                                padding: 13px 10px 13px 20px;}

#nav-content li:nth-child(4) a,
#nav-content li:nth-child(5) a,
#nav-content li:nth-child(6) a {
                                margin: 7px 0px 0px 50px;
                                padding: 8px 10px 8px 20px;}

.active2  {margin: 7px 0px 0px 50px;
                                padding: 8px 10px 8px 20px;}

.active-new {margin: 7px 0px 0px 25px;}

#nav-content li:nth-child(9) a {margin: 0px 0px 20px 0px;}
/**/}


#nav-content li:not(.small) + .small {
  margin-top: auto;}

.small {display: flex;
  align-self: center;}

.small a {background: rgba(219,205,168,0);}
.small a + a {margin-left: 25px;}

#nav-container:focus-within #nav-content {transform: none;}

* {box-sizing: border-box;
  margin: 0; padding: 0;}

html, body {height: 100%;}

ul {padding: 0;
  list-style: none;}