@charset "utf-8";

/* -----------------------------------------------------------------
LAYOUT CSS
LAST UPDATE:
--------------------------------------------------------------------*/

/*========================================
PCを基本設計にする
 - 1280px〜：大型PC
 - 960px〜1279px：小型PC
 - 600px〜959px：タブレット
 - 480px〜599px：スマートフォン横
 - 〜479px：スマートフォン縦
========================================*/ 
 
/* ------------------------------------------------------------------------------------------------------------------------
    1280px〜：大型PC 
------------------------------------------------------------------------------------------------------------------------ */
/* ▼▼▼ body ▼▼▼ */
body{
	color: #333333;
	font-family:"Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
    font-size:16px;
    line-height: 2;
	word-wrap:break-word;
	-webkit-text-size-adjust:100%;
	border-top:solid 3px #f74e0b;
	background: #fff;
}

/* ▼▼▼ wrap ▼▼▼ */
#wrap{overflow: hidden; width: 100%; overflow-x: hidden;}

/* ▼▼▼ #header ▼▼▼ */
#header{ width:100%; max-width:1280px; height: 100px; margin:0 auto; position: relative; }
#header .logo img{position: absolute; bottom: 15px; left: 10px; width:350px;}
#header .tel img{position: absolute; bottom: 15px;	right: 10px; width:410px;}

/* ▼▼▼ #gnav ▼▼▼ */
#gnav {position:relative; background:#f74e0b; width:100%;}
#gnav *, #gnav *::after, #gnav *::before {box-sizing:border-box;}
#gnav .strip {width:98%; height:50px; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-around; background:#f74e0b; }
#gnav a {color: #fff; text-decoration: none; letter-spacing:3px; position: relative; text-align: center; padding:5px 0px; width:20%; border-left:solid 1px rgb(255, 255, 255); }
#gnav a:last-child {border-right:solid 1px rgb(255, 255, 255); }
#gnav .menu {background:#f74e0b; width:98%; max-width:1280px; margin:0 auto;}
#gnav .menu a::after {width:100%; height:0; background: #fff; content: ''; position:absolute; top:75%; left:15%; width:70%; opacity:0; transition:all 0.3s ease-out; margin:0 auto; }
#gnav .menu a:hover::after {opacity:1; top:85%; left:30%; height:2px; width:40%; }

/* ▼▼▼ Drawer_Menu ▼▼▼ */
#Drawer_Menu{ display: none !important; }

#nav {position: fixed; z-index: 10; right: 0; top: 0;  width: 250px;  height: 100%;  background-color: #f74e0b; transition: .5s transform ease-in-out; transform: translateX(250px);  -webkit-overflow-scrolling: touch;}
#nav-inner {box-sizing: border-box; padding: 20px; height: 100%; color: #fff; overflow-y: auto;}
#nav-inner li {margin-bottom: 10px; padding:5px 5px 5px 15px; border-bottom:1px solid #000;}
#nav-inner li a{line-height:1; color:#000; text-decoration: none;font-weight: bold; font-size:17px; letter-spacing: 1px;}
#nav-inner li a:hover{color:rgb(255, 208, 0); text-decoration:underline;}
#nav-btn { position: fixed; right: 20px; top: 15px; z-index: 11; width: 40px; height: 40px; transition: .5s transform ease-in-out; transform: translateX(0);}
#nav-btn:before { content: "\f0c9"; font-family: "FontAwesome"; font-size: 20px;}
.nav-open { position: fixed; left: 0;}
.nav-open:after { content: ''; display: block; position: fixed; z-index: 9; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.6);}
.nav-open #nav { transform: translateX(0);}
.nav-open #nav-btn { transform: translateX(-250px);}
.nav-open #nav-btn:before {content: "\f00d";}



/* ▼▼▼ #pageTop ▼▼▼ */
#pageTop{width:100%; min-width:1280px; margin:0 0 0 0;}
#pageTop a{display:block; text-align:center; border-top:1px solid #dddddd; border-bottom:1px solid #dddddd; padding:28px 0 17px; color:#333;}
#pageTop a:hover{ background:#f3f3f3; text-decoration:none;}

/* ▼▼▼  #footer ▼▼▼ */
#footer{ width:100%; background:#f6f6f6; border-top:1px solid #dddddd; margin:1px 0 0 0;}
#footer .footerInner{width:1280px; margin:0 auto; overflow:hidden;padding:15px 0 ;}
#footer .footerInner .footLinks{ float:left;}
#footer .footerInner .footLinks li{ padding:0 20px; display:inline; border-right:1px solid #dddddd;}
#footer .footerInner .footLinks li a{} 
#footer .footerInner .copy{ float:right; padding-right:15px;}

/* ▼▼▼   .topicPath ▼▼▼ */
.topicPath{width:100%; max-width:1280px; margin:0 auto; padding:0 60px; }
.topicPath li{ display:inline-block;padding:10px 0;}

/* ▼▼▼  #contents ▼▼▼ */
#contents{ border-top:1px solid #dddddd;  width:100%; min-width:1280px;}
.contentsInner{ width:100%; max-width:1280px; margin:0 auto; overflow:hidden;}

/* ▼▼▼  #main ▼▼▼ */
#main{ width:72%; float:left; border-right:1px solid #dddddd; padding:0 3% 10% 0; }

.ttlSection{ margin:30px 0 5px 0;display:inline-block; padding:4px 8px; color:#333; font-weight:bold;}
.ttlSection p img{width:100%; height:auto;}
.ttlSection .titleTag{ margin:30px 0 5px 0;display:inline-block; padding:4px 8px; background:#ca0000; color:#fff; font-weight:bold;}
.ttlSection h1{ padding:25px 0 15px;}
.ttlSection h2{ font-weight:bold; padding:0 0 5px;}
.ttlSection h3{ font-weight:bold; padding:15px 0;}

/* ▼▼▼  lead ▼▼▼ */
.lead01{ font-weight:bold;color:rgb(85, 85, 85);}
.lead01_01{ font-weight:bold; color:rgb(85, 85, 85); }
.lead02{ color:#333;}
.lead03{ font-weight:bold; color:#fff;  display:block; padding:11px 16px; background: #f74e0b; border-radius: 4px;}

/* ▼▼▼  .section ▼▼▼ */
.section{ margin:0;}
.section h3{  font-weight:bold; color:#fff;  display:block; padding:11px 16px; background: #f74e0b; border-radius: 4px;}
.section p,
.section ul,
.section dl,
.section table{ margin:15px 0 0 0;}

/* ▼▼▼   #side ▼▼▼ */
#side{ width:23%; float:right; margin:0 0 0 1%; padding:25px 0 30px 0;}

/* ▼▼▼   #side mice_nav ▼▼▼ */
.mice_nav{ margin:0 0 30px;}
.mice_nav p img{ margin:0 0 10px -10px; padding:0; text-align: left;}
.mice_nav dt{ font-weight:bold; padding:0 0 10px 0;}
.mice_nav dd ul{ margin-top:10px; border-bottom:1px solid #ddd;}
.mice_nav dd ul li{ border-top:1px solid #ddd; padding:20px 5px 20px 0px; display:block;}
.mice_nav dd ul li span{ color: #f74e0b; border: solid 3px #f74e0b; padding: 0.2em 0.5em; border-radius: 0.5em;}
.mice_nav dd ul li ol li{  border-top:none; margin-top:10px; margin-left:-10px; display:block; text-indent: -1.5em;  padding:0 0 0 2em;}
.mice_nav dd ul li ol.dantai{ border-top:none; margin:20px 0; display:block; padding:0;}
.mice_nav dd ul li ol.dantai li{ display:block; text-indent: -1em;  padding:0 0 0 1.5em;}

/* ▼▼▼ #side contactBoxSide ▼▼▼ */
.contactBoxSide{clear:both; border:4px solid #cccccc; width: 277px; display: block; margin:0 auto; }
.contactBoxSide p{background-color: #FFF; padding:10px 0;}
.contactBoxSide h5{ color: #FFFFFF; background-color: #333333;	padding: 10px; margin: 0px;  text-align: center; color:#fff;font-weight:bold;}

/* ▼▼▼   #other ▼▼▼ */
.pc { display: block !important; }
.tbl { display: none !important; }
.sp { display: none !important; }
.sps { display: none !important; }

#header{
	background: #fff;

}

 
/* ------------------------------------------------------------------------------------------------------------------------
    960px〜1279px：小型PC
------------------------------------------------------------------------------------------------------------------------ */
@media screen and (min-width:960px) and (max-width:1279px) {

	/* ▼▼▼ #header ▼▼▼ */
	#header{width:100%; max-width:960px;}

	/* ▼▼▼ #gnav ▼▼▼ */
	#gnav .menu {width:98%;max-width:960px;}

		/* ▼▼▼ Drawer_Menu ▼▼▼ */
		#Drawer_Menu{ display: none !important; }

	/* ▼▼▼ #pageTop ▼▼▼ */
	#pageTop{min-width:960px;}

	/* ▼▼▼  #footer ▼▼▼ */
	#footer .footerInner{width:960px;}


	/* ▼▼▼   .topicPath ▼▼▼ */
	.topicPath{max-width:960px;}

	/* ▼▼▼  #contents ▼▼▼ */
	#contents{min-width:960px;}
	.contentsInner{max-width:960px;}

	/* ▼▼▼  #main ▼▼▼ */
	#main{ width:73%; padding:0 2% 10% 0; }

	/* ▼▼▼   #side ▼▼▼ */
	#side{ width:23%; float:right; margin:0 0 0 1%; padding:25px 0 30px 0;}

	/* ▼▼▼   #side mice_nav ▼▼▼ */
	.mice_nav{ margin:0 0 30px;}
	.mice_nav p img{ width:97%}
	.mice_nav dd ul li span{ color: #f74e0b; border: solid 3px #f74e0b; padding: 0.2em 0.5em; border-radius: 0.5em;}

	/* ▼▼▼ #side contactBoxSide ▼▼▼ */
	.contactBoxSide{width: 215px; border:2px solid #cccccc; }
	.contactBoxSide img{width: 100%;}
	.contactBoxSide p{background-color: #FFF; padding:10px 0;}

	.pc { display: block !important; }
	.tbl { display: none !important; }
	.sp { display: none !important; }
  .sps { display: none !important; }
 
}

/* ------------------------------------------------------------------------------------------------------------------------
    600px〜959px：タブレット
------------------------------------------------------------------------------------------------------------------------ */
@media screen and (min-width:600px) and (max-width:959px) {

	/* ▼▼▼ #header ▼▼▼ */
	#header{width:99%; max-height: 100px;}
	#header .logo img{width:30%; height:auto; min-width:260px;}
	#header .tel img{width:30%;height:auto; min-width:300px;}

	/* ▼▼▼ #gnav ▼▼▼ */
	#gnav .strip {height:40px;}
	#gnav a {letter-spacing:1px; width:20%; padding:2px 0px;}
	#gnav .menu {width:98%;}
	#gnav .menu a:hover::after {opacity:1; top:90%; left:20%; height:2px; width:60%; }

		/* ▼▼▼ Drawer_Menu ▼▼▼ */
		#Drawer_Menu{ display: none !important; }

	/* ▼▼▼ #pageTop ▼▼▼ */
	#pageTop{min-width:600px; }

	/* ▼▼▼  #footer ▼▼▼ */
	#footer .footerInner{width:100%;}

	/* ▼▼▼   .topicPath ▼▼▼ */
	.topicPath{min-width:600px; width:100%; padding:0 10px; }

	/* ▼▼▼  #contents ▼▼▼ */
	#contents{min-width:600px;}
	.contentsInner{max-width:959px;}

	/* ▼▼▼  #main ▼▼▼ */
	#main{ width:96%; padding:0 2% 10% 2%; }

	/* ▼▼▼   #side ▼▼▼ */
	#side{ display: none !important; width:0%; float:none; margin:0; padding:0;}

	.pc { display: none !important; }
	.tbl { display: block !important; }
	.sp { display: none !important; }
  .sps { display: none !important; }
 
}
 
/* ------------------------------------------------------------------------------------------------------------------------
    480px〜599px：SP横
------------------------------------------------------------------------------------------------------------------------ */ 
@media screen and (min-width:480px) and (max-width:599px) { 
	body{
		border-top:none;
	}

	#topimg{padding-top:65px;}

	/* ▼▼▼ #header ▼▼▼ */
	#header{width:100%; max-height: 65px; position: fixed; border-top:solid 3px #f74e0b; box-shadow: 2px 2px 4px gray; z-index:2;}
	#header .logo img{width:30%; height:auto; min-width:260px; top:5px; left: 10px;}
	#header .tel img{display: none !important;}

	/* ▼▼▼ #gnav ▼▼▼ */
	#gnav {display: none !important;}

	/* ▼▼▼ Drawer_Menu ▼▼▼ */
	#Drawer_Menu{ display: block !important; }

	/* ▼▼▼ #pageTop ▼▼▼ */
	#pageTop{min-width:480px;}

	/* ▼▼▼  #footer ▼▼▼ */
	#footer .footerInner{width:100%;  text-align:center;}
	#footer .footerInner .footLinks{ float:none;}
	#footer .footerInner .copy{ float:none; padding-right:0;}
	.footLinks { display: none !important; }

		/* ▼▼▼   .topicPath ▼▼▼ */
		.topicPath{min-width:480px; width:100%; padding:65px 10px 0 10px; }
	
		/* ▼▼▼  #contents ▼▼▼ */
		#contents{min-width:480px;}
		.contentsInner{max-width:599px;}
	
		/* ▼▼▼  #main ▼▼▼ */
		#main{ width:96%; padding:0 2% 10% 2%; }
	
		/* ▼▼▼   #side ▼▼▼ */
		#side{ display: none !important; width:0%; float:none; margin:0; padding:0;}


	.pc { display: none !important; }
	.tbl { display: none !important;  }
	.sp { display: block !important;}
    .sps { display: none !important; }
 
}

/* ------------------------------------------------------------------------------------------------------------------------
    〜479px：スマートフォン縦
------------------------------------------------------------------------------------------------------------------------*/ 
@media screen and (max-width:479px) { 

	body{
		border-top:none;
	}

	#topimg{padding-top:62px;}

	/* ▼▼▼ #header ▼▼▼ */
	#header{width:100%; max-height: 65px; position: fixed; border-top:solid 3px #f74e0b; box-shadow: 2px 2px 4px gray;z-index:2;}
	#header .logo img{width:30%; height:auto; min-width:230px; top:8px; left: 10px;}
	#header .tel img{display: none !important;}

	/* ▼▼▼ #gnav ▼▼▼ */
	#gnav {display: none !important;}

	/* ▼▼▼ Drawer_Menu ▼▼▼ */
	#Drawer_Menu{ display: block !important; }

	/* ▼▼▼ #pageTop ▼▼▼ */
	#pageTop{min-width:300px;}

	/* ▼▼▼  #footer ▼▼▼ */
	#footer .footerInner{width:300px;}

	.footLinks { display: none !important; }

			/* ▼▼▼   .topicPath ▼▼▼ */
			.topicPath{min-width:300px; width:100%; padding:65px 10px 0 10px; }
		
			/* ▼▼▼  #contents ▼▼▼ */
			#contents{min-width:300px;}
			.contentsInner{max-width:479px;}
		
			/* ▼▼▼  #main ▼▼▼ */
			#main{ width:96%; padding:0 2% 10% 2%; }
		
			/* ▼▼▼   #side ▼▼▼ */
			#side{ display: none !important; width:0%; float:none; margin:0; padding:0;}

	.pc { display: none !important; }
	.tbl { display: none !important;  }
	.sp { display: block !important; }
    .sps { display: block !important; }

}


/* ▼▼▼ side font-size/line-height ▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼ */
#side .mice_nav dt{font-size:16px; line-height: 1.5;}
#side .mice_nav dd ul li{font-size:15px; line-height: 1.8;}
#side .mice_nav dd ul li span{font-size:17px; line-height: 1.3;}
#side .mice_nav dd ul li ol li{font-size:15px; line-height: 1.3;}
#side .mice_nav dd ul li ol.dantai li{font-size:14px; line-height: 1.45;letter-spacing: -0.05em;}
#side .contactBoxSide h5{font-size:16px; line-height: 1.3;}

@media screen and (min-width:960px) and (max-width:1279px) {
	#side .mice_nav dt{ font-size:16px; line-height: 1.5;}
	#side .mice_nav dd ul li{ font-size:16px; line-height: 1.5;}
	#side .mice_nav dd ul li span{ font-size:16px; line-height: 1.3;}
	#side .mice_nav dd ul li ol li{ font-size:16px; line-height: 1.3;}
	#side .mice_nav dd ul li ol.dantai li{ font-size:14px; line-height: 1.45;}
	#side .contactBoxSide h5{font-size:13px; line-height: 1.3;}
}

/* ▲▲▲ side font-size/line-height ▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲ */

/* ▼▼▼ side_sp font-size/line-height ▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼ */
@media screen and (min-width:600px) and (max-width:959px) {
	#area_mice .ribon{ font-size:20px; line-height: 1.3;}
	#area_mice p.mice{font-size:18px; line-height: 1.3;} 
	#area_mice p.mice2{font-size:18px; line-height: 1.3;} 
	#area_mice ul li{font-size:15px; line-height: 1.45; margin-bottom: 0.75em !important;} 
	#area_mice .mice_dantai h3{ font-size:18px;  line-height: 1.3;}
}

@media screen and (min-width:480px) and (max-width:599px) { 
	#area_mice .ribon{ font-size:20px; line-height: 1.3;}
	#area_mice p.mice{font-size:15px; line-height: 1.3;} 
	#area_mice p.mice2{font-size:15px; line-height: 1.3;} 
	#area_mice ul li{font-size:15px; line-height: 1.45;margin-bottom: 0.75em !important;} 
	#area_mice .mice_dantai h3{ font-size:16px;  line-height: 1.3;}
}

@media screen and (max-width:479px) { 
	#area_mice .ribon{ font-size:17px; line-height: 1.3;}
	#area_mice p.mice{font-size:16px; line-height: 1.3;} 
	#area_mice p.mice2{font-size:16px; line-height: 1.3;} 
	#area_mice ul li{font-size:14px; line-height: 1.45;margin-bottom: 0.75em !important;} 
	#area_mice .mice_dantai h3{ font-size:16px;  line-height: 1.3;}
}
/* ▲▲▲ side_sp font-size/line-height ▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲ */