@charset "UTF-8";

@media (min-width : 1175px) {
	a[href^="tel:"] {
		pointer-events: none !important;
	}
}


@media (max-width : 1175px ){
    
	body,html{
		min-width: inherit;
	}

	#container{
		width: 100%;
		margin: 0 auto;
	}
    
    input[type="submit"],
    input[type="button"],
    input[type="reset"] {
        -webkit-appearance: none;
    }
	
	
    /*-----------------------------------------------------
    root
    -------------------------------------------------------*/
    
    :root {
		font-size: 62.5% !important;
		--base: 1.6rem;
		--s10: 0.9rem;
		--s12: 1.1rem;
		--s13: 1.2rem;
		--s14: 1.3rem;    
		--s15: 1.4rem; 
		--s16: 1.5rem;    
		--s18: 1.6rem;
		--s20: 1.8rem;
		--s22: 1.8rem; 
		--s24: 2.2rem;    
		--s26: 2.4rem;     
		--s28: 2.6rem;     
		--s32: 2.8rem;
		--s38: 3.2rem;
		--s40: 3.6rem;
		--s42: 3.8rem;
		--s44: 4.0rem;

    }
    
    /*-----------------------------------------------------
    global
    -------------------------------------------------------*/
	.g_w1200{
		max-width: 90%;
		margin: 0 auto;
	}

	.g_w1100{
		max-width: 90%;
		margin: 0 auto;
	}

	.g_w1000{
		max-width: 90%;
		margin: 0 auto;
	}

	.g_w900{
		max-width: 90%;
		margin: 0 auto;
	}
	
	.g_w800{
		max-width: 80%;
		margin: 0 auto;
	}

	.g_only_tb{
		display: none!important;
	}

	.g_mb_a{
		margin-bottom: 16px!important;
	}

	.g_mb_b{
		margin-bottom: 26px !important;
	}

	.g_mb_c{
		margin-bottom: 36px !important;
	}

    
    /*-----------------------------------------------------
    header
    -------------------------------------------------------*/
    .header_logo{
        width:  20vw;
    }
	
		
    /*-----------------------------------------------------
    footer
    -------------------------------------------------------*/
    .footer_logo{
        width: 16vw;
    }

}
    
@media (max-width : 767px ){
    	
    
    :root {
		font-size: 62.5% !important;
		--base: 1.6rem;
		--s10: 0.9rem;
		--s12: 1.1rem;
		--s13: 1.2rem;
		--s14: 1.3rem;    
		--s15: 1.4rem; 
		--s16: 1.5rem;    
		--s18: 1.7rem;
		--s20: 1.8rem;
		--s22: 1.8rem; 
		--s24: 2.0rem;    
		--s26: 2.2rem;     
		--s28: 2.0rem;     
		--s32: 2.4rem;
		--s38: 2.8rem;
		--s40: 2.6rem;
		--s42: 3.0rem;
		--s44: 2.6rem;
		
		/*line-height*/    
		--lh12: 1.2;
		--lh14: 1.3;
		--lh16: 1.5;
		--lh18: 1.7;
		--lh20: 1.8;
    }


    /*-----------------------------------------------------
    global
    -------------------------------------------------------*/
    .g_only_pc{
        display: none!important;
    }
	
	.g_only_tb{
		display: none!important;
	}

    .g_only_sp{
        display: block!important;
    }
	
	.g_only_pc_in{
        display: none!important;
	}
    
	.g_w1100{
		max-width: 100%;
		margin: 0 20px;
	}

	.g_w1000{
		max-width: 100%;
		margin: 0 20px;
	}

	.g_w900{
		max-width: 100%;
		margin: 0 20px;
	}
	
	.g_w800{
		max-width: 100%;
		margin: 0 20px;
	}

	.g_t1{
	}

	.g_btn{
		max-width: 74%;
	}

	.g_btn a{
		padding: 18px 0;
	}

	.g_btn a span.img{
		right: 14px;
		width: 22px;
		height: 22px;
	}

    /*-----------------------------------------------------
    header
    -------------------------------------------------------*/
	
	.header_txt{
		padding-top: 10px;
        white-space: nowrap;
        overflow-x: scroll;
	}

	
    .header_logo{
        width:  44vw;
    }
	
	#header_box .wrap {
		padding: 26px 0;
	}
	
    .menu_btn_wrap{
		width: 44px;
		height: 40px;
		padding: 10px;
		border-radius: 10px;
		background: var(--main_color);
		position: fixed;
		top: 40px;
		right: 20px;
		z-index: 999;
		transition: top 0.3s ease;
    }

    .menu_btn{
		position: relative;
		margin-left: auto;
		cursor: pointer;
		height: 18px;
    }

    .menu_btn span{
		display: inline-block;
		transition: all .4s;
		position: absolute;
		left: 0px;
		height: 3px;
		background: #fff;
		z-index: 110;
    }

    .menu_btn span:nth-of-type(1) {
      top:0px; 
      width: 100%;
    }

    .menu_btn span:nth-of-type(2) {
      top:8px;
      width: 100%;
    }

    .menu_btn span:nth-of-type(3) {
      top:16px;
      width: 100%;
    }

    .menu_btn.active span:nth-of-type(1) {
      top: 3px;
      left: 0px;
      transform: translateY(6px) rotate(-135deg);
      width: 100%;
    }

    .menu_btn.active span:nth-of-type(2) {
      opacity: 0;
    }

    .menu_btn.active span:nth-of-type(3){
      top: 15px;
      left: 0px;
      transform: translateY(-6px) rotate(135deg);
      width: 100%;
    }
    
    /*-----------------------------------------------------
    drawer
    -------------------------------------------------------*/
	#drawer{
		display: none;
		width: 100%;
		height: 100vh;
		overflow-y: scroll;
		background: #fff;
		position: fixed;
		top: 0px;
		left: 0px;
		z-index: 100;
	}
	
    .drawer_wrap {
		height: 100%;
		width: 86%;
		margin: 0 auto;
		padding: 100px 0px 120px;
    }
		
    
    .drawer_contact{
        margin-bottom: 16px;
    }
    
    .drawer_contact ul{
        -webkit-flex-direction: column;
        -moz-flex-direction: column;
        -ms-flex-direction: column;
        -o-flex-direction: column;
        flex-direction: column;
		-webkit-display: flex;
		-moz-display: flex;
		-ms-display: flex;
		-o-display: flex;
		display: flex;
        gap: 20px;
    }
    
     .drawer_contact ul li{
         width: 100%;
    }
    
     .drawer_contact ul li.tel span{
         margin-top: 10px;
		 display: block;
		 font-weight: bold;
    }
	
     .drawer_contact ul li.tel a{
         width: 90%;
    }

     .drawer_contact ul li.bt{
		 width: 100%;
		display:-webkit-box;
		display: -webkit-flex;
		display:-ms-flexbox;
		display:flex;
		-webkit-box-pack: justify;
		-webkit-justify-content: space-between;
		-ms-flex-pack: justify;
		justify-content: space-between;
    }

     .drawer_contact ul li.bt a.mail{
        width: 48.5%;
		padding: 10px 0px;
		background: #EA5514;
		color: #fff;
		font-weight: bold;
		border-radius: 10px;
		line-height: var(--lh14);
		font-size: var(--s16);
		text-align: center;
    }

     .drawer_contact ul li.bt a.line{
        width: 48.5%;
		padding: 10px 0px;
		background: #00AA55;
		color: #fff;
		font-weight: bold;
		border-radius: 10px;
		line-height: var(--lh14);
		font-size: var(--s16);
		text-align: center;
    }

    
    .drawer_menu ul{
        -webkit-flex-direction: column;
        -moz-flex-direction: column;
        -ms-flex-direction: column;
        -o-flex-direction: column;
        flex-direction: column;
		-webkit-display: flex;
		-moz-display: flex;
		-ms-display: flex;
		-o-display: flex;
		display: flex;
		margin-bottom: 16px;
    }
    
     .drawer_menu ul li{
         width: 100%;
		 padding: 22px 0;
		 border-bottom: 1px solid #ccc;
		 position: relative;
		 font-weight: bold;
    }
	
	.drawer_menu ul li:after {
		content: "";
		position: absolute;
		width: 7px;
		height: 9px;
		top: 49%;
		right: 12px;
		transform: translateY(-49%);
		-webkit-transform: translateY(-49%);
		-ms-transform: translateY(-49%);
		background: url(../../images/index/arrow_r.svg) no-repeat;
	}
	    
    .drawer_sub ul{
        -webkit-flex-direction: column;
        -moz-flex-direction: column;
        -ms-flex-direction: column;
        -o-flex-direction: column;
        flex-direction: column;
		-webkit-display: flex;
		-moz-display: flex;
		-ms-display: flex;
		-o-display: flex;
		display: flex;		
		gap: 14px;
		font-size: var(--s15);
    }
	
	/*-----------------------------------------------------
	mv
	-------------------------------------------------------*/

	.mv{
		padding: 30px 0 40px;
	}
	
	.sub_mv{
		padding: 30px 0 0;
	}

	.mv .wrap{
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		-ms-flex-direction: column;
		flex-direction: column;
		gap: 20px 0;
	}
	
	.sub_mv .wrap{
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		-ms-flex-direction: column;
		flex-direction: column;
		gap: 20px 0;
	}

	.mv_text {
		width: 82%;
		margin: 0 auto;
	}

	.mv_slider {
		width: 100%;
		margin: 0 auto;
		height: 220px;
	}

	.mv_slider .slick-slide {
		width: 145px!important;
	}
	
	.mv_slider .slick-slide img{
		height: 220px;
	}

	.mv_mark{
		position: absolute;
		top: auto;
        right: -10px;
        bottom: -20px;
	}

	.mv_mark img{
		width: 140px;
	}

	/*-----------------------------------------------------
	campaign
	-------------------------------------------------------*/
	.campaign{
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		-ms-flex-direction: column;
		flex-direction: column;
		padding: 30px 0 20px 0;
	}

	.campaign_explanation{
		width: 100%;
	}

	.campaign_t span{
		padding: 8px 16px;
	}

	.campaign_t h3{
		padding-top: 6px;
	}

	.campaign_text p{
		margin-top: 10px;
	}

	.campaign_text span{
		margin-top: 2px;
	}


	.campaign_img{
		margin-top: 12px;
		max-width: 90%;
	}
	
	/*-----------------------------------------------------
	box1
	-------------------------------------------------------*/

	.box1 {
		padding: 40px 0 20px 0;
	}

	.box1::after {
		content: "";
		position: absolute;
		width: 100%;
		height: 100%;
		top: -250px;
		padding-bottom: 250px;
		z-index: -1;
	}


	.box1_list{
		text-align: center;
		padding: 20px 0 80px;
		position: relative;
		z-index: 1;
	}

	.box1_list ul{
		width: 90%;
		gap: 12px;

	}

	.box1_list ul li{
		padding: 16px 0px 16px 0px;
	}

	.box1_list ul li p{
		padding-left: 56px;
		padding-right: 10px;
	}

	.box1_list ul li::before {
		left: 16px;
	}

	.box1_img1{
		position: absolute;
		top: inherit;
		bottom: 0;
		left: -10px;
		max-width: 30%;
	}

	.box1_img2{
		position: absolute;
		bottom: 0;
		right: -10px;
		max-width: 30%;
	}    

	/*-----------------------------------------------------
	box2
	-------------------------------------------------------*/
	.box2{
		padding: 40px 0 40px 0;
	}

	.box2_list{
		padding: 20px 0 10px 0;
	}

	.box2_list ul{
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		-ms-flex-direction: column;
		flex-direction: column;
		gap: 12px 0;
	}

	.box2_list ul li{
		width: 100%;
		padding: 16px 16px;
		gap: 0 20px;
	}

	.box2_list ul li img{
		max-width: 100px;
	}

	.box2_list2{
		padding: 0 0 20px;
	}

	.box2_list2 ul{
		width: 100%;
		-ms-flex-wrap: wrap;
		flex-wrap: wrap;
		gap: 10px 3%;
	}

	.box2_list2 ul li{
		width: 48.5%;
		padding: 26px 0px;
	}

	.box2_unique{
		padding: 30px 30px;
	}

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

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

	.box2_list3 ul li{
		width: 100%;
		background: #fff;
		padding: 0;
		text-align: left;
	}

	.box2_list3 ul li span.st{
		font-weight: bold;
		margin-bottom: 6px;
		display: block;
	}

	.box2_list3 ul li span.t{
		font-weight: bold;
		line-height: var(--lh14);
		font-size: var(--s24);
		color: var(--blue);
		margin-bottom: 10px;
		display: block;
	}

	.box2_list3 ul li span.text{
		line-height: var(--lh16);
	}

	.box2_list3 ul li img{
		width: 34%;
		margin: 0 auto 16px;
		display: block;
	}

    
	/*-----------------------------------------------------
	box3
	-------------------------------------------------------*/
	.box3{
		padding: 50px 0 40px 0;
	}

	.box3_list{
		padding: 20px 0 0 0;
	}

	.box3_list ul{
		gap: 20px;
	}

	.box3_list ul li{
		width: 90%;
		margin: 0 auto;
		padding: 16px 16px;
	}

	.box3_list ul li span.img{
		height: 70px;
		margin-bottom: 12px;
	}

	.box3_list ul li img{
		max-height: 70px;
	}

	.box3_list ul li span.t{
		margin-bottom: 10px;
		text-align: center;
	}


	/*-----------------------------------------------------
	box4
	-------------------------------------------------------*/
	.box4{
		padding: 40px 0 40px 0;
	}

	.box4_txt{
		padding: 12px 0 0 0;
	}

	.box4_list ul{
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		-ms-flex-direction: column;
		flex-direction: column;
		padding: 16px 0 0 0;
	}

	.box4_list ul li.l{
		width: 100%;
	}

	.box4_list ul li.r{
		width: 100%;
		padding: 16px 0 0 0;
		gap: 10px 10px;
	}
 
	/*-----------------------------------------------------
	box5
	-------------------------------------------------------*/
	.box5{
		padding: 40px 0 40px 0;
	}

	.box5_list{
		padding: 20px 0 30px 0;
	}

	.box5_list ul{
		gap: 14px 0;
	}

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

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

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

	.box5_list ul li.q.active::after{
		height: 2px;
		width: 14px;
		background-size: 14px 2px;
	}

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


	.box5_list ul li.a::before{
		height: 30px;
		width: 30px;
		background-size: 30px 30px;
		top: 15px;
		left: 20px;
	}

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

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

	.box6_list ul{
		gap: 20px 3%;
	}

	.box6_list ul li{
		width: 48.5%;
	}

	.box6_list ul li .img{
		height: 120px;
	}

	.box6_list ul li .wrap {
		padding: 16px;
	}

	.box6_list ul li span.ct {
		top: 0;
		left: 0px;
		padding: 6px 14px;
	}

	.box6_list ul li span.area{
		margin-bottom: 10px;
	}
	
	/*-----------------------------------------------------
	box7
	-------------------------------------------------------*/

	.box7 .wrap{
		padding: 0px 0 40px;
	}

	.box7_list{
		padding: 20px 0 0 0;
		gap: 14px 0;
	}

	.box7_open{
		padding: 20px 70px 20px 36px;
	}

	.box7_open::after{
		height: 14px;
		width: 14px;
		background-size: 14px 14px;
	}

	.box7_open.active::after{
		height: 2px;
		width: 14px;
		background-size: 14px 2px;
	}

	.box7_area{
		padding: 10px 36px 20px 10px;
	}

	.box7_area ul{
		gap: 14px 10px;
	}
	
	/*-----------------------------------------------------
	cta
	-------------------------------------------------------*/
	.cta{
		padding: 26px 26px;
	}

	.cta_t{
		padding: 0 0 16px;
		line-height: var(--lh14);
	}

	.cta_t span{
		display: block;
	}

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

	.cta ul li.l{
		width: 100%;
		border-right: none;
		padding-right: 0px;
	}

	.cta ul li.l span{
		margin-bottom: 10px;
	}


	.cta ul li.r{
		width: 100%;
		padding-left: 0;
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		-ms-flex-direction: column;
		flex-direction: column;
		gap: 10px;
	}

	.cta ul li.r a.mail{
		width: 100%;
		padding: 14px 0px;
	}

	.cta ul li.r a.line{
		width: 100%;
		padding: 14px 0px;

	}

	.cta_payment{
		padding-top: 20px;
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		-ms-flex-direction: column;
		flex-direction: column;
		gap: 10px;
	}

	.cta_payment img{
		height: 36px;
	}

	/*-----------------------------------------------------
	footer
	-------------------------------------------------------*/
	footer{
	}

	#footer_box{
		padding: 50px 0px 30px;
	}

	#footer_box::after {
		top: -250px;
		padding-bottom: 250px;
	}

	.footer_nav{
		margin-bottom: 40px;
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		-ms-flex-direction: column;
		flex-direction: column;
		gap: 22px;
	}

	.footer_nav .footer_logo{
		width: 100%;
	}
	
	.footer_nav .footer_logo img{
		width: 54%;
	}

	.footer_nav .footer_link{
		width: 100%;
	}

	.footer_nav ul li{
		margin-bottom: 12px;
	}
	
	.footer_nav ul li a{
		display: inline-block;
	}
	
	.footer_cta{
		position: fixed;
		background: rgba(16, 86, 30, 0.9);
		bottom: -18vw;
		left: 0px;
		width: 100vw;
		height: 18vw;
		display:-webkit-box;
		display: -webkit-flex;
		display:-ms-flexbox;
		display:flex;
		-webkit-box-pack: justify;
		-webkit-justify-content: space-between;
		-ms-flex-pack: justify;
		justify-content: space-between;
		-webkit-box-align: center;
		-webkit-align-items: center;
		-ms-flex-align: center;
		align-items: center;
		z-index: 99999;
		transition: all 0.5s;
		padding: 0 10px;
	}

	.footer_cta.active{
		bottom: 0px;
		transition: all 0.5s;
	}

	.footer_cta .tel{
	  width: 58%;
	}

	.footer_cta .tel span{
		font-size: var(--s12);
		color: #fff;
		display: block;
		margin-bottom: 5px;
		font-weight: bold;
	}

	.footer_cta .mail{
		width: 18%;
	}

	.footer_cta .line{
		width: 18%;
	}

    /*-----------------------------------------------------
    page-top
    -------------------------------------------------------*/
    
    #page_top_sp {
        position: absolute;
        top: 36px;
        right: 16px;
        z-index: 1;
        margin: 0 0 32px;
    }

    #page_top_sp a{
        width: 36px;
        height: 36px;
        display: inline-block;
        transition: 0.5s;        
    }

    #page_top_sp a:hover{
        text-decoration: none;
        opacity: 0.8;
    }

    
    /*-----------------------------------------------------
    recaptcha
    -------------------------------------------------------*/
    .recaptcha {
        margin: 38px auto 15px;
    }
}