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

@media only screen and (min-width:1200px){
.dropdown__list a {font-size:14.5px!important;}
}

@media only screen and (min-width: 940px){
a#menu{
	display:none;
}	
#mainnav {
 display:flex;
 flex-wrap: nowrap; 
}		
#mainnav div.navi-logo {
	margin:12px 0 0 15px;
}	
	
#mainnav div.navi-logo a img {
	width:180px;
	transition-duration:.4s;
}
#mainnav div.navi-logo a:hover img {
	filter:alpha(opacity=80);
	-moz-opacity: 0.8;
	opacity: 0.8;
}

#mainnav div.panel{
	width:calc( 100% - 195px );
	display:block !important;
}
	#mainnav{
		position:fixed;
		top: 0;
		width:100%;
		z-index:500;
		background:#0055b4;
	}
	#mainnav ul {
	display:flex;
	justify-content: flex-end;
	}
	#mainnav li {
		text-align:center;
	}
	#mainnav li.works img {
		display:inline-block;
		width:18px;
		vertical-align:middle;
		margin:0 0 3px 5px;
	}
	#mainnav li a {
		color:#ffffff;
		text-decoration:none;
		position:relative;
		padding: 20px 16px 20px;
		font-size:13px;
		letter-spacing:1px;
		font-weight:600;
		display:block;
		cursor:pointer;
		transition-duration:.4s;
	}
	#mainnav li:nth-of-type(4) a {
		padding:20px 30px 20px 18px;
	}
	#mainnav li.mail a {
		width:30px;
		display: block;
		padding:22px 15px 13px 19px;
	}
	#mainnav li.line a {
		width: 38px;
		padding:14px 18px 5px 15px;
		display:block;
	}
	#mainnav li.mail a:before,#mainnav li.line a:before {
		display:none;
	}
	#mainnav li.mail a:hover,#mainnav li.line a:hover {
		opacity: 0.6;
	}
	
#mainnav ul li a::before {
  background: #fff;
  content: '';
  width:80%;
  height:0.8px;
  position: absolute;
  left: -1px;
  bottom:10px;
  margin:0 10%;
  transform-origin: right top;
  transform: scale(0, 1);
  transition: transform .3s;
}
#mainnav ul li:nth-of-type(4) a::before {
  width:70%;
  left: -1px;
}
	
#mainnav ul li a:hover::before {
  transform-origin: left top;
  transform: scale(1, 1);
}	
	#mainnav li.navi-tel {
		background:#13337a;
		color:#ffffff;
		padding:0px 8px 0px 28px;
		position:relative;
	}
	#mainnav li.navi-tel:before {
		position:absolute;
		content:"";
		top:14px;
		left:20px;
		width:16px;
		height:23px;
		background:url(../images/nav-tel.svg);
		background-size:cover;
		display:block;
	}
	#mainnav li.navi-tel .tel a {
		font-size:20px;
		line-height:1.2;
		padding:12px 10px 0px 15px;
	}
	#mainnav li.navi-tel .b-hour {
		font-size:11px;
		line-height:1.6;
		font-weight:500;
	}
	#mainnav li.navi-tel .b-hour span {
		font-size:12px;
		margin:0 10px 0 5px;
	}	
	#mainnav.changeNav{
		box-shadow: rgba(0, 0, 0, 0.1) 0px 20px 25px -5px, rgba(0, 0, 0, 0.04) 0px 10px 10px -5px;
	}
	
/*	#mainnav.changeNav li{
		padding: 20px 10px;
	}
	#mainnav.changeNav li a {
		color:#444;
	}*/
}


@media only screen and (max-width: 939px){
#menuWrap {
	background:#0055b4;
	height: 60px;}

#mainnav div.navi-logo {
	margin:9px 0 0 10px;
	text-align:center;
	float:left;
}
#mainnav div.navi-logo img {
	width:180px;
}	
a#menu{
  	display: inline-block;
  	position: relative;
  	width: 60px;
  	height:60px;
  	margin:0px;
  	background: #13337a;
 }
	#menuBtn{
  	display: block;
  	position: absolute;
  	top:50%;
  	left:50%;
  	width:24px;
  	height:2px;
  	margin:0px 0 0 -11px;
  	background: #fff;
  	transition: .2s;
	}
	#menuBtn:before, #menuBtn:after{
  	display: block;
  	content: "";
  	position: absolute;
  	top: 50%;
  	left: 0;
  	width:24px;
  	background: #fff;
  	transition: .3s;
	}
	#menuBtn:before{
  	margin-top:-10px;
	height:1.8px;
	}
	#menuBtn:after{
  	margin-top:8px;
	height:1.5px;
	}

	a#menu .close{
  	background: transparent;
	}
	a#menu .close:before, a#menu .close:after{
  	margin-top: 0;
	}
	a#menu .close:before{
  	transform: rotate(-45deg);
  	-webkit-transform: rotate(-45deg);
	}

	a#menu .close:after{
  	transform: rotate(-135deg);
  	-webkit-transform: rotate(-135deg);
	}
	.panel{
		width: 100%;
		display: none;
		overflow: hidden;
		position: relative;
		left: 0;
		top: -1px;
		z-index: 100;
	}
	#mainnav{
		position: fixed;
		top: 0;
		right: 0;
		width: 100%;
		text-align: right;
		z-index:500;
	}
	#mainnav ul{
		border-top: 1px solid #fff;
		border-bottom: 1px solid #fff;
		/*background: #fff;*/
		background:#0055b4;
		text-align:center;
		display:flex;
		flex-wrap:wrap;
	}
	#mainnav li{
	width: 25%;
	}
	#mainnav li.works img {
		display:inline-block;
		width:20px;
		vertical-align:middle;
		margin:0 0 5px 8px;
	}
	#mainnav li a {
		position: relative;
		display:block;
		text-decoration:none;
		padding:15px 25px;
		border-bottom: 1px solid #fff;
		color: #fff;
		font-weight: 600;
	}
	#mainnav li.works a {
		padding:15px 0px 15px 15px;
	}
	#mainnav li.navi-tel {
	width:50%!important;	
	}
	#mainnav li.mail,#mainnav li.line {
	width:20%!important;
	}
	#mainnav li.navi-tel a,#mainnav li.mail a,#mainnav li.line a {
	border-bottom:none;
	display:block;
	}
	#mainnav li.mail a{
	padding:18px 0 15px;
	}
	#mainnav li.line a{
	padding:13px 0 0px;
	}	
	#mainnav li.mail img {
		width:38px;
		margin:auto;
	}
	#mainnav li.line img {
		width: 38px;
	}
	#mainnav li.navi-tel {
		color:#ffffff;
		position:relative;
	}
	#mainnav li.navi-tel a {
		position:relative;
		text-align:center;
		line-height:1.2;
		padding-top:4px;
		font-weight:600;
		padding: 10px 0 0 15px;
	}
	#mainnav li.navi-tel a:before {
		position: relative;
		display:inline-block;
		left:-5px;
		content:"";
		width:13px;
		height:18px;
		background:url(../images/nav-tel.svg);
		background-size:cover;
	}
	#mainnav li.navi-tel .tel {
		font-size:26px;
	}
	#mainnav li.navi-tel .b-hour {
		font-size:12px;
		line-height:1.6;
		font-weight:500;
		padding: 0 0 10px 25px;
	}
	#mainnav li.navi-tel .b-hour span {
		font-size:13px;
		margin:0 10px 0 5px;
	}	
	#mainnav li.mail a:hover,#mainnav li.line a:hover {
		opacity: 0.6;
	}
}


@media only screen and (max-width: 480px){
.panel{
	width: 100%;
	display: none;
	overflow: hidden;
	position: relative;
	left: 0;
	top: -1px;
	z-index: 100;
}
#mainnav li{
	width: 50%;
}
#mainnav li.navi-tel {
	width:62%!important;	
}
#mainnav li.mail,#mainnav li.line {
	width:18%!important;
}
#mainnav.changeNav{
box-shadow: rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.05) 0px 4px 6px -2px;
}	
}



#mainnav ul.dropdown__lists {
    display: none;/*デフォルトでは非表示の状態にしておく*/
    width: 100%;
    position: absolute;
    top: 64px;
    left: 0;
    z-index:999;
    border-bottom: none!important;
}
#mainnav li:hover .dropdown__lists {
    display: flex;/*Gナビメニューにホバーしたら表示*/
    /* margin: 0 0 0 0; */
    padding: 30px 0;
    width: 100%;
    background: #13337a;
    justify-content:center;
    border-top: 2px solid #13337a;
}
.dropdown__list {
	background-color:#fff;
	height: 60px;
	width: 15%;
	margin: 0 0 0 0;
	display: inline-block;
	transition: all .3s;
	position: relative;
	border-right: #13337a 15px solid;
}	

.dropdown__list:last-child {
    border-right:none;
}

.dropdown__list:hover {
	color: #13337a;
}
.dropdown__list a {
    display: flex;
    justify-content: center;
    align-items: center;
    color: #13337a!important;
    padding: 17px 16px 16px!important;
    text-decoration: none;
    position: relative;
    border-bottom:none;
}
.dropdown__list a:hover {
	background-color:#ebf3f8;
}	
.dropdown__list a::before {
	display:none;
}

@media only screen and (max-width:1500px){
.dropdown__list {
    width: 14%;
    }
}

@media only screen and (max-width:1400px){
.dropdown__list {
    width: 14%;}
}

@media only screen and (max-width:1300px){
.dropdown__list {
    width: 15%;}
}

@media only screen and (max-width: 1060px){
.dropdown__list {
    /* background-color: #0055b4; */
    width: 18%;
    margin: 0 0 0 0;
    display: inline-block;
    transition: all .3s;
    position: relative;
    border-right: #13337a 10px solid;
    }		
}

@media only screen and (max-width: 919px){
#mainnav ul.dropdown__lists {
    top: 60px;	
	display: none;/*デフォルトでは非表示の状態にしておく*/
    position:relative;
    z-index:999;
    border-bottom: none!important;
}
.dropdown__list {
    width: 19%!important;
}
.dropdown__list a {
    border-bottom: none!important;
}

#mainnav li:hover .dropdown__lists {
    padding: 15px 0;
    width: calc(100%*4);
    top:0;
    box-sizing: border-box;
    left: -100%;
    /* background: #13337a; */
    justify-content: center;
    border-top: 2px solid #13337a;
}
}

@media only screen and (max-width: 880px){	
.dropdown__list {
    height:auto;
    width:23%!important;
}
.dropdown__list:last-child {
    border-right:none;
}
.dropdown__list a {
    font-size:90%;
    padding: 15px 0!important;
}	
}

@media only screen and (max-width:767px){
#mainnav li:hover .dropdown__lists {
    padding: 4px 0;
    top:0;
    box-sizing: border-box;
    left: -100%;
    /* background: #13337a; */
    justify-content: center;
    border-top: 2px solid #13337a;
}
.dropdown__list {
    width:calc( 50% - 10px)!important;
    border-right: none;
    margin:3px 3px;
}
.dropdown__list a {
    padding: 15px 0!important;
    border-bottom: none!important;
    height: auto;
	background-color: #fff;
    font-size: 100%;
}	
#mainnav li .accordion li {
	width: 100%!important;}
.toggle_contents {
	width:100%;
	/* border: 2px solid #d9d9d9; */
}
.toggle_contents ul {
	position:absolute;
	width:100%;
	left: 0px;
	justify-content: center!important;
	background-color: #0055b4;
}

.toggle_title {
	position: relative;
	padding: 15px 0px;
	cursor: pointer;
	width: 100%;
	font-size: 16px;
	font-weight: 600;
	color: #fff;
	text-align: center;
	line-height: 1.4;
}
.toggle_btn {
	position: absolute;
	top: 50%;
	right: 20px;
	transform: translateY(-50%);
	background: #0052a4;
	display: block;
	width: 24px;
	height: 24px;
	text-indent: 100%;
	white-space: nowrap;
	overflow: hidden;
	border-radius: 50%;
}
.toggle_btn:before, .toggle_btn:after {
	display: block;
	content: '';
	background-color: #fff;
	position: absolute;
	width: 10px;
	height: 2px;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}
.toggle_btn:before {
	width: 2px;
	height: 10px;
}
.toggle_title.selected .toggle_btn:before {
	content: normal;
}
.toggle_contents dd {
	display: none;
}

.toggle_contents ul li {
	width: 15%!important;}
}

@media only screen and (max-width:480px){
#mainnav li:hover .dropdown__lists {
    width: calc(100%*2);}
}