@font-face{
   font-family:'Dancing Script';
   src:url(../resources/fonts/DancingScript-Regular.woff2) format('woff2');
   src:url(../resources/fonts/DancingScript-Regular.woff) format('woff');
   font-weight:400;
   font-style:normal;
   font-display:swap;
}
.spri{
   font-family:'Shippori Antique',sans-serif;
}
.top.contents-container{
   max-width: initial;
   padding: 0 0 100px 0;
   width:100%;
   position: relative;
   background-color: transparent;
   overflow-x: hidden;
}
.top-h1{
   font-weight: normal;
   margin:0;
   line-height: 1.7em;
}
.top-h1 span{
   font-size: .8em;
}
.charactor-wrapper{
   position: relative;
   display: flex;
   flex-direction: column;
   align-items: flex-end;
   min-height: 287px;
   min-width: 460px;
}
.characotr-wrapper .right-arrow-r{
   font-size: 14px;
}
.charactor-bg{
   position:absolute;
   width: 100%;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
}
.charactor{
   position: absolute;
   max-width: 230px;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   animation: fuwafuwa 2s infinite;
}
@keyframes fuwafuwa{
   0%{ top: 50%;}
 50%{ top: 46%;}
 100%{ top: 50%;}
}
.charactor-wrapper a{
   position: absolute;
   bottom: -13px;
   right: -20px;
}

.link-wrapper{
   text-align: center;
}
.samples-image .link-wrapper{
   transform: translateX(40px);
}
.samples-image .link-wrapper .right-arrow-r::after{
   right: -32px;
}
.right-arrow-r{
   margin-top: -35px;
   margin-right: 80px;
   color: rgb(51, 51, 51);
   position: relative;
}
.right-arrow-r::after{
   content: url(../images/icons/arrow-right-w.svg);
   position: absolute;
   top: calc(50% + 2px);
   transform: translateY(-50%) scale(.7);
   right: -28px;
   transition: .3s;
}
.right-arrow-r:hover{
   opacity: .7;
   transition: .3s;
}

.right-arrow-r:hover::after{
   transform: translate(3px, -50%) scale(.7);
   transition: .3s;
}
/*--------------------------------------------------------------------------
common
---------------------------------------------------------------------------*/
main{
   position:relative;
}
main::after{
   content:"";
   position:absolute;
   bottom:-100px;
   left:0;
   background-color:#fff;
   width:100vw;
   height:100px;
}
.flexbox-center{
   gap: 0em 60px;
}
main h2,
main h2.enFont2{
   margin:0 0 30px 0;
   padding: 10px  0 8px;
}
main h2.enFont2 {
   font-family: 'dancing script';
 }
main h2>.sub{
   margin-top: 0;
}

h3 {
font-size: 1.4rem;
margin-bottom: 10px;
}
h2{
font-weight: normal;
}
div.desc,
div.figure{
  width:500px;
}
.home h2{
  margin:0;
}

/*--------------------------------------------------------------------------
main visual
---------------------------------------------------------------------------*/
.mainVisual{
   position: relative;
   width:100vw;
   height:100vh;
   background-color: #fff;
   overflow: hidden;
}
 @keyframes slide-blur-on {
    100% {filter: blur(40px);}
 }
 @keyframes slide-blur-off {
      0% {filter: blur(40px);}
    100% {filter: blur(0);}
 }
.mainVisual-image-frame{
   position: absolute;
   top: 50%;
   transform: translateY(-50%);
   right: -32%;
   width:100%;
   height:70%;
   clip-path: inset(0 round 20px 0 0 20px);
   overflow: hidden;
   /*
   -webkit-perspective: 1500px;
   perspective: 1500px;
   -webkit-transform: translateX(-50%) rotateY(45deg) translateZ(-50px);
   transform: translateX(-50%) rotateY(45deg) translateZ(-50px);
       */
}
.img{
   position:absolute;
   width:100%;
   height:100%;
   background-repeat: no-repeat;
   background-size: cover;
   z-index: 10;
}
.img-1{
   background-image: url("../images/mv/mv-01.webp");
   animation : slide-animation1 24s 0s infinite;
   background-position: -250px 0;
}
.img-2{
   background-image: url("../images/mv/mv-02.webp");
   animation : slide-animation2 24s 0s infinite;
   background-position: -250px 0;
}
.img-3{
   background-image: url("../images/mv/mv-03.webp");
   animation : slide-animation3 24s 0s infinite;
   background-position: center;
}
.img-3>div{
   position: relative;
   width: 100%;
   height: 100%;
}
.img-3>div>div{
   position: absolute;
   top: 50%;
   right: 20%;
   transform: translateY(-50%);
   animation: bf-charactor 24s 0s cubic-bezier(0.25, 0.1, 0.74, 0.34) infinite;
   max-width: 300px;
}
.img-3 img{
   max-width: 300px;
   width: 100%;
   aspect-ratio: 300/355;
}
@keyframes slide-animation1 {
   0% {opacity: 1; transform: scale(1.25);}
   30% {opacity: 1;}
   40% {opacity: 0; transform: scale(1.05);}
   90% {opacity: 0}
   100% {opacity: 1; transform: scale(1.25);}
}
@keyframes slide-animation2 {
   0% {opacity: 0; transform: scale(1.05);}
   30% {opacity: 0; transform: scale(1.05); }
   40% {opacity: 1;}
   60% {opacity: 1;}
   70% {opacity: 0; transform: scale(1.15);}
   100% {opacity: 0;}
}
@keyframes slide-animation3 {
   0% {opacity: 0; transform: scale(1.05);}
   60% {opacity: 0;  transform: scale(1.05);}
   70% {opacity: 1;}
   90% {opacity: 1;}
   100% {opacity: 0; transform: scale(1.15);}
}
@keyframes bf-charactor {
   0% {right:20%; transform: translateY(-50%);}
   60% {right:20%; transform: translateY(-50%);}
   70% {opacity: 1; transform: translateY(-55%);}
   80% {opacity: 1; transform: translateY(-50%);}
   90% {opacity: 1; transform: translateY(-55%);}
   100% {right:100%; transform: translateY(-80%);}
}
.catchphrase{
   position: absolute;
   display: block;
   top: 50%;
   transform: translateY(-50%);
   z-index: 2;
   text-align:center;
   font-weight:normal;
   animation: op-text 4.0s forwards;
   text-shadow:0 0 1px #fff, 0 0 2px #fff, 0 0 2px #fff;
 }
 @keyframes op-text {
   0% {opacity:0; left: 80%; transform: translateY(-50%) scale(.3);}
   50% {opacity:0; }
   100% {opacity:1; left:15%; transform: translateY(-50%) scale(1); }
 }
 .catchphrase p{
   padding-left: 20px;
 }
 .catchphrase .textAnima>span{
   animation:catchphrase_textAnima 3s cubic-bezier(0.33, 0.21, 0.14, 0.57) 1s forwards;
   display: inline-block;
}

@keyframes catchphrase_textAnima{
   0%{opacity:0.3; transform:translateY(10px)}
   50%{transform:translateY(-10px)}
  100%{opacity:1; transform:translateY(0)}
}

.op-animation{
   position:absolute;
   top:0;
   left:0;
   width:100%;
   height:100%;
   background-color:#333;
   z-index:1000;
   animation: byeShutter 3.0s ease-in-out forwards;
 }
 
 .op-animation::before {
   content: '';
   position: absolute;
   top: 0;
   left: 0;
   bottom: 0;
   margin: auto;
   background-color: #fff;
   width: 0;
   height: 1px;
   animation: shutterOpen 3.0s ease-in-out forwards;
 }
 
 @keyframes byeShutter {
   70%  {opacity: 1;}
  100% {opacity: 0; display: none; z-index: -1;}
 }
 
 @keyframes shutterOpen {
   0% {opacity:0.3; width: 0; height: 1px;}
   25% {opacity:1; height: 1px;}
   50% {opacity:0.3; width: 100%; height: 1px;}
   90% {width: 100%; height: 100%;}
   100% {width: 100%; height: 100%;}
 }

/*--------------------------------------------------------------------------
scrollボタン
---------------------------------------------------------------------------*/
  
#scrollLink{
   position:absolute;
   left: 6%;
   bottom: 22%;
 }
 #scrollLink a{
   position: absolute;
   font-size:15px;
   font-weight: 500;
   width:101px;
   height: 35px;
   text-align: center;
   color:#000;
   text-decoration: none;
   padding:4px 0px;
   transition: 1s ease;
   z-index:10;
 }
 
  #scrollLink a::after {
   content: "";
   position: absolute;
   top: 30px;
   left: 52px;
   width: 5px;
   height: 30px;
   border-bottom: 3px solid #000;
   border-right: 1px solid #000;
   transform: skewY(240deg);
   transition: all .5s;
 }

#scrollLink a:hover::after{
   top:35px;
   transition: all .5s;
 }

#scrollLink a:hover{
   background: rgba(255, 255, 255);
   color:#333;
   transition: all .5s;
}
#scrollLink.hide {
   opacity:0;
   visibility:hidden;
   transition:1s ease;
}

/*--------------------------------------------------------------------------
message
---------------------------------------------------------------------------*/
.samples-image>img{
   margin-bottom: 20px;
}

.for-pc-msg {
   transform: translateY(-20px);
}
.message{
  display: flex;
  justify-content: center;
  align-items: center;
  padding:100px 20px;
  background-color: #fff;
  gap: 50px;
}
.samples-image{
   max-width: 800px;
}
.message-content .txt-01 {
   font-size: 24px;
   margin: 20px 0 10px;
   text-align: center;
   line-height: 1.5em;
   white-space: nowrap;
}
.message-content .txt-02{
   text-align: center;
   font-size: 18px;
   margin: 0 0 25px 0;
}
.message-content .txt-03{
   text-align: center;
   white-space: nowrap;
   line-height: 1.9em;
   font-size: 16px;
}
.message-content .txt-02 span{
  display: inline-block;
  margin-top: 10px;
  font-size: 36px;
}
@media screen and (min-width:1141px) {
.del-pc-msg{
   display:none;
}
}
/*--------------------------------------------------------------------------
news
---------------------------------------------------------------------------*/
section.news{
   display: flex;
   justify-content: center;
   align-items: center;
   background: linear-gradient(90deg, #fff8f0 10%, #fff1e2 100%);
   padding: 70px 15px 90px;
   gap: 20px;
   margin-left: 50px;
   position: relative;
 }
.news-wrapper{
   display: flex;
   flex-direction: column;
   padding: 0 20px;
}
.news-title{
   position: absolute;
   top: -41px;
   left: 95px;
   text-align: center;
   margin: 0 0 30px 0;
 }
  .news-title .sub{
    margin-top: 15px;
 }
  .news-title h2{
   font-size: 50px;
   line-height: .8em;
   padding:0;
 }
 .news-title h2>.sub{
    font-size: .45em;
 }
  .news-list-container{
   display: flex;
   align-items: flex-end;
   justify-content: center;
   flex-direction: column;
 }
 .news-list{
   width:560px;
 }
 .news-list time{
   color: #cb9f80;
   flex: 2;
 }
 .news-list a{
   color: #333;
   padding: 10px 0 3px;
   border-bottom: 1px solid #f1eae1;
   transition: .3s;
 }
 .news-list h3{
   font-size: 1rem;
   margin-bottom: 0;
   font-weight: normal;
   text-align: left;
   flex: 8;
 }
  .news-list a:hover{
    transition: .3s;
    opacity: .6;
 }
  .news-list a{
   display: flex;
   align-items: center;
   gap: 10px;
}

/*--------------------------------------------------------------------------
choose
---------------------------------------------------------------------------*/
.choose{
   background-color: #fff;
   padding: 0 20px;
}
.choose-inner{
   max-width: 1200px;
   margin: 0 auto;
   padding: 70px 0;
   display: grid;
   grid-template-columns: 1fr 2fr;
   gap: 50px;
   justify-items: center;
   align-items: center;
}

.choose-inner img{
   max-width :350px;
   object-fit: cover;
}


.choose h2{
text-align: center;
font-weight: bold;
}

.choose li{
  margin-bottom :15px;
}

/*--------------------------------------------------------------------------
FAQ
---------------------------------------------------------------------------*/
section.faq{
   background: linear-gradient(90deg, #fff8f0 10%, #fff1e2 100%);
   padding: 50px 20px;
   margin-right: 50px;
   position: relative;
}

/*--------------------------------------------------------------------------
Works
---------------------------------------------------------------------------*/
main .works{
   background-color: #fff;
   padding: 0 20px;
}
main .works-inner{
   max-width: 1200px;
   margin: 0 auto;
   padding: 100px 0;
}
.works-h2{
   text-align: center;
   font-weight: bold;
   font-size: 26px;
   color: #333;
}
.special{
   font-size: 1.5em;
   padding: 0 .3em;
}
.works-img-wrapper{
   gap: 20px;
   margin-top: 70px;
   display: flex;
   align-items: center;
}
.works-img-wrapper figcaption{
   font-weight: bold;
}
.works-img-wrapper>figure{
   text-align: center;
}

.higher-rank{
   font-size: 40px;
   margin: 0 10px;
}
.works-btn-wrapper{
   margin-top: 70px;
}
.works-btn-wrapper a{
   margin: 0 auto;
}
.this-website{
   margin-top: 30px;
   line-height: 1.6em;
}
.works-h2 .main{
   position: relative;
}
.works-h2 .main::before{
   content: '';
   position: absolute;
   bottom: -12px;
   left: 50%;
   transform: translateX(-50%);
   width: 50%;
   height: 1px;
   background-color: #d3d3d3;
}
.works-h2 .main::after{
   content: '';
   position: absolute;
   bottom: -12px;
   left: 25%;
   width: 10%;
   height: 2px;
   background-color: #df690b;
}

.works-h2 .sub{
   font-size: 21px;
   line-height: 63px;
   color: #687178;
   font-weight: normal;
   position: relative;
   display: inline-block;
}


/*--------------------------------------------------------------------------
features
---------------------------------------------------------------------------*/

.features{
   padding-top:100px;
   background-color: #fff;
 }

 .features h2{
   font-size: 50px;
}
.features h2>.sub{
   font-size: 25px;
}
.features-inner{
   display: grid;
   grid-template-columns: 1fr 1fr 1fr;
}
 .features h2{
   text-align: center;
 }
 .features-inner{
     padding: 10px 20px 100px;
     gap: 20px;
 }
 .features-inner>div{
   border:1px solid #e3e3e3;
   padding: 0 20px 15px;
 }
 .features-inner h3{
   font-size:1.4rem;
   text-align:center;
   line-height:1.4em;
}
.features-inner h3>span{
   font-size:80%;
   line-height:1.2em;
}
.points li{
  padding: 0.5em 0;
  text-align: left;
  width: 11em;
  margin: 0 auto;
  font-weight:bold;
}
.points li::before{
  content:none;
}
.points li::before{
 position: absolute;
 content:'\e904';
 font-family:'icons';
 top: calc(50% - 1px);
 left: -1.5em;
 transform: translateY(-50%);
}
 
.bf-with-w3c{
font-size:0.9rem;
padding-top:0.3em;
}
.features-inner>div{
position:relative;
}
.features-inner>div h3{
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
width: 100%;
padding: 20px 0;
}
 
.feature-fig{
border-top: 3px dashed #a1a1a1;
border-bottom: 1px dashed #a1a1a1;
width:95%;
height:13.6rem;
margin:100px auto 10px auto;
background-repeat: no-repeat;
background-position: center;
}

.feature-fig.total{
    display: flex;
    justify-content: center;
    align-items: center;
}
.feature-fig.base-quality{
    background-image:url('../images/features/feature-quality.webp');
    display: flex;
    align-items: flex-end;
    justify-content: center;
}
.feature-fig.comunitation{
   background-image:url('../images/features/feature-communication.webp');
}
.feature-fig.ux-design{
   background-image:url('../images/features/feature-ux.webp');
}
.feature-fig.responsive{
   background-image:url('../images/features/feature-responsive.webp');
 }
.feature-fig.editable{
   background-image:url('../images/features/feature-editable.webp');
 }
.lighthouse{
    font-size: 14px;
 }
.num-container{
   display:flex;
   justify-content: center;
   width:100%;
   padding-top:10px;
   margin:0 0 10px 0;
 }
.num-desc{
  position:relative;
  margin-left:40px;
}
.num-desc::before{
   content: "";
   position: absolute;
   top: 22px;
   left: -29px;
   width: 8px;
   height: 40px;
   background: #7c7c7c;
   animation: hover1 1.5s infinite;
}
.num-desc::after{
   content: "";
   position: absolute;
   top: 32px;
   left: -35px;
   width: 20px;
   height: 20px;
   border-top: 8px solid #7c7c7c;
   border-right: 8px solid #7c7c7c;
   transform: rotate(135deg);
   animation: hover2 1.5s infinite;
}
@keyframes hover1 {
   0%,100% {top: 15px; transform: scale(1);}
   30% {top: 7px; }
   50% {transform: scale(1);}
   90% {top: 15px ;transform:  scale(1.01, 0.8);}
}
@keyframes hover2 {
   0%,100% {top: 36px; transform: scale(1) rotate(135deg);}
   30% {top: 28px; transform: rotate(135deg);}
   50% {transform: scale(1) rotate(135deg);}
   90% {top: 36px; transform: scale(1.01, 0.8) rotate(135deg);}
}
.numCheck-outer{
   width:90%;
}
.features-inner>div:nth-of-type(1){
   animation-delay: 0.4s;
}
.features-inner>div:nth-of-type(2){
   animation-delay: 0.6s;
}
.features-inner>div:nth-of-type(3){
   animation-delay: 0.8s;
}
.features-inner>div:nth-of-type(4){
   animation-delay: 0.4s;
}
.features-inner>div:nth-of-type(5){
   animation-delay: 0.6s;
}
.features-inner>div:nth-of-type(6){
   animation-delay: 0.8s;
}
/*----------------------------------------------------------------------
concept(user step)
-----------------------------------------------------------------------*/
.user-step h2{
   font-size: 40px;
}

.user-step{
  padding:3em 20px 7em;
  background-color: #fff;
}

.user-step ol{
   padding: 2em 0;
}

.user-step li{
  position:relative;
  padding:2em 3em 2em 13em;
  border-top:1px solid #e2e2e2;
}
.user-step li:last-child{
  border-bottom:1px solid #e2e2e2;
}
.user-step li::before{
  content: url(../images/icons/icon-index.svg);
  position:absolute;
  top:-10px;
  left:0;
}
.user-step li::after{
  position:absolute;
  top:0.3em;
  left:5em;
}
.user-step li:nth-child(1)::after{
  content: url(../images/icons/icon-information.svg);
}
.user-step li:nth-child(2)::after{
  content: url(../images/icons/icon-search.svg);
}
.user-step li:nth-child(3)::after{
  content: url(../images/icons/icon-access.svg);
}
.user-step li:nth-child(4)::after{
  content: url(../images/icons/icon-interesting.svg);
}
.user-step li:nth-child(5)::after{
  content: url(../images/icons/icon-seek.svg);
}
.user-step li:nth-child(6)::after{
  content: url(../images/icons/icon-decide.svg);
}
.user-step li:nth-child(7)::after{
  content: url(../images/icons/icon-execution.svg);
}


/*----------------------------------------------------------------------
about
-----------------------------------------------------------------------*/
.about{
  height:500px;
  position: relative;
  z-index: 1;
}
.about-inner{
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   clip-path: inset(0);
}
.about-image{
   position: fixed;
   top: 0;
   left: 0;
   z-index: -1;
   display: block;
   width: 100vw;
   height: 100vh;
   background-position: center;
   background-image:url(../images/top/road.webp);
   background-size:cover;
}
.about::after{
   content: '';
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background-color: rgba(21, 77, 64, 0.5);
   z-index: 0;
}
.about.flexbox-center{
  flex-direction: column;
 }
.about p{
  color:#fff;
  z-index:1;
}
.contents-container .horizon{
position:relative;
background-color:#fff;
padding:5em 0;
}
.contents-container .horizon::after{
position:absolute;
content:"";
top:50%;
left:50%;
transform: translate(-50%, -50%);
height:2px;
background-color:#e3e3e3;
width:70%;
margin:0 auto;
}
.contactBox{
flex-direction: row!important;
padding:10px 0;
}
.bf-with-w3c{
margin-top:-1.5em;
}
/*----------------------------------------------------------------------
solution step
-----------------------------------------------------------------------*/
main .solution-step h2{
   font-size: 40px;
   padding-top: 30px;
}
.solution-step-inner{
   display: flex;
   justify-content: center;
   align-content: center;
   gap: 0em 60px;
}
.solution-step{
   background-color: #fff;
}
.solution-step>div{
   padding: 100px 0;
}
.solution-step .flexbox-center{
   flex-wrap:nowrap;
}
.solution-step ol{
   background: #f3f3f3;
   border-radius: 1.2em;
   width:500px;
   padding: 2.5em 0 1.5em 0;
   margin: 1em auto 0;
   position: relative;
   z-index: -1;
}
.solution-step ol .sup {
   color: #555;
   font-size: 12px;
}
.solution-step li:nth-child(1),
.solution-step li:nth-child(2),
.solution-step li:nth-child(3) {
   line-height: 0.9em;
   padding: 0.5em 1em 0.2em 2.5em;
   margin-top: 1em;
}
.solution-step li{
   position: relative;
   text-align: left;
   line-height: 1.5em;
   padding: 0.5em 1em 0.5em 2.5em;
   border-bottom: 1px solid #b3b3b3;
   background-color: #fff;
   margin: 0 auto 1em;
   width:80%;
   border-radius: 5em;
   font-weight:bold;
}
.solution-step li:first-child{
   line-height: 0.9em;
   padding: 0.5em 1em 0.2em 2.5em;
}
.solution-step li>span:first-child{
   position: absolute;
   top: 50%;
   left: 0%;
   transform: translateY(-50%);
   display:inline-block;
   border-radius: 50%;
   color: #fff;
   text-align: center;
   width:1.8em;
   height:1.8em;
   line-height: 1.8em;
   background-color: #e85e48;
}
.solution-step li::before{
   content: "";
   position: absolute;
   left: 0.87em;
   bottom: -1.6em;
   width: 2px;
   height: 2.5em;
   background-color: #e85e48;
   z-index: 1;
}
.solution-step li:nth-of-type(3)::after{
   content: url(/wp-content/themes/bf-official/images/icons/repeat-arrow.svg);
   position: absolute;
   left: -45px;
   bottom: 23px;
   z-index: -1;
   transform: scale(1.2);
}
.solution-step li:nth-last-child(1):before{
   content: none;
}
div.detail_step{
   text-align:right;
   margin: 5px 9px 0 0;
   margin-bottom:3em;
}
.detail_Step a{
   position:relative;
   padding-right:1em;
}
.detail_Step a::before{
   content: "";
   position: absolute;
   top: 0.35em;
   left: -1.5em;
   width: 0.8em;
   height: 0.25em;
   border-bottom: 1px solid #000;
   border-right: 1px solid #000;
   transform: skew(45deg);
}

/*----------------------------------------------------------------------
contactLink
-----------------------------------------------------------------------*/
.contactLink{
  background: linear-gradient(90deg, #fff8f0 10%, #fff1e2 100%);
  padding: 30px 20px 50px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

a.form,
a.online{
    position:relative;
    display: flex;
    justify-content:
    center; align-items: center;
    text-align:center;
    background: linear-gradient(to right,#7a4035, #95584f);
    color:#fff;
    font-weight: bold;
    width:16em;
    max-width:100%;
    height:80px;
    line-height:1.3em;
    z-index: 10;
  }

a.form{
  margin-right:0px;
  padding-left:1.5em;
}
a.form>span::before,
a.online>span::before{
   position: absolute;
   top: calc(50% + 1px);
   transform: translateY(-50%);
   left: -37px;
   width: 25px;
   height: 25px;
}
a.form>span::before{
   content: url(/wp-content/themes/bf-official/images/icons/email-w.svg);
   left: -37px;
}
a.online>span::before{
   content: url(/wp-content/themes/bf-official/images/icons/check-w.svg);
   left: -38px;
}
.contactBox{
    gap: 30px;
}
/*------------------------------------------------------------
category list
--------------------------------------------------------------*/
main .blog h2{
   font-size: 40px;
   margin-bottom: 45px;
}
section.blog{
  padding-top:5em;
  background-color: #fff;
}
.grid.category{
  gap:20px;
  padding:0 20px;
}
.grid.category {
  grid-template-columns: repeat( 4 , 1fr );
}
.blog h2 {
   text-align: left;
   margin-left: 40px!important;
}
.blog-cat img{
   width: 100%;
   aspect-ratio: 275/172.67;
}
.category-list li{
  border:1px solid #e3e3e3;
}
.category-list h3{
  margin:0;
  font-size:1.5rem;
  text-align:center;
  padding:1em 0 0.5em;
  border-top :1px solid #e3e3e3;
  color:#000;
}
.category-list a{
  padding:1em;
  transition: .5s ease;
  height:100%;
}
.category-list a:hover{
  transition: .5s ease;
  background-color:#e3e3e3;
  transform:scale(1.01);
}
.category-list p{
  margin:0;
  color:#464646;
  padding-left:0.5em;
}
aside.blog-list{
  background-color: #fff;
}
.blog-cat.category>li:nth-of-type(2){
   animation-delay: 0.2s;
}
.blog-cat.category>li:nth-of-type(3){
   animation-delay: 0.4s;
}
.blog-cat.category>li:nth-of-type(4){
   animation-delay: 0.6s;
}
.blog-cat.category>li:nth-of-type(5){
   animation-delay: 0.8s;
}
.blog-cat.category>li:nth-of-type(6){
   animation-delay: 1.0s;
}
.blog-cat.category>li:nth-of-type(7){
   animation-delay: 1.2s;
}
.blog-cat.category>li:nth-of-type(8){
   animation-delay: 1.4s;
}
/*--------------------------------------------
blog-list
---------------------------------------------*/
.blogs-list-atTop h2{
   font-size: 40px;
   margin-bottom: 45px;
   text-align: left;
   margin-left: 27px!important;
}
.blogs-list-atTop{
   padding: 100px 0 30px;
   background-color: #fff;
}
.blogs-list-atTop>div{
   max-width: 1400px;
   margin: 0 auto;
   padding: 0 15px;
}
.blogs-list-atTop li{
   border-bottom: 1px solid #e5eaeb;
}

.blogs-list-atTop .thumbnail-wrapper {
   height: auto;
   border: 1px solid #ebebeb;
   position: relative;
}

.blogs-list-atTop img{
   height: 100%;
}
.blog-list-wrapper{
   display: flex;
   flex-direction: column;
   align-items: center;
   padding: 5px 0;
}
.blogs-list-link{
   text-decoration: none;
   padding: 25px 15px 15px 15px;
}
p.cat {
   right: unset;
   left: -6px;
   top: -17px;
}
.blogs-list-atTop a:hover{
   opacity: .7;
}
.blogs-list-atTop h3{
   font-size: 15px;
   color: #0c1028;
   padding: 8px 0 0 0;
}
.blogs-list-atTop-inner{
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
}
.blogs-list-atTop .view-more-wrapper{
  margin-top: 70px;
  text-align:center;
}
.news-list-container .view-more{
   margin-top: 15px;
}
.blogs-list-atTop .view-more{
   font-size: 18px;
   padding: 5px 25px 7px 4px;
}

/*************************************************************************
1340px
**************************************************************************/
@media screen and (max-width: 1340px) { 
.features-inner>div:nth-of-type(1){
   animation-delay: 0.4s;
}
.features-inner>div:nth-of-type(2){
   animation-delay: 0.6s;
}
.features-inner>div:nth-of-type(3){
   animation-delay: 0.4s;
}
.features-inner>div:nth-of-type(4){
   animation-delay: 0.6s;
}
.features-inner>div:nth-of-type(5){
   animation-delay: 0.4s;
}
.features-inner>div:nth-of-type(6){
   animation-delay: 0.6s;
}
.features-inner {
   grid-template-columns: 1fr 1fr;
}
}
/*************************************************************************
1140px
**************************************************************************/
@media screen and (max-width: 1140px) {
.grid.category{
grid-template-columns: repeat( 3 , 1fr );
}
.blog-cat.category>li:nth-of-type(2){
   animation-delay: 0.2s;
}
.blog-cat.category>li:nth-of-type(3){
   animation-delay: 0.4s;
}
.blog-cat.category>li:nth-of-type(4){
   animation-delay: 0s;
}
.blog-cat.category>li:nth-of-type(5){
   animation-delay: 0.2s;
}
.blog-cat.category>li:nth-of-type(6){
   animation-delay: 0.4s;
}
.blog-cat.category>li:nth-of-type(7){
   animation-delay: 0s;
}
.blog-cat.category>li:nth-of-type(8){
   animation-delay: 0.2s;
}
.contents-container section{
  width:100%;
  padding: 50px 20px;
}
section.news{
   padding: 70px 20px 95px;
}
section.features,
section.blog{
  padding: 50px 20px 0;
  overflow-x: hidden;
}
section.message{
   padding: 0 20px 150px;
   align-items: center;
   gap: 0;
   flex-direction: column;
}
section.news {
   flex-direction: column;
}
section.faq{
   width: calc(100% - 15px);
}
.samples-image {
    max-width: 500px;
}
.message-content .txt-01 {
   margin: 50px 0 0;
}
.message-content .txt-02 {
   margin: 10px 0 0 0;
}
.samples-image{
   max-width: 650px;
}
.for-pc-msg{
   display: none;
}
.catchphrase p{
   line-height: 0;
   margin: 0 0 40px;
}
.samples-image>img {
   margin: 60px 0 0;
}
.message-content .txt-03 {
   margin: 50px 0 0;
}
.about>img{
   transform: translateY(180px) scale(3);
}
}
/*************************************************************************
1024px
**************************************************************************/
@media screen and (max-width: 1024px) {
.features-inner>div:nth-of-type(1){
   animation-delay: 0.2s;
}
.features-inner>div:nth-of-type(2){
   animation-delay: 0.2s;
}
.features-inner>div:nth-of-type(3){
   animation-delay: 0.2s;
}
.features-inner>div:nth-of-type(4){
   animation-delay: 0.2s;
}
.features-inner>div:nth-of-type(5){
   animation-delay: 0.2s;
}
.features-inner>div:nth-of-type(6){
   animation-delay: 0.2s;
}
.features-inner {
   grid-template-columns: 1fr;
}
.solution-step .flexbox-center{
  flex-wrap:wrap;
}
.solution-step>div {
  padding-top: 0px;
}
.solution-step>div{
    padding-top: 20px;
}
.solution-step ol {
 padding:2em 0;
 font-size:1.0rem;
 width: 100%;
}
div.detail_Step{
 width:100%;
}
ul.points {
 width: 80%;
}
.message-content {
    padding: 0;
}
.news span.sub{
  font-size: 20px;
}
.news-list time{
  margin-right: 15px;
  min-width: 75px;
}
.news-list li{
  font-size: 14px;
}
a.more{
  margin: 20px 5px 0 0;
}
.contents-container a.form, .contents-container a.online {
   height: 67px;
   width: 275px;
}
}
/*************************************************************************
900px
**************************************************************************/
@media screen and (max-width: 900px) { 
.grid.category{
   grid-template-columns: repeat( 2 , 1fr );
}
.blog-cat.category>li:nth-of-type(2){
   animation-delay: 0.2s;
}
.blog-cat.category>li:nth-of-type(3){
   animation-delay: 0s;
}
.blog-cat.category>li:nth-of-type(4){
   animation-delay: 0.2s;
}
.blog-cat.category>li:nth-of-type(5){
   animation-delay: 0s;
}
.blog-cat.category>li:nth-of-type(6){
   animation-delay: 0.2s;
}
.blog-cat.category>li:nth-of-type(7){
   animation-delay: 0s;
}
.blog-cat.category>li:nth-of-type(8){
   animation-delay: 0.2s;
}
.blog-list-wrapper{
   flex-direction: column;
   align-items: center;
}
.blogs-list-atTop li {
   padding-top: 10px;
}
.choose-inner{
   display: flex;
   flex-direction: column-reverse;
   gap: 15px;
}
.choose-inner img {
   max-width: 240px;
}
.choose h2 {
   font-size: 25px;
}
.choose-inner {
padding: 40px 0;
}
main .works h2 {
font-size: 18px;
}
.amazing{
   font-size: 22px;
   padding: 5px 17px;
   top: -35px;
   left: 0;
}
.solution-step-inner{
   flex-direction: column-reverse;
   align-items: center;
}
.higher-rank {
   font-size: 35px;
}
.img-3 img{
   max-width: 250px;
}
}
/*************************************************************************
767px
**************************************************************************/
@media screen and (max-width:767px) {
.img-1{
   background-image: url("../images/mv/mv-01-sp.webp");
   background-position: 0 0;
 }
 .img-2{
   background-image: url("../images/mv/mv-02-sp.webp");
   background-position: 0 0;
 }
 .solution-step li:nth-of-type(3)::after {
   left: -41px;
   transform: scale(1.1);
}
.works-img-wrapper{
   flex-direction: column;
}
}
/*************************************************************************
599px
**************************************************************************/
@media screen and (max-width:599px) {
.charactor-wrapper a {
   bottom: -28px;
   right: 70px;
}
.img-3 img{
   max-width: 176px;
}
.grid.category {
   grid-template-columns: 1fr;
}
.blog-cat.category>li:nth-of-type(1){
   animation-delay: 0.1s;
}
.blog-cat.category>li:nth-of-type(2){
   animation-delay: 0.1s;
}
.blog-cat.category>li:nth-of-type(3){
   animation-delay: 0.1s;
}
.blog-cat.category>li:nth-of-type(4){
   animation-delay: 0.1s;
}
.blog-cat.category>li:nth-of-type(5){
   animation-delay: 0.1s;
}
.blog-cat.category>li:nth-of-type(6){
   animation-delay: 0.1s;
}
.blog-cat.category>li:nth-of-type(7){
   animation-delay: 0.1s;
}
.blog-cat.category>li:nth-of-type(8){
   animation-delay: 0.1s;
}
.news-list a {
   flex-direction: column;
   align-items: flex-start;
   gap: 2px;
}
div.desc,
div.figure{
  width:100%;
}
.catchphrase p{
   padding-left: 12px;
   letter-spacing: .2em;
 }
 #scrollLink {
   left: 2%;
   bottom: 2%;
}
.mainVisual-image-frame{
   height: 350px;
 }
.message-content .txt-01{
  font-size: 20px;
  margin-top:25px;
}
.message-content .txt-01 span{
  margin-top: 12px;
  font-size: 33px;
}
.message-content .txt-02{
   font-size: 16px;
   line-height: 1.7em;
   margin: 0;
}
.message-content .txt-02 span{
  margin-top: 15px;
  font-size: 30px;
}
.message-content .txt-03 {
   white-space: initial;
   text-align: left;
}
main h2,
main h2.enFont2 {
  font-size: 37px;
 }
main .news-title h2{
  font-size:43px;
}
.news-title{
   top: -31px;
}
.news-title .sub {
   margin-top: 9px;
}
.news span.sub {
   font-size: 17px;
}
.home section.message {
  padding: 0 15px 80px;
}
.mainVisual-image-frame{
   right: -24%;
 }
.catchphrase {
  margin-top: 25px;
  writing-mode: vertical-rl;
  text-orientation: upright;
  height: 100%;
}
@keyframes op-text {
   0% {opacity:0; left: 100%; transform: translateY(-50%) scale(.3);}
   50% {opacity:0; }
   100% {opacity:1; left:3%; transform: translateY(-50%) scale(1); }
 }
#scrollLink a{
  font-size:12px;
  bottom: 76px;
}
section.features{
    padding: 80px 6px 0;
}
.features-inner>div {
  padding: 0 15px;
}
.features-inner {
  gap: 8px;
}
.feature-fig {
  width: 100%;
}
.user-step li {
  padding: 2em 0em 2em 7.5em;
}
.user-step li::after {
  position: absolute;
  left: 2em;
}
.solution-step ol .sup {
  font-size: 10px;
}
.solution-step>div{
  padding-top: 0px;
}
.contents-container a.form,
.contents-container a.online {
  margin: 0 auto;
}
.contents-container a.form{
  margin-bottom:16px;
}
.contents-container a.form,
.contents-container a.online{
  height: 67px;
  width: 275px;
}
.contactBox{
  flex-direction: column!important;
  gap:0;
}
.solution-step ol, ul.points {
  padding:2em 0;
  width: 100%;
}
ul.points span {
  padding-right: 0.7em;
}
.features-inner h3 {
  font-size: 1.2rem;
}
.features-inner{
  padding: 10px 0px 30px;
}
.grid.category{
  padding:0px;
}
.numCheck-outer{
  width:95%;
}
.contents-container .contactLink {
   padding: 30px 0 25px;
}
.news ul{
  width:100%;
}
section.news {
  padding: 70px 15px;
  margin-left: 15px;
  position: relative;
}
section.news::before {
   content: '';
   position: absolute;
   width: 15px;
   height: 100%;
   background-color: #fff;
   left: -15px;
   z-index: 1;
}
.blogs-list-atTop h2{
   text-align: left;
}
.blogs-list-atTop>div {
   padding: 0;
}
.blogs-list-atTop .txt {
   padding: 0;
}
.feature-fig{
   margin:87px auto 0 auto;
}
section.faq{
   padding-bottom: 100px;
   margin-right: 15px;
}
section.blog {
   padding: 80px 15px 10px;
}
section.blogs-list-atTop {
   padding: 80px 15px 0;
}
.right-arrow-r {
   margin-top: -21px;
   margin-right: 36px;
}
.news-title {
   left: 28px;
}
section.faq{
   padding :100px 20px 50px;
}
.blog h2 {
   margin-left: 5px!important;
}
main .blogs-list-atTop h2{
   margin-left: 5px!important;
}
.solution-step>div {
   padding: 0;
}
.higher-rank {
   font-size: 30px;
}
.samples-image .link-wrapper{
   transform: translateX(0);
}
}