@charset "UTF-8";

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


@media (max-width : 1100px ){
    
	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.7rem;
		--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_w1240{
		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 {
		padding: 0 20px;
	}
	
	.header_logo h1{
		width: 260px;
		height: auto;
	}

	.header_mark{
		width: 126px;
		height: auto;
	}

	.header_cont ul {
		gap: 0 10px;
	}
    /*-----------------------------------------------------
    others
    -------------------------------------------------------*/
	
	
	.mv_character {
		bottom: -110px;
	}
	
	
}
    
@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;
		--s17: 1.6rem;    
		--s18: 1.7rem;
		--s20: 1.7rem;
		--s22: 1.8rem; 
		--s24: 2.0rem;    
		--s26: 2.0rem;     
		--s28: 2.0rem;     
		--s32: 2.2rem;
		--s38: 2.8rem;
		--s40: 2.6rem;
		--s42: 2.8rem;
		--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_t1vc h2{
		writing-mode: initial;
		text-align: left;
		letter-spacing: 8px;
		display: flex;
		flex-direction: column;
	}
	
	.g_t1vc h2 span.main{
		order: 2;
	}


	.g_t1vc h2 span.s1{
		font-size: var(--s18);
		display: block;
		padding-right: 0;
		padding-bottom: 4px;
		letter-spacing: 4px!important;
		order: 1;
		margin-top: 0px;
	}

	.g_btn{
		max-width: 70%;
		padding: 18px 30px;
	}

	.g_btn a {
		font-size: var(--s17);
	}

	.g_btn a .arrow{
		position: absolute;
		right: 0px;
		width: 10px;
		top: 50%;
		transform: translateY(-50%);
		margin-top: 1px;
	}	
	
    /*-----------------------------------------------------
    header
    -------------------------------------------------------*/
	#header {
		height: auto;
		padding: 20px 16px;
	}
	
	.header_logo{
		width: 76%;
	}

	
	.header_logo h1{
		width: 80%;
	}

	.header_mark{
		width: 30%;
	}
	    
    /*-----------------------------------------------------
    drawer
    -------------------------------------------------------*/
		
	.drawer_btn{
		width: 60px;
		height: 60px;
		position: fixed;
		right: 0;
		z-index: 81;
	}

	.drawer_btn:hover{
		cursor: pointer;
	}

	.drawer_btn_wrap{
		width: 25px;
		height: 18px;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		-webkit-transform: translate(-50%, -50%);
		-ms-transform: translate(-50%, -50%);
	}

	.drawer_btn_wrap span{
	  position: absolute;
	  display: inline-block;
	  transition: all .4s;
	  height: 2px;
	  background: #000;
	}

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

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

	.drawer_btn_wrap span:nth-of-type(3) {
	  width: 60%;
	  top:17px;
	}

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

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

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

	
	/*-----------------------------------------------------
	mv
	-------------------------------------------------------*/

	.mv_img{
		width: 100%;
		height: auto;
		padding: 20px 20px;
		text-align: center;
	}

	.mv_character{
        position: absolute;
        bottom: -42px;
        right: 0px;
        width: 22vw;
	}

	.mv_text{
		left: 20px;
		width: 56vw;
	}

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

	.mv_subtext p.s1{
		font-size: var(--s32);
		font-weight: bold;
		line-height: var(--lh16);
		margin-bottom: 16px;
	}

	.mv_subtext p.s1 span{
		color: var(--color1);
	}

	.mv_subtext p.s2{
		line-height: var(--lh18);
	}


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

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

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

	.box1 ul{
		display:flex;
		flex-direction: column;
		gap: 12px 0;
	}

	.box1 ul li{
		width: 100%;
		display: flex;
	}

	.box1 ul li dl{
		padding: 20px;
	}

	.box1 ul li dl dt{
		margin-bottom: 16px;
		padding-bottom: 16px;
		border-bottom: 1px solid #ddd;
	}

	.box1 ul li dl dt a{
		text-align: center;
		font-weight: bold;
		font-size: var(--s17);
		position: relative;
		text-align: left;
		color: var(--color1);
		display: inline-block;
	}

	.box1 ul li dl dt a .arrow {
		position: absolute;
		right: -20px;
		width: 7px;
		top: 50%;
		transform: translateY(-50%);
		margin-top: 3px;
	}




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

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

	.box2 ul li span.ct{
	}

	.box2 ul li span.name{
	}

	.swiper{
		margin-bottom: 30px;
	}

	.shop_slider_sec .swiper-slide {
		width: 80%!important;
		margin: 0 5px;
	}

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

	.box3_t{
		padding: 26px 0;
	}

	.box3_t h2{
		font-size: var(--s22);
		font-weight: bold;
		color: #fff;
	}

	.box3_line{
		padding: 26px 30px;
		background: #fff;
		flex-direction: column;
		gap: 26px 0;
	}

	.box3_img{
		width: 40%;
		margin: 0 auto;
 	}


	.box3_text{
		width: 100%;
	}

	/*-----------------------------------------------------
	box4
	-------------------------------------------------------*/
	.box4{
		padding: 20px 0 60px;
	}
	
	.box4 .g_t1{
		margin-bottom: 30px;
	}
	
	.box4 .flow ul{
		flex-direction: column;
		padding-bottom: 0;
		margin-bottom: 12px;
		gap:12px;
	}
	
	.box4 .flow ul:first-child::after{
		height: 120%;
	}
	
	.box4 .flow ul::after{
		width: 3px;
		height: 100%;
		top:0%;
		left: 10%;
		transform: translateX(-10%);
	}
	
	.box4 .flow ul li{
		width: 100%;
	}
		
	.box4 .flow .sp_row{
		display: flex;
		justify-content: flex-start;
		align-items: center;
		gap:3%;
		padding-bottom: 14px;
	}
	
	.box4 .flow ul li .step{
		font-size: var(--base);
		padding-bottom: 0;
	}
	
	.box4 .flow ul li h3{
		padding-bottom: 0;
	}
	
	.box4 .flow ul li p{
		font-size: var(--base);
	}
	
	
	

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

	.cta h2{
		margin-bottom: 20px;
	}

	.cta span.time{
		margin-bottom: 16px;
		line-height: var(--lh14);
	}

	.cta span.tel{
		width: 60%;
		display: block;
		margin: 0 auto 16px;
	}

	.cta .cta_logo{
		width: 80%;
		margin: 0 auto 16px;
	}

	/*-----------------------------------------------------
	footer
	-------------------------------------------------------*/

	.footer_sub{
		padding: 30px 0;
	}

	.footer_sub ul{
		flex-direction: column;
		gap: 16px;
	}

	.footer_sub ul li{
		padding: 0 0;
		border-right: none;
	}

	.footer_copyright{
		padding: 16px 0;
	}

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