@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_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;
    }
	
	.header_tel {
		height: 54px;
	}
	
	.header_tel img {
		height: 54px;
	}
	
	.header_mail {
		height: 54px;
	}

	.header_line {
		height: 54px;
	}

	
    /*-----------------------------------------------------
    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: 8px;
		height: 8px;
	}

    /*-----------------------------------------------------
    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: 5px;
		background: var(--blue1);
		position: fixed;
		top: 15px;
		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: 80px 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: 16px;
    }
    
     .drawer_contact ul li{
         width: 100%;
    }
	
	.drawer_contact ul li.tel img{
		display: block;
		width: 90%;
		height: auto;
		margin: 0 auto;
		margin-bottom: 10px;
		
	}
    
     .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: var(--blue1);
		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: 18px 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: 12px;
		font-size: var(--s15);
    }
	
	/*-----------------------------------------------------
	mv
	-------------------------------------------------------*/
	.mv{
		margin: 0;
		height: 300px;
		width: 100%;
	}
	
	.mv-subtext{
		padding: 20px;
	}
	
	.mv_text{
		padding: 20px;
	}
	
	.mv_text img{
		width: 280px;
	}


	/*-----------------------------------------------------
	box1
	-------------------------------------------------------*/

	.box1 {
		padding: 40px 0 40px 0;
	}
	
	.box1_list{
	padding-top: 50px;
	}

	.box1_list ul{
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		-ms-flex-direction: column;
		flex-direction: column;	
		align-items: center;
		gap:12px 0;
	}
	
	.box1_list ul li{
	width: 100%;
	padding: 40px 20px 30px;
	
	}
	
	.box1_list ul li > img:first-child{
	position: absolute;
	top:-30px;
	left: 50%;
	transform: translateX(-50%);
	width: 60px;
	height: auto;
	}
	
	.box1_list ul li img:not(:first-child){
	display: block;
    max-height: 80px;
    margin: 0 auto 16px;
	}

	.box1_list ul li span.t{
	margin-top: 16px;
	}


	/*-----------------------------------------------------
	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%;
	}
	
	.box2_list ul li span {
    padding: 14px 0 14px;
    color: #fff;
	font-size: var(--s14);
	}
	
	.box2_list ul li span img{
	position: absolute;
    top: 50%;
    right:100px;
    width: 10px;
    height: 10px;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
	}



	/*-----------------------------------------------------
	box3
	-------------------------------------------------------*/
	.box3{
		padding: 40px 0 30px 0;
	}
	
	.area{
		padding-top: 40px;
	}


	/*-----------------------------------------------------
	box4
	-------------------------------------------------------*/
	.box4{
		padding: 40px 0 40px 0;
	}
	
	.box4_list{
		padding: 20px 0 40px;
	}
	
	.box4_list ul li.q{
		padding: 20px 60px;
	}
	
	.box4_list ul li.a{
    padding: 10px 30px 20px 60px;
	}
	
	
	/*-----------------------------------------------------
	box5
	-------------------------------------------------------*/
	.box5{
		padding: 40px 0 40px 0;
	}

	
	/*-----------------------------------------------------
	cta
	-------------------------------------------------------*/
	.cta{
		padding: 30px;
	}
	
	.cta_t{
	margin-bottom: 18px;}

	
	.cta_t img{
	width: 70px;
	height: auto;
	}
	
	.cta_txt{
	padding-left: 15px;
	}

	.cta_txt span{
	font-size: var(--s28);
	margin-bottom: 0;
	}
	
	.cta p{
		font-weight: bold;
		line-height: var(--lh16);
		margin-bottom: 18px;
	}
	
	.cta_ctbox{
		display: flex;
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		-ms-flex-direction: column;
		flex-direction: column;
	}
	
	.cta_tell{
		padding-right: 0;
		margin-bottom: 18px;
	}
	
	.cta_tell img{
		height: 65px;
	}

	
	.cta_mail{
		width: 100%;
		height: 60px;
		margin-bottom: 10px;
		text-align: center;
	}
	
	.cta_mail a{
		font-size: var(--s16);
	}

	.cta_line{
		width: 100%;
		height: 60px;
		text-align: center;
	}
	
	.cta_line a{
		font-size: var(--s16);
	}




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

	#footer_box{
		padding: 30px 0px 50px;
	}
	
	.footer_logo{
		width: 240px;
		margin: 0 0 30px 0;
	}
	
	.footer_link{
		margin-bottom: 30px;
	}
	
	.footer_link ul{
		display:-webkit-box;
		display: -webkit-flex;
		display:-ms-flexbox;
		display: flex;
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		-ms-flex-direction: column;
		flex-direction: column;
		align-items: flex-start;
		justify-content: flex-start;
	}
	
	.footer_link ul li{
	padding-bottom: 10px;
	text-align: left;
	}
	
	.footer_copyright{
    font-size: var(--s10);
	}

	
	.footer_cta{
		position: fixed;
		background: rgba(255, 255, 255, 0.9);
		bottom: -8vh;
		left: 0px;
		width: 100vw;
		height: 8vh;
		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: 44%;
	}

	.footer_cta .mail{
		width: 27%;

	}

	.footer_cta .line{
		width: 27%;
	}

	
    /*-----------------------------------------------------
    page-top
    -------------------------------------------------------*/
    
    #page_top_sp {
        position: absolute;
        top: 26px;
        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;
    }
}