/***********************************************
 stage
************************************************/
#stage{
    padding: 25px 0;
    background: url(../images/top/stage-bg.webp) no-repeat;
    background-size: cover;
    background-position: center center;
}
/***********************************************
 main-stage
************************************************/
.main-stage{
    max-width: 1280px;
    width: 90%;
    margin: 80px auto 25px auto;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    align-items: center;
}
.main-stage .column-l{
    width: 37%;
}
.main-stage .column-l h1 span{
    display: block;
    font-size: 2vw;
    font-weight: 700;
    line-height: 130%;
    margin: 25px 0;
    text-shadow: 0 0 2px #fff,0 0 5px #fff,0 0 10px #fff,0 0 15px #fff,0 0 25px #fff;
}
@media screen and (min-width: 1280px) {
.main-stage .column-l h1 span{
    font-size: 28px;
}
}
.main-stage .column-l h1 img{
    width: 100%;
    height: auto;
}
.main-stage .column-l ul{
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}
.main-stage .column-l ul li{
    width: 31%;
    text-align: center;
}
.main-stage .column-l ul li span{
    display: block;
    font-size: 1.3vw;
    font-weight: 700;
    margin: 5px 0 0 0;
    line-height: 120%;
}
@media screen and (min-width: 1100px) {
.main-stage .column-l ul li span {
    font-size: 16px;
}
}
.main-stage .column-l ul li img{
    width: 100%;
    height: auto;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
}
.main-stage .column-r{
    width: 62%;
}
.main-stage .column-r img{
    width: 100%;
    height: auto;
}
.stage-award {
    margin: 0 2.5%;
    max-height: 90px;
}
.stage-award ul{
    max-width: 340px;
    display: flex;
}
.stage-award ul li{
    height: 90px;
}
.stage-award ul li img{
    width: 100%;
    height: auto;
}
/***********************************************
 top-about
************************************************/
#top-about{
    margin: 90px auto 0 auto;
    max-width: 1100px;
    width: 100%;
    padding: 25px;
    background: url(../images/top/about-bg.jpg) no-repeat;
    background-size: cover;
    background-position:  center center;
    position: relative;
}
#top-about .awd{
    position: absolute;
    content: "";
    right: 2.5%;
    top: 2.5%;
    display: block;
    width: 16%;
}
#top-about .awd img{
    width: 100%;
    height: auto;
}
#top-about .inner{
    background:  rgba(255, 255, 255, 0.75);
    width: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}
#top-about .inner .column{
    max-width: 460px;
    width: 90%;
    padding: 60px 0;
}
#top-about .inner .column img{
    width: 100%;
    height: auto;
}
#top-about .inner .column h1{
    font-size: clamp(1.5rem, 1.071rem + 1.07vw, 1.875rem);
    margin: 25px 0;
}
#top-about .inner .column p{
    font-size: clamp(1rem, 0.857rem + 0.36vw, 1.125rem);
}
#top-about .inner .column a.more-grd{
    color: #ffff45 !important;
}
/***********************************************
 top-features
************************************************/
#top-features{
    margin: 60px auto;
}
#top-features .inner{
    max-width: 1200px;
    width: 90%;
    margin: 0 auto;
}
#top-features .inner .frm h3:nth-of-type(1){
    margin: 0 0 1em 0 ;
}
#top-features .inner .frm h3{
    background: var(--gradation);
    font-size: clamp(1.375rem, 0.804rem + 1.43vw, 1.875rem);
    font-weight: 700;
    color: #fff;
    min-height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    padding: .5em;
    margin: 2em 0 1em 0;
}
#top-features .inner .frm h3:before{
    position: absolute;
    content: "";
    right: 5px;
    bottom: -1px;
    width: 140px;
    height: 72px;
    background: url(../images/common/topics-bg.webp) no-repeat;
    background-position: center bottom;
    background-size: cover;
}
#top-features .inner .frm h3 span{
    position: relative;
    z-index: 2;
}
#top-features .inner .frm p{
    font-size: 18px;
}
#top-features .inner .frm span.alert{
    font-size: 15px;
    display: block;
    padding: 10px 0;
}
#top-features .inner .frm h4{
    font-size: clamp(1.25rem, 0.964rem + 0.71vw, 1.5rem);
    font-weight: 700;
    line-height: 120%;
    margin: 2em 0 .5em 0;
}
#top-features .inner .frm dl{
    margin: 0;
    padding: 30px;
    background: var(--bg-color);
    display: flex;
    align-items: center;
    border-radius: 10px;
}
#top-features .inner .frm dt{
    width: 175px;
    margin: 0 20px 0 0;
    padding:0;
}
#top-features .inner .frm dd{
    margin: 0;
    padding:0;
    font-size: clamp(1.125rem, 0.982rem + 0.36vw, 1.25rem);
    font-weight: 700;
}
#top-features .inner .frm .step{
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}
#top-features .inner .frm .step li {
    width: 17%;
    text-align: center;
}
#top-features .inner .frm .step li:not(:last-child) {
    position: relative;
}
#top-features .inner .frm .step li:not(:last-child):before {
    position: absolute;
    content: "";
    right: -15%;
    top: 36%;
	background: var(--sub-color);
    height: calc(48px / 2);
    width: 20px;
    clip-path: polygon(0 0, 100% 50%, 0 100%);
}
#top-features .inner .frm .step li img{
    width: 100%;
    height: auto;
    border: 3px solid #9edff6;
    box-sizing: border-box;
}
#top-features .inner .frm .step li span{
    display: block;
    font-size: clamp(1rem, 0.857rem + 0.36vw, 1.125rem);
    margin: 5px 0 0 0;
    line-height: 120%;
}
#top-features .inner .frm .system-map{
    background: #f6f6f6;
    padding: 30px;
    text-align: center;
}
#top-features .inner .frm .system-map img{
    width: 100%;
    height: auto;
    max-width: 680px;
}
#top-features .inner .frm .rows{
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    margin: 40px 0 0 0;
}
#top-features .inner .frm .rows .column{
    width: 48%;
}
#top-features .inner .frm .rows .column h5{
    font-size: clamp(1.125rem, 0.982rem + 0.36vw, 1.25rem);
    font-weight: 700;
    margin: .5em 0;
}
#top-features .inner .frm .rows .column table{
    border-top: 1px solid #144da4;
    font-size: clamp(0.875rem, 0.732rem + 0.36vw, 1rem);
    border-spacing:0;
}
#top-features .inner .frm .rows .column table th{
    border-bottom: 1px solid #144da4;
    vertical-align: top;
    text-align: left;
    padding: .7em;
    white-space: nowrap;
    width: 1%;
}
#top-features .inner .frm .rows .column table td{
    border-bottom: 1px solid #144da4;
    padding: .7em;
}
/***********************************************
 top-solution
************************************************/
#top-solution{
    padding: 0;
}
#top-solution .inner{
    position: relative;
    z-index: 2;
    max-width: 1140px;
    width: 90%;
    margin: 0 auto;
    background: #fff;
    padding: 0 5%;
    box-sizing: border-box;
}
#top-solution .inner .rows {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}
#top-solution .inner .set{
    width: 48%;
    background: var(--sub-color);
    box-shadow:
    -5px 5px 15px rgba(0, 0, 0, 0.15),
    5px -5px 15px rgba(0, 0, 0, 0.15);
    margin: 0 0 40px 0;
}
#top-solution .inner .set .bg-wh {
    background: #fff;
}
#top-solution .inner .set h3{
    font-size: clamp(1.25rem, 0.964rem + 0.71vw, 1.5rem);
    line-height: 130%;
    padding: 30px 3% 15px 3%;
    text-align: center;
    min-height: 105px;
}
#top-solution .inner .set .prb-img {
    max-width: 210px;
    margin: 0 auto;
}
#top-solution .inner .set:nth-of-type(5) .prb-img,
#top-solution .inner .set:nth-of-type(6) .prb-img {
    max-width: 280px;
    margin: 0 auto;
}
#top-solution .inner .set .prb-img img{
    width: 100%;
    height: auto;
}
#top-solution .inner .set .bg-bl {
    background: var(--sub-color);
    padding: 50px 3% 20px 3%;
    position: relative;
}
#top-solution .inner .set .bg-bl:before {
    position: absolute;
    content: "";
    left: 0;
    right: 0;
    top: -1px;
    margin: auto;
    background: url(../images/top/dw-next.svg) no-repeat;
    background-size: 100% auto;
    background-position: top center;
    width: 100%;
    height: 40px;
}
#top-solution .inner .set .bg-bl h4{
    font-size: clamp(1.25rem, 0.964rem + 0.71vw, 1.5rem);
    font-weight: 700;
    color: #ffff45;
    text-align: center;
    margin: .5em 0;
}
#top-solution .inner .set .bg-bl dl{
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    align-items: center;
}
#top-solution .inner .set .bg-bl dl dt{
    margin: 0;
    padding: 0;
    width: 90px;
}
#top-solution .inner .set .bg-bl dl dt img{
    width: 100%;
    height: auto;
}
#top-solution .inner .set .bg-bl dl dd{
    width: calc(100% - 100px);
    font-size: 16px;
    font-weight: 400;
    color: #fff;
    margin: 0;
    padding: 0;
}
#top-solution .inner .set .bg-bl dl dd span{
    display: block;
    font-size: clamp(0.75rem, 0.679rem + 0.18vw, 0.813rem);
    font-weight: 400;
    line-height: 120%;
    margin: 5px 0 0 0;
}
/***********************************************
 top-spec
************************************************/
#top-spec{
}
#top-spec .inner{
    max-width: 1300px;
    width: 90%;
    margin: 0 auto;
}
#top-spec .spec-bg{
    background: linear-gradient(to right, #005697 0, #144da4 100%);
    padding: 30px 0 70px 0;
}
#top-spec .spec-bg .rows{
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}
#top-spec .spec-bg .rows .set{
    width: 23%;
    background: #fff;
    box-shadow: 5px 5px 5px 0 rgba(0, 0, 0, .35);
    margin-top: 40px;
}
#top-spec .spec-bg .rows .set .ic-box{
    background: #f6f6f6;
    text-align: center;
    padding: 25px 0;
}
#top-spec .spec-bg .rows .set .ic-box img{
    width: 100%;
    height: auto;
    max-width: 92px;
}
#top-spec .spec-bg .rows .set .spec-txt{
    padding: 25px 20px 5px 20px;
}
#top-spec .spec-bg .rows .set .spec-txt h3{
    font-size: 18px;
    font-weight: 700;
    line-height: 120%;
}
#top-spec .spec-bg .rows .set .spec-txt h3 span{
    font-size: 13px;
    font-weight: 400;
    line-height: 100%;
    display: inline-block;
    margin-left: 5px;
}
#top-spec .spec-bg .rows .set .spec-txt p{
    font-size: 15px;
    line-height: 150%;
}
#top-spec .spec-bg .alert{
    font-size: 14px;
    line-height: 130%;
    color: #fff;
    display: inline-block;
    margin: 10px 0 0 0;
}
/***********************************************
 top-review
************************************************/
#top-review .inner{
    max-width: 1400px;
    width: 95%;
    margin: 0 auto;
}
.swiper {
  padding-bottom: 100px !important;
}
#top-review .inner .set{
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
    background: #fff;
    border: 1px solid #ddd;
    box-sizing: border-box;
}
#top-review .inner .set .photo-box{
    height: 240px;
    position: relative;
    overflow: hidden;
}
#top-review .inner .set .photo-box img{
    width: 100%;
    height: 240px;
    object-fit: cover;
    transition: all  0.2s ease;
}
#top-review .inner .set .photo-box img:hover{
    transform:scale(1.2,1.2);
}
#top-review .inner .review-box{
    padding: 1em 1em 40px 1em;
    position: relative;
}
#top-review .inner .review-box:before{
    position: absolute;
    content: "";
    right: 1em;
    bottom: 20px;
    background: url(../images/top/sw-ar.svg) no-repeat;
    background-size: cover;
    width: 13px;
    height: 22px;
}
#top-review .inner .set .review-box h3{
    font-size: 18px;
    font-weight: 700;
}
#top-review .inner .set .review-box h4{
    font-size: 15px;
    margin: 30px 0 0 0;
}
/***********************************************
 top-estimate
************************************************/
#top-estimate{
    margin: 60px 0;
}
#top-estimate .inner{
    max-width: 1000px;
    width: 90%;
    margin: 0 auto;
    border-radius: 1.5vw;
    border: 3px solid #144da4;
    box-sizing: border-box;
    padding: 2%;
    background: #fff;
    box-shadow: 10px 10px 0px 0px rgba(20, 77, 164, 1);
}
#top-estimate .inner .estimate-topics{
    color: #ffff45;
    font-size: clamp(1.5rem, 0.929rem + 1.43vw, 2rem);
    font-weight: 700;
    padding: 1em ;
    background: var(--sub-color);
    border-radius: .5vw;
    text-align: center;
}
#top-estimate .inner .trial{
    margin: 25px 0 0 0;
    background: var(--bg-color);
    padding: 3%;
    border-radius: .5vw;
}
#top-estimate .inner .trial strong{
    display: block;
    text-align: center;
    font-size: clamp(1.5rem, 1.214rem + 0.71vw, 1.75rem);
    line-height: 120%;
}
#top-estimate .inner .trial strong .marker{
    background: linear-gradient(transparent 60%, #ffff45 60%);
}
#top-estimate .inner .trial .trial-case{
    margin: 25px auto;
}
#top-estimate .inner .trial-01 .trial-case{
    max-width: 295px;
}
#top-estimate .inner .trial .trial-case img{
    width: 100%;
    height: auto;
}
#top-estimate .inner .trial table{
    width: 100%;
    max-width: 690px;
    margin: 0 auto 2em auto;
    border-spacing: 0;
    border-right: 1px solid var(--main-color);
    border-bottom: 1px solid var(--main-color);
}
#top-estimate .inner .trial table th{
    text-align: left;
    font-weight: normal;
    background: #e3ecf4;
    padding: 5px;
    border-left: 1px solid var(--main-color);
    border-top: 1px solid var(--main-color);
    font-size: 15px;
}
#top-estimate .inner .trial table td{
    font-size: 15px;
    background: #fff;
    padding: 5px;
    border-left: 1px solid var(--main-color);
    border-top: 1px solid var(--main-color);
}
#top-estimate .inner .trial dl{
}
#top-estimate .inner .trial dt{
    font-size: clamp(1.125rem, 0.982rem + 0.36vw, 1.25rem);
    font-weight: 700;
    margin: 20px 0 10px 0;
}
#top-estimate .inner .trial dd{
    margin: 0;
    padding: 0;
}
#top-estimate .inner .trial dd img{
    width: 100%;
    height: auto;
}
#top-estimate .inner .total{
    color: #fff;
    font-size: clamp(1.5rem, 0.929rem + 1.43vw, 2rem);
    line-height: 140%;
    font-weight: 700;
    padding: 1em ;
    background: var(--sub-color);
    border-radius: .5vw;
    text-align: center;
    margin: 30px 0 0 0;
}
#top-estimate .inner .total span{
    color: #ffff45;
}
#top-estimate .inner .total span strong{
    font-size: clamp(2rem, 0.857rem + 2.86vw, 3rem);
    font-weight: 700;
}
/***********************************************
 top-system
************************************************/
#top-system{
    margin: 60px auto;
}
#top-system .inner{
    max-width: 1200px;
    width: 90%;
    margin: 0 auto;
}
#top-system .inner .frm h3:nth-of-type(1){
    margin: 0 0 1em 0 ;
}
#top-system .inner .frm p{
    font-size: 18px;
}
#top-system .inner .frm .system-map{
    background: #f6f6f6;
    padding: 30px;
    text-align: center;
}
#top-system .inner .frm .system-map img{
    width: 100%;
    height: auto;
    max-width: 680px;
}
#top-system .inner .frm .rows{
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    margin: 40px 0 0 0;
}
#top-system .inner .frm .rows .column{
    width: 48%;
}
#top-system .inner .frm .rows .column h3{
    font-size: clamp(1.125rem, 0.982rem + 0.36vw, 1.25rem);
    font-weight: 700;
    margin: .5em 0;
}
#top-system .inner .frm .rows .column table{
    border-top: 1px solid #144da4;
    font-size: clamp(0.875rem, 0.732rem + 0.36vw, 1rem);
    border-spacing:0;
}
#top-system .inner .frm .rows .column table th{
    border-bottom: 1px solid #144da4;
    vertical-align: top;
    text-align: left;
    padding: .7em;
    white-space: nowrap;
    width: 1%;
}
#top-system .inner .frm .rows .column table td{
    border-bottom: 1px solid #144da4;
    padding: .7em;
}
@media screen and (max-width: 980px) {
/***********************************************
 top-spec
************************************************/
#top-spec .spec-bg .rows .set{
    width: 32%;
}
}
@media screen and (max-width: 850px) {
/***********************************************
 top-about
************************************************/
#top-about .inner{
    width: 65%;
}
/***********************************************
 top-solution
************************************************/
#top-solution .inner{
    width: 95%;
    padding: 0 3%;
}
}
@media screen and (max-width: 768px) {
}
@media screen and (max-width: 640px) {
/***********************************************
 stage
************************************************/
#stage{
    background-position: left 20% center;
}
/***********************************************
 main-stage
************************************************/
.main-stage{
    margin: 25px auto 15px auto;
}
.main-stage .column-l{
    width: 100%;
    order: 2;
    max-width: 460px;
    margin: 20px auto;
}
.main-stage .column-l h1 span{
    font-size: 18px;
}
.main-stage .column-r{
    width: 100%;
    order: 1;
}
.main-stage .column-l ul li span{
    font-size: 13px;
}
.stage-award ul li{
    height: auto;
}
/***********************************************
 top-about
************************************************/
#top-about{
    padding: 15px;
    background-position:  center right 5%;
}
#top-about .awd{
    position: absolute;
    content: "";
    right: 5px;
    top: -15px;
    display: block;
    width: 100px;
}
#top-about .inner{
    width: 100%;
}
#top-about .inner .column{
    padding: 85px 0 30px 0;
}
/***********************************************
 top-features
************************************************/
#top-features .inner .frm dl{
    flex-wrap: wrap;
    padding: 15px;
}
#top-features .inner .frm dt{
    max-width: 175px;
    width: 100%;
    margin: 0 auto 20px auto;
}
#top-features .inner .frm dd{
    width: 100%;
}
#top-features .inner .frm .step:after{
    content:"";
    display: block;
    width:30%;
}
#top-features .inner .frm .step li:not(:last-child):before {
    right: -10%;
    top: 36%;
    height: calc(24px / 2);
    width: 10px;
}
#top-features .inner .frm .step li {
    width: 30%;
    text-align: left;
    margin-bottom: 15px;
}
#top-features .inner .frm .step li span{
    font-size: 14px;
}
/***********************************************
 top-solution
************************************************/
#top-solution .inner .set{
    width: 100%;
}
#top-solution .inner .set .bg-bl {
    padding: 30px 3% 20px 3%;
}
#top-solution .inner .set .bg-bl dl dt{
    margin: 0 auto 10px auto;
    max-width: 90px;
    width: 100%;
}
#top-solution .inner .set .bg-bl dl dd{
    width: 100%;
}
/***********************************************
 top-spec
************************************************/
#top-spec .spec-bg .rows .set{
    width: 48%;
    margin-top: 20px;
}
#top-spec .spec-bg .rows .set .spec-txt{
    padding: 15px ;
}
/***********************************************
 top-review
************************************************/
#top-review .inner{
    width: 100%;
}
#top-review a.more{
    width: 90%;
}
/***********************************************
 top-estimate
************************************************/
#top-estimate .inner{
    padding: 4%;
}
#top-estimate .inner .estimate-topics{
    text-align: left;
}
#top-estimate .inner .trial strong{
    text-align: left;
}
/***********************************************
 top-system
************************************************/
#top-system .inner .frm .rows .column{
    width: 100%;
    margin-bottom: 30px;
}
}
@media screen and (max-width: 540px) {

}
@media screen and (max-width: 450px) {
}
@media screen and (max-width: 400px) {
/***********************************************
 top-spec
************************************************/
#top-spec .spec-bg .rows .set{
    width: 100%;
}
}
@media screen and (max-width: 300px) {
}