/*-------------
基本設定
--------------*/
body{
  font-size: 4.5vw
}
.pc{
  display: none;
}
.tab{
  display: none;
}
.mobi{
  display: block;
}
.pc.tab{
  display: none;
}
.btn{
  width: 95%;
  margin: auto;
}
.container{
  width: calc(100% - 20px);
}
.title{
  font-size: 9vw;
}
.title span{
  font-size: 4vw;
}
.alt-title{
  font-size: 6vw;
}
/*-------------
header
--------------*/
.header-pc{
  display: none;
}
.header-sp{
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 5px;
  box-sizing: border-box;
  width: 100%;
}
header .logo{
  margin: 0;
  width: auto;
  height: 50px;
}
header .logo img{
  width: auto;
  height: 50px;
}
.header-sp .lang{
  font-size: 3vw
}
.header-sp .lang li{
  padding: 5px;
}
.hamburger{
  width: 40px;
  height: 23px;
  position: relative;
  padding: 10px;
  box-sizing: border-box;
}
.hamburger span{
  width: 80%;
  height: 5px;
  border-radius: 3px;
  background: #000;
  display: block;
  position: absolute;
  left: 0;
  transition: all ease .3s;
}
.hamburger span:first-of-type{
  top: 0;
}
.hamburger span:nth-of-type(2){
  top: 50%;
  transform: translateY(-50%);
}
.hamburger span:last-of-type{
  bottom: 0;
}
.hamburger span:first-of-type.active{
  top: 9px;
  transform: rotate(45deg);
}
.hamburger span:nth-of-type(2).active{
  opacity: 0;
}
.hamburger span:last-of-type.active{
  bottom: 9px;
  transform: rotate(-45deg);
}
.header-nav-sp{
  top: 60px;
}
.header-nav-sp.active{
  visibility:visible;
  opacity: 1;
}
.header-nav-sp .menu li{
  padding: 0;
  display: block;
  font-size: 4vw;
}
.header-nav-sp .header-contact{
  font-size: 4vw;
  text-align: center;
}
/*-------------
top
--------------*/
.top-kv{
  margin-top: 60px;
  min-height: 500px;
  aspect-ratio: unset;
  background-size: cover;
}
.top-kv-txt{
  padding-left: 10px;
}
.top-kv-txt h1{
  font-size:7vw;
  margin-bottom: 20px;
}
.top-kv-txt p{
  font-size: 5vw;
}
.top-kv-txt p:last-of-type{
  font-size: 5.5vw;
  margin-top: 20px;
}
.top-point{
  background-size: 100% 100%;
  padding: 30px 0;
}
.top-point .flex-between{
  flex-wrap: wrap;
  justify-content: center;
}
.top-point-inner{
  width: calc(95% / 2);
  height:30vw;
  margin-bottom:3vw;
}
.top-point-inner img{
	margin: 5px auto;
	max-width: 15vw;
}
.top-point .container {
    column-gap: 2vw;
    row-gap: 2vw;
}
.top-point-inner p{
	font-size:3.5vw;
}
.top-point .container a::before {
    width: 12px;
    bottom: 2px;
}
/*-------------
services
--------------*/
.service{
  padding: 50px 0 0;
}
.service h2{
  margin-bottom: 0;
}
.service-inner-pc{
  display:none;
}
.service-inner-sp{
  display: block;
  padding: 20px 10px;
}
.service-inner-ttl{
  font-size: 6vw;
}
.service-inner-sp .service-inner-ttl .num{
  font-size: 9vw;
  padding-left:30px;
}
.service-inner-sp .service-inner-ttl .num::before{
  width: 22px;
  height: 3px;
}
.service-inner-txt .btn{
  font-size: 4vw;
}
/*-------------
access
--------------*/
.access{
  margin: 50px 0;
}
.access-txt.flex-start{
  flex-wrap: wrap;
}
.access-txt div{
  width: 100%;
  font-size:4vw;
}
.access .bg{
padding: 30px 0;
}
.access .bg::before{
  width: 100%;
}
.access-map{
  display: block;
}
.access-map-inner .btn{
  margin: 40px 0;
}
.access-txt p:first-of-type{
  font-size: 6vw;
}
.access img{
  margin-top: 30px;
  width: 100%;
}
.access-map iframe{
  width: 100%;
  height:200px;
}
/*-------------
footer
--------------*/
footer{
  font-size: 4.3vw;
}
footer .logo{
  width: 70%;
}
.footer-inner{
  width: calc(100% - 20px);
  margin: 0 10px;
  flex-wrap: wrap;
  padding: 30px 0;
}
.footer-inner-nav li{
  font-size: 4vw;
}
.footer-inner .flex-between{
  flex-wrap: wrap;
  width: 100%;
}
.footer-inner .flex-between ul{
  width: 100%;
  margin-top: 10px;
}
.copyright{
  font-size: 3vw;
}
/*-------------
contact banner
--------------*/
.contact-banner-inner{
	padding:22px 0;
}
.contact-banner-inner h2{
  font-size: 9vw;
  text-align:center;
}
.contact-banner-inner img{
  width: 55%;
  right:0;
}
.contact-banner-button .mail{
  width: 90%;
  font-size: 5vw;
  padding: 10px 30px 10px 60px;
  margin: 70px auto 0;
}
.contact-banner-button .mail::before{
  width: 30px;
  left: 20px;
}
.contact-banner-button a .small{
  font-size: 4vw;
}
/*-------------
news
--------------*/
.news-wrap{
  padding: 30px 10px;
}
/*-------------
page
--------------*/
.page-wrap{
  margin-top: 60px;
}
.page-title{
  height: 170px;
}
.page-title h1{
  font-size: 6vw;
}
.page-title h1 span{
  font-size: 4vw;
}
.page-inner-link .flex-center{
  flex-wrap: wrap;
}
.page-inner-link li{
  width: 95%;
  height: 13vw;
}
.breadcrumbs{
  font-size: 4vw;
}
/*-------------
page about
--------------*/
.about-representative{
  padding-top: 30px;
}
.about-representative .flex-between{
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 30px;
}
.about-representative-txt h3{
  margin-top: 20px;
  font-size: 7vw;
}
.about-representative-txt h3 > span{
  font-size: 5.5vw;
}
.about-representative-txt p{
  margin-bottom: 30px;
}
.about-company{
  padding: 30px 0;
}
.about-company .title{
  margin: 0 auto 30px;
}
.about-company-inner{
  padding: 10px;
}
.about-company-inner th,
.about-company-inner td{
  display: block;
  width: 100%;
  padding: 15px;
}
.about-company::before{
  height: 100%;
}
/*-------------
page contact
--------------*/
.form-wrap{
  padding: 50px 10px;
}
.form-wrap table{
  width: 100%;
}
.form-wrap th,
.form-wrap td{
  display: block;
  padding: 10px 0;
  width: 100%;
}
.required,
.optional{
  position: unset;
  margin-left: 15px;
}
/*-------------
page faq
--------------*/
.faq-list{
  padding: 30px 0;
}
.faq-list li{
  font-size: 4vw;
}
.faq-list li p{
  padding: 0 20px 0 30px;
}
.faq-list li p.active{
  padding: 20px 20px 20px 30px;
}
.faq-list li button{
  padding: 20px 40px 20px 40px;
}
.faq-list li button::before{
  left: 10px;
}
.faq-list .btn-icon{
  right: 10px;
  width: 25px;
  height: 25px;
}
/*-------------
page advantage
--------------*/
.advantage-top .flex-between{
  flex-wrap: wrap;
}
.advantage-top h2{
  margin-bottom: 20px;
}
.advantage-top img{
  width: 100%;
}
.advantage-list-wrap .title{
  margin-bottom: 30px;
  font-size: 10vw;
}
.advantage-list-wrap li{
  font-size: 4.5vw;
	padding-left:35px;
}
.advantage-list-wrap li::before{
	width:22px;
	height:1px;
	top:3vw;
}
.advantage-list-wrap .bg-ash,
.advantage-list-wrap .bg-red{
  padding: 30px 0;
  margin-bottom: 30px;
}
.advantage-list-wrap .flex-start{
  flex-wrap: wrap;
}
.advantage-list-wrap .flex-start ul{
  width: 100%;
}
.advantage-main-title{
  margin-bottom: 30px;
}
.advantage-main-title h2{
  font-size: 6vw;
}
.advantage-main-title img{
  bottom: 0;
  width: 80%;
}
.advantage-list-wrap .container .illust img {
    max-height: 28vw;
    width: auto;
}
.advantage-list-wrap .container .illust {
    position: absolute;
    right: 1%;
    top: -8%;
}
.advantage-list-wrap .container .illust.value img {
    max-height: 40vw;
    width: auto;
}
.advantage-list-wrap .container .illust.value {
    top: -1%;
}
/*-------------
page voice
--------------*/
.voice-inner-imgs{
  margin: 20px 0;
}
.voice-inner-txt li{
  padding: 10px;
}
/*-------------
page services
--------------*/
.services-inner{
  margin-bottom: 50px;
	scroll-margin-top: 80px;/*アンカーリンクずれ対応*/
}
.services-inner h2{
  font-size: 6.5vw;
  border-width: 10px;
}
.services-inner-txt{
  margin-top: 20px;
}
.services-inner-list{
  padding: 20px;
}
.services-inner-list h3{
  font-size: 5vw;
}
.services-inner-list li{
  margin-bottom: 10px;
}
.services-inner-list li::before{
  transform: unset;
  top: 1.8vw;
  width: 5vw;
}
.services-inner .flex-between{
  flex-wrap: wrap-reverse;
}
.services-wrap{
  padding: 50px 0 0;
}
.services-wrap img{
  width: 100%;
}
.services-inner-link li{
  width: calc(95% / 2);
  height: 33vw;
}
.services-inner-link li a{
  font-size: 3.5vw;
  padding: 10px;
}
.services-inner-link li a::before{
  bottom: 10px;
  width: 15px;
}
.services-inner-link img{
  width: 13vw;
}
/*-------------
page flow
--------------*/
.flow-top .flex-between{
  flex-wrap: wrap;
}
.flow-top img{
  width: 100%;
  margin-top: 20px;
}
.flow-top .bg-red{
  padding: 20px 2px;
}
.flow-top .bg-red p{
  font-size: 3.4vw;
  margin-bottom: 20px;
}
.flow-step-inner{
  padding: 30px 10px;
}
.flow-step-inner h3{
  font-size: 5vw;
}
.flow-step-inner h3 span{
  font-size: 9vw;
}
.flow-step-inner dl{
  width: 100%;
  margin: 30px 0 0;
}
.flow-step-img{
  width: 100%;
  position: unset;
  transform: unset;
}
.flow-step-inner .contact-banner-button .mail{
  margin-top: 30px;
}
.flow-onayami{
  margin: 50px 0;
}
.flow-onayami h2{
  font-size: 4.5vw;
}
.flow-onayami ul{
  padding: 30px 10px;
}
.flow-onayami ul::before{
  border-right: 50px solid transparent;
  border-left: 50px solid transparent;
  border-top: 30px solid #5e707e;
  bottom: -29px;
}
.flow-onayami li{
  font-size: 4vw;
}
.flow-onayami li::before{
  width: 5vw;
  transform: unset;
  top: 1vw;
}
.flow-onayami p{
  font-size: 4vw;
  margin: 60px 2.5% 0;
}