body{
color: #202933;
}
.header{
    align-content: center;
    align-items: center;
    background: rgba(0,0,0,0.0);
    flex: none;
    flex-direction: row;
    flex-wrap: nowrap;
    height: auto;
    justify-content: center;
    left: 0;
    margin: 0; 
    position: fixed;
    top: 0;
    transform: translate(0px, 0px);
    transition-delay: 300ms;
    width: 100%;
    z-index: 5;
    max-width: 100%;
    background: #FFFFFF;
}

.appear{

    display: flex;
    padding: 20px 40px;
    margin: 0 auto;
    max-width: 1250px;
}

@media screen and (max-width: 768px) {
   .appear{
    padding: 3%;
   }
}

.header_logo{
  max-width: 1250px;
  display: flex;
  justify-content: space-between;
  align-items: center;
 /* transform: scale(1.3);  */ /* 130%に拡大 */
}


.responsive_btn {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  margin: 0 40px 0 0;
  cursor: pointer;
  position: relative;
  z-index: 10;
  background: #202933; 
}


.responsive_btn span {
  transition: all .4s;
  position: absolute;
  background: #fff;
  border-radius: 5px;
  width: 82%;
  height: 3px;
}

.responsive_btn span:nth-of-type(1) {
  top:8.5px;
}
.responsive_btn span:nth-of-type(2) {
  top:17px;
}
.responsive_btn span:nth-of-type(3) {
  top:25px;
}

.responsive_btn.active span:nth-of-type(1),
.responsive_btn.active span:nth-of-type(3){
  top:17px;
}

/*
.menu-header-container{
   position: fixed;
    opacity: 0;
    margin: 0 0 0 auto;
    background: #323232;
     width: 100%; 
    height: 100vh;
    padding-top: 20%;
    position: fixed;
    top: 0;
    transition: .5s; 
}

.menu-header-container.panelactive{
  position: fixed;
  opacity: 1;
  width: 100%;
  height: 100vh;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

*/


.sub-menu{
    display: flex;
    gap: 2em;
    font-size: 1.2em;
  margin: auto;
}

.sub-menu_lists{
  max-width: 1250px;
  margin: 0 0 0 auto;
  display: flex;
  gap: 0 32px;
  right: 0;
}

.sub-menu_lists-sp{
  display: none; 
}

.sub-menu01{
        display: block;
	text-align: center;
	vertical-align: middle;
	text-decoration: none;
	width: 180px;
	margin: auto;
	padding: 0.5em 2em;
	font-size: 1.2em;
	font-weight: bold;
	border: 3px solid #F2691F;
         background-color: #F2691F;
	color: white;
	border-radius: 100vh;
	transition: 0.5s;
}

.sub-menu01:hover {
	color: #fff;
	background: #F2691F;
}
.sub-menu01sp{
    display: block;
	text-align: center;
	vertical-align: middle;
	text-decoration: none;
	width: 180px;
	margin: auto;
	padding: 0.5rem 4rem;
	font-weight: bold;
	border: 4px solid #F2691F;
	color: #F2691F;
	border-radius: 100vh;
	transition: 0.5s;
}

.sub-menu01sp:hover {
	color: #fff;
	background: ##FF731D;
}


.sub-menu02{
        display: block;
	text-align: center;
	vertical-align: middle;
	text-decoration: none;
	width: 180px;
	margin: auto;
	padding: 0.5em 2em;
	font-size: 1.2em;
	font-weight: bold;
	border: 3px solid #F2691F;
	background: #F2691F;
	color: #fff;
	border-radius: 100vh;
	transition: 0.5s;
}

.sub-menu02:hover {
	color: #F2691F;
	background: #fff;
}
.sub-menu02sp{
        display: block;
	text-align: center;
	vertical-align: middle;
	text-decoration: none;
	width: 180px;
	margin: auto;
	padding: 0.5rem 4rem;
	font-weight: bold;
border: 4px solid #F2691F;
    background: #F2691F;
	color: #fff;
	border-radius: 100vh;
	transition: 0.5s;
}

.sub-menu02sp:hover {
	color: #27acd9;
	background: #fff;
}



/*レスポンシブnav始まり*/
@media screen and (max-width: 768px) {
  .appear{
 display: flex;
  }
 .header_logo{
   position: absolute;
   padding-left: 0;
 }
  .responsive_btn {
    position: relative;
    display: flex;
    margin: 0 0 0 auto;
    z-index: 30;
  }
  .header {
    position: relative;
  }
  .menu-header-container{
   position: fixed;
    opacity: 0;
    margin: 0 0 0 auto;
    background: #323232;
     width: 100%; 
   /* height: 100vh; */
    padding-top: 20%;
    top: 0;
    transition: .5s; 
  }
  .menu-header-container.panelactive{
  position: fixed;
  opacity: 1;
 /* z-index:20; */
  width: 100%;
  height: 100vh; 
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  }
  .sub-menu {
    display: none;
  }
  .sub-menu_lists {
    display: none;
  }
  .sub-menu_lists-sp{
    display: block;
    text-align: center;
  }
  .sub-menu_lists-sp li {
    margin: 0 0 40px;
    text-align: center;
  }
  .sub-menu-sp{
    font-size: 20px;
  }
  .sub-menu01sp{
  width: 65%;
  background-color: #FFF;
  }
  .sub-menu02sp{
  width: 65%;
  }
}

/* js function "menuToggle" starting only */
.menu_active {
  right: 0;
}
/*レスポンシブ終わり*/


#contents{
width: 100%;
	width: auto;
	margin: 0 auto;
    clear: both;
    padding-top: 80px;
}

@media screen and (max-width: 768px) {
  #contents{
    padding-top: 0;
  max-width:100%;
 background: url(../img/SOAlp-202408-bg02.png) ;
  }
}

.head{
 position:  relative;        
 background: url(../img/TRlp-top-bg.png) ;
 background-repeat:no-repeat;
 background-position:center;
 background-size:cover;
}

@media screen and (max-width: 768px) {
  .head{
 background: url(../img/TRlp-top-bg.png) ;
   }
}

.heading_box{
 position:relative;
 display:flex;
 max-width: 1250px;
 margin:  0 auto;
 /* overflow: hidden; */
 padding: 8.5em 0 7em;
}

@media screen and (max-width: 768px) {
  .heading_box{
   margin: 0 20px;
   padding: 4em 0 0;
   flex-direction: column;
  flex-wrap: nowrap;
   }
}

.soa-title_box{
   display:flex;
   flex-flow: column;
   z-index: 4; 
   width: 100%;
　 margin-top: auto;
}

@media screen and (max-width: 768px) {
  .soa-title_box{
    align-items: center;
  }
}

.kv_bg{
    left: 59%;
    width: 881px;
    background-image: url(../img/about-img.png) ;
    background-repeat: no-repeat;
    background-position: 100% 90%; 
    background-size: contain;
}

.soa_title{
    display: block;
    justify-content: space-between;	


}

@media screen and (max-width: 768px) {
.soa_title img{
  width: 40%;
  margin: 1em 0 1em;
}
}

.soa_title img{

}

.heading00{
    margin-bottom: 0.9em;

}

.heading00 span{
    color: #fff; 
    /* font-size: 23px; */
    font-weight: 400;
    font-style: normal;
    line-height: normal;
    letter-spacing: 0.01em;
    text-shadow: 0px 0px 9px rgba(23, 70, 162, 0.22);
}

.heading01{
   color: #fff; 
    font-size: 2em;
    font-weight: 700;
    font-style: normal;
    line-height: normal;
    letter-spacing: 0.05em;

}

.heading01 span{
  color: #27acd9;
}

.heading02{
    color: #202933;
    margin: 0 0 20px;
    font-size: 2em;
    font-weight: 700;
    font-style: normal;
    line-height: 0.8;
    letter-spacing: 0.08em;
    text-shadow: 0px 0px 9px rgba(23, 70, 162, 0.22);
}

.heading02 span{
    font-size: 59px;
}

.heading-logo{
    filter: drop-shadow(0px 0px 9px rgba(23, 70, 162, 0.22));
        margin: 0 0 4em;
}

.heading-p{
    font-size: 1.4em;
    color: #fff;
    filter: drop-shadow(0px 0px 9px rgba(23, 70, 162, 0.22));
    width: 40%;
}

@media screen and (max-width: 768px) {
.heading-p{
    width: 100%;
    font-size: 1em;
}

}

.soa_title_p{
  font-size: 18px;
}

.gekkeikan{
  max-width: 278px;
  margin: 1em 0 0.8em; 
}

.gekkeikan02{
    max-width: 278px;
  margin: 0.8em auto 0; 
}


/* FV */
.heading_box {
  display: flex; /* 追加: フレックスボックスで2カラムに分割 */
  padding-bottom: 80px; /* 追加: 新しい要素を表示するための余白を確保 */
}

.left_column {
  flex: 4; /* 左カラムの幅を4に設定 */
}

.right_column {
  flex: 6; /* 右カラムの幅を6に設定 */
  display: flex; /* 追加: フレックスボックスで画像を配置 */
  justify-content: center; /* 追加: 画像を中央揃え */
  align-items: center; /* 追加: 画像を垂直方向に中央揃え */
}

.additional-container {
  width: 100%;
  background-color: #173B47; /* 背景色を #173B47 に設定 */
  padding: 20px 0; /* 上下の余白を設定 */
}

.additional-elements {
  display: flex;
  justify-content: space-between;
  margin: 0 10%; /* 左右のマージンを調整 */
}

.element-text, .btn_01 {
  flex: 1;
  text-align: center;
  color: white; /* テキストの色を白に設定 */
}

.element-text {
  font-size: 19.2px; /* 追加: テキストのフォントサイズを指定（24pxの80%） */
  display: flex; /* 追加: フレックスボックスで要素を配置 */
  justify-content: center; /* 追加: 水平方向に中央揃え */
  align-items: center; /* 追加: 垂直方向に中央揃え */
  text-align: left; /* 追加: テキストを左寄せ */
}

.btn_01 {
  margin-top: 0; /* 追加: 上のマージンを消す */
  margin-left: 10px; /* 左のマージンを追加 */
  margin-right: 10px; /* 右のマージンを追加 */
}

.btn_01 a {
  display: block; /* ボタンをブロック要素に設定 */
  width: 80%; /* ボタンの幅を80%に設定 */
  margin: 0 auto; /* ボタンを中央揃え */
}

.btn_01:last-child {
  margin-right: 10px; /* 最後のボタンの右マージンを10pxに設定 */
}

.image-container-top img {
  width: 130%; /* 画像の幅を現在の130%に設定 */
}

.heading-logo {
  width: 115%; /* ロゴの幅を現在の115%に設定 */
}

.heading00 {
  font-size: 30px; /* 「世界で1万社以上が支持する」の文字を30pxに設定 */
}

.heading01 {
  font-size: 28px; /* 「テスト管理ツール」の文字を28pxに設定 */
}

.pc_img {
  margin-bottom: 20px; /* 画像の下に余白を確保 */
}

.pc_img01 {
  width: 100%; /* 画像の幅を100%に設定 */
  max-width: 814px; /* 最大幅を設定 */
}




/* 縦3つ */
.btn_01{
/*  margin: 4em 0 0; */
}

@media screen and (max-width: 768px) {
.soa-top_link{
}
.btn_01{
margin: 1em 0 0;
}
}

.CTA-top_box{
position: relative;
display: block;
text-align: center;
vertical-align: middle;
text-decoration: none;
width: 25%;
height: 75px;
/* padding: 0 4em; */
font-size: 1.8em;
font-weight: bold;
line-height: 75px;
border: 5.5px solid #F2691F;
/* background: #F2691F; */
color: #FFFFFF; 
border-radius: 100vh;
-webkit-transition: all .3s;
transition: all .3s;
box-shadow: 4px 4px 8px 0 rgba(0, 0, 0, .2);
}

.CTA-top_box:hover{
transform: scale(0.95,0.95);
opacity: 1.0;
}

.CTA-top_box::after{
content: '';
display: inline-block;
width: 26px;
height: 26px;
position: absolute;
top: 32%;
right: 20px;
/* background: url(../img/btn-r-w.svg) no-repeat center / contain; */
}

@media screen and (max-width: 768px) {
.CTA-top_box{
width: 80%;
padding: 0 1em;
font-size: 1.2em;
line-height: 2em;
height: 2em;
margin: auto;
}
.CTA-top_box::after{
width: 17px;
height: 17px;
top: 23%;
}
}

/* トライアルお申込みボタンの特別なスタイル */
.trial-button {
  background: #F2691F;
 color: white;
}

/* 製品資料ダウンロードボタンの擬似要素を削除 */
.btn_01:nth-child(3) .CTA-top_box::after {
  display: none;
}

/* 製品資料ダウンロードの特別なスタイル */
.seihinsiryou {
  border: 4px solid #FFFFFF;
}

.top-btn-guide {
width: 540px;
}

.top-link_btn{
padding: 0.6em 3em;
-webkit-box-pack: center;
justify-content: center;
-webkit-box-align: center;
align-items: center;
text-decoration: none;
}

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

padding: 0.8em 2em;
}
}

.bg-top-link{
box-sizing: border-box;
width:40%;
background-color: #F2691F;
border: 3px solid #F2691F;
border-radius: 9999px;
font-size: 1.7em;
font-weight: bold;
color: #fff;
display: flex;

}

.bg-top-link:hover {
color: #F2691F;
background: #fff;
}

.bg-top-link_02{
box-sizing: border-box;
width:100%;
background-color:#fff;
padding: 0.7em 7em;
border: 2px solid #005A9E;
border-radius: 9999px;
font-size: 16px;
font-weight: bold;
color: #005A9E;
display: flex;
-webkit-box-pack: center;
justify-content: center;
-webkit-box-align: center;
}

.bg-top-link_02:hover {
color: #fff;
background: #005A9E;
}

.top-btn-guide {
width: 540px;
position: relative;
text-align: center;
}

.top-btn-guide_p-img {
width: 70%;
position: absolute;
top: -36px;
right: 100px;
}

@media screen and (max-width: 768px) {
.top-btn-guide_p-img {
width: 70%;
position: absolute;
top: -36px;
right: 85px;
}
.bg-top-link {
width:100%;
margin: 0 auto;
background-color: #F2691F;
border: 3px solid #F2691F;
font-size: 1em;
}
}

.gekkeikan-top{
width: 150px;
}

.pc_img{
margin: -2% 0 0 2%;
position: absolute;
width: 800px;
box-sizing: border-box;
/* top: 4em;
right: -76px; */
}

.pc_img_mo{
display: none;
}

.pc_img_mo img {
width: 80%;
}

.pc_img_sp{
display: none;
}

@media screen and (max-width: 768px) {
.pc_img{
display: none;
}
.pc_img_mo{
display: none;
}
/*
.pc_img_sp_bg{
background: url(../img/SOAlp-202408-bg02.png) ;
}
*/
.pc_img_sp{
display: block;
width: 73%;
margin-left: auto;
margin-right: auto;
padding-top: 2em;
}
}

.pc_img01{
width: 814px;
position: absolute;
/* right: -66%; /
/* left: -20%; /
top: 26%;
/ margin-top: 4.5em; /
/ margin-left: 1em; /
/ margin-bottom: 0; */
}


.pc_img02{
  width: 350px;
  position: absolute;
  top: 1%;
  right: -11px;
}


.pc_img03{
 width: 350px;
position: absolute;
top: 18%;
    right: 350px;
}


.top-parasoft{
    margin-top: 6.5em;
    margin-left: 1.3em;
    font-size: 1.2em;
    color: #fff;
    filter: drop-shadow(0px 0px 9px rgba(23, 70, 162, 0.22));
}

.top-parasoft-sp{
   display: none;
}


.top-parasoft p{

}





@media screen and (max-width: 768px) {
.top-parasoft{
   display: none;
}
.top-parasoft-sp{
        display: block;
    margin-top: 1.5em;
    margin-bottom: 1em;
   /* margin-left: 1.3em; */
    font-size: 0.8em;
    color: #fff;
    filter: drop-shadow(0px 0px 9px rgba(23, 70, 162, 0.22));
}
}



.tmx-link_soa {
   position: relative;
  display: inline-block;
  padding-left: 1.5em;
  color: #fff;
    font-size: 1.1em;
    font-weight: 500;
}


.tmx-link_soa::before {
    content: '';
  width: 18px;
  height: 18px;
  background: #fff;
  border-radius: 50%;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  margin: auto;
}

.tmx-link_soa:after {
  content: '';
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 4px 0 4px 6px;
  border-color: transparent transparent transparent #1746a2;
  position: absolute;
  top: 0;
  left: 6px;
  bottom: 0;
  margin: auto;
}


.dli-caret-circle-fill-right {
  display: inline-block;
  vertical-align: middle;
  color: #fff;
  line-height: 1;
  position: relative;
  width: 0.8em;
  height: 0.8em;
  border: 0.075em solid currentColor;
  background: currentColor;
  border-radius: 50%;
  box-sizing: content-box;
}

.dli-caret-circle-fill-right::before {
  content: '';
  color: #1746a2;
  width: 0;
  height: 0;
  border-style: solid;
  border-color: transparent;
  border-width: 0.18em 0.31177em;
  border-left-color: currentColor;
  border-right: 0;
  transform: translateX(15%);
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}

@media screen and (max-width: 768px) {
.tmx-link_soa {
   position: relative;
  display: inline-block;
  padding-left: 1.5em;
  color: #fff;
    font-size: 1em;
    font-weight: 500;
}
.tmx-link_soa::before {
  width: 15px;
  height: 15px;
}
}




.award02{
    display: flex;
    width: 220px;
    gap: 0 30px;
    margin: 2em 0 0;
}

@media screen and (max-width: 768px) {
  .award02{
   display: flex;
   justify-content: center; 
   margin: 0;
   padding: 2em;
  }
  .award02 img{
  width: 15em;
  padding: 10px 0;
  }
}


.award{
position: absolute;
display: flex;
justify-content: center;
width: 15%;
top: 65px;
right: 220px;
}

.award img{
 margin-right: 0.8em;
}

.fadeIn {
  transform: translate3d(0, -50px, 0);
  transition: 1.5s;
  opacity: 0;
}

.fadeIn.animated {
  transform: translate3d(0, 0, 0);
  opacity: 1;
}

.fadeIn02{
  transform: translate3d(0, -50px, 0);
  transition: 2.8s;
  opacity: 0;
}

.fadeIn02.animated {
  transform: translate3d(0, 0, 0);
  opacity: 1;
}



/*導入企業*/
.client{
    display: block;
    text-align: center;
   /* background-color: #202933; */
    padding: 10px 0;
}

.client_no-slider{
    display: block;
    text-align: center;

}

.client_no-slider-inner{
display: flex;
    justify-content: space-around;
    max-width: 1250px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 1em; 
}

.client_no-slider-inner02{
display: flex;
    justify-content: space-around;
    max-width: 1250px;
    margin-left: auto;
    margin-right: auto;
}

.client img{

    width: auto;
    max-width: 100%;
}

.client h2{
color: #fff;
 margin: 0 auto 10px; 
  font-size: 25px;
   font-weight: 700;
    letter-spacing: 0.1em;
}

@keyframes infinity-scroll-left {
from {
  transform: translateX(0);
}
  to {
  transform: translateX(-100%);
}
}

.client_slider{
display: flex;
  overflow: hidden;
  margin: 0.7em auto 0.7em;
}

.client_slider-list{
 display: flex;
  list-style: none;
  padding: 0;
}

.scroll-infinity__list--left {
animation: infinity-scroll-left 80s infinite linear 0.5s both;
}

.client_slider__item{
width: calc(100vw / 6);
}



@media screen and (max-width: 768px) {
  .client_slider__item {
    width: calc(100vw / 3);
   }
}

span.smoothText {
  overflow: hidden;
  display: block;
}

span.smoothTextTrigger{
  transition: .8s ease-in-out;
  transform: translate3d(0,100%,0) skewY(12deg);
  transform-origin: left;
  display: block;
}

span.smoothTextTrigger.smoothTextAppear{
    transform: translate3d(0,0,0) skewY(0);
}


/* セミナーバナー貼り付け用 */
.semi_link{
    display: flex;
    justify-content: center;
    max-width: 1250px;
    margin-left: auto;
    margin-right: auto;
margin-top: 4em;
    margin-bottom: 7em;
}




/* SOAtestとは */
section.whats-soatest {
    border-top: 1px solid #D5DCE6;
}

.whats-soatest_title {
   text-align: center;
    font-weight: 700;
    font-size: 5.6em;
    /* line-height: 50px; */
    letter-spacing: 1.5px;
    margin: 2em 0 0.6em;
}

.whats-soatest_title_span {
    position: relative;
    display: inline-block;
}

.whats-soatest_title_span::after{
    position: absolute;
    bottom: .2em;
    left: 0;
    z-index: -1;
    display: block;
    width: 100%;
    height: 14px;
    border-radius: 10px;
    background: #80B1F7;
    content: "";
}

.whats-soatest_link{
    display: flex;
    justify-content: center;
    max-width: 1250px;
    margin-left: auto;
    margin-right: auto;
margin-top: 4em;
    margin-bottom: 7em;
}

.whats-soatest_p{
    text-align: center;
    font-size: 1.4em;
}

@media screen and (max-width: 768px) {
section.whats-soatest {
        margin: 0 20px;
}
.whats-soatest_title {
    font-size: 2.6em;
}
.whats-soatest_p {
font-size: 1.4em;
}
.whats-soatest_link{
        margin: 1em 0;
}
}


/* アピールエリア */
.appeal{
display: block;
  margin: 3em 0 2em;
position: relative; 
}



.appeal_title{
   text-align: center;
    font-weight: 700;
    font-size: 48px;
    line-height: 50px;
    letter-spacing: 1.5px;
    margin: 4em 0 2em;
}

@media screen and (max-width: 768px) {
.appeal{
margin: 0 20px;
}
  .appeal_title{
   margin: 2.5em 0 1.8em;
   }
}


.appeal_title_p::before{
 position: absolute;
    top: 17px;
    width: 8px;
    height: 8px;
    background: #005A9E;
    content: "";
}

.appeal_title b{
   color: #fab700;
}

.appeal_area{
 display:flex;
 justify-content: space-between;
 max-width: 1250px;
 margin-left: auto;
 margin-right: auto;
}
@media screen and (max-width: 768px) {
   .appeal_area{ 
   display: block; 
   }
}



.appeal_box {
 text-align: center;
    margin: 1em 2em 3em;
    width: 600px;
}



.appeal_box p{
    margin: 0.8em 0 0;
    font-size: 16px;
}

.appeal_box h2{
font-size: 23px;
 font-weight: 700;
    margin: 0.8em 0 0;
}

@media screen and (max-width: 768px) {
.appeal_box {
margin: 0 auto;
width: 80%;
}
}

.js-fade{
    opacity: 0;
    visibility: hidden;
    transform: translateY(50px);
    transition: opacity 1.5s,visibility 1.5s, transform 1.5s;
}


.img-area{
  margin: 0 0 2em;
}

.ex::before{
content: "";
    position: absolute;
   /* top: 0; */
    left: 50%;
    transform: translateX(-50%);
    display: inline-block;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 70px 175px 0 175px;
    border-color: #fff transparent transparent transparent;
}

.appeal02_title::before{
content: "";
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    display: inline-block;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 70px 175px 0 175px;
    border-color: #fff transparent transparent transparent;
}

.appeal02{
  display: block;
  margin: 7em 0 0; 
  padding-bottom: 6em;
  background-color: #E8F1FF;
}

.appeal02_title{
 text-align: center;
    font-weight: 700;
    font-size: 40px;
    line-height: 44px;
    letter-spacing: 1.5px;
    padding: 2em 0; 
    background-color: #173B47;
}

.appeal02_title02{
 text-align: center;
    font-weight: 700;
    font-size: 40px;
    line-height: 44px;
    letter-spacing: 1.5px;
    padding: 2.7em 0 1.8em;
    margin-top: 80px;
}

.appeal02_title02 p{
 
}

.appeal02_title02::after{
/*   position: absolute;
    bottom: .2em;
    left: 0;
    z-index: -1;
*/
    display: block;
    width: 14%;
    height: 9px;
    border-radius: 10px;
    background: #80B1F7;
    content: "";
margin: 0.5em auto 0;
}


.appeal02_inner {
display: block;
    width: 1400px;
    margin: 0 auto;
border-radius: 20px;
    background-color: #fff;
    padding-bottom: 6em;
}

.appeal02_title{
 text-align: center;
    font-weight: 700;
    font-size: 40px;
    line-height: 44px;
    letter-spacing: 1.5px;
   padding: 3em 0 2em; 
}

.appeal_title_n{
    border-top: 1px solid rgb(227, 227, 227);
    text-align: center;
    font-weight: 700;
    font-size: 43px;
    line-height: 44px;
    letter-spacing: 1.5px;
    padding: 3em 0 2em;
}

@media screen and (max-width: 768px) {
.appeal02_inner {
    width: 100%;
}
.appeal02_title02{
    padding: 2em 0.6em 1em;
    font-size: 35px;
}
.appeal02_title::before{
    border-width: 50px 100px 0 100px;
}
.appeal02_title{
    font-size: 2em;
   padding: 3em 0 1em; 
}
.appeal_title_n{
    font-size: 2em;
    padding: 2em 0 1em;
}
}

/* ノーコードAPIテストツール SOAtestとは？ */
.ex{
  display: block;
  margin: 7em 0 0; 
  background-color: #edf1fa;
}

.ex_inner{
}

@media screen and (max-width: 768px) {
.ex{
  margin: 4em 0 0; 
}
  .ex_inner{
  margin: 0 20px;
  position: relative;
  padding-bottom: 4em;
  }
}

/*
.ex_title{
    border-top: 1px solid rgb(227, 227, 227);
    text-align: center;
    font-weight: 700;
    font-size: 43px;
    line-height: 44px;
    letter-spacing: 1.5px;
    padding: 3em 0 2em;
}
*/


/* タイトル飾り */
.headind-label{
   color: #005A9E;
    font-size: 15px;
    font-weight: 400;
    height: auto;
    line-height: 1.4;
    text-align: center;
    width: auto;
    max-width: 100%;
    justify-content: center;
 margin-bottom: 2em;
}

.box_ex-img-area {
 display:flex;
 justify-content: space-between;
 max-width: 1250px;
 margin-left: auto;
 margin-right: auto;
 margin-bottom: 6em;
}

@media screen and (max-width: 768px) {
  .box_ex-img-area {
      display: block;
        margin: 0 20px;
   }
}

.ex-img-area{
/* width: 100%; */
/* height: 30vw; */
overflow: hidden;
}

@media screen and (max-width: 768px) {
   .ex-img-area{
   display: block;
   margin: 1em auto 0;
   padding: 0;
   overflow: visible;
   width: 100%;
   height: auto;
   }
}


.ex-img-area img{
    padding-left: 2.5em;
    width: 100%;
}

@media screen and (max-width: 768px) {
   .ex-img-area img{
   overflow: visible;
   padding: 0;
   }
}


.ex-text{
    font-size: 1.4em;
   font-weight: 700;
  /* width: 100%; */
line-height: 1.7;
    text-align: center;
}

@media screen and (max-width: 768px) {
   .ex-appeal{
        margin: 0 20px;
　}
   .ex-text{
   font-size: 1em;
   }
}

.ex-appeal-box {
    max-width: 1250px;
    margin-left: auto;
    margin-right: auto;
}

.ex-appeal-area {
position: relative;
    overflow: hidden;
    padding: 1.75rem 2rem 2.75rem 130px;
    word-break: break-all;
    border-top: 3px solid #0A1F47;
    border-radius: 12px 0 0 0;
    margin-top: 1.8em;
    /* margin-bottom: 1.1em; */
    /* width: 1100px; */
    font-size: 2em;
    font-weight: 700;
}


.ex-appeal-area span {
  font-size: 40px;
  font-size: 4rem;
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  padding: 3px 20px;
  color: #fff;
  border-radius: 10px 0 20px 10px;
  background: #0A1F47;
}

.ex-appeal-area-contents{
  display: flex;
gap: 6em;
}

.ex-appeal-area-contents span{
    color: #ED7839;
    font-weight: 700;
}

.ex-appeal-area-contents p{
    font-size: 1.4em;
    font-weight: 500;
margin-top: auto;
    margin-bottom: auto;
    padding-left: 5em;
}

.ex-appeal-area-contents img{
    width: 470px;

}

.ex-img_shot {
    padding-left: 3em;
    width: 50%;
    aspect-ratio: 1828 / 1179;
    object-fit: contain;
}

@media screen and (max-width: 768px) {
.ex-appeal-area span {
    font-size: 3rem;
    padding: 2px 14px;
}
  .ex-img_shot {
    padding-left: 0;
    width: 100%;
    aspect-ratio: 1828 / 1179;
    object-fit: contain;
   }
.ex-appeal-area {
padding: 1.3rem 2rem 2.75rem 3.2em;
font-size: 1.8em;
}
.ex-appeal-area-contents{
        display: block;
}
.ex-appeal-area-contents p{
    font-size: 1em;
    padding: 0;
}
}

.ex_inner{
    background-color: #edf1fa;
padding-bottom: 7.5em;
}

.ex_inner02{
    background-color: #fcfbf4;
}

.ex_contents{
 max-width: 1250px; 
 margin-left: auto;
 margin-right: auto;
 padding: 0 0 8em; 
}

.ex_contents02{
 max-width: 1250px; 
 margin-left: auto;
 margin-right: auto;
 padding: 0 0 1em; 
}

@media screen and (max-width: 768px) {
   .ex_contents{
    position: relative;
    overflow: visible;
    display: flex;
    flex-flow: column;
   padding: 4em 0 4em;
   }
}


.appeal03_title03{
 text-align: center;
    font-weight: 700;
    font-size: 40px;
    line-height: 44px;
    letter-spacing: 1.5px;
    padding: 1.8em 0 1em;
}

.appeal03_title03::after{
/*   position: absolute;
    bottom: .2em;
    left: 0;
    z-index: -1;
*/
    display: block;
    width: 3em;
    height: 9px;
    border-radius: 10px;
    background: #80B1F7;
    content: "";
margin: 0.5em auto 0;
}



.ex-detail_box{
 display:flex;
 gap: 3em;
 margin-bottom: 3em;
 justify-content: center;
 align-items: center; 
 box-sizing: border-box; 
}
@media screen and (max-width: 768px) {
   .ex-detail_box{
   margin: 0 auto; 
    display: flex;
    flex-flow: column;
    gap: 2em;
   }
}

.ex-detail_box02{
 display:flex;
 gap: 3em;
 margin-bottom: 3em;
 justify-content: center;
 align-items: center;
 box-sizing: border-box; 
}
@media screen and (max-width: 768px) {
   .ex-detail_box02{
    display: flex;
    flex-flow: column;
    gap: 2em;
   padding-top: 2em;
   }
}

.ex-detail_area{
 /*  margin: 1em 1.5em;  */
 background-color: #fff;
 padding: 1.5em 1.5em;
 border-radius: 1.2vh;
  box-shadow: 0 0 14px 1px rgba(0,0,0,.1);
 max-width: 410px;
width: 380px;
}
@media screen and (max-width: 768px) {
   .ex-detail_area{
     margin: 0 auto; 
   }
}

.ex-detail_contents{
display:flex;
justify-content: space-between;
margin: 0 auto 1em 0;
}

.ex-detail_contents img{
width: 65px;
height: 65px;
/* margin: 0 1em; */
}

.ex-detail_contents p{
   font-size: 18px;
   font-weight: 700;
 margin:  auto auto auto 1em;
}

.ex-detail_contents_p{
   font-size: 16px;
}


/* 最初のCTA */
.CTA-first {
    background-color: none;
    padding: 3.5em 0;
}

.CTA-first_inner_title {
    text-align: center;
    padding-bottom: 1.2em;
    color: #fff;
    font-size: 2.5em;
    font-weight: 700;
}

.CTA-first_inner {
    display: flex;
    justify-content: center; 
    gap: 20px;
    width: 1260px;
    margin: 0 auto;
}

.CTA-first_box {
    background-color: #173B47;
    position: relative;
    display: block;
    text-align: center;
    vertical-align: middle;
    text-decoration: none;
    width: 500px; /* ボタンの横幅を1.5倍に設定 */
    height: 75px;
    margin: auto;
    padding: 0.5em 1em;
    font-size: 1.8em;
    font-weight: bold;
    line-height: 75px;
    color: #fff; /* ボタンの文字色を変更 */
    border-radius: 100vh;
    -webkit-transition: all .3s;
    transition: all .3s;

}

.CTA-first_box:hover {
    transform: scale(0.92,0.92);
    opacity: 1.0;
}

.CTA-first_box span {
    display: block;
    font-size: 0.8em;
    line-height: 1.3;
    width: 540px;
    color: #0A1F47;
}

.CTA-first_box02 {
    position: relative;
    display: block;
    text-align: center;
    vertical-align: middle;
    text-decoration: none;
    width: 540px; /* ボタンの横幅を1.5倍に設定 */
    height: 75px;
    margin: auto;
    padding: 0.8em 4em;
    font-size: 1.8em;
    font-weight: bold;
    line-height: 75px;
    border: none; /* オレンジ色のボタンの枠線を消す */
    background: #202933; /* ボタンの色を変更 */
    color: #fff; /* ボタンの文字色を変更 */
    border-radius: 100vh;
    -webkit-transition: all .3s;
    transition: all .3s;
}

.CTA-first_box02:hover {
    transform: scale(0.92,0.92);
    opacity: 1.0;
}

@media screen and (max-width: 768px) {
    .CTA-first {
        width: 100%;
    }

    .CTA-first_inner {
        display: block;
        width: 100%;
    }

    .CTA-first_box {
        font-size: 1.2em;
        height: 20px;
        line-height: 1.2em;
        margin: auto;
        margin-bottom: 1em;
        width: 540px; /* ボタンの横幅を1.5倍に設定 */
        border: 4.5px solid #F2691F;
    }

    .CTA-first_box span {
        display: initial;
    }

    .CTA-first_box02 {
        font-size: 1.2em;
        height: 20px;
        line-height: 1.2em;
        width: 540px; /* ボタンの横幅を1.5倍に設定 */
        border: none; /* オレンジ色のボタンの枠線を消す */
    }
}




/* 中間アピール */


.appeal-middle {
  background-color: #173B47;
  color: white;
  text-align: center;
  padding: 1em 0 1em;
}

.appeal-middle_inner_title {
  color: white;
  font-size: 2em; /* h2のフォントサイズは通常2emです */
  padding-top: 30px; /* 上部に余白を追加 */
  padding-bottom: 30px; /* 下部に余白を追加 */
}

.image-container {
  margin-top: 30px;
  margin-bottom: 30px;
}

/* 画像サイズとマージンの調整 */
.image-container img {
  width: 160px;
  height: auto; /* アスペクト比を保つ */
  margin: 0 10px; /* 左右に10pxのマージンを追加 */
}



/* 中間オンプレクラウドアピール */
.onprecloud-appeal {
  display: flex; /* フレックスボックスを使用して中央寄せ */
  justify-content: center; /* 水平方向の中央寄せ */
  align-items: center; /* 垂直方向の中央寄せ */
  /* height: 100vh; */ /* 画面全体の高さを使用 */
}

.onprecloud-appeal-content {
  text-align: center; /* 文字を中央寄せ */
}

.onprecloud-appeal-content h2 {
  font-size: 30px; /* すべての文字の大きさを30pxに設定 */
  padding: 30px 0; /* h2の上下に30pxのパディングを追加 */
}

.highlight {
  border-bottom: 2px solid #FFB05B; /* オレンジ色の下線を追加 */
  font-weight: bold; /* 太字に設定 */
}


/* 中間CTA */
.CTA-middle{
    background-image: linear-gradient(90deg, rgba(255, 176, 91, 1), rgba(255, 214, 170, 1));
    padding: 3.5em 0;
}
.CTA-middle_inner_title{
/* text-align: center; */
/* padding-bottom: 1.2em; */
    padding-left: 100px;
    color: #fff;
    font-size: 2.5em;
    font-weight: 700;
}
.CTA-middle_inner_title img {
  margin-bottom: 20px; /* 画像とテキストの間隔を調整する値 */
}
.CTA-middle_inner{
   display: flex;
    justify-content: center; 
   gap: 20px;
   width: 1260px;
    margin: 0 auto;
}
.CTA-middle_box{
position: relative;
    display: block;
    text-align: center;
    vertical-align: middle;
    text-decoration: none;
    width: 360px;
    height: 75px;
    margin: auto;
    padding: 0.8em 4em;
    font-size: 1.8em;
    font-weight: bold;
    line-height: 75px;
    border: 5.5px solid #F2691F;
    background: #fff;
    color: #F2691F;
    border-radius: 100vh;
  -webkit-transition: all .3s;
  transition: all .3s;
}

.CTA-middle_box:hover{
  transform: scale(0.92,0.92);
  opacity: 1.0;
}

.CTA-middle_box::after{
    content: '';
    display: inline-block;
    width: 26px;
    height: 26px;
   position: absolute;
  /*  top: 50%; */
    right: 20px;
    background: url(../img/btn-r-o.svg)  no-repeat center / contain;
}
/*
.CTA-middle_box::after{
    content: '';
    border: 0;
    border-top: solid 2px #F2691F;
    border-right: solid 2px #F2691F;
    display: inline-block;
    width: 10px;
    height: 10px;
    position: absolute;
    top: 50%;
    right: 20px;
    transform: translateY(-50%) rotate(45deg);
}
*/
.CTA-middle_box span{
    display: block;
    font-size: 0.8em;
line-height: 1.3;
    width: 360px;
    color: #0A1F47;
}
.CTA-middle_box02{
position: relative;
    display: block;
    text-align: center;
    vertical-align: middle;
    text-decoration: none;
    width: 360px;
    height: 75px;
    margin: auto;
    padding: 0.8em 4em;
    font-size: 1.8em;
    font-weight: bold;
    line-height: 75px;
    border: 5.5px solid #F2691F;
    background: #F2691F;
    color: #fff;
    border-radius: 100vh;
  -webkit-transition: all .3s;
  transition: all .3s;
}
.CTA-middle_box02:hover{
  transform: scale(0.92,0.92);
  opacity: 1.0;
}
.CTA-middle_box02::after{
    content: '';
    display: inline-block;
    width: 26px;
    height: 26px;
   position: absolute;
   top: 40%; 
    right: 20px;
    background: url(../img/btn-r-w.svg)  no-repeat center / contain;
}

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

.CTA-middle{
width: 100%;
}
.CTA-middle_inner {
display: block;
width: 100%;
}
.CTA-middle_box{
    font-size: 1.2em;
        height: 20px;
        line-height: 1.2em;
        margin: auto;
        margin-bottom: 1em;
       /* margin-bottom: 1em; */
    border: 4.5px solid #F2691F;
}
.CTA-middle_box::after{
    width: 16px;
    height: 16px;
}
.CTA-middle_box span{
display:initial;
}
.CTA-middle_box02{
    font-size: 1.2em;
height: 20px;
        line-height: 1.2em;
    border: 4.5px solid #F2691F;
}
.CTA-middle_box02::after{
    width: 16px;
    height: 16px;
}

}
/* でテスト管理の効率化を今すぐ始めよう！ */
.CTA-middle_inner_title h2 {
  color: #173B47;
  /* text-indent: -3.5em; */ /* インデントをさらに負の値に調整 */
  display: inline-block;
 /*  margin-left: 2em; */ /* 左マージンを適用して調整 */
}

/* 中間アピール */
.appeal-middle {
  background-color: #173B47;
  color: white;
  text-align: center;
}

.appeal-middle_inner_title {
  color: white;
  font-size: 2em; /* h2のフォントサイズは通常2emです */
  padding-top: 30px; /* 上部に余白を追加 */
  padding-bottom: 30px; /* 下部に余白を追加 */
}

.image-container {
  margin-top: 30px;
  margin-bottom: 30px;
}

/* idによる画像サイズの調整 */
#connpany,
#user,
#G2Grid {
  width: 115%;
  height: auto; /* アスペクト比を保つ */
}
これで、

/* サポート内容 */
.support {
    background-color: #edf1fa;
    padding-bottom: 6em;
}

.support-detail_area {
    display: flex;
    gap: 2em;
    max-width: 1250px;
    margin-left: auto;
    margin-right: auto;
}


.support-detail_box {
    border-radius: 8px;
    /* box-shadow: 0 0 10px 1px rgba(0, 0, 0, .1); */
    background-color: #fff;
    border: 4px solid rgb(227, 227, 227);
    display: block;
    position: relative;
    width: 700px;
}
.support-detail_img{
display: block;
    margin-top: 2em;
    margin-right: auto;
    margin-left: auto;
    width: 40%;

}

.support-detail_info {
    padding: 1.3em 1.6em;
    font-size: 16px;
}

.support-detail_info h4 {
    text-align: center;
    padding-bottom: 0.8em;
    font-size: 1.9em;
}

.support-detail_info span{
    font-weight: 700;
    color: #ED7839;
    border-bottom: solid 2px;
}

@media screen and (max-width: 768px) {
.support {
    padding-bottom: 2em;
}
.support-detail_area {
        display: block;
        width: 100%;
}
.support-detail_box {
        width: 90%;
        margin: auto;
        margin-bottom: 1.2em;
}
}

/* アコーディオン */
.accordion-001 {
    max-width: 500px;
margin-right: auto;
    margin-left: auto;
   /* background-color: #fff; */
}

.accordion-001:not([open]) {
    margin-bottom: 7px;
}

.accordion-001 summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    padding: 1em 2em;
    border-radius: 5px;
    background-color: #1746A2;
    color: #fff;
    font-size: 1.2em;
    font-weight: 600;
    cursor: pointer;
}

.accordion-001 summary::-webkit-details-marker {
    display: none;
}

.accordion-001 summary::after {
    transform: translateY(-25%) rotate(45deg);
    width: 7px;
    height: 7px;
    margin-left: 10px;
    border-bottom: 3px solid #fff;
    border-right: 3px solid #fff;
    content: '';
    transition: transform .3s;
}

.accordion-001[open] summary::after {
    transform: rotate(225deg);
}

.accordion-001 p {
    transform: translateY(-10px);
    opacity: 0;
    margin: 0;
    padding: 1em 2em 2em 2em;
    color: #333333;
    transition: transform .5s, opacity .5s;
}

.accordion-001[open] p {
    transform: none;
    opacity: 1;
font-size: 1.2em;
}


@media screen and (max-width: 768px) {
.accordion-001 summary{
font-size: 0.9em;
}
}


/* 事例　*/
.case{
display: block;
}
@media screen and (max-width: 768px) {
  .case{
  margin: 0 20px;

  }
}

.case_title{
 text-align: center;
    font-weight: 700;
    font-size: 40px;
    line-height: 44px;
    letter-spacing: 1.5px;
    margin: 2.5em 0 1.8em;
}
@media screen and (max-width: 768px) {
  .case_title{ 
  margin: 2.5em 0 1.8em;
  }
}



.case-detail_area{
display:flex;
 gap: 2em;
 /* justify-content: space-between; */
max-width: 1250px;
 margin-left: auto;
 margin-right: auto;
 /* margin-bottom: 2em; */
}
@media screen and (max-width: 768px) {
  .case-detail_area{
  display: block;
  }
}


.case-detail_box{
    /* padding: 0.8em ; */
    /* padding: 3em ; */ 
     border-radius: 8px; 
    box-shadow: 0 0 10px 1px rgba(0,0,0,.1);
    display: block;
    position: relative;
    width: 400px;
    /* color: #191919; */
}

@media screen and (max-width: 768px) {
  .case-detail_box{
  margin: 0 auto 2em;
  }
}



.case-detail_box img{
 /* margin: 0 auto; */
/* width: 350px; */
/* margin: 0 auto 2em; */
border-radius: 8px 8px 0 0;
}

.case-detail_info{
 padding: 1.3em 1.6em;
 font-size: 16px;
}

.case-detail_info span{
    line-height: 1.1;
    font-size: 1.3em;
    color: #575A5E;
    font-weight: 700;
}

.case-detail_info h3{
    padding-top: 0.2em;
    line-height: 1.3;
    font-size: 1.6em;
    color: #1746A2;
    font-weight: 700;

}

.case-detail_info p{
    padding-top: 0.8em;
    line-height: 1.7;
   text-align: justify;
}

/*
.case-detail_info span{
 display: inline-block;
 line-height: 1.1;
 font-size: 18px;
 padding: 0.6em;
 color: #fff;  
 background: #1746A2;
 border-radius: 8px;
margin-bottom: 1em;
}
*/



/* SOAtestが選ばれている理由 */
.reason{
display: block;
}

@media screen and (max-width: 768px) {
  .reason{
  padding-bottom: 4em;
  margin: 0 20px;
  }
}

.reason_title{
 text-align: center; 
    font-weight: 700;
    font-size: 40px; 
line-heigt: 44px;
    letter-spacing: 1.5px;
    margin: 4em 0 2em;
}
@media screen and (max-width: 768px) {
  .reason_title{
  margin: 2.5em 0 1.8em;
  }
}

.reason_area{
max-width: 1250px;
 margin-left: auto;
 margin-right: auto;
 margin-bottom: 2em;
}

@media screen and (max-width: 768px) {
  .reason_img{
    display: flex;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
  }
}


.reason_box{
 display: flex;
 /* margin-top: 60px; */
 margin-bottom: 7.5em;
} 
@media screen and (max-width: 768px) {
  .reason_box{
   display: block;
  /* margin: 0 2em; */
   }
}


.reason_img02{
  padding-left: 50px;
  margin: 0 0 0 auto;
}

@media screen and (max-width: 768px) {
  .reason_img02{
    display: none;
  }
}


.reason_img02_sp{
 display: none;
}
@media screen and (max-width: 768px) {
   .reason_img02_sp{
   display: block;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
   }
}


.reason_content_title{
    font-weight: 700;
    font-size: 2.5em;
    margin: 0 0 1.2em;
    letter-spacing: 0.05em;
}

@media screen and (max-width: 768px) {
  .reason_content_title{
     margin: 1em 0 0;
  }
}

.reason_content_title span {
    color: #005A9E
}

.reason_content{
padding-left: 50px;
}
@media screen and (max-width: 768px) {
 .reason_content{
  padding: 0;
  }
}




.reason_content_text{
    font-size: 20px;
}
@media screen and (max-width: 768px) {
   .reason_content_text{
   margin-top: 1.2em;
   margin-bottom: 1.2em;
   }
}













/* SOAtestの特長 */
.features{
 /* background-color: #edf1fa; */
/* padding-bottom: 6em; */
}

@media screen and (max-width: 768px) {
  .features{
  margin-top: 6em;
 /* padding-bottom: 6em; */
  }
}

.features_title{
    text-align: center; 
    font-weight: 700;
    font-size: 40px;
    line-height: 44px;
    letter-spacing: 1.5px;
    margin: 1em 0 0;
   /* padding: 2em 0 0; */
}
@media screen and (max-width: 768px) {
  .features_title{
    margin: 0;
    padding: 2.5em 0 1.8em;
  }
}

.appeal04_title04{
 text-align: center;
    font-weight: 700;
    font-size: 40px;
    line-height: 44px;
    letter-spacing: 1.5px;
   padding: 3em 0 1em; 
}

.appeal04_title04::after{
/*   position: absolute;
    bottom: .2em;
    left: 0;
    z-index: -1;
*/
    display: block;
    width: 3em;
    height: 9px;
    border-radius: 10px;
    background: #80B1F7;
    content: "";
margin: 0.5em auto 0;
}

.features_area{
max-width: 1250px;
 margin-left: auto;
 margin-right: auto;
 margin-bottom: 2em;
}
@media screen and (max-width: 768px) {
  .features_area{
  margin: 0 2em;
   }
}

.features_box{
 display: flex;
 margin-bottom: 5.5em;
}
@media screen and (max-width: 768px) {
  .features_box{
  display: block;
  }
}

.features_content{
 width: 100%;
}

.features_content_item{
 display: flex;
 justify-content: center;
 align-items: center;
 width: 100%;
}

.features_content_item img{
    width: 5em; 
    margin: 0.8em;
}

.features_content_title{
    font-weight: 700;
    font-size: 1.9em;
    /* margin: 0 0 1.2em; */
    letter-spacing: 0.05em;
      margin: 0 auto 0 0;
      padding-left:  0.8em;
}

.features_content_text{
    font-weight: 700;
    font-size: 1.2em;
    letter-spacing: 0.05em;
    margin: 1em auto auto;
}

.features_content_img{
  width: 400px; 
  height: 266px; 
  margin: 0 0 0 auto;
  padding-left: 50px;
}
.features_content_img-sp{
  display: none;
}

@media screen and (max-width: 768px) {
   .features_content_img{
    display: none;
    }
   .features_content_img-sp{
    display: block;
    margin: 2em auto;
    }
}



/* 本文中ボタン */
.common-btn{
   max-width: 1250px;
    margin: 0 auto;
  /* padding: 0 0 6em; */
}
@media screen and (max-width: 768px) {
   .common-btn{
 /*  display: block; */
   margin: 0 auto;
   /* padding: 2em 0 2em; */
     padding: 0;
   }
}


.common-link_btn{
   display: flex;
    justify-content: space-between; 
}
@media screen and (max-width: 768px) {
   .common-link_btn{
    /* display: block; */
       display: flex;
    flex-flow: column;
    gap: 2em;
    margin: 0 auto;
   }
}

.common-link{
position: relative;
  width: 72%;
 background-color:#005A9E;
 padding: 0.8em 0; 
 text-align:center;
 margin: 0 5em ;
 border: 2px solid #005A9E;
 border-radius: 9999vh;
 font-size: 18px;
 font-weight: bold;
 color: #fff;
}
@media screen and (max-width: 768px) {
   .common-link{
   display: block;
   margin: 0 auto;
   }
}



.common-link:hover {
	color: #27acd9;
	background: #fff;
}




/* お役立ち情報 */
.info{
  display: block;
/*  margin: 7em 0 2em; */
}
@media screen and (max-width: 768px) {
   .info{
     margin:0;
   }
}

.info_inner{
 /* background-color: #F4F8FC; */
  /* padding: 2em 0; */
}
@media screen and (max-width: 768px) {
  .info_inner{
   padding: 0; 
  }
}

.info_title{
    text-align: center; 
    font-weight: 700;
    font-size: 40px;
    line-height: 44px;
    letter-spacing: 1.5px;
    margin: 4em 0 2em;
    /* padding: 2em 0; */
    /* padding: 2em 0; */
}
@media screen and (max-width: 768px) {
  .info_title{
  margin: 2.5em 0 1.8em;
  padding: 0;
  }
}
.info_area{
 max-width: 1250px;
 margin-left: auto;
 margin-right: auto;
 margin-bottom: 2em;
 display: flex;
 flex-wrap: wrap;
 gap: 20px;
}



.info-detail_box{
    border-radius: 8px; 
    background-color: #ffffff;
    box-shadow: 0 0 10px 1px rgba(0,0,0,.2);
    display: block;
    position: relative;
    width: 400px;
   /* margin: 0 0.8em 5em 0; */
}

@media screen and (max-width: 768px) {
  .info-detail_box{
  margin: 2em auto;
  }
}

.info-detail_box_img_f{
height: 250px;
   overflow:hidden;
}

.info-detail_box_img{
  border-radius: 8px 8px 0 0;
  transition-duration: .5s;
}

.info-detail_box a:hover .info-detail_box_img{
 transform: scale(1.08);
}

/*
.info-detail_box_img{
  transition:1s all;
}

.info-detail_box_img::hover{
  transform:scale(1.2,1.2);
  transition:1s all;
}
*/

.info-detail_info{
 padding: 2.5em 2em;
 font-size: 16px;
}

.info-detail_info h2{
 line-height: 1.3;
 font-size: 22px;
 font-weight: 700;
 color: #005A9E;
margin-bottom: 1.5em;
}

.info-p{
padding: 0 0 3em;
}


.arrow{
	position: relative;
	display: inline-block;
	padding: 0 0 0 16px;
	color: #000;
	vertical-align: middle;
	text-decoration: none;
	font-size: 15px;
}
.arrow::before,
.arrow::after{
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	margin: auto;
	content: "";
	vertical-align: middle;
}

.info-button{
    display: block;
    position: absolute;
    font-weight: 700;
    font-size: 14px;
    bottom: 2.5em;
    right: 2.5em;
  /*  padding: 13px 29px 14px 4px;
    border: 2px solid #074f90;
    border-radius: 5px;
    transition: background-color 0.26s, color 0.26s;*/
    color: #074f90;
    text-align: center;
}


.info-button::before{
	width: 12px;
	height: 12px;
	-webkit-border-radius: 50%;
	border-radius: 50%;
	background: #005A9E;
}
.info-button::after{
	left: 5px;
	box-sizing: border-box;
	width: 3px;
	height: 3px;
	border: 3px solid transparent;
	border-left: 3px solid #fff;
}

.info-button span{
    width: 177px;
    font-size: 18px;
  /*  position: absolute; */
  /*  bottom: 21px;
    left: 50%;
    margin-left: -89px; */
}




/* 本文中ボタン02 */

.common-btn02{
   max-width: 1250px;
   margin: 7em auto; 
}

.common-link_btn02{
 text-align: center; 
}

.common-link02{
  width: 100%;
 background-color:#005A9E;
 padding: 1.3em 8em; 
 text-align:center;
 margin: 0 auto ;
 border: 2px solid #005A9E;
 border-radius: 4vh;
 font-size: 16px;
 font-weight: bold;
 color: #fff;
}

.common-link02:hover {
	color: #27acd9;
	background: #fff;
}







/* コラム */
.column_title{
    text-align: center; 
    font-weight: 700;
    font-size: 40px;
    line-height: 44px;
    letter-spacing: 1.5px;
    margin: 4em 0 2em;
}
@media screen and (max-width: 768px) {
  .column_title{
  margin: 2.5em 0 1.8em;
  }
}


.column_area{
max-width: 1250px;
 margin-left: auto;
 margin-right: auto;
 margin-bottom: 10em;
/* flex-wrap: wrap; */
display: flex;
    gap: 0 32px;
}
@media screen and (max-width: 768px) {
  .column_area{
    display: block;
   }
}
.column-detail_box{
 display: flex;
 justify-content: center;
    display: block;
    position: relative;
    width: 360px;
    margin: 0 3em 5em 0;
}
@media screen and (max-width: 768px) {
   .column-detail_box{
    display: block;
    margin: 2em auto;
    border-radius: 8px; 
    background-color: #ffffff;
    box-shadow: 0 0 10px 1px rgba(0,0,0,.2);
  }
}

.column_content_title{
 display: inline-block;
 line-height: 1.1;
 font-size: 18px;
 padding: 0.6em;
 color: #fff;  
 background: #005A9E;
margin-bottom: 1em;
}

/* 時間 */
.time{
    margin-left: 13px;
}

.column-detail_info{
  padding: 2.5em 0 0;
}

@media screen and (max-width: 768px) {
 .column-detail_info{
  padding: 2.5em 2em;
  }
}

.column-detail_box_img_f{
   height: 250px;
   overflow:hidden;
}

.column-detail_box_img{
  border-radius: 8px 8px 0 0;
  transition-duration: .5s;
}

.column-detail_box a:hover .column-detail_box_img{
 transform: scale(1.08);
}

.column_item{
   margin: 2em 4em;
}
/*
.info_item img{
  width: 220px;
}
*/

/* ３ステップ */
.steps-container {
    display: flex;
    justify-content: space-between;
    text-align: center;
}

.step {
    flex: 1;
    margin: 20px;
}

.step img {
    width: 100px;
    height: 100px;
    margin: 10px 0;
}

.ex-3step-area {
  position: relative; /* 要素の位置を親要素に対して相対的に設定 */
  overflow: hidden; /* 子要素が親要素を超えた部分を非表示に設定 */
  padding: 1.75rem 2rem 2.75rem; /* 上右下の内側の余白を設定（左側のスペースは明示的に設定していません） */
  word-break: break-all; /* 単語がはみ出た場合に改行 */
  border-top: none; /* 上部の境界線を無くす */
  margin-top: 1.8em; /* 上部の外側の余白を設定 */
  font-size: 2em; /* フォントサイズを設定 */
  font-weight: 700; /* フォントの太さを設定 */
  text-align: center; /* テキストを中央揃えに設定 */
}

/* .ex-3step-areaクラス内のspan要素のスタイル */
.ex-3step-area span {
  font-size: 40px; /* フォントサイズを設定 */
  font-size: 4rem; /* フォントサイズを上書き設定 */
  position: relative; /* 要素の位置を親要素に対して相対的に設定（絶対位置を解除） */
  display: inline-block; /* 要素をインラインブロック要素として表示（中央揃えを可能にする） */
  padding: 3px 20px; /* 上下左右の内側の余白を設定 */
  color: #fff; /* テキストの色を白に設定 */
  border-radius: 10px 0 20px 10px; /* 角の丸みを設定（左上、右上、右下、左下） */
  background: #0A1F47; /* 背景色を設定 */
  margin: 0 auto; /* 要素を中央揃えに設定 */
}

/* .ex-3step-area .numberクラスのスタイル */
.ex-3step-area .number {
  background-color: #202933; /* 背景色を紺色に設定 */
  color: #fff; /* テキストの色を白に設定 */
  border-radius: 50%; /* 完全な丸にする */
  display: inline-flex; /* インラインフレックスボックスとして要素を表示 */
  align-items: center; /* 垂直方向のフレックスアイテムを中央に揃える */
  justify-content: center; /* 水平方向のフレックスアイテムを中央に揃える */
  width: 2em; /* 幅を設定 */
  height: 2em; /* 高さを設定 */
  margin: 0 auto 10px; /* 要素を中央に揃え、下側に余白を追加 */
  line-height: 2em; /* 行の高さを幅と同じに設定してテキストを中央に揃える */
  font-size: 1em; /* フォントサイズを調整 */
}



/* 最後のCTA */
.case-detail_area {
  display: flex;
  justify-content: center;
  gap: 20px; /* ボックス間の間隔を調整 */
  margin-bottom: 100px; /* 下のマージンを100pxに設定 */
}

.case-detail_box_new {
  max-width: 400px; /* 必要に応じてボックスの幅を調整 */
  text-align: center; /* ボックス内のテキストを中央揃え */
  border-radius: 8px;
  box-shadow: 0 0 10px 1px rgba(0, 0, 0, .1);
  padding: 20px; /* 内側のパディングを設定 */
  box-sizing: border-box; /* ボックスのサイズをボーダーとパディングを含めて計算 */
}

.case-detail_info_new {
  margin-top: 10px;
}

.info-title {
  font-size: 1.5em;
  font-weight: bold;
}

.button-inquiry, .button-dox-dl {
  display: inline-block;
  background-color: orenge;
  color: #173B47; /* 文字色を#173B47に設定 */
  padding: 10px 20px;
  text-align: center;
  text-decoration: none;
  font-size: 2.0rem; /* 文字の大きさを2.0remに設定 */
  font-weight: bold;
  border-radius: 50px; /* 角を完全に角丸に設定 */
  margin-top: 2rem; /* 上のマージンを2remに設定 */
  margin-bottom: 2rem; /* 下のマージンを2remに設定 */
  width: 80%; /* ボタンの横幅をboxの80%に設定 */
  position: relative; /* アイコンの位置を相対的に設定 */
}

.button-inquiry {
  background-color: #65C179; /* お問い合わせボタンの背景色を#F2691Fに設定 */
  color: white; /* 文字色を白に設定 */
}

.button-dox-dl {
  background-color: #173B47; /* 資料ダウンロードボタンの背景色を#173B47に設定 */
  color: white; /* 文字色を白に設定 */
}

.button-icon {
  width: 32px; /* アイコンの幅を32pxに設定 */
  height: 32px; /* アイコンの高さを32pxに設定 */
  vertical-align: middle; /* テキストとアイコンの縦位置を揃える */
  margin-right: 10px; /* アイコンとテキストの間にスペースを設定 */
}

/* 追加: 画像のマージン設定 */
.CTA-bottom-img {
  width: calc(100% - 40px); /* 親要素の幅から合計のマージンを引いた幅に設定 */
  margin: 20px; /* 上下左右のマージンを20pxに設定 */
  box-sizing: border-box; /* マージンを含めてボックスサイズを計算 */
}





/* フッター */
.soa-lp_footer{
 display: block;
}

.common-btn_footer{
   max-width: 1250px;
 margin: 0 auto; 
    padding: 4em 0 2em;
}

.common-link_btn_footer{
margin: 2em auto 0;
　　display:block;
}

.common-link_footer{
  display: block;
position: relative;
    width: 72%;
    background-color: #005A9E;
    padding: 0.8em 0;
    text-align: center;
    margin: 0 auto;
    border: 2px solid #005A9E;
    border-radius: 9999vh;
    font-size: 18px;
    font-weight: bold;
    color: #fff;
}

.footer-top{
  background-color: #173B47;
}

.common-link02 {
    position: relative;
    width: 72%;
    background-color: #005A9E;
    padding: 0.8em 0;
    text-align: center;
    margin: 0 5em;
    border: 2px solid #005A9E;
    border-radius: 9999vh;
    font-size: 18px;
    font-weight: bold;
    color: #fff;
}

.footer01{
  position: relative;
  display: flex;
  padding: 70px 0 50px;
    max-width: 1250px;
    margin-left: auto;
    margin-right: auto;
}
@media screen and (max-width: 768px) {
  .footer01{
  margin: 0 20px;
  }
}
@media screen and (max-width: 768px) {
  .footer01-img-sp{
  }
}

.footer01 img{
 position: absolute;
  width: 300px;
}

.footer01_linkbox{
z-index: 2;
margin: 0 auto;
}
@media screen and (max-width: 768px) {
  .footer01_linkbox{
  margin: 10em 0 0;
  }
}

.footer01_linkbox ul{
   position: relative;
   margin: 0 0 16px;
   display: flex;
}

.footer01_linkbox li{
position: relative;
width: 208px;
}

.footer01_linkbox li a{
position: relative;
color: #fff;
}


.copyright_soalp{
 color: #fff;
max-width: 1250px;
    margin-left: auto;
    margin-right: auto;
  padding: 0 0 70px;
}

@media screen and (max-width: 768px) {
   .copyright_soalp{
    margin: 0 20px;
   }
}

.footer02{
    height: 144px;
    padding: 0 0;
}

.footer02 ul{
    display: grid;
    -ms-grid-columns: 296px 1fr;
    grid-template-columns: 296px 1fr;
    gap: 0 24px;
    margin: 0 auto;
    width: 430px;
   text-align: center;
}

.footer02 li{
-webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    display: -ms-grid;
    display: grid;
    margin: 0 0 0;
}

.footer02 a{
display: block;
}

.footer02 li img{
 max-height: 146px;
}

/*上に戻るボタン*/
#page-top{
	display: flex;
	justify-content:center;
	align-items:center;
	background: #00223F;
	border-radius: 100%;
	width: 60px;
	height: 60px;
	color: #fff;
	text-align: center;
	text-transform: uppercase; 
	text-decoration: none;
	font-size:0.6rem;
	transition:all 0.3s;
}



#page-top:hover{
	background: #F2691F;
}

/*リンクを右下に固定*/
#page-top {
	position: fixed;
	right: 10px;
	bottom:10px;
	z-index: 2;
    /*はじめは非表示*/
	opacity: 0;
	transform: translateY(100px);
}

/*　上に上がる動き　*/

#page-top.UpMove{
	animation: UpAnime 0.5s forwards;
}
@keyframes UpAnime{
  from {
    opacity: 0;
	transform: translateY(100px);
  }
  to {
    opacity: 1;
	transform: translateY(0);
  }
}

/*　下に下がる動き　*/

#page-top.DownMove{
	animation: DownAnime 0.5s forwards;
}
@keyframes DownAnime{
  from {
  	opacity: 1;
	transform: translateY(0);
  }
  to {
  	opacity: 1;
	transform: translateY(100px);
  }
}
.page-top__arrow {
    height: 15px;
    width: 15px;
    border-top: 5px solid #fff;
    border-left: 5px solid #fff;
    transform: translateY(3px) rotate(45deg);
}




/* ポップアップ */
.juicerPopupBanner {
 bottom: 130px; 
  margin: 0 20px;
  position: fixed;
  left: 0;
  -webkit-transform: translateY(100%);
  transform: translateY(100%);
  z-index: 100;
  display: none;

 &.hidden {
    opacity: 0;
    visibility: hidden;
  }
}

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

  }
}

.juicerPopupBanner.is-show {
  -webkit-transform: translateY(-40px);
  transform: translateY(-40px);
  -webkit-transition: bottom 700ms ease, -webkit-transform 700ms ease;
  transition: bottom 700ms ease, -webkit-transform 700ms ease;
  transition: bottom 700ms ease, transform 700ms ease;
  transition: bottom 700ms ease, transform 700ms ease, -webkit-transform 700ms ease;
}

.juicerPopupBanner .popup_inner {
  margin: 0 auto;
  max-width: 300px;
  position: relative;
}

@media screen and (max-width: 768px) {
  .juicerPopupBanner .popup_inner  {
    max-width: 224px;
  }
}


.juicerPopupBanner img {
  display: block;
  max-width: 100%;
}

.juicerPopupBanner .close {
  cursor: pointer;
  height: 30px;
  position: absolute;
  right: 0;
  top: 0;
  -webkit-transform: translate(50%, -50%);
  transform: translate(50%, -50%);
  width: 30px;
}





.js-fade {
    opacity: 0;
    visibility: hidden;
    transform: translateY(50px);
    transition: opacity 1s,visibility 1s, transform 1s;
}

.scroll {
    opacity: 1;
    visibility: visible;
    transform: translateY(0px);
}

.visually-hidden {
  position: fixed !important;
  top: 0px !important;
  left: 0px !important;
  width: 4px !important;
  height: 4px !important;
  opacity: 0 !important;
  overflow: hidden !important;
  border: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: block !important;
  visibility: visible !important;
}