@charset "UTF-8";

div.main{
  position:relative;
  width:1920px;
  margin:0 auto;
  overflow:hidden;
}
div.main img.bk-image{
  position:relative;
  display:block;
  width:1920px;
  height:800px;
  object-fit:cover;
  margin:0 auto;
  z-index:-1;
}

div.main div.txt{
  position:absolute;
  width:1920px;
  max-width:calc(100% - 100px);
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
}
div.main h1{
  color:var(--font-blue);
  font-size:clamp(14px,1.875vw,24px);
  font-weight:600;
}
div.main span.catch{
  display:block;
  font-size:clamp(28px,4.21875vw,54px);
  font-weight:600;
  line-height:1.5;
}
div.main span.catch + p{padding-top:1em;}

div.main div.txt img.sample-image{
  height:280px;
  margin-top:30px;
}

div.main div.btn-wrap{
  width:660px;
  margin:40px 0 0;
}
div.main div.btn-wrap a.btn::after{right:20px;}

div.main div.crown-wrap{
  position:absolute;
  right:0;
  bottom:0;
  display:flex;
  background: linear-gradient(180deg, #fff, #F6F9FC);
  border-radius:60px 0 0 0;
  padding:20px 30px;
  box-shadow:0 0 10px rgba(0,0,0,0.1);

}
div.main div.crown-wrap img {
  display:block;
  width:150px;
}
div.main div.crown-wrap img + img{margin-left:20px;}

div.main div.sp-area{display:none;}

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

div.main img.bk-image{
  width:1440px;
  height:600px;
}
div.main div.txt img.sample-image{
  height:200px;
  margin-top:20px;
}
div.main div.crown-wrap{display:none;}

}

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

div.main img.bk-image{height:auto;}  
div.main div.sp-area{
  position:absolute;
  top:15px;
  left:15px;
  display:flex;
  flex-direction:column;
}
div.main div.sp-area img{
  display:inline-block;
  vertical-align:bottom;
}
div.main div.sp-area img.sp-image01{width:clamp(100px,26.04vw,200px);}
div.main div.sp-area img.sp-image02{
  width:clamp(120px,39.06vw,300px);
  margin-top:clamp(10px,2.604vw,20px);
}

div.main div.txt{
  position:relative;
  max-width:100%;
  top:auto;
  left:auto;
  transform:translate(0,0);
  padding:clamp(20px,5.208vw,40px) clamp(10px,2.604vw,20px);
  text-align:center;
}
div.main div.txt img.sample-image{display:none;}
div.main div.btn-wrap{
  flex-direction:column;
  align-items:center;
  width:auto;
  margin:20px auto 0;
}
div.main div.btn-wrap a.btn + a.btn{margin:20px auto 0;}

}

/* こんなお悩み */
div.area.bk01{
  padding-top:clamp(50px,9.765vw,75px);
  margin-top:0;
  background:url(../img/front/problem-bk.png) center/1920px no-repeat,#F6F9FC;
}
@supports (background: url(../img/front/webp/problem-bk.webp)) {
  div.area.bk01 {
  background: url(../img/front/webp/problem-bk.webp) center/1920px no-repeat,#F6F9FC;
}
}

div.problem-wrap{
  display:flex;
  justify-content:space-between;
}
div.problem-wrap div.box{
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  align-items:center;
  width:calc((100% - clamp(20px,6.25vw,80px))/3);
}
div.problem-wrap div.box:nth-child(odd){padding-top:20px;}
div.problem-wrap div.txt{
  position:relative;
  display:flex;
  justify-content:center;
  align-items:center;
  width:100%;
  min-height:clamp(160px,15.625vw,200px);
  background:#fff;
  box-shadow:0 6px 24px rgba(0,0,0,0.1);
  border-radius:100px;
}
div.problem-wrap div.txt::after{
  position:absolute;
  bottom:-50px;
  left:120px;
  content:"";
  display:inline-block;
  border:20px solid transparent;
  border-top:60px solid #fff;
  transform:rotate(-45deg);
  z-index:0;
}
div.problem-wrap div.txt p{
  position:relative;
  font-size:var(--font-size02);
  font-weight:600;
  text-align:center;
  z-index:1;
}
div.problem-wrap div.box img{
  display:inline-block;
  vertical-align:bottom;
  width:230px;
  height:240px;
  margin-top:40px;
}

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

div.area.bk01{
  padding:clamp(50px,9.765vw,75px) 0;
  background:url(../img/front/problem-bk.png) center bottom/cover no-repeat,#F6F9FC;
}
@supports (background: url(../img/front/webp/problem-bk.webp)) {
  div.area.bk01 {
  background: url(../img/front/webp/problem-bk.webp) center bottom/cover no-repeat,#F6F9FC;
}
}

div.problem-wrap{
  flex-direction:column;
  width:clamp(330px,62.5vw,640px);
  margin-left:auto;
  margin-right:auto;
}  
div.problem-wrap div.box{width:auto;}
div.problem-wrap div.box + div.box{padding-top:20px;}
div.problem-wrap div.box:nth-child(odd){padding-top:0;}
div.problem-wrap div.txt{
  min-height:auto;
  padding:20px;
  border-radius:80px;
}
div.problem-wrap div.txt::after{
  bottom:-25px;
  left:60px;
  border:10px solid transparent;
  border-top:30px solid #fff;
}
div.problem-wrap div.box img{display:none;}

}

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

div.area.bk01{background:url(../img/front/problem-bk-sp.png) bottom center/cover no-repeat,#F6F9FC;}
@supports (background: url(../img/front/webp/problem-bk-sp.webp)) {
  div.area.bk01 {
  background: url(../img/front/webp/problem-bk-sp.webp) bottom center/cover no-repeat,#F6F9FC;
}
}

}


/* 特徴 */
div.tab-btn{
  position:relative;
  display:flex;
  justify-content:space-between;
  width:900px;
  height:80px;
  padding:10px;
  margin:0 auto;
  background:#fff;
  border-radius:40px;
  z-index:1;
}
div.tab-btn span{
  display:flex;
  justify-content:center;
  align-items:center;
  width:calc((100% - 20px)/3);
  height:100%;
  font-weight:600;
  border-radius:35px;
  cursor:pointer;
  transition:0.2s ease;
}
div.tab-btn span:hover{background:#DCE5EC;}
div.tab-btn span.active{
  color:var(--font-wht);
  background:#0068B7;
}

div.feature-inner{
  position:relative;
  background:#fff;
  padding:80px 0 40px;
  margin-top:-40px;
  border-radius:0 20px 20px 0;
}
div.feature-inner::before{
  position:absolute;
  top:0;
  left:-50%;
  display:inline-block;
  content:"";
  height:100%;
  width:50%;
  background:#fff;  
}

div.tab-wrap{display:none;}
div.tab-wrap.active{display:block;}
div.feature-wrap div.single-slide.feature .swiper-slide{opacity:0;}
div.feature-wrap div.single-slide.feature .swiper-slide.swiper-slide-active{opacity:1;}

div.feature-wrap div.single-slide.feature div.box{
  display:flex;
  justify-content:space-between;
  align-items:center;
}
div.feature-wrap div.single-slide.feature div.box div{
  width:calc((100% - 40px)/2);
}
div.feature-wrap div.single-slide.feature div.box div.img{
  height:420px;
  background:#C5D0DE;
  border-radius:20px;
  overflow:hidden;
  box-shadow:0 6px 24px rgba(0,0,0,0.1);
}
div.feature-wrap div.single-slide.feature div.box div.txt{padding-right:40px;}
div.feature-wrap div.single-slide.feature div.box div h3{font-size:var(--font-size02);}
div.feature-wrap div.single-slide.feature div.box div h3 + p{padding-top:0.5em;}
div.feature-wrap div.single-slide.feature div.box div p{line-height:2;}
div.feature-wrap div.single-slide.feature div.box div p + p{padding-top:1em;}

/* ネーション（ドット） */
div.feature-wrap .swiper-pagination {
  position: absolute;
  left:50%;
  transform:translateX(-50%);
  bottom:-90px;
  margin-top:0;
}

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

div.feature-inner{
  padding:60px clamp(20px,3.906vw,40px) 40px;
  border-radius:10px;
}  
div.feature-inner::before{display:none;}
div.feature-wrap div.single-slide.feature div.box div.txt{padding-right:0;}

div.feature-wrap .swiper-button-next,
div.feature-wrap .swiper-button-prev {
  top:auto;
  transform:translateY(0);
  bottom:-90px;
  width:30px;
  height:30px;
}
div.feature-wrap .swiper-button-prev {left:clamp(-40px,-3.906vw,-20px);}
div.feature-wrap .swiper-button-next {right:clamp(-40px,-3.906vw,-20px);}

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

div.tab-btn{
  width:420px;
  height:40px;
  padding:5px;
  border-radius:25px;
}
div.tab-btn span{
  width:calc((100% - 10px)/3);
  font-size:clamp(12px,1.367vw,14px);
  font-weight:500;
}
div.feature-inner{
  width:640px;
  margin:-20px auto 0;
}
div.feature-wrap div.single-slide.feature div.box{
  flex-direction:column;
  align-items:flex-start;
}
div.feature-wrap div.single-slide.feature div.box div{width:auto;}
div.feature-wrap div.single-slide.feature div.box div.img{
  width:100%;
  height:clamp(200px,27.343vw,280px);
  border-radius:10px;
}
div.feature-wrap div.single-slide.feature div.box div.txt{margin-top:20px;}

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

div.feature-inner{
  padding:clamp(20px,3.906vw,40px);
  margin-top:20px;
}
div.feature-wrap .swiper-button-next,
div.feature-wrap .swiper-button-prev {bottom:-65px;}
/* ネーション（ドット） */
div.feature-wrap .swiper-pagination {bottom:-65px;}

}

/* 主な機能 */
div.function-wrap{
  display:flex;
  max-width:1920px;
  padding-bottom:24px;
}
div.function-wrap div.box{
  display:flex;
  flex-direction:column;
  align-items:center;
  flex-shrink: 0;
  width:360px;
  padding:40px 20px;
  background:#fff;
  border-radius:10px;
  box-shadow:0 6px 24px rgba(0,0,0,0.1);
}
div.function-wrap div.box + div.box{margin-left:20px;}

div.function-wrap div.box img{
  display:inline-block;
  vertical-align:bottom;
  width:180px;
  height:180px;
}
div.function-wrap div.box h3{
  color:var(--font-blue);
  font-size:var(--font-size02);
  padding-top:20px;
}
div.function-wrap div.box p{
  padding-top:10px;
}

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

div.function-wrap div.box{width:330px;}

}


/* 導入事例 */
div.sp-slide.interview a.box{
  width:calc((100% - 80px)/3);
  background:#fff;
  border-radius:10px;
  overflow:hidden;
  box-shadow:0 6px 24px rgba(0,0,0,0.1);
}
div.sp-slide.interview a.box div.img{
  height:clamp(190px,12.5vw,240px);
  overflow:hidden;
}
div.sp-slide.interview a.box div.img img{
  display:inline-block;
  vertical-align:bottom;
  width:100%;
  height:auto;
}
div.sp-slide.interview a.box div.txt{padding:20px;}
div.sp-slide.interview a.box span.name{
  color:var(--font-blk);
  font-weight:600;
}
div.sp-slide.interview a.box h3{
  color:var(--font-blk);
  font-size:var(--font-size02);
  transition:0.2s ease;
  padding-top:0.25em;
}
div.sp-slide.interview a.box div.cat{
  display:flex;
  margin-top:20px;
}
div.sp-slide.interview a.box div.cat span.label{
  color:var(--font-blk);
  font-size:var(--font-size_min);
  line-height:1;
  padding:6px 8px;
  border:1px solid #ccc;
  border-radius:4px;
}
div.sp-slide.interview a.box div.cat span.label + span.label{margin-left:10px;}

div.sp-slide.interview a.box:hover{
  transform:translateY(5px);
  box-shadow:0 1px 1px rgba(0,0,0,0.1);
}

/* ご利用の流れ */
div.sp-slide.flow div.box{
  position:relative;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  align-items:center;
  width:calc((100% - 200px)/5);
}
div.sp-slide.flow div.box + div.box::before{
  position:absolute;
  content:"";
  top:83px;
  left:-35px;
  display:inline-block;
  width:20px;
  height:16.55px;
  background:url(../img/icon/flow-arrow-i.svg) center/contain no-repeat;
}

div.sp-slide.flow div.box img{
  display:inline-block;
  vertical-align:bottom;
  width:180px;
  height:180px;
}
div.sp-slide.flow div.box h3{
  color:var(--font-blue);
  font-size:var(--font-size02);
  padding-top:15px;
  text-align:center;
}
div.sp-slide.flow div.box h3 span.min{
  display:block;
  color:var(--font-blk);
  font-size:12px;
  line-height:20px;
}
div.sp-slide.flow div.box p{
  font-size:14px;
  line-height:2;
  padding-top:10px;
}

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

div.sp-slide.flow div.box + div.box::before{left:-45px;}

}

/* レンタル */
div.area.rental{margin-top:0;}
div.area.rental div.contents{
  position:relative;
  height:100vh;
}
div.area.rental div.txt{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  width:1280px;
}
div.area.rental div.txt span.en,
div.area.rental div.txt h2{text-align:left;}
div.area.rental div.txt div.btn-wrap{justify-content:flex-start;}

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

div.area.rental{
  padding-left:15px;
  padding-right:15px;
  margin:clamp(50px,9.765vw,75px) auto 0;
}  
div.area.rental div.contents{height:auto;}  
div.area.rental div.txt{
  position:relative;
  top:auto;
  left:auto;
  transform:translate(0,0);
}

}


/* FAQ よくある質問 */
div.faq-wrap div.box{
  background:#fff;
  box-shadow:0 6px 24px rgba(0,0,0,0.1);
  border-radius:10px;
  overflow:hidden;
  transition:0.4s ease;
}
div.faq-wrap div.box + div.box{margin-top:20px;}
div.faq-wrap div.box:hover{
  background:#f8f8fa;
  transform:translateY(5px);
  box-shadow:0 1px 1px rgba(0,0,0,0.1);
}

div.faq-wrap div.question{
  position:relative;
  padding:30px 60px 30px 75px;
  cursor:pointer;
}
div.faq-wrap div.question::before{
  position:absolute;
  content:"";
  top:50%;
  transform:translateY(-50%);
  left:30px;
  width:25.16px;
  height:26.99px;
  background:url(../img/icon/q-i.svg) center/contain no-repeat;
}
div.faq-wrap div.question h3{
  font-size:var(--font-size02);
  line-height:1.5;
  transition:0.4s ease;
}
div.faq-wrap div.box:hover h3{color:var(--font-blue);}

div.faq-wrap div.answer{
  display:none;
  position:relative;
  padding:0 60px 30px 75px;
}
div.faq-wrap div.answer::before{
  position:absolute;
  content:"";
  top:8px;
  left:30px;
  width:22.32px;
  height:24.92px;
  background:url(../img/icon/a-i.svg) center/contain no-repeat;
}
div.faq-wrap div.answer p{line-height:2;}

/* 開閉 */
div.faq-wrap div.question div.accordion_icon {
  position: absolute;
  content:"";
  display:inline-block;
  right:36px;
  top: 50%;
  transform:translateY(-50%) rotate(45deg);
  width: 12px;
  height: 12px;
  border-right:2px solid #23222F;
  border-bottom:2px solid #23222F;
  margin:0;
  padding:0;
  transition:0.3s ease;
}
div.faq-wrap div.question div.accordion_icon.active{transform:rotate(225deg);}

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

div.faq-wrap div.question{padding:20px 50px 20px 60px;}  
div.faq-wrap div.question::before{left:20px;}

div.faq-wrap div.answer{padding:0 50px 20px 60px;}
div.faq-wrap div.answer::before{left:20px;}

/* 開閉 */
div.faq-wrap div.question div.accordion_icon {
  right:20px;
  width: 10px;
  height: 10px;
}

}

/* お知らせ */
div.area.news{padding-bottom:0;}
div.news-wrap{
  padding:clamp(35px,4.33vw,65px) clamp(50px,6.66vw,100px) clamp(75px,6.66vw,100px);
  background:#fff;
  border-radius:10px 10px 0 0;
}
div.news-wrap ul.news-li li a{
  position:relative;
  display:flex;
  justify-content:flex-start;
  align-items:center;
  font-weight:500;
  padding:clamp(20px,2.734vw,35px) 60px clamp(20px,2.734vw,35px) 0;
  border-bottom:1px solid #C5D0DE;
  transition:0.4s ease;
}
div.news-wrap ul.news-li li a::after {
  position: absolute;
  content:"";
  display:inline-block;
  right:20px;
  top: 50%;
  transform:translateY(-50%) rotate(45deg);
  width: 12px;
  height: 12px;
  border-top:2px solid #C5D0DE;
  border-right:2px solid #C5D0DE;
  margin:0;
  padding:0;
  transition:0.4s ease;
}
div.news-wrap ul.news-li li a span + span{margin-left:20px;}
div.news-wrap ul.news-li li a span.day{color:var(--font-blue);}
div.news-wrap ul.news-li li a span.cat{
  width:100px;
  height:26px;
  color:var(--font-blk);
  font-size:12px;
  text-align:center;
  line-height:24px;
  border:1px solid #212C2A;
  border-radius:14px;
  transition:0.4s ease;
}
div.news-wrap ul.news-li li a span.title{color:var(--font-blk);}
div.news-wrap ul.news-li li a:hover{border-color:#0068B7;}
div.news-wrap ul.news-li li a:hover::after {
  right:10px;
  border-top-color:#0068B7;
  border-right-color:#0068B7;
}
div.news-wrap ul.news-li li a:hover span.cat{
  color:var(--font-wht);
  background:#0068B7;
  border-color:#0068B7;
}
div.news-wrap ul.news-li li a:hover span.title{color:var(--font-blue);}

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

div.news-wrap{padding:clamp(20px,3.906vw,30px);}  
div.news-wrap ul.news-li li a{flex-wrap:wrap;}  
div.news-wrap ul.news-li li a span.title{
  width:100%;
  margin:5px 0 0;
}
div.news-wrap ul.news-li li a span + span{margin-left:10px;}
div.news-wrap ul.news-li li a::after {
  right:10px;
  width: 8px;
  height: 8px;
}

}

/* 導入事例 */
div.sp-slide.blog a.box{
  width:calc((100% - 80px)/3);
  background:#fff;
  border-radius:10px;
  overflow:hidden;
  box-shadow:0 6px 24px rgba(0,0,0,0.1);
}
div.sp-slide.blog a.box div.img{
  height:clamp(190px,12.5vw,240px);
  overflow:hidden;
}
div.sp-slide.blog a.box div.img img{
  display:inline-block;
  vertical-align:bottom;
  width:100%;
  height:auto;
}
div.sp-slide.blog a.box div.txt{padding:20px;}
div.sp-slide.blog a.box span.day{
  color:var(--font-gry);
  font-size:var(--font-size_min);
  font-weight:600;
}
div.sp-slide.blog a.box h3{
  color:var(--font-blk);
  font-size:var(--font-size02);
  transition:0.2s ease;
  padding-top:0.25em;
}
div.sp-slide.blog a.box div.cat{
  display:flex;
  margin-top:20px;
}
div.sp-slide.blog a.box div.cat span.label{
  color:var(--font-blk);
  font-size:var(--font-size_min);
  line-height:1;
  padding:6px 8px;
  border:1px solid #ccc;
  border-radius:4px;
}
div.sp-slide.blog a.box div.cat span.label + span.label{margin-left:10px;}

div.sp-slide.blog a.box:hover{
  transform:translateY(5px);
  box-shadow:0 1px 1px rgba(0,0,0,0.1);
}
div.sp-slide.blog a.box:hover h3{color:var(--font-blue);}