/*ーーーーーーーーーーーーーーーーーーーーーーーーーー
reset css
ーーーーーーーーーーーーーーーーーーーーーーーーーー*/
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, var, b, i,
dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent}/*supはキャンセル解除*/
html {font-size:62.5%}
body {font-size: 1.6rem; line-height:1.53}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section {display:block}
nav ul, ul, li{list-style:none}
blockquote, q {quotes:none}
blockquote:before, blockquote:after,q:before, q:after {content:'';content:none}
a {margin:0;padding:0;font-size:100%;vertical-align:baseline;background:transparent;color: #363636;text-decoration: none;transition: 0.5s;}
a:hover{opacity: 0.6;}
ins {background-color:#ff9;color:#363636;text-decoration:none}
mark {background-color:#ff9;color:#363636; font-style:italic;font-weight:bold}
del {text-decoration: line-through}
abbr[title], dfn[title] {border-bottom:1px dotted;cursor:help}
table {border-collapse:collapse;border-spacing:0}
hr {display:block;height:1px;border:0;border-top:1px solid #cccccc;margin:1em 0;padding:0}
input, select {vertical-align:middle}
/* body{font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif; color: #363636;} */
body {font-family: "YuGothic", "游ゴシック体", sans-serif; color: #363636;}
body:lang(en){font-family: Helvetica, Verdana, Arial, sans-serif}

.mb10{margin-bottom:10px}.mb20{margin-bottom:20px}.mb30{margin-bottom:30px}.mb40{margin-bottom:40px}.mb50{margin-bottom:50px}.mb60{margin-bottom:60px}.mb70{margin-bottom:70px}.mb80{margin-bottom:80px}.mb90{margin-bottom:90px}.mb100{margin-bottom:100px}
.pb10{padding-bottom:10px}.pb20{padding-bottom:20px}.pb30{padding-bottom:30px}.pb40{padding-bottom:40px}.pb50{padding-bottom:50px}.pb60{padding-bottom:60px}.pb70{padding-bottom:70px}.pb80{padding-bottom:80px}.pb90{padding-bottom:90px}.pb100{padding-bottom:100px}
.mt0{margin-top:0;}.mt10{margin-top:10px}.mt20{margin-top:20px}.mt30{margin-top:30px}.mt40{margin-top:40px;margin-bottom:60px;}.mt50{margin-top:50px}.mt60{margin-top:60px}.mt70{margin-top:70px}.mt80{margin-top:80px}.mt90{margin-top:90px}.mt100{margin-top:100px}
.pt10{padding-top:10px}.pt20{padding-top:20px}.pt30{padding-top:30px}.pt40{padding-top:40px}.pt50{padding-top:50px}.pt60{padding-top:60px}.pt70{padding-top:70px}.pt80{padding-top:80px}.pt90{padding-top:90px}.pt100{padding-top:100px}
.indent1{text-indent:-1em;padding-left:1em;}.indent2{text-indent:-2em;padding-left:2em;}.kome{font-size: 1.3rem;text-indent:-1em;padding-left:1em;}
.bold{font-weight: bold;}
img{vertical-align: top;-webkit-backface-visibility: hidden;width: 100%;}
.ta-center{text-align: center;}
.bs{box-shadow: 0 2px 6px 0px #BFBFBF;}
.ts{text-shadow: 2px 2px 8px #363636;}

/*ーーーーーーーーーーーーーーーーーーーーーーーーーー
style
ーーーーーーーーーーーーーーーーーーーーーーーーーー*/

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

* {
 margin: 0;
 padding: 0;
 box-sizing: border-box;
}

body {
 background-color: var(--bg);
 overflow-x: hidden;
 min-width: 320px;
 background-color: #F9FDFF; 
}

article{
  width: 90vw;
  max-width: 1130px;
  margin: 0 auto;
  padding: 64px 0;
}

.border-line {
  display: block;
  width: 90vw;
  max-width: 1130px;
  border-top: 1px solid #CAC4D0;
  margin: 0 auto;
  padding: 0 5vw;
}

/*カラースタイル定義*/

:root {

 /* Color styles */
 --color-column: #f8f8f8; /* white/light gray placeholder */
 --color-lead: #000000;
 --color-main: #5D5791; /* deep purple placeholder */
 --color-btn: #B3261E; /* deep red placeholder */
 --color-bg: #ffffff;
 --color-main-k: #222222; /* dark gray/black placeholder */
 --color-others: #808080;
 --color-univ-sub: #cccccc;

  /* line-height */
 /* --lh-small: 1.53; */
 --lh-large: 1.78;

 /* letter spacing */
  --ls-minus-xl: -0.10em; /* -10% */
  --ls-minus-s: -0.04em;  /* -4% */
  --ls-zero: 0em;         /* 0% */
  --ls-plus-s: 0.02em;    /* 2% */
  --ls-normal: 0.05em;  /* 5% */
  --ls-wide: 0.1em;   /* 10% */


  /* Font size */
  --fs-tagline: 36px;    /*  h1, tagline */
  --fs-content: 30px;    /*  main content headings */
  --fs-sub-tug: 32px;    /*  sub headings */
  --fs-title: 24px;      /*  section titles */
  --fs-body: 20px;       /*  paragraph text */
  --fs-large: 40px;      /*  特大見出し */


}

@media screen and (max-width: 768px) {
  article{
    padding: 48px 0;
  }

  :root {
    --fs-tagline: 28px; /* 36px -> 28px */
    --fs-content: 24px; /* 30px -> 24px */
    --fs-body: 18px;    /* 20px -> 18px */
    --fs-sub-tug: 26px; /* 32px -> 26px */
    --fs-title: 20px;   /* 24px -> 20px */
  }
}

/*==========================================
ヘッダー
============================================*/
header {
 top: 0;
 display: block;
 width: 100%;
 /* position: fixed; */
 background: #fff;
 z-index: 100;
}
.head {
 width: 90vw;
 height: 90px;
 margin: 0 auto;
 display: flex;
 justify-content: space-between;
 align-items: center;
}
.hamburger, .nav{
 display: none;
}
.head-logo img{
 max-width: 87px;
 margin-left: 3px;
 display: block;
 margin-bottom: 10px;
}
.head-logo h1{
 font-size: 28px;
 line-height: 1;
 white-space: nowrap;
}
/* .head-nav-sp{
 display: none;
} */
.head-nav{
 width: 100%;
 display: none;
}
.head-nav-items{
 display: flex;
 align-items: center;
 justify-content: flex-end;
}
.head-nav-item.nav-close {
 display: none;
}
.head-nav-item{
 margin-left: 50px;
 transition: 0.5s;
 position: relative;
}
.head-nav-item:first-child{
 margin-left: 0;
}
.head-nav-item.head-nav-item_full{
 margin-right: 22.5px;
}
.head-nav-item a::after {
 position: absolute;
 left: 0;
 content: '';
 width: 100%;
 height: 2px;
 background: #585858;
 bottom: 10px; /*アンダーラインが現れ始める位置（aタグの下辺からの高さ）*/
 opacity: 0;
 visibility: hidden;
 transition: 0.5s;
}
.head-nav-item a:hover{
 opacity: 1;
}
.head-nav-item a:hover::after {
 visibility: visible;
 bottom: -3px; /*アニメーションが止まる位置*/
 opacity: 1;
 }
.head-nav-item a{
 color: #585858;
 font-size: 18px;
 font-weight: bold;
}
.head-nav-item .head-inquiry{
 width: 100%;
 height: 45px;
 max-width: 150px;
 padding: 0 10px;
 color: #fff;
 background-color: #585858;
 display: flex;
 justify-content: center;
 align-items: center;
 border-radius: 25px;
}
.head-nav-item .head-inquiry:hover{
 background-color: #ddd;
 color: #585858;
}

.head-nav-item .head-inquiry::after{
 display: none;
}
.head-nav-item .head-inquiry:hover{
 text-decoration: none;
 opacity: 1;
}


/* SPメニュー*/
@media screen and (max-width: 768px) {
 header {
  /* position: fixed; */
 }
 /* body.noscroll{
  height: 100%;
  overflow: hidden;
 } */
 /* .head {
  height: 64px;
  padding: 10px 0;
 } */
 .head-logo img{
  max-width: 65px;
  margin-bottom: 5px;
 }
 .head-logo h1 {
  font-size: 16px;
 }
 .head {
   position: relative;
   z-index: 1001;
   height: initial;
   height: 76px;
  }

  .hamburger {
   display: block;
   position: fixed;
   top: 29px;
   right: 20px;
   z-index: 1100;
   width: 25px;
   height: 19px;
   border: none;
   background: transparent;
   cursor: pointer;
  }

  .hamburger__line {
   position: absolute;
   left: 0;
   width: 25px;
   height: 3px;
   background-color: #424940;
   transition: all .4s;
  }

  .hamburger__line:nth-of-type(1) { top: 0px; }
  .hamburger__line:nth-of-type(2) { top: 8px; }
  .hamburger__line:nth-of-type(3) { top: 16px; }

  .hamburger.active .hamburger__line:nth-of-type(1) {
   transform: translateY(8px) rotate(-45deg);
  }
  .hamburger.active .hamburger__line:nth-of-type(2) {
   opacity: 0;
  }
  .hamburger.active .hamburger__line:nth-of-type(3) {
   transform: translateY(-8px) rotate(45deg);
  }

  .nav {
   display: block;
   position: fixed;
   top: 0;
   left: 0;
   width: 296px;
   height: 100vh;
   background-color: #fff;
   box-shadow: 2px 0 4px rgba(0,0,0,.1);
   transform: translateX(-100%);
   transition: transform .4s;
   z-index: 1001;
   background-color: #FEF7FF;
   border-radius: 16px;
  }

  .nav.active {
   transform: translateX(0);
  }

  .nav__list {
   margin: 0;
   padding: 48px 0 0;
   list-style: none;
  }

  .nav__item {
   padding: 16px 5vw;
  }

  .nav__link {
   display: flex;
   justify-content: flex-start;
   align-items: center;
   text-decoration: none;
   font-weight: 400;
  }

  .nav__link img{
   display: block;
   width: 14px;
   margin-right: 15px;
  }

  /* 黒背景のオーバーレイ */
  .overlay {
   display: none;
   position: fixed;
   z-index: 1000;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background-color: rgba(0,0,0,0.5);
  }

  .overlay.active {
   display: block;
  }
}

/*ヘッダーメニュー*/
.sp-menu{
 display: none;
}
#containerMENU {
 /* height: 112px; */
 margin-left: auto;
 margin-right: auto;
 position: relative;
 /* box-shadow: 0px 5px 5px rgba(0,0,0, 0.16); */
 background-color: #FEF7FF;
}

#containerMENU.m_fixed {
position: fixed;
top: 0;
width: 100%;
z-index: 99;
}

#containerMENU ul {
 width: 90vw;
 max-width: 900px;
 position: relative;
 margin: 0 auto;
 list-style: none;
 display: flex;
 justify-content: space-between;
 align-items: center;
 height: 112px;
 gap: 0 0.43vw;
}

#containerMENU ul li a{
 display: inline-flex;
 justify-content: center;
 align-items: center; 
 width: auto;
 padding: 9px 16px;
 font-size: 14px;
 font-weight: 400;
 line-height: 1;
 color: #fff;
 background-color: #6750A4;
 border-radius: 20px;
 border: solid 2px #6750A4;
}
#containerMENU ul li a:hover{
 background-color: #fff;
 color: #6750A4;
 opacity: 1;
}
#containerMENU ul li.menu_btn2 a{
 background-color: #B3261E;
 border: solid 2px #B3261E;
}
#containerMENU ul li.menu_btn2 a .contact-arrow{
 content: "";
 width: 0;
 height: 0;
 border-style: solid;
 border-width: 5px 0 5px 6.5px;
 border-color: transparent transparent transparent #fff;
 padding-right: 8px;
}
#containerMENU ul li.menu_btn2 a:hover{
 background-color: #fff;
 color: #B3261E;
 opacity: 1;
}
#containerMENU ul li.menu_btn2 a:hover .contact-arrow{
 border-color: transparent transparent transparent #B3261E;
}

@media screen and (max-width: 850px) {
 #containerMENU ul li a{
  padding: 9px 8px;
 }
 #containerMENU ul li.menu_btn2 a span{
 padding-right: 5px;
 }
}
@media screen and (max-width: 768px) {
 #containerMENU{
  display: none;
 }
}

/*==========================================
フッター
============================================*/
footer {
 color: #707070;
 background-color: #E6E7E1;
 padding: 160px 0 20px;
}
.footer-nav {
 display: flex;
 justify-content: space-between;
 max-width: calc(900px + 10vw);
 margin: 0 auto 80px;
 padding: 0 5vw;
}
footer .localnav, footer .footer-logo{
 width: 30%;
}
.localnav li{
 margin-bottom: 30px;
}
.footer-logo img{
 max-width: 185px;
 display: block;
 margin-left: auto;
}
.copyright {
 font-size: 12px;
 text-align: center;
}
@media screen and (max-width: 960px) {
 footer {
  padding: 80px 0 20px;
 }
 .footer-nav {
  display: block;
  margin-bottom: 40px;
 }
 footer .localnav, footer .footer-logo{
  width: 100%;
 }
 .localnav li{
  margin-bottom: 16px;
 }
}



/* ====================================
main-top
==================================== */
/*==========================================
メインビジュアル
============================================*/
.mainvisual-top{
  max-width: 1280px;
  margin: 0 auto;
}
.mainvisual-sp{
 display: none;
}
.mainvisual-pc img{
 display: block;
 width: 100%;
}
@media screen and (max-width: 768px) {
 .mainvisual-pc{
  display: none;
 }
  .mainvisual-sp{
  display: block;
 }
}


/* ==========================================
問い合わせ・資料請求（PC版）
========================================== */

.contact-btns {
  position: fixed;
  bottom: 100px;
  right: 0;
  width: 112px;
  height: 140px;
  color: #fff;
  font-weight: bold;
  font-size: 16px;
  line-height: 1.9;
  text-align: center;
  text-decoration: none;
  border-radius: 15px 0 0 15px;
  padding: 40px 24px;
  box-sizing: border-box;
  z-index: 1000;
  display: flex;
  justify-content: center;
  align-items: center;
  white-space: nowrap;
  background-color: var(--color-btn);
  border: solid 3px var(--color-btn);
  transition: none !important;
  box-shadow: 0px 4px 4px 0px #00000040;
}

/* ホバー*/
.contact-btns:hover {
  background-color: #fff !important;
  color: var(--color-btn) !important;
  opacity: 1;  
  border-right: none;
}
.contact-btns {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transform: translateZ(0);
}

@media screen and (max-width: 768px) {
  .contact-btns {
    bottom: 90px;
    width: 80px;
    height: 100px;
    font-size: 16px;
    line-height: 1.6;
    padding: 15px 5px;
    font-size: 12px;
    border-radius: 10px 0 0 10px;
  }
}


/* ================================
 INTRO (article#intro)
================================ */
article#intro {
  padding-top: 48px;
}

.intro__txt {
  color: var(--color-lead);
  font-size: 30px;
  text-align: center;
  font-weight: 700;
  font-size: 30px;
  letter-spacing: 0.1em;

}

/* Responsive intro */
@media screen and (max-width: 768px) {
  .intro__txt {
    font-size: 24px;
  }
}

/* ================================
 FEATURES
================================ */
article#features {
  text-align: center;
}

/* Titles */
h2.feat__ttl {
  letter-spacing: var(--ls-wide);
  color: var(--color-lead);
  font-size: var(--fs-content);
  font-weight: 700;
  text-align: center;
  margin-bottom: 24px;
  /* font-family: YuGothic; */
}

h1.feat__tag {
  color: var(--color-lead);
  font-size: var(--fs-tagline);
  font-weight: 700;
  letter-spacing: -3px;
  text-align: center;
  margin-bottom: 32px;
  font-family:Noto Serif JP ;
}

h1.feat__tag span {
  letter-spacing: 0;
}

/* Intro text */
.feat__intro {
  max-width: 736px;
  margin: 0 auto;
}

.feat__txt {
  color: var(--color-lead);
  font-size: 24px;
  font-weight: 500;
  line-height: var(--lh-large);
  text-align: left;
  /* font-family: YuGothic; */

}

@media screen and (max-width: 768px) {
  h2.feat__ttl {
    margin-bottom: 16px;
  }
  h1.feat__tag {
    margin-bottom: 28px;
  }
  /* .feat__intro {
    padding: 0 5vw;
    margin-bottom: 30px;
  } */
  .feat__txt {
    font-size: 20px;
    line-height: var(--lh-large);
  }
}

/* ================================
  Challenges
================================ */
article#challenges{
  text-align: center;
}
.chal {
  position: relative;
  padding: 10px;
  gap: 10px;
  overflow: hidden;
}

.chal::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("../../img/challenges-img.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  filter: blur(5px);
  z-index: -1;
}

.chal__list {
  display: flex;
  justify-content: center;
  align-items: stretch;
  gap: 5vw;
  margin: 100px auto;
  padding: 0 5vw;
}

.chal__item {
  /* width: 400px;
  height: 461px;
  transform: rotate(0deg);
  opacity: 1;
  list-style: none;
  padding: 0;
  margin: 0; */
  width: calc(50% - 2.5vw);
  flex: 1;
  display: flex;
  flex-direction: column;
}

.chal__ttl {
  letter-spacing: var( --ls-normal);
  font-weight: 700;
  font-size: 30px;
  background-color: var(--color-main);
  color: var(--color-bg);
}

.chal__content {
  background-color: rgba(255, 255, 255, 0.8);
  flex: 1;
  text-align: left;
  padding: 32px 3vw;
}

.chal__txt {
  font-weight: 700;
  font-size: var(--fs-sub-tug);
  letter-spacing: var( --ls-plus-s);
  color: var(--color-main);
  /* padding: 32px 41px; */
  /* font-family: YuGothic; */
}

.chal__txt + .chal__txt{
  margin-top: 64px;
}

/* 「解決の糸口を探る」ボタン */
.btn-resolve {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  max-width: 450px;
  height: 66px;
  background-color: #B3261E;
  border: solid 3px #B3261E;
  color: #FFFFFF;
  text-decoration: none;
  border-radius: 34px;
  box-shadow: -4px -10px 4px 0px #42000040 inset;
  font-weight: 900;
  font-size: var(--fs-content);
  white-space: nowrap;
  box-sizing: border-box;
  margin-top: 64px;
  letter-spacing: var(--ls-normal);
  text-align: center;
  font-family: Noto Sans JP;
}

.btn-resolve:hover {
  background-color: #fff;
  color: #B3261E;
  opacity: 1;
}

@media screen and (max-width: 768px) {
  .chal__list {
    flex-direction: column;
    gap: 20px;
    margin: 40px auto 30px;
    padding: 0 5vw;
  }
  .chal__item {
    width: 100%;
    height: auto;
  }
  .chal__ttl {
    width: 100%;
    font-size: 24px;
    padding: 10px 15px;
    white-space: normal;
  }
  .chal__content {
    height: auto;
    padding: 20px 5vw
  }
  .chal__txt {
    /* padding: 20px;
    line-height: var(--lh-large); */
  }
  .chal__txt + .chal__txt{
    margin-top: 25px;
  }

  /* Button resolve */
  .btn-resolve {
    max-width: 320px;
    height: 56px;
    margin-top: 48px;
    border-radius: 25px;
  }
}



/*========================================
サービスの特徴　３点
==========================================*/
article#service {
    text-align: center;
}

ul.srv-pnts__list {
    display: flex;
    justify-content: center;
    gap: 3vw;
    margin-bottom: 64px;
}

li.srv-pnts__item {
    /* font-family: "Yu Gothic Pr6N", sans-serif; */
    width: calc(33% - 2vw);
    height: 349px;
    border-radius: 174.5px;
    background-color: #5D5791;
    color: #FFFFFF;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 85px 60px;
    text-align: center;
    
}
p.srv-pnts__ttl {
    /* font-family: YuGothic; */
    font-weight: 700;
    font-size: 40px;
    letter-spacing: var( --ls-minus-xl);
    text-align: center;
    white-space: nowrap;

}

p.srv-pnts__txt {
  font-size: 24px;
  margin-bottom: 5px;
  /* font-family: Yu Gothic Pr6N; */
  letter-spacing:  var(--ls-zero  );
  text-align: center;
  white-space: nowrap;
}
p.srv-pnts__sum {
  /* font-family: Yu Gothic Pr6N; */
  font-weight: 500;
  font-size: var(--fs-body);
  letter-spacing:  var(--ls-zero);
  text-align: left;
  color: #5D5791;
}

@media screen and (min-width: 768px) and (max-width: 1280px) {


  /* サービス */
    ul.srv-pnts__list {
      flex-wrap: wrap; 
    }

    li.srv-pnts__item {
      width: 300px;
      height: 300px;
      padding: 0;
      border-radius: 50%;
    }
}




@media screen and (max-width: 768px) {

  ul.srv-pnts__list { flex-direction: column; gap: 30px; margin-bottom: 100px; padding: 0 5vw; flex-wrap: nowrap;}
  li.srv-pnts__item { width: 250px; height: 250px; padding: 40px 30px; margin: 0 auto; }
  p.srv-pnts__ttl { font-size: 30px; line-height: 1.3; white-space: nowrap; }
  p.srv-pnts__txt { font-size: 20px; white-space: normal; }
}


/*====================================
比較表
======================================*/
div#dev-compare {
  padding-top: 64px;
}
table.compare-table {
    width: 100%;
    height: auto;
    font-size: 20px;
    border: none;
    outline: 1px solid #B4B4B4;
    border-collapse: collapse;

}
.compare-table th,
.compare-table td{  
    border: 2px solid #fff;
    vertical-align: middle; 
}
/* 左右上下の白線をなくす */
.compare-table thead tr:first-child th:first-child {
    border-right:none;
    border-bottom: none;
}
.compare-table tr:last-child th,
.compare-table tr:last-child td {
    border-bottom: none;   
}


.compare-table tr:first-child th {        
    border-top: none;
}
.compare-table tr:last-child td {          
    border-bottom: none;
}
.compare-table th:first-child,
.compare-table td:first-child {           
    border-left: none;
}
.compare-table th:last-child,
.compare-table td:last-child {            
    border-right: none;
}

tr {
    height: 68px; 
    text-align: center;   
}
th {
    width: 221.6px;
    text-align: center;   
}
td {
    font-size: 30px;
}
th.item-col.row {
    background-color: #FFFFFF;
}
th.item-col {
    text-align: left;
    padding: 35px;
    color: #FFFFFF;
    background-color: #A19A95;
}
th.calc-software,
th.no-code,
th.full-scratch {
    background-color: #D3D0CF;
}
th.univ {
    background-color: #C5BDCD;
}
.compare-table tbody tr:nth-child(odd) {
    background-color: #FFFFFF; 
}

.compare-table tbody tr:nth-child(even) {
    background-color: #FAFAFA; 
}
td.univ {
    background-color: #EFEDF1;
}

/* @media screen and (min-width: 768px) and (max-width: 1280px) {
      table {
          width: 100%;
          font-size: 16px;
      }

      table th, table td {
          padding: 12px;
          word-break: break-word; 
      }
} */

@media screen and (max-width: 768px) {
  div#dev-compare {
    overflow-x: auto;
  }
  div#dev-compare img{
    min-width: 700px;
  }
  table.compare-table {
    min-width: 700px;
    font-size: 16px;
  }

  tr {
    height: 50px;
  }

  th {
    width: 150px;
  }

  td {
    font-size: 18px;
  }

  th.item-col {
    padding-left: 15px;
  }
}
/*==========================================
開発スタイル
============================================*/
article#dev {
    text-align: center;
}
h2.dv-ttl {
    /* font-family: YuGothic; */
    font-weight: 700;
    font-size: var(--fs-tagline);
    letter-spacing: var( --ls-minus-s);
    text-align: center;
    margin-bottom: 48px;
}

.devflow,.ct-wrap {
    padding:82px 5vw;
    border-radius: 20px;
    background-color: var(--color-bg);
    border: 1px solid #B4B4B4;
}
h2.df-ttl {
    /* font-family: YuGothic; */
    font-weight: 700;
    font-size: var(--fs-tagline);
    letter-spacing: var(--ls-zero);
    text-align: center;
    margin-bottom: 64px;
}
.dv-img--flow_sp{
  display: none;
}
p.dv-tag {
    /* font-family: YuGothic; */
    font-weight: 700;
    font-size: var(--fs-title);
    letter-spacing: 0.05em;
    text-align: center;
    margin: 24px auto;
}
img.dv-img--sys {
    width: 253px;
}
p.dv-dtl {
    /* font-family: Yu Gothic Pr6N; */
  font-weight: 500;
  font-size: 18px;
  letter-spacing:  var(--ls-zero );
  color: #5D5791;
  text-align: left;
  margin-top: 56px;
}


@media screen and (max-width: 768px) {
  h2.dv-ttl {
      margin-bottom: 36px;
  }
  .devflow,.ct-wrap {
    padding: 40px 5vw;
    border-radius: 10px;
  }
  h2.df-ttl {
    margin-bottom: 48px;
  }
  .dv-img--flow_pc{
    display: none;
  }
  .dv-img--flow_sp{
    display: block;
    max-width: 250px;
    margin: 0 auto;
  }
  p.dv-tag {
    margin: 20px auto;
  }

  img.dv-img--sys {
    width: 70%;
    max-width: 250px;
    height: auto;
    margin: 0 auto;
    display: block;
  }
  p.dv-dtl {
      /* font-family: Yu Gothic Pr6N; */
    font-weight: 500;
    font-size: 16px;
    margin-top: 48px;
  }
}


/* ==================================== 
 開発コスト
==================================== */

article#dev-cost {
    text-align: center;
}
h2.ct-ttl {
    /* font-family: YuGothic; */
    margin-bottom:34px;
    font-size: 36px;
    text-align: center;
    color: #363636;
}
.ct-break {
    display: flex;
    align-items: center;
    gap: 2px;
    justify-content: space-around;
    padding-top: 16px;
}
.ct-box.ct-dev {
    max-height: 160px;
    max-width: 350px;
    padding: 35px 3vw;
    background-color: rgba(190, 222, 243, 0.25);
    white-space: nowrap;
}
.ct-box h4 {
    font-size: 30px;
    color: #363636;
    letter-spacing: 0.05em;
    text-align: center;
    /* font-family: YuGothic; */
}
.ct-box p{
    font-size: 13px;
    color: #363636;
    letter-spacing: -0.03em;
    line-height: 1.85;
    text-align: center;
}
span.ct-plus {
    font-size: var(--fs-tagline);
    font-weight: 700;
    color: #363636;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
}
.ct-box.ct-mon {
    max-height: 160px;
    max-width: 221px;
    padding: 35px 6px;
    background-color: rgba(190, 222, 243, 0.25);
    white-space: nowrap;
}
.ct-box.ct-other {
    max-height: 129px;
    max-width: 287px;
    padding: 10px 63px;
    background-color: rgba(170, 170, 170, 0.25);
    white-space: nowrap;
}

@media screen and (min-width: 768px) and (max-width: 1280px) {
      h2.ct-ttl {
          font-size: 32px;
          margin-bottom: 28px;
          line-height: 1.5;
      }

 
    .ct-break {
        display: flex;
        flex-wrap: wrap;        
        justify-content: center;
        align-items: center;
        gap: 3vw;
    }


    .ct-break > .ct-box {
        flex: 1 1 42%;
        max-width: 450px;
        box-sizing: border-box;
        padding: 25px 3vw !important;
        height: auto !important;
        white-space: normal !important;
        margin: 0;
    }

    .ct-break > .ct-other {
        flex: 1 1 100%;         
        max-width: 280px;      
        order: 999;             
        /* margin-left: auto;
        margin-right: auto; */
    }

    /* .ct-break > .ct-plus:last-of-type {
        flex: 0 0 100%;        
        text-align: center;
    } */

    .ct-box h4 {
        font-size: 24px;
        line-height: 1.4;
        text-align: center;
    }
    .ct-box p {
        font-size: 15px;
        line-height: 1.5;
        text-align: center;
        margin-top: 5px;
    }
    span.ct-plus {
        font-size: 32px;
        margin: 5px 0;
    }
  .border-line {
        max-width: 90%;      
        padding: 0 4vw;
    }

}

@media screen and (max-width: 768px) {
  h2.ct-ttl {
    margin-bottom: 20px;
    font-size: 28px;
  }

  .ct-break {
    flex-direction: column;
    align-items: center;
    gap: 10px;
  }

  .ct-box {
    width: 100%;
    max-width: 350px;
    padding: 3vw 30px !important;
  }

  .ct-box h4 {
    font-size: 24px;
    line-height: 1.5;
    letter-spacing: normal;
  }

  .ct-box p {
    font-size: 14px;
    line-height: 1.6;
    letter-spacing: normal;
    margin-top: 5px;
  }
  .ct-box.ct-mon {
    max-width: 350px;
  }

}

/*==========================================
connection
============================================*/
#connection {
    margin: 0 auto 96px auto;
    padding: 0;
    background-color: #F9FDFF;
    max-width: 1130px;
}


/*==========================================
ページトップへ戻る
============================================*/
.top-btn {
  position: fixed;
  bottom: 24px;
  right: 24px;
  width: 48px;
  height: 48px;
  text-decoration: none;
  border: #585858 solid 1px;
  /* background-color: #FEF7FF; */
  display: block;
  text-align: center;
  border-radius: 24px;
}
.top-btn::before {
  content: "\▲";
  font-family: "Font Awesome 6 Free";
  font-size: 30px;
  font-weight: 900;
  color: #585858;
  line-height: 48px;
}


/*==========================================
関連サービス
============================================*/
#connection .connection_ds202512-01 {
  display: none;
}


/*==========================================
FAQ（解決の糸口を探る）
============================================*/

#faq main {
  margin: 128px auto;
}

#faq .faq-container {
  color: var(--color-main);
  width: 90vw;
  max-width: 900px;
  text-align: left;
  margin: 0 auto;
}

.faq-item {
  margin-bottom: 88px;
}

#faq dt,
#faq dd {
  display: flex;
  justify-content: start;
}

#faq dt,
#faq span {
  font-weight: 700;
  font-size: var(--fs-content);
  letter-spacing: var(--ls-normal);
}

#faq dt {
  margin-bottom: 32px;
}

#faq span {
  display: block;
  padding-right: 15px;
}

#faq dd {
  font-weight: 500;
  font-size: 18px;
  letter-spacing: var(--ls-zero);
}

#faq dd p{
  margin-top: 3px;
}

@media screen and (max-width: 768px) {
  #faq main{
    margin: 88px auto;
  }
  .faq-item {
    margin-bottom: 64px;
  }

  #faq dt {
    margin-bottom: 28px;
  }
}