@charset "utf-8";

/*-------------------------------------------------------------------------------------
LP基本設定
----------------------------------------------------------------------------------------*/
/* sp */
html {
  font-size: calc((100vw / 37.5));
}
/* tab */
@media screen and (min-width:751px) and ( max-width:1080px)  {
  html {
    font-size: calc((100vw / 108));
  }
}
/* pc */
@media screen and (min-width: 1081px) {
  html {
    font-size: 62.5%;
  }
}


.container{
  margin-top: 55px;
}
body{
  font-size: 1.6rem;
  font-feature-settings: "palt";
}
  @media screen and (min-width: 751px) {
    .container{
      margin-top: 8rem;
    }
    body{
      font-size: 1.8rem;
    }
  }


section{
  overflow: hidden;
}

/* 見出し */
h1{
  line-height: 1;
}
h2,h3,h4,h5,h6{
  line-height: 1.35;
  font-weight: 700;
}

/* table */
table th,
table td{
  line-height: 1.5;
  font-weight: 500;
}

/* li */
li{
  line-height: 1.5;
  font-weight: 500;
}

/* dl */
dt,dd{
  line-height: 1.5;
}

/* 段落 */
p{
  line-height: 1.5;
  text-align: justify;
}
@media screen and (min-width: 751px) {
  p{
    line-height: 1.8;
  }
}

/* anchor link */
a{
  color: #000;
}
/* ホバー */
a img:hover{
  opacity: 0.9;
  -webkit-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
}

/*-------------------------------------------------------------------------------------
layout
----------------------------------------------------------------------------------------*/
.secIn{
  width: 100%;
  width: min(100%,1080px);
  margin: 0 auto;
  padding: 4rem 2rem;
  position: relative;
}
  @media screen and (min-width: 751px) {
    .secIn{
      padding: 6.4rem 4rem;
    }
  }






/*-------------------------------------------------------------------------------------
main
----------------------------------------------------------------------------------------*/

/*
.secTtl
--------------------------------------------------------*/
.secTtl01{
  position: relative;
  background: var(--main-color);
  margin-bottom: 4rem;
  padding: 1.6rem;
  text-align: center;
  font-size: 3.2rem;
  color: var(--white-color);
}
.secTtl01::after{
  z-index: 10;
  content: "";
  width: 9.6rem;
  height: 3.2rem;
  position: absolute;
  bottom: -3rem;
  left: 50%;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  background: var(--main-color);
  clip-path: polygon(50% 100%, 0 0, 100% 0);
}
.secTtl01 span{
  position: relative;
  font-weight: 900;
}
.secTtl01 span.small{
  font-size: 2.2rem;
}
.secTtl01 span.num{
  font-family: "Oswald", sans-serif;
  line-height: 1;
  font-size: 6rem;
}
@media screen and (min-width: 751px) {
  .secTtl01{
    padding: 3.2rem;
    font-size: 4rem;
  }
  .secTtl01::after{
    width: 11.3rem;
    height: 4.2rem;
    bottom: -4rem;
  }
  .secTtl01 span.small{
    font-size: 3.2rem;
  }
}




.secTtl02{
  padding: 3.2rem 0 1.6rem;
  text-align: center;
  font-size: 3.2rem;
  color: var(--main-color);
}
.secTtl02 span.small{
  display: block;
  font-size: 2rem;
  font-weight: 900;
}
@media screen and (min-width: 751px) {
  .secTtl02{
    padding: 6.4rem 0 2.4rem;
  }
  .secTtl02{
    font-size: 4rem;
  }
  .secTtl02 span.small{
    font-size: 2.4rem
  }
}

/*-------------------------------------------------------------------------------------
background
----------------------------------------------------------------------------------------*/

.bg_hougansi{
  background-image: linear-gradient(0deg, transparent calc(100% - 1px), #f0f0f0 calc(100% - 1px)),
  linear-gradient(90deg, transparent calc(100% - 1px), #f0f0f0 calc(100% - 1px));
  background-size: 24px 24px;
  background-repeat: repeat;
  background-position: left top;
}

.bg_semicircle{
  position: relative;
  overflow: hidden;
}
.bg_semicircle::before{
  content: "";
  position: absolute;
  background:var(--bg--blue-color02);
  width: 64rem;
  height: 64rem;
  background-size: contain;
  top: -36rem;
  left: 50%;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  clip-path: circle(50% at 50% 50%);
}





/*
fv
--------------------------------------------------------*/
.fv{
  background: url(../img/sp-bg-fv.jpg)no-repeat;
  background-size: cover;
  overflow: visible;
}
.fv .secIn{
  padding: 4rem 0.4rem 1.3rem 0.4rem;
}
.fv_img{
  margin-bottom: -2.3rem;
  display: block;
  z-index: 10;
  position: relative;
}

@media screen and (min-width: 751px){
  .fv{
    background: url(../img/bg-fv.jpg)no-repeat;
    background-size: cover;
  }
  .fv .secIn{
    padding: 0 2.4rem;
  }
  .fv_img{
    margin-bottom: -1.6rem;
  }
  .fv_img::before{
    content: "";
    width: 76.9%;
    height: 32rem;
    background: url(../img/fv-arrow.png) no-repeat;
    background-size: contain;
    position: absolute;
    left: -13rem;
    top: 8rem;
    z-index: -1;
  }
}

/*
CTA
--------------------------------------------------------*/
.cta{
  background: var(--main-color);
}
.cta .secIn{
  padding: 3.2rem 2rem;
}

.cta_contents{
  margin: 0 auto 0.8rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.cta_contents .tag{
  position: relative;
  display: inline-block;
  padding: 0.4rem 1.2rem;
  border-radius: 60px;
  background: var( --yellow-color);
  line-height: 1;
  font-weight: 900;
}
.cta_contents .tag:first-of-type{
  margin-bottom: 1rem;
}
.cta_contents .tag::before{
  content: "";
  position: absolute;
  width: 2.1rem;
  height: 1rem;
  bottom: -0.8rem;
  left: 4rem;
  clip-path: polygon(100% 100%, 0 0, 74% 0);
  background: var(--yellow-color);
}
.cta_contents .tag + .tag{
  margin: 0 0 1.6rem 0;
}
.cta_contents .list{
  margin-bottom: 2.4rem;
}
.cta_txt{
  margin-bottom: 3.2rem;
  line-height: 1;
  font-size: 3.8rem;
  font-weight: 700;
  color: var(--white-color);
}
.cta_contents .list li{
  margin-bottom: 0.6rem;
  padding-left: 2.6rem;
  background: url(../img/cta_check.svg) no-repeat left center;
  background-size: 1.9rem 1.4rem;
  color: var(--white-color);
  font-weight: 700;
  line-height: 1.35;
}
.cta_btnArea{
  margin-top: -2.7rem;
}
.ctaBtn a{
  display: block;
}


@media screen and (max-width: 750px){
  .cta_imgArea,
  .cta_contents .list{
    display: none!important;
  }
}



@media screen and (min-width: 751px){
  .cta .secIn{
    padding: 4.8rem 4rem;
  }
  .cta_contents{
    display: flex;
  }
  .cta_contents .tag + .tag{
    margin: 0 0 1rem 1rem;
  }
  .cta_txt{
    font-size: 5.6rem;
  }
  .cta_contents{
    margin: 0 auto;
  }
  .cta_contents .list{
    margin-bottom: 0;
  }
  .cta_contents .list li{
    margin-bottom: 1rem;
  }
  .cta_btnArea{
    margin-top: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }
  .ctaBtn{
    width: 49.5%;
  }
}



/* cta02 */
.cta02 .secIn{
  position: relative;
}
.cta02 .cta_contents{
  position: relative;
  margin-bottom: 0;
}
.cta_subTxt{
  color: var(--white-color);
  font-weight: 700;
}
.cta_subTxt .tag{
  color: var(--main-color);
}
.cta02 .cta_contents .tag + .tag{
  margin: 0 0 1.6rem 0.4rem;
}
.cta02 .cta_imgArea{
  display: flex;
  align-items: center;
}
.cta02 .cta_txt{
  font-size: 3.4rem;
  margin-bottom: 4rem;
  white-space: nowrap;
}
.cta02 .cta_img01{
  width: 42%;
}
.cta02 .cta_img02{
  width: 68%;
}
.cta02  .cta_contents .list{
  margin-bottom: 0;
}

@media screen and (min-width: 751px){
  .cta02 .cta_textarea{
    width: 61%;
  }
  .cta02 .cta_imgArea{
    width: 39%;
  }
  .cta02 .cta_img01{
    position: absolute;
    width: 18rem;
    right: 2rem;
    top: 2rem;
  }
  .cta02 .cta_img02{
    position: absolute;
    width: 23.5rem;
    bottom: -4rem;
    right: 19rem;
  }
  .cta02 .cta_txt {
    margin-bottom: 3.2rem;
    font-size: 5.7rem;
  }
}


/*
お悩み
--------------------------------------------------------*/
.onayami{
  background-color: var(--bg--gray-color02);
  background-image: url(../img/bg-onayami.png);
  background-repeat: no-repeat;
  background-position: top 6rem center;
}
.onayami .secIn{
  padding-bottom: 0;
}
.onayamiTtl{
  width: min(100%,928px);
  margin: 0 auto -0.2rem;
}
.onayami_contents{
  display: flex;
  flex-wrap: wrap;
  gap: 2.4rem;
}
.onayami_box{
  width: 100%;
}
.onayami_box_ttl{
  margin: 0 auto 1.2rem;
  position: relative;
  background: var(--gray-color03);
  border-radius: 16px;
  padding: 0.8rem 5rem 0.8rem 6rem;
  text-align: center;
  color: var(--white-color);
  font-size: 2.2rem;
}
.onayami_box .corporation_ttl::before,
.onayami_box  .personal_ttl::before{
  content: "";
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
    background-size: contain; 
}
.onayami_box  .corporation_ttl::before{
  background: url(../img/corporation-icon.svg) no-repeat;
  width: 2.6rem;
  height: 2.6rem;
  background-size: contain;
  left: 3.2rem;
}
.onayami_box  .personal_ttl::before{
  background: url(../img/personal-icon.svg) no-repeat;
  width: 2.6rem;
  height: 2.6rem;
  background-size: contain;
  left: 3.6rem;
}
.onayami_list{
  background: var(--white-color);
  padding: 1.2rem 1.6rem;
  border-radius: 16px;
}
.onayami_list li{
    background: url(../img/onayami-check.svg) no-repeat left center;
    background-size: 1.9rem 1.4rem;
    padding: 0.8rem 0 0.8rem;
    border-bottom: dashed 2px var(--gray-color);
    padding-left: 2.8rem;
    text-align: left;
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1.35;
}
.onayami_list li:last-of-type{
  margin-bottom: 0;
}


@media screen and (min-width: 751px){
  .onayami_contents{
    align-items: stretch;
  }
  .onayami_box{
    width: calc((100% - 2.4rem) / 2);
  }
  .onayami_box_ttl{
    width: 100%;
    padding: 1.2rem 5rem 1.2rem 6rem;
    font-size: 2.4rem;
  }
  .onayami_box .corporation_ttl::before{
    width: 3.2rem;
    height: 3.2rem;
    left: 9.2rem;
  }
  .onayami_box .personal_ttl::before {
    width: 3.2rem;
    height: 3.2rem;
    left: 10.1rem;
  }
  .onayami_list{
    min-height: 31rem;
    padding: 2.4rem 4rem;
  }
  .onayami_list li{
    padding: 1.2rem 0 1.2rem 2.8rem;
    font-size: 1.8rem;
  }
}

/*
解決
--------------------------------------------------------*/

.solution{
  background: var(--bg--blue-color);
  padding-bottom: 2rem;
}
.solution .secIn{
  width: min(calc(100% - 4rem),1080px);
  margin: 0 auto 4rem;
  padding-top: 0;
  background: var(--white-color);
  border-radius: 0 0 24px 24px;
}
.solution_ttl{
  position: relative;
  background: var(--blue-color);
  padding: 9rem 0 0;
}
.solution_ttl::before{
  content: "";
  position: absolute;
  top: -1px;
  right: 0;
  left: 0;
  width: 100vw;
  height: 7.2rem;
  background: var(--bg--gray-color02);
  clip-path: polygon(50% 100%, 0 0, 100% 0);
}
.solution_ttl:after{
  content: "";
  position: absolute;
  top: 1.7rem;
  left: 50%;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  width: 13.6rem;
  height: 8.3rem;
  background: url(../img/solution-arrow.png) no-repeat;
  background-size: contain;
}
.solution_ttl_img{
  position: relative;
  z-index: 10;
  width: min(100%,960px);
  margin: 0 auto;
}


@media screen and (min-width: 751px){
  .solution .secIn{
    margin-bottom: 5.6rem;
  }
  .solution_ttl{
    flex-direction: row;
    padding: 12rem 2.4rem 2rem;
  }
  .solution_ttl::before{
    height: 9.6rem;
  }
  .solution_ttl:after{
    width: 18.6rem;
    height: 11.8rem;
    top: 3rem;
    left: 50.5%;
  }
  .solution_ttl_img{
    margin: 0 auto -3.9rem;
  }
}


.taisaku_ttl{
  width: min(100%,750px);
  margin: 0 auto;
}
.solution_img{
  position: relative;
  width: min(100%,800px);
  margin: -3.2rem auto 2rem;
}
.solution_txt{
  line-height: 1.5;
  font-size: 1.8rem;
  font-weight: 500;
}
.media_img{
  width: min(100%,880px);
  margin: 0 auto;
  padding: 0 2rem;
}
.media_txt{
  position: relative;
  width: min(100%,810px);
  margin: -2rem auto 0;
  padding: 0 2rem;
}

@media screen and (min-width: 751px){
  .solution {
    padding-bottom: 8rem;
  }
  .solution_txt{
    font-size: 2rem;
    text-align: center;
  }
  .solution_img{
    margin: -6rem auto 4rem;
    padding: 0;
  }
  .media_txt{
    margin: -9rem auto 0;
    padding: 0;
  }
}


/*
ブランディング×逆SEO対策
W効果で最大限の成果を実現!
--------------------------------------------------------*/
.beforeAfter .secIn{
  padding-top: 1rem;
}
.beforeAfter .txt{
  margin-bottom: 2.4rem;
  font-weight: 500;
}
@media screen and (min-width: 751px){
  .beforeAfter .secIn{
    padding-top: 2rem;
  }
  .beforeAfter .txt{
    text-align: center;
  }
}




/*
ネガティブワードを放置すると・・・
最悪の事態を
招きかねません！
--------------------------------------------------------*/
.problem{
  background: url(../img/bg-problem.jpg) no-repeat top center;
  background-size: cover;
}
.problem .secIn{
  background: url(../img/bg-txt.png) no-repeat top 22rem center;
  background-size: 94vw;
}
.problemTtl{
  width: 88%;
  margin: 0 auto;
}
.promrem_img{
  margin: -4rem auto 0;
}
@media screen and (min-width: 751px){
  .problem .secIn{
    background: url(../img/bg-txt.png) no-repeat top 8rem center;
    background-size: contain;
  }
  .problemTtl{
    width: 41.2%;
    margin: 0 auto;
  }
  .promrem_img{
    width: 83.3%;
    margin: -4rem auto 0;
  }
}


/*
このようなお客様からも多くのご相談をいただきます
--------------------------------------------------------*/
.target .secIn{
  padding-top: 2rem;
}


.targetTtl span.ttl{
  position: relative;
}
.targetTtl span.ttl::before{
  position: absolute;
  left: -17rem;
  top: 50%;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  content: "";
  background: url(../img/targetTtl-icon.svg) no-repeat;
  background-size: contain;
  width: 7.2rem;
  height: 6.1rem;
}

.target_contents .box{
  background: var(--white-color);
  width: 100%;
  border-radius: 16px;
  font-size: 2.4rem;
  text-align: center;
}
.target_contents .box + .box{
  margin-top: 2.4rem;
}
.corporation{
  border: 3px solid var(--green-color);
}
.personal{
  border: 3px solid var(--blue-color);
}
.target_contents .ttl{
  position: relative;
  border-radius: 12px 12px 0 0;
  padding: 1rem;
  color: var(--white-color);
}
.target_contents .ttl::before{
  content: "";
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
}
.target_contents .corporation_ttl{
  background: var(--green-color);
}
.target_contents .corporation_ttl::before{
  background: url(../img/corporation-icon.svg) no-repeat;
  width: 3.2rem;
  height: 3.2rem;
  background-size: contain;
  left: 4.8rem;
}
.target_contents .personal_ttl{
  padding: 1rem;
  background: var(--blue-color);
}
.target_contents .personal_ttl::before{
  background: url(../img/personal-icon.svg) no-repeat;
  width: 3rem;
  height: 3.2rem;
  background-size: contain;
  left: 5.6rem;
}
.target_contents .list{
  padding: 2rem;
}
.box .list li{
  text-align: left;
  font-size: 1.8rem;
  margin-bottom: 0.8rem;
  padding-left: 2.8rem;
  background-size: 1.9rem 1.4rem;
  font-weight: 700;
  line-height: 1.35;
}
.box .list li:last-of-type{
  margin-bottom: 0;
}
.corporation .list li{
  background: url(../img/corporation-check.svg) no-repeat left center;
}
.personal .list li{
  background: url(../img/personal-check.svg) no-repeat left center;
}




@media screen and (min-width: 751px){
  .target .secIn{
    padding-top: 4rem;
  }
  .target_contents{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 2.4rem;
  }
  .target_contents .box{
    width: 40%;
  }
  .corporation_ttl::before{
    width: 3.7rem;
    height: 3.7rem;
    left: 7rem;
  }
  .personal_ttl::before {
    width: 3rem;
    height: 3.6rem;
    left: 8.2rem; 
  }
  .target_contents .box + .box{
    margin-top: 0;
  }
  .target_contents .list{
    padding: 2.4rem;
  }
  .box .list li{
    margin-bottom: 1.6rem;
    font-size: 2rem;
  }
}

/*
料金
--------------------------------------------------------*/
.price{
  background: var(--bg--gray-color01);
  padding-bottom: 4rem;
}
.price .secIn{
  width: min(calc(100% - 4rem),1080px);
  margin: -4rem auto 0;
  background: var(--white-color);
  border-radius: 0 0 24px 24px;
}

.price_readTxt{
  margin-bottom: 2.4rem;
  font-weight: 700;
}

.price_list{
  margin: 0 auto 1.6rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1.6rem;
}
.price_item{
  width: 100%;
  margin: 0 auto;
}
.price_aleart{
  margin-bottom: 4rem;
  line-height: 1.5;
  font-size: 1.2rem;
  color: var(--gray-color03);
}

.price_support{
  width: min(100%,800px);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between
}
.price_support .img{
  margin: 3.2rem 0 0 -3rem;
  width: 40%;
}
.price_support .txt{
  position: relative;
  width: 70%;
  margin-top: 3.2rem;
  border-radius: 16px;
  padding: 1.6rem;
  border: 3px solid var(--gray-color);
  background: var(--white-color);
  line-height: 1.5;
  font-size: 1.8rem;
  font-weight: 700;
}
.price_support .txt::before{
  position: absolute;
  top: 5.5rem;
  left: -1.7rem;
  content: "";
  width: 2.5rem;
  height: 2.2rem;
  background: url(../img/hukidasi.svg)no-repeat;
  background-size: contain;
}


@media screen and (min-width: 751px){
  .price{
    padding-bottom: 8rem;
  }
  .price .secIn{
    padding-bottom: 0;
  }
  .price_readTxt{
    margin-bottom: 4rem;
    text-align: center;
  }
  .price_item{
    width: calc(( 100% - 4.8rem) / 3);
  }
  .price_support .txt{
    margin-top: 3.2rem;
    padding: 2.4rem 4rem;
    font-size: 2.4rem;
  }
  .price_support .img{
    margin-top: 0;
  }
  .price_aleart{
    text-align: center;
    font-size: 1.4rem;
  }
}


/*
アクシアカンパニーに依頼する
4つのメリット
--------------------------------------------------------*/
.merit{
  background: url(../img/bg-merit.jpg) no-repeat top center;
  background-size: 100vw 60rem;
}
.meritTtl{
  margin-bottom: 6rem;
  text-align: center;
  font-size: 3.2rem;
  font-weight: 900;
  color: var(--main-color);
}
.meritTtl span.small{
  font-size: 2.3rem;
  font-weight: 900;
}
.meritTtl span.ttl{
  position: relative;
  font-weight: 900;
}
.meritTtl span.num{
  font-family: "Oswald", sans-serif;
  line-height: 1;
  font-size: 6rem;
  font-weight: 900;
}
.meritTtl span.ttl::before {
  position: absolute;
  left: 0;
  top: 48%;
  content: "";
  background: url(../img/meritTtl-icon.svg) no-repeat;
  background-size: contain;
  width: 5rem;
  height: 5.8rem;
}


.merit_list{
  width: min(100%,880px);
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 4.8rem;
}
.merit_item{
  background: var(--white-color);
  width: 100%;
  padding: 0 2.4rem 2.4rem 2.4rem;
  border-radius: 16px;
  border: 5px solid var(--main-color);
  box-shadow: 6px 6px 0px 0px var(--bg--blue-color);
  text-align: center;
}
.merit_item .tag{
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22.8rem;
  height: 4.8rem;
  margin: -2.6rem auto 2rem;
  clip-path: polygon(100% 1%, 92% 50%, 100% 100%, 0 100%, 8% 50%, 0 0);
  background: var(--main-color);
}

.merit_item .tag span{
  font-family: "Oswald", sans-serif;
  font-weight: 700;
  color: var(--white-color);
  line-height: 1;
  font-size: 2.2rem;
}
.merit_item .tag .eng{
  position: relative;
  top: 0.1rem;
}
.merit_item .tag .num{
  display: inline-block;
  margin-left: 0.4rem;
  position: relative;
  top: -0.2rem;
  font-size: 3.2rem;
}
.merit_item_ttl{
  margin-bottom: 1.2rem;
  text-align: left;
  font-size: 2.8rem;
  color: var(--main-color);
  font-weight: 900;
}
.merit_item .img{
  width: 20rem;
  margin: -2rem auto;
}


@media screen and (min-width: 751px){
  .merit {
    background: url(../img/bg-merit.jpg) no-repeat top 1center;
    background-size: 100vw;
  }
  .meritTtl{
    font-size: 4rem;
  }
  .meritTtl span.small{
    font-size: 3.2rem;
  }
  .merit_list{
    gap: 4.8rem 3.2rem;
  }
  .merit_item{
    width: calc((100% - 3.2rem) / 2);
    padding: 3.2rem;
  }
  .merit_item_ttl{
    font-size: 3.2rem;
  }
  .meritTtl span.ttl::before{
    width: 5.9rem;
    height: 6.5rem;
    left: 2rem;
  }
  .merit_item .tag{
    margin: -5.8rem auto 2rem;
  }
  .merit_item .img {
    width: 24rem;
    margin: -2rem auto;
  }
}

/*
実際にあったご相談の
解決事例
--------------------------------------------------------*/
.case{
  background: url(../img/bg-case.jpg) repeat-y;
  background-size: 100vw;
}
.case .secIn{
  padding-top: 2rem;
}
.caseTtl{
  margin-bottom: 2.4rem;
  padding-top: 3.2rem;
  background: url(../img/caseTtl-icon.svg) center center no-repeat;
  background-size: 10rem;
  text-align: center;
  font-weight: 900;
  font-size: 3.2rem;
}
.caseTtl span.ttl{
  font-weight: 900;
  color: var(--main-color);
}
.caseTtl span.small{
  font-size: 2.4rem;
  font-weight: 900;
}

.case_subTtl{
  position: relative;
  margin-bottom: 6.4rem;
  padding: 1.2rem 2.4rem;
  color: var(--white-color);
  text-align: center;
  font-size: 2.4rem;
}
.case_subTtl::before{
  content: "";
  width: 3.2rem;
  height: 3.2rem;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  background-size: contain;
}
.case_subTtl::after{
  position: absolute;
  bottom: -2rem;
  left: 50%;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  content: "";
  clip-path: polygon(50% 100%, 0 0, 100% 0);
  width: 6.2rem;
  height: 2.8rem;
}
.case_subTtl.corporation_ttl{
  background: var(--green-color);
}
.case_subTtl.corporation_ttl:before{
  background: url(../img/corporation-icon.svg) no-repeat;
  background-size: contain;
  left: 1.7rem;
}
.case_subTtl.corporation_ttl::after{
  background: var(--green-color);
}


.case_subTtl.personal_ttl{
  background: var(--blue-color);
}
.case_subTtl.personal_ttl:before{
  background: url(../img/personal-icon.svg) no-repeat;
  background-size: contain;
  left: 2.4rem;
}
.case_subTtl.personal_ttl::after{
  background: var(--blue-color);
}

.case_list{
  width: min(100%,880px);
  margin: 0 auto 4rem;
  display: flex;
  flex-wrap: wrap;
  gap: 4.8rem 2.4rem;
}
.case_item{
  position: relative;
  background: var(--white-color);
  padding: 3.2rem 2rem 3.2rem;
  border-radius: 16px;
  border: 4px solid var(--green-color);
}
.case-tag{
  position: absolute;
  top: -4rem;
  left: 50%;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  width: 10rem;
}

.case_item .img{
  margin-bottom: 1.6rem;
}
.case_item .ttl{
  margin-bottom: 0.8rem;
  font-weight: 900;
  font-size: 2rem;
  color: var(--main-color);
}
.case_item .ttl span{
  font-size: 2.4rem;
  color: var(--red-color);
  font-weight: 900;
}
.case_txt{
  margin-top: -3rem;
  text-align: center;
  font-size: 1.2rem;
  color: var(--gray-color03);
}






@media screen and (min-width: 751px){
  .case .secIn{
    padding-top: 4rem;
  }
  .caseTtl{
    margin-bottom: 4rem;
    font-size: 4rem;
  }
  .caseTtl span.small{
    font-size: 3.2rem;
  }
  .case_subTtl.corporation_ttl:before{
    left: 34rem;
  }
  .case_subTtl.personal_ttl:before{
    left: 34rem;
  }
  .case_list {
    gap: 6.4rem 2.4rem;
}
  .case_item{
    width: calc((100% - 2.4rem) / 2);
    padding: 6.4rem 3.2rem 3.2rem;
  }
  .case-tag {
    top: -6rem;
    width: 13.3rem;
  }
  .case_item .ttl{
    margin-bottom: 1.6rem;
    font-size: 2.4rem;
  }
  .case_item .ttl span {
    font-size: 3.2rem;
  }
  .case_txt{
    line-height: 1.5;
    font-size: 1.6rem;
  }
}
















/*
サービスの流れ
--------------------------------------------------------*/
.step{
  background: var(--bg--blue-color);
}
.step .secIn{
  padding-top: 2rem;
}
.stepTtl {
  margin-bottom: 2.4rem;
  padding-top: 4.8rem;
  background: url(../img/stepTtl-icon.svg) center center no-repeat;
  background-size: 8.8rem;
}
.step_list{
  position: relative;
  width: min(100%,800px);
  margin: 0 auto;
  z-index: 10;
}
.step_list::after{
  position: absolute;
  content: "";
  width: 3px;
  height: 100%;
  margin: auto 0;
  background: var(--main-color);
  top: 0;
  left: 5.5rem;
  z-index: -1;
}
.step_item{
  display: flex;
  align-items: center;
  gap: 1.2rem;
  padding: 2rem;
  background: var(--white-color);
  border-radius: 16px;
  border: 3px solid var(--gray-color);
}
.step_item + .step_item{
  margin-top: 3.2rem;
}
.step_item .img{
  width: 6.4rem;
}
.step_item .step_txtarea{
  width: calc((100% - 7.5rem));
}

.step_txtarea .tag{
  position: relative;
  display: inline-block;
  margin-bottom: 1.2rem;
  padding: 0.4rem 2rem;
  border-radius: 20px;
  background: var(--white-color);
  border: 2px solid var(--blue-color);
  font-family: "Oswald", sans-serif;
  line-height: 1;
  font-weight: 700;
  color: var(--blue-color);
}
.step_txtarea .tag::before{
  content: "";
  position: absolute;
  bottom: -0.8rem;
  left: 2.4rem;
  width: 2rem;
  height: 1rem;
  background: url(../img/step-tag-arrow.svg) no-repeat;
  background-size: contain;
}
.step_item_ttl{
  margin-bottom: 0.8rem;
  font-size: 2rem;
  color: var(--main-color);
  font-weight: 700;
}
.step_item_txt{
  line-height: 1.5;
}

@media screen and (min-width: 751px){
  .stepTtl {
    margin-bottom: 3.2rem;
    background: url(../img/stepTtl-icon.svg) center center no-repeat;
    background-size: 12.8rem;
  }
  .step_list::after{
    left: 10.8rem;
  }
  .step_item{
    gap: 3.2rem;
    padding: 3.2rem 4rem;
  }
  .step_item .img {
    width: 13rem;
  }
  .step_item .step_txtarea{
    width: calc((100% - 16.2rem));
  }
  .step_item_ttl{
    font-size: 2.4rem;
  }
  .step_txtarea .tag{
    margin-bottom: 1.6rem;
  }
}


/*
よくある質問
--------------------------------------------------------*/
.faq .secIn{
  padding-top: 1rem;
}
.faqContents{
  width: min(100%,880px);
  margin: 0 auto;
}
.faqTtl span::before{
  position: absolute;
  left: -4.4rem;
  top: 50%;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  content: "";
  background: url(../img/faqTtl-icon.svg) no-repeat;
  background-size: contain;
  width: 4rem;
  height: 3.6rem;
}
.faqList + .faqList{
  margin-top: 1.6rem;
}

/* 質問 */
.faqList dt{
  position: relative;
  background: var(--blue-color);
  padding: 1.2rem 4rem;
  font-weight: 700;
  color: var(--white-color);
  border-radius: 8px;
  font-size: 1.8rem;
}

/* 回答 */
.faqList dd{
  position: relative;
  top: -0.6rem;
  background: var(--white-color);
  border: 3px solid var(--blue-color);
  padding: 1.2rem 1.2rem 1.2rem 4rem;
  border-radius: 0 0 8px 8px;
  font-weight: 500;
}

/* QA__アイコン */
.faqList dt::before,
.faqList dd::before{
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 48%;
  transform: translateY(-50%);
  width: 3.6rem;
  height: 3.6rem;
  border-radius: 50%;
  font-weight: 700;
  font-size: 2.4rem;
}
.faqList dt::before{
  content: "Q";
  color: var(--white-color);
  font-family: "Oswald", sans-serif;
  left: 0.6rem;
}
.faqList dd::before{
  content: "A";
  font-family: "Oswald", sans-serif;
  color: var(--orange-color);
  left: 0.4rem;
}

/*  アコーディオ開閉 */
.faqToggle {
  position: absolute;
  width: 3.6rem;
  height: 3.6rem;
  border-radius: 100%;
  top: 50%;
  transform: translateY(-50%);
  right: 0.6rem;
}
.faqToggle:before, 
.faqToggle:after {
  content: "";
  position: absolute;
  display: block;
  background: var(--white-color);
  width: 2rem;
  height: 3px;
  bottom: 44%;
  right: 0.8rem;
}
.faqToggle:before {
  transform: rotate(90deg);
  transition: transform 0.3s;
}
.faqToggle:after {
  transform: rotate(0deg);
}
.faqList dt.open .faqToggle:before {
  transform: rotate(180deg);
}


@media screen and (min-width: 751px){
  .faq .secIn {
    padding-top: 3.2rem;
  }
  .faqTtl span::before{
    width: 4.6rem;
    height: 4.6rem;
    left: -6.4rem;
  }
  .faqList + .faqList{
    margin-top: 2.4rem;
  }
  .faqList dt::before{
    left: 1.6rem;
  }
  .faqList dd::before{
    left: 1.4rem;
  }
  .faqList dt{
    padding-left: 5.2rem;
    font-size: 2.4rem;
  }
  .faqList dd{
    padding-left: 5rem;
  }
  .faqToggle {
    right: 1.6rem;
  }
}


/*
社長あいさつ
--------------------------------------------------------*/
.greeting{
  background: var(--bg--blue-color);
}
.greetingTtl{
  position: relative;
  padding-left: 5.4rem;
  margin-bottom: 2rem;
  font-size: 3.2rem;
}
.greetingTtl::before{
  position: absolute;
  left: -2.5rem;
  top: 7.5rem;
  display: block;
  content: "";
  width: 9.2rem;
  height: 9.6rem;
  background: url(../img/greeting-ttl-img.png) no-repeat;
  background-size: contain;
  z-index: 10;
}
.greetingTtl .hukidasi{
  position: relative;
  display: inline-block;
  margin-bottom: 1rem;
  padding: 0.6rem 2.4rem;
  text-align: left;
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--white-color);
  background: var(--main-color);
  border-radius: 60px;
}
.greetingTtl .hukidasi::before{
  content: "";
  position: absolute;
  width: 2.3rem;
  height: 1.15rem;
  background: url(../img/greeting-hukidasi.svg) no-repeat;
  background-size: contain;
  bottom: -1rem;
  left: 2rem;
}
.greetingTtl .ttl{
  display: block;
  padding-left: 2.4rem;
  text-align: left;
  font-weight: 900;
  color: var(--main-color);
  font-size: 2.8rem;
}
.greeting_contetnts{
  position: relative;
  width: min(100%, 880px);
  margin: 0 auto;
  background: var(--white-color);
  padding: 4rem 2rem;
  border-radius: 16px;
  border: 4px solid var(--main-color);
}
.greeting_contetnts span{
  position: absolute;
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--main-color);
}
.greeting_contetnts span:nth-child(1){
  top: 1.6rem;
  left: 1.6rem;
}
.greeting_contetnts span:nth-child(2){
  top: 1.6rem;
  right: 1.6rem;
}
.greeting_contetnts span:nth-child(3){
  bottom: 1.6rem;
  right: 1.6rem;
}
.greeting_contetnts span:nth-child(4){
  bottom: 1.6rem;
  left: 1.6rem;
}
.greeting_subTtl{
  display: inline;
  color: var(--main-color);
  font-size: 2.3rem;
  background: linear-gradient(transparent 70%, #ff6 70%);
}

.greeting_txt{
  margin-top: 1.2rem;
  line-height: 1.5;
}
.greeting_contetnts .img{
  position: absolute;
  width: 16.6rem;
  right: -2rem;
  top: 30.2rem;
}


@media screen and (min-width: 751px){
  .greetingTtl{
    padding-left: 33rem;
    margin-bottom: 2.5rem;
    font-size: 4rem;
  }
  .greetingTtl .ttl{
    font-size: 4rem;
  }
  .greetingTtl::before {
    left: 10rem;
    top: -1rem;
    width: 38.2rem;
    height: 23.8rem;
  }
  .greetingTtl .hukidasi{
    margin-bottom: 1.6rem;
    font-size: 2.4rem;
  }
  

  .greeting_contetnts{
    padding: 6.4rem;
  }
  .greeting_contetnts .textarea{
    width: 76%;
  }
  .greeting_subTtl{
    font-size: 3.2rem;
  }
  .greeting_contetnts .img {
    width: 24.6rem;
    top: 50%;
    right: -1rem;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
  }
  .greeting_txt{
    margin-top: 2.4rem;
  }
}




/*
お問い合わせフォーム
--------------------------------------------------------*/
.form{
  background: var(--blue-color);
}
.form .secIn{
  padding-top: 10.4rem;
}
.form .formTtl{
  margin-bottom: 2rem;
  text-align: center;
  font-size: 3.2rem;
  color: var(--white-color);
}
.form_img{
  position: absolute;
  width: 9.6rem;
  top: 1rem;
  left: 50%;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
}

@media screen and (min-width: 751px){
  .form .secIn{
    padding-top: 6.4rem;
  }
  .form .formTtl{
    margin-bottom: 4rem;
    font-size: 4rem;
  }
  .form_img {
    width: 12.6rem;
    top: 3rem;
    left: 26rem;
  }
}



/*
会社概要
--------------------------------------------------------*/
.companyTtl{
  margin-bottom: 1.6rem;
  text-align: center;
  font-size: 3.2rem;
  color: var(--main-color);
}
.company_contents{
  width: min(100%,800px);
  margin: 0 auto;
}
.company .list{
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 4rem;
}
.company .item{
  width: calc((100% - 1rem) / 2);
}
.company_table{
  width: 100%;
}
.company_table tr{
  border-bottom: 1px solid var(--gray-color02);
}
.company_table th,
.company_table td{
  padding: 1.2rem; 
}
.company_table th{
  width: 30%;
  vertical-align: middle;
  text-align: left;
  color: var(--main-color);
  font-weight: 700;
}
.company_table td{
  width: 70%;
}

@media screen and (min-width: 751px) {
  .companyTtl{
    margin-bottom: 4rem;
    font-size: 4rem;
  }
  .company_table th,
  .company_table td{
    display: table-cell;
    padding: 1.2rem; 
  }
  .company_table th{
    text-align: center;
  }

}