@charset "utf-8";
/*============================================================
    IKUYO NAKAMA ARCHITECT/ASSOCIATES
  ============================================================ */
/*
layout.css
color: #524439　#8c6351  link #A86000;
background: #e1e1db/225,225,219　#d8d6d0  #beb8ae;
point color:background: #8B7661; #659D9E;

/*----------------------------------------------
NAVI
------------------------------------------------*/
.header{
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 70px;
z-index: 400;
text-align: left;
}

/* ナビスペース帯 TOP用 */
.header_inner0 {
background:rgba(225,225,219,0); /*#e1e1db*/
padding: 19px 0 17px;
}
/* ナビスペース帯 第２階層 */
.header_inner {
background:rgba(225,225,219,0.7); /*#e1e1db*/
padding: 18px 20px 8px;
}
@media screen and (max-width: 767px) {
.header{
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 50px !important;
z-index: 400;
text-align: left;
}
.header_inner {
background:rgba(225,225,219,0.7); /*#e1e1db*/
padding: 18px 20px 3px !important;
}
}


.logo{
display: flex;
justify-content: start;
top: 4%;
margin:auto;
}

/* header固定の余白 */
.main{  
margin-top: 70px;
}

.nav {
		position: fixed;
		right: -3320px; /* 右から出現 */
		top: 0;
  width: 300px; 
	 max-width: 300px;
		height: 100vh;
		padding-top: 60px;
		background-color: #fff;
		transition: all .8s;
		z-index: 400;
		border-top-left-radius:20px;
		border-bottom-left-radius:20px;
		overflow-y: auto; /* メニューが多い場合はスクロール */
}
@media screen and (max-width: 767px) {
.nav {
		position: fixed;
		right: -3320px; /* 右から出現 */
		top: 0;
  width: 80% !important; 
	 max-width: 500px;
		height: 100vh;
		padding-top: 60px;
		background-color: #fff;
		transition: all .8s;
		z-index: 400;
		border-top-left-radius:20px;
		border-bottom-left-radius:30px;
		overflow-y: auto; /* メニューが多い場合はスクロール */
}
}

.nav .sns{
 margin:-30px auto 0;
 display: flex;
 justify-content: center; 
 gap: 14px; 
}
@media screen and (max-width: 767px) {
.nav .sns{
 margin:30px auto 0;
}
}

/* ------- ハンンバガーナビ -------- */
.hamburger {
		position: absolute;
		right: 24px;
		top: 26px;
		width: 70px; 
		height: 46px;
		cursor: pointer;
		z-index: 500;
}

@media screen and (max-width: 767px) {
.hamburger {
		top: 22px;
		width: 54px; 
		right: 12px;
}
}
/* ------------------------------ */



.nav_list {
		margin: 30px 0 0;
		list-style: none;
}
.nav_list img{
		width: min(300px, 68%);
		margin: 20px auto 8px;
		padding-bottom: 5px;
		list-style: none;
}
.nav_item {
		font-size: 1rem;
		line-height: 2.6rem;
		text-align: center;
		border-bottom: 1px solid #DBCAC1;
		padding: 0px auto;
}
.nav_item a {
		display: block;
		padding: 0px 2px 0px;	
		text-decoration: none;
		color: #5d4535;
}
.nav_item a:hover {
		padding: 0px 5px 0;
		background-color: #EAE6E1;
}
.english a{
		display: block;
  width: 110px;
		text-decoration: none;
		font-size:0.9rem !important;
		line-height: 1.0rem;
		text-align: center;
		border: 1px solid #DBCAC1;
		margin:30px auto;
		padding: 6px 0 7px;
}
.english a:hover {
		padding: -5px;
		background-color: #EAE6E1;
}

/* ---- Hamburger Line ---- */	
.hamburger_border {
		position: absolute;
		left: 11px;
		width: 40px;
		height: 1.7px;
		background-color: #fff;
		transition: all .6s;
}
.hamburger_border_top {
		top: 13px;
}
.hamburger_border_center {
		top: 22px;
}
.hamburger_border_bottom {
		top: 31px;
}
.black_bg {
		position: fixed;
		left: 0;
		top: 0;
		width: 100vw;
		height: 100vh;
		z-index: 100;
		background-color: #5d4535;
		opacity: 0.6;
		visibility: hidden;
		transition: all .7s;
		cursor: pointer;
}

/* - Hamburger Line 第２回階層用 -- */
/* ---- Hamburger Line ---- */	
.hamburger_border.second {
		position: absolute;
		left: 11px;
		width: 40px;
		height: 1.7px;
		background-color: #524439;
		transition: all .6s;
}

/* 表示時CSS */
.nav-open .nav {
		right: 0;

}
.nav-open .black_bg {
		background-color: #826D5E !important;
		opacity: 0;
		visibility: visible;
}
.nav-open .hamburger_border_top {
		background-color: #5d4535 !important;
		transform: rotate(45deg);
		top: 20px;
		z-index: 1000;
}
.nav-open .hamburger_border_center {
		background-color: #5d4535 !important;
		width: 0;
		left: 50%;
}
.nav-open .hamburger_border_bottom {
		background-color: #5d4535 !important;
		transform: rotate(-45deg);
		top: 20px;
}
}


/*-- PC (ページ上項目）--*/
/*@media only screen and (min-width: 921px) {
.header_inner{
		max-width: 1600px;
		width: 100%;
		padding: 10px 20px 6px;
		margin-left: auto;
		margin-right: auto;
		mix-blend-mode: difference;
}
.logo{
		padding: 3px 10px 5px;
}
.nav_list{
		text-align: left;
}
.nav_list li{
		font-size:1rem;
		display: inline-block;
		text-align: center;
		letter-spacing:0.06em;
		padding:0 11px 0 11px;
}
.nav_list li a{
		color: #524439;
		font-weight: 300;
}
	.nav_item a:hover {
		color: #A86000;
}
}