@charset "UTF-8";
@media (max-width : 767px ){

	/*-----------------------------------------------------
	sub
	-------------------------------------------------------*/
	.sub_box{
		width: 100%;
	}

	.sub_boxin{
		width: auto;
		margin: 0 auto;
		padding: 26px 30px 26px 30px;
		box-sizing: border-box;
		text-align: left;
	}

	.sub_box2{
		width: auto;
		margin: -30px auto 0;
		padding: 60px 0 40px 0;
		box-sizing: border-box;
		text-align: left;
		background: #fff;
	}

	.sub_box2in{
		width: 80%;
		margin: 0 auto;
		text-align: left;
	}

	.sub_box2in p{
		line-height: 1.8;
	}

	.sub_box .button1{
		width: 90%;
		margin: 36px auto 0;
	}

	/*-----------------------------------------------------
	works archive
	-------------------------------------------------------*/
	.works_box{
		padding: 20px 0 0 0;
	}

	.works_box ul{
		width: 90%;
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		-ms-flex-direction: column;
		flex-direction: column;
		margin: 0 auto;
	}

	.works_box ul li{
		width: 100%;
	}


	.works_box ul li .img{
		width: 100%;
		height: 200px;
	}

	.works_box ul li .txt{
		padding: 6px 0 0 0;
	}

	.works_box ul li .cat{
		display: block;
		padding: 16px 0 0 0;
	}

	.works_box ul li span.cat1{
		font-size: 12px;
		padding: 6px 10px;
	}
	
	/*-----------------------------------------------------
	works single
	-------------------------------------------------------*/
	.works_box2{
        margin: -20px auto 0;
        padding: 40px 0 40px 0;
	}

	.works_box2 span.img img{
		margin: 0 0 10px;
	}

	.works_box2 span.t{
		font-size: 18px;
        font-weight: bold;
        line-height: 1.5;
        display: block;
        margin: 0 0 16px;
	}

	.work_editor{
		display:-webkit-box;
		display: -webkit-flex;
		display:-ms-flexbox;
		display:flex;
	}

	.work_editor{
		display:-webkit-box;
		display: -webkit-flex;
		display:-ms-flexbox;
		display:flex;
		-webkit-box-pack: start;
		-ms-flex-pack: start;
		justify-content: flex-start;
		-ms-flex-wrap: wrap;
		flex-wrap: wrap;
		gap: 2px 1.33333%;
		margin: 0 0 20px;
	}

	.work_editor p{
		width: 24%;
		height: 46px;
	}

	
	
	/*-----------------------------------------------------
	price
	-------------------------------------------------------*/
	.price_box{
		width: auto;
		margin: -30px auto 0;
		padding: 60px 0 40px 0;
		box-sizing: border-box;
		text-align: left;
		background: #fff;
	}

	.price_boxin{
		width: 80%;
		margin: 0 auto;
		text-align: left;
	}

	.price_box h3{
		display: block;
		font-size: 18px;
		margin: 0 0 26px;
		position: relative;
		font-family: source-han-sans-japanese,sans-serif;
		font-weight: 700;
		font-style: normal;
	}

	.price_box h3::after {
		content: '';
		position: absolute;
		width: 80px;
		height: 1px;
		top: 50%;
		bottom: 50%;
		left: -100px;
		background: #333;
		z-index: 1;
		margin: 1px 0 0 0;
	}

	ul.price_col{
		display: block;
		-webkit-box-pack: justify;
		-ms-flex-pack: justify;
		justify-content: space-between;
		margin: 0 0 10px;
	}

	ul.price_col li{
		width: 80%;
		margin: 0 auto;
	}

	ul.price_col li img{
		width: 100%;
		margin: 0 0 10px;
	}

	.price_box span.tc{
		display: inline-block;
		margin: 0 0 20px;
		background: #f7d74f;
		padding: 10px 26px;
		font-size: 15px;
		font-weight: bold;
	}

	.price_box span.txt{
		line-height: 1.8;
		display: block;
		margin: 0 0 26px;
	}

	.price_box span.txt2{
		line-height: 1.8;
		display: block;
		margin: 0 0 26px;
	}

	.price_box .tb table{
		width: 100%;
		border-collapse:  collapse;
		margin: 0 0 26px;
	}

	.price_box .tb table th{
		display: block;
		border: 1px solid #ccc;
		padding: 12px 16px;
		font-size: 14px;
		font-weight: bold;
		width: 100%;
		line-height: 1.3;
		box-sizing: border-box;
		background: #fafafa;
	}

	.price_box .tb table td{
		display: block;
		border: 1px solid #ccc;
		padding: 12px 16px;
		font-size: 14px;
		font-weight: bold;
		width: 100%;
		line-height: 1.3;
		box-sizing: border-box;
	}

	ul.price_col2{
		display: flex;
		-webkit-box-pack: justify;
		-ms-flex-pack: justify;
		justify-content: space-between;
		-webkit-flex-wrap: wrap;
		-ms-flex-wrap: wrap;
		flex-wrap: wrap;
		margin: 0 0 0;
	}

	ul.price_col2 li{
		width: 48%;
		margin: 0 0 10px;
	}

	ul.price_col2::after{
		width: 23%;
		content: "";
		display: block;
	}

	ul.price_col2 li img{
		width: 100%;
	}

	ul.price_col2 li span.t{
		line-height: 1.5;
		display: block;
		text-align: center;
		font-size: 14px;
		padding: 6px 0 0 0;
	}
	/*-----------------------------------------------------
	flow
	-------------------------------------------------------*/

	.flow_box{
		width: 100%;
	}


	.flow_box ul li{
		background: #fff;
		padding: 0 0px 30px 0px;
		display: block;
		-webkit-box-pack: justify;
		-ms-flex-pack: justify;
		justify-content: space-between;
		-webkit-flex-wrap: wrap;
		-ms-flex-wrap: wrap;
		flex-wrap: wrap;
		position: relative;
	}
	
	.flow_box ul li::before{
		content: "";
		display: block;
		position: absolute;
		width: 1px;
		height: 90%;
		background: #f4ba00;
		top: 0px;
		left: -15px;
		z-index: 2;
	}


	.flow_box ul li div.l{
		width: 100%;
		overflow: hidden;
		text-align: left;
	}

	.flow_box ul li div.m{
		width: 100%;
		height: 100%;
	}

	.flow_box ul li div.r{
		width: 100%;
		height: 100%;
		text-align: center;
	}

	.flow_box ul li div.l span.step{
		font-size: 15px;
		display: inline-block;
		color: #f4ba00;
		margin: 0 0 10px;
		font-family: din-2014, sans-serif;
		font-weight: 700;
		font-style: normal;
		text-align: center;
		position: relative;
		z-index: 1;
	}

	.flow_box ul li div.l span.nb{
		display: inline-block;
		font-weight: bold;
		font-size: 30px;
		padding: 0px 0 0 6px;
		line-height: 1.0;
	}


	.flow_box ul li div.l span.step::before{
		content: "";
		display: block;
		position: absolute;
		width: 1px;
		height: 300px;
		background: #f4ba00;
		top: 0px;
		left: -12px;
		z-index: 2;
	}

	.flow_box ul li div.m span.t{
		font-weight: bold;
		display: block;
		line-height: 1.3;
		margin: 0 0 10px;
	}

	.flow_box ul li div.m span.txt{
		line-height: 1.8;
		margin: 0 0 16px;
		display: block;
	}

	.flow_box ul li div.r span.img{
		width: 80%;
		margin: 0 auto;
		display: block;
	}

	.flow_box ul li div.r span.img img{
		width: 100%;
		display: block;
	}
		
    /*-----------------------------------------------------
    news
    -------------------------------------------------------*/
    .news_box{
        padding: 20px 0 0 0;
    }

    .news_box ul{
		width: 100%;
		display: -webkit-box;
		display: -ms-flexbox;
		display: block;
		-webkit-box-pack: justify;
		-ms-flex-pack: justify;
		justify-content: space-between;
		-webkit-flex-wrap: wrap;
		-ms-flex-wrap: wrap;
		flex-wrap: wrap;
		margin: 0 0 10px;
    }

    .news_box ul li{
        width: 100%;
        box-sizing: border-box;
        margin: 0 0 16px;
    }

    .news_box ul li a{
        display: block;
    }

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

    .news_box ul li dl{
        display: table;
    }

    .news_box ul li dl dt{
        display: table-cell;
    }

    .news_box ul li dl dt span{
        display: block;
        width: 100px;
        height: 65px;
        overflow: hidden;
    }

    .news_box ul li dl dt img{
        width: 100%;
    }

    .news_box ul li dl dd{
        display: table-cell;
        vertical-align: top;
        padding: 0 0 0 16px;
        box-sizing: border-box;
    }

    .news_box ul li dl dd span.t{
        font-weight: bold;
        line-height: 1.5;
        font-size: 13px;
    }

    .news_box ul li dl dd span.time{
        font-size: 11px;
        display: block;
        margin: 0 0 6px;
    }
    
    /*-----------------------------------------------------
    news single
    -------------------------------------------------------*/
    .news_box2{
        width: auto;
        margin: -20px auto 0;
        padding: 60px 0 40px 0;
        box-sizing: border-box;
        text-align: left;
        background: #fff;
    }

    .news_box2in{
        width: 80%;
        margin: 0 auto;
        text-align: left;
    }

    .news_box2 span.time{
        text-align: right;
        display: block;
        margin: 0 0 16px;
        font-size: 12px;
    }
    .news_box2 span.t{
        font-size: 18px;
        font-weight: bold;
        line-height: 1.5;
        display: block;
        margin: 0 0 16px;
    }

    .news_box2 span.txt{
        line-height: 1.8;
    }

    .news_box2 span.img{
        display: block;
        padding: 0 0 16px 0;
		text-align: center;
    } 
	
    .news_box2 span.img img{
        max-width: 100%;
        margin: 0 auto;
    } 
	
    .news_box2 span.txt img{
        max-width: 100%;
        margin: 0 auto;
        display: block;
        padding: 16px 0;
    } 
    

	
	/*-----------------------------------------------------
	company
	-------------------------------------------------------*/
	.company_box{
		width: 100%;
	}

	.company_boxin{
		width: auto;
		margin: 0 auto;
		padding: 26px 30px 26px 30px;
		box-sizing: border-box;
		text-align: left;
	}

	.company_box2{
		width: auto;
		margin: -30px auto 0;
		padding: 50px 0 30px 0;
		box-sizing: border-box;
		text-align: left;
		background: #fff;
	}

	.company_box dl{
		width: 85%;
		margin: 0 auto;
		border-bottom: 1px solid #ddd;
		display: table;
		text-align: left;
		font-size: 14px;
	}

	.company_box dl dt{
		width: 30%;
		display: table-cell;
		padding: 20px 0;
		font-weight: bold;
		vertical-align: middle;
	}

	.company_box dl dd{
		width: 70%;
		display: table-cell;
		padding: 20px 0;
		vertical-align: middle;
		line-height: 1.8;
	}
	
	/*-----------------------------------------------------
	recruit
	-------------------------------------------------------*/
	.recruit_box{
		width: 100%;
		background: #f5f5f5;
	}

	.recruit_box_in{
		width: auto;
		margin: 0 auto;
		padding: 50px 46px 50px 46px;
		box-sizing: border-box;
		text-align: center;
	}

	.recruit_box p{
		font-size: 18px;
		font-family: source-han-serif-japanese, serif;
		font-weight: 600;
		position: relative;
		line-height: 1.5;
	}

	.recruit_box p::before{
		content: "";
		width: 1px;
		height: 50px;
		position: absolute;
		background: #222;
		top: 70px;
		left: 0;
		right: 0;
		margin: 0 auto;
		z-index: 1;
	}

	.recruit_box2{
		width: 100%;
		background: #f5f5f5;
		padding: 0 16px 36px 16px;
		box-sizing: border-box;
	}

	.recruit_box2_in{
		width: auto;
		margin: 0 auto;
		padding: 36px 26px 16px;    
		box-sizing: border-box;
		text-align: left;
		background: #fff;
	}

	.recruit_box2 h2{
		font-size: 16px;
		letter-spacing: 2px;
		margin: 0 0 36px;
		text-align: center;
	}

	.recruit_box2 span.txt{
		text-align: left;
		display: inline-block;
		font-weight: bold;
		line-height: 1.5;
		margin: 0 0 16px;
		position: relative;
		z-index: 2;
	}

	.recruit_box2 span.txt::before{
		content: "";
		width: 100%;
		height: auto;
		position: absolute;
		background: #f5f5f5;
		top: 8px;
		bottom: 0;
		left: 0px;
		margin: 0 auto;
		z-index: -1;
	}


	.recruit_box2 dl{
		width: 100%;
		border-bottom: 1px solid #eeeeee;
		display: block;
		text-align: left;
	}

	.recruit_box2 dl:last-child{
		border-bottom: 0px;
	}

	.recruit_box2 dl dt{
		width: 100%;
		display: block;
		padding: 16px 16px 6px 0;
		font-weight: bold;
		vertical-align: middle;
		line-height: 1.8;
		box-sizing: border-box;
	}

	.recruit_box2 dl dd{
		width: 100%;
		display: table-cell;
		padding: 0 0 16px;
		vertical-align: middle;
		line-height: 1.8;
		box-sizing: border-box;
	}
	
	/*-----------------------------------------------------
	contact
	-------------------------------------------------------*/

	.contact_box{
	}

	.contact_box_in{
		width: auto;
		margin: 0 16px;
		padding: 50px 0 50px 0;
		box-sizing: border-box;
		text-align: left;
	}

	.contact_box span.txt{
		display: block;
		margin: 0 0 16px;
		line-height: 1.8;
		text-align: left;
	}

	.contact_tb{
		width: auto;
		box-sizing: border-box;
		background: #fff;
		padding: 0px 0px 0px 0px;
		border-collapse:0;
		border-spacing:0;
	}

	.contact_tb td{
		line-height: 1.5;
		border-bottom: 0px;
		display: block;
	}

	.contact_tb td.tdl{
		width: 100%;
		padding: 16px 16px 12px 0;
		background: #fff;
		box-sizing: border-box;
	}

	.contact_tb td.tdr{
		width: 100%;
		padding: 0px 0px 16px 0px;
		background: #fff;
		box-sizing: border-box;
		border-bottom: 1px solid #eaeaea;
	}

	.contact_tb td span.hissu{
		display: inline-block;
		margin: 0 0 0 8px;
		background: #e8a02b;
		padding: 2px 6px;
		font-size: 11px;
		color: #FFF;
		line-height: 1.0;
		border-radius: 3px;
	}

	.contact_tb td input[type=text],[type=email],[type=tel]{
		background-color: #FFF;
		border:1px solid #ccc;
		padding:7px 10px;
		color: #333;
		width: 70%;
		font-size: 13px;
	}

	.contact_tb td label{
		display: inline-block;
		margin: 0 10px 0 0;
	}

	.contact_tbtd input[type=radio]{
		display: inline-block;
		position: relative;
		top: 2px;
	}

	.contact_tb td input[type=file]{
		display: block;
		margin: 0 0 10px;
	}

	.contact_tb td textarea{
		background-color: #FFF;
		border:1px solid #ccc;
		padding:12px 10px;
		color: #444;
		line-height: 1.5;
		width: 90%;
		font-size: 14px;
	}

	.contact_bt{
		width: 100%;
		box-sizing: border-box;
		background: #fff;
		padding: 30px 0px 0 0px;
		border-collapse:0;
		border-spacing:0;
	}
	
	.contact_box table.contact_bt td{
		text-align: center;
	}

	.contact_box table.contact_bt td input.submit{
		padding: 18px 26px;
		font-weight: bold;
		cursor: pointer;
		border-style: none;
		border-radius: 4px;
		font-weight: bold;
		line-height: 1.0;
		text-align: center;
		color: #222;
		background: #f7d74f;
		font-size: 14px;
		margin: 0 10px;
	}

	.contact_box table td input.submit:hover{
		text-decoration: none;
		background: #f3cf39;
	}

    
	
	
    /*-----------------------------------------------------
    single
    -------------------------------------------------------*/
    .single_box1{
        width: 100%;
        background: #f5f5f5;
    }

    .single_box1_in{
        width: auto;
        margin: 0 auto;
        padding: 50px 26px 50px 26px;
        box-sizing: border-box;
        text-align: left;
    }

    .single_box1 p{
        line-height: 2.0;
    }

    .single_box1 p a{
        
    }

	/*-----------------------------------------------------
	breadcrumb
	-------------------------------------------------------*/

	#breadcrumb{
		overflow-x: scroll;
		overflow-y: hidden;
		white-space: nowrap;
		padding: 140px 10px 0 10px;
	}

	#breadcrumb li{
		display: inline;
		font-size: 11px;
		vertical-align: middle;
		line-height: 1.5;
	}
    
	/*-----------------------------------------------------
	single_pager
	-------------------------------------------------------*/
	.single_pager{
		max-width: auto;
		margin: 30px auto 0;
	}

	.single_pager ul{
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		-ms-flex-direction: column;
		flex-direction: column;
		gap: 20px;
	}

	.single_pager ul li{
		width: 100%;
	}


	.single_pager ul li:nth-child(2){
		display: none;
	}

	.single_pager ul li:nth-child(3){
		text-align: left;
	}

	.single_pager ul li span.label{
		display: block;
		font-weight: bold;
	}

	.single_pager ul li span.title{
		font-size: 15px;
	}


	.single_pager ul li img{
		width: 100%;
	}

	
	
	/*-----------------------------------------------------
	pagenation
	-------------------------------------------------------*/
	
	.pagenation{
		width: 90%;
		text-align: center;
		padding-top: 20px;
		margin: 0 auto;
        font-size: 13px;
	}

	a.page-numbers,
	.pagination .current{
	    color: #333;
		text-align: center;
		line-height: 1;
		margin: 2px 2px 6px 0;
		padding: 8px 8px;
		display: inline-block;
		background: #fff;
		border: 1px solid #ccc;
		text-decoration: none;
	}

	.current {
		color: #fff;
		background: #333;
		text-align: center;
		line-height: 1;
		margin: 2px 3px 6px 0;
		padding: 8px 9px;
		display: inline-block;
		text-decoration: none;
	}
	
	a.page-numbers:hover,
	.pagination a:hover .current a:hover {
		color: #fff;
		background: #333;
		border: 1px solid #333;
		text-decoration: none;
	}
    
}