@charset "UTF-8";

:root {
  --color-white: #FFFFFF;
  --color-black: #3E3A39;
  --color-1a1a1a: #1a1a1a;
  --color-666666: #666666;
  --color-8a8a8a: #8a8a8a;
  --color-cdcdcd: #cdcdcd;
  --color-ebebeb: #ebebeb;
  --color-e1e1e2: #e1e1e2;
  --color-f3f3f3: #f3f3f3;
  --color-ececec: #ececec;
  --color-2b4cdb: #2b4cdb;
  --color-00B9EF: #00B9EF;
  --color-15a8d5: #15a8d5;
  --color-00AB5A: #00AB5A;
  --color-00AB5A-5: rgba(0, 173, 92, 0.5);
  --color-007320: #007320;
  --color-FDD000: #FDD000;
  --color-E8380D: #E8380D;
  --color-b89023: #b89023;
  --color-6b82e6: #6b82e6;
  --color-DDF3FA: #DDF3FA;
  --color-EAEDFB: #EAEDFB;
  --font10: 0.625rem;
  --font12: 0.75rem;
  --font13: 0.8125rem;
  --font14: 0.875rem;
  --font15: 0.9375rem;
  --font16: 1rem;
  --font17: 1.0625rem;
  --font18: 1.125rem;
  --font20: 1.25rem;
  --font21: 1.3125rem;
  --font24: 1.5rem;
  --font26: 1.625rem;
  --font28: 1.75rem;
  --font30: 1.875rem;
  --font32: 2rem;
  --font35: 2.1875rem;
  --font38: 2.1875rem;
  --font40: 2.5rem;
  --font43: 2.6875rem;
  --font45: 2.8125rem;
  --font50: 50px;
  --font70: 70px;
  --font80: 80px;
  --font90: 90px;

  --font-weight-bold: 700;
  --font-weight-normal: normal;
  --shape-triangle-top: polygon(50% 0, 100% 100%, 0 100%);
  --shape-triangle-bottom: polygon(0 0, 100% 0, 50% 100%);
  --shape-triangle-right: polygon(0 0, 100% 50%, 0 100%);
  --shadow: 0 0.3rem 2.5rem -2rem rgba(85, 96, 96, 0.3), 0 0.3rem 0.5rem rgba(84, 96, 96, 0.376);
  --shadow2: 0 0.2rem 2rem -1rem rgba(85, 96, 96, 0.4), 0 0.2rem 0.3rem rgba(84, 96, 96, 0.4);
  --number-width: clamp(136px, 33.8vw, 180px);
  --stretch: stretch;
  --header-h: clamp(65px, 11vw, 110px);
}
article.post, article.page, .post-cta .cta-post-title{
  border: none;
}
.one-column #content .wrap{
  width: min(100% - 6vw, 1150px);
  margin-inline: auto;
}
.single #content{
  padding-bottom: 0;
}
.post-header{
  padding-inline: 0;
}
.post-title{
  font-size: clamp(var(--font20), calc((0.0625rem * 20) + ((1vw - 3.8px) * (8 / 8.2))), var(--font28));
  margin-bottom: 1em;
}
.user-name{
  font-weight: var(--font-weight-bold);
  margin-bottom: 0.3em;
}
.post-content{
  overflow: visible;
  max-width: 800px;
  padding-inline: 0;
  margin-inline: auto;
  h2{
    border-bottom: 2px solid;
    margin-block: 4em 1em;
  }
  p{
    line-height: 1.8;
    letter-spacing: 0.02em;
  }
  h3{
    padding-left: 0;
    border: 0;
    margin-block: 3em 1em;
  }
  span{
    display: inline;
  }
  dfn {
    font-style: normal;
  }
  a:not(.wp-block-button__link){
    text-decoration: underline;
    &:hover{
      text-decoration: none;
    }
  }
}
/*-- パンくずリスト --*/
.breadcrumb li{
  color: #8a8a8a;
}
/*メッセージ*/
.single-message{
  .post-category a{
    color: var(--color-E8380D);
  }
  .post-content{
    a:where(:not(.wp-block-button__link)){
      color: var(--color-E8380D);
      &:hover{
        color: var(--color-black);
      }
    }
    h3:where(:not(.profile__name)){
      color: #cb4624;
    }
  }
  .nav-icon{
    border-top: 3px solid var(--color-E8380D);
    border-left: 3px solid var(--color-E8380D);
  }
}
.single-case-study{ /*導入事例*/
  .post-category a{
    color: var(--color-15a8d5);
  }
  .post-content{
    a:where(:not(.wp-block-button__link)){
      color: var(--color-15a8d5);
      &:hover{
        color: var(--color-black);
      }
    }
    h3{
      color: #62b1c8;
    }
  }
  dfn{
    color: var(--color-15a8d5);
  }
  .nav-icon{
    border-top: 3px solid var(--color-15a8d5);
    border-left: 3px solid var(--color-15a8d5);
  }
  :where(.GFcomment, .gf-comment)::before{
    background: var(--color-15a8d5);
  }
}
.single-post{ /*その他*/
  .post-category a{
    color: var(--color-00AB5A);
  }
  .post-content{
    a:where(:not(.wp-block-button__link)){
      color: var(--color-00AB5A);
      &:hover{
        color: var(--color-black);
      }
    }
    h3, .blue{
      color: #58bf8f;
    }
  }
  dfn{
    color: var(--color-00AB5A);
  }
  .nav-icon{
    border-top: 3px solid var(--color-00AB5A);
    border-left: 3px solid var(--color-00AB5A);
  }
  :where(.GFcomment, .gf-comment)::before{
    background: var(--color-00AB5A);
  }
}
.wp-block-button__link{
  &:hover{
    background: var(--color-666666);
  }
}
.line {
    background: linear-gradient(transparent 50%, rgba(255, 252, 107, 0.8) 50%);
}
/*日時*/
.ymd {
    color: var(--color-8a8a8a);
    font-size: var(--font14);
    margin-bottom: 1em;
}
/*タブ*/
.post-element{
  display: flex;
  flex-wrap: wrap;
  gap: 0.5em 1em;
  margin-bottom: 2em;
  a{
    position: relative;
    display: block;
    text-decoration: underline;
    font-size: var(--font16);
    &::before{
      content: "#";
    }
    &:hover{
      text-decoration: none;
    }
  }
}
.post-category{
  display: flex;
  gap: 0.5em 1em;
}
/*アイキャッチ*/
.post-thumbnail {
  width: 100%;
  float: none;
  margin-left: 0;
}
.post-thumbnail img {
  width: 100%;
}
/*画像*/
figure{
  margin-bottom: 2rem;
}
/*前後記事ナビゲーション*/
.post-navigation{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  border: 1px solid var(--color-666666);
  margin-top: clamp(50px, 10vw / 1.2, 100px);
  a{
    display: grid;
    align-items: center;
    gap: 0.5em;
    font-size: clamp(var(--font12), calc((0.0625rem * 12) + ((1vw - 3.8px) * (4 / 8.2))), var(--font16));
    padding-block: 2em;
    padding-inline: clamp(0.8em, 4vw / 1.2, 2.5em);
    &:hover{
      background: var(--color-ececec);
      .nav-icon__prev{
        transform: translateX(-0.5em) rotate(-45deg);
      }
      .nav-icon__next{
        transform: translateX(0.5em) rotate(135deg);
      }
    }
  }
}
.nav-previous{
  grid-template-columns: 1em 1fr;
  border-right: 1px solid var(--color-666666);
}
.nav-next{
  grid-template-columns: 1fr 1em;
}
.nav-icon{
  aspect-ratio: 1;
  transition: 0.3s;
}
.nav-icon__prev{
  transform: rotate(-45deg);
}
.nav-icon__next{
  transform: rotate(135deg);
}
/* CTA */
.post-cta{
  text-align: center;
  .cta-post-title{
    font-size: clamp(var(--font24), calc((0.0625rem * 24) + ((1vw - 3.8px) * (8 / 8.2))), var(--font32));
    padding-block:clamp(60px, 10vw, 100px) 0.4em;
    margin: 0;
  }
  .mail{
    position: relative;
    border: 3px solid;
    font-weight: var(--font-weight-bold);
    padding-block: 0.8em;
    padding-inline: 2.5em;
    margin-bottom: 3em;
    &::after{
      content: '';
      position: absolute;
      top: 50%;
      left: 0.6em;
      transform: translateY(-50%);
      width: 1.3em;
      aspect-ratio: 1;
      mask: url("http://localhost:8888/assets/images/common/icon_mail_b.svg") no-repeat center / contain;
      -webkit-mask: url("http://localhost:8888/assets/images/common/icon_mail_b.svg") no-repeat center / contain;
      background-color: var(--color-black);
    }
  }
}

/*導入事例
------------------------------*/
.article-logo{
  img{
    height: clamp(60px, 12vw / 1.2, 120px);
    object-fit: contain;
    margin-bottom: clamp(10px, 2vw / 1.2, 20px);
  }
}
/*導入前後*/
.before-after{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(clamp(340px, 50vw / 1.2, 500px), 1fr));
  gap: clamp(15px, 5vw / 1.2, 50px);
  margin-bottom: clamp(25px, 5vw / 1.2, 50px);
  padding-top: clamp(25px, 5vw / 1.2, 50px);
  padding-inline: clamp(20px, 4vw, 40px);
  h2{
    text-align: center;
    color: var(--color-white);
    font-size: clamp(var(--font18), calc((0.0625rem * 18) + ((1vw - 3.8px) * (6 / 8.2))), var(--font24));
    font-weight: var(--font-weight-bold);
    padding-block: 0.3em;
    margin-bottom: 1em;
  }
  ul{
    display: grid;
    justify-content: center;
    list-style: disc;
    padding-inline: 1em 0.8em;
    margin-left: 1em;
    margin-bottom: 1em;
  }
  li{
    margin-bottom: 0.5em;
  }
}
.tasks-before{
  border-bottom: 5px solid var(--color-black);
  h2{
    background: var(--color-black);
  }
}
.tasks-after{
  border-bottom: 5px solid var(--color-15a8d5);
  h2{
    background: var(--color-15a8d5);
  }
  li{
    color: var(--color-15a8d5);
  }
}
/*施設プロフィール*/
.user-profile{
  display: grid;
  grid-template-columns: clamp(65px, 14vw, 140px) 1fr 45%;
  gap: clamp(10px, 4.5vw, 45px);
  border-top: 1px solid;
  border-bottom: 1px solid;
  padding-inline: min(5vw , 50px);
  padding-block: 2rem;
  p, a{
    font-size: clamp(var(--font14), calc((0.0625rem * 20) + ((1vw - 3.8px) * (2 / 8.2))), var(--font16));
    margin-bottom: 0.5em;
  }
}
.user-text{
  grid-column: 2 / 3;
  h2{
    font-size: clamp(var(--font20), calc((0.0625rem * 20) + ((1vw - 3.8px) * (4 / 8.2))), var(--font24));
    font-weight: var(--font-weight-bold);
    margin-bottom: 0.5em;
  }
  a{
    border: 2px solid var(--color-black);
    border-radius: 2.2em;
    padding: 0.5em 2.5em 0.4em 0.8em;
    &::after{
      right: 1.3em;
      transition: 0.3s;
    }
    &:hover{
      &::after{
        right: 0.5em;
      }
    }
  }
}
.user-features{
  grid-column: 3 / 4;
}
.user_url{
  background: var(--color-black);
  color: var(--color-white);
}
/*関連システム*/
.products-section{
  padding-top: 3rem;
  padding-inline: 4vw;
  h2{
    text-align: center;
    font-size: clamp(var(--font20), calc((0.0625rem * 20) + ((1vw - 3.8px) * (4 / 8.2))), var(--font24));
    font-weight: var(--font-weight-bold);
    margin-bottom: 1.5em;
  }
}
.products-section__list{
  width: min(100%, 800px);
  margin-inline: auto;
}
.product-info{
  display: grid;
  align-items: center;
  grid-template-columns: 55% 40%;
  gap: 1rem 5%;
  border-bottom: 1px solid var(--color-f3f3f3);
  line-height: 1.4;
  padding-block: 1em;
  h3{
    font-weight: var(--font-weight-bold);
    margin-bottom: 0.5em;
  }
  p{
    font-size: var(--font16);
  }
  a{
    display: grid;
    place-content: center;
    width: 100%;
    background: var(--color-black);
    border: 1px solid var(--color-black);
    border-radius: 0.2em;
    color: var(--color-white);
    font-size: var(--font14);
    padding-right: 1.5em;
    padding-block: 0.6em;
    &:hover{
      background: var(--color-f3f3f3);
      color: var(--color-black);
    }
  }
}
/*kyuu関連システム*/
dl.productBLOG{
  div{
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0 1rem;
    border-bottom: 1px solid var(--color-ececec);
    margin-bottom: 1em;
  }
  dt{
    width: 100%;
  }
  dd{
    padding: 0;
    border: 0;
    &.txt{
      width: calc(100% - 10em);
    }
    &.more{
      width: 9em;
      a{
        background: var(--color-15a8d5);
        border-radius: 2em;
        text-decoration: none;
        color: var(--color-white);
        font-weight: var(--font-weight-bold);
        padding: 0.3em 0.8em;
      }
    }
  }
}
@media (max-width: 900px) {
  /*施設プロフィール*/
  .user-profile{
    grid-template-columns: clamp(65px, 15vw, 150px) 1fr;
  }
  .user-features{
    grid-column: span 2;
  }
}
@media (max-width: 750px){
  /*関連システム*/
  .product-info{
    grid-template-columns: 1fr;
  }
  /*kyuu関連システム*/
  dl.productBLOG{
    dd.txt{
      width: 100%;
    }
  }
}

/*メッセージ
------------------------------*/
/*プロフィール*/
.profile{
  --profile-figure-w: clamp(100px, 22vw / 0.8, 200px);
  --profile-figure-gap: clamp(20px, 5vw / 0.8, 50px);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem var(--profile-figure-gap);
  width: 100vw;
  background: var(--color-ececec);
  padding-block: clamp(15px, 3vw / 0.8, 30px);
  margin-inline: calc(50% - 50vw);
  margin-bottom: clamp(25px, 7vw / 0.8, 70px);
  figure{
    width: var(--profile-figure-w);
    margin: 0;
  }
  >div{
    width: min(100vw - 6vw - var(--profile-figure-gap) - var(--profile-figure-w), 800px - var(--profile-figure-gap) - var(--profile-figure-w));
  }
  img{
    align-self: 1;
    object-fit: cover;
    border-radius: 50%;
  }
  h2:is(.profile__title, .profileTtl){
    border-bottom: none;
    font-size: clamp(var(--font16), calc((0.0625rem * 16) + ((1vw - 3.8px) * (4 / 4.2))), var(--font20));
    padding: 0;
    margin-bottom: 0.5em;
  }
  h3, h2 + .profileName{
    font-size: clamp(var(--font15), calc((0.0625rem * 15) + ((1vw - 3.8px) * (3 / 4.2))), var(--font18));
    font-weight: var(--font-weight-normal);
    margin-block: 0 1em;
  }
  p{
    line-height: 1.4;
    font-size: clamp(var(--font14), calc((0.0625rem * 14) + ((1vw - 3.8px) * (2 / 4.2))), var(--font16));
    margin: 0;
  }
}
@media (max-width: 500px){
  /*プロフィール*/
  .profile{
    flex-direction: column;
    >div{
      width: calc(100vw - 8vw);
    }
  }
}
/*GFコメント
------------------------------*/
.GFcomment, .gf-comment{
  --comment-p-block: clamp(15px, 4vw / 0.8, 40px);
  position: relative;
  width: min(100vw - 6vw, 800px);
  border-top: 1px dotted;
  border-bottom: 1px dotted;
  font-weight: var(--font-weight-bold);
  padding-block: var(--comment-p-block);
  padding-inline: 2em 1em;
  margin-inline: auto;
  &::before{
    content: '';
    position: absolute;
    top: calc(var(--comment-p-block) + 0.6em);
    left: 0.5em;
    width: 1em;
    height: 0.6em;
  }
}
.GFcomment, .gf-comment p{
  line-height: 1.8;
}