@charset "UTF-8";

@media (max-width : 1175px ){

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

	.sub_cta{
		margin-bottom: 40px;
	}


/*-----------------------------------------------------
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;
    }

    


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

	.g_sub_t1 h2{
		font-size: var(--s28);
		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;
	}

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

	.bgc1{
		padding: 30px 0;
		margin-bottom: 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%;
	}
	
	/*-----------------------------------------------------
	archive
	-------------------------------------------------------*/
	.archive_list{
		margin: 50px 0 50px;
	}
	
	.last{
		margin: 50px 0 0;
	}
	
	.archive_list ul li{
		width: 100%;
		height: auto;
	}
	
	/*-----------------------------------------------------
	plan
	-------------------------------------------------------*/
	.plan_box1{
		padding: 30px 0 40px;
	}
	
	.plan_row{
		margin-top: 50px;
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		-ms-flex-direction: column;
		flex-direction: column;
		gap:20px;
	}
	
	.plan_txt{
		width: 100%;
	}
		
	.plan_img{
		width: 100%;
		height: auto;
	}
	
	.recommend_list{
		padding: 20px 0 0 ;
	}
	
	.r_badge{
		font-size: var(--base);
	}
	
	.recommend_list ul{
		padding: 20px;
		gap:15px;
	}
	
	.recommend_list ul li{
		font-size: var(--s14);
		margin-bottom: 0;
	}
	
	.plan_box2{
		padding: 40px 0 40px;
	}

	.price_example{
		margin-top: 50px;
	}
	
	.price_example ul{
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		-ms-flex-direction: column;
		flex-direction: column;
		gap:20px;
	}
	
	.price_example ul li{
		width: 100%;
	}
	
	.plan_box3{
		padding: 40px 0 40px;
	}
	
	.service_list{
		margin-top:50px; 
	}
	
	.service_list ul{
		gap:15px;
	}
	
	.service_list ul li{
		width:calc((100% - 15px) / 2);
		height: auto;
		gap:10px;
	}
	
	.service_list ul li h3{
		font-size: var(--base);
	}
	
	.service_list ul li span{
		font-size: var(--s15);
	}
	
	.plan_box4{
		padding: 40px 0 40px;
	}
	
	.options{
		margin-top: 50px;
	}
	
	.options ul{
		gap:15px;		
	}
	
	.options ul li{
		width: 90%;
		margin: 0 auto;
		font-size: var(--s15);
	}
	
	.options ul li a{
		height: 60px;
		padding-left: 10px;
	}


	.options ul li span{
		height: 60px;
		padding-left: 10px;
	}

	/*-----------------------------------------------------
	line
	-------------------------------------------------------*/
	.line_wrap{
		margin-top: 20px;
	}
	
	.line_wrap{
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		-ms-flex-direction: column;
		flex-direction: column;
	}
	
	.line_btn{
		margin-top: 20px;
	}
	.line_img{
		max-width: 140px;
		margin-top: 20px;
	}

	/*-----------------------------------------------------
	price
	-------------------------------------------------------*/	
	.table_wrap{
		margin-top: 30px;
	}
	
	.table_title{
		padding: 20px;
	}
	
	
	.price_table td{
		font-size: var(--s16);
		padding: 20px;
	}
	
	.price_table td:last-child {
		width: 45%;
	}


	


	/*-----------------------------------------------------
	faq
	-------------------------------------------------------*/
	.faq_box ul{
		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{
		gap: 54px 0;
	}

	.flow_list {
		padding: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_txt h3{
		line-height: var(--lh16);
	}
	
	.flow_txt h3::before{
		top:0;
		padding: 2px 0 0 1px;
	}
	
	.ct{
		padding: 16px;
	}

	.ct ul{
		margin-top: 10px;
		gap: 12px 0;

	}
	
	.ct ul li.flow_mail{
		width: 100%;
	}
	
	.ct ul li.flow_mail a{
		text-align: center;
		font-size: var(--s16);
		margin: 0 auto;
	}	
	
	.ct ul li.flow_line{
		width: 100%;
	}
	
	.ct ul li.flow_line a{
		text-align: center;
		font-size: var(--s16);
		margin: 0 auto;
	}


	.flow_list ul li.right{
		width: 60%;
		padding-top: 20px;
		margin: 0 auto;
	}
	
	/*-----------------------------------------------------
	reason
	-------------------------------------------------------*/
	
	.reason_box{
		padding-top: 30px;
	}

	.reason_wrap{
		margin-bottom: 50px;
		padding: 30px;
	}
	
	.reason_wrap h3{
		margin-bottom: 20px;
	}
	
	.reason_heading img{
		width: 60px;
		height: 60px;
	}
	
	.reason_row{
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		-ms-flex-direction: column;
		flex-direction: column;
		gap:20px;
	}
	
	.reason_txt{
		width: 100%;
	}

	.reason_img{
		width:100%;
	}

	/*-----------------------------------------------------
	packing
	-------------------------------------------------------*/
	
	.packing_btn{
		padding: 20px 0;
	}
	
	.packing_btn ul{
		flex-wrap: wrap;
		gap:10px;
	}
	
	.packing_btn ul li{
		flex:0 0 calc((100% - 10px) / 2);
		padding: 15px;
	}
	
	.packing_btn ul li a{
		text-align: ;
		font-size: var(--s15);
	}
	
	.packing_btn ul li a span img{
		top:20%;
		right: 0;
	}
	
	.packing_box2{
		padding:  40px 0 0;
	}
	
	.todo_list{
		margin-top: 40px;
		padding-bottom: 20px;
	}
	
	.todo_list ul{
		padding: 20px;
	}
	
	.todo_list_row{
		margin-top: 40px;
		padding-bottom: 20px;
	}
	
	.todo_list_row ul{
		flex-direction: column;
		flex-wrap: nowrap;
		padding: 20px;
	}

	
	/*-----------------------------------------------------
	mail
	-------------------------------------------------------*/
	.mail_list{
		margin:20px 0;
	}
	
	.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: 20px 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;
	}