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

/*開閉ボタン*/
#nav_toggle{
display: block;
width: 50px;
height: 40px;
position:relative;
z-index: 1;
background:rgba(255,255,255,1.00);
padding:5px 0;
}
#nav_toggle div {
position: relative;
}
#nav_toggle span{
display: block;
height: 4px;
background:#4D412B;
position:absolute;
width: 80%;
left:10%;

-webkit-transition: 0.5s ease-in-out;
-moz-transition: 0.5s ease-in-out;
transition: 0.5s ease-in-out;
}
#nav_toggle span:nth-child(1){
top:0px;
}
#nav_toggle span:nth-child(2){
top:12px;
}
#nav_toggle span:nth-child(3){
top:24px;
}
#nav_toggle div p{
font-size:0.7em;
position:absolute;
width:100%;
top:30px;
overflow:hidden;
white-space:nowrap;
text-align:center;

-webkit-transition: 0.5s ease-in-out;
-moz-transition: 0.5s ease-in-out;
transition: 0.5s ease-in-out;
}

/*開閉ボタンopen時*/
.open #nav_toggle span{
background:#FF5A26;
height:6px;}

.open #nav_toggle span:nth-child(1) {
top: 12px;
   -webkit-transform: rotate(135deg);
-moz-transform: rotate(135deg);
transform: rotate(135deg);
}
.open #nav_toggle span:nth-child(2) {
width: 0;
left: 50%
}
.open #nav_toggle span:nth-child(3) {
top: 12px;
-webkit-transform: rotate(-135deg);
-moz-transform: rotate(-135deg);
transform: rotate(-135deg);
}
.open #nav_toggle div p{
	color:#940002;}
	




/*ナビゲーション*/

nav{
display: none;
width: 100%;
padding: 0;
/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#d1c4ad+0,b59f79+100 */
background: #d1c4ad; /* Old browsers */
background: -moz-linear-gradient(top,  #d1c4ad 0%, #b59f79 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  #d1c4ad 0%,#b59f79 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  #d1c4ad 0%,#b59f79 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d1c4ad', endColorstr='#b59f79',GradientType=0 ); /* IE6-9 */
}
#nav_inner{
	width:100%;
	background:url(../images/image3.png);}
nav ul{
display: block;
width: 100%;
z-index:0;
border-left: 1px solid #ccc;
border-right: 1px solid #ccc;
position:relative;
}
nav ul li{
border-bottom: 1px solid #ccc;
}
nav ul li.li_plan a::before{	
padding: em 0;
text-indent:em;
content:none;}

nav ul li a{
display: block; 
text-decoration:none;
padding: 1em 0;
line-height:1.2em;
padding-left:1em;
position: relative;
text-indent:1em;
color:#fff !important;
}
nav ul li a,
nav ul li a:visited,
nav ul li.li_plan a,
nav ul li.li_plan a:visited{
	color:#fff;}
nav ul li a:hover{
	font-weight:bold !important;}

nav ul li a::before{
font-family: "Font Awesome 5 free";
content: '\f054';
font-weight: 900;
margin-left:-1.75em;
padding:0 0.25em 0 1em;
color:#D96D00;
}
nav ul li.li_plan a:after{
font-family: "Font Awesome 5 free";
content: '\f13a';
font-weight: 900;
padding:0 0 0 .25em;
color:#D96D00;	}



/*小ナビ*/

nav ul li ul{
	display:none;}
nav ul li:hover ul{
	width:90%;
	margin-left:5%;
	margin-top:-.5em;
	display:flex;
	flex-direction: column;
	background:#FFFBF6;
	border-left:1px solid #ccc;
	position:absolute;
	z-index:100;
	}

nav ul li ul li{
	height: 0;
	transition: 2s;}
nav ul li:hover ul li{
	width:100%;
	overflow: visible;
	height:3em;
	border:1px solid #ccc;
	border-left:none;
	margin:0;
	padding:0;
	padding-top:1em;
	text-indent:1em;
	white-space:nowrap;
	overflow:hidden;
	}
nav ul li:hover ul li:first-child{
	}

nav ul li ul li a{
	display:block;
	margin:0;
	padding:0;
	color:#666 !important;}
nav ul li ul li a:hover{
	text-decoration:none;}
nav ul li:hover ul li a:after{
	content:none;}
nav ul li:hover ul li a:before{
font-family: "Font Awesome 5 free";
content: '\f054';
font-weight: 900;
padding:0 0.25em 0 1em;
color:#D96D00;
}


}

@media screen and (min-width:481px) {
nav{
width:100%;
}
nav ul li a{
padding-left:1em;}
#nav_toggle{
padding:0;
padding-top:5px;
}


}









@media screen and (min-width:768px) {
nav{
display: block;
width:100%;
margin:0 auto;
z-index:99;
/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#d1c4ad+0,b59f79+100 */
background: #d1c4ad; /* Old browsers */
background: -moz-linear-gradient(top,  #d1c4ad 0%, #b59f79 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  #d1c4ad 0%,#b59f79 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  #d1c4ad 0%,#b59f79 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d1c4ad', endColorstr='#b59f79',GradientType=0 ); /* IE6-9 */
}
#nav_inner{
	width:100%;
background:url(../images/image3.png);

border-bottom:#CDBFA5 solid 1px;}
nav ul{
    display:-ms-grid;
    display:grid;
    -ms-grid-columns:auto auto auto;
    grid-template-columns:auto auto auto;
width: 95%;
margin:0 auto;
background:none;
border:none;
position:static;
padding:0;
}
nav ul li{
flex-grow:1;
    display: flex;
    align-items: center;
	justify-content: center;
border-bottom: none;
border-right:rgba(255,255,255,0.25) solid 3px;
line-height:1em;
padding: 0;
margin:.25em 0;
position:relative;
}
nav ul li:nth-child(1) {
        -ms-grid-column:1;
        grid-column:1;
        -ms-grid-row:1;
        grid-row:1;
    }
nav ul li:nth-child(2) {
        -ms-grid-column:2;
        grid-column:2;
        -ms-grid-row:1;
        grid-row:1;
    }
nav ul li:nth-child(3) {
        -ms-grid-column:3;
        grid-column:3;
        -ms-grid-row:1;
        grid-row:1;
    }
nav ul li:nth-child(4) {
        -ms-grid-column:4;
        grid-column:4;
        -ms-grid-row:1;
        grid-row:1;
    }
nav ul li:nth-child(5) {
        -ms-grid-column:5;
        grid-column:5;
        -ms-grid-row:1;
        grid-row:1;
    }
nav ul li:nth-child(6) {
        -ms-grid-column:6;
        grid-column:6;
        -ms-grid-row:1;
        grid-row:1;
    }
	
nav ul li.office_li{
	display:none;}

nav ul li a::before{
font-family: "Font Awesome 5 free";
content: '\f054';
font-weight: 900;
  margin-left:-1.75em;
  padding:0 0.25em 0 1em;
}
nav ul li:first-child{
	border-left:rgba(255,255,255,0.25) solid 3px;
}
nav ul li:last-child{
	border-right:rgba(255,255,255,0.25) solid 3px;
}

nav ul li a{
text-decoration: none;
padding: 1em 0;
display: block; 
	line-height:1.2em;
	padding-left:1em;
	text-indent:0;
}

nav ul li a:hover{
	text-decoration:none;}

	
	


#nav_toggle{
padding:0;
padding-top:10px;
padding-bottom:5px;
}
#nav_toggle span{
width: 60%;
left:20%;
}

#nav_toggle span:nth-child(2){
top:8px;
}
#nav_toggle span:nth-child(3){
top:16px;
}
#nav_toggle div p{
top:24px;}





/*小ナビ*/

nav ul li ul{
	display:none;}
nav ul li:hover ul{
	width:350px !important;
	display:flex;
	flex-direction: column;
	position:absolute;
	left:0;
	top:calc(50% + 1.25em);
	z-index:100;
	}

nav ul li ul li{
	height: 0;
	transition: 2s;}
nav ul li:hover ul li{
	height:3em;
	overflow: visible;
	border:none;
	border-bottom:1px solid #ccc;
	margin:0;
	padding:1em 0;
	display:block;
	text-indent:2em;
	}
nav ul li:hover ul li:first-child{
	border-top:1px solid #ccc;
	}

nav ul li ul li a{
	display:block;
	margin:0;
	padding:0;
	text-indent:1em;}
nav ul li ul li a:hover{
	text-decoration:none;}



}



@media screen and (min-width:1024px){

nav{}
nav ul{
width: 1024px;
}
nav ul li.li_plan{	
cursor : pointer;}

/*小ナビ*/
nav ul li:hover ul{
	width:1000px;
		}

}


@media screen and (min-width:1981px) {
nav ul{
	width:100%;
	max-width:1980px;
	}
}