@charset "utf-8";

/*-----------------------
    page_top.css
------------------------*/

/*----- mv -----*/
.top_mv .wrap_wide {
  position: relative;
}
.top_mv .text {
  position: absolute;
  z-index: 9;
  top: calc(50% - 150px);
  left: 6vw;
}
.top_mv .text img {
  height: 200px;
  filter: drop-shadow(2px 1px 1px #000);
}
.top_mv .ul {
  position: absolute;
  z-index: 10;
  bottom: 75px;
  left: calc(50% - 340px);
  display: flex;
  justify-content: center;
  gap: 0 30px;
}
.top_mv .ul .li {
  width: 207px;
  transform: scale(0);
}
.top_mv .wani {
  position: absolute;
  z-index: 11;
  right: 250px;
  bottom: -20px;
  width: 284px;
  transform: scale(0);
}

@media screen and (min-width: 768px) and (max-width: 1700px){
    
    .top_mv .text img {
        height: 150px;
    }
    .top_mv .ul {
        bottom: 50px;
        left: calc(50% - 290px);
        gap: 0 20px; 
    }
    .top_mv .ul .li {
        width: 180px;
    }
    .top_mv .wani {
        right: 10vw;
        width: 240px;
    }
    
}
@media screen and (min-width: 768px) and (max-width: 1260px){
    
    .top_mv .text {
        top: calc(50% - 15vw);
    }
    .top_mv .text img {
        height: 12vw;
    }
    .top_mv .ul {
        bottom: 4vw;
        left: calc(50% - 29vw);
        gap: 0 2vw; 
    }
    .top_mv .ul .li {
        width: 16vw;
    }
    .top_mv .wani {
        right: 10vw;
        bottom: -2vw;
        width: 18vw;
    }
    
}
@media screen and (max-width: 767px){
    
    .top_mv .wrap_wide {
        padding: 0 0 20px;/*60*/
    }
    .top_mv .text {
        /*top: 13vw;*/
              top: 28vw;/*22*/
        left: 0;
        text-align: center;
        padding: 0 4vw;
    }
    .top_mv .text img {
        height: auto;
        max-height: 75px;
    }
    .top_mv .ul {
        position: relative;
        bottom: auto;
        left: auto;
        gap: 0 2%; 
        margin-top: 1vw;/*-10*/
    }
    .top_mv .ul .li {
        width: 28%;
    }
    .top_mv .wani {
        right: 3vw;
        bottom: -15px;
        width: 100px;
    }
    
}

/*----- support -----*/
.top_support {
  padding: 100px 0;
  background: url("/system_panel/uploads/images/bg_reason.jpg") no-repeat;
  background-size: cover;
}
.top_support .frame {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.top_support .frame .conts {
  width: 40%;
}
.top_support .frame .conts .title img {
  height: 100px;
}
.top_support .frame .pics {
  position: relative;
  width: 55%;
}
.top_support .frame .pics .wani {
  position: absolute;
  right: -100px;
  bottom: -100px;
  width: 224px;
}
.top_support .frame .pics .pic {
  mask-image: url(https://ease-one.jp/system_panel/uploads/images/20250904154932522503.svg);
  mask-repeat: no-repeat;
  mask-size: cover;
}

@media screen and (min-width: 768px) and (max-width: 1260px){
    
    .top_support {
        padding: 8vw 0;
    }
    .top_support .frame .conts .title img {
        height: 8vw;
    }
    .top_support .frame .pics .wani {
        right: -20px;
        bottom: -8vw;
        width: 16vw;
    }
    
}
@media screen and (max-width: 767px){
    
    .top_support {
        padding: 50px 0;
    }
    .top_support .frame {
        display: block;
    }
    .top_support .frame .conts {
        width: 100%;
    }
    .top_support .frame .conts .title img {
        height: auto;
        max-height: 60px;
    }
    .top_support .frame .pics {
        margin: 20px auto 0;
        width: min(400px,100%);
    }
    .top_support .frame .pics .wani {
        right: -4vw;
        bottom: -30px;
        width: 120px;
    }
    
}

/*----- service -----*/
.top_svc {
  padding: 100px 0;
}
.top_svc .subttl img {
  height: 58px;
}
.top_svc .ul {
  display: flex;
  flex-wrap: wrap;
  gap: 45px 45px;
  background: url(https://ease-one.jp/system_panel/uploads/images/20250716103422893907.png) no-repeat;
  background-position: center;
}
.top_svc .ul .li {
  width: calc(33.33% - 30px);
}
.top_svc .ul .li .pic img {
  border-radius: 10px 10px 0 0;
}
.top_svc .ul .li .inner {
  height: 210px;
  padding: 20px 30px;
  background: #e0f2f8;
  border-radius: 0 0 10px 10px;
}
.top_svc .ul .li .inner .title {
  margin-bottom: 15px;
  color: var(--blue_dark);
  font-size: 27px;
  text-align: center;
}
.top_svc .ul .li .m_btn {
  width: 230px;
  margin-top: -30px;
}

@media screen and (min-width: 768px) and (max-width: 1260px){
    
    .top_svc {
        padding: 8vw 0;
    }
    .top_svc .subttl img {
        height: 5vw;
    }
    .top_svc .ul {
        gap: 4vw 3.6vw;
    }
    .top_svc .ul .li {
        width: calc(33.33% - 2.4vw);
    }
    .top_svc .ul .li .inner {
        height: 20vw;
        padding: 2vw;
    }
    .top_svc .ul .li .inner .title {
        margin-bottom: 1.5vw;
        font-size: 2.2vw;
    }
    .top_svc .ul .li .m_btn {
        width: 24vw;
        margin-top: -2.5vw;
    }
    
}
@media screen and (max-width: 767px){
    
    .top_svc {
        padding: 50px 0;
    }
    .top_svc .subttl img {
        height: auto;
        max-height: 40px;
    }
    .top_svc .ul {
        display: block;
      background: none;
    }
    .top_svc .ul .li {
        margin: 0 auto 24px;
        width: min(400px,100%);
    }
    .top_svc .ul .li .inner {
        height: auto;
        padding: 15px 4vw 45px;
    }
    .top_svc .ul .li .inner .title {
        font-size: 22px;
    }
    .top_svc .ul .li .m_btn {
        width: 272px;
    }
    
}

/*----- blog -----*/

.top_blog {
    padding: 80px 0;
    background: url("/system_panel/uploads/images/bg_svc_point.jpg") no-repeat;
    background-size: cover;
}
.top_blog_ul .webgene-blog {
    display: flex;
    justify-content: center;
    gap: 0 45px;
}
.top_blog_ul .webgene-blog .li {
    width: calc(33.33% - 30px);
}
.top_blog_ul .webgene-blog .li a:hover {
    opacity: .8;
}
.top_blog_ul .webgene-blog .li .pict {
    display: block;
    width: 100%;
    height: 252px;
    background: var(--white);
    border-radius: 5px;
}
.top_blog_ul .webgene-blog .li .pict img {
    height: 252px;
}
.top_blog_ul .webgene-blog .li .cat {
    display: inline-block;
    margin: 10px 0 5px;
    padding: 5px 15px;
    background: var(--white);
    border: 1px solid var(--blue_dark);
    border-radius: 40px;
    color: var(--blue_dark);
    font-size: 14px;
}
.top_blog_ul .webgene-blog .li .title {
    color: var(--text);
    line-height: 1.75;
}

@media screen and (min-width: 768px) and (max-width: 1260px){
    
    .top_blog {
        padding: 6.4vw 0;
    }
    .top_blog_ul .webgene-blog {
        gap: 0 3.6vw;
    }
    .top_blog_ul .webgene-blog .li {
        width: calc(33.33% - 2.4vw);
    }
    .top_blog_ul .webgene-blog .li .pict,
    .top_blog_ul .webgene-blog .li .pict img {
        height: 20vw;
    }
    .top_blog_ul .webgene-blog .li .cat {
        margin: 1vw 0 .5vw;
        padding: .5vw 1.5vw;
        font-size: 1.4vw;
    }
    
}
@media screen and (max-width: 767px){
    
    .top_blog {
        padding: 50px 0;
    }
    .top_blog_ul .webgene-blog {
        display: block;
    }
    .top_blog_ul .webgene-blog .li {
        margin: 0 auto 30px;
        width: min(400px,100%);
    }
    .top_blog_ul .webgene-blog .li .pict,
    .top_blog_ul .webgene-blog .li .pict img {
        height: 60vw;
    }

}