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

@import url('https://fonts.googleapis.com/css?family=Encode+Sans+Condensed:400,600');

* {
  outline: none;
}

strong {
  font-weight: 600;
}

.page {
  width: 100%;
  height: auto;
  background: transparent;
}



/*ヘッダー*/
header {
  display: flex;
  position: fixed;
  top: 0px; left: 0px;
  width: 100%;
  height: 70px;
  background-color: transparent;
  z-index: 88;
}
@media screen and (max-width: 640px) {
header {
  height: 15vw;
}
}



/*アイコン*/
.svg-logo-mark{
	width: 28px; height: 28px;
	margin: 34px 0 0 44px;
}

@media screen and (max-width: 1280px) {
.svg-logo-mark{
	margin: 34px 0 0 3vw;
	}
}

@media screen and (max-width: 640px) {
	
.svg-logo-mark{
	width: 6vw; height: 6vw;
	margin: 7vw 0 0 7vw;
}	
}




/*3バーアイコン*/
.button {
  position: relative;
  display: flex;
  display: -webkit-flex;
  flex-direction: column;
  justify-content: center;
  z-index: 10;
  -webkit-appearance: none;
  border: 0;
  background: transparent;
  border-radius: 0;
  height: 80px;
  width: 22px;
  cursor: pointer;
  pointer-events: auto;
  float: right;
  margin-right: 40px;
  touch-action: manipulation;
  -webkit-tap-highlight-color: rgba(0,0,0,0);
}
.icon-bar {
  display: block;
  width: 100%;
  height: 2px;
  background: #000;
  transition: 1.5s;
}
.icon-bar + .icon-bar {
  margin-top: 6px;
}

#nav-container:focus-within .button {
  pointer-events: none;
}
#nav-container:focus-within .icon-bar:nth-of-type(1) {
  transform: translate3d(0,8px,0) rotate(495deg);
}
#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(-495deg);
}

@media screen and (max-width: 640px) {
.button {
  height: 25vw;
  width: 7vw;
  margin-right: 10vw;
}
.icon-bar {
  transition: 0.5s;
}
.icon-bar + .icon-bar {
  margin-top: 1.8vw;
}
	
#nav-container:focus-within .icon-bar:nth-of-type(1) {
  transform: translate3d(0,2.2vw,0) rotate(495deg);
}
#nav-container:focus-within .icon-bar:nth-of-type(3) {
  transform: translate3d(0,-2.2vw,0) rotate(-495deg);
}
}





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

html, body {
  height: 100%;
}

a,
a:visited,
a:focus,
a:active,
a:link {
  text-decoration: none;
  outline: 0;
}

a {
  color: currentColor;
  transition: .2s ease-in-out;
}


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




/* 矢印 */
.arrowmark a:hover{
	opacity: 0.1;
}

/* トップへ戻る矢印 */
.back-to-top-arrow{
	position: fixed;
	bottom: 36px; right: 46px;
	width: 10px;
	height: 10px;
	border: .5px solid;
	border-color: #000 #000 transparent transparent;
	transform: rotate(-45deg);
}

@media screen and (max-width: 640px) {
.back-to-top-arrow{
	bottom: 8vw; right: 9vw;
	width: 3vw;
	height: 3vw;
	border: .5px solid;
	border-color: #000 #000 transparent transparent;
	transform: rotate(-45deg);
}
}

/* 次を見る矢印 */
.see-next-arrow{
	position: fixed;
	top: calc(30vh + 110px);
	right: 80px;
	width: 10px;
	height: 10px;
	border: .5px solid;
	border-color: #000 #000 transparent transparent;
	transform: rotate(45deg);
}
@media screen and (max-width: 1280px) {
.see-next-arrow{
	display: none;
}
}
@media screen and (max-width: 640px) {
.see-next-arrow{
	display: none;
}
}



/* フッタ */
footer {
	width: calc(100%-40px); 
	height: 40px; 
	position: fixed;
	bottom: 0px; left: 35px;
	z-index: 88;
}
@media screen and (max-width: 640px) {
footer {
	width: calc(100%-40px); 
	height: 14vw; 
	position: relative;
	left: 0vw;
}
}



/* コピーライト */
#copyright {
	text-align:left;
}
#copyright li {
	display:inline;
	list-style-type:none;
	margin-right:8px;
	padding-left:12px;
}
#copyright li+li {
	border-left:1px solid #999;
}

.name{
	font-family: english-grotesque, sans-serif;
  	font-size: 9px;  font-weight: 600;  color: #000;
  	line-height: 2;   Letter-spacing: 1px;
 	text-align: left;
	text-transform: uppercase;
}
.mailto{
	bottom: 2vw; left:10vw;
	font-family: serenity, sans-serif;
  	font-size: 8px;  font-weight: 400;  font-style: italic; color: #000;
  	line-height: 2;   Letter-spacing: 1px;
 	text-align: left;
}
footer a:hover{
	color: #C6C6C6;
}

@media screen and (max-width: 640px) {

#copyright {
	position: relative;
	margin: 1vw 0 0 2vw;
}
#copyright li {
	display:inline;
	padding-left:3vw;
}

.name{
  	font-size: 1.5vw;
}
.mailto{
  	font-size: 1.5vw;
}	
}


/* サイトマップ */
#sitemap {
	position: fixed;
	top: 38px; left: 120px;
	text-align:left;
	z-index: 88;
}
#sitemap li:first-child {
	padding-left: 0;
}
#sitemap li {
	display:inline;
	list-style-type:none;
	padding:0 12px 0;
}
#sitemap li+li {
	border-left:1px solid #999;
}
.sitemap{
	font-family: english-grotesque, sans-serif;
  	font-size: 11px;  font-weight: 400;  font-style: normal;
	color: #333;
  	line-height: 2;   Letter-spacing: 1px;
 	text-align: left;
	text-transform: uppercase;
}
#sitemap a hover{
	color: #333333;
}

@media screen and (max-width: 1280px) {
#sitemap {
	top: 38px; left: 10vw;
}
}


@media screen and (max-width: 640px) {
#sitemap {
	position: relative;
	top: 0px; left: 5vw; 
	z-index: 0;	
}
.sitemap{
  	font-size: 2.5vw;
	line-height: 1;
}
}




/* nav-tgl */
.scroll-prevent {
  position: fixed;
  z-index: 3;
  width: 100%;
  height: 100%;
}
#nav-tgl {
  display: none;
}
.nav-tgl-btn {
  cursor: pointer;
  position: fixed;
  top: 0px;
  right: 0px;
  margin: 0;
}


.open {
  z-index: 99;
  width: 80px;
  height: 40px;
  margin: 20px 20px 0 0;
  background: tranceparent;
  transition: background 0.1s, transform 0.2s cubic-bezier(0.215, 0.61, 0.355, 1);
}
.open::before,
.open::after {
  content: "";
}
.open span,
.open::before,
.open::after {
  content: "";
  position: absolute;
  top: calc(50% - 1px);
  right: 27%;
  width: 46%;
  border-bottom: 2px solid black;
  transition: transform .2s cubic-bezier(0.215, 0.61, 0.355, 1);
}
.open::before {
  transform: translateY(-8px);
}
.open::after {
  transform: translateY(8px);
}

@media screen and (max-width: 1280px) {
.open {
  margin: 22px 12px 0 0;
}
}

@media screen and (max-width: 640px) {
.open {
	  width: 12vw;
	  height: 10vw;
	  margin: 4vw 4vw 0 0;
}
.open::after {
  content: "";
  position: absolute;
  top: calc(50% - 1px);
  right: 27%;
  width: 46%;
  border-bottom: 2px solid black;
  transition: transform 0.2s cubic-bezier(0.215, 0.61, 0.355, 1.5);
}
.open::before {
  transform: translateY(-1.5vw);
}
.open::after {
  transform: translateY(1.5vw);
}
}



.close {
  z-index: 77;
  width: 100%;
  height: 100%;
  pointer-events: none;
  transition: background .6s;
}
#nav-tgl:checked + .open {
  background: tranceparent;
  transform: translateX(0px);
  transition: transform .6s
}
#nav-tgl:checked + .open span {
  transform: scaleX(0);
}
#nav-tgl:checked + .open::before {
  transform: rotate(135deg);
}
#nav-tgl:checked + .open::after {
  transform: rotate(-135deg);
}
#nav-tgl:checked ~ .close {
  pointer-events: auto;
  background: rgba(255,255,255,0.70);
  opacity: 1;	
}

.content-wrapper {
  transition: transform .6s cubic-bezier(0.215, 0.61, 0.355, 1);
}
#nav-tgl:checked ~ .content-wrapper {
  transform: translateX(-250px);
}

@media screen and (max-width: 640px) {
#nav-tgl:checked ~ .close {
  background: rgba(255,255,255,0.98);
  opacity: 1;
}
}


/* メニューデザイン */
.drower-menu {
  z-index: 88;
  position: fixed;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  overflow-scrolling: touch;
  top: 100px;
  right: 45px;
  width: auto;
  height: 100%;
  margin: 0;
  padding: 0 0 10px;
  box-sizing: border-box;
  background: tranceparent;
  transform: translateY(-100%);
  transition: transform .2s cubic-bezier(0.215, 0.61, 0.355, 1);
}
.drower-menu a {
  display: block;
  padding-top: 20px;
  position: relative;
  text-decoration: none;
	
	font-family: english-grotesque,  sans-serif;
	font-weight: 50;	font-style: normal;
	font-size: 15px; color: #000;
	line-height: 18px;	Letter-spacing: 2.2px;
  	text-align: right;
	text-transform: uppercase;
}
.drower-menu a::after { /* 隠しメニューの下線 */
  position: absolute;
  bottom: -4px;
  left: 0;
  content: '';
  width: 100%;
  height: 1px;
  background: #333;
  transform: scale(0, 1);
  transform-origin: right top;
  transition: transform .2s;
}
.drower-menu a:hover::after {/* 隠しメニューの下線 */
  transform: scale(1, 1);
}

#nav-tgl:checked ~ .drower-menu {
  transform: none;
}

@media screen and (max-width: 640px) {
.drower-menu {
  top: 26vw;
  left: 35vw;
  width: 30vw;
  height: 100%;
  box-sizing: border-box;
  background: tranceparent;
  transform: translateY(-150%);
  transition: transform .3s cubic-bezier(0.215, 0.61, 0.355, 1);
}
.drower-menu a {
	display: block;
	padding: 10px;
	border-bottom: solid .5px #000;
	padding-bottom: 10px;
	margin-bottom: 18px;
	position: relative;
  	text-decoration: none;
	
	font-weight: 200;
	font-size: 18px;
	line-height: 18px;
  	text-align: center;	
}

	
.drower-menu a:hover {
  	color: #C6C6C6;
	border-bottom: solid .5px #C6C6C6;
	padding-bottom: 10px;
	transition: 0.4s;
}
	
.drower-menu a::after {/* 隠しメニューの下線 */
  position: absolute;
  bottom: -2px;
  left: 0;
  content: '';
  width: 100%;
  height: 2px;
  background: #C6C6C6;
  transform: scale(0, 1);
  transform-origin: center top;
  transition: transform .3s;
}
.drower-menu a:hover::after {/* 隠しメニューの下線 */
  transform: scale(1, 1);
}

}