@charset "UTF-8";

/* Box sizing rules */

*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Remove default margin */

body,
h1,
h2,
h3,
h4,
p,
figure,
blockquote,
dl,
dd {
  margin: 0;
}

/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */

ul,
ol {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Set core root defaults */

html:focus-within {
  scroll-behavior: smooth;
}

/* Set core body defaults */

body {
  min-height: 100vh;
  text-rendering: optimizeSpeed;
  line-height: 1.5;
}

/* A elements that don't have a class get default styles */

a:not([class]) {
  -webkit-text-decoration-skip: ink;
          text-decoration-skip-ink: auto;
}

/* Make images easier to work with */

img,
picture {
  max-width: 100%;
}

/* Inherit fonts for inputs and buttons */

input,
button,
textarea,
select {
  font: inherit;
}

button{
  background: none;
  border: none;
  padding: 0;
  outline: none;
}

button:focus{
    outline: none;
  }

button:disabled{
    opacity:1;
  }

button:disabled:hover{
      opacity:1;
    }

:root {
  --text-color:#000000;
  --blue_01:#004499;
  --shadow_01:0 4px 10px rgba(53,120,201,.2);
}

/* ==========================================================================
  アニメーション
========================================================================== */

/* ==========================================================================
  ボタンアニメーション
========================================================================== */

.btnAnime{
  transition: all .2s linear;
}

@media (hover:hover) {
    .btnAnime:hover{
      opacity: 1;
      background-color: #1B6BD0;
      box-shadow: 0 3px 10px rgba(53,120,201,.5);
    }
  }

/* ==========================================================================
  SPメニュー開閉アニメーション
========================================================================== */

@keyframes menuIn {
  0%{
    display: block;
    opacity: 0;
  }
  100%{
    opacity: 1;
  }
}

@keyframes menuOut {
  0%{
    opacity: 1;
  }
  99%{
    opacity: 0;
  }
  100%{
    display: none;
    opacity: 0;
  }
}

/* ==========================================================================
   テキスト設定
========================================================================== */

.textL{
  font-size: 2rem;
  line-height: 2;
}

.textM{
  font-size: 1.6rem;
  line-height: 2;
}

@media (max-width: 767px) {

.textM{
    font-size: 1.4rem;
    line-height: 1.75
}
  }

.textS{
  font-size: 1.4rem;
  line-height: 1.75;
}

.lineM{
  font-size: 3.2rem;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: .08em;
}

@media (max-width: 767px) {

.lineM{
    font-size: 2.8rem
}
  }

.lineS{
  font-size: 2.8rem;
  font-weight: 700;
  letter-spacing: .08em;
  line-height: 1.5;
}

@media (max-width: 767px) {

.lineS{
    font-size: 2.4rem
}
  }

.lineL{
  font-size: 4rem;
  font-weight: 700;
  letter-spacing: .08em;
  line-height: 1.5;
}

@media (max-width: 767px) {

.lineL{
    font-size: 3.2rem;
    line-height: 1.3
}
  }

.btn{
  max-width: 447px;
  height: 83px;
  background: #004499;
  background: var(--blue_01);
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 2rem;
  font-weight: 700;
  margin-inline: auto;
  box-shadow: 0 4px 10px rgba(53,120,201,.2);
  box-shadow: var(--shadow_01);
}

@media (max-width: 767px) {
  .btn{
    max-width: none;
    height: calc(calc(83/375) * 100vw);
  }
}

/* ==========================================================================
   pageHeader
========================================================================== */

.pageHeader .pageTitle{
    font-size: 3.2rem;
    line-height: 1.5;
    letter-spacing: .08em;
    font-weight: 700;
    text-align: center;
  }

.pageHeader .pageTitle::before{
      content: attr(data-en);
      display: block;
      width: -moz-fit-content;
      width: fit-content;
      color: #004499;
      color: var(--blue_01);
      font-weight: 700;
      font-size: 2rem;
      line-height: 1.9;
      padding: 0 8px;
      border-bottom: 2px solid #004499;
      border-bottom: 2px solid var(--blue_01);
      margin:0 auto 8px;
    }

@media (max-width: 767px) {
      .pageHeader .pageTitle::before{
        padding: 0 calc(calc(4.5/375) * 100vw);
        border-bottom: calc(calc(2/375) * 100vw) solid #004499;
        border-bottom: calc(calc(2/375) * 100vw) solid var(--blue_01);
        margin: 0 auto calc(calc(8/375) * 100vw);
      }
}

/* ==========================================================================
   よくある質問
========================================================================== */

.faqBox{
  background: #fff;
  transition: background-color .2s ease-out;
}

.faqBox >header{
    display: flex;
    padding: 8px 107px 8px 40px;
    gap: 16px;
    border-bottom: 1px solid #C2D3EE;
    position: relative;
    cursor: pointer;
  }

.faqBox >header::before{
      content: 'Q.';
      font-family: "Inter", sans-serif;
      font-optical-sizing: auto;
      font-size: 3.2rem;
      line-height: 1.75;
      letter-spacing: .08em;
      font-weight: 700;
      flex-shrink: 0;
      color: #237CEB;
    }

.faqBox >header::after{
      content: '';
      width: 2px;
      height: 24px;
      background: #004499;
      background: var(--blue_01);
      flex-shrink: 0;
      position: absolute;
      top: 50%;
      translate: 0 -50%;
      right: 51px;
      transition: rotate .2s linear;
    }

.faqBox >header h2{
      font-size: 1.6rem;
      font-weight: 700;
      line-height: 2;
      margin-top: .8em;
    }

.faqBox >header h2::after{
        content: '';
        width: 24px;
        height: 2px;
        background: #004499;
        background: var(--blue_01);
        flex-shrink: 0;
        position: absolute;
        top: 50%;
        translate: 0 -50%;
        right: 40px;
      }

.faqBox .open::after{
      rotate: -90deg;
    }

.faqBox .hideBox{
    margin-top: 8px;
    display: none;
  }

.faqBox .aBox{
    display: flex;
    padding: 8px 107px 24px 40px;
    gap: 16px;
  }

.faqBox .aBox::before{
      content: 'A.';
      font-family: "Inter", sans-serif;
      font-optical-sizing: auto;
      font-size: 3.2rem;
      line-height: 1.75;
      letter-spacing: .08em;
      font-weight: 700;
      flex-shrink: 0;
      color: #004499;
      color: var(--blue_01);
    }

.faqBox .aBox p{
      margin-top: .8em;
      font-size: 1.6rem;
      line-height: 1.75;
    }

.faqBox .aBox a{
      text-decoration: underline;
      color: #004499;
      color: var(--blue_01);
    }

@media (hover:hover){
  .faqBox:has(header:hover){
    background: #F1F6FE;
  }
}

.faqBox + .faqBox{
  margin-top: 16px;
}

@media (max-width: 767px) {
    .faqBox >header{
      display: flex;
      padding: calc(calc(16/375) * 100vw) calc(calc(59/375) * 100vw) calc(calc(16/375) * 100vw) calc(calc(16/375) * 100vw);
      gap: calc(calc(8/375) * 100vw);
      border-bottom: calc(calc(1/375) * 100vw) solid #C2D3EE;
    }
      .faqBox >header::before{
        font-size: 2.8rem;
      }
      .faqBox >header::after{
        width: calc(calc(2/375) * 100vw);
        height: calc(calc(16/375) * 100vw);
        right: calc(calc(19/375) * 100vw);
      }
      .faqBox >header h2{
        margin-top: .7em;
        font-size: 1.6rem;
      }
        .faqBox >header h2::after{
          width: calc(calc(16/375) * 100vw);
          height: calc(calc(2/375) * 100vw);
          right: calc(calc(12/375) * 100vw);
        }
    .faqBox .hideBox{
      margin-top: 0;
    }
    .faqBox .aBox{
      padding: calc(calc(16/375) * 100vw);
      gap: calc(calc(8/375) * 100vw);
    }
      .faqBox .aBox::before{
        font-size: 2.8rem;
      }
      .faqBox .aBox p{
        margin-top: .8em;
        font-size: 1.6rem;
        line-height: 1.75;
      }
  .faqBox + .faqBox{
    margin-top: calc(calc(8/375) * 100vw);
  }
}

/* ==========================================================================
   共通設定
========================================================================== */

html {
	-ms-text-size-adjust: 100%;
	-webkit-text-size-adjust: 100%;
	font-size: 62.5%;
	overflow-y:scroll;
}

body {
	font-family: 'Noto Sans','Noto Sans JP','Noto Sans CJK JP','Hiragino Kaku Gothic ProN','ヒラギノ角ゴ ProN W3','游ゴシック','游ゴシック体', 'YuGothic M', YuGothic,'メイリオ',Meiryo,sans-serif;
	font-feature-settings : 'pkna';
	color:#000000;
	color:var(--text-color);
	text-align: justify;
	width:100%;
  min-width: 1080px;
	font-size: 1.6rem;
	line-height: 1.5;
	overflow: hidden;
}

img{
	vertical-align:bottom;
	max-width: 100%;
	height: auto;
  backface-visibility: hidden;
}

a{
	color:#000000;
	color:var(--text-color);
	text-decoration: none;
  display: inline-block;
}

a:hover{
  opacity: .8;
}

.spShow{
	display: none;
}

.pcShow{
	display: inline-block;
}

button{
  background: none;
  border: none;
  padding: 0;
  outline: none;
  color: #000000;
  color: var(--text-color);
}

button:focus{
    outline: none;
  }

button:disabled{
    opacity:1;
    color: #000000;
    color: var(--text-color);
  }

/* ==========================================================================
   レイアウト
========================================================================== */

.container{
	display: grid;
	min-height: 100vh;
	grid-template-columns: 100%;
  grid-template-rows: 131px 1fr auto;
}

.header{
	grid-column: 1;
  grid-row: 1;
  position: relative;
  z-index: 2;
}

.pageContainer{
	grid-column: 1;
  grid-row: 2;
  position: relative;
  z-index: 1;
}

.footer{
	grid-column: 1;
  grid-row: 3;
  z-index: 2;
}

/* ==========================================================================
   header
========================================================================== */

.header{
  position: fixed;
  z-index: 900;
  width: 100%;
  min-width: 1080px;
  height: 131px;
  background: #fff;
  box-shadow: 0 4px 10px rgba(53,120,201,.2);
  box-shadow: var(--shadow_01);
}

.header .headerTop{
    height: 60px;
    padding: 0 40px;
    display: flex;
    align-items: center;
    border-bottom: 1px solid #E6E6E6;
  }

.header .headerBottom{
    height: 71px;
    padding-left:40px;
    display: grid;
    grid-template-columns: 140px 1fr;
  }

.header .headerBottom .logo{
      align-self: center;
      line-height: 1;
      font-size: 1em;
    }

/* ==========================================================================
   gNav
========================================================================== */

.gNav{
  justify-self: end;
  display: flex;
}

.gNav .pageLink{
    display: flex;
    align-items: center;
    gap: 0 40px;
    font-weight: 700;
  }

.gNav .pageLink a{
      transition: color .2s ease-out;
    }

@media (hover:hover) {
        .gNav .pageLink a:hover{
          color: #1B6BD0;
        }
      }

.gNav .contact{
    margin-left: 40px;
    background: #004499;
    background: var(--blue_01);
    color: #fff;
    font-weight: 700;
    width: 177px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6px;
  }

.gNav .contact::before{
      content: '';
      background: url('../img/icon_mail.svg') no-repeat center center / contain;
      width: 25px;
      height: 19px;
      flex-shrink: 0;
    }

/* ==========================================================================
   footer
========================================================================== */

.footer{
  background: #fff;
  padding: 50px 0 24px;
  position: relative;
}

.footer .footerContact >h2{
      text-align: center;
      margin-bottom: 20px;
    }

.footer .footerContact .text{
      font-size: 1.6rem;
      line-height: 1.8;
      text-align: center;
    }

.footer .footerContact .btn{
      margin-top: 20px;
      gap: 8px;
    }

.footer .footerContact .btn::before{
        content: '';
        background: url('../img/icon_mail.svg') no-repeat center center / contain;
        width: 25px;
        height: 19px;
        flex-shrink: 0;
      }

.footer .footerContact .notice{
      text-align: center;
      margin-top: 20px;
    }

.footer .footerBottom{
    width: min(calc(100% - 40px),1280px);
    margin: 74px auto 0;
    display: grid;
    grid-template-columns: auto 1fr;
    color: #646464;
    font-size: clamp( 12px, calc( 2.3636363636363633px + 0.9090909090909091vw ), 14px );
    line-height: 1.75;
  }

.footer .footerBottom .copyright{
      grid-column: 1;
      grid-row: 1;
    }

.footer .footerBottom .link{
      grid-column: 2;
      grid-row: 1;
      justify-self: end;
      display: flex;
      gap: 16px;
    }

.footer .footerBottom .link li:not(:last-child){
        display: inline-flex;
        gap: 16px;
      }

.footer .footerBottom .link li:not(:last-child)::after{
          content: '';
          height: 100%;
          width: 1px;
          flex-shrink: 0;
          background: #C7C7C7;
        }

.footer .footerBottom .link a{
        color: #646464;
        border-bottom: 1px solid transparent;
        transition: border-color .2s linear;
      }

@media (hover:hover){
          .footer .footerBottom .link a:hover{
            opacity: 1;
            border-color: #646464;
          }
        }

.footer .pagetop{
    position: fixed;
    bottom: 30px;
    right: 75px;
    z-index: 900;
    width: 74px;
    height: 74px;
    background: #004499;
    background: var(--blue_01);
    display: grid;
    place-content: center;
    border-radius: 50%;
    transition: background .2s linear;
    outline: none;
  }

@media (hover:hover){
      .footer .pagetop:hover{
        opacity: 1;
        background: #1B6BD0;
      }
    }

.footer .stopBtn{
    position: absolute;
    bottom: auto;
    top: -37px;
  }

/* ==========================================================================
   subPage共通
========================================================================== */

.subPage{
  margin-top: 59px;
}

/* ==========================================================================
   機能紹介
========================================================================== */

.functionsPage .pageHeader{
    margin-bottom: 100px;
  }

.functionsPage .functionSec{
    width: min(calc(100% - 80px),1040px);
    margin-inline: auto;
    display: grid;
    grid-template-columns: minmax(auto,440px) 1fr;
    grid-template-rows: auto 1fr;
    gap: 0 72px;
  }

.functionsPage .functionSec header{
      grid-column: 1;
      grid-row: 1;
    }

.functionsPage .functionSec .caseList{
      grid-column: 1;
      grid-row: 2;
    }

.functionsPage .functionSec .illuBox{
      grid-column: 2;
      grid-row: 1 / 3;
      align-self: center;
    }

.functionsPage .functionSec .text{
      margin-top: 16px;
    }

.functionsPage .functionSec .caseList{
      margin-top: 32px;
    }

.functionsPage .functionSec .caseList figcaption{
        font-size: 1.6rem;
        line-height: 2;
        font-weight: 700;
        color: #004499;
        color: var(--blue_01);
      }

.functionsPage .functionSec .caseList .case{
        margin-top: 8px;
      }

.functionsPage .functionSec .caseList .case >li::before{
            content: '・';
          }

.functionsPage .secWrapper1{
    margin-top: 80px;
    padding: 80px 0;
    background: rgba(243, 245, 249, .8);
  }

.functionsPage .functionSec3{
    margin-top: 80px;
  }

.functionsPage .functionSec3 .caseList .child{
        padding-left: 1em;
      }

.functionsPage .functionSec3 .caseList .childList{
        display: flex;
        flex-flow: row wrap;
      }

.functionsPage .functionSec3 .caseList .childList li:not(:last-child)::after{
            content: '／';
          }

.functionsPage .funcList{
    margin-top: 80px;
    padding: 40px 0 120px;
    background: rgba(243, 245, 249, .8);
  }

.functionsPage .funcList >h2{
      text-align: center;
      margin-bottom: 40px;
    }

.functionsPage .funcList >ul{
      max-width: 928px;
      margin-inline: auto;
      display: flex;
      flex-flow: row wrap;
      justify-content: center;
      gap: 16px;
    }

.functionsPage .funcList >ul li{
        flex: 0 1 220px;
        height: 197px;
        background: #fff;
        display: flex;
        flex-flow: column;
        justify-content: center;
        align-items: center;
        font-weight: 700;
        text-align: center;
      }

.functionsPage .funcList >ul li::before{
          content: '';
          width: 120px;
          aspect-ratio: 1 / 1;
          background-repeat: no-repeat;
          background-position: center center;
          background-size: contain;
          display: block;
          margin-bottom: 4px;
        }

.functionsPage .funcList li:nth-child(1)::before{
        background-image: url('../img/func_icon1.png');
      }

.functionsPage .funcList li:nth-child(2)::before{
        background-image: url('../img/func_icon2.png');
      }

.functionsPage .funcList li:nth-child(3)::before{
        background-image: url('../img/func_icon3.png');
      }

.functionsPage .funcList li:nth-child(4)::before{
        background-image: url('../img/func_icon4.png');
      }

.functionsPage .funcList li:nth-child(5)::before{
        background-image: url('../img/func_icon5.png');
      }

.functionsPage .funcList li:nth-child(6)::before{
        background-image: url('../img/func_icon6.png');
      }

.functionsPage .funcList li:nth-child(7)::before{
        background-image: url('../img/func_icon7.png');
      }

.functionsPage .funcList li:nth-child(8)::before{
        background-image: url('../img/func_icon8.png');
      }

.functionsPage .funcList li:nth-child(9)::before{
        background-image: url('../img/func_icon9.png');
      }

.functionsPage .funcList li:nth-child(10)::before{
        background-image: url('../img/func_icon10.png');
      }

.functionsPage .funcList li:nth-child(11)::before{
        background-image: url('../img/func_icon11.png');
      }

/* ==========================================================================
   よくある質問
========================================================================== */

.qaPage{
  padding-bottom: 105px;
}

.qaPage .pageHeader{
    margin-bottom: 72px;
  }

.qaPage .main{
    width: min(calc(100% - 80px),1000px);
    margin-inline: auto;
  }

/* ==========================================================================
   業界別導入事例
========================================================================== */

.caseStudyPage .pageHeader{
    margin-bottom: 70px;
  }

.caseStudyPage .row{
    max-width: 920px;
    margin-inline: auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 64px 40px;
  }

.caseStudyPage .caseStadyLinkBox{
    display: contents;
  }

.caseStudyPage .caseStadyLinkBox a{
      background: #F3F5F9;
      display: grid;
      grid-template-rows: subgrid;
      grid-row: span 4;
      gap: 0;
      padding: 0 24px 24px;
    }

.caseStudyPage .caseStadyLinkBox .tm{
      grid-column: 1;
      grid-row: 1;
      width: calc(100% + 48px);
      margin-left: -24px;
    }

.caseStudyPage .caseStadyLinkBox h2{
      grid-column: 1;
      grid-row: 2;
      font-size: 2.4rem;
      line-height: 1.75;
      letter-spacing: .08em;
      font-weight: 700;
      color: #004499;
      color: var(--blue_01);
      margin-top: 16px;
    }

.caseStudyPage .caseStadyLinkBox ul{
      grid-column: 1;
      grid-row: 3;
      margin-top: 8px;
    }

.caseStudyPage .caseStadyLinkBox ul li::before{
          content: '・';
        }

.caseStudyPage .caseStadyLinkBox .more{
      grid-column: 1;
      grid-row: 4;
      justify-self: end;
      margin-top: 12px;
      color: #004499;
      position: relative;
      transition: color .2s linear;
    }

.caseStudyPage .caseStadyLinkBox .more::after{
        content: '';
        width: 100%;
        height: 1px;
        background: #004499;
        transition: all .2s linear;
        position: absolute;
        left: 0;
        bottom: 0;
      }

@media (hover: hover) {
      .caseStudyPage .caseStadyLinkBox a:hover{
        opacity: 1;
      }
        .caseStudyPage .caseStadyLinkBox a:hover .more{
          color: #1B6BD0;
        }
          .caseStudyPage .caseStadyLinkBox a:hover .more::after{
            height: 2px;
            background-color: #1B6BD0;
          }
    }

.caseStudyPage .caseStadyLinkBox2 ul{
      display: flex;
      flex-flow: row wrap;
      gap: 0 1em;
      max-width: 275px;
    }

.caseStudyPage .otherCase{
    margin-top: 84px;
    padding: 40px 0 97px;
    background: #F3F5F9;
  }

.caseStudyPage .otherCase >h2{
      font-weight: 700;
      margin-bottom: 20px;
      text-align: center;
    }

.caseStudyPage .otherCase .otherList{
      max-width: 920px;
      margin-inline: auto;
      display: grid;
      grid-template-columns: repeat(3,1fr);
      gap: 21px 16px;
    }

.caseStudyPage .otherCase .otherList >li{
        background: #fff;
      }

.caseStudyPage .otherCase .innerSec{
      padding: 20px;
    }

.caseStudyPage .otherCase .innerSec h2{
        color: #004499;
        color: var(--blue_01);
        font-size: 1.8rem;
        line-height: 1.5;
        font-weight: 700;
        margin-bottom: 8px;
      }

.caseStudyPage .otherCase .innerSec ul{
        font-size: 1.6rem;
        line-height: 1.75;
      }

.caseStudyPage .otherCase .innerSec ul li{
          text-indent: -1em;
          margin-left: 1em;
        }

.caseStudyPage .otherCase .innerSec ul li::before{
            content: '・';
          }

/* ==========================================================================
   導入事例詳細用
========================================================================== */

.caseStudySubPage .pageHeader{
    padding: 44px 0 61px;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    margin-bottom: 35px;
  }

.caseStudySubPage .pageHeader .pageTitle{
      font-size: 2.8rem;
    }

.caseStudySubPage .pageHeader >h1{
      font-size: 4rem;
      line-height: 1.5;
      letter-spacing: .08em;
      text-align: center;
      font-weight: 700;
      margin-top: 24px;
    }

.caseStudySubPage .assignment{
    width: min(calc(100% - 80px),1040px);
    margin-inline: auto;
  }

.caseStudySubPage .assignment >h2{
      text-align: center;
      margin-bottom: 45px;
    }

.caseStudySubPage .assignment .row{
      display: grid;
      grid-template-columns: repeat(3,1fr);
      gap: 25px;
    }

.caseStudySubPage .assignment .assignmentSec{
      background: #F3F5F9;
      padding: 48px 25px 24px;
      position: relative;
    }

.caseStudySubPage .assignment .assignmentSec::before{
        content: '';
        width: 56px;
        height: 56px;
        background: url('../img/check_mark.svg') no-repeat center center / contain;
        position: absolute;
        top: -28px;
        left: 50%;
        translate: -50% 0;
      }

.caseStudySubPage .assignment .assignmentSec h2{
        font-size: 2rem;
        line-height: 1.5;
        font-weight: 700;
        color: #004499;
        color: var(--blue_01);
        text-align: center;
        margin-bottom: 8px;
      }

.caseStudySubPage .assignment .assignmentSec p{
        text-align: center;
      }

.caseStudySubPage .realization{
    margin-top: 50px;
    background: #F3F5F9;
    padding: 37px 0 90px;
  }

.caseStudySubPage .realization >h2{
      text-align: center;
      margin-bottom: 12px;
    }

.caseStudySubPage .howToUse{
    background: #fff;
    padding-bottom: 80px;
  }

.caseStudySubPage .howToUse >h2{
      color: #004499;
      color: var(--blue_01);
      text-align: center;
      background: #F3F5F9;
      padding-bottom: 28px;
      margin-bottom: 80px;
    }

.caseStudySubPage .howToUseSec{
    margin-top: 20px;
    max-width: 1008px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 0 6px;
  }

.caseStudySubPage .howToUseSec h2{
      margin-bottom: 24px;
    }

.caseStudySubPage .howToUseSec li{
      text-indent: -1em;
      margin-left: 1em;
    }

.caseStudySubPage .howToUseSec li::before{
        content: '・';
      }

.caseStudySubPage .moreSection{
    margin-top: 45px;
  }

.caseStudySubPage .moreSection >h2{
      text-align: center;
      color: #004499;
      color: var(--blue_01);
      margin-bottom: 16px;
    }

.caseStudySubPage .moreSection dl{
      max-width: 900px;
      margin-inline: auto;
      background: #fff;
      display: grid;
      grid-template-columns: 304px 1fr;
    }

.caseStudySubPage .moreSection dt,.caseStudySubPage .moreSection dd{
      padding-block: 40px;
      
    }

.caseStudySubPage .moreSection dt:not(:nth-last-of-type(1)),
    .caseStudySubPage .moreSection dd:not(:nth-last-of-type(1)){
      border-bottom: 1px solid #D0E3FA;
    }

.caseStudySubPage .moreSection dt{
      padding:0 40px 0 45px;
      display: flex;
      align-items: center;
      font-size: 2.4rem;
      line-height: 1.5;
      font-weight: 700;
    }

.caseStudySubPage .moreSection dd{
      padding-right: 45px;
    }

.caseStudySubPage .moreSection dd li{
        text-indent: -1em;
        margin-left: 1em;
      }

.caseStudySubPage .moreSection dd li::before{
          content: '・';
        }

/* ==========================================================================
   不動産業界
========================================================================== */

.realestatePage .pageHeader{
    background-image: url('../img/realestate_mv.jpg');
  }

/* ==========================================================================
   エネルギー業界（電気、水道、ガス）
========================================================================== */

.energyPage .pageHeader{
    background-image: url('../img/energy_mv.jpg');
  }

.energyPage .howToUseSec{
    max-width: 1008px;
    gap: 0 32px;
  }

.energyPage .howToUseSec .textBox{
      width: 446px;
    }

.energyPage .moreSection dl{
      grid-template-columns: 408px 1fr;
    }

/* ==========================================================================
   金融業界
========================================================================== */

.financePage .pageHeader{
    background-image: url('../img/finance_mv.jpg');
  }

.financePage .howToUseSec{
    max-width: 1008px;
    gap: 0 32px;
  }

.financePage .howToUseSec .textBox{
      width: 446px;
    }

.financePage .moreSection dl{
      grid-template-columns: 349px 1fr;
    }

/* ==========================================================================
   教育・学習支援業界
========================================================================== */

.educationPage .pageHeader{
    background-image: url('../img/education_mv.jpg');
  }

.educationPage .howToUseSec{
    max-width: 1008px;
    gap: 0 6px;
  }

.educationPage .howToUseSec .textBox{
      width: 472px;
    }

.educationPage .moreSection dl{
      grid-template-columns: 349px 1fr;
    }

/* ==========================================================================
   SMS不正利用について
========================================================================== */

.noticePage .pageHeader{
    margin-bottom: 72px;
  }

.noticePage .noticeSec{
    width: min(calc(100% - 80px),1040px);
    margin-inline: auto;
  }

.noticePage .noticeSec p:not(.textS),.noticePage .noticeSec ul{
      font-size: 1.6rem;
      line-height: 1.75;
    }

.noticePage .noticeSec >* + *:not(a){
      margin-top: 1em;
    }

.noticePage .noticeSec >h2 + *{
      margin-top: 10px;
    }

.noticePage .noticeSec li{
      text-indent: -1em;
      margin-left: 1em;
    }

.noticePage .noticeSec li::before{
        content: '・';
      }

.noticePage .noticeSec a{
      text-decoration: underline;
      color: #004499;
    }

.noticePage .noticeSec + .noticeSec{
    margin-top: 56px;
  }

.noticePage .noticeSec3{
    display: grid;
    grid-template-columns: 1fr 350px;
    align-items: center;
    gap: 0 35px;
    
  }

.noticePage .noticeSec3 h2{
      grid-column: 1 / 3;
      grid-row: 1;
    }

.noticePage .noticeSec3 .textBox{
      grid-row: 2;
      grid-column: 1;
    }

.noticePage .noticeSec3 .textBox >* + *:not(a){
        margin-top: 1em;
      }

.noticePage .noticeSec3 .textBox .kome{
        margin-top: 2em;
        display: flex;
      }

.noticePage .noticeSec3 .textBox .kome::before{
          content: '※';
          margin-right: 4px;
          flex-shrink: 0;
        }

.noticePage .noticeSec3 .imgBox{
      grid-column: 2;
      grid-row: 2;
      margin: 0;
    }

.noticePage .obi{
    margin-top: 80px;
    background: #004499;
    padding: 50px 0;
  }

.noticePage .obi p{
      text-align: center;
      color: #fff;
    }

.noticePage .obi p + p{
      margin-top: 1em;
    }

.noticePage .reference{
    background: #F3F5F9;
    padding: 40px 0 84px;
  }

.noticePage .reference .inner{
      width: min(calc(100% - 80px),1040px);
      margin-inline: auto;
    }

.noticePage .reference ul{
      margin-top: 1.5em;
    }

.noticePage .reference li{
      display: flex;
      word-break: break-all;
    }

.noticePage .reference li::before{
        content: '・';
        flex-shrink: 0;
      }

.noticePage .reference li >span{
        display: flex;
        flex-flow: row wrap;
        gap: 0 1em;
      }

.noticePage .reference li a{
        text-decoration: underline;
        color: #004499;
        color: var(--blue_01);
      }

/* ==========================================================================
   HOME
========================================================================== */

.homePage .fv{
    height: 478px;
    background: url('../img/top_fv_bk.jpg') no-repeat center center / cover;
  }

@media (min-width:1441px) {

.homePage .fv{
      background: url('../img/top_fv_bk_1.5x.jpg') no-repeat center center / cover
  }
    }

.homePage .fv{
    display: flex;
    align-items: center;
    justify-content: center;
}

.homePage .fv .catch{
      width: min(calc(100% - 80px),1118px);
    }

.homePage .fv .catch p{
        max-width: 485px;
        text-align: center;
        font-size: 2.8rem;
        line-height: 1.8;
        font-weight: 700;
        margin-bottom: 25px;
      }

.homePage .fv .catch h2{
        max-width: 485px;
        line-height: 1;
      }

.homePage .onlyOne{
    margin-top: 48px;
  }

.homePage .onlyOne >h2{
      color: #004499;
      color: var(--blue_01);
      font-weight: 700;
      font-size: 4rem;
      line-height: 1.5;
      letter-spacing: .08em;
      text-align: center;
    }

.homePage .onlyOne p{
      margin-top: 24px;
      text-align: center;
    }

.homePage .topSecTitle{
    font-size: 3.2rem;
    line-height: 1.5;
    letter-spacing: .08em;
    font-weight: 700;
    text-align: center;
  }

.homePage .topSecTitle::before{
      content: attr(data-en);
      display: block;
      width: -moz-fit-content;
      width: fit-content;
      color: #004499;
      color: var(--blue_01);
      font-weight: 700;
      font-size: 2rem;
      line-height: 1.9;
      padding: 0 8px;
      border-bottom: 2px solid #004499;
      border-bottom: 2px solid var(--blue_01);
      margin:0 auto 8px;
    }

.homePage .about{
    margin-top: 50px;
    padding: 40px 0 60px;
    background: #F3F5F9;
  }

.homePage .about .topSecTitle{
      margin-bottom: 24px;
    }

.homePage .about p{
      text-align: center;
      font-size: 1.6rem;
      line-height: 2;
    }

.homePage .about figure{
      max-width: 920px;
      margin: 24px auto 0;
    }

.homePage .features{
    width: min(calc(100% - 80px),1040px);
    margin: 40px auto 0;
  }

.homePage .features .topSecTitle{
      margin-bottom: 40px;
    }

.homePage .features .featuresSec{
      max-width: 990px;
      display: flex;
      align-items: center;
      gap: 0 47px;
    }

.homePage .features .featuresSec .textBox{
        flex: 0 1 440px;
      }

.homePage .features .featuresSec .imgBox{
        flex: 0 1 500px;
      }

.homePage .features .featuresSec .num{
        font-family: "Inter", sans-serif;
        color: #237CEB;
        font-size: 3.2rem;
        line-height: 1.5;
        font-weight: 700;
        width: -moz-fit-content;
        width: fit-content;
        border-bottom: 2px solid #237CEB;
      }

.homePage .features .featuresSec h2{
        margin-top: 4px;
      }

.homePage .features .featuresSec .description{
        margin-top: 24px;
      }

.homePage .features .featuresSec:nth-child(odd){
      margin: 0 0 0 auto;
    }

.homePage .features .featuresSec:nth-child(odd) .textBox{
        order: 2;
      }

.homePage .features .featuresSec:nth-child(odd) .imgBox{
        order: 1;
      }

.homePage .features .featuresSec + .featuresSec{
      margin-top: 78px;
    }

.homePage .functions{
    margin-top: 80px;
    background: #F3F5F9;
    padding: 40px 0 80px;
  }

.homePage .functions .topSecTitle{
      margin-bottom: 32px;
    }

.homePage .functions ul{
      max-width: 924px;
      margin-inline: auto;
      display: flex;
      flex-flow: row wrap;
      justify-content: center;
      gap: 16px;
    }

.homePage .functions ul li{
        flex: 0 1 172px;
        height: 197px;
        background: #fff;
        display: flex;
        flex-flow: column;
        justify-content: center;
        align-items: center;
        font-weight: 700;
        text-align: center;
      }

.homePage .functions ul li::before{
          content: '';
          width: 128px;
          aspect-ratio: 1 / 1;
          background-repeat: no-repeat;
          background-position: center center;
          background-size: contain;
          display: block;
          margin-bottom: 4px;
        }

.homePage .functions ul li:nth-child(1)::before{
          background-image: url('../img/func_icon1.png');
        }

.homePage .functions ul li:nth-child(2)::before{
          background-image: url('../img/func_icon2.png');
        }

.homePage .functions ul li:nth-child(3)::before{
          background-image: url('../img/func_icon3.png');
        }

.homePage .functions ul li:nth-child(4)::before{
          background-image: url('../img/func_icon4.png');
        }

.homePage .functions ul li:nth-child(5)::before{
          background-image: url('../img/func_icon5.png');
        }

.homePage .functions ul li:nth-child(6)::before{
          background-image: url('../img/func_icon6.png');
        }

.homePage .functions ul li:nth-child(7)::before{
          background-image: url('../img/func_icon7.png');
        }

.homePage .functions ul li:nth-child(8)::before{
          background-image: url('../img/func_icon8.png');
        }

.homePage .functions ul li:nth-child(9)::before{
          background-image: url('../img/func_icon9.png');
        }

.homePage .functions ul li:nth-child(10)::before{
          background-image: url('../img/func_icon10.png');
        }

.homePage .functions .btn{
      margin-top: 32px;
    }

.homePage .caseStudy{
    margin-top: 40px;
  }

.homePage .caseStudy .topSecTitle{
      margin-bottom: 32px;
    }

.homePage .caseStudy .splide{
      max-width: 912px;
      margin-inline: auto;
      overflow: visible;
      
    }

.homePage .caseStudy .splide .splide__track{
        overflow: visible;
        position: relative;
        z-index: 1;
      }

.homePage .caseStudy .splide .splide__track::before{
          content: '';
          width: calc(calc(100vw - 912px) / 2);
          min-width: 200px;
          height: 100%;
          background: linear-gradient(to right, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%); ;
          position: absolute;
          top: 0;
          left: 0;
          z-index: 2;
          translate: -100% 0;
        }

.homePage .caseStudy .splide .splide__track::after{
          content: '';
          width: calc(calc(100vw - 912px) / 2);
          min-width: 200px;
          height: 100%;
          background: linear-gradient(to right, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%); ;
          position: absolute;
          top: 0;
          right: 0;
          z-index: 2;
          translate: 100% 0;
        }

.homePage .caseStudy .splide .splide__pagination{
        position: static;
        margin-top: 32px;
        gap: 0 10px;
      }

.homePage .caseStudy .splide .splide__pagination__page{
        width: 10px;
        height: 10px;
        margin: 0;
      }

.homePage .caseStudy .splide .splide__pagination__page button{
          display: block;
          line-height: 1;
          width: 100%;
          height: 100%;
        }

.homePage .caseStudy .splide .splide__pagination__page.is-active{
        background: #004499;
        background: var(--blue_01);
        transform: scale(1);
      }

.homePage .caseStudy .splide .splide__arrow{
        width: 74px;
        height: 74px;
        background: #004499;
        background: var(--blue_01);
        border-radius: 0;
        opacity: 1;
        transition: background .2s linear;
        z-index: 3;
      }

.homePage .caseStudy .splide .splide__arrow svg{
          display: none;
        }

.homePage .caseStudy .splide .splide__arrow::before {
          content: '';
          display: block;
          width: 24px;
          height: 21px;
          background-image: url('../img/slide_arrow.svg');
          background-size: contain;
          background-repeat: no-repeat;
        }

@media (hover:hover) {
          .homePage .caseStudy .splide .splide__arrow:hover{
            background: #1B6BD0;
          }
        }

.homePage .caseStudy .splide .splide__arrow--next{
        right: -94px;
      }

.homePage .caseStudy .splide .splide__arrow--prev{
        left: -94px;
      }

.homePage .caseStudy .splide .splide__arrow--prev::before {
          rotate: 180deg;
        }

.homePage .caseStudy .caseStadySlideBox{
      height: 100%;
    }

.homePage .caseStudy .caseStadySlideBox a{
        height: 100%;
        background: #F3F5F9;
        display: grid;
        grid-template-rows: auto auto 1fr;
        gap: 0;
        padding: 0 24px 65px 24px;
        position: relative;
      }

.homePage .caseStudy .caseStadySlideBox .tm{
        grid-column: 1;
        grid-row: 1;
        width: calc(100% + 48px);
        margin-left: -24px;
      }

.homePage .caseStudy .caseStadySlideBox h2{
        grid-column: 1;
        grid-row: 2;
        font-size: 2.4rem;
        line-height: 1.75;
        letter-spacing: .08em;
        font-weight: 700;
        color: #004499;
        color: var(--blue_01);
        margin-top: 16px;
      }

.homePage .caseStudy .caseStadySlideBox ul{
        grid-column: 1;
        grid-row: 3;
        margin-top: 8px;
      }

.homePage .caseStudy .caseStadySlideBox ul li::before{
            content: '・';
          }

.homePage .caseStudy .caseStadySlideBox .more{
        position: absolute;
        width:-moz-fit-content;
        width:fit-content;
        display: block;
        bottom: 24px;
        right: 24px;
        color: #004499;
        transition: color .2s linear;
      }

.homePage .caseStudy .caseStadySlideBox .more::after{
          content: '';
          width: 100%;
          height: 1px;
          background: #004499;
          transition: all .2s linear;
          position: absolute;
          left: 0;
          bottom: 0;
        }

@media (hover: hover) {
        .homePage .caseStudy .caseStadySlideBox a:hover{
          opacity: 1;
        }
          .homePage .caseStudy .caseStadySlideBox a:hover .more{
            color: #1B6BD0;
          }
            .homePage .caseStudy .caseStadySlideBox a:hover .more::after{
              height: 2px;
              background-color: #1B6BD0;
            }
      }

.homePage .caseStudy .caseStadySlideBox2 ul{
        display: flex;
        flex-flow: row wrap;
        gap: 0 1em;
        max-width: 275px;
      }

.homePage .caseStudy .btn{
      margin-top: 40px;
    }

.homePage .faq{
    margin-top: 80px;
    background: #F3F5F9;
    padding: 40px 0 203px;
  }

.homePage .faq .topSecTitle{
      margin-bottom: 32px;
    }

.homePage .faq .row{
      max-width: 1000px;
      margin-inline: auto;
    }

.homePage .faq .btn{
      margin-top: 40px;
    }

/* ==========================================================================
   end
========================================================================== */

@media (max-width: 767px) {
  html{
    font-size: calc(100vw / 37.5);
  }
body {
  min-width: 0;
	width:100%;
}
img{
	width: 100%;
}
.spShow{
	display: inline-block;
}
.pcShow{
	display: none;
}
/* ==========================================================================
   レイアウト
========================================================================== */
.container{
  grid-template-rows: calc(calc(120/375) * 100vw) 1fr auto;
}
/* ==========================================================================
   header
========================================================================== */
.header{
  min-width: 0;
  height: calc(calc(120/375) * 100vw);
  box-shadow: none;
}
  .header .headerTop{
    height: calc(calc(50/375) * 100vw);
    padding: 0;
    justify-content: center;
    border-bottom: calc(calc(1/375) * 100vw) solid #E6E6E6;
  }
    .header .headerTop img{
      width: calc(calc(128/375) * 100vw);
    }
  .header .headerBottom{
    border-bottom: calc(calc(1/375) * 100vw) solid #E6E6E6;
    height: calc(calc(70/375) * 100vw);
    padding-left:calc(calc(16/375) * 100vw);
    display: grid;
    grid-template-columns: calc(calc(120/375) * 100vw) 1fr;
  }
    .header .headerBottom .menuBtn{
      justify-self: end;
      width: calc(calc(70/375) * 100vw);
      height: 100%;
    }
      .header .headerBottom .menuBtn button{
        width: 100%;
        height: 100%;
        display: block;
        line-height: 1;
      }
/* ==========================================================================
   gNav
========================================================================== */
.gNav{
  display: none;
  position: fixed;
  z-index: 901;
  width: 100%;
  height: 100svh;
  top: 0;
  left: 0;
  background: #fff;
}
  .gNav .menuHeader{
    height: calc(calc(70/375) * 100vw);
    padding-left:calc(calc(16/375) * 100vw);
    display: grid;
    grid-template-columns: calc(calc(120/375) * 100vw) 1fr;
    border-bottom: calc(calc(1/375) * 100vw) solid #E6E6E6;
  }
    .gNav .menuHeader .menuCloseBtn{
      width: calc(calc(70/375) * 100vw);
      justify-self: end;
    }
  .gNav .pageLink{
    display: block;
    font-size: 1.8rem;
  }
    .gNav .pageLink li{
      border-bottom: calc(calc(1/375) * 100vw) solid #E6E6E6;
    }
    .gNav .pageLink a{
      height: calc(calc(68/375) * 100vw);
      display: flex;
      align-items: center;
      padding: 0 calc(calc(24/375) * 100vw);
    }
  .gNav .contact{
    margin: calc(calc(32/375) * 100vw) auto 0;
    width: calc(calc(335/375) * 100vw);
    height: calc(calc(83/375) * 100vw);
    gap: calc(calc(8/375) * 100vw);
    font-size: 2rem;
  }
    .gNav .contact::before{
      background: url('../img/icon_mail.svg') no-repeat center center / contain;
      width: calc(calc(25/375) * 100vw);
      height: calc(calc(19/375) * 100vw);
    }
.navOpen{
  display: block;
  animation: menuIn .4s 1 0s linear forwards;
}
.navClose{
  animation: menuOut .4s 1 0s linear forwards;
}
/* ==========================================================================
   footer
========================================================================== */
.footer{
  padding: calc(calc(76/375) * 100vw) 0 calc(calc(16/375) * 100vw);
}
    .footer .footerContact >h2{
      margin-bottom: calc(calc(20/375) * 100vw);
    }
    .footer .footerContact .btn{
      margin-top: calc(calc(20/375) * 100vw);
      gap: calc(calc(8/375) * 100vw);
      width: calc(calc(335/375) * 100vw);
    }
      .footer .footerContact .btn::before{
        width: calc(calc(28/375) * 100vw);
        height: calc(calc(19/375) * 100vw);
      }
    .footer .footerContact .notice{
      margin-top: calc(calc(20/375) * 100vw);
    }
  .footer .footerBottom{
    width: calc(calc(335/375) * 100vw);
    margin: calc(calc(52/375) * 100vw) auto 0;
    display: block;
    font-size: 1.2rem;
  }
    .footer .footerBottom .copyright{
      margin-top: calc(calc(26/375) * 100vw);
      text-align: center;
    }
    .footer .footerBottom .link{
      display: flex;
      flex-flow: row wrap;
      justify-content: center;
      gap: calc(calc(8/375) * 100vw) calc(calc(16/375) * 100vw);
    }
      .footer .footerBottom .link li:not(:last-child){
        gap: calc(calc(16/375) * 100vw);
      }
        .footer .footerBottom .link li:not(:last-child)::after{
          width: calc(calc(1/375) * 100vw);
        }
  .footer .pagetop{
    bottom: calc(calc(20/375) * 100vw);
    right: calc(calc(16/375) * 100vw);
    width: calc(calc(60/375) * 100vw);
    height: calc(calc(60/375) * 100vw);
  }
    .footer .pagetop img{
      width: calc(calc(24/375) * 100vw);
    }
    .footer .pagetop:hover{
      opacity: 1;
    }
  .footer .stopBtn{
    position: absolute;
    bottom: auto;
    top: calc(-1 * calc(calc(30/375) * 100vw));
  }
/* ==========================================================================
   subPage共通
========================================================================== */
.subPage{
  margin-top: calc(calc(60/375) * 100vw);
}
/* ==========================================================================
   機能紹介
========================================================================== */
  .functionsPage .pageHeader{
    margin-bottom: calc(calc(56/375) * 100vw);
  }
  .functionsPage .functionSec{
    width: calc(calc(335/375) * 100vw);
    grid-template-columns: 100%;
    grid-template-rows: auto auto 1fr;
    gap: 0;
  }
    .functionsPage .functionSec header{
      grid-column: 1;
      grid-row: 1;
    }
    .functionsPage .functionSec .caseList{
      grid-column: 1;
      grid-row: 3;
    }
    .functionsPage .functionSec .illuBox{
      grid-column: 1;
      grid-row: 2;
      margin-top: calc(calc(24/375) * 100vw);
    }
    .functionsPage .functionSec .text{
      margin-top: calc(calc(16/375) * 100vw);
    }
    .functionsPage .functionSec .caseList{
      margin-top: calc(calc(8/375) * 100vw);
    }
      .functionsPage .functionSec .caseList .case{
        margin-top: calc(calc(8/375) * 100vw);
        display: flex;
        flex-flow: row wrap;
        gap: 0 1em;
      }
  .functionsPage .secWrapper1{
    margin-top: calc(calc(32/375) * 100vw);
    padding: calc(calc(60/375) * 100vw) 0;
  }
  .functionsPage .functionSec3{
    margin-top: calc(calc(60/375) * 100vw);
  }
    .functionsPage .functionSec3 .text{
      font-size: 1.6rem;
    }
      .functionsPage .functionSec3 .caseList .childList{
        display: block;
        font-size:0;
      }
        .functionsPage .functionSec3 .caseList .childList li{
          display: inline;
          font-size: 1.4rem;
        }
  .functionsPage .funcList{
    margin-top: calc(calc(102/375) * 100vw);
    padding: calc(calc(60/375) * 100vw) 0 calc(calc(160/375) * 100vw);
  }
    .functionsPage .funcList >h2{
      margin-bottom: calc(calc(40/375) * 100vw);
    }
    .functionsPage .funcList >ul{
      max-width: calc(calc(320/375) * 100vw);
      gap: calc(calc(12/375) * 100vw);
      justify-content: flex-start;
    }
      .functionsPage .funcList >ul li{
        flex: 0 1 calc(calc(154/375) * 100vw);
        height: auto;
        padding: calc(calc(16/375) * 100vw) 0 calc(calc(24/375) * 100vw);
      }
        .functionsPage .funcList >ul li::before{
          width: calc(calc(108/375) * 100vw);
          margin-bottom: calc(calc(4/375) * 100vw);
        }
      .functionsPage .funcList li:nth-child(1)::before{
        background-image: url('../img/sp_func_icon1.png');
      }
      .functionsPage .funcList li:nth-child(2)::before{
        background-image: url('../img/sp_func_icon2.png');
      }
      .functionsPage .funcList li:nth-child(3)::before{
        background-image: url('../img/sp_func_icon3.png');
      }
      .functionsPage .funcList li:nth-child(4)::before{
        background-image: url('../img/sp_func_icon4.png');
      }
      .functionsPage .funcList li:nth-child(5)::before{
        background-image: url('../img/sp_func_icon5.png');
      }
      .functionsPage .funcList li:nth-child(6)::before{
        background-image: url('../img/sp_func_icon6.png');
      }
      .functionsPage .funcList li:nth-child(7)::before{
        background-image: url('../img/sp_func_icon7.png');
      }
      .functionsPage .funcList li:nth-child(8)::before{
        background-image: url('../img/sp_func_icon8.png');
      }
      .functionsPage .funcList li:nth-child(9)::before{
        background-image: url('../img/sp_func_icon9.png');
      }
      .functionsPage .funcList li:nth-child(10)::before{
        background-image: url('../img/sp_func_icon10.png');
      }
      .functionsPage .funcList li:nth-child(11)::before{
        background-image: url('../img/sp_func_icon11.png');
      }
/* ==========================================================================
   よくある質問
========================================================================== */
.qaPage{
  padding-bottom: calc(calc(160/375) * 100vw);
}
  .qaPage .pageHeader{
    margin-bottom: calc(calc(56/375) * 100vw);
  }
  .qaPage .main{
    width: calc(calc(335/375) * 100vw);
  }
/* ==========================================================================
   業界別導入事例
========================================================================== */
  .caseStudyPage .pageHeader{
    margin-bottom: calc(calc(56/375) * 100vw);
  }
  .caseStudyPage .row{
    max-width: calc(calc(335/375) * 100vw);
    grid-template-columns: 100%;
    gap: calc(calc(24/375) * 100vw) 0;
  }
  .caseStudyPage .caseStadyLinkBox{
    display: block;
  }
    .caseStudyPage .caseStadyLinkBox a{
      padding: 0 calc(calc(24/375) * 100vw) calc(calc(24/375) * 100vw);
    }
    .caseStudyPage .caseStadyLinkBox .tm{
      width: calc(100% + calc(calc(48/375) * 100vw));
      margin-left: calc(-1 * calc(calc(24/375) * 100vw));
    }
    .caseStudyPage .caseStadyLinkBox h2{
      margin-top: calc(calc(16/375) * 100vw);
    }
    .caseStudyPage .caseStadyLinkBox ul{
      margin-top: calc(calc(8/375) * 100vw);
      font-size: 1.6rem;
    }
      .caseStudyPage .caseStadyLinkBox ul li{
        text-indent: -1em;
        margin-left: 1em;
      }
    .caseStudyPage .caseStadyLinkBox .more{
      margin-top: calc(calc(16/375) * 100vw);
    }
      .caseStudyPage .caseStadyLinkBox .more::after{
        width: 100%;
        height: calc(calc(1/375) * 100vw);
      }
    .caseStudyPage .caseStadyLinkBox2 ul{
      display: block;
      max-width: none;
    }
  .caseStudyPage .otherCase{
    margin-top: calc(calc(68/375) * 100vw);
    padding: calc(calc(60/375) * 100vw) 0 calc(calc(160/375) * 100vw);
  }
    .caseStudyPage .otherCase >h2{
      margin-bottom: calc(calc(40/375) * 100vw);
      font-size: 2.8rem;
    }
    .caseStudyPage .otherCase .otherList{
      max-width: calc(calc(335/375) * 100vw);
      margin-inline: auto;
      display: grid;
      grid-template-columns: 100%;
      gap: calc(calc(8/375) * 100vw) 0;
    }
    .caseStudyPage .otherCase .innerSec{
      padding: calc(calc(20/375) * 100vw);
    }
      .caseStudyPage .otherCase .innerSec h2{
        margin-bottom: calc(calc(8/375) * 100vw);
      }
/* ==========================================================================
   導入事例詳細用
========================================================================== */
  .caseStudySubPage .pageHeader{
    padding: calc(calc(40/375) * 100vw) 0 calc(calc(52/375) * 100vw);
    margin-bottom: calc(calc(60/375) * 100vw);
  }
    .caseStudySubPage .pageHeader .pageTitle{
      font-size: 2rem;
    }
      .caseStudySubPage .pageHeader .pageTitle::before{
        font-size: 1.6rem;
      }
    .caseStudySubPage .pageHeader >h1{
      font-size: 3.2rem;
      margin-top: calc(calc(8/375) * 100vw);
    }
  .caseStudySubPage .assignment{
    width: calc(calc(330/375) * 100vw);
    margin-inline: auto;
  }
    .caseStudySubPage .assignment >h2{
      margin-bottom: calc(calc(45/375) * 100vw);
    }
    .caseStudySubPage .assignment .row{
      display: grid;
      grid-template-columns: 100%;
      gap: calc(calc(32/375) * 100vw);
    }
    .caseStudySubPage .assignment .assignmentSec{
      padding: calc(calc(48/375) * 100vw) calc(calc(24/375) * 100vw) calc(calc(24/375) * 100vw);
    }
      .caseStudySubPage .assignment .assignmentSec::before{
        width: calc(calc(50/375) * 100vw);
        height: calc(calc(50/375) * 100vw);
        top: calc(-1 * calc(calc(25/375) * 100vw));
      }
      .caseStudySubPage .assignment .assignmentSec h2{
        margin-bottom: calc(calc(8/375) * 100vw);
      }
      .caseStudySubPage .assignment .assignmentSec p{
        font-size: 1.6rem;
      }
  .caseStudySubPage .realization{
    margin-top: calc(calc(60/375) * 100vw);
    background: #F3F5F9;
    padding: calc(calc(60/375) * 100vw) 0 calc(calc(160/375) * 100vw);
  }
    .caseStudySubPage .realization >h2{
      margin-bottom: calc(calc(53/375) * 100vw);
    }
  .caseStudySubPage .howToUse{
    padding-bottom: calc(calc(60/375) * 100vw);
  }
    .caseStudySubPage .howToUse >h2{
      translate: 0 calc(-1 * calc(calc(28/375) * 100vw));
      margin-bottom: 0;
      padding-bottom: 0;
      background: none;
    }
  .caseStudySubPage .howToUseSec{
    margin-top: calc(calc(10/375) * 100vw);
    max-width: calc(calc(335/375) * 100vw);
    display: grid;
    align-items: start;
    gap: 0;
  }
    .caseStudySubPage .howToUseSec .textBox{
      display: contents;
    }
    .caseStudySubPage .howToUseSec h2{
      margin-bottom: calc(calc(24/375) * 100vw);
      grid-column: 1;
      grid-row: 1;
      font-size: 2.4rem;
      line-height: 1.5;
      letter-spacing: .08em;
    }
    .caseStudySubPage .howToUseSec .imgBox{
      margin-bottom: calc(calc(24/375) * 100vw);
      grid-column: 1;
      grid-row: 2;
    }
    .caseStudySubPage .howToUseSec ul{
      grid-column: 1;
      grid-row: 3;
      font-size: 1.6rem;
      line-height: 2;
    }
  .caseStudySubPage .moreSection{
    margin-top: calc(calc(60/375) * 100vw);
  }
    .caseStudySubPage .moreSection >h2{
      margin-bottom: calc(calc(24/375) * 100vw);
    }
    .caseStudySubPage .moreSection dl{
      max-width: calc(calc(335/375) * 100vw);
      display: grid;
      grid-template-columns: 100%;
      background: none;
    }
    .caseStudySubPage .moreSection dt:not(:nth-last-of-type(1)),
    .caseStudySubPage .moreSection dd:not(:nth-last-of-type(1)){
      border-bottom: none;
    }
    .caseStudySubPage .moreSection dt{
      background: #fff;
      padding: calc(calc(20/375) * 100vw) calc(calc(20/375) * 100vw) calc(calc(16/375) * 100vw);
      display: block;
      font-size: 2rem;
      line-height: 2;
    }
    .caseStudySubPage .moreSection dd{
      background: #fff;
      padding: 0 calc(calc(20/375) * 100vw) calc(calc(20/375) * 100vw);
    }
      .caseStudySubPage .moreSection dd ul{
        font-size: 1.6rem;
        line-height: 1.75;
      }
    .caseStudySubPage .moreSection dd + dt{
      margin-top: calc(calc(8/375) * 100vw);
    }
/* ==========================================================================
   不動産業界
========================================================================== */
  .realestatePage .pageHeader{
    background-image: url('../img/sp_realestate_mv.jpg');
  }
/* ==========================================================================
   エネルギー業界（電気、水道、ガス）
========================================================================== */
  .energyPage .pageHeader{
    background-image: url('../img/sp_energy_mv.jpg');
  }
    .energyPage .pageHeader h2{
      line-height: 1.3;
    }
    .energyPage .pageHeader small{
      font-size: .7em;
    }
  .energyPage .howToUseSec{
    max-width: calc(calc(335/375) * 100vw);
    gap: 0;
  }
    .energyPage .howToUseSec .textBox{
      width: auto;
    }
/* ==========================================================================
   金融業界
========================================================================== */
  .financePage .pageHeader{
    background-image: url('../img/sp_finance_mv.jpg');
  }
  .financePage .howToUseSec{
    max-width: calc(calc(335/375) * 100vw);
    gap: 0;
  }
    .financePage .howToUseSec .textBox{
      width: auto;
    }
/* ==========================================================================
   教育・学習支援業界
========================================================================== */
  .educationPage .pageHeader{
    background-image: url('../img/sp_education_mv.jpg');
  }
  .educationPage .howToUseSec{
    max-width: calc(calc(335/375) * 100vw);
    gap: 0;
  }
    .educationPage .howToUseSec .textBox{
      width: auto;
    }
/* ==========================================================================
   SMS不正利用について
========================================================================== */
  .noticePage .pageHeader{
    margin-bottom: calc(calc(60/375) * 100vw);
  }
  .noticePage .noticeSec{
    width: calc(calc(335/375) * 100vw);
  }
    .noticePage .noticeSec >h2 + *{
      margin-top: calc(calc(10/375) * 100vw);
    }
  .noticePage .noticeSec + .noticeSec{
    margin-top: calc(calc(50/375) * 100vw);
  }
  .noticePage .noticeSec3{
    display: grid;
    grid-template-columns: 100%;
    align-items: center;
    gap: calc(calc(10/375) * 100vw) 0;
  }
    .noticePage .noticeSec3 h2{
      grid-column: 1;
      grid-row: 1;
    }
    .noticePage .noticeSec3 .textBox{
      grid-column: 1;
      grid-row: 3;
    }
        .noticePage .noticeSec3 .textBox .kome::before{
          margin-right: calc(calc(4/375) * 100vw);
        }
    .noticePage .noticeSec3 .imgBox{
      grid-column: 1;
      grid-row: 2;
    }
  .noticePage .obi{
    margin-top: calc(calc(60/375) * 100vw);
    background: #004499;
    padding: calc(calc(40/375) * 100vw) calc(calc(20/375) * 100vw);
  }
    .noticePage .obi p{
      font-size: 1.8rem;
      text-align: justify;
    }
  .noticePage .reference{
    background: #F3F5F9;
    padding: calc(calc(40/375) * 100vw) 0 calc(calc(100/375) * 100vw);
  }
    .noticePage .reference .inner{
      width: calc(calc(335/375) * 100vw);
    }
    .noticePage .reference li + li{
      margin-top: .3em;
    }
/* ==========================================================================
   HOME
========================================================================== */
  .homePage .fv{
    height: calc(calc(530/375) * 100vw);
    background: url('../img/sp_top_fv_bk.jpg') no-repeat center center / cover;
    align-items: flex-start;
    padding-top: calc(calc(21/375) * 100vw);
  }
    .homePage .fv .catch{
      width: auto;
    }
      .homePage .fv .catch p{
        max-width: none;
        font-size: 2rem;
        line-height: 1.5;
        margin-bottom: calc(calc(16/375) * 100vw);
      }
      .homePage .fv .catch h2{
        max-width: calc(calc(272/375) * 100vw);
        margin-right: calc(-1 * calc(calc(6/375) * 100vw));
        line-height: 1;
      }
  .homePage .onlyOne{
    margin-top: calc(calc(80/375) * 100vw);
  }
    .homePage .onlyOne >h2{
      font-size: 3.2rem;
    }
    .homePage .onlyOne p{
      width: calc(calc(335/375) * 100vw);
      margin: calc(calc(32/375) * 100vw) auto;
      text-align: justify;
      font-size: 1.8rem;
    }
    .homePage .topSecTitle::before{
      padding: 0 calc(calc(4.5/375) * 100vw);
      border-bottom: calc(calc(2/375) * 100vw) solid #004499;
      border-bottom: calc(calc(2/375) * 100vw) solid var(--blue_01);
      margin: 0 auto calc(calc(8/375) * 100vw);
    }
  .homePage .about{
    margin-top: calc(calc(80/375) * 100vw);
    padding: calc(calc(80/375) * 100vw) calc(calc(20/375) * 100vw);
  }
    .homePage .about .topSecTitle{
      margin-bottom: calc(calc(40/375) * 100vw);
    }
    .homePage .about p{
      text-align: justify;
    }
    .homePage .about figure{
      max-width: none;
      margin: calc(calc(40/375) * 100vw) auto 0;
    }
  .homePage .features{
    width: calc(calc(335/375) * 100vw);
    margin: calc(calc(80/375) * 100vw) auto 0;
  }
    .homePage .features .topSecTitle{
      margin-bottom: calc(calc(40/375) * 100vw);
    }
    .homePage .features .featuresSec{
      max-width: none;
      display: block;
    }
      .homePage .features .featuresSec .num{
        border-bottom: calc(calc(2/375) * 100vw) solid #237CEB;
      }
      .homePage .features .featuresSec h2{
        margin-top: calc(calc(4/375) * 100vw);
      }
      .homePage .features .featuresSec .description{
        margin-top: calc(calc(16/375) * 100vw);
        font-size: 1.6rem;
        line-height: 2;
      }
      .homePage .features .featuresSec .imgBox{
        margin-top: calc(calc(16/375) * 100vw);
      }
    .homePage .features .featuresSec:nth-child(odd){
      margin: 0;
    }
    .homePage .features .featuresSec + .featuresSec{
      margin-top: calc(calc(60/375) * 100vw);
    }
      .homePage .features .featuresSec1 h2{
        width: -moz-max-content;
        width: max-content;
      }
  .homePage .functions{
    margin-top: calc(calc(80/375) * 100vw);
    padding: calc(calc(80/375) * 100vw) 0;
  }
    .homePage .functions .topSecTitle{
      margin-bottom: calc(calc(40/375) * 100vw);
    }
    .homePage .functions ul{
      max-width: calc(calc(320/375) * 100vw);
      gap: calc(calc(12/375) * 100vw);
    }
      .homePage .functions ul li{
        flex: 0 1 calc(calc(154/375) * 100vw);
        height: calc(calc(177/375) * 100vw);
      }
        .homePage .functions ul li::before{
          width: calc(calc(108/375) * 100vw);
          margin-bottom: calc(calc(4/375) * 100vw);
        }
        .homePage .functions ul li:nth-child(1)::before{
          background-image: url('../img/sp_func_icon1.png');
        }
        .homePage .functions ul li:nth-child(2)::before{
          background-image: url('../img/sp_func_icon2.png');
        }
        .homePage .functions ul li:nth-child(3)::before{
          background-image: url('../img/sp_func_icon3.png');
        }
        .homePage .functions ul li:nth-child(4)::before{
          background-image: url('../img/sp_func_icon4.png');
        }
        .homePage .functions ul li:nth-child(5)::before{
          background-image: url('../img/sp_func_icon5.png');
        }
        .homePage .functions ul li:nth-child(6)::before{
          background-image: url('../img/sp_func_icon6.png');
        }
        .homePage .functions ul li:nth-child(7)::before{
          background-image: url('../img/sp_func_icon7.png');
        }
        .homePage .functions ul li:nth-child(8)::before{
          background-image: url('../img/sp_func_icon8.png');
        }
        .homePage .functions ul li:nth-child(9)::before{
          background-image: url('../img/sp_func_icon9.png');
        }
        .homePage .functions ul li:nth-child(10)::before{
          background-image: url('../img/sp_func_icon10.png');
        }
    .homePage .functions .btn{
      margin-top: calc(calc(40/375) * 100vw);
      width: calc(calc(335/375) * 100vw);
    }
  .homePage .caseStudy{
    margin-top: calc(calc(83/375) * 100vw);
  }
    .homePage .caseStudy .topSecTitle{
      margin-bottom: calc(calc(40/375) * 100vw);
    }
    .homePage .caseStudy .splide{
      max-width: calc(calc(290/375) * 100vw);
      
    }
        .homePage .caseStudy .splide .splide__track::before{
          display: none;
        }
        .homePage .caseStudy .splide .splide__track::after{
          display: none;
        }
      .homePage .caseStudy .splide .splide__pagination{
        position: static;
        margin: calc(calc(49/375) * 100vw) auto 0;
        gap: 0 calc(calc(10/375) * 100vw);
        width: calc(calc(150/375) * 100vw);
      }
      .homePage .caseStudy .splide .splide__pagination__page{
        width: calc(calc(10/375) * 100vw);
        height: calc(calc(10/375) * 100vw);
      }
      .homePage .caseStudy .splide .splide__arrow{
        width: calc(calc(60/375) * 100vw);
        height: calc(calc(60/375) * 100vw);
        background: #004499;
        background: var(--blue_01);
        transform: translateY(0);
        bottom: calc(-1 * calc(calc(23/375) * 100vw));
        top: auto;
      }
        .homePage .caseStudy .splide .splide__arrow::before {
          width: calc(calc(24/375) * 100vw);
          height: calc(calc(21/375) * 100vw);
        }
        @media (hover:hover) {
          .homePage .caseStudy .splide .splide__arrow:hover{
            background: #1B6BD0;
          }
        }
      .homePage .caseStudy .splide .splide__arrow--next{
        right: 0;
      }
      .homePage .caseStudy .splide .splide__arrow--prev{
        left: 0;
      }
      .homePage .caseStudy .caseStadySlideBox a{
        padding: 0 calc(calc(24/375) * 100vw) calc(calc(75/375) * 100vw) calc(calc(24/375) * 100vw);
      }
      .homePage .caseStudy .caseStadySlideBox .tm{
        width: calc(100% + calc(calc(48/375) * 100vw));
        margin-left: calc(-1 * calc(calc(24/375) * 100vw));
      }
      .homePage .caseStudy .caseStadySlideBox h2{
        margin-top: calc(calc(16/375) * 100vw);
      }
      .homePage .caseStudy .caseStadySlideBox ul{
        margin-top: calc(calc(8/375) * 100vw);
        font-size: 1.6rem;
      }
        .homePage .caseStudy .caseStadySlideBox ul li{
          text-indent: -1em;
          margin-left: 1em;
        }
        .homePage .caseStudy .caseStadySlideBox .more::after{
          width: 100%;
          height: calc(calc(1/375) * 100vw);
        }
      .homePage .caseStudy .caseStadySlideBox2 ul{
        display: block;
        max-width: none;
      }
    .homePage .caseStudy .btn{
      margin-top: calc(calc(65/375) * 100vw);
      width: calc(calc(335/375) * 100vw);
    }
  .homePage .faq{
    margin-top: calc(calc(80/375) * 100vw);
    padding: calc(calc(80/375) * 100vw) 0 calc(calc(157/375) * 100vw);
  }
    .homePage .faq .topSecTitle{
      margin-bottom: calc(calc(32/375) * 100vw);
    }
    .homePage .faq .row{
      max-width: calc(calc(335/375) * 100vw);
      margin-inline: auto;
    }
    .homePage .faq .btn{
      margin-top: calc(calc(32/375) * 100vw);
      width: calc(calc(335/375) * 100vw);
    }
/*end*/
}