@media screen and (min-width: 821px) {
	header .bottom .right ul li:hover ul{ display: block; }
}


@media screen and (max-width: 1300px) {
	#top .fv .text{ left: calc((100vw - 90%) / 2); }
}

@media screen and (max-width: 1100px) {
}


@media screen and (max-width: 1080px) {
	footer .bottom .box .flex{ -ms-flex-wrap: wrap; flex-wrap: wrap; }
	footer .bottom .box .btn{ margin-top: 15px; }

	footer .bottom .box h4{ font-size: 2rem; }
	#company #sec01 .right{ padding-left: 20px; }
}

@media screen and (max-width: 991.98px) {
	#top .fv .text p { font-size: 2.8rem; padding: 15px 6px 10px; letter-spacing: 5px; }
	.sub .title-box .text{ padding: 50px 120px 50px 60px; }
	.sub .title-box .text h2{ font-size: 1.7rem; }
	.sub .title-box .text h2 span{ font-size: 3.3rem; }
}


@media screen and (max-width: 820.98px) {
	.ipad { display: block; }

	header{  }
	header .top{ display: none; }
	header .box .left{ height: auto; position: fixed; top: 0; left: 15px; padding: 10px 0; width: 100%; z-index: 999;}
	header .box .left h1 img{ max-height: 30px; }
	header .box .right .modalbtn{ padding: 13px; display: block; right: 0; top: 0; width: 50px; height: 50px; background: var(--main-color); position: fixed; z-index: 999; }
	header .box .right .modalbtn:before{ content: ""; transition: 0.3s; position: absolute; width: 20px; height: 1px; background: #fff; top: 21px; left: 0; right: 0; margin: auto; }
	header .box .right .modalbtn:after{ content: ""; transition: 0.3s; position: absolute; width: 20px; height: 1px; background: #fff; bottom: 21px; left: 0; right: 0; margin: auto; }
	header .box .right .modalbtn.active:before{ content: ""; -webkit-transform: rotate(45deg); transform: rotate(45deg); top: 24px; }
	header .box .right .modalbtn.active:after{ content: ""; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); bottom: 24px; }
	header .box .right nav{ transition: 0.3s; background: rgb(255 255 255 / 95%); position: fixed; top: 0; right: -100%; bottom: 0; height: 100%; width: 100%; z-index: 990; padding-top: 80px; }
	header .box .right nav.active{ right: 0; }
	header .box .right ul{ overflow: scroll; -ms-flex-wrap: wrap; flex-wrap: wrap; }
	header .box .right ul li{ width: 80%; margin: 20px  auto; }
	header .box .right ul li:nth-child(-n+2) a{ margin-right: 0; }
	header .box .right ul li:not(:last-child) a:before{ content: none; }
	header .box .right ul li:nth-child(3){ margin-bottom: 7px; }
	header .box .right ul li:nth-child(3) a{ padding: 20px 15px!important; }
	header .box .right ul li:nth-child(4) a{ padding: 20px 15px!important; border: 1px solid var(--main-color); }
	header .box .right ul li a:after{ content: none!important; }
	header .box .right ul li a{ position: relative; padding: 0 15px; width: 100%; }
	header .box .right ul li .nav-link a{ pointer-events: none; }
	header .box .right ul li.nav-item a:before{ -webkit-transform: rotate(90deg); transform: rotate(90deg); right: 18px; }
	header .box .right ul li .nav-link.active a:before{ -webkit-transform: rotate(-90deg); transform: rotate(-90deg); }
	header .box .right ul li a span{ display: none; }
	header .box .right ul li .sp{ display: block; }
	header .box .right ul li ul{ overflow: hidden; transition: 0s; padding: 0; height: auto; display: none; position: unset!important; border-radius: 0; background: var(--main-color); }
	header .box .right ul li ul li a{ padding: 25px 15px!important; }
	header .box .right ul li ul li a:after{ content: ""!important; right: 21px!important; height: 10px!important; }
	.sub { padding-top: 50px; }

	#office #sec02 .box3 ul li{ width: 25%; }

	footer .bottom{ display: block; }
	footer .bottom .box{ width: 100%; }
	footer .bottom .box:nth-child(1){ margin-bottom: 40px; }
	footer .bottom .box .flex{ -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; }
}

@media screen and (max-width: 768px) {
	#top .fv .text p { font-size: 2.2rem; }
	#top #sec03 .flex .box,
	#top #sec03 .box .right{ padding: 30px; }
}

@media screen and (max-width: 640px) {
	.pc{ display: none; }
	.sp{ display: block; }
	.ipad { display: none; }

	.btn{ font-size: 1.4rem; min-width: auto; max-width: 230px; width: 100%; }

	header .box .right ul li:nth-child(3) a{ padding: 0!important; }
	header .box .right ul li:nth-child(-n+3) a{ margin-right: 0; }

	#top section h2{ font-size: 1.6rem; }
	#top .fv .text1 h2{ font-size: 3rem; }
	#top .fv .text1 p{ padding-top: 10px; font-size: 1.2rem; }
	#top .fv .text1{ max-width: 300px; left: 20px; top: 55%; }
	#top .fv img{ object-position: 24%; }

	#top #sec01 .flex{ display: block; }
	#top #sec01 .flex .left{ margin-bottom: 40px; width: 100%; }
	#top #sec01 .flex .left h2 { margin-bottom: 20px; }
	#top #sec01 .flex .left h2 span{ font-size: 3rem; }
	#top #sec01 .flex .left p { display: none; font-size: 1.4rem; }
	#top #sec01 .flex .right{ width: 100%; height: 270px; }
	#top #sec01 { padding: 70px 0; }
	#top #sec02 .box h2{ font-size: 2rem; }
	#top #sec02 .box p{ margin-bottom: 25px; font-size: 1.4rem; line-height: 1.5em; }
	#top #sec02 .box{ padding: 50px 0; }

	#top #sec03 { padding: 70px 0; }
	#top #sec03 .box{ margin-bottom: 30px; width: 100%; display: block; }
	#top #sec03 .box .left{ width: 100%; }
	#top #sec03 .box .right{ width: 100%; padding: 30px; }
	#top #sec03 .flex{ display: block; }
	#top #sec03 .flex .box{ width: 100%; padding:0px 0px 30px 0px; }
	#top #sec03 .flex .box:nth-child(1){ margin-bottom: 30px; }
	#top #sec03 .box .mbtn-box{ margin-left:30px; margin-right:30px; }
	#top #sec03 .box h3{ font-size: 2.3rem; }
	#top #sec03 .box p{ font-size: 1.4rem; }
	#top #sec03 .box .btn{ max-width: 100%; }
	#top #sec03 .flex .textbox{ width: 100%; padding: 30px 30px 0px 30px; }

	#top #sec04 .box{ padding: 50px 0; }
	#top #sec04 .box h2{ font-size: 2rem; }
	#top #sec04 .box p{ margin-bottom: 25px; font-size: 1.4rem; line-height: 1.5em; }

	footer{ text-align: center; padding: 120px 0 0; }
	footer .top{ margin-bottom: 40px; }
	footer .bottom{ padding-bottom: 60px; display: block; }
	footer .bottom .box{ width: 100%; }
	footer .bottom .box:nth-child(1){ margin-bottom: 30px; }
	footer .bottom .box h4{ margin-bottom: 12px; line-height: 1.5em;font-size: 1.7rem; }
	footer .bottom .box p{ font-size: 1.4rem; line-height: 1.5em; }
	footer .bottom .box .flex{ display: block; }
	footer .bottom .box .btn{ margin-top: 15px; }

	#office #sec02 .box1,
	#office #sec02 .box2{ margin-bottom: 80px; }
	#office #sec01 p{ margin-bottom: 30px; font-size: 1.6rem; }
	#office #sec01 ul{ display: block; }
	#office #sec01 ul li{ width: 80%; margin: auto; }
	#office #sec01 ul li:not(:last-child){ margin-bottom: 25px; }
	#office #sec01 ul li a{ font-size: 1.8rem; padding: 25px 15px; }
	#office #sec01 ul li a span{ font-size: 1.4rem; }
	#office #sec01 ul li a:before{ height: 20px; bottom: -10px; }
	#office #sec02 .box .box-title .img-box{ width: calc( 100% + 30px ); margin-left: -15px; }
	#office #sec02 .box .box-title .text{ padding: 30px; margin-top: -20px; }
	#office #sec02 .box .box-title .text h3{ font-size: 2.3rem; }
	#office #sec02 .box .box-title .text h3 span { margin-bottom: 7px; font-size: 1.5rem; }
	#office #sec02 .box .box-title .text p{ font-size: 1.4rem; }
	#office #sec02 .box h4{ font-size: 1.8rem; }
	#office #sec02 .box1 .box1-img{ margin: 0 auto 50px; max-width: 80%; }
	#office #sec02 .box1 .point-box{ padding: 30px; }
	#office #sec02 .box1 .point-box li{ font-size: 1.4rem; }
	#office #sec02 .box .btn-box{ margin-top: 30px; }
	#office #sec02 .box2 ul li{ padding: 55px 10px 20px; margin: 0 auto; width: 49%; }
	#office #sec02 .box2 ul li:not(:last-child){ }
	#office #sec02 .box2 ul li img { width: 75px; top: -37.5px; }
	#office #sec02 .box2 ul li h5{ font-size: 1.8rem; margin-bottom: 10px; }
	#office #sec02 .box2 ul li p{ font-size: 1.3rem; }
	#office #sec02 .box2 h4 { margin-bottom: 60px; }
	#office #sec01 { padding-bottom: 80px; }

	#office #sec02{ margin-top:30px; }
	#office .btn{ max-width:100%; }
	.btn1{ margin-bottom:10px; padding: 20px 10px; }
	.btn2{ padding: 20px 10px; } 
	#office #sec02 .box2 ul{ flex-wrap:wrap; }
	#office #sec02 .box2 ul li{ width:100%; } 		
	#office #sec02 .box2 ul li:not(:first-child){ margin-top:50px; }
	#office #sec02 .box .titleboxline h4{ font-size:2rem; }
	#office #sec02 .box .titleboxline h4 br{ display:none; }
	#office #sec02 .box3 ul{ width:100%; max-width:100%; flex-wrap:wrap; }
	#office #sec02 .box3 ul li{ width:48%; }

		
	#company #sec01 .left{ width: 100%; }
	#company #sec01 .right{ padding-left: 0px; margin-top: 50px; width: 100%; }
	#company #sec01 .flex{  -ms-flex-wrap: wrap; flex-wrap: wrap; }
	#company #sec01 .right iframe{ width: 100%; height: 250px; }
	
	#company #sec01 dl dd{ line-height:1.5em; }
	#company #sec02{ margin-top:80px; }
	#company #sec02 .box1{ padding-left:0; padding-right:0; margin-bottom:40px; }
	#company #sec02 .box .box-title .img-box{ width: calc( 100% + 30px ); margin-left: -15px; }
	#company #sec02 .box .box-title .text{ padding: 30px; margin-top: -20px; }
	#company #sec02 .box .box-title .text h3{ font-size: 2.3rem; }
	#company #sec02 .box .box-title .text h3 span { margin-bottom: 7px; font-size: 1.5rem; }
	#company #sec02 .box .box-title .text p{ font-size: 1.4rem; }
	#company #sec02 .box h4{ font-size: 1.8rem; }
	#company #sec02 .box1 .box1-img{ margin: 0 auto 50px; max-width: 80%; }
	#company #sec02 .box1 .point-box{ padding: 30px; }
	#company #sec02 .box1 .point-box li{ font-size: 1.4rem; }
	#company #sec02 .box .btn-box{ margin-top: 30px; }
	#company #sec01 h2, #company #sec02 h2{ font-size:3rem; margin-bottom:40px; }
	#company #sec02 .box .bigtitle, #company #sec02 .box .bigtitle1{ font-size:2.5rem; }
	#company .btn{ max-width:100%; }
	#company #sec02 .box .titleboxline h4{ font-size:2rem; }
	#company #sec02 .box .titleboxline h4 br{ display:none; }
			
	.sub { padding-top: 50px; }
	.sub .title-box {  }
	.sub .title-box .text:before { border-right: 1px solid var(--main-color); border-bottom: 1px solid var(--main-color); right: -10px; bottom: -10px; }
	.sub .title-box .text{ width: 60%; max-width: 300px; transform: unset; padding: 30px; top: auto; bottom: -50px; }
	.sub .title-box img{ padding-left: 0; height: 200px; object-fit: cover; object-position: center; }
	.sub .title-box .text h2{ font-size: 1.5rem; }
	.sub .title-box .text h2 span{ font-size: 2.8rem; }

	#top .fv .text p { writing-mode: unset; letter-spacing: 2px; font-size: 2rem; padding: 7px 9px; }
	#top .fv .text p:nth-child(1){ margin-bottom: 6px; order: 2; }
	#top .fv .text p:nth-child(2){ margin-bottom: 6px; order: 1; }
	#top .fv .text { bottom: 20px; left: 0; display: flex; flex-direction: column; align-items: flex-start; }

	.fv img{ height: 300px; object-fit: cover; object-position: right; }
	#office #sec02 .box1 .point-box img { width: 85px; right: 10px; top: -43px; }

	footer .bottom .box .btn { max-width: 200px; }

	#office #sec02 .box3 .box3-img{ margin: 50px auto 70px; }
	#office #sec02 .box .box-title { margin-bottom: 70px; }

	footer small{ padding: 15px; }



}


@media screen and (max-width: 420px) {
	#office #sec02 .box1 .point-box img{ right: -25px; top: -55px; width: 80px; }
}