@charset "UTF-8";
/*------------------------------------------------------------------------------*/
/*############　PC系　##############################################*/
/*------------------------------------------------------------------------------*/
/************************
画面の横幅が769px以上（PC用）
************************/
@media print, screen and (min-width: 769px){
	.menu {
	    min-width: 15%;
	}
	.rec_footer_in{
		width: 100%;
	}

	.contact {

	}
    .footer-nav{
        margin-top: 4rem;
    }
    .footer-nav .footer-list li{
        display: inline-block;
        color: #a39585;
        padding: 0 10px;
    }
    
    .footer-nav .footer-list li a,
    .footer-nav .footer-list li a:hover,
    .footer-nav .footer-list li a:active{
        color: #a39585;
        
    }
}

/*------------------------------------------------------------------------------*/
/*############　タブレット系　##############################################*/
/*------------------------------------------------------------------------------*/
/************************
画面の横幅がpxまで（タブレット用）
************************/
@media screen and (min-width: 641px) and (max-width: 768px){
	/*############　biew　############*/
	.br-sp{ display:none; }
	.br-tb{ display:inline-block; }
	.br-pc{ display:none; }

	.tbmaxw40p{ max-width:40%;}
	.back_q{
		font-size:150%;
		width: 100%;
    max-width: 100%;
	}
	.stripe01_670,.stripe02_670{font-size:130%;max-width:90%;width:800px;word-break:normal !important;}
	.stripe01_670 p{word-break:normal !important;}

	/*############　header　############*/

	#header_l h1 {
		max-height:80px;
	}
	.head_logo_page{
		background-image:url(./img/func/logo.png);
		padding-left:25%;
		-moz-background-size:auto 25% ;
		background-size:auto 40% ;
	}
	.head_logo_top{
		background-image:url(./img/func/logo.png);
		-moz-background-size:auto 65% ;
		background-size:auto 65% ;

	}
	#container {
		top: 0;
		width: 82%;
		z-index: 1;
		margin-top: 60px;
	}
	/*############　menu　############*/
	#pageNav{
		width:17%;
	}
	#gmenu .menu{
		width:100%;
	}
	#gmenu .menu li{
		width:100%;
		height:40px;
		display:inline-block;
		font-weight:bold;
		font-size:108%;
	}
	#gmenu .menu  > li a{
		padding: 10px 10px 10px 0px;
	}
	.contents{
	}
	#modal-wrapper a{
		cursor: pointer
	}
    .footer-nav{
        margin-top: 2rem;
    }

}

/*------------------------------------------------------------------------------*/
/*############　スマホ系　##############################################*/
/*------------------------------------------------------------------------------*/
/************************
画面の横幅が640pxまで（スマホ用）
************************/
@media screen and (max-width: 640px){
	body {
	  text-align: center;
	  margin: auto;
	  background-color: #fff;
	    position: inherit;
	    overflow: auto;
	    visibility: inherit;
	    padding:0px !important;
	}
	#wrapper{float:none;display:block;width:100%;}
	#leftmain{float:none; overflow: hidden ;display:block;}
	#rightmenu{
		float:none;
		margin-top:40px;
		max-width:100%;
		height:auto;
		text-align:center;
	}
	#wrap img{height:auto;}
	#left_menu{display:none;overflow: hidden ;}
	#main{float:none;width:100%;display:block;margin:0 auto;}

	body{padding: 0px 10px;}
	.sp_img{
		max-width:100%;
		height:auto;
		margin-right:0px;
		margin-left:0px;
	}
	#logo img{
		max-width:100%;
	}
	.float_l{float:none;display:block;}
	.float_r{float:none;display:block;}

	.margin_t25{margin-top:0px;}

	.sp_marginb10{margin-bottom:10px;}
	.sp_disp-inb{display:inline-block;vertical-align:top;align-content:flex-end;}
	.sp_disp-inl{display:inline;vertical-align:top;}
	.sp_disp-cel{display:table-cell;vertical-align:top;}

	.sp_50_cont{
		margin-bottom:10px;
		display:inline-block;
		width:48%;
	}
	.sp_100_cont{
		margin-bottom:10px;
		display:inline-block;
		width:100%;
	}
	.sp_50_cont img{
		width:98%;
	}
	.sp_100_cont img{
		width:98%;
	}
	#page-top {
		line-height:100%;
	}

	#page-top a {
		width: 70px;
		padding: 25px 0;
		border-radius: 36px;
	}

	.br-pc{ display:none; }
	.br-tb{ display:none; }
	.br-sp{ display:inline-block; }

	.secondcell{
		border-top: 1px solid #999;
	}
	.contents .content_main_one_column .w90{
		text-align:left;
	}
	ul{margin:0px; padding:0px;}

	.dis_inl{display:block;}
	.dis_inb{display:block;}

	.sp_disp-inb{display:inline-block;vertical-align:top;align-content:flex-end;}
	.sp_disp-inl{display:inline;vertical-align:top;}
	.sp_disp-cel{display:table-cell;vertical-align:top;}

	.imgw50max550{ max-width:550px;width:100%;}
	.w40{width:100%;}
	.imgw90{ width:100%;}
	.imgw80{ width:100%;}
	.imgw60{ width:100%;}
    
    
    .footer-nav{
        margin-top: 2rem;
    }
    .footer-nav .footer-list li{
        display: inline-block;
        color: #a39585;
        padding: 0 10px;
    }

	/*############　content　############*/

	.contents{
	  margin: 0%;
	  width: 100%;
	  float:none;
	}
	.left_menu{
	  display:none;
	}
	.contents .block_cont{
	  display:block;
	  width:100%;
	  padding:50px 30px 30px 30px;
	}
	.contents .content_left {
	  display:inline-block;
	  width: 44%;
	  text-align:left;
	  vertical-align:top;
	}
	.contents .content_left2 {
	  display:inline-block;
	  width: 30%;
	  text-align:left;
	  vertical-align:top;
	}
	.contents .content_right2 {
	  display:inline-block;
	  width: 62%;
	  text-align:left;
	  padding-left:3%;
	  vertical-align:top;
	}
	.contents .content_right2 p{
	  margin-top:5%;
	}

	.contents .content_left3 {
	  display:inline-block;
	  width: 40%;
	  text-align:left;
	  vertical-align:top;
	}
	.contents .content_right3 {
	  display:inline-block;
	  width: 50%;
	  text-align:left;
	  padding-left:3%;
	  vertical-align:top;
	}
	.contents .content_right3 p{
	  margin:3% 0%;
	}

	.contents .content_right3 p:first-child{
	  margin-top:0%;
	}






	.contents .content_main {
	  padding-bottom:20px;
	}
	.cont{
		padding: 0px 0px;
	}
	.banners .saiyo {
		display:inline-block;
		margin-right:5px;
		width:75%;
	}
	.b_banner{
		display:inline-block;
		 width:90%;
	}
	.banners li img:first-child{
		 width:90%;
	}
	.blank_ico{
		background-position:90% 90%;
		bottom: 5px;
		right: 25px;
		width: 15px;
		height: 10px;
		background-color: white;
	}
	.pickup_content_box.blank img{
		width:90%;
	}

	/*############　table　############*/
	.tbl { width:90%;border-top:none;}
	.tbl th , .tbl td{
		width:100%;
		text-align: left;
		display: block;
		float:left;/*IE9対策*/
	}
	.tbl th{
		width:100% !important;
		display: block;
		float:left;/*IE9対策*/
		border-top: none;
		border-bottom: none;
	}
	tbody {
		display:block;
	}
	.tbl td{
		width:100%;
		display: block;
		float:left;/*IE9対策*/
		text-align: left;
	}
	.tbl th {
		width:100% !important;
		display: block;
		float:left;/*IE9対策*/
		border-top: none;
		border-bottom: none;
	}

	.tbl2 { border-left: 1px solid #ccc; width:100%;}
	.tbl2 th , .tbl2 td{
		text-align: left;
		display: block;
		float:left;/*IE9対策*/
	}
	.tbl2 th{
		display: block;
		width:90%;
	}

	.tbl3 {
		display: block;
		margin: 0px 0px;
		border-left: 1px solid #ccc;
		width:100%;
	}
	.tbl3 thead{
		display: block;
float:left;
		width: 25%\9;/*IE9対策*/

	}
	.tbl3 tbody{
		display: block;
		width: auto;
		overflow-x: auto;
		white-space: nowrap;
float:left\9;/*IE9対策*/
		width: 75%\9;/*IE9対策*/
	}
	.tbl3 th{
		display: block;
		float:left\9;/*IE9対策*/
		width:auto;
		width:100%\9;/*IE9対策*/
	}
	.tbl3 tbody tr{
		display: inline-block;
		margin: 0 -3px;
	}
	.tbl3 td{
		border-top: 1px solid #fff;
		display: block;
		float:left\9;/*IE9対策*/
		width:80%\9;/*IE9対策*/
	}

	.all_table{
		display: block;
		overflow-x: auto;
	}

	.all_table th, .all_table td{
		width: 100%;
		white-space: nowrap;
	}
	/* スクロールバー全体 */
		.all_table::-webkit-scrollbar{
		height: 10px;
		height: 1rem;
		background-color: #F1F1F1;
	}

	/* スクロールバーのつまみ(可動部分) */
	.all_table::-webkit-scrollbar-thumb{
		background-color: #BCBCBC;
		border-radius: 12px;
		border-radius: 1.2rem;
	}
	.all_table::-webkit-scrollbar-thumb:hover{
		background-color: #A9A9AA;
	}
	/*############　form　############*/
	input[type=text]  , input[type=email]  , textarea{
		max-width: 280px;
		box-sizing: border-box;
	}
	input[type=submit] {
		margin-left: 10px;
	}
	.sp_img img , .sp_img{
		width:100%;
	}
	.sp_block{display:block;}
	.main_img{
		margin:20px auto;
	}
	.main_img img{
		width:100%;
	}

	/*############　slide　############*/
	.slide-back{
		width:100%;
		height:auto;
	}
	/*############　カラム　############*/
	.contents {
		width: 100%;
	}
	.contents .content_main {
		float: none;
		width: 100%;
		display:block;
	}
	.contents .content_right {
		float: none;
		width: 100%;
		display:block;
	}
	.main_ph img{
		width:100%;
	}

	/*############　見出し　############*/
	.contents .content_main h2,
	.contents .content_main h3,
	.page2nd h2{
		margin:10px 0px 10px 0px !important;
		font-size:140%;
	}
	.contents .block_cont{
	  padding:0px 0px 0px 0px;
	}

	/*------------------------------------------------------------------------------*/
	/*　スマホ用メニュー */
	/*------------------------------------------------------------------------------*/
	#sp-head{
		width:100%;
		background-color:#E95504;
		right: 0;
		position: fixed;

	}
	.drawer-nav{
		padding-top:20px;
	}
	#wrapper .t_clear{
		text-align:left;
		text-justify:auto;
	}
	.drawer-nav .drawer-menu li{
		margin:0px 0px 0px 3px;
		padding:1px 10px;
		text-align:left;
		width:90%;
	}
	.drawer-nav .drawer-menu li a{
		border-bottom:1px solid gray;
		padding: 6px 0px;

	}
	.drawer-nav .drawer-menu li ul li{
		width:90%;
		margin:0px 10px 0px 3px;
		padding:1px 6px;
		text-align:left;
	}
	.drawer-menu-item{
		width:90%;
	}
	.drawer-hamburger{
		background-color: #1B7ECC;
	}
	.head_logo_page{
		height: 60px;
	}
	.sp_logo{
		position: fixed;
		z-index: 2;
		top: 0;
		right:0px;
		display: block;
		box-sizing: content-box;
		width: 2rem;
		padding: 0;
		width: 100%;
	}
	.sp_logo h1 img{
		width:70%;
		margin-left:10px;
	}
	.sp_back{
		width:100%;
		background-color:#fff;
		right: 0;
		top:0;
		position: fixed;
		height:65px;
    z-index: 5;
	}
	header{
		width:100%;
		height:0px;
	}
	.drawer-nav{
		padding-top:20px;
box-shadow: 0 7px 4px -5px #dadada inset;
z-index:5 !important;
	}
	#wrapper .t_clear{
		text-align:left;
		text-justify:auto;
	}
	.drawer-nav .drawer-menu li{
		margin:0px 0px 0px 3px;
		padding:1px 10px;
		text-align:left;
		width:90%;
	}
	.drawer-nav .drawer-menu li a{
		border-bottom:1px solid gray;
		padding: 6px;

	}
	.drawer-nav .drawer-menu li ul li{
		width:90%;
		margin:0px 10px 0px 0px;
		padding:1px 10px;
		text-align:left;
	}
	.drawer-menu-item{
		width:90%;
	}
	.drawer-hamburger{
		background-color: #1B7ECC;
	}
	#sp-head span{
		font-size:85%;
	}
	/*=============================================
	 * footer
	 =============================================*/
	.footer_in{
		width:100% !important;
		margin:2% !important;
	}
	.footer_in .copy {
		display:block;
		font-size:s;
	}
	#page-top {
	    bottom: 115px;
	    right: 10px;
	    font-size: 77%;
	}
	#page-top a {
	    padding: 15px 0;
	    border-radius: 5px;
	}
	/*=============================================
	 * top
	 =============================================*/
	.slider-pro ul{
		width:100%;
	}
	.top .w50{width:100%;}
	.top .sp_contnts{
		display:block;
		float:none;
		margin-bottom:10px;
	}
	.top .sp_contnts img{
		width:100%;
	}
	/*=============================================
	 * parara
	 =============================================*/
	#container {
		top: 0;
		width: 100%;
		z-index: 1;
		margin-top: 0px;
		position:inherit;
		background-color:#E95504;
	}
	/*ChromeとOperaのみだけに適用されるCSSハック*/
		_::content, _:future, #container:not(*:root) {
		margin-top: 20px;
	}
	/* .stageBase---------------------- */
	.stageBase {
		width: 90%;
		position: relative;
		overflow: inherit;
		text-align:left;
		padding:0% 5%;

	}
	.stageBase .fieldWrap {
		text-align: left;
	}
	#stage1,#stage2,#stage3,#stage4,#stage5,#stage6,#stage7{
		background-color:#E95504;
		background-image:none;
		padding-top: 85px;
		padding-bottom: 50px;
	}

	#sp_top{
		font-size:6vh;
		margin:2% 0% 0% 2%;
		color:#fff;
		line-height:130%;
		text-shadow: -2px 4px 0 rgba(0,0,0,0.2);
	}
	#stage1 h1{
		margin: 10px 0 0 10px !important;
	}
	#pageNav{
		position:fixed;
		bottom:0px;
		width:14%;
		max-width: 250px;
	}
	.content_2nd .stageBase{
		/*padding:10px;*/
		overflow:auto;
	}
	/*=============================================
	 * 見出し
	 =============================================*/


	/*------------------------------------------------------------------------------*/
	/*　各ページ　*/
	/*------------------------------------------------------------------------------*/
 	/*############　banner　############*/
	/*############　アイキャッチ　############*/
	.responsive-thumbnail img{
		width:auto;
		height:auto;
		max-width:100%;
		max-height:100%;
	}
	/*############　ぱんくず　############*/
	#breadcrumb_list{
		width:100%;
		margin-top:15px;
	}
	/*############　page　############*/
	.news_in{
		margin:10px 0px 20px 0px;
	}
	.contents .content_center .w22{
		  display:inline-block;
		  width: 47%;
	}
	/*############　slide　############*/
	.stageSlide{
		position: relative;
		overflow: auto;
		visibility: visible;
	}

	/*############　contents　############*/
	.contents .content_right28 {
		display:block;
		width: 100%;
		margin-top:30px;
	}
	.contents .content_right49 {
		display:block;
		width: 100%;
	}
	.contents .content_left49 {
		display:block;
		width: 100%;
	}
	.contents .content_left2 {
		display:block;
		width: 100%;
	}
	.contents .content_right2 {
		display:block;
		width: 100%;
	}
	/*############　qa　############*/
	.faq , .news{
		width:100%;
	}
	/*------------------------------------------------------------------------------*/
	/*　hidden系最後に読み込ませたい　*/
	/*------------------------------------------------------------------------------*/
	.pc_hidden{overflow: hidden ;display:block;}
		.pc_hidden img{display:block;overflow: hidden ; }
	.sp_hidden{display:none;overflow: hidden ; margin:0px !important;height:1px;}
		.sp_hidden img{display:none;overflow: hidden ; margin:0px !important;height:1px;}
}