@charset "utf-8";
@import url("faq.css");

.functions{
   max-width: 1100px;
   line-height: 1.8;
}
.func-sec{
   padding-bottom: 7rem;
}
.func-sec table{
   min-width: 700px;
}
.func-sec:last-child{
   padding-bottom: 0;
}
.func-about .post-theme td span{
   font-size: 1.2rem;
    display: block;
    line-height: 1.5;
}
@media screen and (max-width: 767px) {
   .functions{
      padding: 20px 20px;
   }
   .func-sec{
      padding-bottom: 5rem;
   }
   .func-sec .btn{
      width: 100%;
   }
   .func-sec:has(br) {
      margin: 0;
   }
}
/* 見出し
-------------------------------------*/
.func-head{
   margin-bottom: 4rem;
}
.func-head h2{
   text-align: center;
   font-size: 2em;
   line-height: 1.6;
   font-weight: 700;
   color: var(--color-blue);
}
.func-head p{
   text-align: center;
   font-size: 1.8rem;
   line-height: 1.8;
   font-weight: 400;
   margin-top: 4rem;
}

.func-subtitle2{
   font-size: 1.15em;
   color: var(--color-blue);
   margin: 1.8em 0 .8em;
}
h3+.func-subtitle2{
   margin-top: 0;
}
@media screen and (max-width: 767px) {
   .func-head{
      margin-bottom: 3rem;
   }
   .func-head h2{
      font-size: 1.5em;
   }
   .func-head p{
      font-size: 1.4rem;
   }
}

/* アンカーリンク
-------------------------------------*/
.func-anker__list{
   display: flex;
   flex-wrap: wrap;
   margin: 0 0 30px;
   padding: 20px 30px;
   background: #E9EEF4;
}
.func-anker__list li{
   list-style: none;
   font-weight: 500;
   width: 23.5%;
   margin: 6px 0;
   margin-right: 2%;
}
@media screen and (min-width: 768px) {
   .func-anker__list li:nth-child(4n){
      margin-right: 0;
   }
}
.func-anker__list li a{
   position: relative;
   display: block;
   color: var(--color-base);
   text-decoration: none;
   padding: 15px 10px 15px 35px;
   background: #fff;
   box-shadow: 0px 7px 16px 3px rgb(var(--color-blue-rgb), 0.15);
}
.func-anker__list li a::before {
   position: absolute;
   top: 50%;
   left: 12px;
   translate: 0 -50%;
   content: "";
   width: 0;
   height: 0;
   border-style: solid;
   border-right: 7px solid transparent;
   border-left: 7px solid transparent;
   border-top: 11px solid var(--color-blue);
   border-bottom: 0;
}
@media screen and (max-width: 767px) {
   .func-anker__list{
      padding: 20px;
   }
   .func-anker__list li{
      width: 100%;
      margin: 5px 0;
   }
   .func-anker__list li a{
      padding: 12px 10px 12px 30px;
      box-shadow: 0px 4px 8px 3px rgb(var(--color-blue-rgb), 0.15);
   }
   .func-anker__list li a::before{
      border-right-width: 5px;
      border-left-width: 5px;
      border-top-width: 8px;
   }
}

/* メリット
-------------------------------------*/
.merit__list{
   list-style: none!important;
   counter-reset: number 0;
   margin: 0!important;
   padding: 0!important;
}
.merit__list li{
   margin: 1.3em 0!important;
   counter-increment: title;
}
.merit__list li::before{
   display: none!important;
}
.merit__list li .merit__tit{
   display: flex;
   align-items: center;
   font-size: 1.2em;
   color: var(--color-blue);
   font-weight: 500;
}
.merit__list li .merit__tit::before {
   content: counter(title);
   width: 5rem;
   height: 5rem;
   margin-right: 1.2rem;
   display: flex;
   justify-content: center;
   align-items: center;
   color: var(--color-blue);
   background: var(--color-lightblue);
}
.merit__tit span{
   flex: 1;
   display: inline-block;
}
.merit__conts{
   padding-left: 6.2rem;
}
@media screen and (max-width: 767px) {
   .merit__list li{
      padding-bottom: 1.3em!important;
      border-bottom: 1px solid #eee;
   }
   .merit__tit{
      font-size: 1.05em;
      margin-bottom: .5em;
   }
   .merit__tit::before {
      width: 4.2rem;
      height: 4.2rem;
   }
   .merit__conts{
      font-size: .9em;
      line-height: 1.5;
      padding-left: 5.5rem;
   }
   .merit__tit span{
      line-height: 1.4;
   }
}

/* 料金（表）
-------------------------------------*/
.func-price table th{
   font-weight: 500;
}
.func-price table th,
.func-price table td{
   line-height: 1.4;
   font-size: .9em;
   padding: .5em .8em;
}
.func-price .icon-mg0{
   margin: 0 auto .2em;
}

/* 事例
-------------------------------------*/
@media print, screen and (min-width: 768px) {
   .case-study {
     width: 31.5% !important;
   }
}
@media screen and (max-width: 767px) {
   .functions{
      overflow: hidden;
   }
   .swiper-pagination {
      bottom: -20px;
   }
}


/* func-conts カラム
-------------------------------------*/
.column-2{
   display: flex;
   flex-wrap: wrap;
   list-style: none;
   margin: 0;
   padding: 0;
}
.flex-space-between{
   justify-content: space-between;
}
.col-2-pc{
   width: 50%;
   padding: .5em 1em .5em;
}
@media screen and (max-width: 767px) {
   .column-2{
      flex-flow: column;
      flex-wrap: wrap;
   }
   .col-1-sp{
      width: 100%;
   }
}

.column-3{
   display: flex;
   flex-wrap: wrap;
   list-style: none;
   margin: 0;
   padding: 0;
}
.column-3__box{
   width: 32%;
}
@media screen and (min-width: 768px) {
   .column-3__box:nth-child(3n-1){
      margin-right: 2%;
      margin-left: 2%;
   }
}
@media screen and (max-width: 767px) {
   .column-3{
      flex-flow: column;
   }
   .column-3__box{
      width: 100%;
   }
}

@media print, screen and (min-width: 768px){
   .swiper-pagination{
      display: none;
   }
}

/* ギャラリー
-------------------------------------*/
.post-theme .wp-caption-text{
   color: var(--color-base);
   font-size: 1em;
}
@media print, screen and (min-width: 768px){
   .post-theme .gallery-columns-2 .gallery-item {
       width: 47% !important;
   }
   .post-theme .wp-caption-text{
      margin-top: .4em;
   }
}
/* 動画
-------------------------------------*/
@media print, screen and (min-width: 768px){
   .post-theme .embed-responsive {
      width: 70%;
      aspect-ratio: 16 / 9;
      margin: auto;
   }
   .post-theme .embed-responsive iframe {
      width: 100%;
      height: 100%;
   }
}