@charset "UTF-8";

@media (max-width : 1175px ){

/*-----------------------------------------------------
sub
-------------------------------------------------------*/    
    
    .sub_t{
        font-size: var(--sub-size-m);
    }
    

/*-----------------------------------------------------
product
-------------------------------------------------------*/
    .product_t h3{
        font-size: var(--sub-size-l);
    }
    
    .product_t h4{
        font-size: var(--sub-size-m);
        margin-bottom: 12px;
    }
    
    .g_btn.sub_case{
        margin-top: 42px;
    }

    

/*-----------------------------------------------------
case archive
-------------------------------------------------------*/
    .case_wrap a{
        width: calc(33.33333% - 26px * 2 / 3);
    }

/*-----------------------------------------------------
case single
-------------------------------------------------------*/
	
	.case_box{
		padding: 30px 0 40px;
	}
	
    .case_s_detail {
        margin-bottom: 80px;
    }

/*-----------------------------------------------------
company
-------------------------------------------------------*/


/*-----------------------------------------------------
news single
-------------------------------------------------------*/
    .news_s_t{
        font-size: var(--sub-size-l);
    }

/*-----------------------------------------------------
contact
-------------------------------------------------------*/
    .contact_box tr{
        -webkit-flex-direction: column;
        -moz-flex-direction: column;
        -ms-flex-direction: column;
        -o-flex-direction: column;
        flex-direction: column;
    }
    
    .contact_box tr+tr {
        margin-top: 36px;
    }
    
    .contact_box tr td{
        width: 100% !important;
    }
    
    .contact_box td.tdl{
        margin-bottom: 16px;
    }    
        
}



@media (max-width : 767px ){
	/*-----------------------------------------------------
	sub
	-------------------------------------------------------*/
	
	#sub_content{
		padding: 30px 0 40px 0;
	}
    
	/*-----------------------------------------------------
	global_sub
	-------------------------------------------------------*/

	.g_sub_t1 h2{
		font-size: var(--s32);
		line-height: var(--lh14);
		font-weight: bold;
	}

	.g_sub_t1 h2 span.s1{
		font-size: var(--s26);
		color: var(--blue);
	}

	.g_sub_t2 h2{
		font-size: var(--s28);
		line-height: var(--lh14);
		font-weight: bold;
		padding-left: 20px;
	}

	.g_sub_t2::before {
		position: absolute;
		content: "";
		top: 50%;
		left: 0;
		-webkit-transform: translateY(-50%);
		transform: translateY(-50%);
		width: 5px;
		height: 60%;
		border-radius: 10px;
	}

	.g_sub_text{
		padding: 12px 0 20px;
	}

	/*-----------------------------------------------------
	sub_table
	-------------------------------------------------------*/

	.sub_table{
		padding: 26px 0 0 0;
	}

	.sub_table dl{
		padding: 16px 0px;
	}
	
	.sub_table dl dt{
		padding-left: 0px;
		width: 25%;
	}

	.sub_table dl dd{
		padding-left: 20px;
		width: 75%;
	}

	/*-----------------------------------------------------
	area_archive
	-------------------------------------------------------*/
	.area_arc_box{
		padding: 26px 0 0 0;
	}

	.area_arc_t a{
		line-height: var(--lh14);
		margin-bottom: 20px;
	}

	.area_arc_box .wrap{
		padding: 26px;
		margin-bottom: 30px;
	}

	.area_arc_address{
		padding: 16px 26px;
		margin-bottom: 16px;
	}
	.area_arc_box ul{
		14px 10px;
	}

	/*-----------------------------------------------------
	area
	-------------------------------------------------------*/
	.area_main{
		padding: 30px 0 0 0;
	}

	.area_main_t{
		padding: 16px 16px;
		margin-top: 30px;
	}

	.area_main_t h2{
		font-size: var(--s32);
		line-height: var(--lh14);
	}

	.area_box1{
		padding: 30px 0 40px 0;
	}

	.area_box1::after {
        top: -250px;
        padding-bottom: 250px;
	}

	.area_box1 ul{
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		-ms-flex-direction: column;
		flex-direction: column;
	}

	.area_box1 ul li.text{
		width: 100%;
	}

	.area_box1 ul li.text h2{
		margin-bottom: 10px;
	}

	.area_box1 ul li.img{
		width: 80%;
		margin:  20px auto 0;
	}


	.area_box2 {
		padding: 40px 0 40px;
	}

	.area_box2 .wrap{
		width: 100%;
        overflow-x: scroll;
        padding: 30px 0 20px;
	}

	.area_box2_table {
		width: 820px;
		padding: 0 0 0 0;
	}

	.area_box2_table .tb1 {
		margin-top: 52px;
	}

	.area_box2_table li {
		padding: 16px 0;
		font-size: var(--s15);
	}

	.area_box2_table .tb2 li.t {
		padding: 15px 0;
	}

	.area_box2_table .tb3 li.t {
		padding: 17px 0;
	}

	.area_box2_table .tb4 li.t {
		padding: 17px 0;
	}

	.area_box3{
		padding: 30px 0 30px;
	}

	.area_box3 .wrap{
		padding: 26px;
	}
	.area_box3 dl{
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		-ms-flex-direction: column;
		flex-direction: column;
		gap: 20px;
	}

	.area_box3 dl dt{
		width: 100%;
	}

	.area_box3 dl dt h2{
		margin-bottom: 16px;
	}
	
	.area_box3 dl dt p{
		margin-bottom: 12px;
	}

	.area_box3 .area_address{
		padding: 12px 20px;
	}

	.area_box3 dl dd{
		width: 100%;
	}
	
	.area_box4{
		padding: 40px 0 40px 0;
	}

	.area_box4 ul{
		padding-top: 26px;
		gap: 20px;
	}

	.area_box4 ul li{
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		-ms-flex-direction: column;
		flex-direction: column;
		padding: 20px 26px;
	}

	.area_box4 ul li .img{
		width: 30%;
		margin: 0 auto 16px;
	}

	.area_box4 ul li .text{
		width: 100%;
	}
	
	/*-----------------------------------------------------
	case
	-------------------------------------------------------*/
	.case_st{
		margin-bottom: 16px;
	}

	.case_st span.ct{
		padding: 8px 20px;
		margin-right: 10px;
	}

	.case_ctimg{
		width: 54%;
		max-height: 260px;
		margin: 30px auto 30px;
	}

	.case_cttext{
		padding-bottom: 50px;
	}
	
	/*-----------------------------------------------------
	line
	-------------------------------------------------------*/
	.line_box .wrap{
		padding-bottom: 36px;
		margin-bottom: 36px;
	}
	
	.line_img{
		max-width: 140px;
	}

	/*-----------------------------------------------------
	price
	-------------------------------------------------------*/
	.price_box{
		padding: 26px 0 0 0;
	}


	.price_average{
		padding: 20px 26px;
		margin-bottom: 30px;
	}

	.price_average ul{
		gap: 28px;
	}

	.price_average ul li{
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		-ms-flex-direction: column;
		flex-direction: column;
		-ms-flex-wrap: wrap;
		flex-wrap: wrap;
		gap: 6px;
	}

	.price_average ul li .img{
		width: 60%;
	}

	.price_average ul li .img img{
		padding: 14px;
	}


	.price_average ul li .case{
		width: 100%;
	}

	.price_average ul li .case span{
		padding: 16px 0;
	}


	.price_option{
		margin-bottom: 30px;
	}

	.price_option table td{
		padding: 20px 16px;
		line-height: var(--lh14);
	}

	.price_option table td:nth-child(2) {
		width: 44%;
	}

	/*-----------------------------------------------------
	faq
	-------------------------------------------------------*/
	.faq_box{
		padding: 26px 0 0 0;
	}

	.faq_box ul{
		padding: 20px 0 30px;
		gap: 14px 0;
	}

	.faq_box ul li.q{
		padding: 20px 66px;
        line-height: var(--lh12);
	}

	.faq_box ul li.q::before{
		height: 30px;
        width: 30px;
        background-size: 30px 30px;
        left: 20px;
	}

	.faq_box ul li.q::after{
		height: 14px;
        width: 14px;
        background-size: 14px 14px;
        right: 20px;
	}

	.faq_box ul li.q.active::after{
		background: url("../../images/index/icon_minus.svg");
		height: 2px;
		width: 18px;
		background-size: 18px 2px;
		opacity: 1;
		transform: translateY(-50%) rotate(180deg);
	}

	.faq_box ul li.a{
		padding: 14px 24px 14px 66px;
	}


	.faq_box ul li.a::before{
		height: 30px;
        width: 30px;
        background-size: 30px 30px;
        top: 15px;
        left: 20px;
	}
	
	/*-----------------------------------------------------
	flow
	-------------------------------------------------------*/
	.flow_box{
		padding: 40px 0 0 0;
		gap: 54px 0;
	}

	.flow_list {
		padding: 46px 26px 26px 26px;
	}

	.flow_list .head{
		top: 0;
		left: -2px;
		padding: 8px 24px;
	}


	.flow_list::before {
		border-width: 20px 26px;
	}

	.flow_list::after {
		border-width: 20px 26px;
	}

	.flow_list ul{
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		-ms-flex-direction: column;
		flex-direction: column;
	}

	.flow_list ul li.left{
		width: 100%;
	}

	.flow_list ul li.left span.t{
		margin-bottom: 20px;
		padding-left: 40px;
	}

	.flow_list ul li.left span.t::before {
		top: -4px;
		left: 0;
	}

	.flow_list ul li.left .ct{
		padding: 16px;
	}

	.flow_list ul li.left .ct ul{
		gap: 12px 0;
	}

	.flow_list ul li.right{
		width: 60%;
		padding-top: 20px;
		margin: 0 auto;
	}
	
	/*-----------------------------------------------------
	mail
	-------------------------------------------------------*/
	.mail_tb th{
		width: 100%;
		display: block;
		padding: 28px 0 10px;
	}

	.mail_tb td{
		width: 100%;
		display: block;
		padding: 0 0 0;
	}

	.mail_tb td input[type=text],[type=email],[type=tel]{
		width: 94%;
	}

	.mail_tb td textarea{
		width: 94%;
	}

	.mw_wp_form .error{
		font-size: var(--s13)!important;
	}
	
	.mail_tb td label{
		display: block;
		margin: 0 0 6px 0;
	}
	
    .mw_wp_form .horizontal-item + .horizontal-item {
        margin-left: 0px !important;
    }
	
	.mail_bt{
		padding: 40px 0px 0 0px;
	}
	
	
	.mail_bt input.submit{
		width: 70%;
		padding: 18px 0 18px 0;
		margin-bottom: 10px;
	}

	/*-----------------------------------------------------
	privacy
	-------------------------------------------------------*/

	.privacy_box{
		padding: 26px 0 0 0;
	}

	.privacy_box .text{
		margin-bottom: 20px;
	}

	.privacy_box .list .row{
		padding: 20px 0px;
	}

	.privacy_box .list .row h3{
		padding-bottom: 12px;
	}


	/*-----------------------------------------------------
	pagenation
	-------------------------------------------------------*/
	.pagenation{
		gap: 6px 6px;
	}

	a.page-numbers,
	.pagination .current{
		padding: 10px 10px;
	}

	.current {
		padding: 10px 10px;
	}


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

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