@charset "utf-8";


@media screen and (min-width:858px){
	.header {z-index: 1000;}
	.header {position: fixed; top:0; left:0; right:0; z-index: 50; background: #fff;}

	.openbtn{display:none;}
#g-nav-list{
	display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    /* -webkit-box-align: end; */
    -ms-flex-align: end;
    align-items: flex-end;
    height: 100%;
	margin:1.5rem;
}
	
	.r_top h1{width:30%;}
	#g-nav-list{display:flex; align-items: center; justify-content: space-between;
	}
	
    .r_nav1 { 
        display: flex; gap: 2rem; align-items: center; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); font-weight: 500; font-size: .875rem; line-height: 1.25rem; white-space: nowrap; color: rgb(55,65,81);}
	
	.r_nav2{display: flex; gap: 1rem; align-items: center; font-weight: 500;}

}


@media screen and (max-width:857px){
	.container{    padding-left: 1.5rem;
    padding-right: 1.5rem;
    max-width: 80rem;}
	.main2oya,.main5_div3,.main6_div2,.main7_div3,.main8_div2,.main9_div2,.main10_div3,.main11_div2,.main13_div2{padding-left:0; padding-right:0; max-width:100%;}
	.header .container{padding-left: 0.5rem; padding-right: 0.5rem;}
	.main1_bg{height:3rem;}
	.main2{padding-top:2.5rem;}
	.main2-d3-1{padding:2rem 1.5rem;}
	.main2-d3-p1 {font-size: 1.5rem;}
	.main2-d3-p2{font-size:1rem;}
	.m7_t1_link1-3{text-align: center;}
	.m8_d2_i3,.m8_sbox_link,.main8_div2-8 a,.m8_d2-9_a1{white-space: inherit !important;}
	.m8_sbox_link{font-size:1rem;}
	.m8_d2-9-3_1{padding:2rem 1.5rem;}
	.m8_d2-9-3 {padding-top: 2.5rem; padding-bottom: 2.5rem; padding-left: 1rem; padding-right: 1rem;}
	.m12_d6_infobox{flex-direction: column;}
	.infobox2{display: none;}
	

/******************************** hamburger *************************************/
	.r_top h1{width:70%;}
	.header{position: fixed;
    z-index: 999;
    background: #fff;}

	#g-nav{
		position:fixed;
		z-index:-1;
		opacity:0;
		transition:all 0.3s;
		top:0;
    right: -120%;
	}

	#g-nav.panelactive{
		opacity:1;
		z-index:999;
		background:#fff;
		width:80%;
		height:100vh;
		right:0;
	}

	.openbtn{
		position:relative;
		z-index:9999;
		cursor: pointer;
		width:50px;
		height:50px;
	}

	.openbtn span{
		display:inline-block;
		transition:all .4s;
		position:absolute;
		left:14px;
		height:3px;
		border-radius: 2px;
		background-color:#666;
		width:45%;		
	}

	
	.openbtn span:nth-of-type(1){top:15px;}
	.openbtn span:nth-of-type(2){top:23px;}
	.openbtn span:nth-of-type(3){top:31px;}
	/*
	.openbtn span:nth-of-type(3)::after {
	  content:"MENU";
	  position: absolute;
	  top:5px;
	  left:-2px;
	  color: #000;
	  font-size: 0.37rem;
	  text-transform: uppercase;
	  white-space: nowrap;
	}
	*/

	.openbtn.active span:nth-of-type(1) {
		top: 18px;
		left: 18px;
		transform: translateY(6px) rotate(-45deg);
		width: 30%;
	}

	.openbtn.active span:nth-of-type(2) {
		opacity: 0;
	}

	.openbtn.active span:nth-of-type(3){
		top: 30px;
		left: 18px;
		transform: translateY(-6px) rotate(45deg);
		width: 30%;
	}
	/*
	.openbtn.active span:nth-of-type(3)::after {
	  content:"CLOSE";
	  transform: translateY(0) rotate(-45deg);
	  top:5px;
	  left:4px;
	}
	*/

	#g-nav.panelactive #g-nav-list{
		position:fixed;
		z-index:999;
		width:80%;
		height:100vh;
		overflow: auto;
		-webkit-overflow-scrolling:touch;
		background:#fff;
		padding-top: 6rem; padding-left: 1.5rem; padding-right: 1.5rem;
	}

/*	#g-nav .r_nav2{
		display:none;
		position:absolute;
		z-index:999;
		top:50%;
		left:50%;
		transform: translate(-50%, -50%);
		-webkit-transform: translate(-50%, -50%);
		-ms-transform: translate(-50%, -50%);
	}
*/

	#g-nav.panelactive ul{     font-size: 1.125rem;
    line-height: 1.75rem;     font-weight: 500;}
	#g-nav li{list-style:none; text-align:left;}

	#g-nav.panelactive li a{display:inline-block; text-decoration: none; color:#000; padding:2.5%; width:100%;	}
	.r_nav1.panelactive li+li{border-left:1px solid #fff;}
	
	.r_nav2{display:flex; flex-direction: column; gap:1.5rem; margin-top:1rem;}

	#g-nav.panelactive .con {
        position: fixed;
        width: 100%;
        height: 100vh;
        top: 0;
        left: 0;
        z-index: -1;
        background: rgba(3, 3, 3, .5);
		display: block;}
}