/*------------------------------------------------------------------------------
  PC or ALL
------------------------------------------------------------------------------*/

.mainvisual {
  padding: 0 0 10vmin 35vw;
  background: linear-gradient(to right, #f0f0f0, #f0f0f0) no-repeat left bottom / 55vw 80%;
}

.box .btn a{
  background: #141414;
  border-radius: 0;
  &::after{
    content: "\e145";
    right: 10px;
  }
}

/* フォームのボタン色 */
#mw_wp_form_mw-wp-form-124 .form-btn input{
  background: #f88600;
}

.title-type01:before, .title-type03:before,
.title-type02:before, .title-type04:before{
  display: none;
}
.title-type01, .title-type03,
.title-type02, .title-type04{
  padding: 0;
  .box-h2{
    display: flex;
    flex-flow: column;
    span.ja{
      margin-bottom: 15px;
      font-size: 1.4rem;
      color: #f88600;
      order: -1;
    }
    & br{display: none;}
  }
  & span:nth-child(2){
    opacity: 1;
  }
}


.footer-con{
  margin: 0;
  .title-type04 span.en{color: #fff !important;}
  .btn a{
    background: #f88600;
  }
}

.fixed-footer{
  background: #232323;
  color: #fff;
}
.fixed-footer .contact a{
  border-radius: 0;
}

.pagetop a{
  border-radius: 0;
  background: #f88600;
}
.pagetop a:after{
  content:"\e5d8";
  color: #fff;
}

/* contact */
.con-tel{
  display: flex;
  gap: 3px;
  max-width: 450px;
}


.home .page-content{

.sm{
  max-width: 1120px;
  padding: 0;
}


.blog-type01 ul li .category,
.blog-type03 ul li .category,
.blog-type04 .swiper-slide .category{
  background: #141414;
}

.main-banner{
  max-width: 1120px;
  &.bg:before{
    background: linear-gradient(to right, #f0f0f0, #f0f0f0) no-repeat center top 14vmin / 1440px 100%;
  }
  .banner-type01{
    margin: 0;
    & ul li a span.ja{
      font-size: 2.8rem;
    }
    & ul li a span.en{
      font-size: 1.4rem;
      color: #a9a9a9;
    }
    & ul li a:after{
      content: "\e145";
      bottom: 0;
      right: 0;
      padding: 10px 15px;
      background: #fff;
      color: #141414;
    }
  }
  .banner-type01 + .banner-type01{margin-top: 30px;}
}

.main-gal{
  .blog-type04 .swiper-pagination{
    display: none;
  }
}

.main-message{
  .image-text-type01.left{
    display: flex;
    justify-content: space-between;
    &::before{
      content:"";
      display: block;
      width: 66.8vmin;
      height: 80vmin;
      position: absolute;
      bottom: 4vmin;
      right: -30vmin;
      background: #f0f0f0;
      z-index: -1;
    }
    .image{
      flex: 0 0 580px;
      margin-right: 55px;
      text-align: center;
    }
    .box-h3{
      position: relative;
      padding-left: 55px;
      &::after{
        content: "\e244";
        position: absolute;
        top: -10px;
        left: -10px;
        font-family: "Material Symbols Outlined";
        font-variation-settings: "FILL" 1, "wght" 500, "GRAD" 0, "opsz" 20;
        line-height: 1;
        font-size: 5rem;
        color: var(--main-color);
        transform: rotate(180deg);
      }
    }
  }
}

.main-feature{
  margin-bottom: 0;
  padding-bottom: 0;
  &::before{
    background: none;
  }
  .list-number-type02{
    padding-bottom: 8vmin;
    &::after{
      top: 18vmin;
      background: url(../images/bg.jpg) repeat center 0;
    }
    & ol{
      flex-flow: wrap;
      justify-content: center;
      gap: 30px;
    }
    & li{
      flex: 0 0 30%;
      color: #fff;
      &::before{
        content:"";
        width: 82px;
        height: 48px;
        top: 0;
        border: none;
      }
    }
    & li:nth-child(1)::before{background: url(../images/feature1.png) no-repeat 0 center / contain;}
    & li:nth-child(2)::before{background: url(../images/feature2.png) no-repeat 0 center / contain;}
    & li:nth-child(3)::before{background: url(../images/feature3.png) no-repeat 0 center / contain;}
    & li:nth-child(4)::before{background: url(../images/feature4.png) no-repeat 0 center / contain;}
    & li:nth-child(5)::before{background: url(../images/feature5.png) no-repeat 0 center / contain;}
    .image img{border-radius: 50%;}
  }
}

.main-select{
  text-align: center;
  .box .text{
    & h3.box-h3{
      font-size: 4.6rem;
    }
    .copy{
      font-size: 2rem;
      color: #f88600;
    }

  }
}

.main-voice{
  .image-bg-type02{
    position: relative;
    padding: 70px 25vmin;
    &::after{
      content: "\e145";
      position: absolute;
      bottom: 0;
      right: 0;
      z-index: -1;
      padding: 10px 15px;
      background: #fff;
      color: #141414;
      font-family: "Material Symbols Outlined";
      font-variation-settings: "FILL" 1, "wght" 500, "GRAD" 0, "opsz" 20;
      border: none;
    }
  }
  .image{
    z-index: -1;
  }
  .text{
    position: static;
    max-width: 100%;
    padding: 30px;
    border: 1px solid #fff;
    .en{
      font-size: 4.4rem;
    }
    .ja{
      font-size: 1.4rem;
      color: #f88600;
      margin: 0;
    }
  }
  .btn{margin: 0;}
  .btn a{
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 100%;
    background: none;
    font-size: 0;
    transition: all .3s ease;
    &:hover{
      background-color: rgba(255, 255, 255, 0.3);
    }
  }
}

.main-blog{
  &::before{
    background: linear-gradient(to right, #f0f0f0, #f0f0f0) no-repeat 0 0 / calc(50vw + 384px) 100%;
  }
  .title-type03{
    padding-left: 9vmin;
  }
}

}

/* 20240823 added by Fabo */
.mt-s { margin-top: 4vh !important;}
.mt-m { margin-top: 7vh !important;}
.mt-l { margin-top: 10vh !important;}

.mb-s { margin-bottom: 4vh !important;}
.mb-m { margin-bottom: 7vh !important;}
.mb-l { margin-bottom: 10vh !important;}

.page-content h2:not([class]),
.page-content h3:not([class]),
.page-content h4:not([class]) {
    margin-bottom: 2.5vh !important;
}


.box-color {
    margin: 0 0 6vh;
    padding: 35px;
    background: #f8f7f6;
    border-radius: 10px;
}
.box-color :first-child {
    margin-top: 0 !important;
}
.box-color :last-child {
    margin-bottom: 0 !important;
}
.box-color.-main {
    background: #fef3e5;
}

.page-content .image-text-type01 .text {
    overflow: hidden;
}
.page-content  .list-check-type01 {
    display: flex;
    justify-content: flex-start;
}

.list-check-type01 > ul > li:before {
  color: var(--main-color);
}

.align-center {
    text-align: center;
}

.image-text-type02 .image {
    min-height: 22vmax;
}

/* works */
.ba-detail{
  display: flex;
  justify-content: space-between;
  gap: 2vmin;
  & > ul{
    position: relative;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1vmin;
    padding: 2vmin;
    background: #f5f5f5;
    &.before{
      grid-template-columns: repeat(1, 1fr);
    }
    &::after{
      content:"";
      display: block;
      width: 8vmin;
      height: 8vmin;
      position: absolute;
      top: 0;
      left: 0;
      background: url(../images/ba-after.png) no-repeat 0 center / contain;
    }
    &.before::after{
      background: url(../images/ba-before.png) no-repeat 0 center / contain;
    }
  }
}


/*------------------------------------------------------------------------------
  PC
------------------------------------------------------------------------------*/
@media screen and (min-width: 1024px) {

.footer-main{
  display: flex;
  justify-content: center;
  flex-flow:wrap;
  .logo{
    flex: 0 0 350px;
    text-align: right;
    margin: 0 60px 0 0;
  }
  .about{
    text-align: left;
  }
  .nav{
    flex: 0 0 100%;
  }
}

.home .page-content{
  .main-news{
    position: relative;
    display: flex;
    justify-content: space-between;
    .title-type03{
      flex: 0 0 200px;
      margin: 0;
    }
    .blog-type03{
      flex: 0 0 824px;
      position: static;
      padding-top: 64px;
      margin: 0;
    }
    .blog-type03 ul li{
      padding-bottom: 24px;
      margin-bottom: 24px;
    }
    .blog-type03 ul li:not(:last-child){
      border-bottom-style: solid;
    }
    .btn{
      position: absolute;
      top: 60px;
      left: 0;
    }
  }
}

}
/*------------------------------------------------------------------------------
  TABLET and SHONE
------------------------------------------------------------------------------*/
@media screen and (max-width: 1024px) {
}

/*------------------------------------------------------------------------------
  TABLET ONLY
------------------------------------------------------------------------------*/
@media screen and (min-width: 600px) and (max-width: 1024px) {

.home .page-content {
    .main-message .image-text-type01.left{
    .image{
      flex: 0 0 40vw;
    }
  }
}

}

/*------------------------------------------------------------------------------
  SPHONE ONLY
------------------------------------------------------------------------------*/
@media screen and (max-width: 599px) {

.mainvisual {
  padding: 0;
  margin-bottom: 0;
  background: none;
}
.mainvisual-catch{
  width: 60vw;
}

.home .page-content {
padding: 0;

.box-wrap{
  margin-bottom: 0;
  padding: 8vmin 4vmin;
}

.main-message {
  .image-text-type01.left {
    display: block;
    &::before{background: none;}
    .image{
      width: 80vw;
      margin: 0 auto 4vmin;
    }
  }
}

.main-feature{
  background: url(../images/bg.jpg) repeat center 0;
  .title-type01, .title-type03, .title-type02, .title-type04{
    .en{color: #fff;}
  }
  .list-number-type02 li {flex: 0 0 40%}
  .list-number-type02 li::before{
    height: 7vmin;
  }
}

.main-gal{
  padding: 8vmin 0;
}
.main-select{
  padding: 8vmin 0;
  .box .text h3.box-h3{
    font-size: 3rem;
  }
}
  .main-voice{
  margin: 0 4vmin 10vmin;
  .text .en {font-size: 3rem;}
}

.main-blog{
  padding: 8vmin 4vmin;
  .title-type03{
    padding: 0;
  }
}

/* home */
}

.ba-detail{
  display: block;
}
.ba-detail{
  & > ul{
    grid-template-columns: repeat(1, 1fr);
    &::after{
      width: 18vmin;
      height: 18vmin;
    }
    &.before{
      margin-top: 2vmin;
    }
  }
}

}