@charset "UTF-8";

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


@media (max-width : 1240px ){
    
	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;
	}

	.g_btn img {
	  width: 60px;
	}
    
	
	/*-----------------------------------------------------
	loade
	-------------------------------------------------------*/
	.loader-logo {
	  width: 200px;
	  position: relative;
	  z-index: 2;
	  opacity: 0;
	  animation: logoFade 1.6s ease forwards;
	}
	
	
    /*-----------------------------------------------------
    header
    -------------------------------------------------------*/
    .header_logo{
        width:  16vw;
    }
	
	.drawer_btn {
		width: 70px;
		height: 70px;
	}
		
	.header_contact p span.ad span{
		margin: 10px 0 0 0;
		display: block;
	}

	
    /*-----------------------------------------------------
    others
    -------------------------------------------------------*/
    .footer_logo{
        width: 16vw;
    }

	.hzscroll {
		margin: 0 0 0 0.5%;
	}
	
	.hzscroll_left {
		width: 26%;
	}
	
	.hzscroll_left .wrap {
		max-width: 190px;
		margin: 0 auto 0 30px;
	}
	
	.hzscroll_slide {
		width: 74%;
	}
	
	.flow_swiper .swiper-slide {
		width: 64%;
	}
	
	.scene .wrap {
		padding: 60px 40px;
	}
	
	
	
	.cta .wrap{
		max-width: 90%;
		margin: 0 auto;
	}
	
	.cta dl dt {
		width: 54%;
	}
	
	.cta dl dd {
		width: 46%;
	}

	
	.cta .cta_logo {
		width:  17vw;
	}
	
	
}
    
@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.4rem;
		--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 a {
		font-size: var(--s17);
		gap: 6px;
	}
	
	/*-----------------------------------------------------
	loade
	-------------------------------------------------------*/

	  .panel-1,
	  .panel-2,
	  .panel-3 {
		display: none;
	  }

	  .panel-sp {
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		width: 100%;
		background: #ffffff;
		z-index: 1;
		transform-origin: left center;
		transform: scaleX(1);
		animation: panelShrinkSP 0.8s cubic-bezier(.25,.46,.45,.94) forwards;
		animation-delay: 1.6s;
	  }

	  @keyframes panelShrinkSP {
		0% { transform: scaleX(1); }
		100% { transform: scaleX(0); }
	  }
	
	.loader-logo {
	  width: 46%;
	}

	
    /*-----------------------------------------------------
    header
    -------------------------------------------------------*/
	
    .header_logo{
        width:  37vw;
		margin: 16px 0 0 16px;
    }
	
	#header_box .wrap {
		padding: 26px 0;
	}
	
    
    /*-----------------------------------------------------
    drawer
    -------------------------------------------------------*/
		
    .drawer_btn {
        width: 60px;
        height: 60px;
		position: fixed;
		right: 0;
		top: 0;
    }
	
	.drawer {
		
	}
			
	.drawer_nav {
		width: 100%;
		padding: 90px 10px 300px;
		display: block;
	}
	
	.drawer_nav .wrap{
		display: block;
	}

	
	.drawer_nav_main {
		gap: 40px;
		height: auto;
		justify-content: flex-start;
		align-items: stretch;
	}

	.header_cont {
		position: absolute;
	}	
	
	.header_list{
		flex-direction: column;
		gap: 40px;
	}


	.header_contact{
		width: 100%;
		margin: 0 auto;
		padding: 30px 26px;
		background: #fafafa;
	}


	.header_contact p span.tel{
		margin-bottom: 20px;
	}

	.header_contact p span.ad{
		font-size: var(--s22);
		margin-bottom: 20px;
	}

	.header_contact p span.ad span{
		font-size: var(--s18);
		margin: 10px 0 0 0;
		display: block;
	}


	.header_contact p .map a{
		display: inline-block;
		border-bottom: 1px solid #ddd;
		margin-bottom: 20px;
	}

	.header_contact .map a span{
		display: inline-block;
		margin-left: 6px;
	}

	.header_link{
		width: 100%;
		display: flex;
		justify-content: flex-end;
		flex-wrap: wrap;
		padding-right: 0;
		border-right: none;
		gap: 30px 0;
		text-align: left;
	}

	.header_link ul{
		width: 50%;
		gap: 12px;
	}

	.drawer_nav_sub{
		padding: 0 0 0 0;
	}

	.drawer_nav_sub ul{
		display: flex;
		justify-content: center;
		flex-wrap: wrap;
		gap: 16px 0;
		margin-bottom: 100px;
	}

	.drawer_nav_sub ul li {
		width: 50%;
		text-align: center;
		padding: 0 0;
		border-right: 1px solid #ddd;
		font-size: var(--s15);
	}

	.drawer_nav_sub ul li:nth-child(2n) {
		border-right: none;
	}
	
	.header_contact p span.time {
		display: block;
		line-height: var(--lh16);
	}
	
	/*-----------------------------------------------------
	mv
	-------------------------------------------------------*/


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

	.box1 {
		padding: 30px 0 36px 0;
	}

	.box1 .g_t1 {
		margin-bottom: 26px;
	}
	
	.box1_contact{
		max-width: auto;
		margin: 0 auto 40px;
		padding: 22px 0;
	}

	.box1_contact .text{
		margin-bottom: 12px;
	}

	.box1_contact .tel{
		margin-bottom: 12px;
	}

	.box1_contact .time{
		display: block;
		line-height: var(--lh16);
	}

	
	/*-----------------------------------------------------
	news_top
	-------------------------------------------------------*/

	.news_top{
		padding: 30px 0 60px 0;
		background-size: 800px;
	}

	.news_top .wrap{
		flex-direction: column;
		gap: 48px 0;
	}

	.news_top_left{
		width: 100%;
	}

	.news_top_left p{
		padding: 16px 0 20px 0;
	}

	.news_top_right{
		width: 100%;
	}

	.news_top_right ul{
		display:flex;
		flex-direction: column;
		gap: 20px;
	}

	.news_top_right ul li a{
		display:flex;
		justify-content: space-between;
	}

	.news_top_right ul li .img{
		width: 34%;
	}

	.news_top_right ul li .text{
		width: 60%;
	}

	.news_top_right ul li .text .time{
		margin-bottom: 10px;
	}


	/*-----------------------------------------------------
	box2（背景と全体）
	-------------------------------------------------------*/
	.box2{
		padding: 60px 0 70px;
	}

	.box2 .g_btn{
		margin: 0 auto 0 0;
	}

	.hzscroll{
		flex-direction: column;
		gap: 36px 0;
		margin:0 0 0 0;
	}

	.hzscroll_left{
		width:100%;
	}

	.hzscroll_left .wrap{
		max-width: 78%;
		margin: 0 auto;
		gap: 16px;
	}

	.hzscroll_left p{
		margin-bottom: 10px;
	}



	/*-----------------------------------------------------
	swiperスライド部分
	-------------------------------------------------------*/
	.hzscroll_slide{
		width:92.5%;
		margin:0 0 0 7.5%;
	}

	.hzscroll_swiper{
	  padding-bottom:40px;
	}

	.hzscroll_slide .swiper-slide{
		width:82%;
	}

	.hzscroll_slide .swiper-slide:last-child {
	  margin-right: 20%;
	}

	.hzscroll_slide .swiper-slide h3 {
		padding-top: 20px;
	}
	.swiper-scrollbar{
		width:140px;
	}
	
    .box2 .g_btn {
        margin: 0 auto 0;
    }
    
	/*-----------------------------------------------------
	box3
	-------------------------------------------------------*/
	.box3{
		padding: 60px 0 60px 0;
	}

	.box3 .swiper-slide{
		width:76%;
	}



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

	.box4_list{
		margin-bottom: 30px;
	}

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

	.box4_list ul{
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
		gap: 24px 0;
	}

	.box4_list ul li{
		width: 30%;
	}

	 .box4_list ul li span {
		font-size: var(--s17);
	}
	
	/*-----------------------------------------------------
	box5
	-------------------------------------------------------*/
	.box5{
		padding: 40px 0 40px 0;
	}

	.box5_list ul{
		gap: 16px 0;
	}

	.box5_list ul li{
		width: 47.5%;
	}

	.box5_list ul li span{
		padding: 10px 0;
		display: block;
		text-align: center;
		color: #fff;
	}

	/*-----------------------------------------------------
	scene
	-------------------------------------------------------*/
	.scene .wrap{
		padding: 50px 30px;
	}

	.scene_list{
		margin: 0 0 30px;
	}

	.scene_list .g_t1{
		margin-bottom: 30px;
		line-height: var(--lh14);
	}

	.scene_list ul{
		display:flex;
		justify-content: space-between;
		flex-wrap: wrap;
		gap: 10px 0;
		margin: 0 auto 26px;
	}

	.scene_list ul li{
		width: 48%;
		padding: 10px 0;
		border: 1px solid #ddd;
		text-align: center;
	}

	.scene_list ul li:last-child {
		border-right: 1px solid #ddd;
	}


	.scene_list p{
		line-height: var(--lh20);
	}
	
	/*-----------------------------------------------------
	box6
	-------------------------------------------------------*/
	.box6{
		padding: 60px 0 60px 0;
	}

	.box6 .g_t1{
		margin-bottom: 36px;
	}

	.box6 .wrap{
		flex-direction: column;
		gap: 30px;
	}

	.box6 .box6_tbox{
		gap: 15px;
	}

	.box6_t{
		display:flex;
		align-items: center;
		gap: 20px;
	}

	.box6_t h3{
		width: 15%;
	}

	.box6_t p{
		width: 85%;
		text-align: left;
		line-height: var(--lh14);
	}

	.box6_floor{
		margin-bottom: 40px;
	}


	.box6_floor ul {
		display:flex;
		flex-wrap: wrap;
		justify-content: flex-start;
		gap: 20px 20px;
	}

	.box6_floor li {
		border-right: 1px solid #ccc;
		padding-right: 20px;
	}


	.box6_floor li:last-child{
		border-right: none;
	}

	.flow_block{
		margin-bottom: 40px;
	}

	.box6_layout{
		margin-bottom: 26px;
		overflow: hidden;
	}

	.flow_swiper .swiper-slide{
		width: 90%;
		padding: 0 5px;
	}

	.flow_pagination .swiper-pagination-bullet{
		width: 12px; 
		height: 2px;
	}

	.flow_pagination {
		gap: 8px;
	}
	
	/*-----------------------------------------------------
	cta
	-------------------------------------------------------*/
	.cta{
		padding: 50px 0 30px;
	}

	.cta dl{
		flex-direction: column;
	}

	.cta dl dt{
		width: 90%;
		margin: 0 auto 30px;
	}

	.cta dl dd{
		width: 100%;
		height: 190px;
		overflow: hidden;
	}
	
	.cta dl dd img{
		width: 100%;
		height: 100%;
		object-fit: cover;
		object-position: center center;
	}

	.cta .cta_logo{
		width: 36vw;
		margin-bottom: 20px;
	}

	.cta p span.tel{
		font-size: var(--s32);
		margin-bottom: 22px;
	}

	.cta p span.tel .s{
		font-size: var(--s24);
	}

	.cta p span.ad{
		display: block;
		margin-bottom: 20px;
	}

	.cta p .map a{
		margin-bottom: 26px;
	}

	.cta .map a img{
		width: 16px;
	}

	.cta p span.ad span{
		font-size: var(--s20);
		margin-left: 0;
	}	
	
	.cta p span.time{
		display: block;
		margin-bottom: 24px;
		line-height: var(--lh14);
	}


	.cta p.text{
		line-height: var(--lh18)!important;
	}

	/*-----------------------------------------------------
	footer
	-------------------------------------------------------*/
	#footer_box{
		padding: 70px 0px 30px;
	}

	.footer_nav{
		margin-bottom: 60px;
		flex-wrap: wrap;
		gap: 30px 0;
	}
	
	.footer_nav .footer_link{
		width: 50%;
	}

	.footer_nav ul {
		gap: 12px;
	}
	
	.footer_sub{
		padding: 18px 0;
	}

	.footer_sub ul{
		display:flex;
		justify-content: center;
		flex-wrap: wrap;
		gap: 10px 0;
	}

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

	.footer_copyright{
		padding-top: 30px;
	}

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