@charset "UTF-8";

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


@media (max-width : 1200px ){
    
	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.7rem;
		--s20: 1.8rem;
		--s22: 2.0rem; 
		--s24: 2.2rem;    
		--s26: 2.4rem;     
		--s28: 2.6rem;     
		--s32: 3.0rem;
		--s38: 3.4rem;
		--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_box .wrap {
		padding: 32px 1.5% 36px;
	}
	
	.header_logo {
		max-width: 220px;
		height: auto;
		margin-right: 0;
	}
	
	.header_txt {
		position: absolute;
		top: 6px;
		left: 16px;
	}
	
	.header_txt br{
		display: none;
	}

	.header_tel a {
		max-width: 210px;
	}
	
	.header_tel span.text {
		display: none;
	}
		
	.mv .wrap{
		margin: 0 26px;
	}
	
	.megamenu_item a {
		line-height: var(--lh14);
	}

	.megamenu_list {
		gap: 10px 2%;
	}	
	
	.megamenu_item {
		width: 32%;
	}
	/*-----------------------------------------------------
	box1
	-------------------------------------------------------*/
	.box1 ul {
		display: flex;
		justify-content: flex-start;
		align-items: stretch;
		flex-wrap: wrap;
		gap: 14px 1.33333%;
	}
	
	.box1 ul li {
		width: 24%;
	}
	
	.box1 ul li span {
		line-height: var(--lh14);
	}	
		
	/*-----------------------------------------------------
	cta
	-------------------------------------------------------*/

	.cta .wrap {
		width: 94%;
	}
	
    /*-----------------------------------------------------
    footer
    -------------------------------------------------------*/
	.footer_nav .footer_detail {
		width: 100%;
		margin-bottom: 40px;
	}
		    
}
    

@media (max-width : 900px ){
	.cta .wrap {
		width: 100%;
	}
}

@media (max-width : 767px ){
    	
    
    :root {
		font-size: 62.5% !important;
		--base: 1.6rem;
		--s10: 0.9rem;
		--s12: 1.1rem;
		--s13: 1.2rem;
		--s14: 1.2rem;    
		--s15: 1.4rem; 
		--s16: 1.5rem;    
		--s18: 1.6rem;
		--s20: 1.7rem;
		--s22: 1.8rem; 
		--s24: 1.8rem;    
		--s26: 1.8rem;     
		--s28: 2.0rem;     
		--s32: 2.2rem;
		--s38: 2.4rem;
		--s42: 3.2rem;
		--s44: 3.6rem;
        --spacing-1x: 2.4rem;
        --spacing-2x: 5.4rem;
        --spacing-3x: 6.4rem;
    }

    
    /*-----------------------------------------------------
    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_w1200{
		max-width: 100%;
		margin: 0 20px;
	}
	
	.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_t1 span{
		margin-bottom: 10px;
	}


	.g_btn{
		width: 260px;
		height: auto;
		background: #fff;
		border-radius: 100px;
		text-align: center;
		margin: 0 auto;
		position: relative;
		border: 1px solid #ccc;
		transition-property: opacity;
		transition-duration: 0.5s;
	}

	.g_btn:hover{
		opacity: 0.7;
	}


	.g_btn::after{
		content: "";
		background: url("../../images/index/arrow_br.svg");
		background-size: 8px;
		display: block;
		width: 8px;
		height: 13px;
		position: absolute;
		right: 26px;
		top: 50%;
		transform: translateY(-50%);
		-webkit-transform: translateY(-50%);
		-ms-transform: translateY(-50%);    
	}

	.g_btn a{
		padding: 20px;
		font-weight: bold;
		font-size: var(--s15);
	}

    /*-----------------------------------------------------
    header
    -------------------------------------------------------*/
	
	#header_box .wrap{
		display: flex;
		justify-content: space-between;
		align-items: center;
		position: relative;
		padding: 18px 18px 18px;
	}

    .header_logo{
        width:  50vw;
    }
	
	
    .menu_btn{
		position: fixed;
		top: 26px;
		right: 18px;
		cursor: pointer;
		width: 30px;
		height: 18px;
		z-index: 1001;
    }

    .menu_btn span{
		display: inline-block;
		transition: all .4s;
		position: absolute;
		left: 0px;
		height: 3px;
		background: var(--color1);
    }


    .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: 60%;
    }

    .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: var(--color2);
		position: fixed;
		top: 0px;
		left: 0px;
		z-index: 1000;
	}
	
    .drawer_wrap {
		height: 100%;
		margin: 50px 20px 80px;
    }
	
	
	.drawer_sp{
		height: 80px;
	}
	
	#content{
	}
    /*-----------------------------------------------------
    mv
    -------------------------------------------------------*/

	.mv .wrap{
		padding: 32px 30px;
		margin: 0 auto;
	}
	
	.mv_img {
		width: 92%;
		margin: 0 auto;
	}

	.mv_txt{
		padding: 22px 0;
		margin: 0 auto;
	}	
	
	/*-----------------------------------------------------
	box1
	-------------------------------------------------------*/

	.box1 {
		padding: 50px 0 50px 0;
	}

	.box1 .g_t1{
		padding: 0 0 16px 0;
	}

	.box1_text{
		padding: 0 0 26px 0;
		line-height: var(--lh16);
	}

	.box1 ul{
		display: flex;
		justify-content: flex-start;
		align-items: stretch;
		flex-wrap: wrap;
		gap: 10px 2%;
	}

	.box1 ul li{
		width: 49%;
	}

	.box1 ul li a{
		padding: 16px;
	}

	.box1 ul li img{
		max-width: 54%;
		margin-bottom: 20px;
	}
    
	.box1 ul li span{
		line-height: var(--lh14);
	}

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

	.box2 .g_t1{
		margin-bottom: 26px;
	}

	.box2 ul{
		flex-direction: column;
		gap: 20px 0px;
	}

	.box2 ul li{
		width: 100%;
		text-align: center;
	}

	.box2 ul li img{
		width: 80%;
		margin: 0 auto 16px;
	}

	.box2 ul li span.t{
		margin-bottom: 10px;
		line-height: var(--lh14);
		text-align: left;
	}

	.box2 ul li p{
		text-align: left;
	}


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

	.box3 .g_t1{
		margin-bottom: 26px;
	}

	.box3 ul{
		margin-bottom: 26px;
	}

	.box3 ul li{
		padding: 26px 50px 26px 40px;
	}

	.box3 ul li.q{
		line-height: var(--lh14);
	}

	.box3 ul li.q::before{
		top: 26px;
	}

	.box3 ul li.q::after{
		width: 20px;
		height: 14px;
	}


	.box3 ul li.a::before{
		position: absolute;
		content: "A.";
		top: 26px;
		left: 10px;
		color: var(--color1);
	}
    
	/*-----------------------------------------------------
	box4
	-------------------------------------------------------*/
	.box4{
		padding: 50px 0 50px 0;
		background: var(--color2);
	}

	.box4_text{
		margin-bottom: 26px;
	}

	.box4_list ul{
		flex-direction: column;
        margin-bottom: 26px;
		gap: 16px 0;
	}

	.box4_list ul li{
		width: 100%;
        display: flex;
        justify-content: space-between;
	}
	
	.box4_img{
		width: 40%;
	}

	.box4_list ul li img{
		margin-bottom: 0;
		border-radius: 6px;
	}
	
    .box4_data {
        width: 56%;
    }
	
	.box4_list ul li span.t1{
		font-weight: bold;
		display: inline-block;
		margin-right: 10px;
	}

	.box4_list ul li span.t2{
		font-weight: bold;
		font-size: var(--s20);
	}

	.box4_list ul li p{
		margin-top: 10px;
		line-height: 1.5;
	}

	
	/*-----------------------------------------------------
	cta
	-------------------------------------------------------*/
	.cta{
		padding: 30px 0 30px;
	}
	
	.cta h2{
		margin-bottom: 12px;
		font-size: var(--s28);
		line-height: var(--lh14);
	}
	
	.cta h2 span{
		display: block;
	}

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

	.cta .wrap{
		width: 100%;
		flex-direction: column;
	}

	.cta_tel{
		width: 100%;
		border-right: 0px;
		margin: 0 0 20px 0;
		padding: 0 0 0 0;
	}

	.cta_tel a{
		width: 80%;
		margin: 0 auto 10px;
		text-align: center;
	}

	.cta_tel .st{
		justify-content: center;
		flex-wrap: wrap;
		gap: 0 6px;
	}

	.cta_line {
		width: 76%;
		margin: 0 auto 12px;
	}
	
	.cta_line a {
		padding: 20px 50px 20px 30px;
	}
	
	.cta_line a::before {
		right: 16px;
		width: 28px;
		height: 28px;
	}

	.cta_line a::after {
		right: 24px;
		width: 10px;
		height: 10px;
	}

	.cta_mail {
		width: 76%;
		margin: 0 auto 0px;
	}
	
	.cta_mail a {
		padding: 20px 50px 20px 30px;
	}
	
	.cta_mail a::before {
		right: 16px;
		width: 28px;
		height: 28px;
	}

	.cta_mail a::after {
		right: 24px;
		width: 10px;
		height: 10px;
	}

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

	#footer_box{
		padding: 50px 0px 40px;
		position: relative;
	}

	.footer_logo{
		width: 58%;
		margin: 0 auto 16px 0;
	}


	.footer_nav{
		margin-bottom: 40px;
	  	flex-direction: column;
		font-size: var(--s15);
		gap: 20px 0;
	}
	
	.footer_nav .g_mb_b{
		margin-bottom: 20px!important;
	}

	.footer_nav .footer_detail{
		width: 100%;
	}

	.footer_nav ul{
		width: 100%;
	}

	.footer_nav ul li{
		margin-bottom: 14px;
	}

	.footer_nav ul li:last-child{
		margin-bottom: auto;
	}

	.footer_nav ul li a{
	}
	
	.footer_item{
		display:flex;
		justify-content: space-between;
		flex-wrap: wrap;
	}
	
	.footer_item li.t{
		width: 100%;
		background: none;
		padding: 0px;
	}
	
	.footer_item li{
		width: 49%;
		background: #fff;
		border-radius: 4px;
		margin-bottom: 10px!important;
	}

	.footer_item li a{
		width: 100%;
		padding: 11px 12px;
	}

	.footer_copyright{
		line-height: var(--lh14);
	}
	
	.footer_cta{
		position: fixed;
		bottom: -19vw;
		left: 0px;
		width: 100vw;
		height: 19vw;
		display:flex;
		justify-content: space-between;
		align-items: center;
		z-index: 999;
		transition: all 0.5s;
		padding: 0 10px;
		background: #fff;
		border-top: 1px solid var(--color2);
	}

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

	.footer_cta .tel{
		width: 56%;
	}
	
	.footer_cta .tel a{
	}

	
    .footer_cta .st {
		display: flex;
		align-items: center;
		justify-content: flex-start;
        gap: 0 6px;
		margin-bottom: 6px;
    }
	
	.footer_cta span.text {
		font-size: var(--s12);
		display: inline-block;
		font-weight: bold;
	}
	
	.footer_cta span.detail {
		font-size: var(--s12);
		display: inline-block;
		background: var(--color2);
		color: var(--color1);
		font-weight: bold;
		padding: 5px 5px;
		border-radius: 6px;
	}
	
	.footer_cta .line{
		width: 20%;
	}
	
	.footer_cta .line a{
		color: #fff;
		display: flex;
		align-items: center;
	    justify-content: center;
		font-size: var(--s12);
		background: #00C300;
		padding: 17px 8px;
		border-radius: 4px;
	}

	.footer_cta .mail{
		width: 20%;
	}
	
	.footer_cta .mail a{
		color: #fff;
		display: flex;
		align-items: center;
	    justify-content: center;
		font-size: var(--s12);
		background: #F36404;
		padding: 17px 8px;
		border-radius: 4px;
	}

	
    /*-----------------------------------------------------
    page-top
    -------------------------------------------------------*/
    
    #page_top_sp {
        position: absolute;
        top: 26px;
        right: 16px;
        z-index: 1;
    }

    #page_top_sp a{
        width: 36px;
        height: 36px;
        display: inline-block;
		background: var(--color1);
		cursor: pointer;
		display: flex;
		justify-content: center;
		align-items: center;
		border-radius: 50%;
    }

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

	#page_top_sp a img{
		width: 8px;
		height: auto;
		transform: rotate(-90deg);
		filter: brightness(0) invert(1);
	}

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